Salesforce Developers Community MAX

1. Ionic Frameworkをつかって
Salesforce1アプリを開発しよう
Taiki Yoshikawa

2. 自己紹介
名前：吉川 大樹
所属：テラスカイ (2013/01∼)
@tyoshikawa1106
+TaikiYoshikawa
tyoshikawa1106
TaikiYoshikawa

3. Salesforce1とは
Salesforce1
http://www.salesforce.com/jp/salesforce1/

4. Salesforce1モバイルアプリ開発の注意
推奨されない
次のタグはデスクトップ向けに最適化されたタグなので
モバイル開発向けではない。(※一例です)
<apex:pageBlock> <apex:pageBlockButtons>
<apex:pageBlockSection> <apex:pageBlockSectionItem>
<apex:pageBlockTable> <apex:inlineEditSupport>
サポートされない
<apex:detail> <apex:inputFild>
<apex:enhancedList> <apex:listViews> <apex:relateList>
<chatter:*> <liveagent:*>

5. Ionic Framework
http://ionicframework.com/
便利なIonic Framework

6. ionicshowcase
http://showcase.ionicframework.com/
Ionic Frameworkでつくられているアプリ
Keychain ShortOrange Fitlb Fruition Sciences

7. Node.js
http://nodejs.org/
Node.jsをインストール

8. Ionicをインストールしてプロジェクトを作成
Ionicをインストール
Ionicのテンプレートプロジェクトを作成
npm install-g cordova ionic
ionic start myApp tabs

9. Ionicをインストールしてプロジェクトを作成
$ ionic startコマンドでプロジェクトが作成されます
index.html

10. Ionicの３つのテーマ
Ionicには3つのテーマが用意されています
$ ionic start myApp blank $ ionic start myApp tabs $ ionic start myApp sidemenu

11. Salesforceで動かしてみよう
Visualforce 静的リソース
ionicフォルダは圧縮して
アップロード

12. Salesforceで動かしてみよう
Building Beautiful Mobile Apps In Visualforce Using AngularJS And Ionic - Part 1
https://developer.salesforce.com/blogs/developer-relations/2014/04/building-beautiful-
mobile-apps-in-visualforce-using-angularjs-and-ionic-part-1.html
Building Beautiful Mobile Apps In Visualforce Using AngularJS And Ionic ‒ Part 2
https://developer.salesforce.com/blogs/developer-relations/2014/04/part-2-building-
beautiful-mobile-apps-in-visualforce-using-angularjs-and-ionic.html
Building Beautiful Mobile Apps In Visualforce Using AngularJS And Ionic ‒ Part 3
https://developer.salesforce.com/blogs/developer-relations/2014/04/building-beautiful-
mobile-apps-in-visualforce-using-angularjs-and-ionic-part-3-remote-objects.html

13. Salesforceで動かしてみよう
Part3でパッケージが公開されています

14. Salesforceで動かしてみよう
プレビューボタンから動作確認できます

15. IonicのCSSコンポーネント
CSS Components
http://ionicframework.com/docs/components/

16. IonicのCSSコンポーネント - HeaderとFooter
Header
Footer
<div class="bar bar-header bar-royal">
<h1 class="title">Header</h1>
</div>
<div class="bar bar-footer bar-positive">
<div class="title">Force.com</div>
</div>

17. IonicのCSSコンポーネント - Buttons
Button
<button class="button">
Default
</button>
!
<button class="button button-light">
button-light
</button>

18. IonicのCSSコンポーネント - Buttons

19. IonicのCSSコンポーネント - List
List
<ion-content class="has-header">
<ul class="list">
<li class="item">
Battletoads
</li>
/* 省略 */
<li class="item">
Super Mario Bros.
</li>
</ul>
</ion-content>

20. IonicのCSSコンポーネント - List

21. IonicのCSSコンポーネント - Cards
Cards
<ion-content class="has-header">
<ul class="list">
<li class="item">
Battletoads
</li>
/* 省略 */
<li class="item">
Super Mario Bros.
</li>
</ul>
</ion-content>

22. IonicのCSSコンポーネント - Cards

23. IonicのCSSコンポーネント - Cards

24. IonicのCSSコンポーネント - Form&Inputs

25. IonicのCSSコンポーネント - Tabs
テキストだけ
アイコンとテキスト
アイコンだけ
アイコンとテキスト

26. Ionicのカスタマイズ - Sassのインストール
Sass
http://sass-lang.com/

27. Ionicのカスタマイズ - IonicのSassファイル

28. Ionicのカスタマイズ - IonicのSassファイル使い方
$ sass --watch scss/app.scss:css/app.css;

29. ioniconsに用意された豊富なicon font
ionicons
http://ionicons.com/

30. ioniconsに用意された豊富なicon font

31. IonicFrameworkを使ったサンプルコード
GitHub - Ionic Sample Code
https://github.com/tyoshikawa1106/S1_IonicFrameworkPackage

32. サンプルコード① - Ionic Guide

33. サンプルコード② - Ionic Demo

34. サンプルコード③ - Chatter API Startup

35. 【Crowdハッカソン①】学習支援アプリケーション
GitHub - S1_StudySupportApplication
https://github.com/tyoshikawa1106/S1_StudySupportApplication

36. 【Crowdハッカソン①】学習支援アプリケーション
学習支援アプリケーション in Salesforce1モバイル
https://www.youtube.com/watch?v=rIBktyVYpS0

37. もっとIonicを知りたい人は①
Ionic Crash Course
https://www.youtube.com/watch?v=C-UwOWB9Io4

38. もっとIonicを知りたい人は①
Ionic Framework - The Badass HTML5 Mobile Framework
http://youtu.be/Gym1QEsdHI0

39. もっとIonicを知りたい人は①
January CincyNg - Mike Ball on the Ionic Framework
http://youtu.be/UMBhVixcagI

40. もっとIonicを知りたい人は②
The Official Ionic Blog
http://ionicframework.com/blog/

41. もっとIonicを知りたい人は③
Ionic Twitter
https://twitter.com/Ionicframework

42. もっとIonicを知りたい人は④
Ionic Facebook
https://www.facebook.com/ionicframework

43. もっとIonicを知りたい人は⑤
Ionic Google+
https://plus.google.com/u/0/+Ionicframework/posts

44. ありがとうございました