この挙動を Chrome などと揃えるために Focus Last Tab というパッケージを入れてみました。

eproxus/focus_last_tab · GitHub

Package Control から Focus Last Tab を検索すればインストールできます。

インストールが完了すると、command + 9 で一番最後のタブに切り替わるようになります。

Preferences -> Key Bindings – User で開く設定ファイルに以下のように記述するとショートカットキーを変更できます。

[
    { "keys": ["ctrl+end"], "command": "last_view" }
]

上記コードの ctrl+end の部分を好きなもの、もしくは他のパッケージとの重複を避けたものに変更できます。
僕は特に困っていないので、デフォルトのまま使用しています。

また、Preferences -> Settings – User で開く設定ファイルに以下の1行を追記すると Focus Last Tab の機能をオフできるようですが、一時的に使用を停止したい場合は、Package Control から Disable Package で無効化すればよいのでは？と思います。
再度使用したい場合には、Package Control から Enable Package で有効化します。

"focus_last_tab_override": false

SublimeText/LineEndings · GitHub

Package Control から LineEndings を検索すればインストールできます。

インストールが完了すると、左下に改行コードが表示されるようになります。
また、こちらに表示されるのは、Windows か Unix か CR という表示です。

CotEditor で表示される改行コードとの対応表は以下。

LineEndings のユーザー設定項目

メニューバーから Preferences -> Package Settings -> LineEndings -> Settings – User と辿ると開くファイルに以下の項目が設定可能です。

show_line_endings_on_status_bar

ステータスバーに改行コードを表示するかどうか
デフォルト: true
false にすることは可能ですが、false の場合パッケージ入れた意味があまりなくなります。
下記の2つの設定だけでいい場合には false にします。

alert_when_line_ending_is

リストに入れた改行コードの場合、アラートを表示する
デフォルト: 無し

// この場合どの改行コードでもアラートが出る
"alert_when_line_ending_is":["Windows", "Unix", "CR"]

// Windows ( CR/LF ) でアラートを出したい場合
"alert_when_line_ending_is":["Windows"]

auto_convert_line_endings_to

ファイルを読み込んだ時点で設定した改行コードに自動変換する。
自動変換するだけで保存はしない。
デフォルト: 無し

// ファイルが CR でも LF でも CR/LF に変換して読み込み
"auto_convert_line_endings_to" : "Windows"

GitHub のページには、このパッケージでできることとして以下の項目が挙げられています。

• Show the current “line ending” on status bar.
  → ステータスバーに現在の改行コードを表示
• Change line endings from the command palette.
  → コマンドパレットから改行コードの変更できるように
• Change line endings from the “tab size” menu of the statusbar.
  → ステータスバーの tab size をクリックすると表示されるメニューから改行コードが変更できるように
• Display an alert when the line_ending is not some you expect.
  → 改行コードが意図しないものの場合にアラートを表示
• Convert indentation to spaces or tabs for all views on current window
  → 現在表示されているウィンドウのインデントをスペースかタブに一括置換
• Convert line endings for all views on current window
  → 現在表示されているウィンドウの改行コードを一括置換

誤訳があればコメント欄などで教えていただければと思います。
また、Todo に「Show mixed line endings.」とあるので、今後のアップデートで、各行末にアイコンのようなもので改行コードが見られるようになるのかもしれません。

以下は補足ですが、デフォルトの改行コードは、Preferences -> Settings – Default で以下のように設定されています。

// Determines what character(s) are used to terminate each line in new files.
// Valid values are 'system' (whatever the OS uses), 'windows' (CRLF) and
// 'unix' (LF only).
"default_line_ending": "system",

こちらに書かれている設定を元に、Preferences -> Settings – User で設定できます（ command + , で開きます ）。
system の部分を windows か unix に変更すれば、それぞれ CRLF か LF がデフォルトになります。
なお、system のままでいい場合には default_line_ending 自体記述する必要はありません。

企画の記事は以下より。
ぱくたそ管理人の1日！タイムスケジュール（円グラフ風）を作ってみました。皆さんもどうぞ。｜すしぱくの楽しければいいのです。

円グラフと各項目について

これがダメ人間だ！と言わんばかりの1日。。。

それにしても円グラフ見づらいですね。適当に作りすぎました。

詳細

詳細というより言い訳エリアが以下。

補足

あくまで平均的なものなので、もっと作業をしているときもあれば、もっと飲んでいる時間が長いときもあります。
また、日によってはボルダリングをやりに行ったりもしてます。

最後に

分かってはいたものの、生活が夜型だなぁと再確認しました。

「5時間くらいずらすと、8時起床、24時睡眠だし、ズレ以外はわりと素晴らしいんじゃないか？」とか考えてる時点でダメだなぁと思います。

Nettuts+ Fetch のインストールと設定

Nettuts+ Fetch のインストール

この記事を書いている時点で、Package Control からのインストールができなくなっているようなので、GitHub から手動でインストールします。
現在ベータ版の Sublime Text 3用にブランチが切られているので、Sublime Text 3を使っている方は st3 ブランチを使用してください。

git clone でも可能ですが、zip ファイルをダウンロードした場合で進めます。

1. GitHub のページからダウンロードした Nettuts-Fetch-master.zip を解凍
2. Preferences → Browse Packages で開いたディレクトリにフォルダごと入れる

Package Control でインストールできたらサクッと終わるんですが、手動だとちょっと面倒ですね。

Nettuts+ Fetch の設定

Nettuts+ Fetch で設定できるのは、files と packages の2パターンあり、files はファイル単体、packages は zip 化されたファイル郡になります。
(もしかしたら zip 以外もいけるかもしれないですが試してません)
デフォルトでは、jQuery と HTML5 Boilerplate が設定されています。

{
  "files":
  {
    "jquery": "http://code.jquery.com/jquery.min.js"
  },
  "packages":
  {
    "html5-boilerplate": "http://github.com/h5bp/html5-boilerplate/zipball/v2.0stripped"
  }
}

Fetch: File で flies に設定したものを開いているファイルに貼り付け、Fetch: Package で packages に設定したものを展開します。
Fetch: Package の場合は、展開するディレクトリを指定するフィールドが開きます。

WordPress を呼び出せるようにする

まず WordPress を設定ファイルに追記します。
設定を編集するには、コマンドパレットから Fetch: Manage を開きます。
WordPress 日本語版の最新版は http://ja.wordpress.org/latest-ja.zip という URL なので、こちらを追記。
保存するとすぐに使えるようになります。

{
  "files":
   {
    "jquery": "http://code.jquery.com/jquery.min.js"
  },
  "packages":
  {
    "html5-boilerplate": "http://github.com/h5bp/html5-boilerplate/zipball/v2.0stripped",
    "wp-latest": "http://ja.wordpress.org/latest-ja.zip"
  }
}

今回は名前を「wp-latest」としました。
名前は Nettuts+ Fetch から呼び出す時に使われるので、日本語（マルチバイト文字）は避けておきましょう。

プラグインを呼び出せるようにする

手順は WordPress のものに自作プラグインパッケージ作成を追加するだけです。

1. 適当な名前を付けたディレクトリに必要なプラグインを入れて、zip に
2. WordPress の時と同様に設定ファイルに書き込む

HTML5 Boilerplate でも指定されているように、ローカルのファイルだけでなく、GitHub なども使用可能です。
本題とはずれますが、CSS などのスニペットを Gist で管理して、貼り付けるときは Fetch: File で貼り付けるという使い方もありですね。

インストールするプラグインですが、サイトの性格により変わることも多いので、どのプラグインを設定しておくかを判断するのは結構難しいです。
案としては以下の3つあたりに設定しておくのが無難かなと思います。

1. 使う可能性のものを全部入れる
2. 基本セットのみ入れる
3. 基本セット + 複数の細かいセット

1が一番楽ですが、不要なものを削除する手間がかかります。
3は、2で作成した基本セットに、「企業サイトならこれが必要」などの細かいシチュエーション分けをしたパッケージを作成しておくというパターン。
業務で取り扱うジャンルが多岐にわたる場合は3のほうが楽かなと思います。

僕は2でスタートして、適宜管理画面から追加する、という方法でやっています。

もう1つの方法として、プラグイン個別の設定をする、ということも考えられますが、使う可能性があるプラグインの数が多くなるとインストールするのが面倒です。
5個インストールするなら、WordPress のインストールと合わせて6回 Nettuts+ Fetch のコマンドを打たないといけません。
また、全部のプラグインの名前を覚えておかないといけないという苦行もセットになります。

設定ファイルに各プラグインのダウンロード URL を列記することで指定できればいいのですが、そのようにはなっていないので、先に挙げたような方法などで自作しておきましょう。
自作しておく場合、古いバージョンのプラグインが、インストールされる可能性があるので、インストールが終わった後にプラグインのアップデートを確認しましょう。

データベース作成

phpMyAdmin からデータベース作成。ターミナル等で作成できる方はそちらでどうぞ。

必要ならバーチャルホストの設定を。僕は適当なプロジェクト名 + .dev で設定してます。
これは以前 jim912さんが WordBench 埼玉（だったはず）の勉強会にて使われているのを採用しています。

このサイトで設定するなら、understandard.dev といった感じです。
2013.understandard.dev のようにしておくと、後々数が増えてきた時にも対応しやすいと思います。

バーチャルホストの設定は Mac だと MAMP が楽に設定ができるとの話ですが、僕は直接 Hosts と httpd-vhosts.conf を編集しています。
Sou-Lablog で紹介されている Hosts が GUI で操作ができて便利そうなので、こちらを使ってみるのもありかも。

Nettuts+ Fetch で WordPress とプラグインをインストール

Nettuts+ Fetch の設定さえ終わっていれば、データベースの作成→コマンドだけで環境が構築できます。

1. コマンドパレットから Fetch: Package → wp-latest を選択
2. WordPress の展開終了
3. コマンドパレットから Fetch: Package → 自作プラグインパッケージを選択
4. プラグインの展開終了
5.  wp-config-sample.php を wp-config.php にリネームし、データベース情報を入力。必要であれば、WP_DEBUG を true に
6. ブラウザから管理画面にアクセスし、サイト名などの設定
7. ダッシュボードに入り、プラグインのアップデート確認
8. その他の設定やテーマの作成作業に

上記の流れで基本の環境構築が完了します。

Nettuts+ Fetch の設定が終わっていれば、データベース作成からテーマ作成のところに行くまでに3分もあれば充分たどり着けます。
WordPress の環境構築だけでなく、いろいろな業務に応用できるパッケージだと思うので、業務効率を上げるための選択肢の1つとしていかがでしょうか。

Photoshop などのアプリケーションなら未保存ファイルの場合は終了前に確認してくれますが、アンドゥやリドゥの情報はリセットされちゃったりします。
また、ブラウザなどは command + Q をしてしまっても、再度立ち上げて、command + shift + T でだいたい戻ってくれますが、長文をフォームに入力しているときにうっかり command + tab と間違えて command + Q をしてしまったりもあります。
などなど、挙げて行ったらきりがないです。

長くなりましたが、やりたいことは1つ。command + Q でアプリケーションが閉じないようにするだけ。

手順

1: KeyRemap4MacBook をダウンロードし、インストール

インストールの手順については、ダウンロードページに詳しく書いてあるので、そちらに従いインストールします。
特殊な操作は不要なので、指示のまま進めます。
※ 再起動が必要

KeyRemap4MacBook – OS X用のソフトウェア

2: ショートカットの設定

Launchpad かツールバーのアイコンから起動して、設定画面を開きます。
ツールバーからの場合は、Open KeyRemap4MacBook Preferences をクリック。

検索窓に「command q」と入力すると、いくつかの設定項目が出てきますが、今回設定するのは Custom Shortcuts という項目。

各設定について

Custom Shortcuts には以下の3つの項目があります。

Change Commnad+Q to Command+Shift+W
Change Command+Shfit_L+Q to Command+Q

command + shift + W でアプリケーション終了
command + Q でログアウト

Hold Commnad+Q to Quit Application ( You can adjust teh threshold time of holding by “[Holding Key to Key] Holding Threshold” in Ket Repeat tab.)

command + Q 長押しでアプリケーション終了
デフォルトでは200ミリ秒の長押し。秒数は、設定画面の Key Repeat タブにある [Holding Key to Key] Holding Threshold という箇所の数字を変更できます。
ちなみに、押しっぱなしにしていても連続でアプリケーションが終了していくことはないです。

Press Command+Q twice to Quit Application

command + Q の2度押しでアプリケーション終了

僕は一番下の2度押しでアプリケーション終了を設定しています。
ここはそれぞれお好みで。
その他にもいろいろなキーリマップができるアプリなので、普段使っているキーボードを自分用にカスタマイズしてみるのもいいかもしれません。

WordPress › Image Widget « WordPress Plugins

前バージョンの翻訳ファイルを作成した宮内さんに確認しながら翻訳ファイルの作成やバグ報告などをしていましたが、翻訳ファイルが読み込まれない問題が修正されていないので、現バージョンでも日本語化されるようにする方法をまとめました。

なお、この方法は現時点のバージョン（ver. 4.0.5）での暫定対応です。

追記（2013年2月22日）：プラグインがアップデートされ、ver. 4.0.6では以下の方法は不要になりました。

翻訳ファイルを読みこませる方法

前バージョンの翻訳ファイルを作成した宮内さんに聞いてみたところ、textdomain と翻訳ファイル名が違うため日本語化されないとのこと。
ということで textdomain と翻訳ファイル名を合わせるために、image-widget-ja.mo を image_widget-ja.mo にリネーム。
こうするだけでちゃんと翻訳ファイルを読み込んでくれます。
※ ハイフン（-）とアンダースコア（_）の違い

こちらの内容は Image Widget プラグイン作者に連絡してありますので、以降のバージョンアップで修正される可能性もあります。

追記（2013年2月19日）: プラグインがアップデートされても大丈夫な方法を宮内さんが教えてくれました。

https://gist.github.com/miya0001/4979054

以下の内容をテーマの functions.php に追記することで、プラグイン内の言語ファイル名の間違いを無かったことにしてくれます。

add_filter("load_textdomain_mofile", "my_load_textdomain_mofile", 10, 2); 
function my_load_textdomain_mofile($mo, $domain){
    if ($domain === 'image_widget') {
        return str_replace('image_widget-ja.mo', 'image-widget-ja.mo', $mo);
    }   
    return $mo;
}

翻訳ファイルの一部未反映の箇所を反映させる方法

画像サイズの選択部分ですが、翻訳ファイルには訳語が入っているにも関わらず、表示には WordPress 本体の翻訳ファイルを使用しているので、内容が統一されません。

この箇所に翻訳ファイルの訳語を当てるには、/views/widget-admin.php の49行目〜52行目を以下のように変更。

$possible_sizes = apply_filters( 'image_size_names_choose', array(
	'full'      => __('Full Size'),
	'thumbnail' => __('Thumbnail'),
	'medium'    => __('Medium'),
	'large'     => __('Large'),
) );

$possible_sizes = apply_filters( 'image_size_names_choose', array(
	'full'      => __('Full Size', 'image_widget'),
	'thumbnail' => __('Thumbnail', 'image_widget'),
	'medium'    => __('Medium', 'image_widget'),
	'large'     => __('Large', 'image_widget'),
) );

Note: this is dumb. We shouldn’t need to have to do this. There should really be a centralized function in core code for this.

これらの記述の上に引用の様に書いてあるので、この箇所については対応してくれないかもしれないです。
それなら翻訳ファイルに入れなくてもいいのにとも思うけど、これを残しておいてくれたから変更かけられるということで。

これはプラグインのアップデートで上書きされちゃうので、アップデートで元に戻っちゃって、それが気になる方は都度変更かけてください。

ということで、以上の変更をすることで問題なく日本語が表示されるようになります。

調べてみると、get_post_time で意図通りの表示が実現。

Template Tags/get post time « WordPress Codex

echo get_post_time('M j, Y'); // Jan 21st, 2013 と出力される

また、記事の更新の日付も同様にしたい場合には、get_post_modified_time を使うことで可能。
get_post_modified_time は Atom の出力に使われているみたいです。

Function Reference/get post modified time « WordPress Codex

ということで、英語での日付表記は、以下のようにしておけば可能（今回不要な引数については省略してます）。

echo get_post_time('M jS, Y');
echo get_post_modified_time('M jS, Y');

get_post_modified_time を見つけて、無事解決となったあとで、まとりさんの記事を発見したので、こちらもメモ。

WordPress 日本語版で、テーマ内の日付を英語表記で表示する | Unformed Building

get_post_time と get_post_modified_time を wp-includes/general-template.php で見てみると、2つとも mysql2date を使っているので、まとりさんの記事にあるように、以下のようにしても意図通りの表示になります。

mysql2date('M jS, Y', $post->post_date, false);
mysql2date('M jS, Y', $post->post_modified, false);

Function Reference/mysql2date « WordPress Codex

目標の達成具合について

今年の目標は制作関連の記事数を増やすこととリニューアルの2つだけでした。

制作関連記事について

制作関連の記事の割合は増えたものの、こちらは日記記事みたいなのを書かなくなってるだけで、絶対数としては微増。
数を競うものではないですが、相変わらず更新してないなぁと。

技術的な内容については、自分のためになるような記事を書くという目標については達成できているので、来年もそういった記事を書けるようにやっていきたいです。

リニューアルについて

リニューアルできませんでした。

こちらが全く進まない理由の1つは、手を動かしていないから。
もう1つは、ブログの運用方法について疑問な部分があるから。

疑問な部分というのは、古い記事の取扱い。

その時には正しい内容も、時間が経てば使えない内容になることもあります。
例えば、Clearfix の記事なんていうのもどんどん古くなっていきます（そのうち必要のない技術になるとは思いますが）。
時間が経った時に使えなくなるかもしれない情報をどのように管理するか悩ましいところなのです。
Gist のようなもので管理した場合、ブログスタイルではなく、WordPress でいう固定ページのようなもので情報を展開したほうがいいのかな？と思ってみたり。

こちらについてはこのブログでやるかどうかも含め何パターンか検討してみたいところ。
記事の寿命というのも考えないといけないですね。

どちらにせよ手を動かさないと分からないことなので、少しずつでも手を動かそうと思います。

ユーザーデータ

技術的な内容が比較的多いですし、あまりアクセスがないので、偏ったデータにはなっているかと思いますので、参考程度に。
Google Analytics のデータで2011年比1.2倍のアクセス。去年も1.2倍だったので、（ゆるやかにですが）見てくれる方、機会が増えているのかなと嬉しい気持ちと、有用な記事を書かないとなという気持ちになります。
※ 集計期間: 2012年1月1日〜12月29日、比較対象: 2011年1月1日〜12月29日
※ パーセンテージは訪問数より

ブラウザシェア

Chrome が約1.5倍、Firefox を逆転しました。
去年のうちに逆転されていたサイトもあるかと思いますが、このサイトでは今年逆転。

こちらについてはバージョンアップに際してのアドオンの対応がうんぬんで Chrome に乗り換えた方が多かったからではないかと思います。
僕自身もメインブラウザを Firefox から Chrome に変更しました。

Internet Explorer

Internet Explorer は Firefox 以上のマイナスになりました。
バージョン別の割合は以下。

IE 自体の割合が大きく下がっているので、パーセンテージ以上に数は減っています。
IE6、7は全体から見て1% を切ってきました（2つ合わせても1.6%）。
IE6、7の合算は、2010年が11.3%、2011年が4.6%でした。

IE8も割合が下がっていますが、IE9以降への移行が進んでいるようにも見えます。

これ以外に、Chrome Frame を使用した IE ( 全体の0.1%、2011年は0.07% )も。
ブラウザの新規インストールができない環境であっても、管理者権限なしで使えるので、そういう環境で見てくれてる場合もあるんだなと。

Windows or Mac

Windows が若干下がり、Mac が大幅に増えました。
ここ最近 Mac 買ったという声を聞く機会や、街中で Mac 持っている方を見る機会が増えましたし、妥当な推移かなと思います。
とは言え、このサイトではまだまだ Windows のほうが多いです。

モバイル端末

Android は去年に比べて倍のアクセスがありましたが、iOS と Android は、4.7 : 1ほどの割合。
まだまだ iOS 勢が強いです。
モバイル端末の対応してなくてすいません。今のところ積極的に対応する気はないです。

最後に

やってみたかったボルダリングに挑戦したり、いろんなところに遊びに行ったりと、今年も充実した年でした。
また来年もそう思えるように楽しんでいきたいと思います。

では良いお年を。

CSS Cake というバースデーケーキを作ってみました。
参加表明時に「アニメーション系の組み合わせ。実用性ないやつ。」 というコメントを書いておいたので、そういうネタで。

Chrome 限定です。

なお、検証は以下の2つでのみ行なっています。
Windows については、フォントの関係でちょっとズレが出てますが、動作はします。

• Mac: Mountain Lion、Chrome バージョン 23.0.1271.95
• Windows: Windows 7、Chrome バージョン 23.0.1271.95 m

仕組みについて

今回のサンプルで多用したのは、以下のもの。

サンプルを作成するにあたり、まとりさんの記事を参考にさせてもらいました。
CSS アニメーションの基礎 | Unformed Building

-webkit-animation

いろいろな要素を動かすために必須のものでした。

今回、animation をショートハンドで書いた時に、animation-delay を省略し、別に書いています。
これは、animation-delay だけ変更したいものが多かったのもありますが、ショートハンド内に秒数を指定する箇所が複数あり、視認性も悪いかなと思い、delay の指定を別にしています。

これに対応する keyframes についてですが、なかなか大変だなというのが素直な感想。

分からないなりに遊んでみて、以下の2点に気づきました。

from の省略

from を省略しても動く。

@-webkit-keyframes{
    to{
        opacity: 0;
    }
}

仕様書を見てみたら、書いてありました。
CSS Animations 3. Keyframes

%指定のカンマ区切り

同じ指定のものはひとまとめにしても動く。

20%, 30%, 40%{
    opacity: 0;
}

CSS 的には普通の内容ですが、@-webkit-keyframes 内でもまとめられました。

-webkit-transform

要素の変形系。

scale

ケーキの遠近感を出すためなどのために使用。ロウソクと炎部分。
-webkit-transform: scale(x); の x に前方は1.0、後方は0.7のようにして使っています。

rotate、perspective

ケーキの立体感を出すためなどに使用。
正しい使用方法かどうかではなく、見た目がそれっぽくなるようにしています。

nth-child

それぞれ class や id を振ってもいいんですが、どうせなら使えるセレクターを使おうかと。
普段だと jQuery で代用するか、それぞれに class を追加して対応してます。

box-shadow

複数の box-shadow を重ねて、炎のようになるようにした箇所で主に使っています。
その他でも使っていますが、単純な装飾なので省略。

:before、:after

ここらはできるだけタグの数を減らすために多用しています。

最後に

普段あまり使う機会がないものばかりだったので、いろいろと調べながら作成しました。
効率良くかけていないところなどあるかと思いますが、楽しみながらできたので参加して良かったです。
間違いなどあればコメントしてもらえると嬉しいです。

今回は全て手書き（この表現が正しいか分からないけど）でやりましたが、実務として扱うなら Sass や LESS などの力を借りるのが現実的かなと思います。

6日目

6日目は、去年の JavaScript おれおれ Advent Calendar 2011に続き、今年も CSS おれおれ Advent Calendar 2012を1人で更新しているギンペイさんです。

この症状の解決法は、ひらい さだあきさんが2012年11月7日に第0回 Sublime Text 2勉強会で発表された資料に書かれています。

第0回 Sublime Text 2 勉強会 で Emmet について話してきた – techlog
解決法の該当箇所は、SlideShare の20〜21ページです。

解決法

以下の解決法は、先に紹介したひらいさんの記事および発表資料からの引用となります。
また、Mac 版での操作方法なので、Windows 版もしくは Linux 版の場合は適宜読み替えてください。

1. Preferences → Settings – User を開く
   ( command + , でも開きます )
2. "disable_formatted_linebreak": true と書き、保存

これだけで変換候補が消えてしまう現象は回避できます。

これと併せて紹介されていたのが、Emmet の tab 展開を止める方法。

tab 展開が他の動作の上書きをしてしまうとのことなので、 一応設定してます。
ちなみに、tab 展開を止めても変換候補を tab で選択できるようにはなりませんでした。残念。

1. Preferences → Settings – User を開く
2. "disable_tab_abbreviations": true と書き、保存

その他の設定について

その他設定可能の項目は、下の記事でまとめられています。ありがたいです。
設定項目がかなり多く、ファイルを開く時の挙動や、閉じた後の挙動など、こうできたらいいなという設定ができると思います。

Sublime Text 2 のDefault設定ファイルを眺める – blue_ham_cake1024のブログ