アプリケーションとつながる。デバイスとつながる。顧客とつながる―― あらゆるユーザのニーズに応えるカスタマープラットフォーム『Salesforce1』が2013年の冬頃に登場しました。それと同時にSalesforce1モバイルアプリケーションも登場し、モバイルでSalesforceをより便利に利用できるようになりました。
モバイルアプリケーションの開発といえば、JavaやObjectCなどのネイティブ言語のスキルが必要ですが、Salesforce1モバイルアプリの登場により、VisualforceとApexを使ったWeb開発のスキルでモバイルアプリの開発を行えるようになりました。
開発したアプリケーションは、Salesforce1モバイルに組み込んで提供できるので配布方法を気にしたり、AndroidやiOSといった動作環境について気にする必要もありません。
以前に比べてモバイル開発がやりやすくなったのですが、PC向けの画面開発で使われていた一部の『apexタグ』がモバイル開発では非推奨となりました。基本的にはVisualforceとApexを使った開発なのですが単純にPC向け画面と同じようには開発できなくなっています。
モバイル開発ではJavaScriptのスキルが必要になります。JavaScriptを使うことでモバイルアプリで重視されるサクサク動作するアプリを開発することが可能です。
――ということでJavaScriptについて勉強する必要があるのですが、JavaScriptを使った開発は苦手だったのでどこから手を付けようかと思っていたところ、Twitterで面白そうな投稿を見つけました。
Get Started With KnockoutJS on the Salesforce1 Platform - by @LaceySnr http://t.co/cBWiSQfoXN #salesforce
— Kona DataSearch (@konadatasearch) November 16, 2014
KnockoutJsではじめるSalesforce1アプリ開発についてまとめられたブログの紹介です。このブログは海外のSalesforce MVP、Matt LaceyさんのブログでKnockoutJsの特徴や開発手順などについてまとめられています。
Backbone.jsやAngularJsは簡単に試したことがあったのですが、KnockoutJsはまだ使ったことがなかったのと、何より海外のすごい人が「これは良いよ」とオススメしているのが気になったのでちょっと勉強してみました。
KnockoutJsの勉強方法
KnockoutJsですが公式サイトのチュートリアルが充実しています。実際にコードを入力するとどのように動作するかを確認できるので、どんな感じかイメージをつかみやすいと思います。
KnockoutJsの公式サイトは英語ですが、これを日本語に翻訳してくれたサイトもあります。特徴、メリット等もわかりやすく記載されているのですごく参考になりました。
サンプルアプリケーションを動かしてみよう
実際に動くサンプルアプリケーションを作ってみました。パッケージ化してあるのでインストールするだけで動作確認ができると思います。
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
モバイルナビゲーションの設定でメニューに追加することでSalesforce1アプリで表示できます。
サンプルアプリケーションの解説
それぞれのサンプルアプリケーションでどのようなことができるか簡単に説明します。
KnockoutJs Hello World
KnockoutJsの基本的な処理を確認できます。
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
実際にSalesforceに検索処理を実行します。初期表示時は最近参照したレコードを表示し、Searchボタンで条件を絞って検索を行います。Apexクラスは使わずRemoteObjectsで対応してみました。
KnockoutJs Task Register
Salesforceに対して作成 / 更新 / 削除の処理を実行できます。ToDoオブジェクトを操作するサンプルアプリで、Addボタンで新規作成、緑アイコンでステータスを完了に更新、赤アイコンで削除を実行します。Addボタンの処理では必須チェックも行っています。こちらもRemoteObjectsで対応してみました。
デモ動画
今回用意したサンプルアプリのデモ動画です。
KnockoutJsの基本的な部分はだいたいこんな感じです。jQueryだけで実装したときよりもスッキリしたコードになったと思います。まだ確認できていない便利機能がいろいろあるので一度公式サイトを見てみるとおもしろいと思います。
JavaScriptを使った開発ですがWinter'15でRemoteObjectsの機能が正式リリースされたことで以前より開発しやすくなりました。今回のサンプルでも利用していますが、Apexクラスの処理を経由するよりサクサク動作します。複雑な処理はApex側に任せたほうがいいと思いますが、初期表示の検索やステータスの更新、レコードの削除などシンプルな機能はRemoteObjectsでやってしまうのがいいかもしれないです。
最後に、今回デザインの方ではBootstrapSF1を利用しました。ボタンやテーブルなどに簡単にSalesforce1スタイルを適用できるので効率よく開発が行えました。Salesforce組織以外でも利用できるのですごく便利です。
以上、Salesforce1 Advent Calendar 2014 - 12月3日の記事でした。
Salesforce1 Advent Calendar 2014 - Qiita