タグ別アーカイブ: web

フロントエンドの開発でファイルプロトコル(file://…)ではなくHttpプロトコル(http://)を使う


※ローカルにApacheを立ててバーチャルホストを作って云々という話ではありません。


背景

フロントエンドの開発において、htmlファイルをサクッとブラウザで開けば(file://…)、Javascript, css が動くというのはとてもメリットだと思うのですが、実際にサーバにアップロードしてアクセスするときにはほぼ100% Httpプロトコル(http://)でアクセスすると思います。そういった環境をローカル開発でも使うといいと思います。

file://hoge/fuga/index.html」などをブラウザ確認するとファイル内で imgタグ, scriptタグ, linkタグ などは以下のように 相対パス で書くことになると思うのですが、それをサーバにアップする時に 絶対パス に直すということをしている人は多いと思います。

<img src="img/hoge.png">
<link rel="stylesheet" href="css/hoge.css" />
<script src="js/hoge.js"></script>

その際、いちいち変換するのは面倒くさいので、pythonやrubyで動かせる簡易Webサーバを立ち上げてHttpプロトコル(http://…)で開発をしましょうという話です!

前提条件

  • Python or Rubyがインストールされているマシンを用意する(Macなら大丈夫。windowsはpythonとか入っていても起動できるかは謎)

  • ファイル構成

/tmp/workspace/
├── index.html
└── js/
    └── app.js
<html>
<head></head>
<body>
<h1>テストページ</h1>
<script src="/js/app.js"></script>     <!-- 絶対パスapp.jsを指定している -->
</body>
</html>

Pythonを使った例

ドキュメントルートとなるディレクトリへ移動する
$ cd /tmp/workspace

Webサーバを立ち上げる(3000はポート番号なので開いているPortなら何番でもOK)
$ python -m SimpleHTTPServer 3000

ブラウザを立ち上げて http://localhost:3000 へアクセスすると index.html が表示されます!

Rubyを使った例

ドキュメントルートとなるディレクトリへ移動する
$ cd /tmp/workspace

Webサーバを立ち上げる(3000はポート番号なので開いているPortなら何番でもOK)
$ ruby -run -e httpd . -p 3000

ブラウザを立ち上げて http://localhost:3000 へアクセスすると index.html が表示されます!

PHPを使った例

ドキュメントルートとなるディレクトリへ移動する
$ cd /tmp/workspace

Webサーバを立ち上げる(3000はポート番号なので開いているPortなら何番でもOK)
$ php -S localhost:3000

ブラウザを立ち上げて http://localhost:3000 へアクセスすると index.html が表示されます!

さらなるTips

Python、Rubyの場合は デフォルトの index.html がない状態でフォルダ指定してアクセスすると、DirectoryIndexが表示されファイルリストを見ることができます。
今回の場合は以下のように js フォルダにアクセスすると

http://localhost:3000/js

以下の様な画面が出力されます。(Rubyを使った場合)

Ruby-webrick-directoryindex

参考サイト

ワンライナーWebサーバを集めてみた -Qiita

エイプリルフールのWeb面白企画のまとめ


 

4月1日!!世間ではエイプリルフールですねー!

この日のためにパロディにしたコンテンツだったり、Web系の企業では結構この1日に気合いを入れていますねー!ってことで以下のサイトでもNAVERのまとめ記事に色々とためられていますねー!

エイプリルフールに便乗しているサイト2012年版

 

http://nlab.itmedia.co.jp/nl/articles/1204/01/news004.html

いくつか気になった記事がありました。

  

ファミコン版 Google マップ 8 ビットができました。


googleMapsの地図画面がドラクエのドット地図になっているというものです。以下から実際に体験することができます。なんか普通にゲームを操作しているみたいですねー
http://maps.google.co.jp/maps?t=8&utm_campaign=8bit&utm_source=jpblog

facebookに対抗したホットパンツWebサービス「ホトパンブック」をリリースいたしました

これこそ実現してほしいサービスですねー!ホットパンツは男の願望を網羅している感じがしますーー!

100面体サイコロで給料がきまります| 面白法人KAYAC

いやーーーこのレベルの給料の制度を整えてくれるとサイコーですね!!サイコロを振る日には仕事にも気合いが入るのではないでしょうかーーー

ねこのおもむき

mysqldumpのよく使うオプション


mysqldumpについてオプションなどのまとめ

mysqlを最近よく使います。テーブルの構造を変更するときにdumpを念のためとっておこうということが多々あります。そのときにはmysqldump コマンドを使用するのですが、よく利用するオプションをまとめます。

よく使うオプション

mysqldump -B -c -u[ユーザ名] -h[ホスト名] -p[パスワード(入力なしでもよい)] [ DB名 [table名..] ] > dump.sql
「-u」        ユーザ指定 
「-p」        パスワードの指定を入力
「-h」        接続先ホスト
「-B(--databases)」 create db 文を含む
「-c」        dump中のInsert文にカラム名の指定を入れる

その他のたまに使用するオプション
「–no-create-info」 create table を含まないダンプ データのみのバックアップ
「–no-data」    データを含まないテーブル構造のみのバックアップ createtable文のみ
「–skip-add-drop-table」 drop tableの文を吐き出さない。
「–skip-extended-insert」 1行ずつのInsert文で出力される(diffを取る時に便利)
参考
http://www.key-p.com/blog/ohnishi/article.php?id=7
http://dev.mysql.com/doc/refman/5.1/ja/mysqldump.html

他で参考になる!

% mysqldump --opt --single-transaction --flush-logs -uroot DB名
https://github.com/hnakamur/chef-cookbooks/blob/master/mysql/templates/default/backup_mysql_db.sh.erb#L30

大阪Node学園一時限目に参加してきた!


 

node.jsを使う事が増えてきているこの状況で今回の勉強会に参加してきました!!コミュニティの皆さんもとてもすごそうな人が多く、いいなぁと思った!!

懇親会には参加できなかったのが少し残念だったなぁ。イベント自体、とても面白く、いい勉強になった。。また近々2時限目を行うってことだったのでまた参加しよう!!

特に発表のテーマにもあった「ストリーム」はとても興味深く聞く事ができた!

たまたまnode.jsでzlibやfs、ストリーム、バッファなどを使って圧縮ファイルをアップロードしてから解凍し、パースするような処理を作ろうとしていたので、タイミングも良かったーー

「ストリームを制するものは、nodeを制する」この言葉も印象的だった!!!

ATND情報 http://atnd.org/events/23378
動画 http://www.twitvid.com/craftgear

 

Node.jsランダウン 〜怖くないNode.js入門〜

formidable 1.8からexpressの設定するだけでアップロードできる!

app.use(express.bodyParser({uploadDir:'./upload_tmp'}));

【リクエストを受ける側では以下のようにパス名などを受け取れる】
app.post('/items', function(req, res) {
    console.log(req.body);
    console.log(req.files);
    res.send('DONE', 200);
});

 

 

Socket.IOとリアルタイムなナニか

socketの名前空間、コネクションの共有範囲を分ける クライアントのjsで .ofというメソッドを使う。

1つのページを同期させるモードと同期させないモードに分けることで、プレゼン時は同期をして公開すれば発表者が画面を操作できる。

webSocketの使い道 m2m(マシンツーマシン) PCやモバイル端末だけではない。

【所感】

node.jsソケットを使ったプレゼンツールを作ってみたい(HTML5等を使う!)Canbusでユーザにも書いてもらえる。かつチャットsocket.ioを使えるようにする。講義中や公演中にパワポの資料とかだけではなく、web画面で動かして、さらにマーカーで文字が描けるようにすれば良さそう!impress.js で動的なWebプレゼンの見せ方!!に応用する! 

 

 

Streamについて(仮)

nodeの中I/Oのインターフェース

基本は次の2つのストリーム readable Stream / writable Stream

StreamObject は EventEmiter

イベントをonメソッドで受け取り .on(‘イベント名’, function(){ })

 

●readble streamの使い方

・メソッド

resume(読み込み開始), pause(読み込み止める), destroy

・定義されたEventの種類

data(ストリームに読み込みを続けているとき),end(読み込みが終わったとき(EOFまで読み込んだとき)), close(readableストリームを閉じたとき), error(エラー寺のイベント)

 

●writable streamの使い方

・メソッド

write, end, destroy

・定義されたEventの種類

drain, close, error

 

コピーするときはreadableストリームのresumeを実行した後readbleストリームのイベントを.onメソッドで受け付けながらwraitableストリームにwriteやendなどのメソッドを呼び書き込みを行う。

 

●pipe()について

readableで読み込んでパイプメソッドでwritableに渡して書き込む。。

コピー元ファイル(readable stream)を読み込みながらwritable streamに書き込んで一時的に止めてpause()する、その後resumeを行う。を自動で行う

 

●ストリームで表現されるケース

HTTP
http server Request (Readable)
http server Response (Writable)

Zlib
all classes(Readable/Writable)

圧縮ファイルを読み込んで
fs.Readable  ーpipeー>   zlib.Gzip  ーpipeー>   http.response

 

「drain は、WritableStream において、書き込み先が書き込む準備ができたとき発生するイベント。

書き込みがそれ以上できないときに、write メソッドが false を返し、そののち再開できるときに drain イベントが走る。」

 

【気になる事】

zip,gzipの違いは??

 

ストリームに関する参考リンク
http://d.hatena.ne.jp/Jxck/20111204/
http://jxck.tumblr.com/
http://jxck.tumblr.com/post/11984552004/node-js-stream

 

 

LTに出てきたキーワード

Express
modelがない!!
routes/index.jsにビジネスロジックを書くのか?けれど、model フォルダ作ってmongoose(モデル)の定義を入れた。

impress.js(http://bartaz.github.com/impress.js/
google hangout
Web RTC http://d.hatena.ne.jp/Syunpei/20111212/1323679295