この記事では、RoboHelpの画面レイアウトとプロファイルの最新アーカイブ版へのリンクを記載します。これらの画面レイアウトやプロファイルは、ダウンロードしてRoboHelpプロジェクト内で使用したり、レスポンシブHTML5またはマルチスクリーンHTML5出力を生成したりすることができます。

RoboHelp(2015リリース)向けのレスポンシブHTML5画面レイアウト

以下のリストからレスポンシブな画面レイアウトを選んでダウンロードし、ファイル名の拡張子を「. zip」から「. slz」に変更し、プロジェクトにインポートします。詳細については、「RoboHelpユーザガイド」の「画面レイアウト」を参照してください。

レスポンシブなレイアウトでは、デバイスごとに自動で最適化されたフレームが表示されます。レスポンシブなレイアウトを使用することで、パソコン、タブレットや携帯端末といったすべてのデバイスに対応するヘルプコンテンツを作成できます。

レイアウトのカスタマイズ

注意:

レイアウトをカスタマイズするには、SCSS、CSSおよびJavaScriptの各技術についてしっかりと理解しておく必要があります。SCSSはCSSの拡張機能です。SCSSを使うことで、CSSを作成する際に変数、Mixin、ネストされたルール、および他の基本的なプログラミングを使用できるようになります。

レスポンシブなレイアウトは、次の2つの方法でカスタマイズすることができます。

  • スタイルシートにより画面出力の外観をカスタマイズする
  • JavaScriptを使用して、検索を特定の方法で処理するといった動作をカスタマイズする

次のセクションでは、レイアウトをカスタマイズするこれら2種類の方法について説明します。

スタイルシートのカスタマイズ

  1. scss-files.zipファイルをダウンロードし、中のファイルを解凍します。

    注意:

    scss-files.zipファイルには、青(空色)とチャコールグレーの各レイアウト向けの.scssファイルが含まれています。また、これらのレイアウトで使用される他の設定ファイル(右から左へのレイアウト設定ファイルなど)も含まれています。

  2. 使用したいレイアウトの. scssファイルを変更します。

    注意:

    例えば青(空色)のレイアウトを変更する場合は、scss-files\scss\Azure_Blueフォルダーにあるlayout.scssファイルを変更します。

  3. 更新された.scssファイルから.cssファイルを生成する際は、いずれかの.scssファイルコンパイラーを使用します。

    注意:

    RoboHelpレイアウトに付属するCSSファイルは、「Koala」というサードパーティ製のツールを使用してコンパイルされています。. scssファイルをコンパイルするには、Koala以外のツールを使用することもできます。  

    注意:

    RTL CSSを生成する場合は、テキストエディターで「scss-files\scss\_rtl.scss」ファイルを開きます。$if-rtltrueに設定し、生成されたlayout.cssファイルの名前をlayout_rtl.cssに変更します。

  4. レイアウトのZIPファイル(Azure_Blue.zipまたはCharcoal_Grey.zip)から中のファイルを解凍し、ZIPファイル内のlayout.cssを、更新された.cssファイル(ステップ3で作成)で置き換えます。  

    注意:

    layout.cssファイルは、レイアウトZIPファイルのルートフォルダーにあります。例えば、チャコールグレーのレイアウトの場合、CSSファイルはscss-files\scss\Charcoal_Grey\layout.cssに保存されます。

  5. 更新されたlayout.cssにより、ZIPファイルを再作成します。

  6. ZIPファイルの名前を「. slz」に変更し、プロジェクトにインポートします。

JavaScriptのカスタマイズ

また、関連付けられたJavaScriptファイルをカスタマイズすることで、レイアウト内の特定のイベントの動作を変更することもできます。例えば、ブラウザに関係なくJavaScript関連のエラーが発生する場合は、問題を修正するためにJavaScriptコードを変更することができます。 

JavaScriptを使用してレイアウトをカスタマイズするには、次の手順を実行します。

  1. js-files.zipファイルをダウンロードし、中のファイルを解凍します。

    注意:

    ZIPファイルには、common.js、layout.js、rh.js、およびtopic.js.の4つのファイルが含まれます。これらのJavaScriptファイルは、レイアウト内の各種要素の動作を制御するコードを含みます。

  2. 必要に応じて.jsファイルを変更します。

  3. 変更したファイルのファイル名を、<ファイル名>.min.jsに変更します。例えば、common.jsファイルの名前をcommon.min.jsに変更します。

    注意:

    .jsファイルの名前を.min.jsに手動で変更するのではなく、圧縮・軽量化ツール(JavaScript Minifierなど)を使用して、更新された.jsファイルを軽量化することをお勧めします。

  4. 既存の(青(空色)またはチャコールグレイ)プロジェクトフォルダー内にあるJavaScriptファイルを、更新されたJavaScriptファイルで置き換えます。更新されたJavaScriptファイルの保存先:

    <プロジェクトフォルダー>\template\scripts

RoboHelp 11向けのレスポンシブなHTML5レイアウト

このセクションでは、RoboHelp 11プロジェクトで使用できるレスポンシブなHTML5レイアウトの一覧を掲載します。 

テーマ_1標準

レイアウトにより、デバイスごとに自動で最適化されたフレームが表示されます。レスポンシブなレイアウトを使用することで、すべてのデバイスに一度で対応できます。

ダウンロード

テーマ1

Theme 2_Governmentレイアウト

濃い海緑色およびスレートグレイ色のアクセントが付いた、バナーや見出し向きのフォーマルでクラッシックなスタイルです。

ダウンロード

テーマ2

Theme_3 Black

黒色のアクセントが付いた、バナーや見出し向きのフォーマルでクラッシックなスタイルです。

ダウンロード

テーマ3

更新されたマルチスクリーン向けHTML5レイアウト

このセクションでは、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向けの既製レイアウトを含むファミリーに属しています。

ダウンロード

iPhone向け画面レイアウト
iPhone向け画面レイアウト

  • Android:一般的なサイズのAndroid携帯端末で表示するように事前設定された、濃い青緑色、緑色、黒色のカラースキームです。このレイアウトは、パソコン、iPhone、iPad、Androidタブレット、およびKindle Fire向けの既製レイアウトも含むファミリーに属しています。

ダウンロード

Android携帯端末向け画面レイアウト
Android携帯端末向け画面レイアウト

  • 医薬品向けのホームページ付きレイアウト:ガラスの試験官類と紫色の階調色により、新しさとクラッシックを融合したテーマが特徴です。ホームページでは、注目の商品やサービスを簡単に追加できるプレースホルダーが用意されています。このレイアウトは、「iPhone Pharmaceutical」および「iPad Pharmaceutical」を含む既成レイアウトのファミリーに属します。また、デバイスの画面サイズに合わせてカスタマイズすることもできます。

ダウンロード

医薬品向けのホームページ付き画面レイアウト(携帯端末向け画面レイアウト)
医薬品向けのホームページ付き画面レイアウト(携帯端末向け画面レイアウト)

タブレット向けレイアウト

  • Android:一般的なサイズのAndroidタブレットで表示するように事前設定された、濃い青緑色、緑色、黒色のカラースキームです。このレイアウトは、パソコン、iPhone、iPad、Android携帯端末、およびKindle Fire向けの既製レイアウトも含むファミリーに属しています。

ダウンロード

Androidタブレット向けレイアウト
Androidタブレット向けレイアウト

  • iPad:左側に目次、索引、用語集に加え、常にアクセス可能な検索バーが表示され、グレーと茶色のテーマにより操作が容易です。このiPad向けレイアウトは、パソコン、iPhone、Android携帯端末、Androidタブレット、およびKindle Fire向けの既製レイアウトを含むファミリーに属しています。

ダウンロード

iPad向けレイアウト
iPad向けレイアウト

  • Kindle Fire:Kindle Fireで表示するように事前設定された、濃い青緑色、緑色、黒色のカラースキームです。このレイアウトは、パソコン、iPhone、iPad、およびAndroidタブレット向けの既製レイアウトも含むファミリーに属しています。

ダウンロード

Kindle Fire向けレイアウト
Kindle Fire向けレイアウト

  • 医薬品向けのホームページ付きレイアウト:ガラスの試験官類と紫色の階調色により、新しさとクラッシックを融合したテーマが特徴です。ホームページでは、注目の商品やサービスを簡単に追加できるプレースホルダーが用意されています。このレイアウトは、「iPhone Pharmaceutical」および「Desktop Pharmaceutical」を含む既成レイアウトのファミリーに属します。また、デバイスの画面サイズに合わせてカスタマイズすることもできます。

ダウンロード

医薬品ホームページ(タブレット向けレイアウト)
医薬品ホームページ(タブレット向けレイアウト)

画面プロファイル

各種デバイス向けの画面プロファイルを含むpredefined_screens.zipファイルをダウンロードします。ZIPファイルには、predefined_ screens. xmlのXMLファイルが含まれます。このXMLファイルは、次の2箇所に保存します。

  • AppData\Roaming\Adobe\RoboHTML\<Rhバージョン>
  • <Rhインストール先>\RoboHTML\presets

RoboHelpでは、プロジェクトに対して事前定義された画面プロファイルの一覧を更新します。

ダウンロード

ダウンロード

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー