リアクティブWebアプリでのファビコンの設定

リアクティブWebアプリでファビコンを設定するには、以下の手順を実行します。Service Studioで以下の2つを実行する必要があります。

• アプリのリソースにファビコンを追加する
• モジュールの読み込み時にファビコンを読み込む

この例では、favicon.icoを使用します。別のファイル名を使用する場合は、JavaScriptを編集する必要があります。

1. ［Data］タブでResources > Import resourceに移動し、favicon.icoファイルを選択します。ダイアログが表示されます。
2. ［Add Resource］ダイアログウィンドウで［Add as resource］をクリックします。画像がリソースとして追加され、その他のオプションを設定できます。
3. ファビコンリソースのDeploy Actionプロパティを「Deploy to Target Directory」に設定します。
4. ［Logic］タブでClient Actionフォルダを右クリックし、［Add System Event］メニューを開いて［On Application Ready］をクリックします。この新しいアクションのロジックが開きます。
5. JavaScriptツールをフローにドラッグします。「AddFavicon」という名前を付けます。

6. AddFavicon JavaScriptツールをダブルクリックしてJSエディタを開きます。以下のコードを追加します。

   var link = document.createElement('link');
   link.rel = 'icon';
   link.href = 'favicon.ico';
   var head = document.querySelector('head');
   head.appendChild(link);
   

7. アプリをパブリッシュし、ブラウザで開きます。