mtセミナー2011/2/21 アイデアマンズ株式会社
DESCRIPTION
TRANSCRIPT
2011年2月21日
アイデアマンズ株式会社
代表取締役 宮永邦彦
» 高専時代の友人同士3人で脱サラ» 2005年11月設立» Six Apart Solution Partner
2
「モバイルサイトは苦手」をなくしたい!
» 1977年北海道生まれ» 苫小牧高専情報工学科卒
» miyanaga.tumblr.com
3
サイト運営の分業化・効率化» 発信者自身が編集者となりタイムリーな情報提供» デザイナーとプログラマーが円滑に作業
マルチデバイスへの対応» テンプレートによるマルチデバイス対応» ワンソースマルチユースの実現
4
5
コンテンツテンプレート
デバイスごとのテンプレートでワンソースマルチユースを実現
1. スマートフォンサイトの作り方» 制作テクニックと問題点
2. 携帯サイトの作り方» 制作テクニックと問題点
3. ケータイキット for Movable Type» 問題点をどう解決するか» スマートフォンと携帯サイトへの同時対応
6
⇨» Apple単独生産
⇨» 各社からコンスタントに登場
⇨» Windows Mobile» BrackBerry
7
ここではiPhone/Androidを対象にします
人気No.1のスマートフォン
800800
携帯電話としての側面
画面サイズ 携帯性 通信速度
» 携帯電話通信網» WiFiも可
PCとしての側面
高性能ブラウザ» HTML5» CSS3» JavaScript
アプリ
9
PCとも携帯とも違う制作アプローチが必要
10
11
⇨» グラデーション» 角丸・陰影など» CSS3で表現
⇨» 携帯に似ている
⇨» 押しやすさが重要
⇨» Ajaxの活用
12
携帯のようなレイアウト、PCのような表現
13
<div class="fnc-btn"><label>一覧</label></div>
.fnc-btn > label {background: -webkit-gradient /* グラデーション */(linear, 0% 0%, 0% 100%, from(#6E799D), color-stop(0.05, #93A3D5), color-stop(0.48, #5A77AF), color-stop(0.52, #3A57A0), to(#1E3A95)); border-radius: 3px; /* 角丸 */text-shadow: rgba(0, 0, 0, 0.398438) 0px -1px 0px; /* 陰影 *//* 省略 */
}
スマートフォンらしいサイト制作はCSS3にかかっている
14
このようなオンラインツールが多数
http://css-eblog.com/eblog_sample/0912/css3-generator/
⇨» 従来通り画像による表現も可能» 携帯電話との共通化では妥当な場合も
⇨» 画像を使わないから通信が軽い
15
スマートフォンの本命?
⇨» 共通レンダリングエンジンWebKitを利用» 一部にわずかな違いはあり
⇨» iPhoneは320×480px» Androidには横長の機種も
• auのIS01・Galaxy Tab
17
縦画面前提のページを横長画面で見ると
18
19
最大480px
http://m.lexus.jp/
20
隙間を広げて対応
http://ipn.yahoo.co.jp/
21
CSS3で複数の透過PNGを指定
http://afrosamurai2.jp/iphone/
⇨画像の問題» PC向けの記事写真は大きすぎる?
⇨まだまだ圧倒的に携帯が多い» 携帯全体: 8010万人※1» スマートフォン: おそらく500万人ほど※2
⇨テンプレート管理» PC・携帯・スマートフォン?» 3種類のテンプレート管理は大変
22
※1 平成21年通信利用動向調査/総務省※2 MM総研の発表から独自に試算
まだまだ現役モバイルデバイス
24
HTML HEAD TITLE BODY META
BLOCKQUOTE BR BLINK CENTER FONT
DIV H1~6 P PRE HR
MARQUEE A DL DT DD
OL UL LI FORM INPUT
SELECT OPTION TEXT IMG
•文字コードは基本シフトJIS•段組、マルチカラムなどの複雑なレイアウトはなし•JavaScriptは利用できない(iモード2.0から一部可)•空白の制御には透明GIF(スペーサーGIF)
携帯HTMLで古くからサポートされているタグ基本的にこれらの組み合わせで制作
25
margin padding display border backgroundcolor text-align vertical-align line-height text-indent
white-space text-decoration font line-style
EZwebとYahoo!ケータイで再現性の高いCSSプロパティPCにかなり近い仕様
⇨CSSらしくないCSS» 外部ファイルを利用できない» style要素を利用できない(一部を除く)» 各要素のstyle属性に直接CSSを書く
⇨HTMLと併用できない» XHTML化必須
⇨iモードブラウザ2.0から大幅改善» 2008年12月登場» 浸透までにはあと2~3年か
26
⇨3キャリア対応は必須» ウィルコム対応は少数
⇨XHTML+CSSがトレンド» ただしiモードブラウザ1.0に合わせる» 慣れれば難しくはないが…
27
<div style=“font-size: small;”><span style=“color: red;”>■</span>このように逐一書きます
</div>
<div style=“font-size: small;”><span style=“color: red;”>■</span>このように逐一書きます
</div>
⇨画像» 機種によって画面の
解像度が違う» 3キャリア900機種
⇨絵文字» キャリア間の互換性
がない» 表記が大変
⇨キャッシュサイズ» 1ページ内で使える
データ容量が機種によって違う
⇨文字» シフトJISが標準» カタカナは半角にす
る場合が多い
28
静的なHTMLファイルでは対応が困難
Movable Type携帯対応プラグイン
⇨ 2006年» Google/Yahoo!参入・パケット定額制普及» 勝手サイトのビジネスニーズが高まる
⇨ Movable TypeのCMS利用が活発に» 初の実用的低価格CMS» でも携帯サイト制作を苦手とする制作会社が多い
⇨ 携帯サイトにもMovable Typeを!» 3キャリアを意識せず、
携帯サイトにもMTを使えるようにしたい!
30
発売以後1300を超えるライセンスが導入済
何ができる?①900以上の機種に対応
⇨» 画面解像度・キャッシュサイズなど» Flash Lite対応バージョンも
31
オンラインアップデート
何ができる?②画像の携帯向け変換
⇨» 画面サイズ(QVGA/VGA/横画面)» 待ち受け画像» 著作権保護機能にも対応
32
何ができる?③3キャリア絵文字対応
⇨» 絵文字入りのコメント受け付けも可能
33
&1; &sun;
絵文字のための独自記法
何ができる?④長いページの自動分割
⇨» 縦に長いページはスクロールしにくい
34
1ページ 2ページ
……
ケータイキットの仕組み
35
ブログ記事データベース
ケータイキットが部分的にPHPプログラムを埋め込み
キャリア・機種を判別画像や絵文字を変換
テンプレート 静的ファイル出力
PCとほぼ同じ機能・プラグインが利用可能
デモ
⇨プラグイン(試用版)のインストール⇨携帯向けテンプレートの制作
» PCサイトの自動変換はしません» 無料のサンプルテンプレートを配布しています
⇨ライセンスキーの登録» オンライン販売» 保守料なし
37
携帯・スマートフォンの同時対応を実現
38
スマートフォンサイトの制作アプローチ
39
① 専用テンプレートを新設» スマートフォン専用HTML» 高コスト・管理が大変
② PCからのアプローチ» PCと同じHTMLを利用» スマートフォン用CSS
③ 携帯からのアプローチ» 携帯と同じHTMLを利用» スマートフォン用CSS
デモ
PCサイトからのアプローチ
41
Movable Type標準のクラシックブログテンプレートにスマートフォン用CSSを適用した例
同じXHTMLソースコード=同じテンプレート
現実にはスマートフォンにオーバースペックなことが
多い
変換サービスもいろいろ
42
MOBIFYhttp://mobify.me/
MobifyをつかってiPhoneに最適化 | linker journalhttp://linker.in/journal/2010/01/mobifyiphone.php
デモ
携帯サイトからのアプローチ
44
ケータイキットのスマートフォン対応機能
Ver.1.60から対応
レイアウトは携帯に近い
スマートフォン対応の仕組み
45
ブログ記事データベース
カタカナ全角変換絵文字を画像変換CSS属性リセット
スマートフォン用CSS
<span class=“label”>カタカナ</span><span class=“label”>カタカナ</span>
<span class=“label” style=“color:red”>カタカナ</span><span class=“label” style=“color:red”>カタカナ</span>
.label {/* スマートフォン用CSS */
}
.label {/* スマートフォン用CSS */
}
46
おまけ→
@ideamans@miyanaga
Bonus Track
47
スマートフォンサイト制作のTips
⇨ プレビューにはSafari» 「開発者モード」でiPhone偽装が可能、CSS3などの再現性が高い» 実機プレビューにはiPod touchも可» Androidには無償のシミュレーターも http://developer.android.com
⇨ とにかくCSS3がキモ» CSS3とWebKit独自機能をマスター» 幅指定はmax-widthプロパティが便利
⇨ iPhone 4で画像をきれいに見せるには» ちょっと大変そう http://design.kayac.com/topics/2010/08/iphone4-
retina-web.php
⇨ 有名サイトのHTML・CSSを参考に» IP制限がないためアクセス自由» iPhoneデザインアーカイブ http://iphonedesignarchive.jp/
48
iPhone - meta要素による制御
49
<meta name="viewport" content="width=100%; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
⇨ズーム操作の抑制» ピンチによる拡大縮小を抑制
<meta name="format-detection" content="telephone=no" />
⇨電話番号の自動リンク化を抑制» 192.168.1.1などが思わぬリンクになる
このようにmeta要素で指定する設定もいくつか
携帯サイト制作のTips
⇨ プレビューにはFireMobileSimulator» Firefoxの無料アドオン» http://firemobilesimulator.org/
⇨ 横480pxで制作» VGA携帯対応» スマートフォンも同じ
⇨ 実制作には3キャリア実機が必要» 最安プランでパケット定額→1台5000円前後» SIMカードを入れ替えて使える「白ロム」を収集» アイデアマンズでは5回線・15台ほどの白ロム
50
参考書籍⇨ 「携帯サイトコーディング&デザイン」
» 高木悠介氏による概論
⇨ 「携帯サイト年鑑2010」» 津田武氏によるサイトデザインカタログ
⇨ 「携帯+iPhoneモバイルサイト制作術」» 久保靖資氏ほか
⇨ 「iPhone+Androidスマートフォン制作入門」» たにぐちまこと氏によるフルカラー入門書
⇨ 「ケータイHTMLポケットリファレンス」» 佐野正弘氏による(X)HTML+CSSリファレンス
⇨ 「おしゃれなケータイサイトのデザインテンプレートコレクション」» 株式会社テイ・デイ・エスによるテンプレート集
⇨ 「ケータイサイト解体新書」» ホシナカズキ氏による実践テクニック
51
iモードブラウザ2.0に対応した本がオススメその他モバイルSEOに特化した本など多数