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

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

前回からの続きです。

 IBM Power Development Platform で Power 版 RedHat Enterprise Linux サーバーのリソース予約が完了し、サーバーが Active になりました。その後の接続方法について紹介します。
2014030502


 このサーバーに接続するには VPN を使います。その詳しい内容は予約確認ページの真ん中辺りにある "Download Connection User Guide" ボタンをクリックしてダウンロードできる PDF に(英語で)記載されています:
2014030104

以下、その内容を簡単にかいつまんで日本語で紹介します。まずこのボタンの上部に書かれている "VPN appliance IP address", "User ID", "Initial / last reset VPN password" の3つの内容をメモしておきます。これが VPN 接続時に必要な入力項目になります。
2014030601


次に VPN 接続をするクライアント PC からブラウザを起動して、https://vlpvpn.centers.ihost.com/ を参照します。僕の場合は CentOS のマシンから行っているため CentOS でのスクリーンショットを紹介しますが、Windows や Mac からも同様の内容になると思います。

ログインフォームが表示されるので、先程メモした VPN 用 User ID とパスワードを入力します:
2014030602


"Welcome" メッセージが表示されたらログインは成功です。Continue ボタンで先に進みます:
2014030603

この後、ウィザード形式で接続する手続きが始まります。OS の種類が自動認識されていると思いますので、リンク(以下の例であれば "Linux_x86_64" と書かれた箇所)をクリックして処理を進めていきます:
2014030604

おそらくですが、ここから先は OS ごとに手続きが異なるはずです。種類によってはこのまま自動認識が成功して、ウィザード処理を進めていくだけでこのまま VPN までが完了することもあると思います。以下は僕の試した CentOS 環境での場合の説明です、参考程度に参照ください。

リンクをクリックすると、VPN クライアントをセットアップするためのスクリプトのダウンロードが始ります:
2014030604


ダウンロードが完了したら、そのファイルをシェルから実行してインストールします:
# sh vpnsetup.sh

インストールが完了したら、アプリケーションメニューから VPN クライアントを起動します:
2014030605


VPN クライアントが起動します。まず最初の1回目に必要な設定があるので、設定項目を開きます:
2014030606


デフォルト状態では VPN クライアントのセキュリティが強めに設定されています。このままだとこの環境での VPN サーバーに接続できないため、"Block connections to untrusted servers" についているチェックを外します。その上で Close ボタンでこの画面をクローズします:
2014030607


1つ前の画面に戻ります。改めて最初にメモした VPN サーバーの IP アドレス(おそらく 32.97.184.40 で固定)を入力して Connect ボタンをクリックします:
2014030608


先ほどチェックを外した設定に関する確認ダイアログが表示されます(チェックを外さないとこの画面も出ないはずです)。Untrusted なサーバーに対する接続を行うか? という確認です。 今回だけは接続するのであれば "Connect Anyway" を(次回も確認ダイアログがでます)、このサーバーを信頼するのであれば "Always Connect" を(次回からは確認ダイアログがでません)、このどちらかをクリックして接続します。"Keep Me Safe" を選択すると接続しません:
2014030609


ユーザー名とパスワードを聞かれるので、これも上でメモした VPN 用の User ID と Password を入力し、最後に Connect ボタンをクリックします:
2014030610


確認画面が表示されたら、Accept をクリックします。環境や設定によってはこの後に再度 Untrusted サーバーへの接続に関するダイアログが表示されるので "Connect Anyway" か "Always Connect" を選択します:
2014030611


VPN サーバーに正しく接続できると、画面内に VPN が接続できているようなマークが表示されます(以下は CentOS での例):
2014030612



これで VPN 環境が整って、IBM の仮想プライベートネットワークに接続できました。では稼働中の Power 版 RedHat Linux Enterprise サーバーへ接続してみます。

改めて PDP の Virtual Server Access 環境画面を参照して、予約したサーバー環境の IP アドレス、ユーザー名、パスワード、root パスワードを確認してメモしておきます(※上記で説明した VPN 用の ID & パスワードとは異なります。ID だけは同じかもしれません)。
2014030613


確認した IP アドレスに(指定されている)ユーザー名とパスワードで SSH で接続します。Windows であれば PuTTY などの SSH クライアントから接続します。Mac や Linux であれば以下のコマンドとパスワードで:
# ssh u00NNNNN(UserID)@172.29.XXX.XXX(IPアドレス)

ログインできると画面に IBM ロゴが表示されるようです。とうとう Power サーバー環境にログインできました!:
2014030614



で、実際にこのサーバーを使うために色々なセットアップが必要になりますが、このままでは何もできないので、まずは root になりましょう。su コマンドを実行して、メモしておいた root パスワードを指定します:
[u00NNNNN@172-29-XXX-XXX ~]$ su -
パスワード: (rootパスワードを入力)
[root@172-29-XXX-XXX ~]#

ここからはもうご自由に。でも一応最低限のセットアップの紹介をしておきます。

何はともあれ root パスワードを変更します:
[root@172-29-XXX-XXX ~]# passwd
Changing password for user root.
New password:(新しいパスワードを入力)
Retype new password:(同じパスワードを再入力)
passwd: all authentication tokens updated successfully.
本当に Power サーバーかどうか(笑)を確認してみました。本物だ、仮想CPU×4構成:
[root@172-29-XXX-XXX ~]# cat /proc/cpuinfo
processor      : 0
cpu            : POWER7 (architected), altivec supported
clock          : 3864.000000MHz
revision       : 2.1 (pvr 003f 0201)

processor      : 1
  :
  :

timebase       : 512000000
platform       : pSeries
model          : IBM,9179-MHB
machine        : CHRP IBM,9179-MHB

ちなみにセットアップは普通に yum が使えます。MySQL とか PHP とか Apache HTTPD とかについては、x86 版と違いを感じないほど普通に導入できます。

加えて、IBM 製のミドルウェアに関しては、DB2 や WAS(WebSphere Application Server), C/C++ コンパイラなど、いくつかのものは最初から /stage/middleware 以下にインストールメディアがマウントされて使えるようになっています。検証などで必要であれば、ここからインストールして使えるようです:
[root@172-29-XXX-XXX ~]# df -h
Filesystem            Size  Used Avail Use% Mounted on
/dev/sda4              29G  3.0G   24G  11% /
tmpfs                1003M     0 1003M   0% /dev/shm
/dev/sda2             463M   46M  394M  11% /boot
nfs.dal-ebis.ihost.com:/var/nfs/LINUX
                       25G   19G  5.1G  79% /stage/middleware

[root@172-29-XXX-XXX ~]# ls /stage/middleware
DB2   IDS       ParallelEnvironment  Rational  TDS  XL_C_C++
ESSL  netbeans  PESSL                SAAS      WAS  XL_Fortran

なお最初にセットアップされている Power 版 RHEL ですが、どうやらフルセットに近いものが用意されているようです。X Window(GNOME) も、日本語環境も、VNC サーバーまでも最初から含まれているようです。ただ VNC サーバーはインストールまではされていますが起動はしていません。最後にその設定および起動方法だけ紹介しておきます(ま、これも x86 版と比べて特に違いはないですけど・・)。

まず、これは必須ではありませんが、せっかく X Window 環境を使うので日本語設定にしておきましょう。/etc/sysconfig/i18n をエディタで開いて、1行目を
[root@172-29-XXX-XXX ~]LANG="ja_JP.UTF-8"

と変更しておきます。

次に /etc/sysconfig/vncservers を編集して、root ユーザーで 5901 番ポートにアクセスするような設定にしておきます:
  :
VNCSERVERS="1:root"
VNCSERVERARGS[1]="-geometry 1024x768 -nolisten tcp"
  :

また VNC 接続用のパスワードを設定しておきます:
# vncpasswd
Password:(入力内容は画面に表示されません)
Verify: (同じパスワードを入力)

この段階で一度 VNC サーバーを起動して、設定ファイルのひな型(~/.vnc/xstartup)を作っておきます:
# /etc/init.d/vncserver start

直前のコマンドで xstartup が作成されているはずなので、このファイルを編集します。環境変数 LANG を設定して、GNOME のセッションをそのまま VNC 環境でも使えるようにします:

# vi ~/.vnc/xstartup
#!/bin/sh

export LANG="ja_JP.UTF-8"(この一行を最初に挿入)
  :
  :
(最後の部分を編集)
# xterm -geometory 80x24+10+10 -ls -title "$VNCDESKTOP Desktop" & (コメントアウト)
# twm & (コメントアウト)
gnome-session & (この一行を追加)

改めて新しい設定で VNC サーバーを再起動し、またシステム起動と同時に実行されるようにしておきます:

# /etc/init.d/vncserver restart
# chkconfig vncserver on

これで VNC サーバーの準備と起動ができました。 実際に X Window(GNOME) 環境にアクセスしてみます。VPN 接続をしたクライアントの環境に戻り、VNC Viewer などの VNC クライアントを実行します。アクセス先には Linux サーバーの IP アドレスと、最後に 5901 番ポートで接続するための :1 を付けてアクセスします:
2014030615


パスワードを聞かれたら VNC 用に設定したパスワードを入力します:
2014030616


Power 版 RHEL の GNOME 環境にアクセスできました! 普段 CentOS を使っていると RHEL のロゴに少し緊張します(笑)。 といっても、x86 版と比べてほとんど違いはなさそうですけどね・・・
2014030617

実際試してみると分かりますが、普通に日本語も使えます。FireFox まで導入済みなので、すぐにウェブ利用も可能になっています。

この環境が2週間無料で使えるのはいいですね。加えて Power 版 RHEL の出来がいいというか、ほとんど x86 版との違いを感じずに使えるのでストレスもほとんどありません。 仮想環境とはいえ Power CPU × 4 環境のマシンを使えるので、ビットコインの発掘とか x86 用に作ったウェブアプリケーションの Power 環境での動作検証とか、いろいろ使えそうです。


最後にこの環境の終了手順を紹介します。この環境は放っておいても2週間後には使えなくなってしまうのですが、その前にある時点の環境をスナップショットとして保存しておくと、次回の予約時に(Standard Image からではなく)そのスナップショットのイメージから再作成してもらう、ということもできるようです。そのスナップショットの取得方法を紹介します。

PDP の予約画面に戻ります。ここで Virtual Server Access を展開し、スナップショットを取得したいサーバーの予約番号部分を右クリックし、"Save Image" を選択します:
2014030618


すると以下のような画面が出てくるので、"Save image now"(今の状態で保存する)か、"Save image when reservation ends"(利用期間終了時に保存する)かを選びます。またその保存イメージの名前と、説明を記入し、最後に "Save image" ボタンをクリック、です:
2014030619

この方法で取得したイメージは、次回リソース予約時に "Standard image" ではなく "Saved Image" から作成するよう指定することで再利用が可能になっています。この方法で事実上2週間以上必要な検証作業についても(一時的な切断と、IPアドレス等の変更はありますが)作業を継続して行うことができるようです。


IBM PartnerWorld への企業契約が前提になるとはいえ、この環境が無料で使えるのって、かなりお得な気がするなー。

僕自身は AIX や IBM i(AS/400) にはあまり興味ないんですが、最初にダウンロードした PDF のガイドにはこれらの環境での VPN の利用方法なども書かれています。興味あるかたは是非挑戦してみてください。



 

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箇所です。

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



 

このページのトップヘ