一人でWebサービス作るならnode.jsがオススメという話

「好み」や「慣れ」「制約」の問題は忘れて読んで欲しい。それは個々人の問題だから。

時代はSPA

スマホの普及で、モバイルネットワークなのに画面遷移ごとにページのリロードなんてユーザはじれったくて待ってくれない。
だから、SPA(Single Page Application)という手法が出るのは必然だ。
これは、画面遷移に応じて必要なデータを読み込み、必要な部分だけを再描画する手法だ。

言語のスイッチングコストは予想以上に高い

昔と比べて、ウェブサービスの開発コストはほんとうに下がった。
だから、一人でサービスを作る人もこれから格段に増えるに違いない。

一人でSPAを組む時にしんどいのが、言語のスイッチングコストだ。
Railsで組んでいるなら、RubyとJavaScriptの2つを並行して書かなければならない。

言語はそれぞれ独特の作法があり、いいコードを書くにはそれなりの鍛錬が必要だ。
しかしいかに熟練していたとしても、常に複数言語のテクニックやライブラリにキャッチアップするのは大変だ。

node.jsは”お一人様向け”

node.jsは、サーバサイドで動くJavaScript環境だ。
つまり、スイッチングコストが圧倒的に低い。

もちろん、DOM操作やファイル操作など、クライアントとサーバサイドでは相互で通用しないテクニックもある。
でもそれは言語の問題ではなく、アーキテクチャの問題だ。

一人で効率よく開発したいなら、node.jsをお薦めする。
フレームワークはどれがいい?
そんなのは今どきどれもよく出来ているから、「住めば都」だ。

iOS 7 Style Frosted Glass Top-Bar with CSS3

Screen Shot 2015-03-28 at 8.48.16 PM

named-region is not coming yet

iOS 7’s frosted glass style UI is beautiful. Let’s build it on the web.
There are a couple examples out there for applying blur effect to navigation bar or image.
But these examples are not perfect.
If you use filter: blur, the edges aren’t blurred and still sharp.
Using html2canvas is better but it’s not able to blur cross-domain images.

Even though actually there is a perfect solution using the experimental web platform features on Google Chrome.
So it seems that it’s only a matter of time until we can use named-region.

However, I found a solution not using the experimental features(a proof of concept).
It is a little tricky but works fine on the famous browsers even on iOS safari.
It’s usable if you have a simple web page.

DEMO

Here is live demo.
Source, and video:

Copy all DOMs into blurry viewport, blur and scroll it

How it does is pretty simple.
The entire document is copied into blurry content wrapper at loading time.
And it applies blur effect to the entire content.
The blurry viewport scrolls corresponding to the scroll position of the page when you scroll down the page.

Duplicated DOMs potentially causes bug on your web page

This solution works fine though duplicated DOMs always exist on your document.
It could be a potential of bugs in CSS and DOM manipulation.
Be careful if you use this method.

[Mac] 特定のアプリケーションをショートカット一発でアクティブにする方法

同時に沢山のアプリを使っていると切り替えが面倒になる

アプリケーションの切り替えショートカットといえばCommand + Tabですよね。
でも、アプリケーションが最後に使用した順に並ぶので、切り替えるたびに順番が入れ替わってしまいます。
職業柄、複数のブラウザやターミナルを頻繁に交互に切り替えるのですが、切り替えるアプリケーションが3つ以上になると間違えることが多くなります。
さらに、Command + Tabによる切り替え方法は非効率的です。
3つ前のアプリケーションをアクティブにするためには、Commandを押下しながらTabを3回も押さなければなりません。

アプリケーションが3つ以上になった時に起こる混乱と、無駄なキータイピングを改善したい!

アプリケーションごとに固有のショートカットキーを割り当ててアクティブにしたい

切り替えたいアプリケーションは多くて5つ程度です。
なら、それぞれに固有のショートカットキーを割り当てれば全て解決します。
例えば:

  • Chrome: Command + Option + Shift + 1
  • Safari: Command + Option + Shift + 2
  • Calendar: Command + Option + Shift + 3

さっそく、手元のMacを設定してみましょう。

設定手順

Step 1. Automatorでサービスを作成する

Automator_icon

まずは上記アイコンのAutomatorを起動してください。
Command + Nで新規作成します。

automator 1

上記画面が表示されたら、「Service」を選択してください。

Step 2. サービスを No Input, Any application に設定

automator 2

上記画面の右上に注目してください。
Service receives [no input] in [any application] となるように、ドロップダウンリストの項目を選択してください。

Step 3. 起動したいアプリケーションを指定

automator 3

検索欄に launch と打つと、 Launch Applicationという項目が残るはずです。
この項目を、右側のペインにドラッグ&ドロップしてください。
Launch Applicationという項目が追加されたら、その中のドロップダウンリストをクリックして、アプリケーションを選んでください。

できたら、Command + Sで保存します。適当な名前をつけてください。

automator 4

Step 4. System Preferencesでキーを割り当てる

以下の手順で設定画面を開きます:

  • System Preferences → Keyboard → Shortcuts

左側のリストからServicesを選択してください。
その次に、右側のリストを下の方までスクロールしてください。
下記のような画面が表示されるはずです。

system preferences 1

あなたが先ほどAutomationで作成したサービスが表示されているはずです。
それに、ショートカットを割り当てましょう。

Step 5. 動作確認

割り当てたら、さっそくショートカットキーを押してみてください。
もしアプリケーションが起動していなければ、起動します。
すでに起動済みであれば、そのアプリケーションが前面に表示されます。

キーコンビネーションが悩ましい

押しやすいキーコンビネーションは大抵アプリケーションに割り当てられてしまっています。
もし環境設定とアプリケーションのショートカットが重複してしまった場合、現在使用中のアプリケーションのショートカットが優先されるようです。
ですので、重複せず、なおかつ押しやすいコンビネーションが望ましいです。
僕はひとまずCommand + Option + Shift + Numberでやってみようと思います。
もしいいコンビネーションがあれば是非コメントください^^

BlenderでMonument Valley風の3Dグラフィックを制作してみた

MonumentValley-like-cg

ローポリCGが大好きで、自分も描いてみたいと思い3Dモデリングツールに手を出しました。
目標は、Monument Valley。下のようなやわらかい何とも言えない世界観のゲームです。

Monument Valley

これに似た雰囲気のCGに挑戦!

Blenderはフリーで高機能

一昔前なら3DモデリングといえばLightWave3Dでした。
今はというと、いろいろあるみたいですがBlenderが良さそうだと思いました。
特徴は:

  • フリーウェア(無料)
  • 多くの人が使っている
  • 業界標準的なUIを備えている
  • 今も精力的に開発されている
  • Monument Valleyでもモデリングで使用された(!)

最後の一点でキマりです。笑

やったチュートリアル

いかんせん初めてなので、とりあえずチュートリアルをやりました。
ここでは、僕がやったチュートリアルの紹介と、それに沿って自分が作ったイメージを掲載します。

Blender Tutorial For Beginners: Coffee Cup

操作を口頭でも丁寧に説明してくれるので非常に分かりやすかった。

成果

blender-cup

Blender Tutorial For Beginners: Cloth Napkin

前チュートリアルのちょっと応用編。

成果

Cloth

Blender Tutorial For Beginners: Alarm Clock

ちょっと複雑な形状に挑戦。

成果

clock

Secrets to Creating Low Poly Illustrations in Blender

いよいよ、ローポリのジオメトリーに挑戦。

成果

lowpoly-geometry

イメージに近づいてきた!

| PigArt | BLENDER Tutorial: Low poly forest assets!

他のローポリオブジェクトも練習。

成果

lowpoly4

かわいくできました。

Monument Valleyの世界観の再現に挑戦

最後の方のチュートリアルでやった要領で、Monument Valleyに出てくるようなオブジェクトを作って並べました。
その結果・・

MonumentValley-large.png

ぽい!それっぽい!!!
しばらく見とれてしまいました。

ローポリは意外と簡単に出来る

Blenderは初めてだったにもかかわらず、いくつかのチュートリアルをこなすだけですぐにプロ並み(と言ったら大げさですが)のCGが作れました。
かかった時間は、たったの二日間でした。
せっかく覚えたので、今後もちょくちょく描いていきたいと思います。

Dockerでビルド中にdevicemapperがエラーを発生する問題の対処法

docker

問題の概要

Dockerfileのビルド中に以下のようなエラーがランダムに発生するケースがあります:

Error getting container <container ID> from driver devicemapper: Error mounting

僕のケースでは、カーネルがLinux 3.13.0-40-generic、ディストリは Ubuntu 14.04.1 LTSでした。

Dockerのバグでカーネルのバージョンが原因

この問題はGitHubの下記issueで議論されています。

最近、vbatts氏が以下のようなコメントを投稿していました:

after a good bit of investigation, this appears to be an issue in the 3.13 kernel. There are abundant fixes for device-mapper/dm thin in 3.14 (and fixes/backports to 3.14.y and greater). Too many for me to bisect presently.

The state is that this issue is now only reproducible on ubuntu-14.04.1 LTS, which is locked on linux 3.13.0.

In my testing, even using the builds from http://kernel.ubuntu.com/~kernel-ppa/mainline/v3.14.27-utopic/ allowed me to not hit this issue, but that would likely not be a “supported” resolution for many infrastructures…

I am reluctant to close the issue as fixed, as it is for newer kernels, because so many folks will be on ubuntu 14.04.1 LTS for a while… and will likely still hit this bug.

devicemapperがエラーを起こすのは、linuxのバージョンが3.13.0の場合に限るそうです。

Linuxのバージョンを3.13より上にする

Ubuntu 14.04の場合は、以下のパッケージをインストールします。

sudo apt-get install linux-image-3.16.0-29-generic

次に、システムを再起動してください。
カーネルのバージョンが正しくアップグレードされたことを確認します。

$ uname -a
Linux dev4 3.16.0-29-generic #39-Ubuntu SMP Tue Dec 16 20:54:13 UTC 2014 x86_64 x86_64 x86_64 GNU/Linux

これで、件のDockerのエラーは発生しなくなりました。

[要約] 外国語を6ヶ月でマスターするための3つの原則と7つの行動

この記事は ログミー[o_O] の掲載記事の抜粋要約です。

WS000005_R-590x323

Chris Lonsdale(クリス・ロンズデール)氏の長年の研究によれば、以下に述べる規範に倣えば、高速で言語やスキルを習得できるとのこと。
部分部分では聞いたことのある方法だったりします。
それらが研究によって裏付けされたんだな、と考えることが出来ますね。
詳しい理由や原理については、ログミーの翻訳書き起こしや講演ビデオをご覧ください。


↓引用ここから

3つの原則

  1. 自分に関係する言語内容に集中すること
  2. 学習初日からその言語をコミュニケーションのためのツールとして使う
  3. 最初にメッセージを理解したら、無意識のうちに言語を習得出来る
    • 文法だけ勉強してもだめ。理解可能なインプットで勉強するべき
    • 語学学習とは、たくさんの知識を蓄えることではない
    • 語学学習とは、身体的トレーニングのようなもの

7つの行動

  1. たくさん聞くこと
    • 理解してるかどうかは気にしなくていい
  2. 言葉を学ぶよりも先にその意味を掴む
    • ボディランゲージを使って意味を汲み取る
    • 理解可能なインプットを通じて習得する
      • 日本語で学ぼうとしない
  3. 知っている単語を組み合わせてバリエーションを作る
  4. 核となる語彙の習得に集中する
    • 英語であれば、核となる1,000語で、日常コミュニケーションで使う語彙の85%がカバー出来る
    • 3,000語で、日常会話の中で言いたいことの98%を表すことが出来る
  5. 「言葉の親」を見つける
    • あなたという人に興味を持ち、もっぱら対等な立場でコミュニケーションをとってくれ、かつ、あなたがメッセージを理解出来るように注意を払ってくれるような人
    • 親は子どもに話しかける時、ボディランゲージを使い、子どもが理解できるとわかっている単純な言葉で話してくれるので、理解可能なインプットができる環境がある
  6. 顔の動きを真似する
    • ネイティブスピーカーの筋肉の使い方を真似する
    • 顔の筋肉を正しく動かして、人々があなたの言うことを理解出来るような音を出さなければならない
  7. 母国語を経由させず、直接意味を思い浮かべる
    • 「自分が知っていることは全て頭の中にあるイメージであり、感情である」ということを認識する

↑引用ここまで

僕はリスニングとスピーキングが苦手なので、「たくさん聞くこと」から始めたいと思います!

PhantomJSでHTML5の一部APIを使えるようにする方法

phantomjs

PhantomJS 1.9.xは古いWebKitを使っている

GUIを持たないヘッドレスブラウザのPhantomJSは、ウェブでのフロントエンド開発においてそのテストに適したツールです。
このPhantomJSは、QtWebKitをベースに開発されています。
HTML5やCSS3をふんだんに使ったイマドキのウェブサービスを開発している場合、PhantomJSを使ってテストしようとすると上手くいかない場合があります。
これは、使用しているWebKitが古いために起こる問題です。古いWebKitではJavaScriptCoreも古いので、JavaScriptの新しい機能も一部使えません。

どのような機能が使えないのかは、Supported Web Standards に明記されています。
このページには書かれていませんが、Web fontsも使えません。これは前回の記事で使えるようにする方法を書きました。

PhantomJS向けのshimsまとめ

前述の通り、PhantomJSは古いWebKitをベースにしているため、HTML5のAPIやJavaScriptの新機能が使えません。
自分が確認した限りで使えなかったAPIを使えるようにするshimをまとめました。
以下の機能が使えるようになります。

  • Function.prototype.bind
  • History API

今後も適宜更新していこうと思います。

https://gist.github.com/noradaiko/12cbaf8a1674e3b8c8e6.js

参考になれば幸いです!

関連資料