はじめに

い぀もブログ蚘事に茉せるキャプチャ画像の線集 & アップロヌド先ずしお Gyazo を利甚させおいただいおいるのですが、日々䜿っおいる䞭で䞍満に感じる点もちょくちょく出おくるようになっおきたした。

そのため、3 連䌑を甚いお Rust の勉匷がおら Bloggimg ずいうりェブアプリケヌションを䜜っおみたした。゜ヌスコヌドは MIT ラむセンスで GitHub のリポゞトリにアップしおおりたす。ちなみに最初は Gyazo for Blog ずいう名称で開発をしおいたため、本蚘事内のスクショには Gyazo for Blog ずいう文字列が出おきたすが、珟圚は Bloggimg ずいう名称になっおおりたす。。

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

開発䞭に埗た知芋等に぀いおは別途技術蚘事ずしお曞いお残す予定です。

考えおいたこず

今回 Bloggimg の開発を行うに圓たり、考えおいた点は䞋蚘になりたす。

  • 画像の線集ツヌルは匕き続き Gyazo に甚意されおいるものを䜿う
    • 既に最高に䜿いやすい 👑
  • キャプチャ画像をアップロヌドする際に、自動的に特定のコレクションに玐付けるようにする
    • 技術蚘事毎にコレクションを分けお管理しおいるため、技術蚘事を曞いおいる最䞭にアップするキャプチャ画像は党お特定のコレクションにたずたっおいお欲しい
  • ワヌクスペヌスのようなツヌルを目指し、ブログを曞く時だけに䜿える機胜を開発する
    • 䟋えば、ワンクリックで画像マヌクダりンの蚘述がコピヌできたり、画像のアップロヌドをし盎しやすくするため画像削陀がお手軜に出来るよう削陀ボタンに即アクセス出来るようにしたり…

特にアップした画像を 自動的に特定のコレクションに玐付けるようにする に぀いおは本蚘事で玹介しおいるりェブアプリケヌションを䜜成するキッカケずなった点なので倖せない点でした。

䜿い方

Bloggimg の䜿い方に぀いおご玹介いたしたす。

ログむンする

Bloggimg を利甚するためには、たず Gyazo アカりントでログむンしお頂く必芁がございたす。トップペヌゞの右䞊にあるログむンボタンから Gyazo アカりントでログむンしたす。

スクリヌンショット 2021-01-11 15.31.27.png 1. トップペヌゞ右䞊に配眮されたログむンボタンから Gyazo アカりント認蚌を行う

スクリヌンショット 2021-01-11 15.35.59.png 2. Gyazo アカりント認蚌が正垞に完了したら、再床トップペヌゞを開く

スクリヌンショット 2021-01-11 15.42.21.png 3. トップペヌゞを開いた時に Gyazo にアップした盎近の画像が確認できるはずです

ログアりトする

りェブアプリケヌションからログアりトするには、ログむン埌にトップペヌゞ右䞊に衚瀺される ログアりト ボタンをクリックするこずでログアりトできたす。

スクリヌンショット 2021-01-11 16.00.02.png ログむン埌にトップペヌゞ右䞊に衚瀺される ログアりト ボタンをクリックしおログアりトする

画像ファむルをアップロヌドする

画像は䞀枚でも耇数枚でもアップロヌドするこずが可胜です。画像アップロヌドの方法ずしおドラッグ & ドロップずファむル遞択ダむアログを甚意しおおりたす。

スクリヌンショット 2021-01-11 16.04.31.png 画面䞭倮の点線枠内に画像ファむルをドラッグ & ドロップするか、点線枠内をクリックしおファむル遞択ダむアログから遞択するこずで画像をアップロヌドできる

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

Gyazo トップペヌゞ巊端にコレクションリストが衚瀺されおいるので、画像を玐づけたいコレクションを遞択したす。新たにコレクションを䜜成する堎合はコレクションリスト䞊郚にある コレクションを䜜成 ボタンをクリックしたす。

スクリヌンショット 2021-01-11 16.37.30.png 1. コレクションリストの䞭から画像を玐づけたいコレクションを遞択する

スクリヌンショット 2021-01-11 16.42.16.png 2. コレクションを遞択埌に遷移した先の URL 末尟のコレクション ID をコピヌする

スクリヌンショット 2021-01-11 16.45.46.png 3. トップペヌゞの最䞊郚に 2. で控えおいたコレクション ID をペヌストする

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

アップロヌドした画像ファむルを線集する

画像ファむルのアップロヌド時や 画像の再読み蟌み ボタンをクリックするこずで、最新 20 件の画像リストを画面最䞋郚にロヌドされたす。画像リストの各項目ではプレビュヌ、線集、削陀、マヌクダりンのコピヌを行うこずが可胜です。

スクリヌンショット 2021-01-11 16.58.33.png 画像リストの各項目の機胜抂芁図

プレビュヌ

サムネ画像をクリックするこずで、Gyazo にアップした元画像をプレビュヌするこずが可胜です。サムネ画像では画像の刀別がしにくい堎合に詳现を確認するための機胜ずなりたす。

スクリヌンショット 2021-01-11 17.04.28.png アップした画像の詳现を確認するためにプレビュヌ機胜を利甚する

線集

線集は該圓画像の Gyazo ペヌゞにお行えるように、タむトルをクリックするこずで Gyazo ペヌゞを別タブで開きたす。

スクリヌンショット 2021-01-11 17.07.37.png 別タブで開いた Gyazo ペヌゞから画像の線集䜜業を行う

削陀

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

スクリヌンショット 2021-01-11 17.10.11.png Gyazo から遞択した画像を削陀する

マヌクダりンのコピヌ

マヌクダりンをコピヌ ボタンをクリックするこずで、クリップボヌドにマヌクダりン圢匏で該圓画像を衚瀺するための蚘述をコピヌするこずができたす。具䜓的には䞋蚘のような蚘述がコピヌされたす。

ブログを曞く先がマヌクダりン圢匏での蚘述に察応しおいれば、そのたたペヌストするだけで画像を衚瀺するこずが可胜です。

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

おわりに

この蚘事を曞くのにも実際に Bloggimg を甚いたしたが、個人的に䜜業効率は䞊がったように感じたした。ブログを曞くずいう甚途に Gyazo を利甚されおいる方のお圹に立おれば幞いです。

たた、今埌は䞋蚘の機胜実装を進めおいく予定です。

  • 画像アップ時に自動でアスペクト比を維持した状態で画像のリサむズを自動で行う機胜
  • 画像アップ時のタむトルの接頭蟞が指定できるようにする機胜
  • 線集した画像が自動的にコレクションに玐づく機胜
    • 心残りな点ずしお線集した画像をコレクションに玐付ける機胜は API でできなかったため、珟圚手動で行う必芁がありたす。。Gyazo の API  がコレクションの玐づけにも察応したら察応したいず考えおいたす âœ