VS スライドアップロードサービス

6.2K Views

February 26, 23

スライド概要

2023/02/26 ゆるい勉強会 @ CoCoDe記念 で発表した資料

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

VS スライドアップロード サービス 終わりなき綺麗に処理されるフォントを探す旅 2023/02/26 ゆるい勉強会 / Shota Nishihara @tomio2480

2.

$ whoami ❖ Shota Nishihara @tomio2480 ❖ サイボウズ株式会社 開発本部 コネクト支援チーム ✓ ✓ ✓ ✓ 情報処理学会 会誌編集委員 高校教諭(電)→セキュリティ人材育成→現職+専門学校講師(AI:Python基礎)→今 開発本部,運用本部,サイボウズ・ラボの人の発信,IT コミュニティ出没 流氷交差点よろしく https://soundcloud.com/cybozutech/sets/drifticecrossing ❖ 北海道旭川市からフルリモート ✓ 旭川 18 年→北見 4 年→富良野 5 年→(東京)小平 2 年半→今 ❖ ゆるい勉強会(旭川),FuraIT(富良野),Co-KoNPIle(小平) に大体いる 2

3.

お得情報 ❖ 情報処理学会 ジュニア会員 ✓ https://www.ipsj.or.jp/member/junior.html ✓ 高専は専攻科 1 年まで年会費無料 ❖ Cybozu Tech ✓ https://tech.cybozu.io/ ✓ サイボウズという会社の公開されている技術の話が見える 3

4.

スライドアップロードサービス ❖ SlideShare ✓ https://www.slideshare.net/ ❖ SpeakerDeck ✓ https://speakerdeck.com/ ❖ Docswell ✓ https://www.docswell.com/ 君のスライドは何も考えずにこの全てのサービスにアップロードしても 無事でいられるかな? 4

5.

めちゃくちゃになったので先にまとめ 5

6.

こういうことをした ❖ SpeakerDeck にアップしたスライドの様子がおかしい ✓ 字に謎の縁取りが出たり,文字起こしが変になったりした ❖ 疑ったのはフォントの形式,Web エディタによる編集,OS ✓ OTF/TTF,Web/Local,Win/Mac ❖ 深く潜り込んで CMap/cmap あたりの勉強が必要かと思われた ✓ 結果,対処する方法が見つかったので深追いはせず ✓ たぶん本当ならしておいた方がいい ❖ どの環境でも完璧 PDF を作る方法までは編み出せなかった ✓ つまりこの旅はまだ続く...... 6

7.

実験 7

8.

前提 ❖ そもそも疑ったのは .otf と .ttf のフォントによる差 ✓ かつて SlideShare で文字の見た目がおかしくなることを確認し ていたため,ここから疑ってかかった 8

9.

たのしいスライド実験 ❖ 今回の実験(あなたもやってください) ✓ PowerPoint で作成した資料を PDF エクスポートします ■ ただし資料のスライドは複数パターン用意していただきます ■ OTF と TTF のフォント,レギュラーとボールドの 2 書体 ,WindowsOS と macOS を使用してパターンは作られます ✓ この PDF を各サービスにアップロードします ❖ 無事の定義 ✓ スライド作成時同様に綺麗な見た目の状態でアップ完了 ✓ スライド中の文字が正しく文字起こしされてアップ完了 9

10.

自分の実験環境 - 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

11.

スライドの作り方 ❖ 新規作成の画面で出てきたタイトルスライドを利用 ✓ OTF のものをつくって,コピー,TTF に書き換え ✓ それぞれ 1 枚つくったものをファイルを跨いでコピー ✓ 必要な組み合わせをそれで作る ❖ 使用するフォント ✓ OTF : Noto Sans CJK JP ✓ TTF : 筑紫A丸ゴシック ❖ PowerPoint のエクスポート機能で PDF を作る 11

12.

実験パターン サービス名 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

13.

先に言っておくと ❖ 実験はちゃんとできていなかった ✓ 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

14.

SlideShare - 複数同時アップロードうまくいった 14

15.

SlideShare - Mac - otf→ttf→otf ❖ 全て無事 15

16.

SlideShare - Mac - ttf→otf→ttf ❖ パワポ上では無事だけど,PDF がズレる ✓ PDF がズレるのでアップロードしたものもズレてる ❖ 文字起こしは無事 16

17.

SlideShare - Mac - otf→otf ❖ 1 枚目と 2 枚目のズレ → パワポ上と PDF 上でズレるところが違う ✓ パワポ上では Noto… の方が変なズレを起こす ✓ 一方 PDF では OTF… の方が変なズレを起こす ❖ 文字起こしは無事 17

18.

SlideShare - Mac - ttf→ttf ❖ 全て無事 ✓ パワポ上だけ変なズレを起こす ✓ PDF 無事,アップロードしても無事 18

19.

SpeakerDeck - アップロードは一個ずつ 19

20.

SpeakerDeck - Mac - otf→ttf→otf ❖ 見た目は全て無事 ❖ 文字起こしが崩壊する ✓ TTF の筑紫A丸ゴシック側が何かに飲み込まれている 20

21.

SpeakerDeck - Mac - ttf→otf→ttf ❖ パワポ上では無事だけど,PDF がズレる ✓ PDF がズレるのでアップロードしたものもズレてる ❖ 文字起こしも崩壊する ✓ TTF の筑紫A丸ゴシックが飲み込まれている 21

22.

SpeakerDeck - Mac - otf→otf ❖ 1 枚目と 2 枚目のズレ → パワポ上と PDF 上でズレるところが違う ✓ パワポ上では Noto… の方が変なズレを起こす ✓ 一方 PDF では OTF… の方が変なズレを起こす ❖ 文字起こしは無事 22

23.

SpeakerDeck - Mac - ttf→ttf ❖ 見た目は全て無事 ❖ 文字起こしが崩壊する ✓ TTF の筑紫A丸ゴシック側が何かに飲み込まれている 23

24.

Docswell - 複数同時アップロードはうまくいかず 24

25.

Docswell - Mac - otf→ttf→otf ❖ 全て無事 ❖ パワポでは不思議現象 ✓ 1 枚目をコピーして 3 枚目を作ったのに表示がずれる ✓ 出力した PDF は無事,編集画面だけ変 ■ このデータから ttf を抜いたデータで otf→oft を作ると 出力 PDF 2 枚目の表示もズレてしまう(otf→otf が悪い? ✓ フォント情報に変化はない 25

26.

Docswell - Mac - ttf→otf→ttf ❖ 編集画面ではズレがないのに PDF はズレる ✓ 結果としてアップロードされるのもズレたもの ❖ 文字起こしは無事 26

27.

Docswell - Mac - otf→otf ❖ 文字起こしは無事 ❖ フォントが変 ✓ PDF は フォントは無事 ✓ 2 枚目も同じ細身になる ✓ しかしパワポで現れるズレは消える ❖ パワポでの不思議現象 ✓ 1 枚目をコピーして 2 枚目を作っても表示がずれる ✓ 出力した PDF も変 ✓ フォント情報に変化はない 27

28.

Docswell - Mac - ttf→ttf ❖ 全て無事 ❖ パワポ編集画面でだけ謎のズレが発生 ✓ PDF には影響がない ✓ アップロードされるものも影響がない 28

29.

まとめ (Windows は?) 29

30.

まとめではない (Windows は?) 30

31.

謎のズレや表示差はフォント指定のせいっぽい ❖ 主要なフォントの多くは TTF なのに TTF がおかしくなる? ✓ メイリオ,ヒラギノ,BIZ UD …… ✓ OTF とか TTF 以前の問題だった ✓ 本当にあなたの環境にそのフォント入ってますか? ❖ PDF の中にあるフォントがどうなっているかは調べたか? ✓ CMap/cmap というものの存在を忘れていると謎は深まるばかり ✓ 文字の見た目と文字コードを変換するためのテーブル 31

32.

拡張子だけで判断してたのが甘かった ❖ .ttf と .otf くらいで済む世界じゃなかった ✓ Noto Sans CJK JP は .otf のものをインストール ✓ 筑紫A丸ゴシック は .ttf 32

33.

本当にフォント入ってるか問題 33

34.

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

35.

PowerPoint で選べてフォントブックにない ❖ 選べるのに無い(これは Adobe Fonts 側にあるパターン) 35

36.

PDF の埋め込みフォント問題 36

37.

pdffonts で確かめてみる ❖ brew install xpdf ❖ pdffonts ファイル名 37

38.

Syntax error を解消して再度チェック ❖ https://qiita.com/kinzi0828/items/d7c53b6b09624c3b586d ❖ 筑紫A丸ゴシックの X すら消えてしまった ✓ PDF を吐き出し直している訳でもないのに 38

39.

再度新しい PDF をエクスポート→アップ ❖ ダメです ✓ YuGothic は紛れ込んだだけ 39

40.

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

41.

そういえば Adobe Acrobat でも確認できたな ❖ Type 1 (CID) とか書かれてるし,新概念 Identity-H 登場 41

42.

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

43.

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.

太字は太字フォントじゃない説 44

45.

調査の発端となった太字謎縁取り ❖ Transcript 以外に SpeakerDeck で現れた現象 ✓ 今回同じフォントを利用したが発現しなかった ✓ もしかすると Web 版の PowerPoint で作ったものだと発現する? ✓ Noto Sans CJK JP と筑紫A丸ゴシックの CMap 問題は絡まない? 45

46.

疑ったのは Web 上のエディタ ❖ Google Slides で作ったものがおかしいというブログを見つけた ✓ https://zenn.dev/unsoluble_sugar/articles/cade53a073157df0b687 ✓ 今回問題になったスライドもどこかのタイミングにてブラウザ 上で動く PowerPoint を使って編集していた可能性が高かった ✓ が,結果として Web エディタの検証はしていない 46

47.

ぶつかった太字表現方法の多様性 ❖ Ctrl+b とか [B] ボタンの挙動 ✓ 1. タイプライターでの太字表現的なもの ■ 同じ文字を少しずらして重ねて表示 ✓ 2. 単純に文字の縁取りを太くする ✓ 3. フォントファミリーの Bold のものに切り替える 47

48.

https://www.ddc.co.jp/dtp/archives/ 20050711/161159.html 48

49.

つかれた 49

50.

今わかってるのはここまでこれで許して Windows 環境の PowerPoint を使って, 使いたいフォントの Regluar と使いたいスタイルをインストールし, 使いたいフォントとスタイルを全て使ったテストスライドを, ローカルインストールされているスライド作成ソフトを用い作り, pdffonts にかけて以下を確認してからスライドを作りはじめて, ✓ emb が yes,sub が yes,uni が yes ❖ 太字を使用したい場合は Ctrl+b を使わずにフォント名のプルダウン から選んで文字を装飾しよう ここまでやればバグらないんじゃないか ❖ ❖ ❖ ❖ ❖ 50

51.

スライドアップロードサービスは大変 ❖ PDF や pptx などと戦って今なんとかやっていると思われる ✓ スライド制作ソフトウェアも多種多様 ■ keynote「ほんとだね」 ❖ フォントも多種多様 ✓ cid と ttf と otf と 未インストール...... と戦って今がある ❖ スライドをこんなにアップロードしまくってるの日本人だけ? ✓ SpeakerDeck のみられた数 TOP 10 とかほぼ日本のスライド わたしたちは、スライドアップロードサービスを応援しています。 51

52.

VS スライドアップロード サービス 終わりなき綺麗に処理されるフォントを探す旅 2023/02/15 hoge / Shota Nishihara @tomio2480

53.

VS スライドアップロード サービス 改め 終わりなき綺麗に処理されるフォントを探す旅 2023/02/15 hoge / Shota Nishihara @tomio2480

54.

VS フォント 終わりなき綺麗に処理されるフォントを探す旅 2023/02/15 hoge / Shota Nishihara @tomio2480