ウェブ学のすすめ

Study of Web Design & Programing

2012年8月版「Safari 5.1.7 for Windows」をダウンロードする方法

2012年8月6日現在、日本のアップル公式サイトでWindowsSafariのダウンロード先が見つかりにくい場所に変更されてしまいました。
Safari 6も現時点でMac版のみです。

アップルが Safari 6 を公開、Windows 版は終了? - Engadget Japanese

ステップ1:アップル公式サイト

↓アップル公式ページにアクセスします。
アップル

ステップ2:ダウンロード

↓「サポート」>「ダウンロード」

↓「インターネット」

↓「Safari 5.1.7」をクリック

ステップ3:言語の罠

↓「言語」が日本語のままダウンロードボタンを押すと・・・

↓なぜかSafariの説明ページに・・・?

↓「言語」を英語にしてダウンロードすると無事ダウンロードされます。

ステップ4:インストール手順

↓ダウンロードしたインストーラーを開く

↓「次へ」をクリック

↓「使用許諾契約に同意します」を選択し、「次へ」をクリック

↓オプションを選択し、「次へ」をクリック

↓インストール先を選択し、「インストール」をクリック

↓「終了」をクリック

ステップ5:インストール完了

↓ダウンロードページで英語を選択しましたが、インストールしたSafariはメニューバーも日本語になっています。

jQueryMobileの基本

プレビュー


↓別ウィンドウを開いて見る
jQueryMobileの基本

QRコード

※おすすめQRコード読み取りアプリ

お父さんQR
カテゴリ: ユーティリティ
サイズ: 2.3 MB
価格: 無料

ポイント


↓jQueryMobile公式サイト
jQuery Mobile | jQuery Mobile

↓jQueryMobile日本語リファレンスサイト
jQuery Mobile 1.1.0 日本語リファレンス

↓jQueryMobileの基礎を学べる記事
ASCII.jp:10分でわかる! jQuery Mobileのキホン

コード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>jQueryMobileの基本</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header">
<h1>jQueryMobile Test</h1>
</div>
<div data-role="content">
<p>jQueryMobileを利用しています。</p>
<ul data-role="listview" data-inset="true" data-theme="c">
<li data-role="list-divider">メニュー</li>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
</ul>
</div>
<div data-role="footer">
<h4>&copy; 2012 vinton </h4>
</div>
</div>
</body>
</html>

jQueryMobileのデザインテーマをいろいろ変更してみる

プレビュー


↓別ウィンドウを開いて見る
デザインテーマのデモ

QRコード

※おすすめQRコード読み取りアプリ

お父さんQR
カテゴリ: ユーティリティ
サイズ: 2.3 MB
価格: 無料

ポイント

  • data-theme」にa〜eのいずれかを指定する
  • list-divider」のテーマを変更するには「ul」の「data-divider-theme」にa〜eのいずれかを指定する

コード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>デザインテーマのデモ</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header">
<h1>デフォルトテーマ</h1>
</div>
<div data-role="content">
<p>このページはデフォルトのままです。</p>
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">テーマの種類</li>
<li><a href="#theme_a">テーマ「a」</a></li>
<li><a href="#theme_b">テーマ「b」</a></li>
<li><a href="#theme_c">テーマ「c」</a></li>
<li><a href="#theme_d">テーマ「d」</a></li>
<li><a href="#theme_e">テーマ「e」</a></li>
</ul>
</div>
<div data-role="footer">
<h4>&copy; 2012 vinton </h4>
</div>
</div>

<div data-role="page" id="theme_a" data-theme="a">
<div data-role="header" data-theme="a">
<a href="#index" data-icon="back">戻る</a>
<h1>テーマ「a」</h1>
</div>
<div data-role="content" data-theme="a">
<p>テーマ「a」は黒と濃い灰色を基調としています。</p>
<ul data-role="listview" data-inset="true" data-theme="a" data-divider-theme="a">
<li data-role="list-divider">メニュー</li>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
</ul>
</div>
<div data-role="footer" data-theme="a">
<h4>&copy; 2012 vinton </h4>
</div>
</div>

<div data-role="page" id="theme_b" data-theme="b">
<div data-role="header" data-theme="b">
<a href="#index" data-icon="back">戻る</a>
<h1>テーマ「b」</h1>
</div>
<div data-role="content" data-theme="b">
<p>テーマ「b」は青色と薄灰色を基調としています。</p>
<ul data-role="listview" data-inset="true" data-theme="b" data-divider-theme="b">
<li data-role="list-divider">メニュー</li>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
</ul>
</div>
<div data-role="footer" data-theme="b">
<h4>&copy; 2012 vinton </h4>
</div>
</div>

<div data-role="page" id="theme_c" data-theme="c">
<div data-role="header" data-theme="c">
<a href="#index" data-icon="back">戻る</a>
<h1>テーマ「c」</h1>
</div>
<div data-role="content" data-theme="c">
<p>テーマ「c」は薄い灰色を基調としています。</p>
<ul data-role="listview" data-inset="true" data-theme="c" data-divider-theme="c">
<li data-role="list-divider">メニュー</li>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
</ul>
</div>
<div data-role="footer" data-theme="c">
<h4>&copy; 2012 vinton </h4>
</div>
</div>

<div data-role="page" id="theme_d" data-theme="d">
<div data-role="header" data-theme="d">
<a href="#index" data-icon="back">戻る</a>
<h1>テーマ「d」</h1>
</div>
<div data-role="content" data-theme="d">
<p>テーマ「d」は灰色を基調としています。</p>
<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="d">
<li data-role="list-divider">メニュー</li>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
</ul>
</div>
<div data-role="footer" data-theme="d">
<h4>&copy; 2012 vinton </h4>
</div>
</div>

<div data-role="page" id="theme_e" data-theme="e">
<div data-role="header" data-theme="e">
<a href="#index" data-icon="back">戻る</a>
<h1>テーマ「e」</h1>
</div>
<div data-role="content" data-theme="e">
<p>テーマ「e」は黄色を基調としています。</p>
<ul data-role="listview" data-inset="true" data-theme="e" data-divider-theme="e">
<li data-role="list-divider">メニュー</li>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
</ul>
</div>
<div data-role="footer" data-theme="e">
<h4>&copy; 2012 vinton </h4>
</div>
</div>
</body>
</html>

jQueryMobileのページ切替効果をいろいろ試してみる

プレビュー


↓別ウィンドウを開いて見る
ページ切替効果

QRコード

※おすすめQRコード読み取りアプリ

お父さんQR
カテゴリ: ユーティリティ
サイズ: 2.3 MB
価格: 無料

ポイント

  • data-transition」にfadeやflipといった値を指定します。
    • fade:ページがフェードイン/フェードアウトで切り替わる
    • flip:ページが回転して切り替わる
    • pop:ページが拡大しながら切り替わる
    • turn:ページが左端を軸にターンして切り替わる
    • flow:ページが浮き上がったようにして切り替わる
    • slidefade:ページがフェードイン/フェードアウトしながら左右にスライドして切り替わる
    • slide:ページが左右にスライドして切り替わる
    • slideup:ページが下から上にスライドして切り替わる
    • slidedown:ページが上から下にスライドして切り替わる
    • none:切替効果なし
  • ページ切替効果を逆回しにしたい場合は、「data-direction=“reverse”」を記述します。

コード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>ページ切替効果</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header">
<h1>ページ切替効果</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li><a href="#about" data-transition="fade">fade</a></li>
<li><a href="#about" data-transition="flip">flip</a></li>
<li><a href="#about" data-transition="pop">pop</a></li>
<li><a href="#about" data-transition="turn">turn</a></li>
<li><a href="#about" data-transition="flow">flow</a></li>
<li><a href="#about" data-transition="slidefade">slidefade</a></li>
<li><a href="#about" data-transition="slide">slide</a></li>
<li><a href="#about" data-transition="slideup">slideup</a></li>
<li><a href="#about" data-transition="slidedown">slidedown</a></li>
<li><a href="#about" data-transition="none">none</a></li>
</ul>
</div>
<div data-role="footer">
<h4>&copy; 2012 vinton</h4>
</div>
</div>

<div data-role="page" id="about">
<div data-role="header">
<a href="#index" data-icon="back">戻る</a>
<h1>ページ切替効果</h1>
</div>
<div data-role="content">
<p>コンテンツ内容</p>
</div>
<div data-role="footer">
<h4>&copy; 2012 vinton</h4>
</div>
</div>

</body>
</html>

jQueryMobileのサイトにGoogle マップを設置する

プレビュー


↓別ウィンドウを開いて見る
【jQueryMobile】Google マップの表示

QRコード

※おすすめQRコード読み取りアプリ

お父さんQR
カテゴリ: ユーティリティ
サイズ: 2.3 MB
価格: 無料


ポイント


jQueryMobileで作られたサイトにGoogle Mapを表示させるには通常のスクリプトの他に

$('マップを表示するcontentのid名').live('pageshow',function(){
        google.maps.event.trigger(map, 'resize');
        map.setCenter('座標');
});

を追加します。

コード

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>【jQueryMobile】Google マップの表示</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
</head>
<body>
<div data-role="page" id="map">
<div data-role="header">
<h1>Google マップの表示</h1>
</div>
<div data-role="content" id="map_content">
<div id="map_canvas"></div>
</div>
<div data-role="footer">
<h4>&copy; 2012 vinton</h4>
</div>
</div>
</body>
</html>
CSS
#map_canvas {
    width:100%;
    height:400px;
    border:4px solid #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
JavaScript
$(function() {
    var latlng = new google.maps.LatLng(35.69167,139.700211);
    var myOptions = {
        zoom: 16,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var marker = new google.maps.Marker({
        position:latlng,
        map: map
    });
    $('#map_content').live('pageshow',function(){
        google.maps.event.trigger(map, 'resize');
        map.setCenter(Latlng);
    });
});