お帰りなさい｡
最初のウェブサイトを作ろう
Web Serverというフォルダを作成しました｡ このフォルダが当面のWebサーバーになるからです｡
そして､ このWebサーバーの中に､ HTMLファイルを作成するための拡張子となるインデックスHTMLファイルを用意しています｡
Pythonを書くためのpyと同じように､ JavaScriptを書くための拡張機能であるscript JS､ そしてCSSのスタイルを書くためのstyle
CSSがあります｡
このセクションでは､ サブライムテキストとAI用語ターミナルを使用しますが､ お好きな開発ツールを使用することができます｡
スクリーンレコーディングのためだけに､ こういうものを使うのもいいですね｡
まあ､ きれいでいいからということで､ 手伝ってくれるのです｡
あまりヒントを与えないので､ 私も間違いを犯しながら､ それをどう修正していくかを一緒に見せていくことができるのです｡
しかし､ 繰り返しになりますが､ Visual Studioのコードでも何でもかまいません｡
ここで､ これらのファイルがすべて空であることがおわかりいただけると思います｡
しかし､ Webサーバーはこの3つのファイルをブラウザに渡すだけで､ ブラウザはページを表示できるようになることを覚えておいてください｡
では､ まずHTMLから｡
HTMLをどう書くか？
さて､ Sublime textでは､ HTMLを入力してからタブを押すと､ 実は面白いことができるんです｡
自動入力されるんです｡
わかった､ わかったよ｡
なんとなくごまかしながら､ でもね､ 退屈はさせたくないから｡
つまり､ 拡張子がドットhtmlなので､ これは標準的なHTMLファイルなのです｡
こういう構文があれば､ HTMLも書けるし､ そんなに難しくはない｡
ここではバックスラッシュを使った開始タグと終了タグを用意しています｡
そこで､ ホームページの頭にタイトルをつけています｡
つまり､ これがタブに表示されるわけです｡
では､ 私のものとします｡
ウェブサイト
とてもクリエイティブです｡
それが頭で､ 次に体なんですね｡
これは､ ウェブサイトに表示されるものです｡
だから､ この中で私はウェブマスターと言えるのです｡
ただ､ それだけなんです｡
そして､ HTMLファイルを作成しました｡
では､ これをご覧ください｡
今､ indexを開くと｡ htmlを右クリックし､ ウィンドウで開くか､ このファイルをダブルクリックしてください｡
だから､ これをダブルクリックすると､ あれを見てください｡
私はウェブマスターです｡
シンプルなテキストだけでいい｡
特に変わったことはありません｡
でも､ この度､ 初めてホームページを作成しました｡
CSISの話を続けよう｡
CSSは､ htmlのcss構文とは異なる構文を持っています｡
このような感じで行ってください｡
どのようなhtml要素にスタイルを追加したいかを指定することができます｡
私たちの場合､ ボディとします｡
と体言できる｡
次に中括弧｡
そして､ この中に背景を置きたいのですが､ 仮に色としましょう｡
うーん｡
グリーンで行こう｡
これを保存すると
そして､ ページを更新しています｡
うーん｡
何も起きなかった｡
また､ これは小さなことですが､ これはWeb開発のコースではないので､ あまり気にする必要はありません｡
しかし､ 基本的に最初に起こることは､ HTMLファイルが送信され､ ブラウザに読まれるのは実はHTMLファイルだけだということです｡
だから､ HTMLファイルの中で､ ちょっと､ HTMLって言わなきゃいけないんです｡
ちなみに､ CSSファイルも用意しています｡
それをWebサイトでも使えるのですか？
では､ headタグの中でやればいいんですね｡
リンクタグと呼ばれるものを使うことで
だからリンクタグ｡
実は､ この一部を取り除くことができるのです｡
単純に､ テキストCSSの一種で､ H refというものがあるんだよ､ と言えばいいんです｡
Hrefは､ 単に「おい､ このファイルはどこにあるんだ？
この場合､ インデックス付きのHTMLと同じフォルダにあるので､ 単純にstyle dot CSSと言うことができます｡ なぜなら､
Solidot CSSを探せば､ そこにスタイルファイルがあるからです｡
そして今､ あなたが覚えているなら､ 私たちは含める必要がある関係スタイルシートも持っていました｡
こっちで書いていることがわかるように､ 削除しただけです｡
スタイルシートを作成する場合､ CSSファイルをインクルードする場合は､ この構文に慣れる必要があります｡
これを保存して､ 戻って更新すると｡
おい､ あれ見ろよ｡
私の醜いホームページ
もうちょっと大きくしようよ｡
背景色が緑色の醜い私のホームページが､ 少しは格好良くなりました｡
もう一度､ デベロッパーツールを開くと｡
そして､ 更新を押した｡
あれを見てください｡
HTMLファイルとCSSファイルを取得します｡
すごい｡
だから､ 自分でWebサーバーを作っただけです｡
そうですね｡
ここにJavaScriptを書くこともできる｡
しかし､ 繰り返しになりますが､ これはJavaScriptの講座ではないので､ 今回は気にする必要はないでしょう｡
お待たせしました｡
今､ JavaScriptを書きましたが､ これはPythonでprintを書くようなものです｡
もう一回ページを更新したら｡
JavaScriptファイルが表示されないのは､ インデックスHTMLにJavaScriptファイルが必要であることを再度伝える必要があり､
通常JavaScriptファイルはscriptタグに含まれ､ 通常bodyの一番下にあります｡
では､ それを閉じましょう｡
そして､ ここでは､ refを使う代わりに､ sourceをCRCとすればいいのです｡
そして､ もう一度､ JavaScriptのファイルはどこにあるのか？
スクリプトJSで､ これを保存してページを更新すると
あれを見てください｡
JJのスクリプトを読み込んで､ コンソールタブをクリックすると､ コンソールに何かが表示されます｡
コンソールとは､ JavaScriptが使用するものです｡
しかし､ 私たちが気にするのは､ この3つのファイルを提供できるかどうかだけです｡
私たちが行ったのは､ 最初のサーバーを作ることです｡
でも､ お気づきでしょうか？
あなたがここに上がってきたとき
今あるURLのパスを見てください｡
普通､ ホームページに入力する内容ではないですよね？
つまり､ このxkcdドットコムのウェブサイトは､ ドットコムがhttpを使用していることを確認したのです｡
これって本当のURLですよね｡
というのも､ 私たちが行ったのは､ ご覧のように､ 私たちのコンピュータにあるファイルをブラウザに表示させるだけだからです｡
つまり､ ブラウザが「あなたのコンピュータのここにあるファイルを表示しますよ」と言っているだけなのです｡
つまり､ 本来はウェブサーバーがあり､ ブラウザも動作しているのですが､ 現実にはそうなっていないのです｡
なぜそうなるのでしょうか？
さて､ あなたが自分のホームページを持っていたらと想像してみてください｡
世界中の人々が､ あなたのコンピューターから直接あなたのウェブサイトにアクセスし､ あなたのコンピューターからファイルを取得することを本当に望んでいるのでしょうか？
つまり､ ダメなんです｡
そうですね｡
セキュリティの問題もありますしね｡
性能面ではいろいろと問題がありますね｡
ホームページにアクセスしてもらうためには､ ずっとノートパソコンの電源を入れておかなければなりません｡
その代わりに､ その名の通りファイルを提供し､ ブラウザにファイルを提供することに特化したウェブサーバが欲しいのです｡
心配のいらない世界のどこかへ｡
私のパソコンにはありません｡
誰かがそのマシンを所有し､ 誰かがそのコンピュータを所有し､ 常にオンになっているので､ 私たちがウェブサイトやリンクにアクセスするときはいつでも､
それが常に稼働し､ それらのファイルを送信することになります｡
ここでようやくPythonに戻るわけですが､ 私たちがやりたいのは､ 単にこれらのファイルをマシン上に置くことよりも､
もっと洗練されたことなのです｡
その代わりに､ Pythonを使って実際のサーバーを構築し､ 世界中の人が私たちのウェブサイトにアクセスできるように配備したいのです｡
今､ あなたはまだ迷っているかもしれません｡
まだ始まったばかりなので､ この一連の流れは完全には理解できないかもしれません｡
でも､ 心配しないでください｡ 最後には､ すべてが理解できるようになりますよ｡
それでは､ ブラウザのことはひとまず忘れて､ 実際のサーバーを構築してみましょう｡ 今までやってきたことよりももっと洗練されたもの､ つまり､ これら3つのファイルが入ったフォルダを作り､
indexをダブルクリックするだけでいいのです｡
htmlを使用しています｡
次の動画でお会いしましょう｡
バイバイ｡