てけとーぶろぐ。

ソフトウェアの開発と、お絵かきと、雑記と。

AndroidでWebサイトを作る(5)

Android Termux
Webサイトの公開

Webサイトを構成するファイルを作成し、スマホ/タブレット上でWebサーバーを起動し、Webブラウザーで確認することができました。Webサイト作成の最後としてこれを公開します。

Webサイトを公開するというのはインターネットに接続された世界中のコンピューターからそのサイトを閲覧できるようにすることです。ですからあなたが作ったWebサイトを公開すれば、他のWebサイト同様、友達のスマホから簡単に見ることができます。

ところでここまででもスマホ/タブレット上でWebサーバーを起動して同じスマホ上のWebブラウザーでWebサイトを見ることができていました。公開には何が足りないのでしょうか？

まずスマホ/タブレット上のWebサーバーはネットワーク的にインターネット経由でアクセスできるようになっていません。インターネット経由でアクセスできるようにすることがほぼ公開そのものですから、そりゃそうだ、ではあります…。

それからもう1つ、スマホ/タブレット上のWebサーバーは常にアクセスできるようにはなっていません。Webサーバーを終了すればアクセスできなくなりますし、スマホ/タブレットの電源を切ってもアクセスできなくなります。Webサイトはおおよそいつでもアクセスできることが望ましいです。

レンタルサーバー

このような問題を解決する手軽な方法の1つとして、上記のような問題がないコンピューターを借りて、そこに自分が作ったWebサイトのデータを置かせてもらうといった方法があげられます。実際これはよく採用される方法で、こういった用途に借りられるコンピューターをレンタルサーバーと呼びます。

コンピューターを借りるといってもコンピューターの本体を借りるわけではありません。コンピューター本体は世界のどこかで動いている状態にあって、そのコンピューターにWebサイトのデータをインターネット経由でアップロードして置いておいてもらいます。つまりWebサイトのデータ保存のためのディスク領域などを借りることになるわけです。

借りるとなるとお金がかかるのではと思われるでしょう。実際有料のレンタルサーバーもあるのですが幸い無料のレンタルサーバーというものもあります。

無料である分置けるデータ容量が少なかったりと何らかの制限があることがほとんどですがここまで作ってきたような簡単なWebサイトを公開するには十分です。

無料レンタルサーバー

ということで無料のレンタルサーバーを使ってWebサイトの公開をしてみましょう。今回はAndroidからのWebサイトのデータのアップロードのしやすさなどからXFREE(https://www.xfree.ne.jp)という無料レンタルサーバーを使います。

はじめにXFREEのWebサイトから利用の申し込みをします。

www.xfree.ne.jp

XFREEのWebサイトはパソコンでの閲覧を想定しているようでスマホの縦画面だと見づらいかもしれません。その場合横画面にして表示すると良さそうです。

  1. 「無料レンタルサーバーご利用お申し込み」のボタンをタップします。
  2. メールアドレスを登録します。
  3. 登録したメールアドレスに「お申し込みURL」が記載されたメールが届くのでそのURLにアクセスします。
  4. 会員情報登録フォームにお客様情報を入力し、確認画面へ進みます。
  5. 内容に問題がなければ会員登録を確定します。
  6. 登録したメールアドレスに会員登録完了のお知らせのメールが届き そこに「管理パネル」のURLが記載されているのでアクセスし メールにあった会員IDと会員情報登録の際に登録したパスワードでログインします。
  7. 画面左のメニューから「無料レンタルサーバー」をタップします。
  8. 無料レンタルサーバー利用にあたってサーバーIDの登録をします。 サーバーIDは公開するWebサイトのURLの一部となるのでそれらしいものにしましょう。 例えばサーバーIDを「kurima」としたらWebサイトのURLは「http://kurima.html.xdomain.jp」となりました。 サーバーIDを入力して確認画面へ進みます。
  9. 問題がなければサーバーIDの登録を確定します。
  10. 登録が完了した、利用にはメニューの「無料レンタルサーバー」をクリック といったメッセージが表示されるので「無料レンタルサーバー」をタップします。
  11. ご利用状況一覧が表示されます。Webサーバーを利用したいので「HTML」の行の「利用を開始する」をタップします。
  12. ご利用状況一覧の「HTML」の行のステータス列が「利用中」に変わり、サーバーパネル列に「管理パネルログイン」ボタンが表示されます。これでレンタルサーバーのWebサーバーが使えるようになりました。「管理パネルログイン」ボタンをタップします。
  13. サーバー管理パネル画面で「ドメイン設定」をタップします。 ドメイン設定一覧にドメイン名が表示されています。このドメイン名がほぼWebサイトのURLとなります。 例えばドメイン名が「kurima.html.xdomain.jp」であればWebサイトのURLは「http://kurima.html.xdomain.jp」となります。 あとでアクセスするのでメモしておきましょう。
  14. 続けて画面左のメニューから「FTPアカウント設定」をタップします。
  15. FTPアカウント設定画面が表示されます。 レンタルサーバーへのWebサイトのデータのアップロードにはFTPという仕組みを使います。 FTPでのアップロードに必要になるのでこの画面に表示されている 「FTPホスト」「FTPユーザー(アカウント名)」「FTPパスワード」をメモしておきましょう。「FTPパスワード」についてはこれから設定します。 「FTPパスワード」設定のため「メニュー」列の「編集」ボタンをタップします。
  16. 任意のパスワードを入力して「確認画面」ボタンをタップします。
  17. 問題がなければ確定します。

これでレンタルサーバーの設定は完了です。

ここで現状レンタルサーバーのWebサーバーが公開しているWebサイトを確認してみましょう。 Webブラウザーで先程メモしたドメイン名に基づくURLにアクセスします。URL欄にドメイン名そのまま入力しても大丈夫です。

「まだホームページがアップロードされていません」と書かれたWebサイトが表示されたかと思います。 これは現状Webサイトのデータとしてこのような内容のHTMLファイルが置かれているためです。

このWebサイトのデータをこれまで作成したWebサイトのデータに置き換えてやればこのURLへのアクセスで作成したWebサイトが表示され公開完了となります。

FTP

WebサイトのデータであるHTMLファイル、CSSファイル、JSファイルを今操作しているスマホ/タブレットからレンタルサーバーにアップロードするためにはTermux上で「ftp」コマンドを使います。早速「ftp」コマンドでファイルのアップロードをしてみましょう。

「ftp」コマンド実行の前にカレントディレクトリにアップロードしたいファイルがあることを確認しましょう。カレントディレクトリのファイルを確認するには「ls」コマンドを使うのでした。

ls

「index.html」「style.css」「script.js」があるでしょうか？ファイルの存在を確認したら以下の書式でftpを起動してレンタルサーバーとの通信を開始します。

ftp FTPホスト

FTPホストの部分はXFREEのFTPアカウント設定で確認したものです。例えばFTPホストが「sv2.html.xdomain.ne.jp」であればコマンドとしては

ftp sv2.html.xdomain.ne.jp

となります。コマンドを実行すると続けて

Name (…):

のように表示されFTPユーザーの入力を促されるのでFTPアカウント設定で確認したFTPユーザーを入力します。すると続けて

Password:

とFTPパスワードの入力を促されるのでFTPアカウント設定で設定したFTPパスワードを入力します。 「FTPホスト」「FTPユーザー」「FTPパスワード」が正しく入力できると

230 User FTPユーザー logged in.
ftp>

のように表示されます。 正しく入力できなかった場合は

530 Login incorrect.
ftp: Login failed.
ftp>

のように表示されます。 ログインできなかった場合でもftp自体は起動しており「ftp>」と表示されてftp用のコマンドを入力できるようになってしまっています。その場合は

ftp> quit

と入力してftpを終了し、再度「ftp」コマンドの実行から行ってください。 「ftp>」の部分は既に表示されているものなので実際に入力するのは「quit」だけです。

その他しばらく操作せずに放っておいた場合などでもレンタルサーバーとの通信の接続が切れてしまう場合があります。その場合ftp用のコマンド実行に対して

Not connected.

といったメッセージが表示されます。その場合も

ftp> quit

と入力してftpを終了し、再度「ftp」コマンドの実行から行ってください。

これでレンタルサーバーとの通信を開始できました。「ftp>」と表示されてftp用のコマンドを入力できます。ftp用のコマンドにはTermux上でファイル・ディレクトリの確認に使ったものと似たものがあります。 まずカレントディレクトリを確認してみましょう。「pwd」コマンドを使います。

ftp> pwd

コマンドを実行すると

257 "/" is the current directory

と表示されます。「/」がレンタルサーバーにおけるカレントディレクトリということです。 そしてレンタルサーバーのそのディレクトリ内にあるファイルを確認してみましょう。「ls」コマンドを使います。

ftp> ls

画面の幅が狭いと見づらいかもしれませんが各行末にあるのがファイル名で「index.html」もありますね。これが先程見たWebサイトを構成するファイルです。これらのファイルがレンタルサーバーのWebサーバーによって公開されているわけです。

それではファイルをアップロードしてみましょう。アップロードには「put」コマンドを使います。以下の書式です。

ftp> put ファイル名

「ファイル名」にはスマホ/タブレットのカレントディレクトリ内にあるアップロードしたいファイルのファイル名を指定します。 まずは「index.html」をアップロードしてみましょう。

ftp> put index.html

続けて「style.css」「script.js」もアップロードしてみましょう。

ftp> put style.css
ftp> put script.js

アップロードできたか念のため「ls」コマンドで確認してみましょう。

ちなみに間違ったファイルをアップロードしてしまった場合などにレンタルサーバー上のファイルを削除するには「delete」コマンドを使います。

ftp> delete ファイル名

アップロードが終わったらftpを終了します。終了には「quit」コマンドを使います。

ftp> quit

Webサイトのデータを更新したのでWebブラウザーで表示を確認してみましょう。 表示できたでしょうか？

もちろん友達のスマホからもこのURLにアクセスすることでこのWebサイトを見ることができます。