PHPなどのシステムで多言語に対応する際は出力の度に言語で分岐して出力するより、言語ファイルを用意した方が効率的です。
言語ファイルと言えばプログラム業界では「.po」「.mo」といったファイルがよく見られます。（はてなの場合）
これらの言語ファイルをPHPで使うには下記の流れの作業する事になります。
1. 翻訳元の「.pot」ファイルを作成
2. ファイルを元に翻訳元と翻訳後の書かれた「.po」ファイルを作成
3. 「.po」ファイルを「.mo」ファイルにバイナリ変換
4. GetTextというライブラリで翻訳させる。
大規模なシステムだと分業しやすいというメリットはありますが「TASK4BOX」みたいな規模の小さいシステムだと大袈裟なので自前で言語ファイルを作る事にした。
〝コンストラクタで多言語化を〟の続きを読む
久々にOSの占有率とブラウザ占有率を調べてみた。（2015年04月23日現在）
この統計は総セッション数547,694件と大きいサイトを元にしてますが、PC版・スマホ版・ガラケー版に対応したサイトなのでスマホやガラケーに対応していないサイトと比べるとガラケーやスマホのユーザーが多い傾向にあります。
既にスマホ＆タブレットがPCを超えています。BtoBやECサイトではまだPCサイトが全盛ですが、モバイルファースト（PCサイトをモバイル化するのでは無くモバイルサイトからPCサイトを作る方法）がますます増えそうです。
| Windows | 187,809 |
|---|---|
| Macintosh | 13,543 |
| Linux | 1,579 |
| Chrome OS | 53 |
| パソコン計 | 202,984 |
| iOS | 180,745 |
| Android | 138,183 |
| Windows Phone | 52 |
| BlackBerry | 45 |
| Series40 | 6 |
| Firefox OS | 3 |
| SymbianOS | 2 |
| スマホ＆タブレット計 | 319,036 |
| EZweb Device | 11,107 |
| NTT DoCoMo | 6,803 |
| SoftBank | 3,565 |
| Vodafone | 6 |
| Nokia | 2 |
| ガラケー計 | 21,483 |
| Nintendo 3DS | 1,530 |
| Playstation Vita | 887 |
| Nintendo Wii | 880 |
| Playstation 3 | 337 |
| Xbox | 12 |
| Google TV | 1 |
| ゲーム機等 | 3,647 |
| not set | 544 |
今回は珍しくバナー画像の作り方の解説と素材の配布です。
先日、tenhp.comのトップのお問い合わせフォームへのバナーボタンを作りました。
元々、この箇所には（コンバーションを考慮し）簡易フォームをそのまま埋め込む予定でしたが、実装する段階になって場所が狭いため注意書きが書けないとかフォームが小さくなるといった問題があり、結局、公開のリミットに間に合わず、とりあえず「お問い合わせ」と文字リンクを入れて公開し、そのまま5年放置状態だったので、ようやく重い腰をあげた感じです。
〝蔦の絡まる煉瓦の画像〟の続きを読む
ファイル連動型タスク管理TASK4BOXを公開しました。
作業日誌によると2月17日から約2ヶ月の期間に150時間以上作業している。久々に制作時間が長いWEBサービスだ。
〝ファイル連動型タスク管理TASK4BOX〟の続きを読む
首相が通ってる美容室の発言に端を発してQBハウスの社長が規制改革に動いてるらしい散髪屋さんですが昔から赤・白・青のサインポールが定番になっています。
デザインの梅干によるとトリコロールのサインポールは日本だけで無く世界的に使われてるようです。
そこでサインポールの動きをCSSのグラデーションとトランスレーションで再現してみました。
4本のサインポールの動きサンプル
〝サインポール風アニメーションjQueryプラグイン〟の続きを読む
数年前から準備していたウダ2の新しいトップページを公開しました。
作った順番はスイングバナー→サークルバナー→フッター→ヘッダーの順で最初にとりかかったスイングバナーは2012年に作ったもので最後に作ったヘッダー部分とは約3年の隔たりがあります。
一番上は最近よく見る動画の背景のヘッダー、上にざらついた縦縞のフィルターをかけて低画質の動画を誤魔化せるようにしてる。（使える動画が見つからなかったので公開時点では著作権放棄(CC0)の画像になってます）
ロゴのアフロスカルは前のがレンズが透けすぎだったので「死がふたりを分かつまで」の反射の感じをパクって透け具合を調整した。動きも以前はFlashで笑っていたのをjQueryでアニメーションに刷新しました。
スイングバナーはCSS3のtransformでカーソルを重ねたり、タブレット端末を傾けたり、ブラウザのウインドウを移動させると反応して揺れる。
サークルバナーは「PopCircle Vinmein」をベースにパララックス化したり出方を回転させながらにしたりしてます。
パララックス化したのはパララックス全盛の頃に作ったからです。さらにカーソルを合わせるとCANVASで書かれてタイトルとツールの説明が表示される。
フッターは予定ではパララックスのパラパラアニメを描こうと思ってましたが手が掛かるので放置してたらパララックスのパラパラアニメ自体を最近見なくなったので中止しました。
代わりにCSS3のtransformで角度を付けた長方形をjQueryでスクロールと同期させる事で微妙なパララックスにしました。
中身は新コンテンツ（？）のTシャツを掲載してます。
InstagramやPinterestなど画像系SNSのAPI使ってなんかできないかなとチュートリアル系サイトでを見てると
Instagram APIから画像データを取得する方法
Instagram APIを使ってねこ大好き専用の「Nekostagram」を作ってみた
と猫を集めてるのがあり、12のメジャーなSNSのアクティブ率を比較してみた – App Ape Labによると昨年末の国内Android端末ではInstagramがアクティブ率2位になっているので、とりあえずフレブル系の犬を集めるためハッシュ名を「#buhi」と考えてたら既にありました。（海外でもブヒっていうんですね。）
ハッシュがあるなら、Instagramから画像を引っ張ってきて表示するサイトを作るだけなんでやってみた。
〝Instagram APIでフレブルBUHI画像閲覧〟の続きを読む
Preprosが有料化したようで起動の度に「金払え」、定期的に「金払え」とうるさくなり、暴走する頻度が増えた。
使用頻度は高くなってるので金を払ってもいいレベルかもしれないけど、超多機能なPreprosのSCSSとjavascript最小化にしか使って無く損した気分になるので乗り換えることにした。
かといってWindowsなので乗り換え先が少ない。以前はSCOUTを使っていたが最近人気が無いようなので、コマンドライン式のコンパイラーを使うことにした。
〝Preprosが有料化したので乗り換えた〟の続きを読む
jQueryなど外部Javascriptの読み込み方法はいくつかあるし流行もある。
設置場所は
・headタグ下部に入れる
・bodyタグ下部に入れる
・bodyタグ上部に入れる
URLは
・ファイルを同サーバー上に設置する。
・Google等のCDNを指定する（//開始）。
・Google等のCDNを指定する（https://開始）。
レトロな方法は「headタグ下部に入れる」「ファイルを同サーバー上に設置する」の組み合わせで、モダンな方法は「bodyタグ下部に入れる」「Google等のCDNを指定する（https://開始）」の組み合わせになるが、単純にこの方法が良いとか悪いとかは言えない。
〝外部Javascriptの読み込み方法あれこれ〟の続きを読む
WordPressをCMS（更新システム）代わりに使ってる企業サイトが多くある。
その更新作業で画像を掲載するときは、数年前まではデジカメで撮影した画像をSDカード等を使ってパソコンにコピーして「藤 -Resizer-」なんかの簡易画像編集ソフトで縮小し、WEBブラウザでWordPressにログインしてアップロードという手順だったが、最近はスマホ一つで画像のアップが可能になった。
ただ、そのままアップすると容量が大きすぎたり顔色が悪かったりするだけで無く、不要な情報（位置情報やサムネイル）も公開してしまい住所がバレたり、モザイクが外されたりするという危険もあります。
そこでスマホからスマートに安全にアップする手順を解説しようと思います。
〝スマホでWordPressへ写真をアップするオススメな方法〟の続きを読む