Sublime Text で WordPress の翻訳ファイル(Gettext)をビルドする

Gettext を Sublime Text でビルド

WordPress では、多言語対応に Gettext の仕組みを利用しています。テーマやプラグインを作成する場合にお世話になる翻訳ファイルですね。

Gettext とは、国際化対応するアプリケーションを開発する際に用いられるC言語のライブラリです。PHPやPython様々な言語で実装されています。
.poファイルへ翻訳内容を入力し、.moファイルへコンパイルして使用します。

この Gettext を扱う為の編集エディタとして一般的なソフトが PoEdit です。

PoEdit ではソースファイルから翻訳対象テキストのカタログ化、編集、コンパイルまで一連の作業が行える無料のソフトウェアで、各OS版が配布されています。

今回は、編集・コンパイルの作業を Sublime Text 3 でやってしまおうと思い立ったので、その手順を書き残しておきます。

続きを読む

Web制作環境を整える その8 – Web制作の効率化を目指そう

効率化を目指す

今回は Sublime Text 3 におけるWeb制作をさらに効率化するために役に立つパッケージの追加や、カスタマイズを書いていきます。

すでに Emmet と Sass の導入のおかげで、ヒラでCSSを書いていくよりも大幅にキータイプを減らせましたが、Sublime Text ならもっとやれます。

パッケージを追加する

Sublime Text では、便利なパッケージが多く存在しますので、積極的に利用していくことにします。

Package Control 公式

には、人気のパッケージランキングや新作がアナウンスされているので、暇なひとはチェックしておくといいでしょう。

Abacus
複数行にわたる定数・変数定義などを「=」の箇所で揃える自動成形パッケージです。Alignment というパッケージの方が人気ですけど、コマンドから使えなかったのでこっちを使っています。
All Autocomplete
自動補完機能を強化してくれます。自分で定義した定数・関数も補完候補に入れてくれるので便利です。
AutoFileName
imgタグなど、ファイルを指定する属性値を入力する時に活躍してくれるパッケージです。
Block Cursor Everywhere
Vintage で使用しているとカーソル位置が見えずらくなるので、このパッケージを入れると見やすくなります。
BracketHighlighter
対応するタグや引用符・括弧の位置を、行番号の左側にわかりやすく表示してくれるパッケージです。タグの表示がかわいいです。
Color Highlighter
CSSファイルなどの色指定箇所を、その色で表示してくれるパッケージ。SCSSで変数に格納しても対応してくれるので助かります。
jQuery
jQueryの補完候補を追加できます。
HTML5
HTML5の補完候補を追加できます。
Nettuts+ Fetch
ファイルやzipをリモートから取得して展開します。WordPress サイトを新しく立ち上げたり、いつも使うファイル・フォルダの構成をプロジェクトに取り込めます。
SFTP
Sublime Text 3 から直接FTPでサーバへアップロードまで出来ちゃいます。しかも自動化も出来る。有料パッケージですが、試用制限はありません。(確認メッセージはでます)
SideBarEnhancements
標準ではショボすぎるサイドバーの右クリックメニューを強化します。
SublimeLinter
構文チェックをリアルタイムで行い、エラー箇所をわかりやすく教えてくれます。よく怒られます。導入に少々手間取ったので、後ほど解説します。
TrailingSpaces
設定ファイルの編集が必要ですが、全角スペースをハイライト表示するために導入しました。
wpseek.com WordPress Developer Assistant
WordPress の関数定義を補完候補に出してくれるパッケージ。WordPressのテーマやプラグインを書く人には役立ちます。WordPress というパッケージが有名です。

続きを読む

lorem ダミーテキストの日本語版を作る for Emmet

eye_lorem-japanese

lorem で表示されるダミーテキストはとてもありがたい機能ですが、英語と日本語ではデザイン的な印象が結構変わってきますよね。日本語フォントがいまいちパッとしないせいもあって、なんかダサく見えたりします。

lorem を日本語で生成できないかなと、Emmetの中身を見てみたら、lorem の言語設定の存在が!
しかし、英語・スペイン語・ロシア語しか用意されていませんでした。
もう少し解析してみると、エクステンションとして好きな言語のダミーテキストを追加できる事がわかったので解説します。

続きを読む

Web制作環境を整える その7 – Sass(SCSS) + Compass でもっとCSSを!

Sass + Compass

今時のWeb制作者なら押さえておかなければならない Sass(SCSS) + Compass によるCSSコーディングを、Sublime Text 3 に導入します。
CSSフレームワークに頼らず、尚且つ、開発スピードを落とさないことを目指します。ちなみに、このページで説明しているのは Windows 環境での導入方法です。

Sass とか SCSS って何さ?

Sass(サス) とは CSSを記述するためのメタ言語です。PHP等を書いてる人なら誰でも一度は「CSSで変数つかえねぇかなぁ」と思ったことがあるでしょう。Sassは、変数や算術演算、セレクタ指定のネスト、外部ファイルの読み込み、複数のCSS定義の結合(ミックスイン)などを利用することができます。コンパイルすることでCSSファイルへと変換するソフトウェアです。お仲間で HTML を記述する HAML というメタ言語もあります。
そして Sass のバージョン3.0 から CSS の文法・記法が取り入れられたものが SCSS(Sassy CSS)です。CSSの書き方に慣れている人は SCSS の方がすんなりと理解できると思います。Python っぽい書き方を好む人なら Sass の記法がより効率的に書けるかもしれません。

続きを読む

Web制作環境を整える その6 – Emmet を使い倒す

Emmet を使い倒す

前回までは、Emmet でのマークアップとCSSコーディング表記を学んできましたが、Sublime Text3での Emmet プラグインが提供してくれるのは、展開処理だけではありません。コーディング作業に便利な機能が他にもありますので紹介します。

Emmet公式ページでは、動作の様子をアニメーションで見ることが出来ますのでわかりやすいです。各機能の説明にリンクを張ってありますので参照してください。

Emmet のコマンド

Balance

カーソル位置からタグの境界を判別し、選択状態にします。Balance(inward) で内側に向かって縮小、Balance(outward) で外側に向かって拡張します。

  • 選択範囲を縮小 – Ctrl + Shift + 0
  • 選択範囲を拡大 – Ctrl + ,

Demo: Balance

対応する開始/終了タグへ移動

対応する開始/終了タグへ移動します。Vintage を使っているなら % で代用できます。

  • 開始/終了タグへ移動 – Ctrl + Alt + j

Demo: Go to Matching Pair

タグで囲む

選択されたテキストをタグで囲みます。Surround にも似た機能がありますが、こちらは何で囲むかの指定に Emmet の省略表記が使用できます。ショートカットキーは Ctrl + Shift + g となっていますが、Vintage では Ctrl + Alt + Enter で利用できます。

  • タグで囲む – Ctrl + Alt + Enter

Demo: Wrap with Abbreviation

続きを読む