それでは早速、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」なのですが、デフォルトでは処理もムービークリップも空の状態なので、結果的にプリローダーは実行されません。
つまりプリローダーを設置するためには、この２つのファイルに処理を追加します。
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」の全てのファイルです。
Windows7になって、エクスプローラの見栄えもスタイリッシュになりました。ファイルがやたらサムネイル表示されたり、アイコンのように表示されたりと、インパクトもあり一見きれいかもしれません。
ただ、それでは使いづらいです。
仕事で大量のファイルを扱う上では、デフォルトでファイルが詳細一覧でアルファベット順で並んでいたり、更新日付順で並んでいてほしいものです。
その点、Windows7になってからさらに使い勝ってが悪くなったような気がします。
例えば、ファイルがアイコン風に表示されるので、エクスプローラ右上のスライダーで表示の「詳細」を選択。項目を右クリックで「更新日時」を表示させ、さらに左クリックで更新日時順にソートさせます。
しかし、次の日、同じフォルダを開くと、またサムネイル表示に戻っています。。。Windows XPのときは、一度設定すれば、その後は保持されていたような気がするのですが。。。気のせい？
Webサイトを構築するにあたって、そのプロセスの中には似たような繰り返しの作業が存在します。
それを少しでも効率よく消化したいと思い、ツールを公開することにしました。
これまでは「この作業はこんなツールがあったら楽にできるのに」と思いながら、自分で構築するのではなく、他に公開されているツールでカバーしていました。ただ、100%満たされるようなツールに出会うのは難しく「もう少しカスタマイズしたらもっと良くなるのに」とわがまま言っていました。やっぱり自分で作っちゃえばいいじゃんと思いながらも、なかなか手をつけられず。
何事も第一歩を踏み出すことが重要ということで、雑ではありますが、まずは一つ作ってみました。
HTMLエンコード（エスケープ） ver1.0
今後、使い勝手を含めて改良するのと共に、他のツールもリリースしていけたらと思います。
また、公開している意図としては、同じような作業のもどかしさを感じてる方にも使っていただき、あれがダメだこれがダメだと言ってもらえればいいなと考えているので、Twitterにご意見ご感想をいただければ幸いです。
CakePHPで構築したサイトは、「mod_rewrite」によりCakePHPで設定したルーティングに従って、コンテンツの内容が決定します。
つまり、デフォルトではCakePHPをインストールしたディレクトリの配下は、全てコントローラとアクションで処理されるということです。
これではMovableTypeやWordPressをインストールする場合に困ります。
例えば、wpというフォルダを作り、「http://localhost/wp/」にアクセスしてWordPressをインストールしようとしても、処理がCakePHPのwpコントローラに渡されてしまい、WordPressのソースにアクセスできません。
このルールは文頭でも触れたように、ルートディレクトリに設置した「.htaccess」に記述してある「mod_rewrite」で制御されています。つまり、「.htaccess」を書き換えることで、この問題を解消できます。
XML形式のデータから改行コード「n」が含まれた文字列を、ActionScript3で読み込み出してTextFieldに出力すると、改行コードは改行されずに、そのまま「n」と表示されてしまいます。
例えば以下のような内容のXMLデータを読み込みます。
<?xml version="1.0" encoding="utf-8"?> <item> <message>あいうえおnかきくけこnさしすせそ</message> </item>
これを、通常のAS3の処理で読み込んで任意のTextFieldにセットします。
（中略） var xml:XML = new XML(loader.data); message.text = xml.message;
すると出力結果は
「あいうえおnかきくけこnさしすせそ」
となってしまいます。
改行コードの部分は改行させたい。
SoftbankのAndroid携帯電話「HTC Desire」を使い始めて約半年が経ちました。
当時はものめずらしかったスマートフォンも、ここ最近で一気に広まり、各キャリアから新作もどんどんリリースされ、iPhoneなどはいたるところで見かけるようになりましたね。
さて、周りのスマートフォンに切り替えようかと悩んでいる友人から「スマートフォンってどうなの？」と聞かれることが多々あります。そこで、あくまで個人的な意見でしかありませんが、私の半年間使ってみた感想をまとめてみます。
私はWeb業界で技術者として仕事をしていることもあり、メールを細かくチェックしたり、Webのニュースやブログに目を通したりといった日常をおくっています。自発的ではありませんが、最近ではTwitterをやらされたり、Facebookをやらされたりもしています。これまでは、それらメディアをチェックする度に、いちいちパソコンの電源を入れていました。