X_NOTE: スマートフォン

ラベル スマートフォン の投稿を表示しています。すべての投稿を表示

2014年1月21日火曜日

スマートフォンサイト制作メモ

スマートフォンサイト、ブラウザチェック環境

・SDK android(エミュレータ)
・Android SDK の高速化方法

・Google Chromeの標準機能でユーザーエージェント切り替え

参考サイト

「1分で使える！Google Chromeならスマホのブラウザチェック機能はデベロッパーツールに標準装備」

ROOM9

「スマホでLightboxのようなモーダルウィンドウを再現、動画やhtmlも読み込み可：Boxer」

・iOS7になって変わったブラウザ表示サイズ、スマホサイトファーストビューなど。

iOSとAndroidのフォント指定について

iOSはヒラギノ角ゴかヒラギノ明朝W3,W6
Androidは以下
・4.0以降　日本語フォントはモトヤフォントの「MTLc3m.ttf - モトヤLシーダ3等幅」「MTLmr3m.ttf - モトヤLマルベリ3等幅」の2つでボールドののフォントが無い。
英語フォントは「Roboto」

・3.X以前
「Droid Sans」

<参考サイト>
・Web Tips
「スマートフォンを考慮したフォント指定の検討」

・たき備忘録
「Android 4.0で採用された｢モトヤフォント｣とは？」

<参考サイト>
・All about 「Androidスマートフォンエミュレータの使い方」
http://allabout.co.jp/gm/gc/381225/

・「スマートフォン向けサイト作成にあたっての基本概要」
http://www.u-ziq.com/blog/2011/01/post_61.html

・スマートフォンサイトをデザインする上で知っておくべき10のTIPS
http://blog.webcreativepark.net/2011/06/16-103025.html

スマートフォンサイトスライドショーまとめ(iPhone,Android)

01.FlexSlider 2

・フリック対応
・横スライド
・レスポンシブ
・iPhone,Android多分可
・ボタンの位置が変えやすい
参考URL：FlexSlider 2

02.Nivo Slider（をレスポンシブにしたものby LIG）

・フリック非対応
・色々なスライド方法あり
・レスポンシブ
・iPhone,Android多分可
・ボタンの位置が変えやすい
参考URL：スマホサイトに入れると使いやすくなる！おすすめjQuery4選！｜LIG

03.Swipeshow

普通の縦横固定のスライドショー
・フリック対応
・横スライド
・iPhone,Android多分可
参考URL：Swipeshow

2013年4月12日金曜日

スマートフォンサイトを作るための参考サイトまとめ。

（１）「jQuery Mobile」

スマートフォン向けフレームワーク、iOSやAndroidなどのWebKitベースのスマートフォンだけでなく、Windows PhoneやBlackBerryにも対応。

スマートフォンでのページ切り替えアニメーションや基本的な構造、ボタンのアイコンなどが簡単に使えるようにしてくれるライブラリ。

参考サイト
「jQuery」http://jquery.com/

「jQuery Mobile」http://jquerymobile.com/

「jQuery Mobile 日本語リファレンス」http://dev.screw-axis.com/doc/jquery_mobile/

2013年4月4日木曜日

Youtubeとかの色々なiframeをレスポンシブ対応する対策

参考サイト：Youtubeとかの色々なiframeをレスポンシブ対応する対策

2013年3月7日木曜日

アプリデザイン、UIデザイン参考まとめ

・MOBILE TUXEDO
いいデザイン且つ実際にあるAPPであることが多い?
レビュー別に見られたり、カテゴリで見られるのも便利。

・Dribbble
言わずと知れた有名サイト。
「APP」などで絞って検索をすれば沢山でてくる。
ただ実際のAPPになっている訳ではなくコンセプトデザインどまりである。

2013年1月9日水曜日

Phone/iPadのホーム画面用アイコンをサイトに設置する方法

(１)PNG形式の画像150px四方の画像を用意。
本家Apple.comに設置されているアイコンは、129 x 129ピクセル。（"http://www.apple.com/apple-touch-icon.png"を参照）

(２)画像ファイル名を「apple-touch-icon.png」としてサーバーのルートにアップ。
コンテンツに手を加える必要はなし。画像が存在していれば、iPhone/iPod touch/iPadが勝手にひろう。

完了。

<注意点>
iPod/iPhone/iPad上でアイコンへの変換時に、ハイライト、テカリ、シャドウが自動的に入ります。角も丸く削られ、統一されたボタンらしいデザインにされます。上半分に白いテカリが入り、色が浅くなってしまいます。コントラストを強めに作った方がよさそうです。上端は自動的にハイライトが入り、白く飛びます。そのため、枠のあるデザインだと上辺が細く見えてしまう場合があります。透明部分を設定しても、生かされません。黒く塗りつぶされます。

「上記のエフェクトのかからないアイコンを表示させる方法」

(１)ファイル名を「apple-touch-icon-precomposed.png」にする
完了。

※任意の場所に置いたアイコンを表示させたい場合は<head>タグの間に以下を記載。
<link rel="apple-touch-icon-precomposed" href="/xxxxxxxxxx.png"/>

<参考サイト>
iPhone/iPadのホーム画面用アイコンapple-touch-icon.pngをサイトに設定しよう

iPhone、iPod touch、iPad用Webクリップ用アイコンの作り方

2012年9月19日水曜日

「jQuery.flickable」スマホでもPCでドラッグとフリック操作でスクロール

http://lagoscript.org/jquery/flickable/demo

<元サイト>
http://lagoscript.org/jquery/flickable/demo

2012年5月22日火曜日

スマホサイト制作リンクまとめ

(参考)実践！iPhone＆Androidサイト制作ガイド

＜ページ振り分けJS＞
以下をhtmlにコピペ

X_NOTE