ホームページ作成入門

  1. ホームページとは
    1. 定義。もともとホームページは、一連のWebページのホームとなるページ(今でいうトップページ)を指していたが、現在では一般に「Webページを作成する」だけでなく「インターネットで情報を発信」することまでを含めての意味を持つようになっている。HPと略号で書くと、他との誤解を生むことがある。
    2. ワープロとは違う
      1. 紙に書くのではなくディスプレイに表示するための文書(ワープロは、紙に印刷することを意識して作られる)
        1. ブラウザ(InternetExporer, Mozilla Firefox等)で見る
          1. =特定のアプリケーションソフトウエアがなくても読める
          2. どのOS(WindowsやMacやUNIX)でも読める。
        2. いろんなディスプレイが存在する。ディスプレイのサイズも様々、ウインドウサイズも可変。携帯電話の小さい画面で見る人もいる。
        3. 印刷時の注意
          1. ホームページはそのままプリントすると何枚になるかわからない
            →1枚だけプリントするにはどうするか?一般的な印刷方法の勉強。プリントができるかどうか確認してみよう
      2. ワープロ文書がファイルをUSBメモリーで渡したり、メールの添付書類で送るのに対し、文書ファイルをサーバに転送し、サーバに置いたものを閲覧してもらう。
        1. ホームページ作成と公開、全体の流れ(図をクリックすると大きく開きます)
        2. パソコンに置いた状態では見てもらえない。
          1. サーバと呼ばれる24時間電源ONの計算機へファイル転送が必要。
          2. 公開しているサーバでの閲覧が原則。特定の端末だけに閲覧を許可したり、パスワード付きにして閲覧者を限定することもできる。
            1. http://staff.miyakyo-u.ac.jp/~ugawa/ 学外パソコンからも閲覧できる(本学職員のみ利用可能)
            2. http://students.miyakyo-u.ac.jp/~ugawa/ 学内パソコンからでないと閲覧できない
            3. http://ugawalab.miyakyo-u.ac.jp/f4/ Diary日記のページはパスワードでブロックできる
        3. 転送の手順は以下のとおり。各種設定のため最初に1回だけやればいいこと、ファイルを作成するときに毎回するべきことがある。
          1. サーバでの置き場所の準備(公開用サーバの整備)
          2. ファイルの作成
          3. ファイルの転送
            1. 1枚のページは複数のファイルから構成されているので、複数のファイルを位置関係を保って転送する必要がある。
              http://edb.miyakyo-u.ac.jp/ugawa/class/docs/web.html
  2. 公開用サーバの整備(この部分は現在の在学生については入学時点で作成されているので作業の必要はない)
    1. UNIXの自分の領域内にホームページ用の領域public_htmlを作成する。
      1. 基礎知識:サーバはいわゆる共有コンピュータで様々な役割がある。多くの人がloginできるので、他の人に見せたくないデータを保護する仕組み=ファイル、ディレクトリのパーミッションがある。例えばメールの中身など。これらを見せないで保護するとともに、公開すべき部分のみをうまく見せる仕組みがある。
      2. Webページの領域(ディレクトリ)の作成
        1. telnetまたはsshでUNIX(students.miyakyo-u.ac.jp)にloginし、以下のコマンドを打つ(他の授業等で、すでに作成されている人は、この作業は必要ない)。以下の参考を参考に!
          1. Windowsではteraterm, MacではMacSSHを使用する。
          2. cd (ホームディレクトリに移動する)
          3. mkdir public_html (public_htmlというディレクトリを作成する。)
      3. Webページの領域を他の人から見えるようにする(読み出し等の権限の設定)
        パソコンと違いUNIXコンピュータは複数の人が使う。プライバシーを守るため、公開してよい部分とそうでない部分をわけ、その場所に移動し、見ることができるよう権限を与える作業が必要。
        1. ホームディレクトリに移動し、公開用のディレクトリが含まれるディレクトリまで移動できるように実行権を与える。ディレクトリ自体は読み出し権がなくてもOK。以下の UNIXコマンドを打つ
          1. cd   (ホームディレクトリに移動する)
          2. chmod +x .  (ホームディレクトリ領域に移動できるようにする。読めない。)
          3. chmod +x public_html (public_htmlに移動できるようにする。)
          4. chmod go+r public_html (public_htmlの読み出し権を与える。)
          5. (chmod go+r public_html/* (public_html内のファイルの読み出し権を与える。))
        2. 参考
          1. 個人のページを学内で公開するには
            http://www.students.miyakyo-u.ac.jp/curri-ex/media/txt/seturl.html
          2. UNIXにloginするには
            http://www.students.miyakyo-u.ac.jp/curri-ex/etc/sub/win.html
          3. UNIXへのログイン(telnetを使う)
            http://www.ipc.miyakyo-u.ac.jp/online/unix/unix.html
          4. ファイルとディレクトリの概念、読み書き実行権について
            http://www.din.or.jp/~raelian/unix_permission.html
  3. ファイルの作成と編集
    1. Webページ編集は、パソコン等で、HTML(Hyper Text Markup Language)ファイルを作成する。また、Microsoft Wordなどの文書をWeb用に保存すれば、既存の文書を簡単にWeb公開できる。
    2. 昔は、テキストエディタで編集を行っていたが、現在では、専用ソフトを使うべき。
      1. 日本語文字コードがContent Typeで自動的に指定でき文字化けを防止できる。
      2. 画像サイズがhtmlを読み込んだ段階でブラウザが位置を判断でき高速表示が可能となる。
      3. HomePage Builder, GoLive,Dreamweaber等の専用ソフトウエアを使用することより複雑な処理、サイト管理(大量のページの一括変更、更新部分の自動転送)等が行える。
      4. とりあえず専用ソフトではなく試作ができる程度のMozilla のComposerを使うか、MicrosoftWordで文書を作成し、HTMLで保存するようにする。Wordで作成すると、Word特有のゴミが入り、それが表示を狂わせることがある。とりあえず使うつもりでいてほしい。
    3. Mozilla のComposerを使う場合の簡単な説明(現在のFirefoxにはこの機能はありません)
      1. Composerの基本操作(Windowメニュー→composer)(アイコンの意味)
        1. 文字の入力と編集、配置、色、テーブル
        2. 画像の入力と編集、配置(gif,jpeg,png)
        3. ハイパーリンクの作成方法、確認方法
          1. 他のページ(他のファイル)
          2. 他の機能(mailtoは不用意に使うと、迷惑メールやウイルスメールが送られてくるので要注意)参考:http://edb.miyakyo-u.ac.jp/ugawa/mailto.html
        4. ローカルHTMLファイルのソース(HTML)の確認と変更→エディタの使用。一部手直しや高度なコマンド、内容を調査
          1. その他。HTML形式のmailも送れるが相手が読めることが必要
    4. 無料で使用できるオープンソースのオフィス互換ソフト、LibreOfficeのWriterには、HTMLを編集することができる機能がある。
  4. ファイルができたらサーバへの転送。
    1. 転送方法は以下のどれかを用いる。
      1. ファイル転送用ソフトウエアを用いる
        1. WindowsではWinSCPやFFFTPを使う
          http://edb.miyakyo-u.ac.jp/JOHO/contents/FFFTP.html
          WinSCPの方が学外からも接続できるし、暗号化通信を使っているので安全。
        2. MacではFugu, Fetch, Interarchyを使う。
        3. Composerに内蔵されているFTP機能を使うこともできる。指定方法:
      2. 学内LANの機能を使ってDrag&Dropのファイル転送機能を用いる
        1. Winの場合は、ZドライブにDrag&Dropしたのち、chmod go+rする。理由:Zドライブで転送した場合は、他人に見えないよう、Permissionが変更されてしまう。
        2. マックの場合はDrag&Drop。
    2. 転送できたらWebで見ることの確認。
      1. public_htmlは、http://students.miyakyo-u.ac.jp/~d9999/ として見えている。
      2. index.htmlというファイルがあると、そのディレクトリ一覧の代わりのWebページとして表示される。
      3. 画像つきのページを作成し、位置関係を保ってサーバに転送する。
      4. 隣の人にメールでURLを送信してURLをクリックすることで見えるかどうか確認してもらう。自分自身ではうまく見えていても、他の人が見ると表示されていない場合がある。これは、一部のファイルが転送されていないから起こる(=自分自身では、転送されていないファイルも見えるので気がつかない)。
  5. 大学以外でのホームページの取得
    1. FC2を例に
      1. FC2のIDを取得http://web.fc2.com/
        1. 登録画面に入力したメールアドレスに確認メールが届く
      2. ホームページを作成 FC2WEB
        1. 「ホームページを作る」のボタン
        2. 「無料ホームページ登録」のボタン
        3. 「同意する」のボタン
        4. 新規登録の情報入力、パスワードもここで設定
        5. 届いたメールでURLを確認
      3. ファイルマネージャかFFFTPでファイル転送
        1. 無料版はファイル1つのサイズが1MByte以下、デジカメの写真もサイズを小さくしないと置くことができない(縮小するには?)
        2. 無料版はmp3,wmvなどのファイルを置くことができない。
      4. 携帯への QRコード表示が邪魔であれば「アカウント情報」で「QRコード挿入位置」を「無効」にする
      5. その他の使用方法はfc2によるマニュアルのページ
    2. 上記作業のマニュアル
      http://taiwa.miyakyo-u.ac.jp/sample/files/ugawa_HowToCreateHomepage/ugawa_HowToCreateHomepage.html
  6. ホームページ作成のまとめ
    1. 情報の共有の基本。だれでも情報発信ができる。
    2. ワープロは紙に。Webは、ディスプレイに表示するもの。
    3. 各種設定のため最初に1回だけやればいいこと、ページを作成するときに毎回するべきことがある。
    4. アドバンストコース
      1. PerlとCGIを使った電子掲示板の作成等
  7. 注意
    1. 著作権に関するもの。どんなものでも他人が作成した文書、図、写真は許可を貰ってから公開すること。無意識のうちに公開されてしまう場合もある。
    2. プライバシーに関するもの。公開して良いものと悪いものがある。たとえ自分の情報でも公開すると危険で後悔する。

--鵜川義弘 ( )