qui-no Labs » Flash/Flex http://labs.qui-no.com 株式会社キノの技術メモやTIPSなどの情報 Tue, 10 May 2011 03:20:39 +0000 http://wordpress.org/?v=2.9.2 ja hourly 1 EC-CUBE用FeliCaログイン認証モジュール http://labs.qui-no.com/203 http://labs.qui-no.com/203#comments Wed, 14 Apr 2010 03:19:50 +0000 加藤 雄亮 http://labs.qui-no.com/?p=203 前回、Flash/AIR で FeliCa へアクセスでご紹介した通り、FlashからFeliCaを扱う事が出来るようになりました。
まだFeliCaの用途を試行錯誤している最中ですが、試しにECシステムのオープンソースであるEC-CUBEにFeliCaを使ってログインするモジュールを開発してみました。

通常、MYページ等のログイン認証にはIDとパスワードを入力しますが、FeliCaが保持する固有のIDとパラメータを使用して、ID/PW以外のログイン方法を提供します。

FeliCaのログイン画面が表示されたら、予め登録済みのFeliCaをタッチすることでログイン出来るという構成です。
※FeliCaログインを利用するには、PC内蔵の「FeliCaポート」や専用のリーダーが接続されている事、またFeliCaポートソフトウェアがインストールされている必要があります。

FeliCaログイン

FeliCaログイン

MYページFeliCa登録

MYページFeliCa登録


ダウンロード

バージョン 日時 ファイル名 備考
1.0.0 2010/04/14 zip | tar.gz EC-CUBE ver.2.4.3対応

導入方法

下記の構成ファイル一覧をコピーしてください。
既にカスタマイズをされている場合は手動でのマージをお勧めします。

構成ファイル一覧

追加ファイル

data/Smarty/templates/default/mypage/felica.tpl
data/Smarty/templates/default/mypage/felica_add.tpl
data/Smarty/templates/default/mypage/felica_login.tpl
data/class/pages/frontparts/LC_Page_FrontParts_FelicaLogin.php
data/class/pages/mypage/LC_Page_Mypage_Felica.php
data/class/pages/mypage/LC_Page_Mypage_FelicaAdd.php
data/class/pages/mypage/LC_Page_Mypage_FelicaLogin.php
html/frontparts/felica_login.php
html/mypage/felica.php
html/mypage/felica_add.php
html/mypage/felica_login.php
html/user_data/packages/default/img/mypage/felicaadd.gif
html/user_data/packages/default/img/mypage/felicaadd_on.gif
html/user_data/packages/default/img/mypage/felicaadd_title.jpg
html/user_data/packages/default/img/mypage/felicalogin_title.jpg
html/user_data/packages/default/img/mypage/navifelica.jpg
html/user_data/packages/default/img/mypage/navifelica_on.jpg
html/user_data/packages/default/img/mypage/subtitlefelica.gif
html/user_data/packages/default/js/swfobject.js
html/user_data/packages/default/swf/expressInstall.swf
html/user_data/packages/default/swf/felicaadd.swf
html/user_data/packages/default/swf/felicabloc.swf

変更ファイル

data/Smarty/templates/default/bloc/login.tpl
data/Smarty/templates/default/mypage/login.tpl
data/Smarty/templates/default/mypage/navi.tpl
data/Smarty/templates/default/shopping/index.tpl
data/mtb_constants_init.php
html/install/sql/column_comment.sql
html/install/sql/create_table_mysql.sql
html/install/sql/create_table_pgsql.sql
html/install/sql/drop_table.sql
html/install/sql/insert_data.sql
html/install/sql/table_comment.sql

変更箇所

変更ファイル内の変更箇所は下記のコメントが挿入されています。

PHPファイル

// start FeliCa認証
...
// end FeliCa認証

TPLファイル

<!--{** start FeliCa認証 **}-->
...
<!--{** end FeliCa認証 **}-->

SQLファイル

-- start FeliCa認証
...
-- enf FeliCa認証


ライセンス

プログラム本体であるEC-CUBEのGPLライセンスに従います。
GPLライセンス下でソースコードの改変、再配布を行えます。

]]> http://labs.qui-no.com/203/feed 1 Flash/AIR で FeliCa へアクセス http://labs.qui-no.com/191 http://labs.qui-no.com/191#comments Mon, 05 Apr 2010 04:04:40 +0000 加藤 雄亮 http://labs.qui-no.com/?p=191 最近、ソニーが開発した非接触ICカード技術“FeliCa”への関心が高まっています。先日、SDK for FeliCa AIR/Flash というFlash/AIRからFeliCaを操作出来るSDKがリリースされました。このSDKには、Basic版（無償）とStandard版（有償）があり、機能が制限されていますが、簡単な動作確認であれば、Basic版で十分です。
SDK for FeliCa & Adobe® AIR® / Adobe® Flash®

今回は新しくFlash Builber 4を使用してFlex4で簡単にサンプルを作成してみました。

FeliCaのIDmとPMmを読み取るサンプル

下記の動作には、FeliCaポート/パソリが接続されている事、またFeliCaポートソフトウェアがインストールされている必要があります。

FeliCaサンプル

MXMLソースコード

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 
               minWidth="300" minHeight="200">
    <s:TextArea id="textArea" lineHeight="150%" visible="false"/>
    <s:Button id="button" label="FeliCa読み込み開始" click="{this._onButtonClick()}"/>
    <fx:Script>
        <![CDATA[
            import com.sony.jp.felica.FeliCaCloseReaderWriterRequest;
            import com.sony.jp.felica.FeliCaCloseReaderWriterResponse;
            import com.sony.jp.felica.FeliCaControl;
            import com.sony.jp.felica.FeliCaOpenReaderWriterAutoRequest;
            import com.sony.jp.felica.FeliCaOpenReaderWriterAutoResponse;
            import com.sony.jp.felica.FeliCaPollingAndGetCardInformationRequest;
            import com.sony.jp.felica.FeliCaPollingAndGetCardInformationResponse;
            import com.sony.jp.felica.FeliCaSessionRequest;
            import com.sony.jp.felica.FeliCaSessionResponse;
            import com.sony.jp.felica.error.FeliCaAccessError;
            import com.sony.jp.felica.event.FeliCaStatusEvent;
            import com.sony.jp.felica.event.OpenStatusEvent;
            
            import mx.utils.ObjectUtil;
            
            /** FeliCaProxy ポート番号 */
            private static const FELICA_PORT:uint = 10250;
            /** FeliCaProxy 通信タイムアウト秒数 */
            private static const FELICA_TIMEOUT:uint = 10;
            
            /** FeliCaProxy と通信を行うクラス */
            private var _felica:FeliCaControl = new FeliCaControl();
            
            /** ポーリング用 Timer (500ミリ秒毎, 20回 = 5秒間) */
            private var _pollingTimer:Timer = new Timer(500, 10);
            
            private function _onButtonClick():void
            {
                this.textArea.width   = this.width;
                this.textArea.height  = this.height;
                this.textArea.visible = true;
                this.button.visible   = false;
                this._open();
            }
            
            private function _open():void
            {
                this._felica.responseTimeout = FELICA_TIMEOUT * 1000;
                this._felica.addEventListener(OpenStatusEvent.OPEN_COMPLETE, this._onOpenComplete);
                this._felica.addEventListener(OpenStatusEvent.OPEN_FAILURE,  this._onOpenFailure);
                this._felica.open(FELICA_PORT);
            }
            
            private function _close():void
            {
                if (this._pollingTimer.running) {
                    this._pollingTimer.reset();
                }
                if (!this._felica.close()) {
                    this._log('[ NG ] Disconnect FeliCa Proxy Error!');
                    this._close();
                    return;
                }
                this._log('[ OK ] Disconnect FeliCa Proxy.');
            }
            
            private function _onOpenComplete(event:OpenStatusEvent):void
            {
                this._log('[ OK ] Connect FeliCa Proxy.');
                this._felica.addEventListener(FeliCaStatusEvent.FELICA_ACCESS_COMPLETE, this._onFelicaAccessComplete);
                this._felica.addEventListener(FeliCaStatusEvent.FELICA_ACCESS_FAILURE,  this._onFelicaAccessFailure);
                this._lock();
            }
            
            private function _onOpenFailure(event:OpenStatusEvent):void
            {
                this._log('[ NG ] Open FeliCa Proxy Error!');
                this._log(ObjectUtil.toString(event));
            }
            
            private function _lock():void
            {
                var request:FeliCaSessionRequest = new FeliCaSessionRequest();
                request.type          = FeliCaSessionRequest.HOLD;
                request.lockTimeout   = 10;
                request.unlockTimeout = 30;
                this._felica.access(request);
            }
            
            private function _unlock():void
            {
                var request:FeliCaSessionRequest = new FeliCaSessionRequest();
                request.type = FeliCaSessionRequest.RELEASE;
                this._felica.access(request);
            }
            
            private function _polling():void
            {
                if (!this._pollingTimer.hasEventListener(TimerEvent.TIMER)) {
                    this._onPollingTimer();
                }
                this._pollingTimer.addEventListener(TimerEvent.TIMER,          this._onPollingTimer);
                this._pollingTimer.addEventListener(TimerEvent.TIMER_COMPLETE, this._onPollingTimerComplete);
                this._pollingTimer.start();
            }
            
            private function _onPollingTimer(event:TimerEvent = null):void
            {
                this._log('Polling ...');
                var request:FeliCaPollingAndGetCardInformationRequest = new FeliCaPollingAndGetCardInformationRequest();
                request.systemCode = 'FFFF';
                this._felica.access(request);
            }
            
            private function _onPollingTimerComplete(event:TimerEvent):void
            {
                this._log('[ OK ] Stop Polling.');
                this._close();
            }
            
            private function _onFelicaAccessComplete(event:FeliCaStatusEvent):void
            {
                if (event.object is FeliCaSessionResponse) {
                    var session:FeliCaSessionResponse = event.object as FeliCaSessionResponse;
                    if (session.type == FeliCaSessionResponse.HOLD) {
                        this._log('[ OK ] FeliCa Session Hold.');
                        this._felica.access(new FeliCaOpenReaderWriterAutoRequest());
                    } else if (session.type == FeliCaSessionResponse.RELEASE) {
                        this._log('[ OK ] FeliCa Session Release.');
                        this._close();
                    }
                } else if (event.object is FeliCaOpenReaderWriterAutoResponse) {
                    this._log('[ OK ] Start Polling.');
                    this._polling();
                } else if (event.object is FeliCaPollingAndGetCardInformationResponse) {
                    this._log('[ OK ] Open FeliCa Reader/Writer.');
                    if (this._pollingTimer.running) {
                        this._pollingTimer.reset();
                    }
                    var pgcResponse:FeliCaPollingAndGetCardInformationResponse = event.object as FeliCaPollingAndGetCardInformationResponse;
                    this._log('\nIDm: ' + pgcResponse.idm);
                    this._log('PMm: ' + pgcResponse.pmm + "\n");
                    this._felica.access(new FeliCaCloseReaderWriterRequest());
                } else if (event.object is FeliCaCloseReaderWriterResponse) {
                    this._log('[ OK ] Close FeliCa Reader/Writer.');
                    this._unlock();
                }
            }
            
            private function _onFelicaAccessFailure(event:FeliCaStatusEvent):void
            {
                if (event.object is FeliCaAccessError) {
                    var feliCaAccessError:FeliCaAccessError = event.object as FeliCaAccessError;
                    if (feliCaAccessError.rwError == 157) {  // Error Code: No FeliCa
                        return;
                    }
                }
                if (event.object is Error) {
                    var error:Error = event.object as Error;
                    if (error.errorID == 7011) {
                        this._log('[ NG ] FeliCa Proxy Timeout Error!');
                    }
                }
                this._log('[ NG ] FeliCa Access Error!');
                this._log(ObjectUtil.toString(event));
                this._close();
            }
            
            private function _log(message:String):void
            {
                this.textArea.appendText(message + "\n");
            }
        ]]>
    </fx:Script>
</s:Application>


ダウンロード

Flash Builder 4 プロジェクトダウンロード： FeliCaBasic.zip



Standard版（有償）を利用すれば、データ領域にアクセス出来るため、様々な事に応用出来そうな気がします。また、読み取り側の普及次第となりますが、ECサイトの決済サービス等も増えてきそうな気がします。

]]> http://labs.qui-no.com/191/feed 2 Adobe Stratusを使用したFlash P2P通信について http://labs.qui-no.com/122 http://labs.qui-no.com/122#comments Mon, 01 Feb 2010 09:20:26 +0000 加藤 雄亮 http://labs.qui-no.com/?p=122 Adobe LabsにRTMFPプロトコルを扱う「Adobe Stratus」があります。現在はベータ版ですが、そろそろリリースが近いのではないかと思います。

RTMFP（Real-Time Media Flow Protocol）は、簡単に言うとRTMPの機能限定版です。リアルタイムの映像と音声配信に特化したプロトコルと言えます。Flash Player 10.1とStratus 2.0を使用するとアプリケーションレベルでマルチキャストを使用出来きるそうです。サーバを介す必要がないため、負荷を軽減出来るメリットがあります。



サンプルアプリケーション：
オンラインで公開されているサンプルアプリケーションもありますが、ローカルで動作させてみたい場合は、ソースコードが公開されているのでダウンロードして自由に試す事が出来ます。

Stratusオンラインサンプル
ソースコードダウンロード



ソースコードを実行する場合は以下の手順が必要です。
※要Flex Builder 3.0.2, Flash Player 10

1. Flex Builderで「新規Flexプロジェクト」で「VideoPhoneLabs」プロジェクトを作成します。

2. 以下のソースコードを「VideoPhoneLabs/src/」下にコピーします。
　VideoPhoneLabs.mxml
　AbstractIdManager.as
　HttpIdManager.as
　IdManagerError.as
　IdManagerEvent.as

3.「VideoPhoneLabs」プロジェクトのプロパティを変更
　「Flexコンパイラ」の「Flex SDK バージョン」を「Flex 3.2」へ変更
　「Flexコンパイラ」の「必要な Flash Player バージョン」を「10.0.0」へ変更

4. Stratusベータ版のDeveloper keyを取得します。
　Stratus developer key

5. Developer keyを「VideoPhoneLabs.mxml」に記述します。
// developer key, please insert your developer key here
private const DeveloperKey:String = "取得したDeveloper key";


6. 同梱のPythonスクリプト「reg.cgi」が利用するSQLite3のデータベースを作成し、以下のSQLを実行します。
CREATE TABLE registrations (
    m_username VARCHAR COLLATE NOCASE,
    m_identity VARCHAR,
    m_updatetime DATETIME,
    PRIMARY KEY (m_username)
);
CREATE INDEX registrations_updatetime ON registrations (m_updatetime ASC);



[user@www ~]$ sqlite3 registrations.db　# データベース作成
SQLite version 3.3.6
Enter ".help" for instructions

# テーブル作成
sqlite> CREATE TABLE registrations (
   ...>     m_username VARCHAR COLLATE NOCASE,
   ...>     m_identity VARCHAR,
   ...>     m_updatetime DATETIME,
   ...>     PRIMARY KEY (m_username)
   ...> );
sqlite> CREATE INDEX registrations_updatetime ON registrations (m_updatetime ASC);

# 終了
sqlite> .quit


7.「reg.cgi」のデータベースファイルの場所を任意で変更します。
　※「reg.cgi」と「registrations.db」を同階層に設置する場合は以下
# CHANGE THIS
dbFile = './registrations.db'


8.「reg.cgi」を任意の場所にアップロードし、URLを「VideoPhoneLabs.mxml」に記述します。
// please insert your webservice URL here for exchanging
private const WebServiceUrl:String = "http://設置URL/reg.cgi";


9.「VideoPhoneLabs」プロジェクトをコンパイルします。

10.「bin-release」ディレクトリに生成されたHTMLをWebサーバへアップロードして完了です。

]]> http://labs.qui-no.com/122/feed 8 FlashでWebカムからQRコードを読み取る http://labs.qui-no.com/18 http://labs.qui-no.com/18#comments Fri, 22 Jan 2010 10:31:28 +0000 加藤 雄亮 http://labs.qui-no.com/?p=18 以前、社内でQRコードを使用したサービスを検討していた際、FlashでWebカメラを使用してQRコードを読み取る技術が公開されていたのでご紹介します。

ソースコードはSpark Project内のQRCodeReaderプロジェクトとして公開されていて、誰でもサンプルを使用する事が出来ます。

資料：
FlashでQRコード読み取り – ロゴスウェア株式会社
ActionScriptでQRコードを読み取る – Flashデベロッパーセンター

ソースコード：
QRCodeReader – Spark Project

以下はサンプルコードをパブリッシュして生成したswfファイルです。
※このサンプルはWebカメラを使用します。Webカメラが利用出来ない場合はサンプルは動作しません。
QRコードサンプル

WebカメラにQRコードを近づけると、文字が読み取れます。作者の方曰く、まだ改良の余地があるそうですが、とりあえずは使用できます。

Flashで動作するという事は、Adobe AIRでデスクトップアプリケーションとして動作させる事も可能です。なにか新しいサービスが出来そうな予感がします。

サンプルswfファイルダウンロード： ReadQrCodeSample.zip

]]> http://labs.qui-no.com/18/feed 0