XserverにBookStackをインストールする

BookStack(Wiki)は共用ホスティングレンタルサーバー)はサポートしていませんが、Xserverには普通にインストールできました。
ただしいろいろと設定が必要なので、メモしておきます。

Wikipediaにも使われているMediaWikiなら小難しい設定抜きでインストールできたので、ユーザーごとに閲覧制限をしたいといった理由がなければそちらでもよさそうです。

BookStackとは

オープンソースWikiソフトウェアの一つです。
PHPMySQLで動きます。
本棚、ブック、章、ページといった風に、サイトを本に見立てて管理するのが特徴です。
ページ構造が直感的でページ編集にWYSIWYGMarkdownどちらも使えるので、PCに慣れていないメンバーがいる場合にもおすすめです。
他のWikiにはあまりない機能として、ユーザーに権限を設定して見れないページを作れる点があります。
現在でも頻繁にアップデートが行われています。

有志の方により日本語化がされています。

www.bookstackapp.com

BookStack動作環境

  • PHP >= 7.4
    • For installation and maintenance, you’ll need to be able to run php from the command line.
    • Required Extensions: OpenSSL, PDO, MBstring, Tokenizer, GD, MySQL, SimpleXML & DOM
  • MySQL >= 5.7 or MariaDB >= 10.2
    • For the storage of BookStack content and data.
    • Single Database (All permissions advised since application manages schema)
  • Git Version Control
    • For application of updates when following our standard process.
  • Composer >= v2.0
    • For installation and management of our PHP dependencies.

※BookStackのバージョンアップで変わっている可能性があるので、公式サイトで確認が必要です。

www.bookstackapp.com

Xserverの下準備をする

Xserver管理画面でMySQLPHPのバージョン設定

  1. Xserver管理画面にログイン。
  2. Xserver管理画面のサーバー管理のMySQL設定で、MySQLデータベースを作り、そのデータベースにMySQLユーザーを追加します。
    作ったデータベースの名前とユーザー名、パスワードをメモしておきます。
  3. PHP Ver.切替」でBookStackをインストールしたいドメインを選び、7.4以上のバージョンのPHPに切り替えておきます。ここではPHP8.0に切り替えるものとします。

PHPを切り替え

  1. まずはSSHでXserverにログインします。

  2. php -vを実行してPHPのバージョンを確認します。
    おそらく管理画面で設定したバージョンとは異なるものとなっているはずです。
    その場合まずはmkdir $HOME/binを実行しbinディレクトリを作り、ln -s /usr/bin/php8.0 $HOME/bin/phpを実行して、Xserver管理画面で設定したバージョンであるPHP8.0のシンボリックリンクを作成します。

  3. 次にSSHで使うPHPのバージョンを切り替えるためにvi ~/.bashrcを実行して.bashrcを開きます。

    以下の行を追記し、パスを通します。
    PATH=$HOME/bin:$PATH
    .bashrcをそのままにしておきたい人はサブフォルダにでも.bashrcを作ってそちらをsourceコマンドで読み込んでください。)

  4. source ~/.bashrcを実行して.bashrcを再読み込みします。

  5. php -vを実行してPHPのバージョンを確認して、PHP8になっていれば大丈夫です。

Composerをアップデート

引き続きComposerをアップデートしていきます。一度SSHをログアウトしていたならsource ~/.bashrcSSHで使うPHPを切り替えてください。

composer -VでComposerのバージョンを確認して、動作環境より低いバージョンならアップデートする必要があります。

Composerのダウンロードページを開きます。

getcomposer.org

下記コマンドでサーバーの設定に合ったcomposer.pharを生成してくれます。
Composerのバージョンアップ等でハッシュ値が変わる可能性があるので、必ず公式ページからコピペしてください。

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === '55ce33d7678c5a611085589f1f3ddf8b3c52d662cd01d4ba75c0ee0459970c2200a51f492d557530c71c15d8dba01eae') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"

composer.pharファイルが作成されますので、mv composer.phar $HOME/bin/composerを実行してbinフォルダに移動します。

source ~/.bashrcを実行して.bashrcを再読み込みします。

composer -Vを実行してComposerのバージョンを確認して、BookStackの動作条件を満たしていることを確認します。

Gitのインストール

XserverはGitが元から入っています。

BookStackをインストールする

いよいよBookStackをインストールしていきます。

ここから先は公式サイトの手動インストール手順とだいたい同じです。

Installation · BookStack

  1. まずはcd ~/でホームディレクトリに移動します。

  2. git clone https://github.com/BookStackApp/BookStack.git --branch release --single-branch でBookStackのGitHubからプロジェクトをCloneします。
    BookStackディレクトリが作られているはずです。

  3. cd BookStackBookStackディレクトリに移動。

  4. composer install --no-devを実行してBookStackに必要なパッケージをインストールします。

BookStackの環境設定ファイルとデータベースの設定

そのままBookStackディレクトリで設定ファイルを作成していきます。

  1. cp .env.example .envを実行して.env.exampleファイルを.envファイルにコピーします。

  2. php artisan key:generateを実行して一意のアプリケーション キーを生成します。
    これにより.envファイル内のAPP_KEY定数が自動的に更新されます。

  3. vi .envでファイルを開き、メモしておいたデータベースの詳細と、APP_URLには公開予定のURL、メールの詳細も設定します。
    適時自分の環境に合わせて書き換えてください。

APP_URL=https://your-domain.com

DB_HOST=mysql***xserver.jp
DB_DATABASE=Database name
DB_USERNAME=Database user
DB_PASSWORD=Database password

MAIL_DRIVER=smtp
MAIL_FROM_NAME="BookStack"
MAIL_FROM=info@your-domain.com
MAIL_HOST=sv***.xserver.jp
MAIL_PORT=465
MAIL_USERNAME=info@your-domain.com
MAIL_PASSWORD=Mail password
MAIL_ENCRYPTION=ssl

同じディレクトリにある.env.example.completeファイルにはその他設定できる項目が書かれています。

APP_LANG=ja
APP_TIMEZONE=Asia/Tokyo

あたりは設定しておくとよさそうです。

  1. php artisan migrateを実行してデータベースを更新します。

BookStack用にディレクトリを設定

  1. chmod u+w ~/BookStack/storage ~/BookStack/bootstrap/cacheを実行して、これらのフォルダーをWebサーバーによって書き込み可能にします。

  2. publicフォルダを公開予定のドメインディレクトリのpublic_htmlフォルダに移動させます。
    今回はyour-domain.comが公開予定のドメインで、その直下にインストールするとします。
    移動させる前にpublic_htmlフォルダからindex.htmlファイル等は削除しておいてください。

    mv ~/BookStack/public/* ~/BookStack/public/.htaccess ~/your-domain.com/public_htmlを実行して必要なファイルを移動させます。

  3. chmod u+w ~/your-domain.com/public_html/uploadsを実行してuploadsをWebサーバーによって書き込み可能にします。

公開ディレクトリのファイルを書き換え

  1. cd ~/your-domain.com/public_htmlを実行して、公開ディレクトリに移動します。

  2. vi .htaccessを実行してRewriteEngine Onの下の行にRewriteBase /を追記します。
    ※もしBookStackの公開ディレクトリがサブディレクトリの場合、例えばインストール先がdirならRewriteBase /dir/としてください。

  3. vi index.phpを実行して、いくつかの書き換えをしてください。
    /../..のところはBookStackの公開ディレクトリがサブディレクトリだったりするなら、その分/../../..といった風に階層を深くします。

18行目あたり

if (file_exists(__DIR__ . '/../storage/framework/maintenance.php')) {
    require __DIR__ . '/../storage/framework/maintenance.php';
}
↓以下に変更
if (file_exists(__DIR__ . '/../../BookStack/storage/framework/maintenance.php')) {
    require __DIR__ . '/../../BookStack/storage/framework/maintenance.php';
}

37行目あたり

require __DIR__ . '/../vendor/autoload.php';
↓以下に変更
require __DIR__ . '/../../BookStack/vendor/autoload.php';

51行目あたり

$app = require_once __DIR__ . '/../bootstrap/app.php';
↓以下に変更
$app = require_once __DIR__ . '/../../BookStack/bootstrap/app.php';

BookStackにログイン

これでBookStackのインストールができたはずです。

ブラウザで公開URLにアクセスして、デフォルトの管理者admin@admin.comとパスワードpasswordでログインできます。

セキュリティ上の理由から、初回ログイン直後にログイン情報を変更してください。

参考にしたサイト

Installing BookStack Wiki on cPanel Shared Hosting - WarpConduit Computing

【エックスサーバー】Laravelで作成したWebアプリを公開 | チグサウェブ

Docker Desktop for WindowsがDocker Desktop starting… から進まない

Docker Desktop for WindowsがDocker Desktop starting…から進まなくなってしまいました。

今回試した解決法一覧です。

まずはDocker Desktop for Windowsを終了

Docker Desktop for Windows(以下Docker Desktop)を終了させます。

これをしないと始まりません。

操作を受け付けない場合はタスクマネージャーを使って強制終了です。
いっそパソコンごと再起動してもいいかもしれません。

その後Docker Desktopを起動したら、もしかしたら直っているかも。
自然治癒力に期待です。

駄目ならまた終了させて、以下の方法を試していきます。

WSLのDocker関係のディストリビューションを終了してみる

穏当な方法です。
Terminal(Windows10の場合はPowerShell)を起動して、以下のコマンドでDocker関係のディストリビューションを終了させます。

wsl --terminate docker-desktop
wsl --terminate docker-desktop-data

その後Docker Desktopを起動します。

Docker Desktopを再インストールしてみる

Docker Desktopを再インストールしました。
私には効果ありませんでしたが、直る可能性があります。

また、Docker Desktopをアンインストールしたあと、Docker関連のデータを削除してみました。

  1. C:\Users\ユーザー名\AppData\RoamingのDockerと名前の付いたフォルダ。
  2. C:\Users\ユーザー名\.docker

そして再インストール。

これで直らなければ、ここから先は破壊的な方法です。

Dockerのデータ初期化

「Docker Desktop starting…」中でも初期化はできるようです。
メニューの虫っぽいアイコンから「Reset to factory defaults」を実行します。

なおコンテナなどのデータはすべて消えます。
直らなければ次です。

WSLのDocker関係のディストリビューションを削除してみる

Terminal(Windows10の場合はPowerShell)を起動して、以下のコマンドでWSLを掃除しました。

wsl --unregister docker-desktop
wsl --unregister docker-desktop-data

そしてDocker Desktopをインストールします。

WSLのUbuntuを入れなおし

それでも直らなかったので、Terminalで下記コマンドでDockerだけでなくUbuntuから入れなおしました。

wsl --unregister docker-desktop
wsl --unregister docker-desktop-data
wsl --unregister Ubuntu
wsl --install Ubuntu

これでDocker Desktopをインストールしたところ、ようやく直りました。やれやれ。

CHUWI Gemibook Proの初期化でタッチパッドもサウンドデバイスも、他いろんなものが動かなくなった時にしたこと

CHUWI Gemibook Proを買って使っていたのですが、ある時からブルースクリーンが頻発するように。
さらに復元ポイントが消えたりとめちゃくちゃ調子が悪くなってしまいました。

どうもWindowsのソフト的な問題のようなので、思い切ってクリーンインストールをしてみたのですが、さらなるトラブルに・・・

Windows初期化でデバイスドライバーが多数消滅

初期化が終わったパソコンを使おうとしたのですが、タッチパッドは反応せず、音も鳴らず、デバイスマネージャーを覗くと他いろんなものが止まっていました。不明なデバイスだらけ。

↑これはCHUWIのサポートに問い合わせるために撮った写真ですが、スクリーンショットにしておけばよかったです。

なぜかキーボードと外付けマウスは使えるという状態で、改めて初期化しても変わらずの状況になってしまいました。

CHUWIのサポートにメールしてみると珍しくすぐに返事が来たのですが、「今みんな春休みだから誰もいないんだ。半月くらい待ってくれよな!Have a nice day!」みたいなことが書いてありました。
自動返信だから仕方ないとはいえ、トラブルの相談で「Have a nice day!」はイラっと来るものがあります。
仕方がないので自分でいろいろ調べてみることに。

原因はデバイスドライバーが足りないため

原因としては、どうやらGemibook ProのデバイスドライバーのいくつかはWindows Upadate経由で提供されていないようです。

そのためデバイスドライバーを自分で探して入れる必要があります。

…まじかよ。

キーボードとマウスが使えたのは標準ドライバーで使えたからでしょう。
あとUSBのインストールメディアを作ってクリーンインストールしたのもまずかったかもしれません。

試しにLinux Mintを入れてみると、ぱっと見全部正常に動いているようなのでかなり心揺れましたが、サポートのメールを思い出して意地でもWindowsで!とさらに調べてみることにしました。

解決策はCHUWIサポートフォーラムに

解決策はちゃんとありました。

どうやら同じ理由で困っている人はいるようで、CHUWIのサポートフォーラムで何度か話題となっていました。
そのなかのスレッドの一つでCHUWI公式がドライバーの詰め合わせセットを配っていました。

forum.chuwi.com

こちらのスレッドのChuwiServiceというのが公式アカウントで、ここからダウンロードしたファイルで問題なく解決しました。

なおGemibookProにはCPUがN5100とJ4125の二つのモデルがあり、それぞれ別のドライバのようなのでご注意ください。
別CPUバージョンのも別のスレッドで見かけました。

手順としては以下の通りです。

  1. rarファイルになっているので解凍
  2. バイスマネージャーで警告マークが出ているデバイスを右クリックして「ドライバーの更新」をクリック。
  3. 「コンピューターを参照してドライバーを検索(手動で検索)」。
  4. 「次の場所でドライバーを検索します:」で解凍したフォルダを指定。
  5. 「次へ」ボタンクリック。

ということで全部ドライバーを入れていけば終了です。

WordPressの一部でReact Routerを使うときにURLで直接開くと404になる場合の対処

WordPressで訳あって投稿一覧画面のみReactを使いReact Routerでルーティングすることにしました。 やるなら全部ヘッドレス化したほうが通常はいいと思います。

<Link>でリンク先を開くときは問題なくても、URLで直接アクセスしたり再読み込みすると404になってしまいました。

add_rewrite_rule()で追加のリライトルールを指定

add_rewrite_rule()をfunctions.phpに追記して、追加のリライトルールを指定すれば404を回避できます。

例えば私の場合は投稿一覧画面のみReact Routerでルーティングしたかったので、以下のようにしました。

function my_rewrite_rules()
{
  // 設定 > 表示設定で「posts」ページを投稿一覧画面として、一覧画面のみReact Routerを使いたい場合の設定です。
  add_rewrite_rule('^posts$', 'index.php?post_type=post', 'top');  // 投稿一覧のルート
  add_rewrite_rule('^posts/page/\d+', 'index.php?post_type=post', 'top');  // ページネーション
  add_rewrite_rule('^archives/category/.*', 'index.php?post_type=post', 'top');  // カテゴリーページ
}
add_action('init', 'my_rewrite_rules');

<Route>でルーティングしていればReact Routerがうまいことやってくれるようで、第2引数で$matchesを使って情報を渡す必要はありませんでした。
第3引数にはtopを指定しておきます。

注意点としては、管理画面の「設定 > パーマリンク」のページで「変更を保存」ボタンを押さないとリライトルールが適用されません。


add_rewrite_rule()のリファレンスはこちら

wpdocs.osdn.jp


WordPressのクエリの一覧はこちらから

wpdocs.osdn.jp


WordPressREST APIのエンドポイント一覧はこちらから

developer.wordpress.org

一部のページだけ404になるときは

だいたい大丈夫になっても、一部のページのみURL直打ちで404になることがあります。

正規表現を間違えている

リライトルールの正規表現を間違えている可能性があります。
ネットの正規表現チェッカーとかでチェックするといいかもしれません。

データの存在しないURLへアクセスしている。

add_rewrite_ruleでリライトルールを追加しても、データの存在しないURLへのアクセスだと404に飛ばされてしまいます。

例えばREST APIで投稿一覧を取得するときに、クエリのper_pageパラメータで1ページ当たりの投稿件数を指定できます。

このときWordPressの管理画面で設定した「ページに表示する最大投稿数」より小さな数字を指定すると、最後のほうのページに直接URLでアクセスしたときに404になったりします。

その場合は管理画面で「ページに表示する最大投稿数」を小さい数字に設定するか、アクションフックのparse_requestで404へのジャンプを抑制する必要があります。

parse_request | Hook | WordPress Developer Resources

共有したWindows11のパソコンに他のパソコンからアクセスできないとき

ファイル共有の設定をしたWindows11のパソコンに、他のパソコンからのアクセスがどうしてもできませんでした。

「アカウントの認証に失敗しました」となりどうしてもアクセスできません。

以下のいくつかの点をチェックしてみても、ミスはないようでした。

  • とりあえず再起動してみる。
    再起動で直ることは多いので大事です。

  • プライベートネットワークに設定しているか確認。
    「設定 > ネットワークとインターネット > イーサネット/Wi-Fi > (接続済みのネットワークの)プロパティ > プライベートネットワーク」でプライベートにチェックが入っていればOKです。

  • ネットワークの共有設定を確認
    「設定 > ネットワークとインターネット > ネットワークの詳細設定 > 共有の詳細設定」で「ネットワーク探索」と「ファイルとプリンターの共有」のどちらにもチェックが入っていればOKです。

  • ユーザー名とパスワードが正しいか確認。
    Microsoftアカウントでログインしている場合は、そのメールアドレスとパスワードを使います。

「パスワード保護共有」をOFFにすればアクセスできたのですが、それはしたくありませんでした。

いろいろ調べた結果、以下の方法でうまくいきました。

Windows Helloのサインインをいったん削除する

「設定 > アカウント > サインインオプション」でWindows Helloのサインインをいったん削除してパスワード認証に変更するとうまくいきました。

一度うまくいけばWindows Helloを再設定しても問題ないようです。

Wordpressでオリジナルのブロックを作成する公式サイトのチュートリアル

公式サイト

日本語版

チュートリアルは有志の方がほぼ完全に翻訳してくださっています。

ただし個別のコンポーネントのページなどは、翻訳が追い付いていないために欠けています。
その辺は基本シンプルな内容しか書かれていないので翻訳はそもそも不要ですが、ページへのリンク自体がないことには注意が必要です。

ja.wordpress.org

英語版

developer.wordpress.org

GitHubWordpress Coreブロックのソースコード

標準で使えるCoreブロックのソースコードです。
いろいろと参考になります。

ただ、alignなどのよく使う機能は サポート で用意されていることも多いです。

github.com

ひとつのプラグインで複数のブロックを定義する

npx @wordpress/create-block gutenprideを使うと、一つのプラグインで一つのブロックしか定義できません。
しかし下記方法を使うと一つのプラグインに複数のブロックを定義できます。

dev.to

save.jsの更新が反映されないときは

作成中にsave.jsの更新内容が反映されずかなり悩みました。

キャッシュが残っているのは分かっていましたが、仮想環境のリスタートやブラウザキャッシュのクリアをしても反映されず。

結局原因は手を抜いていたことで、block.jsonのバージョン情報を上げ、いったんWordpressの編集ページから抜けることで解決されました。

3分間ネットワーキングを読んでみた

3分間ネットワーキングというサイトを読んでみました。

かなり昔のサイトなのでいろいろ古い部分はあるものの、丁寧で分かりやすい。

1つ1つの回が短いのも読みやすくていいですね。

回を追うにつれてどんどん扱いがひどくなる助手君かわいそう。

www5e.biglobe.ne.jp