pushStateに対応しているかを調べるスクリプト

Ajaxを使ったページを開発している時に、履歴を残す必要が出てきたのでpushStateに関して色々とテストしてましたが。
どうもスマホでは対応状況がバラバラみたいだということに気がつきました。
そこで、とりあえず手軽にpushStateに対応しているかどうかを確認するためのスクリプトをメモしておきます。

$(document).ready(function() {
 if ('pushState' in history){
  alert(1);
  location.hash = "#good";
 } else {
  alert(2);
  location.hash = "#bad";
 }
});

困ったことに、Androidの標準ブラウザはpushStateに対する対応状態がバラバラみたいです。
今のところ、Ajaxを使いながら履歴を残す処理をするなら、ブラウザ別に処理を分けた方がいいように感じます。

IE7以前のブラウザでJSONを配列に分離する

Ajaxを使ったサイトでは、取得したデータを受け取るときにはJSON形式にして送信元に結果を返すことが多いと思います。
IE8以降や一般的なモダンブラウザならこれといった問題は生じないのですが。
このJSON形式を配列に分離する際に、IE7以前で分離できない問題にハマってしまいました。

問い合わせたJSONを配列にパースする

var obj = JSON.parse(responceText);

Ajaxで問い合わせて返却されたデータが、JSON形式にエンコードした状態でresponceText変数に格納されていると仮定します。
この記述は、IE8以上のIE、一般的なモダンブラウザ（Chrome/Firefox/Safari）で問題なくデータを配列に分離できました。

ところが、この記述はIE7以前ではJavascriptエラーとなってしまいます。
エラーコンソールによると、JSONに関するメソッドがそもそも実装されていない模様。
このままではせっかく返却されたデータを表示することができません。

IE7以前にはjson2.jsを使用する

IE7とJSON.parse()について検索をしていると、こちらのサイトに辿り着きました。

・json2.jsのススメ
・JSON.parse(); に渡す文字列に　/　（バックスラッシュ）　が入っていたら　SyntaxError　に。

両者とも、JSONの分離にevalは使わない方がいいことを説明しているページのようです。
どちらにも登場するのがjson2.jsなのですが。
単純に解釈するなら、json2.jsはJSON.parse()メソッドを利用できないブラウザでJSON.parse()メソッドを利用できるようにするライブラリのようです。
このライブラリは、JSONを扱うページにインポートしておくだけで機能するようです。

<!--[if lte IE 7]>
<script src="json2.js" type="text/javascript"></script>
<![endif]-->

例では条件分岐コメントでIE7以前に適用できるようにしてます。
json2.jsはGitHubでシェアされているようなので、そちらからダウンロードして自分のサーバーにアップロードすることで使えました。

json2.jsダウンロード(GitHub)

配列の並び順を逆順にしたい : array_reverse

配列に格納している日付を順番に並べて一覧にする場合に、たまに最新の日付から並べたいということがあります。
この配列は、生成された段階で日付の昇順に正しく並べられてることを前提とした場合、phpでは関数で簡単に配列の順番を逆順に変更できます。

例

$date = array {
'2012-12-30',
'2012-12-31',
'2013-01-01',
'2013-01-02',
'2013-01-03',
}

例えば、このような順序で日付が配列$dateに格納されている状態があるとします。
この順番は逆順（2013-01-03から順）に並び直したい場合に、複数の方法があると思います。
単純に考えればfor文で逆から回すようにすればいいのですが。
PHPでは、array_reverse関数を使うことで簡単に配列を逆順に変更できます。

$reverse_date = array_reverse($date);

条件式を組んでやるよりも簡単に逆順ソートが可能です。
これは前提として、配列に格納されている値の順番が正しい場合に限ります。
この順番が順不同の場合は、今回の方法では意図した通りにはなりません。

参考

PHP Manual : array_reverse

わからない英字フォントを画像から検索できるサイト

サイト制作で、ちらりとみかけただけのフォントを使ってみたいなんてことがよくあります。
けれど、別にそこまでフォントに詳しいわけじゃないし、ひと目みてパッとフォント名が出てくるわけでもない。
そんな時に使うと便利な、画像から類似したフォントを検索できるサイトがあるようです。

今回使ったサイト

WhatFontis.com
myFonts

今回使ったのはこの２サイト。
WhatFontis.comはページのトップが検索画面になるので、検索対象となる画像を作成してアップロード。検索する文字を決めたら、目視で類似フォントを探します。
myFontsの方は「Find Fonts→What The Fonts」から、フォントの画像検索が利用できます。
見つかるかどうかはサイト次第なので、徹底的に検索するなら１つのサイトにこだわらず複数サイトで試してみた方がいいですね。

ファイルのダウンロードにご注意

なにせ海外サイトなので何があるかわかったものじゃない。
最終的にフォントファイルをダウンロードするわけですが。exeファイルが落ちてくるようなら、うかつに展開しない方がいいでしょう。
自分の場合は、exeが落ちてくるのがわかった後は、判明したフォント名でGoogle検索かけました。
フリーフォントならものによっては簡単に見つかるので、Zipに固められた比較的安全なファイルを手に入れることができます。

実は有料フォントだったという場合もありそう

そうだったら、素直に製作者にお金を払うかあきらめましょう。

AndroidからiPhoneへ電話帳を移行する方法

AppleからiPhone 5が発売されて約２ヶ月。ようやく店頭在庫が復活したようで、予約なしに気軽に買えるようになってきました。
ということで、自分もLTEテザリングを試してみたくてiPhone 5へと機種変更してきたのですが。
早速、電話帳データの移行方法で戸惑いました。

今回の作業環境

移行元: docomo AQUOS PHONE SH-13C(Android 2.3)
移行先: au iPhone 5(iOS6)

状況として、移行元のdocomoの携帯は解約済みです。

Gmail使ってるなら…

Androidから移行するなら、大抵Gmailアカウントがあるはず。
なので、Gmailに電話帳をエクスポートしておけばいいですね。
ただ、個人情報をクラウドに預けるのは自分としては心配点が多いです。
できることなら、Gmailを使わずに電話帳を移行したいところです。

vCardをメールで送信する

Androidの電話帳のオプションメニューに「メールへ添付」という項目があります。
最初なんのことを言ってるのかさっぱりだったのですが、これは電話帳をvCard形式に変換してメールに添付できることをさしてました。
これを直接iPhoneにメール送信すればいいのですが、１個作業があるので一旦PCで受信できるメールアドレスに送ります。
（自分はWifi接続状態でGmailから送信）

vCardの文字コードを編集する

vCardはShift JISでエンコードされてるようです。
ところがiPhoneで呼び出す際にはあらかじめUTF-8へ変換しておく必要があります。
そのため、秀丸などの文字エンコードを変更できるエディタで文字コードをUTF-8へ変換します。

iPhoneでvCardを読み込む

UTF-8へ変換したvCardをメールでiPhoneに送信します。
あとはメールの添付を開くとユーティリティが開くので、画面の指示に従ってインポートすると連絡帳の移行が完了します。

Dropboxはだめでした

最初はDropboxでやろうとしたのですが、こっちでは失敗しました。
ファイル形式の問題だったのかな？

Coda2を使ってみて思ったこと

体験版をちょっと使ってみて、その使い勝手の良さが気に入って思い切ってポチったCoda2について。
今回はCoda2を触ってみた感想を書いてみたいなと思います。

Coda2のお値段

お値段は日本円で8,500円。キャンペー中は6,500円となっていて、2,000円も安い。（このキャンペーンがいつ終了するのかはわからないですが）
HTMLを書くだけならちょっとお高い気はしますが、HTML以外のコードを書くならこの値段は逆に安く感じるのだから不思議なものです。
なお、試用期間のある体験版もあるみたいですよ。
Dreamweaverを単体で買ったり、Creative Cloudeで毎月5,000円課金し続けるよりは圧倒的にお値打ち価格なのは間違いないですね。

豊富なコード入力補完機能

これがCoda2を気に入る要因の一つになったのですが。
Coda2のコード入力補完機能はPHPやJavascriptもカバーしてます。他にも複数の言語に対応しているみたいですね。
これが便利で、最近ではすっかり重宝してるところがあります。
WindowsではDreamweaverを使ってますが、残念ながらDWではそこまではフォローしてくれません。

SSHクライアント完備

Coda2そのものがSSHクライアントとしての役割も果たしてくれます。
FTPができるのは当然としても、SSHクライアントを機能として搭載してるWYSIWYGエディターはなかなかないですね。
VPSや、SSH接続のできるレンタルサーバー（ロリポップ！とか）でなら使える機能ではないかと思います。
ただ、deleteキーの動きが一般的なSSHクライアントと少し違うみたいなので、慣れるまでは少々扱いにくい感じはしました。
まぁ、MacなんだからSSH接続はターミナルでやるのが無難という気がしますが。

２種類のファイルビュー

どのWYSIWYGにもある一般的なツリービューによるファイルビューをこのエディターも備えてます。
それだけなら普通のエディターなのですが。Coda2はパンくずリストのようなファイルビューを備えてます。
このパンくずはリストは、ルート途中のディレクトリをクリックすると、クリックした箇所からのツリービューを吹き出しで表示してくれます。
これが案外便利なんです。
通常なら編集画面からファイルビューに移動して、そこから目的のファイルを探します。
ところがこのパンくずリストでは、パンくずのルート上にあるファイルなら都度ファイルビューを開かなくても、少ないステップで目的のファイルを開くことができます。

複数人で一つのサイトを作業するのには向いていない

Dreamweaverは作業中のファイルをロックすることが可能で、１つのサイトを複数人で作業することが安全にできます。
Coda2はそこは前提ではないようで、どちらかというと個人での作業向きと言えます。
自分がCoda2に対して感じる弱点の一つですね。
逆に言えば、自分しか作業しないなら別にDreamweaverにこだわる必要はないということでもありますが。

ファイルのパーミッション変更は「情報を見る」から

Coda2を使ってて戸惑ったのはファイルのパーミッション変更に関してでした。
たまたまVPSので作業してたので、最初はSSHからログインして変更すればいいくらいに感じてましたが。
パーミッション変更もちゃんと機能として組み込まれてたんですね。
ここだけでもメニューとして独立していればわかりやすかったのに、と思うとちょっと惜しいです。

結論 : 総合的に扱いやすいツールであるということ

ツールとしての完成度は非常に高いと思います。
これでこの値段なのは安いと言っていいでしょうね。（自分はキャンペーン中に購入したので、更にお得感１割増しでした）
さすがに複数人での作業には向いてないですが、そこはそういうものだと思えばいいでしょう。
複数人で作業する必要がある時はDreamweaverを使えばいいんですよ。
なんにしても、おすすめできるツールですよ。

Smartyテンプレートならeven/oddの設定が簡単にできるということ

表を作った時に「奇数列と偶数列で背景の色を変えたい」と思うことがよくあります。
プログラムなら、現在処理中の行数が２で割り切れるかどうかで奇数か偶数かを判定できます。
が、この計算を毎回やるのではちょっと骨がおれます。

Smartyでも同じことは可能なのですが。Smartyの場合はいちいち計算させる必要はないみたいなんです。

{cycle}関数による制御

{cycle}関数は、一つの決まった順番に関数に設定されたvalues値を出力するものです。
例えばこんな感じでしょうか。

{section start=0 loop=10 name=TEST}
<p class="{cycle name=EVEN_ODD values='even,odd'}">リスト</p>
{/section}

.even { background-color: #f00; }
.odd { background-color: #00f; }

上記の例は、奇数の段落の背景を赤色に、偶数の段落の背景を青色の変更してます。
背景色の制御はCSSでおこなってます。
こういう風に設定すれば、table要素だろうとリスト要素だろうと容易に奇数/偶数列の背景色（もっと言えば様々なスタイル）を制御できます。
いちいち奇数と偶数の計算をしなくていい点で便利だと思いますね。

PHP上で計算した方がいい場合もある…気がする

Smartyテンプレート上で処理して楽できるならそれに越したことはないということで。
Ajaxなんかで複雑な処理をしてる場合なんかだと、PHP上で計算した方がいい場合もでてくるんじゃないかと思います。
その辺りは臨機応変に対応すべし、というとこでしょうね。

参考資料:

PHPプロ！-Smartyマニュアル {cycle}