※ 当ページには【広告/PR】を含む場合があります。
2022/07/11
2022/08/19
WordPressウェブサイトをDocker＆Svelteを使ってローカル環境で開発する②〜テーマ開発編
Svelteで作成したSPAアプリをWordPressテーマ化してWordPress無料レンタルサーバーで試す②〜StarServerFree編
WordPressウェブサイトをDocker＆Svelteを使ってローカル環境で開発する①〜準備編Dockerコンテナ上に高機能なWordPressウェブサイトのローカル開発環境で自作する手順を解説します。
Javascript(js)＆Typescript(ts)プログラミング入門〜これから学ぶ人のためのおすすめ書籍＆教材の手引き
XFREE WordPress機能プラン
冒頭の繰り返しになりますが、XFREE by エックスサーバーは、いきなりWordPressデビューするのには少し躊躇いのある方に、まずは無料でサイト運用を体験して、気に入ったら本サービス・Xserverへそのまま移行することもできる、いわば初心者練習台のようなサービスです。この無償レンタルサーバープランがどのようなものか少し掘り下げてみるところから話を初めてみます。上の図は、公式で説明されている無償vs.有償のプランの比較表から拝借したものです。無償プランにおいて一番目を引くのは、サーバーのデスク総量が2GBまで、そのうちデータベース容量の上限が100MBと、写真主体のブログを１０記事くらい入れたらもう結構パンパンかも知れません。また無償版でもっとも気をつけ無ければならないのは、SSLの有無です。SSL無しの非暗号化通信のままサーバーにアクセスした場合、悪意ある第三者に通信パケットを傍受されたりすると、色々な情報がむき出しのままなので、重要な情報が含まれていた際の情報漏洩の被害は甚大です。今回のように、クレジットカードのような重要な個人情報などを取り扱わない前提であれば、特にSSLは不要なのですが、近年ではWordPressウェブサイトでネットショップを開設し、顧客情報を扱うというニーズもかなり増えてきました。最終的にそういった用途で利用されることを検討している場合には、必ずSSL機能での暗号化通信は必須ですので、有償のエックスサーバーのプランを利用し、無償のレンタルサーバープランは利用しないことを心がけましょう。なお、ブログしか使う予定がない場合、同じくエックスサーバー社から提供されている無料ですぐに使える初心者向けの「wpXブログ」というブログ作成特化サービスも存在しています。このwpXブログは「XFREE WordPress機能プラン」の機能限定版の位置付けで、あらかじめいくつかの固定されたWordPressテーマ及びプラグインの中から使うものを選択し、利用する仕組みとなっていて、テーマ・プラグインをカスタマイズする自由度をなくすなど、WordPressの機能を極力簡素化したサービスです。有料のテーマやプラグインなどを自由にインストールすることが出来ないというデメリットがありますが、その分、非常に簡単な知識・操作でブログサイトを作成することが出来ます。さて、以降の内容で、XFREEで練習用のWordPressサイトをSPA仕立てで作成してみます。
Javascript(js)＆Typescript(ts)プログラミング入門〜これから学ぶ人のためのおすすめ書籍＆教材の手引き
レンタルサーバーの利用登録をする
最初にXFREEへアカウントを登録しましょう。ウェブページから[無料レンタルサーバーご利用お申し込み]ボタンより、連絡用メールアドレスを登録します。Eメールに申し込みフォームのURLが届くのでブラウザから開くと、無料レンタルサーバーへの登録が開始されます。この申し込みフォームに必須事項を埋めて、内容に問題が無ければ、[会員登録を確定する]ボタンを押して申し込みは完了です。レンタルサーバーの初回設定
最初にログインした場合、以下のようにサーバーIDを設定する必要があるようです。このサーバーIDはWordPressのウェブページURLに表示されるので、会員ユーザー名やパスワードが憶測できるような名前は避けて、適当に設定します。これでXFREEの無料レンタルサーバーを利用する準備が整いました。
Javascript(js)＆Typescript(ts)プログラミング入門〜これから学ぶ人のためのおすすめ書籍＆教材の手引き
無料WordPressサーバーを利用してみる
レンタルサーバーの利用準備が終わったので、次にWordPressウェブサイトを構築していきます。最初の状態では利用中のWordPressサーバーが存在していないので、[利用を開始する]ボタンで稼働を開始させます。すると期限付きでWordPressサーバーが起動します。ここは無料サービスを使っているので仕方無いことですが、だいたい３〜４ヶ月で利用期間が終了し、サーバーを稼働し続けたい場合には、稼働からおおよそ２ヶ月後以降で利用延長申請をする必要があります。結構あっという間に利用期限になってしまうので、忘れた頃にはサイトが消滅してしまった、というのは良くある話です。無料でWordPressサーバーを意識的に維持するのは割と苦痛ですので、少なくとも１年以上ウェブサイトを運用されたいのなら、最初から本家XServerのプランを利用した方が良いでしょう。WordPressのインストール
サーバーが稼働したばかりの状態だと、肝心の中身がありません。ということで次に行うべきは、WordPressのインストールになります。ダッシュボードから指定のサーバーにWordPressの[新規インストール]を行います。そこからいくつかWordPressの設定を入力するのですが、とりわけここで決めるWordPressIDを使って、リモートのWordPressにアクセスしながらコンテンツを操作していくので、なるだけXFREEの会員IDとも別に設定・管理することをおすすめします。WordPressIDの他にWordPressウェブサイトのURLやタイトルを適当に決めたら、WordPress(現行ではバージョン6.0が推奨)をインストールします。WordPressインストール後、WordPress管理ダッシュボードへのログインパスワードがXFREE側から送られてくるので、このパスワードも忘れずに控えておきましょう。WordPressをインストール後、15分ほど待ってから、ウェブサイトURL指定したアドレスにアクセスします。するといつものWordPressウェブページが表示されて、WordPressのインストール作業は終了です。
Javascript(js)＆Typescript(ts)プログラミング入門〜これから学ぶ人のためのおすすめ書籍＆教材の手引き
Svelteで作成したSPAをWordPressウェブページに移植する
では最後の一仕上げです。前回のブログ記事で扱ったように、Svelteから拡張したWordPressテーマを、ローカル環境からリモートサーバーへリソースを送り出す手順を説明していきます。WordPressウェブサイトをDocker＆Svelteを使ってローカル環境で開発する②〜テーマ開発編WordPressウェブサイトのローカル開発環境を使って、SvelteとWordPressを連携させたウェブサイトを構築してみます。
/wp-adminを付けて管理ダッシュボードにアクセスします。ダッシュボードにログインして、[外観] > [テーマ] > [テーマの追加]をすると、テーマのアップロード画面に移行します。ここで自作のテーマのフォルダをまるごとZIPで固めてから、手動でアップロードできるようになっています。前回のブログまでの内容で、WordPressのテーマをまとめたフォルダ(wp-content/themes)の中に、空っぽの自作テーマ(empty)を作成していました。ZIPで固める範囲は上の図でオレンジ色で囲った個別のフォルダになります。お使いのOSでフォルダのZIP圧縮を行う方法も色々ですが、著者は主にLinuxで開発作業行っていますので、元々利用できるzipコマンドがもっとも簡単な方法です。何らかの方法で、ZIP化したテーマをローカルのどこかのフォルダに置いておきましょう。このZIPファイルを先程のダッシュボードのアップロードページからWordPressサーバーへ送ります。これで、空の自作テーマが無事インストールされました。このテーマを有効化して、Svelte製のSPAが起動するかもチェックしてみます。サンプルサイトへの直リンク(※図は2022年7月現在、SPAゲームとして開発中のスクリーンショットです。時期によっては、別のサイトになっているかも知れませんのでご了承ください。)以上、XFreeの無料レンタルサーバーでSvelteアプリをアップロードして動かす手順を一通り紹介してみました。Lighthouseでザックリとパフォーマンス計測
せっかくですので、無料レンタルサーバーで立てたWordPressサイトのパフォーマンスが現状でいかほどのものなのかLighthouseで簡単に計測しておこうと思います。Lighthouseで計測できる指標の内、サーバーのスペックを反映しているものは「パフォーマンス」になります。アップロードしたアプリケーションのサイズもほぼ空に近い軽量サイズですので、ページの総合パフォーマンスはまだ高い感じはします。というかこの時点でスコアが100でないということで、SPAとしてしっかり作り込んでいくほど読み込みがさらに遅くなるはずです。パフォーマンススコアの詳細も確認すると、のようになり、ページ全体の読み込み時間は1.8sと、確かに体感としてはまだ速いとはいえ、不安を感じてくる遅さではあります。他の指標は、サーバー側のスペックには依存しないので、スコアの向上は努力目標になります。アクセサビリティが低いのはSvelteアプリで使っているHTML要素が通常の用途ではなく、特異なものになっているので、スコアがまともでないのは仕方のないとして、他のベストプラクティスやSEOのスコアは後でどうとでもなりそうです。
Javascript(js)＆Typescript(ts)プログラミング入門〜これから学ぶ人のためのおすすめ書籍＆教材の手引き
まとめ
今回はWordPressウェブサイトをJSフレームワークで作成したHTMLアプリケーションとして動かす方法をXFreeの無償プランでやってみました。HTMLアプリケーションの規模にもよりますが、まだサーバー側へのディスク容量にも余裕があるので、もう少し複雑なゲームアプリが作れそうです。HTMLゲームは一般的に、JSファイルなどのリソースをクライアント側にダウンロードさせて、ブラウザで駆動させるタイプのアプリケーションです。ユーザーによってゲームがサクサクに動くか、重い挙動になってしまうか、バランスの取りようが難しいですが、どうしても重くなってしまうようなら、軽量なアルゴリズムを導入できるか検討してみたり、Web Worker APIを使って処理負荷を分散するような処置が必要になるかも知れません。
