TopMovable Typeコミュニティ > 2011年11月
2011年11月18日

Movable Typeのコミュニティ機能で投票できない不具合を解消する

Movable Typeのコミュニティ機能(コミュニティブログ/コミュニティ掲示板)には、投票機能(スターアイコン★をクリックして投票)がデフォルトで用意されています。

具体的には、次のようにトピック単位に投票用のスターアイコンが表示され、スターアイコンまたは「X票」の部分にマウスをポイントするとクリックで投票できるようになっています。

投票

クリックすると1票が追加され、自分が投票したことが分かるように、スターアイコンにチェックマークがつきます。もう一度クリックすれば投票を取り消します。

投票後

ところが、次のようにマウスをポイントしても投票できないケースがあります。

投票できないケース

本エントリーでは投票できない原因と、問題がある場合の解消方法について紹介します。

1.原因1:コミュニティのユーザーとしてサインインしていない

コミュニティのユーザーとしてサインインしていない場合、投票することができません。ページ右上にある「サインイン」をクリックしてサインインすれば、投票できるようになります。

サインイン

2.原因2:匿名の投票を有効にしていない

コミュニティのユーザーとしてサインインしていなくても、誰でも投票できるようにすることができます。

投票できるようにするには、ブログ管理画面の「設定」→「コミュニティ」をクリックして、「匿名での投票を許可する」をチェックします。

匿名での投票を許可する

3.原因3:クロスドメイン問題

投票機能はAjaxを利用しており、ページ読み込み時にAjaxでコミュニティ用のCGI(mt-cp.cgi)にアクセスして投票情報を取得・表示します。このCGIにアクセスするURLのドメインと、コミュニティサイト自体のドメインが異なっているとクロスドメイン問題により、1項や2項の対処を行っても投票することができません(厳密にはサインインもできないはずです)。

例えば、それぞれのドメインの設定が次のようになっていると、この問題が発生します。

  • コミュニティサイトのドメイン:blog.user-domain
  • mt-cp.cgi実行時のドメイン:user-domain

投票できない問題がクロスドメインであるかどうかは、JavaScriptエラーの有無で切り分けることができます。例えばIE9でF12を押下して開発者モードの画面の「スクリプト」タブで確認すると、次のような「アクセスが拒否されました。」というエラーが表示されているはずです。

エラー

エラーが発生しているmt.jsの558~559行目のコードは次のとおりです。

598: var url = 'http://user-domain/mt/mt-cp.cgi';
599: xh.open('POST', url, true);

変数xhはAjax通信を行うためのXMLHttpRequestオブジェクトで、open()メソッド、つまり指定したURLへのリクエスト送信に失敗していることが分かります。598行目に表示されているドメインとコミュニティサイトのドメインが異なっていることからも判別可能です。

解消するには、コミュニティサイトのドメインとmt-cp.cgiのドメイン(=MTをインストールしているドメイン)を一致させます。言い換えると、コミュニティサイトのドメイン配下にMTをインストールする必要があります。アクセスするドメインが一致すれば良いので、MTをドメインに対応するパス直下にインストールする必要はありません。「mt」など適当なディレクトリを作って、そこにインストールすれば良いでしょう。

例えば次のような配置でMTをインストールします。

  • MTのインストールパス:/home/user/www/mt
  • コミュニティサイトのパス:/home/user/www
  • コミュニティサイトのURL:http://blog.user-domain/
Comments [0] | Trackbacks [0]
2011年11月 4日

Movable Typeのコミュニティ機能でCKEditorを利用する

November 4,2011 12:03 AM
Tag:[, , ]
Permalink

Movable Typeのコミュニティ機能でCKEditorプラグインを利用するカスタマイズを紹介します。

「CKEditor」はオープンソースの高機能WYSIWYGエディタです。これをMovable Typeで使えるようにしたものが「CKEditorプラグイン」です。

下のスクリーンショットはコミュニティ掲示板のトピック投稿画面のカスタマイズ前後のイメージです。カスタマイズ後はCKEditorによるWYSIWYGエディタが表示されます。フォントのデザインはもちろん、画像の表示も可能です。

カスタマイズ前
カスタマイズ前

カスタマイズ後
カスタマイズ後

以下、カスタマイズ方法です。

1.プラグインファイルの修正

プラグインのデフォルト状態では、投稿画面のテンプレートを再構築する際に必要な情報が取得できないため、プラグインファイルの一部を修正します。

CKEditorプラグインのCKEditor/lib/CKEditor/App.pmを任意のエディタで開き、167行目あたりにある以下のコードに青色の内容を追加します。

unless ($blog && $type && $lang) {
    if ($app->param('__mode') ne 'rebuild') {
        return '';
    }
}

この修正はプラグインの既存のセキュリティを保障するものではありませんので、自己責任でお願い致します。

2.テンプレートの修正

コミュニティ掲示板・コミュニティブログのいずれも、「ブログ記事の作成」インデックステンプレートの後方に、青色部分を追加します。

…前略…
<$mt:CKEditorJavaScript$>
<script type="text/javascript">
CKEDITOR.replace("entry-body");
</script>
<$mt:Include module="フッター"$>

3.設定の変更

管理画面の「設定」→「コミュニケーション」をクリックして、「HTMLタグを制限」より「カスタム設定」を選択して、CKEditorで入力を許容する要素名をカンマ区切りで入力します。img要素のようにsrc属性が必須なものについては属性名をスペース区切りで設定します。

HTMLタグを制限

ここに設定されていない要素や属性は投稿時にすべて除去されるので注意してください。

なお、この設定は通常のコメント投稿フォームにも適用されるので注意してください。

4.コメント投稿フォームにCKEditorを適用させる

コメント投稿フォームにCKEditorを適用させる方法は、概ねこのエントリーで紹介した内容と同じです。細は「Movable Type 5.1 プロの現場の仕事術」に掲載していますのでよければご覧ください。

Movable Type 5.1 プロの現場の仕事術
蒲生 トシヒロ 藤本 壱 西畑 一馬 柳 泰久 伊藤 のりゆき 金子 順 高橋 真弓 天野 卓 奥脇 知宏 荒木 勇次郎
毎日コミュニケーションズ
Comments [3] | Trackbacks [0]
Now loading...
Recent Entries
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3