論理的思考と感覚的思考をうまく切り替えながら解決方法をさがしていくということ

自分はどっちよりだかよく理解しておいて、意図的に逆の思考にスイッチするようにすると良い解決策がみつかりやすいように思う(経験論)

会議の前に自分の頭の中でブレーン・ストーミングを済ませてしまいます。会議は、その上で何か足りないものを拾うとか、アイデアのベースをみんなで共有するために行います。

Node.jsで簡単なブログを作ってみる

Blog rolling with mongoDB, express and Node.jsの写経だが、このエントリはわかりやすいですね。

node_blog

MongoDBって使いやすそうなので、SQLiteから乗り換えようかなと思ってちょっと調べたところMongoKitはSQLAlchemyっぽいような気がしたんだけどどうなんだろうかねぇ。結局javascriptだとクラス関係ないしJSON(BSON)だからMongoとの相性がいいんだろうか?あとでもう少し調べてみよう。

さて、上のエントリのブログのサンプルで使われていたHTMLとCSSのテンプレートエンジンが面白かったので調べてみた。

Jade

zen-codingみたいなノリでサクサク書いていけるっぽい。

Jade - robust, elegant, feature rich template engine for nodejs

Hamlっぽいとか書いてあったんだけどHaml知らんからなぁ(普段はFlask+Jinja2使ってます)。

EmacsのJade-modeはないみたい

stylus

CSSをシンプルに書ける独自のスタイル指定言語らしい。構造化してすっきりと記述できるみたい。

Expressive, robust, feature-rich CSS language built for nodejs

スクリーンキャストもありますね。

CSSなんてすぐにぐちゃぐちゃになって可読性が落ちるので、CSSなんてバイナリと一緒で人が読むもんじゃないんだぜみたいな立場にたてば、DRYを保てるようなこういった仕組みは良いんだろうなと思う、っていうか良い。

モジュールをインストールするとstylusっていうコマンドがついてきて、別にNode.jsじゃなくても使えるのでFlaskで使おうかなと思っている。

こんなstylがあるとして

body
  font-family "Helvetica Neue", "Lucida Grande", "Arial"
  font-size 13px
  text-align center
  text-stroke 1px rgba(255, 255, 255, 0.1)
  color #555
h1, h2
  margin 0
  font-size 22px
  color #343434
h1
  text-shadow 1px 2px 2px #ddd
  font-size 60px

コマンドラインからコンパイル

$ ../../node_modules/stylus/bin/stylus style.styl
  compiled style.css

できた。

body {
  font-family: "Helvetica Neue", "Lucida Grande", "Arial";
  font-size: 13px;
  text-align: center;
  text-stroke: 1px rgba(255,255,255,0.1);
  color: #555;
}
h1,
h2 {
  margin: 0;
  font-size: 22px;
  color: #343434;
}
h1 {
  text-shadow: 1px 2px 2px #ddd;
  font-size: 60px;
}

Node.jsでtwitterのストリームをgrowlで通知する

普通にスクリプトとして使えるので、覚えてくるとなかなか楽しいですね。Node.jsのモジュール一覧を眺めながら面白そうなのをいじっています。

今日はgrowlで遊んでみてますが、通知はgrowlnotify経由なのであらかじめインストールしておく必要があります(入ってなくてもエラーを吐かないので一瞬悩む)。

#!/usr/bin/env node

require.paths.push('/usr/local/lib/node_modules')

var TwitterNode = require('twitter-node').TwitterNode
, growl = require('growl');

var twit = new TwitterNode({
  user: '####', 
  password: '####',
  track: ['perl','python','haskell','javascript']
});

twit.addListener('error', function(error) {
  console.log(error.message);
});

twit.addListener('tweet', function(tweet) {
    growl.notify("@" + tweet.user.screen_name + ": " + tweet.text);
}).stream();

node.jsとNginxが相性がいいって見かけたので、さくらVPSのApacheをNginxに置き換えようかなぁと思いNginxの本を注文してみた。

ProductName ハイパフォーマンスHTTPサーバ Nginx入門
Clement Nedelcu
アスキー・メディアワークス / 3150円 ( 2011-04-21 )


Html5 Graphics With Svg & Css3

夏の出版ラッシュか?

ProductName Html5 Graphics With Svg & Css3
Kurt Cagle
Oreilly & Associates Inc / 2081円 ( 2011-08-05 )


Want to create exciting HTML5 graphics without spending eternity in JavaScript? You can! This provides a basic overview of the two declarative languages bound to HTML5 - CSS 3.0 and Scalable Vector Graphics (SVG).

ほしい物リストが大きくなっていく

javascript-script

Calipsoのコード読んでたらnode.jsはスクリプトとして動かせることに気づいたのでスクリプトにしてみた。

といっても一行足すだけだけどね。

モジュールのパスがおかしかったのでrequire.pathで足してみたけど、なんでおかしいのかわからん。どこかに余計な環境変数を入れてあるのかなぁ。

#!/usr/bin/env node

require.paths.push('/usr/local/lib/node_modules')

var TwitterNode = require('twitter-node').TwitterNode
, sys = require('sys');

var twit = new TwitterNode({
  user: '######', 
  password: '######',
  track: ['perl','python','haskell','javascript']
});

twit.addListener('error', function(error) {
  console.log(error.message);
});

twit
  .addListener('tweet', function(tweet) {
    sys.puts("@" + tweet.user.screen_name + ": " + tweet.text);
  })
  .stream();

暴言というほどでもないかな

コレ系の本にしてはネガティブ度は高いし、合意できるような内容ばかりでもないが、普通に読んだ。

ProductName GIGAZINE 未来への暴言
山崎恵人
朝日新聞出版 / 1575円 ( 2010-12-07 )


  • 知識層の存在意義が薄れているのはその通りだと思う。
  • 何でも持ち込み可っていう前提で問題を考えろよってのもそう思うが、問題を出す能力が高いのと教授の能力はまた違うよなと思うなぁ。
  • 歴史は現代から書かれるべきという筆者の主張は新鮮。なるほどと思った。でも世界史なんて不得手だったけど(覚えられん)。
  • 著作権ビジネスの崩壊は始まっている。
  • 日本は年々後退する
  • マイクロペイメント覇権争い
  • 行動心理学が正解なのでは?

Node.jsでtwitterのストリームをだらだらと流してみる。

twitter-nodeを使う。

var TwitterNode = require('twitter-node').TwitterNode
, sys = require('sys');

var twit = new TwitterNode({
  user: '######', 
  password: '#########',
  track: ['perl','python','haskell','javascript']
});

twit.addListener('error', function(error) {
  console.log(error.message);
});

twit
  .addListener('tweet', function(tweet) {
    sys.puts("@" + tweet.user.screen_name + ": " + tweet.text);
  })
  .stream();

実行結果

$ node tw.js 
@halfstepper: @seocosenza Ah, mi spiace, non ne so niente, io mi occupo di php-html-javascript, per il resto mi barcameno, ma non sono ferrato :-(
@rapella: RT @deliprao: Why MIT switch from Scheme to Python? (via @gappy3000) http://ow.ly/5N6hO
@piotrlukanko: RT @6Wunderkinder: We really need talented #JavaScript and #PHP (#CodeIgniter) developers @6Wunderkinder in #Berlin jobs@6wunderkinder.c ...
@js_gallery: Javascript motion gallery Forum | Yo! Venice! Forum. This forum requires Javascript to be enabled for posting ... http://tinyurl.com/4azlt77
@stackfeed: line aligning, HTML, CSS JAVASCRIPT: I am making an application for an android phone using eclipse, I want to be... http://bit.ly/oe79tO
@perlism: RT !natsutan: Pythonの文字列処理苦手。perlの s// が気楽で良い
@perlism: RT !reanisz: 「Perl好き」とは常日頃言っているが「Perlが得意」な訳ではない・・・(´・ω・`)
@glidepro: RT @creativeapps: New #Javascript feature on CAN: DrippingPaint.Js by @twholman | http://ca-n.in/nWFbWr
@_yueyue350179: RT @perlism: RT !natsutan: Pythonの文字列処理苦手。perlの s// が気楽で良い
@Nikole_2: "I know you like with the lights on, even if they off you can still feel the python" #SWAG
@jcvfeed2: Rugby - Top 14 - Manas : "Une ébauche du projet de jeu" (Rugbyrama.fr) javascript:void(0);

なかなか楽しい。

これからはアジアの中の国のひとつとして日本というものを考えるんだろうな

一ヶ月くらい前に業界の集まりがあったので、割と仲良くして頂いている他社のメディシナルケミストの人にこんな論調の話を振ってみた。

帰ってきた答えは「ケミストはまぁ他の業種でもつぶしが利くから製薬業界にこだわらないでも日本に就職先はあると思うよ」ということだった。でも、これがしめしていることは、合成っていう作業は、誰でもやれる系のコモディティ化するタイプの仕事のひとつってことじゃないかなぁと思った。まぁ、実際替えがきくしね。

さらに昨日、外資系のソフトウェアベンダーさんが量子化学計算ソフトウェアの売り込みに来てたんだけど、「海外のメガ・ファーマのニーズを汲みとって製品設計してますけど、日本のユーザーさんはまだあまりいないので、今入れて頂ければ日本でトップのほうになれると思います」っていう営業トークだもんなぁ。多分国内企業の性格を汲んだトークなんだろうけど、、、

流行を追いかける人には流行をつくりだすことはできないって言葉を思い出した。

自分のいる業界の未来を考えるに、メガ・ファーマのアジアの拠点が日本にないってことは、やはりこの国のこの業界はクォリティ/コストに競争力がないってことだと思うんだよなぁ。日本にこだわる必要あんのかなぁ、伸びそうな国に移って頑張るっていう選択肢を取る人はいないのかなぁ。まぁ、10年20年すれば答えが出るので気長にまとう。

日本人は自分は出ていかずに、お金を先に出稼ぎに行かせる人が多いようです。しかし、お金より先に人が働きに出ていく時代が来たのです。

ProductName アジアの時代を予言して20年
邱永漢
グラフ社 / 1365円 ( 2010-11-26 )


本書はそんな日本の状況をわりと外側から客観的に見たコラムですな。英語が出来たらアメリカとかヨーロッパを目指す記事が割と目に付く機会が多い気がするけどアジアのどこかを目指すっていう方向性もあるんだよなぁと思った。

FlaskでDrag and Drop APIとXHR2で画像をポストする

HTMLガイドブックはphpなのでFlaskでやってみた。この本は良書ですね、オススメです(最後のほうにNode.jsのサンプルも載ってるし)。

ProductName 徹底解説 HTML5 APIガイドブック コミュニケーション系API編
小松 健作
秀和システム / 2730円 ( 2010-12 )


青い囲みの中にドラッグドロップするとアップロードされるが、ドラッグドロップAPIのためにスペースを用意するっていうのはなんかいまいちだなぁ。もうちょっと洗練されたドラッグドロップのインターフェースはないものかね。

file_upload

ディレクトリ構成

$ tree
.
├── static
│   └── uploads
├── templates
│   └── index.html
└── uploader.py

サーバー側

from flask import Flask, request, url_for, render_template, make_response
import os

DEBUG = True
SECRET_KEY = 'development key'
UPLOAD_FOLDER = 'static/uploads'
ALLOWED_EXTENSIONS = set(['txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif'])

app = Flask(__name__)
app.config.from_object(__name__)

def allowed_file(filename):
    return '.' in filename and \
           filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS

@app.route('/')
def show_index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
def do_upload():
    file = request.files['xhr2upload']
    if file and allowed_file(file.filename):
        filename = file.filename
        file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
    response = make_response(url_for('static', filename='uploads/'+filename, _external=True))
    response.headers['Access-Control-Allow-Origin'] = '*'
    return response

if __name__ == '__main__':
    app.run()

クライアント側(templates/index.html)

<!doctype html>
<html>
  <head>
  <meta charset="utf-8">
  <title>File Uploader</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
  <style>
  #dropbox {
    width: 500px;
    height: 200px;
    border: 1px solid blue;
    background: #eee;
  }
  #urllists {
    margin-top: 30px;
    width: 400px;
    height: 300px;
    overflow: auto;
    floar: left;
    boader: 1px solid blue;
  }
  #currentimage {
    margin-left: 420px;
    margin-top: 30px;
  }
  </style>
  </head>
<body>
<h1>File Uploader</h1>
<div id=dropbox></div>
<div id=urllists></div>
<div id=currentimage></div>
<script>
var DnDUploader = function (base_id) {
  if(typeof(base_id) != "string" || base_id.length == 0 || document.getElementById(base_id) == null)
    return false;

  var __body = document.getElementsByTagName('body')[0];
  var parent = document.getElementById(base_id);
  __body.addEventListener("drop", function(e){e.stopPropagation();e.preventDefault();}, false);
  __body.addEventListener("dragenter", function(e){e.stopPropagation();e.preventDefault();}, false);
  __body.addEventListener("dragover", function(e){e.stopPropagation();e.preventDefault();}, false);
  parent.addEventListener("drop", function(e){e.stopPropagation();e.preventDefault();_handleDrop(e);}, false);
  parent.addEventListener("dragenter", function(e){e.stopPropagation();e.preventDefault();}, false);
  parent.addEventListener("dragover", function(e){e.stopPropagation();e.preventDefault();}, false);

  var _handleDrop = function(e) {
    var x = e.layerX, y = e.layerY;
    var dt = e.dataTransfer, files = dt.files, count = files.length;

    var types = [
            'image/png',
            'image/gif',
            'image/jpeg'
    ];

    for (var i=0; i < count; i++) {
    if (files[i].fileSize < 1048576) {
        var file = files[i];
        var type = file.type;
        var filename = file.fileName;

        if($.inArray(file.type, types) == -1) {
        alert(file.type + 'はサポート外です。');
        continue;
        }

        var reader = new FileReader();
        reader.readAsDataURL(file);
        _upload(file);

        reader.onload = function(e) {
        var fileData = e.target.result;
        _drawImage(x, y, fileData);
        }
    } else {
        alert('ファイルが大きすぎます');
    }
    }
  };

    var _drawImage = function(x, y, file) {
    var imgElement = document.createElement('img');
    imgElement.src = file;
    imgElement.style.position = 'absolute';
    imgElement.style.display = 'none';
    parent.appendChild(imgElement);

    setTimeout(function(e) {
        var o_w = imgElement.width;
        var o_h = imgElement.height;
        imgElement.width = o_w > 100 ? 100 : o_w;
        imgElement.height = parseInt( o_h * imgElement.width / o_w);

        var w = imgElement.width;
        var h = imgElement.height;
        imgElement.style.left = (x-w / 2)+'px';
        imgElement.style.top = (y-h / 2)+'px';
        imgElement.style.display = 'block';
    },1);
    };

    var _upload = function(file) {
    var fd = new FormData();
    fd.append("xhr2upload", file);
    var xhr = new XMLHttpRequest()
    xhr.open("POST", "http://www.kzfmix.com:5000/upload");
    xhr.send(fd);

    xhr.onload = function(e) {
        var url = e.target.responseText;
        $('#urllists').prepend('<p><a href="' + url + '">'+url+'</a></p>');
        $('#currentimage').html('<img src="' +url+ '">');
    }
    }
}

DnDUploader('dropbox');
</script>
</body>
</html>

ウッフィーという資本

ツイッターあまり関係ないし原著の題名THE WHUFFIE FACTORだし、日本語タイトルに騙されてた。新しい経済はどう回るか、どう回すかを考えさせられる本ですな。

貨幣資本から知識資本、そしてその先にはウッフィー資本が待っているのかなぁと漠然と感じる。

いま私たちは2つの並行する経済を生きている。そして俗に言う「資本」つまり「マーケットキャピタル」は、ソーシャルキャピタルがたくさんあるところで生まれるようになってきているのだ

わかったブログで見かけて以来、読まなきゃ思って積んでいたのだけどやっと読み終えた。

ProductName ツイッターノミクス TwitterNomics
タラ・ハント 津田 大介(解説)
文藝春秋 / 1650円 ( 2010-03-11 )


  • ウッフィーつまり信頼や評判を勝ちうるには、コミュニティとの関わり方で量より質が大事
  • 金銭的報酬はやり方が難しい

ウッフィー資本自体はそれほど目新しいものではないと思うけど、それが重要視されるファクターになってきたというか、セルフブランディングの重要性が増しているということかなぁと思う。

というわけで、LinkedInの日本語版は結構楽しみだったりする。

参考書籍

ProductName モチベーション3.0 持続する「やる気!」をいかに引き出すか
ダニエル・ピンク
講談社 / 1890円 ( 2010-07-07 )


ProductName ネクスト・ソサエティ ― 歴史が見たことのない未来がはじまる
P・F・ドラッカー
ダイヤモンド社 / 2310円 ( 2002-05-24 )