Milkcocoaのチュートリアルを実装【入門者向け】

はじめに

Milkcocoaのチュートリアルを見て詰まっている入門者向けの記事です。
チュートリアルの補足をしていきたいと思います。

実行環境

OS X 10.12.4
Milkcocoa v0.6.0

事前準備

5 minutes Tutorialの「1. Milkcocoaを使う準備をする」まで終了しておいてください。

チュートリアル実装

1. 「2. スマートフォン側のコードを書く」の index.html と main-sp.js を同じディレクトリ（便宜上SPと名付けます）に置いて下さい。
2. 「3. PC側のコードを書く」の index.html と main-pc.js を同じディレクリ（便宜上PCと名付けます）に置いて下さい。
3. SPディレクトリ、PCディレクトリをそれぞれ異なったポート番号でローカルサーバにあげて下さい。ローカルサーバの構築方法について分からない方はこちらを参考にして下さい。
4. スマホでSPディレクトリがあるサーバに、MacでPCディレクトリがあるサーバにアクセスすれば動作確認ができると思います。スマホからアクセスする方法がわからない方はこちらを参考にして下さい。

補足

PC側のサイトでスマートフォンの表示が見切れてしまうって方は

index.html

~省略~

<div style="text-align:center">
  <img id="image" src="https://s3-ap-northeast-1.amazonaws.com/new-tutorial/smartphone.min.svg" alt="スマートフォン">
</div>

~省略~

と <div style="text-align:center"> ~ </div> を追加すると見やすくなります。

おわりに

Milkcocoaでリアルタイム通信やってみたかったぜ…。でもチュートリアルすら(´・ω・`)
って方の参考になってれば嬉しいですm(_ _)m
私も最初は「で？このファイルどうしたらいいの？」って感じだったので…（・・；）