Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

a-blog cms Ver.2.6.1をリリースするにあたって今回やったこと

さて、先日a-blog cms ver.2.6.1がリリースしましたね!
それにあたって自分が実装したことをいくつか記述していきたいと思います。

  1. ブログテーマ実装
  2. カスタムフィールドメーカーの改良
  3. どこでもダイアログウィンドウの実装
  4. オフキャンバス用の組み込みJSを実装
  5. SCSSにグリッド用のMixinを用意

1. ブログテーマ実装

今回blog2016テーマは自分が担当しました。改良した点としては、各モジュールの設定の変更をモーダルウィンドウ画面から簡単に行えるようにしたこと。また、下記のように、読み込むだけで使えるレイアウト用の、includeファイルを用意しました。

例えば、media.htmlを読み込めば関連エントリーを出すのにピッタリなレイアウトを表示することができます。


thumbnail.html


media.html


2. カスタムフィールドメーカーの改良


北海道から沖縄までの都道府県を手作業でoptionに追加していく作業は大変ですよね?
そこで今回カスタムフィールドメーカーで都道府県の自動入力をするための、スニペットを用意しました。下記のようにスニペットのセレクトボックスから「都道府県」を選択して追加すると、


下のように自動で都道府県がoption項目に追加されるようになります。


実はスニペットはカスタマイズで増やす事が可能です。例えば1時から24時までのスニペットや、世界の国名をスニペットで作っておくと便利かもしれません。

カスタマイズ方法

/system/admin/customfield/json/の中に登録したいスニペットを下記のようなJSON形式で作成しjsonファイルとして保存します。

[
{"label": "0時","value": "0:00"},
{"label":"1時","value":"1:00"}
]

次に/system/admin/customfield/customField.htmlより、スニペットと検索し、以下のように先ほど追加したファイルをincludeして読み込むため記述をします。
このさいに、scriptタグにidを任意で設定してください。今回はtimeとしています。

<!-- スニペット関係 -->
<script id="time" type="application/json">
<!--#include file="/admin/customfield/json/time.json"-->
</script>

/system/admin/customfield/customField.htmlより、customFieldSnippetで検索し、その中のselect要素に先ほど登録したid名をvalueとしてoptionを追加します。
今回のvalueの値は、timeです。

<label class="customFieldBold customFieldSnippet">
	スニペット<i class="acms-admin-icon-tooltip js-acms-tooltip" data-acms-tooltip="システムに登録されている都道府県一覧などのスニペットを利用できます"></i>
	<select data-bind="optionFormat">
		<option value="">なし</option>
		<option value="pref">都道府県</option>
		<option value="pref-en">都道府県(英語)</option>
		<option value="pref-number">都道府県(連番)</option>
                <!-- 追加 -->
                <option value="time">時刻</option>
	</select>
</label>

これで先ほどのjsonがスニペットとして使えるようになったはずです。

3. どこでもダイアログウィンドウの実装

下記のようにaタグに対して、hrefに表示したいページのURLを指定し、さらに、クラス名として、js-dialog-btnと記述する事で、好きなページをモーダルウィンドウで表示する事が出来るようになりました。

<p class="acms-admin-module-edit"><a href="/bid/1/admin/blog_edit/#acms_custom" class="js-dialog-btn js-link_no_rewrite">編集</a></p>

上記の例だと、aタグをクリックすると以下のようなモーダルウィンドウが出現します。


詳しくはこちらのドキュメントをご確認ください。


4. オフキャンバス用の組み込みJSを実装


<ul class="js-offcanvas" id="offcanvas">
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー</a></li>
</ul>
<a class="js-offcanvas-btn js-offcanvas-btn-r" data-target="#offcanvas">メニューを表示</a>

このように書くと画面外に隠れているオフキャンバスメニューを開閉できる組み込みJSを実装しました。詳しい実装方法はこちらをごらんください。


5. SCSSにグリッド用のMixinを用意

また、a-blog cmsのグリッドシステムを以下のような形で、SCSSのmixinから生成するように変更しました。

@include make-grid(acms-col,null,$acms-columns);

これを使うと、acms.css以外で、自分でグリッドシステムを作りたいときにも役に立ちます。以下がその例になります。

@media (min-width : $breakpoint-sm-min) {
    @include make-grid(my-col,sm,12);
}
@media (min-width: 480px) {
	.my-col-sm-1 {
		float: left;
		width: 8.33333%;
	}
	.my-col-sm-2 {
		float: left;
		width: 16.66667%;
	}
	.my-col-sm-3 {
		float: left;
		width: 25%;
	}
	.my-col-sm-4 {
		float: left;
		width: 33.33333%;
	}
	.my-col-sm-5 {
		float: left;
		width: 41.66667%;
	}
	.my-col-sm-6 {
		float: left;
		width: 50%;
	}
	.my-col-sm-7 {
		float: left;
		width: 58.33333%;
	}
	.my-col-sm-8 {
		float: left;
		width: 66.66667%;
	}
	.my-col-sm-9 {
		float: left;
		width: 75%;
	}
	.my-col-sm-10 {
		float: left;
		width: 83.33333%;
	}
	.my-col-sm-11 {
		float: left;
		width: 91.66667%;
	}
	.my-col-sm-12 {
		float: none;
		width: 100%;
	}
}

以上です。

みなさん、よくなったa-blog cms Ver.2.6.1を是非使ってくださいね!!
あと、a-blog cmsの書籍も販売されましたので手にとって見てみてくださいね!!




堀 悟大

有限会社アップルップル マークアップエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド