2012年11月27日火曜日

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

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

今回使ったサイト

WhatFontis.com
myFonts

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

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

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

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

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

2012年11月22日木曜日

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

AppleからiPhone 5が発売されて約2ヶ月。ようやく店頭在庫が復活したようで、予約なしに気軽に買えるようになってきました。
ということで、自分も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にメール送信すればいいのですが、1個作業があるので一旦PCで受信できるメールアドレスに送ります。
(自分はWifi接続状態でGmailから送信)

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

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

iPhoneでvCardを読み込む

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

Dropboxはだめでした

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



2012年11月19日月曜日

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接続はターミナルでやるのが無難という気がしますが。

2種類のファイルビュー

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

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

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

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

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

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

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

2012年11月16日金曜日

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

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

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}

2012年11月12日月曜日

mbstringをインストールする

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

mbstringをインストールする

yum search php-mbstring
yum install php-mbstring
yum search php53-mbstring
yum install php53-mbstring

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

2012年11月7日水曜日

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を実行するためには、第1引数にはDateTimeオブジェクト型の日付が入らなくてはいけないみたいです。
文字列(String型)の日付ではdate_formatは返却値を返してくれません。



2012年11月2日金曜日

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

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

ソースコード

<header>
<h1>解像度の大きいデバイスでは<span>1行で表示したい要素</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 />1行で表示したい要素</h1>
<div>ボタン左</div>
<div>ボタン右</div>
</header>
※注:br要素のかっこを2バイト文字で書いてますが、ブログではHTMLタグとして扱われるため回避のためにこのように記述してます
@media screen and (min-width: 360px) {
  header h1 br {
    display: none;
  }
}

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

参考資料

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