東京、展覧会巡り 2016・9
出張で8年ぶりぐらいに東京に行ったので、1日多めに滞在して、観光がてら展覧会巡りをしたので、感想を書いた。
杉本博司／ロスト・ヒューマン（東京都写真美術館）
杉本博司さんの作品はやたらどこか行くたびに見てる気がするけど、いつものように特に何も知らずに行った。
見始めて、職業別の小道具たちと、手紙のようなものがそれぞれ貼られていた。途中でこれは、さまざまな人の遺品と死ぬ寸前に書いた手紙か、と気づいた。
展覧会のタイトルを見直すと、「ロスト・ヒューマン」。
その手紙のようなものの書き出しは、すべて「今日、世界は死んだ。もしかすると昨日かもしれないー」だった。
さまざな職業や、生き方の、それが原因で、世界が滅亡しました、という懺悔のような遺書だった。
自分は、その遺品や、遺書の貼られた中を歩き、一体何者なのか。もしかしたらそう遠くない、人類の滅亡のあとに、たまたま何かの間違いでタイムスリップした自分か。
それらの失敗から何かを学び、そうならないように、今を生きろ、ということなのか、と思った。
世界報道写真展2016（東京都写真美術館）
いきなりおそらく死んでいる血まみれの少女が、父親に抱かれている写真が目に飛び込んできた。
展示されている写真には、スポーツや、暮らし、生き物、都市、そういったものもあったけれど、ほとんどが内戦や、戦争、そこから逃れる難民たちの写真だった。
報道写真とはなんだろう。それを見せられてどうしろというのか。
死んだ人が写った写真や、血まみれの写真は、それを見て胸を痛めたり、ということもあるかもしれないけど、ある種、見てはいけないものを見ている、というような、背徳感のようなもので何か心が動かされている部分があるのではないかと思う。
戦争はなんてひどいことなんだ、と、知る。と同時に、映画や本や、テレビでしか戦争を知らない僕らは、この報道写真、という事実を、エンターテイメントのように見て、また普通に日々を暮らしていく。
なんなんだ、と思う。
土木展（21_21 DESIGN SIGHT）
土木展、というネーミングと、アートディレクション（Tシャツ買ってしまった）。ブランディングがよいので、ついつい行ってしまうような感じと、写真OKで、子連れも多く。たのしい展示だった。
内容としては、普段、あまり意識することのない、土木を知ってもらおう、という感じやと思うんやけど、ちょっと思っていたよりも子供向け、というか、浅めだった。せっかくの土木なので、もっとディープに、知らない機材や、工法とか、え、そんな土台の上に僕ら暮らしてるんですか、みたいなの教えてほしかった。
宇宙と芸術展（森美術館）
チーム・◯ボ、という字面で、ちょっと行くのをためらうところですが、「宇宙」「芸術」と、自分が好きなものが2つも並んでいるので、見ないわけにはいかんでしょう。
作品数が多くて、時代も多岐にわたるので、結局、何が伝えたかったのか、あんまりよくわからなかったけど、NASAのTシャツが買えただけで個人的には大満足。
チーム・◯ボ の作品も一応並んで見たけど、1作品で、展覧会のタイトルの下に入れられるぐらい、東京では引きが強いワードなのかなぁ、と思った。
セミコンダクターの「ブリリアント・ノイズ」っていうインスタレーション作品が池田亮司っぽかったけど良かった。
この「宇宙と芸術展」と、東京国立近代美術館で開催中の「トーマス・ルフ展」の前売りチケットを、たまたま通りがかった金券ショップに前売りチケットが売っていたので買っていったんやけど、「宇宙と芸術展」のインスタレーション作品とか映像作品でけっこう時間とられたらしく、気づいたら16時半。
あ、なんか嫌な予感する、っと思って「トーマス・ルフ展」ちゃんと調べたら東京国立近代美術館の開館時間が17時までで、入場が16時半まで。金曜が20時までらしいので、ダメ元で電話で聞いてみたら、通常通りの開館時間です、とのことで、行けず。
無念。
残された前売りチケットはなんとか友達に譲れる事になったので、まぁ、よかった。
SVGシンボル化（SVGスプライト）
けっこう前ですが、GitHub のアイコンがアイコンフォントからSVGアイコンにすべて変わりました。(GitHubではここで書いてある方法ではなく個別でベタ書きですが） Delivering Octicons with SVG · GitHub
そろそろアイコンファイルの主流はSVGになりつつあるのかなぁ、と思っています。
スプライトというと、画像をいっぱいまとめて並べて、background-position で表示みたいなイメージになりがちですが、SVGの場合、ラスタライズしてしまうと全く良さがなくなるので、シンボル化、という方法で、スプライト画像のメリット＝ファイルをひとつにまとめて画像リクエストの回数を減らす、さらに svg アイコンのメリット = fill 属性で css で色変更、ということを達成できます。
1. Illustrator でつくった SVGアイコンをバラバラで書き出す
書き出し方はこちらが参考になる www.webcreatorbox.com d.hatena.ne.jp
パスを全部複合パスにして、1本にするだけでだいぶ軽くなりそう。 グループ化しただけになってて気づかなかったりするので注意。
※ 後述していますが、IE9で svg を単体で背景画像として読み込む場合は、書き出し詳細設定の「レスポンシブ」のチェックを外しておきましょう。
2. Gulp でシンボル化する
.pipe(svgSprite({
mode: {
symbol: true // Symble化
}
}))
いろいろ高機能なので、普通にSVGをスプライト画像にすることもできるけど、symbol 形式で書きだしてくれるので、これでバラバラで書きだしたSVGをひとまとめに。
.pipe(cheerio({
run: function ($, file) {
$('[fill]').removeAttr('fill');
$('[stroke]').removeAttr('stroke');
},
parserOptions: { xmlMode: true } // これがないと属性が全部小文字になって viewBox が viewbox になる
}))
書きだした sprite.symbol.svg のXMLから fill 属性（ベタ色） と stroke 属性（アウトライン色）を消すタスク。 Illustrator の段階で色をCMYK100%にして書き出すと。fill 属性がつかないけど、背景画像で個別に.svgを参照するときに色が黒いので、ベースのアイコンカラーが #000 以外の場合は、このタスクが必要。
parserOptions: { xmlMode: true } を最初つけてなくてドハマリしました。
.pipe(svgmin())
sprite.symbol.svg をミニファイする。
3. HTMLで読み込み
HTML
<svg class="icon"> <use xlink:href="/images/svg/sprite.symbol.svg#hogehoge" /> </svg>
.icon {
width: 20px;
height: 20px;
fill: red;
}
このままだと、useタグで別ファイルを読む込むのが IE と 古いEdge（今はサポートされてる）でサポートされてないらしい。
当たり前のことであるが，クロスドメインでのsvgファイルの参照は無効である．また，ie9においてはuse要素による外部svgファイルの参照ができないので注意が必要となる．
引用元："svg要素の基本的な使い方まとめ
MS Edgeでのサポート
Edge Dev のMSEdge on Win10 (Edge 20.10240.6384.0)で確認したところ、表示されませんでした。Edgeではuseを使った外部ファイルの読み込みがサポートされていないようなのですが、11月にリリースされたBuild 10586のEdgeHTML 13で機能が実装された とのことです。
引用元："Gulpを使ったSVGスプライトのアイコンシステムとワークフローの作り方 – Rriver
4. svg4everybody をつかって、IE9 以上で use 要素の対応
IE10 から条件付きコメントが非対応になっているので、普通に svg4everybody.js を読み込ませます。
IE9で svg を単体で背景画像として読み込むときの注意点
background: url('../images/svg/icon_search.svg') 0 0 no-repeat;
background-size: 18px 18px;
input の背景とかに単体の svg を出したい場合、このように background-size を指定すればいけるかとおもいきや、何故か背景画像の要素の幅に応じて、横幅が伸び縮みした。 調べてみると、元の .svg の xmlコードに width と height 指定がないとそうなるという感じらしく。
Be sure that your SVG has a width and height specified. If you're generating it from Illustrator, ensure that the "Responsive" box is unchecked as this option removes width and height.
引用元："css - Background-size with SVG squished in IE9-10 - Stack Overflow
IE9 対応する場合は、Illustrator の書き出し時に、レスポンシブのチェックを外しておかないといけないです。
4. svg4everybody から svgxuse に乗り換えてみる
svg4everybody でしばらく様子見していたのですが、時々、読み込まれない時があってモヤモヤしてたので、svgxuse という別のやつに乗り換えてみました。
svg4everybody uses requestAnimationFrame, which causes too many calls. I wrote a simple and lighweight polyfill for the very purpose of supporting
だがしかし、何故か IE9 だけ表示されてなかくてかなりハマって、どうやら、IE9 で表示させるためには、access-control-allow-origin ヘッダ（ドメインをまたいだリソースの参照を許可するやつ）をサーバに設定すればいけるっぽいということで、設定してみたものの表示されないという。。ことで、諦めていました。だれかおしえてください。
参考：JavaScriptプログラミング講座【クロスオリジンリソースシェアリングについて（CORS）】
その他参考:
SVGをIE等のブラウザ対応を考慮して使う方法まとめ（SVGのフォールバック画像など）｜2.IDEA
Retina対応にSVGは本当に使えるのか？ – Rriver
ゲームミュージックと生存確認をかねた画期的な: svgよくやる間違い・まとめ
2016年に見た海外ドラマ
アンダー・ザ・ドーム
★★★☆☆
LOSTとかウォーキング・デッド的な食料と人間の生存をテーマにしてるものが好きなので、見てみたけど、最後の方、LOST的な霊的な宇宙人的な展開なって残念だった。途中のドームの中にドームとか、出たり入ったりとかあたりまでは良かった。女王とかあたりで萎えた。
ゲーム・オブ・スローンズ
★★★★★
ゲーム・オブ・スローンズは最高です。シーズン追加待ち。
トゥルー・ディテクティブ／二人の刑事
★★★★☆
これも最高。インターステラー主演してたマシュー・マコノヒーの怪演が話題だったらしいけど、ほんとにそれに尽きる。アメリカ南部の質感とか、そのあたりもだいぶ好みでした。全8話というコンパクトにまとめているところも作品性をグッとあげてる。
トゥルー・ディテクティブ／ロサンゼルス
★★☆☆☆
シーズン1の続編ではないシーズン2、人が死にすぎるのと、よくわからない内容で、そんなに良くなかった。
ホームランド
★★★★☆
あまり期待せずに見たのがよかったのか、すごく良かった。俳優もキャラクターもそれぞれ素晴らしくて、CIAにも興味がわいて、CIAの本を読んだけど、実際のCIAは、ドラマで描かれるようなかっこいいものではなくて、よくない団体であるということがわかった。こちらもシーズン3で一旦終わったような感じがあってキリはよかったが、まだ続いているらしく追加待ち。
ブリッジ ～国境に潜む闇
★★★☆☆
なんとなくホームランドに似てるから見たけど、わりとまぁまぁよかった。
タイラント －独裁国家－
★★★☆☆
ホームランドの流れでCIAと中東にも興味が沸いて、みた、架空の中東の国を舞台にしているので、英語なのがおかしいけど、アメリカ人の大使がCIAっぽい感じとか、クーデターの感じとか、CIAの本で読んだ感じのシーンが多々あって、結構楽しめた。シーズン2で終わるかとおもいきやめっちゃ途中だった。
ザ・パシフィック
★★★★☆
CIAの流れで最近は戦争にも興味があって見た。すごいお金かかっているらしく。よくできてる。
内容としては、第二次世界大戦の日本との戦いを主に描いていて、戦地になった南の方の島から、沖縄、硫黄島、という戦いの流れもわかりやすくて、実話を基にした（といっても、アメリカ目線ではあるが）いろいろ勉強になった。
戦争については、本もけっこう読んでいて、まだ別途まとめたいと思う。
バンド・オブ・ブラザーズ
★★★☆☆
こちらは第二次世界大戦のナチスドイツとの戦いをメインに描いている、ザ・パシフィックがシーズン2で、こちらがシーズン1的な位置づけのようだ。
こちらも ザ・パシフィック 同様に、実話を元にしているが、始まる前に当事者のインタビューが入っていて、より実話感がある。個人的にお気に入りのシーンは、スピアーズ中尉が敵陣地の反対側にいる部下に命令を伝えるために、敵がいる中を走り抜けていって戻ってくるシーン。
