2012/6/30開催 Sendai.html5 #2 #sendaihtml5
-
- いいね！0
b.mode（ビーモード） 三浦哲志
@bm_miura
講師は仙台ITビジネス研究会理事でもあるノヴァトレードの若林さん！HTML5勉強会でなんと掟破りのトルコ語講座(笑) #sendaihtml5
2012-06-30 15:29:46
小泉勝志郎
@koi_zoom1
#sendaihtml5 若林さん： PC向けサイトをスマホにカスタマイズをしていく。スマホの特徴として、画面が小さい、タッチ操作、縦横比が可変、回線が遅い、そしてHTML5+CSS3前提がある
2012-06-30 15:30:17
あのぶる+@隙あらばサウナに行きたい🦥㌠
@thatblue_plus
逆にHTML5に統一してしまえるのは「ある意味」楽そう、とも思うスマホサイト構築未経験者のわたくし。 #sendaihtml5
2012-06-30 15:31:53
あのぶる+@隙あらばサウナに行きたい🦥㌠
@thatblue_plus
PCサイトのスマホ閲覧対応: 専用コンテンツへの振り分け、@mediaルールを使う、そのまま見せちゃう #sendaihtml5
2012-06-30 15:33:43
小泉勝志郎
@koi_zoom1
#sendaihtml5 若林さん： PCサイトのスマートフォン閲覧対応。主な対策は1.専用コンテンツに振り分ける。見ている端末によってソースコードを変える。2.@mediaルール(CSS3 Media Queries)、主に横幅で振り分ける。3.元々のPCサイトをそのまま使う
2012-06-30 15:35:12
小泉勝志郎
@koi_zoom1
#sendaihtml5 若林さん： 1.端末によった振り分けは.htaccessで振り分けるが、これはmod_rewriteというApacheのモジュールにて行われる。これでスマートフォンであればスマートフォン向けのディレクトリに飛ばす。UAにSPと含まれていたら振り分け等
2012-06-30 15:38:13
あのぶる+@隙あらばサウナに行きたい🦥㌠
@thatblue_plus
User-Agent Switcher for chrome https://t.co/W4rSwQIv #sendaihtml5
2012-06-30 15:44:20
あのぶる+@隙あらばサウナに行きたい🦥㌠
@thatblue_plus
アプリケーションの中でスマホ判定を行うパターン CakePHPの例。 #sendaihtml5
2012-06-30 15:47:38
小泉勝志郎
@koi_zoom1
#sendaihtml5 若林さん： アプリケーションでテンプレート切り替えの場合。CakePHPの例。必ず通る処理にUAにスマホっぽいものがあったら振り分ける。.htaccessの場合と異なり、PCでもスマホでもURLが書き変わらないで済むというメリットがある
2012-06-30 15:48:58
Naoya Henmi
@yakisake
CSS3のmediaクエリーだとuaベースではなく実際の端末ベースで細かく設定できる感じかな #sendaihtml5
2012-06-30 15:52:20
小泉勝志郎
@koi_zoom1
#sendaihtml5 若林さん： 2.@mediaの場合。画面の横幅で切り替え。例えば、メニュー表示で横幅が広いときはサイドバーを表示、狭いときは画面上部に表示等。1.の時と異なり、PCとスマホでHTML5のソースが同じというメリットがある。但し大きく変わる時には向かない
2012-06-30 15:54:43
あのぶる+@隙あらばサウナに行きたい🦥㌠
@thatblue_plus
PCサイトをそのままスマホでも見せる場合、UIへの配慮が必要(リンクがリンクだと見ただけで分かるようにする、ズーム表示への配慮など) #sendaihtml5
2012-06-30 15:55:24
小泉勝志郎
@koi_zoom1
#sendaihtml5 若林さん： 画面が小さい…UI、表示コンテンツ。タッチ操作…UI、リンク、メニュー。縦横比が可変…リキッドデザイン。回線が遅い…リクエストやファイルサイズを減らす
2012-06-30 15:56:29
あのぶる+@隙あらばサウナに行きたい🦥㌠
@thatblue_plus
ただいま #sendaihtml5 休憩中。 @yakisake さんが配ってくれた窯出しショコラ(？)おいしいです
2012-06-30 16:03:30