こちらになります。

http://blog.kaleido-jp.net/

はてな好きなんだけどなー。

どうしてもデザイン凝り出すと限界があるので、引越しました。

ツイートする

スマホサイト制作：URLバーをページ読込み完了時に引っ込める方法

今回もあまりがっつり書ける時間が無いので、超小技のエントリー(￣▽￣;)

たとえば、Yahooさんとかがやっているんですが、

「ページを読込んだときに、URLバーが引っ込む」という、ちょっとした気配りの動き。

Yahoo! JAPAN （スマートフォンサイト）

（Yahooさんの手法とは違うかもしれませんが）

その方法を紹介します。

僕の場合は、ページ読込みが完了した時に1ピクセルだけスクロールさせています。

そもそも、iOSのSafariやAndroidの「ブラウザ」は、

ページ読み込み完了時に、スクロール位置が1ピクセル以上あった場合、

URLバーが引っ込む仕様のようです。

（あくまで推測。ページ内リンクなどで、そうなるのが根拠です。）

まぁ、これのなにがいいのかというと、

ページの表示範囲を少し広く見せられる。

ってところでしょうか。

やり方は簡単です。

JavaScriptでWindowオブジェクトの読み込み完了時に、

1ピクセルのスクロールをしてあげます。

jQueryで記述すると

  $(window).bind('load',function(){ //←windowオブジェクトにloadイベントをバインド
    setTimeout(function(){
	window.scrollTo(0,1);　//←windowオブジェクトを1ピクセルスクロール
　},1);
  });

setTimeoutについては、リロード時など読み込みが早すぎて動作が追いつかない場合があるため

やや遅らせるという処理をおこなっています。

記述は違えど、こういう手法が一般的のようです。

逆に他に良い方法があれば、教えていただければです！

動作デモ

（iPhone・Androidで見てください。iPhone 3GS/IS03で確認済み）

※ページ内容によっては、setTimeoutの遅延をもう少し大きくしてあげるといいかもです。

※前回のエントリーで「URLバーを隠す行為」とコメントがありましたが、今回についても隠すことを推奨しているわけではありません。

ツイートする

Permalink | コメント(0) | トラックバック(0) | 09:16

スマホサイト：Webアプリモードで意外と書かれていない落とし穴

ちょっと今回はまめ知識的な内容です。

最近、「iPhoneでWebアプリを作成」といった記事をよく見かけます。

（jQuery Mobileなどを利用した開発方法は置いといて）

HTML5+CSS3+JavaScriptで一から作成する方法について、意外と肝心な注意点が抜けてるように思います。

とくに、よくmetaタグを使った「Webアプリモード（フルスクリーンモード）」にする方法が書かれていたりします。

<meta name="apple-mobile-web-app-capable" content="yes" />

これをやると、URLバーとかが無くなって、サイトがネイティブアプリっぽくなってかっこいいんですよね。

これで、サイトをアプリっぽく見せられる！ってちょっと興奮しちゃいますよね。

ただ、これって意外な落とし穴があるんです(￣▽￣;)

今回は、僕が知ってる大きな２つの注意点を挙げます。

では、前回の記事のサンプルソースを使って、検証してみたいと思います。

前回使ったサンプルソースですが、ページとしてはこんな感じです。

このサンプルに例のmetaタグとアイコンを設定して、Webアプリ風にしてみます。

<!--Webアプリモード（フルスクリーンモード）-->
<meta name="apple-mobile-web-app-capable" content="yes" /> 
<!--ホームアイコンの設定-->
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />

（サンプルをサーバにアップしてみましたので、iPhoneお持ちの方はぜひお試しを）

サンプル（外部サイトです）

アクセスしたら、「ホーム画面に追加」をおこないます。

※下の画像は英語ですが、日本語環境の場合は「ホーム画面に追加」と出ているので、それを選んでください。

そうするとこういう画面になります。

右上の「追加」ボタンを押して、追加するとホーム画面にアイコンが追加されます。

そして、このアイコンを押してサイトにアクセス、というかWebアプリを起動します。

すると…

URLバーなどが無くなり、ネイティブアプリっぽくなりました！

ちなみに、ここでメニュー部分のHTMLソースがどうなっているか見てみましょう。

（※spanが多く入って、あまりかっこはよくないですが…）

      <!--globalNav-->
      <div id="globalNav" class="clearfix">
        <ul>
          <li><a href="second.html" title="iMac"><span><img src="images/icon1.png" width="48" height="48" /></span><span>iMac</span></a></li>
          <li><a href="second.html" title="MacBook Pro"><span><img src="images/icon2.png" width="48" height="48" /></span><span>MacBook Pro</span></a></li>
          <li><a href="second.html" title="iPhone"><span><img src="images/icon3.png" width="48" height="48" /></span><span>iPhone</span></a></li>
          <li><a href="second.html" title="Search"><span><img src="images/icon4.png" width="48" height="48" /></span><span>Search</span></a></li>
          <li><a href="second.html" title="RSS"><span><img src="images/icon5.png" width="48" height="48" /></span><span>RSS</span></a></li>
        </ul>
      </div><!--/globalNav-->

なんの変哲もないソースです。

全てリンク先はsecond.htmlに飛ぶようにしてます。

なので、当然Webアプリのリンクを押すと、画面が遷移すると思いますよね。

ところが、メニューを押してみると…

なんとSafariに飛ばされてしまったぁ。。。

こ、これではWebアプリにした意味があんまり無い。。。

これは、はっきりと仕様確認したわけじゃないのですが、

#〜なページ内リンク以外は、アプリの外とみなす仕様になっているんだと思います。

で、こんなときどうするかというと、

僕が知ってる手っとり早い方法は、リンクはJavaScriptのonClickイベントで処理することです。

わざわざページ内リンクにして、どうにか他のページに遷移する仕組みを作るのはけっこう大変です。

単純に画面遷移をおこないたいなら、これで事足りると思います。

記述がすっきりなjQuery使います。

jQuery読込み

<!--だいぶすっきりしてますが、一応HTML5記述で-->
<script src="js/jquery-1.5.min.js"></script>

下記のようなスクリプトを記述します。

（ページにスクリプトを直に書くのは好きじゃありませんが…今回はとりあえず直に）

  $(function(){
   //ページ内のaタグ群を取得。aTagsに配列として代入。
    var aTags = $('a'); 
       //全てのaタグについて処理
	aTags.each(function(){
          //aタグのhref属性からリンク先url取得
	  var url = $(this).attr('href');
　　　//念のため、href属性は削除
	  $(this).removeAttr('href');
          //クリックイベントをバインド
	  $(this).click(function(){
	    location.href = url;
	  });
    });
  });

そうすると、Safariに飛ばず画面遷移するようになりました。

しかし…お気づきかと思いますが、ブラウザの各バーを消しているので、

戻ることができません。

そこで、２ページ目に「戻る」ボタンを付けます。

jQuery使うまでもありません。

    <div id="backButton"><a href="javascript:history.back();">←戻る</a></div>

戻れるようになりました。

リンク飛べるようになった方は、こちらです。

サンプル2（外部サイトです）

徹底解説 HTML5 APIガイドブック ビジュアル系API編

• 作者: 羽田野太巳
• 出版社/メーカー: 秀和システム
• 発売日: 2011/01
• メディア: 単行本
• 購入: 2人 クリック: 45回
• この商品を含むブログ (7件) を見る

ツイートする

Permalink | コメント(7) | トラックバック(1) | 08:57

スマホサイト：このブログで使ったサンプルソースのキャプチャ並べてみた。ソースDL可。

iPhone, スマホサイトTips, ダウンロード, CSS3, Android

即座にDLできるようにアーカイブ化。

smart_sample02.zip

スマホサイトのリスト型メニューを何パターンか作ってみた

仕事がいったん落ち着きはしたものの、やっぱり僕の周りでも今まで以上にスマホスマホと騒いでます。

スマホサイトといえば、リスト型メニュー？がスマホならではですよね。

今後のスマホサイト対応の波に速攻対応できるように

今のうちに、リスト型メニューをいくつかのパターンで作っておくことにしました。

（だいぶ行き当たりばったりのエントリーになってきました。。。）

スマホサイトのデザインで重要になってくるのが、CSS3の活用だと思ってます。

なぜなら、3G回線などでは通信速度が遅いため、ページ全体のデータ量を軽くする必要があるのです。

となると、極力画像使用を抑えることになるのですが、やっぱり見た目にきれいなページにしたいですよね。

そこでCSS3が活躍してくれるのです。

ポイントとなるCSSを載せておきます。

参考になる部分はご活用いただいて、ここはこうしたほうがいいんじゃ？って部分はツッコミおねがいします！

#globalNav li{
	/*リストの基本的なレイアウト*/
	margin:0;
        float:none;
	clear:both;
	width:100%;
	text-align:left;
	padding:0;
	border:1px #4294E6 solid;
	border-bottom:0px;
    　display:block;

       /*グラデーション*/
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#6d95fc),
		to(#374ec4));

        /*テキストにドロップシャドウ*/
	text-shadow:
		0px 1px 1px rgba(0,0,0,1),
		0px -1px 0px rgba(255,255,255,0.3);
　　/*矢印画像の追加*/
　　#globalNav li>a:after{
	　　　content:url(../images/arrowR.png); /*矢印画像URI*/
	　　　font-size:18px;
	　　　font-weight:bold;
	　　　padding-right:10px;
	　　　color:#FFF;
	　　　display:table-cell; /*table-cellにすることで、縦方向の中央寄せを可能に。*/
	　　　vertical-align:middle; /*縦方向の中央寄せ。*/
　　}
}

      <!--globalNav-->
      <div id="globalNav">
        <ul>
          <li><a href="menu1.html" title="メニュー1">メニュー1</a></li>
          <li><a href="menu2.html" title="メニュー2">メニュー2</a></li>
          <li><a href="menu3.html" title="メニュー3">メニュー3</a></li>
          <li><a href="menu4.html" title="メニュー4">メニュー4</a></li>
          <li><a href="menu5.html" title="メニュー5">メニュー5</a></li>
        </ul>
      </div><!--/globalNav-->

/*＜サイトの背景部分＞*/
body{
	margin:0;
	padding:0;
	font-size:12px;

        /*ここでグラデーション*/
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#50e2ff),/*グラデーションの上端の色*/
		to(#ffffff));/*グラデーションの下端の色*/
       
　　/*グラデーションをY方向に繰り返さないようにする*/
	background-repeat:repeat-x;
}

/*＜リストメニュー部分＞*/
/*メニューを画面いっぱいではなく、ちょっと余白付きに*/
#globalNav ul{
	list-style:none;
	display:block;
	padding:10px 10px; /* ここで余白をつける */
}

/*リストの基本的なCSS*/
#globalNav li{
	margin:0;
    float:none;
	clear:both;
	width:100%;
	text-align:left;
	padding:0;
	border:1px #8cf solid;
	border-bottom:0px;
        display:block;
    /*1行ごとのグラデーション*/
    background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#ffffff),
		to(#b5e8ff));
    
	-webkit-box-shadow: /*リスト一行ごとにドロップシャドウ。
　　　　　　　　　　　　　　ULにつければ良さそうだが、ULは角丸してないので*/
		0px 3px 3px rgba(000,000,000,0.1); 
}
/*一番上の行を、左上と右上の角だけ丸くする*/
#globalNav li:first-child{
	-webkit-border-top-left-radius: 8px;
	-webkit-border-top-right-radius: 8px;
}
/*一番下の行を、左下と右下の角だけ丸くする*/
#globalNav li:last-child{
	-webkit-border-bottom-left-radius: 8px;
	-webkit-border-bottom-right-radius: 8px;
	border-bottom:1px #8cf solid;
}

#globalNav li{
         …
        /*ボーダーを5pxで描く*/
	border:5px #F9C solid;
        /*ボーダー分、リストの幅が広がるので、ボーダー込みでサイジングする*/
	-webkit-box-sizing: border-box;   
	…
       /*リスト1行ごとのグラデーション*/
    background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#ffffff), /* 上端の色 */
		color-stop(0.50, #ffffff), /* 途中経過の色1 */
		color-stop(0.50, #fff0f8),　/* 途中経過の色2 */
		color-stop(0.95, #ffd1e7), /* 途中経過の色3 */ 
		to(#ffffff));/* 下端の色 */
}

#globalNav li{
　　　…
	-webkit-box-shadow:
                /*1行ごとにドロップシャドウ（幅いっぱいとってるので見えないですが…） */
		0px 3px 3px rgba(000,000,000,0.1), 
                /*1行ごとのインナーシャドウ */
		inset 0px 0px 3px rgba(255,255,255,0.7); 
}

★登場したCSS3を簡単に解説★

グラデーション

example{
background:-webkit-gradient(
  linear, 
  開始位置, /* 単純に上から下にグラデーションする場合は、left top　でよいでしょう*/
  終了位置, /* 単純に上から下にグラデーションする場合は、left bottom　でよいでしょう*/
  from(開始色), 
  to(終了色), 
  color-stop(追加位置, 色)); /*　今回は、「追加位置」は0〜100の間で指定しています。0〜1.0の間でも良いみたいです*/
}

角丸

example{
	-webkit-border-top-left-radius: 8px; /*左上を指定*/
	-webkit-border-top-right-radius: 8px; /*右上を指定*/
	-webkit-border-bottom-left-radius: 8px;　/*左下を指定*/
	-webkit-border-bottom-right-radius: 8px;　/*右下を指定*/
        /*全ての角を同じピクセル数で指定する場合は、
        -webkit-border-radius:8px;
        と指定することができます。*/
}

ボックスサイジング

example{
       -webkit-box-sizing: border-box; /* border-boxでボーダー幅込みでの、ボックスサイズに。
                                                                   content-boxでpadding と border の幅を含まないボックスサイズとなります。
}

今回は、比較的シンプルなリストメニューでしたが、次回はもうすこし複雑なレイアウトのものを作りたいと思ってます。

ツイートする

Permalink | コメント(6) | トラックバック(1) | 14:56

PCサイトをスマホ対応 CSSテク自己まとめ（１・２回まとめ）

iPhone, スマホサイトTips, CSS3, Android

PCサイトをスマホ対応するという記事を１・２回と続けてみて、意外とボリューム満載になってしまったので、

一旦ここまでのCSSテクについてまとめます。

…
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<!--viewportの指定-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<!--/viewportの指定-->
<!--メディアクエリでPC用・スマホ用CSSを振り分け-->
<link media="only screen and (min-device-width:481px)" href="css/main.css" type="text/css" rel="stylesheet" />
<link media="only screen and (max-device-width:480px)" href="css/imain.css" type="text/css" rel="stylesheet" />
<!--/メディアクエリでPC用・スマホ用CSSを振り分け-->

<link href="css/main.css" type="text/css" rel="stylesheet" />
…

…
#container{
	margin:0 auto;
	/*スマホ向け*/
	width:100%;
	overflow:hidden;
	/*/スマホ向け*/
}
…

…
#globalNav li{
	margin:0;
	/*スマホ向け*/
    　float:none;
	clear:both;
	width:100%;
	text-align:left;
	padding:10px 0 10px 20px;
	/*/スマホ向け*/
	border:1px #999 solid;
	background-color:#CCC;
    display:block;
}
…

    <!--header-->
      <div id="header">
        <div id="logo"><h1><a href="index.html"><img src="images/logo.jpg" alt="スマホ対応サイト制作" /></a></h1></div>
        <div id="headerMain"><img src="images/header_bg.jpg" alt="" /></div>　<!-- ←これがいらなそう。-->
      </div><!--/header-->

#headerMain{
	display:none;
}

    <!--header-->
      <div id="header">
        <div id="logo">
        <h1>
          <a href="index.html">
            <img src="images/logo.jpg" alt="スマホ対応サイト制作" class="logo_pc" /><!--PC時のロゴ　class=logo_pcを指定-->
            <img src="images/logo_i.jpg" alt="スマホ対応サイト制作" class="logo_i" /><!--スマートフォン時のロゴ　class=logo_iを指定-->
            </a>
          </h1>
        </div>
        <div id="headerMain"><img src="images/header_bg.jpg" alt="" /></div>
      </div><!--/header-->

/*↓PCでは不可視にする↓*/
.logo_i{
	display:none;
}
/*↑PCでは不可視にする↑*/

/*↓スマホでは不可視にする↓*/
.logo_pc{
	display:none;
}
/*↑スマホでは不可視にする↑*/

#globalNav li{
	/*↓スマホ向け （第1回 -メニュー編-）↓*/
	margin:0;
    float:none;
	clear:both;
	width:100%;
	text-align:left;
	/*/↑スマホ向け（第1回 -メニュー編-）↑*/
	/*↓スマホ向け （第2回 -画像編-）↓*/
	padding:0;
	border:1px #4294E6 solid;
	border-bottom:0px;
	/*画像どおりのグラデーション
    background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#79b3e6),
		color-stop(0.50, #0066cc),
		color-stop(0.50, #003399),
		color-stop(0.69, #2e63b8),
		to(#4793d1));
	*/
        /*グラデーション*/
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#6d95fc),
		to(#374ec4));
    display:block;
        /*テキストにドロップシャドウ*/
	text-shadow:
		0px 1px 1px rgba(0,0,0,1),
		0px -1px 0px rgba(255,255,255,0.3);
	/*/↑スマホ向け（第2回 -画像編-）↑*/
}

/*aタグをブロック要素に*/
#globalNav li>a{
	display:block;
	width:100%; /*リキッドに*/
	height:auto; /*リキッドに*/
	padding:10px 0; /*paddingを上下に指定することで、少し高さを持たせる*/
	color:#333;
	text-align:left;
	text-decoration:none;
}
/*aタグ内の先頭に、疑似要素を追加。aタグのtitle属性の内容を表示させる */
#globalNav li>a:before{
	content:attr(title); /*aタグのtitle属性を表示*/
	width:100%; /*リキッドに。*/
	font-size:18px;
	font-weight:bold;
	padding-left:10px;
	color:#FFF;
	display:table-cell; /*table-cellにすることで、縦方向の中央寄せを可能に。*/
	vertical-align:middle; /*縦方向の中央寄せ。*/
}

/*矢印画像の追加*/
#globalNav li>a:after{
	content:url(../images/arrowR.png); /*矢印画像URI*/
	font-size:18px;
	font-weight:bold;
	padding-right:10px;
	color:#FFF;
	display:table-cell; /*table-cellにすることで、縦方向の中央寄せを可能に。*/
	vertical-align:middle; /*縦方向の中央寄せ。*/
}

まとめだけでも随分長くなってしまった。。。

ソース書かなきゃいいのかな。

追記：連載のタイトル変えました。この連載の主旨って、「PCサイトをスマホ対応する」っていうことだな〜と気づきました（笑）

iPhoneアプリ×Webサイト開発入門 Objective-C/iPhoneSDK、 HTML/CSS/JavaScriptによる最適プログラミング

• 作者: クリストファー・アレン,株式会社FEYNMAN 正健太朗
• 出版社/メーカー: 日経BP社
• 発売日: 2010/04/15
• メディア: 単行本（ソフトカバー）
• クリック: 95回
• この商品を含むブログ (5件) を見る

ツイートする

Permalink | コメント(5) | トラックバック(0) | 08:11