mac emacs バックスラッシュ入力

macのemacsでバックスラッシュ入力の設定をしたのでメモを残しておきます。

会社のmacでは、emacsで、バックスラッシュをOptionキー + ¥ で入力できるようにしていました。
ただ、自分のmacは設定をしておらず、今回設定を行いました。

ちなみに、インストールしたemacsのファイル

* Emacs-23.2-universal-10.6.3.dmg

バックスラッシュ入力の設定はユーザフォルダ直下の、.emacsファイルを編集することでできます。

まず、.emacsファイルがなければ、新規作成します。

ファイルのパスは次のようになります。

/Users/[ユーザ名]/.emacs

.emacsの内容は次のとおりです。

(define-key global-map [?\M-¥] "\\")

そして、emacsを再起動すると、Optionキー + ¥ でバックスラッシュを入力できます。

Google と Twitter からのお祝い

私ごとでありますが、昨日1/17にて、37歳を迎えました。

そして、GoogleさんとTwitterさんのサイトを見たら次のように、お祝いされました。

Googleさんは、Googleのアイコン文字列がバースデーケーキ表示で
そのアイコンにカーソルを合わせると、「Takaharu さん、誕生日おめでとう！」の文字が。

Twitterさんは、ログインしている状態で、ホーム画面を表示すると
画面下から、たくさんの風船が浮き上がるアニメーションが表示されます。

なお、1/17は阪神・淡路大震災の日です。
不幸にも被害に遭われ亡くなられたた方に対して、ご冥福をお祈りいたします。

node express ect multerでファイルアップロード

node express ect multerでファイルアップロード処理を作成してみました。
ちなみに、ファイルアップロードは、HTML5のFile APIを使用して、PCからブラウザにファイルをドラッグアンドドロップで、実行するようにしました。
次のサイトを参考にしました。

https://github.com/expressjs/multer

http://soraxism.com/soraxism/blog/html5%E3%81%AEfile-api%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%80%81%E3%83%89%E3%83%A9%E3%83%83%E3%82%B0%EF%BC%86%E3%83%89%E3%83%AD%E3%83%83%E3%83%97%E3%81%A7%E3%83%95%E3%82%A1%E3%82%A4

プログラムソースは次の通りです。

=== app.js ===
メインプログラムですね。
"/"のパスの処理が呼ばれたら、ファイルアップロード入力フォームを表示します。
(開発環境だと、http://localhost:3000/ に該当します。)

"/up"のパスの処理が呼ばれたら、ファイルアップロード処理を行っています。
(開発環境だと、http://localhost:3000/up に該当します。)
そして、アップロードされたファイルの属性をコンソールに出力させてます。

var multer = require('multer');
 
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
 
var app = express();
 
var upload = multer({
    dest: __dirname + '/public/uploads/'
});
 
// ECT view engine setup
var ECT = require('ect');
var ectRenderer = ECT({ watch: true, root: __dirname + '/views', ext: '.ect'});
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ect');
app.engine('ect', ectRenderer.render);
 
// routes setup
var routes = require('./routes/index');
 
app.use('/', routes);
 
app.post('/up', upload.single('upFile'), function (req, res, next) {
    for (var item in req.file) {
        console.log(item + ":" + req.file[item]);
    }
   res.render('index');
});
 
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
 
// catch 404 and forward to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});
 
// error handlers
 
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
           error: err
        });
    });
}
 
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});
 
module.exports = app;

=== index.js ===
ファイルアップロード入力フォーム(index.ect)表示を促しています。
ただ、それだけです。

var express = require('express');
var router = express.Router();
 
/* GET home page. */
router.get('/', function(req, res, next) {
    res.render('index');
});
 
module.exports = router;

=== index.ect ===
ファイルアップロードの入力フォームです。

<% extend 'layout' %>
 
<div id="drag-area" style="background-color: lightgrey; text-align: center;">
アップロードするファイルをドロップ<br />
または<br />
    <div class="btn-group">
        <input name="upFile" style="display: none;" type="file" />
            <button id="btn">ファイルを選択</button>
    </div>
</div>
<% block 'footer-info' : %>
<div class="right">
page: upload</div>
<script>
 
$(function(){
    $('#drag-area').bind('drop', function(e){
        e.preventDefault();
        var files = e.originalEvent.dataTransfer.files;
        upload(files);
    }).bind('dragenter', function(){
        return false;
    }).bind('dragover', function(){
        return false;
    });
 
    $('#btn').click(function() {
        $('input[type="file"]').click();
    });
 
    $('input[type="file"]').change(function(){
        var files = this.files;
        upload(files);
    });
});
 
function upload(files) {
 
    if (files == null || files.length == 0) {
        return;  
    }
 
    var frm = new FormData();
    frm.append("upFile", files[0]);
 
    $.ajax({
        url: 'http://' + location.host + '/up',
        type: 'post',
        data: frm,
        processData: false,
        contentType: false,
        success: function(data) {
            alert('ファイルがアップロードされました。');
        }
    });
}
 
</script>
<% end %>

package.json

{
    "name": "upload",
    "version": "0.0.0",
    "private": true,
    "scripts": {
        "start": "node ./bin/www"
    },
    "dependencies": {
        "body-parser": "~1.13.2",
        "cookie-parser": "~1.3.5",
        "debug": "~2.2.0",
        "express": "~4.13.1",
        "jade": "~1.11.0",
        "morgan": "~1.6.1",
        "serve-favicon": "~2.3.0",
        "ect": "~0.5.9"
    }
}

なお、今回multerを使用していてハマったのが
上記のように、multerを変数に格納するのでなく、次のようにapp.useを使用するサンプルがググると見つかります。

app.use(multer({ dest: './upload/'}));

この通りに、コーディングして、動作させると次のエラーが発生しました。

TypeError: app.use() requires middleware functions

このエラーメッセーじをググると、stackoverflowに次の記事が見つかりました。

app.use…は使用できないみたいです。

そもそも、上記のmulterのgithubの使用方法に、app.use…は記載されてないですね。

http://stackoverflow.com/questions/31656178/typeerror-app-use-requires-middleware-function

node expressで外部jsファイルを使用する(scriptタグから)

node expressでjqueryを使用する必要があったので
htmlのscriptタグのsrc属性にjqueryのパスの設定して、使用できるようにしました。

expressのプロジェクトのディレクトリは、次のようになっており
~/project_name/javascripts/ に jquery-2.1.4.min.js を配置しました。

project_name
├ bin
├ node_modules
├ public
│ ├ images
│ ├ javascripts
│ │ └ jquery-2.1.4.min.js
│ └ stylesheets
├ routes
└ views

そして、htmlのscriptタグは次のように、定義しました。

<script src="./javascripts/jquery-2.1.4.min.js"></script>

これで、jqueryが使用できました。
まぁ、javascript用のディレクトリが用意されているので、そこにjsファイルを
配置して、それをそのまま使用しただけです。

node expressのURLのハンドリング

nodeのexpressでURLのpathnameによって、動作させるプログラムを紐つける方法についてのメモです。

(*URLは開発環境での場合です。)

次のURL2つをそれぞれ、別のプログラムを動作させます。

1)http://localhost:3000/

2)http://localhost:3000/test

app.jsのapp.use関数の第1引数にpathnameを設定します。
そして、第2引数は、動作させるプログラムを設定します。

1)の場合は、app.use('/', routes);
2)の場合は、app.use('/test', test);

動作させるプログラムの、router.getの第1引数は'/'を設定します。
2)の場合も、'/'を設定します。'/test'を設定してはダメです。
'/test'を設定して、動作させるとHTTPステータス404(Not Found)になります。

2)を動作させるために、関連する箇所のプログラムは以下になります。

app.jsの先頭部分

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
 
var app = express();
 
// ECT view engine setup
var ECT = require('ect');
var ectRenderer = ECT({ watch: true, root: __dirname + '/views', ext: '.ect'});
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ect');
app.engine('ect', ectRenderer.render);
 
// routes setup
var routes = require('./routes/index');
var test = require('./routes/test');
 
app.use('/', routes);
app.use('/test', test);

test.jsの内容

var express = require('express');
var router = express.Router();
 
/* GET home page. */
router.get('/', function(req, res, next) {
    res.render('test');
});
 
module.exports = router;

Error: Cannot find module 'express'

nodeで、ectを使用したプログラミングをしてみようと思い

ググって、次のサイトの記事を参考にさせてもらい

Webアプリを作成しようとしたのですが、

http://trycatchand.blogspot.jp/2015/05/Express4-ECT-example.html

http://www.webcyou.com/?p=5173

Error: Cannot find module 'express'　というエラーが出て、

Webアプリが起動しない、このエラーをググると

次のサイトが見つかりました。

http://hakashun.net/2011/07/nodejsexpress.html

このサイトに記載されているように、次のコマンドを実行して、

問題を解決しようとしました。

sudo npm link express

ですが、似たようなエラーが複数出たのです。

発生したエラーは、次の通りです。

Error: Cannot find module 'serve-favicon'

Error: Cannot find module 'morgan'

Error: Cannot find module 'cookie-parser'

Error: Cannot find module 'body-parser'

Error: Cannot find module 'express'　と同じような、エラーだったので、

sudo npm link express　と同じように、次のコマンドを順番に実行することで

これらのエラーは発生しなくなりました。

sudo npm link serve-favicon

sudo npm link morgan

sudo npm link cookie-parser

sudo npm link body-parser

今回、発生したエラーは、app.jsというプログラムの先頭が次のようになっており

必要なモジュールを取り込んでないため、発生したエラーのようでした。

本当は、今回のエラーを回避したコマンドの実行でなく、

事前の環境設定の方法に誤りがあるような気がします。

ですので、本件については、時間を作って、調べてみようかと思います。

var express = require('express');

var path = require('path');

var favicon = require('serve-favicon');

var logger = require('morgan');

var cookieParser = require('cookie-parser');

var bodyParser = require('body-parser');