AirNX 開発者ブログ

スローライフな旅 AirNX »
開発者ブログ

MT更新でmixiボイスに自動的につぶやく

以前、紹介したエムロジックさんの『PostToTwitter』が新しくOAuthに対応して、『PostTweet』として公開されていました。基本的な使い方は『PostToTwitter』と一緒ですがプラグインの設定でOAuthの認証作業が必要になっています。

『MovableType用PostTweetプラグイン v1.0.0』

さて、これを使うとMovable Typeを更新すると自動的にTwitterにつぶやかれるわけですが、mixiボイスがTwitterと同期できるようになっていました。もしかしてこれを利用すれば「MT→Twitter→mixiボイス」と自動的に更新出来る？　と思って試してみました。結果成功しました！

MTのエントリーを自動でtwitterに投稿 PostToTwitter

Movable Typeに記事を投稿した時に、自動的にtwitterにも投稿するプラグイン、『PostToTwitter』を導入してみました。皆さんtwitterだとブログよりも気軽にコメントを下さるので、ブログ記事がそのままtwitter上でコミュニケーションに発展し、思っていたよりも良い効果がありました。

『PostToTwitter』は通常のテンプレートだと、記事のタイトルと短縮されたアドレスが投稿されますが、本文も載せる方法をご紹介します。

ダウンロードはエムロジック放課後プロジェクトさんからどうぞ。

Before タイトルとアドレスのみ

After タイトル、本文、アドレス

『PostToTwitter』は自分で作ったテンプレートをプラグインの設定画面から指定することが出来ます。デフォルトでは mt/plugins/PostToTwitter/tmpl/message_format.tmpl を使用しています。

デフォルトテンプレート

<mt:setvar name="title_len" value="140" />
<$MTEntryExcerpt encode_xml="1"$>
<mt:setvarblock name="title"><mt:entrytitle /></mt:setvarblock>
<mt:setvarblock name="link"> - <mt:entryshortenedpermalink /></mt:setvarblock>
<mt:setvarblock name="link_len"><mt:var name="link" count_characters="1" /></mt:setvarblock>
<mt:setvar name="title_len" op="-" value="$link_len" />
<mt:var name="title" trim_to="$title_len" /><mt:var name="link" />

twitterは140文字という制限があるので、タイトル、本文、アドレスを含めて140文字に収まるようにしなければいけません。このデフォルトテンプレートではタイトル、アドレスを含めて140文字に収まるようになっています。収まらない場合は切り捨てられます。このテンプレートにタグを一つ追加するだけで、本文を含めて140文字に収まるようになります。

<mt:setvar name="title_len" value="140" />
<$MTEntryExcerpt encode_xml="1"$>
<mt:setvarblock name="title"><mt:entrytitle /> - <$MTEntryExcerpt encode_xml="1"$></mt:setvarblock>
<mt:setvarblock name="link"> - <mt:entryshortenedpermalink /></mt:setvarblock> <mt:setvarblock name="link_len"><mt:var name="link" count_characters="1" /></mt:setvarblock>
<mt:setvar name="title_len" op="-" value="$link_len" />
<mt:var name="title" trim_to="$title_len" /><mt:var name="link" />

- <$MTEntryExcerpt encode_xml="1"$>

はエントリーの概要を表示するタグです。タイトルとの間が分かるように半角ハイフンが入っています。<$MTEntryBody$>だとhtmlも反映してしまうので、こちらを使っています。文字数は「ブログ記事設定」の「概要の文字数」で指定した文字数になりますが、このサイトでは200文字にしています。200文字だと140文字を超えてしまっていますが、エントリーのタイトル、本文、アドレス全て含めて140文字以上になるとそれ以降の本文は切り捨てられます。

このテンプレートをテンプレートモジュールに作成しても良いのですが、当サイトでは複数のブログを運営していて一つずつ設定するのが面倒だったので mt/plugins/PostToTwitter/tmpl/message_format.tmpl を直接書き換えてしまいました。

« 元に戻す

CrossSlide フェード効果のスライドショー JQuery

写真をフェードさせながらスライドショーするjs、『CrossSlide』のご紹介です。
『CrossSlide』はJQueryプラグインでとても簡単に実装出来ます。
Flashを作るのはちょっと面倒な時とか、予算的に厳しい時にも役に立つと思います。

CrossSlideデモ、配布サイト

当サイトのトップページにも使用例があります。

さて、同じようなことをFlashではなく『CrossSlide』でするメリットは、

写真を用意するだけで簡単にスライドショーができる。
写真の差し替えが簡単に出来る。
写真枚数の変更が簡単。
写真にリンクを指定出来る。

デメリットは、

パソコンのスペックが良くないとカクカクする。
JavaScriptがオフだと見れない。

と今簡単に考えただけですが、Flashではない強みと弱みがあります。

Flashの場合写真を差し替えたり、枚数を増やしたりする場合は、その都度Flashのドキュメントファイルを編集しなければいけませんが、『CrossSlide』は画像を上書きするか、jsファイルの一部を書き換えるだけで簡単に実現出来ます。この辺は写真の差し替えを頻繁にしたいサイトの場合、かなりメリットになりそうです。しかし動きがパソコンのスペックに左右されるので、その部分が導入するか否かのネックになって来そうです。

導入手順1

まず、『CrossSlide』よりjquery.cross-slide.jsをダウンロードします。
ダウンロードリンクはページの一番下にあります。

任意のディレクトリにjquery.cross-slide.jsをアップし、
htmlの<head>〜</head>に下記を追記します。

導入手順2

任意のディレクトリを作りそこに画像をアップロードし、
htmlの<head>〜</head>に下記を追記します。

<script type='text/javascript'>
$('#test1').crossSlide({
sleep: 2,
fade: 1
}, [
{ src: 'img/001.jpg' },
{ src: 'img/002jpg' },
{ src: 'img/003.jpg' },
{ src: 'img/004.jpg' }
]);
</script>

続いて<body>〜</body>内のスライドショーを表示させたい部分に下記を追記。

<div id="test1">Loading...</div>

青色の文字の部分が上のJavaScriptで指定したidになるようにします。以上で画像がクロスフェードする単純な動作はします。「Loading...」は読み込み中や、javascriptがオフの時に表示されます。テキストではなく適当な画像を入れておけば、javascriptがオフの時にもレイアウトが崩れません。

エフェクト

さらに動きに変化を加えることも出来ます。

デモ3参照

<script type='text/javascript'>
$('#test3').crossSlide({
loop: 1,
fade: 1
}, [
{
src: 'lib/sand-castle.jpeg',
href: 'http://flickr.com/photos/spacetrucker/94209642/',
from: '100% 80% 1x',
to: '100% 0% 1.7x',
time: 3
}, {
src: 'lib/sunflower.jpeg',
href: 'http://flickr.com/photos/hichako/1125341449/',
from: 'top left',
to: 'bottom right 1.5x',
time: 2
}, {
src: 'lib/flip-flops.jpeg',
href: 'http://flickr.com/photos/jayniebell/1125216143/',
from: '100% 80% 1.5x',
to: '80% 0% 1.1x',
time: 2 }, { src: 'lib/rubber-ring.jpeg',
href: 'http://flickr.com/photos/ruminatrix/1125292682/',
from: '100% 50%',
to: '30% 50% 1.5x',
time: 2
}
]);
</script>

loop:で回数を自由に指定出来ます。loop: 1,とするとスライドショーが一回で止まります。
fromが開始位置、toが終了位置、timeがスピードです。
尚、開始位置、終了位置はcssと同じように解釈されるということです。
またhrefを加えることで写真一枚一枚にリンクを設定出来ます。

« 元に戻す

MTOSでMTFeedを使う

MTOSではMTFeedが使えません。
今回はMTOSでMTFeedと同じことを出来るようにする方法をご紹介します。

通常版のMTに付属してくるMTFeedは有料版にアップグレードしないと日付が取得出来ないのですが、この方法では無料で日付取得が出来ます。MTOSではなく通常のMTでも使えます。

MTOSの代表的な弱点はカスタムフィールドが使えないことと、MTFeedが使えないことです。しかしカスタムフィールドに関しては、藤本壱さんがお書きになっている『MTOS活用テクニック』で解決出来ます。この本はとても分かりやすく説明して下さっているので、プログラムのことなどさっぱり分からない僕でもカスタムフィールド用のプラグインが作成（ほとんどコピー＆ペースト）出来ました。

あとはMTFeedが使えない弱点を克服すれば、MTOSとMTを選ぶ時にMTOSを選べるシチュエーションがとても増えるのではないでしょうか。

さて、勿体ぶって書いて来ましたが、MTOSでMTFeedと同等のことをするにはどうするのかというと、作業はとても簡単でプラグインを導入するだけです。Movable Type 備忘録さんで配布されている『FeedEx プラグイン』というものです。

まずは上記サイトよりプラグインをダウンロードします。使い方も同ページで詳しく書かれていますが、ここではとても単純なテンプレートを作ってみます。

<MTFeedEx uri="フィードのURL">
<MTFeedExEntries lastn="5">
<ul>
<li><a href="<$MTFeedExEntryLink$>"><$MTFeedExEntryDate format="%Y年%m月%d日（%a）"$> <$MTFeedExEntryTitle$></a></li>
</ul>
</MTFeedExEntries>
</MTFeedEx>

上記の例では「2010年 02月10日（水）エントリータイトル」といった感じで五件のエントリーが表示されます。「<MTFeedExEntries lastn="5">」が件数を表しています。
「<$MTFeedExEntryDate format="%Y年%m月%d日（%a）"$> 」で日付のフォーマットを指定しています。MTの日付フォーマットについてはMT公式サイトのドキュメントを参考にして下さい。

MTFeedを使ったことのある方ならお分かりになると思いますが、殆どタグの「MTFeed」を「MTFeedEx」に置き換えるだけです。そしてこのプラグインがMTFeedよりも優れているのが、無料なのに日付が取得出来るということです。なのでMTOSではなく通常のMTの場合でも、こちらを使うとMTFeedにお金を出さずに日付取得が出来ます。

ところでMTFeedもMTFeedExも静的生成のままでは再構築をかけなければ、情報が更新されません。皆さんphp化したりcronを使ったりされていますが、静的生成のままでcronを使わずに外部ブログの更新でリアルタイムに再構築させる仕組みを考えてみました（条件が限られていますが）

『MTFeed 外部ブログの更新で自動的に再構築する（cron未使用）』

« 元に戻す

オープンソースのWEB用FLVプレーヤー FlowPlayer

Web上で動画を再生する方法はいくつかありますが、wmvやrmによる方法は環境によっては見れないことがあります。特にMacではwmvはFlip4Macを使うことで観覧可能になりますが、このことを理解してFlip4Macをインストールしている人はMacユーザーの中で何割程度でしょう？　リアルメディアについてもWindows、Mac両方とも最初からインストールされているわけではありません。

誰もがパソコンを買ったままの状態で、自然に動画を再生出来る確率が高いのは、やはりFlashを用いた方法です。swfの動画プレーヤーからFLVもしくはMP4（h.264）を呼び出して再生させれば、wmvやrmを使った方法よりも圧倒的に観覧者の層が増えます。特にMP4（h.264）は画質も良いため現状、動画をWebで配信するのには一番ベターな方法だと思います。

手軽なのはYouTubeなどの動画共有サイトにアカウントを作り、その動画をWebページに貼付けることですが、どうしても自分のサーバーから動画を配信したい場合はswfの動画プレーヤーが必要になります。そこで今回ご紹介するのが『FlowPlayer』です。

AirNXでは当初『JW Player』を使用していましたが、非商用のみ無料のため、アフィリエイトを張る場合ライセンス料が必要になること、そのライセンス料がなかなか高いことが引っかかり、使用を中止しました。そこで見つけたのが『FlowPlayer』です。

『FlowPlayer』はGPLで配布されています。有料版もありますが、無料版でもページを読み込んだ時とフルスクリーンにした時にロゴが表示されるだけで、商用サイトにも使用可能です。

使用方法は『JW Player』に比べると、ややこしいのですが、慣れてしまえば自由度が高く、そのややこしさを補ってとても優れものであることが分かります。

手順1

まずは『FlowPlayer』右上の「Download now」を押して一番左、GPL license (Free)をダウンロードします。

解凍して、「flowplayer-3.1.5.swf」と「flowplayer.controls-3.1.5.swf」、そしてexampleフォルダの中にある「flowplayer-3.1.4.min.js」をサーバーにアップロードします。

htmlの<head>〜</head>内に以下を記述します。

path/to/the/をご自分のサイトに合わせて編集して下さい。

手順2

『FlowPrayer』は通常aタグやdivで呼び出します。以下はaタグの方法です。
動画はflvもしくはh.264コーデックのMP4を指定出来ます。

<a
href="http://vod01.netdna.com/vod/demo.flowplayer/flowplayer-700.flv"
style="display:block;width:425px;height:300px;"
id="player">
</a>

青文字の部分は動画のアドレスを指定して下さい。
その下に『FlowPlayer』を動作させるのに必要なJavascriptを書きます。

path/to/the/をご自分のサイトに合わせて編集して下さい。
以上で最低限の動作はすると思います。
その他の設置例については公式サイトにてご確認下さい。

objectタグで読み込む

さて、長い前置きでしたが実はここからが本題です。
『FlowPlayer』をaタグやdivではなくobjectタグで読み込むにはどうするのか？　気になったので調べてみたら公式サイトにその方法が載っていました。

<object id="flowplayer" width="300" height="200" data="http://releases.flowplayer.org/swf/flowplayer-3.1.5.swf"
type="application/x-shockwave-flash">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.1.5.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars"
value='config={"clip":"http://blip.tv/file/get/N8inpasadena-Flowers457.flv"}' />
</object>

これでobjectタグでの『FlowPlayer』の読み込みが出来ます。
青文字の部分は環境に合わせて変更して下さい。

サムネイル指定と配色

objectタグで読み込みは出来ましたがこのままではデザインがデフォルトのままです。また動画のサムネイルも指定出来ません。サイトにマッチするように少し手を入れてみましょう。

<object class="left player" width="300（横サイズ）" height="200（縦サイズ）" data=";http://releases.flowplayer.org/swf/flowplayer-3.1.5.swf"
type="application/x-shockwave-flash">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.1.5.swf" />
<param name="bgcolor" value="#000000" />
<param name="allowfullscreen" value="true" />
<param name="flashvars"
value='config={"playlist":["サムネイル画像のURL",{"url":"動画のURL","scaling":"fit","autoPlay":false}],"plugins":{"controls":{"autoHide":"always","timeColor":"#ffffff","volumeSliderColor":"#333333","sliderColor":"#333333","backgroundGradient":"low","backgroundColor":"#c9c9c9","buttonColor":"#999999","progressGradient":"none","buttonOverColor":"#728B94"}}}' />
</object>

"timeColor":"#ffffff"で再生時間を白にしています。
"volumeSliderColor":"#333333"でボリュームスライダー部分を黒にしています。
"sliderColor":"#333333"でプログレスバーを黒にしています。
"backgroundGradient":"low"で背景のグラデーションを控えめにしています。
"backgroundColor":"#c9c9c9"でコントローラーを白っぽくしています。
"buttonColor":"#999999"で再生ボタン、ミュートボタン、フルスクリーンボタンをグレーにしています。
"progressGradient":"none"でプログレスバーのグラデーションをなくしています。
"buttonOverColor":"#728B94"でボタンにオンマウスした時の色を水色にしています。
"autoHide":"always"によって一定時間後コントローラーが自動で隠れます。常時表示にする場合はこの記述を消して下さい（常時表示にする場合はコントローラーの分の長さが必要になるため動画の縦サイズにプラス24px必要です。）

サンプルページ

最後に、日本語で分かりやすく解説して下さっているサイトをご紹介します。
こちらの記事には大変お世話になりました。

『Blog 内に FLV / H.264 動画埋め込み Flowplayer 3 の設定』

« 元に戻す