互換の備忘録（合作用）
お世話になっております。道頓堀の妖精です。改めまして、2021年春合作お疲れ様でした。年度終わり～年度初めという比較的忙しい時期ではありましたが、皆さんのコメントアートに対するモチベーションに感化される日々でした。今回も無事まとまってなによりでした。
さて、前回の合作では、初参加ということもあり自己紹介的なことを書いたわけですが、今回の執筆内容は合作期間中に決めていました。端末互換についてです。
少々長くなりますので、互換に興味のある方は一読いただけると幸いです。
この合作も、始動初期で何枚か作って以来、ほとんど互換を調整していました。
別にそこまで互換性に気を遣う必要はないかもしれませんが、昨今のスマートフォンの普及から考えるにアプリで視聴されている方々も多くいらっしゃるはずです。そこでぐちゃぐちゃな状態のコメントアートを見ても、「感動」は与えられないのではないかと思います。全体のイメージにも影響を及ぼす可能性もありますし。まぁ完全に僕のエゴではありますが。
はじめに
端末互換の概要に関しては、上記で触れたヒツジさんがまとめてくださっているCAwiki2（最後URL記載）に加え、コキスズメさんのTwitter固定ツイート、Negimaさんの互換表など、多くの方々がまとめてくださっているので、そちらをご参照ください。
ここで触れる内容は応用編になるかと思います。具体的に触れる内容は
① リード行仕様の違い
② 固定コメントとnaka流しコメントの表示仕様の違い
③ 大まかな互換調整方法（上記２つを含む）
の３つになります。
なお、今回まとめる互換性については、投稿者コメントを用いたものとなるため、文字数制限の厳しい視聴者コメントでは同様の処理ができないことが大いに考えられますので、その点はご容赦ください。また、ここで語る仕様は、最低限のものにとどめています。具体的には①PCブラウザ・②iOSアプリ・③Androidアプリの３種類です。その他にもゲーム機端末やスマホブラウザがありますが、「すべての表示において完全な互換は不可能である」という前提でこの記事を執筆しておりますので、その点はご留意ください。
では、それぞれの項目について少し詳しく見ていきましょう。
1. リード行仕様の違い
リード行に関する基本情報はこちらにヒツジさんがまとめてくださっているので、こちらもご参照ください。
https://w.atwiki.jp/commentart2/pages/42.html
1.1. リード行とは
そもそも、「『リード行』って何？」と思われる方々もいらっしゃると思いますので、簡潔に説明します。リード行についての知識がすでにある方は読み飛ばしていただいて結構です。
リード行とは、コメントの幅を決める行のことです。コメント幅とは、コメントを投下したときに黄色い枠（通称黄枠）が表示されますが、あの横幅のことです。
（画像１）
上の画像に見える黄枠の幅が違うのが分かると思います。ここに使っている空白文字を別の記号で可視化すると下のようになります（今回は視覚的に理解しやすくするためにU+2003「 」をU+2588「█」、U+2002「 」をU+258C「▌」で表示しています）。
（画像２）
つまり、赤で示したものは、そのまま「あいうえお」の文字幅がリード行となり、青色で示したものは「あいうえお」の文字＋空白文字「U+2003「 」（画像上ではU+2588「█」で可視化）」がリード行となります。
1.2. 「リード行を別の行に取る」とは
今回の合作参加者の方々は、僕が頻繁に「リード行を別の行に取る」という意味不明なことを言ったことを覚えている方がいらっしゃるかとは思います。これが「リード行」の理解を妨げてしまったかもしれません。体系的に説明します。
上の画像では、「あいうえお」の文字がある行にリード行判定が入ることを提示しました。「別の行にリード行を取る」というのは、現在リード行になっている行の文字数および文字幅以上の文字列を空白文字で作成し、独立した別の行（文字が一文字も入っていない行が好ましい）に置く、ということです。具体的に画像で示すと以下のようになります。
（画像３）
1.1.で示した幅と変わってはいませんが、リード行が「あいうえお」があった３行目から１行目へ移動しています。この操作を行うことで、1/2以下の空白文字を使っている場合でも、比較的簡単に横幅を揃えることができます。それに加え、リード行さえ予め決めておけば、細かい部分を調整するのに、無駄な部分に注意を割く必要がなくなります（例えば、リード行判定のある部分を変更すると、その部分の文字幅が変化し、全体の記号の位置に影響を及ぼす可能性があります）。
1.3. リード行判定の違いについて
さて、リード行についての説明を一通り終えたので本題に入りましょう。
全角文字（U+2588「█」やU+2003「 」など）のみを使用している場合は、画像２のような「最大文字数の行＝最大文字幅の行」となるのですが、全角文字以外を使用した場合「最大文字数の行≠最大文字幅の行」となる場合があります。
PCおよびiOSアプリ表示の場合、最大文字幅がリード行認定されますが、それがAndroidアプリだと、最大文字数の行にリード行判定が入ってしまいます。特にtabを使うと行の文字数が減ってしまうので注意が必要です。それを回避するための手段が、1.2.で説明した「別の行にリード行を取る」です。
（画像４：PC表示） （画像５：iOSアプリ表示）（画像６：Androidアプリ表示）
例えば、上の画像はPC上（左）の黄枠を見ると、赤黒両コメントの幅が揃っていることが分かります。これはnaka流しで表示しているのですが、PCとiOSアプリは同じ表示なのに対し、Androidアプリでは異なる表示になっていることが分かると思います。このようにズレの生じるのが、リード行判定が端末間で違うためです。
画像のコメントを見ると、見た目では1行目の幅が広いですが、文字数を見ると2行目のほうが多くなっています（1行目：aiueo＋U+2588「█」×10＝15文字、2行目：U+002F「/」×18＝18文字）。つまり、黒コメントにおいては、最大文字数≠最大文字幅となっています。そのため、PC表示とiOSアプリ表示でリード行判定を受けているのは最大文字幅である1行目ですが、Androidアプリ表示では最大文字数である２行目、つまりU+002F「/」が18個含まれる行にリード行判定が入っています。繰り返しますが、ここに端末間のズレが生じるのです。
コメントアート製作者のほとんどがPCで投下すると思いますが、その際には黄枠幅が揃っているおり、リード行のズレに気づけないので注意が必要です。これを揃えるためには、いくつかの手順を踏むのですが、3章で詳しく説明します。
2. 固定コメントとnaka流しコメントの表示仕様の違い
さて、先ほどのリード行の件ではAndroidアプリの仕様が他と異なるために生じる不具合についてまとめました。この章ではiOSアプリ仕様が他と異なる点についてまとめます。
2.1. 端末間表示差について
ここで論じる対象は、章タイトルにもあるように「固定コメントとnaka流しの表示」についてです。具体的に言うと、固定コメントが投稿された時間よりも後にnaka流しコメントが投稿された場合、PCおよびAndroidアプリ表示では固定コメントの上にnaka流しコメントが流れます。しかしながら、iOSアプリ表示においては固定コメントが上に来てしまいます。
視覚的に提示すると以下のようになります。
（画像７：PC表示） （画像８：Android表示） （画像９：iOS表示）
赤コメントが固定コメントで、黒コメントがnaka流しコメントです。３つの画像を比較すると、iOS表示のみ、固定コメントの裏にnaka流しコメントが潜っています。ちなみに、固定コメントは02:40.00に、naka流しコメントは02:41.00に投稿されています。
先ほどのリード行に比べると、弊害は少ないかもしれませんが、固定コメントとnaka流しコメントを併用しようとしたが互換がうまくいかない原因として、この可能性を知識として持っておいても良いかもしれません。
3. 互換調整方法
互換調整について詳細に説明していくと本当に１万字を超えるので、ここでは調整プロセスのみを列挙します。
- 互換性の保たれていない文字の有無をチェック（U+2580「▀」やU+239B「⎛」）
- それらの文字を可能であれば別の文字に置き換える（U+2580に関してはnaka流しであれば半行ずらしで対応できる）
- TabをすべてU+2003「 」に変換する
- リード行を別の行に取る（下で説明）
以上が、この合作中に僕が行った互換調整のメインプロセスになります。他にも、奥のレイヤーの文字を増やしてコメントが割れないように（レイヤー間の速度が微妙に異なるために奥の背景が見える）調整したり、複数の改行固定方法を使ったりなどがありますが、これらは割愛します。
3. 2. 上記２種の互換調整方法
3.2.1. リード行の調整方法
ここではリード行の調整のみに焦点を当てます。互換性が保たれていない文字（上記で例示したU+2580「▀」やU+239B「⎛」、tabなど）を使っている場合はリード行を調整しようが、互換性は補完できませんのでご容赦ください。
Wordやメモ帳などで製作される方は特に問題はないかと思いますが、各種製作ツールを用いる方は注意が必要です。というのも、それらのツールで視コメ（75文字以内）や投コメ（1024文字以内）になるように分割した場合、基本的には最適解になるようにコメントが分割されると思いますが、任意の行にリード行が入る可能性があります。つまり、全角文字以外を大量に使用したことで文字数が多くなっている行にもリード行が入る可能性がある、ということです。そもそも、そんなことお構いなしにリード行を製作中に決定した（製作レイヤー上で揃えた）場合はその行に入りますが。
では、どのように調整するかと言うと、
- それぞれの行の文字数を確認し、最大文字数を得る
- 最大文字数かつ最大文字幅以上になるよう、独立したリード行を作成
です。独立したリード行というのが、1.2で説明した「別の行にリード行を取る」というプロセスです。
これを行えば、基本的には互換性を補完することができます。
3.2.2. ②の調整方法
ここで苦労するケースはあまり考えられないと思う（そもそも固定コメントとnaka流しを併用される方は相当にコメントの知識があると思います）ので、簡潔にまとめます。
最も簡単な方法として、固定コメントとnaka流しコメントの調整については、固定コメントとnaka流しコメントの秒間隔を2.00秒空けていれば、naka流しコメントが固定コメントの上を通るようになります。
「naka流しコメントが流れている最中に固定コメントを出現させたい」という場合はコメントマスク機能（カラーコード#010101でコメントの上に蓋をするテクニック）を使用します。今回の合作のエヴァンゲリオンパートはこのテクニックを応用させて、後ろの文字を表示させるようにしています。
おわりに
互換マイスターになりつつありますが、もう互換修正はこりごりです。とはいえ、合作はチーム戦みたいなものなので、各人が得意なことを発揮し、不得手な点は他の人がカバーすることができます。
僕は・M・さんのように、参加者を取りまとめることもできなければ、酉管さんのように、生放送内でﾜｲﾜｲすることもできません。ただ、互換の知識に関しては、今回の合作でかなり経験値を摘むことができたので、少しはお役に立てるかもしれません。互換に関するご質問があれば、何なりとお申し付けください。ただし、丸投げはやめてください。試行錯誤もまた一興です。
なにより、納期が１週間ほど早まったにもかかわらず、投稿できる形になってよかったです。さすMでした。
もしも不明点および欠陥、取り入れるべき項目が他にありましたら、僕まで連絡いただけると幸いです。その都度対応しようと思います。
CAwiki2（コメントアート製作に必要な基本情報がまとめられています）
https://w.atwiki.jp/commentart2/pages/1.html
I am grateful to all whom it may concern:
Hayato
