Home > Archives > 2010-02

2010-02

面白そうなFlashのイベントが…


来週の土曜日(3月6日)は、二都市(名古屋と福岡)で、面白そうなFlashのイベントが開催されますよねぇ…

WCAN mini ActionScript Vol.14

今回は、テーマがデバイス。

マウスやキーボードだけではつまらない!デバイスの可能性を探りたい!そんな勢いで、今回のテーマは『デバイス』になりました!みなさんでネタを持ち寄りでワイワイやりたいと思います!
Flash / AS 以外でも、デバイス的な何かであれば全然OKです!気軽にご参加ください!ネタは5分〜20分を目安にお願いします!

イベントの詳細&申し込みは、ATNDからどうぞ!

参加しようかなぁ…とお考えの方は、お早めにお申し込みください!

福岡てら子 4 「Now Loading(エロいの)」

こちらは、ローディングネタです。

今回はFlashでの外部読み込みには欠かせないローディングネタを作ってきてもらいます。読み込み後のコンテンツがエロかったり、ローディングバー自体がエロかったり、とにかくエロければ何でもOKです。

イベントの詳細&申し込みは、ATNDからどうぞ!

参加しようかなぁ…とお考えの方は、こちらもお早めに!

軽~いノリで…

「美味しいラーメンを食べに、福岡行っちゃおうかなぁ…」という軽~いノリで、来週、福岡に行くことにしました!

ということで、福岡てら子に参加しちゃいます。

某旅行雑誌(「る」から始まって、「ぶ」で終わる)の福岡版を購入して、あれこれやっておりますが、「福岡に来たら、これは見ておかないと!」とか、「お土産は、これがいいんじゃない?」とか、「●●を食べるなら、この店がオススメ!」なんていう有力情報がありましたら、この記事にコメントを付けて頂くか、twitterで@flabaka宛につぶやいて頂けると、非常に助かります。

ということで、来週は、福岡てら子の皆様、お世話になります!

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

Excluded File Typesに拡張子を追加


ツール>フォルダオプション>表示から、縮小版をキャッシュしないにチェックを入れてあるんだけど、FlashDevelopで新規プロジェクトを作成した際、Thumbs.dbファイルがプロジェクトパネルに表示されてしまって、何か嫌だなぁって場合。

毎回手動で消すのはちょいと面倒。

そんな時は、F10>Settingsパネル>Project Manager>Excluded File Typesの箇所に、拡張子(今回だと「.db」)を追加してあげます。

こうしておけば、新規プロジェクトを作成しても、プロジェクトパネル上にThumbs.dbが表示されなくなります。

忘れないように、メモ。

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形式のフィードが表示されるって訳です。

う~ん、素敵!

Home > Archives > 2010-02

Search
Feeds
Meta

flashDevelopスポンサー

Return to page top