Movable Typeに関するエントリー

このブログ、No Second LifeはMovable Type 4.23日本語版で運用している。

このところ、あちこちのブログで、はてブやTwitterへのリンク、そしてはてブのUser数などが表示されていて、ちょっと気にはなっていたのだが、実装には至っていなかった。

そこへ、Twitter仲間のRyoAnnaさんが背中を押してくれ、ではということで、三連休を活用していろいろ調べて設置してみた。

091124-0002.jpg514ftcWT-8L.jpg

今回設置したのは上の赤枠で囲った部分。エントリーのタイトルの下、メタデータと言われる部分に設置した

左から「はてブ」ブックマークアイコン、「はてブ」ブックマークユーザー数アイコン、「del.cio.us」ブックマークアイコン、そして「Twitter」のRetweetアイコンの順。ちなみにdel.cio.usとTwitterのアイコンは、個別エントリーのパーマリンクでしか表示されない仕様。つまり、こちらからは表示されずこちらからなら表示されるという仕組み。

設置にあたり、はてブのヘルプを読んだりあちこちのサイトを見て回ったりしたのだが、Movable Type 4.2以降のバージョンに関する解説がほとんど見当たらず、思いの他苦労することになり、最終的にはこちらのNaglly.comさんのエントリーを参考にしつつ、Movable Type 4.2のリファレンス本、「基本からしっかりわかるMovable Type 4.2カスタマイズブック」を参照して加工することになった。

ご存知の方も多いと思うが、Movable Typeは同じバージョン4でも、4.1と4.2では、テンプレートの構造が大きく川鳴っており、僕なような素人に毛が生えた程度のユーザーにとっては、4.1以前の参考資料はなかなか解読が難しくなっているのだ。

そもそも、あちこちき参考資料で「メタデータテンプレート」を加工するように書いてあるのだが、MT 4.2には「メタデータテンプレート」などというものは存在しない。これはMT 4.2での大きな変更点なのだが、そのことを理解するのに30分以上かかってしまった(- -;)。

MT 4.2以降では、以下の手順で操作する。「加工するブログのダッシュボード」→「デザイン」→「テンプレート」

テンプレート画面で、「アーカイブテンプレート」から「ブログ記事」をクリックしてリンクを開く。

 

091124-0003.jpg

で、以下のソースを付け加える。追加する場所は、トラックバックを表示させている人は、トラックバック表示の直後になる。

<mt:IfCommentsActive> <span>|</span> <a href="<$mt:EntryPermalinkmce_markergt;#comments"><$mt:EntryCommentCount singular="コメント(1)" plural="コメント(#)" none="コメント(0)"mce_markergt;</a> </mt:IfCommentsActive> <mt:IfPingsActive> <span>|</span> <a href="<$mt:EntryPermalinkmce_markergt;#trackbacks"><$mt:EntryTrackbackCount singular="トラックバック(1)" plural="トラックバック(#)" none="トラックバック(0)"mce_markergt;</a> </mt:IfPingsActive>

<!-- このエントリーをはてなブックマークに追加 --> <a href="http://b.hatena.ne.jp/append?<$MTEntryPermalinkmce_markergt;"><img src="http://www.ttcbn.net/no_second_life/append.gif" alt="このエントリーをはてなブックマークに追加" title="このエントリーをはてなブックマークに追加" width="16" height="12" border="0" /></a>

<!-- はてなユーザー数の表示 --> <a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalinkmce_markergt;"><img src="http://b.hatena.ne.jp/entry/image/large/<$MTEntryPermalinkmce_markergt;"></a> <MTIf name="entry_template"><!-- 記事のテンプレートのみ表示 -->

<!-- このエントリーをdel.icio.usに追加 --> |<a href="javascript:location.href='http://del.icio.us/post?url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title)"><img src="http://www.ttcbn.net/no_second_life/delicious_icon.gif" width="12" height="12" border="0" alt="このエントリーをdel.icio.usに追加する" title="このエントリーをdel.icio.usに追加する" /></a>

<!-- このエントリーをTwitter経由で投稿 --> <a href="http://twitter.com/home?status=RT ttachi%20 <$mt:EntryTitle encode_html="1"mce_markergt; <$MTEntryPermalinkmce_markergt;" title="Twitter 経由でコメントする"><img src="http://www.ttcbn.net/no_second_life/twitter.png" width="16" height="16" border="0" /></a>

</MTIf> </div> </div>


以上である。注意点を挙げておこう。

1. 上記ソースのグレーの部分はもともとのテンプレートに含まれている部分。黒字の部分が今回挿入したソース。

2. 赤字は設置するブログごとにURLを入力し直す必要がある箇所

3. グリーンの文字の箇所にTwitterのユーザー名を入力する

4. del.cio.usTwitterのアイコンは左のリンクからダウンロードしたうえで、自分のブログの画像アップ場所に置くこと。

5. テンプレートを変更したら、再構築を忘れずに

という感じ。極力分かりやすく解説するよう努めたが、僕のMovable Typeに対する知識が限定的なので、うまくいかなかったら申し訳ない(^_^;)。

半日以上を費やしたが、これに取り組んだおかげで、今まで分かっていなかった、MT 4.1と4.2のテンプレート構造の基本的違いをある程度理解することがてきたことは大きい。RyoAnnaさんありがとう(^o^)/

 

基本からしっかりわかるMovable Type 4.2カスタマイズブック

 

人気ブログランキングへ ← ブログランキングに参加しました。クリックをお願いします!

IMG_2029.PNG

当ブログ、No Second LifeがiPhone最適化画面に対応した。

このブログではiPhoneについてのエントリーを書くことも多いのに、iPhoneのSafariでブラウズする際にiPhone画面に最適化された画面が設定されておらず、以前から何とかせねばと思っていた。

それに加えて、Twitterでご一緒のhiro45jpさんdonpyさんが,続々とご自身のブログをWordPressに移行させ、iPhone用画面に対応している様子を見て、Movable Typeを使っている僕も負けてはいかん,ということでチャレンジしてみた。ちなみに僕のMovable Typeはバージョン4.23jである。

iPhone用画面を実現するには、以下の二つの機能を使う。

一つはcremadesignさんご提供の"iPhoneテンプレート for MT"である。こちらのプラグインは、iPhoneブラウズ専用の画面を従来のファイルとは別に出力する。このブログの場合、http://www.ttcbn.net/no_second_lfe/i/というディレクトリになる。

そしてもう一つは、このブログに来てくれたiPhone、iPod Touchユーザーを、自動で、上記の通り出力されたiPhone用の画面にリダイレクトする、.htaccessの設定である。.htaccessの設定は、関涼子さんのVitalage & Blogを参考にさせていただいた。

では、早速作業手順を見ていこう。

まずはMTにiPhoneテンプレート for MTをインストールするところから。

1. 自分のブログのあるディレクトリにiPhone用ファイルを生成するためのディレクトリを作成する。

当ブログの場合、http://www.ttcbn.net/no_seond_life/i/となる。作業はDrreamweaverまたはFetchで可能。

2. iUIライブラリをダウンロードする。

ちなみにiUIライブラリとは、iPhone風のUIを提供ずくJavascriptとのこと。詳しくはこちらを参照のこと。ダウンロードは、こちらから(リンク先のページ右カラムの「Featured Downloads」から、iui-0.13.tar.gzをクリック)。

3. ダウンロードしたiUIライブラリを、1で作成したディレクトリ直下にアップする。

僕の例ではhttp://www.ttcbn.net/no_seond_life/i/iUI/、となる。

4.  ダウンロードしたiPhoeテンプレート for MTのファイルを1で作成したディレクトリ直下にアップロードする

/tpl/img/ --- 画像ファイル群
/tpl/css/ --- CSSファイ

/i/img/ --- 画像ファイル群

/i/css/ --- CSSファイル

5. Movable Typeのダッシュボードをブラウザで開き、トップページのテンプレートを以下の手順で設定する。

・ダウンロードしたファイルの中にある"index.html"をエディタで開く。

・ブラウザからブログの管理画面で、上部の「システムメニュー→ブログ名」を選択する。

・「デザイン→テンプレート」を選択する。

・「インデックス・テンプレート」から「インデックステンプレートを作成」を選択。

・タイトル欄に「iPhone用トップページ」、本文欄にindex.mtmlの中身を丸ごとコピー&ペーストする。「テンプレートの種類」は、「カスタムインデックステンプレート」、「出力ファイル名」は「i/index.html」とする。

・「保存」をクリックする。

・「保存と再構築」を選択する。

6. 個別ブログ記事生成用テンプレートを設定する

・管理画面で、上部の「システムメニュー→ブログ名」を選択。

・「デザイン→テンプレート」を選択。

・「インデックステンプレート」の一覧画面から、右側の「アーカイブテンプレート」をクリックする。

・「アーカイブテンプレート」の一覧画面から「アーカイブテンプレートを作成」の右側の「ブログ記事」をクリックする。

・タイトル欄に「iPhone用個別ページ」、本文欄に"individual.mtml"の中身を丸ごとコピー&ペーストをして、「保存」をクリックする。

・「新しいアーカイブマッピングを作成」をクリックする。

・「種類」を「ブログ記事」を選択して「追加」をクリック。

・「パス」の下のプルダウンメニューから「カスタム」を選択し、「i/%c/%f」と入力する。

・「保存」をクリックします。

7. ブログを再構築する。

以上でiPhone用の画面の構築が完了である。

ただ、このままだと、iPhone用のURLはPC用のURLとは別のものになってしまい、読者がわざわざiPhone用のURLに移動しなければならない。これは不便なので、以下の設定を追加で行う。

1. .htaccessというファイルを作成する。

2. 以下の通り入力する。

 

RewriteEngine on

RewriteCond %{HTTP_USER_AGENT} iPod [OR]

RewriteCond %{HTTP_USER_AGENT} iPhone [OR]

RewriteCond %{HTTP_USER_AGENT} UP.Browser

RewriteRule ^$ /no_second_life/i/index.html [R]

 

ちなみに赤字の部分はこのブログ独自の部分なので、適宜変更して欲しい。

 

 

3. .htaccessをアップロードする。

以上で全ての設定が完了である。

 

IMG_2029.PNG

 

早速iPhoneからアクセスしてみると、上記画面のようになる。やった〜。

 

IMG_2030.PNG

 

本当はフォントは明朝じゃなくてゴシックがいいのだが、まだ設定が良く分からない。cssで設定するんだろうな。
とにかく、Movable Typeでも問題なくiPhone最適化画面が設定できることが分かって(そして構築できて)何より。
皆さんも是非お試しください(^^)。

 

人気ブログランキングへ ← ブログランキングに参加しました。クリックをお願いします!

最近、自分のTwitterでの呟きを、一日分まとめてブログに載せている方をちらほらと見るようになった。

僕もやってみたいと思い、今いろいろと調べている。Twitterでの呟きをHTML形式に吐き出してくれるサービスは簡単に見つかった。代表的なのはTwilogtwtr2srcなのかな?

上のサービスを使って呟きを吐き出すところまでは良いのだが、これを自分のブログに自動投稿する仕組みを作らないと、当然ブログには載らない。

このブログはMovable Typeで動いているのだが、あれこれ調べてみたところ、こちらのMailPackなるプラグインが使えそうだということが分かった。

というわけで、ちょっと色々試してみたいと思う。うまく行ったらまたレポートします!

自分のブログにファビコンを作って設置しようという企画。前回は自作のオリジナルファビコンをPhotoshopで作成して保存するところまでだったので、今回はその続き。

まず、作成したファビコンファイルをFTPソフトでブログのルート・ディレクトリにアップロードする。アップロードが完了したら、パーミッションも確認しておこう。

正しくファイルがアップロードされたかどうかは、ファビコンファイルのURLをブラウザで叩いてみれば良い。小さなアイコンがブラウザに表示されればOK。

ファイルが無事表示されたら、次はMovable Type 4.2のテンプレートの編集である。Movable Typeは4.1までと4.2でテンプレートの構成が変わっているので要注意。僕は4.2ユーザーなので以下の手順となる。ちなみにこの部分はこちらのサイトを参照させていただいた。

「デザイン」→「テンプレート」の順に選び、「テンプレートモジュール」から「HTMLヘッダー」をクリックする。

HTMLヘッダーテンプレートに以下の2行を貼り付けて保存する。ファビコンファイルの名称をfavicon.ico以外にしている場合は、下のコードのファイル名部分も変更する。

<link rel="shortcut icon" href="<$MTBlogURL$>favicon.ico" type="image/vnd.microsoft.icon" /> <link rel="icon" href="<$MTBlogURL$>favicon.ico" type="image/vnd.microsoft.icon" />

 

090320-05.jpg

てのファイルを再構築すれば出来上がり。

ブラウザやOSによっては、リロードを掛けただけではダメで、キャッシュをクリアしたり、マシンを再起動したりしないとうまく表示されない場合もあるようです。僕はMacのSafariとFirefox、WindowsのFirefoxで表示させてみましたが、いずれもリロードでうまく表示されました。

 

 

090320-06.jpg

というわけで出来上がって表示された僕の自作ファビコンはこちら。このブログはグリーンがテーマカラーなので、緑色のステンドグラス風にしてみました。いかがでしょうか?

 

というわけで、今回はファビコンをPhotoshopを使って自作し変換したが、こちらのような無料のFavicon変換サービスも多数あるようだ。また、こちらのように、ファビコンばかりを集めたサイトもあるようなので、自作は面倒という方は、そういうところで気軽に好みのものを探してみても良いのではないだろうか。

 

人気ブログランキングへ ← ブログランキングに参加しました。クリックをお願いします!

090320-02.jpg

よくウェブサイトのURLの表示ウィンドウの脇のアイコンにオリジナルの画像が貼付けてあるサイトを見かける。見た目も変化があって楽しいし、複数のウィンドウを開いている時にもサイトを見つけ易く、また、アイコンで憶えてもらえるなどのメリットもある。

僕のブログは上の画像のとおり、デフォルトのままになっていて、前から画像を付けてみたいとは思っていたのだが、なくても困るものではないので、つい後回しになっていたのだが、一念発起して調べてみることにした。やっぱりオリジナルの画像が欲しい。

で、調べようと思ったのだが、どういうキーワードで調べたらいいのかすら判らない。で、「URL 横 画像」とか適当にキーワードを入れて検索してみたところ、この小さな画像は"Favicon"、ファビコンと呼ぶということが判った。ファビコンかあ。はじめて聞いたよ。

拾ってきた画像ではなく、自分でオリジナルのファビコンを作ろうと思い、あれこれ調べてみたところ、こちらのサイトに作り方が載っていたので参考にしつつ進めることに。ちなみにMacでPhotoshop CS3を使っての作業です。

というわけで、まずはファビコンにする画像ファイルを作るのだが、それには一つ準備がいる。ファビコンはWindows icon形式(.ico)で作成する必要があるのだが、それにはPhotoshopにプラグインをインストールする必要がある。プラグインはICO (Windows icon) Formatというもので、こちらのサイトから無料でダウンロードできる。

 

090320-03.jpg

 

ダウンロードしたプラグインファイルは、「アプリケーション」→「Adobe Photoshop CS3」→「プラグイン」→「ファイル形式」フォルダ内に格納する。これで次回からプラグインが認識される。

プラグインのインストールが完了したら、Photoshopを起動して新規でファイルを作成する。ファビコンのサイズは16 x 16 pixelなのだが、このサイズで編集をすると、画面が小さすぎて編集がしづらいので、32 x 32 pixelか、64 x 64 pixelで作業をして、作業後に16 x 16 pixelに縮小すると良いだろう。ただし、大きなキャンバスで画像を作ると、つい細かい文字や絵を入れてしまい、16 x 16 pixelに縮小すると、ごちゃごちゃして訳が分からなくなったりするので、途中で何度か試しながらやった方が良いようだ。

 

090320-04.jpg

 

ファイルが完成したら、保存形式をWindows icon形式にして保存する。名前は何でも良いのだが、分かりやすく"favicon.ico"としておくと良いだろう。

これでファビコンファイルが完成!

次はファイルをアップしてMovable Type 4.2で設定するのだが、長くなったので続きは次回。

 

人気ブログランキングへ ← ブログランキングに参加しました。クリックをお願いします!

title_xrea.gif

Movable Typeを導入して以来、機能として搭載されている「日時指定投稿」が出来ないのは、自分がサーバへのインストールに失敗したせいだと思って諦めていた。

別に日時指定投稿機能が使えなくて困ることは大してないのだが、本来享受できるはずの機能が使えないというのは不満であった。

ところが、先日非常に親切なこちらのサイトで、Xreaサーバで日時指定投稿機能を実装するには、追加設定が必要と知り、ではということで早速試してみたというわけ。

昨夜設定しておいたテスト投稿が無事アップされたので、ちょっとまとめておこう。基本的には上でリンクさせてもらっているサイトに書いてある通りなので、簡潔に。

1. 改行コードの設定が可能なテキストエディター(僕はJeditを使っている)で"cron1.sh"という名前のファイルを作る。

2. 作成した"cron1.sh"というファイルを開き、以下をコピペする。

#!/bin/sh
cd /virtual/*****/public_html/*****/mt
/usr/bin/perl ./tools/run-periodic-tasks
echo Future: MT3.31 run-periodic-tasks
echo
exit

3. 上のテキストの"****"の部分を、自分のサーバ用に変更する。

4. 改行方法を"LF (UNIX)"にして保存する。

5. FTPクライアント(僕はFetchを使っています)を起動し、"mt"フォルダ内にcron1.shをアップロードする。

6. アップロードしたcron1.shファイルのパーミッションを700以上に変更する。

7. "mt"フォルダ内に"tools"というフォルダがあるので、その中の"run-periodic-tasks"というファイルのパーミッションも700以上に変更する。

8. ウェブブラウザを起動し、Xreaサイトに行き、自分のサーバを見つけてログインする。

9. 左側のメニューにある"CRONジョブ"をクリックする。

10. cron1.shファイルまでのパスを入力する。

11. 投稿時間の間隔を指示に従い設定する。僕は毎時0分、つまり一時間に一度にしました。負荷がかかる動作なので、必要以上に頻繁に投稿する設定にはしないようにしましょう。

12. 以上で設定は終わりなのだが、この設定をすると、投稿時間が来るたびに、Xreaサーバから自動配信メールが届いて鬱陶しい。僕はフィルターを使って自動削除に設定しておいた。

さあ、これで日時指定投稿が出来るようになった。あとは画像検索が出来ない点についても調べてみよう。

人気ブログランキングへ ← ブログランキングに参加しました。クリックをお願いします!

皆さんおはようございます。

昨日寝る前に仕込んでおいた日時指定投稿記事、無事御膳3時にアップされてました。よしよし。

詳しくはまた昼か夜にでも書きますかね。

取り急ぎ結果報告!

ただいま時刻は22:52です。

このエントリーを午前3時に公開するように設定しました。

さて、ちゃんと公開されるかな?

テストです。Xreaでは追加設定しないとできないんで、今日やってみたんです。

結果が楽しみだ。

Twitterのブログパーツを取り付けているのだが、当初から一部ブラウザで表示がちぎれてしまい見えづらい状態が続いていて、何とかしようと思っていた。

で、とりあえず一番手っ取り早くということで、Twitterが出しているブログパーツを、以前のFlash版からHTML版に変更してみた。

手順は簡単。Twitterのこちらのページにアクセスし、ブログの種類を選択。僕の場合は「その他」を選び、次の画面でHTM版を選ぶ。

あとは表示させるつぶやきの数やらタイトルやらを設定するとコードが表示されるので、そのコードをMovable Typeのダッシュボードから「デザイン」→「ウィジェット」の順に選択し、「ウィジェットテンプレートを作成」のリンクをクリックして新規ウィジェット作成ページを開く。

あとはさっき作ったコードをコピペしてウィジェットテンプレートを保存し、ウィジェットセットの好きな場所に作ったウィジェットテンプレートを表示させればOK(僕の場合は3コラムのサイドバー(サブ)に表示させている)。ウィジェットセットを保存したら、ブログを再構築すれば完了。

うん、何だかまだちょっと物足りないけど、とりあえずきちんと表示はされるようになったので、第一段階としては良しとしよう。

というわけで今日もぶつぶつ呟いていますので、どうぞよろしく。

 

人気ブログランキングへ ← ブログランキングに参加しました。クリックをお願いします!

flickr_logo_gamma.gif.v59899.14.gif

自分を取り巻くデジタルな情報をブログに集約していきたいという活動の一環として、Twitterで自分の呟きを取り込み、さらにlast.fmで自分の音楽をブログに取り込んでみた。

で、次は自分が撮った写真を融合させたい、ということで調べてみたところ、flickrにブログパーツがあって自分の写真をブログに表示できそうだったので、早速flickrに登録してみた。

新規登録をしようとして初めて知ったのだが、flickrって米Yahoo!のサービスなのね。ずいぶん前からサービスの存在は知ってはいたが、米Yahoo!のサービスだったとは知らなかった。買収されたのかな?でも日本のYahoo!とは関連づけられてないみたい。IDを別に作るのは嫌だなあ。

などとブツブツ言いつつも登録が無事完了。さっそくブログパーツを探し、Movable Typeのウィジェットに登録。で、写真をアップロードしようと思ったら、デフォルトのflickr uploaderの他に、iPhotoと連動するflickr export for iPhotoというアプリがシェアウェアであることが分かり、早速試用版をダウンロードしてみた。

あーこれは便利だね。もうちょっと試してみて問題ないようならライセンスを購入しよう。

などとあれこれやって、無事右のサイドバーに写真が表示されるようになりました。

なのだが、先日のTwitterウィジェットと同様、サイドバーに表示させると切れて見えてしまう。サイドバーのサイズ変更をすればいいんだよね。でも面倒だあ。

いずれにしても、これで写真もブログに融合できた。次は本と、あとはやっぱりブログのフィード更新も表示させたいな。読んでるブログは一覧表示できるようになったものの、どのブログが更新されたのかについては表示できなくて、それを何とかしたいところだ。

頑張ろう。

人気ブログランキングへ ← ブログランキングに参加しました。クリックをお願いします!

123
free counters

 

 

 

あわせて読みたいブログパーツ

 

 

 

読んでるブログ
読んでるニュース
読んでる日記
Powered by Movable Type 4.23-ja

 

 

 

 

 

 

 

 

 

 

このアーカイブについて

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

前のカテゴリはMacです。

次のカテゴリはMovieです。

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