日直地獄

小学校では事件が起きる

スクリーンショットを撮影した後、枠を描いたりテキストを書くことができ、その後Slack,imgur等にアップロードできるchrome拡張作った

作った。すげー便利です。
chrome.google.com

使い方紹介動画


作った理由等

例えば、ページの全体を撮影して、そこに解説を書き込みたいと思った時に、何らかの手段でスクリーンショットを撮影して、ローカルにダウンロードし、プレビューかなんかで枠を記載し再アップロードする*1というという手順が必要になる。そうすると、ローカルのスクリーンショットファイルはものすごい勢いで増えていくし、なんだかすげー大変だったので、これが続くよりも拡張を書いたほうがトータル効率が良いと思い、趣味で書いた。

その後、興が乗り、便利な機能・不要だけどいい感じの機能を実装できたので満足している。特にスクリーンショットに任意の画像をスタンプとして貼り付けられる機能は、コラ作成に便利そうだけど、仕事で活躍する未来は見えない。

ちなみに下記の機能を実装しています。便利なのでどうぞご利用ください。

スクリーンショットの範囲

  • 見えている範囲
  • ページ全体
  • デスクトップ全体or任意のアプリのウィンドウを指定しての撮影

切り取り機能

スクリーンショットに絵を書く機能

  • 枠線
  • 矢印
  • フリーハンド
  • テキスト挿入 (任意のフォントも指定できる)
  • 任意の画像を差し込むスタンプ機能

アップロード先

  • Slack
  • imgur
  • Hatena Fotolife
  • Hatena Group File Upload
  • もしくはアップロードせずにPCに保存

補足

  • Toasty!の元ネタはこれ
  • Slackの連携するには自身でclient_id, secretを生成してもらう必要がある
    • なぜなら、Slackのドキュメントにはclient_id, client_secretは共有するなと書いてあったから。しかし、共有したところでOAuth2の callback urlはSlackの管理画面側で指定したURLに一意に定まるため(そしてChrome拡張はcallbackを受け取るエンドポイントが用意されている)、クライアントを騙っての狼藉も出来ない気がするし、client_id, client_secretを使ってユーザーに何らかの対処(例えばBANとか)を施すことは出来なそうに見える。そういうことを考えると別に拡張の中にclient_secretを入れてもいいんじゃねえのとは思いつつも不安なので入れなかった。他のSlack連携のある拡張ではclient_secretを入れていた
    • 誰か教えてくれ!
  • アップロード先、あとはGoogleDriveくらいは対応したいですね

*1:そしてアップロード先ははてなグループのファイル共有だったりする。当然ながらそれをサポートしている拡張は存在しない