ウェブデザイナーに使って欲しい、HTMLテンプレートエンジンJade – インストール編

  • このエントリーをはてなブックマークに追加

jade

HTML/CSSを書くウェブデザイナーにオススメのJadeの良いところを前回ご紹介しました。さて、これは便利そうだぞ、と思った方、自分のマシンにJadeの環境を用意してみましょう。

HTML/CSS専門のウェブデザイナーには、心理的にちょっとハードルの高い「ターミナルでコマンドを打つ」ということをしますが、意味はわからなくてもコピペでできますので、ご安心ください。

そもそもJadeをインストールする、とは?

まず、そもそもJadeをインストールする、というのはどういうことでしょう。Jadeを書くこと自体はお手持ちのエディタで書き、.jadeとして保存すればいいだけです。ただし、現状ブラウザはJadeのファイルを認識してくれませんので、Jadeで書いたものを、通常のHTMLに変換する必要があります。そのために、裏でゴニョゴニョしてくれるものが必要です。

では、実際にインストールしてみましょう。「コマンドとかなにそれ!」と拒否反応を起こさず、以下の手順に従ってやってみてください。今回はMacOSでの説明です。

node.jsをまずインストール

Jadeを動かすには、node.jsというものが必要です。

node.js

node.jsの公式サイトでインストーラをダウンロードできますので、そちらからダウンロードし、ダブルクリックしてインストールしてください。

Jadeをインストール

さて、node.jsが入ったら、Jadeのインストールです。こちらはインストーラではなくコマンドラインでのインストールになります。

ターミナルを立ち上げる

Macであればアプリケーション > ユーティリティの下にターミナルというものが入っています。アイコンはこれです。

terminal

これを立ち上げると、とてもシンプルなウィンドウが出てきます。そこに、以下のコマンドラインをコピペしてエンターキーを押してください。

npm install -g jade

するとターミナルのウィンドウの中で何か文字列がでてきますが(今こんな処理してます的なことが表示されます)、しばらくすると止まります。そうしたら、ちゃんとインストールされたかどうか、以下のコマンドをコピペして確認してみましょう。

jade -V

この後に、1.x.xなどと数字が表示されれば、ちゃんとインストールされています。

Jadeのインストール自体はこれだけです。

JadeをHTMLに変換する

実際にJadeをHTMLに変換するのも、コマンドラインでできます。変換したい元のJadeファイルのあるディレクトリに移動して(cd /目的のディレクトリ名/で移動できます、詳しくはcd コマンド、などで検索してみてください)。

jade -P test.jade

これを打ち込むと、同じディレクトリに、test.htmlというファイルが生成されます。

-PはPrettyの略で、改行入りの綺麗なHTMLを出力してくれます。-Pなしだと改行がないので、出来上がったHTMLはとても読みづらいですが、ファイルサイズはちょっと減ります。

でも、いちいちターミナルを使いたくない

Jadeをエディタで書いて、それからターミナルでコマンドを打ってHTMLに変換する、というのはコマンド慣れしていないデザイナーにとっては心理的ハードルがとても高いです。そこで、ターミナルを使わない方法もあります。

Jadeの使えるエディタを使う

Jade対応のエディタを使ったり、プラグインを入れることによりエディタから一発でHTMLを生成することができます。

例えばこんなエディタがあります。

 

私自身は現状Sublime textを使っています。プラグインを入れると「コマンド+シフト+B」でJadeからHTMLを生成してくれます。とても楽です!

 

まとめ

Jadeのインストール自体は、デザイナーが普段あまり使わないコマンドラインを使う必要があってちょっとハードルが高いと感じるかもしれませんが、一度インストールするととても便利なのでオススメです。

この記事を書いた人

サイトエンジンブログ編集部
サイトエンジンブログ編集部
海外情報を中心に、海外でのマーケティング、外国人の集客や接客に役に立つ記事をお届けしていきます。

すぐ実践できる外国人集客のノウハウを無料でお届け

外国人の集客方法やマーケティングで実践したことを参考情報としてメールでお届けします。ブログに書かないノウハウもお届けしていますので、外国人の集客にお悩みなら今すぐご登録ください。




  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。