基本機能だけで作る！質問＆回答サイトの作り方

2019/03/19 · · 投稿者 Takashi Okutsu

画像TeamPage で質問＆回答サイトを構築する最も簡単な方法は 質問箱プラグイン の導入です。必要な機能が全部揃っています。

でも、実は、基本機能を組み合わせても同じようなことができるのです。今回は「基本機能だけのレシピ」をご紹介します。

基本機能を知することで、「ここをちょっとアレンジするだけで◯◯も実現できるのでは？」といった応用アイディアが浮かび、TeamPage の可能性を感じていただけるのではないかと思います。

目次

材料（使用する機能）

  • スペース ... 日報が投稿されるスペース（「部屋」のようなもの）を作ります。
  • 記事投稿機能 ... 質問事項を記事として投稿します。
  • タグ付け機能 ... 質問にタグを付けてカテゴリー分けできるようにします。
  • コメント機能 … 回答をコメントします。
  • セクション機能 ... 色々な条件で TeamPage に投稿された「記事」を分類し、取り出します。
  • ダッシュボード機能 ... セクションを壁新聞のように並べてチームメンバーと共有します。

レシピ（設定方法）

新しいスペースを作る

ここでは「質問部屋」という新しいスペースを作ることにします。

もちろん、部署ごとや業務ごとの各スペースに質問コーナーを作成しても良いのですが、ここでは説明をわかりやすくするため、新しく独立したスペースを作って説明します。

新しいスペースを作成するには、[セットアップ] > [新規スペースの作成] を選択します。

新規スペースの作成

この [セットアップ] メニューはサーバー管理者でログインしないと表示されませんのでご注意ください。

新規スペースの作成ダイアログが表示されます。「表示名」に「質問部屋」と記入し、「スペースの追加」ボタンをクリックします。

新規スペースの作成ダイアログ

「質問部屋」スペースが作成され、このスペースのダッシュボード画面が表示されます。画面の上部には「セットアップ アシスタント」が表示されますが、不要なのでバツ印アイコンをクリックして閉じましょう。

新しく作成された「質問部屋」スペース

メモ: 記事の種類について

TeamPage では目的に応じて記事の「種類」を選べるようになっており、サイドバーのドロップダウンメニューから選択できます。

記事の種類を選べる

記事の種類によって動作（どの画面に表示されるか等）が異なるので、適切な使い分けが大切です。

  • 標準的な記事 ... タイトル、本分、タグ、ファイル添付などをサポートした「普通の記事」です。用途はいろいろ。
  • 予定 ... 開始/終了日時や参加者などを指定できる、カレンダー用のイベントです。会議や顧客訪問の予定登録などに。
  • タスク ... 開始日や締切日、所要時間、担当者、優先度などを指定できる、To Do です。カレンダーにも表示されます。

今回は、質問の回答期限は設けず、「質問が締め切られたかどうか」と「カテゴリー」だけに絞りましょう。

カレンダーに表示する必要がないので、質問投稿に使用するのは「標準的な記事」で良いですね。

質問投稿のナビゲーションを作成する

上図のドロップダウンメニューから「新しい記事」を選択して…でも質問を投稿できますが、もっと簡単かつわかりやすくできるように、独自のナビゲーションを用意してみましょう。

ようこそ記事を編集する

新しいスペースをしたとき、「〜へようこそ」という記事が自動的に作成されます。この記事を編集してナビゲーションに仕立てます。

ようこそ記事

編集するには、右クリックして表示されるメニューの [[編集する] を選択します。左クリックではなくて右クリックですので、お間違えなく。

右クリックメニューから編集する

編集フォームが表示されます。(1) タイトルと本文を適当に編集し、(2) 末尾の空行にカーソルを移動し、(3) [ウィジェットの挿入/編集] をクリックします。

編集フォーム

[コードやコンテンツの埋め込み] を選択します。

コードやコンテンツの埋め込み

テキスト入力欄に下記の HTML コードをコピー＆ペーストします。

HTMLコードをコピペ

こちらがコピー＆ペーストする HTML コードです。詳しい説明は省きますので、そのままコピペしてください。

<a class="button question-p1" rg="a#form&form=article&onsave=rv&default_project=質問部屋&default_tags=+:p1,+:todo,+:質問&html=緊急度「最高」の質問を作成" href="javascript:void(0)"><i></i>緊急度 - 最高</a>
<a class="button question-p2" rg="a#form&form=article&onsave=rv&default_project=質問部屋&default_tags=+:p2,+:todo,+:質問&html=緊急度「高」の質問を作成" href="javascript:void(0)"><i></i>緊急度 - 高</a>
<a class="button question-p3" rg="a#form&form=article&onsave=rv&default_project=質問部屋&default_tags=+:p3,+:todo,+:質問&html=緊急度「普通」の質問を作成" href="javascript:void(0)"><i></i>緊急度 - 普通</a>
<a class="button question-p4" rg="a#form&form=article&onsave=rv&default_project=質問部屋&default_tags=+:p4,+:todo,+:質問&html=緊急度「低」の質問を作成" href="javascript:void(0)"><i></i>緊急度 - 低</a>

ダイアログの [OK] をクリックすると、記事本文のカーソル位置にウィジェットが埋め込まれます。左下の [記事の送信] をクリックして投稿します。

画像

じゃん！ようこそ記事に 4 つボタンのナビゲーションができました。

4つのボタン

ようこそ記事の記事 ID をコピーします。（「質問部屋」スペースの 1 番目の記事なので、記事 ID は「質問部屋1」です）

記事ID

ようこそ記事をダッシュボードに掲載する

「質問部屋」スペースの、スペースセットアップを表示します。

スペースセットアップへ移動

スペース セットアップ > ダッシュボード > 内容 ページで、すべてのセクションを削除します。（Shift キーや Ctrl キーを押しながら全セクションを選択し、[削除] ボタンをクリックする）

すべてのセクションを削除

[新規] ボタンをクリックし、下図のセクションを定義します。

ナビゲーション用のセクション

右上の [適用] ボタンをクリックして変更を保存します。

ダッシュボード画面をテスト表示してみましょう。下図のように「ようこそ記事」のナビゲーションが表示されることを確認します。

画像

ダッシュボードの残りのセクションを設定する

上記のステップで、ダッシュボードに「ようこそ記事」を掲載しました。

さらに次の 4 つのセクションを設定してみましょう。

回答受付中の質問セクション

回答受付中の質問とは、「質問」と「to do」タグが付いている記事のことです。この条件で記事を集めるセクションは、次のように設定します。

回答受付中の質問セクション設定

締切済みの質問セクション

回答受付中の質問とは、「質問」と「done」タグが付いている記事のことです。

このセクションでは、質問の投稿順ではなく締め切られた順（「done」タグが付けられた順）に表示します。「タグ追加順」を選択するのがミソです。

締切済みの質問セクション設定

最近コメントされた（回答された）質問セクション

最近新しいコメント（回答）が投稿されたら表示するセクションを設定します。

最近コメントされた（回答された）質問セクション設定

最新コメントのセクション

新しいコメントだけを表示するセクションを設定します。

最新コメントのセクション設定

ダッシュボードの完成図

さぁ、これで完成です！

ダッシュボード完成図

味見（テスト投稿）

ナビゲーションのボタンをクリックして質問を投稿してみましょう。

[緊急度 - 最高] のボタンをクリックすると…

質問をテスト投稿

新しい質問の作成フォームが表示されます。[タグ] 欄には「p1」「to do」「質問」のタグが自動選択されているはずです。

新しい質問の作成フォーム

質問を投稿するとダッシュボードの「質問（回答受付中）」セクションに表示されます。

回答受付中の質問セクション

質問の「to do」タグを「done」タグに変更してみましょう。「質問（締切済み）」セクションへ移動するでしょうか？移動すれば正しく設定されています。

締め切られた質問

まとめ

これで基本機能を組み合わせての質問＆回答サイトは完成です！お疲れ様でした。

前回に引き続き、今回も丁寧にご説明したので長くなってしまいましたが、構築の所要時間は 30 分程度です。お気軽にお試しいただければと思います。

基本機能だけで作れるソリューションは他にもありますので、引き続き今後もご紹介していきます。お楽しみに♪

関連記事

基本機能だけで作る！場所を選ばないメール日報共有サイトの作り方 ... TeamPage の「メール投稿」機能やその他の基本機能を組み合わせて、外出先からでもメールで日報を投稿し、社内外のメンバーと共有するためのサイトを構築できます。

質問箱プラグイン ... 質問＆回答コーナーを設置するためのプラグインです。社外の取引先や顧客からの質問に対して社内のサポートスタッフが回答する形式（例: 自社製品のサポート業務）にも、ユーザー同士が質問や回答する形式（例: 「Yahoo! 知恵袋」のような、ユーザー同士の質問＆回答フォーラム）にも対応できます。

プロフィール画像（アバター）とタグをもっと活かして、画面をもっとカラフルにしよう ... タスク担当者の表示にプロフィール画像（アバター）を追加し、記事のタイトルの下にタグを表示して、画面をカラフルにしましょう。

カレンダーやタスクリストを、色彩豊かに、より使いやすく ... プロエジェクトだけで利用可能だった色付け・色分け機能を予定やタスクなどにも拡張し、より仕事を進めやすい環境へと改善しました。

TeamPageをアイディア記録帳として使う事例のご紹介 ... お客様の声や卸先からの反応などを「アイディア メモ」として投稿・共有するカスタマイズ事例をご紹介します。

手軽にTeamPageをカスタマイズ、具体例をご紹介 ... 「Proteus カスタム JavaScript & CSS」プラグインを使えば、動作や見栄えの細かなカスタマイズを簡単にできます。

Page Top