もしも、MJML 3.3.Xについて探しているのであれば、このブランチをご確認ください。
| 翻訳されたドキュメント | 紹介 | インストール | 使い方 | 貢献 |
| 言語 | ドキュメントのリンク |
|---|---|
| 日本語 | 日本語ドキュメント |
MJMLはMailjetによって作成されたマークアップ言語で、レスポンシブemailをコーディングする際に生じる負担を軽減する設計がされています。そのセマンティックな構文は言語を簡単完結にし、その豊富な標準コンポーネントライブラリはあなたの開発時間とコードベースを短縮するでしょう。MJMLのオープンソースエンジンは、あなたの書いたMJMLをレスポンシブHTMLに変換します。
MJMLはNPMと一緒にインストールすることで、NodeJSやCommand Line Interfaceから使用できます。これらについてわからないの場合は、使い方から他の方法をご確認ください。
npm install mjmlMJMLに変更を加えたり、マージリクエストを提出するといった作業をする場合は、yarnをダウンロードして、インストールすることで簡単に開発できるようにしましょう。
git clone https://github.com/mjmlio/mjml.git && cd mjml
yarn
yarn buildyarn build:watchを実行することで、コードを書きながらパッケージを再構築することもできます。
何もインストールしたくないですか？それならば、無料のオンラインエディターを使いましょう！
MJMLにはツールやプラグインといったエコシステムが備わっています。以下をご確認ください:
- The MJML App (MJMLが含まれています)
- Visual Studio Code plugin (MJMLが含まれています)
- Atom plugin (MJMLを別途インストールする必要があります)
- Sublime Text plugin (MJMLを別途インストールする必要があります)
その他のツールについてはコミュニティページをご覧ください。
ファイルをコンパイルし、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をご覧ください。
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)無料のMJML APIを利用することで、あなたのアプリケーションにMJMLを簡単に統合できます。 APIの詳細についてはここをご覧ください。
MJMLはその素晴らしいコミュニティなくしてはここまで良いものにならなかったでしょう。コミュニティ Slackから、MJML'er達に会いにいきましょう。