Posted at

もっとマインドマップを簡単に描くためにChrome拡張機能を作りました

More than 3 years have passed since last update.

screenshot_1.png

皆さんはマインドマップを日頃描いていますでしょうか?僕の身近にも、メモしたり、議事録書いたり、アイディアをまとめていったり、いろいろな目的でマインドマップを描いている人たちがいます。僕もマインドマップでいろいろ書けるようになりたいな、と昔から思っていましたが、以下のような壁があって、なかなかマインドマップ脳になれずにいました。


  • インストール型アプリはイヤ。ウェブアプリがいい。

  • お金かかるのはイヤ。無料がいい。

  • 変に凝ったマインドマップのデザインはイヤ。シンプルで王道なものがいい。

  • 描いていくのが手間なのはイヤ。単純にマインドマップが書ける方がいい。

満足がいくものを見つけることができなかったので、結局自分で作っちゃいました。


MindMap Tab

その名も"MindMap Tab"。Chromeの拡張機能として作りました。


インストール方法

Chromeをお使いの方は、以下のページからMindMap Tabをインストールすることができます。

MindMap Tab - Chrome WebStore


使い方

以下のYouTube動画を見るのが早いと思います。

Screen Shot 2016-04-28 at 10.21.53.png

大きな特徴として、MindMap Tabは、Chromeの新規タブを置き換えます。インストール後、とにかく迅速にマインドマップを書き始めるために、「思い立ったら新規タブを開けば良い」という状況になります。そして、左側のテキストボックスに、タブ文字でインデントしていきながら、メモしていきたいことをどんどんと書き込んでいきます。するとあら不思議、右側に自動的にレイアウト計算されていきながら、マインドマップが描かれていきます。

他にも細かな工夫を入れてあります。


保存は気にしなくて良い

入力していくごとに、自動的に保存されていきます。そもそも保存するための特別な操作はありません。書きなぐった後に、すぐにそのタブを閉じたり、他のウェブページに移動しても、それまでに書いた内容は残っています。


前回描いていたものを呼び出す

前回描いていたマインドマップを呼び出して続きを書くために必要なことは、Lastメニューを押すことだけです。


もっと前に描いていたものを呼び出す

前々回以前に描いていたマインドマップを呼び出すためには、Historyメニューを押すと、過去のマインドマップの一覧が出てきます。


リンクを埋めたい

マインドマップの中にリンクを埋めたいことは結構多いと思います。その場合、Markdownのリンクの記法をそのまま使えます。

Qiitaは[ここ](http://qiita.com)からどうぞ

と書けば、以下のように青文字になって、クリック可能になります。

Screen Shot 2016-04-28 at 10.49.39.png


Top Sitesを出したい

今まで標準状態の新規タブを使っていた方の中には、その中に表示されたTop Sitesを利用していた方も少なくないと思います。以下のようなやつです。

Screen Shot 2016-04-28 at 10.52.11.png

「MindMap Tabを入れたら見れなくなった!」というのでは残念なので、ちゃんとTop Sitesを出せるようにしてみました。上部メニューのTop Sitesをクリックすれば、すぐにわかると思います。以下のようなマインドマップが表示されることでしょう。

Screen Shot 2016-04-28 at 10.55.00.png


開発に関する情報

MindMap Tabのコードは、GitHubに上げてあります。Pull Request歓迎です。

MindMap Tab - GitHub

「こんな機能あったらいいな」という要望も、Issuesで受け付けてます。気軽にどうぞ。

Issues - GitHub

マインドマップの描画には、jCanvasという便利なライブラリを使っています。と言っても、別にマインドマップ描画関数があるのではなくて、線を引いたりレイヤ管理するのが楽になる程度なので、自分で位置計算や実際の描画はセコセコやってます。あと、デザインを怠けるために、Bootstrapを使っています。

あと、ES2015+α(importとか)を使いたかったので、Babel+Browserifyを使っています。ビルドスクリプトなどを覗くと、React.jsがReady to goになっているのがわかると思いますが、近々React.jsの適用をやってみようかな、と思って環境だけ整備してあります。


まとめ

ぜひ一度インストールして使ってみてください。ちょっとしたメモなどで活躍してくれると思います。感想などぜひ聞かせてください。