OPTION 7
▶1：メニュー画面を作成
ここではメニュー画面を作成し、別の画面とリンクさせる操作を行います。
▶2：メニュー画面の作成手順
▶3：売上管理メニュー画面 完成図
グラフ種類は、円グラフ、棒グラフ、折れ線グラフなどエクセルのグラフ種類ですべて作成できます。ここでは、売上合計一覧とグラフの両方を表示する画面にしましたが、グラフだけの画面でも作成できます。
▶4：手順1
❙ エクセルでメニュー画面を作成
【１】Login.plsのひな型ブックLogin.xlsmを開きます。
【2】新しいシートを追加しメニュー画面を作成します。
※ここでは下のようにします。
【3】赤枠の範囲を印刷範囲として設定します。
【4】ProWebサーバー画面が開きます。
【5】ブラウザで表示するための設定をします。
画面の上で右クリックし「XCuteナビゲーション」を選択、次に「ひな型ナビ」を
クリックします。
【6】「OK」をクリックします。
【7】次のメッセージも 「OK」をクリックします。
【8】次に、ブラウザでデータをやり取りするために必要なFOMタグを設定
します。画面の上で右クリックし「Xcuteナビゲーション」をクリック、「ひな型ナビ」を
クリックします。
【9】「OK」をクリックします。
【10】「OK」をクリックします。
【11】「OK」をクリックします。
❚ XCuteは、ExcelのHTML変換を利用しているため、Excelで作成した画面に入力フィールドやボタンなどの機能を追加するための「タグ差込」が必要です。
❚ 自動作成した画面には、この「タグ差込」も自動的に設定されていますが、シート追加で作成した場合には、このタグ差込がないため設定が必要になります。
❚「タグ差込」は、ひな型シートの印刷範囲の右上に「;htmltag」と「FORM」タグ、右下に「/FORM」タグが設定されます。
ブラウザでデータをやり取りする時にはこれらのタグが必要となります。
▶5：手順2
❙ ログイン画面と検索画面をリンク
【１】メニュー①～⑦ボタンから、それぞれの画面を表示するリンク・ボタン
を設定します。
まずはじめに①「売上データ表示」から設定します。①の赤枠を右クリックします。
【2】「XCuteナビゲーション」をクリックし、次に「リンク・ボタン」を
クリックします。
【3】「OK」をクリックします。
【4】各メニューにリンクボタンを設定し、ボタンをクリックした時の
動作設定をします。
【5】開発エリアに設定されたセルをクリックし、赤字に修正します。
="|TYPE=BUTTON|Style=width:180px;height:40px;|ONCLICK=location.href
='procgi.exe?P=Uriage&WriteReport=UriageList';"
これで①「売上データ表示」の動作設定が終了しました。
続いて②～⑦までに①と同様のリンクボタンの動作設定をしましょう。②～⑦の設定内容は以下となります。
②月別合計金額
="|TYPE=BUTTON|Style=width:180px;height:40px;|ONCLICK
=location.href='procgi.exe?P=Uriage&WriteReport=SUMCros';"
③グラフ表示
="|TYPE=BUTTON|Style=width:180px;height:40px;|ONCLICK
=location.href='procgi.exe?P=Uriage&WriteReport=UGurafu';"
④印刷
="|TYPE=BUTTON|Style=width:180px;height:40px;|ONCLICK
=location.href='procgi.exe?P=Uriage&&WriteReport=PrintMenu';"
⑤ダウンロード
="|TYPE=BUTTON|Style=width:180px;height:40px;|ONCLICK
=location.href='procgi.exe?P=Uriage&WriteSheet=DwonMenu';"
⑥アップロード
="|TYPE=BUTTON&|Style=width:180px;height:40px;|ONCLICK=
location.href='procgi.exe?P=Uriage&WriteSheet=UpMenu';"
⑦ログオフ
="|TYPE=BUTTON|Style=width:180px;height:40px;|ONCLICK
=location.href='procgi.exe?P=Login&WriteSheet=Login';"
▶6：手順３
手順２で、メニュー画面からそれぞれの画面を表示するリンク・ボタンの設定が終了しました。ここでは、リンク先の「売上データ検索」画面に設定したボタンをメニューに戻る設定やログオフする設定に修正します。
【1】Uriage.plsのひな型ブックUriage.xlsmを開き、ひな型シート
「UriageList」を開きます。
【2】メニュー画面に作成したリンクを、売上データ検索画面から削除します。
「左側の画面」と「右側の画面」の赤枠範囲を選択し、「ホーム」タブ→「すべてクリア」を
選択。設定内容をすべて削除します。
【3】次に「ログイン画面へ」のリンク設定をメニューへ戻る設定に
修正します。赤枠を選択し下記に修正します。
="|TYPE=BUTTON|ONCLICK=location.href='procgi.exe?
P=Login&WriteSheet=Menu';"
【4】続けて、リンクボタンのタイトル「前画面へ」を「メニューへ」に
修正します。
▶7：手順4
メニュー画面を作成する前は、それぞれの画面の「前画面へ」は、売上データ検索画面に戻る設定でした。ここでは、「前画面へ」をクリックしたらメニュー画面に戻る設定に修正します。
【1】「売上データダウンロード」画面のリンク設定を修正します。
ひな型シート「DownMenu」を開きます。
【2】画面右側の赤枠を選択し、リンク設定を下記に修正します。
="|TYPE=BUTTON|ONCLICK=location.href='procgi.exe?
P=Login&WriteSheet=Menu';"
【3】リンクボタンのタイトルを「メニューへ」に修正します。
【4】【1】～4-【3】の手順で、それぞれの画面のひな型シートを選択し、
「前画面へ」のリンクを「メニューへ」に修正します。
❚ それぞれの画面のひな型シート名
| ダウンロード画面 | ひな型シート | DownMenu |
|---|---|---|
| アップロード画面 | ひな型シート | UpMenu |
| グラフ画面 | ひな型シート | UGurafu |
| 印刷画面 | ひな型シート | PrintMenu |
| 月別合計金額画面 | ひな型シート | SUMCros |