PhoneGap、Sencha、Xamarin・・・百花繚乱モバイル開発環境比較

デブサミ２０１４に行ってきた！シリーズ

２月１３日のC4セッション

iosにAndroid百花繚乱モバイル開発環境を比較する

をメモメモ

---

■自己紹介
Windows／OS X両

■Android／iOS普通の開発環境
・AndroidSDK
　　Java
　　AndroidStudio／えｃぃｐせ
　利点
　　純正
　　Java(Dalvik)

・iOS
　　言語Objective-C
　　Xcode
　利点
　　純正
　　お、Objective-C

・メリットとデメリット
　メリット
　　最新機能に対応
　　情報が豊富
　デメリット
　　環境と言語が強制
　　　　→学習コスト
　　それ以外のものは提供されない
　　　　→Google
　しかも両対応はむり

■Android/iOS両対応開発環境詳細

Native+SDK
HTML5
Native＋Framework
MONO
Script+Framework

・みんな知ってるHTML5/Javascript
　　PhoneGap
　　Sencha Touch
　　Titanium
　利点
　　程度の差はあれ、ほとんどの技術者が知っている
　　技術者が多い
　難点
　　技術者のレベル差が大きい
　　　ある程度はかけてしまう
　　　チューニングに長けている人と、そうでない人の差が激しい
　おすすめ
　　　Webサービスのモバイル展開
　　　　Facebookとか（HTML5のせいじゃないよ By Sencha
　　　Sencha　Touch
　　　　代理店キャノンITソリューション
・Scriptで作りたい
　　Python+Kivy：iOS
　　Ruby Motion：iOS
　　Ruboto：Android用
　　Adobe Air
　利点
　　LL言語が使える
　　　　Python,Ruby,ActionScript3
　　AdobeAir
　　　　Flasherがチカラを発揮できる
　　RubyMotion
　　　　LLVMの使用によりネイティブになる
　難点
　　AdobeAir
　　　AVMで動作：高速化されているが・・
　　Python／Ruby
　　　iOS/Android両対応しているFrameworkは？
　おすすめ
　　WebAPI経由のアプリ
　　Adobe Air
　　　Flasheが狂気する
　　　ゲームも
　　　日本語情報も多い（Flexのひとも）

.Netの知識が生きるMono
・Xamarin ios
・Unity3D
　　利点
　　　.net Framework
　　　C#が使える
　　Xamarin/Unity3D
　　　iOSに関してはネイティブにコンパイルされる
　　　→AndroidはMonoの上で
　　Unity3D
　　　３Dゲーム用機能が充実
　　　Boo/Javascript(UnityScript)も使用可能
　　　　→Boo：Python
　　難点
　　　.net Framework
　　　　→利点であり、難点でもあるかも
　　　Xamarin
　　　　GUIはNativeを使う
　　　　　ios StoryBord
　　　　　Android Layout.xml
　　　　→きりわけられてしまう
　　　Unity3D
　　　　　GUI
　　　　　　　２DFramework／NGUI EasyUI etc
　　　　　　　日本語が・・・
　　　　　　　　→ネイティブを使うのめんどくさい
　　おすすめ
　　　Xamarin
　　　　　一般的なアプリ：オールマイティ
　　　Unity3D
　　　　　ゲームゲームゲーム！！
　　　アプリとゲームですみわけ

・回りまわってNative
　Delphi／C++Builder+FireMonkey
　　利点
　　　　Native！→ポインタも使える
　　　　iOS/Android双方ともNativeになる
　　　　　AndroidはNDKを利用
　　　　OS APIにシームレスアクセス
　　　　　-Objective-C Bridge/JNI
　　　　　　JNI
　　　　　　#ifdefで
　　　　両方に完全対応、GUIも１ソース
　　　　Windows／OSXとも単一コードベースで
　　　　　ただし、それぞれの文化をもっていってしまうと・・
　　　　FireMonkey
　　　　　２D/3D対応
　　　　　DPIフリー（FormFamily)
　　　　　Style機構
　　　　　　　・iOS/Android両方のNativeUIの見た目に対応する
　　　　　　　　　　iOS7への対応も１週間
　　　　コンポーネント
　　　　　　Indy,DB系コンポーネント
　　　　みんな知ってるC++
　　　　完全なデバッグ
　　難点
　　　Native：Androidでは弱点
　　　Delphi Language：言語がPascal
　　　Style：Pixel Perfect
　　　IDEがWindows
　　　　　Xcode Command Line ツール
　　おすすめ
　　　一般的なアプリ：オールマイティ
　　　　　Windowsあぷりもあるなら

■結論
　一般的
　　Xamarin、Delphi
　エンタテイメント
　　Unity3D

ios/Android/Windowsストアアプリのハイブリッド開発

デブサミ２０１４に行ってきた！シリーズ

２月１３日のC2セッション

ios/Android/Windowsストアアプリの
ハイブリッド開発における限界と可能性
日本IBM

をメモメモ

---

■スピーカー紹介
　２０１１　Android
　２０１２　HTML5＋CSS3
　２０１３　HTML5＋CSS3
　　　→ローカル、オフライン
　　　　ジオロケーションAPI
　ハイブリッド：いる

■いまハイブリッド開発基盤に関する相談が増加しています
・必要性
　　→AndroidとIOS：いるの？
　　　　→よのなかそうではない
　お客様ヒアリング重ねると、ハイブリッドが要件なことが多い
　　→複数アプリケーションが要件かも？
　　→BYODやりま～す！個人スマホを社内で・・・
　　→OSも端末も決まってないけど、とにかくやって！
　ネイティブの行き詰まり
　　重複管理、アップデートは？

　ユーザー、企画：新しいものを入れたい
　ITマネージャー：スキル・セキュリティ
　開発者：HTML5・ネイティブ
　→ステークホルダーのせめぎあい

■メッセージ
・サーバーサイドの資産がクライアントにシフト
　→ちゃらになってる新しく
・フロントエンドだけではだめ、
　バックエンド、セキュリティも
・ハイブリッド：イニシャルコストはかかるが、
　端末増えれば、生産性
　　→Windows8、サーフェス
　　　ChromeOS
　　→センサー

■フロントエンド開発の課題
　WebView／UIWebViewクラスの存在
　　Webブラウザ
　　アプリ内のブラウザ＝WebView
　　　　→HTML5と同じことが
　オフラインのときは？
　　→アプリケーション内に持ってくる
　　　Jasvascriptで書いて、オフライン

■OS and Native-Javascript Bridge
１WebとJavascriptに限定？
　　→既存コード、画面の再利用性は？
　　インターフェース部分をやっているのが
　　→Apache　CORDOVA
　　PhoneGAPとの違いは？
　　　　→もろもろのものを構築するかどうか
２Responsive Web Design(RWD)
　　単一のCSSで、メディアクエリーで分岐
　　Fluid Grid,Fluid　Image

IBM　Worklight　Studio
　→eclipseベース
　　　Android Studio XCode Visual Studio３つ＆共有
　OSSライブラリ
　　JQuery
　　Apache CordovaAPI
　　JQuery Mobile Dojo Sencha
　　Rhino Javascriptコンテナ
　　AngularJS BackboneJS Lo-Dash

　Mixed Hybrid Application
　　HTML5だけでがんばろうとしない
　　既存のコード再利用
　　Android4.0が境界線
　　リモートデバッガ
　　個別のデバッガ、ロガー
　マルチ開発対応のロガー
　サーバーへのクラッシュログ送信
　モバイルテスト自動化（実機もWebアプリも）
　MBaaS
　　ユーザー認証管理

■セキュリティの課題
　　オフラインデータ暗号化
　　デバイス紛失のサービス停止
　　　→MDM対象外のとき、アプリケーション単位でとめる

■Cordova(PhoneGap)とIBM Worklight

■まとめ
　MEAP（みーぷ）
　２０２０年まで、あと６年

■Developer Editionは無期限で無料
eclipse4.3.1のヘルプ、マーケットプレイス

JazzHub：リソースコード管理、クラウドIDS
IBM developerWorks

JavaからJavascriptへ！HTML5運用から見た次世代業務アプリケーション

デブサミ２０１４に行ってきた！
そのうちの２月１３日のD1セッション

をメモメモ

---

■朝はあいさつ

■自己紹介
佐川さん
@albatrosary
http://albatrosary.hateblo.jp
http://html5experts.jp/albatrosary

■HTML5が３０１４年に正式勧告
・エンタープライズ的には、今年盛り上がる？
・フロント業務アプリケーションに影響

■HTML/CSS/Javgascript
　アプリケーション開発環境も大きく変化
　　まだ、eclipseやSVN
　フロント開発の現場では、Java中心から
　　HTML/CSS/Javgascript中心へ

　※http://html5experts.jp/albatrosary/3191
　に今回話す内容あり

■Webの歴史
２０００年前後に動き
　　→HTML4.0の規格
　　　CSSも形ができてきたのが・・・
ここ数年大きく変わった
２０１１　CSS3
　XHTMLがなくなっている
　SPDY　HTTP2
　　→通信の技術的進歩
　　→かなり大きな影響（今後の話だが）

■Story
２０１２秋にHTML５業務アプリケーションを開発
２０１３年２月９日　HTML5CARNIVAL Fukuoka
　　Mozila Japanの浅井さんのFirefox OS
　　html5j白石さんのapplication cache
NTT Communivations 小松さんのSPDY WebSocket
２０１３年２月１８日　HTML5とか勉強会
　　白石さんにapplication cacheについて直接話を聞きに
２０１３年２月２３日　京都アジャイル勉強会
２０１３年４月２４日　Chrome＋HTML5　Developers　Live Japan＃４
　　村岡さん、GoogleによるYeomanハンズオン

■従来型のWebアプリケーション
　１．リクエストをサーバーへ送りControllerへ
　２．Controllerは必要な情報を
　　　POJO→Business Logic→O/Rマッパー→Database
　３．ページをJSPで生成し、こんとろーらー経由で

■次世代型のWebアプリ
　１．HTMLで生成された画面を表示
　２．必要な情報をAJAXで非同期にサーバー送信
　３．サーバーで受け取った情報をPOJOで
　４．クライアントで受け取り

■業務系システムは、今すぐ脱Strutsを
　次世代型のWebアプリケーションは次のような通信技術を使う
　　　JSON
　　　JAX-RS
　　　WebSocket
　http://gihyo.jp/news/report/2013/09/1901?page=2

■Single-page Application(SPA)とは
　　単一ページによるWebアプリケーション
　　ページはDOM操作により切り替える
　　サーバーは

■RIAに求められているもの
　　表現力の高さ
　　デスクトップアプリケーションと同等なUI
　　ユーザーエクスペリエンス

■RIAが・・・
　　２０１０年にJobsがFlashを激しく批判
　　プロプライエタリよりオープン性のあるHTML5
　　２０１１年SilverLight戦略を・・

■SPAに必要な技術
　　Javascriptフレームワーク
　　altJS
　　CSS　Preprocesser
　　開発環境
　　バックエンド技術－通信
　　バックエンド技術ーWebアプリケーションサーバー

■Javascriptフレームワーク
　Backbone.js
　Sencha
　AngularJS：最近聞く
（Kockout.jsも聞く）

JQuery：今まではよかった
　→すべてがJavascriptでかけますか？

■altJS
・altJSの言語の０多くはクラス機構のサポート
　→Javascriptお抱える問題の多くを解決

　coffeeScript 2009 http://coffeescript.org
　TypeScript 2012 http://typescriptlang.org/

納品したものが安全に

■CSS　プリプロセッサ
　膨大なCSSをどう整理するか

compass
less

■開発環境
yeoman（よーまん）
sencha cmd
git github

■Yeomanとは
・Googleが開発した総合解開発ツール
　　１．yoによる雛形作成
　 ２．grunt serverを使用し、アプリケーション開発
　　３．grunt buildによるビルド
　　※あとbowerがある

■バックエンド技術－通信
　Ajaxにおいて、XMLHttpRequestで非同期にJSON
　Webアプリケーションサーバー
　　　APIサーバーとしての役割

■SPAを構築する上で考えるべきこと
　　パフォーマンス
　　メモリーリーク
　　セキュリティ
　　フレームワークロックイン
　　設計思想の転換
　　フロントエンジニア不足
　　通信技術
　　バックエンド技術

■さらにHTML5
・通信
　　AJAX
　　WebSocket
　　SPDY

・バックエンド技術
　　WebSocketやSPDYをうまくコントロールする
　　Webアプリケーションサーバーが必要
　　　どうやってスケールするか

http;//html5experts.jp/albatrosary/4939

■SPAのメリット
・ページ遷移させてもJavascriptのグローバル環境が変わらない
・WebSocketが有効に使える

■SPAのデメリット
・フルOSSでの開発が必要
　　→自信なければSencha
・技術要素が多すぎる
・従来のWebアプリケーションに比べ、フロント開発が難しい

■最後に
　Java/RIA→Single Page Application
　　JSPはやめていい！！

■すぺしゃるさんくす
ぜのふぃー