世界が幸せで在ります様に

ITエンジニアになりたい人・エンジニアの人にとって役立ちそうな商品を紹介するブログ

超サクッとできる。WordPressの手間でうんざりした人向けへ紹介する【Vapid】

f:id:sinsinchang:20180920180851p:plain

今回、CMSを選ぶべきかどうか、というところで、一つ面白いものを発見したので紹介しようと思う。

 

例えば、なにかやろうと思ったときの選択肢として、CMSを候補にあげるチームは多いと思う。

最も人気のあるWordPressは、ホームページという単語の次にでてきてもおかしくないほど主流になっている。それほどまでに強力なシステムと言える。

 

 

CMSの弊害といえば、拡張性に尽きると思う。多少の変更はできるが、作りの根幹を変えるような仕様変更は悪手であるし、誰もその提案を受け入れないはずだ。

先に挙げたWordPress以外にも、ホームページであるなら、MobileTypeが比較的検討されやすいだろう。ホームページに限った話ではなく、Eコマースなら、EC-CUBEが用いられる事が多い。当然、Eコマースのようなものになってくると、SIerからパッケージソフトをレンタルしたり、内製化して作ってしまったりと言うことも一般的だろう。

 CMSを運用していくと、徐々にシンプルでなくなってくる。元々中は拡張しづらい仕組みであるので、CMS自体のコードを変えることも致し方ない。そういうことを繰り返していると、複雑な状況は免れない。

本を読んだりして、いろいろと練ってみる。 

エンジニアのためのWordPress開発入門 (Engineer's Library)

エンジニアのためのWordPress開発入門 (Engineer's Library)

  • 作者: 野島祐慈,菱川拓郎,杉田知至,細谷崇,枢木くっくる
  • 出版社/メーカー: 技術評論社
  • 発売日: 2017/01/26
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る
 

 

このまま運用するのがどうも気持ち悪い中、どうしたら良いのかわからない、そう思っていたときにたまたま良さげなものを見つけた。

 

今回は、「Vapid」というものを見つけた。

以下の記事が実際に詳しい。

medium.com

 

使い方はシンプル

npm install -g vapid-cli
vapid new path/to/project/folder
cd path/to/project/folder
vapid start

このコマンドでプロジェクトが作られる。npmはあらかじめ設定する必要がある。

 

立ち上げて、画面を見てみる

特に何もいじってない状態

図A

f:id:sinsinchang:20180920180045p:plain

ログインすると

f:id:sinsinchang:20180920180129p:plain

このように、左のサイドメニューには、Content、GeneralとForms、Contactが存在する。

それでは、背景を設定しよう。

まずは、ContentーGeneralをクリック

次にBackground Imageから画像を選択肢し、図Aにある{{VAPID}}に入れたい文言を設定し、Saveボタンを押下する。

f:id:sinsinchang:20180920180742p:plain

こんな感じで、僕は猫のフリー画像と「ねこちゃん」という文言を入れた。

問題なさげならば、右上にあるViewというボタンを押下する。

f:id:sinsinchang:20180920180851p:plain

先の図Aが変化したのが分かると思う。

ちなみに猫の画像は、この画面をスクロールするとあらわれる。

f:id:sinsinchang:20180920180945p:plain

こんな感じである。かわいい部分が切れちゃってるけど、、、

 

ちなみに、さきほどの画像がどこに保存されているかと言うと

path/to/project/folder/data/uploads

の場所になる。容量は変わらなかったので、圧縮はされていない模様。

さて、では、このホームページに機能を追加する。

以下のパスにあるファイルを開く

path/to/project/folder/www/index.html

37   {{#section about label="About Me"}}
38 <div>
39   <h2>{{title}}</h2>
40   {{body type=html}}
41 </div>
42 {{/section}}

大体これぐらいのsectionタグの後ろに上記コードを追加する。

そして、さきほどのページへ戻ると右上にRebuildボタンが出てくると思うので押下する。

f:id:sinsinchang:20180920183509p:plain

About Meというセクションが追加された。

ここに入力したものは、About MeとしてViewから確認することができる。

このようにホームページをこの管理画面から容易に変更することができ、極めてシンプルな作りだと言える。

当然、javascript/cssは別フォルダに追加して適用することも(カスタマイズ)可能である。

 

今回は、About Meと、ヘッダ文字、お問い合わせしか紹介していないが、以下のDocを見てもらえばもっとたくさんいろんなことができるのが分かると思う。

https://docs.vapid.com/learn-more#sections

 

使わないと良さがわからないので、見つけて使ってみた、という記事。正直、まだそこまで使い込んでないのであまり良さを言えないが、シンプルなのは確か。また、ローカルで気軽に誰もが修正することができるので、そういう意味では便利かもしれない。つまり、DBを用意したりとか、そういう手間はない。サクッとできる、そういうのが急に欲しくなるタイミングが来たときに使うのがよいかも。

大規模なものを変えるというのはまだ未検証である。

プロフィールと免責事項