Mirror Sample App

インタラクション2018で発表した 「(3A09★) タッチパネルを拡張する紙製インタフェースを搭載したインタラクティブパッケージの開発」 の鏡台アプリのソースです． サーバを起動することで，Webアプリが使用可能になります．

動作している動画は こちら

準備

• PC1台（サーバ）

  • Node.js の v8 以上を入れておく
  • Yarn の 最新版

• スマートフォン1台（クライアント）

  • 最新版のGoogle Chromeを入れておく
  • Galaxy S6 edgeを推奨（その他の機種でのレイアウトは未考慮）

※ テスト環境

• Windows 10 (64bit)
  • Node.js (v8.8.0)
  • Yarn (v1.0.2)
• Galaxy S6 edge

使う

1. PCとスマートフォンを同じWi-Fiに接続

   • 注意点：つないでいるWi-Fiスポットのネットワークプロファイルがプライベートに設定されていることを確認して下さい。
   • パブリックに設定されている場合、PC上で起動しているサーバにスマートフォンからアクセスできない可能性があります。

2. PCでの作業

   • 基本的にコマンドプロンプト もしくは ターミナルから，コマンドを実行します．プロジェクトのルートに移動して作業します
     1. ソースを解凍する
     2. PCの ローカルIPアドレス を調べておく
     3. コマンドプロンプトやターミナルで、このREADME.mdがある階層まで移動します
        • cd (Change Directory)コマンドを使用します
        • 階層がC:/Users/Asahi/Desktop/mirrorSampleAppであった場合
        • cd C:/Users/Asahi/Desktopを実行
        • 画面に左に表示されている階層がC:/Users/Asahi/Desktopになっていることを確認します
        • 以後、この階層でコマンドを実行します
     4. 動作に必要なライブラリのインストール
        • yarn
     5. サーバを起動
        • yarn start
          • 3000番のポートでサーバが起動する
          • videosフォルダがルートにない場合、自動的にvideosフォルダが作られます
            • このフォルダがないと動画のアップロードや閲覧が行えず、サーバでエラーが出ます

3. スマートフォンでの作業

   1. Chromeで先程調べたローカルIPアドレスを元にPCのサーバにアクセスする
      • 例）https://192.168.xx.xx:3000
   2. 「この接続ではプライバシー保護がされません」などの警告が出る場合があるが，「詳細設定」を押して接続する
   3. カメラの使用を許可する

4. 使用する

   • 機能は動作している動画を参照
   • 録画した場合，サーバPCの videos/ フォルダに追加される

※ Wi-Fiによっては稀に，サーバが起動していてもスマートフォンからアクセスできない場合があります．その場合，他のWi-Fiを試して見ることをおすすめします．

開発する

1. コマンドプロンプトやターミナルで、このREADME.mdがある階層まで移動します（上記）

2. 動作に必要なライブラリのインストール

   • yarn

3. ソースファイル（src/）をコンパイル

   • yarn watch

4. ソースファイルを編集すると，自動的にコンパイルされます

   • サーバ
     • src/server.js -> dist/server.js
   • クライアント
     • src/* -> public/*

開発に必要な知識

• HTML
  • Pug
• CSS
  • PostCSS
• JavaScript
  • Riot.js
• Node.js
  • Express

実装の説明

クライアントでの鏡と録画のためにWebRTC技術を使っています．

そのため，SSL通信が必要となり，適当に作った証明書（src/test.pfx）を使ってサーバを起動しています．