Aptana Studio3がホームページを制作するのにオススメ

こんにちは。
WEB集客＆企業のメディア化アドバイザーの持田です。

インファクトでは、毎週木曜日にユニフォームデーというのがあって、全社員がポロシャツ（冬はセーター）を着て1日過ごすという取り組みがあります。

ずっとスーツで過ごしてきたのでちょっと気恥ずかしい気持ちもありますが、夏はこうした涼しい格好で過ごせると仕事もはかどりそうです。

さて、今回はホームページ制作に役立つツールをご紹介です。

Aptana Studio3

プライベートのWindowsマシンには常に入れているAptana Studio3。

会社のMacにも搭載したくて何度かチャレンジしてきましたが、なかなか上手くいかずにほったらかしにしてました。

ただ、今回のブログ記事を書くために、重い腰を上げてようやくインストールすることができました。

さて、ホームページ制作というと、通常ホームページ制作ソフトを使ったりすると思うのですが、そうしたソフトを使うと余計なソースコードが書かれていたりして、それをそのままアップロードしたりすると、どうも気持ちが悪いんです。しかも「このページ○○使っているよ、大丈夫か？この会社」なんて思われたりするのがイヤなので、昔からテキストエディタで作っています。

テキストエディタというソフトは数多くありますが、「TeraPad」などのテキストエディタは素軽くて比較的便利です。

しかし、こちらはWindowsのソフトウェア。

会社で使用しているMacには搭載できないということで、今回「Aptana Studio3」をインストールしたという次第です。

実はこのソフト、かなり高機能です。

特に気に入っているのが、プラグインの「Emmet」。こちらを使うと簡単に「html」や「CSS」が書けてしまいます。

忘れてしまっても、ちょっと打ち込むとサジェストのように候補を並べてくれるのでとっても重宝しています。

昔は「Zen-coding」という名で知られていましたが、ある時から「Emmet」に名を変えて今も活躍してくれています。

Aptana Studio3のインストール

インストールは、Aptana Studio3のサイトからまずは最新版のファイルをダウンロードしてきます。

Aptana Studio3のサイト（http://www.aptana.com/）

そのままインストールしても最近のMacでは開きません。

というのもjavaのバージョンが少々古いものを使って作られているので、インストールしても途中でエラーしてしまうんです。

ここでMacのサイトからjavaの古いバージョンをダウンロードしてインストールしてからの作業になります。
※このjavaについては、全体に対してではなく、対象のソフトにのみ適用する形になりますので、全体に影響は出ていません。

Java for OS X 2015-001（https://support.apple.com/kb/DL1572?locale=ja_JP）

さて、準備が完了してからインストールです。

インストールが完了したら、すぐに使えますが、ここでも問題が・・・

このソフトは海外製なので、全ての操作が英語のみになります。
そのままでもいいよ、という方はすぐにプラグインのインストールへ進んで大丈夫です。

もし、日本語じゃないと使えない！というのであれば、日本語化が必要です。

Aptana Studio3の日本語化

Aptana Studio3の日本語化はPleiades – Eclipse プラグイン日本語化プラグインで日本語ファイルをダウンロードしてきます。

ファイルを解答したら「features」と「plugins」のフォルダ内にあるファイルをそれぞれAptana Studio3のフォルダ内にある同じフォルダ名の中にコピペします。

フォルダごとコピーすると、MACの場合は、差分のみ追加のコピーではなく、上書きとなってしまうため必要なファイルも消えてしまうのでご注意を。

この設定が完了してから起動すると、無事に日本語化が完了していると思います。

プラグイン「Emmet」の追加

ここまでインストールが完了したら、使用できるようになるまであと一歩です。

いよいよプラグイン「Emmet」をインストールします。

今、インターネット上で紹介されている記事の中のリンク先は古くなっている情報が多いのでこちらからアクセスしてみてください。※2017年6月現在

「Emmet（https://emmet.io/download/）」

「Sublime Text」の下に「Eclipse/Aptana」とありますのでこちらをクリック

このEmmetのダウンロードURLをコピペして、ヘルプ＞「新規ソフトウェアのインストール」へ移動し、ダウンロードURLの絶対パス「http://download.emmet.io/eclipse/updates/」をコピペして追加すると後は勝手に追加してくれます。

実際にインストールが完了してからソフトを立ち上げて実際に打ち込んでみます。

div#page>div.logo+ul#navigation>li*5>a

↑のように数学の式のようなものを書いて「command+e」を押すと・・・

こんな感じで一気に展開していきます。

便利だと思いませんか？

まとめ

ホームページ制作には、テキストエディタがオススメです。

コーディングをする場合は、こうしたソフトを使うと時間短縮につながりますので、効率化をしたい人は導入検討してみては試してみてはいかがでしょうか。