Embed Size (px)
DESCRIPTION
艦これタイマー for firefox addonを拡張してみた。 https://www.slideshare.net/koedoyoshida/kancolletimerfor-firefoxaddon のupdate
Citation preview
Indentとの戦い -艦これOSS便利ツールの紹介-
@koedoyoshida
1
艦これタイマー for Firefox addonの拡張
@koedoyoshida
2
艦これとは
• 『艦隊これくしょん -艦これ-』（かんたいこれくしょん かんこれ）は、角川ゲームスが開発し、DMM.comが配信しているブラウザゲームである。第二次世界大戦期の大日本帝国海軍の軍艦を萌えキャラクターに擬人化した、「艦娘（かんむす）」と呼ばれるキャラクターのカードをゲーム中で集め、強化しながら敵と戦闘し勝利を目指すという内容である。
• http://ja.wikipedia.org/wiki/艦隊これくしょん_-艦これ-
3
艦これタイマー for Firefoxとは
• Amanoさん作のソフトウェア
• 艦これタイマーとは遠征や入渠、建造の残り時間を管理し、時間がくると通知してくれるアプリの総称。
• 艦これタイマー for Firefoxはタイマーを自動設定するためにFirefoxアドオンとして作成された艦これタイマーです。
• http://miku39.jp/blog/wp/?page_id=1705#i-2
4
艦これタイマー for Firefoxの技術
• nsIObserverService で http-on-examine-response （HTTPの受信）の通知を受け取り、艦これのURLであれば nsITraceableChannel で通信の内容をチェック、タイマーの設定を行っています。
• 残り時間の取得のためにサーバーに一切アクセスは行わないため、サーバーの負荷に優しい仕様です。また、オンラインゲーム利用規約を読んだ上でサーバーにアクセスを行わない実装
• http://miku39.jp/blog/wp/?page_id=1705#_for_Firefox
5
規約との整合性
• http://www.dmm.co.jp/rule/=/category=onlinegame_service/ • （8）不正な方法（特殊なプログラムを介しての）でのアクセスを試みる行為
• （12）その他当社が不適切と判断する行為
• （8）については、人口増加によるサーバー過負荷での猫問題もあったのでむやみやたらにサーバーにアクセスしない方がサーバーに負荷はかからないし、サーバーにアクセスしなければ「アクセスを試みる行為」にも該当しないし誰にも迷惑がかからないので、通信内容を見て判断するのは問題ない”だろう”と、通常こういう項目はサーバーのクラッキング行為や、通信手順をなぞる外部プログラムを使った、１クリックで遠征できますとかダメージのある艦娘をまとめて入渠させますとかのマクロや、戦闘シーンを高速にしてさくさくと経験値稼ぎできます（通常ではありえない頻度で通信をすることになりサーバー負荷も高まる）とかいんちき処理などを想定しているものであること、（12）については、当社というのはDMM.comを指していますが、何をもって不適切と判断するのかDMM.com次第のため気にしてもしかたがないので、その時になったら開発中止などを考えることにする。要請があれば素直に従う。
• http://miku39.jp/blog/wp/?p=1867
6
艦これタイマー for Firefox のライセンスとソース
• MITライセンス
– http://miku39.jp/blog/wp/?page_id=1705
• ソース
– xpiファイルなのでzipとして展開可能
• リポジトリ
– https://bitbucket.org/amano_rox/kancolle-timer-for-firefox
7
現在の状況
• 本家はタイマーとしての機能は十分に実装済み。
• サイトのコメントで要望は多くでているが、タイマーの範囲を超える要望が多い。
• 作者のamanoさんは提督業で忙しい。
• 個人的にも付けたい機能がある。
–艦これタイマー for Firefox をベースにしてAddonを作ることにした。
8
本題
• ビルドの自動化
• JavaScriptの構文チェック
• Smarttab&改行コード問題
• Mercurialからgitへ
9
ビルドの自動化(1)
• 当初はリポジトリが不明であった。 – ライセンスも明示されていなかった。
– ビルドスクリプトも無かった。
– ビルドのためのスクリプトを作成
#ビルドスクリプト初期版 rm chrome/kancolletimer.jar; (cd chrome/ ; zip -r kancolletimer.jar chrome/ ) ; rm ../kancolletimer.xpi ; zip -r ../kancolletimer.xpi *
10
ビルドの自動化(2)
• リポジトリの所在が公開される。
– リポジトリ内にはbuild用のスクリプトが存在
• 上記を使う(呼び出す)ようにスクリプト修正
–マニフェスト(作者等の情報ファイル)がxpi版と異なる
• その整合性を合わせる
• 作者情報等を正しく入れるようにする
– JavaScriptの構文チェック(後述)を追加
11
ビルドの自動化(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/$$$$
12
JavaScriptの構文チェック(1)
• 構文等のケアレスミスがあると、がっかりする。
• Firefox23まではWebコンソールにJavaScriptの構文エラーがわかりやすく表示されていた。
• Firefox24でWebコンソールの出力内容変更、構文エラーが表示されないケースが…
• FirefoxESR17を使えるのもあとわずか….
• 構文チェックツールを探すことに…
13
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/
14
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
15
JavaScriptの構文チェック(4) • チェック行数を無制限に変更
• Node.js版と出力フォーマットも多少異なるが、1行で出力するよう修正。
• エラーはE999,ワーニングはW999といったフォーマット。
$ cat jshint-rhino.diff --- jshint-rhino-2.1.10.orig.js 2013-09-19 00:00:00.000000000 +0900 +++ jshint-rhino-2.1.10.js 2013-09-20 00:00:00.000000000 +0900 @@ -7537,3 +7537,3 @@ state.option.indent = state.option.indent || 4; - state.option.maxerr = state.option.maxerr || 50; + state.option.maxerr = state.option.maxerr || Number.POSITIVE_INFINITY; @@ -11441,5 +11441,3 @@ 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"));
16
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).
17
smarttab問題(2)
• リファクタリングしにくいので置換する
–差分は… diff –bで
18
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
• 最終的にはカスタム版のcherry-pickを作成(後述)
19
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 20
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
21
改行コード
• オリジナルの改行コードはCRLF
• vimだと毎行末に^Mが表示される。
– EmacsならOK
–宗教上の理由(宗教の自由)
• sed等に掛けるとCRが落ちる
–変更していない部分も差分と表示される
– smarttab問題で置換するとこれも困る
• 変換するとcherry-pick,merge,rebase等が困難になる。
22
オリジナルの変更を取り込む
• オリジナルの変更に迅速に追従したい
• 問題点
– Mercurial
– smarttab問題
–改行コード問題
• そのままでは取り込めない
23
Mercurial(hg)からgitへ(1)
• git-hgで変換
– http://offbytwo.com/git-hg/
• git-hg cloneすると新規のgitリポジトリが出来るので、それを既存のgitリポジトリに統合
• 既存のリポジトリのgitブランチとしてhgの変換後リポジトリが見える
24
$ git hg clone (hgリポジトリURL) ~/gitrepo $ git remote add hgrepodir #(cloneして変換されたhgのgitリポジトリ版のディレクトリ) ~/gitrepo $ git fetch hgrepo
Mercurial(hg)からgitへ(2) • 統合後のgitリポジトリでgit-hg fetchしたい
–変更後の修正を取り込みたい
error
abort: repository .git/hgcheckout not found!
• 下記を実施
25
~/gitrepo $ cp -rp hgrepodir/.git/hgremote .git/ ~/gitrepo $ cp -rp hgrepodir/.git/hgcheckout .git/ ~/gitrepo $ git-hg fetch searching for changes no changes found
変更管理
• リポジトリはgitに変換されたが、インデントが異なっているのでそのままでは変更(commit)を取り込めない
• 現状開発者は3～4名
• お互いに好き勝手に機能を追加している。
–開発ブランチも異なる
–お互いに良さそうな機能を取り込み合う
26
オリジナル等の変更を取り込み(1) –本来であればオリジナルの変更はgit mergeやgit
cherry-pickで簡単に別ブランチへ持って行ける。
– tab変換や改行コード変換の影響でmergeやcherry-pickが動かない
• そもそも改行コード、インデントが違う時点で全行に差分がある状態となり、差分適用時のオリジナル判別が困難
27
オリジナルの変更を取り込み(2) • 初期に試したこと
• patch適用前にパッチの改行コードとインデント変換を実施
– git format-patchでパッチをファイルに出力
– sedでtabを変換
– git am (変換後のパッチファイル)
• commitログ、著者情報を含めて取り込める
• 面倒な点
• git format-patchでは対象コミットの一つ前を指定する必要がある？コミットの指定方法が直感的でない
• コマンドを複数打つ&判断(どれが対象コミットの前のコミット？、どれが変換されたファイル？)が必要で面倒
• コミットログもtab変換の対象となってしまう。
• mergeが衝突する場合(該当箇所を双方で修正)の対応が困難(rejファイル等が生成されない)
28
オリジナルの変更を取り込み(3)
• 別解
–対象commitは"abc123"とする。
• 参考:git cherry-pick without whitespace http://stefaanlippens.net/git-cherry-pick-without-whitespace
• オリジナルのコミットメッセージと著者情報を取り込める
29
$ git show -w abc123 |(tab変換) | patch -p1 $ git commit -a -C abc123
gitのサブコマンド化
• そのまま適用出来る場合はオリジナルのコミットメッセージでcommit – cherry-pickとほぼ同様の使用感(オプション系は未対応)
– commitログ、著者情報を含めて取り込める
– 出来ない場合はrejファイルが出来るので手動マージ後、同様にgit commit -a -C ～で適用
• 同様に改行コード無変換/CRへ逆変換等も作成 30
$ cat ~/.gitconfig [alias] cherry-pick-ignore-space-change-ignore-cr =!(git show -w $1 |nkf --unix -w | sed -e 's/¥t/ /g' |patch -p1 -l && git commit -a -C $1) && echo
閑話休題
31
艦これタイマー for Firefox 比較
• オリジナルと、カスタム版どこが変わったか？
32
オリジナル
33
機能追加後 例1
34
機能追加後 例2
35
機能追加例3
36
機能追加後例4
37
機能追加内容(1) • 表示をグループ毎、任意に表示変更可能に
• 保有艦数、保有設備数を常時表示可能 – 最大に近づくと警告表示へ
• 内部パラメータの可視化 – 各艦娘の士気(キラキラ、疲労)の数値表示
– 近代化改装(合成)での候補リスト表示
– 演習相手の編成から獲得できるEXP概算を表示
– 入渠の修理時間での降順リスト表示
• 艦娘を装備、艦種等で検索可能 – あの装備どこに行った？
– 士気の(高い/低い)状態の艦娘はどれ？
38
機能追加内容(2) • 危険操作で警告(赤画面)を出す
–レベルが高いのにロック解除されている艦があると警告(誤操作での解体、合成の警告)
•誤操作で合成すると艦娘をロストします。
–大破すると警告
•大破進撃は艦娘をロストします。大変に危険です。
39
警告例1
40
警告例1
41
警告例2
42
警告例2
43
機能追加内容(3)
• その他隠し機能 –いろいろクリックしてみると隠し機能があるかも
–詳細はソースで！
44
参考資料
• カスタム版ソース
– 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
45
