「Vapid」というCMSを触ってみた

Qiitaを眺めていたらHTMLで構築できるCMS「Vapid」を触ってみた Part1というエントリを発見。業務で人に使わせる予定があり、軽量で簡単なCMSを探していたので私も触ってみた。

個人的にはHugoが一番楽なんだけど、Markdownが書けないとか、コマンドなにそれ無理みたいな人達が触れるようなもので且つ、WordPressのよう重たくないものが理想。最近試したのは結構古めのFlatPressあたり。あとでこの記事をそのまま見せて使ってもらえるように最初からメモしておく。

まずはnode.jsのインストール

OSは使わせる人がWindowsユーザーなのでWindows 10。

  1. node.js公式より2019年4月29日現在の推奨版10.15.3LTSをダウンロード。

node.jsのダウンロード

  1. ダウンロードしたファイルをダブルクリックし、とくに変更箇所はないのですべてNextでインストール

node.jsインストーラー

  1. 最後にFinishを押してインストーラーを終了

node.jsのインストール完了

  1. ショートカットキー[Win + R]を押してcmdと入力しOK

ショートカットキー[Win + R]を押してcmdと入力しエンター

  1. コマンドプロンプトが立ち上がったら以下のコマンドを入力し実行

node -vを実行し、バージョン(v10.15.3)が表示されたらインストール完了

コマンドプロンプトが立ち上がったらnode -vを実行

続いてVapidのインストールと作業用ディレクトリの作成、devサーバー起動

Vapidのインストール

npm install -g @vapid/cli
グローバルにインストールしていることに注意。

サイトの作成

vapid new vapid
以下のように出力されれば成功。

==> Site created.
To start the server now, run:
vapid start vapid

devサーバー起動

vapid start vapid
こちらも以下の出力があれば成功。[Ctrl + C]押下でdevサーバーは終了できる(y/n確認あり)

==> Starting the development server…
==> Watching for changes in C:\tmp\vapid\www
View your website at http://localhost:3000
Ctrl + C to quit

動作確認

http://localhost:3000へアクセスすることで初期画面が表示される。

Vapid初期画面

サイトの編集

ログインユーザーの作成

まずダッシュボードにログインするためのユーザーを作成する。トップのログインからCreate Loginに進む。
このとき、アカウントはVapidのものではなくローカルdevサーバー用のログインユーザーなので注意。deploy後にVapid hosting側で触るときはVapidアカウントを使うから混同しやすい?かも。何ならこのユーザー何しに必要なのかわからない。

トップのログインからCreate Loginに進む。

ダッシュボードはこんな感じ

右上のViewから表示を確認できる。フォームに入力しSaveすると自動リロードしてくれる。
とりあえずGreetingに適当な文字を入れてSaveするとページタイトル部分が変更されているはず。

管理画面はこんな感じ

index.htmlを直接編集する

vapid\www\index.htmlを開いて編集。HTMLを編集するというよりは、ダッシュボードをカスタマイズするというイメージの方がわかりやすい。カスタム用のテンプレートタグをHTMLに埋め込むと、ダッシュボード内のフォームも自動で生成される。

{{vapid label="form_name"}}これがVapidのテンプレートタグフォーマットでパラメーターを渡すこともできる。このフォーム名は{{form_name}}のように省略が可能。省略した場合は{{form_name placeholder="sample text"}} このようにスペース区切りでプロパティも続けて書ける。

プロパティパラメーター備考
label=”form_name”textフォーム名、ハイフン-は使えずアンダーバー_はダッシュボード上でスペースとして認識される。(バグか仕様かわからない)
placeholder=””text入力例を表示
required=true/false必須にするかどうか
type=コンテンツタイプの指定、いっぱいあるから略。公式ドキュメントを参照してほしい。

つまりこれらのタグを埋め込み、ダッシュボード上から動的に変更が可能なサイトを構築できるのがVapidということみたい。また、このタグは埋め込むとダッシュボード上がごちゃごちゃになってしまうので、セクションとして区切ることができる。その場合は以下のようにセクションタグで囲むだけでOK。

<head>

<!-- Vapidのセクション開始タグ -->
{{#section Head label="meta tags"}}

<meta name="description" content="{{page_description required=true}}">
<meta name="keyword" content="{{page_keyword required=false}}">
<title>{{page_title required=true}}</title>

{{/section}}
<!-- section終了タグ、漏れるとエラーを起こすので注意 -->

</head>

セクションとして区切ることができる

CMS機能を持たせる繰り返しフィールドタグサンプル

繰り返しフィールドタグを埋め込んでおけば簡易ブログとして機能させることもできる。この場合は単にページ内に追記する形折り畳み項目を追加できる。リストやテーブルで使うと便利かもしれない。

<section>
  {{#section news multiple=true}}
  <details>
    <summary>{{news_title}}</summary>
    {{news_body}}
  </details>
  {{/section}}
</section>

また、別ページにリンクさせたい場合は{{_permalink}}を使う。このサンプルではnewsというラベルを付けているので、www\_news.htmlにファイルを置いておくと参照させることができる。_news.htmlをページテンプレートとして置いておけば、ダッシュボードから入力した記事を動的に吐き出してくれる。

index.html
<section>
  <ul>
  {{#section news multiple=true}}
    <li>
      <h5><a href="{{_permalink}}">{{news_title}}</a></h5>
      {{news_body type=html}}
    </li>
  {{/section}}
  </ul>
</section>
_news.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 動的に変化させたい部分より上にセクション開始タグを入れる必要がある -->
    {{#section news multiple=true}}
    <title>{{news_title}}</title>
  </head>

  <body>
    <h1>{{news_title}}</h1>
    <article>
      {{news_body type=html}}
    </article>
    {{/section}}
  </body>

</html>

表示サンプル

まとめ

簡単にサイトを作れて更新も楽。sassにも対応してたりその辺は公式ドキュメントを読むと全部書いてあるんだけど、ホスティング先を選べずVapidの有料ユーザーにならないと使えないのが難点。Vapidでできることは他のツールなりフレームワークでできることが多いから、手軽にホスティング+柔軟性のあるCMSを使いたいって場合は使ってみるといいかもしれない。

おわり

タイトルとURLをコピーしました