その8「jQuery Mobileの本を借りてくる」ー 無料で作った自作スマホサイトで収入を得られるか?の実験室。

以前、HTMLの「はじめの一歩」的に作ってみたファイルがありますが、これを膨らませていく形で少しずつ説明しながら、サイトを作っていこうかと思います。
テキストエディタ_1
これをパソコンで見るとこう表示されます。
テキストエディタ_4
忍者ホームページに転送してみました。(ネット上で公開している状態になっています。sample_1.html)iPhoneで見てみると…。


jqm_sample_1.png

小さく「こんにちは」と出てはいるけど、無料ページなので広告ばかりが目立つ状態に。
スマホっぽく見せるには?文字をもっと大きくして、ヘッダー(見出し)とフッターがまずは欲しいところ。
こういった見た目を自動でスマホっぽく仕立ててくれる呪文があるのです。


<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css”/>
<script src=”http://code.jquery.com/jquery-1.6.4.min.js”></script>
<script src=”http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js”></script>


最初のHTMLに、追加した箇所が何カ所かヘッダーとフッターと、そして見た目のデザイン
jqm_sample_1html.png
これを再びiPhoneで見てみると、


jqm_sample_2.png

一気に、だいぶマシになってきました。凄いでしょ。(こうなりました。sample_2.html
さっきの魔法の呪文のようなもの、これは「モバイルWebアプリ開発用のJavaScriptライブラリjQueryMobile(ジェイクエリーモバイル)」というものだそうで。
えっ、こんな知識どこから仕入れてくるの?…というと、この記事はあくまで「無料で作る」ということを目指してしますので…。
実は本を図書館で借りてきまして、内容はまんま受け売りです。
図書館で借りたので、お金かかっていませんw 借りてきた本は、まさにこれです。ここからjQueryMobileのライブラリ読み込みの文章を見ながら、そのまま打ち込みました。


しかしながらjQueryMobileの他の本も、ざっと見たところ内容はこの本に準拠している形のようでしたので、どの本でも参考に借りてくるには良いと思います。
別に、jQueryMobileの最新版でなくても大丈夫なんですよ。本に書いてあるのが昔のバージョンだから資産を公式ホームページから探してダウンロードして使おうとして、見つからなくて難しい…。という場合でも、公式のファイル置き場から旧バージョンの資産を直リンクで設定して使う、それでしっかり使えますので。(今回は、その方式でやってみています)
☆☆ワンクリックで応援お願いします\(^¬^)ノ 励みになります☆☆
 にほんブログ村 携帯ブログ iPhoneへ
↓おまけのソースコード。(ブログ上だと表示が消えるので半角の<>を全角の<>に置き換えて載せています)


<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″ />
<!–見た目をスマホっぽく。ここから–>
<meta name=”viewport” content=”width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no”/>
<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css”/>
<script src=”http://code.jquery.com/jquery-1.6.4.min.js”></script>
<script src=”http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js”></script>
<!–/見た目をスマホっぽく。ここまで–>
</head>
<body>
<!–ヘッダーここから–>
<div data-role=”header”>
<h2>はじめの一歩</h2>
</div>
<!–/ヘッダーここまで–>
こんにちは
<!–フッターここから–>
<div data-role=”footer”>
<h2><small> 2013 季節を感じるグッズ</small></h2>
</div>
<!–フッターここまで–>
</body>
</html>

シェアする

  • このエントリーをはてなブックマークに追加

フォローする