スマートフォンで横向きにすると拡大されるのを回避するには…

Posted by specterant on 2012.05.31

スマートフォンでWebサイトを閲覧するとき、横向きにしたりすることがあると思います。
そんな時、ページが拡大されて表示されることがあります。
あ、ちなみにiPhoneで起きるんですが、これを回避するにはmeta要素に下記を追加します。

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
これで、画面幅にフィットしますが、maximum-scale=1を指定するとページの拡大・縮小ができなくなります。
どちらかを優先させるかと選択を迫られるのですが、どちらも必須にしたいなぁ〜って時は…
はい!こちらのiOS-Orientationchange-Fixという素晴らしいものがあります。
これを読み込むと問題を解決してくれます。
<script src="./ios-orientationchange-fix.js"></script>
ありがとうございます!
Thank you!

A Fix for the iOS Orientationchange Zoom Bug | Filament Group, Inc., Boston, MA

No Comments

jQuery Mobileを触ってみました

Posted by specterant on 2012.05.30

スマートフォンサイトの構築も出来ないとな〜って思い、
jQuery Mobileを触ってみました。

まだ、ほんの少しだけ触ったので、大それた事は言えないのですが、便利だなぁ〜って思いました。
とりあえず、実装したいのであれば、かなり便利だと思います。

ただ、オリジナルのデザインにするのであれば、
色々とCSSを弄らないとダメなので、慣れるまでは時間がかかりそうなだなぁ〜と思いました。

で、とりあえず私用メモします。

まずは、HTMLです。
divタグ(通常)の属性にdata-role=”要素名”を追加し、それぞれ役割を決めます。
data-role属性は省略することができるのでが、複数ページを作成する場合はdata-role=”page”は必須になります。
あと、jquery.mobile.cssとimagesフォルダ(jQuery Mobileに入っていたもの)は同階層にしといた方が楽ちんだと思います。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8" />
	<title>jQuery Mobile Template</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" /> 
	<link rel="stylesheet" href="./jquery.mobile.css" />
	<script src="./jquery.js"></script>
	<script src="./jquery.mobile.init.js"></script>
	<script src="./jquery.mobile.js"></script>
</head>
<body>
<!--+++++++++++++++++++++++++++++++++++++++++++++ [ contents area start ] +++++++++++++++++++++++++++++++++++++++++++++-->
<div data-role="page">
	<header data-role="header">
		<h1>ヘッダーエリア</h1>
	</header>

	<div data-role="content">
		<h2>コンテンツエリア</h2>
		<p>テキスト</p>
	</div>

	<footer data-role="footer">
		<small>&amp;nbsp;&amp;copy;&amp;nbsp;コピーライト</small>
	</footer>
</div>
<!--+++++++++++++++++++++++++++++++++++++++++++++ [ //contents area end ] +++++++++++++++++++++++++++++++++++++++++++++-->
</body>
</html>

続いて、jQuery Mobileの初期設定用のJavaScriptを読み込む。
別に外部でなくてもいいんですが、jquery.mobile.jsを読み込む前に読み込ませないとダメみたいです。
<script src="./jquery.mobile.init.js"></script>

そして中身です。
諸々、英語なので日本語化したり、ページ遷移のアニメーションを統一させたい時に設定します。
ちなみに、これは必須ではないです。
$(document).bind('mobileinit', function(){
	$.mobile.page.prototype.options.addBackBtn = true; //戻るボタンを表示
	$.mobile.defaultPageTransition = "fade"; //ページ遷移のアニメーション
	$.mobile.loadingMessage = '読み込み中';
	$.mobile.pageLoadErrorMessage = '読み込みに失敗しました';
	$.mobile.dialog.prototype.options.closeBtnText = '閉じる';
	$.mobile.selectmenu.prototype.options.closeText= '閉じる';
	$.mobile.listview.prototype.options.filterPlaceholder = '検索文字列';
	$.mobile.page.prototype.options.backBtnText = '戻る';
});
とまぁ〜こんな感じです。
今後、いろいろ触ってみます。


下記が参考にさせていただいたサイトです。

参考にさせていただいたサイト
ASCII.jp:西畑一馬のjQuery Mobileデザイン入門
jQuery Mobile 1.1.0 日本語リファレンス

No Comments

JavaScriptでブラウザ判定

Posted by specterant on 2012.04.22

はい。今度はブラウザ判定です。
またまた、私用でコピペできるようにメモです。

var ua = navigator.userAgent;
var av = navigator.appVersion.toLowerCase();
var ie = ua.indexOf("MSIE") != -1; //Internet Explorer
var ie6 = av.indexOf("msie 6.") != -1; //Internet Explorer 6
var ie7 = av.indexOf("msie 7.") != -1; //Internet Explorer 7
var ie8 = av.indexOf("msie 8.") != -1; //Internet Explorer 8
var ie9 = av.indexOf("msie 9.") != -1; //Internet Explorer 9
var firefox = ua.indexOf("Firefox") != -1; //Firefox
var safari = ua.indexOf("Safari") != -1 && ua.indexOf("Chrome") == -1; //Safari
var chrome = ua.indexOf("Chrome") != -1; //Google Chrome
var opera = ua.indexOf("Opera") != -1; //Opera

(function(){
	if (ie) {
		alert("Internet Explorer");
		if (ie6) {
			alert("Internet Explorer 6");
		}
		else if (ie7) {
			alert("Internet Explorer 7");
		}
		else if (ie8) {
			alert("Internet Explorer 8");
		}
		else if (ie9) {
			alert("Internet Explorer 9");
		}
	}
	else if (firefox) {
		alert("Firefox");
	}
	else if (safari) {
		alert("Safari");
	}
	else if (chrome) {
		alert("Google Chrome");
	}
	else if (opera) {
		alert("Opera");
	}
}).call(this);
詳しくは、下記の参考にさせていただいたサイトを見ていただけたらと…はい。

参考にさせていただいたサイト
ブラウザ判別 | JavaScript capsule
JavaScript とかによるブラウザ判定方法のまとめ – etc9

No Comments

JavaScriptでOS判定

Posted by specterant on 2012.04.20

はい。タイトル通りです。
私用でコピペできるようにメモです。

ちなみに、あんぽんたん様の「JavaScript サンプル集 & HTMLの基礎」の「OSの判別」を参考にさせていただいたというか、引用させていただきます。

とりあえず、Windows 7、Vista、XPとMac OSの判別を。

var ua = navigator.userAgent;
var win7 = ua.match(/Win(dows )?NT 6\.1/); //Windows 7
var winVist = ua.match(/Win(dows )?NT 6\.0/); //Windows Vista
var winXp = ua.match(/Win(dows )?(NT 5\.1|XP)/); //Windows XP
var macOs = ua.match(/Mac|PPC/); //Mac OS

(function(){
	if (win7) {
		alert("Windows 7");
	}
	else if (winVist) {
		alert("Windows Vista");
	}
	else if (winXp) {
		alert("Windows XP");
	}
	else if (macOs) {
		alert("Mac OS");
	}
}).call(this);

No Comments

皆様ご存知のclearfixについて

Posted by specterant on 2012.04.19

clearfixは、floatした際にその要素がはみ出したり、
背景を指定しているのに表示されなかったりと、
色々問題を解決してくれる優れもの。

で、私は今まで旧タイプ?のを使用していたのですが、
旧タイプ?は、Mac IEやNetScape対策のもがあったらしく
結構長いコードになっていました。

そんな訳で、最近Mac IEやNetScapeに対応しなくても
いいんでないかい…と思い、コードが短くなるなら短い方がええやん…ってことで、
これからは、下記のを使用して行きますよってことでメモ。

.clearfix:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
}
.clearfix {
	*zoom: 1;
	/*「*zoom: 1」部分は「/zoom: 1」でもOK!*/
}
詳しくは、下記の参考にさせていただいたサイトを見ていただけたらと…はい。

参考にさせていただいたサイト
いまどき ? いまさら ? clear fix のコード | ヨモツネット
clearfixを検証する – Kamurogi Blog

No Comments

if文の省略について

Posted by specterant on 2012.03.14

ActionScriptやJavaScriptなど組むとき、if文を使用することが多々あります。
そんなif文は省略して書くことができるのでメモです。

【条件が1つの場合、1行で記述できます。】

/********************************
//「if文省略(条件が1つ)」記述例
********************************/
var hogeNum = 3;

//省略無し ------------------------------------------- //
if (hogeNum == 3) {
	alert("【省略無し】hogeNumは「3」です!");
}

//省略あり ------------------------------------------- //
if (hogeNum == 3) alert("【省略あり】hogeNumは「3」です!");

// [結果] ------------------------------------------- //
//【省略無し】hogeNumは「3」です!
//【省略あり】hogeNumは「3」です!
【条件がtrueかfalseかの場合、論理和演算子を使用すれば1行で記述できます。】
/********************************
//「if文省略(論理和演算子)」記述例
********************************/
var hogeStr = "何らかの文字が入っとる。";
var traceStr;

//省略無し ------------------------------------------- //
if (hogeStr) {
	traceStr = hogeStr;
	alert("【省略無し】" + traceStr);
}
else {
	traceStr = "hogeStrは「文字が入力されておりまへん」";
	alert("【省略無し】" + traceStr);
}

//省略あり ------------------------------------------- //
traceStr = hogeStr || "hogeStrは「文字が入力されておりまへん」";
alert("【省略あり】" + traceStr);

// [結果] ------------------------------------------- //
//【省略無し】何らかの文字が入っとる。
//【省略あり】何らかの文字が入っとる。
【「条件 ? true時の処理 : false時の処理」という感じで、条件演算子を使用すれば1行で記述できます。】
var hogeNum = 30;
var traceStr;

//省略無し ------------------------------------------- //
if (hogeNum > 10) {
	alert("【省略無し】hogeNumは「10」より大きいぞ!");
}
else {
	alert("【省略無し】hogeNumは「10」より小さいです…");
}

//省略あり ------------------------------------------- //
traceStr = (hogeNum > 10) ? "hogeNumは「10」より大きいぞ!" : "hogeNumは「10」より小さいです…";
alert("【省略あり】" + traceStr);

// [結果] ------------------------------------------- //
//【省略無し】hogeNumは「10」より大きいぞ!
//【省略あり】hogeNumは「10」より大きいぞ!
そんな訳で、単純な条件であれば省略を利用して、複雑なものはswitch-case文も入れて検討すればいいのかなぁ。

No Comments

クロスドメインからRSSを取得してみる

Posted by specterant on 2012.03.01

クロスドメインからRSSを取得する方法についてメモ。

  1. Google AJAX Feed APIを読み込む
  2. 読み込みたいRSSのURLを指定
  3. RSSの情報を取得
  4. 取得した情報を表示

まぁ〜、流れとしてはこんな感じです。
今は、APIキーの取得をしなくてもいいっぽい。

そんな訳で、下記が記述例。
まず、HTMLにscript要素でGoogle AJAX Feed APIを読み込む。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
で、JavaScriptでゴニョゴニョと諸々設定する。
//Google AJAX Feed APIを読み込む
google.load("feeds", "1");

//フィード情報取得
$(function(){
	//RSS情報を格納するタグ設定
	var siteTitle = $('body').append('<h1></h1>');
	var rssBlock = $('body').append('<div></div>');
	
	//読み込むRSSファイルの設定
	var feed = new google.feeds.Feed("読み込むRSSファイルのURL");
	
	//エントリー数を設定(省略可)※初期値は4
	feed.setNumEntries(10); //10件表示
	
	//XMLファイルの情報を取得
	feed.load(function(result) {
		//XML情報取得
		var xmlentries = result.feed.entries;
		
		//サイトタイトル取得・表示
		var blogTitle = result.feed.title;
		$("h1").text(blogTitle);
		
		//XML情報が無かった場合
		if (xmlentries.length < 1) {
			$('div', rssBlock).append('<p>記事がありません。</p>');
			return false;
		}
		
		//各エントリーを表示
		$(xmlentries).each(function() {
			var titleTxt = this.title; //エントリータイトル
			var dataTxt = dateSetFunc(this.publishedDate); //エントリーの日付
			var linkUrl = this.link; //エントリーのリンク
			var description = this.contentSnippet; //120文字未満のcontent(HTMLタグが外された状態)
			$('div', rssBlock).append($('<p>' + dataTxt + '<br />' + '<a href="' + linkUrl + '" target="_blank">' + titleTxt + '</a><br />' + description + '</p>'));
		});
	});
	
	function dateSetFunc(str)
	{
	    var objDate = new Date(str);
	    var y = objDate.getFullYear();
	    var m = twoDigit(objDate.getMonth() + 1);
	    var d = twoDigit(objDate.getDate());
	    var ymd = y + "." + m + "." + d;
	    str = ymd;
	    return str;
	}
	
	function twoDigit(d)
	{
		d = "0" + d;
	    d2 = d.substr(d.length - 2, 2);
	    return d2;
	}
});
とまぁ〜こんな感じで実装すれば、今度こそブログサービスとかのRSSを取得できます。
覚えてね…オレ。

No Comments

XMLをjQueryで取得してみる

Posted by specterant on 2012.02.25

jQueryでXMLデータの読み込みのお勉強。
とりあえず、このブログのRSSを取得して表示してみることに。

取得してみると日付が「Tue, 07 Feb 2012 04:52:55 +0000」みたいに表示されてしまう。
気に食わなかったので、Dateオブジェクトでゴニョゴニョして変換しました。

で、下記がその結果です。


ほんでもって、こっちがJavaScriptの記述。

$(function(){
	$.ajax({
		url: "http://log.specterant.com/?feed=rss2",
		type: "GET",
		dataType: "xml",
		success: function(xml)
		{
			$("item", xml).each(function(entryNum) {
				var titleTxt = $("title", this).text();
				var dataTxt = dateSetFunc($("pubDate", this).text());
				var linkUrl = $("link", this).text();
				$("div#rssdata").append($('<p>' + dataTxt + ':' + '<a href="' + linkUrl + '" target="_blank">' + titleTxt + '</a></p>'));
			});
		},
		error: function()
		{
			$('div#rssdata').append('XMLの読み込みが出来ませんでした。');
		}
	});
	
	
	function dateSetFunc(str)
	{
		var objDate = new Date(str);
		var y = objDate.getFullYear();
		var m = twoDigit(objDate.getMonth() + 1);
		var d = twoDigit(objDate.getDate());
		var ymd = y + "." + m + "." + d;
		str = ymd;
		return str;
	}
	
	function twoDigit(d)
	{
		d = "0" + d;
		d2 = d.substr(d.length - 2, 2);
		return d2;
	}
});
ブログサービスとかのRSSを取得する時に便利かもってことでメモでした。

【2012.02.28追記】
ブログサービスとかのRSSを取得する時に便利かもって書いたけど、
クロスドメインから取得することになるから、そこんとこ処理しないとだめやね…。
今回記述したのは、同一ドメイン内でしか使えんから…。
近いうちにクロスドメインから取得してみますです。

No Comments

インクリメントとデクリメント

Posted by specterant on 2012.02.07

ActionScriptやJavaScriptなど組むとき、i++や++iのような演算子を使用することがあります。
++(インクリメント)は、1を足して、–(デクリメント)は、1を引きます。

しかし、++や–をオペランド(演算の対象値や変数)の前にするか後にするかで、処理の順番が変わってきます。

/********************************
//前にした場合
********************************/
var i = 10;
var a = ++i * 2;

alert(i); //【結果】11
alert(a); //【結果】22
 
 
/********************************
//後にした場合
********************************/
var i = 10;
var a = i++ * 2;

alert(i); //【結果】11
alert(a); //【結果】20
前にした場合、iに1を足した後に、2を掛けている。
後にした場合は、iに1を足す前に、2を掛けている。
ということになるのですよ!オレ!

ちなみに、–(デクリメント)は、足すのではなく引くに変わるだけで同じ処理をします。
そんな訳で、物覚えが悪いのでメモしたっちゃ。

No Comments

HTML内にJavaScriptを記述する方法

Posted by specterant on 2012.02.04

HTML/XHTML内に記述する場合、<script>〜</script>のようにしますが、<script>タグが対応していないブラウザなどあるようです。
一番は、外部にするのがベストだと思うのですが、そうもいかないこともあるので、下記のように記述するようにした方がいいぜってことでメモ。

/***************************************
//HTMLの場合
***************************************/
<script type="text/javascript">
<!-- 
	//ここに記述。
-->
</script>
 
 
/***************************************
//XHTMLの場合
***************************************/
<script type="text/javascript">
//<![CDATA[
	//ここに記述。
//]]>
</script>
 
 
/***************************************
//HTML5の場合
***************************************/
<script>
	//ここに記述。
</script>
 
 
/***************************************
//最新ブラウザではなく古いブラウザの場合
//language属性も記述した方がいいみたい。
***************************************/
<script language="javascript" type="text/javascript">
<!-- 
	//ここに記述。
-->
</script>

No Comments