にせねこメモ

はてなダイアリーがUTF-8じゃないので移ってきました。

サーバルちゃんボタンをつくる、あるいはDFPlayer Miniによる音声再生を試す

f:id:nixeneko:20170511235410p:plain

「すごーい!」

って、全肯定されたい。


けものフレンズ』のインタビューで、福原プロデューサーは次のように語っている。

福原:サーバルちゃんは全肯定してくれるキャラクターだけど、あれはサーバルちゃん自身が本当にそう思ってて、クチに出してるだけなんです。(略)それがいまのアニメファンに受け入れられた現象を考えると……みんな疲れてるのかなぁ? と思いますね。

すごーい!の連続、『けものフレンズ』チームに3万字インタビュー | アニメイトタイムズ

そう、疲れているのである。

という訳で、現実にサーバルちゃんはいないので*1、ボタンを押すとサーバルちゃんのセリフが流れるという風で手を打つことにする。まあ、ないよりはマシだと思う。

完成品

たのしい。

DFPlayer Mini

さて、前回Arduinoを使ってボタンで音を出そうとしたときは、音声を8bit PCMにしてArduinoのメモリに書きこんでいたのだが、音質の悪さと記録できる容量が少ないことがネックだった。

これを解決するために音声再生用ICを利用しようというのが今回の目的である。
調べたところ、DFPlayer Miniというmp3再生用のモジュールが安くて良さそうなので、Amazonで購入した。

これ。一個250円と安いのだが、中国発送なので、到着まで2週間ほどかかる。


公式Wikiを参考に再生を試した。

音声ファイルの用意

Micro SDカードを用意し、ルートにmp3ディレクトリを作成してそこに音声ファイルを突っ込んだ。mp3プレーヤとのことだが、waveファイルを突っ込んでも普通に再生してくれる。
ファイル名は先頭4文字が連番数字になるようにする(0001hoge.wav, 0002moge.wav, 0003hage.wav, …)。
アンプ内蔵なので、音声ファイルの音量が小さくても結構な音量で鳴る。

音声ファイルを入れたらDFPlayer MiniのMicro SDスロットに装着する。


実はこれでもう電源・ボタン・スピーカーだけ配線をすればArduinoがなくても再生ができる。IO_2(やIO_1)端子をGNDに短時間ショートさせると次の曲(前の曲)が再生されるので、そこにボタンをつなぐだけで、ボタンを押す度に順繰りに音声が流れるようになる。音量が初期値で最大音量になっているのでうるさい。

配線

f:id:nixeneko:20170511213921p:plain

  • 今回はArduinoからSoftwareSerialライブラリを利用してDFPlayer Miniとのシリアル通信を行う。
    • RXが10番ピン、TXが11番ピンと設定する。
  • DFPlayer Miniの電源VinはArduinoの3.3V電源ピンに接続する。
    • これは、Arduino Uno電源の中で一番ノイズが小さいのが3.3Vピンだから。5Vに繋ぐとノイズが出るが3.3Vにするとノイズがなくなるという場合がある。
  • DFPlayer MiniのRX~ArduinoのTXの間に1.0kΩの抵抗を挟む。
    • DFPlayer Miniが3.3Vで動いているために、Arduinoとの電圧差を吸収する必要があるようだ。入れないとノイズになることがある。

Arduinoからボタンへの配線は前回の記事と同じなのでそちらを参照。プルダウン回路で19番(A5)ピンに繋いでいる。

Arduinoコード

ライブラリを導入する。

  1. Releasesから最新のリリース(2017/05/11時点では1.0.1)からSource codeをダウンロードしてくる。
  2. ダウンロードしてきた圧縮ファイルを解凍し、 DFPlayer_Mini_Mp3 ディレクトリを C:\Program Files (x86)\Arduino\libraries\ (Windowsの場合)に突っ込む。


実装したソースコードを次に示す。(といっても公式wikiのコードを弄っただけ)

#include "Arduino.h"
#include "SoftwareSerial.h"
#include "DFRobotDFPlayerMini.h"

// ボタンに繋がるピン
#define BUTTON 19
// SoftwareSerialのRX, TXピン
#define RX_PIN 10
#define TX_PIN 11

SoftwareSerial mySoftwareSerial(RX_PIN, TX_PIN); // RX, TX
DFRobotDFPlayerMini myDFPlayer;

int numfile;   //楽曲ファイル数
int lastval=0; //ボタンの値保存用

void setup()
{
  pinMode(BUTTON, INPUT);
  randomSeed(analogRead(0)); 
  
  // SoftwareSerialとDFPlayerの初期化
  mySoftwareSerial.begin(9600);
  if (!myDFPlayer.begin(mySoftwareSerial)) {  //Use softwareSerial to communicate with mp3.
    while(true);
  }

  myDFPlayer.volume(25);  // 音量の設定(0~30)
  numfile = myDFPlayer.readFileCounts(DFPLAYER_DEVICE_SD); //音楽ファイル数取得
}

void loop()
{
  lastval = (lastval << 1) | digitalRead(BUTTON); // チャタリング回避
  if(lastval == 0x7FFF){                // ボタンが押されたら
    myDFPlayer.play(random(numfile)+1); //ランダムにファイルを再生 [1, numfile]
  }
  delay(1);
}

エラー処理なんかやってないのでアレだが、コードはすごくシンプルになった。
長かったり高音質な音声ファイルの再生が簡単にできるので便利。

さらに細かいことが知りたければ公式wikiを参照。

参考

*1:少なくとも、私の身近には

アドリブ系アニメとリアルタイムアニメの系譜を考える

アドリブをメインとして据えたアニメ作品や、リアルタイム的にセリフと動きを同時に収録して行くような感じの作品・番組について、誰もまとめてくれないのでメモがてらまとめてみる。あんまり詳しくないので詳しい人の解説を待ちたい。各作品について、詳しいことはWikipediaとか見て。
人名については敬称略とした。

年表

f:id:nixeneko:20170504201856p:plain
青がアドリブ系、ピンクがリアルタイムのものを示している。
いちおう監督や制作団体で区分してみているが、相応しい区分ではないかもしれない。
点線はその区分の間でも繋がりがあることを示すためにつけてみた。

最近人気の『けものフレンズ』を制作したヤオヨロズは直球表題〜てさぐれ〜みならいディーバに関わっていて、その後けものフレンズへとつながる流れである(『けもフレ』が誕生の話と、つんく♂との驚愕の関係!? | アニメイトタイムズ)。

ビーストウォーズ

アドリブを主軸としたものではないが、もともとのアニメの日本語化にあたってずいぶんなノリの変更が行われたらしく、アドリブも取り入れられて、大元は真面目なアニメなのに日本版は半分ネタアニメみたいな感じになってしまったらしい。
最初の方割と真面目だけど後の方になるにつれてどんどんアドリブや下ネタが増えていったとか
絵も3DCGだし、後のアドリブ系アニメに対して影響を与えている気がする。

無印はYouTubeで無料で見れるぽい。
www.youtube.com

gdgd妖精s, なりヒロwww

  • 1期: 2011年10-12月
  • 2期: 2013年1-3月
  • 劇場版: 2014年9月
  • なりヒロwww: 2014年10-12月
  • 監督: 菅原そうた

MMDっぽい感じの3DCG映像で制作されている。映像を見ながらそれに対し声を当てて行くなどのアドリブのコーナーがあった。

本編は、妖精たちが各話のテーマに沿ってテーブルトークを行う「gdgdティータイム」、魔力が増幅される空間で妖精たちが魔法で何かを呼び出して遊ぶ「メンタルとタイムのルーム」、湖面に映し出される異世界の一場面を見ながら適当にセリフを当てる「アフレ湖(アフレコ)」の三部構成となっている

gdgd妖精s - Wikipedia
なりヒロwww

劇場版gdgd妖精sで、なりヒロwwwが同時上映され、その後地上波でも放送された。
なりヒロwwwの方は本編では基本アドリブパートはない。(4話から、次の「ヒロイン検定」コーナーが本編に加わったとのこと)
www.nicovideo.jp
配信限定のおまけ動画「ヒロイン検定」にてgdgd妖精sっぽいアドリブのネタ振りが行われている。
www.nicovideo.jp

直球表題ロボットアニメ

  • 2013年2-4月
  • 監督: 石舘光太郎, アニメーション監督: cort

gdgd妖精sと近い感じ。MMDで制作されている。見てなかったのでWikipediaの解説を掲載する。

流れとしては、監督の石舘光太郎が携わった『gdgd妖精s』のような「脚本によるトークパート」、「映像を中心にしたパート」、「声優がその場で出されたお題に対してアドリブで感想を入れる大喜利パート」(本作では声優がモノボケを実践する)という3パートで構成されている。音声収録に関しても同様にプレスコで、モノボケパートはボケについて事前打ち合わせ+スケッチブックに各人が描いたイラストを使ってのアドリブ方式となっている

直球表題ロボットアニメ - Wikipedia

www.nicovideo.jp
また、こちらにも詳しい。
『直球表題ロボットアニメ』はこうして作られた! スタッフに聞く! | アニメイトタイムズ

てさぐれ!部活もの, てさプル

  • 1期: 2013年10月 - 12月
  • 2期: 2014年1月 - 3月
  • 3期: 2015年4月 - 6月
  • 監督: 石舘光太郎/石ダテコー太郎, アニメーション監督: たつき

タイトルに部活ものとあるように、新しい部活動を考えるというメタい部活「てさぐり部」を舞台に繰り広げられる、部活動に関するメタいネタを出していくアニメ。日本テレビで放送されていた。3DCGソフトはCinema 4Dを使用している*1

www.nicovideo.jp

3期は漫画作品『みならい女神 プルプルんシャルム』とのコラボで、もともと超A&Gで夜8時から放送されていたLady GO!!というラジオ番組の1コーナーで、セリフが空になっているプルプルんシャルムの一コマに対しリスナーから吹き出しに入るセリフを募集し、それを読み上げるということをやっていたということもあり、プルプルんシャルム側としてLady GO声優5人が参加している。
www.nicovideo.jp

みならいディーバ(※生アニメ)

NOTTV*2で毎週放送されていた。モーションキャプチャにより声優さんがリアルタイムで声と振りをつけるという生放送アニメ作品。りえしょんがりえしょんなので見て。

キャラは音声合成プログラムという設定で、持ち歌がないから自分たちで曲を作ろうということでリアルタイムで番組内で作詞をしていき、最後に出来上がった歌を歌うという流れ。
最初に曲が流れ、歌詞ネタをTwitterなどで募集し、それを元にネタをどんどん出して行って、音楽担当のGhost Writer (こと井上純一)がそれを歌詞にまとめて、最後にキャラ2人が歌うという結構多方面に大変そうな感じ。
www.nicovideo.jp

モーションキャプチャには、ディー・バイ・エル クリエイション(当時)によるDL-EDGEという慣性式モーションキャプチャシステムが使われた。
フェイシャルは8種のベースとなる表情を設定し、口をマイク音声を解析して動かしているとのこと。特別な表情操作はゲームパッドによる入力*3

腕を下ろすとスカートなどの裾に手がめり込んでしまうので、それを物理的に避けるために浮き輪を付けていた。ライブでは浮き輪が客席に投げられたリしてた。

スタッフのニコ生で聞いたと思うのだが、モーショントラッキングスーツ(システム?)が一人分数百万するとか言ってた気がする…。

一話でルーリーのシステムがダウンしてしまい、キャラが3Dモデルの初期状態である両手をまっすぐ横に広げたTポーズで固定されるトラブルがあった。
最終回はライブを行った*4
最終話の後、2014年12月21日にクリスマス生ライブが行われ、途中でルーリーのシステムがダウンしてしまい、図らずも1話を再現した感じになって面白かった。また、ライブで歌った音源をUSBメモリに焼いてお土産として配るという試みもあった。*5

魔法少女?なりあ☆がーるず

魔法少女もののアニメをつくることがテーマとなっている。
金曜夜9時から、モーションキャプチャを用いてリアルタイムでアニメーションを作っていく様子『生でアニメをつくるさま』がニコニコ生放送で配信され、翌週水曜日にそれを編集してアニメ作品としてまとめたものがTokyo MXなどで放送されるという2段階の構成となっている。

ニコ生版:
www.nicovideo.jp
テレビ放送版:
www.nicovideo.jp

モーションキャプチャシステムとして、みならいディーバでアニメーション監督を務めていたcortなどが開発に関わっているKiLAが利用されている。

直感×アルゴリズム

  • 2017年7月-10月
  • Docomoと中国の咪咕文化の共同プロジェクト
  • 中国・日本同時生放送
  • 1回30分で、1/3程度が生パートとなっている。
  • 言語は日本語と中国語が併用されている。
    • Kilinが日本語、Xiが中国語のみを話し、BunnyPというキャラがその間を通訳するという形になっている。
  • モーションキャプチャシステムはセガ・インタラクティブのDL-EDGE

NOTTVを運営していたのがNTTドコモの子会社なので、みならいディーバとのつながりが感じられるが、制作スタッフは変わっているっぽい。
中国で放送する都合もあり、安定して通信できるようにしたり、向こうの検閲に引っかからないよう調整するのが大変だったらしい。
2017年12月現在、全話ニコニコチャンネルで無料で見れる。
www.nicovideo.jp

アドリブアニメ研究所, ヴォイス・アカデミア

アドリブアニメ研究所

BSフジで放送されていた声優バラエティ番組。加藤英美里福原香織の2人*6がメインの出演者として、毎回ゲスト一人を迎えて行っていた。
アニメ作品ではないのだが、カードによるお題や指示(無茶振り)に従ってアドリブで音声収録をしていき、最後にそれを短くまとめたものにアニメーション(Flashアニメのような感じ)がつけられたものを最後に流すという流れで、アドリブを主体にしている。
gdgd妖精sと同時期に始まったのが面白い。

ヴォイス・アカデミア

ヴォイス・アカデミアアドリブアニメ研究所の後番組で、加藤英美里福原香織の2人とゲスト声優が吹き出しが空白になっているイラストや漫画に自由に声を当てていく感じで、大喜利感が強い。

こちら娘島高等学校ほーそお部(こちむす)

  • 2014年3月-2016年4月?

DeNAとMUGENUPによる、Showroomで放送されたライブアニメーションによるリアルタイムコミュニケーション番組。Showroomでは視聴者のコメントが表示され、そのコメントに対して反応したり、リアルタイムでコミュニケーションするという感じの番組がストリーミング配信されていて、この番組は映像として人ではなくキャラクターが出ているという感じ。

YouTubeチャンネルがあったのだけれどいつの間に消えてしまって、放送時を垣間見れる動画はネット上では見れなくなってしまったっぽい。
www.youtube.com

えぬすて!

  • 2014年9月-2016年6月?

こちむす同様のシステムによる、DeNAとMUGENUPによるShowroomで放送されたライブアニメーションによるコミュニケーション番組。
見てなかったのでわからないのだが、放送を垣間見れる動画がいくつか残っているようだ。
www.youtube.com
www.youtube.com

KizunaAI

  • 2016年12月-

バーチャルYoutuberのさきがけ。人工知能*8であるキズナ アイがYouTubeに動画をアップロードしている。基本収録・編集した動画をアップロードしているが、時々生配信もやっているらしい。
www.youtube.com
www.youtube.com

慣性式モーションキャプチャか? 表情はプリセットから選択とかで、口は音声入力によるリップシンクとかだと思う。

KiLAチームはすでに
(略)
チャンネル登録者数60万人越えのバーチャルYoutuberへの技術提供。
等々、他の追従を許さない圧倒的な実績と技術とノウハウを持っております。

6月28日~30日に開催されるコンテンツ東京にKiLA出展します | Kigurumi Live Animator [KiLA]

とあるので、恐らくKiLAは使ってる模様*9

インタビュー記事もあるので参考に:

Hop Step Sing!

  • 2015年10月- (生放送2017年07月-)

講談社が主催するバーチャルアイドルプロジェクト。楽曲の全天球PVなどを公開していた。HMDなどを使って実際に体験できるPVがSteamなどで販売されている。
最近YouTubeを利用した全天球パノラマVR生配信を始めた。(ニコニコ動画でも同時配信しているが、そちらは普通にカメラをスイッチングしている)。生放送時のモーションキャプチャ等のシステムはKiLA
youtu.be

虎妮 Hoonie

台湾のYahooTVチャンネルで活動している。主にゲームの配信をしてるっぽい。
日本語の紹介記事があった: 台湾版キズナアイ!? バーチャルYahooTVer『虎妮 Hoonie』登場 【とらフレ】 | 中国アニメブログ ちゃにめ!

あんたま(岩本町芸能社)

Twitterのフォロワーが10000超えしたらデビュー決定みたいな企画で夏コミの時に(悪い意味で)話題になっていたが、無事CDデビュー決まったみたいで、よかった。
www.youtube.com

イベント(http://rbc-geino.com/2017_christmas_party/ (魚拓))のクリスマスプレゼント送付先の住所をみると、宛先の岩本町芸能社はForces11と同じビルの同じ階にあるようだ。

PROJECT MariA

  • 2017年8月-? (CEDEC 2017で初披露)
  • VRアイドル
  • Happy Elements Asia Pacific社による。
  • 現実の会場でキャラクターとのリアルタイムなインタラクションが可能
  • モーキャプは光学式モーションキャプチャ(OptiTrack Prime)とUnityによる。システムは自社開発。
  • 表情制御は、オペレーションスタッフの表情を解析して連動させていて、さらに音声データを解析してリップシンクをしている。決め顔がプリセットされていてキーボードのボタンを押している間だけ切り替えることができる*10
  • 手は現状プリセットの形をキーに割り当てているらしい
  • CGWORLDの記事を読むと、声優とモーションアクター、表情制御は別々の人がやっているようにも読める。

参考: ヴァーチャルアイドルとコール&レスポンス!? Unityを活用したリアルタイムLIVE「PROJECT MariA」 | 特集 | CGWORLD.jp

www.youtube.com

2017年11月頃~: バーチャルYouTuber群雄割拠時代

これは、誰かほかの人がまとめてくれるでしょう。
企業がやっているものと並んで個人でも参入する例があり、レッドオーシャンと化してきた気がする。

モーションキャプチャ技術について

リアルタイムアニメに関連して、モーションキャプチャなどのシステムについても書いておく。
モーションキャプチャには幾つかの方式がある。

光学式

おそらくスタジオとかでは一番使われてるのではないかと思う。
赤外線ライトとハイスピードカメラがセットになったカメラユニット(数十万〜100万円くらいするっぽい)を演者を取り囲む様にいくつか設置し、再帰性反射材のマーカーをたくさんつけたスーツを着た演者がそこで演技を行う。マーカー位置をトラッキングし三次元的に座標を復元することでそれぞれのマーカー位置を取得する。
カメラユニットは少なくとも3台必要だが*11、人に対してマーカーが付いているためマーカーが設置したカメラから死角となってしまうことがあり、この死角(オクルージョン)の問題に対処するため普通はさらに多くのカメラが設置される。
また、複数人についてもオクルージョンの問題があるため同時に収録することが難しい。
さらに、カメラを固定して設置してキャリブレーションを行う必要があり、正確ではあるが、リアルタイム性とポータビリティに欠ける。

慣性センサ式

体の各部に慣性センサー(ジャイロセンサー、加速度センサーなど)をつけ、それらのセンサの値を累積計算して現在の位置を測定する。絶対位置を取得できるわけではないので、最初にキャリブレーションを行う必要がある。またしばらく動かしていると誤差が蓄積し、実際の位置とシステムによって認識される位置がずれてきてしまうので、それを直すために頻繁なキャリブレーションが必要となる。
精度は光学式に比べて低いが、慣性センサ式においてはオクルージョンの問題は発生しない。またカメラを利用しないため屋外などの光環境が一定しない場合でも使え、スーツなどの形にまとめてしまえばポータビリティも高い。

ビデオ式

カメラ映像をコンピュータビジョン的アプローチによって解析し、三次元的な情報を得るというもの。Kinectもこの方式。

Kinect

Kinectは、取得した距離画像から、機械学習的アプローチによって姿勢を推定しているらしい。
特殊なマーカーをつけたり専用のスーツを着用したりという必要がなく、セットアップも大掛かりにならないので手軽である。一方で、カメラの視界に入ってないとトラッキングできない(障害物に弱い)などの弱点がある。

FaceShift Studio

顔の表情の取得・トラッキングについても、ビデオベースで、結構な精度で行えるものがあり、その一つがFaceShift Studioである。動作にはKinectなどの深度カメラを必要とする。

Live2Dと組み合わせてリアルタイムにキャラの顔を動かすデモが話題になった。
www.youtube.com

その他

Wikipediaによると、他にも機械式や磁気式といった方式があるらしいが、省略。

リアルタイムアニメCGシステムについて

アニメ調のキャラになりきってリアルタイムにモーションがつけられるようなシステムを挙げる。多分抜けがあると思う。

DL-EDGE

ディー・バイ・エル クリエイション(当時)によるモーションキャプチャ・映像出力システム。演者が慣性式センサを搭載したモーションキャプチャスーツを着て演技をすると、3DCGのキャラクターがそれに合わせて動く。
みならいディーバで採用。

ちなみに株式会社ディー・バイ・エル・クリエイションの事業は株式会社セガ・ライブクリエイションに2016年9月に移されているとのこと。また、株式会社セガ・ライブクリエイションは香港企業に売却され、2017年1月にCAセガジョイポリスと名前を変えている。
2017年8月現在、DL-EDGEは株式会社セガ・インタラクティブのものであるらしい。

リンク

KiLA

みならいディーバなどでアニメーション監督を務めていたcort、およびほえたんによって開発された、リアルタイムでモーションキャプチャによってアニメ風の3DCG映像を作り出すシステム。
なりあ⭐︎がーるずで採用。
www.youtube.com

開発時の動画

www.nicovideo.jp
www.nicovideo.jp
これを見る限りUnity上で動いてるっぽい。

FaceRig+Live2D module

FaceRigという、顔のトラッキングしてCGキャラクターに表情を反映した映像を出力するソフトに、アニメやイラストらしい見た目で半立体的な動きの表現ができるLive2Dのモデルが読み込めるモジュールを組み合わせたもの。
www.youtube.com

  • Steamで購入できる
  • FaceRigが顔のトラッキングを行う
  • Live2Dがアニメやイラストらしい表示部分を担当
  • 顔以外の、手などのトラッキングには対応していない

最後に

コンピュータの高性能化や3DCG技術の発達、およびMMDの登場の影響などもあり、かなり短い期間でもそれなりの映像がつくれるようになった。このことが、アドリブを主体としたCGアニメの興隆のキーとなったと思う。また、モーションキャプチャ技術の高性能化やコモディティ化によりそれをリアルタイムで行おうという試みが出てきた。そのような方向性で、これからもどのような作品が作られるか注目していきたい。

間違いの指摘や情報提供お待ちしております。
(2017-12-24 キズナアイ以降を追記)

*1:同じくヤオヨロズ制作の『けものフレンズ』もCinema4D.

*2:NOTTVも無くなりましたね。

*3:『CGWORLD』2014年9月号, vol.193. ワークスコーポレーション. pp.56-59.

*4:気づいた時には遅かったので行けなかった

*5:おみや付きのチケットは数が限定されてて、抽選だった。ところで、サイン入りのカラーボールが投げられてたんですけど、目の前の席の人が二人分キャッチしてて強かった、一つ分けてほしい…

*6:かと*ふくも活動終了してしまいましたね…寂しい。

*7:『CGWORLD』2014年6月号, vol.190. ワークスコーポレーション. pp.48-49

*8:自称

*9:ちなみに、KiLAが対応している慣性式モーションキャプチャシステムのPerception Neuronは、ファームウェアの設定を変えないとジャンプが反映されない(地面にくっついたままになる)と聞いたことがある。

*10:『CGWORLD』2017年9月号, vol.231. ボーンデジタル pp.74-79

*11:三次元位置を復元するには一つのマーカーが同時に3つのカメラから見えている状態でないと精度が出ないらしい。

少部数+安価な同人誌印刷所メモ

だいたい少部数(~100)しか刷ったことないので、オンデマンド印刷が中心。
使ったことあるのもないのもメモとして書いておく。適宜更新。
事例は2019年の消費税増税前の値段を書いているものがあり、現在は値上がりしている可能性があるので注意。

(最終更新: 2020/2/13 ライブラ ファクトリーを追加)

同人誌印刷所

ポプルス

  • http://www.inv.co.jp/~popls/
  • そこそこの部数(50位?)刷るならかなり安いと思う。
  • 締め切りはイベントごと・セットごとに個別に確認
  • 指定された、そのまま印刷できる形式で入稿すると(短い納期にするか)割引を受けられるサービスがある(その代わり原稿ミスがあってもそのまま印刷される)。
  • 表紙のクリアPP加工が独特で、黒い線が盛り上がって見える感じ。表紙見るとポプルスっぽいなーってわかったりする。人によっては好き嫌いあるかも。
  • オプションもいろいろある。グロス加工付き遊び紙が好き。自由に模様をつくれる。
  • データ入稿は色々な形式に対応しているようだが、ストレート値引きのフォーマットはPSD(ページ毎1ファイル)とPDF。ノンブルはなくてもよい
  • 同即イベント会場に直接搬入してくれるので楽。見本を先に郵送してくれるサービスもある(有料)。
  • 結構余裕をもって予備をつけてくれた。(が、場合によって異なるのかも)
事例:
  • 2016年冬コミ合わせ
    • スタンダードセット A5 20p
    • 100部
    • ストレートフェア (5%引, グロス加工付き遊び紙オプション半額)
    • 約17500円 (うち直接搬入料金1000円)
    • 予備10部
    • 比較的マットな感じでテカりが抑えられているが、ベタを光に当てるとあまり均一な感じはしない(反射する部分とそうでない部分が混ざっているため)

f:id:nixeneko:20180131170357p:plain:h360

オレンジ工房

結構使ってる人を見る。

  • http://www.orangekoubou.com/
  • ページ数少なめ・部数少ない場合はセットによってはポプルスより安いこともあるっぽい。
  • オプションが充実。
    • LKカラーの表紙は印象的でいい。表紙をめくると原色がババーン!って感じ。
  • ノンブル必須(無いと「乱丁・落丁に対する責任は一切負えません」)
  • 予備は1~2部っぽい。
  • コミケ合わせとかだと早期入稿で結構(一か月近く前だと20%とかだった)値引きされたり、ポスターなどが追加料金なしで作れたりするので、余裕をもって入稿できると強い。
事例:
  • 2017年夏コミ合わせ
    • ホワイトセット A5 40p 表紙PP加工なし 本文印刷指定なし
    • 100部
    • 夏コミスペシャルフェアSコース(1か月前入稿): 20%引, 直接搬入料金無料, 表紙紙替え(LKカラー)無料
    • 約21000円
    • 予備2部
    • 本文は多分グラデーション優先で印刷されたのだと思うが非常にテカる。その代わり黒は均一で濃いように感じる。

f:id:nixeneko:20180131165954p:plain:h360

booknext

  • https://booknext.ink/
  • A5, B5のみ
  • オプションはほとんど選べない代わりに安いっぽい。
  • 10部からだが少部数だとやや割高、50部以上はそこそこ安い。

同人誌印刷所おたクラブ(合同会社いこい)

  • https://otaclub.jp/
  • 10部から。50部程度までの少部数が安いが、それより多いとそんなにお得感はないかも。
  • 店舗(東京・大阪)へ行って印刷製本することも可能らしい(制作発送の場合とは別の料金体系になっている)。
  • カラー原稿の入稿は(CYMKでなく)RGBを推奨している。

OneBooks

  • http://www.red-train.co.jp/
  • 1冊から注文可。何冊刷っても1冊当たりの単価が変わらない。カラーでもモノクロでも同一料金。
  • 1冊だけ欲しい、というときに便利だと思う。
  • 予約がかなり早くに埋まってしまうみたいで、使いたければ早めに予約しないといけなさそう。イベント一か月前だと間に合わない感じがある。

ライブラ ファクトリー

  • https://factory.libra.sc/
  • POD同人誌通販のライブラが運営する同人グッズ制作サービス。本のほかにグッズも制作できる。
  • 1冊から注文可能。10冊以上等注文で割引あり。OneBooksや製本直送.comよりすこし高めかも。
  • 1冊だけ欲しい、というときに便利だと思う。

EditNet Printec

同人誌印刷サービス プリペラ

  • https://pripela.com/
  • 製本なし・印刷のみの「出すだけぱっく」は製本を自分でやらないといけない分、オンデマンド印刷の中でもかなり安い方だと思う。
    • 自分で製本をやりたい場合はよいかもしれない。

K9 (ケーナイン)

  • http://www.k-k9.jp/
  • 100部刷れるのであれば、とくとくセット(繁忙期不可)あるいは超早割(大型イベント合わせ)を使うと、他社のオンデマンドの価格帯でオフセット本(表紙カラーオフセット・本文オフセット)が刷れる。
  • オフセットは黒ベタの均一なマット感がきれい。
  • 本文用紙に「書籍用紙(淡クリーム)」を使うには追加料金必要。オプションも含めても表紙・本文ともに紙の選択肢は多くない。
  • 奥付は、全年齢向けの場合は無くてもいいっぽい(18禁では必要)
事例:
  • 2017年冬コミ合わせ
    • 超早割 A5 40p 無線とじ
    • 300部
    • 分納で自宅配送追加(+1500円)、マイページ割(5%引)
    • 約31000円
    • 予備18部
    • 原稿自体はオレンジ工房に入稿したのと同様であったものの、オレンジ工房と比べて本文全体がノド側へ1~2mmほど寄っていた。チェックした本だけなのか全体の傾向としてあるのかわからないが、ノド側のマージンには余裕を持たせた方がよいかもしれない。
    • オフセットだからだと思うが、黒ベタがマットで均一でテカりもなくきれい。一方でオンデマンドで印刷したものと比べると黒の色はそんなに黒々としてない気がする。

f:id:nixeneko:20180131171639p:plain:h360

一般の冊子印刷所

ちょ古っ都製本工房

  • http://www.chokotto.jp/
  • 1部から可能。20部程度の少部数でも安い。ネット見ると画像の印刷は同人誌専門のところに比べて見劣りするという意見もあるっぽいが、テキストには十分だと思う。
  • 他の印刷所と比較するとかなり安く感じる。
  • いくつかの営業日コースがあるが、6営業日コース位が利用しやすいと思う。4営業日は割高になる。
  • 納品希望日あたりの注文を受けられる数が決まっていて、コミケ数週間前とかになるとどんどん埋まっていくので、早めの注文ができると安心。
  • 入稿はPDF。なので、LaTeXなどで生成したPDFなどをそのまま入稿できる。一方でPDFでないものは変換が必要。
  • コミケ等に直接搬入はしていないので、宅配搬入などを使う場合は自分で調べる必要がある。
  • 予備は1~2部っぽい。
  • 確認したわけではないがエロはやめた方がいい気がする。
事例:
  • 2016年冬コミ
    • A4 76p 表紙モノクロ 本文モノクロ 6営業日コース
    • 30部
    • 表紙 レザック・175kg(有料オプション)
    • 約11000円 (うち送料650円)
    • 予備2部

製本直送.com

  • http://www.seichoku.com/
  • 1部から可能。数部だけほしい、みたいなときに役立つと思う。20部~注文で製本費用割引あり。
  • 特殊加工などのオプションは少ない?

Graphic

  • http://www.graphic.jp/
  • 同人誌向けサイト: http://www.graphic.jp/comic/
  • 印刷通販の雄。
  • 大学のサークル勧誘用のチラシとか刷るのに使ってた。
  • フルカラー本などで使ってる人をそこそこみる。
  • 表紙・本文ともに紙がかなりの種類から選べる。
  • 無料で印刷・色・紙見本を送ってくれるので、印刷注文する前に資料請求して確認するとよいと思う。
  • 金さえあれば様々なオプションが使える……。

レトロ印刷JAM

使ったことないけど使ってみたい。安いかどうかはわからない(仕様によって金額が異なるため)。

  • http://jam-p.com/
  • 孔版印刷。基本フルカラーではなく一色あるいは多色刷り。
  • 孔版印刷なので、オンデマンドとは比べ物にならない程の種類の紙とインクから選べる。
    • 黒い紙に大きく盛り上がるツヤニス、クラフト紙に白印刷、ハトロン紙に蛍光色で印刷など。
  • ミシン製本とかも素敵。
  • コミティアなどでもちょくちょく見る。特に蛍光色は目立つので好き。

デジカメで撮った文書をきれいに印刷する

文書をコピーしたいけれどコピー機が手元にない時など、デジカメで文書を撮影しておくということがある。
ただ、今度それを印刷しようと思った場合、そのまま印刷してもコピー機でコピーを取ったときの様にきれいに印刷することは難しい。

ここでは、デジカメで撮った白黒文書をPhotoshopできれいに加工して印刷することを目指す。
これにより、あまり大きく開いてスキャンのできない本などのコピーにも応用が可能である。

概略

  1. 傾きを補正する
  2. ハイパスフィルタをかける
  3. 2諧調化する

普通にコントラスト調整などを行うだけだと、光が均一に当たっていない場合など、字が掠れたり紙ごと黒く潰れてしまう場合が多い。

これを回避するために、ハイパスフィルタを用いる。ハイパスフィルタとは、その名の通り高周波成分を残すフィルタで、画像でいうと変化が激しいところ、つまりエッジ部分を抽出する。これにより、画像自体の色の濃淡ではなく、色の濃淡の変化を検出することで、ライティングが均一でなくても黒部分をきれいに抽出することが可能になる。

制限

  • 白黒はっきり分かれた画像にしか使用できない(グレースケールやカラーは無理)
  • 撮影時にボケたものはあまりきれいにはならない

手順

元画像がこれ。スマホのカメラで撮影した。デスクライトをつけて撮影している。紙のサイズはB5。
f:id:nixeneko:20170405004954p:plain

等倍だとこう。
f:id:nixeneko:20170405005213p:plain

文書の傾きを補正する

遠近法の切り抜きツールを選択
f:id:nixeneko:20170405010128p:plain

文書の4隅に合うように切り抜きの四角形を調整し、右上の「○」ボタンを押して決定する。
f:id:nixeneko:20170405010648p:plain

結果。印刷がずれてるので水平が傾いてる……
f:id:nixeneko:20170405010824p:plain

さすがに傾き過ぎなので切り抜きツールでちょちょいと傾きを直した。
f:id:nixeneko:20170405011207p:plain

ハイパスフィルタをかける

「フィルター」→「その他」→「ハイパス」を選択。この時画像を等倍程度で文字を表示しておくとフィルターの適用結果がみやすい。
f:id:nixeneko:20170405011917p:plain

今回は線の幅が3~4px程度だったので4pxと指定してみる(7px位にした方が線の掠れが小さくなるかもしれない。要試行錯誤)。小さいより大きめの方が良いが、あまり大きすぎるとフィルターをかける意味がなくなるような気がする。OKを押す。
f:id:nixeneko:20170405012255p:plain

するとハイパスフィルタが適用された状態になる。

二値化

次は二値化を行う。「イメージ」→「色調補正」→「2階調化」を選択
f:id:nixeneko:20170405012459p:plain

しきい値の設定を、ゴマ状のノイズが目立たなくなるまで小さくし(ここでは116にした)、OKを押す。しきい値を小さくすると文字が削れていくので適当な値に設定する。
f:id:nixeneko:20170405012812p:plain


結果、等倍だとこんな感じになる。
f:id:nixeneko:20170405013009p:plain

それを再度印刷したものを元文書と比較するとこのようになる。
f:id:nixeneko:20170405014653p:plain
「書」「暑」などの線が混んでいる文字は掠れているが、読めないことはない。もとがスマホの写真からということであるから、そこそこ実用性はあるのではないかと思う。

備考

  • 暗い環境で撮ったものであるとか、撮影時にブレがあると綺麗に出ない。その場合は元画像の諧調を残したままの方がいいだろうと思う。
  • 一眼レフなどのちゃんとしたカメラを使って、ちゃんと明るくライトを当てることで、大きく開いてスキャンのできない本などのコピーにも応用が可能である。
  • 実際にコピー機でコピーする際にも、ハイパスフィルタをかけたような諧調がでていることがあるため、内部処理でハイパスフィルタ相当の処理を行っているのではないかと思う。
  • ハイパスフィルタが使えない場合は、元画像から元画像にガウスぼかしをかけたものを引き算すると、ハイパスフィルタ相当になる。ガウスぼかしが高周波成分を除去するローパスフィルタだから納得という感じもある。

SVGでフレームアニメーション w/ Javascript

前回の記事でSMILによるフレームアニメーションを実装したが、これだとIEやEdgeで動かないので、Javascriptを用いてアニメーションを実装しIEやEdgeでも動くようにした。

デモ

<img>タグによる読み込み

<img src="animate_js.svg" style="width:100%">

imgタグで埋め込むとJavascriptによるアニメーションは動かないようだ(Firefox, Chromeで確認)。

セキュリティ上の目的で、GekoはSVGコンテンツを画像として扱う場合にいくつかの制限を設けています。

SVG as an Image - SVG | MDN

<object>タグによる読み込み

<object type="image/svg+xml" data="animate_js.svg" width="100%"></object>

objectタグで埋め込むとアニメーションは動作するようだが、一方で単純に<a>タグで囲むだけなどではリンクを張ることができないので、工夫が必要である。
参考: SVGをobject要素で表示してリンクにする - ういはるかぜの化学 - subtech

ソース

<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="768" height="432" viewBox="0 0 764 432">
 <def>
  <image width="100%" height="100%" id="00" xlink:href="img/00.jpg"/>
  <image width="100%" height="100%" id="01" xlink:href="img/01.jpg"/>
  <image width="100%" height="100%" id="02" xlink:href="img/02.jpg"/>
  <image width="100%" height="100%" id="03" xlink:href="img/03.jpg"/>
  <image width="100%" height="100%" id="04" xlink:href="img/04.jpg"/>
  <image width="100%" height="100%" id="05" xlink:href="img/05.jpg"/>
  <image width="100%" height="100%" id="06" xlink:href="img/06.jpg"/>
  <image width="100%" height="100%" id="07" xlink:href="img/07.jpg"/>
  <image width="100%" height="100%" id="08" xlink:href="img/08.jpg"/>
  <image width="100%" height="100%" id="09" xlink:href="img/09.jpg"/>
  <image width="100%" height="100%" id="10" xlink:href="img/10.jpg"/>
  <image width="100%" height="100%" id="11" xlink:href="img/11.jpg"/>
  <image width="100%" height="100%" id="12" xlink:href="img/12.jpg"/>
  <image width="100%" height="100%" id="13" xlink:href="img/13.jpg"/>
  <image width="100%" height="100%" id="14" xlink:href="img/14.jpg"/>
  <image width="100%" height="100%" id="15" xlink:href="img/15.jpg"/>
 </def>
 <use id="frame" xlink:href="#00"/>
 <script type="text/javascript"><![CDATA[
  (function(){
    var c = document.getElementById("frame");
    var fcnt = 0;
    setInterval(function(){
        fcnt = (fcnt + 1) % 16;
        fid = fcnt < 10 ? "#0"+fcnt : "#"+fcnt;
        c.setAttribute("xlink:href", fid);
    },125)})();
 ]]></script>
</svg>

ここでは<image>要素でxlink:hrefにファイル名を指定しているが、代わりにdata URI schemeで画像ファイルを埋め込んで外部参照をなくした方が汎用性が上がると思う。

何をやっているか

  1. <def>内で<image>によって各フレームに対応するラスタ画像を読み込んでいて、連番のidを振ってある。
  2. <use>は他の要素をコピーして表示するというもので、初期フレームをxlink:hrefに指定している。このxlink:hrefをJavascriptで更新する。
  3. 次に<script>でアニメーションをするJavascriptを定義している。setIntervalにより125ms = 1/8s (… 8fps)ごとに実行される関数の中で、setAttributeを用いて先ほどの<use>要素のxlink:hrefを次のフレームのidになるように書き換えていく。

以上、結構シンプルになったと思う。

改良可能な点

  • imageのidを2桁で0パディングしているけれども、しなくてもいいかもしれない。各フレームに表示するidの計算が楽になる。
  • また、2桁なので泥臭く0パディングしているが、0パディングするにはslice()メソッドを使うと楽らしい。桁数が多くなってくるとこっちの方がいいかも。

まとめ

SVGでフレームアニメーション?

  1. SVGにはラスタ画像を埋め込める
  2. SVGではアニメーションが可能

なら、GIFアニメみたいなアニメーションも可能では?と思ってやってみた。

作成したもの

https://nixeneko.sakura.ne.jp/hatenablog/20170330-svganim/animate.svg
アニメーションは使いまわし: 【けものフレンズ】「ネコ科のフレンズ」イラスト/にせねこ [pixiv]


はてなブログsvgタグをコピペしようとしたら、文字数が多すぎると怒られた(data URI schemeを利用して200万文字を超えていた)。

ソース

<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="768" height="432" viewBox="0 0 764 432">
  <image width="768" height="432" xlink:href="img/00015.jpg">
    <animate 
      attributeName="opacity"
      values="0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;1" dur="2s" calcMode="discrete"
      begin="0s" repeatCount="indefinite" />
  </image>
  <image width="768" height="432" xlink:href="img/00014.jpg">
    <animate 
      attributeName="opacity"
      values="0;0;0;0;0;0;0;0;0;0;0;0;0;0;1;0" dur="2s" calcMode="discrete"
      begin="0s" repeatCount="indefinite" />
  </image>
  <image width="768" height="432" xlink:href="img/00013.jpg">
    <animate 
      attributeName="opacity"
      values="0;0;0;0;0;0;0;0;0;0;0;0;0;1;0;0" dur="2s" calcMode="discrete"
      begin="0s" repeatCount="indefinite" />
  </image>
  <image width="768" height="432" xlink:href="img/00012.jpg">
    <animate 
      attributeName="opacity"
      values="0;0;0;0;0;0;0;0;0;0;0;0;1;0;0;0" dur="2s" calcMode="discrete"
      begin="0s" repeatCount="indefinite" />
  </image>
  <image width="768" height="432" xlink:href="img/00011.jpg">
    <animate 
      attributeName="opacity"
      values="0;0;0;0;0;0;0;0;0;0;0;1;0;0;0;0" dur="2s" calcMode="discrete"
      begin="0s" repeatCount="indefinite" />
  </image>
  <image width="768" height="432" xlink:href="img/00010.jpg">
    <animate 
      attributeName="opacity"
      values="0;0;0;0;0;0;0;0;0;0;1;0;0;0;0;0" dur="2s" calcMode="discrete"
      begin="0s" repeatCount="indefinite" />
  </image>
  <image width="768" height="432" xlink:href="img/00009.jpg">
    <animate 
      attributeName="opacity"
      values="0;0;0;0;0;0;0;0;0;1;0;0;0;0;0;0" dur="2s" calcMode="discrete"
      begin="0s" repeatCount="indefinite" />
  </image>
  <image width="768" height="432" xlink:href="img/00008.jpg">
    <animate 
      attributeName="opacity"
      values="0;0;0;0;0;0;0;0;1;0;0;0;0;0;0;0" dur="2s" calcMode="discrete"
      begin="0s" repeatCount="indefinite" />
  </image>
  <image width="768" height="432" xlink:href="img/00007.jpg">
    <animate 
      attributeName="opacity"
      values="0;0;0;0;0;0;0;1;0;0;0;0;0;0;0;0" dur="2s" calcMode="discrete"
      begin="0s" repeatCount="indefinite" />
  </image>
  <image width="768" height="432" xlink:href="img/00006.jpg">
    <animate 
      attributeName="opacity"
      values="0;0;0;0;0;0;1;0;0;0;0;0;0;0;0;0" dur="2s" calcMode="discrete"
      begin="0s" repeatCount="indefinite" />
  </image>
  <image width="768" height="432" xlink:href="img/00005.jpg">
    <animate 
      attributeName="opacity"
      values="0;0;0;0;0;1;0;0;0;0;0;0;0;0;0;0" dur="2s" calcMode="discrete"
      begin="0s" repeatCount="indefinite" />
  </image>
  <image width="768" height="432" xlink:href="img/00004.jpg">
    <animate 
      attributeName="opacity"
      values="0;0;0;0;1;0;0;0;0;0;0;0;0;0;0;0" dur="2s" calcMode="discrete"
      begin="0s" repeatCount="indefinite" />
  </image>
  <image width="768" height="432" xlink:href="img/00003.jpg">
    <animate 
      attributeName="opacity"
      values="0;0;0;1;0;0;0;0;0;0;0;0;0;0;0;0" dur="2s" calcMode="discrete"
      begin="0s" repeatCount="indefinite" />
  </image>
  <image width="768" height="432" xlink:href="img/00002.jpg">
    <animate 
      attributeName="opacity"
      values="0;0;1;0;0;0;0;0;0;0;0;0;0;0;0;0" dur="2s" calcMode="discrete"
      begin="0s" repeatCount="indefinite" />
  </image>
  <image width="768" height="432" xlink:href="img/00001.jpg">
    <animate 
      attributeName="opacity"
      values="0;1;0;0;0;0;0;0;0;0;0;0;0;0;0;0" dur="2s" calcMode="discrete"
      begin="0s" repeatCount="indefinite" />
  </image>
  <image width="768" height="432" xlink:href="img/00000.jpg">
    <animate 
      attributeName="opacity"
      values="1;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0" dur="2s" calcMode="discrete"
      begin="0s" repeatCount="indefinite" />
  </image>
</svg>

もちろん<image>要素のxlink:href属性にdata URI schemeを突っ込めば画像ファイルを埋め込むことができる。

なお、HTMLから<img>タグなどで画像としてSVGを読み込む場合には、セキュリティ上の理由から外部参照が無視されるため、xlink:hrefにはdata URI schemeによって画像を埋め込まないといけない。(参考: SVG as an Image - SVG | MDN)

何をやってるのか?

<image>要素に1フレームの画像を読み込んでいる。これをアニメーションの全フレーム分用意する。
今回は8fpsで16フレームなので、全体の時間は2秒となる。
一つのフレームに注目して見ていく。

  <image width="768" height="432" xlink:href="img/00000.jpg">
    <animate
      attributeName="opacity"
      values="1;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0" dur="2s" calcMode="discrete"
      begin="0s" repeatCount="indefinite" />
  </image>

これは16枚中の1番目に表示されるフレームに対応している。

  • まず、アニメーションさせる対象として不透明度をattributeName="opacity"として指定している。
  • アニメーションの時間は2秒なのでdur="2s"と指定している。
  • valuesは、durで指定された時間を等分し、attributeNameで指定された対象の値とする。今回は16フレーム中の1番目のフレームということで、16個の数値がセミコロンで区切られ、1番目のみ1、その他が0になっている("1;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0")。1は表示、0が非表示に対応する。
  • さらに、calcMode="discrete"を指定することで透明度が中間値にならずvaluesで指定した1か0、つまり表示・非表示の切り替えになる。
  • begin="0s"ですぐに再生されるようにしておき、repeatCount="indefinite"で何度もループされるようにしておく。

フレームごとに異なるのは、valuesの値で、1がどの位置に来るかということである。2番目に表示されるフレームなら"0;1;0;0;0;0;0;0;0;0;0;0;0;0;0;0"、などなど。
後は同じ。

感想

  • できるだけシンプルにしようとしたらこうなった。
    • ほかにもっと良い方法があるかもしれない。
  • この実装では各画像を切り替えているだけであるため、<image>タグの順番は関係ない。
  • GIFでいいじゃん!

20170331追記

同様のことを考えた先人が居た。

XNGファイルはSVGファイルに、データURIスキームでBase64エンコードされたJPEG画像をならべ、それをSVGアニメーションで送っているだけということがわかりました。

ついにGIFに代わる新しいアニメーション画像フォーマットが誕生か - GIGAZINE

これも同様にSVG SMIL animationを利用しているが、アニメーションの実現の方法が異なる。
フレームの若い順に幅0の<image>要素を重ねておき、<set>で各<image>要素について、前フレームのアニメーション終了時に開始するようにbegin属性を設定し(e.g. begin="A000310.end")、33msでwidthを100%にしているという実装だった。

SMILにはInternet ExplolerやEdgeは対応していない(し、する予定もなさそう)ため、画像は表示されないこととなる。
最初の一フレームは常に表示される設定にしておいた方が、アニメーションに対応していないビューアで見ても何らかの画像が表示されるため、よいかもしれない。

SVGでアニメーションをつくる利点?

時間軸方向の圧縮をしないため(Motion JPEGみたいな…)圧縮効率が悪いが、

  • 複数要素を独立してアニメーションできる
  • エフェクト(フィルタ)がかけられる
  • クリッピングができる

など、SVGの機能をそのまま生かせるので、表現力は高いはず。簡単なアニメーション撮影もできそうである(ブラウザが対応してるか知らないが)。

20170331さらに追記

内の「画像の参照先を変える」にて、画像をつかってパラパラアニメーションを作る方法が紹介されている。

これでは、<def>内で画像を読み込み、<use>内で<animate>のvalues属性にidの参照をセミコロン;で区切って指定している。これが一番シンプルで分かりやすいかもしれない。

Chinachu録画番組一気見プレイリスト生成ブックマークレット

Chinachuで録画番組をストリーミングで連続再生したかったので、そのためのXSPFプレイリストを生成する簡易的なブックマークレットを作った。

使い方

  1. ブラウザからWUIにアクセスする。
  2. 「録画済」番組一覧を表示し、「録画番組検索」などを行い、観たい番組を一覧表示させる。(同一ページ内に表示されている番組のみが再生対象となる)
  3. 下記ブックマークレットを実行
  4. ダウンロードされるxspfファイルをVLCなどで開く

ソース

ブックマーク用リンクは下にある。

コンテナはM2TS、コーデックは映像・音声ともに無変換とした。これらパラメータは無名関数の引数として指定している。この辺りは、普通に番組をストリーミングする時に使いたい設定にしてダウンロードしたxspfファイルやAPIを参考に変更するとよいと思われる。

(function(prm){
  t='<?xml version="1.0" encoding="UTF-8"?><playlist version="1" xmlns="http://xspf.org/ns/0/"><trackList>';
  d=document.getElementsByClassName("id");
  for(i=0;i<d.length;i++){
    b=d[i].textContent.substr(1);
    s="";
    for(e of Array.from(d[i].parentNode.childNodes)){
      if(e.nodeName=="#text"){
        s+=e.nodeValue
      }else if(e.getAttribute("class")=="episode"){
        s+=e.textContent
      }
    }
    t+='<track><location>http://'+window.location.host+'/api/recorded/'+b
      +'/watch.'+prm+'&amp;prefix=http%3A%2F%2F'
      +window.location.host+'%2Fapi%2Frecorded%2F'+b+'%2F</location><title>'+s+'</title></track>';
  }
  t+='</trackList></playlist>';
  e=document.createEvent("MouseEvents");
  e.initMouseEvent("click",true,f=false,window,0,0,0,0,0,f,f,f,f,0,null);
  a=document.createElementNS("http://www.w3.org/1999/xhtml","a");
  a.href=(window.URL||window.webkitURL).createObjectURL(new Blob([t],{"type":"application/xspf+xml"}));
  a.download="playlist.xspf";
  a.dispatchEvent(e);
})('m2ts?ext=m2ts&c:v=copy&c:a=copy'.replace(/&/g,"&amp;"));

ブックマーク用リンク