_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
◇ 大雪と春一番？ ・・・・・・ 第７１６
☆モバイルオフィスの作り方 ★
Vol.0716
_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
□ Trelloに捕まる
□ 楽しいサボのプログラミング講座ーその４
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
☆ Trelloに捕まる
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
前回、高性能だが良くないインターフェースの例として取り上げようと考えてい
たTrelloと言うソフトがあります。
話題にするために久しぶりにちょっと使ってみて捕まりました。
◇ 相変わらず古めかしいデザインだが・・・
アップルさんならいざ知らず、Microsoftさんにさえデザインセンスで遅れを
取っているTrelloというソフトを取り上げるつもりでした。
とはいえ、久しぶりに確認しようと思ってちょっと使ってみたのです。
https://trello.com/ja
相変わらずWindows95の時代を思い出させるようなデザインで、”やっぱり
・・”と思ったところですが、ふと思い立ってカレンダーとの連携を調べまし
た。
すると・・・・・
Trello単体ではGoogleカレンダーにiCalendar形式で作るのみ(Google側では操
作できない)の連携なのです。
それでも充分魅力的だったのですが、さらにCronofyというPowerUpツールがあ
り、これを使うとGoogleカレンダーと双方向で連携する・・・･らしいのです。
”これだ！これが欲しかったんだ・・・”と思い、追加しました。
https://to-enrich.info/archives/3731
https://ja.wikipedia.org/wiki/ICalendar#%E3%82%B3%E3%82%A2%E3%83%BB%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88
◇ 今抱えている仕事をちょっと計画してみる
今はMicrosoftのTeams上でPlannerを使って仕事の管理をしているのですが、
数件のお客様の承っている仕事をちょっとTrelloでやってみようと考えて、気
づいたら全部のお客様のボードが出来ていて、今の仕事はTrelloで管理してい
ました。
その間、ほんの1週間ほどです。
その上、私はビジネスで使っていることもあり、お客様の数だけボードを作っ
てしまったので、無償で使えるボード数10個をあっという間に超えてしまいま
した。
トホホなことに無償期間が過ぎて、Trelloの有償プランの案内がやってき、社
内で他のメンバーとも連携したかったので一大決心をしてTrelloの1年間のサ
ブスクを申し込んでしまったのです。
もう・・・大惨事です。
◇ もう一度Trelloのおさらい
Trelloとはホワイトボードに仕事の計画カードを作ってチェックリストを作る
ような仕事管理ソフトです。
私は現在、人生でもっとも忙しい時期であり(もう若くないのにね・・・)複数
のシステムの起ちあげや管理をしています。
複数の仕事が同時多発的にやってきて、”今日起こったことを今日片付け”な
がら、そこそこ大物の起ちあげを2件同時に担当し、その上新しい仕事の提案
用のソフトのサンプルも作っています。
仕事自体はなんとかなるものの、何を聞いて何を依頼されたかを管理するソフ
トが必要なのです。
そこでMS-Plannerで管理していたのですが、Plannerは予定表との連携があり
ません。(Planner内のカレンダーとは連携しますがOutLookやGoogleカレン
ダーと連携しない)
仕事の管理だけならそれでも良いのですが、やはり仕事を進めるとカレンダー
にも記録したいですし、今は別途カレンダーに記録するような余裕はありませ
ん。
そこでTrelloがとても重要なのです。
Trelloは1個のボードに1件のお客様の情報を書くのですが、ToDo→進行中→保
留→完了と言ったリストを作ることが出来ます。
最初に何かを承るとToDoに新しいカードを作ります。
カードには・・・・
・ 誰が担当するか
・ 仕事の分類(色の付いたラベル)
・ チェックリスト
・ 期限の管理
・ 内容を書く場所
などがあり、ここでカードを作るとそのボードを超えて未完了の仕事のリスト
などを見ることが出来ます。仕事が進んだらカードをつまんで次の工程にドラ
ッグすることで移動します。
まずToDoで作ったカードを進行中に移動し、さらに仕事が終わったら完了チェ
ックをチェックして完了に移動します。
◇ 重要なことは・・・
自分が抱えている様々な仕事のことはTrelloに任せて目の前の仕事に集中出来
ることです。このことはPlannerでもできるのですが、その後のカレンダーへ
の記録がTrelloなら出来るのです。
素晴らしい！！
私は本質的にマルチタスクが超苦手で、目の前の仕事に集中することは得意な
のですが、複数の仕事を並行して行うのが苦手です。
そこでTrelloを使って、仕事の予定を作っておくのです。
まずフォームを作る・・で一つのカードを作り、次いでデータベースとの連携
で一つのカードを作り、さらに印刷機能の実装で1個のカードを作ります。
どのカードも最大で半日、できれば2時間以内で収まるように作ります。
仕事が出来たら完了のリストに移動して次のカードにかかります。
要は、計画するときの自分とそれを処理するときの自分を別にしているのです。
一旦計画が出来て処理が始まると何も考えずにカードを完了させることに全力
投球します。
計画がちゃんと出来ていたら仕事は順調に進みます。
◇ センスの悪さも少し改善
そもそもTreloではボードを始め、フォーム全体のバックカラーをボードごと
に選べます。とても美しい風景写真(全部見きれないほど数が多い)または趣味
の悪い原色に近い色を選べます。
どれも自分のPCの仕事管理のバックカラーとしては好ましくありません。
そこで仕方がないのでもっともマシなちょっと暗めのグレーにしていたのです
が、なんとかPlanner並の明るいグレーか白いバックにならないものかと苦戦
しました。
そしてついに解決しました。
Windowsの標準お絵かきソフトのペイントで明るいグレーだけのJPGを作り、背
景の選択で＋アイコンを押して保管した"背景.jpg"を指定してみたのです。
するとせめて・・・と言っていたMSPlanner並には明るくてモダンなデザイン
になりました。
よかった！良かった！！！
(この機能は良く出来ていて、PCで変更するとスマホのバックもほぼ同時に変
わります。)
Trelloに捕まってしまい、年の会費も払ってついにTrelloに全面的にお引っ越し
しました。でもこの1ヶ月ほど私の仕事を支援してくれたことは間違いなく、強
力なツールですね。Plannerならタダなのに・・・
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
☆ 楽しいサボのプログラミング講座ーその4
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
前回は超簡単な損益計算書を作りました。遠い昔にシャープのポケットコンピ
ュータで作ったのはここまでで、一応の完成形ではあります。でも問題はたくさ
んあります。
https://speedserve.sakura.ne.jp/MovileOffice/Sample2.html
◇ 損益計算書の問題点
当時は数キロバイトのメモリ空間しかなくてこれしか出来ませんでしたし、そ
れなりにとてもうれしかったのを覚えています。
しかし、合計の結果は分かるものの、その経過(どんな入力をしたのか？)は紙
のプリンターに入力のたびに印刷していて、それを見ないと分かりませんでし
た。
次に入力単位で間違いや漏れに気づいてもそれを訂正する方法がありませんで
した。プラスマイナスの訂正入力をすることで答えは合いますが、勘定元帳が
ないのです。
とはいえ、メモリにしか保管することも出来ず、元帳のような動的データをど
う記録するかも見当がつかずでこのまま数年使いました。
◇ フォームの話
さて、前回予告したとおりフォームのお話しをします。
今回使ったのはHTMLの超標準である以下の部品(コントロールまたはエレメン
ト)です。
1. TextBox
コードや科目名、金額を入力出来る四角い箱です。
これはHTMLでフォームを作る際の基本中の基本の部品で、ユーザーがマウス
をクリックすると小さなワープロのように文字や数字を入力出来ます。
2．ボタン
マウスでクリックすると一瞬へこんでクリックされた感じがあり、その後何
か処理が始まります。
今回は[検索]と[登録]の二つのボタンを作りました。
3. TextArea
これはTextBoxと同じ機能なのですが、TextBoxが改行できない(文字が長く
ても良いが必ず1行しか入力出来ない)のに対して複数行を受け入れることが
出来ます。
改行文字(\nで指定される見えない文字で、文字コードは10番です。)が来る
と表示上改行します。
右の[PL]の下に科目用と借方用、貸方用に同じ高さのTextAreaを3個作って
います。
1個でも良さそうなものですが、コードや科目、金額をきれいのそろえるこ
とが極めて難しく(固定幅フォントを指定しても・・・)結果としてそれぞれ
専用のTextAreaを用意しました。
◇ イベントとプロパティーとちょっとメソッド
各エレメントにはたくさんのイベントやプロパティー、メソッドが用意されて
います。たくさんというのは数えたことはないのですが数百のレベルです。
ほとんど使わないですし知らないものも多いのですが、よく使うものとその意
味をご説明します。
・ イベント
例えばボタンコントロールの場合にはクリックされたと言うイベントがあ
り、マウスでクリックした時に発生します。これがないとボタンの意味をな
さないですね。
そしてプログラムはボタンエレメントのクリックイベントに”登録”や”検
索”プログラムを間接的に書いているのです。
・ プロパティー
プロパティーはそのエレメントの要素を指定するもので、分かりやすいもの
ではボタンに”検索”とか”登録”と言う文字を表示していますが、これは
ボタンのvalueプロパティーに文字を指定すると表示できます。
登録ボタンの場合ですと・・・
SaveB.value = "登録"
といった書き方をするほか、HTMLの部分で227行目のように1行でボタン関連
の設定をすることが多いです。
・ メソッド
メソッドを説明するのは難しいのですが、プロパティーとよく似ていながら
プロパティーが名前や色、表示する文字など静的なものであるのに対して何
らかの動きの伴うものです。
初心者の内はあまり使わないのでもっと後で学習しましょう。
◇ わかりやすいイベントは？
例えばコードで[Enter]キーを押すと次の科目へカーソルが移動します。
これをプログラム的に説明すると・・・
18:<body onKeyDown = "FormKeyDown()">
というプログラムをしています。”18:”と書いてあるのはプログラムの18行
目という意味で、Sample2.htmlが表示されている状態で[F12]を押すとプログ
ラムのソース(元)を見ることが出来ます。
例えばGoogleChromeの場合だとこの状態で"Source"というタグをクリックして
左のリストのSample2.htmlをクリックすると、フォームの表示用のHTMLに始ま
り443行目のプログラムの部分(JavaScriptの部分)に至るまですべてのプログ
ラムや設定を見ることが出来ます。
そのうちの18行目(左に行番号が書いてある)を見ると上記の1行が見えます。
これはHTML上のどこかでキーが押されたら"FormKeyDown()"というプログラム
を実行しなさい・・・という私が作るすべてのプログラムに記載されている共
通のキー操作の基本です。
ではFormKeyDown()とはどこのことかというと、520行目です。
小さなプログラムですからスクロールしても知れていますが、Ctrl+G(左手で[
Ctrl]キーを押しながら右手で[G]キーを押すという意味)を押すと入力ボック
スが表示されます。
そこで例えば520と入力して[Enter]を押すとその行にジャンプします。
一方で行番号は分からないけれどプログラムの名前(この場合はFormKeyDown)
は分かっているなら[Ctrl]+[F]を押しましょう。
下に検索ボックスが表示されるので”FormKeyDown”と記入するとやはりジャ
ンプします。
あまり一度にあれこれと詰め込むと疲れてしまいますから今日はここまでにします。
次回は”FormKeyDown”などのプログラムの部品の説明をします。
━━━━━━━━━━━━━━━━━━━━━━