ウェブパ[web制作・ホームページ制作]

モダンWEBについて考えてみた
HTML5でできることとその先の課題|ウェブパは神戸・大阪をはじめ全国対応のWebサイト(ホームページ)制作パックプランです。

電話番号 078-333-9333

に関する画像

線画像
トップ > インフォメーション > BLOG > モダンWEBについて考えてみた
HTML5でできることとその先の課題

に関するタイトル画像

線画像

2017.05.10

BLOG

モダンWEBについて考えてみた
HTML5でできることとその先の課題

この記事をシェアする

・モダンWEBとは
————————————————————————
 ・HTML5で出来ること
  保存:リソース・データ
  通信:HTTP非同期通信・ソケット通信(例メールの110番ポート等)
  表示:2D/3Dグラフィック・ベクターグラフィック・アニメーション、グラデーション・外部フォント
  マルチメディア:ビデオ/オーディオ再生・ビデオ会議
  入出力:ファイル読み取り・cameraの起動と写真の読み取り・GPS等のセンサー情報読み取り
  その他:マルチメディア
  
  このように拡張性の高いHTML5を使用してWEBサービスが展開されている。
  
 ・HTML5の不便点
  ・サーバーとのaccessが必須なため、画面表示待ちが発生
  ・ネットワーク圏外での利用が出来ない。
  ・集中処理により、サーバーやネットワークなどのインフラコスト増加

 →そこで出てくるのが、モダンWEB

 ・モダンWEBとは
  ・WEBサーバーは主にデータとアプリケーションの管理だけを行い、それ以外のことは全てブラウザ側に負担する。
  
 ・モダンWEBのメリット
  ・落ちにくいアプリケーションが実現可能!
  ・圏外であっても利用することが可能!
  ・容量制限のないアプリケーションの作成が可能!
  ・グラフなどの表示も可能!
  ・データを縮小してサーバーとやり取りが可能!

 ・モダンWEBのデメリット
  ・学習コストが大きい
   基本JSですが、オブジェクト指向が必要になります。また、従来のclassが使えない形式です。
   ですので、新たに覚え直さなければなりません。

  ・開発生産性が低い
   基本JSなので、それほど公開されているライブラリーが少ない。(どこぞのgithubから取ってくる非常に危険)

  
  →それを解決するのが今回ご紹介する「Angular2」

・モダンWEBを支えている技術
 ・アプリの実行とリソースの保存
  これにより、表示する前のHTMLデータやJavaScriptや画像等WEBアプリに必要のなるデータをブラウザに保存する事が可能。
  また、保存したい内容を事細かに指定することが出来る。
  ブラウザを閉じても電源を落としても永続して利用することが可能。

 ・WEBアプリデータの保存
  HTML5では下記のWebStorageと呼ばれるデータの保管庫が有ります。
  ・localStorage 
   用途:永続的な単純な構造データ(画像・CSS等)の保管
   →keyとvalueで管理されています。

  ・sessionStorage
   用途:一時的な単純な構造データ(ログインID・ログインパスワード)の保管
   →ブラウザを閉じるとデータが消えます。一時的に利用するものに向いています。
  
  ・Indexed Database(NoSQLデータベース)
   用途:アプリの主要となるデータ(入力データ・記事ID)
   →高度なデータ構造となっており、非同期通信も可能!

  ・Cookie
   用途:セッションID
   →内容がHTTPヘッダーに自動的に付いてきます。

 ・Ajax:バックグランド通信
  従来のページ移動を友泣くことなく、通信をする方法です。

 ・非同期通信
  結果をを待たずに一度作業を終了して、作業が終了した時点でアクションを起こし、新たに処理を開始します。
  ですので、途中までは読める!という形になるため、ユーザー側・サーバー側にも優しい形になります

・モダンWEB分散処理への対応について
 ・ローカルデータベースを利用
  定期的にデータをサーバーから取得し、ローカルデータベースに保存。
  アプリはローカルデータベースを基本として読み込みを実装
  データの新規入力と変更があった場合はその都度サーバーとのやり取りを行う。
  もしも、圏外やネットワークが使えない状態の場合は、通信可能になった時にデータをアップロードする。

 ・ローカルデータベースの更新頻度が選べます!
  ・更新頻度が少ないデータについて
   1日に1回程度であれば、サーバーからダウンロードして、ローカルデータベースにフルコピーを行います。
   ユーザー側が更新するというアクションによってデータを更新します。

  ・更新頻度が高いデータについて
   1日に数回以上サーバーのデータが更新される場合は、Ajaxを使用して、短期間区切りで通信を行いローカルデータベースの更新をします。

  ・更新頻度は低いけれども、即時更新が必要な場合
   WebSocketを使用して、ソケット通信を行います。その際ローカルデータベースは使用しません。

・モダンWEBの通信処理について
 通信方法につては、下記のようになります。
 
 通信開始のタイミング:ユーザー側の操作とは一致せず、事前ロードや定期更新などが可能
 通信の頻度:必要な時のみ(画面遷移が基本とはなりません)
送信データ:URL又はJsonデータ
 受信データ:Jsonデータ
 画面感のデータ交換:セッションは不要
 サーバー側インターフェイス:Web API
ユーザー認証:APIキー・トークン
 セッションタイムアウト:対象外
 通信中の画面ロック:なし

 つまり基本通信はJson形式のデータを利用するということです。


・Ajaxの活用方法
 ・事前ロード
  記事詳細など予めデータをロードしておく仕組みです。先にロードすることで次のアクションの時に待機時間を減らすことが出来ます。

 ・遅延ロード
  先に表示するもの、後で表示するものを区別して、出し分けを行います。

 ・遅延通知
  サーバーにデータをアップロードする時に利用する方法です。送信完了画面へと進みますが、通信が完了した段階でダイアログで別途表示する方法です。

 ・定期ロード
  サーバーからデータをダウンロードして表示する場合に使用します。常に最新の情報を見れるだけでなく、待機時間を減らすことが可能です。

 ・通信エラーの対応
  モダンWEBではプログラムの通信を制限するので、通信可能になった時点でアップロードするようになります。
  →アップロード時にはリトライ処理をさせてしまうと二重登録というバグになりかねませんので、二重登録防止の機能を実装する必要があります。
   受信については、何度もリトライしても大丈夫なので、問題はありません。

 ・クロスドメインの制約
  プログラムを受信したサイトのみの通信が可能と定義されているため、他のドメインとの通信を行いたい場合は「Jsonp/CORS/サーバー経由」などの方法を取ります。

 ・セキュリティ
  ローカルに依存するのでセキュリティは弱まります。そこで、データの暗号化やインメモリデータベースの利用、自動データ消去などの実装が必要になります。

 ・テスト
  テストについても従来と違い、下記のようになります
  単体テスト:ブラウザ、サーバー双方で実行。
  負荷テスト:ブラウザで動くので不要
  システム全体が正しく動作チェック:ブラウザ操作のシュミレーションだけ
  WebAPIテスト:必要

快適なモダンWEB開発としてぜひともAngular2を利用下さい。

edited by:afiru

トップに戻る