FNSドキュメンタリー 南京の日本人

FNSドキュメンタリー 南京の日本人

江蘇省南京でネットテレビ制作を手がける日本人のドキュメンタリー。竹内亮39歳、五年前南京に移り住んだ。
彼は日本における中国人、中国おける日本人を中国で伝えている。
我在这里的理由(私がここに住む理由)ではそんな人達の日常生活を放送している。
竹内さんが中国語通訳を頼んだことで南京出身の妻と知り合い、両親の大反対を経て結婚。
竹内さんは日本に住む留学生を応援したいと思っている。

12月13日、国家哀悼日に指定している。南京中にサイレンが鳴り響く。この時期になるとwechat上では日本に対しての悪意ある感情が渦巻く。

メディア取材などで、南京における虐殺について聞かれることが多いが、なんて応えたらいいのかわからないという。「過去のことで俺は知らない」といいたいが、そんなことを言ったらバッシングになる。
虐殺博物館にはもう7回くらい訪れているが、その度現実と向き合わなくてはならず、本当に疲れる。
中国人は完全に歴史と文化を分けて考えていて、日本人は嫌いだが、日本の文化は好きだと考える人が多い。

感想

どのように中国嫁両親を説得したのかが気になる。個人的な思い出は乗り越えられないくらい高いハードルで、生活する中で様々な批判や心無い言葉を浴びせられているのではないのだろうか。彼の原動力は中国嫁で、日本にいた留学時代の嫁の大変さを見てきたため、同じ様な生活を送っている留学生のちからになりたいと思っている。アンケートでは中国人、日本人半数以上がお互いの国に対して反感を持っている。その大多数がメディアを通じて知識を得た人々で、実際にその国に行って生活し、人と触れ合ったことのないものばかりだ。
メディアの情報を鵜呑みにして嫌悪する日本人、中国人に竹内さんは憤りを隠さない。
自分は中国に何度か行っていて、内陸の農村では日本人を差別する人にもあったけれど、基本的にさっぱりとしていてとても気持ちのいい人たちばかりだ。
自分も日本人の中国人嫌悪に対してちょっといらつくことがある。ただ竹内さんと違うのは、ほんとうの意味で苛つかないことだ。行ったこともないのに批判する人に対して「まぁ、行ったことないからメディアの情報しかなくてそう思うのは仕方ないよね」と思ってしまう。お土産が食べ物だったりすると、あからさまに迷惑そうな顔をする人もいる。悲しくなるが、中国の環境はものすごく良くなっていっているんだよ、とささやかに伝えることくらいしかできない。
竹内さんはきちんと、ムカつく!と感情を爆発させるばかりではなく、インターネットメディアでバイアスのかかった情報と戦うかのように、その土地に生きる異国の人の生の声をモニターの向こうへ届けて、戦っている。

このページでは Google マップが正しく読み込まれませんでした。が出た場合

2018年7月16日以降でAPIが有効になっていない、アクセスが多く無料枠を超えた場合に起こるそうです。

Google Mapを見るとこんなエラーが表示されていました。
2018年7月16日以降でAPIが有効になっていない、アクセスが多く無料枠を超えた場合に起こるそうです。
2018年7月16日以降でAPIが有効になっていない、アクセスが多く無料枠を超えた場合に起こるそうです。

対応方法

2つの手順が必要になります。
どちらもGoogleにログインする必要があります。

1.クレジットカードの登録
https://payments.google.com/#paymentMethods
クレジットカードの登録が必須となります。登録方法は今回割愛。

2.APIの取得
今回説明する部分です。
https://console.cloud.google.com/?hl=ja

左上の「プロジェクトの選択」をクリックします。

右上の「新しいプロジェクト」を押します。

プロジェクト名をつけます。

ホームに戻り、先程の「プロジェクトの選択」をクリックします。その後左メニューから「APIとサービス」を選択します。
ホームに戻り、先程の「プロジェクトの選択」をクリックします。その後左メニューから「APIとサービス」を選択します。

APIとサービスの有効化をクリックします。
APIとサービスの有効化をクリックします。

Maps JavaScript APIを選択します。
Maps JavaScript APIを選択します。

有効にします。
左メニューを表示し、APIとサービス>認証情報をクリックします。

左メニューを表示し、APIとサービス>認証情報をクリックします。
認証情報を作成>APIキー を押します。

認証情報を作成>APIキー を押します。
認証情報を作成>APIキー を押します。

APIキーが現れます。
APIキーが現れます。

APIキーの制限を行い、セキュリティを強化しましょう。「キーの制限」をクリックします。
APIキーの制限を行い、セキュリティを強化しましょう。「キーの制限」をクリックします。

HTTPリファラーを選択して、https://*.example.com/*の形で登録します。
以上です。

Google タグマネージャの設置方法(トリガー編)

前回Googleタグマネージャーを使ってAnalyticsを取得しました。
今度はトリガー機能を利用してユーザーのクリックを取得してみます。

クリックイベントを取得する方法

タグマネージャを利用してどれだけクリックが発生したのか調べてみましょう。
変数>設定>ページの「クリック」のチェックボックスを全て埋めます。
eventにもチェック。

トリガー>新規
リンクのみか、すべての要素を設定。この辺は取得したいクリックによる。

コンタクトページのURLを取得したいので、こんな感じになりました。以下の用にアンカーについてるクラスを指定してもクリックを取得できます。
Page URLとPage Pathの違いは以下
Page URLは「http://exampl.come/contact」
Page Pathは「/contact」

適当にトリガーの名前をつける。

左メニューのタグを押して、メインカラムの赤い新規ボタンを押します。
タグの設定>Googleアナリティクス・ユニバーサルアナリティクスを選択>トラッキングタイプを「イベント」にする
トリガー>先程作成したトリガーを選択

タグ>新規からGAを選択して以下のように設定。トラッキングタイプイベントとして、後はわかりやすいように適当に名前をつけた。
アクションには{{Click URL}}を入れた。これはクリック後の遷移先URLを取得するもの。
ラベルにはPage URLを選択。これはイベントが発生したURLを取得するもの。

保存してプレビューモードで試しにクリックをしてみる。

ガツガツ取得しているのを確認できたら正常に設定完了できています。

Google タグマネージャの設置方法(GA編)

Googleアカウントを取得し、ログインした状態で以下のURLにアクセスし、タグマネージャーのアカウントを作ります。
https://marketingplatform.google.com/about/tag-manager/

アカウント名はそれっぽい感じにします。

この後出てくる利用規約は適当に同意する。

Google analyticsを追加する

基本としてGAの追加を行います。新しいタグカードをクリックします。

からのカードが2枚上下に並んで出てきますが、まず上の段、タグの設定。クリックするとGoogleAnayticsが一番上に出てきます。それをクリックすると以下の画面のように設定項目が現れるので、入力していきます。GAの部分はわかりやすければ何でも良いです。トラッキングIDは、Analyticsから別途取得したものを入れます。

下のトリガーカードも設定します。All Pagesを選択。

保存してプレビューを押します。

こういうのが出て

実際のページでも、こういうのが出る。

GA側でもリアルタイム解析で確認します。

公開を押すと実際に反映されます。

次回は、タグマネージャにトリガーを設定して、何度このボタンが押されたのかを計測できるようにします。

追記
トリガーの設定書きました。

イラストレーターの透過pngがうまく書き出せない時の対処法

最近webデザインをするときにPhotoshopではなくイラストレーターをメインで使用するようになってきました。
Photoshopでは重すぎ、XDでは機能が限られすぎということで、Illustratorを使用しております。
Photoshop同様Illustratorにもアセットで一気に書き出し機能があるのですが、Photoshopとは使い勝手が違います。

例えばこんなデータがあるとします。イラストレーターの透過pngがうまく書き出せない時の対処法

六角形の画像をアセットでpng書き出してみます。

こちらが書き出された画像。透過はされましたが、元画像の幅も含まれてしまっていて、よくありません。

この画像をPhotoshopで開いて、イメージ>トリミング>透明ピクセルを選択しましょう。

きれいにトリミングできました。

しかし、元画像の幅が必要だという製作者ってそんなにいるのかな。
Jpg書き出し時なんてもっとひどくて、透過部分がないからマスク以外が真っ白くなってしまいます。トリミング

そういう場合はIllustratorでオブジェクトをライブラリに登録しましょう。そしてライブラリに登録されたオブジェクトをアートボードに配置します。そして更にアセットに追加します。それでようやくトリミングができる様になりました。

イラストレーターのアセットまとめ

ベクターデータなら問題なく自動書き出しに対応したデータを作成することができるのですが、画像、ことマスクで切り抜いてある画像に関しては全然だと思います。
上記の対処法を行っても数ピクセルの余白ができてしまい、結局Photoshopでトリミングをすることもありました。
使い勝手は良いんですが、イラストレーターのアセット書き出しはまだまだだと思いました。