Horic Design

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

4ページ目 | a-blog cms

a-blog cmsのパブリッシュ機能を使おう

パブリッシュ機能とは

a-blog cmsはHTMLに書かれているモジュールIDやIFブロックを動的に解釈して、レンダリングしていますが、そのレンダリング結果を静的に書き出してくれる機能のことです。
この機能を使うことによって、動的なテンプレートが静的になるのでその分、実行速度が速くなります。

使いどころ

めったに変更することがないテンプレートなどに使うと良いでしょう。例えば私は、ブログのヘッダーのメニューは変更することがあまりないので今回パブリッシュをしてみました。

手順

1. フォルダへの書き込み権限の設定

書き込みたいフォルダの書き込み権限を設定しておきましょう。Codaの場合は権限を変更したいフォルダを右クリックし、情報を見るから権限を変更することが出来ます。


2.パブリッシュをしてみよう

いよいよパブリッシュです。管理画面から、 「パブリッシュ」を選択してください


下のように1、2、3の手順でパブリッシュを行います。


まずは静的なHTMLを生成したいURLを入力します。例えば私の場合ですと、
http://horicdesign.com/include/header/navigationDocs.html
こちらのURLを静的に書き出したいので、navigationDocs.htmlを複製してnavigationDocs_dynamic.htmlを作成し、もともとのnavigationDocs.htmlは読み込み先となる予定のnavigationDocs_static.htmlをインクルードするようにしました。
ですので、生成元URLをhttp://horicdesign.com/include/header/navigationDocs_dynamic.htmlにしました。
下が実際に書き出したかったHTMLになります。


また書き出したい場所はCallistoというテーマフォルダの、include/header/navigationDocs_static.htmlなので、出力先パスでCallistoを選択し、隣のフォームにはinclude/header/navigationDocs_static.htmlを入力しました。
あとは2の保存をクリックし、3でパブリッシュを実行してください。
無事にサイトがもとのように表示されるはずです。

おまけ

action.htmlにパブリッシュ用のボタンを追加しておくと便利です。
action.htmlに以下のコードを追加します

<form action="" method="post" class="acms-inline-btn">
	<input type="submit" name="ACMS_POST_Publish_Apply" value="パブリッシュを実行する" class="acms-btn-admin acms-btn-admin-info">
</form>

これで管理画面に行かなくてもいつでもどこでもパブリッシュが出来ます。
サイトのパフォーマンスを気にされる方は是非使ってみてはいかがでしょうか?


js-biggerlinkをtarget="_blank"にも対応させる

js-biggerlinkとは

js-biggerlinkとは、要素の中にリンクが含まれていた場合、その要素をクリックすることでリンクに移動することが出来るようになるjQueryのプラグインです。
しかし、既存のjs-biggerlinkはリンクにtarget="_blank"つまり(別タブで開く)記述がされていても無視されてしまいます。

js-biggerlinkの修正版をgithubにあげました

そこで、target="_blank"のリンクを子に持つ要素がクリックされると別タブで開くようにするjs-biggerlinkの修正版を作りました。作った修正版は下に載せております。


a-blog cmsの組み込みjsにも有効

今回の修正版は読み込んでもらうだけで、a-blog cmsの組み込みjsでもtarget="_blank"の記述のあるリンクの親要素をクリックすると別タブでリンク先を開いてくれます。

デモ

下のデモは上がtarget="_blank"を記述したもの、下が何も指定していないものになります。下のデモでは私のポートフォリオページに飛びます。それぞれをクリックして動作を確かめてみましょう。


開発中のテーマを自分だけに見えるようにルールを設定する方法

今回やること

ブログを公開している時に、デザインを変えたいと思うことがあるとおもいます。しかし現行のテーマのCSSなどを直接触るとデザインが崩れてしまいます。そんなときに訪問者が来たらいやですよね?
なので、自分にだけ開発中のテーマをこっそり表示させるテクニックを公開したいと思います。
そのためにa-blog cmsのルールという機能を使います。

ルールについて

みなさん、a-blog cmsのルールの機能をご存知ですか?ルールとは、ある条件下(例えば、スマートフォンのとき、2013~2014年までのとき)にコンフィグを個別に設定できる機能です。今回はユーザーエージェントを条件としてつかいます。

1. config.system.yamlの設定

config.system.yamlはa-blog cmsのprivateフォルダの中にあります。
編集する項目はua-valueua-labelua-regexua-parentです、これらの項目をまるっとconfig.system.default.yamlからコピーして、config.system.yamlに貼付けましょう。
今回は、Testというユーザーエージェントを追加します。
既存のユーザーエージェントの構造を壊さないために、それぞれの項目の一番下に、値を追加するとよいでしょう。
変更済みのソースは下のようになります。

#-----------------------------------------------
# config.system.yaml user setting
# 
# config.system.default.yamlの値をこのファイルで
# 上書きすることが出来ます。
#-----------------------------------------------

### 例 jQueryのバージョンを切り替える
# jquery_version : 1.11.1 # (2.1.1|2.0.3|1.11.1|1.10.1|1.9.1|1.8.3|1.7.2|1.6.4) 2.xはIE9〜

ua_label  :
  - mobile phone
  - "&nbsp;&nbsp;&nbsp;&nbsp;docomo"
  - "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;i-mode2.0"
  - "&nbsp;&nbsp;&nbsp;&nbsp;au"
  - "&nbsp;&nbsp;&nbsp;&nbsp;SoftBank"
  - "&nbsp;&nbsp;&nbsp;&nbsp;WILLCOM"
  - smart phone
  - "&nbsp;&nbsp;&nbsp;&nbsp;iPhone"
  - "&nbsp;&nbsp;&nbsp;&nbsp;Android phone"
  - tablet
  - "&nbsp;&nbsp;&nbsp;&nbsp;iPad"
  - "&nbsp;&nbsp;&nbsp;&nbsp;Android tablet"
  - PC
  - "&nbsp;&nbsp;&nbsp;&nbsp;Internet Explorer"
  - "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;6.x"
  - "&nbsp;&nbsp;&nbsp;&nbsp;Safari"
  - "&nbsp;&nbsp;&nbsp;&nbsp;Firefox"
  - "Web Signage"
  - "Test"

ua_value  :
  - Mobile
  - docomo
  - i-mode2.0
  - au
  - SoftBank
  - WILLCOM
  - SmartPhone
  - iPhone
  - AndroidPhone
  - Tablet
  - iPad
  - AndroidTablet
  - PC
  - Internet Explorer
  - Internet Explorer 6.x
  - Safari
  - Firefox
  - Web Signage
  - Test

ua_regex  :
  - 
  - "@^DoCoMo@"
  - "@^DoCoMo.+\(c500;@"
  - "@^KDDI-|^UP\.Browser@"
  - "@^SoftBank|^Semulator|^Vodafone|^Vemulator|^MOT-|^MOTEMULATOR|^J-PHONE|^J-EMULATOR@"
  - "@^Mozilla/3\.0\((?:DDIPOCKET|WILLCOM);@"
  - 
  - "@^.+iPhone.+AppleWebKit.+Mobile.+$@"
  - "@^.+Android.+AppleWebKit.+Mobile.+$@"
  - 
  - "@^.+iPad;.+AppleWebKit.+Mobile.+$@"
  - "@^.+Android.+AppleWebKit.+$@"
  -
  - "@MSIE|Trident@"
  - "@MSIE 6@"
  - "@Safari@"
  - "@Firefox@"
  - "@WebSignageApp@"
  - "@Test@"

ua_parent :
  - 
  - 0
  - 1
  - 0
  - 0
  - 0
  - 
  - 6
  - 6
  - 
  - 9
  - 9
  -
  - 12
  - 13
  - 12
  - 12
  -
  -

ua_label

ua_labelは下の図のようにルール設定のページでユーザーエージェントのセレクトボックスに表示するための文字列となります。
今回は"Test"としておきます。


ua_value

ua_valueはどのラベルが選択されているかを判定するためのものです。ここはラベル名と同じにしておくのが適当でしょう。

ua_regex

ua_regexはアクセスしてきたユーザーエージェントの特定の文字列パターンと一致するかを判定するものになります。
Testという文字が含まれている場合にルールを適応したいので、今回は@Test@としました。

ua_parent

これは、ユーザーエージェントがどのユーザーエージェントの子供であるかを設定するものになります。
例えば、au携帯の子供です。親の携帯はリストの0番目にあるので、3番目のauには0が設定されています。
今回設定するTestはだれの子供でもないのでハイフンだけ書いておけば大丈夫です

2. ルールの設定

まずは、下の図のようにルール名とその説明を書きましょう。


ユーザーエージェントのテキストボックスをそれぞれ、=Testに設定しましょう。これで「ユーザーエージェントがTestのとき」という意味になります。


あとは、作成したルールから下のようにコンフィグをクリックし、


開発用テーマを設定しましょう


3.ブラウザの設定

Safariの場合

開発 >> ユーザーエージェント >> その他から、新しくTestと入力し、保存しましょう。



Google Chromeの場合


デベロッパーツールのスマートフォンアイコンをクリックし、Emulation >> Networkからユーザーエージェントを変更してください。
これにより、開発中のテーマが見られるかと思います。


エントリーをcsvに書き出すためのボタンを作ってみよう

まずは、下のボタンをクリックしてみてください。私がいままで書いたエントリーの情報がCSVとしてダウンロード出来ると思います。


a-blog cmsでこのようなボタンをどのように生成すればよいでしょうか?ACMS_POST_Downloadというダウンロードモジュールを使います。下に作業手順を示します。

  1. ダウンロード用のフォームを用意
  2. csvの中身を実装

1.ダウンロード用のフォームを用意

<form action="sample2.csv" method="post">
    <input type="hidden" name="bid" value="%{BID}" />
    <input type="hidden" name="tpl" value="sample/sample2.csv" />
    <input type="hidden" name="charset" value="UTF-8" />
    <input class="cs-btn" type="submit" name="ACMS_POST_Download" value="CSVをダウンロード" />
</form>

上記のようなソースを書けば、ダウンロード用のフォームの完成です。その時のポイントを下にまとめました。

  1. formactionプロパティにダウンロードした際につけられるファイル名を記述。
  2. name="bid"のinput要素のvalueにダウンロードさせたいブログの番号を記述
  3. name="tpl"のinput要素のvalueにダウンロード用のデータを出力するファイルの場所を記述
  4. name="charset"のinput要素のvalueにダウンロードするファイルの文字符号化の形式を記述

2.CSVの中身を実装

あとは、CSVの中身を実装すれば完成です。わたしはEntry_Summaryモジュールを使ってCSVを作りました。CSVの形式になっていればどのように実装しても良いと思います。

タイトル,URL,カテゴリー名,公開日時
<!-- BEGIN_MODULE Entry_Summary id="csvEntrySummary" --><!-- BEGIN entry:loop -->"{title}","{url}","{categoryName}","{date#Y}年{date#m}月{date#d}日"
<!-- END entry:loop --><!-- END_MODULE Entry_Summary -->

参考



複数入力欄と、バリデータ機能(a-blog cms)

a-blog cmsのバリデータ機能をうまく使えていますか?今回は下の例のように値を複数入力する際に、どちらか1つにでも入力が完了していなければ、エラーメッセージを表示するということをa-blog cmsでやってみました。
下の項目に値を入れて試してみてください。どちらか一方に値が入っていなければエラーのメッセージを表示するはずです。


実装方法

どちらか一方にでも値が入っていない時に警告を出すには、IFブロックとバリデータを同時に使ってエラー文を表示します。ソースは下のようになります。

<!-- BEGIN_IF [<!-- BEGIN zip1:validator -->error<!-- END zip1:validator--><!-- BEGIN zip2:validator -->error<!-- END zip2:validator -->/nem/] -->
    <p class="alert">郵便番号が完全に入力されていません。</p>
<!-- END_IF -->

解説

バリデータはIFブロックよりも先に実行されます。よって仮にzip1にだけ、値が入力されていない場合は、バリデータが解決された段階で、IFブロックの中身は次のようになります。

<!-- BEGIN_IF [error/nem/] -->
    <p class="alert">郵便番号が完全に入力されていません。</p>
<!-- END_IF -->

nem判定

IFブロックのnemはスラッシュの左側に何も文字や数字がなければ中身が展開されます。今回の場合はerrorという文字があるので、IFブロックの中のアラート文が表示されます。

両方ともに値が入っていると、バリデータが解決された段階で、IFブロックの中身は次のように、nemの前に値がありませんので、中身が展開されませんね?

<!-- BEGIN_IF [/nem/] -->
    <p class="alert">郵便番号が完全に入力されていません。</p>
<!-- END_IF -->

みなさんも、複数入力欄のどれかに値が入っていない時に警告文を表示したい時には今回のテクニックを使ってみてはいかがでしょうか?


堀 悟大

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

エントリーリスト

カテゴリーリスト

タグクラウド