JavaScriptではじめる組み込み系プログラミング

さまざまなデバイスがWebを介してつながるWeb of Things（WoT）。WoTの普及によってさまざまな分野からWeb上に新しいサービスがローンチされ、Webを利用するユーザーに新しい体験が提供されるタイミングが、すぐそこまできている感じがします。

一方で、WoTの普及はWebクリエイターにとっても、新しいビジネスチャンスかもしれません。ひと昔前まで、Web技術は、PCのWebブラウザ上でしか使われないものでした。しかし現在では、Firefox OSのようにモバイル・ネイティブで動作するようになりました。さらに最近では、マイコンなどの組み込み機器でも、直接JavaScriptなどのWeb技術が動作するものが出てきました。

ここ最近、海外でリリースされているデバイスの中には、JavaScriptなどのWeb技術を強くキャッチアップしている製品が増えてきています。今回はそれらJS Boardの中から、筆者がよく使っているのものを3つ紹介したいと思います。

Espruino

espruino.com

2013年にKickstarterで資金調達が開始され、目標額を大きく超える調達額を獲得し開発されたデバイスです。リファレンスボードであるEspruino Boardは、72MhzのCortex-M3でJavaScriptプログラムがコンパイルされ、動作する小さなマイコンです。

JavaScriptコードは、専用のEspruino IDEで編集し、EspruinoをPCとUSB接続すれば、IDEからEspruinoへ直接プログラムが転送できるようになっています。ArduinoのようにIDEが用意されているので、気軽に開発できるのがよいですね。

例えば、Espruinoに人感センサーをつないで人の動きを検知するサンプルコードは、このようになります。

setWatch(function() {
        LED2.write(1);
        setTimeout(function() {
        LED2.write(0);
    }, 3000);
}, A1, {repeat:true, edge:"rising"});

EspruinoのJavaScriptには、ハードウェアを制御するための専用APIが、搭載されています。上記のコードでは setWatch というsetIntervalに似た関数で、センサーの状態を取得するループ処理を行っています。

筆者はこのプログラムをもうちょっと作りこんで、ウチの猫のトイレに設置しています。猫ちゃんがトイレに入ったり出たりするのを検知して、クラウドにデータを送信し、スマートフォンにプッシュ通知するような仕組みをつくりました。猫のトイレがすぐに掃除できるようになったので、猫ちゃんのストレスが減りました（減ったにちがいないｗ）。この事例は日経テクノロジーオンラインで取り上げていただきました。

Espruinoに関する日本語の情報はあまり多くないですが、いまのところEspruino Advent Calendar 2014がよくまとまっていると思います。個人的にはJS Boardの中で一番気に入っているデバイスなので日本でももっとユーザーが増えてほしいところですね。

これからEspruinoを買おうと思っている方には、上記のEspruino Boardもいいんですが、現在開発中のEspruino Picoもオススメです。Espruino PicoはEspruino Boardよりもさらに小さいUSBメモリサイズの基盤です。とても小さな基盤なのでいろいろなケースに活用できるのではないでしょうか。Espruino Picoのプレオーダー分は、2015年春ごろに発送される予定のようです。

Tessel

tessle.io

DragonInnovationで資金調達されたプロジェクトで、Espruinoよりも少し大きなマイコンです。Wifiチップを搭載しているので、単独でWebにアクセスする機能を持っています。

Tesselの特長は、多くの専用モジュールが販売されていることです。加速度センサ、GPS、BLE、サーボコントローラー、NFCなど多くのモジュールが別売りで販売されていて、Tesselのポートに差し込むだけで利用できます。Espruinoに市販のセンサーを接続する場合は電子回路の知識が必要ですが、Tesselの場合は専用ポートに差し込むだけなので回路の知識は不要です。

TesselのJavaScript APIはnode.js互換な仕様になっています。例えば、加速度センサーモジュールを接続してデータを取得するサンプルコードは以下です。

var tessel = require('tessel');
var accel = require('accel-mma84').use(tessel.port['A']);

accel.on('ready', function () {
    accel.on('data', function (xyz) {
        console.log('x:', xyz[0].toFixed(2), 'y:', xyz[1].toFixed(2), 'z:', xyz[2].toFixed(2));
    });
});

accel.on('error', function(err){ console.log('Error:', err); });

JavaScriptらしいイベントドリブンな記述で、加速度センサーのデータがリアルタイムに受信できます。このコードでrequireしているtessel, accel-mma84といったnode.jsのモジュールライブラリはnpmでインストールできます。

Tesselは基本的に、4つのモジュール専用ポートに専用モジュールを接続して利用するスタイルですが、専用モジュール以外が利用できないかというと、そうではありません。Tesselには汎用的なGPIOポートも搭載されているので、秋月電子あたりで買ってきたセンサーをつなげることもできます。下図はTesselのGPIOポートでLEDを点滅させてみたところです。

　▲TesselのGPIOポートにLEDを接続してLEDを点滅させている

/*
* TesselのGPIOでLチカ
* LEDのアノードをTesselの TX/G1
* LEDのカソードをTesselの GND
* に接続する
*/
 
var tessel = require('tessel');
var gpio = tessel.port['GPIO'];
 
gpio.digital[0].write(0); // TX/G1
 
flag = true;

setInterval(function() {
  if(flag == true) {
    flag = false;
  } else {
    flag = true;
  }
  console.log(flag);
  if(flag) gpio.digital[0].write(1);
  if(!flag) gpio.digital[0].write(0);
}, 1000);

Tesselは今回紹介するデバイスで唯一国内販売されているデバイスです。スイッチサイエンスで購入できます。国内で買える、電子回路の知識が不要、node.js互換など、ハードウェアのない方でも入門しやすいデバイス、といえるのではないでしょうか。

Spark

spark.io

Sparkはマイコンというよりは、サーバーサイドを含めたオープンなIoTプラットフォームとして開発されています。昨年、Lion Wells Capital、O’Reilly AlphaTech Venturesなどから出資を受けて話題となりました。

Sparkから発売されている小型マイコンボード Spark Coreは、72 Mhz Cortex M3とCC3000 Wifi moduleを組み合わせた「マイコン付きWifiモジュール」と呼べるようなもので、Arduino互換な言語でプログラムを記述します。

EspruinoやTesselと違って、JavaScript使わへんやんけと思われるかもしれませんが、Spark Coreから取得したデータはすべてWeb APIで取得できるようになっており、Web APIをラップしたJavaScript SDKがnode.js、Webブラウザで利用できるよう提供されています。

Spark Coreへプログラムを転送する場合は、Espruino、Tesselと違って、PCとUSB接続をする必要がありません。クラウド上のIDE Spark Buildで編集したコードをFlashすると、ネットワークに接続されているSpark Coreにリモート転送され、実行される仕組みになっています。

下のコード例では、Spark Coreと人感センサーをつないでセンサーの値を detected 変数にバインドしています。（一部抜粋）

Spark.variable("detected", &detected, INT);
...
detected = motionDetect();

上記のようにバインドされた値は以下のようにアクセスすることで、クラウドからセンサーの値を同期的に取得することができます。

curl -G https://api.spark.io/v1/devices/[Device ID]/detected \
  -d access_token=[Access Token]

これをSparkのJavaScript SDKを利用して記述すると以下のようになります。

var spark = require('spark');
var ret = spark.login({"accessToken": "[Device Token]"});
device.getVariable('detected', function(err, data) {
  if (err) {
    console.log('An error occurred while getting attrs:', err);
  } else {
    console.log('Core attr retrieved successfully:', data);
  }
});

SparkはSDKの他にサーバー、デバイス間の通信プロトコルが、node.jsモジュールで実装されています。それを利用するモックアップサーバーもnode.jsコードで公開されているので、結構JS成分が多いです。SparkのプロトコルはCoAP+SSLで設計されていて、このあたりはWoTというよりはIoTなんですが、かなり興味深い実装です。

筆者がSpark Coreを使ってみた感覚では、長時間にわたる動作についてはTessel、Espruinoに比べて安定していると感じました。Tessel、Espruinoは実験や製品の試作レベルでカジュアルに利用できるデバイスですが、Sparkは、それらよりも一歩製品レベルに踏み込んでいるような印象があります。

現在販売されているデバイス Spark Core は39ドルで販売されていますが、次世代のSparkデバイスである PhotonとそのコアモジュールP0が2015年5月に発売予定となっており、現在プレオーダーが受け付けられています。価格はPhotonが19ドル、P0が10個で100ドル（1個あたり10ドル）となっており、IoT製品の量産に利用できるような価格帯となっています。

まとめ

個人的な話ですが、最近ハルロックの影響で電子工作にはまってます。仕事が終わってからハンダ付けをしたり、ブレッドボードで配線したりしてる今日この頃なんですが、マイコンのプログラミングはC++とかJavaとかでやるのはなんか負けた気がするので、JavaScriptでプログラミングできるものにこだわっています。

そういったWeb技術、特にJavaScriptを中心的に利用している組み込み機器を個人的に”JS Board”と呼んでいて、勉強会を開催したりしています。先日のHTML5 Conference 2015でも出展させていただきました。今後も勉強会などをやって、情報共有などをしていこうと思っています。

　▲HTML5 Conference 2015にJS Board勉強会が出展。さまざまなJS Boardデバイスが展示されている。

これからまだまだJavaScriptを活用するデバイスが続々と登場してきそうです。 JS Boardに興味を持った方々、ぜひ一緒に勉強していきましょう！

こんにちは！html5jマークアップ部 部長の村岡です。
この記事では2014年3月8日に開催されたMarkup Cafe FUKUOKA Vol.1のイベントレポートをさせていただきます。

大阪に続く地方開催でのMarkup Cafe、今回も20名以上の方々に参加いただいて様々なマークアップ案が披露されました。

Markup Cafe FUKUOKAの開催にあたっては準備や開催告知などで地元のHTMLマークアップコミュニティである福岡マークアップ勉強会、通称「マカベン」の方々にご協力いただきました。この場を借りて改めて御礼申し上げます。ありがとうございました。

福岡マークアップ勉強会「マカベン」（敬称略）

• 西村 宗倫（左）
• 筆者（中央左）
• 卜部 加奈子（中央右）
• 田村 章吾　ましじめ（右）

FUKUOKA Vol.1 マークアップ事例の解説

今回は地域スタッフの方々から「普段マークアップで疑問に思ってることをみんなで検討したい」というご意見があったので、出題を2題にし、残りの時間でQ&Aを行う構成にしました。

このタイムテーブルは実際やってみてよかったです。普段は3題出題するんですが、結構頭が疲れるし、ゆっくりコーヒーを飲む時間もなかったりするので（笑）。2題がんばった後にQ&Aコーヒーを飲みながら談笑するくらいがカフェっぽくていいです。これからはこの時間配分でやろうかなと思いました。

1問目 記事のヘッダ

今回の2題はマカベンの方々に考えていただきました。最初のお題は記事ページのヘッダ部分のマークアップです。ブログなどでよく使われるレイアウトですね。サンプルとしてこのHTML5 Experts.jpのヘッダ部分を採用しました。よくみるとパンくず、タイトル、著者の写真、日付、ソーシャルボタンなどなど……このヘッダの情報量はかなり多いですね。みなさん結構苦戦してたみたいです。

お題1:Aチーム

<article>
<nav>
<ul>
<li>HTML5Experts.jp</li>
<li>中島直博</li>
<li>続・よくある3つのデザインから考える、マ...</li>
</ul>
 </nav>
<header>

<div id=”flame”>
<figure> picture  </figure>
<h1>続・よくある3つのデザインから考える、マークアップの最適解</h1>
<p>中島直博</p>
<ul>
<li><a href=”#”>CSS</a></li>
<li><a href=”#”>マークアップ</a></li>
</ul>
<time datetime=”2013-11-08”>2013年11月8日</time>
</div>

<aside>
<ul>
<li>facebook</li>
<li>twitter</li>
<li>google+</li>
<li>hatebu</li>
<li>pocket</li>
<li>☆</li>
</ul>

 </aside>

</header>
</article>

Aチームのポイントは以下です。

• 全体をarticle要素とした
• パンくずはnav要素とし項目をul, li要素でリストとした
• nav要素内に見出しを入れるかどうか悩んだが、入れなかった
• パンくずの下、タイトル、ソーシャルボタン等をheader要素とした
• ソーシャルボタン群はaside要素とした
• 著者名はp要素とした

まず、HTML5で新たに登場したarticle要素で記事全体を囲っています。このお題ではヘッダの下に記事本文が続くことが想定できるので、本文や記事のフッタがあればそのフッタもarticle要素内に入るでしょう。

Aチームはnav要素がセクショニング・コンテンツであることに着目して、見出し要素を入れるべきかどうか悩んだようです。ここは悩むケースが出てくるところですね。個人的にはレイアウト上見出し表記がない場合には必要がないと考えていますが、スクリーンリーダー等に配慮して見出し要素で「パンくずナビゲーション」などと記載しCSSでdisplay:none;してもよいかもしれないです。

article要素は自己完結するコンテンツを表します。HTML5を学ぶ上で、articleやsectionといった新しい要素は使いどころが難しいとよく言われますね。個人的には新聞の紙面から記事をスクラップするようなケースで理解しています。

新聞中のひとつの記事をハサミで切り取ってスクラップファイルに収録する場合は、記事のタイトルや本文、補足事項など、後から読んだときに情報が欠損しない範囲を切り取るでしょう。そのようなイメージでarticle要素を使うのが適当だと考えています。

お題1:Bチーム

<nav>
<ol>
<li>xHTML5Expert.jp</li>
<li>中島直博</li>
<li>続・よくある3つのデザインから考える、マークアップの最適解</li>
</ol>
</nav>

<article>
<header>
<h1>続・よくある3つのデザインから考える、マークアップの最適解</h1>
<figure>
<img src="" alt="">
<figcaption>中島直博</figcaption>
</figure>

<ul>
<li><a href="">CSS</a></li>
<li><a href="">マークアップ</a></li>
</ul>
<time datatime="2013-11-08">2013年11月8日</time>

<ul>
<li>facebook</li>
<li>twitter</li>
<li>google+</li>
<li>はてぶ</li>
<li>pocket</li>
<li>評価</li>
</ul>
</header>
</article>

Bチームのポイントは以下です。

• パンくずより下の部分をarticle > header要素とした
• パンくずの階層を意識してol要素とした
• 著者の写真、著者名やfigure, figcaption要素とした。

Bチーム中の参加者の方が終わってからブログを書かれています。勉強会の経験をもとにマークアップを再考されてるのはとても素晴らしいですね！ボクも読んで勉強になりました。

このチームでは、パンくずには階層（≒順序）があると考えてol要素でリスト化しています。また、著者の写真と著者名の関連性を意識してかそれらをfigure, figcaption要素でマークアップしています。

figure要素は図表を表し、figcaption要素はその説明を表します。なるほど…著者近影と著者名が図表とその説明にあたると解釈できるかもしれないですね。興味深いです。その他、日付をtime要素で囲っているのも特徴的ですね。

お題1:Cチーム

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

<article>

	<header>
		
		<nav prefix="v: http://rdf.data-vocabulary.org/#">
			<span typeof="v:Breadcrumb">
				<a href="#" rel="v:url" property="v:title">
					HTML5Experts.jp
				</a> ›
			</span>
			<span typeof="v:Breadcrumb">
				<a href="http://www.example.com/dresses/real" rel="v:url" property="v:title">
					中島 直博
				</a> ›
			</span>
			<span typeof="v:Breadcrumb">
				<a href="http://www.example.com/dresses/real/green" rel="v:url" property="v:title">
					続・よくある3つのデザインから考える、マ...
				</a>
			</span>
		</nav>

		<div prefix="v: http://rdf.data-vocabulary.org/#" typeof="v:Person">
			<img class="avatar" src="#" alt="中島 直博">
			<h1>続・よくある3つのデザインから考える、マークアップの最適解</h1>
			<span property="v:name">中島 直博</span>
			<div>
				<ul class="tags">
					<li><a href="#"><data value="css">CSS</data></a></li>
					<li><a href="#"><data value="markup">マークアップ</data></a></li>
				</ul>
			</div>
			<time datetime="2013-11-08">2013年11月8日</time>
		</div>

		<div>

			<div class="social_buttons">
				<ul>
					<li>各SNSタグ</li>
					<li>各SNSタグ</li>
					<li>各SNSタグ</li>
					<li>各SNSタグ</li>
					<li>各SNSタグ</li>
				</ul>
			</div>

			<div class="rating">
				<img src="#" alt="評価4.5" class="star">
				(<span class="counting">6</span>人が評価しています。)
			</div>
			
		</div>

	</header>

	<section>
		
		本文〜

	</section>

</article>
	
</body>
</html>

Cチームのポイントは以下です。

• HTML5バリデーション合格
• RDFa Breadcrumb, Personを使用

CチームはマークアップをHTMLバリデーターに通し、合格してから発表に臨んでいました。そのためにdoctypeやhtml要素もマークアップされています。そこまで考えていたとは。なんかかっこいいですねｗ

情報をよりセマンティックにするためパンくずはBreadcrumb, 著者写真、著者名はPersonのRDFaスキーマを使いマークアップしています。このチームの後からの反省点として、Personスキーマはちょっとおかしかったかも。というのがありましたが、まあこれはこれでいいんじゃないですかね。
全体的に情報の順番とCSSの装飾のバランスが意識されたマークアップです。

お題1:Dチーム

<article>
 <nav>
   <ol>
    <li><a href="">ホーム</a></li>
    <li><a href="">現在地</a></li>
</ol>
 </nav>   

<header>
    <h1>タイトルタイトル</h1>
    <figure>
     <img src="">
     <figcaption>名前</figcaption>
    </figure>
    
    <dl>
        <dt>タグ</dt>
        <dd>tag</dd>
        <dd>tag</dd>
        <dd>tag</dd>
    </dl>
    <time>2013年9月25日</time>
</header>

<aside>
    <div>sns</div>
    <div>記事の評価</div>
 </aside>
    
  <section>本文</section>
  </article>

Dチームのポイントは以下です。

• タイトル、著者情報、タグ、日付をheader要素とした
• ぱんくずはnav, ソーシャルボタン群はaside要素とした
• パンくずはol要素とした
• 著者の写真、著者名やfigure, figcaption要素とした

他のチームと比べてheader要素の範囲が限定的なのが特徴的です。パンくずやソーシャルボタンがヘッダなのかどうかについては、各チームでもいろいろな意見が出たようですが、この辺りは制作者の解釈によって様々ありそうですね。

パンくずでol要素を使う、著者情報にfigure, figcaption要素を使うという考え方はBチームに似ています。タグをdl要素で定義リストとしているところも特徴的ですね。

お題1:Eチーム

<header>
		<div itemscope itemtype="http://">
		    <a href="http://" itemprop="url">
		      <span itemprop="title">HTML5Experts.jp</span>
		    </a>
		    <img src="img/arrow.png" alt="の中の">
		    <div itemprop="child" itemscope itemtype="http://">
		      <a href="http://" itemprop="url">
		        <span itemprop="title">中島 直博</span>
		      </a>
		    	<img src="img/arrow.png" alt="の中の">
		      <div itemprop="child" itemscope itemtype="http://">
		        <a href="http://" itemprop="url">
		          <span itemprop="title">続・よくある３つのデザインから考える、マークアップの最適解</span>
		        </a>
		      </div>
		    </div>
		</div>

		<section>
			<h1>続・よくある3つのデザインから考える、マークアップの最適解</h1>
		</section>
		<figure itemprop="image"><img src="author.png" alt=""></figure>
		<span itemprop="author">中島直博</span>
		<time itemprop="pubdate" datetime="2013-11-08">2013年11月8日</time>
		<dl class="tags">
			<dt>タグ</dt>
			<dd>
				<ul>
					<li><a href="#">CSS</a></li>
					<li><a href="#">マークアップ</a></li>
				</ul>
			</dd>
		</dl>
		<aside class="sns-share">
			<ul>
				<li>いいね</li>
				<li>ツイート</li>
				<li>g+</li>
				<li>B!</li>
				<li>Pocket</li>
				<li>
                    <img alt="4.5個の星です" class="star">
                    <img alt="" class="star">
                    <img alt="" class="star">
                    <img alt="" class="star">
                    <img alt="" class="star-half"> 6人が評価しています。</li>
			</ul>
		</aside>
	</header>

Eチームのポイントは以下です。

• 全体をheader要素とした
• パンくずの構造をitempropで定義、矢印画像のalt属性値を”の中の”とした
• <dt>タグ</dt>はCSSで非表示にすることを想定
• スター評価の画像グループはWEBアクセシビリティガイドラインに沿ってマークアップした

この問題では、パンくず、ソーシャルボタン群をヘッダとして扱うかどうかが議論の焦点となっていましたが、Eチームは記事ヘッダの一部とみなしてheader要素内としています。

Eチームは特にスクリーンリーダーに配慮された印象が強いマークアップです。
パンくずのデザインで使われている”＞”を画像とし、alt属性値を”の中の”とすることで、スクリーンリーダーで「◯◯の中の◯◯」と読み上げる配慮をしています。さらにDチームと同様タグブロックにdt要素でタイトルを記載し、CSSで非常時とすることでスクリーンリーダーでの読み上げに配慮しています。

スター評価の画像グループでは、一番上の画像のalt属性値を”4.5個の星です”とし、その他の画像のalt属性値を空にしています。これはG196: 画像のグループにある一つの画像に代替テキストを提供して、そのグループの全ての画像を説明するの実装例に沿ったもので、同じくスクリーンリーダーでの読み上げに配慮したものになっています。

部長はこう書く

お題1:部長

<article itemscope itemtype="http://schema.org/Article">
    <header>
        <div xmlns:v="http://rdf.data-vocabulary.org/#">
           <span typeof="v:Breadcrumb">
             <a href="#" rel="v:url" property="v:title" class="link">
                 HTML5Experts.jp
            </a>
           </span>
           <span typeof="v:Breadcrumb">
            <a href="#" rel="v:url" property="v:title" class="link">
              中島直博
            </a>
           </span>
           <span typeof="v:Breadcrumb">
            <a href="#" rel="v:url" property="v:title" class="current">
              続・よくある3つのデザインから考える、マークアップの最適解
            </a>
           </span>
        </div>
        <div>
            <div class="author-photo">
                <img alt="中島直博" src="photo.jpg">
            </div>
            <div class="title">
                <h1 itemprop="name">
                    続・よくある3つのデザインから考える、マークアップの最適解
                </h1>
            </div>
            <div class="author">
                <span itemprop="author">中島直博</span>
            </div>
            <div class="tags" itemprop="keywords">
                <a href="#">CSS</a>,
                <a href="#">マークアップ</a>
            </div>
            <div class="publish-date">
                <time itemprop="datePublished" datetime="2013-11-08">2013年11月8日</time>
            </div>
        </div>
        <aside>
            <ul class="sns-buttons">
                <li>いいね！</li>
                <li>ツイート</li>
                <li>g+</li>
                <li>B!</li>
                <li>Pocket</li>
            </ul>
            <div class="stars">
                <img src="star.jpg" alt="星5つ中、星4.5個">
                <img src="star.jpg" alt="">
                <img src="star.jpg" alt="">
                <img src="star.jpg" alt="">
                <img src="star.jpg" alt="">
            </div>
            <span itemprop="interactionCount" content="UserLikes:6">(6人が評価しています)</span>
        </aside>
    </header>
</article>

• schema.org Articleを採用し、記事情報をマークアップした
• パンくずはRDFa Breadcrumbを採用
• スター評価、ソーシャルボタン群はaside要素とした
• スター評価の画像グループはG196の実装例に沿ってマークアップした

懸案のパンくず、ソーシャルボタン群はheader要素内に入れています。その上でソーシャルボタン、スター評価はaside要素としました。特に厳密に考慮したわけではないですが、まあヘッダの一部でよいと思っています。

パンくずは前回の時と同様Googleのリッチスニペットのマークアップを参考にしました。記事全体の情報の記述もGoogleウェブマスターツールの記事をヒントにArticleスキーマを使っています。

別にGoogle信者というわけじゃないですが、ウェブマスターツールのヘルプにあるように、将来的に検索エンジン等でサーチフレンドリーとなる可能性が高まるのは良いことだと思います。

スター評価の画像グループはEチームと同様WCAGのG196の実装例に沿いました。このような画像グループのケースごとの実装はWCAGのドキュメントのほか、最近公開されたWAI Web Accessibility Tutorials – Groups of Imagesのドキュメントも参考になります。

2問目 複数のリンクリスト／ナビゲーション

2問目は、ページのサイドによくあるリンクのリスト、ナビゲーションなどのレイアウトです。画像中のグローバルナビゲーションの下、メインコンテンツの右側の部分です。ウェブページではこのような上部のグローバルナビゲーションのほかにサイドペインにサブナビゲーションやバナーなど複数のテキストリンク、ボタンなどが並ぶレイアウトがよくありますね。一見単純なマークアップになりそうな気がしますが、ここでも細かいところでいろいろな疑問やアイデアが出てきました。

お題2:Aチーム

<aside>
<section class="article_list">
<h1>マークアップカフェ</h1>
<ol>
<li><a href=”#”>タイトル01</a></li>
<li><a href=”#”>タイトル02</a></li>
<li><a href=”#”>タイトル03</a></li>
<li><a href=”#”>タイトル04</a></li>
<li><a href=”#”>タイトル05</a></li>
<li><a href=”#”>タイトル06</a></li>
<li><a href=”#”>タイトル07</a></li>
<li><a href=”#”>タイトル08</a></li>
<li><a href=”#”>タイトル09</a></li>
<li><a href=”#”>タイトル10</a></li>
</ol>
</section>

<div class=”banner”>
<ul>
<li><a href=”#”><img src=”#” alt=”マークアップカフェについて”></a></li>
<li><a href=”#”><img src=”#” alt=”マカベンについて”></a></li>
<li><a href=”#”><img src=”#” alt=”マカベンについて”></a></li>
</ul>
</div>

<section class=”link”>
<h1>福岡のIT勉強会</h1>
<ul>
<li><a href=”#” title=”ダミーテキスト”>ダミーテキスト</a></li>
<li><a href=”#” title=”ダミーテキスト”>ダミーテキスト</a></li>
<li><a href=”#” title=”ダミーテキスト”>ダミーテキスト</a></li>
<li><a href=”#” title=”ダミーテキスト”>ダミーテキスト</a></li>
</ul>
</section>
</aside>

Aチームのポイントは以下です。 * 全体をaside要素とした * 1番目のリストをol要素とした * 1, 3番目のリストをsection要素とした

まず、このブロック全体をaside要素としています。aside要素はコンテンツには関連があるが、切り離しても問題がないようなセクションを表します。1番目のリストをローカルナビゲーションとみなした場合、asideにするのは違和感がないか？という意見がありました。Aチームではaside=サイド部分というような感覚で考えていたようなので、解釈が違っていたという反省があったようです。

1番目のリストはulかolか悩んだようですが、テキストに番号が降ってあったのでolにしたそうです。テキストの番号がリストの順序に意味的に直結している場合はそうかもしれませんが、これは文書構造をどう設計したいかによるかもしれないですね。

1, 3番目のリストをsectionとし、2番目をdivとしています。この場合は文書のアウトラインがおかしくなるのでは？という指摘がありました。

実際にこのマークアップをHTML5 Outlinerにかけてみると図のようになります。

アウトライン上に2番目のリストが現れていません。2番目のリストもセクショニング・コンテンツでよいかもしれないという意見がありました。

全体的に情報の文脈と、文書構造をどう切り分けてマークアップしていくかということをよく考えさせられるマークアップでした。

お題2:Bチーム

<section>
<nav>
<h1>マークアップカフェ</h1>
<ol>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ol>
</nav>

<aside>
<section>
<h1 class="hide">広告</h1>
<div><a href=""><img src="" alt=""><p>マークアップカフェについて</p></a></div>
<div><a href=""><img src="" alt=""><p>マークアップカフェについて</p></a></div>
<div><a href=""><img src="" alt=""><p>マークアップカフェについて</p></a></div>
</section>

<section>
<h1>最近のIT勉強会</h1>
<ul>
<li><a href="" target="_blank"></a></li>
<li><a href="" target="_blank"></a></li>
<li><a href="" target="_blank"></a></li>
<li><a href="" target="_blank"></a></li>
</ul>
</section>
</aside>
</section>

Bチームのポイントは以下です。

• 1番目のリストをol要素とした
• 2番目のリストに見出しをつけ、CSSで非表示とする
• 1番目のリストをnav, 2,3番目のリストをそれぞれsection要素とした
• 2, 3番目のリストをaside要素とした
• 全体をsection要素とした

1番目のリストはAチームと同様、順番を意識してol要素としています。2番目のリストに見出しをつけてCSSで非表示とすることで、スクリーンリーダー等での読み上げに配慮しています。

セクショニングは1番目をnav、2,3番目をsectionとし、2,3番目をasideとし、全体をsectionとしています。これをHTML5 Outlinerにかけてみると次のようになります。

Untitled Section（見出しのないセクション）が余分に現れてきています。特に「広告」、「最近のIT勉強会」がUntitled Sectionで下げられてしまっていますね。チームではHTML5の要素でできるだけ意味的なまとまりをつくろうと考えたようですが、結果的にアウトラインがおかしくなっています。

HTML5で登場したarticle, section, nav, asideといったセクショニング・コンテンツは文書のアウトラインを表現するので、意味づけだけを意識して使うとアウトラインの構造がおかしくなる可能性があります。ここが使いどころに悩むところですね。その意味で非常に参考になるマークアップです。

お題2:Cチーム

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

<div class="side_menu">

	<div class="side_menu_block">
		<nav class="nav_local">
			<h1 class="cat_title">マークアップカフェ</h1>
			<ul>
				<li><a href="#" rel="prev">タイトル01</a></li>
				<li class="current"><a>タイトル02</a></li>
				<li><a href="#" rel="next">タイトル03</a></li>
				<li><a href="#">タイトル04</a></li>
				<li><a href="#">タイトル05</a></li>
				<li><a href="#">タイトル06</a></li>
				<li><a href="#">タイトル07</a></li>
				<li><a href="#">タイトル08</a></li>
				<li><a href="#">タイトル09</a></li>
				<li><a href="#">タイトル10</a></li>
			</ul>
		</nav>
	</div>
	
	<div class="side_menu_block">
		<aside class="banners">
			<ul>
				<li><a href="#" target="_blank"><img src="#" alt="xxxのバナー"></a></li>
				<li><a href="#" target="_blank"><img src="#" alt="yyyのバナー"></a></li>
				<li><a href="#" target="_blank"><img src="#" alt="zzzのバナー"></a></li>
			</ul>
		</aside>
	</div>

	<div class="side_menu_block">
		<aside class="external_link">
			<h1>福岡のIT勉強会</h1>
			<ul>
				<li><a href="#" target="_blank">ダミーテキスト</a></li>
				<li><a href="#" target="_blank">ダミーテキスト</a></li>
				<li><a href="#" target="_blank">ダミーテキスト</a></li>
				<li><a href="#" target="_blank">ダミーテキスト</a></li>
			</ul>
		</aside>
	</div>
	
</div>

</body>
</html>

Cチームのポイントは以下です。

• HTML5バリデーション合格
• 1番目のリストはnav要素とした
• 2, 3番目のリストはそれぞれaside要素とした
• それぞれのリストをdivで囲い同一のクラス名を割り当てた

1問目と同様バリデーションに合格していますｗ 1番目のリストはローカルナビゲーションとみなしnav要素としました。ulで順番なしリストとし、a要素中のrel属性でカレントページの前後を表しています。

2,3番目のリストはそれぞれをaside要素としています。ページコンテンツから切り離せる部分という考えはBチームと同様ですが、アウトラインとCSSを考慮してのようです。

各リストはCMSではウィジェット機能で提供されるのが多いことに配慮して各リストをdivとし、同一のクラス名を当てています。現実的な配慮ですね。

お題2:Dチーム

<article>メインコンテンツ</article>

<article>
  <section>
      
    <h1>マークアップカフェ</h1>
    <ul>
      <li><a href="">タイトル01</a></li>
      <li class="current"><a href="">タイトル02</a></li>
      <li><a href="">タイトル03</a></li>
      <li><a href="">タイトル04</a></li>
      <li><a href="">タイトル05</a></li>
      <li><a href="">タイトル06</a></li>
    </ul>
  </section>
  <aside>
    <section>
      <h1>バナーリンク</h1>
      <ul>
        <li><a href="" class="js-blank"><img src="" alt="マークアップカフェについてへリンク"></a></li>
        <li><a href="" class="js-blank"><img src="" alt="マカベンについてへリンク"></a></li>
        <li><a href="" class="js-blank"><img src="" alt="マカベンについてへリンク"></a></li>
      </ul>
    </section>
    <section>
      <h1>福岡のIT勉強会</h1>
      <ul>
        <li><a href="" class="js-blank">ダミーテキスト<img src="" alt="外部へリンク"></a></li>
        <li><a href="" class="js-blank">ダミーテキスト2<img src="" alt="外部へリンク"></a></li>
        <li><a href="" class="js-blank">ダミーテキスト3<img src="" alt="外部へリンク"></a></li>
        <li><a href="" class="js-blank">ダミーテキスト4<img src="" alt="外部へリンク"></a></li>
      </ul>
    </section>
  </aside>
</article>

Dチームのポイントは以下です。

• 全体をarticle要素とした
• 各リストをsection要素とした
• 2, 3番目のリストをaside要素とした
• 外部リンクにクラス名を割り当て、JavaScriptで別タブを開く想定

全体をarticle要素としています。このリンクリスト／ナビゲーションの部分だけで完結したコンテンツと言えるかどうかは、微妙な気がしますね。article要素の解釈が難しいところですが、ここはarticleでなくてもいいのではないでしょうか。

アウトラインの取り方はBチームとほぼ同様、HTML5 Outlinerでも同様のアウトライン構成が見られました。各リストを意味的にまとめたいという意図が伝わりますが、結果的にアウトラインがおかしくなっているのはおしいですね。

外部リンクについては、各チームがterget=”_blank”を利用しているのに比べてクラス名を割り当てJavaScriptでの制御を想定しているのが特徴的です。terget属性はリンク先の表示方法を指定します。_blankを指定すると強制的に別ウィンドウ（タブ）で開く動作になりますが、このような動作に慣れないユーザーに対して混乱を与える可能性があります。

SCR24: プログレッシブ・エンハンスメントを用いて、利用者の要求に応じて新しいウィンドウを開くではこれに配慮するためのJavaScriptによる実装例が収録されています。このような配慮は、Webアクセシビリティとしても重要ですね。

お題2:Eチーム

<div>
	<nav role="navigation">
		<h2>マークアップカフェ</h2>
		<ul>
			<li><a href="">タイトル01</a></li>
			<li><a href="">タイトル02</a></li>
			<li><a href="">タイトル03</a></li>
			<li><a href="">タイトル04</a></li>
			<li><a href="">タイトル05</a></li>
			<li><a href="">タイトル06</a></li>
			<li><a href="">タイトル07</a></li>
			<li><a href="">タイトル08</a></li>
			<li><a href="">タイトル09</a></li>
			<li><a href="">タイトル10</a></li>
		</ul>
	</nav>
	<aside>
		<h2 class="reader">広告</h2>
		<ul>
			<li><a href="" target="_blank"><img src="" alt="マークアップカフェについて"></a></li>
			<li><a href="" target="_blank"><img src="" alt="マカベンについて"></a></li>
			<li><a href="" target="_blank"><img src="" alt="マカベンについて"></a></li>
		</ul>
	</aside>
	<aside>
		<h2>福岡のIT勉強会</h2>
		<ul>
			<li><a href="" target="_blank">ダミーテキスト</a></li>
			<li><a href="" target="_blank">ダミーテキスト</a></li>
			<li><a href="" target="_blank">ダミーテキスト</a></li>
			<li><a href="" target="_blank">ダミーテキスト</a></li>
		</ul>
	</aside>
</div>

Eチームのポイントは以下です。

• 全体をdiv要素とした
• 1番目のリストはnav要素としrole=”navigation”を設定
• 2, 3番目のリストはそれぞれaside要素とした

テーマは「年度末の納期の案件」だとかｗ
忙しい中で無駄なく的確にマークアップするという条件を自ら設定してのトライです。

まず、全体をdivとしてCSSの割り当てを想定しました。レスポンシブデザインによるレイアウトのダイナミックな変更をも視野に入れたそうです。2番目のリストに見出しを設定し、非表示としました。B, Dチームと同じ配慮ですね。

1番目のリストはローカルナビゲーションとみなしnav要素としARIAのrole=”navitaion”を指定。2,3番目のリストはそれぞれをaside要素としました。

セクショニング・コンテンツの使い方はCチームとほぼ同様です。ちなみにnav要素のロールはデフォルトでnavigationなので省略可能です。

なるほど、繁忙期という条件だけあって、そつのないマークアップですねｗ

部長はこう書く

お題1:部長

<div>
    <nav>
        <h2>マークアップカフェ</h2>
        <ul>
            <li><a href="">タイトル01</a></li>
            <li><a href="">タイトル02</a></li>
            <li><a href="">タイトル03</a></li>
            <li><a href="">タイトル04</a></li>
            <li><a href="">タイトル05</a></li>
            <li><a href="">タイトル06</a></li>
            <li><a href="">タイトル07</a></li>
            <li><a href="">タイトル08</a></li>
            <li><a href="">タイトル09</a></li>
            <li><a href="">タイトル10</a></li>
        </ul>
    </nav>
    <aside>
        <h2 class="sr-only">広告</h2><!-- http://getbootstrap.com/getting-started/#accessibility -->
        <ul>
            <li><a href="" rel="external"><img src="" alt="マークアップカフェについて"></a></li>
            <li><a href="" rel="external"><img src="" alt="マカベンについて"></a></li>
            <li><a href="" rel="external"><img src="" alt="マカベンについて"></a></li>
        </ul>
    </aside>
    <aside>
        <h2>福岡のIT勉強会</h2>
        <ul>
            <li><a href="" rel="external">ダミーテキスト</a></li>
            <li><a href="" rel="external">ダミーテキスト</a></li>
            <li><a href="" rel="external">ダミーテキスト</a></li>
            <li><a href="" rel="external">ダミーテキスト</a></li>
        </ul>
    </aside>
</div>

• 1番目のリストをnav要素とした
• 2番目のリストに見出しをつけた
• セクショニングはC, Eチームと同様
• 外部リンクにrel=”external”を設定

1番目のリストはローカルナビゲーションとみなしてnav要素としました。セクショニングの考え方はC, Eチームと同様です。

2番目のセクションにはB, D, Eチームと同様に広告だとわかる見出しをつけています。なくてもいいかなと思ったんですが、読み上げの脈絡を考えると、このケースではあったほうがいい感じかなと思いました。CSSでの非表示を想定しています。

余談ですが、このクラス名”sr-only”はBootstrapで使われているクラス名を参考にしています。BootstrapのようなCSSフレームワークでもアクセシビリティが考えられているんですね。

広告、福岡のIT勉強会リンクリストのリンク先は外部リンクとみなして、rel=”external”を設定しました。外部リンクを開く制御はDチームと同様JavaScriptの利用を想定しています。

rel属性のexternal値はそのリンクが外部のリンクであることを示します。jQuery Mobileではrel=”external”のリンクはAJAXでのページ遷移処理がオフになり内部ページヘとのアクセスと異なる挙動になります。このような事例があるのも参考に、マークアップしてみました。

福岡のマークアップ熱はすごかった！

MarkupCafeを楽しんだ後は、みんなでやったマークアップの反省や、普段疑問に思ったことを話し合いました。福岡はマカベンの活躍もあって昔からHTMLマークアップに対する関心が高い地域です。皆さんが熱心に意見交換されており、なにより間違いをおそれず積極的にHTML5マークアップを実践していこうという意識が素晴らしかったです。

個人的には懇親会で食べた手羽先、ラーメンが忘れられません（笑）。福岡の皆さん、また行きたいと思いますのでぜひよろしくお願いします！！

さて、今日の問題、皆さんならどうマークアップしますか？

こんにちは！html5jマークアップ部 部長の村岡です。 この記事では2013年の12月20日に開催されたMarkup Cafe OSAKA Vol.1のイベントレポートをさせていただきます。

東京で2回の開催に続いて3回目であり、はじめての地方開催となるMarkup Cafe、大阪では20名以上の方々に参加いただき、大変盛り上がりました。たくさんの方々からさまざまな観点からのマークアップ案がたくさん出てきて、検討が白熱しました。

なお、Markup Cafe OSAKAの開催にあたっては準備や開催告知などで地元のマークアップ好きの方々にご協力いただき、開催が実現しました。この場を借りて改めて御礼申し上げます。ありがとうございました。

MarkupCafe OSAKAの実現には、以下をはじめとする方々にご尽力いただきました。 スタッフのみなさんには今後もhtml5jマークアップ部員としてMarkupCafe開催にご協力いただく予定です。（敬称略）

• 額賀順子 @nukaga
• なかしず @nakashizu
• 松田 @matsudasu
• ながとみ ちはる @luchino__

OSAKA Vol.1 マークアップ事例の解説

今回、初の地方開催となるMarkupCafe OSAKA。 大阪はどんなデザインに対して、どのようなマークアップが考えられたんでしょうか。大阪では開催メンバーの要望により、過去のMarkupCafeで出題された問題にトライしてみる。ということにしました。通常は3問程度出題するんですが、開催時間の関係上、2題となりました。

1問目 Webページのフッタ

最初はTokyo Vol.1で出題された問題から、Webページのフッタレイアウトのパターンです。フッタというと、画一的で以前制作したページから何も考えずにコピペしてつくってしまうことも多いんじゃないでしょうか。そんなフッタのマークアップをあえてよく考えてみると、新しい発見があるのかもしれませんね。大阪でも東京都同様さまざまなアイデアが出されました。

お題1:Aチーム

<footer>
    <!-- パンくず -->
    <ul>
        <li>home</li>
    </ul>
    <address>
    <dl>
        <dt><img src="xxxx.png" alt="株式会社バスタイム商事 Bathtime…" /></dt>
        <dd>
            <dl>
                <dt>お問い合わせ</dt>
                <dd>xxxxxxxxx</dd>
                <dt>神戸本社</dt>
                <dd>xxxxxxxxx</dd>
                <dt>東京本社</dt>
                <dd>xxxxxxxxx</dd>                
            </dl>
        </dd>
    </dl>
    </address>
    <small>copyright</small>
</footer>

Aチームのマークアップのポイントは以下です。

• 全体をfooter要素で囲む
• “HOME>”をパンくずとみなしul liでマークアップした
• ロゴ・会社名はimgにして会社名はalt属性値で代替テキストとして提供
• ロゴ〜お問い合せ情報までをaddress要素で囲む
• 著作権表記はsmall要素で
• お問い合わせ、本社の所在地は定義リスト(dl dt dd)としてマークアップ

まず、HTML5で登場したfooter要素で全体を囲んでいます。footerはその名の通り、セクションのフッタを表す要素です。次に、テキストリンク「HOME>」をパンくずナビゲーションとみなして、ul , liでマークアップしました。

ロゴと会社名はひとつの画像データで提供し、alt属性値に社名等を記載することで代替テキストを提供、社名、お問い合せ、本社所在地までをページの連絡先情報とみなしてaddress要素で囲っています。

お問い合せ、各本社情報はdl, dh, ddで定義リストとしてマークアップ。著作権の表記はHTML5で新たに意味付けされたsmall要素で囲っています。

お題1:Bチーム

<footer>

	<ul>
	    <li>HOME</li>
	</ul>

	<div>
		<p><img src="logo.jpg" alt="株式会社 バスタイム商事 Bathtime Bussiness Corp."><p>

		<div>
			<dl>
				<dt>お問合せ</dt>		
				<dd>0120-0000-0000</dd>
				<dd><address><a href="mailto:ifontomation[at]bathtimeshoji.co.jp">ifontomation[at]bathtimeshoji.co.jp</a></address></dd>
			</dl>

			<dl>
				<dt>神戸本社</dt>	
				<dd>兵庫県神戸市OOOOO 11-11-11 OOビル</dd>
				<dt>東京本社</dt>	
				<dd>東京都渋谷区OOOOO 11-11-11 OOビル</dd>
			</dl>
		</div>
	</div>

	<p><small>Copyright (c) bathtimeshoji All Right Reserved.</small></p>

</footer>

Bチームのポイントはおおよそ以下でしょう。

• お問い合わせと本社の所在地は別々の定義リストとした
• メールアドレスのテキストリンクをaddress要素で囲った

footer, ul, li, small, 各要素の使いどころはAチームとほぼ同じ。 考え方が異なるのはお問い合せと各本社所在地は別々の定義リストとしてそれぞれ異なった情報だということを明示しているところでしょうか。さらにメールアドレスのみを、address要素で囲っているのも特徴的です。

お題1:Cチーム

<footer>
    <ul class="path">
        <li>HOME</li>
    </ul>
    <div>
        <div>
			<img src="logo.png">
            <p>株式会社バスタイム商事</p>
            <p>Bathtime Bussines Corp.</p>
        </div>
        <div>
			<dl>
				<dt>お問い合わせ</dt>
				<dd>0120-0000-0000</dd>
				<dd>information[at]bathtimeshoji.com</dd>
			</dl>
			<dl>
				<dt>神戸本社</dt>
				<dd>兵庫県神戸市○○ 11-11-11 ○○ビル 11</dd>
                <dt>東京本社</dt>
				<dd>東京都渋谷区○○ 11-11-11 ○○ビル 22</dd>
            </dl>
        </div>
    </div>
    <small>
		copyright (c) bathtimeshoji. All Rights Reserved.
	</small>
</footer>

Cチームのポイントは以下です。

• ロゴ画像のみをimg要素で提供し、会社名はp要素でテキストで提供した
• Bチームと同様お問い合わせと本社所在地を別々の定義リストとした
• CSSでのレイアウトを考慮してロゴ、会社名のブロックとお問い合わせ、本社所在地のブロックをdivで切り分けた

footer, ul, li, smallの使いどころは各チームとほぼ同じ。 このチームではロゴマークのみを画像とし、社名はpでマークアップすることで可能なかぎりテキストデータを提供しています。お問い合せ、本社所在地についてはBチームと同じ別々の定義リストとしてマークアップしています。

address要素は使用せず。CSSでのレイアウトに配慮してロゴ&社名とお問い合せ&本社所在地をdiv要素で別々のブロックに切り分けています。

お題1:Dチーム

<footer>
    <ul class="breadcrumb">
        <li>HOME</li>
    </ul>
    <a href="/"><img src="logo.png" alt="株式会社バスタイム商事"></a>
    <address>お問合せ：0120-0000-0000 information[at]bathtimeshoji.com</address>
    <p>神戸本社：兵庫県神戸市○○○○○11-11-11 ○○ビル11</p>
    <p>東京本社：東京都渋谷区○○○○○22-22-22 ○○ビル22</p>
    <p><small>Copyright &copy; bathtimeshoji. All Rights Reserved.</small></p>
</footer>

Dチームのポイントは以下です。

• お問い合わせ情報をaddress要素で囲った
• 本社所在地は定義リストではくp要素で囲った

footer, ul, li, smallの使いどころは各チームとほぼ同じ。 電話番号、メールアドレスを連絡先の情報とみなし、address要素で囲いました。お問い合せ、本社所在地を定義リストでなくpでマークアップしているのも今までのチームと異なるところですね。

お題1:Eチーム

<footer>
    <ol>
        <li>HOME</li>
    </ol>
    <div>
        <h1><img src="images/logo.png" alt="株式会社バスタイム商事"></h1>    
        <address>
            <dl>
                <dt>お問い合わせ：</dt>
                <dd><a herf="tel:0120000000">0120-0000-0000</a> infomation［at］bathtimeshoji.com</dd>
            </dl>
            <dl>
                <dt>神戸本社：</dt>
                <dd>兵庫県神戸市○○○ 11-11-11 ○○ビル 11</dd>
                <dt>東京本社：</dt>
                <dd>東京都 ○○○ 22-22-22 ○○ビル 22</dd>
            </dl>
        </address>
    </div>
        <p><small>copyright&copy;bathtimeshoji All Rights Rserved.</small></p>
</footer>

Eチームのポイントは以下です。

• ロゴイメージをh1で囲って見出しとした
• モバイルブラウザを意識して “tel:” で電話番号リンクとした
• お問い合わせ、本社所在地をaddress要素で囲った

footer, ul, li smallの使いどころは各チームとほぼ同じ。 B, Cチームと同様お問い合せ、本社情報については、Bチームと同じ別々の定義リストとしてマークアップしています。address要素でお問い合せ、本社情報を囲んで連絡先の情報としています。ロゴと社名の画像をh1で囲っています。セクショニングを意識してのことでしょうか。

各チーム、フッタやテキストリンク、著作権表記については見解がほぼ共通していますが、ロゴと社名、お問い合せ、本社所在地の表し方については微妙に異なっているようです。

部長はこう書く

この問題、ボクが考えたんですがあまりよく考えずに「まあフッタとかひねりがないから簡単やろ」とレイアウトしました。しかしこれ、改めて考えると結構悩みますねｗ

お題1:部長

<footer>
    <div>
        <a href="index.html" class="index">HOME</a>
    </div>
    <div>
        <div>
            <img src="logo.png" alt="">
        </div>
        <div>
            <span>株式会社 バスタイム商事</span>
            <span>Bathtime Bussiness Corp.</span>
        </div>
    </div>
    <div>
        <address>
            <dl>
                <dt>お問い合わせ</dt>
                <dd id="tel">0120-0000-0000</dd>
                <dd id="email">
                    <a href="mailto:information@bathtimeshoji.com">information[at]bathtimeshoji.com</a>
                </dd>
            </dl>
        </address>
        <dl itemscope itemtype="http://schema.org/LocalBusiness" itemref="tel email">
            <dt itemprop="name">神戸本社</dt>
            <dd itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
                <span itemprop="addressRegion">兵庫県</span>
                <span itemprop="addressLocality">神戸市</span>
                <span itemprop="streetAddress">○○11-11-11 ○○ビル 11</span>
            </dd>
            <dt itemprop="name">東京本社</dt>
            <dd itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
                <span itemprop="addressRegion">東京都</span>
                <span itemprop="addressLocality">渋谷区</span>
                <span itemprop="streetAddress">○○11-11-11 ○○ビル 22</span>
            </dd>
        </dl>
    </div>
    <div>
        <small class="copyright">
            Copyright (c) bathtimeshoji All Right Reserved.
        </small>
    </div>
</footer>

まずHOME>は単なるテキストリンクとみなしました。 ロゴと社名についてはロゴのみを画像として社名はテキストで提供することにしました。画像文字だとスマートフォンなどでズームしたときに文字がぼやけることがあるのでそれに配慮する考えです。

連絡先と本社情報、ここは結構長考したんですが電話番号、メールアドレスをaddress要素で囲み、本社情報をdlで定義リストとしました。連絡先と本社情報をaddressで囲むのと正直「どっちでもいいよな〜」という気がして、選べなくて長考した感じです。ここは制作者の「どう配信したいか」の意図によって変わってくると思います。

本社情報はLocalBusinessスキーマを使って意味を与えてみました。LocalBusinessは事業拠点の支社、チェーン店などを表します。ボクはあまりこの辺に詳しくないんですが、チャレンジ精神で使ってみました。なんか間違ってたらぜひ教えてください。

2問目 パンくず

2問目も同じくMarkupCafe Tokyo Vol.1から、パンくずです。

お題2:Aチーム

<div id="breadcrumbs">
<ol>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a itemprop="url" href="/"><span itemprop="title">Markup Cafeトップページ</span></a>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <!-- 店舗情報？誤字じゃないか？ -->
    <a itemprop="url" href="/shop/"><span itemprop="title">店舗情報</span></a>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <!-- strong をつけてもいいかもね -->
    <span itemprop="title">ドリンク・フード</span>
</li>
</ol>
</div>

まず、各テキストリンクをol要素で順番付きリストとしてマークアップしています。さらにmicrodataでパンくずの意味を与えています。この方法はGoogle ウェブマスターツールでも紹介されている方法で、パンくずナビゲーションを明確に表しています。 現在のページを示すテキストはa要素でなく、span要素で囲みテキストリンクでないことを表しています。

お題2:Bチーム

<nav class="topic-path">
    <ul>
        <li><a href="../../">Markup Cafe トップページ</a></li>
        <li><a href="../">店鋪リスト</a></li>
        <li class="current">ドリンク・フード</li>
    </ul>
</nav>

全体をnav要素で囲み、ナビゲーションの意味を与えています。テキストリンクをul要素で順番なしリストとし、現在のページを表すテキストはli要素の子テキストとして、li要素にclass属性を与えて装飾しています。

お題2:Cチーム

<ol class="breadcrumb">
	<li><a href="...">Markup Cafeトップページ</a></li>
	<li><a href="...">店舗情報</a></li>
	<li><a>ドリンク・フード</a></li>
</ol>

Aチームと似たマークアップですが、現在ページを示すテキストがhref属性無しのa要素で囲まれているのが特長でしょう。a要素のhref属性が省かれている場合、そのa要素はアンカーへのプレースホルダーとなります。具体的には、リンク先のページがまだ製作中でない場合などに使えます。この場合はテキストリンクのグループとなっていて、現在ページのみプレースホルダー（行き先のない仮のリンク）というような意味になります。

お題2:Dチーム

<ul class="breadcrumb">
    <li><a href="/">Markup Cafe トップページ</a></li>
    <li><a href="/shop/">店舗情報</a></li>
    <li>ドリンク・フード</li>
</ul>

Bチームと似たマークアップです。ul要素で順番無しリストとし、現在ページはli要素の子テキストとしています。

お題2:Eチーム

<aside class="breadcrumb">
<ol>
    <li><a herf="index.html">Markup Cafe トップページ</a></li>
    <li><a herf="shop.html">店舗情報</a></li>
    <li>ドリンク・フード</li>
</ol>
</aside>

リスト部分はol要素で順番リストとなっている以外はBチーム、Dチームと同様ですが、リスト全体をaside要素で囲っているのが特長ですね。aside要素はHTML5で新たに追加された要素のひとつで、ページ内のコンテンツとは関係しているけれども、本筋とは関連の薄いコンテンツを表します。

代表的な例としてはバナー広告なんかがそれに当りますが、パンくずがasideとなるかどうか。会場でもいろいろ意見が出ましたが、コンテンツの配信意図によってはパンくずのようなコンテンツがasideとなる可能性もあり得るかもしれません。すぐに事例は思いつかないですが、考察としては興味深いですね。

部長はこう書く

お題2:部長

<div xmlns:v="http://rdf.data-vocabulary.org/#">
   <span typeof="v:Breadcrumb">
     <a href="http://www.markupcafe.com/" title="トップページへ" rel="v:url" property="v:title" class="link">
      Markup Cafeトップページ
    </a>
   </span>
   <span typeof="v:Breadcrumb">
    <a href="http://www.markupcafe.com/shop" title="店舗のご紹介" rel="v:url" property="v:title" class="link">
      店舗情報
    </a>
   </span>
   <span typeof="v:Breadcrumb">
    <a href="http://www.markupcafe.com/shop/food" title="店内のドリンクやフードのご紹介" rel="v:url" property="v:title" class="current">
      ドリンク・フード
    </a>
   </span>
</div>

各チームではパンくずをリストとみなしてulまたはolでマークアップしていましたが、「さて？そもそもリストなんだろうか？」と考えました。考えた挙句div>spanでマークアップしました。パンくずにテキストリンクのリストという意味を与える必要があるかどうかについてはけっこう意見が分かれるところなんじゃないかと思います。

個人的な考えではどっちがいいのか曖昧なので、保守的にリストの意味を与えないことにしました。あと、みんなと違ったマークアップ例を出したかったというのもありますｗ

一方でパンくずであることを明示するためAチームと同じくbreadcrumbスキーマを使っています。こちらはRDFaでマークアップしました。あと、「パンくずはナビゲーション」と言えるかどうか？これも考えれば考えるほど自信がなくなってきたので、nav要素は使わないこととしました。

やっぱり大阪はアツい！

東京と同様、大阪でもチームでの話し合いや、発表後の質疑応答などが大いに盛り上がりました。今回は多くの方にご参加いただいたので、チームも5チームに編成しました。1チーム当たり4〜5名という大所帯となったので、時間内に進行できるか不安でしたが、さすがコミュ力の高い関西人。各チームの発表もスムーズでトラブルなく終わることができました。感謝です。:-)

イベントの最後には、日本マイクロソフトさんのご好意により、IEステッカーがプレゼントされました。IEステッカーはありそうであんまり見ないノベルティなので、みんな大喜びで取り合いになりました。「写真撮るよ」って言ったら、みんな撮り合ってくれたりして、さすが関西人はノリがいいですねｗ

いかがでしたでしょうか。どれもHTML仕様としては正しいマークアップですが、それぞれの考え方、伝え方によって全くことなるマークアップとなりました。ほんと考えれば考えるほど「マークアップに唯一の正解はない」と思えてきます。

マークアップにはたくさんの正解がある。正しいマークアップの知識を身に付けると、Webの世界に自分の考えや想いを的確に伝えたりできて、より自由な文書表現が可能になるということですね。

今日の問題、みなさんならどうマークアップしますか？

Markup Cafeをはじめたきっかけ

最後にちょっと、ボクとMarkupCafeのことを。

HTML5 Experts.jpでHTML5について勉強されている方には、すでに仕事や趣味でHTMLをマークアップされている方も多くいらっしゃるんじゃないでしょうか。そのような中で「このHTML要素の使い方ってほんとに正しいんだろうか？」とか、「もうちょっといい感じにマークアップできそうな気がするけど、どうしたら良くなるんだろう？」とか思うことはないでしょうか？

ボクは正直、仕事のたびにそう思ってしまって、手を止めて考え込んでしまうことが多いです。で、納期が迫ってヤバくなるってことがしばしばあるんですよねｗ

そんなときはHTMLの仕様書を読んだり、いい感じそうなサイトのソースコードをみたりして、ヒントを探したりするんですが、考えても考えてもたった一つの答えを見つけられないことがあります。HTMLの要素や属性などの仕様は様々なニーズに対応するよう設計されているため、意味がある程度抽象的です。そのため場合によっては「Aともとれるし、Bともとれる」ということがあるんです。

こういう場合、どっちにしても意味が通ってまあ正解。となるんですね。でもどっちかを適用しないといけない。「どっちがええねんキィィ！」ってなることもありますｗｗｗ

もう一人で悶々と考えていてもラチがあかない。。ならみんなでいっしょに考えて、よく考えこんで「これだ！」というマークアップのスニペットを公開していったらいいんじゃね？みんなで納得できる良いマークアップ事例ができるし、一所懸命考えるのはHTMLの勉強になる。マークアップを公開すればこれから勉強する方の役に立つかも。

そんなことを考えて、マークアップ部のみんなとMarkup Cafeを始めました。現時点で東京で2回開催され、さまざまな観点から考えこまれたHTML5マークアップの事例が発表されています。詳しくはExperts.jp コントリビューターの中島さんが執筆された記事をご覧ください。

• よくある3つのデザインから考える、マークアップの最適解
• 続・よくある3つのデザインから考える、マークアップの最適解

うれしいことに、記事が公開された後、大阪のマークアップ好きなみなさんから「大阪でもぜひやりたい！」というお声をいただいています。大阪でも上述のとおり現地の方々を中心にMarkupCafe OSAKA開催グループが立ち上がり、大阪での初開催が実現しました。

こうやっていろいろな地域でMarkupCafeを開催して、HTML5マークアップの知識を深めながらより実践的なマークアップ事例を発信していけるのはとても有意義だと感じています。もし他の地域でもMarkupCafeをやってみたい！という方がおられましたら、こちらのスライドを参考にぜひやってみてください。

MarkupCafe – html5j Markup group

ご要望があれば、出張開催もできるだけやりますので、ボク @bathtimefishまでご連絡ください。