実践！オリジナルテーマで作る、スマホサイト＆マルチスクリーンサイト

たにぐち　まこと

@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/

マルチスクリーンサイトHello Fisherhttp://hellofisher.com/

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 検索