スマートフォン対応

スマートフォン

 状態:-  閲覧数:4,840  投稿日:2011-09-14  更新日:2013-02-06
スマートフォン対応とは?
1 PC・携帯サイトをスマートフォン用に最適化したWebサイト
2 スマートフォン専用サイト
3 スマートフォンアプリ
・Webアプリ … JHTML5/CSS/JavaScriptを用いて開発する方法。イメージ例:市販車
・ネイティブアプリ … JavaやC/C++などのプログラミング言語とSDKを用いてネイティブアプリケーションとして開発する方法。イメージ例:F1

画面解像度による違い
・スマートフォン … ~480
・ネットブック … 480~1024
・PC … 760~

テンプレートによる違い
1 テンプレ数2 … 「PCメイン+スマートフォン対応」「携帯専用」
2 テンプレ数2 … 「PCメイン+スマートフォン対応」「携帯専用メイン+スマートフォン対応」
3 テンプレ数3 … 「PCメイン+スマートフォン対応」「携帯専用」「スマートフォン専用」

技術による違い
1 携帯専用 … 「HTML」+「Flash Lite」
2 PCメイン+スマートフォン対応 … 「HTML」+「Flash」+「JavaScript」
3 スマートフォン専用 … 「HTML」+「JavaScript」

スマートフォン専用サイト制作のポイント
・HTML5+CSS3+JavaScriptを使用
・Portrait(縦画面)とLandscape(横画面)を意識しリキッドデザインを使用
・1カラムレイアウト


ウィンドウサイズを基準にデザインを調整
レスポンシブWebデザイン
・デバイスごとに複数のデザインを用意するのではなく、ブラウザーのウィンドウサイズに合わせてデザインをフレキシブルに調整する制作手法
・モバイルサイト制作では、デバイスやスクリーンサイズごとにページを振り分ける方法が一般的だが、レスポンシブWebデザインではHTMLはそのままに、CSS3のメディアクエリーを利用してスタイルシートだけでデザインを変更

レスポンシブWebデザインを選択する4つの理由
1.ワンソースなので画像やテキストの変更などのメンテナンスが容易
2.CSSだけで実装するのでフロントエンドで開発が完結
3.他のデバイスへの拡張性が高い
4.スマートフォン非対応のCMSでもCSSの調整だけで対応可能

1.ワンソースなので画像やテキストの変更などのメンテナンスが容易
・Webサイトをマルチデバイスに対応させる場合、少し前であれば、iPhone, iPad などのOSやスクリーンサイズごとにキメ細かくデザインを調整したページ(HTML)を用意し、サーバーサイドの技術などを利用して細かく振り分ければよかった。しかし、各社からAndroid端末が次々と発売されている現在は、何パターンのスクリーンサイズが存在するのか把握することが困難
・デバイスごとにHTMLを用意して、何種類ものCSSを用意するのは難しい。今後も各キャリアから「春・夏」「秋・冬」と続々とリリースされるモデルごとにOSやデザインを用意して対応するのは極めて困難

3.他のデバイスへの拡張性が高い
・レスポンシブWebデザインでは、HTMLは1つであり 、CSSもデバイスごとのOSやスクリーンサイズに依存しないように設計する。ウィンドウサイズを決定してCSSを記述すれば問題はない

レスポンシブWebデザインを作る3つのステップ
1.ピクセル単位でデザインしてパーセント単位に変換
2.画像サイズを指定する(Fluid Image)
3.respond.js の読み込み
・320ピクセル iPhoneを代表とするスマートフォン
・768ピクセル iPad を代表とするタブレット端末
・1024ピクセル デスクトップPC
・1680ピクセル スマートTVをはじめとする大きなスクリーン
URL




iPhone(スマートフォン用テンプレート)を、Windows7で確認(プレビュー)

 閲覧数:609 投稿日:2011-09-14 更新日:2017-11-29
iPhone(スマートフォン用テンプレート)を、Windows7で確認(プレビュー)
・携帯みたいなFFアドオンはない
・理由は、iPhone=アップル、ということで、ブラウジングにSafariの技術を用いているため
・つまり、Safariインストールは必須!

方法
1.iBBDemo2インストール
2.Safariでユーザエージェント操作
・検討した結果、簡単だと思われる、「Safariでユーザエージェント操作」を試すことにする
URL


モバイル フレンドリー テスト / viewport設定



週間人気ページランキング / 3-22 → 3-28
順位 ページタイトル抜粋 アクセス数
1 Design 0 42
2 LOCK: File currently in use. / マニフェストを読み込めませんでした 10
3 「line-height」効果を打ち消すスタイルシートは、「line-height:normal; 7
4 「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」 6
4 16進数カラーコード / 2進数 6
4 navタグで定義している部分だけCSSが効かない【html5】 | HTML5(HTML) 6
5 HLS / HSL 4
5 HTML5でiframeスクロールバーを表示しない方法が不明 | HTML5(HTML) 4
6 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 2
6 画像大きさ | 他サイト調査(HTML) 2
6 テーブル枠線がどうしても消えない時は「border-collapse: collapse;」 | Backgrounds and Borders Module(CSS) 2
6 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 2
7 Google Chrome を閉じた際にバックグラウンド アプリの処理を続行する / ハードウェア アクセラレーションが使用可能な場合は使用する 1
7 Chromeで名前を付けて保存する際、ファイルを一つにする方法 1
7 ログイン 1
7 「font-size」効果を打ち消すスタイルシートは、「font-size:100%;」? 1
7 イラスト素材 | デザイン 1
7 RGB → 色相H … 最小値基準 × 図形 の考え方 | 色変換(色) 1
7 36ビットカラー 1
7 RGBの種類 / ビットカラー | RGB(色) 1
2024/3/29 1:01 更新