1. Home
  2. サイト運営情報
  3. アップデート
  4. コメントフォームにAjaxを導入しました!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
VideoProcでYoutubeなどの動画をダウンロードする方法!

VideoProcでYoutubeなどの動画をダウンロードする方法!

今回はVideoProcの機能を紹介するシリーズの第三弾で、今回はVideoProcの動画ダウンロード機能についての紹介したいと思います。第一弾ではVideProcの録画機能を使ってテレ...

Lecone モバイルバッテリー&LEDライト化粧鏡を使ってみた!(クーポンコードあり)

Lecone モバイルバッテリー&LEDライト化粧鏡を使ってみた!(クーポンコードあり)

今回紹介するのはLeconeが販売している4000mAh大容量モバイルバッテリーにLEDライト付きメイクアップミラーが搭載されている「HPB0066A」です。現代社会では常にスマホなど...

Google Chrome v76からオムニバーでPWAのインストールができるように!

Google Chrome v76からオムニバーでPWAのインストールができるように!

Gooogle Chromeの最新版であるバージョン76からオムニバーでPWAのインストールができるようになりました。これによりPC版でも簡単にPWA対応サイトのPWAインストールを行う...

7時間限定で「竹書房マンガ全作品読み放題」を実施することを発表!

7時間限定で「竹書房マンガ全作品読み放題」を実施することを発表!

電子書籍サイトのBOOK☆WALKERでは、2019年8月5日(月)の19時から7時間限定で竹書房マンガ全作品読み放題キャンペーンを実施することを発表しました。竹書房といえば、ポプテ...

フォルダ内のファイルサイズを表示できる「Folder Size for Windows」!

フォルダ内のファイルサイズを表示できる「Folder Size for Windows」!

Windowsを使っていてよく不便に思うのがエクスプローラーでフォルダ内のファイルサイズの合計を表示できない点です。普通のファイルは一覧表示すればファイルサイズが出ま...

VideoProcのDVDコピー・リッピング機能で簡単にバックアップ!

VideoProcのDVDコピー・リッピング機能で簡単にバックアップ!

前回はVideProcを使ってクロマキー合成を行ってみたり、VideoProcの録画機能を中心に紹介しました。今回はVideoProcの機能を紹介するシリーズの第二弾で、今回はVideoProc...

Amazonで送料込み50円のHDMI延長コネクターを買ったみた!

Amazonで送料込み50円のHDMI延長コネクターを買ったみた!

前回の記事に引き継きAmazonで中国発送の安いものシリーズを買ってみた記事です。前回の記事ではアイマスクを送料込み50円で購入したのですが、今回はHDMI延長コネクターの...

Amazonで送料込み50円の立体型アイマスクを買ってみた!

Amazonで送料込み50円の立体型アイマスクを買ってみた!

最近Amazonで中国発送の安い商品を見つけては試しに購入しています。以前にもBluetoothカメラリモコンが送料込み67円だったり、スマホ三脚固定ホルダーだったりどうやって...

VideoProcの画面録画機能がすごい!クロマキー合成も可能!

VideoProcの画面録画機能がすごい!クロマキー合成も可能!

VideoProcは、Digiarty Software社が開発・販売を行っている動画変換&編集、DVDコピー、動画ダウンローダー、画面録画とマルチに活躍する機能を持った動画処理ソフトです...

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

Popular Article

Access Ranking

Now Loading...

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