ユーニックス総合研究所

  • home
  • archives
  • programming-site

プログラミングで行うサイト作成の方法

プログラミングでサイト作成する方法

この記事ではプログラミングでサイト（ホームページ）作成する方法と、サイトの公開方法を解説します。
結論から言うとプログラミングによるサイト作成では↓の知識が必要とされることが多いです。

  • HTML/CSS/JavaScript
  • PHP
  • レンタルサーバー/ドメイン

↑の知識の内、「HTML/CSS」については必須で、「JavaScript」と「PHP」は場合によって必要になります。
それから「レンタルサーバー/ドメイン」の知識も必須です。

私もWeb開発者として多数のWebサイトを制作して公開してきましたが、これらの知識は基本と言える知識です。
この記事では具体的に↓の疑問にお答えします。

  • サイト作成に必要なものとは？
  • サイトの作成方法とは？
  • サイトの公開方法は？

サイト作成に必要なもの

サイト作成で最低限必要になるのは「HTML/CSS」と「レンタルサーバー/ドメイン」の知識です。
「HTML/CSS」はサイトを作るのに使われるマークアップ言語です。
「レンタルサーバー/ドメイン」は作成したサイトをインターネット上に公開するために必要です。

流れとしては↓のようになります。

  • HTML/CSS（場合によってPHPなども）でサイト作成
  • レンタルサーバーをレンタル
  • ドメインを取得、設定
  • サイトをネットに公開

ではHTML/CSSやJavaScript, PHPなどについて具体的に見ていきましょう。

HTML

HTML（エイチティーエムエル）とはサイトの構造を作るのに使われるマークアップ言語です。
サイトに表示されているテキストなどの文字列は、このHTMLで書かれています。
たとえばHTMLによる見出しは↓のように書きます。 

<h1>これは見出しです</h1>

HTMLで書かれたファイルの拡張子は.htmlで保存されます。
たとえばindex.htmlなどがそうです。

CSS

CSS（シーエスエス）とはサイトのデザインを作るのに使われる言語です。
HTMLで書かれたテキストを装飾したい時にこのCSSが使われます。
HTMLの中にこのCSSを埋め込むことができます。それによってHTMLで書かれた見出しなどをCSSで装飾できます。
また、HTMLに埋め込む他にCSSを別のファイルとしても保存することができます。その時のファイルの拡張子は.cssになります。

↓はCSSで見出しを装飾する例です。フォントの大きさを48pxにしています。 

h1 {  
    font-size: 48px;  
}

基本的なサイトはこれまでに紹介したHTML/CSSのみで作ることができます。
見た目が動いたり、フォームを設置して動的なサイトにしたい場合は以降のJavaScriptやPHPが必要になります。

JavaScript

JavaScript（ジャバスクリプト）とはHTMLを動的に操作したりするプログラミング言語です。
見た目がよく動くサイトがあれば、それはJavaScriptによる仕事であることが多いです。
最近のサイトは見た目がリッチなことが多いですが、そういった需要が高まるにつれてJavaScriptの人気も高まってきました。
最近ではサーバーサイドでも使われることが多い言語です。

↓はJavaScriptでサイトの内容を変更するコードです。 

document.write('<h1>てすと</h1>')

PHP

PHP（ピーエイチピー）とは動的なサイトを作る時に使うプログラミング言語です。
サイトの訪問者がメッセージを投稿できるフォームなどは、こういったPHPなどの言語で作られています。
たとえばFacebookなどはユーザーの投稿がサイトに反映されますが、あれはPHPによる仕事です。

動的なサイトを作る言語は、PHPの他にはRubyやPythonなどがあります。

↓はPHPで「Hello, World!」と表示するコードです。 

<?php  
    echo "Hello, World!\n";  
?>

レンタルサーバー

レンタルサーバーとは作成したサイトをネットに公開するための、ネット上で借りる土地みたいなものです。
これがないとサイトをネットに公開することができません。
「サーバー」とはネットに公開されているパソコンのことです。

ネット上に公開されているサイトのほとんどは、こういったレンタルサーバーで公開されています。
最近はAWSなどといったクラウドも人気がありますが、基本はこういったレンタルサーバーです。

ドメイン

ドメインとは、ブラウザのアドレスバーに表示されるアルファベットの文字列のことです。
たとえばGoogleなら「google.co.jp」、Yahoo!なら「yahoo.co.jp」などがドメインになります。
これは、ネット上に公開されるサイトの名前です。

レンタルサーバーはネットに公開されていますが、ドメインという名前はつけられていません。
そのためドメインは別で購入して、レンタルサーバーに紐付ける必要があります。

サイトの価値はこのドメインに蓄積されていきます。
ですので非常に重要なものです。

サイトの作成方法

サイトの作成の大まかな流れは↓のとおりです。

  • ワイヤーフレームを作る
  • デザインを作る
  • プログラミング

初心者の人は「ワイヤーフレーム」と「デザイン」の工程をすっとばしていきなりプログラミングをはじめてもかまいません。
かまいませんが、効率的には先にワイヤーフレームとデザインをやったほうがいいです。
しかしこれらの工程はいわゆるプロの人がやる工程なので、そこまで求めてないという人はいきなりプログラミングをしてもOKです。
ただ、ちゃんとしたサイトを作りたい場合はワイヤーフレームからやりましょう。そのほうが結果的に楽です。

🦝 < 臨機応変にってことね

ワイヤーフレームを作る

ワイヤーフレームとは、デザインの前段階で行うおおまかなサイトの構成のことをいいます。
A4のコピー用紙などに鉛筆で四角形などを描いて、サイトのレイアウトを考えていきます。
いわゆるサイトの下書きみたいなものです。漫画で言ったらネームですね。

🦝 < ここでいろいろなアイデアを練る

デザインを作る

ワイヤーフレームが決まったらデザインを作ります。
デザインはAdobe社のPhotoshop/Illustratorといった有料のソフトや、無料のInkscape/Gimpなどのソフトを使って作ります。
無料で作りたい場合はInkscapeでOKです。

デザインは外部設計という設計もかねています。
ここをしっかりやることで後のプログラミングの工程がずっと楽になります。

プログラミング

作成したデザインをもとにプログラミングを行います。
まずHTMLでサイトに表示したいテキストを書きます。
それからCSSでデザインを参考にプログラミング（正確にはコーディング）を行います。

必要によってJavaScriptでサイトに動きを加えます。
また、PHPなどで動的なサイトを作る場合は、HTMLより先にこのPHPで画面にデータを出力するところからはじめてもかまいません。

ワイヤーフレームやデザインに間違いがあった場合は、それらの工程に戻ってやり直すことになります。
いわゆる「仕様変更」などもこういったやり直しが発生します。
プログラミングは時間がかかるものです。時間を節約したい場合はプログラミングの前の工程のワイヤーフレームとデザインをしっかりやっておきましょう。

サイトの公開方法

作成したサイトを公開する手順は↓のようになります。

  1. レンタルサーバーをレンタルする
  2. ドメインを取得する
  3. レンタルサーバーにドメインを紐付ける
  4. レンタルサーバーにサイトのファイルなどを配置する

サーバーのレンタルやドメインの取得は必ずこの順番で行わければいけないというものではなく、前後してもかまいません。
ただサーバーのレンタルとドメインの取得は同日か近い日にするようにしておきましょう。
そうしないと銀行への振込日が別々の日になってしまいます。

また、レンタルサーバーにサイトのファイルを配置するにはFTPやSFTPといった機能を利用する必要があります。
FTPは、みなさんのパソコンからレンタルサーバーにファイルを転送する仕組みのことです。
これらのFTPを利用したソフトウェアは「FFFTP」などが有名です。

レンタルサーバーをレンタルする

サイトを公開するに当たってレンタルサーバーをレンタルするわけですが、有名なレンタルサーバー・サービスをいくつか紹介します。

注意点として、PHPなどの動的言語を利用する場合はレンタルサーバーでそれらの動的言語が利用できるかあらかじめ確認するようにしておきましょう。
レンタルサーバーによっては対応していないところもあります。
またMySQLなどのデータベースを利用する際も確認を忘れないようにしておきましょう。

また、最近のサイトではSSLを使うのが普通になっています。
SSLとは「https」などの安全通信のことです。
ですのでこれに対応しているところを選びましょう。

ロリポップ

WordPressも配置でき、独自SSLも無料で利用できるレンタルサーバーです。
サポートも充実していて初心者にも安心と言えるレンタルサーバーです。

ドメインについてはロリポップ固有のドメインや、独自ドメインを利用することが可能です。

エックスサーバー

Web制作業界でもさいきん人気があるレンタルサーバー・サービスです。
ドメインが永久無料で利用できます。

さくらサーバー

このブログもお世話になっているレンタルサーバー・サービスです。
ドメインの取得もやっていて、こちらのサービスでレンタルサーバーのレンタルとドメインの取得の両方を行うことができます。

ドメインを取得する

先ほど紹介したレンタルサーバー・サービスでもドメインは取得できますが、ドメイン専門にやっているサービスもあります。
さきほどのレンタルサーバー・サービスとは違う外部のドメイン取得サービスで取得したドメインも、レンタルサーバーに紐付けることは可能です。
有名な2つのサービスについて紹介します。

お名前.com

国内シェアNo.1のドメイン取得サービスです。
希望ドメインの検索から取得まで簡単に行うことができます。
私もいくつかここでドメインを取得したことがあります。

Google Domains

さいきん出てきたGoogleのドメイン取得サービスです。
Web開発者を中心に人気が出てきています。

おわりに

今回はプログラミングでサイト作成を行う方法と、そのほか、サイトの作成と公開にあたっての予備知識も解説しました。
プログラミングでサイトを作成するにはHTML/CSS/JavaScript/PHPなどの知識が必要になります。
これらの知識を習得することであなただけのWebサイトを作成できるようになります。

🦝 < サイト作成がんばってね

カテゴリー

メニュー