Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

アシアル株式会社

April 23, 2018
Tweet

More Decks by アシアル株式会社

Other Decks in Technology

Transcript

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

    View full-size slide

  2. Copyright © 2011 Asial Corporation. All Rights Reserved. │ 2
    アプリとサーバーの接続方法

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. Copyright © 2011 Asial Corporation. All Rights Reserved. │ 6
    Web APIを利用するための技術

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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とほぼ同等ですが、シンプ
    ルな記述方法で利用できます。

    View full-size slide

  10. Copyright © 2011 Asial Corporation. All Rights Reserved. │ 10
    アプリの作成

    View full-size slide

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

    View full-size slide

  12. Copyright © 2011 Asial Corporation. All Rights Reserved. │ 12
    Yahoo! APIの利用

    View full-size slide

  13. Copyright © 2011 Asial Corporation. All Rights Reserved. │ 13
    Yahoo! APIを利用する準備
    ① Yahoo! Japan IDを取得し、ログインを行います。
    https://e.developer.yahoo.co.jp/dashboard

    View full-size slide

  14. Copyright © 2011 Asial Corporation. All Rights Reserved. │ 14
    Yahoo! APIを利用する準備
    ② 「新しいアプリケーションを開発」ボタンから、アプリケーション情報の
    入力画面に進みます。

    View full-size slide

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

    View full-size slide

  16. Copyright © 2011 Asial Corporation. All Rights Reserved. │ 16
    Yahoo! APIを利用する準備
    ④ 生成されたClient IDを利用してAPIを実行することが可能となります。
    この値をコピーして使います

    View full-size slide

  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

    View full-size slide

  18. Copyright © 2011 Asial Corporation. All Rights Reserved. │ 18
    実習

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

  24. Copyright © 2011 Asial Corporation. All Rights Reserved. │ 24
    【実習】STEP➁ Web APIの実行
    • 位置情報をもとに、Yahoo!の気象情報APIを実行して降水量情報を取得
    し、結果を表示します。

    View full-size slide

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

    View full-size slide

  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型で指定します。

    View full-size slide

  27. Copyright © 2011 Asial Corporation. All Rights Reserved. │ 27
    参考:XSS対策

    View full-size slide

  28. Copyright © 2011 Asial Corporation. All Rights Reserved. │ 28
    XSSとは
    XSS(クロスサイトスクリプティング)とは
    • HTMLの書き込みが可能な公開領域に、悪意のあるスクリプトを埋め込む攻撃です。
    HTML5モバイルアプリの場合、外部から取得したHTMLをそのまま表示してしま
    うとセキュリティホールとなります。
    悪意のあるHTMLタグが入った本文をそのまま表示すると…
    アプリ

    <br/>location.href =<br/>"http://crack.example.com"<br/>

    別のサイトに誘導されてしまう!

    View full-size slide

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

    View full-size slide

  30. Copyright © 2011 Asial Corporation. All Rights Reserved. │ 30
    参考:JavaScriptの非同期処理について

    View full-size slide

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


    非同期処理

    View full-size slide

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

    View full-size slide

  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);

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide