MJML 4

もしも、MJML 3.3.Xについて探しているのであれば、このブランチをご確認ください。

| 翻訳されたドキュメント | 紹介 | インストール | 使い方 | 貢献 |

翻訳されたドキュメント

言語	ドキュメントのリンク
日本語	日本語ドキュメント

紹介

MJMLはMailjetによって作成されたマークアップ言語で、レスポンシブemailをコーディングする際に生じる負担を軽減する設計がされています。そのセマンティックな構文は言語を簡単完結にし、その豊富な標準コンポーネントライブラリはあなたの開発時間とコードベースを短縮するでしょう。MJMLのオープンソースエンジンは、あなたの書いたMJMLをレスポンシブHTMLに変換します。

インストール

MJMLはNPMと一緒にインストールすることで、NodeJSやCommand Line Interfaceから使用できます。これらについてわからないの場合は、使い方から他の方法をご確認ください。

npm install mjml

開発

MJMLに変更を加えたり、マージリクエストを提出するといった作業をする場合は、yarnをダウンロードして、インストールすることで簡単に開発できるようにしましょう。

git clone https://github.com/mjmlio/mjml.git && cd mjml
yarn
yarn build

yarn build:watchを実行することで、コードを書きながらパッケージを再構築することもできます。

使い方

オンライン

何もインストールしたくないですか？それならば、無料のオンラインエディターを使いましょう！

アプリケーションとプラグイン

MJMLにはツールやプラグインといったエコシステムが備わっています。以下をご確認ください:

The MJML App (MJMLが含まれています)
Visual Studio Code plugin (MJMLが含まれています)
Atom plugin (MJMLを別途インストールする必要があります)
Sublime Text plugin (MJMLを別途インストールする必要があります)

その他のツールについてはコミュニティページをご覧ください。

Command line interface

ファイルをコンパイルし、HTMLをoutput.htmlとして出力します。

mjml input.mjml -o output.html

任意の引数をCLIに渡すことができます。これらは複数合わせて渡すこともできます。

引数	説明	初期値
`mjml -m [input]`	v3のMJMLファイルをv4の構文にマイグレートする	NA
`mjml [input] -o [output]`	出力を[output]に書き込みます	NA
`mjml [input] -s`	出力を`stdout`に書き込みます	NA
`mjml -w [input]`	`[input]`（ファイルまたはフォルダー）の変更を監視します	NA
`mjml [input] --config.beautify`	出力を整えます(`true`または`false`)	true
`mjml [input] --config.minify`	出力をminify化します(`true`または`false`)	false

設定オプションの詳細についてはmjml-cli documentationをご覧ください。

Node.js

import mjml2html from 'mjml'

/*
  mjml文字列をコンパイルする
*/
const htmlOutput = mjml2html(`
  <mjml>
    <mj-body>
      <mj-section>
        <mj-column>
          <mj-text>
            Hello World!
          </mj-text>
        </mj-column>
      </mj-section>
    </mj-body>
  </mjml>
`, options)


/*
  生成されたレスポンシブHTMLとMJMLのエラーがあれば表示します
*/
console.log(htmlOutput)

任意でオブジェクト形式のオプションをmjml2html関数に渡すことができます:

オプション	型	説明	初期値
fonts	object	初期フォントをインポートしたHTMLを描画する	初期フォントについてはindex.jsをご覧ください。
keepComments	boolean	出力されるHTMLにコメントを残すオプション	true
ignoreIncludes	boolean	mj-includesを無視するオプション	false
beautify	boolean	出力されるHTMLを整えるオプション	false
minify	boolean	出力されるHTMLをminify化するオプション	false
validationLevel	string	validatorで利用する値: 'strict', 'soft', 'skip'	'soft'
filePath	string	mj-includesの相対パスに使われるファイルパス	'.'
preprocessors	array of functions	xmlのパース前に適用するプリプロセッサー。入力はjsonではなく、必ずxmlでなければなりません。関数の場合は必ず (xml: string) => string としなければなりません。	[]
juicePreserveTags	cssをインライン化する際にタグを保持する。詳しくはmjml-cli documentationをご覧ください。	NA
minifyOptions	htmlのminify化に関するオプション。詳しくはmjml-cli documentationをご覧ください。	NA
mjmlConfigPath	string	`.mjmlconfig`ファイルのパスもしくはディレクトリー(カスタムコンポーネントの場合)	`process.cwd()`
useMjmlConfigOptions	`.mjmlconfig`ファイルで`options`属性の使用を許可する	false

クライアントサイド (ブラウザー)

var mjml2html = require('mjml-browser')

/*
  mjml文字列をコンパイルする
*/
var htmlOutput = mjml2html(`
  <mjml>
    <mj-body>
      <mj-section>
        <mj-column>
          <mj-text>
            Hello World!
          </mj-text>
        </mj-column>
      </mj-section>
    </mj-body>
  </mjml>
`, options)


/*
  生成されたレスポンシブHTMLとMJMLのエラーがあれば表示します
*/
console.log(htmlOutput)

API

無料のMJML APIを利用することで、あなたのアプリケーションにMJMLを簡単に統合できます。 APIの詳細についてはここをご覧ください。

MJML Slack

MJMLはその素晴らしいコミュニティなくしてはここまで良いものにならなかったでしょう。コミュニティ Slackから、MJML'er達に会いにいきましょう。

貢献者

Maxime
Nicolas
Cedric
Loeck
Robin
Guillaume
Meriadec
Arnaud
HTeuMeuLeu
Emmanuel Payet
Matthieu
Rogier

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!