Numb. » WebCreate

Sass を使うなら、Compass も使うと便利

hibiki — Fri, 13 Jan 2012 02:51:53 +0000

あちこちで Sass のエントリーが増えてるので、私の環境も書いてみます。
Sass 使う時、より便利になる Compass というフレームワークを一緒に使っています。

Compass Home | Compass Documentation

Compass って？

便利だなと思う機能満載なフレームワークで、これも一緒に使うことで Sass がさらに簡単になったり使い勝手がパワーアップしたりします。具体的に例をあげたほうが分かりやすいと思うので、いくつか書いてみます。

Compass はいろいろな Mixin が含まれている

@import “compass”; で呼び出して使えます。自分で書かなくていいから楽ちん。

@import "compass";
.ex1 {
  @include clearfix;
}
.ex2 {
  @include border-radius(5px);
}
.ex3 {
  @include opacity(0.5);
}

↓

.ex1 {
  overflow: hidden;
  *zoom: 1;
}
.ex2 {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}
.ex3 {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
}

他にどんなものがあるかは、「Compass Core Framework | Compass Documentation」を見ると分かります。

監視も簡単、流用も簡単

Sass では、.scss を監視して .css を書き出す場合以下のような感じですが、

sass --watch test.scss:test.css

Compass だと、config.rb という設定ファイルをルートに置いておけば

watch compass

これだけで OK。
config.rb の内容は以下のようにしてます。ここで書き出す css や scss のディレクトリや、書き出し方法など指定しています。

http_path = "/"
css_dir = "css"
sass_dir = "_scss"
images_dir = "/"
javascripts_dir = "js"
output_style = :expanded
line_comments = false

watch compass すら打つのが面倒なので（というか忘れちゃうので…）、バッチファイルを作ってます。

compass_start.bat とかそんな感じの名前で、以下の内容を保存。

watch compass

bat ファイルをダブルクリックすることでコマンドプロンプトが立ち上がり、watch が始まります。Ctrl＋C で watch は止められます。

このあたりは、「Compassを使ってSassのCSS出力を手軽にしよう｜Blog｜Skyward Design」を参考にさせていただいてます。

htdocs 内に config.rb と start.bat を置いてみた図。
一度、下図のようにサイトスケルトン（テンプレート）を作成してしまえばあとは使い回せるので便利です。

画像の縦横 px を取得でき、計算に使える

Compass は画像のサイズも取得できます。ちょっと凄い。

img ディレクトリに 150*150 の 150.jpg がある場合、

  width: image-width("img/150.jpg") - 0px;
  min-width: image-width("img/150.jpg") - 20px;
  height: image-width("img/150.jpg") - 50px;

↓

  width: 150px;
  min-width: 130px;
  height: 100px;

これは素敵だなーと思ってます。詳しくは「Compass Image Dimension Helpers | Compass Documentation」。

その他の機能

他にも CSS スプライト用の画像を書き出せたりまでするようです。凄い。
参考：簡単に使える Compass のオススメ機能 – log

インストール

紹介はこれくらいにして、じゃあどうやって使うの？ということで。

まず、Ruby のインストールをする必要があります。以前書いたエントリー「Windows に Ruby と RubyGems を入れる | Numb.」を見て Ruby と RubyGems を入れてください。

Ruby を入れたら、以下のように打っていきます。

gem のアップデート

gem update --system

Sass のインストール

gem install sass

Compass のインストール

gem install compass

これだけです。

注意点

htdocs は、日本語の入るパスに置くとうまく動きません。そこだけ注意が必要。

Compass 便利ですので、ちょっとでも気になったようでしたら是非 :)

zencoding v0.7 Wrap With Abbreviation メモ

hibiki — Wed, 28 Dec 2011 13:47:40 +0000

aaaaaa
bbbbbbbbb
ccccccccc

例1. 三行選択して、li*>a[href="$#.jpg"]{ファイル名：$#}

ファイル名：aaaaaa
ファイル名：bbbbbbbbb
ファイル名：ccccccccc

例2. 三行選択して、html:5>ul.hoge>li#0$*>a[href="#$#"]{$#}




	
	


	
		aaaaaa
		bbbbbbbbb
		ccccccccc

vim でも dreamweaver でも。「$#」が選択部分、「$」は連番なので、#$# としてたら #選択部分に。

参考：Big Sky :: zencoding-vimを少しだけversion0.7対応した

携帯から PC サイトへアクセスした際、携帯サイトへ転送する

hibiki — Sat, 23 Jul 2011 22:02:01 +0000

携帯から PC サイトへアクセスがあった場合、携帯サイトへ転送してユーザーに携帯サイトを見せたい、という場合の設定等メモ。忘れないために…

.htaccess の内容

それぞれ、.htaccess　は http://wp.graphact.com/ 直下においているものとして 2 例。

例 1

携帯から http://wp.graphact.com/hoge/ にアクセスしたら http://wp.graphact.com/mobile/ に飛ばす場合。

RewriteEngine on

#user agent set
BrowserMatch ^DoCoMo CARRIER=docomo
BrowserMatch ^KDDI CARRIER=au_hdml
BrowserMatch ^UP.Browser CARRIER=au_wap
BrowserMatch Vodafone CARRIER=softbank
BrowserMatch J-PHONE CARRIER=softbank
BrowserMatch MOT- CARRIER=softbank
BrowserMatch SoftBank CARRIER=softbank
BrowserMatch WILLCOM CARRIER=willcom
BrowserMatch DDIPOCKET CARRIER=willcom
BrowserMatch PDXGW CARRIER=willcom

#mod_rewrite
RewriteCond %{ENV:CARRIER} ^(docomo|au_hdml|au_wap|softbank|willcom)$
RewriteRule ^hoge/$ http://wg.graphact.com/mobile/ [R=302,L]

例 2

携帯から http://wp.graphact.com/ にアクセスしたら http://wp.graphact.com/mobile/ に飛ばし、http://wp.graphact.com/foo/ にアクセスしたら http://wp.graphact.com/bar/ に飛ばす場合。

RewriteEngine on

#user agent set
BrowserMatch ^DoCoMo CARRIER=docomo
BrowserMatch ^KDDI CARRIER=au_hdml
BrowserMatch ^UP.Browser CARRIER=au_wap
BrowserMatch Vodafone CARRIER=softbank
BrowserMatch J-PHONE CARRIER=softbank
BrowserMatch MOT- CARRIER=softbank
BrowserMatch SoftBank CARRIER=softbank
BrowserMatch WILLCOM CARRIER=willcom
BrowserMatch DDIPOCKET CARRIER=willcom
BrowserMatch PDXGW CARRIER=willcom

#mod_rewrite
RewriteCond %{ENV:CARRIER} ^(docomo|au_hdml|au_wap|softbank|willcom)$
RewriteRule ^$ http://wg.graphact.com/mobile/ [R=302,L]
RewriteCond %{ENV:CARRIER} ^(docomo|au_hdml|au_wap|softbank|willcom)$
RewriteRule ^foo/$ http://wg.graphact.com/bar/ [R=302,L]

検索エンジンから来るユーザーに配慮

携帯で Google から検索してサイトを訪れた場合、表示されるのは「Google が PC サイトを調整して携帯向けにしたページ」ということがあります。この場合、.htaccess で転送の指定をしていても直接ページを開いてもらっていないため、携帯サイトに飛ばすことができません。

これを防ぐための方法を調べていたところ、Google のサポートページに以下のような内容がありました。

ウェブページを変換することを望まない場合は、ユーザーがトンランスコーダを経由してそのページを表示するときにそのユーザーを別のページにリダイレクトするように Google にリクエストしてください。リダイレクトをリクエストするには、ページの HTML ファイルのセクションに次の行を含めてください。

『携帯電話での表示用にウェブページが調整される仕組みを教えてください。 – ウェブマスターツールヘルプ』より引用

上記の内容どおり PC 向けページのヘッダ内に記述してみたところ、1 日ほどで Google が調整したページは表示されなくなり、無事携帯サイトが表示されるようになりました。

ちなみに Google が変換して表示するこの機能は、Google Wireless Transcoder と言うようです（参考：Google Wireless Transcoder 【グーグルの携帯電話用ページ変換】）。
Google Wireless Transcoder ページから、この変換でどのように表示されるか見ることができます。

確認方法

Google（モバイル）
上記 URL から検索をして、Firefox + FireMobileSimulator （ユーザーエージェントを変えられるアドオン）でモバイル表示をシミュレート。

勿論、携帯実機から検索してみて確認するのが一番ですが、何度も何度も確認しているときはとりあえずシミュレートで確認し、そこで OK であれば実機で確認、としています。

参考サイト

以下のサイトを参考にさせていただきました。ユーザーエージェントに関しては、時々最新の情報を確認しておいた方がいいかもしれません。

Windows に Ruby と RubyGems を入れる

hibiki — Tue, 08 Feb 2011 11:36:38 +0000

ちょっと前に Ruby をインストールしました。
忘れないように Ruby のインストールと、RubyGems について軽くメモ。

ダウンロード

RubyForge: Ruby Installer for Windows: Project Info から、RubyInstaller をダウンロード。

rubyinstaller-バージョン.exe をダウンロード。大体の場合、最新バージョンで良いと思います。

ダウンロードできたらインストール。

インストール

I accept the License にチェックして Next 。

Add Ruby executables to your PATH: Ruby に PATH を通す設定。手動で環境変数に追加するのも面倒なので、チェックをつけておくほうが楽です。
Associate .rb and .rbw files with this Ruby installation: .rb と .rbw を Ruby に関連づけするならチェック。

どちらもチェックをつけておく方が楽かなと思います。チェックしたら Next 。

インストール完了。これで Ruby と、RubyGems が入ったはず。

ちゃんと入ったか確認

コマンドプロンプトなどに、以下のように打ってみます。

ruby -v

Ruby のバージョンが出ます。

gem -v

RubyGems のバージョンが出ます。Gem は perl でいうと CPAN みたいなもので、これがあると色々インストールが楽になる、という認識でいいと思います…多分…。

使い方は、以下のような形。

gem install --remote <パッケージ名>

“–remote” は、リモートリポジトリから探してインストールするよ、という意味で、つけない場合にはローカルリポジトリとリモートリポジトリ（RubyForge）の両方を探してインストールしてくれるようです。

RubyGems のコマンド、最低限知っていたいもの

RubyGems 本体のバージョンを最新にする

gem update --system

RubyGems からパッケージをインストール
バージョンを指定したいときは、–version バージョンとオプションを後ろにつけてあげれば OK

gem install --remote <パッケージ名>

RubyGems で入れたパッケージのアンインストール

gem uninstall <パッケージ>

この辺りは、以下のサイトを参考にさせていただきました。

RubyGems の使い方 – WebOS Goodies

やってみると結構簡単だなと思ったので、やってみたい方がいらっしゃったら是非。色々と試せるので中々楽しいです。

何が出来るのか

LESS を使える

LESS は、CSS を動的に書き出しちゃおうぜ！もっと楽に書こうぜ！変数とか使っちゃおうぜ！というものです。以下の記事が詳しかったので、興味を持たれた方は是非。

ゼロから導入する、Ruby LESS for Windows ～素晴らしいCSSソリューション | Mach3.laBlog

おもしろそうな PaaS、Heroku を試せる

昨日書いた github の導入とあわせて行っておくと、Windows からも「デザイナーもHerokuを使ってみよう！Herokuを使って静的ページを無料で作る – KUROIGAMEN(黒い画面)」の内容が出来るようになります。

ちなみに、上記記事の内容は Win でも大体同じコマンドを打っていけば大丈夫だったのですが、sudo gem install heroku 部分だけは、sudo を取って以下のように。

gem install --remote heroku

sudo は UNIX のコマンドなので使えません。管理者として色々やるよ、という意味なので、Windows の場合はコマンドプロンプトを管理者として実行、あたりが代替えになるかなと思います。（管理者として実行でうまくいくかは試していませんので推測です。私は管理者権限ユーザーでログインしてやりました。）

ローカル環境で Apache＋Subversion（＋Dreamwever）

hibiki — Sun, 14 Nov 2010 00:55:43 +0000

作っていたデータをミスって上書きして消してしまったり、1 日分の作業とばして涙目になったりが度々あったので、ローカルに Subversion を入れて使うようになりました。この記事は以前書いておいた個人メモの内容なのですが、どうせなので公開。

ローカルで Subversion を使いたいだけなら、TortoiseSVN だけ入れれば大丈夫です。しかし Dreamweaver と連携させるには Apache と絡ませないと無理そうだったので、私はAphaceh + Subversion で使ってます。

コマンドでリポジトリを作って～という方法もありますが、私は TortoiseSVN でリポジトリ作成などはしてしまってます。

Subversion のインストール

Apache Subversion Binary Packages

Subversion for Windows | Free software downloads at SourceForge.net からダウンロード。Dreamweaver CS5 と連携させるため、Subversion のバージョンは 1.6.6 を選択。
インストール途中にある、”Install and configure Subversion modules”オプションをチェック。これで Apache の httpd.conf に必要なことが設定されることもある（なんだか完璧ではないような）

Apache の設定

Subversion インストール時に設定がされている場合もありますが、httpd.conf（大体 c:\program files\apache group\apache2\conf\httpd.conf にある）を確認。

LoadModule dav_module modules/mod_dav.so
LoadModule dav_fs_module modules/mod_dav_fs.so

上記内容の最初に「#」が付いている（＝コメントアウトされている）場合、「#」を消しておく。
さらに以下の内容を追加。

LoadModule dav_svn_module mod_dav_svn.so
LoadModule authz_svn_module mod_authz_svn.so

この追加した Module が読み込めない場合、以下の様にフルパスで書けば OK（最初からフルパスで書いてもいいかも）。

LoadModule dav_svn_module "C:/Program Files/Subversion/bin/mod_dav_svn.so"
LoadModule authz_svn_module "C:/Program Files/Subversion/bin/mod_authz_svn.so"

ここで一度 Aphache を再起動。動くか確認。
動かない場合、C:\Program Files\Subversion\bin\libdb42.dll を、C:\Program Files\Apache Group\Apache2\bin にコピー。

httpd.conf の最後に以下のように書いておく。
※ここでは F:/work/svn_apache をリポジトリの場所としてます。


    DAV svn
    SVNParentPath "F:/work/svn_apache"

ブラウザからは、http://localhost/svn/ でアクセスできます。
F:/work/svn_apache の中にhoge というリポジトリを作った場合には、http://localhost/svn/hoge で。

TortoiseSVN

tortoisesvn.tigris.org

TortoiseSVN 本体、LanguagePack を落として、両方インストールした後 PC 再起動。
デスクトップ等を右クリック、TortoiseSVN→Settings…→Languageを「日本語」に。

リポジトリ作成

リポジトリを作りたい場所で右クリック→TortoiseSVN→ここにリポジトリを作成
リポジトリに入れたいデータのあるフォルダ（ここでは hoge とする）を右クリック→TortoiseSVN→インポートを実行
hoge フォルダを、念のためリネームしてバックアップ。hoge_bk などにしておく
新しく hoge フォルダを作成して右クリック→SVN チェックアウト。これで中に元々あったファイル等が戻る

Subversion で管理してるファイルを書き出す

Subversion で管理していると「.svn」というフォルダが出来てしまいます。
サーバにアップする時や、データを誰かに送る際には Subversion からエクスポートをします。

エクスポート用のフォルダを作成して右クリック→TortoiseSVN→エクスポート

Dreamweaver から Subversion を使う時の注意

重要： Dreamweaver CS4 では、Subversion 1.4.5 クライアントライブラリを使用します。Subversion 1.4.5 より後のバージョンのクライアントライブラリは、下位互換性がありません。サードパーティのクライアントアプリケーション (TortoiseSVN など) を更新して Subversion 1.5 以降で使用する場合、更新された Subversion アプリケーションによってローカル Subversion のメタデータが更新され、Dreamweaver は Subversion と通信できなくなります。この問題には、Subversion サーバーの更新は影響しません。サーバーの更新は下位互換性があります。この問題の詳細については、www.adobe.com/go/dw_svn_jp を参照してください。

『Adobe Dreamweaver CS4 * Subversion (SVN) によるファイルの取得とチェックアウトより引用』

CS4 で使おうとすると、Subversion 1.4.5 クライアントライブラリでないとエラーがでます。
SVN 接続時に「Subversion の統合を使用してファイルを更新できません」エラーが発生する（Dreamweaver CS4）に、Subversion 1.5 以降でも利用できるようにする Subversion 変換スクリプトが配布されていますが、私はこれが上手く動きませんでした。Subversion 変換スクリプトを動かす場合には、Python を入れる必要もあるようです。

CS5 は Subversion 1.6.6 クライアントライブラリを利用するということだったので、私は 1.6.6 を入れています。

重要： Dreamweaver CS5 では、Subversion 1.6.6 クライアントライブラリを使用します。Subversion 1.4.5 より後のバージョンのクライアントライブラリは、下位互換性がありません。サードパーティのクライアントアプリケーション（TortoiseSVN など）を更新して Subversion の以降のバージョンで使用する場合、更新された Subversion アプリケーションによってローカル Subversion のメタデータが更新され、Dreamweaver は Subversion と通信できなくなります。この問題には、Subversion サーバーの更新は影響しません。サーバーの更新は下位互換性があります。Subversion 1.7 以降で動作するサードパーティのクライアントアプリケーションにアップグレードする場合は、Dreamweaver で再び Subversion を使用するには、先にアドビシステムズ社で更新を確認する必要があります。この問題について詳しくは、www.adobe.com/go/dw_svn_jp を参照してください。

『Adobe Dreamweaver CS5 * Subversion（SVN）によるファイルの取得とチェックアウトより引用』

ちなみに、普段は Dreamweaver からコミットなどを行っています。どうも Dreamweaver からのコミットと TortoiseSVN からのコミットなどを併用しようとするとエラーがでることが多いように感じているので、基本的にはリポジトリを作成するのとエクスポートするときだけ TortoiseSVN を利用し、それ以外は Dreamweaver としています。

Dreamweaver での設定

サイト設定→バージョンコントロール
・アクセス「localhost」
・プロトコル「HTTP」
・サーバーアドレス「localhost」
・リポジトリパス「/svn/hoge」

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

hibiki — Wed, 22 Sep 2010 02:05:34 +0000

ケータイサイト解体新書デザインパターンから理解する実装テクニック
	ホシナカズキ,榊原美穂（サイト制作協力）おすすめ平均モバイル制作に関わるすべてのひとに Webデザイナーがモバイルサイト案件があったときに読むと最適な1冊 Amazonで詳しく見る

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

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

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

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

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

hibiki — Mon, 09 Aug 2010 12:16:48 +0000

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 ) 設定

hibiki — Wed, 04 Aug 2010 10:26:26 +0000

「ローカルサーバー構築 ( 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


    ServerAdmin test@test.com
    DocumentRoot "C:\work\UserVirtual8080\htdocs"
    ServerName localhost:8080
    AddHandler cgi-script .cgi .pl

    
        Options Includes ExecCGI FollowSymLinks
        AllowOverride All
        Order allow,deny
        Allow from all
    
    ErrorLog "logs/localhost-error.log"
    CustomLog "logs/localhost-access.log" common



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

    
        Options Includes ExecCGI FollowSymLinks
        AllowOverride All
        Order allow,deny
        Allow from all
    
    ErrorLog "logs/localhost-error.log"
    CustomLog "logs/localhost-access.log" common

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 内に作成。

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

リンク作成シェル拡張for Windows 2000/XPの詳細情報 : Vector ソフトを探す！

例でいうと、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 環境構築

hibiki — Mon, 26 Jul 2010 16:56:59 +0000

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

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

インストール

Virtual PC
ダウンロードの詳細 : Virtual PC 2007
OS インストール済みのイメージファイル（Microsoft が無料配布しています）
Download details: IE App Compat VHD

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 に関するコーディング関連のまとめ

hibiki — Thu, 22 Jul 2010 12:17:18 +0000

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

IE8 基本情報

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

2. 実現可能な相互運用性と互換性 – Internet Explorer 8 開発者向け技術概要

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

【メモ】IE8の3レンダリングモードのまとめ / KOMOREBI || blog

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

IE8互換ビューとIE7はまったく同じではない | エンタープライズ | マイコミジャーナル

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モード: CSS 2.1やSelectors APIなど、Web標準を強く意識したモード。
IE7モード: IE7の標準準拠モードと同じ
IE5モード: IE7やIE6の互換モードと同じ

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

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

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

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

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

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

互換モード値	レンダリング動作
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 と将来のすべてのバージョンのブラウザーがサポートする最新の標準を使用。実稼働サイトには非推奨

Numb. » WebCreate

Sass を使うなら、Compass も使うと便利

Compass って？

Compass はいろいろな Mixin が含まれている

監視も簡単、流用も簡単

画像の縦横 px を取得でき、計算に使える

その他の機能

インストール

注意点

zencoding v0.7 Wrap With Abbreviation メモ

携帯から PC サイトへアクセスした際、携帯サイトへ転送する

.htaccess の内容

例 1

例 2

検索エンジンから来るユーザーに配慮

確認方法

参考サイト

Windows に Ruby と RubyGems を入れる

ダウンロード

インストール

ちゃんと入ったか確認

RubyGems のコマンド、最低限知っていたいもの

何が出来るのか

LESS を使える

おもしろそうな PaaS、Heroku を試せる

ローカル環境で Apache＋Subversion（＋Dreamwever）

Subversion のインストール

Apache の設定

TortoiseSVN

リポジトリ作成

Subversion で管理してるファイルを書き出す

Dreamweaver から Subversion を使う時の注意

Dreamweaver での設定

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

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

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

httpd.conf

httpd-vhosts.conf

VirtualPC + IE6,IE7,IE8 環境構築

インストール

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

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

IE8 基本情報

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

各モードの内容

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

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