LoginSignup
0
0
@sakai00kou

個人メモ用にQNAP NASでWiki.jsとdockerを使ってオンラインメモページを作る。

Posted at

はじめに

システムエンジニアをやっている仕事柄、調べ物をする機会も多いため、気になったことや後で調べておきたいことなどはToDoリストに書き溜めたりしています。

しっかりとまとめたい場合は、最近はQiitaで記事化して投稿してしまっていますが、Qiitaで書くほどでも無かったり、個人的なもので公開できないようなものだと、メモ帳で雑に書き連ねることが多かったです。

ただ、デフォルトのメモ帳だとあまりテンションが上がる見た目でもなく、適当なファイル名で雑多に置かれているのも精神衛生上よろしくないので、いろいろな端末から見られたり、いい感じに編集したりできるオンラインメモページを作ろうと思ったので、やった結果を紹介したいと思います。

今回の要件整理

メモとはいえ、ToDoリストのような１行、２行のメモというよりはもう少し内容をまとめたメモとして使いたいと思うので、その前提で要件まとめました。

  • 外で作業することが多いのでどこからでもアクセスできるようにしたい
  • オンラインメモページとはいえ個人メモだから全体公開するようなことはしたくない
  • 個人のみで使用できるクラウドサービスなども色々あると思うが、今回は使いたくない
  • メモとはいえ見栄えが良いほうがテンションが上がるので単純なメモ帳的なものは嫌
  • 簡単に見栄えが良い感じになってQiitaで慣れているMarkdownで編集できるのがいいな
  • たまに図とかフローとか書くこともあるのでDraw.ioやPlantUMLなど使えると嬉しい

メモと言いつつまとめてみたら結構贅沢な要件になりました（笑）

ドキュメントページを作成する目的のアプリケーションで調べてみると、SphinxやMKDocsが出てきましたが、いわゆる静的サイトジェネレータとなり、GitHub Pagesでも使われるJekyllと同様、サイト生成にビルドが必要だそうです。

メモを取るだけで、いちいちビルドするのも手間なので、できればWikiのようにサイト上から編集できればと思い、調べてみるとWiki.jsがMarkdown形式でサイト上から編集でき、Draw.ioなども使えそうなので、Wiki.jsを導入してみます。

構成

要件の通り、外部公開はしたくないので、常時稼働している自宅のNASを使います。

自宅のNASは、元々WireGuardを使ったVPNも行っているため、外から安全にアクセスする環境は整っており、また、NAS上でDockerを動かすことができるのでDockerで作ろうと思います。

WireGuardについては以前まとめたので、気になる方は以下を見てください。

Dockerの起動

QNAP NASでDockerを起動するための事前準備と、docker-compose.ymlなど必要な設定ファイルを作成してDockerを動かしていきます。

Dockerネットワーク設定

通常、あまり考えずにdockerのネットワーク設定を行う場合、ホスト側（今回の場合NAS側）からポートフォワードする方法になりますが、できればhttp://xxxxx.localのように末尾にポート番号を付与しない形でアクセスしたいのと、ホスト側のアドレスからは分けたいという思いもあり、ホスト側のポートをブリッジする方式で設定を行います。

QNAP NASの「ネットワークと仮想スイッチ」よりブリッジ用の仮想スイッチを作成して、後の手順で作成するコンテナを紐づけました。
※今回関係ないコンテナも表示されております。

Monosnap_20240421_131341.png

ホスト側と同じネットワークに繋がる仮想スイッチを作成後、ホスト側でdocker network lsを実行すると以下のように表示されます。

docker network ls結果
$ docker network ls
NETWORK ID     NAME                      DRIVER    SCOPE
b7fd8a7fd9a6   bridge                    bridge    local
172cc8f12d59   host                      host      local
3e1cc3fb4df2   none                      null      local
b62342c908aa   qnet-static-eth0-fab139   qnet      local

私の環境ではqnet-static-eth0-fab139が外部と繋がるネットワークになるため、名前を控えておきます。

docker-compose.ymlの作成

Wiki.jsのドキュメントに記載されているDocker定義を参考に作成したdocker-compose.ymlは以下となります。

ネットワークは先程控えた名前を指定して、外部の任意のアドレスを付与、DBは最新版でも動いたので、バージョンをWiki.jsのドキュメントに記載されているバージョンより少し上げています。

また、次手順で作成するconfig.ymlは、あらかじめ作成しておき、ホスト（NAS）側の「/share/Container/Docker/wikijs/」に格納して起動時にホスト側から共有するようにします。

docker-compose.yml
version: "3"

services:
  wikijs:
    image: ghcr.io/requarks/wiki:2
    container_name: wikijs
    hostname: wikijs
    restart: unless-stopped
    depends_on:
      - wikijs-db
    environment:
      DB_TYPE: postgres
      DB_HOST: wikijs-db
      DB_PORT: 5432
      DB_USER: wikijs
      DB_PASS: wikijsrocks
      DB_NAME: wiki
    networks:
      qnet-static-eth0-fab139:
        ipv4_address: 192.168.0.101
    ports:
      - "80:80"
    cap_add:
      - NET_ADMIN
    volumes:
      - /share/Container/Docker/wikijs/config.yml:/wiki/config.yml
      - wiki-data:/wiki/data/content

  wikijs-db:
    image: postgres:16.2
    container_name: wikijs-db
    hostname: wikijs-db
    restart: unless-stopped
    environment:
      POSTGRES_DB: wiki
      POSTGRES_PASSWORD: wikijsrocks
      POSTGRES_USER: wikijs
    logging:
      driver: "none"
    networks:
      qnet-static-eth0-fab139:
        ipv4_address: 192.168.0.102
    cap_add:
      - NET_ADMIN
    volumes:
      - db-data:/var/lib/postgresql/data

networks:
  qnet-static-eth0-fab139:
    external: true
    ipam:
      config:
        - subnet: 192.168.0.0/24

volumes:
  db-data:
  wiki-data:

config.ymlの作成

デフォルトだとWiki.jsは3000番ポートで待ち受ける設定となりますが、80番ポートで待ち受けたかったので以下のようにコンフィグファイルを作成しました。

config.yml
port: 80
bindIP: 0.0.0.0
db:
  type: $(DB_TYPE)
  host: '$(DB_HOST)'
  port: $(DB_PORT)
  user: '$(DB_USER)'
  pass: '$(DB_PASS)'
  db: $(DB_NAME)
  storage: $(DB_FILEPATH)
  ssl: $(DB_SSL)
ssl:
  enabled: $(SSL_ACTIVE)
  port: 3443
  provider: letsencrypt
  domain: $(LETSENCRYPT_DOMAIN)
  subscriberEmail: $(LETSENCRYPT_EMAIL)
logLevel: $(LOG_LEVEL:info)
logFormat: $(LOG_FORMAT:default)
ha: $(HA_ACTIVE)

Dockerの起動

作成したdocker-compose.ymlをQNAP NASの「Container Station」で起動します。

「Container Station」の「アプリケーション」からdocker-compose形式のコンテナを起動できるので、「作成」ボタンから進め、適当なアプリケーション名を入力して、先程作成したdocker-compose.ymlの中身をコピペして、「検証」に成功したら「作成」で作成します。

Monosnap_20240421_133940.png

Wiki.jsへのアクセス

コンテナが正常に起動したら、先程docker-compose.ymlに記載したWiki.jsのアドレスにhttpでアクセスします。

先程の設定と同じなら「http://192.168.0.101」でアクセスできるはずです。

アクセスすると、以下のように初回の管理者ユーザ作成画面となるため、メールアドレスやパスワードを登録。

Monosnap_20240421_134753.png

インストール後、先程作成した管理者ユーザの情報を入力してログイン。

Monosnap_20240421_134902.png

ログインできれば以下のような画面が表示されるため、管理者以外のユーザを作成したり、日本語化等行いたい場合は「ADMINISTRATION」、ページを作成したい場合は「CREATE HOME PAGE」で作成します。

Monosnap_20240421_135317.png

Wiki.jsの日本語化

ページ作成する際にも影響するため、先に日本語化を行っておきます。

「ADMINISTRATION」の「Locale」の「Download Locale」から日本語を見つけてダウンロードボタンを選択。

ダウンロードすると、「Locale Settings」から日本語が選択できるようになるため、日本語を選択して、「APPLY」を選択すれば完了です。

Monosnap_20240421_135932.png

Wikiページの作成

先程のトップページに戻ると、日本語化したため、「CREATE HOME PAGE」が「ホームページの作成」に変わっていると思います。

「ホームページの作成」から進むと、ページ作成する際の方法がいくつか表示されますが、私はMarkdown形式で作成したいため、「Markdown」を選択します。

最初にページのプロパティの設定を行う必要があるため、タイトル等の情報を入力します。

Monosnap_20240421_142016.png

各項目ごとの概要については以下となります。

項目 説明
タイトル Wiki.jsの左ペインに表示されるタイトル名
簡単な説明 記載するとコメントが表示される
言語 多言語対応したい場合に作成する言語を選択
パス バックアップ等行った際のファイルパス
タグ 任意のタグを付与
tag_testのように入力してエンターを選択すると上記の画面のように登録されます

ページ作成後の画面となりますが、各プロパティ部分は以下のように紐づけられます。

Monosnap_20240421_142656.png

「パス」については「/」で区切って記載するだけでディレクトリを含んだパス表示となり、特にディレクトリを先に作っておいたりする必要はありません。

実際にはDB上に記録されるだけなので、どこかにディレクトリが作成されるということはありませんが、Wiki.jsの画面上では、ディレクトリ構造でページが表示されるため、ディレクトリを分けたほうが管理しやすいと思います。

また、バックアップする際には「パス」に記載したファイル・ディレクトリ形式で出力され、最後に拡張子が付与される書式となるため、例えば上記の例でバックアップした際には「/directory/Markdownテストページ.md」といったパスでバックアップされます。

Wiki.jsのMarkdownで表示できる色々な機能

Markdownを扱うことができるVisual Studio CodeやGitHub、また、Qiitaで記事を書く際もそうですが、最近のMarkdownエディタは単純にMarkdown形式の文章を書くだけではなく、図を挿入したりMermaidやPlantUMLの形式でフローやシーケンス図を作成することができたりするものが増えています。

Wiki.jsも、少なくとも私が欲しいと思っている機能は大体揃っており、書き慣れたVisual Studio CodeやQiitaでMarkdownを編集したときと同じく、プレビュー表示しながら記事を作成できるという点で、私には最適なメモ環境と感じています。

以下でWiki.jsのMarkdownで表示できる色々な機能について紹介していこうと思います。

Markdown作成画面

以下はこの記事の冒頭部分をWiki.jsのMarkdownで表示させた場合の例となります。

Monosnap_20240421_150733.png

最近のMarkdownエディタだと当たり前となる、プレビューしながらの編集が可能で、編集している場所に自動スクロールする機能もあり、太文字にしたり取り消し線を付与したりする基本的な操作は上と左のバーにまとまっているため、Markdownの書式に不慣れな方でも直感的に操作ができるかと思います。

また、シンタックスハイライトによりMarkdownの書式で表している部分が分かりやすくなっており、地味なところでは左の編集画面上でも見出しサイズが変わる点は私的に高評価です。

図の作成

Wiki.jsでは、既に手元にある図を挿入するだけではなく、編集画面上からDraw.ioを開き、Draw.ioで作成した図をそのまま貼り付けることができるようになっています。

左バーの以下ボタンを選択すると作図を行うDraw.ioの画面が開きます。

Monosnap_20240421_153115.png

Draw.ioで適当な図を作成し、「保存して閉じる」で閉じます。

Monosnap_20240421_153704.png

保存して閉じると元の編集画面に戻り、以下のように先ほどDraw.ioで作成した図がそのまま表示されます。

図はbase64形式でMarkdownにそのまま挿入される方式となりますが、編集画面上では以下のように隠されているので、長いコード部分をスクロールしなくて済むのはありがたいですね。

Monosnap_20240421_153834.png

ちなみに生のコードを見たい場合は「<->」部分を選択して広げると見ることができます。

Mermaid図の表示

GitHubでもMermaid形式の図が表示できるようになって久しいですが、Wiki.jsでもMarkdownファイル中で以下のように記載することでMermaid形式の図を作成することができます。

Mermaid形式の図の記載方法
```mermaid
※内容
```

Mermaidの公式ドキュメントに記載されているサンプルのシーケンス図を表示させた場合は以下のようになります。

Monosnap_20240421_162924.png

PlantUML図の表示

Mermaidと同じくフロー等の作成ができるPlantUMLも以下のように記載することでPlantUML形式の図を作成することができます。

PlantUML形式の図の記載方法
```plantuml
※内容
```

こちらもPlantUMLの公式ドキュメントに記載されているサンプルのシーケンス図を表示させた場合は以下のようになります。

Monosnap_20240421_163510.png

PlantUMLについては特に凝ったことをしなければこれで問題ないですが、以前以下の記事で紹介したような構成図を作ったりする場合は、Wiki.jsに導入されているPlantUMLのバージョンが古いからか、私の場合エラーとなってしまうことがありました。

そのため、私はPlantUMLのサービスを別で作成し、描画する際には作成したPlantUMLのサービスを見るようにすることで、上記のような凝った構成図を表示させるようにしております。

以下でPlantUMLを別で導入する方法を紹介します。

PlantUMLのサービスを別で用意する方法

Wiki.jsのコードを追ってみるとPlantUMLの描画は、以下のサイトで生成・描画した結果を表示しているようです。

オンラインページで生成していることからパフォーマンスも出にくいという点と、おそらく上記ページで使われているPlantUML自体のエンジンバージョンも古いと思われるため、今回はWiki.jsと同じくQNAP NAS上にDockerで作成します。

先ほどと同様、以下のようにdocker-compose.ymlを作成し、QNAP NASの「Container Station」で起動しました。

docker-compose.yml
version: '3.3'

services:
  plantuml:
    image: plantuml/plantuml-server:jetty
    container_name: plantuml
    hostname: plantuml
    environment:
      BASE_URL: plantuml
    networks:
      qnet-static-eth0-fab139:
        ipv4_address: 192.168.0.103
    ports:
      - 8080:8080
    cap_add:
      - NET_ADMIN

networks:
  qnet-static-eth0-fab139:
    external: true
    ipam:
      config:
        - subnet: 192.168.0.0/24

作成後、Wiki.jsの管理画面から「レンダリング」→「markdown」の「PlantUML」から「PlantUML Server」を、新たに構築したPlantUMLのURL（上記docker-compose.ymlで作成した場合、http://192.168.0.103:8080/plantuml）を指定して「適用」を選択します。

Monosnap_20240421_171556.png

おわりに

今回は、最近使ってみて個人的にアウトプットが捗っているWiki.jsについて、構築したやり方を含めて紹介しました。

私は複数PCからアクセスしたかったためQNAP NAS上に構築しましたが、Dockerで簡単に作成できるので、私のように複数PCからアクセスするようなことがなければ、自分のPC上にDockerで動かしてメモ帳代わりに使うのも良いかなと思います。

また、その場合は自分のPC上やGit上にバックアップするように設定しておくと、Markdownファイルそのままの形式で残しておけるので他に移行する場合でも便利です。

Dockerで簡単に自分専用の高機能なメモ環境を作ることができるので、あちこちにメモが散らばっていて、あとから探すのに苦労している方や、図やフローもメモ帳に残しておきたいけど、デフォルトのメモ帳やエディタでは書けないから困っていた方は、使ってみるとアウトプットの効率が劇的に上がるかと思うので、一度試してみると離れられなくなるかもしれません。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0