2020-03-01から1ヶ月間の記事一覧
識別子とは 変数やメソッド、オブジェクトなどを識別するために付ける名前 識別子を決めるルール アルファベットまたは_(アンダースコア)、$(ドルマーク)で始まる 2文字目以降は、上記に加え数字も使用可能 予約語は使用できない
通信系APIの主な特徴 Server-Sent Events WebSocket XMLHttpRequest WebRTC 通信 プロトコル HTTP WebSocket Protocol HTTP SDPなど 非同期 通信 〇 〇 〇 〇 常時接続 △ 〇 △ 〇 双方向 通信 × 〇 △ (リクエストやレスポ ンス時にサーバ間と データを送受信…
Server-Sent Eventsとは 非同期でWebサーバからブラウザにデータを送信するための技術 ※ブラウザからWebサーバにデータに送信することはできない HTTP通信を用いてデータ送信を実現するため、データを送信すると通信は一度終了するが、自動的に再接続する
XMLHttpRequestとは ブラウザ/Webサーバ間で通信を行うための技術 非同期通信ができ、Ajaxを実装する際に用いられる HTTP通信を行うAPIのため、規定のポート番号は80番、または443番で、HTTPメソッドを指定することもできる XMLHttpRequestはリクエスト/レス…
WebSocket APIとは ブラウザ/Webサーバ間で双方向の常時接続通信を行うための技術 チャットなどに用いられる
プッシュ通知とは サーバからユーザに対して任意のタイミングで通知できる仕組み Push APIを使用することで、ブラウザでもサーバからのプッシュ通知を受信できるようになる プッシュ通知に関連するAPI Push API：プッシュ通知を受信 Server-Sent Events：サ…
Service Workersとは Webページとは別のブラウザのバックグラウンドで動作するJavaScript実行環境 関連するAPIを組み合わせることで、オフライン処理やプッシュ通知などの機能を提供できる HTTPS通信でしか動作しない
Web Workersとは JavaScriptを並行実行するための仕様 ワーカと呼ばれるJavaScriptの処理単位を、Webページの描画処理を実行するメインスレッドから分離し、バックグランドで実行する Webページのパフォーマンス向上につながる
Indexed Database APIとは 構造化されたデータを保存する仕組み リレーショナルデータベースのように、インデックスによる検索やトランザクションによる安全な操作をできる JavaScriptにより操作を行う 格納できる値の種類は文字列やファイル、blobなど 格納…
Web Storageとは ブラウザにキーと値の組み合わせでデータを保持する仕組み localStorageとsessionStorageの2種類が存在する ⋄localStorageはブラウザが閉じられてもデータを保持し、ウィンドウやタブ間でデータを共有できる ⋄sessionStorageはブラウザが閉…
Touch Eventsとは 画面を指で操作しているときの状態変化に関連するイベント タッチスクリーンを想定した仕様になっている Pointer Eventsとは さまざまなデバイスからのポインタ入力を取り扱うためのイベント
DOM3 Eventsとは ユーザによるマウスやキーボードなどの入力操作を取り扱うためのイベント ユーザの操作に合わせてユーザインタフェースを変更できる DOM3 Events イベントの種類 説明 UIイベント UIやHTML文書の操作に関連するイベント フォーカスイベント …
DeviceOrientation Eventとは デバイスの方角や傾きが変化したときに発生するイベント デバイスの左右の傾き(y軸)、前後の傾き(x軸)、ひねり(z軸)を取得できる DeviceOrientation Eventが発生したタイミングで、JavaScriptのプログラムを用いてユーザインタ…
Geolocation APIとは デバイスの位置情報にアクセスすることができる 緯度、経度、高度、方角、速度、(緯度、経度、高度の)精度を取得できる 使用するにはユーザの許可が必要となる ブラウザの制約により、HTTPS通信でなければ動作しない 地図サービスと連携…
SVGとは Webで利用できるベクター形式の画像データであり、実態はXMLに基づいたマークアップ言語である SVGの画像は計算式によって表現されるため、画像を拡大しても画像の劣化が発生しにくいという特徴をもっている ※描画する画像ごとにDOMが追加されるため…
Canvasとは JavaScriptを使用して、ブラウザ上に図を描画する機能 ビットマップ形式で描画を行う 静止画の描画を繰り返すことでアニメーションを実現できる ※アニメーション描画のメソッドは存在しない ブラウザに対応したファイルをCanvasに読み込み、加工…
MSEとは HLSやMPEG DASHをサポートする技術であり、video要素などをプラグインなしでストリーミング再生可能にする あらかじめ短い時間に区切られたメディアデータを扱うため、動画の合間に広告やそのほかのコンテンツを挿入したり、コンテンツの途中から再…
ストリーミング技術とは 動画コンテンツなどをダウンロードしながら再生する技術のこと Adaptive Streamingとは ネットワークの状況に応じて動画の再生品質を動的に変更することで、動画のコンテンツのスムーズな再生を可能にする仕様のこと Adaptive Stream…
HTML５では、JavaScriptを通じてvideo要素、audio要素のコンテンツを制御できる JavaScriptで取得できる主な情報 自動再生の設定 再生メニューの表示/非表示 現在の再生時間 音量 音声のミュート設定 再生速度の設定 メディアの長さ 繰り返し再生の設定 ネッ…
APIとは 「Application Programming Interface」の略称 インタフェースとは接続する部分という意味をもつ言葉であるため、外部のアプリケーションと連携するための機能といえる 活用する理由 APIの活用により、アプリケーションの開発の工数が減り、開発効率…
apple-touch-iconとは ホーム画面に表示するショートカットのアイコンを指定する設定 iOS以外の環境(Androidなど)一部のブラウザでもサポートされている apple-touch-icon-precomposedとは スマートフォンによって、アイコンに影などの効果がつくのを無効化…
スタンドアロンモードとは iOS上のSafariのアドレスバーを非表示にする機能 ユーザに対して、Webページをアプリケーションであるかのように見せることができる スタンドアロンモードの記述例
ファビコンとは Webページで使用するアイコンのこと 指定したファビコンはブラウザのタブやブックマークなどに表示される ファビコンの記述例 ファビコンは.ico形式のファイルで作成する
srcset属性とは 高解像度の画面に画像を対応させるための技術の１つ ディスプレイの解像度や幅に合わせて、ブラウザが最適な画像を読み込む src属性の書式 srcset属性には複数の画像を指定できる。 記述① 解像度によって画像を切り替える場合 ディスプレイの…
高解像度ディスプレイ対応において デバイスピクセルとCSSピクセルを意識する必要がある。 デバイスピクセルとは 端末自体が物理的にサポートするピクセルのこと CSSピクセルとは CSSにおいて理論値として解釈されるピクセルのこと 高解像度ディスプレイでは…
CSSスプライトとは サイトの表示を高速化するために使われるテクニックの１つ 複数の画像を1つにまとめて背景画像とし、CSSで表示位置を指定することによって表示する 画像ファイルをまとめることで、サーバへのリクエスト回数をへらすことができる ファイル…
defer属性とasync属性とは スクリプトファイルの非同期処理取得に関する属性 script要素にdefer属性、またはasync属性を指定すると、スクリプトファイルが非同期取得され、ユーザインタフェースのパース(解析)処理が継続される。 ⋄defer属性：HTMLのパース完…
