課題で作ったサイトを違うパソコン(PC・スマホ・タブレット)で閲覧する方法

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

かれこれ10年以上前にデザイン専門学校のWebデザイナー科に通っていました。学校では卒業時に課題(ウェブサイト)を作るのですがそのときにWebの仕組みで苦戦した記憶があります。本日は懐かしのスクール時代を思い出しながら「課題の公開方法」についてざっくり解説をいたします。

課題で作ったサイトを違うパソコン(PC・スマホ・タブレット)で閲覧する方法

専門学校では「課題の作成」があります。そして「自分が所有しているパソコン内」でサイトの元となるデータを作成します。大前提として「Windows」でも「Mac」でもパソコン上で作成しているデータは自分自身しかページを開くことができません。もし自分自身のパソコンを「サーバー」として組み上げていれば『外部からのアクセスを許可』できますが普通のパソコンにはそういった機能はありません。

カンタンに言えば「あなたのパソコン内に保存されているデータ」は、友達のパソコンなど、第三者が所有しているスマホやタブレットからは見ることができません。もちろん、当然と言えば当然の仕組みですが「当時専門学校へ通っていた頃はそんな当たり前のこともわかっていなかった」ので念のために補足しておきます。

余談として「ハッキング」と呼ばれる「外部から他人のパソコンに侵入する行為」があります。パソコン内にインストールされているソフトウェアの欠陥(セキュリティホール)をついて入るなど特殊な技術を持つ人たちです。そしてそういった不正なアクセスを防ぐために存在しているのが『セキュリティソフト』ですね。

課題で作ったデータはどこに保存されているのか?

では話を戻しましょう。たとえば自分自身のパソコン内で作ったウェブサイトがデスクトップに保存されていたとしましょう。

これらは「パソコン上」にあります。中を開くとhtmlデータが保存されています。

保存先は「Macintosh HD > ユーザ > 名前 > Desktop > 課題で作ったウェブサイト(html一式)」です。保存されている開始位置が「Macintosh HD」なので自分自身が所有しているPCのハードディスクを指します。

外部からファイルを閲覧できるようにするには?

上記にある「index.html(css・img・jsを含む)」を、第三者のパソコンやスマートフォンからも閲覧可能にするにはデータ一式を「Webサーバー上」にアップロードする必要があります。

つまり、自分自身が所有しているパソコン上(ローカルとも呼ばれます)で作ったデータを、誰もがアクセス可能なサーバー上(グローバルとも呼ばれます)にコピーしなければなりません。ちなみにローカルとグローバルというのは外部アクセスができるかどうかの対比として呼ばれるだけなので気にしなくてOKです。

そしてパソコンからWebサーバーに接続するためのソフトを「FTPクライアント」と呼びます。FTPクライアント(ソフトウェア)をパソコンにインストールして導入すればアップロードができます。

以下がFTPクライアントでWebサーバー上に接続した表示例です。左右を見比べると左側(デスクトップ側)にあって、右側(Webサーバー側)に存在しないファイルがありますよね。各ファイルは右クリック操作やドラッグ&ドロップで1つずつファイルをアップロードしていきます。まとめての操作も可能です。

ちなみに右側はドメインを指定して接続します。独自ドメインがなくても一般的なレンタルサーバーではアカウント開設時に無料スペース「123.mixh.jp」等が提供されるので接続先は自由です。もし123.mixt.jpにファイルをあげたら「http://123.mixh.jp/」にアクセスしたユーザーは「index.html」が開きます。

サイトの外部公開には「サーバー」が必要

なんとなくイメージが湧きましたでしょうか?ざっとまとめるとサイトの公開には下記が必要です。

1. サイトデータ(html一式)
2. レンタルサーバー
3. FTPクライアントソフト

もし課題で作ったサイト(htmlデータ)が手元にあるなら、公開するためのサーバーが必要です。ただ、自前でサーバーを立ち上げるとなると自宅に「固定IPを引く」といった一般的なインターネット回線契約には付属していない特別な有料契約を追加しなくてはなりません。サーバー専用のPCも必要で電気代も高くなります。

そこで「レンタルサーバー」と呼ばれるサービスが役に立ちます。レンタルサーバーを契約すれば自宅に固定IPを引っ張らなくても『レンタルサーバー側が固定IPを所有』しているので一部の領域を貸してくれます。

レンタルサーバーを契約すると固定IPが使える

通常はレンタルサーバーを契約して使っていても「固定IP」について意識する場面はありません。というのもレンタルサーバーを契約するとサーバー会社から固定IPを割り振ってもらえます。ただ、固定IPは単なる数字4つの組み合わせでしかないので実際に使用するときは裏側で「ドメイン」と紐づけて使います。

先述した通り「レンタルサーバーを契約」するとサーバー会社から無料のサブドメイン(123.mixh.jp等)が自動で振り分けられて、さらにそのサブドメインと固定IPを紐づけた状態で提供してくれるので契約者側は紐づけの設定を行う必要がありません。もし自分自身で取得した独自ドメイン(example.com等)があってレンタルサーバー内に持ち込む場合も基本的にはコントロールパネルからドメインを追加するだけでOKです。独自ドメインにはレンタルサーバー側が指定する「DNS値」だけは指定しておく必要があります。

少しむずかしい話になってきましたが、要約すると、レンタルサーバーの裏側では「固定IP」という4つの数字からなるIPアドレスが使われていているという仕組みだけを覚えておけばOKです。

レンタルサーバーの種類(共有サーバーと専用サーバー)

レンタルサーバーには大きくわけて2種類あります。数名で固定IPを使う低価格な共有サーバーと、1人で固定IPを使える高額な専用サーバーです。中小企業でも共有サーバーを使っていることが多いです。

共有と言っても契約したサーバーを誰かに見られるわけでないので、多くの方は共有サーバーを選びます。共有サーバーであれば月数百円から数千円程度で契約できるのでリーズナブルなのも特徴です。

固定IPをひとり占めできる専用サーバーは安くても月1万円はします。予算に余裕がある方にはおすすめですがどんなウェブサイトも運営当初では専用サーバーの良さを活かしきれないです。考え方としては会社を立ち上げるとして事務所に「マンションを借りるか、一戸建てを借りるか」の違いによく似ています。

コストが安い反面で住居ルールはあるマンションと、コストが高い反面でほとんどルールに縛られない一戸建てどちらを選ぶか?という感覚に近いです。共有サーバーがお得とは言いましたが「スペックが低いサービス」を選ぶと毎月末にアクセスオーバーで操作ができなくなる場合もあるので気をつけましょう。

おすすめは「ミックスホスト」か「エックスサーバー」です。どちらを選んでも失敗は少ないですが、時期によって振り分けられるサーバーも当然異なります。共有サーバーは他社の影響は受けづらい仕組みにはなっていますが同じサーバー内で負荷のかかる使い方をするユーザーと一緒になる可能性もあります。

レンタルサーバーはいくらから使えるのか?

レンタルサーバーの価格はピンキリです。注意しておきたいのは「高い=高機能」とは言い切れない点です。個人的にもっとも気に入っているミックスホストは月額1000円未満でサーバー契約ができます。

ウェブサイトはインターネット上の看板であり、事務所のような存在でもあるので月額1000円程度でレンタルできるのはある意味で破格です。またミックスホストではドメインを設定すると裏側でSSL証明書が自動発行されるので後からSSL証明書をインストールするなど余計な作業も必要ありません。

以前に「ミックスホストでアカウントを開設する手順」も別で記事にしていますので、もし今からレンタルサーバーを契約して課題など(ウェブサイト)を一般公開したい方はご参照いただけますと幸いです。

Mixhost(ミックスホスト)でレンタルサーバーを開設する手順

まとめ

課題で作ったサイトを一般公開(ローカルではなくグローバルに)するには誰もがアクセスできるサーバー上にデータを置かなければなりません。そのために必要なのが「レンタルサーバー」。そしてレンタルサーバーを契約するとサブドメイン(123.mixh.jp等)が自動で振り分けられて「固定IP」が紐づけられています。

固定IPを数名でシェアするのが低価格な共有サーバー、贅沢にひとりで使うのが高額な専用サーバー。SEOを意識したサイト作りではレンタルサーバーからもらえるサブドメインは使わず独自ドメイン(example.com)を持ち込むのがベストです。そしてサーバーに接続するために必要なのがFTPクライアントソフト。

Webサーバーの仕組みはそれほどむずかしくないので一回でも覚えてしまえば心配ありません。過去にレンタルサーバーにFTP接続を行う手順についても記事にしていますのでぜひお目通しくださいませ。

FileZilla(ファイルジーラ)でレンタルサーバーにFTP接続する方法

最新式の無料プラグインを事前公開

WordPressは公式サイトに登録されているプラグインだけでは機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグイン無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
改良されたプラグインを確認する