情報資源組織演習B:

情 報 資 源 組 織 演 習 A( 書 誌 の 作 成 ) 第 12 回 書 誌 データ 管 理 検 索 システムの 構 築 2013 年 度 跡 見 学 園 女 子 大 学 文 学 部 准 教 授 福 田 博 同

書 誌 データ 管 理 検 索 システムの 構 築 第 9 回 で 書 誌 データベース 構 築 は 理 解 Web 検 索 では 以 下 の 様 な 方 法 が 取 られる A B C D 1 ID タイトルと 責 任 表 示 著 者 1 著 者 2 2 42001 海 と 文 明 / 小 泉 格, 田 中 耕 司 編 小 泉, 格 田 中, 耕 司 ブラウザとJavaScript 等 でのWeb 対 話 3 42002 データベース データベース 管 理 システム Java 等 と 全 文 検 索 システム

検 索 システムの 構 築 一 般 的 なWebデータベース 検 索 システム サーバを 用 意 例 : UNIX, LINUX, Windows データベースソフト(DBMS)を 用 意 例 : MySQL, SQLite, Access スクリプト 等 を 用 意 + 上 記 のDBMS 例 :Apache + PHP, Perl + SQLite, Ruby, Ecrips + DBViewer プラグイン + SQLite, SQL Server + ODBC + Access, FileMaker これらはインストール 編 集 等 高 度 な 技 術 が 必 要 ( 演 習 2 単 位 以 上 ) そこで

検 索 システムの 構 築 ( 静 的 データベース) ExcelでXHTMLデータ 出 力 + Google 検 索 窓 埋 め 込 み で データベース 的 扱 いに 慣 れる 方 法 : 1. HTMLファイルにGoogle 検 索 窓 埋 め 込 む (ちゃっかり 型 ) 2. Excelでデータベース 的 データ 処 理 を 行 う 3. ExcelからHTMLで 保 存 または Excel VBA でHTMLファイル 出 力 などがある

HTMLファイルに 演 習 下 準 備 :フォルダを 作 る 図 解 教 材 :フォルダを 作 る をダウンロードし て 理 解 しよう( 図 ではデ スクトップへ 作 る 方 法 を 示 している) 自 分 のIDの ドキュメン ト を 開 き フォルダを 作 る( 右 クリックし 新 規 作 成 フォルダ 名 前 を 変 更 ( 例 :f 福 田 情 報 資 源 組 織 演 習 )

下 準 備 :フォルダ 作 成 とEditor 起 動 MicrosoftのEditorであ るメモ 帳 を 開 いてお く 方 法 : 1. ウィンドウズキー 2. すべてのプログラ ム 3. アクセサリ 4. メモ 帳 :クリック ショートカットキー Windows 7 以 降 : Start メモ 帳 Enter

アクセシビリティ 対 応 XHTMLファイル 作 成 アクセシビリティ 解 説 を 読 み アクセシビリ ティを 理 解 する 老 眼 弱 視 を 含 む 視 覚 障 害 難 聴 を 含 む 聴 覚 障 害 肢 体 不 自 由 盲 ろう 者 等 様 々な 人 々が 情 報 資 源 を 読 め る ようにWebサイトを 作 る アクセシビリティチェックを 受 ける 例 : 石 野 氏 Another HTML lintや XiXonAnother HTML lint5

アクセシビリティ 対 応 XHTMLファイル 作 成 分 かりやすいホームページをつくろう 開 き 見 本 をクリックし 見 本 サイトへ 行 く

HTMLソースの 表 示 右 クリックし ソース を 表 示 する または Ctrl+Uキー 総 目 次 へ

ソースをEditorへコピー ペースト 1. 作 者 ( 福 田 博 同 )が 許 可 :Ctrlキー を 押 しながら Aキー (Ctrl+A)です べてを 選 択 し Ctrl+Cでコ ピーする( 記 憶 されるだけ で 変 化 なし) 2. メモ 帳 へ 行 き (Alt+Tab) Ct rl+vで 貼 り 付 ける(ソー スがメモ 帳 へ 複 写 される) 総 目 次 へ

HTMLファイルの 名 前 を 付 けて 保 存 先 頭 に 空 白 行 あれば 削 除 Alt, F, A キーで 名 前 を 付 けて 保 存 の 画 面 が でる

文 字 コードとファイル 属 性 変 更 Alt, F, Aキーで 名 前 を 付 けて 保 存 の 画 面 がでる エンコードを 日 本 語 (シフトJIS)からUTF-8に 変 える

保 存 先 の 変 更 自 分 のフォルダに 変 える

ファイルの 種 類 ファイル 名 をindex.html ファイルの 種 類 をすべてのファイルにしてEnter キー

保 存 後 フォルダからWebページを フォルダ 以 外 のプログラムをすべて 閉 じます フォルダにindex.htmlがあるでしょう クリックすると 右 下 図 が 表 示 されます こんどは 色 がありません 図 もありません レイアウトや 見 栄 えはスタイルシー トが 行 っています ないファイルは 表 示 されません 拡 張 子 の 大 文 字 小 文 字 も 識 別 します フォルダが 違 うと 同 じく 表 示 されません

Editorでindex.htmlの 修 正 メモ 帳 から Index.htmlを 開 く または Editor(EmEdit or 等 )がインス トールされて いる 場 合 index.html 右 クリックし プ ログラムから 開 き Editorを 指 定 する 右 図 で 編 集 画 面 となる

Head 部 とBody 部 の 修 正 Head 部 の <title></titl e>に 囲 まれ た 下 線 部 や metaタグの 下 線 部 を 自 分 用 に 修 正 する は 消 さないように Body 部 の 下 線 部 を 修 正 する サイト 名 とタ イトルは 同 じ ハイパーリ ンクするファ イル 名 や 呼 び 出 しは 自 分 で 決 める 上 書 き 保 存 する 修 正 例 次 頁

修 正 例 トップページは 必 ず index.htmlです リ ンクする 場 合 それを 修 正 したら 上 書 き 保 存 します 続 いて 名 前 を 付 け て 保 存 します ファ イル 名 は search.html Editorがsearch.html に 変 更 するので <title></title>や <h1></h1>のタイト ルを 検 索 ページ 用 に 直 そう

search.html 修 正 名 前 を 付 けた search.htmlを 修 正 </p>と</div>の 間 に ここにGoogleのフォームを 入 れる

人 にやさしいホームページ 作 成 入 門 のソースから 下 のformの 部 分 (Googleサービスからダウンロードし Well Formed 整 形 したもの)を 反 転 しコピーし Search.html に 貼 り 付 ける <form method="get" action="http://www.google.co.jp/search" target="new"> <a href="http://www.google.co.jp/" target="new"> <img src="http://www.google.com/logos/logo_25blk.gif" border="0" alt="google" align="middle" /></a> <input type="text" name="q" size="12" maxlength="255" value="" /> <input type="hidden" name="ie" value="utf8" /> <input type="hidden" name="oe" value="utf8" /> <input type="hidden" name="hl" value="ja" /> <input type="submit" name="btng" value=" 検 索 " /> </form>

修 正 後 見 やすくしたい 場 合 Tabキーで 段 落 を 下 げる ファイルを 保 存 して 閉 じる

確 認 フォルダのindex.htmlを 開 く 探 し 方 アラカルト をクリックすると そのページへ 飛 ぶ Google 検 索 窓 も 表 示 される

スタイルシートを 読 み 込 む 見 栄 えはスタイルシートで 決 める HTMLに 読 み 込 む ソースに<link rel= stylesheet type= text/css href= konsirotpcont2menur.css media= tv,screen,print />と 記 されているkonSiroTpCont2MenuR.cssがスタイルシー トファイル ダウンロードした 分 かりやすいホームページを 作 ろう! の 見 本 のアドレスの http://www2.mmc.atomi.ac.jp/~artnavi1/librarysci/koukaik ouza/homepage2012/mihon/index.htmlのindex.html 部 分 を 削 除 し konsirotpcont2menur.cssと 入 れEnterすると ファイルが 表 示 される 図 解 は 次 ページ

konsirotpcont2menur.cssをダウンロード ソースを 右 クリック 名 前 を 付 けて 保 存 同 じフォルダに 同 名 で Alt, F, Aキー ( 右 クリック 名 前 をつけて 保 存 ) 同 じフォルダを 指 定 ファイル 名 は konsirotpcont2menur.css Enterキー 注 :konsirotpcont2menurの 意 味 :kon 紺 地 に Siro 白 文 字 TpCont2トップとメインと2 分 割 MenuR メニューをRight 右 に(これは 自 分 なりに 決 める)

スタイルシートを 読 み 込 むと! cssファイルを 正 しくダウンロードすると 下 図 のようにフォルダにスタイルシートが 表 示 される index.htmlをクリックすると 見 栄 えが 変 わる

スタイルシートを 読 み 込 むと! index.htmlをクリックすると 見 栄 えが 変 わる これでGoogle 検 索 窓 が 埋 め 込 めたが ロゴの 図 や 桜 の 図 は 分 かりやすいホームページをつくろう 教 材 で 自 習 しよう