デモを試したい方はこちら。

これで今までできなかった「複数のファイルをドラッグ＆ドロップでアップロード」ということができるようになる。

（普通はブラウザに画像をドラッグ＆ドロップすると画像を開くだけです）

今まではファイルを1つずつしか選択できなかった事を考えると、これはユーザにとって非常に便利な機能だ。

JQueryのtriggerは他のイベントを呼び出せて便利／JQueryのプラグインjquery.panzoom.jsはチラシの見せ方には面白い／JQueryのPuploadで複数ファイルドラッグ＆ドロップがすごい／XnView使ってみたら便利過ぎ／TextSSで一気に置換でとても便利

石間のボソッと

朝から暑い->今日はJQueryの知識吸収ばかりだ。->AndroidSDK&Eclipseでアプリ長者を目指せるのか？->Paypal資料無さ過ぎ。->今日は渋谷でビジネス交流会だ。

すると結構ZoomSightという日立のサービスを利用しているサイトを見かける。いわゆる視聴覚障害者に対してウェブサイトのアクセシビリティ向上のためのサービスだ。「表示サイズ変更機能」「画面カラー変更機能」「音声読み上げ機能」「ふりがな（るび）機能」などがある。

１ドメインで120万円近くする価格のようだ。値段の付け方がすごいですね。（＾＾；ある意味さすが大手。私にはできない値段設定です。

次のサービス開発のネタには是非「アクセシビリティ」を活かしたいが、JQueryで実現できるのだろうか。今、頭の中で考えていることを実現するにはHTML５のcanvasタグなどの勉強も必要そうだ。あとは今日biglobeのサイトでみかけた「あの」サービスも参考にしたら面白いものが出来上がるかもしれない・・・。

あ、でもその前に「○○向けガジェット」も作らなければ・・・。うーん、頭の容量が追い付かない。

話は逸れますが、JQueryもMicrosoftが公に力を入れてサポートすることになったようなので、ますます重要性が高まりそうですね。

JavaScriptは昔から嫌いでほとんど使わなかったが、このJQueryを使いだしてからは積極的に使うようになった。面倒くさいと思っていたJavaScriptをこれだけ使うようになったのは、JQueryのおかげとしかいようがない。

ところがここしばらくハマっている問題が・・・。

作っているブログパーツを外部サーバに貼り付けたときの問題だ。もちろん、ブログパーツなので外部に貼り付けられなければ意味がない。同じサーバ内に貼り付けて実行するのには何の問題もないという状態になっている。

これはBサーバに貼り付けたブログパーツがAサーバのJavaScriptを実行しているために起きている。AサーバのJavaScriptであるタイミングで$.postをし、DBに接続したいのだがうまくいかない。これはいわゆるクロスドメインによるものだ。JavaScriptは別サーバのものはセキュリティ上基本的には呼び出せない。

つまりAサーバ上で実行している分にはなんの問題もないが、Bサーバに貼り付けると動かない状態になってしまう。

しかし、これでは意味がない。
解決策はあると信じ、調べていくとJQueryの.getJSONならそれができることがわかった。 
ただ、このgetJSONで呼び出すスクリプト上で今度はDB接続とJSONのechoが同時にできない・・・。（泣）
まだ解決への道程は長そうだ。

↑余計なecho文が入っていたのが原因という単純なミスでした。

FORMタグのtextareaの値を取得するときにval()で取得してajaxでPOSTしようとするとうまくいかない。これはtextareaで改行コードが入るためだ。

JQueryを使わないで通常の方法でPOSTするなら下記のようにtextareaに「wrap=”soft”」を付ければtextarea内のデータは改行コードを省いてくれるが、今回はJQueryでフォーム内の値を取得しているので下記の方法は使えない。

<textarea wrap=”soft”>ほげほげ</textarea>

というわけで改行コードを省く処理をJavaScriptで行う必要がある。探していたら見つけた。

http://www.kanaya440.com/contents/tips/javascript/002.html

function DeleteLineFeed(myLen) {
    var newLen = '';
    for(var i=0; i<myLen.length; i++){
        text = escape(myLen.substring(i, i+1));
        if(text != "%0D" && text != "%0A"){
            newLen += myLen.substring(i, i+1);
        }
    }
    return(newLen);
}

これでtextareaの値の改行コードを省いてPOSTすればよい。
解決までに結構時間かかった・・・。

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

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

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

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

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

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

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

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

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

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