お帰りなさい｡
というわけで､ flaskの基本を学びました｡
私たちは､ サーバーが何をするのか､ また､ ブラウザが何をするのかを理解しています｡
しかし､ ここで正直に言おう｡
これはちょっとつまらないですね｡
つまり､ これは感心できない｡
これを採用候補者に見せたら､ 頭のおかしい人だと思われるでしょう｡
では､ 今まで学んだことをもとに､ 実際に見栄えの良いポートフォリオを作成してみましょう｡
さて､ ちょっとしたプレゼントがあります｡
それは､ やはりWeb制作のコースではないので､ 自分でHTMLやCSS､ JavaScriptを書かなくていいという点です｡
そして幸いなことに､ 無料のテンプレートやHTML無料テンプレートのようなものをオンラインでどこかにググれば､ あなただけが無料で使用できる本当に素敵な外観のウェブサイトを見つけることができます｡
例えば､ こちらのユニバースを見てみましょう｡ 私がプレビューした場合､ このリソースにリンクしますので､
ご自身でも見てみてください｡
確認してみてください｡
ちょっとしたウェブサイトやポートフォリオページがあれば､ それを利用するだけでいいのです｡
なんてかっこいいんでしょう｡
また､ 実はタブレットやモバイルにも対応しており､ すべてがあらかじめ構築されているのです｡
カッコイイでしょ？
では､ これをどう使うか｡
じゃあ､ ダウンロードしちゃおう｡
ちなみに､ この通りにやっていくと､ 実はどれを使ってもいいんですよ｡
でも､ とりあえず､ 宇宙の方を使ってみましょう｡
ここに小さな宇宙飛行士がいるというだけで､ かなりカッコよく見えますね｡
とりあえずダウンロードして見てみよう｡
では､ テンプレートをダウンロードするにはどうすればいいのか､ という質問がありました｡
私たちの場合は､ HTMLを選びたいのです｡
そして､ そこにあるのは
圧縮された小さなフォルダができ､ これがダウンロードされます｡
では､ これを開いてみましょう｡
そして､ なんと､ ファイルやフォルダの数が多いことでしょう｡
では､ ここから何をつかめばいいのか｡
まあ､ いくつかあるんですけどね｡
まず､ これがサンプルページです｡
実はこれは必要ないので､ ゴミ箱に移動させましょう｡
次に､ 資産です｡
これらは､ まあ､ 宇宙飛行士のページなどを動作させるための別アセットです｡
だから､ その辺はおさえよう｡
そして､ HTMLページです｡
それは､ 私たちに必要なことです｡
そして､ JavaScriptファイルやCSSファイルがあるようです｡
ここにドットGZがありますが､ これは圧縮ファイル､ GZ圧縮ファイルと呼ばれるものです｡
これは､ サーバーがファイルやJavaScriptファイルを送信するためのもので､ 138キロバイトあるのがわかりますが､
圧縮されているので44キロバイトになっています｡
このように､ フロントエンドに送るデータを少なくすることができます｡
また､ MAPのようなものもあり､ これは実際にデバッグの際に役に立ちます｡
しかし､ 我々の場合､ 今のところこれを気にする必要はない｡
そこで､ GZIPファイルとマップファイルをすべて削除してしまいましょう｡
そこで､ これらをゴミ箱に移動して､ CSSファイル1つとJavaScriptファイル1つだけを残し､ 他のものはすべて異なるページ用のHTMLファイルにします｡
では､ これをコピーして､ プロジェクトフォルダに移動します｡
このフォルダーを覚えていますか？
ですから､ 理想的には､ HTMLファイルをテンプレートに移動し､ 静的ファイル､ つまりCSSとJavaScriptのファイル､
そしてアセットをここに移動します｡
ということで､ ここにある画像です｡
では､ そうしましょう｡
私のウェブサーバーはここにあります｡
まず､ 先ほどコピーしたものをそのまま貼り付けます｡
そして､ すべてのHTMLファイルを移動させましょう｡
私たちのテンプレートに
そして､ 既存のテンプレートも不要になったので､ 削除しましょう｡
これできれいなHTMLファイルができました｡
そして､ これらをすべて揃えればいいのです｡
新しいインデックスができました｡ htmlは､ 今までのWebサイトよりずっときれいになるので､ それを使いたいですね｡
そこで､ すべてをテンプレートに移し替えましょう｡
そして､ JSとCSSファイル､ assetsフォルダをstaticの中に入れてやりましょう｡
すごい｡
それでは､ プロジェクトに戻り､ この設定を見てみましょう｡
書いていないHTMLはまだまだたくさんありますが､ 幸いにもすでに作成されています｡
さて､ 最後の設定ですが､ ファイルを移動させたので､ HTML､ CSS､ JavaScript､ およびすべてのアセットファイルの間のリンクを調整する必要があります｡
そこで､ index HTMLに移動すると､ スクロールします｡
バチカンやアセットファブのアイコンを探していることがわかります｡
しかし､ これはstaticフォルダにあるため､ ここにstaticを追加する必要があります｡
では､ この中で他にどこのアセットを使っているか探してみましょう｡
わかりました｡
だから､ これをもう少し大きくしてみようという感じです｡
というわけで､ 背景画像はこんな感じです｡
もう一度､ 宇宙のイメージを探しますが､ それは静的フォルダの中で知っている通りです｡
そして､ こちらも同様に､ 他には何があるのか見てみましょう｡
静止画をやろう｡
続けてみよう｡
静止画です｡
わかりました｡
すべて順調です｡
これで､ staticフォルダができました｡
それと､ ドットの前にスラッシュを付けるようにしないといけません｡
ドットはカレントディレクトリを意味し､ その後､ 静的フォルダを探します｡
だから､ もう一度､ すべてについてそうすることを確認しよう｡
これでよしとしよう｡
そして､ そこに行く｡
では､ これを保存してみましょう｡
そして､ まだ完全に終わっていないと思いますが､ とりあえず､ サーバーに入りましょう｡
ドットパイです｡
そして､ ホームルートは､ 今までのものを削除してみましょう｡
そして､ それを私のホームファンクションと呼ぶことにしましょう｡
これはパラメータを取らない代わりに､ 私たちのために返してくれるのです｡
当社のインデックスです｡
パラメータに過去を持たないHTML｡
だから､ 保存しよう｡
当社のページに戻る
あるいは私のホームページ｡
そして､ 更新したときに何が出るか見てみましょう｡
わかりました｡
かなり､ 醜いサイトですが､ 少なくとも何かを表示しているように見えますね｡
しかし､ すぐに､ CSSが適用されていないように見えることに気づきます｡
HTMLはあるようなのですが､ リンクもうまくいきません｡
つまり､ もう一度､ ファイル間のリンクを更新する必要があるからです｡
そこで､ index dot HTMLに戻って､ headタグの中にスタイルシート､ つまりCSSファイルがあることを確認します｡
しかし､ やはりこれをアップデートしないとスタティックには持てない｡
フォルダー
同様に､ JavaScriptファイルも､ 一番下までスクロールしていくと､ ここにJSファイルがあります｡
これもまた､ 静的フォルダーになります｡
よし､ 保存しよう｡
そして戻って､ それで状況がよくなるかどうかを確認する｡
おい､ あれ見ろよ｡
かっこいいですね｡
ちなみに､ 少し大きく見えるのは､ 見やすくするために､ コマンドでプラスとマイナスをして､ ホームページのサイズを大きくしているからです｡
でも､ それって結構すごいことなんですよ｡
ここで､ 例えばworksをクリックすると｡
うーん､ ワークステーションは分かるんですけどね｡
HTMLは存在しない｡
では､ どうすればそれを解決できるのか｡
その方法はもう知っていますよね？
必要なのは､ これらの異なるルートを更新して､ 適切なテンプレートを指すようにすることだけです｡
さて､ 次のビデオでは､ その方法を紹介しますが､ もう習ったことなので､
自分で挑戦してほしいのです｡
だから､ 私たちが持っていたのとまったく同じようにウェブサイトを機能させるようにしなさい｡
こちらのマッシュアップ・テンプレートで､ 次のビデオでお会いしましょう｡