# クッキーでフッターナビゲーションを強制する

**URL:** https://meta.discourse.org/t/force-footer-nav-with-cookie/207687
**Category:** Feature
**Created:** [2021 年 10 月 31 日午前 12:17 UTC](https://meta.discourse.org/t/force-footer-nav-with-cookie/207687 "2021-10-31T00:17:00Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![alanost](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alanost/32/230952_2.png) [@alanost](https://meta.discourse.org/u/alanost)
#### Post date: [2021 年 10 月 31 日午前 12:17 UTC](https://meta.discourse.org/t/force-footer-nav-with-cookie/207687/1 "2021-10-31T00:17:00Z")

</div>

こんにちは、

iOS デバイス用のフォーラムアプリを作成中です。幸いにも、ウェブアプリをアプリとしてパッケージ化するための準備済みの Xcode プロジェクトを提供する「PWABuilder」というプロジェクトがあります。これは私の Discourse フォーラムでも非常にうまく機能しましたが、ナビゲーションを容易にする戻るボタンや同様の機能がありません。

PWABuilder で生成された iOS アプリ（ナビゲーションフッターなし）：

 ![IMG_3321.PNG](https://global.discourse-cdn.com/meta/original/3X/9/8/9807c9f26cbeac708766b7cc3098b177ef339e34.jpeg)

一方、iOS PWA には戻るボタンがあるフッターバーが表示されます。ただし、iOS PWA 以外でこれを表示する方法はまだ見つけていません。

iOS PWA にはナビゲーションフッターがありますが、それを強制的に外部で表示させる方法（簡単な方法が見つかりませんでした）：

 ![IMG_3322.PNG](https://global.discourse-cdn.com/meta/original/3X/d/a/da6b1a37fd1377e9b07e19635042c2b42ba946e6.jpeg)

ここで質問です：このフッターを WKWebView 内でも表示することは可能でしょうか？また、解決策のアイデアもあります。PWABuilder で生成されたアプリには、使用時にクッキーを設定する機能があります。「mobile\_footer\_nav」というクッキーが設定されている場合にのみ、このナビゲーションフッターを表示するのはどうでしょうか？そうすれば問題は解決します。

PWABuilder で生成されたアプリ内で設定可能なオプション（アプリ使用時のクッキー設定）：

 ![Bildschirmfoto 2021-10-31 um 02.11.34](https://global.discourse-cdn.com/meta/original/3X/b/a/baa0d2a39277085019c4cd954f7b4ee2d7777ef3.jpeg)

開発チームがこれを確認してくださることを心より願っております。

（DiscourseHub アプリという選択肢もありますが、フォーラム用の個別のアプリの方がよりエレガントで、ユーザーにとっても使いやすく理解しやすいオプションです。）

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [2021 年 10 月 31 日午前 2:22 UTC](https://meta.discourse.org/t/force-footer-nav-with-cookie/207687/2 "2021-10-31T02:22:15Z")

</div>

Discourse は、いくつかの条件に基づいてフッターをレンダリングします。フッターはここで追加されています。

[discourse/app/assets/javascripts/discourse/app/templates/application.hbs at a0bbc346cb5d5b89d1a3efdfa89869349a8b067f · discourse/discourse · GitHub](https://github.com/discourse/discourse/blob/a0bbc346cb5d5b89d1a3efdfa89869349a8b067f/app/assets/javascripts/discourse/app/templates/application.hbs#L39-L41)

`showFooterNav` はここで定義されています。

[discourse/app/assets/javascripts/discourse/app/controllers/application.js at 1472e47aae5bfdfb6fd9abfe89beb186c751f514 · discourse/discourse · GitHub](https://github.com/discourse/discourse/blob/1472e47aae5bfdfb6fd9abfe89beb186c751f514/app/assets/javascripts/discourse/app/controllers/application.js#L25-L28)

これらのいずれかが true の場合、ナビゲーションが表示されます。

`isiOSPWA()` と `isAppWebview()` はここで定義されています。

[discourse/app/assets/javascripts/discourse/app/lib/utilities.js at 1472e47aae5bfdfb6fd9abfe89beb186c751f514 · discourse/discourse · GitHub](https://github.com/discourse/discourse/blob/1472e47aae5bfdfb6fd9abfe89beb186c751f514/app/assets/javascripts/discourse/app/lib/utilities.js)

例えば、`isAppWebview()` は次のようになります。

[discourse/app/assets/javascripts/discourse/app/lib/utilities.js at 1472e47aae5bfdfb6fd9abfe89beb186c751f514 · discourse/discourse · GitHub](https://github.com/discourse/discourse/blob/1472e47aae5bfdfb6fd9abfe89beb186c751f514/app/assets/javascripts/discourse/app/lib/utilities.js#L451-L453)

あなたのテーマ（Discourse サイト内）で、クッキーをチェックする追加の条件を作成することができます。以下のようにします。

```javascript
const isWKWebView = () => {
  // クッキーをチェックし、存在すれば true を返す
  // または、ユーザーがあなたのアプリケーションを使用しているかを検出するための他の方法を使用
}

```

他のクラスの場合、通常は `showFooterNav()` を以下のように変更できます。

```javascript
api.modifyClass("controller:application", {
  pluginId: "show-footer-nav",
  @discourseComputed
  showFooterNav() {
    // ...
  }
});

```

ただし、これはアプリケーションコントローラーであり、あなたのコードが実行される前にキャッシュされてしまいます。つまり、クラスを変更することはできません。

とはいえ、以下のような方法で `showFooterNav` の値を変更することは可能です。

```xml
<script type="text/discourse-plugin" version="0.8">
  const isWKWebView = () => {
    // 条件をチェックして返す
  };

  if (isWKWebView()) {
    const applicationController = api.container.lookup("controller:application");
    applicationController.set("showFooterNav", true);
  }
</script>

```

これは、テーマのヘッダータブ、またはリモートテーマを使用している場合はイニシャライザーに記述します。

---

<div class="post-metadata">

### Author: ![alanost](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alanost/32/230952_2.png) [@alanost](https://meta.discourse.org/u/alanost)
#### Post date: [2021 年 10 月 31 日午前 8:58 UTC](https://meta.discourse.org/t/force-footer-nav-with-cookie/207687/3 "2021-10-31T08:58:27Z")

</div>

迅速なご対応、ありがとうございます。残念ながらエラーが発生します。

> [@Johani](#):
>
> ```xml
> <script type="text/discourse-plugin" version="0.8">
> const isWKWebView = () => {
> // 条件をチェックして返す
> };
> 
> if (isWKWebView()) {
> const applicationController = api.container.lookup("controller:application");
> applicationController.showFooterNav = true;
> }
> </script>
> 
> ```

上記のコード行をテーマのヘッダーに記述し、isWKWebView() 内にクッキー確認機能を追加しました。クッキーがない場合は何も起こりません。これは現在機能しています。しかし、クッキーがある場合、このバーは残念ながら表示されず、コンソールに「TypeError: Attempted to assign to readonly property.」というエラーが表示されます。

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [2021 年 10 月 31 日午前 9:05 UTC](https://meta.discourse.org/t/force-footer-nav-with-cookie/207687/4 "2021-10-31T09:05:59Z")

</div>

私はローカル環境でのみ試したため、それが理由かもしれません。

```javascript
applicationController.set("showFooterNav", true);

```

を代わりに使ってみてください。

```javascript
applicationController.showFooterNav = true;

```

その変更で投稿を編集します。

---

<div class="post-metadata">

### Author: ![alanost](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alanost/32/230952_2.png) [@alanost](https://meta.discourse.org/u/alanost)
#### Post date: [2021 年 10 月 31 日午前 9:14 UTC](https://meta.discourse.org/t/force-footer-nav-with-cookie/207687/5 "2021-10-31T09:14:33Z")

</div>

完璧に動作します！ありがとうございます 🙂

最終的なコード：

```js
<script type="text/discourse-plugin" version="0.8">
function getCookie(cname) {
  let name = cname + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

if (getCookie("app-platform") != "") {
    const applicationController = api.container.lookup("controller:application");
    applicationController.set("showFooterNav", true);
}
</script>

```