私のホームページ作成方法-簡単なメモ-

ここでは、私の自己流のホームページ作成方法のメモをいくつか載せています。

(ホームページはたましか更新していないので、やり方を忘れてしまい、思い出すのに 苦労したり、また知人とかに時折質問されたりすることもあり、 そのためのメモ的な意味合いもあって載せています。)

1. レイアウトやデザインを決める
   
   インターネット上には様々なタイプのホームページがある。 テキストのみの、構造のないフラットなページに数個のリンクを付けた単純なものもあるし、 ナビゲーションメニューから選択すると新しいフレームが表示されたり、またJavaScriptなど のプログラムでページを動的に生成するものなどもあるようだ。 それは掲載したい内容の種類や、その数の多少に応じて決まってくるだろうと思う。 特に個人的なホームページなら、自分で自由に決めればよい訳で、私は時間的な理由もあり、 できるだけシンプルなものを好む。そしてそれが美しければさらに良い。
   私のやり方は、自分の目的や趣味に近いページをどこかで見つけたら、それを参考にして作る、 という簡便な方法で作っている。 最初私がインターネット上に自分のホームページを公開したとき、作る上で参考にしたのは Y君の作っている我が社のホームページだった。 （それをY君に言ったら、"全然似ていない"、というシンプルな返事が返ってきた。 まあそれはそれで、私の独自性があるということだから良いことでもあると思う。）
   その後、さらに改良を加えようと思ったのだが、我が社のホームページは私がこれ以上真似るには 構造的、機能的に複雑すぎる。
   私が自分のホームページで改良したいと思った点は、
   
   
   • ナビゲーションメニューを使いやすくする
   • 掲載する項目をもっと増やす
   • 単色ではなく、色を付けて少しきれいにする
   
   その後、Linuxディストリビューションの1つである Fedora Core 4(現時点では5がリリースされている)をインストールして使って いて、OS自身を大いに気に入ると同時に、そのホームページがシンプルで美しいと思い、これを 参考にして作ることにした。 最近のWebページはCSS(Cascading Style Sheet)を使っている。これはコンテンツ(ページの中身)と ページのデザインを分離する方法で、CSSでデザイン(ページのレイアウト、色、フォントなど)を定義 しておき、コンテンツを記述する時に、CSSで定義されたデザインのうち、どれを使うかを指定する方法 である。うまいやり方だと思う。
   
   Fedora Core 4のホームページ(正確にはFedora Core 4上でWebブラウザFirefoxを起動した時に 最初に表示されるページ)もCSSを使っていて、トップディレクトリの下のcssというサブディレクトリ に定義ファイルが置かれている。まずそこで定義されたページのレイアウトを把握し、それを自分用に カスタマイズした。 （Fedoraの第一階層のレイアウト、 第二階層以下のレイアウトはこんな感じ。） その結果が現在のデザインである。
   
   
2. 作成のためのツールを用意する
   
   今回、ホームページを更新するにあたり、使用したソフトウェア/ツールは以下の通り。
   
   
   • 主に使うオペレーティングシステム
     OpenSolaris b45(Solaris10またはFedora Core 5でも以下のツールを使う上ではほとんど同じ)
     HTMLエディタ -> BlueFish, Emacs
     
     * これまではMozilla Composerや、そこから独立したNvuを使っていたのですが、生成する HTMLコードがフォーマットされていないので、エディタで編集する時にどうも気分が悪く、 効率も良くない。（使い方は簡単で良いのですが。） これが改善される様子は当分なさそうなので、今回はBlueFishというHTMLエディタを 使ってみた。BlueFishはタグ入力方式のエディタですが、機能もデザインもなかなか美しく、 使っていて気分が良い。まだ使い始めたばかりですが、今後はこれを主に使って行こうと思う。
     
     Emacsは昔から多くのUNIX系の開発者/技術者が愛用している多機能なエディタで、モジュールを プラグインすることにより機能を拡張/カスタマイズできるのが特徴です。
     またUTF-8, EUC, シフトJISの文字コードを自動判別してくれるので使いやすい。
     HTMLエディタとして使う場合にも便利です。
     
     描画ツール -> StarSuite Draw/OpenOffice Draw, GIMP
     * FedoraCoreのOpenOfficeあるいはSolarisのStarSuiteのDrawは、描いた図をJPEG, GIF, PNGなど様々のフォーマットに変換(エクスポート)できます。
     
     GIMPは私は主に写真の加工に使っています。
   
   
   • 補助的に使うオペレーティングシステム
     MS Windows XP
     HTMLエディタ -> Dreamweaver
     
     
     * Dreamweaverは私が主としてその機能を勉強するために使っているものです。
     （私の個人のホームページ作成の為だけであれば、必ずしも使わなくても良いソフトなのですが。）
     我が社ナレッジデザインのホームページや、 ナレッジデザインが開発したホープツリーの 囲碁講座システムは、それらをY君がほとんど一人で作っているのですが、その際に使用して いるのがDreamweaverです。そこで私もそのソフトの機能や使い方を多少は知っておくために 使っています。
     
     実際使ってみると、細部までよく気の配られた使いやすいソフトだという気がします。GUIが このように良くできたソフトはUNIX/Linuxにはまだおそらくないでしょう。
     私はまだ基本的な使い方のみで、その機能をほんの一部しか利用していないのですが、テンプレート 機能(次の3.で簡単に説明します)は各ページのナビゲーションメニューを追加/更新した時に、 各ページを一気に変更できて便利なので利用しています。
     
     参考："Dreamweaverについての簡単なメモ"
     
     
   
   
   私の作業環境としては、主としてノートPC(OpenSolaris,Solaris10,FedoraCore4/5のどれかを、 時に応じて立ち上げて使用)でコンテンツの作成/編集とテストを行なっている。
   
   
   


3. Webページ作成時のメモ
   
   私はホームページの作成方法を、本を読むなどしてきちんと勉強をしたことがなく、自己流で作っている。
   その作成の過程で、気付いたことをメモしてみます。まずは次の2点。
   
   
   • ファイルの場所の指定方法
     href=, src=, url()などでファイルの場所を指定する時、以下の3通りのうち、適切なものを選ぶ。
     
     (1) ホスト名を付けて指定する。 (例) href="http://www.knowd.co.jp/staff"
     他のホスト上にあるリソースを指定する場合などに使う。
     同一ホスト上にある場合は通常は使わない。
     ネットワークを介してのアクセスになるはずなので同一ホストの場合はオーバーヘッドが大きくなるだろうし、 また別のサーバにページを乗せ換えたりした時に、ホスト名の記述を変更しなければならなくなる。
     
     (2) ドキュメントルートから指定する。 (例) href="/staff/rotake/index.html"
     同一ホスト上にあるリソースを指定する場合は普通はこれが使われているようだ。 これだと、別のサーバにページを乗せ換えても記述の変更は必要ない。私の場合もまず自分のノートPCでチェックして から、本来のサーバにアップロードするので、大体はこの記述方法にしている。
     但し、ブラウザで直接ファイルにアクセスする場合(サーバを介さずに)は、ドキュメントルートと ファイルシステムのルートは当然違うので、エラーとなる。アクセスしたければ、次のようにして ルートディレクトリ直下にシンボリックリンクを作っても良いかも知れない。
     
     (例)私のノートPCのSolaris10/Opensolarisの場合
     # ln -s /var/apache2/htdocs/staff /staff
     
     (例)私のノートPCのFedora Core 4/Fedora Core 5の場合
     # ln -s /var/www/html/staff /staff
     
     
     (3) 相対パスで指定する。(例) src="../images/kdclogo1-16s.gif"
     同一ホスト上にあるリソースを指定する場合は、この指定方法もある。この方法ならブラウザで直接ファイルに アクセスすることもできるので、単に資料をHTMLで作る場合などには便利。
     但し、各ページ共通のナビゲータメニューなどのリンク先の指定には使わない方が良い。
     各階層ごとに、パス指定を変えなければならなくなる。
   
   
   
   • Dreamweaverのテンプレート機能
     Dreamweaverのテンプレート機能は、各ページ共通の枠組み(レイアウトやナビゲーションメニューなど)を テンプレートとして用意しておき、それをベースに各ページ独自の内容を付け加えてページを作る仕組みである。
     テンプレートをもとにページを新規作成すると、編集可能領域が明示されるので、そこにページ独自の内容を 加えれば良い。
     レイアウトやナビゲーションメニューを変更する時には、テンプレートを編集して、それをもとに作られた 各ページを一度に更新できるのでとても便利です。
     
     Dreamweaverの基本操作やテンプレート機能の使い方については "Dreamweaverについての簡単なメモ"を見て下さい。
     

（記 2006年9月28日）