# kintoneの詳細画面にkintoneライクなUIを使った印刷ボタンを置いてみた

**URL:** <https://community.cybozu.dev/t/topic/3421>\
**Category:** kintone 開発相談\
**Created:** [2018 年 10 月 5 日午後 9:55 UTC](https://community.cybozu.dev/t/topic/3421 "2018-10-05T21:55:40Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account1758](https://avatars.discourse-cdn.com/v4/letter/l/43a26b/32.png) [@Legacy\_Account1758](https://community.cybozu.dev/u/Legacy_Account1758)\
**Post date:** [2018 年 10 月 5 日午後 9:55 UTC](https://community.cybozu.dev/t/topic/3421/1 "2018-10-05T21:55:40Z")

</div>

時代はペーパーレスですが、まだまだ「最後は紙に印刷（あるいはPDFに）したい」という要望を無視できないので、標準のkintoneの詳細画面から何故か隠されている印刷メニューを、kintoneライクなUIを使える[「kintone UI Component」](https://community.cybozu.dev/hc/ja/articles/360000511023)を使って主役に抜擢してみるサンプルを作ってみました♪

印刷ボタンの復権を切に願いまして、以下にサンプルコードを載せます。

&nbsp;

**画面イメージ**

**サンプルコード**

```
(function(){'use strict';kintone.events.on('app.record.detail.show',function(event){newkintone.Promise(function(resolve,reject){letbutton=newkintoneUIComponent.Button({text:'印刷'});letelPrintButton=kintone.app.record.getSpaceElement('printButton');elPrintButton.appendChild(button.render());resolve(button);return;}).then(function(UiButton){leturl=kintone.api.url('/k/v1/records',true);letreg=/http(s)?:\/\/([\w-]+\.)+([\w-]+)+\/([\w-]+)/;console.log(url.match(reg));letappId=kintone.app.getId();console.log(appId);letbody={'id':appId};kintone.api(kintone.api.url('/k/v1/app',true),'GET',body,function(resp){// successconsole.log(resp);letprintURL=url.match(reg)[0]+'/'+resp.appId+'/print?record='+event.recordId;console.log(printURL);UiButton.on('click',function(event){window.open(printURL,null);});});});});})();

```

&nbsp;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1409](https://avatars.discourse-cdn.com/v4/letter/l/df788c/32.png) [@Legacy\_Account1409](https://community.cybozu.dev/u/Legacy_Account1409)\
**Post date:** [2020 年 9 月 25 日午後 1:59 UTC](https://community.cybozu.dev/t/topic/3421/2 "2020-09-25T13:59:22Z")

</div>

こちらのコード当方環境で使用してみたいのですが、知識乏しい故どこを変更したら良いものかわかりません。ご教示お願い致します。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1758](https://avatars.discourse-cdn.com/v4/letter/l/43a26b/32.png) [@Legacy\_Account1758](https://community.cybozu.dev/u/Legacy_Account1758)\
**Post date:** [2020 年 9 月 26 日午前 7:34 UTC](https://community.cybozu.dev/t/topic/3421/3 "2020-09-26T07:34:07Z")

</div>

下記が参考になるかもしれません。

[https://qiita.com/sy250f/items/f8f54ae1443ddbbe22e4](https://qiita.com/sy250f/items/f8f54ae1443ddbbe22e4)

---

<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:** [2025 年 4 月 8 日午前 7:31 UTC](https://community.cybozu.dev/t/topic/3421/4 "2025-04-08T07:31:22Z")

</div>

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