_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
◇ 本当に寒い！冬全開です ・・・・・・ 第７１４
☆モバイルオフィスの作り方 ★
Vol.0714
_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
□ 今どきの技術はすごい！
□ 楽しいサボのプログラミング講座ーその2
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
☆ 今どきの技術はすごい！
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
お正月明けの３連休にタマちゃんと鳥貴族に行きました。
タマちゃんは背中から羽が生えるほど焼き鳥が好きですし、マナベは鳥貴族のフ
レンチポテトの大ファンなのです。
◇ かなり驚いたオーダーシステム
今までなら若い店員さんがメニューのオーダーを尋ねて自身が持っている専用
の入力装置に入力をしてくれていました。
ところが・・・・・
レシートを持ってきて”このQRコードをスマホで読んでください！”と言うの
です。
何のことだろう？？と思いながらAndroidで呼んでみたところ・・・・
メニューの一覧がジャンルごとに表示され、数を入れて[注文]をクリックする
と追加でオーダーするかこれで終えるかを選択するようになります。
なんと・・・・私のAndroidがお店の専用の発注端末になっているのです。
◇ 見た瞬間、どう作るかは分かったのですが・・・
このソフトを作れと言われたらもちろん作ることが出来ます。
シンプルな作りで、私の得意の分野ではあります。
でも・・・ここで店内のネットワークシステムではなく、顧客のスマホを使お
うという発想がすごい！
使ってみて思うのですが、あちらこちらのファミレスにある客自身が注文する
専用端末より自分の使い慣れているスマホ！と言う感覚があるのでかなり楽で
す。
店員さんを待たせて悩むのはとても気が引けますが、これなら心ゆくまで選ぶ
ことが出来ます。
これはすごい！
それにしてもファミレスや居酒屋さん向けにオーダーシステムを作っていた会
社が全滅するでしょうね。
専用の機械は必要なくて、多分お店には少し丈夫目のPCが１台あればすむこと
ですし・・・・・
すごい！！
◇ 誰が思いついたのだか・・・・
HTML5を駆使して遠く海外での入力システムを作って、今も運用しているので
すがこの店舗用の発注端末はまったく思いつきませんでした。
HTML5であれば距離は関係なく、デバイスも関係ありません。
OSやPCであるかどうかも関係ないのです。そのことはよく知っていました。
だから海外で入力するシステムも少しビビりながら作ったのですが、あっさり
と稼働を始め、今では”私のシステムの稼働条件はYahooかGoogleが見えるこ
と！”と豪語するに至りました。
それにしても・・・・
お客様のスマホを使うことにはまったく思い至りませんでした。
システムとしては極めてシンプルで、作りも簡単であり、何よりよく出来てい
ます。
入店と同時に現在の日時、店舗コード、客席コード、そしてWEBサイトのURLを
埋め込んだQRコードのついたレシートを発行して、お客様に渡せば良いのです。
お客様はスマホでそのQRを読み込んで、自身のスマホに焼き鳥のオーダープロ
グラムを読み込みます。
後は普通のWEBでのお買い物と同じように焼き鳥を注文するのです。
もうお店にはPOSやレジもいらんくなりますね・・・
お客様が注文した時点でクラウドのサーバーに売上情報が登録されますからお
店では次々と入る注文にしたがって鳥を焼き、最後にレシートをお客様が持っ
てきたらやはりQRを読んで決済すれば良いのです。
イヤーすごい！
新春早々、目の正月をさせていただきました。世の中は広い！そしてすごい人た
ちがおられるものだと心から感服した次第です。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
☆ 楽しいサボのプログラミング講座ーその2
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
前回はたった６個のテキストボックスにデータを入力するHTMLプログラムのサン
プルを用意しました。
https://speedserve.sakura.ne.jp/MovileOffice/Sample1.html
今回は少しだけそれを進化させます。
◇ サンプルが進化した
実は私は目下人生でもっとも忙しい！と言う状況でろくに時間がとれません。
とはいえ、せっかく始めたプログラミング講座でもあり、本気で楽しみにして
くださる方も少しだけいらっしゃいますので、超短時間で進化させました。
前回はコードを入力して[Enter]キーを押すと、コードで識別した経費科目が
呼び出され、最後に金額を入力するという極めてシンプルなインターフェース
を作りました。
今度はその入力したデータを登録するサンプルです。
[使える勘定科目]
8111:売上高
8211:仕入高
8312:運送費
8313:水道光熱費
8314:旅費交通費
8315:通信費
8321:消耗品費
8499:雑費
◇ データを登録する
データを登録する場合、本来であればWEBサーバー上のデータベースに登録す
ることになりますが、サーバーサイドのプログラム(PerlやPHP,RUBYなど)が必
要になります。
本質的にはWEB上で稼働するJavaScriptと同じようなものなのですが、今はま
ずWEBでインターフェースを作る段階でさらに別の言語を学習するのは敷居が
高いので後回しにします。
まずは自分のPCだけで完結する方法を・・・・
[Perl]
https://ja.wikipedia.org/wiki/Perl#:~:text=Perl%EF%BC%88%E3%83%91%E3%83%BC%E3%83%AB%EF%BC%89%E3%81%A8%E3%81%AF%E3%80%81,%E5%BA%83%E3%81%8F%E7%94%A8%E3%81%84%E3%82%89%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B%E3%80%82
[PHP]
https://ja.wikipedia.org/wiki/PHP_(%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E8%A8%80%E8%AA%9E)
[RUBY]
https://ja.wikipedia.org/wiki/Ruby
◇ LocalStorageを使う
今度のサンプルではJavaScriptのLocalStorageを使ってデータを登録しています。
LocalStorageというのはどのブラウザに標準で搭載されている記憶領域で、外
部にデータを送信するのではなく、自身のPCに登録します。
当たり前ですが極めて安全です。
・ LocalStorageの特性
自分のPC内のどこか(ブラウザによって違う)にデータを登録
極めて安全
超高速
とても簡単に操作できる
・ 欠点は
登録領域が５Mしかない
５Mしかないとはいえ、昔のフロッピーディスク５枚分ありますからそれなり
のデータは格納できます。
そしてこの容量はオリジンごと(サンプルで言えばhttps://speedserve.saku
ra.ne.jp)で１個、他のサイトをアクセスすればまた１個という風にサイトご
とに１個用意されます。
HTML5はセキュリティー上の理由からインターネットと接続している際に自身
のPCには一切操作させません。
これは理にかなったことで、あるWEBを見ただけで自分のPCのデータを全部削
除などと言ったことを起こさないためです。
この制限は極めて強力で、自分のPCをHTML5で操作することはほぼ不可能なの
ですが・・・例えば自身のIDやそのPC固有のちょっとしたデータを記憶するこ
とは業務システムではよくあります。
そのうるさいHTML5の制限の中で自身のPCにデータを保管できる方法はたった
二つ！そのうちの一つがこのLocalStorageなのです。
自身のPCの中とはいえ、ブラウザを経由してしか見えませんし、それを外部か
ら操作することは不可能です。
ついでにもう一つの方法はIndexDBで、これはかなり本格的なデータベースエ
ンジンです。でもオラクルさんが仕様を作ったとかで極めて難解です。
https://developer.mozilla.org/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB
◇ まずはコードと金額を入力して・・・・
まずはサンプルのプログラムにコードを入力し、次いで金額も入力しましょ
う。
その上で新しくできた[登録]ボタンを押してください。
ん？[登録]ボタンがない？？
それは古いプログラムを見ているのです。ブラウザは同名のファイルがある場
合には自分が持っているキャシュと呼ばれるファイルを優先して表示します。
Windowsの場合には[Ctrl]+[F5]を押すと最新のプログラムを強制的にダウン
ロードします。その他のOSの場合でも[更新]とか言ったブラウザのメニューを
クリックすると最新化されます。
◇ 一旦サンプルを終了して・・・
一旦サンプルを終了して再度呼び出すと何も入力されていませんが、[検索]ボ
タンをクリックすると先ほど登録したデータが呼び出せます。
この内容はブラウザのLocalStorageを削除するまでずっと保管されます。
たった1件だけの伝票データですが、それを登録して読み込めるようになりま
した。
このことは結構重要で、華麗な検索でなくてもプログラムがデータを記録でき
るようになったのです。
◇ LocalStorageを学ぶ
LocalStorageはとても簡単に使えるのですが、それでも初めての人には何をど
うすればよいかわからないと思います。
localStrage.setItem(検索キー,登録するデータ)
で登録でき、
var GetData = localStrage.getItem(検索キー)
で登録した内容をGetDataに読むことができます。
ここでは詳しい使い方を説明する気はなかったのですが、私が学習した数年前
に比べて解説が少なくなっています。
(正確には解説はとても多くなっていますが、超むつかしいかまたは**講座的
な有償のものが多くなっている)
何事も実際に操作するのが重要です。LocalStoreageはサンプルのプログラム(Sa
mple1.html)に書き込み１個、読み込み１個を使っていますからSample1.htmlを
ダウンロードしてご自身のサイトにアップロードして動きを確認してください。
なお、動きを確認する方法は次回に解説します。