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

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

Compass って?

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

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

@import “compass”; で呼び出して使えます。自分で書かなくていいから楽ちん。 “Sass を使うなら、Compass も使うと便利” の続きを読む

zencoding v0.7 Wrap With Abbreviation メモ

aaaaaa
bbbbbbbbb
ccccccccc

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

  • ファイル名:aaaaaa
  • ファイル名:bbbbbbbbb
  • ファイル名:ccccccccc
  • 例2. 三行選択して、html:5>ul.hoge>li#0$*>a[href=”#$#”]{$#}

    
    
    
    
    
    
    
    
    
    
    

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

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

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

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

    .htaccess の内容

    それぞれ、.htaccess は http://wp.graphact.com/ 直下においているものとして 2 例。 “携帯から PC サイトへアクセスした際、携帯サイトへ転送する” の続きを読む

    Windows に Ruby と RubyGems を入れる

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

    ダウンロード

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

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

    ダウンロードできたらインストール。 “Windows に Ruby と RubyGems を入れる” の続きを読む

    ローカル環境で Apache+Subversion(+Dreamwever)

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

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

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

    Subversion のインストール

    1. Subversion for Windows | Free software downloads at SourceForge.net からダウンロード。Dreamweaver CS5 と連携させるため、Subversion のバージョンは 1.6.6 を選択。
    2. インストール途中にある、”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 をリポジトリの場所としてます。

    <Location /svn>
        DAV svn
        SVNParentPath "F:/work/svn_apache"
    </Location>

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

    TortoiseSVN

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

    リポジトリ作成

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

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

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

    1. エクスポート用のフォルダを作成して右クリック→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」