Home > Archives > 2010-01

2010-01

グローバル変数で出力されるもの


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。

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

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


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

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

Flashカレンダーが出来ましたよ!


Flashに関するイベント情報を網羅した『Flashカレンダー』が出来ましたよ!(カレンダー作ろう! と提案されたのは@whirlpowerさん

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

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

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

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

皆さん、使いましょう!

a-blog cms(編集設定とユニット設定) + SyntaxHighlighter


ブログの記事にて、ソースコードを表示させる際、SyntaxHighlighterが便利ですよね?

a-blog cmsで使う場合

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

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

(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のクラス設定とかにも応用出来るかと思います。

Home > Archives > 2010-01

Search
Feeds
Meta

flashDevelopスポンサー

Return to page top