fujitsulearningmedia / html5-lv2-seminar-20190817

https://html5exam.jp/news/event/page2899.html

HTML5プロフェッショナル認定試験レベル2ポイント解説無料セミナー

説明

2019年8月17日開催のHTML5プロフェッショナル認定試験レベル2ポイント解説無料セミナー用のサンプルコードです。セミナーで使用したハンズオンを手元で試してみたい方は本リポジトリをダウンロードして使用してください。

セットアップ手順

1. Node.jsをインストールする
2. 本ページの「Clone or Download」から、「Download ZIP」を選択する
3. ダウンロードしたzipファイルを解凍する
4. コマンドプロンプトで解凍したフォルダに移動する
5. コマンドプロンプトにnpm installと入力する

サンプルの動作確認方法

各サンプル共通

1. cmd上でcors-clientフォルダに移動する
2. cmd上でnpm startコマンドを実行する
3. ブラウザでhttp://localhost:3000/にアクセスする
4. 別cmd上を立ち上げてcors-serverフォルダに移動する
5. cmd上でnpm startコマンドを実行する

JavaScript基本文法サンプル

1. Chromeでhttp://localhost:3000/jsgrammerにアクセスする
2. 各サンプルの指示通りに操作し、動作を確認する

Indexed Database関連サンプル1

1. Chromeでhttp://localhost:3000/indexeddbにアクセスする
2. 「従業員番号」、「名前」、「部署名」のテキストボックスに任意の値を入力し、「保存」ボタンをクリックする
3. F12キーを押下し、applicationタブを開く
4. Employeeオブジェクトストアにデータが保存されていることを確認する
5. 「keyPathまたはインデックス」のテキストボックスにKeyPath（従業員番号）またはインデックス（名前）を入力する
6. 「KeyPathで検索」または「インデックスで検索」ボタンをクリックし、保存された従業員情報が表示されることを確認する

Indexed Database関連サンプル2

1. Chromeでhttp://localhost:3000/indexeddb2
2. コントロールの再生ボタンを押して動画を再生する
3. 数秒～数十秒経過後、コントロールの停止ボタンを押して動画を停止する
4. コントロールで音量を変更する
5. ブラウザを閉じて開きなおす
6. 動画の再生位置が、停止した位置になっていることと、ミュートを解除したときの音量が、変更後の音量になっていることを確認する
7. F12キーを押下し、applicationタブを開く
8. VideoStatusオブジェクトストアにデータが保存されていることを確認する

セキュリティ関連サンプル

1. cmdを立ち上げて、ipconfigでipアドレスを調べる
2. Chromeを立ち上げて、http://ipアドレス:3000/secにアクセスする
3. F12キーを押下し、consoleタブを開く
4. xhrボタンを押下し、エラーが発生することを確認する
5. cors-server\server.jsのL9とL16のコメントを削除する
6. 各サンプル共通の手順4で起動したサーバをctr+cで停止し、手順5を再実行する
7. 再度xhrボタンを押下し、エラーが発生しないことを確認する
8. Geolocationボタンを押下し、エラーが発生することを確認する
9. cors-client\bin\wwwのL30をコメントインし、L31をコメントアウトする
10. 各サンプル共通の手順2で起動したサーバをctr+cで停止し、手順2を再実行する
11. https://ipアドレス:3000/secにアクセスする
12. 再度Geolocationボタンを押下し、エラーが発生しないことを確認する
13. cors-client\views\sec.ejsのL15をコメントインする
14. https://ipアドレス:3000/secを再読み込みし、警告が出ることを確認する

参考ページ

• LPI-Japan告知ページ
• 翔泳社書籍紹介ページ

ライセンス

MIT License

---

©Fujitsu Learning Media Limited