2004年度 基礎ゼミ 【知的システムデザイン研究室】

第2回 ホームページゼミ

ゼミ担当者: 池田 聡, 梶原 広輝, 藤原 樹
指導院生: 長野 林太郎, 中山 靖一, 平井 聡
開催日: 2004年5月12日



1 サイボウズ

1.1 サイボウズとは

知的システムデザイン研究室では,サイボウズと呼ばれるシステムを使って,学生間および学生教員間の予定の調節や連絡を行っている. サイボウズは、グループウェアと呼ばれるソフトウェアの一種である. グループウェアとは,グループでの作業や意見交換をネットワーク上で支援するソフトウェアのことである. サイボウズを使うことによって,ファイルを共有したり,掲示板や電子会議室で議論したりすることができる. WWW ベースの商用グループウェアで,中小規模の事務所やSOHO 等で使われるものとして比較的有名な製品である.

1.2 ログインとログアウト

サイボウズを使うためには,管理者からアカウントをもらわなければならない. 知的システムデザイン研究室のサイボウズサーバにアクセスするためには, WWW ブラウザ(インターネットエクスプローラ等)を使って、以下のURLにアクセスする.

http://duke.doshisha.ac.jp/cbag/

アクセスに成功すると以下のような画面が表示される.


fig1.1 ログイン画面

ここで,ログイン名とパスワードを入力するとトップページが現れる.


fig1.2 トップページ

使用することができる主な機能は,トップページの上のほうにアイコンとして並んでいる.このアイコンをスタートメニューと呼ぶ.


fig1.3 スタートメニュー

ログアウトしたいときは,トップページの一番上に表示されている“ログアウト”ボタンをクリックする.

1.3 個人設定

Topページの右下にある“個人設定”ボタンをクリックすると以下のような画面が表示される.


fig1.4 個人設定画面

1.3.1 パスワードの変更

初期設定されているパスワードは,ログイン名と同じになっている.サイボウズを使う上で,他人に自分のアカウントが知れてしまうと支障があるので,必ず一番初めにログインした時点でパスワードの変更を行わなければならない.パスワードを変更するには,個人設定の“パスワード”アイコンをクリックする.


fig1.5 パスワードの変更

すると,以下のような画面が表示される.新しいパスワードの部分に変更したいパスワードを入力し,“変更する”ボタンをクリックする.2箇所ある欄に同じパスワードが入力されていないとエラーになる.


fig1.6 パスワードの変更画面

1.3.2 トップページの設定

サイボウズにログインしたときに表示される画面の変更をすることができる.トップページの変更をする際には個人設定の“トップページ”アイコンをクリックする.


fig1.7 トップページ

すると以下のような画面が表示される.トップページに表示する様々なオプションが選べるが,ここでは“スケジュール”の表示の仕方について説明する.まず“スケジュール”アイコンをクリックする.


fig1.8 トップページのカスタマイズ

すると以下のような画面が表示されるので,表示方法のプルダウンから自分以外に表示したいグループを選ぶ.そして“変更する”ボタンをクリックする.


fig1.9 スケジュールの表示方法

1.3.3 Myグループの設定

スケジュールで自分以外のグループを選ぶことができるが,グループを自分で定義することができる.この方法について説明する.まず,個人設定の“Myグループ”アイコンをクリックする.


fig1.10 Myグループ

すると以下のような画面が表示される.Myグループ名の欄に自分の好きなグループ名を入力し,所属するユーザーに表示させたい人を追加させ,“追加する”ボタンをクリックする.


fig1.11 Myグループの追加画面

1.4 スケジュール

スケジュールの登録の仕方について説明する.スタートメニューの“スケジュール”アイコンをクリックする.すると以下のような画面が表示されるので,メモ用紙のアイコンをクリックする.


fig1.12 グループの週表示画面

すると予定の登録画面が表示される.日付,時刻,予定をプルダウンから選択する.参加者を追加することで,参加者全員のスケジュールを登録できる.部屋や機材を使いたい場合は設備に追加する.


fig1.13 スケジュール登録画面

1.5 ファイル管理

資料等は,ファイル管理という機能を使って共有できる.ファイル管理機能を使うには,スタートメニューから“ファイル管理"アイコンをクリックする.すると以下のような画面が表示される.


fig1.14 ファイル管理画面

フォルダを作成したい場所で“フォルダ作成”をクリックする.すると以下のような画面が表示される.フォルダ名を入力し,“作成する”ボタンをクリックする.また,ファイルを作成する場合も同様で,作成したい場所で“ファイルを追加する”ボタンをクリックする.すると以下のような画面が表示される.


fig1.15 フォルダ作成画面

ファイル名を入力,または“参照”をクリックし参照するファイル名を選ぶ.そして“追加する”ボタンをクリックする.


fig1.16 ファイル作成画面

2.blogの導入


2.1 blogとは

blogとは,「Web上に残すlog(Weblog)」の略で,一般的にはWeb上のニュースを引用したり他サイトへのリンク,それに関するコメントが日々更新されるようなサイトの総称である.特徴としては,以下のとおりである.

本ゼミでは,blog作成ツールとして,「Movable Type」を用いる.Movable Typeとは,プログラミングやftpなどを用いたファイルのアップロードなどの知識を持たない初心者でも,更新作業が容易にできるツールである.

2.2 Movable Typeのインストール方法

2.2.1 ダウンロード

Movable Typeのソースをhttp://www.movabletype.org/download.shtmlからダウンロードする.ダウンロードにはこのサイトで,distributionを"Full version with Libraries"に選択し,decompression methodは"ZIP(Best For Windows)",nameとemail adressを入力し,join MT-usersは"Yes"と"No"のどちらかを選択すればできる.



2.2.2 解凍

ダウンロードしたMT-2.661-full-lib.zipを解凍し,ソースをインストールするディレクトリをmikilabに作成する.

http://mikilab.doshisha.ac.jp/~ユーザ名/ディレクトリ名
(例) http://mikilab.doshisha.ac.jp/~hkajiwara/mt/

http://mikilab.doshisha.ac.jp/~hkajiwara/mtにインストールしたい場合,/home/hkajiwara/public_html/に「mt」というディレクトリを作成し,その中にソースをコピーする.ここで,パーミッションを確認する.ディレクトリや.cgiファイルは755,その他のファイルは644にする.また本マニュアルでは,ユーザ名を"hkajiwara",インストールするディレクトリ名を"mt"として,設定を行っている.



2.2.3 設定

Movable Typeの設定には,MT-2.661-full-lib.zipを解凍してできたmt.cfgファイルを編集することでできる.



2.2.4 チェックと初期化



2.2.5 Movable Typeの実行

mt.cgiにアクセスしてログインする.ブラウザで,http://www.mikilab.doshisha.ac.jp/~hkajiwara/mt/mt.cgiにアクセスするとログイン画面が表示される.ログイン時において,ユーザ名をMelody,パスワードをNelsonと入力するとログインができる.その後,Edit your profileを選択し,ユーザ名とパスワードを変更する.Fig 1にログイン後の画面を示す.




Fig 2.1 ログイン後の画面


2.3 日本語化

2.3.1 Language Pack

まず,http://uva.jp/dh/mt/archives/000391.htmlからMovableTypeのバージョン2.6のLanguage Pack(mt-ja-2.6.ZIP)をダウンロードする.

付属のREADMEの【2. インストール方法】と【3. 利用方法】の通り,ファイルを移動する.これで,Movable Typeのメニューが日本語化される.文字コードの種類は,EUC-JPとUTF-8があるが,本研究室ではUTF-8を推奨する.



2.3.2 日本語を入出力

デフォルトでは,日本語が文字化けするので,mt.cfgを編集する. 以下のようにコメントアウトを外し編集する.

  • NoHTMLEntities 1
  • PublishCharset UTF-8(デフォルトではSift_JISになっている)


2.4 Weblogの構築

既に"First Blog"と呼ばれるblogが存在するので,始めにWeblogの構築をする.FIRST WEBLOGをクリックし,左の真ん中にあるEDIT CONFIG(BLOGの設定)をクリックする.ここで,今後作成するWeblogのサイトパスを決める必要がある.以下に設定例を示す.

サイトパス : /home/hkajiwara/public_html/mt/public
URL : http://mikilab.doshisha.ac.jp/~hkajiwara/mt/public/

これにより,"FIRST BLOG"というblogが,http://mikilab.doshisha.ac.jp/~hkajiwara/mt/public/に格納される. さらに,archivesパスを決める必要がある.以下に設定例を示す.

サイトパス : /home/hkajiwara/public_html/mt/public/archives
URL : http://mikilab.doshisha.ac.jp/~hkajiwara/mt/public/archives/ 

archivesパスは,ファイルのアップロードした際にファイルが格納されるディレクトリである.

これで,SAVEし,REBUILDを行えばWeblogの基本の構築は終了である.

Fig 2にMovableTypeの実行画面を示す.

Fig 2.2 実行結果


3. スタイルシート

3.1 スタイルシートとは

スタイルシートとは,HTMLで作ったwebページの体裁を定義し,見栄えよくするために用いられる.第1回のゼミで取り上げたHTMLの主な役割は文章や段落に意味を持たせる事であって,体裁を整えたりする事ではない.HTMLではあくまで文章や段落の意味を記述し,スタイルシートでその体裁を整えようという事である.近年「Webページ上のデザインに関する機能はHTMLとは切り離すべき」という考え方が主流となってきている.文書の構造はHTMLで,デザインはスタイルシートで記述するのが望ましいとされている.

スタイルシートの一種にCSS(Cascading Style Sheet)がある.CSSはHTMLの標準化を進めるW3Cが仕様を定義し勧告しているものである.スタイルシートにはCSSの他に数種類のスタイルシートが存在するが,単に「スタイルシート」といった場合,このCSSを指すのが一般的である.なお本レジュメでも,「スタイルシート」の記述はCSSを指すものとする.



3.2 スタイルシートの書き方

スタイルを定義する際のスタイルシートの構造を以下に示す.

選択部{属性:値;}

上記に示したものはスタイルシートの中の一行だけを抜粋したものである.実際にはこれが,数行〜数十行になる.この各一行毎を「ルール」という.


基本的なスタイルシートの例を以下に示す.

h1{color:red;}

3.2.1 選択部に対する設定方法

選択部,つまりタグにスタイルを設定する場合は,3.2で示したスタイルシートの構造のようになる.この他にもタグに対する設定方法がいくつかある.



3.2.2 クラスによる設定

クラス(class)を使う目的および方法は2つある.

  1. 1つのタグに2つ以上のスタイルを適用する

  2. スタイルが適用されている範囲で,何回も同じタグが何回も使いたいが,色だけは変えたいという場合にクラスを用いる.以下のようにクラスを用いてスタイルを設定する.

    h4.class1{color:red;}
    h4.class2{color:blue;}
    h4.class3{color:green;}

    この3種類のスタイルを用意して,HTMLファイルには次のように記述する.

    <h4 class="クラス名">スタイルシート</h4>

    クラス名のところにclass1,class2,class3と使い分けることによって同じ<h4>タグに2つ以上のスタイルを適用できる.書き方は,タグの名の後にピリオド(.)を入れてからクラス名を記述する.HTMLファイルは,タグ名の後ろにスペースを入れてから,class="クラス名"と記述する.

    (スタイルシートファイル)
    タグ名.クラス名{属性:値;}

    (HTMLファイル)
    <タグ class="クラス名">〜</タグ>


  3. 2つ以上のタグに1つの(同じ)スタイルを適用する

  4. 以下のように,タグを指定しないでクラスにスタイルを指定する.

    .AKAiro{color:red;}
    .AOiro{color:blue;}

    HTMLファイルには次のように記述する.

    <h4 class="クラス名">スタイルシート</h4>

    クラス名のところにAKAiro,AOiroと使い分けることによって,色の属性を持つタグについては全てこのスタイル(赤色,青色)を適用することが出来る.

    (スタイルシートファイル)
    .クラス名{属性:値;}

    (HTMLファイル)
    <タグ class="クラス名">〜</タグ>




3.2.3 属性と値

よく使う属性と値.



3.3 スタイルシートの使い方

スタイルシートの使い方には次の3種類の方法がある.

  1. タグにはさまれた部分に適用する方法
  2. ページ全体に適用する方法
  3. リンクを張って複数ページに適応する方法


3.3.1 タグにはさまれた部分に適用する方法

タグにスタイルを直接書き込む方法.これをインラインで設定するという.

インラインで設定する場合は,以下のように記述する.

<選択部 style="属性:値;属性:値;属性:値;・・・;">
〜テキスト〜
</選択部>

選択部 style= の後をダブルクォーテーション(”)で囲み,その中に属性と値を書き込む.書き方は,属性と値の間をコロン(:)で区切り,次の属性との間をセミコロン(;)で区切る.また,最後の値の後はセミコロンは不要であるが,属性を追加したときに忘れないようするためいつもつけることを心掛けた方が良い.なおHTMLと同様,タグ内の空白は無視される.

例えば<div>タグに対して,以下のように用いる.

<div style="color:red;font-size:20pt;font-wight:bold;">
スタイルシート
</div>
スタイルシート

インライン設定はタグに直接書き込むので,HTMLでページを作るのとそんなに変わりない.しかし,HTMLよりも細かい設定が可能なので,ページをデザインする効果はある.ただし,その反面タグが複雑になって変更・修正がめんどうになってしまいスタイルシートの重要な効果であるスタイルの一括変換ができないといったデメリットがある. 全体のスタイルを別の方法で設定した後に,個別のタグについてスタイルを設定したい場合に使うと良い.


3.3.2 ページ全体に適用する方法

HTMLファイルのヘッダー部分(<head>タグで囲まれた部分)にスタイルを書き込むことで,ファイル中の同じタグには全て同じスタイルが適用される方法である.

ページ全体に適用する場合は,<head>タグで囲まれた部分( <head>〜</head> )に以下のように記述する.

<style type="text/css">
<!--
選択部{属性:値;属性:値;・・・;}
-->
</style>

type="text/css"は「スタイルをCSSで記述する」という宣言になる. 次の <!-- はHTMLのコメントであり, <!-- と --> で囲まれた部分のタグや文章は無視され,ブラウザ上に表示されない.スタイルシートは,選択部(HTMLタグ名)を書いて,その後を{ }で囲むと記述できる.プロパティと値の書き方は,3.3.1のインラインで設定する方法と同じである.

また,<style>〜</style>の間を <!-- と --> で囲むのは,CSSに対応していないブラウザへの配慮である.ブラウザは知らないタグが出てきた場合,タグを無視してテキストはそのまま表示する.CSS未対応ブラウザでは<style>や</style>は表示されずに,その中のスタイル設定部分だけが表示されてしまうので, <!-- と --> で囲む配慮が必要である.

以下に例を示す.

<html>
<head>
<title>ページ全体に適用</title>
<style type="text/css">
<!--
div{
color:red;
font-size:20pt;
font-weight:bold;
}
-->
</style>
</head>
<body>
<div>スタイルシート</div>
</body>
<html>
スタイルシート


3.3.3 リンクを使って複数ページに適用する方法

スタイルを適用したいHTMLファイルとは別にスタイルシートファイル(CSSファイル)を作成し,そのシートに複数のページからリンクを張りスタイルシートを用いる方法である. HTMLファイルを作成するのと同様に,メモ帳などのテキストエディタにスタイルを記述する.

スタイルの記述方法は以下の通りである.

div{
color:red;
font-size:20pt;
font-weight:bold;
}


別に作成したスタイルシートファイルには,<style>タグやコメント部分は必要なく,設定したいタグおよびタグに対する属性とその値を記述するだけで良い.別に作成したスタイルシートは,拡張子".css"で保存する.これによりブラウザがスタイルシート(cssファイル)であると認識する.

スタイルシートファイルが出来たら,適用したいHTMLファイルからリンクを張る.リンクの張り方は以下に示す通りである.

<link rel="stylesheet" href="スタイルシートファイル名.css" type="text/css">

リンクには<link>タグを用いる.先程別に作成したスタイルシートファイルの名前を「stle_1.css」とすると,スタイルを適用したいHTMLファイルは以下のようになる.

<html>
<head>
<title>リンクを使って複数ページに適用</title>
<link rel="stylesheet" href="style_1.css" type="text/css">
</head>
<body>
<div>スタイルシート</div>
</body>
<html>
スタイルシート


ページ内のタグに直接スタイルシートを書き込む方法,ページ全体にスタイルシートを適用する方法,リンクを使って複数ページ適用する方法と,3種類のスタイルシートの使い方を示したが,その適応範囲は段々と広がっている.CSSの設定は適用範囲が細かい方が優先されるため,ページ内に直接書き込む方法が一番優先度が高く,リンクを使う方法が一番優先度が低い.従って,優先度の低い方法で全体を設定した後に優先度の高い方法で一部のタグだけ違うスタイルに適用することが可能である.

すなわち,まず別にスタイルシートファイルを作成し,あるページだけに使うタグが出てきた場合にページ全体に適用する方法でスタイルを作成し,特別に別のスタイルを適用したい場合だけタグに直接スタイルを記述する方法をとるのが一番良い.





4. ISDL Report

4.1 ISDL Reportとは

ISDL Reportとは,本研究室における研究報告のためのレポートであり,学生は通常ミーティングのたびに,ISDLを執筆して教員に研究報告を行う. ISDL Reportは,従来の学生から教員への研究報告ではなく,本研究室から外部に研究成果を発信するためのものである. よって,その体裁は論文としての形式に従ったものでなくてはならない.また,研究成果を不当に利用されないための措置として,著作権表示を記載しておく必要がある.本研究室では各研究の内容を記載したISDL Reportの作成を行い,外部に発表を行っている.



4.2 ISDL Reportの作成方法

4.2.1 ISDL Reportの構成

レポートの構成は,論文の形式に従う. 具体的には,研究報告形式と文献紹介形式の2つがある. 2つの構成をTable 4.1に示す.

Table 4.1 研究報告と文献紹介のISDL Reportの構成
研究報告 文献紹介
論文タイトル
論文作成日
著作名
導入・概要
実験内容
実験結果
結論
著作権表示
論文タイトル
論文作成日
著作名
文献要約
文献に対するコメント
著作権表示


4.2.2 ISDLのスタイルについて

ISDL Report のレイアウトは,共通のスタイルシート isdl_report.css によって調整される.例えば,セクションは次のように記述する.(セクション以外のFigやTableなどのスタイルシートは参考のISDL Reportの例を参照)

        ソース
<h2 class="section"> 2  数値実験 </h2>
<h3 class="subsection"> 2.1  実験内容 </h3>
<h4 class="subsubsection"> 2.1.1  パラメータ </h4>

        出力結果

2  数値実験

2.1  実験内容

2.1.1  パラメータ


このスタイルシートの変更はできない. 改善案がある場合は,各研究グループの長を通じて教員に伝える.



4.2.3 ナンバーについて

ISDL Reportでは,それぞれのレポートに番号を割り振り,重複を避けている.
番号の付け方のルールは次の通りである.

「年 + 著者 ID + レポート番号」

例えば,著者ID 0806 の人の,2004 年 の 001回目の報告の場合,

2004(発行年) + 0806(著者ID) + 001(レポート番号) = 20040806001

である.著者 IDは,「期生 + アルファベット順番号」である.8期生の6番目の人の著者IDは,0806 となる.レポート番号は,3ケタの通し番号である.

※ 開始No. は,既出の最新の研究報告No. に続くものである.



4.2.4 図表,数式など

図表や数式は,Fig:4.1 Table:4.2 式 4.1 等のように,アンカーをつけてリンクから辿れることが望ましい.

校章
Fig 4.1: 同志社大学のシンボル

Table 4.2: ホームページゼミと最適化ゼミの担当
  チーフ サブチーフ サブチーフ
ホームページゼミ 池田聡 梶原広輝 藤原樹
同志社ゼミ 宮崎真 吉田昌太 箕輪祐子

y=x2+2x (4.1)

この作成するHTML表現は以下のようになる.

Table 4.3: アンカーの作成方法
<a href="#ta">Tableへ</a>


<a name="ta">Table</a>

Tableへ


Table



4.2.5 ファイルや出力内容の記述(整形済みテキスト)

テキスト表現をそのままISDL Reportに記載したい場合は,<pre>タグを使用する必要がある.ただし,<や>はタグとして認識されてしまうので,&lt; や &gt; で記述する必要がある.



<pre class="pre">
# /etc/crontab: system-wide crontab
# Unlike any other crontab you don't have to run the `crontab'
# command to install the new version when you edit this file.
# This file also has a username field, that none of the other
crontabs do. SHELL=/bin/sh PATH=/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bin # m h dom mon dow user command 25 6 * * * root test -e /usr/sbin/anacron || run-parts --report
/etc/cron.daily 47 6 * * 7 root test -e /usr/sbin/anacron || run-parts --report
/etc/cron.weekly 52 6 1 * * root test -e /usr/sbin/anacron || run-parts --report
/etc/cron.monthly # </pre>

4.2.6 作成中のレポートを識別するコメント

作成中のレポートには,以下のようなコメントをつけておく. このコメントを含むレポートは, Web での公開の対象外となる.

<!-- work-in-progress -->

4.2.7 著作権表示

ISDL Reportで公開される内容には,学会発表や論文投稿前のものも含まれる. そのため,レポートには著作権表示をレポートの末尾に記載することにより, 記載された研究成果が不当に利用されるのを防ぐ必要がある.

著作者は,原則として,レポート作成者(学生)と教員(廣安先生,三木先生)である.


Copyright (C) 2004 Mitsunori Miki, All rights reserved.
Copyright (C) 2004 Tomoyuki Hiroyasu, All rights reserved.
Copyright (C) 2004 Satoshi Ikeda, All rights reserved.
Copyright (C) 2004 Hiroki Kajiwara, All rights reserved.
Copyright (C) 2004 Tatsuki Fujiwara, All rights reserved.

No part of this document may be reproduced, copied, distributed,
transferred, modified, or transmitted, in any form or by any means,
without the prior written permission of the authors.
In no event shall the authors be liable for any damages caused in any way
out of the use of this document.

4.2.8 設置個所

ISDL Reportの作成が終わると,Mikilabにアップロードする.アップロードの場所は

/home/WWWmikilab/dia/research/report/2004/著作ID
である.