HTMLで構築できるCMS「Vapid」を触ってみた Part1

What's Vapid

Vapid is an intentionally simple content management system built on the idea that you can create a custom dashboard without ever leaving the HTML.
https://www.vapid.com

HTML上でほとんどの構築が行えるシンプルなCMSとして登場した「Vapid」ですが、
日本語の情報がほとんど見当たらなかったため、実際に触ってお試ししてみました。
※Vapid歴１日の時点で記事を書いておりますので、多少の理解不足には目を瞑ってください

Getting Started

ドキュメントを見よう見まねで進めると、ものの数分で導入が行なえます。
https://docs.vapid.com

npm install -g @vapid/cli

※node 8.9.0以上の環境が必要ですので node -v で確認しておきましょう。

vapid new path/to/project/folder

プロジェクトを任意の場所に作成します
筆者環境では vapid new ~/desktop/project/vapid-test として作成しています。

cd ~/desktop/project/vapid-test
vapid start .

作成したフォルダ内へ移動し、 vapid start . でデフォルト機能のサーバーを立ち上げます。

vapid start .
==> Starting the development server...
==> Watching for changes in /Users/hogehoge/Desktop/project/vapid-test/www
View your website at http://localhost:3000

たったこれだけで開発用サーバーの準備が整いました
早速 http://localhost:3000 へアクセスしてみましょう！

How to use

localhost:3000 へアクセスすると下記のようなページが確認できます。

いかにもテンプレートタグらしき怪しいメッセージが表示されていますね
HELLO,{{VAPID}}
環境を整えたところで、早速CMSとしての機能を確認してみましょう。

LOGINボタンをクリックするとダッシュボードへのログインを求められますので、
あらかじめ登録しておいたEメールアドレス・パスワードでログインをします。
※登録していない方はトップページから登録してください！

ログイン後の画面には「Greeting」「Background Image」の項目がありますね。
今回はGreetingを例に、内部の仕組みを説明していきます。
Greetingへ適当な文字(今回は MAYOMAYO)を入力して「Save」を押すと...。

トップページのメッセージが以下の通りに変化しました！

HELLO,{{VAPID}}  //変更前
HELLO,MAYOMAYO   //変更後

該当エリアのコードを確認してみましょう。

/vapid-test/www/index.html

<header class="header" style="background-image: url({{background_image type=image tag=false required=false}})">
  <h2>A New Site</h2>
  <h1><span>Hello, {{vapid label="Greeting"}}</span></h1>
  <div class="container">
    <p>This template already has few tags—visit the dashboard now to edit their content. And when you're done, <a href="https://docs.vapid.com/content-types" target="_blank">add your own content tags</a>.</p>
    <p><a href="/dashboard" class="login button">Login</a></p>
    <p><small>Lastly, submit the contact form below.</small></p>
  </div>
</header>

h1タグ内に {{vapid label="Greeting"}} という見慣れないコードがありますが、
これがVapidのテンプレートタグになります。
もう少し単純な書き方にして、項目を増やしてみたいと思います。

<h1><span>{{Greeting}},{{YourName}}</span></h1>

htmlを変更したから管理画面上でも入力エリア作らないとなぁ...
そんなことを思うかもしれませんが、Vapidでは勝手にエリアを作成してくれますので、

htmlを保存して上記のように入力するだけで、簡単に表示することができちゃいます

今回はVapidの環境構築から簡単な編集作業について解説をしました。
Part2では、Vapidに用意されている様々なコンテンツを紹介していきたいと思います！
(現在勉強中ですのでしばしお待ちを)