Movable Type4.2の携帯対応/コメント関連のカスタム

イベントのおしらせは次回更新で。…ごめん、手が回りませんでした(ノ皿;)
イベントといっても、「隅っこに倫子を置かせていただく」だけなので
あんまり期待しないでね。ほんと、いろいろ、ごめんなさい。

きょーは、コメント欄つけるにあたっての技術的なメモです。
ひさびさの更新がこんな内容であれですが…取り急ぎ。
「次の更新までにコメント欄つける」って宣言しちゃったので
終わるまでは何も書くわけにいかず…というわけで更新がおくれて申し訳ないです。

Movable Typeは
・デフォルトでは携帯に対応していない
・コメントスパム対策として用意されている「画像認証」が使いにくい
・そもそもコメントフォームが微妙に使いにくい
ので、しらべてみました。

(MT4iを使えばいいじゃん、って…?
 いや、できるだけスタティックHTMLで軽快に表示したかったんです;)

携帯対応:文字コード変換
MT-I18Nプラグイン
解説はこちら(MT3版のものです)
MTはだいたいの場合文字コードがUTF-8ですが
携帯用の一連のページではShift-JISにする必要があります。
それを変換するプラグインです

「全角チルダ」が「?」に化けるおなじみの現象があるため
(個人的には「チルダの伝説」と呼んでおりますw)
自分の環境では、下記の行を追加させていただきました。
対症療法的であたまわるいですが;
22行目〜
【変更前】
my $from = $args->{‘from’} || ”;
my $to = $args->{‘to’} || ”;
【変更後】
my $from = $args->{‘from’} || ”;
my $to = $args->{‘to’} || ”;
if($to == “Shift_JIS”){
$text =~ s/xEFxBDx9E/xE3x80x9C/g; # 全角チルダ
$text =~ s/xEFxBCx8D/xE2x88x92/g; # 全角ハイフン
$text =~ s/xE2x80x94/xE2x80x95/g; # 全角ダッシュ
$text =~ s/—/―/g; # 同、実体参照
}

携帯対応:画像縮小
ResizeImageプラグイン
本文中の画像タグを検出して、自動でリサイズします。
ただ、altの文字列に「+」など正規表現に使う文字が含まれていると検出できないので
下記の1行を書き替えると良いようです
285行目
【変更前】
$in =~ s/$img_tag/$new_img_tag/;
【変更後】
$in =~ s/Q$img_tag/$new_img_tag/;
自分のところではその他いろいろいじっていますが、
動作が不安定なので晒すのは避けておきます;
なんせPerlリファレンスを初めて見た、ってくらいの超素人なので…

携帯対応:半角カナ
zenkanaプラグイン
全角カナを半角カナに変換します。必要に応じて。

携帯対応:コメント書き込み
MT4i
本来、携帯で閲覧から管理までできるキット一式なのですが
閲覧部分はちょっと重たいので、
コメントフォームとコメント一覧だけ直接リンクを貼って使わせていただいています。
絵文字は未対応なのですが…これ、対応がたいへんなんだろうなあ。
3キャリアで仕様がまるで違うしPCにはないし

コメントスパム対策
MTの画像認証「CAPTCHA」は
・機械に読み取りにくいかわりに、人間にも読み取りにくい
・入力画面と確認画面で、違う文字列で2回認証させられる(バグかと思った;)
ので、使わない方向でためしてみました。
mt-keystrokesプラグイン
日本語の解説はこちら:cosmos blog
「入力時にキーボードが押されたかどうか」を判定して、
機械的なスパム送信をはじく仕組みのようです。(onkeypressか、なるほろ)
※MT3用のプラグインなので、ちょっとした修正が必要になります。
 修正方法は上記のブログをご参照ください

コメント:名前だけ必須にする
「名前は必須、メールアドレスは不要」にしたいときは
MTのスクリプト自体を数行書き替える必要があります。
WingMemo:コメント記入時に「名前のみ必須」にする(2) 4.0~4.2版
ただ…確認画面を使うときは
「匿名」って文字列が自動的に入っちゃうので、あんまり意味ないかも…
うちでは下記の入力チェックを併用してます

コメント:導線の整理と入力チェック
入力画面に「確認」「送信」ボタンが二つ並んでいて
かえってわかりづらくなっているので、
入力画面からは「送信」ボタンを省きました。
これはテンプレート「コメント入力フォーム」を数行変えればできますが、
削除してしまうとJavascriptエラーが出るので、スタイルシートでdisplay:none;としました

ただ、それだと
入力→確認画面→ここで初めて入力チェック→終了
という妙な流れになってしまい、
うっかり名前を書き忘れたときも
「確認画面では何も言われなかったのに送信押したら“怒られた”」
というちょっとイラッとくる事態に。
なので、入力フォーム自体に入力チェック機能を挟みました

jQuery plugin: Validation
日本語の解説はこちら:すぎゃーんメモ
こまかい設定の解説:くらげだらけ
確認ボタン押したら、抜けてるところが強調表示になります。
Ajaxとゆーやつです。クラブニンテンドーのアンケートとかで使われてるあれですね。

ただし、MTの「確認」ボタン自体に最初から入っているJavascriptと衝突するので
グローバルテンプレートの「GlobalJavaScript」
803-804行目をコメントアウトしておいてください
// if (f.preview_button) f.preview_button.disabled = true;
// if (f.post) f.post.disabled = true;
もともと、「確認」ボタンの連打を防ぐために
一回押したら押せなくなる(disabled属性がつく)仕様になっているのですが
入力チェックに引っかかっても同じことが起こるので、
この挙動をやめておかないと、二度と押せなくなるわけです。
たしかに必要な機能ではあるので、実現したいときは
Validationのほうで改めて同様の挙動をつけてやるといいです
submitHandler: function(form) {
$(“#comment-preview”).attr(“disabled”,”disabled”);
$(“#comment-submit”).attr(“disabled”,”disabled”);
form.preview.value=’1′;
form.submit();
}

【2/16追記】
上記のスクリプトでは
「常にプレビューモード」になってしまい永遠に投稿できないです…
わかる方、手直ししてお使いください。わからない方は使わないでね;;

携帯対策としてMT公式サイトで紹介されている「ケータイキット」は10万円…! まじか!
ビジネス向けなのだろうけど、
MTのライセンス料さえ払えなくてオープンソース版使ってる零細制作会社、多いと思うぞ
そりゃ〜、多少広告があろうが
規約に「書いた文章を勝手に本にされても文句は言えない」条文が含まれていようが
無料ブログ使いたくもなりますわな;

“Movable Type4.2の携帯対応/コメント関連のカスタム” への6件の返信

  1. てすてす^^ コメント欄おつでした。。
    私も、隅っこの倫子ちゃんの隣に、こっそり置かせてもらおうかなぁ~。。
    ブログは気を抜いてやっていこ~~♪って自分のブログは
    全然更新してないけどね(笑)

  2. おおっ、コメント欄つきましたね!お疲れさまです〜。
    これからも新造さんのペースで
    色々ほっこりアップしていってくださいね。
    楽しく拝見しております〜〜。

  3. うわあ さっそくありがとうございますっ
    (動作確認ご協力ありがとうございました、ってうわははは)
    おお〜 とらさんも展示参加となっ
    これはほんとにお祭りですねっ 超楽しみ(←人ごとか!)
    …はい、肩の力抜いていきますです〜
    思い詰めるとろくなことはない、というのは、ものすごくわかりましたので…

  4. こぺさんもさっそくありがとうございますっ
    …改めて思ったのですが、ほんとに重いですね、このコメント欄…;
    万難排して(汗)書き込んでいただいて、ありがとうございます。
    ほっこり…今のおれに一番欠けている概念だ;
    はい、ぼちぼちのんびり、いかせていただきます。

  5. 今日は!
    ようやくコメントつけることが出来ました!

    自分的にはコメントあまりつけることが無いのですが、面白い話には付けたいです!
    これからもよろしくお願いします!

  6. うわ〜っ、いままで読み逃げオンリーな状態ですみませんでしたっ
    でも、自分自身、あまり人様のところにコメントつけないし…;
    (瑠璃にゃんさんにも失礼しっぱなしで申し訳ないです、全部楽しく読んでます)
    コメントつけなくても気後れなさらないよう、
    あえてちっちゃくコメント欄へのリンクつけてみました。
    読み逃げ上等でよろしくお願いします!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA