Wandbox とは

普通の C++ 使いは日常的に仕様書を読んでいる

その際、実際にコンパイラを動かして試したくなる場合がある

例:

  • 「ISO/IEC 14882:2011 における 3.4.2/2 が結果がどうなるのかよく分からないな」
  • 「現行の gcc/clang でどういう動作をするのか試してみたい」

普通の C++ 使いは日常的に paper を読んでいる

その際、実際にコンパイラを動かして試したくなる場合がある

例:

  • N3648 が gcc で実装されたのか」
  • 「最新の gcc でどういう動作をするのか試したい」

普通の C++ 使いは日常的にコンパイラのバグを報告している

そこで Wandbox

Wandbox とは

Wandbox とは

特徴

  • C++ 対応がすごい
    • gcc, clang の様々なバージョン
    • gcc HEAD, clang HEAD にも対応(毎日ビルド)
    • Boost, Sprout ライブラリに対応
    • 多彩なコンパイルオプション
  • 他の言語にもいろいろ対応
  • リアルタイム出力
  • キーバインディング選択
  • パーマネントリンクと Twitter への投稿
  • シンタックスハイライト
  • はやい(確信)

【重要】普通の C++ 使い以外の方もお使い頂けます【必読】

C++/Python/Haskell/etc などの言語を勉強するとき

でもコンパイラとかの入れ方が分からない/入れるのがめんどい

そこで Wandbox

  • コード入力→実行のサイクルを繰り返しやすい

    →勉強に最適

  • 分からないことがあったら気軽に Twitter に投稿できる

    →きっと誰か答えてくれるはず

誰かの質問にコードで答えるとき

例:

Q.「vector には push_back して clear してもメモリが解放されないバグがある!C++ はクソだ!」

A.「キャパシティの概念を理解しましょう。こんな感じ

Wandbox を使おう!

要望やバグについて

Wandbox の中身

目次

  • 牛舎と犬小屋の関係
  • 牛舎
  • 犬小屋
    • Yesod
    • Templates
    • EventSource
  • 苦労話

牛舎と犬小屋の関係

  • 牛舎と犬小屋の関係
  • 牛舎
  • 犬小屋
    • Yesod
    • Templates
    • EventSource
  • 苦労話

牛舎と犬小屋の関係

Wandbox は、大きく2つのモジュールに分けられる

  • 牛舎(cattleshed
    • ソースを与えるとコンパイルや実行をして結果を返してくれるモジュール
    • Wandbox のコア
    • @kikairoya
    • C++ で書かれてる
    • 読めない
  • 犬小屋(kennel
    • 普通の Web サーバ
    • Wandbox の UI
    • @melponn
    • Haskell で書かれてる
    • 読めない
牛舎と犬小屋の関係

牛舎

  • 牛舎と犬小屋の関係
  • 牛舎
  • 犬小屋
    • Yesod
    • Templates
    • EventSource
  • 苦労話

牛舎

  • よく分からない仕組みで動いてる
  • 基本的にはコンパイルして実行するだけ
  • ほんとに何でもできてしまうと困るので、制限を掛けたりしている
    • chroot を使って環境を閉じ込める
    • 実行時間が長いなら kill
    • リソース使用量が多いなら kill
    • 標準出力量が多いなら kill

牛舎

詳しいことは @kikairoya を問い詰めよう

牛舎

犬小屋 - Yesod

  • 牛舎と犬小屋の関係
  • 牛舎
  • 犬小屋
    • Yesod
    • Templates
    • EventSource
  • 苦労話

犬小屋 - Yesod

Yesod という Haskell の Web フレームワークで作ってる

なぜなら

  • あの頃はまだ純粋な Haskell 信者だった
    • 型安全すごい
    • 関数合成楽しい
    • モナドさん可愛い
  • Haskell できますって言いたかった
    • Haskell できるとかっこ良さそう
    • Haskell できると彼女できるという噂が

犬小屋 - Yesod

Yesod という Haskell の Web フレームワークで作ってる

実際のところ

  • あの頃はまだ純粋な Haskell 信者だった
  • →副作用を知ってから Haskell はただの難しい言語
    • あの純粋な気持ちはどこへ
    • とはいえ、やはりいろいろ便利な言語ではある
  • Haskell できますって言いたかった
  • →この程度だと Haskell できますとか言えない
    • 未だにモナドの作り方分からない
    • 未だに型の読み方が分からない
    • それでもこんな Web アプリケーションぐらいなら書ける
    • 彼女はできませんでしたが嫁はできました

犬小屋 - Templates

  • 牛舎と犬小屋の関係
  • 牛舎
  • 犬小屋
    • Yesod
    • Templates
    • EventSource
  • 苦労話

犬小屋 - Templates

HTML, CSS, JavaScript

  • それぞれ hamlet, lucius, julius という Yesod のテンプレート言語がある

犬小屋 - Templates

hamlet

<div .span2 #editor-settings>
  <label .row-fluid>choose key binding:
  <select .span12 size=3>
    <option value="ace" selected>default
    <option value="vim">Vim
    <option value="emacs">Emacs
  <label .checkbox>
    <input type="checkbox" value="use-legacy-editor">Use Legacy Editor
  • インデントベースの HTML
  • class と id の省略表記
  • 直接書いても辛くない

犬小屋 - Templates

hamlet

<div class="span2" id="editor-settings">
  <label class="row-fluid">choose key binding:</label>
  <select class="span12" size=3>
    <option value="ace" selected>default</option>
    <option value="vim">Vim</option>
    <option value="emacs">Emacs</option>
  </select>
  <label class="checkbox">
    <input type="checkbox" value="use-legacy-editor">Use Legacy Editor</input>
  </label>
</div>
  • HTML はつらい

犬小屋 - Templates

hamlet

<div .row-fluid>
  <div #compile-options>
    $forall info <- compilerInfos
      <div compiler="#{verName $ ciVersion info}">
        $forall sw <- ciSwitches info
          ^{makeSwitch (verName (ciVersion info)) sw}
  • Haskell コードの埋め込み
  • 最低限の制御構文

犬小屋 - Templates

lucius

@textcolor: #ccc;
body {
  color: #{textcolor};
  a {
    color: #{textcolor};
  }
}
  • 大体ただの CSS
  • CSS コピペでも動くレベル
  • 変数も宣言できる

犬小屋 - Templates

lucius

body {
  color: #ccc;
}
body a {
  color: #ccc;
}
  • こんなコードになる

犬小屋 - Templates

julius

$(function() {
  var result_container = new ResultContainer('#result-container')
  result_container.onfinish = function() {
    $('#compile').show();
    $('#compiling').hide();
  };
  ...
  var compiler = new Compiler('#compiler', '#compile-options');
  compiler.set_compiler(#{defaultCompiler});
});
  • ほぼ JavaScript
  • Haskell コードを埋め込める

犬小屋 - EventSource

  • 牛舎と犬小屋の関係
  • 牛舎
  • 犬小屋
    • Yesod
    • Templates
    • EventSource
  • 苦労話

犬小屋 - EventSource

リアルタイム出力

main = mapM_ print [1..]
  • コードの実行中に出力が表示される
  • フィードバックが早いので手を止めずに済む

犬小屋 - EventSource

リアルタイム出力の仕組み

  • EventSource を使ってる
  • 要するに単なるロングポーリング
    • 普通の HTTP はサーバがレスポンスを返したら終わり
    • EventSource はレスポンスを最初は途中までしか返さない
    • 受信が終わってないのでクライアントはデータを待ち続ける

犬小屋 - EventSource

普通のデータの受信

GET /wandbox HTTP/1.1
      
        HTTP/1.1 200 OK
Content-Type: application/json
Content-Length: 221

{“hoge”: “fuga”, ...}

犬小屋 - EventSource

ロングポーリングによる受信

GET /wandbox/source HTTP/1.1
      
        
          HTTP/1.1 200 OK
Content-Type: text/event-stream
Transfer-Encoding: chunked

001A
data: hogefuga_hogefuga_ho

0018
gefuga_hogefuga
data: c

0010
constexpr

0

犬小屋 - EventSource

ロングポーリングによる受信

GET /wandbox/source HTTP/1.1
      
        data: hogefuga_hogefuga_hogefuga_hogefuga
data: constexpr

犬小屋 - EventSource

Q. WebSocket 使わないの?

A. この型の意味を理解できる者だけが WebSocket を使いなさい


        intercept :: Protocol p
                  => (Request -> WebSockets p ())
                  -> Request
                  -> Maybe (Source (ResourceT IO) ByteString -> Connection -> ResourceT IO ())
      

苦労話

  • 牛舎と犬小屋の関係
  • 牛舎
  • 犬小屋
    • Yesod
    • Templates
    • EventSource
  • 苦労話

苦労話

まとめ

  • Wandbox は牛舎と犬小屋が協調して動いてる
  • 牛舎は @kikairoya を問い詰めよう
  • 犬小屋は普通の Web サーバ
  • 犬小屋を建てるのはなかなか大変だった

Wandbox のサーバ構成

目次

  • 全体構成
    • Mighttpd
  • サーバ管理
    • Chef
    • Deploy

全体構成

  • 全体構成
    • Mighttpd
  • サーバ管理
    • Chef
    • Deploy

全体構成

ユーザが Run すると…

  • Mighttpd
    • →犬小屋
      • →牛舎
        • →各種コンパイラ
        • ←各種コンパイラ
      • ←牛舎
    • ←犬小屋
  • ←Mighttpd

Mighttpd って何?

全体構成 - Mighttpd

  • HTTP サーバ
  • Haskell 製の nginx みたいな感じ
  • 静的ファイルを高速転送したり
  • リバースプロキシしたり
    • これ目的で使ってる

全体構成 - Mighttpd

全体構成 - Mighttpd

全体構成 - Mighttpd

全体構成 - Mighttpd

サーバ管理 - Chef

  • 全体構成
    • Mighttpd
  • サーバ管理
    • Chef
    • Deploy

サーバ管理 - Chef

  • サーバの構成管理には Chef を使ってる
  • これを使って Mighttpd 入れたり Wandbox 入れたり各種コンパイラ入れてる
  • 理論的にはサーバが死んでも簡単に復元できるはず
    • ※ただし SQLite のデータを除く
    • (パーマネントリンクを作るためにコードや結果などを SQLite に入れてる)
  • melpon.org の Cookbook はここ: melpon/chef-melpon.org

サーバ管理 - Chef

Chef で入れているレシピの例

  • スワップファイル
  • Wandbox の実行環境
    • ユーザ作成
    • github から取得
    • ビルド
    • デーモンとして起動(Upstart を使ってる)
  • 各種コンパイラ
    • GCC, Clang, Python, Ruby
      • ソースからビルド
    • GCC-HEAD, Clang-HEAD, Erlang-HEAD
      • 最新リポジトリから取ってきてビルド
      • ビルドを毎日行うように cron を設定

サーバ管理 - Deploy

  • 全体構成
    • Mighttpd
  • サーバ管理
    • Chef
    • Deploy

サーバ管理 - Deploy

  • GitHub の Post-Receive Hooks を使ってる
  • GitHub リポジトリへの push が発生したら指定した URL を叩いてくれる
  • その URL を受ける口として melpon/ghwebhook というサーバを用意
    • Python 製
  • ghwebhook は melpon/wandbox の master ブランチに push されたら特定のスクリプトを実行する
  • スクリプト内で wandbox を pull してビルドして再起動

サーバ管理 - Deploy

デプロイを試してみる

  • このセッション資料も ghwebhook で管理されている
  • なので変更して push すると反映されるはず
  • この辺のテキストを弄ってみたよーん

まとめ

  • melpon.org サーバのフロントには Mighttpd が居て、そこからリバースプロキシをしている
  • サーバは Chef で管理されている
    • コンパイラも Chef を使って管理
  • デプロイには GitHub の Post-Receive Hooks を使っている

感想

  • サーバ管理が一番面倒だった
  • 正直 Wandbox 作るより時間が掛かったと思う
  • が、手間を掛けただけあって大分楽になった

質問

<Thank You!>

Important contact information goes here.