「TWIN STRIKER “FOOT-PIN-BALL”」は新感覚の対戦型サッカー&ピンボールゲームです。4つの国から攻守共に性能に差があるキャラクターとボールの速さが変わるステージを選択したら、あとはLボタンとRボタンでバーを動かし、飛んできたボールを跳ね返すだけ。1台のiPadで2人でプレイして盛り上がれます。iPhone版に比べて画面サイズの大きいiPadはTwin Strikerの臨場感をより楽しめます。

「TWIN STRIKER “FOOT-PIN-BALL”」は、米Ansca社の提供するCorona SDKを使用し、AndroidやiPhoneなど複数プラットフォームで同一ソースからの移植により、手間の少ないアプリケーション開発を実現しました。

＜動作環境＞
動作環境：iPhone 3GS/iPhone4
機能：マルチタッチ対応、同時タップ可

＜ダウンロード＞
AppStoreからダウンロードできます（価格：115円）。PCまたはiPhoneからAppStore上で「Twin Striker」で検索、または直接以下のURLへアクセスしてください。

http://itunes.apple.com/jp/app/twin-striker-foot-pin-ball/id378483340?mt=8

桜庭様、アポディア様、この場を借りてお礼申し上げます。

なおこのテキストベースできれいに組まれたパンフレットは、APODEAの公式オンラインショップにてプレゼントしてくださるようです。
各メディアで取り上げられているアポディア製品、皆さんも是非ご覧いただいてはどうでしょうか。
LINK: APODEA Official Online Shop

「TWIN STRIKER “FOOT-PIN-BALL”」は新感覚の対戦型サッカー&ピンボールゲームです。
無料版では機能が制限されており、2つの国(有料版は4つの国)から攻守共に性能に差があるキャラクターを選択し(有料版ではボールの速さが変わるステージを3つの中から選択可能)、あとはLボタンとRボタンでバーを動かし、飛んできたボールを跳ね返すだけ。1台のAndroid端末で2人でプレイして盛り上がれます。

また、「TWIN STRIKER “FOOT-PIN-BALL”」は、米Ansca社の提供するCorona SDKを使用し、AndroidやiPhoneなど複数プラットフォームで同一ソースからの移植により、手間の少ないアプリケーション開発を実現しました。

現在、iPadアプリも準備中です。

□Official Page URL
http://www.thedesignium.com/TWIN/

宣伝です。
学生時代の友人が監督&脚本を努めた映画「Re:Play-Girls | リプレイガールズ」が今夏に公開されます。

まだ情報が公開されていないようですが、オフィシャルサイトにトレイラーがありますので見て下さい!
結構良い感じに仕上がってるようです。

「Re:Play-Girls | リプレイガールズ」

The Designium – Design | The Css Awards

評価を見るとCreativityは高評価でしたが、Usabilityに難があると低評価でした。

デザイニウムではオフィシャルサイトは実験対象と位置づけ、UIに関する様々な試みを行っていますので、このように評価頂くことは大変嬉しく励みになります。

「TWIN STRIKER “FOOT-PIN-BALL”」は新感覚の対戦型サッカー&ピンボールゲームです。4つの国から攻守共に性能に差があるキャラクターとボールの速さが変わるステージを選択したら、あとはLボタンとRボタンでバーを動かし、飛んできたボールを跳ね返すだけ。1台のAndroid端末で2人でプレイして盛り上がれます。

また、「TWIN STRIKER “FOOT-PIN-BALL”」は、米Ansca社の提供するCorona SDKを使用し、AndroidやiPhoneなど複数プラットフォームで同一ソースからの移植により、手間の少ないアプリケーション開発を実現しました。

現在iPadアプリも準備中です。

＜動作環境＞
動作環境：iPhone 3GSTwin Striker on YouTube
機能：マルチタッチ対応、同時タップ可

＜ダウンロード＞
AppStoreからダウンロードできます（価格：115円）。PCまたはiPhoneからAppStore上で「Twin Striker」で検索、または直接以下のURLへアクセスしてください。
http://itunes.apple.com/jp/app/twin-striker/id375054728

[JS]each関数で上下中央揃えにするサンプル

var dsn = {
  init: function() {
  },
  dominit: function() {
    this.setFunc();
  },
  setFunc: function() {
    //class"strblock"を持った全ての要素の高さから位置を決めます
    $$('.strblock').each(function(block) {
      //この要素の高さと親要素の高さを求める
      var hs = block.getHeight();
      var phs = block.getParent().getHeight();
      var blockPos = ((phs - hs)/2).toInt();
      block.setStyle('margin-top', blockPos);
    });
  }
}

window.addEvent('domready', function(){ dsn.dominit() });
window.onresize = function() {};
window.onload = function() { dsn.init(); };

上記サンプルを使ったデモ： http://www.thedesignium.com/sample/each/
関連リンク: MooTools Docs – Native/Array

個人的にTable要素でのコーディングが主流でなくなってから、一番困っていた「上下中央揃え」を題材としてみました。
※CSSでの中央揃えについては、すでにto-Rさんとヨモツネットさんのところでご紹介されていますので詳しくはそちらをご覧ください。

あとはテキストサイズの変更を自動で検知してくれるtextresizedetector.jsを併用すれば完璧になると思いますたぶん。

Mootoolsを使ったリクエスト処理

var dsn = {
  init: function() {
    this.requestFunc();
  },
  dominit: function() {
  },
  requestFunc: function() {
    var error = 0;
    var xhrs = [
      new Request.HTML({url: 'http://www.thedesignium.com/category/web', method: 'get', update: 'web', evalScripts: false,
        onComplete: function(){ $('request1').removeClass('loading').set('html', 'Web Complete!'); },
        onFailure: function() { $('request1').removeClass('loading').set('html', 'Request Error!'); error = 1; $('attention').set('html', 'Please reload again!'); },
        onRequest: function(){ $('request1').addClass('loading').set('html', 'Request ...'); }}),
      new Request.HTML({url: 'http://www.thedesignium.com/category/other', method: 'get', update: 'other', evalScripts: false,
        onComplete: function(){ $('request2').removeClass('loading').set('html', 'Other Complete!'); },
        onFailure: function() { $('request2').removeClass('loading').set('html', 'Request Error!'); error = 1; $('attention').set('html', 'Please reload again!'); },
        onRequest: function(){ $('request2').addClass('loading').set('html', 'Request ...'); }}),
      new Request.HTML({url: 'http://www.thedesignium.com/category/services', method: 'get', update: 'services', evalScripts: false,
        onComplete: function(){ $('request3').removeClass('loading').set('html', 'Services Complete!'); },
        onFailure: function() { $('request3').removeClass('loading').set('html', 'Request Error!'); error = 1; $('attention').set('html', 'Please reload again!'); },
        onRequest: function(){ $('request3').addClass('loading').set('html', 'Request ...'); }})
    ];
    var group = new Group(xhrs[0], xhrs[1], xhrs[2]);
    group.addEvent('onComplete', function() {
      if(error != 1) alert('All Completed!');
      else alert('Request Error!');
    });

    xhrs.each(function(xhr){
      xhr.send();
    });
  }
}

var stockHash = location.hash;
window.addEvent('domready', function(){ dsn.dominit() });
window.onresize = function() {};
window.onload = function() { dsn.init(); };

上記サンプルを使ったデモ： http://www.thedesignium.com/sample/request/

※ただオフィシャルサイトでは、設置されているサーバの関係や、リクエストが複数あった場合にエラーが出る確立が高くなることから使用は止めて、擬似的な感じで処理しています。

[JS]イベントhistoryとCookieを使った履歴
アンカーでの制御を行った場合、そのページを訪れたかどうかの履歴が同一ページとして記録されます。つまりリクエスト先の情報を取ってきてもページが遷移するわけではないので、リンク先を訪れたかどうかブラウザでは認識してくれないわけです。

制御する方法はいろいろあるかもしれませんが、今回はmootoolsのCookieを使って制御するサンプルを紹介したいと思います。

Mootoolsを使ったHistory KeeperとCookieの設置サンプル

var dsn = {
  init: function() {
  },
  dominit: function() {
    //DOMの準備が出来次第historyFuncを呼び出してhistoryChangeイベントを設置
    this.historyFunc();
    //履歴を管理するための処理
    this.cookieInitFunc();
  },
  cookieInitFunc: function() {
    //履歴を判別するために全てのaタグにrelを設置
    $$('a').each(function(obj, i) {
       var objURL = obj.get('href');
       //リンク先の指定にアンカーとサイトのドメインがあればrelを設置
       if(objURL.contains('#') && objURL.contains('www.hoge.com')) {
        var objRel = objURL.split('#')[1];
        obj.set('rel', objRel);
       }
    });
    //Cookieがすでにあった場合、各aタグへ処理を加える
    if(Cookie.read("dsn")) {
      //Cookieの値を配列として蓄える
      visited = Cookie.read("dsn").split(",");
      //Cookieの情報とリンク先を比較し、履歴がある場合はclass"visited"を追加
      for(c = 0; c < visited.length; c++) {
        var linkVisited = visited[c];
        with ({linkVisited:linkVisited}) {
          $$('a').each(function(obj, i) {
            var objRel = obj.get('rel');
            if(objRel == linkVisited) obj.addClass('visited');
          });
        }
      }
    }
  },
  cookieFunc: function(pwd) {
    //履歴の重複をチェック
    var checkHistory = false;
    for(c = 0; c < visited.length; c++) {
      var linkVisited = visited[c];
      if(pwd == linkVisited) checkHistory = true;
    }
    //履歴が重複していなかった場合
    if(!checkHistory) {
      $$('a').each(function(obj, i) {
        var objRel = obj.get('rel');
        if(objRel == pwd) {
          //アンカー以降を配列に追加し、Cookieに書き込む。
          visited.push([objRel]);
          Cookie.write("dsn", visited, { duration: 10, path: "/", domain: "www.hoge.com", secure: false });
          //aタグがclass"visited"を持っていなかった場合
          if(!obj.hasClass('visited')) obj.addClass('visited');
        };
      });
    }
  },
  historyFunc: function() {
    unFocus.History.addEventListener('historyChange', dsn.historyListener);
    if(stockHash.split('#')[1]) this.historyListener();
  },
  historyListener: function() {
    //アンカーが変わるごとに以下の操作をします
    stockHash = location.hash;
    var pwd = unFocus.History.getCurrent();
    this.cookieFunc(pwd);
  }
}

//ページURLのアンカーを取得
var stockHash = location.hash;
//履歴を蓄えるための配列
var visited = new Array();

window.addEvent('domready', function(){ dsn.dominit() });
window.onresize = function() {};
window.onload = function() { dsn.init(); };

関連リンク: MooTools Docs – Utilities/Cookie

ということで次回は「並列リクエスト処理」についてお話したいと思います。

[JS]イベントhistoryとGoogle Analytics
Google Analyticsでは特定のイベント時の情報を取得することができます。
Google Code: Tracking API

このイベントを取得の際、aタグへのonClickイベントに記述するサンプルを多くみますが、今回はイベントhistoryを使うことで、ひとつひとつaタグに記述することなくイベントを管理できるようなサンプルを紹介してみたいと思います。

※左の図はGoogle Analyticsで取得したイベント情報です

Mootoolsを使ったHistory KeeperとGoogle Analytics設置サンプル

var dsn = {
  init: function() {
  },
  dominit: function() {
    //DOMの準備が出来次第historyFuncを呼び出してhistoryChangeイベントを設置
    this.historyFunc();
    this.pagetopFunc();
  },
  historyFunc: function() {
    unFocus.History.addEventListener('historyChange', dsn.historyListener);
    if(stockHash.split('#')[1]) this.historyListener();
  },
  pagetopFunc: function {
    //特定のclassにイベントを定義して記録
    //この場合pagetopというclassが設置されている要素がクリックされた際イベントを記録します
    $$('.pagetop').addEvent('click',function(){
      _gaq.push(['_trackEvent', 'Pagetop', 'Click', stockHash]);
    });
  },
  historyListener: function() {
    //アンカーが変わるごとに以下の操作をします
    stockHash = location.hash;
    var pwd = unFocus.History.getCurrent();
    //リンクへのトラッキングを記録
    _gaq.push(['_trackPageview', pwd]);
    //特定イベントを定義して記録する場合
    _gaq.push(['_trackEvent', 'Listener', 'Click', pwd]);
  }
}

//ページURLのアンカーを取得
var stockHash = location.hash;

window.addEvent('domready', function(){ dsn.dominit() });
window.onresize = function() {};
window.onload = function() { dsn.init(); };

今回Google Analyticsの新しいトラッキングコードで記述しています。
もし古いコードをお使いの方は「カグア！Google Analytics 活用塾:事例や使い方」さんのところの非同期トラッキングコード移行マニュアルをご覧いただけたらと思います。

一応軽く記述しておきますと、新しいほうは二重配列で_gaqという変数にpushで入れ込む形になっています。
また特定イベントのカテゴリについては自由に記述していいところなどは変わっていないようです。

  //リンクへのトラッキングを記録
  _gaq.push(['_trackPageview', ここにページURLなどを記述]);

  //特定イベントを定義して記録する場合
  _gaq.push(['_trackEvent', 独自のカテゴリ名, イベント名（clickなど）, 補足的な情報を登録（ラベル）]);
  //最後のラベルは、数値データとして記録し平均値を取ることもできます

これを使えばFlashなどでのトラッキングが容易になると思います。
ということで次回は「イベントhistoryとCookieを使った履歴」についてお話してみたいと思います。

[追記] onClickイベントを個々に記述しないで制御する方法

その外onClickイベントを個々のaタグに記述しなくても、以下のようにして制御することもできるのでご紹介しておきます。

  //すべてのaタグにトラッキングイベントを追加
  $$('a').addEvent('click',function(){
    var stockURL = this.get('href');
    _gaq.push(['_trackPageview', stockURL]);
  });

aタグのrelを使って追加の情報を記録したいときは以下のように記述もできます。

  //すべてのaタグにトラッキングイベントを追加
  $$('a').addEvent('click',function(){
    var stockURL = this.get('href');
    var stockRel = this.get('rel');
    _gaq.push(['_trackPageview', stockURL]);
    _gaq.push(['_trackEvent', 'History', 'Click', stockRel]);
  });

aタグのrelを使って特定のイベントだけを記録したいときは以下のような感じになります。

  //すべてのaタグにトラッキングイベントを追加
  $$('a').addEvent('click',function(){
    var stockURL = this.get('href');
    var stockRel = this.get('rel');
    //クリックされたaタグのrelが'hoge'だった場合トラッキングイベント発生
    if(stockRel == 'hoge') _gaq.push(['_trackPageview', stockURL]);
  });