読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:KnockoutJSとSalesforce1 Platform

海外のForce.com Developerの方がおもしろそうな記事を投稿していました。『Get Started With KnockoutJS on the Salesforce1 Platform』というタイトルの記事です。

f:id:tyoshikawa1106:20141117203148p:plain

Get Started With KnockoutJS on the Salesforce1 Platform


KnockoutJSをつかってSalesforce1アプリを開発しようという内容です。KnokoutJSの特徴についても簡単に触れられていて、「シングルページアプリケーションを開発するときに便利です。」という感じのことも記載されていました。


記事内の『Let's Get Started!』のところでGitHubへのリンクが貼られています。

f:id:tyoshikawa1106:20141117211047p:plain

KnockoutWorkshop/knockout.md at master · mattlacey/KnockoutWorkshop · GitHub


GitHubではSalesforceにログインするところから、ページやクラスを作成して実際に動かしてみるところまでの手順が紹介されていました。

f:id:tyoshikawa1106:20141117211258p:plain


最終的にはこんな感じの画面を作成できるみたいです。

f:id:tyoshikawa1106:20141117211450p:plain


ちょっと試してみたのですが途中でよくわからなくなってしまったため、実際に画面を表示するところは確認できていないのですが、内容をきちんと理解できればいろいろ参考になりそうな感じだと思います。


KnockoutJSのサイトへのリンクも貼られています。

f:id:tyoshikawa1106:20141117211827p:plain

Knockout : Home

ここから必要なファイルをダウンロードできるので、Salesforceで使いたいときは静的リソースにアップすれば利用できると思います。


KnockoutJSの使い方について知りたい場合は、ヘッダーメニューからいけるTutorialが便利です。

f:id:tyoshikawa1106:20141117212354p:plain


Tutorialのページは次のようになっています。

f:id:tyoshikawa1106:20141117212450p:plain


Tutorialページは4つの構成で分かれています。左上部分に表示された手順通りに右側部分のコードを修正すると左下部分のプレビュー画面で動作確認出来る仕組みです。英語表記ですが、修正後のコードが表示されるので特に悩むこと無く試せると思います。

f:id:tyoshikawa1106:20141117212817p:plain


最初のチュートリアルとなっている『Tutorial:Introduction』を一通り試してみました。このTutorialはStep1〜Step5まで用意されています。シンプルな内容なので短い時間で簡単に確認できると思います。

Step1

まずは左上部分の説明を下の方へスクロールしていくとサンプルコードが記載されています。

f:id:tyoshikawa1106:20141117213217p:plain:w300


このコードをコピーして右上のViewのコード部分に貼り付けます。

f:id:tyoshikawa1106:20141117213413p:plain:w300


コードを貼り付けた後は左下の部分にあるRunボタンをクリックしてください。outputされていた内容が更新されることを確認できると思います。

Run実行前

f:id:tyoshikawa1106:20141117213742p:plain:w300

Run実行後

f:id:tyoshikawa1106:20141117213600p:plain:w300


このようにHTMLのコードとJSコードを指示通りに変更していくことで、どのような処理が実行されるかを確認していくことができます。


Step1はこれで終了です。最後までスクロールするとContinueボタンが表示されているのでクリックしてStep2へ進めます。

f:id:tyoshikawa1106:20141117214000p:plain:w300

Step2

Step2からHTML側とJS側の両方を変更していきます。

f:id:tyoshikawa1106:20141117214151p:plain:w300

f:id:tyoshikawa1106:20141117214159p:plain:w300

f:id:tyoshikawa1106:20141117214407p:plain:w300

f:id:tyoshikawa1106:20141117214418p:plain:w300


指示通りに進めればoutputTextだった箇所がinputTextに変更されるのを確認できると思います。

f:id:tyoshikawa1106:20141117214604p:plain:w300


これでStep2も完了です。Continueボタンで次のStepへ進みます。

Step3

Step3も同様の手順で進めれば大丈夫です。

f:id:tyoshikawa1106:20141117214919p:plain:w300

f:id:tyoshikawa1106:20141117214941p:plain:w300

f:id:tyoshikawa1106:20141117214950p:plain:w300

f:id:tyoshikawa1106:20141117215002p:plain:w300


Step3ではLastNameとFirstNameの値を組み合わせてFullNameを表示する方法を確認できました。続いてStep4です。

Step4

f:id:tyoshikawa1106:20141117215340p:plain:w300

f:id:tyoshikawa1106:20141117215407p:plain:w300

f:id:tyoshikawa1106:20141117215433p:plain:w300

Step4を進めると次のようにボタン表示が行えます。

f:id:tyoshikawa1106:20141117215548p:plain:w300


ボタンのクリック処理も実行できます。このサンプルではLastNameが大文字に変更されるようになっていました。

f:id:tyoshikawa1106:20141117215700p:plain:w300

Step5

Step5まで進むとGood Jobと完了メッセージが表示されます。


以上が『Tutorial:Introduction』の内容です。

f:id:tyoshikawa1106:20141117215920p:plain


Tutorialですが、他にも様々な内容が用意されているみたいです。そちらの方はまだ確認できていませんが今回のチュートリアルと同じように進められると思います。

f:id:tyoshikawa1106:20141117220026p:plain


このような感じでKnockoutJSについて学べるようになっていました。基本的な動作を確認できたら、実際にSalesforce1アプリ開発で利用できると思います。プレビューで表示されたテキストボックスを見る感じだと固有のCSSが適用されることもなさそうなので、Bootstrap SF1と組み合わせたりするとおもしろそうです。