全て無料で高機能ツールを駆使してホームページを作成し公開するまでの方法
Aptana studio3 + Emmet(Zen coding)を使い熟してHTMLを作成。無料メールアドレスを作成して無料メールソフトで管理。無料ホームページ登録及び公開するまでの方法を順を追って説明。
0,目次
  1. 0,目次
  2. 1,背景
  3. 2,準備編
    1. 2-1,Aptana studio3とは?
    2. 2-2,Aptana studio3インストール
    3. 2-3,Aptana studio3日本語化
    4. 2-4,Emmet(Zen coding)とは?
    5. 2-5,Aptana studio3にEmmet(Zen coding)を設定
    6. 2-x,Emmet(Zen Coding)設定参照サイト様
  4. 3,ホームページ作成編
    1. 3-1,Aptana studio3で新規プロジェクト作成
    2. 3-x,HTML記述参照サイト様
  5. 4,ホームページ公開編
    1. 4-1,無料メールアドレス登録(yahooメール編)
    2. 4-2,[スキップ可能]無料メールソフトの設定(Thunderbird編)
    3. 4_3,ホームページの登録(FC2編)
    4. 4_4,ホームページの公開(FC2編)
  6. 5,ホームページ作成公開Q&A用掲示板(仮)
1,背景
「0,目次」へ移動
複数のパソコン内にある無数のファイルを一つのHDDにまとめて整理を行う時、インターネット上で 手段を検索し施行錯誤したところ、数種類のフリーソフトウェアを使用する事で半自動!?でファイルを 整理する事ができたので、その方法のメモと展開も含めて久しぶりにホームページを立ち上げ様と思いました。 が、しかし、私が知っているホームページ立ち上げ技術は10年前のタグ打ちしてFTPでWEBサーバー にアップロードする方法のみでした。今回はホームページの立ち上げ技術思いだしも含めて手始めに
「高機能ツールを使用して全て無料でホームページを作成して公開 するまでの方法」
と題したホームページを作成する事にしました。天下のGoogleさん でホームページ作成について、色々検索させて頂いたところ
「Aptana Studio3」
という無料ホーム ページ作成ソフトと
「Emmet(Zen coding)」
という高機能HTMLエディタを 使用する事で飛躍的にホームページ作成効率が上がる事がわかりました。これらのフリーソフトウェアを使用する事で 「0(ZERO)」からホームページを作成し無料でWebサーバーに公開するまでの方法を順を追って記載していきたいと思います。 今後、新たにホームページを立ち上げる方の参考になれば幸いです。
2,準備編
2-1,Aptana Studio3とは?
「0,目次」へ移動
私にとっては、無料で使用できる高機能なHTML開発環境ですが、ざっくり説明するとHTML、CSS、JavaScript、PHP、Ruby などを扱う統合開発環境の無料で使用できるツールになります。有名なEclipse(こちらもIBM開発のオープンソースの統合開発環境) ベースのいわゆるウェブページ作成ソフト。詳細はwikiを参照して下さい.http://ja.wikipedia.org/wiki/Aptana
2-2,Aptana Studio3インストール
「0,目次」へ移動
インストールに関しては以下のYouTube動画がかなり参考になります。動画の後にインストール手順も記載します。
  1. aptana の DOWNLOAD Web ページを開きます。http://www.aptana.com/products/studio3/download
  2. 「DOWNLOAD APTANA STUDIO3」をクリックします。Aptana_Studio_3_Setup_3.4.0.exe(2013/5/24現在)を所定のフォルダにダウンロードします。ap_1
  3. 「Aptana_Studio_3_Setup_3.4.0.exe」を右クリックで「管理者として実行」します。*(Win7の場合)今後のファイル権限を考えての保険です。
  4. 「Next」をクリックして、SetUpを開始しますap_2
  5. 「I Agree」をクリックして、ライセンス規約に同意してインストールを開始します。*規約は斜め読みをお勧めします。ap_3
  6. 「Destination Folder」で作業領域を設定します。初期設定はCドライブなので私はDドライブにしました。その後「Next」をクリックします。ap_4
  7. 「Next」をクリックして、スタートメニューフォルダーを設定します。ap_5
  8. ファイルの関連付けをします。私はとりあえずxmlファイルも追加して、「Next」をクリックしました。ap_6
  9. 「Install」をクリックして、インストールを開始します。ap_7
  10. インストールが完了したので、「Next」をクリックしてインストール作業は終了です。ap_8
  11. インストール後「Aptana_Studio 3」をクリックして起動すると再度、作業領域について設定する必要があるようなので前と同じ様に設定します。ap_9
  12. 以上で「AptanaStudio3」のインストールは完了です。
2-3,Aptana Studio3日本語化
「0,目次」へ移動
Aptana Studio3は日本製ツールでは無いので、英語表記になります。ということなので以下の手順で日本語化をお勧めします。 MergeDocProject様のPleiades All in One は Windows 向けに開発対象プログラミング言語別でパッケージングした Eclipse(Aptana Studio3はEclipseベース) 本体と Pleiades および便利なプラグインのセットを配布しています。すごいです。。。
  1. Aptana Studio3の日本語化プラグインを配布している MergedocProjectを開きます。
  2. 「最新版 1.4.X」か「安定板 1.4.0」を(2013/5/27現在)所定のフォルダにダウンロードします。pl_1
  3. 所定のフォルダにダウンロードした「pleiades.zip」を解凍後「plugins」「features」フォルダをコピーします。pl_2
  4. 「plugins」「features」フォルダをAptana Studio3のフォルダにコピーします。私の場合は「D:\AptanaStudio3WorkSpace」になりますが初期設定の場合はCドライブになります。上書き確認のWindowsのポップが表示されますが「はい」をクリックします。pl_3
  5. Aptana Studio3の「AptanaStudio3.ini」をテキストエディタで編集します。pl_4
  6. 「AptanaStudio3.ini」の最終行に「-javaagent:plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar」を貼り付けてテキストエディタで上書き保存します。pl_5
  7. 「AptanaStudio3」を起動して下さい。見事日本語化されています。pl_6
  8. 以上で「AptanaStudio3」の日本語化は完了です。
2-4,Emmet(Zen coding)とは?
「0,目次」へ移動
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)の設定方法が英語で記載されています。以下の手順通り実施すれば機械的に設定できる よう記載しました。
2-5,Aptana studio3にEmmet(Zen coding)を設定
「0,目次」へ移動
  1. Aptana Studio3の上部ツールバーの「ヘルプ」→「新規ソフトウェアのインストール」をクリックします。em_1
  2. 作業対象の欄に「http://emmet.io/eclipse/updates/」のURLを入力して一発Enterします。em_2
  3. 名前の項目に「Emmet」が現れますのでチェックを入れて「次へ」をクリックして下さい。em_3
  4. インストール詳細画面になりますので「Emmet for Eclipse」を選択して「次へ」をクリックして下さい。em_4
  5. ライセンス確認項目になります。ライセンス規約に同意してチェックを入れて、完了をクリックして下さい。em_5
  6. Aptana Studio3の再起動をを求められますので安定性を考えて「今すぐ再起動」をクリックして下さい。em_6
  7. 以上でEmmet(Zen coding)の設定は完了です。
2-x,Emmet(ZenーCoding)設定参照サイト様
「0,目次」へ移動
  1. [公式]Emmet Documentation(英語)
  2. More Emmet! Emmetを掘り下げよう。
  3. もしも10分の1の行数でHTMLが書けたら
  4. DevAchieve Emmetで高速HTML/CSSコーディング HTML編
  5. CodaとZen codingのショートカットまとめ。極めると早い。
  6. Zen codingのショートカットをまとめてみました
  7. Emmet(Zen coding) - Monacaドキュメント
  8. CSSの記述を高速化する、Emmet (Zen coding)
3,ホームページ作成編
3-1,Aptana studio3で新規プロジェクト作成
「0,目次」へ移動
  1. Aptana Studio3の上部ツールバーの「ファイル」→「新規」→「Webプロジェクト」をクリックします。hm_1
  2. 「Project Template」では「Default Project」を選択して「次へ」をクリックします。hm_2
  3. プロジェクトの「プロジェクト名」に任意のプロジェクト名を設定します。(例)当サイトのプロジェクト名:aptanastudiobeginnershm_3
  4. Aptana Studio3のTop画面の左上ウィンドウに先程設定したプロジェクト名が表示されるので選択して右クリック。hm_4
  5. プロジェクト名が表示されるので選択して右クリックしてから「New Form Template」→「HTML」→「Blank File」を選択します。hm_5
  6. ファイル名設定画面では「ファイル名」欄に任意のファイル名を設定します。(例)当サイトtopのhtml名:index.htmlhm_6
  7. Aptana Studio3のTop画面の左上ウィンドウに先程設定したプロジェクト名が表示されるので選択して右クリックします。hm_7
  8. プロジェクト名が表示されるので選択して右クリックしてから「新規」→「フォルダー」を選択します。hm_8
  9. フォルダー名設定画面では「フォルダー名」欄に任意のフォルダー名を設定。(例)当サイトのイメージ格納フォルダー:imghm_9
  10. 先程作成したindex.html、imgフォルダーが作成されている事とAptana Studio3のTop画面で確認します。hm_10
  11. ここからホームページ作成のためhtml記述を実施していきます。
  12. ホームページ記述例を以下に記します。(2013/5/30:当サイトHTMLコード)
3-x,HTML記述参照サイト様
「0,目次」へ移動
  1. HTMLクイックリファレンス
  2. [css][html] divでtableを作る tableの行全体をリンクにする divの高さとborder-bottomを揃える display:table-cellは神です。
  3. Tableの書き方
  4. CSSレイアウト実践講座
4,ホームページ公開編
4_1,無料メールアドレス登録(yahooメール編)
「0,目次」へ移動
無料ホームページを登録するには、登録用の無料メールアドレスがほぼ必要です。そこで有名な無料メールアドレスであるyahooメールの登録方法を順を追って説明します。
  1. http://promo.mail.yahoo.co.jp/に移動します。 ym_1
  2. 「今すぐメールアドレスを取得する(無料)」をクリックします。ym_2
  3. 必要情報を入力して「同意して登録」をクリックします。ym_3
  4. メールアドレスの登録完了です。ym_4
4_2,[スキップ可能]無料メールソフトの設定(Thunderbird編)
「0,目次」へ移動
ホームページ立ち上げ後管理するにはプライベートで使用しているメールソフトとは別のメールソフトを 使用した方が管理が楽です。そのため別のメールソフトをインストールする事をお勧めします。任意なので 既にインストールされているメールソフトを使用されても問題はありません。
  1. http://www.mozilla.jp/thunderbird/に移動します。
  2. 「Thunderbird無料ダウンロード」をクリックします。人にのフォルダに「Thunderbird Setup x.x.x.exe」をダウンロードします。ml_1
  3. 下記に沿ってインストールを実施します。ml_2
  4. Thunderbirdのセットアップが完了したら、「完了」をクリックします。ml_3
  5. 「Thunderbird」を起動します。初めて起動した時は「システム統合」のウィンドウが表示されますので、 既定のメールクライアントに設定したくない場合は「起動時にThunderbirdが規定のクライアントとする」 のチェックを外し、「OK」をクリックします。ml_4
  6. 初めて起動した時は「新しいメールアドレスを使いたい方」のウィンドが表示されますので、「gandi.net」「Hover.com」 のチェックを外します。現時点で二つのドメインでメールアカウントを作成する必要は無いためです。次に「メールアカウントを設定する」をクリックします。ml_5
  7. 「あなたのお名前:」任意の名前、「メールアドレス(L):」xxx@xxx(yahooメールを作成した場合はそのメールアドレス)、 「パスワード(P):」xxxx(yahooメールを作成した場合はそのパスワード)を設定して、「続ける」をクリックします。 ml_6
  8. 自動的に受信サーバ、送信サーバ等が検索されて自動設定されるので問題が無い事を確認して、「完了」をクリックします。 ml_7
  9. 以上でThunderbirdの設定は完了です。下記がThunderbirdのTOP表示になります。 ml_8
4_3,ホームページの登録(FC2編)
「0,目次」へ移動
ホームページ(HTML)を作成しても、公開する場所を確保しなければなりませんFC2を参考に登録するまでの手順を順を追って説明していきます
  1. ホームページ に移動します。今回は「新規登録」をクリックします。 fc2_1
  2. FC2のホームページサービスを利用する前にFC2ID登録をする必要があり必要情報を入力します。「メールアドレス入力」項目は先程作成したyahooメールを登録して下さい。 #もちろん他のメールアドレスでも可能ですが、このサイトの目的は「0(ZERO)」からホームページを公開する事を目的としていますので fc2_2
  3. FC2ID登録が完了すると以下の様に登録完了画面が表示され、指定のメールアドレスに本登録用のURLが記載されたメールが送信されます。 fc2_3
  4. 下記の様なメールを受信すると思いますので本登録手続き用のURLをクリックして本登録に進みます。 fc2_4
  5. プロフィールに必要情報を入力して、登録をクリックして下さい。 fc2_5
  6. 登録が完了すると指定のメールアドレスにFC2ID登録が完了した事のお知らせメールが届きます。 引き続きホームページサービスを利用するので「ログインURL」をクリックして下さい。 fc2_6
  7. FC2IDのログイン画面が表示されますので「メールアドレス」と「パスワード」を入力して「ログイン」をクリックします。 fc2_7
  8. 任意ですが、FC2IDを編集しますので「FC2IDの編集」をクリックします。 fc2_8
  9. 任意ですが、ニックネームを編集しますので「変更」をクリックします。 fc2_9
  10. 任意のプロフィールに変更して、「登録」をクリックして下さい。 fc2_10
  11. 「サービスの追加」をクリックします。 fc2_11
  12. ホームページの「サービスの追加」をクリックします。 fc2_12
  13. プランが表示されますので一般無料の「このプランで登録」をクリックします。アダルトサイトの場合は アダルトカテゴリの「このプランで登録」をクリックして下さい。 fc2_13
  14. ホームページの必要情報を入力して、「登録する」をクリックして下さい。 fc2_14
  15. 「ホームページの管理画面へログイン」をクリックして下さい。 fc2_15
  16. これでホームページサービスの登録は完了ですが、まだ何も公開していない状態になります。 fc2_16
4_4,ホームページの公開
「0,目次」へ移動
ホームページ(HTML)の作成、登録まで済んだら後はインターネット網に公開するだけです。公開するまでの手順を順を追って説明していきます。
  1. http://fc2.com/login.php/に移動します。今回は「ログイン」をクリックします。 2fc2_1
  2. FC2ホームページの管理画面の「トンカチアイコン」をクリックします。 2fc2_2
  3. 登録情報の「FTP情報」をクリックします。 2fc2_3
  4. 登録情報の「FTP情報」をメモします。
    [***重要****]後でAptanaStudio3でホームページ公開する時に使用するFTP情報として「ホスト名」と「ユーザー名」と「*パスワード(ホームページ登録時のFTPパスワード)」が必要になるので必ずメモする。
    2fc2_4
  5. Aptana Studio3 の左上ウィンドウの「接続」を選択して、右クリックして「Add New Connection...」を選択します。 2fc2_5
  6. Connection Managerが開くので「名前:FC2」に変更します。そして、宛先の「新規」をクリックします。 2fc2_6
  7. Create a FTP connectionが開くので先程メモした「「ホスト名」と「ユーザー名」と 「*パスワード(ホームページ登録時のFTPパスワード)」を入力して、保管にチャックを入れ「テスト」をクリックします。 2fc2_7
  8. 接続成功ウィンドウが出たら「OK」をクリックします。 2fc2_8
  9. Create a FTP connectionで「OK」をクリックします。 2fc2_9
  10. セキュア・ストレージウィンドウが出ますので、「はい」をクリックします。 2fc2_10
  11. パスワード回復セットアップウィンドウがでますので、パスワード回復用の質問と組み合わせを二つ設定して、「OK」をクリックします。 2fc2_11
  12. Connection Managerウィンドウで「適用」をクリックして、「OK」をクリックして接続設定は完了です。 2fc2_12
  13. 左上ウィンドウの「接続」→「FC2」→「Transfer Files」を選択します。 その後メイン画面にファイル転送ウィドウが表示されます。左側が[ローカルPC]側で右側が[WEBサーバー]側に なるので下記図を確認しつつ指定ファイルの転送を実施して下さい。一度、全ファイルの転送を行えば後は 差分の同期のみで短時間ですみます。これでホームページの公開は終わりです。ご苦労様でした。2fc2_13
  14. 公開された当ホームページ 「全て無料で高機能ツールを駆使してホームページを作成し公開するまでの方法」は以下になります。2fc2_14
5,ホームページ作成公開Q&A用掲示板(仮)
「0,目次」へ移動
inserted by FC2 system