マルチメディア技術が進化した「HTML5」の学び方とWebRTCを活用したアプリ開発方法とは？

「HTML5」は、2008年から規格の元となる草案が作成され始め、2014年10月に勧告されましたが、「これまでのHTML規格と具体的に何が違うのか？」という視点から解説をしていきたいと思います。

HTML5の前規格である「HTML4.01」が勧告されたのが1999年。

今回のHTML5は実に15年ぶりの新規格の誕生となりました。

HTML5の中でも、一際目を惹くのが「マルチメディア」関連の項目です。

HTML5のマルチメディア関連タグ

「video」タグ

動画を表示できるタグやJavascriptを利用してスマートフォンなどに搭載されているセンサーを利用できるなど、数多くのマルチメディアに関する仕様があります。

<video src="Video ファイルリソース" controls></video>

「control」属性は、VideoUIを表示するための属性ですが、他にも「自動再生」ができる属性や、「ループ再生」を指定できる属性もあります。

src属性
→ビデオファイルなどのリソースファイル
crossorigin属性
→異なるオリジンから画像などを利用する
preload属性
→事前にリソースファイルを読み込む
autoplay属性
→ロードしたファイルの自動再生を行う
loop属性
→ループ再生を行う
muted属性
→音をミュートして再生を行う
control属性
→Video UIを表示する
width属性
→ビデオの横幅を指定
height属性
→ビデオの縦幅を指定

Youtubeなどの動画公開サービスでは、動画を埋め込むタグを自動生成してくれたりしますが、サービスが止まってしまったり、メンテナンスに入ってしまうと動画を閲覧することができなくなってしまうため、自身のサーバーの動画ファイルをWebサイト上で再生したい場合にも利用できます。

「audio」タグ

自身で作曲した曲を公開したり、トークの内容を録音して公開したりと音声や楽曲の公開をしている人も増えてきて、オーディオを活用したWebサイトも増えてきました。

HTML5にもWebコンテンツにオーディオを埋め込むタグが用意されていて、

<audio src="Audio ファイルリソース" controls></audio>

Audioタグの属性は、Videoタグと同様のものが使用できますので、前掲のVideoタグの属性を参照してください。

双方向コミュニケーションが可能な「WebRTC技術」とは？

外部プラグインが無くても、ボイス・ビデオチャットやファイル転送できる技術が「WebRTC」です。

RTCとは「Real Time Communication」のことで、Google Chrome・FireFox・Opera・Android・iOSなどがサポートされています。

W3CでもWebRTCに関するドラフトで、特定ブラウザで試験実装を行うなど、積極的にWebRTCの実装に取り組んでいた様子が伺えます。

一から実装を行うと大変なのもWebRTCですが、最近では簡単にWebRTCを組み込めるプラットフォームも誕生しています。

SkyWay ― WebRTCを簡単＆柔軟に使えるプラットフォーム

WebRTCは、ブラウザや専用アプリ同士でリアルタイムに映像、音声、データを送受信できる画期的な新技術です。SkyWayを使えば、サーバを準備することなく簡単に、WebRTCを使ったアプリが開発できます。

新しい技術がどんどん開発されているのですが、この技術を活かして「何を作るのか？」がこれからの楽しみな部分でもあります。

家族限定などのクローズドSNSの中にビデオチャット機能を追加したり、子供がお母さんとだけしか会話できない「ママチャット」的なプロダクトも出てくるかもしれません。

HTML5でできることはまだまだ広がっていきそうですが、HTML5を使用するクリエイターが増えていかないと裾野が広がっていかないのではないかなと思っています。

自分に合った学習法を見つける！HTML5の学習方法とは？

HTML5を学ぶ方法はかなりたくさんありますが、自分に合った学習法はなかなか見つかりづらいもの。

いくつかの事例を見ながら、ぜひ自分に合った学習法を見つけてみてください(＾＾)

独習で学ぶ方法として、学習サイトを見ながら学ぶという方法がありますが、Webサイトのテキストを読み解きながら学ぶ方法や学習動画を見ながら学ぶ方法などがあります。

テキストで学べるサイトでは、

→「★HTML5リファレンス」

→「HTML5入門」

→「HTML5入門編」

などがありますが、テキストを読むだけではよくわからないという声も多く聞きます。

そういう方は動画を利用してHTML5を学ぶこともできます。

ドットインストール

3分動画でマスターする初心者向けプログラミング学習サイトです。HTML, CSS, JavaScript, PHP, Rubyをはじめ、iPhoneやAndroidアプリの作り方も学べます。豊富な無料動画を見ることで、はじめての人でも無理なくスキルを身につけていくことができます

動画が20本以上も用意されているので、動画を見ながら実際にコードを書いて学ぶと理解もしやすいと思います♪

でも、動画を見ていても聞きたいことが出てきたり、わからないことが出てくることもあります。

そういう場合は、プログラミングスクールを選択する方法もあります。

「わからないことを先生に聞ける」というのが、メリットなのですが、通学が必要だったり学費がかかることもあり、これまでの学習方法に比べると敷居が高くなっていますが、「自分の意志しだいで確実に身に付く」というメリットがあります。

主なプログラミングスクールでは、

プログラミング学ぶならオンライン家庭教師のCodeCamp

現役エンジニアによる質の高いマンツーマンレッスンが毎日24時まで受講可能。無料体験レッスンも受付中です。プログラミングを学ぶなら、オンライン個別指導No.1のプログラミングスクール【CodeCamp】。

プログラミング学習で、もう挫折しない。パーソナルメンターがつくオンラインブートキャンプ

未経験からプロを育てるオンラインブートキャンプ | TechAcademy [テックアカデミー]

→「パソコンスクールWin | 仕事と資格に強いパソコン教室。全国展開」

TECH::CAMP(テックキャンプ) - プロを育てるプログラミングキャンプ

TECH::CAMP(テックキャンプ)は、プロのエンジニアを育てるプログラミングキャンプです。

PHP, HTML, Linux 講座 : セミナー＆スクール | アシアル株式会社

アシアルが提供するプログラミング講座では、PHP, HTML5などをテーマに、最先端の技術やWeb開発の実践的なノウハウを提供します。講師は第一線のエンジニアや豊富なマネージャーが務めます。

HTML5＆CSS3講座｜Webデザインならヒューマンアカデミー

WebデザインならヒューマンアカデミーのWebスクールへ。最新のHTML5とCSS3について基礎から学ぶコースです。HTML5やCSS3で作られたサイトも日々増加し、今後Web制作のスタンダードな技術として、Webデザイナーに必須のスキルとして求められるようになります。HTMLやCSSを習得済みの方は、いち早く準備しておくことをおすすめします。

自宅の近くにプログラミングスクールがあるなら通学できる学校を探したり、近くに無ければCodeCampなどのオンラインで学べるプログラミングスクールを選ぶという方法もあります。

Web制作を学ぶには「HTML/CSS」は避けては通れない必須の技術ですので、自分のペースで学べる方法を探してみて欲しいなと思います(＾＾)

一度自分で勉強したい人は市販の学習書籍を見てみるのもオススメです♪

「HTML/CSS」学習書籍

HOMEへ