とあるStartupに勤めるエンジニアの技術ブログ

Salesforce、テスト関係の技術ブログなどを書く予定

Salesforce1 Platform Mobile Hack Challenge 2014 Japan に参加しました!

Salesforce1 Platform Mobile Hack Challenge 2014 Japan2014 Japan Salesforce1 Mobile Hack Challenge | Developer Force.com は、Salesforce1 Platformを利用するモバイルアプリケーションを期間内に作成し、応募するものです。なんと賞金総額160万円、一等賞には100万円が贈られます。何がすごいかというとSalesforce1 Platformを使って、しかもモバイルアプリケーションを作るエンジニアの絶対数が…(げほげほっ)。

嘘です。Herokuエンジニア入れたら大量にいます(参加してくるのかな?)。

一応Salesforce界隈で飯を食ってるエンジニアなので、諸々の勉強を兼ねて参加した次第です。

ちなみに、期待の受賞者発表は4月15日までに行われるようです。


応募アプリ

わたしの応募したアプリ「+Message」はこちらです。

+Message(Salesforce1 Platform Mobile Hack ...

GitHub リポジトリkuratani/plusMessage · GitHub

なんの変哲もないSalesforce1 Mobile上で動作するChatterメッセージのモバイル・アプリです。
もうすぐ本家もサポートしてくるかなぁ、と思いますが、Salesforce1 Mobileではまだ実装されていなかったので、間隙を突いて実装したものです。Spring'14とかで実装されてきたらちょっと悲しい…。

実装上のあれこれ

今回のモバイルアプリはSalesforce1 Mobileで動作するアプリです。ハイブリッドアプリのネイティブ部分がSalesforce1 Mobileとなり、実装するアプリがWebViewで動作するHTML5アプリになります。Visualforceページを独自タグをあまり使わず、ほぼHTML5で実装しています。データバインディングをAngularに任せたため、独自タグを利用しなくてもすっきりした実装になっています。

ChatterメッセージのAPIはWinter'14でリリースされたもので、意外と最近なのでビックリでした。
今回は、APIコールの回数を気にせず使えるようにChatter in ApexをJavaScript Remoting経由で使いましたが、REST APIでも公開されているので、Non Apexでコーディング可能です。暇があれば、JSforce でも使って書き直してみたいと思います。

JavaScriptやらCSSなどを静的リソースにまとめる処理はAntで書いたのですが、JavaScriptでの実装が多くなるので、もっと最近のビルドツールを使ってもいいかなぁと思いました。SalesforceにデプロイするのはAntが一番お手軽なんで好きなんですけどね。ビルドファイルにGitHubにコミットしているので、気になる人は見てやってください。

感想

今回は一人で使ったことのないものを試してみることを目標にアプリケーションを実装しました。わりと最近の技術を試すことができて勉強になりました。こんな機会でもないとちゃんとソースコードを書いてみることもないのでよい機会でした。

Angularはサンプルとなるソースコードが少ないこともあり、ダイアログを開いた際の処理の書き方とか迷いました。コワーキングスペースで会うエンジニアさんにAngularのことを聞くと、GitHubなどに上がってる実際のソースコードを見るのが一番わかりやすいとか。多言語化のモジュール(angular-translate)は今回使ってみましたが、簡単に書けてお手軽に多言語化できました。

Sass/Compassも今回はじめて触ってみたのですが、便利ですね。CSSの面倒な部分をかなり隠してくれます。コンパイルの過程で構文間違いなども見つけてくれるので、とてもいい感じです。元々は、Salesforceが公開しているモバイルデザインテンプレートで使っていたので入れてみたのですが、もう手放せない感じです。
そういえば、モバイルデザインテンプレートのソースコードコンパイルすると、コンパイル後のファイルと異なる箇所があったような…。修正されてるかな。

実は、モバイルデザインテンプレートを利用して最後まで行こうかと思っていました。結局ダイアログを使いたかったのでBootstrapを利用することにしました。Bootstrapはバージョン3からフラットデザインになり、Salesforce1のデザインとも自然に馴染んでいたので使いやすかったです。

おまけ(One More Thing)

動画はApple広島弁吹き替えバージョンにインスパイアされて作ってみました。

Salesforce1への要望

最後にSalesforce1に今後期待する要望を書いておこうと思います。

  • Chatterメッセージで未読件数を取得するAPI、投稿ごとに未読か既読か取得するAPIなど、APIを整備してほしい(Chatterデスクトップを作れるくらいにAPI公開してほしい)
  • Compassで生成してくれるCSSスプライトがそのまま使えるようになるとうれしい(URLがどうしてもねぇ…)
  • モバイルデザインテンプレートはもう少し網羅的なセットにしてもらいたい(Bootstrapのテーマにしてほしい)

enjoy hackathon!