「Webでなんでも」について思うこと

僕は技術を含めてWebが大好きです。
(シューカツに向けてポートフォリオサイトを作りました。誰か雇って下さい())
と言っても、独学で1年半ぐらい勉強しただけのド素人です。
こんな僕が最近思ったことを書きたいと思います。あんまりまとまってないです。


11月30日にHTML5カンファレンス2013が開催されましたね。
僕は参加できなかったのですが、ネットに上がっている動画や資料を見て楽しみました。
どのセッションもとても魅力的で、来年は参加したいと思っています。


参加されてた人はみんなWebが好きで、Webという技術が大いに期待されているからこそ、このような素晴らしいカンファレンスが開催されるのだと思います。
しかし、(別にHTML5カンファレンスの資料を見たからというわけではないけど)僕はこう思うのです。

「Webでなんでもやろうとし過ぎなのでは…?」と。


僕は、いわゆる「リアルタイムWeb」と呼ばれる技術、WebSocketやWebRTCに興味を持って少し勉強しました。
"Webで"双方向通信ができる!P2P通信ができる!すごい!


でも、ふと思ったのです。
「別にこれらを使っても新しいサービス、コンテンツはできなくない…?」


WebSocketはすごい技術で、今後完全にAjaxに取って代わるものだとも思っています。
でも、WebSocketを使って変わることは、パフォーマンスが良くなるということだけなのではないでしょうか?
パフォーマンスが上がることは間違いなくいいことです。
"Webで"リアルタイム性の高いアクションゲームなんかを作るのにはWebSocketでなければいけないのかもしれません。


しかし、普通のWebサービスでこれほどのリアルタイム性は必要なのか。
そもそもリアルタイムWebの「リアルタイム性」はどれぐらいを指すのか。
(0.01sぐらいのオーダーなのか、10sぐらいだったりするのか)
Twitterは10秒に1回ぐらいでポーリングしてますが、十分にリアルタイムに更新されるように感じます。


WebRTCについても、今のところ、"Webで"ビデオ通話・チャットができるようになった、ぐらいだと思います。
これも「別にSkypeでいいじゃん」って思うわけです。
(個人的にpeerCDNには期待していますが。)

WebGLについても、(あまり知りませんが)"Webで"3DCGが動かせるようになっただけ。
なように感じています。


Webの表現の幅が広がっただけで、革新的に新しい何かができるようになったわけではない気がしています。


なんでこんなにも"Webで"、Webの上で動作・表現したいのでしょうか?

理由を考えてみました。
Webで公開すると「アプリケーションをローカルにインストールする必要がない」からだと思います。


確かにこれはすごいメリットだと思います。
Skypeとかいちいちインストールしなくても、ブラウザさえあれば何でもできるのです。


でも、スマートフォンではどうなのでしょうか?


最近思ったのですが、僕は調べ事は「ブラウザから検索」するのですが、どうもそうしない人も多いと感じています。
例えば、僕はモンハンをしていて、新しい武器を作ろうとその派生を調べるときは、「ブラウザから検索」するのですが、一定数以上の人は、iPhoneApp Storeとかから「モンハン4」って検索してアプリをインストールするのです。

衝撃的でした。
たぶん、専用ブラウザを使うのと同じ感じなのかなと思っています。


何かを調べるときは、App Storeで検索して専用のアプリケーションをローカルにインストールする。
そして最近はどこもかしこもスマホ!スマホ!


そしてこれは、Webの「アプリケーションをローカルにインストールする必要がない」というメリットと全く逆です。
スマホのネイティブアプリ開発が優先される時代なのに、一方ではWebでなんでもやってやろうって流れもある。


自分でも上手く言葉にできないのですが、この部分がなんか気持ち悪いなあって思ってブログを書きました。
なんか意見もらえると嬉しいです。


以上、長文駄文失礼しました。
(ブログの更新度を上げていきたい。)

rbenvでrubyを最新バージョンにアップデートする

メモ。
ruby 2.0.0-p0 を使っていたので、2.0.0-p247 に上げた。


まず、

$ rbenv install -l

とか

$ ruby-build --definitions

で、インストールできる ruby のバージョンを確認


2.0.0-p247 があったら

$ rbenv install 2.0.0-p247

で、インストール


なかったら、ruby-build のバージョンを上げないといけない。(参考
ruby-build を Homebrew で入れていたので、

$ brew upgrade ruby-build

ってした。


でも、なぜか 2.0.0-p247 がない。


Homebrew のアップデートもしてみた。

$ brew update

これでもなぜか ruby-build はアップデートされなかった。

(ちなみに、brew update と update の違いは、)
  update:homebrew 自体を最新版にし、管理しているパッケージも最新版にする
  upgrade:管理しているパッケージのみを最新版にする


どうやら、Homebrew では ruby-build は一旦アンインストールしてからインストールしないと最新版が入らないとのこと。(Rubyコミッターの人が言ってた)

$ brew uninstall ruby-build
$ brew install ruby-build

で、最新版が入った。


めでたしめでたし


(パーフェクトRuby読みます)

RailsのViewファイルのインスタンス変数をJavaScriptから参照する

メモ。

別にRailsに限ったことではなくて、Webアプリケーションフレームワークとかを使っていて、テンプレートファイルで使ってる変数をJavaScriptから参照するやり方。
検索結果をlocalStorageでキャッシュしておきたいなど、いくつかの場面で必要になるかと思います。


(例)Viewファイルで、

<script>
    var piyo_id = <%= @piyo.id %>;
</script>

<div id="hoge">
    <%= render "hoge/hoge_piyo", piyo: @piyo %>
    <!-- いろいろ -->
</div>

って書くしかないのかと思ったけど、もっといい方法があった。

そう、HTML5の独自データ属性(data-* こんなやつ)。

Viewファイルで

<div id="hoge" data-hoge-id="<%= @piyo.id %>">
    <%= render "hoge/hoge_piyo", piyo: @piyo %>
    <!-- いろいろ -->
</div>

ってして、外部JSファイルから

var e = document.getElementById('hoge');
var piyo_id = e.getAttribute('data-hoge-id');

ってすればよかった。

ちなみに、jQueryだと、

var piyo_id = $('#hoge').data("hoge-id");

で、
Minified.jsだと、

var piyo_id = $('#hoge').get("%hoge-id");

こう。

以上。

最軽量jQuery互換ライブラリ、Minified.jsを使ってみた

Webサービスを作る上で必ずと言っていいほどお世話になっていたjQuery
今回、スマートフォン向けサ−ビスを作る上で、jQueryはちょっと重たいかなってことで、Minified.jsというライブラリを使ってみた。

Minified.jsは今年の7月にβ版がリリースされたばかりのjQuery互換のライブラリ。
jQuery互換の軽量ライブラリは他にもZepto.jsもあるが、Minified.jsは最軽量で容量は4KB。(jQuery 2.0.3は29KB、Zepto.js 1.0は9.7KB。いずれもgzip圧縮後。)
しかも、Zepto.jsよりもバグが少ない(らしい)。

使い方は、公式サイトからダウンロードして読み込み、

var MINI = require('minified'); 
var $ = MINI.$, $$ = MINI.$$, EE = MINI.EE;

って書いたらあとはjQueryのように

$(function() {

});

の中に書いていく。

使っていて気づいたのが、

  • jQueryのメソッドチェーンが使えない
    • もちろん完全にjQuery互換でないので使えないメソッドがある
  • CSS3のセレクタ(nth-childとか)が使えない

たぶん。

addClass()、removeClass()はそれぞれ、

.set('+hoge');
.set('-hoge');

って書くとか、jQueryから乗り換えると修正する箇所も多いと思う。

1番困ったのがDOMを追加するところで、

.after("<div class='hoge'>test</div>");

みたいなことができなくて、

.addAfter(EE('div', {'@class': 'hoge'}));

のような変わった記法を使わないといけない。
たぶん。(他の方法があったら教えて下さい!)

だいたいこんな感じ。

jQueryに依存してるライブラリ、フレームワークも多いのでそこらへんMinified.jsに変更して動くのかなとか思う。(たぶん多くの場合無理だと思う。)

スマホ向けサービスでパフォーマンスを気にする場合で、jQueryっぽい書き方がしたい場合は導入するのはアリなのかなと思う。

日本語ドキュメントほしい。。

Sublime Text 2でHaml, Sass, CofeeScriptを保存時に自動コンパイル

みんな大好きHaml、Sass(SCSS)、CoffeeScriptを、Sublime Textで保存時に自動でコンパイルする。

まずは、Package Controll((Ctrl or ⌘) + Shift + P)から、SublimeOnSaveBuild をインストール。
次に、メニューから、Sublime Text 2 → Preference → Package Settings → SublimeOnSaveBuild → Settings - User を選択。

開いたファイルに以下のように記述。

{
    "filename_filter": "\\.(css|js|sass|less|scss|haml|coffee)$",
    "build_on_save": 1
}


次は、メニューから、Tools → Build System → New Build System を選択。
僕はMacなのでこんな感じ。
Windowsの人はosxのところをwindowsとかにすればいいと思う。
pathにhamlコマンドのパスを書く。

{
  "cmd": "haml",
  "selector": "source.haml",
  "working_dir": "${file_path}",
        
  "osx":
  {
    "cmd": ["haml", "$file", "$file_path/$file_base_name.html"],
    "path": "/users/ikasama/.rbenv/shims:$path"
  }
}

haml.sublime-build)


SASS、CoffeeScriptも同様。
メニューから、Sublime Text 2 → Preference → Package Settings → SublimeOnSaveBuild → Settings - User を選択して、こう。

{
  "cmd": ["sass", "--update", "$file:${file_path}/${file_base_name}.css", "--stop-on-error", "--no-cache"],
  "selector": "source.sass, source.scss",
  "line_regex": "Line ([0-9]+):",

  "osx":
  {
    "path": "/usr/local/bin:$PATH"
  },
}

(sass.sublime-build)

{
  "cmd": "coffee",
  "selector": "source.coffee",
  "working_dir": "${file_path}",
 
     
  "osx":
  {
    "cmd": ["coffee", "-c", "$file"],
    "path": "/usr/local/bin:$PATH"
  }
}

(coffee.sublime-build)


これで保存した時に自動でコンパイルできるようになった。
快適快適〜。

コードギアス 反逆のルルーシュを見るために

ゆーすけべーさんのブログ記事を読んで、PHPで動画をバッファリング無しで見るスクリプト書いてみた。



実行する。

$ mkdir ./Anime
$ php get_anime.php http://eyeonanime.com/code-geass/


コードギアスおもしろいですよね。

MacでCUDAなMEXファイルをコンパイルする

MATLABで書かれたフィルタリングをするプログラムが遅かったので、C言語化してGPUで計算させることにしました。

MEXファイルとはMATLABから呼び出せるC言語のファイルで、CUDAとはNVDIA社製のGPGPU統合開発環境です。

実行環境はOS X(10.8.2)、MATLAB(R2012b)、CUDA(5.0)です。

 

公式サイトによると、CUDAなMEXファイルを動かすのにはプラグインが必要とのことですが、ダウンロードのリンクをクリックするとDeveloperのトップページにリダイレクトし、そこを探してもプラグインは見つかりません。

MATLABGPUを扱う場合、Parallel Computing Tool Boxを使うのが標準なのかなと思います。

 

しかし、先にMATLABのプログラムをMEX化しちゃったので(これだけで約5倍速くなった)せっかくなのでCUDAを使います。

ここからプラグインを入手することができました。

nvmexというperlのスクリプトです。

これは32 bitのWindows用のもので、設定ファイルを変えてMacで動くようにしようと思ったのですが、どうもうまくいかない…

そこで、nvmexは内部的にnvcc(CUDAのコンパイル) + mex(MEXファイルをコンパイル)しているだけだったので、コンパイルオプションをいろいろ試してくと、コンパイルに成功しました。

 

他にもOpenMP + MEXもやってみたのですが、どうも思っているパフォーマンスが出ない…

MATLABプログラムを高速化するにはParalell Computing Tool Boxを使うか、MEXではなく、普通にC言語化してCUDAなりOpenMPなりを使うのが良さそうです。