【HTML5認定試験Level.1】part5 APIの基礎知識①
今回はAPIの基礎知識に着手します。
HTML5認定試験の試験範囲は以下の通りです。
- 要素 主にHTMLを構成するタグやタグに設定可能な属性について
- CSS ウェブサイトの見た目を設定するCSSの設定方法など
- レスポンシブWEBデザイン
スマホ、タブレットなど様々なデバイスでのレイアウトの設定方法 - APIの基礎知識
APIを用いて様々なコンテンツ（音楽、動画、位置情報、ブラウザ間の通信）を作成する - Webの基礎知識 HTTP、HTTPSプロトコルの基礎知識、その他WEBの関連技術
勉強に使用したテキストは以下です。
HTML5プロフェッショナル認定試験 レベル1 対策テキスト＆問題集 Ver2.0対応版
- 作者: 大藤幹,鈴木雅貴
- 出版社/メーカー: マイナビ出版
- 発売日: 2017/07/26
- メディア: Kindle版
- この商品を含むブログを見る
覚えることはそこまで多くないのですが重要な単元だと思います。
どのようなAPIが公開されているのかを知っておけば今後のWEBサイトを
作るときに生きてくるはずです。
どんなAPIが公開されているの？
テキストの範囲だと大きく分けて以下の４つになります。
１．マルチメディアグラフィックスAPI
３．オフラインストレージAPI
４．通信系API
マルチメディアグラフィックスAPIについて
HTML5で追加されたaudio要素、video要素により簡単にマルチメディアコンテンツを
埋め込むことが可能になりました。マルチメディアコンテンツに対してJavascriptを使
って制御することが可能です。以降紹介するのもJavascriptのAPIが主になります。
話は変わりますが皆さんは動画サイトを利用していますでしょうか？
PCなら問題ありませんがスマートフォンなどのモバイルデバイスの場合は
通信速度が安定しておらず動画のダウンロードに時間がかかる場合があります。
上記のような通信が安定しない場合に合わせて低画質のファイルを選択しスムーズな
ストリーミング再生を実現する技術をAdaptiveStreaming技術と呼びます。
HLS(HTTP Live Streaming)、MPEG-DASHを挙げており
知識レベルで問う問題が出題されています。
↓ MPEG-DASH に関する記事がありましたので気になる方はcheck !
JavascriptのAPIについてもストリーミングに対応したものが登場しており
MSE（Media Source Extensions） もその一つです。
本来であればこれを使うサンプルのソースを書きたかったのですが
筆者はまだJavascriptを実装したことが無くハードルが高かったので
今回は諦めました。また暗号で保護されたコンテンツをストリーミング再生する
DRM（Digital Rights Management） というものもあります。
MSEとDRMについても知識レベルで問う問題が試験に出題されます。
Javascriptを使って画像を描画するCanvas要素についても
試験の出題範囲となっています。
試しにCanvasで画像を描画してみました。
実装は以下になります。
/* Canvas要素を生成 */
<div><canvas id="can1" width="200" height="200"></canvas></div>
/* ここからJavascriptを実装 */
<script type="text/javascript">
var can = document.getElementById("can1").getContext("2d");
can.beginPath(); /* パスを初期化 */
can.fillStyle = "black"; /* 図形の塗りつぶしの色を黒に指定 */
can.arc(100, 100, 100, 0, Math.PI * 2,false); /* 円を描くようパスを設定 */
can.stroke(); /* 設定したパスで描画を実行 */
can.fill(); /* 図形の塗りつぶしを実行 */
</script>
Javascriptで画像の表示が可能となりました。この辺がHTML5ならではの
処理だそうです。（HTML4までは画像ファイルを別途用意して表示していたそうです）
さいごに
APIを使いこなすことが出来れば様々なコンテンツを作成できそうです。
他のAPIについては次回以降の記事に載せます。以上です。
