【Movable Type 4.25公開】Action Streamをブログに追加して楽しもう
2009年3月19日 09:42
Movable Type 4.25で、ブログやＷｅｂに、アクションストリームの機能が追加できるスタートキット作ったよ:-D
Movable Type 4.25正式リリース。Movable Type 4.25には、新たに「アクションストリーム」と「モーション」の２つのテンプレートセットが加わったのだが、「モーション」は一人でやってもおもしろくないし、「アクションストリーム」のテンプレートはあまりに中途半端。アクションストリームは、「規定のブログ」や、「プロフェッショナルウェブ」に組み込んでこそ、楽しいと思う。
というわけで、「規定のブログ」にお手軽に、サイドバーに「利用サービス一覧」と「最近のアクション」を表示できるキットを作ってみました。カスタマイズすれば、Ｗｅｂやご自分のブログにも流用できる。
Action Stream Starter Kit(アクションストリーム・スタート・キット)
ActionStreamStarterKit.zip
名前はおおげさだけど、中身はウィジェットのソース2点とＣＳＳ1点です^^;;
使い方は下記で説明。
■Ｍｏｖａｂｌｅ Ｔｙｐｅ ４．２５をインストールする
◇パッケージの入手
Movable Type 4.25は下記から入手できる。
「Movable Type Open Source 4.25」、「Movable Type Commercial 4.25」では、アクションストリームの機能は利用できない。必ず、「Movable Type 4.25」を選んでダウンロードすること。
※Action Streams 1.1をインストールしすれば利用できますが、なかなか面倒:-p
なお、MT4.24からMT4.25のアップグレードは簡単に終わる。
MT4.25RC3からMT4.25のアップグレードはアップグレード画面も表示されない。
■CRONジョブの設定をおこなう
基本は「指定日投稿や公開キュー等のスケジュール処理の設定 | Movable Type 4 ドキュメント」に書いてある。サーバーによって設定が異なるので、利用サーバー管理会社に確認するといいだろう。
Xrea & CORESEVERの方は、下記に書いたので、参考までにどうぞ。
【Movable Type 4.25】 CRONジョブで情報を自動更新する方法
http://www.dakiny.com/archives/mt42/movable_type_morion/
■利用サービスの登録をおこなう
ダッシュボードを開き、「This is you」の右下「ユーザー情報の編集」をクリック。
左メニューから「利用サービス」をクリック。
「プロフィール追加」をクリック。
利用しているサービスを選択。
上記はDeliciousの例。「サービス名」が表示されるので、「ユーザー名」を追記してあげる。下記にチェックＢＯＸがあるが、チェックＢＯＸ内容は利用サービスにより異なる。
ご覧のように表示されたら、登録は完了。
◇備考
このスタートキットのCSSは下記の国内サービスにも対応しているので、併せて、下記アクションストリーム用プラグインをインストールすれば、さらに楽しくなると思う:-)
日本のサービスに対応したAction Streams用のconfig.yaml : audiofan.net blo
http://blog.audiofan.net/archives/491419.html
■ウィジェットを作成する
◇参考：公式ドキュメントに記載のテンプレートサンプルを使った例
上記は下記サイトに記載されている、テンプレートサンプルをブログに組み込んだ例。残念ながら、利用サービスの画像が表示されないようだ。
※できれば事前に読んでおいてほしい。
利用サービス一覧を出力するテンプレートサンプル
http://www.movabletype.jp/documentation/actionstreams/template_profilelist.html
アクション一覧を出力するテンプレートサンプル
http://www.movabletype.jp/documentation/actionstreams/template_actionlist.html
ということで、画像が表示されないのは、直感的にわかりにくい上、見栄えもよろしくないので、画像を表示するよう、ソースを修正してみた。
◇利用サービス一覧を出力するテンプレート
１．ウィジェットの作成
「ウィジェット」の管理画面から、「ウィジェットテンプレートを作成」をクリックして、新規ウィジェットを作成。「利用サービス一覧」と名前をつけ、下記のソースを貼って保存。
<mt:Authors need_entry="0"> <mt:OtherProfiles> <mt:If name="__first__"> <div class="widget-elsewhere widget"> <h3 class="widget-header">利用サービス一覧</a></h3> <div class="widget-content"> <ul class="action-stream-list"> </mt:If> <li class="service-icon icon-service-<mt:otherprofilevar name="type">"><a href="<$mt:OtherProfileVar name="uri" escape="html"$>"><$mt:OtherProfileVar name="label" escape="html"$></a></li> <mt:If name="__last__"> </ul> </div> </div> </mt:If> </mt:OtherProfiles> </mt:Authors>
2. ウィジェットセットに追加
「利用サービス一覧」をウィジェットセット「3カラムのサイドバー(メイン)」の表示させたい場所に、クリック＆ドラッグして追加。
◇アクション一覧を出力するテンプレート
１．ウィジェットの作成
「ウィジェット」の管理画面から、「ウィジェットテンプレートを作成」をクリックして、新規ウィジェットを作成。「アクション」と名前をつけ、下記のソースを貼って保存。
<mt:ActionStreams lastn="10"> <mt:If name="__first__"> <div class="widget-recent-action widget-recent widget"> <h3 class="widget-header">最近10件のアクション</a></h3> <div class="widget-content"> <ul class="action-stream-list"> </mt:If> <li class="service-icon icon-service-<$mt:var name="service_type"$>"><$MTStreamAction$></li> <mt:If name="__last__"> </ul> </div> </div> </mt:If> </mt:ActionStreams>
2. ウィジェットセットに追加
「利用サービス一覧」をウィジェットセット「3カラムのサイドバー(サブ)」の表示させたい場所に、クリック＆ドラッグして追加。
２カラムが希望なら、「2カラムのサイドバー」のお好きな場所に組み込めばいい。
■CSSの追加
１．新規スタイルシートの作成
.action-stream-header {
margin: 1em 0 .25em;
}
.action-stream-list {
margin-left: 0px;
padding-left: 5px;
list-style-type: none;
}
.action-stream-list li {
margin: 0 0 .5em;
}
.service-icon {
display: block;
overflow: hidden;
background: transparent url(<$MTStaticWebPath$>/plugins/Motion/images/services/other.png) no-repeat;
padding-left: 20px;
min-height: 18px;
min-width: 16px;
}
/* Action Stream 2.0 ---------------------------------------------------------------------------------- */
.icon-entry { background-image: url(<$MTStaticWebPath$>/plugins/Motion/images/icons/page_white_text.png); }
.icon-link { background-image: url(<$MTStaticWebPath$>/plugins/Motion/images/icons/link.png); }
.icon-audio { background-image: url(<$MTStaticWebPath$>/plugins/Motion/images/icons/sound.png); }
.icon-video { background-image: url(<$MTStaticWebPath$>/plugins/Motion/images/icons/film.png); }
.icon-embed { background-image: url(<$MTStaticWebPath$>/plugins/Motion/images/icons/film.png); }
.icon-photo { background-image: url(<$MTStaticWebPath$>/plugins/Motion/images/icons/picture.png); }
.icon-comment { background-image: url(<$MTStaticWebPath$>/plugins/Motion/images/icons/comment.png); }
.icon-follow { background-image: url(<$MTStaticWebPath$>/plugins/Motion/images/icons/group.png); }
.icon-favorite { background-image: url(<$MTStaticWebPath$>/plugins/Motion/images/icons/heart.png); }
.icon-service-twittersearch { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/twitter.png); }
.icon-service-oneup { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/oneup.png); }
.icon-service-backtype { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/backtype.png); }
.icon-service-fortythreethings { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/fortythreethings.png); }
.icon-service-aim { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/aim.png); }
.icon-service-bebo { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/bebo.png); }
.icon-service-catster { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/catster.png); }
.icon-service-colourlovers { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/colourlovers.png); }
.icon-service-corkd { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/corkd.png); }
/*.icon-service-deadjournal { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/deadjournal.png); }*/
.icon-service-delicious { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/delicious.png); }
.icon-service-destructoid { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/destructoid.png); }
.icon-service-digg { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/digg.png); }
.icon-service-dodgeball { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/dodgeball.png); }
.icon-service-dogster { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/dogster.png); }
.icon-service-dopplr { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/dopplr.png); }
.icon-service-facebook { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/facebook.png); }
.icon-service-ffffound { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/ffffound.png); }
.icon-service-flickr { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/flickr.png); }
.icon-service-friendfeed { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/friendfeed.png); }
.icon-service-gametap { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/gametap.png); }
.icon-service-goodreads { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/goodreads.png); }
.icon-service-gblogs { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/gblogs.png); }
.icon-service-gnews { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/gnews.png); }
.icon-service-googlereader { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/googlereader.png); }
.icon-service-gtalk { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/gtalk.png); }
.icon-service-hi5 { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/hi5.png); }
.icon-service-iconbuffet { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/iconbuffet.png); }
.icon-service-icq { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/icq.png); }
.icon-service-identica { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/identica.png); }
.icon-service-iminta { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/iminta.png); }
.icon-service-istockphoto { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/istockphoto.png); }
.icon-service-iusethis { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/iusethis.png); }
.icon-service-iwatchthis { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/iwatchthis.png); }
.icon-service-jabber { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/jabber.png); }
.icon-service-jaiku { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/jaiku.png); }
.icon-service-kongregate { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/kongregate.png); }
.icon-service-lastfm { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/lastfm.png); }
.icon-service-linkedin { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/linkedin.png); }
/*.icon-service-livedoor { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/livedoor.png); }*/
.icon-service-livejournal { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/livejournal.png); }
.icon-service-magnolia { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/magnolia.png); }
.icon-service-mog { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/mog.png); }
.icon-service-msn { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/msn.png); }
.icon-service-multiply { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/multiply.png); }
.icon-service-myspace { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/myspace.png); }
.icon-service-netflix { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/netflix.png); }
.icon-service-netvibes { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/netvibes.png); }
.icon-service-newsvine { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/newsvine.png); }
.icon-service-ning { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/ning.png); }
.icon-service-ohloh { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/ohloh.png); }
.icon-service-orkut { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/orkut.png); }
.icon-service-pandora { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/pandora.png); }
.icon-service-picasaweb { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/picasaweb.png); }
.icon-service-p0pulist { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/p0pulist.png); }
.icon-service-pownce { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/pownce.png); }
.icon-service-reddit { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/reddit.png); }
.icon-service-skype { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/skype.png); }
.icon-service-slideshare { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/slideshare.png); }
.icon-service-smugmug { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/smugmug.png); }
.icon-service-sonicliving { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/sonicliving.png); }
.icon-service-steam { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/steam.png); }
.icon-service-stumbleupon { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/stumbleupon.png); }
.icon-service-tabblo { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/tabblo.png); }
.icon-service-technorati { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/technorati.png); }
.icon-service-technoratisearch { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/technorati.png); }
.icon-service-tribe { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/tribe.png); }
.icon-service-twitter { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/twitter.png); }
.icon-service-twittersearch { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/twitter.png); }
.icon-service-typepad { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/typepad.png); }
.icon-service-tumblr { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/tumblr.gif); }
.icon-service-uncrate { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/uncrate.png); }
.icon-service-upcoming { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/upcoming.png); }
.icon-service-viddler { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/viddler.png); }
.icon-service-vimeo { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/vimeo.png); }
.icon-service-virb { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/virb.png); }
.icon-service-vox { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/vox.png); }
.icon-service-website { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/website.png); }
.icon-service-wists { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/wists.png); }
.icon-service-xboxlive { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/xboxlive.png); }
.icon-service-yahoo { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/yahoo.png); }
.icon-service-yelp { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/yelp.png); }
.icon-service-youtube { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/youtube.png); }
.icon-service-zooomr { background-image: url(<$MTStaticWebPath$>/plugins/ActionStreams/images/services/zooomr.png); }
/* MTProfilesForJapaneseServices---------------------------------------------------------------------------------- */
.icon-service-mixi { background-image: url(<$MTStaticWebPath$>plugins/mtprofilesforjapaneseservices/images/mixi.png); }
.icon-service-xboxlivejapan { background-image: url(<$MTStaticWebPath$>plugins/mtprofilesforjapaneseservices/images/xboxlive.png); }
.icon-service-technoratijapan { background-image: url(<$MTStaticWebPath$>plugins/mtprofilesforjapaneseservices/images/technorati.png); }
.icon-service-youtubejapan { background-image: url(<$MTStaticWebPath$>plugins/mtprofilesforjapaneseservices/images/youtube.png); }
.icon-service-livedoorreader { background-image: url(<$MTStaticWebPath$>plugins/mtprofilesforjapaneseservices/images/livedoorreader.png); }
.icon-service-livedoorblogjp,
.icon-service-livedoorblogbiz { background-image: url(<$MTStaticWebPath$>plugins/mtprofilesforjapaneseservices/images/livedoorblog.png); }
.icon-service-fc2pr,
.icon-service-fc2blog { background-image: url(<$MTStaticWebPath$>plugins/mtprofilesforjapaneseservices/images/fc2.png); }
.icon-service-gree { background-image: url(<$MTStaticWebPath$>plugins/mtprofilesforjapaneseservices/images/gree.png); }
.icon-service-nicovideo { background-image: url(<$MTStaticWebPath$>plugins/mtprofilesforjapaneseservices/images/nicovideo.png); }
.icon-service-seesaa { background-image: url(<$MTStaticWebPath$>plugins/mtprofilesforjapaneseservices/images/seesaa.png); }
.icon-service-tumblr { background-image: url(<$MTStaticWebPath$>plugins/mtprofilesforjapaneseservices/images/tumblr.png); }
.icon-service-iddy { background-image: url(<$MTStaticWebPath$>plugins/mtprofilesforjapaneseservices/images/iddy.png); }
ブログのテンプレートから「インデックステンプレートを作成」をクリックして、「アクションストリームスタイルシート」を名前をつけ、上記のソースをコピー＆ペースト下の後action-streams.cssとファイル名をつけて保存。
2. HTMLヘッダーに下記の行を追記し保存
<link rel="stylesheet" href="<$MTBlogURL$>action-streams.css" type="text/css" />
3. 再構築して表示を確認
ご覧のように、無事表示された。
実際の出力は下記ＵＲＬで確認できる。
スタイルライブラリーにも対応しているから、スタイルはお好みでどうぞ。
ITプロフェッショナル
http://www.it-pro.co.jp/
※リニューアル途中で放置してある、自社サイトのライセンスを暫定利用ｗ
参考なれば幸い。
投稿者: Dakiny 日時: 2009年3月19日 09:42 |
|
|
パーマリンク | コメント(0) | トラックバック (1)
トラックバック
このエントリーのトラックバックURL:
http://www.dakiny.com/mtos/mt-tb.cgi/1811
※文章内容と関係のないトラックバックは固くお断り。
この一覧は、次のエントリーを参照しています: 【Movable Type 4.25公開】Action Streamをブログに追加して楽しもう:
» MT4.25でAction Streamを試す@さくらサーバ from ヌルめのつぶやき
Dakinyさんの記事を参考にさせていただき、アレコレいじりました。【Movab... [詳しくはこちら]
トラックバック時刻: 2009年4月24日 01:29
