第6回Cordova勉強会のライトニングトークで発表したスライドです。

1. 第6回Cordova勉強会
CordovaでSNSアプリ
作ってみた
インフォコム株式会社
@yusukixs

2. ⾃自⼰己紹介
p @yusukixs
p インフォコム株式会社 所属
– 最近は「電⼦子コミック めちゃ⽝犬の会社です」と⾔言
うと伝わるようになりました
p B2B向けのサービス企画・開発をやっています
– 現在は「 」という企業向け防災ポータ
ルサービスのPLとDevLを担当
– マネジメントもサーバーサイドもクライアントサイ
ドもやります

3. とは
p 企業向けの防災⽤用ポータルサイト構築サービス
p PC、スマホ、ガラケー対応
– Webページの掲載
– 連絡⽤用途の掲⽰示板
– SNS機能
p タイムライン
– TwitterのようなSNS
p グループトーク
– LINEのようなSNS
スマホ⽤用のSNSクライアントアプリをCordovaで
実装しました

4. タイムライン機能のネイティブ化
p タイムライン機能のプロトタイプをWebアプ
リケーションとしてjQuery Mobileで開発
– SafariやChromeなどのWebブラウザ上で動作
– しかし2013年年当時、ハイブリッドアプリに対する
⾵風当たりは強かった…
p Faceb○○k、ハイブリッドアプリやめたってよ
ブラウザだとパフォーマンス悪いし、
PUSH通知がほしいからネイティブ化することに
→ ○bjective-‐‑‒C苦⼿手なんだよなあ…
やっぱハイブリッドでいこうかなあ…

5. それでもなぜハイブリッドアプリを選んだか
p 開発メンバーはWeb技術のスキルがあるが、iOS・
Androidのネイティブアプリ経験なし
p Webアプリとして実装したプロトタイプを流流⽤用できる
p 限られた予算、スケジュール、メンテナンスのコスト
p 将来的な機能拡張でPC⽤用Webアプリも予定
なにより、ハードウェアの性能向上により
パフォーマンスネックが解消されつつあった

6. タイムライン機能
jQuery MobileでWebアプリ版を実装し、
Cordovaでネイティブ化

7. タイムライン機能ネイティブ化の課題
jQuery Mobileだとパフォーマンス
チューニングが必須。
Androidは機種によっては若若⼲干のも
たつきがある
例例）clickイベントはfastclickを
使って発⽕火を⾼高速化
jQuery Mobileでハイブリッドしんどい…

8. グループトーク機能
p 2014年年夏、グループトーク機能を実装するこ
とに
ハイブリッドアプリ向けにチューニングされた
OnsenUIの存在を知る
jQuery Mobileはパフォーマンスチューニングが
⼤大変…なんとかならないものか

9. グループトーク機能
OnsenUI + AngularJSで実装

10. OnsenUIを使ってみて
p ネイティブアプリに遜⾊色のないサクサクした
速度度で動く。パフォーマンスチューニングを
しなくて済むようになった
p iOSのフラットデザインがベースになっている
ので、デザインに時間を取られなくなった
p AngularJSベースなので、jQueryに⽐比べて
ソースの保守性がよくなった

11. Cordovaでハマったどころ
p Android
– Android 4.4.4で画像ファイルのアップロードがで
きない
p Cameraプラグインが古いことが原因
p Cordovaプラグインのバージョンアップは定期的に実施
を推奨
p iOS
– ソフトウェアキーボードの挙動が怪しく、そこの
実装に⼀一番苦労した
p ナビゲーションバーのヘッダーが追随しなかったり…
p 結局、頑張って⾃自前で修正
– ionic keyboardプラグインを使うといいらしい

12. 所感
p ハイブリッドで作る決断をしたことは正し
かったと確信している
– 業務⽤用アプリであれば、できないことはほぼない
p よほど凝ったUIにしたり、ゲームアプリ以外
ではネイティブで作ることのメリットは薄く
なったと感じる
社内でも社外でもハイブリッドアプリ開発の啓蒙
に努めていきたい

13. END