2.HTML5 の可能性次の図はインターネットの普及にともなう出来事をまとめた図の再掲であるこの図を見ると W3C が HTML WG を設置した 2007 年は iphone が発売され Android OS が公開されたスマートフォン元年でこれ以降タブレットやカーナビフォトスタンドなど

Size: px

Start display at page:

Download "2.HTML5 の可能性次の図はインターネットの普及にともなう出来事をまとめた図の再掲であるこの図を見ると W3C が HTML WG を設置した 2007 年は iphone が発売され Android OS が公開されたスマートフォン元年でこれ以降タブレットやカーナビフォトスタンドなど"

ぜんぺいもちやま
5 years ago
Views:

Vol.10 HTML5 とシステム開発 1.HTML5 とはウェブを記述する HTML(HyperText Markup Language) の規格は 1994 年以来 W3C(World Wide Web Consortium) によって行われている W3C は 1997 年の HTML4.

1 Vol.10 HTML5 とシステム開発 1.HTML5 とはウェブを記述する HTML(HyperText Markup Language) の規格は 1994 年以来 W3C(World Wide Web Consortium) によって行われている W3C は 1997 年の HTML4.01 の策定の後 HTML を文書としてさらに拡張性のある XML(Extensible MarkupLanguage) へ進化させようと XHTML を策定したしかし市場のニーズにマッチしていなかったためその機能が十分に生かされることはなかったというのも 2002 年頃からブログが普及し始めさらに Gmail などのウェブアプリケーションが出現したこれらは Javascript を使ってサーバーコンピュータと非同期通信を行いその結果により HTML や CSS の内容を動的に変更する技術を使っていたこの技術は 2005 年頃から AJAX と呼ばれるようになった Ajax は Asynchronous JavaScript + XML の略である AJAX により HTML は何かを見るだけではなく何かをする=プログラミングする機能に大きな関心が集まるようになった現在の Google Chrome の起動画面アプリを配布する Google ウェブストアしかし当時の Javascript にはアプリケーションを作成するには機能が不足しておりまたブラウザ間で互換性の取れない部分があるなどの問題があったこれは 2004 年の W3C ワークショップでも取り上げられその後 Apple Mozilla Opera に所属するメンバーにより WHATWG(the Web Hypertext Application Technology Working Group) が立ち上げられた WHATWG は新しい HTML の規格として HTML によるアプリケーション開発機能を強化するため Web Applications 1.0 を開発したそしてこの Web Applications 1.0 が広く支持を集めたため 2007 年に W3C に HTML WG が設立され現在は WHATWG と協力して HTML5 の規格を開発している HTML5 は 2014 年に W3C 勧告として公表される予定になっている -1-

2 2.HTML5 の可能性次の図はインターネットの普及にともなう出来事をまとめた図の再掲であるこの図を見ると W3C が HTML WG を設置した 2007 年は iphone が発売され Android OS が公開されたスマートフォン元年でこれ以降タブレットやカーナビフォトスタンドなどさまざまなデバイスがインターネットに接続されるようになるターニングポイントの年であるこのようなマルチデバイスの時代になるとさまざまな種類の端末向けにそれぞれソフトウェアを開発することは非効率である例えば iphone/ipad 向けには Objective-C という言語を使ってソフトウェアを開発するが Window phone では C# を使用するまた Android 端末向けには Java 言語を使うが画面のサイズや解像度がさまざまでそれぞれに個別の対応が必要となるこれに対して HTML ベースの開発であればひとつ開発するだけで機種を問わず利用できる可能性があるしかも HTML5 ではアプリケーション開発に必要とされる機能が大幅に追加される予定である例えば 2D 3D グラフィックスサウンドムービーなどのマルチメディア操作機能オフラインでもウェブアプリを実行できるキャッシュ機能クライアント側で大量のデータを保存できるウェブストレージやデータベース機能 Javascript でのマルチタスク機能などであるまた携帯端末固有のカメラマイクの操作や GPS などのセンサをコントロールする機能も実装されつつあり Javascript を使用して各種の言語による開発と同様な高度なソフトウェアの開発が可能になる -2-

これらのことから HTML5 は単なる HTML の機能強化というよりも PC やスマートフォンタブレット

HTML5 はマルチデバイス時代のソフトウェア開発基盤として大きな注目を集めているのであるつまり

一般のアプリケーションの多くがウェブアプリとなる可能性があるそのような将来 Windows などの OS

はウェブアプリケーション開発プラットフォームの中心となるウェブ標準の HTML テクノロジーが

3 これらのことから HTML5 は単なる HTML の機能強化というよりも PC やスマートフォンタブレットなどすべてのデバイスのための新しいアプリケーション開発プラットフォームになると考えられているその意味で HTML5 はマルチデバイス時代のソフトウェア開発基盤として大きな注目を集めているのであるつまり HTML5 が継続的に発展しネットワーク環境やハードウェア性能が向上する将来一般のアプリケーションの多くがウェブアプリとなる可能性があるそのような将来 Windows などの OS の代わりにウェブブラウザがアプリケーション実行環境となり HTML はウェブアプリケーション開発プラットフォームの中心となるウェブ標準の HTML テクノロジーがあらゆるコンピューターアプリケーションのベースになる可能性を秘めているのである Windows 上で実行される Chrome ブラウザ Chrome 上で実行される各種ウェブアプリ -3-

3.HTML5 の概要 1. マークアップの仕様を更新 HTML5 ではさまざまなタグが追加されるがそれらは大きく3 種類に分けられるひとつはつは HTML ドキュメントの意味をコンピュータが理解しやすくするためのセマンティックタグ次に機能強化されたフォーム関連タグ最後にマルチメディア関連の要素を簡単に書けるようにするタグである 1.

4 3.HTML5 の概要 1. マークアップの仕様を更新 HTML5 ではさまざまなタグが追加されるがそれらは大きく3 種類に分けられるひとつはつは HTML ドキュメントの意味をコンピュータが理解しやすくするためのセマンティックタグ次に機能強化されたフォーム関連タグ最後にマルチメディア関連の要素を簡単に書けるようにするタグである 1.1 セマンティックなマークアップセマンティック (semantic) なマークアップとは HTML キュメントの内容に意味付けをするタグのことであるこれまでは HTML ドキュメントをヘッダーやナビゲーションメインコンテンツフッターなどの構成要素に分けるため主に div タグが使われてきたがそれに代わって section header nav footer などのタグが追加されコンピュータによる機械的な解析でも意味を判定しやすいウェブを作成できるようになったこれらのタグの多くは従来 div タグの id 属性やクラス属性として多く使われてていた名前を独立したタグにしたものである HTML4 での書き方 HTML5 での書き方 -4-

1.2 フォーム機能の強化ウェブアプリケーションの記述をより容易にするために簡単な属性指定だけで様々な形式のデータを入力できるようになった右は input タグに付けることができる属性の一覧である例えば属性として type= date と指定するだけで入力時にカレンダーが表示され中の日付をマウスでクリックするだけで入力できるようになるただし 2012 年 12 月現在では

date 日付 month 月入力 week 週入力 time 時間入力 datetime-local 日付時間入力 ( ローカル ) number 数値入力 range 数値入力 ( スライダー UI) color 色入力属性概要 pattern placeholder autocomplete list required 正規表現パターンを指定して送信時に検証し

5 1.2 フォーム機能の強化ウェブアプリケーションの記述をより容易にするために簡単な属性指定だけで様々な形式のデータを入力できるようになった右は input タグに付けることができる属性の一覧である例えば属性として type= date と指定するだけで入力時にカレンダーが表示され中の日付をマウスでクリックするだけで入力できるようになるただし 2012 年 12 月現在では Opera を除いて多くのブラウザはすべての属性が使えるわけではない今後の実装を待つ必要がある例えば Firefox や Chrome では search Phone URL だけが使用可能である Type 属性概要 tel 電話番号入力 search 検索語入力 url URL 入力アドレス入力 datetime 日付時間入力 (UTC) date 日付 month 月入力 week 週入力 time 時間入力 datetime-local 日付時間入力 ( ローカル ) number 数値入力 range 数値入力 ( スライダー UI) color 色入力属性概要 pattern placeholder autocomplete list required 正規表現パターンを指定して送信時に検証し一致しないと送信できない入力例やヒントを表示する入力補完機能 2 度目以降の入力時に以前と同じ内容の候補を表示 datalist 要素を参照して入力候補を表示必須入力項目である事を示す要素送信時に検証し入力がないと送信できないさらに上記の表のような属性指定も可能になった例えば電子メールを入力するフォームで次のように required や autocomplete などを指定できる <input type=" " required id="mail" placeholder=" 例 : user@example.com" size="30" autocomplete="on" > < 実習 > formsample1.html を開いて実行しなさいまた type 属性を変えて実行してみなさいただし実行には Firefox ブラウザを使用すること -5-

6 1.3 オーディオビデオグラフィックスを簡単に操作できる HTML5 ではサウンドを再生するオーディオ機能と動画を再生するビデオ機能を簡単に利用できるよう専用のタグが追加された <audio src="aaa.mp3" controls></audio> <video src="basic.mp4" controls></video> sample5.html ただしブラウザにより使用できるファイル形式が違うためどのブラウザでも実行できるように複数のソースファイルを指定する書き方を使う方がよい <audio controls="controls"> <source src="aaa.mp3" type="audio/mp3" /> <source src="bbb.ogg" type="audio/ogg" /> </audio> <video controls="controls"> <source src="basic.mp4" type="video/mp4" /> <source src="altar.webm" type="video/webm" /> </video> sample5b.html ブラウザで使用できるファイル形式は以下のようである代表的なビデオ形式と対応ブラウザ Chrome 7 Firefox 4 Opera 11 Safari 5 IE9 H.264+AAC(.mp4) Theora+Vorbis(.ogv) VP8+Vorbis(.webm) 代表的なオーディオ形式と対応ブラウザ Chrome 7 Firefox 4 Opera 11 Safari 5 IE9 AAC(.aac) MP3(.mp3) Vorbis(.ogg) WAVE(.wav) < 実習 >au_vi1.html と au_vi2.html をダウンロードして実行してみなさい -6-

7 1.4 ビットマップグラフィックスを表示できる HTML5 ではビットマップグラフィックスを表示するための <canvas> タグが新たに追加されたただしこのタグは透明なキャンバスを定義するだけの機能しかなく実際の図を描くには Javascript でプログラムを書く必要があるこれまでウェブに図を描こうとするとアドビ社の Flash や Java の JavaFX.net では silverlight などの追加的なソフトウェアが必要だったが HTML の標準的な仕様として組み込まれたことの意義が大きいそれは付加的なソフトウェアなしでウェブの機能だけで図形が描けるようになるからである <!DOCTYPE html> <html lang="ja"> <head> <meta charset="shift_jis"> <title> キャンバス </title> Javascript のプログラム <script> function draw() { var con = document.getelementbyid('canvas1').getcontext('2d'); // キャンバスの画面を得る // 四角を描く con.fillstyle = "rgba(0, 0, 200, 0.5)"; // 塗りつぶしの色を青にする con.fillrect (100, 100, 150, 150); // 円を描く con.fillstyle = 'rgba(0,200,0,0.5)'; // 塗りつぶしの色を緑にする con.beginpath(); con.arc(330, 250, 100, 0, Math.PI*2, false); // 円弧を描く (x, y, r, start, end, direction) con.fill(); } </script> <style> body { margin: 40px;} canvas { border: 3px solid #999999; } </style> </head> <body onload="draw();"> キャンバスタグ <canvas id="canvas1" width="600" height="400"></canvas> </body> </html> -7-

8 キャンバスタグは上図の青枠のようにキャンバス大きさを指定するだけである <canvas id="canvas1" width="600" height="400"></canvas> キャンバスに対する操作は Javascript で行うキャンバスタグに指定した名前を使って対応する仮想的な画面を取得するがこれをコンテキストと呼ぶ ( 上の例では con がそれにあたる ) プロパティ内容 strokestyle 線の色 fillstyle 塗りつぶしの色 globalalpha 透明度 linewidth 線の幅コンテキストは左図のような属性を持っているこれらの属性は必要に応じて描画する前に値をセットしておく必要があるなお rgba は色を指定する書き方で rgba( 赤, 青, 緑, 不透明度 ) という意味である例 )con.fillstyle = "rgba(0, 0, 200, 0.5)"; // 塗りつぶしの色を青にするさらにコンテキストに指定できる描画命令の主なものは次のようなものがあるメソッド beginpath() closepath() moveto(x, y) lineto(x, y) stroke() fill() strokerect(x, y, w, h) fillrect(x, y, w, h) arc(x, y, s, e, c) 内容パスの開始パスの終了線を引き始める位置を (x, y) に移動する線を引くパスの描画パス内部を塗りつぶす (x, y) を左上とし幅 w/ 高さ h の四角を描く (x, y) を左上とし幅 w/ 高さ h の四角を描いて内部を塗りつぶす (x, y) を中心とし開始角 s/ 終了角 e の円弧を描く例 )con.fillrect (100, 100, 150, 150); // 四角形に塗る表の中の x, y は座標を示す値だが座標系はキャンバスの左上を減点 (0, 0) とする相対座標系である < 演習 > canvas1.html をダウンロードして表示しなさいまた指示にしたがってソースコードを変更してみなさい canvas の座標 -8-

9 2. API の標準化 (Javascript API) HTML5 ではさまざまな機能が整備されたそれらの機能を Javascript API という API とは Application programming Interface の略で大胆に簡略化して表現するなら使える命令語の一覧表のようなものであるそれが大幅に増えたおかげで多様なプログラムを書けるようになったのである実はこのような使える命令語の一覧表である API の種類や数を増やしどのブラウザでも同じように使えるように標準化するというのが HTML5 の大きな目的であったこれにより以下の表に示す機能が HTML5 標準として定められたことから今後のシステム開発において HTML5 が大変重要な役割を果たすことが期待されている HTML5 の主な API Canvas SVG(scalable graphics) Video & Audio vector ビットマップグラフィックスの表示処理ベクターグラフィックスタグだけで表示でき縮小拡大回転などが可能サウンドやビデオの再生操作非常に多くの項目をプログラミングできる Drag and Drop API Geolocation API File API Web Socket Web Messaging Web Workers Web Strage Indexed Database ドラッグドロップ操作を行うファイルのドラッグドロップなどが可能 GPS センサなどの値を読み取り位置情報を取得するローカルファイルの読み書きを可能にするウェブがウェブサーバーとセッションを確立して通信できるようにする異なるドメイン同士での通信を可能にする Javascript にマルチスレッド機能を追加する大量のデータをウェブ側に保存しサーバーとの通信時に利用できる key-value 方式のデータベースをクライアント側で使用可能にする -9-

10 以下は位置情報を取得して表示する例である <!DOCTYPE HTML > <html lang="ja"> <head> <meta charset=shift_jis"> <title> 位置情報 </title> </head> <body> <script type="text/javascript"> navigator.geolocation.getcurrentposition( function (pos) { var location ="<li>"+" 緯度 :" + pos.coords.latitude + "</li>"; location += "<li>"+" 経度 :" + pos.coords.longitude + "</li>"; document.getelementbyid("location").innerhtml = location; }, null ); </script> <ul id="location"></ul> </body> </html> < 演習 1> 上記の geo.html をダウンロードして実行しなさいまた地図を表示するようにした map.html もダウンロードして実行しなさいさらに次の URL はそれをサーバーにおいて実際にアクセスできるようにしたものであるスマートフォン等でアクセスしてみなさい < 演習 2> HTML5 Javascript css3 で可能になったいくつかのデモを体験しなさい the Box ( 視点を変えながら見ることができる 3 次元のアニメーション ) BANABABREAD (3 次元のシューティングゲーム ) Stars ( 銀河系を拡大縮小しながら探索できる 3 次元アニメーション )

07_経営論集2010　小松先生.indd

07_経営論集2010　小松先生.indd 19 1 2009 105 123 Web Web Web Web World Wide Web WWW OS 1990 WWW Web HTML CSS JavaScript Web 1 WWW 2 Web Web 3 Web 4 HTML5 5 Web Web 3 1970 WWW HTML Web WWW WWW WWW WWW WWW 105 Web WWW 2 Web 1 1 NTT NTT