oosugi20-blog

Sapporo.js-2010.03.31 に参加、発表もしてきた

初参加だったんだけど、JavaScriptに興味あるけど普段はバックエンドやってるって方たちが参加してて、普段バックエンドにあんまり関わらない俺としてはなかなか楽しかった。
やっぱ、バックエンドのエンジニアさんには、変態が多いねw （いや、イイ意味でw）

発表枠もらって発表もしてきた。
遅延定義関数についてちょろっとこんなのあるよーくらいで話して、発表くらいは5分で終わるようなもんだったんだけど、まー、みんなの食いつきが良いことw
30-40分くらいかな？サンプルソースについてあーだこーだ話した。
それがまた嬉しかったし、楽しかったね。
俺はまー、ちゃんとしたプログラマではないので、プログラムって意味ではまだまだなんだけども、JavaScriptはひたすら書いてるから、「JavaScriptっぽい書き方」だったり、「JavaScriptの面白さ」が伝えれるといいかなーと思ってたんだけど、他の書き方大した知らないから微妙に自信なかったりはして、でもまー、そんな感じで食いついてくれてよかった。

てことで、そんときのサンプルコード。

• 遅延定義関数サンプルコード
• 同じ動きのNGパターン
• 一個目のをちょと書き換えたパターン。こっちのがわかりやすいのかも？

まとめてきなの

• 後から（再）定義する
• NGパターンだと、
  • 1回しか使わなくてイイ処理を毎回処理してる
  • 一個上のスコープにおかないとならんくなる
• まー別にifくらいじゃ大したコストが掛かるわけじゃないけども、解決策の一例として。
• JavaScriptで重くなるのは、
  • DOM操作
  • レンダリング
• DOM操作は変数に入れとくとかして極力減らす
• レンダリングは描画時の要素の高さが変わると、それ以降全部再描画になるから重いので、高さ入れとけるならいれとくとかする
• 再定義するときに参照してる変数は破棄されず再定義後も使える（ここでは$hogeとcount）
• そんな使う機会ある訳でもないけど、DOM Readyで全部初期化じゃなくてなんかのタイミングで初期化したい時とかにひとつの解決策

こんな感じかなー。

そして最後に全体的なまとめとしては、「メソッド4つだけで数時間しゃべれる竜くんはやっぱ変態」（いや、イイ意味で！w）

また次回もできるだけ参加したいと思います。

初心者向け、Macでのローカルサーバーの建て方

だいぶ前に書いたんだけど、たんぶらに入れたつもりで全然なくって、どこにポストしたんだっけーって思ったらEvernoteに入ってた。
また迷いそうだからこっちにいれとく。

ほんとまー、バーチャルホスト建てたりーとかあるけど、初心者向けってことで。

(1)「ターミナル.app」を開く

   →場所が分からない場合はSpotlightで探す

(2)以下の文字列を入力し、enterキー

＜10.5の場合＞

sudo vi /etc/apache2/httpd.conf

＜10.4の場合＞

sudo vi /etc/httpd/httpd.conf

(3)パスワードを聞かれるのでOSの管理者パスを入力→enterキー

※入力しても一般的なアプリの様に「********」のようにはでない

(4)httpd.confファイル（サーバーの設定用ファイル）が開く

#から始まる行がたくさんあるファイル

(5)「iキー」を押す→insertモードになる（下部にinsertと表示される）

(6)かなり下の方にある以下の2カ所のパスを

   サイトルートにしたいフォルダに設定する

DocumentRoot “/フォルダ名/”

<Directory “/フォルダ名/”>

※サイトルートにしたいフォルダのパスは、Finderでフォルダコピー=>ターミナルでインサートモード中にペーストで入れれる。

(7)escキーを押す

(8)「:w（コロンw）」を押してenter→保存される

※セミコロンと間違えないように注意
※赤い字で「readonly」とかエラーがでたら「:w!」ってすると強制的に上書きできる。 

(9)「:q」を押してenter→httpd.confを閉じる

(10)ターミナルの最初の画面になるので、「exit」→enter

(11)ターミナルを終了させる

(12)システム環境設定 > 共有 > を開く

(13)「web共有」を”一度オフにしてから”オンにする

(14)ブラウザで「http://localhost/」と入れると表示される

————————-

これはターミナルでviというテキストエディタを使っている。

使い方は下記のサイトが参考になる。

http://www.linux.or.jp/JF/JFdocs/vi-user-usage.html

CSS3 で二重線+角丸

外側のラインをborder、内側のラインをinset（内側）のbox-shadowで再現。
box-shadow非対応ブラウザでは外側の枠線のみ表示されるので、そこんとこの色使いに気をつけて、例えば外側の色が背景に近い場合は、非対応ブラウザでラインが見えにくくなるので、box-shadowをinsetじゃなくて外側に指定する。
その場合、各サイズが例えば、親ボックスのwidth 100px / border 1px / box-shadow 1px だった場合、対象のボックスは width 98px になって、borderは親ボックスの内側、box-shadowは親ボックスの外側に表示される感じになるので注意。
（ホントは図とか描けばいーんだろーけどめんどいよね） 

$.Deferredでアニメーションの状態を管理する的なの

んー、もっといい方法はありそうだけど、取り敢えずできたって感じ。

初心者向け、WindowsでのSFTP接続の説明

仕事でお客さんに教えなきゃならない機会があったので、ちょっと変えて残しとく。

まず、SFTPというのは、ファイルアップダウンの転送を暗号化してできるプロトコル（規格）です。

FFFTPのようなFTPソフトではSFTP（暗号化された接続）は、できませんので、以下のソフトをインストールしてください（無料で有名なものです）

WinSCP
http://winscp.net/eng/docs/lang:jp

ちなみに、SCPというプロトコルもあり、このソフトではそれも使えます。
SCPとは、SFTPの兄弟みたいなものです。

また、この接続のためには、秘密鍵/公開鍵方式という暗号化方式がよく採用されます。

この鍵というのは、すごく長いパスワードが書かれたファイルみたいなもので、クライアント（たとえばあなたの）PCに置いておくようの誰にも知らせない「秘密鍵」と、それとペアになりサーバーに登録する「公開鍵」というものにわかれていて、サーバーに登録された公開鍵と対になる秘密鍵を持っているPCでのみ、サーバーに接続できるようになります。

Windowsで鍵を作成するには、専用のソフトをインストールし、手順にそって進めればOKです。

以下のページに詳しくのっていますので確認の上作成してください。
http://www.netfdh.com/appea1v2keygen.html

公開鍵と秘密鍵を作成しましたら、公開鍵の方を、サーバー管理者まで送付してください。

秘密鍵の方は、誰にも渡さない自分だけがもっておくものなので、絶対に間違えないようにお願いします。

公開鍵を送付いただきましたら、サーバー管理者側でサーバーに公開鍵を登録します。

それが完了しましたら、お知らせしますので、その後、上記WinSCPというソフトの設定を行えば、接続することができるようになります。

接続時には、WinSCPにて、秘密鍵の設定やサーバーのドメイン、ポートの設定などが必要なので、サーバー管理者より通知された内容で設定してください。

express を使った 404 対応でハマった

こことかみると、次に一致するルートにnextで渡せって書いてあるから、

app.get('/:id', function (req, res, next) {
	var id = req.params.id;

	if (routes[id]) {
		routes[id](req, res);
	}
	else {
		next();
	}
});

app.get('*', function (req, res) {
	res.send('404 Not Found', 404);
});

って、感じでやったんだけど、なんか画像とかの/public内のリソースが404になっちゃって、あれー？ってなってた。

これ、

  app.use(express.static(__dirname + '/public'));
  app.use(app.router);

が逆だと、そうなちゃうみたい。
つまりapp.use(app.router)はstatic指定の後に書く。

参考：http://stackoverflow.com/questions/6528876/how-i-redirect-404-errors-to-a-custom-page-in-express-js

簡単にsocket.ioできちゃうNowJSの基本とサンプル

なんかサンプルまでが遠いから先に貼っておく http://garage.oosugi20.net/

ほんとは、これに近いゲームもどきみたいなサンプルを作ろうと思ったんだけど、 node.js のサンプル公開するってことはサーバーが必要な訳で、自前の持ってなかったもんだから、そっちの設定うまくいかず、昨日一晩格闘しちゃって全然コードかけなかったら超簡単なとこまでの。
その格闘については、また別途書こうかなとも思う。

で、まず NowJS ってーのがなにかっつーと、

• Node.js のライブラリ
• これ入れると socket.io が意識せず簡単に使える

• socket.io っつーのは、リアルタイムで通信行う感じの技術
• 例えば、 だれかが「いいね！」したら、即されたことを通知したり
• つってもFbでもそんな感じじゃんと思うかもだけど、それはポーリングつって完全リアルタイムって訳ではない。
  一定間隔で読みに行ってるだけ。
• socket.io は、「相手がなんかしたタイミング」で実行される

• NowJS はそれを使いやすくしたもの
• socket.io だとこんな感じで書くんだけど、 NowJS はもっと直感的っていうか意識しないでフツーにJS書くみたいに書ける
• どーゆーことかっつーと、now っていう専用のオブジェクトを介することで、サーバー側に書いたメソッドをクライアント側から実行したり、逆もできる。

ここまでの簡単なサンプルコードと説明を以下に。
単純にアクセスされたらカウントアップするだけのサンプル。
リアルタイムってのはわからんけど、サーバー側のメソッドを呼べる NowJS がどんな感じかっての。 

サーバー側

 5 // nodeではapacheみたいに公開するためにまずhttpサーバーの用意が必要
 6 var http = require('http'); // httpモジュール読み込み
 7 var httpServer = http.createServer(function (req, res) {
 8     // サーバーの準備書く（省く）
 9 }).listen(1337, '127.0.0.1');
10 
11 
12 // nowjsの用意
13 // =====================================
14 
15 // まずモジュール読み込む
16 var nowjs = require('now');
17 
18 // したらnowjsを初期化して、nowjsの通例everyoneって名前の変数に突っ込む
19 var everyone = nowjs.initialize(httpServer);
20 
21 // そうすると以降、
22 // everyone.now.hogehoge = function () {};
23 // って感じでeveryone.nowにメソッド付け足してくと、
24 // クライアント側で呼び出せるメソッドになる。
25 
26 
27 // サンプルの目的のコードはここから
28 // =====================================
29 
30 
31 // カウントを保持しておく変数を用意しとく
32 var count = 0;
33 
34 
35 /**
36  * everyone.now.sercerCountUP
37  *
38  * カウントをアップして現在のカウントを返すだけの関数
39  * クライアントからアクセス時に呼び出すことで実行する
40  */
41 everyone.now.serverCountUp = function () {
42     count += 1;
43     return count;
44 };

クライアント側

53 // 先にクライアント用のnow.js読み込ませとく
54 
55 now.ready(function () { // 読み込まれてnowjsの準備ができたらこの中のコードを実行する
56 
57     // サーバーのカウントアップ用のメソッドを実行し、
58     // 返される現在のカウントを変数に格納する
59     var thisCount = now.serverCountUp();
60 
61     // 現在のトータルのカウントをアラート表示
62     alert('count:' + thisCount);
63 
64 });

まーこんな感じで、nowってオブジェクト解したら socket.io 気にしなくてもメソッド用意するだけでいい感じ。

こんな感じで、サーバーとクライアントに関数用意しとくとリアルタイムでいろいろできる。

たとえば、

• サーバー側には全クライアントのメソッドを実行する関数用意しとく
• クライアント側はサーバーから呼ばれたらアラート表示する関数用意しとく
• クライアント側のボタンクリックで、サーバー側の関数を呼ぶ。その時inputのvalueを引数として渡す

って感じにすると、チャット的な？リアルタイムでテキストを表示するアプリみたいなん書ける。

で、それがこれ。
http://garage.oosugi20.net/

同じPCでもいいし複数台でもいいんだけど、ブラウザウィンドウ複数開いて、どれか一つでinputにテキスト入れてgo押したら全ウィンドウに内容表示される。closeをしたら全部で閉じる。

全然大したことやってないんだけど、 NowJS の他に express と jade 使ってやってる。
ソースはGitHubに置いてある。 https://github.com/oosugi20/nowjs-sample

NowJS はこれが基本つーかなんだけど、グルーピングも簡単にできて、冒頭で書いたゲーム的なのにするなら、審判的なスタートストップするアカウント、ゲーム参加するユーザーアカウント、モニターするだけのアカウントとかのグループ作っておいて、各グループでだけ実行するメソッド用意したりもできる。
時間かかっちゃったからそれはまた今度。 

追記：socket.io はWebSocket非対応でも使えるようにするライブラリ的なの。完全にsoket.io = WebSocketみたいに書いちゃった

鏡面反射付きカルーセル

汎用的そうなのつくろうとして中途半端っぽいの。取り敢えず置いといて後で改変する。※CSSはwebkitのみ設定

URLリストからファイル（画像やCSSも含めて）をダウンロードする

wget : 指定したファイルをダウンロードする
-p : 画像やCSSなど表示するのに必要なファイルもダウンロードする
-nc : ファイルがローカルに存在する場合はダウンロードしない
-nv : 出力されるログを短くする

CSS zoom をサポートしているか判別