このセクションの記事

[toc]

概要

本記事では、ViewFramerを使用して、kintoneアプリのリストビューからラベル印刷用のPDFを生成する方法を紹介します。
テンプレートの作成からViewFramerの設定、kintoneアプリへのボタンの配置までを、手順に沿って説明します。
本記事の手順は、特定のkintoneアプリに登録されているレコードを全件出力することを想定しています。

 

 

前提条件

  • OPROARTS Liveデザイナーへのアクセスが必要です。
  • ViewFramerへのアクセスが必要です。
  • kintone環境へのアクセス権限が必要です。
  • ViewFramer、Connector for kintone と OPROARTS ViewFramer プラグインがインストールされていることが必要です。


 

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

ステップ1：OPROARTS Liveにログインする

  1. OPROARTS Liveデザイナーにログインしてください。
  2. 白紙のテンプレートを新規作成して開いてください。
     

ステップ2：ラベル内の表示をデザインする

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


     

  2. アイコンを選択して、レイアウトにクリックで配置します。

  3. プロパティの「座標」からラベルの位置とサイズを調整します。


     

  4. 「Band」と表示されている部分が明細行の表示領域です。この領域を下まで伸ばします。

     

  5. この領域の中に、labelコンポーネントを配置します。

    💡
    補足

    例として簡単なデザインを示しています。必要に応じて変更してください。

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

     

  7. 文字数が多い場合に備えて「縮小して全体を表示」を選択します。 この設定により、会社名など長い場合に表示が途中で切れてしまうことを防げます。
     

ステップ3：描画領域を追加する

  1. データセットテーブルを選択します。

  2. 画面左側に現れるプロパティ「描画領域の追加」をクリックしてください。

    💡
    補足

    複数人分を同じページに表示するために、描画領域を追加します。

  3. 明細行の表示を引き継ぎ、別の場所で続けることができます。

  4. 元のDataset TableにはBandが幅いっぱい表示されるため、ここに次の人の宛名が表示されます。

💡
補足

右下の数字が表示される順番を示しています。

 

ステップ4：テンプレートを保存する

  1. テンプレートの保存をします。
  2. 「マッピングへ進む」ボタンをクリックしてください。


 

2. テンプレートにデータをマッピングする

ステップ1：CSVフィールドを定義する

CSVフィールドを定義します。

 

ステップ2：動的設定したコンポーネントと紐づける

  1. 動的に設定したlabelコンポーネントとマッピングします。
  2. 「保存」ボタンをクリックしてください。

 

ステップ3：テンプレートを配備する

「配備」ボタンをクリックしてください。 これで、テンプレートの作成が完了します。

 

3. ViewFramerの設定

ViewFramer操作手順の詳細は、[Connector]ドキュメント一覧をご参照ください。

ステップ1：ビューを作成する

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


     

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


     

  3. 出力条件の設定をします。（今回は指定しません。）


     

ステップ2：マッピングを作成する

  1. 設定画面で「一覧型」を選択します。


     

  2. 作成したテンプレートを選択します。

  3. 前のステップで指定した項目とテンプレートのCSVフィールドを紐づけてください。


     

  4. 紐づけが完了したら「配備」ボタンをクリックします。
    ViewFramerの設定が完了しました。

 

 

4. kintoneアプリの設定

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

ステップ1：アプリとプラグインを追加する

  1. アプリ「ViewFramer Connector for kintone」をインストールします。


     

  2. プラグイン「OPROARTS ViewFramer」をインストールします。

💡
補足

詳細は、[Connector]ドキュメント一覧の「ViewFramer セットアップガイド」をご参照ください。

 

ステップ2：プラグインの設定をする

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

     

  2. ViewFramerプラグインの設定画面に移動します。


     

  3. ボタンを追加します。
  4. 「保存」をクリックしてアプリを更新します。

 

ステップ3：ボタンをテストする

  1. ボタンが表示されていることを確認します。

     

  2. ボタンをクリックし、ラベル印刷用のPDFが出力されることを確認してください。

関連記事