Horic Design

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

3ページ目 | a-blog cms

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を皆さん是非使ってくださいね。


「どこでも管理画面」ブックマークレットを作りました

仕事で、ブログやカテゴリー、エントリーのカスタムフィールドを多用するので今回ブックマークレットを作ってみました。
、カテゴリーならカテゴリーの管理ページに、エントリーならエントリーの管理ページに、トップページならブログの管理ページに移動するブックマークレットです。


使い方


まずは上記のようにブックマークレットをドラッグしてメニューバーに追加してください。
あとは、追加されたブックマークレットをクリックするだけで下のようなことができます。

  1. トップページからブログの管理画面に移動
  2. カテゴリーページからカテゴリーの管理画面に移動
  3. エントリーページからエントリーの管理画面に移動

トップページにいる場合

例えば現在トップページにいる場合、ブックマークレットを押すと下記のように遷移します。

クリック前


クリック後



是非ご活用下さい!!


a-blog cmsとSVGの相性が抜群な件 Vol.2

先日、上記のエントリーでa-blog cmsとSVGが相性がいいという記事を書きました。すると一道さんに、「SVGを画像として読み込む際に、SVGファイル自体にa-blog cmsを実行することも出来るよ。」というアドバイスを頂いたので今回はそれにチャレンジしたいと思います。
ちなみにSVGにa-blog cmsのPHPを実行するには.htaccessの設定が必要です。

1. htaccessの設定

a-blog cmsではhtmlファイルだけではなく、jsonファイルやSVGファイル等あらゆるファイルにPHPをかませてあげることができます。そのための設定としてhtaccessでRewriteRuleを設定しましょう。
ルートディレクトリにあるhtaccessのファイルを編集し、RewriteRulesvgの記述を追加します。以下が変更前と変更後になります。

変更前

RewriteRule ((\.(html|htm|php|xml|txt|js|json|css|yaml|csv))|/)$ index.php [L]

変更後

RewriteRule ((\.(html|htm|php|xml|txt|js|json|css|yaml|csv|svg))|/)$ index.php [L]

2. imgタグでよみこみ

SVG属性でSVG画像を読み込めば無事にモジュールが実行された結果のSVGをimg要素に読み込めると思います。このとき、src属性にはsvgのフルパスではなく、現在自分のいるテーマからのパスを入力するようにします。
つまり、自分のテーマフォルダのimagesにArtboard.svgという名前のSVGを読み込みたい場合は
src="/images/Artboard.svg"としてください。

URLクエリパラメータを利用すると面白い!!

ここでURLクエリパラメータという方法でSVGを読み込むととても面白いです。URLクエリパラメータとはURLの最後に、?キー=値とつけてサーバ側に値をおくってあげる技術です。jQueryのgetメソッドにも使われています。
今回は、src="/images/Artboard.svg?place=shikoku_kinki"としました。つまり、placeというキーにshikoku_kinkiという値をヒモづけてサーバにリクエストをかけます。
もうお分かりですね?
四国と近畿地方にピンをたてた画像を取得したい訳です。

3.SVGの編集

a-blog cmsでは、先ほどのURLクエリパラメータを受け取ることが出来るのはご存知でしょうか?キー値がplaceだったので、%{place}というグローバル変数にshikoku_kinkiというバリューがセットされているはずです。
IFブロックでshikokukinkiという文字が含まれてたらピンを表示させればいいので、下のようにlkを使いましょう

<!-- BEGIN_IF [%{place}/lk/hokkaido] -->
<path d="M461.34157,38.7233519 C465.857175,36.4504995 469,31.3846216 469,25.5 C469,17.4918711 463.179702,11 456,11 C448.820298,11 443,17.4918711 443,25.5 C443,31.3846216 446.142825,36.4504995 450.65843,38.7233519 L456,50 L461.34157,38.7233519 Z" id="hokkaido" fill="#F75C50" sketch:type="MSShapeGroup"></path>
<!-- END_IF -->
<!-- BEGIN_IF [%{place}/lk/tohoku] -->
<path d="M419.34157,125.723352 C423.857175,123.450499 427,118.384622 427,112.5 C427,104.491871 421.179702,98 414,98 C406.820298,98 401,104.491871 401,112.5 C401,118.384622 404.142825,123.450499 408.65843,125.723352 L414,137 L419.34157,125.723352 Z" id="touhoku" fill="#F75C50" sketch:type="MSShapeGroup"></path>
<!-- END_IF -->
<!-- BEGIN_IF [%{place}/lk/chubu] -->
<path d="M358.34157,240.723352 C362.857175,238.450499 366,233.384622 366,227.5 C366,219.491871 360.179702,213 353,213 C345.820298,213 340,219.491871 340,227.5 C340,233.384622 343.142825,238.450499 347.65843,240.723352 L353,252 L358.34157,240.723352 Z" id="chubu" fill="#F75C50" sketch:type="MSShapeGroup"></path>
<!-- END_IF -->
<!-- BEGIN_IF [%{place}/lk/kinki] -->
<path d="M304.34157,229.723352 C308.857175,227.450499 312,222.384622 312,216.5 C312,208.491871 306.179702,202 299,202 C291.820298,202 286,208.491871 286,216.5 C286,222.384622 289.142825,227.450499 293.65843,229.723352 L299,241 L304.34157,229.723352 Z" id="kinki" fill="#F75C50" sketch:type="MSShapeGroup"></path>
<!-- END_IF -->
<!-- BEGIN_IF [%{place}/lk/chugoku] -->
<path d="M261.34157,220.723352 C265.857175,218.450499 269,213.384622 269,207.5 C269,199.491871 263.179702,193 256,193 C248.820298,193 243,199.491871 243,207.5 C243,213.384622 246.142825,218.450499 250.65843,220.723352 L256,232 L261.34157,220.723352 Z" id="chugoku" fill="#F75C50" sketch:type="MSShapeGroup"></path>
<!-- END_IF -->
<!-- BEGIN_IF [%{place}/lk/kyushu] -->
 <path d="M458.34157,225.723352 C462.857175,223.450499 466,218.384622 466,212.5 C466,204.491871 460.179702,198 453,198 C445.820298,198 440,204.491871 440,212.5 C440,218.384622 443.142825,223.450499 447.65843,225.723352 L453,237 L458.34157,225.723352 Z" id="kyushu" fill="#F75C50" sketch:type="MSShapeGroup"></path>
<!-- END_IF -->  
<!-- BEGIN_IF [%{place}/lk/shikoku] -->
<path d="M268.34157,278.723352 C272.857175,276.450499 276,271.384622 276,265.5 C276,257.491871 270.179702,251 263,251 C255.820298,251 250,257.491871 250,265.5 C250,271.384622 253.142825,276.450499 257.65843,278.723352 L263,290 L268.34157,278.723352 Z" id="shikoku" fill="#F75C50" sketch:type="MSShapeGroup"></path>
<!-- END_IF -->
<!-- BEGIN_IF [%{place}/lk/kantou] -->
<path d="M193.34157,211.723352 C197.857175,209.450499 201,204.384622 201,198.5 C201,190.491871 195.179702,184 188,184 C180.820298,184 175,190.491871 175,198.5 C175,204.384622 178.142825,209.450499 182.65843,211.723352 L188,223 L193.34157,211.723352 Z" id="kantou" fill="#F75C50" sketch:type="MSShapeGroup"></path>
<!-- END_IF -->

3. 実行結果

実際にSVGをimg要素で読み込んでみました。今回は画像ですので保存もできますよ!!


a-blog cmsとSVGの相性が抜群な件

みなさん、a-blog cmsでSVGをインクルードして使ったことはありますか??実はa-blog cmsとSVGはとても相性がいいんです。
今回は上のようにSVGを表示してみました。
カスタムフィールドに応じてピンのアイコンがたつようにカスタマイズしてあります。さてこれをどのように実装したのか説明していきたいと思います。

1. ピンをたてるためのカスタムフィールドを作成


今回は上のようなエントリーのカスタムフィールドを作成しました。自分の公開している、acms_util_kitを使えば簡単にカスタムフィールドを生成できますよ。



2. Sketchで画像を作成


ピンに名前をSketchで付けておくと、あとでSVGを編集する際に編集すべき場所を見つけやすくなります。

SVGで書き出し


Sketchの右下のセレクトメニューからSVGフォーマットを選択し、画像を書き出しましょう。

3. SVGの編集

このように、動的なSVGをCMSに導入することが出来ます。みなさんも是非a-blog cmsでSVGを表示させてリッチな表現にチャレンジしてみてください!!

SublimeTextやCodaなどのテキストエディタで先ほど書き出したSVGを編集しましょう


このとき、チェックボックス等のループを使うカスタムフィールドは全体をループで囲んで、IFブロックのeqなどで判定を行うのが楽でしょう。
私は下のようにチェックボックスにチェックが入っているかを判定しています。

<!-- BEGIN place:loop -->
<!-- BEGIN_IF [{place}/eq/hokkaido] -->
<path d="M461.34157,38.7233519 C465.857175,36.4504995 469,31.3846216 469,25.5 C469,17.4918711 463.179702,11 456,11 C448.820298,11 443,17.4918711 443,25.5 C443,31.3846216 446.142825,36.4504995 450.65843,38.7233519 L456,50 L461.34157,38.7233519 Z" id="hokkaido" fill="#F75C50" sketch:type="MSShapeGroup"></path>
<!-- END_IF -->
<!-- BEGIN_IF [{place}/eq/tohoku] -->
<path d="M419.34157,125.723352 C423.857175,123.450499 427,118.384622 427,112.5 C427,104.491871 421.179702,98 414,98 C406.820298,98 401,104.491871 401,112.5 C401,118.384622 404.142825,123.450499 408.65843,125.723352 L414,137 L419.34157,125.723352 Z" id="touhoku" fill="#F75C50" sketch:type="MSShapeGroup"></path>
<!-- END_IF -->
<!-- BEGIN_IF [{place}/eq/chubu] -->
<path d="M358.34157,240.723352 C362.857175,238.450499 366,233.384622 366,227.5 C366,219.491871 360.179702,213 353,213 C345.820298,213 340,219.491871 340,227.5 C340,233.384622 343.142825,238.450499 347.65843,240.723352 L353,252 L358.34157,240.723352 Z" id="chubu" fill="#F75C50" sketch:type="MSShapeGroup"></path>
<!-- END_IF -->
<!-- BEGIN_IF [{place}/eq/kinki] -->
<path d="M304.34157,229.723352 C308.857175,227.450499 312,222.384622 312,216.5 C312,208.491871 306.179702,202 299,202 C291.820298,202 286,208.491871 286,216.5 C286,222.384622 289.142825,227.450499 293.65843,229.723352 L299,241 L304.34157,229.723352 Z" id="kinki" fill="#F75C50" sketch:type="MSShapeGroup"></path>
<!-- END_IF -->
<!-- BEGIN_IF [{place}/eq/chugoku] -->
<path d="M261.34157,220.723352 C265.857175,218.450499 269,213.384622 269,207.5 C269,199.491871 263.179702,193 256,193 C248.820298,193 243,199.491871 243,207.5 C243,213.384622 246.142825,218.450499 250.65843,220.723352 L256,232 L261.34157,220.723352 Z" id="chugoku" fill="#F75C50" sketch:type="MSShapeGroup"></path>
<!-- END_IF -->
<!-- BEGIN_IF [{place}/eq/kyushu] -->
 <path d="M458.34157,225.723352 C462.857175,223.450499 466,218.384622 466,212.5 C466,204.491871 460.179702,198 453,198 C445.820298,198 440,204.491871 440,212.5 C440,218.384622 443.142825,223.450499 447.65843,225.723352 L453,237 L458.34157,225.723352 Z" id="kyushu" fill="#F75C50" sketch:type="MSShapeGroup"></path>
<!-- END_IF -->  
<!-- BEGIN_IF [{place}/eq/shikoku] -->
<path d="M268.34157,278.723352 C272.857175,276.450499 276,271.384622 276,265.5 C276,257.491871 270.179702,251 263,251 C255.820298,251 250,257.491871 250,265.5 C250,271.384622 253.142825,276.450499 257.65843,278.723352 L263,290 L268.34157,278.723352 Z" id="shikoku" fill="#F75C50" sketch:type="MSShapeGroup"></path>
<!-- END_IF -->
<!-- BEGIN_IF [{place}/eq/kantou] -->
<path d="M193.34157,211.723352 C197.857175,209.450499 201,204.384622 201,198.5 C201,190.491871 195.179702,184 188,184 C180.820298,184 175,190.491871 175,198.5 C175,204.384622 178.142825,209.450499 182.65843,211.723352 L188,223 L193.34157,211.723352 Z" id="kantou" fill="#F75C50" sketch:type="MSShapeGroup"></path>
<!-- END_IF -->
<!-- END place:loop -->

4. SVGの読み込み

自分でも驚いたのですが、includeは下のようにhtmlファイル以外も読み込むことができます。

<!--#include file="/images/Artboard.svg" -->

あとはCSSで装飾

下のように、カスタムフィールドでたてたピンをCSS3アニメーションなどでアニメーションさせても面白いですね。SVGにも普通にCSSのプロパティが使えます!!

#hokkaido,
#kanto,
#chugoku,
#chubu,
#shikoku,
#touhoku,
#kyushu,
#kinki{
  -webkit-animation: anime1 1s ease -1s infinite alternate;
     -moz-animation: anime1 1s ease -1s infinite alternate;
       -o-animation: anime1 1s ease -1s infinite alternate;
          animation: anime1 1s ease -1s infinite alternate;
}

@-webkit-keyframes anime1 {
	0%{
  -webkit-transform: translateY(0px);
	}
	100%{
  -webkit-transform: translateY(-20px);
	}
}

@-moz-keyframes anime1 {
	0%{
  -moz-transform: translateY(0px);
	}
	100%{
  -moz-transform: translateY(-20px);
	}
}

@-o-keyframes anime1 {
	0%{
  -o-transform: translateY(0px);
	}
	100%{
  -o-transform: translateY(-20px);
	}
}

@keyframes anime1 {
	0%{
  transform: translateY(0px);
	}
	100%{
  transform: translateY(-20px);
	}
}

グローバル変数を用いたサイトの実装テクニック

a-blog cmsにおいて、グローバル変数は解決される順番が早いです。その特徴を活かして、普段私がサイトを構築する際に使っているテクニックを今回はご紹介します。

BIDとCIDの組み合わせに応じて表示する内容を制御する

BIDが64の時はこのテンプレートをつかって、CIDが32のときは又違ったテンプレートを使う。などとやっているとテンプレートを整理するのが大変になりますよね。そこで私は以下のようにフォルダを構成し、HTMLを書いています。


categoryの中のfield.html

<!-- #include file="/admin/category/bid%{BID}/field.html" -->

bid4の中のfield.html

下のソースのようにIFブロックをつかってカテゴリーIDに応じて表示するHTMLの内容を制御するようにしています。その時に正規表現を使うと非常に便利です。

<!-- BEGIN_IF [%{CID}/re/2|3|4] -->
<!-- ここにHTMLが入ります -->
<!-- END_IF -->

これでBIDやCIDに応じて表示したいテンプレートを簡単に切り分けることができますね。

エントリーのHTMLを構成する


customFieldTop.htmlの中身

<!-- #include file="/include/main/bid%{BID}/customFieldTop.html" -->

customFieldBottom.htmlの中身

<!-- #include file="/include/main/bid%{BID}/customFieldBottom.html" -->

このような作りにすることにより、エントリーページにカスタムフィールドの内容を表示させる際もBIDに応じて出力するHTMLを制御することができます。


このようにBIDをフォルダ名として使用することでフォルダ名を決める際に命名を悩む必要はありませんし、あとでなんのファイルだったかを思い返す必要がなくなりますね。

ブログに応じて実行するモジュールIDを制御する

<!-- BEGIN_MODULE Category_List id="categoryListBid%{bid}" -->
<!-- ここに出力内容が入ります -->
<!-- END_MODULE Category_List -->

モジュールIDの命名

  • カテゴリーエントリーリストの場合 CategoryEntryListBid24
  • カテゴリーリストの場合 CategoryListBid23
  • エントリーリストの場合 EntryListBid15
  • アーカイブリストの場合 ArchivesListBid43

このようにしておくことで自分の作成したモジュールがなにを表示するモジュールなのかがすぐに判断できます。
CSSの命名規則と同じようにa-blog cmsのモジュールIDの命名規則は大事だと思います。


堀 悟大

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

エントリーリスト

カテゴリーリスト

タグクラウド