画像、ビデオおよび PDF スライド
CoBrowse/Engage for Portals は、画像、ビデオ、および PDF のスライドに対応しています。CoBrowse プレゼンテーションには 300 スライドまで含めることができます。
- 画像 – 画像は任意の Vault サポート形式を利用して任意の解像度、サイズおよび縦横比で作成できます。Vault にアップロードする際に画像は .JPG ファイル に変換され、.JPG ファイル として Engage プレーヤーに表示されます。
- プレーヤーが画像よりも大きい場合、画像に黒帯が表示されます
- プレーヤーが画像よりも小さい場合、プレーヤーの画面に合わせて画像のサイズが調整されます
- 画像は、全画面モードでは、縦横比が変わらないように、画面に合わせて拡大されます。
- 画像は解像度 800 x 600 で表示されます。
- ビデオ – ビデオは任意の Vault サポート形式を利用して 720p および任意の縦横比 で作成されます。Vault にアップロードする際に、ビデオは .mp4 ファイルに変換され、さまざまなビットレートにエンコードされます。Engage プレーヤーは、接続速度に合わせて最適なビットレートを自動的に選択します。
- プレーヤーがビデオよりも大きい場合、ビデオに黒帯が表示されます
- プレーヤーがビデオよりも小さい場合、プレーヤーの画面に合わせてビデオのサイズが調整されます
- 動画は、全画面モードでは、縦横比が変わらないように、画面に合わせて拡大されます。
- PDF – Vault が表示可能レンディションを作成するドキュメントタイプは、PDF スライドとして使用することができます
- PDF はコンテンツを提供するのに一般的なファイルタイプです
- PDF は、CoBrowse/Engage プレゼンテーションに含めることができます
- 最良のパフォーマンスが得られるよう、PDF ドキュメントを 100 ページに制限します
- Engage プレーヤーが、PDF スライドを見つけると、プレーヤー内におさまるように PDF コンテンツを自動的にリサイズします。PDF には、プレーヤーのコントロールとボタンがすべて有効化されたものが表示されます。
全画面モードは以下のブラウザに限定されます: Android 用 Chrome、デスクトップブラウザ用 Chrome、Firefox (ノート PC 専用)、Safari (ノート PC 専用)、IE11 (ノート PC および Surface)。
画像、ビデオ、および PDF スライドを追加するには:
- マルチチャネルスライドドキュメントタイプとして、コンテンツを直接 Vault にアップロードします。
- Engage コンテンツフィールドを「はい」に設定します。
- CRM メディアタイプ選択リストからオプションを選択します: 画像、PDF、ビデオ、HTML。
Vault は、ソースドキュメントから、必要なファイル (ポスターおよびサムネイルを含む) を自動的に作成してパッケージ化します。
マルチチャネル HTML コンテンツを構築する
ユーザは、チャネル全体で使用できるコンテンツを作成することができます。ただし、すべてのプラットフォームでまったく同じように動作する HTML コンテンツに投資することが、常に現実的または費用対効果が高くなるわけではありません。特に、Engage for Portals または CoBrowse を使用して、ウェブのコンテンツを HCP に提供する場合にはそうです。
HCP は、さまざまなウェブブラウザを使用しており、多くの医療機関や個人開業医院では、Internet Explorer 8 といった旧ブラウザもまだ一般的に使用されています。旧ブラウザでは、iPad または Windows の Veeva CLM 向けに開発された HTML5 リッチコンテンツを表示することができません。
クロスブラウザ開発アプローチ
ウェブブラウザには、HTML、CSS および JavaScript の標準についてさまざまな準拠水準があります。最新のブラウザ (Firefox、Chrome、Safari および Microsoft Edge) は、標準に準拠しています。Internet Explorer 8/9/10 といった旧ブラウザの準拠水準は低いです。HTML5 標準を使用して作成されたコンテンツは、旧標準との後方互換性を確保するよう追加の労力を注がなければ、正しくレンダリングしません。一般消費者向けインターネットコンテンツを作成するベストプラクティスは、広く文書化されている一方、信頼できる情報源はありません。Veeva では、Mozilla の Web Developer Guide を基準として使用することを推奨しています。
2 つのコンテンツ開発アプローチは、Veeva CLM で使用可能で、さらに Engage for Portals または CoBrowse を使用したウェブコンテンツにも適用することができます。
- すべてのブラウザでレンダリングする 1 つのプレゼンテーションを作成します。これにより、1 つのプレゼンテーションが確実に再利用可能となりますが、さらなるテストや設計に関する制約が必要となります。
- 通常のコンテンツよりも設計がシンプルです。これにより、コンテンツが旧ウェブブラウザで確実にレンダリングします。
- 条件付きロジックを使用して、ブラウザの機能を判断し、コンテンツを動的に調節します。このロジックは、複雑になりますが、プレゼンテーションが 1 つであれば可能です。
- それぞれわずかに異なるプレゼンテーションを 2 つ作成します: 1 つは、デバイスのブラウザでのみレンダリングする Veeva CLM 用で、もう 1 つは、すべてのインターネットブラウザで実行する Engage for Portals および CoBrowse 用です。
- このアプローチは、コンテンツをある程度まで複製する必要がありますが、テストとデプロイがより簡単になります
- CLM コンテンツに、ウェブコンテンツよりも高度な処理を追加することができます
- 更新サイクルとリリースサイクルを、CLM と Engage for Portals/CoBrowse で独立させることができるため、リスクが軽減されます
- CLM コンテンツを、視覚的に複雑にし、CLM JavaScript ライブラリを使用して非常に複雑なものにする必要がある場合、これが最良の方法です。
HTML コンテンツパッケージ
HTML スライドコンテンツも保護されます。ただし、HTML スライドが、HTML ページ内で参照される多様なアセット (画像、CSS、JavaScript、フォント) の集まりであるため、主となるスライド HTML ページしか保護できません。ページ内にリンクされたすべてのアセットは、安全なトークンを使用せずに、ウェブ上で技術的にアクセス可能ですが、スライド全体をリバースエンジニアするのに相当な努力が必要です。
例えば、スライド HTML ページの名前が index.html。
./doc_id/index.html
myslide1.html には、画像へのリンクが含まれ、サブフォルダに css と js ファイルが含まれます:
- ./doc_id/images/image1.jpg
- ./doc_id/shared/styles.css
- ./doc_id/shared/animations.js
特定のガイドラインを使用して、スライドのフォルダ構造内のコンテンツを整理します。以下のフォルダ名は、親スライドフォルダで HTML アセットをまとめるために確保されます。他のフォルダ名を使用できません。
- ./img/
- ./image/
- ./images/
- ./shared/
- ./html/
これらのフォルダ内のすべてのファイルは公開されています。ユーザがルートパスを知っている場合 (通常見つけ出すのが難しい場合がある)、これらのフォルダの場所からアセットを取得することができます。スライドを表すメインページが、認証トークンの裏側で保護されているため、コンテンツすべてにアクセスされることはありません。
これらのファイル拡張子は常に公開されています:
- .JS
- .CSS
- .TTF
- .WOFF
- .WOFF2
- .SVG
- .EOT
- .CUR
Vault にプレゼンテーションをアップロードする際に、以下のガイドラインに基づいてプレゼンテーションをパッケージ化し、ソースファイルとしてアップロードします。詳細は、Vault ヘルプの「手動でアップロードされる配布パッケージ」をご覧ください。
- any_name.zip
- index.html – 必須ファイル名。この名前はメインページに必須です。
- thumb.png – プレーヤーがサムネイル画像として使用する必要があるファイル
- (img/image/images/shared/html フォルダ)
レガシーの CLM パッケージ構造については、カスタム CLM コンテンツのパッケージ化のトピックで詳しく説明します。.ZIP ファイルは、フォルダ内の HTML ファイルと名前を共有します。例えば、cholecap-1-intro.ZIP ファイルと cholecap-1-intro.HTML ファイルは、cholecap-1-intro フォルダに保存されます。
Vault にコンテンツをロードする
すべての Engage コンテンツを Vault に保存する必要があります。各コンテンツが 1 つのドキュメントとして保存されます。
Engage のその他のプロパティは以下の通りです:
- CRM メディアタイプ: このフィールドは必須です。オプションは、画像、PDF、ビデオ、および HTML です。
- HTML 幅: コンテンツの幅; コンテンツが固定サイズでない場合、このフィールドは空白になります
- HTML 高さ: コンテンツの高さ; コンテンツが固定サイズでない場合、このフィールドは空白になります
- HTML ファイル名: レガシーのパッケージ構造を使用する際の HTML ファイルの名前; 現行のパッケージ構造を使用する場合、この値は「index.HTML」です
- キーメッセージ: 特定のキーメッセージを参照します
Engage コンテンツとマークされたマルチチャネルスライドは、マルチチャネルプレゼンテーションバインダ内に配置する必要があります。Vault は、画像、PDF、およびビデオの配布パッケージを作成し、Vault ドキュメントに添付します。ユーザは、HTML コンテンツの ZIP ファイルをアップロードする必要があります。Engage への送信がトリガーされると、配布パッケージが CDN に送信・発行されるため、CRM が Vault からメタデータを取得できます。詳しくは、インテグレーションおよびセキュリティプロセスをご覧ください。
- マルチチャネルプレゼンテーションは、マルチチャネルコンテンツレコードにマッピングします
- マルチチャネルマップ内のマルチチャネルスライドは、マルチチャネルコンテンツ資産レコードにマッピングします
- コンテンツ実装レコードも、マルチチャネルコンテンツをサイトに一致させるために作成されます
Vault で画像スライドを作成するには:
- 画像を選択します。
- マルチチャネルスライドドキュメントタイプとして Vault に画像をアップロードします。
- ドキュメントのプロパティを入力します。
- Engage コンテンツフィールドで「はい」を選択します。
Vault が画像を .JPG に変換し、.PNG サムネイル (200x150) を作成します。それから、ファイルを圧縮して Veeva 配布パッケージを作成します。ユーザは、サムネイルを修正できます。
Vault でビデオコンテンツを処理するには:
- ビデオを選択します。
- マルチチャネルスライドドキュメントタイプとして Vault にビデオをアップロードします。
- ドキュメントのプロパティを入力します。
- Engage コンテンツ = はいを選択します。
Vault は、ビデオを異なるビットレートに変換し、ビデオのポスター .PNG とサムネイル .PNG (200x150) を作成します。すべてのファイルが圧縮され、Engage 配布パッケージに配置されます。ユーザは、ポスターとサムネイルを修正できます。
Vault で HTML コンテンツを処理するには:
- カスタム CLM コンテンツのパッケージ化に従ってパッケージ化された ZIP ファイルを選択します。
- マルチチャネルスライドドキュメントタイプとして Vault に ZIP ファイルをアップロードします。
- ドキュメントのプロパティを入力します。
- Engage コンテンツフィールドで「はい」を選択します。
- 固定サイズの HTML コンテンツの場合、HTML 幅、HTML 高さを入力します。
- CLM パッケージ構造を使用する場合は、HTML ファイル名を入力します。Index.html を持つ新しい Engage パッケージ構造を使用する場合は、この情報を入力しないでください。
Vault は、ZIP ファイルに画像を見つけ、それをソースファイルとしてアップロードします。さらに Vault は、マルチチャネルスライドの配布パッケージとして ZIP ファイルを追加します。
プレゼンテーションを作成するには:
- マルチチャネルプレゼンテーションドキュメントを作成します。
- ドキュメントプロパティを入力します。
- Engage コンテンツフィールドで「はい」を選択します。
- プレゼンテーションを CoBrowse で使用できるようにする場合は、CoBrowse コンテンツフィールドで「はい」を選択します。
- 含めるための適切なマルチチャネルスライド (Engage コンテンツ = はい) を選択します。
- 適切なウェブサイトを選択します。
ユーザは、これらのキーメッセージ、ウェブサイト、製品プロパティを、CRM のレコードとして作成したら、それらを Vault オブジェクトのフレームワーク (VOF) レコードどして、Vault で手動で作成する必要があります。これらは、Vault ドキュメントのプロパティを介して選択できます。
詳細については、Vault ヘルプの CLM コンテンツの使用をご覧ください。
Engage/CoBrowse コンテンツをテストする
HTML コンテンツを Engage/CoBrowse でテストする前に、常にネイティブブラウザでテストしてください。Engage/CoBrowse メディアプレーヤーは IE8 以降をサポートします。コンテンツは、これらのブラウザでレンダリングするよう設計されている必要がある一方、コンテンツがブラウザで動作しない場合は、メディアプレーヤーでも動作しません。
Veeva では、Engage/CoBrowse でテストする前に、iframe でもテストすることが推奨されます。iframe は、コンテンツが Engage/CoBrowse のメディアプレーヤーでどのように動作するかをシミュレーションします。垂直寸法が意図したとおりに動作しない可能性があるため、iframe でレスポンシブなコンテンツを作成することは難易度が高いです。例えば、メディアクエリ、「vm、vh」単位、両方の組み合わせが意図しない動作の原因となる可能性があります。
以下は、iframe のランディングページのサンプルで、CoBrowse プレーヤーをホストするウェブページが、全ページ表示されるようにするものです:
<!DOCTYPE HTML>
<html>
<head>
<title>Engage/CoBrowse iframe コンテンツのサンプル</title>
</head>
<body>
<iframe style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: white;" frameborder="0" width="100%" height="100%" scrolling="no" src="./engage-cobrowse_content_page.html"></iframe>
</body></html>
Engage/CoBrowse コンテンツのヒント
- お客様が Internet Explorer 8 でも動作することを期待していると予想して、常にクロスブラウザ対応 HTML を使用します。Can I Use は、クロスブラウザ対応 HTML の信頼できる情報源です。
- ランディングページとコンテンツページにデフォルトのメタタグを使用します。メタを使用してコンテンツを拡張しないでください。例:
- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
- テキストや画像など、rem 単位を使用して、テキストや画像などは一切サイズ調整しないでください。デスクトップとモバイルとで予測できない結果が生じる可能性があり、また旧バージョンの Internet Explorer との互換性はありません。
- vw 単位を使用してサイズ調整をしないでください。Internet Explorer 8 との互換性がありません。
- jQuery といったサードパーティの JavaScript ライブラリが、Internet Explorer 8 以降に対応している必要があります。これは、旧バージョンのライブラリを使用するということを意味します。
- HTML コンテンツを Engage でテストする前に、iframe でテストします
- HTML コンテンツを Engage/CoBrowse でテストする前に、ネイティブブラウザでテストします
- HTML に埋め込まれた動画はサポートされていません
- HTML ポップアップに埋め込まれた PDF ドキュメントはサポートされていません
- 以下の Veeva JavaScript ライブラリ機能は、Engage/CoBrowse と連携しています。Engage に固有の JavaScript に関する詳細情報は、JavaScript ライブラリの Engage セクションをご確認ください。
- NextSlide()、PrevSlide() – 隣り合ったスライドに移動します
- gotoSlide() – 提供されたパラメータに基づいてスライドに移動します
- GetDataforCurrentObject() (アカウントオブジェクトに限定) – アカウント属性を表示します
- createMultichannelActivityLine() – クリックストリームのカスタムトラッキングを作成します
- gotoSlide JavaScript 機能は CoBrowse/Engage で使用できます。詳細は HTML5 コンテンツ作成を参照してください。
CoBrowse コンテンツのヒント
- Veeva JavaScript 機能を明確に使用しない場合でも、Veeva JavaScript ライブラリを含める必要があります。ライブラリが存在することを確認するには、プレゼンターのマウスを表す参加者の画面上の赤い点を探します。
- プレゼンターと閲覧者間の HTML コンテンツのタッチ操作を使用する必要があります。こちらから、Veeva JavaScript 機能の最新版を取得してください。
- JavaScript イベントは以下に制限されます
- onMouseClick
- onMouseMove
- 入力フィールドとチェックボックス選択アクションがサポートされるようになりましたが、CoBrowse HTML コンテンツでは使用できません。
- タッチイベントの防止
- ドラッグアンドドロップはサポートされていません
- ページレベルおよびドキュメントレベルのスクロールはサポートされています
- サブエレメントの複雑なスクロールはサポートされていません
- アクションが反映されることを確認するため、両サイド (プレゼンターと閲覧者) からコンテンツをテストします
- ユーザが、タッチデバイスから CoBrowse コンテンツをプレゼンテーションする場合、HTML スライドとホストページには、コード スニペットを含めて、タッチデバイスのユーザエクスペリエンスを向上させる必要があります。以下は、推奨されるコンテンツ変更ですが、必須ではありません:
- ユーザが iPad の画面をダブルタップしてもコンテンツが拡大されないようにします
- コードスニペットのサンプル:
- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
- タッチ操作でコンテンツを移動させる際に、iOS およびモバイル Safari 上でホストページがバウンスしないようにします。タッチデバイスのデフォルト動作では、ページを上下、左右にフリックするとウェブページがバウンスします。この動きは、プレゼンテーションの邪魔になり、CoBrowse コンテンツ内の移動が難しくなります。コードスニペットを 2 つのレベルに追加する必要があります。
- Engage for Portals/CoBrowse プレーヤーをホストするお客様のページ
- 各 HTML スライドページ (HTML スライド専用; 画像や動画スライドには不要)
- コードスニペットのサンプル:
document.addEventListener("touchmove", function(event){
event.preventDefault();
});
- コードスニペットのサンプル:
- タッチホールド操作により、コピー/ペーストメニューが起動されないようにしますCoBrowse プレゼンターが、HTML スライドのインタラクティブな要素をタッチした際に誤ってこのメニューを起動してしまう可能性があります。これを防ぐには、2 つのレベルにコードスニペットを追加します:
- Engage for Portals/CoBrowse プレーヤーをホストするお客様のページ
- 各 HTML スライドページ (HTML スライド専用; これは画像や動画スライドには不要)
- コードスニペットのサンプル:
- document.addEventListener("touchmove", function(event){
event.preventDefault();
});
- スニペット付きのコードは、CSS ファイルまたは HTML コンテンツページの先頭の <style> タグに含めるか、またはインラインスタイルとして含めることができます。
この機能を使うと、プレゼンターは、自分のプレゼンテーション内の計算機能といったインタラクティブコンテンツを使用することができます。
例えば、プレゼンターが投薬用電卓に年齢と体重を入力すると、閲覧者はその詳細と計算結果を確認することができます。
キーボードによる入力のほか、CoBrowse 経由で転送されるインタラクティブな要素として、HTML の <select> タグもサポートされています。
この機能はデフォルトで有効になっています。
