【お知らせ】お知らせなし (お知らせ一覧)　【サイト概要】IT用語に「ルビ」や「説明文」をつけて初心者の方にもわかりやすく丁寧に説明していきます。「サーバーの立て方」や「サイトの作り方」「カスタマイズ方法」が知りたい方はぜひ見ていってください。
ホーム
当サイトについて

当サイトについて

2022.02.21
この記事は約10分で読めます。

　当サイトはリンクフリーです。管理人の許可なくサイトやSNSにリンクを貼っていただいて問題ありません。

サイト情報

OBOEGAKIロゴ

　当サイトは、管理人がWebサイトを作成した時に行った「WordPress[※1]ワードプレス高速化」や「カスタマイズ方法」を忘れないためにメモ(覚え書き)として残しておくために作成したサイトです。折角作成するので、初心者の方にもわかりやすいよう、IT[※2]アイティー用語に「説明」や「ルビ」を記載して詳細に説明しています。

　OBOEGAKIでは新たなカスタマイズ方法を考えるため、テーマはCocoonを使用しています。自作テーマを使用しているサイトはコチラ。

※1WordPress
WordPress Foundationワードプレス・ファウンデイションによって開発されたオープンソース・ブログプラットフォーム。プログラム言語がわからなくても管理画面からサイトやブログの作成が可能。
※2InformationTechnologyインフォメーション・テクノロジー
主にパソコンやモバイル端末をベースにネットワークを利用した技術全般のこと。

サーバースペック

VPS[※1]ブイピーエスConoHa VPS[※2]このは ブイピーエス
メモリー2GBギガバイト→ 4GB(2022/9/30～)
CPUシーピーユー3コア → 4コア(2022/9/30～)
SSDエスエスディー100GB
OSオーエスCentOS Stream 8[※3]セントオーエス・ストリーム・エイト(KUSANAGI 9[※4]くさなぎ・ナイン)
ConoHaのVPSに超高速WP実行環境「KUSANAGI」を導入する方法
ConoHaの2GBプランVPSにアプリケーションテンプレートの「かんたんKUSANAGI」を適用し、超高速WordPress実行環境の「KUSANAGI」をVPSに導入する方法をご紹介します。
wm-oboegaki.com
※1VirtualPrivateServerバーチャル・プライベート・サーバー(仮想専用サーバー)
複数のユーザーで1つのサーバーを共有するが、専用サーバーと同等の機能を有しているサーバ
※2ConoHa VPS
GMOインターネット株式会社が運営するVPS。豊富なテンプレートイメージと高速SSDによって、たったの25秒で「今すぐ使える」サーバーが作れる。
※3CentOS Stream
CentOSセントオーエスプロジェクトが開発するLinuxリナックスディストリビューション(Linuxと動作に必要なソフトを組み合わせたもの)で、Red Hat Enterprise Linuxレッド・ハット・エンタープライズ・リナックスの開発版(アップストリーム)にあたる。
※4KUSANAGI
プライム・ストラテジー株式会社が開発した、CentOSベースの超高速WordPress実行環境。

導入ソフトウェア

WebウェブサーバーNGINX[※1]エンジンエックス
SMTP[※2]エスエムティーピーサーバーPostfix[※3]ポストフィック
PHP[※4]ピーエイチピーPHP 8
データベースMariaDB[※5]10マリアデービー
高速化ソフトウェアWEXAL®Page Speed Technology[※6]ウェクサル®ページ・スピード・テクノロジー
CMS[※7]シーエムエスWordPress
WordPressテーマCocoon[※8]コクーン
超高速WP環境KUSANAGIをさらに高速化できるWEXALの導入方法
WordPressで作成したWebサイト(ブログ)を超高速で運用するために導入した「KUSANAGI」をさらに高速化してくれるソフトウェア「WEXAL」を導入する方法をご紹介します。
wm-oboegaki.com
※1NGINX
NGINXが開発したWebサーバーソフトウェア。軽量で同時に大量のアクセスがあった場合でもレスポンス性能が大きく下がることがない。
※2SimpleMailTransferProtocolシンプル・メール・トランスファー・プロトコル
電子メールを転送するために使用される規約。SMTPサーバーは主にメール送信に使用される。
※3Postfix
Wietse Venemaヴィーツェ・ヴェネマ氏によって開発されたメール転送エージェント。CentOSには標準でインストールされている。
※4PHP
The PHP Groupザ・ピーエイチピー・グループによって開発されたプログラミング言語。主にWebサイト制作に使用され、サーバー側で処理される。
メリット：サーバー側で処理するためユーザー側の設定が必要ない(ユーザー環境に左右されにくい)。また、ユーザーはプログラム処理後のコード(HTML)しか見ることができないためPHPコードの盗用も防止にもなる。
デメリット：サーバーで処理されるのでサイト表示後の処理はできない(JSなどブラウザなどで処理するプログラム言語ならば可能)。
※5MariaDB
Michael Wideniusミカエル・ウィデニウス氏によって開発されたMySQLマイエスキューエルから派生したデータベース管理システム。大量のデータを高速に処理できることが特徴。
※6WEXAL®Page Speed Technology
プライム・ストラテジー株式会社が開発した、KUSANAGI専用のWebページをさらに高速化するソフトウェア。
※7ContentsManagementSystemコンテンツ・マネジメント・システム
専門知識がなくても、サイトの作成・更新・管理が簡単に行えるシステム。
※8Cocoon
検索エンジン対策・高速化・モバイルフレンドリーに最適化した無料テーマ。

導入プラグイン (WordPress)

WebP Express
(WEXALとの使用で速度低下が発生したため現在未使用)		サイトに表示されているjpeg[※1]ジェイペグやpng[※2]ピングを自動生成したWebP[※3]ウェッピーに置き換える。
Intuitive Custom Post Order投稿、固定ページ、カテゴリなどの項目をドラッグ&ドロップで並べ替えが可能になる。
Advanced Editor Toolsブロックエディター(Gutenbergグーテンベルク)とクラシックエディター(TinyMCEタイニーエムシーイー)の機能を拡張し、追加の編集ボタンなどを設置できるようになる。
※1JointPhotographicExpertsGroupジョイント・フォトグラフィック・エキスパーツ・グループ
Joint Photographic Experts Groupによって開発された静止画像圧縮方式。非可逆圧縮(圧縮後元の画質に戻せない)で圧縮率が高くファイルサイズが小さい。
※2PortableNetworkGraphicsポータブル・ネットワーク・グラフィックス
World Wide Web Consortiumワールド・ワイド・ウェブ・コンソーシアムによって開発された静止画像圧縮方式。可逆圧縮(圧縮後元の画質に戻せる)で透過できるがJPEGより圧縮率が低い。
※3WebP
Googleグーグルによって開発された画像圧縮方式。JPEGよりも圧縮率高く、PNGのように透過でき、GIFジフのようなアニメーションにも対応している。

管理人情報

　趣味のサイトを作るため、知識ゼロの状態からサイト作りをスタートしました。
　サイト作りを始めた直後は、なにをすればいいのかわからない状態でしたが、サイトの作り方を調べていくうちにWordPressで作ると比較的簡単に作れることを知り、なんとか作成することができました。
　その後は、サイト運営を行いながら不具合修正を繰り返すことで、様々なスキルを取得することができ、サーバーの構築からサイトのカスタマイズまで一通り出来るようになりました。
　また、初めて作成したサイトのアクセス数は1年半程で月間100万PVピーブイ[※1]を超えることができるようになり、現在はTwitterツイッターのフォロワー管理ツールなどWebアプリの制作も行っています。

※1PageViewページビュー
サイトアクセス数の単位で、ユーザーがサイト(ページ)を表示した回数。

現在運営中のサイト

運営サイト①

VTuber Ch.ロゴ

サイト名
　VTbuer Ch.ブイチューバー チャンネル–VTbuerブイチューバーの動画まとめサイト

サイト説明
　「にじさんじ」「ホロライブ」「ホロスターズ」に所属するVTuber達の動画を「ライブ配信」「ライブ配信予定」「アーカイブ」「プレミア動画」「通常アップロード動画」に分類し並び替えることで動画が探しやすくなっています。
　また、箱(所属グループ)で絞り込むこともできるので、すべてのページで特定の箱だけの動画を表示することもできます。動画共有サービスは、YouTubeユーチューブとTwitchツイッチに対応しています。

コメント
　サイト名を決めた際は、すべてのVTuberを紹介しようと考え「VTuber Ch.」という名前にしましたが、サイトを運営していくうちにサーバーのスペック不足や作業時間がかかることが判明したため、現在は「にじさんじ」「ホロライブ」「ホロスターズ」に所属するVTuberを紹介するサイトになっています。

運営サイト②

VMusic Ch.ロゴ

サイト名
　VMusic Ch.ブイミュージック チャンネル– VTbuerのMVまとめサイト

サイト説明
　「にじさんじ」「ホロライブ」「ホロスターズ」に所属するVTuber達のMVを「オリジナル曲」「カバー曲」「#Shorts曲」に分類し並び替えることでMVが探しやすくなっています。
　また、箱(所属グループ)で絞り込むこともできるので、すべてのページで特定の箱だけのMVを表示することもできます。

コメント
　「VTuber Ch.」と同じ理由により、現在は「にじさんじ」「ホロライブ」「ホロスターズ」に所属するVTbuerのMVを紹介するサイトになっています。

サイト作りのきっかけ

VTuberライブ配信
クリックで画像拡大

　サイト作りをスタートしたきっかけは趣味のYouTube鑑賞ががきっかけでした。

　具体的には、VTuberのメインコンテンツである「ライブ配信」を視聴するため、登録チャンネルページで「ライブ配信」と「ライブ公開予定」をチェックしていました。
　しかし、登録チャンネルページには「アーカイブ」や「通常アップロード動画」など様々なタイプの動画が同じページに表示してあり、尚且つアップロード順に並んでいるため、新しい動画が公開される度に「ライブ公開予定」が後ろに流れていってしまい、ライブ配信を見逃してしまったり、少し使いにくく感じたことでした。

　そこで、YouTubeでは同じページに表示されていた「ライブ配信」「ライブ公開予定」「アーカイブ」「プレミア動画」「通常アップロード動画」をそれぞれ別々のページに表示し、並び順も動画の種類によって最適な並び順に自動で並び替えられるサイトを作ろうと思いました。

こだわったポイント

　こだわったポイントは二つあります。
　一つ目はサイトの表示速度です。主に下記の処理を行った結果、画像ばかりのサイトですが「Google PageSpeed Insightsグーグル ページスピード インサイト」でPC「99～100」・モバイル「96～100」のスコアを獲得できるようになりました。

  • 高速WordPress実行環境KUSANAGIを使用
  • WordPress高速化ソフトWEXALを使用
  • 機能最小限のWordPressテーマを自作
  • WordPressプラグインをできるだけ使用しない
  • 機能最小限のブログパーツを自作
  • jQueryジェイクエリー[※1]を使用しない
※1jQuery
プログラミング言語のJavaScriptジャバスクリプトを簡単に実行するためのプログラムをひとまとまりにしたもの

　二つ目のポイントは更新作業の自動化です。下記の処理を実行した結果、手動で更新を行わなくてもリアルタイムで最新動画情報がサイトに表示され、サイトの更新を行う必要がなくなりました。また、サイトの更新情報も自動でSNSに投稿されるので、PR活動も自動で行われます。

  • YouTubeやTwitchのWebAPIウェブエーピーアイ[※2]を利用してサイトの動画情報を自動更新
  • TwitterやFacebookのWebAPIウェブエーピーアイを利用してサイトの更新情報をSNSに自動投稿
※1ApplicationProgrammingInterfaceアプリケーション・プログラミング・インタフェース
開発者向けに公開されているデータなどをやり取りするために用いられる機能。
タイトルとURLをコピーしました