2016年1月22日に開催された CreateJS 勉強会 ( 第7回 ) にて発表した資料です。 SPA (Single Page Application)において、 API 経由で大量の画像や音声といったメディアファイルを動的かつスムーズに読み込み管理するための仕組みとして、PreloadJS を使うのは非常に良い選択です。 SPAがネイティブアプリに劣らないユーザー体験を提供するためにPreloadJSをどのように活用するのが良いのか、その仕組みを事例を元にご紹介します。

1. Single Page Application における
PreloadJS の活用事例
山田 直樹
株式会社リクルートマーケティングパートナーズ
2016.01.22
- Case study of PreloadJS -
CreateJS 勉強会 (第7回)

2. 自己紹介
俺の名前を言ってみろ

3. 自己紹介
山田 直樹
@wakamsha
2014年7月 入社 ( 3 社目 )
リクルートに来る前は UI デザイナー & フロントエンドエンジニアとして
業務系アプリケーションの UI 設計から開発までをやっていた
株式会社リクルートマーケティングパートナーズ
フロントエンドエンジニア

4. http://tech.recruit-mp.co.jp
NET BIZ DIV. TECH BLOG

6. リクルートマーケティングパートナーズの
エンジニア、デザイナー、スクラムマスターたちが
発信する Web 開発情報メディア
http://tech.recruit-mp.co.jp
NET BIZ DIV. TECH BLOG

7. https://eigosapuri.jp
英語サプリ

8. https://eigosapuri.jp
英語サプリ
• 『聴く力』『話す力』の向上に特化した学習サービス
• ドラマ仕立てのストーリーに登場するキャラになりきって会話の
練習
• 音声認識機能により発音の解析・フィードバックをリアルタイムに
表示
• 聞き取れなかった発音とその原因を自動検知し、一人ひとりの原因
に合ったトレーニングを提供

9. https://eigosapuri.jp
英語サプリ
• TypeScript AngularJS CreateJS をベースとした完全 SPA
• 音声・画像ファイル ( メディアファイル ) の読み込みに
PreloadJS ( v0.6.1 ) を使用
• ※ 2016年１月時点の最新版は v0.6.2
• ※ 古いバージョンを使っている理由は後述
• 音声ファイルの再生制御に SoundJS を使用

10. Agenda
1. 英語サプリについて
2. PreloadJS について おさらい
3. 英語サプリにおける PreloadJS の活用方法

11. 2.
1. 英語サプリについて
2. PreloadJS について おさらい
3. 英語サプリにおける PreloadJS の活用方法

13. PreloadJS
画像、音声、JSON といった外部リソースの
非同期読み込みをお世話する
{}

14. PreloadJS
manifest という読み込みたいリソース情報を記述した
配列型のオブジェクトを利用することで、複数リソー
スを一括で読み込むことが出来る
var manifest = [
{id: 'image_1', src: 'http://example.com/img/iamge_1.png'},
{id: 'image_2', src: 'http://example.com/img/iamge_2.png'},
{id: 'sound_1', src: 'http://example.com/img/sound_1.m4a'}
];

15. PreloadJS
読み込まれた外部リソースは
タイプに応じてメモリ上にキャッシュされる
<img src="blob:http%3A//localhost/704003ea-a834-4d6d-baff-212450738852">
画像 ( img タグ )
AudioBuffer: {
duration: 55.01733333333333
length: 2640832
numberOfChannels: 2
sampleRate: 48000
}
音声 ( AudioBuffer )
ファイルの実態がメモリ上にキャッシュされるため、
一切の遅延なく表示・再生が可能
一度キャッシュされたファイルは、ページをリロードしない限り
保持され続ける

16. 3.
1. 英語サプリについて
2. PreloadJS について おさらい
3. 英語サプリにおける PreloadJS の活用方法

17. ページ (セクション) 毎に
manifest を生成して
loadManifest() を呼び出す

18. 1. ページを表示するのに必要な情報 ( JSON 形式 ) を API から取得し、
モデルクラスにパースする ( => ValueObject )
2. モデルから読み込みたいメディアファイルの URL を抽出して manifest
を生成する
3. 読み込み処理が完了したらキャッシュオブジェクトをモデルに追加し、
以降は任意のタイミングで参照・表示する
ページ (セクション) 毎に manifest を生成して loadManifrst() を呼び出す

19. {
"listening": {
"bgmSoundUrl": “http://example.com/bgm.m4a”,
"phrases": [
{
"id": 1,
"bgImageUrl": “http://example.com/bg_1.png",
"character" : {
"id": 1,
"name": "bobby",
"imageUrl": "http://example.com/bobby.png",
},
"normalVoiceSoundUrl": “http://example.com/voice_normal_l.m4a",
"fastVoiceSoundUrl" : “http://example.com/voice_fast_1.m4a",
"slowVoiceSoundUrl" : “http://example.com/voice_slow_1.m4a",
},
… 中略 …
]
}
}
var valueObject = new models.valueobjects.responses.Listening(jsonData);

20. var valueObject = new models.valueobjects.responses.Listening(jsonData);
var manifest = [
{id: ‘bgm.m4a', src: 'http://example.com/bgm.m4a'},
{id: 'bg_1.png', src: ‘http://example.com/bg_1.png'},
{id: 'bobby.png', src: 'http://example.com/bobby.png'},
{id: 'voice_normal_l.m4a', src: 'http://example.com/voice_normal_1.m4a'},
{id: 'voice_fast_1.m4a', src: 'http://example.com/voice_fast_1.m4a'},
{id: 'voice_slow_1.m4a', src: ‘http://example.com/voice_slow_1.m4a'},
// … 中略 …
];
モデルから manifest を生成

21. valueObject: {
cached: {
'bgm.m4a' : AudioBuffer,
'bg_1.png' : 'blob:http%3A//localhost/0beacb23-d698-4dda-9f59-61cfd2ed3b86',
'voice_norma_l.m4a': AudioBuffer,
'voice_slow_1.m4a' : AudioBuffer'
}
}
var queue = new createjs.LoadQueue(true);
queue.on('complete', () => {
valueObject.cached['bgm.m4a'] = queue.getResult('bgm.m4a');
valueObject.cached['bg_1.png'] = queue.getResult(‘bg_1.png').src;
});
queue.loadManifest(manifest);
画像は src 値から Blob オブジェクトのパスを取り出すと扱いやすくなる (※

22. valueObject: {
cached: {
'bgm.m4a' : AudioBuffer,
'bg_1.png' : 'blob:http%3A//localhost/0beacb23-d698-4dda-9f59-61cfd2ed3b86',
'voice_norma_l.m4a': AudioBuffer,
'voice_slow_1.m4a' : AudioBuffer'
}
}
var queue = new createjs.LoadQueue(true);
queue.on('complete', () => {
valueObject.cached['bgm.m4a'] = queue.getResult('bgm.m4a');
valueObject.cached['bg_1.png'] = queue.getResult(‘bg_1.png').src;
});
queue.loadManifest(manifest);
画像は src 値から Blob オブジェクトのパスを取り出すと扱いやすくなる
• v0.6.2 だとBlob オブジェクトパスを参照しても画像が読み込めな
かった …
• Complete イベントは発火しているので、リソースの読み込み自体
は成功していると想定
• 他の実装箇所に何らかの問題があるのか、現時点では不明
Blob オブジェクトの仕様を理解する
必要があるのでは… ( ごくり
悲報

23. 既にキャッシュ済みの
メディアファイルは読み込まない

24. • SPA なのでページのリフレッシュが発生しないため、読み込み済みの
データはメモリ上にキャッシュされ続ける
• 既に訪問済みのページに遷移した場合は再読み込みする必要がなく、
キャッシュ済みのデータを参照すればよい
• 異なるページであっても、そこで必要なメディアファイルのうち既に
キャッシュ済みのものがあれば、それを使い回せばよい
既にキャッシュ済みのメディアファイルは読み込まない

25. {
"id": 123,
"bgmSoundUrl": “http://example.com/bgm.m4a",
"characters": [
{
"id": 1,
"name": "Bobby",
"imageUrl": "http://example.com/bobby.png",
}
],
"phrases": [
{
"id": 1,
"bgImageUrl": “http://example.com/bg_1.png",
"character": {
"id": 1,
"name": "Bobby",
"imageUrl": "http://example.com/bobby.png",
},
"normalVoiceSoundUrl": "http://example.com/voice_normal.m4a",
“fastVoiceSoundUrl" : "http://example.com/voice_fast.m4a",
“slowVoiceSoundUrl" : "http://example.com/voice_slow.m4a",
}
],
"commentary": "よく出来ましたね！この調子で頑張りましょう。",
"teacherImageUrl": "http://images/teacher.png"
}

26. var manifest = [
{id: 'm4a.m4a', src: 'http://example.com/fuga.m4a'},
{id: 'bobby.png', src: 'http://example.com/bobby.png'},
{id: 'bg_1.png', src: 'http://example.com/bg_1.png'},
{id: 'bobby.png', src: 'http://example.com/bobby.png'},
{id: 'voice_normal_l.m4a', src: 'http://example.com/voice_normal_1.m4a'},
{id: 'voice_fast_1.m4a', src: 'http://example.com/voice_fast_1.m4a'},
{id: 'voice_slow_1.m4a', src: 'http://example.com/voice_slow_1.m4a'},
];
このままだとメディアファイルを重複して読み込んでしまう
重複した 項目は削除するのと同時に
既に読み込み済みの項目も削除する

27. private removeStoredAssets(urls) => {
// … ゴニョゴニョ …
return result;
}
var urls = [
'http://example.com/bgm.m4a',
'http://example.com/bobby.png',
'http://example.com/bg_1.png',
'http://example.com/bobby.png'
];
[
'http://example.com/bgm.m4a',
'http://example.com/bobby.png',
'http://example.com/bg_1.png',
'http://example.com/voice_norma_l.m4a'
];

28. セキュリティの為、
manifest の headers に
JWT トークンパラメータを含める

29. • メディアファイルは AWS S3 に配置しているため、そのままでは URL
直打ちでアクセスされて盗まれるリスクがある
• ログインユーザー毎に JWT トークンを発行し、全てのメディアファイ
ルはこのトークンで認証することで読み込み可能とする
• manifest の headers プロパティに JWT トークンを含め、src 値にも
query string として JWT トークンを含める
manifest の headers に JWT トークンパラメータを含める
画像か音声かを正確に判断するために
type プロパティも指定する必要があります

30. var manifest = [];
var fixedUrl = urls[i];
var isCrossdomain = fixedUrl.indexOf('http') == 0;
var type = 'image';
if (~fixedUrl.indexOf('.m4a')) {
type = 'sound';
fixedUrl = fixedUrl.replace('static_resources', 'static_resources.m4a')
}
if (this.Config.IS_IE && isCrossdomain) {
fixedUrl += this.getJWTTokenParameter();
}
var info = {
id: urls[i],
src: fixedUrl,
type: type,
headers: null
};
if (isCrossdomain) {
info.headers = {
'Authorization': this.SessionService.getJWTToken(),
'Content-Type': 'application/x-www-form-urlencoded'
};
}
manifest.push(new createjs.LoadItem().set(info));

31. まとめ
ページ (セクション) 毎に manifest を生成して
loadManifest() を呼び出し、メディアファイルを読
み込む
既にキャッシュ済みのメディアファイルは再読込み
せずに、既存のものを使い回すことでリソースを
節約する
manifest の header プロパティに JWT トークンパ
ラメータを含めて読み込むことで、セキュリティを
担保する

32. Q & A
Any Questions ?

33. Thank you :)