スマートフォン対応

スマートフォン

 状態:-  閲覧数:4,538  投稿日: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で確認(プレビュー)

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

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

Twitter検索結果。「スマートフォン対応」に関する最新ツイート


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



週間人気ページランキング / 1-29 → 2-4
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 49
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 38
3 「bgcolor」「background-color」「background」の違い | CSS 34
4 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 25
5 RGBの種類 / ビットカラー | RGB(色) 20
6 「属性」「プロパティ」「アトリビュート」の違い | CSS 18
6 Design 0 18
7 「東京都」のカラーコード取得は難しい | カラーコード(色) 17
8 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 16
9 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 15
9 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 15
10 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 14
11 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 13
11 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 13
11 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 13
11 ICCプロファイル | カラーマネージメント(色) 13
11 HSLとHSVの違い | 色変換(色) 13
11 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 13
12 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 12
13 GIMPで「レイヤーとして開く」を選択した画像、の位置情報(x,y)を表示させる方法が分からない | GIMP 系(ソフトウェア) 11
2023/2/5 1:01 更新