本記事では、Officeアドインを使ったExcel帳票を作成し、それをViewFramerを通してkintoneから出力をする手順をご紹介したいと思います。

OPROARTSでは、マイクロソフト社のストアに登録されている「OPRO ドキュメントデザイナー for Office」というアドインを利用して、動的項目の設定を行います。

 

目次

1.事前準備

2.Officeアドインを設定する

3.ViewFramerでマッピングを行う

4.ボタンを作成する

 

1.事前準備

最初に事前の準備物をチェックします。

 

・OPROARTSのOfficeアドイン版の有効化

Officeアドイン版はOPROARTS Live(デザイナー)を契約されていればどなたでもお使いいただけますが、2018年11月以前にご契約のライセンスでは、一部有効化が必要になる場合があります。有効化はサポートが行いますので、サポートサイトから「Officeアドイン版を使いたい！」とお問い合わせください。（大変お手数かけてすみません…）

 

・Officeのバージョンをチェック

アドインを使用するには、Microsoft Office2013以上のバージョンである必要があります。
お手元の端末をご確認ください。

 

2.Officeアドインを設定する

まず、デザインをあらかじめExcelで作ります。（白紙から作る方法もありますが、今回はすでにあるExcelを使う形にしたいと思います。）

 今回、以下のようなデザインを作ってみました。

 

◎アドインをいれる

デザインがされているExcelにアドインを挿入しましょう。

説明とスクリーンショットはExcel2016になります。すみませんが、2013の方はご参考にしてください。

 

[挿入]タブの[個人用アドイン]をクリックします。

 

するとOfficeアドインの画面が開かれますので、この中の[ストア]を開いてください。

 

検索窓で、「OPRO」と検索してください。

すると、『OPRO ドキュメントデザイナー for Office』というアドインがありますので、こちらを追加してください。

 

追加をすると、[挿入]タブの一番端にOPROアドインのアイコンが出てくると思います。

 

アイコンをクリックすると、右側にアドインの画面が出てきます。

 

使いたいExcelファイルにアドインの追加ができました。

 

◎アドインを使ってマッピングを行う

アドインを使って、マッピングを行っていきましょう。

アドインで使用するサービスを選択します。今回は[OPROARTS]になります。

 

選択すると、アドインが設定画面になりました。

 

ではここからが本編です。

フィールドの作成とマッピングを行っていきましょう！

まず作成する帳票タイプですが、もっともポピュラーな「ヘッダー明細型」を作りたいと思います。ヘッダー明細型は、明細と非明細の分けられる帳票です。

まず、「TD1」と書いてある欄の「フィールドを追加」を行っていきましょう。

ここで追加するフィールドは、明細ではない部分に置きたいフィールドを作成します。

 

+++—————————————————————————————————————————-+++

 【補足】「フィールド」って？

+++—————————————————————————————————————————-+++

 

フィールド名を入力して[Enter]キーで追加していくことができますが、カンマ区切りやタブ区切りで複数指定して一括登録することもできます。

 

↑　追加できました。

作成したフィールドをExcel上にマッピングしていきます。

 

表示したいセルを選んで、フィールドをクリックすると、、、

 

タグが挿入されました！　これでマッピング完了です。

 

この調子ですべてのフィールドをセルにマッピングしていきます。

TD1のマッピングが完了したら、明細も行っていきます。

「明細テキストデータセットを追加」ボタンをクリックすると、「TD」（TextDataset）が追加されます。

 

今度は明細行のフィールドを作成して、これもマッピングを行います。

 

一通りマッピングができたら、明細行のタグをつけます。

アドインの左から2番目のタブを開きます。

「現在位置の行を繰り返し出力する」というボタンで、どこが明細行なのかを指定するためのタグを挿入します。

 

タグを挿入する場所は、明細行で使われていないセルです。

実際の出力の際にはこのタグは見えなくなります。

 

これでExcelテンプレートのマッピングは以上です。

ここで必ず保存をしてください。

仕上げとして、作成したExcelファイルをOPROARTSにアップロードします。

 

◎アドイン付きExcelをアップロードする

アドインを追加したExcelをOPROARTSと紐づけるために、アップロードを行います。

では、kintoneにログインをして、デザイナー画面を開いてください。

 

+++—————————————————————————————————————————-+++

【補足】

kintoneからデザイナーにアクセスしなくてもいい方法があります。

先ほどのExcelのアドインに「OPROARTSへアップロード」というボタンがあります。これをクリックするとブラウザが立ち上がり、デザイナーへのログイン画面が開かれます。

 

ブラウザでOPROARTS Liveにログインしていない場合は、以下のようにログイン画面が表示されます。これはデザイナー用UID/UPWを使ってログインすることができます。

 

すでにブラウザでOPROARTS Liveにログインしている場合は、一気に新規作成画面まで行くことができます。これはこれから紹介する手順を何個か省略できます。

 

やりやすいと思う手順で作成をしていただいて結構です。

+++—————————————————————————————————————————-+++

 

手順に戻ります。

デザイナー画面で「新規作成」をクリックし、「Excel」タブを開いてください。

この時「Excel」「Word」タブが見当たらなかったら、OPROARTSのアドイン機能有効化ができていませんのでサポートにご連絡ください。

 

Excelタブ内を1ページめくっていただいて、「アドイン入りExcelアップロード」をクリックしてください。

テンプレートの設定画面になります。

以下のように設定をしてください。

• 連携方法：ViewFramer/D3Worker（CSVを選んでも問題ありません）
• 出力形式：Excel
• テンプレート名：任意の英数字
• Excelブック：作成したアドイン入りExcelをアップロードする

 

 

設定できたら「作成」をクリックします。

これでExcelのアップロードができました。

最後に、テンプレートの配備を行います。配備を行うと、実際にテンプレートとして使用できるようになります。

配備状況の「配備」ボタンをクリックしてください。

 

再度配備ボタンをクリックしてください。

 

OPROARTSサーバに「＊＊＊＊」テンプレートが配備されています。

とてできたら配備完了です。

 

デザインとマッピングはこれで完了ですので、デザイナータブを閉じてもOKです。

 

3.ViewFramerでマッピングを行う

ここから先はViewFramerを使って、Excelテンプレートに作成したフィールドに対してkintoneの項目を定義する工程になります。

まずは、kintone側で帳票に使用するアプリのAPIトークンを取得します。

今回はアプリ「ARTS_DEMO」を使用します。

 

～kintone側の定義～

　1.kintoneの画面で帳票にて利用するアプリの「設定」を開きます。

 

　2.「設定タブ」より「APIトークン」を開きます。

 

　3.「生成する」ボタンを押しレコードを生成し「保存」します。

• この時、「レコードの閲覧」、「レコードの編集」にチェックします。

• 同時にレコードIDをコピーします。 

 

　4.保存後、アプリ設定画面より「アプリを更新」します。

 

～ViewFramer側の定義～

　1.ViewFramerにログインします。

https://vfui.ap.oproarts.com/view_framer_ui

 

　2.[認証設定]タブよりログインします。

 

　3.帳票にて利用するアプリの「トークン」に生成したレコードのIDを設定し「保存」します。 

 

＜ヘッダービューを定義＞

次に、ViewFramer上でヘッダービューを作成します。ヘッダービューは、非明細部分を定義するビューになります。

 

　1.「ビュー」タブより「新規」を選択します。

 

　2.「基本設定」より任意の「ビュー名」を指定します。指定したら[次へ]で進みます。

 

　3.「リレーション設定」の以下の項目を指定します。

※ 尚、ViewFramerの画面上ではkintoneの「アプリ」を「オブジェクト」と表記している箇所がございます。

• 主オブジェクト：起点となるアプリを選択し、ショートネームを入力します。

• 関連オブジェクト：起点となるアプリに関連付けるアプリです。

• 各「項目名」、「演算子」、「オブジェクト」、「項目名」については参照項目とアプリを結びつける条件を指定します。

　　リレーションを追加する際には「＋」ボタンを選択し追加します。

今回、使用するアプリは1つですので、以下の設定になります。

設定が完了したら、[次へ]で進みます。

 

　4.「出力項目設定」の以下の項目を指定します。

• 取得元オブジェクトを指定。

• 「項目ビルダー」でkintoneの項目を指定（「全項目を追加」も可能）

※OPROARTS Liveにて作成したテンプレート上で定義されているフィールド名と以下の赤枠部分を同じにしておけば、後で自動マッピングが可能となります。

設定が完了したら、[次へ]で進みます。

 

　5.「出力条件設定」ではレコードの出力条件を指定します。

見積書に条件を追加するには、以下のように設定してください。パラメータ名は任意ですが、今回は「RecordId」にします。

設定が完了したら、保存します。

 

＜明細ビューを定義＞

続いて、明細ビューを作成します。明細ビューは、明細部分を定義するビューになります。

ヘッダービューと同様に、「基本設定」より任意の「ビュー名」を指定します。

「リレーション設定」は、リレーション名を「ARTS_DEMO_2」にしています。

 

☆「出力項目設定」では、帳票には出力しませんが、「見積番号」の項目を作成しておいてください。

「出力条件設定」は、今回は特に設定せず、[保存]をします。

 

＜マッピングを定義＞

ViewFramerの設定は、あと少しで完了です！

各ビューを、1つのデータの固まりとしてまとめる「マッピング」の定義を行っていきます。

 

　1.[マッピング]タブより「新規」を選択します。

 

　2.マッピング名とタイプを指定し、ビューを選択します。

マッピング名は任意の名前になります。タイプについては、今回はヘッダー明細型を選択してください。

「主データ」では、①任意の名前をつけ、②作成したヘッダービューを選んで[取得]をクリックします。

すると、項目が自動で出てきます。

「明細データ」は、①、②は同様ですが、③で主データと明細データを紐づけるキーを設定します。

[見積番号]が同じであることをキーにしたいので「見積番号」を指定します。

 

　3.[Documentizer]タブより、帳票テンプレートとのマッピングを行います。

　①テンプレートを選択

　　Live側の帳票テンプレートを指定します。

　②データにビュー定義を指定

　　「td1」には、主データを選択します。([マッピング管理：詳細画面]で作成したもの)

　　「td2」には、明細データを選択します。([マッピング管理：詳細画面]で作成したもの)

　③テンプレートのCSVフィールドとビュー定義のデータフィールドをマッピングLive

　　[自動マッピング]でテンプレートと簡単にマッピングできます。上手くいかなかった場合は、

　　手動でマッピングを行ってください。

設定が完了したら、[配備]をしてください。

 

4.ボタンを作成する

kintoneにログインし、アプリの設定画面を開きます。

 

「設定」タブから「プラグイン」を選択して、、、

 

「プラグインの追加」をクリックします。

そして、「OPROARTS ViewFramer」をチェックし「追加」をクリックします。

 

続いて、OPROARTS ViewFramerの「設定」をしていきます。

をクリックします。

 

「ViewFramer Connector for kintoneを選択」から「ViewFramer Connector for kintone」を選び、「追加」をクリックします。

 

ViewFramerで作成したマッピングを選んで「追加」をクリックします。

 

次に「編集」をクリックしてボタンの設定を行います。
この設定では、ボタン名を好きなように変更することができますよ！

「ボタン名を置き換える」にチェックをして任意の名前を付けていきます。
（※本コラムではボタン名を「EXCEL出力」とします。）

また、全てのユーザーにボタンを表示するために「開発中」のチェックをオフにしておきます。

 

出力形式で「Excel[DDO]」を選択してください。

ViewFramerで作成したときにパラメーターを作成した場合は、ここでパラメーター設定を行います。
「パラメーター選択」をクリックし、項目を選択します。
（※本コラムでは「見積番号」をパラメーターに設定しています。）

選択したら、「変更する」をクリックします。

  

 

ボタン作成までもう一息です！

 

アプリの設定画面に戻り、「アプリを更新」を必ずクリックしてくださいね！

 

アプリ変更の確認画面が表示されるので、「OK」をクリックします。

 

アプリ画面に戻ると、Excel出力のボタンが表示されました！

 

そして、ボタンをクリックすると、、、

明細データが記載されたExcelが出力されました！

 

<さいごに>

Excelのアドイン版はいかがでしたでしょうか？

これまでもExcel出力はできましたが、アドインによってとても簡単に作れるようになりました。

今までの方法は複数シートへのマッピングに対応していませんでしたが、アドイン版では複数シートへのマッピングにも対応しています！

 ぜひとも一度お試しください＾＾