• Google アナリティクスをjQuerymobile内で使う
• わずか3分で作るCSS3オートスライダー
• Cakephp　PostgreSQLでランダムページング
• jQueryMobile にオリジナルjavascriptを記述する方法

Google アナリティクスをjQuerymobile内で使う

Google アナリティクスをjQuerymobile内で使う

jQuerymobile内部でGoogleアナリティクスを使うにはちょっと工夫が必要のようです。
散々jQuerymobileで独自にJavascriptを書こうとして痛い目見ましたからおそらく普通と書き方違うことは対応する前から気がついていましたが・・・

jQuerymobile専用Google アナリティクスコード

以下がjQuerymobile専用のGoogle アナリティクスコードです。自分のトラッキング IDを入れるを入れてコピペで利用してください。

//set
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxxx-x']);//自分のトラッキング IDを入れる
//async
(function () {
var ga = document.createElement('script'); ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
//data-role='page'が表示されたら
$('[data-role="page"]').live('pageshow', function(){
var u = location.hash.replace('#', '');
u ? _gaq.push(['_trackPageview', u]) : _gaq.push(['_trackPageview']);
});

注意点

一応コピペで使えるのですが、以下の点に注意してjQuerymobile専用のGoogle アナリティクスコードを使って下さい

これでAjax遷移しているjQuerymobileサイト内でも正しくカウントを取ることが出来ます。

ネタ元

わずか3分で作るCSS3オートスライダー

スマートフォンサイトにて、画像をループさせることになり、Javascriptだとやはりスマートフォンでは重かったり、jQuerymobileとでは愛称が悪かったりする問題で、CSS3にてオートスライダーを作ってみました。今回は画像をループさせていますが、テキストでもなんでもOKです。
Javascriptでやるよりも軽くて、簡単なのでスマートフォンサイトではオススメです。

CSS3オートスライダー作成手順

CSS3オートスライダーを作るにはたったこれだけです。

CSS3オートスライダーサンプルコード

こちらにサンプルを記入しておきます。動作の仕組みを細かくコメントアウトで解説しました。
ソースコードコピペでどうぞ。

CSS

* {
	margin: 0;
	padding: 0;
	border: none;
}

/*指定した幅、高さだけ表示*/
#mask {
	width: 239px;
	height: 320px;
	overflow: hidden;/*指定した幅だけ見える*/
	position: relative;
}


ul#photo {
	top: 0;
	left: 0;
	width: 956px;/*アニメーションさせる画像の合計幅*/
	height: 320px;/*写真縦*/
	position: absolute;
}

/*写真を横一列に配置*/
ul#photo li {
	width: 239px;
	height: 320px;
	float: left;
	list-style: none;
	
}

/*アニメーション定義*/
@-webkit-keyframes Slide {
	0% {left: 0;}/*0で始まり・・・*/
	20% {left: 0;}
	25% {left: -239px;}/*20秒の25％、つまり5秒進んだら-239pxずらす*/

	45% {left: -239px;}
	50% {left: -478px;}

	70% {left: -478px;}
	75% {left: -717px;}

	95% {left: -717px;}
	100% {left: 0;}/*20秒の100％、つまり20秒になったら0、初期の場所へ。*/
}
ul#photo {
	-webkit-animation-name: Slide;/*定義したアニメーションの呼び出し*/
	-webkit-animation-duration: 20s;/*アニメーションは『合計』で何秒か*/
	-webkit-animation-iteration-count:infinite;/*『infinite』無制限に繰り替えす*/
}

html

<div>
<div id="mask">
<ul id="photo">
<li id="slide01"><img src="img/musuko1.jpg" width="239" height="320" alt=""></li>
<li id="slide02"><img src="img/musuko2.jpg" width="239" height="320" alt=""></li>
<li id="slide03"><img src="img/musuko3.jpg" width="239" height="320" alt=""></li>
<li id="slide04"><img src="img/musuko4.jpg" width="239" height="320" alt=""></li>
</ul>
</div>
</div>

DEMO画像はアホ息子がひたすらアイス食べている画像です。

Cakephp　PostgreSQLでランダムページング

少し前ですが、Cakephp ランダムな pagenateを実装するという記事を書いたのですが、同じランダムなページングでも、PostgreSQLでは全く同じとはいかないようでちょっと悩んでしまいましたので、メモ的に残しておきたいと思います。
前置きはそれくらいにして、Cakephp ランダムな pagenate　in　PostgreSQLの実装方法です。

結論：Sessionとランダム浮動小数点数、それからseed関数

(オレとお前となんとかかんとかみたいな。)
ポイントはSessionと浮動小数点を使うこと。基本的には以前のMysqlのランダムページングと考え方は一緒ですが、PostgreSQLにはseed関数が容易されていますのでそれを使います。

以上です。Sessionの使い方についてはこちらを参考にしてください
『CakePHP』を使ってみる ～11～ セッションの使い方確認 ざ・わーるど.jp＠はてな

浮動小数点数

浮動小数点数とは、-1から1の間の小数点つきの数字のことです。
今回はこれをランダムで発生させなければなりません。
ランダムな浮動小数点数の発生のさせ方はPHPマニュアルを参考にしました。
PHP: mt_getrandmax – Manual

浮動小数点数をSessionに保存するComponentの作成

浮動小数点数をSessionに保存するComponentを作成します。
前回とほとんど一緒です。ただ浮動小数点数を保存しているだけです。

class SeedComponent extends Object {
 function initialize(&$controller) {
  $this->controller =& $controller;
  }
  function seed($min = 0, $max = 1) {
  if($this->controller->Session->read('seed') == ""){
  
  $int = $min + mt_rand() / mt_getrandmax() * ($max - $min);
  
  $this->controller->Session->write('seed', $int);
  }
  
  $seed = $this->controller->Session->read('seed');
  
  return $seed;
 }
}

Sessionに保存した浮動小数点数を使ってページング処理を実行

$seed = $this->Seed->seed();//浮動小数点数
//PostgreSQL seed
$this->Model->query('select setseed('. $seed .')');
$this->paginate = array(
'conditions'=>$conditions,
'limit'=>20,
'order' => array("RANDOM()"),
);

以上です。
Cakephp1.3はSessionを利用する際はSessionコンポーネントを呼び出すことを忘れないで下さい。
PostgreSQLはseed関数があらかじめ用意されているため、やり方さえ分かっていれば、Mysqlよりもランダムページングは簡単かもしれません。

jQueryMobile にオリジナルjavascriptを記述する方法

jQueryMobile にオリジナルjavascriptを記述する方法

jQueryMobileの記事は久々ですね。
jQueryMobileを使ってスマートフォンサイトを作り始めると、独自でjavascriptを書くケースが出てきます。これは普通のPCサイト作っていたって書くので当然のことですね。

jQueryMobile $(document).ready()が動かない

jQueryプラグインの多くは、もしくは独自で記述をしようとすると$(document).ready()を利用すると思います。。つまり、全てのDOM要素(HTMLとか)が読み込まれてから、指定されたjavascriptを実行するというものです。
ところがどっこい、jQueryMobileは$(document).ready()が動きません。

どのような動きになるか検証してみる

簡単なalertの出力で、実際にどのような動きになるのか検証してみましょう。
スマホでも、PCからでもどちらでも同じ挙動を示すのでお好きなほうで見て下さい。
遷移先と、遷移前、どちらのhead内にalertのjavascriptが入っています。

サンプルイメージ

動きませんね。先にあげた通り、<head>の内容は再読込されないため、遷移先のhtmlにjavaScriptを記述しても実行されません。

jQueryMobileでJavascriptを書くときのポイント

jQueryMobileの落とし穴とも言うべき２つのポイントです。これを踏まえてJavascriptを書いてあげる必要があります。

jQueryMobile pagecreateイベントを使う

ページがDOMに挿入されて、表示されたときに発動します。まさにページ遷移した後にJavascriptを発動したい時にぴったりですね

サンプルコード

これを遷移前と、遷移後、２つのhead内にjavascriptの外部ファイルとして遷移前と遷移後、両方で』読み込んであげます。
$("div[data-role*=’page’]")とは、表示領域全体のことです。jQueryMobileを利用すると、表示領域全体が自働でそのようなrole属性で囲われます。
以下のコードをalert.jsというファイルにして、遷移前、遷移後、どちらにも読み込んであげます。

先に言ったとおり、jQueryMobileはhead内が再読み込みされないので、どのページから読み込まれても大丈夫なように対象のheadタグ内に記述してあげる必要があります。

サンプルイメージ

pagecreateイベントをうまく使えば、より素敵なスマホサイトが作れそうですね。