ブログパーツを作ってみた２

たまたまSnoopy.Classに触れる機会があったところから始まって、htmlSQL->ブログパーツ->JQuery->Ajaxと流れ、ようやくブログパーツ全般の作り方を習得した。
ブログパーツ上でユーザが起こしたアクションを取得して何かを実行させるためには、どうしてもJQueryが避けて通れないが、この3連休を使ってトライしてみたところ、今日（というかすでに昨日から10時間ぶっ続けに近い・・・）、ようやく基本は理解できた（と思う）。でもやっぱりJavaScriptは自分には面倒くさく見えてしまうのだが、ここまでできるのならどうにか忘れないようにしたい。正直ここまでまっとうなブログパーツになるとは思わなかった。

因みにここまでできるとDBとの連動も楽にできるので、意外と活用方法があると思う。DBと連携する必要がない（集計やデータの更新、追加が必要ない）なら前回の記事のようにhtmlSQLとCSVファイルだけでも同じようなことが実現できる。
下記はMySQLのデータベースと連動させて簡単なアンケート・投票ブログパーツを作ってみたものだが、「答える」を押すとJQueryでPHPのスクリプトを呼び出し、DBから選択肢を集計しグラフ表示するようにしてみたものだ。

ただ、グラフも味気ない表示だとつまらないので、進捗バーのように表示されるバーを実現した。これもJQuery.ProgressBarで実現している。うーん、JQueryは本当に素晴らしい。

携帯ブラウザがJavaScriptを扱えないので、このまま携帯サイトに流用できないところが惜しいが、PCサイトでも簡単に不特定のユーザからアンケートなどを収集するのに使えるので良いと思う。こういうシステム自体を有料で提供しているところもあるようだ。うちでもやってみようか。短時間での重複クリックなどを防止する機能を付ければさらに良いかもしれない。

携帯に関して言えばフロントエンドの部分をFLASHにすればPCと同様の動きにすることも可能だろうが、この前ハマったみたいにFLASHLITE1.xでやるとなると手こずりそうだ。とりあえずは普通のHTMLで作るシンプルなものしか携帯ではできないかもしれない。

質問と選択肢、選択肢が選択された数をDBに格納しておく。
このひな形のDBさえ作っておけばあとはどの質問を表示させるかだけの話なので、スクリプトの使い回しができる。

「答える」をクリックするとDBから現在のデータを取得してバーで表示する。

テーブルは「質問の番号」「質問の内容」「選択肢１」「選択肢２」「選択肢３」「選択肢１の選択数」「選択肢２の選択数」「選択肢３の選択数」で構成した。選択肢の数を最大５程度で作っておいてもよいかもしれない。

左の画像ではわからないが、本来はウェブサイトにブログパーツとして貼り付けているが、ページ全体を読み込みしなおさないので動きがスムーズだ。
アクションの取得などはJavaScriptが行い、それ以外をPHPで処理しているので、一応Ajaxなブログパーツということになるのかな？

左の例ではバーはパーセント表示だが、もちろん数量でも表示できる。

まだまだアイデアは湧きそうだ。

人気度： 2%

こんな記事も読まれています

関連記事はありません

Tags: ajax, jquery, ブログパーツ