ヒロスのブロマガ

Qwatch中画面・大画面両対応CAについて【制作編】

2013/12/01 23:02 投稿

コメント:2

  • タグ:
  • CA
  • Qwatch
  • コメントアート
  • ニコニコ技術部
  • 画面互換
※ニコニコのGINZA.verに伴いプレーヤーもGINZAwatchとなりましたが、コメント周りはQから変更されてないため私のブロマガでは引き続きプレーヤー名の表記は『Qwatch』とさせていただきます。

※ 11月6日付で運営による大画面対応のための調整が入り、リサイズ幅が少し修正されましたのでデータの再ダウンロードをお願いします。この調整については また別途ブロマガで紹介したいと思いますが、現状では比率を変更するといったような大きな調整は入ってないので前回までに紹介した考え方がそのまま使えま す。ですのでこのまま引き続き制作編に入ります。


 今回の目標はズバリ中大両対応のマスターです。そのための要点は2つ
1.2種のテンプレが使えるようになること。

2.幅調整に慣れること。
 この2つを押さえてしまえば思いのままに中大両対応のCAが作成できると思います。CAはやり方を知ってしまえば案外簡単なことが多いのです。幅調整が面倒だという方は1.だけでも押さえてしまえばほとんどの場面で苦労しないはずです。

 では今回使用するファイル『ender固定テンプレ』『中大両対応スペーサーテンプレ』『スペーサー高さ一覧』をダウンロードしてください。
https://www.dropbox.com/sh/zo4ozfnzpraocqr/htzJP-gVGF
  『ender固定テンプレ』『中大両対応スペーサーテンプレ』は空白文字に2001を主に使ってるものと3000を使ってるものの2種類ありますが、どちらを使え ばいいか迷った場合は3000の方を使ってください。必要に応じて組み合わせて使用する方が望ましいですが、3000の方だけ使うのでも十分です。
 2001の方を使用する場合は空白の文字化け(豆腐化)に注意することと、chromeでは幅が変わってしまうので注意してください。(chrome対応の方法はこちらhttp://ch.nicovideo.jp/gottuttu/blomaga/ar40154で詳しく紹介されています)


○各種ファイルの使用方法
・『ender固定テンプレ』
 使い方は非常に簡単です。例えば10行改行固定で三行目に「固定」という文字を表示したければ

コマンド :ue big ender (<改>は改行を表してます)
                   <改><改>固定<改> <改><改><改> <改><改><改>

と コメントします。つまり一行を丸々使って幅を固定してしまうわけです。幅固定行(リード行)は空いている行であれば別に何行目にしても構いません。ue shitaはどちらでもいいですが、fullとsizeのコマンドは間違うと表示がおかしくなるので注意してください(もちろんenderも忘れず に!)。これで簡単に両対応の固定コメントができます。ender様々ですね。


・『中大両対応スペーサーテンプレ』『スペーサー高さ一覧』
 この2つはセットで使用することをお勧めします。前回でも述べたように両対応では高さ調節のスペーサーさえしっかりしておけば大きくズレることはありません。そしてそのしっかりしたスペーサーが『中大両対応スペーサーテンプレ』にのってます。
 使い方はender固定のときと同じ要領で一行を丸々固定に使って、あとは必要な行数分改行してください(もちろんender必須)。ただ注意してほしいのはコメントの比率差は行数によって変わってくることです。ですので『スペーサー高さ一覧』を参照しながらスペーサーを決めることをお勧めします。目安としては黄色以下(比率差~1.5)であればほとんどズレは気にならないです(積みで重ね合わせる場合は青、もしくは紫)。
 『中大両対応スペーサーテンプレ』は高さ調節用のスペーサーに使う以外にも、リード行として使ったり、幅調整の目安行として使ったりすることができます。うまく活用してください。



○幅調整について

  幅調整は地味で面倒くさい作業なのでついつい敬遠してしまいがちですが、コメント幅が自由に扱えるようになると制作の幅がグンと広がります。幅調整もやり 方を覚えて慣れてしまえばそんなに大変なものではありません。中大両対応から少し脱線しますが基本的なことから紹介していきたいと思います。

・コメント幅の基準
 まず初歩の初歩です。CAではコメント幅の基準を『漢字幅』としています。こ れはニコニコのコメントはどの漢字の横幅もすべて一定で表示されるためです(ひらがなやカタカナは文字により横幅がばらけます)。そのため2000系の空 白文字が非常に重用されたり、二重リサイズの調整で明朝化(ひらがな・カタカナがすべて漢字幅化)が広く利用されたりしてきました。
 漢字幅が基準になるため、CAにおいてコメント幅は漢字幅~幅と表記されるのがふつうです。間違ってもコメント幅~pxとは表記しません。
 そして漢字幅の他によく利用される幅として00A0幅(半角スペース幅)と3000幅(全角スペース幅)があります。00A0幅は漢字幅の1/4強、3000幅は漢字幅の2/3強です。この『強』ってのが結構な曲者で、簡単に空白文字間の置換ができない反面このズレを利用すれば微妙に横にズラしたりすることができたりとなかなか食えない奴です。
 CAでは幅はこの3つを覚えていれば十分です。「じゃあそれ以外の幅を持つ文字(ひらがな、カタカナなど)はどうすりゃいいんだー!」ということになるんですが、残念なことにニコニコのコメントではほとんどの場合文字列から文字幅を推測することができません。そこで幅調整の作業が必要になってくるわけです。CA制作ではプレーヤーでの表示こそがすべてです。


・臨界幅リサイズ

  臨界幅リサイズとはその名前が示す通りある幅に達するとコメントのサイズが変わる仕様です。適当に文字数を大きくしていくとどんどんサイズが変わっていく のが確認できるかと思います。臨界幅リサイズなしではCAは語れないというくらい臨界幅リサイズは重要なんですが、今回は主に3点だけ覚えてもらえたらと 思います。

①猶予幅の存在

 臨界幅リサイズはコメント幅の変化に対して連続的に変化している わけではなく、ある臨界幅から次の臨界幅までに猶予幅が存在しています。フォントが大きいほどこの猶予幅が小さくなります。例えばbigの場合、漢字幅 43の次の臨界幅は漢字幅49.5なので実に猶予幅が漢字幅6.5ほどあります。
 猶予幅は大きければそれだけ幅調整が容易になるので幅調整においては非常に重要になります。また2重リサイズやender固定でもこの猶予幅が存在するので、うまく利用できれば省コメや省文字につながります。

②臨界幅リサイズの不安定さ

  臨界幅リサイズの重要な特徴として真っ先に思い浮かぶのはその不安定さです。コメント表示のバグは基本臨界幅リサイズ絡みか文字化け(フォント化け)絡み かのどちらかと思って差し支えありません。臨界幅に達しているかいないか微妙な状態があったり、臨界幅リサイズを含む改行コメントの一行だけが全く表示さ れなかったり、黄枠はリサイズされてるのに中の文字列はリサイズされていなかったりと臨界幅リサイズの不可思議な挙動は枚挙に暇がありません。また負荷も 2重リサイズほどではないにしろ結構高く、特に複数のサイズの臨界幅リサイズをいっぺんに表示すると負荷が大きくなるようです。ただ、何十コメも使わない 限りは気にする必要はないかと思いますので頭の隅にでも入れていおいてください。
 このように臨界幅リサイズは不安定なので、変な挙動が起きても慌てないことが大事です。経験としては文字列を少し変えると意外と直ることが多いような気もしますが、どうしてもうまくいかないときはすっぱりと諦め別の方策をとりましょう。

③中画面・大画面での横方向の不互換

  中大両画面対応での最大の難関は実は縦方向ではなく横方向です。縦方向の調整で中画面での臨界幅リサイズと実際は異なった大画面の臨界幅リサイズを無理や り利用している関係上、複数のサイズのコメントを組み合わせたCAを作る場合、横方向のコメント同士の相対位置がズレます。実際、両対応の調整は縦方向で はなく横方向の調整に割く時間の方が多いくらいです。ちなみに解決策は中画面と大画面の中間の表示をとるくらいしかないのが現状です。空白文字をできるだ け減らすとズレが少なくなるみたいですが・・・。


・幅調整の方法

 では肝心要の幅調整方法の紹介に入ります。幅調整の方法はいろいろあるんですが、今回は4つほど紹介します。

①空白文字以外の文字列を測定する
 最も基本的な調整方法です。例えば目指す幅が漢字幅20で空白以外の文字列が"あいうえお"の場合を考えます。
  まずは"あいうえお"の横幅を測定するのですが、測定方法は原始的に"あいうえお"をueかshitaでコメントした後、同じく投稿した計測用のコメント の文字幅を変えて漢字幅何幅かを測定します。測定に使う漢字は好きなものを使ってください。実際に測定したところ漢字幅4.5弱でした。猶予幅があるので アバウトで構いません。そしてこれに合わせて空白を算出し、結果"あいうえお"+2001×15+00A0×2の文字構成が導けました。
 何もないところから文字構成が算出できるのが利点ですが、普通は構成を算出した後に文字列の位置調整を行わないといけないため二重に手間がかかってしまいます。そのため目指す幅のテンプレコメントが用意されてる場合は次の方法を使った方が簡便な時がままあります。

②文字列全体を調整する

 目指す幅を持つコメントが既に手元にある場合は、それを目安幅として利用して文字列全体で調節した方が早いです。
 ①と同じ例を考えます。『中大両対応スペーサーテンプレ』にあるNO.16が20幅なため、これを small full ueなどで投稿します。そして"あいうえお"に適当に空白を追加したコメントを投下し、空白を増減させてスペーサーの幅に合うように調整したら完了です。
  『中大両対応スペーサー』のテンプレはほとんどのサイズを網羅しているため、この方法が一番簡便でお勧めです。small fullが初めて臨界幅リサイズをする漢字幅41幅まではこの方法が使えますがそれ以上となるとnakaを使うしかなくなりますので注意してください。

③高さを計測する

 どうして幅を調整するのかというと、結局のところ、ある特定の高さのコメントを手に入れるためです。ということでひたすら目標の高さになるまで調整するのがこの方法です。
  中大両画面両対応を目指す場合は中画面と大画面の両方の高さを計測するため非常に手間ですが、実際に高さを測っているため安心感はあります。しかし、両方 の画面で目標とする高さに調整するのは思った以上に骨が折れる作業なので、他の調整法と組み合わせて実測は確認程度に留めておくのが現実的だと思います。

④ズレを利用する

 二重リサイズやender固定に主に使います。固定されているかされていないかで幅を判断するわけです。慣れれば何行固定がどれくらいのズレを持つのかが分かって来るので、非常に有効です。
  また11/6のアップデートによって、比率差が大きいコメントはほとんどの場合大画面で隙間が生まれるようになりました(shita限定)。これを利用し てある程度正比率に近い幅になっているかどうかの確認ができます。実測よりお手軽なため思った以上に利用価値が高いです。


 いろ いろと紹介しましたが、実際のところCA全般に言えることですが習うより慣れろです。中大両対応を目指す場合、ほとんどのコメントを幅調整しないといけな いというような事態になったりもしますが、慣れてしまえばそれほど苦になりません。それでもやはり幅調整はできればやりたくない作業なので、できる限りテ ンプレを活用してみてください。


 お疲れ様でした。ここまでお付き合いいただきありがとうございました。以上で中画面・大画面両 対応CAについての説明を終わろうと思います。【実践編】はあくまでおまけ的な扱いなので気長に待っていただけると幸いです。質問等ありましたら気軽にコ メントなどでお願いします。
 それでは



●おまけ:ue shita積みによる重ね合わせ表示
 本文で書く余地がなかったためおまけになってしまいました;実際問題、中大両対応で精密さが要求されるの場面は『積みによる重ね合わせ表示』がほとんどだと思うので、おまけとして少し説明します。
  将来的にはブロマガhttp://ch.nicovideo.jp/2o79o33o/blomaga/ar348622で紹介されているようなテンプ レートを多く用意して必要に応じてそれを利用するのが理想ですが、現在の時点では一つ一つ調整しなければならないというような場面がほとんどだと思いま す。
 やり方については基本中大両対応と同じです。特に気をつけなければならないことはたったの一つです。それはueの高さ調節用スペーサーに気をつけること。これだけは注意してください。shitaのスペーサーについては11/6の運営による対応で高さ方向に関しては完全な互換性が達成されています。つまりshitaのスペーサーには何をつかっても構わないということです。
  では具体的にどれくらいの比率差のものなら大丈夫かという話になりますが、複数改行のものであれば『スペーサー高さ一覧』の紫または青、単行もしくは2行 程度であれば黄色までは問題なく使えると思います。どうしても1,2pxズレるというようであれば、比率差の絶対値ではなく+-(拡大縮小)が反対になる ようなスペーサーの組み合わせを使うようにしてください。スペーサーに2コメ割くときにしか利用できませんがある程度対応度が上がるはずです。
 大まかな制作の流れとしては
①ueの高さ調節用のスペーサーを選ぶ(1,2コメント)
②重ね合わせる文字を含むコメントを調整する
 (ここまでがカギ)
③高さが合うようなshitaのスペーサーを見つけ出す
(『スペーサー高さ一覧』でほしい高さを検索してやればほとんどの高さはでてきます)
④②と同じコメントを投稿して中大どちらでも重なっているか確認する。
という風な感じになるかと思います。①②さえしっかりしてればスイスイです!
  こんな感じでテンプレやデータを駆使すれば積みによる重ねも中画面のみのときと同じような感覚でできるようになります。以前まではshitaとの関係も考 えてueのスペーサーを選ばなければならなかったため、結構面倒でしたが運営の対応のおかげで非常に簡単にできるようになりました、運営さんありがとー。
 ではではー





コメント

ōrz
No.1 (2013/12/02 18:49)
以下は蛇足でしょうか?
拡張子 xlsx を開くのは
1.Excel2007以降(MS Office)
2.Excel viewer(無償) http://www.microsoft.com/ja-jp/download/details.aspx?id=10
 と互換パック(無償)(上のURLからダウンロードするときにオプション選択できる)
3.Apache OpenOffice(フリーソフト Windows,Mac,Linux) http://www.openoffice.org/ja/
4.LibreOffice(フリーソフト Windows,Mac,Linux) http://ja.libreoffice.org/download/
のいずれかをインストールすれば良い。
ヒロス (著者)
No.2 (2013/12/03 00:32)
Excelが入ってないということを全く想定してませんでした;
補足ありがとうございます!
閲覧用のフリーソフトなんかもあるんですねー
コメントを書き込むにはログインしてください。

いまブロマガで人気の記事