DevAchieve: 3月 2013

2013/03/31

画像の重ね方メイキング ~ HTML5validなOGPとかTwitterCardsとかjQueryUIとかTwitterBootstrapとかgoogle-code-prettifyとか

HTML/CSS/JavaScriptを駆使した画像の重ね方 | DevAchieveで制作した
サンプルページ「Way to cover an image with another image」で
色々普段使わないものを使ったので忘れないようにメモしておく。

HTML5validなOGP設定

後述の Twitter Cards が HTML5invalid だよーというのを聞いて
バリデーションにかけてみたら見事にエラーが出てきた。
xmlns 属性による指定ではなく、 prefix 属性で指定しなさいということらしい。

<html lang="ja" prefix="og: http://ogp.me/ns#">

Twitter Cards

Twitter Cards を指定すれば Web でツイートを開いた時にサイトの情報を表示できるので指定してみた。
Way to cover an image with another imageの指定で言えば以下のような感じ。

<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="http://wada811.github.com/sample/imageCover/index.html">
<meta name="twitter:title" content="Way to cover an image with another image">
<meta name="twitter:description" content="HTML/CSS/JavaScriptを駆使した画像を重ねる方法のまとめ。HTML5(Canvas)/CSS3もあるよ！画像は@kazoo04氏のアイコン素材を使わせて頂きました！ありがとうございます！">
<meta name="twitter:image" content="http://wada811.github.com/sample/imageCover/img/kazoo04-background.png">
<meta name="twitter:site" content="@wada811">
<meta name="twitter:creator" content="@wada811">

しかし、これは HTML5invalid である。name 属性に知らない値が設定されているのでエラーになる。
Twitter Cards meta - HTML5 Validation issue | Twitter Developersのコメントには
name を property に変えれば良いと書かれている。
試しに以下のプレビューツールで確認すると問題なく表示されることがわかる。
Preview your Twitter Card | Twitter Developers
ちなみにキャッシュがあるようで適当な指定でツイートしてしまうと
その後、指定を変えてもしばらくは反映されないので注意。
無用なトラブルを避けるために確認はプレビューツールでしよう。
関連
Twitter Cards | Twitter Developers

jQueryUI でリッチなタブ UI を作る

適当にソースコードを載せたらコレ以上に縦長になってしまうし、jsdo.itみたいな表示がしたかったので
探したらjQuery UIのタブが良さそうだった。
実装も簡単だし、他の UI も便利そうだったから色々使っていきたい。
関連
Tabs | jQuery UI

Twitter Bootstrap

Twitter Bootstrap は前にも使ったことあるけど一応。
Canvas で合成した画像を作成するときのボタン用に。
あとソースコード表示にも使った。
関連
Buttons | Base CSS | Bootstrap

google-code-prettify

Twitter Bootstrap のソースコード表示に使われている google-code-prettify を今回は使った。
Twitter Bootstrap と組み合わさった時の表示がいまいちだったのでスタイルをいじった。

.prettyprint {
    margin: 0 !important; /* Twitter Bootstrap が pre.prettyprint に margin-bottom をつけるため */
    overflow-x: scroll;
}

Canvas で複数枚の画像を描画、合成する

先人のおかげでほとんど苦労せずに描画することができた。
Canvas ってサイズ指定を CSS でできない？気のせいか効かなかったので JavaScript で指定した。
参考
Canvasに画像を複数枚重ねて描画するには » RIAxDNP
sinatra + html5_canvas + jquery 画像ドラッグドロップでファイル保存 - 麺処　まつば

2013/03/30

HTML/CSS/JavaScriptを駆使した画像の重ね方

いわゆる、かずー氏クラスタアイコンの作り方

Way to cover an image with another image
サンプルページへはこちらのリンクまたは画像をクリック！

私@wada811のアイコンが、
他の人のかずー氏クラスタアイコンのように
全体サイズになっていないのは
重ねるのが簡単すぎて
重ねたい画像が同じサイズの特殊事例にしか
対応できないように見えるため
あえて小さく重ねています。

方法としては6つもありました！
正直自分でも驚きです。

background: absolute; で絶対配置で重ねる方法は安心安定の指定方法。

HTML の記述量が多くなるので繰り返しが多い部分には使いたくないが、
ワンタイムのページでいちいち CSS ファイルを編集するのがめんどくさい時には便利。

背景画像を指定した div に img タグを置いて重ねる方法はプログラムで使いやすい。

背景画像をプログラムなどで差し替えたいときや、
状態判定してカバー画像をかける、かけないというの場合分けなどで便利。

2の方法を擬似要素 :after の content: url() で重ねる方法は IE7 以下で使えない。

今回は transform: scale(); で無理やり画像を小さくしているので
IE8 で画像が小さくならなくて背景画像をはみ出てしまう。
使うときはちゃんとサイズの合った画像を使おう。

3の方法で content ではなく背景画像に指定して重ねる方法は IE8 以下で使えない。

CSS3 の background-size を使っているので IE8 以下は画像が小さくならなくて切れてしまう。
使うときはちゃんとサイズの合った画像を使おう。

CSS3 の複数画像の背景指定で重ねる方法は IE8 以下で表示すらできない。

background-image が CSS3 で複数枚の画像を指定できるようになっている。
この使い方では微妙だが、サイトの画像をコンポーネント化できるので微妙に違う画像が多い時は便利かも？
スマホなら background-image の複数画像指定をサポートしているはずなので
画像を色んな組み合わせで一つの画像として表示したいときに使えるかも。
キャッシュされればそれぞれ早くなりそうな気がする。

Canvas で複数画像を読み込んで重ねる方法は IE8 以下では使えない。

IE8 以下でも Canvas を使えるようにするライブラリもあるようだが完全ではないようです。
参考: HTML5 CanvasをIEにも対応させる魔法excanvasの使い方 | DECONCEPTER
複数の画像を合成した画像を Data URI スキームで表現できるので
サンプルページにあるように Canvas で作った画像を画像タグで置換することもできる。

最後に

目的に合わせていろいろな方法を使いこなせるようになろう。
Canvas を使って面白そうなことができるのでやってみたい。

@kazoo04のアイコン素材を使わせて頂きました。
この場を借りて感謝します。ありがとうございます。

2013/03/24

jQuery1.9以上対応版クロスブラウザ対応アニメーションスクロール

jQuery.browserが使えなくなったため、
クロスブラウザ対応！jQueryのアニメーションスクロール | DevAchieveで
使用している animatedScroll 関数は動かなくなります。たぶん。
なので jQuery 1.9 に対応した形で作り直しました。

サンプルページはこちら。
jQuery animated scroll sample page

function animatedScroll(selector, speed, animation, complete){
    var isScrolled = false;
    var setScrolled = function(){
        isScrolled = true;
    }
    $('html').animate({scrollTop: $(selector).offset().top}, speed, animation, setScrolled);
    if(isScrolled){
        complete();
    }else{
        $('body').animate({scrollTop: $(selector).offset().top}, speed, animation, complete);
    }
}

設定の仕方は以前と同じ。

変数	渡せる値	デフォルト値 (nullを渡した時)	説明
selector	jQueryの要素取得の記法	なし(動かない)	関数内で要素の取得を行なっている。
speed	slow \| fast \| 任意の数値 \| null	400ms	slow: 600ms, fast: 200ms
animation	linear \| swing \| null	linear	linearは等速、swingは加速して減速する。
complete	(function) \| null	なし(何も行わない)	スクロール完了のコールバック関数。

<input type="button" class="btn btn-primary" value="Slow Linear Scroll" onclick="animatedScroll('#invite', 'slow', 'linear', onScrolled)" />
<input type="button" class="btn btn-info" value="Fast Linear Scroll" onclick="animatedScroll('#invite', 'fast', 'linear', onScrolled)" />
<input type="button" class="btn btn-success" value="3000ms Linear Scroll" onclick="animatedScroll('#invite', 3000, 'linear', onScrolled)" />
<input type="button" class="btn btn-warning" value="Slow Swing Scroll" onclick="animatedScroll('#invite', 'slow', 'swing', onScrolled)" />
<input type="button" class="btn btn-danger" value="Fast Swing Scroll" onclick="animatedScroll('#invite', 'fast', 'swing', onScrolled)" />
<input type="button" class="btn btn-inverse" value="3000ms Swing Scroll" onclick="animatedScroll('#invite', 3000, 'swing', onScrolled)" />
<script><!--
    var onScrolled = function onScrolled(){
        if(!confirm('お分かりいただけただろうか？')){
            animatedScroll('#top', 'fast', 'swing', null);
        }
    };
    function animatedScroll(selector, speed, animation, complete){
        var isScrolled = false;
        var setScrolled = function(){
            isScrolled = true;
        }
        $('html').animate({scrollTop: $(selector).offset().top}, speed, animation, setScrolled);
        if(isScrolled){
            complete();
        }else{
            $('body').animate({scrollTop: $(selector).offset().top}, speed, animation, complete);
        }
    }
--></script>

Retinaディスプレイ対応のマルチサイズfaviconの作り方と指定方法

前にDon't Forget About Favicons on Retina Screensで
Retina ディスプレイ用の favicon を作らなきゃなぁと思っていたのだけどすっかり放置していた。
ググってみるとちょうどいい記事を発見した。
Retinaディスプレイに対応できるマルチサイズのファビコンの作り方。 | オレっち.com
Bradicon! でマルチサイズ favicon が作れる。
Bradicon! - converting icons since... LITERALLY FOREVER
include large icons にチェックして Browse で favicon にしたい画像を選択したら生成されるまで待つだけ。
生成されたら画像をクリックすればダウンロードできる。
ico ファイルが 1 ファイルだけなんだなぁと思ったらマルチサイズに対応していて、複数入っていて驚き！

後はコレを以下のように指定すれば良いらしい。

<link rel="shortcut icon" href="http://www.your-domain.com/favicon.ico">

HTML5 だと shortcut はいらなくて icon だけで良いらしい。Favicon（ファビコン）に纏わる色々 | 10press

<link rel="icon" sizes="16x16 32x32 48x48 128x128 256x256" href="http://www.your-domain.com/favicon.ico">

HTML5 から sizes 属性を指定できる。スペース区切りで指定すれば良い。4.12 Links — HTML 5.1
MIME タイプは ico ファイルなら指定しなくても良いかも？
どうせ IE が ico ファイルしか対応していないっぽいし。Favicon - Wikipedia, the free encyclopedia

2013/03/23

HomeBrew を zsh で使えるようにする。ついでに hub コマンドも。

HomeBrew を zsh で使えるようにする

MacにHomeBrewとzshを導入してみた | DevAchieveでログインシェルを zsh に
変更したは良いけど brew コマンドが使えなくなっていた…。
よくわからないが zsh-completions をインストールすれば良いらしい。

とりあえずシェルを bash に変更する。
chsh -s /usr/local/bin/bash
HomeBrew で zsh-completions をインストールする。
brew install zsh-completions
.zshrc に以下の記述を追加する。
vi .zshrc

# zsh補完を有効化
fpath=(/usr/local/share/zsh-completions $fpath)

変更した .zshrc の設定を有効にする。
source .zshrc

ついでに hub コマンドも

むしろメインの目的だった hub コマンドを使えるようにする。
hub コマンドで GitHub がもっと便利になるらしい。
hub コマンドについては以下の記事がわかりやすい。
GitHubをさらに便利に使う、hubコマンドを活用しよう！ | Act as Professional - hiroki.jp

とりあえず上記で HomeBrew を zsh で使えるようにしたので以下のコマンドでインストールする。
brew install hub
インストールできたか確認する。
hub --version

git version 1.7.9.6 (Apple Git-31.1)
hub version 1.10.2

こんな感じに出ればOK！

更についでに GitHub のリポジトリを作る

すでに Git で管理されていることが条件で、まだの場合は適当に作る。

mkdir Sample
cd Sample
git init
hub create

初回はID/PWを尋ねられるので答えたらリポジトリが作られる。
そうしてできたリポジトリこちら。wada811/Sample
以下のコマンドで GitHub のリポジトリのページを開けるのでリポジトリが作成されているか確認できる。
hub browse

おわり。

2013/03/12

[PHP]実用的なメールアドレスの正規表現

メールアドレスは仕様がヤバイ

正規表現辞典を読んでループ展開も覚えた私に怖いものなどない！と
メールアドレスの正規表現を書いてみた。…ものは漏れがあった。
メールアドレスの正規表現なんて決定版があるんじゃないの？と調べてみたら
404 Blog Not Found:「PHP使いはもう正規表現をblogに書くな」と言わせないでくれ
こぶたのラッパ » 「PHP使いはもう正規表現をblogに書くな」のメールアドレスチェック用正規表現をPHP用に書きなおす
「danコガいはもう正規表現をblogに書くな」と言わせないでくれ | へぼい日記
404 Blog Not Found:regexp - 'test@[127.0.0.1' . "¥¥¥x1f]" はRFC2822準拠
などの記事が見つかった。正規表現がヤバイと思ったらまず仕様がヤバイらしい。

Perlメモ
Jeffrey E. F. Friedl氏原著による「詳説正規表現」にはメールアドレスはネストしたコメントを持つことができるので正規表現で表わすのは不可能であると書いてあります。

メールアドレス - Wikipedia
Wikipedia 見るとわかるが実は色々と記号を使えたり、" " でくくればなんでもありという凄い仕様なのである。

そこで一番理解できそうな以下の記事の正規表現を使うことにした。
メールアドレス(addr-spec)の正規表現 | へぼい日記

<?php
$wsp           = '[\x20\x09]'; // 半角空白と水平タブ
$vchar         = '[\x21-\x7e]'; // ASCIIコードの ! から ~ まで
$quoted_pair   = "\\\\(?:$vchar|$wsp)"; // \ を前につけた quoted-pair 形式なら \ と " が使用できる
$qtext         = '[\x21\x23-\x5b\x5d-\x7e]'; // $vchar から \ と " を抜いたもの。\x22 は " , \x5c は \
$qcontent      = "(?:$qtext|$quoted_pair)"; // quoted-string 形式の条件分岐
$quoted_string = "\"$qcontent*\""; // " で 囲まれた quoted-string 形式。量指定子が*ということは空文字を許容している
$atext         = '[a-zA-Z0-9!#$%&\'*+\-\/\=?^_`{|}~]'; // 通常、メールアドレスに使用出来る文字
$dot_atom_text = "$atext+(?:[.]$atext+)*"; // ドットが連続しない RFC 準拠形式をループ展開で記述
$dot_atom      = $dot_atom_text; // RFC5322 では dot-atom と呼ぶ
$local_part    = "(?:$dot_atom|$quoted_string)"; // local-part は dot-atom 形式 または quoted-string 形式のどちらか
$domain        = $dot_atom; // ドメインは英数字と記号 を ドット区切りにした文字
$addr_spec     = "${local_part}[@]$domain"; // 変数展開で配列として処理されるため可変変数として書いている

// 昔の携帯電話メールアドレス用
$dot_atom_loose   = "$atext+(?:[.]|$atext)*"; // 連続したドットと @ の直前のドットを許容する
$local_part_loose = "(?:$dot_atom_loose|$quoted_string)"; // 昔の携帯電話メールアドレス用。昔の携帯電話は quoted-string 形式のメールアドレスを取得できたのか？
$addr_spec_loose  = "${local_part_loose}[@]$domain"; // 変数展開で配列として処理されるため可変変数として書いている

$input_addr_spec = 'foo@example.com';

if ( preg_match("/\A$addr_spec\z/", $input_addr_spec) ) {
    print "valid addr-spec\n";
}
?>

理解せずにコピペするのは嫌だったのでコメントをつけて理解できるようにした。
リンク先の方針は引用していないけど読んでおいてください。
RFC 5322 準拠で昔の携帯電話のメールアドレスで取得できた
「連続したドット」と「 @ の直前のドット」を持つメールアドレスも許容する正規表現を書いてくれている。
\ が \\\\ と表記されている理由は正規表現事典のP.115を見るべし。
簡単にいえば文字列のエスケープと正規表現のエスケープでそれぞれ倍増するから。

あと多分バグで quoted-string 形式の正規表現の量指定子が * になっていて ""@domain を通してしまう。

^-^@-.- はRFC準拠のメールアドレスです

メールアドレス(addr-spec)の正規表現 | へぼい日記ではローカルパートのテストは十分行われているけど
ドメイン部分のテストは不十分に感じる。その証拠に ^-^@-.- なども通してしまう。
流石にこんな顔文字みたいなメールアドレスを DB で見かけたら目を疑ってしまう。
その理由はRFC 5322 - Internet Message Formatにほとんどドメインについて書かれていないからである。
ドットとハイフンは連続しないと思われるが連続を許す正規表現だし、記号も色々使えるのでおかしい気がする。
そう思って調べてみると Wikipedia にRFC 5321 - Simple Mail Transfer Protocolにも
メールアドレスについて書かれている、と書いてあった。
軽くキーワードだけ抽出して読んでみた感じでは
ドメインはドット区切りのサブドメインの繰り返しからなり、
サブドメインはハイフン区切りの英数字の繰り返しからなる。
読む人は RFC で使われる ABNF の仕様(RFC 5234 - Augmented BNF for Syntax Specifications: ABNF)が
わからないと読みにくいかも。まぁなんとなく予想はつくだろうけど。

実用的なメールアドレスの形式チェック関数

<?php
function isValidEmailFormat($email, $supportPeculiarFormat = true){
    $wsp              = '[\x20\x09]'; // 半角空白と水平タブ
    $vchar            = '[\x21-\x7e]'; // ASCIIコードの ! から ~ まで
    $quoted_pair      = "\\\\(?:{$vchar}|{$wsp})"; // \ を前につけた quoted-pair 形式なら \ と " が使用できる
    $qtext            = '[\x21\x23-\x5b\x5d-\x7e]'; // $vchar から \ と " を抜いたもの。\x22 は " , \x5c は \
    $qcontent         = "(?:{$qtext}|{$quoted_pair})"; // quoted-string 形式の条件分岐
    $quoted_string    = "\"{$qcontent}+\""; // " で 囲まれた quoted-string 形式。
    $atext            = '[a-zA-Z0-9!#$%&\'*+\-\/\=?^_`{|}~]'; // 通常、メールアドレスに使用出来る文字
    $dot_atom         = "{$atext}+(?:[.]{$atext}+)*"; // ドットが連続しない RFC 準拠形式をループ展開で構築
    $local_part       = "(?:{$dot_atom}|{$quoted_string})"; // local-part は dot-atom 形式 または quoted-string 形式のどちらか
    // ドメイン部分の判定強化
    $alnum            = '[a-zA-Z0-9]'; // domain は先頭英数字
    $sub_domain       = "{$alnum}+(?:-{$alnum}+)*"; // hyphenated alnum をループ展開で構築
    $domain           = "(?:{$sub_domain})+(?:[.](?:{$sub_domain})+)+"; // ハイフンとドットが連続しないように $sub_domain をループ展開
    $addr_spec        = "{$local_part}[@]{$domain}"; // 合成
    // 昔の携帯電話メールアドレス用
    $dot_atom_loose   = "{$atext}+(?:[.]|{$atext})*"; // 連続したドットと @ の直前のドットを許容する
    $local_part_loose = $dot_atom_loose; // 昔の携帯電話メールアドレスで quoted-string 形式なんてあるわけない。たぶん。
    $addr_spec_loose  = "{$local_part_loose}[@]{$domain}"; // 合成
    // 昔の携帯電話メールアドレスの形式をサポートするかで使う正規表現を変える
    if($supportPeculiarFormat){
        $regexp = $addr_spec_loose;
    }else{
        $regexp = $addr_spec;
    }
    // \A は常に文字列の先頭にマッチする。\z は常に文字列の末尾にマッチする。
    if(preg_match("/\A{$regexp}\z/", $email)){
        return true;
    }else{
        return false;
    }
}

俺は変数展開は{}でくくる派なんだよお！
あとRFC 5321 - Simple Mail Transfer Protocolではサブドメインは1回でも良いので hoge@fuga を
許容するのだけど感覚として最低でもドットは1回は含まれるだろ？ってことで15行目の量指定子を + にした。

引数で昔の携帯電話のメールアドレスの形式をサポートするか選べるようにした。
なので以下のように書ける。普通こんな事しないだろうけど。

<?php
if(isValidEmailFormat($email)){
    if(isValidEmailFormat($email, false)){
        // RFC準拠の正しいメールアドレスです
    }else{
        // キャリアの独自形式なのでメールが届かない可能性があるよ的な注意書きが出せる
    }
}else{
    // 不正な形式なのでエラーです
}

ちなみに昔の携帯電話のメールアドレスの形式をサポートしないなら filter_var を使うこともできる。

if(filter_var($email, FILTER_VALIDATE_EMAIL)){
    // 正しい(?)形式です
}

(?)をつけたのはドメイン部分のハイフンとドット周りで変なのを許容するから。
処理時間は isValidEmailFormat より 6倍遅い上に、filter_var のメールアドレスチェックは微妙なので
isValidEmailFormat 関数を使って行きましょう！

追記: 2013/08/11

Perl - PHPしか書けないザコがメールアドレス正規表現でガチ勢に挑んでみた - Qiita [キータ]で
色々なパターンをテストしてもらいました。
基本的にWebサービスでの利用を想定していたので
はてブコメントにあるようなドメインパートが localhost のメールアドレスや
IPv4, IPv6 のメールアドレスは通らなくても良いかな？
a@a.0, a@0.0, a@0.a が通ってるのが微妙感あるけどどうなんだろ？
他は大体想定通りなので良かった。
文字数チェックは行なっていないので別途チェックしましょう。

2013/03/09

[SublimeText]Emmetを使いこなすためのショートカットキー

Emmet には便利なショートカットキーがあるのでまとめておく。
Actions | Emmet Documentation

Expand Abbreviation

[SublimeText]Emmetで高速HTML/CSSコーディング HTML編 | DevAchieveで
説明した事ができる。詳しく書いているのでぜひ見てほしい。

Match Tag Pair

[SublimeText2]Bracket Highlighterで括弧を強調表示する | DevAchieveの括弧内全選択のHTML限定版。
キーひとつで範囲広げたりできるのでHTMLメインならEmmetの方が便利。

Sublime Text 2 では単語選択のショートカットとかぶっているのためか、ショートカットキーが異なる。

Ctrl + d: 選択範囲拡大

Ctrl + j: 選択範囲縮小

Go to Matching Pair

開始タグと終了タグを行き来できる。

Sublime Text 2 では開いているタブ一覧をパレットで開くショートカットキーと被るため、

Ctrl + Shift + t で開始タグと終了タグを行き来する。

Wrap with Abbreviation

後から要素を略語で囲める。自動でインデントを下げてくれて便利。

Sublime Text 2 では頭文字をとって Ctrl + w でコンソール？が開くので

記入していけば変換されていき、展開結果のプレビューが見れる。
エンターを押せば変換を確定する。

Wrapping individual lines

複数行選択すれば各行に対して囲みタグ展開できる。
ドキュメントでは複数行のテキストからリストタグを囲みタグ展開している。

Controlling output position

$# を使えばテキストを使いまわせるので凄く便利。

First
Second
Third
Forth

<ul>
    <li><a href="" title="First">First</a></li>
    <li><a href="" title="Second">Second</a></li>
    <li><a href="" title="Third">Third</a></li>
    <li><a href="" title="Forth">Forth</a></li>
</ul>

Go to Edit Point

前後の編集点を移動できる。
Sublime Text 2 でもショートカットは同じ。

Ctrl + Option + →: 次の編集点に移動

Ctrl + Option + ←: 前の編集点に移動

Select Item

アイテム(タグ、属性名="属性値"、属性値)を選択する。
Sublime Text 2 でもショートカットは同じ。

Command + Ctrl + .: 次のアイテムに移動

Command + Ctrl + ,: 前のアイテムに移動

CSSでも利用可能で、セレクタ、プロパティ: 値、値全体、複数ある場合は個別の値を移動できる。

Toggle Comment
コメントアウト/アンコメントできる。※コメントアウトの対義語はアンコメントらしい。

Command + /: コメントアウト/アンコメント切り替え

Split/Join Tag
XML の空要素タグを分割したり結合したりできるらしい。HTML では出番がない。
参考:
HTML5の空要素タグの文法 - 徒書
scriptタグは空要素っぽく閉じると，FirefoxやIEで読んでもらえない ::ハブろぐ

Remove Tag

親のタグを除去する。

Sublime Text 2 では Command + ' らしいのだが動かなかった。

仕方ないので自分で Ctrl + r に設定した。

Merge Lines

選択された複数行を1行にする。
Sublime Text 2 には何故か設定が入っていなかったので以下の設定をキーバインドに追加した。

{
    "keys": ["super+m"],
    "args": {"action": "merge_lines"},
    "command": "run_emmet_action"
}

Command + m を潰すことによって最小化を防ぐ狙いもあり。

Update Image Size
画像ファイル名の上で実行すると画像サイズを保管してくれる。
静的ページを制作する場合は最高に便利だろうなー。
ファイルパスに PHP のコードが入った場合は動かなそうだけど試してないからわからない。

Evaluate Math Expression

計算をしてくれる。通常の計算式の他に \ で四捨五入( round(a/b) ) が行われる。
流石にカッコつき計算式とかは無理だったので単純な計算のみ。
HTML/CSS で行う計算は単純な四則演算のみなので問題ない。

Sublime Text 2 でも Command + Shift + y で計算できる。

Increment/Decrement Number

数値をインクリメント/デクリメントする。
キャレットが数値の上でないと反応しないので px とかの単位部分でも反応して欲しい気がする。
あと Sublime Text 2 では動かなかった。
微調整は Google Chrome developer tool でやるし、普通に打ったほうが速いからいらないかも。

Reflect CSS Value

CSS の値の変更を展開する。
ベンダープレフィックス系の値を Command + b で一括で変更できるので便利。

Encode/Decode Image to data:URL

画像を base64 エンコード/デコードする。

Sublime Text 2 では Ctrl + Shift + d でできるらしい。

2013/03/06

[PHP]簡易json2xml関数を無名関数を使って作ってみた

Twitter API が v1.1 から JSON のみを返すようになりましたね。
XML で保存していた過去のレスポンスと形式を揃えておくために
JSON から XML に変換したいと思ったら意外とめんどくさいですよん。
数行で出来るんじゃないのとか思って json2xml 関数を作ってみた。

php - How to convert array to SimpleXML - Stack Overflow で
array_walk_recursive を使って
SimpleXMLElement::addChild で配列の中身を1個ずつ突っ込めばいいよ。
ただし key と value は反転するけどな！って回答があったので
無名関数で正しい順に渡してやればいいのでは？と書き始めた。

<?php
function json2xml($root, $json){
    $array = json_decode($json, true);
    $xml = new SimpleXMLElement("<{$root}/>");
    return array2xml($array, $xml);
}

function array2xml($array, &$xml){
    $addChild = function($value, $key) use($xml){
        if(is_array($value)){
            if(is_numeric($key)){
                array2xml($value, $xml);
            }else{
                array2xml($value, $xml->addChild($key));
            }
        }else{
            $xml->addChild($key, $value);
        }
    };
    array_walk($array, $addChild);
    return $xml->asXML();
}

そしたら添字配列と連想配列で微妙に処理を変えないとタグ名が意図した通りにならなくて
php - How to convert array to SimpleXML - Stack Overflow を見ると
再起処理で変換していかなくてはならなくて、 array2xml なんかも作ってしまったり。
実行結果は以下のような感じ。

<?php
$json = '{"hashtags":[{"indices":[32,36],"text":"lol"}]}'; // https://dev.twitter.com/docs/platform-objects/entities
$xml = json2xml('response', $json); 
/*
<?xml version="1.0"?>
<response><hashtags><indices><0>32</0><1>36</1></indices><text>lol</text></hashtags></response>
*/

添字配列のところが数値タグになっていて XML 的にアレ。
以下の xml2json で再変換したらエラーで死ぬ。

<?php
function xml2json($xmlString){
    $xml = simplexml_load_string($xmlString);
    $json = json_decode(json_encode($xml), true);
    return $json;
}

やってみると意外と考えなきゃいけないことが多いというわけ。
自分で変換とか茨の道過ぎてオススメできない。
先人がPHPでJSONとArrayとXMLを一発で相互変換するツール - JAX.php [ゼロと無限の間に]を
作成しているのでありがたく使わせていただこう。
しかし、少しだけバグがあって JSON に XML でエスケープすべき文字が含まれている場合、
エスケープしていないことによるエラーが出る。
_toXmlString 関数で $s = $data; の代入している際にデータをエスケープしていないので
_xmlEscape でエスケープした $s = $this->_xmlEscape($data); に書き換えてから使おう。
この便利な JAXクラスで json2xml すると上でちゃんと変換できなかった JSON も
以下のように正しい XML が返ってくる。

<?xml version="1.0"?>
<response><hashtags><hashtags><indices><indices>32</indices><indices>36</indices></indices><text>lol</text></hashtags></hashtags></response>

先人様様である。感謝して使おう。

2013/03/02

[SublimeText]Emmetで高速HTML/CSSコーディング CSS編

CSSの展開

HTMLやXML、その他の構造化言語に適しているEmmetがCSSで何ができるかというと、
ショートハンド(速記)でスニペットや自動補完を助けてくれます。
それによってCSSでも爆速コーディングが実現可能です。
例えば、m と打って展開すれば margin: ; となるので後は 10px と打てばいいのです。
また、m10 と打って展開すれば margin: 10px; と展開されます。
複数の値を指定したい場合は m10-20 のように
ハイフン区切りで入力することで margin: 10px 20px; と展開出来ます。
マイナスのマージンを指定する場合は m-10 と打てば margin: -10px; と展開出来ます。
複数の値でマイナスを含む場合は m10--20 のようにすれば
ハイフンとマイナスを自動判定して margin: 10px -20px; のように展開してくれます。

単位補完

値から単位を補完してくれます。
整数ならpx(m10 → margin: 10px;)、
少数ならem(m1.5 → margin: 1.5em;)が補完されます。
単位にはそれぞれエイリアスがあり、p → %, e → em, x → ex, r → rem で変換されます。
m10p20e30e40r なら margin: 10% 20em 30ex 40rem; となります。
px以外は複数の値を区切るハイフンは不要です。つけてしまうとマイナスになってしまいます。

z-index, line-height, opacity, font-weight は単位が要らないプロパティなので
単位なしで展開されます。
設定で css.unitlessProperties を上書きすることで動作を変更することができます。
詳しくは preferences.json | Emmet Documentation を見てください。

色コード展開

シャープの後の16進数の文字の長さによって展開のされ方が変わります。
例

#1 → #111111
#e0 → #e0e0e0
#fc0 → #ffcc00

初期設定では自動短縮されるようになっているので #ffcc00 は #fc0 になってしまいます。
Sublime Text 2では設定で以下のように設定すれば自動短縮を無効に出来ます。

"preferences": {
    "css.color.short": false
}

詳しくは preferences.json | Emmet Documentation を見てください。

!important

!をつけることで !important を補完することができます。

m10! → margin: 10px !important;

その他にも大量の補完が存在し、全てを紹介することはできないので
各自で emmet-sublime/emmet/snippets.json at master · sergeche/emmet-sublime · GitHub を確認してください。
結構想像がつくようなものばかりなので暗記しなくてはいけないようなものではないです。
あるかな？ぐらいの気持ちで展開すると良い感じに展開してくれます。

ベンダープレフィックスの補完

CSSの新機能を使用する際には各ブラウザが独自の実装をしている場合、
それぞれベンダープレフィックスというものを付けなければいけません。
Emmet ではハイフンを付けて展開することで自動でベンダープレフィックスを補完してくれます。

-bdrs

-webkit-border-radius: |;
-moz-border-radius: |;
border-radius: |;

Sublime Text 2 だとパイプの位置にカーソルが合うので入力しやすいです。
もちろん -bdrs4 とすれば 4px まで補完されます。

ベンダープレフィックスの説明には border-radius がよく使われるけど
border-radius はもうベンダープレフィックスいらないのに何故でしょう…？

もっと詳しくは Vendor prefixes | Emmet Documentation から。

Gradients

長ったらしい background-image: linear-gradient をベンダープレフィックス付きで展開してくれます。

lg(left, blue, red)

background-image: -webkit-gradient(linear, 0 0, 100% 0, from(blue), to(red));
background-image: -webkit-linear-gradient(left, blue, red);
background-image: -moz-linear-gradient(left, blue, red);
background-image: -o-linear-gradient(left, blue, red);
background-image: linear-gradient(left, blue, red);

W3C の linear-gradient は to キーワードが必要です(でした？)。
CSS Image Values and Replaced Content Module Level 3
Gradients | Emmet Documentationによると W3C spec では to キーワードが要らなくなったみたいです。
(※ソースどこ？知ってる人教えて下さい。)

Emmet の lg() もそれに対応しています。が、それによってドキュメントのデモがバグってしまっています。
展開後のカラーを一つ変えて展開すると他のカラーも同様に変わるというデモだったのですが、
バグって動かないので Try it yourself で試してみてください。
そして Sublime Text 2 の Emmet でも動きません。
うん。linear-gradient めんどくさい。使うのやめよう。

Fuzzy search

良い感じに展開してやるからチートシート見とけ。(超訳)
by Fuzzy search | Emmet Documentation

さいごに

前回の記事：[SublimeText]Emmetで高速HTML/CSSコーディング HTML編

前回の記事からだいぶ期間が空いたけど面倒くさかったとかそういうことはない。
決してそんなわけではない。
あと、最後めんどくさくなったとかそんなこともない。
Gradients がバグってて萎えたとかそんなことはない。

次はたぶんActions | Emmet Documentation をまとめる。

Emmet v1.0がリリース！ナンバリング展開が逆順に対応！

まず、Emmetって何？って人は以下の記事を見てください。
[SublimeText]Emmetで高速HTML/CSSコーディング HTML編 | DevAchieve

リリース時のブログの記事はこちら → Emmet v1.0 is out
ベータ版からも細かく色々改善されているけど、
ナンバリング展開がかなり強化されていたので解説します。

ナンバリング展開

ul>li.item$*5>lorem3

<ul>
    <li class="item1">Lorem ipsum dolor.</li>
    <li class="item2">Saepe debitis itaque.</li>
    <li class="item3">Placeat amet veniam.</li>
    <li class="item4">Perferendis minima accusamus!</li>
    <li class="item5">Possimus velit iusto!</li>
</ul>

$マークが数値に展開されるというベータ版でもあった機能です。

逆順展開

ul>li.item$@-*5>lorem3

<ul>
    <li class="item5">Lorem ipsum dolor.</li>
    <li class="item4">Recusandae hic alias.</li>
    <li class="item3">Eos porro nobis!</li>
    <li class="item2">Nemo ratione distinctio!</li>
    <li class="item1">Pariatur quod exercitationem!</li>
</ul>

@修飾子を付加することによってナンバリングの始点が展開されます。
-修飾子でナンバリングを逆順に展開することができます。

逆順ナンバリング展開の終点指定

ul>li.item$@-3*5>lorem3

<ul>
    <li class="item7">Lorem ipsum dolor.</li>
    <li class="item6">Est accusantium corporis.</li>
    <li class="item5">Sed delectus illum.</li>
    <li class="item4">Repudiandae inventore itaque.</li>
    <li class="item3">Esse quos error.</li>
</ul>

-修飾子の後に数値を書くことでその数値が終点になるように逆順に展開してくれます。
つまり、上記の逆順展開は以下の省略形であることがわかります。

ul>li.item$@-1*5>lorem3

ナンバリング展開の始点指定

ul>li.item$@3*5>lorem3

<ul>
    <li class="item3">Lorem ipsum dolor.</li>
    <li class="item4">Quaerat doloremque dicta?</li>
    <li class="item5">Fugiat alias labore.</li>
    <li class="item6">Assumenda corporis quis.</li>
    <li class="item7">Illo perferendis totam.</li>
</ul>

逆順展開の終点が指定できるということは
通常のナンバリング展開でも始点を指定して展開できるのでは？と考えたあなたは鋭いです。
ちなみに数値を指定せずに以下のように書くと通常のナンバリング展開と同様に展開されます。

ul>li.item$@*5>lorem3

デフォルトで1が指定されたものと同じ動作をしますので
$@ で一つの修飾子として覚えてしまうのが良いかもしれません。

ドキュメントはこちら → Abbreviations Syntax #Item numbering: $ | Emmet Documentation

[書評]正規表現辞典

正規表現辞典メタキャラクタリファレンス&目的別逆引きリファレンス
 佐藤竜一
翔泳社
発売日：2005-07-12

ブクログでレビューを見る»
読みやすく様々な処理系に対応した正規表現のリファレンス本。
対応処理系とメタキャラクタの解説、実行結果が
1ページ程度でまとまっていて大変わかり易い。

正規表現自体についての解説と用語リファレンスが40ページくらいあるが
サクッと簡単な解説で正規表現を使いたいだけの人でも十分な説明がある。
複雑な正規表現では動きを理解するために正規表現自体を理解していないと難しいので解説があるのは嬉しい。
また、正規表現を使用するために様々な処理系での利用方法を解説しているので初心者も安心。

肝心のメタキャラクタリファレンスも大変わかり易く、メタキャラクタとその動き、
対応処理系(sed|grep|vim|egrep|awk|perl|PHP|Java|ECMAScript(JavaScript)|秀丸エディタ)、
メタキャラクタの解説と実行結果が1ページ程度で書かれている。
逆引きリファレンスは目的を果たすためにどのメタキャラクタを使ってどのように書けば良いか解説されている。
リファレンス本だが書き方の参考になるので一度は通読しておきたい。
正規表現は簡単なものでも使えたらかなり捗るのでプログラマ以外の人も覚えておくと良い。

ページ