• 配列の差分を取得するarray_diff()
• GoogleMapsAPI 日本語住所から　携帯用地図
• Cakephp ランダムな pagenateを実装する
• sectionとarticleの決定的な違い
• HTML5マークアップ！よくある勘違い
• UTF8で携帯サイト　auでのformのテキストが文字化ける

配列の差分を取得するarray_diff()

データベースの情報が変更されたかどうかが知りたい。
変更前と、変更後のデータの差を見つけて処理を行うにはどうすればよいかと悩んでいましたが、よい関数を見つけました。

array_diff()で配列の差分を取得

結論は、変更前をsessionに格納し、変更後(postされたほう)の２つをarray_diff()でデータを比べればよい。

$array1 = array('aa','bb','cc','dd','ee','ff','gg');
$array2 = array('aa','cc','ddd','ee','fff','gg');
$hoge = array_diff( $array1 , $array2 );
print_r($hoge);

出力結果は以下。

Array ( [2] => ddd [4] => fff )

このように、差分のみが配列となって結果が返ってきます。

注意点：連想配列は空になる

この便利なarray_diff()ですが、連想配列は差分が取得できないようです。この点だけ注意が必要です。

GoogleMapsAPI 日本語住所から　携帯用地図

GoogleMapsAPIを使って、携帯でも住所から地図画像を出力する方法です。
以前PC用も日本語住所から経度・緯度を取得してGooglemapを表示する方法を紹介しましたが、
今回はそれの携帯バージョンを紹介します。

結論：日本語住所をエンコード、simplexml_load_file

まずはエンコード

$p = urlencode('何か住所を入れる');

次にsimplexml_load_fileを使います。

$xml = simplexml_load_file("http://www.geocoding.jp/api/?q=$p");

これだけで経度、緯度を取得することが出来ました。

$lat　=　$xml->coordinate->lat；//経度
$lng　=　$xml->coordinate->lng；//緯度

取得した経度と緯度を

画像として出力

各パラメータについてはこちらの記事を参考にされるといいかもしれません。
携帯サイトにGoogleマップ画像を住所で表示させる方法　渡辺大祐ブログ

出力例

Googlemapへのリンクも設置

これだけで画像の出力はおしまいなんですが、もっと詳細な検索をしたい人のために、Googlemap携帯用のリンクも設置しておいてあげましょう。
何気にGooglemap携帯用のリンクがどうしても分からずに、けっこう悩んでしまいました。忘れないためにメモメモ。

GoogleMapで表示する

スマートフォンの場合、これだけで写真のようなマップ表示に切り替わるので使い勝手がよいです。

iphone

androidやガラケーも問題なく動作することが確認できました。

補足：GoogleMapsAPIの規約に注意！

多くのブログがこのことにふれていますが、出力される画像は1000/日と決まっています。
小規模なサイトや、アクセスがそれほど携帯から無い場合は気にしなくてもいいのかもしれませんが、注意が必要です。

Cakephp ランダムな pagenateを実装する

Cakephp ランダムな pagenateを実装しようとすると、次のページに送った時や戻るボタンを押した時、その都度randomが実行されて、どうしても理想的なランダムなページング処理が出来ずに悩んでいましたが、今日その悩みをズバリ解決することが出来ました！x

前置きはそれくらいにして、Cakephp ランダムな pagenateの実装方法です。

結論：Sessionと乱数を使う

ポイントはSessionと乱数を使うこと。seedな考え方が必要だったのです。

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

1．乱数を発生させる

 $seed = mt_rand(0,9999);

2．発生させた乱数をSessionに保存

発生させた乱数をSessionに保存します。
Cakephp1.3ではあらかじめSessionコンポートとして呼び出す必要があります。

var $components = array('Session');

Sessionに関する処理は以下。
Sessionを呼び出して、空だったら、新たにSessionを書き込みます。

if($this->Session->read('seed') == ""){
//以下random　seedの処理
$seed = mt_rand(0,9999);
$this->Session->write('seed', $int);
}
$seed = $this->Session->read('seed');

3．Sessionに保存した乱数を使ってページング処理を実行

$this->paginate = array(
'conditions'=>$con,
'order' => array("rand('$seed')"),//エラーにならないよう、外側はダブルクウォーテーション、内側シングル
'limit'=>5,
);

たったこれだけです。

Sessionが無ければ乱数を発生させてそれをSessionに保存する。
Sessionがあればその整数を継続して利用する。

Sessionが有効な間はゼロからランダムになりませんので、乱数を発生させてSessionに保存することが一番大事です。

後は保存したSessionをpagenateのrandの()の中にぶちこんであげるだけです。

一番分かりやすいのは何ページかページを送った後んに戻るボタンを押してみること。
ページを戻しても前に見た時と表示内容に変化がないと思います。

本当に乱数が発生できているかは違うブラウザを2つ立ち上げて確認してみることですね。
それぞれのブラウザが別々の結果を出力出来ていれば成功というわけです。

おまけ:CakePHP以外でランダムページャー

今回はCakephpで実装しましたが、この考え方は例えばPEAR:pagerなどでも実装可能です。
生でSQLを書いてこの処理を実装させるには以下の通り。

order by rand($seed)

ごめんなさい、本当にこれだけです。
ここでもポイントは何らかの形で乱数を必ず一定時間保存するということです。
『ちゃんとしたランダム』を実装してあげるためには、何かで一定時間Sessionを保持してあげるプラグインをかましてあげなければなりません。
発生させた乱数がリロードするごとに変わってしまうのでは、何の意味もないからです。

最後に:ページャー以外でも使ってあげるのがよい

今回のやり方はpagenateのために考えたわけですが、
ランダムって、通常のORDER BY　id DESCやASCに比べると取得時間に大幅な時間がかかります。
だいたい5～8倍くらい通常の引っ張り方に比べて速度に差が出てくるので、
ページング処理以外でもランダムで取得してあげているならぜひ実装するのがオススメです。

ランダムなページング処理ってIDの降順、昇順に並べてページングすることほど多くはないですが、全てのデータを平等に見せたいという意味では有効な手段といえそうです。

sectionとarticleの決定的な違い

具体的にHTML5のマークアップ例に入る前にsectionとarticleの違いについてキチンと説明しておかねばなるまい。
文章構造を示す上では非常に便利でSEOへの期待も高まるこの２つの要素ですが　違いについて悩むケースが多く、また某参考書では明らかに説明が間違っているものもありました。

そこで、今回はITかあさんのブログを例に、sectionとarticleの違いを説明しておきたいと思います。

ITかあさんトップページ

まずはITかあさんトップページの画像のキャプチャをご覧下さい。
(説明しやすくするために一部はしょってあります。)
特にnavや、asideはそれほど悩みませんね。

どれがarticleなのか

どれがarticleなのかが理解できれば、残りはsectionになりますから、先にarticleから考えましょう。
articleとは『それ単体で完結出来る、独立したもの』なのですが　結局『独立している』ってどういうことなのでしょうか？

お知らせ、新着情報はarticleにしろ

多少見解は分かれるかもしれませんが、お知らせや新着情報は全てarticleにしてOKです。
『お知らせや新着』はそれだけで完結していますよね。
あるブロックを読んでおけば、『それがお知らせや新着であることは理解できる』わけです。

つまり、たとえそこにリンクがあったとしても、リンク先を見なくてもそれが何を表しているかが明確に理解出来る
それがarticleなのです。

ではsectionはどうか

新着やお知らせはarticleでることは分かったけれど、残りの『注目記事』『カテゴリーへのリンク』はどうでしょうか？
新着やお知らせ同様、『注目記事』『カテゴリーへのリンク』は、そこを見ただけで一体どんな記事が書いてあるかはリンク先を見てみないことには分かりません。

それ単体では何を表しているか分からない、リンク先を見て何があるか初めて分かる、
これがsectionなのです。

Twitterってasideじゃないの？

あえてここではTwitterをasideにしませんでした。解説書によっては『Twitterはasideにする』と書いてありますが、それはTwitterの使い方によってsectionなのかarticleなのかasideなのかが分かれます。

例えばブログに関すること、記事の補足をメインにツイートしていればそれはsectionでしょうし、記事の新着ばかりをツイートすればarticleでしょうし、ブログとは全く関係ないことを多くツイートしていればasideになるでしょう。

特定のサイト専用のツイッターであれば、私は必ずしもasideにしてあげる必要はないと思います。
むしろ、特定のサイト専用のTwitterって新着やお知らせばかりをツイートしているように思えますから、articleが適切なのではないかと思います。

ちなみにITかあさんのTwitterはブログとは関係ないツイートが大半ですからasideになります。

ITかあさんsectionとarticleは・・・

と、いうわけでITかあさんのトップページは下の画像のようにsectionとarticleが分けることが出来たわけです。

ブログの記事ページはどうなるか

『なんだ、articleってsectionに比べるとほとんど出現しないんだ。』
と思ったそこのあなた！(そう、そこのあなた！)
これはトップページだとそうなるわけですが、ブログの記事ページになると全然違います。
下に記事のページのキャプチャを用意しました。オレンジ色になっているところはすべてarticleです。

なぜブログの記事部分は全てarticleになるのか

人によってはdivタグでマークアップするかもしれませんが、記事部分はarticleかsectionのどちらかにするとすればarticleになります。
articleは『単体で独立したもの』ですから、ブログの一記事はその記事だけで単体で存在することができるブロックですよね。外部リンクはあるかもしれませんが、
リンク先を見なくても何であるかは記事を読めば分かることです。

コメント全体はarticle

コメント部分は私的にはどっちでもいいと思いますし、divマークアップでもいいと思いますがあえて言うならコメント全体はarticleでいきます。
なぜなら　コメントのブロックは、記事に対するコメントであることが一目瞭然で、それ単独で意味が伝わるからです。

HTML5マークアップ！よくある勘違い

週末自分の完全趣味サイトを生まれて初めてゼロからHTML5 でマークアップをしてみました。
HTML5自体はずっと以前からちょこちょこ触っていたものの、実際実務レベルで使いこなしたことはなかったのでとてもいい勉強になりました。
今回はそのHTML5 マークアップについてまとめていきたいと思います。
なお、HTML5自体はまだ正確に勧告が出されていないので(２０１４年勧告予定)、これが絶対正しいというマークアップはまだありません。

今回は自分なりに色々調べたり、参考書を読んだり、大手国内サイトのHTML5 マークアップされているものを参考にまとめたもので、動作環境について保証はしませんのであしからず。

マークアップをHTML5ですることのメリット

HTML5 のAPIやCanvasについてはプログラマーが受ける恩恵であってマークアッパーには関係があまりないですね。
HTML5 マークアップのメリットは『シンプルになり、文章構造がより明確にあらわすこと』ではないでしょうか？

マークアップがシンプルに

マークアップがシンプルになればそれだけ貴重なバイト数を節約でき、セレクタもシンプルになるのでCSSの高速化も期待できます。
日々マシンは進化するものの、タブレットPCやスマートフォンの普及につれて、『サイトを軽く、早くする』ことが求められている昨今、HTML5 はよい選択だと思います。

文章構造が明確化

新しく追加されたプロパティでは、文章構造をより明確に出来るものが多くあり、SEOにも期待が高まります。一部見解ではYahooに有効とありますが、定かではありません・・・

HTML5を使う際の注意点

HTML5 での注意点はIEへのサポートが挙げられます。またCanvasには多くのブラウザがまだ対応していませんので、これらを回避するには次に紹介しているようなJavascriptを別途サーバーに設置してあげる必要があります。

HTML5実務レベルですぐ使えるタグ、Javascript

HTML5ではたくさん追加になったタグがありますが、すぐ実務レベルで使えるものはそう多くはありません。

viewport(meta)

viewportとはメタタグの一つ。表示領域のサイズを指定するプロパティ。
下記のようにすると、スマホでは320pxで表示され(スマホの種類にもよるかもしれないが)、
何も指定しなければ980pxにてレンダリング。

ちなみに日本語appleでは下記のようになっていました。

viewportについてより詳しく知りたい方はこちら

html5.js

HTML5でマークアップにチャレンジした人なら知らない人はいないかもしれなhtml5.js。HTML5非対応ブラウザではCSSのhtml5のセレクタがうまくいきませんが、html5.jsを読み込めば問題が解決できます。実装したところ、IE6 でも問題なくhtml5にCSSをあてることが出来ました。

canvas.js

HTML5の描画オブジェクト。完璧に再現することは不可能ですが、canvas.jsを読み込むことである程度描画を再現することが可能です。関連項目として
『HTML5のCanvas図形をクリッカブルにするjQueryプラグインClickableCanvas』もさらっと読んでおくといいかもしれません。

header,footer

これが使ってあるだけでhtml5感が出ますね。
注意点として、これらはinline要素のような動きをしますので、直接これらにスタイル当てたい場合はdisplay:blockしてあげる必要があります。

header{
display:block;
}

nav

ナビゲーションをあらわすタグです。下記のように、ナビゲーション全体を囲ってあげます。
何回使っても勧告には問題なさそうですが、中心となるようなナビゲーションに使うのが普通なようで、よくあるフッターのリンク群に使うのは間違いのようです。

sectionとarticleとaside

文章構造を明確化するのに使えそうなタグです。
なぜ見出しを別けたかと言うと、非常に間違えやすく、とても重要なタグだからです。

section

コンテンツをグループ化していくもの。sectionはsection同士で入れ子にすることが出来、sectionを使ったら、見出しタグを必ず使うことが必須です。
各secrionそれぞれにh1タグを使うことも可能です。
可能と言うより、１つのsectionがあれば、そのsectionに対する一番大きな見出しが必要になるわけなので、sectionの中の見出しがいきなりh2タグから始まるのはおかしいように思えます。
具体的な使用例としては

html5.jp　『section 要素』より

article

某参考書にはarticleとは特別なsectionであると解説があったのですが、そうと言えばそうだし、違うと言えば違うかなと。articleとsectionの一番の違いはarticleはh1タグなどの見出しが必須でないこと。必須でないだけで、じゃんじゃん使って大丈夫です。

文章の前後関係で、サイトに関係ないわけでは無いんだけれど、asideみたく完全に独立させるには気がひける・・・

例えばブログのコメント一覧や、引用語句とかはそれに該当するのではないかと。
(下記にまんまその通り書いてありますね・・・)

html5.jp　『article要素』より

aside

これはバナーや外部リンクを示すときに使えそうです。実際に記事とは無関係で独立しているものはasideで囲ってあげるのがベストです。
個人的にはこのasideはサイト内に表示されているバナー関連をメインに使っていこうと思います。

個人的にはrole属性がお気に入り

role属性が私は痛くお気に入り。ずっと誤解釈をしていたのですが、role属性はhtml4から存在し、html5から追加されたわけではないようです。
roleはあらかじめ属性値が決まっており、私はこれを『名前』と勘違いしていて、自分で好き勝手つけていいもんだと思ってました。

• application
• banner・・・バナー
• complementary・・・補足
• contentinfo
• main・・・メイン
• navigation・・・ナビゲーション
• search・・・ナビゲーション

(ちらっと調べても出てこなかったので、今度調べておきます)

roleの具体的な使用例

xhtmlコーディングのときなどよくメインコンテンツを下記のように表していました。

しかし、この形では、他のdiv要素と位置関係は同じで、コイツが『このページの一番メインコンテンツですよ！エライdiv要素なんですよ』と表すことが出来ませんでした。
そこでroleの登場です。

これだけです。たったこれだけでいつものdivがグッと文章構造が明確に出来ました。

UTF8で携帯サイト　auでのformのテキストが文字化ける

UTF-8にて携帯サイトを作って、フリーワード検索なるものを作っていたところ、auでのみ、テキストのフォームデータのみが文字化けしてしまうことが判明しました。

UTF8環境の携帯ページのformはmb_convert_encodingで変換

getでフォームの内容をいくら渡しても、auでは文字化けをしてしまいます。

<form method="get" action="/m/searches/free_searches/">

<input type="text" size="10" name="data">

<input type="submit" value="検索">

</form>

このように、UTF8として、変換をかけてあげればよかったのですね。

$this->params['url']['data'] = htmlspecialchars(mb_convert_encoding($this->params['url']['data'],"UTF-8", "UTF-8,SJIS,EUC-JP"));	

ちなみに今回の現象はauのガラケーのみで確認できました。firemobileシュミレータ
ではそのような現象は確認できなかったので、やはり実機でのデバックは大事だな～と思いました。

たたみラボ