こんにちは、少し早いあんこサンタです。
今回はガントチャートなどのスケジュールをかんたんに選択できるアプリを作ってみました。
なんでこのアプリを作ったかというと、本業で営業の人がExcelの矢印をびよーんっと伸ばして作業していたからです。
ダメじゃないんですが、お客さんと打ち合せしながら微調整しているとこを横から見ててもっとスマートにできないものかと思った次第です。
まぁ、作っただけで運用までこぎつけてないんですけどね。
こんなものを作りました
Ｘの投稿をご覧いただくとイメージ付きやすいです。
縦軸に項目、横軸に時間で構成されるいわゆるガントチャートです。
描画を開始したい箇所をクリックすると、そこから左右に伸ばせるようになります。
確定ボタンを押すとデータソースにその範囲が記録されるって寸法です。
もちろん再選択すれば修正も可能ですよ。
これを既存のコントロールでやろうとすると開始と終了のドロップダウンを用意しちゃいますよね。
ぶっちゃけその方がかんたんで早く作成できるので正解だと思ってます。
でもそのひと手間を加えたくなっちゃうんですよね。
今回は詳しい作り方は省きますので、たぶんこうなんだろうなーって想像しながら読み進めていただけると幸いです。
使用するコントロールは10個です
初期化用のボタンは除いていますが、思ったより少ないと感じましたか？
ギャラリーコントロールを活用するとコントロール数を大きく削減できるので積極的に使ってます。
今回は３つのギャラリーコントロールで構成されていますよ。
①galGantt
親となるギャラリーコントロールです。
データソースはId、TaskName、StTime、EdTimeの4つを持たせています
②galTitle
子のギャラリーコントロールで、横軸の時間を表示しています。
③galGraph
子のギャラリーコントロールで、枠とグラフ描画のために設置しています。
肝になるのは③のgalGraphですね。
ここで無い頭をフル回転で使いました
実際に範囲を選択する部分で、ギャラリーコントロール内に２個、外に２個の計４個のコントロールを使っています。
スライダーの扱いで相当悩みましたが、結果意図した動作をしてくれたので満足満足です。
①btnOnMouse
galGraph内。ギャラリー破線枠の描画とマウスを重ねた時に色を付ける役目があります。クリックすることで変数の値がtrueになります。
②shpFill
galGraph内。選択後の色を描画します。選択したアイテムとスライダーの位置関係によって色を変えています。
③sdrValue
galGantt内、galGraphの外。①をクリックすることで表示され、④をクリックすると非表示になります。選択したアイテムを基準に配置され、左右に範囲指定できます。
④btnSubmit
galGantt内、galGraphの外。①をクリックすることで表示され、③に追従します。自身をクリックすることでデータソースに選択範囲を書き込むとともに変数の値をfalseにします。
苦労した話
コントロール同士の位置関係調整は追従を使うことで何とかできましたが、選択したアイテムの位置をどうやって判定するか、選択した位置よりスライダーは左右どちらにあるのかで沼りました。
今回横軸を30分刻みの時間としたため、余計に位置計算が煩雑になりました。
最終的には変換表を作って整数に直しましたが、サンプルは日付にしておけばと後悔しました。
やはり作る前の設計は大事ですね。
まとめ
急ごしらえでしたがなんとか形になり、使う分には問題ないレベルまでできました。
でもあれこれ追加したというう欲望は抑えられません。
例えば選択したアイテムより左にスライドする場合はハンドルの位置も変えたいとか、選択範囲を消す機能が未実装です。
また、計画だけでなく実行も併せて表記したいとやりたいことは尽きません。
ないものは作ればいいの精神でブラッシュアップしていこうと思います。
完成したら回答編みたいな形で作り方を紹介できれば幸いです。
それではよいクリスマスを！！
ご支援よろしくおねがいします
この記事を気に入ってくださった方、寄付してあげてもいいよという方がいらっしゃっいましたら、ご支援いただけると助かります。
下記リンクからAmazonギフト券で、金額は15円からお気持ちを入力してください。
受取人のメールアドレスは amazon@anko7793.com までお願いします。
メッセージもいただけるとたいへん喜びます。
よろしくお願いします。
コメントを残す