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

2010.12.072020.04.08

久々に、テンプレートの改造を行いました。本当はできればテンプレートを一新したい時期なのですが、そうそうそんな時間は取れないので今回は一部変更という形です。今回変更を加えたのはコメントフォームです。

今までのコメントフォームは、コメント投稿ボタンを押してから投稿完了画面を表示して、記事に戻っていました。前々からこの画面遷移がうっとおしいと思い、どうにかできないかと考えていたのですが、どうせならAjax使えばいいじゃんってことで実際に実装してみました。

まあ、PHP側の処理を自分でできるサイトならAjaxでの非同期通信も簡単にできるのですが、今回はコメントの受け取り手がFC2のシステムなので融通が利かないというデメリットもあるが、できないことはないので無理やり実装した感じです。

コメントを投稿すると、画面遷移せずにコメント表示部分の最下部に新しいコメントがアニメーションでフェードインしてきます。一応、コメントの連続投稿の禁止などもされているので、複数回の投稿はできないようになっています。その辺りは実際にコメントを投稿してもらえばわかると思います。

あと、暇な人はぜひテスト投稿に協力してほしいです。

投稿例

ブラウザ名:Opera
ブラウザのバージョン:10.63

投稿できないブラウザは無いと思うのですが、もしできないブラウザがあると困るので、その調査の意味を兼ねてブラウザ名とバージョンを書いてテスト投稿してもらえるとうれしいです。※Ajaxはjavascriptを使っているので、javascriptオフでは通常投稿になります。

今回の個人的感想

たぶんFC2でコメントのAjaxでの投稿を実装しているサイトは無いと思うので、その点はかなり珍しいかと思います。やり方については、簡単に言うとXMLHttpRequestでフォームの内容をPostしているわけですが、まあその辺については説明するのが面倒なので省きます。

今回の私が実装した方法だと、いくら説明してもテンプレートごとに変えないといけない部分が出てくるので、そこまで手取り足取り説明するのは大変ですしね。とりあえずjQueryを使うと簡単とは言えませんが、ある程度のjavascriptの知識があれば実装は容易いのではないかと思われます。

まあFC2でこういうAjaxを実装しようとするのはある意味変態的ですけどね。それだったら外部でやれよと言われてもしょうがない。

タブスタッキングなど多数の新機能を搭載した「Opera 11」正式版！◀ Prev entry Next entry▶タブをグループ化できるタブスタッキング機能搭載の「Opera 11」beta版が公開！

COMMENT TO THIS ENTRY

ブラウザ名:Opera
ブラウザのバージョン:10.63

from 管理人 -#K/3ytLW6 Postedon 2010/12/07 22:57

8682

テス投
火狐3.6.12

from 名無しさん -#- Postedon 2010/12/07 23:02

8683

ブラウザ名:Google Chrome
ブラウザのバージョン:8.0.552.215 beta

from sonoppe0513 -#- Postedon 2010/12/07 23:03

8684

ブラウザ名:Google Chrome
ブラウザのバージョン:8.0

from 暇人 -#- Postedon 2010/12/07 23:03

8685

ブラウザ名:Firefox
ブラウザのバージョン:3.6.1.2

from Interceptor -#- Postedon 2010/12/07 23:04

8686

テスト
ブラウザ：chorme
バージョン：8.0

from 名無しさん -#ElJgphU6 Postedon 2010/12/07 23:04

8687

ブラウザ名:Opera
ブラウザのバージョン:10.63

from 名無しさん -#- Postedon 2010/12/07 23:05

8688

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/07 23:07

8689

ブラウザ名:Firefox
ブラウザのバージョン:3.6.12

from 名無しさん -#- Postedon 2010/12/07 23:14

8690

テスト投稿です。
Sleipnir　Ver2.9.6です。

from kokorinchan -#mQop/nM. Postedon 2010/12/07 23:14

8691

テスト投稿です。
Sleipnir　Ver2.9.6です。

from kokorinchan -#mQop/nM. Postedon 2010/12/07 23:15

8692

テスト投稿です。
Sleipnir　Ver2.9.6です。

from kokorinchan -#mQop/nM. Postedon 2010/12/07 23:15

8693

ブラウザ名:IE
ブラウザのバージョン:9 Beta

from ersh -#- Postedon 2010/12/07 23:18

8694

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/07 23:18

8695

XP、IE8

from Test -#- Postedon 2010/12/07 23:25

8696

IE9のコメントが投稿された後、表示がずれています。

from ersh -#- Postedon 2010/12/07 23:41

8697

またIEか・・・。とりあえず修正してます。

from 管理人 -#K/3ytLW6 Postedon 2010/12/07 23:45

8698

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/07 23:45

8699

IE9のずれの問題は一応修正しました。たぶん正常に表示されるのではないかと思います。

from 管理人 -#K/3ytLW6 Postedon 2010/12/07 23:55

8700

てすー

from 名無しさん -#- Postedon 2010/12/08 00:05

8701

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/08 00:06

8702

ブラウザ名:Opera
ブラウザのバージョン:10.63

from 名無しさん -#- Postedon 2010/12/08 00:15

8703

-テス投-

Safari 5.0.3 です

from 名無しさん -#- Postedon 2010/12/08 00:18

8704

テスト
Goole Chrome 8.0.552.215

from 名無しさん -#- Postedon 2010/12/08 01:22

8705

ブラウザ名:Google Chrome
ブラウザのバージョン:8.0.552.215

from 名無しさん -#- Postedon 2010/12/08 01:40

8706

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/08 02:16

8707

てすと
ブラウザ名:Opera
ブラウザのバージョン:10.63

from 名無しさん -#- Postedon 2010/12/08 02:50

8708

テスト投稿
ブラウザ名:Sleipnir
ブラウザのバージョン:2.9.6

from 名無しさん -#- Postedon 2010/12/08 03:36

8709

テスト投稿
ブラウザ名:Google Chrome
ブラウザのバージョン:9.0.597.10

from 名無しさん -#- Postedon 2010/12/08 07:00

8711

-テスト投稿-

ブラウザ名:Opera
ブラウザのバージョン:10.63

from 名無しさん -#- Postedon 2010/12/08 07:22

8712

=test=

ブラウザ名:Google Chrome
ブラウザのバージョン:8.0.552.215

from 名無しさん -#- Postedon 2010/12/08 07:43

8713

ごおｇぇクローム8.0552.215

from 名無しさん -#- Postedon 2010/12/08 09:05

8714

-テスト-

ブラウザ名:Firefox
ブラウザのバージョン:3.6.1.2

from 名無しさん -#- Postedon 2010/12/08 09:17

8715

てす

from 名無しさん -#- Postedon 2010/12/08 09:28

8716

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/08 10:27

8717

ブラウザ名:Firefox
ブラウザのバージョン:3.6.12

from 名無しさん -#- Postedon 2010/12/08 12:22

8718

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/08 14:39

8719

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/08 15:19

8720

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/08 15:53

8721

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/08 16:13

8722

テスト投稿
ブラウザ名:Sleipnir
ブラウザのバージョン:2.9.6

from 名無しさん -#- Postedon 2010/12/08 16:37

8723

ブラウザ名:Google Chrome
ブラウザのバージョン:8.0.552.215

from 名無しさん -#- Postedon 2010/12/08 16:51

8724

テスト
ブラウザ：chorme
バージョン：8.0.552.215 beta

from 名無しさん -#- Postedon 2010/12/08 16:53

8725

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/08 17:03

8726

テスト書き込み
ブラウザ　Opera 10.63

from HN -#- Postedon 2010/12/08 17:05

8727

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/08 17:19

8728

テスト

from 名無しさん -#- Postedon 2010/12/08 17:37

8729

てｓｔ

ブラウザ名:Opera
ブラウザのバージョン:10.63

from e・３ -#- Postedon 2010/12/08 17:40

8730

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/08 18:07

8731

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/08 19:58

8732

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/08 20:06

8733

てす

iPhone

from 名無しさん -#- Postedon 2010/12/09 00:12

8734

ブラウザ名:Firefox
ブラウザのバージョン:3.6.12

from test -#EGTCt1XI Postedon 2010/12/09 00:14

8735

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/09 00:18

8736

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/09 00:24

8737

※Ajaxを使っているのでjavascriptを使っているので、javascriptオフでは通常投稿になります。
↑投稿例の部分の文章が少しおかしいです。

ブラウザ名:Firefox
ブラウザのバージョン:3.6.12

from 名無しさん -#- Postedon 2010/12/09 00:40

8738

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/09 04:26

8739

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/09 06:49

8740

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/09 08:00

8741

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/09 09:40

8742

テスト

IS03

ブラウザ:GALAPAGOS BROWSER

from 名無しさん -#- Postedon 2010/12/09 09:58

8743

てすと

from 名無しさん -#- Postedon 2010/12/09 11:55

8744

てすてす

from 名無しさん -#- Postedon 2010/12/09 12:25

8745

てすｔ

from 名無しさん -#- Postedon 2010/12/09 14:58

8746

これは画期的ですね

from 名無しさん -#- Postedon 2010/12/09 14:59

8747

ブラウザ名:FireFox
ブラウザのバージョン:4.0b7

from 名無しさん -#- Postedon 2010/12/09 17:57

8748

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/09 19:58

8749

tes

ブラウザ名:Iron
ブラウザのバージョン:7.0.520.1

from 名無しさん -#- Postedon 2010/12/09 21:04

8750

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/09 21:39

8751

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/09 22:18

8752

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/09 23:54

8754

テスト投稿
from Opera 10.63

from test -#mQop/nM. Postedon 2010/12/10 00:04

8755

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/10 02:34

8756

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/10 02:35

8757

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/10 06:17

8758

テスト
VPCのXp
Sleipnir 2.9.6

from 名無しさん -#- Postedon 2010/12/10 10:25

8759

win7
Lunascape6<ver 6.3.4>
geckoエンジン

from 名無しさん -#- Postedon 2010/12/10 13:06

8760

コメント投稿直後に表示されるコメントにて、『 < > 』と『 < > 』の中が表示されません。

from 名無しさん -#- Postedon 2010/12/10 13:14

8761

テスト

from やるお -#- Postedon 2010/12/10 19:06

8762

ブラウザ名:Firefox
ブラウザのバージョン:3.6.13

from 名無しさん -#- Postedon 2010/12/10 19:27

8763

」

from ROXAS -#- Postedon 2010/12/10 20:12

8765

テスト

from 名無しさん -#- Postedon 2010/12/10 20:30

8766

ブラウザ名:IE
ブラウザのバージョン:9 Beta

from 名無しさん -#- Postedon 2010/12/10 22:24

8767

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/10 23:25

8768

ブラウザ名:IE
ブラウザのバージョン:8

from 名無しさん -#- Postedon 2010/12/11 04:44

8769

てすと

from (⌒_ゝ⌒) -#- Postedon 2010/12/11 11:20

8770

--
-テスト投稿-

ブラウザ名:Safari for windows (Vista)
ブラウザのバージョン:5.0.3 (7533.19.4)

from 名無しさん -#- Postedon 2010/12/11 11:57

8771

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/11 12:21

8772

ブラウザ名:Opera
ブラウザのバージョン:10.63

from Test -#- Postedon 2010/12/11 12:21

8773

ブラウザ:Fire fox
バージョン:3.6.13

from 名無しさん -#- Postedon 2010/12/11 16:29

8774

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/11 19:05

8775

テストなう

from Crystal -#- Postedon 2010/12/11 19:09

8776

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/12 01:15

8777

テスト

ブラウザ名:Opera
ブラウザのバージョン:10.63

from 名無しさん -#- Postedon 2010/12/12 05:26

8778

テスト

ブラウザ名:Opera
ブラウザのバージョン:11　1085

from 名無しさん -#- Postedon 2010/12/12 07:56

8779

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/12 14:54

8781

テスト
Gecko/20101026 Firefox/3.6.12

from 名無しさん -#- Postedon 2010/12/12 15:07

8782

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/12 15:47

8783

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/12 21:30

8788

**テスト**

from 名無しさん -#- Postedon 2010/12/13 03:31

8791

いい

from 名無しさん -#- Postedon 2010/12/13 12:06

8793

IE7
Ver:7.0.5730.13

・・・

from 名無しさん -#- Postedon 2010/12/13 22:32

8794

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/14 14:38

8795

ほいほい

from 名無しさん -#- Postedon 2010/12/14 14:48

8796

これはなかなか。

from 名無しさん -#- Postedon 2010/12/14 21:38

8797

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/15 03:13

8800

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/15 18:30

8801

テスト的にコメントっす

from Wanux -#8Zcb/IVM Postedon 2010/12/15 19:21

8802

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/15 22:21

8803

-テスト-

ブラウザ名:Firefox
ブラウザのバージョン:3.6.1.2

from 名無しさん -#- Postedon 2010/12/15 22:39

8804

てｓｔ

from 名無しさん -#JyN/eAqk Postedon 2010/12/16 13:10

8805

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/16 15:58

8806

ブラウザ・バージョンかぶってます
どんな感じになっているかコメントを

from friend -#- Postedon 2010/12/16 20:04

8807

てｓｔ

from てｓｔ -#- Postedon 2010/12/17 09:20

8808

てすとてすと
ぐぐるくろむ8.0.552.224

from いなと -#- Postedon 2010/12/17 18:55

8809

びょーん

from いなと -#- Postedon 2010/12/17 18:57

8810

てｓｔ

from てｓｔ -#D27o8Pgw Postedon 2010/12/18 16:06

8812

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/18 21:08

8813

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/19 15:26

8817

てす

from 名無しさん -#- Postedon 2010/12/19 16:00

8819

お

from 名無しさん -#- Postedon 2010/12/20 21:07

8820

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/21 12:39

8821

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/21 21:21

8822

テス

from 名無しさん -#- Postedon 2010/12/21 21:21

8823

いいねｂ

from 名無しさん -#- Postedon 2010/12/21 21:22

8824

テスト投稿です。
ブラウザはfirefox3.6.13

from 名無しさん -#- Postedon 2010/12/22 21:56

8826

テスト投稿

ブラウザ：SRWare Iron
バージョン：7.0.520.1 (65000)

from 名無しさん -#- Postedon 2010/12/22 22:07

8827

ｔｓｔ

from 名無しさん -#- Postedon 2010/12/22 23:07

8828

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/22 23:31

8829

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/23 10:10

8830

テスト投稿
Google Chrome 10 dev
Windows 7 64bit

from 名無しさん -#4ARdecsc Postedon 2010/12/23 13:08

8833

ブラウザシェアが大体わかるｗ

from 名無しさん -#- Postedon 2010/12/23 17:54

8834

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/23 22:13

8835

-テスト-

ブラウザ名:Firefox
ブラウザのバージョン:3.6.1.3

from 名無しさん -#- Postedon 2010/12/23 23:26

8836

test

ブラウザ名:FireFox
ブラウザのバージョン:3.6.13

from K' -#KCb/ahWk Postedon 2010/12/24 00:49

8837

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/26 12:06

8843

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/26 15:46

8844

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/26 15:47

8845

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/26 23:36

8846

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/27 18:10

8849

てすと

from ああ -#- Postedon 2010/12/27 21:38

8850

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/27 21:51

8851

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/27 22:10

8852

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/28 15:10

8855

このコメントは管理者の承認待ちです

from -# Postedon 2010/12/30 18:09

8861

ブラウザ名:Firefox
ブラウザのバージョン:3.6.13

test

from 名無しさん -#- Postedon 2011/01/01 10:17

8873

ｓｓｓｓｓｓｓｓ

from ｓ -#- Postedon 2011/01/10 03:27

8900

このコメントは管理者の承認待ちです

from -# Postedon 2011/01/15 13:22

8912

テストー

from 名無しさん -#- Postedon 2011/01/15 16:43

8913

ブラウザ名:Firefox
ブラウザのバージョン:3.6.1.3

from 名無しさん -#- Postedon 2011/01/24 02:46

8940

てｓｔ

from 名無しさん -#- Postedon 2011/02/09 08:05

8982

このHPすげーーーーー(*´ω｀*)！！

from とおりすがり -#- Postedon 2011/02/14 22:20

9001

このコメントは管理者の承認待ちです

from -# Postedon 2011/02/26 19:44

9032

てｓｔ
Google Chrome
10.0.648.204

from 名無しさん -#- Postedon 2011/03/26 04:55

9108

てすとさせてください

from 名無しさん -#- Postedon 2011/04/04 22:37

9158

テスト

from 名無しさん -#JjuufYjI Postedon 2011/04/04 22:39

9159

てすと
uhyo-

from 名無しさん -#- Postedon 2011/04/05 15:09

9160

テストさせてください

from きのこのき -#SFo5/nok Postedon 2011/04/06 01:07

9161

このコメントは管理者の承認待ちです

from -# Postedon 2011/04/08 17:38

9166

てすと

from 名無しさん -#- Postedon 2011/04/30 13:23

9207

このコメントは管理者の承認待ちです

from -# Postedon 2011/05/02 17:03

9210

ｓｙｒ

from ｙｒ -#- Postedon 2011/05/21 21:03

9232

from a -#- Postedon 2011/06/30 11:55

9271

test

from a&b -#- Postedon 2012/02/22 16:27

9550

test

from test -#- Postedon 2012/02/22 16:29

9551

aaaaaaaaaaaaaa

from test1 -#- Postedon 2012/02/22 16:31

9552

gegregrgr

from test2 -#- Postedon 2012/02/22 16:33

9553

コメントテストー

from テスト -#- Postedon 2012/02/22 16:38

9554

nightly

from 名無しさん -#- Postedon 2012/03/01 18:16

9560

てｓｔ

from test -#- Postedon 2012/03/23 15:27

9616

このコメントは管理人のみ閲覧できます

from -# Postedon 2012/04/14 08:15

9683

テスト

from 名無しさん -#- Postedon 2012/06/04 11:35

9775

ああ

from 名無しさん -#- Postedon 2012/08/20 12:42

9893

テスト

from 名無しさん -#- Postedon 2012/08/27 21:34

9903

ああ

from ああ -#- Postedon 2012/08/31 19:00

9907

41545454ああ

from 名無しさん -#- Postedon 2013/02/13 18:39

10118

testテストテスト

from test -#- Postedon 2013/04/15 01:38

10167

ｌｐ

from 名無しさん -#- Postedon 2013/05/06 15:22

10180

テスト

from 名無しさん -#- Postedon 2013/05/06 15:24

10181

てｓｔ

from 名無しさん -#EGTCt1XI Postedon 2013/05/30 19:18

10185

あああ

from もんげ -#- Postedon 2015/01/20 17:11

10532

あああ

from もんげ -#- Postedon 2015/01/20 17:11

10532

ｆｇｆｇｆｇｆｇｄｆｇｄｆ

from もんげ -#- Postedon 2015/01/20 17:13

10533

aaa111お

from 名無しさん -#- Postedon 2015/02/20 13:11

10545

aaｐ

from 名無しさん -#- Postedon 2015/02/24 12:46

10549

もんげー

from 名無しさん -#- Postedon 2015/03/03 12:31

10552

投稿例

今回の個人的感想

Related article

COMMENT TO THIS ENTRY