jQuery APIでWebサイトを演出しよう

Google Feed APIで外部ブログと連携させよう

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ブログは、記事のデータを配信する仕組みを持っています。そのデータをGoogle Feed APIで更新情報として表示させてみましょう。
講師:
08:52

字幕

このレッスンでは外部のブログなどのRSS 情報を引っ張ってくるというGoogle Feed API について学びます。まずは final のフォルダーの中にあるindex.html をブラウザーで開いてみましょう。ブラウザーで開いてそして少しスクロールをしてNews のエリアを見てみましょう。実はこのエリアは HTML 上には書いてない情報です。その証拠にブラウザーの何もない所で右クリックをして「ページのソースを表示」してみるとニュースがあるべき所を見るとdl id="feed" の中は空っぽです。ソースは閉じます。これは実は外部のブログから表示をさせています。試しにこの記事を1つクリックしてみましょう。クリックすると実は URL 欄を見ると分かるのですがtravelidea2014.wordpress.comということでwordpress.com という無料ブログになります。完全に別のサイトからこの更新情報をここに表示させている。連携をさせているということになっています。この仕組みを学んでいきましょう。それではフォルダーに戻ってfeed_beginfeed_begin のフォルダーをSublime Text に落として開きます。 そして index.html を開きましょう。そして html をスクロールさせます。まず最初の準備としてはこちらにはまだニュースの情報がすべて普通の HTML で記述されています。なのでこの dl の要素の中身を空っぽにしてしまいましょう。dl タグ1つだけを残してdt と dd は全て消去しました。そして dl に予めid="feed" という風にid 属性を設定しておきます。そして少しスクロールをしてJavaScript を使って表示していきたいと思いますがそのコピーペーストをするJavaScript を探しに行きましょう。Google Chrome に切り替えます。そして検索をしたいと思います。google feed という2つの単語を入力して検索をします。検索をすると Google Feed APIというもんが出てきますので1番上のこのアドレスをクリックします。クリックすると開発者向けのサイトに飛びます。こちらの Feed API というナビゲーションがここにあるのでその中から Developer's Guide をクリックしましょう。クリックすると使い方がここに載っています。 単純にこのソースをコピーアンドペーストするだけでも試せますが今回は script という場所に注目をしましょう。まず API を使うためにはその API を読み込むためのこの1行が必要になるのでこの部分だけをコピーしてSublime Text に戻ります。コピーをしたら js なのでこの辺のどこでも構いません。改行してこの辺にペーストをしておきたいと思います。script タグでそして読込先は google.com からjsapi を読み込んでおきます。そしてもう1つ JavaScript が必要になりますが実は js フォルダーの中にfeed.js というものをすでに用意してあるのでこちらを外部ファイルとして読み込んでおきたいと思います。なので script タグを1セット作ってscript タグの開始の内側にソースを指定しておきます。js フォルダーの中のfeed.js を読み込みます。この2行でまず使う準備は完了です。一度上書き保存をしておきましょう。そして feed.js の中身を見てみたいのでfeed.js をダブルクリックで開きます。このような内容になっています。これは feed を使う準備ができた後はどのブログから feed 情報を取得してそして何件記述を持ってきてそして日付の表示は年を付けるとかスラッシュで区切るとか設定してそして吐き出されるソースをこのように成型したりリンクを元記事に貼ったり、貼らなかったりということを選択する事が可能です。 そしてまず feed というのが1番大事です。feed の URL の取得を学びましょう。まずは Google Chrome に切り替えます。そして先程開いた、この wordpress.com のブログのサイトを開いたらこちらのサイトの左下にこういったアイコンがあります。色んなブログサービスの中にもこのような feed のアイコンが大抵は付いていると思います。そしてこの feed アイコンを一度左クリックしてみましょう。そうするとこのような URL に変わってそしてこのようなコードの羅列が現れました。これが実はブログの記事の情報、つまり中身だけを吐き出しているURL です。なのでこのURL バーのアドレスをコピー。コピーを取ったらSublime Text に戻ってフィードの読み込みというエリアのfeed という所にペーストをします。それではこの feed という文字を消してしまいましょう。そしてこちらにコピーしてきたフィードの URL を入力したら最後のスラッシュを消してそしてクエスチョンマークを入れておきます。feed? としておきます。このように入力をしたら上書き保存をしてindex.html にフォーカスをしたら右クリックから Open in Browser で確認をしてみましょう。 そしてスクロールをしてニュース情報が無事に読み込まれているかを確認しました。これはリアルタイムにこのブログの更新情報を拾ってきますのでこのブログの管理画面にログインをして何か情報を入力すればすぐにこの HTML のトップページに更新が反映されることになります。なのでサイトのデザインとこのコンテンツの管理を別で持てるといった仕組みを持たせることも可能です。また、このリンク先を表示させたくないという場合であればSublime Text に切り替えてfeed の js のこの吐き出されるタグでa タグの部分ですね。a タグの部分だけをこのように切り取ってしまいます。entry.link なども切り取ってしまいましょう。そして a タグの閉じタグも切り取ります。このようにシンプルな見た目にしました。そして上書き保存をしてブラウザーで表示をしてみましょう。更新。少し待つとフィードの情報が読み込まれますがこれでリンクは貼られなくなりましたのでどこから情報を取得しているかはクリックするだけでは分からないということになりました。このようにフィードの API を使うと他のブログからでもフィード情報を取得することができるのでコンテンツの管理が楽になると思います。 このレッスンではGoogle Feed API を使って外部の更新情報を読み込むということを学びました。

jQuery APIでWebサイトを演出しよう

jQueryはJavaScriptを効率良く記述することができる、世界中で広く使われているライブラリです。APIとは外部のウェブサービスを自分のサイト内で利用できる仕組みのことです。このコースではjQueryやAPIの基本を学習したのち、jQueryのプラグインやGoogle APIなどの実践的な使い方について学びます。

2時間43分 (22 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年05月29日

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

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

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