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

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

本資料は、クリエイティブ・コモンズ・ライセンス 表示-改変禁止 (CC BY-ND 4.0)に基づいて公開しております。https://creativecommons.jp/licenses/

営利・非営利を問わず、勉強会やトレーニング等で自由にご活用頂けます。

200f7b54477ac809555e8e690ff3162a?s=128

アシアル株式会社

April 23, 2018
Tweet

Transcript

  1. 1.

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 1

    HTML5モバイルアプリ開発講座 サーバー接続編 アシアル株式会社
  2. 2.

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 2

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 3

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 4

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 5

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 7

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 8

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 9

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 11

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 13

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 14

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 15

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 16

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 17

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 19

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 20

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 21

    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の下部に位置情報が表示されます。 ※プレビュー画面では動作しません。
  19. 22.

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 22

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 23

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 24

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 25

    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('通信エラーが発生しました'); });
  23. 26.

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 26

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 28

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 29

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 30

    参考:JavaScriptの非同期処理について
  27. 31.

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 31

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 32

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 33

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 34

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

    Copyright © 2011 Asial Corporation. All Rights Reserved. │ 35

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