伸縮する画像をスマホで表示

画像を16個並べた状態で、綺麗に伸縮するソースを書くのに手こずったのでメモメモ。
結局tableが一番美しいな。あんまりレイアウトに使うの良くないのだけど。
cssのdisplay:tableうんちゃら;でもいいのかもしれないが、html5のブロック要素まわりの改変がまだよくわからないので、避けておいている。


		<div class="div_Wrap clearfix">
			<table id="photoAllWrap" cellpadding="0" cellspacing="0">
				<tr>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
				</tr>
				<tr>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
				</tr>
				<tr>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
				</tr>
				<tr>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
				</tr>
			</table>
		</div>

#mainWrap .div_Wrap {
	width:94%;
	max-width:600px;
	margin:auto auto 30px auto;
}

#mainWrap #photoAllWrap {
	width:94%;
	margin:auto auto auto;
}

#mainWrap #photoAllWrap tr td{
	width:25%;
	padding:2px;
	background-color:#ffffff;
}

#mainWrap #photoAllWrap img {
	width:100%;
	border:2px #999999 solid;
}

スマホで dl dt dd を横並びに

スマートフォンではこれでOKなことを確認しています。
PCでは、古いブラウザでバグる、かも。

#allWrap{
	width:100%;
	background:#ffffff;
}

#allWrap dl{
	width:88.4%;
	font-size:77%;
	padding:10px 0 20px;
	margin:auto;
}

#allWrap dl dt{
	float:left;
	width:15%;/*dlに入れたい文字全体の横幅 em指定でもいいかもしれない*/
	padding:0;
	clear:both;
	font-weight:bold;/*お好みで*/
}

#allWrap dl dd{
	margin-left:15%;/*dlに入れたい文字全体の横幅 em指定でもいいかもしれない*/
	padding:0 0 5px 10%;
	width:85%;/*全体の横幅から、dlとpaddingの値を足した値を引いたもの*/	
}

スマホでアンカーリンクを有効にするには

スマートフォンでは、リンク先へのアンカーリンクが無効になることが多い。
普通のアンカーリンクも然り。
挙動を見る限り、メニューバーの表示を見えないように、読み込み後にスライドする機能が悪さをしているようだ。
試しに、アンカーリンクをスライドするjavascriptを使ってみた結果、アンカーリンクが有効になった!
iOS6とAndroid2.2で確認。
使わせていただいたスクリプトはこちら。

[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3
http://coliss.com/articles/build-websites/operation/javascript/296.html

あと、画像のサイズも指定できるならした方がいいみたい。(画像でheight算出させてる時は面倒だけど)

iphone5 アンカーリンクに気をつけろ!
http://sp.vitalify.jp/archives/?p=1082

動画について。

■動画の形式について

H.264(mp4)と Ogg Theora(ogv)を抑えておけば全ブラウザで表示できる。
Google等によるWebM(webm)押しの状況を見ているとやはり三つ対応しておくのが無難かもしれない。

参考
http://www.aoharu-b.com/cgi/sk/2011/09/html55video.html

その際、MIMEタイプの記述も忘れずに。

■記述方法について

最新ブラウザではvideoタグが使えるが、まだまだ対応していないブラウザも多い。(IE8以前など)
プラグインを使い、videoタグに対応しないブラウザではflashで再生させる仕様にしたほうがいい。

mediaelementjs
http://mediaelementjs.com/

日本語での紹介いろいろ
http://blog.alt-scape.com/archives/415
http://news.mynavi.jp/articles/2010/09/28/html5-video-and-mediaelementjs/index.html
http://www.inazumatv.com/contents/archives/6181
http://www.advertimes.com/adobata/article/7281/tadashiku.jp/2012/05/14/html5-video%E3%82%BF%E3%82%B0%E3%82%92%E6%B4%BB%E3%81%8B%E3%81%97%E3%81%9F%E3%80%81%E3%83%95%E3%83%AB%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%81%AE%E5%8B%95%E7%94%BB%E5%86%8D%E7%94%9F%E3%82%B5/

これを使えば、mp4しか用意していなくても多くのブラウザでの再生が可能になる。
以下記述例

<video id="movie" width="410" height="270" poster="img/movie_thumb_big.png" preload="auto" controls="controls">
<source src="movie/cm30pc.mp4" type='video/mp4'>
<!-- Flash fallback for non-HTML5 browsers without JavaScript -->
<object width="410" height="270" type="application/x-shockwave-flash" data="build/flashmediaelement.swf">
	<param name="movie" value="build/flashmediaelement.swf" />
	<param name="flashvars" value="controls=true&poster=img/movie_thumb_big.png&file=movie/cm30pc.mp4" />
	<!-- Image as a last resort -->
	<img src="img/movie_thumb_big.png" width="410" height="270" title="No video playback capabilities" />
</object>

<script>
	// using jQuery
	$('video').mediaelementplayer({
		// useful for <audio> player loops
		features: ['playpause','progress','volume','postroll']
	});
</script>

■テストブラウザ(Windws7にて)
IE6(IEtester)>>Flashでの再生OK
IE7,8 (開発者ツール)>>Flashでの再生OK
IE9>>videoタグでの再生OK
firefox(18.0.2)>>videoタグでの再生OK
chorome(24.0.1312.57 m)>>videoタグでの再生OK
safari(5.1.7)videoタグでの再生OK

■不都合?
IE9の一部の環境で不都合報告がある。大丈夫かな。
http://d.hatena.ne.jp/ke_takahashi/20120810/1344593098

IEのみに表示変更させるための分岐

IEに対応させるための条件分岐。
こちらを参考に。
http://w3g.jp/blog/tools/js_browser_sniffing
http://twihelp.me/qRdUu
http://www.nk0206.com/life/2009/04/jquery-1.html

(書き直すかも)

		$(function(){
			var _ua = (function(){
				return {
				ltIE6:typeof window.addEventListener == "undefined" && typeof document.documentElement.style.maxHeight == "undefined",
				ltIE7:typeof window.addEventListener == "undefined" && typeof document.querySelectorAll == "undefined",
				ltIE8:typeof window.addEventListener == "undefined" && typeof document.getElementsByClassName == "undefined",
				IE:document.uniqueID,
				Firefox:window.sidebar,
				Opera:window.opera,
				Webkit:!document.uniqueID && !window.opera && !window.sidebar && window.localStorage && typeof window.orientation == "undefined",
				Mobile:typeof window.orientation != "undefined"
				}
			})();
			if(_ua.ltIE6 || _ua.ltIE7 || _ua.ltIE8 || _ua.IE && !_ua.ltIE8){
				$("#divSample").addClass("divSampleIe");
				return false;
			}else{
				return false;
			}
		});

(画像)アップローダー。画面遷移ナシのもの。

画像ローディング画面つき画像アップローダーが作りたくて調べたのでメモ。

Ajax的に画像などのファイルをアップロードする方法
http://havelog.ayumusato.com/develop/javascript/e171-ajax-file-upload.html

シンプルにAjaxファイルアップロードできるjQueryプラグイン
http://d.hatena.ne.jp/lagos_on/20091107/1257610779

Ajax + jQueryで超簡単にファイルをアップロードするためのメモ
http://blog.mudaimemo.com/2009/05/ajaxfileuploadajaxjquery.html

jQueryプラグインまとめ
http://phpspot.org/blog/archives/2010/11/ajaxjquery10.html

使ってみた
http://webdeveloperplus.com/jquery/ajax-multiple-file-upload-form-using-jquery/

パソコンサイトからスマホサイトへの導線2

コチラのページを参考に、Windws Phoneとかにも対応してみました。

http://www.movabletype.jp/blog/mtddc2011_special_04.html

<script type="text/javascript">
	(function(){
		var ua = navigator.userAgent;
		if (localStorage 
			 && !localStorage.getItem("sp_flag") 
			 && (ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('iPad') > 0 || ua.indexOf('Windows Phone') > 0 || ua.indexOf('Symbian') > 0 || ua.indexOf('BlackBerry') > 0 || ua.indexOf('Android') > 0 )) {
			if(confirm('スマートフォン用サイトを開きますか?')) {
				location.href = 'http:/t1200.jp/sp/';
			}else{
				localStorage.setItem("sp_flag",true);
			}
		}
	})();
</script>

パソコンサイトからスマホサイトへの導線1

こんなふうにしてました。

ヘッダー

<script type="text/javascript">
    if (navigator.userAgent.indexOf('iPhone')>0 ||
        navigator.userAgent.indexOf('iPod')>0 ||
        navigator.userAgent.indexOf('iPad')>0 ||
        navigator.userAgent.indexOf('Windows Phone')>0 ||
        navigator.userAgent.indexOf('Symbian')>0 ||
        navigator.userAgent.indexOf('BlackBerry')>0 ||
        navigator.userAgent.indexOf('Android')>0) {
        document.write('<style type="text/css">#spNavi{display:block;}</style>');
    }else {

    }
</script>

ボディの頭に

	<a id="spNavi" href="./sp/">
		スマートフォン版は<br>こちらをタップ
	</a>

IE7や6でもhrを画像にしたい!

いろいろやり方があるのです。

水平線画像を繰り返しにしない場合はコチラを使おうと思う。
http://www.hrtag.info/hrcssimg

水平線画像を繰り返しにする場合は、こちらの方法を参考に。
ちょっとソースが煩雑になるけど。
http://internet.designcross.jp/2010/09/csshr.html