クラウドシートⅡ
基本開発の手順
▼以下メニューをクリックしてください。
■基本開発手順での完成図になります
完成図は、検索画面(照会画面)と入力画面(伝票入力・修正画面)の
２つからの構成になります。
完成図がある程度イメージできたら、タブのステップ１、２、３、４
から手順に添って進めてみてください。
■ステップ１: エクセルで入力（伝票）画面をデザインします
1. 「UriFile」新規フォルダを作成します
※作成するWebアプリ一式を保存するためのフォルダです
2. エクセルで売上伝票のデザインを作成します
※赤枠1列目(A列)は、開発エリアのため空けてデザインします
図を参考に売上伝票を作成しましょう
3. シート名を半角英数で付けます
Sheet1 を「 Uriage 」にします
4. 各入力項目に入力規則を付けます
※入力規則を付けたセルがデータベースのフィールドとなります
5. 伝票番号①に入力規則を設定します
5-1. エクセルの赤枠①セルをクリックします
5-2. 青枠「データ」タブ をクリック、次に赤枠「データの入力規則」をクリックします
5-3. 図を参照して「データの入力規則」を入力します
5-4. 入力が終了したら青枠「OK」をクリックします
6. 売上日付②項目に入力規則を設定します
6-1. エクセルの赤枠②セルをクリックします
6-2. 青枠「データ」タブ をクリック、次に赤枠「データの入力規則」をクリックします
6-3. 図を参照して「データの入力規則」を入力します
※日付は「エラーメッセージ」タブに「calender」の入力規則をつけることで、
このセルをクリックした時にカレンダーのポップアップ画面を表示させることができます
6-4. 入力が終了したら青枠「OK」をクリックします
7. 商品③項目に入力規則を設定します
7-1. エクセルの赤枠③セルをクリックします
7-2. 青枠「データ」タブ をクリック、次に赤枠「データの入力規則」をクリックします
7-3. 図を参照して「データの入力規則」を入力します
7-4. 入力が終了したら青枠「OK」をクリックします
8. 売上金額⑧項目に入力規則を設定します
8-1. エクセルの赤枠④セルをクリックします
8-2. 青枠の「データ」タブ をクリック、次に赤枠「データの入力規則」をクリックします
8-3.図を参照して「データの入力規則」を入力します
8-4.入力が終了したら青枠「OK」をクリックします
9.入力規則の設定が終了しました。エクセルに名前を付けて保存します
保存したらエクセルは閉じます
※ここでは名前を「Uriage_Layout」とします
次はステップ2へ進みましょう！
■ステップ2：エクセルのデザインから入力画面を自動作成します
※ここで入力画面とデータベースを自動作成していきます
1. プロジェクトを作成します
1-1.「Xcute」 を起動します
1-2. 赤枠「ファイル」をクリックします
1-3. メニューから赤枠「PLSファイル新規作成」をクリックします
1-4. 開いたウィンドウからプロジェクトを保存するフォルダを開きます
※ここでは「UriFile」フォルダを開きます
1-5. ファイル名にプロジェクト名 [uriage] を半角英数で入力します
1-6. 赤枠「開く」をクリックします
1-7. ひな型ブックとPLSパネルが作成されます
1-8. メッセージ表示で、赤枠「OK」をクリックします
2. ステップ1で作成したエクセルを開きます
2-1. ステップ１で作成したエクセルの売上伝票を開きます
2-2. 開いたひな形ブックの赤枠「ファイル」をクリックして
次に「開く」を クリック、「参照」をクリックします
※デザインしたエクセルを開く場合、1-7で作成した「ひな型ブック」から開きます
2-3. エクセルを保存したフォルダからエクセルのデザインを開きます
※ここでは「UriFile」フォルダから「Uriage_Layout.xls」を開きます
2-4.「Uriage_Layout.xlsx」が表示されます
3. 入力画面とデータベースを自動作成します
3-1.「Uriage_Layout.xlsx」から入力画面を自動作成します
※ここで自動作成ツールを使用し入力画面とDBを自動作成します
3-2. 赤枠「レイアウト」の上で右クリックします
※右クリックはレイアウトの上であればどこでもOKです
3-3. 表示されたメニューから「XCuteナビゲーション」をクリックします
3-4. 続いて表示されたメニューから赤枠「ExcelOpen_Help」をクリックします
3-5. メッセージ表示で「OK」をクリックします
※このOKをクリックで入力画面の自動作成が開始されます
3-6. メッセージ表示で「自動作成」をクリックします
※この自動作成をクリックでAccessのデータベースが自動作成されます
3-7. このメッセージはステップ３で作成する検索画面の説明です
「OK」をクリックします
入力画面が作成されました。エクセル名には頭に【P_】が付きます。
※ここでは「P_Uriage.xlsm」となります
3-8. エクセルのデザイン「Uriage_Layout」は閉じます
4. 3で作成した入力画面の「送信」ボタンのリンク設定を修正します
4-1. 赤枠セル「R6C8」を変更後の内容に修正します
修正前： WriteSheet=Menu
変更後： WriteSheet=UriageKensaku
※この修正は「送信ボタン」がクリックされた後の動作設定になります
「WriteSheet=UriageKensakuとは、送信ボタンがクリックされたら、この後のステップ３で作成する検索画面「UriageKensaku」画面をブラウザに表示する」の動作になります。
4-2. 青枠セル「R2C9」を変更後の内容に修正します
修正前： ="FilterMyKey="&R10C8
変更後： ="Filter伝票番号="&R16C9
※この修正は重複登録防止のための「ユニークキー」設定になります。
自動作成の入力画面は、フィールド名「MyKey」、入力セル位置「R10C8」で設定されます。
「MyKey」を実際のデータベースのフィールド名に修正します。ここではフィールド名を「伝票番号」とし、伝票番号が入力されるセルの位置「R16C9」に修正します
4-3. PLSパネルの【キー指定】を修正します。
PLSパネルの赤枠をクリックしてプルダウンから『キー(必須)』を選択します
4-4. エクセルを上書き保存しておきます
次はステップ3へ進みましょう！
■ステップ3：データ検索画面を自動作成する
1. 検索画面用のデータベースを選択します
1-1. PLSパネルの赤枠で右クリックします。 ※赤枠あたりならどこを右クリックしてもOKです
1-2. 表示された赤枠「レポート新規作成」をクリックします
1-3. 新規レポート名に「UriageKensaku」と入力し、「新規登録」をクリックします
※「レポート」は入力出力画面とそれを行うため読み書きするDBを接続しているものです
1-4. レポート「UriageKensaku」が追加されます
1-5. レポート「UriageKensaku」を右クリックをします
1-6. 表示されたメニューから「テーブル追加」の上で右クリックをします
1-7. 使用するデータベース「Access(*mdb)」をクリックし、「次へ」をクリックします
1-8. データベース 「UriageDB.mdb」をクリックし、「開く」をクリックします
1-9. テーブル名から「Uriage」をクリックし、「表選択」をクリックします
1-10. テーブル「Uriage」が追加されます
※検索画面に使用するDBを「Uriage」と設定したことになります
2. ここから自動生成ツールで検索画面を自動作成します
2-1. テーブル「Uriage」をクリックします
2-2. 赤枠「ツール」をクリックします
2-3. メニューから赤枠「検索ページor PopUpListの自動作成」をクリックします
2-4. この画面が表示されたら「実行」をクリックします
2-5. このメッセージが表示されたら赤枠「OK」をクリックします
2-6. 次のメッセージが表示されたら赤枠「OK」をクリックします
2-7. 検索画面が自動作成されます
3. 自動作成された検索画面と入力画面を呼び出すためのリンク設定を修正します
3-1. 自動作成された検索画面の右側にリンク設定のされた＜Aタグ＞がありますこの内容を赤字に修正します
※ここでは入力画面の「伝票番号」を入力するセル位置「R16C9」、
検索画面の「伝票番号」が表示される列番号「RＣ9」へ修正します
※「&Set_R16C9="&RC9&"」のSetとはセル：R16C9に列番号：9のデータをセットする です
※Aタグの内容「WriteReport=Uriage&&Set_R16C9="&RC9&"」は、
検索画面のクリックした行の伝票番号を入力画面UriageのセルR16C9にセットする
ということです
3-2. 修正が終了したら、上書き保存をします
次はステップ4へ進みましょう！
■ステップ4：動作確認を確認します
1. 作成したWEBアプリの動作確認をします
1-1. 作成した検索画面の上で右クリックします。※右クリックは検索画面のどこでしてもOKです
1-2. 表示されたメニューから「XCuteナビゲーション」をクリックします
1-3. 次に表示されたメニューから「Excelシートをブラウザで開く」をクリックします
1-4. 検索画面がブラウザで開かれます
1-5. 次に入力画面を表示し、データを入力してみます
赤枠「HTML」をクリックします
1-6. 入力画面がブラウザで表示されます
1-7. 赤枠「伝票番号」「売上日」「商品」「売上金額」を入力します
1-8. 次に赤枠「送信」をクリックして、入力したデータを登録します
1-9. データ登録が終了すると検索画面に戻ります
入力データを確認するため赤枠「検索」をクリックします
1-10. 入力したデータが表示されます
2. 検索画面のボタンのスタイルを修正します
※ここからは完成したWEBアプリのデザインを修正し、使いやすくしてみましょう
2-1. 赤枠「検索」ボタンをクリックし、塗りつぶしの色を「塗りつぶしなし」にします
※この操作はエクセルの操作です
2-2. 検索ボタンの右側の赤枠のセル(ここではR12C16)をクリックします
2-3. 赤字箇所を追加します
2-4. 検索ボタンのスタイルと文字サイズが修正されました
3. 検索画面のデザインを見やすい書式へ修正します
2-5. エクセル操作でタイトルをつける・項目を中央揃え・背景を修正します
2-6. 次に「新規登録」の表示をわかりやすく修正します
2-7. 新規登録の表示はセルR11C16にあります。
セルR11C16をクリックし、青字は削除、赤字は「新規登録」に修正します
2-8. これでステップ4は終了です。この様な感じになりましたか？
※デザインはエクセルの書式を修正するだけです。また画像を貼り付けることもできます
お疲れ様でした。WEBアプリが完成しました。
次は基本開発練習に挑戦してみましょう！