PhoneGapについて調べてみた

smartphone

はじめ方

※eclipseでのandroidアプリ環境構築

その他の手順は下記を参照

実機のデバック

http://www.techmaru.net/wordpress/20100418/x10aprtest/

ビルドサービス

PhoneGap:Buildサービス

https://build.phonegap.com/

ファイルをアップロードすることで、各端末用にアプリファイルを作成してくれるクラウドサービス
アップロードは下記形式から選択
　・zipファイル
　・htmlファイル
　・gitレポジトリ
apkファイルのインストール方法

上記ビルドサービスでダウンロードしたアンドロイドのアプリファイルをエミュレータで実行する方法

% ${Android SDK}/platform-tools/adb install ${アプリファイルパス}

開発流れ

環境構築
android、iphoneともに必要
基本web技術なので問題ないが、デバッグ時には環境が必要になる
開発
基本android、iphoneのとぢらかでの開発でよい
テスト
両方で確認
アプリ化であればクラウドサービスで対応可能
ストアに登録

所感

画面の開発について
画面はブラウザで表示しているだけなので既存のスキルを利用可能
しかし、現状悩まされているようなHTML,CSSでのデバイス差分、OS差分でまた悩まされることになる
よって、ViewはjQuery MobileやSencha Touchのようなライブラリに任せる方がよいと思われる
ハイブリットアプリケーションの使いどころについて
開発スキルやスピードから考えて、iPone,Androidの両方の端末でのアプリ開発は有利
しかし実装できる機能には限りがあるため、要件次第では実装不可能な場合が多い
webでできること、ハイブリットアプリでできること、ネイティブでできることを整理して見定める必要あり

　　

SVGについて

smartphone

SVGについて

Scalable Vector Graphics
XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。
ベクターグラフィックなので拡大・縮小しても画像が崩れないのが特徴

サポート

http://www.codedread.com/svg-support.php

上記サイトにあるが、IEの8以下以外はほぼサポート
iPhoneは2.1以降、Androidは3系以降

ツール

Mac用の作成ツール。他のファイル形式からSVGへの変換もできる
  • 圧縮ツール：scour
通常のSVGファイルには不要なデータも記載されているため、
このツールを用いて、不要データを圧縮できる

上記サイトからダウンロードし下記コマンドで実行可能

% python scour.py -i input.svg -o output.svg


SVGの圧縮形式である.svgzへ変換もしてくれる
outputの指定を.svgzにすることで自動変換

% python scour.py -i input.svg -o output.svgz
    • 圧縮結果

svg→svgzへの圧縮で30%の圧縮効果
圧縮前：svg 18k
圧縮後：svgz 13k

IEのみCSS,HTML,Javascriptを適用させる

意味

条件に合致する場合はコメントとして扱わない
注意点：IE以外のブラウザはこの記述をコメントとして認識する

記述方法

  • 未満
<!--[if lt IE 7 ]>[適用要素]<![endif]-->
  • 以上
<!--[if gte IE 7 ]>[適用要素]<![endif]-->
  • 以下
<!--[if lte IE 7 ]>[適用要素]<![endif]-->
  • のみ
<!--[if IE 7 ]>[適用要素]<![endif]-->
  • AまたはB
<!--[if  IE 7 | IE 6 ]>[適用要素]<![endif]-->

パターン

<!doctype html> 
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]--> 
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]--> 
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]--> 
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]--> 
<head>

CSS Media Queriesについてまとめてみた

css

Media Queriesとは

画面サイズに応じて、適用させるスタイルを限定させることのできる記述方法

基本記述方法

CSS内での記述方法
ZZZpx以上、XXXpx以下

@media only [対応メディア] and (max-width: XXXpx) and (min-width: ZZZpx) {
   Style:Style;
}

HTMLの読み込みソースでの指方法

<link rel="stylesheet" type="text/css" href="style.css" media="only [対応メディア] and (max-width: XXXpx) and (min-width: ZZZpx)">

メディアごとのサイズ

※実際の指定は20pxずつプラスする。これはWebkit系のバグで垂直のスクロールバー(20px)がウィンドウサイズに含まれない為
詳しくは下記を参照
http://all-web-blog.blogspot.com/2011/04/media-queries-15px.html

/* Under 960px */
@media only screen and (max-width: 980px) and (min-width: 821px) {

}

/* Under 800px */
@media only screen and (max-width: 820px) and (min-width: 621px) {

}

/* Under 600px */
@media only screen and (max-width: 620px) and (min-width: 501px) {

}

/* Under 480px */
@media only screen and (max-width: 500px) and (min-width: 341px) {

}

/* Under 320px */
@media only screen and (max-width: 340px) and (min-width: 5px)  {

}

各社webサイトのマルチディバイス対応を検証

はじめに

http://www.doya-doya.com/inspiration/2011/06/02/6787

上記サイトを参考に各社webサイトのマルチディバイス対応について調べてみた

株式会社クライマークス

http://www.climarks.com/

ディバイス対応
※メディアクエリで950px以下の場合にサイドメニューをページ上部に配置してタブレットに最適化する
判定方法
・タブレット判定は画面サイズ(950px以下)
URL

PCとスマートフォンは別URL

ソース
・スマートフォンがXHTMLなのは謎。。。

日本コカ・コーラ

http://www.cocacola.co.jp/

ディバイス対応
判定方法
URL

PCとスマートフォンが同じ

ソース

HTML5

・スマートフォンで不用な要素はStyleでdisplay:none
・画像などのディバイス依存のコンテンツはJSで動的に取得

まとめ

ほかのサイト等も確認しての結果

  • 判定：
スマートフォンはUA判定、タブレットは画面サイズ判定
  • フォント：
PCのフォントは12px、スマートフォンのフォントは7~8px程度
  • URL：
URLはPCとスマートフォンで別で用意し、フロントやサーバ側でUA判定でリダイレクト
  • Responsive Design
参考サイトで実現できているサイトはなし(クライ・マークスとコカ・コーラがほしい)

apple-touch-iconについて

iPhone

apple-touch-iconとは

Webサイトがブックマークされ、ホーム画面に置かれた場合の画像。

基本情報

  • iPhone(3Sまで)は57px / 57px
  • iPhone4(Retina)は114px / 114px
  • iPadは72px / 72px
  • 画像はPNG

設定

<link rel="apple-touch-icon" href="apple-touch-icon.png">
  • iPhone(3Sまで)の設定。画像は角丸等自動加工される
<link rel="apple-touch-icon" href="apple-touch-icon-precomposed.png">
  • 自動加工されず利用される。ただしiOS2.0以前では無視されるので、通常の設定も記述しておくこと
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png" />

<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png" />


Progressive Enhancementについて考える

web Design

Graceful DegradationからProgressive Enhancementへ

Graceful Degradationとは要は、クロスブラウザというコンセプト。
どのようなブラウザであっても同じ様に見せるという考えて方で日本では今まで主流だった。
このような考え方では、どうしても下層の仕様(IE6とか)にデザイン等をあわせる必要がある。

しかし、webのような進化の早い分野で、新旧入り乱れる業界ではいつまでたっても最新の技術をユーザに提供できなくなる
そこで登場したのが、Progressive Enhancementというコンセプト

Progressive Enhancementとは

「情報やサービスへのアクセシビリティを確保しつつ、ブラウザやデバイスの特徴を活かしたデザインや技術を実装する」という考え方。
つまり、html5,CSS3など先行して実装させれた新機能を利用できる端末にはその機能を存分に駆使したUIを提供し、IE6など古いブラウザに対してはそのブラウザでの最大限のUIのみを提供する

Progressive Enhancementメリット

  • 新技術が実装されるにはユーザにとってプラスなメリットがある。

その技術を最大限提供することには、それだけで意味がある

  • 新技術を利用することでweb業界に対して普及の手助けになる。

例&参考文献

日本語解説
http://www.adobe.com/jp/newsletters/edge/february2009/articles/article4/index.html

詳しい解説サイト(英語)
http://www.alistapart.com/articles/progressiveenhancementwithcss/

実装方法 --> modernizr.js

実装するための方法はいくつかあると思うが、今回はmodernizr.jsを試す

公式サイト
http://www.modernizr.com/

手順1 読み込む

<script type="text/javascript" src="modernizr.js"></script>

読み込むとhtmlタグにそのブラウザが利用可能なhtml5のタグやCSS3のプロパティをclassとして書きだしてくれる
google chromeの場合

<html lang="en" class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms no-csstransforms3d csstransitions fontface video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths"></html>

手順2 対応可否に対応してスタイルを記述

Progressive Enhancementを実現するために、modernizr.jsは2つの方法で実装を知らせてくれる

  • htmlタグのクラス

上記例のようにhtmlのクラスとして利用可能なプロパティ等を書きだしてくれる
それをセレクタに記述して、CSSを指定すれば、実装可能

/* デフォルトのスタイル */  
#box{  
    width:220px;  
    height:100px;  
    padding:10px;  
    background-color:#eee;  
    border-right:2px solid #ccc;  
    border-bottom:2px solid #999;  
}
/* boxshadowが使える場合のスタイル */  
.boxshadow #box{  
    border:none;  
    -moz-box-shadow:#666 1px 1px 3px;  
    -webkit-box-shadow:#666 1px 1px 3px;  
    box-shadow:#666 1px 1px 3px;  
}

javascriptからでも利用可否を取得できる。

  if (Modernizr.boxshadow){
    // boxshadowが利用可能な場合
  }else{
    // 利用不可能な場合
  }