小粋空間  -  a cheap joke and a play on words site

Facebookページ（旧ファンページ）にブログのRSSフィードを表示する方法を紹介します。ここではRSS Graffitiというアプリケーションを利用します。Facebookページの作り方は「Facebookのファンページ作成～FBMLを使えるようにするまでの流れ」をご覧ください。

RSS Graffiti

余談ですが、小粋空間のFacebookページを作りました。まだ何もありませんが25人以上の方からの「いいね」をお待ちしています（画像下の「いいね」ボタンそれです）。
2011.02.28追記：25人超えました。ありがとうございました。

小粋空間のFacebookページ http://www.facebook.com/koikikukan

１．Facebookページへのアプリケーション登録

「RSS Graffiti」のページ左にある「マイページへ追加」をクリック。

候補の一覧がでるので、追加したいFacebookページの「Facebookページに追加」をクリック。追加されると候補から表示が消えるので、「閉じる」をクリック。

追加したFacebookページに移動して、「基本データを編集」をクリック。

「アプリ」をクリック。

「RSS.Graffiti」の「アプリケーションへ移動」をクリック。

アプリケーション利用のための認証を行います。「Click HERE to authorize RSS Graffiti」をクリック。

「許可する」をクリック。

1回で認証が完了しない場合、表示されているボタンをクリックします。

「許可する」をクリック。

もうひとつの認証ボタンもクリック。

「許可する」をクリック。

すべて許可されるとStatusが次のように「Configured」なります。

Statusが「Some Permissions Required」から進めなくなった場合は、３項を参照してください。

２．フィードの追加

「+Add feed」をクリック。

フィードの情報を入力します。設定項目は次の通りです。日本語は文字化けするようです。

• Feed URL（フィードのURL）
• Source Name（ウェブサイト名）
• Source URL（ウェブサイトURL）

「click here to fetch and preview it.」のリンクをクリックすればプレビューが行えます。

プレビューはこのように表示されます。

設定が完了したら「Save」をクリックします。

３．トラブルシューティング

「Allow Publishing: Pending」というメッセージが表示されて認証画面から先に進むことができない場合は、http://www.facebook.com/settings/?tab=applications&app_id=45439413586にアクセスして、「ウォールへの投稿」を削除。

次に、http://www.facebook.com/connect/uiserver.php?app_id=45439413586&next=http%3A%2F%2Fapps.facebook.com%2Frssgraffiti%2F&display=page&perms=publish_stream&enable_profile_selector=1&method=permissions.request
にアクセスし、表示させたいページにチェックを入れる（ただしこの作業では表示させたいFacebookページは表示されず）。

４．参考サイト

参考サイトは以下です。ありがとうございました。

• RSS.Graffitiの使い方
• RSS GraffitiでAllow Publishing: Pendingと表示されてブログの更新状況を取り込めない

Twitter・Facebook・Google OpenSocialに関する開発者向け書籍の紹介です。

書籍は、Twitter API・Facebookプラットフォーム・Google Friend Connectおよび、それらの統合方法について解説されています。Facebookアプリ開発の日本語版書籍は今のところこの本だけのようです。

サンプルコードも掲載されているので、ソーシャルアプリケーション開発を行おうという方のとっかかりになるかもしれません。

第1部 Twitter

第1章 Twitter APIの使い方

1.1 Twitter APIの基礎

1.2 Twitter APIへのアクセス

1.3 まとめ

第2章 Twitter APIメソッドへの招待

2.1 Twitter APIメソッド

2.2 Twitterの検索API

2.3 まとめ

第3章 Twitter OAuthを使った認証

3.1 Twitter OAuthの紹介

3.2 Twitter OAuthの実装

3.3 まとめ

第4章 Twitter API の拡張：リツイート、リスト、現在地

4.1 Twitterの主要機能の拡張

4.2 Twitterコミュニティの発展

4.3 まとめ

第2部 Facebookプラットフォーム

第5章 FacebookプラットフォームのWeb サイト統合

5.1 開発者向けFacebookプラットフォーム

5.2 Facebookプラットフォーム

5.3 Facebook API、FQL、XFBML

5.4 まとめ

第6章 Facebookを使った登録、認証、翻訳

6.1 ユーザーの許可と認証

6.2 友達の接続と招待

6.3 Tranlations for Facebook

6.4 まとめ

第7章 Facebook を使用したシェア、コメント、ニュースフィードの公開

7.1 コンテンツのシェアとライブチャット

7.2 ソーシャルコメントとニュースフィードの紹介

7.3 まとめ

第8章 アプリケーション検索、タブナビゲーション、FacebookのJavaScriptライブラリ

8.1 アプリケーションとダッシュボードカウンタ

8.2 タブを使ったアプリケーションの検索と紹介

8.3 動的なコンテンツやFacebookのJavaScript（FBJS）ライブラリ

8.4 まとめ

第3部 Google Friend Connect

第9章 Google Friend Connect の概要

9.1 Google Friend Connectのコンポーネント

9.2 Google Friend ConnectのJavaScript API

9.3 APIについて

9.4 まとめ

第10章 サーバサイド認証とOpenSocialの統合

10.1 サーバサイドOpenSocialプロトコルと認証方式

10.2 PHP OpenSocialクライアントライブラリをGoogle Friend Connectとともに使う

10.3 まとめ

第11章 Google Friend Connectを使ったOpenSocielガジェット開発

11.1 Googleガジェットの概要

11.2 Googleガジェットの作成

11.3 まとめ

第4部 統合

第12章 CodeIgniter を使ったマイクロブログツールの構築

12.1 CodeIgniterの概要

12.2 基本的なSprogアプリケーションの構築

12.3 まとめ

第13章 Twitter、Facebook、Google Friend Connectの統合

13.1 Twitterの機能の実装

13.2 Facebookの機能の実装

13.3 Google Friend Connectの機能の実装

13.4 まとめ

放送されました！

jQueryでサイドメニューの折りたたみを実現するjQuery listfolderプラグインをバージョンアップしました。

１．追加機能

v0.0.2までは、リストがすべて折りたたまれた状態でしか表示されませんでした。v0.0.3では折りたたみを開いた状態で表示できるよう、プラグインオプションで設定できるようにしました。

v0.0.2までの初期状態（すべて閉じた状態で表示）

v0.0.3の初期状態（指定したリストを開いた状態で表示）

特定のリストを開いた状態にするには、次のようにinitOpenオプションを設定します。

<script type="text/javascript">
jQuery(function() {
    jQuery('#box').listfolder({
        initOpen: ['aaa','ddd','fff'],
    });
});
</script>

オプションの値には、開いた状態で表示したいリストのid属性値を配列で設定します。なお、折りたたみ状態がクッキーに保存された時点で、そのリストに対する初期状態は無効になります。

また、オプション「sidebar_class」の名称を「sidebarClass」に変更しました。

２．ダウンロード

jQuery listfolderプラグインは以下のリンクからダウンロードしてください。

jQueryでサイドメニューの折りたたみを実現するListfolderプラグイン

ブログ記事保存時に別のブログ記事を再構築する「RebuildEntryByIdプラグイン」を公開します。このプラグインは「RebuildBlogByIDプラグイン」や「RebuildIndexByIdプラグイン」を参考にさせて頂いてます。

１．機能

ブログ記事・ウェブページのプライベートタグに再構築したい記事IDを指定しておけば、その記事を保存・更新した時に、指定した記事を同時に再構築します。指定する記事IDは別ブログでも構いません。これにより複数ブログによるサイト構築時、MultiBlogによるインデックスページ以外に、ブログ記事間での再構築の連携が行えるようになります。

文章では伝わりにくいのでイメージを下図に示します。

２．価格

• 個人無償版／有償版での非商用利用／Movable Type Open Source：無償
• 有償版での商用利用：1000円/1サーバ（事前に動作確認してください）

無償でご利用の場合も、プラグインのご利用についてご支援・ご賛同くださる方からの寄付をお待ち申し上げます。

３．プラグインのダウンロード

以下のリンクよりプラグインアーカイブをダウンロードします。

RebuildEntryById_0_01.zip

４．プラグインのインストール

プラグインアーカイブを展開し、中にある RebuildEntryByIdフォルダごと、Movable Type のアプリケーションディレクトリの plugins ディレクトリにアップロードします。

システム管理画面のプラグイン一覧で、「RebuildEntryById～」が表示されればインストール完了です。

５．プライベートタグの設定と動作について

ブログ記事またはウェブページのタグに「@rebuild_x」というプライベートタグを設定してください。「x」の部分には、再構築したい記事のIDを設定します。

このプライベートタグを設定したブログ記事またはウェブページを保存・更新したとき、設定したプライベートタグに含まれる記事IDの記事を再構築します。

複数の記事を再構築したい場合は、「@rebuild_x」というプライベートタグを必要な分だけ設定してください。

６．接頭辞の変更

プライベートタグのデフォルトの設定形式は４項の通り「「@rebuild_x」となっていますが、接頭辞にあたる「rebuild_」を、他の文字列に変更することができます。

変更するには、プラグインを利用したいブログ管理画面のプラグイン一覧で、「RebuildEntryById～」→「設定」をクリックし、「プライベートタグの接頭辞」を書き換えてください。

７．制約事項

現在、このプラグインで再構築する対象は「ブログ記事アーカイブ」のみです。

jQueryでサイドメニューの折りたたみを実現するListfolderプラグインを紹介します。同じようなプラグインはすでに存在すると思いますが、勉強がてら作ってみました。

１．機能

このプラグインを利用すれば、サイドメニュータイトルをクリックすることで、リストの折りたたみが簡単にできるようになります。

折りたたみ機能だけであればjQueryを数行書けば実現できますが、このプラグインのウリは折りたたみ状態をクッキーに保持することです。クッキーに保持するので、リロードや他のページに移動しても折りたたみ状態が初期状態に戻ることはありません。

動作は以下の配布ページで確認できます。配布ページのサイドメニュータイトルをクリックすれば折りたたみを行えます。

jQuery listfolder plugin

以下、インストールと利用方法を説明します。

２．プラグインのダウンロード・インストール

Listfolderのページにある「jquery.listfolder_0.0.1.js（バージョンは2011年2月現在）」のリンクを右クリックして、プラグインファイルをダウンロードします。保存時にファイル名はjquery.listfolder.jsとします。

プラグインのご利用についてご支援・ご賛同くださる方からの寄付をお待ち申し上げます。

折りたたみを行いたいページに以下の内容を設定します。

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.listfolder.js"></script>
<script type="text/javascript">
jQuery(function() {
    jQuery('#box').listfolder();
});
</script>

#boxの部分は、折りたたみを行いたいリストを包含している要素やid属性など、何でも構いません。

３．(X)HTMLマークアップ

Listfolderプラグインは、次のような(X)HTMLマークアップを想定しています。 サンプルはdt/dd要素を用いていますが、div要素やul/li要素でも構いません。メニュータイトルのclass属性・id属性は必須です。また、メニュータイトルのclass属性は統一してください。

<dt class="sidetitle" id="hoge">Recent Entries</dt>
<dd>
  <ul>
    <li><a href="2011/08/post-8.html" title="e22">業務提携に関するお知らせ</a></li>
    <li><a href="2010/09/post-9.html" title="e23">モバイルサイトオープン</a></li>
    <li><a href="2010/07/java.html" title="e19">ソリューションセミナー</a></li>
  </ul>
</dd>

４．オプション

listfolderプラグインは、次のオプションを用意しています。

• sidebarClass:メニュータイトルのclass属性値
• time:折りたたみスピード。デフォルトは0
• initOpen:初期状態を開いた状態にしたいリストのid属性値を配列で指定。デフォルトなし

設定例

jQuery(function() {
    jQuery('#box').listfolder({
        sidebarClass: 'hoge',
        time: 1000,
        initOpen: ['bbb','ddd','fff'],
    });
});

Movable Type でカテゴリ選択を限定する「CategorySelectorFilterプラグイン」を公開します。

１．機能

ブログ記事投稿画面のカテゴリ選択でカテゴリをチェックすると、他のカテゴリを選択できないようにします。チェックを外せば再び選択できるようになります。

選択前の状態

選択後の状態（選択したカテゴリ以外のカテゴリのチェックボックスはdisable）

また、選択可能なカテゴリをプラグインで指定することもできます。チェックを外しても選択不可のカテゴリは選択できません。

例：サブカテゴリのみを選択可能にした状態

細かい話ですが、選択可能なカテゴリはマウスオーバーで背景色を変更しますが、選択不可の状態では背景色を変えることはできません。

選択可能なカテゴリ上でのマウスオーバー

選択不可なカテゴリ上でのマウスオーバー

２．謝辞

このプラグインではJavaScriptを実装していますが、その一部について、たいようさんがMTQに投稿されたスクリプトを利用させて頂いてます。この場をお借りしてお礼申し上げます。

３．プラグインのダウンロード

GithubのCategorySelectorFilterプラグインのページにある「ダウンロード」をクリックして、プラグインアーカイブをダウンロードします。

４．プラグインのインストール

プラグインアーカイブを展開し、中にある CategorySelectorFilterフォルダごと、Movable Type のアプリケーションディレクトリの plugins ディレクトリにアップロードします。

システム管理画面のプラグイン一覧で、「CategorySelectorFilter～」が表示されればインストール完了です。

５．プラグインの設定

プラグインを利用したいブログ管理画面のプラグイン一覧で、「CategorySelectorFilter～」→「設定」をクリックし、「このプラグインを有効にする」をチェックして、「選択可能なカテゴリID」に選択可能にしたいカテゴリIDを入力します。カテゴリIDが複数ある場合はカンマ区切りで設定してください。

すべてのカテゴリを選択対象にする場合は、何も設定しないか「all」を設定してください。

当ブログで配布中の FC2ブログテンプレートを修正しました。

１．改善点

(X)HTMLマークアップを見直し、本文が表示されるカラム（中央カラム）がサイドバーのカラム（左カラム）よりも先に出現するようにしました。例えば、3カラムレイアウトは次のように変更しています。

変更前の(X)HTMLマークアップ（抜粋）

<div id="links-left-box">左カラム</div>
<div id="content">中央カラム</div>
<div id="links-right-box">右カラム</div>

変更後の(X)HTMLマークアップ（抜粋）

<div id="content">中央カラム</div>
<div id="links-left-box">左カラム</div>
<div id="links-right-box">右カラム</div>

変更対象は以下の4つのレイアウトです（画像はMovable Typeのものを流用していますが対処は同じです）。

3カラムレイアウト

3カラムリキッドレイアウト

2カラムレイアウト（左サイドバー）

2カラムリキッドレイアウト（左サイドバー）

２．テンプレートのダウンロード

FC2ブログテンプレートは、下記のページからダウンロードしてください。

FC2ブログテンプレート

facebook入門用新書の紹介です。

冒頭で「Facebookで何ができるか」を簡単に紹介したあと、Facebookの各機能についての操作方法を詳しく解説しています。キャプチャ画面を豊富に使っているので非常に分かりやすいです。Facebookの使い方をとりあえず把握したいという方におすすめです。

以下、目次です。

目次 はじめに

第1章　フェイスブック。それはもうひとつのインターネット

全世界6億人以上が使うフェイスブックとは

フェイスブックを始めるとやみつきになる理由

インターネットの中のもうひとつのインターネット

第2章　フェイスブックを実際に使う

フェイスブックにユーザー登録する準備

ユーザー登録を開始する

第3章　フェイスブックに投稿してみる

フェイスブックへの最初の投稿

まず自分の近況を投稿してみる

「いいね！」とコメントを入力してみる

投稿を削除する

ホーム画面とプロフィール画面

コミュニケーションの基本はウォール

自分以外のウォールにも投稿できる

ニュースフィードは、必要な情報を選りすぐってくれる

画像、リンク（URL）、動画のシェア

第4章　フェイスブックで「友達」を増やすと、楽しく便利になる　

フェイスブックは「ユーザー」がコンテンツ

雑談はあなたを幸せにする

フェイスブックで「友達」とつながる

フェイスブックで知り合いを探す

メッセージで自己紹介する

メッセージやリクエストは即配信される

フェイスブックがオススメする人から選ぶ

友達を承認する基準

ツイッターと使い分けるべき？

やってきたフェイスブックのブレイクは…

ソーシャルとは何か？　という議論

ガラパゴスなんて気にしない

フェイスブックでバーチャルな友達を作る方法

友達が100人いると

第5章　リスト、グループ、ファンページでたくさんの人と情報をシェアする

たくさんの人とつながる３つの方法

リストで、安全かつ便利に写真や情報を共有する

リストを作ってみよう

作成したリストをあとから修正する

リストを使って投稿を公開する相手を限定する

指定したリストに含まれる人の投稿だけをニュースフィードに表示する

リストは「プレイリスト」に似ている

グループを使ってコミュニティを作る

グループを作成する

グループを自分向けにどう表示するか設定する

グループの機能を設定する

グループに写真を投稿してみる

グループでイベントを告知・共有する

グループで長文を共有する「ドキュメント」

ホームページ、ブログの次はファンページ

ファンページは、グループのハイグレード版？

ファンページを作成する

作成したファンページを告知し、細部を作り込む

ファンページを管理する

ファンページのユーザーネームを取得

ファンページの「いいね！」ボックスを外部サイトに表示する

第6章　最新ソーシャルゲーム「シティヴィル」攻略入門

フェイスブックでゲームを楽しむ

ソーシャルゲームといえばジンガ

最新ゲーム「シティヴィル」は街作りシミュレーション

4つの要素で「街を経営する」ゲームシステム

シティヴィルの始め方

自分のペースで街を育てていこう

「友情か」「金か」

隣人と助け合うと、ゲームが楽しく進む！

シティヴィル攻略のヒント

第7章　さらに使いこなす

アルバムを使いこなす

ブログと連携させる

ツイッターと連携させる

フェイスブックでわからないことがあったら

Movable Type 5.1のブログ記事投稿画面・ウェブページ作成画面の公開ボタンの動作を変更するPublishButtonChangerプラグインを公開します。

このプラグインはMovable Type 5.0x版の「PublishButtonChangerプラグイン」を全面改修したものです。

１．機能

ブログ記事・ウェブページ作成画面で次の動作を行う場合、確認のダイアログを表示します。「OK」をクリックすればクリックしたボタンの動作を継続し、「キャンセル」をクリックすれば中止します。

• 新規作成→「公開」をクリックしたとき
• 未公開（原稿）状態→「公開」をクリックしたとき
• 公開状態→「更新」をクリックしたとき
• 公開状態→「保存（＝下書きに戻す）」をクリックしたとき

新規作成→「公開」をクリックしたとき／未公開（原稿）状態→「公開」をクリックしたときのダイアログ

公開状態→「更新」をクリックしたときのダイアログ

公開状態→「保存」をクリックしたときのダイアログ

ダイアログのメッセージを変更することも可能です。

２．価格

• 個人無償版／有償版での非商用利用／Movable Type Open Source：無償
• 有償版での商用利用：3150円/1サーバ（事前に動作確認してください）

無償でご利用の場合も、プラグインのご利用についてご支援・ご賛同くださる方からの寄付をお待ち申し上げます。

３．プラグインのダウンロード

以下のリンクよりPublishButtonChangerプラグインアーカイブをダウンロードします。

2011.02.18 v0.10 Movable Type 5.1対応

PublishButtonChanger_0_10.zip

４．プラグインのインストール

プラグインアーカイブを展開し、pluginsフォルダ内にある PublishButtonChangerフォルダを、Movable Type のアプリケーションディレクトリの plugins ディレクトリにアップロードします。

システム管理画面のプラグイン一覧で、「PublishButtonChanger～」が表示されればインストール完了です。

これで冒頭の機能が動作することを確認してください。

５．プラグインの設定

ウェブサイトまたはブログ管理画面（システム管理画面ではありません）のプラグイン一覧にある「PublishButtonChanger～」をクリックし、さらに「設定」をクリックすれば、ダイアログのメッセージを変更できます。

Movable Typeにアップロードしたアイテム画像を編集できる「Pixenateプラグイン」を紹介します。

2011.08.10 MT5.1にも対応しました。

１．機能

Pixenateを利用して、アップロードした後でアイテム画像を編集することができます。Pixenateはオンラインで画像を編集できるサービスです。詳しくは「オンラインで画像を編集できる「Pixenate」」をご覧ください。

このプラグインを適用すると、アイテム一覧やアイテム編集画面に「Edit Image」というリンクを追加します。MT5.1ではアイテム一覧のサムネイルに編集画面へのリンクを設定します。

このリンクをクリックすれば、画像の編集画面がポップアップで表示されます。各アイコンの操作方法は「オンラインで画像を編集できる「Pixenate」」が参考になると思います。

このように回転させたりできます。

配布元のプラグインはMT4までしか対応していないので、次項でMT5用のカスタマイズも交えたインストール方法を紹介します。

２．ダウンロードとインストール

「Pixenate Photo Editor for Movable Type」のページの一番上にある「files/mtplugin1_0.zip.」をクリック。

アーカイブを展開し、中にあるPixenateフォルダをpluginsディレクトリにアップロード。また、中にあるcmsフォルダをalt-tmplディレクトリにアップロード。

次に、リサイズした編集結果をアイテムに反映させるために、「Pixenateプラグインで画像をリサイズできない不具合の対処」を行ってください。

さらにMTのバージョンによって以下のカスタマイズを行ってください。

MT5.0xの場合

MT5.0用テンプレートファイルをダウンロードします。mt-plugin-pixenate-tmplのページからアーカイブをダウンロードし、アーカイブを展開した中にある、

• alt-tmpl/cms/edit_asset.tmpl
• alt-tmpl/cms/include/asset_table.tmpl
• plugins/Pixenate/tmpl/Editor.tmpl

を、元のプラグインの同じディレクトリにあるファイルと差し替えてください。

MT5.1xの場合

MT5.0用テンプレートファイルをダウンロードします。

Pixenate_for_MT51.zip

アーカイブを展開した中にある、

• alt-tmpl/cms/edit_asset.tmpl
• plugins/Pixenate/tmpl/Editor.tmpl

を、元のプラグインの同じディレクトリにあるファイルと差し替えてください。また、元のプラグインの、

• alt-tmpl/cms/include/asset_table.tmpl

は削除してください（配置したままでも問題ありません）。

さらに、元のプラグインのPixenateフォルダ配下にあるPixenate.plを任意のエディタで開き、以下の青色部分を追加してください。

…前略…
sub init_registry {
    my $plugin = shift;
    $plugin->registry({
          applications => {
                cms => {
                     methods => {
                          pixenate_edit_photo => \&edit_photo_mode,
                          pixenate_save_changes => \&save_changes_mode,
                     },
                },
          },
        callbacks => {
            'cms_filtered_list_param.asset' => \&add_edit_link,
        },
    });
}
sub add_edit_link {
    my $cb = shift;
    my ( $app, $res, $objs ) = @_;
    my $obj;
    my $class;
    my $id;
    my $url;
    my $counter = 0;
    my $script_url =  $app->base . $app->app_uri;
    for my $data (@{$res->{objects}}) {
        $obj = $objs->[$counter];
        $class = $obj->class;
        if ($class eq 'image') {
            $id  = $obj->id;
            $url = $obj->url;
            for my $d (@$data) {
                if ($d =~ /<span class="title">/) {
                    $d =~ s!<img (.*)/>!<a class="action-link mt-open-dialog" href="${script_url}?__mode=pixenate_edit_photo&amp;image=${url}&amp;id=${id}" title="edit image" onclick="return false;"><img $1/></a>!;
                }
            }
        }
        $counter++;
    }
}
sub get_filepath {
    my ($imageId) = @_;
    my $image = MT::Asset::Image->load($imageId);
    my $filepath = $image->file_path;
    return $filepath;
}
…後略…

MT5.1版については、上記の変更をすべてを盛り込んだものも以下において置きますのでご利用ください。

Pixenate_for_MT51_all.zip

いずれのバージョンについても、システム管理画面の「ツール」→「プラグイン」で「Pixenate Photo Editor～」が表示されていればインストール完了です。

Movable Type 5.1ベータがリリースされました。ということで、ダウンロード方法とMovable Type 5.1で新たに追加された機能について、本エントリーで詳しく解説します。

Movable Type 5.1 Beta 1 を公開

１．ダウンロード

Movable Type 5.1ベータ版は以下のリンクからダウンロードできます。

Index of /downloads/betas

Githubからダウンロードすれば、コア機能の最新コミット版が入手できると思います（アドオンは含まれません）。ダウンロードするには、右側真ん中辺りにある「ダウンロード」をクリック。

「Download.tar.gz」または「Download.zip」をクリックします。

以下、新機能の紹介です。

２．カテゴリ・フォルダの並び替え

「ブログ記事」→「カテゴリ」または「ウェブページ」→「フォルダ」のページでは、ドラッグ＆ドロップでカテゴリ・フォルダの並べ替えが行えるようになりました。

並べ替えるには、カテゴリ名の左側をポイントしてカーソルが十字マークになったところでつかみます。カテゴリをサブカテゴリなどにするには、右にずらして▼マークが出たところでドロップします。どの動作もサクサク行えます。

並び替えた内容を保存する場合は「保存」をクリックしてください。

カテゴリ名の右側をポイントすると色々出てきます。「編集」をクリックすればカテゴリ名を変更できます。＋アイコンはサブカテゴリを追加する場合にクリックします。カテゴリ名のリンクをクリックすればカテゴリの編集画面に移動します。

一覧上部にあるフォームからもカテゴリの追加が行えます。こちらもサクサクと追加できます。

テンプレートタグで並び替えを反映させるには、MTTopLevelCategoriesタグなどに「sort_by="user_custom"」を与えます。

<mt:TopLevelCategories sort_by="user_custom">
  <mt:SubCatIsFirst>
<ul>
  </mt:SubCatIsFirst>
  <mt:if tag="CategoryCount">
  <li><a href="<$mt:CategoryArchiveLink$>"<mt:if tag="CategoryDescription"> title="<$mt:CategoryDescription remove_html="1" encode_html="1"$>"</mt:if>><$mt:CategoryLabel$> (<$mt:CategoryCount$>)</a>
  <mt:else>
  <li><$mt:CategoryLabel$>
  </mt:if>
  <$mt:SubCatsRecurse$>
  </li>
  <mt:SubCatIsLast>
</ul>
  </mt:SubCatIsLast>
</mt:TopLevelCategories>

３．一覧画面

一覧画面はAjaxを利用した非同期通信で表示スピードが上がりました。またフィルタ機能も充実しています。

一覧画面に移動すると、このように「ロード中」と表示され、

その後非同期で表示されます。

一覧の表示オプションは、Movable Type 5.0xでは下の通りでしたが、

Movable Type 5.1ではこのように充実しています。チェックすればこれもAjaxを利用して非同期で反映されます。

表示項目を追加した例です。

一覧にIDも表示されるので、例えばブログの一覧でID番号を確認することもできるようになりました。

デフォルトは公開日で並んでいますが、

テーブルのヘッダ部分をクリックすればクリックした項目でソートすることができます。下の例はタイトルで並べ替えたものです。

また、Movable Type 5.0xでは下のようなクイックフィルタが用意されていましたが、

Movable Type 5.1では「すべてのブログ記事」をクリックすれば、

デフォルトで用意されたフィルタ条件がポップアップで表示されます。クイックフィルタエリアがなくなった分だけ表示エリアが拡張され、見やすくなりました。

さらに一覧右上の▼マークをクリックすれば、

このようなフォームが表示されます。これはクイックフィルタを手作りするためのものです。

使い方は、まずフィルタする条件を選択します。

選択後、「追加」をクリックします。

詳細条件を設定するフォームが表示されるので入力します。

同じ項目のフィルタ条件を追加したい場合は＋マークをクリックします。

このように複合条件を指定できます。これで「適用」をクリックすれば設定したフィルタ条件で一覧が表示されます。

異なる条件を組み合わせたい場合は、セレクトボックスから別のフィルタ条件を選択します。設定済みの条件はセレクトボックスからは選択できないようになっています（先に設定済みの「タイトル」がグレーになっているのが分かると思います）。

異なる条件は、このようにボックスが分かれて表示されます。

「適用」をクリックした場合はその場限りですが、フィルタ条件を保存したい場合は、「保存」をクリックします。

任意の名称で保存します。

保存されました。

フィルタ条件にも追加されています。フィルタ名の変更や削除も行えます。

保存後のフォームボタンには「Save As」が追加されます。これは別のフィルタとして保存したい場合に使います。「保存」をクリックすれば作成済みのフィルタに上書き保存します。

作成したフィルタは、システム管理画面の「Listing Filters」で確認することができます。フィルタ名をクリックすれば該当ブログ（またはウェブサイト）の該当条件で一覧画面を一発で開くことができます。フィルタをよく使う人はここをメインの画面にしてもいいくらいです。

この一覧画面にもフィルタ条件があります（笑）。なお、新しい一覧画面は次の通りです。

• ウェブサイトの管理
• ブログの管理
• ブログ記事の管理
• ウェブページの管理
• アイテムの管理
• タグの管理
• コメントの管理
• トラックバックの管理
• ユーザーの管理
• コメント投稿者の管理
• メンバーの管理
• フィルターの管理
• カスタムフィールドの管理
• 権限の管理
• ロールの管理
• 禁止IPアドレスの設定
• アドレス帳
• ログ
• グループの管理（Movable Type Advancedのみ）
• グループメンバーの管理（Movable Type Advancedのみ）

カスタムフィールドの一覧で、オプションを使ってカスタムフィールドのタグを表示することができます。

メンバー（ユーザー）一覧ではプロフィール画像を表示できます。

４．ブログ記事投稿画面・ウェブページ作成画面

公開ボタンのUIが変更されました。更新状態をプルダウンで選択でき、選択状態によってフォームボタンの表示が切り替わります。

下書きの場合

公開の場合（公開前）

公開の場合（公開後）

日時指定の場合

プレビュー時に保存ができるようになりました。これはMovable Type 4で実装されていたものです。

タグ・概要・キーワード・カスタムフィールドをドラッグ＆ドロップで並べ替えられるようになりました。

５．テンプレート編集画面

ソースコードのシンタックスハイライトのON/OFFが可能になりました。

ONの状態

OFFの状態

インクルードしているテンプレートの種類が分かるようになりました。アイコンの青がブログ、緑がウェブサイト、グレーがグローバルテンプレートで、自ブログ以外のものはカッコでサイト名または「Global Template」が表示されます。

６．テーマ一覧画面

現在のテーマの右上に「テンプレート初期化」と「Reapply」が追加されました。

「Find Themes」をクリックすれば「Movable Type Plugins and Themes Directory」のテーマ一覧にジャンプします。

７．テンプレートタグ

MTEntriesタグ等を使って複数のブログを表示する際、include_blogsモディファイアとexclude_blogsモディファイアを同時に指定できるようになりました。これにより、例えばすべてのブログを「include_blogs="children"」で呼び出して特定のブログを「exclude_blogs="x"」として除外することができるようになります。

<mt:Entries include_blogs="children" exclude_blogs="3,5,6">

また、親ウェブサイトのテンプレートモジュールをインクルードするための「parent」モディファイアが追加されました。

<$mt:Include module="テンプレートモジュール名" parent="1"$>

あとは２項で紹介した「sort_by」モディファイアの値として「user_custom」が追加されています。

８．サポートブラウザの変更

サポート対象ブラウザが変更されています。以下のブラウザとバージョンが新しいサポート対象です。

• Internet Explorer 8
• Safari 最新版
• Firefox 最新版

９．その他

システム管理画面のグローバルナビゲーションがいろいろ増えています。

新たに追加された「Listing Filters」以外に次のものが追加されています。

• ブログ
• ブログ記事
• ウェブページ
• アイテム
• コメント
• コメント投稿者

また、ウェブサイト管理画面・ブログ管理画面のグローバルナビゲーションにある「ユーザー」という表記が、「メンバー」に変更されています。

プラグイン一覧画面には「プラグインを探す」のリンクが追加されました。クリックすれば「Movable Type Plugins and Themes Directory」のプラグイン一覧にジャンプします。

2011.02.17 追記
タイトルが入力されていない記事は、記事一覧で「タイトルなし（ID番号）」という表示になります。

オンラインで画像を編集できるPixenateを紹介します。

１．Pixenateとは

Pixenateはオンラインで画像を編集できるサービスです。外出先で自分のPCがなく、ちょっとした画像編集が必要なときに使えそうです。

Pixenate

facebookとの連携も可能なようです。

以下、使い方の紹介です。なお自分の画像をアップロードしなくても、トップページに表示されているサンプル画像を使って編集を試すことができます。

２．使い方

まずローカルPCにある画像をアップロードします。アップロードするには左上の「Choose your image to edit.」をクリック。

画像をアップロードするフォームが開くので、任意の画像を選択し、「Upload this image.」をクリック。

アップロードされました。

アップロード後、左側に編集メニューが表示されます。

これは操作のアンドゥとリドゥです。

これは矩形選択と選択解除です。

矩形選択時は画像の縁に選択されたマークが表示されます。

この部分をドラッグすれば選択範囲を変更できます。

これは切り取りツールです。

クリックすれば次の画面に切り替わります。「free select」は前述の矩形選択で選択した範囲以外を除外して切り取ってくれます。プレビューもできるので安心です。

切り取りサイズは次のようなものが用意されています。「Golden Ratio」は黄金比で切り取れます。

これはリサイズツールです。

クリックすれば次の画面に切り替わります。サイズを入力して「Apply」をクリックするか、画像に表示されている矩形でリサイズする大きさを決めて「Resize to selected area.」をクリックします。

これは反転ツールです。左が左右反転、右が上下反転です。

これは回転ツールです。左が左回り、右が右回りにです。

これはカラーバランス修正とスムージングツールです。

これはフラッシュツールです。

このように少し明るくなります。

変更前

変更後

これは画像を傾けるツールです。

クリックすると画面が半分黒くなり、まず黒くない方の任意の位置をクリックします。

クリックすると反転するので、同じように任意の位置をクリックします。

丸い印が2ヶ所あり、水平となるポイントを指しています。

そしてこのようになります。

これは赤目補正ツールです。

クリックするとこのような表示に切り替わります。補正したい部分を選択して「Apply」をクリックします。

ホワイトニングツールです。使用方法は赤目補正と同じです。

カラーツールです。

クリックすると、画面が切り替わり、微調整できるスライダーが表示されます。

これはお絵かきツールです。

クリックすればカラーパレットが表示されます。画像の上でマウスをドラッグすれば描画できます。

編集した画像は、保存はもちろん、flickrとの連携やギフト（有料）としても使えるようです。

下はTシャツギフトを選択したものです。

拙著「Movable Type 5 プロフェッショナルガイド」が、このたび電子書籍化されました。取り扱いは以下のシナノブックドットコムです。

Movable Type 5 プロフェッショナルガイド

電子書籍版はPC、iPhone、iPadで閲覧が可能です。値段は、紙版が4,179円のところ、電子書籍版は1000円以上安い3000円となっています。ご購入の際はアカウント登録が必要となります。

紙の本が高くて買い控えをされていた方、この機会に是非いかがでしょうか。紙版をすでに購入くださっている方も、自炊せずに電子書籍化が可能です。

また、以下の記事で「基本からしっかりわかる Movable Type 5」「Flex&Flash Builder 4 によるWebアプリケーション開発ガイドブック」と拙著が取り上げられています。

毎日コミュニケーションズ、Movable Type 5の解説書など3点を電子書籍化

紙の本も引き続きよろしくお願い致します m(__)m

Movable TypeでreCaptchaを利用する方法です。ここではMovable Type 4.x向けの内容で書いていますが、Movable Type 5でもほぼ同じです。

１．基本

Movable TypeでデフォルトのCAPTCHA機能を利用するためにはImageMagickなどの画像ライブラリが必要ですが、サーバ環境によって画像ライブラリが利用できない場合、本エントリーで紹介するreCaptchaで代替することができます。

Movable Type既定のCAPTCHA

reCaptchaによるCAPTCHA

reCaptchaとはCAPTCHA画像を生成し、入力した内容が正しいかどうかを判定してくれるサービスです。サービス的にはかなり枯れたもので、2009年にGoogleに買収されました。

reCaptcha

以下、利用方法です。

２．reCaptchaの登録

reCaptchaのトップページで「GET reCAPTCHA」をクリック。

サインアップしていない場合は「Sign up Now!」をクリック（Googleアカウントでログインしていればひとつ先の画面に移動します）。

Googleアカウントの画面が表示された場合はログインまたはサインアップしてください。

reCaptchaを利用するドメイン（末尾のスラッシュは不要）を入力し、必要に応じて「Enable this key on all domains (global key)」をチェックして、「Create Key」をクリック。

「Public Key:」と「Private Key:」が表示されます。この画面の情報は次の作業で使うのでこのままにしておいてください。

３．プラグインのインストール

Movable TypeにreCaptchaプラグインをインストールします。MT4.1まではインストールアーカイブのextrasディレクトリに含まれていましたが、現在はGithubからダウンロードできます。

mt-plugin-recaptchaのページにアクセスして、右側にあるダウンロードをクリック。

「Download.zip」または「Download.tar.gz」をクリックしてプラグインアーカイブをダウンロードします。

プラグインアーカイブを展開し、中にあるreCaptchaフォルダをpluginsディレクトリにアップロードします。「システムメニュー」→「プラグイン」で「reCaptcha～」が表示されればインストール完了です。

４．プラグインの設定

reCaptchaを設定したいブログのブログ管理画面（システム管理画面ではありません）の「ツール」→「プラグイン」をクリックし、プラグイン一覧に表示されている「reCaptcha～」をクリックし、さらに「設定」タブをクリックすると、「Public Key」と「Private Key」の設定画面が開くので、２項で取得したそれぞれのキーを設定し、「変更を保存」をクリック。

５．コメントの設定

同じブログ管理画面の「設定」→「コメント」で「CAPTCHAプロバイダ」から「reCaptcha」を選択し、「変更を保存」をクリック。

同じブログ管理画面の「設定」→「登録/認証」で「認証なしコメント」をチェックし、「変更を保存」をクリック。

６．テンプレートの設定

テンプレートセットで「既定のブログ」を選択している例で示します。

同じブログ管理画面の「デザイン」→「テンプレート」をクリックし、テンプレート一覧に表示されている「コメント」テンプレートモジュールをクリックし、以下の青色部分を追加し、赤色部分を削除します。修正後、「変更を保存」をクリック。

…前略…
    <textarea id="comment-text" name="text" rows="15" cols="50" onfocus="mtCommentFormOnFocus()"></textarea>
</div>
<mt:if tag="captchaFields">
<div id="comments-open-captcha">
<mt:captchaFields />
</div>
</mt:if>
<div id="comments-open-captcha"></div>
<div id="comments-open-footer">
…後略…

これで全体を再構築すれば、次のように表示されます。

７．reCaptchaの利用方法

文字は2種類表示されるので、表示された順番に、半角スペースを挟んで入力します。また、reCAPTCHAの文字が判別しにくい場合、入力フィールド右側にあるリロードボタン（下）をクリックすれば次候補が表示されます。

リロードボタンの下のスピーカーボタンをクリックすれば、音声で聞き取ることもできます（英語です）。

PCにFirefox 4 ベータ版をインストールしてみました。

インストール直後のFirefox 4は次のような感じです。なおFirefox 3とFirefox 4を共存させるには「Firefox3 と Firefox3.5 の共存」の記事が参考になると思います。

以下、簡単に新機能の紹介です。

タブをアドレスバーの上に表示できるようになりました。

メニューバーが左上部の「Firefox」ボタンに移動し、クリックすれば次の内容が表示されます。

インストール直後はメニューバーが非表示になっていますが、「Firefox」→「オプション」→「メニューバー」をチェックすれば3.xと同じ表示になります。

履歴は「戻る」ボタン、または「進む」ボタンの長押し方式に変わっています。

ブックマークのツールバーがボタンに変更されています。「Firefox」→「オプション」→「ブックマークツールバー」をチェックすれば3.xと同じ表示になります。

再読み込みボタンはIEっぽい位置に変更されています。このボタンは停止も兼ねています。

Web開発者向けの「Webコンソール」が搭載されました。

Syncという機能が追加されました。使っているすべてのパソコンに Firefox Sync アドオンをインストールし、アカウント設定を行っておけば、いつでも同じブックマークや履歴にアクセスできるようです。また、無料の iPhone アプリケーション Firefox Home を使えば、iPhone や iPad からも Firefox Sync で同期した履歴、ブックマーク、開いているタブを参照できます。

Syncを有効にするには、メニューの「Syncをセットアップ」を選択すれば以下の画面が表示されるので指示にしたがって進めてください。

Syncの詳細設定は「Firefox」→「オプション」→「オプション」→「Sync」タブで行えます。

ベータ版のフィードバックはこちらから行えます。

Movable Typeの管理画面の一覧表示で任意の表示件数を指定できる「LimitPerPageChangerプラグイン」を公開します。

１．機能

Movable Typenの管理画面の一覧表示では「表示オプション」を使って1ページあたりの表示件数を変更できますが、変更できる件数は25/50/100/200の4種類しかありません（下）。

このプラグインを適用すれば表示数の選択フォームをプルダウンからテキストボックスに変更し、「10」「35」「80」など、好きな件数を設定できるようになります。もちろん入力した件数も保存できます。

プラグイン適用後

デフォルト値は25件です。入力件数は管理画面別に設定可能です。

２．価格

• 個人無償版／有償版での非商用利用／Movable Type Open Source：無償
• 有償版での商用利用：1000円/1サーバ（事前に動作確認してください）

無償でご利用の場合も、プラグインのご利用についてご支援・ご賛同くださる方からの寄付をお待ち申し上げます。

３．プラグインのダウンロード

GithubのLimitPerPageChangerプラグインのページにある「ダウンロード」をクリックして、プラグインアーカイブをダウンロードします。

４．プラグインのインストール

プラグインアーカイブを展開し、中にある LimitPerPageChangerフォルダごと、Movable Type のアプリケーションディレクトリの plugins ディレクトリにアップロードします。

システム管理画面のプラグイン一覧で、「LimitPerPageChanger～」が表示されればインストール完了です。

Movable Typeのコミュニティ機能で、サインアップ画面に表示するカスタムフィールドの順序を並べ替えるカスタマイズです。

下は、「地域」「年齢」「趣味」という3つのカスタムフィールドを追加した後のサインアップ画面で、デフォルトはこのような順番で並んでいます。

変更前

これを次のように「年齢」「地域」「趣味」の順番に並べ替えます。

変更後

１．基本

サインアップ画面にカスタムフィールドの情報を追加するには、システム管理画面で「ユーザー」カスタムフィールドを追加するだけです。

追加したカスタムフィールドは自動的にサインアップ画面に追加表示されます。ただし、デフォルトのサインアップ画面ではカスタムフィールドの表示順序を並べ替えることはできません。

２．カスタマイズ

サインアップ画面に対応する、グローバルテンプレートの「登録フォーム」システムテンプレートを次のように変更します。

変更前

…前略…
<mt:Loop name="field_loop">
    <mt:If name="__first__">
    <input type="hidden" name="_type" value="author" id="obj_type" />
    <input type="hidden" name="customfield_beacon" value="1" id="customfield_beacon" />
    </mt:If>
    <!-- start-customfield_<$mt:Var name="basename"$> -->
    <mt:App:Setting
    id="$field_id"
    label="$name"
    hint="$description"
    shown="$show_field"
    show_hint="$show_hint"
    required="$required">
 
    <$mt:Var name="field_html"$>
 
    </mt:App:Setting>
    <!-- end-customfield_<$mt:Var name="basename"$> -->
</mt:Loop>
…後略…

変更後（青色部分を赤色に入れ替え）

…前略…
<mt:Loop name="field_loop">
  <mt:if name="basename" eq="cf_3">
    <mt:SetVar name="index" value="0" />
  <mt:elseif name="basename" eq="cf_1">
    <mt:SetVar name="index" value="1" />
  <mt:elseif name="basename" eq="cf_2">
    <mt:SetVar name="index" value="2" />
  </mt:if>
  <mt:SetVarBlock name="list" index="$index">
    <mt:App:Setting
      id="$field_id"
      label="$name"
      hint="$description"
      shown="$show_field"
      show_hint="$show_hint"
      required="$required">
      <$mt:Var name="field_html"$>
    </mt:App:Setting>
  </mt:SetVarBlock>
</mt:Loop>
 
<mt:Loop name="list">
    <mt:If name="__first__">
    <input type="hidden" name="_type" value="author" id="obj_type" />
    <input type="hidden" name="customfield_beacon" value="1" id="customfield_beacon" />
    </mt:If>
    <mt:var name="__value__" />
</mt:Loop>
…後略…

変更後のテンプレートの2行目～7行目にあるMTIf文の部分は利用している環境によって変更が必要で、この部分でカスタムフィールドの順番を決めています。MTIfタグあるいはMTElseifタグのeqモディファイアにカスタムフィールドのベースネーム、次の行にあるMTSetVarタグのindexモディファイアに表示したい順番を設定します。一番最初に表示したいカスタムフィールドのindexモディファイアには「0」を設定します。

  <mt:if name="basename" eq="cf_3">
    <mt:SetVar name="index" value="0" />
  <mt:elseif name="basename" eq="cf_1">
    <mt:SetVar name="index" value="1" />
  <mt:elseif name="basename" eq="cf_2">
    <mt:SetVar name="index" value="2" />
  </mt:if>

この例では、ベースネーム「cf_3」のカスタムフィールドが1番、ベースネーム「cf_1」のカスタムフィールドが2番、ベースネーム「cf_2」のカスタムフィールドが3番に表示されます。

フィールドが3つ以上ある場合は、MTElseifタグとMTSetVarタグのペアを必要な分だけ足してください。なお、表示したいカスタムフィールドはすべて記述する必要があります。

３．ブログ記事作成画面のカスタムフィールドの並び替え

コミュニティブログやコミュニティ掲示板でのブログ記事作成画面のカスタムフィールドの並び替えにも応用できますが、よりよい方法は「Movable Type 5 プロフェッショナルガイド」の16章に掲載しています。宣伝でした。

MTQで「Movable Typeのブログ記事ページのファイル名に日別の通番を振りたい
」という要望がありましたので情報展開しておきます。完璧なカスタマイズではありませんので予めご容赦ください。

１．カスタマイズの概要

ある1日に複数投稿されたブログ記事のファイル名に、「hoge-1.html」「hoge-2.html」という風に通番を振るにはいくつか方法があると思います。ここではアーカイブマッピングのパスにテンプレートを利用しています。

パスに設定したテンプレートの中で再構築中の記事と同じ日に投稿された記事を取得し、記事が複数ある場合のみ、再構築中の記事のファイル名に通番を振ります。

「再構築中の記事と同じ日に投稿された記事を取得」にはObjectプラグインを使って再構築のパフォーマンスが劣化しないようにしています。また、ある日の記事数が1つから2つに増えた時点で1つめの通番が付与されていないファイルを消す処理を別のプラグインで行います。

通番を完全に制御するには、日別の途中に記事が増えた場合の通番の割り振り変更、日別の記事を削除した場合のファイル削除処理など、面倒なことが山積みですが、ここでは、最低限の動作として、

• 1日のブログ記事数が1の場合はファイル名に通番を付与しない
• 1日のブログ記事数が1から2に増えた場合はその日の記事のすべてのファイル名に通番を付与し、通番が付与されていないファイルを削除

のみを行います。

このカスタマイズでブログ記事を削除した場合、例えば「hoge-1.html」「hoge-2.html」「hoge-3.html」という3つのファイルがある状態で「hoge-2.html」のブログ記事を削除した場合、ブログ記事アーカイブを再構築すれば、「hoge-3.html」が「hoge-2.html」となり、元の「hoge-3.html」は制御の範疇外でゴミとして残った状態になります。ただし、MTEntryPermalinkなどのテンプレートタグで「hoge-3.html」へのリンクは生成されないので、ウェブサイトからこのファイルは見えなくなります。

２．Objectプラグインのインストール

以下のリンクをたどってObjectプラグインをインストールしてください。

Objectプラグイン

３．EntryFileRemoverプラグインのインストール

以下のリンクからEntryFileRemoverプラグインをダウンロードしてインストールしてください。

EntryFileRemover.zip

４．テンプレートの作成

下のサブテンプレートを「ブログ記事のファイル名」というテンプレートモジュールで保存します。

<mt:EntryDate format="%Y%m%d" setvar="date" />
<mt:EntryID setvar="entry_id" />
<mt:SetVarBlock name="start"><mt:GetVar name="date" />000000</mt:SetVarBlock>
<mt:SetVarBlock name="end"><mt:GetVar name="date" />235959</mt:SetVarBlock>
<mt:Objects name="entry" status="2" sort="authored_on" start="$start" end="$end" incl="1">
  <mt:if tag="EntryID" eq="$entry_id">
    <mt:SetVar name="number" value="$__counter__" />
  </mt:if>
  <mt:SetVar name="counter" value="$__counter__" />
</mt:Objects>
<mt:if name="counter" gt="1">
  <mt:FileTemplate format="%y/%Y%m%d" />-<mt:GetVar name="number" /><mt:FileTemplate format="%x" />
<mt:else>
  <mt:FileTemplate format="%y/%Y%m%d" /><mt:FileTemplate format="%x" />
</mt:if>

５．アーカイブマッピングのパスの変更

ブログ記事アーカイブのアーカイブマッピングのパスに次の内容を設定します。

<$mt:include module="ブログ記事ファイル名" trim="1"$>

設定後の画像

MTIncludeタグにtrimモディファイアを設定することで、テンプレートで生成されたファイル名から改行や空白を除去します。

先日エントリーした「IE6/IE7/IE8/IE9の共存まとめ」で書いたとおり、IE8/IE9の開発者モードには「ブラウザーモード」と「ドキュメントモード」が用意されています。これを利用すれば、IEの旧バージョンの表示や挙動などを確認できるようです。

ブラウザーモードの選択

ドキュメントモードの選択

が、公式サイトの「ブラウザーモード」と「ドキュメントモード」の説明（７項に掲載）を読んでも、それぞれの使い方が良く分かりません。

ということで、本エントリーで「ブラウザーモード」と「ドキュメントモード」を変更することで、なにがどうなるかを調査してまとめました。参考になれば幸いです。

１．サンプル

説明は後回しにして、「ブラウザーモード」と「ドキュメントモード」を変更すると何がどのように変わるか、簡単なサンプルを作ってみました。

サンプルページ

このページをIE8またはIE9で表示して「ブラウザーモード」と「ドキュメントモード」を切り替えれば、表示が色々変わるので試してみてください。

２．ユーザーエージェントを変更したい場合

ブラウザのユーザーエージェントを変更したい場合は、ブラウザモードを切り替えます。互換モードでもユーザーエージェントが変わります。サンプルでは次のJavaScriptでユーザーエージェントを表示しています。

<script type="text/javascript">
/* <![CDATA[ */
document.write(navigator.userAgent);
/* ]]> */
</script>

３．条件付きコメントの動作を確認したい場合

IEの条件付きコメントの動作を確認したい場合は、ブラウザモードを切り替えます。サンプルでは次のような条件付きコメントを設定しています。

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-style.css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-style.css" />
<![endif]-->
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="ie9-style.css" />
<![endif]-->

４．CSSハックを確認したい場合

IE用のCSSハックの動作を確認したい場合は、ドキュメントモードを切り替えます。サンプルではバージョン別に表示が切り替わるように次のようなCSSハックを定義しています。

body {
    color: #0f0\9;
    *color: #f00;
    _color: pink;
}
body:not(:target) {
    color: #00f\9;
}

IE6/IE7/IE8/IE9のCSSハックについては以下の記事をご覧ください。

IE6/IE7/IE8/IE9のCSSハック

５．IEのCSSバグやバグフィックスによる表示を確認したい場合

IEのCSSバグによる表示を確認したい場合は、ドキュメントモードを切り替えます。サンプルではボックスモデルを使って表示が切り替わるようにしています。

６．IEのCSSサポート状況を確認したい場合

IEのバージョンの違いによるCSSサポート状況を確認したい場合も、ドキュメントモードを切り替えます。サンプルでは、IE8で追加された:beforeおよび:afterとcontentプロパティ、およびIE9で追加されたborder-radiusプロパティを使って表示が切り替わるようにしています。

７．公式ドキュメント

最後に、マイクロソフトの「Internet Explorer 8 開発者ツール マニュアル（Word形式）」からの抜粋です。

異なる動作モードでの Web ページのテスト

開発者ツールは異なる動作モードで Web ページのテストを行うことができるため、ユーザーが互換性の問題に直面する前に、それを速やかに解決することができます。最初に開発者ツールを開いた時は、Web ページのモード設定を検出し、そのページの既定のモードで処理を行います。その状態からブラウザー モード メニューとドキュメント モード メニューを使用して Web ページのテストを行うことができます。

ブラウザー モードのテスト

ブラウザー モードのメニューでは、ブラウザーが次の三つのプロパティをどのように返すかを選択できます。

プロパティ	説明
ユーザー エージェント文字列	Internet Explorer が自信を識別させるために Web サーバーに送信する値です。
バージョンベクター	この値は条件付きコメントで使用され、CSS の適用、マークアップやスクリプトのブロックにも使用できます。条件付きコメントとバージョン ベクターの詳細については、About Conditional Comments を参照してください。
ドキュメントモード	この値は Internet Explorer が CSS、DOM、および JavaScript の操作に最新の動作方法を使用するか、互換性のために以前のバージョンの Internet Explorer をエミュレートするかを決定するために、用いられます。

開発者ツールのメニュー バーには、ブラウザー モードとして、上記の表で解説したプロパティをそれぞれ異なった状態に変更する、三つの選択肢が提供されます。次の表はこの選択肢について説明しています。

ブラウザー モード	説明
Internet Explorer 7	このモードでは、Internet Explorer 8 はユーザー エージェント、バージョン ベクター、およびドキュメントモードを Internet Explorer 7 として返します。Internet Explorer 7 のユーザーがあなたのサイトでどのようなエクスペリエンスを得るのかをテストする場合に、このモードを使用します。
Internet Explorer 8	このモードでは、Internet Explorer 8 はユーザー エージェント、バージョン ベクター、およびドキュメントモードを、最も標準に準拠している既定のブラウザーの動作と一致するよう返します。Internet Explorer 8 のユーザーがあなたのサイトでどのようなエクスペリエンスを得るのかをテストする場合、このモードを使用します
Internet Explorer 8 互換表示	このモードでは、Internet Explorer 8 はバージョン ベクターとドキュメントモードを Internet Explorer 7 として返しますが、ユーザー エージェント文字列には Internet Explorer 7 の文字列とともに、実際には Internet Explorer 8 であることを示すトークンが含まれます。Internet Explorer 8 のユーザーが互換表示オプションを選択するとあなたのサイトでどのようなエクスペリエンスを得るのかをテストする場合、このモードを使用します。

ドキュメント モードのテスト

Defining Document Compatibility で取り上げた通り、ブラウザーがどのように Web ページを解釈し表示するのかを制御するドキュメント互換性の概念が、Internet Explorer 8 に導入されています。開発者ツールでは、Web ページの表示のための互換モードを動的に選択することが可能です。それぞれの互換モード間の視覚上の差異を簡単に見ることができ、最も適切な互換モードを見つけることができます。

特定の Web ページのドキュメント互換性を変更するには、開発者ツール メニューのドキュメント モードをクリックします。このモードは、Internet Explorerがどのように Web ページを描画するかを決定しますが、バージョン ベクターやユーザー エージェント文字列には影響を与えません。ブラウザー モードとこのオプションを使用すると、どのドキュメント モードがあなたの Web サイトに最適かを速やかに決定できます。ドキュメント モードには三つの選択肢があります。

ドキュメント モード	説明
Quirks モード	ドキュメント タイプの指定がないか Quirks なドキュメント タイプとして描画している時の Internet Explorer と同一の動作です。これは Internet Explorer 5 および Quirks モードの Internet Explorer 6 の動作に類似しており、Quirks モードの Internet Explorer 7 の動作と同等です。
Internet Explorer 7 標準	Strict もしくは不明なタイプのドキュメントを描画している時の Internet Explorer 7 と同一の動作です。
Internet Explorer 8 標準	Internet Explorer 8 で利用可能できる最新の標準に準拠した動作です。Strict もしくは不明なドキュメント タイプを持つドキュメントを Internet Explorer 8 が描画する際の既定のモードです。

ブログ「小悪魔女子大生のサーバエンジニア日記」の書籍版が出ました。本書はみらのさん経由、技術評論社様より献本頂きました。ありがとうございました。

この本は、株式会社ディレクターズでアルバイトをされているaicoさんが、それまで知らなかった「サーバ」や「サーバエンジニア」のことを、ブログ「小悪魔女子大生のサーバエンジニア日記」でご自身の可愛いイラストつきで綴ったものを書籍としてまとめたものです。

インターネットやメール、サーバ関係の情報は、仕事として扱っている人にとってはそれほど難しくないのかもしれませんが、パソコンでウェブやメールだけを利用している人にとってはいわゆる「仕組み」の話ばかりなので、結構とっつきにくいかもしれません。

が、この本ではイラストつき（というかイラストがメインで文章はほとんどないという印象）で分かりやすく解説されています。私は仕事柄、書かれていることの多くは概ね知っているのですが、改めて読んでみると色々と勉強になりました。

ということで、「サーバ周辺の仕組みがよく分からないので勉強したい」といった方にお勧めです。もし分からなくても、イラストを眺めているだけで楽しい本です。

以下、目次です。

Chapter1 インターネットのこと

1-1 そもそもインターネットって何だろう？

1-2 TCP/IPって何だろう？

1-3 IPアドレスとは何だろう？

1-4 IPアドレスを管理しているところはどこだ？

1-5 MACアドレスとは何だろう？

1-6 IPアドレスのメリット

1-7 MACアドレスとIP アドレスの関係

1-8 IPアドレスのグルーピング

1-9 ARPのしくみ

1-10 ルーティングとは何だろう？

Chapter2 DNSって何？

2-1 DNS今昔ものがたり

2-2 ドメイン名とホスト名って何だろう？

2-3 サブドメインとルートドメインって何だろう？

2-4 DNSのお仕事（その1）

2-5 DNSのお仕事（その2）

2-6 ルートサーバって何だろう？（その1）

2-7 ルートサーバって何だろう？（その2）

2-8 digコマンドとレコード

2-9 whoisコマンドとは？

2-10 逆引きって何だろう？

Chapter3 メールのこと

3-1 メールはどうやって送られているのだろう？

3-2 それぞれのメールサーバ

3-3 POPとIMAPの違い

3-4 SMTP-AUTHものがたり

3-5 メール課587ポート物語

3-6 メールヘッダーとエンベロープの役割

3-7 telnetでSMTPとお話してみよう！

Chapter4 World Wide Webのこと

4-1 WebサーバとWebブラウザ

4-2 WWW（World Wide Web）の歴史

4-3 WWWのしくみ

4-4 ステータスコードとは？

4-5 バーチャルホストとは？

4-6 SSLって何だろう？

4-7 OpenSSLでSSLの様子をみてみよう！

Chapter5 サーバ管理のこと

5-1 サーバエンジニアとは？

5-2 サーバエンジニアのお仕事（その1）

5-3 サーバエンジニアのお仕事（その2）

5-4 sshって何だろう？（その1）

5-5 sshって何だろう（その2）

5-6 暗号化はそんなに必要なのかな？

5-7 ログからアタックのすごさを見てみよー！

5-8 IP制限をしてみよう！

5-9 共通鍵方式と公開鍵方式

5-10 ホスト認証のしくみ

5-11 公開鍵暗号方式によるユーザー認証のしくみ

イラストはブログのものをそのまま使われていると思ったのですが、よく見てみると書籍用にすべて書き直されているようです。おつかれさまでした！

個人的にはaicoさんと誕生日が同じということでなんとなく親近感がわきました。2冊目を楽しみにしています。

Movable Type 5の「ユーザー」ロールにコメントの公開権限を与える「ApproveCommentPermissionプラグイン」をバージョンアップしました。

１．変更点

既存の「ユーザー」ロールにはコメント編集画面から更新状態を変更できませんが、今回のバージョンアップで変更可能となる権限を付与しました。

プラグイン適用前

プラグイン適用後

ユーザーに更新状態を変更する権限を付与するには、「ユーザー（コメント公開つき）」といった新しいロールを作成してください。

２．プラグインのダウンロード

最新版のプラグインは下記のページよりダウンロードしてください。

ApproveCommentPermissionプラグイン

WordPressでカスタムフィールドの出力方法についていろいろ調べてみました。

大丈夫と思いますが、以下に示すサンプルは次のようなループタグの中で使ってください。

<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
ここにサンプルコードを挿入
<?php endwhile; endif; ?>

１．値を出力する（キーと値が1：1の場合）

キーと値が1：1の場合、値を出力するにはpost_custom()を使います。

<?php echo post_custom($key); ?>

冒頭の画像の「サイズ」の値「3000」を出力するには次のように記述します。

<?php echo post_custom('サイズ'); ?>

２．値を出力する1（キーと値が1：nの場合）

WordPressではひとつのキーに複数の値を記述することができます。

キーと値の対応が1：nの場合、値を出力するにはpost_custom()を使います。

<?php
$values = post_custom($key);
foreach ($values as $value) {
    echo $value;
} ?>

画像の「価格」の値「10000」「3000」をまとめて出力するには、次のように記述します。

<?php
$values = post_custom('価格');
foreach ($values as $value) {
    echo $value;
} ?>

３．値を出力する2（キーと値が1：nの場合）

キーと値の対応が1：nの場合、get_post_custom()を使う方法もあります。

<?php
$list = get_post_custom();
$values = $list[$key];
foreach ($values as $value) {
    echo $value;
}
?>

２項の「価格」の値を出力するには次のように記述します。

<?php
$list = get_post_custom();
$values = $list['価格'];
foreach ($values as $value) {
    echo $value;
}
?>

ちなみにpost_custom()はget_post_custom()をラップしているので、post_custom()を使った方が良いでしょう。

４．キーと値を出力する1

キーと値をまとめて出力するには、get_post_custom_keys()とget_post_custom_values()を組み合わせます。

<?php
$keys = get_post_custom_keys();
foreach ( (array) $keys as $key ) {
    $keyt = trim($key);
    if ( '_' == $keyt{0} )
        continue;
    $values = get_post_custom_values($key);
    $value = implode($values,', ');
    echo $key . " " . $value;
}
?>

get_post_custom_keys()は、カスタムフィールドのキーのリストを取得する関数です。パラメータに記事IDを指定すれば特定の記事のカスタムフィールドのキーのリストを取得できます。

get_post_custom_keys($post->ID);

trim関数でキーの先頭文字がアンダースコア「_」のものはスキップするようにしています。これはカスタムフィールドのキーの先頭に「_」が付与されたものは非表示のメタ情報として使用されているためです。カスタムフィールドのキーの先頭にアンダースコアをつけて入力すると管理画面には何も表示されませんが、データは保存されています。

    $keyt = trim($key);
    if ( '_' == $keyt{0} )
        continue;

get_post_custom_keys()は、カスタムフィールドの値のリストを取得する関数です。パラメータに記事IDを指定すれば、特定の記事のカスタムフィールドの値のリストを取得できます。

get_post_custom_values($key, $post->ID);

また、キーに対応する値が複数あるものはimplode関数（Perlでいうjoin）を使ってカンマで区切って出力するようにしています。

    $value = implode($values,', ');

この部分はforeach文による出力をするなど、適宜書き換えてください。

５．キーと値を出力する2

キーと値を出力する簡単な方法は、the_meta()を使用します。

<?php the_meta(); ?>

この関数を利用すれば、次のような順不同リストを出力します。

<ul class='post-meta'>
<li><span class='post-meta-key'>サイズ: </span> M</li>
<li><span class='post-meta-key'>価格:</span> 3000</li>
</ul>

６．特定の記事と特定のキーからカスタムフィールドの値を取得

特定の記事と特定のキーからカスタムフィールドの値を取得する場合、get_post_meta()を使用します。

<?php echo  get_post_meta($post_id, $key, $single); ?>

記事テンプレートの中であれば次のように記述します。なお$keyに日本語を設定しても正常に取得できないようです。第3パラメータ$singleをtrueにすれば、キーと値の対応が1：nの場合、一番最初のデータを取得します。

<?php echo get_post_meta($post->ID, 'aaa', true); ?>

falseを設定すればリストを取得します。リストの場合は次のようにすれば出力できます。

<?php echo implode(get_post_meta($post->ID, 'aaa', false),', '); ?>

７．参考サイト

参考サイトは以下です。ありがとうございました。

• カスタムフィールドの使い方
• 関数リファレンス/get post meta
• 関数リファレンス/get post custom
• 関数リファレンス/get post custom keys
• 関数リファレンス/get post custom values
• カスタムフィールドに表示されないメタ情報の作り方
• カスタムフィールドの指定したキーの値だけ表示する方法

Movable Type 5の「ユーザー」ロールにコメントの公開権限を与えるプラグインを公開します。

１．機能

既存の「ユーザー」ロールにはコメントの公開を取り消す権限はありますが、保留中のコメント公開する権限がありません。

このプラグインを利用すれば、コメントを公開する権限を与えることができます。

プラグイン適用前

プラグイン適用後

なお、現在一覧画面からの公開のみ有効です。編集画面からの状態変更は別途機能追加したいと思います。コメント編集画面からの状態変更も可能です。

プラグイン適用前

プラグイン適用後

２．価格

• 個人無償版／有償版での非商用利用／Movable Type Open Source：無償
• 有償版での商用利用：1000円/1サーバ（事前に動作確認してください）

無償でご利用の場合も、プラグインのご利用についてご支援・ご賛同くださる方からの寄付をお待ち申し上げます。

３．プラグインのダウンロード

以下のリンクからプラグインをダウンロードしてください。

2011.02.02 初版
2011.02.04 コメント編集画面からの更新状態変更を許容

ApproveCommentPermission_0_02.zip

４．プラグインのインストール

ダウンロードしたプラグインアーカイブを展開し、中にあるApproveCommentPermissionフォルダをpluginsフォルダにアップロードします。

システム管理画面のプラグイン一覧で、「ApproveCommentPermission～」が表示されればインストール完了です。

５．新しいロールの作成

プラグインをインストールすると「記事の公開（コメント公開つき）」という権限が新たに追加されます。この権限を利用して新しいロール「ユーザー（コメント公開つき）」などを作成してください。付与する権限は以下の4つです。

• 記事の公開（コメント公開つき）
• 通知の送信
• ファイルアップロード
• コメントの投稿

Movable Typeのデータベースに対し、任意のフィールドを指定してデータを取得できるObjectプラグインをバージョンアップしました。

１．変更点

MTObjectsタグで次のモディファイアを指定可能にしました。

• start：収集対象オブジェクトの開始日付（YYYYMMDDHHMMSS）
• end：収集対象オブジェクトの終了日付（YYYYMMDDHHMMSS）
• incl：「1」を設定すれば検索条件にstartとendで指定した時刻を含みます「0」または指定なしの場合、startとendで指定した時刻を含みません
• sort：ソート条件。startとendを指定している場合は「authored_on」「created_on」「modified_on」のみ指定可能
• status：記事の公開状態（1：下書き／2：公開／4：日時指定）

また、MTObjectsタブブロック内でMTElseタグを使えるようにしました。

２．使用例

ブログ記事を出力するMTEntriesタグでは日付による範囲指定を行えませんが、MTObjectsタグを利用すれば日付による範囲指定が可能になります。

例えば、ブログ記事ページで1年前のブログ記事タイトルを出力する場合は次のように設定します。

<mt:EntryDate format="%Y" setvar="year" />
<mt:EntryDate format="%m%d" setvar="month_day" />
<mt:SetVar name="year" op="--" />
<mt:SetVarBlock name="start"><mt:GetVar name="year" /><mt:GetVar name="month_day" />000000</mt:SetVarBlock>
<mt:SetVarBlock name="end"><mt:GetVar name="year" /><mt:GetVar name="month_day" />235959</mt:SetVarBlock>
<mt:Objects name="entry" status="2" sort="authored_on" start="$start" end="$end" incl="1">
  <mt:if name="__first__">
1年前の今日の記事は
  </mt:if>
  <a href="<mt:EntryPermalink>"><mt:EntryTitle /></a>
  <mt:if name="__last__">
です。
  <mt:else>,
  </mt:if>
  <mt:else>
1年前の記事はありません。
</mt:Objects>

追加した各モディファイアは、ブログ記事コンテキストでのみ動作確認しています。

３．プラグインのダウンロード

最新版のプラグインは下記のページよりダウンロードしてください。

Object プラグイン