MovableTypeプラグインの最近のブログ記事

ひそかにマイ・ブームでして...「たままType」略してMT!

  • WYSIWYGエディタで画像(ファイル)のアップロード/貼付けに対応
  • WYSIWYGエディタのON/OFF選択可能に
  • テンプレート・タグでカスタマイズ可能に
  • プラグインで拡張を可能に
  • プラグイン設定/ブックマークレットを日本語化

プラグイン設定

「規定のブログ」テンプレートであれば、入れればそのまま使える筈。カスタマイズしたいときはブログ毎のプラグイン設定で「フィールド」「自動/カスタム」で「カスタム」を選択。

で、ブログ記事とかウェブページのテンプレートで以下のように分岐する。

<MTIfQuickEdit>
<!--編集画面での出力-->
<$MTQuickEditFormHeader$>
<input type="text" name="title" value="<$MTEntryTitle escape="html"$>" />
<br />
<br />
<textarea name="text"><$MTEntryBody escape="html"$></textarea>
<$MTQuickEditFormFooter$>
<MTElse>
<!--通常の出力-->
<h1><MTEntryTitle></h1>
<p><MTEntryBody></p>
</MTElse>
</MTIfQuickEdit>

MTIfQuickEditで(通常の出力と編集画面を)分岐、MTQuickEditFormHeader, MTQuickEditFormFooterで挿んだ間にフォームを組み立てればOK。title,text,text_more, keywords,excerpt,tagsはそのまま保存されます。

それ以外は? プラグインで拡張可能。cms_pre_save.entry(page), cms_post_save.entry(page)で、以下のようにして処理を噛ませばOK。

if ( $app->mode eq 'quicksave' ) { ...

カテゴリに対応させるも良し、カスタムフィールドに対応させるも良し。

さぁ、みんなでマニアックですんげー管理画面を作って楽しくMT拡張しようぜ! もう、MTでいいじゃん!

ついカッとなって...ないですないです。どんだけ怒りっぽいのよヲイラ。

早速ですがToI企画さんがTinyMCEから画像をアップできるように改良したものを上げてくれました。組み合わせて使うと本気で使えるもんになります。ダウンロードと説明はToI企画さんのページにて。

で、ToI企画さんの改良版の方を触ろうかと思ってたんですが、ちょっと今後も色々拡張していきたい気分なので、当面このまま突っ走り(?)ます。

本日の改良は2点。

  • 新規ブログ記事投稿/新規ウェブページ投稿に対応
  • スタイルのカスタマイズ、概要/タグ/キーワード等のフィールドに対応

エントリー編集画面

カスタマイズはブログ毎のプラグイン設定画面にて(新規投稿用のリンクもこの画面にあります※ブックマークに登録して使うこと前提です)。

プラグイン設定

↑新規投稿のリンクはBookmarklet欄にある「=>New Entry」「=>New Page」の2つ。また、この画面の「Add Action-bar:」欄に入力したテンプレートが「送信」ボタンの直前に入ります。サンプルコードとして、エントリーのタグを追加するコードがデフォルトで入ってます。

<p style="margin-top:7px;">Tags :
<input style="width:90%;font-size:100%;font-weight:bold;border:1px solid #ddd"
type="text" name="tags"
value="<mt:entrytags glue=","><mt:tagname></mt:entrytags>"
/></p>

こんな感じで入力しておくと、以下のような感じでタグ欄が追加されます。

タグ入力欄

また、カスタマイズ用のテンプレートタグを一つ追加。見たまま投稿画面の時のみ出力されます。

<MTIfQuickEdit>〜</MTIfQuickEdit>

このタグを使うことによって、投稿画面だったらキーワードフィールドや概要フィールドを追加する(逆に出力された部分を隠すとか)等が可能になります。

Quickedit.zip(v0.3 - 540KB)

WYSIWYG付き見たまま編集画面

TinyMCEを組み込んでみた。新規作成もこんな感じで出来る状態にして渡してあげればかなり直感的ですよね。

「できるだけ近い」こと重視なので、エディタは下部に配置しました。あと、一応「続き(text_more)」にも対応させました。

/mt-static/tiny_mce/css/content.css がエディタ部のCSSです。これをサイトのCSSにあわせてやると、エディタの編集画面内のスタイルもサイトのデザインにあったものになります。

さて、今回も1倍速Movieです(会場いた人しか分からん前振りだなw)

管理画面をどのようにして渡すか? というあたりは、CMSよりもむしろ構築・カスタマイズする側の工夫や配慮なんだと思うのです。まぁ、去年のLP5の時に管理画面をガチャガチャいじるの流行らせた? 本人ですから、そのあたりは一貫していて何ら変わっちゃいないんですけどね。

昨日CSS Nite LP, Disk 6(LP6)「CMSリベンジ編」 行ってきました。思いっきりアウェイ感の中、一番最後に出て笑いとったった。俺の勝ちだ(←何競ってんだよ!)

ずーーっと他のもの見ていて結構しんどかったんだけど(鷹野さんも最後に言ってたけど、5分といわず15分くらいでテンポ良く流して行くってのもありだな、と思った)、「MTがどーたらこーたら」「MTよりここが有利」とか色々言ってるわけなんだけど、その多くは実は「MTでも出来るよ」ってことで (別にもうこの段になったら機能競争って殆ど意味ないんだけど、競合と考えるなら他社製品もう少し研究したらっていう感想も持ちました。正直なところ) ついカっとなって ひとつ簡単そうなテーマがあったので作ってみた。

見たまんま編集画面

久しぶりにムービーも撮った(1倍速ですぜ!)

「編集したいページでブックマークレットをクリック→編集→保存→すぐに反映・確認」というものです。

タイトルと本文しか対応していないですけど、他のフィールドも特に問題なく対応できると思います。制限事項としてはテキストフィールドのスタイルが決めうちだったり、ブログ記事/ウェブページテンプレートに直接EntryBodyとかが書いてないと駄目(インクルードしてると駄目)ってのがあるんですが、まぁ試作品みたいなものなので勘弁してください。

※当然ですが、ブックマークの中のリンク先は適宜編集してから使ってくださいね。

ご要望いただいたので(社内だけど...)、アップロードしたサイズとは別にLightBoxで表示する画像のサイズを指定出来るようにしました(指定したサイズの画像は自動的に生成されます)。

画像挿入ダイアログ

rel="lightbox" を付ける/付けないをチェクボックスで指定し、リンク先を指定したサイズの画像へのパスにします。

上記の画像のように指定した場合、例えば以下のようなリンクになります(幅250pxのサムネイルから600pxの画像へのリンクになります)。

「LightBoxで表示する」横の「幅」が空白の場合はアップロードしたオリジナル画像へのリンクになります。

<form mt:asset-id="1" class="mt-enclosure mt-enclosure-image" style="display: inline;">
<a rel="lightbox" href="http://alfasado.net/assets_c/2009/06/photo-thumb-600xauto-1.jpg">
<img alt="" src="http://alfasado.net/assets_c/2009/06/photo-thumb-250x187-1.jpg" width="250" height="187" class="mt-image-none" style="" />
</a>
</form>

Download:

目的に合致するものがなかったので作成しました。

画像挿入ダイアログ

rel="lightbox" を付ける/付けないをチェクボックスで指定します(それだけです)。

Download:

tumblrのダッシュボード

↑これはtumblr.のダッシュボードね。間違いないよう一応。

次は tumblr. だ(デザインとか全然なんだけど...)。

まだ開発途中だし実装したのは画像と引用(ブックマークレット)くらいだが、ケータイからはTwitter、ブラウザからはtumblr. ってコンセプトが面白いんじゃないかと思って。

tumblr.に関しては僕は「とりあえずアカウント作って一通り俯瞰してみた」だけだけど、確かにこれは簡単でわかりやすい。MTのMotionとかもこういう「Text,Photo,Quote,Link,Audio,Video...」なんかを簡単・直感的にどんどんアップ出来て共有できて...というようなコンセプトなんだろうけど、まだまだあの「ダッシュボード」からして「簡単」とはいえない。ツールの性質ってもんがあるからそれはそれで良いわけですが。

もちろん、バグを潰したり実装新たにしたり(自分の発言削除できるようにしたり...フォローはまだだけど)、とりあえず一番大きいのは「Quote」の機能。ブックマークレットでシェアしたいページから一発で登録できるようなインターフェイスを付けた(引用テキストのクリップボード周りはやってないけど)。

デザインとかCSSとかが全然ないのでアレだけど。

追加・修正した項目の一覧は以下

  • URLリンク化の正規表現がおかしかったので修正
  • 画像については携帯はメールから、ブラウザなら添付ファイルで上げられるように
  • 「引用」機能。mt_entry_cite(URL)、mt_entry_quote(引用文)をテーブルに追加した(タグも作った)
  • 「自分アーカイブ」から発言を削除できるようにした
  • PCから「設定」選択でMTの管理画面に飛ばす、そこでブックマークレットを登録できるように
  • 携帯メールでの投稿で、ユーザーを特定する手段を変更した(AUのみ。メールアドレスに+が使えないことがわかったので

ブックマークレット ブックマークレットで共有

今、社内で実験的に使っています。アーカイブテンプレート全削除したので、全くクローズドな環境だけど、何となく可能性を感じるツールになりつつある気がします。

未完成なものだけどこうやってソースを晒していることにさほど意味が有るとも思えないんだけど(あ、間もなく品川に着くのでソースは明日公開します)、MTベースでWebアプリを開発するには参考になると思います。

もうちょっとあれこれ感じつつあること、今後考えていること等ありますが、またそのうち。

設置方法:

plugins/MovaMotionを設置、mtディレクトリ直下にmova-motion.cgi設置して実行パーミッション与えてmova-motion.cgiにアクセスします。

ライセンス:

  • GPL v2

ダウンロード:

連続モノになってきた...

写真付きメール投稿に対応

画像の表示

やっぱり携帯からメールで写真とか送れなきゃやだ(ってかつまんないよな)ということで、メール投稿できるようにしました。メール投稿については以前に書いたものの焼き直しですが、設定が難しいとか動かん、とか色々指摘いただいていることもあって設定をより簡単にしました(~を含むファイル名問題にも対処済み)。

設定が簡単とはいえMIME::Parserが必要です。Perlモジュールのインストールさえできれば設定はより簡単になりました。


プラグイン設定

設定はブログ毎に行います。投稿専用のメールアドレスを1つ用意して「ブログ→プラグイン→MovaMotionの設定」で以下の情報を登録します(括弧内はデフォルト値)。

  • 投稿先メールアドレス
  • メールサーバー
  • アカウント
  • パスワード
  • プロトコル(pop3)
  • 添付ファイル保存先(<サイトパス>/files)
  • サムネイル幅(480)
  • 画像のマークアップ(<p class="image">,</p> - カンマで区切る)

ユーザー設定

続いて、ユーザーの設定画面で以下の情報を登録します。

  • 携帯メール(メール投稿のFromになるアドレス)
  • 秘密のフレーズ*

* ユーザーを識別するもので、何でも構いません(覚える必要もありません)。例えば送信先がfoobar@example.comだった場合、foobar+phrase@example.comがユーザーの投稿アドレスになります。Fromとこのフレーズによってユーザーを識別しますので、他人にバラさなければOK(あんまり長いと携帯によっては送信できないことがあります)。


メール投稿

メール投稿は「写真」クリックしてこの画面から行えます。mova-motion.cgiを設置しなくてもメール投稿は行えますが、メール送信後この画面の「すぐに反映」をクリックすることで送信したメール付きエントリーを即時に反映することができます(明示的にここから反映しなかった場合、run-periodic-tasks実行時に反映されます)。

投稿されたメールのタイトルがエントリーの「タイトル(entry_title)」、本文は「本文(entry_text)」、添付ファイルは指定したサイズのサムネイル(オリジナルへのリンク付きサムネイル)」のタグが(プラグイン設定で指定した「画像のマークアップ」を適用した上で)「追記(entry_text_more)」に登録されます。


設置方法:

plugins/MovaMotionを設置、mtディレクトリ直下にmova-motion.cgi設置して実行パーミッション与えてmova-motion.cgiにアクセスします。

ライセンス:

  • GPL v2

ダウンロード:

関連エントリー(続き)があります。

「携帯電話から使うMTベースのTwitter風マイクロブログ」の続きです。色々と拡張したので、少しカスタマイズ方法など紹介したいと思います。

携帯での表示

まず、PCとモバイルの両アクセスに対応するためにPCからのアクセスではCookieを使い、モバイルの場合はセッションIDを引っ張る仕様に変更しました。

その他少しテンプレートを修正した他(UserPicを表示させたりした)、UserAgent別の表示に対応するためにいくつかテンプレートタグを追加しました。

ということで、携帯(キャリア)/PC/iPhone等でテンプレートを切り替えることができます! (やってないけど)

また、裏? 機能として、ポストする際に(input name=またはtextarea name=)text,text_more,excerpt,keywordsを一緒に渡すとエントリーの本文,追記,概要,キーワードに保存されるようにしています。

テンプレート:

plugins/MovaMotion/tmpl/login.tmpl
ログイン画面のテンプレート。PCからのアクセスの場合はMTのログイン画面テンプレートが使われます。
plugins/MovaMotion/tmpl/redirect.tmpl
リダイレクタ(他のサイトへ移動するときのクッションページ)のテンプレート。
plugins/MovaMotion/tmpl/view.tmpl
その他の画面すべてで使われるテンプレート。基本的にMTEntryブロックタグのループなので、MTタグでカスタマイズできます。

ブロックタグ:

<MTMovaMotionBlogCtx>
blog_idパラメタで渡されたIDのブログのコンテクストをセットします。
<MTIfUserAgentIsiPhone>
iPhone/iPod touchからのアクセス時に真を返します。
<MTIfUserAgentIsDoCoMo>
DoCoMoからのアクセス時に真を返します。
<MTIfUserAgentIsSoftBank>
SoftBankからのアクセス時に真を返します。
<MTIfUserAgentIsAU>
AUからのアクセス時に真を返します。
<MTIfUserAgentIsMobile>
上記いずれからのアクセス時に真を返します。つまり、この中でのMTElseがPCからのアクセスということになります。

ファンクションタグ:

<$MTUserAgent$>
$app->get_header( 'User-Agent' )をそのまま返します(表示させる時にはescapeしてください)。
<$MTAccesskeyChar$>
num=n(0から9の数字)属性を付けると四角付き数字(絵文字)を出力します。

タグ属性:

url2link
URLをリンクにします。携帯端末の場合、リンクテキストをURLの先頭(35文字)にして、リダイレクタへのリンクに変換します。
reply2author
@から始まるユーザー名をユーザー別アーカイブへのリンクに変換します。

設置方法:

plugins/MovaMotionを設置、mtディレクトリ直下にmova-motion.cgi設置して実行パーミッション与えてmova-motion.cgiにアクセスします。

ライセンス:

  • GPL v2

ダウンロード:

5月23日追記:さらに改良しました。続編はこちら。

さらに続きがあります。

WebSig24/7 MT分科会(MovaMotion?)。 の時に2時間くらいでつくったものですが、何となく昨日今日と少しずつ触って何となく形にしました。結局MotionとかActionStreamとは直接関係のないものになりましたが名前はそのまま(MovaMotion)です。

制作期間5-6時間くらい。MTベースの(携帯)アプリの簡単なベースになるのではないかな?

これは何?

要するに「携帯電話から使うMTベースのTwitter風マイクロブログ」です。携帯でログインでき、複数ユーザーでのチャットのようなことが出来ます。

発言はmt_entryのタイトルとしてひたすら保存されます(保存時にエントリーとインデックスの再構築も行います)。「リプライ」の実体はMTの「タグ」です。ユーザーJunnamaへリプライすると(@ユーザー名とすると)そのエントリーに「junnama(小文字)」というタグを付けて保存します。

非常にシンプルな仕組みで、テンプレートは2つだけ(plugins/MovaMotion/tmpl直下の login.tmplとview.tmplだけ)。基本的にすべてMTタグで書かれているのでカスタマイズも簡単かと思います(誰か格好の良いテンプレートとCSS作ってください!)。

フォローやブロックの仕組みがないのとShift_JISへの変換とかは行っていないので(絵文字にも対応していませんし)あくまでも簡易なものですが、小規模なグループでの情報共有とかには使えるんじゃないかと思います(僕のように外出がちだったりすると重宝するかも)。

制限事項:ユーザー名は半角英数字のみに対応しています(リプライのところ)。

残りタスク

一応メモ。短縮URLを貼れるようにしようかと思います。そのままリンクだとセッション流出するのでリダイレクタかましてのリンクになると思いますが。

5月20日追記 : 短縮URLではないですが、URLを貼付けるとリンクにするようにしました。

スクリーンショット

以下、ブラウザでの見え方になりますが一応画面のキャプチャを貼っておきます。

ログイン画面

ログイン画面。機種IDを登録している場合「クイックログイン」でログイン可能。プルダウン(select)メニューではブログが選択できます。


ログイン後(トップ)

ログイン後のトップページ。「Motion」はブログの名前で、クリックでトップへ(accesskey=0)。

  • 「設定」=クイックログインの設定画面へ
  • 「ログアウト」=ログアウト(セッションの有効期限はMTのUserSessionTimeoutに従う)
  • ログアウトの右の「@junnama」となっているのは、自分へのリプライの一覧を表示
  • 文中の「@junnama」はその人のユーザーアーカイブを表示
  • [Re]でその発言へのリプライ

リプライ画面

[Re]をクリックしたときの画面(ユーザーが全部junnamaだからややこしいけど)。Twitterと同じく@+ユーザー名でその人へのリプライとなる。複数ユーザーへのリプライも可能。


設定画面

[設定]をクリックした時の画面。[機器IDの登録]で、携帯IDを登録します。


追記

自動リンク

URLを貼付けたところ。


リダイレクタ

URLをクリック。そのまま移動またはGoogle Mobile Gatewayを経由して移動ができます。


設置方法:

plugins/MovaMotionを設置、mtディレクトリ直下にmova-motion.cgi設置して実行パーミッション与えてmova-motion.cgiにアクセスします。

ライセンス:

  • GPL v2

ダウンロード:

このアーカイブについて

このページには、過去に書かれたブログ記事のうちMovableTypeプラグインカテゴリに属しているものが含まれています。

前のカテゴリはMovableTypeです。

次のカテゴリはWeb制作・ビジネスです。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。