Codex/ja

Codexはウィキメディアのためのデザインシステム' – 公式の解説サイトをご覧下さい

Codexソフトウェア・パッケージには、設計上の値を格納したデザイントークンや、JavaScript（Vue.js）あるいはCSSのみで作成されたUIコンポーネント、そしてアイコンの一式が入っています. 既定でこれらのツールは国際化とグローバルな利用、そしてウェブのアクセシビリティを幅広くサポートしています.

このページではMediaWikiにおいてどのようにCodexを利用するか説明します. また、より一般的なもご覧ください.



MediaWikiにおけるCodexパッケージ


現在のバージョン
Mediawikiは現在、Codexのバージョン 0.20.0を使用しています. 新しいバージョンは2週間ごとにリリースされます（でリリースのタイミングと全バージョンをご確認いただけます）.

パッケージ
以下のCodexパッケージがMediaWikiで利用できます：


 * 1)   &mdash; このパッケージは、Less変数とJSONをはじめとした様々な形式のデザイントークンを内包しています.
 * 2)   &mdash; このパッケージには、Vue 3やCSSのみで構築されたユーザーインターフェース（UI）のコンポーネントが含まれます.
 * 3)   &mdash; このパッケージにはアイコンのセットが入っています.

現在は4つ目のパッケージも存在することに留意してください &mdash;. これは パッケージの一部で、TypeaheadSearchコンポーネントとそのスタイルのみが含まれています. v0.20.0で非推奨となり、そのコードは パッケージに編入されました. パフォーマンスの懸念からベクター2022にこのコンポーネントのみを提供するために開発されたため、そこでのみ使われるべきで、コード分割が利用可能になるった際に削除することを目指しています.



MediaWikiにおけるCodexの一般的な利用
Check out the CodexExample extension for sample use of its components, design tokens, and icons in a MediaWiki extension.

The code examples on the Codex documentation web site all have two versions, labeled "NPM" and "MediaWiki". In MediaWiki core, skins and extensions, you have to use the "MediaWiki" versions of these examples; the "NPM" examples won't work, because some things work slightly differently in MediaWiki. Also read the sections on this page that go into more detail about how to use Codex design tokens, components, and icons in MediaWiki.

Using your local version of Codex in your local MediaWiki instance
Sometimes it can be helpful to use your version of Codex in your local MediaWiki instance, in order to test new features or changes in Codex that have not yet been released and included in MediaWiki core. We hope to eventually automate this, but until we have that capability, you can do this manually by copying the 'dist' files from the Codex packages into 'resources/lib' in core.


 * 1) Build your local Codex library by running   in the root directory of your Codex repository.
 * 2) Copy the parts of Codex that you need into your MediaWiki core repository. All of the examples below assume that you use a Unix-like system (e.g. Linux or macOS), your Codex repo and your core repo live in the same directory, and that you are working from the core directory. To copy:
 * 3) * package, which contains Codex components:
 * 4) * package, which contains Codex components:
 * 5) * package:
 * 6) * package:



Codexのデザイントークンの利用
デザイントークンは、私たちのシステムにおける最も小さなスタイルのパーツです. Codexデザイントークンについて公式ドキュメントで学び、利用可能なトークンのデモ（例えばカラートークンに関するデモ）を見てみましょう.



デザイントークンの利点
All visual aspects of the design system, such as colors, typography, spacing, and sizes are defined with tokens. They provide a central source of truth for these design elements, which can then be used across multiple platforms and applications, here MediaWiki skins and extensions. By using design tokens, designers and developers can ensure consistency in the look and feel of their digital products. For example, instead of hard-coding a specific color value in multiple places within a website or app, a design token for that color can be created and used throughout the system. In the final stage of tokens architecture, all Codex tokens should be used exclusively for style properties in MediaWiki core, skins and extensions. A change like a color replacement will be easily reflected everywhere.

Design tokens help streamline the design and development process, increase efficiency, and maintain visual consistency throughout a project.



MediaWikiと拡張機能でCodexデザイントークンを利用
ファイル内（または ファイルの ブロック内）で をインポートすることでデザイントークンを利用することができます. MediaWikiはCodexトークンを配布するために外装変数システムを使用します.

これらのトークン変数の値は外装によって異なります. 既定のCodexのテーマは現在MinervaNeueで使用されており、基本のフォントサイズを小さくした（以下の相対値のセクションも参照）既定テーマの修正版はベクター2022とレガシーベクターで使われています. 他のスキンについては現在mediawiki.skin.defaults.lessで定義されたフォールバック値を使用しており、これらはまだ開発段階です.

Codexのデザイントークンを使用したLessファイルの例：

Codexの解説サイトにある例は からトークンをインポートしていますが、これはMediaWikiで機能しないことに注意してください. 代わりに、あなたは を上記の例の様にインポートしなくてはなりません.



相対値を持つトークン
一般的に距離を表すトークンは の絶対値を使用しますが、一般的にサイズを表すトークンは の相対値を使用します. 相対値のトークンは、フォントサイズが外装の既定のフォントサイズと同じ箇所で使用されるようにデザインされています. 既定のフォントサイズは、MinervaNeueでは16pxで、ベクター2022やレガシーベクターでは14pxです. 相対値を持つトークンは、全スキンで同じピクセル値で出てくるように設定されています. 例えば、MinervaNeueでは は （16pxのフォントサイズにおいては20pxになる）ですが、ベクター2022とレガシーベクターでは （14pxのフォントサイズにおいて20pxになる）に設定されています.

殆どの場合には、スキンは正しいフォントサイズを設定するでしょう. しかし、もしも誤ったサイズ（多くは、20pxではなく22.857pxのようなきりがよくない数字）が算出される相対値の問題に直面したなら、親要素のフォントサイズがスキンのベースとなるフォントサイズと違っていないか確認してください.



CodexのVue 3コンポーネントの利用


さあ、はじめましょう
See the official docs to learn more about the available Vue 3 components, including demos and usage information (for example, see the Button component demo). Note that code samples from these demos will not work in MediaWiki — see there for more information.



MediaWikiと拡張機能でCodexコンポーネントを利用
Codex is included in MediaWiki, and is made available through the  ResourceLoader module. To use Codex components in your code, add  to your module's dependencies, then import the components you need as follows: You can then pass these components to the  option of your component, and use them in your component's template. Remember that, so you have to use  for CdxButton,   for CdxTextInput, etc.

例
Codexの、CdxButtonとCdxTextInputのコンポーネントを使用した単純なブロックフォームの例： モジュール定義の例（ フォーマット内）：



Codexのアイコンの利用


さあ、はじめましょう
Visit the official docs site for information about the icon system and a list of all icons.



MediaWikiと拡張機能でCodexアイコンを利用
For performance reasons, there is no  ResourceLoader module containing all the icons from Codex. Such a module would be large and wasteful, since most users of Codex only need a handful of the 200+ icons. Instead, ResourceLoader provides a way for modules to embed the icons they need, by defining a package file as follows: These icons can then be imported in  files as follows: For more information about how to use these icons once you've imported them, see the Codex documentation on icons.

例
Example of the same block form as above, but with an icon added:

Example of the ResourceLoader module definition: In this example,  is an init file that mounts the component with , as documented here.



CodexにおけるLessのmixinの利用
一部のCodexの機能はLessのmixinを使って実装されています. For example, the Link component is a Less mixin rather than a Vue component, and using icons in CSS-only components requires using a Less mixin (see also the documentation for using CSS-only components below).

Using Codex Less mixins in MediaWiki and extensions works very similarly to using design tokens: simply import, which makes all Codex mixins available, as well as the design tokens.

Example of a Less file using a mixin: Note that the examples on the Codex documentation site import the tokens from  and then the relevant mixin from  but this does not work in MediaWiki. Instead, you should import  as shown in the example above.



CSSのみのCodexコンポーネントの利用
一部のCodexコンポーネントにはJavaScriptなしで動作するCSSのみのバージョンがあります. You can check if a component has a CSS-only version by looking up the component in the Codex documentation, and seeing if there is a section named "CSS-only version". For example, the Button component has such a section. This documentation section contains examples of what the HTML for that component looks like.

To use a CSS-only component, do the following:


 * Output the HTML for the component as shown in the component's documentation
 * Load the  module, using
 * Some components require loading additional styles through Less mixins. If you need this, create your own ResourceLoader module with the required styles, and load it with  as well



Complex example
内： 内： 内：

Migrating from MediaWiki UI to Codex
When replacing deprecated MediaWiki UI with Codex, it is recommended to use  package's CSS-only components or in some cases   tokens and Less mixins as replacement.

Please see the Migrating from MediaWiki UI article for detailed information.

Codex release cadence
A new version of Codex is released every other Tuesday. On the day the new release is created, we also submit a patch to MediaWiki core to use that new release. Since we do this on Tuesdays, the update to core will be deployed the following week (the next time the deployment train runs). You can view all Codex tags on Gerrit or a tag timeline on GitHub. For more information about what is contained in each release, see the changelog.

See also: Design Systems Team/Release Timeline

Where to find the latest version of Codex
The official docs site is now based on the latest release of Codex (which is the one in MediaWiki core).