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

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

2
艦これとは
• 『艦隊これくしょん -艦これ-』(かんたいこれくしょ
ん かんこれ)は、角川ゲームスが開発し、
DMM.comが配信しているブラウザゲームである。
第二次世界大戦期の大日本帝国海軍の軍艦を
萌えキャラクターに擬人化した、「艦娘(...
艦これタイマー for Firefoxとは
• Amanoさん作のソフトウェア
• 艦これタイマーとは遠征や入渠、建造の残り
時間を管理し、時間がくると通知してくれるア
プリの総称。
• 艦これタイマー for Firefoxはタイマーを自動設...
艦これタイマー for Firefoxの技術
• nsIObserverService で http-on-examine-response
(HTTPの受信)の通知を受け取り、艦これのURL
であれば nsITraceableChannel ...
規約との整合性
•
•
•

•

•

http://www.dmm.co.jp/rule/=/category=onlinegame_service/
(8)不正な方法(特殊なプログラムを介しての)でのアクセスを試みる行
為
(12)その他...
艦これタイマー for Firefox
のライセンスとソース
• MITライセンス
– http://miku39.jp/blog/wp/?page_id=1705

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

• リポジトリ
...
現在の状況
• 本家はタイマーとしての機能は十分に実装済
み。
• サイトのコメントで要望は多くでているが、タイ
マーの範囲を超える要望が多い。
• 作者のamanoさんは提督業で忙しい。
• 個人的にも付けたい機能がある。
– 艦これタイマー...
本題
•
•
•
•

ビルドの自動化
JavaScriptの構文チェック
Smarttab&改行コード問題
Mercurialからgitへ

9
ビルドの自動化(1)
• 当初はリポジトリが不明であった。
– ライセンスも明示されていなかった。
– ビルドスクリプトも無かった。
– ビルドのためのスクリプトを作成
#ビルドスクリプト初期版
rm chrome/kancolletimer....
ビルドの自動化(2)
• リポジトリの所在が公開される。
– リポジトリ内にはbuild用のスクリプトが存在
• 上記を使う(呼び出す)ようにスクリプト修正

– マニフェスト(作者等の情報ファイル)がxpi版と異
なる
• その整合性を合わせ...
ビルドの自動化(3)
#ビルドスクリプト
$ cat Makefile
define SHELLSCRIPT
mkdir -p ../build/chrome
if type -a JSsyntaxcheck.sh > /dev/null 2>...
JavaScriptの構文チェック(1)
• 構文等のケアレスミスがあると、がっかりする。
• Firefox23まではWebコンソールにJavaScriptの
構文エラーがわかりやすく表示されていた。
• Firefox24でWebコンソール...
JavaScriptの構文チェック(2)
• JShintを使用
– Node.jsまたはRhino等で動作
– http://www.jshint.com/install/

• Rhino
– Rhino(ライノー)とはオープンソースで開発...
JavaScriptの構文チェック(3)
• cygwin環境で下記を作成。
• ^Eは構文エラー検出のみ使用したかったため、
ワーニングレベルだと元ソースでも多数出る。
$ cat /usr/local/bin/JSsyntaxcheck.s...
JavaScriptの構文チェック(4)
•
•
•

チェック行数を無制限に変更
Node.js版と出力フォーマットも多少異なるが、1行で出力するよう修正。
エラーはE999,ワーニングはW999といったフォーマット。

$ cat jshi...
smarttab問題(1)

• 元ソースのインデントは
– 1段目:4SPACE
– 2段目:tab
– 3段目:tab 4SPACE
– 4段目:tab tab
• いわゆるsmarttab(by JSHint)
• Java Script...
smarttab問題(2)
• リファクタリングしにくいので置換する
– 差分は… diff –bで

18
smarttab問題(3)
• .git/hooks/pre-commitで対応
– 特定ブランチはtabの存在を許す。
– それ以外のブランチは強制修正または警告

• git cherry-pickにpre-commitが呼ばれない
– 初...
smarttab問題(3)
$ cat .git/hooks/pre-commit
#!/bin/bash
if git rev-parse --verify HEAD >/dev/null 2>&1
then
against=HEAD
els...
smarttab問題(4)
$ cat .git/hooks/pre-applypatch
#!/bin/sh
#サンプルそのまま有効化
. git-sh-setup
test -x "$GIT_DIR/hooks/pre-commit" &&...
改行コード
• オリジナルの改行コードはCRLF
• vimだと毎行末に^Mが表示される。
– EmacsならOK
– 宗教上の理由(宗教の自由)

• sed等に掛けるとCRが落ちる
– 変更していない部分も差分と表示される
– smartt...
オリジナルの変更を取り込む
• オリジナルの変更に迅速に追従したい
• 問題点
– Mercurial
– smarttab問題
– 改行コード問題

• そのままでは取り込めない

23
Mercurial(hg)からgitへ(1)
• git-hgで変換
– http://offbytwo.com/git-hg/

• git-hg cloneすると新規のgitリポジトリが出来る
ので、それを既存のgitリポジトリに統合
$ ...
Mercurial(hg)からgitへ(2)
• 統合後のgitリポジトリでgit-hg fetchしたい
– 変更後の修正を取り込みたい
error
abort: repository .git/hgcheckout not found!

...
変更管理
• リポジトリはgitに変換されたが、インデントが
異なっているのでそのままでは変更(commit)
を取り込めない
• 現状開発者は3~4名
• お互いに好き勝手に機能を追加している。
– 開発ブランチも異なる
– お互いに良さそう...
オリジナル等の変更を取り込み(1)
– 本来であればオリジナルの変更はgit mergeやgit
cherry-pickで簡単に別ブランチへ持って行ける。
– tab変換や改行コード変換の影響でmergeや
cherry-pickが動かない
•...
オリジナルの変更を取り込み(2)
• 初期に試したこと
•

patch適用前にパッチの改行コードとインデント変換を実施
– git format-patchでパッチをファイルに出力
– sedでtabを変換
– git am (変換後のパッチ...
オリジナルの変更を取り込み(3)
• 別解
– 対象commitは"abc123"とする。
$ git show -w abc123 |(tab変換) | patch -p1
$ git commit -a -C abc123

• 参考:gi...
gitのサブコマンド化
$ cat ~/.gitconfig
[alias]
cherry-pick-ignore-space-change-ignore-cr =!(git
show -w $1 |nkf --unix -w | sed -e...
閑話休題

31
艦これタイマー for Firefox 比較
• オリジナルと、カスタム版どこが変わったか?

32
オリジナル

33
機能追加後 例1

34
機能追加後 例2

35
機能追加例3

36
機能追加後例4

37
機能追加内容(1)
• 表示をグループ毎、任意に表示変更可能に
• 保有艦数、保有設備数を常時表示可能
– 最大に近づくと警告表示へ

• 内部パラメータの可視化
–
–
–
–

各艦娘の士気(キラキラ、疲労)の数値表示
近代化改装(合成)で...
機能追加内容(2)
• 危険操作で警告(赤画面)を出す
–レベルが高いのにロック解除され
ている艦があると警告(誤操作で
の解体、合成の警告)
• 誤操作で合成すると艦娘をロストし
ます。

–大破すると警告
•大破進撃は艦娘をロストします。
...
警告例1

40
警告例1

41
警告例2

42
警告例2

43
機能追加内容(3)
• その他隠し機能
– いろいろクリックしてみると隠し機能があるかも
– 詳細はソースで!

44
参考資料
• カスタム版ソース
– https://bitbucket.org/koedoyoshida/kancolletimer-for-firefox/
– ライセンスMIT

• オリジナル
– http://miku39.jp/blo...
Upcoming SlideShare
Loading in …5
×

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

4,959 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,959
On SlideShare
0
From Embeds
0
Number of Embeds
42
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

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

×