Aptana Studio 3 のこと

現時点ではbetaバージョンだけどインストールしてみたらいい感じだったAptana3について。

aptana studio 3 beta

Aptanaで検索すると結構な上位にこの記事がランクしてるようなので、
ちょっと補足しつつ使い方メインの記事を追加。

比較検討したい人向けのメモ

Aptana Studio 3とは色々な言語に対応している無料のIDEです。ベースはEclipse(Helios)。
開発はもともとAptanaという会社だったんだけど、Appceleratorに買収されて以降はコピーライト表記がAppcelerator, Inc.に変わり、AptanaをベースにTitanium Studioを出しました。
HTML5, CSS3, JavaScript, Ruby, Rails, PHP, Java, Pythonなどをサポート。
Sass、HAML、CoffeeScript、Sell Scriptなどにも対応してます。

Dreamweaverからの乗り換えだと、デザインビューのようなWYSIWYGエディタが無いので
コード手打ち出来ない(orソースコードを見なれてない)という人には敷居が高いと思います。
同様にIDEを使った事がない人にも敷居は高いけど、慣れればEclipseも使えるようになるのでお得かも。

対WebStormに関しては無料であることとEclipseベースである事くらいしかメリットはないです。
特にこだわりがないのならWebStormを使う方がいいんじゃないかな。

Aptanaのちょっといい所

  1. 無料
  2. 使い方とか日本語化などにEclipseのソースが使える
  3. サーバーとターミナルを内蔵

何かしら困ったことがあってAptanaで検索してもいい記事がヒットしない場合、
Eclipseで検索すれば解決することが多いです。すなわち日本語の情報が多い。

日本語化に関してはIDEの英語って大体どれも似たような感じだからメリットはあまりないと思う…。

サーバーとターミナルが内臓されているのは地味に便利です。
特にサーバーはAjaxの確認がさっくりできるのでJS書く人にはいいかも。

Aptanaのここがダメ

WebStormと比べた場合、シンタックスハイライト・補完・アウトライン機能が劣ってます。
あと、使ってない変数等を教えてくれる機能もない。

Eclipceベースなので動作が重めです。
行数が何千行とあるファイルを読み込むと凍ることがあったり。

3はGitが必須

インストールして起動するとGitについて問うダイアログが表示される。
既にインストール済みならファイル選択、そうでないならPortableGit使いますボタンを押すか
AptanaチームがオススメしているPortableGitとかmysisGitとかを手動で入れる。

aptana3-git

Mac(Lion)にインストールしたら

何も出なかったので手動インストールが必要な模様。

Windows7に新規インストールしたら

ダイアログ変わってました。
(バージョン 3.0.9.201202141038)
必須なのは変わらないけど、設定しなおす時の場所が書いてあって
すっきり分かりやすくなってます。
Studio will now automatically configure Git support.You can revisit settings later by choosing

PHPサポート

2まではプラグインだったPHPがデフォでサポートされている。
コードアシストやヒントもバッチリ。

apana3 PHP

5.3の関数も対応。

apana3 PHP5.3

しかしまだデバッガは実装されてない。

JavaScript Frameworks

2のライブラリーインポートみたいなものはないからProjectExplorerにファイルをドラッグする。

aptana3-file

元々インポート機能は使ってなかったからさほど問題はなかった。

JavaScriptのデバッガはまだ実装されていない。
2011-02-16のアップデートでJavaScriptのデバッガーが実装されました
Getting started with Aptana Studio Debugger
Firefoxのプラグインのインストールが必要。

HTML5 & CSS3

対応してました。

HTML5の要素もアシストとヒントが出る。

aptana3-html5

擬似クラスも。
aptana3-pseudo

Zen Coding

バンドルされたんだけどPythonが必要っていう。
Pythonが無ければAptana起動前に要インストール。バージョンは2.7の方
コマンドはCtrl+Alt+E。

PythonのインストールディレクトリはデフォルトがC:/Python27とかなんだけど、
別のHDDにした場合なんかはそのままじゃ動かなくなるので、C:\Documents and Settings\{USERNAME}\Aptana Rublesの中にあるzen-coding.ruble/commandsの
expand_abbreviation.rbファイルの11行目をインストール先のパスに書き換えておく。

ipath = com.aptana.core.util.ExecutableUtil.find("python", true, [org.eclipse.core.runtime.Path.fromOSString("C:/Python27"), org.eclipse.core.runtime.Path.fromOSString("C:/Python26")])

PythonをAptana3インストール後にインストールした場合は、Preferences -> Pydev -> Interpreter – Python を開き
上のPython interpreters横にあるAddをクリックして、インストールしたpython.exeを選択して設定したのち再起動をかける。
Auto Configを押せば勝手に探してくれる。

aptana3-python-setting

Help → Install New Software…からもインストールできるみたいです。

version 3.0.1

Zen-CodingにPython2.7が必要なのは同じ。
PythonをAptanaの後でインストールした後にコマンドが動かない場合は以下を試す

  • 環境変数のPATHを編集(pythonを追加)
  • Preferences -> Pydev -> Interpreter – Python >> Auto Config
  • Aptanaの再起動

Macの場合はRubleでzen-codingのパッケージがインストールが出来ればすぐ使えます。

Aptana Ruble

Commandsに入ってないRubleを使うには?

  1. Commands -> Install Bundle
  2. すきなの選ぶ
    (これ書いてる時点ではCSScaffold、GitHub、WebFont、Mercurial、Wordpress、jQuery、RSenseがあった)
  3. 勝手にインストール始まる
  4. CommandsにインストールしたRubleのメニューが表示される

WordPress Ruble入れてみた。
メニューからコマンド選ぶとcommand not definedってエラーが出るからなんでだろうと思って
Commands -> WordPress -> Edit this bundle選んで
Project Explorerに表示されたWordpress Rubleのプロジェクトフォルダからbundle.rb開いて

aptana3 ruble project

先頭をZenCodingのと同じにしてみたら

bundle do |bundle|
  bundle.display_name = 'Wordpress'
  bundle.author = 'Joost de Valk, Brett Terpstra'
 ....

直った 😀

aptana3 wordpress

ある程度タグを知って無いとメニューが意味不明になりそうだけどこれは中々便利。

jQueryはこんな感じ。

aptana3-jquery

慣れてると手打ちの方が早そうだけどjQueryはVSDocも対応してるから充実してると思う。
MooToolsにもがんばってもらいたいわ…

Sassを有効にする (version 3.0.1)

Compail SASS(Ctrl+Shift+R)コマンドの実行でエラーが出て動かなかった時にやったこと。

  • Rubyをインストール(既にされてれば必要ない)
  • 環境変数にPATHを追加(インストーラならオプションチェック)
  • Aptana再起動
  • Terminalでgem help実行
  • Rubyのヘルプが出たらSassインストール
         gem install sass

Windowsのコマンドプロンプトでsassをインストールしていても、
Aptanaのターミナルコンソールからインストールしていないと動かない。

他のgemもインストールしてAptanaのターミナルで実行することができます。(compassとかhamlとか)

ワークスペースの変更

自動的にマイドキュメントに作られるのは変わってない。変更は2と同じくファイルメニューから。

aptana3-workspace

ワークスペースの場所を変えたいなぁって時はFile->Switch Workspace->Otherと進んでフォルダを変更すればおk。
設定すればこのメニューからスイッチできるようになるので、使いたいワークスペースを選んで再起動すれば切り替わります。

テーマの変更

2まではカラー設定ファイルをインポートすれば好みの色に変更出来ていた。
その点は3でも同じなのだけど、新しく『テーマ』という機能で以前よりも簡単に!分かりやすく!エディタの色変更が出来るようになっている。
しかも最初から入っているテーマの種類が豊富。
初期が黒テーマになっているのにまずびっくりしたんだけど、他にも黒いテーマがいっぱいあって感動した。

aptana3 theme

テーマを変更した後でハイライトとかが見難くなってしまったら
General -> Editors -> Text Editors -> Annotations の設定を合わせて変更しておくと良い。

要注意なのは光沢モニタ+黒テーマの組み合わせだと疲れきった自分の顔が映ってしまう件。
丑三つ時なんかに見ると結構ドキっとするぞ。

ファイルタイプの追加

2と同じく、初期で対応していない拡張子のファイルには、内臓されているエディタを選んで設定すれば直ぐに対応させることが出来る。

対応してなかったtplを例にします。

  1. Window->Preferences->Editors->Contet Types と進む。
  2. Content Types:のセレクトメニューから拡張子をどの文書タイプにするか選択。
    .tplは.ctpと同じくPHP Source Fileにしときます。
  3. File associations:の隣にあるAddボタンを押して *.tpl を追加
  4. Preferences->Editors->File Associations に進む
  5. File types:の横にあるAddボタンを押して *.tpl を追加

aptana3_file-associations

phpDocumentor

概要と@returnと@paramしか出ない?2よりシンプルになっているような…。

aptana3_phpdoc

日本語化

2と同じ方法で出来るんじゃないかなあと思うんだけどまだbetaだし試してないです。
1から使ってるしさすがに慣れてきた感じ。

正式リリース後も日本語化しないまま使ってます。
やっぱり2と同じくPleiades入れれば日本語になるらしい。

画面比較

aptana3_preview aptana2 webパースペクティブ aptana2_preview

デバッグボタンがごっそりパースペクティブに移ってるので上のボタンがずいぶんスッキリしてます。

PHPとJavaScriptのデバッガは正式バージョン以降なのかな~。

参考:

1件のコメント

  1. Pingback: webox blog
  2. はじめまして。aptana3の説明、大変参考になってます。
    こういったフリーソフトやコーディングといったこと、全てに関して初心者です。
    実際にaptana3を使い始めたのですが、やはり難しいです。
    いまやっていることは、サンプルのhtml、cssソースコードを写経のようにaptana上で記入しています。
    html、cssそれぞれのファイルを作ったのですが、インターネット上でそのソースをプレビューすると、
    cssが反映されづに表示されます。
    どのようにすればcssの内容を反映できますでしょうか?
    これはリンク設定というのでしょうか。
    大変初歩的な質問で申し訳御座いませんが、ご教示願います。
    宜しくお願いします。

    Reply
  3. kei さん >

    上の説明にも以下のように書いてますが

    >デザインビューのようなWYSIWYGエディタが無いので
    >コード手打ち出来ない(orソースコードを見なれてない)という人には敷居が高いと思います。

    Aptanaには設定すればソフトがソースを補ってくれるような機能はなく、
    メニューのCommandsから選べるコマンドか、エディタでの自動補完くらいしかサポートがないです。
    言語問わず作る時は基本すべて手入力になるので
    表現したい事に必要な手段を知ってなければ何も出来ない、ということになります。

    CSSをHTMLに反映させる方法については基本中の基本ですが、
    何かを写経しているのならそれに書いてありませんか?
    もし分からない・見つけられないのであれば、それはAptanaの使用方法には関係ないことですから、
    こちらのサイトをご覧になってください。
    http://www.htmq.com/csskihon/index.shtml

    Reply

Leave a Comment.