MacでXAMPPをインストールしたけど、アクセス禁止が出てしまったときの対応

XAMPPを久しぶりにインストールしてphpMyAdminにアクセスしようとしたら……

XAMPPを久しぶりにインストールしてphpMyAdminにアクセスしようとしたら……
Drupalをインストールしようと、XAMPPを久しぶりにインストールしてphpMyAdminにアクセスしようとしたら……なんかうまくいきません。なんでだ。
続きを読む

GifアニメPNGアニメの作り方

ソーシャルゲームのイラストを描く依頼を受けまして、自分絵かきでもないのにそんな事できないよ!とか思いつつ、なんとかこなしました。
その時活用した、絵心のない人間でもそれなりのドット絵がかける方法をいくつか上げていきます。
PNGによるアニメーションの作り方も掲載します。

ドット絵作り方


例としてイラストACより適当なイラスト素材をダウンロードしてきました。


PSで開いて幅を極端に小さくする。ポイントはニアレストネイバー法を選択すること。

ボロホロの画像
解像度ボロボロの画像が出来上がります。

ブラシの選択
ブラシは四角形ブラシを選択します。鉛筆ツールを1pxにすることでブロック状のドットを打てるようになります。。
消しゴムを使う場合もどっとになるよう、ブロックモードにします。

斜め線
ざざっと壊れた線を整えます。

斜め線
ポイントは斜め線の表現。

カット
このようにカットしてあげると、繊細な表現が可能になります。

GIFでのアニメーション

アニメーションさせます。
タイムラインパレットの「フレームアニメーションを作成」を押します。
するとレイヤー1が1こまめになります。

GIF
もう一コマ作りたいので新規コマアイコンをクリックします。更に現在のレイヤーをコピーします。
目を瞑らせたり、手を動かしたりした絵にします。

01GIF
GIF02
特定のコマで表示したいレイヤーを選択します。
画像では1コマ目のときレイヤー3を、2コマ目のときレイヤー2を表示するようにしています。

GIF保存形式
保存形式はこのように。ニアレストネイバー法なら、いくら拡大してもアンチエイリアスはかからず、ドットの絵になります。


これでGifアニメが完成しました。

PNGでのアニメーション

次はPNGアニメを作成します。APNGといいます。比較的新しいブラウザのみ動作します。
APNGならアルファチャンネルやより多くの色を使うことができます。

APNG
先程作ったPSDのレイヤーをPNGにします。
そののちAdobeAnimateCCをおもむろに開きます。

AdobeAnimateCC
好きなようにモーションをつけます。

ムービーの書き出し
ファイル>書き出し>ムービーの書き出しを選択します。

保存形式
PNGシーケンスを選択して保存します。

大量のPNGが保存されました。

アプリでこのPNGを連結させます。
以下のURLからアニメ画像に変換する君をインストール。
https://itunes.apple.com/jp/app/anime-hua-xiangni-bian-huansuru/id1127676902?mt=12

アニメ画像に変換する君
このように設定して、ウィンドウ内に先程の大量PNGをドロップします。

APNG
3ファイル保存するかダイアログが表示されるので、三回とも保存します。単体で使う場合は最初のPNGだけ保存すればいいでしょう。


ほらできたAPNG。対応していないブラウザではアニメーションしません。
というかWordPressで画像圧縮プラグイン使ってるからアニメーションPNGではなくなってしまい、見れなくなっちゃうでやんの〜。

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を取得するもの。

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

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