Posts tagged age

CakePHP 携帯専用サイトを作成する

6

CakePHP で携帯用のページを作成する際に CakePHP 携帯用ビューを表示する | Shin x blog のページが大変参考になります。

しかし、/m/ のような URL ではなく携帯専用サイトにしたかったので下記のような方法で実装しました。なお、PC でアクセスしたときには /pc.html という静的なページを表示するようにしてあります。
また、PC、携帯の振り分けはユーザエージェントで行っています。

携帯用コンポーネント

app/controller/component/mobile.php を作成し、PEAR の Net_UserAgent_Mobile を使用しています。このコンポーネントでユーザエージェントを判定して PC だったら pc.html へリダイレクトします。

PEAR の Net_UserAgent_Mobile はサーバにインストールしてもいいのですが、今回は app/vendors/ ディレクトリに入れました。また、app/vendors/ に include_path を通すために、CakePHPガイドブック を参考に include_path_vendors.php を作成しました。

app/controller/component/mobile.php

vendor("include_path_vendors");
vendor("Net/UserAgent/Mobile");
class MobileComponent extends Object {
    function startup(&$controller) {
        $this->controller = $controller;
        $mobile = &Net_UserAgent_Mobile::factory();
        if ($mobile->isNonMobile()) {
            $this->controller->redirect("/pc.html");
        }
    }
}

今回は簡単に PC か携帯でアクセス振り分けているだけですが、画面の大きさやキャリアなどによって色々な処理の振り分けが考えられます。

携帯用ヘルパー

app/views/helper/mobile.php を作成して HTML 出力時に文字コードを Shift-JIS へ変換します。ヘルパーの afterRender メソッドを使用しています。

class MobileHelper extends Helper {
    function afterRender() {
        $out = ob_get_clean();
        $out = mb_convert_kana($out, "rak", "UTF-8");
        $out = mb_convert_encoding($out, "SJIS", "UTF-8");
        ob_start();
        echo $out;
    }
}

コントローラで携帯用コンポーネント、ヘルパーを使用する

app/app_controller.php で携帯用コンポーネントと携帯用ヘルパーを使用します。

var $components = array('Mobile');
var $helpers = array('Mobile');

app_controller.php で設定しておけば全てのコントローラで共通に読み込むので各コントローラにその都度書く必要がなくなります。DB の管理画面など PC 用のコントローラが必要な場合は各コントローラに書いた方がいいでしょう。今回は完全に携帯用にしています。PC 用の管理画面もあるのですが、サブドメインを変えて app ディレクトリも違うものを使用しています。

また、各コントローラ内で設定するタイトルの文字コードを変換しないといけないので、app_controller.php の beforeRenderメソッドでタイトルの文字コードを変換します。

function beforeRender() {
    $this->pageTitle = mb_convert_encoding($this->pageTitle, "SJIS", "UTF-8");
    parent::beforeRender();
}

以上で携帯専用のサイトが CakePHP で作成できました。

コントローラの afterFilter で文字コードを変換する方法

コントローラの afterFilter で文字コードを変換することもできます。

app/controller.php

function afterFilter() {
    parent::afterFilter();
    $out = ob_get_clean();
    $out = mb_convert_kana($out, "rak", "UTF-8");
    $out = mb_convert_encoding($out, "SJIS", "UTF-8");
    ob_start();
    echo $out;
}

この場合は、beforeRender でのタイトルの文字コード変換の処理が必要ないのと、携帯用ヘルパーは必要ありません。
PC 用のコントローラも作りたいときは携帯用コンポーネント、携帯用ヘルパーを使用する方法がよいかと思います。

12月に読んだ本

0

先月、宣言(11月に読んだ本 )したように少し小説を読みました。
2冊のみですが、どちらも文庫本で700ページ前後なので読み応えはありました。「幻夜」は「白夜行 」の続編のようで白夜行に迫る面白さで読むのが止まりませんでした。

最悪」は奥田英郎の最初の頃の作品なので、イラブ先生シリーズやサウスバウンドなどにはかないませんが、引き込まれる作品でした。

幻夜

幻夜

最悪 (講談社文庫)

最悪 (講談社文庫)

あなたが年収1000万円稼げない理由。―給料氷河期を勝ち残るキャリア・デザイン (幻冬舎新書 た 3-1)

あなたが年収1000万円稼げない理由。―給料氷河期を勝ち残るキャリア・デザイン (幻冬舎新書 た 3-1)

【超】WORK HACKS!

【超】WORK HACKS!

起業家2.0―次世代ベンチャー9組の物語

起業家2.0―次世代ベンチャー9組の物語

効率が10倍アップする新・知的生産術―自分をグーグル化する方法

効率が10倍アップする新・知的生産術―自分をグーグル化する方法
勝間さんの本はどれもはずれがなくていいですね。読んでいるだけでやる気が出てきます。(それだけで実践しないと意味ないですが)巻末のお勧め本がかなりいいです。これからの読書の参考にしていきます。早速、今月は「非常識な成功法則―お金と自由をもたらす8つの習慣」をリストを参考に読んでみました。

読みならがメモしたことをいくつかリストアップしておきます。

  • 情報こそが現代の通貨である
  • 資本主義の本質は賢くない人から賢い人へお金が移動する仕組み
  • 情報の発信者になれば情報がラクに収集できるようになる
  • 自分が得意なことに集中する
  • Not To Do List を作成する
  • まずは見返りを求めずに情報を発信し続ける

金融商品にだまされるな!

金融商品にだまされるな!

金持ちの床屋さん

金持ちの床屋さん

非常識な成功法則―お金と自由をもたらす8つの習慣

非常識な成功法則―お金と自由をもたらす8つの習慣

レバレッジ人脈術

レバレッジ人脈術

チーズはどこへ消えた?

チーズはどこへ消えた?

ザ・マインドマップ

ザ・マインドマップ

WEB+DB PRESS Vol.42

WEB+DB PRESS Vol.42

人を出し抜く速読術―要領よく生きてるヤツは知っている (凄ビジ・シリーズ 3)

人を出し抜く速読術―要領よく生きてるヤツは知っている (凄ビジ・シリーズ 3)

キラー・リーディング 「仕事脳」が劇的に回り出す最強の読書法 (JBシリーズ)

キラー・リーディング  「仕事脳」が劇的に回り出す最強の読書法 (JBシリーズ)

CakePHP JQuery ヘルパー

3

JQuery helper for CakePHP ( PQuery port ) at NGCoders
CakePHP から JQuery を簡単に使うことができます。

正確には PQuery ヘルパーかもしれません。PQuery は JQuery を PHP から簡単に使用するライブラリで PQuery ヘルパーと同じ開発者が開発しています。
参考:PQuery – PHP and JQuery at NGCoders

インストール

JQuery helper for CakePHP ( PQuery port ) at NGCoders から JQuery ヘルパーをダウンロードし、解凍した pquery.php を /app/views/helpers にコピーします。
そのほかに jquery.js ファイルも必要になります。こちらもダウンロードして /app/webroot/js にコピーします。

コントローラ

Pquery ヘルパーと Javascritp ヘルパーを使用します
var $helpers = array('Pquery', 'Javascript');

ビュー

jquery.js の読み込み
<?php echo $javascript->link('jquery.js'); ?>

使用例

トグルボタン

<div id='msg'>Message...</div>
<?php echo $pquery->link_to_function('toggle', $pquery->toggle('#msg'));?>

フォームで送信された内容により HTML を更新
入力したテキストを /controller/action/ に GET で送信し、id=idtoupdate に受け取った HTML を表示する

<?php echo $pquery->form_remote_tag(array('url'=>'/controller/action/','update'=>'#idtoupdate'));?>
<input type='text' name='field' />
<input type='submit' />

<div id='idtoupdate'></div>

pquery.php を見ると色々なメソッドがあります。使い方はソースを見ればすぐに分かると思います。

scriptaculous.js を使ってマトリックス状に配置した要素を並び替える

1

scriptaculous.js を使って並び替えを行う を応用して格子状に並んだ要素を並び替える例です。基本的な部分はリスト形式の並び替えと同じですので省略します。
最初にデモ、その後にコードを紹介します。

デモ


#sortarea { width: 350px; } #sortarea div { float: left; width: 100px; height: 70px; border: 1px solid #000; margin: 5px; text-align: center; padding-top: 30px; cursor: default; }

A1
A2
A3
A4
A5
A6
A7
A8
A9

ソートする要素

前回は li タグで要素を定義しましたが、今回は div タグで定義しました。
CSS で格子状に並ぶようにしています。

<style>
#sortarea {
width: 350px;
}

#sortarea div {
float: left;
width: 100px;
height: 70px;
border: 1px solid #000;
margin: 5px;
text-align: center;
padding-top: 30px;
cursor: default;
}
</style>

<div id="sortarea">
<div id="drag_1">A1</div>
<div id="drag_2">A2</div>
<div id="drag_3">A3</div>
<div id="drag_4">A4</div>
<div id="drag_5">A5</div>
<div id="drag_6">A6</div>
<div id="drag_7">A7</div>
<div id="drag_8">A8</div>
<div id="drag_9">A9</div>
</div>

ソートする JavaScript コード

Sortable.create の option に overlap:’horizontal’ を指定しなくても並び替えはできますが、少しぎこちない感じになりますので、指定しておいたほうがいいでしょう。

<script type="text/javascript" language="javascript">
// <![CDATA[
Sortable.create("sortarea",{
    tag:'div',overlap:'horizontal',constraint: false,
});
// ]]>
</script>

scriptaculous.js を使って並び替えを行う

2

JavaScript の読み込み

まず prototype.js と scriptaculous.js を読み込む

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>

ソートするリストを作成する

ここでのポイントはドラッグさせたい要素に drag_1 のように「共通の名前+アンダバー+数字」を付けることです。

<ul id="sortarea">
<li id="drag_1">A1</li>
<li id="drag_2">A2</li>
<li id="drag_3">A3</li>
<li id="drag_4">A4</li>
<li id="drag_5">A5</li>
<li id="drag_6">A6</li>
<li id="drag_7">A7</li>
<li id="drag_8">A8</li>
<li id="drag_9">A9</li>
</ul>

ソートする JavaScript コード

ソートするエリアとソートする要素を定義した後で実際にソートするための JavaScript コードを書く。このコードがソートさせたい要素よりも前に書くとエラーになるので注意。

<script type="text/javascript" language="javascript">
// <![CDATA[
Sortable.create("sortarea",{
    onUpdate:function(){
        new Ajax.Updater(
        'sortarea',
        '/path/to/phpcode',
            {
                asynchronous:true,
                evalScripts:true,
                parameters:Sortable.serialize("sortarea")
            }
        );
    }
});
// ]]>
</script>

onUpdate でソート結果をPHP に送りデータベースなりに反映させる。
データベースに反映などが必要なければ、onUpdate は不要です。

デモ

これを実際に使用した例が下記になります。

#sortarea { width: 350px; border: 1px solid #000; } #sortarea li { cursor: default; }

  • LIST1
  • LIST2
  • LIST3
  • LIST4
  • LIST5
  • LIST6
  • LIST7
  • LIST8
  • LIST9

Smarty で正規表現を if 文で使用する

2

Smarty には正規表現を使用して文字列を置換する regex_replace があります。
これを上手に使用して if 文で正規表現を用いて条件分岐させます。

if (preg_match('/php/i', 'PHP is the web scripting language of choice.')) {
    echo 'A match was found.';
} else {
    echo 'A match was not found.';
}

PHP で上記のような処理を Smarty で書くと下記のようになります。

{assign var='string' value='PHP is the web scripting language of choice.'}
{if $string|regex_replace:'/.*php.*/i':'php' eq 'php'}
A match was found.
{else}
A match was not found.
{/if}

ポイントは regex_replace を用いて、正規表現のパターンに該当する場合は元の文字列を何かしらの文字列(上の例でいうと’php’)に置換してしまい、それを eq で置換されているか判定するということです。

これを実際に使用したのは OpenPNE のテンプレートです。
OpenPNE を使用していて、特定のカテゴリのときのみ読み込む CSS を変えたいときがありました。
OpnePNE のイベント関連の URL は http://expamle.com/?m=pc&a=page_c_event_*** という感じになります。
全部で14種類ありますので、これを普通に if 文で書いていると大変なことになりますし、追加などがあったときのことを考えるとよくありません。

そこで Smarty の if 文に正規表現を使用して下記のようにすることにより1つの条件で page_c_event_*** の URL を条件分岐させました。

Smarty テンプレート

{if $smarty.get.a|regex_replace:"/page_c_event.*_/":"event" eq "event"}
{** イベントです**}
{else}
{** イベント以外です **}
{/if}

WordPress の サイドバーの最近の投稿(Recent Entry)にはてブ数を表示する

0

このブログでいうと右カラムにある「Recent Entry」の各エントリの横にはてブ数を表示してみました。
これは WordPress のソースを少しいじる必要があります。

wp-includes/widgets.php
698行目あたりにある
<li><a href="<?php the_permalink() ?>"><?php if ( get_the_title() ) the_title(); else the_ID(); ?> </a></li>

という行を
<li><a href="<?php the_permalink() ?>"><?php if ( get_the_title() ) the_title(); else the_ID(); ?> </a> <a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>"><img src="http://b.hatena.ne.jp/entry/image/<?php the_permalink(); ?>" alt="" /></a></li>

に変更します。
変更したファイルをアップロードするのをお忘れなく!

試した WordPress のバージョンは ME2.2.1 にです。

WordPress の Simple Tagging プラグインで表示する関連エントリのはてブ数を表示する方法

1

このブログは Simple Tagging というプラグインを使用して各エントリにタグをつけています。このプラグインを使用するとタグから各エントリの関連エントリを自動的に表示することができます。詳しくは下記エントリをご覧ください。
WordPress でタグを使えるようにしてみた

今回はこの関連エントリのはてなブックマーク数を表示するようにする方法です。
こんなイメージです。
関連エントリにはてブ数を表示

関連エントリを表示するタグ

<?php STP_RelatedPosts(); ?>
この STP_RelatedPosts 関数の第1引数は表示フォーマットを指定するので、そこにはてブ数を表示するようなフォーマットを指定します。
<?php STP_RelatedPosts('<li><a href="%permalink%" title="%title% (%date%)">%title%</a> <a href="http://b.hatena.ne.jp/entry/%permalink%"><img src="http://b.hatena.ne.jp/entry/image/%permalink%" alt="" /></a>'); ?>

これで関連エントリにはてブ数が表示されるようになりました。

WordPress ではてなブックマーク数を表示

2

少しづつはてブされるようになってきたので、各エントリーのタイトルの横にはてなブックマーク数とはてブを表示するようにしてみました。

はてブボタンを表示

http://d.hatena.ne.jp/images/b_entry.gif からはてブアイコンをダウンロードして自分のサーバにアップロードします。

表示したい場所に下記タグを追加します。

<a href='http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>'><img src='/images/b_entry.gif' width='16' height='12' style='border: none;' alt='このエントリーを含むはてなブックマーク' title='このエントリーを含むはてなブックマーク' /></a>

参考:はてなブックマーク – ヘルプ – 自分のブログに「このエントリーを含むはてなブックマーク」ボタン

はてなブックマーク数を表示

表示したい場所に下記タグを追加します。

<a href='http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>'><img src='http://b.hatena.ne.jp/entry/image/<?php the_permalink(); ?>' alt='' /></a>

参考:はてなブックマーク – ヘルプ – 自分のブログに「○○users」を表示

HTTP_Request を使用してファイルをアップロードする方法

1

PEAR の HTTP_Request を使用してファイルをアップロードする方法です。

<form action='POST_URL' method='post' enctype='multipart/form-data'>
<input type='text' name='title'>
<textarea name='body'></textarea>
<input type='file' name='upload_file'>
<input type='submit'>
</form>

上記のような HTML でファイルをアップロードする場合と同じような処理をするには、下記のように HTTP_Request を使用します。

// POST パラメータ
$post_data = array(
    'title' => $title,
    'body'  => $body,
);
// アップロードパラメータ
$upload_file = array(
    'name' => 'file',
    'path' => '/path/to/file',
);
// アップロード
$rs = http_send(POST_URL, $post_data, $upload_file);

function http_send($url, $params, $upload_file=null) {
    $req = new HTTP_Request();
    $req->setMethod(HTTP_REQUEST_METHOD_POST);

    foreach ($params as $key => $val) {
        $req->addPostData($key, $val);
    }

    $req->setURL($url);
    if ($upload_file) {
        $res = $req->addFile($upload_file["name"], $upload_file["path"]);
        if (PEAR::isError($res)) {
            echo $res->getMessage();
            exit;
        }
    }

    if (!PEAR::isError($req->sendRequest())) {
        return $req->getResponseBody();
    } else {
    	return false;
    }
}

参考:PEAR :: Manual :: ファイルアップロード

Go to Top