タグ「Movable Type」が付けられているもの

Movable Type for iOS

iPhoneでMovable Typeへの記事投稿が行なえるアプリ「Movable Type for iOS」を試してみました。

mtios.png

操作はそんなに難しくなく、簡単に使いこなすことが出来ると思います。新規で記事を作成する場合は、リッチテキスト形式で入力、編集が可能ですが、一度保存してから再編集しようとするとリッチテキスト形式でなくなってしまう為、タグをある程度理解していないと編集が難しいかもしれません。(バグなのかもしれません。)

出先などで思いついたことをこのアプリで入力しておき、後でPCのブラウザを使って再編集という使い方が適しているように思いました。

念の為、インストールする前にMovable Type for iOSのマニュアルを一読しておけば、困ることは無いと思います。

サーバーの引越し

a1180_001332_m.jpg

今まではさくらのVPSを使っていましたが、OSのアップデートかセキュリティ対策するのが億劫になってきたので、さくらのレンタルサーバへと引越ししました。

プランは、人気No.1のスタンダードです(笑)。

さくらのレンタルサーバについて情報収集してると、503エラーで制限がかかるというのをよく目にしたんですが、WordPressを使っている方が多いようですので、Movable Typeで静的コンテンツをメインにしていれば大丈夫なのではないかと思ってます。

VPSとか一台丸ごと借りて自由に設定できるサーバーとは違い、ちょっと癖のあるさくらのレンタルサーバですが、使用している人が多いという事もあり、検索すれば対処方法がすぐに見つかるのは良い点ですね。

Movable TypeでYoutubeの動画を埋め込む

Movable TypeでYoutubeの動画を埋め込む方法です。

https://www.youtube.com/watch?v=GZ9m6-Q-ddoの動画を埋め込む場合、「埋め込みコード」をクリックして表示される下記のコードをコピーして貼り付ければ、ブログの記事に動画を埋め込むことができます。

<iframe width="560" height="315" src="https://www.youtube.com/embed/GZ9m6-Q-ddo" frameborder="0" allowfullscreen></iframe>

この方法だと、毎回コードをコピーして埋め込むのが、ちょっとだけ面倒です。また、ブログのスタイルを変更して、動画のサイズを変更したい時などには、検索や置換機能を使用する必要があるので、後々のメンテナンスのことを考えて、カスタムフィールドを使用して簡単に埋め込むことにしました。

youtube用のカスタムフィールドを下記のように新規作成します。
名前:youtube
種類:テキスト
必須:チェックなし
ベースネーム:youtube
テンプレートタグ:EntryDataYoutube

フォトギャラリー(DynamicMTML)

DynamicMTMLを使うとリアルタイムで更新されるフォトギャラリーが簡単に出来ました。

DynamicMTMLをインストール後、ウェブページに下記のコードを入力します。

<mt:DynamicMTML>
<MTAssets type="image" lastn="20">
<a class="asset-image" rel="shadowbox[photo_gallery]" title="<$MTAssetDescription$>" href="<$MTAssetURL$>"><img src="<$MTAssetThumbnailURL width="320"$>" class="asset-img-thumb" alt="<$MTAssetLabel$>" title="<$MTAssetDescription$>" /></a>
</MTAssets>
</mt:DynamicMTML>

MTAssetsタグのlastnモディファイアで、表示する画像を20に制限しています。

画像(アイテム)に付けたのタグで制限する場合は、 tagモディファイアを追加します。
例: tag="tag-name"

CKEditor for MT

Movable Typeのプラグイン「CKEditor for MT」をインストールしました。

入手先は、Downloads for usualoma's ckeditor-for-mt - GitHubです。

とりあえず、プラグインの「設定」の「その他の設定」で、下記の設定値を追加して、編集エリアの行数を変更してみました。

config.height = '30em';

カスタマイズできる部分が多すぎて、全ては使いこなせないと思います・・・(汗)。

今までは、HTMLタグを手入力する事が多々ありましたので、だいぶ手間が省けると思います(^^)。

トラックバックスパム、コメントスパム対策

iptablesでスパム排除をしましたが、日本やその他の国からもスパムはやってくるので、apacheのhttpd.confに下記のような設定をしています。

SetEnvIf User-Agent "^$" deny_ua
SetEnvIf User-Agent "Trackback" deny_ua
SetEnvIf User-Agent "Windows 3¥.1" deny_ua
SetEnvIf User-Agent "Windows 95" deny_ua
SetEnvIf User-Agent "Windows 98" deny_ua
SetEnvIf User-Agent "Windows 2000" deny_ua
SetEnvIf User-Agent "Nutscrape" deny_ua
SetEnvIf User-Agent "User-Agent" deny_ua
SetEnvIf User-Agent "USERAGENT" deny_ua
SetEnvIf User-Agent "libghttp" deny_ua
SetEnvIf User-Agent "^tb_send/1¥.0" deny_ua

<Directory "/var/www/html/mt">
  <Files ~ "¥.cgi">
    Order allow,deny
    Deny from env=deny_ua
    Allow from all
  </Files>
</Directory>

緑色の(/var/www/html/mt)は、環境に合わせて変更してください。

古くてサポートが切れているWindows系のOSを拒否していますが、場合によっては、古いブラウザIE5等も拒否しても良いかもしれません。

ケータイキット for Movable Type

ケータイキット for Movable Typeを試用しています。

インストールと設定は、そんなに難しくはないですが、テンプレートを沢山作成するので、少し手間がかかります。

スマートフォンにも対応していますが、現時点では、iPhoneとAndroidに対応しています。携帯以外の機種でアクセスした場合にリダイレクトするように設定していると、Windows Phoneでアクセスした場合、PC用のページへリダイレクトされます(汗)。

リダイレクトの設定を外した状況でWindows Phone(IS12T)からアクセスすると、携帯用のページが表示されました。

このブログのトップページに携帯でアクセスした場合、携帯用のページへリダイレクトするように設定してみました。テンプレートの1行目に下記のコードを追加しています。

<?php
$link = "Location: <mt:blogurl>m/";
$ua = $_SERVER["HTTP_USER_AGENT"];
if(ereg("DoCoMo",$ua)||ereg("J-PHONE",$ua)||ereg("Vodafone",$ua)||ereg("SoftBank",$ua)||ereg("MOT-",$ua)||ereg("KDDI",$ua)||ereg("UP\.Browser",$ua)||ereg("PDXGW",$ua)||ereg("DDIPOCKET",$ua)||ereg("WILLCOM",$ua)||ereg("GoogleWireless Transcoder",$ua)){ 
header($link);exit;
}
?>

Movable Type再構築

phpでerrorが出る現象ですが、vpsのOS再インストールをして直りましたが、Movable Typeのダイナミックパブリッシングが出来ない現象は直らず。

また、Movable Typeのバックアップと復元を試みるも、復元がうまくいかなくて記事のエクスポート、インポートで対処することにしました。Movable Typeの復元でエラーになってうまくいかない事が多いみたいで、検索すると多くの人が挫折しているようです(汗)。

エラーの内容から推測すると、アイテム(画像)を登録する際に、すべてを一度で登録しようとしてPOSTしているURIが長すぎるようです。

また変になると嫌なので、Movable Typeのカスタマイズは程々にして使うことにします。( ..)ヾ ポリポリ

ブログを再構築した為、登録していたユーザー情報がリセットされました。登録していただいていた方々の情報が全て無くなりましたので、ログインできなくなっています。m(__)m

shadowbox設置

今までthickboxを使っていましたが、動画にも対応できるshadowboxへ変更しました。

Movable Typeでの設置は、以下のような手順でできます。

shadowboxのサイトからダウンロードし、圧縮ファイルを解凍します。

cssファイルで指定している画像へのリンクを修正し、サーバーへアップロードします。

HTMLヘッダーテンプレートに下記を追加します。

<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
 language: 'ja',
 autoplayMovies: false,
 players: ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv']
 });
</script>

cssとjsファイルのURLは、アップロードした場所にあわせて修正します。 

autoplayMoviesは、動画の自動再生の設定で、デフォルトではtrueになっています。

Internet Explorer 9でMovable Typeの管理画面へのアクセス

Internet Explorer 9をインストールして使用していますが、Movavle Typeの管理画面がIE9に対応していない為、表示が正常に出来ない所があります。

metaタグで対応するのは面倒なので、apacheの設定ファイル(httpd.conf)を変更して対応することにしました。

viでhttpd.confを開き、LoadModuleが記述されている所の下に、

Header set X-UA-Compatible "IE=8"

の1行を追加しました。

携帯電話用ページの作成

DSC05425.jpg

CMSとして使う Movable Type 5 ガイドブックを参考にして、Movable Typeで携帯電話用のページを作成しました。

サンプルファイルを流用させていただきましたが、自分のブログに合わせてカスタマイズするのに、苦労した点がいくつかありました・・・。

本の間違いでハマった点。

  • P.357にあるブログ記事(ケータイ)テンプレートと詳細(ケータイ)のリンクしているファイルが、両方ともdetail.tmplになっています。詳細(ケータイ)がリンクしているのは、mod-detail.tmplです。
  • トラックバック(ケータイ)がリンクするファイルは、trackback.tmplではなくtrackbacks.tmplです。

コメントを見やすく表示する

MTOS 4.2 RC2をインストールしてお試し中です。

MTOS 4.2では、コメントの返信機能が使えるようになっているのですが、テンプレートの表示では返信機能が生かされていないようです・・・。

コメントの返信も簡単に表示も解りやすく | MovableType.jpを参考にして、コメントのテンプレートを修正して入れ子に表示できるようにしてみました。

Liteboxを使えるようにしてみました

画像をカッコ良く(?)表示させるツールLiteboxを使えるようにセットアップしました。

小粋空間: Litebox 1.0 をブログに適用するを参考にして、Movable Typeのテンプレートを使用する方法でセットアップしました。詳しい解説のおかげで、苦労する事無く簡単に出来ました(^^)

一部の画像はポップアップで表示するようになっているので、それらは追々変更していきたいと思います。

最近のコメントのテンプレートを変更

Movable Typeに標準でインストールされるようになった、Widgetを使用して最近のコメントを表示するようにしていました。

デフォルトのテンプレートだと、コメントを新しい順に並べるだけですので、ちょっと見にくい感じがしていました。

エントリー毎にコメントをまとめて表示すれば、少しは見やすくなると思いましたので、そのようにテンプレートを変更してみました。

Widget: 最近のコメント(デフォルトテンプレート)。

<div class="module-recent-comments module">
  <h2 class="module-header"><MT_TRANS phrase="Recent Comments"></h2>
  <div class="module-content">
<MTComments lastn="10" sort_order="descend">
    <a href="<MTCommentEntry><$MTEntryPermalink$></MTCommentEntry>#comment-<$MTCommentID$>"><$MTCommentAuthor$> on <MTCommentEntry><$MTEntryTitle$></MTCommentEntry></a>: <$MTCommentBody remove_html="1" trim_to="10"$><br />
</MTComments>
  </div>
</div>

緑色で表示されている部分を削除して、赤色で表示されている部分を追加します。

Widget: 最近のコメント(変更後のテンプレート)。

<div class="module-recent-comments module">
   <h2 class="module-header">最近のコメント</h2>
   <div class="module-content">
      <MTEntries recently_commented_on="10">
         <p><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
         <MTComments lastn="5">
          └ <$MTCommentAuthor$> <a href="<$MTEntryPermalink$>#comment-<$MTCommentID$>">at <$MTCommentDate format="%Y.%m.%d"$></a><br />
         </MTComments></p>
      </MTEntries>
   </div>
</div>

MultiBlog

複数のブログを開設して、それぞれのRSSファイルをMixFeedのサービスを利用して一つにまとめ、mixi(日記)の外部リンクとして指定していました。

MixFeedの更新が遅かったり、数日経っても更新されないことがありますので、Movable TypeのプラグインMultiBlogを使ってRSSをまとめてみました。

mixiが外部へリンクしている日記を確認するのに、ある程度の時間が掛かってしまいますので、リアルタイムでの更新とはならないのは仕方がありませんね(^^;;。

エントリー・アーカイブのテンプレートを修正

metaタグの追加をして、keywordsを設定していましたが、キーワードを入力していないエントリの場合、contentの設定内容がブランクになってしまいます。これだと、あまりよろしくないというか、あまり美しくない(笑)ので、キーワードに何も入力が無い場合、metaタグを出力しないように、テンプレートを修正しました。

修正前

<meta name="keywords" content="<$MTEntryKeywords$>" />

修正後

<MTIfNonEmpty tag="MTEntryKeywords"><meta name="keywords" content="<$MTEntryKeywords$>" /></MTIfNonEmpty>

MTIfNonEmptyやMTIfNonZeroを使うと、テンプレートのカスタマイズが色々と出来るので、使い方を覚えると良いんじゃないかと思います。