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

LocomotiveCMSの新しいバージョン[Locomotive V3](http://locomotive.works/)がリリースされたのでさっそくインストールしてみました。ローカルでサイトを開発するツールであるWagonと、そのサイトをディプロイするサーバー上のRailsアプリであるEngineの関係に変わりはありません。インストールも前バージョンの手順とほとんど変わらず、Wagonのインストールは[Quick start](https://locomotive-v3.readme.io/docs/quick-start)そのままですが、ところどころ補足します。Engineについては[Engineインストール編](http://qiita.com/tatsu/items/76581c0512201819bf8d)をご参照下さい。

> 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できるようですが、自分は[サイトトップ](http://locomotive.works/)から事前に登録しておきました。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以外の選択肢はありません。"---"以降のファイル内容を以下の通り書き換えます。

```rb: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が更新され、次回以降の更新時にはこちらの設定が参照されることになります。

```rb: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インストール編](http://qiita.com/tatsu/items/76581c0512201819bf8d)では、マニュアルでconfig/deploy.ymlを編集してからローカル（自前）サーバーへディプロイしています。

## 6. 動的データ編集

Wagonで編集できるのはStaticなデータのみです。content_typeなどの動的データはディプロイ後に[Sign in](https://station.locomotive.works/_app/sign_in)して編集します。

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