ホームページ作成講座 1999.6.16


見栄えの良いホームページを作るための技術
と電子メールの基礎(その2)


1. 本日の作業手順

1.1 ページ内容の拡充(前回の続き)

前回に引き続きページに記述する内容を充実させる。例えば、なんらかの項目をひとつ用意し、それに関する記述を加える。また、見栄えをよくするための背景や文字の大きさなどについても工夫する。


1.2 Gimpによるホームページロゴタイプの装飾

ページのトップに表示されるタイトルを見栄えの良いロゴタイプに編集する。そのために、Linux上で利用できるフリーソフトのGimp(ギンプ)を用いて作業を行う。


1.3 Gimpによる写真の加工(応用編)

前回写真をとったものは、その写真を上と同様にGimpを用いて加工し、アクセントをつける。


1.4 電子メールを使うための設定(その2)

電子メールの送受信のための設定およびコマンドの基礎を実習し、練習メールを送る。


2. ページ内容の拡充

前回までに作成したページ内容をいくぶんか完成に近付ける。文章の内容は各自の嗜好や興味、知識に依存するのでこちらからは格別の指示を出すことはしないが、相談にはのれるので質問があれば気軽にすること。内容以外には、ページの背景色、文字色を変更したり、文字サイズや他の装飾を施すことにより見栄えだけは良くなるので、検討すること。その時に必要な知識は、ほとんどがデモページに組み込まれているので、参考にすること。それ以外の効果が必要な場合は別途相談すること。


3. Gimpの操作法

グラフィックを多用したページは見た目は派手で良いが、実際に閲覧する時には回線の速度や端末の処理能力に依存するので、不用意には使うべきではない。しかし、見た目はやはり重要な要素なので、次に示すような方法でできることは知識として持っておいて悪くはない。以下にその作業手順を示す。


3.1 Gimpの起動

X上のktermの中で

gimp &

とコマンド入力する。初めて起動する時にはインストール作業が行われるので、OKをクリックしてインストールを行う。インストールが終わると日替わりのTips(ちょっとしたこつ)が表示されるので、適当に読み流してCloseボタンを押す。すると、ToolBox(道具箱)ウィンドウが表示される。FileメニューからNewを選ぶと、どのような大きさのウィンドウを用意するか聞いてくるので、とりあえずOKをクリックする。ToolBoxのボタンをいろいろとクリックしてどのアイコンがどのような道具に対応しているのか、一通り試してみる。実際には複数の機能を組み合わせて使用することがあるので、実際に使いこなすにはかなりの時間がかかるため、ここでは詳細にはふれない。ただし、一つだけ試して欲しいのは、左上の点線の四角や丸のボタンを押して、グラフィックウィンドウ上に四角や丸を選択し、バケツツールを選んだ後に、四角の中をクリックする、と言う作業である。このような手順で幾何学的な図形を描くことができる。


3.2 ロゴタイプの作成

ToolBoxウィンドウのXtns (eXTeNtionS) メニューからScript-Fu > Logos > Flosty を選択する。入力用のウィンドウが表示されたら Text Stringsの欄に自分のページのタイトルにするべき文字を入力する。残念ながらこの作業は英数小文字にのみ対応しているので、英語で入力すること。


例:
Hello
Hoge's Page
Welcome to Hoge's Page
This is the page presented by Hoge
Don't miss this page!

Font Size はとりあえず100ピクセルとし、Fontは以下の内から適当なものを選んで記入する。

courier
helvetica
times

OKボタンをクリックすると作業が始まりロゴが作成される。大体このような手順で進められるので、これ以外に試してみたい場合は、Xtns > Script Fu > Logos の後、適当な項目を選択して実際に作業を行い、自分の目で確かめること。画像の保存は画像上にマウスポインタをおき、右クリックするとあらわれるメニュー項目からSaveを選択して、適当な名前を付けて保存する。この時、ファイル形式を聞かれるのでXCFをとりあえず選んでおく。実際にページに載せる時は別のファイル形式を選ぶ必要があるので、後で述べる。


3.3 ロゴタイプの作成2

3.2で作成したような複雑なロゴタイプもいいが、文字だけを抽出し、背景が透明となったようなロゴタイプもweb上で良く用いられる。ここではそのようなロゴタイプを作ってみる。3.2と同様に適当なロゴタイプ(上で作成したものでも可)を用意し、画像上で右クリックしてLayers > Layers & Channelsを選ぶ。画像がいくつかのLayerと呼ばれる「層」から形成されていることが分かる。文字に関係のないLayerを削除する。ウィンドウ上のImageメニューからindexedとすると、背景のない画像が得られるので、別名で保存 (Save as) を選んでGIF形式で保存する。Gimpのウィンドウ上では、背景が市松模様(チェッカーボード)になっていれば透過タイプを意味している。


3.4 ページに反映させる

ロゴタイプが完成したら、ページ中にそれを描画するための

<img src="hogehoge.gif">

のタグを加えておく。つぎに、ftpコマンドで、今作成したファイルをサーバ上の自分のホームディレクトリ内の public_html ディレクトリにputする。手順は、以前の資料にあるように、kterm (もしくはxterm)上で


ftp mag2.riko.shimane-u.ac.jp

と入力し、サーバが応答したら、自分のログイン名を入力し、パスワードも自分のパスワードを入れる。ログインが完了した時点では、自分のホームディレクトリにいるので、


cd public_html

とディレクトリを移った後で、

put hoge.gif hoge.gif

として、ファイルを転送する。転送が終われば

bye

と入力してftpセッションを終わる。


3.5 写真の加工

前回自分の写真を撮ったものはサーバ上にすでに置かれており、ページにも掲載されている。この写真を作業用ファイルとするために、ftpで自分の端末上にgetする。手順は、3.4と同様にftpでサーバにログインし、


get hoge.jpeg hoge2.jpeg

などとして、自分の端末のホームディレクトリに取り込む。次に、Gimpで今の写真を開き、画像上で右クリックして表示されるScript-Fuから好きな効果を試してみる。なんらかのフィルタ処理を行った後、ファイルを保存してしまうと、複雑な処理を複数回行った場合には下の画像が再現できなくなり、もう一度ftpからやり直さなければならないので、どのようなフィルタがいいか決めるまではファイルは保存しないこと。ファイルの加工が終われば、ftpによりサーバに送り、ページのどこかで<img>タグを挿入して表示させる。


4. 電子メールの利用

4.1 準備

前回の資料の通りにMewとIMの設定が完了していれば、メール環境がemacsから利用できる。emacsを起動し、


Esc x

を入力した後、

mew

と入力すればメールモードに変わる。サーバに届いている自分宛のメールは

i

と入力すると+inboxという自分のメールボックスに取り込まれる。メールの一覧がウィンドウ上に表示されるので、順番に読む場合はスペースキーを押して行くと一つずつ表示させる。特定のメールを読みたい場合は矢印キーでメールを選択した後、スペースキーを押すとそのメールの内容が表示される。


4.2 メールの送信

Emacsの画面上で下の方の黒い帯になっているところにSummaryと表示されている状態で、

w

とキー入力すると、メール送信モードになる。はじめの、To欄に宛先を記入し、続いてSubject欄に表題を記入する。----の下からが、メールの本文となる。文章の記入がすんだら、


Ctrl + c Ctrl + i

で前回の資料にある署名がメールに取り込まれる。

Ctrl + c Ctrl + c

で、メールが送信される。


4.3 メールの返信

Summaryモードで返信したいメールにカーソルをおいて

a

と入力すると返信用メールが作成される。

A

とすると、相手のメールの文章を引用した形で返信メールが作成される。


4.4 Mewの終了

Shift + q

を押すと、Mewを終了するか聞いてくるので、yを押すと終了し、通常のEmacsモードに変わる。


ホームページ作成講座トップページに戻る

indexページへ戻る

- # -