自分で作成したHTML形式のWebアプリを、インターネット上に公開したいと考えている時、HTMLファイルは作成できたものの、
- どうサーバーにアップロードすればよいのか
- WordPressを使っていても公開できるのか
と悩む方も多いと思います。
結論からいうと、public_htmlの中に専用フォルダを作成し、index.htmlをアップロードすれば、HTML形式のアプリを公開できます。
この記事では、私が実際にHTML形式で作成した「Excelシート集約ツール」を、XServerにアップロードした手順を紹介します。
今回公開したHTML形式のWebアプリ
私は、複数のExcelファイルからシートを集約できる、次のWebアプリを作成しました。
公開しているWebアプリはこちらです。
- Excelシートの集約ツール
- ブラウザ上で動作(エクセルファイルをサーバーへアップロード不要)
- サーバー側での複雑な設定は不要
このWebアプリはサーバーにアップロードすれば、URLを入力するだけで利用できるようになります。
他の人にツールを紹介したい場合や、ブログの読者に使ってもらいたい場合、今回の方法がお勧めです。
HTMLアプリを公開するまでの流れ
XServerでHTMLアプリを公開する流れは、次のとおりです。
- XServerのサーバーパネルにログインする
- ファイルマネージャーを開く
- 対象ドメインのフォルダを開く
- public_htmlを開く
- Webアプリ用のフォルダを作成する
- index.htmlをアップロードする
- ブラウザからURLにアクセスする
順番に説明します。
サーバーパネルにログインする
私はXServerを使用しているので、まずは下記の通りサーバーパネルへログインします。
ファイルマネージャーを開く
サーバーパネルへログインしたら、ファイルをアップロードするための画面を開きます。
左側のメニューから、FTPに関する項目を選択します。
ファイルマネージャーの管理をクリックして下さい。
公開したいドメインのフォルダを選択する
ファイルマネージャーを開くと、サーバー内のフォルダが一覧で表示されます。
この中から、HTMLアプリを公開したいドメイン名のフォルダを選択します。
私の場合は、サイトのドメインがfutthipong.comとなります。
そのため、ファイルマネージャー内にあるfutthipong.comのフォルダを開きます。
複数のドメインをXServerで管理している場合は、アップロード先を間違えないように注意してください。
別のドメインのフォルダにアップロードすると、予定していたURLではアクセスできません。
HTMLアプリはpublic_html配下に設置する
ドメイン名のフォルダを開くと、public_htmlというフォルダがあります。
Web上に公開したいファイルは、基本的にこのpublic_html配下へ設置します。
WordPressを使用している場合は、public_htmlの中に次のようなフォルダが表示されます。
- wp-admin
- wp-content
- wp-includes
これらはWordPressを動かすための重要なフォルダです。
誤って削除したり、名前を変更したりすると、WordPressサイトが正常に表示されなくなる可能性があります。
HTMLアプリを公開する場合は、WordPressのフォルダを直接編集するのではなく、public_htmlの中に新しいフォルダを作成する方法がおすすめです。
Webアプリ専用のフォルダを作成する
今回は、複数のWebツールをまとめて設置できるように、public_htmlの中に次のフォルダを作成しました。
web_tools
フォルダの作成手順は次のとおりです。
- public_htmlを開く
- 「新規フォルダ作成」をクリックする
- フォルダ名に
web_toolsと入力する - 作成ボタンを押す
フォルダ名は、半角英数字とハイフン、アンダースコアで作成するのがおすすめです。
日本語のフォルダ名も使用できる場合がありますが、URLが長くなったり、文字化けしたりする可能性があります。
アプリごとのフォルダを作成する
次に、web_toolsの中へ、今回公開するExcelシート集約ツール専用のフォルダを作成します。
フォルダ名は次のとおりです。
excel_sheet_merge
フォルダ構成は次のようになります。
public_html/web_tools/excel_sheet_merge/
今後、別のWebツールを公開する場合も、web_toolsの下に専用フォルダを作成すれば整理しやすくなります。
ツールごとにフォルダを分けることで、ファイルの更新や管理が簡単になります。
index.htmlをアップロードする
作成したexcel_sheet_mergeフォルダを開き、HTMLファイルをアップロードします。
HTMLファイルの名前は、次のようにしておくのがおすすめです。
index.html
index.htmlは、フォルダへアクセスした際に最初に表示されるファイルです。
例えば、次の場所にindex.htmlをアップロードしたとします。
public_html/web_tools/excel_sheet_merge/index.html
アクセスする場合は、URLの最後にindex.htmlを付ける必要はありません。
”https://futthipong.com/web_tools/excel_sheet_merge/”
をアドレスに入力すると、ウェブサイトを開く事ができます。
CSSやJavaScriptファイルも一緒にアップロードする
Webアプリがindex.htmlだけで作られている場合は、HTMLファイルを1つアップロードするだけで利用できます。
一方、CSSやJavaScriptを別ファイルにしている場合は、関連するファイルもすべてアップロードしてください。
例えば、次のようなフォルダ構成です。
excel_sheet_merge
|-index.html
|-style.css
|-script.js
|-images
|-libraryHTML内で指定しているファイル名やフォルダ名と、サーバー上の構成が異なると、デザインが崩れたり、ボタンが動かなかったりします。
特に、大文字と小文字の違いには注意してください。
Windows上では正常に動いていても、サーバー上では別のファイルとして認識される場合があります。
アップロード後にWebアプリを確認する
ファイルのアップロードが完了したら、ブラウザで公開URLを開きます。
今回の例では、次のURLです。
”https://futthipong.com/web_tools/excel_sheet_merge/”
Webアプリが表示されたら、次の項目を確認してください。
- 画面が正しく表示されるか
- ボタンが動作するか
- スマートフォンでも表示できるか
- CSSが反映されているか
- JavaScriptのエラーが出ていないか
- ファイルの読み込み機能が動作するか
HTMLファイルを更新したのに表示が変わらない場合は、ブラウザのキャッシュが残っている可能性があります。
その場合は、キャッシュ削除を試してください。
HTMLアプリを公開するときの注意点
HTML形式のアプリは比較的簡単に公開できますが、いくつか注意点があります。
WordPressのファイルを削除しない
wp-admin、wp-content、wp-includesなどは、WordPressの重要なフォルダです。
操作を間違えると、ブログが表示されなくなる可能性があります。
HTMLアプリは、新しく作成した専用フォルダへアップロードしてください。
個人情報をHTMLファイルに記載しない
HTMLやJavaScriptの内容は、ブラウザから確認できます。
APIキー、パスワード、個人情報などを直接記載しないようにしてください。
HTMLだけでは動かないアプリもある
HTML、CSS、JavaScriptだけで動くアプリは、そのままアップロードできます。
一方、次の機能を使う場合は、追加のサーバー設定が必要です。
- PHP
- データベース
- ユーザー登録
- ログイン機能
- サーバー上へのファイル保存
- 外部APIとの通信
作成したアプリがブラウザ内だけで完結するのか、サーバー処理が必要なのかを事前に確認してください。
外部ライブラリのライセンスを確認する
JavaScriptライブラリなどを使用している場合は、利用規約やライセンスを確認してください。
無料で利用できるライブラリでも、著作権表示やライセンス文の掲載が必要な場合があります。
特に、作成したWebアプリを一般公開する場合は、使用しているライブラリの条件を確認しておくことが重要です。
