どうも皆さんこんにちは!
期限ギリギリに急いでアドカレ書き始めてる情報理工・知能情報・2回のFkSgです
Twitter: https://twitter.com/FkSg16KN
皆さんがいつも使っているサイトがどのように作られているか考えたことはありますか？
flaskを少しいじったぐらいですが、興味があったので調べて記事を書こうと思いました。
今回は、その概要を一緒に見てみましょう!
サイトはその配信者のコンピュータ「サーバ」から
検索して見に行く自分達のコンピュータの「ブラウザ」へ
と「HTTP」や「HTTPS」といった通信方式でデータが送られることで表示されます。
「HTTP」や「HTTPS」通信って何？
HTTP = Hytertext Transfer Protocol (ハイパーテキスト転送規約)
HTTPS = Hytertext Transfer Protocol Secure (ハイパーテキスト安全転送規約) の略
Hytertext： ハイパーテキスト(文書を超える) = 複数のファイルを関連付ける仕組み
Protocol：プロトコル = データを送ったり受け取ったりするとき順番などのお約束事
両者の違いは暗号化されているかどうかで、「HTTPS」が暗号化で通信するパスワードなどの内容を他の人から盗み見られても別の文字列に変換され内容が分からないため安全な通信と言えます。
URLの欄を見ると「HTTPS」が鍵マークがついています。
会社ごとに通信方式を揃えるために考えられた「TCP/IPモデル」で言うと、「アプリケーション層」で、、画像やメールなど人間が理解できるデータをやり取りする方法の1つ
「ブラウザ」とは？
Webサイトやホームページを見るためのソフトウェア。
みんながいつも使っている「Google Chrome」、「Microsoft Edge」や「Mozilla FireFox」など
大まかな流れ
①「ブラウザ」からURLを入力し、それに紐づいたデータの処理や送信の要求を「サーバ」に送信します。
②「サーバ」がその要求を受け取り、それに対する返信としてサイトを表示します。
開発するには？
バックエンド=サーバの保守やデータベースの管理といったwebサイトやアプリのユーザからは見えないが重要な部分
(例 プログラミング言語=Python、ライブラリ=flaskかdjangoの片方といった組み合わせ)
Pythonの特徴：
機械語に翻訳しながら実行するインタプリンタ型言語
利点⇒翻訳しながら実行されるためどこで不具合、例外やエラーが起きたのか確認しやすい。
欠点⇒同様の理由で、C言語などの予め翻訳してから実行する言語よりも実行に時間が掛かる。
予約語が少なく、同じ内容を省略して記述できる。
簡単なクラスの実体化や関数の呼び出しで実行できるライブラリが豊富
初心者や計算機科学や情報学の専門外の人でも中身があり実用的なプログラムを作れます。
ライブラリの計算部分にはC言語をコンパイルした機械語が使用されることが多い。
⇒自分で計算コードをPythonで書くよりも高速に値を求めることができる。
ライブラリがやってる計算、Pythonで直接書いて実行したら分かる程の違いがある
⇒Pythonとライブラリの組み合わせ = PythonとC言語の良いとこ取り
Pythonのダウンロード先：https://www.python.org/downloads/
実行方法 コマンドを実行できるターミナル内上、実行したいフォルダの中で
python ○○.py 環境によっては python3 ○○.py
flask：動作する上で軽く、ファイルの量が少ないwebアプリケーションを作るのに向いている。
(ex メールや投稿サイトなど小型で簡素)
django：複合的な複数の機能(ex 登録、投稿、アップロードや購入)を合わせ持つ大型のwebアプリケーションを作るのに向いている。
pip install 〇〇
両者ともPyPIのpipコマンドで導入可能ですが、用途や場合によっては仮想環境を導入することが必要になります。
エディタは、VSCodeなど変数名、関数名やimport文などを色分けで表示し、先頭の数文字を入力するだけで補ってくれる補完が効くものが良いです。
フロントエンド＝webサイトやアプリの文章、デザイン、ボタンや入力フォームといったユーザの目に見える部分
(例 文章、画像、動画やボタンといった基本的なところ ：マークアップ言語 =HTML
デザインや色合いなど見やすくするところ ：スタイルシート言語 =CSS
ボタンや入力時にユーザから見える挙動や変化 ：スクリプト言語 =JavaScript)
HTMLファイルの実行方法：
① □□.htmlをインターネットブラウザで開けばOK
CSSファイルの実行方法：
① △△.cssを□□.htmlと同じフォルダに入れます。(別の場所の場合、href=”△△.css”を変更)
② □□.htmlのデザインを変えたいタグに
<link rel=”stylesheet” href=”△△.css”>
を追加します。
ex)DMM WebCamp, CSSにHTMLに埋め込む方法とは？ コードを用いて解説!
https://web-camp.io/magazine/archives/29505
のように参考になる記事がたくさんあります。
③ □□.htmlをインターネットブラウザで開けばOK
JavaScriptファイルの実行方法：
① ◇◇.jsを□□.htmlと同じフォルダに入れます。(別の場所の場合、script src=”◇◇.js”を変更)
② □□.htmlのボタンなど挙動させたい部分に
<script src=”◇◇.js”></script>
を追加します。
ex)Acrovision, HTMLからJavaScriptへの読み込み方法｜メリット3つや例を解説！
https://www.acrovision.jp/career/?p=2945
のように参考になる記事がたくさんあります。
③ □□.htmlをインターネットブラウザで開けばOK
※ 上記の実行方法は、フロントエンド部分の挙動を
試験的に確認したいときに使うことができます。
バックエンド部分とのデータのやり取りなどが必要な場合は、決まったフォルダの構造に入れる必要性があります。flaskもその1例 分かりやすいyoutubeの動画がたくさんあるので、興味がある人は、是非調べてみてください!
参考文献
[1] Qiita, HTTP通信に関して, https://qiita.com/belion_freee/items/5ad1c9c0eefebea0957d,最終閲覧日2022年11月26日.
[2]DSMagazine, ブラウザとは？, https://ds-b.jp/media/what-is-web-browser/,最終閲覧日2022年11月26日.
[3]ThinkIT, TCP/IP 4階層モデルとは？, https://thinkit.co.jp/story/2015/04/30/5800最終閲覧日2022年11月26日.
[4]アイティーエム, HTTPとは？HTTPSとの違いをサイト移行で実施するリダイレクト設定などをもとに確認, https://www.itmanage.co.jp/column/about-http-https/最終閲覧日2022年11月26日.
[5]「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典, ハイパーテキスト,最終閲覧日2022年11月26日.
[6] スタビジ, Flask vs Django！PythonのWebアプリケーションフレームワークを徹底比較！, https://toukei-lab.com/flask-django, 最終閲覧日2022年11月27日.
