Ktai Style による 携帯電話対応 Mobile Access by Ktai Style 池田 百合子 IKEDA Yuriko http://www.yuriko.net/ 本日の内容 Contents インターネットと携帯電話 The Internet and mobile phones 携帯電話の制約 Restrictions of mobile phones 携帯対応プラグイン Ktai Style 紹介 Introduce the mobile accessing plugin Ktai Style 質疑応答 Q&A 1
2
i Menu (NTT docomo) au one (KDDI) 3
4
携帯サイト検索: Yahoo! Search example: Yahoo! Japan ソフトバンクで WordCamp Search WordCamp with SoftBank (uses Yahoo! Japan) ワードキャンプ だと キャンプ用品ばっかり Results for wa-do kyan-pu (Katakana form of WordCamp ) are almost pages of camping goods... 携帯サイト検索: Google Search example: Google ドコモで ライチ ンゲール Search raichin-gale with NTT docomo (uses Google) NHK 着信御礼! ケータイ大 喜利 の常連投稿者 A famous poster of Keitai Ogiri : A TV program in which viewers can participate with mobile phones. 5
6
日本特有の注意 Attentions only for Japan 文字コード (UTF-8 ではなく Shift_JIS) Character encodings (use Shift_JIS other than UTF-8) 絵文字 半角カナの多用 Use pictograms, half-width Kana キャリア毎に仕様が異なる(CSS, 絵文字 画像 ) Spec is different by careers (CSS, pictograms, images, etc) 個体識別符号を使ったユーザー認証 User authentication by the subscriber ID which is submitted tacitly (common for all sites!) 画面サイズの比較 Comparison of screen size (QVGA/VGA/900px) 7
8
9
10
Ktai Style 出力例 Examples 左のQRコードを撮 影して ぜひ手元で も確認を Capture the left QR code and see the sample sites. http://www.yuriko.net/ 出力例:フロントページ Example: Front page 11
12
出力例:月別アーカイブ Example: Monthly archives 出力例:ドコモ ウィルコム Example: NTT docomo FOMA, Willcom PHS ドコモとウィルコムは絵文字が互換 Pictograms are compatible between NTT docomo and Willcom 13
出力例:au ソフトバンク Example: au, SoftBank 3G au とソフトバンクはスタイルシートが使える Style sheets are available for au and SoftBank 3G. 出力例:イー モバイル 2種 Example: EMobile handset, Windows Mobile 音声端末, Windows Mobile は少数派 At EMobile, data communication terminals (can t view web) are major, handsets and smart phones are minor. 14
Theme: Redportal Red+Blue Similar to livedoor Blog コメントの並び順 を切り替え可能 Comments order switch: newer / older Theme: Monolith Silver+Navy Inline CSS Old terms as above: 15
Theme: Green Green with Nature Inline CSS Old terms like center image Alternate icons Theme: Loving Pink with Love # of == # of comments Alternate frames 16
Theme: Photolog メディアライ ブラリから写 真を抜き出し Pickup a picture from the media library Inline CSS Theme: ipotch au, SoftBank / NTT docomo / Willcom Similar to WPtouch NTT docomo does not support margin and border. 17
Theme: Arege Similar to Slashdot Inline CSS Arege (アレゲ) is the keyword of Slashdot Japan Planning theme: Monobook Similar to MediaWiki (System of Wikipedia) Only compatible with SoftBank 3G, EMobile hadset, Windows Mobile smart phones. 18
携帯テーマの改造手法 How to customize mobile themes http://wppluginsj.sourceforge.jp/ktai_style/howto/color-change/ で解説 ぜひ携帯対応しましょう Let s provide mobile view 自分のために 訪問者のために For me and visitors. 携帯サイト検索で探してもらえる Searched by engine for mobile Ktai Styleは専用の携帯サイト並みの見栄え With Ktai Style, seen as exclusive mobile sites. 無償で使えるツールでは最強レベル Ktai Style is one of the most powerful tools in that of free of charge. 19
20
21
補遺:XSS 脆弱性の危険性 Appendix: Hazards of XSS vulnerability 管理者クッキーを盗んでログイン Login by steeling an admin cookie 携帯実機ではなくFirefox + FireMobileSimulator 等での確認作業をターゲット The target is Firefox + FireMobileSimulator etc, not real handsets. クッキーを盗むJavaScript を含むコメン ト ピンを送信 Send a comment/ping includes a JavaScript which steels a cookie. 22