Think & Create » 開発環境・ツール

統合開発環境「Aptana Studio 3」でHTMLを作る

Asterism — Fri, 24 Oct 2014 11:27:09 +0000

　HTMLソースコードを色分けして見やすく、便利なソースコードアシスト機能もあり。

Aptana Studio 3で新規HTML作成

　前回記事は、Aptana Studio 3のダウンロードとインストール、そして日本語化について説明しました。
今回記事では、Aptana Studio 3で簡単なHTMLファイルを作るところまで説明します。

Web プロジェクトを作る

　まず最初に白紙のHTMLファイルを説明します。
画像のようにツールバーの「新規」アイコンの「▼」の部分を押して「Web プロジェクト」を選択します。

　または、「新規」アイコンを押して表示されたウィンドウから「Web プロジェクト」を選択してもよいです。

　次に、「Default Projectを選択します。」

　「新規 Web プロジェクト」ウィンドウが表示されます。「プロジェクト名(P)：」にはわかりやすい名前を入力して「完了(F)」ボタンを押します。
これでHTMLファイルを作る環境は整いました。

白紙のHTMLを作る

　まず、メニューバーから「ファイル(F)」->「新規(N)->「ファイル」と選択します。

　次に、「新規ファイル」ウィンドウが表示されますので、ファイル名(M)」にアルファベットでわかりやすい名前(トップページにするならindex.html)を入力して「完了(F)」ボタンを押します。

　すると、白紙のHTMLファイルが出来上がります。ここにソースコードを書いていきます。

HTMLの一部を自動生成する

　HTMLの骨格となる一部ソースコードを自動生成する方法を説明します。

　まず、メニューバーから「ファイル(F)」->「新規(N)->「ファイル」と選択し、「新規ファイル」ウィンドウを表示させ、ファイル名(M)」にわかりやすい名前を入れます。(ここまでは白紙のHTMLファイルを作るところと一緒です)

ファイル名を入力したら「次へ(N>)」ボタンを押すと、File Templateウィンドウが表示されますので、「HTML 5 Template」を選択し「完了(F)」ボタンを押します。

　すると、次のようなHTMLファイルが出来上がります。まず、(英語)になっているので、ここを(日本語)に変えておきましょう。
また、下線を引いているところに作者の名前(ユーザー名)が入るので、変更したい場合は変更しましょう。
から始まるお決まりのHTMLソースを入れないでよいので、便利ですね。

作成したHTMLの実行

　HTML文章を書くと、ブラウザでどう表示されるのかプレビューをしてテストを行う必要があります。
Aptana Studio 3には、作ったHTMLをプレビューする機能も付いています。
やり方は簡単で、ツールバーにある実行アイコンを押すか、メニューバーから「実行(R)」->「実行(R)」を選択するか、「Ctrlキー」を押しながら「F11キー」を押すだけ。
(HTMLファイルが変更されている場合は、'ファイル名.html'は変更されています。変更を保管しますか？とメッセージボックスが出ますので「はい(Y)」キーを押して保存します)。

　ためしに、「HTML基礎　文字化け防止」の記事でサンプルとして作ったHTMLファイルをプレビューしてみます。
以下がAptana Studio 3でプレビューした画面です。FireFoxでプレビューしていますね。実行アイコンの右にある「▼」の部分からプレビューするブラウザが選べますので複数のブラウザでプレビューすることもできます。

次回記事からHTML要素の説明

　今回までの記事でHTMLの基本と、HTML開発環境を整えました。
次回からHTML要素の説明を行います。

　以上、当サイト管理人のAsterismでした。

統合開発環境「Aptana Studio 3」のインストールと日本語化

Asterism — Wed, 22 Oct 2014 16:21:04 +0000

「Aptana Studio 3」はEclipseという統合開発環境(ソフトウェアを開発するツール)がベースになっているオープンソースで無料なウェブサイト開発ツール。

HTMLを簡単に記述できるようになる機能以外にもJavaScriptやCSSのエディタとコードアシスト機能等、機能が豊富でWebサイトの開発を効率よく行うことができます。

今回の記事で、Aptana Studio 3のインストールと日本語化、次回の記事で簡単なHTMLファイルを作ります。

Aptana Studio 3のダウンロードとインストール

　Aptana Studio 3は、Androidアプリ開発環境に推奨されるほど高性能の統合開発環境のEclipseをベースにしている開発ツールです。

　Aptana Studio 3のインストール方法は2種類あります。

Eclipseを同封しているAptana Studio 3をインストールする
EclipseをインストールしてAptana Studio 3のプラグインをインストールする

　今回の説明では、Eclipseを同封しているAptana Studio 3をインストールする方法を説明します。

Aptana Studio 3のダウンロード

　最初にAptana Studio 3のダウンロードをしましょう。
まず、Aptana Studioのウェブサイト(http://www.aptana.com/products/studio3)を表示します。
次に、「DONWLOAD APTANA STUDIO 3」と書かれたボタンを押します。

　すると、ダウンロードサイトへ移動しますので、「DONWLOAD APTANA STUDIO 3」ボタンを押します。するとAptana Studio 3のダウンロードが開始しますので、ダウンロードファイルを保存します。
（「Name」「Email Address」欄は空欄で構いません）

Aptana Studio 3のインストール

　ダウンロードしたファイル（ "Aptana_Studio_3_Setup_x.x.x.exe" ）を実行してインストールを開始します。
インストール開始前に以下のような「セキュリティの警告」ウィンドウが出ることがありますが、「実行(R)」ボタンを押して実行します。

　インストールを開始するとインストール先を指定する画面になります。そのままでも構いませんが、最初から指定されているインストール先はUsersフォルダ下でしたので、インストール先を「C:\Aptana Studio\」などに変えることをお勧めします。
「I agree to the License terms and conditions.」（ライセンス条項と条件に同意する）にチェックをして「INSTALL」ボタンを押せばインストールが始まりますです。

　インストール中画面です。

　インストール中に次のようなメッセージボックスが出ることがありますので、「はい(Y)」ボタンを押します。

　また、次のようなメッセージボックスが出ることがありますので、こちらも「はい(Y)」ボタンを押します。

　インストールに成功すると次のような画面になりますので、「Finish」ボタンを押せばインストール完了です。

Aptana Studio 3を起動

　Aptana Studio 3を実際起動してみます。起動するとまず、以下のウィンドウが表示されます。
これは、Aptana Studio 3を使って作るHTMLファイル等の保存場所となります。このままで特に問題はありません。

　次に以下のようなメッセージボックスが出ることがありますので、「アクセスを許可する(A)」ボタンを押します。

　すると、Aptana Studio 3が立ち上がり、以下のような画面になります。これでAptana Studio 3を使えるようになりました。

Aptana Studio 3の日本語化

　Aptana Studio 3は英語のソフトですが、日本語入力ができますのでそのまま使っても問題ありません。
ですが、日本語化したい場合は、日本語化するプラグイン「Pleiades」がありますので、それをインストールします。

Pleiades プラグインのインストール

　「Pleiades」は、Eclipseを日本語化するプラグインで、EclipseをベースとしているAptana Studio 3も日本語化できます。
インストールの仕方は、まず　Pleiadesのサイト(http://mergedoc.sourceforge.jp/)を表示します。

　次に、Pleiades プラグイン・ダウンロードと見出しが書かれたところまでスクロールし、「安定版」のほうのページを開きます。

　するとダウンロードサイトにジャンプしますので、pleiades_x.x.x.zipのほうをダウンロードします。

　ダウンロードしたzipファイルを展開します。

　展開したファイルの中から、featuresフォルダ、pluginsフォルダ、eclipse.exe-clean.cmdファイルをAptana Studio 3をインストールしたフォルダにコピーします。

　次のようなメッセージが表示されますので、「同じ処理を現在の項目すべてに適応(1個)(A)」にチェックをし、「はい(Y)」ボタンを押してフォルダを上書きします。

　「AptanaStudio3.ini」ファイルをメモ帳などのテキストエディタで開き、最後の行に、以下のテキストを追記します。

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

　「eclipse.exe -clean.cmd」メモ帳などのテキストエディタで開き、最後の行を以下のように書き換えます。

変更前：

start /d "%~dp0" .\eclipse.exe -clean %*

変更後：

start /d "%~dp0" .\AptanaStudio3.exe -clean %*

　そして、「eclipse.exe -clean.cmd」を実行すると、Aptana Studio 3が日本語化されます。
次からの起動時からは、普通に「AptanaStudio3.exe」を実行してもAptana Studio 3が日本語化されて立ち上がります。

ショートカットから起動しなくなった？

　「Pleiades」をインストールするとインストール時に作成されたデスクトップのショートカットで起動しなくなるようです。(私が使用している環境ではそうでした。)
ショートカットでも起動するようにするには、ショートカットのプロパティの「作業フォルダー(S):」にAptana Studio 3をインストールしたフォルダを指定すると起動するようになります。

次回ではAptana Studio 3をつかって簡単なHTMLを作る

　次回記事では実際にAptana Studio 3を使って簡単なHTMLをつくってみます。

　以上、当サイト管理人のAsterismでした。