Gyazo を技術記事を書く用途で使っているので専用の便利ツールを作ってみた

はじめに

いつもブログ記事に載せるキャプチャ画像の編集 & アップロード先として Gyazo を利用させていただいているのですが、日々使っている中で不満に感じる点もちょくちょく出てくるようになってきました。

そのため、3連休を用いて Rust の勉強がてら Bloggimg というウェブアプリケーションを作ってみました。ソースコードは MIT ライセンスで GitHub のリポジトリにアップしております。ちなみに最初は Gyazo for Blog という名称で開発をしていたため、本記事内のスクショには Gyazo for Blog という文字列が出てきますが、現在は Bloggimg という名称になっております。。

Bloggimg を開発したのは、ブログ記事を書く際に利用する画像のアップロードから加工、マークダウンとして利用するまでのフローを最適化したかったからです。 ブログ記事を書く際に、記事内で用いるスクショ画像の加工や、そのアップロードにすごく時間を取られてしまうなーと日頃から感じていたのでそれを解決したかったのです。✅

開発中に得た知見等については別途技術記事として書いて残す予定です。

考えていたこと

今回 Bloggimg の開発を行うに当たり、考えていた点は下記になります。

• 画像の編集ツールは引き続き Gyazo に用意されているものを使う
  • 既に最高に使いやすい 👑
• キャプチャ画像をアップロードする際に、自動的に特定のコレクションに紐付けるようにする
  • 技術記事毎にコレクションを分けて管理しているため、技術記事を書いている最中にアップするキャプチャ画像は全て特定のコレクションにまとまっていて欲しい
• ワークスペースのようなツールを目指し、ブログを書く時だけに使える機能を開発する
  • 例えば、ワンクリックで画像マークダウンの記述がコピーできたり、画像のアップロードをし直しやすくするため画像削除がお手軽に出来るよう削除ボタンに即アクセス出来るようにしたり...

特にアップした画像を 自動的に特定のコレクションに紐付けるようにする については本記事で紹介しているウェブアプリケーションを作成するキッカケとなった点なので外せない点でした。

使い方

Bloggimg の使い方についてご紹介いたします。

ログインする

Bloggimg を利用するためには、まず Gyazo アカウントでログインして頂く必要がございます。トップページの右上にあるログインボタンから Gyazo アカウントでログインします。

1. トップページ右上に配置されたログインボタンから Gyazo アカウント認証を行う

2. Gyazo アカウント認証が正常に完了したら、再度トップページを開く

3. トップページを開いた時に Gyazo にアップした直近の画像が確認できるはずです

ログアウトする

ウェブアプリケーションからログアウトするには、ログイン後にトップページ右上に表示される ログアウト ボタンをクリックすることでログアウトできます。

ログイン後にトップページ右上に表示される ログアウト ボタンをクリックしてログアウトする

画像ファイルをアップロードする

画像は一枚でも複数枚でもアップロードすることが可能です。画像アップロードの方法としてドラッグ & ドロップとファイル選択ダイアログを用意しております。

画面中央の点線枠内に画像ファイルをドラッグ & ドロップするか、点線枠内をクリックしてファイル選択ダイアログから選択することで画像をアップロードできる

画像ファイルをアップロードする際に自動でコレクションを紐付ける

Gyazo トップページ左端にコレクションリストが表示されているので、画像を紐づけたいコレクションを選択します。新たにコレクションを作成する場合はコレクションリスト上部にある コレクションを作成 ボタンをクリックします。

1. コレクションリストの中から画像を紐づけたいコレクションを選択する

2. コレクションを選択後に遷移した先の URL 末尾のコレクション ID をコピーする

3. トップページの最上部に 2. で控えていたコレクション ID をペーストする

上記までのステップが完了し、正しくコレクション ID が入力できていれば、次回以降のファイルアップロード時に自動で指定したコレクションに画像が紐づくようになります。

アップロードした画像ファイルを編集する

画像ファイルのアップロード時や 画像の再読み込み ボタンをクリックすることで、最新 20件の画像リストを画面最下部にロードされます。画像リストの各項目ではプレビュー、編集、削除、マークダウンのコピーを行うことが可能です。

画像リストの各項目の機能概要図

プレビュー

サムネ画像をクリックすることで、Gyazo にアップした元画像をプレビューすることが可能です。サムネ画像では画像の判別がしにくい場合に詳細を確認するための機能となります。

アップした画像の詳細を確認するためにプレビュー機能を利用する

編集

編集は該当画像の Gyazo ページにて行えるように、タイトルをクリックすることで Gyazo ページを別タブで開きます。

別タブで開いた Gyazo ページから画像の編集作業を行う

削除

画像の削除は 画像の削除 ボタンをクリックすることで、削除を行うための画面に遷移します。削除しようとしている画像で間違いないか確認後、削除を行うという手順になっております。

Gyazo から選択した画像を削除する

マークダウンのコピー

マークダウンをコピー ボタンをクリックすることで、クリップボードにマークダウン形式で該当画像を表示するための記述をコピーすることができます。具体的には下記のような記述がコピーされます。

ブログを書く先がマークダウン形式での記述に対応していれば、そのままペーストするだけで画像を表示することが可能です。

![スクリーンショット 2021-01-11 17.10.11.png](https://i.gyazo.com/a3e219b5efb8494103432b369ee99534.png)

おわりに

この記事を書くのにも実際に Bloggimg を用いましたが、個人的に今までよりも Gyazo でブログ記事内で利用する画像に関する作業効率は上がったように感じました。ブログを書くという用途に Gyazo を利用されている方のお役に立てれば幸いです。

また、今後は下記の機能実装を進めていく予定です。

• 画像アップ時に自動でアスペクト比を維持した状態で画像のリサイズを自動で行う機能
• 画像アップ時のタイトルの接頭辞が指定できるようにする機能
• 編集した画像が自動的にコレクションに紐づく機能
  • 心残りな点として編集した画像をコレクションに紐付ける機能は API でできなかったため、現在手動で行う必要があります。。Gyazo の API がコレクションの紐づけにも対応したら対応したいと考えています ✅