JETアプリケーションの作成

メディア・ツールバー・アプリケーションを作成する最初のステップは、基本テンプレートを使用してOJETアプリケーションを作成することです。このステップを完了すると、Fusionメディア・ツールバーに基本的なOJETアプリケーションがデプロイされます。

後続のステップを実行して実装を作成するか、Oracle Cloud Customer Connectに連絡して、このトピックで説明する基本JETアプリケーションのソース・コードを含む圧縮ファイルにアクセスできます。「圧縮ファイルからOJETアプリケーションを起動する方法」を参照してください。

前提要件

始める前に、次の前提条件を設定します:

Node.js (v16.17.1)をダウンロードするためのリンクについては、Oracle Cloud Customer Connectに連絡してください。
「JETツール」をインストールします。最新バージョンがあることを確認してください。次のコマンドを実行して、バージョンを確認できます:
ojet --version
詳細は、Oracle JavaScript Extension Toolkit (Oracle JET)を参照してください

CTI Acceleratorアプリケーションの構築

次のコマンドを実行します:
ojet create <PROJECT_NAME> --template=basic --typescript
ノート: <PROJECT_NAME>のかわりに、選択した名前(cti-acceleratorなど)を使用します。
詳細は、「スタータ・テンプレートを使用したOracle JET webアプリケーションの作成」を参照してください。

コマンドを実行すると、プロジェクト名を含む新しいフォルダが表示されます。お気に入りのエディタでフォルダを開きます。

基本テンプレートの一部として、フッターやアプリケーション名ラベルなどの追加のUI要素が、起動するとアプリケーションに表示されます。この概要ではこれらの要素は必要ないため、次の方法で削除できます:

src/index.htmlファイルを開き、<oj-toolbar>タグから次のコンテンツを削除して、メニュー・ボタン・コンポーネントおよびフッター・タグを削除します。 <oj-toolbar></oj-toolbar>タグは空のままにします。次の例を参照してください。

<oj-toolbar>
    <!------ START REMOVE FROM HERE ------>
    <oj-menu-button id="userMenu" display="[[smScreen() ? 'icons' : 'all']]" chroming="borderless">
        <span><oj-bind-text value="[[userLogin]]"></oj-bind-text></span>
        <span slot="endIcon" :class="[[{'oj-icon demo-appheader-avatar': smScreen(), 'oj-component-icon oj-button-menu-dropdown-icon': !smScreen()}]]"></span>
        <oj-menu id="menu1" slot="menu">
            <oj-option id="pref" value="pref">Preferences</oj-option>
            <oj-option id="help" value="help">Help</oj-option>
            <oj-option id="about" value="about">About</oj-option>
            <oj-option id="out" value="out">Sign Out</oj-option>
        </oj-menu>
    </oj-menu-button>
    <!------ REMOVE UNTIL HERE ------>
</oj-toolbar>

src/index.htmlファイルで、次の例に示すように<h1></h1>タグも削除します:

<!------ REMOVE THIS LINE FROM <header>  ------>
<h1 class="oj-sm-only-hide oj-web-applayout-header-title" title="Application Name"><oj-bind-text value="[[appName]]"></oj-bind-text></h1>

src/index.htmlファイルで、次の例に示すように<footer></footer>タグも削除します:

<!------ START REMOVE FROM HERE ------>
   <footer class="oj-web-applayout-footer" role="contentinfo">
       <div class="oj-web-applayout-footer-item oj-web-applayout-max-width">
         <ul>
           <oj-bind-for-each data="[[footerLinks]]">
             <template>
               <li>
                 <a :id="[[$current.data.linkId]]" :href="[[$current.data.linkTarget]]">
                   <oj-bind-text value="[[$current.data.name]]"></oj-bind-text>
                 </a>
               </li>
             </template>
           </oj-bind-for-each>
         </ul>
       </div>
       <div class="oj-web-applayout-footer-item oj-web-applayout-max-width oj-text-color-secondary oj-typography-body-sm">
         Copyright Â© 2014, 2024 Oracle and/or its affiliates All rights reserved.
       </div>
     </footer>
   <!------ REMOVE UNTIL HERE ------>

次の例に示すように、未使用の変数をsrc/ts/appController.tsファイルから削除します:

class RootViewModel {
  // REMOVE BELOW VARIABLES
  smScreen: ko.Observable<boolean>|undefined;
  appName: ko.Observable<string>;
  userLogin: ko.Observable<string>;
  footerLinks: Array<object>;
  // REMOVE UNTIL HERE
 
    constructor() {
        //.....
        // REMOVE BELOW VARIABLES
        let smQuery: string | null = ResponsiveUtils.getFrameworkQuery("sm-only");
        if (smQuery) {
            this.smScreen = ResponsiveKnockoutUtils.createMediaQueryObservable(smQuery);
         }
 
        // header
 
        // application Name used in Branding Area
        this.appName = ko.observable("App Name");
 
        // user Info used in Global Navigation area
        this.userLogin = ko.observable("john.hancock@oracle.com");
 
        // footer
        this.footerLinks = [
            { name: 'About Oracle', linkId: 'aboutOracle', linkTarget:'http://www.oracle.com/us/corporate/index.html#menu-about'},
            { name: "Contact Us", id: "contactUs", linkTarget: "http://www.oracle.com/us/corporate/contact/index.html" },
            { name: "Legal Notices", id: "legalNotices", linkTarget: "http://www.oracle.com/us/legal/index.html" },
            { name: "Terms Of Use", id: "termsOfUse", linkTarget: "http://www.oracle.com/us/legal/terms/index.html" },
            { name: "Your Privacy Rights", id: "yourPrivacyRights", linkTarget: "http://www.oracle.com/us/legal/privacy/index.html" },
        ];
         // REMOVE UNTIL HERE
    }
}

OJETアプリケーションのブートストラップ

プロジェクトのルート・ディレクトリから次のコマンドを実行: ojet serve
このコマンドにより、ブラウザに新しいウィンドウが開き、OJETアプリケーションのデフォルト・ページがロードされます。
デフォルトでは、アプリケーションはポート8000で起動し、http://localhost:8000/でアプリケーションにアクセスできます。ポートを変更するには、次の引数--server-port <port>を渡します。

自己署名証明書を使用してアプリケーションを起動

メディア・ツールバーでこのアプリURLを構成するには、httpsでアプリケーションを起動する必要があります。そのためには、自己署名証明書を使用してHTTPSサーバーにWebアプリケーションを提供する必要があります。

まず、webアプリケーション・ディレクトリに証明書をインストールする必要があります。次に、before_serve.jsフックを構成して次のことを行います:

Expressのインスタンスを作成して、提供されるwebアプリケーションをホストします。
作成したExpressインスタンスでHTTPSを設定します。 HTTPSプロトコルを指定するには、アプリケーション・ディレクトリに配置した自己署名証明書のロケーションを特定し、パスワードを指定します。
変更したExpressインスタンスおよびSSL対応サーバーをJETツールに渡して、OJETサーバーがOracle JETツールで提供されるすぐに使用できるミドルウェア構成ではなく、ミドルウェア構成を使用するようにします。
webアプリケーションがHTTPSサーバーに提供されるときにアクティブ・リロードが確実に機能するように、アクティブ・リロード・サーバーのインスタンスを作成し、SSLを使用するように構成します。

認証局によって発行された証明書を使用できない場合は、証明書(自己署名証明書)を作成できます。 OpenSSL、MacでのKeychain Access、Java Development Kitのキー・ツール・ユーティリティなどのツールを使用すると、このタスクを実行できます。たとえば、Windows用のGitに付属のGit Bashシェルを使用すると、次のコマンドを実行して、OpenSSLツールを使用して自己署名証明書を作成できます:

openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -nodes

これにより、cert.pemおよびkey.pemファイルが作成され、プロジェクト・ルート・ディレクトリにコピーされます。

アプリケーションに自己署名証明書をインストールしたら、before_serveフック・ポイントのスクリプトを構成します。

次を実行します。

AppRootDir/scripts/hooks/before_serve.jsを開き、次の変更を行います

'use strict';
 
module.exports = function (configObj) {
  return new Promise((resolve, reject) => {
    console.log("Running before_serve hook.");
 
    // Create an instance of Express, the Node.js web app framework that Oracle
    // JET tooling uses to host the web apps that you serve using ojet serve
    const express = require("express");
 
    // Set up HTTPS
    const fs = require("fs");
    const https = require("https");
     
    // Specify the self-signed certificates. In our example, these files exist
    // in the root directory of our project.
    const key = fs.readFileSync("./key.pem");
    const cert = fs.readFileSync("./cert.pem");
    // If the self-signed certificate that you created or use requires a
    // password, specify it here:
    const passphrase = "1234";
 
    const app = express();
 
    // Pass the modified Express instance and the SSL-enabled server to the Oracle JET tooling
    configObj['express'] = app;
    configObj['urlPrefix'] = 'https';
    configObj['server'] = https.createServer({
      key: key,
      cert: cert,
      passphrase: passphrase
    }, app);
 
    // Enable the Oracle JET live reload option using its default port number so that
    // any changes you make to app code are immediately reflected in the browser after you
    // serve it
    const tinylr = require("tiny-lr");
    const lrPort = "35729";
 
    // Configure the live reload server to also use SSL
    configObj["liveReloadServer"] = tinylr({ lrPort, key, cert, passphrase });
 
    resolve(configObj);
  });
};

これらの構成ステップが完了したら、webアプリケーションを構築して提供するために通常実行する一連のコマンド(ojet buildやojet serveなど)を実行します。
使用している証明書は、認証局によって発行された証明書ではなく自己署名証明書であるため、webアプリケーションへのアクセスに使用するブラウザでは、初めてWebアプリケーションにアクセスしたときに警告が表示されます。警告を確認して、webアプリケーションへのアクセスを許可するオプションをクリックします。たとえば、Google Chromeでは、webアプリケーションがhttps://localhost:8000/に提供されている場合は、「詳細設定」をクリックし、localhostに進みます(安全ではありません)。
詳細は、「自己署名証明書を使用したHTTPSサーバーへのWebアプリケーションの提供」を参照してください。

Fusionアプリケーションのメディア・ツールバーにアプリケーションをロード

「メディア・ツールバーの構成」を参照してください。

メディア・ツールバーにアプリケーションをロードしたら、Fusionアプリケーションにサインインし、電話アイコンをクリックしてメディア・ツールバー・ウィンドウを開きます。アプリケーションとともにメディア・ツールバー・アプリケーションがロードされていることがわかります。

進捗の確認

メディア・ツールバーにアプリケーションをロードしたら、Fusionアプリケーションにサインインし、「電話」アイコンをクリックしてメディア・ツールバー・ウィンドウを開きます。アプリケーションとともにメディア・ツールバー・アプリケーションがロードされていることがわかります。