Svelteで作成したSPAアプリをWordPressテーマ化してWordPress無料レンタルサーバーで試す②〜StarServerFree編

2022/07/12

2022/08/19

Svelteで作成したSPAアプリをWordPressテーマ化してWordPress無料レンタルサーバーで試す①〜XFree編

Svelteで作成したSPAアプリをWordPressテーマ化して無料レンタルサーバーで試す③〜XREA編

Svelteで作成したSPAアプリをWordPress無料レンタルサーバーで試す②〜StarServerFree編

自作のWordPressテーマを、無償WordPressレンタルサーバープランを使ってみる話の第二弾です。

前回までの

「エックスサーバー・XFree」

編は以下のリンク記事をご参考ください。

Svelteで作成したSPAアプリをWordPressテーマ化してWordPress無料レンタルサーバーで試す①〜XFree編

Svelteで自作したWordPressテーマを『XFree』の無料レンタルサーバープランで試します。

今回はStarServerの無償試供版サービスの位置付けの

「StarServerFree」

を使ったWordPressウェブサイトを作ってみます。

【効果的学習法レポート】Javascript＆Typescriptプログラミング入門のためのオススメ書籍＆教材特集

StarServerFree WordPress機能プラン

無料レンタルサーバー・スターサーバーフリー(StarServerFree)

は、いきなりWordPressブログデビューするのには少し躊躇いのある方に、まずは無料でサイト運用を体験して、気に入ったら本サービス・StarServerへそのまま移行することもできる、いわば初心者のための練習台のようなサービスです。

この無償レンタルサーバープランがどのようなものか少し掘り下げてみるところから話を初めてみます。

上の図は公式のプラン比較表をそのまま拝借させていただいたものです。

StarServerの本サービスの代表的な商品は、小規模の個人のウェブサイト構築に最適な

「ライト」

と、高速なブロードバンドアクセスのような高負荷にも対応した

「ハイスピード」

の２つがあります。

☆国内最安級のWordPressサーバー・プラン☆

月額138円(税込)からのクラウド型高速レンタルサーバー、スターサーバー

他にも、「ライト」の低機能版で業界最安クラスの月額138円が売りの

「エコノミー」

、「ライト」と「ハイスピード」の中間プランの

「スタンダード」

、大規模ビジネス向けの

「エンタープライズ」

もあります。

どのプランが適しているかは、WordPressサイトの運用が軌道に乗ってからでも適宜プランの切り替えが可能ですので、追々考えて行ってください。

兎にも角にも、初心者であればWordPressの扱いに慣れるのが最優先です。

【効果的学習法レポート】Javascript＆Typescriptプログラミング入門のためのオススメ書籍＆教材特集

ネットオウルの会員を登録を行う

無料レンタルサーバーのプランを申し込む前に事前に、

StarServer

へアカウントを登録しましょう。

StarServerのウェブサイト共通で、ページ右上の

[お申し込み]

をクリックし、スターサーバー申込フォームに移ります。

そこで、

[新規会員登録]

から、連絡先のEメールアドレスを入力し、

[認証IDを取得]

ボタンを押します。

すると

認証ID

という英数字列がメールに送信されています。

このID値を控えて登録画面の認証ID入力ボックスに貼り付けると、申込情報の入力フォームに移行します。

登録者の個人情報等を入力し、アカウントパスワードなども設定した後で、

[確認画面へ]

ボタンで決定します。

見ての通り入力内容を確認して終わりではなく、ここで設定の最大の関門である

SMS認証

が求められます。

今でこそSMS認証が普通な世の中ですが、個人で通話機能付き携帯端末が無ければ、基本的に

THE END

です。(※何らかの事情でSMSが利用できない場合、

お問合せ

から作業を進めることはできるようです。)

以降はSMSメッセージを受け取れる環境前提で、ネットオウル会員登録を作業を進めます。

SMS認証用の携帯電話番号を入力し、SMSメッセージに届いた５桁の番号を入力すると、会員登録作業が確定されます。

これでネットオウルの会員用ダッシュボードにもログイン可能ですが、会員ダッシュボードからでは無料レンタルサーバーへの登録はできないので、ここで一旦終わりです。

☆国内最安級のWordPressサーバー・プラン☆

月額138円(税込)からのクラウド型高速レンタルサーバー、スターサーバー

【効果的学習法レポート】Javascript＆Typescriptプログラミング入門のためのオススメ書籍＆教材特集

StarServerFreeを申し込む

ネットオウルの会員登録が済んだら、再び

スターサーバーフリー

のウェブサイトから作業します。

サイト内の数カ所に設置されている、

[今すぐ始める]

ボタンをクリックします。

ログインしている状態であれば、スターサーバーのフリープランが選択できる画面に移行します。

ここで、

[お申込み]

ボタンをクリックして次に進みましょう。

デフォルトで選択することのできるのは

starfree.jp

というドメイン名に、サブドメイン名を付けることが必要になります。

次に進むと、最終確認の画面なります。

様々な機能の制限が無償のレンタルサーバープランに存在していることを十分理解した上で、プランを申し込みます。

もちろん後々有償のプランに移行することは可能ですが、より高性能な有償プランも最初の２週間無料ですので、１年以上はサイトを持続させるつもりなら先に有償プランを試した方が賢明と言えます。

☆国内最安級のWordPressサーバー・プラン☆

月額138円(税込)からのクラウド型高速レンタルサーバー、スターサーバー

無料レンタルサーバープランの申し込みが終わったら、

メンバー管理ツール

画面に戻り、

[契約管理] > [トップ]

のページの下の

提供サービス一覧

にスターサーバーが利用中となっていることを確認しましょう。

無料サーバーが稼働中の場合、

メンバー管理ツール

の

スターサーバー管理

の左ペインに小さく

無料プラン管理

の項目が追加されています。

この項目の

[サーバー管理ツール]

のリンクをクリックすることで、ようやく無料レンタルサーバー(スターサーバーフリー)の管理画面まで辿り着くことができます。

スターサーバーを管理画面を使い慣れていないと中々面倒な手順でしたが、さらにここからWordPressプログラム本体をセットアップしてくことになります。

☆国内最安級のWordPressサーバー・プラン☆

月額138円(税込)からのクラウド型高速レンタルサーバー、スターサーバー

【効果的学習法レポート】Javascript＆Typescriptプログラミング入門のためのオススメ書籍＆教材特集

StarServerサーバーにWordPressをインストールする

デフォルトではスターサーバーフリーにはWordPressがインストールされていません。

まずは管理ダッシュボードの左ペインから

[ホームページ] > [簡単インストール]

のページを表示します。

初回では

[インストール済み一覧]

に何もインストールされていない空の状態になっているのを確認し、

[追加インストール]

のタブから、WordPressをインストールするために、

[インストール設定]

のボタンをクリックします。

インストール設定はデフォルトの値で良いのですが、WordPressのID名とログインパスワードは事前に自分で決めて置く必要があります。

またインストール完了後に、データベース用のユーザー名とパスワードは自動で提供されます。

WordPressをインストール後に暫く待つと、いつものWordPress画面が表示されます。

管理画面へはURLアドレスに

/wp-admin

か

/wp-login

を付けると、WordPressの管理ダッシュボードへログインすることができます。

これで無事WordPress利用可能になりました。

☆国内最安級のWordPressサーバー・プラン☆

月額138円(税込)からのクラウド型高速レンタルサーバー、スターサーバー

【効果的学習法レポート】Javascript＆Typescriptプログラミング入門のためのオススメ書籍＆教材特集

Svelteで作成したSPAをWordPressウェブページに移植する

では最後の一仕上げです。

とはいえ既にレンタルサーバーにWordPressがインストールされているので、

前回のブログ記事

で扱ったように、全く同一の手順でSvelteから拡張したWordPressテーマをローカル環境からリモートサーバーへ送り出すことになります。

ということで、自作テーマのアップロードの手順の詳細は以前の記事の内容をご覧ください。

Svelteで作成したSPAをWordPressウェブページに移植する手順

高機能な自作のWordPressウェブサイトをローカル環境で作るための手順を説明しています。

当然のことながら、WordPressのバージョンが同じなら表示される結果に全く違いはありません。

Svelteで作成したHTMLゲームがエラーを吐くこと無く動作していたら今回の目的が達成されました。めでたしめでたし。

Lighthouseでザックリとパフォーマンス計測

せっかくですので、無料レンタルサーバーで立てたWordPressサイトのパフォーマンスが現状でいかほどのものなのかLighthouseで簡単に計測しておきましょう。

...予想に反して、

Speed Indexが0.6s

となり、前回のXfreeより速やない？といった結果になります。

Lighthouseで計測できる指標の内、サーバーのスペックを反映しているものは「パフォーマンス」になります。

アップロードしたアプリケーションのサイズもほぼ空に近い軽量サイズですが、ページの総合パフォーマンスにはまだスペック的な余裕が感じられるほどです。

パフォーマンススコアの詳細も確認すると、

のようになり、ページ全体の読み込み時間は0.6sと、フリープランとは思えないほど高速な通信処理速度が出ているようです。

有償プランにしたらここから更に速くなるのでしょうが、もう少しSPAアプリの完成度を高くした後にでももう一度パフォーマンス計測してみたいところです。

===affi1%~[ネットオウル株式会社]~[1]~{<a href="https://px.a8.net/svt/ejp?a8mat=3NCQW3+7YDMM2+1WTI+60OXE" rel="nofollow">月額138円(税込)からのクラウド型高速レンタルサーバー、スターサーバー</a>

☆国内最安級のWordPressサーバー・プラン☆

月額138円(税込)からのクラウド型高速レンタルサーバー、スターサーバー

【効果的学習法レポート】Javascript＆Typescriptプログラミング入門のためのオススメ書籍＆教材特集

まとめ

今回はWordPressウェブサイトをJSフレームワークで作成したHTMLアプリケーションとして動かす方法をStarServerの無償プラン・「スターサーバーフリー」でやってみました。

HTMLアプリケーションの規模にもよりますが、まだサーバー側へのディスク容量にも余裕があるので、もう少し複雑なゲームアプリが作れそうです。

HTMLゲームは一般的に、JSファイルなどのリソースをクライアント側にダウンロードさせて、ブラウザで駆動させるタイプのアプリケーションです。

ユーザーによってゲームがサクサクに動くか、重い挙動になってしまうか、バランスの取りようが難しいですが、どうしても重くなってしまうようなら、軽量なアルゴリズムを導入できるか検討してみたり、Web Worker APIを使って処理負荷を分散するような処置が必要になるかも知れません。

記事を書いた人

記事の担当:taconocat

ナンデモ系エンジニア

主にAngularでフロントエンド開発することが多いです。開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。コツコツとプログラミングするのが好きな人間です。

【効果的学習法レポート】Javascript＆Typescriptプログラミング入門のためのオススメ書籍＆教材特集