Force.comでHello Worldを表示させてみた

Force.com Visualforce platform

f:id:watass:20141026173858j:plain


来る12月4日、Salesforce World Tour Tokyoが開催されますね。
Salesforceとは、今話題のクラウドCRMなのですが、Force.comという独自のPaaSを保持し、単なるCRMツールとは一線を画すサービスとなっているらしいです。
イベントも間近ですので、簡単なSalesforceでの開発について勉強してみます。




Force.comとは？

Force.comとは、Salesforce上のアプリケーションを作成するためのPaaSです。Salesforceはクラウド上でマーケティングや顧客管理、リード管理などを行えるCRMツールです。
Salesforceはセールスフォース・ドットコム社が提供するSaaSでありますが、Force.com上で、様々なデベロッパーが参加し、開発をすることで、サービスとしての価値を拡張することができるプラットフォームです。PaaSですので、特に開発環境を設定することなく、ウェブ上で開発をすることができるのもいいところです。
昨今、MA（マーケティングオートメーション）が流行しつつありますが、Force.comでSalesforceを拡張することで、単なるCRMツールから独自の各種サービスを統合したMAツールに進化させることもできる利点があります。

開発者の観点から見れば、曰く従来のプログラマが不要になるほど簡単で高速な開発が可能になるプラットフォームであると言われています。MVCフレームワークを採用しており、多用されるようなパーツは既に開発されていたり、一度開発したものを何度も利用することができるため、非常に高速な開発が期待できます。
Force.comにおけるMVCフレームワークは、ViewとしてPageがあり、Pageを記述するための言語として、Visualforceを利用します。その他のModelとControlを実現するためには、Javaライクやなオブジェクト指向言語、Apexを利用します。
Visualforceはhtmlライクなマークアップ言語であり、どちらの言語も新しく習得するコストはあまりない、とのことです。今回は、Visualforceを使ってHello Worldを表示するようなプログラムを作成してみましょう。


Developer Free Editionにサインアップ

まず、開発を始めるためにForce.comのDeveloper Free Editionに登録します。
https://developer.salesforce.com/signup

f:id:watass:20141026194340p:plain

Salesforce関連のアカウントはいろいろ種類があるのですが、とりあえず無料で開発を試してみたい、という場合にはDeveloper Free Editionでよいそうです。
各種情報を登録してサインアップしてください。

f:id:watass:20141026194458p:plain

登録が完了したら、上記のようなホーム画面にアクセスできます。
これでSalesforceを利用することができます。


カスタムアプリを作成する

登録が完了したら、早速開発を進めていきましょう。ほぼ設定なしでとりあえず開発を始めることができるのがPaaSのいいところです。
早速中央付近にある「アプリケーションを追加する」をクリックします。
以下のようなポップアップが表示されますので、情報を入力してください。

f:id:watass:20141026195419p:plain

下にプレビューが表示されるのでイメージがつきやすいと思いますが、作成したアプリケーション名は右上のメニューの一覧に追加され、ラベル名は、そのアプリケーションを選択中に表示されるタブの名前になります。
今回はHello Worldを表示するだけなので、アプリケーション名はHello World、ラベル名はPrint 'Hello'としました。
入力を終えたら「作成」ボタンをクリックします。基本的なアプリ作成はこれで完了です。
実際に、Hello Worldアプリを選択し、Print 'Hello'タブを選択してみましょう。

f:id:watass:20141026200117p:plain

とりあえずここまででアプリ制作は完了なのですが、ここからHello Worldを表示させるためにはどうすればいいんだ？となってしまいました。
このPrint 'Hello'タブを編集できればいいんですが、ちょっと複雑になりそうだったので、Pageを作成し、それをタブと紐付けて、タブをHello Worldに追加することで、Hello Worldを表示することにします。


Pageを作成する

まず、上のメニューにある、自身の登録名の隣にある「設定」ボタンをクリックし、右上のメニューから「ビルド→開発→ページ」を選択します。

f:id:watass:20141026201058p:plain

クリックすると、Visualforceで作成したページ一覧が表示されます。
まだ何も表示されていないと思いますので、「新規」をクリックします。
すると、Visualforceを編集して登録することができる画面が表示されます。

f:id:watass:20141026201503p:plain

表示ラベルや名前は、適当でOKです。
下に表示されているHTMLっぽいものがVisualforceです。これを編集することでUIを色々変えることができるのですが、とりあえず今はデフォルトのまま保存しましょう。

これでページが作成できたので、このページに紐づくタブを作成します。


タブを作成する

次にタブを作成します。同じく設定メニューから、「ビルド→作成→タブ」を選択します。

f:id:watass:20141026203015p:plain

カスタムタブのホーム画面が表示されたら、Visualforceタブの「新規」をクリックします。
その後、表示されるVisualforceページのプルダウンに、先ほど作成したPageが表示されることがわかると思います。

f:id:watass:20141026205244p:plain

ここで、作成したPageを選択し、タブ名やラベルなどを適当に設定し、次のステップへ進むと、プロファイルや追加するアプリなどが選択できます。
プロファイルは細かく設定可能なのですが、ちょっと面倒臭いので、とりあえず全部デフォルトで表示、追加するアプリは先ほど作成したHello Worldアプリのみにしておきましょう。

以上で設定完了です。Hello Worldアプリを選択したままならば、タブに作成したタブが表示されているのがわかると思います。選択すると、以下のように表示されます。

f:id:watass:20141026205836p:plain

ここに表示されている文章は、先ほどページ作成の際にデフォルトのまま設定した、Visualforceの記述どおりになっています。つまり、該当のPageのVisualforceを編集することで、好きなUIを作成することができるということです。


開発者コンソールからPageを編集する

では早速、Pageを編集してみましょう。
名前のメニューからプルダウンして、開発者コンソールを選びます。

f:id:watass:20141026210449p:plain

すると、新規ウインドウとして開発者コンソールが開きますので、「File→Open」を選択します。

f:id:watass:20141026210801p:plain

Entity TypeのPagesを選択すると、Entitiesに作成したページが表示されますので、これを選択してOpenします。

f:id:watass:20141026211245p:plain

これで選択したVisualforceのソースが表示されます。
ここでソースを編集し、保存することで、実際の画面に変更が反映されます。
コード補完もありますので、意外とスムーズにプログラミングできそうです。

今回はVisualforceの勉強ではないので、以下のような簡単な内容に変更してみます。

<apex:page>
  <apex:pageBlock>Hello World!</apex:pageBlock>
  <h1>
    This is TEST PAGE.
  </h1>
</apex;page>

これで保存し、再度、先ほどのページを読み込んでみましょう。

f:id:watass:20141026220429p:plain

このように、編集内容が反映されたことがわかります。
これでHello Worldを表示させることができました。


まとめ

  • カスタムアプリを作成したら、それに紐づくページとタブを作成するだけ
  • ページを記述する言語はVisualforceで、HTMLライクに書ける
  • 開発者コンソールから、作成したPageを編集することができる


可能性に満ち溢れるForce.com

PaaSを触ったのは実は初めてなんですが、確かに高い可能性を感じます。
噂によると、クラウド上での開発なので、APIなどを経由せずとも、高速でデータをModel間でやりとりできたりするらしいですね。
何より、80%はクリックで、20%コーディングをするだけで開発できる、という点には、高速開発を目指すエンジニア的には大変Goodです。
しかし、未だにForce.comがどこまで色々なものを開発できるものなのか、いまいち理解できていないので、作りたいもののイメージもはっきり固まっていないのがネックですね。
もう少し色々調べたり、World Tour Tokyoなどを経て、経験を積んでいきたいです。
ただ、VisualforceもApexもまだまだドキュメントが少ないんだよなぁ・・・


参考にした記事

Force.com Free Editionで学ぶSalesforce開発（1）：Salesforceで開発するということ (1/2) - ＠IT
# 安心と信頼の@ITさんの記事です。基本的な知識習得に活用させていただきました。
Force.comプラットフォームのすすめ （1/2）：CodeZine
# Codezineさんの記事です。プログラマ目線からForce.comについて書いてあるので大変参考になります。
Force.com 開発マニュアル - Visualforceを使う：ITpro
# ITproさんの記事。Visualforceのコーディングについて書いてありますのでおすすめです。
Force.com - New App "Hello World" - YouTube
# Ricardo Santos氏のYoutube動画です。日本語ではありませんが、操作画面付きでわかりやすいです。