ECWorks Blog

ECWorks Blog

CakePHPを中心としたサイト開発情報をメインに公開。新しもの好きなので時々製品レポートなんかも。

Ktai Library for CakePHP

icon_ktai携帯サイトを構築する場合の、各キャリア対応をサポートするライブラリと、それをCakePHPで利用するためのヘルパー・コンポーネントを公開いたします。ライブラリ本体はCakePHPだけでなく他の環境でも使用することが出来ます。

【お知らせ】

ktailibrary.orgは諸事情ありまして閉鎖しました。

はじめに

携帯サイトを作成する場合、一般的には各キャリア向けにHTMLを作成し、それを振り分けして表示する仕組みを採用していたと思いますが、最近の携帯では、いくつかの仕様を除いてほぼ同じHTMLを閲覧することが可能になってきています。そこで、その「いくつかの仕様」についてを解決できるような仕組みができないものか…という経緯から、本ライブラリが生まれました。
また、本ライブラリは個人的に作成していたPHPライブラリがベースになっているのですが、CakePHPで使えるようにすることで「携帯サイトの高速開発」が実現できればと思い、駆動ヘルパー・コンポーネントも添付することにしました。逆に言えば、ライブラリ本体は他のPHPスクリプトあるいはフレームワークでも使えるかもしれません。応用が出来るような構成になっていますので、他でも活躍してくれれば幸いです。

概要

本ライブラリは、携帯サイトを構築する上で必要ないくつかの機能を提供いたします。
とりあえず、現在(Ver0.4.0)は次のようなことが出来ます。

  • 各キャリア・機種で同じフォントサイズに調整 [New!]
  • 絵文字キャッシュ
  • ライブラリをサブクラス化
  • IPによるキャリア判定
  • Google Static Maps API支援
  • convert_emoji()のアルゴリズム見直しによる高速化
  • インラインスタイルシート支援機能
  • XMLタグ対応
  • URL処理を追加(コールバックによる付け替え可能)
  • セッション対応
  • セッション時のリダイレクト対応
  • QRコード作成
  • 携帯からuidを入手
  • 自動変換処理関連でかな変換オプションを追加
  • UTF-8対応
  • 文字コード変換(UTF-8→SJIS、等)
  • 機種情報(解像度などを調査)
  • 高解像度携帯向けに画像を引き延ばし
  • mailtoリンク作成の支援機能(件名や本文の挿入)
  • PHS(一部)対応
  • キャリア判別(携帯/非携帯の判別・各キャリア判別)
  • メールアドレスからキャリア判別
  • 絵文字の呼び出し(各キャリアに適した絵文字フォーマットを生成)
  • ページを丸ごと絵文字変換
  • 絵文字の出力をバイナリコードか数値表現かを選択可能
  • accesskey付きリンクの作成(絵文字の自動挿入)[ヘルパー利用のみ]
  • PC等でTypePadで使用されている絵文字画像の表示サポート
  • インラインスタイルシートの挿入

動作環境

ライブラリ単体については、PHP4/5であれば動作可能です。
ヘルパー・コンポーネントについては、CakePHP1.2/1.3対応です。開発はCakePHP1.3.0にて行っております。

対応端末

対応携帯端末については、日本の各社3G携帯(docomo/au/softbank/emobile)およびiPhone、PHSを想定しています。それ以前の携帯はうまく動作しない可能性があります。
auのHDML対応端末は対応しておりません。
また、J-PHONE / Vodafone時代の携帯、Softbank初期(gif画像の表示できないタイプ)は絵文字の一部または全部が表示されない場合があります。
このため、公式サイトでこのライブラリをメイン使用するのは難しいかと思います(勿論有用な機能はあります)。どちらかというと勝手サイト向けです。

iPhoneを除くスマートフォン系端末・海外携帯には対応しておりません。PC扱いとなりますのでお気をつけください。また、PCブラウザ機能を用いてのアクセスも、PC扱いとなる場合があります。

インストール方法

インストールは、アーカイブをダウンロードしていただき解凍して出来たイメージをCakePHPに丸ごとコピーするだけです。
なお使いたい機能により、別途準備や設定値の変更が必要になる場合があります。

また、TypePadで使用されている絵文字画像を使用する場合は、別途ダウンロードし、app/webroot/img内にファイルイメージをコピーしてください。

利用方法

場合によって、いくつか設定や準備が必要になりますが、基本的には初期値で動作いたします。
設定変更は、コントローラ内に連想配列で設定値を用意していただくか、Configureクラスでヘルパーに設定値を送ることで行えます。

詳しくは、添付のドキュメントをお読みください。

絵文字はiMODE絵文字を使用してください。その他のキャリアが提供している絵文字は使用不可能ですのでお気をつけください(HTML内も変換はされません)。
絵文字入力に関しては、HTML内については直接コード入力する以外に、数字指定(&#xxxxx;)も識別いたします(オプションで有効にする必要があります)。また、絵文字挿入関数は、直接文字を指定する以外に、文字コードを数値入力していただくことも出来ます。

なお、利用例・チュートリアルについては下記記事をご覧ください。

▼【KtaiLibrary】各キャリア携帯サイトを世界一簡単に作ってみる
http://blog.ecworks.jp/archives/635

注意事項

SJIS / UTF-8以外の文字コードで生成されたviewテンプレートを変換する場合、AU携帯で文字化けするようです(EUC→SJISで再現しました)。これは本ライブラリ由来のものではなくmb_convert_encoding()が影響しているようですが、ご使用環境によってうまく利用できない場合がございますのでご注意ください。

PHS絵文字には対応しておりません。PCと同様の絵文字(代替テキストまたは画像絵文字)が表示されます。

ご利用条件

GPLライセンス規約に基づき、営利・非営利問わず自由にご利用可能です。
なお、メディア等への掲載については別途ご相談いただけますと幸いです。

ダウンロード

【プラグイン版】
CakePHP2系でのご利用にはKtaiLibraryのCakePHPプラグイン「CakeKtaiLibrary」をお使いください。

▼github : MASA-P / cake_ktai_library
http://github.com/MASA-P/cake_ktai_library

【開発版(ktai-dev)】
Ktai Library開発環境は、githubより入手が可能です。

▼github : MASA-P / ktai-dev
http://github.com/MASA-P/ktai-dev

※コード修正を随時行いpushしていきますが、Ktai Libraryの正式リリースでないことをご了承ください
なお、正式リリースバージョンと同一の開発環境はtagで入手できます

【最新版】
Ver 0.4.2 : githubにて公開

【以前のバージョン】
Ver 0.4.1 : githubにて公開
Ver 0.4.0 : githubにて公開
Ver 0.3.2 : githubにて公開
Ver 0.3.1 : githubにて公開 (公開されていますが、ktaiヘルパー等に問題があります)
Ver 0.3.0 : githubにて公開
Ver 0.2.3 : githubにて公開
Ver 0.2.2 : githubにて公開 (公開されていますが、リダイレクト処理に問題があります)
Ver 0.2.1 : githubにて公開
Ver 0.2.0 : githubにて公開
Ver 0.1.1 : ktai-0.1.1.zip
Ver 0.1.0 : ktai-0.1.0.zip
Ver 0.0.2 : ktai-0.0.2.zip
Ver 0.0.1 : ktai-0.0.1.zip

導入事例

相性占い.net (ひでまん様) [New!]
無料で相性占いができるサイトですが、占い師が300名以上登録されていて個別相談の依頼が可能。携帯サイト部分でKtai Libraryが使われているそうです。

Ping-tモバイル (nakagawa様)
CCNA(Cisco Certified Network Associate)、CCNP(Cisco Certified Network Professional)、LPIC(Linux Professional Institute Certification)各試験を学習できるサイト「Ping-t」のモバイルサイト。

エイゴノイド (yoshidax様)
携帯で英単語を学習するとキャラが成長していく!
学習方法も簡単で、手軽に英語が学べます。

テレビで見たよ (あつ様)
テレビで紹介された商品をまとめて紹介。もちろん購入もできるというサイト。
同じURLで携帯でも閲覧可能です。

こづかいつけーる for web (あんじー様)
簡単に登録できるこづかい帳。携帯からでも登録が可能です。

Pit-FM Mobile (Pit-FM様)
F1レースの情報をいち早くお届け! 毎レース決勝日はF1 PIT STOP CAFEにて観戦イベントを開催してます。
製作は私ことMASA-Pがさせていただいております(笑)。携帯サイト専用です。

※「Ktai Library」で製作したサイトを是非ご紹介ください。




82 Comments

  1. MASA-Pさん、大変ご無沙汰しております。
    エクスギアの蓑浦です。

    KtaiLibraryを使わせて頂いて簡易GPS検索プラグインを作成してみました。
    ソースはイマイチですがご勘弁くださいませ。
    アイデアが採用されて今後KtaiLibraryのプラグイン化などの際に検討して頂ければ本望です。

    またどこかの勉強会等でお会いできることを楽しみにしております。
    (と言っても、私の都合がなかなかつかないのですが。。)

  2. ありがとうございます!
    GPS関連の機能はなかなか手をつけられなかった部分でしたので、大変にすばらしいです。
    Ktai Libraryの次のバージョンはプラグイン化しますので(すでに開発環境では動作しています)その際に是非マージさせてください。

  3. まさぴーさん、いつもお世話になります。
    0.3.2をdlさせて頂きました。

    readme.txt の 218行目あたり [ 添付されているapp_controller.php.ktaiを・・・]
    ではなく、ktai_app_controller.php だと思います。

    あと、まさぴーさんの書かれたcakephp辞典も購入して読破させて頂きました!
    素敵な本でした。

    これからも応援してますね!

  4. ありがとうございます!

    ちなみにktai_app_controller.phpの説明の件は、確かにその通りで、近日発表予定のバージョン0.4.0では修正予定です(ちなみに0.3.0以前はそのようなファイル名になっていました)。

    バグ情報は http://www.ktailibrary.org/ にて公開していますので、そちらのほうも是非ご参照ください。

  5. Ktai Library 0.4.0を使用しています。
    AUにて絵文字が出力されなかったので、次の部分を修正後、出力されるようになりました。

    lib3gk_emoji.php line 2325
    【修正前】
    $ccode = $this->carriers[$options[‘input_carrier’]];

    【修正後】
    $ccode = $this->carriers[$options[‘output_carrier’]];

    この修正で正しければ、取り込んでもらえればと思います。

  6. 何故AUが表示できていないのかは分からないのですが、ご指摘いただいたものは修正方法としては適切ではないです。$ccodeからは入力された文字列から対象絵文字を抜き出すための正規表現を入手しますので、input_carrierでないと意図した動作ではありません。
    保持している情報が入力時情報と出力時情報とで混じってしまっている可能性がありますので、解析してみます。
    正式回答までしばらくお待ちください。

  7. 検証してみましたが、ソースコード・アルゴリズムは問題ありませんでした。

    元のデータをauの絵文字にしていませんか?
    現状0.xではdocomo→auへの絵文字変換は出来ますが、逆方向は出来ません。

  8. お世話になります。

    「Ktai Library」を有り難く使わせて頂いております。

    >※「Ktai Library」で製作したサイトを是非ご紹介ください。

    ここで良いか分かりませんが、こちらのサイトを制作致しました。
    http://m.ping-t.com/

    登録ユーザ5万人のCCNA/CCNP、LPIC学習サイト「Ping-t」(URL:http://ping-t.com/)のモバイル版です。
    携帯でユーザ登録や問題演習が可能です。

    以上です。今後とも宜しくお願い致します。

  9. 紹介欄に追加させていただきました。
    ありがとうございます!

  10. お世話になっております。
    Ktai Library 0.4.1を利用させて頂いております。

    現在、Webブラウザから絵文字を入力登録出来る仕掛けを作成中です。
    入力画面では絵文字は、iモードのバイナリで入力させて
    確認画面で、
    data[‘Contents’][‘text’]; ?>
    convert_emoji($str); ?>

    のような記述して、アイコン画像で絵文字を確認出来るようにしています。
    文字コードはUTF-8です。

    基本動作的には問題ないのですが、「富士山」から「ショック」までの絵文字が変換されずに
    全てバイナリのまま表示されてしまいます。

    どこを修正したら良いのか解らず対応策をお教えいただけないでしょうか?

    お忙しいところ恐縮ですが、ご返事お待ちしております。

    あと、バグ報告です。
    $sendemail = info@hogehoge.jp;
    mail.mailto(‘お問い合わせ’, $sendemail, ‘携帯サイトからの問い合わせ’); ?>

    と記述すると、「mail.お問い合わせお問い合わせ」と二重に表示されてしまいます。

    lib3gk_tools.php

    285行目付近
    $str = ‘‘.$title.’‘;

    if($display){
    echo $str;
    }


    if($display){
    $str = ‘‘.$title.’‘;
    }

    としてとりあえず、回避していますが、次の修正時に対応して頂けると助かります。
    ※修正方法としては正しくないと思いますが……。

    以上、よろしくお願いいたします。

  11. すいません、自動的にエスケープされないのですね

    コードを再記入します。

    <?php $str = $this->data[‘Contents’][‘text’]; ?>
    <?php $ktai->convert_emoji($str); ?>
    <?php echo nl2br($str); ?>

    メールアドレスの二重投稿は
    $sendemail = info@hogehoge.jp;
    <?php echo $ktai->mailto(‘お問い合わせ’, $sendemail, ‘携帯サイトからの問い合わせ’); ?>

    です。

  12. すみません、先週今週が大変に多忙でして、お返事がなかなか出来ませんでした。
    現象について確認してみますので、少々お待ちいただけますでしょうか。

    ところで、この現象が確認されたときの端末(キャリア)はdocomoでしょうか?
    もしau、softbankですと、convert_emoji()が対応していないため文字化けの可能性があります。
    もしdocomoであるのなら、なんバイト目かの文字コードが影響しているような、そんな動きに見えます。

  13. ご返事ありがとうございます。

    すいません、説明が悪かったのかもしれませんが、
    iモード用バイナリーの絵文字をPCブラウザで表示するのに
    convert_emoji()で変換させると「富士山」から「ショック」までの絵文字が
    アイコン画像に変換されずに、バイナリのまま出力されます。
    ざっと一通り確認した限り、それ以外の絵文字は、アイコン画像に変換されます。

    au、softbankの絵文字変換は、色々な制約や問題があり、
    HTML_Emoji(http://libemoji.com/html_emoji)に
    出力時に変換させているのでKtaiLibraryに問題あるかどうか検証できていません。
    すいません。

    ちなみに、問題がある部分の絵文字は、作成したWebブラウザから絵文字を入力機能で
    作成した画面を、docomo、au、softbankで確認しましたが問題なく変換されていますので
    入力しているiモード用バイナリーの絵文字に関しては問題ないと思われます。

    以上、よろしくお願いいたします。

  14. お世話になります。
    現在CakePHP1.3.5でKtai Library 0.4.1を利用させて頂いております。

    やりたいことは、cakeErrorを使用してオリジナルのエラー画面を表示したいのですが、ktaiコンポーネントのshutdownメソッドが呼ばれず、mb_convert_kanaが実行されません。

    構成としては以下のようになっております。

    ・コントローラー
    App::import(‘Controller’, ‘KtaiApp’);
    class XxxsController extends KtaiAppController {

    var $name = ‘Xxx’;
    var $uses = array();
    var $components = array(‘Ktai’);
    var $helpers = array(‘Ktai’);

    var $ktai = array(
    ‘output_encoding’ => ‘SJIS-win’,
    ‘use_binary_emoji’ => true,
    ‘output_auto_convert_emoji’ => true,
    ‘output_auto_encoding’ => true,
    ‘output_convert_kana’ => ‘s’,
    );

    function test() {
    $this->cakeError(‘errorSystem’, array(‘message’ => ’システムエラー’));
    }
    }

    ・app_error.php
    class AppError extends ErrorHandler {
    function errorSystem($params) {
    $this->controller->helpers[] = ‘Ktai’;
    $this->controller->set(‘message’, $params[‘message’]);
    $this->_outputMessage(‘error_system’);
    }
    }

    Cakeのコンポーネント登録時の問題だと思うのですが、もしお分かりになりましたら教えていただきたいです。

    宜しくお願い致します。

  15. お問い合わせいただきましてありがとうございます。

    error時にshutdown()が呼ばれない件ですが、これはCakeErrorControllerはDispacherで呼び出されるものではなく、エラーを受け取った際に動的に生成されるためと思われます。このため、Dispatcher内で通常行っている処理がerror.phpでは__construct()内に記述されています。そして__destruct()等は用意されておらず、コンポーネント内のshutdown()メソッドが呼ばれていないためauto_convert_emoji機能が働いていない状況です。

    これに関しては対応がかなり難しいと思います。auto_convertを用いないようなビューファイルを実現するのが確実と思いますが、別途エラー時に呼び出す専用ヘルパーを作り、そのafterRender内でoutputを取り出してconvert_emoji()を適用し、outputに戻すようなやり方が出来るかもしれません(未確認なので実際に出来るかどうかはちょっと分からないです)。

  16. ディズニーモバイルのメールアドレス判定がPCになります。
    判定出来るようにできますか??

    http://ja.wikipedia.org/wiki/%E3%83%87%E3%82%A3%E3%82%BA%E3%83%8B%E3%83%BC%E3%83%BB%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB

  17.  こんにちは。Ktai Liblary、利用させて頂いております。おかげさまで、携帯電話向けサイト制作の負担がかなり軽減されました。

     ところで、ヘルパーのQRコード作成関数(get_qrcode())で生成されるimgタグのsrc部分ですが、chldパラメータの前に&が付かない為、$optionsで指定するmarginとecが反映されていない様です。

     vendors/ecw/lib3gk_html.phpの391行目、

      $url .= ‘chld=’.$ec;

      $url .= ‘&chld=’.$ec;

    に修正してmarginとecが反映される事を確認しております。

     なお、確認したKtai Kiblaryのバージョンは0.4.1です。

  18. >bassmanさん
    お返事が遅くなってしまい申し訳ございません。
    ディズニーモバイルの件、バージョン0.4.2対応をいたしました。

    >ohshrsさん
    不具合報告ありがとうございます。
    バージョン0.4.2にて対応いたしました。

  19. はじめまして。お世話になります。
    現在構築中のサイトにて携帯ライブラリを使用させて頂いております。

    使用させて頂く中で気づいた点が1点ありますので、ご報告させて頂きます。

    controller内でredirectをしたところ、正常に動作しない場合があったので調査してみたところ、
    enable_ktai_session=>true時にroute定義にてpass=>array()を使った定義をしていると、おかしくなるようでした。

    KtaiAppController内の__redirect_url内にて $url = Router::parse($url) した後にredirectに$urlを渡されているのですが、
    pass指定のあるrouteだとparseした$urlの’pass’キーの配列内に要素が入るため、その後のredirect内のRouter::url処理でおかしなurlが生成されてしまうようです。

    なんだか文章で書くとよくわからないので以下が例です。

    ===== 例 =====

    //routes.php
    Router::connect(‘/hoge/:id/fuga’, array(
    ‘controller’ => ‘hoge’,
    ‘action’ => ‘fuga’,
    ), array(
    ‘pass’ => array(‘id’),
    ));

    //hoge_controller.php
    $this->redirect(‘/hoge/123/fuga’);

    //とばされてしまう先
    /hoge/fuga/id~123/pass~Array?csid=foobar

    ==============

    #あと確認はしていないのですが、おそらくnamedのパラメータが混じった場合も同様にnamed~ArrayといったURLになってしまうのではないかと考えます。

    とりあえず現在はRouter::parseしたurlから’pass’キー要素を削除することで対処しています。

    以上、御確認・ご対応いただければ幸いです。

  20. ご報告ありがとうございます。
    早速調査をして反映したいと思います。
    (ちょっと直近で仕事の方が忙しく時間をとれないため、少しお時間をいただくかもしれません)

  21. お世話になります。Akikumoと申します。
    Android端末の時に、絵文字が□になってしまう現象が取れず悩んでいたのですが、
    下記の1文追加で、iPhone/PCと同じような状態になりました。
    多分UAにキャリアを判定できるものが含まれていないAndroidだと起きる現象ではないかと。。。

    0.40でも0.42でも再現、及び対策の有効性を確認しています。
    もし宜しければ次版で取り込んでいただければと。

    — a/vendors/ecw/lib3gk_emoji.php
    +++ b/vendors/ecw/lib3gk_emoji.php
    @@ -130,6 +130,7 @@ class Lib3gkEmoji {
    KTAI_CARRIER_IPHONE => 0,
    KTAI_CARRIER_PHS => 1,
    KTAI_CARRIER_CLAWLER => 0,
    + KTAI_CARRIER_ANDROID => 0,
    );

  22. ありがとうございます!
    調査してバグフィックスしたいと思います。
    たぶん上記のような修正方法でいけるのではないかと思っています。

  23. こんにちわ。いつもお世話になります。
    相性占い.net を ktailibraryで作成させて頂きました。
    http://www.aiura.net

    PCからだとPC用、
    携帯からだと携帯用デザインが表示されます。

    素晴らしいライブラリ、いつもありがとうございます^^

  24. >ひでまんさん

    放置してしまってすみませんm(__)m。
    紹介欄に掲載しました。
    いつもありがとうございます!

Leave a Response

キャプチャ画像
*