ウェブアプリケーション
ウェブアプリケーション(Web application)は、ウェブ(World Wide Web)技術を基盤としたアプリケーションソフトウェアである。
概要
編集特徴
編集利点(メリット)
編集- 更新が容易である
- Webサーバ上のファイルを更新するもしくは、クライアント側はHTTPアクセスすることで、最新のウェブアプリケーションを利用できる。
- クライアント側にアプリケーションのインストール不要
- Webサーバで処理を行って出力結果のファイルをクライアント側(ウェブブラウザ)で表示するだけなのでクライアントはウェブアプリケーションを事前にインストールする必要はない。
- ウェブブラウザがあれば動作環境に依存しない
- 各クライアント側の環境が違っていてもウェブブラウザがあれば、クロスプラットフォームに対応できる。
欠点(デメリット)
編集Webアプリの発展に伴って、問題点が解決し、また新たな問題が提示されるという流れが続いている。従来指摘されていたデメリットと提案されている解決技術の例は以下である。
- 標準機能でメディア再生が困難: HTML5 HTMLMediaElementによるメディア再生・制御がある。[1]
- Webサーバ障害時・通信途絶時に利用不可: PWA(install + Service Worker API[2])によるオフライン動作
- ネイティブアプリに比較して遅い実行速度: WebAssemblyによるネイティブ水準コード実行[3]
歴史
編集技術
編集プログラミング言語
編集HTML
編集ele
ment.setAttribute()
など︶によっておこなわれてきたが、宣言型プログラミングとtemplatingによるHTMLの記述︵例: lit-html、JSX︶がおこなわれるようになってきている。
要素のコンポジション︵合成︶は子要素によって実現される。親要素での子要素へのアクセスは、Web標準ではWeb Componentsの<slot>
による自動挿入と.assignedElement
s()
による操作が提供されている[6]。Reactではコンポーネント引数のprops.children
が用いられ、子要素以外にも任意の属性props.x
を用いることもでき、子要素の操作はRea
ct.Children
のメソッドで提供される[7][8]。
DOM
編集ほとんどのWebアプリはHTMLを基盤技術としており、WebブラウザはDOMを介してドキュメントへのアクセスを可能にしている。Webアプリに求められる性能が高まるにつれて従来のDOM更新速度が不十分になり、DOM更新に関わるいくつかの技術が登場した。仮想DOM(Virtual DOM)、DOM templating(lit-html)はその例である。
通信プロトコル
編集キャッシュ・同期
編集アクセス制御
編集伝統的にはID・パスワードによる認証AuthN/認可AuthZを用いたアクセス制御がおこなわれてきたが、セキュリティと利便性の観点からトークンベースの手法に移行しつつある。ソーシャル・ログイン・OAuth・OpenID Connect等に対応したクラウドサービスが提供する認証・認可サービス(IDaaS)がしばしば利用される。
データバインディング
編集Webアプリではしばしば、データ更新に伴うUI更新・UI操作によるデータ更新をデータバインディングによって暗示的におこなう。React・LitElementなどのフロントエンドフレームワークがデータバインディングを担っている。宣言的に構築したHTML(likeな)UI定義にデータを混ぜることでデータバインディングを実現する場合が多い。
データアクセス
編集fetch
APIが基礎技術としてあり、データ側のスタイル・仕様としてはREST、GraphQLが存在する。データスキーマ仕様にはRESTに対応するOpenAPI Specificationがあり、GraphQLは仕様にスキーマの定義がある。
アーキテクチャ
編集機能単位=サービスの連携
編集機能による分類
編集メディア(動画・音声)
編集高レベルの要素から低レベルのAPIまでWeb標準で提供されている。
<audio>
要素: src属性の設定のみで再生ウィジェットを表示可能
HTMLMediaElement
DOMインターフェイス: JavaScriptによる詳細なメディア再生の制御- Web Audio API: AudioNodeからなるグラフをAPIにより構築する低レベルAPI
オフライン
編集Webサーバとの通信(ネットワーク)が途絶している状態をオフラインという。ソフトウェアがオフライン時にも動作するには
- ローカルに存在するソフトウェアプログラム
- 失敗するネットワークリクエストの処理
- オンライン復帰時の同期
などが必要とされる。Webアプリは一般にインストール(プログラムのローカルへの保存と組み立て)を必要としないため、オフライン状態ではそもそもアプリのプログラムにアクセスできない。そのためWebアプリではオフライン対応に特別な仕組みが必要になる。オフライン対応を前提としたWebアプリへの標語として「オフラインファースト/offline first」がある。
ローカルに保存されたプログラム
編集失敗するネットワークリクエストの処理・オンライン復帰時の同期
編集多くのWebアプリは起動後もネットワークを介した情報のやり取りを行う。オフライン時にはネットワーク途絶によりこれらのネットワークリクエストが失敗する。ゆえに
- 失敗リクエストの処理(適切に失敗し、アプリを落とさない)
- 失敗リクエストの保存・破棄
- オンライン復帰時の失敗リクエストリトライ
- オフラインの間に外部で発生した情報との競合解決・同期
などに対応する必要がある。
例えばGmailなどのメールアプリは、適宜メールサーバへ新着メールの問い合わせをおこなっている。オフライン時にはネットワーク途絶によりメールの送信ができなくなるが、リクエストを単に破棄すると書いたメールを捨てることになってしまう。失敗リクエスト時にメールを送信待ちリストに加えるのか、あるいは下書きに戻すのかなどが重要な設計項目になる。待ちリストに加える場合はオンライン復帰時の適切な再送信(リトライ)機能が必要である。またオフラインの間にPCブラウザのGmailから下書きを編集し、同時にスマホのGmailからも下書きに別の変更を加えた場合、オンライン復帰時に2つの相反する編集が存在するため、競合を解決・同期しなければいけない。
脚注
編集HTMLMediaElement
インターフェイスは、 H
TMLElement
に音声や動画で一般的なメディアに関する基本的な能力の対応に必要なプロパティやメソッドを追加します。 HTMLMediaElement. MDN web docs
(二)^ Service Workerは、基本的にウェブアプリケーション、ブラウザー、そして︵もし繋がっていれば︶ネットワークの間に介在するプロキシサーバのように振る舞います。これは、よりよいオフライン体験を可能にするように意図されており、ネットワークのリクエストに介在してネットワークの使用可否の状況に基づいて適切な対応を取ったり、サーバ上にあるアセットを更新したりします。サービスワーカー API. MDN web docs
(三)^ WebAssembly は最近のウェブブラウザーで動作し、新たな機能と大幅なパフォーマンス向上を提供する新しい種類のコードです。 WebAssembly の概要 - WebAssembly とは何か. MDN web docs
(四)^ 他にもPerlのためのmod_perlやPythonのためのmod_python、Rubyのためのmod_rubyなどが存在する。
(五)^ これらのアプリはどこでも動作し、ネイティブアプリと同様の使い勝手を提供する様々な機能を提供します。 プログレッシブウェブアプリ. MDN web docs
(六)^ assignedElements()
は HTMLSlot
Element
インターフェイスのプロパティで、このスロットに割り当てられた一連の要素を返します。 MDN web docs - Web API
(七)^ 特別な children
という props を使い、以下のようにして受け取った子要素を出力することができます。... children
の props の代わりに独自の props を作成して渡すことができます。 React Docs - コンポジションvs継承
(八)^ React.Children
はデータ構造が非公開の th
is.props.children
を扱うためのユーティリティを提供します。 React Docs - React の最上位 API
(九)^ abDelta Sync 機能を使用すると、同期プロセスで基本クエリと差分クエリという2つの別々のクエリを指定できます。これにより、クライアントは大量のレコードを含む可能性のある基本クエリでのローカルキャッシュをハイドレートし、最後のクエリ以降に変更されたデータのみを受信できます (差分更新)。 AWS AppSync - チュートリアル: Delta Sync
(十)^ The Self-contained System (SCS) approach is an architecture that focuses on a separation of the functionality into many independent systems, making the complete logical system a collaboration of many smaller software systems. scs-architecture.org
関連項目
編集- サーバ・クライアント
- 仕様・技術
- ウェブアプリケーションの発展に伴う標語/キャッチコピー
- 事業者
- アプリケーションサービスプロバイダ(ASP)