• Like
Indentとの戦い-艦これOSS便利ツールの紹介-
Upcoming SlideShare
Loading in...5
×

Indentとの戦い-艦これOSS便利ツールの紹介-

  • 3,972 views
Uploaded on

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

艦これタイマー for firefox addonを拡張してみた。
https://www.slideshare.net/koedoyoshida/kancolletimerfor-firefoxaddon
のupdate

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
3,972
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
1
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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