▼以下メニューをクリックしてください。

■基本開発手順での完成図になります
完成図は、検索画面(照会画面)と入力画面(伝票入力・修正画面)の
2つからの構成になります。

完成図がある程度イメージできたら、タブのステップ1、2、3、4
から手順に添って進めてみてください。

■ステップ1: エクセルで入力(伝票)画面をデザインします

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. ステップ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. このメッセージはステップ3で作成する検索画面の説明です
   「OK」をクリックします

クリックで拡大
 入力画面が作成されました。エクセル名には頭に【P_】が付きます。
 ※ここでは「P_Uriage.xlsm」となります

3-8. エクセルのデザイン「Uriage_Layout」は閉じます


4. 3で作成した入力画面の「送信」ボタンのリンク設定を修正します
クリックで拡大

 4-1. 赤枠セル「R6C8」を変更後の内容に修正します
   修正前: WriteSheet=Menu
   変更後: WriteSheet=UriageKensaku
※この修正は「送信ボタン」がクリックされた後の動作設定になります
「WriteSheet=UriageKensakuとは、送信ボタンがクリックされたら、この後のステップ3で作成する検索画面「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」、
    検索画面の「伝票番号」が表示される列番号「RC9」へ修正します

  ※「&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アプリが完成しました。
次は基本開発練習に挑戦してみましょう!練習問題へ