「続きはウェブで　ポスター版」を作ってみよう！

ポ スターに全ての情報を書ききれない。でも、興味を持ってくれた人にもっと伝えたい。そんなときには、ポスターにウェブへのリンクを書いておけばよい。ただ し、URLを入力するのは面倒くさいし、QRコードも結構時間がかかる。そこで、NFCを使って、ホームページにアクセスするアプリケーションを作ってみ よう。

(1)NFCタグを読み取るアプリの作成
(2)IDmを使ってURLを作成しホームページにアクセスするアプリの作成

のステップで作成してみよう。


図　完成予想図

(1)NFCタグを読み取るアプリの作成
NFCタグを読み取るには、NFC対応のスマホを使う必要があります。NFC対応のスマホは最近だいぶ増えてきていますが、まだ、標準搭載ではないので、NFCを使いたい場合には機種を選ぶ必要があります。
今回は、NFCタグのタグIDに相当する情報しか使わないので、読み取りアプリは比較的簡単にできます。NfcAdapterというライブラリを使って実装します。次のウェブを参考に実装してみよう。

NFCでカードIDを取得する

・getIntentメソッドでインテントのインスタンスを取得し、アクションプロパティを見て、タグが検出されたかを判断する
・タグが検出された場合にはIDを取得する
・画面に配置したTextViewに取得したIDを表示する

処理の流れは以上の通りです。

ここでは、NFCIDViewという名前のプロジェクトを作成してみます。レイアウトは次のようにしてみました。



ライブラリは、TextViewとNFCAdapterを追加しておこう。

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.TextView;
import android.nfc.NfcAdapter;

最初に、レイアウトの表示部分（ID/TextView1)に表示用の変数をtextViewとして定義しておきます。

TextView textView=(TextView)findViewById(R.id.textView1);

次に、インテントのアクションプロパティを文字列として取得しておきます。

String action = getIntent().getAction();

ここから、インテントの値がタグ検出かどうかを判断し、タグが検出された場合には、NfcAadpterのEXTRA_IDの値をバイト列としてrawIdsという変数に格納します。
後は、rawIdsに値がある場合に、一文字ずつ読み出して、idByteという文字列バッファに格納し、その後、それを、文字列に変換し、先ほど定義したtextViewに表示します。

        if(NfcAdapter.ACTION_TAG_DISCOVERED.equals(action)){
            byte[] rawIds =getIntent().getByteArrayExtra(NfcAdapter.EXTRA_ID);
            String id="";
            StringBuffer idByte = new StringBuffer();
            if(rawIds !=null){
                for(int i=0; i<rawIds.length; i++){
                    idByte.append(Integer.toHexString(rawIds[i]&0xff)); // byte型をintegerに変換する際には0xffを加える
                }
                id = idByte.toString();

                textView.setText("ID:"+id);
            }
        }

こ れだけでは、動かないので、Manifestに、NFCを使うために、manifestには、NFCを使うためのpermissionとNFC機能が必要 であるということを示す記述を追加しておく必要があります。これは、<manifest>タグの直下に記述します。

     <uses-permission android:name="android.permission.NFC" />
     <uses-feature android:name="android.hardware.nfc"  android:required="true" />

さらに、NFCタグを読み取ったときにアプリケーションが起動するようにインテントフィルターを記述します。こちらは、<activity>タグの直下に記述します。

 <intent-filter>
 <action android:name="android.nfc.action.TAG_DISCOVERED" />
 <category android:name="android.intent.category.DEFAULT" />
 </intent-filter>

以上で完成です。実際にタグを近づけてみると以下のような画面が表示されるはずです。



ここまでのコード［ダウンロード］

(2)IDmを使ってURLを作成しホームページにアクセスするアプリの作成
タ グのIDを使ってURLを作る方法はいくつかあると思いますが、今回は、サーバー側にPHPを使って、ID変数として、読み取ったIDをサーバーに送って、動 的に、ページを生成するという方法としました。タグのIDが長ったらしいので、実現方法としてはいまいちですが、演習で全体の流れを把握するということ で、この方法で以降の説明を進めていきます。

(2-1)サーバー側のPHP作成
PHPが使えるサーバーを利用可能であるという前提で説明 を進めます。PHPには、includeコマンドがあり、他のファイルを読み込むことができます。そこで、クライアント側（スマホ）で読み取ったIDをidと いう名前の変数でポストし、そのID名をファイルとした、そのポスターに関わる内容が書かれているファイルを読み取って、クライアントが読み込むウェブ画 面を生成することで、動的にページを作り出すことが可能となります。処理のイメージは以下の通りです。



ここでは、最低限のコードということで、TouchPoster.phpは次のようにしてみました。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html style="direction: ltr;" lang="ja">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>TouchPoster</title>
</head>
<body style="width: 800px;">
<table style="width: 100%; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="background-color: rgb(51, 102, 255); text-align: center;">
<span style="font-weight: bold; color: white;">タッチしていただいてありがとうございました。映画の情報をお楽しみください。</span>
</td>
</tr>
</tbody>
</table>
<?php
$id=$_GET['id'];

include("contents/".$id.".php");

?>
</body></html>

このｐｈｐファイルで読み出されるファイルは、適宜作成しておこう。ここでは、これらのファイルを以下のように配置することとにしました。



00001.phpのところには実際に使用するタグのIDを用いる必要があります。
ここまでできたら、ウェブブラウザから動作の確認をしてみよう。この例では次のように表示されることが確認できました。




(2-2)クライアントソフトの変更
続いて、クライアント側のスマホのソフトを変更します。変更箇所は、大きく
  1. タグを読んだとき読取ったタグのIDを変数としてURLを作成する
  2. 作成したURLにアクセスする
  3. アプリがインターネット接続できるようにManifestファイルを変更する
の3つになります。
URLの作成は、文字列型の変数を定義し、読み取ったIDとURLを単純に結合します。ここでは、urlStrという変数を定義しておいて、

String urlStr="http://[URL]/TouchPoster.php?id=";

タグが読み取られた後に、

urlStr = urlStr+id;

として、アクセスするURLを作成しました。
ウェブへのアクセスは、次のようにすると実行できます。こうすることで、ブラウザを起動できます。

Uri uri = Uri.parse(urlStr);
Intent i = new Intent(Intent.ACTION_VIEW,uri);
startActivity(i);

この際に必要なライブラリはインポートします。

最後にManifestの変更であるが、インターネット接続ができるように以下の行を追加しておきましょう。

<uses-permission android:name="android.permission.INTERNET" />

画面の表示もそれらしいものに変更しておく方がよいでしょう。ただ、実際には、

「タグにスマホをかざす」→「ブラウザを選ぶ」→「ウェブが表示される」

となるので、アプリケーションの画面を見ることはないと思います。



スマホでタグを読んでみると次のようなウェブ画面が表示できると思います。



ここまでのコード［ダウンロード］

（3）アプリケーションの課題
このアプリケーションの課題としては次のようなものがあります。

・タグとウェブ画面が一対一で結びついている。
このアプリでは、タグIDとウェブ画面が一対一で結び付けられていますが、実際には、ポスターは何枚もあり、それぞれ違ったIDが付与されることになると 思います。そこで、あるIDのグループが読み込まれたら、同じウェブにアクセスするというように変更をする必要があると思われます。

関連して、それらのIDをいちいちプログラムで編集するのは手間なので、IDの登録をできるアプリがあるとよいでしょう。

・ポスターの紹介ページへのリンク
上の課題と関連しますが、ポスターの紹介ページについてもIDで特定されていますが、実際には、そのように画面が作られることはあまり無いでしょう。今回は、読取ったIDをもとにURLを作成しましたが、直接URLを作成しない方法の方が効率的かもしれません。

以上のような課題を解決して、より実用的なアプリケーションを作ってみよう。