2/12(Fri) 登壇者女子限定 Milkcocoa Girls ! Milkcocoa Meetup vol 6

1. MilkCocoaを使って
スタイリッシュなプレゼンをする
！
メディアリンク株式会社
日高 玲菜

2. まず、自己紹介をば・・・

3. 日高 玲菜（@Cybermergina）
所属：メディアリンク株式会社
クラウドサービス事業部 クラウドサービス開発部
業務：SE兼プログラマー
SNS：Qiita, Tumblr, GitHub, Twitter
よく戯れてるもの：
PHP / JavaScript / Node.js / socket.io / HTML5 / CSS3
Gulp / AngularJS / MySQL
最近触ってるもの(かじり始め)：
Crystal / Kotolin / Unity / Go

4. 早速ですが。。。

5. 作ろうとしたもの

6. スライドショー操作アプリ
• スライドショー
impress.js … スライドショー作成用のプラグイン
• スマートフォンアプリ
Cordova … ハイブリットアプリがHTML/JS/CSSで
構築できるフレームワーク
だが、取り掛かった時には時間がなかった・・・

7. ので！今回は妥協して・・・

8. 廉価版：スライドショー操作アプリ
• スライドショー
impress.js … スライドショー作成用のプラグイン
• 操作用サイト
MilkCocoaを読み込んだだけの簡易的なHTML
これなら間に合いそう・・・！
というわけで作ってみました〜

9. 仕組み
MilkCocoa
スライドショー
（impress.js製）
操作用サイト
次ページ、前ページの
ボタンがあるだけの作り
どちらのボタンが
押されたかを
リアルタイムで送
信
押されたボタンによ
って
impressの関数を
呼び分けるだけ！

10. コードはたったの１６行！
実際に見てみましょう

11. 実際のコード
<script type="text/javascript">
impress().init(); // impress.js初期化
var milkcocoa = new MilkCocoa('ｘｘｘｘｘ.mlkcca.com');
var send = milkcocoa.dataStore(cnst.dataStoreName);
// milkcocoa経由でデータが渡された場合
send.on('send', function(data){
if ( cnst.vector.prev === data.value.code ) {
impress().prev(); // 前に移動(impress.jsの関数)
}
else {
impress().next(); // 次に移動(impress.jsの関数)
}
});
</script>
<script type="text/javascript">
var milkcocoa = new MilkCocoa('ｘｘｘｘｘ.mlkcca.com');
var ds = milkcocoa.dataStore(cnst.dataStoreName); // データストア
// どちらのボタンが押されたか
var toMove = function(code){
ds.send({'code': code});
};
</script>
・・・
<div class="btn" onclick="toMove(cnst.vector.prev)">前のスライド</div>
<div class="btn" onclick="toMove(cnst.vector.next)">次のスライド</div>
プレゼンテーション側
操作画面側
※別途定数用オブジェクトにて以下のような定義もされてま
す。
var cnst = {
vector: { prev: 1, next: 2 },
dataStoreName: "mlkcca"
};

12. まとめ

13. まとめ
• よかった
MilkCocoaの使い方がシンプルで、扱いやすい
• 足りなかった
自身の技術力（Cordova,ネイティブアプリ諦めた）
自身の危機管理能力（取り組みが遅くて色々と不足だらけ）
自身のセンス（プレゼン自体がスタイリッシュじゃない問題）