2019年8月17日開催のHTML5プロフェッショナル認定試験レベル2ポイント解説無料セミナー用のサンプルコードです。セミナーで使用したハンズオンを手元で試してみたい方は本リポジトリをダウンロードして使用してください。
- Node.jsをインストールする
- 本ページの「Clone or Download」から、「Download ZIP」を選択する
- ダウンロードしたzipファイルを解凍する
- コマンドプロンプトで解凍したフォルダに移動する
- コマンドプロンプトに
npm install
と入力する
- cmd上でcors-clientフォルダに移動する
- cmd上で
npm start
コマンドを実行する - ブラウザでhttp://localhost:3000/にアクセスする
- 別cmd上を立ち上げてcors-serverフォルダに移動する
- cmd上で
npm start
コマンドを実行する
- Chromeでhttp://localhost:3000/jsgrammerにアクセスする
- 各サンプルの指示通りに操作し、動作を確認する
- Chromeでhttp://localhost:3000/indexeddbにアクセスする
- 「従業員番号」、「名前」、「部署名」のテキストボックスに任意の値を入力し、「保存」ボタンをクリックする
- F12キーを押下し、applicationタブを開く
- Employeeオブジェクトストアにデータが保存されていることを確認する
- 「keyPathまたはインデックス」のテキストボックスにKeyPath(従業員番号)またはインデックス(名前)を入力する
- 「KeyPathで検索」または「インデックスで検索」ボタンをクリックし、保存された従業員情報が表示されることを確認する
- Chromeでhttp://localhost:3000/indexeddb2
- コントロールの再生ボタンを押して動画を再生する
- 数秒~数十秒経過後、コントロールの停止ボタンを押して動画を停止する
- コントロールで音量を変更する
- ブラウザを閉じて開きなおす
- 動画の再生位置が、停止した位置になっていることと、ミュートを解除したときの音量が、変更後の音量になっていることを確認する
- F12キーを押下し、applicationタブを開く
- VideoStatusオブジェクトストアにデータが保存されていることを確認する
- cmdを立ち上げて、
ipconfig
でipアドレスを調べる - Chromeを立ち上げて、http://ipアドレス:3000/secにアクセスする
- F12キーを押下し、consoleタブを開く
- xhrボタンを押下し、エラーが発生することを確認する
- cors-server\server.jsのL9とL16のコメントを削除する
- 各サンプル共通の手順4で起動したサーバをctr+cで停止し、手順5を再実行する
- 再度xhrボタンを押下し、エラーが発生しないことを確認する
- Geolocationボタンを押下し、エラーが発生することを確認する
- cors-client\bin\wwwのL30をコメントインし、L31をコメントアウトする
- 各サンプル共通の手順2で起動したサーバをctr+cで停止し、手順2を再実行する
- https://ipアドレス:3000/secにアクセスする
- 再度Geolocationボタンを押下し、エラーが発生しないことを確認する
- cors-client\views\sec.ejsのL15をコメントインする
- https://ipアドレス:3000/secを再読み込みし、警告が出ることを確認する
©Fujitsu Learning Media Limited