2015/01/09 12:00:00

Salesforce ハックチャレンジ2014で見事に入賞!新兵器「LightningMessage」

このエントリーをはてなブックマークに追加

弊社のエンジニア倉谷が、Salesforceハックチャレンジ2014で見事に入賞!!

「チーム内の爆速コミュニケーションを実現するLightningアプリケーション、その名もLightningMessage」

倉谷は、今年4月のSalesforce1 Platform Mobile Hack Challenge 2014 Japan でも見事優勝を勝ち取っている、チームスピリット自慢のエンジニアです。

今回は、この昨年受賞した+Messageを、Dreamforce2014でベータ版が公開されたフレームワークのLightningに組込みました。これによって、Salesforce1では未対応だったChatterメッセージを、Salesforce1のLightningアプリケーションとして利用できるようにしています。メッセージングも含めてSalesforce1上で完結できるようになり、爆速コミュニケーションを実現し、ユーザ利便性の向上、シャドーITによるセキュリティリスクの緩和にも貢献します。まだ開発者しか試すことができないベータ版ですが、本気で便利です。使ってみれば分かります。勤怠や経費精算といったTeamSpirit本体と合わせて使うと、もっと便利です!1月のSalesforceDUG Meetupで授賞式があるようですが、とりあえず、写真は暫定で社内のバランスボールを持ってスマイルしてもらいました!


それでは、倉谷の奮闘ぶりを自筆の文章で振り返ってみたいと思います。

◯Salesforceハックチャレンジ 2014 での狙い

今回の Salesforce ハックチャレンジ2014は時間が限られた中での挑戦でした。Submit から10日間(2014/12/4〜2014/12/14)と限られた期間内に仕上げる必要があり、それに加えて、私事ですが息子が産まれたばかりで育児のため作業に使える時間がこれまでに増して制限されました。

作業時間が制限されることがわかっていたので、今回のハックチャレンジは下記の点を重視して望みました。
1. 少ない作業時間でも最大限使えるものを作る
2. Lightning Component を利用する
3. できるだけ軽量な作りにする

まさにワークスタイルを変えながらの挑戦でした。

Lightning Component が発表されたときからハックチャレンジでは Lightning Component を利用する心づもりでした。今回は、アプリケーションを作りきることで新しい技術である Lightning Compoenent を習得したいと考えました。

ただ、あまりアイデアを練る時間もなく一からアプリを作成してさらに新しい技術にチャレンジするのは時間的に厳しかったので、今回は以前作成した +Message を Lightning Component で書き換えることにしました。
まぁ、結果的にいい作品ができて受賞して賞金がもらえればなおハッピーです。

また、Lightning Component だけでどこまでできるか確認する意味で、ライブラリを最小限にして軽量な作りにすることを課しました。+Message ではライブラリとしてAngularJS / jQuery / Bootstrap(css/js) を利用し、加えてベンダープレフィックスに対応したCSSを作成するために Sass / Compass を利用していました。

◯Salesforce ハックチャレンジ 2014 の応募を終えて

最終日の午前中にひと通りの実装を終えて、午後はバグ取りと動画やREADMEを作成するというかなり厳しいスケジュールでしたが、期日内に形にまとめて提出することができました。

当初の目標について、どの程度達成できたか振り返ってみました。
1. 少ない作業時間でも最大限使えるものを作れたか?
とりあえず、ひと通りの機能を備えたアプリケーションを作成できました。想定よりも作業時間が取れなくなっていったので、機能追加しようとしていたものについてはほぼ実装することができませんでした。
1つは途中まで実装を進めていましたが、解決に時間がかかりそうな問題が見つかり断念しました。

2. Lightning Component を利用できたか?
今回は Component を分割せずに開発したのですが、この点はもう少し検討したほうがよかったです。
途中までは Component を分割して Event で繋いでいたのですが、SPA(SimglePageApplication)で Component を分けても再利用する部品はなさそうと判断して、1つにまとめてしまいました。
とはいえ、1つのSPA内で再利用できるような箇所もあったので、Component に分割してもよかったかもしれません。

3. できるだけ軽量な作りにできたか?
LightningMessageは100% Lightning Component のフレームワークで作成しており、外部で利用したライブラリはBootstrapのスタイルシートのみで外部のJavaScriptライブラリは利用していません。機能的には落とさず、外部のライブラリをそぎ落とすことができました。
データバインディングについては AngularJS よりも Lightning Component のほうがシンプルに実装できました。

◯ 開発で苦労したこと
1.ドキュメントが少ない
Lightning Component はまだベータ版ということもあり、なかなか情報がありませんでした。
Apexから独自に定義したクラスのデータを返す方法、JavaScriptのローディング方法などSalesforce Lightning Advent Calendar 2014の投稿は参考になりました。

2.エラーメッセージがよくわからない
Typoなどがあってもエラーが分かりにくい問題があります。開発終盤ではブラウザが固まる現象も発生してデバッグは苦労させられました。

3.ベストプラクティスがない
Lightning Component で SPA を作成しましたが、コンポーネントの分け方、イベントの使い方、ページ遷移のさせ方などとりあえず実装できるけど、どうやるのがいいのか分からないことが多くありました。

◯ Lightning Componentに想うこと
<よい点>
・データバインディングを Lightning でやってくれる
 Visualforce ページでコントローラに記載していた変数を Lightning コンポーネントの属性として定義することで Visualforce と同じような感じでデータバインディングできます。コントローラ処理が JavaScript に移ったことで、これまでよりもインタラクティブな処理を書きやすくなっています。

・繰り返しなどのタグが揃っている
 VisualforceページのApexタグと同様ですが、繰り返し、表示/非表示の切替など標準的なタグが揃っているので、画面制御が簡単にできます。

・キャッシュ、JavaScriptコンパイル、ベンダープレフィックス対応をLightning でやってくれる
 CSSのベンダープレフィックス対応を Lightning で自動的にやってくれ、アプリケーションキャッシュ、JavaScript のコンパイル(Google Closure Compiler)はオプション切替できます。実際に効果を検証していませんが、気にしなくてよいのはよいと思います。

<改善・強化してほしい点>
・もう少しエラーメッセージを分かりやすくしてほしい
 Typoなどがあってもエラーにならずそのまま実行されたり、ブラウザが固まったりすることがありました。表示されるエラーメッセージも原因が分からないものが多く、改善してほしいです。

・アンカータグ(<a>)などアクションを定義するタグについては標準タグを準備してほしい
 入出力系のタグについては標準タグ(ui:〜)が用意されていますが、アンカータグは標準タグが用意されていません。アンカータグはBootstrapなどを利用するとアクションを定義することが多いので、パラメータ付きのイベントを発生させられるような標準タグがあると便利だと思います。

・UI周りのライブラリをLightning側で用意してほしい
 現時点ではBootstrapなど外部ライブラリを利用してUIを組み上げるようになっています。少しリッチなUIを組み立てようとすると外部ライブラリを組み込む必要があり、面倒なところがあります。Lightningとして標準的なUIライブラリを提供してもらえるとより生産性が上がると思います。

◯最後に
今回のハックチャレンジでは「オープンソース賞」をいただくことができました。
ありがとうございます!

このような機会があると、新しいアプリケーションやサービスを考えたり、新しい技術に触る機会を持てたりします。また、1つのものを作り上げるために企画・製造・プロモーションを短期間に経験できる点もよいところです。
次の機会があれば、また時間の許す限り挑戦したいと思います。

Support
Page topへ