Brackets:ダミー画像を挿入できるエクステンション「Brackets Lorem Pixel」

Brackets:ダミー画像を挿入できるエクステンション「Brackets Lorem Pixel」

入れてみたので備忘録兼ねてご紹介。「Brackets Lorem Pixel」はBrackets上で手軽にダミー画像を挿入することができるエクステンションで、サイズ・テーマ・カラーを任意で指定することもできます。

「Brackets Lorem Pixel」はその名の通り、ダミー画像生成サイトの「lorempixel – placeholder images for every case」を Brackets上で手軽に利用できるようにしたエクステンションで、サイトと同様にサイズ・テーマ・カラーを任意で指定することができます。

インストール後、エディタ右上にlorempixelのロゴアイコンが表示される

Bracketsの「拡張機能マネージャー」で Lorem Pixel と検索すれば該当のエクステンションが出てくると思うのでインストールします。

エクステンションが有効化されると、画像のようにエディタ右上にlorempixelのロゴアイコンが表示されるので、ここからダミー画像を挿入することが可能になります。

画像のサイズやテーマなどを選択することができる

アイコンをクリックすると画像のようなウィンドウが表示され、ここで画像のサイズやテーマなどを選択することができます。
特にわかりづらい部分はないと思いますが、「width」と「height」は画像サイズをそれぞれ調整できる部分で数値入力またはスライドで値を変更。
「Theme」はどのようなタイプの画像かを選択する部分で、animals・business・foodなど全部で13種類用意されており、Noneを選択した場合はランダムになります。
その下の「Grayscale」はグレースケール画像を使用したい場合にチェックを入れます。

各項目を選択した結果どのような画像が表示されるか確認したい場合は、簡易的なものになりますがウィンドウ下部にある「Preview」ボタンで表示確認ができ、あとは「Preview」ボタン横のボタンでそれぞれURLを出力したりコピーしたりができます。

ただ、lorempixelの画像は基本的にランダム表示されるようになっており、テーマを指定していてもそのテーマ内でランダム表示するというものになっています。
もし何らかの理由で常に同じ画像を表示させたい場合は、http://lorempixel.com/400/200/animals/XXという形で末尾のXXの部分に1~10の数値を指定すれば該当の画像を常に表示させることができます。

ちなみに似たようなもので「DEVimg for Brackets」というエクステンションもあり、こちらも同じくダミー画像を生成できる「devimg.com」をBrackets上で手軽に利用できるというものになります。
「Brackets Lorem Pixel」にはないコミックや映画といったテーマの画像があるので、好みや配置するサイトのテイストによってはこちらを使ってみるのも良いですね。

普段からスニペット登録などの機能を利用している場合は、わざわざこれらのエクステンション使わずとも上で紹介したサイトだったり、同じくダミー画像を手軽に呼び出すことができる「Unsplash It」や「Placehold.it」などのソースをすぐ呼び出せるようにしておく方が正直手っ取り早いと思うんですが、そういった機能は特に使っておらず、手軽にダミー画像を扱いたいという方には便利なエクステンションだと思いました。

Back to Top

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。