GitHub 上で PlantUML をレンダリングするChrome拡張 v1.2.0 をリリースしました

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

よく訓練されたアップル信者、都元です。弊社は本日を最終営業日として、これから冬季休業となります。 今年も一年、どうもありがとうございました。というわけで書き納めの一本、その1。

以前お伝えした GitHub の Markdown (GFM) で PlantUML を表示する Chrome 拡張に関する続報です。

先ほど v1.2.0 をリリースしましたのでお知らせします。

実は昨日 v1.1.0 をリリースしはしたのですが、当ブログでお知らせするまでもない小さな変更でした。 が、今回のはお知らせしとこうかなーというレベルになったので、はいw

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に行ってみてください。
  • マウスカーソルを画像に乗せた時のポップアップ (imgtitle 属性)が果てしなく邪魔くさかったので消しました。

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へのアクセスを許可せよとか、データの読み取りと変更の権限を許可しろとか、そういうダイアログが出ると 思います。以上の機能を実現するのに必要なパーミッションということでご理解いただけますと幸いです。

ではみなさま、良いお年を。