Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Ionic Frameworkをつかって
Salesforce1アプリを開発しよう
Taiki Yoshikawa
自己紹介
名前:吉川 大樹
所属:テラスカイ (2013/01∼)
@tyoshikawa1106
+TaikiYoshikawa
tyoshikawa1106
TaikiYoshikawa
Salesforce1とは
Salesforce1
http://www.salesforce.com/jp/salesforce1/
Salesforce1モバイルアプリ開発の注意
推奨されない
次のタグはデスクトップ向けに最適化されたタグなので
モバイル開発向けではない。(※一例です)
<apex:pageBlock> <apex:pageBlockButtons>
<ap...
Ionic Framework
http://ionicframework.com/
便利なIonic Framework
ionicshowcase
http://showcase.ionicframework.com/
Ionic Frameworkでつくられているアプリ
Keychain ShortOrange Fitlb Fruition Sciences
Node.js
http://nodejs.org/
Node.jsをインストール
Ionicをインストールしてプロジェクトを作成
Ionicをインストール
Ionicのテンプレートプロジェクトを作成
npm install-g cordova ionic
ionic start myApp tabs
Ionicをインストールしてプロジェクトを作成
$ ionic startコマンドでプロジェクトが作成されます
index.html
Ionicの3つのテーマ
Ionicには3つのテーマが用意されています
$ ionic start myApp blank $ ionic start myApp tabs $ ionic start myApp sidemenu
Salesforceで動かしてみよう
Visualforce 静的リソース
ionicフォルダは圧縮して
アップロード
Salesforceで動かしてみよう
Building Beautiful Mobile Apps In Visualforce Using AngularJS And Ionic - Part 1
https://developer.sale...
Salesforceで動かしてみよう
Part3でパッケージが公開されています
Salesforceで動かしてみよう
プレビューボタンから動作確認できます
IonicのCSSコンポーネント
CSS Components
http://ionicframework.com/docs/components/
IonicのCSSコンポーネント - HeaderとFooter
Header
Footer
<div class="bar bar-header bar-royal">
<h1 class="title">Header</h1>
</div>...
IonicのCSSコンポーネント - Buttons
Button
<button class="button">
Default
</button>
!
<button class="button button-light">
button-...
IonicのCSSコンポーネント - Buttons
IonicのCSSコンポーネント - List
List
<ion-content class="has-header">
<ul class="list">
<li class="item">
Battletoads
</li>
/* 省略 ...
IonicのCSSコンポーネント - List
IonicのCSSコンポーネント - Cards
Cards
<ion-content class="has-header">
<ul class="list">
<li class="item">
Battletoads
</li>
/* 省...
IonicのCSSコンポーネント - Cards
IonicのCSSコンポーネント - Cards
IonicのCSSコンポーネント - Form&Inputs
IonicのCSSコンポーネント - Tabs
テキストだけ
アイコンとテキスト
アイコンだけ
アイコンとテキスト
Ionicのカスタマイズ - Sassのインストール
Sass
http://sass-lang.com/
Ionicのカスタマイズ - IonicのSassファイル
Ionicのカスタマイズ - IonicのSassファイル使い方
$ sass --watch scss/app.scss:css/app.css;
ioniconsに用意された豊富なicon font
ionicons
http://ionicons.com/
ioniconsに用意された豊富なicon font
IonicFrameworkを使ったサンプルコード
GitHub - Ionic Sample Code
https://github.com/tyoshikawa1106/S1_IonicFrameworkPackage
サンプルコード① - Ionic Guide
サンプルコード② - Ionic Demo
サンプルコード③ - Chatter API Startup
【Crowdハッカソン①】学習支援アプリケーション
GitHub - S1_StudySupportApplication
https://github.com/tyoshikawa1106/S1_StudySupportApplication
【Crowdハッカソン①】学習支援アプリケーション
学習支援アプリケーション in Salesforce1モバイル
https://www.youtube.com/watch?v=rIBktyVYpS0
もっとIonicを知りたい人は①
Ionic Crash Course
https://www.youtube.com/watch?v=C-UwOWB9Io4
もっとIonicを知りたい人は①
Ionic Framework - The Badass HTML5 Mobile Framework
http://youtu.be/Gym1QEsdHI0
もっとIonicを知りたい人は①
January CincyNg - Mike Ball on the Ionic Framework
http://youtu.be/UMBhVixcagI
もっとIonicを知りたい人は②
The Official Ionic Blog
http://ionicframework.com/blog/
もっとIonicを知りたい人は③
Ionic Twitter
https://twitter.com/Ionicframework
もっとIonicを知りたい人は④
Ionic Facebook
https://www.facebook.com/ionicframework
もっとIonicを知りたい人は⑤
Ionic Google+
https://plus.google.com/u/0/+Ionicframework/posts
ありがとうございました
Prochain SlideShare
Chargement dans…5
×

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

2 468 vues

Publié le

Salesforce Developers Community MAX

Publié dans : Technologie, Formation
  • Soyez le premier à commenter

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. ありがとうございました

×