この 講 座 で 学 ぶこと Webサイト 制 作 に 関 わるスマートフォ ン/タブレットの 仕 様 2

スマートフォンサイト 制 作 基 礎 02. スマートフォン/タブレットの 仕 様

この 講 座 で 学 ぶこと Webサイト 制 作 に 関 わるスマートフォ ン/タブレットの 仕 様 2

Web 制 作 に 関 わる 仕 様 スマートフォン/タブレット ブ 向 けWeb サイト 制 作 をする 際 に 知 っておくべき 仕 様 など OS 画 面 サイズ/ 解 像 度 ブラウザ 使 用 言 語 開 発 環 境 3

OSについて 4

スマートフォンのOS 2013 年 9 月 末 のスマートフォン 契 約 数 は 63.0%でiPhoneが35.6%となり Android 機 とiPhoneで 約 99%を 占 める ios(iphone) Android(Xperiaシリーズ Aquos Phone シリ ズ G l Sシリ ズ など) シリーズ Galaxy Sシリーズ など) 出 典 :( 株 )MM 総 研 [ 東 京 港 ] 5

タブレットのOS 2013 年 上 期 のタブレットのOS 別 出 荷 割 合 はAndroidとiOSで と で 約 90%を 占 める ios(ipad) Android(Xperiaシリーズ Nexus シリーズ Galaxy Tabシリーズ など) 出 典 :( 株 )MM 総 研 [ 東 京 港 ] 6

OSについてのまとめ スマートフォンとタブレットのOSはとブ もにAndroidとiOSが と が 主 流 なので 基 本 的 にはこれら2つのOSに 対 応 するよ うに 制 作 する その 他 の 主 なOS Windows Phone BlackBerry 7

画 サイズ/ 解 像 度 について 8

画 サイズと 解 像 度 主 なiPhone/iPad/iPod touchの 画 面 サイズと 解 像 度 機 種 名 画 サイズ 解 像 度 iphone5 4インチ 1136 640 iphone4s 3.5インチ 960 640 iphone3g 3.5インチ 480 320 ipad mini 7.9インチ 1024 768 ipad Retina 9.7インチ 2048 1536 ipod touch 35インチ 3.5インチ 960 640 9

画 サイズと 解 像 度 主 なAndroid 機 の 画 面 サイズと 解 像 度 機 種 名 画 サイズ 解 像 度 Galaxy S Ⅱ 4.27インチ 800 480 Galaxy Nexus 4.65インチ 1280 720 AQUOS PHONE 4.9インチ 1280 720 Galaxy Tab 7インチ 1024 600 Xperia Z1 5インチ 1920 1080 10

デバイスピクセルとCSSピクセル 主 なiPhone/iPad/iPod touchのデバ イスピクセル( 解 像 度 )などの 仕 様 機 種 名 デバイスピクセル ( 解 像 度 ) CSSピクセル iphone5 1136 640 568 320 2 iphone4s 960 640 480 320 2 iphone3g 480 320 480 320 1 ipad mini 1024 768 1024 768 1 ipad Retina 2048 1536 1024 768 2 ipod touch 960 640 480 320 2 デバイス ピクセル 比 11

デバイスピクセルとCSSピクセル 主 なAndroid 機 のデバイスピクセル( 解 像 度 )などの 仕 様 機 種 名 デバイスピクセル ( 解 像 度 ) CSSピクセル Galaxy S Ⅱ 800 480 533 320 1.5 Galaxy Nexus 1280 720 640 360 2 AQUOS PHONE 1280 720 640 360 2 Galaxy Tab 1024 600 1024 600 1 Xperia Z1 1920 1080 640 360 3 デバイス ピクセル 比 12

デバイスピクセル 比 デバイスピクセル デ ピ 比 とは デバイス ピクセルとCSSピクセルの ク 比 率 デバイスピクセル モニタのピクセル 数 値 が 高 いほうがより 精 細 な 表 示 ができる CSSピクセル ブラウザのピクセル HTML/CSSで 使 用 する 最 近 の 機 種 では デバイスピクセルとCSSピクセルが 異 なるもの (デバイスピクセル 比 が2や3のもの)が 多 い 13

デバイスピクセル 比 デバイスピクセル デ ピ 比 の 違 いへの 対 応 例 どちらもブラウザ 上 のサイズは 同 じ (320 240) (index.html) device pixel ratio 2 の 機 種 は 大 きなサイズの 画 像 を 読 み 込 む device pixel ratio 1 の 機 種 は 小 さなサイズの 画 像 を 読 み 込 む 例 )デバイスピクセル 比 が2の 機 種 では HTML/CSS で 指 定 した 320 240 の 範 囲 に 対 して 640 480 のピクセルの 画 像 を 使 用 すること で 最 適 化 をする(より 精 細 できれいになる) 14

デバイスピクセル 比 最 適 化 をしている 場 合 と 最 適 化 をして いない 場 合 とでは た 目 に 大 きな 差 が 出 る どちらもデバイスピクセル 比 が2の 機 種 で 表 示 (difference.html) difference01.png difference02.png 15

画 サイズと 解 像 度 のまとめ スマートフォンとタブレットの ブ 画 面 サ イズと 解 像 度 には 機 種 ごとに 大 きな 違 いがあり デバイスピクセル 比 にも 違 いがある すべてのスマートフォン/タブレット に 最 適 化 することは 難 しいが それぞ れのデバイスピクセル 比 においてでき るだけ 最 適 化 されるように 作 成 する 16

ブラウザについて 17

ブラウザ スマートフォンのブラウザシェア( ブ 国 内 )はSafariとAndroid 標 準 ブラウザの 2つで 大 半 を 占 める ブラウザ 主 なスマートフォンブラウザのシェア 比 率 ( 国 内 ) シェア ブラウザ(Android 標 準 ) 49.27% Safari(Mobile Safari) 37.07% Chrome 4.91% 出 典 :2014/1/9 株 式 会 社 サムライファクトリー タブレットも 似 たようなシェア 比 率 18

主 要 ブラウザの 主 な 特 徴 制 作 時 には 以 下 の 赤 枠 の 点 に 注 意 する 項 目 Mobile Safari Android 標 準 ブラウザ Flash Player 非 対 応 標 準 搭 載 /プラグイン 対 応 字 コードの 変 更 不 可 可 ファイルアップロード /ダウンロード 不 可 アップロード 不 可 画 像 サイズ(1ファイル 3メガピクセル 以 下 端 末 依 存 あたり) 対 応 画 像 形 式 JPG/GIF/PNG/TIFF/SVG JPG/GIF/PNG/TIFF /SVG フォント ヒラギノ 角 ゴW3/W6 端 末 依 存 (デフォルト 設 定 はゴシック 体 ) SVGはAndroid 3 より 対 応 SVGを 使 用 する 場 合 はターゲットOSにAndroid2.x 系 が 含 まれるかを 確 認 し 必 要 であればブラウザ 対 応 をする 必 要 がある 19

Viewportとは Viewport ブラウザが 持 っている 仮 想 の 表 示 エリア 多 くのスマートフォンでは Viewport のデフォ ルト 値 が 幅 980px 程 度 となっているため 幅 980pxのPCサイトをスマートフォンで 表 示 す るとページ 全 体 が 縮 小 されてスマートフォンの 画 面 上 に 表 示 される つまりデフォルト 値 (980pxなど)では にく いため スマートフォン 向 けサイトでは 値 を 変 更 する 必 要 がある 20

Viewportの 設 定 <meta>タグで グ 設 定 する 初 期 表 示 倍 率 (CSSピクセルに 対 して) デバイスの CSSピクセル 幅 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1 > 最 大 表 示 倍 率 (CSSピクセルに 対 して) 21

ブラウザのまとめ スマートフォンとタブレットの 国 内 ブラウザ シェアは Mobile SafariとAndroid 標 準 ブラ ウザが 大 半 を 占 める ブラウザの 種 類 やOSのバージョンによっては Flashコンテンツやファイルのアップロード/ ダウンロード 機 能 が 使 えないことに 留 意 して サイトを 制 作 する スマートフォン 向 けサイトでは Viewport の 設 定 をする 22

使 用 言 語 について 23

クライアントサイドの 言 語 以 下 の 言 語 が 多 く 使 われている HTML5(XHTMLも 可 ) CSS3(CSS2.1も 可 ) Javascript (jqueryなど 含 む) 文 字 コードは utf-8 24

サーバサイドの 言 語 サーバサイドの 言 語 についてはPC 向 け サイトと 同 じものが 使 用 可 能 サーバ 側 で 処 理 されるため 端 末 側 の 仕 様 に 依 存 しない 25

使 用 言 語 のまとめ スマートフォンとタブレット ブ 向 けのサ イトにおいては 基 本 的 に [HTML5 + CSS3 + JavaScript ] で 制 作 する 文 字 コードはUTF-8とする サーバサイドの 言 語 は 端 末 に 依 存 しな いため 特 に 気 にする 必 要 は 無 い 26

開 発 環 境 について 27

開 発 環 境 コーディング デ グ環 境 Dreamweaver や Eclipse など シミュレータ/エミュレータ iosシミュレータ レ タ Macのみ Android エミュレータ Android SDK や AndroVM など PC 版 Chrome Webアプリ 開 発 やスマホアプリ 開 発 で 良 く 使 われる シンプルなサイトであれば 十 分 対 応 できる 28

開 発 環 境 テスト 環 境 Webサーバ バ XAMPPなど 実 機 ターゲットブラウザ/OSを 使 ってWebサーバ にアクセスして 動 作 検 証 をする にアクセスして 動 作 検 証 をする テストで 使 用 するOSの 例 ) ios 4 / 5 / 6 / 7 Android 2.3 / 3.x / 4.x 29

開 発 環 境 のまとめ コーディングはテキストエディタやデ グ デ Eclipseなどの 統 合 開 発 環 境 を 利 用 可 能 ローカル 環 境 でのテスト 時 には Chrome を 利 用 可 能 実 機 テストにおいては ( 制 作 前 の 仕 様 書 等 で) 決 められたターゲットブラ ウザ/OSでWebサーバにアクセスして 動 作 検 証 する 30