普段からEmmetを多用している方ならご存知の方が多いと思いますが、Sublime Text使用時にEmmetを使って簡単にダミーテキストを出力させる方法です。
また、Emmetのスニペット登録を使ってオリジナルの日本語版ダミーテキストを作成・出力できるようにする方法を紹介します。
- 紹介している内容はSublime Text 3とEmmetを使用した結果を元に書いています。
- エントリー内で「展開」としているのは、TabもしくはCtrl + Eを使用時を指しています。
Lorem Ipsum（ダミーテキスト）を表示する
ダミーテキストとして有名なLorem ipsumですが、Emmetにはこれを簡単に出力してくれる機能がついています。
出力方法はloremとlipsumで2パターンあり、どちらかを記述して展開すると「Lorem ipsum dolor sit amet, consectetur adipisicing elit. ～」という感じでダミーテキストが出力されます。
また、出力する際は単語数を指定することも可能で、例えば10単語だけ出力したい場合はlorem10というように、表示したい単語数を付けて展開すれば、先頭から10単語分のみLorem Ipsumを出力してくれます。
下記は簡単な記述例で、それぞれBeforeを記述して展開するとAfterのような形で出力してくれます。
p>lorem↓ ↓ ↓
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius et esse doloribus non temporibus illum corrupti, officiis aperiam iste iure voluptate molestiae rem exercitationem suscipit vitae laudantium doloremque molestias vel?</p>
p>lorem10↓ ↓ ↓
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, nesciunt!</p>
p>lorem10*3↓ ↓ ↓
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, beatae!</span>
<span>Quos ducimus repellat, nam explicabo omnis, doloremque eaque soluta. Commodi.</span>
<span>In ex maxime sequi nemo reprehenderit consectetur commodi necessitatibus? Qui?</span>
</p>
ul>li*3>lorem10↓ ↓ ↓
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, perspiciatis.</li>
<li>Illum similique optio iure. Repudiandae eaque perferendis aliquid voluptatibus quibusdam.</li>
<li>Soluta ipsa dolorum laborum, sunt sequi doloremque! Aspernatur, unde, consectetur.</li>
</ul>Emmetのスニペット登録で、日本語版ダミーテキストを作成してみる
ちょっとしたサンプル作成時などで文字入れしたい場合は上で紹介したLorem ipsumを使っているのですが、案件のテストアップなどのようにクライアントに直接見せるようなものの場合は、英語と日本語とでは見栄えが大きく違ってくることもあるので基本的にダミーテキストは全て日本語にするようにしています。
その際に今まではその場で適当に考えたり、ジェネレータで文字数指定して作成みたいなことをしていたのですが、Emmetのスニペット登録を使って日本語のダミーテキストを出力できるようにしてみました。
まず「Preferences → Package Settings → Emmet → Settings - User」でスニペット用のファイルを開き、そこに何も記述されていない場合はそのまま以下を記述、既に何かしらの記述をしてあるという場合は以下から必要な部分を追記してください。
{
"snippets": {
"html": {
"snippets": {
"jlorem": "ダミーテキストです。"
}
}
}
}上記を記述後、Sublime Textを再起動してjloremと打って展開すれば「ダミーテキストです。」という文章が出力されます。
「ダミーテキストです。」という文章はちょうど10文字となっているので、もっと文字数ほしい場合はjlorem*5|sみたいな感じで*数字を記述して展開すれば10×指定した数の文字数を出力させることができ、先ほどの場合は10文字×5で全部で50文字の文章が出力されるということになります。
また、文末に付いている|sの部分は改行をさせないために記述しているもので、jlorem*5と記述して展開すると改行されて50文字が表示されてしまいますが、|sをつけることで改行をせずに出力することができます。
上記では日本語のダミーということで呼び出し名をjloremと設定し、ダミーテキストだということと文字数を指定したい際にわかりやすくしたいこともあって10文字の「ダミーテキストです。」としていますが、呼び出し名や出力文言を変更したい場合はそれぞれ任意で変更してください。
ちなみに、自分はもう少し長い文章で入れたい場合に使う用で以下のスニペットも登録していて、jlorem40と打って展開すると「この文章はダミーテキストです。文字サイズや行間などを確認するために入れています。」という40文字の文章が出力されるようにしています。（追記する際は「,（カンマ）」で区切って追記）
"jlorem40": "この文章はダミーテキストです。文字サイズや行間などを確認するために入れています。"まだまだSublime Textについてわからない部分も多く、今回紹介した方法も自分が使用している方法ではあるのですが、もっとスマートにできるとか使い勝手良い方法がありそうな気もしているので、もっと良い方法知っている方がいれば是非教えてください。