プログラム

Mac上のEclipse(4.4 Luna)でLessの編集&CSSへのコンパイル

Webデザインを行う際に、知ってしまったらもうCSSへは戻れないのがLessやSassなどのCSSプリプロセッサです。

最近はLessのコンパイルまでやってくれる便利なエディタがいろいろあるようですが、PHPやらJavascriptやらを全部自分で作っているような場合はEclipseで完結した方が便利です。

Eclipse上でLessを扱うのなんて当たり前の時代かと思いきや、以外と引っかかったのでメモしておきます。

Step1 Eclipseへのプラグインインストール

・Xtextのインストール(Lessプラグインの動作に必要とのこと)

「新規ソフトウェアのインストール」で次の更新サイトを指定してインストール

http://download.eclipse.org/modeling/tmf/xtext/updates/composite/releases/

・Eclipse plugin for LESSのインストール

同じく、次の更新サイトを指定してインストール

http://www.normalesup.org/~simonet/soft/ow/update/

参考

http://news.mynavi.jp/column/ide/132/

Step2 Node.jsおよびLessコンパイラのインストール

・Node.jsのインストール

次のサイトの「INSTALL」からインストーラーをダウンロードしてインストール

https://nodejs.org/#download

・lesscのインストール

ターミナルで次のコマンドを入力

npm install less

・何かの時にターミナルから使用できるように、パスに追加 (Eclipseからしか使わない場合はやらなくてもOK)

~/.bash_profileを編集して次を追加(隠しファイルなのでターミナルからviを使うなどしてください)

export PATH=$PATH:~/node_modules/less/bin

Step3 Eclipseでの設定

(各Lessファイルごとに行う必要があります)

「実行」>「実行の構成」で「LESS Compiler」を右クリックして「新規」で実行構成を新規作成。次の項目を設定。

名前:対象のlessファイル名など

LESS command:/Users/yuuki/node_modules/less/bin/lessc
入力ファイル:対象のlessファイルのフルパス
出力ファイル:作成するcssファイルのフルパス
(Set to defaultにチェックがある場合はlessファイルと同じフォルダに作成される)

 

続いて、上部のタブで「環境」を選んで「新規」を押して環境変数設定を行う。

「新規環境変数」画面で、

名前:PATH
値:/usr/local/bin

 

この環境変数の設定が間違っていると

env: node: No such file or directory

というエラーで怒られます。

Step4 Lessの修正

この状態でコンパイルしようとすると、

Unable to interpret argument O0 - if it is a plugin (less-plugin-O0), make sure that it is installed under or at the same level as less

というエラーで怒られます。 どうも、プラグインからLesscを実行する際に、不明な「O0」というオプションが指定されていて、lesscが怒っている様子。

幸い、lesscはスクリプトファイルなので、次の編集を行いって回避します。

1. エディタでlesscを開く
2. 次のSwitch文のdefault:行に移動する

  switch (arg) {
    case 'v':
    case 'version':
    ・・・
    ・・・
    default:   <- ここ

3. default:行の直前に次の2行を追加する

    case 'O0':
      break;

4. ファイルを保存する

これで、lessc が「O0」というオプションを無視するようになりました。

Step5 実際にコンパイルしてみる

他のCやJavaと同じように対象のファイルを開いて、上部の「実行」ボタンを押すなどしてコンパイルする。

Compilation successful.

と表示されて、対象のCSSファイルが生成されればOK

MacにPython + NLTK + MeCab + R

タイトルの通り、おおざっぱなインストールメモ

(さらに…)

phpdocumentor 1.5の文字化け対策

JavaDocのPHP版であるphpdocumentor。

文字化け対策で検索すると、テンプレートを書き換えるとあるけれど、1.5のテンプレートを見るとどうも変数で処理しているみたい。1.5からはコマンド時のオプションで指定できるようになったようです。

phpdoc run –charset utf-8 -d srcdir -t outputdir

DataTable(jQuery)のテスト

WordPressの記事で大きなテーブルを表示する用事があったので、jQueryでテーブル装飾を行うプラグインのDataTableをテスト中。

 

(さらに…)

「HTML5 Canvas」(O’REILLY )のサンプル実行結果

1つ前のポストで話題にしていたO’REILLYのサンプルコードの実行結果です。
(さらに…)

「HTML5 Canvas」(O’REILLY )のコードとFirefoxの32Bitモード

タイトルの書籍内にあるサンプルコード(CH5EX5)がMacOS 10.7のFirefox17で動作しなかったので調べてみた。

Chromeやsafariでは動作する。今までPDFプラグインの関係でFirefoxを32bitモードで動かしていたけれど、64bitモードに戻したら動作するようになった。

JavaScriptのsetInterval()あたりで引っかかっているようだった。

今回のコードは次のとおり。 (さらに…)

CakePHPをドキュメントルート以外にインストールする方法

CakePHP(2.2.4)をルートフォルダ以外で動かそうとすると、

Missing Controller
Error: AptanaController could not be found.
Error: Create the class AptanaController below in file: app/Controller/AptanaController.php

などと言われて動作しない。

~/.htaccessに以下を追加すると解決。

RewriteBase /Webルートからの相対位置/


RewriteBase /aptana/CakeTest/
(http://127.0.0.1/aptana/CakeTest/)

また、
ルートフォルダの.htaccessだけでなく
~/app/.htaccess
~/app/webroot/.htaccess
にも同様の設定を追加する必要がある


~/app/.htaccessの場合
RewriteBase /aptana/CakeTest/app/

~/app/webroot/.htaccessの場合
RewriteBase /aptana/CakeTest/app/

gvimの設定

最近また gvimを使い始めた。
で現在の設定(追加分)を保管。

ほとんど
http://d.hatena.ne.jp/momo_dev/20071209/p3
のまんま
” Yuukis

set backupdir=C:\usr\tmp
set directory=C:\usr\tmp
set tabstop=4
set softtabstop=4
set shiftwidth=4

set gfn=Bitstream\ Vera\ Sans\ Mono\ 12
colorscheme desert

AptanaStudio3でファイルを開けない場合

AptanaStudio3
(Aptana Studio 3, build: 3.2.2.201208201020)

でPHPファイルを開こうとしたら

「エラーが発生しました。詳細については、エラー・ログを参照してください。」

com.aptana.editor.findbar.impl.FindBarDecorator$2.<init>(Lcom/aptana/editor/findbar/impl/FindBarDecorator;Ljava/lang/String;Ljava/lang/String;Ljava/lang/String;Ljava/lang/String;Lcom/aptana/editor/findbar/impl/FindBarDecorator;Ljava/lang/String;)V

といわれて開けない。

clean.bat
(AptanaStudio3 -clean)

で起動したら開けた。

AptanaStudioで使うGitの変更

数日前からAptanaでGithubへつないで遊んでいるけれどuser.nameなど基本的な設定フォームが無くて困る。
Aptanaをインストール時に自前のGitを選ばなかった場合、

~\Aptana Studio 3 Workspace\.metadata\.plugins\com.aptana.portablegit.win32\bin\git.exe

のようにワークスペースごとに配置されたものを利用しているみたい。これはこれで便利だけれど、今回は自前で用意して設定。
Aptana以外からGithubすることもあるかもしれないし。

下のURLからGit for Windowsをダウンロード&インストール
http://code.google.com/p/msysgit/downloads/list?q=full+installer+official+git

Aptanaの設定->チーム->Git
でGit.exeのパスを変更

Windows版の場合、Git bashという専用のシェルが用意されていて、ここからコマンドで設定。

Top