お帰りなさい｡
CSSとJavaScriptを､ まあ､ インデックスに追加する方法を考えましょう｡ htmlは､ ここでスクリプトとCSSを使用していることを思い出してください｡
今一度､ Flaskで｡
例えば､ CSISに行くと､ 静的なファイルがあることがわかります｡
静的なファイルとは､ 簡単に言えば､ 決して変更されないファイルということです｡
それが､ CSSとJavaScriptです｡
通常､ 一度送り出したら静止画は変わらないんですよ｡
そして､ Flaskではファイルを静的なスラッシュスタイルのドキュメントとしてファイルシステムに保存しなければならないので､
静的フォルダを作成する必要があることがわかります｡
これも慣れるしかないですね｡
しかし､ ここではテンプレートの時と同じように､ 静的なフォルダを作成して､ FlaskアプリがCSSやJavaScriptのファイルをここで探すことを認識できるようにしましょう｡
そこで､ JavaScriptのファイルを移動させることにします｡
静的フォルダーへ
そして､ CSSファイルにも同じことをします｡
だからもう一度､ それを動かしてください｡
静止画に｡
さて､ このまま保存して実行しても､ 実際には動作しないことがおわかりいただけると思います｡
さて､ それはなぜでしょう？
あなたはそれを理解できますか？
HTMLやCSS､ JavaScriptの話をあまりしてこなかったので､ もう一度｡
でも､ インデックス付きHTMLファイルの中で､ これらのファイルを参照していることを思い出してください｡
しかし､ 現在ではファイルのパスが変わっています｡
静的フォルダーに入りました｡
こんな感じ｡
だから､ スタティックと言わざるを得ない｡
スクリプトの犬｡
今､ 私が戻れば｡
そしてリフレッシュ｡
おい､ あれ見ろよ｡
私の美しい緑のウェブサイトは､ これがクリスマスのウェブサイトだとすると､ デベロッパーツールを開くと動作するようになりました｡
ネットワークに移動し､ 更新します｡
おい､ 見ろよ｡
資料がある
そして､ JSファイルを用意しました｡
また､ なぜCSSがないのでしょうか？
もう一度､ リフレッシュさせてください｡
あ､ あそこだ､ あそこだ｡
スタイルCSSがあります｡
JSもあるし､ ドキュメントもある｡
すごい｡
なぜファブアイコンのエラーが出るのかというと､ ファブアイコンとは､ こちらのタブに表示される小さなアイコンのことです｡
そのため､ 実際に自分たちでFabアイコンを追加して､ 画像を送ることも可能です｡
そのためには､ エンドポイントに､ ブログの代わりにfab icon
dot ikoと書いて､ アイコンの代わりに画像を送ればいいのです｡
うーん｡
どのように進めていくのか｡
次のビデオでその答えをお見せするつもりですが､ 試しにこのエンドポイントに画像を送り返して､
このエラーが出ないようにする方法を考えてみてほしいんです｡
そして､ ブラウザが自動的にこれを要求すると（すべてのブラウザがそうですが）､ ここに小さなアイコンを表示してくれるのです｡
好きなアイコンを選んで､ 次のビデオで解けるかどうか試してみてください｡
その答えをお見せします｡