1. Home
  2. 運営情報
  3. アップデート
  4. コメントフォームにAjaxを導入しました!

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

ajax_comment_000.png

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

今までのコメントフォームは、コメント投稿ボタンを押してから投稿完了画面を表示して、記事に戻っていました。前々からこの画面遷移がうっとおしいと思い、どうにかできないかと考えていたのですが、どうせならAjax使えばいいじゃんってことで実際に実装してみました。
まあ、PHP側の処理を自分でできるサイトならAjaxでの非同期通信も簡単にできるのですが、今回はコメントの受け取り手がFC2のシステムなので融通が利かないというデメリットもあるが、できないことはないので無理やり実装した感じです。

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

comment_ajax_002.png

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

投稿例


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

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

今回の個人的感想




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

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

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

パソコンやスマホなどのガジェットに興味があり、大学で情報工学の勉強してシステムエンジニアに。ブログ歴は15年以上。ITの専門的な知識はそこそこあり、国家資格の情報処理技術者試験のスキルレベル4「情報セキュリティスペシャリスト」や「ネットワークスペシャリスト」などを取得。

Related article

COMMENT TO THIS ENTRY

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

8682

テス投
火狐3.6.12

8683

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

8684

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

8685

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

8686

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

8687

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

8688

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

8689

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

8690

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

8691

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

8692

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

8693

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

8694

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

8695

XP、IE8

8696

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

8697

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

8698

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

8699

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

8700

てすー

8701

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

8702

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

8703

-テス投-

Safari 5.0.3 です

8704

テスト
Goole Chrome 8.0.552.215

8705


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

8706

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

8707

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

8708

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


8709

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

8711

-テスト投稿-

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

8712

=test=

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

8713

ごおgぇクローム8.0552.215

8714

-テスト-

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

8715

てす

8716

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

8717

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

8718

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

8719

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

8720

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

8721

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

8722

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

8723

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

8724

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

8725

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

8726

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

8727

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

8728

テスト


8729

てst

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

8730

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

8731

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

8732

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

8733

てす

iPhone

8734

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

8735

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

8736

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

8737

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

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

8738

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

8739

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

8740

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

8741

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

8742

テスト

IS03

ブラウザ:GALAPAGOS BROWSER

8743

てすと

8744

てすてす

8745

てすt

8746

これは画期的ですね

8747

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

8748

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

8749

tes

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

8750

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

8751

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

8752

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

8754

テスト投稿
from Opera 10.63

8755

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

8756

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

8757

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

8758

テスト
VPCのXp
Sleipnir 2.9.6

8759

win7
Lunascape6<ver 6.3.4>
geckoエンジン

8760

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

8761

テスト

8762

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

8763

8765

テスト

8766

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


8767

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

8768

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

8769

てすと

8770

--
-テスト投稿-

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

8771

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

8772

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

8773

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

8774

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

8775

テストなう

8776

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

8777

テスト

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

8778

テスト

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

8779

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

8781

テスト
Gecko/20101026 Firefox/3.6.12

8782

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

8783

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

8788

**テスト**

8791

いい

8793

IE7
Ver:7.0.5730.13

・・・

8794

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

8795

ほいほい

8796

これはなかなか。

8797

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

8800

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

8801

テスト的にコメントっす

8802

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

8803

-テスト-

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

8804

てst

8805

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

8806

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

8807

てst

8808

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

8809

びょーん

8810

てst

8812

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

8813

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

8817

てす

8819

8820

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

8821

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

8822

テス

8823

いいねb

8824

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

8826

テスト投稿

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

8827

tst

8828

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

8829

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

8830

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

8833

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

8834

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

8835

-テスト-

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

8836

test

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

8837

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

8843

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

8844

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

8845

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

8846

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

8849

てすと

8850

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

8851

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

8852

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

8855

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

8861

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

test

8873

ssssssss

8900

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

8912

テストー

8913

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

8940

てst

8982

このHPすげーーーーー(*´ω`*)!!

9001

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

9032

てst
Google Chrome
10.0.648.204

9108

てすとさせてください

9158

テスト

9159

てすと
uhyo-

9160

テストさせてください

9161

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

9166

てすと

9207

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

9210

syr

9232

a

9271

test

9550

test

9551

aaaaaaaaaaaaaa

9552

gegregrgr

9553

コメントテストー

9554

nightly

9560

てst

9616

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

9683

テスト

9775

ああ

9893

テスト

9903

ああ

9907

41545454ああ

10118

testテストテスト

10167

lp

10180

テスト

10181

てst

10185

あああ

10532

あああ

10532

fgfgfgfgdfgdf

10533

aaa111お

10545

aap

10549

もんげー

10552