月: 2012年1月

投稿日:

Mac OS X Lion環境NetBeans IDEにプログラミング用フォントRicty導入

フォントにそこまでこだわりがある訳ではないですがNetBeans IDEのデフォルトの日本語はかなり見難いと感じていたところ、以下ツイートを見てRictyフォントなるものを導入してみようと思ったけど結構苦労したのでそのメモ。

https://twitter.com/#!/Stocker_jp/status/158491398436429824

INDEX

  1. 環境
  2. 前置き
  3. Homebrewインストール
  4. FontForgeインストール
    1. FontForgeインストールでエラーその1
    2. FontForgeインストールでエラーその2
    3. FontForgeインストール成功
  5. Rictyの生成
  6. NetBeans IDE の設定

環境

  • Mac OS X Lion 10.7.2
  • Xcode 4.2.1
  • NetBeans IDE 7.1
  • ターミナル用エディタ nano

前置き

まず、公式のプログラミング用フォント Rictyを見てみると、これまではTrueTypeフォントで配布してたがライセンスの問題から万全を期すために最新版は生成スクリプトのみの配布、そして、生成方法としてFontForgeが必要とのこと。
FontForgeというのはフォントの作成や編集ができるアプリケーションらしい、というわけでFontForgeのインストール方法を調べてみることに。

Homebrewインストール

Google先生に尋ねてみて最初にヒットしたサイトがこちら。
Cocoa Emacs on OSX LionでRictyフォントを使ってみた！ – 空繰再繰

参考サイトを見てみるとFontForgeをインストールするにはHomebrewというパッケージマネジメントツールが必要とのこと。

早速Homebrewへ行くと中ほどに”Install Homebrew Today!”とあったのでクリック。

Homebrew
Install Homebrew Today!をクリック

githubのHomebrewインストール解説ページに飛ばされたので解説にある通りターミナルコマンドで以下を入力。

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.github.com/gist/323731)"

暫し後インストール完了。
/usr/local/ にHomebrew含むファイル一式が追加されており試しにバージョン確認してみるときちんと表示されました。

$ brew -v
0.8.1

FontForgeインストール

FontForgeインストールでエラーその1

参考サイトに習ってターミナルよりFontForgeをインストール

$ sudo brew install fontforge --use-gcc --without-python

すると以下のようなエラーが

sudo: brew: command not found

sudo無しで実行すると通ったので /usr/local/ の権限がrootになっていないのが問題のよう。

$ sudo chown -R root /usr/local

で /usr/local/ の権限をrootに変更。
再度fontforgeインストールしようとすると問題なく brew は実行、しかし別のエラーが。

FontForgeインストールでエラーその2

Error: GCC could not be found

上記エラーが発生。GCCなるものが無いとのこと。
GCCについて調べてみるとフリーのコンパイラでXcodeインストール時に同時にインストールされるらしい。Xcodeはつい最近インストールしたためGCCもインストールされているはず。
念のため /Applications/Install Xcode から再度インストール。

エラー・・・

入っているはずのものが認識されないのでパスが通っていないのかな、ということでMacでパスを通す方法を調べてみることに。
どうやらホームディレクトリ（/users/ユーザ名/）に不可視ファイルで.bash_profileや.bashrcがあるとのこと。（デフォルトはないみたい）
というわけでホームディレクリに移動してファイルがあるか確認。

$ cd /users/ユーザ名
$ ls -a

ファイルが見つからなかったので新規に作って /usr/local へのパスを追加する事に。

$ nano .bashrc

で.bashrcファイルを作成して以下を記述。

export PATH=$PATH:/usr/local

反映させるためにsourceコマンドを。

source ~/.bashrc

パスも通っただろうし再度FontForgeインストール実行。

$ sudo brew install fontforge --use-gcc --without-python

エラー・・・
という訳で再びGoogle先生に聞いてみる事に。

FontForgeインストール成功

いろいろ調べてたどり着いたのがこちら。
Mac デ Homebrew ノススメ | CaCi – Takahiro’s Kitchen
Xcode4.2+GCCは問題あり、という内容でたどり着いたのですが、HomevrewインストールからFontForgeインストールまでこちらのサイトで事足りる、という程参考になりました。

まずはパスの設定から。

Homebrewで入れたパッケージを優先的に使うためには/usr/binより/usr/local/binがPATHの前になければなりません。

というわけで、先ほどの.bashrcファイルを編集します。

$ nano .bashrc

PATH=/usr/local/bin:/usr/local/share:$PATH
export PATH

続いてGitのインストールとHomebrewアップデート

$ sudo install git
$ brew update

そして問題のGCCは使えないので代替の方法を。（詳しくは参考サイトを）

$ sudo brew install --use-clang ffmpeg

ようやくFontForgeインストール！！

$ sudo brew install fontforge --use-clang

暫し後FontForgeインストール成功。
/usr/local/Celler/fontforge/ が追加されています。

Rictyの生成

プログラミング用フォント Rictyの「生成スクリプトの配布」より最新バージョンをダウンロード。（2012/01/31現在 version3.1.3）

Inconsolata 公式サイトより OpenType fileをダウンロード。

M+ と IPA の合成フォントのダウンロードより”Migu 1M”をダウンロード。

それぞれ解凍して1つのフォルダへ。（私はRitcyフォルダに入れました）

ターミナルでフォルダに移動して以下コマンドで生成。

$ ./ricty_generator.sh auto


無事生成されたので、インストール。

NetBeans IDE の設定

“NetBeans > 環境設定 > フォントと色”のフォントでRictyを選択。

NetBeans IDEのフォントをRictyに変更出来ました！！

投稿日:

WordCrab Fukui 2012に参加してきました

2012/01/21に開催されたWordCrab Fukui 2012に行ってきました。
きっかけはWordCamp Kobe 2011での@teckingさんの告知TLがぐっと来たので。

01/20

福井県は初めてだったので念のため前日入り。行程は以下の通りで8時間くらい。
07:10 高松 – 09:50 三ノ宮（フットバス）
10:08 三ノ宮 – 10:28 大阪（以下JR）
11:15 大阪 – 13:15 敦賀
13:39 敦賀 – 14:30 福井

車内から雪景色を見るピカチュウの図
車内から雪景色を見るピカチュウの図

道中は結構雪景色が見れたんだけど福井駅に着いてみると特に雪もなく寒くもなくちょっとしょんぼり(´･ω･`)

前日あまり眠れなかったのでホテル到着後は駅周辺ぶらついたり仮眠取ったり仕事したりで終了。夜中に東京組の@jim0912さんから翌日の一乗谷へのお誘いを頂いたので同行させてもらうことに。

01/21

一乗谷朝倉氏遺跡・一乗滝

朝9時にホテルまで迎えに来て頂くことに・・・諸事情によりホテル前で目印のピカチュウ片手に30分程待ちぼうけ。
東京組の方々と合流し一路一乗谷朝倉氏遺跡、一乗滝へ。

歴史詳しくないので以下画像をつらつらーっと。
皆さん城攻めについて真面目に話してるかと思いきや雪に飛び込んだり佐々木小次郎像と戯れたりと仲良いなぁと。

井戸について考察する東京組の方々の図
井戸について考察する東京組の方々の図
一乗滝ピカー
一乗滝ピカー
小次郎と一緒♥
小次郎と一緒♥

WordCrab Fukui 2012

午後から本題のWordCrab Fukui 2012開始。

プログラムは以下の通り（敬称略）。私はCreator’s Roomのセッションを拝聴。
当日のアーカイブは@khoshinoさんがYoutubeにアップされているので、“WordCrab Fukui 2011”へ。

  • 恋する♥WordPress（森川徹志）
  • Creator’s Room
    • お手軽チューニングで快適生活（古田一生）
    • 現場のワークフローに即したテンプレート構築方法（南部正光）
  • User’s Room
    • 諸国漫遊 WordPress事例集（吉村佳志子）
    • モバイルツールでラクラクサイト管理（林美和）
  • 悩めるクリエイター・ユーザーのための大質問大会
  • ライトニングトーク

本編・懇親会に関しては他の方がレポート書かれていると思うので割愛。

大質問大会でのWordPressコーディング基準云々の質問は実は私がしたもので、解答としては以下を頂戴しました。ご回答ありがとうございました。（WordPressコーディング基準）

  • デフォルトテーマでも違反したものがあるのであくまで参考程度でいい（@odysseyさん）
  • WordPressのバージョンによって基準が変わっていることがあるので仕方ない（以下@lilyfanjpさん）
  • テーマ・プラグインの場合はある程度外れてもいいのかな？
  • Twenty Elevenの子テーマを作る場合にはTwenty Elevenを基準に
  • インデントの取り方・括弧の書き方は統一されている

結論としてはそんなに気にしなくても、といった感じでしょうか。

ただ、以下 wp-admin/admin.php(WordPress3.3.1現在) を見ただけでも波かっこの後ろに半角スペースがある場合とない場合（あるのが正しいはず）が混じっているのが気持ち悪いなーというのはありますが、たぶんそんなに気にするほどでもないのかな？

if ( isset($_GET['import']) && !defined('WP_LOAD_IMPORTERS') )

if ( isset( $_REQUEST['post_type'] ) && post_type_exists( $_REQUEST['post_type'] ) )

あと採用されなかったもので「子テーマを使うときには親テーマのID、CLASS名、に沿う必要があるのか？」といった趣旨の質問をしてたのですが、なんでこんな質問書いたか不明だけど、以前子テーマで制作しようとしてなにかしら親テーマの制約に縛られてた気がするので書いたのかな？
ここら辺は次回の「第2回WordPressお茶会 WordBench香川」で聞いてみたいところ。

* * *

という訳で懇親会で食べたカニも美味しかったし、いろんな方々に絡んで頂けたので楽しいイベントでしたー。
WordBench福井運営のみなさんありがとうございました！！

ピカチュウもカニに大満足の図
ピカチュウもカニに大満足の図
投稿日:

Windows7でSCSS+Compass（導入編）

半年ほど前からSCSS(Sass)やLESSについては聞いていたのですが腰が重く手をつけていなかったのですが最近TwitterのTLでよく見かけたので導入してみました。

明確な定義はよく分かっていませんが「CSSを拡張できるmeta言語」という説明をよく見かけたのでCSSを効率的に記述できるようになるフレームワークのようなものという認識です。

SCSSとSassが混同してしまいそうですが、Sassから派生したのがSCSS(Sassy CSS)らしく、記述方法もCSS同様 a { display: none; } の様に波括弧を使用しており慣れているので以下ではSCSSで統一します。

参考にさせて頂いたサイト

この記事を見ずとも参考サイトさえ見ればSCSS/LESSが理解できる、というくらい情報が豊富だったので列挙しておきます。

Less & Sass Advent calendar 2011
昨年度のAdvent Calender。SCSS/LESSに限らずCSSmeta言語やCompassフレームワークについて等、最新・マニアック？な情報が豊富です。以下参考サイトはほぼこちらから。
CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 – (DxD)∞
SCSSとLESSのどちらを導入するか迷って、SCSSに決めたポイント – 眠る前に布団にはいろうか
まずSCSSとLESSどちらを導入するか、という点で参考にさせて頂きました。
LESSはnode.jsが必要（node.js分からない）、もしくはクライアント側JavaScriptで動的に生成（動的なのでパフォーマンス面で不安）という理由からRubyさえあれば導入できるSCSSにしました。
Sass を今すぐ実務で使おうよ！ « NAVER Engineers' Blog
SCSSを導入して実際にどのように運用すれば良いのか、という実務について。
個人的には便利だけどクライアント側に導入してもらうには敷居が高いので制作時の効率化の為に使う、というのが現在の考えです。
サーバによってはSCSS自体導入不可なところもありますし。
hamashun.me : Windows PC に Ruby と Sass を導入する方法
既にWindowsにRubyをインストールしていたのですがバージョンが古かったこともあり最新版を導入する際に参考にさせて頂きました。
CSS書くならcompass使った方がいいよ。SASS使ってる人なら特に。 | howtohp
Compassを使ってSassのCSS出力を手軽にしよう｜Blog｜Skyward Design
SCSSを更に便利に使えるフレームワークCompassの導入・使い方について。
CSS3のborder-radiusやReset用CSSのMixinが含まれていて開発効率アップしそう、またSassコマンドより分かりやすいCompassコマンドが便利です。
NetBeansではじめるSCSS | Webエンジニアライフ
Netbeans IDE用のscss-editorの解説。プラグイン自体は便利だと思うのですが私の知識不足の為かCompass導入時にコンパイルエラーが発生してしまったので自動コンパイルは使用せずに整形の為に利用しています。

WindowにRuby、SCSS、Compassをインストールする

SCSSはRubyベースなのでWindowにRubyをインストールする必要があります。
hamashun.me : Windows PC に Ruby と Sass を導入する方法に詳しくありますが一応・・・。

Windows7にRubyをインストール

RubyInstaller for WindowsのDownlaodよりRubyInstallerをダウンロード。
rubyinstaller-1.9.3-p0.exe（12/01/17現在）を使用しました。
rubyinstaller

ダウンロードしたrubyinstaller-1.9.3-p0.exeを起動して手順どおりにインストール。
OSがCドライブの場合Cドライブ下にRuby193フォルダが生成されます。
コマンドプロンプトを起動して以下コマンドを入力。

ruby -v


上のようなエラーが出てくると思うのでRubyへのパスを通す必要があります。
“コントロールパネル > システムとセキュリティ > システム > システムの詳細”よりシステムのプロパティが開くので”詳細設定タブ > 環境変数”のシステム環境変数の中のPathの末尾に C:¥Ruby193¥bin を追加します。

環境設定を保存後再度上記コマンド入力で以下の通り現在のRubyのバージョンが表示されパスが通ったことが確認できると思います。

RubyGemsでSCSS、Compassをインストール

Rubyインストール時にRubyのパッケージ管理ツール”RubyGems”がインストールされているのでそれを用いてSCSS、Compassをインストールします。
が、その前にRubyGems自体のアップデートをしておいたほうが良いらしいのでコマンドプロンプトで以下コマンドを。

gem update --system

RubyGemsがアップデートされたら以下コマンドでSCSS、Compassをインストールできるのですが、試してみたところCompassのインストール時にSCSSもインストールされるようなのでSCSSのインストールは不要かもしれません。 

gem install sass

gem install compass

以上がWindows7でSCSS+Compass（導入編）となります。
記事が中途半端ですが仕事があるので実践編は明日以降にしたいと思います。