この投稿は Shifter Advent Calendar 2020 と Snow Monkey Advent Calendar 2020 の12月15日の投稿です。
このブログは Shifter を使っていますが、社内チャットでとある方から「Snow Monkey で LP（サイト）つくって、Shifter デプロイを10分で！」とのお題を頂いたので、弊社サービスの「用心棒」のサイトを Snow Monkey ＋ Shifter で作成し Generate（デプロイ＝公開）まで行ってみました。
目次
Shifter でサイトを作って公開まで
「10分で」というお題をもらいタイムアタックさがならでやってみましたが、結論から言うと以下の条件で、Shifter へのログインから公開まで13分程度でした。
シナリオとしては「サイトのテーマを Snow Monkey に切り替えてウィジェットなどを設定、ランディングページ（TOP）を Snow Monkey Blocks で設定」となります。
- Shifter へログイン
- サイトを選んで WordPress を起動
- Shifter の WordPress に投稿や固定ページをすでに作ってある
- メディア（画像）類もアップロード済み
- テーマを Snow Monkey に切り替えてウィジェットや見た目を調整
- ランディングページ（TOP）を Snow Monkey Blocks を使って作成
- 完成したら WordPress を終了して Shifter で Generate（デプロイ）
- 完了後サイトが公開される
Shifter と Snow Monkey でログインからデータのインポート、サイトの作成と公開までの動画を戸田さんがいい感じに編集してくれましたのでこちらもどうぞ！
動画はタイムアタックさながらにテキストなどはコピー＆ペーストしていますが、Shifter の場合、WordPress 上で設定や公開などを行ってもすぐに公開されるわけではない（Shifter で Generate するまで公開されてるサイトは置き換わらない）ので製作途中のサイトが一般公開されるわけではありません。安心してサイトを作りましょう！
サイトのスコアを取ってみよう
Shifter の特徴の一つとして「サイトの表示が速い」があります。また Snow Monkey もテーマ単体で速く表示されるように工夫がされています。
今回デモとして用いた用心棒サイトを例に「現行サイト」「Snow Monkey ＋ Shifter のサイト」「Snow Monkey ＋ レンタルサーバーのサイト」の3つを Lighthouse のスコアで比較してみました。
現行サイト
- https://yojinbo.digitalcube.jp/
- U.S. Web Design System (USWDS) を使った HTML + CSS フレームワーク
- Netlify
- Google アナリティクス（タグマネージャー）なし
Snow Monkey ＋ Shifter
- https://mystifying-blackburn2226.on.getshifter.io/
- インストールプラグイン：Snow Monkey Blocks, Snow Monkey Editor
- Google アナリティクス（タグマネージャー）あり
Snow Monkey ＋ レンタルサーバーのサイト
- https://www.purpledingo1.sakura.ne.jp/yojinbo/
そのうち削除します。Basic 認証は shifter / Demo - Shifterと同じぐらいのランニングコストということで「さくらのレンタルサーバープレミアムプラン」にホスティング
- インストールプラグイン：Snow Monkey Blocks, Snow Monkey Editor
- Google アナリティクス（タグマネージャー）あり
比較して
現行サイトは HTML＋CSS フレームワークのいわゆる静的サイトですが、Netlify が日本にエッジロケーションを持っていないためアクセスに時間がかかってるようです。また Web フォント周りがボトルネックになっています。
一方、同じテーマ・プラグインでも Shifter と一般的なレンタルサーバーではスコアに差が出ますので、次の段で詳しく説明したいと思います。
Shifter が速い理由
一般的なサーバーで URL にアクセスしてから WordPress でページが表示されるまで
- URL から HTML ファイル（実際にファイルやディレクトリがある）か WordPress で作ったページなのかを判定
- ファイルやディレクトリがない場合、WordPress が起動
- URL の構造から表示したいページの種別を判定（アーカイブなのか、投稿なのか固定ページなのか）
- データベースから情報を取得する
- 設定してるテーマから当該 URL のテンプレートを選んで HTML を組み立てる（ここにプラグインの処理も入ってきます）
- HTML からリンクされている CSS, JS, 画像などが読み込まれる
- 表示
となります。
WordPress で作られたサイトの高速化テクニックとして「キャッシュ」があげられるのは、2-5の処理でできあがった HTML（や付随するソース）をキャッシュとして保持しておくことでサーバーで行われる処理を減らして表示されるまでの時間を短縮することを意味します。
Shifter ではどのようになっているかというと、Generate というプロセスで WordPress で作ったページを全て HTML と付随する CSS, JS, 画像に変換しています。
出来上がったファイル類はホームページビルダーや Dreamweaver でサイトを作るのと同じでサイトにアクセスしても2-5の処理が行われないため表示が速くなります。
また、サイトを設置してるサーバーですが、Shifter の場合は CDN を介して全世界に配信されます。
日本のサーバーに設定したサイトを日本から見る場合は実感は少ないかもしれませんが、もしサイトの訪問者がヨーロッパからアクセスしていた場合は CDN のエッジロケーションがヨーロッパにあるので日本のサーバーにアクセスするより早く表示されます。
今回のサイトではあまり写真を多用していませんが、Shifter の有料プランでは WordPress の画像類を WebP 形式に変換して配信する「Media CDN」があります。写真を多用するようなサイトで表示速度が気になる場合は利用しましょう。
Shifter がメンテナンスフリーでセキュアな理由
Shifter は WordPress を使いたい時だけ、WordPress のインストールしたサーバーが起動し、使わない時はサーバーそのものが停止しています。
また、WordPress 本体に関しては Shifter の中の人が検証後、一律でアップデートを行うため常に最新版が提供されます。
（テーマとプラグインについてはユーザーがアップデートする必要があります）
例えば
ブルートフォースアタックを含めた不正アクセス・ログインの心配
公開後のサイトにログイン URL はないので心配不要。
アップデートしたらサイトが壊れた
Shifter で Generate してデプロイしない限り公開されたサイトの中身は書き換わらないので、壊れたとしても閲覧に問題はありません。一旦終了してセーフモードで起動するか落ち着いて右下のチャットからお問い合わせをしましょう。
まとめ：Snow Monkey ＋ Shifter のいいところ
Snow Monkey と Shifter の組み合わせは WordPress を利用してサイト構築する人にありがちな「セキュリティの心配」「アップデートが面倒」「サイト更新以外の部分に時間が取られる」「開発難しそう」が解消されると思います。
私個人はオリジナルテーマの開発とサーバーは AMIMOTO を用意してもらうことがほとんどですが、久々にレンタルサーバー契約してサイト作って「時間がかかる」「面倒」と思った部分が解消されました。
Web サイトを運用する人のメリット
- HTML タグが分からなくてもブラウザの操作だけでお洒落で素敵な見た目のサイトが作れる
- WordPress の機能を利用することで記事を書くことに集中できる
- うっかりミスしても（Generate しなければ）サイトを壊す心配がない
Web サイト開発者のメリット
- Snow Monkey を使うことで幅広いレイアウト・デザインパターンのサイトを短時間で制作できる
- いろいろなプラグインを追加しなくても必要なことができる（SEO やアクセス解析のタグの挿入）
- Shifter にサインアップ後、サイトを申し込むとすぐ WordPress が使える（データベースは自動で作成）
- セキュリティやアップデートに悩む時間がなくなる
- PHP・データベースのバージョンなどサーバー周りの面倒ごとを気にしなくて良い
- うっかりミスしても（Generate しなければ）サイトを壊す心配がない
- 困ったら右下のチャットでお問い合わせ
他にもあるかと思いますが、Snow Monkey と Shifter とが相互のパートナーシップを結んだことでより一層ユーザーフレンドリーなサービスを提供していけると思います（ちょっと宣伝）
Snow Monkey ホスティングパートナー
https://snow-monkey.2inc.org/snow-monkey-hosting-partner/
Shifterパートナーネットワーク
https://spn.getshifter.io/partner/snow-monkey/
現場からは以上です。