1. Home
  2. サイト運営情報
  3. アップデート
  4. コメントフォームにAjaxを導入しました!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
Amazon.comで不良品が送られてきたのでEMSで返品して返金してもらった話!

Amazon.comで不良品が送られてきたのでEMSで返品して返金してもらった話!

以前に海外のAmazonを有効活用して安く買い物をしよう!という記事で簡単に海外のAmazon.comから輸入する方法を紹介しましたが、今回は海外Amazonで購入したものが不良品だ...

総額350ドル!有料ソフト8製品のライセンスキーを無料配布するキャンペーンが実施中!

総額350ドル!有料ソフト8製品のライセンスキーを無料配布するキャンペーンが実施中!

WonderFox Soft, Inc.は同社製品である新しいWonderFox HD Video Converter Factory Proを含む合計8製品のライセンスキーを無料配布するWonderFox 2018 Back to School Par...

Chromeのタブを休止させてメモリ消費を抑えられる拡張機能「The Great Suspender」を使おう!

Chromeのタブを休止させてメモリ消費を抑えられる拡張機能「The Great Suspender」を使おう!

みなさんもよく使っているであろうブラウザのChromeですが、タブを沢山開いているとメモリの消費量がすごいことになることがよくありますよね。そんな時におすすめなのがCh...

無料で使えるVRoid Studioでオリジナル3Dキャラクターを作ろう!

無料で使えるVRoid Studioでオリジナル3Dキャラクターを作ろう!

今回はWindows・Macどちらでも使える無料で使える3DキャラメイカーのVRoid Studioを紹介したいと思います。3D制作の知識がなくても誰でも簡単に自分だけのオリジナル3Dのキ...

360度角度調整可能なKeynice USB扇風機クリップ型を買ってみた!

360度角度調整可能なKeynice USB扇風機クリップ型を買ってみた!

今回紹介するのは縦横360°回転&細かな角度調節が可能なKeynice クリップ型USB扇風機です。USB電源で動作する小型な扇風機で、クリップを使うことでどこでも挟んで使えるほ...

WindowsにKerasとTensorFlow(GPU)をインストールして機械学習の環境を作ろう!

WindowsにKerasとTensorFlow(GPU)をインストールして機械学習の環境を作ろう!

ここ最近は機械学習にはまっていて、前々から気になっていたTensorFlowを試してみたいと思い、実際にWindowsにインストールしてみたので、その導入手順を紹介したいと思い...

スマホ用のBluetoothカメラリモコンが送料込み67円だったので買ってみた!

スマホ用のBluetoothカメラリモコンが送料込み67円だったので買ってみた!

今回紹介するのはスマートフォン用のBluetoothワイヤレスカメラリモコンです。Amazonで衝撃的な安さで販売されていたので試しに購入してみました。このBluetoothリモコンを...

Amazonのお急ぎ便で配送予定日に届かずカスタマーサービスに伝えたらクーポンがもらえた話!

Amazonのお急ぎ便で配送予定日に届かずカスタマーサービスに伝えたらクーポンがもらえた話!

先日アマゾンプライムデーセールが行われていた影響か、アマゾンでの荷物の出荷数が通常よりもかなり増えてクロネコヤマトの配送に遅延が発生しているようです。そんなわけ...

無料で使える軽量なコードエディタの「Visual Studio Code(VS Code)」を使ってみよう!

無料で使える軽量なコードエディタの「Visual Studio Code(VS Code)」を使ってみよう!

今回紹介するのはMicrosoftが無償で提供しているソースコードエディタであるVisual Studio Code(VS Code)です。VS CodeはWindows/Mac/Linuxの全てで動作します。私は個人的...

マイクロナノバブルシャワーヘッド「Bollina Ninfa」を買ったみた!

マイクロナノバブルシャワーヘッド「Bollina Ninfa」を買ったみた!

今回紹介するのは株式会社TKS 田中金属製作所が制作したマイクロナノバブルシャワーヘッド「Bollina Ninfa(ボリーナ ニンファ)」TK-7100-SLです。マイクロナノバブルと...

NetaGear RSS News

Now Loading

Article

コメントフォームに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を実装しようとするのはある意味変態的ですけどね。それだったら外部でやれよと言われてもしょうがない。

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

Most Popular

Now loading...

Social Links

Sponsored Link

MENU

NetaGear

Pure Css Design

Access Ranking

Now Loading...

当ブログにリンクしていているサイトの中でアクセス数の多いサイト上位50位が表示されます。今ならリンクするだけで簡単に上位に表示されます。

Amazon

Now Loading...