<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
		xmlns:xhtml="http://www.w3.org/1999/xhtml"
>

<channel>
	<title>Take it easy!　 - mauekusa &#039;s BLOG - &#187; HTML5</title>
	<atom:link href="http://blog.bot.vc/category/html5/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.bot.vc</link>
	<description>　SocialMedia / SmartPhone / Banana な BLOG</description>
	<lastBuildDate>Thu, 16 Apr 2026 18:23:05 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.4.1</generator>
<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.bot.vc/category/html5/feed/" />
		<item>
		<title>jQueryMobile と Bootstrapが、フラットデザイン（ FlatUI ）に対応予定 コンポーネントまとめ</title>
		<link>http://blog.bot.vc/2013/07/jqmbstflat/</link>
		<comments>http://blog.bot.vc/2013/07/jqmbstflat/#comments</comments>
		<pubDate>Sun, 28 Jul 2013 21:20:20 +0000</pubDate>
		<dc:creator>manabu uekusa</dc:creator>
				<category><![CDATA[HTML5]]></category>
		<category><![CDATA[スマートフォン]]></category>

		<guid isPermaLink="false">http://blog.bot.vc/?p=4459</guid>
		<description><![CDATA[この記事の所要時間： 約 3分27秒 iOS7のリリースが、秋頃を予定しているので、 スマートフォンのサイトやアプリは、フラットデザイン（FlatUI）へ 徐々に、対応してきています。 jQueryMobileと、Twi &#8230; <a href="http://blog.bot.vc/2013/07/jqmbstflat/">続きを読む <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<div style="border-top:2px dotted #ccc;border-bottom:2px dotted #ccc;padding:0.2em 0;text-align:right;font-size:small;color:#444">
	この記事の所要時間： <span style="font-weight:bold">約 <span style="color:#f00">3</span>分<span style="color:#f00">27</span>秒</span>
</div>
<p>
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2013/07/jqmbstflat_title.png" title="Jqmbstflat title"><img src="http://blog.bot.vc/wp-content/uploads/2013/07/jqmbstflat_title.png" alt="Jqmbstflat title" title="jqmbstflat_title.png" border="0" width="557" height="232" /></a><br />
<br />
<strong>iOS7</strong>のリリースが、秋頃を予定しているので、<br />
スマートフォンのサイトやアプリは、<strong>フラットデザイン</strong>（<strong>FlatUI</strong>）へ<br />
徐々に、対応してきています。<br />
<br />
<strong>jQueryMobile</strong>と、<strong>Twitter</strong> <strong>Bootstrap</strong>も、次のバージョンアップで<br />
<strong>FlatUI</strong>に、対応するようになります。<br />
まだ、アルファ版ですが、どのように変わるのか<br />
まとめておきたいと思います。<br />
<br />
FlatUIについては、過去の記事を参考にして下さい。<br />
<br />
<strong>今後流行る？ Flat UI (フラットデザイン) まとめ</strong><br />
 <a href="http://blog.bot.vc/2013/05/flatui/" target="_blank" class="advmk">http://blog.bot.vc/2013/05/flatui/</a><br />
<br />
<span id="more-4459"></span><br />
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2013/07/jQM140Bootstrap3.002.png" title="JQM140Bootstrap3 002"><img src="http://blog.bot.vc/wp-content/uploads/2013/07/jQM140Bootstrap3.002.png" alt="JQM140Bootstrap3 002" title="jQM140Bootstrap3.002.png" border="0" width="500" height="auto" /></a><br />
<br />
冒頭でも触れましたが、<strong>iOS7</strong>が<strong>FlatUI</strong>となるため<br />
サイトを含めた、インターフェースを<strong>フラット</strong>にするのが主流となりそうです。<br />
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2013/07/jQM140Bootstrap3.003.png" title="JQM140Bootstrap3 003"><img src="http://blog.bot.vc/wp-content/uploads/2013/07/jQM140Bootstrap3.003.png" alt="JQM140Bootstrap3 003" title="jQM140Bootstrap3.003.png" border="0" width="500" height="auto" /></a><br />
<br />
<strong>Twitter</strong> <strong>Bootstrap</strong>も、<strong>Version 3</strong>から、FlatUIに対応します。<br />
<br />
<strong>Bootstrap 3 RC1</strong><br />
 <a href="http://bit.ly/14VYun0" target="_blank" class="advmk">http://bit.ly/14VYun0</a><br />
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2013/07/jQM140Bootstrap3.004.png" title="JQM140Bootstrap3 004"><img src="http://blog.bot.vc/wp-content/uploads/2013/07/jQM140Bootstrap3.004.png" alt="JQM140Bootstrap3 004" title="jQM140Bootstrap3.004.png" border="0" width="500" height="auto" /></a><br />
<br />
<strong>jQueryMobile</strong>も、<strong>1.4.0</strong>から<strong>FlatUI</strong>となります。<br />
現在、アルファ版がレビューされています。<br />
<br />
<strong>jQuery Mobile 1.4.0 Alfa.1</strong><br />
 <a href="http://bit.ly/15S3Xbr" target="_blank" class="advmk">http://bit.ly/15S3Xbr</a><br />
<br />
それぞれのフレームワークのデザインの特徴を<br />
詳しく説明したいと思います。<br />
<br />
<h2>BootStrap3</h2>
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2013/07/jQM140Bootstrap3.006.png" title="JQM140Bootstrap3 006"><img src="http://blog.bot.vc/wp-content/uploads/2013/07/jQM140Bootstrap3.006.png" alt="JQM140Bootstrap3 006" title="jQM140Bootstrap3.006.png" border="0" width="500" height="auto" /></a><br />
<br />
こんな感じで、<strong>フラット</strong>なインターフェースになりました。<br />
<br />
FlatUIの特徴的な、<strong>ビビット</strong>なカラーに対応してます。<br />
また、シャドウや装飾などのない、コンポーネントになっています。<br />
<br />
<h2>jQuery Mobile 1.4.0</h2>
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2013/07/jQM140Bootstrap3.008.png" title="JQM140Bootstrap3 008"><img src="http://blog.bot.vc/wp-content/uploads/2013/07/jQM140Bootstrap3.008.png" alt="JQM140Bootstrap3 008" title="jQM140Bootstrap3.008.png" border="0" width="500" height="auto" /></a><br />
<br />
<strong>jQueryMobile</strong>も、<strong>FlatUI</strong>になります。<br />
シャドウなどがなくなり、フラットなインターフェースになります。<br />
<br />
<strong>flip switch</strong> は、フラットデザインにある<br />
角張った、スイッチになりました。<br />
<br />
アイコンも、<strong>SVGアイコン</strong>となりました。<br />
<br />
ボタンなどのカラーは、<strong>明るい青</strong>がデフォルトになっています。<br />
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2013/07/jQM140Bootstrap3.009.png" title="JQM140Bootstrap3 009"><img src="http://blog.bot.vc/wp-content/uploads/2013/07/jQM140Bootstrap3.009.png" alt="JQM140Bootstrap3 009" title="jQM140Bootstrap3.009.png" border="0" width="500" height="auto" /></a><br />
<br />
<strong>リストビュー</strong>も、フラットデザインになっています。<br />
今よりも、すっきりしたデザインになります。<br />
<br />
<h3>比較</h3>
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2013/07/jQM140Bootstrap3.010.png" title="JQM140Bootstrap3 010"><img src="http://blog.bot.vc/wp-content/uploads/2013/07/jQM140Bootstrap3.010.png" alt="JQM140Bootstrap3 010" title="jQM140Bootstrap3.010.png" border="0" width="500" height="auto" /></a><br />
<br />
実際に、「<strong>今日のスカイツリー</strong>」サイトで、新旧の比較をしてみました。<br />
<strong>jQueryMobile</strong>のバージョンだけ上げて比較しています。<br />
<br />
リストビューは、かなりスッキリして見やすくなります。<br />
<br />
<strong>今日のスカイツリー</strong><br />
 <a href="http://skytree-today.info/" target="_blank" class="advmk">http://skytree-today.info/</a><br />
<br />
<h2>まとめ</h2>
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2013/07/jQM140Bootstrap3.011.png" title="JQM140Bootstrap3 011"><img src="http://blog.bot.vc/wp-content/uploads/2013/07/jQM140Bootstrap3.011.png" alt="JQM140Bootstrap3 011" title="jQM140Bootstrap3.011.png" border="0" width="500" height="auto" /></a><br />
<br />
・<strong>Webフレームワーク</strong>は、今後<strong>フラットデザイン</strong>（<strong>FlatUI</strong>）が主流となっていく<br />
<br />
　スマートフォンあぷりだけでなく、WebサイトやPCサイトも<br />
　シンプルな、フラットデザイン（FlatUI）が主流になりそうです<br />
<br />
・<strong>Bootstrap</strong>、<strong>jQueryMobile</strong>も、<strong>FlatUI</strong>に<br />
<br />
　今後、Webフレームワークは、流行のデザインを意識するため<br />
　FlatUIが、簡単に利用できるようにバージョンアップされます<br />
<br />
・スマホ画面は、<strong>秋</strong>をターゲットに<strong>FlatUI</strong>へ対応<br />
<br />
　<strong>iOS7</strong>が秋にリリース予定なので、それにあわせて<br />
　フラットなデザインの、アプリやサイトを準備しておく必要があります<br />
<br />
　OSやアイコンが、FlatUIとなり統一感を出すために<br />
　スマホで利用するサービスは、<strong>フラットデザイン</strong>に統一されていきます<br />
<br />
<strong>Bootstrap</strong>、<strong>jQueryMobile</strong>も<strong>FlatUI</strong>に対応して<br />
簡単にフラットなデザインを利用できるようになります。<br />
<br />
秋までに、みなさんも<strong>フラットデザイン</strong>のアプリや<br />
サイトの準備をして行きましょう！<br />
<br />
<h2>スライドまとめ</h2>
<br />
<iframe src="http://www.slideshare.net/slideshow/embed_code/24705923" width="512" height="421" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="http://www.slideshare.net/mauekusa/j-qm140bootstrap3" title="jQueryMobile と Bootstrapが、フラットデザイン（ FlatUI ）に対応予定 コンポーネントまとめ" target="_blank">jQueryMobile と Bootstrapが、フラットデザイン（ FlatUI ）に対応予定 コンポーネントまとめ</a> </strong> from <strong><a href="http://www.slideshare.net/mauekusa" target="_blank">Manabu Uekusa</a></strong> </div></p>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:comments href="http://blog.bot.vc/2013/07/jqmbstflat/"></fb:comments>]]></content:encoded>
			<wfw:commentRss>http://blog.bot.vc/2013/07/jqmbstflat/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.bot.vc/2013/07/jqmbstflat/" />
	</item>
		<item>
		<title>夏サミ2012に参加してきました！セミナーまとめ</title>
		<link>http://blog.bot.vc/2012/07/natsumi/</link>
		<comments>http://blog.bot.vc/2012/07/natsumi/#comments</comments>
		<pubDate>Sat, 28 Jul 2012 14:47:14 +0000</pubDate>
		<dc:creator>manabu uekusa</dc:creator>
				<category><![CDATA[HTML5]]></category>
		<category><![CDATA[スマートフォン]]></category>
		<category><![CDATA[ソーシャルメディア]]></category>

		<guid isPermaLink="false">http://blog.bot.vc/?p=2245</guid>
		<description><![CDATA[この記事の所要時間： 約 10分44秒 今週、品川で「Developers [Social Enterprise] Summit 2012」 通称 夏サミに、参加してきました！ 夏サミ http://codezine.j &#8230; <a href="http://blog.bot.vc/2012/07/natsumi/">続きを読む <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<div style="border-top:2px dotted #ccc;border-bottom:2px dotted #ccc;padding:0.2em 0;text-align:right;font-size:small;color:#444">
	この記事の所要時間： <span style="font-weight:bold">約 <span style="color:#f00">10</span>分<span style="color:#f00">44</span>秒</span>
</div>
<p>
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2012/07/head.png" title="Head"><img src="http://blog.bot.vc/wp-content/uploads/2012/07/head.png" alt="Head" title="head.png" border="0" width="550" height="183" /></a><br />
<br />
今週、品川で「<strong>Developers [Social Enterprise] Summit 2012</strong>」<br />
通称 <strong>夏サミ</strong>に、参加してきました！<br />
<br />
<strong>夏サミ</strong><br />
 <a href="http://codezine.jp/devsumi/2012/social" target="_blank" class="advmk">http://codezine.jp/devsumi/2012/social</a><br />
<br />
とても、参考になる話しばかりだったので、<br />
ブログにも、まとめておこうと思います。<br />
<span id="more-2245"></span><br />
<br />
基調講演の始めに、salesforce CTOの及川さんより挨拶があり<br />
「<strong>ソーシャルエンタープライズ</strong>」という新しい考え方がある。<br />
「<strong>ソーシャルは、コンシューマーだけでなく、ビジネスでも生きる</strong>」<br />
と言う話しを聞きました。<br />
<br />
たしかに、<strong>Twitter</strong>や<strong>Facebook</strong>、最近だと特にFacebookで<br />
<strong>仕事関係</strong>でも、活用して来たなぁと思います。<br />
また、<strong>社内SNS</strong>のソリューションも、増えてきた気がします。<br />
<br />
<strong>基調講演</strong><br />
<h2>What is Social Enterprise ? 企業システムの近未来を夢想する</h2>
新野 淳一 氏 / 西脇 資哲 氏 / 藤井 彰人 氏 / 村上 明子 氏 / 関 孝則 氏<br />
<br />
<h3>クラウドが破壊するもの、創造するもの</h3>
<br />
<a herf="http://www.publickey1.jp/" target="_blank">publickey</a>の<strong>新野さん</strong>から、リレー形式で講演がありました。<br />
<br />
<strong>クラウドがもたらす変化</strong><br />
　・あらゆるリソースがソフトウェアで調達可能<br />
　・オンデマンドでスケールアウト／スケールイン<br />
　・事実上無限のリソース<br />
　・高度な運用の自動化<br />
　・グローバル展開<br />
<br />
<strong>・あらゆるリソースがソフトウェアで調達可能</strong><br />
あらゆるリソースが<strong>ソフトウェア</strong>で提供されるようになっています。<br />
<strong>PaaS</strong>、<strong>IaaS</strong>でも、<br />
ハードウェアを調達しなくても、サービスできるようになってきました。<br />
<br />
<strong>・オンデマンドでスケールアウト／スケールイン</strong><br />
ボタン一つで、リソースの追加や削除が出来ます。<br />
サーバが<strong>自動でスケールアウト</strong>することも、最近は出来るようになりました。<br />
<br />
<strong>・事実上無限のリソース</strong><br />
今までのように、<strong>ハードウェアの準備が必要なく</strong><br />
事実上無限のリソースが提供されます。<br />
まあ、<strong>10000VM</strong>がほしいって言っても、すぐにはない気がしますが＾＾<br />
<br />
<strong>・高度な運用の自動化</strong><br />
サーバの運用は、PaaS、IaaSの提供側がやってくれます。<br />
HDD故障などで、<strong>運用作業</strong>を行う必要がなくなりました。<br />
<br />
<strong>・グローバル展開</strong><br />
<strong>海外のサーバ</strong>も、ボタン一つで調達できます。<br />
簡単にグローバル展開ができる環境が、提供されています。<br />
<br />
クラウドで、スピードが劇的に速くなりました。<br />
<br />
従来のSIは、<strong>受注単価</strong>が<strong>最大2桁下がった</strong>。<br />
ハードウェアの必要がなくなったため、物販の仕入れ販売がなくなりました。<br />
インストール・チューニングも、必要なくなりました。<br />
<br />
<strong>開発期間</strong>も短くなって、<strong>6ヶ月→3ヶ月</strong>になるものも多くなってきた。<br />
これも、すごく分かります。<br />
<br />
<a herf="http://jquerymobile.com/" target="_blank">jQueryMobile</a>などのフレームワークを使って、<br />
スマートフォンウェブサービスを作ろうとすると、<br />
今までよりも、<strong>2〜3倍のスピードで開発</strong>が出来ます。<br />
<br />
労働集約的なシステム運用は、PaaSやIaaSに含まれてきているため<br />
運用の仕事は、少なくなってきています。<br />
<br />
また、<strong>オンプレミス</strong>および、<strong>パッケージソフトウェア</strong>は、<br />
<strong>サービス</strong>に、どんどん移行されています。<br />
<a herf="https://live.cybozu.co.jp/" target="_blank">サイボウズLive</a>などが、良い例です。<br />
<br />
<h3>クラウドの破壊から逃げよう！</h3>
・成功の大事な条件は、成功するセグメントにいること。<br />
・デベロッパーは破壊から、創造へ向かおう<br />
・仮説が正しいと限らない。自分で判断する<br />
<br />
成功するためには、流れを読んで<br />
<strong>成功するセグメント</strong>にいることが大事です。<br />
<strong>創造</strong>することに向かって、<strong>自分で判断して行動</strong>する。<br />
<br />
<strong>クラウド</strong>は、<strong>サービスモデル型</strong>になってきてます。<br />
ソフトを自分でインストールしなくても、ブラウザから簡単に使え<br />
オンサイトサポートが不要となった。今は、小規模でも展開が可能です。<br />
<br />
<h3>モバイルを含むマルチデバイス展開</h3>
・主要機能はクラウド側に実装 <br />
・ビューをデバイスごとに最適化<br />
・ビッグデータの活用も大事<br />
<br />
<strong>・主要機能はクラウド側に実装 </strong><br />
アプリ側に実装すると、更新がリアルタイムにならないため<br />
主要な機能は、クラウド側（Web）に実装するのが重要です。<br />
<br />
<strong>・ビューをデバイスごとに最適化</strong><br />
スマートフォン、タブレットなどデバイス毎に<br />
大きさが違うため、ビューを端末に合わせて、最適化します。<br />
<br />
<h3>ソーシャル化</h3>
ソーシャル化のきっかけは、2009年11月の<strong>Chatter</strong>登場<br />
業務アプリケーションも、ソーシャル化してきています。<br />
あらゆる業務アプリに、<strong>ソーシャル</strong>や<strong>コラボ機能</strong>が組み込まれていきます。<br />
<br />
<strong>ソーシャルを基盤にした新しいアイデア</strong><br />
・分析<br />
・コラボレーション、業務ワークフロー<br />
・アプリケーション連携<br />
・ボット<br />
<br />
標準技術として、<strong>OpenSocial2.0</strong>や、<strong>OpenID Connect</strong>などが注目されています。<br />
<br />
<h2>コンシューマでうけた機能をエンタープライズへ</h2>
<br />
<strong>Google 藤井さん</strong><br />
<br />
テクノロジーの変化<br />
<strong>１．クラウド<br />
２，モバイル<br />
３．ソーシャル</strong><br />
クラウドは単純なWeb化でなく、<strong>人</strong>・<strong>情報</strong>をどのようにつなげて<br />
効率化するかが、ポイントとなります。<br />
<br />
ライフスタイルの変化<br />
新しいITの指針は、「どこでも」「どのチームとでも」「いつでも」<br />
「どんなデバイスでも」がポイントです。<br />
コンシューマーの変化に、気づく必要があります。<br />
<br />
<h3>GoogleApps導入事例 動画</h3>
<strong>株式会社スマートエデュケーション様</strong><br />
<iframe width="560" height="315" src="http://www.youtube.com/embed/y2R_7Pt2AeM" frameborder="0" allowfullscreen></iframe><br />
<br />
<strong>Tick-Tock様</strong><br />
<iframe width="560" height="315" src="http://www.youtube.com/embed/BUBeeEBAn-s" frameborder="0" allowfullscreen></iframe><br />
<br />
<h2>Microsoftのエンタープライズソーシャル</h2>
<br />
<strong>Microsoft 西脇さん</strong><br />
リアルタイムコミュニケーション：<strong>Skype</strong>、<strong>Lync</strong><br />
情報の共有：<strong>SharePoint</strong>、<strong>Yammer</strong><br />
それぞれの機能がバラバラでなく、統合していることが大事<br />
SharePointのUIは、FacebookのUIに似ています。<br />
<br />
<strong>OfficeTalk</strong>も、Office365に統合して、<br />
アプリ・ファイル・人などをフォローできるようになりました。<br />
<br />
Outlookも、<strong>ソーシャルプラグイン機能</strong>があります。<br />
メール送信相手のソーシャル情報が、すぐに見えて便利です。<br />
<br />
<strong>Microsoft Outlook Social Connector プロバイダ (Facebook 版)</strong><br />
 <a href="http://www.microsoft.com/ja-jp/download/details.aspx?id=5039" target="_blank" class="advmk">http://www.microsoft.com/ja-jp&#8230;&#8230;px?id=5039</a><br />
<br />
<h2>ソーシャル活用のための分析技術</h2>
<br />
<strong>IBM 村上さん</strong><br />
<br />
エンタープライズソーシャルは、<strong>どこでもつながる</strong>ことが大事<br />
状況に応じて必要な情報へアクセスし、データ分析で新しい発見をする。<br />
<br />
データだけでなく、<strong>人</strong>が大事。<br />
うまくサービスを使ってもらう事がポイントとなります。<br />
<br />
<h2>企業システムの近未来を夢想する</h2>
<br />
<strong>salesforce 関さん</strong><br />
<br />
ソーシャルメディアで<strong>双方向</strong>のやり取りがされ、<br />
しかも<strong>モバイル</strong>で、<strong>いつでもアクセス</strong>出来るようになります。<br />
<br />
ソーシャルメディア中の、顧客の声を分析します。<br />
また、顧客のプロファイル機能に、<strong>ソーシャルデータ</strong>を付けます。<br />
<br />
<strong>chatter</strong>で色々なものをフォローできます。<br />
<strong>人</strong>だけでなく、<strong>情報</strong>、<strong>システム</strong>などをフォローできます。<br />
大事なのはつながり、知らない人ともコラボできる仕組みです。<br />
<br />
<strong>chatter</strong>は、<strong>API</strong>が用意されており、外部との連携も<br />
chatter ConnectでREST APIが利用出来る。OAuthにも対応しています。<br />
<strong>QlickView</strong>にも、chatterプラグインが用意されています。<br />
<br />
<h2>タブレット法人導入のトリセツ</h2>
<strong>大木 豊成 氏</strong><br />
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2012/07/625112021.jpeg" title="625112021"><img src="http://blog.bot.vc/wp-content/uploads/2012/07/625112021.jpeg" alt="625112021" title="625112021.jpeg" border="0" width="400" height="auto" /></a><br />
<br />
<strong>セミナー資料</strong><br />
<iframe src="http://www.slideshare.net/slideshow/embed_code/13769422" width="512" height="421" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="http://www.slideshare.net/kumaboo/dev-sami-120727slideshare" title="Dev sami 120727_slideshare" target="_blank">Dev sami 120727_slideshare</a> </strong> from <strong><a href="http://www.slideshare.net/kumaboo" target="_blank">Toyoshige Oki</a></strong> </div>
<br />
<a herf="http://blogs.itmedia.co.jp/tooki/" target="_blank">大木さん</a>の<a herf="http://jinzai-ikusei.co.jp/" target="_blank">イシン株式会社</a>は、<br />
スマートフォン、タブレットの導入コンサル、導入支援、サポートを行っています。<br />
<br />
タブレットを導入することが目的ではなく、ビジネスで何をやるかが目的<br />
便利にするために、iPadを導入する。<strong>目的をハッキリさせる</strong>事が大事。<br />
導入するには、スピードがポイント。簡単にまずは使ってみることが大事です。<br />
<br />
メールは、埋もれてしまうためソーシャルメディアを活用するのが良く<br />
社内SNSの<a herf="http://www.zyncro.jp/" target="_blank">Zyncro</a>は、情報が埋もれない<br />
社外の人も、招待できるのでプロジェクト別にも利用でき便利です。<br />
<br />
<strong>Do not wait…</strong> 待たないで、先に進む事が大事！<br />
<br />
<strong>スマートタブレット導入のフロー</strong><br />
<strong>購入 → 検討 → お試し → 検討 → 導入 → 運用</strong><br />
<br />
まずは、<strong>数台購入</strong>して実際に触ると、要望やアイデアが出てきます。<br />
パイロット導入で、ユーザーを巻き込んで使うのが大事です。<br />
導入時には、社内説明会も必要となります。<br />
<br />
ソフトを使う場合は、市販のアプリケーションを使ってから<br />
業務面でバグ出しをすると、実際の活用の場面に反映が出来きます。<br />
<br />
ソーシャルメディアありきでなく、ソーシャルメディアを活用してビジネスをする事が大事です。<br />
<br />
<h2>モバイルを軸に「すべてを再発明」</h2>
　～開発者はどこまでやれるのか～<br />
<br />
<strong>畑中 洋亮 氏</strong><br />
<br />
<strong>セミナー資料</strong><br />
<br />
<iframe src="http://www.slideshare.net/slideshow/embed_code/13772408" width="512" height="421" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="http://www.slideshare.net/oniak3/windows-phone-13772408" title="Windows Phoneの企業内活用方法、社内向けアプリ開発と展開">Windows Phoneの企業内活用方法、社内向けアプリ開発と展開</a> </strong> from <strong><a href="http://www.slideshare.net/oniak3" target="_blank">Akira Onishi</a></strong> </div>
<br />
人類の三代発明<br />
　<strong>文字</strong>、<strong>車輪</strong>、<strong>インターネット</strong><br />
今は、モバイルがあり持ち歩ける。<strong>短時間</strong>・複雑ではなく目的が明確（<strong>単目的</strong>）<br />
<br />
次世代IT導入のステップ<br />
<strong>1.メール/カレンダー<br />
2.SFA/CRM/ポータル<br />
3.スマートデバイス<br />
4.汎用ビジネスアプリ<br />
5.フルカスタマイズ/業務アプリ開発<br />
</strong><br />
<br />
<strong>ガリバーの導入事例</strong><br />
2300台の<strong>iPad</strong>を導入<br />
<a herf="http://www.i3-systems.com/mdm.html" target="_blank">CLOMO MDM</a>で端末を管理<br />
GoogleAppsも導入しています。<br />
<br />
アプリも機能別に作成。平均<strong>1週間</strong>に、1度リリースしました。<br />
<strong>現場</strong>が、<strong>実際に体験</strong>出来る事が大事です。<br />
<strong>触る</strong> → <strong>直す</strong>の繰り返しを行い、<br />
サイクルを速く回して、小さな試行錯誤を繰り返します。<br />
<br />
<strong>HTML5</strong>を活用しています。アプリだと修正が大変だけど、<br />
HTML5だと、作りやすく・直しやすくて便利です。<br />
<br />
コミュニケーションは、「<strong>意味</strong>」のやりとりです。<br />
アプリも同じく、<strong>意味をもって作る</strong>のがポイントです。<br />
<br />
今までのIT → わかっている事を速くやる。<br />
これから必要なIT → <strong>今、どこで、何が、おこっているのか</strong>分かる事が必要です。<br />
<br />
ソーシャル → 経緯をもって理解する。<strong>時系列</strong>を持った情報で理解します。<br />
<br />
モバイルは、<strong>スモールスタート</strong>が大事です。<br />
小さな試行錯誤の繰り返しをして、<strong>修正の繰り返し</strong>で良いモノを作ります。<br />
<br />
<h2>まとめ</h2>
他の２つのセッションを、受講したんですが、<br />
まとめた、基調講演と２つのセッションが、<br />
とても参考になったので、BLOGにまとめておきました。<br />
<br />
その他は、togetterにツイートをまとめておいたので、<br />
そちらを、参考にして下さい＾＾<br />
<br />
<h3>今回のセミナーで感じたことまとめ</h3>
<br />
<strong>クラウド</strong>が出てきたことで、やることが変わった<br />
単純な労働集約的な作業でなく、<strong>創造する作業</strong>をする事が大事です。<br />
<br />
クラウドを活用する事で、サービスを速く立ち上げられる。<br />
システムの開発期間も<strong>3ヶ月</strong>程度の縮められ、<strong>スモールスタート</strong>で始める。<br />
<br />
<strong>モバイル</strong>は、いつでも利用出来るため、<strong>リアルタイム性</strong>が重要<br />
<strong>シンプル</strong>に単機能、<strong>単目的</strong>にすることで分かりやすいサービスとなる。<br />
<br />
スマートフォン・タブレットを導入するときは、まず<strong>触ってみて行動</strong>する。<br />
<strong>Do not wait…</strong> 待たないで、<strong>先に進む</strong>事が大事！<br />
<br />
アプリ開発よりも、<strong>HTML5</strong>を活用して<strong>Web</strong>にしていく。<br />
<strong>修正の繰り返し</strong>で、現場が使える良いモノを作る。<br />
<br />
ソーシャルは、<strong>時系列</strong>のデータをもっておくことが重要です。<br />
人のフォローだけでなく、情報・ファイルなどの<strong>リソースもフォロー</strong>できる。<br />
<br />
とても有意義な1日でした。次の<strong>devsumi</strong>にも参加したいと思います。<br />
<br />
<h2>参考サイト</h2>
<strong>夏サミ</strong><br />
 <a href="http://codezine.jp/devsumi/2012/social" target="_blank" class="advmk">http://codezine.jp/devsumi/2012/social</a><br />
<br />
<br />
<strong>togetter ツイートまとめ</strong><br />
 <a href="http://togetter.com/li/346252" target="_blank" class="advmk">http://togetter.com/li/346252</a></p>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:comments href="http://blog.bot.vc/2012/07/natsumi/"></fb:comments>]]></content:encoded>
			<wfw:commentRss>http://blog.bot.vc/2012/07/natsumi/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.bot.vc/2012/07/natsumi/" />
	</item>
		<item>
		<title>Safari6がリリースされました！検索フィールドが統合</title>
		<link>http://blog.bot.vc/2012/07/safari6/</link>
		<comments>http://blog.bot.vc/2012/07/safari6/#comments</comments>
		<pubDate>Wed, 25 Jul 2012 21:24:36 +0000</pubDate>
		<dc:creator>manabu uekusa</dc:creator>
				<category><![CDATA[HTML5]]></category>

		<guid isPermaLink="false">http://blog.bot.vc/?p=2240</guid>
		<description><![CDATA[この記事の所要時間： 約 2分42秒 OS X Mountain Lionが、リリースされたので、Safari6も同時にリリースされました。 Safari6は、LionでもUpdateでインストールが可能です。 早速使っ &#8230; <a href="http://blog.bot.vc/2012/07/safari6/">続きを読む <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<div style="border-top:2px dotted #ccc;border-bottom:2px dotted #ccc;padding:0.2em 0;text-align:right;font-size:small;color:#444">
	この記事の所要時間： <span style="font-weight:bold">約 <span style="color:#f00">2</span>分<span style="color:#f00">42</span>秒</span>
</div>
<p>
<strong>OS X Mountain Lion</strong>が、リリースされたので、<strong>Safari6</strong>も同時にリリースされました。<br />
Safari6は、LionでもUpdateでインストールが可能です。<br />
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2012/07/update1.png" title="Update"><img src="http://blog.bot.vc/wp-content/uploads/2012/07/update1.png" alt="Update" title="update.png" border="0" width="400" height="auto" /></a><br />
<br />
早速使ってみたので、Mountain Lionで使える、新しい<strong>4つの機能</strong>も含めて紹介します。<br />
<span id="more-2240"></span><br />
<h2>スマート検索フィールド</h2>
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2012/07/safari6_01.png" title="Safari6 01"><img src="http://blog.bot.vc/wp-content/uploads/2012/07/safari6_01.png" alt="Safari6 01" title="safari6_01.png" border="0" width="400" height="auto" /></a><br />
<br />
<strong>検索フィールド</strong>がなくなって、<strong>URLバーと統合</strong>されました。<br />
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2012/07/safari6_02.png" title="Safari6 02"><img src="http://blog.bot.vc/wp-content/uploads/2012/07/safari6_02.png" alt="Safari6 02" title="safari6_02.png" border="0" width="400" height="auto" /></a><br />
<br />
<strong>Chrome</strong>と同じで、検索キーワードを入れれば検索になり<br />
URLを入力すれば、そのページが表示されるようになりました。<br />
<br />
<br />
<h2>タブビュー</h2>
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2012/07/overview_tabs.jpeg" title="Overview tabs"><img src="http://blog.bot.vc/wp-content/uploads/2012/07/overview_tabs.jpeg" alt="Overview tabs" title="overview_tabs.jpeg" border="0" width="400" height="auto" /></a><br />
<br />
<strong>タブビュー</strong>は、Mountain Lionでのみ動作する機能です。<br />
タブの切り替えが、<strong>スワイプ</strong>で出来るようになります。<br />
また、<strong>ピンチ</strong>でタブビューに切り替わります。<br />
<br />
<h2>iCloudタブ</h2>
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2012/07/overview_icloud.jpeg" title="Overview icloud"><img src="http://blog.bot.vc/wp-content/uploads/2012/07/overview_icloud.jpeg" alt="Overview icloud" title="overview_icloud.jpeg" border="0" width="400" height="auto" /></a><br />
<br />
<strong>iCloudタブ</strong>も、Mountain Lionでのみ動作する機能です。<br />
iPad、iPhoneなどのSafariと<strong>履歴が共有</strong>されます。<br />
いつでも、最後に見ていたページの続きを、簡単に見ることが出来ます。<br />
<br />
iPhone / iPadは、<strong>iOS6</strong>以上が必要なので<br />
あとちょっとで、利用出来るようになる機能です。<br />
今だと、Mountain Lionが入っている、Mac間で共有できます。<br />
<br />
<h2>共有機能</h2>
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2012/07/overview_share.jpeg" title="Overview share"><img src="http://blog.bot.vc/wp-content/uploads/2012/07/overview_share.jpeg" alt="Overview share" title="overview_share.jpeg" border="0" width="400" height="auto" /></a><br />
<br />
<strong>共有機能</strong>も、Mountain Lionでのみ動作する機能です。<br />
共有ボタンをクリックするだけで、簡単に共有できます。<br />
<br />
<strong>・メールに共有<br />
・Facebookに共有<br />
・Twitterに共有</strong><br />
が、簡単にできます。<br />
<br />
Twitter、Facebookは、一度ログインしておけば、<br />
次回からは、ログインしなくてもシェアができます。<br />
<br />
<h2>パフォーマンスの向上</h2>
ページの読み込みが高速になりました。<br />
また、<strong>Nitro JavaScriptエンジン</strong>が、複数のCoreを<br />
活用するようになったので、JavaScriptがより速く動きます。<br />
<br />
<h2>Web Audio APIに対応</h2>
<strong>HTML5</strong>の<strong>Web Audio API</strong>に、対応しました。<br />
音声操作のAPI、複数メディアを同期する、字幕やキャプション<br />
などが、出来るようになります。<br />
詳細に関しては、今後調べてみようと思います。<br />
<br />
<strong>Mountain Lion</strong>も、本日リリースされたので、<br />
時間のあるときに、Updateしてみて新機能について、調べてみたいと思います。<br />
<br />
Mountain Lionは、<strong>AppStore</strong>で<strong>1700円</strong>、簡単に更新出来ます。<br />
<br />
<a href="http://click.linksynergy.com/fs-bin/click?id=AxgQo*pAmLc&#038;subid=0&#038;offerid=94348.1&#038;type=10&#038;tmpid=3910&#038;RD_PARM0=http%3A%2F%2Fitunes.apple.com%2Fjp%2Fapp%2Fos-x-mountain-lion%2Fid537386512%3Fmt%3D12%2526uo%3D4&#038;RD_PARM1=http%3A%2F%2Fitunes.apple.com%2Fjp%2Fapp%2Fos-x-mountain-lion%2Fid537386512%3Fmt%3D12%2526uo%3D4" rel="nofollow" target="_blank"><img align="left" hspace="6" src="http://a2.mzstatic.com/us/r1000/103/Purple/v4/5d/2d/29/5d2d290d-d000-2d35-1f82-67503ece9a72/ProductPageIcon.60x60-50.png" width="75" style="margin-right: border-radius: 11px 11px 11px 11px;-moz-border-radius: 11px 11px 11px 11px;-webkit-border-radius: 11px 11px 11px 11px;box-shadow: 1px 4px 6px 1px #999999;-moz-box-shadow: 1px 4px 6px 1px #999999;-webkit-box-shadow: 1px 4px 6px 1px #999999;margin: -5px 15px 1px 5px;"/><b>OS X Mountain Lion</b> <img alt="App" src="http://ax.phobos.apple.com.edgesuite.net/ja_jp/images/web/linkmaker/badge_macappstore-sm.gif" style="vertical-align: text-bottom;" /></b><br /><br />
</a>カテゴリ: 仕事効率化<br /><br />
価格: &#65509;1,700<br clear="all" /><img border="0" width="1" height="1" src="http://ad.linksynergy.com/fs-bin/show?id=Dk8JKvDVYwE&#038;bids=186984.200232&#038;type=3&#038;subid=0">
<br />
<h2>関連リンク</h2>
<br />
<strong>Safari</strong><br />
 <a href="http://www.apple.com/jp/safari/" target="_blank" class="advmk">http://www.apple.com/jp/safari/</a><br />
<br />
<strong>OS X Mountain Lion</strong><br />
 <a href="http://www.apple.com/jp/osx/" target="_blank" class="advmk">http://www.apple.com/jp/osx/</a><br />
<br />
<strong>Web Audio API</strong><br />
 <a href="https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html" target="_blank" class="advmk">https://dvcs.w3.org/hg/audio/r&#8230;&#8230;ation.html</a></p>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:comments href="http://blog.bot.vc/2012/07/safari6/"></fb:comments>]]></content:encoded>
			<wfw:commentRss>http://blog.bot.vc/2012/07/safari6/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.bot.vc/2012/07/safari6/" />
	</item>
		<item>
		<title>スマホサイトをHTMLなしで作れる codiqaがすごい！</title>
		<link>http://blog.bot.vc/2012/04/codiqa/</link>
		<comments>http://blog.bot.vc/2012/04/codiqa/#comments</comments>
		<pubDate>Sun, 22 Apr 2012 22:06:00 +0000</pubDate>
		<dc:creator>manabu uekusa</dc:creator>
				<category><![CDATA[HTML5]]></category>
		<category><![CDATA[スマートフォン]]></category>

		<guid isPermaLink="false">http://blog.bot.vc/?p=1561</guid>
		<description><![CDATA[この記事の所要時間： 約 4分59秒 最近、jQueryMobileを使って、スマートフォン用のサイトを作ったりしていますが codiqaというツールは、HTMLを書かなくても、スマホサイトが作れます。 ドラッグ＆ドロッ &#8230; <a href="http://blog.bot.vc/2012/04/codiqa/">続きを読む <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<div style="border-top:2px dotted #ccc;border-bottom:2px dotted #ccc;padding:0.2em 0;text-align:right;font-size:small;color:#444">
	この記事の所要時間： <span style="font-weight:bold">約 <span style="color:#f00">4</span>分<span style="color:#f00">59</span>秒</span>
</div>
<p>
<a href="http://blog.bot.vc/2012/04/codiqa/codiqa_title/" rel="attachment wp-att-1564"><img src="http://blog.bot.vc/wp-content/uploads/2012/04/codiqa_title.png" alt="" title="codiqa_title" width="562" height="289" class="alignnone size-full wp-image-1564" /></a><br />
<br />
最近、jQueryMobileを使って、スマートフォン用のサイトを作ったりしていますが<br />
<strong>codiqa</strong>というツールは、HTMLを書かなくても、スマホサイトが作れます。<br />
ドラッグ＆ドロップと、簡単な設定だけ作れてしまうので、めちゃ便利です。<br />
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2012/04/codiqa.002.png" title="Codiqa 002"><img src="http://blog.bot.vc/wp-content/uploads/2012/04/codiqa.002.png" alt="Codiqa 002" title="codiqa.002.png" border="0" width="400" height="auto" /></a><br />
<br />
機能を一通り調べてみたので、まとめておきたいと思います。<br />
<span id="more-1561"></span><br />
まずは、サイトに行ってアカウントの登録が必要です。<br />
 <a href="http://codiqa.com/" target="_blank" class="advmk">http://codiqa.com/</a><br />
<br />
アカウントは、メールアドレスのみで簡単に作れます。<br />
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2012/04/codiqa.003.png" title="Codiqa 003"><img src="http://blog.bot.vc/wp-content/uploads/2012/04/codiqa.003.png" alt="Codiqa 003" title="codiqa.003.png" border="0" width="400" height="auto" /></a><br />
<br />
新規プロジェクトを作成すると、ページを追加していけば<br />
簡単に<strong>jQueryMobile</strong>を使って、スマホページを作成されます。<br />
<br />
作ったプロジェクトは、保存ボタンを押して、アプリ名を入れれば<br />
保存もしておけます。また、自動保存機能も付いています。<br />
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2012/04/codiqa.004.png" title="Codiqa 004"><img src="http://blog.bot.vc/wp-content/uploads/2012/04/codiqa.004.png" alt="Codiqa 004" title="codiqa.004.png" border="0" width="400" height="auto" /></a><br />
<br />
プロジェクトの、コピー機能もあるので便利です。<br />
今まで作ったプロジェクトを使って、新しいページを簡単に作ることもできます。<br />
DOWNLOAD HTMLから、作成したページのHTMLもダウンロードできます。<br />
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2012/04/codiqa.005.png" title="Codiqa 005"><img src="http://blog.bot.vc/wp-content/uploads/2012/04/codiqa.005.png" alt="Codiqa 005" title="codiqa.005.png" border="0" width="400" height="auto" /></a><br />
<br />
codiqaのページデザイン画面は、<br />
左側に配置可能なコンポーネントが、リストで並んでいます。<br />
真ん中の、端末にドラッグ＆ドロップすると、配置が出来ます。<br />
右側の設定ウィンドウに、表示する文字などを設定していきます。<br />
<br />
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2012/04/codiqa.006.png" title="Codiqa 006"><img src="http://blog.bot.vc/wp-content/uploads/2012/04/codiqa.006.png" alt="Codiqa 006" title="codiqa.006.png" border="0" width="400" height="auto" /></a><br />
<br />
HTMLを記述しなくても、ページ作成が可能で<br />
ボタンを押したら、ページへ移動することも出来ます。<br />
移動先のページを、リストから選択するだけで、作れちゃいます！<br />
<br />
配置できるコンポーネントは、<strong>18種類</strong>が用意されています。<br />
最近テキストリンクが追加されたので、今後も追加されていくと思います。<br />
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2012/04/codiqa.007.png" title="Codiqa 007"><img src="http://blog.bot.vc/wp-content/uploads/2012/04/codiqa.007.png" alt="Codiqa 007" title="codiqa.007.png" border="0" width="400" height="auto" /></a><br />
<br />
どんなコンポーネントが使えるのか、細かく説明していきたいと思います。<br />
<br />
<h3>ツールバー</h3>
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2012/04/codiqa.008.png" title="Codiqa 008"><img src="http://blog.bot.vc/wp-content/uploads/2012/04/codiqa.008.png" alt="Codiqa 008" title="codiqa.008.png" border="0" width="400" height="auto" /></a><br />
<br />
ページのヘッダ、フッタと、メニューが簡単に作れます。<br />
Themeを指定して、配色も変更できます。<br />
ヘッダとフッダ内に、ボタンなども配置できます。<br />
<br />
<h3>ボタン・リスト</h3>
ボタンと、リストビューも簡単に作れます。<br />
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2012/04/codiqa.009.png" title="Codiqa 009"><img src="http://blog.bot.vc/wp-content/uploads/2012/04/codiqa.009.png" alt="Codiqa 009" title="codiqa.009.png" border="0" width="400" height="auto" /></a><br />
<br />
ボタンは、画面サイズにあわせて幅が変わります。<br />
Inlineを指定すれば、文字の長さにあわせた大きさになります。<br />
<br />
リストビューを使えば、簡単なメニュー一覧が作成出来ます。<br />
LinkToPageを指定して、リンク先のページも簡単に設定出来ます。<br />
<br />
<h3>地図・タイトル</h3>
GoogleMapを使った地図も作れます。<br />
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2012/04/codiqa.010.png" title="Codiqa 010"><img src="http://blog.bot.vc/wp-content/uploads/2012/04/codiqa.010.png" alt="Codiqa 010" title="codiqa.010.png" border="0" width="400" height="auto" /></a><br />
<br />
地図は、場所の名前を指定するだけで<br />
簡単に地図を、表示出来ます。<br />
会社のホームページなどに使うと便利そうです。<br />
<br />
タイトルは、5種類の大きさが指定できます。<br />
<br />
<h3>テキスト・画像</h3>
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2012/04/codiqa.011.png" title="Codiqa 011"><img src="http://blog.bot.vc/wp-content/uploads/2012/04/codiqa.011.png" alt="Codiqa 011" title="codiqa.011.png" border="0" width="400" height="auto" /></a><br />
<br />
テキストは、リッチテキストエディタで<br />
簡単に装飾を付けることもできるし、HTMLで記述することもできます。<br />
<br />
画像は、URLを指定すれば表示が出来ます。<br />
<br />
<h3>折りたたみリスト・グリッド</h3>
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2012/04/codiqa.012.png" title="Codiqa 012"><img src="http://blog.bot.vc/wp-content/uploads/2012/04/codiqa.012.png" alt="Codiqa 012" title="codiqa.012.png" border="0" width="400" height="auto" /></a><br />
<br />
折りたたみ式のリストも、簡単に作れます。<br />
<br />
グリッドを利用すれば、段組を作ったり<br />
ボタンの配置を、綺麗に作ったり出来ます。<br />
<br />
<h3>フォーム・入力フィールド</h3>
簡単な入力フォームも作成出来ます。<br />
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2012/04/codiqa.013.png" title="Codiqa 013"><img src="http://blog.bot.vc/wp-content/uploads/2012/04/codiqa.013.png" alt="Codiqa 013" title="codiqa.013.png" border="0" width="400" height="auto" /></a><br />
<br />
入力フィールドも、テキスト入力の他に<br />
スライドバーや、検索アイコンのついた<br />
入力フィールドを作ることが出来ます。<br />
<br />
<h3>テキストボックス・スイッチ</h3>
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2012/04/codiqa.014.png" title="Codiqa 014"><img src="http://blog.bot.vc/wp-content/uploads/2012/04/codiqa.014.png" alt="Codiqa 014" title="codiqa.014.png" border="0" width="400" height="auto" /></a><br />
<br />
長めの文字入力する、テキストボックスも作れます。<br />
<br />
スイッチは、表示する文字を指定すれば<br />
on/off のボタン以外にも、はい/いいえ などの<br />
日本語ボタンも作れます。<br />
<br />
<h3>スライダー・ドロップダウンメニュー</h3>
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2012/04/codiqa.015.png" title="Codiqa 015"><img src="http://blog.bot.vc/wp-content/uploads/2012/04/codiqa.015.png" alt="Codiqa 015" title="codiqa.015.png" border="0" width="400" height="auto" /></a><br />
<br />
数値を簡単に指定できる、スライダーも作れます。<br />
選択式のドロップダウンメニューも作れます。<br />
<br />
<h3>サブミットボタン・テキストリンク</h3>
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2012/04/codiqa.016.png" title="Codiqa 016"><img src="http://blog.bot.vc/wp-content/uploads/2012/04/codiqa.016.png" alt="Codiqa 016" title="codiqa.016.png" border="0" width="400" height="auto" /></a><br />
<br />
フォームに使う、サブミットボタンも作れます。<br />
Themeを指定すれば、色の変更も出来ます。<br />
<br />
テキストリンクを使えば、ページ変更も簡単に出来ます。<br />
18種類も、コンポーネントが用意されているので<br />
組み合わせることで、デモサイトは簡単に作れちゃいます！<br />
<br />
<br />
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2012/04/codiqa.017.png" title="Codiqa 017"><img src="http://blog.bot.vc/wp-content/uploads/2012/04/codiqa.017.png" alt="Codiqa 017" title="codiqa.017.png" border="0" width="400" height="auto" /></a><br />
<br />
codiqaは、<strong>デバイスサイズ</strong>も<strong>8種類</strong>用意されています。<br />
iPhone / iPad だけじゃなく、Androidもスマホサイズと、<br />
タブレットのサイズで、6種類用意されています。<br />
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2012/04/codiqa.018.png" title="Codiqa 018"><img src="http://blog.bot.vc/wp-content/uploads/2012/04/codiqa.018.png" alt="Codiqa 018" title="codiqa.018.png" border="0" width="400" height="auto" /></a><br />
<br />
<strong>ThemeRoller</strong>を使用することで、配色もカスタマイズ出来ます。<br />
 <a href="http://jquerymobile.com/themeroller/" target="_blank" class="advmk">http://jquerymobile.com/themeroller/</a><br />
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2012/04/codiqa.019.png" title="Codiqa 019"><img src="http://blog.bot.vc/wp-content/uploads/2012/04/codiqa.019.png" alt="Codiqa 019" title="codiqa.019.png" border="0" width="400" height="auto" /></a><br />
<br />
ThemeRollerで作ったCSSを、codiqaでも簡単に利用出来ます。<br />
<br />
<h3>料金プラン</h3>
<br />
codiqaは、2つの料金プランが用意されています。<br />
月額10ドルだと、5プロジェクトまで利用が出来ます。<br />
月額30ドル払えば、制限がなくなるそうです。<br />
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2012/04/codiqa.020.png" title="Codiqa 020"><img src="http://blog.bot.vc/wp-content/uploads/2012/04/codiqa.020.png" alt="Codiqa 020" title="codiqa.020.png" border="0" width="400" height="auto" /></a><br />
<br />
現在は、30日間の無料トライアルが出来ます。<br />
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2012/04/codiqa.021.png" title="Codiqa 021"><img src="http://blog.bot.vc/wp-content/uploads/2012/04/codiqa.021.png" alt="Codiqa 021" title="codiqa.021.png" border="0" width="400" height="auto" /></a><br />
<br />
codiqaみたいなツールが、沢山出てくれば<br />
将来は、HTMLをほとんど記述しなくても<br />
スマホページを作ることが出来ると思います。<br />
<br />
Webページをドラッグ＆ドロップで<br />
作成出来るのは、かなり驚きでした。<br />
簡単に作成出来るので、みなさんもチャレンジしてみて下さい。<br />
<br />
<h2>まとめスライド</h2>
<br />
<div style="width:510px" id="__ss_12643544"> <strong style="display:block;margin:12px 0 4px"><a href="http://www.slideshare.net/mauekusa/htmlcodiqa" title="スマホサイトをHTMLなしで作れるcodiqaまとめ" target="_blank">スマホサイトをHTMLなしで作れるcodiqaまとめ</a></strong> <iframe src="http://www.slideshare.net/slideshow/embed_code/12643544" width="510" height="426" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> <div style="padding:5px 0 12px"> View more <a href="http://www.slideshare.net/" target="_blank">presentations</a> from <a href="http://www.slideshare.net/mauekusa" target="_blank">Manabu Uekusa</a> </div> </div>
<br />
<h2>サイトまとめ</h2>
<strong>codiqa</strong><br />
 <a href="http://codiqa.com/" target="_blank" class="advmk">http://codiqa.com/</a><br />
<br />
<strong>ThemeRoller</strong><br />
 <a href="http://jquerymobile.com/themeroller/" target="_blank" class="advmk">http://jquerymobile.com/themeroller/</a></p>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:comments href="http://blog.bot.vc/2012/04/codiqa/"></fb:comments>]]></content:encoded>
			<wfw:commentRss>http://blog.bot.vc/2012/04/codiqa/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.bot.vc/2012/04/codiqa/" />
	</item>
		<item>
		<title>これからのスマホサイトは、jQueryMobileで作成しよう！</title>
		<link>http://blog.bot.vc/2012/04/jquerymobile/</link>
		<comments>http://blog.bot.vc/2012/04/jquerymobile/#comments</comments>
		<pubDate>Tue, 10 Apr 2012 22:13:37 +0000</pubDate>
		<dc:creator>manabu uekusa</dc:creator>
				<category><![CDATA[HTML5]]></category>
		<category><![CDATA[スマートフォン]]></category>
		<category><![CDATA[書籍]]></category>

		<guid isPermaLink="false">http://blog.bot.vc/?p=1489</guid>
		<description><![CDATA[この記事の所要時間： 約 11分55秒 最近は、スマートフォン対応のサイトが結構増えてきて HTML5/CSS3などで作ろうとか、流行ってきています。 みなさんは、「jQueryMobile」って聞いたことありますか？  &#8230; <a href="http://blog.bot.vc/2012/04/jquerymobile/">続きを読む <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<div style="border-top:2px dotted #ccc;border-bottom:2px dotted #ccc;padding:0.2em 0;text-align:right;font-size:small;color:#444">
	この記事の所要時間： <span style="font-weight:bold">約 <span style="color:#f00">11</span>分<span style="color:#f00">55</span>秒</span>
</div>
<p>
<a href="http://blog.bot.vc/2012/04/jquerymobile/jquerymobile_title/" rel="attachment wp-att-1491"><img src="http://blog.bot.vc/wp-content/uploads/2012/04/jQueryMobile_title.png" alt="" title="jQueryMobile_title" width="564" height="293" class="alignnone size-full wp-image-1491" /></a><br />
<br />
最近は、スマートフォン対応のサイトが結構増えてきて<br />
HTML5/CSS3などで作ろうとか、流行ってきています。<br />
<br />
みなさんは、「<strong>jQueryMobile</strong>」って聞いたことありますか？<br />
jQueryMobileは、スマートフォンやタブレット向けのプラットフォームで<br />
簡単にiPhoneアプリのような、インターフェイスがWebで実現できる技術です。<br />
<br />
先日リリースをした、スマホ向け安否確認「<a href="https://www.softbanktech.jp/mobile/co-mobile-asp/mobileperfectsp/" target="_blank">Mobile Perfect SP</a>」でも<br />
jQueryMobileのフレームワークを活用しています。<br />
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2012/04/jQueryMobile.0021.png" title="JQueryMobile 002"><img src="http://blog.bot.vc/wp-content/uploads/2012/04/jQueryMobile.0021.png" alt="JQueryMobile 002" title="jQueryMobile.002.png" border="0" width="400" height="auto" /></a><br />
 <a href="http://jquerymobile.com/" target="_blank" class="advmk">http://jquerymobile.com/</a><br />
<br />
簡単なHTMLを記述するだけで、タッチパネル向けの<br />
インターフェイスが作れます！<br />
<br />
jQueryMobileのサイトには、分かりやすいドキュメントも<br />
サンプル付きであるので、HTMLがかける知識があれば<br />
すぐに始めることが出来ます。<br />
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2012/04/jQueryMobile.003.png" title="JQueryMobile 003"><img src="http://blog.bot.vc/wp-content/uploads/2012/04/jQueryMobile.003.png" alt="JQueryMobile 003" title="jQueryMobile.003.png" border="0" width="400" height="auto" /></a><br />
 <a href="http://jquerymobile.com/demos/1.1.0-rc.2/" target="_blank" class="advmk">http://jquerymobile.com/demos/&#8230;&#8230;.1.0-rc.2/</a><br />
<br />
また、jQueryMobileの特徴の一つが<br />
幅広く様々な、スマートフォン端末に対応していて<br />
それぞれの端末にグレードを分けてサポートしています。<br />
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2012/04/jQueryMobile.004.png" title="JQueryMobile 004"><img src="http://blog.bot.vc/wp-content/uploads/2012/04/jQueryMobile.004.png" alt="JQueryMobile 004" title="jQueryMobile.004.png" border="0" width="400" height="auto" /></a><br />
 <a href="http://jquerymobile.com/original-graded-browser-matrix/" target="_blank" class="advmk">http://jquerymobile.com/origin&#8230;&#8230;er-matrix/</a><br />
<br />
このマトリックス表の、<strong>Aは高品質</strong>で端末に対して<br />
積極的にテストをしています。<strong>Bは中品質</strong>で<br />
そんなにシェアをもってない端末だけど、対応しているよと。<br />
<strong>Cが低品質</strong>で、ほとんど対応していません。<br />
<br />
jQueryMobileの基本的な使い方は<br />
ヘッダ、フッタ、コンテンツ部分を記述して<br />
それぞれに必要な要素を記載していきます。<br />
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2012/04/jQueryMobile.005.png" title="JQueryMobile 005"><img src="http://blog.bot.vc/wp-content/uploads/2012/04/jQueryMobile.005.png" alt="JQueryMobile 005" title="jQueryMobile.005.png" border="0" width="400" height="auto" /></a><br />
<br />
こんな感じのHTMLを書けば、スマホ向けの<br />
ページフレームを作成することができます。<br />
<br />

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
</pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #00bbdd;">&lt;!DOCTYPE html&gt;</span> 
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">html</span>&gt;</span> 
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">head</span>&gt;</span> 
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">title</span>&gt;</span>My Page<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">title</span>&gt;</span> 
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">meta</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;viewport&quot;</span> <span style="color: #000066;">content</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;width=device-width, initial-scale=1&quot;</span>&gt;</span> 
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">link</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;stylesheet&quot;</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.2.min.css&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://code.jquery.com/jquery-1.7.1.min.js&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.2.min.js&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">head</span>&gt;</span> 
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">body</span>&gt;</span> 
&nbsp;
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;page&quot;</span>&gt;</span>
&nbsp;
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;header&quot;</span>&gt;</span>
		<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h1</span>&gt;</span>My Title<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h1</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span><span style="color: #808080; font-style: italic;">&lt;!-- /header --&gt;</span>
&nbsp;
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;content&quot;</span>&gt;</span>	
		<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span>&gt;</span>Hello world<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span>		
		<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">br</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span>&gt;</span>
		<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">br</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span>&gt;</span>
		<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">br</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span>&gt;</span>
		<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">br</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span>&gt;</span>
		<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">br</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span><span style="color: #808080; font-style: italic;">&lt;!-- /content --&gt;</span>
&nbsp;
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;footer&quot;</span>&gt;</span>
		<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h1</span>&gt;</span>footer<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h1</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span><span style="color: #808080; font-style: italic;">&lt;!-- /footer --&gt;</span>
&nbsp;
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span><span style="color: #808080; font-style: italic;">&lt;!-- /page --&gt;</span>
&nbsp;
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">body</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">html</span>&gt;</span></pre></td></tr></table></div>

<br />
<br />
<br />
<a href="http://blog.bot.vc/jqm/jQueryMobile_sample.html" target="_blank">ページサンプル</a><br />
<br />
<h2>テーマ指定</h2>
<br />
jQueryMobileは標準で、<strong>5種類のテーマ</strong>を用意しています。<br />
<strong>黒、青、グレイ、ライトクレイ、黄色</strong>の5種類です。<br />
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2012/04/jQueryMobile.006.png" title="JQueryMobile 006"><img src="http://blog.bot.vc/wp-content/uploads/2012/04/jQueryMobile.006.png" alt="JQueryMobile 006" title="jQueryMobile.006.png" border="0" width="400" height="auto" /></a><br />
<br />
こんな感じのタグで、テーマを指定します。<br />
<br />

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
</pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;header&quot;</span> data-theme<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;a&quot;</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h1</span>&gt;</span>Header A<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h1</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-body ui-body-a&quot;</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>Header<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span>&gt;</span>This is content color swatch &quot;A&quot; and a preview of a <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-link&quot;</span>&gt;</span>link<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span>.<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;button&quot;</span> data-inline<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;true&quot;</span>&gt;</span>Button<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span></pre></td></tr></table></div>

<br />
<br />
<br />
<strong>data-theme=&#8221;a&#8221;</strong> で、黒系のテーマが適用されます。<br />
<br />
<a href="http://blog.bot.vc/jqm/jQueryMobile_sample_theme.html" target="_blank">テーマサンプル</a><br />
<br />
<h2>ボタン</h2>
<br />
タップしやすいボタンを簡単に作成できます。<br />
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2012/04/jQueryMobile.007.png" title="JQueryMobile 007"><img src="http://blog.bot.vc/wp-content/uploads/2012/04/jQueryMobile.007.png" alt="JQueryMobile 007" title="jQueryMobile.007.png" border="0" width="400" height="auto" /></a><br />
<br />
ボタンの種類も、大きさが標準サイズとミニサイズの2種類<br />
横幅が、ページ全体と文字サイズと2種類<br />
ボタンにもテーマ（色）が指定できて<br />
ボタンには、18種類のアイコンが指定できます。<br />
<br />
<strong>標準ボタン</strong><br />
<br />

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index.html&quot;</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;button&quot;</span>&gt;</span>Link button<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span></pre></div></div>

<br />
<br />
<br />
<strong>ミニボタン</strong><br />
<br />

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index.html&quot;</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;button&quot;</span> data-mini<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;true&quot;</span>&gt;</span>Link button<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span></pre></div></div>

<br />
<br />
<br />
<strong>インラインボタン（文字幅のボタン）</strong><br />
<br />

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index.html&quot;</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;button&quot;</span> data-inline<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;true&quot;</span>&gt;</span>Button<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span></pre></div></div>

<br />
<br />
<br />
<strong>テーマ（色）指定</strong><br />
<br />

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index.html&quot;</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;button&quot;</span> data-inline<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;true&quot;</span>&gt;</span>Cancel<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index.html&quot;</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;button&quot;</span> data-inline<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;true&quot;</span> data-theme<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;b&quot;</span>&gt;</span>Save<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span></pre></div></div>

<br />
<br />
<br />
<strong>アイコン指定</strong><br />
<br />

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index.html&quot;</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;button&quot;</span> data-icon<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;delete&quot;</span>&gt;</span>Delete<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span></pre></div></div>

<br />
<br />
<br />
<a href="http://blog.bot.vc/jqm/jQueryMobile_sample_buttonicon_list.html" target="_blank">ボタンサンプル</a><br />
<br />
<h2>リスト</h2>
<br />
リストも、綺麗に表示がされます。<br />
リストには沢山の種類が、用意されています。<br />
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2012/04/jQueryMobile.008.png" title="JQueryMobile 008"><img src="http://blog.bot.vc/wp-content/uploads/2012/04/jQueryMobile.008.png" alt="JQueryMobile 008" title="jQueryMobile.008.png" border="0" width="400" height="auto" /></a><br />
<br />
<strong>シンプルなリスト</strong><br />
<br />

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">ul</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;listview&quot;</span> data-inset<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;true&quot;</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index.html&quot;</span>&gt;</span>Acura<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index.html&quot;</span>&gt;</span>Audi<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index.html&quot;</span>&gt;</span>BMW<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index.html&quot;</span>&gt;</span>Cadillac<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index.html&quot;</span>&gt;</span>Ferrari<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">ul</span>&gt;</span></pre></div></div>

<br />
<br />
<br />
<strong>カウント付きリスト</strong><br />
<br />

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">ul</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;listview&quot;</span> data-inset<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;true&quot;</span>&gt;</span>
 <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index.html&quot;</span>&gt;</span>Inbox <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">span</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-li-count&quot;</span>&gt;</span>12<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">span</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index.html&quot;</span>&gt;</span>Outbox <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">span</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-li-count&quot;</span>&gt;</span>0<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">span</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index.html&quot;</span>&gt;</span>Drafts <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">span</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-li-count&quot;</span>&gt;</span>4<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">span</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index.html&quot;</span>&gt;</span>Sent <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">span</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-li-count&quot;</span>&gt;</span>328<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">span</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index.html&quot;</span>&gt;</span>Trash <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">span</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-li-count&quot;</span>&gt;</span>62<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">span</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">ul</span>&gt;</span></pre></div></div>

<br />
<br />
<br />
<strong>行番号付きリスト</strong><br />
<br />

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">ol</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;listview&quot;</span> data-inset<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;true&quot;</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index.html&quot;</span>&gt;</span>The Godfather<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index.html&quot;</span>&gt;</span>Inception<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index.html&quot;</span>&gt;</span>The Good, the Bad and the Ugly <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index.html&quot;</span>&gt;</span>Pulp Fiction<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index.html&quot;</span>&gt;</span>Schindler's List<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">ol</span>&gt;</span></pre></div></div>

<br />
<br />
<br />
画像付きのリストも、簡単に作れます。<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2012/04/jQueryMobile.009.png" title="JQueryMobile 009"><img src="http://blog.bot.vc/wp-content/uploads/2012/04/jQueryMobile.009.png" alt="JQueryMobile 009" title="jQueryMobile.009.png" border="0" width="400" height="auto" /></a><br />
<br />
<strong>フォーマットリスト</strong><br />
<br />

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">ul</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;listview&quot;</span> data-inset<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;true&quot;</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index.html&quot;</span>&gt;</span>
		<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>Stephen Weber<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>
		<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">strong</span>&gt;</span>You've been invited to a meeting at Filament Group in Boston, MA<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">strong</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span>
		<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span>&gt;</span>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span>
		<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-li-aside&quot;</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">strong</span>&gt;</span>6:24<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">strong</span>&gt;</span>PM<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index.html&quot;</span>&gt;</span>
		<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>jQuery Team<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>
		<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">strong</span>&gt;</span>Boston Conference Planning<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">strong</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span>
		<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span>&gt;</span>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span>
		<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-li-aside&quot;</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">strong</span>&gt;</span>9:18<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">strong</span>&gt;</span>AM<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">ul</span>&gt;</span></pre></div></div>

<br />
<br />
<br />
<strong>アイコンリスト</strong><br />
<br />

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">ul</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;listview&quot;</span> data-inset<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;true&quot;</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index.html&quot;</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/gf.png&quot;</span> <span style="color: #000066;">alt</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;France&quot;</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-li-icon ui-corner-none&quot;</span>&gt;</span>France <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">span</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-li-count&quot;</span>&gt;</span>4<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">span</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index.html&quot;</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/de.png&quot;</span> <span style="color: #000066;">alt</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;Germany&quot;</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-li-icon&quot;</span>&gt;</span>Germany <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">span</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-li-count&quot;</span>&gt;</span>4<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">span</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index.html&quot;</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/gb.png&quot;</span> <span style="color: #000066;">alt</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;Great Britain&quot;</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-li-icon&quot;</span>&gt;</span>Great Britain <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">span</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-li-count&quot;</span>&gt;</span>0<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">span</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index.html&quot;</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/fi.png&quot;</span> <span style="color: #000066;">alt</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;Finland&quot;</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-li-icon&quot;</span>&gt;</span>Finland <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">span</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-li-count&quot;</span>&gt;</span>12<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">span</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index.html&quot;</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/sj.png&quot;</span> <span style="color: #000066;">alt</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;Norway&quot;</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-li-icon&quot;</span>&gt;</span>Norway <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">span</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-li-count&quot;</span>&gt;</span>328<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">span</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index.html&quot;</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/us.png&quot;</span> <span style="color: #000066;">alt</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;United States&quot;</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-li-icon ui-corner-none&quot;</span>&gt;</span>United States <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">span</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-li-count&quot;</span>&gt;</span>62<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">span</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">ul</span>&gt;</span></pre></div></div>

<br />
<br />
<br />
<strong>サムネイルリスト</strong><br />
<br />

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">ul</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;listview&quot;</span> data-inset<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;true&quot;</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index.html&quot;</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/album-bb.jpg&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>Broken Bells<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span>&gt;</span>Broken Bells<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;lists-split-purchase.html&quot;</span> data-<span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;dialog&quot;</span> data-transition<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;slideup&quot;</span>&gt;</span>Purchase album
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index.html&quot;</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/album-hc.jpg&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>Warning<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span>&gt;</span>Hot Chip<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;lists-split-purchase.html&quot;</span> data-<span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;dialog&quot;</span> data-transition<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;slideup&quot;</span>&gt;</span>Purchase album
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index.html&quot;</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;images/album-p.jpg&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>Wolfgang Amadeus Phoenix<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span>&gt;</span>Phoenix<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;lists-split-purchase.html&quot;</span> data-<span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;dialog&quot;</span> data-transition<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;slideup&quot;</span>&gt;</span>Purchase album
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">ul</span>&gt;</span></pre></div></div>

<br />
<br />
<br />
<a href="http://blog.bot.vc/jqm/jQueryMobile_sample_buttonicon_list.html" target="_blank">リストサンプル</a><br />
<br />
分割・検索付きのリストも作れて<br />
検索付きは、リスト中の文字をフィルタする事が出来ます。<br />
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2012/04/jQueryMobile.010.png" title="JQueryMobile 010"><img src="http://blog.bot.vc/wp-content/uploads/2012/04/jQueryMobile.010.png" alt="JQueryMobile 010" title="jQueryMobile.010.png" border="0" width="400" height="auto" /></a><br />
<br />
<strong>分割リスト（divider）</strong><br />
<br />

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">ul</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;listview&quot;</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;list-divider&quot;</span>&gt;</span>A<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index.html&quot;</span>&gt;</span>Adam Kinkaid<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index.html&quot;</span>&gt;</span>Alex Wickerham<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index.html&quot;</span>&gt;</span>Avery Johnson<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;list-divider&quot;</span>&gt;</span>B<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
  <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index.html&quot;</span>&gt;</span>Bob Cabot<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">ul</span>&gt;</span></pre></div></div>

<br />
<br />
<br />
<strong>検索付きリスト</strong><br />
<br />

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">ul</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;listview&quot;</span> data-filter<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;true&quot;</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index.html&quot;</span>&gt;</span>Acura<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index.html&quot;</span>&gt;</span>Audi<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index.html&quot;</span>&gt;</span>BMW<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index.html&quot;</span>&gt;</span>Cadillac<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index.html&quot;</span>&gt;</span>Dodge<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index.html&quot;</span>&gt;</span>Ford<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">ul</span>&gt;</span></pre></div></div>

<br />
<br />
<br />
<h2>フォーム要素</h2>
フォームの要素も様々な物が用意されています。<br />
スマホ向けに、見やすくタップしやすくなってます。<br />
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2012/04/jQueryMobile.011.png" title="JQueryMobile 011"><img src="http://blog.bot.vc/wp-content/uploads/2012/04/jQueryMobile.011.png" alt="JQueryMobile 011" title="jQueryMobile.011.png" border="0" width="400" height="auto" /></a><br />
<br />
<br />
<strong>テキスト入力</strong><br />
<br />

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;fieldcontain&quot;</span>&gt;</span>
 <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">label</span> <span style="color: #000066;">for</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;name&quot;</span>&gt;</span>Text Input:<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">label</span>&gt;</span>
 <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text&quot;</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;name&quot;</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;name&quot;</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;&quot;</span>  <span style="color: #66cc66;">/</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span></pre></div></div>

<br />
<br />
<br />
<strong>テキストエリア入力</strong><br />
<br />

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;fieldcontain&quot;</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">label</span> <span style="color: #000066;">for</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;textarea&quot;</span>&gt;</span>Textarea:<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">label</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">textarea</span> <span style="color: #000066;">cols</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;40&quot;</span> <span style="color: #000066;">rows</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;8&quot;</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;textarea&quot;</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;textarea&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">textarea</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span></pre></div></div>

<br />
<br />
<br />
<strong>検索入力</strong><br />
<br />

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;fieldcontain&quot;</span>&gt;</span>
 <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">label</span> <span style="color: #000066;">for</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;search&quot;</span>&gt;</span>Search Input:<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">label</span>&gt;</span>
 <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;search&quot;</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;password&quot;</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;search&quot;</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;&quot;</span>  <span style="color: #66cc66;">/</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span></pre></div></div>

<br />
<br />
<br />
<strong>フリップスイッチ</strong><br />
<br />

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;fieldcontain&quot;</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">label</span> <span style="color: #000066;">for</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;slider2&quot;</span>&gt;</span>Flip switch:<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">label</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">select</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;slider2&quot;</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;slider2&quot;</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;slider&quot;</span>&gt;</span>
		<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">option</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;off&quot;</span>&gt;</span>Off<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">option</span>&gt;</span>
		<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">option</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;on&quot;</span>&gt;</span>On<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">option</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">select</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span></pre></div></div>

<br />
<br />
<br />
<strong>スライダー</strong><br />
<br />

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;fieldcontain&quot;</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">label</span> <span style="color: #000066;">for</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;slider&quot;</span>&gt;</span>Slider:<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">label</span>&gt;</span>
 	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;range&quot;</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;slider&quot;</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;slider&quot;</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;50&quot;</span> min<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;0&quot;</span> max<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;100&quot;</span> data-highlight<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;true&quot;</span>  <span style="color: #66cc66;">/</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span></pre></div></div>

<br />
<br />
<br />
<strong>チェックボックス</strong><br />
<br />

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;fieldcontain&quot;</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">fieldset</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;controlgroup&quot;</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">legend</span>&gt;</span>Choose as many snacks as you'd like:<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">legend</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;checkbox&quot;</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;checkbox-1a&quot;</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;checkbox-1a&quot;</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;custom&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">label</span> <span style="color: #000066;">for</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;checkbox-1a&quot;</span>&gt;</span>Cheetos<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">label</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;checkbox&quot;</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;checkbox-2a&quot;</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;checkbox-2a&quot;</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;custom&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">label</span> <span style="color: #000066;">for</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;checkbox-2a&quot;</span>&gt;</span>Doritos<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">label</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;checkbox&quot;</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;checkbox-3a&quot;</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;checkbox-3a&quot;</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;custom&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">label</span> <span style="color: #000066;">for</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;checkbox-3a&quot;</span>&gt;</span>Fritos<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">label</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;checkbox&quot;</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;checkbox-4a&quot;</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;checkbox-4a&quot;</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;custom&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">label</span> <span style="color: #000066;">for</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;checkbox-4a&quot;</span>&gt;</span>Sun Chips<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">label</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">fieldset</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span></pre></div></div>

<br />
<br />
<br />
<strong>チェックボックス（横並びボタンのみ）</strong><br />
<br />

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;fieldcontain&quot;</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">fieldset</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;controlgroup&quot;</span> data-<span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;horizontal&quot;</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">legend</span>&gt;</span>Font styling:<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">legend</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;checkbox&quot;</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;checkbox-6&quot;</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;checkbox-6&quot;</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;custom&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">label</span> <span style="color: #000066;">for</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;checkbox-6&quot;</span>&gt;</span>b<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">label</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;checkbox&quot;</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;checkbox-7&quot;</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;checkbox-7&quot;</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;custom&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">label</span> <span style="color: #000066;">for</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;checkbox-7&quot;</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">em</span>&gt;</span>i<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">em</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">label</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;checkbox&quot;</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;checkbox-8&quot;</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;checkbox-8&quot;</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;custom&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">label</span> <span style="color: #000066;">for</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;checkbox-8&quot;</span>&gt;</span>u<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">label</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">fieldset</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span></pre></div></div>

<br />
<br />
<br />
<strong>ラジオボタン</strong><br />
<br />

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;fieldcontain&quot;</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">fieldset</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;controlgroup&quot;</span>&gt;</span>
    	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">legend</span>&gt;</span>Choose a pet:<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">legend</span>&gt;</span>
         	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;radio&quot;</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;radio-choice-1&quot;</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;radio-choice-1&quot;</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;choice-1&quot;</span> <span style="color: #000066;">checked</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;checked&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>
         	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">label</span> <span style="color: #000066;">for</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;radio-choice-1&quot;</span>&gt;</span>Cat<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">label</span>&gt;</span>
         	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;radio&quot;</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;radio-choice-1&quot;</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;radio-choice-2&quot;</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;choice-2&quot;</span>  <span style="color: #66cc66;">/</span>&gt;</span>
         	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">label</span> <span style="color: #000066;">for</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;radio-choice-2&quot;</span>&gt;</span>Dog<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">label</span>&gt;</span>
         	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;radio&quot;</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;radio-choice-1&quot;</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;radio-choice-3&quot;</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;choice-3&quot;</span>  <span style="color: #66cc66;">/</span>&gt;</span>
         	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">label</span> <span style="color: #000066;">for</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;radio-choice-3&quot;</span>&gt;</span>Hamster<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">label</span>&gt;</span>
         	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;radio&quot;</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;radio-choice-1&quot;</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;radio-choice-4&quot;</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;choice-4&quot;</span>  <span style="color: #66cc66;">/</span>&gt;</span>
         	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">label</span> <span style="color: #000066;">for</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;radio-choice-4&quot;</span>&gt;</span>Lizard<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">label</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">fieldset</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span></pre></div></div>

<br />
<br />
<br />
<strong>レイアウトビュー</strong><br />
<br />

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;fieldcontain&quot;</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">fieldset</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;controlgroup&quot;</span> data-<span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;horizontal&quot;</span>&gt;</span>
     	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">legend</span>&gt;</span>Layout view:<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">legend</span>&gt;</span>
         	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;radio&quot;</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;radio-choice-b&quot;</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;radio-choice-c&quot;</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;on&quot;</span> <span style="color: #000066;">checked</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;checked&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>
         	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">label</span> <span style="color: #000066;">for</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;radio-choice-c&quot;</span>&gt;</span>List<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">label</span>&gt;</span>
         	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;radio&quot;</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;radio-choice-b&quot;</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;radio-choice-d&quot;</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;off&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>
         	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">label</span> <span style="color: #000066;">for</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;radio-choice-d&quot;</span>&gt;</span>Grid<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">label</span>&gt;</span>
         	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;radio&quot;</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;radio-choice-b&quot;</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;radio-choice-e&quot;</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;other&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>
         	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">label</span> <span style="color: #000066;">for</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;radio-choice-e&quot;</span>&gt;</span>Gallery<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">label</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">fieldset</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span></pre></div></div>

<br />
<br />
<br />
<strong>ドロップダウンリスト</strong><br />
<br />

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;fieldcontain&quot;</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">label</span> <span style="color: #000066;">for</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;select-choice-1&quot;</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;select&quot;</span>&gt;</span>Choose shipping method:<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">label</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">select</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;select-choice-1&quot;</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;select-choice-1&quot;</span>&gt;</span>
		<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">option</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;standard&quot;</span>&gt;</span>Standard: 7 day<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">option</span>&gt;</span>
		<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">option</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;rush&quot;</span>&gt;</span>Rush: 3 days<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">option</span>&gt;</span>
		<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">option</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;express&quot;</span>&gt;</span>Express: next day<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">option</span>&gt;</span>
		<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">option</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;overnight&quot;</span>&gt;</span>Overnight<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">option</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">select</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span></pre></div></div>

<br />
<br />
<br />
<strong>ボタン（色指定）</strong><br />
<br />

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-body ui-body-b&quot;</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">fieldset</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-grid-a&quot;</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-block-a&quot;</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">button</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;submit&quot;</span> data-theme<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;d&quot;</span>&gt;</span>Cancel<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">button</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-block-b&quot;</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">button</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;submit&quot;</span> data-theme<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;a&quot;</span>&gt;</span>Submit<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">button</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">fieldset</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span></pre></div></div>

<br />
<br />
<br />
<a href="http://blog.bot.vc/jqm/jQueryMobile_sample_formelement.html" target="_blank">フォーム要素サンプル</a><br />
<br />
<h2>レイアウト（段組）</h2>
レイアウト用のグリッドも用意されています。<br />
たとえば、ボタンを綺麗に配置したいとか<br />
文字を2段組で、表示させたいとかに使用します。<br />
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2012/04/jQueryMobile.012.png" title="JQueryMobile 012"><img src="http://blog.bot.vc/wp-content/uploads/2012/04/jQueryMobile.012.png" alt="JQueryMobile 012" title="jQueryMobile.012.png" border="0" width="400" height="auto" /></a><br />
<br />
<strong>2段ボタン</strong><br />
<br />

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">fieldset</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-grid-a&quot;</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-block-a&quot;</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">button</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;submit&quot;</span> data-theme<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;c&quot;</span>&gt;</span>Cancel<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">button</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-block-b&quot;</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">button</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;submit&quot;</span> data-theme<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;b&quot;</span>&gt;</span>Submit<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">button</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">fieldset</span>&gt;</span></pre></div></div>

<br />
<br />
<br />
<strong>2段レイアウト</strong><br />
<br />

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-grid-a&quot;</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-block-a&quot;</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-bar ui-bar-e&quot;</span> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;height:120px&quot;</span>&gt;</span>Block A<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-block-b&quot;</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-bar ui-bar-e&quot;</span> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;height:120px&quot;</span>&gt;</span>Block B<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span><span style="color: #808080; font-style: italic;">&lt;!-- /grid-a --&gt;</span></pre></div></div>

<br />
<br />
<br />
<strong>5段レイアウト</strong><br />
<br />

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-grid-d&quot;</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-block-a&quot;</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-bar ui-bar-e&quot;</span> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;height:120px&quot;</span>&gt;</span>A<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-block-b&quot;</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-bar ui-bar-e&quot;</span> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;height:120px&quot;</span>&gt;</span>B<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-block-c&quot;</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-bar ui-bar-e&quot;</span> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;height:120px&quot;</span>&gt;</span>C<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-block-d&quot;</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-bar ui-bar-e&quot;</span> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;height:120px&quot;</span>&gt;</span>D<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-block-e&quot;</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-bar ui-bar-e&quot;</span> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;height:120px&quot;</span>&gt;</span>E<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span><span style="color: #808080; font-style: italic;">&lt;!-- /grid-d --&gt;</span></pre></div></div>

<br />
<br />
<br />
<a href="http://blog.bot.vc/jqm/jQueryMobile_sample_grid.html" target="_blank">段組レイアウトサンプル</a><br />
<br />
<h2>フォームレイアウトのコツ</h2>
フォームをうまくレイアウトすると<br />
綺麗に表示がされます。<br />
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2012/04/jQueryMobile.013.png" title="JQueryMobile 013"><img src="http://blog.bot.vc/wp-content/uploads/2012/04/jQueryMobile.013.png" alt="JQueryMobile 013" title="jQueryMobile.013.png" border="0" width="400" height="auto" /></a><br />
<br />
テキスト入力は長さが指定できないので<br />
<strong>data-role=&#8221;none&#8221;</strong>で、自動でスタイルを指定させなければ<br />
sizeが、指定することが出来ます。<br />
CSSで他のテキスト入力と同じスタイルにすれば、見た目も変わらなくなります。<br />
<br />
<strong>HTMLサンプル</strong><br />
<br />

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
</pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #00bbdd;">&lt;!DOCTYPE html&gt;</span> 
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">html</span>&gt;</span> 
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">head</span>&gt;</span> 
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">meta</span> <span style="color: #000066;">charset</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;utf-8&quot;</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">meta</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;viewport&quot;</span> <span style="color: #000066;">content</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;width=device-width, initial-scale=1&quot;</span>&gt;</span> 
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">title</span>&gt;</span>My Page<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">title</span>&gt;</span> 
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">meta</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;viewport&quot;</span> <span style="color: #000066;">content</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;width=device-width, initial-scale=1&quot;</span>&gt;</span> 
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">link</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;stylesheet&quot;</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.2.min.css&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://code.jquery.com/jquery-1.7.1.min.js&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.2.min.js&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span>
&nbsp;
&nbsp;
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">style</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/css&quot;</span>&gt;</span>
input[type=&quot;text&quot;] {
	font-size: 16px;
	line-height: 1.4;
	padding: .4em;
	height: 26px;
	margin-top: 1px;
	margin-bottom: 1px;
	border-radius: .6em;
    -webkit-border-radius: .6em;
    -moz-border-radius: .6em;
    background: #f0f0f0;
    border: 1px solid #b3b3b3;
    color: #333;
	-moz-box-shadow: inset 0 1px 4px rgba(0,0,0,.2);
	-webkit-box-shadow: inset 0 1px 4px rgba(0,0,0,.2);
	box-shadow: inset 0 1px 4px rgba(0,0,0,.2);
}
&nbsp;
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">style</span>&gt;</span>
&nbsp;
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">head</span>&gt;</span> 
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">body</span>&gt;</span> 
&nbsp;
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;page&quot;</span>&gt;</span>
&nbsp;
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;header&quot;</span>&gt;</span>
		<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h1</span>&gt;</span>My Title<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h1</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span><span style="color: #808080; font-style: italic;">&lt;!-- /header --&gt;</span>
&nbsp;
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;content&quot;</span>&gt;</span>	
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h2</span>&gt;</span>サンプル<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h2</span>&gt;</span>
&nbsp;
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>均等割り付けボタン<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-grid-b&quot;</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-block-a&quot;</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;button&quot;</span> data-theme<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;a&quot;</span>&gt;</span>Button A<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-block-b&quot;</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;button&quot;</span> data-theme<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;b&quot;</span>&gt;</span>Button B<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;ui-block-c&quot;</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;button&quot;</span> data-theme<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;c&quot;</span>&gt;</span>Button C<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span><span style="color: #808080; font-style: italic;">&lt;!-- /grid-b --&gt;</span>
&nbsp;
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>横幅指定で横並びボタン<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;width:400px; overflow:hidden; &quot;</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;button&quot;</span> data-theme<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;a&quot;</span> data-inline<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;true&quot;</span> data-icon<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;back&quot;</span> &gt;</span>戻る<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;button&quot;</span> data-theme<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;b&quot;</span> data-inline<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;true&quot;</span> data-icon<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;check&quot;</span>&gt;</span>実行<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;button&quot;</span> data-theme<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;c&quot;</span> data-inline<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;true&quot;</span> data-icon<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;delete&quot;</span>&gt;</span>キャンセル<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
&nbsp;
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>Input fieldの長さ指定<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;fieldcontain&quot;</span> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;width:100%; overflow:hidden;&quot;</span>&gt;</span>
 <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">label</span>&gt;</span>ラベル:　<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">label</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">input</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;none&quot;</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text&quot;</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;name&quot;</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;name&quot;</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;&quot;</span>  <span style="color: #000066;">size</span><span style="color: #66cc66;">=</span><span style="color: #cc66cc;">12</span>&gt;</span>
 <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">label</span>&gt;</span>円<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">label</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
		<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">br</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span><span style="color: #808080; font-style: italic;">&lt;!-- /content --&gt;</span>
&nbsp;
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;footer&quot;</span>&gt;</span>
		<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h1</span>&gt;</span>footer<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h1</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span><span style="color: #808080; font-style: italic;">&lt;!-- /footer --&gt;</span>
&nbsp;
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span><span style="color: #808080; font-style: italic;">&lt;!-- /page --&gt;</span>
&nbsp;
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">body</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">html</span>&gt;</span></pre></td></tr></table></div>

<br />
<br />
<br />
<a href="http://blog.bot.vc/jqm/jQueryMobile_sample2.html" target="_blank">レイアウトのコツ サンプル</a><br />
<br />
<h2>jQueryMobile 参考書籍</h2>
<br />
jQueryMobileは、2011年11月18日に最終版の1.0がリリースされて<br />
2011年末・2012年から、書籍が沢山出るようになりました。<br />
<br />
<a rel="lightbox" href="http://blog.bot.vc/wp-content/uploads/2012/04/jQueryMobile.014.png" title="JQueryMobile 014"><img src="http://blog.bot.vc/wp-content/uploads/2012/04/jQueryMobile.014.png" alt="JQueryMobile 014" title="jQueryMobile.014.png" border="0" width="400" height="auto" /></a><br />
<br />
最近では、Android用のHTML5 / jQueryMobile本も出ました！<br />
<div class="kaerebalink-box" style="text-align:left;padding-bottom:20px;font-size:small;/zoom: 1;overflow: hidden;"><div class="kaerebalink-image" style="float:left;margin:0 15px 10px 0;"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4897978971/contentsmonog-22/ref=nosim/" rel="nofollow" target="_blank"><img src="http://ecx.images-amazon.com/images/I/51t0OqBBVlL._SL160_.jpg" style="border: none;" /></a></div><div class="kaerebalink-info" style="line-height:120%;/zoom: 1;overflow: hidden;"><div class="kaerebalink-name" style="margin-bottom:10px;line-height:120%"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4897978971/contentsmonog-22/ref=nosim/" rel="nofollow" target="_blank">AndroidのためのHTML5本格アプリ開発</a><div class="kaerebalink-powered-date" style="font-size:8pt;margin-top:5px;font-family:verdana;line-height:120%">posted with <a href="http://kaereba.com" target="_blank">カエレバ</a></div></div><div class="kaerebalink-detail" style="margin-bottom:5px;">古籏　一浩 リックテレコム 2012-04-07    </div><div class="kaerebalink-link1" style="margin-top:10px;"><div class="shoplinkamazon" style="display:inline;margin-right:5px"><a href="http://www.amazon.co.jp/gp/search?keywords=HTML5%96%7B%8Ai%83A%83v%83%8A%8AJ%94%AD&#038;__mk_ja_JP=%83J%83%5E%83J%83i&#038;tag=contentsmonog-22" rel="nofollow" target="_blank" title="アマゾン" >Amazon</a></div><div class="shoplinkrakuten" style="display:inline;margin-right:5px"><a href="http://hb.afl.rakuten.co.jp/hgc/0f5d37b2.30a35158.0f5d37b3.cd048ce9/?pc=http%3A%2F%2Fsearch.rakuten.co.jp%2Fsearch%2Fmall%2FHTML5%25E6%259C%25AC%25E6%25A0%25BC%25E3%2582%25A2%25E3%2583%2597%25E3%2583%25AA%25E9%2596%258B%25E7%2599%25BA%2F-%2Ff.1-p.1-s.1-sf.0-st.A-v.2%3Fx%3D0%26scid%3Daf_ich_link_urltxt%26m%3Dhttp%3A%2F%2Fm.rakuten.co.jp%2F" rel="nofollow" target="_blank" title="楽天市場" >楽天市場</a></div><div class="shoplinkyahoo" style="display:inline;margin-right:5px"><a href="http://ck.jp.ap.valuecommerce.com/servlet/referral?sid=2895334&#038;pid=880733296&#038;vc_url=http%3A%2F%2Fshopping.search.yahoo.co.jp%2Fsearch%3FuIv%3Don%26ei%3DUTF-8%26tab_ex%3Dcommerce%26slider%3D0%26va%3DHTML5%25E6%259C%25AC%25E6%25A0%25BC%25E3%2582%25A2%25E3%2583%2597%25E3%2583%25AA%25E9%2596%258B%25E7%2599%25BA" target="_blank" title="Yahooショッピング" >Yahooショッピング<img src="http://ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2895334&#038;pid=880733296" height="1" width="1" border="0"></a></div></div></div></div>
<br />
HTML5のAPIも、この本では詳しく書いてあるので<br />
参考になります！<br />
<br />
今回は、jQueryMobileについて長く、ソース付きでまとめました。<br />
ほとんど、自分用のまとめな気がしますが＾＾<br />
<br />
スマートフォン・タブレットは、アプリ作成が流行ってますが<br />
これからは、Webが主流になると思います。<br />
この機会に、jQueryMobileを活用されてみては、どうでしょうか？<br />
<br />
最後に、参考リンク・書籍もまとめておきます。<br />
<br />
<h2>スライドまとめ</h2>
<div style="width:510px" id="__ss_12493021"> <strong style="display:block;margin:12px 0 4px"><a href="http://www.slideshare.net/mauekusa/jquerymobile-12493021" title="スマホウェブの本命 jQueryMobile" target="_blank">スマホウェブの本命 jQueryMobile</a></strong> <iframe src="http://www.slideshare.net/slideshow/embed_code/12493021" width="510" height="426" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> <div style="padding:5px 0 12px"> View more <a href="http://www.slideshare.net/" target="_blank">presentations</a> from <a href="http://www.slideshare.net/mauekusa" target="_blank">Manabu Uekusa</a> </div> </div>
<br />
<h2>リンク</h2>
<strong>jQueryMobile公式</strong><br />
   <a href="http://jquerymobile.com/" target="_blank" class="advmk">http://jquerymobile.com/</a><br />
<br />
<strong>jQueryMobileドキュメント 1.1.0 RC2</strong><br />
   <a href="http://jquerymobile.com/demos/1.1.0-rc.2/" target="_blank" class="advmk">http://jquerymobile.com/demos/&#8230;&#8230;.1.0-rc.2/</a><br />
<br />
<strong>今回作成したサンプル（スマホ用）</strong><br />
   <a href="http://blog.bot.vc/jqm/jQueryMobile_menu.html" target="_blank" class="advmk">http://blog.bot.vc/jqm/jQueryM&#8230;&#8230;_menu.html</a><br />
<br />
<h2>関連書籍</h2>
<div class="kaerebalink-box" style="text-align:left;padding-bottom:20px;font-size:small;/zoom: 1;overflow: hidden;"><div class="kaerebalink-image" style="float:left;margin:0 15px 10px 0;"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4897978971/contentsmonog-22/ref=nosim/" rel="nofollow" target="_blank"><img src="http://ecx.images-amazon.com/images/I/51t0OqBBVlL._SL160_.jpg" style="border: none;" /></a></div><div class="kaerebalink-info" style="line-height:120%;/zoom: 1;overflow: hidden;"><div class="kaerebalink-name" style="margin-bottom:10px;line-height:120%"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4897978971/contentsmonog-22/ref=nosim/" rel="nofollow" target="_blank">AndroidのためのHTML5本格アプリ開発</a><div class="kaerebalink-powered-date" style="font-size:8pt;margin-top:5px;font-family:verdana;line-height:120%">posted with <a href="http://kaereba.com" target="_blank">カエレバ</a></div></div><div class="kaerebalink-detail" style="margin-bottom:5px;">古籏　一浩 リックテレコム 2012-04-07    </div><div class="kaerebalink-link1" style="margin-top:10px;"><div class="shoplinkamazon" style="display:inline;margin-right:5px"><a href="http://www.amazon.co.jp/gp/search?keywords=HTML5%96%7B%8Ai%83A%83v%83%8A%8AJ%94%AD&#038;__mk_ja_JP=%83J%83%5E%83J%83i&#038;tag=contentsmonog-22" rel="nofollow" target="_blank" title="アマゾン" >Amazon</a></div><div class="shoplinkrakuten" style="display:inline;margin-right:5px"><a href="http://hb.afl.rakuten.co.jp/hgc/0f5d37b2.30a35158.0f5d37b3.cd048ce9/?pc=http%3A%2F%2Fsearch.rakuten.co.jp%2Fsearch%2Fmall%2FHTML5%25E6%259C%25AC%25E6%25A0%25BC%25E3%2582%25A2%25E3%2583%2597%25E3%2583%25AA%25E9%2596%258B%25E7%2599%25BA%2F-%2Ff.1-p.1-s.1-sf.0-st.A-v.2%3Fx%3D0%26scid%3Daf_ich_link_urltxt%26m%3Dhttp%3A%2F%2Fm.rakuten.co.jp%2F" rel="nofollow" target="_blank" title="楽天市場" >楽天市場</a></div><div class="shoplinkyahoo" style="display:inline;margin-right:5px"><a href="http://ck.jp.ap.valuecommerce.com/servlet/referral?sid=2895334&#038;pid=880733296&#038;vc_url=http%3A%2F%2Fshopping.search.yahoo.co.jp%2Fsearch%3FuIv%3Don%26ei%3DUTF-8%26tab_ex%3Dcommerce%26slider%3D0%26va%3DHTML5%25E6%259C%25AC%25E6%25A0%25BC%25E3%2582%25A2%25E3%2583%2597%25E3%2583%25AA%25E9%2596%258B%25E7%2599%25BA" target="_blank" title="Yahooショッピング" >Yahooショッピング<img src="http://ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2895334&#038;pid=880733296" height="1" width="1" border="0"></a></div></div></div></div>
<br />
<div class="kaerebalink-box" style="text-align:left;padding-bottom:20px;font-size:small;/zoom: 1;overflow: hidden;"><div class="kaerebalink-image" style="float:left;margin:0 15px 10px 0;"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4873115264/contentsmonog-22/ref=nosim/" rel="nofollow" target="_blank"><img src="http://ecx.images-amazon.com/images/I/5149YMBYorL._SL160_.jpg" style="border: none;" /></a></div><div class="kaerebalink-info" style="line-height:120%;/zoom: 1;overflow: hidden;"><div class="kaerebalink-name" style="margin-bottom:10px;line-height:120%"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4873115264/contentsmonog-22/ref=nosim/" rel="nofollow" target="_blank">jQuery Mobile</a><div class="kaerebalink-powered-date" style="font-size:8pt;margin-top:5px;font-family:verdana;line-height:120%">posted with <a href="http://kaereba.com" target="_blank">カエレバ</a></div></div><div class="kaerebalink-detail" style="margin-bottom:5px;">Jon Reid オライリージャパン 2011-12-22    </div><div class="kaerebalink-link1" style="margin-top:10px;"><div class="shoplinkamazon" style="display:inline;margin-right:5px"><a href="http://www.amazon.co.jp/gp/search?keywords=jQuery%20Mobile&#038;__mk_ja_JP=%83J%83%5E%83J%83i&#038;tag=contentsmonog-22" rel="nofollow" target="_blank" title="アマゾン" >Amazon</a></div><div class="shoplinkrakuten" style="display:inline;margin-right:5px"><a href="http://hb.afl.rakuten.co.jp/hgc/0f5d37b2.30a35158.0f5d37b3.cd048ce9/?pc=http%3A%2F%2Fsearch.rakuten.co.jp%2Fsearch%2Fmall%2FjQuery%2520Mobile%2F-%2Ff.1-p.1-s.1-sf.0-st.A-v.2%3Fx%3D0%26scid%3Daf_ich_link_urltxt%26m%3Dhttp%3A%2F%2Fm.rakuten.co.jp%2F" rel="nofollow" target="_blank" title="楽天市場" >楽天市場</a></div><div class="shoplinkyahoo" style="display:inline;margin-right:5px"><a href="http://ck.jp.ap.valuecommerce.com/servlet/referral?sid=2895334&#038;pid=880733296&#038;vc_url=http%3A%2F%2Fshopping.search.yahoo.co.jp%2Fsearch%3FuIv%3Don%26ei%3DUTF-8%26tab_ex%3Dcommerce%26slider%3D0%26va%3DjQuery%2520Mobile" target="_blank" title="Yahooショッピング" >Yahooショッピング<img src="http://ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2895334&#038;pid=880733296" height="1" width="1" border="0"></a></div></div></div></div>
<br />
<div class="kaerebalink-box" style="text-align:left;padding-bottom:20px;font-size:small;/zoom: 1;overflow: hidden;"><div class="kaerebalink-image" style="float:left;margin:0 15px 10px 0;"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4048706691/contentsmonog-22/ref=nosim/" rel="nofollow" target="_blank"><img src="http://ecx.images-amazon.com/images/I/51pD0T8C%2BGL._SL160_.jpg" style="border: none;" /></a></div><div class="kaerebalink-info" style="line-height:120%;/zoom: 1;overflow: hidden;"><div class="kaerebalink-name" style="margin-bottom:10px;line-height:120%"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4048706691/contentsmonog-22/ref=nosim/" rel="nofollow" target="_blank">jQuery Mobile スマートフォンサイト デザイン入門 (WEB PROFESSIONAL)</a><div class="kaerebalink-powered-date" style="font-size:8pt;margin-top:5px;font-family:verdana;line-height:120%">posted with <a href="http://kaereba.com" target="_blank">カエレバ</a></div></div><div class="kaerebalink-detail" style="margin-bottom:5px;">西畑一馬,鍋坂理恵 アスキー・メディアワークス 2012-02-02    </div><div class="kaerebalink-link1" style="margin-top:10px;"><div class="shoplinkamazon" style="display:inline;margin-right:5px"><a href="http://www.amazon.co.jp/gp/search?keywords=jQuery%20Mobile%20WEB%20PROFESSIONAL&#038;__mk_ja_JP=%83J%83%5E%83J%83i&#038;tag=contentsmonog-22" rel="nofollow" target="_blank" title="アマゾン" >Amazon</a></div><div class="shoplinkrakuten" style="display:inline;margin-right:5px"><a href="http://hb.afl.rakuten.co.jp/hgc/0f5d37b2.30a35158.0f5d37b3.cd048ce9/?pc=http%3A%2F%2Fsearch.rakuten.co.jp%2Fsearch%2Fmall%2FjQuery%2520Mobile%2520WEB%2520PROFESSIONAL%2F-%2Ff.1-p.1-s.1-sf.0-st.A-v.2%3Fx%3D0%26scid%3Daf_ich_link_urltxt%26m%3Dhttp%3A%2F%2Fm.rakuten.co.jp%2F" rel="nofollow" target="_blank" title="楽天市場" >楽天市場</a></div><div class="shoplinkyahoo" style="display:inline;margin-right:5px"><a href="http://ck.jp.ap.valuecommerce.com/servlet/referral?sid=2895334&#038;pid=880733296&#038;vc_url=http%3A%2F%2Fshopping.search.yahoo.co.jp%2Fsearch%3FuIv%3Don%26ei%3DUTF-8%26tab_ex%3Dcommerce%26slider%3D0%26va%3DjQuery%2520Mobile%2520WEB%2520PROFESSIONAL" target="_blank" title="Yahooショッピング" >Yahooショッピング<img src="http://ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2895334&#038;pid=880733296" height="1" width="1" border="0"></a></div></div></div></div>
<br />
<div class="kaerebalink-box" style="text-align:left;padding-bottom:20px;font-size:small;/zoom: 1;overflow: hidden;"><div class="kaerebalink-image" style="float:left;margin:0 15px 10px 0;"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4877832874/contentsmonog-22/ref=nosim/" rel="nofollow" target="_blank"><img src="http://ecx.images-amazon.com/images/I/51b59u3qoYL._SL160_.jpg" style="border: none;" /></a></div><div class="kaerebalink-info" style="line-height:120%;/zoom: 1;overflow: hidden;"><div class="kaerebalink-name" style="margin-bottom:10px;line-height:120%"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4877832874/contentsmonog-22/ref=nosim/" rel="nofollow" target="_blank">jQuery Mobileでかんたんスマートフォン向けWeb―jQuery Mobile1.0Final対応</a><div class="kaerebalink-powered-date" style="font-size:8pt;margin-top:5px;font-family:verdana;line-height:120%">posted with <a href="http://kaereba.com" target="_blank">カエレバ</a></div></div><div class="kaerebalink-detail" style="margin-bottom:5px;">相澤 裕介 カットシステム 2012-02    </div><div class="kaerebalink-link1" style="margin-top:10px;"><div class="shoplinkamazon" style="display:inline;margin-right:5px"><a href="http://www.amazon.co.jp/gp/search?keywords=Mobile1.0Final&#038;__mk_ja_JP=%83J%83%5E%83J%83i&#038;tag=contentsmonog-22" rel="nofollow" target="_blank" title="アマゾン" >Amazon</a></div><div class="shoplinkrakuten" style="display:inline;margin-right:5px"><a href="http://hb.afl.rakuten.co.jp/hgc/0f5d37b2.30a35158.0f5d37b3.cd048ce9/?pc=http%3A%2F%2Fsearch.rakuten.co.jp%2Fsearch%2Fmall%2FMobile1.0Final%2F-%2Ff.1-p.1-s.1-sf.0-st.A-v.2%3Fx%3D0%26scid%3Daf_ich_link_urltxt%26m%3Dhttp%3A%2F%2Fm.rakuten.co.jp%2F" rel="nofollow" target="_blank" title="楽天市場" >楽天市場</a></div><div class="shoplinkyahoo" style="display:inline;margin-right:5px"><a href="http://ck.jp.ap.valuecommerce.com/servlet/referral?sid=2895334&#038;pid=880733296&#038;vc_url=http%3A%2F%2Fshopping.search.yahoo.co.jp%2Fsearch%3FuIv%3Don%26ei%3DUTF-8%26tab_ex%3Dcommerce%26slider%3D0%26va%3DMobile1.0Final" target="_blank" title="Yahooショッピング" >Yahooショッピング<img src="http://ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2895334&#038;pid=880733296" height="1" width="1" border="0"></a></div></div></div></div>
<br />
<div class="kaerebalink-box" style="text-align:left;padding-bottom:20px;font-size:small;/zoom: 1;overflow: hidden;"><div class="kaerebalink-image" style="float:left;margin:0 15px 10px 0;"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4798033138/contentsmonog-22/ref=nosim/" rel="nofollow" target="_blank"><img src="http://ecx.images-amazon.com/images/I/41TMgk4vO7L._SL160_.jpg" style="border: none;" /></a></div><div class="kaerebalink-info" style="line-height:120%;/zoom: 1;overflow: hidden;"><div class="kaerebalink-name" style="margin-bottom:10px;line-height:120%"><a href="http://www.amazon.co.jp/exec/obidos/ASIN/4798033138/contentsmonog-22/ref=nosim/" rel="nofollow" target="_blank">jQuery Mobile スマートフォンサイト制作入門コース</a><div class="kaerebalink-powered-date" style="font-size:8pt;margin-top:5px;font-family:verdana;line-height:120%">posted with <a href="http://kaereba.com" target="_blank">カエレバ</a></div></div><div class="kaerebalink-detail" style="margin-bottom:5px;">掌田 津耶乃 秀和システム 2012-03    </div><div class="kaerebalink-link1" style="margin-top:10px;"><div class="shoplinkamazon" style="display:inline;margin-right:5px"><a href="http://www.amazon.co.jp/gp/search?keywords=jQuery%20Mobile&#038;__mk_ja_JP=%83J%83%5E%83J%83i&#038;tag=contentsmonog-22" rel="nofollow" target="_blank" title="アマゾン" >Amazon</a></div><div class="shoplinkrakuten" style="display:inline;margin-right:5px"><a href="http://hb.afl.rakuten.co.jp/hgc/0f5d37b2.30a35158.0f5d37b3.cd048ce9/?pc=http%3A%2F%2Fsearch.rakuten.co.jp%2Fsearch%2Fmall%2FjQuery%2520Mobile%2F-%2Ff.1-p.1-s.1-sf.0-st.A-v.2%3Fx%3D0%26scid%3Daf_ich_link_urltxt%26m%3Dhttp%3A%2F%2Fm.rakuten.co.jp%2F" rel="nofollow" target="_blank" title="楽天市場" >楽天市場</a></div><div class="shoplinkyahoo" style="display:inline;margin-right:5px"><a href="http://ck.jp.ap.valuecommerce.com/servlet/referral?sid=2895334&#038;pid=880733296&#038;vc_url=http%3A%2F%2Fshopping.search.yahoo.co.jp%2Fsearch%3FuIv%3Don%26ei%3DUTF-8%26tab_ex%3Dcommerce%26slider%3D0%26va%3DjQuery%2520Mobile" target="_blank" title="Yahooショッピング" >Yahooショッピング<img src="http://ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2895334&#038;pid=880733296" height="1" width="1" border="0"></a></div></div></div></div></p>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:comments href="http://blog.bot.vc/2012/04/jquerymobile/"></fb:comments>]]></content:encoded>
			<wfw:commentRss>http://blog.bot.vc/2012/04/jquerymobile/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.bot.vc/2012/04/jquerymobile/" />
	</item>
		<item>
		<title>facebook Mobile用モジュールが公開されました！</title>
		<link>http://blog.bot.vc/2011/10/facebook-mobile/</link>
		<comments>http://blog.bot.vc/2011/10/facebook-mobile/#comments</comments>
		<pubDate>Mon, 10 Oct 2011 22:23:23 +0000</pubDate>
		<dc:creator>manabu uekusa</dc:creator>
				<category><![CDATA[HTML5]]></category>
		<category><![CDATA[ソーシャルメディア]]></category>

		<guid isPermaLink="false">http://blog.bot.vc/?p=211</guid>
		<description><![CDATA[この記事の所要時間： 約 2分21秒 fecebookは毎月3億5000万超のアクセスがMobile端末からあるそうです。 今回は、Mobile用のモジュールがfacebookから公開されました。 モジュールは大きく３つ &#8230; <a href="http://blog.bot.vc/2011/10/facebook-mobile/">続きを読む <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<div style="border-top:2px dotted #ccc;border-bottom:2px dotted #ccc;padding:0.2em 0;text-align:right;font-size:small;color:#444">
	この記事の所要時間： <span style="font-weight:bold">約 <span style="color:#f00">2</span>分<span style="color:#f00">21</span>秒</span>
</div>
<p>
<a href="http://blog.bot.vc/wp-content/uploads/2011/10/attachment.png" rel="lightbox[211]"><img src="http://blog.bot.vc/wp-content/uploads/2011/10/attachment-300x207.png" alt="" title="facebook mobile sdk" width="300" height="207" class="alignnone size-medium wp-image-212" /></a><br />
fecebookは毎月3億5000万超のアクセスがMobile端末からあるそうです。<br />
今回は、Mobile用のモジュールがfacebookから公開されました。<br />
モジュールは大きく３つのプラットフォームに提供されています。<br />
<br />
<strong>１）WebApps用</strong><br />
	HTML5/CSS3を活用しています。<br />
<strong>２）iOS用</strong><br />
　iPhone/iPad ネイティブアプリに組み込めます。<br />
<strong>３）Android用</strong><br />
　Android ネイティブアプリに組み込めます。<br />
<br />
WebAppsで何が出来るのか、サマリを簡単にまとめてみます。<br />
<br />
<strong>１．ログイン・ログアウト</strong><br />
　認証用のMobileダイアログが表示されてログインができます。<br />
　SocialPluginのログインボタンが簡単に使えるようになるみたいです。<br />
<br />
<strong>２．GraphAPIも簡単に使える</strong><br />
　たとえば、ユーザー情報や、友達の情報が簡単に取得できます。<br />
　アイコンも簡単に表示が出来ます。<br />
<br />
<strong>３．友達に紹介も簡単に</strong><br />
　友達に紹介するためのIUも簡単にできるように用意されています。<br />
　ユーザーは友達を選ぶだけで簡単にWebAppsを紹介出来ますね！<br />
<a href="http://blog.bot.vc/wp-content/uploads/2011/10/attachment-1.png" rel="lightbox[211]"><img src="http://blog.bot.vc/wp-content/uploads/2011/10/attachment-1-300x150.png" alt="" title="友達紹介" width="300" height="150" class="alignnone size-medium wp-image-214" /></a><br />
　しかも、iPhoneのfacebookAppsを入れているユーザには<br />
　Notificationを使ってPush通知も簡単に送れるみたいです。これはすごい！<br />
<a href="http://blog.bot.vc/wp-content/uploads/2011/10/attachment-2.png" rel="lightbox[211]"><img src="http://blog.bot.vc/wp-content/uploads/2011/10/attachment-2-208x300.png" alt="" title="iPhone push notifications" width="208" height="300" class="alignnone size-medium wp-image-215" /></a><br />
<br />
<strong>４．Timeline対応</strong><br />
　これはまだ出来てないみたいで、Comming soonになってます。<br />
　そのうち、対応するみたいです。<br />
<br />
<strong>５．News Feed</strong><br />
　当然、ニュースフィードも簡単にあつかえます。<br />
　フィードへ投稿も出来るし、表示も簡単に出来そうです。<br />
<br />
<strong>６．Social Plugins</strong><br />
　Likeボタンも簡単にタグを書くだけで表示させられます。<br />
　OGPを設定すれば、「いいね！」した時のコメント・アイコンもカスタマイズ出来ます。<br />
<a href="http://blog.bot.vc/wp-content/uploads/2011/10/attachment-3.png" rel="lightbox[211]"><img src="http://blog.bot.vc/wp-content/uploads/2011/10/attachment-3-300x211.png" alt="" title="いいね！ボタン" width="300" height="211" class="alignnone size-medium wp-image-216" /></a><br />
<br />
<strong>７．その他</strong><br />
　検索や、ブックマーク、facebook creditsも使えそうです。<br />
<br />
詳細は。facebook developersページに書いてあります。<br />
　 <a href="http://developers.facebook.com/docs/mobile/web/build/" target="_blank" class="advmk">http://developers.facebook.com&#8230;&#8230;web/build/</a><br />
<br />
スマートフォンのSDK対応をfacebookがしてきたことで<br />
facebook対応のスマートフォンサイトやアプリが増えてきそうですね。<br />
時間があったら、サンプル作って試してみようかな。<br />
<br />
<h2>参考記事</h2>
 <a href="http://techwave.jp/archives/51705577.html" target="_blank" class="advmk">http://techwave.jp/archives/51&#8230;&#8230;05577.html</a><br />
 <a href="http://developers.facebook.com/docs/guides/mobile/" target="_blank" class="advmk">http://developers.facebook.com&#8230;&#8230;es/mobile/</a><br />
<br />
</p>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:comments href="http://blog.bot.vc/2011/10/facebook-mobile/"></fb:comments>]]></content:encoded>
			<wfw:commentRss>http://blog.bot.vc/2011/10/facebook-mobile/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.bot.vc/2011/10/facebook-mobile/" />
	</item>
		<item>
		<title>スマートフォンサイト構築に役に立つ３つのノウハウ</title>
		<link>http://blog.bot.vc/2011/09/smartphone_site/</link>
		<comments>http://blog.bot.vc/2011/09/smartphone_site/#comments</comments>
		<pubDate>Sun, 25 Sep 2011 10:48:11 +0000</pubDate>
		<dc:creator>manabu uekusa</dc:creator>
				<category><![CDATA[HTML5]]></category>
		<category><![CDATA[スマートフォン]]></category>

		<guid isPermaLink="false">http://blog.bot.vc/?p=186</guid>
		<description><![CDATA[この記事の所要時間： 約 6分15秒 最近、スマートフォンの利用者が増えてきました。 そこで、Webサイトもスマートフォン化されてきたのが ちょこちょこ増えたかなぁと思っています。 たとえば、 「ソフトバンク」 「Yah &#8230; <a href="http://blog.bot.vc/2011/09/smartphone_site/">続きを読む <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<div style="border-top:2px dotted #ccc;border-bottom:2px dotted #ccc;padding:0.2em 0;text-align:right;font-size:small;color:#444">
	この記事の所要時間： <span style="font-weight:bold">約 <span style="color:#f00">6</span>分<span style="color:#f00">15</span>秒</span>
</div>
<p>
<a href="http://blog.bot.vc/wp-content/uploads/2011/09/483ac4a929ef14d02b444e4f04cb4ded.png" rel="lightbox[186]"><img src="http://blog.bot.vc/wp-content/uploads/2011/09/483ac4a929ef14d02b444e4f04cb4ded.png" alt="" title="スクリーンショット（2011-09-25 19.28.43）" width="540" height="251" class="alignnone size-full wp-image-187" /></a><br />
最近、スマートフォンの利用者が増えてきました。<br />
そこで、Webサイトもスマートフォン化されてきたのが<br />
ちょこちょこ増えたかなぁと思っています。<br />
<br />
たとえば、<br />
<br />
「ソフトバンク」<br />
<a href="http://blog.bot.vc/wp-content/uploads/2011/09/1249042d3620c9492c569b099aa78bf5.png" rel="lightbox[186]"><img src="http://blog.bot.vc/wp-content/uploads/2011/09/1249042d3620c9492c569b099aa78bf5-244x300.png" alt="" title="softbank" width="244" height="300" class="alignnone size-medium wp-image-188" /></a><br />
<br />
「Yahoo!」<br />
<a href="http://blog.bot.vc/wp-content/uploads/2011/09/136601bd1175fe0f1d7b869a87dc3aab.png" rel="lightbox[186]"><img src="http://blog.bot.vc/wp-content/uploads/2011/09/136601bd1175fe0f1d7b869a87dc3aab-244x300.png" alt="" title="Yahoo!" width="244" height="300" class="alignnone size-medium wp-image-189" /></a><br />
<br />
「Google」<br />
<a href="http://blog.bot.vc/wp-content/uploads/2011/09/0ac3516a6145228ebc12c7786534d68a.png" rel="lightbox[186]"><img src="http://blog.bot.vc/wp-content/uploads/2011/09/0ac3516a6145228ebc12c7786534d68a-268x300.png" alt="" title="Google" width="268" height="300" class="alignnone size-medium wp-image-190" /></a><br />
<br />
「ユニクロ」<br />
<a href="http://blog.bot.vc/wp-content/uploads/2011/09/d260659747b15e2688dac10834704d82.png" rel="lightbox[186]"><img src="http://blog.bot.vc/wp-content/uploads/2011/09/d260659747b15e2688dac10834704d82-236x300.png" alt="" title="ユニクロ" width="236" height="300" class="alignnone size-medium wp-image-191" /></a><br />
<br />
「ローソン」<br />
<a href="http://blog.bot.vc/wp-content/uploads/2011/09/09d7dd521daeb453394708b01be493e5.png" rel="lightbox[186]"><img src="http://blog.bot.vc/wp-content/uploads/2011/09/09d7dd521daeb453394708b01be493e5-234x300.png" alt="" title="ローソン" width="234" height="300" class="alignnone size-medium wp-image-192" /></a><br />
<br />
こんなサイトがスマートフォン対応サイトを構築しています。<br />
HTML5/CSS3をつかったコーディングが増えてきたので<br />
スマートフォンサイトの構築も増えてきたのかなと。<br />
<br />
スマートフォンサイトの構築は、これからたくさん出てくると思うので<br />
構築時に役に立つノウハウ３つを、まとめておきたいと思います。<br />
<br />
<h2>１．レイアウト</h2>
スマートフォン対応サイトはＰＣサイトと違って<br />
画面サイズが小さくなります。<br />
しかも、iPhoneだけでなく、最近ではAndroidも増えてきたので<br />
大きさが、まちまちになってきました。<br />
<br />
どんなサイズがあるのでしょうか？<br />
ちょっと調べてみました。<br />
<br />
iPhoneの大きさはこんな感じです。<br />
<a href="http://blog.bot.vc/wp-content/uploads/2011/09/37f4c5deb485496755321bad7244d72e.png" rel="lightbox[186]"><img src="http://blog.bot.vc/wp-content/uploads/2011/09/37f4c5deb485496755321bad7244d72e-300x190.png" alt="" title="iPhone window size" width="300" height="190" class="alignnone size-medium wp-image-193" /></a><br />
<br />
他の端末はどうでしょうか？<br />
<table style="width: 328px;" border="0" cellspacing="0" cellpadding="0"><colgroup><col width="251" /> <col width="77" /> </colgroup><br />
<tbody>
<tr>
<td width="251" height="18"><strong>機種</strong></td>
<td width="77"><strong>解像度</strong></td>
</tr>
<tr>
<td height="19">iPhone3G / 3GS</td>
<td>320×480</td>
</tr>
<tr>
<td height="19">iPhone4</td>
<td>640×960</td>
</tr>
<tr>
<td height="19">iPad / iPad 2</td>
<td>768×1024</td>
</tr>
<tr>
<td height="19">HT-03A</td>
<td>320×480</td>
</tr>
<tr>
<td width="251" height="114">Xperia (SO-01B) / Xperia arc (SO-01C)<br />
REGZAPhone(Docomo&amp;AU)<br />
IS05<br />
IS01<br />
REGZA Phone （T-01C）<br />
Motorola MileStone2</td>
<td>480×854</td>
</tr>
<tr>
<td width="251" height="152">HTC Desire (X06HT)<br />
Nexus One<br />
Galaxy S　（SC-02B）<br />
HTC Evo 4G<br />
LYNX 3D （SH-03C）<br />
DELL Streak 001DL<br />
Nexus S<br />
IS06</td>
<td>480×800</td>
</tr>
<tr>
<td height="19">IS03 / LYNX （SH-10B）</td>
<td>640×960</td>
</tr>
<tr>
<td height="19">Galaxy Tab  （SC-01C）</td>
<td>600×1024</td>
</tr>
<tr>
<td width="251" height="76">HTC-Aria<br />
Optimus chat<br />
004HW<br />
HT-03A HTC Magic</td>
<td>320×480</td>
</tr>
<tr>
<td width="251" height="57">Huawei Ideos U8150-B(120dpi/ldpi)<br />
PocketWifiS<br />
Xperia10 MiniPro(120dpi/ldpi)</td>
<td>240×320</td>
</tr>
</tbody>
</table>
<br />
こんなに種類がありました。<br />
<br />
ではどの大きさに合わせればいいのでしょうか？<br />
スマートフォンのサイトは、縦はスクロールするので<br />
そんなに気にせずに、横はiPhoneにあわせて320pxが良いと思います。<br />
ただ、横も可変で作ればそんなに意識して作ることないかなと画像サイズぐらいかな。<br />
<br />
HTML5だと、下記のmetaタグのviewport指定で端末にあわせた可変長を指定できます。<br />
<br />

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">meta</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;viewport&quot;</span> <span style="color: #000066;">content</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1&quot;</span>&gt;</span></pre></div></div>

<br />
<br />
<br />
<h2>２．１クリックで電話</h2>
２つめのノウハウは、せっかくスマートフォンサイトなので<br />
電話が１クリックでかかるようにします。<br />
実は簡単で、電話番号を入れたリンクを作るだけです。<br />
<br />
こんな感じで作ります。<br />
<br />

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;tel:電話番号&quot;</span>&gt;</span>クリックで電話<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span></pre></div></div>

<br />
<br />
簡単に電話連絡できるページができるので<br />
是非試してみて下さい。<br />
<br />
<br />
<h2>３．地図</h2>
３つめのノウハウは、地図の表示です。<br />
地図の表示はGoogleを使えば簡単にページ内に表示が出来るし<br />
GPSが付いているので、GoogleMAPとの連携をして<br />
迷子にならずに簡単に誘導することもできます！<br />
<br />
やり方は簡単で、GoogleMAPから好きな場所を指定して<br />
右上のリンクボタンを押して、「埋め込み地図のカスタマイズとプレビュー」から<br />
大きさを指定してカスタマイズします。<br />
<br />
GoogleMAPの右上リンクボタンを押す<br />
<br />
<a href="http://blog.bot.vc/wp-content/uploads/2011/09/80ebf889bc594de4a25d132fef5057be.png" rel="lightbox[186]"><img src="http://blog.bot.vc/wp-content/uploads/2011/09/80ebf889bc594de4a25d132fef5057be-300x150.png" alt="" title="GoogleMAP" width="300" height="150" class="alignnone size-medium wp-image-194" /></a><br />
<br />
カスタマイズ画面で大きさを変更して、下に表示されているHTMLをコピー<br />
<br />
<a href="http://blog.bot.vc/wp-content/uploads/2011/09/e74d79406c75cf3dfcc55cbddf8de813.png" rel="lightbox[186]"><img src="http://blog.bot.vc/wp-content/uploads/2011/09/e74d79406c75cf3dfcc55cbddf8de813-222x300.png" alt="" title="GoogleMAP Preview" width="222" height="300" class="alignnone size-medium wp-image-195" /></a><br />
<br />
横幅を320pxにすれば画面にぴったり入るので<br />
今回は、320&#215;320にしてみました。<br />
<br />
作った埋め込み用のHTMLを張ればOKです！<br />
リンクの名前を「大きな地図で見る」から「GoogleMAP」とかに変更して<br />
アプリが立ち上がる用のリンク文言に変更すれば、ちょっと良くなるかな…<br />
<br />
今回サンプルで作った、地図のタグはこれです。<br />
<br />

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">iframe</span> <span style="color: #000066;">width</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;320&quot;</span> <span style="color: #000066;">height</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;320&quot;</span> <span style="color: #000066;">frameborder</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;0&quot;</span> <span style="color: #000066;">scrolling</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;no&quot;</span> <span style="color: #000066;">marginheight</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;0&quot;</span> <span style="color: #000066;">marginwidth</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;0&quot;</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://maps.google.co.jp/maps?q=%E9%8C%A6%E7%B3%B8%E7%94%BA%E9%A7%85&amp;amp;ie=UTF8&amp;amp;hq=&amp;amp;hnear=%E9%8C%A6%E7%B3%B8%E7%94%BA%E9%A7%85%EF%BC%88%E6%9D%B1%E4%BA%AC%EF%BC%89&amp;amp;gl=jp&amp;amp;t=m&amp;amp;vpsrc=0&amp;amp;brcurrent=3,0x601888d8988b4701:0x4f0db0656bf23228,0&amp;amp;ll=35.69641,139.813986&amp;amp;spn=0.020911,0.027466&amp;amp;z=14&amp;amp;iwloc=A&amp;amp;output=embed&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">iframe</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span> <span style="color: #66cc66;">/</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">small</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://maps.google.co.jp/maps?q=%E9%8C%A6%E7%B3%B8%E7%94%BA%E9%A7%85&amp;amp;ie=UTF8&amp;amp;hq=&amp;amp;hnear=%E9%8C%A6%E7%B3%B8%E7%94%BA%E9%A7%85%EF%BC%88%E6%9D%B1%E4%BA%AC%EF%BC%89&amp;amp;gl=jp&amp;amp;t=m&amp;amp;vpsrc=0&amp;amp;brcurrent=3,0x601888d8988b4701:0x4f0db0656bf23228,0&amp;amp;ll=35.69641,139.813986&amp;amp;spn=0.020911,0.027466&amp;amp;z=14&amp;amp;iwloc=A&amp;amp;source=embed&quot;</span> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;color:#0000FF;text-align:left&quot;</span>&gt;</span>GoogleMAP<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">small</span>&gt;</span></pre></div></div>

<br />
<br />
<br />
<h2>まとめ</h2>
今回はスマートフォン用のサイトノウハウをまとめてみました。<br />
iPhoneやAndoroidのサイトもどんどん作っていけるなと。<br />
<br />
今回の作ったサンプルはこんな感じです。<br />
レイアウト、電話、地図を含めて作ってみました。<br />
<br />
<a href="http://blog.bot.vc/wp-content/uploads/2011/09/a65b4aed3d3bebcd60a0ad661d4e1f4f.png" rel="lightbox[186]"><img src="http://blog.bot.vc/wp-content/uploads/2011/09/a65b4aed3d3bebcd60a0ad661d4e1f4f-200x300.png" alt="" title="Smart Phone site sample" width="200" height="300" class="alignnone size-medium wp-image-196" /></a><br />
実際に動く<a href="http://bot.vc/smartphone/SP_sample.html" target="_blank">サンプルサイト</a><br />
スマートフォンでアクセスしてみて下さい。<br />
<br />

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
</pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;!doctype html&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">html</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">head</span>&gt;</span>
        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">meta</span> <span style="color: #000066;">charset</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;UTF-8&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>
		<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">meta</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;viewport&quot;</span> <span style="color: #000066;">content</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1&quot;</span>&gt;</span> 
		<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">link</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;stylesheet&quot;</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;jquery.mobile-1.0b3.min.css&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>
&nbsp;
		<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;jquery-1.6.1.min.js&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span>
		<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span>&gt;</span>
		$(document).bind(&quot;mobileinit&quot;, function() {
			  $.mobile.page.prototype.options.addBackBtn = true;
		 });
		<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span>
		<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;jquery.mobile-1.0b3.min.js&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span>
        <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">title</span>&gt;</span>スマートフォン サンプルサイト<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">title</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">head</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">body</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;page&quot;</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;index&quot;</span> data-theme<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;d&quot;</span>&gt;</span>
  			<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;header&quot;</span>&gt;</span>
			    <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h1</span>&gt;</span>ヘッダー<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h1</span>&gt;</span>
			<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
			<span style="color: #009900;">&lt;header&gt;&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;logo.jpg&quot;</span> <span style="color: #000066;">width</span><span style="color: #66cc66;">=</span><span style="color: #cc66cc;">320</span>&gt;&lt;<span style="color: #66cc66;">/</span>header&gt;</span>
		<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;content&quot;</span> &gt;</span>     
&nbsp;
			<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">ul</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;listview&quot;</span>&gt;</span>
			<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;list-divider&quot;</span>&gt;</span>見出し<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
			<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;tel:0120010916&quot;</span>&gt;</span>
					<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>マクドナルド お客様相談センター 0120-010-916<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>
				<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
				<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>
					<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>メニュー２<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>
				<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
				<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span>&gt;</span>
					<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>メニュー３<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>
				<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
				<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
					<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>リスト１<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>
				<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
				<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
					<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>リスト２<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h3</span>&gt;</span>
				<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
			<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">ul</span>&gt;</span>
			<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">br</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span>&gt;</span>
			<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">ul</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;listview&quot;</span>&gt;</span>
			<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;list-divider&quot;</span>&gt;</span>地図<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>				
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">iframe</span> <span style="color: #000066;">width</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;320&quot;</span> <span style="color: #000066;">height</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;320&quot;</span> <span style="color: #000066;">frameborder</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;0&quot;</span> <span style="color: #000066;">scrolling</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;no&quot;</span> <span style="color: #000066;">marginheight</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;0&quot;</span> <span style="color: #000066;">marginwidth</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;0&quot;</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://maps.google.co.jp/maps?q=%E9%8C%A6%E7%B3%B8%E7%94%BA%E9%A7%85&amp;amp;ie=UTF8&amp;amp;hq=&amp;amp;hnear=%E9%8C%A6%E7%B3%B8%E7%94%BA%E9%A7%85%EF%BC%88%E6%9D%B1%E4%BA%AC%EF%BC%89&amp;amp;gl=jp&amp;amp;t=m&amp;amp;vpsrc=0&amp;amp;brcurrent=3,0x601888d8988b4701:0x4f0db0656bf23228,0&amp;amp;ll=35.69641,139.813986&amp;amp;spn=0.020911,0.027466&amp;amp;z=14&amp;amp;iwloc=A&amp;amp;output=embed&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">iframe</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span> <span style="color: #66cc66;">/</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">small</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://maps.google.co.jp/maps?q=%E9%8C%A6%E7%B3%B8%E7%94%BA%E9%A7%85&amp;amp;ie=UTF8&amp;amp;hq=&amp;amp;hnear=%E9%8C%A6%E7%B3%B8%E7%94%BA%E9%A7%85%EF%BC%88%E6%9D%B1%E4%BA%AC%EF%BC%89&amp;amp;gl=jp&amp;amp;t=m&amp;amp;vpsrc=0&amp;amp;brcurrent=3,0x601888d8988b4701:0x4f0db0656bf23228,0&amp;amp;ll=35.69641,139.813986&amp;amp;spn=0.020911,0.027466&amp;amp;z=14&amp;amp;iwloc=A&amp;amp;source=embed&quot;</span> <span style="color: #000066;">style</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;color:#0000FF;text-align:left&quot;</span>&gt;</span>GoogleMAP<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">small</span>&gt;</span>
			<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">ul</span>&gt;</span>
			<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">br</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span>&gt;</span>
			<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">ul</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;listview&quot;</span>&gt;</span>
			<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;list-divider&quot;</span>&gt;</span>入力フォーム<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
			<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;fieldcontain&quot;</span>&gt;</span>
				<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">label</span> <span style="color: #000066;">for</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;textarea&quot;</span>&gt;</span>ラベル：<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">label</span>&gt;</span>
				<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text&quot;</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;name&quot;</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;name&quot;</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;&quot;</span>  <span style="color: #66cc66;">/</span>&gt;</span>
				<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;#&quot;</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;button&quot;</span> &gt;</span>OK<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span>
			<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
			<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">ul</span>&gt;</span>
		<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span>
		<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">div</span> data-role<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;footer&quot;</span>&gt;</span>     
			<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h4</span>&gt;</span>フッター<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h4</span>&gt;</span>   
		<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span> 
	<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</span> 
	<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">body</span>&gt;</span> 
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">html</span>&gt;</span></pre></td></tr></table></div>

<br />
<br />
<br />
このサンプルは、jQueryMobileを使っています。<br />
jQueryMobileのようなフレームワークを使うと<br />
iPhomeアプリのようなサイトを作れて良いと思います！<br />
jQueryMobileの詳しい説明は次回以降で＾＾<br />
<br />
この書籍も参考になります<br />
<a href="http://www.amazon.co.jp/gp/product/4048702181/ref=as_li_ss_tl?ie=UTF8&#038;tag=contentsmonog-22&#038;linkCode=as2&#038;camp=247&#038;creative=7399&#038;creativeASIN=4048702181">iPhone+Android スマートフォンサイト制作入門 (WEB PROFESSIONAL)</a><img src="http://blog.bot.vc//HLIC/accba0b69f352b4c9440f05891b015c5.gif" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
<br /><br />
<iframe src="http://rcm-jp.amazon.co.jp/e/cm?lt1=_blank&#038;bc1=000000&#038;IS2=1&#038;bg1=FFFFFF&#038;fc1=000000&#038;lc1=0000FF&#038;t=contentsmonog-22&#038;o=9&#038;p=8&#038;l=as4&#038;m=amazon&#038;f=ifr&#038;ref=ss_til&#038;asins=4048702181" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe><br />
<br />
<br />
<h2>参考サイト</h2>
 <a href="http://emylo0.com/androi%E3%81%AEui%E3%83%91%E3%83%BC%E3%83%84ldpimdpihdpi%E8%A6%9A%E3%81%88%E6%9B%B8%E3%81%8D/" target="_blank" class="advmk">http://emylo0.com/androi%E3%81&#8230;&#8230;%E3%81%8D/</a><br />
 <a href="http://blog.asial.co.jp/814" target="_blank" class="advmk">http://blog.asial.co.jp/814</a><br />
 <a href="http://html5-css3.jp/smartphone/iphone-xperia-galaxy-viewport.html" target="_blank" class="advmk">http://html5-css3.jp/smartphon&#8230;&#8230;wport.html</a><br />
 <a href="http://www.nexchange.co.jp/blog/archives/98" target="_blank" class="advmk">http://www.nexchange.co.jp/blo&#8230;&#8230;rchives/98</a><br />
 <a href="http://ascii.jp/elem/000/000/543/543575/" target="_blank" class="advmk">http://ascii.jp/elem/000/000/543/543575/</a><br />
</p>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:comments href="http://blog.bot.vc/2011/09/smartphone_site/"></fb:comments>]]></content:encoded>
			<wfw:commentRss>http://blog.bot.vc/2011/09/smartphone_site/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.bot.vc/2011/09/smartphone_site/" />
	</item>
		<item>
		<title>HTML5 の新機能 WebStorageAPI</title>
		<link>http://blog.bot.vc/2011/09/html5-webstorageapi/</link>
		<comments>http://blog.bot.vc/2011/09/html5-webstorageapi/#comments</comments>
		<pubDate>Mon, 19 Sep 2011 00:46:35 +0000</pubDate>
		<dc:creator>manabu uekusa</dc:creator>
				<category><![CDATA[HTML5]]></category>

		<guid isPermaLink="false">http://blog.bot.vc/?p=126</guid>
		<description><![CDATA[この記事の所要時間： 約 5分18秒 前回、前々回とHTML5の新機能の話をしました。 前回は、スマートフォンが圏外でもコンテンツが見えるキャッシュマニフェスト 前々回は、HTML5の新要素のについてまとめました。 今回 &#8230; <a href="http://blog.bot.vc/2011/09/html5-webstorageapi/">続きを読む <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<div style="border-top:2px dotted #ccc;border-bottom:2px dotted #ccc;padding:0.2em 0;text-align:right;font-size:small;color:#444">
	この記事の所要時間： <span style="font-weight:bold">約 <span style="color:#f00">5</span>分<span style="color:#f00">18</span>秒</span>
</div>
<p>
<a href="http://blog.bot.vc/wp-content/uploads/2011/09/webstorage.png" rel="lightbox[126]"><img src="http://blog.bot.vc/wp-content/uploads/2011/09/webstorage.png" alt="" title="webstorage" width="667" height="312" class="alignnone size-full wp-image-127" /></a><br />
前回、前々回とHTML5の新機能の話をしました。<br />
<a href="http://blog.bot.vc/2011/09/html5-cachemanifest/">前回</a>は、スマートフォンが圏外でもコンテンツが見えるキャッシュマニフェスト<br />
<a href="http://blog.bot.vc/2011/09/html5css3new/">前々回</a>は、HTML5の新要素のについてまとめました。<br />
今回は、WebStorageAPIについてまとめてみます。<br />
<br />
WebStorageはデータが保存できるようになります。<br />
いままでは、データを保存するのに、Cookieなどを使用していましたが<br />
Cookieは4kByteしか使えない、使用できる数はドメインごとに300程度<br />
必ずサーバ通信が発生するという制限がありました。<br />
また、Cookieでは有効期限も設定出来ました。<br />
<br />
HTML5で新登場したWebStorageの特徴は<br />
・容量が5MByte<br />
・テキストのみ保存可能<br />
・サーバー通信なし<br />
・キー名と値のペアでデータ保存<br />
って感じです。<br />
<br />
まあ、Cookiが良いとかWebStorageが良いとかいうんじゃなくて<br />
用途によって新しい方法が増えたって感じです。<br />
<br />
WebStorageAPIは、データ保存が異なる2種類があります<br />
・LocalStorage<br />
・SessionStorage<br />
LocalStorageは、データの保存期間が無制限です。<br />
SessionStorageは、Webブラウザを閉じるまでデータが保存されています。<br />
<br />
使い方はすごいシンプルで<br />
<br />

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;">localStorage.setItem(&quot;keys&quot;, value);</pre></div></div>

<br />
<br />
keysのキー名で、valueが保存されます。<br />
<br />
データを取得するときは<br />
<br />

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;">data = localStorage.getItem(&quot;keys&quot;);</pre></div></div>

<br />
<br />
で、keysに保存されたデータを取得することができます。<br />
<br />
関連する関数一覧を作ってみました。<br />
<a href="http://blog.bot.vc/wp-content/uploads/2011/09/webstorage_functions.png" rel="lightbox[126]"><img src="http://blog.bot.vc/wp-content/uploads/2011/09/webstorage_functions-300x147.png" alt="" title="webstorage_functions" width="300" height="147" class="alignnone size-medium wp-image-128" /></a><br />
こんな感じです。<br />
<br />
ローカルストレージにデータを保存・取得する<br />
サンプルを作ってみました！<br />
<br />
<a href="http://bot.vc/html5/localstorage.html" target="_blank">サンプル デモ</a><br />
<br />
サンプル ソース<br />
<br />

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
</pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #00bbdd;">&lt;!DOCTYPE HTML&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">head</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">meta</span> <span style="color: #000066;">charset</span><span style="color: #66cc66;">=</span>UTF-<span style="color: #cc66cc;">8</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">meta</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;viewport&quot;</span> <span style="color: #000066;">content</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0&quot;</span>&gt;</span> 
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">link</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;stylesheet&quot;</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;hello.css&quot;</span>&gt;</span> 
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">title</span>&gt;</span>localStorage<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">title</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;jquery.min.js&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span>	
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span>&gt;</span> 
		$(function() {
		    $('#nameForm').submit(function() {
		        if ($('#data1').val() != '') {
		        	localStorage.setItem('data1', $('#data1').val());
		        }
		        if ($('#data2').val() != '') {
				localStorage.setItem('data2', $('#data2').val());
		        }
		    });
		});
&nbsp;
		$(document).ready(function(){
		    // データ読み込み
		    var data1 = localStorage.getItem('data1');
		    var data2 = localStorage.getItem('data2');
		    if(data1 != null || data2 != null){
		    	$('#navigator-online').html(&quot;前回データ<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">br</span> <span style="color: #66cc66;">/</span>&gt;</span> data1:&quot;+data1+&quot;<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">br</span> <span style="color: #66cc66;">/</span>&gt;</span> data2:&quot;+data2+&quot;<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">br</span> <span style="color: #66cc66;">/</span>&gt;</span>&quot;);
		    }
	        $(&quot;#cl&quot;).click(function(){
				// 全データクリア
				localStorage.clear();
	        });
	        $(&quot;#cl1&quot;).click(function(){
				// data1削除
				localStorage.removeItem('data1');
	        });
	        $(&quot;#cl2&quot;).click(function(){
				// data2削除
				localStorage.removeItem('data2');
	        });
		});
&nbsp;
	<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span> 
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">head</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">body</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">h1</span>&gt;</span>HTML5 <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">br</span> <span style="color: #66cc66;">/</span>&gt;</span>localStorage テスト<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">br</span> <span style="color: #66cc66;">/</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">h1</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">form</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;nameForm&quot;</span>&gt;</span>
   <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;navigator-online&quot;</span>&gt;</span>データを入力して保存を押すとlocalStorageに保存されます。<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span>
   data1:<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text&quot;</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;data1&quot;</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;data1&quot;</span> <span style="color: #66cc66;">/</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span> <span style="color: #66cc66;">/</span>&gt;</span>
   data2:<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text&quot;</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;data2&quot;</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;data2&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>
   <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;submit&quot;</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;保存&quot;</span> <span style="color: #66cc66;">/</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span> <span style="color: #66cc66;">/</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span> <span style="color: #66cc66;">/</span>&gt;</span>
   <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;button&quot;</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;cl&quot;</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;全データクリア&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>
   <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;button&quot;</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;cl1&quot;</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;data1削除&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>
   <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;button&quot;</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;cl2&quot;</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;data2削除&quot;</span> <span style="color: #66cc66;">/</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">form</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">body</span>&gt;</span></pre></td></tr></table></div>

<br />
<br />
<br />
ちなみに、こんな感じで書いても動くみたい…。<br />
<br />

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;">localStorage.setItem('data1', $('#data1').val());
localStorage['data1'] = $('#data1').val();
&nbsp;
var data1 = localStorage.getItem('data1');
var data1 = localStorage['data1'];
&nbsp;
localStorage.removeItem('data1'); 
delete localStorage['data1'];</pre></div></div>

<br />
<br />
<br />
localStorageの注意点は、ドメインごとで管理されているので<br />
ホスティングされている共通ドメインのサービスとかで<br />
clear()を使うとドメイン内の全部のデータが消えてしまうので<br />
注意が必要です。ホスティングとかだとremoveItemsで<br />
明示的に消した方がいいです。<br />
<br />
ちょっとした保存するデータ。たとえばサービスのオプション設定とかは<br />
DB使わなくても、localStorageで十分かもしれない。<br />
<br />
あと、前回の記事で書いたキャッシュマニフェストとlocalStorageの組み合わせで<br />
オフライン（圏外）の時にも表示出来るサイトも作成出来るし<br />
localStorageにXMLやJSONデータを先読みしておけば<br />
プリフェッチ機能として利用でき、サイトを高速に表示しているように出来るし<br />
便利な機能だと思います。<br />
<br />
今後は、WebStorageAPIも活用していこうと思います。<br />
<br />
過去記事：<br />
　<a href="http://blog.bot.vc/2011/09/html5css3new/">HTML5/CSS3の新しい機能</a><br />
　<a href="http://blog.bot.vc/2011/09/html5-cachemanifest/">HTML5新機能　キャッシュマニフェスト</a></p>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:comments href="http://blog.bot.vc/2011/09/html5-webstorageapi/"></fb:comments>]]></content:encoded>
			<wfw:commentRss>http://blog.bot.vc/2011/09/html5-webstorageapi/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.bot.vc/2011/09/html5-webstorageapi/" />
	</item>
		<item>
		<title>HTML5新機能　キャッシュマニフェスト</title>
		<link>http://blog.bot.vc/2011/09/html5-cachemanifest/</link>
		<comments>http://blog.bot.vc/2011/09/html5-cachemanifest/#comments</comments>
		<pubDate>Tue, 13 Sep 2011 22:42:44 +0000</pubDate>
		<dc:creator>manabu uekusa</dc:creator>
				<category><![CDATA[HTML5]]></category>
		<category><![CDATA[スマートフォン]]></category>

		<guid isPermaLink="false">http://blog.bot.vc/?p=116</guid>
		<description><![CDATA[この記事の所要時間： 約 4分53秒 前回は、新しい要素の追加について書きました。前回記事 今回は、キャッシュマニフェストについて書きたいと思います。 HTML5の新機能というか、キャッシュ機能は前からあったと思うのです &#8230; <a href="http://blog.bot.vc/2011/09/html5-cachemanifest/">続きを読む <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<div style="border-top:2px dotted #ccc;border-bottom:2px dotted #ccc;padding:0.2em 0;text-align:right;font-size:small;color:#444">
	この記事の所要時間： <span style="font-weight:bold">約 <span style="color:#f00">4</span>分<span style="color:#f00">53</span>秒</span>
</div>
<p>
<a href="http://blog.bot.vc/wp-content/uploads/2011/09/bfcde06102a6d51257f8d8953407ac20.png" rel="lightbox[116]"><img src="http://blog.bot.vc/wp-content/uploads/2011/09/bfcde06102a6d51257f8d8953407ac20.png" alt="" title="cache-manifest" width="681" height="288" class="alignnone size-full wp-image-119" /></a><br />
前回は、新しい要素の追加について書きました。<a href="http://blog.bot.vc/2011/09/html5css3new/" target="_blank">前回記事</a><br />
今回は、キャッシュマニフェストについて書きたいと思います。<br />
HTML5の新機能というか、キャッシュ機能は前からあったと思うのですが<br />
まあ、HTML5で CACHE MANIFESTの紹介がたくさん載っているので<br />
新機能でも良いかなとｗ<br />
<br />
キャッシュマニフェストは、HTML、JS、CSS、画像などのファイルを<br />
PC側にキャッシュとしてもって次回の表示を速くしたり、<br />
オフライン（スマートフォンだと圏外）でも表示してくれる機能です。<br />
圏外で表示が出来るなんて、スマートフォンには必須の機能な気がします。<br />
<br />
設定の仕方は、<br />
１．apacheにmime追加<br />
２．キャッシュマニフェストファイル作成<br />
３．HTMLへキャッシュマニフェストの利用設定<br />
ってな感じで、そんなに難しくありません。<br />
簡単に手順をメモっておきます。<br />
<br />
<h2>１．apacheにmime追加</h2>
mimeの追加の方法は2つあります。<br />
httpd.confに直接各方法と、.htaccessに記述する方法<br />
<br />
下記の1行を.htaccessに記述して<br />
公開するフォルダにファイルをおいておきます。<br />
<br />

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;">AddType text/cache-manifest .manifest</pre></div></div>

<br />
<br />
<br />
<h2>２．キャッシュマニフェストファイル作成</h2>
<br />

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
</pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;">CACHE MANIFEST
# version 1.0  2011.09.13-07
&nbsp;
CACHE:
hello.html
hello.css
banana.gif
jquery.min.js</pre></td></tr></table></div>

<br />
<br />
.manifestファイルを作成します。<br />
#がコメント行になります。<br />
<br />
このキャッシュマニフェストファイルを更新しないと<br />
HTMLなどのコンテンツを更新しても反映されないので<br />
コメント行をつけて、Version管理などをして<br />
HTMLファイルを更新したときにVersionを変えて<br />
HTMLを反映させます。<br />
<br />
キャッシュマニフェストファイルを更新しないと<br />
HTMLが更新されないんです＾＾<br />
<br />
<br />
<h2>３．HTMLへキャッシュマニフェストの利用設定</h2>
<br />
HTMLファイルに、先ほど作成したマニフェストファイルを指定します。<br />
<br />

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">html</span> manifest<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;hello.manifest&quot;</span>&gt;</span></pre></div></div>

<br />
<br />
作ったHTMLのサンプルを載せておきます。<br />
ポイントは、HTML宣言の次の行にキャッシュマニフェストの指定をすること<br />
何気にハマッたんですが、metaタグの後とかに書くと<br />
キャッシュマニフェスト効かなかったりします＾＾<br />
一番最初に宣言するのがいいですね。<br />
（まあ、キャッシュ宣言なんだから当然といえば当然だけど…）<br />
<br />

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
</pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #00bbdd;">&lt;!DOCTYPE HTML&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">html</span> manifest<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;hello.manifest&quot;</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">head</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">meta</span> <span style="color: #000066;">charset</span><span style="color: #66cc66;">=</span>UTF-<span style="color: #cc66cc;">8</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">meta</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;viewport&quot;</span> <span style="color: #000066;">content</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0&quot;</span>&gt;</span> 
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">link</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;stylesheet&quot;</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;hello.css&quot;</span>&gt;</span> 
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">title</span>&gt;</span>タイトル<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">title</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;jquery.min.js&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span>	
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span>&gt;</span> 
      (function($) {
        $(function() {
          if(!(&quot;applicationCache&quot; in window)) {
            alert('ApplicationCache is not supported in this browser.');
            return;
          }
          $(applicationCache).bind('updateready', function() {
            applicationCache.update();
            applicationCache.swapCache();
          });
          if(applicationCache.status == applicationCache.UPDATEREADY) {
            applicationCache.update();
            applicationCache.swapCache();
          }
          $('#navigator-online').html(navigator.onLine ? 'online' : 'offline');
        });
      })(jQuery);	
	<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span> 
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">head</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">body</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">style</span>&gt;</span>p{color: red;}<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">style</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span>&gt;</span>HTML5 <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">br</span> <span style="color: #66cc66;">/</span>&gt;</span>CACHE MANIFEST テスト<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">br</span> <span style="color: #66cc66;">/</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;banana.gif&quot;</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;hello2.html&quot;</span>&gt;</span>hello2 リンクテスト<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span> <span style="color: #66cc66;">/</span>&gt;</span>
	リンク先もキャッシュが効きます。
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;navigator-online&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">body</span>&gt;</span></pre></td></tr></table></div>

<br />
<br />
<br />
実際の動きはこっちで<br />
　<a href="http://bot.vc/html5/hello.html" target="_blank">デモ </a><br />
実は、見ても変化がないので、何じゃって感じですが<br />
1回参照したら、後はオフラインにしても見えます！<br />
PCだったらLANを抜くとか無線を切るとか、スマホだったらフライトモードに。<br />
<br />
こんな感じの画面になります。<br />
フライトモードでも見えてるよ♪<br />
<a href="http://blog.bot.vc/wp-content/uploads/2011/09/0b71d61065d1732d69aed57e8cec25b9.png" rel="lightbox[116]"><img src="http://blog.bot.vc/wp-content/uploads/2011/09/0b71d61065d1732d69aed57e8cec25b9-200x300.png" alt="" title="iphone動作" width="200" height="300" class="alignnone size-medium wp-image-117" /></a><br />
<br />
キャッシュファイルの確認もブラウザだと出来ます。<br />
chromeだとコマンドをURLに指定すればキャッシュファイルが表示されます。<br />
<br />

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;">about:appcache-internals</pre></div></div>

<br />
<br />
<br />
こんな感じでキャッシュファイルが確認できます<br />
キャッシュの削除を意図的にすることも出来ます。<br />
<a href="http://blog.bot.vc/wp-content/uploads/2011/09/3d10a06eb3b8b92596638c4bec4474b4.png" rel="lightbox[116]"><img src="http://blog.bot.vc/wp-content/uploads/2011/09/3d10a06eb3b8b92596638c4bec4474b4-300x130.png" alt="" title="appcache-internals" width="300" height="130" class="alignnone size-medium wp-image-118" /></a><br />
<br />
これで、オフラインでも見える便利なサイトが完成です。<br />
スマートフォンでは非常に有効な機能かなと。<br />
たとえば、イントラのナレッジDBを参照したりとか<br />
アドレス帳を作っておいてクリックしたら電話がかかるとか<br />
頻繁に更新されないコンテンツには最適ですね。<br />
<br />
次回は、localStorage機能をまとめてみたいと思います。<br />
<br />
前回記事：<br />
　 <a href="http://blog.bot.vc/2011/09/html5css3new/" target="_blank" class="advmk">http://blog.bot.vc/2011/09/html5css3new/</a></p>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:comments href="http://blog.bot.vc/2011/09/html5-cachemanifest/"></fb:comments>]]></content:encoded>
			<wfw:commentRss>http://blog.bot.vc/2011/09/html5-cachemanifest/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.bot.vc/2011/09/html5-cachemanifest/" />
	</item>
		<item>
		<title>HTML5/CSS3の新しい機能</title>
		<link>http://blog.bot.vc/2011/09/html5css3new/</link>
		<comments>http://blog.bot.vc/2011/09/html5css3new/#comments</comments>
		<pubDate>Sun, 11 Sep 2011 11:13:43 +0000</pubDate>
		<dc:creator>manabu uekusa</dc:creator>
				<category><![CDATA[HTML5]]></category>

		<guid isPermaLink="false">http://blog.bot.vc/?p=107</guid>
		<description><![CDATA[この記事の所要時間： 約 2分20秒 HTML5/CSS3の記事や書籍が多くなってきた気がする。 Wikipediaによると、2008年にドラフトが発表されて 2014年まで正式勧告を目指しているそうです。 HTML5/ &#8230; <a href="http://blog.bot.vc/2011/09/html5css3new/">続きを読む <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<div style="border-top:2px dotted #ccc;border-bottom:2px dotted #ccc;padding:0.2em 0;text-align:right;font-size:small;color:#444">
	この記事の所要時間： <span style="font-weight:bold">約 <span style="color:#f00">2</span>分<span style="color:#f00">20</span>秒</span>
</div>
<p>
<a href="http://blog.bot.vc/wp-content/uploads/2011/09/html5.jpeg" rel="lightbox[107]"><img src="http://blog.bot.vc/wp-content/uploads/2011/09/html5.jpeg" alt="" title="html5" width="204" height="204" class="alignnone size-full wp-image-108" /></a><br />
<br />
<br />
HTML5/CSS3の記事や書籍が多くなってきた気がする。<br />
Wikipediaによると、2008年にドラフトが発表されて<br />
2014年まで正式勧告を目指しているそうです。<br />
<br />
HTML5/CSS3で書かれているサイトも<br />
最近は結構増えてきたなぁと思ってます。<br />
appleとかローソンとかはHTML5で書かれてますね〜<br />
<br />
apple.com<br />
 <a href="http://www.apple.com/" target="_blank" class="advmk">http://www.apple.com/</a><br />
<a href="http://blog.bot.vc/wp-content/uploads/2011/09/780a0a5b04f6ff13e64de5747a92ce36.png" rel="lightbox[107]"><img src="http://blog.bot.vc/wp-content/uploads/2011/09/780a0a5b04f6ff13e64de5747a92ce36-300x195.png" alt="" title="スクリーンショット（2011-09-11 11.33.15）" width="300" height="195" class="alignnone size-medium wp-image-109" /></a><br />
<br />
ローソン<br />
 <a href="http://www.lawson.co.jp/" target="_blank" class="advmk">http://www.lawson.co.jp/</a><br />
<a href="http://blog.bot.vc/wp-content/uploads/2011/09/0834fda68fd1bb2ad840e113a936eefa.png" rel="lightbox[107]"><img src="http://blog.bot.vc/wp-content/uploads/2011/09/0834fda68fd1bb2ad840e113a936eefa-300x215.png" alt="" title="スクリーンショット（2011-09-11 20.10.23）" width="300" height="215" class="alignnone size-medium wp-image-110" /></a><br />
<br />
ちなみに、chromeであれば、HTML5Detectorを<br />
使えればHTML5で記述されているか簡単にチェックできます。<br />
<br />
HTML5で新しいなぁと思う機能は<br />
この３つかなと。<br />
<br />
１．新しい要素の追加<br />
２．キャッシュマニフェスト<br />
３．WebStorage<br />
<br />
とりあえず、今日は１．の新しい要素の追加について<br />
まとめてみます。<br />
<br />
<a href="http://blog.bot.vc/wp-content/uploads/2011/09/4a488a794695ffdcd20ecfabd354d9c8.png" rel="lightbox[107]"><img src="http://blog.bot.vc/wp-content/uploads/2011/09/4a488a794695ffdcd20ecfabd354d9c8.png" alt="" title="HTML5新要素" width="677" height="620" class="alignnone size-full wp-image-111" /></a><br />
<br />
実際はこんな感じで動きます。<br />
<br />
search:<input type="search"/><br/><br />
tel:<input type="tel"/><br/><br />
url:<input type="url"/><br/><br />
email:<input type="email"/><br/><br />
file:<input type="file"/><br/><br />
number:<input type="number"/><br/><br />
range:<input type="range"/><br/><br />
color:<input type="color"/><br/><br />
datetime:<input type="datetime"/><br/><br />
date:<input type="date"/><br/><br />
month:<input type="month"/><br/><br />
week:<input type="week"/><br/><br />
time:<input type="time"/><br/><br />
datetime-local:<input type="datetime-local"/><br/><br />
<input type="submit" value="送信">
<hr /><br />
progress:<progress max="50">50%</progress><br/><br />
meter:<meter value="75" min="0" max="100">75%</meter><br/><br />
<br />
コード<br />
<br />

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
</pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;">search:<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;search&quot;</span><span style="color: #66cc66;">/</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span><span style="color: #66cc66;">/</span>&gt;</span>
tel:<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;tel&quot;</span><span style="color: #66cc66;">/</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span><span style="color: #66cc66;">/</span>&gt;</span>
url:<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;url&quot;</span><span style="color: #66cc66;">/</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span><span style="color: #66cc66;">/</span>&gt;</span>
email:<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;email&quot;</span><span style="color: #66cc66;">/</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span><span style="color: #66cc66;">/</span>&gt;</span>
file:<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;file&quot;</span><span style="color: #66cc66;">/</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span><span style="color: #66cc66;">/</span>&gt;</span>
number:<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;number&quot;</span><span style="color: #66cc66;">/</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span><span style="color: #66cc66;">/</span>&gt;</span>
range:<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;range&quot;</span><span style="color: #66cc66;">/</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span><span style="color: #66cc66;">/</span>&gt;</span>
color:<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;color&quot;</span><span style="color: #66cc66;">/</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span><span style="color: #66cc66;">/</span>&gt;</span>
datetime:<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;datetime&quot;</span><span style="color: #66cc66;">/</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span><span style="color: #66cc66;">/</span>&gt;</span>
date:<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;date&quot;</span><span style="color: #66cc66;">/</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span><span style="color: #66cc66;">/</span>&gt;</span>
month:<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;month&quot;</span><span style="color: #66cc66;">/</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span><span style="color: #66cc66;">/</span>&gt;</span>
week:<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;week&quot;</span><span style="color: #66cc66;">/</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span><span style="color: #66cc66;">/</span>&gt;</span>
time:<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;time&quot;</span><span style="color: #66cc66;">/</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span><span style="color: #66cc66;">/</span>&gt;</span>
datetime-local:<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;datetime-local&quot;</span><span style="color: #66cc66;">/</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span><span style="color: #66cc66;">/</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;submit&quot;</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;送信&quot;</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">hr</span>&gt;</span>
progress:<span style="color: #009900;">&lt;progress max<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;50&quot;</span>&gt;</span>50%<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span>progress&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span><span style="color: #66cc66;">/</span>&gt;</span>
meter:<span style="color: #009900;">&lt;meter <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;75&quot;</span> min<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;0&quot;</span> max<span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;100&quot;</span>&gt;</span>75%<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span>meter&gt;&lt;<span style="color: #000000; font-weight: bold;">br</span><span style="color: #66cc66;">/</span>&gt;</span></pre></td></tr></table></div>

<br />
<br />
<br />
こんな感じに新要素が使えます。<br />
まだまだ、ブラウザが対応していないので<br />
chromeとかでもcolorとかdateとかで<br />
カラーダイヤログやカレンダーが表示されない感じですが<br />
入力チェックは動いているみたい。これから対応されるのが楽しみです。<br />
しばらくは、jqueryで頑張るしかないかな。<br />
<br />
次は、キャッシュマニフェストについて調べてまとめてみます。<br />
オフラインでもWebが使えるので非常に気になっている機能です<br />
<br />
参考URL<br />
<br />
HTML5 要素<br />
 <a href="http://www.html5.jp/tag/elements/index.html" target="_blank" class="advmk">http://www.html5.jp/tag/elemen&#8230;&#8230;index.html</a><br />
<br />
Wikipedia：HTML5<br />
 <a href="http://ja.wikipedia.org/wiki/HTML5" target="_blank" class="advmk">http://ja.wikipedia.org/wiki/HTML5</a><br />
<br />
Chrome extensions HTML5Detector<br />
 <a href="http://www.html5.jp/library/html5detector.html" target="_blank" class="advmk">http://www.html5.jp/library/ht&#8230;&#8230;ector.html</a><br />
</p>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:comments href="http://blog.bot.vc/2011/09/html5css3new/"></fb:comments>]]></content:encoded>
			<wfw:commentRss>http://blog.bot.vc/2011/09/html5css3new/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.bot.vc/2011/09/html5css3new/" />
	</item>
	</channel>
</rss>
