コメントフォームにAjaxを導入しました!

久々に、テンプレートの改造を行いました。本当はできればテンプレートを一新したい時期なのですが、そうそうそんな時間は取れないので今回は一部変更という形です。今回変更を加えたのはコメントフォームです。
今までのコメントフォームは、コメント投稿ボタンを押してから投稿完了画面を表示して、記事に戻っていました。前々からこの画面遷移がうっとおしいと思い、どうにかできないかと考えていたのですが、どうせならAjax使えばいいじゃんってことで実際に実装してみました。
まあ、PHP側の処理を自分でできるサイトならAjaxでの非同期通信も簡単にできるのですが、今回はコメントの受け取り手がFC2のシステムなので融通が利かないというデメリットもあるが、できないことはないので無理やり実装した感じです。
コメントを投稿すると、画面遷移せずにコメント表示部分の最下部に新しいコメントがアニメーションでフェードインしてきます。一応、コメントの連続投稿の禁止などもされているので、複数回の投稿はできないようになっています。その辺りは実際にコメントを投稿してもらえばわかると思います。

あと、暇な人はぜひテスト投稿に協力してほしいです。
ブラウザ名:Opera
ブラウザのバージョン:10.63
投稿できないブラウザは無いと思うのですが、もしできないブラウザがあると困るので、その調査の意味を兼ねてブラウザ名とバージョンを書いてテスト投稿してもらえるとうれしいです。※Ajaxはjavascriptを使っているので、javascriptオフでは通常投稿になります。
たぶんFC2でコメントのAjaxでの投稿を実装しているサイトは無いと思うので、その点はかなり珍しいかと思います。やり方については、簡単に言うとXMLHttpRequestでフォームの内容をPostしているわけですが、まあその辺については説明するのが面倒なので省きます。
今回の私が実装した方法だと、いくら説明してもテンプレートごとに変えないといけない部分が出てくるので、そこまで手取り足取り説明するのは大変ですしね。とりあえずjQueryを使うと簡単とは言えませんが、ある程度のjavascriptの知識があれば実装は容易いのではないかと思われます。
まあFC2でこういうAjaxを実装しようとするのはある意味変態的ですけどね。それだったら外部でやれよと言われてもしょうがない。
コメントを投稿すると、画面遷移せずにコメント表示部分の最下部に新しいコメントがアニメーションでフェードインしてきます。一応、コメントの連続投稿の禁止などもされているので、複数回の投稿はできないようになっています。その辺りは実際にコメントを投稿してもらえばわかると思います。

あと、暇な人はぜひテスト投稿に協力してほしいです。
投稿例
ブラウザ名:Opera
ブラウザのバージョン:10.63
投稿できないブラウザは無いと思うのですが、もしできないブラウザがあると困るので、その調査の意味を兼ねてブラウザ名とバージョンを書いてテスト投稿してもらえるとうれしいです。※Ajaxはjavascriptを使っているので、javascriptオフでは通常投稿になります。
今回の個人的感想
たぶんFC2でコメントのAjaxでの投稿を実装しているサイトは無いと思うので、その点はかなり珍しいかと思います。やり方については、簡単に言うとXMLHttpRequestでフォームの内容をPostしているわけですが、まあその辺については説明するのが面倒なので省きます。
今回の私が実装した方法だと、いくら説明してもテンプレートごとに変えないといけない部分が出てくるので、そこまで手取り足取り説明するのは大変ですしね。とりあえずjQueryを使うと簡単とは言えませんが、ある程度のjavascriptの知識があれば実装は容易いのではないかと思われます。
まあFC2でこういうAjaxを実装しようとするのはある意味変態的ですけどね。それだったら外部でやれよと言われてもしょうがない。
ブラウザ名:Opera
ブラウザのバージョン:10.63
テス投
火狐3.6.12
ブラウザ名:Google Chrome
ブラウザのバージョン:8.0.552.215 beta
ブラウザ名:Google Chrome
ブラウザのバージョン:8.0
ブラウザ名:Firefox
ブラウザのバージョン:3.6.1.2
テスト
ブラウザ:chorme
バージョン:8.0
ブラウザ名:Opera
ブラウザのバージョン:10.63
このコメントは管理者の承認待ちです
ブラウザ名:Firefox
ブラウザのバージョン:3.6.12
テスト投稿です。
Sleipnir Ver2.9.6です。
テスト投稿です。
Sleipnir Ver2.9.6です。
テスト投稿です。
Sleipnir Ver2.9.6です。
ブラウザ名:IE
ブラウザのバージョン:9 Beta
このコメントは管理者の承認待ちです
XP、IE8
IE9のコメントが投稿された後、表示がずれています。
またIEか・・・。とりあえず修正してます。
このコメントは管理者の承認待ちです
IE9のずれの問題は一応修正しました。たぶん正常に表示されるのではないかと思います。
てすー
このコメントは管理者の承認待ちです
ブラウザ名:Opera
ブラウザのバージョン:10.63
-テス投-
Safari 5.0.3 です
テスト
Goole Chrome 8.0.552.215
ブラウザ名:Google Chrome
ブラウザのバージョン:8.0.552.215
このコメントは管理者の承認待ちです
てすと
ブラウザ名:Opera
ブラウザのバージョン:10.63
テスト投稿
ブラウザ名:Sleipnir
ブラウザのバージョン:2.9.6
テスト投稿
ブラウザ名:Google Chrome
ブラウザのバージョン:9.0.597.10
-テスト投稿-
ブラウザ名:Opera
ブラウザのバージョン:10.63
=test=
ブラウザ名:Google Chrome
ブラウザのバージョン:8.0.552.215
ごおgぇクローム8.0552.215
-テスト-
ブラウザ名:Firefox
ブラウザのバージョン:3.6.1.2
てす
このコメントは管理者の承認待ちです
ブラウザ名:Firefox
ブラウザのバージョン:3.6.12
このコメントは管理者の承認待ちです
このコメントは管理者の承認待ちです
このコメントは管理者の承認待ちです
このコメントは管理者の承認待ちです
テスト投稿
ブラウザ名:Sleipnir
ブラウザのバージョン:2.9.6
ブラウザ名:Google Chrome
ブラウザのバージョン:8.0.552.215
テスト
ブラウザ:chorme
バージョン:8.0.552.215 beta
このコメントは管理者の承認待ちです
テスト書き込み
ブラウザ Opera 10.63
このコメントは管理者の承認待ちです
テスト
てst
ブラウザ名:Opera
ブラウザのバージョン:10.63
このコメントは管理者の承認待ちです
このコメントは管理者の承認待ちです
このコメントは管理者の承認待ちです
てす
iPhone
ブラウザ名:Firefox
ブラウザのバージョン:3.6.12
このコメントは管理者の承認待ちです
このコメントは管理者の承認待ちです
※Ajaxを使っているのでjavascriptを使っているので、javascriptオフでは通常投稿になります。
↑投稿例の部分の文章が少しおかしいです。
ブラウザ名:Firefox
ブラウザのバージョン:3.6.12
このコメントは管理者の承認待ちです
このコメントは管理者の承認待ちです
このコメントは管理者の承認待ちです
このコメントは管理者の承認待ちです
テスト
IS03
ブラウザ:GALAPAGOS BROWSER
てすと
てすてす
てすt
これは画期的ですね
ブラウザ名:FireFox
ブラウザのバージョン:4.0b7
このコメントは管理者の承認待ちです
tes
ブラウザ名:Iron
ブラウザのバージョン:7.0.520.1
このコメントは管理者の承認待ちです
このコメントは管理者の承認待ちです
このコメントは管理者の承認待ちです
テスト投稿
from Opera 10.63
このコメントは管理者の承認待ちです
このコメントは管理者の承認待ちです
このコメントは管理者の承認待ちです
テスト
VPCのXp
Sleipnir 2.9.6
win7
Lunascape6<ver 6.3.4>
geckoエンジン
コメント投稿直後に表示されるコメントにて、『 < > 』と『 < > 』の中が表示されません。
テスト
ブラウザ名:Firefox
ブラウザのバージョン:3.6.13
」
テスト
ブラウザ名:IE
ブラウザのバージョン:9 Beta
このコメントは管理者の承認待ちです
ブラウザ名:IE
ブラウザのバージョン:8
てすと
--
-テスト投稿-
ブラウザ名:Safari for windows (Vista)
ブラウザのバージョン:5.0.3 (7533.19.4)
このコメントは管理者の承認待ちです
ブラウザ名:Opera
ブラウザのバージョン:10.63
ブラウザ:Fire fox
バージョン:3.6.13
このコメントは管理者の承認待ちです
テストなう
このコメントは管理者の承認待ちです
テスト
ブラウザ名:Opera
ブラウザのバージョン:10.63
テスト
ブラウザ名:Opera
ブラウザのバージョン:11 1085
このコメントは管理者の承認待ちです
テスト
Gecko/20101026 Firefox/3.6.12
このコメントは管理者の承認待ちです
このコメントは管理者の承認待ちです
**テスト**
いい
IE7
Ver:7.0.5730.13
・・・
このコメントは管理者の承認待ちです
ほいほい
これはなかなか。
このコメントは管理者の承認待ちです
このコメントは管理者の承認待ちです
テスト的にコメントっす
このコメントは管理者の承認待ちです
-テスト-
ブラウザ名:Firefox
ブラウザのバージョン:3.6.1.2
てst
このコメントは管理者の承認待ちです
ブラウザ・バージョンかぶってます
どんな感じになっているかコメントを
てst
てすとてすと
ぐぐるくろむ8.0.552.224
びょーん
てst
このコメントは管理者の承認待ちです
このコメントは管理者の承認待ちです
てす
お
このコメントは管理者の承認待ちです
このコメントは管理者の承認待ちです
テス
いいねb
テスト投稿です。
ブラウザはfirefox3.6.13
テスト投稿
ブラウザ:SRWare Iron
バージョン:7.0.520.1 (65000)
tst
このコメントは管理者の承認待ちです
このコメントは管理者の承認待ちです
テスト投稿
Google Chrome 10 dev
Windows 7 64bit
ブラウザシェアが大体わかるw
このコメントは管理者の承認待ちです
-テスト-
ブラウザ名:Firefox
ブラウザのバージョン:3.6.1.3
test
ブラウザ名:FireFox
ブラウザのバージョン:3.6.13
このコメントは管理者の承認待ちです
このコメントは管理者の承認待ちです
このコメントは管理者の承認待ちです
このコメントは管理者の承認待ちです
このコメントは管理者の承認待ちです
てすと
このコメントは管理者の承認待ちです
このコメントは管理者の承認待ちです
このコメントは管理者の承認待ちです
このコメントは管理者の承認待ちです
ブラウザ名:Firefox
ブラウザのバージョン:3.6.13
test
ssssssss
このコメントは管理者の承認待ちです
テストー
ブラウザ名:Firefox
ブラウザのバージョン:3.6.1.3
てst
このHPすげーーーーー(*´ω`*)!!
このコメントは管理者の承認待ちです
てst
Google Chrome
10.0.648.204
てすとさせてください
テスト
てすと
uhyo-
テストさせてください
このコメントは管理者の承認待ちです
てすと
このコメントは管理者の承認待ちです
syr
a
test
test
aaaaaaaaaaaaaa
gegregrgr
コメントテストー
nightly
てst
このコメントは管理人のみ閲覧できます
テスト
ああ
テスト
ああ
41545454ああ
testテストテスト
lp
テスト
てst
あああ
あああ
fgfgfgfgdfgdf
aaa111お
aap
もんげー