Help us understand the problem. What is going on with this article?

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歴1日の時点で記事を書いておりますので、多少の理解不足には目を瞑ってください:bow_tone1:

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

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

How to use

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

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

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

image.png
ログイン後の画面には「Greeting」「Background Image」の項目がありますね。
今回はGreetingを例に、内部の仕組みを説明していきます。
Greetingへ適当な文字(今回は MAYOMAYO)を入力して「Save」を押すと...。
image.png
トップページのメッセージが以下の通りに変化しました!

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を変更したから管理画面上でも入力エリア作らないとなぁ...:thinking:
そんなことを思うかもしれませんが、Vapidでは勝手にエリアを作成してくれますので、
image.png
htmlを保存して上記のように入力するだけで、簡単に表示することができちゃいます:wink:
image.png

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした