30
艦これタイマー for Firefox addonの拡張 吉田@板橋 1

艦これタイマー for firefox addonの拡張

Embed Size (px)

DESCRIPTION

艦これタイマー for firefox addonを拡張してみた。

Citation preview

Page 1: 艦これタイマー for firefox addonの拡張

艦これタイマー for Firefox addonの拡張

吉田@板橋

1

Page 2: 艦これタイマー for firefox addonの拡張

艦これとは

• 『艦隊これくしょん -艦これ-』(かんたいこれくしょん かんこれ)は、角川ゲームスが開発し、DMM.comが配信しているブラウザゲームである。第二次世界大戦期の大日本帝国海軍の軍艦を萌えキャラクターに擬人化した、「艦娘(かんむす)」と呼ばれるキャラクターのカードをゲーム中で集め、強化しながら敵と戦闘し勝利を目指すという内容である。

• http://ja.wikipedia.org/wiki/艦隊これくしょん_-艦これ-

2

Page 3: 艦これタイマー for firefox addonの拡張

艦これタイマー for Firefoxとは

• Amanoさん作のソフトウェア

• 艦これタイマーとは遠征や入渠、建造の残り時間を管理し、時間がくると通知してくれるアプリの総称。

• 艦これタイマー for Firefoxはタイマーを自動設定するためにFirefoxアドオンとして作成された艦これタイマーです。

• http://miku39.jp/blog/wp/?page_id=1705#i-2

3

Page 4: 艦これタイマー for firefox addonの拡張

艦これタイマー for Firefoxの技術

• nsIObserverService で http-on-examine-response (HTTPの受信)の通知を受け取り、艦これのURLであれば nsITraceableChannel で通信の内容をチェック、タイマーの設定を行っています。

• 残り時間の取得のためにサーバーに一切アクセスは行わないため、サーバーの負荷に優しい仕様です。また、オンラインゲーム利用規約を読んだ上でサーバーにアクセスを行わない実装

• http://miku39.jp/blog/wp/?page_id=1705#_for_Firefox

4

Page 5: 艦これタイマー for firefox addonの拡張

規約との整合性

• http://www.dmm.co.jp/rule/=/category=onlinegame_service/ • (8)不正な方法(特殊なプログラムを介しての)でのアクセスを試みる行為 • (12)その他当社が不適切と判断する行為

• (8)については、人口増加によるサーバー過負荷での猫問題もあったのでむやみやたらにサーバーにアクセスしない方がサーバーに負荷はかからないし、サーバーにアクセスしなければ「アクセスを試みる行為」にも該当しないし誰にも迷惑がかからないので、通信内容を見て判断するのは問題ない”だろう”と、通常こういう項目はサーバーのクラッキング行為や、通信手順をなぞる外部プログラムを使った、1クリックで遠征できますとかダメージのある艦艇をまとめて入渠させますとかのマクロや、戦闘シーンを高速にしてさくさくと経験値稼ぎできます(通常ではありえない頻度で通信をすることになりサーバー負荷も高まる)とかいんちき処理などを想定しているものであること、(12)については、当社というのはDMM.comを指していますが、何をもって不適切と判断するのかDMM.com次第のため気にしてもしかたがないので、その時になったら開発中止などを考えることにする。要請があれば素直に従う。

• http://miku39.jp/blog/wp/?p=1867

5

Page 6: 艦これタイマー for firefox addonの拡張

艦これタイマー for Firefox のライセンスとソース

• MITライセンス

– http://miku39.jp/blog/wp/?page_id=1705

• ソース

– xpiファイルなのでzipとして展開可能

• リポジトリ

– https://bitbucket.org/amano_rox/kancolle-timer-for-firefox

6

Page 7: 艦これタイマー for firefox addonの拡張

現在の状況

• 本家はタイマーとしての機能は十分に実装済

• サイトのコメントで要望は多くでているが、タイマーの範囲を超える要望が多い

• 作者のamanoさんは提督業で忙しい

• 個人的にも付けたい機能がある

–艦これタイマー for Firefox をベースにしてAddonを作ることにした

7

Page 8: 艦これタイマー for firefox addonの拡張

本題

• ビルドの自動化

• JavaScriptの構文チェック

• Smarttab&(改行コード)問題

• (Mercurialからgitへ)

8

Page 9: 艦これタイマー for firefox addonの拡張

ビルドの自動化(1)

• 当初はリポジトリが不明であった。 – ライセンスも明示されていなかった。

– ビルドスクリプトも無かった。

– ビルドのためのスクリプトを作成

#ビルドスクリプト初期版 rm chrome/kancolletimer.jar; (cd chrome/ ; zip -r kancolletimer.jar chrome/ ) ; rm ../kancolletimer.xpi ; zip -r ../kancolletimer.xpi *

9

Page 10: 艦これタイマー for firefox addonの拡張

ビルドの自動化(2)

• リポジトリの所在が公開される。

– リポジトリ内にはbuild用のスクリプトが存在

• 上記を使う(呼び出す)ようにスクリプト修正

–マニフェスト(作者等の情報ファイル)がxpi版と異なる

• その整合性を合わせる

• 作者情報等を正しく入れるようにする

– JavaScriptの構文チェック(後述)を追加

10

Page 11: 艦これタイマー for firefox addonの拡張

ビルドの自動化(3)

#ビルドスクリプト $ cat Makefile define SHELLSCRIPT mkdir -p ../build/chrome if type -a JSsyntaxcheck.sh > /dev/null 2>&1 ; then JSsyntaxcheck.sh chrome/content/*.js || exit 1; fi #Version modify cp -f install.rdf install.rdf.orig sed -i -e "s/<¥/em:version>/."`git rev-parse --short HEAD`"<¥/em:version>/g" install.rdf sed -i -e "s/<em:creator>/<em:creator>KoedoYoshida<¥/em:creator><em:creator>/g" install.rdf (中略) bash build.sh cp -f install.rdf install.rdf.bak cp -f install.rdf.orig install.rdf endef export SHELLSCRIPT all:: echo "$${SHELLSCRIPT}" > /tmp/$$$$ ; $(SHELL) /tmp/$$$$ ; rm -f /tmp/$$$$

11

Page 12: 艦これタイマー for firefox addonの拡張

JavaScriptの構文チェック(1)

• 構文等のケアレスミスがあると、がっかりする。

• Firefox23まではWebコンソールにJavaScriptの構文エラーがわかりやすく表示されていた。

• Firefox24でWebコンソールの出力内容変更、構文エラーが表示されないケースが…

• FirefoxESR17を使えるのもあとわずか….

• 構文チェックツールを探すことに…

12

Page 13: 艦これタイマー for firefox addonの拡張

JavaScriptの構文チェック(2)

• JShintを使用

– Node.jsまたはRhino等で動作

– http://www.jshint.com/install/

• Rhino

– Rhino(ライノー)とはオープンソースで開発されているJavaScriptの実装である。RhinoはJavaで記述されており、Mozilla Foundationによって管理、配布されている。

– https://developer.mozilla.org/en-US/docs/Rhino/

13

Page 14: 艦これタイマー for firefox addonの拡張

JavaScriptの構文チェック(3)

• cygwin環境で下記を作成。

• ^Eは構文エラー検出のみ使用したかったため、ワーニングレベルだと元ソースでも多数出る。

$ cat /usr/local/bin/JSsyntaxcheck.sh #!/bin/bash "/cygdrive/c/Program Files/Java/jre7/bin/java.exe" -Dfile.encoding=UTF-8 -jar "C:¥cygwin¥home¥user¥rhino1_7R4¥js.jar" "C:¥cygwin¥home¥user¥jshint-rhino-2.1.10.js" $@ | grep "^E" && exit 1 exit 0

14

Page 15: 艦これタイマー for firefox addonの拡張

JavaScriptの構文チェック(4) • チェック行数を無制限に変更

• Node.js版と出力フォーマットも多少異なるが、1行で出力するよう修正。

• エラーはE999,ワーニングはW999といったフォーマット。

$ diff -uNr jshint-rhino-2.1.10.orig.js jshint-rhino-2.1.10.js (中略) - state.option.maxerr = state.option.maxerr || 50; + state.option.maxerr = state.option.maxerr || Number.POSITIVE_INFINITY; (中略) for (var i = 0, err; err = JSHINT.errors[i]; i += 1) { - print(err.reason + " (" + name + ":" + err.line + ":" + err.character + ")"); - print("> " + (err.evidence || "").replace(/^¥s*(¥S*(¥s+¥S+)*)¥s*$/, "$1")); - print(""); + print(err.code + ":" + err.reason + " (" + name + ":" + err.line + ":" + err.character + ")" + "> " + (err.evidence || "").replace(/^¥s*(¥S*(¥s+¥S+)*)¥s*$/, "$1")); } 15

Page 16: 艦これタイマー for firefox addonの拡張

smarttab問題(1)

• 元ソースのインデントは – 1段目:4SPACE – 2段目:tab – 3段目: tab 4SPACE – 4段目: tab tab

• いわゆるsmarttab(by JSHint) • Java ScriptのIndent規約

– http://www.oracle.com/technetwork/java/javase/documentation/codeconventions-136091.html#262

– Four spaces should be used as the unit of indentation. The exact construction of the indentation (spaces vs. tabs) is unspecified. Tabs must be set exactly every 8 spaces (not 4).

16

Page 17: 艦これタイマー for firefox addonの拡張

smarttab問題(2)

• リファクタリングしにくいので置換する

–差分は… diff –bで

17

Page 18: 艦これタイマー for firefox addonの拡張

smarttab問題(3)

• .git/hooks/pre-commitで対応

–特定ブランチはtabの存在を許す。

–それ以外のブランチは強制修正または警告

• git cherry-pickにpre-commitが呼ばれない

– git format-patchとgit amを併用

– .git/hooks/pre-applypatchで.git/hooks/pre-commitを呼ぶ。

–最終的にgit commit --amend -C HEAD

18

Page 19: 艦これタイマー for firefox addonの拡張

smarttab問題(3)

$ cat .git/hooks/pre-commit #!/bin/bash if git rev-parse --verify HEAD >/dev/null 2>&1 then against=HEAD else # Initial commit: diff against an empty tree object against=4b825dc642cb6eb9a060e54bf8d69288fbee4904 fi #master branch is ok git branch | grep -e '^* master$' && exit 0 RET=0 if git branch | grep -e '^* target-branch$' >/dev/null 2>&1 then for FILE in ̀ git diff-index --name-status $against -- | grep -E '^[AUM].*¥.js$'| cut -c3-`; do sed -i -e 's/¥t/ /g' "$FILE" done exit $RET fi 19

Page 20: 艦これタイマー for firefox addonの拡張

smarttab問題(4)

cat .git/hooks/pre-applypatch #!/bin/sh

#サンプルそのまま有効化 . git-sh-setup test -x "$GIT_DIR/hooks/pre-commit" && exec "$GIT_DIR/hooks/pre-commit" ${1+"$@"}

$ git-format-patch ~ (中略) $ git am --ignore-space-change 000x.patch $ git add -A ;git commit --amend -C HEAD

20

Page 21: 艦これタイマー for firefox addonの拡張

改行コード

• 省略

21

Page 22: 艦これタイマー for firefox addonの拡張

Mercurialからgitへ

• 省略

22

Page 23: 艦これタイマー for firefox addonの拡張

閑話休題

23

Page 24: 艦これタイマー for firefox addonの拡張

UI比較

24

Page 25: 艦これタイマー for firefox addonの拡張

オリジナル

25

Page 26: 艦これタイマー for firefox addonの拡張

機能追加後 例1

26

Page 27: 艦これタイマー for firefox addonの拡張

機能追加後 例2

27

Page 28: 艦これタイマー for firefox addonの拡張

機能追加内容

• 保有艦数、保有設備数を表示 – 最大に近づくと警告表示へ

• 艦隊のコンディション等内部パラメータの可視化

• レベルが高いのにロック解除されている艦があると警告(誤操作での解体、合成の警告)

• 入渠の修理時間での降順リスト表示

• 近代化改装(合成)での候補リスト表示

• 演習相手の編成から獲得できるEXP概算を表示

• 等

28

Page 29: 艦これタイマー for firefox addonの拡張

参考資料

• カスタム版ソース

– https://bitbucket.org/koedoyoshida/kancolle-timer-for-firefox/

– ライセンスMIT

• オリジナル

– http://miku39.jp/blog/wp/?page_id=1705

– https://bitbucket.org/amano_rox/kancolle-timer-for-firefox

29

Page 30: 艦これタイマー for firefox addonの拡張

注意事項

• 本資料およびソースは無保証であり、本資料およびソースによって直接、または間接に損害を受けられたとしても私は責任を取りません。

• 一部機能は隠し機能です。適当に操作したり、ソースを見てください。

• 開発版のため機能等については予告無く変更されます。

• 要望、ご不満等ある方はパッチの送付をお願いします。

• 予定は未定です。

30