Kibelarのみなさんも、そうでないみなさんも、こんにちは！ Kibelarの皆さんはご存知かと思いますが、情報共有ツールKibelaでは、PlantUMLを記事に記述するとUML図が表示されるというとても便利な機能があります。 そんなKibelaでPlantUMLをより快適に閲覧する用のChrome拡張をつくったお話のはじまりはじまり〜。

Kibelaを使い込んでいると、たくさんの記事で溢れかえって探すのが大変になると思います。 その対策として、フローチャートを辿ることで目当ての記事のリンクにたどれるようなUML図をKibelaで書くことになりました。 しかし、このUMLが大きくなってくるとKibela中の画像では見づらくなります。 また、URLを記していても本文中の画像ではアドレスバーにコピペできません。 右クリック＞新しいタブで画像を開く で画像を開くと文字がコピペできますが、これよりももっと扱いやすくしようと考え今回の拡張をつくることになりました。

という感じで書くと

こんな感じで表示されます。 QiitaでもPlantUMLを書くことができますが、それと同じ書き方ですね。

さきほどの記事のHTMLを見てみると、UML図は次のようになっていました。

見やすく要約すると、

という中身になっていました。

HTMLを確認した通り、imgタグのsrcとして、Data URIが指定されていたことがわかりました。

RFC2397によると、Data URIスキームは以下の構成になっているようです。

今回はmediatypeがimage/svg+xml（また、文字コードがutf-8）なので、

となりますね。 これを踏まえると、先述のHTML中のimgのsrcから、UML図のは次のような処理(js)で取り出せることがわかります。

この関数で先ほどのHTML中のimgのsrcからを抜き出すと、以下のようになります。

これをデコードしていきます。

こちらの記事を参考にさせていただきました。 ありがとうございます！

をbase64dataに格納した状態で、以下の処理を実行するとdecodedDataにデコードされたが格納されます。

先ほどのでこの処理を行うと、デコードされたsvg+xmlが現れました。先ほどのをデコードしたものを整形したものは次のとおりです。

これでの中身がわかりましたね。 この中身をブラウザで直接見てやれば、UML図の画像の内容と同じものでテキスト選択ができるものを表示することができます。

また、中身が解析できたので、置換などを行って任意の文字列を書き換えたりすることもできます。 今回つくるChrome拡張では、URLを見つけるとaタグに置換する処理を埋め込みました。

先述した過程をたどり、そのあと色々あってこんな感じのものに落ち着きました。 機能としては次のようなところです。

この拡張をChromeに導入すると、

こんな感じで右上に展開ボタンが表示され、押下すると別タブで展開される仕様です。

自分の欲しかった機能は一通り実装でき、Kibe lifeをより一層充実させてくれるものが完成しました。

今回つくったChrome拡張で、「リンク集フローチャートUML図」をKibelaで圧倒的に使いやすくすることができました。 Data URI のbase64でエンコードされたデータ部分はjsで簡単にデコードできたおかげで楽に実装でき助かりました。 Data URIが使われているものはいろいろいあるので、それを触りたいときはChrome拡張で実装すると楽かもしれませんね。 みなさんもChrome拡張でよりよい生活をお過ごしください。