先般、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 あまの氏のブログ