制作レポート@ 

こにご紹介しますは,素人による素人のための,FrontPage2000 & PhotoDraw2000 によるホームページ作成にまつわる,苦闘の記録であります。まさに血と汗と涙。釣り場でケガして血も出たし。夏の盛りで汗も出たし。そうじゃないって。 --- でも,初めてホームページを作る人は,きっとぼくと同じカベにぶつかるはず。このページと次のページの記録が,これからHPを作ろうと思っておられる皆さん方のお役に立てることを願っています。初心者でない方は,読んではいけません。恥ずかしいから。(続きは PhotoDraw 2000編へ)


@ フォントサイズの設定 

最初は Word で作成した文書を FrontPage にコピーしていましたが,途中からは直接 FrontPage で入力しました。最初なぜ Word で文書を作ったかと言うと,FrontPage にはフォントサイズのオプションが10ポイントか12ポイントしかなく,中間のサイズ(11ポイント)のフォントが使えなかったため。結局,Word で入力した11ポイントの文書の書式をコピーすることで,FrontPage 上で11ポイントの活字を使うことができました(もっと簡単な方法があるのかも・・・未だにわからない)。ちなみに,この文面のフォントサイズは11ポイントです。

A 行間の設定 

最初に活字を打って思ったのは「ずいぶん行間が狭いな〜」ということと,「改行すると,今度は行間が広すぎるな〜」ということ。まぜ「狭い」点については,「書式―段落―行間」で「1.5行」を選ぶと,ちょうどよくなります(この文面もその設定です)。「広い」方については,「書式―段落―スペース―段落の前[後]」で調節します。行間を1.5行に設定している場合で,試しに改行してみます。

(A)この行は,普通に改行しました(スペースの設定なし)。

(B)この行には,「書式―段落―スペース―段落の前」で「−15」の設定をしました。

(A)と(B)の行間が適度に詰まっているのがわかると思います。

B 画面の分割 

FrontPage も Word と同じ感覚で入力できるんだろう,と思っていたら,いきなり大きな違いに気づいてしまいました。それは,「図が描けない」ということ。「図形描画」のコマンドがないんですね〜。で,最初はトップページのレイアウトの方法が全然わからんわけですよ。仕方がないので,Word で作ったファイルをべたべた貼り付けてみたけど,全然カッコよくならない。第一,画面の分割のしかたもわからない・・・と,途方に暮れておりましたところ,ある方法を発見!いや,全然当たり前の方法なんですけどね。気に入ったサイトのページをそのままハードディスクに保存して,それを FrontPage で開く。そうすると,画面がどう分割されて,どこに色がついていて・・・ということが一目瞭然。ははあ,こうやるのか〜,と納得して,ようやく「ファイル―新規作成―ページ―全般」と進んで,分割画面の作り方が理解できたわけでございます。バカですね〜。補足しておきますと,上記の要領で「全般」の中から「標準ページ」以外の任意のデザインを選びます。表示されたレイアウトにはダミーの文字や写真が入っていますが,これらは全部削除します。次に,セルを結合したり分割したりして,自分が必要とするだけの分割画面(セル)を作っていきます(セルごとに背景色などを変えられます)。もちろん,下の説明にあるように,初期画面上に「罫線の太さがゼロの表」を作る方法でもかまいません。

C 表の作成と罫線の処理 

始めは「FrontPage では図が描けない」という点しか頭になくて,図も表もWord で作ってコピーするしかない,と思っていました。で,そうやったわけです。ここで注意!Word で作った表や図を,単体で貼り付ける分には問題ありません。ところが,文字と図表をまとめて切り取って FrontPage に貼り付けると,あ〜ら不思議。これに手を加えようとしたら,FrontPage を強制終了するメッセージが出てしまいます。たぶんうちの機種だけの問題じゃないと思うんだけど。これを知らなんだために,何度データがパーになったことか・・・

で,試行錯誤を続けるうちに,FrontPage の表を活用すればいいんだ,ということにようやく気づきました。その時点で知ったことの1つは,表の上で右クリックして「表のプロパティ」を開き,「サイズ(罫線の太さ)」を0に設定すれば罫線が消える,ということ。

もう1つは「罫線のプロパティ」「表のプロパティ」「セルのプロパティ」「ページのプロパティ」「フレームのプロパティ」などを正しく使い分けなければならない,ということ。たとえばリンクを張った文字の色の設定は「ページのプロパティ」で,表を画面の中央に置くには「表のプロパティ」で設定します。これらを使いこなせるようになるのに,少し時間がかかりました。

なお参考までに・・・このページの冒頭にある  制作レポート@  の文字は,表を使ったものではありません。文字を黄色にして,上から青いマーカーを塗ったものです。単色の四角形の中に文字を入れるときはこちらの方が簡単です。

D フレームページの作成 

これも,試行錯誤の連続でしたねえ。最初は,フレームページを作りました。カッコいいから。でも,Internet Explorer を使っていない人にこのHPを見てもらえないんじゃないか?と思って,途中でフレームを使わない仕様に変更しました。そうすると,順にページをめくるような作りになるので,「NEXT」「BACK」というナビゲーションアイコンを使って,1つずつハイパーリンクを設定しなければならないわけです。ホントはもっと簡単な方法があるのかもしらんけど,とにかくそうやって地道な手作業でしこしこハイパーリンクを設定しました。

で・・・終わってからよく考えると,やっぱりページ間の移動のしかたがわかりにくい!う〜む・・・困った。やっぱりフレームページにしよう!IEくらい,雑誌の付録でタダで手に入るんだし --- それで,フレームページを作ったはいいんだけど,ハイパーリンクの設定は全部やり直し。もう「NEXT」「BACK」は必要ないわけです(画面に常時メニューが出ているので)。いや〜,これはめんどくさかった。なお,フレームページにハイパーリンクを張るときは,ターゲットフレームの設定に注意しましょう。詳しくは市販のマニュアル等を見てください。

E 掲示板の作成 

これがまた大変。何しろ,市販のマニュアルにはほとんど書いてない。最初にチャレンジしたのは,「ファイル―新規作成―ページ―全般―ゲストブック」。ところがこれだと,届いたメールがどこに表示されるのかわからない。で,次に「ファイル―新規作成―ページ―全般―フィードバックフォーム」にトライ。これだと一応,ACCESSのデータベースに蓄積されていくわけですが,これもどう表示したらいいかわからない・・・

結局,サポートサービスに電話して聞きました。で,ようやくわかりました。そこで説明された掲示板の作り方の手順は,次のとおりです。

(1) 「ファイル―新規作成―Web」で,「作業中のWebに追加する」のチェックボックスをオンにする。

(2)「ディスカッションWebウィザード」を開き,指示に従って(以下のとおり)操作する。

(3)主な機能は,「目次(推奨)」と「検索フォーム」を選択。

(4)ディスカッションのタイトルを適当に入力(例:「お便りのコーナー」)。

(5)入力フィールドは「議題とコメント」を選択。

(6)「誰でも投稿できるようにする」を選択。

(7)「アーティクルのリストの並べ方」は「新しいものから古い順へ」を選択。

(8)「このディスカッションの目次のページをこのWebのホームページにしますか」は「いいえ」を選択。

(9)検索フォームの情報は「議題,サイズおよび日付」を選択。

(10)「Webテーマの選択」はしない。(画面の背景色などは自分でカスタマイズする)

(11)フレームについては「デュアルインターフェイス」を選択。

(12)以上で操作は完了し,frm, post, srch, tocf, welc の文字のついた5つのファイルが生成されます

(13) frm が掲示板の初期ページ(上下フレーム)です。上のフレームが tocf(投稿を表示するページ),下のフレームが welc(あいさつ文を表示するページ)です。トップページからこの frm にリンクを張るわけです。なお,post は投稿コメントを送信するページ,srch は検索のページです。これらのファイル間には,生成時に自動的にリンクが張られています。

(14) 投稿内容は,tocf のページ(初期ページの上のフレーム)に(投稿者が入力した)タイトルで表示されます。そのタイトルをクリックすると,同じ画面にコメントの内容が表示されます。

(15) 画面のカスタマイズやアイコンの配置,ハイパーリンク先の追加や変更などを適宜行い,掲示板の完成です。

 

で,実はいったんこれで掲示板を作ってアップロードしてみました。一応うまく動きはしたのですが,これだと「タイトルをクリックしないと本文が読めない」という点が面倒です。たくさんの投稿があって全部の文面を表示するのが大変な場合はこれでいいのでしょうが,このHPのように限られた趣味の人たちからの少数の投稿しか想定していない場合は,最初から本文を全部掲載した方がいいのではないか?と思い直して,自分であれこれ試した末,最終的には次のようにして掲示板を作りました。

(1) 「ファイル―新規作成―ページ」で,「ゲストブック」を選択。

(2) デフォルトではコメントの入力欄しかないので,その上に名前やアドレスの入力欄を作ります(欄は「挿入―フォーム―1行テキストボックス」で挿入)。背景やフォントなども適当にカスタマイズします。

(3) 画面上で右クリックして「フォームのプロパティ」を開くと,「送信先」としてguestlog というファイルが指定されています。(HPをアップロードするまでは開けない)

(4) HPをアップロードしてブラウザ(IE)を開き,動作確認のため自分でゲストブックにコメントを入力します。「更新」をクリックすると,guestlog にそのコメントが表示されます。

(5) 自分で入力したコメントを消したり,書式を変更したりするときは,この画面を「ファイル―FrontPageで編集」で編集します。 

(6) このHPでは,guestframe というフレームページを新たに作ってゲストブックを表示しています(上のフレームが guestlog<投稿コメントの表示用>,下のフレームが guestbook<投稿者の入力用>) 。

 

その他,参考までに2点触れておきます。

● 「確認フォーム」は作成不要だと思います。(正確な情報収集が目的ではないので,投稿者が多少書き間違えてもかまわない。また,記入内容は投稿者が自分のブラウザで修正できる)

● このホームページには「アンケートのコーナー」も作りました。こちらは「ファイル―新規作成―ページ―全般―フィードバックフォーム」で作成しました。フィードバックフォームは元来ビジネス用の顧客情報収集が主な目的であり,結果をACCESSのデータベースに自動的に保存することができます(こちらは市販のマニュアルにたいてい詳しく説明されています)。その一部をサイト上に表示することもできますが,ACCESSのデータとしてしか表示されない(テキストデータに自動的に変換して表示するような設定はできない)ため,掲示板として利用するには不向きです。また,データの蓄積が正常に行われるかどうかのテストを,アップロード前に行うことはできません。

★追記(2000/1/11)★

アンケートは,当面中止しました。自分で入力してみてもうまくACCESSのデータに入っていかないので,Microsoftのサポート(90日のサポート期間を過ぎていたので有料!1件3,150円です)に問い合わせたところ,「プロバイダがaspに対応しているかどうか確認してください」とのこと。で,プロバイダ(Cyber Trading Co.)に確認したところ,「サーバーがNTでなくUNIXなので,aspファイルは表示はできるがACCESSのデータベース云々は使えない」とのこと。何のことやらわかりませんが,とにかくプロバイダによってはACCESSにアンケートのデータを蓄積できないことがある,ということはわかりました。一応参考までに。

★追記(2000/1/23)★

掲示板の最初の仕様は,「最新の情報が末尾に追加される」という形でした。これを何とか「最新の情報をトップに置く」ようにしたい・・・ということでやってみたけど,どうしてもうまくいかない!原理は簡単なのです。こんな感じ。

@ 入力フォーム上で右クリックして「フォームのプロパティ」を開く。

A 「オプション−結果ファイル−ファイル形式」で「HTML」を選ぶ。(テキスト形式を選ぶと,その下の「最新の結果を末尾に追加する」のチェックボックスがオフになってしまい,最新の情報が強制的に末尾に回されてしまう)

B 「保存フィールド」のタブをクリックして,保存するフォームフィールドや日付の表示方法を設定する。

これは,Microsoftのサポートのお姉ちゃんに電話で教えてもらった方法です。ところがですね,これでやると,「1行テキストボックス」(名前やアドレスの入力欄)の入力内容は正しく表示されるのに,「スクロールテキストボックス」(コメントの入力欄)は guestlog のファイルに表示されないのです。

それで再度,サポートのお姉ちゃん(別の人)に連絡。いろいろ試してもらった結果,次のようなことがわかりました。

(A) 上のAで「HTML」を選ぶ場合,その下の「フィールド名を含む」に必ずチェックを入れておくこと(このチェックが入っていないと,スクロールボックスの入力内容が表示されない)。

(B) フィールド名がいちいち出てくるのがジャマくさいときは,ファイル形式を「HTML」でなく「HTML内の書式つきテキスト」にすれば,「フィールド名を含む」のチェックを外しても大丈夫。

しか〜し,(B)の方法にも問題あり!このファイル形式にした場合,入力者が適当な位置で改行しない限り,コメントのデータがえんえんと横につながってしまいます。つまり読む側は,ず〜っと右にスクロールしながら読まなければならないわけ。こりゃかなわん,ということで,結局(A)の方法を採用することにしました。

それにしても,こんなことは市販のマニュアルには全然書いてないし,ひょっとしてソフトを作った時点では気づいてなかったんじゃないかと思います。こういう情報を,メーカーは自社のHPできちんと報告してほしいもんです。自社製品の欠陥を公表するのは勇気がいるとは思うけど。3,150円返せ〜。

F その他の注意(1):ファイル名に日本語を使うな!

そういうことは,早く教えてくれよな〜!--- 最初はわかりやすいように,ファイル名に「チヌ写真」とか「料理ホーム」とか,日本語の名前をつけておったわけです。そういうことしちゃいけない,とは市販のマニュアルに書いてなかったから。ところが,雑誌を読んでると「ファイルには日本語は使わない方がいい」とある。いや〜,これには参りましたね。ファイル名全部つけ直し。ハイパーリンクの設定も全部やり直し。おまえら,ええ加減にせえよ!いや,誰に怒ってるわけでもないんです。みんなオレが悪いんです・・・

G その他の注意(2):ファイルサイズに注意!

ほとんど完成しかけたところで,ふと気になって FrontPage の「レポート」ビューを開いてみました。けっこう写真が多いので,ダウンロードに時間がかかりすぎるんじゃないか? --- で,「表示の遅いページ」で,表示に30秒以上かかるページを検索してみると・・・何と,60以上ある!--- これはいかん,ということで,サイズの大きいファイルを切り分けていきました。そうすると,どうしてもページをめくるような構成にせざるを得ず,再び「NEXT」「BACK」のアイコンが復活!な〜にやってんだか。・・・教訓。画像を入れるのはほどほどに。(でも結局,表示の遅いファイルはいっぱい残ってます。ダウンロードに時間がかかって申し訳ありません)

【参考】 FrontPageについての情報は,GEAR's Home Page中の FrontPage関連Webサイト にリンク集があります。