作成者別アーカイブ: eturlt

iTerm2のフォントをSource Han Code JPに変更する

イケてる日本語等幅フォント “Source Han Code JP” というものがリリースされたようなので、iTermのフォントをこれに変更してみた。

Source Han Code JP のダウンロード

下記からダウンロードできる。
Release Fonts version 1.002 (OTF, OTC) · adobe-fonts/source-han-code-jp

DL後はふつうにインストールすればOK。

iTermのフォント設定

Prefecences > Profiles > TextからChange Fontで表示フォントを変更。

ちなみにSublime Textで表示フォントをこれにする場合は、
cmd + , でsettingをひらき、

"font_face": "Source Han Code JP"

を追加する。

なんとなく僕は、STの場合はデフォルトの方が見やすいなあと思ったので、そのままにしておいた。

参考サイト

Source Han Code JP

Githubが作ったエディタATOMを試す

エディタはSublime Textを使ってるのですが、ATOMが良いという記事をいくつか見かけたので、試しに使ってみました。

Atom

git使うなら断然こっちの方が良さそうだった。

便利なこと

  • 今いるブランチが分かる
  • ファイルの状況(更新した・追加した など)が分かる
  • ファイルのどの部分を変更したか分かる

ヤバイね。
パッケージをインストールしたらさらに便利になりそう。

最初に設定したこと

フォントサイズを小さく

最初がデカすぎた。cmd + -でOK

不可視文字を表示

Setting > Show Invisiblesにチェック。
スペース・タブを表示してくれる

インデントを表示

Setting > Show Indentにチェック。
インデントが分かりやすく表示される

引き続き使ってみて、パッケージなどインストールしてカスタムしてみる。

コマンドラインでSublime Textを起動する

コマンドラインからテキストを編集する場合、いっつも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でjs,cssなどのパッケージを管理する

bowerとは、jQueryとかnormalize.cssとか、フロントで使うパッケージを管理し、簡単にインストールできたりするツールです(あんまりよく分かっていない)

導入してるパッケージをbower.jsonに書いておけば、コマンドひとつですべてダウンロードしてきてくれるのです。

まずはbowerをインストールする

npm install -g bower

プロジェクトに導入をする

プロジェクトのディレクトリまで行って

bower init

ぜんぶenter or yes でOKな気がする(bower.jsonができあがるだけ)
次回以降はbower.jsonをコピーすればよい気がする

試しにjqueryをインストールしてみる

bower install jquery --save
  • bower_componentフォルダが出来上がり、jqueryのファイルが入る
  • bower.jsonにjquery使ってる記載が入る

bower_conponentというディレクトリ名が気に入らない場合は.bowerrcを作成し、下記を記入

{
  "directory": "vendor"
}

以降、下記コマンドでパッケージを引っ張ってこれる

bower install    

参考サイト

ai入稿データのつくりかた

このブログはコーディングとかのことばっかり書いていますけど、実は僕デザイナーなのです。
なのでデザインについての記事も書きます。

印刷の入稿データの作り方

  1. トリムマークを作る オブジェクト > トリムマークを作成
    効果からも作れるが、オブジェクトから作ったほうがちゃんとオブジェクトになる
  2. すべてのオブジェクトのロックを解除し、ひとつのレイヤーにまとめる
    グループ化すれば同じレイヤーにまとまる
  3. 選択 > オブジェクト > 余分なポイント でゴミポイントを選択し削除
    データに残ってると印刷に現れちゃったりする
  4. 文字をすべて選択しアウトライン化する
    書式 > フォント検索 で、環境にないフォントが0になっていればOK
  5. ガイドを消去 (ただし折り加工などの指示に必要なガイドは残す)
  6. リンクファイルを.epsか.psdにする。解像度も確認。
    .jpgや.pngの画像はダメ
  7. ファイル > パッケージ でリンクファイルをまとめる。
    『リンクをコピー』『リンクを別のフォルダーに収集』『リンクされたファイルとドキュメントを再リンク』にチェック
  8. 印刷所指定のバージョンで保存
    保存時オプションの『圧縮を使用』以外はチェック外す
  9. 確認用のPDFを一緒に入れておく
  10. 手のひらツールをダブルクリックで、ドキュメント全体を見える状態にして保存する

少し補足

リンクファイルの形式

基本的に.psdで大丈夫だが、.epsの方が軽い。
冊子など写真が多いデータの場合は、.epsの方が望ましいらしい。
(.psd印刷が大量にあると、データが重すぎて印刷屋さんが死ぬ)
ただし.psdの方が、印刷屋さん側で写真の修正をする場合にラクなのでケースバイケース。
まあネット入稿では印刷屋さんが写真データいじったりすることはないだろうとのこと。

1面以上の印刷の場合

トリム外に『表』『裏』など書いてあげるほうが親切

ドキュメント全体を見える状態にして保存

これをやることで、印刷屋さんのモチベーション低下を防ぐ(笑)

webのデザイナーだったので、あまりこういう知識がなかったが、先輩に教わる機会があったので。
印刷してくれる人の気持ちを考えてデータを作ろうってことですね。

counter-incrementプロパティを使ってcssだけで連番をつける

表の見出しを順序付きリストっぽく連番を振りたかったので、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リポジトリの所有者を個人からチームに変更する

bitbucketでプロジェクトのコードを管理している。
リポジトリつくるとき個人の所有にしてしまったけど、チームの所有にできることに気付いたので変更してみた。

bitbucket上でリポジトリの移譲を行う

  1. Setting > リポジトリの移譲から、『ユーザー名』でチーム名を入れて『リポジトリの移譲』
  2. 自分がチームの管理者なら移譲を承認。別の人が管理者なら、承認してもらう。

これで移譲は完了。
だけどこれでリポジトリのURLが変わってしまったので、自分のマシンで設定を変えてやらないといけない。

リモートリポジトリoriginのURLを変更

リモートリポジトリの変更は下記コマンド

git remote set-url origin git@bitbucket.org:hogeteam/fuga-project.git

チームでリポジトリを所有するメリット

アクセス管理でいちいちメンバーを招待しなくても、チームで設定したメンバーが最初からアクセスできる。

それ以外のメリットはちょっとよく分からないです。他にも何かあるのかな?

参考サイト

Sublime Text 3 で “shift + enter” で
をショートカット入力

Dreamweaver時代に一番使っていたショートカット。

1 メニューバーのSublime Text > Prefernce > Key Bindings - User をひらく
2 以下を追加

{ "keys": ["shift+enter"], "command": "insert", "args": {"characters": "<br />" } }

参考サイト

SublimeText 3 にインストールしたPackage一覧

Syntax Highlighting for Sass

.scssのシンタックスハイライトを追加。無いと困る。
いままで使ってた”Sass”よりも頻繁に更新されてるっぽかったので。
Syntax Highlighting for Sass – Packages – Package Control

SFTPSync

“SFTP”が使えなかったので。
(まだ使ってないので使用感分からないけど)
FTPSync – Packages – Package Control

Sidebar Enhancements

サイドバーの右クリックがすごく便利になる。必須。
SideBarEnhancements – Packages – Package Control

Emmet

Emmetです。
Emmet – Packages – Package Control

AutoFileName

<img /><a>でファイル名を自動で探してくれる。便利。
AutoFileName – Packages – Package Control

Packageを探すの楽しい。
他にもちょこちょこ追加していこう。

Sublime Text 2 から3に乗り換えたときの設定まとめ

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
}

Package Controll の初期設定

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”だけは入れた。

参考サイト