GitHubのMarkdownの目次を自動でつくるChrome Extensionを作った
GitHubのMarkdownに目次が欲しかった
Markdownが便利なのでよく使ってます。メモはKobitoで取り、はてなブログもMarkdownで書いています。GitHubではMarkdown以外にもOrgとかRestructured Textとか使えますが、一番使われてるのはMarkdownなのではないでしょうか。
ところがGitHubではMarkdownドキュメントの目次がデフォルトでは表示されてないため、長いドキュメントの場合読むのが不便でした。ユーザースクリプトでもよかったんですが、一度Chrome Extensionを作ってみたかったので作って公開しました。
3/27(金)に作り始めて3/29(日)に公開しました。
感想
TypeScript
先日作ったオープンなプルリクエストを表示するExpress.jsアプリにつづいてTypeScriptを使いました。といってもTSファイル2つしかないので、どちらかというとChromeとJQueryの型定義ファイルを使えて楽だったというのが大きいです。特に理由がない限りしばらくはAltJSとしてはTypeScriptを使おうと思います。
あともう慣れてしまったけど、tsdpmがずっと落ちているのが辛い。
Chrome Extensionのドキュメント
ぐぐるといろんな記事が出てきますが、古くなっているものが稀によくあるので注意したほうが良いと思います。今回だと無視URLリストを機能拡張のオプションページで指定できるんですが、これの保存にLocalStorage使えばOKみたいな記事が最初見つかったけど、もっと使いやすいstorage機能が標準であったのでそっちに途中から切り替えました（保存できる値がLocalStorageだと文字列だけだけどChrome storageは配列が使える）。
公式ドキュメントは便利だけど、APIドキュメントがDash対応してくれればもっと見やすいんだけどなあ。
小さいプロジェクトでgulp使わなくてよいのでは
今回はgulpを使ってTypeScriptのコンパイル、SourceMap追加、uglify、JadeからHTMLへの変換を行いました。まあ便利なんですが、それを実現するためにgulpを使い、利用するライブラリの使い方を調べるのは少々コスパが悪いかと感じました（今回のプロジェクトでは9つのライブラリを使ってます）。3日で作成から公開まで作れる程度のプロジェクトだったから特に感じたのかもしれません。それらパッケージがさらに別のパッケージに依存しているため、バージョンアップが止まった時の影響が大きいのも気になります。
Grunt/Gulpで憔悴したおっさんの話という記事が最近はてブで人気でしたが同じ気分で、次にJSプロジェクト作るときにはnpm run-scriptを試してみます。express.jsとChrome Extensionのプロジェクト作るときはすでにgulpfile作ったのでgulp使うけど。
その他・BowerとかPrimerとか
Chrome ExtensionのContent ScriptモードからはCDNのJQuery使えなかったのでプロジェクト内にJQueryを取り込む必要があります。GitHubにJQueryを持ち込むのも嫌だったので、Bower使ってJQueryとPrimer（オプションページのCSS用）をプロジェクトに取り込んでみました。
Bowerはどう使うとnpmやgulpと連携しやすいのかよくわからなかったので、デフォルトの設定のままにライブラリをインストールし、gulpで必要なファイルだけコピーすることにしました。bower initでbower.jsonが作成できますが、package.jsonの情報を見てくれてない？ぽくてよくわからなかった。
Chromeの拡張機能のオプションページ（chrome://extensions/から移動できる）は拡張ごとにわりとフリーダムなようだったので今回は最近GitHubが公開したPrimerを使ってみました。といってもフォームをいくつか使っただけで大した使い方したわけじゃないんですが。
