Wikidotモジュール仕様書

WELCOME!

ここでは、Wikidotに搭載されている機能の一つである「モジュール」について詳しく説明していきます。

構文初心者の方は「モジュールって何?」というところからしっかりと理解するために、上級者の方にはレファレンスとして役立てていただければ幸いです。

それでは始めましょう。


そもそも"モジュール"って何?

Wikidotによれば、「built-in applications that you can place anywhere on your pages. - ページのどこにでも配置できる組み込みアプリケーション」のことらしいです。横文字ばっかりで訳がわかりません。

わかりやすく言えば、「Wikidotが準備してくれたデータや機能をページに引っ張ってきて使うためのツール」です。

Wikidot上では、私達はJavascriptを自由に動かすことはできませんし、Wikidotが持っているサイトやページに関するデータに自由にアクセスすることもできません。これはセキュリティなどを守るためのことなので、面倒ですが諦めなければなりません。ただ、Wikidotも鬼ではないので、私達が頻繁に必要になりそうな機能やデータは限定的にアクセスさせてあげるよ、と言ってくれたのです。この機能やデータにアクセスするための鍵となるものが「モジュール」です。
私達はモジュールを通して、Wikidotが持っているデータ、具体的には「ページの作成者」「コメント数」「文字数」などの様々な情報にアクセスするのです。

どうやって使うの?

ここまでで、モジュールとはなにか、という漠然としたイメージは掴めたでしょうか。

ここからは、具体的な使用例を用いながらモジュールへの理解を深めていきます。

CSSモジュール

下のコードはCSSモジュールといい、Wikidotサイトで最も目にすることが多いモジュールのひとつです。

[[module css]]
///ここにCSSコード///
[[/module]]]

これは、「そのページにだけ任意のCSSコードを追加する」機能を呼び出すモジュールです。適当なSCP記事を5個開けば、多分どれかには使われている、くらいのシェアを誇ります。

前提として、Wikidotサイトには、「サイトテーマ」と呼ばれるサイト全体のデザインを決定するCSSコードがどのページにも読み込まれています。これはSCP財団であればSigma 9と呼ばれるものであり、このサイトならuk's Gray Theme 2.0と呼ばれる(私が作って名付けた)ものになります。

ただ、ここに含まれているコードでは満足できないときがあります。たとえば、

こんなボックスを使いたいとき、このボックスのデザインはサイトテーマには含まれていません。


こんなときはCSSモジュールの出番です。上のボックスは、
[[module css]]
.demo-cssmodule.demobox {
  width: 100%;
  padding: 1rem 0;
  text-align: center;
  border-radius: 2rem;
  border: dashed 1px dimgray;
}
[[/module]]
[[div class="demo-cssmodule demobox"]]
こんなボックスを使いたいとき、このボックスのデザインはサイトテーマには含まれていません。
[[/div]]

というコードで成り立っています。CSSについてはWikidot構文のいろいろで詳しくやりますので、そちらもチェックしてくださいね。

とにかく、「このページだけオリジナルのCSSを使いたい!」ときにこれを使うと、思い通りのCSSコードを実装することができるわけです。

詳しい動作や使い方のコツなどはCSSモジュール解説をチェックしてください。

ここまでが"CSSモジュール"の具体的な用例でした。

ListPagesモジュール

個人的"使いこなせると楽しいモジュール"不動のNo.1がこれです。

「特定の条件に合うページについて、指定した情報を、指定した並び順で並べる」機能を持つこのモジュールは、身近なところではSCP-JPのサンドボックス3のポータルや、SCP-JPの「評価の高い記事」などで目にすることがあります。
また、応用的な使い方としては「ページ遷移構文」などでもこれが活躍しています。

例として、試しにこのサイトの"moduleguide:"で始まるURLを持つページ1を一覧にしてみます。

また、「今居るページ」についての情報も出すことができます。

ページ名: Wikidotモジュール仕様書
作成者: ukwhatn / 作成日時: 28 Feb 2020 12:56
文字数: 3292

上の2つについて解説したいのですが、機能が多すぎるので詳しくはListPagesモジュール解説で確認してください。

各モジュールに関する詳しい解説

必修

ListPagesモジュール

- 同一サイト上のページを一覧にするモジュールです

ListDraftsモジュール

- 保存された下書きを一覧にするモジュールです

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License