明日もデザインで食べていこう![31]WebデザイナーでもiPhoneアプリを!──はじめてのTitanium Studio(2)/秋葉秀樹

投稿:  著者:  読了時間:6分(本文:約2,700文字)


こんにちは、秋葉です。さて、前回は初めてTitanium Studioを使ったiPhoneアプリを起動させることにトライしました。今回は、iPhoneとサーバ上のPHPに文字列をやりとりすることににチャレンジしましょう。

●iPhoneからPHPに文字を送信する

私たちWebデザイナーであれば、form要素を使ってお問い合わせフォームを作ったことがありますよね? 例えばこんな感じです。
<form action="xxx.php" method="post">

これでsubmitボタンが押されたらxxx.phpにフォームの情報が送信されます。このようにWeb上のデータをPHPに送信する感覚で、iPhone内のデータをPHPに送信します。

上記の例以外に、最近ではAjaxというJavaScriptで非同期にサーバへ送受信することがよくあります。

そして今回iPhone⇄PHPの流れはAjaxとほぼ同じだと思ってください。ページ遷移なく、iPhoneからPHPに何かを送って、さらに返答をiPhoneで受け取る。ページの内容をダイナミックに切り替えることも出来るんです。

つまり、こちらから文字列を送って、PHPから返事の文字列をもらうこともできます。まずはそのサンプルを作ってみましょう。




このアドレスにアクセスしてみてください。
< http://akibahideki.com/digicre/120317/index.php >

ページには「をPHPが受け取りました!」と出るはずです。

このPHPでは、iPhoneから送られてきた文字をくっつけて
「(iPhoneから送られてきた文字列)+をPHPが受け取りました! 」
という目的で作りました。

ではPHPはどう書かれているかというと、とてもシンプルです。

【index.php】< http://akibahideki.com/digicre/120317/index.php >
<?php
header("Content-type: text/html; charset=utf-8");
$msg = $_POST["name"];
print($msg."をPHPが受け取りました!");
?>


これだけです。
「header...」と書かれている部分には、文字エンコードをUTF-8にしないと文字が化けることがあるので、その対策です。
基本的には$_POSTには「配列」とよばれるデータが格納されます。これは複数の情報をワンセットで送られるので、分かりにくい方は以下のようにとらえてください。

例えば、フォームでは、

名前:秋葉秀樹,
性別:男性,
住所:大阪

というように、複数の情報が、「キー:バリュー」のセットで送られますよね?
上記の例では3つの情報が「キー:バリュー」のセットで送られます。
これをJavaScriptっぽく書くと、

{
name: "秋葉秀樹",
sex: "男性",
address: "大阪"
}

のように書きます。:で区切っているところはCSSっぽいですね。
今回はiPhoneからPHPにnameだけを送ってみましょう。

それでは前回まで使ったapp.jsをTitanium Studioで立ち上げ、最終行に以下のコードを入力してみましょう。

【app.js】
var xhr = Ti.Network.createHTTPClient({
onload: function (e){
alert(this.responseText);
}
});
xhr.open("POST", "http://akibahideki.com/digicre/120317/index.php");
xhr.send({name:"秋葉秀樹"});


うまくいったら結果は以下のようになります。

nameで送った文字列をPHPが受け取り、文字列をくっつけて送り返されたTitanium Studio側でalertしてます。
onload: function (e){
alert(this.responseText);
}
の部分が、PHPからの返答を受け取る事に成功したときに処理されます。
this.responseTextがその文字列を表示します。
【図版1 < http://akibahideki.com/digicre/120317/fig01.png > 】

●エラー時の処理も忘れずに...

さて、今回は文字列を送受信する方法ということで、Ajaxみたいな感覚でiPhoneからPHPと非同期通信をしました。
場合によって、接続に失敗したときの対策も必要になるでしょう。
ここでは5秒以内に通信ができなかったり、そもそもネット回線が切れていたらアラートを出すことにしましょう。
下記のコードではon errorとtimeoutを追加しています。

【app.js】
var xhr = Ti.Network.createHTTPClient({
onload: function (e){
alert(this.responseText);
},
onerror : function(e) {
alert('接続エラーが起こりました');
},
timeout : 5000
});
xhr.open("POST", "http://akibahideki.com/digicre/120317/index.php");
xhr.send({name:"秋葉秀樹"});


オフライン状態にして(ネットを切って)上記のコードで実行しましょう。
以下の結果になるはずです。
【図版2 < http://akibahideki.com/digicre/120317/fig02.png > 】

以上です。
なんだか思ったより少ないコードで書けたと思います。
さて次回は、位置情報を取得して、サーバに結果を残すところまでやってみたいと思います。それではまた。おつかれさまでした!

【あきば・ひでき】hidetaro7@gmail.com
< http://www.akibahideki.com/blog/ >

テクニカルディレクター・デザイナー。DTP黎明期からグラフィックデザインを学び、東京都営団地下鉄など交通広告を多数手がける。同時に音楽活動も活発に行い、西日本半全国ツアーなどを展開、某専門学校のテーマソングを作詞作曲、編曲から楽器全てを演奏してレコーディングするなど、マルチなクリエイティブ活動も。最近では東京と大阪の教育施設などで講師業をも務める。HTML CSS JavaScript Flash ActionScript 3DCG Movie DTP GraphicDesign......多種スキルを持つ。Web標準技術だけに執着せず、すべてのメディアで説得力のある表現にチカラを注ぎたい、そんな仕事をしたい。