shinya deguchi deroter

Roole(v0.1.3)導入メモ

第4のCSSプリプロセッサ「Roole」。
出始めより少しバージョンが上がってそれなりに使えるようになったので、導入メモ。

どんなことができるかは、公式ページ参照。
Roole

インストール

[email protected]系(開発版)自分用メモ

[email protected]系でStylusのコンパイル、Styledoccoの生成、CSSファイルの結合・minifyを自動化するためのメモ。
環境の構築はpackage.jsonで行う。

gruntに関連したpackage.json周りはこのページが詳しい。
Gruntによる継続的なビルド環境を求めて〜 package.jsonと0.4.0のこと ::ハブろぐ

準備

MacOS X ローカル環境に PHP＋MySQL を入れる

MacOS X 10.8.2 環境でローカルにWeb制作環境を構築する際の手順メモ。前提となるバーチャルホストの構築手順は「shokuto / osx10.8_virtual-host.md」に書いてますので、これはその続き。今回はPHP＋MySQLを入れるところまで。例によって自分用メモ。

注意

OS Xのバージョンによって設定ファイルが微妙に違っているようだし、マシンによってうまくいかないことも多々あったりするのですが、ここは作業メモなんで詳しいことはよくわかりません。

手順

MacOS X ローカル環境（バーチャルホスト）構築メモ

MacOS X 10.8.2 環境でローカルにWeb制作環境を構築する際の手順メモ。まずはバーチャルホストを構築する。ホームディレクトリの直下に「Sites」フォルダを作り、ここをローカル環境のルートにする。その中に「test.local」というフォルダを作り、これをバーチャルホストの一つにする、という設定。詳しい手順は「gaspanik / mt-lion-amp.md」にあるんだけれど、より詳しく自分用メモ。長くなるので、とりあえずApacheの設定まで。

注意

OS Xのバージョンによって設定ファイルが微妙に違っているようだし、マシンによってうまくいかないことも多々あったりするのですが、ここは作業メモなんで詳しいことはよくわかりません。

手順

黒い画面の環境構築メモ

Macのターミナル（通称：黒い画面）でWeb制作の環境を構築する手順メモ。とりあえずCSS Preprocessorとかが使えるようにするところまで。ちなみにOSX 10.8.2です。

注意

書いている本人はこのへん初心者で、これは別にベストな方法ではなく、間違いもあるかもしれません。さらに失敗した手順もメモとして残しています。上から順にやっていくと同じところで同じように失敗します（笑）ので、試すときは一読してからどうぞ。

先に見ておいた主な記事

Hayakuの使い方

CSSを「速く」書くためのSublime Text 2のパッケージ「Hayaku!」について。

インストール

Package Controlからどうぞ

使い方

Recommended Sublime Text 2 Packages for Web Developers.

Update

「Browser Support」を追加しました。

2013 Spring & Summer

こもりが使っているモノやそうでないものも含め、なんとなくWebデザイナーやWebデベロッパーな人たちに便利そうなのを集めてみました。

Apache+PHP+MySQL（Homebrew） on Mountain Lion

Mountain Lionの中に入ってるApacheとPHPを有効化しつつ、Homebrewを使ってMySQLをインストールするまで

※XcodeとCommand Line Toolsぐらいは入れておかないとだめなはず

Mountain Lion 内のApacheを起動

システム環境設定から消えてるので以下のコマンドでApache起動

sudo apachectl start

	NameVirtualHost *:80

	<Directory "/Users/ユーザー名/Sites">
	Options Indexes FollowSymLinks MultiViews
	AllowOverride All
	Order allow,deny
	Allow from all
	</Directory>

	<VirtualHost _default_:80>

	{
	"bold_folder_labels": true,
	// サイドバーのフォルダ名を太字に

	"caret_style": "phase",
	// キャレットのスタイルを変える。他に「smooth」「blick」「solid」「wide」など

	"draw_minimap_border": true,
	// ミニマップの表示位置にボーダーを付ける