2011年9月24日土曜日

Heroku/Node.js で "hello wolrd"(自分用メモ)

初めてのHerokuです。
dotCloudも試したのですが、web-socket使うのであれば、Herokuの方がオススメとのことだったので。

手順はおよそこのサイト通りでした。
id: ruedap ++

実行環境:
MBA
MacOSX Lion 10.7.1


【実施手順】

  • Node.jsインストール
  • npmインストール


npm install (module name) とするとパッケージのnode_modulesフォルダ内にモジュールがインストールされる。
グローバルにインストールしたい場合は、npm install (module name) -g とオプション指定する(複数アプリで使いまわしたい場合)。
node.jsは半年触れないと細かいところ変わっていて早いなーと。


その後、任意のフォルダにて
  • expressインストール
  • express (YourAppName) コマンドでアプリの雛型作成
  • サーバファイルapp.jsを更新
雛型のapp.jsと同階層に
  • package.json(アプリ情報と、node.jsのモジュール群バージョン情報)
  • Procfile(アプリ形式の設定ファイル)
  • .gitignore(Herokuへコミットしたくないフォルダはここへ記述)
を配置。

まずはローカル環境で実行確認。
いつもの node  app.js

Procfileでの環境に誤りがないかforemanでテスト。
foreman start を実行
※foremanが入ってなければ事前にインストール gem install foreman

ここまで進めば、残りはHerokuへのデプロイ作業のみです。


ちなみに、参照先以外で、デプロイ時につまづいた点は以下のもの。
【1】
git add . する前に
git init しておく
※gitに不慣れなのは反省

【2】
git push heroku master する前に
git remote add heroku git@heroku.com:YourAppName.git
で自分のアプリ名で実行しておく

【3】
git push heroku master を実行したとき、
Warning: Permanently added 'heroku.com,50.19.85.156' (RSA) to the list of known hosts.
Permission denied (publickey).
fatal: The remote end hung up unexpectedly
と出たら、sshキーが不正なので、再度生成します。

以下のコマンドで、heroku用のsshキーを生成。
ssh-keygen -t rsa -C "yourmailaddress@mail.com"
すると、
Generating public/private rsa key pair. 
Enter file in which to save the key: (keyの保存場所の確認で良ければenter)
Enter passphrase (empty for no passphrase :パスワード登録):
Enter same passphrase again:

と、続いてkey fingerprintが表示されればOK。


最後に git push heroku master コマンド実行し、
ポップアップのパスワードを認証させると、herokuにNode.jsアプリを配置できます。










※http://hello-yoshi.heroku.com/でも上記URLへリダイレクトされます。

2011年9月11日日曜日

背景画像でスライド遊び

ブリューゲル作品:「ネーデルランドの諺」でスライドのように動かしたら面白かったので記載します。

sample: DragDealer
※Control Linksから操作が可能ですが、Mouse Dragでも上下左右にスライド移動できます。
















参照:
DragDealer.js

そういえば、旅館「多田屋」のサイトは美麗ですよね。あちらはバリバリのFlashなので、これをjsでやるとしたら大変だろうなと。

2011年9月3日土曜日

Tumblr Photo Viewer "Tumblocks" 作りました。

Tumblocks作りました。

材料

Tumblrには、元々MegaViewerというDashboard一括閲覧用のツールが有るのですが、
これはテキストもムービーも全部並べるものでした。

個人的にDashboardの画像ファイルだけ並べてみたかったので、実験的にやってみました。

Tumblrユーザは、自他のTumblrユーザ名(※図1のURL赤枠)を入力するだけで、画像ファイルのダラ見ができます。












図1:Tumblr User画面
















図2:Tumblocks 使用図①
(1ページには最大50件まで表示可)
















図3:Tumblocks 使用図②
(30件未満であれば大きめのサイズに)

画像系のサービスは作っていて楽しいですね。


最後に、今後のもしかしたらのToDo

  • DashBoard または Likesでの切り替え表示
  • 少ない数での表示は隙間が目立つので、元画像サイズを基にした隙間埋め
  • 類似画像抽出…は難しそうなので見込みがあれば。。

Blogger Syntax Highliter