More than 1 year has passed since last update.

Flaskについてまとめ6　静的ファイル（HTML,XHTML,JavaScript,CSS）を利用する

Posted at 2022-05-07

過去の記事はこちらです

ubuntu でpython仮想環境を利用し
アプリケーションルートがflaskbook
になるように変化しました

その後テンプレートエンジンを利用しました
テンプレートエンジンはテンプレートと呼ばれる　ひな形
と　データを合成して成果ドキュメントを出力するソフトウェアです

Flaskについてまとめ5では
テンプレートエンジンの　if 　と　for文　の使い方について記載しています

url_forで関数を使って　指定したエンドポイントの値を確認できるようになりました

Flaskでのエンドポイントは　URIと紐付けられた関数名または関数につけた名前です

さて今回は

静的ファイルを利用する

webサイトでは、HTMLに加えて画像やJavaScript,CSSを利用します

JavaScript

JavaScriptとはブラウザを「動かす」ためのプログラム言語です
JavaScriptが使われているWebサイトやサービス例
Twitter
ニコニコ動画
Hulu
Facebook

このように、JavaScriptは、WebサイトやWebサービス開発に使われ、その中でも、よりユーザーに近い部分（ユーザーが閲覧や操作をする場面）を開発するときに使われます

よって、システムエンジニアやフロントエンドエンジニアが使用することが多いみたいです

CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）

CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）とは、
ウェブページのスタイルを指定するための言語です

ワープロソフトなどで作成される文書も含めて
文書のスタイルを指定する技術全般をスタイルシートといいます

HTMLやXHTMLなどで作成されるウェブページにスタイルを適用する場合には
スタイルシート言語の1つであるCSSが一般的に利用されています

XHTMLとは、Webページの記述などに用いられるマークアップ言語である

HTML（HyperText Markup Language）
をXMLの仕様に従って定義しなおした言語です
端的にいうと「HTMLとXMLを混ぜたもの」というイメージです

わかりやすく分類すると、HTMLは見栄えを重視、
XMLは文書のルールのほうを重視されているようなイメージです
https://tech-camp.in/note/technology/55829/

CSSは、HTMLと組み合わせて使用する言語です

HTMLがウェブページ内の各要素の意味や情報構造を定義するのに対して、
CSSではそれらをどのように装飾するかを指定します

スタイルシートが必要な理由
HTMLは情報構造を定義するための言語であり、
見栄えの制御のために本来の役割とは違った使い方をすると、
文書の情報構造がでたらめになってしまうからです
コンピュータや検索エンジンに理解されないでたらめな文書構造になってしまえば、
せっかくの情報もうまく活用されません

HTMLの要素（タグ）をどのように表示するかは、
ユーザーエージェント（ブラウザ）によって異なることがあります
HTMLタグを駆使してある閲覧環境では見栄え良くレイアウトできたとしても、
他の閲覧環境ではまったく意図しないレイアウトになってしまうこともありえます

HTMLでスタイルを指定する場合、例えば見出しの色やサイズを変えようとすると、
見出しが使用されているすべての箇所を変更する必要がありますが、
CSSではこうしたスタイルを一括で管理することができます
また、複数の文書でスタイルを共有できるため、メンテナンス性が格段に向上します

WordPress（ワードプレス）とはCMS（Contents Management System）の一種です

SEOを意識するのであれば、WordPressをおすすめします

WordPressは初期の状態である程度SEOを考慮した作りになっており、
SEO対策に必須なMETA周りの施策もWordPressの方が管理しやすいというメリットがあります

他にも動的サイトの特性上
構造化データマークアップや AMP との親和性もよく、
SEOを意識したWebサイト制作にはWordPressのほうが向いていると言えるでしょう

しかし、ではHTMLで制作したサイトがSEOに弱いかといえば、そうではありません

きちんと施策すれば、HTMLでのSEO対策も問題なく行えます
総合的にどちらが施策しやすく、結果コストを抑えられるかを考えて選ぶのをおすすめします

HTML,XHTML,JavaScript,CSSは静的ファイル

HTML,XHTML,JavaScript,CSSはリスエスト内容に影響されず

常に同じ内容になるため静的ファイルといいます

CSSはHTMLの見た目をととのえる　用途で利用し

JavaScriptはサーバーサイドでも利用できます
今回はクライアントサイドのスクリプトとして捉えます

Flaskでは静的ファイルを利用する場合　static　ディレクトリへ配置

static　ディレクトリは templatesと同様に
アプリ実行モジュールと同列か　あるいはパッケージ直下に作成します

flaskbook
- .env
- apps
  - minimalapp 
  　　- templates
  　　　-index.html
  　　- static(新規追加)
  　　　-style.css(新規追加)
- venv

index.html
にスタイルシート読み込みの記述

<!doctype html>
<html lang="ja">

<head>
    <title>name</title>
    <meta charset="utf-8" />
    <title>name</title>
    <link 
      rel='stylesheet'
      href="{{url_for('static',filename='style.css')}}"
    />
</head>

<body>
    <h1>Toward the widespread use of clinical engineers and machine learning.</h1>
    　　<h2>Studying Flask<h2>
    <h1>{{name}}</h1>
</body>

</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

Flaskについてまとめ6 静的ファイル（HTML,XHTML,JavaScript,CSS）を利用する