開発環境」カテゴリーアーカイブ

WebIDE ICEcoderをセットアップしてみた

次の時代はクラウド開発環境が来るはず!

先の記事では Hack (Hacklang) の開発はFBIDEが本命だと書きました。しかし、まだリリースされていないので、当面vimかemacsを使わざるを得ません。せめて、Web IDEの雰囲気を味わってみたいので、そこそこ知名度のあるICEcoderをインストールしてみました。後の自分用にその手順を記載します。

導入手順

http://icecoder.netの説明に従ってgithubから最新のコードをダウンロード

$ git clone git@github.com:mattpass/ICEcoder
Cloning into 'ICEcoder'...
Warning: Permanently added the RSA host key for IP address '192.30.252.131' to the list of known hosts.
Enter passphrase for key '/home/susumuis/.ssh/id_rsa':
remote: Counting objects: 6950, done.
remote: Total 6950 (delta 0), reused 0 (delta 0)
Receiving objects: 100% (6950/6950), 3.78 MiB | 796 KiB/s, done.
Resolving deltas: 100% (4136/4136), done.

下記のようにダウンロードされた

$ cd ICEcoder/
$ ls
CodeMirror-4.2  LICENSE.md  README.md  backups  editor.php  farbtastic  favicon.png  files.php  images  index.php  jshint  lang  lib  plugins  processes  test  test.php  tmp
$ cd /etc/nginx/

nginxで公開する。

$ sudo vim sites-available/icecoder

下記のように編集した。今回は80番ポートは使用せず、httpsだけで配信する。とりあえずオレオレ証明書作っとく。

server {
        listen 443;
        server_name 公開するドメイン;
        root ICEcoderのディレクトリ;
        index index.php;

    include hhvm.conf;
        ssl on;
        ssl_certificate /etc/ssl/certs/icecoder.crt;
        ssl_certificate_key /etc/ssl/certs/icecoder.key;
        ssl_session_timeout 5m;
        ssl_protocols SSLv3 TLSv1;
        ssl_ciphers ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv3:+EXP;
        ssl_prefer_server_ciphers on;
        location / {
                #try_files $uri $uri/ =404;
                try_files $uri $uri/ /index.php;
        }
}

オレオレ証明書の作り方は毎回忘れるので簡単にメモっとく。

$ cd
$ sudo openssl genrsa 2048 > icecoder.key
$ openssl req -new -key icecoder.key > icecoder.csr

Country Name (2 letter code) [AU]:JP
State or Province Name (full name) [Some-State]:Tokyo
Locality Name (eg, city) []:Tokyo
Organization Name (eg, company) [Internet Widgits Pty Ltd]:組織名
Organizational Unit Name (eg, section) []:susumuis
Common Name (e.g. server FQDN or YOUR name) []:ドメイン名
Email Address []:

Please enter the following 'extra' attributes
to be sent with your certificate request
A challenge password []:
An optional company name []:
$ openssl x509 -days 3650 -req -signkey icecoder.key < icecoder.csr > icecoder.crt
Signature ok
subject=/C=JP/ST=Tokyo/L=Tokyo/O=組織名/OU=susumuis/CN=ドメイン名
Getting Private key
$ rm icecoder.csr
$ sudo mv icecoder.* /etc/ssl/certs/
$ cd /etc/nginx/sites-enabled/
$ sudo ln -s //etc/nginx/sites-available/icecoder icecoder
$ sudo /etc/init.d/nginx reload
Reloading nginx configuration: nginx.

調べながらやったのでここまでで1時間くらいかかった。lnコマンドはどっちが先かとか毎回調べてしまうの何とかしたい。

この状態でWebでアクセスしたら

Couldn't create config-icecoder_*******.php. Maybe you need write permissions on the lib folder?

とか言われました。パーミッションが正しくないらしい。これはこれで、ちゃんとユーザと権限が適切になっている証拠なので、必要なディレクトリだけwww-dataユーザに権限を渡せば良い。

$ cd ICEcoder/
$ chown -R www-data .
$ chmod g+w backups/ lib/ plugins/ test/ tmp/

こうしてアクセスしてみると下記のようにパスワードを求められる。

初期画面

パスワードを入力するとログイン後の画面が表示された。

ログイン後

初期状態ではICEcoder自体のソースコードが表示されるようだ。これでは使いづらいので、プロジェクトルートのようなフォルダを作ってルートディレクトリをそのフォルダに指定するような設定が必要だろう。


今学ぶべきプログラミング言語:Hack (Hacklang)

Web開発ではどの言語を使ったらよいか

大規模Webサイトとか、業務システムを作るならつべこべ言わずJavaにしとけと個人的には思っているのですが(.NETは詳しくないので)、次のようなシチュエーションを良く聞きます。

  • さくっとWebアプリを開発したい(or PHPの資産を活用したい)
  • 型安全が欲しい
  • パフォーマンスも良い方がいい
  • Javaはめんどくさい
  • .NETはお金がかかるから避けたい

こんな時に、HHVM + Hacklangは良い検討対象だと思っています。理由としては、

  • PHPの資産が使える
  • 型安全である
  • HHVMは速い

僕のブログでも下記の記事で触れてきました。

しかし、Web上の記事をみてもあまり普及している感じがしないです。理由として考えられることは

  • PHPでいいじゃん(できることは変わらない)
  • 現時点でサポートする開発環境/エディタが充実していない
  • 情報が少ない
  • HHVMをホスティングできるレンタルサーバーがない

ということがあると思います。

もともとPHPの危ないポイントを回避しながら使いこなすことができる生粋のPHP職人の方々は素直にPHP書けば良いでしょう。しかし、PHPは罠だらけの言語です。できれば触れたくないと思っている人も多いです。一方で、技術の完成度というのは、いかにそれが使われるかにかかってきます。例えばJavaScriptはパフォーマンスという点では不利な言語でしたが、複数のWebブラウザによるのスピード競争の結果、最も速く、最も開発環境が充実したプログラミング言語になりました。そして、サーバーサイドのそれはPHPやJavaです。

ざっくり言って、PHP+型は夢の組み合わせです。Hackは無理なことをせず、それをうまく実現しています。静的型付け言語としてはScalaやGoもありますが、HackはPHPと同じくWebを前提としている言語として価値があると思います。

どのように学べばよいか

日本語の情報なら、下記の電子書籍があります。

現時点では英語が読めないとHackを学ぶのは厳しいですし、英語が読めるならこの本の内容は公式ドキュメントでカバーできるのですが、はじめの取っ掛かりには良いと思います。

技術評論社よりePub版も販売されていますが、僕はAndroidとWindowsではソースコードを綺麗に表示できるアプリを見つけることができなかったため、読み切りだと割りきってKindle版を買うことをおすすめします。

そこから先は、公式サイトのチュートリアル、公式ドキュメントこれに尽きると思います。

http://hacklang.org/tutorial

FBIDEがリリースされたら熱そう!

上記チュートリアル、使ってみるとあれって思いませんか?リアルタイムの文法チェックやコード補完がサポートされています。どこにそんな高級エディタがあるのでしょう。現状vimとemacsしか選択肢がない言語です。ではこの高機能なエディタは、チュートリアル用に作られた専用プログラムなのでしょうか?

これは、FBIDEのサブセットではないかと思います。下記ビデオで紹介されています。

Introduction to FBIDE - Hack Dev Day

シンプルでクールなWebベースのIDEのようです。リリースされたらものすごいワクワクします。

Hackは新しい言語なので、型推論など便利な仕組みを持っています。そして優れたIDEがリリースされれば鬼に金棒ではないでしょうか?

そういえば、Hackの文法チェックコマンドは hh_client とタイプします。これも、IDEのバックエンドで使われるための布石のような雰囲気がします。FBIDEにかぎらずHackの開発環境をこれで作ることは可能のような気がします。例えばHackのEclipseプラグインなどを作ることもできるのではないでしょうか。

FBIDEがリリースされたら本気出す?

いつ来るかわからないFBIDEを待っていてHackの勉強を怠るというのは、技術者の姿勢としてはよろしくないです。現にいま使うことができる言語です。このブログでもWordPressのプラグインが作れることを紹介しました。なんといっても、PHPのエコシステムに乗れば、すでにほとんどのことができます。2014年も残り3ヶ月あまりですが、今年中に勉強する言語としては、最有力であると思います。


Cocos2d-jsを試してみた(秋葉原Cocos2d-html5もくもく勉強会#4 にて)

4連休の初日は、秋葉原Cocos2d-html5もくもく勉強会#4 に参加してきました。

秋葉原Cocos2d-html5もくもく勉強会#4 - connpass

参加経緯

僕はCocos2dもゲームプログラミングも業務経験がないド初心者ですが、実は、昔、学生の頃は僕もガラケー向けの落ち物パズルゲームを作ったり、ちょっと特殊なブロック崩しを作ったりしていました。せっかくだから、その頃の作品を最近のスマートフォンに移植したいと思いつつ、仕事が忙しいことを言い訳にしてなかなかできずにいました。

そんな中で、ちょうどこのイベントがGW中に開催されることを知って申し込みました。初参加です!

Cocos2d-js *1とは

Cocos2d(Cocos2d-x)主にモバイル向けのクロスプラットフォーム2Dゲーム作成ライブラリで、C++で開発することを基本としています*2。(http://www.cocos2d-x.org

Cocos2d-jsは、Cocos2d-xのJavaScriptバインディング機能を利用して、同様のコードがWebブラウザ上で動作するようにしたライブラリです。言語はJavaScript†使います。Webブラウザとエディタさえあれば開発環境はが揃うので、非常に取っ付き易いライブラリです。

しかも、Chromeなどの最近のブラウザではネイティブとも遜色ないほど軽快な動きをするらしいです。Webビューに貼付ければそのままスマホアプリにできるとか。もっとも、端末の性能を最大限に活用するなら、Cocos2d-xでネイティブにコンパイルした方が良いらしく、その方法もあるようです。*3

Cocos2d-JS | Cocos2d-xにサンプルプログラムが公開されています。

これなら、JavaScriptなどのWebの知識を活用できるので、僕でも取っ付きやすそうです!

勉強会の様子

会場は株式会社あゆたさんの開発室です。以前、お茶の水の方に開発室があったときに別の勉強会でお邪魔したことがありましたが、岩本町のビルに移転していました。きれいな会場のご提供ありがとうございます。

自分は12時15分頃到着しましたが、既に2名の方が無言でカタカタしていました。 参加者が全員集まったところで、自己紹介と今日やる内容を発表し、最後にみんなでできたことを発表するというスケジュールで、あとは皆一言もしゃべらずひたすら黙々していました。

こういう雰囲気だと、集中できて良いですね!

自分がやったこと

下記のebookがAmazonで販売されていたので、購入してひたすら頭から写経していました。(500円!安い!)

Cocos2d-html5ではじめるモバイルゲーム開発

Cocos2d-html5ではじめるモバイルゲーム開発

書いたプログラムの内容はこのebookを読めば良いわけですから、ここでは紹介しません。(笑)

本の感想

本職の方々の意見はどうなのか分かりませんが、この本は説明も易しく、ゲーム開発者の気持ちも伝わって来て、良い本だと思います。自分は少しばかりゲーム開発の素地があったからかもしれないので、全くの初心者だとどういう感想があるかは分かりませんが、少なくとも僕はこの本一冊で入門は良さそうで、あとは公式ドキュメントやWebの情報でなんとかなると思いました。

やってみた感想

学生の頃すこしDelphiやC#でゲームを作ったりしてた経験に照らし合わせると、ハード面もずいぶん進化しているのか、ライブラリが良いのか、昔「これはダメ」と言われたやり方が全然大丈夫になっていて驚きました。

例えば、Delphiでもラベル(TLabel)をフォーム(TForm)に貼り付けて、ラベルのLeft, Topプロパティをタイマー(TTimer)で動かせば文字を動かすことができますが、そんなことをするとチラつくし、滑らかじゃなかったので、そうではなくて、1フレーム1/60秒になるように処理落ちを考慮しながら計算しながら、毎フレーム画面を再描画し、それも、都度描画するとチラつくから、裏で描画させたものをまとめてコピーして。。。(ry

このebookでは、宇宙船を操作して敵から避けるゲームを作っていくのですが、いきなり、ラベルをたくさん作って配列に入れたりするんですね。敵の動きはラベルの座標を動かす感じです。あと、フレームの計算とかも自分でしないで、60fpsなら60fpsと設定するだけであとは、update関数に処理を書くだけなんですね!ゲーム作りの最初数日を消費した苦労が。。。。*4

そもそも、言語がJavaScriptってのが楽すぎます!配列は事実上、メモリの管理とかもないしいいですねえ。。。

JavaScriptを書くのに良いエディタは?

JavaScript開発の環境として、以前このブログで下記のような記事を書きました。 EclipseのJavaScript環境(JSDT)を快適に使う方法 - susumuis Info

このときは、ExtJSというRIAライブラリを使おうとして環境を構築していたのですが、ExtJSとCocos2d-jsの共通点として、非常に巨大なJavaScriptライブラリをロードするというところがあります。従って、このライブラリを開発環境のライブラリパスに含めてしまうと、コード補完に数秒という、非常に残念な環境になってしまいます。なので、今回も、Cocos2d-js関連のライブラリは外してしまいました。プロジェクトのプロパティ画面から、下記のキャプチャのようにして、Cocos2d-html5-v2.2.3.min.jsを外しています。

f:id:s-ishigami:20140504180810p:plain

これで、かろうじて開発できるようになったのですが、これはこれで、残念な開発環境でした。Cocos2d-jsのコードの特性上、ほとんど補完が利きません!例えば、次のようなコードを書くのですが

var Result = cc.Layer.extend({
    init: function() {
        this._super();
        var size = cc.Director.getInstance().getWinSize();
        // 省略
        return true;
    }
    , onTouchesBegan: function(touches, event) {}
    , onTouchesMoves: function(touches, event) {}
    , onTouchesEnded: function(touches, event) {}
    , onTouchesCancelled: function(touches, event) {}
});
var ResultScene = cc.Scene.extend({
    onEnter: function() {
        this._super();
        var layer = new Result();
        layer.init();
        this.addChild(layer);
    }
});

cc.Layer.extendみたいにして、継承を表現してしまうため、ResultSceneの定義の側でnew Result()とか、layer.init()が全く補完できません。これなら、テキストエディタによる語句補完の方がマシです。

ということで、最終的に僕が選んだのはAtomです。

Atom

別に、Web業界で大人気のSublime Textでも良かったんですが、JavaScript書くなら相性が良さそうな気もしますし、今後活用して行こうと思います。

f:id:s-ishigami:20140504181726p:plain

会場にいた人にどんなエディタ使っているのか聞いたところ、IntelliJを使っているとか。。。。それは最強ですね。w;

しょっぱなcocos2d-xサイトが落ちてたので、GitHubからライブラリをダウンロードしてサンプルを実行しました

たまたま http://www.cocos2d-x.org/ が一時的に落ちてました。(すぐに復旧しました)

早速、ライブラリをダウンロードして、サンプルを実行しようとした時にこうだったので、「僕は何をしたら良いんだ」状態になってしまったので、githubからソースを落としたりしてみました。

READMEに従って

$ git clone git://github.com/cocos2d/cocos2d-html5.git
$ cd cocos2d-html5/
$ git submodule update --init
$ python -m SimpleHTTPServer

とやりましたが、なぜか、http://localhost:8000/にアクセスしてもページがありません。 どうたら現在のdevelopブランチには、デモ用のindex.htmlとかがないようです。そこで下記のようにして、2.xブランチに切り替えたところ、サンプルのindex.htmlもダウンロードされてきました。

$ git branch -a
* develop
remotes/origin/HEAD -> origin/develop
remotes/origin/NPM
remotes/origin/develop
remotes/origin/gh-pages
remotes/origin/master
remotes/origin/v2.x
$ git checkout -b v2.x origin/v2.x
$ python -m SimpleHTTPServer

ただ、本の中で紹介されているライブラリソースを一個のjsファイルにコンパクションしたCocos2d-html5-v2.2.3.min.jsは含まれていませんでした。これは自分で生成できるのでしょうけど、そうこうするうちに、公式サイトが復活したので、普通に http://cocos2d-x.org/download から落としちゃいました。

ゲーム作ってみようかなあ

ゲームプログラミングには疎いのですが、思ったよりも短時間でゲームを作れることが分かりましたし、昔作ったブロック崩しゲームのようなゲームは簡単に実装できそうです。

昔はゲームプログラミングを勉強しようとすると、C言語でHello, Worldから入って、慣れて来たら、Windows SDKでウィンドウを作るだけのコードを書くのに何百行も書いて*5、Microsoftのヘルプファイルと格闘し、慣れて来たらDirect Xに挑戦して。。。という道を歩まなければならなかったので、今は良い時代になったなあと思います。

ゲームを作って利益を得ようとすると非常に大変な世界と聞きますが、趣味の範囲でちょっとした表現として、ゲームを作るというのは楽しいです。「なんか思いついちゃったんで、一晩でこんなクソゲー作っちゃったーwww」なんてのを繰り返してたら、思ったより楽しいゲームができてしまったとか、そういうの良いですよね!

ピアノなんかと同じです。プロになろうとすると大変ですが、趣味でゲームプログラミングをする。へたくそで良いんです。楽しめれば。

*1:先日Cocos2d-html5から名前が変わりました

*2:正確にはiPhone用のCocos2d-iPhoneってのがオリジナルで、Objective-C用みたいで、それをC++に移植してクロスプラットフォームにしたのがCocos2d-xです。その他Go言語やC#への移植版も存在するようです。

*3:後述のeBook曰く「二階から目薬(iPhone)」「三階から目薬(Android)」というようですがw

*4:当時でも僕がDelphi使いだからいいもので、C++使いの人たちはWindows SDKでまずフォームを出すところから苦労が

*5:しかも大体動かねーとかいって苦しむんですよね