_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
◇ オミクロン株が猛威を奮っています ・・・・・・ 第７１５
☆モバイルオフィスの作り方 ★
Vol.0715
_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
□ ユーザーインターフェースはとても大切！
□ 楽しいサボのプログラミング講座ーその３
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
☆ ユーザーインターフェースはとても大切！
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
私は仕事柄、ユーザーインターフェースは毎日考えます。
お客様のため？？いいえ、自分のためです。
◇ ユーザーインターフェースからソフトは作る
人それぞれプログラミングのスタイルは異なると思います。
私はまず最初にユーザーインターフェースを考えます。
理由は簡単！
良いインターフェースが出来たら”これが動いたらどんなに素敵だろう！！”
と思うのです。
その思いだけでソフトを作っていくと言っても過言ではありません。
一方で気に入らないインターフェ-巣の場合は・・・・
どんなに上手にソフトを作っても結局これでは・・・と戦闘意欲がなくなりま
す。
本来ユーザーインターフェースとはその名の通り、お客様がシステムと向き合
うときの唯一のインターフェースですからとても重要なのですが、それ以前に
プログラマの勤労意欲を左右します。
◇ 良いインターフェース
何を持って良いインターフェースとするかは難しいのですが、少なくとも以下
の点は外せません。
・ ソフトウェアーの目的が一目で分かること
・ 操作の手順が明瞭であること
・ 操作するデータの情報が広めで分かること
・ 好感の持てるしゃれたデザイン
近頃のスマホのアプリにマニュアルはありません。アプリを見ただけでどう操
作するか分からないようなら誰も使ってくれないのです。
私の専門の業務システムはもう少し複雑なのですが、それでも日常の業務がイ
ンターフェースを見ただけで操作できないようならやはり問題です。
◇ デザインは重要
機能とは関係なく、デザインは重要です。
例えばOutLookのカレンダーは高機能ですがデザイン的にはGoogleカレンダー
の方が遙かに上です。
私はそれだけの理由で基本のカレンダーはGoogleを使います。
一方で仕事のToDoソフトはマイクロソフトのTeamsを使っています。
Trelloと言うソフトにとっても興味があったのですが、デザインが気に入ら
ず、Teamsにしました。
でも・・・
でもですよ、この原稿を書くのに当たって、”最近はどうかな？？”と思って
久しぶりにLogInしてみました。
https://trello.com/ja
すると！！
最近のTorelloではカレンダーも付き、何よりの朗報はTrelloで作ったボード
がGoogleカレンダーとリアルタイムで連携するらしいのです。
◇ TrelloとGoogleカレンダーをリアルタイムで自動同期する「Cronofy」の設定方法
https://seeder.site/work/efficiency/235.html
ちょっと試した限りではごく簡単な設定で確かにGoogleカレンダーにやってき
ます。
そしてスマホのカレンダー(AndroidでGoogle謹製)にも当たり前ですがやって
きます。
うーーーん・・・これは難しいことになってきたぞ！
インターフェースの話題を書くつもりで、高機能なのにインターフェースがイマ
イチだから使わないでおいたTrelloの話題を書いている内にちょっと話が横にそ
れました。
忙しいのですが、Trelloの使い方をしばらく調べます。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
☆ 楽しいサボのプログラミング講座ーその2
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
前回は入力したデータをそのまま保管できるようにしました。
ほぼすべてのモダンブラウザが持っているLocalStorageという記憶領域を利用し
たものです。今回は入力結果を集計して損益計算書を作りました。
https://speedserve.sakura.ne.jp/MovileOffice/Sample2.html
◇ サンプルがさらに進化した
このサンプルは学習目的なので今回の大幅な進化にあわせて新しいページを作
りました。
場所は前回と同じですが、”Sample2.html”を呼び出してください。
入力フォームは前回同様に3行だけのシンプルな(貧弱とも言う)伝票ですが、
右に[PL]と言うコーナーを作っています。
PLとは言わずと知れた[損益計算書]で、極めて原始的ながら40年以上前のアマ
チュアだった頃の私がはじめって作ったプログラムの機能を模倣しています。
その当時は半年ほどかけて作ったのですが、今回は1時間半ほどでした。
◇ 使い方は・・・
例えば1行目のコードに”8111”と入力すると”売上高”という科目を表示し
ます。そこで例えば”25000”と入力して登録すると・・・・
右の損益計算書には売上高の貸方に25000と表示され、最後の行の当期利益に
は全額の25000と表示されます。
売上だけ1個入力して経費や仕入を入力していないからです。
次いで仕入や経費を適当に選んで入力し、登録してください。
ちゃんと選んだ科目に金額が加算され、利益の額も変わってくるはずです。
一旦ブラウザを閉じても次回起動後に[検索]ボタンをクリックすると集計の結
果は呼びだせます。
ただし入力のエラー排除は何もしていません。
間違えて数字の代わりに文字や全角の数字を入力して尊くすると集計結果がEr
rorになりますが、その場合はLocalStorageを削除してやり直してください。
◇ ソフトをデバッグする
大抵のブラウザは[F12]を押すとデバッグ画面が表示されます。
例えばGoogleChroomeならデバッグの中のApplicationタブをクリックすると
上から2ブロック目にStorageと言う項目があり、そこのLocalStorageをクリッ
クすると”https://speedserve.sakura.ne.jp”と言う項目があり、さらにク
リックすると”MovileOffice@Data@DenData.txt”という項目が出てきます。
この中に[登録]ボタンをクリックするごとに計算された集計結果が格納されて
います。
この項目を選択して[Delete]すると集計結果は初期化できます。
何の危険もありません。
LocalStrageは不揮発性の変数で、WEBアプリが自身のPCに記録してくれる数少
ない機能ですが、ほとんどのアプリは使いませんからここに出てくるのはこの
会計伝票のデータぐらいいです。
ところでソフトの動きを見たい場合にはApplicationではなく、Sourceタブを
クリックしてください。
このサンプルで[F12]を押したのであれば[Top]→[speedserve.sakura.ne.jp]
→[MovaileOffice]→[Sample2.html]と言うツリー状の要素が並び、最後の[Sa
mple2.html]をクリックするとHTML部を含めてプログラムの内容が見える上に
動かしながら何が起こっているのか確認できます。
◇ ステップ実行
このデバッグの状態で例えば460行目の行番号をクリックすると黄色いマー
カーがこの行について460と言う行番号がマークされます。
この状態で[F5]キーを押して再起動すると、マークした行で一旦止まります。
ここで以下の3個のキーが使えます。
・ [F11] 1行進む
・ [F10] 次のブロックに進む
・ [F8] プログラムの実行を再開する
このうち、よく使うのは[F11]で、プログラムの進み方を1行ずつ確認できま
す。
またこの状態で変数(例えばItemList)を選択してマウスカーソルを合わせると
変数に格納されているデータを確認できます。
このような操作を”ブレークポイントを作ってステップ実行する”といい、プ
ログラミング中には頻繁に行います。
何かエラーが出たらデバッグで赤くなってどこでエラーが出たか分かるのです
が、その直前にブレークポイントを設定して、その前後の変数の状態を確認す
ることはデバッグ作業の基本です。
今回は完成形？に近い形をお見せしたくて一気にプログラムを進めました。
配列変数を使ってデータの加算をするあたりはもう少し後で説明します。
次回はその手前のフォームを作っている部分とプログラム部分の書き方のイロハ
の説明をするつもりです。