Html5minute #5

なれる！FE
HTML5minutes！〜triton-js〜
© IMJ Corporation. All Rights Reserved.
IMJ Corporation. Misaki Shibata
2014.11.25

エンジニア
柴田美咲Misaki Shibata

これは好きな本の一つ「なれる！SE」
IT業界を題材としたライトノベルです。

こんな事やってます。
・スマホアプリ開発（主にAndroid、時々iOS)
・サーバーサイドプログラム（Java、PHP）
・サーバー／インフラ
etc…
最近になって、フロントエンドに携わるようになっ
てきました。
まだまだ勉強中です。

今回は、スマホ関連の話をしたいと思います。

WebViewベースのアプリ開発をやっています
か？

WebViewベースのアプリはハイブリットアプリと
呼ばれています。
JSを通しアプリを連携させ、相互にプログラムを
実行させることが可能です。

Androidの実現方法としては
・addJavascriptInterface方式
・カスタムURLスキーム方式
・JsAlert方式
・ローカルHTTPサーバ方式
などが既に用意されており、容易に実現するこ
とができます。

しかし、セキュリティの問題やiOSでも使えること
などを考慮すると、
必然的に“カスタムURLスキーム方式”を選択
することになるかと思います。
JSからの実行例
// ネイティブ側に通知させる処理
locathon.href = 'apicall://' + action;

WebViewについて、最近トピックスを紹介しま
す。

Android4.4 からWebViewが
Chromium ベースのものに変わりました。
https://developer.chrome.com/multidevic
e/webview/overview

iOS8から「Nitro JavaScript」が使えるようにな
りました。
http://gori.me/ios/ios8/53263

WebViewの表示速度改善に関する内容です
が、このあたりから、他のコンポーネントより、注
目されていることが伺えます。

せっかくなので、このWebViewをどんどん使っ
てハイブリッドアプリを作っていきましょう！

最近のAndroid事情

機種名Nexus 6 iPhone 6 Plus
OS Android 5.0 Lollipop iOS 8
ディスプ
レイ
5.96インチ（1440×2560、
493ppi）
5.5インチ（1080×1920、
401ppi）
CPU
Qualcomm Snapdragon 805
（2.7GHzクアッドコア）
Apple A8
（1.4GHzデュアルコア）
GPU Adreno 420 PowerVR GX6650
RAM 3Gバイト1Gバイト
ストレー
ジ
32／64Gバイト16／64／128Gバイト
サイズ159.26×82.98×10.06ミリ158.1×77.8×7.1ミリ
重さ184グラム172グラム
左からNexus 6、iPhone6 Plus、
Galaxy Note Edge
この解像度は
27型液晶ディスプ
レーに相当します。

Android developers blog
「Getting Your Apps Ready for Nexus 6 and Nexus
9」
アプリをNexus 6 とNexus 9 に備えましょう
という記事がありました。
http://android-developers.
blogspot.jp/2014/10/getting-your-apps-
ready-for-nexus-6-and.html

要約すると、
WQHD （1440×2560 px）ディスプレイ向けの
アプリを作る場合は、従来のxxhdpi（Full-HD）
向けの画像ではなくxxxhdpi （4K）向けの画像
を使うことを推奨します。
という内容でした。

これはアプリに限ったことだけではなくて、Web
でも、端末の性能を100％引き出すのであれば、
同じようなことが言えます

現行機種のAndroidのブラウザサイズは、ほぼ
360×640pxになっています。
しかし、実際には360×640pxで扱えるように
なっているのに過ぎません。

ブラウザサイズの求め方
ブラウザpx = デバイスpx / デバイス・ピクセル比
(css pixel) (device pixel) （device pixel
ratio）
XperiaZ, GalaxyS4 (1080 × 1920)
幅： 360 px = 1080px / 3
高さ： 640 px = 1920px / 3
Galaxy Note Edge (1440 × 2560)
幅：360 px = 1440px / 4
高さ： 640 px = 2560px / 4

メディアクエリーから、このdevicePixelRatioを
使ってメインビジュアルの出しわけをしてみては
いかがでしょうか？
@media screen and (-webkit-min-device-pixel-ratio: 4){
/* 高解像度向けのスタイル*/
background-image: url('main-image.png');
}

最後に告知です。

株式会社アイ・エム・ジェイは、チームラボ社・LIG社との3社合同採用イベン
ト「CREATORE‘S KITCHEN presented by Lab×LIG×IMJ」を12/7（日）
に開催いたします。

Facebook
https://www.facebook.com/events/15032765132
56305/
Wantedly
https://www.wantedly.com/projects/12508

ご清聴ありがとうございました。

Html5minute #5

More Related Content

Viewers also liked

Similar to Html5minute #5

Html5minute #5

Editor's Notes