Salesforce1アプリ作ってみようと思いつつ特にアイデアもなかったのですが、Google+のイベント機能が参考にするのにちょうどいいなと思ったので、最近覚えたOneStarterとVisualStrapを使って土日でイベント機能の開発として勉強してみました。
つくってみた画面
イベントの一覧ページ
サイドメニューのイベントタブから表示します。
イベントの詳細ページ①
Chatterフィードの投稿や参加情報の確認、登録を行う画面です。
イベントの詳細ページ②
詳細情報や交通アクセスなどを表示でいます。
詳細ページ①と②は横スライドで切り替わります。
とこんな感じになりました。画面を表示しただけで機能の実装は全然やっていないのですが、OneStarterとVisualStrapを実際に使って開発してみて、いくつか気になることが出てきました。というわけで今回はそちらをまとめておこうと思います。
OneStarterとVisualStrapを使ってみて気になったこと
- OneStarter の jquery.onestarter.js を読み込むとマージン的な隙間が追加される
- 「 /(objectId) 」で遷移するとフルブラウザ版の画面が表示される
- URLパラメータはちゃんと取れる
- OneStarterとVisualStrapを同時に適用するとCSSに影響が出る箇所がある
- reRender更新使用不可
- outputFieldのリンクはつかえない(フルブラウザ版の画面が表示される)
- Input系の挙動がおかしい
だいたいこの辺りが気になりました。
まず1のマージンですが、OneStarterを使うと上下左右に隙間を追加してくれ見た目を整えてくれます。これは jquery.onestarter.jsを読み込んだタイミングで行われました。基本的には便利なのですが、ヘッダーなど画面全体に表示したいときにも隙間が追加されてしまうのがすこし困る気がします。
通常このように画面一杯にヘッダーを表示できます。
OneStarterを使うとwidth100%でも隙間が追加されてしまいました。
jquery.onestarter.jsを読み込んだタイミングで強制的に追加されるみたいです。
2の「 /(objectId) 」による参照ページへの遷移ですが、Salesforce1ではこのようなリンクでは遷移できなくなっているみたいです。ただし、「{!$Page.XXX}」という方法でのリンクは問題ありませんでした。
ちなみにSalesforce1で参照ページへリンクする方法ついてはこちらのブログでまとめられていました。
3のURLパラメータについてですが、Salesforce1のURLは通常と異なるので、もしかして使えないかなと思ったりしましたが特に問題なく取得できました。
4のCSSへの影響についてですが、OneStarterとVisualStrapを同時に利用したときにカルーセル機能のイメージが正常に表示されませんでした。使用には問題ありませんが見た目が崩れてしまうと、ちょっと困る感じです。この問題はVisualStrapを使うときに宣言するvs:visualstrapblockタグをone-carouselの中で宣言するようにして回避できました。
5のreRenderについてですが、reRenderによる画面リフレッシュを行うとOneStarterのCSSがクリアされました。reRender自体がSalesforce1の開発では推奨されなかったと思いますが、このようになることも覚えておくといいかもしれません。
6のoutputFieldのリンクの話ですが、こちらリンクをクリックするとSalesforce1から強制的にフルブラウザの画面に変更されました。outputFieldは推奨されないという話も聞いた気がしますが、このように動作することは意識しておいたほうが良さそうです。
最後にInput系の挙動がおかしいように感じました。確認したのはInputTextですが、one-carousel内でarticleタグ内を宣言し、その中でinputTextを利用すると入力不可になりました。one-carousel内でなければ一応は使えましたが、表示がグレーアウトになってしまいました。
OneStarterとVisualStrapを使って実際に開発してみて気になったことはこんな感じです。OneStarterですが思ったより扱いづらいところがある気がしました。使い方が間違っているかもしれませんが、一からCSSを適用していった方が後々楽になる気がします。
とりあえず実際に使って開発してみていろいろ気づくことができたので良かったです。OneStarterも使ってみることでSalesforce1アプリ開発のイメージができたんじゃないかと思います。
