1 of 43

C++で

簡単Webアプリゲーム

@hotwatermorning

2 of 43

自己紹介

  • @hotwatermorning

​

  • 札幌C++勉強会運営

​

  • PStade.Ovenコミッタ

​

  • DTMやったりも。

3 of 43

C++でwebアプリゲーム？

4 of 43

C++でwebアプリゲーム？

  • それってLLの方がいいんじゃない？

5 of 43

C++でwebアプリゲーム？

  • それってLLの方がいいんじゃない？
  • enchant.jsとかでも充分ゲーム作れるし？

6 of 43

C++でwebアプリゲーム？

  • それってLLの方がいいんじゃない？
  • enchant.jsとかでも充分ゲーム作れるし？

そのとおり！

7 of 43

C++でwebアプリゲーム？

  • それってLLの方がいいんじゃない？
  • enchant.jsとかでも充分ゲーム作れるし？

そのとおり！

でもちょっと待って！

8 of 43

C++でwebアプリゲーム？

  • C++でも作れます！

9 of 43

  • Wt
  • Native Client

10 of 43

Wt

11 of 43

Wt

  • C++で書かれたWebアプリケーションフレームワーク

12 of 43

Wt

C++によるAjax Webアプリケーションフレームワーク。

GPLでライセンスされている。

多くのWebアプリケーションフレームワークがJavaやPHP,Ruby,Pythonなど、ハードウェアの命令セットとは、ちょっと距離を置いた言語で書かれているのに対して、wtは、C++で書かれている点が特徴的である。

インタプリタや言語VMなどを搭載することが困難かもしれない、組み込みシステムをユーザとして想定している。

プログラミングパラダイムは、サーバ上でGUI部品のツリーを構築して、イベントハンドラを登録するというもので、SwingやWicketなどと、似ていると思われる。

​

http://d.hatena.ne.jp/keyword/wt

13 of 43

Wt

Qtという、C++のマルチプラットフォームGUIフレームワークに似た仕組みでWebアプリケーションを書ける。

14 of 43

Wt

Demo1 : Hello World

15 of 43

Wt

Demo2 : Painting Demo

16 of 43

Wt

Demo3 : Hangman Game

17 of 43

Wt

Demo3 : Hangman Game

（ちなみに、暇つぶしに最適です。）

18 of 43

Wt

なるほど！C++でもWebアプリケーションが書けるんだね！

19 of 43

Wt

なるほど！C++でもWebアプリケーションが書けるんだね！

わぁい！C++！あかりC++大好き！

20 of 43

・・・

でも、期待してたゲームプログラミングと違う・・・

（会場の皆の心の声）

21 of 43

・・・

もっと動きのあるものをみたいですよね分かります。

22 of 43

Native Client

Run your native code on the web.

23 of 43

NativeClient

  • Googleが開発した、ブラウザでネイティブコードを動かすための技術。

https://developers.google.com/native-client/images/NaclBlock.png

24 of 43

NativeClientとは

  • ブラウザ内でコンパイル済みのコードを実行するため非常に高速。
  • javascript以外の好きな言語でブラウザで動くwebアプリケーションを作成できるようになる(ただし現状C, C++サポートのみ)

25 of 43

Common Use Cases

  • 既存のソフトウェアのコンポーネントをWebアプリケーションに
  • レガシーデスクトップアプリケーションからの移行

​

  • 重い処理を必要とする大規模アプリケーション

​

  • マルチメディアアプリケーション

​

  • ゲーム

26 of 43

Common Use Cases

  • 既存のソフトウェアのコンポーネントをWebアプリケーションに
  • レガシーデスクトップアプリケーションからの移行

​

  • 重い処理を必要とする大規模アプリケーション

​

  • マルチメディアアプリケーション

​

  • ゲーム

27 of 43

Native Client

  • Native Clientの技術によってリアルタイム性の高いゲームを作成することができます。

28 of 43

Native Client

実行に必要になるものは

  • HTML Webページ(*.html)
    • この中の<embed>タグの位置でNative Clientアプリが起動します。

​

  • Native Clientモジュール(*.nexe)
    • 実行されるバイナリです。SDKのPepperというAPIを使用します。

​

  • マニフェストファイル(*.nmf)
    • エンドユーザー環境での命令セットに応じてどのNative Clientモジュールを使用するかを決定するために使用します。

29 of 43

Native Clientの開発

  • GoogleからNative ClientのSDKがダウンロードできます。

https://developers.google.com/native-client/sdk/download

30 of 43

Native Clientの開発

  • zipを解凍したら、SDKのディレクトリに移動して、

​

​

として、それぞれのバンドルをインストールします。

$ ./naclsdk update

31 of 43

Native Clientの開発

  • さらに、現在のディレクトリを「NACL_SDK_ROOT」という名前で環境変数に設定します

32 of 43

Native Clientの開発

  • Chromeのアドレスバーで「about:flags」と打ち込んで、試用運転機能の中からNative Clientを有効にします。

33 of 43

Native Clientの開発

  • ここまでできたら、Native Clientのサンプルが動くはず！
  • pepper_16/examplesに移動して、

​

​

　と実行すると、localhost:5103で

　サーバーが立ち上がって、Native 　　Clientのサンプルがみれます。

$ python httpd.py 5103

34 of 43

Native Clientの開発

  • さて、いくらネイティブと言っても、セキュリティの関係上、なんでもできるわけではありません。

35 of 43

Native Clientの開発

  • さて、いくらネイティブと言っても、セキュリティの関係上、なんでもできるわけではありません。
  • 特にローカルのファイルを直接読み書きしたりはできません。

36 of 43

Native Clientの開発

  • そこで、Netive Clientでは「Pepper」という専用のAPIを用意しています
    • 当然、Native Clientが「NaCl」(=塩)と略されるのに掛けています。

​

https://developers.google.com/native-client/peppercpp/

37 of 43

Native Clientの開発

  • Pepper Plugin-in API(PPAPI)�によって、Native ClientモジュールがHostブラウザやシステムレベルの関数に対して安全で汎用的に通信できるようになっています。

38 of 43

Native Clientの開発

  • Native Clientモジュールは、このPepperを使用して作成します。

39 of 43

Native Client

Demo : 最小構成

40 of 43

Native Client

Demo : ゲーム的な何か

41 of 43

Conclusion

  • というわけでNative Clientによって、�C++でWebアプリケーションゲームが作成できました！

42 of 43

Conclusion

  • WtやNative Clientによって、C++でもWebアプリケーション開発が楽しめそうですね！
  • みんなでやりましょう！

43 of 43

ありがとう

ございました！