04. WepAPIを利用したサービス

先回は Twitter 社が提供しているレスポンシブル UI ライブラリ BootStrap を紹介しました。

先回の講義では、その概要を把握する為に、 HTML や Javascript 、 CSSなどコード寄りの演習課題で、デバイスのサイズに対応して自動的にレイアウトを変更するテーブル（表）を作成方法を紹介しました。

今回は、

一から自分でコードをすべて作成せずに、テンプレートを利用して一部を修正して利用する方法を紹介します。

サンプルコードを丸ごとダウンロードできるサイトも有ります。 http://www.softantenna.com/wp/software/start-bootstrap/

また、こちら（有料サービス）で紹介されているように、コードを書くこと無しに、 Drag＆Drop で BootStrap の UI画面を作成することもできる様です。

Demo のリンクからUI構築を体験できます。試してみましょう。

同様のサービスに、

も有ります。

WebAPI について：

利用例）

郵便番号 → 住所の変換など。

１分で作るスマホ対応Bootstrap注文フォーム

Googleの地図表示APIを利用して、連絡先ページを作成する例。デザインには Bootstrap を使用。

Add a Google Map to a Bootstrap 3 Contact Page -

アニメ番組表 API（個人が提供中。番組データはUGCで利用者が協力して入力。）

※ クライアントサイド（ブラウザ＋HTMLファイル）のプログラムでは、このAPIは動かせません（XSSのセキュリティチェックに引っ掛かるため）

※ PHP Ruby Python などサーバサイドのスクリプトと組み合わせて利用する必要あり。

~~修正点： Bootstrap の jQuery 読み込みのコード（以下の部分）~~

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="js/bootstrap.min.js"></script>

を、APIを利用するJavaScript よりも前に実行する様に移動する。

~~XSS のセキュリティ対策で、外部APIを利用したWeb作成はブラウザがチェックして動作を止める。~~

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

その修正（参照記事）

※ この方法ではうまく行きませんでした。

次回導入検討中：