日別アーカイブ: 2013年11月1日

ソースコード

Sublime Text 2を使ってみよう!

エディタのお話です。 

これまで「Dreamweaver」や「Aptana Studio」を使いコーディングをしていました。
最近使ってみた「Sublime Text 2」は使い勝手がよく、これからメインのエディタとして使っていけそうな感じでした。

慣れていたエディタを変えるのは決心がいりますが、今「Dreamweaver」を使っている人の導入のきっかけになれば、と。。

導入手順

導入作業は5ステップ。各ステップで行う作業は下記の内容です。

1. 「Sublime Text 2」のダウンロード

Windows版、Mac版、Linux版があります。OSが違っても同じ作業環境を作れるので魅力的です。

2. メニューの日本語化

sublime text2はメニューなど全て英語です。
日本語化ファイルを使うことで、一部日本語化できます。
(必須ではありません)

3. 日本語インライン入力への対応

Windows版は、日本語をインライン入力できないので、対応できるようにします。
(Mac版の方は不要です)

4. パッケージをインストールするための準備

「Sublime Text 2」にはパッケージと呼ばれる、プラグインのようなものがあります。
追加することで、HTML入力時の自動補完など機能追加をすることができます。
このステップでは、パッケージのインストールや管理を簡単に行うための、機能拡張を行っておきます。

5. パッケージのインストール

パッケージをインストールして、機能追加を行います。

導入には下記の記事が参考になりました。
http://yuuki-arc.jugem.jp/?eid=35
http://tnnsst35.com/2012/12/13/sublime-text2%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B/
http://lab.sonicmoov.com/markup/649/

Dreamweaverに近い使い勝手にする

パッケージは検索するとかなりの数あります。
「Dreamweaver」に近い使い勝手を求めるなら、下記のパッケージを入れておくと良いかと思います。
いつでも、追加できるので必要なパッケージから追加してみましょう。

  • HTML5…HTMLの自動補完
  • CSS Snippets…CSSの自動保管
  • jQuery…jQuery の自動補完
  • SublimeLinter…HTML,CSS,JS のエラーをリアルタイムで指摘
  • Bracket Highlighter…タグの開始タグと閉じタグをハイライト表示
  • AutoFileName…imgタグのsrc属性を記述する際にディレクトリにある画像を相対パスで参照、width 属性と height 属性を自動入力

Dreamweaverの良いところ

「Sublime Text 2」を使ってみて、気づいたのは「Dreamweaver」には下記の良い点があることです。

  • table(テーブル)の作成と編集
  • クリッカブルマップの作成と編集
  • ファイルを移動するとリンクを自動修正

最近は少なくなった作業ですが、テーブルやクリッカブルマップの修正が必要なときは「Dreamweaver」を使っています。
「デザインビュー」を使えるので、ソースコードだけを見ているより簡単に作業ができます。
さすが、高いソフトなだけのことはありますね。

また、余談ですが「vintage」モードを使うと、vimのような操作もできるらしです。
時間のある時にでも試してみようかと思いました。