WEB/システム/IT技術ブログ

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

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

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

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

$xml = simplexml_load_string('https://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);

JavaScriptでクッキー情報を書き換えることがあったので、お手軽な方法を探していたら、「jquery.cookie.js」を見つけました。
Cookie | jQuery Plugins

※ダウンロードサイトがgithubに移動したようです(2012/11/30)
carhartl/jquery-cookie · GitHub

導入方法

導入方法はとても簡単です。
上記サイトから「jquery.cookie.js」をダウンロードして読み込みます。「jquery.cookie.js」はjQueryベースのプラグインなので、jQueryを先に組み込むだけです。

<script type="text/javascript" src="/js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.cookie.js"></script>

ちなみに今回、jQuery1.5.2、Cookie1.0の組み合わせでしたが、問題なく動作しました。

reset.cssは各ブラウザでデフォルトで指定されているCSSをリセットするために読み込むスタイルシートです。

Firefox、Internet ExplorerやGoogle Chromeなど各ブラウザは、コーダーがスタイルシートを適用していない状態では、CSSの初期状態に差異があります。その差異を埋めるべく容易するスタイルシートが「reset.css」です。

少しずつ自身で調整を重ねて作り上げる「reset.css」もありますが、オープンソースとして公開されているものもあります。私はHTML4でPCページを構築する際、YUI(Yahoo! User Interface Library)のCSS Resetは重宝していました。
YUI 3: CSS Reset

今回、スマートフォンサイトを構築するために、スマートフォン用のreset.cssを探していました。そこで気がついたのですが、スマートフォンサイトは結局のところHTML5で構築するので、スマートフォン用というよりはHTML5用ですね。

調べたところ、HTML5 doctorのサイトで発見しました。
HTML5 Doctor, helping you implement HTML5 today

再度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;

比較的Flashコンテンツは他のコンテンツよりも容量が大きくなります。オープニングFlashなどは、クライアントに全てダウンロードされる前に再生されてしまうと、かくかくとした動きになり、スムーズに再生されないこともしばしばあります。そこで、コンテンツが100%ダウンロードされてから再生を開始するしくみを追加します。それがプリローダーです。

今回はProgression4を用いたプロジェクトでのプリローダー設置方法です。
まず初めに、サンプルを作成した環境です。

Flash CS5
Progression4
Flash Player 10
ActionScript3

さて、Progressionで新規プロジェクトを立ち上げると、以下のようなファイルがデフォルトで用意されます。

Index.as
index.fla
IndexScene.as
Preloader.as
preloader.fla

indexと名前のついたファイルは、Flashコンテンツの本体部分です。プリローダー関連ファイルは「Preloader.as」と「preloader.fla」なのですが、デフォルトでは処理もムービークリップも空の状態なので、結果的にプリローダーは実行されません。
つまりプリローダーを設置するためには、この2つのファイルに処理を追加します。

Subversionへのアクセスは、通常「svn://xxx.xx.xxx」というようにsvnプロトコルのポート3690を利用して通信をしますが、今回はApacheと連携させて、80番ポートで利用できるような環境を作りました。

前提として、以下の環境がインストール済みとします。

xampp1.7.4 (Apache2.2.17)
Subversion1.6.16

ライブラリとモジュールの組み込み

まずは、ApacheでSubversionを動かすために、ライブラリとモジュール組み込みます。

Subversionのインストールディレクトリ「…Subversionbin」から、xamppのインストールディレクトリ「…xamppapachebin」へ以下ファイルをコピーします。

intl3_svn.dll
libapr-1.dll
libapriconv-1.dll
libaprutil-1.dll
libdb44.dll
libeay32.dll
libsasl.dll
libsvn_client-1.dll
libsvn_delta-1.dll
libsvn_diff-1.dll
libsvn_fs-1.dll
libsvn_ra-1.dll
libsvn_repos-1.dll
libsvn_subr-1.dll
libsvn_wc-1.dll

つまりは、「intl3_svn.dll」と「lib*.dll」の全てのファイルです。

Monthly Archives