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

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をやらされたりもしています。これまでは、それらメディアをチェックする度に、いちいちパソコンの電源を入れていました。

いつもどおりコーディングしているつもりが、どういうわけか、今回だけ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とするようです。

IIS(Internet Information Services)を利用して、WindowsXPをFTPサーバにする方法を紹介しました。
WindowsXPをFTPサーバとして利用する(IIS編)
ただ、XPの場合はFTPで公開できるディレクトリが1つに制限されています。また、Windows特有のユーザ管理もめんどくさいです。どうもWindowsのユーザ管理の概念は分かりにくい。

そこで、他のソフトウェアなどないかと探していたら、意外と近くにありました。
それは「FileZilla」です。FileZillaは日本語プロジェクトが存在し、以下のサイトでダウンロードすることができます。
FileZilla プロジェクト日本語トップページ – SourceForge.JP
「意外と近くに」というのは、FileZillaはXAMPPに組み込まれているんですね。XAMPPは普段から業務で活用しているので、まさに灯台下暗しでした。
今回は、上記サイトで最新版をインストールするのではなく、XAMPP for Windows 1.7.2に組み込まれているFileZilla 0.9.32 betaを使ってFTPサーバを立ち上げたいと思います。XAMPPはインストール済みを前提とします。

WindowsXPにFTPサーバを立てる機会があったので、その時の作業メモです。

WindowsでFTPサーバを導入するのには、どこからかパッケージをダウンロードしなければならないと思っていたのですが、IIS(Internet Information Services)が標準で用意されており、FTPサーバ以外にもWebサーバやメールサーバのサービスが利用できるようです。
IISは、Windows 2000 Professional、Windows XP Professional、Windows Vista、Windows 7を対象に用意されています。ただ、デフォルトでインストールはされていないので、コンポーネントの追加をする必要があります。今回はWindows XP Professionalの例です。

IISコンポーネントの追加

WindowsXPでIISコンポーネントを追加するためには、WindowsXPのインストールCDが必要です。
スタートメニューから「コントロールパネル」⇒「プログラムの追加と削除」をクリックし、開いたウィンドウから「Windowsコンポーネントの追加と削除」を選択します。するとWindowsコンポーネントウィザードが起動するので、「インターネットインフォメーションサービス(IIS)」を選択して、コンポーネント追加を実行します。

今回、初めてのスマートフォンサイト作成で、画面サイズ、フォントサイズの設定を行ったので覚書です。

スマートフォンの画面サイズ

まず、画面サイズはiPhoneが320×480pxなので、これを基準にデザインするといいと思います。
ただ、他のAndroidなどの機種はこれと若干異なります。そこでviewpointを指定して、表示領域を指定します。

<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
...
</head>

「width=device-width」は、iPhoneの場合に横幅が320pxに指定され、その比率で縦幅が決定するわけです。他のデバイスについても同様です。つまり、表示するデバイスの解像度に依存することなく、横幅が320pxでデザインされたサイトが、きっちり収まった状態で閲覧できるわけです。

Macではデフォルトでルートユーザが有効になっていません。あまりMacを使わないので、毎度この件につまづいて「あれ?root権限でコマンド実行できな!?」となってしまいます。。。

私は、過去にLinuxユーザだったので、Macの設定などを変える場合は、GUIを利用するよりもターミナルを使ってコマンドを打ち込みます。

例えば、ローカル環境でWebサーバなどを立ち上げている場合に、hostsを編集したいことがよくあります。

vi /private/etc/hosts

しかし、システム環境をターミナルから変更する場合には「root」権限が必要になります。
Mac OSをインストールしたことがないので、詳細は知りませんが、PCの管理者権限とは別のようです。一緒にすればいいのに。

以前にSWFObject 2.2の利用例を紹介しました。
Flash設置の決定版「swfobject」
上の利用例はswfobjectの公式ドキュメントに掲載されているスタンダードな方法です。一方で、objectタグなどを使用しない、少しスマートな記述方法もあるようです。
swfobject – Project Hosting on Google Code

まず、swfobjectを読み込んで、以下のようにしてswfobjectを実行します。

<script type="text/javascript" src="/js/swfobject.js"></script>
<script type="text/javascript">
	swfobject.embedSWF("/swf/index.swf", "FlashContent", 
		"400", "400", "10", "/swf/expressInstall.swf");
</script>

Monthly Archives

Search