Skip to content

HTML5.2で追加されるリファラーポリシーについて

従来、Webサイト間はリンクでつながっており、リンクを辿った際にはリファラーが送信される仕組みになっていました。しかしプライバシーの保護であったり、URL中に機密情報が含まれていた場合に問題になるため、送信されないことも多々あります。

HTML5.2ではリファラーポリシーが追加され、リファラーの送信について細かく制御できるようになります。

リファラーポリシーの設定法

リファラーポリシーはHTMLのmetaタグで指定します。

リファラーポリシーの種類について

HTML5.2によって設定できるリファラーポリシーが増えています。これまでは以下の3パターンでした。

  • origin

    スキーマ、ドメインのみを送ります

  • no-referrer

    リファラーを送りません

  • no-referrer-when-downgrade

    HTTPSからHTTPへのアクセス時にはリファラーを送りません

  • same-origin

    同じドメインであればリファラーを送信します。サブドメインでは送信しません。

  • strict-origin

    HTTPS同士での同じドメイン(サブドメイン含む)へのアクセスにおいてリファラーを送信

  • origin-when-cross-origin

    同じオリジンであればURL全体を送信しますが、スキーマが異なる際にはオリジンしか送信しません

  • strict-origin-when-cross-origin

    同じオリジンであればURL全体を送信します。サブドメインではドメインしか送信しません。スキーマが異なる際にはリファラーを送信しません

  • unsafe-url

    HTTP/HTTPS関係なくリファラーを送信します。

同じドメインであるかどうか、スキーマがHTTPかHTTPSであるかによって送信する情報が異なってきます。

影響範囲

適用されるのはa/area/img/iframe/linkタグになります。


リファラーポリシーを適切に設定することで、Webアプリケーションをセキュアに運用できるようになります。すべて防いでしまえばセキュアになりますが、リファラーの値によって制御するといったことはできなくなります。外部リソースを使うのが当たり前になっている現在、リファラーポリシーを使って安全な運営に努めてください。

Referrer Policy(日本語訳)

hifiveの小さな便利機能、h5.apiの紹介「localStorage編」

hifiveには頻繁に使われるであろう機能をAPIとしてまとめており、h5.apiというネームスペースでアクセスできるようになっています。

今回はlocalStorageを便利にしてくれるh5.api.storageについて紹介します。

localStorageの利用可否を判定する

通常、WebブラウザがlocalStorageをサポートしているかどうかはwindow.localStorageという変数のあるなしで判定されます。

しかしこの方法の場合、iOS/macOSのSafariにおけるプライベートブラウジングを使っている際に問題があります。この時には window.localStorage という変数は存在するものの、実際に書き込みを行うと QuotaExceededError が発生します。

そうした場合を踏まえて h5.api.storage.isSupported を使うと正しく localStorage の利用可否を判定できます。

ループ処理をサポートするeachメソッド

この他、ちょっと便利なeachメソッドが用意されています。

セッションストレージも使えます。

オブジェクトの保存にも対応

保存時に serialize 、取得時に deserialize していますので文字列以外であっても扱えるようになっています。

幾つのキーがあるか判定できる getLength メソッド

これは localStorage.length を実行しているだけです。


機能自体は小粒ですが、頻繁に使われるであろう機能をまとめておくことで開発が効率的になります。ぜひお使いください。

HTML5のドラッグ&ドロップを便利にしてくれるライブラリまとめ

HTML5にはドラッグ&ドロップAPIが追加されました。これによってローカルファイルをドラッグ&ドロップでアップロードしたり、DOM同士をドラッグ&ドロップできるようになりました。

このAPIも素のままでは使いづらいところがあります。そこで今回は利便性を高めてくれるライブラリを紹介します。

Shopify/draggable: The JavaScript Drag & Drop library your grandparents warned you about.

Shopifyが開発しているドラッグ&ドロップライブラリです。DOM向けのライブラリで、ドラッグするオブジェクトごとにドロップできる場所を定義できます。スワップのようなオブジェクト同士を入れ替える機能もあります。

さらにドロップした後のソートであったり、ドロップできない場所に持っていくと震えるといったイベントの設定もできます。

Shopify/draggable: The JavaScript Drag & Drop library your grandparents warned you about.

feross/drag-drop: HTML5 drag & drop for humans

onDrop/onDropTextといったイベントを購読できるようになります。ファイルをドラッグしてきたら特定のDOMを変化させたり、ドロップしたファイルを受け取れます。また、テキストのドラッグ&ドロップも可能です。

feross/drag-drop: HTML5 drag & drop for humans

bevacqua/dragula: Drag and drop so simple it hurts

DOM同士のドラッグ&ドロップに対応したライブラリです。DOM全体をドラッグ可能にすることも、ハンドルをつけてその部分だけをドラッグ可能に指定することもできます。

bevacqua/dragula: Drag and drop so simple it hurts


ドラッグ&ドロップができるとアプリケーション感が強くなります。ローカルファイルはもちろんのこと、Gmailのように別なボックスに振り分けるのも直感的になります。使いこなすのは難しいですが、今回紹介したライブラリを使えば大幅に工数が削減されるはずです。

ダッシュボードを作るのに便利なライブラリまとめ

業務に必要なデータは幾つかのシステムにまたがっていることは少なくありません。そうした時に、それぞれのシステムにログインしてステータスをチェックするのは面倒です。そこで便利なのがダッシュボードです。

ダッシュボードは必要なデータをまとめてチェックするのに適しています。今回はそうしたダッシュボードを作るのに最適なライブラリを紹介します。

codaxy/dashboards: Drag & drop dashboard builder!

あらかじめ用意されたウィジェットをドラッグ&ドロップで配置してダッシュボードを作成するソフトウェアです。配置はとても柔軟で、ウィジェット同士を重ねて配置することもできます。

背景色やダッシュボード全体のサイズを変更することもできます。

codaxy/dashboards: Drag & drop dashboard builder!

gridstack/gridstack.js: gridstack.js is a jQuery plugin for widget layout

あらかじめ決められたグリッドに沿ってウィジェットを配置します。グリッドは複数の枠にまたがって配置することも可能です。配置データはJSONになっているので、それを使って配置の再現も可能です。

gridstack/gridstack.js: gridstack.js is a jQuery plugin for widget layout

jerrywham/SonarRSS: Netvibes minimalist alternative

フィードを配置するのに特化したダッシュボードです。最初はタイトルだけですが、クリックすると本文も表示されます。情報のビジュアル化には向きませんが、一覧でまとめて新着情報をチェックしたいといったニーズに使えそうです。

jerrywham/SonarRSS: Netvibes minimalist alternative

oazabir/Droptiles: Droptiles is a “Windows 8 Start” like Metro-style Web 2.0 Dashboard. It compromises of Live Tiles. Tiles are mini apps that can fetch data from external sources. Clicking on a tile launches the full application.

Windows8 Style UIに近いダッシュボードです。パネルの配置は自分で変更できます。基本的に横スクロール型のUIとなっています。テーマごとにブロックを分けられるので、グルーピングにも向いています。

oazabir/Droptiles: Droptiles is a “Windows 8 Start” like Metro-style Web 2.0 Dashboard. It compromises of Live Tiles. Tiles are mini apps that can fetch data from external sources. Clicking on a tile launches the full application.

Shopify/dashing: The exceptionally handsome dashboard framework in Ruby and Coffeescript.

デザインがすっきりとした、モダンなUIのダッシュボードです。グラフを描画することも可能です。グリッド型になっているので、配置はそれに沿って変更できるようになっています。

Shopify/dashing: The exceptionally handsome dashboard framework in Ruby and Coffeescript.

ducksboard/gridster.js: gridster.js is a jQuery plugin that makes building intuitive draggable layouts from elements spanning multiple columns

Pinterestライクにグリッドが重なったUIになっています。利用する最小のカラム数、行数が指定できます。グリットに沿った形で配置を自由に変更できます。

ducksboard/gridster.js: gridster.js is a jQuery plugin that makes building intuitive draggable layouts from elements spanning multiple columns


ダッシュボードは特に並び替え、配置換えが必要です。それによって担当者一人一人に最適化されたUIが実現できます。作業効率も変わってくるでしょう。どこまで自由にカスタマイズできるかはライブラリ次第です。

開発者は個々のウィジェットを開発します。Web APIをうまく使えば多数のシステムからまとめてデータを収集して表示できるようになるでしょう。

hifive と Onsen UIを組み合わせてスマートフォン/タブレット向けのUIを簡単に実現する(ビュー)

Onsen UIというモバイルアプリ向けのUIフレームワークがあります。HTML5とJavaScript、CSSを使ってスマートフォンアプリを作るハイブリッドアプリ用のUIフレームワークになります。UIをネイティブアプリ風にしてくれるのはもちろん、画面のスワイプであったり、リスト表示などをネイティブアプリ風の操作にしてくれます。

そんなOnsen UIをhifiveと組み合わせて使う方法を紹介します。今回はejsと組み合わせた表示更新について紹介します。

利用するソフトウェア/ライブラリ

  • Bower
  • hifive
  • Onsen UI
  • jQuery

インストール

まず各ライブラリをインストールします。インストールはBowerを使って行います。

今回は .bowerrc という設定ファイルを作成し、ライブラリのインストール先を指定しています。

index.htmlの作成

次に public/index.html を作成します。インストールしたライブラリを読み込んでいるだけです。

Onsen UIの記述

bodyタグ内に次のように記述します。これはOnsen UIの画面遷移を管理するナビゲーターのタグです。IDをnavとし、最初に読み込むページをpage要素で定義します。

app.htmlの作成

そしてapp.htmlを作成します。#appを忘れずに付けておきます。時刻を表示する部分はejsの埋め込みになっています。

この状態でページを読み込むと、Onsen UIが自動的にモバイルアプリ風のUIにしてくれます。

hifiveの作成

次にhifiveの処理です。まず画面を読み込んだ時のイベント document.addEventListener init 時において、コントローラ化とデータを渡します。渡すデータとして、ページ情報と画面に適用される変数を渡します。

そしてコントローラの初期化時において、テンプレートをダイナミックに定義します。 page.id は app になりますので、テンプレート名は app となります。そして、 #app に対してテンプレートID app の内容を反映します。

後はボタンを押したタイミングなどでも同様に画面に反映できます。

こうすることでボタンを押すと時間が更新される仕組みができあがります。


このようにテンプレートを使うことで画面の細かい表示を気にすることなくデータの変更と反映ができるようになります。なお、hifiveではデータバインディングによって変数を変更するだけで画面を更新する仕組みもあります(若干処理が複雑になるので今回は止めました)。

デモコードはhifiveWithOnsenUI/view at master · hifivemania/hifiveWithOnsenUIにアップロードしてあります。実装時の参考にしてください。

Onsen UIはReact/Angular/Vueなどをサポートしていますが、進化の速いフレームワークであるために業務システム開発には不向きでしょう。また、Onsen UIはjQueryからの利用もサポートしていますので、hifiveと組み合わせることでメンテナンスしやすい、中長期的な運用も視野に入れたモバイルアプリ開発が行えるようになります。ぜひお試しください。

hifive と Onsen UIを組み合わせてスマートフォン/タブレット向けのUIを簡単に実現する(タブバー)

Onsen UIというモバイルアプリ向けのUIフレームワークがあります。HTML5とJavaScript、CSSを使ってスマートフォンアプリを作るハイブリッドアプリ用のUIフレームワークになります。UIをネイティブアプリ風にしてくれるのはもちろん、画面のスワイプであったり、リスト表示などをネイティブアプリ風の操作にしてくれます。

そんなOnsen UIをhifiveと組み合わせて使う方法を紹介します。今回はタブバーを使った処理について紹介します。

利用するソフトウェア/ライブラリ

  • Bower
  • hifive
  • Onsen UI
  • jQuery

インストール

まず各ライブラリをインストールします。インストールはBowerを使って行います。

今回は .bowerrc という設定ファイルを作成し、ライブラリのインストール先を指定しています。

index.htmlの作成

次に public/index.html を作成します。インストールしたライブラリを読み込んでいるだけです。

Onsen UIの記述

bodyタグ内に次のように記述します。これはOnsen UIでタブバーを表示するタグです。詳しくはons-tabbar – Onsen UIをご覧ください。tab1.htmlとtab2.htmlは後で作成します。

tab1.htmlの作成

今回は簡単に次のようなページを作成します。html、head、bodyタグなどは不要です。

tab2.htmlの作成

tab1.htmlと同様に簡易的な内容で作成します。

hifiveの実装

今回、コントローラは最低限としています。

そしてコントローラ化するのは document.addEventListenerinit イベントになります。引数の event.target でどのページが読み込まれたか分かりますので、そのIDによって初期化するコントローラを分けています。

これだけで画面遷移と、それぞれのコントローラによるイベント管理が実現できます。


デモコードはhifiveWithOnsenUI/tabbar at master · hifivemania/hifiveWithOnsenUIにアップロードしてあります。実装時の参考にしてください。

Onsen UIはReact/Angular/Vueなどをサポートしていますが、進化の速いフレームワークであるために業務システム開発には不向きでしょう。また、Onsen UIはjQueryからの利用もサポートしていますので、hifiveと組み合わせることでメンテナンスしやすい、中長期的な運用も視野に入れたモバイルアプリ開発が行えるようになります。ぜひお試しください。

hifive と Onsen UIを組み合わせてスマートフォン/タブレット向けのUIを簡単に実現する(画面遷移)

Onsen UIというモバイルアプリ向けのUIフレームワークがあります。HTML5とJavaScript、CSSを使ってスマートフォンアプリを作るハイブリッドアプリ用のUIフレームワークになります。UIをネイティブアプリ風にしてくれるのはもちろん、画面のスワイプであったり、リスト表示などをネイティブアプリ風の操作にしてくれます。

そんなOnsen UIをhifiveと組み合わせて使う方法を紹介します。今回は

利用するソフトウェア/ライブラリ

  • Bower
  • hifive
  • Onsen UI
  • jQuery

インストール

まず各ライブラリをインストールします。インストールはBowerを使って行います。

今回は .bowerrc という設定ファイルを作成し、ライブラリのインストール先を指定しています。

index.htmlの作成

次に public/index.html を作成します。インストールしたライブラリを読み込んでいるだけです。

Onsen UIの記述

bodyタグ内に次のように記述します。これはOnsen UIの画面遷移を管理するナビゲーターのタグです。IDをnavとし、最初に読み込むページをpage要素で定義します。

app.htmlの作成

そしてapp.htmlを作成します。#appを忘れずに付けておきます。

この状態でページを読み込むと、Onsen UIが自動的にモバイルアプリ風のUIにしてくれます。

画面遷移の作成

ではJavaScriptファイルを js/app.js として作成します。まず最初の画面用のコントローラーを定義します。

ここで注意する点として、index.htmlがapp.htmlを読み込んでいるということが挙げられます。そのため、 $(function() {}) のようなイベント時においてコントローラ化を行うとまだページ内容が存在しない状態になります。また、SPAとしての画面遷移も考慮する必要があります。

そこで document.addEventListenerinit イベントを使います。ここでは各画面が初期化される際に呼ばれますので、最初の画面を初期化する際にbodyに対してコントローラ化します。これはナビゲーションタグが #app 内にはないためです。

ボタンを押した際のイベント

そしてボタンを押した際のイベントを作ります。コントローラ管理化の #nav を見つけ、そのpushPageメソッドをコールします。第一引数にページ名、オプションとしてdataというキーで次の画面に引き継ぐ情報が送れます。

ページ遷移の処理

ページ遷移のアニメーションはOnsen UIが自動で行ってくれますが、コントローラ化は自分で実装します。すでにあるdocument.addEventListenerinit イベントを使います。先に設定したdataはpage.dataで取れますので、それをコントローラ化する際のオプションとして渡します。

ページの表示

newControllerは次のようになります。準備ができた時 __ready が呼ばれますので、そこで画面表示を更新します。

こうすることで画面遷移したタイミングで画面が書き換わります。イベントのハンドリングはhifiveのコントローラで変わらず行えます。


デモコードはhifiveWithOnsenUI/navigation at master · hifivemania/hifiveWithOnsenUIにアップロードしてあります。実装時の参考にしてください。

Onsen UIはReact/Angular/Vueなどをサポートしていますが、進化の速いフレームワークであるために業務システム開発には不向きでしょう。また、Onsen UIはjQueryからの利用もサポートしていますので、hifiveと組み合わせることでメンテナンスしやすい、中長期的な運用も視野に入れたモバイルアプリ開発が行えるようになります。ぜひお試しください。