SE奮闘記

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編）

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){         va

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

他の人が作った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が表示される。

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を使った簡単な方法があると思う。分かったら追記予定。

他の人が作った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で２つのSwfを連携させたい。 - 雨と風と快晴と 2.0 ちゃんと「おもじない」をしないと動作しなかった。 さらに途中で強制終了すると、次起動したときに下記Errorが出力されて止まる。 Connect failed because the object is already connected

Adobeのwikiにそれらしいのがある。 Coding Conventions - Flex SDK - Adobe Open Source (英語) Adobe Flex Coding Guidelines(PDF) if文のあとに改行して括弧( { )するのが、個人的に好きじゃない。   < Related Posts > 初めての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.0   OpenSourceなFlash開発環境の FlashDevelop というSoftwareがよく利用されているらしい。 FlashDevelopの使い方 (0)まとめ - 独学ActionScript FlashDevelopの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）：CodeZine emacs風の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に変更するのがオススメ。 < 追記

Singaporeに来てからはDesign重視のWeb Siteを作成することが多いので、こういったSampleは助かる。 500+ Free PSD Graphics for Web Designers ちなみにPicasa Photo Viewerを使えば、PSD Fileを開かなくでもPreviewできることに気付いた（たぶんPhotoshopのInstallは必要）。

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

日本にいる間に使っていた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 荷物到着 いろいろ買ってしまいそうな予感。

今更ながら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メモ

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

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

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 + 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集）

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

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のログが編集（更新）できない２／作者(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管理

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

環境は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って何？

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 bootstra

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を階層状態で確認できる。 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 Ap