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

スマートフォンサイト構築の決定版！？「jQuery Mobile」

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

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

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

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

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

「スマートフォンサイト構築の決定版！？「jQuery Mobile」」のつづきを読む

AS3でフルFlashサイトでの固定配置（リキッドレイアウト）を実装する

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

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

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

import flash.display.StageScaleMode;
import flash.display.StageAlign;

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
「AS3でフルFlashサイトでの固定配置（リキッドレイアウト）を実装する」のつづきを読む

Progression4でプリローダーを作成する

比較的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」なのですが、デフォルトでは処理もムービークリップも空の状態なので、結果的にプリローダーは実行されません。
つまりプリローダーを設置するためには、この２つのファイルに処理を追加します。

「Progression4でプリローダーを作成する」のつづきを読む

xamppでApacheとSubversionを連携させる

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」の全てのファイルです。

「xamppでApacheとSubversionを連携させる」のつづきを読む

Windows7でフォルダの表示設定を保持する

Windows7になって、エクスプローラの見栄えもスタイリッシュになりました。ファイルがやたらサムネイル表示されたり、アイコンのように表示されたりと、インパクトもあり一見きれいかもしれません。

ただ、それでは使いづらいです。
仕事で大量のファイルを扱う上では、デフォルトでファイルが詳細一覧でアルファベット順で並んでいたり、更新日付順で並んでいてほしいものです。

その点、Windows7になってからさらに使い勝ってが悪くなったような気がします。
例えば、ファイルがアイコン風に表示されるので、エクスプローラ右上のスライダーで表示の「詳細」を選択。項目を右クリックで「更新日時」を表示させ、さらに左クリックで更新日時順にソートさせます。
しかし、次の日、同じフォルダを開くと、またサムネイル表示に戻っています。。。Windows XPのときは、一度設定すれば、その後は保持されていたような気がするのですが。。。気のせい？

「Windows7でフォルダの表示設定を保持する」のつづきを読む

Webサイト構築補助ツールを公開

Webサイトを構築するにあたって、そのプロセスの中には似たような繰り返しの作業が存在します。
それを少しでも効率よく消化したいと思い、ツールを公開することにしました。

これまでは「この作業はこんなツールがあったら楽にできるのに」と思いながら、自分で構築するのではなく、他に公開されているツールでカバーしていました。ただ、100%満たされるようなツールに出会うのは難しく「もう少しカスタマイズしたらもっと良くなるのに」とわがまま言っていました。やっぱり自分で作っちゃえばいいじゃんと思いながらも、なかなか手をつけられず。

何事も第一歩を踏み出すことが重要ということで、雑ではありますが、まずは一つ作ってみました。
HTMLエンコード（エスケープ）　ver1.0

今後、使い勝手を含めて改良するのと共に、他のツールもリリースしていけたらと思います。

また、公開している意図としては、同じような作業のもどかしさを感じてる方にも使っていただき、あれがダメだこれがダメだと言ってもらえればいいなと考えているので、Twitterにご意見ご感想をいただければ幸いです。

「Webサイト構築補助ツールを公開」のつづきを読む

CakePHP内にWordPressを設置する

CakePHPで構築したサイトは、「mod_rewrite」によりCakePHPで設定したルーティングに従って、コンテンツの内容が決定します。
つまり、デフォルトではCakePHPをインストールしたディレクトリの配下は、全てコントローラとアクションで処理されるということです。

これではMovableTypeやWordPressをインストールする場合に困ります。
例えば、wpというフォルダを作り、「http://localhost/wp/」にアクセスしてWordPressをインストールしようとしても、処理がCakePHPのwpコントローラに渡されてしまい、WordPressのソースにアクセスできません。

このルールは文頭でも触れたように、ルートディレクトリに設置した「.htaccess」に記述してある「mod_rewrite」で制御されています。つまり、「.htaccess」を書き換えることで、この問題を解消できます。

「CakePHP内にWordPressを設置する」のつづきを読む

XMLの内容をAS3でTextFieldに出力すると改行しない

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さしすせそ」
となってしまいます。

改行コードの部分は改行させたい。

「XMLの内容をAS3でTextFieldに出力すると改行しない」のつづきを読む

Android携帯を約半年使ってみた感想

SoftbankのAndroid携帯電話「HTC Desire」を使い始めて約半年が経ちました。
当時はものめずらしかったスマートフォンも、ここ最近で一気に広まり、各キャリアから新作もどんどんリリースされ、iPhoneなどはいたるところで見かけるようになりましたね。

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

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

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

「Android携帯を約半年使ってみた感想」のつづきを読む

Firefoxで空白ができるのはclearfix（回り込み解除）が不完全だった

いつもどおりコーディングしているつもりが、どういうわけか、今回だけFirefoxでフッタの下に10pxほどの空白が空いてしまいます。
原因を解明するために、いろいろとCSSを調整してみたのですが、改善しません。
そうしているうちに、たまたま以下のような記事にたどり着きました。
Firefoxでフッター（footer）の下に隙間ができる – @blog.justoneplanet.info

結果から言うと「これで完璧」と信じ、使い続けてきたfloatによる回り込み解除のCSSに欠陥があったわけです。
問題の箇所は下記のブロックです。

.clearfix:after{
	content:".";
	display:block;
	height:0px;
	clear:both;
	visibility:hidden;
}

参考サイトによると「font-size: 0.1em;」が必要との事です。
つまり、構造上、回り込み解除した後に、Firefoxだけfont-sizeが1px分の余白が開いてしまったということなんですね。実際のところは不明ですが、スペースを消すために0pxとするとSEO的に問題があるようなので、0.1emとするようです。

「Firefoxで空白ができるのはclearfix（回り込み解除）が不完全だった」のつづきを読む

Monthly Archives