ウェブページの仕組みとCMS 田村貴紀 今日の要点 クライアントサーバーシステム HTMLとXHTMLというものがある CMSというウェブサイト構築方法 2 ホームページ(Home Page) ホームページ(Home Page) ：ウェブブラウ ザでどこかのサイトを訪れたとき、最初に表示 される画面のこと ウェブページ、ウェブサイト 3 クライアントサーバーシステム クライアント側のコンピューターとサーバーが、 互いに処理を分担しながら連携して動作する システムのこと。C/Sと略記する場合もある。 サーバー側にデータベースを置いてクライアン トから利用するケースが多い。 ピアツーピア P2P サーバーとクライアントといった主従関係がある ネットワークではなく、互いに対等の立場になっ ているネットワーク環境のこと。音声通話ソフト Skype、 Winnyなどのファイル交換ソフト 4 クライアント・サーバーシステム 5 ウェブページとHTML,XHTML ウェブページは、テキストファイル。 ウェブページは、HTML(Hyper Text Markup Language、ハイパーテキスト・ マークアップ言語)で書かれている。 または、XHTML（eXtensible HyperText Markup Language）で書かれている。 6 何故テキストファイルが良いのか 共通性、汎用性がある 違うOSでも読める テキストファイル 文字だけ バイナリファイル 特定のアプリケーションソフ トが利用するファイル MS Wordのファイルとテキストファイルの比 較 テキストエディターを起動してみる。 テキストファイルの方が便利なこともある。 7 HTMLの構成 1つのHTML文書（ファイル）は次の2つの部 分から構成されます。 そのHTMLファイル自身に関する情報 読者に読んでもらう本文 8 HTMLの要素 1番目の部分をHTMLのhead要素 2番目の部分をbody要素 タグは要素の名前を山括弧（ < と > ）で囲ん だものです。つまりhead要素を示すタグは <head>となります。 通常タグは2つをペアで使う。：開始タグ、終了 タグ 終了タグ→最初の山括弧を</。 <head> </head> 9 HTMLの骨格 <html ...> <head> ヘッド要素の内容 </head> <body> ボディ要素の内容 </body> </html> これがHTMLの骨格です。あとはこれにいろいろな内 容を肉付けしていけばよいのです 10 その他の要素01 タイトル：title要素 段落：p要素（Paragraph）。 見出し：heading要素 見出しを示すのは、h1～h6の6つのheading要 素です。h1が大見出し、h2が中見出しと、数 字が大きくなるにつれて下位レベルの見出し になっていきます。通常、大見出しの次にい きなり小見出しがこないように、h1の次に突 然h4を使ったりせず、h1, h2...と順番に使って いってください。 11 その他の要素02 リンク：a要素 → <a> リンク先は、このa要素の開始タグに、属性という付加 情報を加えて示します。ここではhrefという属性を使い ます（要素名と属性は半角のスペースで区切ります）。 <a ref=“ http://www.seigakuin.jp/index.htm ”> 聖学院大学</a> 画像を掲載：img要素 画像を表示しない利用者のためにalt <img src="me.jpg" alt=”写真”/> srcが画像ファイルの在処（URL）、altが代替文です。 画像ファイルの名前を変えてみましょう。 12 HTML文書や画像ファイルのファイ ル名は、以下の点に注意。 基本的に 半角英数字 のみを用いる。 使用可能な記号はドット（.）、ハイフン（-）、 アンダーバー（_） スペース文字を含んだファイル名は使用しな い。 大文字・小文字をちゃんと使い分ける。 ○ test.html ○ test-page.html × test&page.html × テスト.html 13 ウェブページ 聖学院大学 表示⇒ソース ＨＴＭＬが正確かどうかチェックする。 http://openlab.ring.gr.jp/k16/htmllint/ht mllint.html ランキング http://www.aland.to/~lintrank/table.htm l 正確でないと何が問題か？→表示できない機械 14 ＸＭＬとＸＨＴＭＬ XMLとは http://e-words.jp/w/XML.html 教科書 ５０ページ SGML http://www.sophia-it.com/content/SGML SGMLを簡略化した→ＨＴＭＬ、XML XMLをウェブ用に→XHTML http://e-words.jp/w/XHTML.html 15 XML(XHTML)の良いところ XHTMLは、何がいいのか→コンピューターで 処理できる部分が増える ブログ検索 http://blog-search.yahoo.co.jp/ 日付で分類されている。→コンピューターでわ かるような目印がウェブページについているか ら。 RＤＦ（Resource Description Frame) p.50 16 CMSとは Webコンテンツを構成するテキストや画像、レ イアウト情報などを一元的に保存・管理し、サ イトを構築したり編集したりするソフトウェアの こと。広義には、デジタルコンテンツの管理を 行なうシステムの総称。 17 CMSの一般的な仕組み HTML自動生成 入力 入 力 機 能 サーバー アクセス 出 力 機 能 データベースソフト データをデータベー スソフトで管理 18 簡単更新 Webサイトを構築： テキストや画像を作成 HTMLやCSSなどの言語でレイアウトや装飾を行 ない、 ページ間にハイパーリンクを設定する とっても大変。これらの要素を分離してデータ ベースに保存し、サイト構築をソフトウェアで自 動的に行なうようにしたものがCMSである。 19 CMSを導入すれば HTMLなどの知識を習得する必要はなく また、サイト内のナビゲーション要素なども自 動生成する ページが追加されるたびに関連するページに リンクを追加するといった煩わしい作業からも 解放される。 20 CMSには CMSには、作成できるサイトの自由度の高い汎用 的なソフトのほかに、WikiやWeblog(Blog、ブログ)など、 コンテンツの管理の仕方やサイトのコンセプトに特徴 のあるソフトもある。 また、それぞれについて、企業のサイト構築に利用す るための商用ソフトウェアや、無償で公開されている フリーソフトウェアがある。Webサイトのホスティングの 形でCMSが利用できるサービスもある。 21 る 22 内容とデザインの分離 CMSにおいては、コンテンツそれぞれの内容 と、デザインは別個になっている それらを付き合わせて初めてWebページがで きあがる。 コンテンツの入力項目と、デザインの表示項目 とは一致していなければならない。そうした内 容項目の設定やデザイン⇒「テンプレート」と呼 ばれる。 23 管理機能：【自動インデキシングと ナビゲーション生成】 コンテンツの追加や更新により、コンテンツの関 連性が変更されると、ナビゲーション部分のインデ キシングが自動的に変更され、コンテンツ間のリ ンクが適切に更新される機能。 24 【公開のスケジューリングや公開 サーバーへの自動配信】 コンテンツごとに、公開サーバーで公開する日時、 公開終了する日時をあらかじめ予約でき、スケ ジュール管理が行える。また、公開サーバーの内 容を確認し、完全な形で公開（更新）を自動的に行 う機能がある。 25 【ページの履歴管理】 過去のある時点で公開されていたページの情報 を蓄積し、履歴を管理（バージョン管理）することが できる。通常はファイル単位の履歴管理であるが、 製品によってはサイト単位での履歴を残す事がで き、任意の時点のサイトにロールバック（復旧）す ることができるものもある。 26 RSS （ RDF Site Summary ） ヴァージョンによって何の略か違う http://www.atmarkit.co.jp/fnetwork/rens ai/5minrss/01.html http://www.google.com/reader/ 27 無料のcms NetCommons XOOPS Drupal Joomla! 28 ナビゲーション メ ニ ュ ー 副 次 的 メ ニ ュ ー 29
© Copyright 2024 ExpyDoc
