GitHub 上で PlantUML をレンダリングするChrome拡張 v1.2.0 をリリースしました
よく訓練されたアップル信者、都元です。弊社は本日を最終営業日として、これから冬季休業となります。 今年も一年、どうもありがとうございました。というわけで書き納めの一本、その1。
以前お伝えした GitHub の Markdown (GFM) で PlantUML を表示する Chrome 拡張に関する続報です。
先ほど v1.2.0 をリリースしましたのでお知らせします。
実は昨日 v1.1.0 をリリースしはしたのですが、当ブログでお知らせするまでもない小さな変更でした。 が、今回のはお知らせしとこうかなーというレベルになったので、はいｗ
Pegmatite 概要
GitHub で Markdown を書ける場所（Git管理の *.md コンテンツや、issue, comment, etc.）で下記のようなコードブロックを記述すると…
```uml @startuml Alice -> Bob: Authentication Request Bob --> Alice: Authentication Response Alice -> Bob: Another authentication Request Alice <-- Bob: another authentication Response @enduml ```
これが下記のような画像になって見える、という Google Chrome 拡張です。
インストールは Chrome ウェブストア - Pegmatite からどうぞ。また、詳しくは Github - dai0304/pegmatite を見て下さい。
v1.0 から v1.1.0 への変更点
github.comだけではなくgist.github.comにも対応しました。- v1.1.0以降をインストール済みの方はgistに行ってみてください。
- マウスカーソルを画像に乗せた時のポップアップ (
imgのtitle属性）が果てしなく邪魔くさかったので消しました。
v1.1.0 から v1.2.0 への変更点
- 画像とソースの切り替え方法が、シングルクリックからダブルクリックに変わりました。
- PlantUMLソースをコピペしようとしたら画像に切り替わっちゃうアレ対策です。
- PlantUMLのサーバーを選べるようになりました。詳細は後述。
-
それに伴い、味も素っ気もない設定画面を実装しました。
chrome://extensions/ページから「オプション」のリンクを辿ってどうぞ。
Pegmatite が v1.1.0 まで抱えていた問題点
Pegmatite は、PlantUML 文法で書いたテキストを plantuml.com 上で稼働する PlantUML Server に送信することによって、レンダリングした画像データを得ています。
つまり、書きたい UML が業務上の秘密に当たる場合は利用できませんでした。
そこで v1.2.0 では、レンダリングに利用する PlantUML サーバーを選択できるようにしました。
自社用の PlantUML サーバーを構築しても構いませんし、localhost 上でサーバーを起動してもいいでしょう。 Dockerを使えばコマンド一発です。
$ docker run -d -p 8080:8080 plantuml/plantuml-server
その上で、設定画面の Base URL に http://localhost:8080/img/ を指定すれば、
Pegmatite の仕事がローカル環境内で完結しますので、よりセキュアに利用できる、というわけです。
実装でハマったトコロ
GitHub にはご存知のとおり HTTPS でアクセスしますが、 localhost の PlantUML Server には HTTP でアクセスする必要があります。
この時、単純に <img src="http://localhost..."/> としても Mixed Content として怒られてしまい、画像は表示できません。
そこで、Chrome の機能 Message passing を利用して、 コンテンツページとは別のページ (Background page) に PlantUML Server の URL を渡し、Data URI の形で画像を返してもらう、という仕組みを利用しました。
コンテンツページからメッセージを送っているのがこのあたり。メッセージを受け取っている background が このあたりです。
何かのご参考になりましたら。
まとめ
というわけで既にご利用の皆様方には「Pegmatite が無効になりました」というアラートが飛んでいるかと思います。
gistへのアクセスを許可せよとか、データの読み取りと変更の権限を許可しろとか、そういうダイアログが出ると 思います。以上の機能を実現するのに必要なパーミッションということでご理解いただけますと幸いです。
ではみなさま、良いお年を。
