今回は、前回…
の続きになります。
- 今回の課題のゴールは？
- 目的(目標)を定める
- Vanillaでは逆立ちしてもできない部分をどうするか？は先に決めておく
- HTML5およびHTML Living Standardについて
- とりあえずWebサーバー立ち上げ
- JSONファイルも置いてみる
- 最後に
今回の課題のゴールは？
フロントエンド開発の目的(目標)を定めましょう。
また、Webサーバーを立ち上げ、JSONが使えるかを確認してみましょう。
目的(目標)を定める
ここでは、実際に作成する場合の目的(というか目標)を、ざっくり書いていきます。
- SPAでもSSRでもないCSRを目指す
- 画面遷移では別のhtmlファイルへ
- 紙芝居で作った、個々のhtmlファイルにJavascriptを埋め込むようなイメージを想定
- submitでの遷移は行わない
- セッション管理はCookieで ⇒ 該当記事へ
- DBへのアクセスはすべてAPIで
- 確認画面は用意しない
- 用意する場合の手法も考えてはみる(hidden地獄が待っている？) ⇒ 該当記事へ
- 入力画面の照会モードも考えてみる(多分に無理) ⇒ 該当記事へ
- 入力画面は明細行も考えてみる(行追加・行削除・修正画面の再表示) ⇒ 該当記事へ
- 一覧画面も考えてみる ⇒ 該当記事へ
- HEADタグ内の共通部分は個々に置くか、SSIを活用するか？は考える ⇒ 該当記事１ 該当記事２
- Javascriptは、その画面固有と、共通部分に分けて管理
- この記事ではCSSフレームワークは考えない(CSSフレームワーク用のDIVやSPANがウザいので)
こんなところでしょうか。
Vanillaでは逆立ちしてもできない部分をどうするか？は先に決めておく
こちらは、前回の記事、
および、こちらの記事、
にて、考えておきます。
この記事以降の各テクニックについては、共通箇所について、HTMLの分割については考えず、ひとつのHTMLのみで対処することを前提に記していきます。
HTML5およびHTML Living Standardについて
まずは、ひな形のHTMLファイルを作りましょう。
●hello.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> </head> <body> Hello world! </body> </html>
随分とシンプルなHTMLですが、これがイロハのイのようです。
以前であれば、もっと記載する情報が多かったはずですが、HTML5およびHTML Living Standardでは、記述が省略できます。
覚えておきましょう。
<!DOCTYPE html>について
これを先頭行に置くと、HTML5標準モード、これがないと互換モードと、ブラウザが認識します。
lang="ja"」および「charset="UTF-8"」について
ブラウザによっては、こちらを省略すると、一部あるいは全部の日本語が正しく表示されないケースがあります。
とりあえずWebサーバー立ち上げ
Windowsの場合
Windowsの場合はこちらを参照してください。
Macintoshの場合
まずは導入確認
> httpd -v
でバージョンは表示されていればOKです。
> sudo apachectl start
で、開始します。
http://localhost/
で確認してみてください。
自分のユーザーで実行
まず、/etc/apache2/にあるhttpd.confを編集します。
コマンドラインのエディタに慣れていないければ、コマンド＋iで鍵を外し、everyoneを読み書きできるようにすれば、お使いのテキストエディタで修正できます。
(終わったら戻してください。)
#LoadModule userdir_module libexec/apache2/mod_userdir.so
と
#Include /private/etc/apache2/extra/httpd-userdir.conf
のコメント(#)を除去します。
次に、/etc/apache2/extra/にあるhttpd-userdir.confを編集します。
#Include /private/etc/apache2/users/*.conf
のコメント(#)を除去します。
さらに、/etc/apache2/users/の(Macのユーザー名).confを作成します。
(適当なconfファイルをコピペしても構いません。)
<Directory "/Users/(Macのユーザー名)/Sites/"> AllowOverride All Options Indexes MultiViews Options +FollowSymLinks Require all granted </Directory>
上記をコピペし、「(Macのユーザー名)」を変更してください。
自分のユーザーに「Sites」フォルダを作成します。
前章で作成したhello.htmlを置いておくと良いでしょう。
修正後はリスタートします。
> sudo apachectl restart
http://localhost/~(ユーザー名)/hello.html
で、表示されればOKです。
このlocalhostは、自分のMacのIPアドレスが分かれば、
http://192.168.0.x/~(ユーザー名)/hello.html
といったようにLAN内の、他のPCからもアクセスできます。
JSONファイルも置いてみる
JSONファイルをWebサーバーが認識するか？
下記のJSONファイルを、Site内においておきます。
●test.json
{ "id" : 1, "name": "xxx" }
http://localhost/~(Macユーザー名)/test.json
で、表示されれば、問題はないと思います。
レスポンスヘッダーの「Content-Type:」は「application/json」になっているはずです。
JSONファイルがAPIで取り込めるか？
ついでなので、先程のJSONファイルがAPIとして取り込めるかを試してみましょう。
api_mockというフォルダを作成し、JSONファイルをそこに移動します。
●test_json.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <script> async function getJSON() { //const getJSON = async () => { // API実行 let result = await fetch("api_mock/test.json", { method: "GET" }); // JSONを取り出す let jsonData = await result.json(); alert(jsonData.id); alert(jsonData.name); //console.log(jsonData.id); //console.log(jsonData.name); } // DOMコンテンツのロード完了時に実行 window.addEventListener('DOMContentLoaded', (ex) => { // JSONを取得 getJSON(); }); </script> </head> <body> </body> </html>
http://localhost/~(ユーザー名)/test_json.html
でJSONの値がポップアップできたら、OKです。
(ソースの下にコンソール表示もありますので、コメントを外して実行してみてください。デバッグはどちらでも良いと思います。)
Javascriptの関数にasyncという見慣れないキーワードが付いていたり、awaitというキーワードが付いていたりしますが、とりあえずは、そういうものだと思ってください。
最後に
とりあえずはここまで。
次回は、Cookieおよびログイン画面の解説になります。
それでは、また。
