サインイン
Language
日本語 English

このセクションの記事

  • 開発中のボタンを特定のユーザのみに表示する(ViewFramer/kintone)
  • ViewFramerの「グループ」について(kintone)
  • マッピングの「最大件数」とは(kintone)
  • 【TECH COLUMN】kintoneのリストビューからラベル印刷する

【TECH COLUMN】kintoneのリストビューからラベル印刷する

Avatar
OPRO Support staff
  • 2024年11月01日 05:24
  • 更新

本記事では、ViewFramerを用いてkintoneアプリのリストビューからラベル印刷用のPDFを生成する方法をご紹介します。

今回生成するラベル印刷用のPDFは以下です。
例として非常に簡単なものを取り上げているので、必要に応じてデザインや内容は変更してください。

pdf.PNG

 

※本記事の内容は、特定のkintoneアプリに登録されているレコード全件を出力することを想定しています。ご了承ください。

 

kintoneアプリに格納されている名簿のリストから、ラベル印刷用のPDFを出力するまでの流れを順に説明していきます。

record_list.PNG

 

PDFのテンプレートをデザインする

OPROARTS Liveにログインします。
白紙のテンプレートを新規作成して開きます。

blank_page.png

 

ラベル内の表示をデザインする

名簿アプリに登録されている各レコードの情報を明細行(複数行にわたる情報)として出力したいので、「Dataset Table」コンポーネントを使用します。

select_datasettable.png

アイコンを選択して、レイアウトにクリックで配置します。
配置したら、プロパティの「座標」からラベルの位置とサイズを調整します。

datasettable_position.PNG

 

次に、明細行の表示部分をデザインします。
「Band」と表示されている部分が明細行の表示領域です。

「Band」領域を下まで伸ばします。

expand_band_area.png

この領域の中に、labelコンポーネントを置いていきます。
※例として簡単なデザインを示しています。必要に応じて変更してください。

label_design.PNG

 

kintoneの情報を表示する各labelコンポーネントを「動的」に設定します。

select_dynamic.png

文字数が多い場合でも文字サイズを小さくして表示してくれる「縮小して全体を表示」を選択すれば、会社名など長い場合に表示が途中で切れてしまうことを防いでくれます。

 

描画領域を追加する

今のデザインでは、表示されるラベルは一人分だけです。
複数人分を同じページに表示するためには、データセットテーブルを選択した際に画面左側に現れるプロパティ「描画領域の追加」を使います。

add_depicting_area.png

クリックすることで、明細行の表示を引き継いで別の場所で続けることができます。
元のDataset TableにはBandが幅いっぱい表示されるので、ここには二人目の宛名が表示されます。

second_depicting_area.PNG

 

右下の数字が表示される順番です。

all_depicting_areas.PNG

 

テンプレートにデータをマッピング

テンプレートのデザインが済んだら、保存して「マッピングへ進む」ボタンをクリックします。

designer_save_and_go_to_mapping.png

 

CSVフィールドを定義し、動的に設定したlabelコンポーネントとマッピングして、保存します。

csv_definition.PNG

template_mapping.PNG

 

配備したら、テンプレートの作成はこれで終了です。

 

ViewFramerの設定

ここでは本記事で扱う内容に絞って説明します。
詳しくはこちらのページの「ViewFramer 操作手順書<一覧型>」をご参照ください。

ビューの作成

ビューに使用するkintoneアプリを選択します。

view_relation.PNG

 

出力する項目を選択します。

view_output.PNG

 

出力条件については、今回は指定しません。

view_condition.PNG

 

マッピングの作成

設定画面では、一覧型を選択します。

mapping_basic.PNG

 

作成したテンプレートを選択して、前の画面で指定した項目とテンプレートのCSVフィールドを紐づけます。

mapping_documentizer.png

紐づけが完了したら、「配備」をクリックしてマッピングの作成は終了です。

 

kintoneの設定

ViewFramerと連携するために、アプリ「ViewFramer Connector for kintone」とプラグイン「OPROARTS ViewFramer」の追加をします。

vf_connector_for_kintone_appicon.PNG
plugin_icon.PNG

アプリとプラグインの追加についてはこちらのページの「ViewFramer セットアップガイド」をご参照ください。

 

アプリの設定画面で、「プラグイン」をクリックします。

app_settings_plugin.png

 

ViewFramerプラグインの設定画面に移動し、ボタンを追加します。

add_output_button.PNG

 

保存してアプリを更新すると、ボタンが表示されます。

output_button.png

 

ボタンをクリックすると、ラベル印刷用のPDFが出力されます。

pdf.PNG

 

以上、kintoneのリストビューからラベル印刷をする手順をご紹介しました。

一度テンプレートのデザインとViewFramerのビュー・マッピングの作成を済ませれば、いつでも即座にkintoneアプリから宛名ラベル等が出力できるようになります。

是非ご活用ください。

ページの先頭へ戻る

関連記事

  • D³Worker Connector for kintoneのダウンロード
  • 【TECH COLUMN】Excel帳票でラベル出力する方法
  • リリースノート一覧
  • 【TECH COLUMN】DMのQRコードからWebサイトへアクセスされたかどうかを確認したい(Salesforce)
  • 【TECH COLUMN】ViewFramerとは(Salesforce)
株式会社オプロ