OpenTypeフォントにSVGアニメーションを突っ込んでみる

Twitterを眺めてたらOpenType-SVGを実装した話が流れてきた。

今日の「第3回 CAMPHOR- × KMC 合同LT会」で行ったLTの資料です。SVGカラー絵文字を含んだOpentypeフォントをつくるお話をしました。 https://t.co/WLN8VC7QTK

— すずしめ (@suzusime) 2017年10月29日

ちなみにその実装ではラスタ画像をSVGのベクタ形式に変換しているが、SVGの<image>タグのxlink:href属性にPNG画像などをdata URI schemeを使って埋め込むとラスタ画像も利用できる。

最近はAdobeのソフトウェア(PhotoshopやIndesignなど)がOpenType-SVGカラーフォントをサポートし始めたり、最新のWindows 10の描画エンジンでもサポートが始まり、Edgeなどでも表示できるようになっているらしく、今後が期待できる。

そういえば、OpenType-SVGではSMILによるアニメーションは問題なく突っ込めるという話があった*1。

OpenType fonts with either TrueType or CFF outlines may also contain an optional 'SVG ' table, which allows some or all glyphs in the font to be defined with color, gradients, or animation.

https://www.microsoft.com/typography/otspec/svg.htm

せっかくなので試してみる。

SVGのアニメーションといえば前になんか作ってたなあと思ったので次のページで作成したSVGをフォントに突っ込んでみることにする。

• SVGでフレームアニメーション? - にせねこメモ

手順

編集する下地のフォントとして、M+フォントのmplus-1p-medium.ttfからASCIIコード外のグリフをごっそり削除したものを利用した(編集にはFontforgeを利用した)。
これは次のリンクからダウンロードできる。

• mplus-mod.ttf

まず用意した下地のフォント(mplus-mod.ttf)をTTXでXML形式にダンプする。

ttx mplus-mod.ttf

するとmplus-mod.ttxが出来上がるので、このファイルをテキストエディタなどで開いて編集する。

今回はアルファベットの“W”の代わりにSVG画像が表示されるようにしてみる*2。
まず、<GlyphOrder>タグで囲まれた要素を見て行って、WのglyphIDを調べる。今回は、次の記述から、58であることがわかった。

    <GlyphID id="58" name="W"/>

これをもとに、ルート要素である<ttFont>の子として次のように<SVG>タグを追加する。

  <SVG>
    <svgDoc endGlyphID="58" startGlyphID="58">
      <![CDATA[<svg xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                    width="768" height="432" 
                    viewBox="0 600 764 432" id="glyph58">
        (SVGの描画される要素がここに入る)
      </svg>]]>
    </svgDoc>
  </SVG>

ここで、<svgDoc>タグにはstartGlyphIDおよびendGlyphID両属性に58(WのglyphID)を指定している。
また、<svg>タグはhttp://nixeneko.2-d.jp/hatenablog/20170330-svganim/animate.svgの中身を突っ込んだものであるが、viewBoxの2番目の値を600に変更し、さらにWのglyphIDの58に合わせてid="glyph58"の指定を追加している。<svg>タグの子孫要素は長いので記載を省略した。

最後に編集した.ttxファイルをTTXで.ttfフォントファイルに変換する。

ttx -o out.ttf mplus-base.ttx

完成したフォントは次のリンクからダウンロード可能:

• Asvgtest.ttf

サンプル

次のページで実際に試すことができる:

• OpenType-SVGテストページ (最新版Firefoxでご覧ください)

実際にFirefoxで見てみると次のようになった。

こいつ…動くぞ…!?

なお、Edgeで見てみたら次のような感じになり、アニメーションは動かなかった*3。

ここで、SVG画像の表示される高さや大きさが、Firefoxの場合と異なっている。SVGファイルをそのまま突っ込んだだけで幅・高さの辻褄を合わせていないから実装依存になってしまっているのだと思う。

ちょっとした解説

OpenType-SVGでは複数のグリフに対して一つのSVG文書(画像)を指定することができる。

つまり、TTXの形式では、一つの<svgDoc>を複数のglyphIDに対応付けることができる。この対応付けはstartGlyphIDとendGlyphIDで指定し、指定されたstartGlyphID～endGlyphID間に含まれるglyphIDに対応するグリフがそのSVG文書に結び付けられる。

また、<svgDoc>内に埋め込まれるSVG文書には、id="glyph58"のように、idに“glyph<glyphID>”の形で(その<svgDoc>と結びつけられた)glyphIDに対応するid属性を指定した要素が含まれていないといけない。グリフが描画されるとき、そのglyphIDに対応するidを持つ要素が画面に表示されることになる。

詳しくは仕様書を参照: The SVG Glyph Outlines Table

あと、svgのviewBoxの2番目の要素を変化させると、SVGがフォントとして表示される際の位置を上下に動かすことができる。今回使ったSVG画像は最初viewBox="0 0 764 432"と指定されていたが、その状態では丁度ベースラインからぶら下がる位置に表示された。なので、もう少し上の位置に表示させるためにviewBox="0 600 764 432"を指定した。

今回はSVG画像の幅や高さは特に気にせず突っ込んだが(それでも動く…!)、高さはフォントのEMのユニット数、幅はグリフのadvanceWidthに合わせるといいのではないかという気がする。描画時にどのように描画サイズが計算されるのかはちゃんと確認した方がよさそう。

まとめ

• SVG画像で表示したいグリフに対応するよう指定してSVG画像を突っ込めばOpenType-SVGカラーフォントは作成できる
• FirefoxではSVGのアニメーションまで動く
• EdgeではOpenType-SVGは表示できるがアニメーションは動かない
• SVGの幅や高さの指定がフォントの高さやグリフの幅と合ってない場合、表示位置や大きさは実装依存っぽい

*1:セキュリティ上の理由から、Javascriptは動かない。

*2:なぜWかというと、Windowsのフォントビューアのサンプルテキストの最初に来る文字だからである。なお、Windowsのフォントビューア自体はSVGフォントに対応してないので普通にWが表示された。

*3:そもそもEdgeってSMILアニメーションに対応してなかった…。

ins/delタグのdatetimeで指定された追記/削除時間を表示する

HTML文書を書いているとき、<ins>や<del>などのタグで追記や削除を行う場合に、その追記や削除を行った時間を表示しておけたらいいと思うことがある。これらのタグにはdatetime属性で時間が指定できるので、そこで指定された日時に追記あるいは削除された、ということを自動で表示できるようにしたい。

要するに、例えば、

<ins class="test" datetime="2017-10-28T01:23:45+09:00">こんばんは。</ins>

と書かれた場合、

(2017年10月28日追記)こんばんは。

などと表示できたらうれしい。

ここで、タグの前に文字列を挿入するのはCSSの擬似要素を使えばできるのだが、固定テキストやタグに指定された属性の内容等を挿入することはできる一方、それらを組み合わせたり複雑な処理を行うことはCSSのみではできないようだ。

次掲のページによると、Javascriptで直接擬似要素をいじることはできないが、擬似要素に適当な属性を指定しておくとそれ経由でJavascriptで動的に表示を変更できるらしい。

• 【jQuery】CSSの擬似要素::beforeや::afterのcontentプロパティを動的に変更する方法 ｜ Tips Note by TAM

というわけで、作ってみた。

実行例

おはようございます。こんばんは。今朝今晩もいい天気です。今日も頑張っていきもう寝ましょう。

datetimeに何も指定しない場合は特に何も挿入しないようにした。

ソース

<style type="text/css">
ins::before {
  content: attr(data-before);
}
ins{
  text-decoration-line: underline;
  text-decoration-style: dashed;
}
del::before {
  content: attr(data-before);
}
</style>

<script type="text/javascript">
//forEachに渡すdata-before要素を書き換える関数を返す関数。
//追記と削除で同形式だから統合した。
function getRewriteAttrFunc(inserttext){
  return function(elem){
    datestr = elem.getAttribute('datetime');
    if (datestr){ //datetime要素が空でない場合
      t = new Date(datestr); //Date型に変換
      writestr = "("+t.toLocaleDateString()+inserttext+") "; 
                                            //(2017/10/28に追記) とか
      elem.setAttribute('data-before', writestr);
    }
  }
}
//HTMLのロード完了時に実行
document.addEventListener("DOMContentLoaded", function(event) {
  Array.prototype.forEach.call(document.getElementsByTagName("ins"), 
                               getRewriteAttrFunc("追記"));
  Array.prototype.forEach.call(document.getElementsByTagName("del"), 
                               getRewriteAttrFunc("削除"));
});
</script>

<del datetime="2017-10-30T01:27:42+09:00">おはようございます。</del><ins 
datetime="2017-10-30T01:27:42+09:00">こんばんは。</ins><del>今朝</del><ins
>今晩</ins>もいい天気です。<del datetime="2017-10-30T01:27:42+09:00"
>今日も頑張っていき</del><ins datetime="2017-10-30T01:27:42+09:00">もう寝</ins
>ましょう。

日付を表す文字列を用意するのにtoLocaleDateStringを使ってるけど、要するにロケール異なるとまた違う出力になりそうなので、代わりにgetFullYear, getMonth, getDateあたりのメソッドから泥臭く作る方がrobustかも。

datetime属性の指定が壊れてる場合に“(Invalid Date追記)”などという表示になる。対応したほうが良いかもしれない。

あと、window.onload使うのも、他に使用しているJavascriptライブラリと競合してしまってよくない場合があるかもしれない。jQueryなどのライブラリを使ってる場合はそちらに投げてしまったほうがいい気がする。
コメントでご指摘いただいたように、window.onloadの代わりにdocument.addEventListener("DOMContentLoaded", function(event){ … });を使うように書き換えた。

家の壁に付いている電灯のスイッチを修理する

壊れてオフにならないスイッチです。 pic.twitter.com/Rsh6bqqfeM

— にせねこ (@nixeneko) 2017年10月27日

経緯

壁に付いているスイッチが壊れて、オフ状態で留まらなくて常にオン状態になってしまったので、これを常々直したいと思っていた。なお、直す前はガムテープで貼りつけて固定してなんとか凌いでいた。

必要な資格

さて、家の配線をいじることになるが、電気工事士法 第三条2によると

２　第一種電気工事士又は第二種電気工事士免状の交付を受けている者（以下「第二種電気工事士」という。）でなければ、一般用電気工作物に係る電気工事の作業（一般用電気工作物の保安上支障がないと認められる作業であつて、経済産業省令で定めるものを除く。以下同じ。）に従事してはならない。

http://elaws.e-gov.go.jp/search/elawsSearch/elaws_search/lsg0500/detail?lawId=335AC0000000139&openerCode=1

とのことである。ここで、一般用電気工作物というのは、電気事業法で規定されているが、電力会社から低圧(600V以下)で受電する家庭や小規模な事業所などの配線や電気設備を指す*1。
要するに、第二種(または第一種)電気工事士にならないと家の配線を弄ることはできない。

という訳で、工事の為に第二種電気工事士の免状の交付を受けることが必要になるが、そのためにはまず第二種電気工事士試験を受けて合格しないといけない。(第一種は条件がより厳しく、携わることのできる工事の種類が第二種のsupersetになっている。)

申し込み

第二種電気工事士試験は年2回行われていて、筆記試験と技能試験があり、その両方に合格した場合に免状の交付を受けることができる。
2017年の上期試験の申し込み期間は3月15日(水)～4月5日(水)であったのでその間にネットで申し込んだ。

第二種電気工事士試験に申し込みました。

— にせねこ (@nixeneko) 2017年3月30日

筆記試験

2017年上期の筆記試験は6月4日(日）、技能試験は7月22日(土)あるいは7月23日(日)のどちらか。筆記試験から技能試験までは一ヶ月以上間が開くので、まずは筆記試験の対策をした。

筆記試験対策に使ったテキストは次。

2017年版 第二種電気工事士試験 完全攻略 筆記試験編

一日3～4時間で1～2週間ほど勉強した気がする。要点をさらいながら一通り練習問題をこなしていけば、合格点の60点はとれるのではないか。
テキストを勉強しながら作ったノートが次。多分間違いがあるので参考にしてはいけない。

• dai2syudenkikouzisi_note.pdf

うむ。 pic.twitter.com/Ch5k1QQO3S

— にせねこ (@nixeneko) 2017年6月4日

筆記試験は2時間と時間的に余裕があるので、そこまで急ぐ必要はない。退室可能時間になると結構な人が途中退室していく。合格率は6割程度らしい。

技能試験

7月初旬に筆記試験の合格通知が来た。それから技能試験まで2週間程度あった気がする。時間が確保できるのであれば技能試験対策は合格通知が来てからでも全然間に合う。

技能試験対策のテキストとして次を利用した。

2017年版 第二種電気工事士試験 完全攻略 技能試験編

他に、工具セットと一回分の練習材料を購入した。いろいろな会社が出してるが買うのはどれでもいいと思う。ただ、工具のVVFケーブル用ワイヤストリッパーはなくても受験できるが、技能試験は時間的な余裕があまりないので、あった方がケーブルや電線の被覆を剥くのが手早くできて良い。

一週間ほど前から一日に候補問題を2～3問分、3～4時間程度練習した。13問ある候補問題を本番のつもりで一通り作れば力はつく気がする。最初は一問完成させるのに1時間近くかかったが、最後は試験時間の40分ぎりぎり～5分程度余裕を持たせて終わらせられるようになった。欠陥があると困るので、よくチェックし、欠陥となる基準を覚えておく。

自販機です。 pic.twitter.com/JgHgiqPDOg

— にせねこ (@nixeneko) 2017年7月22日

試験会場に激落ちくん消しゴム持ち込んでる人が居て強い。

— にせねこ (@nixeneko) 2017年7月22日

終った、まあ、大丈夫でせう。（と思ひたい）

— にせねこ (@nixeneko) 2017年7月22日

当日は5～10分程度時間に余裕をもって完成させられれば安心な感じ。間違えると焦るが、5分あればリカバリは利く。退出時に眺めた限りだと完成できてない人もそれなりに居たみたいだった。合格率は7割程度らしい。

リングスリーブの足から銅線が7mm程度飛び出してたんだけど、10mmないから欠陥ではないよな…と思ってそのままにした。

— にせねこ (@nixeneko) 2017年7月22日

10分位時間残して一通り完成～ってなってしばらく点検して、終了5分位に周り見渡したらそれなりにまだ作業してる人居て、やっぱり時間短いよね～～って感じ。

— にせねこ (@nixeneko) 2017年7月22日

免状の申請

合格していれば9月上旬に合格通知が届く。

第二種電気工事士試験、受かってました。

— にせねこ (@nixeneko) 2017年9月4日

住んでいる都道府県の窓口に免状の交付を申請する。直接行くこともできるが郵送で申請することもできるので、住んでいる都道府県の窓口に確認する。

第二種電気工事士免状申請をした。

— にせねこ (@nixeneko) 2017年10月5日

結局、郵送で申請した。3週間ほどで免状が届き、晴れて家の電気工事ができるようになった。

スイッチの修理

修理自体は単純なもので、ブレーカーを切って埋込連用スイッチを交換するだけであり、10分ほどあればできる。スイッチは技能試験の練習用部品として購入したものを流用した。

ここで、それまで設置されていたスイッチの工事が、電気工事士試験でやったらまず合格しないだろうなという施工でびっくりした。写真は撮ってないが、スイッチの差し込み穴に差し込まれていた電線の露出部がスイッチの外に数ミリ出てたわけで……。

スイッチ不調の原因

取り外したスイッチを分解してみたところ、オフの位置で留まらないのは中のバネが割れていたためのようだった。ちょっと力を加えたら完全に2つに分かれてしまった。




写真でみても割れているのがわかる。

まとめ

申し込みから工事までにかかった時間: 7か月弱

かかった金額:

第二種電気工事士試験 受験手数料	9,300円
2017年版 第二種電気工事士試験 完全攻略 筆記試験編	2,030円
2017年版 第二種電気工事士試験 完全攻略 技能試験編	2,030円
ホーザン(HOZAN) 電気工事士技能試験工具セット DK-18	9,363円
平成29年度 第二種電気工事士技能試験練習材料（1回練習分）	13,500円
免状の申請手数料	5,200円
合計	41,423円

ほかに、書留の送料、証明写真料金などもかかっている。

普通に電気店に工事依頼した方が安くて早いですね。

*1:電気工事士の資格と範囲 | ECEE 一般財団法人電気技術者試験センター

Raspberry Pi Zero Wのセットアップ(Raspbian Stretch Lite)をして超A&G+音声再生機にする

(2021-06-02追記: この記事の内容はすでに古くなっています。2021年5～6月に確認した次の記事を参照してください: Raspberry Pi Zero Wを超A&G+音声再生機にする(2021年5月版) - にせねこメモ )

Raspberry Pi Zero Wを買ったが、ディスプレイ接続端子がMini HDMIということで接続ケーブルがなかった。
ディスプレイを繋がない状態(headless)でセットアップしようとしたが、上手くいかなかったのでMini HDMI-HDMI変換アダプタを買い、キーボードもUSB Micro-Bオス-Aメス変換アダプタを利用して接続して調べたところ、headlessセットアップのやり方がわかったのでメモ。

また、ついでに超A&G+(AGQR)音声再生機にしてしまう。

なお、セキュリティ関係の設定は省いているのでセキュリティ的には微妙なはずなので注意。

環境

• 母艦: Windows 10 64-bit
• Raspberry Pi Zero W
  • インストールするOS: Raspbian Stretch Lite (Version: September 2017)

手順

Micro SDへのイメージ書き込み

• Operating system images – Raspberry Pi

上のダウンロードページからRaspbian Stretch Liteのzipファイルをダウンロードしてくる。
解凍した中身の“2017-09-07-raspbian-stretch-lite.img”をWin32 Disk Imagerなどを利用してMicro SDカードに書き込む。

SSH有効化

sshを有効にするため、イメージを書き込んだSDカード(bootという名前になっている)を開いて、"ssh"という空ファイルを作成する。

Wifi接続設定

Wifiの設定を行う。

If a wpa_supplicant.conf file is placed into the /boot/ directory, this will be moved to the /etc/wpa_supplicant/ directory the next time the system is booted, overwriting the network settings; this allows a Wifi configuration to be preloaded onto a card from a Windows or other machine that can only see the boot partition.

https://www.raspberrypi.org/blog/another-update-raspbian/

とのことで、Windowsから開けるbootのパーティションに設定ファイルであるwpa_supplicant.confを突っ込んでおくと自動で適切な場所にコピーしてくれるらしい。

次のような内容でwpa_supplicant.confを作成しSDカードに突っ込む。一行目がないと接続されないので気を付ける。

ctrl_interface=/var/run/wpa_supplicant
network={
    ssid="xxxxxxxxxxxxxxxxxxxx"
    psk=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    key_mgmt=WPA-PSK
}

• ssidは繋ぎたい無線LANのSSIDを入力する(クォートで囲む)。
• pskには次のサイトにSSIDとパスフレーズを入力して計算した16進ハッシュ値を書く(クォートで囲まない)。
  • WPA key calculation: From passphrase to hex

起動

USBで電源に接続すると起動する。USB端子は2つあるが、端の方にある方は電源供給専用らしい。
起動すると自動的にWifiに接続される。IPアドレスはRaspberry Pi Zero Wにディスプレイを繋げていればそこに表示されるが、分からない場合はAdvanced IP Scannerなどを利用して調べる。

SSH接続

sshで接続する。
この環境ではCygwinにOpenSSHのsshクライアントをインストールしてあるので、Cygwin端末を開き、Raspberry Pi Zero WのIPアドレス(例では192.168.11.10)を指定して次のように実行する。(Cygwinを入れてない場合はTera Termなどを利用して接続する)

ssh pi@192.168.11.10

パスワードを求められるので、Raspbianの初期パスワードraspberryを入力するとログインできる。(ついでに、rootパスワードはadminであるらしい)

あとはCLIでやりたい放題。Debianなので楽。

ソフトウェアを最新版にしておく:

sudo apt update
sudo apt upgrade

ラジオにする

pHAT DACセットアップ

まず、Raspberry Pi Zero W側にピンヘッダ(別売り)を、pHAT DAC側にピンソケットをはんだ付けし、それらを接続する。
また、pHAT DACのミニジャックにスピーカーなどを接続しておく。ヘッドフォンを繋ぐ場合、音量が結構大きいので注意。音量コントロールのついているものを接続するのがよいと思う。

次にソフトウェアのインストールを行う。次のコマンドを実行:

curl https://get.pimoroni.com/phatdac | bash

その後、再起動する。

ストリーミング受信に必要なソフトウェアのインストール

sudo apt install rtmpdump ffmpeg

超A&G+ (AGQR)音声の再生

↑を参考に、次のコマンドを実行するとpHAT DACから音声が流れる。

rtmpdump -r rtmp://fms-base1.mitene.ad.jp/agqr/aandg22 --live -o - | ffmpeg -i - -vn -f s16le -ar 48k -ac 2 - | aplay -f dat

起動時に自動再生する様に設定

再生用シェルスクリプトの用意

nano playagqr.sh

playagqr.shを次の内容で作成:

#!/bin/bash

PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
rtmpdump -r rtmp://fms-base1.mitene.ad.jp/agqr/aandg22 --live -o - | ffmpeg -i - -vn -f s16le -ar 48k -ac 2 - | aplay -f dat

実行属性をつけて/opt/にコピー。

chmod +x playagqr.sh
sudo cp playagqr.sh /opt/

systemdを利用した自動起動

systemdを利用して起動時に自動実行されるようにする。

sudo nano /etc/systemd/system/playagqr.service

playagqr.serviceを次のような内容で作成する:

[Unit]
Description = Play AGQR radio

[Service]
ExecStart=/opt/playagqr.sh
Restart=always
Type=simple
User=pi
Group=audio

[Install]
WantedBy=multi-user.target

自動起動を設定する:

sudo systemctl enable playagqr

これで、電源を繋いでしばらくするとAGQRの音が再生されるようになる。

参考

• RaspberryPiでWPA-PSKのWiFiに接続する方法 - Qiita
• Error seting up netcfg - Raspberry Pi Forums
• Raspbian jessieでSystemdを使った自動起動 - Qiita
• https://qiita.com/umchifre/items/8ca6607d2008b465b377

粗大ごみを持ち込むと安くなるらしい

粗大ごみは勝手に捨てることができず、処分する場合は自治体に連絡して、指定された日に出さないといけない。
少なくとも2週間以上前には申し込んでおく必要があるようである。

ところで、その申し込みをしていなかったので、いざ申し込もうという段になって、引っ越しの日に間に合わないということに気が付いた。
一つの手として、引っ越し業者に処分を依頼する、粗大ごみ処理業者に依頼する、などが考えられるが、場合によってはかなり高額になる。

ところで、大田区は、大田区在住の人に限って、粗大ごみの持ち込みを受け付けている。

• 大田区ホームページ：粗大ごみ
• 大田区ホームページ：粗大ごみの自己持込がもっと便利になります！

少なくとも持ち込みの2日以上前に申請が必要だが、京浜島にある回収拠点に持ち込みを行うと、手数料が無料または減額になるらしい。これに申し込んでみた。

今回申し込んだのは、事務椅子、突っ張り棒、アイロン台の3つ。どれも手数料は無料となった。また、申し込み時に搬入場所についての案内があった。

それで、である。京浜島のアクセスが悪い。観光地でもないのでそれはそう、って話ではあるが、一番近い駅が東京モノレールの昭和島駅で、そこから2km程度歩く。車を持っていたり借りられる場合であれば良いが、徒歩だと厳しい感じがする。

持ち込み

昭和島駅。狭い。エレベータやエスカレータもないので狭い階段をどうにかいかないといけない。

椅子は分解して袋に入れて運んだが、椅子のままローラーごろごろ転がして行った方が楽だったかもしれない。途中袋の持ち手が切れたのでガムテープで即席の持ち手を作ったりした。

2～30分歩くと搬入場所についた。道筋としては単純で、一回左折するだけ。

この奥で受付をやっている。免許証などで住所を確認して、終了。

まとめ

車で運べないのであれば止めた方がいい。特に重いものは歩いて運ぶのが辛く、また大きいものは運べない。
自己搬入したら手数料が無料になるっていったって交通費と相殺されてあまり金銭的なメリットはない。
とはいえ、すぐに処分しなきゃいけないものがある場合はうまく利用できるかもしれない。

JPEGのヘッダからクロマサブサンプリングを調べる

JPEGはクロマサブサンプリングに対応しているわけだが、画像ビューアや画像編集ソフトで開いてもその辺りの情報が得られなかったりする。
なので、JPEGのバイナリを読んでクロマサブサンプリングがどうなっているか理解できる様にしたい。

JPEGに記録されたクロマサブサンプリング情報

まず、imagemagickでクロマサブサンプリングを次のように設定して書き出した。
そしてそれをバイナリエディタで開き、対応するSOF0タグ内の構成要素のサンプリング値を調べた。ここで、数字は16進数である。

設定	Y	Cb	Cr
4:4:4	11	11	11
4:4:0	12	11	11
4:2:2	21	11	11
4:2:0	22	11	11
4:1:1	41	11	11
4:1:0	42	11	11

Y, Cb, Crについて、上位4ビットが水平方向、下位4ビットが垂直方向のサンプリング値を示す。
要するに、4:4:4であればY, Cb, Crそれぞれの1x1のブロック同士が対応する。4:2:0であればYの2x2ブロックとCb, Crの1x1ブロックが対応する、などといったことだろう。

JPEGのバイナリを開いて、9E番地から始まるSOF0が

FF C0 00 11 08 02 D0 05 00 03 01 22 00 02 11 01 03 11 01

となっていれば、赤がチャンネル数(3=YCbCr)、太字が各チャンネルのサンプリング値であるので、ここからYCbCr 4:2:0だとわかる。

J:a:b表記について

ところで4:2:0みたいな表記をずっと分かりづらいなと思っていたのだが、次のような事情があるらしい。

これはもともとは水平方向のY:Cr:Cbのサブサンプリングの比率を表していて、垂直方向のサブサンプリングは考慮されていなかった。そのため、人間の目の空間的な解像度が、青/黄色の方が赤/緑より小さいのを利用して、4:2:1みたいなクロマサブサンプリングも存在しているらしい(今ではほとんど使われていない)。

この後、縦方向のサブサンプリングを考慮するようになり、縦方向の色成分の解像度を半分にする場合、表記として、三番目の数字に0を指定するようになった。現在のこの書き方をJ:a:b notationという。縦方向解像度を0で示すようにしたのは、おそらくそれまでの表記法との互換性を保つためだろう。縦方向にクロマサブサンプリングをしない場合に4:2:2や4:1:1と書くのも過去の表記との整合性を考慮してのことで、過去の表記法でも現在の表記法でも同じクロマサブサンプリングを示すことになる。

参考

• JPEGのSOFフレームヘッダについて
  • http://hp.vector.co.jp/authors/VA032610/JPEGFormat/marker/SOF.htm
  • http://www.setsuki.com/hsp/ext/segment/sof0.htm
• クロマサブサンプリングの実例
  • クロマサブサンプリング技術
• クロマサブサンプリングの記法について
  • http://poynton.ca/PDFs/Chroma_subsampling_notation.pdf
  • Chroma subsampling - Wikipedia

同人誌向けプリントオンデマンド販売サービス

本の販売方法で、在庫をもたず、注文が入ってから本を印刷・製本し発送するものをオンデマンド販売とかプリント・オン・デマンド(POD; print on demand)という*1。

同人誌通販でPODが利用できるものはあまり聞いたことがなかったのだが、いくつかあるらしいので調べたものをまとめてみる。
基本的に、初期費用がかからないものは、売り上げから印刷代や手数料分を引いた金額が著者の利益となるようである。

「POD出版」で検索すると自費出版系のサービスが引っかかる。無料で出版できるものなどをいくつか挙げたが、二次創作関係はサービスの規約で禁止されている場合があるので、同人誌向けのサービスを使った方が良さそう。

自前の販売システムを持ってるとこ

製本直送.com / どこでも印刷

http://www.seichoku.com/user_data/publish_button_std.php

• 初期費用無料・月額利用料無料
• 製本代・送料のほか、決済額の15%が手数料としてかかる
• 「ディズニー(キングダムハーツを含む)、ポケットモンスター、ハリーポッター、サンリオ」は不可。それ「以外のキャラクターにつきましては(略)お客様ご自身で判断をお願い致します。」とのこと*2
• 成人向け可

DLmarket / 製本販売機能

https://www.dlmarket.jp/user_data/seichoku.php

• 製本直送.comとの連携により、ダウンロード販売に加えて製本版も販売可能
• 製本版単体での販売は不可
• 製本代・送料のほか、販売価格の20%が決済手数料としてかかる

ライブラ

https://libra.sc/

• 現在事前登録中。2017年9月に作品登録開始予定らしい。
• 初期投資なし。
• 基本料金+ページ印刷料金+作家利益が販売価格となる。利益は自由に設定可能。
• 同人誌向けっぽいので、二次創作でも使えそう
• 成人向け可。

BCCKS

https://bccks.jp/

• 電子書籍作成販売サービスで、紙本の作成・販売にも対応。
• 無料でも作れるが、有料会員もあるらしい。
• 製本料+印税が販売価格となる(+送料)。
  • 紙本の価格表 :: BCCKS情報局

Amazon PODを利用したPOD出版サービス

NextPublishing著者向けPODサービス

https://open.nextpublishing.jp/author/

• 基本無料
• 販売手数料は販売価格の40%
• 販売価格は100円単位で設定でき、印刷費と販売手数料を引いた額が利益として支払われるとのこと。
• 成人向け可。
• 「他者の著作権を侵害するものなど知的所有権を侵害する書籍は販売できません」*3とのことで二次創作は難しいかも。
• 「製本可能なページ数は、24〜828ページです（カラーは500ページまで）」*4

MyISBN

https://myisbn.jp/

• 自費出版向けのサービス。Amazonや(取り寄せれば)書店で購入可能。
• Amazonのオンデマンドサービスを使ってPODが実現できる。
• 本の登録費用が4980円で、それ以外に費用は掛からないとのこと。

BookSpace

https://bsworld.jp/pod

• 電子書籍出版サービス。Amazon PODを使ってPODができる。
• 無料らしい。
• 「各配信ストアから実際に支払を受けた金額から35～43％を有料会員のアカウントに計上します*5」とのことで、6割前後が手数料として引かれるらしい。
• 売り上げが5,000円を超えない場合、退会するまで利益の振込はされないとのこと。

参考

他にも、スリースパイス、ムゲンブックスでも基本無料のPOD出版サービスがあるらしい。次のサイトを参照。

• 今では紙書籍も無料で出版できる。驚きのPODサービス4選 | 小説家のタマゴたちへ贈る、電子書籍出版のすすめ

*1:「必要なときに必要なだけ印刷する」という意味で、印刷方法としてのオンデマンド印刷(製版工程の要らない、レーザープリンタによる少部数印刷)のことを指すこともあるが、ここで扱うのはそれではない

*2:https://www.seichoku.com/user_data/kiyaku.php

*3:https://open.nextpublishing.jp/author/#q_6

*4:https://open.nextpublishing.jp/author/#q_9

*5:https://bsworld.jp/download