インストール編TweetHTML/CSSを書くウェブデザイナーにオススメのJadeの良いところを前回ご紹介しました。これは便利そうだぞ、と思った方、自分のマシンにJadeの環境を用意してみましょう。HTML/CSS専門のウェブデザイナーには、心理的にちょっとハードルの高い「ターミナルでコマンドを打つ」ということをしますが、意味はわからなくてもコピペでできますので、ご安心ください。目次そもそもJadeをインストールする、とは?node.jsをまずインストールJadeをインストールターミナルを立ち上げるJadeをHTMLに変換するでも、いちいちターミナルを使いたくないJadeの使えるエディタを使うまとめこの記事を書いた人この人が書いた他の記事そもそもJadeをインストールする、とは?まず、そもそもJadeをインストールする、というのはどういうことでしょう。Jadeを書くこと自体はお手持ちのエディタで書き、.jadeとして保存すればいいだけです。現状ブラウザはJadeのファイルを認識してくれませんので、Jadeで書いたものを、通常のHTMLに変換する必要があります。そのために、裏でゴニョゴニョしてくれるものが必要です。実際にインストールしてみましょう。「コマンドとかなにそれ!」と拒否反応を起こさず、以下の手順に従ってやってみてください。今回はMacOSでの説明です。node.jsをまずインストールJadeを動かすには、node.jsというものが必要です。node.jsの公式サイトでインストーラをダウンロードできますので、そちらからダウンロードし、ダブルクリックしてインストールしてください。Jadeをインストールさて、node.jsが入ったら、Jadeのインストールです。こちらはインストーラではなくコマンドラインでのインストールになります。ユーティリティの下にターミナルというものが入っています。これを立ち上げると、とてもシンプルなウィンドウが出てきます。そこに、以下のコマンドラインをコピペしてエンターキーを押してください。jadeするとターミナルのウィンドウの中で何か文字列がでてきますが(今こんな処理してます的なことが表示されます)、しばらくすると止まります。したら、ちゃんとインストールされたかどうか、以下のコマンドをコピペして確認してみましょう。-Vこの後に、1.x.xなどと数字が表示されれば、ちゃんとインストールされています。Jadeのインストール自体はこれだけです。JadeをHTMLに変換する実際にJadeをHTMLに変換するのも、コマンドラインでできます。コマンド、などで検索してみてください)。test.jadeこれを打ち込むと、同じディレクトリに、test.htmlというファイルが生成されます。-PはPrettyの略で、改行入りの綺麗なHTMLを出力してくれます。-Pなしだと改行がないので、出来上がったHTMLはとても読みづらいですが、ファイルサイズはちょっと減ります。いちいちターミナルを使いたくないJadeをエディタで書いて、それからターミナルでコマンドを打ってHTMLに変換する、というのはコマンド慣れしていないデザイナーにとっては心理的ハードルがとても高いです。そこで、ターミナルを使わない方法もあります。Jadeの使えるエディタを使うJade対応のエディタを使ったり、プラグインを入れることによりエディタから一発でHTMLを生成することができます。こんなエディタがあります。textを使っています。プラグインを入れると「コマンド+シフト+B」でJadeからHTMLを生成してくれます。楽です!まとめJadeのインストール自体は、デザイナーが普段あまり使わないコマンドラインを使う必要があってちょっとハードルが高いと感じるかもしれませんが、一度インストールするととても便利なのでオススメです。海外情報を中心に、海外でのマーケティング、外国人の集客や接客に役に立つ記事をお届けしていきます。ウェブデザイナーSNSでもご購読できます。海外でのマーケティングに役立つニュースレターを無料でお届けします。サイトの改善や集客にすぐ使えるノウハウを知りたいかたはいますぐご登録ください。