scss-files-2017.zip ファイルをダウンロードし、コンテンツを解凍します。
最終更新日 :
2022年3月8日
この記事では、RoboHelpの画面レイアウトとプロファイルの最新アーカイブ版へのリンクを記載します。これらの画面レイアウトやプロファイルは、ダウンロードしてRoboHelpプロジェクト内で使用したり、レスポンシブHTML5またはマルチスクリーンHTML5出力を生成したりすることができます。
このセクションでは、RoboHelp（2017 release）プロジェクトで使用できるレスポンシブな HTML5 レイアウトの一覧を掲載します。
以下のリストからレスポンシブな画面レイアウトを選んでダウンロードし、ファイル名の拡張子を「. zip」から「. slz」に変更し、プロジェクトにインポートします。詳細については、「RoboHelpユーザガイド」の「画面レイアウト」を参照してください。
インディゴ
フレームなしのレスポンシブな HTML5 レイアウトです。クラス最高の検索とナビゲーションです。
オーシャン
ユーザーがヘルプからお気に入りのトピックをブックマークできる、フレームなしのレイアウトです。
注意：
オーシャンレイアウトは、RoboHelp の アップデート 2 以降の製品から廃止されました。
ダウンロード
レイアウトのカスタマイズ
注意：
レイアウトをカスタマイズするには、SCSS、CSSおよびJavaScriptの各技術についてしっかりと理解しておく必要があります。SCSSはCSSの拡張機能です。SCSSを使うことで、CSSを作成する際に変数、Mixin、ネストされたルール、および他の基本的なプログラミングを使用できるようになります。
レスポンシブなレイアウトは、次の2つの方法でカスタマイズすることができます。
- スタイルシートにより画面出力の外観をカスタマイズする
- JavaScriptを使用して、検索を特定の方法で処理するといった動作をカスタマイズする
次のセクションでは、レイアウトをカスタマイズする 2 種類の方法について説明します。
スタイルシートのカスタマイズ
-
注意：
scss-files-2017.zip ファイルには、青（空色）、チャコールグレイ、インディゴレイアウト用の scss ファイルが含まれています。また、これらのレイアウトで使用される他の設定ファイル（右から左へのレイアウト設定ファイルなど）も含まれています。
-
使用したいレイアウトの. scssファイルを変更します。
注意：例えばインディゴのレイアウトを変更する場合は、scss-files-2017\indigo フォルダーにある layout.scss ファイルを変更します。
-
更新された.scssファイルから.cssファイルを生成する際は、いずれかの.scssファイルコンパイラーを使用します。
注意：RoboHelpレイアウトに付属するCSSファイルは、「Koala」というサードパーティ製のツールを使用してコンパイルされています。. scssファイルをコンパイルするには、Koala以外のツールを使用することもできます。
注意：RTL CSS を生成する場合は、テキストエディターで scss-files-2017\_rtl.scss ファイルを開きます。$if-rtl を true に設定し、生成された layout.css ファイルの名前を layout_rtl.css に変更します。
-
レイアウトの ZIP ファイル（Indigo.zip または Ocean.zip）からコンテンツを解凍し、ZIP ファイル内の layout.css を、更新された .css ファイル（ステップ 3 で作成）で置き換えます。
注意：layout.css ファイルは、レイアウト ZIP ファイルのルートフォルダーにあります。例えば、チャコールグレイのレイアウトの場合、CSS ファイルは scss-files-2017\indigo\layout.css に保存されます。
-
更新されたlayout.cssにより、ZIPファイルを再作成します。
-
ZIPファイルの名前を「. slz」に変更し、プロジェクトにインポートします。
JavaScriptのカスタマイズ
また、関連付けられたJavaScriptファイルをカスタマイズすることで、レイアウト内の特定のイベントの動作を変更することもできます。例えば、ブラウザに関係なくJavaScript関連のエラーが発生する場合は、問題を修正するためにJavaScriptコードを変更することができます。
JavaScriptを使用してレイアウトをカスタマイズするには、次の手順を実行します。
-
システムのスクリプトフォルダーには、次のパスでアクセスできます。
<RoboHelp_install_location>\RoboHTML\ResponsiveHelpExt\widgets\common\scripts
注意：スクリプトフォルダーには、次の 4 つのファイルが含まれています：common.js、layout.js、rh.js、topic.js。いずれの JavaScript ファイルにも、レイアウト内の各種要素の動作を制御するコードが含まれています。
-
作業対象の .js ファイルのバックアップを作成し、要件に従って .js ファイルを修正します。
-
変更したファイルのファイル名を、<ファイル名>.min.jsに変更します。例えば、common.jsファイルの名前をcommon.min.jsに変更します。
注意：.jsファイルの名前を.min.jsに手動で変更するのではなく、圧縮・軽量化ツール（JavaScript Minifierなど）を使用して、更新された.jsファイルを軽量化することをお勧めします。
-
スクリプトフォルダー内の JavaScript ファイルを、手順 1 で指定した RoboHelp インストール先に置き換えます。または、パブリッシュされた（プロジェクトの）出力フォルダーで、スクリプトを置き換えることができます。 プロジェクト内で更新された JavaScript ファイルは、次のパスに保存されています。
<プロジェクトフォルダー>\template\scripts
RoboHelp のインストール場所に保存されているスクリプトを置き換えると、その後の出力はすべて、カスタマイズされた .js ファイルで生成されます。
パブリッシュされた出力フォルダーでスクリプトを置き換える場合、更新された .js ファイルが含まれるのはプロジェクトのみです。 プロジェクト出力を再生成すると、カスタマイズがすべて破棄されます。
以下のリストからレスポンシブな画面レイアウトを選んでダウンロードし、ファイル名の拡張子を「. zip」から「. slz」に変更し、プロジェクトにインポートします。詳細については、「RoboHelpユーザガイド」の「画面レイアウト」を参照してください。
レスポンシブなレイアウトでは、デバイスごとに自動で最適化されたフレームが表示されます。レスポンシブなレイアウトを使用することで、パソコン、タブレットや携帯端末といったすべてのデバイスに対応するヘルプコンテンツを作成できます。
青（空色）
ダウンロード
チャコールグレイ
ダウンロード
レイアウトのカスタマイズ
注意：
レイアウトをカスタマイズするには、SCSS、CSSおよびJavaScriptの各技術についてしっかりと理解しておく必要があります。SCSSはCSSの拡張機能です。SCSSを使うことで、CSSを作成する際に変数、Mixin、ネストされたルール、および他の基本的なプログラミングを使用できるようになります。
レスポンシブなレイアウトは、次の2つの方法でカスタマイズすることができます。
- スタイルシートにより画面出力の外観をカスタマイズする
- JavaScriptを使用して、検索を特定の方法で処理するといった動作をカスタマイズする
次のセクションでは、レイアウトをカスタマイズするこれら2種類の方法について説明します。
スタイルシートのカスタマイズ
-
scss-files.zipファイルをダウンロードし、中のファイルを解凍します。
注意：scss-files.zipファイルには、青（空色）とチャコールグレーの各レイアウト向けの.scssファイルが含まれています。また、これらのレイアウトで使用される他の設定ファイル（右から左へのレイアウト設定ファイルなど）も含まれています。
-
使用したいレイアウトの. scssファイルを変更します。
注意：例えば青（空色）のレイアウトを変更する場合は、scss-files\scss\Azure_Blueフォルダーにあるlayout.scssファイルを変更します。
-
更新された.scssファイルから.cssファイルを生成する際は、いずれかの.scssファイルコンパイラーを使用します。
注意：RoboHelpレイアウトに付属するCSSファイルは、「Koala」というサードパーティ製のツールを使用してコンパイルされています。. scssファイルをコンパイルするには、Koala以外のツールを使用することもできます。
注意：RTL CSSを生成する場合は、テキストエディターで「scss-files\scss\_rtl.scss」ファイルを開きます。$if-rtlをtrueに設定し、生成されたlayout.cssファイルの名前をlayout_rtl.cssに変更します。
-
レイアウトのZIPファイル（Azure_Blue.zipまたはCharcoal_Grey.zip）から中のファイルを解凍し、ZIPファイル内のlayout.cssを、更新された.cssファイル（ステップ3で作成）で置き換えます。
注意：layout.cssファイルは、レイアウトZIPファイルのルートフォルダーにあります。例えば、チャコールグレーのレイアウトの場合、CSSファイルはscss-files\scss\Charcoal_Grey\layout.cssに保存されます。
-
更新されたlayout.cssにより、ZIPファイルを再作成します。
-
ZIPファイルの名前を「. slz」に変更し、プロジェクトにインポートします。
JavaScriptのカスタマイズ
また、関連付けられたJavaScriptファイルをカスタマイズすることで、レイアウト内の特定のイベントの動作を変更することもできます。例えば、ブラウザに関係なくJavaScript関連のエラーが発生する場合は、問題を修正するためにJavaScriptコードを変更することができます。
JavaScriptを使用してレイアウトをカスタマイズするには、次の手順を実行します。
-
js-files.zipファイルをダウンロードし、中のファイルを解凍します。
注意：ZIPファイルには、common.js、layout.js、rh.js、およびtopic.js.の4つのファイルが含まれます。いずれの JavaScript ファイルにも、レイアウト内の各種要素の動作を制御するコードが含まれています。
-
必要に応じて.jsファイルを変更します。
-
変更したファイルのファイル名を、<ファイル名>.min.jsに変更します。例えば、common.jsファイルの名前をcommon.min.jsに変更します。
注意：.jsファイルの名前を.min.jsに手動で変更するのではなく、圧縮・軽量化ツール（JavaScript Minifierなど）を使用して、更新された.jsファイルを軽量化することをお勧めします。
-
スクリプトフォルダー内の JavaScript ファイルを、次の RoboHelp インストール先に置き換えます。
<RoboHelp_install_location>\RoboHTML\ResponsiveHelpExt\widgets\common\scripts
または、パブリッシュされた（プロジェクトの）出力フォルダーで、スクリプトを置き換えることができます。 プロジェクト内で更新された JavaScript ファイルは、次のパスに保存されています。
<プロジェクトフォルダー>\template\scripts
RoboHelp のインストール場所に保存されているスクリプトを置き換えると、その後の出力はすべて、カスタマイズされた .js ファイルで生成されます。
パブリッシュされた出力フォルダーでスクリプトを置き換える場合、更新された .js ファイルが含まれるのはプロジェクトのみです。 プロジェクト出力を再生成すると、カスタマイズがすべて破棄されます。
このセクションでは、RoboHelp 11プロジェクトで使用できるレスポンシブなHTML5レイアウトの一覧を掲載します。
テーマ_1標準
レイアウトにより、デバイスごとに自動で最適化されたフレームが表示されます。レスポンシブなレイアウトを使用することで、すべてのデバイスに一度で対応できます。
ダウンロード
Theme 2_Governmentレイアウト
濃い海緑色およびスレートグレイ色のアクセントが付いた、バナーや見出し向きのフォーマルでクラッシックなスタイルです。
ダウンロード
Theme_3 Black
黒色のアクセントが付いた、バナーや見出し向きのフォーマルでクラッシックなスタイルです。
ダウンロード
このセクションでは、RoboHelp（2015リリース）またはRoboHelp 11プロジェクトで使用できる、マルチスクリーン向けHTML5レイアウトの一覧を掲載します。
デスクトップ向けレイアウト
- デスクトップ向けレイアウト:左側に目次、索引、用語集が表示され、グレーと茶色のテーマにより操作が容易です。このデスクトップ向けレイアウトは、iPhone、iPad、Android携帯端末、Androidタブレット、およびKindle Fire向けの既製レイアウトを含むファミリーに属しています。
ダウンロード
- カタログ向けレイアウト:製品やサービスを目立たせる、濃い青紫色のバナーとドロップシャドウパネルが特徴です。目次、索引、用語集の通常の表示位置は、左に設定されています。表示領域を広げたいユーザは、簡単に隠すことができます。
ダウンロード
- カタログ向けのホームページ付きレイアウト:製品やサービスを目立たせる、濃い青紫色のバナーとドロップシャドウパネルが特徴です。目次、索引、用語集の通常の表示位置は、左に設定されています。表示領域を広げたいユーザは、簡単に隠すことができます。
ダウンロード
- 行政機関向けレイアウト：濃い海緑色およびスレートグレイ色のアクセントが付いた、バナーや見出し向きのフォーマルでクラッシックなスタイルです。
ダウンロード
- 行政機関向けのホームページ付きレイアウト：濃い海緑色とスレートグレイの色アクセントが付いた、バナーや見出し向きのフォーマルでクラッシックなスタイルです。ホームページには、「おすすめ情報」用のプレースホルダーがあります。この中には、独自のテキストを追加することができます。
ダウンロード
- ナレッジベース向けレイアウト：ライトグレーのアイコンとアクセントを備えた、ソフトな薄茶色の背景色が特徴です。左側には、水平方向の目次、索引、用語集が表示されます。検索バーはすぐにアクセスできます。
ダウンロード
- ナレッジベース向けのホームページ付きレイアウト：ライトグレーのアイコンとアクセントを備えた、ソフトな薄茶色の背景色が特徴です。左側には、水平方向の目次、索引、用語集が表示されます。検索に簡単にアクセスできます。
ダウンロード
- ソーシャル向けレイアウト:Facebookの「いいね!」とTwitterのフォローをリアルタイムで反映するためのプリセットコードを含む、カラフルなソーシャル対応レイアウトです。目次、索引、用語集には、水平方向に展開するアコーディオン形式のナビゲーションパネルを使用します。このレイアウトでは、トピックページと検索結果ページが分かれています。
ダウンロード
- ソーシャル向けのホームページ付きレイアウト:Facebookの「いいね!」とTwitterのフォローをリアルタイムで反映するためのプリセットコードを含む、カラフルなソーシャル対応レイアウトです。目次、索引、用語集には、水平方向に展開するアコーディオン形式のナビゲーションパネルを使用します。このレイアウトでは、トピックページと検索結果ページが分かれています。
ダウンロード
- 医薬品向けレイアウト:ガラスの試験官類と紫色の階調色により、新しさとクラッシックを融合したテーマが特徴です。このテーマは、「iPhone Pharmaceutical」および「iPad Pharmaceutical」を含む既成レイアウトのファミリーに属します。これらのテーマはギャラリーにあります。デバイスの画面サイズに合わせてカスタマイズすることができます。
ダウンロード
- 医薬品向けのホームページ付きレイアウト:ガラスの試験官類と紫色の階調色により、新しさとクラッシックを融合したテーマが特徴です。ホームページでは、注目の商品やサービスを簡単に追加できるプレースホルダーが用意されています。このレイアウトは、「iPhone Pharmaceutical」および「iPad Pharmaceutical」を含む既成レイアウトのファミリーに属します。また、デバイスの画面サイズに合わせてカスタマイズすることもできます。
スマートフォン向けレイアウト
- iPhone：目次、索引、用語集に加え、常にアクセス可能な検索バーを表示する、ライトブルーとグレーの使いやすいテーマです。このiPhone向けレイアウトは、パソコン、iPad、Android携帯端末、Androidタブレット、およびKindle Fire向けの既製レイアウトを含むファミリーに属しています。
ダウンロード
- Android：一般的なサイズのAndroid携帯端末で表示するように事前設定された、濃い青緑色、緑色、黒色のカラースキームです。このレイアウトは、パソコン、iPhone、iPad、Androidタブレット、およびKindle Fire向けの既製レイアウトも含むファミリーに属しています。
ダウンロード
- 医薬品向けのホームページ付きレイアウト:ガラスの試験官類と紫色の階調色により、新しさとクラッシックを融合したテーマが特徴です。ホームページでは、注目の商品やサービスを簡単に追加できるプレースホルダーが用意されています。このレイアウトは、「iPhone Pharmaceutical」および「iPad Pharmaceutical」を含む既成レイアウトのファミリーに属します。また、デバイスの画面サイズに合わせてカスタマイズすることもできます。
ダウンロード
タブレット向けレイアウト
- Android：一般的なサイズのAndroidタブレットで表示するように事前設定された、濃い青緑色、緑色、黒色のカラースキームです。このレイアウトは、パソコン、iPhone、iPad、Android携帯端末、およびKindle Fire向けの既製レイアウトも含むファミリーに属しています。
ダウンロード
- iPad：左側に目次、索引、用語集に加え、常にアクセス可能な検索バーが表示され、グレーと茶色のテーマにより操作が容易です。このiPad向けレイアウトは、パソコン、iPhone、Android携帯端末、Androidタブレット、およびKindle Fire向けの既製レイアウトを含むファミリーに属しています。
ダウンロード
- Kindle Fire：Kindle Fireで表示するように事前設定された、濃い青緑色、緑色、黒色のカラースキームです。このレイアウトは、パソコン、iPhone、iPad、およびAndroidタブレット向けの既製レイアウトも含むファミリーに属しています。
ダウンロード
- 医薬品向けのホームページ付きレイアウト:ガラスの試験官類と紫色の階調色により、新しさとクラッシックを融合したテーマが特徴です。ホームページでは、注目の商品やサービスを簡単に追加できるプレースホルダーが用意されています。このレイアウトは、「iPhone Pharmaceutical」および「Desktop Pharmaceutical」を含む既成レイアウトのファミリーに属します。また、デバイスの画面サイズに合わせてカスタマイズすることもできます。
ダウンロード
各種デバイス向けのスクリーンプロファイルを含む predefined_screens.zip ファイルをダウンロードします。ZIPファイルには、predefined_ screens. xmlのXMLファイルが含まれます。このXMLファイルは、次の2箇所に保存します。
- AppData\Roaming\Adobe\RoboHTML\<Rh バージョン>
- <Rh インストール先>\RoboHTML\presets
RoboHelp では、プロジェクトに対して事前定義されたスクリーンプロファイルの一覧を更新します。
