てくすた

ピクスタ株式会社のエンジニア・デザイナーがつづるよもやまテクニカルブログです

デザイナーが新規サービスを立ち上げる際にやったこと「Slim」導入

こんにちは、ピクスタデザイナーのogawaです。

今回は新規サービスfotowa (フォトワ)開発時に導入したSlimについてお話したいと思います。

はじめに

PIXTAではこれまでERBを使用していましたが、fotowaでは一から開発できる良い機会だったのでSlimを試してみました。 新しいことへの取り組みを歓迎する社風がありチャレンジがしやすく、分からないことはエンジニアさんにすぐ相談できる体制もあり、Slim導入もスムーズに進めることが出来ました。

fotowa (フォトワ)の紹介

写真を撮って欲しいユーザーと、写真のスキルを持つフォトグラファーを繫ぎ、予約から写真データ納品まで一貫して提供するマッチングサービスです。

作品例を見てフォトグラファーを選び、好きな時間と場所で撮影してもらうことができます。

fotowa.com

Slimとは

Ruby製のテンプレートエンジンで、HTMLを効率的かつシンプルに生成するための記法です。 インデントでHTMLファイル内の構造を構築します。

メリット

  • 記述量が減りコードの可読性がよくなる
  • erbよりもレンダリングが速い
  • 学習コストがあまりかからない

躓きそうな点

  • Slimは半角スペースを2個あけて下の階層のタグを書いていきます。通常のHTML同様にインデントとスペースに注意が必要です。
  • ほんの少しターミナルを使う

Slimのインストール

Gemfileに以下を記述。

gem "slim-rails"

ターミナルを立ちあげ、bundleでインストール。

bundle install

タグの書き方

Slimでは<、>、<%、%>、閉じタグは不要になります。

doctype html
html
  head
    title タイトル
  body
    h1 マークアップ例

このSlimから生成されたhtmlが下記のコードになります。

<!DOCTYPE html>
<html>
  <head>
    <title>タイトル</title>
  </head>
  <body>
    <h1>
      マークアップ例
    </h1>
  </body>
</html>

テキスト

テキストはタグの後に半角スペースをおいて記述します。

p テキスト
<p>
      テキスト
</p>

複数行あるテキストは|(パイプ)の後に書きます。

p
  |
    テキストテキスト
    テキストテキスト
<p>
      テキストテキスト
      テキストテキスト
</p>

idとclass

#.を使用してIDとクラスを指定します。

タグ名を省略するとデフォルトでdivタグになります。

#slim
  .aaa.bbb
<div id="slim">
  <div class="aaa bbb">
  </div>
</div>

コメント

コメントにはスラッシュを使います。

p
    / この行は表示されません。
      この行も表示されません。
    /! HTMLコメントとして表示されます。
<p><!--HTMLコメントとして表示されます。--></p>

※Rubyの記述などSlimの詳しい書き方はこちらを参考にしてみてください。

変換ツール

変換ツールを使いながら練習をすると分かりやすいと思います。

HTML2slim

まとめ

新規サービスの開発ということもありスケジュールはタイトでしたが、タグの書き方で紹介したように記法もシンプルなので、学習コストもほとんどかからず導入することができました。 見た目スッキリ、閉じタグ書き忘れが無くなる、erbよりもレンダリングが速いというメリットがあるので、今後PIXTA側の新規ページや部分テンプレートにもSlim導入していきたいと思います。

デザイナー募集

ピクスタでは運用だけでなくアクセス解析やサイト改善にもコミットしていきたいデザイナーを募集中です! www.wantedly.com

『fotowa』のアシスタント募集

新規事業の出張撮影サービス『fotowa』でもアシスタント募集中です! www.wantedly.com