読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:React×Visualforceを試してみました

ReactをつかったVisualforceページの開発を試してみました。Reactをつかって開発するときは以下の対応が必要になりました。

ホームディレクトリのパス修正

index.htmlなどのホームディレクトリのパスは通常『/』になっていると思います。Visualforceページの場合は『/apex/MyApp』という感じになります。なのでルーティング設定やリンク先のURL指定は『/apex/MyApp』を基準に指定する必要があります。
f:id:tyoshikawa1106:20160521143527p:plain

JSやCSSを静的リソースにアップロード

CSSファイルやbuild後のJSファイルなどを圧縮してZIPファイルに変換します。
f:id:tyoshikawa1106:20160521143816p:plain


変換できたらそれを静的リソースにアップします。
f:id:tyoshikawa1106:20160521143850p:plain

Visualforceページの作成

静的リソースへのアップロードができたら後はVisualforceページを作成するだけです。基本的には元になったHTMLファイルと同じ構成です。変更箇所はapex:pageタグの宣言とJSやCSSの読み込みを静的リソースに変更するだけです。
f:id:tyoshikawa1106:20160521143944p:plain

元になったHTMLファイル

f:id:tyoshikawa1106:20160521145855p:plain


これでVisualforceページにアクセスするとReactをつかって開発したアプリが表示されると思います。開発者コンソールでエラーログが出力されていないかも確認してみましたが特に問題はありませんでした。
f:id:tyoshikawa1106:20160521144204p:plain

開発時の注意点

上記方法で開発する際の注意点です。

静的リソースとアップロードサイズの上限

静的リソースにアップロードできるファイルサイズには5MBまでと上限があります。今回のデモでは全て1つにまとめて圧縮しましたが、画像やSLDSなどのライブラリをまとめて圧縮してしまうとあっというまに5MBを超えてしまいます。
f:id:tyoshikawa1106:20160521144600p:plain:w300

Lightning Design Systemなどのライブラリは別ファイルとして静的リソースにアップロードするようにした方が安全です。

標準スタイルへの影響

Reactの問題ではありませんが、CSS周りの注意点です。上記デモアプリのようにSalesforce標準ヘッダーを非表示にして標準スタイルシートをOFFにするときは特に気にする必要はありませんが、標準ヘッダーありの場合、標準スタイルに影響がでないように調整する必要があります。


例えば今回のアプリだとロゴ表示や背景色に影響がでてしまいました。
f:id:tyoshikawa1106:20160521145032p:plain

元のアプリのコード管理

Visualforceページで利用するJSファイルなどはビルド後のファイルだけとなります。ですが、ビルド前のJSファイルなども残しておかないと保守できなくなってしまいます。
f:id:tyoshikawa1106:20160521145240p:plain


ビルド前のプロジェクトファイルは圧縮しても間違いなく5MBを超えることになるので、静的リソースで管理することはできません。
f:id:tyoshikawa1106:20160521145453p:plain

組織のファイルストレージ圧迫にもつながりますので、GitHubやBitbucketなどにリポジトリを作成してそこで管理する必要があると思います。


ひとまずこんな感じの注意点があることを認識して開発する必要がありました。

React×Visualforceの参考サイト

React×Visualforceについては海外のブログでもまとめられています。