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

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

RHEL(RedHat Enterprise Linux) や CentOS を使っている人は少なくないと思いますが、ほとんどの場合が x86(Intel) 版だと思います。ただ RHEL は Power アーキテクチャにも移植されていて、何も考えないでログインして使っていると Power 版であることに気づかないほど普通に使えます。また PHP や Java のアプリケーションであれば、特殊なミドルウェアを使っていない限り、Intel 版から Power 版へそのまま移植できることも珍しくありません。 ただ Power チップの搭載されたゲーム機はともかく(苦笑)、Power 版の RHEL なんて普通は使う機会がないですよね・・・

と思っていましたが、最近 Power チップを開発している IBM がビジネスパートナー向けのサービスとしてクラウド上の Power アーキテクチャシステムを無料で提供すると発表がありました。RHEL はもちろん、AIX や IBM i(AS/400) など Power アーキテクチャシステムが VPN 経由で利用でき、更にはこの環境内だけでの利用が条件になりますが、IBM のソフトウェアをダウンロードして同環境に導入しての動作テストなどを行うことも可能です。しかも、ここまで全て無料!太っ腹!! IBM のビジネスパートナー契約が必要なので全ての人が無条件に利用できるわけではないのですが、この契約自体も無料なので、一通りの手続きを踏むことで条件は満たされるはずです(既にこの条件を満たしている企業の社員であれば個人 ID を登録するだけです。それも所有しているのであれば今すぐに利用できます)。また一回の利用は最長2週間ですが、作業イメージをバックアップして次回利用時にその保存イメージを指定して再構築することができるので、同じ環境で作業の続きを行うことも可能です。


というわけで、このクラウドサービスに利用申請をして、用意されたインスタンスに接続して利用するまでの手順を2回に分けて紹介しようと思います。まず今回は利用申請をしてサーバーをアクティブな状態にするまでを紹介します。

まずは IBM ビジネスパートナー契約と、その契約に紐付いた個人のログイン ID が必要です。このビジネスパートナー契約は IBM PartnerWorld と呼ばれていて、まず自分の企業がこの IBM PartnerWorld に登録されている(されていなければする)必要があります。そしてその契約に紐付いた個人 ID(IBM IDといいます)を登録する必要があります。この部分の手続きに関しては IBM のガイドを参照ください:
http://www-06.ibm.com/partnerworld/jp/weblook/ibm_registration.html

注意点が1つあります。IBM ID は個人で(個人のメールアドレスで)作成することも可能ですが、今回紹介する Power アーキテクチャのクラウド環境を予約するには企業契約に紐付いた ID である必要がある、という点に注意が必要です。企業登録そのものから行う場合はその確認に数日かかるようです。

IBM PartnerWorld 契約と IBM ID の用意ができたら(或いは既に取得済みの方は)クラウド利用を申し込みましょう。まずはこのクラウドサービスである PDP(Power Development Platform) のポータルページを参照します:
http://www.ibm.com/partnerworld/pdp

2014030101


このページに一通りの情報が集まっているので、ハードウェアスペックなどの各種情報はこちらから参照ください、英語ですが。


このページの下の方に "Take action and get started" というセクションがあり、その中に "Programs" と書かれたリンクがあります。これが PDP 申し込みサイトへのリンクです。Programs をクリックして申し込みサイトへ移動します:
2014030102



最初にログイン画面が表示されます。ここで上記の IBM PartnerWorld 契約に紐付いた IBM ID とパスワードでログインします。
2014030103


ログイン後に「企業と紐付いていません」といった内容のメッセージが表示される場合は、その IBM ID は IBM PartnerWorld に紐付いたものではないため、そのままでは PDP は利用できません。上記に戻って新規に企業契約をするか、既存の企業契約に紐付ける(企業管理者に登録してもらう)必要があります。


企業契約のある ID でログインすると、以下の様な PDP の Programs 画面になります。この画面から新規の利用予約や、予約状況、VPN による接続情報、予約して稼働中のシステム情報の確認などができます。また後ほど使いますが VPN による接続方法の PDF ガイドもこの画面内の "Download Connection User Guide" ボタンからダウンロードできます、英語ですが
2014030104


では実際にシステム利用の予約をしてみましょう。"Please select a program" と書かれたボタンをクリックして "Virtual Server Access" を選択します。
2014030105


すると予約内容を入力する画面が表示されます。
2014030106
2014030107


ここに以下の内容を英語で入力していきます:
Enter a project name: プロジェクト名/利用目的の名前(64文字以内、英数字のみ)
Product description: (プロジェクト/目的の説明)
Project opportunity: 案件のスケジュール
Project classfication: 利用目的の分類、テストとか教育目的など
Project Dates: 利用期間(最大2週間、米国山岳部標準時(UTC-7))
Logical Resources: 利用ハードウェアスペック

Project name はプロジェクトで利用する予定があればその名称を。教育目的であれば "LinuxOnPowerEducation" とかそんな感じの名称を入力します。Description にはその説明。Opportunity は実案件としていつ頃利用予定か、というスケジュール感を指定します。特に決まっていなければ "Potential New Customer" あたりを。Classification には利用目的を指定します。これも教育目的であれば "Learn" とか。

次の Dates は注意が必要です。利用期間は最大で2週間ですが、ここは日本時間ではなく UTC-7 で指定することになるようです。デフォルトで日本の現在時刻に近い値でセットされそうになるのですが日本時間ではない、という点に注意してください。

そして Logical Resources には利用 OS 環境を指定します。Image は過去に使って保存したイメージを使う場合は "Saved Image" を選択して、その後にそのイメージを指定します。初めて使う場合や新しい環境で構築する場合は "Standard Image" を選択します。Image Category 欄では OS を指定します。AIX や SuSE, IBM i(AS/400) も指定できますが、今回は "Red Hat Linux" を選択した前提で以下を紹介します。

次に Physical Resources でハードウェアを指定しますが、これはデフォルトのままで大丈夫です。1CPU + メモリ2GB + HDD 35GB の IBM Power 7。CPU は4コア構成なので仮想的には4つに見えるものです。

ここで "Add resources to project" をクリックすると、これまで指定した内容がプロジェクトに追加されます。
2014030108


プロジェクトに追加されたことを確認して、最後に "Create project and reservation" をクリックして予約を確定します。

しばらく処理が行われ、完了すると元の "Programs" 画面に戻ります。

では予約の状況を確認してみましょう。画面一番下の "Virtual Server Access" と書かれた箇所のずっと右の+(プラス)印をクリックします。
2014030109

利用中/予約中のプロジェクトが表示されます。Status 欄に "Processing" と表示されていれば予約が処理中であることを意味しています。
2014030501


指定した時刻からプロビジョニングが開始され、1~2時間程度でシステムは利用開始になるはずです。その頃に再度同じ画面にアクセスすると Status は "Active" に切り替わっているはずです(その旨を知らせるメールが登録アドレスにも送られてきます、英語ですが(笑)):
2014030502


この Active 状態のプロジェクトをクリックして更に展開していくと、現在 VPN の先で稼働しているサーバーのIP アドレスや初期 ID & パスワードも表示されているのが確認できます。これで利用可能な状態になっていることが分かります:
2014030503


この作業を進める上で英語と向き合うことが多いと思います。まあ、このプログラム自体は IBM 本社の提供するものなので、まあ仕方ないですけどね。

分量が多くなってしまったのでこの辺で。 この続きの、VPN 接続を使って、このサーバーにアクセスする手順は次回ということで。
 
続きはこちら

 

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つ開いて互いの中身をコピペできるだけでもかなり使える。







このページのトップヘ