a-blog cms Ver.2.5.0リリース前に苦労した実装

とうとうa-blog cms Ver.2.5.0がリリースされましたね。2.5.0では、ブラウザ上でドラッグ&ドロップでレイアウトの変更ができるレイアウトモジュールや「ユニットの多言語対応」、「モジュールユニット」などあたらしい機能が盛りだくさんです。


今回Ver. 2.5.0のリリースにあたり、自分も様々なことを担当させていただきました。その中でも苦労したことベスト3を発表させて頂きます。
ベスト3は以下のようになっております。

  1. カスタムフィールドメーカーの刷新
  2. リリース直前のblogテーマ修正
  3. acms.cssの管理系のcssをacms-admin.cssに移動する

1. カスタムフィールドメーカーの刷新


カスタムフィールドメーカーとはカスタムフィールドを毎回どこからからコピペして書き換えたりしなくてもラベルや値、サイズなど入力していくだけカスタムフィールドのHTMLが作れてしまう便利な機能になります。上のように管理画面のコンフィグ画面から移動することが出来ます。

今回特に苦労した実装が、このカスタムフィールドメーカーの刷新です。
追加したい機能がたくさんあったため、今回これらの機能を追加するために一からカスタムフィールドメーカーを作ることになりました。

バリデータ、コンバーターの機能を追加

いままでのカスタムフィールドメーカーには入力した値のチェックをするバリデーターを出力する機能や、半角カタカナを全角カタカナ等に変換するコンバーターの機能がありませんでした。


なので、2.5.0からは上の図の1のように「入力チェック」の「する」をセレクトボックスから選択していただくことでバリデーターを使っていただけるようになりました。


さらに項目からコンバータを追加して頂くことで、入力文字の変換も可能です。上の図は小文字を大文字に変換するコンバーターを追加している様子です。

カスタムユニットメーカーの追加


そして今回あらたにカスタムユニットメーカーを追加しました。カスタムユニットはa-blog cmsの2.1からサポートされているのですが、この入力用HTMLを生成するための機能がいままでありませんでした。
そこで今回は上の図のようにタブを切り替えるだけでカスタムユニットメーカーに移動できるように作り変えました。

2. リリース直前のblogテーマ修正

これもまた凄く大変でした。自分がコーディング規約を守れていなかったこともあり、リリース直前でたくさんの指摘事項を先輩からいただきました。
特に大変な修正が、CSSのコーディング規約に違反しているところの修正でした。
なので森田さんが以前紹介していたEditor Configを使ったり、SublimeTextの設定を見直しました。
ルールを憶えきれなかったら、あらかじめエディタに設定しておけばいいのですね。
詳しくは下のリンクをご覧ください。先輩の森田さんが詳しくまとめられています。


3. acms.cssの管理系のcssをacms-admin.cssに移動する

社内でacms.cssの管理系の部分はacms-admin.cssに分けようという話になりました。というのもこれからはa-blog cmsの使用者がacms.cssを利用するか他のBootstrapのようなCSSフレームワークを使用するか選択できるようにするためです。
acms-admin.cssのクラス名はacms.cssと区別するために、prefixacms-adminを付けています。
なので管理画面のHTMLに使われているクラス名をすべてacms-からacms-adminに書き換えました。
管理画面のすべてのページでちゃんとスタイルが当たっているかを確認するのにとても時間を要しました。


ちなみにHTMLのクラス名の変更にはSublimeTextを利用しました.
上の図のように正規表現モードacms-acms-adminに置換しました。

まとめ

以上が僕がa-blog cms Ver.2.5.0をリリースするに当たって苦労したベスト3でした。とにかく無事リリースされて良かったです。以前よりずっとパワーアップしたa-blog cmsを皆さん是非使ってくださいね。


堀 悟大

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

Home
Next entry →