2010年06月19日
会社でHTML5API系の調査をする機会があったので、ブラウザ別対応状況とそのとき調べたサイトなどまとめてみました。
PCのブラウザ別対応状況
各ブラウザベンダは同じAPIに注力とはいかないものの、それぞれAPIの実装を進めている様子です。
Internet Explorerの対応状況が低いですが、ライブラリなどがありますのでそちらを使用してみるというのも1つの手です。
HTML5API系PCのブラウザ別対応状況
| ブラウザ |
Firefox |
Safari |
Internet Explorer |
Opera |
Google Chrome |
| アプリケーションキャッシュ |
3.0以上 |
4.0以上 |
- |
10.6 |
3.0以上 |
| Canvas |
3.0以上（Modernizrだと2もOKだった） |
3.2以上 |
- |
9.6以上 |
3.0以上 |
| Canvas Text |
3.5以上 |
4以上 |
- |
10.5以上 |
3.0以上 |
| Video |
3.5以上 |
3.2以上 |
- |
10.5以上 |
3.0以上 |
| Audio |
3.5以上 |
3.2以上 |
- |
10.5以上 |
3.0以上 |
| Web Storage localStorage |
3.5以上 |
4以上 |
8以上 |
10.5以上 |
3.0以上 |
| Web Storage seccionStorage |
2以上（Modernizrだと2もOKだった） |
4以上 |
8以上 |
10.5以上 |
3.0以上 |
| Web SQL Database |
4.0 |
3.2以上 |
- |
10.5以上 |
3.0以上 |
| Indexed Database API |
- |
- |
- |
- |
- |
| Geolocation API |
3.5以上 |
5以上 |
- |
10.6 |
3.0以上 |
| Drag and Drop |
3.5以上 |
4.0以上 |
7.0以上 |
- |
3.0以上 |
| Post Message（クロスドキュメントメッセージング） |
3.0以上 |
4.0以上 |
8.0以上 |
9.6以上 |
3.0以上 |
| Web Workers |
3.5以上 |
4.0以上 |
- |
10.6 |
3.0以上 |
| Web Sockets |
- |
5.0以上 |
- |
9.6以上 |
6.0 |
| File API |
3.6以上 |
- |
- |
- |
6.0 |
※OSはWindowsです。
※一部サポートでも対応と判断して記載しています。
スマートフォンの対応状況
PCでは、Internet Explorerがあまり多く対応していませんでしたが、スマートフォンなら現在シェアの多いiPhone OS（ブラウザはMobile Safari）での実装がしやすいかと思われます。
また、Android OSも2.1なら対応状況がよいのでこの2つに対して機能を実装していくのがいいかもしれません。
スマートフォンにはWindows Mobileも入っていますが、UA判定などでHTML5APIでの機能を付与しないというプログレッシブエンハンスメントの考えが適用できます。
PCでも同じ考えで実装するのもありだとは思います。
HTML5API系PCのブラウザ別対応状況
| 機種/ブラウザ/OS |
iPhone/
Mobile Safari/
OS別に対応バージョンを記載 |
iPad/
Mobile Safari/
iPhone OS 3 |
htc Desire/
Mobile Safari/
Android OS 2.1 |
docomo Xperia/
Mobile Safari/
Android OS 1.6 |
docomo HT-03A/
Mobile Safari/
Android OS 1.5 |
| アプリケーションキャッシュ |
2以上 |
○ |
○ |
- |
- |
| Canvas |
3.0以上 |
○ |
○ |
○ |
○ |
| Canvas Text |
3以上 |
○ |
○ |
○ |
○ |
| Video |
3以上 |
○ |
○ |
- |
- |
| Audio |
3以上 |
○ |
○ |
- |
- |
| Web Storage localStorage |
3以上 |
○ |
○ |
- |
- |
| Web Storage seccionStorage |
3以上 |
○ |
○ |
- |
- |
| Web SQL Database |
2以上 |
○ |
○ |
- |
- |
| Indexed Database API |
- |
- |
- |
- |
- |
| Geolocation API |
3以上 |
○ |
○ |
- |
- |
| Drag and Drop |
2以上 |
○ |
○ |
○ |
○ |
| Post Message（クロスドキュメントメッセージング） |
3以上 |
○ |
○ |
- |
- |
| Web Workers |
- |
- |
○ |
- |
- |
| Web Sockets |
- |
- |
- |
- |
- |
| File API |
調査できず |
調査できず |
調査できず |
調査できず |
調査できず |
対応状況を調べるためには
調査を行う上で次のサイトやライブラリを用いました。
HTML5の最新情報を知るには
メーリングリスト
開発者向けサイト
最後に、各ブラウザに実装されて、開発者も使用しているものに関しては仕様からなくなることはほぼないとは思われます。
ただ、HTML5は策定中で、仕様が変更される可能性がありますのでご注意ください。
※対応状況に間違いなどありましたら、ご指摘いただけると助かります。
2010年05月30日
HTML5ではこれまでのHTMLより明確に文書構造、意味を示すことができるように新要素が追加されました。
その中で、コーディングコンテストで使用したものを紹介します。
記事のタイトルにある「アウトライン」とは文書の階層構造のことです。
HTML5ではアウトラインをどのように判別するか定義されているので、マークアップする際はこのアウトライン・アルゴリズムを意識することが重要です。
| header要素 |
セクションのヘッダーを示します。通常はセクションの見出し要素などに加え、セクションに関する概要やナビゲーションなどをマークアップすることができます。
セクションの中で1つ使用できるので、1ページに1つまでではなく、ページ内に複数出現することも可能です。
|
| footer要素 |
セクションのフッターを表します。ヘッダー同様にセクションで使用ができ、そのセクションの著者情報や関連ページへのリンク、著作権表記に使用します。
|
| section要素 |
一般的なセクションをしまします。必ず章や節といった単位で使用しなければなりません。
章、節を示すものなのでこの要素の中には必ずh1～h6要素を使って見出しを入れてください。
|
| nav要素 |
ナビゲーションを形成するセクションを表します。
ヘッダー内にあるようなグローバルナビゲーション、ページのサイトに掲載されるサブナビゲーションをマークアップします。
|
| aside要素 |
補足記事、サイドバー、広告、引用など、メインのコンテンツとは関連性が薄く、切り離すことができるものに使用します。
|
ソースコード
下記がコーディングコンテストの課題であるMovableType5のデザインを新要素でマークアップしたものです。
～ 省略 ～
<header id="header">
<h1><a href="http://www.sixapart.jp/movabletype/"><img src="img/logo.png" alt="Movable Type 5" width="288" height="39"></a></h1>
～ 省略 ～
<nav>
～ 省略 ～
</nav>
～ 省略 ～
<!-- /#header --></header>
～ 省略 ～
<section id="lead">
<h2>ウェブサイト管理の新標準。</h2>
～ 省略 ～
<!-- /#lead --></section>
<section id="function">
<h2>Movable Type 5 の新機能</h2>
～ 省略 ～
<!-- /#function --></section>
<section id="license">
<h2>ライセンスについて</h2>
～ 省略 ～
<!-- /#lisence --></section>
<section id="news">
<h2>お知らせ</h2>
～ 省略 ～
<!-- /#news --></section>
<section id="case">
<h2>ビジネスブログ導入事例</h2>
～ 省略 ～
<!-- /#case --></section>
<section id="related">
<h2>関連製品・ソリューション</h2>
～ 省略 ～
<!-- /#related --></section>
<aside id="other">
<section>
<h2><a href="http://www.movabletype.jp/plugins/">プラグインディレクトリ</a></h2>
～ 省略 ～
</section>
～ 省略 ～
<!-- /#other --></aside>
～ 省略 ～
<footer id="footer">
<aside id="link">
～ 省略 ～
<h2>Movable Type 関連情報</h2>
～ 省略 ～
<!-- /#link --></aside>
～ 省略 ～
<!-- /#footer --></footer>
細かい部分は全体のソースコード（記事の最後にリンクがあります）を見ていただくとして、なぜこのようなマークアップをしたのか説明したいと思います。
まず、header要素、footer要素はページのヘッダー・フッター部分にマークアップしました。
これは今までの「<div id=”header”>」「<div id=”footer”>」を差し替えました。
次に考えたのがnav要素です。
このページにはナビゲーションにあたるものがヘッダー部分にしかなかったので、ヘッダー内の各項目へのリンクをnav要素で囲いました。
続いてsection要素を見ていきました。
section要素はページの中でコンテンツに該当する範囲でマークアップしました。
見出しが存在して、その見出しの説明文のグループです。
ちなみに見出しは、section要素の中でリセットができh1からはじめることも可能ですが、文書全体でより明確な構造を示すためにいままでと同じ組み方にしています。
ここで迷ったのがaside要素にするかです。
aside要素は「メインコンテンツとは関連性が薄く、切り離すことができるもの」とされています。
よって、ページのメインコンテンツである「MovableType5」の説明とはそれているものをマークアップしました。
新要素の追加によって、より明確な文書構造を示すことができるようになりました。
これによって、機械による文書の解析が容易になり、将来的には音声ブラウザ、検索エンジンなどがページの必要なコンテンツのみ理解することが可能になります。
header要素で囲えばそこはセクションのヘッダーになり、nav要素で囲えばそこはナビゲーションを示します。
メインコンテンツだけ抜き出したいと思ったら、これらのメインコンテンツとは関係ない要素でマークアップされている、header要素、footer要素、aside要素、nav要素を抜けばよいということです。
ちなみにアウトライン生成してくれるものがあるので、作品のアウトラインを出してみました。
HTML5でマークアップをするときは、次に紹介するアウトラインを生成するツールなどで、正しい構造になっているか確認しながら作業をするとよいと思います。
ここではコンテストに提出したソースコードの一部を紹介しました。
全体的にご覧になりたい方は、下のリンクから参照してください。
勉強中なので、もし間違いなどありましたらご指摘ください。よろしくお願いします！
2010年05月30日
5月29日（土）にベルサール新宿で行われた「Dreamweaver Town Meeting in Tokyo」に参加してきました。
Dreamweaverテンプレートの活用方法からはじまり、CS5の新機能について、HTML5への対応などいろいろ役に立つ情報満載でした。
今回特徴的だったのが、大喜利と呼ばれるもので一人7分で次々とある機能について説明するものです。
12人だったのですが、ひとつのことにフォーカスしているので理解しやすかったです。
便利そうだなと思ったのは、FirefoxのAdd-onのFirebugみたいなことができる「インスペクトモード」でした。
この他にもPHPとかも処理して表示してくれる「ライブビュー」とか、ソースコードの整形で「検索/置換」のアドバンスな使い方、デザインビューが意外と使える？とか思ったりしました。
「インスペクトモード」で検索したら、ADOBETVでの動画があったので見てみました。
Firebugみたいに選択したところのCSSが見れたり、paddingが黄色、marginが青で表示されてました。
過去にも、Wordとの連携を見たことがあるのですがエクセルの表示をコピペして、簡単に張り付けられるのは便利だなーと感じました。
まだまだドリちゃん（Dreamweaverの愛称）を使いこなせてないなーと思いつつ、がんばります。
個人的にはスニペット機能がなかったのが残念。これ結構便利なのに、会社で共通で使う広告のソースコードとか、画像のimg要素とか設定しておけばダブルクリックだけで挿入できるのに！
そして、Subversionを導入していれば会社内、知り合い同士で共通のソースコードを使えたりするんだな。
そろそろ「Dreamweaver × Subversion」が盛り上がってくるんじゃないかなと勝手に予想。笑
以前より、Subversion使ってる人増えてるみたいだし。
ちなみにタイムテーブルはこんなかんじ。全部覚えようと思ったら大変ですね。笑
| セッション名 |
スピーカー |
| 実装、運用プロトタイピングにも！Dreamweaverテンプレート徹底活用術 |
伊原 力也（ビジネス・アーキテクツ） |
| CS5の新機能、強化された機能 |
神森 勉＋鷹野 雅弘（スイッチ） |
| iPhone site extention for Dw CS4/5 |
たにぐちまこと（H2O Space） |
| HTML5 Pack |
丸山章 |
| コーディングツールバーのカスタマイズ |
茂木葉子（Aqua Design Studio） |
| Movable Typeとの連携 |
森 和恵（r360studio） |
| ソースコードの整形 |
千貫りこ |
| WordPress連携 |
たにぐちまこと（H2O Space） |
| Photoshop/Fireworksとの連携 |
石嶋 未来（ウープスデザイン） |
| Dreamweaver x Zen-coding |
岡部 和昌（ヤフー） |
| スペシャルコードヒント |
國分 亨（dreamseeker） |
| HTML5拡張機能 |
丸山 章 |
| デザインビュー＆キーボードショートカット活用 |
宮内 純人（マックグラフィックアーツ） |
| Fireworks用CSS Sprite拡張機能との連携 |
湯口 りさ（RsStudio） |
| Dreamweaverの拡張機能を作ってみる（入門編） |
渕上 伸吾（カヤック） |
| Microsoft OfficeからのデータコンバートTIPS |
山田 恵理子（Webridge Kagawa） |
久しぶりに懇親会に参加したのですが、いろんな方に会えて楽しかったです。
ご一緒させていただきました皆様ありがとうございました！
2010年05月03日
img要素のalt属性の定義に関して、HTML4では画像をレンダリングできないブラウザの場合に表示する代替テキストとして使用され、画像の簡単な説明を入れるというものでした。
そして、詳細な説明をいれる場合にはlongdesc属性を使用することになっています。
HTML5のimg要素の仕様では、longdesc属性は廃止され、alt属性がその役割を果たすことになります。
画像のタイトルをalt属性にいれるのではなく、その画像が表すものを言葉で説明したテキストをいれる、という定義がされています。
詳細については、下記リンクからご覧ください。
画像が文書の一部として機能する場合
次の「テーマ機能」部分でこのalt属性での代替テキストを入れました。
ソースコードは下記のようになっています。
<h3><a href="https://www.sixapart.jp/movabletype/customize/theme.html">テーマ機能</a></h3>
<p><img src="img/im_function1.png" alt="デザインのテーマ一覧が表示されおり、各テーマをエクスポートするためのポップアップが上に乗っています。" title="テーマ機能（キャプチャ）" width="290" height="140" /></p>
<p>ウェブサイトをデザインするテンプレートや、カスタムフィールド、カテゴリーなどを、まとめて『テーマ』として保存、配布が可能です。</p>
まず、テーマ機能のキャプチャ画像が「テーマ機」という見出しの上にあり、最後に文章でテーマ機能についての紹介が記述されています。
デザインでは画像が先に来ていますが、文書として読んだときにタイトルより先に「説明要素として画像」が書かれているのはおかしいと思いCSSで位置を入れ替えています。
h3要素の下の画像は文章の前にどのような要素が画面にあるのかを表していると判断したので、その画像が表すものをalt属性にいれました。
「デザインのテーマ一覧が表示されおり、各テーマをエクスポートするためのポップアップが上に乗っています。」
画像が表示されない環境では、見出しから順に画像のalt属性、文章の順に読まれると予想されます。
最後に画像にalt属性を入れましたが、title属性でも画像のタイトルを入れておきました。
これはalt属性が入っているので必須ではないですが、入れておいたほうが丁寧かなと思い今までと同じような簡単な説明テキストを記述しました。
画像が文書の一部として機能するまではいかないが、HTML上に掲載する場合
では、alt属性にいれるほど、本文を表すことはないがHTML上に入れておきたい画像と思ったときはどうするのか？
導入事例から「森ビル」のサイトキャプチャの画像の例で見ていきます。
<h3><a href="https://www.sixapart.jp/business/12843.html">森ビル</a><span class="new">NEW!</span></h3>
<img src="img/im_case1.png" alt="" title="森ビルウェブサイト（キャプチャ）" width="146" height="114" />
<p>六本木ヒルズや表参道ヒルズなどの建設・運営で有名な総合ディベロッパーの森ビルは、2008年8月に企業ウェブサイトのリニューアルを行った。新サイトは、最新トピックスを既存のプレスリリースとは異なるアプローチで掲載するなど、一般の利用者を意識した積極的な情報発信が目を引く。</p>
デザインを見ると、森ビルのサイトキャプチャが左側に存在します。
文書として考えたときに、右側の文章にこのサイトのキャプチャが影響するものとは考えませんでした。
右側の文章ではサイトの色やレイアウトなどには触れていないからです。
よって、この画像はHTML上にはあったほうがいいけど、「画像が文書の一部として機能する場合」のようなテキストがなくても成り立つと考えました。
画像には、alt属性は空で、タイトルとしてtitle属性を入れました。
今までのマークアップでいうと、alt属性にタイトルを入れてOKでしたが、HTML5からはタイトルはtitle属性で、その画像を表すテキストはalt属性になりますので、ご注意ください。
ここではコンテストに提出したソースコードの一部を紹介しました。
全体的にご覧になりたい方は、下のリンクから参照してください。
勉強中なので、もし間違いなどありましたらご指摘ください。よろしくお願いします！
2010年04月29日
Dreamweaverのスニペットとは、ソースコードを登録しておいて再利用できる機能です。
「ウィンドウ」→「スニペット」もしくは、「Shift + F9」で表示できます。
たとえばCSSハックを登録しておいて、ダブルクリックですぐ挿入できます。
また、カーソルである範囲を選択すれば、その範囲を囲うソースコードも登録できます。
しかし、個人でソースコードを使用する分にはいいのですが、チーム他のメンバーとスニペットを共有したい場合に問題点があると感じています。
Adobeのサイトにはチームの他のメンバーとのスニペットの共有とあり、自分のPCのDreamweaver アプリケーションフォルダの”Configuration¥Snippets” フォルダにコピーアンドペーストするようになっています。
もちろん、”Configuration¥Snippets” フォルダは個人PCのフォルダですから、スニペットに更新がかかった時は再度自分のPCの”Configuration¥Snippets” フォルダにコピーアンドペーストする必要があります。
スニペットの管理者も自分のPCで新しいスニペットを作成して、共有フォルダなどにおいて、そこから持っていてもらうという形になります。
いちいちまどろっこしいですね。
そこで便利なのが、ソースコードのバージョン管理に使用されるSubversionです。
TortoiseSVNというWindowsのGUIクライアントを使用すると、簡単にスニペットの共有ができるようになります。
TortoiseSVNのインストールやサーバへのSubversionのインストールはここでは割愛させていただきます。
下記に参考サイトを掲載しておきましたのでそちらをご覧ください。
デザイナーの方はSubversionに詳しいエンジニアの方などに相談してみるといいと思います。
参考サイト
すでにあるスニペットをSubversionリポジトリに追加
ここは最初にスニペットをリポジトリに追加する人のみの作業です。作成済みのスニペットを利用する人は次の「自分のPCの”Configuration¥Snippets” フォルダにチェックアウト」から作業してください。
-
自分のPCの”Configuration¥Snippets” フォルダを開きます。
ちなみに自分はVISTAなので、「C:\Users\ユーザ名\AppData\Roaming\Macromedia\Dreamweaver MX 2004\Configuration\Snippets」でした。
※一度もスニペット機能を使用したことがない場合は「Snippets」フォルダが存在しません。Dreamweaverでスニペットウインドウを表示し、なにかしらコード挿入などの操作をしてください。
-
スニペットファイル（.csn）が入っているのを確認できますので、コピーアンドペーストしてリポジトリに登録します。
心配な方はどこかにバックアップを取っておくとよいでしょう。
自分は実験的に「file:///C:/Users/ユーザ名/Documents/repo/Snippets」に登録しました。
※file:///で始まるリポジトリは自分のPCローカルですので、他の人と共有には向きません。
共有する場合は必ず誰でもアクセスできるサーバなどにリポジトリを作成しましょう。
自分のPCの”Configuration¥Snippets”フォルダにチェックアウト
-
自分のPCの”Configuration¥Snippets”フォルダの上の階層の”Configuration”を開きます。
-
Snippetsフォルダを右クリックし、TortoiseSVNでリポジトリのファイル（例：「file:///C:/Users/ユーザ名/Documents/repo/Snippets」）をチェックアウトします。
そうするとSnippetsフォルダの中身がリポジトリのファイルに置き換わります。
最初にSnippetsフォルダの中身をコピーしたものをリポジトリに入れているわけですので、同様のファイルが存在しているはずです。
Dreamweaverのスニペットが問題なく読み込まれているか確認
ここまででとりあえずの設定は終わりです。
-
Snippetsフォルダの中身の変更はすぐには反映されません。一度Dreamweaverを再起動しましょう。
-
そうするとチェックアウトしたスニペットファイルが反映されていることが確認できます。
スニペットを編集し、リポジトリにコミット
スニペットを新規作成、修正、削除、名称の変更をし、他の人と共有するためにリポジトリにコミットします。
-
新規作成、修正する場合は、Dreamweaverのスニペットウィンドウから行ってください。
通常の作成と同様の手順なので、Adobeのコードスニペットの作成をご覧ください。
※既存スニペットの削除、名前の変更を行う場合は、チェックアウトした”Configuration¥Snippets”フォルダからTortoiseSVNで行ってください。
DreamweaverからはTortoiseSVNに削除や名称の変更の通知がいかないので、あとでつじつま合わせはできるかと思いますが注意してください。
-
“Configuration¥Snippets”フォルダで右クリックを行い、TortoiseSVNでコミットを行います。
そうすると、リポジトリに格納されます。
リポジトリから変更を取り込む
スニペット作成者から、変更の通知を受けたら、利用者は自分のPCの”Configuration¥Snippets”フォルダに変更を取り込みます。
-
チェックアウト時と同様に自分のPCの”Configuration¥Snippets”フォルダで右クリックを行い、TortoiseSVNでアップデートを行います。
そうすると、変更が取り込まれます。
-
Snippetsフォルダの中身の変更はすぐには反映されませんので、Dreamweaverを立ち上げていたら再起動しましょう。
-
そうするとチェックアウトしたスニペットファイルが反映されていることが確認できます。
2010年04月29日
4月17日に行われました「CSS Nite LP9」で「第2回コーディングコンテスト」の受賞者発表が行われました。
なんと、優秀賞「ピクセルグリッド賞」をいただきました！
同姓同名かと思いましたが、イベント終了後、小山田 晃浩（株式会社ピクセルグリッド）さん、高津戸 壮（株式会社ピクセルグリッド）さんに賞品をいただきに行ったところ間違いないそうです。
普段は会社のHTML、CSSの情報共有ページを作成していますが、これを機にブログでも初めてみようと思った次第です。笑
コンテストではMovableTypeのページ作りましたが、Wordpressデス。
デザインとかまだ全然決めてないです。。。これからがむばります。
そして、提出した作品を元にHTML5とCSS3の記事を時間があるときにまとめようかと思います。
RSS 2.0