Download as PDF, PPTX
![WebSharper 内でベタ書きすると
F# の例
[JavaScript]
let rec gameLoop () =
async {
do hoge()
do! Async.Sleep (1000 / fps)
do! gameLoop ()
}](https://image.slidesharecdn.com/fpstudy2-121124195022-phpapp02/85/F-Erlang-40-320.jpg)
![Canvas 使って何か書く
[JavaScript]
let hogeCanvas width height =
let element = Tags.NewTag Canvas []
let canvas = AsCanvasElement element.Dom
canvas.Width - width
canvas.Height - height
let context = canvas.GetContext 2d
Async.Start (gameLoop ())
Div [ Width (string width); Attr.Style float:left ] - [
Div [ Attr.Style float:center ] - [
element
|! OnMouseMove (fun _ arg -
let offset = JQuery.Of(element.Dom).Offset()
piyo offset arg.X arg.Y
)
]
]](https://image.slidesharecdn.com/fpstudy2-121124195022-phpapp02/85/F-Erlang-41-320.jpg)
![例：プレイヤー機の座標を送受信
Erlang 側 (受信部分)
websocket_handle({text, Msg}, Req, _State) -
{[{_X, X}, {_Y, Y}]} = jiffy:decode(Msg),
{ok, Req, {X, Y}};
websocket_handle(_Any, Req, State) -
{ok, Req, State}.](https://image.slidesharecdn.com/fpstudy2-121124195022-phpapp02/85/F-Erlang-65-320.jpg)
![例：プレイヤー機の座標を送受信
Erlang 側 (更新および送信)
websocket_info(tick, Req, {X, Y}) -
Data = jiffy:encode({[{x, X}, {y, Y}]}),
{reply, {text, Data}, Req, {X, Y}, hibernate};
websocket_info(_Info, Req, State) -
{ok, Req, State, hibernate}.](https://image.slidesharecdn.com/fpstudy2-121124195022-phpapp02/85/F-Erlang-66-320.jpg)
![例：プレイヤー機の座標を送受信
F#側
[JavaScript]
let initSocket context =
let (|Text|Binary|) (data:obj) =
match data with
| :? string as text - Text text
| binary - Binary (AsArrayBuffer binary)
let socket = WebSocket(ws://localhost:19860/shooting)
socket.Onopen - (fun () -
PlayerShip.init | Json.Stringify | socket.Send
)
socket.Onmessage - (fun msg -
drawBackground context
match msg.Data with
| Text text -
text
| (Json.Parse AsInfo)
| draw context
| Binary _ - ()
)
socket](https://image.slidesharecdn.com/fpstudy2-121124195022-phpapp02/85/F-Erlang-67-320.jpg)
F#+Erlangで簡単なシューティングゲームを作ってみている
- 1. F# と Erlangで簡単なゲームを作って みている pocketberserker 2012 年 11 月 24 日
- 2. お前誰よ？ • 中山 /なかやん / ぺんぎん / @pocketberserker • どこにでもいるふつーのサーガ大学院生 • F# / Haskell / Erlang / Scala / TDD / テスト • 関数プログラミング≒私の人生を変えたもの • FSharpx/Scalaz のこんとりびゅーたらしい…
- 3.
- 4.
- 5.
- 6. 突然ですが質問です 実用っぽい英単語はどれ？ • practical • functional
- 7. 突然ですが質問です 実用っぽい英単語はどれ？ • practical • functional • applicative
- 8.
- 9.
- 10.
- 12.
- 13.
- 14. • 理論理論したことは話せません、たぶん • 突っ込みは随時どうぞ •本発表に登場する一部物語はそこそこフィク ションです
- 15.
- 16. あるときのこと 「ぺんぎん君、君の技量を測るために作って欲し いものがあるのだが」
- 17.
- 18.
- 19. 渡された仕様 • お題は簡単なシューティングゲーム • Winか Mac で動くことが望ましい
- 20. 渡された仕様 • お題は簡単なシューティングゲーム • Winか Mac で動くことが望ましい • 言語、ライブラリ、フレームワーク、プラッ トフォームすべて自由
- 21.
- 22.
- 23. 当初の選択肢 • Unity3D +C# + F# （外部ライブラリ）
- 24. 当初の選択肢 • Unity3D +C# + F# （外部ライブラリ） • F# + WebSharper
- 25. 当初の選択肢 • Unity3D +C# + F# （外部ライブラリ） • F# + WebSharper • Scala + Play 2 + 何か
- 26. 当初の選択肢 • Unity3D +C# + F# （外部ライブラリ） • F# + WebSharper • Scala + Play 2 + 何か • フル Haskell でがんがる
- 27. 結局、F# F# したいのでF# + WebSharper を選択
- 28.
- 29. F# って？ • Microsoftが開発したマルチパラダイム言語
- 30. F# って？ • Microsoftが開発したマルチパラダイム言語 • 静的型付け、関数パラダイム主体
- 31. F# って？ • Microsoftが開発したマルチパラダイム言語 • 静的型付け、関数パラダイム主体 • Scala より型推論が強力
- 32. F# って？ • Microsoftが開発したマルチパラダイム言語 • 静的型付け、関数パラダイム主体 • Scala より型推論が強力 • 3.0 がこの前でました
- 33.
- 34.
- 35. WebSharperって？ • 本家曰く “theworld’s most versatile web and mobile development framework for .NET”
- 36. WebSharperって？ • 本家曰く “theworld’s most versatile web and mobile development framework for .NET” • F# で書ける
- 37. WebSharperって？ • 本家曰く “theworld’s most versatile web and mobile development framework for .NET” • F# で書ける • JavaScript を書かずに JS の機能が使える
- 38. WebSharperって？ • 本家曰く “theworld’s most versatile web and mobile development framework for .NET” • F# で書ける • JavaScript を書かずに JS の機能が使える • HTML5 などもいける
- 39. 例：よくあるゲームループ Unity3D(C#) の例 public class Hoge : MonoBehaviour { void Update() { hoge(); } }
- 40. WebSharper 内でベタ書きすると F# の例 [JavaScript] let rec gameLoop () = async { do hoge() do! Async.Sleep (1000 / fps) do! gameLoop () }
- 41. Canvas 使って何か書く [JavaScript] let hogeCanvas width height = let element = Tags.NewTag Canvas [] let canvas = AsCanvasElement element.Dom canvas.Width - width canvas.Height - height let context = canvas.GetContext 2d Async.Start (gameLoop ()) Div [ Width (string width); Attr.Style float:left ] - [ Div [ Attr.Style float:center ] - [ element |! OnMouseMove (fun _ arg - let offset = JQuery.Of(element.Dom).Offset() piyo offset arg.X arg.Y ) ] ]
- 42.
- 43. こんな感じで • html やJS の知識を仕入れながら書く
- 44. こんな感じで • html やJS の知識を仕入れながら書く • F#の知識が少しあればそれなりに書ける
- 45. こんな感じで • html やJS の知識を仕入れながら書く • F#の知識が少しあればそれなりに書ける • 副作用云々は、作るもの次第で考えたほうが いいと思う
- 46. こんな感じで • html やJS の知識を仕入れながら書く • F#の知識が少しあればそれなりに書ける • 副作用云々は、作るもの次第で考えたほうが いいと思う • ジェネレートされた JS コードは読まないほ うがいい
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53. あるとき なかやん「あー、Erlang で何か書きたいなー」 人物 N「ならゲームのサーバ側Erlang にすれば？」
- 54. あるとき なかやん「あー、Erlang で何か書きたいなー」 人物 N「ならゲームのサーバ側Erlang にすれば？」 なかやん「そ れ だ」
- 55.
- 56.
- 57. Erlang とは • エリクソンが開発 •並行処理指向、関数型 (?)、動的型付け
- 58. Erlang とは • エリクソンが開発 •並行処理指向、関数型 (?)、動的型付け • コンパイル方式 (型の方面ではないけど)
- 59. 使用するライブラリ • rebar:ビルドツール • cowboy:軽量ウェブサーバ •jiffy:JSON パーサ
- 60. 使用するライブラリ (選定理由) • rebar:ないと始まらない •cowboy:websocket が書きやすそうだった • jiffy:速いっぽい
- 61. もっと詳しい話とか voluntas さんの “継続開発のススメErlang/OTP 編” https://gist.github.com/9ee65f0dfa9b7dd78fde
- 62.
- 63. 送受信に使う json データ { x : 0, y : 0 }
- 64. 例：プレイヤー機の座標を送受信 Erlang 側 (初期化部分) websocket_init(_Any, Req, _Opts) - Interval = round(1000 / 30), timer:send_interval(Interval, tick), Req2 = cowboy_req:compact(Req), {ok, Req2, undefined, hibernate}.
- 65. 例：プレイヤー機の座標を送受信 Erlang 側 (受信部分) websocket_handle({text, Msg}, Req, _State) - {[{_X, X}, {_Y, Y}]} = jiffy:decode(Msg), {ok, Req, {X, Y}}; websocket_handle(_Any, Req, State) - {ok, Req, State}.
- 66. 例：プレイヤー機の座標を送受信 Erlang 側 (更新および送信) websocket_info(tick, Req, {X, Y}) - Data = jiffy:encode({[{x, X}, {y, Y}]}), {reply, {text, Data}, Req, {X, Y}, hibernate}; websocket_info(_Info, Req, State) - {ok, Req, State, hibernate}.
- 67. 例：プレイヤー機の座標を送受信 F#側 [JavaScript] let initSocket context = let (|Text|Binary|) (data:obj) = match data with | :? string as text - Text text | binary - Binary (AsArrayBuffer binary) let socket = WebSocket(ws://localhost:19860/shooting) socket.Onopen - (fun () - PlayerShip.init | Json.Stringify | socket.Send ) socket.Onmessage - (fun msg - drawBackground context match msg.Data with | Text text - text | (Json.Parse AsInfo) | draw context | Binary _ - () ) socket
- 68.
- 69. Erlang を使ってみた感想とか • OTPを使えば実装したいことのほうに集中で きる
- 70. Erlang を使ってみた感想とか • OTPを使えば実装したいことのほうに集中で きる • 慣れればもっとさくっと書けると思う
- 71. Erlang を使ってみた感想とか • OTPを使えば実装したいことのほうに集中で きる • 慣れればもっとさくっと書けると思う • 高階関数あるし関数型なのだろう・ ・・たぶん
- 72.
- 73. ちなみに • Erlang はじめて3 週間くらいだった
- 74. ちなみに • Erlang はじめて3 週間くらいだった • 基本は飛行機本と web 上にあるサンプルで 学ぶ
- 75. ちなみに • Erlang はじめて3 週間くらいだった • 基本は飛行機本と web 上にあるサンプルで 学ぶ • 後はひたすら書く
- 76.
- 77. ではデモ・ ・・といきたかったけど 間に合いませんでした orz
- 78. まとめ • 手段を目的化して FPを学ぶのもありだと思 います • 自分にあった関数型言語を見つける（当たり 前だけど FP=Haskell ではない） • 気になったら理論へ進む • JavaScript は生成するもの（キリッ
- 79.