web.londoner25.net http://web.londoner25.net フロントエンドオペレーターのWebメモ Wed, 29 Dec 2010 15:42:44 +0000 ja hourly 1 http://wordpress.org/?v=3.3.2 clearfixについて http://web.londoner25.net/2010/12/30/clearfix/ http://web.londoner25.net/2010/12/30/clearfix/#comments Wed, 29 Dec 2010 15:29:49 +0000 londoner25 http://web.londoner25.net/?p=11 今まで自分はfloatのクリアをする場合、一般的なclearfixのコードの冗長さが嫌いで、overflow: hiddenすることが多かったのですが、それでは印刷する場合に不具合が出たり、要素をボックスの外にはみ出させたい場合にはみ出した部分が表示されなくなってしまう不都合が生じるので、最適な方法は何かと考えていました。

以前から知ってはいましたが、冗長なコードとそもそもclass=”clearfix”自体が好みではなかったので、知識として把握していただけだった現在のブラウザ事情に最適化されたclearfixを採用することにしました。

一般的な前時代的なclearfixは以下のように冗長でちょっと気持ちの悪いコードです。
（注：下記以外にも違う書き方はあります）

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.clearfix {
  min-height: 1px;
}
* html .clearfix {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}

前時代的なclearfixは古すぎるブラウザ（ネスケやIE6未満のもの）も対象にしているせいでこんなに冗長になっています。IE6以降とモダンブラウザのみに対象を絞れば以下の簡潔なコード（ハック含む）で済むようです。

element{ /zoom : 1; }
element:after{ content : ''; display : block; clear : both; height:0; }

引用元：いまどき ? いまさら ? clear fix のコード | ヨモツネット

詳しい解説は引用元を参照してください。引用なので原文のままにしており、前時代的なものとはクラス名が違うことにご注意ください。
上記のコードでIE6以降のブラウザやモダンブラウザはカバー出来ていますのでこのコードで十分です。
現時点では一番リスクが少ない方法と言えるかなと思います。

とはいえ、モダンなclearfixでもハックを使っているように、完璧なclearfixの仕方というのは現状存在しないので、clearfixを使うか、overflow:hiddenを使うかは好みの問題と言えそうです。
overflow:hiddenはclearfix以外にもコーディングのディティールに関する問題で使い勝手のいい働きをしてくれるので、割と好みですし、使い時さえ間違わなければclearfixの代替方法として使えると思っています。

clearfixの方法の一つとしてメモを残しておきます。

]]> http://web.londoner25.net/2010/12/30/clearfix/feed/ 0 サブドメイン運用のGoogle XML Sitemapsプラグインのマルチサイト対応方法 http://web.londoner25.net/2010/10/27/google-xml-sitemap-multisite/ http://web.londoner25.net/2010/10/27/google-xml-sitemap-multisite/#comments Wed, 27 Oct 2010 11:11:18 +0000 londoner25 http://web.londoner25.net/?p=8 このサイトをWordPress 3.0にアップグレードし、このブログを作って以来悩み続けていた問題がようやく解決しました。
解決したので、今後この情報を探すことはないでしょうが、念のため備忘録として残します。

参考サイトと大まかな手順は以下の通りです。

  1. プラグインを編集
  2. .htaccessにrewrite ruleを記述
  3. プラグインを有効にして、xmlファイルのありかを指定

プラグインを編集

Google XML Sitemapsはデフォルトでマルチサイトをサポートしていないので、WPをマルチサイト運用するとエラーメッセージが出力されますので、これを消すことから始めます。

対象のコードはwp-content/plugins/google-sitemap-generator/sitemap.phpの53行目あたりにあるので、その部分をまるっとコメントアウトします。


//Check for 3.0 multisite, NOT supported yet!
//if((defined('WP_ALLOW_MULTISITE') && WP_ALLOW_MULTISITE) || (function_exists('is_multisite') && is_multisite())) {
//if(function_exists('is_super_admin') && is_super_admin()) {
//add_action('admin_notices',  array('GoogleSitemapGeneratorLoader', 'AddMultisiteWarning'));
//}
//return;
//}

.htaccessにrewrite ruleを記述


RewriteRule ^sitemap.xml sitemap-%{SERVER_NAME}.xml [L]
RewriteRule ^sitemap.xml.gz sitemap-%{SERVER_NAME}.xml.gz [L]

プラグインを有効にして、xmlファイルのありかを指定

プラグインを有効にし、設定画面からサイトマップファイルの生成先とサイトマップファイルの完全なURLを指定します。
参考サイトの例では手動配置していますが、自動配置の場合でもsitemap-(サブドメイン).xmlを入力してやれば問題なく配置してくれるようです。（Core Serverの場合）

Google XML Sitemapsの設定例

後はブラウザで表示されるか確認し、Googleウェブマスターツールに登録すれば全て完了です。

]]> http://web.londoner25.net/2010/10/27/google-xml-sitemap-multisite/feed/ 0 JS読書会に参加しました http://web.londoner25.net/2010/10/10/js-dokusho/ http://web.londoner25.net/2010/10/10/js-dokusho/#comments Sat, 09 Oct 2010 17:11:44 +0000 londoner25 http://web.londoner25.net/?p=7 オライリーのJavaScript: The Good Partsをみんなで読んで勉強する、JS読書会に参加してきました。

JS読書会発足前に、ドットコーダーで「こういう勉強会に興味あります〜？」と聞かれて、「興味ある」と答えたにも関わらず一度も参加していなかったのですが、今回で5回目で8章のメソッドの部分をみんなで勉強しました。
結論から言うと、自分のJS（プログラミング）理解レベルが低すぎて勉強会のレベルについていけていませんでしたが、勉強会自体は非常に面白くて、良い雰囲気の中行われていて1回目から参加させていただいておくべきやったなあと後悔しています。
環境面でも安倍乃荘という元々旅館だったと思われる場所で、会場が畳に座布団だったのが良かったのと、少人数制かつ、プログラマーの参加割合が多くて、わからないことも比較的解決しやすいところと別言語との比較が聞けるので興味深く、良かったと思います。

勉強会の中身としては前述の通り8章のメソッドからでしたが、この本独自のメソッドの拡張などが出てきて、本を予習することすらしていなかった自分にはいきなりは取っ付きにくく、さらに1回目から参加すれば良かったなと思わせられました。
本に書いてある内容は「ふ〜ん、そうなんやなー。」という感じでなんとなく雰囲気は掴めました。
ただ、メソッドによってはブラウザによって挙動が違うものもあり、この本に載っているからといって安心して使えるわけでもないようです。(number.toExponentialやstring.splitの第2引数のlimitなどなど）
結局はこの本で理論をや使い方を学んでもそれだけでは意味は無く、結局は何か目的を持って作ってみることが最大の勉強になるようです。
現状自分はJavaScriptはからきしダメというレベルなので、とりあえず何でも良いので何かを作ってみる、そしてこの本に書いてあったことで応用出来そうなら積極的に使っていくというのが良さそうでした。
jQueryですが、ドットコーダー界隈で誰得ぷるぎんというのが流行っているのでそういう感じのネタスクリプトを作るのも一つの手かなと思いました。
すぐに理解レベルを追いつかせることは難しいでしょうが、継続して参加させていただきJSの理解を深めていきたいです！

次回は来週の土曜日午前10時からで9章と10章と付録Aあたりまで。
付録のAはJavaScriptの「ひどいパーツ」についてです。
今まで苦労して調べて理解したことをここで悪いパーツとして紹介されてひっくり返されるのだろうという話が出ていました。
やはり、最初からちゃんと読んで最初から参加していないとダメだったようです。

とは言え、このJavaScript: The Good Partsの本が終わればJavaScriptかjQueryクックブックとか別のJS本でこの勉強会は継続しますし、試しに参加するのは良いと思います。
僕も全然ダメダメなので安心して参加出来ると思います！
定員は最大8名で今のところ5人が参加中です。
興味のある方は音声配信のUstreamがあるのでまずはそちらをご覧になってみてください。
僕が言うことではありませんが、是非是非皆さん一緒にJSのお勉強をしましょう！

]]> http://web.londoner25.net/2010/10/10/js-dokusho/feed/ 0 ドットコーダーセッション3でマークアップしたHTML5の自己解説 http://web.londoner25.net/2010/09/20/dotcoder3-html5/ http://web.londoner25.net/2010/09/20/dotcoder3-html5/#comments Mon, 20 Sep 2010 12:51:20 +0000 londoner25 http://web.londoner25.net/?p=6 先月参加したドットコーダーのHTML5のワークショップで自分たちのグループがマークアップしたものを解説（？）します…。

3〜4人で1グループを構成し、全6グループがグループコーディングを行い、自分たちはFグループでした。（サンプルはCSSも組まれているのでwebkit系のブラウザで合わせてご覧下さい）
自分たちのグループはまず一通りざっとマークアップしてから見直して最適化していこうとしていたのですが、1時間少々の制限時間では思った通りのフローで作業を行うことができませんでした。。。

マークアップ解説

まずは下記のソースをご覧下さい。
（インデントもコメントもありませんので多少見辛いです。時間がある時に見やすいように整形するかもしれません。ちゃんとしたソースを見たい方はマークアップサンプルのページをご覧下さい。）


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>トニー・ポークチョップ | ユルフワアイサレ TONY</title>
</head>
<body>
<div id="dotcoder">
<header>
<h1><a href="#">ユルフワアイサレ TONY</a></h1>
<ul>
<li><a href="#">お問い合わせ</a></li>
<li><a href="#">サイトマップ</a></li>
</ul>
<form action="#" method="get">
<p><input type="search" name="q"><input type="image" src="img/btn_search.png" alt="検索"></p>
</form>
<nav>
<ul>
<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>
</ul>
</nav>
</header>
<div id="main">
<nav>
<ol>
<li><a href="#">ホーム</a></li>
<li><a href="#">商品紹介</a></li>
<li><a href="#">男女共用</a></li>
<li><a href="#">トニー・ポークチョップ</a></li>
</ol>
</nav>
<article>
<h2>商品紹介</h2>
<section>
<header>
<h3>トニー・ポークチョップ</h3>
<p>取り扱い開始日:<time datetime="2010-08-01" pubdate="pubdate">2010年8月1日</time></p>
</header>
<p>大ヒット映画「TONY STORY」で、物事を深く考え鋭い意見を述べるオモチャ達の参謀役として人気のキャラクター「トニー・ポークチョップ」の貯金箱です。</p>
<p>劇中アンソニーもわんさかお金を貯めることができたこの貯金箱を使えば、<b>あなたも楽しくお金が貯められること間違いなし！</b></p>
<p><small>※このキャラクターはトイストーリーに登場するキャラクターとは一切関係ありません。</small></p>
<figure>
<img src="img/product01.png" alt="" width="250" height="187" />
<figcaption>TONY, Inc All Rights Reserved.</figcaption>
</figure>
<dl>
<dt>対象年齢</dt>
<dd>4歳以上</dd>
<dt>価格</dt>
<dd>Â¥8,000（98%OFF）</dd>
<dt>発売日</dt>
<dd>2010年8月28日</dd>
</dl>
<section>
<h3>動画で見てみよう！</h3>
<video controls="controls" width="320" height="240">
<source src="video/tony.ogg" type="video/ogg" />
<source src="video/tony.mp4" type="video/mp4" />
<p>ご利用のブラウザーでは再生できません。<a href="video/tony.mp4">こちら</a>からダウンロードしてください。</p>
</video>
<p>お金を入れると、トニー・ポークチョプが歌って、踊りだします。<br />
さて、トニー・ポークチョップはどんな歌と踊りを披露してくれるのかな！？<br />
愛くるしい歌と踊りを収録した動画をご堪能ください！</p>
</section>
<section>
<h3>お客様の声</h3>
<section>
<h4>おかげさまで、大金持ちになれました♪</h4>
<blockquote>
事業に失敗し、破産→離婚→無職という転落人生を送ることになった矢先のことでした、ふと<strong>トニー・ポークチョップ</strong>の貯金箱が目に止まり、購入してみました。これが僕と<b>トニー・ポークチョップ</b>との出会いでした。<br />
そしてトニー・ポークチョップを使い始めてからというものの転落人生からは一変、お金が貯まりに貯まって、もう笑いが止まりませんね！僕にとって、<b>トニー・ポークチョップ</b>は命の次に大事な貯金箱ですよ。
</blockquote>
<p>大阪府にお住まいの H.Hさん（2?歳 男性）ご回答の<cite>お客様アンケート</cite>より</p>
</section>
</section>
<section>
<h3>この商品に関するお問い合わせ</h3>
<p>
株式会社TONY<br />
営業本部　営業本部長兼オペレーター<br />
帆○ 洋志(2?歳)
</p>
<dl>
<dt>TEL</dt>
<dd>xxxx-5050-1021</dd>
<dt>E-mail</dt>
<dd>xxxx@gogotony.co.jp</dd>
</dl>
</section>
</section>
</article>
<aside>
<h3>その他のおすすめ商品</h3>
<ul>
<li><a href="#"><img src="img/other_product01.png" alt=""><p>TONY STORY ウッチー</p></a></li>
<li><a href="#"><img src="img/other_product02.png" alt=""><p>TONY STORY バグ・ワモウイヤー</p></a></li>
<li><a href="#"><img src="img/other_product03.png" alt=""><p>TONY STORY アンソニー等身大フィギュア</p></a></li>
</ul>
</aside>
</div>
<div id="side">
<nav>
<h2>商品紹介</h2>
<ul>
<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>
</ul>
</nav>
<aside id="banner">
<ul>
<li><a href="#"><img src="img/banner01.png" alt="バナー１"></a></li>
<li><a href="#"><img src="img/banner02.png" alt="バナー２"></a></li>
<li><a href="#"><img src="img/banner03.png" alt="バナー３"></a></li>
</ul>
</aside>
</div>
<footer>
<ul>
<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>
</ul>
<p><a href="#dotcoder">このページの先頭へ</a></p>
<ul>
<li><a href="#">会社概要</a></li>
<li><a href="#">プライバシーポリシー</a></li>
<li><a href="#">サイトご利用にあたって</a></li>
</ul>
<p><small>Copyright TONY Co.,Ltd. All rights Reserved</small></p>
</footer>
</div>
</body>
</html>

ドキュメントタイプからhead要素


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>トニー・ポークチョップ | ユルフワアイサレ TONY</title>
</head>

時間がなかったので最低限のマークアップしか施していません。
title要素内も厳密に書くと、商品紹介という文言が入ってくるべきですが、抜けています。

header要素内


<header>
<h1><a href="#">ユルフワアイサレ TONY</a></h1>
<ul>
<li><a href="#">お問い合わせ</a></li>
<li><a href="#">サイトマップ</a></li>
</ul>
<form action="#" method="get">
<p><input type="search" name="q"><input type="image" src="img/btn_search.png" alt="検索"></p>
</form>
<nav>
<ul>
<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>
</ul>
</nav>
</header>

body要素内に無駄なラッパーdivを作ってしまっているのはご愛嬌。
header要素内にはサイトのタイトル、グローバルナビゲーション、検索フォーム、サブ的なページのナビゲーションを入れています。

サイトのタイトルなのですが、ここがかなり悩みました。
主催者サンプルでは以下のようになっていました。


<hgroup>
<h1><a href="#">TONY</a></h1>
<h2><a href="#">ユルフワアイサレ</a></h2>
</hgroup>

このページでhgroup要素を使うとしたらここしか無いのですが、自分たちとしては出現順序に違和感があったので全てひっくるめてh1要素でマークアップしました。

検索フォームにはtype=searchを、グルーバルナビはnav要素を使うというところはちゃんと抑えられていました。

メインコンテンツ

メインコンテンツ部分ではどこがarticle要素でマークアップするのに妥当な部分かを考えました。
article要素の構成内容としてHTML5マークアップガイドブック等に書いてあるようにRSSの構成内容として妥当かを考えました。
よって、パンくずリストとその他のおすすめ商品はarticle要素の外側にマークアップしています。ただ、その他のおすすめ商品はarticle内に含めた方が妥当だったかなとは思います。

パンくずリスト

例によって書籍を参考にパンくずリストはnavでマークアップしていますが、サイトの主要なナビゲーションかどうかを考えると主要とは言えないと思うのでここはnavでマークアップしない方が妥当だったかと思います。


<nav>
<ol>
<li><a href="#">ホーム</a></li>
<li><a href="#">商品紹介</a></li>
<li><a href="#">男女共用</a></li>
<li><a href="#">トニー・ポークチョップ</a></li>
</ol>
</nav>

細かく言うと、自分はvicunaスタイルのp>span+aでパンくずを書くのですが、グループ内の意見ではol>liでやるとのことだったのでリストでマークアップしています。

sectionのheader


<section>
<header>
<h3>トニー・ポークチョップ</h3>
<p>取り扱い開始日:<time datetime="2010-08-01" pubdate="pubdate">2010年8月1日</time></p>
</header>

商品名と取り扱い開始日の部分を当該セクションのヘッダーと見なして、header要素でマークアップしています。
またtime要素にpubdate属性を記述することで、親のarticle要素の公開日であることを明示しています。

figure要素

質疑応答で多少意見の食い違いがあった部分なのですが、自分たちはトニー画像をfigure要素でマークアップし、コピーライトをfigcaption要素でマークアップしました。
この部分もsmall要素を追加した方がより妥当だったかもしれません。


<figure>
<img src="img/product01.png" alt="" width="250" height="187" />
<figcaption>TONY, Inc All Rights Reserved.</figcaption>
</figure>

米印かつ赤字の部分

「※このキャラクターはトイストーリーに登場するキャラクターとは一切関係ありません。」
上記文言の部分は主催者サンプルではp>strongでマークアップされていますが、自分たちはp>smallでマークアップしました。
理由は補足事項なので細目などと同等と見なしたからです。
ただ、サイトの内容上トイストーリーと関係ないという主張は重要なのでstrongの方が妥当なのかもしれないなと思いました。

お客様の声

<section>
<h3>お客様の声</h3>
<section>
<h4>おかげさまで、大金持ちになれました♪</h4>
<blockquote>
事業に失敗し、破産→離婚→無職という転落人生を送ることになった矢先のことでした、ふと<strong>トニー・ポークチョップ</strong>の貯金箱が目に止まり、購入してみました。これが僕と<b>トニー・ポークチョップ</b>との出会いでした。<br />
そしてトニー・ポークチョップを使い始めてからというものの転落人生からは一変、お金が貯まりに貯まって、もう笑いが止まりませんね！僕にとって、<b>トニー・ポークチョップ</b>は命の次に大事な貯金箱ですよ。
</blockquote>
<p>大阪府にお住まいの H.Hさん（2?歳 男性）ご回答の<cite>お客様アンケート</cite>より</p>
</section>
</section>

今気付きましたが、お客様の声と動画で見てみよう！とこの商品に関するお問い合わせの部分のhx要素の数字にミスがありました。正しくはh4でした。

本題ですが、この部分は上記のようにマークアップしていますが、「おかげさまで、大金持ちになれました♪」の部分をblockquote要素に内包させ、本文と同レベルで扱うべきでした。
デザイン上、強調されていた部分はstrong要素でマークアップし、同じ文言が全て見た目上強調されていたので2度目以降の出現時はb要素でマークアップしました。
主催者サンプルではmark要素でマークアップされています。
mark要素については全く知らなかったので、本で調べてみると、引用に対して言及がある場合に目印としてマークアップするというようなことが書いてあったので、この場合はちょっと違うのかなと思いました。
ただ、このページ全体でその引用に対して言及しているという解釈をすれば、妥当ではあるかもしれないと思います。

お問い合わせ部分

改めて振り返ってて気付きました。
ここはaddress要素でマークアップするべきでした。
主催者サンプルはマイクロフォーマットでマークアップなさっていますが、HTML5ではマイクロデータというのが埋め込むことができるようになっているので、最近マイクロフォーマットという単語を聞くことがほぼありません。その点に関しても調べないといけないな〜と感じました。

その他のおすすめ商品部分

自分たちのマークアップではarticle要素の外のdiv#mainの中にマークアップしていますが、厳密に意味を考えると、トニー・ポークチョップ関連のその他のおすすめ商品なので「動画で見てみよう！」などと同じレベルでマークアップするべきだったのではないかと思いました。

また、うろ覚えですが、HTML5ではブロック要素とインライン要素の概念がなくなり、インライン要素の中にブロック要素を入れてはいけないという縛りがなくなったと記憶しているので、個別のおすすめ商品部分は全体をa要素でマークアップしています。


<aside>
<h3>その他のおすすめ商品</h3>
<ul>
<li><a href="#"><img src="img/other_product01.png" alt=""><p>TONY STORY ウッチー</p></a></li>
<li><a href="#"><img src="img/other_product02.png" alt=""><p>TONY STORY バグ・ワモウイヤー</p></a></li>
<li><a href="#"><img src="img/other_product03.png" alt=""><p>TONY STORY アンソニー等身大フィギュア</p></a></li>
</ul>
</aside>

サイドバー部分


<div id="side">
<nav>
<h2>商品紹介</h2>
<ul>
<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>
</ul>
</nav>
<aside id="banner">
<ul>
<li><a href="#"><img src="img/banner01.png" alt="バナー１"></a></li>
<li><a href="#"><img src="img/banner02.png" alt="バナー２"></a></li>
<li><a href="#"><img src="img/banner03.png" alt="バナー３"></a></li>
</ul>
</aside>
</div>

サイドバー部分は全体をdivでくくり、ローカルナビゲーションをnav要素で、バナーをaside要素でマークアップしています。

フッター部分


<footer>
<ul>
<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>
</ul>
<p><a href="#dotcoder">このページの先頭へ</a></p>
<ul>
<li><a href="#">会社概要</a></li>
<li><a href="#">プライバシーポリシー</a></li>
<li><a href="#">サイトご利用にあたって</a></li>
</ul>
<p><small>Copyright TONY Co.,Ltd. All rights Reserved</small></p>
</footer>

フッター部分に関しては特に言及することもありませんが、footer要素でくくり、ナビゲーションは主要ではないと見なしてnav要素は使っていません。最後にコピーライト表記をp>smallでマークアップしています。

以上が自分たちのグループがマークアップしたものの自分の勝手な解説になります。
実際にHTML5でサイトを作ってみたり、他人がマークアップしたものを見たら様々な方法でマークアップしているので何が最適かわからなります。
今年の初めにあったコーディングコンテストしかり、ドットコーダーしかり、成果物に対してあーだこーだーと意見を言い合うことで参加者の理解がより深まるのではないかなーと思いました。

ですので、もしもこの部分こうした方がいいとか、この部分はなぜこうマークアップしたかもっと詳しく説明してと思った方はどしどしご意見下さるとありがたいです！

]]> http://web.londoner25.net/2010/09/20/dotcoder3-html5/feed/ 0 ドットコーダーセッション3に参加しました http://web.londoner25.net/2010/08/30/dotcoder-session3/ http://web.londoner25.net/2010/08/30/dotcoder-session3/#comments Mon, 30 Aug 2010 10:10:50 +0000 londoner25 http://web.londoner25.net/?p=5 大阪のコーダー（じゃない人も歓迎の）勉強のドットコーダーに参加してきました！
今回は、HTML5についてワークショップ形式で開催されました。

今回の参加条件が「HTML5」を勉強してくることと書いてあり、まわワークショップ形式だったので結構知識に不安がありましたが、羽田野太巳氏の徹底解説HTML5マークアップガイドブック持参したおかげで思ったよりマシな出来になったのではないかと思います。
ドットコーダーのサイトにて僕たちが実際にマークアップしたファイルが晒されるらしいので、その時になぜこのようなマークアップをしてしまったのかうれし恥ずかし解説させていただこうと思います。

当日のドットコーダーは15時から18時までの3時間の予定でしたが、ワークショップという開催形式の性質上、みんなが集まっていない状態で開始することができず、結構遅れてしまいました。
最後、慌ただしくなったのもありましたし、色んな理由があるにせよ、こういう会の場合は絶対遅れないように心掛けないといけないなーと思いました。

今回はドットコーダー実行委員（？）の方々はワークショップに参加し、HTML5に強い（？）@w3gjp氏と@SBKame氏が前に立って仕切ってくださいました。
お題の作成から解説まで一通りのことをしてくださり、HTML5の勉強にもなりましたし感謝しています。

ワークショップの内容は3人から4人で1つのグループをつくり、出されたお題（デザイン）を元にみんなで相談し、力を合わせてマークアップしていき、発表したとあとに解説を聞くという形でした。
最初の開発環境のセットアップで時間を食ってしまいましたが、ZEN Codingを用いてマークアップしていったので、最終的には遅れを取り戻せたかなと思います。
作業時間は1時間しかなく、ちょっと慌ただしかったです。ザクっとまずはマークアップしてから見直しておかしいところを修正していこうというスタンスでやってましたが、「完成★」と思ったあとに注釈に気付いた時は愕然としました…
これは褒め言葉なのですが、どうHTMLを組もうか一筋縄でいかないデザインを提示されたので、結構悩みました。
最後の発表でも各グループで結構マークアップは違ったので、そういう意味でも今回のワークショップに適したデザインだったのではないかと思います。（実際仕事で作る場合はわかりやすい方がありがたいのですがね…）

僕らのグループは最後の発表で、@hogenishi氏が笑いをかっさらってくれていたので、良い発表だったんだと思います。

その後に仕切ってくださったお二人による解説+質疑応答を経て盛況のうちに終了しました。

今回のドットコーダーセッション3は自分にとってすごく興味のあるネタだったこととワークショップという参加型の形式だったこともあって凄く楽しかったです。
時間がなくて、各グループのマークアップに対しての議論が行えなかったのは残念でしたが、今回の小さな失敗を活かして、次に繋げて欲しいなと他力本願ですがそう感じました。

次回は、@t32kさんによる、パフォーマンスのお話！
まだどういうことを話していただけるのかハッキリはわからないようですが、ふんわり「なぜパフォーマンスアップを目指すべきなのか」を講義してくださるというようなことを耳にしたので非常に楽しみです。

その後の懇親会で嘆きの声が聞こえてきたのですが、東京のSugamo.cssに対してドットコーダーの女性参加率が物凄く低いようです！
ゆるふわでかるーく楽しく勉強しましょうという会ですし、敷居もそんなに高くないです。
この、ページを見ている女性なんてほぼいないとは思いますが、ぜひドットコーダーに参加してください！

以上、ドットコーダーセッション3のレポートでした。
僕たちのグループがマークアップしたものの解説もゆるくふわっと期待して待っていてください。。。

]]> http://web.londoner25.net/2010/08/30/dotcoder-session3/feed/ 0 メディアクエリーについてまとめながら勉強 http://web.londoner25.net/2010/08/30/media-queries/ http://web.londoner25.net/2010/08/30/media-queries/#comments Mon, 30 Aug 2010 08:22:37 +0000 londoner25 http://web.londoner25.net/?p=4 前回のiPhoneサイト構築の記事にも出てきたMedia Queries（メディアクエリー）についておさらいします。
その記事では手っ取り早くiPhoneサイトをつくるにはメディアクエリーを使うのもありと書きましたが、深く調べると、非推奨（賛否両論）のテクニックだったようなのでその点も踏まえてメモします。

Media Queriesとは

CSS3で定義されたmedia typeを拡張する仕様です。
これを用いると指定された条件を満たしたディスプレイがに応じて適用するCSSを変えられます。
（iPhoneサイトを作る上での落とし穴）

media typeとは

CSSを適用するメディアを指定するものです。

<link rel="stylesheet" type="text/css" href="css/iphone.css" media="screen" />

上記コードのmedia属性の部分でmedia typeを指定します。
指定できるmedia typeは以下の通り。

all
すべてのデバイス
screen
主に色を表現できる一般的なコンピュータの画面。
tv
テレヴィジョン型の機器。（一般的には低解像度，色つき，かつスクロールに制限のある画面。音声も使用可能。）
handheld
低性能なポータブル機器。（典型的な物には，小さな画面，モノクロ画面，周波帯域の制約を持つ機器など。）
tty
グリッドの矩形領域に納る固定ピッチ文字を使用する出力装置など。
具体的にはテレタイプ，端末，あるいはディスプレイ性能の限られたポータブル機器などが想定されます。著者はこのメディアタイプにおいて画素単位pxを用いるべきではありません。
print
ページ区切りの媒体に印刷、もしくは画面上の印刷プレビュー。
projection
映写機などの投影表現。CSS2.0では透明素材への印刷も含む。
braille
点字の触感がフィードバック（即時反応）される装置。（具体的なものでは点字ディスプレイが利用されている。）
embossed
ページ区切りの点字プリンタ。（頁区切りの点字用紙などに，点訳されたデータを“型押し”の膨らみで出力する装置。）
speech
合成音声を生成するためのソフトウェアやデバイス（CSS2では aural だが非推奨）

メディアクエリーの書式と指定の仕方

メディアクエリーの書式と指定できる項目は以下の通りです。

media_query: [only | not]? <media_type> [ and <expression> ]*
expression: ( <media_feature> [: <value>]? )
media_type: all | aural | braille | handheld | print | projection | screen | tty | tv | embossed
media_feature: width | min-width | max-width
  | height | min-height | max-height
  | monochrome | min-monochrome | max-monochrome
  | color | min-color | max-color
  | color-index | min-color-index | max-color-index
  | resolution | min-resolution | max-resolution

W3CのMedia queriesより引用。

勧告候補には上記に加えて、“device-width”,”device-height”,”orientation”,”aspect-ratio”,”device-aspect-ratio”,”scan”,”grid”が加えられているようです。

以下で各項目を説明します。

media_query

書式
[only | not]? <media_type> [ and <expression> ]*
サンプルコード

<link rel="stylesheet" type="text/css" href="large.css" media="only screen and (min-width: 481px)" />
<link rel="stylesheet" type="text/css" href="small.css" media="not screen and (max-width: 480px)" />
<link rel="stylesheet" type="text/css" href="colordisplay.css" media="screen and (color)" />
<link rel="stylesheet" type="text/css" href="monochromedisplay.css" media="screen and (monochrome)" />

上記の書式を細かく分解して見ていきます。

only | not
onlyはmedia queryを解釈できないブラウザ用に用意されているもので、条件判定を失敗させるためにあるようです。
notは以降で指定している条件に当てはまらない場合にCSSを適用させたい場合に使います。
media_type
先述の通り、CSSをしていするデバイスを指定します。
and

<link rel="stylesheet" type="text/css" href="large.css" media="only screen and (min-width: 481px) and (min-height: 600px) and (color)" />
<link rel="stylesheet" type="text/css" href="large.css" media="only screen and (min-width: 481px), only screen and (min-height: 600px), only screen and (color)" />

カンマで区切ることによって、指定した条件の内の1つに該当する場合にCSSを適用することができます。
andで繋げることで複数の条件を指定でき、全ての条件を満たしている場合にCSSが適用されます。
expression
media_featureとvalueの組み合わせです。
widthやheightはCSSのような書式に。valueを省略すると0ではない値という意味になります。

media_feature

条件式のプロパティー。valueと対になって記述します。
指定できるものは以下の通りです。

width

指定できる値
<length>(長さ)
適用対象
視覚的媒体と触覚媒体
min/max接頭辞
付けられる
サンプルコード
<link rel="stylesheet" type="text/css" href="large.css" media="only screen and (width: 980px)" />
補足
view port（ウインドウ）の横幅

height

指定できる値
<length>(長さ)
適用対象
視覚的媒体と触覚媒体
min/max接頭辞
付けられる
サンプルコード
<link rel="stylesheet" type="text/css" href="large.css" media="only screen and (width: 650px)" />
補足
view port（ウインドウ）の高さ

device-width

指定できる値
<length>(長さ)
適用対象
視覚的媒体と触覚媒体
min/max接頭辞
付けられる
サンプルコード
<link rel="stylesheet" type="text/css" href="large.css" media="only screen and (device-width: 480px)" />
補足
iPhoneなどのデバイスやPCのディスプレイの横幅

device-height

指定できる値
<length>(長さ)
適用対象
視覚的媒体と触覚媒体
min/max接頭辞
付けられる
サンプルコード
<link rel="stylesheet" type="text/css" href="large.css" media="only screen and (device-height: 320px)" />
補足
iPhoneなどのデバイスやPCのディスプレイの高さ

orientation

指定できる値
portrait | landscape
適用対象
ビットマップ媒体
min/max接頭辞
なし
サンプルコード

@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }
補足
高さが横幅と等しいか、より大きい時はportrait、そうではない場合はlandscapeとなります。
つまり、iPhoneを縦に持っている場合はportraitで横向きにした場合はlandscapeとなります。

aspect-ratio

指定できる値
<ratio>
適用対象
ビットマップ媒体
min/max接頭辞
あり
補足
view port（ウインドウ）のアスペクト比（”width”と”height”がとる値の比率）

device-aspect-ratio

指定できる値
<ratio>
適用対象
ビットマップ媒体
min/max接頭辞
あり
サンプルコード
@media screen and (device-aspect-ratio: 16/9) { … }
補足
iPhoneなどのデバイスやPCのディスプレイのアスペクト比（”device-width”と”device-height”がとる値の比率）

color

指定できる値
<integer>
適用対象
視覚的媒体
min/max接頭辞
あり
サンプルコード
@media all and (color) { … }
補足
出力デバイスが持つ、各カラーチャンネルのビット数を表します。カラーデバイス出ない場合は値は0となります）。ただし、<integer>に0または負の値を指定することはできません。

color-index

指定できる値
<integer>
適用対象
視覚的媒体
min/max接頭辞
サンプルコード
@media all and (color-index) { … }
補足
出力デバイスの持つカラーテーブルのエントリ数を表します。デバイスがカラーテーブルを持たない場合、値は 0 となります。

monochrome

指定できる値
<integer>
適用対象
視覚的媒体
min/max接頭辞
あり
サンプルコード
@media all and (monochrome) { … }
補足
モノクロームフレームバッファにおける階調数を表します。デバイスがモノクロデバイスでない場合、値は 0 となります。

resolution

指定できる値
<resolution>
適用対象
ビットマップ媒体
min/max接頭辞
サンプルコード
補足
出力デバイスの解像度を表します。dpiやdpcmという単位をもちいます。

scan

指定できる値
progressive | interlace
適用対象
メディアタイプ”tv”
min/max接頭辞
なし
サンプルコード
@media tv and (scan: progressive) { … }
補足
メディアタイプ”tv”の出力デバイスが持つ捜査処理方法を表します。

grid

指定できる値
<resolution>
適用対象
すべての媒体
min/max接頭辞
なし
サンプルコード
@media handheld and (grid) and (max-width: 15em) { … }
補足
出力デバイスがグリッドであるかビットマップであるかを表します。グリッドベース（”tty”や1つのこちフォントしか持たない電話のディスプレイなど）である場合は1、グリッドベースでない場合は値が0になります。
0か1が妥当な値（-0も）として認識されます。

まとめ

上記の内容は様々なブログやW3Cのメディアクエリー（勧告候補）のページの日本語版を参考に書いています。
そこに書いてあった内容を踏まえると、iPhone用のCSSをメディアクエリーで分けるのも悪くないのではないかと思えました。
確かに、よくブログで紹介されているmax-widthとmin-widthで判別する方法はさまざまなデバイスが出てきた場合に問題が起こりそうです。
ただ、メディアフィーチャーの値でポートレイトやランドスケープが用意されていることを考えると、スマートフォンへの対応も少なからず意識されているのではないかと思います。
現状、iPhone 3G以降のiPhoneはview portが480pxに指定されているようなので、iPhone向けの対応は案外簡単に済みます。
今後さらに種類が増え、ディスプレイサイズが機種によって違うAndroid端末への対応も迫られてきても、ある程度対応ができそうです。
もちろん、これをメディアクエリーを使わずにiPhone用のページを作成することが間違いなく安全で確実だと思いますので、使用する場合は慎重に扱わないといけません。

参考サイト

]]> http://web.londoner25.net/2010/08/30/media-queries/feed/ 0 iPhoneサイトの作り方 http://web.londoner25.net/2010/08/21/how-to-make-iphone-site/ http://web.londoner25.net/2010/08/21/how-to-make-iphone-site/#comments Sat, 21 Aug 2010 08:46:35 +0000 londoner25 http://web.londoner25.net/?p=1 先日、会社の勉強会で発表した内容をまとめます。

開発言語

  • HTML
  • CSS
  • (JavaScript)

表示方法

  • PCと共用
  • iPhone専用のページ

閲覧デバイスの判別方法

  • JSやPHPなどのスクリプトでUAを判別
  • ApacheでUAを判別
  • CSS3のメディアクエリーを用いてデバイスのスクリーンサイズによって判別

メディアクエリー

CSS3の新機能。link要素のmedia属性にPC用とiPhone用にそれぞれ下記のコードを挿入する。
IEシリーズはメディアクエリーを解釈してくれないので、別途CSSを用意する必要があります。

PC用
media="only screen and (min-width: 481px)"
iPhone用
media="only screen and (max-width: 480px)"
IE用
<!--[if IE]><link rel="stylesheet" type="text/css" href="ie.css" media="all" /><![endif]-->

PC用は表示領域が481px以上のデバイス用のCSSという意味で、iPhone用は480px以下のデバイス用という意味。
iPhone 4のデフォルトの解像度は最低でも640pxあるので、なぜこれでiPhone 4でもiPhone用のCSSが適用されるのかも調査が必要…

2010年8月30日10時43分追記：
元々メディアクエリーはこのような使い方を想定されていたものではなく、あくまでハックとしての使い方ではないのでしっかりとしたスマートフォン対応のWebページを作る場合はスクリプトを用いてデバイスごとにページを分けて表示させるのが一番安全かつ正しい方法と言えそうです。

2010年8月30日17時13分追記1：
iPhone 4もview portは480pxが与えられているようです。

2010年8月30日17時15分追記：
さらに詳しくメディアクエリーについて調べたところ、必ずしもスマートフォンデバイス用とは言えませんが、それを想定しているような指定方法もあったので、使わない方が安全かつ確実ではあるが、このテクニックを使っても問題なく制作ができそうでした。

作り方

PC用と共通

  • 従来の(X)HTMLとCSSで記述
  • CSS3のメディアクエリーでCSSをわける（一番簡単で確実）
  • （JSなどのスクリプトでUAに応じたCSSを出力）

Web制作会社のウルトラエルが共通のHTMLでCSSだけを変更して、うまくiPhone向けサイトを作っています。

iPhone専用

  • HTML5+CSS3で記述出来る -> mobile Safari
  • Sencha Touch, jQTouch, (jQuery mobile)などのJavaScriptライブラリを用いてマルチタッチインターフェイスに対応したネイティブアプリのような操作感のページを作成可能

WordPress、MTはプラグインやテンプレートを工夫して作り、大手レンタルブログなら自動的にiPhoneに最適化されるので手軽に実装できます。
ただし、プラグインやレンタルブログではカスタマイズの自由度は乏しいです。

制作テクニック

viewport

mobile Safari独自の仕様で、コンテンツの表示領域の横幅と拡大縮小の可否とどこまで拡大縮小出来るかを指定出来る。
<meta name="viewport" content="width=device-width , user-scalable=no , inicial-scale=1 , maximum-scale=1" />

widthに指定出来るものは横幅の数値（960など）とdevice-width。
device-widthを指定するとデバイスのデフォルトの横幅で表示される。(恐らく480px）

viewportで指定できるプロパティは

width
ページロード時の横幅で標準値は980。利用可能範囲は200～10,000
height
ページロード時の縦幅で標準値は横幅の数値に対するアスペクト比によって設定される。利用可能範囲は223～10000
initial-scale
ページロード時のスケール値。標準値はスクリーンのサイズと同じ。利用可能範囲は[minimum-scale、maximum-scale]。ユーザは“ピンチ”および“ダブルタップ”でズーム値を変更可能
user-scalable
ユーザのズーム動作の制御。“No”にするとズーム機能をoffにできる。標準値は“yes”
minimum-scale
ズーム機能を利用する際の最小スケール倍率。標準値は0.25。利用可能範囲は0～10
maximum-scale
ズーム機能を利用する際の最大スケール倍率。標準値は1.6。利用可能範囲は0～10

お気に入りをホーム画面に登録したときのアイコン

<link rel="apple-touch-icon" href="画像へのパス" />
iPhone側で角丸、光沢、ドロップシャドウの処理が施される。
アイコンの解像度はiPhone 3GS以前は57px、iPadは72px、iPhone 4は114pxらしいですが、120pxで作っても見た目の違いがわかりませんでした。アイコンの解像度にこだわるサイトでは少し大きめのアイコンサイズで作られているようです。

フルスクリーンモード

お気に入りをホーム画面に登録した場合、ページをフルスクリーン表示にすることができる。
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

前者がページをフルスクリーンモードにする設定で、後者がフルスクリーンモード時のステータスバーの色を変更する指定になります。
後者に指定できる値はblack（黒）かblack-translucent（半透明）。

フルスクリーンモードの起動画面の画像

フルスクリーンモードの場合、アプリ風にローディング画面を作ることが出来ます。
<link rel="apple-touch-startup-image" href="画像へのパス" />

自動フォントサイズ変更を無効に

iPhoneの画面の方向を変えたときに自動でフォントサイズの調整がなされる場合がある。
それを回避するために下記のCSSを記述
-webkit-text-size-adjust: none;

アドレスバーを消す

JSにて画面読み込み後に表示位置をずらしてアドレスバーや検索バーを疑似非表示に。
画面を読み込んだ瞬間に設定すると不具合がおこるかのせいがあるので、100ミリ秒後に設定するのがベター。
setTimeout('scrollTo(0,1)',100)

まとめ

上記を押さえておけば、基本的なiPhoneサイトは作れます。
もっとアプリ的なiPhoneサイトを作りたい場合はJSを使う必要があり、その中でもjQTouchなどのJSライブラリを用いると比較的楽に制作することが出来るようになります。
iPhoneやAndroidのデフォルトブラウザはwebkitベースのブラウザなので比較的自由にHTML5やCSS3を使えるのがコーダー的にはうれしいところ。

参考サイト

]]> http://web.londoner25.net/2010/08/21/how-to-make-iphone-site/feed/ 0