Home > CMS

CMS Archive

a-blog cmsでgoogle-code-prettifyを使ってみる


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でも(割と)いい感じになるということで…

Progression4とa-blog cmsの連携(後編)


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の連携(前編)


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を使ってみる


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。

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

ホーム > CMS

Search
Feeds
Meta

flashDevelopスポンサー

Return to page top