配列の並び順を逆順にしたい : 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}

mbstringをインストールする

しょっちゅう忘れることなのでメモ。
今回はPHPのmbstringに関するインストールの話しです。
なお、今回の話しはCentOS5上での操作を想定してます。ディストリビューションによっては方法が異なる場合があります。

mbstringをインストールする

yum search php-mbstring
yum install php-mbstring

yum search php53-mbstring
yum install php53-mbstring

yumを使えばインストールは簡単です。
あとは、PHPのバージョンにあわせて適切な方をインストールすれば大丈夫です。

PHPで手軽に日時を整形する

PHPで日時を生成する方法はいくつかあります。
 date関数やstrftime関数などが代表的な例ですが。
今回はそうした日付を生成する関数を使わずに日時を整形する方法について書き留めます。

 例えばこんなシーンの場合

例として、MySQLで構築されたDBに次の日付の一覧が格納されたフィールドを呼び出した配列があると仮定します。

$date = array(
  "2012-11-06",
  "2012-11-05",
  "2012-11-04",
  "2012-11-03",
  "2012-11-02",
  "2012-11-01"
);

DBから呼び出し配列に格納された日付は全て文字列です。
この文字列で表現された日付を整形します。

$dateの日付を整形する : date_format

単に日付を生成するだけならdate関数で事足ります。
しかし、そうではない場合。例えばDBから日付の文字列を取り出したものを「YYYY年MM月DD日」という形式で整形したいとなると結構ほねがおれます。
正規表現でハイフンを場所に応じて文字を置き換える方法がないわけではないですが、結構冗長な表現になりそうです。
そこで登場するのがdate_format関数になります。

foreach($date as $d) {
  date_create($d);
  echo date_format($d, 'Y年m月d日');
}

ここで気をつけないといけないのは、date_formatをする前にdate_createを実行している点。
文字列で書かれた日付を、DateTimeオブジェクトとして返却してくれるようです。
つまりdate_formatを実行するためには、第１引数にはDateTimeオブジェクト型の日付が入らなくてはいけないみたいです。
文字列(String型)の日付ではdate_formatは返却値を返してくれません。

CSSを利用して任意の箇所に改行を入れる

スマートフォン向けのサイトで、h1要素の両左右にボタンがついているヘッダを作りたいということがあります。
そんな状況の時に、h1の１行が長くてテキストがボタンの後ろに隠れてしまうということがよく起こります。
スマートフォンは縦表示時の横幅のサイズが小さいために起こりがちなことなのですが。
こんな状況の時に使える、任意の位置で改行するための小技です。

ソースコード

<header>
<h1>解像度の大きいデバイスでは<span>１行で表示したい要素</span></h1>
<div>ボタン左</div>
<div>ボタン右</div>
</header>

header h1 span:before {
  content: "\A";
  white-space: pre;
}

ここで重要なのはCSSの方。 h1の子要素spanの前に改行コードを追加してます。
これだけだと見た目上は改行されないので、更に white-space: pre; を記述することで改行を有効にしてます。 （HTMLのpre要素のように扱われるみたいですね）
スクリーンサイズごとに改行されるかどうかを決定したいなら、メディアクエリで特定スクリーンサイズまでは改行するようにしてあげればいいでしょう。

@media screen and (max-width: 320px) {
  header h1 span:before {
    content: "\A";
    white-space: pre;
  }
}

この例では、スクリーンサイズが320px以下（iPhoneなど）では改行するようにしてます。
なお、例ではspan要素を使っているが、この要素がstrongやemでも結果は変わりません。
また、この方法はbr要素を挿入するわけではない点に注意が必要です。

こっちの方がお手軽ではあるんだけど…

<header><br /><h1>解像度の大きいデバイスでは＜br /＞１行で表示したい要素</h1>
<div>ボタン左</div>
<div>ボタン右</div>
</header>

※注：br要素のかっこを２バイト文字で書いてますが、ブログではHTMLタグとして扱われるため回避のためにこのように記述してます

@media screen and (min-width: 360px) {
  header h1 br {
    display: none;
  }
}

方法としてはお手軽。視覚的にもわかりやすいですね。
あとはメディアクエリーなんかで、ある一定以上の解像度になったらbr要素を非表示にでもしてあげれればいいように思います。
ただ、個人的にはあんまり好きじゃないです。
文節の途中で改行がかかってるように見えるし、これだとbr要素でコードを汚してしまっているように見えてしまいます。
例えばh1の文章が変更になったとすると、br要素の位置を変更しなければならなくなるし、ちょっとメンテナンス性が悪くなる気がします。

参考資料

futuremix:CSS の content で改行する方法

Macで秀丸エディターの代わりになるエディターはあるのか？

秀丸をMacでも使いたかった

ここのところMacでコードを書く機会が多く、そのために必要なツールを探す機会がありました。
コードを書く以上、いくつかエディターが必要になったのですが。その途中で、正規表現をテスト、評価するためのエディターが必要になりました。
Windowsで作業していた時は秀丸エディターを使ってましたが、生憎と秀丸エディターはMacには非対応です。
MikuInstallerという、Windows用バイナリをMacで走るようにするコンバーターツールなんてのもあるようですが。自分の環境では残念ながらMikuInstallerを通して秀丸エディタをインストールしたものの起動しない不具合が発生。とても使い物になる状態ではありませんでした。
（この辺は環境依存だと思うので、まずは試してみて結果を見たほうがいいでしょう。）

秀丸 on Macは諦めた

こうなったら秀丸エディターをMacでもという考えは諦めるしかありません。
そこでMacネイティブで使えるエディターはないのか、ということで色々と探してみました。
結果、「mi」というエディターに辿りつきました。

miってどんなエディタ？

miはとてもシンプルなエディタです。
シンプルでありながら、高度な検索・置換機能を持っているようです。更に文字カウントが標準機能として組み込まれてるし、複数ファイルをタブとして開けます。
なんとありがたいことに正規表現による検索にも対応してました。
操作性にも特別な癖がなく、GUI環境で使うエディターとしては申し分ありません。
TEXT形式での出力も問題なくできたので、Windowsに送るためのテキスト作成用としても十分です。
これ一つでMacにおける秀丸の代わりを十分に果たしてくれそうです。

Eclipseで十分なんじゃ…

後から冷静に考えたら、別にEclipseでいいんじゃと思いました。
Eclipseだとcommand+Fで検索ダイアログを呼び出した後、「Reglular expressions」にチェックをすることで正規表現が使えます。
まぁ、ただ正規表現を検証したいというのが主な用途なので、余計なコードがない状態の方がいい場合もあります。
そのために新規ファイルを作成するのもどうかと思うので、別途エディターがあった方がいいと感じたのです。

Emacsは？

EmacsのGUI版は…その…あんまり…

Javaで文字コードを変更する

最近仕事でJavaを触るようになったのですが。
やっぱりというか、文字コードの扱いに引っかかってしまいました。

Javaではいくつか文字コードを変換するための方法があるらしいのですが。
多分これがシンプルでわかりやすいのでは。


String str = "あいうえお";
str = new String(str.getBytes("UTF-8"), "UTF-8");


この場合、String strは変換した文字列。
その次の行で、get Bytesで文字をByte配列に変換。なんかこの時点で文字コードが変換されているらしいけれど、念のためnew Stringの第二引数にも文字コードを指定しているらしい。

ちょっと冗長な気がしなくもないけど、Javaに不慣れな自分にはとりあえず直感的にわかるかな？

Hello World!

はじめてBlogerにブログを作ったのでまずはテスト投稿から。

このブログでは、主にウェブ技術に関するネタ帳だったりテクニックメモだったり。
自分が仕事でウェブ系のスクリプトを書いてるので、それに関することをスクラップしていきます。
それ以外にも、PCや携帯などのデジタル端末に関することにも触れたいな。
多分触れていきそうな内容はこんな感じ。

• HTML
• CSS
• Javascript
• PHP
• Java
• LINUX
• Windows
• Mac
• iPhone
• Android

ブログが長続きするようならそのうち触れる内容が増えていくこともあるんじゃないかと。
基本的に自分のために書くので、触れる内容もてんでバラバラでまとまりはありません。かしこ。

三日坊主にならないようにだけはしたい。