2011年6月30日木曜日

[node.js] node-devをinstallして自動で再起動

ApacheのReverse Proxyの機能を使っていると、node.jsを再起動するごとに下記Errorが出て、1分ぐらい接続できない。

503 (Service Temporarily Unavailable)

Cacheでも効いているのかな?どちらにせよ編集するたびに再起動するのはメンドクサイので、Fileを監視して、自動的に再起動してくれるPackage[node-dev](GitHub)をInstallしてみた。

環境は, CentOS 5.6, node.js v0.4.7, node-dev 0.1.6

下記Siteも参考に。

# npm -g install node-dev

-gはGlobal Option. 実行するときはnodeの代わりにnode-devを使う

# node-dev server.js

 

< Related Posts >

2011年6月29日水曜日

[node.js]express-mvc-bootstrap + socket.io

MVCな開発がしたくてexpress-mvc-bootstrapをinstallしたけど、socket.ioをどう使うか調べたMemo.

環境はnode.js v0.4.7, express v2.3.10, express-mvc-bootstrap v0.1.2, socket.io v0.6.18

今までは次のようなCommandで実行していたけど、socket.ioを利用するためにはexpress.createServerしたInstanceを渡さないといけない。詳しくはOfficial Document

# ../node_modules/express-mvc-bootstrap/eb server

しょうがないのでこのScriptを参考にapp.jsと同じDirectoryにserver.jsを作って、次のようなScriptを書いた。

/**
* server.js
*/
var port = 3000;

var io = require('socket.io')

var server = require('./app').boot();
server.listen(port);
console.log('\r\n\x1b[36mApplication started on port:\x1b[0m ' + port);

//
// start up socket.io
var io = io.listen(server)
     , buffer = [];

io.on('connection', function(client){
    client.send({ buffer: buffer });
    client.broadcast({ announcement: client.sessionId + ' connected' });

    client.on('message', function(message){
        var msg = { message: [client.sessionId, message] };
        buffer.push(msg);
        if (buffer.length > 15) buffer.shift();
        client.broadcast(msg);
    });

    client.on('disconnect', function(){
        client.broadcast({ announcement: client.sessionId + ' disconnected' });
    });
});

今のところsocket.ioのExampleをそのまま利用。

実行するのは
# node server.js

本当はsocket.ioもcontrollerで受け取るような仕組みにしたい。それはまた今度考える。

 

< Related Posts >

[node.js]node-inspectorを使ってdebugする(express-mvc-bootstrap)
[node.js]MVCな開発がしたくて「express-mvc-bootstrap」をInstallしてみた
WebSocket, node.js, Socket.IOって何?

2011年6月28日火曜日

Wordpressの覚えておきたいplugin

大抵のことは自分で開発してしまうけれど、これは知っておくと確かに便利。

WordPressでCMSを作るなら絶対に覚えておきたいプラグインいろいろ | Web活メモ帳

そのうち社内向けにDefaultのpluginとtemplateをまとめたい。

 

< Related Posts >

Wordpress 開発リファレンスのリンク集

2011年6月27日月曜日

FirefoxのFlashFirebugでFlash内のTraceを表示する

他の人が作ったswfをdebugしたときのMemo.

swf内のtraceをBrowserで表示するにはFirefoxのPlugin:FlashFirebugが便利。FirebugをInstallしてあれば、Panellに[Flash]が追加される。

image

Official Siteに詳しい説明があるので、そちらも参考に。

普段はDisabledにしておいた方がいいらしい。

 

< 2011/06/30 Modified >
Adobe Flash Professional CS5からでも出来ることが分かった。
Debug -> Begin Remote Debug Session -> Acsion Scriopt 3.0
これで待機状態になるので、あとはFirefoxとかで表示すればTraceが表示される。

2011年6月24日金曜日

SWFToolsを使ってswfの縦横比(size)を調べる

Adobe Flash Professional CS5(Adobe Web Premium CS5)を会社で使っているけど、swfのwidth, heightを知る方法が分からなかったので、SWFToolsをInstallしてみた。

環境はWindows7 64bit Home Edition

Official SiteからDownloadしてきてInstallする。

Command Promptから

cd C:\Program Files (x86)\Tools\SWFTools

swfdump -XY C:\hoge.swf

swfはDrag&DropするとPathを入力する手間が省ける。swfdumpのReferenceはこちら

・・・AdobeのApplicationを使った簡単な方法があると思う。分かったら追記予定。

2011年6月23日木曜日

AS3からAS2の外部swfを読みこんでEventを取得したい

他の人が作ったflashを組み合わせたときのMemo.

環境はAdobe Flash Professional CS5, Action Script 3.0

まず外部swf fileを読み込むのはLoader を使えば簡単。下記を参考に。

flash.display.Loader (ActionScript 3.0)

ActionScript3.0 勉強部屋 外部swfファイルの読み込みと制御

ハマったのはここから。やりたいのは

AS2のswfのbuttonをclickしたら、そのEventを親swfでcatchして処理をしたい(できるだけ他の人が作ったAS2 SWFは触りたくない)。

基本的にAS2のswf(AVM1 SWF)とAS3のswf(AVM2 SWF)はやり取りできないらしい。Reference Guide

試したこと

  • 親swfで透明なbuttonを設置する。
    → 子swfのmouse overのEventが発生しなくなる
  • Loaderで読み込む際にAVM1をAVM2に変換するForcibleLoaderを試す。こちら
    → 読み込んだ子swfの動きが変になる
  • stage.addEventListener(MouseEvent.CLICK, func);
    loader.addEventListener(MouseEvent.CLICK, func);
    という感じで、Click Eventを全て取得して、座標で判断。
    → 子swfのbutton上ではClick Eventが発生しない。

 

結論、LocalConnectionを使わないと実現できない = 子swfを改修しないといけない。

LocalConnectionの使い方は下記Blogを参考に。

ActionScript3.0 LocalConnectionで2つのSwfを連携させたい。 - 雨と風と快晴と 2.0

ちゃんと「おもじない」をしないと動作しなかった。

さらに途中で強制終了すると、次起動したときに下記Errorが出力されて止まる。

Connect failed because the object is already connected.

これはconnect()をtry catch文で囲んで回避するみたい。

 

< Related Posts >

[Flash] Coding Guide(コーディング規約) for ActionScript
初めてのFlash。お役立ちLink集

2011年6月22日水曜日

2011年6月21日火曜日

初めてのFlash。お役立ちLink集

ついにFlashを作成することになったので、一から勉強したときのMemo.

環境はWindows 7 64bit, Adobe Web Premium CS5 - Adobe Flash Professional CS5

 

OpenSourceなFlash開発環境のFlashDevelopというSoftwareがよく利用されているらしい。

Adobe Web Premium CS5にはAdobe Flash Builder 4が付属している。これはAdobe版FlashDevelopらしい。Profilerが便利みたいなので、開発の後半で活躍する場面もあるみたい。

Flash Builderを使う場合の設定他

< 追記 >
Flash CS5からFlash Builderが起動するので、こちらを使うようになった。Eclipseの画面構成と同じなので、(Eclipse開発の経験があれば)分かりやすいと思う。

 

FlashらしいSmoothなanimationはMotion Tweetというらしい。

 

FlashでもやっぱりMVCで開発しちゃう?

2011年6月20日月曜日

[Design]Free PSD Graphic Sample集

Singaporeに来てからはDesign重視のWeb Siteを作成することが多いので、こういったSampleは助かる。

500+ Free PSD Graphics for Web Designers

ちなみにPicasa Photo Viewerを使えば、PSD Fileを開かなくでもPreviewできることに気付いた(たぶんPhotoshopのInstallは必要)。

2011年6月17日金曜日

LoadingのGif画像を背景色を指定して作成する

「しばらくお待ちください。...」と一緒にぐるぐる回るGif画像を探していたときのMemo.

下記Siteで背景色を指定して(もちろん透明も)作成できる。

Load Info - gif generator

imageimage

各種Animationを選択して、foreground, backgroundのcolorを入力すれば完了。

似たようなSiteは他にもあるみたい。

Ajaxload - Ajax loading gif generator

2011年6月16日木曜日

Amazonで買った商品を転送.comを利用してSingaporeへ配送してみた

日本にいる間に使っていたRealforceのkeyboardの使い心地が忘れられず、ついに英語配列を買ってしまった。

実家に頼めば送ってくれるけど、転送.comが便利そうだったので試しに使ってみた。転送費用は次のような感じ。

荷物の重量:2080g
国際配送料:3500円
利用手数料:980円

Singaporeの場合はS$400(=約2万6千円)までなら免税されるらしい。詳しくはこちら。2万円までなら無料でEMS(wikipedia)を利用できるので選択しておいた方が得(Defaultでは「無し」)。

  1. 5/23(Mon) 5:29PM Amazon 「ご注文の発送」 Mail
  2. 5/24(Tue) 6:23PM 転送コム 「届いた荷物のご確認をお願いします」 Mail
  3. 5/25(Web) 5:50PM 転送コム「発送手続き完了のお知らせ」 Mail
  4. 5/27(Fri) 10:00AM Singapore 荷物到着

いろいろ買ってしまいそうな予感。

2011年6月15日水曜日

[Linux]GroupにUserを追加するCommand

今更ながらSambaで共有したFileを編集したりするときに、Directoryの所有者Groupを設定したときのMemo.

"smbguest"groupに"root"を追加する
# usermod -G smbguest root

指定Directory以下の所有者Groupを"smbguest"に
# chown :smbguest -R /opt/node_project

Groupに属するUserにも書き込み権限を与える
# chmod 775 -R /opt/node_project

どんなGroupがあるか確認
# less /etc/group

 

< Related Posts >

Sambaの設定ファイルsmb.confメモ

2011年6月14日火曜日

Google Docsの図形描画を使って画面設計する(Wireframe)

Wireframe(Webの骨組み)を作成する際にCloudを利用してうまく共有出来ないものかと調査したMemo.

Google Docsの図形描画(Google Drawing)を使えばいいみたい。

Google Drawing(図形描画)でGoogleドキュメントでのワイヤーフレーム作成が簡単に|Nomad Worker Style

「Wireframe」で検索すれば、Web用のPartsが用意されているTemplateやiPhone App用のTemplateが見つかる。

image

変更履歴も自動で保存されるし、世界中のどこにいてもNetが繋がれば参照・編集できるので便利。

これを社内に展開して、共通化するのが一番難しい。

2011年6月13日月曜日

WordpressからFacebook Fan Pageに自動で投稿したい

NetworkedBlogsというFacebook Applicationを利用すれば簡単に実現できるらしい。詳細は下記Blog(英語)

Craving Tech -Technology and Reviews : Auto post WordPress to Facebook fan page Comments Feed

下記wordpress pluginでFacebook Fan Pageをゴニョゴニョできているので、SourceとAPI Documentを眺めれば出来ると思う(試してはない)。

Facebook Connectを用いてFacebookと同期している動画

Facebook fan page, connect to facebook wordpress, wordpress facebook welcome page | MMNCS

2011年6月10日金曜日

Mobile端末向けのJavaScript Library"Sencha Touch"と"jQuery Mobile"

Web SiteをiPad, iPhone, iPod touch, Androidなどでもかっこ良く表示させる方法はないものかと調べたときのMemo.

Sencha Touch, jQuery Mobileを利用すればNative AppのようなUIを実現できそう。まだどちらも使ってないけど、軽く調べたことをまとめてみた。

< Sencha Touch >

  • JavaScript Framework
  • Bodyの中身はJavaScriptで動的に生成
  • MVCだし、Document(日本語)もしっかりしているので覚えるのにそんなに時間はかからなそう
  • SampleやDemoが豊富。
  • SwipeやPinchなどのTouch Eventを独自に実装しているらしい
  • GPLv3で利用できる。詳しくはOfficial Siteで。

 

< jQuery Mobile >

  • jQuery Projectの一つ。jQueryと一緒に使う。
  • Document部分はHTMLを記述。"data-role" propertyを設定するだけ(?)
  • まだAlpha Version. 現時点で 1.0 Alpah 4.1
  • MIT or GPLv2 (jQuery License)

 

Mobile前提のWeb Siteなら断然Sencha Touchがオススメ。

基本PC向けだけど、iPadやiPhoneでも綺麗に表示したい場合は一部jQuery Mobileを使う感じかな・・・。

2011年6月9日木曜日

HTML5 + CSS3に対応したFramework「52framework」

HTML5 + CSS3 + WebSocket + node.jsの最新技術を使ったWebSiteを作ろうとしていたときのMemo.

今まではblueprintというCSS frameworkを使っていた。HTML5とCSS3に対応したFrameworkはないものかと探してみると「52framework」(Google Code)がいいみたい。下記記事も参考に。

Best HTML5 And CSS3 Frameworks

< 52frameworkの特徴 >

  • HTML5, CSS3に対応
  • Cross-Browser supporting. IE6でも表示できる仕組みを提供
  • Design用のIllustrator Fileが含まれているので、これを元にDesignすれば作り易い。
  • MIT License. (Official Siteには記載がないがGoogle Codeにある)

今後はこれをBaseにしていくつもり。

 

< Related Posts >

HTML5とWebSocketについて調査、勉強(関連Link集)

2011年6月8日水曜日

[wordpress]同じDB上にprefixだけ変更してcopyする

Databaseが一つだけしか使えない場合、stage(demo)用とlive(本番)用で2つのwordpressをprefixを変えて共存させたときのmemo.

最初からinstallすれば間違いないのだけれど、既にあるDBをCopyしてみた。Backupするのを忘れずに。

まずはphpMyAdminでExportしたSQL FileのTable名を一括で置換

`wp -> `stage_wp

これをimportした後、同じように下記Dataをprefixに従って変更する。

  • SELECT * FROM `stage_wp_usermeta` where meta_key like '%wp_%'
  • SELECT * FROM `stage_wp_options` where option_name like 'wp_%'

これで一応動いているっぽい。


< 2012/04/10 Modified >
Indonesia, Thailand, Vietnamなど向けに多言語対応するときに、英語SiteをまるっとCopyするのによく使う。

URLを置換しただけだと管理画面にLoginしたときに下記Errorになる。

You do not have sufficient permissions to access this page.

これは上記のwp_usermetaとwp_optionsのData書き換えが必要。

2011年6月7日火曜日

[Subversion]過去Logを編集しようとしたらError

SVN Tortoiseで過去のLogを編集しようとしたら下記Errorで怒られた。

DAV request failed; it's possible that the repository's pre-revprop-change hook
either failed or is non-existent
At least one property change failed; repository is unchanged
Error setting property 'log':
Repository has not been enabled to accept revision propchanges;
ask the administrator to create a pre-revprop-change hook

Subversion Server側で設定が必要みたい。参考にしたのは下記Site.

subversionのログが編集(更新)できない2/作者(Author)も変更編 | Vamp Records

ちなみに環境はMac OS X Server 10.6.7 + Subversion 1.6.16

templateをcopyすれば解決。

# cd /svnroot/Repository/hoge_src/hooks
# cp pre-revprop-change.tmpl pre-revprop-change
# chmod 755 pre-revprop-change

 

< Related Posts >

Mac ServerにSubversionを設定してVersion管理

2011年6月6日月曜日

[xyzzy]jscript-modeからjavascript-modeに乗り換えた

node.jsの開発でJavaScriptを書く機会が増えたので、補完機能があるmodeはないものかと調べたら、javascript-modeというのが既にあるらしい。

拡張lisp/javascript-mode - XyzzyWiki

sitelisp.lにload-libraryを書くと、Keywordに色が付かなくなるのでSourceを少し修正。

さらにtabを押したときの動きが他のmajor-modeと違うので修正。以下差分を貼りつけ。

# diff -u javascript-mode_old.l javascript-mode_new.l > diff.txt

--- javascript-mode_old.l    2005-03-02 18:48:08.000000000 +0800
+++ javascript-mode_new.l    2011-05-17 19:01:26.000000000 +0800
@@ -156,9 +156,9 @@
   "The assoc-array literal for the function javascript-dot-notation.")
 
(defvar *javascript-keyword-hash-list* nil)
-(and *javascript-keyword-file* (null *javascript-keyword-hash-list*)
-     (setq *javascript-keyword-hash-list*
-           (load-keyword-file *javascript-keyword-file*)))
+;(and *javascript-keyword-file* (null *javascript-keyword-hash-list*)
+;     (setq *javascript-keyword-hash-list*
+;           (load-keyword-file *javascript-keyword-file*)))
 
(defvar *javascript-mode-syntax-table* nil)
(unless *javascript-mode-syntax-table*
@@ -239,6 +239,9 @@
   (setq paragraph-separate paragraph-start)
   (make-local-variable 'indent-tabs-mode)
   (setq indent-tabs-mode *javascript-indent-tabs-mode*)
+  (and *javascript-keyword-file* (null *javascript-keyword-hash-list*)
+       (setq *javascript-keyword-hash-list*
+             (load-keyword-file *javascript-keyword-file*)))
   (when *javascript-keyword-hash-list*
     (make-local-variable 'keyword-hash-table)
     (setq keyword-hash-table *javascript-keyword-hash-list*))
@@ -327,12 +330,21 @@
parent object (eg, 'document', 'window', etc.) Otherwise, it just works
as a generic keyword completion."
   (interactive "*")
-  (save-excursion
-    (setq from (progn (skip-syntax-spec-backward "w_") (point)))
-    (and (char= (preceding-char) #\.)
-         (backward-char)
-         (setq complist (javascript-get-complist))))
-  (do-completion from (point) :list complist nil t))
+;  (save-excursion
+;    (setq from (progn (skip-syntax-spec-backward "w_") (point)))
+;    (and (char= (preceding-char) #\.)
+;         (backward-char)
+;         (setq complist (javascript-get-complist))))
+; (do-completion from (point) :list complist nil t))
+  (if (string-matchp "[0-9A-Z#$%&+._-]" (string (preceding-char)))
+      (progn (save-excursion
+             (setq from (progn (skip-syntax-spec-backward "w_") (point)))
+             (and (char= (preceding-char) #\.)
+                  (backward-char)
+                  (setq complist (javascript-get-complist))))
+        (do-completion from (point) :list complist nil t))
+    (javascript-indent-line))
+  )
 
;; javascript-dot-notation: << . >>
(defun javascript-dot-notation ();; v2.0

 

< 2011/08/16 Modified >
Object-Orientedな開発をしているとindentがうまくいかないので、java-modeで編集するようにした。色を付けるkeywordはetc/Javaを編集する。

2011年6月3日金曜日

[node.js]express + ejsの環境で別fileのtemplateをincludeする

環境はCentOS 5.6 + node.js 0.4.7 + express 2.3.10 + express-mvc-bootstrap 0.1.2 + ejs 1.4.2

参考にしたのは下記Site

expressのejsで部分テンプレート(partial)を使う方法 - 家族サービスの合間をぬって書く技術系のブログ

次のように記述するとsidebar.htmlを読み込んでくれる。

<%- partial('sidebar') %>

html以外の拡張子を読み込みたい場合はapp.jsに
app.register('.html', require('ejs'));
と同じように追加する必要がある。

 

< Related Posts >

[node.js]Express + ejs + Socket.ioを使ったSample Site

WebSocket, node.js, Socket.IOって何?

2011年6月2日木曜日

[node.js]node-inspectorを使ってdebugする(express-mvc-bootstrap)

ConsoleでDebugする方法もあるらしい。今回はnode-inspector(GitHub)をInstallしてGoogle Chromeでremote debugする方法を試してみた。

こちらから参照されている動画を見れば、どんな感じか分かる。

Node Inspector - Node.js Debugger

 

npmでinstallすれば簡単。node.js, npmのInstallに関しては"Related Posts"を参照。

# npm install -g node-inspector

debuggerの起動

# node-inspector

visit http://0.0.0.0:8080/debug?port=5858 to start debugging

通常はこれで(別consoleを起動して)debug optionを付けてAppを起動 -> Google Chromeから
http://192.168.0.xxx:8080/debug?port=5858
に接続すればdebug出来る(詳細は上の動画から)。

でもexpress-mvc-bootstrapを利用してAppを構築していると、起動自体がnodeを使わない。Official Documentを読んでみると

The V8 debugger can be enabled and accessed either by starting Node with the --debug command-line flag or by signaling an existing Node process with SIGUSR1.

と書いてあるので、"SIGUSR1"というSignalを送ればいいらしい。ということで、app.jsのboot methodに次のcodeを埋め込んでみた。

process.kill(process.pid, 'SIGUSR1');

で起動してみると・・・

# ../node_modules/express-mvc-bootstrap/eb server

Launching bootstrap from:  /opt/node_projects/mvc_test
Script directory:  /opt/node_projects/node_modules/express-mvc-bootstrap/scripts
Hit SIGUSR1 - starting debugger agent.
debugger listening on port 5858

Launching cluster mode on port: 3000

出来た!

AppControllerのrouterにbreakpointを設定すると、ちゃんと止まる。

ただし"server" optionを付けないと下記errorになる。V8のBug?

Failed to open socket on port 5858, waiting 1000 ms before retrying

 

ExpressのOfficial DocumentではNODE_ENVを設定して、起動するやり方が紹介されているけど、(まだ)よく分からない。

 

< Related Posts >

[node.js]MVCな開発がしたくて「express-mvc-bootstrap」をInstallしてみた
node.js, socket.ioをInstallしてWebSocketを試す(Install編)

2011年6月1日水曜日

[node.js]MVCな開発がしたくて「express-mvc-bootstrap」をInstallしてみた

ExpressをInstallしてみたけど、controllers, models directoryがない。調べてみると、express-mvc-bootstrapを使えば、一括で作ってくれるらしいのでInstallしてみたときのメモ。

環境はCentOS5.5 64bit, node.js v0.4.7

express-mvc-bootstrapのOfficial Site

node.js, MongoDBのInstallは前の記事を参考に。ちなみにExpressのSample Siteの中にMVCもある。こちら

 

requireしたときのPATHの仕組みが分かったので、構成を下記のようにしてみた。詳しくはこちら

/opt/node_projects
      |-- node_modules
      |-- project_name

# mkdir /opt/node_projects
# cd /opt/node_projects
# npm install connect qs mime cluster log
# npm install express socket.io ejs mongoose expresso should
# npm install express-mvc-bootstrap

ちなみに
# npm list
でModuleを階層状態で確認できる。

image

test用のProjectを作成
# mkdir mvc_test
# cd mvc_test
# ../node_modules/express-mvc-bootstrap/eb create-app

Sample ProgramのGroupをInstall
# ../node_modules/express-mvc-bootstrap/eb script generate-all Group

起動
# ../node_modules/express-mvc-bootstrap/eb

http://192.168.0.xxx:3000/にBrowserでAccessすると下のようなMongoDBを使ったSample Applicationが動くので、動きを確認するにはもってこい。

image

その他下記サイトも参考になる。

マニアックな金融系サイトをnode.jsとMongoDBで実装してみた(実装編) // CIOを目指しつつの8makiのアレ

node.jsをdeamon(service)で動かすのはspark2を使うみたい。また今度調査。

 

< Related Posts >

[node.js]Express + ejs + Socket.ioを使ったSample Site
node.js, socket.ioをInstallしてWebSocketを試す(Install編)
WebSocket, node.js, Socket.IOって何?
Related Posts Plugin for WordPress, Blogger...

Blog Archives