※ 当ページには【広告/PR】を含む場合があります。
2022/07/12
2022/08/19
Svelteで作成したSPAアプリをWordPressテーマ化してWordPress無料レンタルサーバーで試す①〜XFree編
Svelteで作成したSPAアプリをWordPressテーマ化して無料レンタルサーバーで試す③〜XREA編
Svelteで作成したSPAアプリをWordPressテーマ化してWordPress無料レンタルサーバーで試す①〜XFree編Svelteで自作したWordPressテーマを『XFree』の無料レンタルサーバープランで試します。
Javascript(js)＆Typescript(ts)プログラミング入門〜これから学ぶ人のためのおすすめ書籍＆教材の手引き
StarServerFree WordPress機能プラン
無料レンタルサーバー・スターサーバーフリー(StarServerFree)は、いきなりWordPressブログデビューするのには少し躊躇いのある方に、まずは無料でサイト運用を体験して、気に入ったら本サービス・StarServerへそのまま移行することもできる、いわば初心者のための練習台のようなサービスです。この無償レンタルサーバープランがどのようなものか少し掘り下げてみるところから話を初めてみます。上の図は公式のプラン比較表をそのまま拝借させていただいたものです。StarServerの本サービスの代表的な商品は、小規模の個人のウェブサイト構築に最適な「ライト」と、高速なブロードバンドアクセスのような高負荷にも対応した「ハイスピード」の２つがあります。☆国内最安級のWordPressサーバー・プラン☆
Javascript(js)＆Typescript(ts)プログラミング入門〜これから学ぶ人のためのおすすめ書籍＆教材の手引き
ネットオウルの会員を登録を行う
無料レンタルサーバーのプランを申し込む前に事前に、StarServerへアカウントを登録しましょう。StarServerのウェブサイト共通で、ページ右上の[お申し込み]をクリックし、スターサーバー申込フォームに移ります。そこで、[新規会員登録]から、連絡先のEメールアドレスを入力し、[認証IDを取得]ボタンを押します。すると認証IDという英数字列がメールに送信されています。このID値を控えて登録画面の認証ID入力ボックスに貼り付けると、申込情報の入力フォームに移行します。登録者の個人情報等を入力し、アカウントパスワードなども設定した後で、[確認画面へ]ボタンで決定します。見ての通り入力内容を確認して終わりではなく、ここで設定の最大の関門であるSMS認証が求められます。今でこそSMS認証が普通な世の中ですが、個人で通話機能付き携帯端末が無ければ、基本的にTHE ENDです。(※何らかの事情でSMSが利用できない場合、お問合せから作業を進めることはできるようです。)以降はSMSメッセージを受け取れる環境前提で、ネットオウル会員登録を作業を進めます。SMS認証用の携帯電話番号を入力し、SMSメッセージに届いた５桁の番号を入力すると、会員登録作業が確定されます。これでネットオウルの会員用ダッシュボードにもログイン可能ですが、会員ダッシュボードからでは無料レンタルサーバーへの登録はできないので、ここで一旦終わりです。
☆国内最安級のWordPressサーバー・プラン☆ Javascript(js)＆Typescript(ts)プログラミング入門〜これから学ぶ人のためのおすすめ書籍＆教材の手引き
StarServerFreeを申し込む
ネットオウルの会員登録が済んだら、再びスターサーバーフリーのウェブサイトから作業します。サイト内の数カ所に設置されている、[今すぐ始める]ボタンをクリックします。ログインしている状態であれば、スターサーバーのフリープランが選択できる画面に移行します。ここで、[お申込み]ボタンをクリックして次に進みましょう。デフォルトで選択することのできるのはstarfree.jpというドメイン名に、サブドメイン名を付けることが必要になります。次に進むと、最終確認の画面なります。様々な機能の制限が無償のレンタルサーバープランに存在していることを十分理解した上で、プランを申し込みます。もちろん後々有償のプランに移行することは可能ですが、より高性能な有償プランも最初の２週間無料ですので、１年以上はサイトを持続させるつもりなら先に有償プランを試した方が賢明と言えます。☆国内最安級のWordPressサーバー・プラン☆ メンバー管理ツール画面に戻り、[契約管理] > [トップ]のページの下の提供サービス一覧にスターサーバーが利用中となっていることを確認しましょう。無料サーバーが稼働中の場合、メンバー管理ツールのスターサーバー管理の左ペインに小さく無料プラン管理の項目が追加されています。この項目の[サーバー管理ツール]のリンクをクリックすることで、ようやく無料レンタルサーバー(スターサーバーフリー)の管理画面まで辿り着くことができます。スターサーバーを管理画面を使い慣れていないと中々面倒な手順でしたが、さらにここからWordPressプログラム本体をセットアップしてくことになります。
☆国内最安級のWordPressサーバー・プラン☆ Javascript(js)＆Typescript(ts)プログラミング入門〜これから学ぶ人のためのおすすめ書籍＆教材の手引き
StarServerサーバーにWordPressをインストールする
デフォルトではスターサーバーフリーにはWordPressがインストールされていません。まずは管理ダッシュボードの左ペインから[ホームページ] > [簡単インストール]のページを表示します。初回では[インストール済み一覧]に何もインストールされていない空の状態になっているのを確認し、[追加インストール]のタブから、WordPressをインストールするために、[インストール設定]のボタンをクリックします。インストール設定はデフォルトの値で良いのですが、WordPressのID名とログインパスワードは事前に自分で決めて置く必要があります。またインストール完了後に、データベース用のユーザー名とパスワードは自動で提供されます。WordPressをインストール後に暫く待つと、いつものWordPress画面が表示されます。管理画面へはURLアドレスに/wp-adminか/wp-loginを付けると、WordPressの管理ダッシュボードへログインすることができます。これで無事WordPress利用可能になりました。
☆国内最安級のWordPressサーバー・プラン☆ Javascript(js)＆Typescript(ts)プログラミング入門〜これから学ぶ人のためのおすすめ書籍＆教材の手引き
Svelteで作成したSPAをWordPressウェブページに移植する
では最後の一仕上げです。とはいえ既にレンタルサーバーにWordPressがインストールされているので、前回のブログ記事で扱ったように、全く同一の手順でSvelteから拡張したWordPressテーマをローカル環境からリモートサーバーへ送り出すことになります。ということで、自作テーマのアップロードの手順の詳細は以前の記事の内容をご覧ください。Svelteで作成したSPAアプリをWordPressテーマ化してWordPress無料レンタルサーバーで試す①〜XFree編Svelteで自作したWordPressテーマを『XFree』の無料レンタルサーバープランで試します。
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サーバー・プラン☆ Javascript(js)＆Typescript(ts)プログラミング入門〜これから学ぶ人のためのおすすめ書籍＆教材の手引き
まとめ
今回はWordPressウェブサイトをJSフレームワークで作成したHTMLアプリケーションとして動かす方法をStarServerの無償プラン・「スターサーバーフリー」でやってみました。HTMLアプリケーションの規模にもよりますが、まだサーバー側へのディスク容量にも余裕があるので、もう少し複雑なゲームアプリが作れそうです。HTMLゲームは一般的に、JSファイルなどのリソースをクライアント側にダウンロードさせて、ブラウザで駆動させるタイプのアプリケーションです。ユーザーによってゲームがサクサクに動くか、重い挙動になってしまうか、バランスの取りようが難しいですが、どうしても重くなってしまうようなら、軽量なアルゴリズムを導入できるか検討してみたり、Web Worker APIを使って処理負荷を分散するような処置が必要になるかも知れません。
