このレッスンはアーカイブされました
このレッスンは視聴可能ですが、質問の受付や内容の更新は終了しております。
-
#01 開発の準備をしていこう (02:48)
- 完成版のデモ
- 必要となる知識
- 必要となるツール
- ひな形ファイルの作成
-
#02 画面を作りこんでいこう (1) (02:58)
- 画面の作成
- jQueryの読み込み
-
#03 画面を作りこんでいこう (2) (03:00)
- スタイリング
- JavaScriptの読み込み
- YouTube APIの紹介
-
#04 YouTube APIを使ってみよう (02:51)
- APIにアクセスする準備
-
#05 Ajaxで検索結果を取得してみよう (02:59)
- Ajaxアクセスの設定
- 検索結果の取得・確認
-
#06 検索結果からリストを作っていこう (02:56)
- li要素の生成
-
#07 検索結果を綺麗に表示させてみよう (02:48)
- 動作確認
- エンコーディングの確認
- リストのスタイリング
-
#08 Player APIを使ってみよう (02:36)
- Player APIの紹介
- プレイヤーの設置
-
#09 動画を再生してみよう (02:36)
- イベントの設定
- 動作確認
-
#10 複数の動画を選択できるようにしよう (02:42)
- 動画の選択処理
- 再生処理の実装
-
#11 再生処理を作りこんでいこう (02:45)
- 動画再生処理の実装
-
#12 動画のコントロールを実装していこう (02:45)
- 一時停止
- 次の動画
- 前の動画
-
#13 連続再生できるようにしよう (02:55)
- 動作確認
- 連続再生処理の実装
-
#14 ユーザビリティを高めよう (02:34)
- 動作確認
- フォーカスの設定
- フォームの設定
#04 YouTube APIを使ってみよう
補足情報 YouTube Data API v2 はサービスを終了しました
・API Reference | YouTube Data API (v3) | Google Developers
https://developers.google.com/youtube/v3/docs/?hl=ja
補足情報 公式サイトについて
https://developers.google.com/youtube/
また検索時のAPIパラメータの一覧はこちらです。
https://developers.google.com/youtube/2.0/developers_guide_protocol_api_query_parameters
慣れてきたらパラメータの値を変更したり、他のパラメータを使ったりするところからプログラミングのスキルアップをしていきましょう。
#05 Ajaxで検索結果を取得してみよう
補足情報 JSONPで実装するには？
$.ajax({ url: url, data: options, dataType: 'jsonp', success: function(rs) { // ここの関数の内容は $.get のコールバック関数と同じでok } });IEなどで動作しない場合もこの方法なら動きますので、試してみてください。
補足情報 Ajaxのドメイン制限について
これはAjaxで利用される XMLHttpRequest が、異なるドメイン間の通信(クロスドメイン通信)を許可されていないためです。
もし他のWebサービスのAPIを試してデータが取得できず、コンソールに「XMLHttpRequest cannot load ... Origin ... is not allowed by Access-Control-Allow-Origin.」のようなエラーが出た場合はそれに該当します。
その場合は JSONP という代替手段を利用する必要があります。
#08 Player APIを使ってみよう
補足情報 APIの仕様変更について
また、index.htmlで読み込んでいる http://www.youtube.com/player_api も http://www.youtube.com/iframe_api に変更されていますが、どちらでも動作します。
https://developers.google.com/youtube/iframe_api_reference?hl=ja#Revision_History