Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
加賀さんと僕
実装編
〜艦これウィジェットの課題と実装〜
@otiai10
!! 実装編です !!
サービス概要については
http://www.slideshare.net/otiai10/ss-
26631311
こちらをご覧ください
はじめに
Thanks to
and
井口裕香
目次
1. 艦これウィジェットの実装方針
2. Chrome拡張
a. なぜChrome拡張か
b. Chrome拡張のできることできないこと
3. ウィジェット化を支える技術
4. リマインダーを支える技術
a. 遠征は簡単なんすよ
b. 建...
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. 艦これサーバに一切の負荷をかけないこと
2.
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6
ということで
1. 艦これサーバに一切の負荷をかけないこと
2. ゲーム内でのユーザ体験を改変しないこと
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインにつ...
ということで
1. 艦これサーバに一切の負荷をかけないこと
2. ゲーム内でのユーザ体験を改変しないこと
→ 艦これというゲームがゲーム内で提供する面白
さ楽しさ困難さ(←ここ重要)を破壊するような自動
化などは、しない
艦これウィジェットの実...
1. 艦これサーバに一切の負荷をかけないこと
2. ゲーム内でのユーザ体験を改変しないこと
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まと...
実装方針
1. 艦これサーバに一切の負荷をかけないこと
2. ゲーム内でのユーザ体験を改変しないこと
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて...
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
ウィジェット...
艦これウィジェットの実装方針 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
サービスデザインについ...
なぜChrome拡張か (2)
1. 多くの人が手軽にインストールできるから
2. 推奨環境であるから
http://www.
kadokawagames.co.
jp/KanColle/
艦これウィジェットの実装方針 1
Chrome拡張 2...
なぜChrome拡張か
1. 多くの人が手軽にインストールできるから
2. 推奨環境であるから
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
...
嘘です
なぜChrome拡張か (3)
1. 多くの人が手軽にインストールできるから
2. 推奨環境であるから
3. JavaScriptしか書けないから
JavaScript
2years
PHP
1.5year
Python
0.5year
Go
...
なぜChrome拡張か (3)
1. 多くの人が手軽にインストールできるから
2. 推奨環境であるから
3. JavaScriptしか書けないから
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマイン...
なぜChrome拡張か (3)
1. 多くの人が手軽にインストールできるから
2. 推奨環境であるから
3. JavaScriptしか書けないから
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマイン...
1. 多くの人が手軽にインストールできるから
2. 推奨環境であるから
3. JavaScriptしか書けないから
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデ...
Chrome拡張のできることできないこと
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6
Chrome拡張のできることできないこと
1. ひととおりブラウザJavaScriptは動く
2. ブラウザのカスタマイズ
3. ブラウザのHTTPリクエストを検知できる
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を...
Chrome拡張のできることできないこと
1. ひととおりブラウザJavaScriptは動く
2. ブラウザのカスタマイズ
3. ブラウザのHTTPリクエストを検知できる
a. 検知できる
艦これウィジェットの実装方針 1
Chrome拡張 2...
Chrome拡張のできることできないこと
1. ひととおりブラウザJavaScriptは動く
2. ブラウザのカスタマイズ
3. ブラウザのHTTPリクエストを検知できる
a. タイミングでイベントをバインドできる
艦これウィジェットの実装方針...
Chrome拡張のできることできないこと
1. ひととおりブラウザJavaScriptは動く
2. ブラウザのカスタマイズ
3. ブラウザのHTTPリクエストを検知できる
a. タイミングでイベントをバインドできる
b. request_bod...
Chrome拡張のできることできないこと
1. ひととおりブラウザJavaScriptは動く
2. ブラウザのカスタマイズ
3. ブラウザのHTTPリクエストを検知できる
a. タイミングでイベントをバインドできる
b. 何をやろうとしたかでデ...
Chrome拡張のできることできないこと
1. ひととおりブラウザJavaScriptは動く
2. ブラウザのカスタマイズ
3. ブラウザのHTTPリクエストを検知できる
a. タイミングでイベントをバインドできる
b. 何をやろうとしたかでデ...
Chrome拡張のできることできないこと
1. ひととおりブラウザJavaScriptは動く
2. ブラウザのカスタマイズ
3. ブラウザのHTTPリクエストを検知できる
a. タイミングでイベントをバインドできる
b. 何をやろうとしたかでデ...
Chrome拡張のできることできないこと
1. ひととおりブラウザJavaScriptは動く
2. ブラウザのカスタマイズ
3. ブラウザのHTTPリクエストを検知できる
a. タイミングでイベントをバインドできる
b. 何をやろうとしたかでデ...
Chrome拡張のできることできないこと
1. ひととおりブラウザJavaScriptは動く
2. ブラウザのカスタマイズ
3. ブラウザのHTTPリクエストを検知できる
a. タイミングでイベントをバインドできる
b. 何をやろうとしたかでデ...
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
リマインダーを支える技術...
遠征は簡単なんすよ
1. HTTPリクエストをフックできる
2. request bodyは見れる
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて ...
遠征は簡単なんすよ
1. HTTPリクエストをフックできる
2. request bodyは見れる
3. 遠征id何番?
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サー...
遠征は簡単なんすよ
1. HTTPリクエストをフックできる
2. request bodyは見れる
3. 遠征id何番?
4. 遠征id → 遠征所要時間(固定じゃん)
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支...
遠征は簡単なんすよ
1. HTTPリクエストをフックできる
2. request bodyは見れる
3. 遠征id何番?
4. 遠征id → 遠征所要時間(固定じゃん)
5. localStorageに終了時刻を保存
艦これウィジェットの実装方...
遠征は簡単なんすよ
1. HTTPリクエストをフックできる
2. request bodyは見れる
3. 遠征id何番?
4. 遠征id → 遠征所要時間(固定じゃん)
5. localStorageに終了時刻を保存
6. background...
遠征は簡単なんすよ
1. HTTPリクエストをフックできる
2. request bodyは見れる
3. 遠征id何番?
4. 遠征id → 遠征所要時間(固定じゃん)
5. localStorageに終了時刻を保存
6. background...
遠征は簡単なんすよ
1. HTTPリクエストをフックできる
2. request bodyは見れる
3. 遠征id何番?
4. 遠征id → 遠征所要時間(固定じゃん)
5. localStorageに終了時刻を保存
6. background...
建造をどうするか
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6
建造をどうするか
課題
1. 建造・入渠所要時間は固定ではない
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6
建造をどうするか
課題
1. 建造・入渠所要時間は固定ではない
2. chromeではレスポンスの中身が見れない
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザ...
建造をどうするか
課題
1. 建造・入渠所要時間は固定ではない
2. chromeではレスポンスの中身が見れない
3. ではどうするか
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える...
建造をどうするか
課題
1. 建造・入渠所要時間は固定ではない
2. chromeではレスポンスの中身が見れない
3. ユーザ手動登録
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える...
建造をどうするか
課題
1. 建造・入渠所要時間は固定ではない
2. chromeではレスポンスの中身が見れない
3. ユーザ手動登録
4. どうせなら自動でリマインダ登録したい
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェ...
建造をどうするか
課題
1. 建造・入渠所要時間は固定ではない
2. chromeではレスポンスの中身が見れない
3. ユーザ手動登録
4. どうせなら自動でリマインダ登録したい
5. 描画されたものを画像処理して取得しよう
艦これウィジェット...
_人人人人人人人人人_
> 突然の画像処理 <
 ̄Y^Y^Y^Y^Y^Y^Y^Y ̄
建造をどうするか
課題
1. 建造・入渠所要時間は固定ではない
2. chromeではレスポンスの中身が見れない
3. ユーザ手動登録
4. どうせなら自動でリマインダ登録したい
5. 描画されたものを画像処理して取得しよう
艦これウィジェット...
画像断片をOCR処理する
APIサーバつくった
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6
Tesseract-OCR
クライア...
建造をどうするか
課題
1. 建造・入渠所要時間は固定ではない
2. chromeではレスポンスの中身が見れない
3. ユーザ手動登録
4. どうせなら自動でリマインダ登録したい
5. 描画されたものを画像処理して取得しよう
6. サーバ負荷が...
建造をどうするか
課題
1. 建造・入渠所要時間は固定ではない
2. chromeではレスポンスの中身が見れない
3. ユーザ手動登録
4. どうせなら自動でリマインダ登録したい
5. 描画されたものを画像処理して取得しよう
6. スケーラビリ...
建造をどうするか
課題
1. 建造・入渠所要時間は固定ではない
2. chromeではレスポンスの中身が見れない
3. ユーザ手動登録
4. どうせなら自動でリマインダ登録したい
5. 描画されたものを画像処理して取得しよう
6. スケーラビリ...
建造をどうするか
課題
1. 建造・入渠所要時間は固定ではない
2. chromeではレスポンスの中身が見れない
3. ユーザ手動登録
4. どうせなら自動でリマインダ登録したい
5. 描画されたものを画像処理して取得しよう
6. スケーラビリ...
しかし PyCon APAC にて...
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6
っていう話をとなりの外人としてたら
しかし PyCon APAC にて...
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6
「それ、Google Compute En...
PyCon APAC にて...
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6
GCEの中のひとでした...
https://tw...
建造をどうするか
課題
1. 建造・入渠所要時間は固定ではない
2. chromeではレスポンスの中身が見れない
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. 建造・入渠所要時間は固定ではない
2. chromeではレスポンスの中身が見れない
3. ユーザ手動登録
4. どうせなら自動でリマインダ登録したい
5. 描画されたものを画像処理して取得しよう
6. 自前のVPS...
建造をどうするか
課題
1. 建造・入渠所要時間は固定ではない
2. chromeではレスポンスの中身が見れない
3. ユーザ手動登録
4. どうせなら自動でリマインダ登録したい
5. 描画されたものを画像処理して取得しよう
6. 自前のVPS...
入渠をどうするか
艦これウィジェットの実装方針 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...
入渠をどうするか
課題
1. クレーンがひっかかる
2. 描画タイミングは「入渠」リクエスト時ではない!
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインにつ...
入渠をどうするか
課題
1. クレーンがひっかかる
2. 描画タイミング
3. 「入渠」APIがリクエストされて、その後いくつか
の汎用的なAPIが叩かれた後に描画される仕
様になっているようだ
艦これウィジェットの実装方針 1
Chrome拡...
入渠をどうするか
課題
1. クレーンがひっかかる
2. 描画タイミング
3. 入渠API→API(a)→API(b)→API(c) という連続
になり、API(c)のリクエストがCompleteされた
時点が描画タイミングとする
艦これウィジ...
入渠をどうするか
課題
1. クレーンがひっかかる
2. 描画タイミング
3. 入渠API→API(a)→API(b)→API(c) onComplete
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
...
入渠をどうするか
課題
1. クレーンがひっかかる
2. 描画タイミング
3. 入渠API→API(a)→API(b)→API(c) onComplete
4. リクエスト直後に描画されるわけではない!
艦これウィジェットの実装方針 1
Chr...
入渠をどうするか
課題
1. クレーンがひっかかる
2. 描画タイミング
3. 入渠API→API(a)→API(b)→API(c) onComplete
4. PCによるFlashの描画を待つ
艦これウィジェットの実装方針 1
Chrome拡...
入渠をどうするか
課題
1. クレーンがひっかかる
2. 描画タイミング
3. 入渠API→API(a)→API(b)→API(c) onComplete
4. PCによるFlashの描画を待つ → setTimeout
艦これウィジェットの実...
入渠をどうするか
課題
1. クレーンがひっかかる
2. 描画タイミング
3. 入渠API→API(a)→API(b)→API(c) onComplete
4. PCによるFlashの描画を待つ → setTimeout
5. 何秒?
艦これウ...
入渠をどうするか
課題
1. クレーンがひっかかる
2. 描画タイミング
3. 入渠API→API(a)→API(b)→API(c) onComplete
4. PCによるFlashの描画を待つ → setTimeout
5. PCスペックに依...
入渠をどうするか
課題
1. クレーンがひっかかる
2. 描画タイミング
3. 入渠API→API(a)→API(b)→API(c) onComplete
4. PCによるFlashの描画を待つ → setTimeout
5. 失敗ログを集めて...
失敗事例ログを収集する
APIサーバつくった
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6
クライアント側
失敗したときに
画像な...
入渠をどうするか
課題
1. クレーンがひっかかる
2. 描画タイミング
3. 入渠API→API(a)→API(b)→API(c) onComplete
4. PCによるFlashの描画を待つ → setTimeout
5. 失敗ログを集めて...
入渠をどうするか
課題
1. クレーンがひっかかる
2. 描画タイミング
3. 入渠API→API(a)→API(b)→API(c) onComplete
4. PCによるFlashの描画を待つ → setTimeout
5. 失敗ログを集めて...
5.サービスデザイン
について
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6
サービスデザインについて
1. ゲームがゲーム内で提供するユーザ体験を改変
しない大前提
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ...
サービスデザインについて
1. ゲームがゲーム内で提供するユーザ体験を改変
しない大前提
2. 艦娘たくさん
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザイン...
サービスデザインについて
1. ゲームがゲーム内で提供するユーザ体験を改変
しない大前提
2. 艦娘たくさん
3. 艦娘かわいい
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 ...
サービスデザインについて
1. ゲームがゲーム内で提供するユーザ体験を改変
しない大前提
2. 艦娘たくさん
3. 艦娘かわいい
4. 艦娘ペロペロ
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマイ...
サービスデザインについて
1. ゲームがゲーム内で提供するユーザ体験を改変
しない大前提
2. 艦娘たくさん
3. 艦娘かわいい
4. 艦娘ペロペロ
5. 提督の艦娘愛をサポートするようなツール!
艦これウィジェットの実装方針 1
Chrome...
サービスデザインについて
● メニューの背景画像設定
● 通知アイコン設定
● 通知音声設定
● 通知時テキスト設定
● etc...
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える...
サービスデザインについて
1. ゲームがゲーム内で提供するユーザ体験を改変
しない大前提
2. 艦娘たくさん
3. 艦娘かわいい
4. 艦娘ペロペロ
5. 提督の艦娘愛をサポートするようなツール!
艦これウィジェットの実装方針 1
Chrome...
サービスデザインについて
ゲーム内でのアクティビティを自動化し
効率的にゲームを進めるツール
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
ま...
サービスデザインについて
ゲーム内でのアクティビティを自動化し
効率的にゲームを進めるツール
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
ま...
サービスデザインについて
ゲーム内でのアクティビティを自動化し
効率的にゲームを進めるツール
ゲーム外でのユーザアクティビティを充実し
もっと艦これと艦これを取り巻く環境が
たのしくなるツール
艦これウィジェットの実装方針 1
Chrome拡張...
事例
● メニューの背景画像設定
○ つくってるひといました!ありがとうございます
■ https://twitter.
com/magunamu77/status/385778873532567552
艦これウィジェットの実装方針 1
Chr...
サービスデザインについて
ゲーム内でのアクティビティを自動化し
効率的にゲームを進めるツール
ゲーム外でのユーザアクティビティを充実し
もっと艦これと艦これを取り巻く環境が
たのしくなるツール
艦これウィジェットの実装方針 1
Chrome拡張...
5.まとめ
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6
艦これウィジェットの実装は
● 艦これ運営さんに迷惑をかけぬよう設計するのが
大変でした
● 提督の健全な提督業と艦娘愛をサポートするよう
に心がけています
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3...
艦これウィジェットの実装は
● 艦これ運営さんに迷惑をかけぬよう設計するのが
大変でした
● 提督の健全な提督業と艦娘愛をサポートするよう
に心がけています
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3...
5.だいじなまとめ
艦これウィジェットの実装方針 1
Chrome拡張 2
ウィジェット化を支える技術 3
リマインダーを支える技術 4
サービスデザインについて 5
まとめ 6
「艦これ」たのしいので、
長くつづいてほしいと
ユーザとして切実思います
したがって、
運営さんからの要請が
あれば、もちろん開発
提供は止めますので、
ご了承下さい。
丁寧な運営をいつも
ありがとうございます。
長くつづいてほしいと
ユーザとして
切実思っています。
付録
● Chromeウェブストア
○ 「艦これウィジェット」
● Chrome拡張ソースコード
○ https://github.com/otiai10/kanColleWidget
● OCRサーバソースコード
○ https://gith...
Thanks to
and you all, 提督
加賀さんと僕(実装編)〜艦これウィジェットの課題と実装〜
加賀さんと僕(実装編)〜艦これウィジェットの課題と実装〜
加賀さんと僕(実装編)〜艦これウィジェットの課題と実装〜
加賀さんと僕(実装編)〜艦これウィジェットの課題と実装〜
加賀さんと僕(実装編)〜艦これウィジェットの課題と実装〜
加賀さんと僕(実装編)〜艦これウィジェットの課題と実装〜
加賀さんと僕(実装編)〜艦これウィジェットの課題と実装〜
加賀さんと僕(実装編)〜艦これウィジェットの課題と実装〜
Upcoming SlideShare
Loading in …5
×

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

236,919 views

Published on

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

艦これウィジェットのサービス概要はこちら
http://www.slideshare.net/otiai10/ss-26631311

Published in: Entertainment & Humor
  • Sex in your area is here: ❤❤❤ http://bit.ly/2Y8gKsI ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Follow the link, new dating source: ❶❶❶ http://bit.ly/2Y8gKsI ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 1. 加賀さんと僕 実装編 〜艦これウィジェットの課題と実装〜 @otiai10
  2. 2. !! 実装編です !! サービス概要については http://www.slideshare.net/otiai10/ss- 26631311 こちらをご覧ください
  3. 3. はじめに
  4. 4. Thanks to
  5. 5. and
  6. 6. 井口裕香
  7. 7. 目次 1. 艦これウィジェットの実装方針 2. Chrome拡張 a. なぜChrome拡張か b. Chrome拡張のできることできないこと 3. ウィジェット化を支える技術 4. リマインダーを支える技術 a. 遠征は簡単なんすよ b. 建造をどうするか c. 入渠をどうするか 5. サービスデザインについて 6. まとめ
  8. 8. 1.艦これウィジェット の実装方針 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  9. 9. 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6 運営さんが
  10. 10. 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6 運営さんが
  11. 11. 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6 運営さんが
  12. 12. ということで 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  13. 13. ということで 1. 艦これサーバに一切の負荷をかけないこと 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  14. 14. ということで 1. 艦これサーバに一切の負荷をかけないこと → ユーザのゲームプレー上で発生する正規のAPI リクエスト以外のタイミングで、こちらでapi_token を保持して新規のAPIリクエストを送るなどのこと は、しない 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  15. 15. ということで 1. 艦これサーバに一切の負荷をかけないこと 2. 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  16. 16. ということで 1. 艦これサーバに一切の負荷をかけないこと 2. ゲーム内でのユーザ体験を改変しないこと 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  17. 17. ということで 1. 艦これサーバに一切の負荷をかけないこと 2. ゲーム内でのユーザ体験を改変しないこと → 艦これというゲームがゲーム内で提供する面白 さ楽しさ困難さ(←ここ重要)を破壊するような自動 化などは、しない 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  18. 18. 1. 艦これサーバに一切の負荷をかけないこと 2. ゲーム内でのユーザ体験を改変しないこと 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6 ということで
  19. 19. 実装方針 1. 艦これサーバに一切の負荷をかけないこと 2. ゲーム内でのユーザ体験を改変しないこと 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  20. 20. 2.Chrome拡張 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  21. 21. なぜChrome拡張か (1) 1. 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  22. 22. なぜChrome拡張か (1) 1. 多くの人が手軽にインストールできるから 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  23. 23. なぜChrome拡張か (1) 1. 多くの人が手軽にインストールできるから Usage share of web browsers (Source StatCounter) 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  24. 24. 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6 なぜChrome拡張か (1) 1. 多くの人が手軽にインストールできるから
  25. 25. なぜChrome拡張か (2) 1. 多くの人が手軽にインストールできるから 2. 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  26. 26. なぜChrome拡張か (2) 1. 多くの人が手軽にインストールできるから 2. 推奨環境であるから 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  27. 27. なぜChrome拡張か (2) 1. 多くの人が手軽にインストールできるから 2. 推奨環境であるから http://www. kadokawagames.co. jp/KanColle/ 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  28. 28. なぜChrome拡張か 1. 多くの人が手軽にインストールできるから 2. 推奨環境であるから 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  29. 29. 嘘です
  30. 30. なぜChrome拡張か (3) 1. 多くの人が手軽にインストールできるから 2. 推奨環境であるから 3. JavaScriptしか書けないから JavaScript 2years PHP 1.5year Python 0.5year Go 1month 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  31. 31. なぜChrome拡張か (3) 1. 多くの人が手軽にインストールできるから 2. 推奨環境であるから 3. JavaScriptしか書けないから 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6 .NET ObjectiveC 無理! 無理!
  32. 32. なぜChrome拡張か (3) 1. 多くの人が手軽にインストールできるから 2. 推奨環境であるから 3. JavaScriptしか書けないから 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6 専ブラ 作んの無理! 無理! 無理!
  33. 33. 1. 多くの人が手軽にインストールできるから 2. 推奨環境であるから 3. JavaScriptしか書けないから 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6 なぜChrome拡張か
  34. 34. Chrome拡張のできることできないこと 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  35. 35. Chrome拡張のできることできないこと 1. ひととおりブラウザJavaScriptは動く 2. ブラウザのカスタマイズ 3. ブラウザのHTTPリクエストを検知できる 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  36. 36. Chrome拡張のできることできないこと 1. ひととおりブラウザJavaScriptは動く 2. ブラウザのカスタマイズ 3. ブラウザのHTTPリクエストを検知できる a. 検知できる 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  37. 37. Chrome拡張のできることできないこと 1. ひととおりブラウザJavaScriptは動く 2. ブラウザのカスタマイズ 3. ブラウザのHTTPリクエストを検知できる a. タイミングでイベントをバインドできる 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  38. 38. Chrome拡張のできることできないこと 1. ひととおりブラウザJavaScriptは動く 2. ブラウザのカスタマイズ 3. ブラウザのHTTPリクエストを検知できる a. タイミングでイベントをバインドできる b. request_bodyは取得できる 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  39. 39. Chrome拡張のできることできないこと 1. ひととおりブラウザJavaScriptは動く 2. ブラウザのカスタマイズ 3. ブラウザのHTTPリクエストを検知できる a. タイミングでイベントをバインドできる b. 何をやろうとしたかでディスパッチできる 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  40. 40. Chrome拡張のできることできないこと 1. ひととおりブラウザJavaScriptは動く 2. ブラウザのカスタマイズ 3. ブラウザのHTTPリクエストを検知できる a. タイミングでイベントをバインドできる b. 何をやろうとしたかでディスパッチできる c. しかし 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  41. 41. Chrome拡張のできることできないこと 1. ひととおりブラウザJavaScriptは動く 2. ブラウザのカスタマイズ 3. ブラウザのHTTPリクエストを検知できる a. タイミングでイベントをバインドできる b. 何をやろうとしたかでディスパッチできる c. responseの中身が見れない!←ここ重要 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  42. 42. Chrome拡張のできることできないこと 1. ひととおりブラウザJavaScriptは動く 2. ブラウザのカスタマイズ 3. ブラウザのHTTPリクエストを検知できる a. タイミングでイベントをバインドできる b. 何をやろうとしたかでディスパッチできる c. 結果どうなったかは見れないし編集できない 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  43. 43. Chrome拡張のできることできないこと 1. ひととおりブラウザJavaScriptは動く 2. ブラウザのカスタマイズ 3. ブラウザのHTTPリクエストを検知できる a. タイミングでイベントをバインドできる b. 何をやろうとしたかでディスパッチできる c. 結果どうなったかは見れないし編集できない 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  44. 44. 3.ウィジェット化(ry 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  45. 45. シンプルです 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  46. 46. ゲーム領域を別窓で開いているだけです 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  47. 47. 以上 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  48. 48. 4.リマインダー(ry 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  49. 49. 遠征は簡単なんすよ 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  50. 50. 遠征は簡単なんすよ 1. HTTPリクエストをフックできる(chrome. webRequest.onBeforeRequest) 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  51. 51. 遠征は簡単なんすよ 1. HTTPリクエストをフックできる 2. request bodyは見れる 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  52. 52. 遠征は簡単なんすよ 1. HTTPリクエストをフックできる 2. request bodyは見れる 3. 遠征id何番? 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  53. 53. 遠征は簡単なんすよ 1. HTTPリクエストをフックできる 2. request bodyは見れる 3. 遠征id何番? 4. 遠征id → 遠征所要時間(固定じゃん) 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  54. 54. 遠征は簡単なんすよ 1. HTTPリクエストをフックできる 2. request bodyは見れる 3. 遠征id何番? 4. 遠征id → 遠征所要時間(固定じゃん) 5. localStorageに終了時刻を保存 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  55. 55. 遠征は簡単なんすよ 1. HTTPリクエストをフックできる 2. request bodyは見れる 3. 遠征id何番? 4. 遠征id → 遠征所要時間(固定じゃん) 5. localStorageに終了時刻を保存 6. backgroundで終わってないか随時チェック 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  56. 56. 遠征は簡単なんすよ 1. HTTPリクエストをフックできる 2. request bodyは見れる 3. 遠征id何番? 4. 遠征id → 遠征所要時間(固定じゃん) 5. localStorageに終了時刻を保存 6. backgroundで終わってないか随時チェック 7. 終わってたらwebkitNotification.create.show 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  57. 57. 遠征は簡単なんすよ 1. HTTPリクエストをフックできる 2. request bodyは見れる 3. 遠征id何番? 4. 遠征id → 遠征所要時間(固定じゃん) 5. localStorageに終了時刻を保存 6. backgroundで終わってないか随時チェック 7. 終わってたらwebkitNotification.create.show 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  58. 58. 建造をどうするか 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  59. 59. 建造をどうするか 課題 1. 建造・入渠所要時間は固定ではない 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  60. 60. 建造をどうするか 課題 1. 建造・入渠所要時間は固定ではない 2. chromeではレスポンスの中身が見れない 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  61. 61. 建造をどうするか 課題 1. 建造・入渠所要時間は固定ではない 2. chromeではレスポンスの中身が見れない 3. ではどうするか 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  62. 62. 建造をどうするか 課題 1. 建造・入渠所要時間は固定ではない 2. chromeではレスポンスの中身が見れない 3. ユーザ手動登録 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  63. 63. 建造をどうするか 課題 1. 建造・入渠所要時間は固定ではない 2. chromeではレスポンスの中身が見れない 3. ユーザ手動登録 4. どうせなら自動でリマインダ登録したい 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  64. 64. 建造をどうするか 課題 1. 建造・入渠所要時間は固定ではない 2. chromeではレスポンスの中身が見れない 3. ユーザ手動登録 4. どうせなら自動でリマインダ登録したい 5. 描画されたものを画像処理して取得しよう 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  65. 65. _人人人人人人人人人_ > 突然の画像処理 <  ̄Y^Y^Y^Y^Y^Y^Y^Y ̄
  66. 66. 建造をどうするか 課題 1. 建造・入渠所要時間は固定ではない 2. chromeではレスポンスの中身が見れない 3. ユーザ手動登録 4. どうせなら自動でリマインダ登録したい 5. 描画されたものを画像処理して取得しよう 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  67. 67. 画像断片をOCR処理する APIサーバつくった 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6 Tesseract-OCR クライアント側 画面キャプチャから画 像断片を生成して POST 画像を解析してOCR(文字情報抽出)処理して 文字情報(この場合 “00:59:14”)を返す サーバ側
  68. 68. 建造をどうするか 課題 1. 建造・入渠所要時間は固定ではない 2. chromeではレスポンスの中身が見れない 3. ユーザ手動登録 4. どうせなら自動でリマインダ登録したい 5. 描画されたものを画像処理して取得しよう 6. サーバ負荷が気になる 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  69. 69. 建造をどうするか 課題 1. 建造・入渠所要時間は固定ではない 2. chromeではレスポンスの中身が見れない 3. ユーザ手動登録 4. どうせなら自動でリマインダ登録したい 5. 描画されたものを画像処理して取得しよう 6. スケーラビリティ! 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  70. 70. 建造をどうするか 課題 1. 建造・入渠所要時間は固定ではない 2. chromeではレスポンスの中身が見れない 3. ユーザ手動登録 4. どうせなら自動でリマインダ登録したい 5. 描画されたものを画像処理して取得しよう 6. スケーラビリティといえば 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  71. 71. 建造をどうするか 課題 1. 建造・入渠所要時間は固定ではない 2. chromeではレスポンスの中身が見れない 3. ユーザ手動登録 4. どうせなら自動でリマインダ登録したい 5. 描画されたものを画像処理して取得しよう 6. スケーラビリティ! 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  72. 72. しかし PyCon APAC にて... 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6 っていう話をとなりの外人としてたら
  73. 73. しかし PyCon APAC にて... 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6 「それ、Google Compute Engine でできるよ」
  74. 74. PyCon APAC にて... 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6 GCEの中のひとでした... https://twitter.com/briandorsey
  75. 75. 建造をどうするか 課題 1. 建造・入渠所要時間は固定ではない 2. chromeではレスポンスの中身が見れない 3. ユーザ手動登録 4. どうせなら自動でリマインダ登録したい 5. 描画されたものを画像処理して取得しよう 6. スケーラビリティ!! with 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  76. 76. 建造をどうするか 課題 1. 建造・入渠所要時間は固定ではない 2. chromeではレスポンスの中身が見れない 3. ユーザ手動登録 4. どうせなら自動でリマインダ登録したい 5. 描画されたものを画像処理して取得しよう 6. 一番安いインスタンスだと 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  77. 77. 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6 メンションが来る
  78. 78. 建造をどうするか 課題 1. 建造・入渠所要時間は固定ではない 2. chromeではレスポンスの中身が見れない 3. ユーザ手動登録 4. どうせなら自動でリマインダ登録したい 5. 描画されたものを画像処理して取得しよう 6. 拡張性 << 可用性ですよプロデューサーさん! 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  79. 79. 建造をどうするか 課題 1. 建造・入渠所要時間は固定ではない 2. chromeではレスポンスの中身が見れない 3. ユーザ手動登録 4. どうせなら自動でリマインダ登録したい 5. 描画されたものを画像処理して取得しよう 6. 自前のVPSにしました(´・ω・`) 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  80. 80. 建造をどうするか 課題 1. 建造・入渠所要時間は固定ではない 2. chromeではレスポンスの中身が見れない 3. ユーザ手動登録 4. どうせなら自動でリマインダ登録したい 5. 描画されたものを画像処理して取得しよう 6. 自前のVPSにしました 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  81. 81. 入渠をどうするか 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  82. 82. 入渠をどうするか いや、入渠も同じやろ? 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  83. 83. これでいけるやろ Tesseract-OCR 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  84. 84. これで Tesseract-OCR 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  85. 85. こうして Tesseract-OCR 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  86. 86. !?
  87. 87. !!
  88. 88. _人人人人人人人人人_ > 突然のクレーン <  ̄Y^Y^Y^Y^Y^Y^Y^Y ̄
  89. 89. 入渠をどうするか 課題 1. クレーンがひっかかる 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  90. 90. 入渠をどうするか 課題 1. クレーンがひっかかる 2. 描画直後にキャプチャ撮ればいいのでは? 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  91. 91. 入渠をどうするか 課題 1. クレーンがひっかかる 2. 描画タイミングは「入渠」リクエスト時ではない! 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  92. 92. 入渠をどうするか 課題 1. クレーンがひっかかる 2. 描画タイミング 3. 「入渠」APIがリクエストされて、その後いくつか の汎用的なAPIが叩かれた後に描画される仕 様になっているようだ 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  93. 93. 入渠をどうするか 課題 1. クレーンがひっかかる 2. 描画タイミング 3. 入渠API→API(a)→API(b)→API(c) という連続 になり、API(c)のリクエストがCompleteされた 時点が描画タイミングとする 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  94. 94. 入渠をどうするか 課題 1. クレーンがひっかかる 2. 描画タイミング 3. 入渠API→API(a)→API(b)→API(c) onComplete 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  95. 95. 入渠をどうするか 課題 1. クレーンがひっかかる 2. 描画タイミング 3. 入渠API→API(a)→API(b)→API(c) onComplete 4. リクエスト直後に描画されるわけではない! 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  96. 96. 入渠をどうするか 課題 1. クレーンがひっかかる 2. 描画タイミング 3. 入渠API→API(a)→API(b)→API(c) onComplete 4. PCによるFlashの描画を待つ 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  97. 97. 入渠をどうするか 課題 1. クレーンがひっかかる 2. 描画タイミング 3. 入渠API→API(a)→API(b)→API(c) onComplete 4. PCによるFlashの描画を待つ → setTimeout 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  98. 98. 入渠をどうするか 課題 1. クレーンがひっかかる 2. 描画タイミング 3. 入渠API→API(a)→API(b)→API(c) onComplete 4. PCによるFlashの描画を待つ → setTimeout 5. 何秒? 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  99. 99. 入渠をどうするか 課題 1. クレーンがひっかかる 2. 描画タイミング 3. 入渠API→API(a)→API(b)→API(c) onComplete 4. PCによるFlashの描画を待つ → setTimeout 5. PCスペックに依存するじゃないか!! 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  100. 100. 入渠をどうするか 課題 1. クレーンがひっかかる 2. 描画タイミング 3. 入渠API→API(a)→API(b)→API(c) onComplete 4. PCによるFlashの描画を待つ → setTimeout 5. 失敗ログを集めて調整するしか...(´・ω・`) 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  101. 101. 失敗事例ログを収集する APIサーバつくった 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6 クライアント側 失敗したときに 画像など失敗内容を POST サーバ側 ブラウザからいつでも 閲覧、削除可能
  102. 102. 入渠をどうするか 課題 1. クレーンがひっかかる 2. 描画タイミング 3. 入渠API→API(a)→API(b)→API(c) onComplete 4. PCによるFlashの描画を待つ → setTimeout 5. 失敗ログを集めて描画タイミング調整 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  103. 103. 入渠をどうするか 課題 1. クレーンがひっかかる 2. 描画タイミング 3. 入渠API→API(a)→API(b)→API(c) onComplete 4. PCによるFlashの描画を待つ → setTimeout 5. 失敗ログを集めて描画タイミング調整 6. 現在、クライアント側画像処理を実装中 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  104. 104. 5.サービスデザイン について 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  105. 105. サービスデザインについて 1. ゲームがゲーム内で提供するユーザ体験を改変 しない大前提 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  106. 106. サービスデザインについて 1. ゲームがゲーム内で提供するユーザ体験を改変 しない大前提 2. 艦娘たくさん 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  107. 107. サービスデザインについて 1. ゲームがゲーム内で提供するユーザ体験を改変 しない大前提 2. 艦娘たくさん 3. 艦娘かわいい 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  108. 108. サービスデザインについて 1. ゲームがゲーム内で提供するユーザ体験を改変 しない大前提 2. 艦娘たくさん 3. 艦娘かわいい 4. 艦娘ペロペロ 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  109. 109. サービスデザインについて 1. ゲームがゲーム内で提供するユーザ体験を改変 しない大前提 2. 艦娘たくさん 3. 艦娘かわいい 4. 艦娘ペロペロ 5. 提督の艦娘愛をサポートするようなツール! 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  110. 110. サービスデザインについて ● メニューの背景画像設定 ● 通知アイコン設定 ● 通知音声設定 ● 通知時テキスト設定 ● etc... 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  111. 111. サービスデザインについて 1. ゲームがゲーム内で提供するユーザ体験を改変 しない大前提 2. 艦娘たくさん 3. 艦娘かわいい 4. 艦娘ペロペロ 5. 提督の艦娘愛をサポートするようなツール! 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  112. 112. サービスデザインについて ゲーム内でのアクティビティを自動化し 効率的にゲームを進めるツール 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  113. 113. サービスデザインについて ゲーム内でのアクティビティを自動化し 効率的にゲームを進めるツール 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  114. 114. サービスデザインについて ゲーム内でのアクティビティを自動化し 効率的にゲームを進めるツール ゲーム外でのユーザアクティビティを充実し もっと艦これと艦これを取り巻く環境が たのしくなるツール 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  115. 115. 事例 ● メニューの背景画像設定 ○ つくってるひといました!ありがとうございます ■ https://twitter. com/magunamu77/status/385778873532567552 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  116. 116. サービスデザインについて ゲーム内でのアクティビティを自動化し 効率的にゲームを進めるツール ゲーム外でのユーザアクティビティを充実し もっと艦これと艦これを取り巻く環境が たのしくなるツール 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  117. 117. 5.まとめ 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  118. 118. 艦これウィジェットの実装は ● 艦これ運営さんに迷惑をかけぬよう設計するのが 大変でした ● 提督の健全な提督業と艦娘愛をサポートするよう に心がけています 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  119. 119. 艦これウィジェットの実装は ● 艦これ運営さんに迷惑をかけぬよう設計するのが 大変でした ● 提督の健全な提督業と艦娘愛をサポートするよう に心がけています 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6 (もちろんそうなんだけど) だいじなのは そこではなく
  120. 120. 5.だいじなまとめ 艦これウィジェットの実装方針 1 Chrome拡張 2 ウィジェット化を支える技術 3 リマインダーを支える技術 4 サービスデザインについて 5 まとめ 6
  121. 121. 「艦これ」たのしいので、 長くつづいてほしいと ユーザとして切実思います
  122. 122. したがって、 運営さんからの要請が あれば、もちろん開発 提供は止めますので、 ご了承下さい。
  123. 123. 丁寧な運営をいつも ありがとうございます。 長くつづいてほしいと ユーザとして 切実思っています。
  124. 124. 付録 ● Chromeウェブストア ○ 「艦これウィジェット」 ● Chrome拡張ソースコード ○ https://github.com/otiai10/kanColleWidget ● OCRサーバソースコード ○ https://github.com/otiai10/ocrServer ● Logサーバソースコード ○ https://github.com/otiai10/logServer
  125. 125. Thanks to
  126. 126. and you all, 提督

×