2. jQuery Mobileで在庫数量の更新画面を作成
それではここから、jQuery Mobileを使用した今回のサンプルの解説に入っていきます。今回のサンプルではスマートフォンから部品在庫数量の更新情報をGAEサーバに送信し、Cloud SQLのトランザクション処理でMySQLの在庫数量を更新しています。従ってポイントとしては「スマートフォンからGAEクラウドへの更新情報送信」と「Cloud SQLでのトランザクション処理」の2点になりますが、最初にスマートフォンでの画面処理から見ていきます。
1. 基本情報の登録
図8はスマートフォン用に作成された入出庫管理のメニュー画面で、操作手順としては入出庫処理を行う前に、「基本情報設定画面」で入出庫担当者と処理を行う在庫場所の情報を登録し、そのあと「入出庫処理実行画面」で在庫情報の更新処理を行います。
図8のメニュー画面で「基本情報設定画面」のエリアをタッチすると、図9のような画面が表示され、倉庫担当者の、氏名、カードNo、倉庫ロケーションを入力・指定します。図ではプルダウンメニュー表示から倉庫ロケーションを選択しているところです。
基本情報の入力・設定後、「登録」ボタンのタッチで、クッキーに書き込まれます。できれば連載第2回で紹介したWeb Storageを使用したいところですが、サンプルで使用しているGalaxy S3ではサポートされておらず、また他のスマートフォンでもサポートが進んでいない状況なので、ここではクッキーを使用しています。
登録後、画面上部左の「< メニュー」のタッチで図8のメニュー画面に戻ります。
2．在庫情報の更新
次に、図8の画面で「入出庫処理実行画面」をタッチすると図11の入出庫管理画面が表示されます。図のように担当者名と倉庫ロケーションは「基本情報設定画面」で登録した内容が自動表示されます。
従って担当者は、入庫・出庫の指定および部品番号と数量の指定だけ行えばよく、必要な場合はコメントの入力を行います。以上の入力・指定後「在庫数量更新」ボタンのタッチで、入力情報がGAEクラウドに送信され、Cloud SQLによる在庫数量更新がトランザクション処理によって行われます。クラウド側での更新処理が成功すると、図12画面上部のようにステータスが表示されます。
