VS スライドアップロードサービス
6K Views
February 26, 23
スライド概要
2023/02/26 ゆるい勉強会 @ CoCoDe記念 で発表した資料
tomio2480 です
関連スライド
各ページのテキスト
VS スライドアップロード サービス 終わりなき綺麗に処理されるフォントを探す旅 2023/02/26 ゆるい勉強会 / Shota Nishihara @tomio2480
$ whoami ❖ Shota Nishihara @tomio2480 ❖ サイボウズ株式会社 開発本部 コネクト支援チーム ✓ ✓ ✓ ✓ 情報処理学会 会誌編集委員 高校教諭(電)→セキュリティ人材育成→現職+専門学校講師(AI:Python基礎)→今 開発本部，運用本部，サイボウズ・ラボの人の発信，IT コミュニティ出没 流氷交差点よろしく https://soundcloud.com/cybozutech/sets/drifticecrossing ❖ 北海道旭川市からフルリモート ✓ 旭川 18 年→北見 4 年→富良野 5 年→(東京)小平 2 年半→今 ❖ ゆるい勉強会(旭川)，FuraIT(富良野)，Co-KoNPIle(小平) に大体いる 2
お得情報 ❖ 情報処理学会 ジュニア会員 ✓ https://www.ipsj.or.jp/member/junior.html ✓ 高専は専攻科 1 年まで年会費無料 ❖ Cybozu Tech ✓ https://tech.cybozu.io/ ✓ サイボウズという会社の公開されている技術の話が見える 3
スライドアップロードサービス ❖ SlideShare ✓ https://www.slideshare.net/ ❖ SpeakerDeck ✓ https://speakerdeck.com/ ❖ Docswell ✓ https://www.docswell.com/ 君のスライドは何も考えずにこの全てのサービスにアップロードしても 無事でいられるかな？ 4
めちゃくちゃになったので先にまとめ 5
こういうことをした ❖ SpeakerDeck にアップしたスライドの様子がおかしい ✓ 字に謎の縁取りが出たり，文字起こしが変になったりした ❖ 疑ったのはフォントの形式，Web エディタによる編集，OS ✓ OTF/TTF，Web/Local，Win/Mac ❖ 深く潜り込んで CMap/cmap あたりの勉強が必要かと思われた ✓ 結果，対処する方法が見つかったので深追いはせず ✓ たぶん本当ならしておいた方がいい ❖ どの環境でも完璧 PDF を作る方法までは編み出せなかった ✓ つまりこの旅はまだ続く...... 6
実験 7
前提 ❖ そもそも疑ったのは .otf と .ttf のフォントによる差 ✓ かつて SlideShare で文字の見た目がおかしくなることを確認し ていたため，ここから疑ってかかった 8
たのしいスライド実験 ❖ 今回の実験（あなたもやってください） ✓ PowerPoint で作成した資料を PDF エクスポートします ■ ただし資料のスライドは複数パターン用意していただきます ■ OTF と TTF のフォント，レギュラーとボールドの 2 書体 ，WindowsOS と macOS を使用してパターンは作られます ✓ この PDF を各サービスにアップロードします ❖ 無事の定義 ✓ スライド作成時同様に綺麗な見た目の状態でアップ完了 ✓ スライド中の文字が正しく文字起こしされてアップ完了 9
自分の実験環境 - Mac ❖ Mac ✓ macOS Monterey 12.6 ✓ MacBook Pro (13-inch, M1, 2020) ❖ PowerPoint ✓ PowerPoint for Mac ✓ 16.70 ❖ Google Chrome ✓ 109.0.5414.119（Official Build） （arm64） 10
スライドの作り方 ❖ 新規作成の画面で出てきたタイトルスライドを利用 ✓ OTF のものをつくって，コピー，TTF に書き換え ✓ それぞれ 1 枚つくったものをファイルを跨いでコピー ✓ 必要な組み合わせをそれで作る ❖ 使用するフォント ✓ OTF : Noto Sans CJK JP ✓ TTF : 筑紫A丸ゴシック ❖ PowerPoint のエクスポート機能で PDF を作る 11
実験パターン サービス名 PowerPoint 動作 OS SlideShare Windows SlideShare Mac SpeakerDeck Windows SpeakerDeck Mac docswell Windows docswell Mac otf→ttf→otf ttf→otf→ttf otf→otf ttf→ttf 12
先に言っておくと ❖ 実験はちゃんとできていなかった ✓ Noto Sans CJK JP を入れたつもりになっていた ✓ Noto Sans CJK JP Bold しか入ってなかった ✓ Noto Sans CJK JP Regluar が入っていなかったため諸々が起こる ❖ 筑紫A丸ゴシックは FOT-筑紫A丸ゴシック Std ではない ✓ 筑紫A丸ゴシック レギュラー = TsukuARdGothic-Regluar ✓ FOT-筑紫A丸ゴシック レギュラー = TsukuARdGothic Std R 13
SlideShare - 複数同時アップロードうまくいった 14
SlideShare - Mac - otf→ttf→otf ❖ 全て無事 15
SlideShare - Mac - ttf→otf→ttf ❖ パワポ上では無事だけど，PDF がズレる ✓ PDF がズレるのでアップロードしたものもズレてる ❖ 文字起こしは無事 16
SlideShare - Mac - otf→otf ❖ 1 枚目と 2 枚目のズレ → パワポ上と PDF 上でズレるところが違う ✓ パワポ上では Noto… の方が変なズレを起こす ✓ 一方 PDF では OTF… の方が変なズレを起こす ❖ 文字起こしは無事 17
SlideShare - Mac - ttf→ttf ❖ 全て無事 ✓ パワポ上だけ変なズレを起こす ✓ PDF 無事，アップロードしても無事 18
SpeakerDeck - アップロードは一個ずつ 19
SpeakerDeck - Mac - otf→ttf→otf ❖ 見た目は全て無事 ❖ 文字起こしが崩壊する ✓ TTF の筑紫A丸ゴシック側が何かに飲み込まれている 20
SpeakerDeck - Mac - ttf→otf→ttf ❖ パワポ上では無事だけど，PDF がズレる ✓ PDF がズレるのでアップロードしたものもズレてる ❖ 文字起こしも崩壊する ✓ TTF の筑紫A丸ゴシックが飲み込まれている 21
SpeakerDeck - Mac - otf→otf ❖ 1 枚目と 2 枚目のズレ → パワポ上と PDF 上でズレるところが違う ✓ パワポ上では Noto… の方が変なズレを起こす ✓ 一方 PDF では OTF… の方が変なズレを起こす ❖ 文字起こしは無事 22
SpeakerDeck - Mac - ttf→ttf ❖ 見た目は全て無事 ❖ 文字起こしが崩壊する ✓ TTF の筑紫A丸ゴシック側が何かに飲み込まれている 23
Docswell - 複数同時アップロードはうまくいかず 24
Docswell - Mac - otf→ttf→otf ❖ 全て無事 ❖ パワポでは不思議現象 ✓ 1 枚目をコピーして 3 枚目を作ったのに表示がずれる ✓ 出力した PDF は無事，編集画面だけ変 ■ このデータから ttf を抜いたデータで otf→oft を作ると 出力 PDF 2 枚目の表示もズレてしまう（otf→otf が悪い？ ✓ フォント情報に変化はない 25
Docswell - Mac - ttf→otf→ttf ❖ 編集画面ではズレがないのに PDF はズレる ✓ 結果としてアップロードされるのもズレたもの ❖ 文字起こしは無事 26
Docswell - Mac - otf→otf ❖ 文字起こしは無事 ❖ フォントが変 ✓ PDF は フォントは無事 ✓ 2 枚目も同じ細身になる ✓ しかしパワポで現れるズレは消える ❖ パワポでの不思議現象 ✓ 1 枚目をコピーして 2 枚目を作っても表示がずれる ✓ 出力した PDF も変 ✓ フォント情報に変化はない 27
Docswell - Mac - ttf→ttf ❖ 全て無事 ❖ パワポ編集画面でだけ謎のズレが発生 ✓ PDF には影響がない ✓ アップロードされるものも影響がない 28
まとめ (Windows は？) 29
まとめではない (Windows は？) 30
謎のズレや表示差はフォント指定のせいっぽい ❖ 主要なフォントの多くは TTF なのに TTF がおかしくなる？ ✓ メイリオ，ヒラギノ，BIZ UD …… ✓ OTF とか TTF 以前の問題だった ✓ 本当にあなたの環境にそのフォント入ってますか？ ❖ PDF の中にあるフォントがどうなっているかは調べたか？ ✓ CMap/cmap というものの存在を忘れていると謎は深まるばかり ✓ 文字の見た目と文字コードを変換するためのテーブル 31
拡張子だけで判断してたのが甘かった ❖ .ttf と .otf くらいで済む世界じゃなかった ✓ Noto Sans CJK JP は .otf のものをインストール ✓ 筑紫A丸ゴシック は .ttf 32
本当にフォント入ってるか問題 33
PowerPoint に表示されていても存在しない ❖ 選べるのに無い（選べてない） ✓ Noto Sans CJK JP Bold のみをインストールする ✓ PowerPoint には Noto Sans CJK JP と表示されて使える ■ 見た目は Bold だけど，さらに Bold にもできる ● [B] ボタンを押したり，Ctrl+B とか ✓ しかし Noto Sans CJK JP という表示は Regluar を指している ■ PDF には Bold が埋め込まれているように見える ■ が，何かの情報が足りないらしく PDF はズレる 34
PowerPoint で選べてフォントブックにない ❖ 選べるのに無い（これは Adobe Fonts 側にあるパターン） 35
PDF の埋め込みフォント問題 36
pdffonts で確かめてみる ❖ brew install xpdf ❖ pdffonts ファイル名 37
Syntax error を解消して再度チェック ❖ https://qiita.com/kinzi0828/items/d7c53b6b09624c3b586d ❖ 筑紫A丸ゴシックの X すら消えてしまった ✓ PDF を吐き出し直している訳でもないのに 38
再度新しい PDF をエクスポート→アップ ❖ ダメです ✓ YuGothic は紛れ込んだだけ 39
CID Type 0C と uni “no” がセットになるとダメ？ ❖ TrueType とか OpenType って出てくれない ✓ とりあえず CID フォントの歴史はわかった ✓ https://www.morisawa.co.jp/culture/dictionary/1920 ❖ TrueType は CID Type 2 を使わないといけない？ ✓ https://aznote.jakou.com/prog/pdf/17_type0.html ✓ とすると，OpenType の方が文字化けしないのもわかりそう？ 40
そういえば Adobe Acrobat でも確認できたな ❖ Type 1 (CID) とか書かれてるし，新概念 Identity-H 登場 41
Identity-H ❖ 横書きのときは Identity-H ，縦書きのときは Identity-V ✓ Identity- というのは日本語専用ではなさそう ✓ https://aznote.jakou.com/prog/pdf/17_type0.html ✓ このエンコーディングのときは Unicode のコード値を取得するた めの情報を別に指定してやらないといけなさそう ■ これが失敗するとはちゃめちゃなグリフが登場するっぽい？ ❖ この素晴らしいサイトで書かれているのは CMap 情報っぽい ✓ TrueType の問題を扱っているので cmap 情報を見るべき？ ✓ https://www.morisawa.co.jp/culture/dictionary/1921 42
Mac を諦め Windows でフォントを整え再挑戦 ❖ 文字起こし出た ✓ 他の人に頼んで出してもらった PDF で正確には違うものだった ✓ 正確には “筑紫A丸フォント” ではなかった ✓ “FOT-筑紫A丸ゴシック Std” を埋め込んだ PDF だった ✓ これを pdffonts にて確認すると uni も yes になってた ✓ ただし Mac で “FOT-筑紫A丸ゴシック Std” を埋め込んだ PDF を 作っても uni は no のままだった（つまり文字起こしは失敗する たぶん uni が no なのが悪くて CID Type 0C とかは関係ないんじゃないか 43
太字は太字フォントじゃない説 44
調査の発端となった太字謎縁取り ❖ Transcript 以外に SpeakerDeck で現れた現象 ✓ 今回同じフォントを利用したが発現しなかった ✓ もしかすると Web 版の PowerPoint で作ったものだと発現する？ ✓ Noto Sans CJK JP と筑紫A丸ゴシックの CMap 問題は絡まない？ 45
疑ったのは Web 上のエディタ ❖ Google Slides で作ったものがおかしいというブログを見つけた ✓ https://zenn.dev/unsoluble_sugar/articles/cade53a073157df0b687 ✓ 今回問題になったスライドもどこかのタイミングにてブラウザ 上で動く PowerPoint を使って編集していた可能性が高かった ✓ が，結果として Web エディタの検証はしていない 46
ぶつかった太字表現方法の多様性 ❖ Ctrl+b とか [B] ボタンの挙動 ✓ 1. タイプライターでの太字表現的なもの ■ 同じ文字を少しずらして重ねて表示 ✓ 2. 単純に文字の縁取りを太くする ✓ 3. フォントファミリーの Bold のものに切り替える 47
https://www.ddc.co.jp/dtp/archives/ 20050711/161159.html 48
つかれた 49
今わかってるのはここまでこれで許して Windows 環境の PowerPoint を使って， 使いたいフォントの Regluar と使いたいスタイルをインストールし， 使いたいフォントとスタイルを全て使ったテストスライドを， ローカルインストールされているスライド作成ソフトを用い作り， pdffonts にかけて以下を確認してからスライドを作りはじめて， ✓ emb が yes，sub が yes，uni が yes ❖ 太字を使用したい場合は Ctrl+b を使わずにフォント名のプルダウン から選んで文字を装飾しよう ここまでやればバグらないんじゃないか ❖ ❖ ❖ ❖ ❖ 50
スライドアップロードサービスは大変 ❖ PDF や pptx などと戦って今なんとかやっていると思われる ✓ スライド制作ソフトウェアも多種多様 ■ keynote「ほんとだね」 ❖ フォントも多種多様 ✓ cid と ttf と otf と 未インストール...... と戦って今がある ❖ スライドをこんなにアップロードしまくってるの日本人だけ？ ✓ SpeakerDeck のみられた数 TOP 10 とかほぼ日本のスライド わたしたちは、スライドアップロードサービスを応援しています。 51
VS スライドアップロード サービス 終わりなき綺麗に処理されるフォントを探す旅 2023/02/15 hoge / Shota Nishihara @tomio2480
VS スライドアップロード サービス 改め 終わりなき綺麗に処理されるフォントを探す旅 2023/02/15 hoge / Shota Nishihara @tomio2480
VS フォント 終わりなき綺麗に処理されるフォントを探す旅 2023/02/15 hoge / Shota Nishihara @tomio2480