Webデザイナー向けのHTML5。 パート3：マルチメディア

Webデザイナー向けのHTML5

1. マークアップ言語の簡単な歴史
2. HTML5モデル
3. マルチメディア
4. フォーム2.0
5. 意味論
6. HTML5と現在の状態

世界規模のネットワークの歴史において、新しいレベルの開発への移行の次のすべてのラウンドは、技術革新から始まりました。 img要素がHTMLに追加されると、これによりネットワークの外観が根本的に変わりました。 次に、JavaScriptを導入すると、JavaScriptがより動的でインタラクティブになりました。 Ajaxは少し遅れて登場し、ネットワーク上に本格的なアプリケーションを作成する機会が開かれました。



最新のWeb標準は非常に高度であるため、HTML、CSS、およびJavaScriptの機能のみを使用してほぼすべてのものを作成できます。 ほとんど何でも。



これらの標準の仕様にはまだギャップがあります。 そのため、テキストと写真でページを積み上げたい場合は、HTMLとCSSを完全に管理します。 ただし、オーディオまたはビデオを公開する必要がある場合は、必然的にサードパーティのテクノロジであるFlashまたはSilverlightを使用する必要があります。



これらのテクノロジーは、ネットワークの「穴」を埋める「プラグ」などの「プラグイン」です。 ゲーム、映画、音楽をオンラインで公開するのは比較的簡単ですが、公開されておらず、民間企業によって所有および管理されています。 はい、同じFlashは強力なツールですが、そのアプリケーションは悪の勢力との取引にある程度似ています。別の方法では利用できない新しい機会を得ますが、見返りに独立性の一部を失います。



HTML5はこの欠点を補うことを目的としています。 現在、彼はFlashやSilverlightなどの独自技術と直接競合しています。この戦いでの主な利点は、マルチメディア機能がブラウザに組み込まれているため、プラグインが不要なことです。

キャンバス

Mosaicブラウザにページに画像を挿入する機会が現れたとき、これはネットワークに強力な前進をもたらしました。 しかし今まで、写真は静止したままです。 はい、アニメーションGIFを作成し、JSを使用してその場で写真のスタイルを更新し、サーバー側でそれらを生成できます。 しかし、いずれにせよ-画像がブラウザで開かれるとすぐに、その内容を変更することはできません。



そして、動的にサイズ変更可能な画像を作成するために設計されたcanvas要素があります 。



それ自体は非常に簡単です。 タグパラメータで指定するのは、キャンバスの寸法のみです。

<canvas id="my-first-canvas" width="360" height="240"></canvas>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ご覧のとおり、このタグはペアになっています。 ただし、その中に配置するのは、この要素をサポートしていないブラウザーのみを対象としています。

 <canvas id="my-first-canvas" width="360" height="240"> <p>No canvas support? Have an old-fashioned image instead:</p> <img src="puppy.jpg" alt="a cute puppy"> </canvas>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

非ブラウザーユーザー

キャンバスにかわいい子犬の写真が表示されます。

すべてのレンダリング作業はJavaScriptで行われます。 まず最初に、どの要素をどのコンテキストで使用するかを指定する必要があります。 この場合の「コンテキスト」はAPIであり、今日では1つだけです-2次元（ご覧のとおり、成長の余地があります）：

 var canvas = document.getElementById('my-first-canvas'); var context = canvas.getContext('2d');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、HTML5仕様で文書化された APIを使用して、この2次元キャンバスにcanvas要素の描画を開始できます。 ここのツールボックスは、Illustratorのようなグラフィックエディターにあるもの、ライン、塗りつぶし、グラデーション、シャドウ、シェイプ、ベジェ曲線に似ています。 唯一の違いは、マウスで描画する代わりに、JavaScriptのコマンドを使用する必要があることです。

コード描画

そのため、線の色は赤に変わります。

 context.strokeStyle = '#990000';
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、描画したものはすべて赤いストロークになります。 たとえば、長方形を作成するための構文は次のようになります。

 strokeRect ( left, top, width, height )
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この長方形を高さ50ピクセル、幅100に設定し、 キャンバス要素の左端から20ピクセル、上から30ピクセルの位置に配置する場合は、次のように記述します。

 context.strokeRect(20,30,100,50);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

キャンバスで JSコマンドによって描画された長方形。

もちろん、これは基本的な例です。 2次元APIには、fillStyle、fillRect、lineWidth、shadowColorなど、さまざまなメソッドが含まれています。



理論的には、同じIllustratorで作成できる画像はすべて、 canvas要素を使用してまったく同じ方法で作成できます。 ただし、実際には、これには非常に時間がかかり、大量のコードが生成されます。 一方、これは、 canvasが発明されたものではありません。

そして、なぜですか？ それの使用は何ですか？

JavaScriptとcanvasを使用して、その場でベクター画像を作成できるのは素晴らしいことですが、より複雑にした場合、この作業自体は正当化されません。



キャンバスの意味と主な機能は、ユーザーのアクションに応じて新しい要素をレンダリングすることにより、そのコンテンツを動的に更新できることです。 ページ訪問者によって開始されたイベントに応答するこの機能により、以前はFlashなどのサードパーティテクノロジーを使用する必要があったツールやゲームを作成できます。



キャンバス機能の最初の例の1つは、Mozilla LabsのBespinプロジェクトでした。これは、ブラウザウィンドウで機能するコーディング用のシンプルなテキストエディタであるアプリケーションです。

canvas要素を使用して作成されたBespin Webアプリケーション 。

これは非常に強力なことです。 彼女は印象的です。 しかし、また、彼女はキャンバスで何をしてはいけないかの良い例です。

アクセスが拒否されました

テキストエディターは、本質的には、テキストを操作するように設計されています。 Bespinは、 canvas要素内のテキストで正常に機能しますが、1つ注意があります-これはテキストではありません。 これは、それに似たベクターシェイプのセットです。



ネットワーク上の各ページは、DOM-Document Object Model、「Document Object Model」を使用して説明できます。 DOMには多くの異なる「ノード」を含めることができますが、最も重要なものは要素、属性、テキストオブジェクトです。 これら3つのタイプの「ブリック」は、想像できるほぼすべてのページを構築するのに十分です。 同様に、 canvasエレメントにはDOMがありません。そのコンテンツを個別の部分に分割して、ノードのツリーとして表示することはできません。



同様のタスクのためのスクリーンリーダーおよびその他の技術は、ドキュメントの構造と意味を理解するDOM分析の能力に基づいています。 DOMなし-アクセスなし。



このキャンバスの 「分離」は、HTML5にとって大きな問題です。 幸いなことに、一部の賢い人々が彼女の決定に取り組んでいます。 この点は非常に重大なので、私はプロセスを急ぎたくはありませんが、同時に、残りの仕様の開発を遅くしたくありません。

スマートキャンバス

上記に基づいて、現時点ではWebデザイナーが自分のプロジェクトにキャンバスを適用する意味がないと想定できます。 そうではありません。



私のサイトでJavaScriptを使用するとき、それはさらなる改善の唯一の役割を持っています。 無効にした訪問者は、おそらく特定の二次的なアメニティを除いて、情報へのアクセスを拒否されません。 「控えめなJavaScript」と呼ばれるこのようなマルチレベルのアプローチは、 canvasにも適用できます 。 新しいコンテンツを作成する代わりに、すでに利用可能なコンテンツをより適切に表示するために使用されます。



ある種のデータを含むテーブルがあるとします。 それらで観察された傾向をグラフで説明します。 データが静的な場合-たとえば、Google Chart APIを使用して単純にグラフ画像を生成できます。 しかし、途中でデータを変更できる場合は、変更を考慮に入れて新しいグラフが作成されるたびにレンダリングされるグラフを作成することをお勧めします。 ここでCanvasは完璧です-JavaScriptを使用して、 table要素のコンテンツを抽出し、それに基づいて数学的に計算された図を作成できます。



ちなみに、Filament Groupの賢い人たちも、そのためのjQueryプラグインを開発しました。

キャンバスを使用して生成されたグラフの例

別のオプションがあります。 実際、動的な画像を生成するためのAPIはcanvas要素だけではありません。 SVG-スケーラブルベクターグラフィックス、スケーラブルベクターグラフィックス-canvasと同じ形状を記述するために使用できるXML形式。 また、XMLの本質に基づいて、SVGコンテンツはスクリーンリーダーによって理論的に「理解」されます。



しかし実際には、SVGは開発者に特別な印象を与えませんでした。canvasは最近登場しましたが、利用可能なブラウザーですでに広くサポートされています。 その機能は、追加のJavaScriptライブラリの助けを借りて、IEに実装されています 。



「踏まれた道を橋渡しする」と「車輪を再発明しない」というWHATWGのスローガンを考えると、同様のSVGテクノロジーがすでに存在する場合に、HTML5にキャンバスを含めることを選択したのは奇妙に思えるかもしれません。 これが頻繁に起こるように、HTML5仕様は実際には、ブラウザーで既にサポートされているものの多くのみを文書化しています。 Canvasは HTML5用に発明されたものではありません。Safariで初めて登場し、Appleによって作成されました。 他のブラウザの開発者はこのアイデアを見て、気に入ってコピーされました。



少し体系的で混乱しているように見えるかもしれませんが、実際には、多くの標準が生まれています。 前世紀の終わりにMicrosoft Internet Explorer 5で最初に実装された、少なくともAjaxの基礎となるXMLHttpRequestオブジェクトを取得します。



適者が生き残っているブラウザの世界では、 canvasは現在、力と人気を獲得しています。 外部からアクセスできるように「オープン」になると、その位置はしっかりと固定されます。

音声

私の最初のサイトは、私が参加した音楽グループのページで、訪問者がそこから直接私たちの歌を聴けるようにしたかったです。 この機会を実現するために、私は利用可能なフォーマットとプレーヤーを調査することになりました。 QuickTime、Windows Media Player、Real Audio-それぞれがどれほど人気が​​あり、クロスプラットフォームであるかを考えるのに時間がかかりすぎました。



これらの過渡期に、MP3は最終的に最も一般的な音楽形式のタイトルで勝利を収めました。 ただし、訪問者がページからサウンドファイルを簡単に聴くことができるようにするには、サードパーティの技術を使用する必要があります。 ここでの勝者は明らかにFlashです。



そして今、HTML5はこのタイトルを彼から取り除くつもりです。



HTML5のページにオーディオファイルを挿入するのは簡単です。

 <audio src="witchitalineman.mp3"> </audio>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

しかし、それは単純すぎます。 おそらくもう少し機能が必要になります。



世界には、世界中のネットワークとそのすべてのユーザーを憎むような悪人がいるとします。 このような人は、自動的に再生を開始するページにオーディオファイルを挿入するのは非常に無礼で愚かなことを気にしません。 自動再生パラメータは彼にアピールします。

 <audio src="witchitalineman.mp3" autoplay> </audio>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そのような目的で自動再生を使用していることがわかった場合、会議で慈悲深くなることを期待しないでください。



このパラメーターは重要ではないことに注意してください。 ある意味では-単独で使用されます。 この種の部分は、最高の数学者ジョージ・ブールに敬意を表して、 ブールパラメータと呼ばれます 。 すべてのコンピューターシステムは、彼が開発したバイナリロジックに基づいており、変数の基本値は常に0または1、trueまたはfalseです。



ただし、 ブール値パラメーターをブール値と混同しないでください。 ブール値パラメーターがtrueまたはfalseでなければならないことを考えるのは許されますが、 そうではありません。 その存在の本質はすでにブール、つまりバイナリです。存在するか（ true ）、まったく存在しないか（ false ）です。 そのような属性に値を追加しても効果はありません。autoplay= "false"またはautoplay = "no thanks"はautoplayと同じです。



XHTML構文のみを使用する場合、 自動再生= "autoplay"になります。 冗長部門の国際部門によって承認されました。



オーディオファイルの自動再生では十分でないと思われる場合は、別のブール値パラメーターloopを追加することもできます 。これは、サウンドをループし、拷問を無限にします。

 <audio src="witchitalineman.mp3" autoplay loop> </audio>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これらのオプションの組み合わせは、あなたが私に会ったときに生き続ける可能性をさらに減らします。

すべてが制御されている

しかし、 オーディオ要素の使用方法に移りましょう。 再生を制御する機能を追加することは論理的であり、これはブールパラメータcontrolsを使用して簡単に実行できます 。

 <audio src="witchitalineman.mp3" controls> </audio>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

再生一時停止ボタンと音量コントロールの標準ブラウザコントロールの表示を有効にします。

controlsは、ブラウザベースのネイティブ再生コントロールインターフェイスを表示します

ブラウザで定義されたコントロールのスタイルが気に入らない場合は、好みに合わせてカスタマイズできます。 JavaScriptを使用して、オーディオAPIにアクセスできます。このAPIは、 playメソッドとpauseメソッド、およびvolumeプロパティへのアクセスを提供します。 ボタン要素とタグ内の見苦しいイベントハンドラーを使用したこのようなカスタマイズの大まかな例を次に示します。

 <audio id="player" src="witchitalineman.mp3"> </audio> <div> <button onclick="document.getElementById('player').play()"> Play </button> <button onclick="document.getElementById('player').pause()"> Pause </button> <button onclick="document.getElementById('player').volume += 0.1"> Volume Up </button> <button onclick="document.getElementById('player').volume -= 0.1"> Volume Down </button> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ボタン要素を使用して作成されたカスタムコントロール。

バッファリング

しばらくの間、HTML5仕様には別のブール型パラメーターautobufferが含まれていました 。 これは卑劣な自動再生よりもはるかに丁寧で便利でした-オーディオファイルはすぐに再生を開始するべきではありませんが、遅かれ早かれ開始されるとすぐにバックグラウンドでリロードする必要があることをブラウザに伝えました。



これは非常に便利なオプションですが、残念ながらSafariはさらに進化しました。 このブラウザは、 autobufferを無視して、オーディオファイルのプリロードを開始しました 。 そして-覚えている- オートバッファはブール値パラメータなので、それを使用してプリロードを禁止することはできません： autobuffer = "false"は、一般的な値と同様にautobuffer = "true"と同じです（ バグの説明 ）。



そのため、 自動バッファは preloadパラメータに置き換えられました。 ブール値ではなく、次の3つの値のいずれかを取ります： none 、 auto、およびmetadata 。 preload = "none"を使用して、このファイルをリロードする必要がないことをブラウザに明示的に伝えます。

 <audio src="witchitalineman.mp3" controls preload="none"> </audio>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ページごとにオーディオ要素が1つしかない場合、 preload =“ auto”は正当化され論理的です。 ただし、それらが複数ある場合は、最速および/または無制限のインターネットで訪問者を怒らせないように、これを行うべきではありません。

私は「縁石」を歌います、あなたは「縁石」を歌います

オーディオ要素はすべてにおいて完璧なようです。 明らかにどこかにキャッチがあります。 残念ながら、これはそうですが、要素自体の仕様ではなく、オーディオ形式の場合です。



現在、MP3が最も一般的ですが、この形式は公開されていません。 彼と仕事をする機会を得るには、一定の金額を特許権者に支払う必要があります。 AppleやAdobeなどの大企業にとって、これは中小企業やオープンソースグループとは異なり、明らかに問題ではありません。 これがMP3がSafariでうまく機能する理由ですが、Firefoxでは再生されません。



もちろん、他の形式もあります。 たとえば、Vorbisコーデック（通常は出力として.oggファイルを生成します）は、特許に邪魔されません。 これはFirefoxで機能しますが、Safariではサポートされていません。



幸いなことに、特定の1つの形式だけを優先して残酷な選択をする必要はありません。 <audio>タグのsrcパラメーターの代わりに、さまざまなファイルに対して、それに含まれるいくつかのソース要素を使用できます。

 <audio controls> <source src="witchitalineman.ogg"> <source src="witchitalineman.mp3"> </audio>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Ogg Vorbis対応のブラウザーは最初のファイルを選択し、それ以上先に進みません。 MP3を再生できるが、Oggを理解しないブラウザーは、最初のファイルをスキップして2番目のファイルをロードします。



各ファイルのmime-typeを指定することにより、選択を支援できます。

 <audio controls> <source src="witchitalineman.ogg" type="audio/ogg"> <source src="witchitalineman.mp3" type="audio/mpeg"> </audio>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ソース要素は単一の非コンテナ要素であるため、XHTML構文を使用する場合は、スラッシュでタグを閉じる必要があります： <source /> 。

それほど才能がない

複数のソースを指定する機能は優れていますが、 オーディオ要素をまったくサポートしないブラウザーがあります。 まあ、あなたは私の言っていることを理解しています。



Internet Explorerなどでは、スプーンから古き良きフラッシュを介してオーディオファイルをフィードする必要があります。 オーディオ要素のモデルはこれをサポートします：タグ内に囲まれ、 ソース要素ではないものはすべて、 オーディオをサポートしないブラウザに提供されます-この場合のオブジェクト要素として：

 <audio controls> <source src="witchitalineman.ogg" type="audio/ogg"> <source src="witchitalineman.mp3" type="audio/mpeg"> <object type="application/x-shockwave-flash" data="player.swf?soundFile=witchitalineman.mp3"> <param name="movie" value="player.swf?soundFile=witchitalineman.mp3"> </object> </audio>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

さらに先へ進むこともできます。 オブジェクト要素自体は、代替コンテンツの挿入も許可します。ブラウザにまったく問題がある人のために、標準リンクを作成できます。

 <audio controls> <source src="witchitalineman.ogg" type="audio/ogg"> <source src="witchitalineman.mp3" type="audio/mpeg"> <object type="application/x-shockwave-flash" data="player.swf?soundFile=witchitalineman.mp3"> <param name="movie" value="player.swf?soundFile=witchitalineman.mp3"> <a href="witchitalineman.mp3">Download the song</a> </object> </audio>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

したがって、優先順位は次の順序になります。

1. オーディオ要素を介したOgg Vorbis オーディオ
2. オーディオ要素を介したMP3 オーディオ
3. フラッシュ経由のサウンド
4. ファイルを直接ダウンロードするためのリンク

コンテンツの可用性

オーディオ要素モデルは、そのコンテンツを表現する代替メソッドを指定するのに非常に便利です。 ただし、たとえば、聞くことができない人に曲のテキストバージョンを提供する場合は、次のことを行わないでください。

 <audio controls> <source src="witchitalineman.ogg" type="audio/ogg"> <source src="witchitalineman.mp3" type="audio/mpeg"> <p>I am a lineman for the county...</p> </audio>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この場合、コンテンツ<p>は 、訪問者のブラウザが音声要素をサポートしていない場合にのみ表示されます。 最新のブラウザを使用している耳の不自由なユーザーには役立ちません。 さらに、歌詞は他のすべての人にとって有用である可能性があります。

 <audio controls> <source src="witchitalineman.ogg" type="audio/ogg"> <source src="witchitalineman.mp3" type="audio/mpeg"> </audio> <p>I am a lineman for the county...</p>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

映像

組み込みのオーディオサポートが印象的であれば、この方法でビデオを再生する見込みは大いに盛り上がります。 ブロードバンド接続の普及により、ビデオはインターネット上で非常に人気があります。 データの瞬間では、Flashは主に表示に使用されます-HTML5はそれを変更する予定です。



ビデオ要素は、 オーディオと同様の方法で機能します 。同じパラメーターは、 自動再生 、 ループ 、 プリロードです。 src属性または複数のネストされたソース要素を持つ同じシステム。 同様に、 controlsを使用して標準のコントロールインターフェイスを追加するか、独自のインターフェイスを作成できます。



オーディオとビデオの主な違いは、ビデオとビデオのほうが通常ページ上で少し多くのスペースを取るため、おそらく正確なサイズを指定することです。

 <video src="movie.mp4" controls width="360" height="240"> </video>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

他に面白いことができるのは、 posterパラメーターを使用して画像の形式でサムネイルを追加することです。

 <video src="movie.mp4" controls width="360" height="240" poster="placeholder.jpg"> </video>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ビデオの再生が始まる前にプレビューが表示されます。

最も喜ばしいニュースではありませんが、ビデオ環境でのフォーマット間の闘争は、オーディオの場合よりもさらに厳しいということです。 主なプレーヤー：MP4（特許が必要）とTheora Video（無料でクリーン）。 しかし、あなたはすでにそのような問題がどのように解決されるか知っています：

 <video controls width="360" height="240" poster="placeholder.jpg"> <source src="movie.ogv" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> <object type="application/x-shockwave-flash" width="360" height="240" data="player.swf?file=movie.mp4"> <param name="movie" value="player.swf?file=movie.mp4"> <a href="movie.mp4">Download the movie</a> </object> </video>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ブラウザーの開発者が1つの標準に収束するまで待機するだけで、仕様の開発者が意図したとおりにすべてが動作し始めます-異なる形式のファイルを不必要に複製することなく。

おしゃれでスタイリッシュ、ネイティブ

標準のマークアップ言語ツールを使用してビデオを埋め込む機能は、 img要素を作成して以来、最も刺激的な革新です。 Googleのような大企業でも、このことに熱心であることを恥ずかしがりません。 たとえば、新しいYouTube向けに彼が意図したものは次のとおりです。www.youtube.com / html5



マルチメディアを操作するためにプラグインを使用する際の主な問題は、常にドキュメントの他の部分からの分離でした。 これらの要素はすべてシステム全体の一部であるため、スクリプトやスタイルから簡単にアクセスできます。

video要素はCSS3に遭遇します。 プラグインでこれを実行してみてください。

HTML5の一部としてのオーディオとビデオのサポートは、承認と熱意を得ています。 しかし、世界中のネットワークはプレゼンテーション環境ではなく、インタラクティブでもあることを知っています。 そして、ウェブページ上で双方向性を実現するための最も古く、しかし常に強力なツールは常にフォームでした。 次の章では、HTML5が提供する新しい可能性について説明します。