SF Symbols をカスタマイズしてオリジナルのGlyphをつくりたい（失敗）

[前回](https://qiita.com/OkonomiyakiYuki/items/76414d79235307322c8b)の続き

####tldr;
手元ではAffinity DesignerではBooleanの穴を開けたままprepareすることができなかった（バージョンのかなり古いSketch.appでは通常の通りの作業であっさり成功）。

それだけだとなんなので、一応こんな風に見えるというスクリーンショットを貼っておきます。

![sf_symbols_14_final_result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32738/333f46f9-a2da-ba0d-4c01-dbf826c44da0.png)

NSTextAttachmentのイニシャライザでまだimageがとれないようなので、UIImageViewとUILabelを並べています。





消えたBoolean
---

なぜBooleanで開けたはずの穴が、SF Symbols.appでのprepare後に消えてしまったのか？

原因究明のために実験をしていきます。まずは別のSymbolをエキスポートして他はまったく手付かずの状態でBooleanを使って穴だけあけ、prepareしてみます。

![sf_symbols_10_wrench_hole.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32738/e665b01f-67e6-1606-ca51-e53f031f8f6b.png)

ちゃんと空いてます。前回失敗したものはオリジナルファイルのhammerをトレースした持ち手をつかったので、どうやらその編集過程に問題がありそうです。

そこで今度は、Affinity Designer のEllipse Toolを2度使って丸をふたつつくり、それにBooleanのsubtractだけを当ててみました。エキスポートしたsvgがこれ

![sf_symbols_11_ellipse_svg.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32738/c2132787-cb37-58e4-cc4c-67e039c02478.png)

ここまでは期待通り。しかしこれをprepareすると・・・

![sf_symbols_12_ellipse_prepared.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32738/48976684-70db-f5a5-31f1-be9dd66ef9bc.png)


やっぱり消えます！ うーむ。ちなみにこのスクリーンショットはそれぞれのsvgファイルをQuickLookしたものなんですが、prepare後のものはなぜかズームされています。不思議。Regular-Mを見るのにいちいちスクロールさせないといけなくて、結構めんどうなんですが、これにもなにか深遠な理由があるんでしょうか。


原因を探る
---

なにがいけないんでしょうか？ Affinity Designerの画面をじっとみつつ作業を再現していったところ、あることに気がつきました。デフォルトで画面右中央から下にかけて位置するLayersペインに表示されている属性（らしきもの）が`Subtract`の前と後で変わっているのです。

最初は`Ellipse`という形をしめしていたものが`Curves`へ。下にならぶ他の「お手本」がすべて`Curves`になっていることから、なにが起こっているのか、用語の整理のためにすこし調べてみることに。

####Affinity Designer用語

#### Curves と Shape

まずは`Curves`とはなにかを調べます。[affinity.help](https://affinity.help/designer/en-US.lproj/index.html)によるとshapeとは

> The shapes are fully geometrically correct, customizable, and can even be converted to curves for additional editing.

逆にいえばshapeは`Layer > Convert to Curves`をしないことにはeditingができない、ということになります。なるほどSubtractというEditingをするためにはCurvesへの変換が必要なんだろうと推測できます。

ちなみにこれはSketch.appにはなかった分類で、正直にいってうまくのみこめません。そこでさらに`Convert to Curves`についてしらべてみると

[Support Forumでモデレータの以下のような記述](https://forum.affinity.serif.com/index.php?/topic/49805-expand-stroke-vs-convert-to-curves/)をみつけました。

> parametric objects (like geometric shapes) into "regular" shapes (paths)

`geometric shapes`はさっきの`Ellipse`とかの、テンプレートで作られた「shape」のことだとして、それに`Convert to Curves`をすると、“レギュラー”なshapeになる？ `paths`と書いてあるのはおそらく`open path`の対比としての`paths`なんじゃないかと思うんですが、shapeがshapeになるというのは・・・なかなか理解がむずかしいです。

#### Compound
あとCompoundというものもあって、これはBooleanを「可逆的に」適用することができるもので、Booleanのボタンを押す前にoptionボタンを押すことで発動させることができます。内部的な仕組みともかく外形的にはSketch.appではこちらがデフォルトだし、あとあとウェイトを足す時にも有利だろうとこれも試したんですが、Prepareの段階ではねられてしまいました。だから下の「いろいろな組み合わせ」にはCompoundは含まれていません。

しかしともかくAffinity Designerのshapeにはふたつのステートがあることがわかったので、`"regular" shapes`の使い方がまちがっていたのかもしれないと思い、いろんな組み合わせでためしてみました。

#### いろいろな組み合わせでExportを試す

具体的には土台となる被BooleanオブジェクトとBooleanの型オブジェクトにsubtract前から`Convert to Curves`を当てたり、他のところでsvgへのエキスポートで問題がある時にためしてみればいいとされていた`Expand Stroke`を当てたりといったことです。結論からいうとすべて失敗しました。しかしかなりバージョンの古いSketch.appでためすと、通常のプロシージャで一発で成功。Xcodeでもきちんと表示されました（ここで「QuickLookではprepareに失敗しているように見えてるけど、Xcodeにインポートしたら案外うまくいってるかも」とか楽観的に考えてAffinity Designer版もよみこませようとしたらXcodeがクラッシュします。再現度100％）

![sf_symbols_13_xcode_import_succeed.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32738/54b34728-c56a-c6c8-d832-3c814c1abc1e.png)


結論
----
SF Symbol.appの問題なのか、はたまたAffinity Designerの問題なのかは現状ではわかりませんでしたが、いずれにしてもSF Symbolsの本リリースまでまだまだ時間があるので、対応がなされることを期待しましょう。ウェイトのバリエーションづくりとか試してみたかったんですが、SF Symbolsに関してはベータが更新され、さらに情報がでるのを待つことにします。疲れました。