1. 作品紹介
ブラックジャック
●●●部 ●●

2. アジェンダ
・自己紹介
!
・アプリ開発の現状
!
・作品のコンセプト
!
・作品の紹介
!
・今後の取り組み

3. About us
Webアプリ
言語 ： Java、PHP、SQL、HTML、CSS、JavaScript
ツール ： Eclipse、Dreamweaver、Illustrator、Photoshop
!
スマホアプリ
言語 ： Java、Objective-C
ツール ： Xcode、Eclipse、Unity、Titanium、Cocos2d-x
!
その他言語
Perl、Python、Ruby、C#など

4. !
!
アプリ開発の現状

5. アプリ開発の現状
・モバイルデバイスの多様化
代表的な物：iPhone、iPad、Androidなど
!
・デバイス毎の違い
デバイス OS 開発言語 開発環境
iPhone,iPad iOS Objective-C Mac OS X
Xcode
Android Android Java Eclipse
ADT Plugin
共通点がない

6. ・OS・開発言語・開発環境が異なることによって
!
製造工数UP・学習コストUP。
時間をかけて作ってもOSが違うだけでアプリは動かない。
!
まじめに両方作ると大変！
アプリ開発の現状

7. !
!
!
作品のコンセプト

8. ・求人トレンド上位
HTML5、iOS、Android
!
・ワンソース・マルチデバイス対応
!
・新しい技術
canvasタグ（HTML5）
WebSocket（リアルタイム通信）
作品コンセプト
求人情報を収集しているサイト
Indeed.com より

9. !
!
!
どうやって？

10. 作品コンセプト
HTML5
フレームワーク
モバイルデバイス
ｉＯＳ Ａｎｄｒｏｉｄ

11. HTML5の特徴
・マルチプラットフォーム対応
!
・W3Cによる標準化
!
・Web系技術者（Webアプリ）知識の活用

12. !
!
!
作品の紹介

13. 作品の内容
・ブラックジャック（トランプゲーム）
!
プレイヤーの目標は、21を超えないように手持ちのカードの点
数の合計を21に近づけ、その点数がコンピュータ（対戦相手）を
上回ることである。
!
カードの点数は、カード1～10ではその数字通りの値であり、ま
た、絵札であるK（キング）、Q（クイーン）、J（ジャック）は10と数
える。

14. 画面の説明
・１Ｐｌａｙｅｒ
コンピュータと対戦します。
!
・２Ｐｌａｙｅｒｓ
他人と対戦します。
（WebSocket使用）
!
詳細はデモでご覧いただきます。

15. コンピュータがカードを引く確率
点数 要素が10個の配列を用意 （TRUE:カードを引く、FALSE：カードを引かない）
19以上 FALSE FALSE FALSE FALSE FALSE FALSE FALSE FALSE FALSE FALSE
18 TRUE FALSE FALSE FALSE FALSE FALSE FALSE FALSE FALSE FALSE
17 TRUE TRUE FALSE FALSE FALSE FALSE FALSE FALSE FALSE FALSE
16 TRUE TRUE TRUE FALSE FALSE FALSE FALSE FALSE FALSE FALSE
・・・
11 TRUE TRUE TRUE TRUE TRUE TRUE TRUE TRUE FALSE FALSE
10 TRUE TRUE TRUE TRUE TRUE TRUE TRUE TRUE TRUE FALSE
9以下 TRUE TRUE TRUE TRUE TRUE TRUE TRUE TRUE TRUE TRUE

16. HTTP と ＷｅｂＳｏｃｋｅｔ
Client（Browser） Server Server
Client
（Browser）
Client
（Browser）
双方向通信が可能でサーバからクライ
アントへもメッセージを送信することもで
きる。
一方向通信のためサーバの内容が変
更されてもアクセスするまで分からな
い。
HTTPリクエスト
（GET/POST）
HTTPレスポンス
更新
ボタン
画面
表示
従来のHTTP WebSocket
JSON
/XML

17. ・パフォーマンス低下の防止
!
HTMLファイルと画像イメージをそれぞれ１枚で作成することに
よりファイル読込みは初回の１回のみとした。
こだわり

18. ・サーバサイド（PHP）でHTML5を作成したがAndroidの画面遷
移が遅かったためローカルファイルへ移行
!
・HTMLファイル１枚で画面遷移の実現方法の考案
（先攻・後攻で画面遷移が異なる）
!
・WebSocketで送信するパラメータの選定
苦労した点

19. 用途 名前
アプリ開発フレームワーク Apache Cordova
（PhoneGap）
JavaScriptフレームワーク jQuery
jQuery Mobile
WebSocketフレームワーク Node.js
Socket.IO
使用したフレームワーク（ライブラリ）

20. 用途 ツール名
作業端末 Mac OS X
iOS開発 Xcode
（iOSシミュレータ）
Android開発 Eclipse + ADT Plugin
Webアプリ作成
（HTML5,CSS3,Javascript）
Dreamweaver
その他
Webサービス
jsdo.it
Qiita
使用したツール類の紹介

21. 参考文献
・Apple Developer
https://developer.apple.com/
!
・Android Developers
http://developer.android.com/
!
・Mozilla Developer Network
https://developer.mozilla.org/
!
・PhoneGap Documentation
http://docs.phonegap.com/
!
・Socket IO
http://socket.io/
!
・Job Search
http://www.indeed.com/

22. 今後の取り組み
・どんな技術がありどんなことができるか実践してみる。
WebRTC、AR など
!
・モバイルデバイスでも使えるWebサービスを作ってみる。
オンラインストレージ、ブラウザベースのIDE など

23. おまけ
・共通のソースで書かれている証明

24. 最後に
・プレゼン資料
http://www.slideshare.net/yanoojapan/blackjack-34754680
!
・プログラムファイル
https://github.com/yanoojapan/Applympic2014
!
・募集中
Webアプリ・スマホアプリのアイデア
アプリ作成の困難へ一緒に立ち向かって行きたい人

25. !
!
!
!
ご清聴ありがとうございました。
おわり