1. ボクの作業環境
2013
13年5月30日木曜日

2. みなさんどうやって効率良く
作業してるでしょうか？
本日の内容
2
13年5月30日木曜日

3. どんなエディタ使ってるの？
どんなアプリ使ってるの？
本日の内容
3
13年5月30日木曜日

4. 人の作業環境って気になりま
すよね。
本日の内容
4
13年5月30日木曜日

5. なので、
まずはボクの環境を紹介！
本日の内容
5
13年5月30日木曜日

6. 良く使っているアプリと
効率的なコーディングを紹介
します。
本日の内容
6
13年5月30日木曜日

7. もっと良い方法があれば教え
てください！
本日の内容
7
13年5月30日木曜日

8. 1.作業環境
2.アプリの紹介
1.エディタ
2.補助
3.その他
3.コーディング方法
本日の流れ
8
13年5月30日木曜日

9. 1.作業環境
2.アプリの紹介
3.コーディング方法
本日の流れ
9
13年5月30日木曜日

10. 作業環境
MacBook Air 11-inch, Mid 2012 OS X 10.8.2
プロセッサ ： 2 GHz Intel Core i7
メモリ ： 8 GB 1600 MHz DDR3
グラフィックス ： Intel HD Graphics 4000 512 MB
フラッシュストレージ ：120GB
外部ストレージ : 1TB
ディスプレイ : ナナオ FORIS 23.0インチ
10
13年5月30日木曜日

11. 1.作業環境
2.アプリの紹介
3.コーディング方法
本日の流れ
11
13年5月30日木曜日

12. アプリの紹介
エディタ
12
13年5月30日木曜日

13. EspressoCoda2
Dreamweaver WebStorm
アプリの紹介 - エディタ
13
13年5月30日木曜日

14. EspressoCoda2
Dreamweaver WebStorm
アプリの紹介 - エディタ
14
大体出来て良い。
ターミナルも使える。
新規作成時に使ってます。
アイコンがカッコイイ！
CSSの編集が優れてる。
主に更新に使ってます。
使いやすい
更新、修正時に使ってます。
Emmetの拡張がまだ出てな
い・・・
JavaScriptの
IDE(統合開発環境)
JavaScriptはコレで書
いてます。
13年5月30日木曜日

15. アプリの紹介
補助
15
13年5月30日木曜日

16. Transmit CodeKit
16
アプリの紹介 - 補助 -
CornerstoneSourceTree
13年5月30日木曜日

17. アプリの紹介 - 補助 -
17
FTP
使いやすい！
メタ言語のコンパイル
sassのコンパイルにつか
ってる。
Git
無料だし使いやすい！
SUBVERSION
インターフェースが分か
りやすいので
Transmit CodeKit
CornerstoSourceTre
13年5月30日木曜日

18. アプリの紹介
その他
18
13年5月30日木曜日

19. アプリの紹介 - その他 -
19
13年5月30日木曜日

20. TextExpander ・・・スニペット管理
MAMP ・・・・・・仮想環境
1Password ・・・・パスワード管理
ClipMenu ・・・・・コピペ
ForeverSave 2 ・・バックアップ用
LittleSnapper・・・スクリーンショット
xScope ・・・・・・幅など測るツール
Microsoft Office・・しぶしぶ
20
アプリの紹介 - その他 -
13年5月30日木曜日

21. 1.作業環境
2.アプリの紹介
3.コーディング方法
本日の流れ
21
13年5月30日木曜日

22. コーディング方法
コーディング時に使ってるもの
22
13年5月30日木曜日

23. コーディング方法
Emmet
23
13年5月30日木曜日

24. コーディング方法
Emmetとは
24
13年5月30日木曜日

25. コーディング方法
Emmet（ Zen-Coding）
「^」で上に戻れる！
「$」のオプションが追加された！
CSSのスニペットが強化された！
DataURLの変換も簡単！
ベンダープリフィックスも対応！
画像サイズもすぐ取れる！
計算も出来る！
25
13年5月30日木曜日

26. コーディング方法
どんなエディタで使えるの？
26
13年5月30日木曜日

27. コーディング方法
27
13年5月30日木曜日

28. コーディング方法
ん？！
28
13年5月30日木曜日

29. コーディング方法
29
13年5月30日木曜日

30. コーディング方法
えっ！Dremaweaver
で使えるの？
30
13年5月30日木曜日

31. コーディング方法
インストールしてみた・・・
31
13年5月30日木曜日

32. コーディング方法
32
13年5月30日木曜日

33. コーディング方法
33
やった！Dwで使える！
13年5月30日木曜日

34. コーディング方法
34
しかし・・・
13年5月30日木曜日

35. コーディング方法
35
なので日本語化してみた！
13年5月30日木曜日

36. コーディング方法
36
13年5月30日木曜日

37. コーディング方法
37
13年5月30日木曜日

38. コーディング方法
実は簡単！
38
13年5月30日木曜日

39. コーディング方法
/Users/user名/Library/Application / Support /
Adobe / Dreamweaver / CS6 / ja_JP /
Configuration / Menus/Menus.xml
39
13年5月30日木曜日

40. コーディング方法
name属性とkey属性を変更するとだけ！
40
13年5月30日木曜日

41. コーディング方法
41
例)
name="_Expand Abbreviation" key="Cmd+E"
13年5月30日木曜日

42. コーディング方法
42
例)
name="_Expand Abbreviation" key="Cmd+E"
name="展開" key="Ctrl+E"
13年5月30日木曜日

43. コーディング方法
で、どうやって使ってるの？
43
13年5月30日木曜日

44. コーディング方法
実際にやってみます。
44
13年5月30日木曜日

45. ありがとうございました。
13年5月30日木曜日