「ケータイサイト解体新書 デザインパターンから理解する実装テクニック」購入

ケータイサイト解体新書 デザインパターンから理解する実装テクニック
ケータイサイト解体新書 デザインパターンから理解する実装テクニック ホシナカズキ,榊原 美穂(サイト制作協力)

おすすめ平均5つ星のうち5.0
5つ星のうち5.0モバイル制作に関わるすべてのひとに
5つ星のうち5.0Webデザイナーがモバイルサイト案件があったときに読むと最適な1冊

Amazonで詳しく見る

評判が良かったので購入してみたんですが、分かりやすくまとまっていて良かったです。携帯サイトをコーディングする方にも当然おすすめですが、デザインする方も知っているとよさそうな事が色々書いてありました。

ネット上にも情報はありますが、モバイルに関しての情報は古いものが多かったり、なかなか現時点での「どうなの?」が分かりにくいので、これは楽に現状を知れて良いんじゃないかなと思います。

最近、携帯サイト制作をする機会が増えてきたんですが、一時期携帯サイト制作から遠のいていたのもあり「今どうなんだろ」と、制作するたびに色々調べる手間が大きかったんです。この本で結構すっきり分かったので、個人的にはとても満足です。もっと早く読んでいれば楽だった案件もあったなあ。

良い本だと思ったので、オススメしときます。 :)

Dreamweaver CS5 に拡張機能を入れる際にエラーがでたら

DW CS5 に入れたい拡張が何個かあったのですが、先日入れようとしたら「メニューを更新できませんでした」とエラーが出てしまって入れられず。

調べたところ、ショートカットを設定したり変更していると出るようです。私は特にショートカットの設定を変えた記憶もなかったので不思議なのですが…。

あれこれ試しているうちに DW で一切ショートカットが効かなくなり、なんかもうどうしたらいいのやらという状態になったので一度アンインストールして、再度インストール。

懲りずに今日、また拡張機能を入れてみました。
前回同様「メニューを更新できませんでした」とエラーが出てしまって入れられなかったので、以下のように。

XP
C:\Documents and Settings\userName\Application Data\Adobe\Dreamweaver CS5\ja_JP\Configuration\Menus

Win7
C:\Users\userName\AppData\Roaming\Adobe\Dreamweaver CS5\ja_JP\Configuration\Menus

内にある、「Menus.xml」と「Menus.xbk」をバックアップを取って削除。
※変更したショートカットなどがある場合、消えるので再設定が必要なようです。
 ↓
拡張機能をインストール。

先日はあんなに上手くいかなかったのに、今回はあっさりと成功しました。前回はなんだったのか…DW が不安定になっている中で色々したのがダメだったのかもしれません。

とりあえず上手く入ったので良かったです。
入れた拡張機能は、以下の 3 つ。

Vim にも zen-coding を入れてたので、DW にも入れたかったんです。嬉しい。
ちなみに、DW に入れた zen-coding は 0.6 のものです。

C:\Documents and Settings\userName\Application Data\Adobe\Dreamweaver CS5\ja_JP\Configuration\Commands\ZenCoding
内にある「zen_settings.js」を開いて、最初にある lang 設定などを書き換えておくと良いです。

	'variables': {
		'lang': 'ja',
		'locale': 'ja-JP',
		'charset': 'UTF-8',
		'profile': 'xhtml',

本当は、DW のエディタ部分が Vim だったらいいんだけどな~…などと思いますが、ニッチすぎるかな。連番にしたいときなど、凄く Vim ならば…と思ったりしてしまいます。

最近 DW から Subversion を利用しているので、Vim より DW を使うことが増えました。ここに来て、DW に戻ってます。なんだかんだ、HTML 特化してるのは便利ですね。

表示確認用ローカルサーバの Virtual Hosts ( Apache ) 設定

ローカルサーバー構築 ( Apache, Perl, PHP, MySQL ) 」で、ローカルサーバをたてる方法を書きましたが、今回はその補足として。実際に使う場合に便利な Virtual Hosts の設定。色々試して、現在こんな形でやっています。

httpd.conf

C:\Program Files\Apache Software Foundation\Apache2.2\conf 内
httpd.conf

#Listen 12.34.56.78:80
Listen 80
Listen 8080
Listen 8000

8080 と 8000 も使えるように。

# Virtual hosts
Include conf/extra/httpd-vhosts.conf

Vitual hosts の設定ファイル httpd-vhosts.conf を読み込むように。

httpd-vhosts.conf

C:\Program Files\Apache Software Foundation\Apache2.2\conf\extra 内
httpd-vhosts.conf

#
# Use name-based virtual hosting.
#
NameVirtualHost *:8080
NameVirtualHost *:8000
<VirtualHost *:8080>
    ServerAdmin test@test.com
    DocumentRoot "C:\work\UserVirtual8080\htdocs"
    ServerName localhost:8080
    AddHandler cgi-script .cgi .pl

    <Directory "C:\work\UserVirtual8080\htdocs">
        Options Includes ExecCGI FollowSymLinks
        AllowOverride All
        Order allow,deny
        Allow from all
    </Directory>
    ErrorLog "logs/localhost-error.log"
    CustomLog "logs/localhost-access.log" common
</VirtualHost>

<VirtualHost *:8000>
    ServerAdmin test@test.com
    DocumentRoot "C:\work\UserVirtual8000"
    ServerName localhost:8000
    AddHandler cgi-script .cgi .pl

    <Directory "C:\work\UserVirtual8000">
        Options Includes ExecCGI FollowSymLinks
        AllowOverride All
        Order allow,deny
        Allow from all
    </Directory>
    ErrorLog "logs/localhost-error.log"
    CustomLog "logs/localhost-access.log" common
</VirtualHost>

UserVirtual8000 内の任意名のディレクトリ(例、hoge)が、http://localhost:8000/hoge/ でみれて、UserVirtual8080 内の htdocs が http://localhost:8080/ でみれるように。

本番環境にあわせ、普段は 8080 のほうを利用。
本番環境で http://xxx.com/hoge/ のような URL がトップの場合は、8000 のほうを利用。

8080 内の htdocs は、作るサイトが変わるたびにそこに html 等のコーディングデータを入れ替えておいてもいいですが、私の場合、プロジェクトごとにフォルダは掘っておきたいなという気持ちがあるので以下のようにしています。

「プロジェクト名ディレクトリ」の中に「htdocs」ディレクトリを作成(例:C:\work\プロジェクトA\htdocs)。その htdocs のジャンクションを、UserVirtual8000 内に作成。

ジャンクション作成には、以下のリンク作成シェル拡張を使ってます。楽です。

例でいうと、C:\work\プロジェクトA 内の htdocs を右クリックして C:\work\UserVirtual8000 内にドラッグアンドドロップすると、右クリックなのでメニューがでます。その中の、「ディレクトリジャンクションをここに作成」を選択。

これで、C:\work\プロジェクトA\htdocs と、C:\work\UserVirtual8000\htdocs が同じ内容になり、C:\work\プロジェクトA\htdocs 内を変更すれば C:\work\UserVirtual8000\htdocs 内も変更されます。ジャンクションについてはここでは説明しませんが、実体丸ごとのリンク、みたいなイメージです。

参考:WindowsXPにおけるジャンクション作成方法 – GeekなNooblog

こうすることで、プロジェクトを切り替えるたびにジャンクションを変えるだけで済みます。httpd-vhosts.conf を書き換えるより楽なのでこうしてます。

「もっとこうしたほうが良いよ!」とか「こういう設定オススメだよ!」とか「こういう方法もいいよ!」等あれば、是非教えてください :)

VirtualPC + IE6,IE7,IE8 環境構築

表示チェックする際、IETester やスタンドアローン版の IE などを利用することもあるんですが、これらは印刷プレビューがダメだったり、JavaScript がちゃんと動かないことがあるんですよね。印刷プレビュー系の修正作業あたりは Virtual PC が大活躍してます。

URL を OS 入れ直すたびに探していたので、メモ。

インストール

32bit 版の XP を利用しているので、Virtual PC 32bit 版をダウンロードしてインストール。
これだけでは、OS がないので動かすことが出来ないので、OS か、OS インストール済みのイメージファイルが必要です。

Microsoft が無料で OS インストール済みのイメージファイルを配布してるので、これを利用。英語版のみですが、使用するにあたって大きな問題はないです。Vista or XP Pro, IE8 – IE6 までそろっています(2010/07/27 時点)。

あとは、VirtualPC を起動して、それぞれのイメージファイルを指定してあげれば完了。

最初にやっておくと良いこと等

  • このままだと日本語が表示されなかったりするので、MS ゴシック等のフォントを Virtual PC で起動する各 OS に入れておく。
  • テストサイトにアップしてある HTML を表示させたいこともあるので、メニューの編集>設定、で設定ダイアログを出して、ネットワーク>アダプタ、で「共有ネットワーク(NAT)」を選択してインターネットにつながるようにしておく。

ファイルはドラッグ&ドロップで Virtual PC の仮想環境デスクトップにコピー出来るので、コーディングしたものをローカルで表示チェックをしたい場合はフォルダごとコピーしてます。

Web 制作をしてる方は、Virtual PC 入れておくと便利ですよー。そんなに大変ではないので是非。オススメです。

IE8 に関するコーディング関連のまとめ

主に自分のための情報ですが、あちこちに書き留めていたのでまとめて公開しておきます。間違いなどがありましたら、ご指摘お願いします。

IE8 基本情報

IE8 にはレンダリングモードが複数ある。詳細は以下のサイトを参照。

少し古い情報ですが、以下サイトも参考になりました。

あまり気にする必要はなさそうですが、以下の点も一応知っておく方がよいかと思います。※主に JavaScript 関連で違いがあるようです。

meta タグによるモードの指定方法

表 1 Internet Explorer 8 の互換モード

互換モード値 レンダリング動作
IE=5 Quirks (クワークス) モード
IE=7 Internet Explorer 7 標準準拠モード
IE=EmulateIE7

!DOCTYPE 宣言によりモードが決定されます

  • Quirks モード の !DOCTYPE 宣言の場合は Quirks モード
  • 標準モードの !DOCTYPE 宣言の場合は Internet Explorer 7 標準準拠モード
IE=8 Internet Explorer 8 標準モード
IE=EmulateIE8

!DOCTYPE 宣言によりモードが決定されます

  • Quirks モード の !DOCTYPE 宣言の場合は Quirks モード
  • 標準モードの!DOCTYPE 宣言の場合は Internet Explorer 8 標準モード
IE=edge Internet Explorer 8 と将来のすべてのバージョンのブラウザーがサポートする最新の標準を使用。実稼働サイトには非推奨

Internet Explorer 8 開発者向け技術概要より引用』

よく使うようなものだけリストアップします。

<!-- IE8標準準拠モードを指定 -->
<meta http-equiv="X-UA-Compatible" content="IE=8">

<!-- IE7標準準拠モードを指定 -->
<meta http-equiv="X-UA-Compatible" content="IE=7">

<!-- Quirksモードを指定 -->
<meta http-equiv="X-UA-Compatible" content="IE=5">

<!-- 最新の標準準拠モードを指定 (IE8が最新バージョンの場合なら、IE8標準準拠モードとなる) -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

複数のバージョンを指定した場合については、後述。

各モードの内容

IE8モード
CSS 2.1やSelectors APIなど、Web標準を強く意識したモード。
IE7モード
IE7の標準準拠モードと同じ
IE5モード
IE7やIE6の互換モードと同じ

その他モードについては、最初にあげたサイトなどを参照。

モードの複数指定をおこなった場合

meta スイッチには、下記のように複数のレンダリングモードを指定することが可能。

<meta http-equiv="X-UA-Compatible" content="IE=7; IE=9">

metaスイッチをサポートする今後のIEは、指定される値の中から、一番適したモードを選択します。上記の例ではIE7モードとIE9モードを選択していますが、IE8でその文書を表示させると、IE8モードではなくIE7モードでレンダリングすることになります。

IE8のモードスイッチ | Web標準Blog | ミツエーリンクスより引用』

今のところ、一番多く使うのは IE7 モード指定でしょうか。あまり使わない方が良いのかもしれませんが、保守サイトなどが IE8 で見ておかしい場合などの対応には手軽です。