jQueryを使ったAjax入門

WEBページへの天気情報の表示

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
jQueryを使ったAjaxで「livedoorお天気WEBサービス」のAPIにアクセスした結果、取得できたレスポンスデータを使って、WEBページ上に天気情報を表示させる方法について、解説致します。
講師:
04:22

字幕

このレッスンでは jQuery を使ったAjax で Livedoor お天気 Web サービスのAPI にアクセスした結果取得できたレスポンスデータを使ってWeb ページ上に天気情報を表示させる方法について解説していきます。まずはダウンロードしてきたこちらの頭が 04_07 から始まるフォルダーの中に入っているこれら3つのファイルをエディターで開いて下さい。そしてこれがそれらのファイルを開いた状態です。これらのファイルを使って今回のレッスンの解説を進めていきたいと思います。それでは実際にLivedoor お天気 Web サービスで取得できたレスポンスデータから表示させたいデータにアクセスしてそれを実際に Website に表示させてみたいと思います。まずこちらの index.html から見ていきましょう。こちらのファイルのこの部分です。この部分には取得できたデータを表示させるための枠をそれぞれ HTML タグを使って作成しています。例えばこちらの h1 タグに関しては天気情報のエリアを表示するようにしていたりそして次の h2 タグには予報日を入れたりといった枠を作成しています。注目して頂きたいのがそれぞれの HTML タグに対してID 属性を付けているということですね。 この様に ID 属性を付けてあげることによってjQuery を使ってこちらの ID の HTML タグの中にこの情報を出力するといった命令を書くことができるようになります。それでは次に index.js ファイルに移ります。これが index.js ですね。今回注目していただきたい部分がずっと下にあるこちらの部分ですね。こちらの上の部分ではAjax で取得できた JSON 形式のデータからそれぞれ必要となる情報を取得して、そして変数に格納してきました。今回は実際にその変数を使ってHTML 上に反映していきます。この様に先程確認したID 属性ですね、それを指定してあげて、そして.html と書くことによってその ID 属性の HTML タグの中のコンテンツを書き換えることができます。そしてこの括弧の中ですね。この括弧の中が書き換えた後の情報となっていますが例えばこちらのweather_area というID 属性が付いた HTML タグの中身には天気予報のエリア「+'の天気'」という文字列を付けてあげることによって例えば今回でしたら東京都の天気ということでHTML 上に出力することができます。 同じような形でこの様に各情報に対してそれぞれ適用した変数をこの jQuery の html という関数を使って出力していっています。それでは実際にこれらのファイルをWeb サーバー上に設置してブラウザーでその動作を確認してみたいと思います。これがそれらのファイルをWeb サーバー上に設置してそしてその中の index.html にアクセスしている状態です。それではこちらの「東京の天気を表示」というボタンをクリックしてみましょう。するとこの様にアラート文で「成功」と表示されてOK ボタンを押すとこの様に天気情報が表示されてきました。この様にきちんとLivedoor お天気 Web サービスの情報に Ajax でアクセスしてその結果を Website に表示させることができました。これが Ajax を使って外部サービスの情報を利用する方法となります。以上でレッスンは終了です。今回は jQuery を使ったAjax で Livedoorお天気 Web サービスのAPI にアクセスした結果取得できたレスポンスデータを使ってWeb ページ上に天気情報を表示させる方法について解説いたしました。

jQueryを使ったAjax入門

AjaxとはAsynchronous JavaScript + XML の略で、JavaScriptを使って非同期通信を利用しWebサイトのコンテンツを動的に書き換える手法です。このコースではモダンなWebサイト作るうえで必須の技術となっているAjaxjについて、その機能を簡単に実装できるjQueryを使って解説します。

1時間30分 (25 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2016年09月14日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。