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

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

普段から何気なく、スマートフォンサイト構築関連の記事は読んでいたのですが、いざ自分で着手するとなると、具体的に何から着手してよいのか分かりません。
というのも、スマートフォン搭載のブラウザ自体が、通常の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」の全てのファイルです。

久しぶりにFlashのActionScript3で2次元物理動作のコンテンツを作る機会があったのですが、Box2DFlashAS3ってどんなものだったかと過去のソースを読んでみて愕然としました。ほとんどおぼえていない。。

比較的、複雑な処理を要する技術の場合、なおかつ、それを利用する場面が少ないとなると、なかなか身につけるのは難しいですね。

最後にBox2DFlashAS3を使ってから約1年が経ちました。再度1から学ぶよりは、他に良い技術が出ているのであれば、そこに乗り換えようと調べていたら、Box2DFlashAS3を簡単に利用するためのライブラリ「QuickBox2D」を見つけました。

QuickBox2D

とにかく試してみようと、ドキュメントやサンプルを探していたら非常にわかりやすいサイトを見つけました。

blog.alumican.net » Blog Archive » QuickBox2D はじめの第一歩

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などはいたるところで見かけるようになりましたね。

さて、周りのスマートフォンに切り替えようかと悩んでいる友人から「スマートフォンってどうなの?」と聞かれることが多々あります。そこで、あくまで個人的な意見でしかありませんが、私の半年間使ってみた感想をまとめてみます。

メリットとしてPCにある程度依存している人には便利

私はWeb業界で技術者として仕事をしていることもあり、メールを細かくチェックしたり、Webのニュースやブログに目を通したりといった日常をおくっています。自発的ではありませんが、最近ではTwitterをやらされたり、Facebookをやらされたりもしています。これまでは、それらメディアをチェックする度に、いちいちパソコンの電源を入れていました。

Monthly Archives

Search