Pocket

Aptanaでwebページ編集 wordpress も一部OK

今日ご紹介するソフトウェアは『Aptana studio』というWebオーサリングツールです。ホームページ作成を含む、webアプリの開発環境ですね。Eclipseという人気の開発ツールをベースに作成されているため、操作性が非常に良いです。またhtmlを始め,CSS,JavaScript,PHPやRuby等の複数の言語の開発に対応しています。MacOSやLinuxもサポートしていますが、ここではwindowsの場合を想定して紹介していきます。個人的にはwordpress改造の際に欠かせないソフトになっています。web開発されている方はぜひ導入して頂きたいソフトです。

Aptana studioのいいところ

Aptanaって、まぁヒトコトで言うとホームページ作成ツールです。有名ドコロですと『Dreamweaver』や『ホームページビルダー』なんかに相当するソフトウェアですかね。以下に、簡単ですがAptanaの特徴をさらっと紹介します。

  1. 無料で使えるソフトウェアです。
    まずなんといっても一番の魅力コレです笑 市販ソフトウェアにも決して負けないAptanaですが、なんと無償で提供されています。PCのソフトウェアって結構な費用ですもんね。個人で手を出すのが難しいところもありますが、Aptanaだったら気軽に始められます。
  2. コーディング補助が便利。
    例えばhtmlを書いていて煩わしいのが、タグの閉じ。例えば表を作る時、tableタグを始めとしてth,tr,tdタグを使うわけですが、<td>,<tr>,<table>って書いた後には</td>とか</tr>とか</table>って閉じないといけない。面倒くさいですね。でも、Aptanaはこの閉じタグを自動補完してくれる。<td>って書くと<td></td>って感じで。htmlでよく使うクォーテーションなんかも1コ書くだけで自動補完『’ 』→『”』、『”』→『””』のような感じです。便利!
  3. Emmetがすごい。
    Apatanaには外部のライブラリを使える仕組みがあります。この『Emmet』というのもその外部プログラムの一つなのですが、導入するとhtmlのコーディングが3倍速くなる。後ほど紹介。

Aptanaをインストールする。

さて、早速インストールしていきます。ボクは既存のwordpressのシステムファイルをいじるのによく使うので、その設定を紹介したいと思います。(投稿や固定ページの内容はmySQLに保存されているため、Aptanaでは扱えません。)
では、まずAptana Studioの公式ホームページに行ってみましょう。

Aptanaダウンロード

▼青いボタンからダウンロードします。
AptanaStudio3ダウンロード

▼ダウンロードしたらインストールファイルを実行。『I agree~』にチェックを入れて、『INSTALL』をクリック。
Aptanaインストール

▼早速起動します。オレンジ背景に白い歯車マークのアイコンです。
Aptanaアイコン

▼起動画面です。まだ何もできません。
起動画面

▼Wordpressにアクセスできるように設定します。画面左上の新規のアイコンをクリックし、『web project』を選択します。
wordpressの設定開始

▼『New web project』画面で『Default project』を選択し、『Finish』をクリック。
aptanaでwordpress

▼wordpressプロジェクトの名前を入力します。入力後『Finish』クリック。
WORDPRESSプロジェクトの入力

▼画面左のファイルエクスプローラー部に作成したプロジェクトが表示されていると思います。ボクは『test』というプロジェクトを作りました。その中にある『Connection』を右クリックして、『Add New Connection』を選択します。
wordpressへの接続設定

▼Projectが自分の作成した名前であることを確認。Remoteの『New』をクリック。
接続設定

▼『Site Name』に接続名を入力。なんでもイイです。『Protocol』はFTP、『Server』にはお使いのサーバーのftpサーバーを入力、ftpの『username』と『password』も入力します。今後のパスワード入力を省略する場合には『save』にチェックを入れます。
FTPの設定

▼パスワードを忘れた時のリマインダーを設定する場合は『yes』をクリック。
パスワードリマインダー

▼自分で質問と回答を2種類入力。忘れないように笑
パスワードリマインダー

▼ハイ、コレでwordpressファイルにアクセスできるようになりました。
編集画面

後はファイルエクスプローラーから編集したいファイルをクリックして、右側のエディターで編集。保存は左上のディスクアイコン。この辺りはwordなんかのエディタとそう変わらないので直感的に使えるかと思います。

Emmetをインストールする。

次に短縮コードが使えるEmmetをインストールします。Aptana+Emmetで真価を発揮できます。

▼Aptanaで『help』→『Install New Software』とクリックします。
emmetインストール

▼Addをクリック。
ソフトノインストール

▼『Name』にEmmet、『Location』にhttp://emmet.io/eclipse/updates/と入力。
ソフトウェアダウンロード先

▼Emmetにチェックをつけて、『Next』をクリック。
Emmetサーバー設定

▼『I accept~』にチェックをつけ、『Next』をクリック。
emmet4

▼インストールが始まります。完了後、再起動しましょう。
emmetインストール

そのパワフルな機能については、次の記事で!

Aptana Emmet で爆速コーディング

ソフトウェアの導入に関するお問い合わせ

ComtopiaではAptanaやEmmetを含む、便利なソフトウェアの紹介や導入、またはシステム開発などのご相談を承っております。どんなことでもお気軽にお問い合わせ下さい。
ソフトウェアの導入に関するお問い合わせ

パソコンのトラブルはこちらへ
Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です