tyoshikawa1106のブログ

- Force.com Developer Blog -

Salesforce1 Advent Calendar 2014 - KnockoutJsでSalesforce1モバイルアプリをつくろう

f:id:tyoshikawa1106:20141123102151p:plain

アプリケーションとつながる。デバイスとつながる。顧客とつながる―― あらゆるユーザのニーズに応えるカスタマープラットフォーム『Salesforce1』が2013年の冬頃に登場しました。それと同時にSalesforce1モバイルアプリケーションも登場し、モバイルでSalesforceをより便利に利用できるようになりました。


モバイルアプリケーションの開発といえば、JavaやObjectCなどのネイティブ言語のスキルが必要ですが、Salesforce1モバイルアプリの登場により、VisualforceとApexを使ったWeb開発のスキルでモバイルアプリの開発を行えるようになりました。


開発したアプリケーションは、Salesforce1モバイルに組み込んで提供できるので配布方法を気にしたり、AndroidやiOSといった動作環境について気にする必要もありません。


以前に比べてモバイル開発がやりやすくなったのですが、PC向けの画面開発で使われていた一部の『apexタグ』がモバイル開発では非推奨となりました。基本的にはVisualforceとApexを使った開発なのですが単純にPC向け画面と同じようには開発できなくなっています。


モバイル開発ではJavaScriptのスキルが必要になります。JavaScriptを使うことでモバイルアプリで重視されるサクサク動作するアプリを開発することが可能です。


――ということでJavaScriptについて勉強する必要があるのですが、JavaScriptを使った開発は苦手だったのでどこから手を付けようかと思っていたところ、Twitterで面白そうな投稿を見つけました。


KnockoutJsではじめるSalesforce1アプリ開発についてまとめられたブログの紹介です。このブログは海外のSalesforce MVP、Matt LaceyさんのブログでKnockoutJsの特徴や開発手順などについてまとめられています。


Backbone.jsやAngularJsは簡単に試したことがあったのですが、KnockoutJsはまだ使ったことがなかったのと、何より海外のすごい人が「これは良いよ」とオススメしているのが気になったのでちょっと勉強してみました。

KnockoutJsの勉強方法

KnockoutJsですが公式サイトのチュートリアルが充実しています。実際にコードを入力するとどのように動作するかを確認できるので、どんな感じかイメージをつかみやすいと思います。

f:id:tyoshikawa1106:20141117211827p:plain

Knockout : Home


KnockoutJsの公式サイトは英語ですが、これを日本語に翻訳してくれたサイトもあります。特徴、メリット等もわかりやすく記載されているのですごく参考になりました。

f:id:tyoshikawa1106:20141123102519p:plain

サンプルアプリケーションを動かしてみよう

実際に動くサンプルアプリケーションを作ってみました。パッケージ化してあるのでインストールするだけで動作確認ができると思います。

f:id:tyoshikawa1106:20141124123007p:plain

https://login.salesforce.com/packaging/installPackage.apexp?p0=04ti0000000LMVX


サンプルアプリケーションは次の8機能を作ってみました。

  • KnockoutJs Hello World
  • KnockoutJs Introduction
  • KnockoutJs Working with Lists and Collec Metadata Browser
  • KnockoutJs Single page applications
  • KnockoutJs Creating custom bindings
  • KnockoutJs Loading and saving data
  • KnockoutJs Account Search
  • KnockoutJs Task Register

f:id:tyoshikawa1106:20141124123645j:plain


モバイルナビゲーションの設定でメニューに追加することでSalesforce1アプリで表示できます。

f:id:tyoshikawa1106:20141124124616p:plain:w300

サンプルアプリケーションの解説

それぞれのサンプルアプリケーションでどのようなことができるか簡単に説明します。

KnockoutJs Hello World

KnockoutJsの基本的な処理を確認できます。

f:id:tyoshikawa1106:20141124130058p:plain


KnockoutJsでは次のような処理で『Hello World!!』と文字を表示することできます。この宣言の仕方をベースにいろいろ機能を追加していきます。

KnockoutJs Introduction

ボタンクリックの処理を確認できます。このサンプルではクリック時にテキストの値を変更しています。

f:id:tyoshikawa1106:20141124130116p:plain

KnockoutJs Working with Lists and Collec Metadata Browser

リストの追加と削除、リスト値の変更処理を確認できます。

f:id:tyoshikawa1106:20141124130134p:plain

KnockoutJs Single page applications

ページ切り替えのサンプルです。ちょっとうまく行かなかったので今回はタブ切り替えだけになってしまいました。本来の動作は公式サイトのチュートリアルで確認できます。

f:id:tyoshikawa1106:20141124130155p:plain

KnockoutJs Creating custom bindings

リスト値の変更処理でボタンの活性/非活性を切り替える方法について確認できます。

f:id:tyoshikawa1106:20141124130215p:plain

KnockoutJs Loading and saving data

リストの追加処理と削除処理を確認できます。また、リスト値の初期値にテキストの値をセットする方法も確認できます。

f:id:tyoshikawa1106:20141124130240p:plain

KnockoutJs Account Search

実際にSalesforceに検索処理を実行します。初期表示時は最近参照したレコードを表示し、Searchボタンで条件を絞って検索を行います。Apexクラスは使わずRemoteObjectsで対応してみました。

f:id:tyoshikawa1106:20141124130256p:plain

KnockoutJs Task Register

Salesforceに対して作成 / 更新 / 削除の処理を実行できます。ToDoオブジェクトを操作するサンプルアプリで、Addボタンで新規作成、緑アイコンでステータスを完了に更新、赤アイコンで削除を実行します。Addボタンの処理では必須チェックも行っています。こちらもRemoteObjectsで対応してみました。

f:id:tyoshikawa1106:20141124130314p:plain

デモ動画

今回用意したサンプルアプリのデモ動画です。


KnockoutJsの基本的な部分はだいたいこんな感じです。jQueryだけで実装したときよりもスッキリしたコードになったと思います。まだ確認できていない便利機能がいろいろあるので一度公式サイトを見てみるとおもしろいと思います。


JavaScriptを使った開発ですがWinter'15でRemoteObjectsの機能が正式リリースされたことで以前より開発しやすくなりました。今回のサンプルでも利用していますが、Apexクラスの処理を経由するよりサクサク動作します。複雑な処理はApex側に任せたほうがいいと思いますが、初期表示の検索やステータスの更新、レコードの削除などシンプルな機能はRemoteObjectsでやってしまうのがいいかもしれないです。


最後に、今回デザインの方ではBootstrapSF1を利用しました。ボタンやテーブルなどに簡単にSalesforce1スタイルを適用できるので効率よく開発が行えました。Salesforce組織以外でも利用できるのですごく便利です。

Bootstrap SF1


以上、Salesforce1 Advent Calendar 2014 - 12月3日の記事でした。
Salesforce1 Advent Calendar 2014 - Qiita