ionicframeworkをつかってsalesforce1アプリの開発をしよう
DESCRIPTION
Salesforce Developers Community MAXTRANSCRIPT
Ionic Frameworkをつかって Salesforce1アプリを開発しよう
Taiki Yoshikawa
自己紹介
名前：吉川 大樹所属：テラスカイ (2013/01～)
@tyoshikawa1106
+TaikiYoshikawa
tyoshikawa1106
TaikiYoshikawa
Salesforce1とは
Salesforce1 http://www.salesforce.com/jp/salesforce1/
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:*>
ionicshowcase http://showcase.ionicframework.com/
Ionic Frameworkでつくられているアプリ
Keychain ShortOrange Fitlb Fruition Sciences
Ionicをインストールしてプロジェクトを作成
Ionicをインストール
Ionicのテンプレートプロジェクトを作成
npm install-g cordova ionic
ionic start myApp tabs
Ionicをインストールしてプロジェクトを作成
$ ionic startコマンドでプロジェクトが作成されます
index.html
Ionicの３つのテーマ
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.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
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>
<div class="bar bar-footer bar-positive"> <div class="title">Force.com</div> </div>
IonicのCSSコンポーネント - Buttons
Button
<button class="button"> Default </button> !<button class="button button-light"> button-light </button>
IonicのCSSコンポーネント - Buttons
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>
IonicのCSSコンポーネント - List
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>
IonicのCSSコンポーネント - Cards
IonicのCSSコンポーネント - Cards
IonicのCSSコンポーネント - Form&Inputs
IonicのCSSコンポーネント - Tabs
テキストだけ
アイコンとテキスト
アイコンだけ
アイコンとテキスト
Ionicのカスタマイズ - IonicのSassファイル
Ionicのカスタマイズ - IonicのSassファイル使い方
$ sass --watch scss/app.scss:css/app.css;
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
ありがとうございました