僕のノート、見てってください

エンジニアリングや英語、趣味について徒然なるままに

ゴーン・ガール

映画をよく観るものの、その瞬間に強く想った事とか

自分の制作に活用できそうな要素をすぐ忘れてしまうので書き溜める事にする。

 

※以下、ネタバレ注意。

※自分が思い出せるように記述するので、きっと中身をはっきり書く。

 

 

 

そもそも映画館で良く映画を観るため、

この映画の予告についてもよく目にしていた。

重く、かつ、サイコな印象の予告。

どこか観る気が起きずにそのまま劇場公開は終了。

 

内容観てみたら、本編は割と面白かったので

ミステリーとはいえ、劇場予告のもったいなさを強く感じた。

そこから話が展開していくんだぞっていうところを少しでも匂わしてくれていたら

きっと劇場で観ていた。

 

最初のシーン、意味を持たせたいが故に長いのは良いものの、

多少、夢の中のようなタッチで時系列が伏せられ、余計に予想がついた。

もっと自然な一場面として切り取って印象に残さない方が衝撃が強まりそう。

 

奥さんの逃亡中の姿について、

最初は、気ままに、でも弱く、一逃亡者として、おびえて生活をしていた印象。

途中、強盗に入られたときには、感情を表出させており、

かつ、仕返しも検討せずに即座に引っ越しているため、サイコパスではない印象。

しかしながら、匿われた場所から帰還する際に見せたサイコパスな一面には唖然。

計画的に相手を貶めるという性質だけでは説明つかない行為のはずなのに、

やり遂げ、自然に再び生活を続け、再度相手を虜にするという始末。

 

原作中でどう描かれているか知らないものの

猟奇性やサイコパスな側面を合い間でもっと描き続けるか、

もしくは、別荘から帰還する際の顛末については本人が計画性があるとはいえ、

多少の恐怖心をもって実行したように演出した方がリアリティがあったと思う。

 

あと、夫が、帰還した妻になびくのも、今一腑に落ちるだけの描写がなかった。

自分の性質的に受け入れられなかっただけかもしれない。

 

細かいところで腑に落ちない点などあっていろいろ書いたものの、

序盤から中盤にかけては、犯人を予想しながら話についていくのがすごく面白く、

また後半にかけても、どうやってオチがつくのかに釘付けで、

ワクワクするミステリーだった。

 

AngularJSでのプログレストラッカーのチラつき防止とng-ifとng-showのお話。

結論。

AngularJSでプログレストラッカー部を表示する場合、

特に画像でなく、テキストとCSSで構成しているような場合は、ng-ifにしないと

カクつきやチラつきが生じることがある。

 

自作のアプリで、プログレストラッカーをこさえているのですが、

プログレストラッカーについては以下を参照のこと。

coliss.com

 

その表示も含めて、AngularJSを使っています。

そして、後々は端末毎での画面サイズの違いなどで

意図しない改行や表示にならないよう

画像を使ってプログレス表示部を作ろうとしているものの、

今のところはテキストとCSSで構成してます。

 

その部分について、ng-showをつかっていたところ、ng-cloakとの関係もあってか、

またCSSで、各プログレスの表示位置を固定せずにli要素として並べているせいか、

ng-showでdisplay:block / noneの切り替えを行なう際に、

チラつきやカクつきが目立ちました。

 

CSSを真面目に書こうかとも思ったものの、

問題がそこじゃなかった場合のロスが辛かったので、

また、いつか画像でパーツを構成しようとしていたので、

楽に解決する手段がないか考えました。

 

すると、こういう記事を見つけ、もしかしてこのあたりの考慮が漏れてるが故に

何か想定外の挙動が起きてる?と思って試したところ、見事に解決。

絆創膏かもしれませんが、スピード優先ということで。

 

http://oahiroaki.tumblr.com/post/79633563937/angularjs-ng-if-ng-show

oahiroaki.tumblr.com

 

 

<おそらくの学び>

理由がない限りは、もしくは、大規模なDOM生成じゃない限りは、

ng-showじゃなくてng-ifを使用して、都度DOM生成をした方がアニメーションとかも

入ってくるときっと安心。

 

AngularJS 1.4.1でモーダル(Modal)が閉じない。もしくは、表示上閉じたのにDOMが残る件の対策。

結論。

angular1.4.1の場合(1.4系全部かもしれない。調べてない)、

modalProviderのモーダルを閉じるには、テンポラリなもののこれを入れておけば良い。 


angular.module('MY_MODULE_NAME').config(function($modalProvider) {
  $modalProvider.options.animation = false;
}); 

※ちなみに、このissue自体、この記事の記述時点では正式には解決されていないぽい。

Modal Dialog doesn't fade out · Issue #3633 · angular-ui/bootstrap · GitHub

 

経緯。 

あるとき、作成中のAngularアプリにng-touchを導入しようとしたところ、

Angularのバージョン上げないとだめだよっとおこられたので、

以下の通り、angularのバージョンをゴリっと変更してみた。

(bower.jsonの中身の一部をひろったもの)


<従来>

"dependencies": {
  "angular-ui-bootstrap-bower": "0.12.0",

  "angular-route": "1.2.28",
  "angular-animate": "1.2.28"

}

 

<バージョンアップ後>

"dependencies": {

 "angular": "1.4.1", // なぜか以前までversion指定してなかったのでこの機会に追加。orz
 "angular-ui-bootstrap-bower": "0.13.0",
 "angular-route": "1.4.1",
 "angular-animate": "1.4.1",
 "angular-touch": "1.4.1"
}

 

すると、アプリの冒頭で、注意書きをモーダルで表示したいたのだが、

そのモーダルを閉じた後、何も操作を受け付けなくなった。

ng-clickとかが効かなくなった?とかよくわからず調査をしていると、

モーダルが表示上は消えたものの、

DOMとして残って画面全体を覆てるではありませんか。

z-index:1050だっけ? display: block。がーん。

 

一旦、さくっとテンポラリーな調整で動かせるようにならないかとstyleを

modal.closeに合わせて調整できないか試みるも、

ng-templateつかってモーダル表示していたので、単純にはstyle指定がしづらい状態に。

 

ふむ。

 

調べると、冒頭に貼ったissueや、それにちかいやりとりがちらほら。

読み進めて、一次対応として良さそうなのを取り込んだら動いたので、

それをメモしておく。

 

<学び>

frontendのミドルウェアを駆使しているときは特に、

操作が効かなくなったら、DOMの重なりがおかしいことを疑ったら良さそう。 

 

issueのやりとり、英語でも頑張って読んだら助かる事ある。てか、助かる。

 

ImageMagickでスプライト画像を作る方法

毎回忘れるので、スプライト画像作る(複数画像を1枚にくっつける)ときの

ImageMagickの使用方法をメモしておく。

 

convert 元ファイル名{スペース区切り 元ファイル名} +append 出力ファイル名

(引数で指定した順で水平に連結する)

 

オプションの+appendを-appendにすると、垂直に並ぶ。

元ファイルの置き場所や命名ルール(01, 02などの連番を含むと多分いい)を

事前に決めておけば、こんなかんじで綺麗に、ファイル増えても一定ルールで追加できそう。

 

convert hoge_*.png +append 出力ファイル名

 

そして、シェル書いておく、置くのが良さそう。デザイナーさん(コーダーさん)とか

どうやってるのだろうか。

 

ちなみに、自分の場合、

このスプライト画像をtinypngさんに食べさせて少し軽くして使ってます。

どうせならそこも圧縮ツールあるんだからコマンドラインで、

みたいな話ありつつ。楽なので。ね。

Photoshopで画像の輪郭をはっきりさせたいとき

よそで拾ってきたフリー素材を使って

独自の素材を作ろうとしたときに輪郭が綺麗にまとまらなかったので

その調査をした際のメモ。(Photoshopありき)

 

対象のオブジェクトを選択して

フィルタ > シャープ > アンシャープマスクと選択して、

いい感じに調整する。

 

輪郭がはっきりしたものの、

悲しい事にはっきりとジャギったので、

小さい画像を引き延ばしてからいい感じにスムースにする処理も別途学ぶ。

 

しばらく更新してなかったものの、

自分の備忘用のwikiとして再開します。

 

cocos2d-html5もさわってみた

cocos2d-html5も動作を見るだけ見たのでその感想を。

このページでサンプルをさわれるのですが、cocos2d-iosのサンプルと比較しても

十分な描画性能で動作をしていました。

Cocos2d-HTML5 Test Cases

 

アプリにおいては、実際はアプリパッケージ内に各ソースを配置して、

無通信で動作させるのが主な使い方のようです。

 

html版ならではのいいところは以下の2つの印象です。

・html / jsの実装ノウハウで開発できるので開発障壁が低いこと

・ビルド無しにどんどんテストできるので開発を回しやすいこと

 

あと職場の同僚にきいたところ、cocos2d-xがやばいらしい。

つなぎ込みのjava / obj-cは書かなければならないものの

iOS / android問わずに、適用できるみたいです!

 

これについても近々触ってみます。

 

 

cocos2d-iosをさわってみた

かなり久しぶりですが、また開発メモを書き始めようかと思います。

最近、というか、ここ半年はまったくもって仕事での開発でお腹いっぱい状態でした。

というのもいい訳ですね。

 

さて、今回のメモは、乗り遅れた感バリバリのcocos2dについて。

結論からお伝えすると、導入簡単で、テストコードもたくさんあるので、

大体のゲーム制作において(その名の通り2Dですが)手軽に活躍してくれそうな印象でした。まぁ、知ってるって?

 

いま会社で運用してるアプリの演出も置き換えられそうだったけど、

インタラクティブな操作があまり必要ない場合は、それこそFlash的なもので事足りるのかなという。

個人的には、タクティクス系ゲームのマップのサンプルもあってワクワクしました。

 

 

ダウンロードとテスト実行はこちらを参考にしましたが、

「cocos2d」を使ってiPhoneゲームを作ってみよう(1/3) - @IT

2点資料が古い点があって、1点目、テスト用コードを含むprojectは、

cocos2d-ios.xcodeproj ではなく、cocos2d-tests-ios.xcodeproj だということ。

2点目、templateのinstallスクリプト(install-templates.sh) は

root実行を受け付けていないので、通常ユーザで実行するということ。

 

こういうものもあるらしいから、また折りをみて触ってみます。

cocos2d-html5エンジンが凄い件 - tsuge development page