In Minutiae, God Dwells.

いきなり本題。

アニメにおける歌唱・楽器演奏シーン描写の近代革命は、「涼宮ハルヒの憂鬱」によってもたらされたというのは、おおむね異論のないところであろう。

クオリティが突き抜けてて「もはや映画」という評判のうちに完結したTVシリーズの外伝を、（当初は2週間の予定だったのを変更して）3週間限定で映画館で上映するということで、『ヴァイオレット・エヴァーガーデン 外伝 - 永遠と自動手記人形 -』（以降ヴァイオレットちゃん外伝と表記）を、封切初日に見た。以下、その後あれこれ思ったことや考えたことを徒然に記す。

1週間ほど黙っていようかと思いましたが、自分自身の気持ちの整理が必要ではあるので、ご報告がてら端的に書いておきます。

先日、兄が他界しました。

ワタシと兄は疎遠というわけでは決してありませんでしたが、ことネット上においては、ほとんど接点らしい接点が無かったため、ワタシのブログやツイートを読んでいる方でリアルに彼を知る人はとても少ないと思います。それでも何かのご縁で兄をご存知の方もいらっしゃるかもしれませんので、生前よくしていただきましたこと、この場を借りて謹んでお礼を申し上げます。

2019/05/28追記：Multi Row TweetDeckがバージョンアップしてmac版Chromeでも問題なく動くのを確認したので、この記事はさらにカスタマイズしたい人向けメモということで。さらに、これらの機能拡張を導入してからも楽に調整できて扱いが楽なPWAによるアプリケーション化を強くおすすめします。



以前の記事の続き。

お気に入りだったMulti Row TweetDeckが、いつの間にかMac版Chrome上のTweetDeck＋BetterTweetDeckで動かなくなってしまったので、代替策を模索した結果のメモ。


要するにBetterTweetDeckのカスタムCSS機能であれこれすれば、TweetDeckの列表示をわりと簡単にカスタマイズできて、例えば2段重ね表示なんかも実現できる。まあ中身はWebアプリケーションなので、本職さんからすれば当たり前の話なんだけどね。つまり、以下はあくまでもワタシ個人の環境におけるメモ書きということで。

必要なもの：

• Mac版Chrome（BetterTweetDeckが対応しているFirefoxでもOperaでも基本は変わらないけど、各種コマンドを使って独立したアプリケーションにできるので、ワタシはChromeを推奨）
• BetterTweetDeck
• もちろんTwitterアカウント
• CSS3に関する知識（ググれば何とかなるけど勉強したいなら専門書などがあるとベター）

概要：

TweetDeckは列をどんどん追加できるけど、追加するごとに列の幅がwebブラウザウィンドウに対して1/2、1/3、1/4…1/nになって、各列が次第に縦に細長くなって読みづらくなる。そこでワタシはMulti Row TweetDeckを導入して、メインのTLは縦1本、mentionやDMなどその他の列は半分の高さで縦2段置きにして使っていた。

ところがある日（諸々の仕様変更の影響だと思われるけど）Multi Row TweetDeckが機能しなくなってしまって途方に暮れて仕方なくTweetenなどでしのいできたけど、突然代替案を閃いた。

ChromeでTweetDeck＋BetterTweetDeckの環境を開いた状態で「表示」＞「開発/管理」＞「デベロッパーツール」を選ぶと奇怪な呪文がウィンドウ右側に出てくるけど、注意深くそれを辿っていくと、TweetDeckの各々の列の見栄えは、CSSでは column クラス（でいいんだよね？）で定義されていることが分かる。であれば、BetterTweetDeckのカスタムCSS機能で強引に書き換えができるはず。

例えばカスタムCSSに

    .column {
        height : 50% ;
    }

とか書くと、各列の高さが50％＝半分になる。しかしこれだと単純に横並びするだけで意味がないので、こんな感じでごにょごにょする。いま適当に書いたからまともに動かないかもしれないから自己責任で。内容の詳細はググって！

    .column {
        height : 50% ;
        display:-webkit-box;   /* old Android */
        display:-webkit-flex;  /* Safari etc. */
        display:-ms-flexbox;   /* IE10        */
        display:flex;
        -webkit-flex-flow    : column wrap;      /* Safari etc. */
        -ms-flex-flow        : column wrap;      /* IE          */
        flex-flow            : column wrap;      /* = flex-direction:row;flex-wrap:wrap; */
        float:left;
    }

んでワタシの環境でチマチマといじくった結果がこちら。最初の1〜2行は縦1列で幅が広め、その後の列は上が55％・下が45％の高さで2段重ねで幅が狭め、んで表示的に右端に来る列はList監視用のため縦1列で幅が狭めにしてある。それと1番目（メインのTL）以外の列は文字を小さくしたりもしてる。

    .column {
        display:-webkit-box;   /* old Android */
        display:-webkit-flex;  /* Safari etc. */
        display:-ms-flexbox;   /* IE10        */
        display:flex;
        -webkit-flex-flow    : column wrap;      /* Safari etc. */
        -ms-flex-flow        : column wrap;      /* IE          */
        flex-flow            : column wrap;      /* = flex-direction:row;flex-wrap:wrap; */
        float:left;
    }

    .column:nth-child(-n+2) {
        height: 100%;
        width: 28%;
    }

    .column:nth-child(2) {
        font-size: small;
    }

    .column:nth-child(n+3) {
        height: 55%;
        width: 23%;
        font-size: small;
    }

    .column:nth-child(n+5) {
        height: 45%;
        width: 23%;
        font-size: small;
    }

    .column:last-of-type {
        height: 100%;
        width: 19.5%;
        clear:both;
        position : absolute;
        top: 0px;
        right: 0px;
        font-size: small;
    }

まあ参考例なので動かなかったらすまぬ。まあ、しばらくHTMLやCSSを触ってなかったけど、いまどきのコードって融通が効くけど複雑になったねえというのが正直なところ。余裕ができたら勉強し直して、このサイトももっとカッコよくしたい。

そんなわけで必要な人はレッツチャレンジ。困ったらカスタムCSSの中身を消せば元に戻るから何とかなる！もちろん責任は一切負いませんが。

「劇場版 響け！ユーフォニアム～誓いのフィナーレ～」レビューシリーズの最後は、総論と作画編に続いて音楽編。これまでの記事ではいささかシビアな見方をしてきたが、音楽は、これまでと同様の上質さでもって我々を楽しませてくれたと思う。

「ユーフォ」シリーズは、極めてすぐれた音楽映画である。

「誓いのフィナーレ」のレビューを3本立てで書くと決めたのは、実は何は無くともこの話をしたかったからである。


今回は間違いなくネタバレするので例によって改行を多めに：

「劇場版 響け！ユーフォニアム～誓いのフィナーレ～」については、総論めいたレビューとは別に、作画（原画・動画・撮影・3DCG etc.）編と、音楽編を別立てで書くことにした。

本作にはそれぞれ語るべき要素が盛りだくさんというのが第一の理由だけど、プロアマ問わず書かれる大半のアニメレビュー的な記事がストーリーとキャラクターしか追わない現状を、何とかして変えたいという個人的な思いもある。ワタシが常々言っている「アニメはつまるところ動く絵と音でできている」という話を、もっともっとたくさんしたいというのが、正直なところ。

というわけで今回のお題、「誓いのフィナーレ」の作画について。


以下、ネタバレの可能性があるので改行を多めに：

新年度の始まりである4月はいつも慌ただしい。ワタシも例に漏れず想定外の用事ができ、封切日の4/19に仕事を休んで新宿ピカデリーから川崎チネチッタへの鑑賞ツアー（？）を決行するというプランがあっさり崩れて、それでもやっぱりどうしても「ユーフォの新作を見たい」という欲求が我慢できなくなってしまったので、出張先の北海道にあった札幌シネマフロンティアで「劇場版 響け！ユーフォニアム～誓いのフィナーレ～」を朝イチで見た。



これは難しい。



エピローグを見届けた直後、何となくホッとしてうっすら浮かんだ涙を隠しつつ、まるで久石奏に「この映画、良かったですか？センパイ」とでも尋ねられた気持ちになって複雑な顔をしながらそう思ったのを、正直に告白しておく。


なお今回は、作画と音楽についてそれぞれ分けて書くことにしたので、このテキストは主に物語の話が中心となる。以下、いつものようにネタバレ含めてつれづれと書いていくので改行を多めに：

ワタシはメインのWebブラウザをSafari、サブをChromeにして長いこと使ってきたけど、Safariの機能拡張がどんどん無効化されて不便になってきたので、一部のWebサービスをChromeでデスクトップアプリ化して使うことにした。特に今回はTwitter純正のTweetDeckと艦これについて書く。要点は以下：

1. TweetDeckを使いやすくするためにBetterTweetDeckとMulti Row TweetDeckを導入
2. 艦これを遊びやすくするためにStylebotと艦これウィジェットを導入
3. AutomatorでChromeにパラメータを渡して特定のWebサービスをデスクトップアプリとして起動させる
4. 好みでOpen WithとBetter Typography | Smooth Fontsを導入

以下、手順を簡単にまとめる。

1. TweetDeckにBetterTweetDeckとMulti Row TweetDeckを導入

TweetDeckは（過去に買収された）Twitter純正Webサービス。過去にはMacやiOS用のクライアントソフトも存在したけど、様々な経緯を経て現在はチームでアカウントを運用するのが主目的のプラットフォーム的なものになっている。

これを使うメリットは広告などが表示されず単純に見やすいのと、カラムを追加することでリストや検索結果を同時に眺められること。横長のモニタが主流となった現在では全画面表示にすると威力が一発で分かるので、まずは試してみてほしい（無料です）。

ただこれだけだと少々気が利かないところがあるので、定番のBetterTweetDeckを導入する。設定が細かくできるだけではなく、かなりの数の画像や動画サービスのサムネイル画像が表示され、クリックするとその場で表示・再生できるようになる。Twitterカードに対応していないのがほぼ唯一の不満点だけど、まあそれは些細なことなので今後に期待。

このへんの詳細はこちらの記事などをご参照ください。

んで、ワタシは自分の好みでMulti Row TweetDeckを導入している。これは縦のTLが横に並ぶTweetDeckのカラムを上下に多段化するもので、動きの少ないカラムを2段表示させたりできる。全画面表示では使いたくないという場合にも重宝するかもしれない。少々クセがあるのが難だけど、そこは工夫してください。

2. 艦これのためにStylebotと艦これウィジェットを導入

今年の夏に見た「艦これ on ICE」以来、予備役から復帰してちまちまプレイしているのだけど、せっかくHTML5化されたことだし、もう少しすっきりした画面にしたい。

昔はStylishという機能拡張があってカスタムスタイルシートが気軽に反映できたのだけど気がついたら無くなっていたので、代わりにStylebotを導入する。基本設定はデフォルトのままで、こちらのサイトの記述を参考に（というかほぼ丸パクリ）してStylesに以下のCSSを追加した。

対象URL： http://www.dmm.com/netgame/social/-/gadgets/=/app_id=854854/

#area-game {
    height: 720px;
    overflow: hidden;
}
#game_frame {
    height: 720px;
    width: 1200px;
}
#main-ntg {
    margin: 0;
    padding: 0;
    text-align: start;
}
.dmm-ntgnavi, #foot, .area-naviapp, #spacing_top, #sectionWrap, #ntg-recommend, #w > img {
    display: none;
}
body {
    margin: 0;
    min-width: 100%;
}

ウィンドウサイズを適切に調整したら、こんな感じになる。シンプル！


次にこれは好みによるけど、今回は艦これウィジェットを導入してみた。通知や何やら機能が追加されるにも関わらずサーバサイドには負荷をかけないとのことで、いわゆる垢BANされることはないと思うけど、そのへんは自己責任で。

3. AutomatorでChromeにパラメータを渡して特定のWebサービスをデスクトップアプリとして起動させる

特定のサービスとはもちろんTweetDeckと艦これのこと。こちらのサイトの「openコマンドでChromeアプリ化する手順」を使うと、基本的にどのWebサイトも単独のデスクトップアプリ的に動かすことができる。以下、Automatorに設定したコマンド：

・TweetDeck

open -n -a 'Google Chrome' --args '--app=https://tweetdeck.twitter.com/'

・艦これ

open -n -a 'Google Chrome' --args '--app=http://www.dmm.com/netgame/social/-/gadgets/=/app_id=854854/'

アイコンの編集は任意だけど見栄え的にはやっぱり設定した方が気分はよろしい。画像検索とかするとこんなのとかこんなのが見つかるが、こちらも自己責任で。

4. 好みでOpen WithとmacOS Font Smoothingを導入

ここまでやって少々問題が。特にTweetDeckだけど、リンクを単純にクリックするとChromeで開いてしまうのだ。基本的にメインのSafariで開きたいのだが、上手い方法を見つけ出すまでかなりの時間を要した。必要なのはOpen Withという機能拡張。こちらを追加後、オプションに書いてある手順に従って設定すれば、リンク右クリックでインストールしてある任意のWebブラウザを指定して開けるようになる。ダウンロードした「open_with_mac.py」ファイルは場所を動かすと設定をやり直さないといけないらしいので、事前にApplicationフォルダにでも移動しておくとよいだろう。

それともうひとつ、MacでChromeを使ってると文字が何となくぼやけて見えたので、おまじない的な意味でBetter Typography | Smooth Fontsを導入してみた。Safariをはじめ他のアプリと比較しても同じようにすっきり見える感じになったので、これで良しとする。

というわけで、TweetDeckと艦これを例にして、WebアプリケーションをChrome経由でデスクトップアプリ的に使う方法を簡単に解説してみた。ウインドウ内部で操作が完結するサービスは独立させておくと何かと便利なので試してみてください。



ブルネイ泊地からは以上です。

相変わらず勢いだけで、結論めいた妄想を先に書く。記事のタイトルに挙げた2つの作品、「少女☆歌劇 レヴュースタァライト」と「ゾンビランドサガ」は、「アイドルマスター」シリーズを直近の始祖として「ラブライブ！」シリーズで一種の形式として確立された「最近のアイドルアニメ」を総括し再構築する、極めてアグレッシブなスタンスをもって作られていると思う。もちろん、アイドルを題材にしたアニメはアイマス以前でも枚挙に暇がないが、ここでは「最近のアイドルアニメ」を「モーニング娘。」や「AKB48」 から「BABYMETAL」、果てはあまたの地下アイドルと呼ばれる方々までの「いまどきのアイドル」を参照している一連の作品群を指す。昭和のアイドルとしての矜持と葛藤を抱えたゾンビィ4号こと純子ちゃんには申し訳ないが。

その昔、アニメは手で実際に描いた絵を1枚1枚写真に撮って作ると相場が決まっていた。そんなアナログな固定概念を打ち破る作品がここ数年立て続けに現れたのだけど、2018年も終盤になって、こんなに素晴らしいものをまさかTVアニメで毎週拝めるようになるとは想像もしていなかった。

「色づく世界の明日から」はそのタイトルが示す通り、色彩を主題としながら、アニメが絵と写真で作られてきたということを自覚しつつそこからの脱却を目指す、極めてチャレンジングな作品に思える。

その理由は見れば分かる。特に絵や写真を嗜む人なら、このキービジュアルがそのままアニメとして動き続ける事実がどれほど異様なことか、すぐにご理解いただけるだろう。