細かいタスクがいろんなツールからたくさん飛んでくる。混乱してとりこぼしそう。そんなあなたに

Chromeの拡張機能を作りました。手っ取り早くスクショとダウンロードリンクを置いておきます。使い方はこちらです。

モチベーション

チャットで急に頼まれたタスク、急に割り当てられたチケット、Webサイトの一文を後で使うようにメモっておきたいなど...

全く別の切り口の細かいタスクがいろんな媒体から数分のうちに複数入ってくる。混乱してとりこぼしそう。皆さんはそんな経験ありませんか？

Outlook, Slack, Teams, Github, Gitlab, Jira, Redmine, Backlogなどなど、現在、コミュニケーションツールにはさまざまあります。そのすべてが仕事中にTodoを生成してくるのですが、Todoリストにするためにそれぞれのアプリのフラグ機能などを使っていたりして、とっちらかりがちです。

それらを一元化し、簡単かつ安全にキューイングできるTodoアプリが欲しい。そんなニーズにこたえるべく、ステイホームなご時世で余った時間を投入して作ったのがこのChrome拡張です。※私が欲しかったので個人的に作っただけです。

セールスポイント

• Page Link, Highlight
  Todoリストのリンクからハイライト付きのページに遷移します。※ハイライトできないページもありますが、リンクが死ぬことはないので安心してください。

• Secure, NOT SaaS
  SaaS自体諸所の事情で使えないってところにいる人は結構多いんじゃないでしょうか。Chrome拡張のアプリくらいなら多分セーフです。このアプリはChromeの同期を使ってデータを同期しますが、同期自体を切っておけばスタンドアロンでセキュアに利用可能です。

• Simple, Fast, Easy, Light
  右クリックで選択したテキストをTodoに追加できます。もしくは、アドレスバーからTodoを追加できます。（※「todo」と打ったあとテキストを追加します。）面倒な設定もなければ、混乱するような複雑な仕組みもないです。また、バックグラウンドで常駐するような処理もなく、メモリを圧迫しません。

• Free, Open
  完全に自分のために作ったので、このアプリを収益化したりするようなことはしないつもりです。GitHubにもMITライセンスでソースコードをあげておきます。

コンセプト

Todoアプリに大した機能はいりません。Todoは数が0になっていることが好ましい姿であり、整理したり、ずっと残しておくようなタスクはTodoで管理すべきではないのです。Todoアプリはもっとインスタントなものでいいはずです。

SaaSのTodoアプリはあまり好きではありません。ラベルを振って整理して、期限、優先度をつけたりする。オープンとクローズの状態をつけ、クラウドにデータを保管する。リッチなものだと他の人とタスクを共有し、コミュニケーションできる機能まであったりします。そういった立派な機能を付けてしまったら、私にとってそれはもうTodoアプリではなく、タスク管理ツールです。タスク管理ツールは、チーム単位で扱うものであり、個人のスコープをはるかに超えます。Todoアプリはもっとシンプルでパーソナルなものがいいです。

私はリマインダーが欲しいわけではありません。アラートを設定するということは計画しておけるわけで、計画やリマインドにはおそらくOutlookやGoogleカレンダーのようなツールをすでに使っているはずです。

このアプリは、そういったTodoとして過剰な機能は意図的に省いています。たくさん機能や項目があると、それだけタスクに起こすのが面倒になります。発生したタスクをとりあえず脇においておける。その動作を素早く簡単に、すべてのコミュニケーションツールで同じリストにまとめられること、それさえできればよい。このアプリはそういうコンセプトです。

使い方

右クリックからTodo追加

タスクに入れたい文言を選択肢、右クリックからコンテキストメニューに「add hub todo task」という欄があるので、そこをクリックすると、Todoに追加される。

アドレスバーからTodo追加

アドレスバー（オムニボックス）で「todo "書きたい内容"」のように打てば任意のテキストをTodoに追加できる。※todoのあとにスペースが要るので注意

ページリンク、ハイライト機能

Todoリストの右側のボタングループの左端のリンクボタンを押せば、Todoに追加したときのページへ戻れます。たくさんコミュニケーションツールを使っていると、この機能がとても重要になります。
※ハイライトはおまけです。

Todoリスト

タスク完了はチェックと取り消し線で、不要になったタスクはゴミ箱ボタンで削除と、シンプルにまとめています。ミニマルに行く方針ですが、流石に優先度として順番はいじりたいかなと思ったので、ドラッグ可能にしています。終わっていないタスクの個数はバッジに表示されるので、早く数を減らしたくなるはずです。全部なくなったら😊になります。

テクニカルトーク

ここまでは広告で、以降は開発した時の覚書です。Qiita的にはこっちがメインですね。

アイデア

OutlookやTeams、GitlabにはTodoとして使えるような機能があるので、それをTodoとする。チケット管理ツールで頼まれたら、アサイニーを自分にしてTodoとする。それができないようなツールや口頭で頼まれたものは、Todoアプリに書き留める。今まで私はそんな感じでTodo管理をしていました。冷静に考えて、散らかりすぎです。一つにまとめたいという気持ちだけでなく、フラグ機能のように、ワンクリックでタスク化する。そんな操作性を備えたTodoを一元化できるツールを欲していました。

TodoistのようなSaaSは使えません。正確に言えば、OutlookやTeamsのような、社内で決められたSaaS以外は利用できない環境にいます。そこでデスクトップアプリでいいものはないかと思い、クリップボード履歴を使うというアイデアを思いつきましたが、残念、無効化されています。

ないならば、作ってしまえ、OSS（5・7・5）という訳で、クリップボード履歴のように、選択したテキストをキューイングできるようなToDoアプリを作ることにしました。

なんでChrome拡張にしたのか、デスクトップアプリの方が良いのでは

SaaSは論外として、本当はデスクトップアプリを作ろうと思ってたのですが、OS依存になるのが嫌だったのと、後述のChromeのハイライト機能が使いたかったのでChrome拡張として作ることにしました。Outlookなどのメーラはデスクトップアプリを使っていましたが、これを機にWeb版を使おうか思っています。※Teamsは重いのでもともとWeb版を常用していました。

Chrome拡張の実装

ポップアップでTodoリストを実装し、バックグラウンドスクリプトでコンテキストメニューから実行するスクリプトを実装しています。

ポップアップはReactを使ってBuildしました。UIはmaterial-uiで、なにも苦労せずにおしゃれな見た目と動きを実現できました。便利ですね。

ReactをChrome拡張用に実装するにはいくつか抑えておくポイントがあります。ここで初学者向けに詳しくまとめるつもりはないですが、後のことを考えメモを残しておきます。

お盆の一週間ほどでchromeの知識ゼロから実装、公開までできるくらい簡単なので、皆さんもこのくらいの規模のChrome拡張は軽い気持ちで実装に挑戦してみたらどうでしょうか。

ポイント

• chrome拡張の実装で必要なファイルの種類を調べておく。

• react-app-rewiredを使う。以下の記事にお世話になりました。

  https://qiita.com/takakobem/items/64c37a4f35cadd712907

• buildフォルダをchrome://extensions/から読み込んでデバッグする。yarn buildでいけるがyarn startみたいに即時反映とはいかないので辛抱がいる。

• chromeのAPIを使うときは以下を置いておく。

  /*global chrome*/
  

• chromeのAPIを使うときはmanifest.jsonのpermissionを追加する。※忘れがち

• popupのconsole logはpopupでctrl+shift+Iから見る。

• backgroundのconsole logはchrome://extensions/のビューを検証 -> バックグラウンド ページから見る。

• アイコンはサイズと形式に注意して作成する。

右クリックからTodo追加

コンテキストメニューへの追加はバックグラウンドスクリプトで簡単に実装可能です。選択したテキストの中身やページのURLを取り出せるので、chromeのstorage APIに放り込んでポップアップに連携しています。

ほんとはショートカットキーで行けるようにしたかったのですが、少し面倒そうだったので時間切れでスコープアウトです。選択したテキストを取り込む方法がわかってません。※誰か作ってプルリクしてくれたらうれしいです。

アドレスバーからTodo追加

アドレスバー(オムニボックス)にtodoといれると、そこから任意のテキストをタスクに追加できるようにしてあります。実装自体も難しくなくスムースに進みました。コンテキストメニューのときは現在のURLを取得できたのですが、オムニボックスからは取得できなかったのでリンクボタンを非表示にしています。下記が参考になりました。

Todoリスト

本当にただのReactの話です。ポップアップの横幅はCSSで指定する必要があります。長すぎる英語の一単語があると改行が上手くきかなくなるので、少し横着して、完了にすると単語の途中でも改行させるようにしてボタンが見えなくなることは回避しています。（※この部分だけまだ審査通ってないです。）react-smooth-dndでドラッグ可能なリストを実装しました。以下が参考になります。

ハイライト機能

chrome自体の機能「Scroll To Text Fragment」を使ってハイライト表示しています。URLの後ろに選択したテキストを#:~:text=をつけて挿入するだけなので実装は簡単でした。chrome公式の機能なのでバグの心配もありません。OutLookやTeamsだとハイライトが効かないのでどうにかしたい気持ちはありますが、無理そうなのでページリンクのみあればいいと妥協してます。SlackとJiraはうまく動くようです。

ストアへの公開

ここまで作ったので一応全世界に公開しようと思い、以下の公式手順に従いStoreに置きました。

ポイント

• 公式手順で特につまずくところはありません。公式の手順を参照しましょう。
• 5$とられました。開発者アカウントの登録で必要みたいです。どこかのStoreよりは良心的ですが収益化できないのにお金とるなんてひどいです笑
• 最低一枚、スクリーンショットが必要です。サイズ・形式が厳しく、画像の調整で手間どりました。エラー文も不明なエラーとなるだけです。YouTubeから動画も使えますが、Qiita用に作成したGif動画をアップして更新しようとしたらまたエラーがでて申請できなくなって困りました。どうも https://www.youtube.com/watch?v= の形式のURLならいけるようです。この辺はGoogleもあんまり力を入れてないようですね笑
• 審査があります。最近は厳しくなっているようです。そもそもそんな機能はないんですが、プライバシーやデータ利用の用途について、いろいろ宣誓しました。某ストアのように理不尽な指摘があるのかとびくびくしていましたが、1日で公開されました。シンプルだったので速攻で終わったのでしょうか。※アイコンの軽微な修正のために再度申請したら、権限が過剰という理由でリジェクトされました。再度申請してます。

最後に

前回の記事「GitHubとGitLabのIssueをガントチャートで表示できるSPA作った」が好評だったので調子に乗ってまたOSS作ってみました。

ぜひ、LGTMとGitHubのStarをお願いします！！