Web制作者のためのSublimeTextの教科書

2014-04-07 16.58.19

Web制作者のためのSublime Textの教科書 今すぐ最高のエディタを使いこなすプロのノウハウ」が届きました。SublimeTextについてはタグ「SublimeText」のように何度かこのサイトでも取り上げてきていましたが、日本語で書かれた解説書がなく、利用方法を詳しく知るためにはネットで情報を調べなければならないので、まだまだ一般に普及するまでには時間がかかるかと思っていましたが、この解説書「Web制作者のためのSublime Textの教科書 今すぐ最高のエディタを使いこなすプロのノウハウ」の登場で一気に普及ペースが早まりそうですね。

2014-04-07 16.58.33

ページももこのようにわかりやすく解説されているので、初心者にもオススメです!!

目次

第1章 Sublime Textを導入しよう

  1. Sublime textとは
  2. Sublime Textのダウンロードとインストール
  3. Sublime Textの画面解説
  4. 対訳付きメニュー一覧
  5. Sublime Textの環境設定
  6. パッケージのインストール
  7. 日本語環境の設定
  8. テーマの変更

第2章 覚えておきたい標準機能

  1. 基本的な編集機能
  2. コーディングルールに対応する
  3. プロジェクトの活用
  4. コード入力に役立つ機能
  5. HTML/CSSに役立つ機能
  6. プログラミングに役立つ機能

第3章 パッケージで機能拡張しよう

  1. パッケージについてもっと詳しく知っておこう
  2. パッケージを管理する
  3. パッケージの探し方
  4. パッケージを開発する

第4章 プロが教える特撰パッケージ

  1. どんなときにも役に立つ必須パッケージ
  2. Web制作に役立つパッケージ
  3. EmmetやHayakuでHTML/CSSの入力を効率化する
  4. JavaScriptでの開発に役立つパッケージ
  5. サーバサイドからMarkdownまでさまざまな言語用のパッケージ
  6. ソース管理システムや簡易Webサーバを運用する
  • 付録
  • ショートカットキー一覧
  • 環境設定一覧
Web制作者のためのSublime Textの教科書 今すぐ最高のエディタを使いこなすプロのノウハウ
上野正大 杉本 淳 前川昌幸 森田 壮
インプレスジャパン
売り上げランキング: 1,753

Webデザイナーに必須のSublime Text 2パッケージを紹介

20130821 1

Webデザイナーに必須のSublime Text 2パッケージを紹介

周囲を見渡すとWeb制作時のエディタとして Sublime Text 2 を使っている人ばかりになってしまったので、今回もSublime Text 2の紹介としてWebデザイナーに必須のパッケージをいくつか紹介します。

Emmet

以前は Zen Coding を入れていましたが、最新版のEmmetを入れてコーディング時には利用しています。HTMLを短くショートコードで記述することができるので便利!!

Sublime Text 2の場合は [Ctrl]+[e] でコードを展開してhtmlにしてくれます。

覚えると非常に便利なのでゆっくりでもいいので覚えていきましょう

Zen-Coding(Emmet) については、後日また記事にして紹介する機会をもうけようと考えています。

BracketHighliter

開始タグと終了タグをハイライト表示

HTML/HTML5

入力にhtmlが補完入力されるので便利

CSS/CSS Snippets

CSSの自動補完

jQuery

jQueryの自動補完

SideBarEnhancements

サイドバーに右クリックでプルダウンメニューが表示されるようになります。

実際にはもっといろいろなパッケージを入れていますが、その中でも「これは必須じゃないか」と思うものだけをピックアップしてみました。

Zen CodingでらくらくHTMLコーディング
なかのようすけ (2013-03-12)
売り上げランキング: 8,131
HTML+CSSコーディングが10倍速くなるZen Coding
こもり まさあき 岡部 和昌
インプレスジャパン
売り上げランキング: 613,034
HTML+CSSコーディング ベストプラクティス 高速かつ堅牢なコードを効率よく書くために
こもりまさあき 西畑一馬 浜俊太朗
MdN
売り上げランキング: 26,425

Sublime Text 2でファイルの比較をおこなうプラグイン「sublimerge」

20130820 0

社内で「二つのファイルを比較したい」という話があり、 「diffを使えばいいさ〜」 と言いそうになった訳ですが、今回はSublime Text 2ではどうやったらいいかを紹介します。

SideBarEnhancements を入れておけば、サイドバーで二つのファイルを選択して右クリックで「Diff Files」を選択することで二つのファイルを比較することができます。

そして、今回紹介する sublimerge もdiff系のプラグインでは秀逸なもので、ファイルを開いておいてコンソールから「View Diff」と打つことで上記の画面のように二つのソースコードを比較しての表示をすることができます。

これはわかりやすい!!

sublimerge

インストールはSublime Text 2の他のパッケージのインストールと同様にPackage Controll:Install Packageを選択して、そこから「sublimerge」を入力してEnterを押すだけです。

[ctrl]+[alt]+[d]

現在開かれてるファイルとの比較をおこなう

[ctrl]+[alt]+[,]

右側のファイルの変更点だけを左側のファイルにマージする

[ctrl]+[alt]+[.]

左側のファイルの変更点だけを右側のファイルにマージする

[ctrl]+[alt]+[/] + [ctrl]+[alt]+[,]

右側のファイルを左側のファイルにマージする

[ctrl]+[alt]+[/] + [ctrl]+[alt]+[.]

左側のファイルの変更点だけを右側のファイルにマージする

[ctrl]+[alt]+[=] or [ctrl]+[alt]+[pagedown]

両ファイルを比較して次の違う部分に進む

[ctrl]+[alt]+[-] or [ctrl]+[alt]+[pageup]

前に戻る

新・ワードを捨ててエディタを使おう (SCC books)
鐸木 能光
エスシーシー
売り上げランキング: 309,362
ハッカーのたのしみ―本物のプログラマはいかにして問題を解くか
ジュニア,ヘンリー・S. ウォーレン
エスアイビーアクセス
売り上げランキング: 85,079

Sublime Text 2はWebクリエイターを目指すならオススメです!!

20130818 0

SublimeText2はWebクリエイターを目指すならオススメです!!

普段授業ではDreamweaver等のAdobeのツールでも授業してきていますが、HTMLやCSSのコードを書いていく中でも私達が一番使っている時間の長いのはエディタでもあります。

Dreamweaverのエディタ画面でもいいけれども、専用のエディタを入れておいて立ち上げっぱなしにするくらいエディタの活躍する時間が多いのがこの仕事…個人的には今までWindowsでは秀丸からTeraPad…Peggyに移行しemacs(meadow)、vimと移ってきて、本格的にMacに切り替えてからはTextmate…vim…SublimeText2と移行して来ました。

普段一番使うツールだからこそエディタは身体に馴染みやすいものにしましょう

エディタはいろいろあるけれど、今はSublime Text 2がオススメですよ!!

まずはPackageを導入しよう

初期状態でもいいけれど、Sublime Text 2ではPackageを導入することで格段に使いやすくなります。 View -Show Console を表示させて以下のコードを入力して「ENTER」、そしてSublimeText2を再起動してください。

以上でPackageを導入できるようになりました。 Command + Shift + p を押してみましょう。画面上にプルダウンが表示されるので「install」または「package」と入力するとプルダウンの中に「Package Controll:Install Package」という項目が表示されているはずなので、これを選択して「Enter」を押してください。

今度は様々なPackageが表示されているはずです。

機会をみつけてこれからもSublime Textについて紹介していくことになるかと思います。Packageについてもどんどんと紹介していこうと考えているのでお楽しみに!!

Sublime Text 2

Sublime Text リファレンス
Sublime Text リファレンス
posted with amazlet at 13.08.18
shvva (2013-03-10)
売り上げランキング: 28,092
Sublime Text Starter
Sublime Text Starter
posted with amazlet at 13.08.18
Eric Haughee
Packt Publishing