'; html_body += '
'; html_body += '' + title + ''; html_body += '' + summary + ''; html_body += '
'; dom_floating.innerHTML = html_body; /**/ dom_floating.getElementsByClassName('floating_box')[0].style.bottom = f_bottom + '.px'; /**/ var thumb_elem = dom_floating.getElementsByClassName('thumb')[0]; thumb_elem.addEventListener('click', function(){ location.href = link_url; }); var content_elem = dom_floating.getElementsByClassName('content')[0]; content_elem.addEventListener('click', function(){ location.href = link_url; }); var close_btn_elem = dom_floating.getElementsByClassName('close_btn')[0]; close_btn_elem.addEventListener('click', function(){ dom_floating.classList.add('content_hidden'); }); /**/ dom_ad_float.appendChild(dom_floating); } /** * */ window.AI.unsetF = function(){ } }());
HTML5 Experts.jp

HTML5が引き寄せる近未来を、9つの「○○ウェブ」で理解する。(後編)

白石俊平(オープンウェブ・テクノロジー代表)

2013-08-15 07:30

 この記事は、HTML5が引き寄せる近未来を、9つの「○○ウェブ」で理解する。(前編)の続きです。

ウェブプラットフォーム

 HTML4からHTML5への変化の中でも、最も大きなパラダイムシフトは、「アプリケーションプラットフォームを志向する」という姿勢を明確に打ち出したところでしょう。 そうした旗印のもと、さまざまな機能をウェブに付け加えてきた結果、「ウェブはもはやOSである」と言っても良いくらい豊富な機能を保持しつつあります。

 とは言え、プラットフォームとしてのウェブはまだまだ発展途上段階です。以下の様なプラットフォームが、ウェブ技術をプラットフォームの基盤言語として採用しています。

  • Google Chrome OS・・・Google Chromeをベースとしたオペレーティングシステム。ラップトップ用のOSとして採用が進んでいる。
  • Windows 8・・・最新版のWindowsでは、ウェブ技術を使ってアプリケーションを開発することができる。
  • Firefox OS・・・Mozillaが開発中のモバイル向けOS。全てがウェブ技術で構築されており、それ以外に「ネイティブ」な開発言語を持たない。
  • Tizen・・・SumsongとIntelが共同開発しているモバイル向けOS。ウェブ技術のほか、C/C++でも開発できる。車載向けの[Tizen IVI]というプロジェクトも存在する。
  • Ubuntu Touch・・・Ubuntu Linuxのモバイル版。QMLというUI言語と、JavaScript/C/C++の組み合わせでアプリケーションを開発する。

 中でもChrome OSとFirefox OSは、ウェブ技術以外の開発言語を持たないところから、OSが備える低レベルな機能もJavaScriptで呼び出すことが可能です。Chrome Appsで使えるAPIFirefox OSが備えるAPI、そしてW3CのSystem Applications Working Groupで標準化作業中のAPIを見ると、BluetoothやUSB、TCP/UDPソケットなど、低レベルなAPIを備えていることがわかります。


 Firefox OS(シミュレータ)

 ウェブはもはや、プラットフォームとして十分な機能を備えつつあるだけではなく、さまざまなプラットフォームでウェブ技術が一級市民として採用されつつあるのです。

レスポンシブウェブ

 「レスポンシブウェブデザイン」という単語は、2012年に大流行したため、お聞き及びになった方も多いのではないでしょうか。CSSメディアクエリという技術を中心に、可変グリッドや可変イメージというテクニックを併用することで、さまざまなスクリーンサイズ向けのウェブページを1ソースで構築する手法です。

 レスポンシブウェブデザインを採用したサイトは、ウェブページを表示しているスクリーン(ウィンドウ)のサイズに応じて、動的にその見た目を変化させます。それを試してみるのは実に簡単で、レスポンシブ対応のウェブサイトをブラウザで表示した後、ウィンドウのサイズを変えてみれば良いのです。

 昨年大流行したことから、レスポンシブウェブデザインの例はウェブ上にいくらでも転がっています。 例えば、Magnus Cederholmというウェブデザイナーのウェブサイト「Formfett」では、ウィンドウの幅に応じてレイアウトが大きく変化します。


Formfett(デスクトップサイズ)

Formfett(モバイルサイズ)

 こうした手法が大きく取り沙汰された背景には、デバイスやプラットフォーム、スクリーンサイズが非常に多様化しつつあるという事実があるでしょう。あらゆるデバイスで、あらゆるプラットフォームで、あらゆるスクリーンサイズ上で、ユーザにとって最適な形のウェブページが表示されることが望ましい。レスポンシブウェブデザインは、その理想を実現するための一手段として捉えることができるでしょう。

ZDNET Japan 記事を毎朝メールでまとめ読み(登録無料)

ホワイトペーパー

新着

ランキング

  1. 運用管理

    メールアラートは廃止すべき時が来た! IT運用担当者がゆとりを取り戻す5つの方法

  2. セキュリティ

    最も警戒すべきセキュリティ脅威「ランサムウェア」対策として知っておくべきこと

  3. セキュリティ

    クラウド資産を守るための最新の施策、クラウドストライクが提示するチェックリスト

  4. クラウド基盤

    信頼性と生産性を両立するアプリ環境の構築とは--先進的なIT戦略に取り組むためのガイドブック

  5. ビジネスアプリケーション

    新規アポ率が従来の20倍になった、中小企業のDX奮闘記--ツール活用と効率化がカギ

ZDNET Japan クイックポール

所属する組織のデータ活用状況はどの段階にありますか?

NEWSLETTERS

エンタープライズコンピューティングの最前線を配信

ZDNET Japanは、CIOとITマネージャーを対象に、ビジネス課題の解決とITを活用した新たな価値創造を支援します。
ITビジネス全般については、CNET Japanをご覧ください。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]