感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

jQuery Mobileの最も単純なサンプルを作ってみる。

<スポンサーリンク>

CDN(Content Delivery Network)とは

CDNとは、その名が示す通り、さまざまなWebコンテンツの配布に最適化されたネットワークである。
jQueryのライブラリもCDN経由で読み込むことが推奨されているが、この場合はインターネット接続が必須となる。

cssとかjsについているminの意味

minはMinified形式という圧縮形式であることを示す。
高速なダウンロードを可能にするため、元のファイルからコメントや空白、改行などを削除してファイルサイズを大幅に削減したもの。

jQuery Mobileが複数のページを表示する仕組み

複数のWebページを読み込んで、片方を「見えなくする」ことによってajaxによる画面遷移を実現している。
図にするとこんな感じ。

これについては、実際のHTMLを見たほうが早い。

jQuery Mobileを始める

以下のURLからjQuery Mobileのjsとcssをダウンロードするか、CDNとしてページに読み込むように設定する。
http://jquerymobile.com/download/

一番簡単なjQuery Mobileのサンプル

data-roleというのでページを設定する。
このサンプルはこんな感じで出力される。

<!DOCTYPE html>
<html lang="ja">
<head>
<title>マルチページのてすと</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="top">
	<div data-role="header">
		<h1>jQuery Mobileさん</h1>
	</div>
	<div data-role="content">
		<h2>Hello jQuery Mobile!</h2>
		<p>jQuery Mobileをはじめてます</p>
		<p>
		<a href="#info">今週のジャンプ</a><br />
		<a href="#manga">暗殺教室の最強防御形態について</a>
		<div data-role="footer">
			<p style="text-align:center"><small>Copyright &copy; 2013 sho322</small></p>
		</div>
	</div>
</div>

<div data-role="page" id="info">
	<div data-role="header">
		<h1>今週のジャンプ</h1>
	</div>
	<div data-role="content">
		<h2>今週のジャンプの見どころについて</h2>
		<p>今週はやはり暗殺教室とNARUTOの週だった。ONE PIECEは休載が多くて心配。
			最近あんまし面白くないし。ドフラミンゴ編は失敗だと思う。
		</p>
	</div>
	<a href="#top">topに戻る</a><br />
	<div data-role="footer">
		<p style="text-align:center"><small>Copyright &copy; 2013 sho322</small></p>
	</div>
</div>

<div data-role="page" id="manga">
	<div data-role="header">
		<h1>今週の暗殺教室</h1>
	</div>
	<div data-role="content">
		<h2>暗殺の結果は?</h2>
		<p>やはり暗殺教室は安定して面白い。この面白さをキープできるのかがむしろ不安になるレベル。
		   奥の手中の奥の手と言われると、普通は納得いかないものだけど、しっかり説明して納得させる点はさすがといえる。
		</p>
		<a href="#top">topに戻る</a><br />
		<div data-role="footer">
			<p style="text-align:center"><small>Copyright &copy; 2013 sho322</small></p>
		</div>
	</div>
</div>
</body>
</html>

参考にした本


この本の丁寧さとjQuery Mobileに感動した。
やっとモバイルアプリが作れそう!

感謝のプログラミング

今回で感謝のプログラミングは【645時間目】
10000時間まで、あと【9355時間】