Hugo&Alfred活用でブログ画像アップロード効率アップ

hugo

このサイトをHugoで構築して3年ほど経ちますが、ブログ内の記事ではほとんどimgurを利用しています。
imgurの画像を表示させるには、そのままimgurの画像URLを貼り付けても良いのですが、webp対応・非対応のブラウザを判別して最適なファイルフォーマットで出力できるように、ショートコードを作成して対応しています。
この記事では、imgur・macOS・Alfredの利用を前提としています。
ショートコードを使ったブログ作成時に少し煩わしいのが、いちいちimgurの画像IDを調べて、ショートコードに記入しなくてはならない点です。
実際の作業は以下の通りです。

  1. imgur.comをブラウザで開く
  2. 画像をimgurにアップロード
  3. アップロードした画像をクリックし、ファイル名のIDを取得
  4. ショートコードにIDを記入

いちいちブラウザでimgur.comを開くのが面倒なので、以下のツールを使っています。

Chrome拡張機能
https://chromewebstore.google.com/detail/imgur-community-extension/ehoopddfhgaehhmphfcooacjdpmbjlao
macOSアプリ
https://github.com/mileswd/mac2imgur

特に、mac2imgurを使うと、画像をそのままDrag&Dropするだけでアップロードし、URLをクリップボードに保存してくれるので便利です。

imgurのURLをショートコードへ変換

クリップボードにコピーされたURLは、https://i.imgur.com/tsT64dx.jpegのようなURLになるので、これをショートコードの{{< imgur id="tsT64dx" >}}へ変換することになります。
macOSでは、クリップボードのコマンドでpbcopy、pbpasteがあるので、これを利用して変換することが可能です。

pbpaste | sed 's/.*\/\([^.]*\)\..*/{{< imgur id="\1" >}}/' | pbcopy

このコマンドを毎回打つのも面倒なので、シェルのエイリアスにしても良いかもしれませんが、私はAlfredのホットキーで行うことにしました。

Alfredワークフロー

  1. Alfredの設定から、Workflowsを選び、Blank Workflowで新規作成します。
  2. TriggersからHotkeyを選び、ホットキーを設定します。私はCTRL+Iに設定しました。
  3. ActionsからRun Scriptを選び、Languageのシェルを設定(/bin/bashとか/bin/zsh)、Scriptにpbpaste | sed 's/.*\/\([^.]*\)\..*/{{< imgur id="\1" >}}/' | pbcopyを入力し、保存します。

改善結果

mac2imgurとAlfredのワークフローを設定した結果、画像をDrag&Dropした後に、CTRL+Iを押すだけで、ブログ記事内にHugoのショートコードが挿入されるようになったので、作業がかなり楽になりました。