html以外のファイルを配信してみましょう

html以外のファイル(js/css/画像など)を設置・作成し配信してみましょう。

画像をサーバーに設置・配信し，ページに埋め込んでみましょう

まず画像設置用のディレクトリをつくりましょう。

mkdir public/images

自分がインターネットに上げている画像ファイルをサーバーにダウンロードするには， wget コマンドを使います。

例として， https://pbs.twimg.com/media/GiB9QYubwAASfep?format=jpg&name=large というURLで公開されている画像を public/images/ramen.jpg として保存したい場合

wget -O public/images/ramen.jpg "https://pbs.twimg.com/media/GiB9QYubwAASfep?format=jpg&name=large"

こういったようにサーバー上に保存した画像も，ブラウザで http://EC2インスタンスのアドレス/images/ramen.jpg とアクセスすることによりブラウザで表示できます。

また，別ページに埋め込むことができます。

vim public/index.html

以下の一行を追記しましょう。

<img src="/images/ramen.jpg">

imgタグのsrc属性に画像パス(サーバー内部のパスではなくブラウザでみるときのパス)を書くと埋め込むことができます。 public/index.html に追記できたらブラウザで http://EC2インスタンスのIPアドレス/index.html にアクセスし確認してみましょう。

今回は，私のX(旧twitter)にあげていた写真を雑に ramen.jpg と名前をつけて保存しましたが，みなさんもご自身の画像を自由に名前を決めてダウンロードし，そしてページにうめこんであげてください。インターネットに公開していない画像をEC2インスタンス内に移動させたい場合は，パソコン(sshの接続元)からscp コマンドを叩いて送信してみましょう。

※決して自分の著作物ではないファイルをダウンロード&配信しないこと。

(参考) scpコマンドの使い方

ローカルの ~/Download/hoge.png というファイルを、EC2インスタンスの ~/ 直下にコピーしたい場合

scp -i SSH用の鍵のパス ~/Downloads/hoge.png ec2-user@EC2インスタンスのIPアドレス:~/

js/cssを書いていろいろやってみましょう

画像と同じように，自由にcssやjsも別ファイルで作って配信し，htmlファイルにて呼び出すことが出来ます。

まずそれぞれ用のディレクトリをつくりましょう。

mkdir public/js
mkdir public/css

あとはjsファイルつくってみるときは

vim public/js/新しく作るjsファイル名

cssファイルつくってみるときは

vim public/css/新しく作るcssファイル名

みたいなかんじでできます。

JSやCSSのファイルを作ってHTMLから読み込んでみましょう。

JSの読み込みはscript要素でできます。 例: https://developer.mozilla.org/ja/docs/Web/HTML/Element/script#examples

CSSの読み込みはlink要素でできます。 例: https://developer.mozilla.org/ja/docs/Web/HTML/Element/link#examples

htmlにおける外部JS/CSSファイル時にパスを指定する際に，これも画像ファイルと同じように，サーバー内部のパスではなく，ウェブブラウザでアクセスするURLのパスを指定する必要があることに気をつけましょう。

もしhtmlに埋め込もうとしたのに埋め込めないってときは，ブラウザでそのURL(またはパス)が正しいのかしっかり確かめましょう。

演習

自己紹介ページを作ってみましょう。

自分で撮った写真または自分で描いたイラスト画像を、2枚以上含めたページにしてください。また、CSSでみやすく装飾してください。

サンプル: http://54.242.236.2/profile.html

演習 スマホ対応について

EC2を使って授業で作っているページは全世界に向けて公開されています。そのため，皆さんのお手元のスマホからも見ることができます。確認してみましょう。

PCのブラウザの開発者向けツールでスマホの表示を確認することができます。そちらも使ってみましょう。

スマホの表示に対応するには，まずビューポートを設定してあげましょう。

https://developer.mozilla.org/ja/docs/Web/CSS/Viewport_concepts

CSSにおいて，デバイスの横幅によってスタイルの内容をしたい場合はメディアクエリを使いましょう。

https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries