imedioハンズオンセミナー用のコード

■ Youtube API

リファレンス
https://developers.google.com/youtube/iframe_api_reference

[手順]
1.APIを読み込む

<script src="https://www.youtube.com/iframe_api"></script>

2.ビデオが挿入されるブロックの作成

<div id="movie-content">ビデオの読みこみ中...</div>
<div id="player"></div>

3.JavaScriptが読み込み完了すると、下記関数が呼び出される

function onYouTubeIframeAPIReady() { }

4.Playerのインスタンスを起動

player = new YT.Player(
        'player', // 埋め込む場所の指定
        {
            videoId: '-THpgvRFkQ8', // YouTubeのID
            width: 1080, // プレーヤーの幅
          	height: 600, // プレーヤーの高さ
            playerVars: {
                loop: 1,//0:ループしない 1:ループする 1の場合playlist設定必須
                playlist: 'JN-bmtN9OjA',//次に流すYoutubeのID
                autoplay: 1, //オートプレイ
                controls: 1, //コントローラー無し
                showinfo: 0, //動画タイトルなど表示しない
        		theme: "light" // テーマの選択（dark|light）

            },
            events: {
                'onReady': onPlayerReady
            }
        }
    );

5.プレイヤーの準備が整ったら
https://developers.google.com/youtube/iframe_api_reference?hl=ja#Playback_controls

function onPlayerReady(event) {

	// ビデオの再生
	event.target.playVideo();
	// ミュートにする
	event.target.mute();
}

6.デバイス情報取得

var getDevice = (function(){
    var ua = navigator.userAgent;
    if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){
        return 'sp';
    }else if(ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0){
        return 'tab';
    }else{
        return 'other';
    }
})();

7.ビデオの読み込み中をプレイヤーの準備ができたら消す

■ Web Speech API

リファレンス
https://developer.mozilla.org/ja/docs/Web/API/Web_Speech_API

1.入力フォーム作成

<input type="text" name="test" value="" id="searchbox">

2.アイコン
Font Awesomeを使います
http://shared-blog.kddi-web.com/sandbox/fa.zip

<link rel="stylesheet" type="text/css" href="./css/fa/css/font-awesome.min.css">
<i onClick="record()" class="fa fa-microphone fa-2x" id="recb"></i>

3.ブラウザ判定

// Chromeブラウザかどうか判定する
var ua = window.navigator.userAgent.toLowerCase();
if (ua.indexOf('chrome')!== -1){
	// Cromeの場合
	console.log('Chromeです')
}else{
	// Chrome以外の場合
	console.log('Chrome以外です')
}

4.Chrome以外はマイクアイコンを消す

// グローバル変数にマイクボタンを挿入
var MICBTN = document.getElementById('recb');
if (ua.indexOf('chrome')!== -1){
	// Cromeの場合

}else{
	// Chrome以外の場合
	MICBTN.style.display = 'none';
}

5.Speech APIのインスタンスを起動

// Speech APIのインスタンス起動
window.SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition;
var recognition = new webkitSpeechRecognition();
// 言語設定
recognition.lang = 'ja';

6.録音開始

// 録音開始
function record(){
	recognition.start();
	MICBTN.style.color = 'red';
}

7.録音終了トリガー

// 録音終了時トリガー
recognition.addEventListener('result', function(event){
	// 録音した音声を「text」変数に代入
	var text = event.results.item(0).item(0).transcript;
	// テキストボックスに録音したテキストを挿入
	var textBox = document.getElementById('searchbox');
	textBox.value = text;
}, false);

8.Web Speechの終了

recognition.onend = function() {
	// マイクを黒に戻す
	MICBTN.style.color = 'black';
}

■ Fetch API

リファレンス
https://developer.mozilla.org/ja/docs/Web/API/Fetch_API
Polifil
https://github.com/github/fetch

1.Fetch APIを使いJSONファイルを取得する

// Fetch APIを使い、指定のJSONファイルを取得
// RESTサーバーからJSONデータ取得
fetch( 'http://chps1888.route-server.jp/rest/v1/list/user' )
  .then( function ( data ) {
      if(data.ok) {
        return data.json();
      }else{
        // データ取得がNGの場合の処理
        console.log('Network response was not ok.');
      }
  })
  .then( function ( json ) {
    if(json) {  
        console.log(json);
    }else{
        // JSONデータがnullの場合
        console.log('Broken json data.');
    }
  })

2.JSONを挿入するブロックの用意

<span id="error"></span>
<div id="json"></div>

3.JSONデータを処理する

var returnHtml = '<h1>' + json[0].field_name + '</h1>';
var textBlock = document.getElementById('json');
textBlock.innerHTML = returnHtml;