【kintone】カスタマイズビューでGoogleスプレッドシートのグラフを埋め込み表示できるって知ってた？【iframe】
おはようございます！！（珍しく朝から投稿
皆様、kintoneのグラフを使おうとして困ったことはありませんか？
例えば以下のような、折れ線と縦棒の組み合わせグラフ↓
kintone標準機能のグラフでは、折れ線グラフ、縦棒グラフそれぞれ単体は作れるのですが、
これらを組み合わせて表示するようなことは残念ながら現時点ではできません；；
上のグラフはGoogleスプレッドシートにて作成したものなのですが、
kintone愛好家としては、「kintoneでこれを表示させて簡単に共有したい！」と思いますよね。
…思いますよね！？（圧
実は、Googleスプレッドシートで作成したグラフをkintoneに表示させる方法、あるんです！
しかも、JavaScriptは使いません！
※kintoneスタンダードコースの契約は必要です（ライトコース不可）
今回は、この表示方法について解説していきます！
Googleスプレッドシートのグラフを公開
まず、Googleスプレッドシートにて対象のグラフのシートを開き、
右上にある「グラフを公開」ボタンをクリックします。
シート丸ごとグラフではなく、シートの中の一部にグラフがある場合はボタンが表示されませんが、
グラフ右上の点をクリックした中に項目があるので、そちらをクリックしてください。
「埋め込む」をクリックし、公開対象が公開したいグラフになっていることを確認して、
「公開」をクリックしてください。
※ドキュメント全体を公開しないようご注意ください（セキュリティ上良くない）
公開されると、埋め込み用iframeタグが生成されますので、これを丸ごとコピーしてください。
iframeとはHTMLタグの一種で、インラインフレームの略です。
Webページの中にsrc属性にて指定したURL（リンク先の内容）を埋め込み表示する際に用いられます。
よくある例だと、YouTube等の動画をWebページに埋め込みたいときに使われますね。
kintoneアプリの一覧にてカスタマイズビューを用意
次に、グラフを表示させる場所として、kintoneアプリの一覧にカスタマイズビューを追加します。
一覧設定画面の「レコード一覧の表示形式」より「カスタマイズ」を選択し、
「HTML」に先程コピーしたiframeタグを貼り付けてください。
ページネーション（今一覧の何ページ目で何番目～何番目のレコードを表示しているか）は不要です。
「ページネーションを表示する」チェックはオンのままでも支障はありませんが、
邪魔な方はオフにしてください。
設定できたら、一覧を保存し、「アプリを更新」をクリックしましょう。
更新が終わったら、先程作成した一覧（カスタマイズビュー）をクリックして確認しましょう。
アプリにカテゴリー設定をしているため、左側に不要なカテゴリーが表示されてしまっていますが、
たったこれだけの操作で、無事グラフを表示することができました！
グラフにカーソルを当てればその位置のデータの数値が表示される機能も問題なく使えます！
注意点
ところで、kintoneには、アプリに設定した一覧やグラフを、
ポータル（kintoneのトップページ）やスペースに表示させる機能があります。
ところが、こちらはカスタマイズビューを使用しているためか、
残念ながらポータルやスペースに表示させるよう設定することができませんでした；；
ポータルやスペースにGoogleスプレッドシートのグラフを表示させるためには、
カスタマイズビューではなく、がっつりJavaScriptカスタマイズを行う必要がありますね。
がっつりJavaScriptカスタマイズ用に、公式の記事を下記にまとめております。
- kintoneポータルのカスタマイズをしてみよう！ – cybozu developer network
- kintone のスペースを API を使ってカスタマイズしてみよう – cybozu developer network
がっつりJavaScriptカスタマイズに自信がないという方、是非私にサポートさせてください！
kintone有資格者・kintone開発実績多数・高等学校情報科教員免許保有者である私が伴走します！
勿論JavaScript受託開発も承りますので、ご興味のある方はこちらからご連絡お待ちしております！
終わりに
最後までお読みいただきありがとうございました！
使われる頻度が少ないであろうkintoneアプリの一覧のカスタマイズビューを用いて、
Googleスプレッドシートのグラフを簡単に埋め込み表示させることができました！
これを応用すれば、「kintone REST API」を用いて、
kintoneアプリのレコードをGoogleスプレッドシートと同期させ、
kintoneにレコード追加した結果をカスタマイズビューのグラフにリアルタイムで反映できるかも…！？
やりたいことがkintoneの標準機能で実現できなくて諦めてしまい、
結果社内でkintoneが使われなくなった…というようなことが少しでもなくなることを願いつつ、
私も「こんな使い方があるんですよ！」という発信をこれからも頑張っていきたいと思います！
