HTML5モバイルアプリ開発講座（サーバー接続編）

Copyright © 2011 Asial Corporation. All Rights Reserved. │ 1
HTML5モバイルアプリ開発講座サーバー接続編アシアル株式会社

アプリとサーバーの接続方法

自社管理サーバーサーバーとの連携 JSによる HTTP通信 API 社内DB • モバイルアプリとサーバー間でデータのやり取りをするには、サーバー側にWeb API が必要になります。 • Web APIは、HTTPリクエストを受けてデータを返却するサーバーサイドプログラムです。一般的にJava, PHP, Node.js などのサーバーサイド言語で開発します。

Web APIとは Web APIとは • Web上で行う手続きを、プログラムから利用できるように規格化したものです。 • TwitterやGoogleなどの様々なWebサービスが開発者向けにWeb APIを公開しています。 • 代表的な機能としては、情報の取得（商品情報の取得など）や情報の登録（SNSへの書き込みなど）などが挙げられます。

API提供サイト：Yahoo! JAPAN 主な提供機能 • 検索 • 地図 • オークション • ショッピング • 天気 • 知恵袋 • 震災関連情報 https://developer.yahoo.co.jp/

Web APIを利用するための技術

APIプロトコル REST(Representational State Transfer) • 特定のURLにGETやPOSTといったHTTPメソッドでリクエストすることにより、データの取得や登録などの何らかの操作を行うことができます。現在の主流です。 SOAP • 古くから利用されているXMLを応用したオブジェクトデータ通信の規格です。拡張性の高さが強みですが複雑なため近年では廃れつつあります。

データ形式 XML • 独自のフォーマットを作成することができる、汎用性の高いデータ形式です。 RSSなどのフォーマットとして採用されています。 • タグ構造で情報が規格化されているため、人間にも読みやすい形式になっているというメリットがある一方、データが冗長で重たくなるというデメリットもあります。 JSON(JavaScript Object Notation) • JavaScriptにおけるオブジェクトの記述方法と同じ文法のデータ形式です。 • データが軽量かつJavascriptから楽に扱えるため、Webアプリケーションと相性が良いのが特徴です。このため、最近のWeb APIはJSONをサポートしているものが多くなっています。

JavaScriptでHTTP通信する方法 XMLHttpRequest（XHR) • 古くから存在するHTMLのAPIで、JavaScriptでサーバーとHTTP通信するための機能を提供しています。 • XHRを利用して非同期通信する技術をAjaxといいます。 • XHRは記述方法が冗長になりがちなので、jQueryなどのXHRをラップしている JavaScriptのライブラリを導入するのが一般的です。（今回はこちらを利用） Fetch API • HTML5で追加された新しいAPIです。機能的にはXHRとほぼ同等ですが、シンプルな記述方法で利用できます。

アプリの作成

今回作成するアプリ • Yahoo!が提供するAPIを利用して、現在地の予想降水量を検索します。現在地の情報はCordovaのGeolocationプラグインを使用して取得します。

Yahoo! APIの利用

Yahoo! APIを利用する準備 ① Yahoo! Japan IDを取得し、ログインを行います。 https://e.developer.yahoo.co.jp/dashboard

Yahoo! APIを利用する準備 ② 「新しいアプリケーションを開発」ボタンから、アプリケーション情報の入力画面に進みます。

Yahoo! APIを利用する準備 ③ 以下の通り情報を入力し、「確認」「登録」の順にクリックします。 • アプリケーションの種類：クライアントサイド • ガイドラインに同意しますか？：同意する

Yahoo! APIを利用する準備 ④ 生成されたClient IDを利用してAPIを実行することが可能となります。この値をコピーして使います

Yahoo! APIを利用する準備 ⑤ 利用したいAPIを探します。 • 今回は「Yahoo! Open Local Platform API」に含まれる気象情報APIを利用します。 • 気象情報API（緯度・経度を元に降水量を取得する） http://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/weather.html

実習

プロジェクトをインポートする Monacaにログインした状態で、ブラウザの新規タブを開いてアドレスバーに以下のURLを入力します。 http://bit.ly/2BySOlk 「インポート」ボタンをクリックするとプロジェクトのインポートが完了します。

【実習】STEP① 位置情報の取得 • アプリ起動時に現在地の位置情報を取得します。IDE下部のConsoleエリアに現在地の緯度と経度が表示されることを確認しましょう。

STEP① 位置情報の取得スクリプトの実装 • js/app.jsの「 search 」関数内に以下のコードを記述します。 navigator.geolocation.getCurrentPosition(function(position) { var location = position.coords.longitude + ',' + position.coords.latitude; console.log(location); getWeatherData(location); }, function(error) { onError('位置情報の取得に失敗しました'); }); 完成したら、Monacaデバッガーを起動してみましょう。クラウドIDEの下部に位置情報が表示されます。 ※プレビュー画面では動作しません。

【Cordova】現在地情報の取得 Geolocationプラグイン • 端末の機能を使って現在地の緯度と経度を取得します。 • 位置情報はGPS衛星や携帯電話の基地局、WiFiアクセスポイントなどから割り出されます。 navigator.geolocation.getCurrentPosition(成功時処理, 失敗時処理); 引数説明成功時処理位置情報が正常に取得できたときに実行する関数。引数として位置情報を受け取る。失敗時処理位置情報の取得に失敗したときに実行する関数。（ユーザーが位置情報へのアクセスを許可しないように端末の設定を行っている場合など）引数としてエラー情報を受け取る。

 <ons-modal> • データの読み込み中などに、画面全体をマスクします。 • 表示/非表示の切り替えは、show() / hide() メソッドで行います。 <ons-modal>Loading…</ons-modal> 【Onsen UI】モーダル画面の表示

【実習】STEP➁ Web APIの実行 • 位置情報をもとに、Yahoo!の気象情報APIを実行して降水量情報を取得し、結果を表示します。

STEP➁ Web APIの実行スクリプトの実装 • js/app.jsの「 getWeatherData 」関数内に以下のコードを記述します。 $.ajax({ url: apiInfo.url, timeout: 10000, data: { appid: apiInfo.id, coordinates: location, output: 'json' } }) .then(function(result) { console.log(JSON.stringify(result)); var title = result.Feature[0].Name; var weatherList = result.Feature[0].Property.WeatherList.Weather; showResult(title, weatherList); }) .catch(function(error) { onError('通信エラーが発生しました'); });

jQueryによるAjaxの利用  $.ajax() • Ajax通信を行います。 $.ajax(リクエスト情報).then(成功時処理).catch(失敗時処理); キー値 url リクエストの送信先 dataType 取得するデータの種類（xml/html/jsonなど） ※省略時は自動判別される method HTTPメソッド（GET/POST/PUTなど） ※省略時はGET timeout 通信がタイムアウトする時間をミリ秒単位で設定 data リクエストパラメータを指定 • リクエスト情報はキーと値のセットからなるObject型で指定します。

参考：XSS対策

XSSとは XSS（クロスサイトスクリプティング）とは • HTMLの書き込みが可能な公開領域に、悪意のあるスクリプトを埋め込む攻撃です。 HTML5モバイルアプリの場合、外部から取得したHTMLをそのまま表示してしまうとセキュリティホールとなります。悪意のあるHTMLタグが入った本文をそのまま表示すると… アプリ … <script> location.href = "http://crack.example.com" </script> … 別のサイトに誘導されてしまう！

XSS対策 • XSSを防ぐには、HTMLの出力時にHTMLタグの構成文字等をエスケープして無害化します。 <script> location.href = "http://crack.example.com" </script> <script> location.href = "http://crack.example.com" </script> エスケープしてタグとして認識させない • エスケープ処理の実装は、JavaScriptライブラリ Underscore.js の _.escape() 関数などを利用すると便利です。

参考：JavaScriptの非同期処理について

Web API呼び出しの仕組み • Web APIを実行して結果が返却されるまでのレスポンスタイムは、数百ミリ秒～数秒程度かかります。そのためWeb APIの実行処理は非同期で行います。 • JavaScriptにおける非同期処理は、一般的にコールバック関数で実装します。 Web API Response Request ① 通信の開始時にコールバック関数を登録 ② 通信の完了時にコールバック関数を実行 ② ① 非同期処理

コールバック関数について • 何らかの処理が完了したタイミングで実行する関数をコールバック関数といいます。以下は最も単純なコールバック関数の例です。 // 1秒経過後に、コールバック関数を実行 setTimeout(function() { console.log("処理Aが完了"); }, 1000); ※ setTimeout()は、指定時間後に非同期で処理を実行する命令です。 setTimeout(コールバック関数, 待機時間) ※待機時間はミリ秒単位で指定

非同期処理を逐次処理する • 非同期処理Aが終わってから非同期処理Bを実行し、Bが終わってから非同期処理Cを実行したい・・・といった場合、以下のようコールバック関数の中でコールバック関数を呼び出すため、階層が深くなり可読性が低くなります。 setTimeout(function() { console.log("処理Aが完了"); setTimeout(function() { console.log("処理Bが完了"); setTimeout(function() { console.log("処理Cが完了"); }, 1000); }, 1000); }, 1000);

Promiseとは • Promiseは、非同期処理を便利に扱うためのオブジェクトです。非同期処理の完了後にthen()またはcatch()のいずれかのメソッドが実行されます。 Promiseオブジェクト .then(成功時に実行する関数) .catch(失敗時に実行する関数); ➢ Onsen UIのpushPage()は、戻り値としてPromiseオブジェクトを返却します。 ➢ jQueryの$.ajax()は、戻り値にPromiseと互換性のあるオブジェクトを返却します。

Promiseによる逐次処理 • Promiseを使うと、非同期の逐次処理を以下のようにメソッドチェーン形式で簡潔に記述することができます。処理A() .then(処理B) .then(処理C) .catch(エラー処理) .then(最後に実行する処理); ➢ 逐次的に処理されるため、前の非同期処理の結果が次の非同期処理に引数として渡されます。

HTML5モバイルアプリ開発講座（サーバー接続編）

HTML5モバイルアプリ開発講座（サーバー接続編）

More Decks by アシアル株式会社

Other Decks in Technology

Featured

Transcript