mtddc hokkaido-2010-ideamans-session
DESCRIPTION
TRANSCRIPT
1
2010年12月18日MTDDC HOKKAIDO / Session 3
アイデアマンズ株式会社代表取締役 宮永邦彦
⇨» サイト制作に多数活用» プラグイン開発が趣味» @miyanaga
⇨» 岩見沢市出身» 苫小牧高専卒» 新卒で株式会社データクラフト勤務
2
⇨» 高専時代の友人同士3人で脱サラ» Six Apart Solution Partner
3
いっしょに働きませんか？
⇨マルチデバイス問題とCMSの関係⇨スマートフォンサイトの作り方
» 制作のテクニックと問題点⇨携帯サイトの作り方
» 制作のテクニックと問題点⇨ケータイキット for Movable Type
» 問題点をどう解決するか» スマートフォンと携帯サイトへの同時対応
4
これからのサイト制作の課題
500300
1.» 情報発信者自身が編集者に» タイムリーな情報発信» デザイナーとプログラマーのケンカを減らす
2.» テンプレートでマルチデバイス対応» ワンソースマルチユースの実現
6
7
8
コンテンツ
伝えたいことは同じデバイスごとのテンプレート幅広いデバイスに配信ワンソースマルチユース
1.» 情報発信者自身が編集者に» タイムリーな情報発信» デザイナーとプログラマーのケンカを減らす
2.» テンプレートでマルチデバイス対応» ワンソースマルチユースの実現
9
Movable Typeはマルチデバイスにも強い！
モバイルデバイスの新しい主役
1000800
スマートフォンとは
⇨iPhone» 2008年7月11日 iPhone 3G» 2010年6月24日 iPhone 4
⇨Android» 今秋冬モデルで各社から数機種ずつ» 日本でも本格普及が始まるか
⇨その他» Windows Mobile» BrackBerry
11
ここではiPhone/Androidを対象にします
携帯電話としての側面
画面サイズ 通信速度
» 携帯電話網» WiFiも
携帯性
PCとしての側面
高性能ブラウザ» HTML5» CSS3» JavaScript
アプリ
12
見た目は携帯・中身はPC
iPhone向けサイトの例(ポータル系)
13
iPhone向けサイトの例(その他)
14
iPhoneサイトの作り方
⇨» グラデーション・角丸・陰影など» 視覚表現の多くはCSSで» アニメーションも可能
⇨» 縦スクロールのみが基本
⇨» Ajaxなど
15
CSS3の表現力
16
<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; /* 陰影 *//* 省略 */
}
HTML
CSS3
スマートフォンらしいサイト制作はCSS3にかかっている
CSS3ジェネレーター
17
http://css-eblog.com/eblog_sample/0912/css3-generator/
このようなオンラインツールが多数
GUIでデザインすると CSS3コードを生成
meta要素による制御
18
<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要素で指定する設定もいくつか
CSS3じゃないとダメ？
⇨» 従来通り画像でも表現可能» CSS3は過渡期なので画像が妥当な場合も
• かつてのテーブルレイアウトのような感じ？
⇨» 画像を使わないから通信が軽い» トラフィック量・コネクション数
19
Android向けサイトの作り方
⇨» 共通レンダリングエンジン=WebKit» CSS3などほとんどが再現
⇨» iPhoneは320×480px» Androidには横長の機種も
• auのIS01など
20
縦画面前提のサイトを横長画面で見ると
21
横渡りの画像が引き伸ばされてぼける
最大の横幅を決めておくとぼけない
Android解像度問題の回避
⇨ 横幅最大480pxでデザイン» iPhoneの横画面» Galaxy Sなど最近のAndroid端末の縦画面» 大きすぎるとiPhone横画面にロス» 将来は変わる可能性も
⇨ 解像度に依存しないリキッドレイアウト» Yahoo!やlivedoor
⇨ 背景画像の複数指定(CSS3)» AFRO SAMURAI:RESURRECTION
• http://afrosamurai2.jp/iphone/index.html
22
いろいろ方法があります
スマートフォンサイト制作の問題点
⇨画像の問題» PC向けの記事写真など» スマートフォンには大きすぎる？
⇨言ってもまだ圧倒的に携帯が多い» 携帯全体: 8010万人※1» スマートフォン: おそらく500万人ほど※2» 5年くらいは携帯が生き残るのでは？(私見)
⇨テンプレート管理» PC・携帯・スマートフォン» 3種類のテンプレート管理は大変
23
※1 平成21年通信利用動向調査/総務省※2 MM総研の発表から独自に試算
まだまだ現役モバイルデバイス
2402800
25
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は利用できない•空白の制御には透明GIF(スペーサーGIF)
携帯HTMLで古くからサポートされているタグ基本的にこれらの組み合わせで制作
26
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化必須
• 拡張子.xhtmlまたはContent-Type指定» font要素のsize属性などが無効になる
⇨iモードブラウザ2.0から大幅改善» 2008年12月登場» 浸透までにはあと2～3年か
27
⇨» ウィルコム対応は少数
⇨» ただしiモードブラウザ1.0に合わせる» 慣れれば難しくはないが…
28
<div style=“font-size: small;”><span style=“color: red;”>■</span>このように逐一書きます
</div>
⇨ 画像» 機種によって画面の解像度が違う
• QVGA/VGA/横画面» 3キャリア900機種以上！
⇨ 絵文字» キャリア間の互換性がない
⇨ キャッシュサイズ» 1ページ内で使えるデータ容量» 機種によって違う
⇨ 文字» シフトJISが標準» カタカナは半角が普通
29
Movable Type携帯対応プラグイン
3003800
⇨2006年ごろ» Google/Yahoo!参入・パケット定額制普及
• 勝手サイトの価値が上がりニーズが高まる
⇨Movable TypeのCMS利用が活発に» でも携帯サイト制作を苦手とする制作会社が多い
⇨Movable Typeで携帯サイトも！» 技術的な問題をプラグインで解決» 3キャリアを意識せず携帯サイトにもMTを使えるよ
うにしたい» PCサイト制作と同じように
31
2006年11月発売後1300以上のライセンスが導入済
ケータイキットの仕組み
32
ブログ記事データベース
ケータイキットが部分的にPHPプログラムを埋め込み
キャリア・機種を判別画像や絵文字を変換
テンプレート 静的ファイル出力
PCとほぼ同じ機能・プラグインが利用可能
デモ
33
主な機能① 機種データベース
⇨» 画面解像度» 1ページに表示できるデータ容量» Flash Lite対応バージョンなど
34
オンラインアップデート
主な機能② 画像変換
⇨» 画面サイズ(QVGA/VGA/横画面)» 待ち受け画像» 著作権保護機能にも対応可
• 対応方法がキャリアによって違う
35
主な機能③ 絵文字
⇨» iモード用絵文字を基準に» 絵文字入りのコメント受け付けも可能
36
&1; &sun;
絵文字のための独自記法
主な機能④ 自動ページ分割
⇨» キャッシュサイズに合わせて分割» 縦に長いページはスクロールしにくい
37
1ページ 2ページ
……
携帯・スマートフォンの同時対応を実現
3803800
スマートフォンサイトの制作アプローチ
39
①» スマートフォン専用HTML» 高コスト・管理が大変
②» PCと同じHTMLを利用» スマートフォン用CSS
③» 携帯と同じHTMLを利用» スマートフォン用CSS
デモ
40
PCサイトからのアプローチ
41
Movable Type標準のクラシックブログテンプレートにスマートフォン用CSSを適用した例
同じXHTMLソースコード=同じテンプレート
現実にはスマートフォンにオーバースペックなことが
多い
変換サービスもいろいろ
42
MOBIFYhttp://mobify.me/
MobifyをつかってiPhoneに最適化 | linker journalhttp://linker.in/journal/2010/01/mobifyiphone.php
デモ
43
携帯サイトからのアプローチ
44
ケータイキットのスマートフォン対応機能
Ver.1.60から対応
表示要素は携帯に近い
スマートフォン対応の仕組み
45
ブログ記事データベース
カタカナ全角変換絵文字を画像変換
CSS属性リセット※
スマートフォン用CSS
携帯※携帯: <span class=“label” style=“color:red”>…</span>スマートフォン: <span class=“label”>…</span>class=“label”に自由にCSSを設定
ケータイポスト for Movable Typeさらなる携帯端末活用のために
4604300
ケータイポスト for Movable Type
⇨ケータイキットの上級機能パッケージ» 自社サーバーでのメール投稿(モブログ)機能» 簡単ログイン機能を持つコミュニティサイト構築
⇨会員コミュニティサイトの構築» 映画「海猿 THE LAST MESSAGE」» PC・携帯両対応のコミュニティサイト
47
詳しい機能はお問い合わせください
携帯・スマートフォンサイト制作ノウハウ
おまけ
48
スマートフォンサイト制作の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/
49
携帯サイト制作のTips
⇨プレビューにはFireMobileSimulator» Firefoxの無料アドオン» http://firemobilesimulator.org/
⇨横480pxで制作» VGA携帯対応» スマートフォンも同じ
⇨実制作には3キャリア実機が必要» 最安プランでパケット定額→1台5000円前後» SIMカードを入れ替えて使える「白ロム」を収集» アイデアマンズでは5回線・15台ほどの白ロム
50
参考書籍
⇨ 「携帯サイトコーディング&デザイン」» 高木悠介氏による概論
⇨ 「携帯サイト年鑑2010」» 津田武氏によるサイトデザインカタログ
⇨ 「携帯+iPhoneモバイルサイト制作術」» 久保靖資氏ほかによる
⇨ 「ケータイHTMLポケットリファレンス」» 佐野正弘氏による(X)HTML+CSSリファレンス
⇨ 「おしゃれなケータイサイトのデザインテンプレートコレクション」» 株式会社テイ・デイ・エスによるテンプレート集
⇨ 「ケータイサイト解体新書」» ホシナカズキ氏による実践テクニック
51
iモードブラウザ2.0に対応した本がオススメその他モバイルSEOに特化した本など多数
52
53