小さい頃はエラ呼吸

いつのまにやら肺で呼吸をしています。


node.js + iPhoneのフリックでスライドをリアルタイムに切り替える

node.js

はじめに

先日、node.jsとCSSSlide.jsでスライド共有するサンプルプログラムを作りました。このプログラムを少し改良して、iphoneのフリックでスライドを切り替えられるようにしました。

HTML5＋CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応
HTML5＋CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応
posted with amazlet at 11.06.07
谷拓樹
ラトルズ
売り上げランキング: 2326
Amazon.co.jp で詳細を見る

iPhoneをリモコンのように使う

普通のプレゼンテーションはノートパソコンの前に立って行いますが、node.js + socket.io + CSSSlide.jsで作られたこのプレゼンツールを使えば、iPhoneをまるでリモコンのようにしてしまうことができます。iPhoneのSafariで指定のURLを開いた状態で、ディスプレイを右や左にさらっとフリックするだけで、スライドをリアルタイムに切り替えることができます。

デモアプリ

以下のURLをGoogle ChromeとiPhoneのSafariで開いてみてください。

iPhoneのフリックを検知する

iPhoneのフリックはtouchmoveイベントを拾って、座標がどれくらい動いたかを判定しています。

  var startX; // フリックの開始座標
  var diffX;  // 座標の差分
  
  // フリック開始イベント
  document.addEventListener("touchstart", touchStart, false);
  function touchStart(e) {
    var touch = e.touches[0];
    startX = touch.pageX;
  }
  
  // フリック中のイベント
  document.addEventListener("touchmove", touchMove, false);
  function touchMove(e) {
    // ページ全体でスクロールを抑止
    e.preventDefault();
    // 移動した座標を格納
    var touch = e.touches[0];
    diffX = touch.pageX - startX;
  }
  
  // フリックが終了したときのイベント
  document.addEventListener("touchend", touchEnd, false);
  function touchEnd(e) {
    if (diffX > 100) {
      // 右へフリック
      socket.send(CSSslide.nowPage + 1);
      CSSslide.move(CSSslide.nowPage + 1);
    } else if (diffX < -100) {
      // 左へフリック
      socket.send(CSSslide.nowPage - 1);
      CSSslide.move(CSSslide.nowPage - 1);
    }
  }
ソースコード

GitHubでソースコードを公開しています。

サンプルプログラムを動かす

1. 事前にnode.jsと関連ライブラリであるexpress、ejs、socket.ioをインストールします。
2. gitをインストールします。

3.以下のコマンドを実行して、ファイルをダウンロードします。

git clone git://github.com/replication/NodeCSSSlide.git

4. ディレクトリを移動します。

cd NodeCSSSlide/

5. サンプルプログラムを起動します。

node app.js

6. WebSocke対応のブラウザでhttp://127.0.0.1:3000/にアクセスします。そして、iPhoneのSafariで同じURLを表示します。右や左にスライドをフリックすると、もう一方のブラウザのスライドがリアルタイムで切り替わります。

関連エントリ