2016-07-19

Umbraco で Macro を使う

Umbraco

概要

Macro は Razor, XSLT, usercontrol で書くことができる。（Umbraco 7 では、usercontrol はあまり使われないと思われる。）

Parameter も設定可能。

Macro の入力用ヘルパーあり(Rich Text Editor にも付属)。

用途

ユーザーが任意の場所に、動的な要素を埋め込みたい時に使用する。

例えば、本文中にとある手順について書くとする。この手順は、あちこちの記事で表示する可能性があり、機能がリリースされるたびに更新が必要となる。

例：Azure Websites と ASP.NET を使用するの "このチュートリアルを完了するには、Azure アカウントが必要です。"　の部分。

Macro を使用しない場合は、リリースの度に複数の記事を修正しなければいけない。Razor で @Html.Partial("hoge") と書きたいところだが、ユーザーが管理画面の入力欄で任意の場所に配置できるようにしたい。そこで Macro を使う。

手順

Partial View Macro Files を作成する。
- Back Office > Developer > Partial View Macro Files

このとき、 .cshtml は @inherits Umbraco.Web.Macros.PartialViewMacroPage と、継承する。

Macro を作成する。
- Back Office > Deceloper > Macros
Macro を配置する。方法は 2 つ。

◇方法１

ユーザーが Macro を配置したい場所にて以下のコードを書く。パラメータがある場合は、属性とその値も追加する。

<div><?UMBRACO_MACRO macroAlias="{ Macro の 名前}}" /></div>

開発者は、.cshtml 側で以下のコードを記述し、Macro をレンダリングさせる。

string afterRender = umbraco.library.RenderMacroContent(string Text, int PageId（Model.Content.Id）等);

◇方法２

入力フィールドがリッチテキストの場合は、ユーザーが入力用ヘルパーから配置する。

Bug

Partial View Macro Files が文字化けする場合がある。
- 改行文字の混合が原因？
- Visual Studio から、ファイル＞名前を付けて　...　を保存＞エンコード付きで保存＞改行文字　でファイルを保存し直すと直る。
- Back Office から編集して保存すると文字化けする可能性大。

2016-07-19

Web ページに MathJax を使って MathML を表示する

　Reference

MathJax
- Doc
ブラウザが MathML に対応しているか確認する
- ここでレンダリングモードを「MathML」にする。

使い方 MathML

ここでは、MathJax を使った MathML を記述する方法について書きます。LaTex, Tex 等の情報はありません。

参考：Getting Started

load

head 内に、下記のように script を記述します。 ?configのクエリ文字列については?config の設定についてを参照してください。

<script 
    type="text/javascript"
    src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

inline & block

インライン表示：<math display="inline">
ブロック表示：<math display="block">
デフォルトはインライン表示
- <math> はインライン表示

設定オプション Core

参照:The Core Configuration Options

mml2jax

MathJax のページ内に記述された MathML を認識するコンポーネントはmml2jaxと呼ばれます。mml2jaxはいくつかの設定オプションがあります。

詳細についてはmml2jax configuration optionsを参照してください。MathJax　の　MathML　のサポートの詳細についてはMathMLのページを参照してください。

ここでは、mml2jaxの設定オプションについて記述します。

◇init

mml2jax の設定オプションを追加するには、以下のようにMathJax.Hub.config()にmml2jaxセクションを追加します。

MathJax.Hub.Config({
    mml2jax: {
        preview: "mathml"
    }
});

以下は、MathJax の設定を含めた script の記述例です。

<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
        mml2jax: {
            preview: "mathml"
        }
    });
</script>
<script type="text/javascript"
        src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

◇preview: "mathml"

preview: "mathml" という設定により MathJax が MathML のレンダリング完了までに Html ページに挿入するものを指定できます。

"mathml","alttext","altimg","none" デフォルト値はmathmlです。

"mathml"
- レンダリング中にmathタグをそのまま保持します。
"alttext"
- レンダリング中に<math>要素のalttext属性の値が表示されます。例：<math alttext="表示中">　表示中というテキストが表示されるます。
"altimg"
- レンダリング中に<math>要素のaltimg*属性の値で指定された URL の画像が表示されます。例：<math alttext="../image/hoge.jpg">
"none"
- プレビューが挿入されるのを防ぎます。

この他、 HTML スニペットを使用することもできます。詳細は description of HTML snippetsを参照してください。

Examples:

preview: ["[math]"]

レンダリング完了まで "[math]" というテキストが表示されます。

preview: [["img",{src: "/images/mypic.jpg"}]],

レンダリング完了まで指定した URL の画像が表示されます。

Word からコピペする場合

Word から数式をコピーして貼り付ける場合、html タグを以下の様にする。

<html lang="ja" xmlns:mml="http://www.w3.org/1998/Math/MathML" xmlns:m="http://schemas.openxmlformats.org/officeDocument/2006/math">

Word から数式をコピーした場合、以下の様な MathML がコピーできる

<mml:math xmlns:mml="http://www.w3.org/1998/Math/MathML" xmlns:m="http://schemas.openxmlformats.org/officeDocument/2006/math"><mml:mfrac><mml:mrow><mml:mo>-</mml:mo><mml:mi mathvariant="normal">b</mml:mi><mml:mo>±</mml:mo><mml:msqrt><mml:msup><mml:mrow><mml:mi mathvariant="normal">b</mml:mi></mml:mrow><mml:mrow><mml:mn>2</mml:mn></mml:mrow></mml:msup><mml:mo>-</mml:mo><mml:mn>4</mml:mn><mml:mi mathvariant="normal">a</mml:mi><mml:mi mathvariant="normal">c</mml:mi></mml:msqrt></mml:mrow><mml:mrow><mml:mn>2</mml:mn><mml:mi mathvariant="normal">a</mml:mi></mml:mrow></mml:mfrac></mml:math>

miso_soup3 Blog

主に ASP.NET 関連について書いています。