Webapp

はじめに いつもブログ記事に載せるキャプチャ画像の編集 & アップロード先として 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 にアップした直近の画像が確認できるはずです ...