# 一覧画面表示時のボタン配置及びメッセージテキスト表示について（ご質問）

**URL:** <https://community.cybozu.dev/t/topic/1349>\
**Category:** kintone 開発相談\
**Created:** [2023 年 1 月 26 日午前 3:01 UTC](https://community.cybozu.dev/t/topic/1349 "2023-01-26T03:01:07Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account2742](https://avatars.discourse-cdn.com/v4/letter/l/f9ae1b/32.png) [@Legacy\_Account2742](https://community.cybozu.dev/u/Legacy_Account2742)\
**Post date:** [2023 年 1 月 26 日午前 3:01 UTC](https://community.cybozu.dev/t/topic/1349/1 "2023-01-26T03:01:07Z")

</div>

チュートリアルにある[記事](https://community.cybozu.dev/hc/ja/articles/201767270)（第2回 レコード一覧画面にボタンを置いてみよう！）を参考に、（１）コード一覧画面のメニュー右側の空白部分にボタンを表示させる、（２）メニューの下側の空白部分に文字列を表示させるアプリを作成しました。

これをモバイルアプリ用にもと思い、APIに"mobile"を付加してコードを書き換えてみましたが、（１）のボタンが表示されません。

mobileを付加したapiは以下の通りです。  
‘mobile.app.record.index.show’  
kintone.mobile.app.getHeaderSpaceElement()  
kintone.mobile.app.getHeaderMenuSpaceElement().appendChild(myIndexButton)

```
(() => {

  'use strict';

  kintone.events.on('mobile.app.record.index.show', (event) => {

    if (document.getElementById('my_index_button') !== null) {

      return;

    }

    const myIndexButton = document.createElement('button');

    myIndexButton.id = 'my_index_button';

    myIndexButton.innerText = '一覧のボタン';

    myIndexButton.onclick = () => {

      const myHeaderSpace = kintone.mobile.app.getHeaderSpaceElement();

      // 文字列要素

      const myListHeaderDiv = document.createElement('div');

      myListHeaderDiv.style.width = '100%';

      myListHeaderDiv.style.height = '35px';

      myListHeaderDiv.style.textAlign = 'center';

      myListHeaderDiv.style.fontSize = '30px';

      myListHeaderDiv.style.fontWeight = 'bold';

      myListHeaderDiv.style.backgroundColor = '#ffd78c';

      myListHeaderDiv.innerText = '押されて飛び出てじゃじゃじゃじゃーん';

      // メニューの下側の空白部分に文字列を表示

      myHeaderSpace.innerText = ''; // ← 増殖を防ぐため一旦明示的に空文字をセット

      myHeaderSpace.appendChild(myListHeaderDiv);

    };

    kintone.mobile.app.getHeaderMenuSpaceElement().appendChild(myIndexButton);

  });

})();

```

このボタン表示は、モバイル用アプリとして実装可能なのでしょうか？ （ボタンを表示しon click時に一覧レコードに対し処理を実行したい）

---

<div class="post-metadata">

**Author:** ![Legacy\_Account63](https://avatars.discourse-cdn.com/v4/letter/l/6de8d8/32.png) [@Legacy\_Account63](https://community.cybozu.dev/u/Legacy_Account63)\
**Post date:** [2023 年 1 月 27 日午前 2:03 UTC](https://community.cybozu.dev/t/topic/1349/2 "2023-01-27T02:03:35Z")

</div>

同様のことをしたい場合、mobileは[ヘッダーの下側の空白部分の要素を取得する](https://community.cybozu.dev/hc/ja/articles/201942004#step8)を利用することになるかとおもいます。  
[PC/モバイル早見表](https://community.cybozu.dev/hc/ja/articles/202738940-PC-%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB-%E6%97%A9%E8%A6%8B%E8%A1%A8)があり、PCとモバイル何に対応してる・してないは一覧化されてるのでみてみてください！

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2742](https://avatars.discourse-cdn.com/v4/letter/l/f9ae1b/32.png) [@Legacy\_Account2742](https://community.cybozu.dev/u/Legacy_Account2742)\
**Post date:** [2023 年 1 月 29 日午前 7:46 UTC](https://community.cybozu.dev/t/topic/1349/3 "2023-01-29T07:46:30Z")

</div>

[村濱一樹](https://community.cybozu.dev/hc/ja/profiles/1118414956-%E6%9D%91%E6%BF%B1%E4%B8%80%E6%A8%B9)様

ご助言有難うございました。  
ボタンをヘッダースペースにわりあてることでボタンおよびメッセージ内容をモバイルでも表示できるようになりました。

重ねて御礼申し上げます。

&nbsp;

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\
**Post date:** [2023 年 12 月 5 日午前 6:54 UTC](https://community.cybozu.dev/t/topic/1349/4 "2023-12-05T06:54:38Z")

</div>

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。