1. Home
  2. サイト運営情報
  3. アップデート
  4. コメントフォームにAjaxを導入しました!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
無料で使える軽量なコードエディタの「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で無限スクロール対応とカテゴリー追加などのアップデートを行いました!

NetaGearで無限スクロール対応とカテゴリー追加などのアップデートを行いました!

今年の2月にデザインや機能において大幅なアップデートを行ってから順調に利用者が増えているNetaGearですが、今回無限スクロールに対応して今までよりも見やすくなりまし...

adbコマンドを使ってPCからAndroidのスクリーンショットを取る方法!

adbコマンドを使ってPCからAndroidのスクリーンショットを取る方法!

今回はAndroidでadb接続からスクリーンショットを取る方法を紹介したいと思います。通常のAndroidのスマホやタブレットでは電源ボタンと音量ボタンの長押しで簡単にスクリ...

タブレットやスマホを自由に配置できるタブレットアームを買ってみた!

タブレットやスマホを自由に配置できるタブレットアームを買ってみた!

今回はタブレットをいろいろな場所に自由に配置することができるタブレットアームを購入したので紹介したいと思います。先日の記事のタブレットをPCのサブディスプレイ化で...

BSデジタル放送のトランスポンダ移動によるTVTestの設定変更方法!

BSデジタル放送のトランスポンダ移動によるTVTestの設定変更方法!

久しぶりにPCのTVTestを使ってBSでも見ようと思ったら、なぜかBSジャパンが映らないということに気がつきました。その原因を調べたらBSデジタル放送のトランスポンダ移動に...

dTVターミナルにAbemaTVやプライムビデオなどのアプリをインストールする方法!

dTVターミナルにAbemaTVやプライムビデオなどのアプリをインストールする方法!

dTVターミナル(dTV 01)はテレビで見るためのNTTドコモから発売されているデバイスですが、通常は他のアプリをインストールしたり、カスタマイズしたりはできない仕様になっ...

Android端末をWi-Fi経由でadb接続する方法!

Android端末をWi-Fi経由でadb接続する方法!

Android端末をコマンドライン上から色々な操作を行うことができるadbコマンドですが、通常adb接続する際にはパソコンとAndroid端末をUSBで接続したまま行うと思いますが、...

PCでスマホアプリが動くAndroidエミュレーター「NoxPlayer」がすごい!

PCでスマホアプリが動くAndroidエミュレーター「NoxPlayer」がすごい!

今回はパソコン上でスマホゲームやアプリを動かすことが出来るAndroidエミュレーターのNoxPlayerを紹介したいと思います。WindwosとMacバージョンがあり、どちらのOSでも簡...

1000円で買ったStar 4 Fitness Trackerスマートブレスレットが微妙だった話!

1000円で買ったStar 4 Fitness Trackerスマートブレスレットが微妙だった話!

先日レビューを書いた超激安のスマートブレスレットi5 Plusを買って以来、スマートブレスレットにハマっています。新たに激安の送料込み1000円以下で販売されていたStar 4 ...

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...