※ブログのドメイン変更によりはてブが消えてしまいましたが、450はてぶくらいついてました。こちらが当時の痕跡

2014年の秋から`@mogulla3`と定期的にインフラ関連技術の勉強会をやってきましたが、
インプットの勉強会だけでは飽き足らず、いつしかサービスを作る中でインフラ関連技術を駆使し勉強したいと思うように…

そして、普段使っているVimを題材に、
vimの設定をブラウザ上で即体感できるサービス Vim::Factory
を開発しました。

本記事はVim::Factoryの簡単な紹介と技術的な仕組みについて記述しています。

Vim::Factoryはこちら。
http://vimfactory.com/

1. Vim::Factoryについて

1-1. Vim::Factoryってなに？？

Vim::Factoryは、選択したVimの設定を、ブラウザ上で「即体感」できるサービスです。
数多くあり複雑なVimの設定を容易にし、お気に入りのVim探しをサポートすることを目指しています。

1-2. なんで作ったの？

Vimの設定ってたくさんあってどれを選んでいいかわからなかったり、
設定したもののどう変わったかイマイチわからなかったりしませんか？

Vimの設定がどのように反映されるか、もっと簡単に体験したいと考えたからです。

あと、例えばGithubで100star以上をつける人のVimをブラウザ上で体験できたらいいなと思っていて、
それを実現のための第一歩としてこのサービスを作りました。

1-3. このサービスの最大の特徴は？

このサービスの最大の特徴はなんといっても「ブラウザ上でVimが体感できること」です。

今まではVimの設定を試そうと思ったら、ネットで調べて自分のVimに反映させて…という作業が必要でしたが、
ブラウザ上で設定を即体感するという新しい体験を提供するために力を注いできました。
その実現方法については、後述しています。

1-4. 紹介動画

詳しくは、実際に試してもらうのが早いと思いますが、簡単な操作動画を用意してみました。
モバイルからこのサービスはちょっと使えないので、モバイルで読んでいる方は動画でお楽しみください(笑)
www.youtube.com

2. Vim::Factoryの技術について

ここからVim::Factoryの技術について一部ではありますがご紹介します。

2-1. ブラウザ上でのVimを実現した技術

ブラウザ上でVimを実現しようと思うと、ぱっと思いつくのはJavaScriptでVimそのものを実装してしまおうというものかもしれません。
ですが、JSでVimを実装することってどれくらい難しいでしょうか？
少なくともぼくにはそんなことはできませんし、できたとして質の悪いものになってしまうと思います。

そこで思いついたのが、一般的なターミナルソフトと同様にサーバ上でvimを起動し、
そのターミナル情報をブラウザ上で表示するという方法です。
この方法であれば自らVimを実装せずともVimを再現できます。イメージは下記のとおりです。

また、サービスとして上記を行うには、接続してきたユーザごとにVimを用意する必要があります。

これらを実現するために利用したのがDockerとWebSocketです。
dockerコンテナ上でVimを起動し、そのターミナル情報をWebSocketでブラウザに送信するようにしました。

dockerはコンテナ型の仮想化なので起動がとてもはやく、
httpのリクエストが来てからdockerコンテナを立ち上げても十分なほどのはやさをもっています。

2-2. 全体構成

システムの全体構成は以下のような感じです。
※実際の役割は図のとおりですが、サーバはこんなに多くありません。

2-3. 利用した技術とかツールのまとめ

振り返りも兼ねて利用した技術・ツールを一覧にまとめておきます。

• Ruby
• Sinatra
• thin
• node.js
• Websocket
• memcached
• docker
• nginx
• centos7
• Ansible
• Vagrant
• gitlab
• mackerel
• slack
• esa.io(ドキュメント管理)

3. まとめ

このサービスで一番苦労したことはやっぱりブラウザ上でのVimの実現部分です。
当初、このサービスを思いついた時、実現不可能だ…とあきらめました。
というのもJS（アプリケーションサイド）でVimをどう実装しようかしか考えていなかったからです。

ですが、ふとしたときに上記の別の方法（インフラサイド）での実現方法を思いつきました。

このサービスを作るきっかけは、インフラ技術のインプット勉強だけでは飽きたらず、
サービスを開発・運用していくなかでインフラ技術を磨いていきたいというものでしたが、
インプットの勉強があってこそインフラサイドからの実現方法を見つけられたようにも思いました。

今後、運用を通してさらなるパワーアップができたらいいなと思います。

4. 最後に

最後になりますが、 完全な趣味で作ってしまったサービスで、今後どのように展開していこうか何も考えていません。
まずは、このように公開し皆様に利用して頂いて、フィードバックなど頂いてから考えようと思っています。

サービスに関するご意見等あれば、Twitterやメールで書いてくれると大変嬉しいです。

お問い合せはこちら:

• Twitter: もーすけ (@mosuke5) | Twitter or もぐらマン (@mogulla3) | Twitter
• e-mail: ilab.vimfactory+info@gmail.com

では、みなさんもVimライフを楽しみましょう！

Vim::Factoryはこちら。
http://vimfactory.com/