【a-blog cms】組み込みJSの今後

ただの願望ですが組み込みJSが今後こうなって欲しいという要望を以下にまとめてみました。

欲しい機能一覧

  • config.jsの上書き機能の強化
  • スクロールイベントやリサイズイベントの追加機能
  • Browserifyに対応
  • 独自のプラグインを入れやすくする
  • フロント側でもa-blog cmsと同じように使えるテンプレートエンジン

1. config.jsの上書き機能

現在a-blog cmsで組み込みJSを上書きするには下のように書く必要がある。

ACMS.Ready(function(){
    ACMS.Config.searchKeywordHighlightMark  = ".blogEntryHeader, .blogEntryContent";
});

そうではなく、themeに置いているconfig.jsで書き換えられるようになってほしい。

config.js

ACMS.Config({
   ....
    //-----------
    // accordion
    accordionMark   : '.js-accordion',
    accordionConfig :
    {
        active      : null,
        animated    : 'slide', // ( 'slide' | 'fade' | '' )
        heightStyle : 'content',
        collapsible : true
    },
});

使用中のテーマのconfig.js

ACMS.Config({
    accordionMark   : '.js-acc'
});

すると、accordionMarkの設定のみが.js-accのマークに切り替わります。

2. スクロールイベントやリサイズイベントの追加機能

ACMS.Scroll(function(){
//処理
},300);//スロットル時間

ACMS.Scrollに登録されたイベントは、親元のイベントリスナーのscrollイベントに一斉に登録されるのでイベントリスナーの多重登録によるJavaScriptの処理落ちを防ぐ。
さらにスロットル時間を設けて、スクロールの度に中の関数が実行される事を防ぎたい。

3. Browserify対応

もちろん今まで通り、acms.jsをscriptタグで読み込んで使う事も出来るが、browserifyでrequireして使う事も考慮に入れた設計にしたい。
Browserifyでrequireされた場合はjQueryなどで、グローバル空間を汚す事がない。

(function(){
var ACMS = require("acms.js"):
ACMS.Ready(function(){
console.log("I'm ready");
});
})();

4. 独自のプラグインを入れやすくする

dependency.js

CKEditorのマークがあれば、CKEditorのJSをロードする例

ACMS.Load([
    {"place":"Dispatch.CkEditor","mark":Config.ckeMark,"script":"/dispatch/ckeditor.js"},
    ....
]
);

さらに読み込まれた後のCallbackが欲しい

ACMS.Load([
    {"place":"Dispatch.CkEditor","mark":Config.ckeMark,"script":"/dispatch/ckeditor.js","done":"afterCkeIncluded"},
    ....
]
);

さらに"done"プロパティにイベント名を書いておき、addListenerでJSが読み込まれた後のcallbackを記述可能にする。

ACMS.addListener("afterCkeIncluded",function(){
//処理
});

5. フロント側でもa-blog cmsと同じように使えるテンプレートエンジン

a-blog cmsでは標準でunderscore.jsというテンプレートエンジンが入っているが、テンプレートのルールがa-blog cmsと全く違うため、同じようなテンプレートエンジンがフロントでも欲しい。

new ACMS.View({
        templates:["list_template"],
        data:{
            list:[
                {name:"tomomi"},
                {name:"daigo"},
                {name:"taro"},
                {name:"koike"}
            ]
        },
        method:{
            removeItem:function(i){
                this.data.list.splice(i,1);
                this.update();
            },
            addItem:function(){
                console.log(this.data.newItem);
                this.data.list.push({name:this.data.newItem});
                this.update();
            }
        },
        convert:{
            addMr:function($txt){
                return "Mr."+$txt;
            }
        }
    });
});
<script id="list_template" type="text/template">
    <ul>
        <li><input type="text" data-bind="newItem"><button data-action="addItem()">追加</button></li>
        <!-- BEGIN list:loop -->
        <li>{name}[addMr]<button data-action="removeItem({i})">削除</button></li>
        <!-- END list:loop -->
    </ul>
</script>

堀 悟大

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

Home
Next entry →