7 tspn_次世代uiフレームワークについて

次世代UIフレームワークについて

李端明

TerraSky Power Night 2013/12/05

1

Dreamforce 2013

Dreamforce 2013で最も印象に残った発表内容は？

2

もちろんこの方

3

salesforce 1

4

salesforce 1

salesforce 1とはなにか？

5

salesforce 1とは？

6

salesforce 1とは？

salesforce 1≠モバイルアプリマルチプラットフォームではあるが、モバイル専用ではない

モバイルファーストとあるが、モバイル専用とは言っていない

近いうちにデスクトップアプリケーションをリリースする噂が・・・

これからSalesforceの開発者は全員Auraについての知識が必要になるかも？

どうやらUIには”Aura”というものを使うらしい Auraについて勉強しなきゃ！

※発表者個人の感想であり、

効果・効能を示すものではありません。

7

Auraに関する情報は意外に少ない

Dreamforce通して、Auraに関するセッションは2つしかない

Future of Sites & Community Pages; Building Custom

Pages with Aura Widgets

Introducing Aura: Rapid Mobile Development with Reusable Components

8

Auraとはどういうものか？

Aura is a UI framework for developing dynamic web applications for both desktop and mobile devices

デスクトップとモバイルデバイスの両方のための

動的なWebアプリケーションを開発するためのUIフレームワークである

9


Salesforce TouchはAuraで作られた

10


salesforce 1もAuraで作られた

11

Auraの特徴は？

Mobile First!

拡張可能コンポーネントを作成可能

オブジェクト指向

早い！ UIはクライアントサイドでレンダリングされる

タグベースでレイアウトを作成

オープンソースである

そしてJava EEサーバーで動作する

12

どうすればAuraにアクセスできるか？

13

自分で動かす

Githubで公開されています

https://github.com/forcedotcom/aura

14

自分で動かす

そしてAura Documentation siteにあるQuick Startを見ればすぐに動かせます

15

自分で動かす

Aura Noteというデモアプリケーションも提供されている

16

ファイル構造

一つのコンポーネントは一つのフォルダで完結しており、それぞれ独立したcss,js,そしてコンポーネント本体であるcmpファイルで構成される。

17

cmpコードイメージ

コンポーネント自体はVisualforceと似たようなタグで構成され

VF1.0と違ってActionはサーバーサイド、クライアントサイド（JS）を同じように記述しアクセスすることが出来る

18

CSS,Javascriptコードイメージ

JavascriptとCSSはそれぞれコードの局所化を仕組みとして実装しており、独立性の高いコンポーネントを作成できる

19

余談



ブラウザ版salesforce 1へのアクセス方法？

https://【ドメイン】.salesforce.com/one/one.app

Chromeでしか動かない。ちなみにAuraのドキュメントやデモもChrome専用

もしやデスクトップアプリはChrome組み込み・・・？

今からメインブラウザを変えなきゃ！

20

余談



Visualforceページの編集画面の

この怪しげなチェックボックスをONにすれば・・・

21

余談

これで皆さまが今まで作成したVisualforceをoneで表示できる

やったね！ salesforce1対応完了！



22

疑問点

Aura＝Visualforce2.0？

ページレイアウト2.0にAuraで作成したパーツを配置できるか？

バックエンドは提供される？JPA？

公開されたAuraフレームワークはSalesforceと同じUI、スタイルになるか。そして平行して更新されるか

7 tspn_次世代uiフレームワークについて

Technology