自作のhtml+javascript+jqueryがandroidタブレットのブラウザで動かなかった件

久しぶりですが自分の備忘の目的で足早に記す。

　現象

外部apiおよび自作Google Apps Script（ウェブアプリケーションとして導入）からjsonを取得するローカルなhtml+javascript+jqueryを作成し，PC（macbook air）の標準ウェブブラウザであるSafariで正常に動作することを確認。
しかし，これをandroidタブレット（ASUS MeMO Pad 7）に（ウェブメールの下書きへのメール添付の形で）転送してタブレットのブラウザで動作させようとしたらうまくいかなかった。タブレットにインストール済みのウェブブラウザアプリは，標準ブラウザ（地球のアイコン）・ドルフィンブラウザ（イルカのアイコン）・Google Chromeアプリの三つだが，いずれもダメ。

　発見

PCで動くがandroidタブレットでは動かないという現象についてググるといろいろ出てきて，初歩的なウェブブラウザアプリのjavascript許可については問題ないことは確認したが，その後ヒントが得られず。

ここでふと，androidがgoogleの支配下にあることおよびかつてPC上で本html+javascript+jqueryをGoogle Chromeで試してうまく動かなかったことを思い出し，「これは『PC vs androidタブレット』の問題ではなく『Safari vs Chrome』の問題ではないか」と気づいた次第。

　同一オリジンポリシー

あらためて，PCのGoogle Chromeでエラーコードを探ると「XMLHttpRequest cannot load 「外部apiのurl」. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.」と出た。どうやら，ローカルhtmlから外部apiにアクセスしようとすると，外部apiの方がセキュリティ上の危険を感じてアクセスを拒絶するということのようだった。これを「同一オリジンポリシー」と呼ぶらしい。

外部apiへのアクセスはjqueryの$.getJSONを使っていたが，ダメ元で$.ajaxやXMLHttpRequestといった低レベルのajaxでOriginなるものを外部apiにうまく伝えられないかとあがいたもののうまくいかず。考えてみれば，そんなに簡単にセキュリティ上の問題を乗り超えられるはずもなし。ググって見つかるヒントは呼ばれる方に手を入れるものばかりだが，それは無理な話。

　サーバーから呼べ

途方に暮れていたが，http://www.goma.pw/article/2015-03-14-2/ や http://popcosorn.com/blog/2015/02/3method_toavoid_sop.html で同じ悩みがあり，いろいろ書いてあるが結局，ローカルでなくサーバーからアクセスすればいいらしいとの結論に達した。そういえば，tok2なる無料レンタルサーバーを借りており，ここにphpを書いて外部apiをアクセスさせればうまくいくとわかったが，1年以上使わないうちに使えなくなってしまったようで断念。

あるいは，jquery.xdomainajax.jsなるスクリプトを取り込めばうまくいきそうだったが，CDNが見つからずに断念。CDNにこだわらなくても，ローカルにダウンロードすればいいのだが，タブレットに複数ファイルを渡すのがいかにも面倒だと思い。

結局，Google Apps Script（ウェブアプリケーションとして導入）で外部apiにアクセスする簡単なフィルタアプリを作って解決。Google Apps Script（ウェブアプリケーションとして導入）は当然ながらGoogle Chromeに拒絶されることもなく，androidタブレット上のウェブブラウザでもうまく動いておしまい（なぜかドルフィンブラウザではうまくいかなかったが「同一オリジンポリシー」ではないので今回は放置）。

それにしても，androidタブレットでhtmlファイルを開こうとしたとき，なぜGoogle Chromeが候補アプリに出てこないんだろうか？　標準ブラウザで立ち上げてurlをコピペすればいいだけだが。。。おしまい。