まだプログラマーですが何か?

プログラマーネタとアスリートネタ中心。たまに作成したウェブサービス関連の話も http://twitter.com/dotnsf

HTML 内のオブジェクトを移動させるには jQuery の animate メソッド を使うのが一般的(というか簡単)ですが、CSS3 の transition を使ってもできます。

プログラマー/デベロッパーの立場だと jQuery を使うことは珍しくないんですが、CSS はちと遠い存在で、基本は理解しているつもりでしたが、あまり接することがありませんでした。いい機会なので勉強がてら使ってみました。


さて、目的は似てるけどアプローチの異なる2つの手法、その違いはどこにあるのでしょう?

簡単に言えば animate は CPU 処理、transition は GPU 併用の処理になります。PC だと見た目にもあまり差はないかもしれませんが、比較的 CPU 性能の劣るスマホ(それもちと古めの)だと、この差がバッチリでそう。グラフィックチップを併用することで非力なCPU環境でもスムーズなアニメーション処理が実現できます。また見た目に差がなくてもCPUの負荷を軽減することにもなります。


実際に2種類のメソッドで同じアニメーションを実装したのが以下の例です。上の "Animate" をクリックすると jQuery.animate で、下の "Transition" をクリックすると CSS3.transition で、それぞれ重ねあわせスライドスクロール処理が行われます。PC ブラウザだとあまり差を感じないかもしれませんが、非力な環境ほど下の方がスムーズな動きになるはず。



Animate









Transition










ソースコード全文はこのページのソースを参照していただきたいのですが、大まかにはこんな感じになります:

共通の CSS クラス:
<style type="text/css">
.c1{
	position: absolute;
	z-index: 1;
	left: 100px;
	opacity: 1;
	width: 100px;
	height: 100px;
	background: yellow;
}
.c2{
	position: absolute;
	z-index: 0;
	left: 100px;
	opacity: 1;
	width: 100px;
	height: 100px;
	background: red;
}
</style>


jQuery.animate を使った場合の HTML & JavaScript コード:
<a  href="javascript:void(0);" id="aa">Animate</a>
<div  class="c1"></div>
<div  id="c2a" class="c2"></div>
<script type="text/javascript">
var ba = true;
$('#aa').on('click', function(){
	ba = !ba;
	var l = 200;
	if( ba ){ l = 100; }
	$('#c2a').animate(
		{ left: l + 'px' },
		{ duration: '700', easing: "linear" }
	);
});
</script>


CSS3.transition を使った場合の HTML & JavaScript コード:
<a  href="javascript:void(0);" id="at">Animate</a>
<div  class="c1"></div>
<div  id="c2t" class="c2"></div>
<script type="text/javascript">

var bt = true;
$('#at').on('click', function(){
	bt = !bt;
	var l = 200;
	if( bt ){ l = 100; }
	$('#c2t').css({
		left: l + 'px',
		WebkitTransition: 'left 0.7s linear',
		MozTransition: 'left 0.7s linear',
		MsTransition: 'left 0.7s linear',
		OTransition: 'left 0.7s linear',
		transition: 'left 0.7s linear'
	});
});
</script>

どちらのケースもクリック時にトグルのような動きをするのでそのための余分なコードがありますが、jQuery.animate では左座標(left)を指定して 700 ミリ秒でリニアにアニメートを、CSS3.transition でも左座標と効果(transition)を指定して 0.7 秒間で遷移するように css を変えています。違いはこの2箇所です。

もちろん全てのケースで有用というわけではないと思います。またこの例はかなりシンプルな内容なので違いが少なく見えていますが、現実的にはそう簡単にはいかないことはあると思います。ただ後者が使える環境であれば後者にすべきなのかな。



 

Linux や MacOS のターミナル(端末)の画面を分割/多重化して、1つのターミナル画面内で複数のターミナルプロセスを実行できるようにする、というツール tmux を使ってみました。ツール自体は結構以前からあったようですが、存在を知らなかった・・・


まずはインストール前の環境準備から。僕の環境は CentOS ですが、他の Linux ディストリビューションや MacOS などでも同様のはずです。

tmux はソースが公開されていて、ソースからビルドして導入します。というわけで公式サイトから tmux 自体のソースコードをダウンロードしておきます(今日時点の最新安定版は tmux-1.9a.tar.gz):
http://tmux.sourceforge.net/

最新安定版が 1.9a であれば、以下のコマンドでもダウンロードできます:
# wget http://downloads.sourceforge.net/tmux/tmux-1.9a.tar.gz


また、 tmux のビルドにはライブラリとして curses ライブラリが必要です。これは yum でサクッと導入します:
# yum install ncurses-devel

更に libevent 2.0 以上が必要です。一般的な環境に導入されているのは 1.x だと思うので、こちらも別途ソースからビルドして用意する必要があります(今日時点の最新安定版は libevent-2.0.21-stable.tar.gz):
# wget https://github.com/downloads/libevent/libevent/libevent-2.0.21-stable.tar.gz
# tar xzvf libevent-2.0.21-stable.tar.gz
# cd libevent-2.0.21-stable
# ./configure
# make
# make install

これで tmux をビルドする準備が完了したので、改めてダウンロードしてきたソースファイルから tmux をビルドします:
# tar xzvf tmux-1.9a.tar.gz
# cd tmux-1.9a
# ./configure LDFLAGS=-L/usr/local/lib/ (上記でビルドした libevent-2.0 をフラグで指定)
# make
# make install

tmux を実行する前に /etc/ld.so.conf.d/libevent.conf というファイルを新規に作成して libevent をインストールした場所を指定し、あらかじめロードしておく必要があります。
# echo '/usr/local/lib' > /etc/ld.so.conf.d/libevent.conf
# ldconfig

これで tmux のインストールは完了です。以下、簡単な使い方の紹介。

tmux を起動するには端末のプロンプト画面から 'tmux' と入力します:
# tmux

あまり変わったように見えませんが、tmux が起動して、最初のセッションを作成し、その中で1つのウィンドウが作成されます:
2014022201


この状態から tmux コマンドを駆使して複数のセッション/ウィンドウを管理します。まずはウィンドウを上下2つのペインに分割します。CTRL+b(CTRLキーを押しながら b)に続けて :(コロン)を入力し、画面下部に split-window と入力して Enter キーを押します:
2014022202


ちなみに、CTRL+b に続けて : で tmux のコマンド入力モードに切り替わります。そこで画面下部に split-window という「縦にウィンドウを分割」という意味のコマンドを入力した結果、このような2画面に分割されたのでした。

同様にして、今度は画面を横に分割してみます。CTRL+b : に続けて split-window -h と入力します:
2014022203


 -h オプションをつけるとアクティブだったウィンドウが横に分割されました。

アクティブペイン内でコマンドを実行すると、その実行結果はペイン内だけに表示されます:
2014022204
(右下のペインがアクティブな状態で ls コマンドを実行した結果)


CTRL+b o でペイン間の移動が可能で、アクティブペインを切り替えることができます:
2014022205
(プロンプトが上のペインに移動 この状態でコマンドを実行すると上のペインで実行される)


アクティブペインは CTRL+b x で破棄できます:
2014022206
(左下のペインをアクティブにしてから破棄コマンドを実行。左下のペインがなくなって上下2つになった)


なお CTRL+b ? でコマンドのヘルプが表示できます:
2014022207
(上のペインをアクティブにしてヘルプを実行した様子。ショートカットに困った時のためにこのコマンドだけでも覚えておくべき)


クラウドサーバーを利用する場合、初期状態では SSH でしかログインできないし、環境によっては X Window を導入することもできないこともあります。そんな時に唯一使える端末を多重化して使えるのは便利です。

ま、現実問題として3つも4つも開くことはないけど、上下に2つ開いて互いの中身をコピペできるだけでもかなり使える。







「iPhone でゲームボーイアドバンスのゲームがプレイできる」というフレコミの GBA4iOS というアプリのバージョン 2.0 がリリースされた、というニュースがありました。

いわゆる「エミュレータ」というやつで、ここでその是非についてコメントするつもりはありません。脱獄した iPhone 向けには以前から提供されていたもので、その意味では特別目新しいニュースでもありません。

が、今回ちょっと気になったのは、「脱獄不要である」という点です。脱獄不要ということは、そのアプリは App Store からダウンロードするということ? アップルがそんなアプリの審査通すの? と。

といった好奇心から、自分でもこのアプリをインストールしてみました。結論としては確かに iPhone にネイティブアプリとしてインストールできているようです。
2014022102


でも導入時に App Store は経由してません
。当たり前だよな、Apple がこんなの許可するわけがない。また(この機種に限ってはw)脱獄もしてません。 アプリ開発者が App Store を経由せずにテストアプリを導入する方法はあるんですが、その場合は電話番号とか iPhone の UDID とかを入力する面倒な手間があります。今回はそういうのも聞かれてないので、ちと違う気がする。 一体どういうこと?? どこからどんな仕組みでこのアプリはインストールされたんだ??


で、他の作業で VPN の設定とかをしていてふと気付いたのが、設定 - 一般 - プロファイル の中に「プロビジョニングプロファイル」として GBA4iOS という、そのまんまの名前のプロファイルが追加されていました。これは??
2014022101


・・・プロビジョニングプロファイルか、ああ、なるほど。分かった気がする。おそらく、以前にちょっと話題になった「iOS デベロッパーエンタープライズプログラムに抜け穴があった」という件に関係してるんだろう。

要は、自社とか特定の企業向けにアプリケーションを提供したい、という企業に対して、Apple はその企業専用のミニ App Store もどきを用意できるようにして、そこから特定ユーザーだけにアプリケーションをインストールさせる、というのが iOS デベロッパーエンタープライズプログラムです(詳しくはこちら)。そこにセキュリティホールというか抜け道があった、というものでした。それを応用(?)して制約なしに誰もがそのミニ App Store もどきを使えるようにしたんだろうな。 
念のため補足すると、このデベロッパーエンタープライズプログラムは契約時に利用条項に同意する必要があり、その中で不特定多数に向けてアプリを提供することは禁止されているので、Apple にすれば「契約違反」ということになるんでしょう。ただその抜け道の存在は想定外だったのだろうな、と。

その後もイタチごっこのような状況が続いていますが、今回の GBA4iOS 2.0 がリリースされた所をみると完全に防ぐのが難しい、ということなのかもしれません。



 

このページのトップヘ