30分でできる、テンプレートエンジンSlimの導入とSlimの実践的な使い方

Pocket
LINEで送る

以前の記事で、なぜデザイナーこそSlimを導入するべきなのかということについて書きました。今回はSlimをインストールしてからHTMLに自動でコンパイルする環境を構築する方法を説明します。”プログラミングっぽいこととかホントムリ、Terminalとか論外”みたいなデザイナーさんにもわかりやすく書いたつもりですので、ぜひ。

Slimをインストールする

Rubyの確認

SlimはRubyのgemと呼ばれるパッケージ(便利機能の塊のようなもの)の一つです。そのためRubyさえあれば動きます。terminalを開いて以下のコードを入力してみて下さい

ruby 2.x.x~ のような表記が確認できたらRubyがインストールされています。

slimをインストールする

Rubyが入っていることを確認したら、Slimをインストールします。先程のターミナルに以下のコードを入力。

インストールが完了したら以下のコードを入力してみてください。

Slim 3.x.x~みたいなものが表示されたら問題なくSlimをインストールできています。

実際にコンパイルしてみる

Slimの詳しい文法等を勉強する前に、実際にどのようにコンパイルされるのか見てみましょう。テキストエディタでtest.slimというファイルを作成し、以下のコードを貼り付けて下さい

test.slim

コードを貼り付けたら⌘Sで保存します。次はTerminalを開いて下さい。まずTerminalに”cd”と入力します。入力した後Enterは押さないで下さい

次にTerminalの画面に先程作成したtest.slimが 入っているフォルダ をドラッグ・アンド・ドロップして下さい。”test”というフォルダの中に”test.slim”を保存している場合、Terminalの画面が以下のようになっていると思います。”~~”は保存した場所によって違います。Desktopに保存した場合は”Desktop”になっているはずです。

Enterを押します。testフォルダに移動できました。terminalでcdコマンドを使うと、指定したディレクトリに移動することができます。今回はこの辺は気にせずに、”これからtestフォルダの中のものに対してTerminalから何かする準備を行った”と考えてもらうといいと思います。

それでは以下のコードをTerminalに入力しましょう。

testフォルダの中にtest.hemlというファイルが出現したと思います。コンパイルの完了です。実際に書き出したコードを見比べてみましょう。きちんとしたHTMLが書き出されていると思います。

test.slim

test.html

面倒なコンパイルを自動化する – 前半

とはいえ毎回terminalから先程のコードを入力してコンパイルするのは大変です。gulpと呼ばれるJavascriptで書かれた自動化ツールを使います。しかしgulpを使うにはいくつかプログラムをインストールする必要があります。最初だけですので頑張りましょう。やるべきことは以下の3つです。

  • 1. node.jsとnpmをアンインストール(すでにnode.jsをインストール済みの場合)
  • 2. nodebrewをインストール
  • 3. node.jsをインストール

1. node.jsをアンインストール

node.jsをすでに過去にインストールしたことがある場合は一度アンインストールする必要があります。Terminalに以下のコードを入力しましょう。

not foundと表示された方は、node.jsはインストールされていませんので、2. nodebrewをインストールに進んで下さい。バージョンが表示された場合、node.jsがすでにインストール済みですので以下のコードをターミナルに入力してアンインストールを完了させましょう。

再度 node-vを入力してみて下さい。アンインストールに成功しているはずです。

2. nodebrewをインストール

以下のコードをTerminalに入力するだけでOK。

エラーが出てしまう場合は、homebrewがインストールされていないので、調べてインストールしておきましょう。

3. node.jsをインストール

以下のコードを入力して、node.jsの最新バージョンをインストールします。

インストールが完了したら以下のコードを入力します。

以下のように表示されたと思います。

以下のコードを入力しましょう。v.6.6.0の部分には、nodebrew listで表示されたバージョンを入力しましょう

もう一度以下を入力して、”current: バージョン番号”になっていれば完了です。

面倒なコンパイルを自動化する – 後半

こちらに僕が使っているプロジェクトのパッケージが入っているので、ダウンロードして下さい。

https://github.com/tiekey/quck-start

zipでダウンロードしてきた場合、解凍しましょう。

Terminalでcdコマンドを使って、解凍したフォルダ内に移動します。”cd”と入力した後に、フォルダをドラッグ・アンド・ドロップでしたね。

続けて以下のコードを入力します。

以上です。これでslim-starter > viewsの中にあるSlimファイルを保存するだけで、自動でHTMLファイルが生成、更新されます。新しいSlimファイルをviewsの中に追加していっても大丈夫です。

また、フォルダに移動して”gulp”を入力するという流れは、Terminalを終了したら毎回行う必要がありますのでご注意下さい。試しにslim-starter > views > index.slimをテキストエディタで開いて、一度保存してみましょう。slim-starter内にindex.htmlが生成されました。

Slimの記法 基本編

id, class

slim

html

テキスト

slim

html

src, href

slim

html

css, js

slim

html

IE対応

slim

html

コメント

slim

html

css(sass)

slim

html

Slimの記法 応用編

include

_header.slim

index.slim

index.html

変数

slim

html

配列

slim

html

if

slim

html

loop その1 数字を指定してループ

slim

html

loop その2 数字を指定してループの応用

slim

html

loop その3 配列とループ

slim

html

loop その4 ifとループ

slim

html

Pocket
LINEで送る