CloudFlareでのSSL/TLS対応で学んだこと

自作サービスのアセット配信にCloudFlareを利用しているnaosk8です。

 

GeoLocationAPIも利用していたりで、

HTTPS化しないと位置情報の取得はゆるしませんよ」的な

お上からのお達しが近づいている気配も覚え、

このたび、SSL対応しました。

 

ということで、関連しての学びをメモ。

アプリケーションレイヤーから徐々に広がっていく感じが楽しい。

 

さて、本題。

 

SSLってなにさ?

* Secure Sockets Layer の略。

* 要するに、第三者によるデータ改ざん防止などを目的に、安全な通信方式でサーバアクセスを実現しようというもの。

* 公開鍵で、クライアント側の情報を暗号化 -> 秘密鍵で、サーバ側で複合化。

* 対応状況は、URLが"https://"で始まっていればOK。

CSS, JSなどに関するhttp://アクセスが表示ページ中に混ざっていると成立しない)

* SEOの面でも、有利らしい。

 

⬇ここによくまとまってる。

www.geotrust.co.jp

 

TLSってなにさ?

* Transport Layer Security の略。

* SSLの発展系。RFCでも定義されているもの。

* ただ、世の中的にSSLが浸透しているので、総称するときにはSSLと呼ばれがち。

⬇参照

www.symantec.com

 

■  CloudFlareでの設定方法

自分はとりあえず、体験してみたかった程度なので

Secure度は△なものの、Flexible SSLにしてみました。

 

⬇この記事が新しいし、読みやすかった。

WordPressじゃないのでそこを差し引く。

kodak-ism.com

 

■ やってみてわかったこと

* https://なコンテンツにhttp://なコンテンツが混ざっているのはNG。

  でも、その逆は大丈夫。

* 管理状態によっては、

  Access-Control-Allow-Originあたりの調整をいれる必要が生まれる。

qiita.com

* HTTP Strict Transport Securtyを設定するだけで

  "2回目以降"のアクセスについては、httpsアクセスを強要できる。

  preload:onで、最初のアクセスについても適用できるかと思ったものの

  適用されなかったです。

  何かやり方に問題があったのか、そういうものなのか。

 

boombox.js のAndroid端末でのループ再生のずれ対策

最近、備忘も兼ねて小ネタを投稿中のnaosk8です。

 

スマホで音声の取り扱いをしている人であれば

もしかしたら知っているかもしれない boombox.js

 

ライブラリのサイズも小さく、

ブラウザの各音声ファイル形式への対応を見て

適切なファイル形式の音声ファイルのみを読み込んだり、

AudioSpriteとして音声の取り扱いを出来たりと優秀なのです。

 

が、しかし、Android端末でのループ再生で、以下の問題が。

■ 前提

* Android端末

* AudioSprite利用

* ループ再生の実行

 

事象

ループ再生の実行時に

 - 想定のstart, endのタイミングでSprite化した音声が再生されない(はみだす)

 - 徐々にループがずれたり、ループタイミングがずれる。

 

■ 解決方法

ループ方式を、LOOP_NATIVEでなく、LOOP_ORIGINALにすると

内部的に呼ばれているonEndedイベントさんが働いてくれる為か、問題が解消されます。

 

boombox.get('sound').setLoop(boombox.LOOP_ORIGINAL);

 

是非、おためしあれ。

Android端末で位置情報(GeoLocationAPI)の取得失敗から抜け出せなくなったら、ひとまず、端末再起動。

位置情報を利用した

スマートフォン向けのWebサービスをつくっているnaosk8です。

 

最近、Android端末(Freetel Miyabi)を購入しました。

 

 

会社で沢山のAndroid端末を触っている自分からして

極上の品質だと言わざるを得ない優秀な端末です。

価格面からもコスパは最高過ぎます

 

そんな端末で実機検証が捗っているのですが

なかなか位置情報の取得失敗率が高く、悲しくなっています。

 

Androidデバイス自体(この端末に限らず)に難があり

再現性は不明ですが、

とあるタイミングからGeoLocationAPIの途中でハングしたり

位置情報の失敗から抜け出せなくなったりします。

 

抜け出す方法は今のところただ一つ。

 

 

 

端末の再起動。

 

 

 

ぐぐっても、割と端末の再起動を復旧方法に記載している記事も多いので、

きっとそうなのだと思います。悲しい。

 

再起動以外のオシャレな、っていうか、

フツーの、解決方法が分かったら記事を書きます。

 

FacebookのUncaughtSecurityErrorへの対応(stackoverflowより)

事象

FacebookAPIを使用しているWebページにて

いつの間にか、こんな感じのエラーが表示されるように。

Uncaught SecurityError: Blocked a frame with origin "http://static.ak.facebook.com" from accessing a frame with origin "http://localhost:8080". Protocols, domains, and ports must match. VM2813:1
Uncaught SecurityError: Blocked a frame with origin "https://s-static.ak.facebook.com" from accessing a frame with origin "http://localhost:8080".  The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match.
 VM2817:1
Uncaught SecurityError: Blocked a frame with origin "http://static.ak.facebook.com" from accessing a frame with origin "http://localhost:8080". Protocols, domains, and ports must match. 

 

 

■ 答え

この限りでは無い気がしつつ、

自分の場合は、このスレッドの通り、

デバッグ用に入れていたchrome拡張機能「Ripple」の

有効化をオフにしたら解消しました。

stackoverflow.com

 

たまにこういう地味発見の和訳も投稿しようかな。

 

PhoneGapのスプラッシュ画像(デバイスx解像度別)をスクリプトで一括書き出し

掲題の通りの作業メモ。

 

■ 前提

* スプラッシュ画像は、中央にロゴがあり、周囲は好きに切り出して構わないようなデザインを前提。(※LINEなどと同様のスタイル。)

 * 縦持ち固定のアプリ。(横持ちアプリにも合わせて作るなら、単純に正方形の画像から切り出せば良いだけではある)

 

■ 基本的な考え方

* 切り出し元画像として、縦横比が最も正方形に近いサイズでスプラッシュを作成。(1536x2008がちょうど良さげ)

* その画像を元に、切り出したい各サイズのアスペクト比に合わせ、

中央寄せで、横幅を任意の長さに切り取って書き出す。(※A)

* アスペクト比が変換された画像を、任意のサイズに縮小する。(※B)

* ※Aと※Bの操作は、imagemagickのconvertコマンドに複数オプションを指定することで1コマンドで実行できる。

 

■ コマンド 

基本はこれ。

-unsharp部分のオプションは参照もとのコピペですが、このままで気にならないくらい綺麗に書き出せます。

ちなみに -verboseは、実行ログの標準出力への吐き出し用オプション。

 

convert -gravity center -crop {横幅2008pxに見立てたときの幅}x2008+0+0 -resize {出力時の横幅}x{出力時の高さ} -unsharp 2x1.4+0.5+0 -quality 100 -verbose {任意の変換元画像のパス = 1536x2008} out.png

 

■ 必要サイズ

iOS, Androidのみを対象

f:id:naosk8:20160228160739p:plain

 

■ 使用コマンド

PhoneGapのルートディレクトリに移動して、

 

convert -gravity center -crop 1255x2008+0+0 -resize 200x320 -unsharp 2x1.4+0.5+0 -quality 100 -verbose {任意の変換元画像のパス = 1536x2008} ./www/res/screen/android/screen-ldpi-portrait.png
convert -gravity center -crop 1340x2008+0+0 -resize 320x480 -unsharp 2x1.4+0.5+0 -quality 100 -verbose {任意の変換元画像のパス = 1536x2008} ./www/res/screen/android/screen-mdpi-portrait.png
convert -gravity center -crop 1130x2008+0+0 -resize 720x1280 -unsharp 2x1.4+0.5+0 -quality 100 -verbose {任意の変換元画像のパス = 1536x2008} ./www/res/screen/android/screen-hdpi-portrait.png
convert -gravity center -crop 1130x2008+0+0 -resize 480x800 -unsharp 2x1.4+0.5+0 -quality 100 -verbose {任意の変換元画像のパス = 1536x2008} ./www/res/screen/android/screen-xhdpi-portrait.png
convert -gravity center -crop 1536x2008+0+0 -resize 1536x2008 -unsharp 2x1.4+0.5+0 -quality 100 -verbose {任意の変換元画像のパス = 1536x2008} ./www/res/screen/ios/screen-ipad-portrait-2x.png
convert -gravity center -crop 1536x2008+0+0 -resize 768x1004 -unsharp 2x1.4+0.5+0 -quality 100 -verbose {任意の変換元画像のパス = 1536x2008} ./www/res/screen/ios/screen-ipad-portrait.png
convert -gravity center -crop 1340x2008+0+0 -resize 640x960 -unsharp 2x1.4+0.5+0 -quality 100 -verbose {任意の変換元画像のパス = 1536x2008} ./www/res/screen/ios/screen-iphone-portrait-2x.png
convert -gravity center -crop 1130x2008+0+0 -resize 640x1136 -unsharp 2x1.4+0.5+0 -quality 100 -verbose {任意の変換元画像のパス = 1536x2008} ./www/res/screen/ios/screen-iphone-portrait-568h-2x.png
convert -gravity center -crop 1340x2008+0+0 -resize 320x480 -unsharp 2x1.4+0.5+0 -quality 100 -verbose {任意の変換元画像のパス = 1536x2008} ./www/res/screen/ios/screen-iphone-portrait.png

 

以上、何かの足しになれば何よりです。

 

PhoneGapのアイコン画像(デバイスx解像度別)をスクリプトで一括書き出し

久々に書きます。

趣味開発しているものがHTML5のMobileWebSiteなのですが、

流布させる為にハイブリッドアプリとしての実装を行なってます。(いまさら)

 

※ PhoneGap -> Cordova -> PhoneGapと、

 名前が転々としていることも最近になって知りました。

 

そんなPhoneGapでは

iOS, Androidでアイコンを解像度に応じて自由に設定できますが、

なんとも複数サイズの画像の書き出しって面倒。さしみたんぽぽ。

 

なので、ImageMagickを用いての一気書き出し用のコマンドを貼っておきます。

※同じサイズで名前が違うだけなのに、それぞれ変換かけてるジャーーン的なところも

ありますが、なんせ、開発環境で1発叩くだけのコマンドなのでそこはご愛嬌。

 

必要サイズ : 36, 48, 57, 72, 96, 114, 128, 144

 

cd {phonegap prjのルートディレクトリ}

convert -resize 36x -unsharp 2x1.4+0.5+0 -quality 100 -verbose {任意の変換元画像のパス} ./www/res/icon/android/icon-36-ldpi.png
convert -resize 48x -unsharp 2x1.4+0.5+0 -quality 100 -verbose {任意の変換元画像のパス} ./www/res/icon/android/icon-48-mdpi.png
convert -resize 72x -unsharp 2x1.4+0.5+0 -quality 100 -verbose {任意の変換元画像のパス} ./www/res/icon/android/icon-72-hdpi.png
convert -resize 96x -unsharp 2x1.4+0.5+0 -quality 100 -verbose {任意の変換元画像のパス} ./www/res/icon/android/icon-96-xhdpi.png
convert -resize 57x -unsharp 2x1.4+0.5+0 -quality 100 -verbose {任意の変換元画像のパス} ./www/res/icon/ios/icon-57.png
convert -resize 72x -unsharp 2x1.4+0.5+0 -quality 100 -verbose {任意の変換元画像のパス} ./www/res/icon/ios/icon-72.png
convert -resize 114x -unsharp 2x1.4+0.5+0 -quality 100 -verbose {任意の変換元画像のパス} ./www/res/icon/ios/icon-57-2x.png
convert -resize 144x -unsharp 2x1.4+0.5+0 -quality 100 -verbose {任意の変換元画像のパス} ./www/res/icon/ios/icon-72-2x.png
convert -resize 128x -unsharp 2x1.4+0.5+0 -quality 100 -verbose {任意の変換元画像のパス} ./www/res/icon/webos/icon-64.png
convert -resize 128x -unsharp 2x1.4+0.5+0 -quality 100 -verbose {任意の変換元画像のパス} ./www/icon.png

※ 変換もとの画像は、144px x 144pxよりも大きいサイズにしてくださいね。

 

最終的にはビルド前のbatchコマンドとして登録すると幸せなんだろうなと思いつつ。

 

ちなみに、PhoneGap Build / Monacaあたりが、共にPhoneGapベースの

ハイブリッドアプリ開発支援ツールとしてメジャーぽいのですが、

Monacaは好きな開発環境でつくるには有償サービス使わないとで、

PhoneGap Buildも登録可能アプリ数に制限があったりだったので

PhoneGap Developerみたいなツールだけお借りして

単純にPhoneGapでローカルで実装しています。

多分、これが一番しがらみ無くて幸せ。

 

今回はここまで。

 

javascriptライブラリを使用する際のライセンス表記サンプル

こちらで紹介されている、jqueryでの表記例が参考になる。

たしかに有名なライブラリの該当箇所の書き方をまねるのが良さそう。

bower使っていて、依存関係として入ってくるものも

書かないといけないのかと思いつつ、めっちゃ長くなるのでどうしたものかと。

[GPL][MIT]ライセンスについて基本中の基本的なこと | tomotomo Snippet

 

権利を認めてもらいつつ、ルールに則って適切に流布させるために、

ライセンス列挙自体がかなりめんどくさい事をどうにかできないものか。

みんな徹底していない気がすごくしている。

 

ちなみに、grunt でuglifyとかしてますが、

これを機にlicenseコメントだけを列挙したjsを別で作成して、

最後にconcatするように処理を変えました。