イケてる日本語等幅フォント “Source Han Code JP” というものがリリースされたようなので、iTermのフォントをこれに変更してみた。
下記からダウンロードできる。
Release Fonts version 1.002 (OTF, OTC) · adobe-fonts/source-han-code-jp
DL後はふつうにインストールすればOK。
Prefecences > Profiles > TextからChange Fontで表示フォントを変更。
ちなみにSublime Textで表示フォントをこれにする場合は、
cmd + , でsettingをひらき、
"font_face": "Source Han Code JP"
を追加する。
なんとなく僕は、STの場合はデフォルトの方が見やすいなあと思ったので、そのままにしておいた。
エディタはSublime Textを使ってるのですが、ATOMが良いという記事をいくつか見かけたので、試しに使ってみました。
git使うなら断然こっちの方が良さそうだった。
ヤバイね。
パッケージをインストールしたらさらに便利になりそう。
最初がデカすぎた。cmd + -でOK
Setting > Show Invisiblesにチェック。
スペース・タブを表示してくれる
Setting > Show Indentにチェック。
インデントが分かりやすく表示される
引き続き使ってみて、パッケージなどインストールしてカスタムしてみる。
コマンドラインからテキストを編集する場合、いっつもvimでやっていたのですが（だいたい調べるとvim hogeとか出てくるから）
Sublime Textを起動することもできるみたい。
コマンドラインから下記を入力
ln -s /Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl /usr/local/bin
これで
subl hoge
で、hogeをSublime Text で開くことができる。
自分でも正確に理解はしてないのですが。
ターミナルでコマンドを打つと、シェルがそのコマンドを受け取ってOSがプログラムを実行する。
そのコマンド群を /usr/local/bin に保存してる。
Sublime Text を /usr/local/bin にシンボリックリンクしたので、コマンドラインから実行できるようになった。
という感じだと思います。
bowerとは、jQueryとかnormalize.cssとか、フロントで使うパッケージを管理し、簡単にインストールできたりするツールです（あんまりよく分かっていない）
導入してるパッケージをbower.jsonに書いておけば、コマンドひとつですべてダウンロードしてきてくれるのです。
npm install -g bower
プロジェクトのディレクトリまで行って
bower init
ぜんぶenter or yes でOKな気がする（bower.jsonができあがるだけ）
次回以降はbower.jsonをコピーすればよい気がする
試しにjqueryをインストールしてみる
bower install jquery --save
bower_conponentというディレクトリ名が気に入らない場合は.bowerrcを作成し、下記を記入
{
"directory": "vendor"
}
以降、下記コマンドでパッケージを引っ張ってこれる
bower install
このブログはコーディングとかのことばっかり書いていますけど、実は僕デザイナーなのです。
なのでデザインについての記事も書きます。
オブジェクト > トリムマークを作成選択 > オブジェクト > 余分なポイント でゴミポイントを選択し削除書式 > フォント検索 で、環境にないフォントが0になっていればOKファイル > パッケージ でリンクファイルをまとめる。少し補足
基本的に.psdで大丈夫だが、.epsの方が軽い。
冊子など写真が多いデータの場合は、.epsの方が望ましいらしい。
（.psd印刷が大量にあると、データが重すぎて印刷屋さんが死ぬ）
ただし.psdの方が、印刷屋さん側で写真の修正をする場合にラクなのでケースバイケース。
まあネット入稿では印刷屋さんが写真データいじったりすることはないだろうとのこと。
トリム外に『表』『裏』など書いてあげるほうが親切
これをやることで、印刷屋さんのモチベーション低下を防ぐ（笑）
webのデザイナーだったので、あまりこういう知識がなかったが、先輩に教わる機会があったので。
印刷してくれる人の気持ちを考えてデータを作ろうってことですね。
表の見出しを順序付きリストっぽく連番を振りたかったので、counter-incrementプロパティを使ってcssだけで連番をつけた。
See the Pen WvopgL by Hiroaki Takeuchi (@eturlt) on CodePen.
counter-increment: Num;
でNumが指定した数字をひとつ進める。
content: counter(Num);
で表示する。
具体的にはcssを参照。
counter-reset: Num;
で数字をリセットする
たとえ数字をリセットしたくなくても、
counter-reset: Num;
の記述がどこかにないと全部1とかになっちゃう。
bitbucketでプロジェクトのコードを管理している。
リポジトリつくるとき個人の所有にしてしまったけど、チームの所有にできることに気付いたので変更してみた。
Setting > リポジトリの移譲から、『ユーザー名』でチーム名を入れて『リポジトリの移譲』これで移譲は完了。
だけどこれでリポジトリのURLが変わってしまったので、自分のマシンで設定を変えてやらないといけない。
リモートリポジトリの変更は下記コマンド
git remote set-url origin git@bitbucket.org:hogeteam/fuga-project.git
アクセス管理でいちいちメンバーを招待しなくても、チームで設定したメンバーが最初からアクセスできる。
それ以外のメリットはちょっとよく分からないです。他にも何かあるのかな？
Dreamweaver時代に一番使っていたショートカット。
1 メニューバーのSublime Text > Prefernce > Key Bindings - User をひらく
2 以下を追加
{ "keys": ["shift+enter"], "command": "insert", "args": {"characters": "<br />" } }
.scssのシンタックスハイライトを追加。無いと困る。
いままで使ってた”Sass”よりも頻繁に更新されてるっぽかったので。
Syntax Highlighting for Sass – Packages – Package Control
“SFTP”が使えなかったので。
（まだ使ってないので使用感分からないけど）
FTPSync – Packages – Package Control
サイドバーの右クリックがすごく便利になる。必須。
SideBarEnhancements – Packages – Package Control
Emmetです。
Emmet – Packages – Package Control
<img />や<a>でファイル名を自動で探してくれる。便利。
AutoFileName – Packages – Package Control
Packageを探すの楽しい。
他にもちょこちょこ追加していこう。
Sublime Text 2 を長らく使ってたのですが、プラグインがうまく動かなくなったりしたので、Sublime Text 3に移行しました。
初期設定やプラグインなどのまとめです。
ダウンロードはこちらから。
Sublime Text – Download
ふつうにドラッグ&ドロップでインストールすればOK。
ぼくはST2と間違えるのを防ぐために、アプリ名を『Sublime Text 3』とバージョン名を入れておきました。
Sublime Text 3 はβ版で、ライセンスの値段は$70だけど、正式リリースまではSublime Text 2 のライセンスでunlicenseできる。（というかライセンス買わなくても試用できるけど）
メニューバーのHelp > Enter LicenseからST2のライセンスを入力すれば完了。
正式リリース後はアップグレードラインセンスを購入する必要あり。
cmd + ,で環境設定を開く。オレオレ設定は下記
{
"detect_indentation": true, // ファイルのインデントに合わせる
"draw_white_space": "all”, // スペースを分かりやすく表示
"fade_fold_buttons": true, // 折りたたみボタンを隠す
"fold_buttons": true, // 折りたたみボタンを使う （この辺正しいか怪しい）
"font_size": 11.0,
"tab_size": 2,
"translate_tabs_to_spaces": true,
"word_wrap": false
}
console（ctrl + Shift + @）から、下記のコードを入力
import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
cmd + Shift + Pで、Package Control installなどができることを確認する。
インストールするパッケージはまたじっくり選ぼう。
とりあえず.scssのカラーリングが無いとツライので、”SASS”だけは入れた。