jQuery ファイルドラッグアンドドロップアップロード

1.最近クライアントからの要望で、ファイルのアップロードをドラッグアンドドロップで行えるような、リッチなクライアントを作成したいというものがあった。

2.そこで、いろいろ調べた結果、jqueryで実装できる、「jQuery File Upload」という、UIを使用することになった。

ファイルのダウンロード及びデモサイトは、http://blueimp.github.io/jQuery-File-Upload/で、確認できる。

【設置の方法】
ダウンロードしたファイルを解凍し、サーバーへコピーするだけ。
コピーしたディレクトリをURLで指定すれば、デモサイトと同様の画面が開く。

 

【使い方】
デスクトップ等にあるアップロードしたいファイルをブラウザの画面に、ドラッグアンドドロップし、
startボタンを押すだけ。

 
【サーバーサイドの処理の実装】
こちらは、使用している環境にもよるが、通常のファイルのアップロードと同様な実装の仕方で、ファイルをサーバー上でコピーすることができる。
–参考サイト
https://github.com/blueimp/jQuery-File-Upload/wiki

のServer-side(ページ中盤以降)
に、PHP、PHYTON、Ruby、JAVA、ASP.net等での実装の仕方のサンプルが、豊富に用意されている。

【まとめ】
今回は、紹介までですが、是非、一度お試しください。

 

運動会・出場者募集システム

運動会 出場者募集システムのトップ画面です。

Undokai_メニュー.JPG

はじめに
自治会の体育委員になったことが、出場者募集システムを作るきっかけとなりました。以前はExcelを使っていましたが、印刷して紙ベースでの利用でした。運動会への取り組みが始まるのは8月末です。ここから10月始めの当日までが勝負です。システムもそれぞれの場面で必要となる物を作り追加していくという同時進行です。
順に説明をするとマスター関係からとなるのですが、この部分は飛ばします。マスターの名称のみ主なものだけを上げます。イメージがわきませんか? 来年も使えることを考えているとか…
年度マスター
競技マスター
出場者マスター

実際の取り組みでは前段階があります。出場者の募集です。その結果を入力するところからシステムの運用が始まります。下の画像は出場者登録画面とリストです。
Undokai_出場者登録.JPG

Undokai_出場者リスト.JPG

人数が足りないところ、ダブっているところが出てきます。調整を検討するための表、担当者が出場を依頼する、種目の変更を頼むための表が必要となります。
調整リストは、家族内での出場者の状況が分かります。
Undokai_調整リスト.JPG

集計リストは、一人の方が何種目に出ているのかが分かります。
Undokai_集計リスト.JPG

また上記以外にExcel手作業で昨年と一昨年の出場者履歴リストを作っています。 このプログラム作成は来年度に持ち越しです。

 出場者が決まったあと、練習、運動会への案内文書があります。これをExcelで作っています。Excelシートの氏名、競技種目をプログラムにより入れ込み自動生成します。家族ごとに案内文がでます。
Undokai_練習参加.JPG

お弁当の申し込み登録画面です。事前にお弁当申込用紙を配り回収した結果を入力します。
Undokai_弁当登録.JPG

 運動会当日に必要になります。出場選手の招集のため競技種目と選手名を掲示します。A3用紙の大きさです。

Undokai_掲示リスト.JPG

 以上が「運動会 出場者募集システム」の全体です。この他に作ったものの使わなかった「雨天順延確認リスト」があります。順延になったとき参加できるかを確認するものでした。
今後、作成するプログラムとしてこれまでに上げた以外に「掲示用競技名リスト」があります。競技名をA3で大書きしたものです。来年の運動会まで徐々に改善をすれば良いでしょう。

ユーザーコントロールのフォーカス移動

プログラムを作っていると、ちょっとしたことでひっかかり、無駄に時間を費やしてしまうことがあります。
そんなちょっとしたことを時々アップしていきたいと思っています。

今回は、最近はまってしまったユーザーコントロールのフォーカス移動です。

#開発環境はMicrosoft Visual Studio 2010、言語はC#です。

IPアドレスを入力するため、テキストボックスを4つ並べたユーザーコントロールを作りました。
並べたテキストボックス間をリターンキーでフォーカスを移動できるように下記のメソッドを作成し、各テキストボックスのKeyDownイベントから呼び出すようにしました。

private void textBox_KeyDown(object sender, KeyEventArgs e)
{
// リターンキーの時
if (e.KeyCode == Keys.Enter) {

// 次のコントロールへフォーカス移動
this.SelectNextControl(this.ActiveControl,
!e.Shift, true, true, true);
}
}

でも、このユーザーコントロールをフォームにはりつけて、リターンを押していくと、ユーザーコントロール内で、フォーカスがぐるぐる回ってしまいます。
nextcontrol.png

Control.SelectNextControlメソッドの仕様を確認してみました。
すると、5つ目の引き数の説明が、
「タブ オーダーの最後のコントロールに到達した後、タブ オーダーの最初のコントロールから検索を続行する場合は true。それ以外の場合は false。」

「それ以外の場合」というのがどんな場合かよくわかりませんでしたが、「最初から検索しないなら他に何か見つけてくれるかも」と、とりあえず最後の引き数を false にしてみました。
すると、4つ目のテキストボックスまで来たらそれ以降フォーカスが移動しないだけでした。
「それ以外の場合」は、単に先頭に戻らないということでした(^^;

上記のフォーム、リターンキーでフォーカスを移動したくてはまっていますが、Tabキーだとちゃんと全てのコントロールにフォーカスが移動していきます。
ので、
SelectNextControl を this.ProcessTabKey(!e.Shift);
に変更して、Tabキーを偽装してみましたが、結果は同じでした(T0T)

が、
Tabキーを押した時とTabキーを偽装した時の違いを考えていて、ふとひらめきました。

private void textBox_KeyDown(object sender, KeyEventArgs e)
{
// リターンキーの時
if (e.KeyCode == Keys.Enter) {

// 次のコントロールへフォーカス移動
this.Parent.SelectNextControl(this.ActiveControl,
!e.Shift, true, true, true);
}
}

これでうまくいけました。
this.SelectNextControl を、
this.Parent.SelectNextControl に変えただけです。

親フォームから呼べばよかったんですね (^0^)v

もっと見る

正規表現を少しだけ深く勉強

定例会で正規表現で「かつ検索」を話題にしとき、正規表現の資料を作ることになりました。
それから、2ヶ月近くもたちましたが、年末年始の休みにざっとまとめてみました。
PDFの資料を添付しますので、よろしければ、参考にしてください。
正規表現の勉強.pdf
引用させてもらいましたサイトの方にお礼申し上げます。
間違いがあるかもしれませんので、その際は、ご容赦ください。

正規表現の「かつ検索」方法で、「先読み」のグループ指定順に関係がないことについて、杉本さんが有用な検証をされましたので、それも、添付させてもらいます。
指定文字列を含む行の検索.pdf

初めてのOAuth・・・・

Webで調べものをしていたら、「〇Auth」との表現があった。最初は、項立てのマル+Authと思ったが、どうも違うことがわかってきた。アルファベットのO+Authだった。

ウィキペディアで見ると、「OAuth (オー オース[1]) は、ブレイン・クッククリス・メッシーナが始めたオープンプロトコルであり、デスクトップ、モバイル、WebアプリケーションなどにセキュアなAPI認可 (authorization) の標準的手段を提供する。」「マッシュアップによるWebサービスの連携が増え、デジタルアイデンティティの共有が問題となってきた。」「あるWebサービスAにユーザーの個人情報があるとき、そのWebサービスAと別のWebサービスBが連携し、WebサービスAにある個人情報をWebサービスBが自由にアクセスできる状況は好ましくない。そのため、WebサービスのAPIへのアクセスを認可する手段が必要とされていた。」とある。

 

pic01.JPG そう言えば最近、TwitterとFacebookの連携をはじめ、サードパーティアプリとTwitterの連携などが、やたら目についている。どのような仕組みで実現しているのか?またID、パスワードは、どのように管理されているのか気になるところである。

この辺りのことに、OAuthが関連ありそうなので、簡単なサンプルアプリを作って、勉強してみた。

アプリ名は、「Botk」。内容は、自分のTwitterにアプリに組み込んだメッセージを、つぶやく・・・・・とのごくごく簡単なもの。手順は以下の通りだが、サイト「SDN Projyect」http://www.sdn-project.net/labo/oauth.html を参考(ほぼそのまま)にさせていただいた。

 

1.TwitterへOAuthクライアントの登録

今から作るアプリの情報を、Twitterに登録するが、具体的には以下のサイトにアクセスする。http://dev.twitter.com この際、自分のID、パスワードでログインする。

アプリの名前や説明を、適当に登録する。

2.Access Token と Access Token Secret などの取得

1.の作業で、4つの大事な情報が提供されますから、メモしておく。

a.Consumer key

b.Consumer secret

c.Access Token

d.Access Token Secret

 

3.PHPでの準備

OAuthライブラリのダウンロード

サンプルコードのセット(Access Token 等)

pic02.JPG

4.実行

ブラウザから、アプリBotkを起動すると、Twitterにつぶやきました。

 

pic04.JPG

最後に、今回レポートをまとめてみて考えた。今後、ソフト開発(特にweb系)は二極化する。一からの手作りソフトとコンポーネントの組合せだけを行うソフトの二つに・・・・・。

 

オンラインストレージは今・・・

一通のメールが入った。「この度、2013年7月31日をもって、「クオンプ」のすべてのサービスを終了させていただくこととなりました。・・・・」

「クオンプ」は、株式会社リコーが提供するサービス名で、いわゆる「オンラインストレージ」と呼ばれているものだ。株式会社リコーと言えば、資本金1353億円、連結売上高2兆円に迫ろうとする大企業で、複写機、プリンターを始めとして多岐にわたる事業展開を行っており、特段、経営危機に瀕しているとも聞いていない。では何故、突然のサービス終了か?内容については定かではないが、ネット上でのコメントを拾って見ると次のような見方が出ている。

「オンラインストレージが、あちこちで開始された2010年代には人気の国産ストレージサービスだったが、最近は大容量化が主流になって利用者が激減していたようだ・・・」

quanpL.JPG私が、クオンプに関わりを持ったのが、ちょうど2年前の2011年の初め。後で書くが、ある目的があってお試しコース(無料版)に申し込んで少しの間利用させてもらっていた。しかし、ここ1年以上、ほとんど使うことなく忘れ去っていた。今回の件で、あわててオンラインストレージの中を見てみると、2年前にアップロードしたデータが、そのまま残っていたので、すべて削除した次第である。

もっと見る