Webサイトを作ろう! 【 2 】必要なソフトを準備する

    icon-clock-o読了時間:約7分20秒

前回 Webサイトを作ろう! 【 1 】レンタルサーバーとドメイン にて
自分の家(サイト)を建てるための土地(容量)の準備が完了したものとして
今回は数々の建材(データ)の作成と、その組み立てのための準備に入ります。
自分のパソコンの中で作ったデータを、契約したサーバー側にぺいっと放り投げればサイトが出来ます。
まずはパソコンの中でデータを組み立てるための場所と環境を作りましょう。

 目次 

専用フォルダを作る

テキストエディタをインストール

データをサーバーにアップロードするFTPソフトをインストール
  ∟補足:アップロードとダウンロードの使い分け

専用フォルダを作る

ひとまず ↓ こんな感じの構成のサイトを作る予定とします。
ページ推移
まずはこれから作るテキストデータや画像データを保存する場所を作りましょう。
基本的には皆さん、普段使うCドライブ内に『 website 』や『 hp 』といった
分かりやすく簡単な名前で作ることが多いようです。
中には好きな食べ物の名前だったり自分の名前だったりといった方も居るので
お好みのフォルダ名でかまいません。
Cドライブ
コンピュータ⇒ローカルディスク(C:)を開いて、
余白部分で右クリック⇒【 新規作成 】⇒【 フォルダ 】を選択。
ここでは例として『 website 』フォルダを作ります。
フォルダ内
こうして出来た『 website 』フォルダが、これから用意するサイト作成用データの保存先となります。
更に画像データやメールフォームなどは最初から複数ファイルを保存するだろうことが決まっているので
あらかじめ『 image 』や『 mailform 』などのフォルダを作っておくと良いですね。

テキストエディタをインストール

サイトを構成するテキスト(文章)や、段落構成などを表示させるための指示書が
ソースコード(単にコードとも)と呼ばれます。

以下は弊社のサイトのソースコードを一部抜き出したものです。

一見ややこしく見えるかもしれませんが、
・ここはページ上部の段落
・ページのタイトルはこれ
・クリックでメール作成
・ここにこの大きさの画像を入れる
といった指示をひとつずつ積み重ねているだけなので
そんなに難しいことではありません。
ちなみに記述の方法やコード例も後々ご説明します。

そんな訳で、こういったソースコードを記述しなければ何も始まらないのですが
記述はテキストが書けるもの(=テキストエディタ)であったら何でも、
それこそ最初からOS内に存在しているメモ帳でも構いません。
ただ、メモ帳だと色分けなどが無くて確認がしづらかったりするので
より便利に使えるソースコード記述に向いたフリーソフトや商用ソフトが色々と開発されています。

有料のものとして有名なのはAdobe Dreamweaverですが、これはテキストエディタの機能だけでなく
実際にどう表示されるかというテスト表示機能なども備えた
とっても便利なサイト作成の総合ソフトで、そのぶんお値段もなかなかのものです。
ちょっとしたサイトを作るくらいなら特に必要ないかと思いますので、
出来るだけ無料でコストを抑えていきましょう。
いくつかの無料テキストエディタをご紹介しますのでお好みのものをインストールしてみてください。

シンプルで使いやすい TeraPad

行番号表示や色分け表示にも対応しており、日本の方が開発したので
メニュー表示なども日本語でとても使いやすいテキストエディタです。
TeraPad インストールページ

カスタマイズが可能な サクラエディタ

こちらも日本の方が開発したソフトで、Windowsに対応したテキストエディタです。
豊富なカスタマイズ機能があるので、より細かく設定して使いたい方におすすめです。
サクラエディタ インストールページ

Microsoftが開発した  Visual Studio Express

Microsoftが開発したプログラミングソフトVisual Studioの無料版がVisual Studio Expressです。
プログラミング言語でアプリケーションを作るためのソフトですが、
テキストエディタとしての機能のみを利用することもできます。
Visual Studio Expressのページ
Visual Studio のダウンロードページ
のどちらかからインストールしてください。
※お使いのPC環境などによっては最新のVisual Studio Express 2013がインストールできないこともあります。
 その場合は旧バージョンのVisual Studio 2010 Expressをインストールしてください。

データをサーバーにアップロードするFTPソフトをインストール

横文字と英語が入り乱れて意味が分かりませんね。
要するに、サイト用に自分が作ったテキストファイルや画像ファイルを
自分のパソコンの中からサーバー(Web)側にぺいっと放り投げてくれるソフトです。
こんな感じで。
FFFTPの仕組み
基本的には同じデータが自分のパソコンの中とサーバー上にそれぞれある状態です。
こっちからサーバー上にデータを放り投げればWeb上に反映、つまりサイトとしての形になり、
逆にサーバー上のデータをもらってくれば自分のパソコンにコピー保存することができます。

安全な無料フリーソフトで利用者が多いソフトは以下の2つです。

使いやすさから利用者も多い FFFTP

最初の設定さえ行えば、後は左から右にドラッグ&ドロップですぐにファイルのアップロードが可能。
初心者さんでも使いやすいソフトだと思います。
私も最初からずっとこのソフトにお世話になっています。
FFFTP インストールページ

世界的に有名な WinSCP

Windows向けに開発されたFTPソフトで、機能が豊富なのが特徴でしょうか。
WinSCP インストールページ

補足:アップロードとダウンロードの使い分け

サイト作成の際に使用するのは主にアップロード = サーバーへのデータ送信です。

しかしサイトの中でリアルタイムに更新できる項目を作っているような場合には、
サーバー上のデータは更新されても、自分のパソコンの中にあるのは過去のデータ、という状態に
なることがあるので、忘れずにサーバー上からバックアップを取っておかなければなりません。
サイト側での更新を行ったら、その都度ダウンロード保存するように気をつけましょう。

また、いざという時のためにパソコン以外のメモリやディスクにも
サイトの構成データをコピーしておくと安心ですね。

 良かったら押してみてください♥

  • このエントリーをはてなブックマークに追加
  • Pocket