機械翻訳について

基本的なH1コンポーネントの構築

シード済ファイル内のコンテンツの多くを削除して、H1コンポーネントを作成できます。 viewModelの作成時にシードした見出しテキストが表示されます。 後で、コンポーネントの設定およびスタイルを指定できます。

ローカル・コンポーネントの構造を確認するには:

1. Oracle Content Management Desktop Sync Appを使用して、コンポーネントを特定し、ファイル・システムと同期します。

   • デスクトップ同期アプリケーションの最新バージョンで、同期の開始または同期させるフォルダの選択オプションを選択します。

   • Desktop Sync Appがない場合は、Oracle Content Managementの「コンポーネント」タブでコンポーネントを選択し、ドリルダウンしてファイルを表示できます。

2. コンポーネントの下のファイルをリストする場合は、次のようなファイルが表示されます。

   • assetsフォルダのコンポーネント・ファイル:

     • render.mjs

     • settings.html

   • appinfo.json: コンポーネントの説明を含むJSONファイル。

     コンポーネントの開発についてを参照してください。

   • folder_icon.jpg: コンポーネント・カタログに表示されるアイコン。

H1コンポーネントを構築するには:

1. appinfo.json ファイルを開き、その内容を次の行に置き換えます:

   {
      "id": "h1-component-id",
   
      "settingsData": {
                "settingsHeight": 90,
                "settingsWidth": 300,
                "settingsRenderOption": "inline",
                "componentLayouts": [ ],
                "triggers": [ ],
                "actions": [ ]
      },
      "initialData": {
                "componentId": "h1-component-id",
                "customSettingsData": {
                        "headingText": "Heading 1"
                },
                "nestedComponents": [ ]
      }
   }

2. お気に入りテキスト・エディタのassetsフォルダのrender.mjsファイルを開きます。
3. render.mjsのコンテンツを次の行に変更します:

   import CommonUtils from './common.mjs';
    
   // The Custom Component class will be the "default" export from the module
   export default class {
    
       constructor(args) {
           // store the args
           this.mode = args.viewMode;
           this.id = args.id;
    
           // store the path to the <component>/assets folder
           this.assetsPath =
               import.meta.url.replace('/render.mjs', '');
    
           // get the OCM environment resources
           this.sitesSDK = args.SitesSDK;
           this.Mustache = SCSRenderAPI.getMustache();
    
           // add in the event listeners
           this.addEventListeners();
       }
    
       // add in the listeners for whenever the settings values change
       // in this case, we want to re-render the component on the screen
       addEventListeners() {
           // listen for settings update
           this.sitesSDK.subscribe(this.sitesSDK.MESSAGE_TYPES.SETTINGS_UPDATED, (props) => {
               if (props.property === 'customSettingsData') {
                   this.renderComponent({
                       customSettingsData: props.value
                   });
               }
           });
       }
    
       // insert the component's HTML into the page
       // after it has added the component, it applies any clickHandlers to elements that were added to the page
       renderComponent(args) {
           Promise.all([SCSRenderAPI.importText(this.assetsPath + '/template.html'),
               SCSRenderAPI.importCSS(this.assetsPath + '/styles/design.css')
           ]).then((componentResources) => {
               const componentTemplate = componentResources[0];
    
               // use the common code to generate the HTML for this component based on the componentLayout and customSettingsData
               const componentHTML = CommonUtils.createHTML({
                   Mustache: this.Mustache,
                   componentLayout: this.sitesSDK.getProperty('componentLayout'),
                   customSettingsData: this.sitesSDK.getProperty('customSettingsData'),
                   id: this.id,
                   template: componentTemplate
               }, args);
    
               // replace the content of the container with the rendered HTML
               this.container.innerHTML = componentHTML;
           });
       }
    
       // the render method is called to render the component dynamically onto the page
       render(container) {
           this.container = container;
           this.renderComponent();
       }
   }

4. assetsフォルダで、新しいファイルrender.htmlを作成して、コンポーネントの単純なHTMLテンプレートにします。
5. template.htmlファイルの次のコンテンツを使用します:

   <h1>{{headingText}}</h1>

6. アセット・フォルダで、common.mjsという新しいファイルを作成し、次のコードを追加します:

   // Common Utilities Class
   export default class {
       constructor() {}
    
       static createHTML(context, args) {
           // extract all the required dependencies from the context
           const Mustache = context.Mustache,
               customSettingsData = context.customSettingsData,
               id = context.id,
               template = context.template;
    
           // extract the original values (or apply deafult values)
           const customData = (args && args.customSettingsData) || customSettingsData || {};
           customData.nls = customData.nls || {};
    
           // create the model
           const model = {
               headingText: customData.nls.headingText || ''
           };
    
           // render the component
           try {
               return Mustache.render(template, model);
           } catch (e) {
               console.log('Failed to expand Mustache template.', e);
               return '';
           }
       }
   }

   このファイルは、render.mjsファイルからコールされます。

   コンポーネントassetsフォルダに次のファイルが含まれるようになりました。

   • template.html

   • render.mjs

   • settings.html

   • common.mjs

新しいH1コンポーネントをページに追加します(チェックポイント2)。