a-blog cms超初心者つまづきポイント with カスタムユニット作成
今年の10月からインターンに参加している土田です。
インターンではMapboxという地図サービスをa-blog cmsで使用するためにコードを書いたりしていました。Mapboxをa-blog cmsで使用する方法については以下の記事で紹介しています。
本記事ではそれらの機能を作る際に私がつまづいたポイントについての解説をします、これからa-blog cmsを始める方の参考となれば幸いです。
- テンプレート：begnner2020
- 想定読者：a-blog cms超初心者 、ご自身でカスタムユニットを作ろうとしている方
つまづきポイント：ユニットを追加する度にjsが読み込まれてしまう
admin/entry/unit/extend.htmlでユニットを描画するhtmlを書いている場合、このhtmlファイルに
<script src="..."></script>と記述をするとユニットを追加するたびにスクリプトが読み込まれてしまいます。
<!--admin/entry/unit/extend.htmlがユニットを追加するたびに読み込まれる --> <!--以下のスクリプトが何度も読み込まれてしまう --> <script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script> <link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' /> ... <script src="/js/mapboxunit.js"></script>
私の場合は何度もJavascriptを読み込んでしまうことが原因で、膨大なエラーが発生していました。
これを防ぐためにSetRenderedタグ、GET_Renderedタグを使用しましょう
<!-- BEGIN_SetRendered id="js-任意のid" --><!-- END_SetRendered -->で囲まれたコードはそのファイルでは読み込まれず、代わりに<!-- GET_Rendered id="上記と同じid" -->が書かれたファイルでコードが読み込まれます。
例：admin/entry/unit/extend.htmlで<!-- BEGIN_SetRendered id="js-任意のid" --><!-- END_SetRendered -->と書き、include/head/js.htmlで<!-- GET_Rendered id="上記と同じid" -->と書くとjs.htmlが読み込まれた際にタグで囲んだスクリプトが読み込まれます。
<!-- admin/entry/unit/extend.html --> <!-- BEGIN_SetRendered id="js-mapboxunit" --> <script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script> <link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' /> ... <script src="/js/mapboxunit.js"></script> <!-- END_SetRendered -->
<!-- include/head/js.html --> <!-- Mapboxユニットを使用するために追加 --> <!-- GET_Rendered id="js-mapboxunit" -->
これでjs.htmlにて一度だけjsなどのスクリプトが読み込まれるようになります
つまずきポイント：エントリー編集画面は二つあり、読み込まれるファイルが異なる
エントリーの作成・編集画面に入る方法は２つあります。
- 表側からエントリー作成ボタンをクリックしてエントリー作成画面に入る方法
- 管理ページ＞エントリー＞エントリー作成 と進んでいきエントリー作成画面に入る方法
表側からエントリー作成ボタンをクリックしてエントリー作成画面に入る方法
管理ページ＞エントリー＞エントリー作成 と進んでいきエントリー作成画面に入る方法
この二つの方法で表示される画面は一見同じもののように見えるのですが、読み込まれるファイルが違います。そのためJavaScriptのコードを書く位置などに注意する必要があります。
例：Javascriptを記述するファイル
１の方法ではjs.htmlを読み込むのでjs.htmlにJavasciptを記述する
２の方法ではjs.htmlが読み込まれないのでadmin.htmlにJavascriptを記述する
１の方法では上手く動作するのに２の方法では上手く動作しないときは、読み込まれるファイルの違いを意識してみると良いかもしれません。
つまづきポイント：ユニットを追加するたびにhtmlが読み込まれてしまうためid属性が重複してしまう
エントリー作成画面で追加した複数のユニットを描画するときに
<- BEGIN unit#custom_sample:loop -->それぞれのユニットに対する描画<!-- END unit#custom_sample:loop -->
といった書き方をしますがid属性が重複してしまう問題がありました。
<!-- BEGIN unit#custom_mapbox --> <!-- BEGIN unit#custom_mapbox:loop --> <div id="sample">...</div> //idが重複してしまう <!-- END unit#custom_mapbox:loop --> <!-- END unit#custom_mapbox -->
id属性による処理が難しいと感じたときはクラス属性による処理を検討してみると良いでしょう
まとめ
使い始めたばかりの方はa-blog cmsは難しいと感じるかと思います。私も上記のポイント以外にも数多くのポイントでつまづきました（インクルードの機能には大変惑わされました）。しかし、使っている間に慣れてきて、面白いと思える時期がくると思いますので、ぜひ今は難しいと感じている方も使い続けてみてほしいと思います。
