CMS Archive

google-code-prettifyをa-blog cmsで試してみました。

導入方法は、SyntaxHighlighterのときとほぼ一緒です。

ダウンロードしてくる

google-code-prettifyをダウンロードしてきます。

ちなみにですが、google-code-prettifyはApache License 2.0となっております。

zipを展開しておいて、フォルダ名をprettifyみたいにしておきます。

index.htmlに追記・1

使用中のテーマのindex.htmlに、以下を追記します。

<script type="text/javascript" src="prettify/prettify.js"></script>
<link rel="stylesheet" type="text/css" href="prettify/prettify.css" />

cssとかsqlとかの場合は、別途フォルダ内のjsを読み込んであげます。

index.htmlに追記・2

マニュアルみたいなのには、bodyタグの所にonload=”prettyPrint()”って書いてね！　とあります。

a-blog cmsはjQueryが使える状態になっているので、今回は以下のようにしてみました。

<script type="text/javascript" src="prettify/prettify.js"></script>
<script type="text/javascript">
	$(function(){
		prettyPrint();
		})
</script>
<link rel="stylesheet" type="text/css" href="prettify/prettify.css" />

テーマフォルダにアップロード

使用中のテーマフォルダ内に、prettifyフォルダ＆index.htmlファイルをアップロードします。

a-blog cms側の設定

a-blog cmsにログインして、管理ページ>カスタマイズ管理>コンフィグ>（エントリーの）編集設定に移動します。

テキストタグセレクトの箇所に、prettify用のタグを追記します。

タグ

pre.prettyprint

ラベル

prettyprint

ここまで終わったら、保存ボタンを押しておきます。

あとはエントリの際に、prettyprintを選択してあげればOKです。

マニュアルみたいなのには、ASは対応していないと書かれていたんですが、試してみたら、意外といい感じになってくれました。（javaやmxmlはOKだから？）

カラーを変更したい！　とかは、prettify.cssを編集すればいいんじゃないかと…

個人的にはSyntaxHighlighterの方が好きなんですが、google-code-prettifyでも（割と）いい感じになるということで…

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。

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