ThemeRoller for Mobil

まだ、ベータ版です。 ThemeRoller for Mobileは、CSSを一行も書かずにjQueryMobileのカスタムテーマを作成するWebベースのツールです。

このような感じに フォントなどの基本の設定は共通で、何種類かサンプルが作れます。 そして、ここでカスタムしたデータをダウンロードできるんです。

これらが正規に使えるようになったら、便利ですし、使い道も広がりそうですよね！

試しに、カスタマイズしたものでフォームを作ってみました。→[テスト]
今回試しに作ったものは、グラデーションなどは加えてませんが、 グラデーションも入れることも可能です。

iOS・Androidのハイライト表示の設定について

紹介します。

（以下　iOS→iOSのMobile　Safari、Android→Androidの標準ブラウザ）

リンクをタッチした時に出る(iOSでは)影だったり、(Androidでは)枠。
その色が設定出来るんです。

今回はCSS３を使った方法とjsを使った方法を紹介したいと思います。

iOS・Androidのハイライト表示の設定について

まず初めに。

今回CSS３とjsを使う方法を紹介しますが、iOSとAndroid同じ記述で同じ動きをするものはｊｓを使用するもの、のみになります。
CSS３を使用する方法では、iOSとAndroid別々の方法を紹介しています。

それでは。

CSS３を使ったハイライト表示の指定

まず、CSS３でハイライト表示の設定をするにはこの記述をします。

-webkit-tap-highlight-color:色;

これで、リンクをタッチするとハイライトカラーが変わるんです。

（-webkit-はベンダープレフィックス。）

iOSの場合。

iOSでは、そのままです。
-webkit-tap-highlight-color:色;
を記述するだけ。

おまけで、
-webkit-touch-callout:none;
を付けちゃいます。
（iOSのMobileSafariで、リンクを長押しした際出てくるポップアップメニューを非表示にする記述）

書くならこんな感じです。

a{
	color:green;
	-webkit-touch-callout:none;
	-webkit-tap-highlight-color:yellow;
}

そして、こうなります。

クリック
↓
↓

こんな感じになります。

ちなみに、今回は色をyellowに指定しましたが、色の設定は１６進数やrgbaで設定も可能で、
-webkit-tap-highlight-color:rgba(0,0,0,0);
と指定すると、ハイライト表示をオフにします。

※iOSでは:hoverの設定は”指を離したとき”に適用されます。
ですので、:hoverはつかえません。
また、今回tap-highlight-colorを使ってハイライト表示のカラーを変更しましたが、デザインなどはカスタマイズできません。

Androidの場合。

Androidの場合でも、リンクをタッチするとハイライト表示は行われています。

しかし、Androidでは、tap-highlight-colorを使用したハイライト表示のカラーの指定は、
-webkit-tap-highlight-color:rgba(0,0,0,0);
を使用した、”ハイライト表示をオフにする”指定しか適用されません。
カラーの指定はできないのです。
ですがAndroidでは、:hoverの設定がリンクをタッチした時に適用されます。
なので、tap-highlight-colorでハイライト表示で表示される枠をオフ(非表示)にしつつ、
:hoverでタッチした時のデザイン(背景色とか)をカスタマイズすると
ハイライト表示のカラーが変更されたような表示になります。
(Androidのスクショがなくてすみません・・。)

こんな感じで、iPhoneだけ向け・Androidだけ向けの設定をしなければならないんです。
面倒くさいです。
ですが、jsを使えば共通の記述で、ハイライト表示の設定ができるんです。

ｊｓを使ったハイライト表示の指定

iOSでは:hoverの設定がタッチした時ではなく、指を離したときに適用されます。
これを、Javascriptを利用して”タッチした時”に.touchstyle{~}の設定が、”タッチをやめた時”に.notouchstyle{~}の設定がリンクに適用されるようにします。
Androidでも同じ動きをします。?
まず、準備としてaタグに、CSS3での方法で
iOSの部分で説明した
-webkit-touch-callout:none;
Androidの部分で説明した
-webkit-tap-highlight-color:rgba(0,0,0,0);
を設定します。
そして、CSSはこんな感じです。

a{
	background-color:transparent;←好きな色
	-webkit-touch-callout:none;
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}
.touchstyle { background-color:yellow;}←好きな色
.notouchstyle { background-color:transparent;}←好きな色

準備と、”タッチした時”、”タッチをやめた時”のCSSの設定です。
そして、Javascript、HTMLはこちら。

window.onload = function() {
	var target = document.getElementById("test");
	target.addEventListener("touchstart",
		function(){this.className="touchstyle";}, false);
	target.addEventListener("touchend",
		function(){this.className="notouchstyle";}, false);
}

	<a id="test" href="#">sprouthead.com</a>

これで、一つの方法でiOS・Androidどちらも同じ動きをします。

こんな感じで、ハイライト表示を設定できます。

HTML５ではコンテンツの構造的な区切りにsectionを使うのが基本である。
それらの中でも特定の役割を持つものにはnav、article、aside、hgroupなどを用いる。
これらはセクションという性格を備えつつ、さらに特定の役割を持つことに理解をしておこう。
セクション定義要素の中では、通常のブロックレベル要素で内容をマークアップすればよい。
divはCSS適用の為に限定的に使い、構造を示す目的では使わない。
(WebDesigning 2011 11月号より)

こんな感じで、マークアップについてはその他いろいろあるのですが、
HTML5ではこれまでより、
よりマークアップについて細かく記述しなければならなくなりました。
今回は、ページの構造を示すセクションについてお話を。

このセクション、使いどころがちゃんと決まっています。
わかりやすいものもありますが、何とも言えぬ使いどころに悩むものも。

<header>と<footer>

→その名の通りヘッダー・フッターをマークアップします。
しかし、細かく言うと、この二つはセクション、とはされていますが、
あくまで、”セクションの中のヘッダやフッタを示す”という役割をもっているだけのようです。
なので、使いどころとしては、body要素の直下であればページ全体の、section要素の中で使えば、その中でのヘッダ・フッタという感じに。

<nav>

→主要なナビゲーションに使う。

<section>

→これは「へー！」というものが。
あらゆるところで、<div>との使い分けが迷う・・など書かれてた<section>。こんな使い分け方が。
基本は今まで<div>にしていた部分を置きかえる。しかし、「先頭に見出しがあるときは<section>」「単にスタイルを整えるときは<div>」という使い分けが良いみたいです。
これって常識なんですかね？私はなんとなくはっきりしないようなイメージがあって、「迷っちゃうならとりあえず全部<div>でいいじゃん！」と投げやりになっていたのですが、このようにはっきりしていると使い分けやすいです。

<article>

→独立した記事をマークアップする。ブログとかに使えますね。ただ、ページによっては使用しないこともありますね。
RSSフィードとして配信するのに適したコンテンツの固まりとして使うのが良いみたいです。

<aside>

→メイン・コンテンツとは関連性の低いもの。補足や広告など。

<hgroup>

→見出し。

こんな感じでさらっとマークアップについても書きました。

うまく使いこなせるようになりたいです。

１０月１９日の記事です。
「ｊQuerymobile1.0RC2がリリースされました」

とのことです。

そして、そこに、以前「jQuery mobileでiphoneぽい日時セレクト画面。」で書いた
日付・時間をいっぺんに選択でき、iphoneのようにくるくる選択出来る仕様のものが！

←クリックでブログページ行けます。

しかも今回はHTML５を使用したinputタグの入力タイプで出すことができるようです。

ブログによると、、（英文だったので、間違いもあるかもしれませんが・・）

和訳：”これらの入力のサポートはブラウザに依存するが、サポートされていない場合は、標準テキストの入力にフォールバックする必要があることに注意してください。”
という記述があるところから見ると、サポートされていないブラウザの為に何か書かなければならないのですかね・・。

和訳：”ChromeとSafariの新しいバージョンでは、日付/時刻の入力は、入力を容易にスピンボックスコントロールとして表示されます。”
新しいバージョンのChromeとSafariだと特別な表示がされるみたいですが、それもまだ確認が取れず・・・
（使っているものは最新のはずなのに表示されない？？）

まだまだ実践では使えなさそうな不安定なものなんですかね？？

疑問が多い中、とりあえず、サンプルを作ってみました。

まずはｊQueryとｊQuerymobileのｊｓとｊQuerymobileのCSSを読み込んで、、、

=html=</pre>
<div data-role="fieldcontain"><label>日付</label>
 <input id="name" type="datetime-local" name="name" value="" /></div>
<pre>

こんな感じに。

type=”datetime-local”は国・地域別のローカルの日時（タイムゾーンなしの日時）を出してくれるようです。

サンプル

↑　iPhone（iOS５）では確認が取れました。

これを求めてました！って感じの見た目。

だけどこれ、Androidでは今現在実現できないようですし、これから先も実現できるか微妙な感じがするような・・。
ちなみに、手元にあるAndroidで試してみたら、キー入力パッドが出てきた瞬間にブラウザが落ちました・・・。

そんなこんなで、不具合やら、いろいろあって
ちょっとBlogに書くのは早い感じの内容ではありますが、
ずっと求めていた見た目の、日付・時間設定のselect画面が実現できる！（かも）
ということだったので嬉しくなり、取り急ぎ紹介しました。ｗ

英文だったり、新しい記事なのでなかなか読んでいくのは大変でした；
読めてない部分、間違ってる部分無いようもっと勉強したいと思います。

また、他にもいろいろな情報が載っていますので、
気になったことがあったら紹介したいと思います。

equalbox.js

サンプル

http://myhedspace.com/blog/2011/06/25/equalbox-js/

divのボックスなどを並べたとき、
「高さを揃えたい・・・だけど、heightを指定したりはしたくないし・・・」ということありますよね。
そんな時はこれを使ってみてください。

使い方
jqueryとequalbox.jsを読み込む。

そしてこれも。

=js=

<script type="text/javascript">// <![CDATA[
	$(document).ready(function() {
		$("#box1,#box3,#box2").equalbox();
	});
// ]]></script>

(“#box1,#box3,#box2″)の部分は高さを揃えたいボックスのidまたはclassを指定してください。
同じidやclassのものでも大丈夫でした。

これだけです！！

便利です。

私は全て使っているわけではないですが、自分なりに使いやすくカスタマイズしています。
その中で、「こんな機能があったらいいのになあ・・」と思っていた?機能。

KAYACが作っていました！

Dreamweaverで閉じタグコメントを挿入出来る拡張機能

準備

1. まず、こちらから拡張機能をダウンロードします。
   KAYAC DESIGNER’S BLOG
2. ダウンロードした拡張機能（End_comment.mxp）を開く。
3. Adobe Extention Managerが起動するので[承諾する]を選択。
4. Dreamweaverを再起動

使用方法

1. コメントを挿入したい箇所(閉じタグの手前)にカーソルを。
2. [コマンド]を選択し、[閉じタグコメントを挿入]を選択。

これだけです。この、[閉じタグコメントを挿入]はショートカットを設定しとくと良いです。

挿入される閉じタグコメントは”#○○”や”.▲▲”など、idとclassの書き分けもしてくれます。

本当に便利な拡張機能です。

これまで、スマートフォン向けサイトのコーディングについて勉強してきたのですが、
いざ、作ってみるとちゃんと理解しきれていなかった部分や、方法がいろいろあって、
結局どれを使えばいいのか・・・など土壇場で迷ってしまいました。

スマートフォン向けサイトは、もう結構数も増えてきましたし
コーディングの仕方が書いてあるサイトや本も出てきています。

ですが、まだまだやり方が定まらず日々勉強中です。
なので、勉強していく中で学んだことなどを少しずつ書いていきたいと思います。

まず初めに、スマートフォン向けサイトをコーディングする上で。

スマートフォンに搭載されているブラウザはHTML５を積極的にサポートしています。なので、ぜひ！HTML５で書いてみてください。 また、容量を抑えるために画像はできるだけ控えて、できるだけCSS３などで表現する。

私もHTML５で書きます。HTML５慣れていくためにも・・。
CSS３に関して、画像はできるだけ控えて・・というのも結構難しいですよね。
でも、角丸など、今までよく出てきた、悩まされたような部分には使えそうですね！
その他、画像や図形をCSS３で表現する！とかになると大変だろうなあ・・。とおもいます・・。

前置きが長くなりましたが、今回の本題。 私が一番悩まされたもの。いえ、悩んでるもの。

viewportについて。

結構これで悩んでいる人も多いようです。（ちなみに、私は常にiPhoneとAndroidどちらも対応させることを前提で考えています。）

viewportについて、調べたら説明してくれるサイトも本もたくさんあります。
だけども、答えが一つにならない。
難しく説明されすぎていて結局どれにしたらいいのかわからない。（これは自分自身の問題ですが。。）

いろいろ見ていきましたが、丁寧に説明してくれているサイトはありました。

iPhone生活

こちらにはAndroid対応の説明も。

Android対応スマートフォンサイトのレイアウト

なんとなくわかったこと。
リキッドレイアウトをするのであれば、

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />

これが良い。みたいです。。
場合によってはinitial-scale=1.0を加えたりもする。

しかし、固定スタイルの場合、うまくいかない。

固定スタイルにするときの話

そもそもリキッドレイアウトのが良いらしいですが、実際それではなかなかできないデザインが多いような気がします。
ですが、例えばwidth=320とかにしてしまうと、Androidだと、左右に余白が出来てしまうし。
それから、デザインがwidth480pxのものがよく来ます。
width320pxでコーディングする際画面に合わせ、画像の表示サイズを変えてコーディングしてました。 ただ、これが大変。 width480pxの画像をwidth320px用に計算・・ 小数点になってしまった場合、切り捨てるか切り捨てないかによって、Androidに不可解な線が出てしまうという問題が発生してしまいました。 他にももっといい方法があったのかもしれませんが・・。

そんなかんじで、結局、何がしたかったかというと。
・デザインで来たままの大きさ(width480pxなら480px)でコーディングがしたい。
・Androidでも余白は作りたくない。縦にしても、横にしても。
そして、試行錯誤して使えそうなのがこれ。
width480pxの場合

<meta name="viewport" content="width=device-width,user-scalable=no, min-width=320, max-width=480">
<script type="text/javascript" src="/js/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
	$(window).bind('resize load', function(){
	        $("html").css("zoom" , $(window).width()/480 );
	});
</script>

jsはjQueryと、
スマートフォンのサイトを横に回転させた時に画面のサイズに合わせて拡大させるには こちらで紹介されている、
Androidでも、余白が表示されずに、画面幅に合わせて、ページを拡大させてくれる方法です。
これを入れると、
・デザインで来たままの大きさ(width480pxなら480px)でコーディングがしたい。
・Androidでも余白は作りたくない。縦にしても、横にしても。
この二つが解決するんです！

追記：iPhoneのMobileSafariで、あまり小さい文字を使うと（本当は小さい字は使わないことが望ましいのですが）、
文字サイズの自動調節が行われてしまい、上記のことをしても、レイアウトがくずれてしまったりする場合がありました。
その場合は、

=css=
@media screen and (max-width: 320px) and (orientation: portrait) {
	body {
	-webkit-text-size-adjust: none;
	}
}

と入れると解決しました。
こんなかんじで、いろいろ試行錯誤してみました。
まだまだ、他にも、もっといい方法はないか、勉強中です！

「効率的なサイト制作のためのDreamweaverの教科書（CS5.5対応版）」

とりあえず、読む人は
HTML・CSSなどが分かっていることが大前提。
そして、DWを使ったことある、サイト制作をしたことがある、という人のが分かりやすい
といった内容でした。

一言でいうと、「読みやすい！」本でした。

なんとなく、こんなことはできるのであろう・・と思っていたことをわかりやすく説明してます。
また、途中の項目で「●●●・・・・ｐ▲へ」など、詳細の乗ったページのガイドが載っているので、
読んでいる最中「あれ？これなんだっけ？」ともったものもわざわざ、一番後ろのページまでいかずに調べられますし、
内容も、個人的にはとてもわかりやすかったです。

本の全体は、

[PART1]ではDWを使ってサイトを作るときの作り始めから納品までの流れが書いてあります。

[PART2]では、DWでできることの詳細。

[PART3]ではサンプルに沿って、実際のサイト制作の説明。

といった流れでした。

PART2まではリファレンスぽく使えます。

スマートフォンへの対応まであります。

ただ。
PART3について。

サンプルをダウンロードして、それに沿ってサイトを作っていくという内容なのですが、
基本のHTMLにtxtファイルの内容をコピー＆ペーストして、進めていく。という流れなんです。

・・・これがわかりにくいし、学びにくい。

まず、「○○の後（▲▲行あたり）にペースト」という記述の仕方。
これでは、必ずサンプルを見ながら出ないとわからないです。
サンプルからのHTMLの抜粋も、全体のどの部分に来るものなのかがわかりにくいです。
それに、”あたり”という言い方が曖昧すぎるのがちょっと・・。
そして、学びにくい。
いくら流れを知るためとはいえ、コピー＆ペーストばっかりしていたら、あまり内容も頭に残らない。

というような感じで。

PART2までは本当にわかりやすく、読みやすかったのですが、
PART3は読み難かったです。

しかし、PART3は置いといて、
すでにDreamweaverを使える人には、さらっと読めて復習が出来ますし、
あまり、得意でないけど、ちゃんと使いたい。と思っている人にもしっかり、学べる内容なので、
Dreamweaverを使う人は一回は読んでおくと使えるのではないかな！という一冊でした。

・ブラウザには、初期状態で適用されるスタイルがある
・各要素に対して文字の装飾やマージンなどの指定がされる
・強制的なスタイルがオリジナルスタイルの邪魔になることがある

などなど。

そんなデフォルトで適用されてしまうスタイルを”リセット”するのがリセットスタイルです。

いろいろおすすめされているものもそれぞれですが、私は牧野工房でおすすめされている物を利用しています。
＜牧野工房＞
他にも、ヤフーが配布している物や、
＜yahoo＞
HTML5用、スマートフォンサイト用など、様々なものがあります。

しかし、時にはリセットスタイルを設定しているために不具合があったり、うまくいかないことが・・・（私の使い方が行けないのでしょうか；）
そんなこともあるので、ただ持ってきて使うだけではなくいろんな種類のリセットスタイルの中身を見比べてどれがいいか選ぶのがいいと思います！
特にスマートフォンサイト用は、jquerymobileと使うとおかしくなってしまうなど困る部分も。。
まだまだ研究中です。

jQuery Masonry

ちょっと見にくいかもしれませんがサンプルを・・・

サンプルページ

［使い方］
jQueryとjQuery.masonry.jsを読み込む
そして、これを。

=js=

$(function(){
    $('<!--並べるボックスを包んでいる要素のクラス・ID名-->').masonry();
})

このような感じに書いて、あとは中のボックスにfloatを指定。
幅や余白などは用途に合わせて指定してください。

これだけで、簡単、きれいに並ぶんですね。
すごいです。
「jQuery Masonry」
http://masonry.desandro.com/demos/basic-single-column.html

ただ、英語のサイトなので読み解くのがちょっと大変です・・。