Today: Yesterday: Total: Online:
カテゴリー
その他
  • RSS1.0
  • RSS2.0
  • atom0.3
  • valid XHTML1.0
  • valid CSS2
  • Credit
RSSリーダーで購読する | この日記のはてなブックマーク数 | プロフィール
コメントが一番多い記事(233コメント):人の心理の裏をかくホームページ集客術:リピータになってもらうためには
ツイートが一番多い記事(94ツイート):ちょっと待て!twitterやfacebookに子供の写真を掲載する親達への警告
いいねが一番多い記事(574いいね):facebookスパムに要注意。なりすましの見分け方とアカウント乗っ取りの手口(2013年度版)

[ カテゴリー » スマートフォン ]

カテゴリー » スマートフォン » シミュレータ July 24, 2012

ChromeでiPhoneやAndroidの動作確認を簡単するユーザーエージェントを切り替える方法 ID:1343118406


User-Agent Switcher
というプラグインがある。

https://chrome.google.com/webstore/detail/djflhoibgkdhkhhcedjiklpkjnoahfmg?hl=en-US&gl=US

インストールしたら、右上にメガネマークが出るので、
クリックするとユーザーエージェントが切り替えられる。

iPhone、アンドロイド、iPad用など、
スマホ用のサイトを見たかったら、これで切り替えられる

— posted by midilin @ 05:26PM | Comment (0)

カテゴリー » スマートフォン » シミュレータ March 02, 2012

Androidシミュレータのプロキシ設定 ID:1330683371


設定→無線とネットワーク→モバイルネットワーク

アクセスポイントをプロキシとして登録する

menuをクリックして、新しいAPNとして登録

名前:任意。proxyとか
APN:任意。Internetとか

その他、プロキシ、ポートを入れる。

入力が終わったら、「menu」を押したあと、「保存」をクリック

http://newbiztask.blog69.fc2.com/blog-entry-24.html

— posted by midilin @ 07:16PM | Comment (0)

カテゴリー » スマートフォン February 08, 2012

スマートフォンサイト作成に使えるフレームワーク ID:1328663020


●Mobile Boilerplate

各環境の設定コード集のようなもの
HTML5 Boilerplateが本家。

モバイルサイトを構築するためのテンプレート

http://html5boilerplate.com/mobile

●Less Framework
CSSグリッドシステムを利用するためのフレームワーク。
最小で3カラム列から、モバイル環境にあわせて
増減させる。

http://lessframework.com/

●Sleleton
CSSグリッドシステム
http://www.getskeleton.com/

●Modernizr

Javascriptのフレームワーク
http://www.modernizr.com/

●Mobitest
http://www.blaze.io/mobile/

— posted by midilin @ 10:03AM | Comment (0)

カテゴリー » スマートフォン February 07, 2012

スマホサイトの画像を作るときの注意 ID:1328594922


iPhone3などで見られる画像(160dpi)を作っても
iPhone4で見る(320dpi)と画像が荒れてしまう。

これを防ぐために、高解像度向けに大きめなサイズを用意し、
HTMLとCSSで倍率を小さくする必要がある。

プログラムで切り替えるか、
低解像度用(160dpi以下)と高解像度(320dpi向け)の2種類を用意する。

— posted by midilin @ 03:08PM | Comment (0)

カテゴリー » スマートフォン February 07, 2012

Viewportの使い方 ID:1328583546


スマホでPC用サイトを見たときに、縮小されることを防ぐ。

またフォームのテキストフィールドにフォーカスした場合、強制的に拡大されるのも防ぐ。

指定できる属性としては
width:幅
height:高さ
initial-scale:倍率の初期値
mininum-scale:倍率の最小値
maxinum-scale:倍率の最大値
user-scalable:拡大・縮小操作の可否
target-density-dpi:DPIの指定(Androidのみ)

initial-scale=1.0がある場合、480px、
ない場合は320pxが適用される。

initial-scale=1.0がないと強制的に拡大されるため、
必要以上に拡大されることがあるため注意。

— posted by midilin @ 11:59AM | Comment (0)

カテゴリー » スマートフォン February 03, 2012

ブラウザ上でスマホのHTMLを制作、ダウンロードできるサイト ID:1328258812


mobjectify
http://www.mobjectify.com/
jQuery Mobileを使っていて、ユーザー登録不要。

触ってみたが、なかなか面白い

— posted by midilin @ 05:46PM | Comment (0)

カテゴリー » スマートフォン February 03, 2012

スマホのアプリで、Webページを閲覧したときの注意 ID:1328258318


・アドレスバーが表示されない
・アプリのUIがあるので、画面がさらに狭くなる
・「ブックマークに追加」「ホーム画面に追加」「プリント」などの機能が使えない

— posted by midilin @ 05:38PM | Comment (0)

カテゴリー » スマートフォン February 03, 2012

iPhoneとAndroidのハードウェアボタンの違い ID:1328258141


ハードウェアボタン=画面の下にあるボタン

iPhoneは「ホームボタン」1つのみ。
Androidは、「ホームボタン」「メニューボタン」「戻るボタン」の3つ。

iPhoneには「戻るボタン」がないので、注意。

— posted by midilin @ 05:35PM | Comment (0)

カテゴリー » スマートフォン February 03, 2012

スマートフォンサイトの回線環境をシミュレートする ID:1328257295


スマホサイトはPCサイトのように早く表示できないので
シミュレータを使って、PC上で回線速度を遅くして
読み込ませることができる。

●Charles

「Charles」というもので、
Win、Mac、両方対応。ただし有償。

デモはフリートライアル有。

本来は、Web開発用のhttpやhttpsの流れを調べるためのデバッグツールだが、
機能の一部で回線をシミュレートできる。


http://www.charlesproxy.com/

●Mobile Perf BookMarklet

ブックマークして使う。
http://stevesouders.com/mobileperf/mobileperfbkm.php

●Mobitest

— posted by midilin @ 05:21PM | Comment (0)

カテゴリー » スマートフォン January 27, 2012

実践!iPhone&Androidサイト制作ガイド ID:1327660435


実践!iPhone&Androidサイト制作ガイド

http://ascii.jp/elem/000/000/543/543575/

第1回 スマートフォン対応サイトの作り方、教えます
第2回 作って学ぶスマートフォン対応サイトの基本
第3回 サイト制作の前に知りたいiPhone/Androidの仕様
第4回 スマートフォン対応サイトを設計するときのノウハウ
第5回 スマートフォンサイトをデザインする7つのポイント
第6回 実例でわかる!スマートフォンサイトの画面設計
第7回 HTML5/CSS3で作るスマートフォンサイトの基本
第8回 JavaScriptで振り分けてスマホサイト完成!
第9回 CSS+jQueryでクロスデバイスサイトを作ろう
第10回 jQueryでiPhone風スライドパネルを作ろう

ポイントをまとめると・・・

■第1回 スマートフォン対応サイトの作り方、教えます

●メジャーなサイトのスマホ対応
●スマホの対応のそれぞれ
・コンテンツやサービスをスマートフォン向けに全て最適化
・専用アプリを提供
・一部のページだけ対応
●必要知識
・HTML+CSS(HTML5/CSS3)
・Javascript(2本指を使ったジェスチャーや画面の拡大/縮小等)
●制作方法
・1から作成
・PCサイトをスマートフォンで見やすくする(HTML+CSS修正)

■第2回 作って学ぶスマートフォン対応サイトの基本

●Viewport(自動縮小)
●シミュレータ
・iPhoneシミュレーター(Macのみ)
・Androidシミュレーター・・・eclipseが必要

■第3回 サイト制作の前に知りたいiPhone/Androidの仕様

●iPhone標準ブラウザーは「Safari」
●Mobile Safariの制限
・プラグイン非対応のため、Flash NG
・文字コードエンコーディング設定がない
・ファイルのアップロード・ダウンロードができない
・画像容量、Javascriptの処理時間に制限有
●Androidとはグーグルが中心になって開発しているモバイル用OSの名称
●Androidの標準ブラウザーは「ブラウザ」(chromeに近い)
●Android 端末の制限
→基本はMobile Safariと同じ、プラグイン非対応、アップロード、ダウンロードNG
 でもFlashはOK。

■第4回 スマートフォン対応サイトを設計するときのノウハウ

●QRコードを認識するソフトウェアが標準では搭載されていない
●ゴールをフォーム入力ではなくTel問い合わせ、リアル店舗への誘導、
 Twitterやメールを使ったURLをPCと共有、ブックマーク、ホーム画面への追加などがよいかも
●階層は浅く、1ページは長く設計
●スクロールバーが存在しないので(指でなぞるため)
 ページ内リンク、折りたたみ、タブなどを有効利用
●文字サイズはPCサイトよりも大きく(14〜15pt程度)

■第5回 スマートフォンサイトをデザインする7つのポイント

●PC同様ワイヤーフレーム→デザインカンプを作成
●リキッド(可変幅)でデザイン
→コーディングだけでなく、デザインカンプでボタン作成時も
 幅を問うような装飾を施さない(ボタン幅が変えられるようなデザイン)
●縦画面と横画面でレイアウトを変更するにはCSSの「メディアクエリー」を使って対応できる
●pngが使える
●画像を使って表現していた角丸ボックスやグラデーションなどの装飾要素は、容量削減のため、CSS3のプロパティを利用する
●ロールオーバーができないので、リンクだとわかるようにする(画像リンクとか)


■第6回 実例でわかる!スマートフォンサイトの画面設計

●PCサイトのコンテンツ選定(どこをスマホサイトに取り入れるか)
●サイトマップを作成
・Webサービス「Cacoo」でサイトマップ作成
 https://cacoo.com/
 ワイヤーフレームの作成もできる
●ジャンプボタンの配置方法

■第7回 HTML5/CSS3で作るスマートフォンサイトの基本

●デザインカンプの作成
●HTMLはHTML5を使用
●リセットCSSの組み込み
・文字のサイズや太さ、マージンなどブラウザーによって違い、標準が適用されるため
 リセット用のCSSを適用してブラウザーの標準スタイルを無効にする
・HTML5 DoctorやGoogle Codeから取得できる
●角丸をCSS3のaside要素(のborder-radius)で作る
●ボタンのグラデーションのCSS3(-webkit-gradient)

■第8回 JavaScriptで振り分けてスマホサイト完成!

●CSSでボタンを作成したときはリンク領域もCSSで拡大する
●smoothScroll.jsでスクロールをスムーズにする
●スマートフォンとPCの振り分けはJavascriptでもできる
●PCとスマホでコンテンツの内容が違い、振り分けする場合は
 スマホサイトに転送してよいかをダイアログで確認

■第9回 CSS+jQueryでクロスデバイスサイトを作ろう

●クロスデバイス=PC向けのHTMLを利用し、CSSとJavaScriptだけで
 レイアウトやデザインを変更すること
●メディアクエリー=出力する媒体(PC、印刷など)や画面解像度など条件に合わせてスタイルを適用できるCSS3の機能
 linkタグのmedia属性を指定する
 例えば横幅が狭い環境で見たとき、メニューを非表示にしてメインのみ表示
●非表示にしたメニュー部分はCSSのdisplay:noneで非表示
 +jQueryでエフェクト表示をさせる
●画像もjQueryで切り替えられる(CSSとメディアクエリーでもOK)


■第10回 jQueryでiPhone風スライドパネルを作ろう
●jQuery:http://jquery.com
・文字のフェイドアウト
・左右スライド
・その他いろいろ

何度も読み返したいサイト。

— posted by midilin @ 07:33PM | Comment (0)


カウンター