SlideShare a Scribd company logo

加賀さんと僕（実装編）〜艦これウィジェットの課題と実装〜

•
•
Hiromu Ochiai
Hiromu Ochiai

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

1 of 134
Downloaded 23 times
加賀さんと僕 実装編 〜艦これウィジェットの課題と実装〜 @otiai10
!! 実装編です !! サービス概要については http://www.slideshare.net/otiai10/ss- 26631311 こちらをご覧ください
はじめに
Thanks to
加賀さんと僕（実装編）〜艦これウィジェットの課題と実装〜
加賀さんと僕（実装編）〜艦これウィジェットの課題と実装〜
加賀さんと僕（実装編）〜艦これウィジェットの課題と実装〜
and
井口裕香
目次 1. 艦これウィジェットの実装方針 2. Chrome拡張 a. なぜChrome拡張か b. Chrome拡張のできることできないこと 3. ウィジェット化を支える技術 4. リマインダーを支える技術 a. 遠征は簡単なんすよ b. 建造をどうするか c. 入渠をどうするか 5. サービスデザインについて 6. まとめ
1.艦これウィジェット の実装方針 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6 運営さんが
艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6 運営さんが
艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6 運営さんが
ということで 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
ということで 1. 艦これサーバに一切の負荷をかけないこと 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
ということで 1. 艦これサーバに一切の負荷をかけないこと → ユーザのゲームプレー上で発生する正規のAPI リクエスト以外のタイミングで、こちらでapi_token を保持して新規のAPIリクエストを送るなどのこと は、しない 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
ということで 1. 艦これサーバに一切の負荷をかけないこと 2. 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
ということで 1. 艦これサーバに一切の負荷をかけないこと 2. ゲーム内でのユーザ体験を改変しないこと 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
ということで 1. 艦これサーバに一切の負荷をかけないこと 2. ゲーム内でのユーザ体験を改変しないこと → 艦これというゲームがゲーム内で提供する面白 さ楽しさ困難さ（←ここ重要）を破壊するような自動 化などは、しない 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
1. 艦これサーバに一切の負荷をかけないこと 2. ゲーム内でのユーザ体験を改変しないこと 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6 ということで
実装方針 1. 艦これサーバに一切の負荷をかけないこと 2. ゲーム内でのユーザ体験を改変しないこと 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
2.Chrome拡張 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
なぜChrome拡張か (1) 1. 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
なぜChrome拡張か (1) 1. 多くの人が手軽にインストールできるから 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
なぜChrome拡張か (1) 1. 多くの人が手軽にインストールできるから Usage share of web browsers (Source StatCounter) 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6 なぜChrome拡張か (1) 1. 多くの人が手軽にインストールできるから
なぜChrome拡張か (2) 1. 多くの人が手軽にインストールできるから 2. 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
なぜChrome拡張か (2) 1. 多くの人が手軽にインストールできるから 2. 推奨環境であるから 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
なぜChrome拡張か (2) 1. 多くの人が手軽にインストールできるから 2. 推奨環境であるから http://www. kadokawagames.co. jp/KanColle/ 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
なぜChrome拡張か 1. 多くの人が手軽にインストールできるから 2. 推奨環境であるから 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
嘘です
なぜChrome拡張か (3) 1. 多くの人が手軽にインストールできるから 2. 推奨環境であるから 3. JavaScriptしか書けないから JavaScript 2years PHP 1.5year Python 0.5year Go 1month 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
なぜChrome拡張か (3) 1. 多くの人が手軽にインストールできるから 2. 推奨環境であるから 3. JavaScriptしか書けないから 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6 .NET ObjectiveC 無理! 無理!
なぜChrome拡張か (3) 1. 多くの人が手軽にインストールできるから 2. 推奨環境であるから 3. JavaScriptしか書けないから 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6 専ブラ 作んの無理！ 無理! 無理!
1. 多くの人が手軽にインストールできるから 2. 推奨環境であるから 3. JavaScriptしか書けないから 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6 なぜChrome拡張か
Chrome拡張のできることできないこと 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
Chrome拡張のできることできないこと 1. ひととおりブラウザJavaScriptは動く 2. ブラウザのカスタマイズ 3. ブラウザのHTTPリクエストを検知できる 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
Chrome拡張のできることできないこと 1. ひととおりブラウザJavaScriptは動く 2. ブラウザのカスタマイズ 3. ブラウザのHTTPリクエストを検知できる a. 検知できる 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
Chrome拡張のできることできないこと 1. ひととおりブラウザJavaScriptは動く 2. ブラウザのカスタマイズ 3. ブラウザのHTTPリクエストを検知できる a. タイミングでイベントをバインドできる 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
Chrome拡張のできることできないこと 1. ひととおりブラウザJavaScriptは動く 2. ブラウザのカスタマイズ 3. ブラウザのHTTPリクエストを検知できる a. タイミングでイベントをバインドできる b. request_bodyは取得できる 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
Chrome拡張のできることできないこと 1. ひととおりブラウザJavaScriptは動く 2. ブラウザのカスタマイズ 3. ブラウザのHTTPリクエストを検知できる a. タイミングでイベントをバインドできる b. 何をやろうとしたかでディスパッチできる 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
Chrome拡張のできることできないこと 1. ひととおりブラウザJavaScriptは動く 2. ブラウザのカスタマイズ 3. ブラウザのHTTPリクエストを検知できる a. タイミングでイベントをバインドできる b. 何をやろうとしたかでディスパッチできる c. しかし 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
Chrome拡張のできることできないこと 1. ひととおりブラウザJavaScriptは動く 2. ブラウザのカスタマイズ 3. ブラウザのHTTPリクエストを検知できる a. タイミングでイベントをバインドできる b. 何をやろうとしたかでディスパッチできる c. responseの中身が見れない！←ここ重要 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
Chrome拡張のできることできないこと 1. ひととおりブラウザJavaScriptは動く 2. ブラウザのカスタマイズ 3. ブラウザのHTTPリクエストを検知できる a. タイミングでイベントをバインドできる b. 何をやろうとしたかでディスパッチできる c. 結果どうなったかは見れないし編集できない 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
Chrome拡張のできることできないこと 1. ひととおりブラウザJavaScriptは動く 2. ブラウザのカスタマイズ 3. ブラウザのHTTPリクエストを検知できる a. タイミングでイベントをバインドできる b. 何をやろうとしたかでディスパッチできる c. 結果どうなったかは見れないし編集できない 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
3.ウィジェット化(ry 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
シンプルです 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
ゲーム領域を別窓で開いているだけです 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
以上 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
4.リマインダー(ry 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
遠征は簡単なんすよ 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
遠征は簡単なんすよ 1. HTTPリクエストをフックできる(chrome. webRequest.onBeforeRequest) 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
遠征は簡単なんすよ 1. HTTPリクエストをフックできる 2. request bodyは見れる 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
遠征は簡単なんすよ 1. HTTPリクエストをフックできる 2. request bodyは見れる 3. 遠征id何番？ 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
遠征は簡単なんすよ 1. HTTPリクエストをフックできる 2. request bodyは見れる 3. 遠征id何番？ 4. 遠征id → 遠征所要時間（固定じゃん） 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
遠征は簡単なんすよ 1. HTTPリクエストをフックできる 2. request bodyは見れる 3. 遠征id何番？ 4. 遠征id → 遠征所要時間（固定じゃん） 5. localStorageに終了時刻を保存 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
遠征は簡単なんすよ 1. HTTPリクエストをフックできる 2. request bodyは見れる 3. 遠征id何番？ 4. 遠征id → 遠征所要時間（固定じゃん） 5. localStorageに終了時刻を保存 6. backgroundで終わってないか随時チェック 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
遠征は簡単なんすよ 1. HTTPリクエストをフックできる 2. request bodyは見れる 3. 遠征id何番？ 4. 遠征id → 遠征所要時間（固定じゃん） 5. localStorageに終了時刻を保存 6. backgroundで終わってないか随時チェック 7. 終わってたらwebkitNotification.create.show 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
遠征は簡単なんすよ 1. HTTPリクエストをフックできる 2. request bodyは見れる 3. 遠征id何番？ 4. 遠征id → 遠征所要時間（固定じゃん） 5. localStorageに終了時刻を保存 6. backgroundで終わってないか随時チェック 7. 終わってたらwebkitNotification.create.show 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
建造をどうするか 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
建造をどうするか 課題 1. 建造・入渠所要時間は固定ではない 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
建造をどうするか 課題 1. 建造・入渠所要時間は固定ではない 2. chromeではレスポンスの中身が見れない 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
建造をどうするか 課題 1. 建造・入渠所要時間は固定ではない 2. chromeではレスポンスの中身が見れない 3. ではどうするか 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
建造をどうするか 課題 1. 建造・入渠所要時間は固定ではない 2. chromeではレスポンスの中身が見れない 3. ユーザ手動登録 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
建造をどうするか 課題 1. 建造・入渠所要時間は固定ではない 2. chromeではレスポンスの中身が見れない 3. ユーザ手動登録 4. どうせなら自動でリマインダ登録したい 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
建造をどうするか 課題 1. 建造・入渠所要時間は固定ではない 2. chromeではレスポンスの中身が見れない 3. ユーザ手動登録 4. どうせなら自動でリマインダ登録したい 5. 描画されたものを画像処理して取得しよう 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
＿人人人人人人人人人＿ ＞　突然の画像処理　＜ ￣Y^Y^Y^Y^Y^Y^Y^Y￣
建造をどうするか 課題 1. 建造・入渠所要時間は固定ではない 2. chromeではレスポンスの中身が見れない 3. ユーザ手動登録 4. どうせなら自動でリマインダ登録したい 5. 描画されたものを画像処理して取得しよう 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
画像断片をOCR処理する APIサーバつくった 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6 Tesseract-OCR クライアント側 画面キャプチャから画 像断片を生成して POST 画像を解析してOCR(文字情報抽出)処理して 文字情報(この場合 “00:59:14”)を返す サーバ側
建造をどうするか 課題 1. 建造・入渠所要時間は固定ではない 2. chromeではレスポンスの中身が見れない 3. ユーザ手動登録 4. どうせなら自動でリマインダ登録したい 5. 描画されたものを画像処理して取得しよう 6. サーバ負荷が気になる 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
建造をどうするか 課題 1. 建造・入渠所要時間は固定ではない 2. chromeではレスポンスの中身が見れない 3. ユーザ手動登録 4. どうせなら自動でリマインダ登録したい 5. 描画されたものを画像処理して取得しよう 6. スケーラビリティ！ 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
建造をどうするか 課題 1. 建造・入渠所要時間は固定ではない 2. chromeではレスポンスの中身が見れない 3. ユーザ手動登録 4. どうせなら自動でリマインダ登録したい 5. 描画されたものを画像処理して取得しよう 6. スケーラビリティといえば 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
建造をどうするか 課題 1. 建造・入渠所要時間は固定ではない 2. chromeではレスポンスの中身が見れない 3. ユーザ手動登録 4. どうせなら自動でリマインダ登録したい 5. 描画されたものを画像処理して取得しよう 6. スケーラビリティ！ 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
しかし PyCon APAC にて... 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6 っていう話をとなりの外人としてたら
しかし PyCon APAC にて... 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6 「それ、Google Compute Engine でできるよ」
PyCon APAC にて... 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6 GCEの中のひとでした... https://twitter.com/briandorsey
建造をどうするか 課題 1. 建造・入渠所要時間は固定ではない 2. chromeではレスポンスの中身が見れない 3. ユーザ手動登録 4. どうせなら自動でリマインダ登録したい 5. 描画されたものを画像処理して取得しよう 6. スケーラビリティ！！ with 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
建造をどうするか 課題 1. 建造・入渠所要時間は固定ではない 2. chromeではレスポンスの中身が見れない 3. ユーザ手動登録 4. どうせなら自動でリマインダ登録したい 5. 描画されたものを画像処理して取得しよう 6. 一番安いインスタンスだと 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6 メンションが来る
建造をどうするか 課題 1. 建造・入渠所要時間は固定ではない 2. chromeではレスポンスの中身が見れない 3. ユーザ手動登録 4. どうせなら自動でリマインダ登録したい 5. 描画されたものを画像処理して取得しよう 6. 拡張性 << 可用性ですよプロデューサーさん！ 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
建造をどうするか 課題 1. 建造・入渠所要時間は固定ではない 2. chromeではレスポンスの中身が見れない 3. ユーザ手動登録 4. どうせなら自動でリマインダ登録したい 5. 描画されたものを画像処理して取得しよう 6. 自前のVPSにしました(´・ω・`) 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
建造をどうするか 課題 1. 建造・入渠所要時間は固定ではない 2. chromeではレスポンスの中身が見れない 3. ユーザ手動登録 4. どうせなら自動でリマインダ登録したい 5. 描画されたものを画像処理して取得しよう 6. 自前のVPSにしました 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
入渠をどうするか 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
入渠をどうするか いや、入渠も同じやろ？ 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
これでいけるやろ Tesseract-OCR 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
これで Tesseract-OCR 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
こうして Tesseract-OCR 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
！？
加賀さんと僕（実装編）〜艦これウィジェットの課題と実装〜
！！
加賀さんと僕（実装編）〜艦これウィジェットの課題と実装〜
加賀さんと僕（実装編）〜艦これウィジェットの課題と実装〜
加賀さんと僕（実装編）〜艦これウィジェットの課題と実装〜
＿人人人人人人人人人＿ ＞ 突然のクレーン ＜ ￣Y^Y^Y^Y^Y^Y^Y^Y￣
入渠をどうするか 課題 1. クレーンがひっかかる 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
入渠をどうするか 課題 1. クレーンがひっかかる 2. 描画直後にキャプチャ撮ればいいのでは？ 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
入渠をどうするか 課題 1. クレーンがひっかかる 2. 描画タイミングは「入渠」リクエスト時ではない！ 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
入渠をどうするか 課題 1. クレーンがひっかかる 2. 描画タイミング 3. 「入渠」APIがリクエストされて、その後いくつか の汎用的なAPIが叩かれた後に描画される仕 様になっているようだ 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
入渠をどうするか 課題 1. クレーンがひっかかる 2. 描画タイミング 3. 入渠API→API(a)→API(b)→API(c) という連続 になり、API(c)のリクエストがCompleteされた 時点が描画タイミングとする 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
入渠をどうするか 課題 1. クレーンがひっかかる 2. 描画タイミング 3. 入渠API→API(a)→API(b)→API(c) onComplete 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
入渠をどうするか 課題 1. クレーンがひっかかる 2. 描画タイミング 3. 入渠API→API(a)→API(b)→API(c) onComplete 4. リクエスト直後に描画されるわけではない！ 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
入渠をどうするか 課題 1. クレーンがひっかかる 2. 描画タイミング 3. 入渠API→API(a)→API(b)→API(c) onComplete 4. PCによるFlashの描画を待つ 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
入渠をどうするか 課題 1. クレーンがひっかかる 2. 描画タイミング 3. 入渠API→API(a)→API(b)→API(c) onComplete 4. PCによるFlashの描画を待つ → setTimeout 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
入渠をどうするか 課題 1. クレーンがひっかかる 2. 描画タイミング 3. 入渠API→API(a)→API(b)→API(c) onComplete 4. PCによるFlashの描画を待つ → setTimeout 5. 何秒？ 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
入渠をどうするか 課題 1. クレーンがひっかかる 2. 描画タイミング 3. 入渠API→API(a)→API(b)→API(c) onComplete 4. PCによるFlashの描画を待つ → setTimeout 5. PCスペックに依存するじゃないか！！ 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
入渠をどうするか 課題 1. クレーンがひっかかる 2. 描画タイミング 3. 入渠API→API(a)→API(b)→API(c) onComplete 4. PCによるFlashの描画を待つ → setTimeout 5. 失敗ログを集めて調整するしか...(´・ω・`) 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
失敗事例ログを収集する APIサーバつくった 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6 クライアント側 失敗したときに 画像など失敗内容を POST サーバ側 ブラウザからいつでも 閲覧、削除可能
入渠をどうするか 課題 1. クレーンがひっかかる 2. 描画タイミング 3. 入渠API→API(a)→API(b)→API(c) onComplete 4. PCによるFlashの描画を待つ → setTimeout 5. 失敗ログを集めて描画タイミング調整 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
入渠をどうするか 課題 1. クレーンがひっかかる 2. 描画タイミング 3. 入渠API→API(a)→API(b)→API(c) onComplete 4. PCによるFlashの描画を待つ → setTimeout 5. 失敗ログを集めて描画タイミング調整 6. 現在、クライアント側画像処理を実装中 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
5.サービスデザイン について 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
サービスデザインについて 1. ゲームがゲーム内で提供するユーザ体験を改変 しない大前提 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
サービスデザインについて 1. ゲームがゲーム内で提供するユーザ体験を改変 しない大前提 2. 艦娘たくさん 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
サービスデザインについて 1. ゲームがゲーム内で提供するユーザ体験を改変 しない大前提 2. 艦娘たくさん 3. 艦娘かわいい 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
サービスデザインについて 1. ゲームがゲーム内で提供するユーザ体験を改変 しない大前提 2. 艦娘たくさん 3. 艦娘かわいい 4. 艦娘ペロペロ 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
サービスデザインについて 1. ゲームがゲーム内で提供するユーザ体験を改変 しない大前提 2. 艦娘たくさん 3. 艦娘かわいい 4. 艦娘ペロペロ 5. 提督の艦娘愛をサポートするようなツール！ 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
サービスデザインについて ● メニューの背景画像設定 ● 通知アイコン設定 ● 通知音声設定 ● 通知時テキスト設定 ● etc... 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
サービスデザインについて 1. ゲームがゲーム内で提供するユーザ体験を改変 しない大前提 2. 艦娘たくさん 3. 艦娘かわいい 4. 艦娘ペロペロ 5. 提督の艦娘愛をサポートするようなツール！ 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
サービスデザインについて ゲーム内でのアクティビティを自動化し 効率的にゲームを進めるツール 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
サービスデザインについて ゲーム内でのアクティビティを自動化し 効率的にゲームを進めるツール 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
サービスデザインについて ゲーム内でのアクティビティを自動化し 効率的にゲームを進めるツール ゲーム外でのユーザアクティビティを充実し もっと艦これと艦これを取り巻く環境が たのしくなるツール 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
事例 ● メニューの背景画像設定 ○ つくってるひといました！ありがとうございます ■ https://twitter. com/magunamu77/status/385778873532567552 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
サービスデザインについて ゲーム内でのアクティビティを自動化し 効率的にゲームを進めるツール ゲーム外でのユーザアクティビティを充実し もっと艦これと艦これを取り巻く環境が たのしくなるツール 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
5.まとめ 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
艦これウィジェットの実装は ● 艦これ運営さんに迷惑をかけぬよう設計するのが 大変でした ● 提督の健全な提督業と艦娘愛をサポートするよう に心がけています 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
艦これウィジェットの実装は ● 艦これ運営さんに迷惑をかけぬよう設計するのが 大変でした ● 提督の健全な提督業と艦娘愛をサポートするよう に心がけています 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6 （もちろんそうなんだけど） だいじなのは そこではなく
5.だいじなまとめ 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
「艦これ」たのしいので、 長くつづいてほしいと ユーザとして切実思います
したがって、 運営さんからの要請が あれば、もちろん開発 提供は止めますので、 ご了承下さい。
丁寧な運営をいつも ありがとうございます。 長くつづいてほしいと ユーザとして 切実思っています。
付録 ● Chromeウェブストア ○ 「艦これウィジェット」 ● Chrome拡張ソースコード ○ https://github.com/otiai10/kanColleWidget ● OCRサーバソースコード ○ https://github.com/otiai10/ocrServer ● Logサーバソースコード ○ https://github.com/otiai10/logServer
Thanks to
加賀さんと僕（実装編）〜艦これウィジェットの課題と実装〜
and you all, 提督

More Related Content

加賀さんと僕（実装編）〜艦これウィジェットの課題と実装〜