今、こんな画像アップローダーを開発しているのだが、これが、iPad前提での操作を余儀なくされている。
画像はAndroid端末でのテストなんだが、HTML5の機能を使うと、写真の複数選択が超簡単でAndroidは複数選択出来ないと言う記事しか見かけないのだが、何故か俺の
GALAXY note3では何枚でも選択出来てしまうのはなぜな
んだろう？
最もDropboxを使えば20枚まで選択出来るのだが、そんな必要も無く、普通に複数選択出来てしまう。
ただし、ギャラ
リーから選択しようとすると、1枚しか選べないが、普通に画像選択を開くと複数選択画面になって何枚でも選択出来る様になってた。
iPadの場合は、カメラロールから選択すれば撮りためた写真を複数選択出来るので結構便利だ。
Androidでも複数選択が普通に出来る様になったのだろか。
まぁそれはともかく、パソコンでテストしていたら、マウスで簡単に写真をドラックして並べ替えられるUIが出来たと思って、iPadでテストしたら、まったく動かないのだ。
何でも、タッチとマウスのクリックは別扱いで、Jqueryのライブラリを追加すれば、iPadなんかのタッチドラッグはノンプログラムで対応が出来たので、これは助かった。
ただ、このシステムは工事のビフォアー、アフターの写真を簡単にアップする仕組みなので、写真のファイル名が結構重要で、施工前、施工後の写真に番号を付けてアップしたいｔ言うのが要件だ。
なので、写真を並べ替えてビフォアー、アフターの写真をならべ、番号を入力しようとテキストボックスをタップしても、これがまったく無反応になって入力出来ない。
DIVタグをドラック出来る様にして、その中にテキストボックスなんかも放り込んだので、タッチが優先するようで、テキストボックスにはフォーカスが当てられないと言う状況になってしまった。
そこで、試行錯誤して、DIVタグのサイズを指定して、ボタンがはみ出す様にしたら、不思議なことにDIVタグの中にあるのに、テキストボックスにフォーカスを当てられるようになったのだ。
後は、見た目をCSSで調整して、入力部分はPタグで囲って、同じ様なデザインを適用してあたかも、一つの塊のように動かせる様にして無事解決した。
もちろん,アップする際はHTML5のstyle=”file”を使ってはいるものの、サイズの大きな画像をアップするのでは意味が無いので、javaで画像を必要サイズに縮小して、blobデータを送るようにして、パケットを節約している。
あくまでも写真を複数選択する機能を利用してブラウザで写真を認識して、プレビュー時に、縮小してPOSTする際、ファイルはクリヤーしてPOSTデータだけをサーバーに送れば、かなりのパケットを節約出来るので、結構な枚数をアップしても問題ない仕組みにしている。
ただ、これ使うの、現場の大工さん達なので、相当ITリテラシーが低めでも使える様にしないと、問い合わせとか面倒なので、何でも出来る様に仕上げているところだ。
もちろん、ファイル名も日本語対応で、まとめてZIPファイルで管理者はダウンロード出来る様にしているが、サーバー側でZIPにまとめる際、全角文字はLinuxなので、Windowsで解凍すると文字化けするので、ZIPにまとめる際に、ファイル名をSJIS化してから圧縮すると、Windowsで解凍しても文字化けせずに展開出来る。
もちろん、Linuxで解凍すると文字化けするが、ダウンロードするPCはWindowsなので、その辺りは上手くいく方法が見つかって良かった。
コメント