UpdateProgressでMovieJukeBoxを少し装飾

MovieJukeBox は 映画タイトルと公開年をキーにして映画情報や出演者情報などを TMDb から取得します。

取得には1作品あたり1分程度とそれなりに時間がかかるので、Ajax の UpdatePanel で部分送信を使用しています。ネット回線の混雑状況によっては、2、3分かかることもあります。そこでUpdateProgressを使用して通信中はアニメーションGIFで通信中であることを視覚的にうったえるように改修します。

02

TMDbSearch を押すとスクレーピングを開始します。画面左上に通信中をあらわすアニメーションGIFが表示されます。
ajax-loader
01

スクレーピングが完了すると TMDbSearchResult が押せるようになります。
02

TMDbSearchResult を押すと取得した映画情報を ModalPopup で表示します。
03

全情報更新 を押すと取得した全情報を SQLServer へ登録します。ここでもUpdateProgress で通信中表示をします。
04

キャスト等、個別の登録では各俳優の全情報を取得してDBに登録するので、これも数十秒必要です。ここでも UpdateProgress で通信中表示をします。
05
06

このようにしてすべての部分送信で通信中表示を実装しました。

アニメーションGIFは下記を利用して作成しました。

Ajaxload - Ajax loading gif generator
http://www.ajaxload.info/

コメント

コメントを投稿

このブログの人気の投稿

エアコン室外機のフロンガス銅管を覆うカバーを交換しました

イメージ
入居時の設置業者さんは根元までテーピングしてくれなかったようで、リビング用エアコンの室外機の銅管保温材（耐熱パイプカバー）がむき出しになり、経年劣化で銅管が露出してしることに気が付きました。銅管保温材は粉状になり、触るとボロボロと崩れ落ちる状況です。 真夏のシーズン到来、 エアコンを外出先からコントロールできるようにした のに、故障されては困ります。 これの修理だけで業者さんを呼ぶのも、金額は高くつきそうだし、この時期どれくらい待たされるかわからないので、自分で何とかすることにしました。 リビングのエアコン室外機は南側のルーフバルコニーに設置しているので、日が昇る前の早朝に作業しました。 なお、入居は2001年なので、エアコン設置から14年経過しています。
Read more »

ダブルクォーテーションで括られたCSVカ​ンマ区切りテキストファイルを SQL Server で Bulk Insert する方法

イメージ
  ダブルクォーテーションで括られたCSVファイルなんて使うのかよ？と私は疑問符なんだけれど、そういうファイルを吐き出すシステムもあるらしいのでメモ。 区切り文字にカンマ[,]を使用しちゃって、データにカンマ[,]が含まれちゃってるから、ダブルクォーテーションで括るしかないんだって。タブで区切ればいいと思うんだけどね。データにタブって普通入らないでしょ。データにダブルクォーテーションが入っててもNGだし。   ポイント 最初の区切り文字を、"にする 最初の列は切り捨てる 2番目以降の区切り文字を","にする 最後の区切り文字を"\r\nにする "はエスケープが必要なので"\になる。 区切り文字は""で囲む インポートする CSVファイルの文字コードは ANSIにしておく。インポートする文字コードがUNICODEだとインポートできない。 ※設定誤りでインポートできていない可能性もあるので、インポートできるかもしれない。 フォーマットファイルの文字コードは ANSI でなければいけない。UNICODEだと「XML の解析: 行 2、文字 0。ドキュメントの構文が正しくありません。」エラーになる。 フォーマットファイルの最終後は改行が必要。改行なしだと「一括読み込みできません。ファイル "C:\Users\****\Desktop\MovieStars.fmt" が不完全か、読み取れませんでした。オペレーティング システム エラー コード (null)。」となる。  
Read more »

IKEAの鏡を壁に取り付ける

イメージ
IKEAの壁掛け鏡 LINDBYN リンドビーンミラーをなるべく壁に傷を残さないように取り付けました。 IKEAの鏡は下記です。 商品番号 904.937.00 重さ4.72kg 税込3,999円 LINDBYN リンドビーン ミラー, ホワイト, 40x130 cm – IKEA   取り付けには壁美人を使用します。 壁側金具「6K」 2枚セット ホワイト / 壁美人.net ホッチキスで壁収納を実現する『壁美人』専門店 (kabebijin.net) 過去に壁美人を使ってホワイトボードを壁に掛けました。 娘の部屋＆おれの部屋に壁掛けホワイトボードを設置しMicrofost Lens ＋ OneDrive で運用してみる。 (yunogotoshi.blogspot.com) IKEA店舗（立川店）では安全のためか、微動だにせずがっちり壁に固定された状態で取り付けられていたため、またWebでも裏面の写真が掲載されていないため、フックをかける部分の大きさ、形状がわからず、購入に躊躇しました。店員さんにお願いして外してもらい、裏面を確認すると、壁美人のフックにかかりそう。そこで購入。 鏡裏面のフック形状はは下図となります。 壁にビスを刺してそこへ引っ掛け、微調整ることを想定しているのか、階段状になっています。 いつものように壁美人をホッチキスで壁に取り付けます。 今回は二つ使います。メーカー仕様によると、静止耐荷重は一つで最大6kgなので12kgの静止耐荷重となります。鏡が4.72kgなので余裕でしょう。フックの間隔は中心点で335mmとなります。 フックとなる壁美人は鏡で見えなくなりますが、化粧カバーを取り付けました。 こんな感じです。 壁美人のフックに引っ掛けるため、上部が少し浮くので、中央部と下部にスペーサーを貼り付けました。 このスペーサーの裏面はテープになっているので取り付けが簡単です。Amazonなどでクッションテープで検索すると出てくるでしょう。 ※私が使用しているのはホームセンターで購入したもので、巻取り型のタイプではありません。 スペーサーを貼ることで、やや傾斜も出ることから、足を長く見せることも可能かもしれません・・・ 取り付けた上部です。 中部から下部です。上部よりやや浮いているので、傾
続きを読む