PowerPointに張り付けられるエモグラフィの作り方

# はじめに
タムラカイ氏が作った感情表現記法の「エモグラフィ®️」を知って、報告資料などに張り付けて使ってみたいと思い作りました。
[会議に感情を残すために生まれたエモグラフィ](https://www.kaigishitu.com/meeting-hacks/detail/id=37260)

本記事では、以下を説明します。

* svgで、口、目、眉のパーツを作る
* PowerShellで、すべてのパーツの組み合わせsvgを作る
* InkScapeでsvgからemfに変換する

# エモグラフィのパーツ

* svgで、口、目、眉のパーツを作る

SVGファイルの作成と確認には、Visual Studio Codeと拡張機能"SVG"を使用しました。
[拡張機能 SVG](https://marketplace.visualstudio.com/items?itemName=jock.svg)

```html:contents.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="3 3 104 104">
<defs>
    <!--顔-->
    <circle id="c" r="50" />
    <!--口-->
    <path   id="a"        d="M 0 10 L 25 10 A 10 10 0 1 1 -25 10 Z" fill="none" stroke="black"/>
    <path   id="i"        d="M -30 20 L 30 20" fill="none" stroke="black"/>
    <path   id="u"        d="M 0 10 A 10 6 20 1 00 26 A 10 6 -10 0 00 40" fill="none" stroke="black"/>
    <path   id="e"        d="M 0 10 L 10 10 L 20 30 L -20 30 L -10 10 Z" fill="none" stroke="black"/>
    <circle id="o"        r="10" cx="0" cy="25" fill="none" stroke="black"/>
    <!--目-->
    <circle id="eyeLK"    r="5" cx="-20" cy="-10" fill="black" stroke="black"/>
    <circle id="eyeRK"    r="5" cx="20" cy="-10" fill="black" stroke="black"/>
    <circle id="eyeLW"    r="5" cx="-20" cy="-10" fill="none" stroke="black"/>
    <circle id="eyeRW"    r="5" cx="20" cy="-10" fill="none" stroke="black"/>
    <path   id="eyeLS"    d="M -30 -3 A 10 10 0 1 1 -10 -3" fill="none" stroke="black"/>
    <path   id="eyeRS"    d="M 30 -3 A 10 10 0 1 0 10 -3" fill="none" stroke="black"/>
    <path   id="eyeLC"    d="M -30 -13 A 10 10 0 0 0 -10 -13" fill="none" stroke="black"/>
    <path   id="eyeRC"    d="M 30 -13 A 10 10 0 0 1 10 -13" fill="none" stroke="black"/>
    <path   id="eyeLG"    d="M -30 -15 L -10 -5 L -30 -5 L -10 -5 L -30 5" fill="none" stroke="black"/>
    <path   id="eyeRG"    d="M 30 -15 L 10 -5 L 30 -5 L 10 -5 L 30 5" fill="none" stroke="black"/>
    <!--眉毛-->
    <path id="eyebrowLFlat"  d="M -30 -23 L -10 -23" fill="none" stroke="black"/>
    <path id="eyebrowRFlat"  d="M 30 -23 L 10 -23" fill="none" stroke="black"/>
    <path id="eyebrowLSmile" d="M -30 -23 A 10 10 0 1 1 -10 -23" fill="none" stroke="black"/>
    <path id="eyebrowRSmile" d="M 30 -23 A 10 10 0 1 0 10 -23" fill="none" stroke="black"/>
    <path id="eyebrowLUp"    d="M -30 -28 L -10 -20" fill="none" stroke="black"/>
    <path id="eyebrowRUp"    d="M 30 -28 L 10 -20" fill="none" stroke="black"/>
    <path id="eyebrowLDown"  d="M -30 -20 L -10 -28" fill="none" stroke="black"/>
    <path id="eyebrowRDown"  d="M 30 -20 L 10 -28" fill="none" stroke="black"/>
</defs>
    <!--確認用-->
<use xlink:href="#c" x="55" y="55" stroke="black" stroke-width="3" fill="none" />
<use id="mouth" xlink:href="#a" x="55" y="55" stroke-width="3" />
<g>
    <use id="eyebrowL" xlink:href="#eyebrowLDown" x="55" y="55" stroke-width="3" />
    <use id="eyebrowR" xlink:href="#eyebrowRDown" x="55" y="55" stroke-width="3" />
</g>
<g>
    <use id="eyeL" xlink:href="#eyeLG" x="55" y="55" stroke-width="3" />
    <use id="eyeR" xlink:href="#eyeRG" x="55" y="55" stroke-width="3" />
</g>
</svg>
```

確認用では、ア、キュッ、さがりを選びました。
![WS000022.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14456/96348ca4-42c2-c467-7843-536970eabf99.jpeg)

# パーツの組み合わせ

* PowerShellで、すべてのパーツの組み合わせsvgを作る
* InkScapeでsvgからemfに変換する

ここでは、顔の各パーツの組み合わせの作成と変換を一気にやってしまいます。変換にはinkScapeを使用するので、先にInkScapeのインストールと環境変数への登録を実施してください。

[InkScape](https://inkscape.org/ja/)
[コマンドラインでの利用](https://inkscape.paix.jp/manual/overview/cmdline/)

コマンドラインで実行できるようになったら、PowerShellで組み合わせの作成とInkScapeを使用したemfへの変換を実行します。
svg2emf.ps1をcontents.svgと同じフォルダに作成して実行してください。

```powershell:svg2emf.ps1
# 口
$mouth = @("a","i","u","e","o")
# 目
$eye = @("K","W","S","C","G")
# 眉
$brow = @("Flat","Smile","Up","Down")

foreach($m in $mouth){
    foreach($e in $eye){
        foreach($b in $brow){

            $svg = 
@"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="3 3 104 104">
<use xlink:href="contents.svg#c" x="55" y="55" stroke="black" stroke-width="3" fill="none" />
<use id="mouth" xlink:href="contents.svg#$m" x="55" y="55" stroke-width="3" />
<g>
    <use id="blowL" xlink:href="contents.svg#eyebrowL$b" x="55" y="55" stroke-width="3" />
    <use id="blowR" xlink:href="contents.svg#eyebrowR$b" x="55" y="55" stroke-width="3" />
</g>
<g>
    <use id="eyeL" xlink:href="contents.svg#eyeL$e" x="55" y="55" stroke-width="3" />
    <use id="eyeR" xlink:href="contents.svg#eyeR$e" x="55" y="55" stroke-width="3" />
</g>
</svg>
"@
            $path = ".\$m$e$b.svg"
            Set-Content $path $svg
            
            inkscape ".\$path" --export-type=emf ".\$path.emf"
        }
    }
}
```

emfファイルは期待通り生成されるのですが、実行時にInkScapeから以下のエラーが発生します。xlink:hrefのNamespaceがダメなのかとxlinkを消すと今度はパーツが配置されないので無視しています。どなたか正しい対処方法をご存じであれば教えてください。

```powershell
inkscape : .\emography\aKFlat.svg:2: namespace error : Namespace prefix xlink for href on use is not defined
発生場所 .\emography\svg2emf.ps1:27 文字:13
+             inkscape ".\$path" --export-type=emf ".\$path.emf"
+             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : NotSpecified: (.\Docu... is not defined:String) [], RemoteException
    + FullyQualifiedErrorId : NativeCommandError
 
href="contents.svg#c" x="55" y="55" stroke="black" stroke-width="3" fill="none" 
```

# 利用方法

生成されたemfファイルを、PowerPointなどoffice製品にドラッグドロップで利用できます。

![WS000023.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14456/daa3b846-2e99-ec89-122a-ee8f13fa6792.jpeg)
Explorer から PowerPointへドラッグ&ドロップの図

口のパーツごとにまとめてみました。

![WS000024.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14456/e6516fad-31b2-489b-b5b7-a43af9c0be76.jpeg)
↑あ

![WS000025.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14456/7393c392-f2cc-7cf1-0aba-68612750c830.jpeg)
↑い

![WS000026.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14456/5df261a3-b1de-e222-33a2-b038d97d6372.jpeg)
↑う

![WS000027.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14456/834dd262-60b8-8887-7b86-998839b9289e.jpeg)
↑え

![WS000028.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14456/18e8620d-0833-a842-77f6-013810a39d17.jpeg)
↑お