1: 入 門 Ktai Library ECWorks 滝 下 真 玄 (MASA-P) http://www.ecworks.jp/ info@ecworks.jp
MENU 何 故 Ktai Library? Ktai Library の 基 本 的 な 使 い 方 携 帯 サイトを 作 る 場 合 の 注 意 点 まとめ 1
何 故 Ktai Library? 2
携 帯 サイトを 作 る 場 合 皆 さんはどうやって 作 っていますか? 3
ユーザーエージェントで 機 種 を 判 別 して それぞれ 別 のHTML(ビュー)へ 自 作 の 判 定 メソッド PEARの Pear::Net_UserAgent_Mobile 利 用 絵 文 字 ライブラリの 使 用 Text_Pictogram_Mobile 利 用 4
ユーザーエージェントで 機 種 を 判 別 して それぞれ 別 のHTML(ビュー)へ 自 作 の 判 定 メソッド PEARの Pear::Net_UserAgent_Mobile 利 用 絵 文 字 ライブラリの 使 用 Text_Pictogram_Mobile 利 用 5
ユーザーエージェントで 機 種 を 判 別 して それぞれ 別 のHTML(ビュー)へ 自 作 の 判 定 メソッド PEARの Pear::Net_UserAgent_Mobile 利 用 絵 文 字 ライブラリの 使 用 Text_Pictogram_Mobile 利 用 6
ユーザーエージェントで 機 種 を 判 別 して それぞれ 別 のHTML(ビュー)へ 自 作 の 判 定 メソッド PEARの Pear::Net_UserAgent_Mobile 利 用 絵 文 字 ライブラリの 使 用 Text_Pictogram_Mobile 利 用 7
ユーザーエージェントで 機 種 を 判 別 して それぞれ 別 のHTML(ビュー)へ 自 作 の 判 定 メソッド PEARの Pear::Net_UserAgent_Mobile 利 用 絵 文 字 ライブラリの 使 用 Text_Pictogram_Mobile 利 用 8
簡 単 な 携 帯 サイトでは これで 良 いかもしれないが 実 際 に 携 帯 サイトを 作 る 上 で 困 ることがいくつかある 9
セッションの 利 用 docomoの 場 合 クッキーによるセッションキー の 保 持 が 出 来 ないため クエリストリングによる 対 応 をしなければならない CakePHPの 場 合 処 理 を 入 れる 場 所 が 難 しい リダイレクト 時 もケアする 必 要 がある 基 本 的 にこの 辺 は 情 報 が 出 回 っていない 10
セッションの 利 用 docomoの 場 合 クッキーによるセッションキー の 保 持 が 出 来 ないため クエリストリングによる 対 応 をしなければならない CakePHPの 場 合 処 理 を 入 れる 場 所 が 難 しい リダイレクト 時 もケアする 必 要 がある 基 本 的 にこの 辺 は 情 報 が 出 回 っていない 11
セッションの 利 用 docomoの 場 合 クッキーによるセッションキー の 保 持 が 出 来 ないため クエリストリングによる 対 応 をしなければならない CakePHPの 場 合 処 理 を 入 れる 場 所 が 難 しい リダイレクト 時 もケアする 必 要 がある 基 本 的 にこの 辺 は 情 報 が 出 回 っていない 12
セッションの 利 用 docomoの 場 合 クッキーによるセッションキー の 保 持 が 出 来 ないため クエリストリングによる 対 応 をしなければならない CakePHPの 場 合 処 理 を 入 れる 場 所 が 難 しい リダイレクト 時 もケアする 必 要 がある 基 本 的 にこの 辺 は 情 報 が 出 回 っていない 13
mailtoリンク 仕 様 が 各 キャリアで 異 なる docomoとauはpcと 同 じ(SJISをurlencode()) SoftBankはUTF-8をurlencode() iphoneは 改 行 のみurlencode() この 辺 も 情 報 は 少 ない また 基 本 的 にライブラ リ 等 も 無 く 自 作 するしかない 14
mailtoリンク 仕 様 が 各 キャリアで 異 なる docomoとauはpcと 同 じ(SJISをurlencode()) SoftBankはUTF-8をurlencode() iphoneは 改 行 のみurlencode() この 辺 も 情 報 は 少 ない また 基 本 的 にライブラ リ 等 も 無 く 自 作 するしかない 15
mailtoリンク 仕 様 が 各 キャリアで 異 なる docomoとauはpcと 同 じ(SJISをurlencode()) SoftBankはUTF-8をurlencode() iphoneは 改 行 のみurlencode() この 辺 も 情 報 は 少 ない また 基 本 的 にライブラ リ 等 も 無 く 自 作 するしかない 16
mailtoリンク 仕 様 が 各 キャリアで 異 なる docomoとauはpcと 同 じ(SJISをurlencode()) SoftBankはUTF-8をurlencode() iphoneは 改 行 のみurlencode() この 辺 も 情 報 は 少 ない また 基 本 的 にライブラ リ 等 も 無 く 自 作 するしかない 17
mailtoリンク 仕 様 が 各 キャリアで 異 なる docomoとauはpcと 同 じ(SJISをurlencode()) SoftBankはUTF-8をurlencode() iphoneは 改 行 のみurlencode() この 辺 も 情 報 は 少 ない また 基 本 的 にライブラ リ 等 も 無 く 自 作 するしかない 18
mailtoリンク 仕 様 が 各 キャリアで 異 なる docomoとauはpcと 同 じ(SJISをurlencode()) SoftBankはUTF-8をurlencode() iphoneは 改 行 のみurlencode() この 辺 も 情 報 は 少 ない また 基 本 的 にライブラ リ 等 も 無 く 自 作 するしかない 19
画 像 SoftBankの 場 合 高 解 像 度 携 帯 で 閲 覧 した 場 合 に 画 面 レイアウトが 想 定 外 になる 場 合 がある SoftBankのみ 画 像 はリアルサイズで 表 示 される docomoとauはqvgaサイズに 合 わせられる 高 解 像 度 携 帯 向 けの 画 像 を 用 意 するか 引 き 延 ばす 仕 組 みが 必 要 この 辺 も 基 本 的 にライブラリ 等 も 無 く 自 作 する しかない 20
画 像 SoftBankの 場 合 高 解 像 度 携 帯 で 閲 覧 した 場 合 に 画 面 レイアウトが 想 定 外 になる 場 合 がある SoftBankのみ 画 像 はリアルサイズで 表 示 される docomoとauはqvgaサイズに 合 わせられる 高 解 像 度 携 帯 向 けの 画 像 を 用 意 するか 引 き 延 ばす 仕 組 みが 必 要 この 辺 も 基 本 的 にライブラリ 等 も 無 く 自 作 する しかない 21
画 像 SoftBankの 場 合 高 解 像 度 携 帯 で 閲 覧 した 場 合 に 画 面 レイアウトが 想 定 外 になる 場 合 がある SoftBankのみ 画 像 はリアルサイズで 表 示 される docomoとauはqvgaサイズに 合 わせられる 高 解 像 度 携 帯 向 けの 画 像 を 用 意 するか 引 き 延 ばす 仕 組 みが 必 要 この 辺 も 基 本 的 にライブラリ 等 も 無 く 自 作 する しかない 22
画 像 SoftBankの 場 合 高 解 像 度 携 帯 で 閲 覧 した 場 合 に 画 面 レイアウトが 想 定 外 になる 場 合 がある SoftBankのみ 画 像 はリアルサイズで 表 示 される docomoとauはqvgaサイズに 合 わせられる 高 解 像 度 携 帯 向 けの 画 像 を 用 意 するか 引 き 延 ばす 仕 組 みが 必 要 この 辺 も 基 本 的 にライブラリ 等 も 無 く 自 作 する しかない 23
画 像 SoftBankの 場 合 高 解 像 度 携 帯 で 閲 覧 した 場 合 に 画 面 レイアウトが 想 定 外 になる 場 合 がある SoftBankのみ 画 像 はリアルサイズで 表 示 される docomoとauはqvgaサイズに 合 わせられる 高 解 像 度 携 帯 向 けの 画 像 を 用 意 するか 引 き 延 ばす 仕 組 みが 必 要 この 辺 も 基 本 的 にライブラリ 等 も 無 く 自 作 する しかない 24
キャリア 判 別 と 絵 文 字 の 情 報 ライブラリは 存 在 するが その 他 のケアはほとんどが 自 作 をするしかない 現 状 25
Ktai Libraryなら これらの 対 応 を 上 書 きインストールで 簡 単 にできる!! 26
しかし 27
28
Ktai Libraryは いろんな 機 種 で 既 に 動 作 済 み 29
自 作 の 仕 組 みだと ほかのキャリア 機 種 で きちんと 動 作 できるのか なかなか 分 かりにくい 30
MASA-P 的 Ktai Library 存 在 理 由 簡 単 インストール 他 機 種 チェックの 簡 略 化 売 名 行 為 31
MASA-P 的 Ktai Library 存 在 理 由 簡 単 インストール 他 機 種 チェックの 簡 略 化 売 名 行 為 32
MASA-P 的 Ktai Library 存 在 理 由 簡 単 インストール 他 機 種 チェックの 簡 略 化 売 名 行 為 33
MASA-P 的 Ktai Library 存 在 理 由 簡 単 インストール 他 機 種 チェックの 簡 略 化 売 名 行 為 34
Ktai Libraryは 皆 に 使 われれば 使 われるほど 価 値 が 上 がります 是 非 ガンガン 使 ってくださいm( )m 35
そしてバグ 報 告 もお 願 いします http://www.ktailibrary.org/ 36
Ktai Library の 基 本 的 な 使 い 方 37
Ktai Library の 基 本 的 な 使 い 方 CakePHP(1.3)のインストール オールグリーンにする(お 約 束 ) Ktai Libraryのインストール github(http://github.com/masa-p/ktailibrary)から アーカイブ 一 式 を 入 手 解 凍 したものをCakeに 上 書 きインストール 38
Ktai Library の 基 本 的 な 使 い 方 絵 文 字 をPCでも 閲 覧 したい(つまりPCを 許 可 する)のであれば TypePad 社 が 公 開 している 画 像 絵 文 字 をDLして app/webroot/img に emoticonsフォルダごと 設 置 する http://start.typepad.jp/typecast/ AU SoftBankでdocomoにしか 存 在 しない 絵 文 字 がいくつかあるため 結 局 は 必 須 39
Ktai Library の 基 本 的 な 使 い 方 コントローラ 基 本 的 には$componentsと$helpersに Ktai を 登 録 することで KtaiLibraryのすべての 機 能 を 使 用 することができる 逆 に コンポーネントだけ ヘルパーだけという 使 い 方 は 探 し 出 す 方 が 難 しい 40
Ktai Library の 基 本 的 な 使 い 方 コントローラ 基 本 的 には$componentsと$helpersに Ktai を 登 録 することで KtaiLibraryのすべての 機 能 を 使 用 することができる 逆 に コンポーネントだけ ヘルパーだけという 使 い 方 は 探 し 出 す 方 が 難 しい 41
Ktai Library の 基 本 的 な 使 い 方 コントローラ 基 本 的 には$componentsと$helpersに Ktai を 登 録 することで KtaiLibraryのすべての 機 能 を 使 用 することができる 逆 に コンポーネントだけ ヘルパーだけという 使 い 方 は 探 し 出 す 方 が 難 しい よほどのことがない 限 り 両 方 に 登 録 しよう 42
Ktai Library の 基 本 的 な 使 い 方 コントローラ App::import( Controller, KtaiApp); class MypagesController extends KtaiAppController { var $name = Mypages ; var $uses = array(); var $components = array( Ktai ); var $helpers = array( ktai ); var $ktai = array( input_encoding => UTF-8, ); output_encoding => UTF-8, use_img_emoji => true, 43
Ktai Library の 基 本 的 な 使 い 方 コントローラ( 続 き) function index(){ } } // 必 要 な 処 理 // 44
Ktai Library の 基 本 的 な 使 い 方 レイアウト <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <?php if($ktai->is_iphone()){?><meta name="viewport" content="width=260"><?php }?> <title><?php echo $title_for_layout;?></title> </head> 45
Ktai Library の 基 本 的 な 使 い 方 レイアウト( 続 き) <body> <?php if(!$ktai->is_ktai()){?><div style="width: 240px;"><?php }?> <?php echo $content_for_layout;?> <div align="center"> <hr width="90%" size="1" color="#333333" noshade> (C)2009-2010 <a href="http://www.ecworks.jp/">ecworks</a> </div> <?php if(!$ktai->is_ktai()){?></div><?php }?> </body> </html> 46
Ktai Library の 基 本 的 な 使 い 方 ビュー <?php $ktai->emoji(0xe63e);?> 携 帯 ライブラリの<?php $ktai->emoji( 0xe63e);?><br /> <?php $ktai->emoji(0xe63e);?> 世 界 にようこそ!<?php $ktai->emoji( 0xe63e);?> 47
Ktai Library の 基 本 的 な 使 い 方 たったこれだけ! 48
Ktai Library の 基 本 的 な 使 い 方 パラメータやメソッドなど 詳 しくはアーカイブに 付 属 のマニュアルをご 覧 いただくか PHPで 作 る 携 帯 サイト デベロッパーズ ガイド( 右 写 真 )の 第 3 章 を ご 覧 ください 49
Ktai Library の 基 本 的 な 使 い 方 2: 実 践 Ktai Library にて 実 際 に 作 業 してもらいます 50
携 帯 サイトを 作 る 場 合 の 注 意 点 51
携 帯 サイトを 作 る 場 合 の 注 意 点 文 字 エンコーディング XHTMLについて 普 通 のサイトならXHTML/UTF-8でOK (3G 携 帯 のほとんどはUTF-8で 問 題 ない) XHTMLならCSSが 使 える しかし AUでSSLを 使 う 場 合 だけ SJISでない と 不 具 合 が 生 じる 52
携 帯 サイトを 作 る 場 合 の 注 意 点 セッション 周 り 独 自 にsession_start()してはだめ! ( 何 らかの 表 示 が 始 まった 時 点 で 自 動 的 に 開 始 されてしまうので 注 意 ) セッションコンポーネントのブラックホール AUは <fieldset> と <div style= display: none > で 囲 まれたhiddenを 反 映 しないため ブラックホールに 落 ちる strip_tags()を 使 うと 幸 せになれる 53
まとめ 54
まとめ Ktai Library を 上 書 きインストールする だけで 携 帯 サイトに 必 要 な 機 能 が 揃 う しかし 本 当 に 重 要 なのは いろんな 機 種 で 既 に 動 作 している 点 基 本 的 に componentsとhelpersに Ktai 登 録 で 何 でも 出 来 るようになっている AUでSSLを 使 う 場 合 はSJISで それ 以 外 は UTF-8でOK!! 55
ご 静 聴 ありがとうございました 56