Mikimemo

個人的な技術・開発メモやポエム

Node.jsとherokuで静的サイトを簡単につくる

Railsホスティングサービスherokuを使って、
無料かつ広告が挿入されてないホームページを作るってことをやってみました。

ただ、データベースもルーティングも使わない単たる静的ページにRailsを使うのも大げさだなぁと思い、
Node.jsを使ってみました。

テンプレートをGithubにあげておきました。
https://github.com/mikito/node-static-site

テンプレートといっても、必要最小限の機能を残しただけですが...
恐ろしくシンプルです。

下準備

まずherokuのアカウントをつくっておいてください。

さらにherokuのコマンドを使えるようにherokuツールもインストールしてください。
多分、アカウント作った後にherokuのダッシュボードの画面でダウンロードのリンクが表示されると思います。

herokuツールがインストールできたらターミナルからherokuにログインしておきます。

$ heroku login
Enter your Heroku credentials.
Email: ************@gmail.com
Password:

サイトつくってみる

Githubからテンプレをclone

$ git clone git@github.com:mikito/node-static-site.git mikinya-net

cloneしたディレクトリに移動

$ cd mikinya-net/

herokuアプリ作成

$ heroku create mikinya

herokuにアプリが作成され、さらにgit remoteにherokuが追加されます。

$ git remote
heroku

herokuにpushします

$ git push heroku master

一応プロダクション環境で起動しときます。

$ heroku config:add NODE_ENV=production

サイト開いてみます

$ heroku open

サイトの更新

サイトを更新する時はpublic以下を編集後、
git add、git commitしたあと再度

$ git push heroku master

です。

バージョン管理もできて一石二鳥だしFTPとか使わないので楽。なはず。

その他

Cocos2d-x環境構築

以前ハッカソンをやったときにCocos2d-xを触ってみたのでそのときのメモ。環境はMac

ダウンロード

http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Downloadからcocos2d-2.0-x-2.0.4みたいのをダウンロード。解凍したファイルを任意のフォルダに移動 。

iOS 手順

テンプレートのインストール

sh cocos2d-2.0-x-2.0.4/install-templates-xcode.sh -u

プロジェクト作成
  1. Xcode起動
  2. 新規プロジェクト作成
  3. cocos2d-xテンプレートが追加されているので選択
  4. 作成されたプロジェクトをRunすれば起動する

Android 手順

各種インストール
.bash_profile等でSDK Path設定

export NDK_ROOT="/SDKs/adt-bundle-mac/ndk/"
export ANDROID_SDK_ROOT="/SDKs/adt-bundle-mac/sdk/"

EclipseにCocos2dxライブラリをインポート
  1. file->importを選択
  2. Existing Projects Into Workspaceを選択
  3. Select root directoryでcocos2d-2.0-x-2.0.4フォルダの下の、cocos2dx/platform/android を選択
  4. Finishを選択してlibcocos2dxをインポート
    • このときcopy projects into workspaceにチェックを入れないようにする
Android Project作成
  1. cocos2d-2.0-x-2.0.4に移動しcreate-android_project.shを実行
  2. Bundle ID入力
  3. API Levelを選択
  4. プロジェクト名を入力
  5. cocos2d-2.0-x-2.0.4直下にAndroidプロジェクトが作成される
  6. Eclipseにインポート
ビルド

proj.androidにあるbuild-native.shを実行。このとき、Android Projectをcocos2d-2.0-x-2.0.4/から移動してるとエラーになるので.bash_profileに以下を追加

export COCOS2DX_ROOT="/SDKs/cocos2d-2.0-x-2.0.4"

さらに、build_native.shのCOCOS2DX_ROOTをコメント化

#COCOS2DX_ROOT="$DIR/../.."

これで、一応Eclipseでビルドして実行できるようになる。
やや無理矢理な感じがするけど、cocos2d-x直下にandroidプロジェクトを置けってことなんだろうか...


ちなみにソースを追加した場合jni/Android.mkのリストにも追加する必要がある。

LOCAL_SRC_FILES := hellocpp/main.cpp \
../../Classes/AppDelegate.cpp \
../../Classes/HelloWorldScene.cpp \
../../Classes/GameOverScene.cpp

Android.mkへの自動追加はこの記事を参考にすればできそう

iOSAndroidソース統合

Androidプロジェクト作成後、Xcodeプロジェクト作成して、ディレクトリ構成を以下みたいにして、Xcodeプロジェクトごちゃごちゃいじった。もっと効率的に作成する方法があるんだろうか。

Hackathon/
├── Classes # AndroidiOSともにこのディレクトリのソースを参照
├── Resources # AndroidiOSともにこのディレクトリのリソースを参照
├── proj.android
│   ├── assets
│   ├── bin
│   │   ├── classes
│   │   └── res
│   ├── gen
│   │   └── jp
│   ├── jni
│   │   └── hellocpp
│   ├── libs
│   │   └── armeabi
│   ├── obj
│   │   └── local
│   ├── res
│   │   ├── drawable-hdpi
│   │   ├── drawable-ldpi
│   │   ├── drawable-mdpi
│   │   ├── drawable-xhdpi
│   │   ├── layout
│   │   └── values
│   └── src
│   ├── jp
│   └── org
└── proj.ios
├── Hackathon
│   ├── Resources
│   ├── ios
│   └── libs
└── Hackathon.xcodeproj
├── project.xcworkspace
└── xcuserdata

コマンドラインからXcodeビルド

Xcodeプロジェクトはコマンドラインからでもビルドできます。

xcodebuild -project "XXXX.xcodeproj" -configuration "Release"

これでできるはずだけどエラーでました。

2012-04-23 16:02:37.958 ibtoold[5490:e0b] [MT] DVTAssertions: ASSERTION FAILURE in /SourceCache/IDEInterfaceBuilder/IDEInterfaceBuilder-1938/Framework/WidgetIntegration/IBIntegratorManager.m:278
Details: Failed to find integrator bundle for class NSPopover
Object:
Method: -registerIntegrator:remainingIntegratorsBySuperclass:
Thread: {name = (null), num = 1}
Hints: None
Backtrace:
0 0x000000010085ebd4 -[DVTAssertionHandler handleFailureInMethod:object:fileName:lineNumber:messageFormat:arguments:] (in DVTFoundation)
1 0x000000010085eaa4 _DVTAssertionFailureHandler (in DVTFoundation)
2 0x0000000100021b42 -[IBIntegratorManager registerIntegrator:remainingIntegratorsBySuperclass:] (in IDEInterfaceBuilderKit)
3 0x0000000100021c69 -[IBIntegratorManager registerIntegrator:remainingIntegratorsBySuperclass:] (in IDEInterfaceBuilderKit)
4 0x0000000100021c69 -[IBIntegratorManager registerIntegrator:remainingIntegratorsBySuperclass:] (in IDEInterfaceBuilderKit)
5 0x0000000100021804 -[IBIntegratorManager registerIntegrators:] (in IDEInterfaceBuilderKit)
6 0x00000001000213b4 -[IBIntegratorManager loadAllIntegrators] (in IDEInterfaceBuilderKit)
7 0x00000001000210cc -[IBInterfaceBuilderPlugin init] (in IDEInterfaceBuilderKit)
8 0x0000000100020f91 +[IBInterfaceBuilderPlugin ide_initializeWithOptions:error:] (in IDEInterfaceBuilderKit)
9 0x000000010047eb7c _IDEInitializeOnePlugInAndPrerequisites (in IDEFoundation)
10 0x000000010047e8cd _IDEInitializeOnePlugInAndPrerequisites (in IDEFoundation)
11 0x000000010047e38c IDEInitialize (in IDEFoundation)
12 0x0000000100003e58 (in ibtoold)
13 0x0000000100001a94 (in ibtoold)
14 0x000000000000000b
Command /Developer/usr/bin/ibtool failed with exit code 6

Mac OSはこの前Lionに、Xcodeも4.3にアップデートしたんですが、
xcodebuildのバージョンが4.2のままになっていました。

$ xcodebuild -version
Xcode 4.2

4.3からXcodeの配布方法も変わりましたからね..


xcodebuildを正しいとこに向けます

$sudo /usr/bin/xcode-select -switch /Applications/Xcode.app/Contents/Developer
$sudo rm /usr/bin/xcodebuild
$sudo ln -s /Applications/Xcode.app/Contents/Developer/usr/bin/xcodebuild /usr/bin/xcodebuild

ちゃんと新しいバージョンが表示されます。

$ xcodebuild -version
Xcode 4.3.1

これでコマンドラインからBuildが通るようになりました。

Node.jsをインストール

Node.jsはサーバーサイドにJavascriptを使っちまおうっていうものです。
速いしクライアントと同じ言語で書けるしとてもいいらしいです。

今回はWebsocketの勉強でサーバにNode.jsを使うためとりあえずインストールします。
ちなみに環境はMacです。

Node Version Managerインストール

まずnvmっていうやつ入れます。
これがあると、Node.jsのインストールがコマンド一つでできたり、複数のバーションを切り替えたりできます。

gitでレポジトリからコピーもってきます

$ git clone git://github.com/creationix/nvm.git ~/.nvm

sourceして読み込ませればインストール完了です。

$ source ~/.nvm/nvm.sh

nvmとコマンド入力してUsageとかが表示されてればOK

ログイン時に自動でnvmを読み込むように.bash_profileあたりに設定を書いておきます。

$ vim ~/.bash_profile
source ~/.nvm/nvm.sh

Node.jsインストール

nvmを使ってNode.jsをインストール。簡単です。
現時点で最新バーションは0.4.11でったので、それを指定。

$ nvm install v0.4.11

結構時間がかかります。

インストールできたら使用するNode.jsを指定します。

$ nvm use 0.4.11
Now using node v0.4.11

これも自動で読み込むよう.bash_profileあたりに追加しておきましょう。

$ vim ~/.bash_profile
source ~/.nvm/nvm.sh
nvm use 0.4.11 # 追加

サンプル動かす

server.jsっていう名前で以下を保存

var sys = require('sys');
var http = require('http');

var server = http.createServer(
function (request, response){
response.writeHead(200, {'Content-Type': 'text/plain'});
response.write('Hello World!\n');
response.end();
}
).listen(8000);

sys.log('Server running at http://127.0.0.1:8000/');

でサーバーを起動します。

$ node server.js
4 Sep 16:37:37 - Server running at http://127.0.0.1:8000/

ブラウザでhttp://localhost:8000/と入力すれば「Hello World!」と表示されます。

サーバーを止めるときはCtrl+cです。