IonicFrameworkをつかってSalesforce1アプリの開発をしよう

2,246 views
2,109 views

Published on

Salesforce Developers Community MAX

Published in: Technology, Education
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,246
On SlideShare
0
From Embeds
0
Number of Embeds
351
Actions
Shares
0
Downloads
20
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

IonicFrameworkをつかってSalesforce1アプリの開発をしよう

  1. 1. Ionic Frameworkをつかって Salesforce1アプリを開発しよう Taiki Yoshikawa
  2. 2. 自己紹介 名前:吉川 大樹 所属:テラスカイ (2013/01∼) @tyoshikawa1106 +TaikiYoshikawa tyoshikawa1106 TaikiYoshikawa
  3. 3. Salesforce1とは Salesforce1 http://www.salesforce.com/jp/salesforce1/
  4. 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. 5. Ionic Framework http://ionicframework.com/ 便利なIonic Framework
  6. 6. ionicshowcase http://showcase.ionicframework.com/ Ionic Frameworkでつくられているアプリ Keychain ShortOrange Fitlb Fruition Sciences
  7. 7. Node.js http://nodejs.org/ Node.jsをインストール
  8. 8. Ionicをインストールしてプロジェクトを作成 Ionicをインストール Ionicのテンプレートプロジェクトを作成 npm install-g cordova ionic ionic start myApp tabs
  9. 9. Ionicをインストールしてプロジェクトを作成 $ ionic startコマンドでプロジェクトが作成されます index.html
  10. 10. Ionicの3つのテーマ Ionicには3つのテーマが用意されています $ ionic start myApp blank $ ionic start myApp tabs $ ionic start myApp sidemenu
  11. 11. Salesforceで動かしてみよう Visualforce 静的リソース ionicフォルダは圧縮して アップロード
  12. 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. 13. Salesforceで動かしてみよう Part3でパッケージが公開されています
  14. 14. Salesforceで動かしてみよう プレビューボタンから動作確認できます
  15. 15. IonicのCSSコンポーネント CSS Components http://ionicframework.com/docs/components/
  16. 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. 17. IonicのCSSコンポーネント - Buttons Button <button class="button"> Default </button> ! <button class="button button-light"> button-light </button>
  18. 18. IonicのCSSコンポーネント - Buttons
  19. 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. 20. IonicのCSSコンポーネント - List
  21. 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. 22. IonicのCSSコンポーネント - Cards
  23. 23. IonicのCSSコンポーネント - Cards
  24. 24. IonicのCSSコンポーネント - Form&Inputs
  25. 25. IonicのCSSコンポーネント - Tabs テキストだけ アイコンとテキスト アイコンだけ アイコンとテキスト
  26. 26. Ionicのカスタマイズ - Sassのインストール Sass http://sass-lang.com/
  27. 27. Ionicのカスタマイズ - IonicのSassファイル
  28. 28. Ionicのカスタマイズ - IonicのSassファイル使い方 $ sass --watch scss/app.scss:css/app.css;
  29. 29. ioniconsに用意された豊富なicon font ionicons http://ionicons.com/
  30. 30. ioniconsに用意された豊富なicon font
  31. 31. IonicFrameworkを使ったサンプルコード GitHub - Ionic Sample Code https://github.com/tyoshikawa1106/S1_IonicFrameworkPackage
  32. 32. サンプルコード① - Ionic Guide
  33. 33. サンプルコード② - Ionic Demo
  34. 34. サンプルコード③ - Chatter API Startup
  35. 35. 【Crowdハッカソン①】学習支援アプリケーション GitHub - S1_StudySupportApplication https://github.com/tyoshikawa1106/S1_StudySupportApplication
  36. 36. 【Crowdハッカソン①】学習支援アプリケーション 学習支援アプリケーション in Salesforce1モバイル https://www.youtube.com/watch?v=rIBktyVYpS0
  37. 37. もっとIonicを知りたい人は① Ionic Crash Course https://www.youtube.com/watch?v=C-UwOWB9Io4
  38. 38. もっとIonicを知りたい人は① Ionic Framework - The Badass HTML5 Mobile Framework http://youtu.be/Gym1QEsdHI0
  39. 39. もっとIonicを知りたい人は① January CincyNg - Mike Ball on the Ionic Framework http://youtu.be/UMBhVixcagI
  40. 40. もっとIonicを知りたい人は② The Official Ionic Blog http://ionicframework.com/blog/
  41. 41. もっとIonicを知りたい人は③ Ionic Twitter https://twitter.com/Ionicframework
  42. 42. もっとIonicを知りたい人は④ Ionic Facebook https://www.facebook.com/ionicframework
  43. 43. もっとIonicを知りたい人は⑤ Ionic Google+ https://plus.google.com/u/0/+Ionicframework/posts
  44. 44. ありがとうございました

×