3/21 に[Web セキュリティ・ハンズオン 〜攻撃して学ぶ、HTML5 のセキュリティ〜](https://firefox-os.doorkeeper.jp/events/21218)に参加してきました。

セキュリティ業界のガチ勢を目の前に、最近の Web のセキュリティについて自分はまだまだ素人だと思い知りました。
いろいろ収穫のあったので忘れないうちにまとめておきたいと思います。

企画・運営していただいた方々、本当にありがとうございました。



## 発見した脆弱性

まず、今回の課題は架空の SNS サービスを題材としたもので、フロント側とサーバー側の両方に脆弱性があるものでした。
私が参加したチームは猛者しかいなかったので、たくさんの脆弱性を見つけることができました。  
(私ではなく、チームのメンバーが発見したものがほとんどです。)

主にフロント側の脆弱性を中心に、思い出せる範囲だけ紹介したいと思います。

### 管理画面への侵入、及び管理者への昇格

> これができた時点で、今回の自分の仕事は終了でした。(by Mala さん)

これは、管理画面に認証がかかっていなかったことがまず悪いのですが、そもそも`test.html`や`admin.html`など容易に推測できる URL になっていることも問題でした。

あまり Web に詳しくない方が、Wordpress に代表されるようなテンプレートを利用する機会も多いと思いますが、そのまま利用した場合、わかる人には管理画面の URL ばれているので危険ですね。
最近は、yeoman のテンプレートで管理側の機能も生成するものは気をつけた方がいいと思います。

管理者への昇格ですが、今回はブラウザの IndexedDB にログイン後のアカウント情報を持つ仕様でした。即 Devtools で書き換えました w。  
こういうセキュアな情報はフロント側では持ってはいけない典型的な例ですね。

### XSS

これは、SNS にコメント入力欄に XSS 脆弱性があるというよくあるパターンなのですが、普通に`<script>alert(1)<script/>`と書いても実行されません。ではどうするかというと、次のように書きます。

```
<img src='#' onerror=alert(1) />
```

[security - XSS attack with javascript in img src attribute - Stack Overflow](http://stackoverflow.com/questions/1798633/xss-attack-with-javascript-in-img-src-attribute)

わざとタグの中でエラーが起きるような記述をして`onerror`を発火させます。同様に`mousemove`とかでもできます。

もう一つ XSS できる方法があって、SNS に投稿する画像の exif に攻撃コードを注入する方法です。

[EXIF Cross Site Scripting, PHP Fun | Barry Shteiman](http://www.sectorix.com/2013/12/02/exif-cross-site-scripting-php-fun/)

この SNS は画像に付加されている撮影カメラの機種(？)を表示する仕様でした。そこに XSS 脆弱性があった訳です。

基本的には`innerHTML`を`textContent`に置き換えるのがいいと思いますが、サービス仕様によっては`<a>`タグは許容したいとかありそうで、なかなか悩ましいですね。

### WebAPI の認証不備

これは、WebAPI 側でトークンなどのチェックを一切行っていないことに起因するもので、API アクセスすると誰でも SNS の内容が盗聴できる状態でした。

また、コメント投稿など API 操作の際に、ユーザー ID をパラメータに含める謎仕様だったので、ローカルプロキシでリクエストを改ざんしたり、
広告用の iframe に CSRF 用のコードを含めることで、容易になりすまし投稿や削除などができる状態でした。

これは、WebAPI の認証はしっかりやることと、フロント側にセキュアな情報は持たせないの 2 点につきます。

手前味噌で恐縮ですが、以前こんな記事書きました。

[JWT(Json Web Token)を利用した WebAPI での Credential の受け渡しについて](http://blog.mitsuruog.info/2014/08/jwtjson-web-tokenwebapicredential.html)

### ログインに関するもの

ログインに関するものは、まず何回でも失敗できるので、総当たり攻撃ができるということでした。数回失敗すると captcha を表示して相手が機械かどうか確認するのがいいそうです。

それからパスワード忘れ機能で、「好きな色はなに？」と聞いてくるのですが、デフォルトの仕様が「黒」だったので、ユーザー名を知っていればなりすましログインできる状態でした w。

過去には「好きなディズニーキャラクターは？」とういう仕様のサービスが実際にあったとか。。。なかったとか。。。

パスワード忘れの場合は、直接ログインさせるのではなく、メールなどでリセット用のアドレスを送付して 1 つクッションするのが一般的だと思います。  
それから、設問がイケてないと設計側の責任になるケースがあるので、設問自体をユーザーに決めさせるという方法もあるようです。

国によっては聞いてはいけない設問もあるようですので、こちらでチェックされるのがいいそうです。

[Choosing and Using Security Questions Cheat Sheet - OWASP](https://www.owasp.org/index.php/Choosing_and_Using_Security_Questions_Cheat_Sheet)

最近は、パスワードや個人情報を持つこと自体がリスクな場合は、認証自体を SNS 認証(OAuth など)に置き換えるのもありだと思いました。

### 連番

今回の SNS はユーザー ID、メッセージなどほとんどが連番で予測可能でした。  
もう、連番のような推測可能な情報を Web で公開すること自体が脆弱性のような気もします。予測しにくいランダムな文字列を設定するように心がけたいですね。

たまに見過ごされがちなのが、投稿画像(動画)などの静的ファイルが連番になっている件で、他人に見られたくない画像が URL を予想して表示できる状態でした。

それと、削除された画像の扱いについてで、サービスによっては一定期間保管する(努力義務？)のようなものがあるそうで、そうした場合、Web からアクセスできない削除用フォルダのようなところに移動させたほうが良いそうです。

### iframe の postMessage

今回、認証用のログインダイアログが別ドメインの iframe になっていて、結果を postMessage で親画面に送っていたのですが、
postMessage の targetOrigin が指定されていないため、悪意のあるページにこの認証ダイアログが iframe が組み込まれると、認証後の情報をすべて抜き取られてしまいます。

ユーザーをあたかも正規サイトのような罠サイトに誘導して、ログインを促してセキュアな情報を抜き取る例の手口ですね。おー怖っ。

このことは、MDN 読めば書いてあるのですが普段から脅威に気づいていないと読み飛ばしてしまいそうです。  
新しい機能を利用する場合は、セキュリティに関する留意点を確認すること。

[window.postMessage セキュリティに関すること- Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/Window/postMessage#Security_concerns)

### Cordova(WebView の XSS)

こ、これは、恐ろしかった w。

XSS の続きなんですが、XSS の攻撃コードに Cordova のプラグインをコールするコードを設定すると、ネイティブの機能が呼び出されるという類のものです。

例）バイブを動作させるコード

```
<img src="a" onerror="navigator.vibrate(100)">
```

特に、最近はハイブリッド開発プラットホームが増えてきて、JS からネイティブの機能を操作ようになっているのですが、
そうなると今までの XSS がネイティブコードに対する脅威に昇格するので、今まで以上に XSS について注意する必要があると思いました。

XSS をさせないのが一番だと思いますが、開発中にちょっと試してインストールしたような、不要なプラグインは気付いたら削除するべきですね。
あと、万が一何かあった場合は、Webview から外にデータは流れないようにするべきだとおもいました。

[Crosswalk - xwalk_hosts](https://crosswalk-project.org/documentation/manifest/xwalk_hosts.html)

[Crosswalk - Content security policy](https://crosswalk-project.org/documentation/manifest/content_security_policy.html)

ふうふう。。。

## 大事なこと

まず、今回の課題は架空の SNS サービスを題材としたもので、フロント側とサーバー側の両方に脆弱性があるものでした。  
それぞれ脅威に対する対策については少し異なる部分もあると思うのですが、自分なりに感じた脅威に対する対策(心構え？)としては共通するものがあったかなと思います。

- 意図しないコード(人)を侵入させないこと。
- 意図しないコードを実行させないこと。
- もし、意図しないコードが実行されたとしても、外部に情報が漏れないこと。

フロント側の対策としては XSS を中心に昔からよく言われている対策を進めていけばいいと思うのですが、次々と新しいクロスプラットフォームが発表され、HTML の新しいタグや API が追加されるような変化が激しい状況下で、日々脅威となるポイントは増えているんだなと思いました。

## 最後に

昔から利便性とセキュリティは相反するものだとよく言われてきますが、
Web をより使いやすくするために追加された新機能や手法が新たな脅威を生む構図があり、なかなか考えさせられるものがありました。

いくつか攻撃コードの中には知っている手法もあったのですが、やはり知っているのと実際に攻撃してみたでは全く感じ方が異なりますね。  
このように実際に攻撃の実習と通して、Web セキュリティについて実践的に学べる場は本当に貴重だと思いました。

多くの企業システムに関わることが多いエンジニアとして、このような脅威があること実際の開発現場にて啓蒙していき、
より安全な Web システムを作るために努力していきます的な優等生コメントで締めたいと思います。

企画・運営していただいた方々、本当にありがとうございました。  
思いは確かに伝わりました。

### 参考資料

- [安全なウェブサイトの作り方：IPA 独立行政法人 情報処理推進機構](http://www.ipa.go.jp/security/vuln/websecurity.html)
- [HTML5 を利用した Web アプリケーションのセキュリティ問題に関する調査報告書](https://www.jpcert.or.jp/research/html5.html)
- [Android セキュリティ勉強会～ WebView の脆弱性編～(PDF)](https://ierae.co.jp/uploads/webview.pdf)
- [HTML5 Security Cheatsheet(mala さんに教えていただいた、xss の例がいっぱいのってるサイト)](https://html5sec.org/)

Webセキュリティ・ハンズオン 〜攻撃して学ぶ、HTML5のセキュリティ〜に参加してみた話

2014/09/09 に美人で有名なおだんみつさんのいる[21cafe](http://www.ni-ichicafe.com/)で「[エンタープライヤーのための Web Components ハンズオン](https://atnd.org/events/55761)」を開催しました。内容は「Web 名刺」を Web Components で作るというものです。

Web Components についての解説記事はそこそこ出てきましたが、ハンズオンだと国内初の試みかと思います。それなりに難しい技術に関するハンズオンでしたが、なかなか好評だったようですので少し振り返ってみます。



![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2014/wc_handson1.png)

## 目次

## Web Components とは

UI 部品がコンポーネント化して再利用しやすくすることが出来る技術です。詳細は Google のえーじさんが[なぜ Web Components はウェブ開発に革命を起こすのか](http://blog.agektmr.com/2014/05/web-components.html)で書いている記事が分かりやすいかと思います。とにかく将来の Web 開発に革命を起こすと言われる技術です。

## 苦労したポイント

2 時間のハンズオンコースですので、その限られた時間内で結果を出さなければなりません。
今回苦労したポイントは 2 つです。

1.  Web Components のメリットを感じつつ、作ってて面白く、参加者が本気になる題材はなにか。
2.  Web Components の複雑に絡み合った仕様を最短で理解してもらうためには、どうすればいいか。

「題材」については自分のカスタムタグが作れて気軽に配布できると嬉しい「Web 名刺」にしました。
最短で理解してもらうための構成とコンテンツ作りには難儀しましたが、Web Components のコンセプトについては「花の種」を例えて、コンテンツの方は、講師がいなくても出来るように[Github](https://github.com/html5bizj/x-business-card)上に作りました。
(Github のコンテンツについてはかなり試行錯誤して悩んだのは事実です。)

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2014/wc_handson2.png)

> [エンタープライズな@mitsuruog さんならではの「Web Components は花の種で理解しよう」論いいねっ ∩( ・ω・)∩ ](https://twitter.com/21cafe_shibuya/status/509291557111885825)

参加者からは嬉しい反応もいただけたので、なかなかハンズオンとしては成功だったようです。主催としてはホッとしています。

こちらが当日の様子です。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2014/wc_handson3.jpg)

> [ 昨日は WebComponents ハンズオンありがとうございました。信じがたいことにあの 2 時間だけでかなり自在に WebComponent が書けるようになりました。(^^;;;](https://twitter.com/shunjikonishi/status/509540957809692672)

> [Web Components すごい](https://twitter.com/ab_lave/status/509320071731109888)

発表資料はこちらです。

[エンタープライヤーのための Web Components ハンズオン](https://www.slideshare.net/mitsuruogawa33/webcompoents)

ハンズオンの内容についてはこちらにあります。

[html5bizj/x-business-card](https://github.com/html5bizj/x-business-card)

## 成功したポイント

成功したポイントはいくつかあるのですが、簡単に言うと[@kara_d さん](https://twitter.com/kara_d)のこの一言、「企画」なのかなと思います。

> [今日は html5 えんぷら部にて web components ハンズオンに参加〜 名刺を作るって企画いいなあ。](https://twitter.com/kara_d/status/509314331154980864)

「企画」が最も大事なのは事実なのですが、裏でハンズオンを成功させるための運営的な小細工をいろいろやっていたので、機会があったらノウハウまとめたいと思います。

## さいごに

今回、[エンタープライヤーのための Web Components ハンズオン](https://atnd.org/events/55761)を開催しました。2 時間で参加者が満足できるハンズオンができるか不安でしたが、なんとか成功させることができたようです。

お忙しい中、参加していただいた皆さんありがとうございました。チューターの[@albatrosary さん](https://twitter.com/albatrosary)、[@can_i_do_web](https://twitter.com/can_i_do_web)さんありがとう！あなた達のフォローがなかったら成功しなかったです。会場提供の[21cafe](http://www.ni-ichicafe.com/)さんもありがとうございました。

作成した Web 名刺

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2014/wc_handson4.jpg)

最後は参加者で記念撮影

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2014/wc_handson5.jpg)

Web Components ハンズオンをやってみた

> How to internationalize the smart in OpenUI5/SAPUI5

エンタープライズ利用を想定した「[OpenUI5](http://sap.github.io/openui5/)」には、企業システムで有用な多くの UI コンポーネントを持っています。  
しかし、OpenUI5 の価値は豊富な UI だけではありません。OpenUI5 の本当の価値は、エンタープライズ利用を想定した HTML5 ベースのアプリケーションを作成するために、必要な機能を含んだオールインワンかつハイスペックな UI フレームワークということです。  
今回は、その中でも OpenUI5 が持つ強力な国際化機能について説明します。



![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2014/a1180_010361.jpg)

## 目次

本記事で利用するデモはこちらで参照出来ます。  
Demo here :).  
[http://mitsuruog.github.io/sapui5-showroom/app/#/locale](http://mitsuruog.github.io/sapui5-showroom/app/#/locale)

## 1. OpenUI5 での国際化

OpenUI5 にて国際化するための手順は「リソースモデルファイルの作成」「リソースモデルをロード」「コントロールへデータバインド」の 3 つです。
順に説明していきます。

### リソースモデルファイルの作成

まず、国際化用の「**リソースモデル(ResourceModel)**」を作成し、その中に国際化したいメッセージを定義していきます。ファイルはこちらを参考にしてください。

```
title = ロケール
text = 吾輩は猫である。名前はまだ無い。
changeLocale = ロケール変更:
button = これはボタンのテキスト
```

このリソースモデルは Java の「java.util.Properties」クラスと同等のもので、中に「key/value」ペアで値を設定していきます。ファイルの拡張子は「\*.properties」です。
（マルチバイトの場合であってもファイルが UTF-8 で作成されていれば、Unicode エスケープする必要はないようです。）

Web ルート直下に「i18n」フォルダを作成して、ファイルを配置するのが慣例のようです。まず、最低限ロケールなしの場合に利用される「**messageBundle.properties**」を作成します。各ロケールごとのファイル名の例は以下の通りです。

- messageBundle_en.properties
- messageBundle_ja.properties
- messageBundle_zh_CN.properties
- messageBundle_zh-Hans-CN.properties

ロケールの言語コードについての詳細はこちらを参照してください。

[Identifying the Language Code / Locale](https://openui5.hana.ondemand.com/#docs/guide/91f21f176f4d1014b6dd926db0e91070.html)

[言語の対応付け - Windows app development](http://msdn.microsoft.com/ja-jp/library/windows/apps/jj673578.aspx)

### リソースモデルをロード

次に、リソースモデルをアプリケーションにロードしていきます。こちらのコードを参考にしてください。

Locale.controller.coffee

```js

sap.ui.controller "com.mitsuruog.sapui5.showroom.view.Locale",

  onInit: ->
    i18nModel = new sap.ui.model.resource.ResourceModel
      bundleUrl : "i18n/messageBundle.properties"

    @getView().setModel i18nModel, "i18n"
```

ロードする場所は、「Component.js」の`init()`か、国際化対象 View の Controller の`init()`がいいと思います。`i18n`という名前付き Model としてロードして、後のコントロールへのデータバインドの際に利用します。

### コントロールへデータバインド

最後にコントロールの国際化したプロパティへメッセージをデータバインドしていきます。こちらのコードを参照してください。

Locale.view.coffee

```js
sap.ui.jsview "com.mitsuruog.sapui5.showroom.view.Locale",

  getControllerName: -> "com.mitsuruog.sapui5.showroom.view.Locale"

  createContent: (oController) ->
    @page = new sap.m.Page
      title: "{i18n>title}"
      subHeader:
        new sap.m.Bar
          contentRight: [
            new sap.m.Text
              text: "{i18n>changeLocale}"
          ]
      content: [
        new sap.m.Text
          text: "{i18n>text}"
      ]
      footer:
        new sap.m.Bar
          contentRight: [
            new sap.m.Button
              type: "Accept"
              text: "{i18n>button}"
          ]

    @page
```

こちらが国際化した結果画面の例です。日本語と英語で画面の項目名などが変化していることが分かると思います。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2014/Hello_SAPUI52_Fotor_Collage.png)

より詳細な内容は公式ページを参照してください。

[Step 4: Internationalization](https://openui5.hana.ondemand.com/#docs/guide/b6d1a9511f994b3a86e2f34a32e40a34.html)

[Translating SAPUI5 Applications](https://openui5.hana.ondemand.com/#docs/guide/91f217c46f4d1014b6dd926db0e91070.html)

## 2. ロケール判定の優先度

次に、OpenUI5 へのロケール指定の方法とロケール判定に優先度について説明します。こちらが一覧です。上から優先度が高い設定です。

- プログラムからの直接設定
- URL パラメータからの指定
- アプリケーション Config での指定
- window.navigator.userAgent での指定(Android のみ)
- window.navigator.language での指定
- window.navigator.userLanguage での指定(IE のみ)
- window.navigator.browserLanguage での指定(IE のみ)
- デフォルトのロケールは「**en**」

かなり細かい指定ですが、大きく分けると以下の 5 つになるかと思います。

- プログラムからの直接設定
- URL パラメータからの指定
- アプリケーション Config での指定
- 端末固有設定(window.navigator.language など)
- デフォルト「**en**」

この中で、プログラマブルに設定する可能性がある「プログラムからの直接設定」「URL パラメータからの指定」「アプリケーション Config での指定」について順に説明します。

### プログラムからの直接設定

プログラム上で OpenUI5 のロケール情報を参照する場合は、`sap.ui.getCore().getConfiguration().getLanguage()`を利用します。
ロケールの変更を行う場合は、`sap.ui.getCore().getConfiguration().setLanguage(local)`を利用します。引数の`local`にはロケールを文字列で設定してください。`null`を設定することはできません。

### URL パラメータからの指定

URL パラメータに`sap-language`を設定することでアプリケーション呼び出し時に特定のロケールを指定することができます。
こちらがその例です。

[http://mitsuruog.github.io/sapui5-showroom/app/?sap-language=en](http://mitsuruog.github.io/sapui5-showroom/app/?sap-language=en)

URL ハッシュが付く場合はこちらです。

[http://mitsuruog.github.io/sapui5-showroom/app/?sap-language=de#/locale](http://mitsuruog.github.io/sapui5-showroom/app/?sap-language=de#/locale)

### アプリケーション Config での指定

アプリケーション Config でロケールを設定することも出来ます。こちらは`sap.ui.core.Configuration`を利用するもので、詳細については割愛します。後日機会があれば別途取り上げたいと思います。

興味がある方はこちらの公式ドキュメントを参照してください。

[JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.ui.core.Configuration](https://openui5.hana.ondemand.com/docs/api/symbols/sap.ui.core.Configuration.html)

## 3. まとめ

OpenUI5 での国際化の方法について説明しました。OpenUI5 はグローバルでの利用を想定した強力な国際化の機能を持っています。

このような国際化の仕組みは、OpenUI5 がエンタープライズ利用を想定したものであり、それを提供する SAP 社がグローバルカンパニーであるであるからこと出来たと考えています。  
簡単に国際化することができることも、OpenUI5 の魅力の一つですね。

[SAPUI5/OpenUI5]スマートに国際化する方法

2014/5/19 に[HTML5fun](http://html5fun.jp/)の立ち上げイベントで話す機会をいただきまして、「エンタープライズでの HTML5」について最近思うことを、割と自由に話してきました。イベント開催レポートはこちらです。

[HTML5fun -全国に HTML5 の楽しさを-](http://html5fun.jp/event/event_001.html)

また、2014/5/22 に行った[Java Day Tokyo 2014](https://oj-events.jp/public/application/add/170)での内容も絡めて、少し補足したいと思います。



![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2014/html5fun.png)

1.  エンタープライズで HTML5 は必要なのか？
2.  IoT とバリューチェーン
3.  最後に

発表したスライドはこちらです。よかったら「Like」してください。

[エンタープライズと HTML5〜エンタープライズで HTML5 って本当に必要なのか？](https://www.slideshare.net/mitsuruogawa33/html5-34860465)

## エンタープライズで HTML5 は必要なのか？

答えは「Yes」です。

ただしモバイルの活用の方法の１つとして「HTML5」があるという位置づけになると思います。また、企業でのモバイル活用は今もっともホットなキーワードの一つです。

最近の企業システムの入力系は業務に特化されたのも少なくなく、バーコードリーダーなどの外部機器接続、センサー、認識系（画像、音声）など、ネイティブという選択肢も捨てられないです。そこで最近注目しているのが、PhoneGap や Cordova に代表される HTML5 とネイティブを組み合わせた「ハイブリッド」アプローチです。
ただ、モバイル用途として、参照や簡単な入力がメインであれば、HTML5 だけで割とライトな形で作って問題ないと思います。

## IoT とバリューチェーン

昨年辺りから、IoT（Internet of Things）や IoE（Internet of Everything）というキーワードを耳にする機会が多くなったように思えます。

国内でもモバイルを持つ人口が増えていることは周知の事実ですが、スマートメーター、スマート家電、スマート TV など「スマート〜」が流行ってきており、様々なセンサーが使われてこれまた、Web に繋がるようになって、将来的に企業システムは IoT に対応して行く事になるでしょう。

その一方で、IoT 時代の企業システムが生み出すバリューチェーンについても改めて考える必要があると感じています。
その象徴的なものが、Java One Tokyo 2014 の基調講演にて Nandini Ramani 氏が語ったこのスライドでしょう。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2014/IMG_20140522_104924.jpg)

両側に「データセンター」「デバイス」があって、その間を「繋ぐ」３層レイアーになっています。

デバイスで発生したデータをクラウドへ転送して、最終的に価値にしていく構図です。

HTML5 の中でも特別扱いされている感がある「Websocket」も、このバリューチェーンをイメージすると理由が分かり易いと思います。

「データセンター」と「デバイス」の 2 つのレイアーを接続するために、現状、もっとも適しているのがインターネット（Web）の HTTP であり、それをさらに効率良く行うための方法が「Websocket」です。

（Java One Tokyo 2014 でも Websocket について多く語られていました。）

つい我々フロントエンドをやっている人たちは、デバイスレイアーに注目してしまいがちなのですが、このバリューチェーンを意識するかどうかで、モバイル導入の目的や効果が明確になっていいと思います。

## さいごに

企業システムのフロントエンドエンジニアなりたいという人が少しでも増えるといいなと思っています。これからも微力ながら活動していきたいです。

[HTML5fun](http://html5fun.jp/)のスタッフの皆さん本当にありがとうございました。  
全国に HTML5 の楽しさを伝えるような活動を今後も行ってください。

HTML5funで「エンタープライズでのHTML5」について最近思うことを話してきた

職場の同僚が[RICOH THETA](https://theta360.com/ja/)なる 360° 写真が撮影できるカメラを買って、何やら面白そうなことをやりたがってたので、three.js を使って全天球処理するところを手伝いました。  
全天球処理はさほど難しくなかったのですが、欲を出して行った Drag&Drop 処理が結構ハマったので、その辺りを話ます。

下の DEMO サイトに THETA で撮影した画像を Drag&Drop すると、いい感じに全天球にしてくれます。ソースコードもすべて Github に公開してますので参考にしてください。

- DEMO：[http://mitsuruog.github.io/richo-theta-with-threejs](http://mitsuruog.github.io/richo-theta-with-threejs)
- リポジトリ：[https://github.com/mitsuruog/richo-theta-with-threejs](https://github.com/mitsuruog/richo-theta-with-threejs)



![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2013/RICOH_THETA.png)

### 目次

1.  RECOH THETA とは
2.  three.js での全天球処理
3.  HTML5 File API による Drag&Drop 処理
4.  Cross Origin image load HACK
5.  まとめ

## 1. RECOH THETA とは

[RICOH THETA](https://theta360.com/ja/)とは RICOH 社が製造する 360° 写真が撮影できるカメラです。

外見がシャレてます。でも結構お高いです。（¥44,800 執筆時）

しかも、公式サイトもおしゃれで流行の縦スクロール型のレスポンシブデザインですが、中身は HTML5 ではなく XHTML でした。残念 w。

スクロールで動く部分は jQueryPlugins ではなく、手組っぽいです。

## 2. three.js での全天球処理

three.js での全天球処理はこちらの WebGL サンプルを参考にしました。  
（とは言ってもほとんどコピペですが・・・）

[http://threejs.org/examples/webgl_panorama_equirectangular.html](http://threejs.org/examples/webgl_panorama_equirectangular.html)

全天球処理がさくっと終わったので、欲を出して image ファイルを Drag&Drop して three.js のテクスチャを変えようとおもったのですが、これがハマりました。

## 3. HTML5 File API による Drag&Drop 処理

HTML5 には FIleAPI という、ブラウザからローカルファイルのやり取りができる標準 API があります。今回は FlieAPI を使って image ファイルの Drag&Drop 処理を実現していきます。

処理の大枠は次のようなコードになります。

```js
//イベント伝搬をキャンセル
function cancelEvent(e) {
  e.preventDefault();
  e.stopPropagation();
}

//ファイルがドロップされたら動くコード
function handllerDroppedFile(e) {
  //
  //ここにthree.jsのテクスチャを変えるコードを書きます。
  //

  //デフォルトのイベントキャンセルしないと
  //ブラウザでイメージが表示されてしまう
  cancelEvent(e);
}

//画面全体
var droppable = document.getElementById("container");
//イベントハンドラ
droppable.addEventListener("dradenter", cancelEvent);
droppable.addEventListener("dragover", cancelEvent);
droppable.addEventListener("drop", handllerDroppedFile);
```

実装時の注意点としては、ファイルドロップ時にイベントの伝搬をキャンセルしないと、ブラウザで image ファイルを開いてしまいます。

## 4. Cross Origin image load HACK

実際にドラックされた image ファイルは`dataURI形式`に変換して、three.js のテクスチャに設定すればうまく行くと思ったのですが、dataURI を読み込む際に同一生成元ポリシー（same origin policy）に抵触していまいエラーとなってしまいました。

dataURI は、通常の Web のリソース命名方式（http とか）ではなく、独自の命名方式（data）で命名されてしまうため、ドラッグした image ファイルを Javascript で再利用しようとすると必ず同一生成元ポリシー違反となってしまいます。  
（[RFC6454 — The Web Origin Concept の仕様書](http://tools.ietf.org/html/rfc6454#section-5)に書いてありました。）

そのため一度、ダミーの img タグに紐づけてから再利用するような HACK を行う必要があります。

```js
function handllerDroppedFile(e) {
  //単一ファイルの想定
  var file = e.dataTransfer.files[0];
  //dummy imgタグwww
  var img = document.createElement("img");
  var fileReader = new FileReader();
  fileReader.onload = function (e) {
    //一度、dummy imgのsrcにセットしてから
    //再利用します。
    //いきなりこうやるとsame origin error
    //material.map = new THREE.Texture(e.target.result);
    img.src = e.target.result;
    material.map = new THREE.Texture(img);
    material.map.needsUpdate = true;
  };
  //imageをdataURIで取得
  fileReader.readAsDataURL(file);
  //デフォルトのイベントキャンセルしないと
  //ブラウザでイメージが表示されてしまう
  cancelEvent(e);
}
```

これで、[RICOH THETA](https://theta360.com/ja/)で撮影した画像を Drag&Drop すると、three.js でいい感じに全球体処理してくれます。three.js すごい！

## 5. まとめ

three.js はやってて面白いですね。

HTML5 の fileAPI を使うことで、ブラウザ上でローカルファイルを扱うことが簡単になってきましたが、それを javascript で再利用する際は、いろいろ問題があることも分かりました。

いつになったら、Web はこういうハックとかバッドノウハウが無い世界になるのでしょうか・・・まだまだ苦難の時代は続きそうです。

### X. 参考資料

- Reading files in JavaScript using the File APIs
  [http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-selecting-files-dnd](http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-selecting-files-dnd)
- How to develop a HTML5 Image Uploader
  <span id="goog_1930387588"></span>[https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/](https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/)
- three.js change texture on material
  [http://stackoverflow.com/questions/13583103/three-js-change-texture-on-material](http://stackoverflow.com/questions/13583103/three-js-change-texture-on-material)
- Three.js Update Texture image
  [http://stackoverflow.com/questions/18436431/three-js-update-texture-image](http://stackoverflow.com/questions/18436431/three-js-update-texture-image)

**p.s**

同僚が[RICOH THETA](https://theta360.com/ja/)の競合製品を見つけて悶絶していました w
こちらはウェアラブルです。しかもサイトはしっかり HTML5 でした。もっと頑張れ RICOH

[http://bublcam.com/](http://bublcam.com/)

RICOH THETAで撮影した360°画像をthree.jsで全天球処理したついでにFileAPIのDrag&Drop対応してみた

このエントリは[HTML5 Advent Calendar 2013 ３日目](http://www.adventar.org/calendars/125)の記事です。

前後の記事はこちらです

← youhei.iwasaki8 [[iwahei の日記]geolocation api を使った位置情報取得](http://d.hatena.ne.jp/iwahei0813/20131202#1385943993)

→ あおいたん [[GCG 研究所]手元にあった HTML5 アプリを FxOS と Tizen で動かしてみるの巻](http://www.gcg.bz/labo_blog/?p=590)

「Internet of Things」と呼ばれる「モノがインターネットする」時代のコンテンツは、人が目にして理解できる程度では十分ではありません。すべてのモノが理解できるコンテンツ、その鍵は HTML5 が持つ「セマンティック」と「WAI-ARIA」での仕様の標準化だと思います。



### このエントリでお伝えしたいこと。

1.  たまに目にする「role=""」の意味を理解して欲しい。
2.  「aria-」で意味付けすることで、ちょっと得することがある。
3.  「セマンティック」は再利用してこそ意味がある。

エンタープライズにいるエンジニアとして、「なぜ HTML5 なのか？」「HTML5 になると何かいいのか？」という問いに対する答えを探し続けています。
まだ、答えは見つけられていませんが、ぼんやりと「セマンティック」の先にある何かではないかと感じています。今日は、そんな頭の中のもやもやを少し文書化してみました。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2013/ariaweb1.jpg)

## 私が思うセマンティックとは

今日まで数々の論者の方がセマンティックについて語って来ましたので、今更わたしのセマンティック論なんて聞きたくないと思いますが、あえて言わせていただきます。

**「HTML 文書に意味付けを行って、機械がその意味を理解して振る舞えるようにすること」**

セマンティックとは人が自己満足でやるものではなく、あくまで機械（デバイス）などで HTML 文書が再利用できて初めて価値があると思います。エンタープライスにて今後「HTML5」を導入する企業は多いと思いますが、一度この辺りを真剣に検討した方がいいと思います。

## アクセシビリティと WAI-ARIA

[WAI-ARIA(Accessible Rich Internet Applications)](http://www.w3.org/TR/wai-aria/)とは、
アクセシビリティ（どのような条件や環境下でも Web を利用できる）の問題を解決するために、W3C が仕様を策定しているもので、現在勧告候補となっています。

一般的にアクセシビリティとは、高齢者や障がい者向けへのブラウザ読み上げ機能を想像していただけると理解しやすいかと思います。

様々なデバイスが普及して Web に繋がるようになった今日、様々なデバイス（特にタッチスクリーン）・環境下（特に屋外）で Web を利用するケースが増えてきたこともあり、意外なシーンで Web のコンテンツを利用できないことを体験された方も多いかと思います。

そんな、通常の手段（人が目で見て手で操作する）で閲覧することができない場合、デバイス側への代替え手段の提示方法として、WAI-ARIA が存在しています。
これを人だけではなく、機械（デバイス）が利用してブラウジングできれば面白いですね。

また、WAI-ARIA が持つ一面として、[動的な振る舞いやコンテンツが持つ状態を仕様化](http://www.w3.org/TR/wai-aria/states_and_properties)があります。

HTML5 のセマンティックは文書の静的構造についての意味付けを行っており、現在の Web が持つ動的な振る舞いやコンテンツが持つ状態までは当然カバーしていません。

今後、本当の意味で「Internet of Things」になっていくためには、コンテンツが持つ振る舞いや状態まで標準化され、機械が理解できるようになる必要があると思うのは、当然な流れなのではないでしょうか。

## WAI-ARIA を使ってみる

では、WAI-ARIA を使ってみましょう。
試しに iOS の VoiceOver 機能を使って、Safari の画面を読み込ませてみました。

WAI-ARIA では、HTML のタグにカスタム属性「role」にて役割を、「aria-」にて振る舞いや状態を定義することができます。
（変なマークアップがあるかもしれませんが、雰囲気をつかめればいいのでご了承ください。）

なんからのポップアップのリンクがあったとします。
WAI-ARIA 対応されてないマークアップの場合は、VoiceOver はただのリンクと解釈しています。

```html
<a href="//www.google.com" target="_brank">google</a>
```

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2013/ariaweb2.png)

ところが、WAI-ARIA の「aria-haspopup」を使うことで、VoiceOver はポップアップリンクであることを認識しています。

```html
<a href="//www.google.com" target="_brank" aria-haspopup="true">google</a>
```

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2013/ariaweb3.png)

次は、状態の例です。

Ajax などによるコンテンツを動的に更新するケースは非常に多いと思います。
WAI-ARIA では次のように「aria-live」を使用することで、コンテンツの動的更新を通知することが可能です。

Javascript 側でタイマーを仕込んでコンテンツを動的更新させていきます。

```js
var p = document.getElementsByClassName('hoge')[0];
var count = 0;
setInterval(function(){
<span class="Apple-tab-span" style="white-space: pre;"> </span>p.innerText = count++;
}, 1000);
```

HTML のマークアップは次の通りです。

```
<p aria-live="polite" class="hoge"&gt;0&lt;/p&gt;
```

このようにすることで、VoiceOver はコンテンツが動的に変わった瞬間を検知して読み上げてくれます。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2013/ariaweb4.png)

必須入力も「aria-required」で知らせてくれます。

```html
<input aria-required="true" />
```

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2013/ariaweb5.png)

ほかにも WAI-AREA で定義されている属性は非常に沢山ありますので、詳しくは仕様書を読んでください。

- [Accessible Rich Internet Applications (WAI-ARIA) 1.0](http://www.w3.org/TR/wai-aria/)
- [WAI-ARIA（日本語訳）：日立のユニバーサルデザイン](http://www.hitachi.co.jp/universaldesign/wai-aria/)

## まとめ

このように、WAI-ARIA を意識したマークアップを行うことで、デバイス側が振る舞いや状態を理解した上で、我々に機能を提供できる可能性があることを感じました。

少しでもアクセシビリティを考慮した Web が増えることで、デバイス側でそれを二次利用できるケースが増えると思います。
また、今後 WAI-ARIA を使った華やかな事例が出て、一気にデファクトスタンダードになるかもしれません。

まだ、デバイス側の挙動が統一されていないとか、そもそも実装されてないなど問題は多くありそうですが、HTML5 が持つ「セマンティック」と WAI-AREA の「アクセシビリティ」の組み合わせで、我々が普段目にする華やかな HTML5 とは少し違う、目に見えにくいけど、Web との関わり方そのものを変える（かもしれない）可能性を感じてもらえたらなと思いました。

Tag: html5

Webセキュリティ・ハンズオン〜攻撃して学ぶ、HTML5のセキュリティ〜に参加してみた話

Web Components ハンズオンをやってみた

[SAPUI5/OpenUI5]スマートに国際化する方法

HTML5funで「エンタープライズでのHTML5」について最近思うことを話してきた

RICOH THETAで撮影した360°画像をthree.jsで全天球処理したついでにFileAPIのDrag&Drop対応してみた

HTML5のセマンティックとWAI-ARIAでWebの未来がおもしろい件

Tag: html5

Webセキュリティ・ハンズオン 〜攻撃して学ぶ、HTML5のセキュリティ〜に参加してみた話

Web Components ハンズオンをやってみた

[SAPUI5/OpenUI5]スマートに国際化する方法

HTML5funで「エンタープライズでのHTML5」について最近思うことを話してきた

RICOH THETAで撮影した360°画像をthree.jsで全天球処理したついでにFileAPIのDrag&Drop対応してみた

HTML5のセマンティックとWAI-ARIAでWebの未来がおもしろい件

Webセキュリティ・ハンズオン〜攻撃して学ぶ、HTML5のセキュリティ〜に参加してみた話