かなり前から自分で欲しいと思っていた Chrome Extension を、ようやく Chrome Web Store で公開することができましたのでご紹介。

なぜ？ #

Chrome のブックマークの思想はとてもシンプルです。一度星を付けたら(ブックマークしたら)、基本的には Omnibox (URL バーのところ) から数文字打つだけで候補に出てくる、という極限までスリム化した使い方を想定しています。そのため、ブックマークはカテゴリに分けて整理して使いたい、という方にとっては痒いところに手が届かない部分もあるかもしれません。僕自身もそう感じるひとりです。

ブックマークの整理というと、僕も以前であればカテゴリーで分ける使い方がメインだったのですが、それだと探すのが面倒だし、結局検索してしまったり、直接 URL を覚えて入力してしまうことが多々ありました。そこで最近は、カテゴリごとではなくプロジェクトごとにフォルダを作って、必要なブックマークを集めるという使い方をし始めていました。こうしておくことで、必要な時に必要なページをまとめて開く、といった使い方ができるからです。仕事柄複数のプロジェクトを同時並行で進めることが多いので、頭を整理しやすくなりますし、開いているタブの数を減らす効果も得られます。

ただ、このやり方だとプロジェクトに後からブックマークを追加しにくいとか、プロジェクトの一部だけど最初から開かないようにできない、とか、不便な点も少なからず残ります。そこで作ったのがこの Project Tab Manager。完全に上記の使い方に最適化された Chrome Extension です。

基本的な使い方 #

インストールして頂くと、Omnibox の右側に Extension のボタン (フォルダの形をしたアイコン) が表示されます。これをクリックすると、何もプロジェクトが登録されていない状態の Project Tab Manager が開きます。

プロジェクトを登録するには、「新しいプロジェクト」に名前を入力して保存するだけ。今開いているウィンドウのタブがまとめてプロジェクトに保存されます。これを繰り返すことで、ウィンドウごとにプロジェクトが管理できるようになります。

次にプロジェクトを開きたい時は、プロジェクト名をクリックすれば、新しいウィンドウが開き、すべての必要なタブがまとめて開きます。ポイントのひとつは、この時にアクティブなタブだけが実際にウィンドウをロードするところ。別のタブを選択すると、そこで初めてページがロードされます (レイジーロード機能)。こうすることで、たくさんのタブを開いても、実際に使い始めるまでの時間は短縮できます。もちろんこの機能は設定でオフにできます。

Project Tab Manager からプロジェクトを開くと、プロジェクトのブックマークと共に、現在開いているまだブックマークしていないタブのページもグレーで表示されます。マウスオーバーした時に右側に表示される + をクリックすれば、そのタブの URL をプロジェクトに追加できます。

既にあるブックマークにマウスオーバーした場合は、四角形と✕が表示されます。四角形はアクティブ・パッシブを切り替えるもので、パッシブ (薄い青) にしておくと、プロジェクトの一部にはなりますが、プロジェクトウィンドウを開いた場合にタブとして追加されません。なので、必要な時だけ開く扱いにできます。✕をクリックすると、ブックマークは削除されます。

Project Tab Manager の特徴のひとつは、これらのブックマークがネイティブ機能のブックマークとして保存される点です。設定を見て頂くとわかりますが、デフォルトでは「その他のブックマーク」に「Project Tab Manager」というフォルダを作って、その下にプロジェクトごとのブックマークが作られることになります。こうすることで、Chrome Sync を利用してさえいれば、Chrome for Android や Chrome for iOS からでもプロジェクトのブックマークを利用可能です。外部のサーバーに保存されるといったことはありません。

また、Project Tab Manager 自体の編集機能は最低限に留め、表示順を変更したり、削除したりといったことはネイティブのブックマークマネージャーから行うことができます。

Project Tab Manager のもうひとつの特徴は、各プロジェクトにどれだけの時間を費やしたのかをあとで振り返ることができる点です。ウィンドウの右上に表示される時計アイコンをクリックすると統計画面が開き、どの時間帯にどのプロジェクトウィンドウを使っていたのか、どのプロジェクトに何割くらいの時間を割いたのかを確認することができます。

各プロジェクト名にマウスオーバーした場合は、ピンアイコンとゴミ箱アイコンが表示されます。ピンアイコンはウィンドウにプロジェクトを紐付けます。こうすることで、このウィンドウはこのプロジェクト用ですよ、ということを Project Tab Manager に教えることができます (ここはできれば自動化したい部分)。これは統計機能で必要になります。

ゴミ箱アイコンは、プロジェクトを削除するのではなく、アーカイブします。ブックマークの中に__Archives__ というフォルダがあるのですが、そこに移動されるだけですので、必要な時に元に戻すこともできます。

技術的な部分 #

この Extension は元々素の JavaScript で作ったものだったのですが、HTML5 とか勉強会での講演のために、AngularJS ベースに変更しました。おかげでコードは格段に整理できましたし、AngularJS に興味がある方には面白いものだと思います。ソースコードはこちらで公開しています。

AngularJS とは Google のエンジニアも関わっている JavaScript のフレームワークで、他のフレームワークとはちょっと違ったアプローチが体験できます。詳しくはまた別の機会にブログを書きたいと思っていますが、興味のある方は先述の HTML5 とか勉 強会で僕がやったライブコーディング込みの講演のビデオが参考になると思います。 15 分程度ですのでぜひご覧頂ければと思います。

フィードバック求む！ #

リリース直前に手を入れた部分でいくつかバグが出ているようなのですが、まだ整理できていない状態です。バグを見つけた方はぜひ github に issue として登録して下さい。また、機能面でもフィー ドバックを頂けると嬉しいです。

Project Tab Manager で皆さんの生産性が少しでも上がればと思います。

Special Thanks to Shinsuke Okamoto for icon designs.