面白きことは良きことなり

拙く未熟なiOSエンジニアの備忘録と戯言

GIFアニメなんて古い!時代はAPNGだ!(12/04追記)

画像アニメといえば、昔から知られたGIFアニメが有名で、
アニメーション画像が貼られていたらまず誰しもがGIFアニメだと思うことでしょう。

だがしかし!ITの世界は日進月歩で、GIFアニメなんて数十年前の代物だし古い!
今はアニメーション画像の形式にAPNG(拡張子は.apngまたは.png)というものがあるのを知っているだろうか?

お馴染みWikipedia
Animated Portable Network Graphics - Wikipedia

要するにアニメーションするpng画像である。

ご覧の通り透過処理したアニメーションももちろん可能
(APNGのアニメーションしているものをGIFアニメで貼り付けなければお見せできない皮肉)
f:id:aryzae:20161130010628g:plain

ちなみに、Hatena BlogにAPNGアップロードして表示させると↓ご覧の有様さ!
f:id:aryzae:20161130011208p:plain


実は大半の人は知らず知らずに見てたら、使っていたりする。
自分は知って驚いたのだが、LINEのアニメーションスタンプがAPNG形式だったりする。

ics.media


同サイトの記事で、APNGの動作環境が書いてあるのだが、改めて自分の方でも
iOS含めどこまで対応しているのか検証してみた。
ics.media

検証結果 (2016/11/30)

OS
表示箇所
結果
備考
iOS 10.1.1
写真(Photo Library)
×
1コマ目で静止
Safari
UIViewController
WKWebView
SFSafariViewCotnroller
UIImage
×
1コマ目で静止
iOS 9.3.5
写真(Photo Library)
×
1コマ目で静止
Safari
UIViewController
WKWebView
SFSafariViewCotnroller
UIImageView
×
1コマ目で静止
macOS Sierra 10.12.1
Safari 10.0.1 (12602.2.14.0.7)
ローカルにあるAPNGを直で読み込ませても動作する
Google Chrome 54.0.2840.98 (64-bit)
×
拡張機能"APNG"を入れればサーバ上のものは表示可能
Preview
アニメーションはしないが各コマが表示され、GIFアニメを開いた時と同じ挙動のため◯に
Windows10
InternetExplorer11 11.589.10586.0
×
1コマ目で静止
Microsoft Edge 25.10586.0.0
×
1コマ目で静止
Google Chrome 54.0.2840.99 (64-bit)
×
拡張機能"APNG"を入れればサーバ上のものは表示可能


もっと広く普及してGIFアニメと同等以上の環境で動作するようになってほしいものです。
GIFアニメよりも綺麗だし、容量は今の時代なら言うほど大きくならないし、対応していないところが多い今!
今対応するとアピールポイントになるんじゃないかな〜Hatenaさーん。

===

12/04 追記
表にUIImageViewの検証結果追加。
UIImageViewでもアニメーションして欲しかったが、残念。
UIImageViewのメソッドを使用してアニメーションさせるしかないかなぁ〜。

購入予定や気になっているMacツール(アプリ)

medium.com

この記事を見て、"Tower 2"と"Kaleidoscope"が欲しいなーと思った。
セール時に買い忘れないようにと、よくアプリ名忘れるのでメモがてら記載。
"Pixelmator"は買ったし、"Graphic"や"PaintCode 2"、"Sketch"は買う予定だけど、タイミング伺っている感じだな。

Kaleidoscope

Kaleidoscope

Kaleidoscope

  • Black Pixel
  • 開発ツール
  • ¥8,400

Pixelmator

Pixelmator

Pixelmator

  • Pixelmator Team
  • グラフィック&デザイン
  • ¥3,600

Graphic

Graphic

Graphic

  • Indeeo, Inc.
  • グラフィック&デザイン
  • ¥3,600

PaintCode 2

PaintCode 2

PaintCode 2

  • PixelCut s.r.o.
  • 開発ツール
  • ¥11,800

PlayStation VRの体験

PlayStation VRの1次予約〜3次予約が見事Amazonとヨドバシで全敗したものの、
半分自棄になって発売日前日からヨドバシカメラに並んで購入しました。

気になっていたものの、実際体験としてどうなのだろうという興味本位から
VR界では安くとも値段としてはそれなりの53,000円と等価交換しました。

10日程経ち、熱も落ち着いたところで感想を書こうかと思い記事にしました。

VRを正直舐めてたと言わざるをえない!
これは体験した人しか本当にわからないし、想像できないものだと思う。

いつもの平面的画面から突如ゲームの世界に突入したかのような錯覚する感覚と
確実にゲームのその場に画面越しではない自分が存在しているかのような体験。


この体験をどうにか少しでも伝えることを出来ないものかと思い、
ブロードキャストを行ったり、スクリーンショットを撮ってみましたが、
PlayStation VR越しでなければ全部画面を通して平面的になるので伝わらないですね。

興味ある人に限らず、興味ない人も体験会や友人知人の持っている人にやらせて貰い、
新しい体験を体感してもらいたいと思ってます。

プレイしたゲームと各々の感想を以下に連ねます。
PlayStation VR WORLDS
Ocean Descent(オーシャン ディセント)とVR Luge(VR リュージュ)をプレイ。
Ocean Descentだけのために購入したも同然で、スキューバ体験できるかと期待してましたが、
実際は何も操作できず、なすがまま海溝まで降りたりサメに襲われたりするだけです。

だけと書いているものの実際はゲームとわかっていつつもサメに襲われる時は、
冷や汗ものだったり、水中ということもありなんとなく息苦しさを感じました。
また、下から湯気?のようなものが立ち上がってくる時は、自分だけかもしれませんが、
硫黄のような匂いを感じる錯覚すらあり、疑似体験としては十分なものでした。
f:id:aryzae:20161023225311p:plain
f:id:aryzae:20161023225306p:plain
リュージュは、スクリーンショットないですが、壁にぶつかると脳が揺れるような錯覚や、
ジャンプしている時、浮遊感があり凄かったです。酔うタイプのゲームなので、長くプレイできません。

アイドルマスター シンデレラガールズ ビューイングレボリューション
そこにうさみんが居て、踊っている!ライブにまさに参加しているかの感動が素晴らしかった。
また、デレマスをVR用に焼き直したものと侮っていたら
各キャラクター毎に振り付けも異なっているこだわりがありスタッフの熱の入りようが良いなと思いました。
個人的にはきらりの巨体を見たかったですが、DLC待ちですね。
f:id:aryzae:20161023225332p:plain
f:id:aryzae:20161023225341p:plain

サイバーダンガンロンパVR 学級裁判(デモ)
躍動感ある学級裁判は面白かったです。キャラクターが跳び蹴りかましてたりとかね。
霧切さんを見つめると見つめ返してくれるので、少しドギマギしたり、
葉隠の毛髪のボリュームの多さに圧倒されたり、朝比奈さんのボリュームある胸に圧倒されたり…。
残念なのは、目と口がのっぺりしていて凹凸がなく変に人工的に感じられたところかな。
最後のおしおき体験は良かったです。
f:id:aryzae:20161023225430p:plain
f:id:aryzae:20161023225437p:plain
f:id:aryzae:20161023225445p:plain

サマーレッスン:宮本ひかり セブンデイズルーム
前評判だけはとても高く話題性のあったサマーレッスン。
VR全般的に言えることですが、決してシャープにくっきりはっきりとした映像があるわけではないです。
そのため、文字もややぼやけてたりするんですが、大抵のVRソフトは気にならないものの、
サマーレッスンだけは一番ぼやけ具合酷く視力が悪くなったのではないかと錯覚する程度。

初対面にも関わらず、やたらフレンドリーすぎるやりとりもあり、共感も感情移入もできなく
退屈な作業ゲーでした。目や口はダンガンロンパと違い、ちゃんと凹凸があってより人間味はあり、
女の子と対面している感じはありました。
f:id:aryzae:20161023225539p:plain
f:id:aryzae:20161023225545p:plain
f:id:aryzae:20161023225552p:plain

Don't be Afraid -Biohazard® × L'Arc-en-Ciel on PlayStation®VR-
ソニーのカンファレンスで発表され、少し期待していたものの非常にがっかりしたソフト
Don't be Afraidの歌詞が空間上に表示されたり、バイオハザードの世界観の装備をしたラルクメンバーの
モデルを眺めるだけ。
てっきりDon't be AfraidのPVがバイオハザードの世界観でVRとして見られるのかと思っていただけに肩透かしが酷かった。

初音ミク VRフューチャーライブ(体験版)
初音ミクのライブはいったことないので、わからないですけど、こんな感じなのかなー?
というのを体験できた感じ。
映像+リズムゲーでサイリウムをテンポよく振ったり、突如飛んでくるノーツを押すソフト。
初音ミク音ゲーであるProject DIVAをVR化した感じですかね〜。
個人的には、Project DIVAをやっていなかったりボーカロイドの曲に興味がないので、体験版のみで満足しました。


PlayStation VRは装着を正しく行わないと、映像がぼやけたり、目の前が曇ったりするので
そこらへんの調整に慣れが必要ですが、誰でも気軽にVR体験をできるので今後の展開に期待したいです。
現状ミニゲームやデモ、映像のみのソフトしかない印象なので、ガッツリとしたフルプライス作品を
心待ちにしています。
次はイーグルフライトローラーコースタードリームあたりをやりたいなー。

SourceTreeでgit-svnのリモートが表示されなくなった問題

現場ではSourceTreeを用いてgit-svnでバージョン管理を行っています。
そんなある日、リモートにあるSubversionの名前の横にある▷が表示されなくなっていました。

以下加工画像によるイメージ
before:
f:id:aryzae:20161024004255p:plain

after:
f:id:aryzae:20161024004258p:plain

これではサーバからプルもプッシュ何もできません。
設定も環境も弄っていないのに、突然こんな状態になっためサーバ側が何かやったのだろうー
と思い、問い合わせるも何もしていないし、アカウントも正常に許可されているとのことでした。

結局原因も不明な上、調べても情報が何も出てこなかったですが、
現場の他の方が解決方法を見つけてくださったので
他に遭遇した人がいた時のために残しておきます。


【解決方法】
1. SourceTreeの設定 > リモートタブ > Config がいるを編集… の順に選択
f:id:aryzae:20161024143755p:plain
f:id:aryzae:20161024143748p:plain

2. ConfigファイルのSVN関係の箇所で branches の末尾を/branches/*に変更して保存

// 例1
branches = branches/*:refs/remotes/svn/*
を↓のように書き換える
branches = branches/*:refs/remotes/svn/branches/*

// 例2
branches = branches/*:refs/remotes/origin/*
を↓のように書き換える
branches = branches/*:refs/remotes/origin/branches/*

3. リモートのSubversionをフェッチ。
    これで▷が復活してリモートのSubversionが使えるようになります。

4. 手順「2.」でやった書き換えを元に戻す。(重要)
    最後の書き換えた内容を元に戻さないと、
    プッシュ時に謎のコンフリクトが発生するようになり、正常にコミットされなくなります。

Slackでアンケート機能を使う

現場の作業で、ルールを決めたり、コードの書き方に迷った時にこういう書き方はありかなしか
というのを聞きたいなーと思うことがしばしばある。

チームでSlack使っているし、アンケート形式で聞けたら解決できそうかなと思い、
Slackでアンケート機能を使うための方法をまとめておく。

バニラなSlackにはアンケート機能がないため、Pollyという連携機能を使用します。
www.polly.ai


【手順1.】
上記のSlackのPollyサイトから"Add Polly to Slack"をクリックして、使用しているSlackチームに追加する。
f:id:aryzae:20161024001123p:plain

【手順2. 】
Authorizeをクリックしてpollyのbotやコマンドの追加を許可する
f:id:aryzae:20161024001147p:plain

【手順3.】
アンケート機能を使いたいチャンネルで、下記コマンドを入力する
/invite @polly

【手順4.】
下記形式で入力するとアンケートが作成できます。("は半角のダブルクォーテーションです。)
/poll “質問” “選択1” “選択2” “選択3"

f:id:aryzae:20161024002332p:plain
誰かが選択支を選ぶとこんな感じで表示されます。
1人1票で、何度でも選び直すことができます。
f:id:aryzae:20161024002437p:plain


【削除方法】
割と場所をとるため、不要になった時に削除したいこともあると思います。
そんな時は、/poll deleteと入力すると、
f:id:aryzae:20161024002854p:plain
のように、消すためのアンケートのkeyを表示してくれますので、
該当する質問のkeyを含んだコマンドをコピペして入力します。


【おまけ】
Pollyのサイトで異なった内容のアンケートを作れるようです。
(試していないため、具体的には把握していません。)
f:id:aryzae:20161024003155p:plain