WordCamp Tokyo...
-
Upload
h2o-space-co-ltd -
Category
Design
-
view
5.572 -
download
6
description
Transcript of WordCamp Tokyo...
実践!オリジナルテーマで作る、スマホサイト&マルチスクリーンサイト
たにぐち まこと
@seltzer
ドイツの水だよ
マカロン本
余談:続々増えるスマホ用語
ガラスマガラパゴススマートフォン
グロスマグローバルスマートフォン
スマケースマートフォンなのにケータイ
WP
WP!
本題
スマホサイトって必要?
スマホサイトなし
WordPress.orghttp://wordpress.org
スマホサイトなし
文字が読みにくいし、リンクがタップしにくい
PCサイトがそのまま見られるから何もしなくて良い!
スマホサイトなし
✓ 画面サイズが小さい✓ 回線が遅い✓ 操作を「指」で行うPCサイトをそのまま見るのは正直しんどい
スマホサイトあり
Yahoo! Japanhttp://yahoo.co.jp
WPtouch pluginの利用
WPTouch plugin
✓ 導入が簡単✓ クオリティが高い
ブログサイトなど、とりあえずの対応に
✓ デザインの変更は難しい
その他のプラグイン
✓ MobilePress✓ WPtap News Press✓ WordPress Mobile Pack
UserAgent Theme Switcherの利用
UserAgent Theme Switcherの利用
$this->addBrowser(new BrowserUA('safarimobile', 'Safari Mobile', null, '^Mozilla\/5.0 \(.*\) AppleWebKit\/.* \(KHTML, like Gecko\)( Version\/.*){0,1} Mobile[\/A-Z0-9]{0,}( Safari\/.*){0,1}$', 'webkit,mobile'));
$this->addBrowser(new BrowserUA('safarimobile', 'Safari Mobile', null, '^Mozilla\/5.0 \((iPhone|iPod).*\) AppleWebKit\/.* \(KHTML, like Gecko\)( Version\/.*){0,1} Mobile[\/A-Z0-9]{0,}( Safari\/.*){0,1}$', 'webkit,mobile'));$this->addBrowser(new BrowserUA('androidmobile', 'Android Mobile', null, '^Mozilla\/5.0 \(Linux; U; Android.*\) AppleWebKit\/.* \(KHTML, like Gecko\)( Version\/.*){0,1} Mobile[\/A-Z0-9]{0,}( Safari\/.*){0,1}$', 'webkit,mobile'));
現状では少し変更する必要あり
UserAgent Theme Switcherの利用
✓ オリジナルのデザインを利用できる✓ エージェントに合わせて細かく制御
✓ テーマを新しく作る必要がある
スマホサイトデザイン時の注意
スマホサイトデザイン時の注意
✓ 横スクロールしない✓ 横幅にフィットさせる✓ 全幅画像は広めに作る✓ 画像は使わずCSS3で✓ JSで動きをデザイン
詳細スライドはおみやげで
横スクロールしない
✓ 文章などが読みにくい✓ iPhoneには横スクロールバーがない
→ 横があることが分かりにくい
横幅にフィット
✓ 端末を横に傾けることができる
幅広の画像
フィットの方法
エリアが伸びる
作るのに手間がかかる1行が長くなり、文章が読みにくい
フィットの方法
幅が伸びる
画像が拡大されて、劣化する1画面に表示できる内容が減る
フィットの方法
レイアウトが変わる
画面幅を有効活用できる手間は最もかかる
viewport
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<meta name="viewport" content="width=680px">
大きめのパーツ
44px×44px以上
画像を極力使わない
!✓ 角丸✓ グラデーション✓ 複数背景✓ シャドウ
など
HTML5 + CSS3
「動き」のデザイン
✓ スライド✓ タブ✓ カルーセル✓ 続きを読む✓ バルーン
JavaScript(jQuery)
スマホサイトに入れたい要素
<meta name=”viewport” content=”width=device-width”>
<meta name=”format-detection” content=”telephone=no”>
<link rel="apple-touch-icon" href="icon57.png" />
<link rel="apple-touch-icon" sizes="57x57" href="icon57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="icon72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="icon114.png" />
ビューポート電話番号自動リンクホームアイコン
jQuery Mobileの利用
jQuery Mobileの利用
jQuery Mobile
✓ JSライブラリではなく、デザインテンプレート
✓ スマホらしいサイトがすぐに作れる
✓ HTMLタグに制約があるため、WPのテンプレートタグと衝突
スマホサイトあり
同じサイトに来たはずなのに、探している情報がない! なんで?
作るの大変!表示・動作確認はもっと大変
スマホサイトあり
✓ PCサイトと別に作る手間と費用✓ 動きをつけると機種依存が激しい✓ レイアウトががらっと変わることで、利用者がとまどうことも
Webサイトのブランド価値としての必要性を考える
さらに...
GALAXY Tab
IS03Galaxy S II
画面サイズの多様化
004HWIDEOS
Android対応の手間
✓ viewport、メディアクエリーなどが仕様通りに動かない
✓ 端末ごとのクセが非常に強い
✓ 検証すべきバージョン・端末の数が多い
Windows Phoneの登場
Windows Phone
✓ 搭載されているブラウザがInternet Explorer
✓ touchイベントが実装されていない
✓ これまで作ったスマホサイトは生かせない
「非PC世代」の誕生
PCは起動するの面倒なんで、基本スマートフォンです。
モバイルファースト!
ということで
マルチスクリーンサイト
マルチスクリーンサイトBLOG 未来館のひとhttp://blog.miraikan.jst.go.jp/
マルチスクリーンサイトTeam PAWS Chicago ¦ Brian Drumhttp://briandrum.net/team-paws/
demo
サイト制作の基本
✓ スマホサイトを作って、PCサイトに展開し、CSSを切り替える
✓ CSSだけで対応できない部分はJavaScriptで
✓ 回線が不安定なので、1ページを一気に読み込ませる
メディアクエリー
<link rel="stylesheet" type="text/css" href="mobile.css" media="screen and (max-device-width: 320px)">
widthheightdevice-widthdevice-heightmax-device-widthmax-device-heightorientationaspect-ratiodevice-aspect-ratiocolorcolor-indexmonochromeresolutionscangrid
JavaScriptでの切り替え
UserAgentでの切り替え
if (navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) { .... iPhoneの場合}
画面解像度での切り替え
if (jQuery(window).width() > 480 || window.innerWidth > 480) { .... 480より上の場合}
※jQueryが必要です
UserAgentでの切り替え・iPhoneエージェント内に「iPhone」というキーワードがあり、「iPad」というキーワードがない
・iPadエージェント内に「iPad」というキーワードがある
・Androidのスマートフォンエージェント内に「Android」および「Mobile」というキーワードがある
・Androidのタブレットエージェント内に「Android」があり、「Mobile」がない
・Androidの標準ブラウザエージェント内に「Safari」がある
・Firefox for Androidエージェント内に「Firefox」がある
・Windows Phoneエージェント内に「Windows Phone」がある
WordPressテーマの作成
✓ 配布するつもりのないテーマは、ルール無視で構築して良い
✓ テーマで必要なのは「style.css」と「index.php」
✓ 一般サイトなら「home.php」も
エントリーを一気にロードする<?php$posts = get_posts('post_type=page&page_id=5');foreach($posts as $post): setup_postdata($post);
the_content();endforeach;?>
ページの順序を変更するMy Page Orderhttp://wordpress.org/extend/plugins/my-page-order/
まとめ
サイト制作の基本
✓ スマホ対策は・やらない・専用サイト・マルチスクリーン(レスポンシブ・Webデザイン)サイトの性格に合わせて
✓ WordPressはオールマイティ✓ PHPは少しずつでも覚えよう!
h2o space 検索