Macbook Pro Retina × LG UltraFine 5K Display

未だに Macbook Pro Retina (Mid 2014) を使っているが、
たまにオフィスにある LG UltraFine 5K Display を使いたい。
と思ったら実はできた。

3840 x 2160 (60 Hz)
以下のデバイスでは、LG UltraFine 5K Display を 3840 x 2160 (60 Hz) の解像度で使えます。

MacBook (2015 年以降に発売されたモデル)
Thunderbolt 2 ポートを搭載した Mac コンピュータ (Thunderbolt 3 – Thunderbolt 2 アダプタを使用)
USB-C を搭載した iPad Pro

Mac や iPad Pro で LG UltraFine 5K Display を使う – Apple サポート

初代モデルと2代目モデル、両方手元にあるけれど、

初代モデル (27MD5KA-B / JAN 4989027010635) だと、Appleの Thunderbold3 to Thunderbold2 変換コネクタThunderbolt2 to Thunderbolt2 ケーブル の接続で無事に映像出力できた。

けれど、2019年夏のアップデート後に出た2代目モデル (27MD5KL-B / JAN 4989027013995) だと、認識するものの映像が出ない。USB-C対応されたしちょっと違うのかもしれない。

参考: Pro Display XDRの「50万円」に引いちゃった人向け。LGの「UltraFine 5K Display」27インチモデルがアップデート | ギズモード・ジャパン

packages.json の ^ について

^ はキャレット (caret) と読む。

プロジェクトのルートに、 .npmrc というファイルをつくって、

save-exact=true

と書くと、^が自動的につかなくなる。

npmの設定を一覧するには

$ npm config list

マシン全体で設定してしまいたいときは

$ npm config set save-exact=true

他に、

save-prefix='~'

というconfigの書き方もあるっぽい

参考: Change npm default caret(^) in package.json

DropboxのFinder統合

DropboxのFinder上での便利機能 (アイコン上の同期ステータス表示とか、ツールバー上のメニューとか、右クリックメニューとか) が消えてしまい、しばらく悩んで解決。
システム環境設定の「機能拡張」→「Finder機能拡張」のチェックが外れていた。 (macOS Mojave)

Missing finder icon integration on Mac.
に書かれてた。

Sketch vs Photoshop

12/15時点で最新のver.3.2.1を使っています。
現時点で問題がありそうなのが、

・日本語の行間が正しく反映されない。

・Symbol (スマートオブジェクト的なもの) がネストできない

・レイヤーをレイヤーパレット内でドラッグして並び替えられない

・単位がpxのみで、dpi, pt という考えが無いので、フォントサイズなどが、CSS、Xcodeに記述したい値の2倍になってしまう。(RetinaオプションONで作業しているせい?)

・シンボルや定義したテキストフォーマットに対して、レイヤー効果的なものを重ねられない

・ショートカットキーを覚えるのが面倒 (末尾に自分で設定したものを載せてます)

 

唯一、Photoshopよりも優れているかもしれないのは、素材のエクスポート機能。
SVGの書き出しや、3x素材の書き出しは、Photoshop × Slicy でもまだ対応出来ていないので、Sketchの方が優れている。

Sketch Appが最高で、Photoshopはオワコンみたいな空気が気になっていたので、
1週間触って、1案件分のデザインデータを移植してみたけど、まだ全然実用レベルじゃなかった。
(※ PhotoshopはCC2014ではなく、CCを使っています)

Sketchを絶賛している人は、Photoshopの使い方が下手か、マシンスペックが足りてない。
または、来月日本に帰る時に、ぜひSketchマスターのレクチャーを受けたいです。(連絡先: @soohei, http://td-inc.jp/contact)

 

———

・Photoshopライクにするショートカットキー

拡大

Center Canvas
Cmd + 0

Actual Size
Cmd + 1

ガイドの表示非表示

Show Smart Guides
Cmd + ;

Hide Smart Guides
Cmd + ;

レイヤーの重ね順

Backward
Cmd + [

Move To Back
Shift + Cmd + [

Forward
Cmd + ]

Move To Front
Shift + Cmd + ]

フォントサイズ変更

Smaller
Shift +Cmd + ,

Bigger
Shift + Cmd + .

 

・Flashライクにするショートカットキー

同じ場所にペースト
Paste in Place
Shift + Cmd + V

オブジェクトを拡大・縮小
Scale…
Option + Cmd + S

 

・以下は、https://designcode.io/sketch を見ながら設定

Make Grid…
Shift + Cmd + M

Round to Nearest Pixel Edge
Shift + Cmd + R

Create Symbol
Shift + Cmd + J

Create Shared Style
Shift + Cmd + K

Paste and Match Style
Shift + Cmd + B

 

プラグインも、
http://www.newmediacampaigns.com/blog/essential-sketch-plugins-for-web-design
https://designcode.io/sketch
を参照して追加しました。

 

Sublime Text 3

Sublime Textを2から3にアップデートしたので設定、プラグインを再確認。

今使っているプラグインを一覧する
(~/Library/Application Support/Sublime Text 3/Packages/User/Package Control.sublime-settings)

▽ ユーティリティ系

・All Autocomplete
今開いている全タブの中からワードを補完する

・AutoFileName
ファイル名補完が賢くなる

・Autoprefixer
ベンダープレフィックス補完
(Cmd + Shift + Pから使う)

・DocBlockr
コメントを書きやすく
(CoffeeScriptでは、###* とタイプ)

・Emmet
旧ZenCoding

・LineEndings
改行コード

・Markdown Preview
マークダウンをプレビュー
(Cmd + Shift + Pから使う)

・SublimeCodeIntel
コード補完を賢く

・Tag
タグの扱いを賢く

・Terminal
Cmd + Shift + T でターミナルでファイルのある場所を開く
Cmd + Shift + Opt + T だとプロジェクトのある場所を開く

・SideBarEnhancements
サイドバーを賢く

・TrailingSpaces
末尾の空白をハイライト

▽ 言語系

・AngularJS
・AngularJS (CoffeeScript)
・Better CoffeeScript
・Compass
・Haml
・jQuery
・Sass
・SCSS

▽ アプリの設定ファイル

{
	"auto_indent": true,
	"color_scheme": "Packages/User/Cobalt (SL).tmTheme",
	"disable_formatted_linebreak": true,
	"disable_tab_abbreviations": true,
	"font_face": "Menlo",
	"font_size": 15.0,
	"highlight_line": true,
	"line_padding_top": 2,
	"smart_indent": true,
	"tab_completion": false,
	"tab_size": 4,
	"translate_tabs_to_spaces": true,
	"trim_trailing_white_space_on_save": true,
	"word_wrap": true
}

▽ *.js, *.coffee, &.css, *.scss には個別の設定

{
  "tab_size": 2,
  "translate_tabs_to_spaces": true
}

コーディング環境 (2014.08)

日々進化している最近のコーディング (フロントエンド開発) 環境について、
ここ1年くらいのノウハウを詰めて、
極端には新しいもの好きではない視点で整理します。

目次:
1. psdからのスライス
2. Compass
3. スプライトイメージの自動化
4. CoffeeScript
5. Gruntによる自動化
6. ローカルサーバー
7. その他

1. psdからのスライス

slicy

Slicyというアプリを使い始めてからは、ずっとこれです。
Photoshopのレイヤーやグループ名に画像のファイル名(+拡張子)を付けることで、
ワンクリックで画像を書き出せます。

ファイル名に@2xと付けることで、Retina用画像(@2x)と、
等倍画像を同時に書き出すこともできます。

その他に@boundsというレイヤーをつくって矩形領域を指定したり、
@slicesというフォルダをつくって、その中にファイル名と
領域指定用のレイヤーをつくることも出来ます。

公式サイトのヘルプを読んだり、
サンプルをダウンロードすると理解が早いです。

 

2. Compass

CSSにネスト構造をつくって記述できるフレームワーク。
インストールの方法などは公式ドキュメント参照。
このエントリーでは、”gem install compass –pre” でインストール出来る、
Compass 1.0.0.rc.1を使って、SCSSの文法で書いています。

必要なコマンドは
compass watch

 

3. スプライトイメージの自動化

Compassのmixinを使えば、関数や変数を使ってCSSを記述できます。
一番の恩恵として、スプライトイメージの生成の自動化について、
色々試行錯誤した結果、現時点で使っているmixinを紹介します。
参考: Using Compass Generated Sprite Sheets in Responsive Sass, by Jayson Jacobs.

・サーバーにアップするファイルはassetsフォルダにまとめる
・サーバーにアップしないファイルはsourceフォルダにまとめる
・Source Mapを有効にするとChromeでscssファイルのデバッグができる
参考: Working with CSS Preprocessors – Google Chrome
・ロゴ用の画像として、
/resource/images/sprite/logo.png
/resource/images/sprite_2x/logo_2x.png (2倍サイズ)
の2枚が用意されているとする。

config.rb

css_dir = "assets/css"
sass_dir = "source/sass"
images_dir = "source/images"
generated_images_dir = "assets/images"
javascripts_dir = "assets/js"
fonts_dir = "assets/fonts"
output_style = :nested
relative_assets = true
line_comments = true
preferred_syntax = :scss
sass_options = { :sourcemap => true }

HTML

<div class="logo">
<div class="sprite">Logo</div>
</div>

→ .sprite部分に、background-imageが適用される

scssファイル

// スプライト画像
.sprite {
display: block;
overflow: hidden;
background-repeat: no-repeat;
text-align: left;
text-indent: -10000px;
font-size: 1px;
line-height: 1px;
}

@mixin sprite-background($sprites, $sprites-img, $name, $scale, $skip-base-params:false) {
background-image: $sprites-img;
@include background-size(image-width(sprite-path($sprites)) / $scale auto);

//retina時に重複するパラメータをスキップするための分岐
@if not($skip-base-params){
height: image-height(sprite-file($sprites, $name)) / $scale;
width: image-width(sprite-file($sprites, $name)) / $scale;
$ypos: nth(sprite-position($sprites, $name), 2) / $scale;
background-position: 0 $ypos;
}
}

$sprites: sprite-map("sprite/*.png", $spacing: 2px);
$sprites-img: sprite-url($sprites);
$sprites_2x: sprite-map("sprite_2x/*.png", $spacing: 4px);
$sprites-img_2x: sprite-url($sprites_2x);

@mixin sprite-image ($name) {
.sprite {
@include sprite-background($sprites, $sprites-img, $name, 1);
}
.backgroundsize.retina_2x & {
.sprite {
@include sprite-background($sprites_2x, $sprites-img_2x, $name, 2, true);
}
}
}

→ /assets/images/ フォルダ内にスプライトイメージが書き出される。

 

また、Slicyからの作業の効率化を考えて、一つ、自作のRubyのスクリプトを使っています。
ruby mv_sprite.rb
で実行すると、実行したディレクトリ以下の@2xという名前がついた画像を、
_2xにリネームして、さらに_2x付きのディレクトリを作ってその中へ移動します。
@がついたファイル名が、Compassではコンパイルエラーを起こすことへの対処です。
(Compass 0.13.alpha.12時点)
上記mixinも、Slicy書き出し→このRubyの処理、が前提になっています。

例:
assets/images/sprite/logo.png
assets/images/sprite/logo@2x.png

assets/images/sprite/logo.png
assets/images/sprite_2x/logo_2x.png

mv_sprite.rb

# ディレクトリを再帰的に抽出する
require 'pp'
require 'FileUtils'

root = File.expand_path(File.dirname(__FILE__))
root = ARGV[0] if ARGV[0]

# フォルダの一覧を取得
dir_entries = Dir.glob(root + "/" + "**/*")
# pp dir_entries

for filePath in dir_entries do
# pp file
ext = File::extname(filePath) # 拡張子取得

# 画像のみに処理
if( ext == '.jpg' || ext == '.png' || ext == '.gif' )
dir = File::dirname(filePath) # ディレクトリ
base = File::basename(filePath,ext) # 拡張子除去
twox_index = base.index('@2x')

# @2xを含む
if( twox_index && twox_index >= 0 )
p "#{dir}/#{base}#{ext}"
parent_dir = File::dirname(dir) # e.g. path_to_htdocs/common/img
my_dir = File::basename(dir) # e.g. sprite
twox_my_dir = "#{my_dir}_2x" # e.g. sprite_2x
twox_dir = "#{parent_dir}/#{twox_my_dir}" # e.g. path_to_htdocs/common/img/sprite_2x
twox_base_ext = "#{base.sub('@2x', '_2x')}#{ext}" # e.g. hoge_2x.png

# ディレクトリがなければ作る
FileUtils.mkdir_p(twox_dir) unless FileTest.exist?(twox_dir)

# ファイルを移動する
File.rename filePath, "#{twox_dir}/#{twox_base_ext}"

p "#{twox_dir}/#{twox_base_ext}"
p '--'
end
end
end

 

4. CoffeeScript

JavaScripterの間ではすっかり浸透したCoffeeScript を使います。
コードの行数、文字数が減らせるので、その分コメントを充実させられます。

必要なコマンドは
coffee -o assets/js -cw assets/coffee

 

ここまでの内容をまとめたものは、
https://github.com/soohei/compass-coffee-template
にあります。

 

5. Gruntによる自動化

注) 最新の状況はこちら

Gruntはこれまでに書いた、CompassやCoffeeScriptのコンパイル処理、
ソースの結合やMinify、ファイルの監視、簡易サーバーの起動などを
全て一つのコマンドで実行してしまう脅威の仕組みです。
他にGulpというのがあるようなのですが、まだ試していないです..
セットアップ方法は省略します。普段使っている基本的な設定・プラグインの構成は以下。

package.json (使用しているパッケージの一覧)

{
"name": "sample",
"version": "0.0.0",
"author": "Sohei Kitada",
"devDependencies": {
"grunt": "~0.4.5",
// ベンダープレフィックス補完
"grunt-autoprefixer": "~1.0.0",
// メディアクエリーをまとめる
"grunt-combine-media-queries": "~1.0.19",
// CoffeeScript
"grunt-contrib-coffee": "~0.11.0",
// Compass
"grunt-contrib-compass": "~0.9.1",
// ファイルの結合
"grunt-contrib-concat": "~0.5.0",
// 簡易サーバー
"grunt-contrib-connect": "~0.8.0",
// Minify JS
"grunt-contrib-uglify": "~0.5.1",
// ファイルの更新検知
"grunt-contrib-watch": "~0.6.1",
// CSSのプロパティをソートする
"grunt-csscomb": "~3.0.0",
// Minify CSS
"grunt-csso": "~0.6.3",
// シェルコマンドの実行
"grunt-exec": "~0.4.6"
}
}

 

Gruntfile.coffee (タスク)

module.exports = (grunt) ->
# load package.json
grunt.initConfig
pkg: grunt.file.readJSON 'package.json'

compass:
dist:
options:
config: 'config.rb'
outputStyle: 'compressed'
environment: 'production'
dev:
options:
config: 'config.rb'

coffee:
compile:
options:
join: true
files:
'source/js/script.js': ['source/coffee/**/*.coffee']

exec:
mv_sprite:
cmd: 'ruby mv_sprite.rb'

autoprefixer:
options:
browsers: ['last 2 version', 'ie 8', 'ie 9']
default:
src: 'assets/css/style.css'
dest: 'assets/css/style.css'

csso:
default:
src: 'assets/css/style.css'
dest: 'assets/css/style.css'

cmq:
default:
src: 'assets/css/style.css'
dest: 'assets/css/style.css'

csscomb:
default:
src: 'assets/css/style.css'
dest: 'assets/css/style.css'

concat:
jsdefault:
src: [
'source/jslib/**/*.js'
'source/js/**/*.js'
]
dest: 'assets/js/script.js'

license: {
src: [
'source/jslib/_license.js'
'assets/js/script.js'
]
dest: 'assets/js/script.js'
}

uglify:
default:
src: 'assets/js/script.js'
dest: 'assets/js/script.js'

connect:
uses_defaults: {}

watch:
options: # enable livereload
livereload: true
compass: # watch scss files
files: 'source/sass/**/*.scss'
tasks: ['compass:dev']
coffee: # watch scss files
files: 'source/coffee/**/*.coffee'
tasks: ['coffee:compile']
js: # watch js files
files: ['source/js/**/*.js', 'source/jslib/**/*.js']
tasks: ['concat:jsdefault']
image: # watch image files
files: 'source/images/**'
tasks: ['exec:mv_sprite']
html: # watch html files
files: '**/*.html'

# load Grunt Plugins
grunt.loadNpmTasks('grunt-autoprefixer')
grunt.loadNpmTasks('grunt-combine-media-queries')
grunt.loadNpmTasks('grunt-contrib-coffee')
grunt.loadNpmTasks('grunt-contrib-compass')
grunt.loadNpmTasks('grunt-contrib-concat')
grunt.loadNpmTasks('grunt-contrib-connect')
grunt.loadNpmTasks('grunt-contrib-uglify')
grunt.loadNpmTasks('grunt-contrib-watch')
grunt.loadNpmTasks('grunt-csscomb')
grunt.loadNpmTasks('grunt-csso')
grunt.loadNpmTasks('grunt-exec')

# tasks

# defalt
grunt.registerTask('default', ['connect', 'watch']);

# development
grunt.registerTask('dev', ['exec:mv_sprite', 'compass:dev', 'coffee:compile', 'concat:jsdefault']);

# distribution
grunt.registerTask('dist', ['exec:mv_sprite', 'compass:dist', 'autoprefixer', 'cmq', 'csscomb', 'csso', 'coffee:compile', 'concat:jsdefault', 'uglify', 'concat:license']);

return

 

「grunt」の処理内容
・connect
簡易Webサーバーの立ち上げ (プロジェクトによっては使わない)

・ファイルの更新の監視
1) images内が更新されたら…「3. スプライトイメージの自動化」で紹介したRubyコマンドを実行
2) scssが更新されたら…Compassを再コンパイル
3) coffeeが更新されたら…CoffeeScriptを再コンパイル → jsファイルが書き出される
4) jsが更新されたら…JSファイルを一つのファイルに結合

「grunt development」の処理内容
・上記 1),2),3),4)を順番に実行

「grunt distribution」の処理内容
・1)を実行
・2)をdist用の設定 (outputStyle: ‘compressed’) で実行
・ベンダープレフィックスを追加
・メディアクエリーをまとめる
・CSSのプロパティをソート
・CSSをMinify
・3)を実行
・4)を実行
・JSをMinify
・上部にライブラリ関係のライセンスを追加

ここまでの内容をまとめたものは、
https://github.com/soohei/grunt-template
にあります。

 

6. ローカルサーバー

本気で開発する場合は、MAMPでローカルサーバーを立てています。
詳しくは、
MAMP 2 → MAMP 3
MAMPでバーチャルホストの設定 (2種類)
あたりに書かれています。

 

7. その他

最後に、ここまでのワークフローで生まれた、
本番環境にアップ不要のファイルはサーバーに転送しないように、
Transmitを設定しています。

transmit

 

MAMP 2 → MAMP 3

MAMPのphpMyAdminの動作があやしかったので、これを機にローカルのWebサーバーをMAMP2からMAMP3にアップデート。以下手順です。

1)
MAMPのHP(http://www.mamp.info/en/downloads/)から
から最新版をダウンロード。

2)
既存の/Applications/MAMPをリネームして退避。(例: MAMP_old)
ダウンロードしたインストーラーを使って、MAMP 3をインストール。

/Applications フォルダには、新しくできたMAMPフォルダと、これまで使っていたMAMP_oldフォルダが並ぶ。

4)
MAMP_old/db
MAMP_old/conf/apache/httpd.conf

をそれぞれMAMPフォルダの同一階層に上書きコピー。

5)
終了!(MAMP_oldは削除してOK)

MAMPのバーチャルホスト設定については、以前書いた記事「MAMPでバーチャルホストの設定 (2種類)」をどうぞ。

Sublime Text 導入メモ 4

新しく追加したプラグイン

DocBlockr … /** と入力したあと、TabキーでJSDocsの記法のコメントが入れられる

→ “jsdocs_extend_double_slash”: false にしないと、
//でコメントアウトした後の日本語の確定で、文字が消える問題有り

 

SCSS … SCSS用のSyntax

・SCSS Snippets … SCSS用のSnippets (Snippetsとは?)

 

Compass … Compassをコンパイルする ※rvm環境でハマリポイントあり

 

CofeeCompile … CoffeeScriptをコンパイルする ※Macのcoffee, npmのパス(/usr/local/bin)を設定する必要あり。
control + shift + C で選択した部分を簡易的にコンパイルして確認できる。

 

Emmet … Zen-Codingの新バージョン

 

削除したプラグイン

Zen-Coding

 

Emmetは日本語の変換の確定時に問題があったので、

Preferences => Settings – User に以下の設定を書き込む。

{
  // tabでの展開の上書きしない for Emmet
  "disable_tab_abbreviations": true,
  // 改行でのフォーマットをしない(日本語変換の確定のため) for Emmet
  "disable_formatted_linebreak": true
}

参考: 第0回 Sublime Text 2 勉強会 で Emmet について話してきた – techlog

 

"tab_completion": false

にした方が良い感じ?

続きがあります。
Sublime Text 3

~/.bashrc が読まれていない問題

たぶん、このエントリーでrvmをインストールしたんだけれど、
Macを再起動すると、rvmコマンドが使えなくなって、ruby -v しても1.8系に戻ってしまう。

 

./bashrc が読まれていなかったみたいで、ターミナルから

$ source ~/.bashrc

をすれば、パスが通って解決するけど、毎回はめんどうなので、
~/.bash_profile から ~/.bashrc を読み込もう、という設定をする。

 

~/.bash_profileに、

if [ -f ~/.bashrc ] ; then
. ~/.bashrc
fi

を書き込む。

 

参考:
とあるプログラマーの覚書 OSXでのbashrcの設定
bashの設定ファイルの読み込みが複雑すぎて混乱する – ぱせらんメモ

Windows 8 + IE10

Win8のIE10を使うと、開発者ツールでIE9〜7の表示モードを切り替えてデバッグできて、
インスペクタも動作する。 変なエラーも出ないのでIE Testerを使うよりもだいぶ良さそう。

ただし、Windows8は超使い慣れないので、
Classic Shellというアプリをインストールして、スタートボタンを復活。
(スタートボタンのグラフィックをWindows純正風にすることも出来るようですが、省略。)

参考: Windows 8にClassic Shellをインストールしてみました。 – Microsoft Officeのリボンのカスタマイズ情報が満載 – 初心者備忘録

 

それと、MacのUSキーボードをうまく使うために、
いつも通り、AppkeK ProのVMWare ver (v 3.1.5b1)をインストールして、
最低限、LhaplusとAvastとEmeditorを入れて、セットアップ完了。