Aptana studio3 + Emmet(Zen coding)を使い熟してHTMLを作成。無料メールアドレスを作成して無料メールソフトで管理。無料ホームページ登録及び公開するまでの方法を順を追って説明。
0,目次
0,目次
1,背景
2,準備編
2-1,Aptana studio3とは?
2-2,Aptana studio3インストール
2-3,Aptana studio3日本語化
2-4,Emmet(Zen coding)とは?
2-5,Aptana studio3にEmmet(Zen coding)を設定
2-x,Emmet(Zen Coding)設定参照サイト様
3,ホームページ作成編
3-1,Aptana studio3で新規プロジェクト作成
3-x,HTML記述参照サイト様
4,ホームページ公開編
4-1,無料メールアドレス登録(yahooメール編)
4-2,[スキップ可能]無料メールソフトの設定(Thunderbird編)
4_3,ホームページの登録(FC2編)
4_4,ホームページの公開(FC2編)
5,ホームページ作成公開Q&A用掲示板(仮)
複数のパソコン内にある無数のファイルを一つのHDDにまとめて整理を行う時、インターネット上で
手段を検索し施行錯誤したところ、数種類のフリーソフトウェアを使用する事で半自動!?でファイルを
整理する事ができたので、その方法のメモと展開も含めて久しぶりにホームページを立ち上げ様と思いました。
が、しかし、私が知っているホームページ立ち上げ技術は10年前のタグ打ちしてFTPでWEBサーバー
にアップロードする方法のみでした。今回はホームページの立ち上げ技術思いだしも含めて手始めに
「高機能ツールを使用して全て無料でホームページを作成して公開
するまでの方法」
と題したホームページを作成する事にしました。天下のGoogleさん
でホームページ作成について、色々検索させて頂いたところ
「Aptana Studio3」
という無料ホーム
ページ作成ソフトと
「Emmet(Zen coding)」
という高機能HTMLエディタを
使用する事で飛躍的にホームページ作成効率が上がる事がわかりました。これらのフリーソフトウェアを使用する事で
「0(ZERO)」からホームページを作成し無料でWebサーバーに公開するまでの方法を順を追って記載していきたいと思います。
今後、新たにホームページを立ち上げる方の参考になれば幸いです。
私にとっては、無料で使用できる高機能なHTML開発環境ですが、ざっくり説明するとHTML、CSS、JavaScript、PHP、Ruby
などを扱う統合開発環境の無料で使用できるツールになります。有名なEclipse(こちらもIBM開発のオープンソースの統合開発環境)
ベースのいわゆるウェブページ作成ソフト。詳細はwikiを参照して下さい.
http://ja.wikipedia.org/wiki/Aptana
インストールに関しては以下のYouTube動画がかなり参考になります。動画の後にインストール手順も記載します。
VIDEO
aptana の DOWNLOAD Web ページを開きます。http://www.aptana.com/products/studio3/download
「DOWNLOAD APTANA STUDIO3」をクリックします。Aptana_Studio_3_Setup_3.4.0.exe(2013/5/24現在)を所定のフォルダにダウンロードします。
「Aptana_Studio_3_Setup_3.4.0.exe」を右クリックで「管理者として実行」します。*(Win7の場合)今後のファイル権限を考えての保険です。
「Next」をクリックして、SetUpを開始します
「I Agree」をクリックして、ライセンス規約に同意してインストールを開始します。*規約は斜め読みをお勧めします。
「Destination Folder」で作業領域を設定します。初期設定はCドライブなので私はDドライブにしました。その後「Next」をクリックします。
「Next」をクリックして、スタートメニューフォルダーを設定します。
ファイルの関連付けをします。私はとりあえずxmlファイルも追加して、「Next」をクリックしました。
「Install」をクリックして、インストールを開始します。
インストールが完了したので、「Next」をクリックしてインストール作業は終了です。
インストール後「Aptana_Studio 3」をクリックして起動すると再度、作業領域について設定する必要があるようなので前と同じ様に設定します。
以上で「AptanaStudio3」のインストールは完了です。
Aptana Studio3は日本製ツールでは無いので、英語表記になります。ということなので以下の手順で日本語化をお勧めします。
MergeDocProject様のPleiades All in One は Windows 向けに開発対象プログラミング言語別でパッケージングした
Eclipse(Aptana Studio3はEclipseベース) 本体と Pleiades および便利なプラグインのセットを配布しています。すごいです。。。
Aptana Studio3の日本語化プラグインを配布している MergedocProject を開きます。
「最新版 1.4.X」か「安定板 1.4.0」を(2013/5/27現在)所定のフォルダにダウンロードします。
所定のフォルダにダウンロードした「pleiades.zip」を解凍後「plugins」「features」フォルダをコピーします。
「plugins」「features」フォルダをAptana Studio3のフォルダにコピーします。私の場合は「D:\AptanaStudio3WorkSpace」になりますが初期設定の場合はCドライブになります。上書き確認のWindowsのポップが表示されますが「はい」をクリックします。
Aptana Studio3の「AptanaStudio3.ini」をテキストエディタで編集します。
「AptanaStudio3.ini」の最終行に「-javaagent:plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar」を貼り付けてテキストエディタで上書き保存します。
「AptanaStudio3」を起動して下さい。見事日本語化されています。
以上で「AptanaStudio3」の日本語化は完了です。
Aptana Studio3だけでもHTMLエディット及びデバッグはできますが、以下の手順を参照してEmmet(Zen Coding)
のプラグインのインストールをお勧めします。使い熟せば、かなりコーディングを高速化する事ができます。
Emmet(Zen coding)を使うと、特定の省略された記法を展開する事ができ効率的にCSS、HTML
の記述を実施する事ができます。Emmet(Zen coding)は、エディタ等でHTML/CSSのコーディング
を効率的にサポートするためのプラグインです。多くのアプリケーションで提供されているので、インターネット
で検索すればこのサイトと同じように紹介しているサイトを沢山目にする事ができると思います。
以下の動画をご覧になればEmmet(Zen coding)の素晴らしさが伝わりやすいと思いますので
一度拝見してみては如何でしょうか!?。
ちなみに現在はZen codingが「Emmet」と名前が変更されてプロジェクトが進められているようです。基本的には、
今までのZen codingと変わりませんので、Zen codingを使っていた人は、そのまま拡張機能を使用
することもできます。Emmetから使ってみようと思う人は、今までのZen codingのドキュメントを使用しての学習も
可能です。ちなみに参考ですが、
Emmet公式サイトはコチラ
です。左サイドバーの「DOWNLOAD」をクリックして、右サイドの「Eclipse/Aptana」をクリックすればEmmet (ex-Zen Coding)
のAptanaでのEmmet(Zen coding)の設定方法が英語で記載されています。以下の手順通り実施すれば機械的に設定できる
よう記載しました。
Aptana Studio3の上部ツールバーの「ヘルプ」→「新規ソフトウェアのインストール」をクリックします。
作業対象の欄に「http://emmet.io/eclipse/updates/」のURLを入力して一発Enterします。
名前の項目に「Emmet」が現れますのでチェックを入れて「次へ」をクリックして下さい。
インストール詳細画面になりますので「Emmet for Eclipse」を選択して「次へ」をクリックして下さい。
ライセンス確認項目になります。ライセンス規約に同意してチェックを入れて、完了をクリックして下さい。
Aptana Studio3の再起動をを求められますので安定性を考えて「今すぐ再起動」をクリックして下さい。
以上でEmmet(Zen coding)の設定は完了です。
Aptana Studio3の上部ツールバーの「ファイル」→「新規」→「Webプロジェクト」をクリックします。
「Project Template」では「Default Project」を選択して「次へ」をクリックします。
プロジェクトの「プロジェクト名」に任意のプロジェクト名を設定します。(例)当サイトのプロジェクト名:aptanastudiobeginners
Aptana Studio3のTop画面の左上ウィンドウに先程設定したプロジェクト名が表示されるので選択して右クリック。
プロジェクト名が表示されるので選択して右クリックしてから「New Form Template」→「HTML」→「Blank File」を選択します。
ファイル名設定画面では「ファイル名」欄に任意のファイル名を設定します。(例)当サイトtopのhtml名:index.html
Aptana Studio3のTop画面の左上ウィンドウに先程設定したプロジェクト名が表示されるので選択して右クリックします。
プロジェクト名が表示されるので選択して右クリックしてから「新規」→「フォルダー」を選択します。
フォルダー名設定画面では「フォルダー名」欄に任意のフォルダー名を設定。(例)当サイトのイメージ格納フォルダー:img
先程作成したindex.html、imgフォルダーが作成されている事とAptana Studio3のTop画面で確認します。
ここからホームページ作成のためhtml記述を実施していきます。
ホームページ記述例を以下に記します。(2013/5/30:当サイトHTMLコード)