先般、MozillaのコミュニティによるTokyo WebExtensions Meetup #2が開催された。ここでは、メンバーらによる自身の拡張機能の紹介などが行われた。レポートでは、紹介程度であったが、本稿では、もう少し詳しく開発の苦労談なども含め紹介したい。
「艦これタイマーX」を試す
まずは、あまの氏による艦これタイマーXである。AMOは、以下の通りである。
ソーシャルゲーム「艦隊これくしょん ～艦これ～」の遠征などの経過時間を知らせるものだ。他にも各種の情報を提供する。ここで紹介する機能拡張以外にも多くのタイマーがある。ゲームユーザーにとっては、必須のアイテムといえるだろう。インストールは、AMOから行う。インストール後のFirefoxは、図2のようになる。
-
図2 インストール後の艦これタイマーX
画面左にタイマーやゲーム情報が表示されるようになる。また、ツールバーには「艦」のボタンが配置され、各種メニューを選択できるようになる。ゲームユーザーならば、これらの意味ついては理解しやすいであろう。左の項目はドラッグ&ドロップで、位置変更が可能である。
-
図3 ドラッグ&ドロップで位置変更
XULからWebExtensionsへの移行であるが、WebRequest APIでHTTP通信をキャプチャが可能になったことがきっかけとのことだ。しかし、制約も少なくない。そこで、外部ライブラリをできるだけ活用することで、利用できるものを有効活用したとのことである。しかし、存在しないものもあった。具体的には、表の移植であった。
-
図4 艦娘一覧
ここで、左のメニューと一覧の幅を調整することである。この部分に関しては、以前はxul:splitterを使うことでサイズ変更することができていたが、今回はマウスイベントをすべて自前処理したとのことである。
-
図5 ツリーや表の移植について
この機能については、他の拡張機能でも参考になる点があるだろう。コンテキストメニューは、jQuery Context Menuを使用。ツールバーに関しては、今回、断念したとのことである。そして、重要な機能がスクリーンショット撮影である。実現するには、図6のように2つの座標を知る必要がある。
-
図6 スクリーンショット撮影
実際には、
- iframeの座標を取得するcontents script
- ゲーム画面の座標を取得するcontents script
- Background scriptに定期的に座標を送信
することで、実現した。あまの氏のブログでも情報があるので参考にしてほしい。
-
図7 あまの氏のブログ
