学生インターンシップです！ スパイラル株式会社の学生インターンとして、SPIRALを学習しながらユーザー目線で質問に答える活動をしています。 補足情報や調査結果の提供を行い、皆様のお役立てができればと思っています！
※学生が学びの一環として調査・まとめた内容です。
　正確な仕様や最新情報は、公式リファレンスをご確認ください。

はじめに

SPIRAL WebToolsで作成するサイト内で、SPIRALで収集したDBデータを用いた簡単なグラフを使用したい方必見！
Locker Studioを使用した、簡単にグラフをサイト内に埋め込む方法について紹介します。
googleアカウントを持っていれば、その他アプリなどのインストール不要です。
所要時間は20分ほどなので、ぜひお試しください！

事前準備

①連携を始める前に、googleアカウントの登録が必要です。
②事前にSPIRALとスプレッドシートを連携する必要があります。
　30分ほどの簡単な連携になっています。下記サイトを参照してください。
　【SPIRAL×スプレッドシート】Apps Scriptを用いたスプレッドシートとの簡単連携

Loocker Studioの設定

始めに、SPIRAL ver2を用いて、使用したいDBとgoogleスプレッドシートを連携する必要があります。
連携後、スプレッドシート作成で使用したアカウントでLoocker Studioにログインします。

1．Loocker Studioにログイン後、「Create a report」から新しいレポートを作成します。
2．作成されたレポート内の画面上のタブにある「データを追加」をクリックし、google スプレッドシートを選択します。
3．使用したい、SPIRALから取得したDBが保存してあるスプレッドシートを選択します。
　 画面右のデータから選択したスプレッドシート内に記載されているデータが確認できます。
4．次に「グラフを追加」をクリックし、使用したいグラフを選択しページ内に配置します。
5．「データ」から、グラフに使用する情報を、グラフに対してドラッグ＆ドロップします。

上記手順で必要な分のグラフを作成し、ページ内でお好きな配置設定にしてください。
ページ内のグラフ作成が完了したら下記手順で、作成したレポートの埋め込み用コードを取得します。

1．画面右上の共有の横にある「▼」をクリックし、「レポートを埋め込む」を選択します。
2．「埋め込みを有効にする」と「レコードを埋め込む」にチェックをいれ「グリップボードにコピー」を選択します。
3．コピーされたhtmlのコードは後ほど使用するので、保管しておきます。

以上で、Loocker Studioの設定が完了しました。

SPIRALの設定

今回はSPIRAL WebToolsを使用します。

1. 右上の歯車から「サイト管理」をクリックします。
2.「サイト管理」の「＋」からサイトを作成します。
3. 左の設定から「ページ」をクリックします。
4. 「ページ」の「＋」からページを作成します。
設定方法はソース設定を選択します。
　

これで、ページの作成が完了しました。次にブロック作成を行います。

1. 左の設定から「ブロック」をクリックします。
2. 「ブロック」の隣にある枠から、「フリーコンテンツ」を選択します。
3. 「フリーコンテンツ」を選択後、「＋」からブロックを作成します。
　　設定方法はソース設定を選択します。
4. 作成したブロックをクリックし、画面上の「フリーコンテンツ」をクリックします。
5. 「フリーコンテンツ」に下記コードを参照に、Loocker Studioで取得したURLを張り付けてください。

必要に応じて、ページに設置するブロックを作成してください。
最後に再度、ページ設定を行います。

1. 左の設定から、「ページ」をクリックし、先ほど作成したページを選択します。
2. ページ内の上の「body」をクリックします。
3. 「body」の「＋」をクリックし、「フリーコンテンツ」を選択します。
4. 「フリーコンテンツ」の「既存フリーコンテンツ選択」を選択し、先ほど作成したブロックをクリックします。
5. 必要なブロックを選択後「保存」をクリックします。

以上で全ての設定が完了しました。

動作確認

ページ内のURLをクリックすると、Loocker Studioで作成したページが表示されています！
※表示に少し時間がかかる場合があります。

まとめ

今回は、Loocker Studioを使用した、簡単にグラフをサイト内に埋め込む方法をご紹介しました。
使用するグラフを変更したい場合も、Loocker Studio内で変更し保存することで、サイト内にもすぐに反映されます！
DB登録時にスプレッドシートにDB情報が反映される設定であれば、グラフも常に最新の情報に基づいて作成されるため、とても便利です！
googleアカウント以外不要の簡単な方法ですので、ぜひお試しください！

　

• Loocker Studio
• googleスプレッドシート
• HTML
• 公式

ナレッジサイト会員登録