公開日：
あっという間に梅雨明けした沖縄からこんにちは、西島です。フルーツがとても美味しい夏が来て嬉しいです。
さて、以前振り返り記事を書いた沖縄ITエンジニア向けの勉強会「しまてく」なのですが、以前より参加型のコンテンツを取り入れたい、ということを考えていました。
今回、せっかくなので弊社の絶賛開発中の新サービスであるgusuku Everysite（以下エブリサイト）を使ってなにか作ってみよう、と思い立ちまして、企画を考えてみました。
イベント開催時における、「質問」の不思議
勉強会、セミナー、言い方は何でもいいのですが、登壇者が前で喋って参加者がそれを聞く、のようなフォーマットを持ったイベントでは、おおよそトークの最後に「質問ありますか〜？」と言う投げかけがあります。
このとき、シャイな皆さんは聴衆の前で喋るのが気になるのか、とくに何も質問が上がらず「では懇親会にも行きますので声をかけてください！」みたいな形で終わることがよくあるかと思います。
不思議なのはその後です。
本当に質問が思いつかなかったんだな〜と思いきや、トークの時間終了後に登壇者に「個人的に」なにか質問する人が非常に多いんです。こういう景色、皆さんも見たことありませんか？ 「しまてく」くらいのいい感じの人数や喋りやすい空気のイベントでは起きづらい現象ですが、タイムスケジュールが厳し目の、大人数のイベントでは非常によく見られます。
もちろん、「こんなこと聞いていいのかな？」「他の人の前で発言するのはちょっと恥ずかしい……」というお気持ちは、よ〜く分かります。分かるのですが、そのような行動をしている人にはいろいろな意味で機会損失、ということを意識してほしいと思います。
- 登壇者の休憩時間を奪っている → 悪
- 個人で完結しないで質問の内容と回答をみんなで共有したほうが、その問題への知見が増える → 良い！
- 上記の結果、参加者の満足度が上がる → とても良い！
- 参加者の満足度が上がれば主催者は嬉しいし、次回以降へのモチベーションにもなる → 運営もありがたい！
上記ような正のフィードバックを回すにはどうすればいいか？ と言うお題を解決する一つとして、世の中には「匿名で質問をやり取り出来る仕組み」を提供するサービスが多数あります。今回はこれをエブリサイトで作ってみることにしました。
実際に匿名質問サービスをエブリサイトで作ってみる
実際のイベントで使うのに間に合わせたかったので、機能は最小限かつ利用人数はそれほど多くないことを想定して、こんな仕様にしてみました。
- 匿名で読み書き、質問を投稿できる
- ついでに「いいね」的な投票もできる
- 各質問の内容などは随時kintoneから取得して表示する
- スマホで投票も出来れば嬉しい
ということで、ちゃっちゃと作っていきましょう。
kintoneアプリ側の作成
質問内容を保存するkintoneアプリは、このような単純なものにしました。イベント中に紹介した質問は非表示にしていくような運用を想定していたので、一応「公開ステータス」を付けて、これが「一覧表示中」のものだけがユーザー側に表示されるようにする、と言う想定です。
「え、この作りで別のイベントを開催したくなったらどうするの？」と思ったあなたは鋭いです。
答えは、「質問を全部消してやり直せばいい！」になります♪
もしくは、アプリを別に分けてそちらを利用する、という方法も良いですね。とにかく、「イベント管理」のような最低限必要なもの以外の仕様は追加しないことが、さくっと作るポイントになります。
エブリサイトでのサイト作成
まずはじめに完成したページをご紹介します。こんなイメージで、左側にはサイトのQRコードと質問を投稿するフォーム、右側には質問の一覧や質問そのものを表示するレイアウトとしました。
ご注意いただきたいこと
まずベースページを作成
上記の完成図をイメージして、まずベースページを作成します。 レイアウトをザクザク作成して、「B2」の丸文字のところをクリックしてページ側の領域としてセットします。このB2の領域を、実際の各ページが利用するイメージになります。
ベースページで欲しい機能は、このページに誘導するQRコードを表示することと、質問を投稿することの2点になります。これを実現するための画面デザインとウィジェットを配置していきましょう。
左側のシンプルパネルには、ページに誘導するためのQRコードや、イベントのロゴ画像などを入れておきます。
質問を投稿するシンプル縦フォームには、「文字列入力（複数行）」と「アイコン付きボタン(塗りつぶし)」を追加しています。
これでひとまず、必要な要素はセットできました。細かいデザインパラメータなどはあとでいくらでも変えられるので、一旦おいておきます。
次は「接続設定」
次はkintoneアプリと接続するために、接続先を追加します。今回はサイトを開いた人は誰でも見えるようにしますので、認証可否を「認証なしで利用可」として追加します。
この認証可否の設定はひとつの重要なポイントになります。おおよそ以下のような判断基準で検討し、選択してください。
| 認証なしで利用可 | 誰でも閲覧/権限によっては編集可能な公開情報の場合のみ利用を検討してください |
| 認証が必要 / ユーザー指定なし | ユーザー認証したあとは誰でも見られる、例えばサークル内のお知らせ、のような情報のやり取りの際に利用を検討してください |
| 認証が必要 / ユーザー指定あり | いわゆるマイページ的な情報のやり取りの際に利用を検討してください |
| ページ生成時のみ利用可能 | 文字通りページ生成時処理だけで利用できます。kintoneの情報をもとに大量のページを生成するような際には利用を検討してください |
これらの設定の中で、もっとも安定したパフォーマンスでコンテンツを配信できるのが「ページ生成時のみ利用可能」となります。それ以外の設定では必ずkintoneに接続する形になりますので、どうしてもある程度のパフォーマンスの劣化が発生します。このあたりはトレードオフになりますので、求めている要件によって設定してみてください。
…と、言っても分かりにくいかと思いますので実例を挙げますと、例えば弊社のgusuku Everysite ドキュメントは「ページ生成時のみ利用可能」の設定で作成されています。
今回の質問サイトは、「認証なしで利用可」の設定となっており、サイトに訪れたユーザーなら誰でも読み書きできる接続設定、と言う形になっています（実際には、設定した「kintone アプリの API トークン」に「レコード閲覧」や「レコード追加」「レコード編集」の権限をつけることで、読み書き権限を付与する形になります）。
最後に「ページ内処理」
最後にページ内処理です。これはgusuku Customineによるカスタマイズと同じような要領で、ボタンを押したあとkintoneにレコードを追加して、ページ遷移しています。カスタマインに慣れたかたであれば、ここはサクサクと理解できるのではないかと思います。
トップページの質問一覧ページを作成
作成したベースページをもとに、トップページの質問一覧を表示するページと、そこからリンクする質問詳細を表示するページを作成します。新しいページを追加する際にベースページとして先ほど作成したページを選択します。
トップページは簡単に「シンプルテーブル」の中に各アイテムをセットして、質問の一覧をテーブル表示します。ページ内処理で「クエリで条件を指定して kintone からレコードを取得する」で取得した内容を「テーブルの表示内容をセットする」でセットしています。
長い文字列を全部表示しないで利用する小技
ここでテーブルの表示内容をセットする際に小技を使っているのでご紹介します。 このシステムは完成図の画面キャプチャをご覧いただいたとおり、入力する項目を質問文のみと極限まで減らしていますので、もしその内容が長文だった場合、一覧表示したときにとんでもないことになってしまいます。
ですのでマッピング元で50文字で切って、それ以上長いようであれば続きの絵文字を付与する、と言う処理を入れています。具体的には以下のようなマッピング元の設定になります。
left(質問内容, 50) & if(count(質問内容) > 50, "💬", "")ここで使用できる関数はカスタマインの関数とほぼ同様となります。現在はq関数、getdate関数以外はすでに網羅されていますので、こちらの関数一覧のドキュメントを参照していただければと思います。エブリサイトで使える関数のドキュメントは、絶賛作成中なのでお待ちいただければと思います。
リンクテキストを使用する際のリンクの設定方法
シンプルテーブルでは「リンクテキスト（下線あり）」を使用しているのですが、このリンク先をセットする方法もご紹介します。
上記ドキュメントページ最下部の「カスタマイズ対応状況 >> サブ要素」と言う箇所を見ていただきたいのですが、ここにサブ要素として「 link.href リンク先URL」と言う記載があります。これでリンク先URLを設定することが可能となっています。
セットするリンクは、マッピング元として「”detail.html#” & レコード番号」という式を書いています。ハッシュの値としてkintoneから取得したレコード番号をそのまま渡しています。 この値をサブ要素を使って、マッピング先を「質問内容.link.href」とセットすることで遷移先のURLにレコード番号を渡しています。このテクニックは、ページ内処理で別ページにリンクして処理を行うような場合に便利ですのでご活用ください。ただしURLに直接値が入りますので、機密に該当するような情報は載せないように、ご注意いただければと思います。
このほかformat関数も使用しているマッピングの設定は以下のようになっていますので、参考にしていただければと思います。
詳細ページの作成
さきほどのマッピングででてきてしまいましたが、リンク先 = 詳細ページは「detail.html」というURLで作成します。
前述のマッピングの結果、ページを公開した際には「detail.html#レコード番号の数値」というURLが生成されますので、ページ内処理にて「URLからハッシュを取得する」を使ってその値を取得することが可能となります。このあたりは動的にkintoneからレコードを取得してその内容を表示する際の典型的パターンとなります。
このほか、「いいね」ボタンを押した際にkintoneのレコードを更新し、いいね数をカウントアップするような処理も入っていますがここでは省略しますので、ご自身にて作ってみてください！
まとめ
駆け足ではありましたが、イベントなどで利用できるライブQ&Aツールをエブリサイトで作ってみました。この程度の要件であれば、慣れてくればkintoneアプリの作成を含めて数時間でサイトを公開できます。ぜひ皆様もエブリサイトで思いついたアイデアを実現してみてはいかがでしょうか。
gusuku Everysiteは2025年7月現在プレビュー版のステータスで、開発中のサービスを早期アクセスバージョンとして無償でご利用いただくことが可能となっております。利用申請など詳細はこちらのサイトからお申し込みください！
「こんなサイト作ってみたよ！」という皆様の声をSNSで見るのを楽しみにしております！
社外もチームだ！
エブリサイトで社外DXを！
gusuku Everysite（グスク エブリサイト）は、kintoneをはじめとした複数のサービスと連携し、そのデータを自由なレイアウト・挙動でWebサイトとして入出力できるフロントエンド開発サービスです。
投稿者プロフィール
-
"沖縄の自宅からリモートワークで参画している根っからのクラウド・コミュニティ大好き人間。
オープンソースとクラフトビールをこよなく愛する。"
最新の投稿
gusuku2025年7月3日エブリサイトとkintoneで匿名ライブQ&Aツールを3時間で作る方法- community2025年6月2日Shima Tech Hub （しまてく） 約1年の振り返り
- gusuku2025年5月20日世界初（かどうかは分からない）gusuku Everysiteとgusuku Customineの連携事例
- aws2025年3月21日ドキュメンタリー：障害発生時の中のひと
