カテゴリー内の他の記事

kintone標準のグラフを綺麗に印刷してみよう

フォローする

(著者:アイティー・プラス・ワン 星野 智久

はじめに

はじめまして。星野(ノンビン)@アイティー・プラス・ワンです。
kintoneって標準でかっこいいグラフがあるけど、ブラウザの印刷じゃグラフ部分だけを綺麗に印刷できないよぉ…たすけてノンビン~!!という方は結構いるんじゃないでしょうか?

現在のkintoneのグラフを印刷するには、次の方法があるかと思います。

ブラウザ標準の印刷を利用する

Chromeでグラフを印刷する場合

kintoneのヘッダー部分も含まれて印刷されていますね。
また、Copyrightの文言がグラフの上に表示されてしまっていますね。
IE や Firefoxでは、Copyrightの文言がグラフの上に表示されることはありませんが、kintoneのヘッダー部分は含まれて印刷されます。

IEの場合

スクリーンショットを撮って、ペイントもしくはExcelなどで加工する。

ブラウザの画面のみのスクリーンショットを撮って、印刷したい部分以外を取り除きます。手順については今回は記載しません。(決して面倒だからというわけでは・・・)

このように、印刷する方法はいくつかあります。もしかしたら、kintoneのヘッダー部分は表示しないでグラフ部分だけを印刷したいという方もいらっしゃるのではないでしょうか?

そのような方のために簡単に、kintone標準のグラフ部分だけを印刷する方法をお教えしたいと思います。

サンプルアプリを準備する

今回はkintoneのデモ用にある「案件管理」アプリを利用して説明したいと思います。
「案件管理」アプリにはサンプルデータが入っていて、標準のグラフも設定されているため、今回の方法を試すのにベストなアプリです。

印刷する対象のグラフ選択

「案件管理」アプリでは三種類のグラフが最初から用意されています。

今回は「週別・製品別売上推移」を印刷してみようと思います。

印刷したいグラフを表示したら、画面右側にある「集計結果の操作」ボタンを押下します。
「埋め込み用タグ」というダイアログが表示されるので、その中に記載されているソースをコピーしてテキストエディターなどに張り付けておきます。

カスタマイズビューの設定

グラフ印刷用に新しい一覧を追加します。追加する一覧は2014年4月に新機能として追加されたカスタマイズビューを利用します。

JavaScriptの説明と設定

まずはPC用のJavaScriptファイルに以下のURLを指定設定する。
Cybozu CDN の https://js.cybozu.com/jquery/1.11.2/jquery.min.js を使います。

次に以下のソースJavaScriptに設定します。
ファイル名は適当ですが、拡張子を「.js」にして文字コードを「UTF-8(BOMなし)」で保存してください。

 

 

 

グラフの印刷

これで設定完了です。
グラフ印刷ボタンをクリックすると印刷プレビューが表示されます。

Chromeの場合

IEの場合

Firefoxの場合

IE と Firefoxの場合は印刷プレビューが表示されず、印刷準備画面が表示されますが、印刷されるものはすべて同じものが出力されます。

 

さいごに

今回は、kintone標準のグラフをグラフのみ印刷する方法について説明しました。
いかがでしたか?グラフのみ印刷したい際に、結構使えるのではないでしょうか?
今後もかゆいところに手が届くような、カスタマイズ方法がありましたらご紹介していきたいと思います。

 

このTipsは、2015年2月版で確認したものになります。

デモ環境

https://dev-demo.cybozu.com/k/176/

※デモ環境についての説明はこちら

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

ログインしてコメントを残してください。
Powered by Zendesk