はてなブログ、HTML、CSS,JavaScriptをブログ全体に追加できたりと、ある程度揃っているブログサービスなのに、カスタマイズできるところもたくさんあって便利ですよね！
今回は、そんなはてなブログに、Vue.jsを導入してみたので、その手順についてご紹介します！
今回のテーマはこちら！
はてなブログの記事の編集画面では、HTMLタグが記述できますよね？
上記のThemaも、HTMLタグとCSSで作成されています。が、ある程度ちゃんとしたHTMLタグを書くと、その記述が複雑になり、毎回の記事で複雑なHTMLタグを記述するのが面倒になってきたりします。
そこで登場するのがVue.js！
Vue.jsとは
そもそもVue.jsとはなんなのかというと、JavaScriptのフレームワークです。プログラムでよく使われる、決まりきった処理を簡単に記述できるようになるのがフレームワークです。
Vue.jsで主にできることは、
- コンポーネントの生成
- ページを動的に生成
- イベント処理の実行
などなどです。今回はブログの記事執筆への導入が目的なので、コンポーネント生成にフォーカスして見ていきましょう！
Vue.jsの詳細は公式ドキュメントにまとまっているので、気になる方は以下をどうぞ。 jp.vuejs.org
Vue.js
まずははてなブログでVue.jsで利用できるようにしましょう！
Vue.jsを利用するには、以下のタグを<head>内に追加します。
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
はてなブログのheadに要素を追加するには、はてなブログの管理画面から、
[設定] > [詳細設定]
を開き、「headに要素を追加」に上記scriptタグを追加しましょう。
これでVue.jsの導入は完了です！
Vus.jsでコンポーネントを作成する
Vue.jsでコンポーネントを作成するためにはJavaScriptを記述する必要があります。はてなブログではJavaScriptを記述できる欄はありませんが、[デザイン]の画面でHTMLを追加できます。scriptタグを用いてHTML内にJavaScriptを記述していきましょう。
フッタにVue.jsのコードを追加
はてなブログの管理画面から、
[デザイン] > [フッタ]
を開き、以下のソースを貼り付けてみましょう！
<script type="text/javascript">// <![CDATA[ let compomentSample1 = { template: '<div style="border: 1px solid #000"><p>テンプレートコンポーネントです</p></div>' }; let compomentSample2 = { template : '<div style="border: 1px solid #000"><p>テンプレートコンポーネントです</p><slot></slot></div>' }; let app = new Vue({ el: '#main', components: { 'compoment-sample-1': compomentSample1, 'compoment-sample-2': compomentSample2 } }); // ]]></script>
貼り付け先はこちら
これで、<compoment-sample-1>と、<compoment-sample-2>が使えるようになりました！！
詳しいコードの解説は後回しにして、先に結果を確認してみます。
記事編集画面でコンポーネントを呼び出す
<compoment-sample-1>と、<compoment-sample-2>の2つのコンポーネントが使えるようになりました。これをはてなブログの記事執筆画面に入力すると、コンポーネントが利用できます。
はてなブログの記事の編集画面で、以下を入力してプレビュー表示してみましょう！（Markdownでの記法です）
## サンプル1
<div>
<compoment-sample-1></compoment-sample-1>
</div>
## サンプル2
<div>
<compoment-sample-2>
サンプル2の中身
</compoment-sample-2>
</div>
プレビュー表示すると以下のようになります！
<compoment-sample-1>と、<compoment-sample-2>の部分がHTMLタグに変換されているのがわかります！
■画面表示
■HTMLソース
Vue.jsの仕組み
では先程のVue.jsの中身を詳細に見ていきましょう！
まず以下でコンポーネントを定義しています。
let compomentSample1 = { template: '<div style="border: 1px solid #000"><p>テンプレートコンポーネントです</p></div>' }; let compomentSample2 = { template : '<div style="border: 1px solid #000"><p>テンプレートコンポーネントです</p><slot></slot></div>' };
let 変数名 = { template: 'HTMLタグ' };
で定義できます。変数名はわかりやすい名前であれば何でも構いません。
HTMLタグが実際に公開した時に表示されるタグになります。
コンポーネント内に要素を入れたい場合は、compomentSample2にあるように、<slot></slot>をテンプレートのHTMLに記述します。slotタグ内に、コンポーネント内に記述された要素が挿入されます。
定義したコンポーネントを適用するために、以下の記述をします。
let app = new Vue({
el: '#main',
components: {
'compoment-sample-1': compomentSample1,
'compoment-sample-2': compomentSample2
}
});
let app new Vue(): で、Vueインスタンスを生成しています。これをやることで、自分のサイトにVue.jsの機能が実行されるようになります。
Vue()内の、el: '#main',は、Vue.jsが適用されるHTML要素のidを指定しています。はてなブログは記事がmainというidのdivタグで囲まれているので、main全体にVue.jsが適用されるようにしています。
components: {}内に、カンマ区切りで、コンポーネントを適用しています。:の左側が、コンポーネントタグとなる名前で、右側は先程定義した変数です。
まとめ
以上、今回ははてなブログにVue.jsコンポーネントを導入してHTMLを簡略化する方法についてご紹介しました。
当ブログの一部の要素も、Vue.jsコンポーネントで描画しています。
下記デザインも、
HTMLで見ると以下のとおりですが、
<div> <div class="emphasize"> <div class="emphasize-points"> <div class="icon-flex"> <div class="icon-wrapper"> <i class="fas fa-feather-alt"></i> </div> </div> <div class="emphasize-content"> コンポーネント名は、英数と、一つ以上のハイフンで構成される必要があります。 </div> </div> </div> </div>
記事を執筆するときは、以下のみを記述して簡略化しています。
<div><emphasize-points> コンポーネント名は、英数と、一つ以上のハイフンで構成される必要があります。 </emphasize-points></div>
Vue.jsコンポーネントがあれば、このようなデザインの使い回しも簡略化できるので、はてなブロガーの方は是非導入してみてください！
