Sublime Text 3のコマンドラインツールが便利だ

ST3のコマンドラインツールをインストールしよう

Terminal上のコマンドでテキストファイルを編集するとき, viとかpicoとか使ってたんだけど, Sublime Text 3を利用できると知って「まじかー早く教えてくれよー」と言いながら設定しました.

OS X Command Line - Sublime Text 3 Documentation

既に設定ファイルがSublime Text 3の中に含まれていたらしく,

ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" ~/bin/subl

Terminalでこれを実行すれば設定終了とのこと.
ちなみにSublime Text 2用のページもあったので, 自分で探して見てください.

使い方

コマンドはsublを使用し,

subl hogehoge.txt

こんな感じで実行すると任意のテキストファイルがSublime Text 3上で開きます.

また, ディレクトリごと開くとサイドバーにそれ以降のフォルダツリーが表示されます. 便利です.

cd ~/~/project_directory
subl .

Ruby on RailsでLESSを使おう

$ rails new hogehoge

で自動作成したプロジェクトのGemfileでは, デフォルトでSassが使えるように指定されてますよね.

# Use SCSS for stylesheets
gem 'sass-rails', '~> 4.0.2'

しかし僕はLESSを使いたいので, 書き換え.
less-rails を使います, リンク先のReadmeを参考にしましょう.

Gemfileを以下のように書き換え,

# - gem 'sass-rails', '~> 4.0.2'
gem 'less-rails'
gem 'therubyracer' # これも追加しないとエラー出る, はず

でbundle installすれば,

....
Using less (2.5.0)
Using less-rails (2.5.0)
....

うん, これで完了かな?

Ruby on Railsを触り始める

Ruby on Rails チュートリアル：実例を使って Rails を学ぼう

良いドキュメント.
昨夜人の家に泊まってたんだけれど, 一人寝れなかったのでパソコン借りて一章をざっと読み通した. 家に帰ってから実際に自分のパソコン上で一章読み直しながら開発環境整えたりサンプルのプロジェクトをheroku上にデプロイするところまでやった.
Herokuを初めて使ったけど, あんなに和風をフィーチャーしてたんですね.

heroku-toolbeltはhomebrew経由でインストールできるので, homebrewerのみなさまはそちらからインストールするのがオススメです.

$ brew install heroku-toolbelt

何でも屋という名の器用貧乏になるつもりはないけれど, 主流の言語や文化を全然知りませんってのは嫌だから, バックエンドに関してもざっと勉強します. もちろんPHP, Pythonとかもね.

Macのドキュメントマネージャー“Dash”は良いよ

まだ理解が未熟なプログラミング言語で壁にぶち当たった時どうしていますか.
公式ドキュメントを見に行く? Stack Overflowに聞きにいく? とにかくググる?

Macにはそんな手間を省く, ドキュメントマネージャーアプリがあります.

それがDashです. みんな使おう.

Dash - Documentation Browser, Snippet Manager - Kapeli

無料でも使えるけど, かなりの頻度で課金を促してくるのでさらっとライセンスを買っちゃいましょう. 後々のことを考えたら安い金額だと思います.

Dashで高速プログラミング

最近LESSの使い方をドキュメントを見ながら覚えているのですが, それにもDashを利用しています.

ただドキュメントを見るだけではなく, 単語検索にも対応しているので, 例えばjQueryの.add()ってどう使うんだっけなどと思った際には, jQueryを指定して.add()と打てば即座にドキュメントが表示されます.

僕は起動ショートカットキーにShift+⌘+dを設定しているので（何かしらのアプリのショートカットとバッティングしそうですが, ）分からない事があったらすぐ立ち上げて調べる事が出来きています.

数多くの言語のドキュメントに対応しているので, 是非公式サイトで確認してみてください.

既存のプロジェクト内のCSSをLESSに書き換え

進行中のプロジェクトのCSSを, LESSに書き換えました.

具体的には, 拡張子を.cssから.lessに変えて, セレクタを入れ子状に直すくらいしかやってないんですが. これからMixin機能やimport機能などの使いどころを探しつつ, 利用していこうと思います.

LESSでセレクタを入れ子状に書くと, 結果的にコードの見た目がHTMLの構造と似かようことになるため, HTMLとLESSを見て間違いに気がつきやすくなっている感じがします.

LESSからCSSへのコンパイルですが現状ではLESS.appを使って即時コンパイルしています. このような使いやすいGUIツールが無料で利用できるのは本当に良いですね.

LESS.app For Mac OS X

リンク先に動画があって, CSSファイルしか無い状態から, LESS.appをプロジェクトに適用していく手順を見ることができます.

動画の中で, 事前にless, cssという名のフォルダを作っておけばCSSが出力されるフォルダが自動的に指定されて便利, とあるのですが, デフォルトではフォルダ検出してくれませんでした.

設定画面の“Automatically set CSS output paths when possible”にチェックが入ってるか確認してみてください.

Sass, LESS調べて思ったこと

Hello, World.

WEBやフィジカルコンピューティング, インターフェイスデザインについて学んでいる学生です. メモ代わりのブログを始めます.

では本題へ,

Sassを導入すると構造的にCSSを書けるし, 幸せになれると聞いたので色々調べました.
Sassとは, そしてSassと合わせてよく聞くCompassとは何だ, と思ってググっていたら, LIGのブログ記事がとても参考になりました. 

CSSの常識が変わる！「Compass」、基礎から応用まで！ | 株式会社LIG

それで, 「なるほど、Sassを使えば構造的に書けるだけじゃなくImport機能やMixin機能で良い思いが出来るのか。」とは思ったのですがすぐ導入する気にはなりませんでした.

理由としては,

Sass, Compassを使うための学習（慣れ）に時間かかりそう

これ一点.

個人的な問題なので他の人には参考にならなそうですね. めっちゃ便利にCSSが書けることは確かなのでみなさんはさらっと導入してください.

いままでコード書いたりしてきて気づいたのですが, 自分は比較的頭の回転が遅いんですよね... 新しいものを導入したりするのに時間がかかってしまうために, できるだけ簡単なものから覚えていきたい気持ちがあるんです. だから, LIGの記事読んで便利だけれども, ちょっと腰が重いなーと思ってしまいました.

そうして, そういえばLESSってどうなのよと思って, これまたググっていたらahomuさんが良い記事を書いていたのを見つけました.

Sassよりラクチン，LESS.appで簡単CSSコンパイル生活！（Mac限定） ::ハブろぐ

これを読んで, 「Sassよりラクチンなのか, しかもLESSとSassの記法はかなり近いから一通りLESSを習得した後でSassに移行すれば良いのではないか」という考えに到りました.

ということで僕, LESS始めました.