>>Close

自由課題で作成したプログラムを閲覧者が試してみたい場合、そのプログラムを保存する必要がある。

sample.rb

#!/usr/koeki/bin/ruby

うんたらかんたら

というようにWebページ中にプログラムをそのまま記載した場合、閲覧者はemacsでファイルを新規作成してプログラムを貼り付け、保存する必要がある（これまで授業で行ってきた方式）。

sample.rb

このようにハイパーリンクにしておけば、聞き手は右クリックをしてファイルを保存するだけで即座に実行できる。この方法について確認しておこう。

プログラムファイルの移動

Webページとして表示したり、ブラウザからダウンロードできるようにするためには、そのファイルを~/public_htmlというディレクトリの中においておく必要がある。

これまで作成したプログラムはRubyディレクトリに保存していたので、ダウンロードできるようにするためにはpublic_htmlディレクトリに移動（コピー）する必要がある。

移動はmvコマンド、コピーはcpコマンドを使用する。ここではpublic_htmlディレクトリにコピーする方法を確認しよう。Rubyディレクトリに移動した上で、

%pan{c10xxxx} cp ~/Ruby/sample.rb ~/public_html[Return]

で、public_htmlにsamplle.rbがコピーされる。cpのかわりにmvとするとpublic_htmlにsample.rbが移動される。移動先を指定する際、~/をつけることで絶対パス指定となる。

移動先は、~/public_htmlとしているが、仮にpublic_htmlの中に自由課題用のディレクトリ（例えばhoge）を作成している場合は、cp ~/Ruby/sample.rb ~/public_html/hoge[Return]というように、public_htmlの後ろにディレクトリ名を指定する。

ハイパーリンクをつける

ハイパーリンクを書くのはa要素（<a>タグ）である。

<p><a href="ファイル名">Web上に表示するテキスト</a></p>

と書けばよい。少し上のほうでダウンロードできるようになっていたsample.rbのハイパーリンクは次のように書かれている。

<p><a href="sample.rb">sample.rb</a></p>

プログラムの文字コードについて

プログラム作成者とWebページ作成者が異なる場合、作成したプログラムをメールで送ることになると思うが、この際、メールの本文にプログラムを貼り付けて送ると、文字コードがEUCからJISに変わってしまう。このままでは日本語が文字化けしてしまうので、文字コードの修正を行おう。

emacsでプログラムを開き、以下を入力すると文字コードをEUCに戻すことができる。

Ctrl+x Ctrl+m f euc-jp[Return]と入力してからCtrl+x Ctrl+s

上の図の○の部分が文字コードである。EであればEUCなので正常、Jの場合はJISになっているので、上記コマンドを入力しよう。正しく入力するとEに変わる。

>>Close

>>Close

3Dアウトライン	SOTAクローム
ウェブタイトルヘッダ	エイリアンネオン
エイリアン発光	かじり取り
ぐにゃぐにゃ	グラデーション面取り
クリスタル	クローム
コミック本	スピード文字
チョーク	テクスチャ
ネオン	ブレンド化
基本I	基本II
牛模様	光沢
新聞印刷	星のきらめき
霜	彫刻
超新星爆発	白熱の輝き
粒子の軌跡	文字円
冷たい金属

>>Close

>>Close

作成したロゴをWebページに貼り付ける場合、public_html/に保存されていれば、htmlファイルに以下のように書けばよい。

<p><img src="ファイル名" width="横幅" 
height="縦幅" alt="ファイルの説明"></p>

作成した画像ファイルのpublic_html/への保存（移動）は状況によっていくつかの方法がある。

Webページ作成者＝ロゴ作成者の場合

• GIMPで保存する際にpublic_html/に保存：GIMPで作成したロゴを右クリックしメニューから「保存」を選ぶ。ここで保存先として~/public_html/を選ぶ。
• ホームディレクトリに保存してから移動：GIMPで保存するディレクトリを変更する方法がわからない場合、とりあえず初期設定のままファイル名をつけて保存すると、ホームディレクトリに保存される。その後、ktermでホームディレクトリに移動してから
  pan{c10xxxx}% mv ファイル名 public_html[Return]
  で、public_html/に移動される。

Webページ作成者≠ロゴ作成者の場合

• メールの添付ファイルで送ってもらう：ロゴ作成者よりメールの添付ファイルとしてWeb作成者に作成したロゴを送ってもらう。送ってもらったロゴは以下の手続きでpublic_html/に保存する。
  • 受信：通常通り受信をすると、添付ファイルのあるメールは、メール一覧画面の左端にMもしくはTが表示される。Tはファイルのサイズが大きく、添付ファイルはあるが受信はしていない状態を指す。

      M06/12 To:naoya@e.koe Re: C104000-kadai128
       06/12 To:naoya@e.koe Re: C105000-kadai23
      T06/12 To:naoya@e.koe Re: C108000-kadai235

  • 添付ファイルの取り込み：Tの表示がある場合にこの添付ファイルを受信したい時は、Tの行でIと入力。さらにパスワードを入力すると受信されTがMになる。
  • 添付ファイルの保存：Mの行で.（ピリオド）を押すと添付されたファイルのリストが表示される。カーソルキーで添付ファイルの行に進み、yを押すと下部に保存先を示すFile:~/hoge.pngが表示される。ここでFile:~/public_html/hoge.pngのようにpublic_html/を追加する。保存先が決まったら[Return]で保存完了。

    M06/12 To:naoya@e.koe Re: C104000-kadai128
      1 Image/Png                         hoge.png
  

• ロゴ作成者のpublic_htmlに画像を保存しておき、直接ハイパーリンクする：ロゴ作成者が、自分のpublic_htmlに作成したロゴを保存する（GIMPで保存する際にpublic_htmlを指定するか、保存後にmvコマンドで移動）。すると、ロゴ作成者の学籍番号がc107000aでファイル名がhoge.pngの場合

  <p><img src="http://roy.e.koeki-u.ac.jp/~c107000/hoge.png" 
  width="横幅" height="縦幅" alt="ファイルの説明"></p>

  で、画像を表示することが出来る。

>>Close