【第2回：自宅サーバーでWiki.jsを構築！】Wiki.jsを「最強の技術ノート」へ。日本語検索とフォント最適化で資産化を加速させる

こんにちは、てつです！

前回は、Docker Composeを使ってWiki.jsの「器」を爆速で作り、Nginx Proxy Manager（NPM）でスマートなURLアクセスを実現しました。

無事にWiki.jsのセットアップ画面が表示された時の感動は大きいですよね。

しかし、実はデフォルトの状態だと、日本人エンジニアにとっては少し「惜しい」ポイントが2つあります。

日本語検索がデフォルトでは使いものにならない
フォントが英語圏向けで、日本語が美しくない（いわゆる中華フォント現象）

せっかく立てた自分専用Wikiも、書いた情報が検索で見つからなかったり、見た目が悪くてテンションが上がらなかったりしては、継続できません。

第2回では、Wiki.jsを「毎日書き込みたくなる、一生モノの相棒」に仕上げるためのデザイン＆検索最適化を徹底解説します！

1. 日本語検索を「Database」だけで完結させる
1. 設定手順
「中華フォント」を卒業。CSSインジェクションで美化
1. 適用するCSS
3. ガジェット好きのこだわり。ダークモードとDraw.io
4. なぜ「今」最適化するのか？
まとめ：あなたのWikiは「使える道具」になった
1. 次回予告
2. 用語まとめ

1. 日本語検索を「Database」だけで完結させる

Wiki.jsのバックエンドで動く「PostgreSQL」は、標準状態だと日本語のような「単語の区切りにスペースがない言語」の扱いが苦手です。

これを解決するために、Wiki.jsの管理画面から検索エンジンを最適化しましょう。

設定手順

１．管理画面＞ [Locale] を開く

[Administration]（歯車アイコン）をクリックし、左メニューから [Locale] を選びます。

２．日本語（Japanese）をダウンロードする

リストの中から [Japanese / 日本語] を探し、その右側にあるクラウド（雲）マークの [DOWNLOAD] ボタンをクリックします。
ダウンロードが完了するまで数十秒待ちます。

３．日本語を適用（APPLY）する

ダウンロードが終わったら、画面右上の [APPLY] ボタンをクリックします。これでWiki.js全体のメニューが日本語に変わるはずです。

４．管理画面（Administration）＞ [Search Engine] を開きます。

５．デフォルトの「Database – PostgreSQL」を選択。

６．[Language] 項目を [Japanese] に変更します。

７．設定を保存後、必ず [インデックスの再構築]を実行してください。

重要な視点：なぜElasticsearchを使わないのか？

本来、最強の検索を目指すなら「Elasticsearch」という専門の検索エンジンを別コンテナで立てるのがプロの道です。

しかし、メモリを数GBも消費するため、格安ジャンクPCや低スペックな自宅サバではDatabase検索を日本語設定にするだけで十分。

リソースは賢く節約しましょう！

「中華フォント」を卒業。CSSインジェクションで美化

デフォルトのWiki.jsは非常にモダンですが、日本語を表示すると漢字の形が少し不自然（中国語フォントに近い状態）になることがあります。これを「Inject CSS」機能で修正します。

適用するCSS

[テーマ] ＞ [追加コード CSS / HTML] のCSS欄に以下を貼り付けます。

/* 日本語を読みやすく、エンジニア好みのゴシック体に */
body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/* コードブロックも見やすさ重視に微調整 */
code, pre {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 0.95em;
    line-height: 1.6;
}

3. ガジェット好きのこだわり。ダークモードとDraw.io

夜中に暗い部屋でコードを書きながらWikiをまとめる……そんなガジェット好きのロマンを支えるのがダークモードです。

テーマ設定: [テーマ] ＞ [テーマ] で「ダークモード」を選択。

Draw.io連携: Wiki.jsには、サーバー構成図を爆速で描ける「Draw.io」が標準内蔵されています。これもダークモードに対応しており、図解作成が驚くほど捗ります

4. なぜ「今」最適化するのか？

「後でいいや」と思いがちですが、「検索できない」「見た目が悪い」という小さなストレスは、執筆意欲を確実に削ぎます。

自宅サーバーを単なる「実験場」で終わらせず、一生モノの「資産」にするためには、最初に「使っていて気持ちがいい状態」を技術で作り上げることが、運用の継続における鉄則です。

まとめ：あなたのWikiは「使える道具」になった

お疲れ様でした！これで日本語もしっかり検索でき、見た目もプロ仕様のWiki環境が整いました。

次回予告

環境は整いましたが、今のままだと「自宅のWi-Fi内」でしかアクセスできません。「外出先のカフェで、スマホからサクッとサーバーのメモを確認したい……」そんな願いを、ポート開放という危険な道を通らずに実現しましょう。

次回、第3回は「外部アクセス『新』常識編」。

Tailscale を使った、爆速かつ安全なアクセス環境の作り方を伝授します！

用語まとめ

Docker Compose: 複数のコンテナを一括で管理・起動できるツール。
PostgreSQL: 世界中で使われている、信頼性の高いオープンソースのリレーショナルデータベース。
Elasticsearch: 大規模なデータから高速に情報を探し出すための専門的な検索エンジン。
ポート開放: ルーターの設定を変更して、外部から自宅内の特定の機器に通信を通すこと。セキュリティ上のリスクが伴うため、次回紹介する「Tailscale」などが代替案として人気。