Mtddc hokkaido-2010-ideamans-session

2010年12月18日MTDDC HOKKAIDO / Session 3 アイデアマンズ株式会社代表取締役宮永邦彦 1

⇨ » サイト制作に多数活用 » プラグイン開発が趣味 » @miyanaga⇨ » 岩見沢市出身 » 苫小牧高専卒 » 新卒で株式会社データクラフト勤務 2

⇨ » 高専時代の友人同士3人で脱サラ » Six Apart Solution Partner いっしょに働きませんか？ 3

⇨マルチデバイス問題とCMSの関係⇨スマートフォンサイトの作り方 » 制作のテクニックと問題点⇨携帯サイトの作り方 » 制作のテクニックと問題点⇨ケータイキット for Movable Type » 問題点をどう解決するか » スマートフォンと携帯サイトへの同時対応 4

これからのサイト制作の課題 500300

1. » 情報発信者自身が編集者に » タイムリーな情報発信 » デザイナーとプログラマーのケンカを減らす2. » テンプレートでマルチデバイス対応 » ワンソースマルチユースの実現 6

伝えたいことは同じデバイスごとのテンプレート幅広いデバイスに配信ワンソースマルチユースコンテンツ 8

1. » 情報発信者自身が編集者に » タイムリーな情報発信 » デザイナーとプログラマーのケンカを減らす2. » テンプレートでマルチデバイス対応 » ワンソースマルチユースの実現 Movable Typeはマルチデバイスにも強い！ 9

モバイルデバイスの新しい主役 1000800

スマートフォンとは⇨iPhone » 2008年7月11日 iPhone 3G » 2010年6月24日 iPhone 4⇨Android » 今秋冬モデルで各社から数機種ずつ » 日本でも本格普及が始まるか⇨その他 » Windows Mobile » BrackBerry ここではiPhone/Androidを対象にします 11

見た目は携帯・中身はPC携帯電話としての側面 PCとしての側面 画面サイズ  高性能ブラウザ 通信速度 » HTML5 » 携帯電話網 » CSS3 » WiFiも » JavaScript 携帯性  アプリ 12

iPhone向けサイトの例(ポータル系) 13

iPhone向けサイトの例(その他) 14

iPhoneサイトの作り方⇨ » グラデーション・角丸・陰影など » 視覚表現の多くはCSSで » アニメーションも可能⇨ » 縦スクロールのみが基本⇨ » Ajaxなど 15

CSS3の表現力 HTML <div class="fnc-btn"> <label>一覧</label> </div>CSS3.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にかかっている 16

CSS3ジェネレーターhttp://css-eblog.com/eblog_sample/0912/css3-generator/ GUIでデザインすると CSS3コードを生成このようなオンラインツールが多数 17

meta要素による制御⇨ ズーム操作の抑制 » ピンチによる拡大縮小を抑制<meta name="viewport" content="width=100%; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />⇨ 電話番号の自動リンク化を抑制 » 192.168.1.1などが思わぬリンクになる<meta name="format-detection" content="telephone=no" /> このようにmeta要素で指定する設定もいくつか 18

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種類のテンプレート管理は大変※1 平成21年通信利用動向調査/総務省※2 MM総研の発表から独自に試算 23

まだまだ現役モバイルデバイス 2402800

携帯HTMLで古くからサポートされているタグ基本的にこれらの組み合わせで制作 HTML HEAD TITLE BODY METABLOCKQUOTE 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) 25

EZwebとYahoo!ケータイで再現性の高いCSSプロパティPCにかなり近い仕様 margin padding display border background color text-align vertical-align line-height text-indent text-white-space font line-style decoration 26

⇨ CSSらしくないCSS » 外部ファイルを利用できない » style要素を利用できない • 一部のセレクタを除く » 各要素のstyle属性に直接CSSを書く⇨ HTMLと併用できない » XHTML化必須 • 拡張子.xhtmlまたはContent-Type指定 » font要素のsize属性などが無効になる⇨ iモードブラウザ2.0から大幅改善 » 2008年12月登場 » 浸透までにはあと2～3年か 27

⇨ » ウィルコム対応は少数⇨ » ただしiモードブラウザ1.0に合わせる » 慣れれば難しくはないが…<div style=“font-size:small;”><span style=“color: red;”>■</span>このように逐一書きます</div> 28

⇨ 画像 » 機種によって画面の解像度が違う • QVGA/VGA/横画面 » 3キャリア900機種以上！⇨ 絵文字 » キャリア間の互換性がない⇨ キャッシュサイズ » 1ページ内で使えるデータ容量 » 機種によって違う⇨ 文字 » シフトJISが標準 » カタカナは半角が普通 29

Movable Type携帯対応プラグイン 3003800

⇨ 2006年ごろ » Google/Yahoo!参入・パケット定額制普及 • 勝手サイトの価値が上がりニーズが高まる⇨ Movable TypeのCMS利用が活発に » でも携帯サイト制作を苦手とする制作会社が多い⇨ Movable Typeで携帯サイトも！ » 技術的な問題をプラグインで解決 » 3キャリアを意識せず携帯サイトにもMTを使えるようにしたい » PCサイト制作と同じように 2006年11月発売後1300以上のライセンスが導入済 31

ケータイキットの仕組みブログ記事テンプレート静的ファイル出力データベースケータイキットが部分的にキャリア・機種を判別 PHPプログラムを埋め込み画像や絵文字を変換 PCとほぼ同じ機能・プラグインが利用可能 32

デモ 33

主な機能① 機種データベース⇨ » 画面解像度 » 1ページに表示できるデータ容量 » Flash Lite対応バージョンなどオンラインアップデート 34

主な機能② 画像変換⇨ » 画面サイズ(QVGA/VGA/横画面) » 待ち受け画像 » 著作権保護機能にも対応可 • 対応方法がキャリアによって違う 35

主な機能③ 絵文字⇨ » iモード用絵文字を基準に » 絵文字入りのコメント受け付けも可能 &1; &sun; 絵文字のための独自記法 36

主な機能④ 自動ページ分割⇨ » キャッシュサイズに合わせて分割 » 縦に長いページはスクロールしにくい …… 1ページ 2ページ 37

携帯・スマートフォンの同時対応を実現 3803800

スマートフォンサイトの制作アプローチ① » スマートフォン専用HTML » 高コスト・管理が大変② » PCと同じHTMLを利用 » スマートフォン用CSS③ » 携帯と同じHTMLを利用 » スマートフォン用CSS 39

デモ 40

PCサイトからのアプローチMovable Type標準のクラシックブログテンプレートにスマートフォン用CSSを適用した例同じXHTMLソースコード =同じテンプレート現実にはスマートフォンにオーバースペックなことが多い 41

変換サービスもいろいろMOBIFYhttp://mobify.me/ MobifyをつかってiPhoneに最適化 | linker journal http://linker.in/journal/2010/01/mobifyiphone.php 42

デモ 43

携帯サイトからのアプローチケータイキットのスマートフォン対応機能Ver.1.60から対応表示要素は携帯に近い 44

スマートフォン対応の仕組みブログ記事データベースカタカナ全角変換絵文字を画像変換 CSS属性リセット※ スマートフォン用CSS 携帯 ※携帯: <span class=“label” style=“color:red”>…</span> スマートフォン: <span class=“label”>…</span> class=“label”に自由にCSSを設定 45

さらなる携帯端末活用のためにケータイポスト 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リファレンス⇨ 「おしゃれなケータイサイトのデザインテンプレートコレクション」 » 株式会社テイ・デイ・エスによるテンプレート集⇨ 「ケータイサイト解体新書」 » ホシナカズキ氏による実践テクニック iモードブラウザ2.0に対応した本がオススメその他モバイルSEOに特化した本など多数 51

http://www.skyarc.co.jp	430
http://www.movabletype.jp	114
http://movabletype.jp	4
http://webcache.googleusercontent.com	2

Mtddc hokkaido-2010-ideamans-session

by Kunihiko Miyanaga on Dec 20, 2010

Accessibility

Tags

Upload Details

Usage Rights

4 Embeds 550

Statistics

Mtddc hokkaido-2010-ideamans-session — Presentation Transcript