艦これウィジェットの実装の説明です slideshareでリンク消えたのでソースはこちら https://docs.google.com/presentation/d/1tLXOL38FANkL0gVZkNqgVMCilJzscSz3u7T6IxAfDic/edit?usp=sharing 艦これウィジェットのサービス概要はこちら http://www.slideshare.net/otiai10/ss-26631311

1. 加賀さんと僕
実装編
〜艦これウィジェットの課題と実装〜
@otiai10

2. !! 実装編です !!
サービス概要については
http://www.slideshare.net/otiai10/ss-
26631311
こちらをご覧ください

3. はじめに

4. Thanks to

8. and

9. 井口裕香

10. 目次
1. 艦これウィジェットの実装方針
2. Chrome拡張
a. なぜChrome拡張か
b. Chrome拡張のできることできないこと
3. ウィジェット化を支える技術
4. リマインダーを支える技術
a. 遠征は簡単なんすよ
b. 建造をどうするか
c. 入渠をどうするか
5. サービスデザインについて
6. まとめ

11. 1.艦これウィジェット
の実装方針
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

12. 艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6
運営さんが

13. 艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6
運営さんが

14. 艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6
運営さんが

15. ということで
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

16. ということで
1. 艦これサーバに一切の負荷をかけないこと
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

17. ということで
1. 艦これサーバに一切の負荷をかけないこと
→ ユーザのゲームプレー上で発生する正規のAPI
リクエスト以外のタイミングで、こちらでapi_token
を保持して新規のAPIリクエストを送るなどのこと
は、しない
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

18. ということで
1. 艦これサーバに一切の負荷をかけないこと
2.
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

19. ということで
1. 艦これサーバに一切の負荷をかけないこと
2. ゲーム内でのユーザ体験を改変しないこと
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

20. ということで
1. 艦これサーバに一切の負荷をかけないこと
2. ゲーム内でのユーザ体験を改変しないこと
→ 艦これというゲームがゲーム内で提供する面白
さ楽しさ困難さ（←ここ重要）を破壊するような自動
化などは、しない
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

21. 1. 艦これサーバに一切の負荷をかけないこと
2. ゲーム内でのユーザ体験を改変しないこと
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6
ということで

22. 実装方針
1. 艦これサーバに一切の負荷をかけないこと
2. ゲーム内でのユーザ体験を改変しないこと
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

23. 2.Chrome拡張
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

24. なぜChrome拡張か (1)
1.
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

25. なぜChrome拡張か (1)
1. 多くの人が手軽にインストールできるから
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

26. なぜChrome拡張か (1)
1. 多くの人が手軽にインストールできるから
Usage share of web browsers (Source
StatCounter)
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

27. 艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6
なぜChrome拡張か (1)
1. 多くの人が手軽にインストールできるから

28. なぜChrome拡張か (2)
1. 多くの人が手軽にインストールできるから
2.
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

29. なぜChrome拡張か (2)
1. 多くの人が手軽にインストールできるから
2. 推奨環境であるから
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

30. なぜChrome拡張か (2)
1. 多くの人が手軽にインストールできるから
2. 推奨環境であるから
http://www.
kadokawagames.co.
jp/KanColle/
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

31. なぜChrome拡張か
1. 多くの人が手軽にインストールできるから
2. 推奨環境であるから
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

32. 嘘です

33. なぜChrome拡張か (3)
1. 多くの人が手軽にインストールできるから
2. 推奨環境であるから
3. JavaScriptしか書けないから
JavaScript
2years
PHP
1.5year
Python
0.5year
Go
1month
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

34. なぜChrome拡張か (3)
1. 多くの人が手軽にインストールできるから
2. 推奨環境であるから
3. JavaScriptしか書けないから
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6
.NET ObjectiveC
無理!
無理!

35. なぜChrome拡張か (3)
1. 多くの人が手軽にインストールできるから
2. 推奨環境であるから
3. JavaScriptしか書けないから
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6
専ブラ 作んの無理！
無理!
無理!

36. 1. 多くの人が手軽にインストールできるから
2. 推奨環境であるから
3. JavaScriptしか書けないから
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6
なぜChrome拡張か

37. Chrome拡張のできることできないこと
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

38. Chrome拡張のできることできないこと
1. ひととおりブラウザJavaScriptは動く
2. ブラウザのカスタマイズ
3. ブラウザのHTTPリクエストを検知できる
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

39. Chrome拡張のできることできないこと
1. ひととおりブラウザJavaScriptは動く
2. ブラウザのカスタマイズ
3. ブラウザのHTTPリクエストを検知できる
a. 検知できる
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

40. Chrome拡張のできることできないこと
1. ひととおりブラウザJavaScriptは動く
2. ブラウザのカスタマイズ
3. ブラウザのHTTPリクエストを検知できる
a. タイミングでイベントをバインドできる
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

41. Chrome拡張のできることできないこと
1. ひととおりブラウザJavaScriptは動く
2. ブラウザのカスタマイズ
3. ブラウザのHTTPリクエストを検知できる
a. タイミングでイベントをバインドできる
b. request_bodyは取得できる
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

42. Chrome拡張のできることできないこと
1. ひととおりブラウザJavaScriptは動く
2. ブラウザのカスタマイズ
3. ブラウザのHTTPリクエストを検知できる
a. タイミングでイベントをバインドできる
b. 何をやろうとしたかでディスパッチできる
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

43. Chrome拡張のできることできないこと
1. ひととおりブラウザJavaScriptは動く
2. ブラウザのカスタマイズ
3. ブラウザのHTTPリクエストを検知できる
a. タイミングでイベントをバインドできる
b. 何をやろうとしたかでディスパッチできる
c. しかし
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

44. Chrome拡張のできることできないこと
1. ひととおりブラウザJavaScriptは動く
2. ブラウザのカスタマイズ
3. ブラウザのHTTPリクエストを検知できる
a. タイミングでイベントをバインドできる
b. 何をやろうとしたかでディスパッチできる
c. responseの中身が見れない！←ここ重要
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

45. Chrome拡張のできることできないこと
1. ひととおりブラウザJavaScriptは動く
2. ブラウザのカスタマイズ
3. ブラウザのHTTPリクエストを検知できる
a. タイミングでイベントをバインドできる
b. 何をやろうとしたかでディスパッチできる
c. 結果どうなったかは見れないし編集できない
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

46. Chrome拡張のできることできないこと
1. ひととおりブラウザJavaScriptは動く
2. ブラウザのカスタマイズ
3. ブラウザのHTTPリクエストを検知できる
a. タイミングでイベントをバインドできる
b. 何をやろうとしたかでディスパッチできる
c. 結果どうなったかは見れないし編集できない
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

47. 3.ウィジェット化(ry
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

48. シンプルです
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

49. ゲーム領域を別窓で開いているだけです
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

50. 以上
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

51. 4.リマインダー(ry
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

52. 遠征は簡単なんすよ
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

53. 遠征は簡単なんすよ
1. HTTPリクエストをフックできる(chrome.
webRequest.onBeforeRequest)
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

54. 遠征は簡単なんすよ
1. HTTPリクエストをフックできる
2. request bodyは見れる
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

55. 遠征は簡単なんすよ
1. HTTPリクエストをフックできる
2. request bodyは見れる
3. 遠征id何番？
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

56. 遠征は簡単なんすよ
1. HTTPリクエストをフックできる
2. request bodyは見れる
3. 遠征id何番？
4. 遠征id → 遠征所要時間（固定じゃん）
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

57. 遠征は簡単なんすよ
1. HTTPリクエストをフックできる
2. request bodyは見れる
3. 遠征id何番？
4. 遠征id → 遠征所要時間（固定じゃん）
5. localStorageに終了時刻を保存
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

58. 遠征は簡単なんすよ
1. HTTPリクエストをフックできる
2. request bodyは見れる
3. 遠征id何番？
4. 遠征id → 遠征所要時間（固定じゃん）
5. localStorageに終了時刻を保存
6. backgroundで終わってないか随時チェック
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

59. 遠征は簡単なんすよ
1. HTTPリクエストをフックできる
2. request bodyは見れる
3. 遠征id何番？
4. 遠征id → 遠征所要時間（固定じゃん）
5. localStorageに終了時刻を保存
6. backgroundで終わってないか随時チェック
7. 終わってたらwebkitNotification.create.show
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

60. 遠征は簡単なんすよ
1. HTTPリクエストをフックできる
2. request bodyは見れる
3. 遠征id何番？
4. 遠征id → 遠征所要時間（固定じゃん）
5. localStorageに終了時刻を保存
6. backgroundで終わってないか随時チェック
7. 終わってたらwebkitNotification.create.show
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

61. 建造をどうするか
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

62. 建造をどうするか
課題
1. 建造・入渠所要時間は固定ではない
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

63. 建造をどうするか
課題
1. 建造・入渠所要時間は固定ではない
2. chromeではレスポンスの中身が見れない
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

64. 建造をどうするか
課題
1. 建造・入渠所要時間は固定ではない
2. chromeではレスポンスの中身が見れない
3. ではどうするか
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

65. 建造をどうするか
課題
1. 建造・入渠所要時間は固定ではない
2. chromeではレスポンスの中身が見れない
3. ユーザ手動登録
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

66. 建造をどうするか
課題
1. 建造・入渠所要時間は固定ではない
2. chromeではレスポンスの中身が見れない
3. ユーザ手動登録
4. どうせなら自動でリマインダ登録したい
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

67. 建造をどうするか
課題
1. 建造・入渠所要時間は固定ではない
2. chromeではレスポンスの中身が見れない
3. ユーザ手動登録
4. どうせなら自動でリマインダ登録したい
5. 描画されたものを画像処理して取得しよう
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

68. ＿人人人人人人人人人＿
＞ 突然の画像処理 ＜
￣Y^Y^Y^Y^Y^Y^Y^Y￣

69. 建造をどうするか
課題
1. 建造・入渠所要時間は固定ではない
2. chromeではレスポンスの中身が見れない
3. ユーザ手動登録
4. どうせなら自動でリマインダ登録したい
5. 描画されたものを画像処理して取得しよう
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

70. 画像断片をOCR処理する
APIサーバつくった
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6
Tesseract-OCR
クライアント側
画面キャプチャから画
像断片を生成して
POST
画像を解析してOCR(文字情報抽出)処理して
文字情報(この場合 “00:59:14”)を返す
サーバ側

71. 建造をどうするか
課題
1. 建造・入渠所要時間は固定ではない
2. chromeではレスポンスの中身が見れない
3. ユーザ手動登録
4. どうせなら自動でリマインダ登録したい
5. 描画されたものを画像処理して取得しよう
6. サーバ負荷が気になる
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

72. 建造をどうするか
課題
1. 建造・入渠所要時間は固定ではない
2. chromeではレスポンスの中身が見れない
3. ユーザ手動登録
4. どうせなら自動でリマインダ登録したい
5. 描画されたものを画像処理して取得しよう
6. スケーラビリティ！
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

73. 建造をどうするか
課題
1. 建造・入渠所要時間は固定ではない
2. chromeではレスポンスの中身が見れない
3. ユーザ手動登録
4. どうせなら自動でリマインダ登録したい
5. 描画されたものを画像処理して取得しよう
6. スケーラビリティといえば
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

74. 建造をどうするか
課題
1. 建造・入渠所要時間は固定ではない
2. chromeではレスポンスの中身が見れない
3. ユーザ手動登録
4. どうせなら自動でリマインダ登録したい
5. 描画されたものを画像処理して取得しよう
6. スケーラビリティ！
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

75. しかし PyCon APAC にて...
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6
っていう話をとなりの外人としてたら

76. しかし PyCon APAC にて...
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6
「それ、Google Compute Engine でできるよ」

77. PyCon APAC にて...
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6
GCEの中のひとでした...
https://twitter.com/briandorsey

78. 建造をどうするか
課題
1. 建造・入渠所要時間は固定ではない
2. chromeではレスポンスの中身が見れない
3. ユーザ手動登録
4. どうせなら自動でリマインダ登録したい
5. 描画されたものを画像処理して取得しよう
6. スケーラビリティ！！ with
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

79. 建造をどうするか
課題
1. 建造・入渠所要時間は固定ではない
2. chromeではレスポンスの中身が見れない
3. ユーザ手動登録
4. どうせなら自動でリマインダ登録したい
5. 描画されたものを画像処理して取得しよう
6. 一番安いインスタンスだと
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

80. 艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6
メンションが来る

81. 建造をどうするか
課題
1. 建造・入渠所要時間は固定ではない
2. chromeではレスポンスの中身が見れない
3. ユーザ手動登録
4. どうせなら自動でリマインダ登録したい
5. 描画されたものを画像処理して取得しよう
6. 拡張性 << 可用性ですよプロデューサーさん！
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

82. 建造をどうするか
課題
1. 建造・入渠所要時間は固定ではない
2. chromeではレスポンスの中身が見れない
3. ユーザ手動登録
4. どうせなら自動でリマインダ登録したい
5. 描画されたものを画像処理して取得しよう
6. 自前のVPSにしました(´・ω・`)
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

83. 建造をどうするか
課題
1. 建造・入渠所要時間は固定ではない
2. chromeではレスポンスの中身が見れない
3. ユーザ手動登録
4. どうせなら自動でリマインダ登録したい
5. 描画されたものを画像処理して取得しよう
6. 自前のVPSにしました
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

84. 入渠をどうするか
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

85. 入渠をどうするか
いや、入渠も同じやろ？
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

86. これでいけるやろ
Tesseract-OCR
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

87. これで
Tesseract-OCR
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

88. こうして
Tesseract-OCR
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

89. ！？

91. ！！

95. ＿人人人人人人人人人＿
＞ 突然のクレーン ＜
￣Y^Y^Y^Y^Y^Y^Y^Y￣

96. 入渠をどうするか
課題
1. クレーンがひっかかる
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

97. 入渠をどうするか
課題
1. クレーンがひっかかる
2. 描画直後にキャプチャ撮ればいいのでは？
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

98. 入渠をどうするか
課題
1. クレーンがひっかかる
2. 描画タイミングは「入渠」リクエスト時ではない！
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

99. 入渠をどうするか
課題
1. クレーンがひっかかる
2. 描画タイミング
3. 「入渠」APIがリクエストされて、その後いくつか
の汎用的なAPIが叩かれた後に描画される仕
様になっているようだ
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

100. 入渠をどうするか
課題
1. クレーンがひっかかる
2. 描画タイミング
3. 入渠API→API(a)→API(b)→API(c) という連続
になり、API(c)のリクエストがCompleteされた
時点が描画タイミングとする
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

101. 入渠をどうするか
課題
1. クレーンがひっかかる
2. 描画タイミング
3. 入渠API→API(a)→API(b)→API(c) onComplete
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

102. 入渠をどうするか
課題
1. クレーンがひっかかる
2. 描画タイミング
3. 入渠API→API(a)→API(b)→API(c) onComplete
4. リクエスト直後に描画されるわけではない！
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

103. 入渠をどうするか
課題
1. クレーンがひっかかる
2. 描画タイミング
3. 入渠API→API(a)→API(b)→API(c) onComplete
4. PCによるFlashの描画を待つ
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

104. 入渠をどうするか
課題
1. クレーンがひっかかる
2. 描画タイミング
3. 入渠API→API(a)→API(b)→API(c) onComplete
4. PCによるFlashの描画を待つ → setTimeout
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

105. 入渠をどうするか
課題
1. クレーンがひっかかる
2. 描画タイミング
3. 入渠API→API(a)→API(b)→API(c) onComplete
4. PCによるFlashの描画を待つ → setTimeout
5. 何秒？
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

106. 入渠をどうするか
課題
1. クレーンがひっかかる
2. 描画タイミング
3. 入渠API→API(a)→API(b)→API(c) onComplete
4. PCによるFlashの描画を待つ → setTimeout
5. PCスペックに依存するじゃないか！！
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

107. 入渠をどうするか
課題
1. クレーンがひっかかる
2. 描画タイミング
3. 入渠API→API(a)→API(b)→API(c) onComplete
4. PCによるFlashの描画を待つ → setTimeout
5. 失敗ログを集めて調整するしか...(´・ω・`)
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

108. 失敗事例ログを収集する
APIサーバつくった
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6
クライアント側
失敗したときに
画像など失敗内容を
POST
サーバ側
ブラウザからいつでも
閲覧、削除可能

109. 入渠をどうするか
課題
1. クレーンがひっかかる
2. 描画タイミング
3. 入渠API→API(a)→API(b)→API(c) onComplete
4. PCによるFlashの描画を待つ → setTimeout
5. 失敗ログを集めて描画タイミング調整
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

110. 入渠をどうするか
課題
1. クレーンがひっかかる
2. 描画タイミング
3. 入渠API→API(a)→API(b)→API(c) onComplete
4. PCによるFlashの描画を待つ → setTimeout
5. 失敗ログを集めて描画タイミング調整
6. 現在、クライアント側画像処理を実装中
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

111. 5.サービスデザイン
について
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

112. サービスデザインについて
1. ゲームがゲーム内で提供するユーザ体験を改変
しない大前提
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

113. サービスデザインについて
1. ゲームがゲーム内で提供するユーザ体験を改変
しない大前提
2. 艦娘たくさん
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

114. サービスデザインについて
1. ゲームがゲーム内で提供するユーザ体験を改変
しない大前提
2. 艦娘たくさん
3. 艦娘かわいい
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

115. サービスデザインについて
1. ゲームがゲーム内で提供するユーザ体験を改変
しない大前提
2. 艦娘たくさん
3. 艦娘かわいい
4. 艦娘ペロペロ
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

116. サービスデザインについて
1. ゲームがゲーム内で提供するユーザ体験を改変
しない大前提
2. 艦娘たくさん
3. 艦娘かわいい
4. 艦娘ペロペロ
5. 提督の艦娘愛をサポートするようなツール！
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

117. サービスデザインについて
● メニューの背景画像設定
● 通知アイコン設定
● 通知音声設定
● 通知時テキスト設定
● etc...
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

118. サービスデザインについて
1. ゲームがゲーム内で提供するユーザ体験を改変
しない大前提
2. 艦娘たくさん
3. 艦娘かわいい
4. 艦娘ペロペロ
5. 提督の艦娘愛をサポートするようなツール！
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

119. サービスデザインについて
ゲーム内でのアクティビティを自動化し
効率的にゲームを進めるツール
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

120. サービスデザインについて
ゲーム内でのアクティビティを自動化し
効率的にゲームを進めるツール
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

121. サービスデザインについて
ゲーム内でのアクティビティを自動化し
効率的にゲームを進めるツール
ゲーム外でのユーザアクティビティを充実し
もっと艦これと艦これを取り巻く環境が
たのしくなるツール
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

122. 事例
● メニューの背景画像設定
○ つくってるひといました！ありがとうございます
■ https://twitter.
com/magunamu77/status/385778873532567552
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

123. サービスデザインについて
ゲーム内でのアクティビティを自動化し
効率的にゲームを進めるツール
ゲーム外でのユーザアクティビティを充実し
もっと艦これと艦これを取り巻く環境が
たのしくなるツール
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

124. 5.まとめ
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

125. 艦これウィジェットの実装は
● 艦これ運営さんに迷惑をかけぬよう設計するのが
大変でした
● 提督の健全な提督業と艦娘愛をサポートするよう
に心がけています
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

126. 艦これウィジェットの実装は
● 艦これ運営さんに迷惑をかけぬよう設計するのが
大変でした
● 提督の健全な提督業と艦娘愛をサポートするよう
に心がけています
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6
（もちろんそうなんだけど）
だいじなのは
そこではなく

127. 5.だいじなまとめ
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6

128. 「艦これ」たのしいので、
長くつづいてほしいと
ユーザとして切実思います

129. したがって、
運営さんからの要請が
あれば、もちろん開発
提供は止めますので、
ご了承下さい。

130. 丁寧な運営をいつも
ありがとうございます。
長くつづいてほしいと
ユーザとして
切実思っています。

131. 付録
● Chromeウェブストア
○ 「艦これウィジェット」
● Chrome拡張ソースコード
○ https://github.com/otiai10/kanColleWidget
● OCRサーバソースコード
○ https://github.com/otiai10/ocrServer
● Logサーバソースコード
○ https://github.com/otiai10/logServer

132. Thanks to

134. and you all, 提督