BlockUI.jsで進捗表示

先日のBlockUI.jsでローディング表示
待ち時間が発生するでローディングをjQueryのプラグイン「BlockUI.js」を使って対応した。

今度はその表示に「処理中 3/20件」のように表示を更新しようとしたけど、文字列をセットしても表示は変わらない。。。
そうか、値は置き換わっても再描画されないからだわ。

一旦非表示(hide)してから、表示する値を書き換えて、表示(show)すればいけるんじゃないかと試してみた。


$('#pregress-message').hide().html('処理中...
' + (ajax_idx + 1) + ' / '+total_count ).show();

※ループ処理などは割愛

この方法で無事描画されることを確認。

BlockUI.jsでローディング表示

処理中の表示がわかりやすく解決できた。


BlockUI.jsでローディング表示

開発中のWebシステムでクライアントからajaxでJSON取得して〜云々〜という処理を作っている。
通信とその後の処理で待ち時間が発生するでローディングを表示したいと良い方法を求めてググる。

その結果、jQueryのプラグイン「BlockUI.js」を使えば、画面ブロックも同時に出来るので一石二鳥と。
ということで導入してみる。

jquery.blockUI.jsとjqueryを読み込んでおけば、
 $.blockUI({ message: ‘hogehoge’ });
で画面ブロックとメッセージの表示、
 $.unblockUI();
でブロック解除というシンプルなもの。

利用する場面は多いので汎用的に使えるようにちょっとアレンジ。
表示メッセージを引数で渡し、指定しなければデフォルトで「処理中…」と表示。

blockUI.jsでローディング表示

ざくっとサンプルを作ってみた。
続きを読む


jQuery MobileでGoogleMapはキャッシュに注意?

jQuery MobileでGoogleMapを利用するサンプルの作成をしていた時にはまったのでメモ。

1つのHTMLファイルに複数ページを記述するのではなく、PHPで1ページ分出力する方法で試していた。

大きな流れとしては、
1.ページAで入力し、フォーム送信
2.PHPでページAの内容を処理し、ページBを出力
3.ページBでGoogleMapを表示

このときの3.ページBを表示したときにGoogleMapが枠だけで地図が表示されない。

リロードすれば表示されること、PHPで出力しているからではないことは確認した。
jQuery Mobileを適用しなければ同じコードで問題なく表示される。
やはりjQueryMobileの設定らしい。

ググってjQuery Mobileとajaxのからみとかも試してみたが変わらず。
ふとjQuery Mobileに関するセミナーで「キャッシュが強力」というようなフレーズを聴いたことを思い出す。

GoogleMapを表示するページ定義のDIVに
data-dom-cache=”false”
を追加することで解決した!

1日ハマっていたけど、解決策が見つかってひと安心。


人の作ったものから得ること。

他社さんが開発されたシステムの緊急サポート対応を行った。
サーバーが不安定で困っているが対応が遅くて困っていると。

別のシステムで関わっているサーバーなので、できる部分はあるのではないかと相談に乗った。
仕様公開されていないのでソースを追うしかない。

調べていくとテスト不足な感じが否めない。
コピペの弊害もいくつか。

ログを確認しながら、一つずつ つぶしていって、なんとかサーバーの動作も落ち着いた模様。

自分も気をつけるべきだと感じるポイントもあったので、人が作ったものに触れることは、いろいろと勉強になると実感。
大変だけどこういう時の経験値は大きい。感謝!


Android開発SDカードパスの取得に注意

現在開発中のAndroidアプリは、MediaRecorderを使った録音機能を実装している。

テスト機1のGalaxySでは特に問題ではなかったのだけど、テスト機2のIS05でテストするとSDカードに書き込みできない。
他のアプリではSDカードにアクセスできているのでプログラムでの問題。

調べてみると外部SDカードのパスはgetExternalStorageDirectoryだと機種によって挙動が違うらしい。
SDカードに書き込みできないのは、パスの指定が違うからと判明。
では、他の方はどう解決しているのかと調べてみたらブログ記事を発見。

▼SDカードのパス取得:Environment と System.getenv

▼外部ストレージのパスを取得する(Android 2.2~?)

こちらを参考にすることでIS05でもSDカードに書き込みできるようになった!
解決。感謝!感謝!

機種依存的なものが他にも無いことを願うばかり。