10月のまとめ

misc

新潟から東京に引っ越してきては早一ヶ月になりました。あと一ヶ月ねー。

やったこと

  • nodebrewのSnow Leopard対応をお願いした
  • grunt.loadNpmTasksをpackage.jsonから自動で読み込むようなコードを書いた
  • Jadeでのループ出力について書いた
  • tmuxでC-aをコンソールに送る設定について書いた
  • DocumentFragmentについて書いた
  • http://sasaplus1.com/pfmloopを作った
  • 東京Node学園祭2013に参加した
  • GitHubのリポジトリをSubversionでチェックアウトできることに気がついた


まあ、いろいろごたごたしてたし、東京に出て最初の月というわけで今まで道りにいろいろはできなかったかなと。しょうがないのだけど。
それでもちょっとずつ慣れてきたし、日々刺激を受けまくりなので良い方向に進んでいけるんじゃないかなーと思ふ。


相変わらずやることとか決めてないけど、まあ、流動的にいろいろ吸収しつつ、何か残せていければ良いのかなと思ったのでした。

GitHubのリポジトリをSubversionでチェックアウトする

Subversion

clone URLって書いてあるところを眺めていたら、"You can clone with HTTPS, SSH, Subversion."と書いてあって、Subversion?????となった訳です。
以前はSubversionとは書いてなかった気がするのですが……
試しにチェックアウトしてみると、ちゃんとSubversionリポジトリとしてチェックアウトできました。

$ svn co https://github.com/sasaplus1/deepcopy.js
$ cd deepcopy.js
$ ls
branches tags trunk
$ ls branches/
develop
$ ls tags/
0.1.0 0.1.1 0.1.2 0.2.0 0.3.0 0.3.1 0.3.2
$ ls trunk/
HISTORY.md      README.md       deepcopy.min.js lib             test
LICENSE         bower.json      index.js        package.json    testem.json

という風にチェックアウトされてきます。masterはtrunkに、タグはそのままtagsに、ブランチはbranchesに入るみたいです。そのままですね。
とはいえ、Gitを使っている身としては何がうれしいのかさっぱりわかりませんが……
Subversionしか使えない環境でもチェックアウトできるというのは、dotfilesなどを持ってくるのには良いかもしれませんが。
コミットできるのかな、これ？

東京Node学園祭2013に行ってきたよ

misc node.js

去年に引き続き、東京Node学園祭2013に行ってきました。



もらった手提げ袋に入っていた各スポンサーのパンフレットなど。

出発

この日は台風が接近していて、中止か開催されるかどうかが午前9時にウェブサイト上で公開されることになっていたのですが、布団からiPod touchで開催されることを確認したあとに五度寝くらいしたので、起きたら11時だったりしました。
ちなみに東京Node学園祭2013に参加登録したのは良かったものの、どこで開催されるのか、何時からなのか全く調べておらず、慌てて家を出たのでした。


とまあバタバタして出たので、13:00に1Fナチュラルローソンに到着した直後、ピックアップまだかなーと調べてみたら、13:25と書いてあって、やってしまった感満載だったのですが、なぜかすぐにスタッフの方がピックアップしに来てくれ、基調講演には間に合いました。ありがとうおねーさん。

基調講演 / [twitter:@meso]

The Future of Programming in Node.js - Speaker Deck
基調講演はThe Future of Programming in Node.jsというIsaacがMLに投げたメールに関するもの。
メモはいろいろ書いたんだけど、スライド読んだ方が良いかも。

Track B - Yeoman, Grunt, Bower / [twitter:@yosuke_furukawa]

Yeoman Grunt Bower - Speaker Deck
YeomanとGruntとBowerに関するもの。でもメインはYeomanのgeneratorの作り方だったかな。
Yeomanに関する情報ってあまり多くない気がするのでむしろよかったです。
自分も、これyeomanのgeneratorで作った方がいいんだろうな、というようなリポジトリを持っているのでさっそくgeneratorに作り直そうかと思います。

Track B - Node.jsを選ぶとき,選ばないとき / [twitter:@tricknotes]

Node.js を選ぶとき 選ばないとき
Rails(Ruby)とJavaScript(node.js)を比較して、どういう理由でどちらを選んだかなど。
今日は札幌 / Sapporo.jsからいらっしゃっていたらしいです。

Track A - ECMAScript6 + node.js / [twitter:@Constellation]

ECMAScript6の新機能などに関するもの。LLまつりの時にもECMAScript6のことを発表していて、すごく関心を持ったのですが、パワーアップしての再発表という感じでした。

  • class syntax
  • let & const & function declarations syntax
  • template literal syntax
  • allow function syntax
  • object syntax
  • generator syntax
  • default parameters
  • other features
  • promise
  • Map/Set
  • WeakMap/WeakSet
  • Symbol
  • inherit buildin objects

などなど。これらがいつから普通に使えるようになるのかが気になるところですが……
でも、今から少しでも触っておかないといざ使えるようになったときに扱えないかもですねえなんて。

Track B - WebRTCを始めよう / がねこまさし

2013 WebRTC node
WebRTC全般のお話など。WebRTCって名前は聞いたことがあって、大体カメラがどうこうってことかなーという簡単な印象しか持っていなかったので、どんなことができるかという説明からで良かったです。

LT大会

LTは予定されていた5つと、飛び入りの6つがあったりしました。
3つ目？くらいからビールなどが届いたのでアルコールを飲みながら発表したり、聞いていたりとか。
ビール苦手なのでほろよい飲んでました。


LTが途切れなかったので無限LTとか途中で言われてたりとかｗ


発表者がビールを飲んでいたおかげで訳が分からなくなったりとかしていてなかなか面白かったです。

懇親会？後夜祭？

LTも終わって、ピザなどが届いたりとかしたので懇親会へ。


懇親会が始まる前にスタッフでもない[twitter:@hokaccha]さんにお手洗いの場所について聞いたりとか。
そういえばnodebrewのSnow Leopard対応に関して何も言ってなかったな……


あとはピザなどをお腹いっぱい食べたり、[twitter:@syguer]さんとお話したりしました。
引っ込み思案なのは未だに直ってないなーと実感したのでした……

感想とか

最近、公開しているモジュールも割と放置（というか特にこれ以上付加する機能もない）だったので、yoemanのgeneratorをさっそく作ろうかと。
あとイベント中にgrunt-este-watchをいじっていたら諸問題が解決したのでそれをまず記事にしようかと。
grunt-este-watchが設定しても思った通りに動作してくれないの、数週間悩んでたんですが東京Node学園祭2013中に問題に取り組むと解決するとか、このイベントには何かそういうパワーでもあるのかな。


1年後ではあるけども、今から東京Node学園祭2014も楽しみなのでした。
そういえば[twitter:@meso]さんが代表引退宣言されてしまったけど、YAPC::Asiaに続いて2013年は何かあるのかな。

pfmloop ver.0.2.2

misc

http://sasaplus1.com/pfmloop/をいろいろと更新した。
背景に同じ動画をblurをかけて再生するように。CSS3 filterに対応してないブラウザはぼかしがかからないけど。
なんかいろいろ不具合も見つけたのでまだまだ修正しないとなあ。あとブラウザ毎の対応をした方が良いかも。

久しぶりに何か作ったよ

misc

http://sasaplus1.com/pfmloop/
延々PerfumeのMVが再生されるサイト。YouTube観ればいいのでは……って思われるかもしれないけど、本当は背景にいろいろ表示したりとかしたかったんだけど諸事情により諦めた結果がこれなのでしょうがないのです。

DocumentFragment

HTML JavaScript

要素をループでappendChildするよりも、DocumentFragmentとかを使った方が速いよーとCodeIQのフィードバックでもらったのですが、DocumentFragmentってなんぞやという状態だったので調べつつ試しに書いてみました。

index.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>DocumentFragment</title>
<ul id="list"></ul>
<script src="index.js"></script>
index.js
document.addEventListener('DOMContentLoaded', function() {
  var fragment = document.createDocumentFragment(),
      i, len, li;

  for (i = 0, len = 10; i < len; ++i) {
    li = document.createElement('li');
    li.appendChild(document.createTextNode(i));
    fragment.appendChild(li);
  }

  document.getElementById('list').appendChild(fragment);
}, false);

という風な感じでスクリプトを書いてあげて実行すると、

  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

という風にレンダリングされます。


とまあ、この程度ならループ内でul要素に対して直接li要素をappendChildしても対して速度的には変わらないのでしょうけど、もっと要素数が多くなったり、ブラウザが古かったり、マシンスペックも低かったりするとだいぶ速度が変わってくるようです。DocumentFragmentを挟むだけで、無駄なスタイルの計算をする必要がなくなるために速くなるなんて、お役立ち情報だなあと思ったのでした。

tmuxで^aをターミナルに送る

tmux Mac

screenからの乗り換え組のため、プレフィックスキーがC-aな私です。
なのでC-eを押してターミナルの最後に移動することはできても、C-aを押してターミナルの最初に移動することはできません。
……だったのですが、あまりにも不便なのでC-a aでC-aを送るように設定しました。というかちゃんとtmuxを調べてなかったので、その設定方法がわからなかったのですが。
ちなみにUbuntuなどの場合はHomeキーとかEndキーを使ってました。

unbind a
bind a send-keys ^a

これでC-a aを押せばC-aが送られるのでカーソル（キャレット？）が先頭に移動します。今まで矢印キー押したりしてたので捗りそう。