Vue.jsを勉強していると、自然と使う機会が多くなるAPI。
フレームワークとしてVue CLIを使ったりNuxt.jsを使うことが多いかと思いますが、費用対効果がある大規模案件に巡り会える機会は、なかなかありません。
そんな中で、最近話題のヘッドレスCMS。
- データベース不要
- PHP不要
- サーバーが別なのでセキュリティが高い
- 定期的にアップデートする必要がない
といったメリットがあり、
元Wordpress専門会社で働いていた私にとって、画期的な内容となっています。
しかし、ヘッドレスCMSで推奨されている使い方通りにやろうとすると、
フレームワークなどの前提とする知識が多すぎて、
初心者にハードルが高い印象になります。
しかし、APIの使い方を調べていくと
下層ページが必要ないLP案件を作る想定なら、
Wordpressよりも気軽に実装出来るのでは思いました。
そこで私は、フレームワークを使わずに実装してみましたので、
その内容をまとめさせていただきます。
前提・想定依頼内容
- 「すでにあるLPにお知らせを投稿出来るようにしたい」といったご要望を想定する
- 下層ページを作る予定はない
基本仕様
- ヘッドレスCMSはmicroCMSを利用
エディタがWordpressのクラッシクエディタと似ている印象を受けました - HTMLはindex.htmlのみ
- CDNとして実装
- Vue.js@2.6.14
- axios
※実際のサイトではSCSSとjQuery、jQueryプラグインも利用しました。
Vue.jsを使う理由
素のJavascriptのみで書くことが出来ますが、
- v-if、v-forを使えば、Wordpressに似たような感覚で作れるため
- 変数とHTMLを混同させたくないため
- 他の案件で使う時、Javascriptに手を加えずに反映出来る範囲を増やしたい
- ブラウザの機能を使うfetchよりも、ライブラリのaxiosの方が信頼出来るため(個人的見解)
という理由から、私はVue.jsを利用させていただきます。
Vue.jsが触ったことがない人は、「基礎から学ぶVue.js」というネコの本を読みながら、一通りやってみるといいと思います。
この本はCDNを利用してVue.jsを動かすことを前提として書かれているので、最小限の学習内容でVue.jsを学べます。
なお、後半のVueCLIの前の章まででOKです。
必要なスキルレベル
個人的な体感としては、
- Worpdressのカスタムフィールドを使って構築出来るくらいのスキルのある人
- ネコの本の内容についていける人
- 何かしらのAPIを使ったことがある人
なら、1サイト作っただけで、大体要領がつかめる感じだと思います。
ちなみに、私が躓いたところはこちらになります。
https://qiita.com/ayaoriko/items/339df665eb831b123143
STEP2：microCMSの管理画面側の設定
microCMSのアカウントを作り、APIの基本情報を入力します。
ちなみに、microCMSでは無料で3つまで登録出来ます。
リスト形式を選択して、
APIスキーマを定義(つまり入力枠を設定)します。
右上の「追加」ボタンを押していくつかコンテンツを入力します。
STEP2：microCMSのAPIキーを確認する
microCMSでAPIを呼び出すには、APIキーを設定する必要があります。
左下の「x個のAPIキー」というところから、APIキーを確認できます。
STEP3：HTMLの作成
さて、HTMLを作成していきます。
まずは、Vue.jsを使って、APIで取得した情報をtextDataという変数に登録します。
new Vue({
el: '#app',
data(){
return {
apikey: 'APIキー',
url: 'microCMSのURL',
textData: [],
}
},
created () {
this.setWorkData()
axios.get(this.url+'エンドポイント名', {
headers: { 'X-MICROCMS-API-KEY': this.apikey },
})
.then(
response =>{
this.textData = response.data.contents
})
.catch(error => console.log(error))
},
methods: {
...
}
...
})
そして、HTML上で変数の中身を展開していきます。
<li v-for="data in textData">
<div class="text" v-html="data.newsDetail">
</div>
</li>
これでお知らせ枠が完成して、microCMSの内容が表示されます。
懸念点について
重くならない？
microCMS上で記事を非公開にすることが出来るので、表示したいお知らせだけに絞って公開する想定でしたら、そこまで通信に負荷がかからなそうです。
それでも気になるようでしたら上限を設定することも可能なので、気になる人は調べてみてください。
APIキーが公開されるので、セキュリティ的に心配
確かに心配ですよね...
しかし、microCMSはコンテンツの入稿(PUT)や編集(PATCH)、削除(DELETE)の権限を外すことが出来るので、
閲覧のみ(GET)の設定することで、セキュリティ的に突かれる心配はないかと思います。
なお、Wordpressも/wp-json/でAPIが表示可能なので、投稿して表示させる目的のみでしたら、そこまでリスクはないかと思います。
それでも、どうしても気になるという方は、
Javascriptでapiキーを隠す方法を載せている人もいるので、ご参考ください。
https://zenn.dev/lesserpanda/articles/2baa2f6eed690b
他に方法を調べてみましたが、これといったやり方が見つかりませんでした。
下層ページを作りたい！という追加要望が出てきたら?
Vue.jsではルーター使って実現する方法があり、CDNもあるそうです。
一方、CDNでどこまで使えるかは、もう少し調査が必要になるかと思います。
https://v3.router.vuejs.org/ja/guide/essentials/dynamic-matching.html
なので、もし今の段階で要望されたら、
- 基本的にはモーダルで代用
- 下層ページだけどURLが統一された、もしくはGETを使って表示させるような、擬似下層的な感じになる
のではと思います。