flabaka

a-blog cmsの設定を変更

ではa-blog cms側をカスタマイズしていきます。

画像サイズ

まずは、アップロードする画像のサイズを変更したいので、管理画面→カスタマイズ管理→コンフィグ→エントリー→編集設定に移動します。

今回使う画像は、サムネイル画像（200px×100px）と詳細ページに表示する大きめの画像（400px×200px）なので、サイズセレクト→イメージサイズ選択肢の値を以下の様に変更してあげます。

画像URLサイズ選択肢の方も同じ様に変更しておきます。

続いて、イメージ編集→モバイル用画像の最大幅の値も変更してあげます。

イメージサイズや画像URLサイズを200pxに設定しても、ここのモバイル用画像の最大幅が160pxだった場合、画像をアップロードすると作成されるtinyの画像が、160pxになってしまいました。

なので、ここの値も200pxに変更してあげます。

圧縮率は画像編集ソフトの方で設定しているので、a-blog側では100%に設定してあります。

カスタムフィールドの作成

詳細ページから、「→もっと詳しく」のボタンを押した際に遷移するブログ記事のURLを格納しておくカスタムフィールドを作成します。

作り方は、a-blog cmsのカスタムフィールドを使う際の注意点の記事をご覧下さい。

ソースだけ掲載しておきます。（テーマフォルダ\themes\vicuna\admin\entry\entry.html）

<!-- BEGIN_MODULE Admin_Entry_Edit -->
<!-- BEGIN step#apply -->
（略）
<tr class="detail-fade-body">
　　　　<th>トラックバック</th>
　　　　<td><textarea name="trackback_url" cols="30"></textarea>
　　　　<input type="hidden" name="entry[]" value="trackback_url" /></td>
</tr>
<!--以下の記述を追記-->
<tr class="detail-fade-body">
　　　　<th>Blogの記事へ</th>
　　　　<td><input type="text" name="blogpost" size="50" class="entryFormInputText" />
　　　　<input type="hidden" name="field[]" value="blogpost" /></td>
</tr>
<!-- END step#apply -->
<!-- BEGIN step#reapply -->
（略）
<tr class="textM detail-fade-body">
　　　　<th>トラックバック</th>
　　　　<td><textarea name="trackback_url" cols="30">{trackback_url}</textarea>
　　　　<input type="hidden" name="entry[]" value="trackback_url" /></td>
</tr>
<!--以下の記述を追記-->
<tr class="textM detail-fade-body">
　　　　<th>BlogURL</th>
　　　　<td><input type="text" name="blogpost" size="50" value="{blogpost}" />
　　　　<input type="hidden" name="field[]" value="blogpost" /></td>
</tr>
（略）
<!-- END step#result -->
<!-- END_MODULE Admin_Entry_Edit -->

このファイルもテーマフォルダ内に階層構造を保ったまま、アップしてあげます。

エントリする

ここまで終わったら、あとは記事を投稿してくだけです。

画像をアップする際、400×200pxのものを事前に用意し、サイズは「そのまま」でアップロードします。

すると、●●●●.jpg（400×200px）とtiny-●●●●.jpg（200×100px）がアーカイブフォルダ内に作成されます。

こうしておくと、昨日のテンプレートのpathと設定しているところには、●●●●.jpg（400×200px）へのリンクが。tiny_pathと設定しているところには、tiny-●●●●.jpg（200×100px）へのリンクが、それぞれ作成されることになります。

あとは、ファイル名をPRMLのscene nameに。BlogURLを、ブログの詳細記事へのリンクとして使いたかったので、それぞれ以下の様に設定いきます。

ここまで出来たら、投稿を保存します。

a-blog cmsのディレクトリ/ファイル名.xmlにアクセスしてあげて、投稿した値がXML側に反映されていれば、OKです。

吐き出されるFeed（XML）を、Progression側で読み込んであげる

ここら辺りも、MTやWPの場合と同じですね。

override protected function atSceneLoad():void {
　　　　addCommand(
　　　　　　　　new LoadURL( new URLRequest( "a-blog cmsのディレクトリ/ファイル名.xml" ) ),
　　　　　　　　function() {
　　　　　　　　　　　　trace(this.latestData);
　　　　　　　　}
　　　　);
}

Progression4の場合だと、LoaderListという便利なものがあるので、それを使ってあげるといいかと思います。

Progression4とa-blog cmsの連携を、ここ数日試していました。

以前もProgressionとa-blog cmsの連携を試そうと思ったことがあったんですが、その時は、a-blog cmsがPRML形式のXMLを書き出せなかったので、断念…

ですが、バージョン1.2シリーズからPRML形式のXMLの書き出しにも対応したので、「それなら、ちょっとやってみるか！」と。

作ってみたのがこれ

とりあえず、作ってみたのがこれ。

やることは、一緒

WPやMTとProgressionの連携を試されたことがある方なら、やることは一緒です。

流れ的には、こんな感じ。

1. テンプレート（XMLファイル）を作る
2. テーマフォルダにアップする
3. a-blog cmsの設定を変更
4. エントリする
5. 吐き出されるFeed（XML）を、Progression側で読み込んであげる

テンプレートさえ作れたら、あとは何とかなるって感じです。

PRML形式のテンプレートを作る

a-blog cmsのインストール方法はここでは割愛。（a-blogは最新バージョンの1.2.1を使っています！）

上記のサイトで使っているテンプレートは、以下の通り。

<?xml version="1.0" encoding="utf-8"?>
<prml version="2.0.0" type="text/prml.plain">
<!-- BEGIN_MODULE Entry_Summary --><!-- BEGIN entry:loop -->
	<scene name="{ecd}[trim4ext(.html)]" cls="flabaka.scenes.PhotoScene" title="{title}">
		<title>{title}</title>
		<date>{date#Y}-{date#m}-{date#d}</date>
        <entrySummary>{summary}</entrySummary>
        <!-- BEGIN image:veil -->
        <path>%{BLOG_URL}{path}</path>
		<!-- END image:veil -->
		<tiny_path>%{BLOG_URL}{tinyPath}</tiny_path>
		<blogpost>{blogpost}</blogpost>
    </scene><!-- END entry:loop -->
<!-- END_MODULE Entry_Summary --></prml>

テンプレートの作成方法については、Flashとの連携のチュートリアルを参考にすると良いかと思います。

ちなみにですが、<blogpost>{blogpost}</blogpost>という箇所は、カスタムフィールドを使っています。（詳しくは次回のエントリで）

pathには詳細ページに遷移した際に表示する大きな画像を、tiny_pathにはサムネイルに表示する小さな画像を設定しています。（ここらあたりも次回のエントリで）

あとは、ソースを任意のファイル名で保存し、使っているテーマフォルダ内（index.htmlファイルと同一階層）にアップしてあげます。

WPの場合だと、テーマフォルダにXMLファイルをアップしたら、ページへと移動した後にテンプレートを、デフォルトテンプレート→アップしたXMLファイルに変更してあげる必要がありますよね？

ですが、a-blog cmsの場合は、テーマフォルダにXMLファイルをアップしてあげるだけでOKです。

仮にhttp://flabaka.com/hoge/というディレクトリにa-blog cmsを設置しているとします。

そこで使用しているテーマフォルダ内に、上記のソースをhoge.xmlというファイル名にしてアップします。

あとは、http://flabaka.com/hoge/hoge.xmlにアクセスしてあげれば、PRML形式のフィードが表示されるって訳です。

う～ん、素敵！

a-blog cmsのグローバル変数を使った際に出力されるものを、きちんと理解していなかったので、メモ。

グローバル変数

a-blog cmsを設置したディレクトリをtestとした場合

グローバル変数	出力されるもの
%{HOME_URL}	http://flabaka.com/test/
%{BLOG_URL}	http://flabaka.com/test/
%{BASE_URL}	http://flabaka.com/test/
%{HTTP_ROOT}	http://flabaka.com/test/
%{ROOT_DIR}	/test/
%{ARCHIVES_DIR}	/test/archives/

こんな感じで出力されます。

ちなみにEntry_Summaryモジュールを使っていて、投稿した画像のパスを取得したい場合に{path}と設定してあげると、archives/001/201001/●●●●.jpgと表示されます。

設定出来る値の詳しいことは、a-blog cmsのリファレンスのビルトインモジュールの箇所に詳しく書かれています。

なので、%{BLOG_URL}{path}みたいにグローバル変数と組み合わせてあげると、http://flabaka.com/test/archives/001/201001/●●●●.jpgのように、画像の絶対パスを取得出来ます。

a-blog cmsでshadowbox.jsを使いたかったので、導入してみました。

流れとしてはこんな感じ？

1. shadowbox.jsを取ってくる
2. index.htmlにいろいろ設定する
3. エントリする

shadowbox.jsを取ってくる

shadowbox.jsはここからダウンロードしてきます。

フォルダ名をshadowboxとかにリネームして、使っているテーマフォルダにアップロードしておきます。

index.htmlにいろいろ設定する

使っているテーマフォルダ内のindex.htmlにいろいろ設定します。

<head>
（略）
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
    language:   "ja",
    players:    ["img","swf"]});
</script>
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css" />

a-blog cmsはデフォルトでjQueryを使える様に設定されているので、別途jQueryをDLしてきて、読み込んであげる必要はありません。（ただし現時点で使えるjQueryのバージョンは、1.2.6）

あとplayersは、imgとswfが使えればいいかな？　って感じなので、とりあえずそれだけ読み込んでおきます。

エントリする

あとは投稿するだけなんですが、投稿の度にshadowboxを使いますよ～！　っていう記述を書くのは結構面倒…

なので、shadowbox用のユニットを作成してみました。

カスタマイズ管理>コンフィグ>編集設定>ユニットの追加ボタンを選択。

モードとラベルを設定し、保存。

ユニット設定に移動して、追加されたshadowboxのユニットに、テキストを追加。

タグをマークダウンにしておいて、あとはこんな感じに書いておく。

<p><a href="swfへのパス" rel="shadowbox;width=550;height=400;options={flashParams:{bgcolor:'#ffffff'}}" title="あああああ">あああああ</a></p>

で、保存。

エントリでshadowboxを使う場合は、このユニットを追加してあげて、パラメーターだけ変更してあげればOK。

他にもっといい方法がありそうな気がするけど…

a-blog cmsのカスタムフィールドを使う場合の注意点をメモ

設定した値が…

カスタムフィールドの追加については、マニュアルに詳しく書かれています。

今回はエントリーにカスタムフィールドを追加したいので、以下の手順を踏みました。

1. テーマフォルダ>system/admin/entry/edit.htmlをコピー
2. 使用中のテーマフォルダ/admin/entry/edit.htmlに、フォルダ構造を保ったままペースト
3. コピーしたedit.htmlファイルに以下を記述

リンク先URLというブロックを丸ごとコピーして、値だけ変更しました。

<!-- BEGIN_MODULE Admin_Entry_Edit -->
<!-- BEGIN step#apply -->
（略）
<!-- トラックバックの下あたりに記述 -->
<tr class="detail-fade-body">
　　　　<th>カスタムフィールド</th>
　　　　<td><input type="text" name="custom" size="50" class="entryFormInputText" />
　　　　　　　　<input type="hidden" name="entry[]" value="custom" /></td>
</tr>
（略）
<!-- BEGIN step#reapply -->
（略）
<!-- トラックバックの下あたりに記述 -->
<tr class="textM detail-fade-body">
　　　　<th>カスタムフィールド</th>
　　　　<td><input type="text" name="custom" size="50" value="{custom}" />
　　　　　　　　<input type="hidden" name="entry[]" value="custom" /></td>
</tr>
（略）

途中、マニュアルと（コピーしたコードに）name属性の値に違い（entryとfield）が見られたんですが、とりあえずそのまま実行。

このファイルをサーバーにアップして、ログインして（カスタムフィールドが反映されているか）確認してみます。

カスタムフィールドというフォームが出来ているので、そこに値を入力し、保存。

で、再度、編集画面に戻ってくると…

先に設定した値が消えています…

nameはfieldにする！

う〜ん、何でだろう…と思って、あれこれやっていたんですが…

マニュアルのname属性の箇所に、以下のように書かれていました。

この値は、field[]で固定されます。他の値を指定することはできません。
ブログ・カテゴリー・エントリー・ユーザーに関わらず共通です。

つまり、カスタムフィールドのname属性に、field[]以外の値を設定しては駄目！　っていうことなんですね。

（多分ですが）entryっていう値は、デフォルトで設定されているもの（タイトルとかファイル名とかリンク先URLなど）だけに使えて、あとからユーザーが追加するものには、使えないってことかと…

で、先のソースを修正。

<!-- BEGIN_MODULE Admin_Entry_Edit -->
<!-- BEGIN step#apply -->
（略）
<!-- トラックバックの下あたりに記述 -->
<tr class="detail-fade-body">
　　　　<th>カスタムフィールド</th>
　　　　<td><input type="text" name="custom" size="50" class="entryFormInputText" />
　　　　　　　　<input type="hidden" name="field[]" value="custom" /></td>
</tr>
（略）
<!-- BEGIN step#reapply -->
（略）
<!-- トラックバックの下あたりに記述 -->
<tr class="textM detail-fade-body">
　　　　<th>カスタムフィールド</th>
　　　　<td><input type="text" name="custom" size="50" value="{custom}" />
　　　　　　　　<input type="hidden" name="field[]" value="custom" /></td>
</tr>
（略）

entryをfieldに修正して試してみると、保存後も値が表示されました。

マニュアルをちゃんと読めってことですね、はい。