web

WebPackやってみる
gulpだけでいっぱいいっぱいだったので敬遠していたwebpackをやってみる。 #ことはじめ http://webpack.github.io/docs/ http://webpack.github.io/docs/tutorials/getting-started/ webpackをインストールして > npm install webpack -g サンプルファイルを用意して entry.js document.write("It works."); webpack実行。 > webpack ./entry.js bundle.js Hash: ca188ee5789bb780fcec Version: webpack 1.12.12 Time: 52ms Asset Size Chunks Chunk Names bundle.js 1.42 kB 0 [emitted] main [0] ./entry.js 28 bytes {0} [built] entry.jsを入力し、bundle.jsが出力される。 bundle.js /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ // Check if module is in cache /******/ if(installedModules[moduleId]) /******/ return installedModules[moduleId].

Node.jsでSocket.IOなアプリをHerokuにデプロイ
Socket.IOサーバーとしてHerokuを使ってみよう。 実験中 https://shielded-caverns-4913.herokuapp.com/ Heroku練習 以前作ったユーザーが生きていたので改めてチュートリアルを実践。 Getting Started with Node.js on Heroku gulpでexpressなサーバを作る 普通にnpmなプロジェクトを作る。 > mkdir bvh_sio > cd bvh_sio > npm init > mkdir src > mkidr src/server > mkdir src/client > cd src > tsd init > tsd query node -rosa install > tsd query express -rosa install > tsd query serve-static -rosa install > tsd query socket.io -rosa install Herokuにデプロイする場合はでdevDependenciesじゃなくてdependenciesに書くらしいのでそのようにした。 package.json { "name": "bvh_sio", "version": "1.

特定のHtmlElementを画面いっぱいにするToggleの実験
“W” translate | “E” rotate | “R” scale | “+” increase size | “-” decrease size Press “Q” to toggle world/local space, keep “Ctrl” down to snap to grid close ボタンが押されたら、最前面にposition: fixedの板($modal)を表示してそっちに Three.jsで使っているElement($renderer)の内容を付け替える。 let $children=$renderer.children(); $modal .appendTo($('body')) .css({ display: 'block', position: 'fixed', left: 0, width: '100%', top: 0, height: '100%', 'z-index': 100 }); $children.appendTo($modal); $(window).trigger('resize'); 概ねこんな感じ。 スクロールバーをbodyじゃなくて最大化表示用のdivより後ろにまわすなどの細工はしてある。

FontAwesomeを取り入れる
https://fortawesome.github.io/Font-Awesome/ 取り入れてみた。 cssをセットアップして アイコンを選択してコピペすると。 無駄にアイコンを配置してみよう。 fa-lg fa-2x fa-3x fa-4x fa-5x なるほど。 <i class="fa fa-wrench fa-5x"></i> iでアイコンタグを導入して、クラスで種類とサイズを指定する仕組み。 適当にサイトのテンプレートにアイコンを入れてみる。 わりとお手軽におされ?なサイトに。

Socket.IOな実験環境
Socket.IOを実験する環境のメモ。 Expressは、serve-staticで静的なファイルのhostingが目的兼後で拡張できるように coffee-scriptは無しでES6要素をなるべく入れる Socket.IOを手早く展開するのが目的なのでtypescriptは抜きにしようと思ったが、無い方がつらいので矢張り入れる https://github.com/ousttrue/sio_sample Project生成 > mkdir sio_sample > cd sio_sample sio_sample> npm init -y sio_sample> npm install gulp gulp-load-plugins gulp-nodemon browser-sync -D sio_sample> npm install express socket.io body-parser method-override connect-logger errorhandler serve-static --save vscodeでes6を使えるように jsconifg.json { "compilerOptions": { "target": "ES6" } } 後で拡張できるように以下のようなディレクトリ構成にする。 build <- srcから(加工して)コピーされる src <- 加工前のファイル置き場 + server + app.js + client + index.html + index.js src/server/app.js "use strict"; const http = require('http'); const express = require('express'); const port = process.

Treeを表示・操作する
JavascriptでTreeを表示操作するライブラリを探してみる。 なんとなくサンプルが充実している jqTree にしてみた。 このサンプルに必要だったのでFontAwesomeも取り入れてみた。 めんどくさいので避けていたが、そろそろscssを取り入れるべきか。

Node.jsのアップデート
ちょうど組み込まれているv8エンジンのバージョンが3から4に上がる直前にインストールしていたようで、 node.jsのバージョン > node --version v0.12.7 > node -p process.versions.v8 3.28.71.19 だった。 最新版(node-v4.2.3-x64.msi)をインストールしてみる。 node.jsのバージョン > node --version v4.2.3 > node -p process.versions.v8 4.5.103.35 v8 4.5搭載ということでES6の機能がいろいろ使えるぞ。 http://v8project.blogspot.jp/2015/07/v8-45-release.html exp.js let x=1; console.log(x); > node exp.js SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode 最近よく見る”use strict”が要るのか。 exp.js。use strict "use strict"; let x=1; console.log(x); としたらいけた。 class構文も問題なし。typescript使った後だとちょっと機能的に物足りない・・・ class Hoge { // コンストラクタと constructor(name) { this.

MongoDBでCRUD
“シングルページWebアプリケーション”に説明されている mongodbをバックエンドに、node.js + expressをフロントエンドにする構成のおさらい。 MongoDB <-> node.js Express <-> Browser グローバルなnpmパッケージ > npm install -g gulp typescript tsd bower Windowsの場合、 %USERPROFILE%\AppData\Roaming\npm にインストールされるのでパスを通しておく。 Expressの準備 app.js > mkdir mongocrud > cd mongocrud mongocrud> npm init -y mongocrud> npm install express --save // app.js var http=require('http'); var express=require('express'); var port=process.env.port || 3000; var app=express(); var server=http.createServer(app); app.get('/', function(request, response){ response.send('Hello Express'); }); server.listen(port); 起動 > node app.js http://localhost:3000 で動作を確認する。

Jadeを入れてみる
練習用に入手してきた”HTML5/CSS3 モダンコーディング”を写経しながらjadeを取り入れてみる。 extendでlayoutを共有したかったのでejsからjadeに取り換えてみた。 sassも取り入れようかと思ったが思いとどまった。 どんどん拡大・拡散していくgulp環境なので控えめにしないと手に負えなくなりそうな感じだ。 gulp向けにjade適用plugin(ejs版の改造)を作ってみた。 既にそういうプラグインも存在していそうであるが、 このくらいなら自作した方が早かったり。 jade-applyer.js var through = require('through2'); var gutil = require('gulp-util'); var fs = require('fs'); var jade = require('jade'); module.exports = function (options, map) { options = options || {}; if (!options.filename) { throw new gutil.PluginError('jade-applyer', '`filename` required'); } options.pretty = true; map = map || {}; return through.obj(function (file, enc, cb) { if (file.isStream()) { cb(new gutil.PluginError('jade-applyer', 'Streaming not supported')); return; } try { //console.

BrowserSyncのws設定を知らなかったせいでWebSocketのUpgradeがうまくいかなくてはまる
前から写経しながら読んでいる 「シングルページWebアプリケーション」がようやく終盤に差し掛かってきた。 Socket.IOで接続するところがあるのだけど、独自にgulpからbrowserSyncを使っていてWebSocketがupgradeできずにはまる。 Firefoxのconsoleにエラーが出て気になる気になる。 gulpfile.js gulp.task('server', ['nodemon'], function () { browser.init(null, { proxy: 'http://localhost:7000', port: 3000, ws: true // <- これが無いとTransportがpollingからupgradeできない }); }); なかなか気付けなかった。 その前に、socket.ioのnamespaceの指定でもはまってたのだが・・・。 しかし、この本は実にいい本だ。自分のWebの知識レベルにちょうどあっていて、昨今の技術をキャッチアップして行く足がかりに すごく役にたった。 この本が提唱する、 mongodb -> node.js + express + socket.IO -> JQuery な構成をベースにgulpによる開発環境と、typescript、mithril、bootstrapなんかを盛って行く路線で 寄り道しながら修行中。