スライドタイトルなし

(1)

39

第３章

Webシステムと画面設計

■Web情報処理システム

情報処理とは

クライアント・サーバシステム

Web情報処理システム

■Webサーバの役割と設定

Baby Web Serverの設定

■入出力画面の設計とHTML

HTMLタグ

タグの意味と書法

文字の装飾

段落の整形

FORM

TEXT入力

RADIOボタン

CHECKボックス

SELECTメニュー

■JavaScriptとプログラミング

X + Y = Zを計算する

(2)

40

情報処理システム

■クライアント・サーバシステム：今日，一人一台のパソコンで文書作成やデータ分析を行いつつ， LAN (Local Area Network)でサーバシステムに接続して，サーバのプログラムを使って業務を行っています．このような情報処理形態をクライアント・サーバシステム(Client/Server System)と呼びます．1980年代前半までは汎用コンピュータに専用端末を接続して，すべて汎用コンピュータが処理する中央集中型システムが主流でした．コンピュータのダウンサイジング(小型高性能化)によって，高性能なワークステーション（WS)がサーバとなり，パソコン（PC)がクライアントとして，それらをLAN で接続して役割分担による処理形態に変わってきたのです． ※さらに，最近ではクラウド・コンピュータシステムへと発展しています． ■インターネットの到来：LANにもいくつかの通信方式(プロトコル)がありますが，現在では，イーサネット(Ethernet))が標準となり，さらにTCP/IPプロトコルが考案されインターネットとして世界のLAN を接続しました．スイスのCERN研究所で開発されたWebブラウザとWebサーバによるによる新たな情報システムが考案され，1990年代にインターネットが商用利用に開放されると急速に普及しました． ■Web情報処理システム：当初はHTMLで記述されたファイルを，Webサーバからダウンロードして， Webブラウザで表示するだけでしたが，Webサーバでプログラムを実行して，ユーザの要求に応じた処理結果を送り返す情報処理システムへと発展しました．データベースシステムもデータベースサーバプログラム（高価）とクライアントプログラム（廉価でもパソコンごとに必要）が連携して動作する形態から，Webブラウザをクライアントプログラム（パソコン標準装備），そしてWebサーバとデータベースが連携して高度な処理を行うWeb情報処理システムへと進展してきました．

■マイクロソフト：WebサーバとしてIIS(internet Information Server)を標準装備し，さらに ASP(Active Server Page)とODBC(Open DataBase Connectivity)を開発して，良くも悪くもデータベースを中核にしたWeb情報処理システムをリードしました．DELLはこの方式を採用しました．

専用クライアント

（専用ソフトが必要）

Webブラウザ

（標準装備）

情報系システム

Webサーバ

データベースサーバ

連携

(ODBC)

基幹系システム

INTERNET

Fire Wall

(3)

41

情報処理システムの変遷は理解できましたか？特に，クライアント・サーバシステムにおけるWeb情報処理システムの特徴を理解してください．つまり，クライアント（PC)はWebブラウザがあればよく，サーバはWebサーバとプログラム開発環境，そしてデータベースがあればよいのです．エンドユーザが利用するWebブラウザは無料というコストメリットだけでなく「使い慣れたアプリケーション」というメリットもあります．→導入教育が簡単になるのです．一方，WebサーバもWindows ServerならばIISが利用でき，LinuxならばApacheがフリーソフトウェアとしてあります．データベースもMySQLなどフリーソフトウェアがあり，低コストのシステムを構築することができます．開発環境もASPに限らずPHPなどがフリーで使えます．本講義（データベースシステムⅠ）をマスターすることで， 1. Webサーバの仕組みと動作を理解する 2. Webブラウザでデータの入出力を行う画面を設計する 3. Webサーバで実行するプログラムを開発することができるようになります．【閑話休題】以前，総務省と日立製作所，凸版印刷が彦根で携帯電話を使ったユビキタスの実証実験を行った時，携帯電話の貸出管理をどうするかが問題となりました．つまりA地点で貸出した携帯電話はB地点で返却されます（その逆もある）．その状態の把握と携帯電話の移動配備をどうするかが問題になったのです．ゼミ生がA,B地点でインターネットが使えるパソコンを準備して，貸出状況管理システムを作りました．データベースもプログラムも全く知らない彼でしたが，本講義のプリントを参考にして，クリック操作だけの非常に便利なシステムを開発しました．宇治市での実験でも利用され，日立製作所による実験報告書にも記載されました．この技術を知っていることで，いろいろな場面においてソリューションを提案できます．

Web情報処理システムの例

Webサーバ

携帯電話貸出管理システム

(4)

42 計算

データ

加工

蓄積

Data

入力・出力

画面設計

HTML

JavaScript

_Database

_File

Webサーバ

コンピュータ

クライアント

コンピュータ

クライアント

コンピュータ

Web based Client /Server System

入力・出力

画面設計

HTML

JavaScript

前ページで述べたように，Web情報処理システムでは， 1. Webサーバの仕組みと動作を理解する 2. Webブラウザでデータの入出力を行う画面を設計する 3. Webサーバで実行するプログラムを開発することが要求されます．まず，情報処理におけるデータ（情報）の流れを下図で理解しましょう． 1. 左右のエンドユーザがクライアントコンピュータからデータを入力(input)する． 2. そのデータはサーバに送信される．※HTTPプロトコルという仕組みで送られる． 3. サーバはデータを受信して，計算・加工したり，データベースやファイルを利用した処理をする． 4. 結果をクライアントコンピュータに送信する． ※同じくHTTPプロトコルという仕組みで送られる． 5. エンドユーザは情報を得る．大事なことは「データ」が「情報」となってリターンすることです．そうでなければ情報処理にはなりません．それはともかくとして，本章では以下のことを学習しましょう． 1. Webサーバを構築する． 2. Webブラウザでデータを入力できるようにするためのHTMLを理解する． 3. Webブラウザに情報を表示するためのHTMLを理解する， 4. ついでにJavaScriptでプログラミングの勘所を理解する．

データから情報へ

Information

Data

Information

(5)

①

43

本講義では，Micro Soft社製IIS互換のBaby Web Server(free software)を利用します．以下の手順でWebサーバを構築しましょう．

1. Pablo Software Solutions(http://Web.pablosoftwaresolutions.com/)にアクセス． 2. トップページを一通り読み，"Downloads"をクリック（①）．

3. "Baby Web Server 2.7.2"をクリック．

4. "Download Baby Web Server 2.7.2"をクリックしてダウンロードする． 5. 圧縮されているので展開する．"babyweb.exe"がWebサーバプログラムである． 6. "babyweb.exe"をダブルクリックして起動する．

"Web Server Started ……"と表示されればOK!

7. Webサーバのホームディレクトリを設定するために，"Settings"をクリック（②）． "C:¥WebPages"が標準になっているが，適宜変更する．大学では"X:¥WebPages"とする． 8. このWeb ServerへのアクセスURL 個人のローカルなPCのとき→http://localhost/index.html 第5演習室のPCのとき→http://hi-ipc-5***.integacc.shiga-u.ac.jp/index.html ***はディスプレイに表示されている

Webサーバの構築

②

◼Default Page の意味を理解しよう． ※Default Pageはホームディレクトリとも言う。 Web Serverはこのディレクトリ内に要求された HTMLファイルなどがあるものとみなして探しに行く。漢字のファイル名や漢字のタグ名は処理できないので注意しよう．例：HTMLファイル， ASPファイル，画像ファイル

(6)

<HTML>  <HEAD> <TITLE>BMIの計算</TITLE>  <SCRIPT Language="JavaScript"> function f_bmi( hikisu ) {

： } </SCRIPT> </HEAD>  <BODY> <CENTER> <FORM Name="bmi_window"> <TABLE Border="1" BGColor="pink">

<CAPTION>BMIの計算</CAPTION> ： </TABLE> </FORM> </CENTER> </BODY> </HTML>

■アクセスとURL

(Universal Resource Location)

44 演習内容

メタボで知られるようになったBMI(Body Mass Index)を計算する例題を通してHTMLの基本タグからJavaScriptの初歩を演習しましょう．参考→http://taniac.shiga-u.jp/Example/bmi/bmi07.html 本講義全体を通して使用するHTMLタグを以下のように整理して理解してください． □HTMLの構造定義：<HEAD>，<BODY> □文字の装飾：<H1>, <H2>, <FONT …> □段落の整形： <BR> , <HR> , <CENTER> □画像表示：<IMG SRC= …> □表の作成：<TABLE> □リンク：<A HREF=…> □データ入力：<FORM>

✓HTML(Hyper Text Markup Language)はハイパーテキスト（テキストあるいは画像や音声データを相互に関連づけた一つのディジタル文書のこと）を整形する記号の集まりで，一般にHTMLタグと呼ばれる． ✓タグは<HTML>,<FONT SIZE=…>のように< >で囲んで区別する．また，タグの有効範囲を示すために，範囲の終わりには</HTML>,</FONT>のように対応するタグに" / "を付けた終了タグを記述する． ✓「」で囲まれた文書はコメントとなり実際には表示されない．コメントは複数行にまたがってもよい．次の例のように記述内容を説明することで，理解しやすくなる．

■HTMLタグ記述のきまり

HTMLファイルはWebサーバに置き，Webブラウザで表示する． ① 前ページのSettingsで指定した"Web Pages"フォルダに HTMLファイルを保存する． →例「bmi.html」 ② Webブラウザでアクセスする． →http://localhost/bmi07.html →http://hi-ipc-5***.integacc.shiga-u.ac.jp/bmi07.html

■HTMLの基本構造

_BMI07.html ヘッダ部ボディ部文章全体

(7)

45 BMI

-1-順を追って画面を作っていきましょう． Webpagesフォルダ内にbmiフォルダを作成して，ここへbmi関連のHTMLファイルを保存することにしましょう．第1段階は"bmi01.html"とします．字下げ，改行，注釈を入れて，テキスト構造を見やすくなるようにするとよいですね． <HTML>  <HEAD> <TITLE>BMIの計算</TITLE> </HEAD>   <BODY> <H1>BMのI計算</H1> <H2>データ入力</H2> 身長(cm)：<BR> 体重(kg) ：<BR> 性別： <P> 入力したら「計算」ボタンを押して下さい．結果が表示されます． </P> </BODY>  </HTML>

ポイント：

1. 実行には，次のようにURLを打ち込む．ただし，Webサーバがスタートしていること． http://hi-ipc-5***.integacc.shiga-u.ac.jp/bmi/bmi01.html ***は利用しているPCのディスプレイに書いてある番号を入力する． 2. テキストファイルでは，半角空白で字下げをしたが，結果には反映されない． 3. <H1>BMIの計算</H1> <Hn>は見出しを意味する．<H1>から<H6>まである．<H1>は大見出し． <H1>と<H2>では図のように文字サイズも異なる． 4. <BR>は改行を行う．→Breakの略．リターンキーによるテキストファイルでの改行は反映されない． 5. <P>から</P>は段落を表す．→Paragraphの略． 6. <!– から -->は注釈で，表示されない．説明書きである． 7. 計算ボタンはまだない． bmi01.html

(8)

<HTML>  <HEAD> <TITLE>BMIの計算</TITLE> </HEAD>   <BODY> <H1>BMIの計算</H1> <H2>データ入力</H2> <FORM Name="BMI_Keisan">

身長(cm)：<INPUT Type="text" Name="height" Size="8"><BR> 体重(Kg)： <INPUT Type="password" Name="weight" Size="8">(<BR> 性別：<INPUT Type="radio" Name="sex" Value="男">男

入力したら「計算」ボタンを押して下さい．結果が表示されます． </P>

46

46 BMI

-2-第2段階は"bmi02.html"とします．身長，体重，性別のデータ入力枠を作成してみましょう． <FORM> <INPUT TYPE=…>タグをマスターしよう．

ポイント：

データ入力画面は<FORM>タグで作成する．入力に応じたタグの使い方をマスターしよう． ① 身長：<INPUT Type="TEXT" Name="height" Size="8">

最大8桁(Size)の文字列(TEXT)を入力．このデータの名札(Name)は"height"とする．身長が175cmと入力されると，"height=175"と記録される．

② 体重：<INPUT Type="password" Name="weight" Size="8">

最大8桁(Size)の非表示文字(password)を入力．このデータの名札(Name)は"weight"とする．体重が72Kgと入力されると，"weight=72"と記録される．

Passwordタイプは，画面表示が●●とマスクされる．本来はパスワードのような見られたくない文字列を入力するためのものである．

③ 性別：<INPUT Type="radio" Name="sex" Value="男">男 <INPUT Type="radio" Name="sex" Value="女">女<BR>

図のように「男」「女」どちらかの「ラジオボタン」をマウスで選択する方法である．男が選択された場合は，"sex=男"と記録される．

④ <INPUT Type="button" Name="keisan" Value="計算" > 図のように「計算」ボタンが作成される．

⑤ <INPUT Type="reset" Name="reset" Value="リセット" > リセットボタンは，入力されたデータを一括消去するだけ． bmi02.html

← text

← password

← radio

Baby Web Serverでは漢字で"身長"と記述できない。 ※NAMEタグの漢字は処理できない！

(9)

47

<HTML>  <HEAD> <TITLE>BMIの計算</TITLE> </HEAD>   <BODY> <H1>BMIの計算</H1> <H2>データ入力</H2> <FORM Name="BMI_Keisan">

身長(cm)：<INPUT Type="text" Name="height Size="8""><BR> 体重(Kg)： <INPUT Type="password" Name="weight" Size="8">(<BR> 性別：<INPUT Type="checkbox" Name="sex" Value="男">男

入力したら「計算」ボタンを押して下さい．結果が表示されます． </P>

47

47 BMI

-3-第3段階は"bmi03.html"とします． <INPUT TYPE="checkbox">をマスターしよう．

ポイント：

データ入力画面は<FORM>タグで作成する．入力に応じたタグの使い方をマスターしよう． ① 性別：<INPUT Type="checkbox" Name="sex" Value="男">男

図のように「男」「女」の「チェックボックス」をマウスで選択する方法である．男が選択された場合は，"sex=男"と記録される．しかし，チェックボックスは両方にチェックを入れることができる．したがって，項目を複数選択する場合に利用すべきである． ②FORMタグによってデータが送信されるイメージを理解しよう。次のようにパッケージの名前と内容物でイメージするとよい。１．パッケージに一つのデータがある場合 2.パッケージに2つ以上のデータがある場合

← text

← password

← checkbox

bmi03.html

パッケージの名前（sex）

保存されたデータ（男）

パッケージの名前（sex）

保存されたデータ（男,女）

(10)

48

<HTML>  <HEAD> <TITLE>BMIの計算</TITLE> </HEAD>  <BODY> <H1>BMIの計算</H1> <H2>データ入力</H2> <FORM Name="BMI_Keisan">

身長(cm)：<INPUT Type="text" Name="height" Size="8"><BR> 体重(Kg)：<INPUT Type="password" Name="weight" Size="8"><BR> 性別： <SELECT Name="sex"> <Option Value="男">男</Option> <Option Value="女">女</Option> </SELECT> <P> 入力したら「計算」ボタンを押して下さい．結果が表示されます． </P>

48

48 BMI

-4-ポイント：

① 性別： <SELECT Name="sex"> <Option Value="男">男</Option> <Option Value="女">女</Option> </SELECT> Optionで設定されたデータがプルダウンメニュで表示される．同時に複数選ぶように設定することもできる．

→<SELECT Name="sex" Multiple>

注意：<Option>男</Option>のように"Value"句を省略している例があるが省略しないこと！考察：右図はYahooの路線を指定する画面である．タグがどのように利用されているか確認してみよう．第4段階は"bmi04.html"とします．プルダウンメニューから選択する <SELECT>をマスターしましょう．

← text

← password

← SELECT

bmi04.html

(11)

49

49 BMI

-5-第5段階は"bmi05.html"とします． TABLEタグを使って表示をきれいにしましょう． <TABLE>をマスターしましょう． <HTML> <HEAD> <TITLE>BMIの計算</TITLE> </HEAD> <BODY> <FORM Name="BMI_Keisan"> <TABLE Border="1"> <CAPTION>BMIの計算</CAPTION> <TR> <TD ColSpan="2" Align="center">基礎データ</TD> </TR> <TR> <TD Align="center">身長(cm)</TD>

<TR>

<TD><INPUT Type="password" Name="weight" Size="5"></TD> </TR> <TR> <TD Align="center">性別</TD> <TD> <SELECT Name="sex"> <Option Value="男">男</Option> <Option Value="女">女</Option> </SELECT> </TD> </TR> </TABLE> <P> 入力したら「計算」ボタンを押して下さい．<BR> 結果が表示されます． </P>

← CAPTION

← ColSpan

← TR , TD

bmi05.html ポイントちょっと難しく見えますが，表の構造（外枠，行，列）とタグを対応づけて理解しよう． ① <TABLE> </TABLE>で一つのテーブル枠を指定し， ② <TR> </TR>で行を示し →TR : Table Rowの略 ③ <TD> </TD>で列の項目を表す →TD : Table Dataの略 ④ <CAPTION></CAPTION>は表見出し →Caption : 表題，タイトル ⑤ <TH>というのがあり，列見出しに使う． →TH : Table Headerの略

⑥ <TABLE Border=外枠の太さ CellSpacing=罫線の太さ> ：太さはピクセル数で指定する ⑦ <TR Align={left , center , right} VAlign={top , middle , bottom}>：{ }内のどれかを指定する ⑧ <TD Align={同上} VAlign={同上} Bgcolor=背景色>

ColSpan=結合する列のセル数 RowSPan=結合する行のセル数> ：ちょっと複雑な表組みができる行

(12)

50 BMI

-6-第6段階は"bmi06.html"とします．これまでは，データを入力して計算ボタンをクリックしても計算されませんでした．計算するにはプログラムが必要です． JavaScriptでプログラムを作ってみましょう．次のX+Y=Zという例で仕組みを理解しましょう． bmi06.html <HTML> <HEAD> <TITLE>JavaScript</TITLE> <SCRIPT Language="JavaScript"> function keisan( Hikisu ){

Hikisu.Z.value=parseInt(Hikisu.X.value) + parseInt(Hikisu.Y.value); } </SCRIPT> </HEAD> <BODY> JavaScriptの腕試し <FORM Name="X+Y=Z">

<Input Type="text" Name="X" Size="5"> +

<Input Type="text" Name="Y" Size="5"> =

</FORM> </BODY> </HTML>

ポイントプログラム（関数）を実行する方法とデータの受け渡しの仕組みを理解しよう． 1. プログラムは[計算]というボタンがクリックされた時に動作する．

< Input Type="button" Value="計算" onClick="keisan(this.form)">

"onClick"をJavaScriptのイベントハンドラといい，[計算]ボタンがクリックされると "keisan" と いう関数が実行される．カッコ内の"this.form"を引数といい，この<FORM>内の"Name"で指定されたラベルとデータが引き渡される．この例では，「X=10,Y=20」となる．実はHTMLの"<FORM>"タグはJavaScriptのFormオブジェクトとみなされる． 2. <SCRIPT Language="JavaScript">の書き方も上の例を参考にすること． <!- - ... - ->（コメント）で囲むこともあるが，JavaScriptが使えないWebブラウザのためである．本テキストでは，そのようなブラウザは少数であることと，見やすくするために省いた． 3. 関数は実行される行より前になければならない．上の例では<HEAD>部に書いている．書き方は"function"で始まり，関数名と"( )"内に引数を書く． "{" から "}" の間にスクリプト(プログラム)を書く． function keisan( Hikisu ) {

Hikisu.Z.value=parseInt(Hikisu.X.value) + parseInt(Hikisu.Y.value) } "Hikisu.X.value"は受け取った引数（オブジェクト）の中からラベル（プロパティ）Xを探し出し，その値(value)を取り出す．このままでは文字列なので計算ができるように" parseInt( )"関数で数値データに変換する．XとY を足し算して，その結果を"Z"に代入する． 関数は必要な数だけ定義ができる． Hikisu Z=30 Hikisu X=10 Y=20 Z=? this.form X=10 Y=20 Z=? this.form Z=30 行き帰り

(13)

51

51 BMI

-7-最終段階として，BMIを計算してメタボ評価をしてみましょう． "bmi05.html" を拡張して， "bmi07.html"とします．行数（命令ステップ）が多いのでヘッダ部とボディ部に分けて表示します．穴が開いている部分は各自で考えましょう． BMI=体重(Kg)÷身長(m)2 計算は簡単ですが，メタボ評価するためにif命令を使います．プログラムの３大構造の一つです． ※３大構造：連接，判断，反復 bmi07.html（ヘッダ部） <HTML> <HEAD> <TITLE>BM Iの計算</TITLE> <SCRIPT Language="JavaScript"> function f_bmi(hikisu){ //受け取ったデータの前処理 v_height = parseInt(hikisu.height.value ) / ; v_weight = parseInt(hikisu.weight.value); v_bmi = / Math.pow( , 2); // 性別ごとにBMIに応じた判定をする if( hikisu. .value == "男" ) {

if( v_bmi < 20 ) {

v_msg="やせぎみです．もっと食べても大丈夫です．"; }

else if( v_bmi < 25 ) {

v_msg="いい感じです．BMIが22のとき、最も病気の少ない状態と言われていてます．"; }

v_msg= "ちょっと肥満です．高血圧、高中性脂肪血症になりやすいので気をつけましょう！"; } else{ v_msg= "高肥満です．食生活の改善，適度な運動をしましょう！"; } } else{ if( v_bmi < 18.5 ) { v_msg="やせぎみです．過度なダイエットに注意しましょう．"; }

v_msg="いい感じです．太り気味と思っているでしょうが，最も病気の少ない状態です．"; }

else if( v_bmi < 30 ){

v_msg="軽度の肥満です．高血圧、高中性脂肪血症になりやすいので気をつけましょう！"; } else{ v_msg ="高肥満です．食生活の改善，適度な運動をしましょう！"; } } // 判定結果を出力フォームに返す hikisu.bmi.value = v_bmi; hikisu.advice.value = v_msg; } </SCRIPT> </HEAD> 原始的デバッグ：次のステートメントを挿入して実行位置を表示する。 document.write("ここは実行したよ！<BR>");

(14)

52

bmi07.html（ボディ部） <BODY>

<FORM Name="bmi_window"> <TABLE Border="1"> <CAPTION>BMIの計算</CAPTION> <TR> <TD ColSpan="2" Align="center">基礎データ</TD> </TR> <TR> <TD Align="center">身長(cm)</TD>

<TR>

<TD><INPUT Type="password" Name="weight" Size="5"></TD> </TR> <TR> <TD Align="center">性別</TD> <TD> <SELECT Name="sex"> <Option Value="男">男</Option> <Option Value="女">女</Option> </SELECT> </TD> </TR> </TABLE> <P> 入力したら「計算」ボタンを押して下さい．<BR> 結果が表示されます． </P>

<CAPTION>BMI判定結果</CAPTION> <TR>

<TR>

<TD><TEXTAREA Rows="5" Cols="40" Name="advice"></TEXTAREA></TD> </TR> </TABLE> </FORM> </BODY> </HTML> 1. ヘッダ部のスクリプトの意味はわかりましたか? 2. //で始まる行は注釈です． 3. If(条件式) { 真の時の処理 } else { 偽の時の処理 } が基本形ですが，さらに条件分岐しているため複雑に見えますね．論理構造を整理してください．

BMI

-7-【課題】このようなデザインにしてみよう！ <CENTER> <TABLE BGColor="pink"> <HR Width=200> <TEXTAREA>は任意の行と列の窓枠を作るときに使います．ここでは， Rows=5で5行， Cols=40で40文字と指定しています

スライド タイトルなし

39

第３章

Webシステムと画面設計

■Web情報処理システム

情報処理とは

クライアント・サーバシステム

Web情報処理システム

■Webサーバの役割と設定

Baby Web Serverの設定

■入出力画面の設計とHTML

HTMLタグ

タグの意味と書法

文字の装飾

段落の整形

FORM

TEXT入力

RADIOボタン

CHECKボックス

SELECTメニュー

■JavaScriptとプログラミング

X + Y = Zを計算する

40

情報処理システム

専用クライアント

（専用ソフトが必要）

Webブラウザ

（標準装備）

情報系システム

Webサーバ

データベースサーバ

連携

(ODBC)

基幹系システム

INTERNET

Fire Wall

41

Web情報処理システムの例

Webサーバ

携帯電話貸出管理システム

42

計算

データ

加工

蓄積

Data

入力・出力

画面設計

HTML

JavaScript

Database

File

Webサーバ

コンピュータ

クライアント

コンピュータ

クライアント

コンピュータ

Web based Client /Server System

入力・出力

画面設計

HTML

JavaScript

データから情報へ

Information

Data

Information

①

43

Webサーバの構築

②

■アクセスとURL

(Universal Resource Location)

44

演習内容

■HTMLタグ記述のきまり

■HTMLの基本構造

45

BMI

ポイント：

スライドタイトルなし

_Database

_File