ContextQMD
Back to Mjml

MJML 4

readme-ja.md

5.1.08.7 KB
Original Source

MJML 4

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

<p style="text-align: center;" > <a href="https://mjml.io" target="_blank"> </a> </p> <p style="text-align: center;" > <a href="https://github.com/mjmlio/mjml/actions"> </a> <a href="https://www.codacy.com/app/gbadi/mjml"> </a> </p> <p style="text-align: center;" > | <b><a href="#translated-documentation">翻訳されたドキュメント</a></b> | <b><a href="#introduction">紹介</a></b> | <b><a href="#installation">インストール</a></b> | <b><a href="#usage">使い方</a></b> | <b><a href="#contribute">貢献</a></b> | </p>

翻訳されたドキュメント

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

紹介

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

<p style="text-align: center;" > <a href="https://mjml.io" target="_blank"> </a> </p>

インストール

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

bash
npm install mjml

開発

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

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

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

使い方

オンライン

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

<p style="text-align: center;" > <a href="https://mjml.io/try-it-live" target="_blank"></a> </p>

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

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

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

Command line interface

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

bash
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

javascript
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関数に渡すことができます:

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

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

javascript
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達に会いにいきましょう。

貢献者