スマートフォンやhtml5+CSS3など新技術に四苦八苦。jQuery、AjaxなどJavaScriptも難しいですね。そんなWebに悩む人のネタ帳です。

PHPで動的に連想配列を作りたかったのですが、うまくいきません。

具体的には、以下にダンプに示すような配列をプログラムで作る想定です。

Array
(
    [key1] => data1
    [key2] => data2
    [key3] => data3
    [key4] => data4
)

これをPHPで静的に定義するためには、以下のようにすればよいです。

$array = array(
	'key1' => 'data1',
	'key2' => 'data2',
	'key3' => 'data3',
	'key4' => 'data4'
)

ただ、プログラム上、どうしても動的に配列を操作したい場合があり、その方法を考えていたのです。
例えば、上に要素を追加したい場合、array_push関数を使うとこうなるでしょうか。

array_push($array, 'key5' => 'data5');

PHPの文法に反しているので、当然ですがエラーになってしまいます。

CakePHPのモデルには、DBを更新する際に値をチェックするvalidate機能があります。
今回、それを活用しようとプログラミングしてみたのですが、なかなか問題が多かったので、とりあえずメモとして残しておきます。
CakePHPのバージョンは1.3.6です。

プライマリキーの重複チェックを試す

Sampleモデルについて、validate機能でプライマリキーの重複チェックをする場合には、以下のようにモデルに記述するだけです。CakePHPはこの簡易さがありがたい。

class Sample extends AppModel {
	var $name = 'Sample';
	var $validate = array(
		'id' => array(
			array(
				'rule' => 'isUnique',
				'message' => '「ID」が重複しています',
			),
		),
	);

マニュアルにもあるように、この記述で問題ないはずですが、なぜかチェックは機能せず、エラーパターンでもスルーして正常処理を続行してしまいます。
原因は不明ですが、どうしても出来ないので、ひとまずこの方法はあきらめます。

CakePHP1.3でページ毎にkeywordsとdescriptionを設定する方法を考えてみました。

CakePHPでサイトを構築した場合、通常、メタ情報を含めたヘッダ部分はレイアウト機能で共通化します。その中でも、keywordsやdescriptionといったページ毎に動的に切り替えたい部分があります。今回は、そのしくみについていろいろと試してみました。

Htmlヘルパーのmeta関数を用いる

Htmlヘルパーではmeta情報を出力するために関数が用意されています。例えば、keywordsタグを出力したい場合、ビューで以下のように設定します。

<?php echo $html->meta('keywords', 'キーワード1,キーワード2,キーワード3') ?>

その出力結果は以下の通りです。

<meta name="keywords" content="キーワード1,キーワード2,キーワード3" />

しかし、このままでは1つ問題があります。それは、ビューでmeta関数をコールした箇所に出力されてしまうということです。
「$script_for_layout」では設定したcssやjavascriptをメタタグ内に出力してくれますが、meta関数はそれとは異なるようです。したがって、ビュー内のmeta関数を置く場所や、レイアウトとビューの構成を工夫しなければ、正しい位置にkeywordsを設定することはできません。
あまりスマートな感じがしませんね。

CakePHP1.3、MySQL5の環境下で、DBにアクセスして情報を取得したのですが、どうしても日本語が文字化けしてしまいます。

$result = $this->find('all', array(
	'conditions' => array(
		'Sample.id' => $id
	),
));

例えば、このようにしてデータを取得しているのですが、2バイト文字だけどうしても化けます。ちなみにMySQLは文字コードUTF8の設定でテーブルに情報を保持しています。

原因は単純にデータベース設定でエンコードをUTF8に指定していないだけでした。

CakePHPでMySQLを利用する場合には、明示的にエンコードを指定する必要があるようです。
具体的には以下のように「app/config/database.php」に「encoding」を設定することで、問題を文字化けを回避できます。

PHPではRSSなどXMLデータを読み込む時に、SimpleXMLを使うことがあります。
今回、そのSimpleXML形式のデータを配列に変換する必要があったので、調査していました。

少し調べてみると、SimpleXMLのデータを再帰的にループすることで配列に整形するロジックを見つけました。また、その他にいくつかライブラリが公開されているようです。

なるべく簡単な方法を求めていたのですが、どうもPHP標準でそのような変換関数は用意されていないようです。

そんな中でも、一度JSONコードに変換することで配列を得る方法を見つけました。
以下は、このブログのRSSをSimpleXML形式に読み込んだ後、Array形式に変換するサンプルコードです。

$xml = simplexml_load_string('http://helog.jp/feed/atom/');
$array = json_decode(json_encode($xml), true);

ただしこの場合、XMLデータの値は変換できても、属性は失われるようなので、注意が必要です。

シンプルな方法ではあるので、属性を無視できるケースでは重宝しそうです。

CakePHPでWebアプリケーションなどを構築する場合、外部APIやDBアクセスが頻繁に発生します。自サーバならともかく、外部サーバのAPIなどを利用する場合はアクセス回数に制限を設けているものもあるので、サイトへのアクセスが増えた場合は改善が求められるかもしれません。

そこで、今回はCakePHPのビューキャッシュの活用方法です。
基本的にビューキャッシュはビュー単位、つまりはアクション毎にキャッシュを作成することが可能です。

キャッシュを有効にする

キャッシュを有効にするためには設定ファイル「app/config/core.php」の以下のコメントアウトを解除します。

//Configure::write('Cache.disable', true);
//Configure::write('Cache.check', true);

コメントアウトを外し、「Cache.disable」の値を「false」にすることでキャッシュが有効になります。

Configure::write('Cache.disable', false);
Configure::write('Cache.check', true);

再度eclipseをベースにしたhtml5+css3開発環境の構築にチャレンジです。

これまで、何度も試みていたのですが、失敗ばかりでした。
eclipseベースでhtml5+css3の開発ができるプラグインといえば、よく見かけるのがAptanaです。
これまでだと、Aptanaがどうも不安定で、プラグインとして組み込むとeclipseが起動しなくなったりと、どうしても安定した環境を作ることができず、断念していました。
その頃のバージョンは、確か「Aptana3 beta」と「eclipse3.5」でした。

そんな中、正式版となった「Aptana3.0.1」のStandalone Versionがなかなか使えるという情報を得ました。そこから詳しく調べてみると、「Aptana3.0.1」は「eclipse3.6」ベースで構築されているとのこと。ということは、eclipse3.6にAptana3のプラグインを入れても、そこそこ安定するのではないかと期待を持ったわけです。
最近、eclipse3.5から3.6へのバージョンアップを考えていたこともあり、これを機会に試してみることにしました。

それでは早速、jQuery Mobileを使ってスマートフォンサイトの構築にチャレンジします。

フレームワークをダウンロード

jQuery Mobileを導入する方法ですが、非常に簡単で、公式サイトよりダウンロードしたCSSファイルとJSファイルを読み込むだけです。

まず、jQuery MobileはjQueryをベースとして動作するので、jQueryの最新版「jquery-1.5.2.min.js」を本サイトよりダウンロードします。
jQuery: The Write Less, Do More, JavaScript Library

同様にして、jQuery Mobileの最新版「jquery.mobile-1.0a4.1.min.js」と「jquery.mobile-1.0a4.1.min.css」をダウンロードします。
jQuery Mobile

ここで、ダウンロードするソースは圧縮版がいいでしょう。
近年、モバイル通信が高速化したとはいえ、光通信と比べるとまだまだ遅いです。スマートフォンサイトを構築するには、常にコンテンツの軽量化を考慮したほうがよいと思います。

これまでに自身で技術習得のために、いくつかテストサイトを構築してきましたが、そろそろスマートフォンサイトにも手をつけないと時代に取り残されてしまうのではないかと思ったので、一つ作ってみることにしました。

普段から何気なく、スマートフォンサイト構築関連の記事は読んでいたのですが、いざ自分で着手するとなると、具体的に何から着手してよいのか分かりません。
というのも、スマートフォン搭載のブラウザ自体が、通常のPCのWebサイトを見れるようにはなっているので、新しい技術を得ずとも最低限、構築できる事はできてしまうのです。

ただ、そんな中でも、スマートフォン用に見やすい、操作しやすいように最適化する必要はあるかと思います。具体的には以下のとおりです。

  • 縦に長すぎない・横スクロールを出さないように画面サイズを最適化する
  • フォントを苦なく読めるサイズにする
  • ボタンは指で容易に操作できるように十分なサイズにするなどインターフェースに配慮する
  • 画像を多様しないなどコンテンツ容量を極力抑える

これら課題を容易にクリアできるようなライブラリはないのかと調べていたら、「jQuery Mobile」を見つけました。
jQuery Mobile

特にフルFlashサイトなどでは、ブラウザのサイズを変更しても、フッターを下につけたままにしたい、ボタンを中央にキープしたいなどといった場合があります。Webではリキッドレイアウトといいますが、このように、さまざまなサイズのブラウザでも体裁を保ちたいといった要望がFlashにも求められることが多くなりました。

そこで、任意のムービークリップにクラス「SampleMc01」が設定してあることを前提に、ActionScript3で固定配置するさまざまなサンプルをまとめたいと思います。

まず、ムービークリップを配置するステージをフルFlashにして、ステージの基準点を左上に設定したとします。

import flash.display.StageScaleMode;
import flash.display.StageAlign;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

Monthly Archives

Search