Locomotive V3 (LocomotiveCMS) Wagonインストール編 #Rails4

LocomotiveCMSの新しいバージョンLocomotive V3がリリースされたのでさっそくインストールしてみました。ローカルでサイトを開発するツールであるWagonと、そのサイトをディプロイするサーバー上のRailsアプリであるEngineの関係に変わりはありません。インストールも前バージョンの手順とほとんど変わらず、WagonのインストールはQuick startそのままですが、ところどころ補足します。EngineについてはEngineインストール編をご参照下さい。

Mac OS X El Capitan/Ruby 2.2.1p85にて確認。

1. インストール

Documentにはpreオプションが残ったままですが、正式リリースされたので不要です。Wagonの最新バージョンは2.0.0になります。

$ gem install locomotivecms_wagon
$ wagon version
2.0.0

続いて、Locomotiveプラットホーム(Engineアプリ）にログインします。デフォルトではLocomotive.worksにホスティングするようになっています。アカウントがなければ、この場でSignupできるようですが、自分はサイトトップから事前に登録しておきました。1サイトのみ、容量19.1MBまで、カスタムドメイン不可のFreeプランで試用が可能です。

$ wagon auth
Locomotive Sign in/up

Enter the URL of your platform? (default: http://locomotive.works) 
Enter your e-mail? foo@bar.com
Enter your password? 
You have been successfully authenticated.

2. サイト作成

サイトを作成するには、以下のコマンドを実行します。-tでフロントエンドのframeworkを指定します。

途中、テンプレートにHAMLを使用するか、スタイルシートにSCSSを使用するか訊かれます。

$ wagon init YourSiteName -t bootstrap
...
Do you prefer HAML templates? n
...
Do you prefer SCSS stylesheets? y
...
$ cd YourSiteName/
$ bundle install
$ bundle exec wagon serve
Thin web server (v1.6.4 codename Gob Bluth)
Maximum connections set to 1024
Listening on 0.0.0.0:3333, CTRL+C to stop

http://localhost:3333/ を開くと、すでにサンプルページ(app/views/pages/index.liquid)が表示されている状態です。サンプルを手掛かりにカスタマイズできますので、とっかかりやすいですね。

ちなみに、指定できるフロントエンドframeworkは以下のコマンドで確認できます。

$ wagon list_templates
blank - A blank site with the minimal files.
line_case - A simple portfolio site.
bootstrap - A site powered by Bootstrap (v3.3.5).
foundation5 - A site powered by Foundation (v5.4.7).
unzip - Unzip a local or remote (http, https, ftp) zipped site.

3. projectsタイプ定義

projectsタイプというと紛らわしいのですが、試しにprojectsというcontent_type（いわゆるmodel）を定義してみましょう、ということです。実際にはproductsタイプでも、何でも、サイトに必要なcontent_typeを定義することになります。

$ bundle exec wagon generate content_type projects name:string client:string description:text image:file
       exist  
      create  app/content_types/projects.yml
      create  data/projects.yml

4. projectsリスト表示ページ作成

上記で定義したprojectsタイプのデータリストを表示するページを作成してみましょう。

$ bundle exec wagon generate page projects
Do you prefer a HAML template ? n
      create  app/views/pages/projects.liquid

liquid以外の選択肢はありません。"---"以降のファイル内容を以下の通り書き換えます。

app/views/pages/projects.liquid

---                                                                                                                 
title: Projects                                                                                                     

# true if the page is included in the menu                                                                          
listed: true                                                                                                        
# true if the page is published                                                                                     
published: true                                                                                                     

# true if the page can be used as a layout for new pages created by the editors                                     
# is_layout: true                                                                                                   

# position among sibling pages                                                                                      
# position: 1                                                                                                       

# sets a redirection to the given url (301)                                                                         
# redirect_url: "<url to a page or to a remote url>"                                                                

# content type that this page is templatizing                                                                       
# content_type: "<slug of one of the content types>"                                                                

# editable_elements:                                                                                                
#   'some_block/some_slug': "<text>"                                                                                
#   'some_block/some_slug': "<relative path to the file under the public/samples folder>"                           
---                                                                                                                 
{% extends 'layouts/simple' %}

{% block content/main, short_name: true %}

{% editable_model projects %}
<div class="row">
  <div class="col-sm-12">
    {% for project in contents.projects %}
    <div class="media">
      <div class="media-left">
        <img class="media-object" src="{{ project.image.url | default: 'http://loremflickr.com/100/100' | resize: '100x100#' }}" alt="{{ project.name }}">
      </div>
      <div class="media-body">
        <h4 class="media-heading">{{ project.name }}</h4>
        <p><strong>Client:</strong> {{ project.client }}
        <div>
          {{ project.description }}
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</div>
{% endeditable_model %}

{% endblock %}

http://localhost:3333/projects を開くと、すでにprojectsタイプ定義時に作成されたサンプルデータをもとにprojectsリストページが表示されている状態です。

5. ディプロイ

以下は、Locomotive.worksにインタラクティブにディプロイしています。

$ bundle exec wagon deploy live
What is the URL of your platform? (default: http://locomotive.works) 
What is the handle of your site? (default: a random one) 
Deploying...-

Your site has been deployed.

To preview your site, visit: http://locomotive.works/_app/tropical-leaves-181/preview
To edit the content of your site, visit: http://locomotive.works/_app/sign_in

未定義の環境名（この場合はlive）を使用してディプロイを実行すると、config/deploy.ymlが更新され、次回以降の更新時にはこちらの設定が参照されることになります。

config/deploy.yml

live:
  host: locomotive.works
  handle: random-string-123
  email: foo@bar.com
  api_key: {contidential}

実際に、http://locomotive.works/_app/tropical-leaves-181/preview でプレビューできます。

Engineインストール編では、マニュアルでconfig/deploy.ymlを編集してからローカル（自前）サーバーへディプロイしています。

6. 動的データ編集

Wagonで編集できるのはStaticなデータのみです。content_typeなどの動的データはディプロイ後にSign inして編集します。

スクリーンショットの通り編集して、実際にサイトに反映されているのを確認できます。