More than 3 years have passed since last update.

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

Last updated at 2021-01-08Posted at 2021-01-08

はじめに

タムラカイ氏が作った感情表現記法の「エモグラフィ®️」を知って、報告資料などに張り付けて使ってみたいと思い作りました。
会議に感情を残すために生まれたエモグラフィ

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

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

エモグラフィのパーツ

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

SVGファイルの作成と確認には、Visual Studio Codeと拡張機能"SVG"を使用しました。
拡張機能 SVG

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>

確認用では、ア、キュッ、さがりを選びました。

パーツの組み合わせ

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

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

InkScape
コマンドラインでの利用

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

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を消すと今度はパーツが配置されないので無視しています。どなたか正しい対処方法をご存じであれば教えてください。

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"