では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という便利なものがあるので、それを使ってあげるといいかと思います。

以前も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を設置したディレクトリをtestとした場合

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

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

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

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

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

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。

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

設定した値が…

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

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

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に修正して試してみると、保存後も値が表示されました。

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

Flashカレンダーを追加したい場合は、下のボタンをクリックしてください。

すると、Googleカレンダーのログイン画面に遷移するので、Googleアカウントを入力。

Flashカレンダーを追加するか聞かれるので、「追加する」を選択。

すると、Flashカレンダーが追加されます。

皆さん、使いましょう！

a-blog cmsで使う場合

a-blog cmsでSyntaxHighlighterを使いたい場合、どうするか？

既に記事にされている方がいらっしゃいます。

• Syntax Highlighterも対応したよ！（ハブろぐさん）

（a-blog cmsを触っているうちに）エントリの際に毎回、<pre class=”brush: as3;”>～ここにコードを記述～</pre>って書くのをどうにか出来ないかなぁ…と思っていました。

そこで、a-blog cmsのユニット機能を使ってあげたらいいんじゃない？　と思ったので、ちょっと試してみました。

事前の準備

何はともあれ、SyntaxHighlighterをDLしてきます。

で、a-blog cmsのテーマフォルダ内のindex.htmlと同一階層に（syntaxというフォルダ名で）設置しておきます。

index.htmlに以下を記述

<head>
（略）
<script type="text/javascript" src="syntax/scripts/shCore.js"></script>
<script type="text/javascript" src="syntax/scripts/shBrushAS3.js"></script>
<link type="text/css" rel="stylesheet" href="syntax/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="syntax/styles/shThemeDefault.css"/>
<script type="text/javascript">
	SyntaxHighlighter.config.clipboardSwf = 'syntax/scripts/clipboard.swf';
	SyntaxHighlighter.all();
</script>
</head>

設置したsyntaxフォルダとindex.htmlファイルをアップしておきます。

編集設定

a-blog cmsにログインして、カスタマイズ管理>コンフィグを選択します。

編集設定を選択します。

ユニットの追加ボタンの箇所に、「モード：ascode、ラベル：as3コード」みたいに追記します。

次に、テキストタグセレクトの箇所に、「タグ：pre.brush:as3、ラベル：as3」みたいに追記します。

保存ボタンを押しておきます。

ユニット設定

次に、ユニット設定を選択します。

すると画面の下に、以下のものが追加されています。

先程のユニットボタンの追加で行ったものが、ここに反映されています。

で、テキストを追加ボタンを押して、タグを本文からas3に変更して保存しておきます。

最後に、保存ボタンを押しておきます。

エントリを書く

では、エントリをしてみましょう！

こんな感じになっています。（ユニット追加ボタンが、ここにも反映されています！）

で、コードを挿入したい場合は、追加から「as3コード」のボタンを押して、以下のような感じにしてあげます。

as3コードのタグは、（ユニット設定の箇所で設定した通り）本文ではなくas3になっているので、テキストエリアにはコードを書いてあげるだけでOKです。

で、保存ボタンを押してあげると…

SyntaxHighlighterが、無事適用されます。

このように、編集設定とユニット設定を組み合わせてあげれば、エントリの度に、<pre class=”brush: as3;”>～ここにコードを記述～</pre>を書かなくて済むので、ちょっとは便利かと…

テキストタグセレクトについては、ここに詳しく書かれています。

この方法は、SyntaxHighlighterだけでなく、CSSのクラス設定とかにも応用出来るかと思います。

先日、a-blog cmsを1.2.1にアップデートしました。

アップデートの方法などは、ダウンロードしてきたフォルダ内に入っているPDFファイルを読めばすんなりいったんですが、一点気を付けることが…

PDFに従って、もろもろファイルをアップして、ブラウザ上で、アップデート作業を終了。

で、setupフォルダを削除して、config.server.phpのDEBUG_MODEを変更するんですが…

その際、僕は、ローカルにあるconfig.server.phpのDEBUG_MODEを変更して、サーバーにアップしちゃったんですね。

そして、怒られました。

怒られない為には…

config.server.phpには、接続先のDB情報を設定する箇所があります。

アップデートの途中で、（ブラウザ上で）DBの接続先やらパスワードやらモロモロ設定する箇所があるんですが、その際に設定した値が、config.server.php側に反映される（値が書き込まれる）んですね。

ローカルにあるconfig.server.phpには、（当然ながら）その設定がなされていない。

（DEBUG_MODEだけ変更して）それをアップしちゃうと、DBが見つからない…と怒られるということなんです。

まぁ、怒られて、当然です！

なので、setupフォルダを削除したら、config.server.phpをGET。で、DEBUG_MODEを変更して、PUT。

こうすれば怒られません。

もう一度、（config.server.phpに）接続先のDB情報を設定してもいいって方は、GETしてからPUTなんて、しなくてもいいんですけど…

前回のアップデートの際にも、同じミスを犯したのに、そのこと自体をド忘れしていたので、メモっておきます。

どんなものかというと、Progressionのコマンド内の選択した箇所のソースを、外部クラスファイルに変換してくれるというマクロです。

マクロってどうやって実行するの？　という方がいらっしゃるかもしれないので、一応エントリしておきます。

以前にbkzenさんが、『FlashDevelop Macro ExecuteScript で無限の可能性』という記事をエントリされているので、ご存じの方もいらっしゃるかも知れませんが…

ファイルを保存しておく

フォーラムのトピック内のbkzenさんの「ちょっと改造して、テンプレートが保存されていない場合、新たにテンプレートを保存するようにしました。」と書かれているところのコードをコピーして、拡張子を.csで保存しておきます。（ファイル名：CommandFromSelection.cs）

僕の場合は、『Progression4用FlashDevelopテンプレート』を使っているので、.cs内のテンプレートのパスを以下の様に変更しています。

templatePath = PathHelper.TemplateDir + "\\ProjectFiles\\AS3Project\\Progression4" + TEMP_PATH;

保存したら、任意の箇所（今回はCドライブ直下に、macrosというフォルダを作成）に置いておきます。

FlashDevelop側からマクロを実行

では、早速マクロを実行してみましょう！

Progressionのプロジェクトファイルを起動し、FlashDevelopを立ち上げておきます。

で、外部ファイル化したいコードをドラッグして選択しておいて、Mactos>Execute Scriptを選択します。

protected override function atSceneLoad():void {
	addCommand(
				// ここから
				new Trace("新年"),
				new Trace("明けまして"),
				new Trace("おめでとう"),
				new Trace("ございます！")
				// ここまで
			);
}

上記の様なコードだったら、//ここから～//ここまでの中身（new Traceの部分）をドラッグして選択しておくってことです。

そうすると、ファイルを開くダイアログボックスが現れるので、そこでC>macros>CommandFromSelection.csを選択します。

ファイル名は何にしますか？　と聞かれるので、そこで任意の名前を入力します。（今回は、TraceComとしてみました）

すると先のコードが、以下のように置き換わります。

protected override function atSceneLoad():void {
	addCommand(
				// ここから
				new TraceCom()
				// ここまで
			);
}

で、プロジェクト内にTraceCom.asファイルが作成されます。

そちらはこんな感じになります。

　　　（略）
public class TraceCom extends SerialList
   {
      public function TraceCom( initObject:Object = null )
      {
         super( initObject );

         addCommand(
				new Trace("新年"),
				new Trace("明けまして"),
				new Trace("おめでとう"),
				new Trace("ございます！")
         );
      }
　　　（略）

う～ん、凄いっ！

と、まぁ、こんな感じなんですが、毎回実行するファイルを選択するのって、面倒ですよねぇ…

そんな時は、Edit Macrosを設定しておくと楽チンです！

Edit Macrosの設定

Macros>Edit Macrosを選択します。

デフォルトで4つリストがあるかと思います。追加したいので、Addボタンを押します。

Untitledとなっているものを選択して、Labelに任意の名前を設定します。（今回はCommandFromSelectionにしてみました）

次に、Entriesの箇所を選択すると、右側に現れる…というボタンをクリックし、文字列コレクションエディタを開いて、以下のソースを記述します。

ExecuteScript|Development;C:\macros\CommandFromSelection.cs

このように設定してから、もう一度、マクロを実行してみましょう！

外部ファイル化したいコマンドを選択してから、Macros>CommandFromSelectionを選択します。

あとは（先の場合と）一緒です。

メニューから選択するの面倒！　っていう方は、ショットカットキーも設定可能です。

Macros>Edit MacrosからCommandFromSelectionを選択し、Shortcutの箇所に任意のキーを割り当てておけばOKです。

Cドライブ直下は…

マクロのファイルをCドライブ直下ではなく、FlashDevelopのフォルダ内に入れておきたいって方は、こうしておくといいかと思います。

★Windows XPの場合

Local Settingの場合（Tools>Application Fileの方）

ExecuteScript|Development;$(UserAppDir)\macros\CommandFromSelection.cs

FlashDevelopフォルダ以下に、macrosというフォルダ（Snippetsとかと同一階層）を作成し、そこに.csファイルを設置しておきます。

マクロの文字列コレクションエディタには、$(UserAppDir)という記述を付け加えてあげます。

$(UserAppDir)の箇所を$(BaseDir)にしても、同じように動作するみたいです。

Program Filesの場合

ExecuteScript|Development;$(AppDir)\macros\CommandFromSelection.cs

どうしてもProgram Filesの方がいいという方は、Program FilesのFlashDevelopフォルダ内に、macrosフォルダを作成、ファイルを配置した上で、文字列コレクションの$(UserAppDir)を$(AppDir)に変更してあげればOKです。

ついでなので、Edit Macrosのその他の設定も書いておきます。

AutoRun

デフォルトではfalseになっています。

これはFlashDevelopを起動した際に、このマクロを実行するかどうか？　の設定です。

試しにこれをtrueにしてみると…

こんな感じで怒られます。

今回は、テキストをドラッグ→外部クラス化するマクロを実行したいので、ここの値はfalseにしておきましょう！

Image

これは何かというと、アイコン画像を適用させる場合に設定します。

試しに、Imageに187と設定してみます。すると…

こんな感じでアイコンが表示されます。

その数値はどっから来たの？　と思われた方は、『Icon Composerって便利！』というエントリに詳しく書いてありますので、そちらをご覧ください。

数値は複数アイコンの指定も可能です。

Imageに、37|16|-1|-1と設定してみると…

こんな感じで複数のアイコンを表示させることも可能です。

ここら辺りは、FlashDevelop>Setting>MainMenu.xml内のimageに値を設定するのと、一緒ですね。

追記

マクロ機能を使って作成する外部クラスファイルですが、SerialList限定になっていますよね？

SerialかParallelを選択可能にしたら便利かな？　と思ったので、ちょっと試してみました。

CommandFromSelection.csの89行目あたりの記述

public class $(FileName) extends SerialList $(CSLB){

となっているところを、以下のように変更

public class $(FileName) extends $$(ListType=SerialList,ParallelList) $(CSLB){

こうしておくと、コードを選択→マクロを実行→ファイル名を指定の後で、SerialListかParallelListどちらですか？　みたいなダイアログが出るので、どちらかを選択してOKを押すと、そちらの値が適用されます。

この方法は、自作Snippetsを作る場合と一緒ですね。

注意点

※テンプレートの保存先（以下のパス）に既にファイルがある場合

templatePath = PathHelper.TemplateDir + "\\ProjectFiles\\AS3Project\\Progression4" + TEMP_PATH;

その場合は、C>macros>CommandFromSelection.csを修正しただけでは、この手法が使えません。

テンプレートの保存先にあるファイルも直接修正、もしくは、（一端）このファイルを削除してあげる必要があります。

（今年は）名古屋に遠征してみたり、某イベントに出演させて頂いたり、某勉強会を立ち上げたり、元祖ラーメンサラダを食べに行ったり…本当にいろいろなことがあった一年でした。

いや～、楽しかった！

来年も今年同様、フットワークは軽～く、いろいろ動き回ろう（某勉強会に遠征？）かなぁ…と思っています。

今年一年、いろいろお世話になりました！　来年も宜しくお願い致します！

皆様、良いお年を！