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


2022/07/11
2022/08/19
WordPressウェブサイトをDocker&Svelteを使ってローカル環境で開発する②〜テーマ開発編
Svelteで作成したSPAアプリをWordPressテーマ化してWordPress無料レンタルサーバーで試す②〜StarServerFree編
蛸壺の技術ブログ|Svelteで作成したSPAアプリをWordPress無料レンタルサーバーで試す〜XFree編

WordPressと言えば、世界で最も利用されているオープンソース型CMS(コンテンツ管理システム)であり、個人や法人であってもほとんどの用途がブログや会社紹介Webページというイメージがあります。

方や、前回のブログでも紹介していたように、WordPress内部の仕組みの一端を色々と紐解いてみますと、「Linuxベースで動くちょっとしたサーバーサイドPHP実行環境」、のようなプログラムであることも理解できました。

合同会社タコスキングダム|蛸壺の技術ブログ
WordPressウェブサイトをDocker&Svelteを使ってローカル環境で開発する①〜準備編

Dockerコンテナ上に高機能なWordPressウェブサイトのローカル開発環境で自作する手順を解説します。

つまり、個人ブログや会社のホームページに止まらず、HTMLファイルで作れるものなら、サーバー側の制限の話は別として、どのようなHTMLアプリケーションでも基本的にはWordPressウェブサイトとして動作させることができるはずです。

前回の記事の中で、Javascriptフレームワークでも軽量な「Svelte」を利用して作成したSPA(シングルページアプリケーション)をWordPress(ただしローカル環境)で動くことも確認しました。

で、この記事ではSPAとして仕上げたHTMLアプリケーションを、WordPressが使える無料レンタルサーバー上にアップロードし、出来るだけ無料で動作確認を試みるための手順を紹介します。

今回利用するのは、国内No.1シェアとして著名な『エックスサーバー』の運営するXFreeが提供しているお試し用無償サーバーサービスを利用します。

XFree自体は、エックスサーバーの一派生商品ですが、無償版には制約もセキュリティリスクも多く、ウェブサイト運営を本気で長く続けるつもりであれば、最初からエックスサーバーのプランを検討したほうが賢明です。

合同会社タコスキングダム|蛸壺の技術ブログ

XFreeのWordPress対応の無料レンタルサーバーのプランはあくまでも無償で試せるWordPressの練習場、と言えますが、サーバーを利用するだけならずっとタダですし、そのまま気に入れば有料版に切り替えて運用していくことも容易です。

フロントエンド・サーバーサイドのJavascriptの良い勉強にもなるので、興味があれば今回の手順でXFreeサーバーを是非一度体感して見てはいかがかと思います。


合同会社タコスキングダム|蛸壺の技術ブログ【効果的学習法レポート】Javascript&Typescriptプログラミング入門のためのオススメ書籍&教材特集

XFREE WordPress機能プラン

冒頭の繰り返しになりますが、XFREE by エックスサーバーは、いきなりWordPressデビューするのには少し躊躇いのある方に、まずは無料でサイト運用を体験して、気に入ったら本サービス・Xserverへそのまま移行することもできる、いわば初心者練習台のようなサービスです。

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

合同会社タコスキングダム|蛸壺の技術ブログ

上の図は、公式で説明されている無償vs.有償のプランの比較表から拝借したものです。

無償プランにおいて一番目を引くのは、サーバーのデスク総量が2GBまで、そのうちデータベース容量の上限が100MBと、写真主体のブログを10記事くらい入れたらもう結構パンパンかも知れません。

また無償版でもっとも気をつけ無ければならないのは、SSLの有無です。

SSL無しの非暗号化通信のままサーバーにアクセスした場合、悪意ある第三者に通信パケットを傍受されたりすると、色々な情報がむき出しのままなので、重要な情報が含まれていた際の情報漏洩の被害は甚大です。

今回のように、クレジットカードのような重要な個人情報などを取り扱わない前提であれば、特にSSLは不要なのですが、近年ではWordPressウェブサイトでネットショップを開設し、顧客情報を扱うというニーズもかなり増えてきました。

最終的にそういった用途で利用されることを検討している場合には、
必ずSSL機能での暗号化通信は必須ですので、有償のエックスサーバーのプランを利用し、無償のレンタルサーバープランは利用しないことを心がけましょう。

合同会社タコスキングダム|蛸壺の技術ブログ

なお、ブログしか使う予定がない場合、同じくエックスサーバー社から提供されている無料ですぐに使える初心者向けの
「wpXブログ」というブログ作成特化サービスも存在しています。

合同会社タコスキングダム|蛸壺の技術ブログ

このwpXブログは「XFREE WordPress機能プラン」の機能限定版の位置付けで、あらかじめいくつかの固定されたWordPressテーマ及びプラグインの中から使うものを選択し、利用する仕組みとなっていて、テーマ・プラグインをカスタマイズする自由度をなくすなど、WordPressの機能を極力簡素化したサービスです。

有料のテーマやプラグインなどを自由にインストールすることが出来ないというデメリットがありますが、その分、非常に簡単な知識・操作でブログサイトを作成することが出来ます。

さて、以降の内容で、XFREEで練習用のWordPressサイトをSPA仕立てで作成してみます。


合同会社タコスキングダム|蛸壺の技術ブログ【効果的学習法レポート】Javascript&Typescriptプログラミング入門のためのオススメ書籍&教材特集

レンタルサーバーの利用登録をする

最初にXFREEへアカウントを登録しましょう。

合同会社タコスキングダム|蛸壺の技術ブログ

ウェブページから
[無料レンタルサーバーご利用お申し込み]ボタンより、連絡用メールアドレスを登録します。

Eメールに申し込みフォームのURLが届くのでブラウザから開くと、無料レンタルサーバーへの登録が開始されます。

この申し込みフォームに必須事項を埋めて、内容に問題が無ければ、
[会員登録を確定する]ボタンを押して申し込みは完了です。

合同会社タコスキングダム|蛸壺の技術ブログ

レンタルサーバーの初回設定

最初にログインした場合、以下のようにサーバーIDを設定する必要があるようです。

合同会社タコスキングダム|蛸壺の技術ブログ

このサーバーIDはWordPressのウェブページURLに表示されるので、会員ユーザー名やパスワードが憶測できるような名前は避けて、適当に設定します。

合同会社タコスキングダム|蛸壺の技術ブログ

これでXFREEの無料レンタルサーバーを利用する準備が整いました。


合同会社タコスキングダム|蛸壺の技術ブログ

合同会社タコスキングダム|蛸壺の技術ブログ【効果的学習法レポート】Javascript&Typescriptプログラミング入門のためのオススメ書籍&教材特集

無料WordPressサーバーを利用してみる

レンタルサーバーの利用準備が終わったので、次にWordPressウェブサイトを構築していきます。

最初の状態では利用中のWordPressサーバーが存在していないので、
[利用を開始する]ボタンで稼働を開始させます。

合同会社タコスキングダム|蛸壺の技術ブログ

すると期限付きでWordPressサーバーが起動します。

合同会社タコスキングダム|蛸壺の技術ブログ

ここは無料サービスを使っているので仕方無いことですが、だいたい3〜4ヶ月で利用期間が終了し、サーバーを稼働し続けたい場合には、稼働からおおよそ2ヶ月後以降で
利用延長申請をする必要があります。

結構あっという間に利用期限になってしまうので、忘れた頃にはサイトが消滅してしまった、というのは良くある話です。

無料でWordPressサーバーを意識的に維持するのは割と苦痛ですので、少なくとも1年以上ウェブサイトを運用されたいのなら、最初から本家XServerのプランを利用した方が良いでしょう。

合同会社タコスキングダム|蛸壺の技術ブログ

WordPressのインストール

サーバーが稼働したばかりの状態だと、肝心の中身がありません。

ということで次に行うべきは、WordPressのインストールになります。

合同会社タコスキングダム|蛸壺の技術ブログ

ダッシュボードから指定のサーバーにWordPressの
[新規インストール]を行います。

合同会社タコスキングダム|蛸壺の技術ブログ

そこからいくつかWordPressの設定を入力するのですが、とりわけここで決める
WordPressIDを使って、リモートのWordPressにアクセスしながらコンテンツを操作していくので、なるだけXFREEの会員IDとも別に設定・管理することをおすすめします。

WordPressIDの他にWordPressウェブサイトのURLやタイトルを適当に決めたら、WordPress(現行ではバージョン6.0が推奨)をインストールします。

WordPressインストール後、WordPress管理ダッシュボードへのログインパスワードがXFREE側から送られてくるので、このパスワードも忘れずに控えておきましょう。

WordPressをインストール後、15分ほど待ってから、ウェブサイトURL指定したアドレスにアクセスします。

合同会社タコスキングダム|蛸壺の技術ブログ

するといつものWordPressウェブページが表示されて、WordPressのインストール作業は終了です。


合同会社タコスキングダム|蛸壺の技術ブログ

合同会社タコスキングダム|蛸壺の技術ブログ【効果的学習法レポート】Javascript&Typescriptプログラミング入門のためのオススメ書籍&教材特集

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

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

前回のブログ記事で扱ったように、Svelteから拡張したWordPressテーマを、ローカル環境からリモートサーバーへリソースを送り出す手順を説明していきます。

合同会社タコスキングダム|蛸壺の技術ブログ
WordPressウェブサイトをDocker&Svelteを使ってローカル環境で開発する②〜テーマ開発編

WordPressウェブサイトのローカル開発環境を使って、SvelteとWordPressを連携させたウェブサイトを構築してみます。

自作のテーマをWordPressサーバーへ送り出すには、管理ダッシュボードから手動でZIPファイルを読み込ませる方法と、ftpコマンドやツールソフトなどからリモート接続してファイル転送する方法があります。

今回はもっとも簡単な管理ダッシュボードからテーマを読み込ませる方法でやってみましょう。

WordPressウェブページのURLアドレスに
/wp-adminを付けて管理ダッシュボードにアクセスします。

合同会社タコスキングダム|蛸壺の技術ブログ

ダッシュボードにログインして、
[外観] > [テーマ] > [テーマの追加]をすると、テーマのアップロード画面に移行します。

合同会社タコスキングダム|蛸壺の技術ブログ

ここで自作のテーマのフォルダをまるごとZIPで固めてから、手動でアップロードできるようになっています。

前回のブログまでの内容で、WordPressのテーマをまとめたフォルダ(
wp-content/themes)の中に、空っぽの自作テーマ(empty)を作成していました。

合同会社タコスキングダム|蛸壺の技術ブログ

ZIPで固める範囲は上の図でオレンジ色で囲った個別のフォルダになります。

お使いのOSでフォルダのZIP圧縮を行う方法も色々ですが、著者は主にLinuxで開発作業行っていますので、元々利用できるzipコマンドがもっとも簡単な方法です。

            
            $ cd <圧縮したいフォルダ>
$ zip -r <出力するzipファイルの名前> *
        
何らかの方法で、ZIP化したテーマをローカルのどこかのフォルダに置いておきましょう。

このZIPファイルを先程のダッシュボードのアップロードページからWordPressサーバーへ送ります。

合同会社タコスキングダム|蛸壺の技術ブログ

これで、空の自作テーマが無事インストールされました。

このテーマを有効化して、Svelte製のSPAが起動するかもチェックしてみます。

サンプルサイトへの直リンク

合同会社タコスキングダム|蛸壺の技術ブログ

(※図は2022年7月現在、SPAゲームとして開発中のスクリーンショットです。時期によっては、別のサイトになっているかも知れませんのでご了承ください。)

以上、XFreeの無料レンタルサーバーでSvelteアプリをアップロードして動かす手順を一通り紹介してみました。

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

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

合同会社タコスキングダム|蛸壺の技術ブログ

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

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

というかこの時点でスコアが100でないということで、SPAとしてしっかり作り込んでいくほど読み込みがさらに遅くなるはずです。

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

合同会社タコスキングダム|蛸壺の技術ブログ

のようになり、ページ全体の読み込み時間は1.8sと、確かに体感としてはまだ速いとはいえ、不安を感じてくる遅さではあります。

他の指標は、サーバー側のスペックには依存しないので、スコアの向上は努力目標になります。

アクセサビリティが低いのはSvelteアプリで使っているHTML要素が通常の用途ではなく、特異なものになっているので、スコアがまともでないのは仕方のないとして、他のベストプラクティスやSEOのスコアは後でどうとでもなりそうです。


合同会社タコスキングダム|蛸壺の技術ブログ

合同会社タコスキングダム|蛸壺の技術ブログ【効果的学習法レポート】Javascript&Typescriptプログラミング入門のためのオススメ書籍&教材特集

まとめ

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

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

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

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

記事の担当:taconocat

ナンデモ系エンジニア

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

合同会社タコスキングダム|蛸壺の技術ブログ【効果的学習法レポート】Javascript&Typescriptプログラミング入門のためのオススメ書籍&教材特集