フリーの高機能HTMLエディタ「Aptana Studio3」の日本語化と「Zen-Coding」のインストール方法。

たいへん遅ればせながら、とある本で「Aptana」の存在を知って、気になって使ってみたら、すごーい!便利!デザインもかっこいい!アプタナって名前も可愛い!これが無料とか信じられない!と、真夜中に一人テンションが上がってしまい、翌日見事に寝坊した私です。
まだ入れたてほやほやで、使いこなしているわけではないのですが、もしまだご存じない方がいたらおすすめしたいなーと思って、書いてみました。

はじめに

同じようにAptanaの記事を書いてくださっているブログもいくつか拝見したのですが、古い記事が多く、現在のバージョンや方法とは少し異なる点があったので、あらためて書いてみようと思いました。つまり、この記事も執筆時点(2012年2月)のものですので、今後、最新のものとは異なる場合が出てくるかと思います。ご了承下さい。
ちなみに環境は、Windows7です。

「Aptana Studio」とは…

簡単に言うと、高機能な無料のWebオーサリングツールです。「Eclipse」というプログラム開発環境が元になっていて、コーディングに強いのが特徴。現行のバージョン3では、HTML5とCSS3にも対応しているところが嬉しいですね。Dreamweaverにも劣らないという評判の良さで、個人的には、Dreamweaverよりも好きになってしまいそうです。

詳しくは、Wikipediaなどでどうぞ。

「Aptana Studio3」のインストールから日本語化、Zen-Codingのインストールまで

まずは、Aptanaのダウンロードページから「DOWNLOAD APTANA STUDIO 3」をクリックして、ダウンロードを開始します。

Aptana ダウンロード

ダウンロードが完了したら、ファイルをダブルクリックして実行すると、インストールが始まります。ここは、さらーっとスライドでどうぞ。

「Aptana Studio3」を日本語化する。

Aptanaは、そのままだと全て英語表記なので、これを日本語化させましょう。
まず、Pleiades (プレアデス) という、Aptana(というかEclipse)を日本語化してくれるパッチをダウンロードします。こちらのページの「Pleiades 本体ダウンロード」の「最新版」か「安定版」(任意で選んでください)をクリックすると、zipファイルがダウンロードされます。

Pleiadesをダウンロード

ダウンロードしたzipファイルを解凍して、「features」と「plugins」フォルダをコピーします。

Aptana3の日本語化1

「Aptana Studio 3」のフォルダに、先ほどのコピーしたフォルダをペーストします。ここで、Aptanaフォルダ上書きの確認ポップアップが表示されたら「はい」でOK。

次に、「Aptana Studio 3」のフォルダ内にある「AptanaStudio3.ini」ファイルをテキストエディタで開きます。

Aptana3の日本語化2

最後の行に、下記のコードをペーストして、上書き保存します。

-javaagent:plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar

↓こんな感じですね。

Aptana3の日本語化3

これで日本語化の設定完了!Aptanaを起動してみると…、おおーちゃんと日本語になっていますね。

Aptana3の日本語化-完了!

「Aptana Studio3」に「Zen-Coding」をインストールする。

次に、高速コーディングに欠かせない「Zen-Coding」をAptanaにインストールしましょう。私はDreamweaverに入れて使っていましたが、Aptanaでも使えるんですね。(しかし、Zen-Codingの公式サイトから、for Aptanaが消えているのは何故…?)
「Zen-codingって何?」という方は、@ITさんの、「Zen-Codingで高速HTML&CSSコーディング」という記事が参考になりますよ。

では、早速インストールしましょう。
Aptanaを起動して、ツールバーの「ヘルプ>新規ソフトウェアのインストール…」をクリック。すると次のような画面が表示されるので、あとは以下の手順で進めてください。

  1. 「追加」をクリック。
  2. 「名前」に Zen-Coding と入力。
  3. 「ロケーション」に http://zen-coding.ru/eclipse/updates/ と入力。
  4. 「OK」をクリック。
  5. 「名前」カテゴリーなしにチェックを入れる。
  6. 「次へ」をクリック。
  7. 「Zen Coding for Eclipse」を選択。
  8. 「次へ」をクリック。
  9. 「~同意します」を選択。
  10. 「完了」をクリック。

すると、Zen-Codingのインストールが開始されます。インストールが終わったら、Aptanaを再起動しましょう。ツールバーに、Zen Codingが表示されていますね。

AptanaにZen-Codingをインストール

さあ、これでコーディングの準備はできました!
試しに…

div#hoge>P.huga

と入力して、Ctrlキー+Eを押すと

<div id="hoge">
  <p class="fuga"></p>
</div>

と、展開されました。よし、オッケー。

以上、Aptanaのインストールから日本語化、Zen-Codingのインストールでした!

参考になったサイト


新しい洋服を手に入れると早くおしゃれして出かけたくなるように、新しいエディタを導入すると、早くコーディングしたくてうずうずしますね。
がんがん使いこなせるようになったら、あらためてAptanaの記事を書いてみたいなーと思います。

ということで、AptanaにフォーリンLOVEな私でした。嗚呼、もっと早くアナタに出逢いたかった…。けど、今からでも遅くないよね、私達。

追記:2013/01/29

HTMLエディターをお探しでしたら、Adobe Edge Codeについても書いていますので、良かったらご覧になってみてください!

Pocket

  • 望 長野

    早速Download致しました。確かに見た目もいい感じ!時間見つけていじってみます。(^^♪

    • コメントありがとうございます!

      デザイン素敵ですよねー。使い勝手も良いので、ぜひお試しになってみてください♪

  • Mr.Hironoobuu

    以前、「Aptana Studio3」の日本語化を試みたところ、情報が不足していたためインストールを断念しました。
    しかし、ウェブ初心者の友人にコーディングを教えるのにやる気を起こさせれるようなエディタがなく、もう一度、Aptana Studio3について検索してみたところメグログで紹介されていたため参考にさせていただきました。
    有力な情報を提供していただきありがとうございました。

    • コメントありがとうございます!
      お役に立てたようで嬉しく思います♪
      コーディングの指導、頑張ってくださいねー( ´∀`)

  • Pingback: Shift↑Enter← | Aptana Studio 3 でAndroid開発環境構築()

  • Pingback: | White Moriyama Blog()

  • ありがとうございました!
    さっそくhtmlの作成を頑張ってみます!

    • コメントありがとうございます!

      コーディング、楽しくがんばってください♪

  • Pingback: Ruby:Mac Eclipseでの開発環境 | As Carpediem Style()

  • Aptana を使う機会があってたどり着いたのですが、feature と plugins は dropin へコピーしたほうがすっきりしていいかもしれないですね。

    • こんにちは!ご無沙汰ですが、お元気でしたか?

      なるほどー、dropinsにコピーしちゃってもOKなんですね。

      この記事も情報が古くなったりしている部分があって、修正しなきゃなーと思いつつ、面倒くさくて放置しています…(;´∀`) 

  • juliamst

    とてもわかりやすくて参考にさせていただきました。

    私の環境(windows7)では、feautersとpluginsやdropinsフォルダにいれて、AptanaStudio3.iniの最後に追記する1行を -javaagent:dropins/plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar にしないとエラーが出て起動しませんでした。

    ご存知かと思いますが、ご参考まで。

    • こんにちは。コメントありがとうございます!
      そうですね、dropinsに入れた場合はパスの変更が必要ですね。
      ご丁寧にありがとうございます( ´∀`)

  • yuki

    win8 64vit版で日本語化できました。頑張って使い込んでみます。! (^^♪

    • コメント&情報をありがとうございます!
      私にとってはAptanaが一番使いやすいなーと感じるこの頃です。
      是非使い倒してみてください♪

  • すてきなサイトを作りたい

    zen-codingですがeclipse用はemmetに変更になっているようです。

    emmet – http://emmet.io/eclipse/updates/

    • コメントありがとうございます!
      そのようですね。情報共有いただき感謝です!

  • Pingback: 初心者必見!ホームページ作成に役立つフリーソフト10選 | TechAcademyマガジン()

  • Pingback: Aptana日本語化+Emmet導入 | アメリカ留学日記()

  • あざみ

    OS8.1では日本語化が何回やってもできません

  • Pingback: RedminePlugin用IDEのインストール(Aptana編) – 諸々()