投稿

6月, 2011の投稿を表示しています

[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も参考に。node.jsのプログラムを自動で再起動してくれるnode-devコマンド - 大人になったら肺呼吸# npm -g install node-dev-gはGlobal Option. 実行するときはnodeの代わりにnode-devを使う# node-dev server.js< Related Posts >[node.js]node-inspectorを使ってdebugする(express-mvc-bootstrap)node.js, socket.ioをInstallしてWebSocketを試す(Install編)

[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] }…

Wordpressの覚えておきたいplugin

大抵のことは自分で開発してしまうけれど、これは知っておくと確かに便利。WordPressでCMSを作るなら絶対に覚えておきたいプラグインいろいろ | Web活メモ帳そのうち社内向けにDefaultのpluginとtemplateをまとめたい。< Related Posts >Wordpress 開発リファレンスのリンク集

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

イメージ
他の人が作ったswfをdebugしたときのMemo.swf内のtraceをBrowserで表示するにはFirefoxのPlugin:FlashFirebugが便利。FirebugをInstallしてあれば、Panellに[Flash]が追加される。Official Siteに詳しい説明があるので、そちらも参考に。普段はDisabledにしておいた方がいいらしい。< 2011/06/30 Modified >
Adobe Flash Professional CS5からでも出来ることが分かった。
Debug -> Begin Remote Debug Session -> Acsion Scriopt 3.0
これで待機状態になるので、あとはFirefoxとかで表示すればTraceが表示される。

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

Adobe Flash Professional CS5(Adobe Web Premium CS5)を会社で使っているけど、swfのwidth, heightを知る方法が分からなかったので、SWFToolsをInstallしてみた。環境はWindows7 64bit Home EditionOfficial SiteからDownloadしてきてInstallする。Command Promptからcd C:\Program Files (x86)\Tools\SWFToolsswfdump -XY C:\hoge.swfswfはDrag&DropするとPathを入力する手間が省ける。swfdumpのReferenceはこちら。・・・AdobeのApplicationを使った簡単な方法があると思う。分かったら追記予定。

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 >[Fla…

[Flash] Coding Guide(コーディング規約) for ActionScript

Adobeのwikiにそれらしいのがある。Coding Conventions - Flex SDK - Adobe Open Source(英語)Adobe Flex Coding Guidelines(PDF)if文のあとに改行して括弧( { )するのが、個人的に好きじゃない。< Related Posts >初めてのFlash。お役立ちLink集

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

ついにFlashを作成することになったので、一から勉強したときのMemo.環境はWindows 7 64bit, Adobe Web Premium CS5 - Adobe Flash Professional CS5アドビ-FlashデベロッパーセンターFlashQ&A(Sampleが豊富)wonderfl(ActionScriptのSampleが豊富)Flashゲームプログラミング講座 For ActionScript3.0OpenSourceなFlash開発環境のFlashDevelopというSoftwareがよく利用されているらしい。FlashDevelopの使い方 (0)まとめ - 独学ActionScriptFlashDevelopのwiki(日本語)FlashDevelopでemacsのKey Bindを使いたい場合はこちら。 Adobe Web Premium CS5にはAdobe Flash Builder 4が付属している。これはAdobe版FlashDevelopらしい。Profilerが便利みたいなので、開発の後半で活躍する場面もあるみたい。Flash Builder 4のFlasherに役立つ10個の魅力的な新機能 | ClockMaker Blogこれさえ読めば分かる! Flash Builder 4インストールから使い方まで徹底解説(1/5):CodeZineemacs風のKey Bindはこちらを参考に。 Flash Builderを使う場合の設定他Windows → Preferences → General → Web Browser でIEを設定 Flash PlayerのBebuggerをinstallしておく。Downloadはこちらから。 [Flex] ASDocをFlashBuilderからボタン一発で生成する : アシアルブログcode assist(コード補完)のshortcut keyは「ALT + /」に設定されているので、使いやすいkey bindに変更するのがオススメ。 < 追記 >
Flash CS5からFlash Builderが起動するので、こちらを使うようになった。Eclipseの画面構成と同じなので、(Eclipse開発の経験があれば)分かりやすいと思う。FlashらしいS…

[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は必要)。

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

イメージ
「しばらくお待ちください。...」と一緒にぐるぐる回るGif画像を探していたときのMemo.下記Siteで背景色を指定して(もちろん透明も)作成できる。Load Info - gif generator各種Animationを選択して、foreground, backgroundのcolorを入力すれば完了。似たようなSiteは他にもあるみたい。Ajaxload - Ajax loading gif generator

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

日本にいる間に使っていたRealforceのkeyboardの使い心地が忘れられず、ついに英語配列を買ってしまった。実家に頼めば送ってくれるけど、転送.comが便利そうだったので試しに使ってみた。転送費用は次のような感じ。荷物の重量:2080g
国際配送料:3500円
利用手数料:980円Singaporeの場合はS$400(=約2万6千円)までなら免税されるらしい。詳しくはこちら。2万円までなら無料でEMS(wikipedia)を利用できるので選択しておいた方が得(Defaultでは「無し」)。5/23(Mon) 5:29PM Amazon 「ご注文の発送」 Mail 5/24(Tue) 6:23PM 転送コム 「届いた荷物のご確認をお願いします」 Mail 5/25(Web) 5:50PM 転送コム「発送手続き完了のお知らせ」 Mail 5/27(Fri) 10:00AM Singapore 荷物到着 いろいろ買ってしまいそうな予感。

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

今更ながらSambaで共有したFileを編集したりするときに、Directoryの所有者Groupを設定したときのMemo."smbguest"groupに"root"を追加する
# usermod -G smbguest root指定Directory以下の所有者Groupを"smbguest"に
# chown :smbguest -R /opt/node_projectGroupに属するUserにも書き込み権限を与える
# chmod 775 -R /opt/node_projectどんなGroupがあるか確認
# less /etc/group< Related Posts >Sambaの設定ファイルsmb.confメモ

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

イメージ
Wireframe(Webの骨組み)を作成する際にCloudを利用してうまく共有出来ないものかと調査したMemo.Google Docsの図形描画(Google Drawing)を使えばいいみたい。Google Drawing(図形描画)でGoogleドキュメントでのワイヤーフレーム作成が簡単に|Nomad Worker Style「Wireframe」で検索すれば、Web用のPartsが用意されているTemplateやiPhone App用のTemplateが見つかる。変更履歴も自動で保存されるし、世界中のどこにいてもNetが繋がれば参照・編集できるので便利。これを社内に展開して、共通化するのが一番難しい。

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 ConnectSimple Facebook ConnectFacebook Connectを用いてFacebookと同期している動画Facebook fan page, connect to facebook wordpress, wordpress facebook welcome page | MMNCS

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を使う感じかな・・・。

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集)

[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書き換えが必要。

[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 hookSubversion Server側で設定が必要みたい。参考にしたのは下記Site.subversionのログが編集(更新)できない2/作者(Author)も変更編 | Vamp Recordsちなみに環境はMac OS X Server 10.6.7 + Subversion 1.6.16templateを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管理

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

node.jsの開発でJavaScriptを書く機会が増えたので、補完機能があるmodeはないものかと調べたら、javascript-modeというのが既にあるらしい。拡張lisp/javascript-mode - XyzzyWikisitelisp.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…

[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参考にしたのは下記Siteexpressのejsで部分テンプレート(partial)を使う方法 - 家族サービスの合間をぬって書く技術系のブログ次のように記述するとsidebar.htmlを読み込んでくれる。<%- partial('sidebar') %>html以外の拡張子を読み込みたい場合はapp.jsに
app.register('.html', require('ejs'));
と同じように追加する必要がある。< Related Posts >[node.js]Express + ejs + Socket.ioを使ったSample SiteWebSocket, node.js, Socket.IOって何?

[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-inspectordebuggerの起動# node-inspectorvisit 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 serverLaunching bootstrap from:  /opt/node_projects/mvc_test
Script directory:  /op…

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

イメージ
ExpressをInstallしてみたけど、controllers, models directoryがない。調べてみると、express-mvc-bootstrapを使えば、一括で作ってくれるらしいのでInstallしてみたときのメモ。環境はCentOS5.5 64bit, node.js v0.4.7express-mvc-bootstrapのOfficial Sitenode.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を階層状態で確認できる。test用のProjectを作成
# mkdir mvc_test
# cd mvc_test
# ../node_modules/express-mvc-bootstrap/eb create-appSample ProgramのGroupをInstall
# ../node_modules/express-mvc-bootstrap/eb script generate-all Group起動
# ../node_modules/express-mvc-bootstrap/ebhttp://192.168.0.xxx:3000/にBrowserでAccessすると下のようなMongoDBを使ったSample Applicationが動くので、動きを確認するにはもってこい。その他下記サイトも参考になる…