写真が誤って回転表示されても大丈夫な「画像の回転」プラグインのご紹介

2020/01/30 · · 投稿者 Takashi Okutsu

画像ある林業の会社では、作業員が現場の写真を携帯で撮影し、撮影した写真をメールに添付して TeamPage の投稿メールアドレスに送信し、投稿された写真を社内外のメンバーと最新の現場状況として共有しています。

通常、携帯やカメラには、傾きを感知する機能が備わっており、撮影した写真に「縦向き/横向き」情報が埋め込まれると同時に、写真の向きも自動的に決定されるようになっています。

例えば、カメラを縦向きにして撮影した写真は自動的に縦長になりますよね。

縦向き/横向き判定機能が正しく動作しないと

しかし、時々この「縦向き/横向き判定機能」が正しく動作しないことがあります。その場合、縦向きに撮影した写真が横長になったり、逆に横向きで撮影したのに縦長になったりします。

要するに、誤って 90 度回転してしまうわけですね。

カメラや携帯の画像編集機能を使って修正してからメール送信すれば良いのですが、外の現場での修正作業は面倒です。面倒なのでそのままの写真が送られ、画面に 90 度回転して表示されるので、閲覧者は首を 90 度曲げて見ることになります。

写真の回転機能を作ってみた

この問題を解決するために作ったプラグインがこちらです

写真の左上に表示される「回転」ラベルをクリックするごとに右に 90 度回転します。これで解決!

ただし、写真の回転情報は記憶されません。画面を再読み込みすると元に戻ってしまいます。

将来的には、画面に写真を表示する際に写真に埋め込まれている回転情報を読み込み、それに応じて画像の回転を自動修正する機能を作りたいと考えています。気長にお待ちいただければと思います。

バックスラッシュ記号を円記号として表示するには

2020/01/29 · · 投稿者 Takashi Okutsu

画像日本語キーボードの円記号キー ¥ を押して入力される文字は「¥」でしょうか。それとも「\」でしょうか。

実は、使用する OS やフォント設定によってどちらの文字として表示されるかが変わります。

アメリカ生まれの TeamPage で円記号として表示するにはちょっとした設定が必要です。

ここでは、その背景や設定方法をご紹介します。

円記号がバックスラッシュ記号になる!?

多くの方は、日本語 Windows と日本語キーボードをお使いだと思います。Word や Excel などで日本円の金額を入力するとき、キーボードの ¥ キーを押して日本円記号を入力しているのではないでしょうか。

キーボードの ¥ キーでの日本円記号の入力に慣れ親しんでいるので、TeamPage でも同様の動作を当然期待します。

しかし、アメリカ生まれの TeamPage は「既定で英字フォントを使う」という設定になっており、TeamPage の画面では、キーボードの ¥ キーで入力された文字はバックスラッシュ記号として表示されてしまいます。

理由・背景

日本語キーボードの ¥ キーで入力される文字は、実はバックスラッシュ記号と同じものなのですが、歴史的な理由により、日本語 Windows 環境(にインストールされているフォント)では、これを円記号として表示するようになっています。

日本語キーボードの例

つまり、私達が日本円記号だと思って入力している文字は実はバックスラッシュ記号で、Windows の日本語フォントを使う場合に日本円記号として表示される、ということです。

標準の TeamPage は「英字フォントを使う」という設定になっていますので、「日本語フォントを使う」という設定を行います。

設定

「Proteus カスタム JavaScript & CSS」プラグインを使って JavaScript と CSS の設定を行います。

設定画面

JavaScript (上)の記述は、「投稿/編集フォームのリッチテキストエディタで、既定で日本語フォントを適用する」という設定を追加します。

CSS (下)の記述は、「TeamPage の表示画面では、既定で日本語フォントを適用する」という設定を追加します。

詳しくは、サポートサイトの FAQ をご覧ください

これらの設定により、半角バックスラッシュ記号が日本円記号として表示されるようになります。

日本円の表示例

※ MacOS 環境では、Windows 用の日本語フォントをインストール必要があります。

以上、バックスラッシュ記号を円記号の問題と解決方法を簡単にご紹介しました。

関連記事

手軽にTeamPageをカスタマイズ、具体例をご紹介 ... TeamPage をお使いの管理者の皆さん自身が細かなカスタマイズを一箇所でできるようにする「Proteus カスタム JavaScript & CSS」プラグインのご紹介です。

「灰色の枠メニュー」って何?目立たせて記事や段落への操作をしやすくする方法

2019/11/25 · · 投稿者 Takashi Okutsu

画像TeamPage では細かなコミュニケーションを可能にするため、記事だけではなく段落ごとにもコメント、タスク登録、スケジュール登録、タグ付けなどができるようになっています。

その鍵となるのが「灰色の枠メニュー」です。これは「どの段落に対してコメントするのか」を示してくれるナビゲーションなのですが、薄い灰色をしているため、目立たず、気が付きにくいのが欠点です。

この「灰色の枠メニュー」を赤くして目立たせるカスタマイズ方法をご紹介します。

Image: Two Red Windows by Garry KnightFollow, Attribution 2.0 Generic (CC BY 2.0)

段落ごとにコメントってどういうこと?

記事全体へのコメントだけでは話が混線することがある

例えば、下図のように、お客様からの一通のメッセージの中に複数の質問(話題)が含まれていることがよくありますよね。

下図の例では (1) スペックの違いは何ですか? と (2) 納期はどのくらいですか? の 2 つの質問が含まれています。

お客様からの質問メッセージ例

下部の「コメント」欄から全体へのコメントを投稿することができますが、(1) のスペックについてと (2) の納期についての話が混在してしまいます。

例えば、(1) の話をしばらく進めた後に (2) の話になり、また後から (1) の話に戻る…のようなやり取りが続くと、(1) と (2) の話題の混線が発生しがちです。

全体へのコメント

適切な段落にコメントすると混線を防げる

下図では、質問 (1) と (2) のそれぞれの段落にコメントで回答した例です。適切な場所にピンポイントでコメントができます。

段落コメント

「灰色の枠メニュー」って何?

前置きが長くなりました。

段落に対してコメントするには、「今から私はこの段落に対して何か操作しますよ」と目的の段落を指定する必要があります。

それを行うためのメニューが、「灰色の枠メニュー」です。目的の段落の上にマウスカーソルを移動させると、薄い灰色の枠と小さなメニューが表示されます。

段落を囲む灰色の枠

この状態からメニューをクリックして(または枠内を右クリックして)コメント、タスク登録、スケジュール登録、タグ付けなどを行うのですが…いかんせん、灰色が薄くてわかりにくい!(と TeamPage の関係者である私も思います。はい。)

色を変更する方法

スタイルシートを追記

そこで、この薄い灰色を変更してメニューをもっと目立たせることにしましょう。

画面上の色は、[セットアップ] > [カスタマイズ] メニューからスタイルシート (CSS) を使って簡単に変更できます。

カスタム色設定を追加

変更を加えるスキン設定を選択し、[カスタム] タブの [上級者向けの上書き設定] 欄に下記のスタイルシートを追記し、ダイアログ下部の [適用] ボタンをクリックします。

.feed div.li.expanded .bot-ctrl a, div.ihover.middle a {
  color: #fff;
}

div.ihover.middle:hover a {
  color: #fff;
}

div.ihover {
  background-color: #ad4646;
}

div.ihover i {
  color: #fff;
}

div.ihover.itemid div {
  background-color: #ad4646;
  color: #fff;
}

div.ihover a:hover i {
  color: #fff;
}

動作チェック

じゃじゃん!

枠メニューが赤くなり、これで「今から私はこの段落に対して何か操作しますよ」の対象が明確になりました。

赤い枠

まとめ

以上のように、TeamPage は段落ごとにもアクションを登録し、柔軟なコミュニケーションができるように設計されています。しかし、そのナビゲーション(灰色枠メニュー)が見つけにくいのです。

今回は、この見た目上の欠点を改善する方法をご紹介しました。

皆様のお使いの TeamPage にも適用して、コミュニケーションの改善に役立てていただけたら嬉しく思います。

関連記事

ディスカッションの混線を防止するコミュニケーション整理術 ... TeamPage では、あらゆる投稿にコメント、子コメント、孫コメント…とツリー構造の階層的なコメントができるように設計されています。ツリー構造なので、話題が分かれたときの混乱を抑制できます。

チーム作業を効率化するポイントは「情報を散在させず、1箇所にまとめる」こと ... 社内の情報共有を進めるには、必要な情報がすばやく一箇所で得られることが大切です。カスタマイズの自由度の高いダッシュボードやその他の機能で、使いやすい情報共有環境を作りましょう。

会議の「次にやること」も一ヶ所で管理して議事録をもっと活用する方法 ... TeamPage の「アクティブ議事録」では、議事録へのコメント追加だけでなく、付箋の追加、進捗を共有、タスク (To Do) や予定の計画や実行が可能です。議事録の一ヶ所で、場所を移さずに「次のアクション」を実行できます。

フロー型とストック型の「いいとこ取り」をするには ... リアルタイムの会話に向いているとされる「フロー型」のツール。繰り返し読んだり引用したりと後から活用しやすいとされる「ストック型」のツール。TeamPage は、どちらでも使えるように設計されています。

ソーシャルグラフ、インタレストグラフ、そしてワークグラフ ... TeamPageの「ソーシャルグラフ」のモデルを使って、業務の効率化や他システムとの連携について紹介します。

簡単にできる!テンプレート付き記入式アンケート機能を作る実例紹介

2019/06/07 · · 投稿者 Takashi Okutsu

画像先日、アンケート作成&回答フォーム プラグイン をお使いのお客様から、「チェックボックスを選択するのではなく、回答を記入する形式のアンケートは実現できないか?」というご相談を受けました。

詳しいお話を伺ったところ、「質問者が出したいくつかの案に対してユーザーが自由に回答を書き込めるようにしたい」とのことでした。例えば、「選択肢 A 〜 D について皆さんの意見をください」というアンケートを作成し、ユーザーには「A は〜だと思います。B は〜ですね。C は…」のような回答をする、という形式です。

難しく考えなくても、何だか「記事とコメント」の組み合わせで実現できそうですね。

では、どのようにして使いやすい「アンケート機能」にするか、詳しく見ていきましょう。

TeamPage のテンプレート機能

前述のように「アンケートを記事として投稿する」「回答をコメントする」という 2 つの基本機能の組み合わせで実現できることはできます。アンケート記事の下に表示されるコメント欄に回答を記入して投稿するだけ。簡単ですね。

しかし、このお客様は、「Excel の表のような形の記入欄(記入用のセル)を作り、そこに回答を書くようにしたい」と希望されていました。それならば、テンプレート機能を利用しましょう。

TeamPage では、投稿済みの記事を「テンプレート」として何度でも再利用できます。新しい記事を作成するときに自動的にフォームに読み込ませることも、ダイアログの右上の「テンプレート」ドロップダウンから手動でテンプレートを選択・読み込ませることもできます。

テンプレートの利用

しかし!残念ながらコメント欄ではテンプレートを利用できません。テンプレートを手動で読み込ませるためのドロップダウンもありません。

コメントではテンプレート利用不可

アンケートへの回答をコメントとして投稿したい、だけど、コメントにはテンプレートを利用できない。さて、どうしましょう?

※ いくつかの手順を踏むことでコメント欄にテンプレートを読み込ませることはできるのですが、一般ユーザーに複雑な操作を要求するこの方法は採用しませんでした。

コメントでもテンプレートを利用したい

できないなら作ってしまえ!で出来てしまうのが TeamPage の拡張性の素晴らしさです。

ササッと テンプレート付きのコメント投稿ボタン設置プラグイン を作成しました。

このプラグインを使うことで、次のようなことを実現できます。

  • 記事の本文に「ここをクリックしてコメントを作成する」のようなボタンを設置できる。
  • 「ここをクリックして〜」の表記は自由に変更できる。(例: 「アンケートに回答するには、ここをクリック!」など)
  • ボタンをクリックすると、コメント作成フォームをポップアップ表示(ダイアログ表示)される。
  • そのときに投稿済みの記事をテンプレートとして自動読み込みできる。

操作手順

では、アンケートの質問と回答の投稿方法を簡単にご紹介します。

テンプレートを作成する

回答用のテンプレートを作成します。

テンプレートの作成

投稿し、記事 ID をメモします。

テンプレートの記事 ID をメモする

質問を作成する

アンケートを取りたい質問内容を「記事」として作成します。

本文欄の「ウィジェットの挿入/編集」ボタンからウィジェット(本文に埋め込むパーツのことを「ウィジェット」を呼びます)の一覧を表示し、「コメント投稿フォーム表示ボタン」を選択します。

画像

ウィジェットの詳細設定が表示されるので、ボタンの表記を変更し、テンプレートとして利用する記事 ID を指定します。

ウィジェットの設定

ウィジェットが挿入されたことを確認して投稿します。

ウィジェットが挿入された

アンケートの質問が完成しました!

アンケート設置完了

回答をコメント投稿する

この「ここをクリックして回答を作成する」ボタンをクリックすると、テンプレートが自動的に読み込まれた状態でコメント作成フォームが表示されます。

回答をコメントとして作成する

回答を記入して投稿します。質問の下にコメントとしてぶら下がりました。

回答がコメントとして投稿された

これで、テンプレートを利用した、自由記入形式のアンケートができました。(^^)

投稿先スペース変更で「見えない回答」を実現

TeamPage では、スペースごとに異なる権限設定ができます。

例えば、「投稿はできるけど、閲覧はできない」という見解設定にすることで、目安箱のような機能を簡単に実現できます。

別の回答の投稿先スペースを用意し、「一般ユーザーは、コメントは投稿できるけど、他ユーザーの投稿は閲覧はできない。管理者は、すべての投稿を閲覧できる。」という権限設定にします。

これにより、「自分の回答が他の人に見られるのは嫌なのですが…」という要望に応えられます。

コメント(回答)の投稿先を指定するには、ウィジェットの「特別なパラメーター」欄に &default_project=投稿先スペース名 と記入します。

画像

まとめ

以上、基本中の基本機能である「記事とコメント」に少々の工夫を加えてアンケート機能を構築する方法をご紹介しました。

考えてみると、他のいろいろな機能も記事とコメントの組み合わせで実現できそうですよね。例えば…

  • 困ったことを質問し、解決方法をコメントする --> Q&A 機能
  • 手続き申請を記事として投稿し、返答をコメントする --> 申請処理機能
  • 進捗会議をスケジュールとして投稿し、各自の進捗をコメントする --> 進捗会議効率化機能

可能性が広がりますね。ぜひ TeamPage をいろいろな用途にアレンジしてご利用ください。

関連記事

基本機能だけで作る!会議を効率的に進めるレシピをご紹介

2019/04/09 · · 投稿者 Takashi Okutsu

画像「基本機能だけで作る!」シリーズの第3回目では、会議を効率化するソリューションの構築方法をご紹介します。

会議を効率化するためにするべきことは、次の3つです。

  1. 事前に確認できる内容を共有する
  2. 議事録を簡単に作成し、共有する
  3. 会議の結果を受けて「何を、誰が、いつまでに」を決める

TeamPage にはこれらを網羅する基本機能が備わっています。その基本機能をどう組み合わせて使うのかがわかれば、他のことにも色々と応用が効きますよ。

会議を効率化するには

材料(使用する機能)やレシピ(設定方法)のご紹介の前に、「会議を効率化するためにするべきこと」を少しばかり掘り下げてみます。

事前に確認できる内容を共有する

事前に担当者の間で確認・決定できることはできるだけ済ませてしまいましょう。会議ではその結果を参加者全員と共有するようにすれば、会議の場であれこれと話し合う時間を省けます。              

また、アジェンダには提案事項・討議事項を簡潔に列記し、どのようなことを話し合う予定なのかが参加者に伝わるようにします。

議事録を簡単に作成し、共有する

議事録を書くのは意外と時間がかかって面倒なものですよね。

事前にアジェンダが用意されていれば、それを編集したり追記したりすることで議事録に仕上げられるので、作成にかかる時間を大きく短縮できます。

会議の結果を受けて「何を、誰が、いつまでに」を決める

会議で発生したタスクは、会議で話し合われた内容とリンクさせて登録できることが大切です。リンクすることで「会議の結果→タスク」の流れや理由が明確になりますし、会議の結果(議事録)を見ればリンクしているタスクの進捗をすばやく把握できます。

タスクの進捗がすばやく把握できることにより、次回の会議では、よくありがちな「あの件、あれからどうなったの?」の確認時間を省けます。「前回の議事録にぶら下がっているタスクを見てください」で済むからです。

材料(使用する機能)

それでは、いよいよ TeamPage で会議の効率化ソリューションを作りましょう。次の材料(機能)を使います。

  • スペース ... 会議の予定を投稿するスペース(「部屋」のようなもの)を作ります。
  • 予定投稿機能 ... 会議スケジュールを「予定記事」として投稿します。
  • タグ付け機能 ... 予定にタグを付けてカテゴリー分けできるようにします。
  • コメント機能 … 議案や討議事項をコメントとして追加します。
  • セクション機能 ... 色々な条件で TeamPage に投稿された「記事」を分類し、取り出します。
  • ダッシュボード機能 ... セクションを壁新聞のように並べてチームメンバーと共有します。

レシピ(設定方法)

新しいスペースを作る

ここでは「会議室」という新しいスペースを作り、そこに会議の予定と討議内容を登録(投稿)することにします。

もちろん、部署ごとや業務ごとに、営業、人事、◯◯支部…ようにスペースに分け、それぞれのスペースで会議予定や討議内容を登録しても良いのですが、ここでは説明をわかりやすくするため、新しく独立したスペースを作って説明します。

前回の記事で紹介した手順と同じく、[セットアップ] > [新規スペースの作成] から新しいスペースを作成します。

新しいスペースを作成

「会議室」スペースが作成され、このスペースのダッシュボード画面が表示されます。

画面の上部には「セットアップ アシスタント」が表示されますが、不要なのでバツ印アイコンをクリックして閉じましょう。

作成された「会議室」スペースのダッシュボード画面

会議の予定を登録(投稿)する

ダッシュボードの「会議」セクション

ダッシュボードには、「最新の投稿」「会議」「未解決の問題」「報告」…といったセクションがデフォルトで作成されます。「セクション」とは、新聞紙面の「○○コーナー」に当たるもので、特定の条件で投稿された記事、タスク、予定などを集めて表示する機能です。

この中の「会議」セクションには、「会議」タグが付けられた予定が集められるように設定されており、最初から会議のスケジュールや議案を共有できるようになっています。せっかくなのでこれを使うことにしましょう。

セクションの「追加」ボタン

新しい会議の予定を投稿(登録)するには、「会議」セクションの「追加」ボタンをクリックしてください。

セクションと追加ボタン

「新しい予定」の作成フォームが表示されますので、タイトル、日時、参加者などを記入・選択します。

新しい予定の投稿フォーム

左下の「予定の送信」ボタンをクリックして投稿します。

登録(投稿)された予定の確認

登録された会議の予定は「会議」セクションに新着として表示されます。

ダッシュボードのセクションに表示

また、「カレンダー」タブに切り替えても確認できます。

カレンダー画面でスケジュール確認

事前に確認できる内容を共有する

会議の予定を編集し、担当者間での確認・決定事項などをアジェンダとして書き込みましょう。

予定を編集するのではなく、コメントとしてぶら下げることができます。

アジェンダの追加

よく「編集して書き込むのとコメントとしてぶら下げるのと、どちらが良いのですか」と質問されることがあるのですが、答えは「どちらでもOK」です。お好みの方を選んでいただければと思います。

議事録を簡単に作成し、共有する

TeamPage では記事だけでなく各段落にも階層的なコメントができます。

この機能により、会議で出た意見や問題などを、アジェンダの適切な位置にコメントとして追加できます。

会議中にコメント登録していくだけで、会議が終了する時点で議事録が完成してしまいます。もう議事録の作成に時間をかける必要はありません。

段落コメントの例

会議の結果を受けて「何を、誰が、いつまでに」を決める

各段落に登録できるものはコメントだけではありません。タスクも登録できます。

下図のように、「何を、誰が、いつまでに」をタスクとして登録していきましょう。

どんなことが話し合われて、その結果どのようなタスクが生じて、誰がいつまでにフォローアップするのかが明確になりますね。

タスク登録

まとめ

以上、TeamPage の基本的な機能である、セクション、予定登録、編集、コメント、タスク登録などを組み合わせて、会議のアジェンダや議事録の共有サイトを構築する方法をご紹介しました。

会議のお知らせ〜アジェンダの共有〜会議中の議事録作成〜フォローアップまでを TeamPage の一箇所で網羅できます。スペースを複数に分けて使えばさらに可能性が広がります。

当社では、この、編集やコメントやタスク登録などで会議の記録を活用するやり方を「アクティブ議事録」と呼んでいます。お時間のある方は是非こちらの記事もご覧いただければ幸いです。

関連記事

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

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」プラグインを使えば、動作や見栄えの細かなカスタマイズを簡単にできます。

基本機能だけで作る!場所を選ばないメール日報共有サイトの作り方

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

画像TeamPage の「メール投稿」機能やその他の基本機能を組み合わせて、外出先からでもメールで日報を投稿し、社内外のメンバーと共有するためのサイトを構築できます。

TeamPage には「日報」プラグインがありますが、「TeamPage にアクセスして日報を書く」ことが必要です。

それに対して、このメールを使う方法では、TeamPage にアクセスする必要がありません。普段お使いのメールアプリで日報を書いて特定の宛先へ送信するだけ。もちろんファイルも添付でき、誰かがコメントすればメールでお知らせしてくれます。

このブログ記事では、この、メールで日報を投稿&共有をするためのサイトを TeamPage で構築する方法をご紹介します。基本機能の組み合わせでできますので、簡単ですよ!

材料(使用する機能)

  • スペース ... 日報が投稿されるスペース(「部屋」のようなもの)を作ります。
  • メール投稿機能 ... メールボックスに届いたメールメッセージを読み取り、記事として投稿します。
  • 自動タグ付け機能 ... メール中のキーワードを元に自動的にタグ付け(カテゴリー付け)します。
  • セクション機能 ... 色々な条件で TeamPage に投稿された「記事」を分類し、取り出します。
  • ダッシュボード機能 ... セクションを壁新聞のように並べてチームメンバーと共有します。

レシピ(設定方法)

新しいスペースの作成

ここでは「メール日報共有」という新しいスペースを作ることにします。(部門ごとのスペースなど、複数のスペースに分けることも可能ですが、ここでは説明を単純にするためにスペースをひとつにします。)

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

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

画像

新規スペースの作成ダイアログが表示されます。「表示名」に「メール日報共有」と記入し、「スペースの追加」ボタンをクリックします。

スペースを作成

「メール日報共有」スペースが作成され、このスペースのダッシュボード画面が表示されます。

新規スペースが作成された

メールの設定

メールアドレスの登録

日報をメールで投稿するユーザーのメールアドレスを TeamPage に登録します。

設定場所は、[パーソナルセットアップ] > [パーソナル情報] > [連絡先情報] ページです。

メールアドレスを登録

登録されていないメールアドレスからのメールは、匿名ユーザー(ビジター)として扱われます。既定の権限設定では、匿名ユーザーにはメール投稿権限が許可されていません。

メールボックス読み取り機能の設定

TeamPage は、指定されたメールサーバーの指定されたメールボックスにアクセスし、メールボックスに届いているメールを読み取ります。

メールボックスの設定

メールボックスは、(1) TeamPage 全体の共通メールボックスと (2) 各スペースの専用メールボックスを利用でき、それぞれを同時に設定・使用できます。

(1) はマンションの玄関口に届くイメージ、(2) はマンションの部屋に直接届くイメージです。

(1) の共通メールボックスを使用する場合、管理人さんに「◯◯宛だったら◯◯号室に届けて」と教えておく必要があります。下図は、「メールアドレスの@マークの前に『+nippou』が含まれていたら『メール日報共有』スペースに届けて」という設定です。

メール配送ルール

権限設定

「メール日報共有」スペースの権限設定ダイアログ(アクセス コントロール リスト)で、ユーザーの「メールでの投稿」と「ファイル添付」権限が許可されているかどうかを確認します。

権限設定確認

タグの作成

下記の「自動タグ付け設定」で使用するタグを作成します。

TeamPage のタグはスペース毎に作成されます。最も簡単な方法は、新しいタグを付けたサンプル記事を投稿することです。

タグを作成

下図のようにタグが作成され、記事に付けられたことを確認します。

作成したタグ

自動タグ付け設定

To、Cc、Subject、Body などのメール情報に含まれるキーワードに基づいて自動的にタグを付けることができます。ここでは次のように設定しました。

  • 「To」に「nippou」が含まれていたら(つまり、すべてのメール投稿に)「日報」タグを付ける。
  • 「Body」に「成功」が含まれていたら「成功」タグを付ける。
  • 「Body」に「問題」が含まれていたら「問題」タグを付ける。
  • 「Body」に「商談」が含まれていたら「商談」タグを付ける。

設定場所は、「メール日報共有」スペースの、スペースセットアップ > メールボックス > フィルターとルール の [メールヘッダー ルール] です。

自動タグ付け設定

投稿テスト

ここまでの設定が済んだら、投稿用のメールアドレスへメールを送信し、「メール日報共有」スペースに投稿されることと、自動的にタグ付けされることを確認しましょう。

テスト用のメールを作成して送信します。

テストメール

メールが投稿されるまで、標準で最大 2 分ほどかかります。しばらく待ってダッシュボード画面を表示してみましょう。下図のようにメールが投稿されれば成功です!

テストメール送信結果

ダッシュボードのセクション設定

メールで投稿できることを確認できたので、次に、ダッシュボードのセクションを設定しましょう。

  • 新着投稿
  • 成功(タグで分類)
  • 問題(タグで分類)
  • 商談(タグで分類)
  • ユーザー「市原」の日報
  • ユーザー「奥津」の日報

「セクション」とは、ダッシュボードを壁新聞に例えたときの「◯◯コーナー」「◯◯欄」に当たります。新聞の一面は、「重要ニュースのコーナー」「「天気予報コーナー」「天声人語コーナー」など、いくつかのコーナー(欄)で構成されていますよね。

TeamPage は、「コーナー(欄)にどのような条件で記事を集めて表示するか」をセクションとして設定し、ダッシュボードに並べられるようになっています。

ここでは「成功」セクションと「ユーザー『市原』の日報」セクションの設定を簡単にご紹介します。

「成功」セクション

「日報」タグが付いた記事の中から「成功」タグが付いた記事だけに絞り込みます。

「検索」欄には :成功 と記入してください。半角コロン記号はタグを表します。半角コロン記号を書き忘れると、タグではなく「成功」というテキストが含まれるかどうかの絞り込みになってしまいます。

「成功」セクションの設定

「ユーザー『市原』の日報」セクション

「日報」タグが付いた記事の中からユーザー「市原」が投稿した記事だけに絞り込みます。

「検索」欄に a(ユーザー名) と記入してください。この a() は投稿者(Author)を表します。

「市原」セクションの設定

ダッシュボードの完成図

じゃん!これでダッシュボードが完成です!

ダッシュボード完成図

ダッシュボードが常に見やすく分類してくれるので、チームのメンバーから毎日のように日報が投稿され、どんどん蓄積されていっても安心ですね。

すべての日報を表示するには

なお、セクションのタイトルや [すべてを見る] リンクをクリックすると、そのセクション内の記事をすべて並べて閲覧できます。

例えば、下図では「新着」セクションに 3 件しか表示されていません。それより前に投稿された日報を読むには、赤の四角で囲まれた部分をクリックします。

すべての新着を表示

おまけ

以上で、基本機能を組み合わせての日報メール投稿&共有ソリューションが出来上がりましたが、さらにちょっとしたスパイスを加えることで、より味わい深いものに仕上げられます。

新着に「New!」、コメントされたスレッドに「Hot!」ラベルを表示

「What's New」プラグインを追加すると、新着記事に「New!」、コメントが付いたスレッドに「Hot!」のラベルが表示されます。

「New!」と「Hot!」のラベル

タイトル下にタグを表示

「記事タイトルの下にタグを表示」プラグインを追加すると、日報のタイトルの下にタグを色付きで表示できます。

記事タイトル下にタグを表示

まとめ

以上のように、TeamPage に標準で備わっている基本機能だけを組み合わせて、メールで日報を投稿&共有するサイトを構築できます。

また、プラグインという「スパイス」を加えることで、より便利で使いやすいものに仕上げられます。

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

基本機能だけで作れるソリューションは他にもありますので、今後もご紹介していく予定です。ご期待下さい!

関連記事

基本機能だけで作る!質問&回答サイトの作り方 ... 基本機能を組み合わせて質問&回答サイトを構築できます。その作り方をご紹介します。

メールと仲良く!社内外ソーシャルで情報共有 ... 新着情報を自動的に関係者へ配信するダイジェスト機能を紹介しています。

今までの仕事のやり方でOK!メール内容が自然と蓄積! ... 従来のメール環境はそのままで、簡単にチームメンバーのメールを協働スペースに蓄積・共有できます。

日報プラグイン ... 毎日の目標、業務内容、成果、達成、所感などを記録するための商談の日時、内容、参加者などを記録するためのプラグインです。

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

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

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

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

お客様が迷わない!スッキリ簡潔なトップページのカスタマイズ例

2018/11/15 · · 投稿者 Takashi Okutsu

画像先日、ある IT サポート企業のお客様サポートサイトを TeamPage で構築するお手伝いをしました。

先方からのリクエストは、「TeamPage のトップページ(フロントページ)を含めた見た目をできるだけスッキリ簡潔にして、お客様が迷わないで操作できるようにしたい」というもの。そこで、(1) トップページに大きなアイコンやボタンを設置し、(2) タブやサイドバーなどを取っ払いました。

今回のブログでは、このスッキリなカスタマイズをどのように行ったのかを簡潔にご紹介します。

サポートサイトのイメージ

お客様の所属企業ごとに「スペース」と呼ばれる部屋を作り、部屋ごとに鍵をかけ、お客様に渡します。

  • この部屋には他の企業のお客様は入れません。(ある顧客の情報は他の顧客から見られない)
  • 管理者やサポート側はすべての部屋に入れます。(社内ユーザーはすべての顧客の動向を見渡せる)

お客様には自分の部屋しか開放されていません。一方、サポートスタッフ(社内ユーザー)にはすべての部屋が開放されていて、すべての部屋の中を高いところから見下ろして全体的な動向を見渡せます。

お客様サポートサイトのイメージ

TeamPage は、「すべてのお客様へのサポート状況をリアルタイムで把握するに最適なツールだ」と評価され、採用していただきました。

カスタマイズ前

カスタマイズ前のトップページはこのような顔をしていました。

  • ボタンやリンクを埋め込んだ記事を更にトップページに埋め込み表示する。
  • その下に「最新の記事」や「顧客情報」などのセクションを並べる。

カスタマイズ前のイメージ図

これで十分にスッキリ簡潔になったと思ったのですが、先方の反応は「もっとスッキリさせたい」というものでした。

  • 「まずは会員ページに移動する」ということを理解できるようにして、その他の操作はさせない。
  • 文字だけだと殺風景なので受付嬢のようなイラストを設置する。

TeamPage の画面にはいろいろなタブやボタンが設置され、同じ目的の操作をいろいろな方法でできるようになっています。しかし、「あちこちに道があると迷う。道は一つだけあれば良い。」とのことで、以下に述べるように、タブやボタンをできるだけ隠すようにしました。

カスタマイズ方法

不要な部分を隠す

まずは、不要なタブやボタンをできるだけ隠します。下図のアニメーションをご覧ください。黒い部分を隠します。

非表示にするインターフェイスの比較図

左上の「家」アイコン

トップページへ戻るための「家」アイコンは、トップページには不要ですよね。スタイルシート (CSS) を使って隠します。

.view-home #loc .loc-home {
  display: none;
}

画面に適用されるスタイルシートは、スキンの色設定画面Proteus カスタム JavaScript & CSS プラグインで設定できます。

「セットアップ」と「招待」メニュー

「セットアップ」と「招待」メニュー

「セットアップ」メニューは、管理者権限があるユーザー アカウントでログインしたときだけ表示されます。お問い合わせをするお客様には管理者権限がありませんので、このメニューは表示されません。よって、カスタマイズ不要です。

「招待」メニューは、招待権限があるユーザー アカウントでログインしたときだけ表示されます。デフォルトでは、同権限はすべてのユーザーに許可されているので、それを外し、管理者だけに許可するように設定変更しました。

タブ

TeamPage では、タブを切り替えることで画面が切り替わり、目的の情報を見たり変更したりできます。

タブ

TeamPage に慣れていないお客様には不要かもしれませんが、TeamPage に慣れた人(管理者など)にとってタブは必需品。これが無いと TeamPage の細かな操作がやりにくくなります。

そこで、「お客様だったらタブを隠し、管理者だったらタブを表示する」という設定を行うことにしました。

この目的で作成したプラグインが、HTML の body タグに特別なクラスを追加 プラグインです。このプラグインは、ログインしたユーザー アカウントが特定のグループに所属しているかどうかを調べ、ページ HTML の <body> タグに特別な class= を追加します。

これを使って、「ログインしたユーザーが管理者グループに所属していたら、<body>class="is-admin" を追加する」という設定を行いました。

そして、CSS を使って「<body> タグに is-admin クラスが設定されていたら、タブを隠す」ということを実現できました。

body.is-admin #sect-nav {
  display: none;
}

サイドバー

サイドバーの折りたたみ/展開プラグインには「デフォルトでサイドバーを表示するか(展開するか)隠すか(折りたたむか)」の設定があります。これを「デフォルトで折りたたむ」に変更すれば OK です。

「最新の投稿」と「顧客情報」セクション

[サーバー セットアップ] > [フロントページ] の設定でセクションを無効にしました。

通知バッジを目立たせる

自分の投稿へ誰かがコメントしたり、自分が参加するスケジュールが登録されたり、自分が担当するタスクが変更されたりすると、自分宛ての通知が届きます。通知の数は、画面右上の「通知」欄にバッジとして表示されます。

…が、標準のバッジの色は、背景のバーと同系色。目立たないんですよね。

標準の通知バッジ

そこで、これを赤くして目立たせることにしました。

赤くなった通知バッジ

これもスタイルシート (CSS) を使いました。

.menu-notifications .notifications-count {
    background-color: crimson;
}

トップページのビジュアル設定

先方の Web デザイナーさんと相談し、次のようなメニュー画面のイメージ図を描いてもらいました。どうやって TeamPage のトップページに組み込みましょうか。

受付嬢のいるトップページのイメージ

まず、すべてを HTML と CSS で作って記事に埋め込んで表示する方法を試しました。

しかし、すぐに問題があることがわかりました。上図の緑色の固定的なメニューはこれで OK なのですが、下図の青いボタンが押されたときの移動先(会員ページ)がお客様によって異なるのです。「株式会社ABC」のお客様は「ABC」部屋に、「株式会社XYZ」のお客様は「XYZ」部屋へ案内する必要があります。

青いボタンの行き先はお客様ごとに異なる

つまり、ログインしたユーザーの所属企業ごとに「会員ページ」(部屋)があり、どの部屋へ案内するかをその都度判断しなければならないわけです。

記事への埋め込み式では固定的なメニューしか作れませんので、結局、ダッシュボード全体を書き換えるプラグインを作成し、お客様の読み取り権限のあるスペース(お客様が入れる部屋)を調べて「会員ページ」を判断する仕組みを作りました。

お客様が入れる部屋は、お客様サポート用のスペースといくつかの共有スペースだけ、ということになっています。したがって、お客様が入れる部屋をすべて調べ、そこから共有スペースを除外すれば、お客様サポート用スペース(=会員ページ)が残るはずです。

この動作は次のような簡単な SDL プログラムで実現できました。

<!--- 読み取り権限のあるスペース (project) を調べて、
      変数「readableSpaces」に半角コンマ区切りで代入する。 -->
<var.set name="readableSpaces">
  <projects.read>
    __project.name__
    <loop.last not>,</loop.last>
  </projects.read
</var.set>
 
<!--- 共有スペースの名前を半角カンマで区切って
       変数「publicSpaces」に代入する。-->
<var.set name="publicSpaces">
お知らせ,FAQ,フォーラム
</var.set>
 
<!--- 読み取り権限のあるスペースを一つずつ調べる。
      もし共有スペースのリスト含まれていたら無視する。-->
<foreach list="{readableSpaces}">
  <compare.contains "${publicSpaces}" "__foreach.current__">
    <!--- 無視!! -->
  <else>
    <!--- 「会員ページ」ボタンを表示 -->
    <a href="/traction#/dashboard&proj=__foreach.current__">Members' Page</a>
  </compare.contains>
</foreach>

SDL (Skin Develop Language) とは、TeamPage 独自の、HTML や XML に似たマークアップ言語です。これを使えば、HTML を使って Web ページをデザインする感覚で、画面に表示される内容や動作の超細かなカスタマイズが可能になります。

カスタマイズ後

これで下図のスッキリ簡潔トップページが出来上がりました。(^^)

お披露目会では「シンプルでわかりやすいね!これならお客様も迷わないでしょう。」と先方にも好評でした。

トップページ完成!!

まとめ

TeamPage の標準のトップページには、「最新記事」などのセクションを新聞紙面のように配置させることも、メニュー用の記事をポスターのように大きく配置させることもできます。

また、ログイン後に表示されるページを「みんなの共有ページ」から「マイページ」へと変更することもできます。

JavaScript、CSS、そして TeamPage の SDL プログラミング言語を使えば更に細かなカスタマイズが可能になります。

先方の担当者さんも「ここまで色々とできるなんて、本当にすごい可能性を秘めていますね。奥津さんに『こんなこと、できませんか?』と何度も尋ねましたが、『できません』という回答は一度もありませんでしたね!」と喜んでいらっしゃいます。TeamPage のファンが増えて嬉しく思います。

TeamPage のカスタマイズにご興味のある方は、お気軽に弊社までお問い合わせください

関連記事

手軽にTeamPageをカスタマイズ、具体例をご紹介 ... 「Proteus カスタム JavaScript & CSS」プラグインを利用すると、管理者は、プラグイン設定欄で JavaScript とスタイルシート (CSS) を設定し、ページの動作に変更を加えたり、特定の部分を隠したり、リンクやボタンなどを挿入したり、色や大きさを変えたりできます。

社内外コラボレーションの壁と透明性 ... コラボレーションツールでは、ユーザーやグループを壁で隔てれば隔てるほど、情報共有が進まず、共同作業がしにくくなり、情報がサイロ化してしまいます。しかし、壁を取り払ってしまうと、秘密やプライバシーの確保が難しくなります。安全性と利便性の両立に重要なことは、「壁の透明性」です。

ソーシャルグラフ、インタレストグラフ、そしてワークグラフ ... TeamPageの「ソーシャルグラフ」のモデルを使って、業務の効率化や他システムとの連携について紹介します。

プロフィール画像(アバター)とタグをもっと活かして、画面をもっとカラフルにしよう

2018/10/05 · · 投稿者 Takashi Okutsu

画像この2週間で、TeamPage の画面をよりカラフルにして視認性を高めるプラグインを 2 つリリースしました。

1 つ目は、タスクの担当者など、ユーザーの名前が表示される場所に当該ユーザーのプロフィール画像(アバター)を追加する、プロフィール画像(アバター)を追加表示プラグインです。2 つ目は、記事のタイトルの下にタグを表示するプラグインです。

今日は、これらのプラグインを紹介をいたします。

プラグインのあり/なし画面の比較

まずは、プラグインを適用する前の画面(標準のタスク一覧画面)とプラグインを適用した後の画面の比較スクリーンショットをご覧ください。

これらのプラグインを適用することで、タスクの担当者やカテゴリーがより素早くわかるようになることを実感していただけるかと思います。

スクリーンショット比較

プロフィール画像(アバター)のあり/なし

通常、TeamPage の画面には投稿者の名前とプロフィール画像(アバター)が表示されます。このプロフィール画像によって「誰が投稿したのか」が分かりやすくなります。

しかし、タスクの担当者や予定の参加者にはプロフィール画像が表示されないんですよね。「ここに画像が表示されれば、もっと賑やかで楽しくなるんだけど…」と以前から思っていました。

投稿者を表すプロフィール画像(アバター)

特にタスクの一覧画面では投稿者のプロフィール画像が表示されないので(その代わりに締切日や優先度などが表示されます)、下図のように、良く言えば「落ち着いた雰囲気」、悪く言えば「殺風景」です。

デフォルトのタスク一覧画面

では、ここに小さなプロフィール画像を追加するとどうなるでしょうか?じゃん!下の画像をご覧ください。小さな変更ですが、これだけで雰囲気が大きく変わり、自分のタスクや部下のタスクをパッと見つけられるようになったと思いませんか?

アバター付きのタスクリスト

ところで、意外と皆さん、独自のプロフィール画像を登録せずデフォルトの影画像のままお使いになっているようです。プロフィール画像があると雰囲気が賑やかになり、それぞれのユーザーへの親しみも増します。コミュニケーションの活性化に効果ありなので、TeamPage をお使いの方にはプロフィール画像登録を声を大にしてオススメします。

タグの表示のあり/なし

タグを使って色々な意味を付けられる

TeamPage では、あらゆる記事(投稿内容)に複数のタグを付けられるようになっています。

例えば、「お客さんから製品ABCに関する質問が届いた。この質問に急いで回答しなくちゃ。」というタスクには、次のようなタグが付けられるでしょう。

  • 質問
  • 製品ABC
  • 優先度1
  • 至急

このようなタグを付けておくことで、後から「製品ABC」に関する「質問」だけを探し出す…といったことが簡単にできるようになります。

が、タスク一覧画面にはタグが表示されない…

ところが、タスク一覧画面で各タスクにはタグが表示されません。タグを表示するには、特定のタグを選択して展開する必要があります。

タスクを展開してタグを確認

この小さな一手間が面倒です。タスクの一覧画面上でそのままタグが見えたらもっと良いのに…そう思って作ったのが「タイトルの下にタグを表示するプラグイン」です。

プラグインを使っての改善

下図は、プラグインを適用し、タイトルの下にタグを表示した例です。タグ毎に色付けもできるので、効果てきめん!各タスクのカテゴリーやステータスを素早くチェックできます。

カラフルなタグを追加表示

まとめ

以上、賑やかな雰囲気の中でより仕事を進めやすくするプラグインを 2 つご紹介しました。

どちらのプラグインもサポートサイトからダウンロード(ユーザー登録とログインが必要)できますので、お気軽にお試しいただければ嬉しいです。

プラグイン使用のご感想やご要望なども承っております。すべてのご要望を実現できるかはお約束できませんが、機能改善の参考にさせていただきますので、どうぞよろしくお願いいたします。

関連記事

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

新 TeamPage カレンダー画面と機能の紹介 ... TeamPage バージョン 6.2 から利用できるようなった、新しいカレンダーの画面や機能について紹介します。

新カレンダー開発のきっかけとFullCalendarを採用した理由 ... 新しいカレンダーの開発のきっかけや、いくつかのカレンダー用ライブラリの中から FullCalendar を選んだ理由などについて紹介します。

スケジュール集計プラグイン ... 予定記事(スケジュール記事)の開始日時と終了日時を元に作業工数(所要時間)を自動的に計算し、指定された期間内の集計を行います。さらに、集計した工数を、ユーザーごと、カテゴリーごと、プロジェクトごと、顧客ごと等に分類し、見やすい表やグラフで表示します。

ダッシュボードの2週間カレンダー プラグイン ... 各スペースのダッシュボード(ニュースページ)と「すべてのスペース」のダッシュボード(フロントページ)に2週間カレンダーを表示するプラグインです。スペースのダッシュボードでそのスペースの直近スケジュールを確認できるようになります。

チームメンバーのスケジュール共有&調整プラグイン ... 今回刷新された新しいカレンダーに統合された、旧カレンダー用の、複数ユーザーのカレンダーを並べて表示するプラグインです。

カレンダーの週の始まりを月曜日に変更プラグイン ... TeamPage のカレンダーの週は、日本語ロケールでは、標準で日曜日から始まります。このプラグインを利用すると、ユーザーごとに、週の始まりを月曜日に変更できるようになります。

プロフィールページ便利化プラグイン ... ユーザーのプロフィール ページのダッシュボードに、通知リスト、2週間カレンダー、そして担当するタスクとプロジェクトのリストを表示し、「マイページ」として使いやすくします。

会議のムダを省く「スマート会議」で、議事録、決定事項、フォローアップの共有のススメ

2018/07/26 · · 投稿者 Takashi Okutsu

画像これまで、議事録フォーム プラグインカテゴリー メモ プラグインなど、議事録の作成や管理ができるプラグインをいくつか開発してきましたが、先日、会議の決定事項やフォローアップ進捗をより明確にする「スマート会議」プラグインの日本語対応版をリリースしました。

「スマート会議」プラグインは…

  • アジェンダの事前準備・事前共有し、議論のブレや脱線を防ぐ
  • 以前の会議からのフォローアップ業務の進捗を明確にし、達成度の確認を容易にする
  • 書式を定型化し、議事録作成を効率化する
  • ダッシュボードや検索で、過去の議事録、決定事項、タスクなどを探す時間を削減する

…といった、「よくある会議のムダ」を解決するためのソリューションです。TeamPage の基本的なタスク管理機能や情報共有機能を応用・活用し、直感的で使いやすく設計されています。

今回は、この「スマート会議」の基本的な機能や特徴をご紹介いたします。

Icon: Job Seeker by inipagi

「シリーズ」の登録

会議には、毎週の品質改善会議、毎月の営業進捗会議、3ヶ月ごとの経営企画会議など、いろいろな種類がありますよね。

まず、その種類を「シリーズ」として登録します。各回の会議は、それぞれの「シリーズ」に関連付けて登録します。こうすることで、次のように同じ「シリーズ」ごとに分類され、会議の前後関係がわかりやすくなります。

  • 品質改善会議シリーズ(毎週)
    • 第1回 5月16日
    • 第2回 5月23日
    • 第3回 5月30日
  • 営業進捗会議シリーズ(毎月)
    • 第1回 5月
    • 第2回 6月
    • 第3回 7月
  • 経営企画会議シリーズ(3ヶ月毎)
    • 第1回 4月
    • 第2回 7月
    • 第3回 10月

アジェンダの登録

「シリーズ」を登録したら、会議をスケジュール登録します。

新しい会議予定を登録

このとき、単に日付や出席者を登録するだけでなく、討議内容を記入したり関連資料(文書ファイル)を添付したりして、予め出席者・関係者と会議の目的や内容の共通理解を図ります。こうすることで、会議本番での脱線やムダの削減が期待できます。

もちろん、テンプレート機能を使って内容を定型化できます。(下図右上の「テンプレート」をクリック)

アジェンダの登録

議事録の作成・共有

議事録は、スケジュール登録されたアジェンダを編集する形で作成してもOKですし、アジェンダの段落毎にコメントを入れる形で作成してもOKです。お好みのやり方で作成できます。

決定事項を登録

「会議で何が決まったのか」を明確にすることは大切です。決定事項もコメントとして登録できますが、コメントの数が多い場合、そのたくさんのコメントの中に埋もれてしまう可能性が高くなります。

そこで、決定事項は、コメントとは別の特別枠として登録します。

登録した決定事項は、会議の終了前に、会議の参加者全員で確認・承認しましょう。間違いがあればこの時点で修正し、後から議事録を修正するムダが発生しないようにします。

会議での決定事項の登録

フォローアップのタスクを登録

「次回の会議までに◯◯をする」といった、「次にやること」を明確にすることも大切です。

「次にやること」も、通常のコメントではなく、タスクとして登録し、明確化します。タスクの進捗はそれぞれのタスクにコメント投稿したり、タスクの未完/完了状態を変更したりすることで、関係者と共有できます。

登録されたタスクも、会議の終了前に、参加者全員で確認・承認し、後で修正するムダを省くようにしましょう。

会議の「次にやること」をタスク登録

閲覧と状況確認

ダッシュボード

登録された会議スケジュール、議事録、決定事項、タスクは、「シリーズ」のダッシュボードに自動的に整理されて表示されます。(もちろん、スペースやマイページのダッシュボードにも表示できます)

過去の議事録は「会議」セクションに並んで表示され、すぐに目的のものを見つけられます。過去の議事録のファイルを探すためにメールボックスの中を探すムダはもうありません。

それぞれの決定事項も「決定事項」セクションに並んで表示され、一連の会議の中で何が決まってきたのかをすぐに確認できます。

タスクを完了させると「未完」から「完了」のセクションへ移動します。どんなフォローアップ事項が未完のまま残っていて何が完了したのかを、この画面ですぐに確認できます。

完了したタスクが移動する

カレンダー

会議の予定(やアジェンダ)はカレンダー画面にも表示されます。

「◯月☓日の会議の記録は…」のように日付を頼りに過去の議事録を探すとき、カレンダーで素早く目的の期間へ移動して目的の議事録を見つけられます。

カレンダーに表示された会議予定

検索

議事録、決定事項、タスクのテキストだけでなく、高機能検索を使って添付ファイルの中身まで検索できます。

サイドバーのフィルターで「◯◯さんが書いた議事録」や「◯◯タグが付いた決定事項」のような絞り込み条件を追加できるので、目的の議事録、決定事項、タスクを見つける時間のムダを省きます。

検索実行例

紹介ビデオ

まとめ

以上、「スマート会議」プラグインの基本的な機能や使い方をご紹介いたしました。

効率的な会議の進め方やスマートな情報共有のやり方にご興味のある方は、お気軽に当社までお問い合わせください

関連記事

会議の「次にやること」も一ヶ所で管理して議事録をもっと活用する方法 ... TeamPageでは、議事録にコメントを加えてディスカッションしたり、付箋を貼ったり、進捗を共有したり、次のアクションや予定を立てたりできます。そんな「アクティブ議事録」を紹介します。

顧客との密な連携の上で業務改善を実現する「impi!」ソリューションの紹介 ... 「impi!」は、南アフリカの業務改善コンサルタント事務所「impi」の監修により、TeamPage プラットフォームの上に構築される業務改善ソリューションです。創立者のピエール氏は、南アフリカ各地で中堅企業を中心に品質改善プログラムを提供し、業務改善の構想、運用開始、そして品質改善活動そのものの改善に、顧客と共に取り組み続けています。

日本語に対応した Solr 高機能検索をリリース ... Apache Solr を検索エンジンに採用した、TeamPage 用の新しい追加検索モジュールをリリースしました。添付ファイルや共有フォルダに保存されているファイルを含め、TeamPage に蓄積されたあらゆるコンテンツを検索できるようになります。

アルコア社の事例: ITプロジェクトとコンプライアンスへの対応 ... 会議の時間を80%も削減し、ITシステムの更新プロジェクトを成功させた事例です。

スマート会議 プラグイン ... 「スマート会議」は、会議の「あるある問題」やムダを解決し、効率化するための追加機能です。

議事録フォーム プラグイン ... 議事録を作成・編集・管理しやすくするプラグインです。会議の内容を共有するだけでなく、補足事項をコメントしたり次にやることをタスク登録したりできます。

カテゴリー メモ プラグイン ... 取引先、名刺、案件に関係する、商談、議事録、問い合わせ、クレーム、不具合報告など、いろいろな情報を投稿するためのプラグインです。

手軽にTeamPageをカスタマイズ、具体例をご紹介

2018/06/19 · · 投稿者 Takashi Okutsu

画像最近お客様からカスタマイズに関するご質問をたくさん頂くようになりました。「◯◯の文字サイズを大きくしたい」「◯◯の部分を非表示にしたい」「◯◯の部分に利用案内を表示したい」などなど…。

これまでも、スキン設定画面のスタイルシートに CSS を記入したり埋め込みウィジェットを使って JavaScript を動作させたりすることで色々なカスタマイズが可能でしたが、設定箇所があちこちに散らばってしまい、わかりにくくなっていました。

そこで、TeamPage をお使いの管理者の皆さん自身が細かなカスタマイズを一箇所でできるように、「Proteus カスタム JavaScript & CSS」プラグインという、名前からして分かりやすいプラグインを作成しました。

何ができるの?

「Proteus カスタム JavaScript & CSS」プラグインを利用すると、管理者は、プラグイン設定欄で JavaScript とスタイルシート (CSS) を設定し、ページの動作に変更を加えたり、特定の部分を隠したり、リンクやボタンなどを挿入したり、色や大きさを変えたりできます。

カスタマイズの手順

プラグインの [設定] リンクから設定画面を表示し、[JavaScript] と [CSS] 欄に記入するだけです。

プラグイン設定画面

カスタマイズの具体例

JavaScript (1) 旧ホスト名を新ホスト名に置き換える

社内運用でホストサーバーの引っ越しを行ったときなど、TeamPage のホスト名が変わると、http(s)://HostName/ から始まるリンクが動作しなくなってしまいます。いわゆる「リンク切れ」が発生します。

本文内に書かれたリンクから旧ホスト名を探して新ホスト名に変更する JavaScript を実行することで、リンク切れを解消できます。

次の例は、旧ホスト名「electra.local」を新ホスト名「nadia.local」に変更します。

Proteus.addHandler("load", function() {
  $('#body a').each(function() {
    var oldHref = $(this).attr('href');
    if (oldHref) {
      var newHref = oldHref.replace('electra.local','nadia.local');
      $(this).attr('href', newHref);
    }
  });
});

画像のソースも同様に変更できます。

Proteus.addHandler("load", function() {
  $('#body img').each(function() {
    var oldSrc = $(this).attr('src');
    if (oldSrc) {
      var newSrc = oldSrc.replace('electra.local','nadia.local');
      $(this).attr('src', newSrc);
    }
  });
});

JavaScript (2) タブ メニューの文字を画像に置き換える

画面上部に表示される [ダッシュボード] [近況] などのタブの文字を画像(アイコン)に置き換えます。

画面上部のタブ

まずは画像を用意する必要があります。ここでは Icon Archive で公開されている Small-n-Flat Icons を利用することにします。

TeamPage がインストールされている「server」フォルダ下の「images」フォルダに「small-n-flat」フォルダを作成し、ダウンロードした画像ファイルを置きます。

アイコンを設置

サーバーセットアップ > 一般 > サーバー管理 ページの [キャッシュクリア] ボタンをクリックして、設置した画像ファイルを TeamPage に認識させます。

次のコードをプラグインの [JavaScript] 欄に記入します。

Proteus.addHandler("load", function() {
  $('#primary-tabs li.tab-dashboard a').html('<img src="/images/small-n-flat/dashboard-alt-icon.png" height="32" width="32" alt="ダッシュボード">');
  $('#primary-tabs li.tab-activity a').html('<img src="/images/small-n-flat/sign-down-icon.png" height="32" width="32" alt="アクティビティ">');
  $('#primary-tabs li.tab-status a').html('<img src="/images/small-n-flat/bubbles-alt-icon.png" height="32" width="32" alt="近況アップデート">');
  $('#primary-tabs li.tab-tags a').html('<img src="/images/small-n-flat/tag-icon.png" height="32" width="32" alt="タグ">');
  $('#primary-tabs li.tab-tasks a').html('<img src="/images/small-n-flat/sign-check-icon.png" height="32" width="32" alt="タスク">');
  $('#primary-tabs li.tab-cal a').html('<img src="/images/small-n-flat/calendar-icon.png" height="32" width="32" alt="カレンダー">');
  $('#primary-tabs li.tab-docs a').html('<img src="/images/small-n-flat/folder-document-icon.png" height="32" width="32" alt="共有フォルダ">');
});

画面を最読み込みすると…じゃん!この通り!

タブのテキストをアイコン画像に変更

CSS 通知の未読数バッジを赤くする

画面右上に表示される通知の未読数バッジ。デフォルトで背景と同系色なので、ちょっと目立ちにくいですよね。

通知の未読

これを赤くしてみましょう。次の CSS を記入します。

#hd .notifications-count {
  background-color: crimson;
}

これでよく目立つようになりました。

バッジの色を赤くした

まとめ

この他にも色々なカスタマイズ例をサポートサイトの「FAQ」スペースや「フォーラム」スペースで公開しています。

「こんなカスタマイズをしたいけど、方法がわからない」といったご質問や「こんなカスタマイズしたら便利だった」といった事例がありましたら、ぜひサポートサイトの「フォーラム」までお寄せください。

関連記事

バックスラッシュ記号を円記号として表示するには ... 日本語キーボードの「日本円」キーを押して入力される文字は、既定でバックスラッシュ記号として表示されます。その背景と解決方法を紹介します。

意外と知られていない?便利な共有フォルダ機能を紹介します

2018/03/26 · · 投稿者 Takashi Okutsu

画像TeamPage には、WebDAV に対応した、ファイルの共有場所として利用できる「共有フォルダ」機能があります。

ずっと昔から備わっているファイルサーバー機能なのですが、最近の TeamPage ではデフォルトで「共有フォルダ」タブが非表示になっているせいか、意外とその存在が知られていないような気がします。

そこで、今日は、この便利な隠し機能(?)をご紹介します。

Image: Removing Paper Files From Box by WD Store. (License: Attribution 2.0 Generic (CC BY 2.0))

紹介ビデオ

2018/04/16 追記: 共有フォルダ機能の紹介ビデオを作成しました。

共有フォルダはどこにあるの?

共有フォルダは「共有フォルダ」タブの中にありますが、この「共有フォルダ」タブはデフォルトで非表示になっています。

[スペースセットアップ] > [設定] > [表示] の [Proteus スペース タブ] 設定で [共有フォルダ] タブを表示するように変更しましょう。

これで下図のように [共有フォルダ] が表示されるようになります。

共有フォルダタブを表示

ファイルのアップロード方法

ファイルをアップロードするのは簡単。Windows の場合、エクスプローラーやデスクトップから選択したファイルをドラッグ&ドロップするだけです。

このドラッグ&ドロップは、以前は Chrome や Firefox など先進的なブラウザーでのみ利用できる機能でしたが、Internet Explorer もバージョン 11 で対応しました。

ドラッグ&ドロップでファイルのアップロードが出来るのと出来ないのとでは操作の利便性に雲泥の差がありますので、Microsoft の対応がありがたいですね。(もっと早くから対応して欲しかったというのが正直なところですが)

ドラッグ&ドロップでファイルアップロード

Windows エクスプローラーや Mac Finder との連携

Windows のエクスプローラーに「ネットワークの場所」や「ネットワーク ドライブ」として登録できます。Mac の Finder でも同様のことが可能です。

Windows の機能の一部として共有フォルダへアクセスし、ファイルのコピー、移動、フォルダの作成など、いつもの方法で操作できます。

ネットワークドライブ or ネットワークの場所

CarotDAV の利用

CarotDAV は、Windows 上で動作する WebDAV クライアントです。

FTP/FTPS接続や“OneDrive”にも対応した“WebDAV”クライアントソフト。“WebDAV”とは、HTTPプロトコルを拡張してWebサーバー上のファイルを管理可能にしたプロトコル。本ソフトでは、WebDAVプロトコルでWebサーバーへ接続し、ファイルをアップロード・ダウンロードすることが可能。

出典: 窓の杜 forest.watch.impr...

ドラッグ&ドロップによるファイルやフォルダのコピー、新規作成、名前の変更、削除などが簡単にできます。動作が軽いのでオススメです。

CarotDAV

バージョン管理

バージョン管理機能を有効にすると、ファイルを更新したユーザー、日時、理由などの履歴情報を残せるようになります。単純な上書き保存ではなく、過去のバージョンがバックアップとして残され、いつでも過去のバージョンをダウンロードできます。

バージョン管理

バージョン管理機能は、スペース単位またはファイル単位で有効にできます。

ウォッチ機能(変更時に通知機能)

新しいファイルがアップロードされたとき、ファイルの更新が行われたとき、ファイルが削除されたときなどに通知を受けることもできます。

通知設定は簡単です。目的のフォルダを開き、サイドバーの「通知」欄のリンクをクリックし、表示されたダイアログで条件を選択します。

ウォッチ機能の設定

メモやタグ付け機能

共有フォルダ内のサブフォルダやファイルに「メモ記事」を登録(投稿)することで、次のようなことを実現できます。

  • 利用方法や留意点などを画像や表などを入れて分かりやすく説明する。
  • 説明文を元にキーワード検索でファイルを見つける。
  • タグを付けて分類する。
  • ダッシュボードに表示する。
  • メンションを使って特定のユーザーに通知する。

下図は、「ABC社」フォルダに説明文を登録した例です。フォルダ内のファイルを使用するユーザーに、注意すべき点を説明しています。

この機能はいろいろな拡張性・可能性を秘めていますので、別の機会に詳しくご紹介したいと思います。

フォルダのメモ

まとめ

以上のように、TeamPage の共有フォルダにはいろいろな便利な機能が備わっており、タブの表示設定だけですぐに使えるようになります。

適切な権限を設定することで、例えば、社内ユーザーはファイルのアップロードができるが、社外ユーザーはダウンロードのみ可能、といった外部公開も可能になります。

さらに、フォルダやファイルに注意書きを添えたりタグ付けして分類したりすることもできますので、いろいろな用途に活用していただけると思います。

「隠し機能」のままにしておくのはもったいないですね!

質問&回答のやりとりを蓄積して再利用しやすいFAQを作るには

2018/03/24 · · 投稿者 Takashi Okutsu

画像先日、あるお客様から「社内の FAQ 充実のため、質問&回答コーナーを設置したい」という相談を受けました。詳しく話を聞いてみると、次のような状況にあることがわかりました。

  • 毎年社内で同じような質問と回答のやりとりが繰り返されており、費やされている業務時間を削減したい。
  • 主にメールで会話が行われており、質問者と回答者との間で解決するとそれで話が終わってしまう。
  • 他のメンバーに話が共有されないため、後になって他のメンバーから同様の質問が出ることがある。
  • 質問と回答を FAQ として蓄積しておき、「調べればわかる」環境を整えたい。

Image by opensource.com (License: Attribution-ShareAlike 2.0 Generic (CC BY-SA 2.0))

基本機能を使った質問&回答コーナー

ダッシュボードに質問コーナーを設置

TeamPage で「質問&回答」コーナーや、それを元にした「FAQ」コーナーを作るのは簡単です。投稿とコメントの基本機能を使って、次のようなルールで運用すれば良いだけです。

  • 質問者は、記事に質問を書き、「質問」タグと「to do」タグを付けて投稿する。
  • 「to do」タグは「回答受付中」を意味する。
  • 回答者は、回答をコメント投稿する。
  • 回答を締め切るには、「to do」タグを「done」タグに付け替える。

基本機能であるセクション機能を使えば、「質問の新着」「受付中の質問」「締切済みの質問」「カテゴリー別の質問」などをダッシュボードに分かりやすく分類・配置できます。また、通知機能を使って特定のカテゴリーの質問を特定のユーザーに配信することもできます。

質問&回答コーナー作成のための、質問箱プラグイン

しかし、このお客様は、質問のカテゴリー分類(タグ付け)をしっかりとなおかつ分かりやすくしたいという希望でした。

  • タグは(権限があれば)自由に登録できてしまうので、ユーザーによって似たようなカテゴリーを多数登録され、混乱するかもしれない。
  • 管理者が予めカテゴリーを管理し、ユーザーはドロップダウンリストなどから分かりやすく選択できるようにしたい。

これらの条件を満たすために作成したものが、質問&回答コーナーを簡単に設置するための、その名も「質問箱プラグイン」です。

TeamPage の柔軟なスペース設計と権限設定機能により、このお客様が希望されていた「社内ユーザー同士が質問や回答する形」だけでなく、社外の取引先や顧客から質問を受けて社内のサポートスタッフが回答する形にも対応できます。

質問の作成

このプラグインには質問作成用と回答作成用の 2 つのフォームが含まれています。

質問作成フォームには、管理者によって設定されたカテゴリーを選択するためのドロップダウンリスト、緊急度を選択するためのドロップダウンリスト、希望締切日用の日付選択欄を設けました。追加のタグ付けを行ったりファイルや画像を添付したりすれば、疑問点をより分かりやすく説明できます。

質問作成フォーム

回答の作成とスレッド表示

投稿された質問に対して回答を投稿したり、回答へお礼を追加したりできます。スレッド形式なので、より詳しく話を掘り下げたり、話の前後関係を確認したりすることも容易です。

最も良い回答には「ベストアンサー」タグ、結論には「結論」タグを付けましょう。複数の回答があったりスレッドの階層が深くなったりしても一目で結論が分かるようになるので、オススメです。

質問のスレッド

一覧表示と絞り込み

質問や回答は「質問箱」タブの中に一覧表示され、画面右の「記事ボリューム」でボリュームを選択したり、「フィルター」から特定の条件で絞り込んだりできます。

この「フィルター」を使えば、ダッシュボードを使わなくても、特定のカテゴリー、緊急度、回答受付中/締切済み等の条件をその場で適用して絞り込めます。とても便利です。

一覧表示と絞り込み(フィルター)

まとめ

質問&回答コーナーは、コミュニケーションの活性化だけでなく、そのやりとりの結果をそのまま FAQ として利用することで業務の効率化を図れます。

「質問箱プラグイン」は、質問と回答だけのシンプルな構成で、インストールするだけですぐに使えます。(管理者の方はカテゴリーの設定をお忘れなく!)

皆さんの TeamPage にも組み込んでみてはいかがでしょうか。

関連記事

業務で使いやすくなるように、タスクを拡張(カスタマイズ)しよう ... 「何かやるべきことを登録し、終わったら完了にする」という業務に幅広く使えるタスク。この「質問箱」では、タスクをカスタマイズして質問フォームを作成しました。色々なタスクのカスタマイズ事例を紹介します。

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

社内外コラボレーションの壁と透明性 ... コラボレーションツールでは、ユーザーやグループを壁で隔てれば隔てるほど、情報共有が進まず、共同作業がしにくくなり、情報がサイロ化してしまいます。しかし、壁を取り払ってしまうと、秘密やプライバシーの確保が難しくなります。安全性と利便性の両立に重要なことは、「壁の透明性」です。

ソーシャルグラフ、インタレストグラフ、そしてワークグラフ ... TeamPageの「ソーシャルグラフ」のモデルを使って、業務の効率化や他システムとの連携について紹介します。

メンションの表示、あなたはハンドル名派?それともフルネーム派?

2017/12/19 · · 投稿者 Takashi Okutsu

Comment Edit by Pawel KadyszTeamPage バージョン 6.2.12 で、メンションのリンクを、ハンドル名ではなくユーザーのフルネーム(表示名、例: 山田太郎)で表示するように変更しました。

ハンドル名とは、ユーザー名(ログイン ID)の前に「@」マークを付けたものです。例えば、山田太郎さんのユーザー名が「yamada」の場合、ハンドル名は「@yamada」になります。

バージョン 6.2.12 から、山田太郎さん宛のハンドル名「@yamada」をメンションとして入力して投稿すると、「山田太郎」というフルネームに変換されて表示されるようになったわけです。

この変更は、社員番号をユーザー名として使っているような場合にありがたいものでしょう。例えば、ユーザー名が「20170345」という社員番号の場合、メンションは「 @20170345 」と表示されることになります。

社員番号でメンション表示

これでは誰に宛ててメンションされたものなのか分かりにくいですから、フルネームで「山田太郎」と表示された方が良いですよね。

アットマーク付きのハンドル名表記を好む理由

しかし、私は「@」マーク付きのハンドル名表記の方が好きでした。その理由は次の3つです。

ハンドル名のメンション

理由 (1) フルネームではなくハンドル名で事が足りる

弊社の社内用 TeamPage でもお客様サポート用 TeamPage でも、山田さんならば「yamada」のようなアルファベット表記のユーザー名になっており、ハンドル名で誰へのメンションなのかを判別できる。

理由 (2) アルファベットのハンドル名は日本語の中で目立つ

日本語の文章の中にメンションを入れた場合、漢字のフルネームで「山田太郎」と表示されるよりアルファベットの「@yamada」と表示されたほうが目立つ。

理由 (3) アットマーク記号が文章の中で目立つ

記号「@」が他の文字から目立つ形をしており、メンションに気づきやすい。

メンションがフルネームで表示されるように変更したのには理由がありますが、私のように従来のハンドル名表示を好むのにも理由があるわけです。

メンション表記をカスタマイズするためのプラグイン

そこで、好みに応じて選べるようにと作成したのが メンション リンクのカスタマイズ プラグイン です。このプラグインを使うと、フルネーム表記と「@」マーク付きのハンドル名表記のどちらかを選択できるようになります。

また、円の中に人が入っている形のアイコンを表示できるようにしました。このアイコンをフルネームの前に表示すると、ちょうどハンドル名の前の「@」マークのようになり、メンションの視認性がアップします。

アイコンを表示

さらに、メンションの背景の色を、自分宛てと他ユーザー宛とに分けて指定できるようにしました。

背景色を付ける

背景色は、プラグインの設定画面から好みの色を選択できます。下図の例では緑とピンクを選択してみました。

背景色を付ける

まとめ

以上のように、メンションを認識しやすくするための工夫をプラグインとしてパッケージ化しました。

このプラグインをメンションを多用しているお客様に紹介したところ、とても気に入っていただいています。

皆様の TeamPage にも導入してみてはいかがでしょうか。

関連記事

メンション リンクのカスタマイズ プラグイン ... メンションのリンクの表示形式を「フルネーム」「@ハンドル名」から選択したり、アイコンを追加したり、背景色をつけたりできるようになります。

メンション(特定のユーザー宛の連絡) ... メンション機能の紹介記事です。「@ハンドル名」を記事やコメント、近況アップデートなどの本文に記述して投稿すると、該当ユーザーへ「誰かがあなたへのメンションを投稿しました」という内容の通知を行います。本文中の「@ハンドル名」部分は当該ユーザーへのリンクに変更されます。

TeamPage 6.0.14 | @メンション新機能 ... 「@ハンドル名」を記事やコメント、近況アップデートなどの本文に記述して投稿すると、その「@ハンドル名」部分はそのユーザーへのリンクに変更され、そのユーザーへ「誰かがあなたへのメンションを投稿しました」という内容の通知を行います。また、そのスレッドへ新しいコメントが投稿されたときも通知します。

Icon: by Pawel Kadysz, free for commercial use. iconfinder.com/ic...

お客様からの問い合わせを見やすい形に自動整形、分類して対応モレを防止する事例紹介

2017/10/27 · · 投稿者 Takashi Okutsu

問い合わせアイコン多くの Web サイトには、お客様が入力した問い合わせの内容がメール等で届く、「お問い合せフォーム」が用意されています。サイトによっては「資料請求フォーム」や「見積もりフォーム」といった名前で設置されていることもあります。

お客様からの声がダイレクトに届く便利な機能ですが、実際には問い合わせメールの内容が読みにくかったり、対応モレがあったり、対応後の進捗がつかみにくかったり、蓄積情報の利用が難しかったりすることも多いのではないでしょうか。

今回のブログ記事では、この問い合わせ管理を TeamPage で行っているお客様の事例をご紹介します。

特徴・長所

まずは、このソリューションの特徴および長所をご紹介します。

1. TeamPage 側の変換機能を使います。メールを中心としたシステム運用や問い合わせフォームのプログラムに変更を加える必要がありません。

2. 自動タグ付け機能やダッシュボード機能(セクションによる分類機能)は TeamPage に基本機能として搭載されています。追加費用なしで構築できます。

3. タグの変更で簡単に進捗を管理できます。

さらに…

4. TeamPage の基本機能である、段落コメント、タスク登録、スケジュール登録機能などと組み合わせて、さまざまな業務フローに柔軟に対応します。

改善したかったこと

お客様が改善したかったこと(=TeamPage で改善できたこと)は、(1) メールの内容をわかりやすく整形したい、(2) 問い合わせの内容(見積り依頼、デモ依頼、特注品開発依頼、採用問い合わせ…)を分類したい、(3) その後の対応について営業部との連携を強化したい、の主に 3 つでした。

それぞれについて、以下、詳しく見ていきましょう。

メールの内容をわかりやすく整形したい

下図の左側は、Web サイト上の問い合わせフォームです。お客様が入力・選択した内容が、メールで問い合わせ管理担当者に届くようになっています。

下図の右側が届いたメールで、フォームで入力・選択された内容がテキストとして記載されています。すべてがテキストで並んでおり、よく読まないと内容がわかりにくいですよね。

問い合わせフォームから受信したメールの例

そこで、問い合わせメールの宛先に TeamPage の投稿用アドレスを加え、投稿する際の変換機能をカスタマイズすることにしました。

変換機能は、標準で、HTML メール中にセキュリティ上問題のあるコードが含まれていないかどうかをチェックし、含まれている場合に除去するために使われています。

この事例では、(1) メール中の不要な部分を除去し、(2) メール中の「住所 = ◯◯」のような部分をテーブル化する、という変換を行うことにしました。

下図は、上図右側のメールを TeamPage に投稿した実際の例です。テーブルに表示されたため、各項目がとても見やすくなりました。

整形されて投稿された問い合わせメール

自動整形機能は、定型的な内容のメールに威力を発揮します。情報システム部では、サーバーなどの障害アラートをメールで受け取っているケースが多いと思います。このような通知メールの管理にも応用できますね。

問い合わせを分類したい

上図のタイトル下に「問い合わせ」と「特注品」の 2 つのタグが付いているのが見て取れます。サイドバーの「タグ」欄でも確認できます。

自動的にタグを付けられる

メールを TeamPage に投稿する際、件名や本文に含まれるキーワードを元に自動的にタグを付けられます。

自動的にタグを付けることで、ダッシュボード等に自動分類表示したり(下図)、特定のタグが付いた問い合わせ投稿時に通知したり、「to do」タグが付いた問い合わせを確認することで対応モレを防いだりすることを、手間を掛けずに実現できます。

ダッシュボードに分類表示

自動タグ付けは、件名や本文中のキーワードだけでなく、メールの送信元や送信先にもとづいて行うように設定できますので、例えば、問い合わせフォームと注文フォームからのメールに別々のタグ付けをしたり、それぞれ TeamPage 内の別の場所へ配送したりすることが可能です。

対応モレを防止したい

上記の自動タグ付け機能の応用で、対応モレの防止を図りました。

投稿された問い合わせには自動的に「to do」が付けられ、営業本部のユーザーが特定の営業所に割り振ります。

静岡営業所に割り振る

本文中に、例えば「秋田」が含まれる場合に「秋田営業所」に自動的に割り振ることも可能ですが、「東京の秋田さん」から届いた問い合わせも「秋田営業所」に割り振られてしまうため、営業本部のユーザーが内容を確認した上、手動で割り振るようにしています。

営業所の社員は、割り振られた問い合わせ内容を確認し、営業活動を開始します。営業活動中の進行状況は、「商談中」「見積中」「受注」「失注」などのタグを付けることで管理します。

案件の進捗をタグで管理

タグの変更時に特定のユーザーへ通知することも可能です。例えば、「受注」に変更されたら部長や営業部員に通知し、祝福のコメントを書き込んでもらう…といったこともできますね。

また、タグ変更の記録は履歴画面で確認できます。(履歴情報は、権限設定で、特定のユーザーだけに公開できます)

タグの変更履歴

タイムライン履歴プラグイン の画面で表示した方が親しみやすいかもしれません。

タイムライン履歴プラグインの例

営業活動を終了したら、「to do」タグを「done」タグに変更します。

タグをdoneに変更

ダッシュボードの、未完のセクションに表示されていた問い合わせ記事が、完了セクションへと移動します。

完了した問い合わせが「完了」へ移動

これらの工夫により、自分たちが担当する案件のモレの有無、それぞれの営業活動の進行状況、各ステータスの件数などを確認・把握できるようになりました。

今後はSFA/CRM的な利用へ拡大

今後は、営業活動の状況共有や情報共有を一層進めるため、TeamPage で SFA/CRM 的な利用を始めることを検討しています。

TeamPage には、タスク、スケジュール、コメントなどの便利な機能があり、TeamPage に集約することで仕事の効率化、情報共有、蓄積情報の活用などを実現できます。

下図は、問い合わせ記事にコメントやタスクを追加した例です。営業活動の指示、スケジュール登録、社内での事前相談、商談の記録などを、問い合わせの発生から受注・失注までの流れの中に登録・管理できます。

問い合わせにコメントやタスクを追加

関連記事

メールと仲良く!社内外ソーシャルで情報共有 ... 「社内SNSを導入してメールの不満を解消しましょう」そんな宣伝文句を見聞きすることも多いですが、メールをやめるのは現実的ではありません。メールによる業務スタイルをそのまま残しつつ、それをバックアップする形で TeamPage を導入し、社内の情報共有をする方法をご紹介します。

チーム作業を効率化するポイントは「情報を散在させず、1箇所にまとめる」こと ... 社内の情報共有を進めるには、必要な情報がすばやく一箇所で得られることが大切です。メールで投稿された情報を整理整頓してダッシュボードに掲載すれば、メール蓄積情報がより使いやすくなります。

会議の「次にやること」も一ヶ所で管理して議事録をもっと活用する方法 ... 議事録にコメントを加えてディスカッションしたり、付箋を貼ったり、進捗を共有したり…。議事録の一ヶ所で、場所を移さずに「次のアクション」を実行できます。次の仕事にどんどん活かせる議事録を「アクティブ議事録」と名付けました。

CRM プラグイン ... お客様に対しての「やったこと、わかったこと、次にやること」をチームで共有し、顧客満足度や営業活動の向上を図るための CRM/SFA アプリです。

PMCRM プラグイン ... 営業情報や顧客サポート情報を投稿・集約・共有し、営業やサポート活動の効率化と活性化を図る CRM/SFA アプリです。

タイムライン履歴プラグイン ... コメント、編集、タスク登録、予定登録、タグ変更、モデレーション等の履歴をタイムライン(時系列)で表示します。

問い合わせ管理ソリューション ... 最新の対応状況や過去の履歴が一目瞭然。サポート部門の内外での情報共有を促進し、対応漏れや二重対応を防止します。対応方針の相談、必要なタスクの実行やレビュー、対応記録のノウハウ共有も実現できます。

記事へのリンクを作成する3つの方法

2017/10/20 · · 投稿者 Takashi Okutsu

Link Imageハイパーリンク技術を活かした TeamPage では、近況報告、タスク、予定、プロジェクト、電話メモ、日報…などのあらゆる種類の記事と記事とを関連付けられます。

記事と記事とを関連付けることにより、「この時の電話問い合わせからどのような営業活動に繋がったのか」といった「仕事の流れ」が記録され、いつでも相互に流れを辿っていけるようになります。

記事と記事とを関連付ける最も簡単な方法は、本文中にリンクを作成することです。今回はその方法を3つ紹介します。

Photo by Aarthi Ramamurthy, Licensed under Attribution-NonCommercial-NoDerivs 2.0 Generic (CC BY-NC-ND 2.0)

記事 ID を記入する

一件一件の記事には固有の ID が割り振られます。この ID は、通常、記事タイトルの下に表示されており、「スペース名 + 番号」の形式になっています。例えば、下図の 「Customer157」 は、「Customer スペースに投稿された 157 番目の記事」を表しています。

リンク先の記事のIDを取得する

この記事 ID をコピー(取得)して、別の記事の本文に記入し、投稿します。

※ 2017/10/27 追記
記事 ID をコピーしやすくするプラグインを制作しました。こちらのページをご覧ください

記事IDを記入して投稿する

自動的に「記事 ID とタイトル」形式のリンクになります。また、リンク先との記事と「参照している」リレーションシップで関連付けられます。

投稿された記事

リンクの挿入/編集フォームを使う

記事 ID で作成されたリンクの場合、リンクの文字は自動的に「記事 ID + 記事タイトル」になります。

※ 設定で、「記事タイトル」を付けないようにもできます。(記事 ID のみ表示)

「記事 ID + 記事タイトル」ではなく、リンクの文字を「ここをクリックしてください」のように自由に設定するには、リンクの挿入/編集フォームか、または後述のコマンドを使います。

リンクの挿入/編集フォームは、本文編集欄のリンクアイコンをクリックして表示します。

リンクの挿入/編集

フォーム上では、外部 URL へのリンク、記事や添付ファイルへのリンク、共有フォルダへのリンク…などのリンクの種類の選択や、リンク文字の変更などができます。

リンク設定

記事を投稿すると、下図のようなリンクになります。

作成されたリンク

コマンドを使う (上級者向け)

この方法ではコマンド(「ラピッド セレクタ」と呼びます)を使います。慣れが必要ですが、慣れてしまえばどんなリンクでも自由に作成できるのでとても便利ですよ。私が最も頻繁に使っている方法です。

コマンドの書式は [[ /link リンク先IDまたはURL 'リンク文字' ]] です。

まず、二重の角括弧で囲み、その中に「リンクを作成しなさい」というコマンドの /link を置きます。続けてリンク先の記事 ID または URL を置き、次にリンク文字をアポストロフィ記号で囲って記述します。

例 (1) 記事 Customer157 への「ここをクリック」というリンクを作成する

[[ /link Customer157 'ここをクリック' ]]

例 (2) 外部サイト https://twitter.com/tsijpbo への「弊社ツイート情報」というリンクを作成する

[[ /link https://twitter.com/tsijpbo '弊社ツイート情報' ]]

すばやく自由にリンクを設置できるのでオススメです。ぜひ使ってみてください。

今回紹介した各リンク機能については、サポートサイトでも詳しく説明しています。ご覧いただけたら嬉しいです。

おまけ

閲覧権限がない場合のリンク動作

リンク先の閲覧権限がない場合、リンク部分は単なるテキストとして表示され、リンク先へ移動することはできません。

下図は、ユーザー「長谷川」に Customer157 の閲覧権限が許可されていない場合の例です。リンクになるべき場所がイタリック体のテキストとして表示されています。また、画面下部のリレーションシップも非表示になります。

リンク先の読み取り権限がない場合

閲覧できるかどうかはスペース毎の権限設定で予め決められています。TeamPage が権限設定に基づいてリンクの動作を自動的に判断してくれるので、ユーザーがリンクを作成する際に「リンク先を訪問者に公開して良いかどうか」を気にする必要がありません。

リレーションシップによる相互リンク

TeamPage のリンクは相互リンクになっていおり、リンク先からリンク元を「〜されている」リレーションシップで確認できます。

相互リレーションシップ

リンク数が増えれば増えるほど、「私が投稿した記事が誰かの役に立っている」「話題にされちる」という実感が湧くので、より役に立つ記事を書こうという意欲に結びつきます。

なので、誰かの記事に関連した何かを投稿するときは、「佐藤さんの例の件ですが…」のように書くのではなく、「佐藤さんの Customer157 についてですが…」のように、なるべく記事へのリンクを作成することをオススメします。

関連記事

リンクや編集の仕組みからハイパーテキストとジャーナルの設計を解く ... TeamPageはハイパーテキストのシステムです。文書(Web上のページ)と文書とをリンク(ハイパーリンク)で結びつけて相互に関連付け、結びつけることを得意としています。

ソーシャルグラフ、インタレストグラフ、そしてワークグラフ ... TeamPageの「ソーシャルグラフ」のモデルを使って、業務の効率化や他システムとの連携について紹介します。

社内外コラボレーションの壁と透明性 ... コラボレーションツールでは、ユーザーやグループを壁で隔てれば隔てるほど、情報共有が進まず、共同作業がしにくくなり、情報がサイロ化してしまいます。しかし、壁を取り払ってしまうと、秘密やプライバシーの確保が難しくなります。安全性と利便性の両立に重要なことは、「壁の透明性」です。

ディスカッションの混線を防止するコミュニケーション整理術 ... 仕事で使うコミュニケーション・コラボレーションツールには、ユーザーや業務の最新状況をすぐに把握できることが求められます。そのためには、情報が分かりやすく整理されていることが大切です。

フロー型とストック型の「いいとこ取り」をするには ... リアルタイムの会話に向いているとされる「フロー型」のツール。繰り返し読んだり引用したりと後から活用しやすいとされる「ストック型」のツール。TeamPage は、どちらでも使えるように設計されています。

カレンダーやタスクリストを、色彩豊かに、より使いやすく

2017/08/31 · · 投稿者 Takashi Okutsu

色鮮やかな虹のイメージ私は自分の個人予定を Google Calendar で管理しており、予定の種類に応じて色を設定することがよくあります。予定のカテゴリーに応じて色付けしておくと、カレンダーをパッと見るだけで何月何日にどのような予定があるのかがすぐわかり、とても便利です。

対して TeamPage では、予定やタスクなどに「色」を付けることができず、そのため、カレンダーやタスク一覧(タスクリスト)上で見分けがつきにくいという不満がありました。

今回のアップデートでは、これまでプロエジェクトだけで利用可能だった色付け・色分け機能を予定やタスクなどにも拡張し、より仕事を進めやすい環境へと改善しました。

予定やタスクを色彩豊かに

上述のように、これまでプロジェクトの投稿/編集フォームだけで利用可能だった「色」ドロップダウンリストを、予定やタスクの投稿/編集フォームにも追加し、フォーム上で好みの色を選択できるようにしました。

下図は、予定の投稿/編集フォームの例です。現行バージョンでは 7 つの色を選択できます。

色選択ドロップダウンリスト

カレンダーを色彩豊かに

選択された色は、カレンダー上の予定やタスクに反映されます。

この改善により、カレンダーやタスクリスト上で、予定やタスクの最新状況、進捗、種類などを、チームのメンバー、プロジェクト管理者、組織の経営者、社外のパートナーなどと、より素早く共有できるようになります。

カラフルな新カレンダー

下図は、旧来のカレンダーで上図と全く同じ 8 月を表示した例です。予定、タスク、プロジェクト、マイルストーン等、カレンダー上のすべてのイベントが同じ色で表示されています。違いは一目瞭然ですね。

単一な色彩の旧カレンダー

「フィルター」メニューから特定の色だけに絞り込むことも可能です。下図では緑色に絞り込んだ例で、緑色のマイルストーン、予定、プロジェクトが表示されています。

緑のイベントだけを表示

タスクリストを色彩豊かに

タスクに付けられた色は、タスクリスト(タスクの一覧画面)にも反映されます。下図はその例です。各タスクの右側に色が表示され、区別しやすくなっています。

画像

プロジェクトのダッシュボードに表示されるタスク一覧でも色を確認できるようになりました。プロジェクトに関連する仕事をより見やすく分類できます。

プロジェクトのダッシュボード

まとめ

これまでの TeamPage では、タスクや予定に色を付けることができず、また、カレンダーに色が反映されない仕様になっていました。TeamPage をお使いの皆さん同様、私自身、この点に長い間物足りなさを感じていました。

今回のアップデートで、長い間抱き続けていた思いをようやく形にでき、また、皆さんの仕事環境である TeamPage をより良いものに改善できたことをとても嬉しく感じています。

私たちトラクション・チームは、「チームのための業務改善ソリューション」である TeamPage プラットフォームへのフィードバックや改善要望などを随時受け付けています。ぜひお気軽にお寄せください。

関連記事

新 TeamPage カレンダー画面と機能の紹介 ... TeamPage バージョン 6.2 から利用できるようなった、新しいカレンダーの画面や機能について紹介します。

新カレンダー開発のきっかけとFullCalendarを採用した理由 ... 新しいカレンダーの開発のきっかけや、いくつかのカレンダー用ライブラリの中から FullCalendar を選んだ理由などについて紹介します。

スケジュール集計プラグイン ... 予定記事(スケジュール記事)の開始日時と終了日時を元に作業工数(所要時間)を自動的に計算し、指定された期間内の集計を行います。さらに、集計した工数を、ユーザーごと、カテゴリーごと、プロジェクトごと、顧客ごと等に分類し、見やすい表やグラフで表示します。

ダッシュボードの2週間カレンダー プラグイン ... 各スペースのダッシュボード(ニュースページ)と「すべてのスペース」のダッシュボード(フロントページ)に2週間カレンダーを表示するプラグインです。スペースのダッシュボードでそのスペースの直近スケジュールを確認できるようになります。

チームメンバーのスケジュール共有&調整プラグイン ... 今回刷新された新しいカレンダーに統合された、旧カレンダー用の、複数ユーザーのカレンダーを並べて表示するプラグインです。

カレンダーの週の始まりを月曜日に変更プラグイン ... TeamPage のカレンダーの週は、日本語ロケールでは、標準で日曜日から始まります。このプラグインを利用すると、ユーザーごとに、週の始まりを月曜日に変更できるようになります。

プロフィールページ便利化プラグイン ... ユーザーのプロフィール ページのダッシュボードに、通知リスト、2週間カレンダー、そして担当するタスクとプロジェクトのリストを表示し、「マイページ」として使いやすくします。

新カレンダー開発のきっかけとFullCalendarを採用した理由

2017/07/26 · · 投稿者 Takashi Okutsu

FullCalendar Logo前回のブログ記事では、新しくなったカレンダーの画面や機能をご紹介しました。この新カレンダーでは、FullCalendar という名前の jQuery ベースのライブラリを使用しています。機能が豊富でとても使いやすい(開発しやすい)素晴らしいライブラリです。

今回のブログ記事では、新しいカレンダーの開発のきっかけや、いくつかのカレンダー用ライブラリの中から FullCalendar を選んだ理由などについて説明します。

時間の分かる週間カレンダーが欲しい

新しいカレンダー開発に取り組み始めた理由は、スケジュール管理のために「何時から何時まで」が視覚的にわかる週間カレンダーが欲しかった、ということでした。

標準的な月間カレンダーでは、例えば、下図のように 4 件のイベントが登録されている場合、それぞれの開始時刻や開始順序はわかりますが、それぞれの終了時刻や空き時間があるかどうか(各イベントが重なっているかどうか)がわかりません。

月間カレンダー例

これに対して、下図のように縦軸に時刻が表示される週間カレンダーでは、各イベントの長さ(時間)、重なり、空き時間などをわかりやすく表現できます。

時刻付きの週間カレンダー

細かなスケジュール管理をするとなると、このような各イベントの長さ(時間)、重なり、空き時間を確認できる機能は必要ですよね。

独自開発 vs ライブラリ利用

当初、時刻付きの週間カレンダー画面を作るには、横方向に 7 列(7 日)、縦方向に 24 列(24 時間)のテーブルを組み、開始日時と終了日時を元に各イベントをテーブル上に配置すれば良いだろうと簡単に考えていました。

確かに「表示するだけ」なら比較的簡単に実現できるかもしれません。しかし、次のような「出来て当たり前」の機能を一から開発することは簡単ではありません。

  1. ドラッグ&ドロップで日時を変更できるようにする。
  2. 複数のイベントが重なった場合にそれらを重ねるか、または幅を狭めて表示する。
  3. 将来的に 2 週間表示や 14 日表示を追加できるように拡張性を持たせておく。

そこで、JavaScript で作られたカレンダー用のライブラリをリサーチすることにしました。優れたライブラリには上記のような機能が予め用意されているので、TeamPage からはそれらの機能を呼び出せば良いだけです。機能そのものを開発する必要がなくなるので、開発にかかる時間やコストを圧縮できます。

リサーチの結果、次の 3 つが候補に挙がりました。

  1. fullCalendar
  2. Calendario
  3. Kendo UI Calendar
  4. jQuery Week Calendar

これらの中から主に次の理由で 1. の「FullCalendar」を選びました。

  • オープンソースかつ MIT ライセンスで公開されている。
  • 月間、週間、年など、いろいろな形式のカレンダー画面が用意されていて、しかも「7 日間」のような独自の画面を定義・追加できる。
  • TeamPage には元々 jQuery が組み込まれており、TeamPage 内で動作することを確認できた。
  • 本家サイトに詳しいマニュアルが整備されている。
  • 開発者向けの問答サイトである stackoverflow に FullCalendar に関する Q&A が山のようにあるので問題解決しやすい。

開発中にはいろいろな問題にぶち当たりましたが、根気強く stackoverflow を検索することで同じ問題や似たような問題や解決方法など、先人たちの知恵を見つけることができ、大いに助けられました。

カスタマイズ対応力

FullCalendar はとてもよく考えられて作られているライブラリです。開発を進めるにつれてその素晴らしさをより深く実感できるようになりました。

例えば、パラメーターを指定するだけである程度のカスタマイズを簡単にできるようになっています。

// カレンダー上部のボタンやタイトルなど
header: {
  left: 'month,basicWeek,listMonth',
  center: 'title',
  right: 'prev,next today'
},
// ボタンに表示される文字
buttonText: {
  today:    '今日',
  month: '月',
  basicWeek: '週',
  listMonth: '月リスト'
},
// ロケールは日本語
locale: 'ja',
// 週の始まりは日曜日
firstDay: 0,
// デフォルトの日にち(TeamPageのクッキーから読み取る)
defaultDate: fcDefaultDate('<config.view.value name="viewtype" />'),
// デフォルトのカレンダー(TeamPageのクッキーから読み取る)
defaultView: fcDefaultView('<config.view.value name="viewtype" />', '<#fullcalendar-default-viewname />'),
// たくさんイベントがある場合は「more」を表示
eventLimit: true,
eventLimitClick:'popover',
// 何時以降を「次の日」と認識するか
nextDayThreshold: '00:00:00'

カレンダー全体ではなく、イベント毎に細かな設定をしたい場合もありますよね。大丈夫です。多くのパラメーターは、カレンダー全体設定ではなく各イベントの JSON データでも設定できます。例えば、「イベントをドラッグ&ドロップできるかどうか」を設定する「editable」パラメーターを、各イベントの編集権限を調べた結果を true か false の値として JSON データに入れられます。

{
  "id": "__entry.tractionid.fqid__",
  "tractionid": "__entry.tractionid__",
  "displayname": "<#entry-class-name>",
  "displaytype": "__entry.displaytype__",
  "customentrytype": "__entry.customentrytype__",
  "editable": <entry.permissions.edit>true<else>false</entry.permissions.edit>,
  "className": "<#calitem-class />",
  "title": "__entry.titletext__",
  "start": "__entry.startdate__",
  "end": "__entry.enddate__",
  "allDay": <#entry-task-or-not />
  "tpAllDay": <#entry-allday-or-not />
  "tpDue": "<#calitem-tp-due />"
}

さらに、JSON データに独自のパラメーターを追加できます。上記の例では「tractionid」「displayname」「customentrytype」などの TeamPage 独自のパラメーターを JSON データに入れ、FullCalendar での次のような条件分岐処理に使用しています。

  • イベントの種類がタスクだったらチェックボックスを、予定だったらアイコンを表示する。
  • ドラッグ&ドロップされたとき、イベントの種類によってドラッグ&ドロップをキャンセルする。
  • TeamPage のイベントの背景色は基本的に透明にして、Google Calendar のイベントは背景を指定色で塗りつぶす。

まとめ

FullCalendar は、「与えられたデータをカレンダーに表示する」「ドラッグ&ドロップされたら移動する」などの基本的な機能しか備えていません。

TeamPage のような高機能なアプリケーションに組み込んで動作させる場合、例えば「移動したら日時を変更してデータベースに反映させる」のような、求められるさまざまな機能を追加する必要があります。

FullCalendar には、その多くを実現できる柔軟性が備わっています。この素晴らしいライブラリを開発・提供している FullCalendar LLC に感謝いたします。

新しくなった TeamPage カレンダーへの質問や機能追加要望などは、お気軽にサポートサイトのフォーラムへお寄せください。(ユーザー登録(無料)とログインが必要です)

関連記事

新 TeamPage カレンダー画面と機能の紹介 ... TeamPage バージョン 6.2 から利用できるようなった、新しいカレンダーの画面や機能について紹介します。

カレンダーやタスクリストを、色彩豊かに、より使いやすく ... 予定やタスクに色を付けられるようになりました。カレンダーやタスクリスト(タスクの一覧)がカラフルになることにより、仕事がより進めやすくなりました。

スケジュール集計プラグイン ... 予定記事(スケジュール記事)の開始日時と終了日時を元に作業工数(所要時間)を自動的に計算し、指定された期間内の集計を行います。さらに、集計した工数を、ユーザーごと、カテゴリーごと、プロジェクトごと、顧客ごと等に分類し、見やすい表やグラフで表示します。

ダッシュボードの2週間カレンダー プラグイン ... 各スペースのダッシュボード(ニュースページ)と「すべてのスペース」のダッシュボード(フロントページ)に2週間カレンダーを表示するプラグインです。スペースのダッシュボードでそのスペースの直近スケジュールを確認できるようになります。

チームメンバーのスケジュール共有&調整プラグイン ... 今回刷新された新しいカレンダーに統合された、旧カレンダー用の、複数ユーザーのカレンダーを並べて表示するプラグインです。

カレンダーの週の始まりを月曜日に変更プラグイン ... TeamPage のカレンダーの週は、日本語ロケールでは、標準で日曜日から始まります。このプラグインを利用すると、ユーザーごとに、週の始まりを月曜日に変更できるようになります。

プロフィールページ便利化プラグイン ... ユーザーのプロフィール ページのダッシュボードに、通知リスト、2週間カレンダー、そして担当するタスクとプロジェクトのリストを表示し、「マイページ」として使いやすくします。

新TeamPageカレンダー画面と機能の紹介

2017/07/25 · · 投稿者 Takashi Okutsu

Calendar Image (Small & Flat Icons by paomedia, Public Domain)最新の TeamPage 6.2 では、新しい TeamPage カレンダー機能/画面を利用できます。新しいカレンダー機能/画面では、会議や商談の予定、タスクやプロジェクトの締切、電話対応や顧客サポートの期限など、TeamPage に登録されたイベントの日時をより柔軟に管理できます。

今回新しくなったカレンダーでは、FullCalendar という、jQuery ベースの素晴らしいライブラリを使用しています。数あるカレンダー用ライブラリの中から FullCalendar を選択した理由などについてはまた別の機会に述べることにして、今回のブログでは、新しくなったカレンダー画面や機能について紹介します。

カレンダー画面の例

新しいカレンダーの新しい画面

これまでの TeamPage には、標準的な月間カレンダー画面しか用意されていませんでした。今回の刷新で、次のようなさまざまな画面が用意され、しかも個人ごと(ユーザーごと)に使いやすいものや使いたいものを選択できるようになりました。

標準カレンダー

上図のように日付のみが表示された、テーブル型のカレンダーです。

  • 1 週間(日曜日〜土曜日、または月曜日〜日曜日)
  • 2 週間(1 週間と次の週)
  • 7 日間(今日から向こう 7 日間)
  • 1 ヶ月

時刻付きカレンダー

日付に加えて時刻が表示されるカレンダーです。

  • 1 週間(日曜日〜土曜日、または月曜日〜日曜日)
  • 7 日間(今日から向こう 7 日間)

画像

リスト型カレンダー

予定やタスクなどのイベントを縦に一覧表示するカレンダーです。

  • 1 週間

画像

個人のカレンダー vs チームのカレンダー

これらの新しいカレンダー画面と機能は、各ユーザーのプロフィールページ(マイページ)だけでなく、チームの共通ページ(「すべてのスペース」や各スペース、各プロジェクト、各マイルストーン等)でも利用できます。

これらのチームのカレンダーでは、メンバーに関係するすべてのイベントがひとつのカレンダーにまとめて表示されます。チーム全体の動向を確認するのに適しています。

これに対して、チームメンバー毎の個別のスケジュールを確認するには、下図の「複数のユーザーのカレンダー」画面を利用してください。チームメンバー間のスケジュールの比較や調整を可能にします。

画像

ドラッグ&ドロップによる日時変更

新しいカレンダーでは、見た目の変更に伴って次のような新しい機能をサポートします。

  • イベントのドラッグ&ドロップによる日付変更
  • イベントのドラッグ&ドロップによる時刻変更
  • イベントの終了時刻のドラッグ&ドロップによる所要時間変更

ドラッグ&ドロップで日時変更

フィルター(絞り込み)

「私が担当するタスク」、「私が参加予定のスケジュール」、「優先度 1 のタスク」などのフィルター(絞り込み)が用意されています。

下図では「管理者ユーザーが参加予定のスケジュール」のフィルターを適用した例です。自分に関係のある予定や部下のスケジュールなどを素早くチェックできます。

絞り込みの実行例

外部連携

Google カレンダーを TeamPage の新カレンダーにインポートして表示できるようになりました。

また、カレンダーのデータは iCalendar 形式で出力でき、Outlook、Mac カレンダー、Thunderbird など、いろいろな外部カレンダーアプリと連携できます。

Outlook連携例

詳細情報ダイアログ

カレンダー上のイベントをクリックすると、下図のような詳細情報ダイアログが表示されます。

ダイアログでは、添付ファイルを含めた詳細を確認できるだけでなく、開く(記事本体へ移動する)、編集する、閉じる、複製するなどの次のアクションを選択できます。

画像

まとめ

使いやすいスケジュール管理用の画面や機能を待ち望んでいた TeamPage 利用者の皆様、大変長らくお待たせいたしました。今回刷新された TeamPage のカレンダーが、皆様の日々の仕事をより楽に、分かりやすく、効率的に進める助けになることを願います。

ご意見やご感想などがございましたら、お気軽にサポートサイトのフォーラムまでお寄せください。

関連記事

新カレンダー開発のきっかけとFullCalendarを採用した理由 ... 新しいカレンダーの開発のきっかけや、いくつかのカレンダー用ライブラリの中から FullCalendar を選んだ理由などについて紹介します。

カレンダーやタスクリストを、色彩豊かに、より使いやすく ... 予定やタスクに色を付けられるようになりました。カレンダーやタスクリスト(タスクの一覧)がカラフルになることにより、仕事がより進めやすくなりました。

スケジュール集計プラグイン ... 予定記事(スケジュール記事)の開始日時と終了日時を元に作業工数(所要時間)を自動的に計算し、指定された期間内の集計を行います。さらに、集計した工数を、ユーザーごと、カテゴリーごと、プロジェクトごと、顧客ごと等に分類し、見やすい表やグラフで表示します。

ダッシュボードの2週間カレンダー プラグイン ... 各スペースのダッシュボード(ニュースページ)と「すべてのスペース」のダッシュボード(フロントページ)に2週間カレンダーを表示するプラグインです。スペースのダッシュボードでそのスペースの直近スケジュールを確認できるようになります。

チームメンバーのスケジュール共有&調整プラグイン ... 今回刷新された新しいカレンダーに統合された、旧カレンダー用の、複数ユーザーのカレンダーを並べて表示するプラグインです。

カレンダーの週の始まりを月曜日に変更プラグイン ... TeamPage のカレンダーの週は、日本語ロケールでは、標準で日曜日から始まります。このプラグインを利用すると、ユーザーごとに、週の始まりを月曜日に変更できるようになります。

プロフィールページ便利化プラグイン ... ユーザーのプロフィール ページのダッシュボードに、通知リスト、2週間カレンダー、そして担当するタスクとプロジェクトのリストを表示し、「マイページ」として使いやすくします。

チーム作業を効率化するポイントは「情報を散在させず、1箇所にまとめる」こと

2017/06/22 · · 投稿者 Takashi Okutsu

ちえてらすコンサルティングの中村剣さんのブログで、「チーム作業を効率化するポイントは『情報を散在させず、1箇所にまとめる』ことです。それには『teampage』は打って付けです。」とご紹介頂きました

中村さんは、現在は気鋭の中小企業診断士として長野県を中心に活躍されていますが、以前は同県の某大企業で TeamPage などを使った社内ポータルや社内 SNS の構築を行い、社内の情報共有や活性化の旗振り役を務めていらっしゃいました。いろいろな SNS ツールやグループウェアへの造詣が深く、ツール導入に際してのメリットやデメリットも熟知されている中村さんに「使える!と自信をもってお勧め」していただき大変光栄です。

定着には環境や演出が大切

中村さんは、ブログ記事の中で、本当に活用されるグループウェアなどのシステムは実は少ないと指摘しています。

これまでLoutusNotes、Microsoft SharePointServer(MOSS)、WebSphereなどのシステムを使ってきましたが、実際に社内で本当に活用されたものはそんなに多くはありません。

システムの機能だけで使われる、使われないが決まることはまずありません。そのシステムを使ってもらうようにどのように環境を作るか、演出するか、これらがあってはじめて使われるようになります。

これから紹介する「teampage」(チームページ)はこれまでいろんなグループウェアを使ってきた僕からみて、これは使い易いし、使える!と自信をもってお勧めできるものです。もちろん、以前の社内での利用実績もありますし、一般社団法人信州アルプス大学校でも採用しています。

さまざまな企業での TeamPage 導入や運用を見たり、あるいは他社製のグループウェアの相談を受けたりしてきた私の経験からも、この指摘は的を射ています。

社内 SNS やグループウェアは魔法のツールではありませんので、漠然と導入しても社内コミュニケーションを活性化したり業務を効率化してくれるものではありません。

「何の業務に使うのか」「その業務がどのように楽になるのか」「それによってどのようなメリットがあるのか」などを明確にして周知しないと、多くの人は「また何だかわからない新しい余計なことが始まった」感を抱き、面倒くさがり、定着しません。

また、「これからは業務連絡はこのツールに投稿して行う」「返事はメールではなくコメントでする」「上司は読んだら必ず一言はコメントする」のようなルール作りも必要です。「今までどおりメールでもOK」では絶対に定着しません。

情報を散在させず、一箇所で

業務連絡をメールではなく社内 SNS やグループウェアで行うようになったとしても、最新状況、話の流れ、文脈、経緯などがわかりにくいと、なかなか使用するメリットを感じられません。

情報がどこかに蓄積されているだけでなく、一箇所に必要な方法が集まっていて、ぱっと見るだけですぐにわかり、必要に応じて簡単に掘り出せる仕組みが必要です。

これについても、中村さんは次のように紹介しています。

チーム作業を効率化するポイントは「情報を散在させず、1箇所にまとめる」ことです。

それには「teampage」は打って付けです。

teampageの特徴はプロジェクト(=案件、チーム)ごとに専用のホームページを持ち、そこですべての情報を集約させることです。

スペースには、掲示板、カレンダー、プロジェクト管理などがあり、twitterみたいなつぶやきもできます。

ブラウザからの書き込みだけでなく、スペース自身に専用のメールアドレスを設定すればメールでも投稿できます。

TeamPage では、スペースやプロジェクト毎にダッシュボードという名前(中村さんは上記で「ホームページ」と説明しています)の、新聞紙面のような画面が用意されています。ダッシュボードに表示する内容(新聞紙面にどんな情報を掲載するか)は、利用目的に合わせて簡単にカスタマイズできます。

信州アルプス大学のダッシュボード例

一般的に、チャットツールだと古くなった情報はどんどん流れていってしまいますし、いわゆる掲示板だとたくさんのコメントの中に重要な情報が埋もれてしまいますよね? TeamPage のダッシュボードでは、特定のつぶやきやコメントをピックアップして掲載できます。例えば、商談チャットや顧客対応記録掲示板の中から新着クレームだけをピックアップしてダッシュボードに掲載し、チームメンバーで共有できます。

便利なダッシュボードですが、必ずしも使う必要はありません。例えば、スケジュール共有を目的としたスペースではカレンダー画面をメインに据えると良いでしょう。コミュニケーション重視のスペースならば、近況アップデート(Twitter のようなつぶやき機能)がお勧めです。

いろんなグループウェアはありますが、機能がシンプルでありながらカスタマイズの自由度が高く、使い勝手もいいteampageは有力な選択肢の1つになると思います。

「仕事で使いやすくするための、仕事を進めやすくするための、カスタマイズの自由度」を評価していただき、とても嬉しいです。ぜひ皆さんにも体験していただきたいと思います。お問い合せをお待ちしております。

関連記事

メールと仲良く!社内外ソーシャルで情報共有 ... 「社内SNSを導入してメールの不満を解消しましょう」そんな宣伝文句を見聞きすることも多いですが、メールをやめるのは現実的ではありません。メールによる業務スタイルをそのまま残しつつ、それをバックアップする形で TeamPage を導入し、社内の情報共有をする方法をご紹介します。

フロー型とストック型の「いいとこ取り」をするには ... リアルタイムの会話に向いているとされる「フロー型」のツール。繰り返し読んだり引用したりと後から活用しやすいとされる「ストック型」のツール。TeamPage は、どちらでも使えるように設計されています。

社内外コラボレーションの壁と透明性 ... コラボレーションツールでは、ユーザーやグループを壁で隔てれば隔てるほど、情報共有が進まず、共同作業がしにくくなり、情報がサイロ化してしまいます。しかし、壁を取り払ってしまうと、秘密やプライバシーの確保が難しくなります。安全性と利便性の両立に重要なことは、「壁の透明性」です。

ディスカッションの混線を防止するコミュニケーション整理術 ... 仕事で使うコミュニケーション・コラボレーションツールには、ユーザーや業務の最新状況をすぐに把握できることが求められます。そのためには、情報が分かりやすく整理されていることが大切です。

ソーシャルグラフ、インタレストグラフ、そしてワークグラフ ... TeamPageの「ソーシャルグラフ」のモデルを使って、業務の効率化や他システムとの連携について紹介します。

文字の装飾を除きテキストだけをコピー&ペーストする方法

2017/05/19 · · 投稿者 Takashi Okutsu

裸の王様イメージ (C) Public Domain http://publicdomainq.net/the-emperors-new-clothes-0003846/どこからかコピーしてきたテキストを TeamPage の記事作成/編集フォームへ貼り付けると、コピー元の装飾情報(書式)も貼り付けられ、文字が不要に大きく(あるいは小さく)表示されたりレイアウトが崩れたりすることがあります。

この問題は、次のようないろいろな場面で発生します。

  • Web ページの一部をコピーして記事の中に貼り付けるとき
  • Excel の一部データをコピーして記事の中に貼り付けるとき
  • メールの一部をコピーして記事の中に貼り付けるとき

この問題を避けるには、(1) 装飾を除いてテキストだけ貼り付けるか、(2) 装飾を除いてテキストだけをコピーするかのどちらかが必要です。

私は、普段、Google Chrome の Shift +Ctrl + V のショートカットで (1) の方法を使っていますが、先日、取引先でこの方法について話をしたところ、意外と皆さんに知られていないことがわかりました。

そこで、今回のブログでは、この「装飾までコピー&ペーストされちゃう問題」とその回避方法について説明・紹介いたします。

装飾までコピー&ペーストされちゃう問題とは

例えば、ニュースサイトで気になるニュースが見つかったとき、Web 上で仕事に役立つ資料を見つけたときなど、社内外で共有するために、Web に記載されている内容をコピーし、TeamPage のリッチテキストエディタに貼り付け(ペースト)て投稿することってありますよね。

ただ、コピー元に文字装飾(太字、色)、リンク、画像などが含まれる場合、これらの余計な装飾もコピーされ、貼り付け先の TeamPage のリッチテキストエディタにも反映されてしまいます。

例えば、下図のページの一部を選択してコピーし…

Akiba!PC Hotline ページの例

…TeamPage のリッチテキストエディタに貼り付けると、下図のように装飾や画像まで貼り付けられてしまいます。

TeamPageの投稿フォームへ貼り付けた例

装飾やレイアウトを含めて原文をそのまま引用するのであれば、これはこれで良いのですが、装飾は不要と言う場合もありますよね。

今回紹介する方法を知る以前の私は、一旦テキストエディタに貼り付けてから更にコピーを行っていました。テキストエディタは文字装飾を扱えないので、テキストエディタを経由させることで装飾を除去できるのです。でも、テキストエディタを経由させる分だけ作業が増えて面倒でした。

以下に紹介する方法では、テキストエディタは使いません。Web ブラウザーだけで完結するので作業が楽です。

回避方法 (1) テキストだけを貼り付ける

Google Chrome

この方法は、Google Chrome で利用できます。普通の貼り付けを行うショートカットキーは Ctrl + V ですが、これに Shift を加えて Shift + Ctrl + V を押します。これだけで装飾を除いたテキストだけを貼り付けられます。

上記のコピーしたデータを Shift + Ctrl + V で貼り付けると…ご覧の通り。装飾も画像もリンクも一切ありません。何と簡単で便利なのでしょう!

装飾を除いてテキストだけをペースト

Mac OSX Safari (2017/08/21 追記)

Mac OSX の Safari でもテキストだけの貼り付けができることを最近になって知りました。そのキーアサインは、 Shift + Option + Command + V です。4 つものキーを同時に押さねばなりませんが、プラグイン等をインストールすることなく標準機能として用意されているのが嬉しいですね。。

回避方法 (2) テキストだけをコピーする

Firefox で同様のことができるかどうか調べましたが、「貼り付けするときに装飾を取り除く」方法は見つかりませんでした。その代わり、アドオンを追加することで「コピーするときに装飾を取り除く」ことができるようになります。

書式などを除去して文字情報だけをコピーできるFirefox拡張「Copy Plain Text 2」

http://forest.watch.impress.co.jp/docs/review/649365.html

 通常「Firefox」などで“コピー”を行うと、選択された文字列の書式や、選択した範囲に含まれる画像までコピーされてしまう。Webブラウザーからワープロソフトなどに文字列を貼り付けた時、文字が太字になっていたり、側にあった画像が一緒に貼り付けられてしまったことがある方もいるだろう。

 「Copy Plain Text 2」を使えば、選択範囲の中からテキストだけを装飾のないプレーンな情報として簡単にコピーすることができる。本拡張機能を有効にし、設定を行うと「Firefox」などのコンテキストメニューに[テキストのみをコピー]項目が加わる。この項目でコピーを行えば、クリップボードへ送られる際に、文字列以外の情報を取り除くことが可能。

ただし、私の Windows と Linux 版の Firefox 53 では、類似の Copy Pure Text というアドオンをインストールするまで、コンテキストメニューに [テキストのみコピー] が出現しませんでした。Mac 版 Firefox では下図のように問題なく表示されました。

Firefox Copy Plain Text 2

回避方法 (3) 貼り付けた後に装飾を除去する

それほど込み入った装飾やレイアウト情報が含まれていない場合は、リッチテキストエディタに貼り付けた後、[書式をクリア] を実行するのも手です。

書式をクリアしたい範囲を選択し、右クリックして表示されたメニューから [書式をクリア] を選択します。

書式のクリアを選択

クリアされるのは書式だけで、<table> のテーブルレイアウト、<div> の入れ子構造、<img> の画像などはクリアされませんので、単純にテキストだけコピー&ペーストしたいならば、やはり上記の (1) か (2) の方法をオススメします。

まとめ

最もオススメできる方法は、Google Chrome を使う (1) の方法です。コピー時ではなく貼り付け時に装飾が除去されるので、コピー元がブラウザーでも Word でも Excel でもメールアプリでも何でも OK です。

Firefox を使う方法 (2) は、ショートカットキーをある程度自由に設定できたり、コピー時に空白文字(スペース)を除去できるなどの長所があります。

残念ながら Internet Explorer や Edge で実現する方法は見つかりませんでした。テキストエディタを仲介させるしか方法がないのかもしれません。良い方法をご存じの方はぜひ教えてください。

業務で使いやすくなるように、タスクを拡張(カスタマイズ)しよう

2017/04/27 · · 投稿者 Takashi Okutsu

フォームの拡張性イメージTeamPage では、「標準的な記事」「タスク」「予定(スケジュール)」などの「投稿の種類」ごとに、それぞれの投稿/編集フォームが用意されています。

そして、フォーム毎に利用できる選択欄・入力欄(=デザイン)が異なります。例えば、タスクのフォームには「担当者」や「締切日」の選択欄があり、予定のフォームには「参加者」の選択欄や「場所」のテキスト入力欄があります。

これらのフォームは、目的に応じてカスタマイズし、種類を増やせます。今回のブログ記事では、この拡張性についてご紹介します。

電話対応にタスクを使う

例えば、「お客さんから電話がかかってきたときに担当者が不在だった。担当者に折り返しの電話をするように伝えたい。」というケースを考えてみましょう。

電話対応のイメージ

イメージ画像 by ぱくたそ

「折り返しの電話をする」という仕事を依頼するわけですから、これは「タスク」の一種です。タスクの投稿フォームを表示して、担当者を選択、伝言内容や折り返し電話番号などを記入して投稿しましょう。予めテンプレートを用意しておくと、記入の手間とかかる時間を大幅に省けます。タスクを投稿すると自動的に担当者に通知されるので、対応モレを防げます。

タスクを使って不在電話のメモを残す例

さらに、タスクに「電話」タグを付けておくと、電話のタスクだけを簡単に抽出してダッシュボードに掲載・共有できるようになるので便利です。

電話の To Do タスク一覧の例

電話対応用にタスクを拡張する

このように、タスクを使って電話対応業務を管理・共有・可視化できます。

しかし、タスクの一般的な「何かやるべきこと」のための機能です。電話の用件を選択するためのドロップダウンリストや、折り返し電話番号を入力するためのテキストボックスは用意されていません。

それならば、用件のドロップダウンリストや折り返し電話番号の入力欄を「パーツ」として追加し、「電話メモ用のタスク」の投稿/編集フォームを作ってしまおう!と考えて作成したものが「電話メモ」プラグインです。

下図は、その投稿/編集フォームの例です。ご覧の通り、「用件」のドロップダウンリストや「折り返し電話番号」のテキスト入力欄が追加されています。

電話メモの投稿/編集フォーム例

追加できる入力・選択パーツ

投稿/編集フォームに追加できる入力欄や選択欄には、主に次のものがあります。(他にもあります)

  • 標準的なテキストボックス
  • チェックボックス
  • ドロップダウンリスト
  • ユーザー選択(入力補完機能付き)
  • 日付
  • 時刻
  • 時間
  • タグ選択(入力補完機能付き)
  • タグ選択(ドロップダウンリスト型)
  • 他の記事との関連設定(入力補完機能付き)
  • 優先度ドロップダウンリスト(p1 〜 p4 のタグ選択)
  • リッチテキスト エディター(TinyMCE)
  • 添付ファイルの追加や削除
  • 記事の名前(Wiki リンク)の設定
  • などなど…

入力モレや選択モレを防ぐため、それぞれのパーツごとに、入力・選択を必須化するかどうかを設定できます。

また、細かな動作の拡張や制限ができるようになっています。私がよく行うのは、ドロップダウンリストに表示される選択肢を管理者やユーザーが設定・変更できるようにしたり、テキストボックスに数字だけを入力できるようにしたりすることです。

その他いろいろな業務用の投稿/編集フォーム

タスクの拡張(カスタマイズ)は、電話対応業務以外にも、製品の不具合修正、クレーム対応、不足しそうな在庫品の補充などなど、いろいろな業務にもどんどん応用できそうですよね。

ここでは、クレーム管理、備品管理、物品購入申請の 3 つのフォームを紹介します。いずれも標準的なタスクを拡張(カスタマイズ)したものです。

クレーム管理

クレーム管理用にカスタマイズされたタスクフォーム

備品管理

備品管理用にカスタマイズされたタスクフォーム

物品購入申請

物品購入申請用にカスタマイズされたタスクフォーム

これらの他にも、当サイトのプラグインの紹介ページサポートサイトのプラグインコーナーで、カスタマイズした投稿/編集フォームを含むプラグインを多数公開しています。ぜひご覧になってください。

まとめ

日々の業務にはたくさんの種類の「何かやるべきこと」があります。基本的なタスクで大部分を管理できますが、その業務専用にカスタマイズしたタスクを使ったほうが進めやすく、管理しやすくなるものもありますよね。

そのようなとき、投稿/編集フォームのカスタマイズを検討してみてください。基本的なカスタマイズ方法はサポートサイトで公開しています。もちろん、当社へのカスタマイズ依頼も随時承っています。質問などがありましたら、フォーラムやお客様用サポートスペースへお気軽にどうぞ。

関連記事

電話メモ プラグイン ... 他のユーザー宛にかかってきた不在電話の伝言を残し、担当者に通知ためのアプリです。必要に応じて対応期限や優先度を設定でき、対応の重要性や緊急性を管理できます。

クレーム管理 プラグイン ... 顧客や取引先からのクレーム内容と、対応日時、対応担当者、対応内容などを記録・蓄積・共有しましょう。是正・予防措置などの次のアクションへ起こして顧客満足度を向上させられます。

備品管理 プラグイン ... 社内の備品についての、交換期限、担当者、対応内容などを記録・蓄積・共有するためのアプリです。過去の事例を参照することで、トラブル発生時の対応をスピードアップできます。

物品購入申請 プラグイン ... 物品の購入申請や決裁の進捗確認のためのプラグインです。会計の承認や発注などの進行状況を設定でき、物品購入の初めから終わりまでを管理できます。

問い合わせ管理 プラグイン ... 顧客や取引先等からの不具合報告、質問、クレーム等の問い合わせをチケットとして管理します。担当者にはアラート通知され、対応モレを防ぎます。

アンケート作成&回答フォーム プラグイン ... 選択式のアンケートを実施するためのプラグインです。択一式/複数選択式、公開/非公開アンケート、次のアクション登録など、いろいろな機能をサポートします。

証明書発行申請フォーム プラグイン ... 各種証明書の発行申請の受付や対応状況を管理するためのプラグインです。主に総務部や人事部などでの使用を想定していますが、他の部署でも利用可能です

チーム パフォーマンス向上を目的としたタスク トラッキング ... 仕事を効率化してチームワークを高めるための、タスクやプロジェクト管理機能の紹介です。

チームのコラボレーションを促進するタスクトラッキング ... 自分やチームメンバーのアクション プラン、状況、仕事量、各メンバーの進捗、チーム全体の進捗を簡単に確認することで、共通のゴールに向けた各種活動をスムーズに進められます。

「To Do タスク リスト」と「ワークリスト」の違いについて ... TeamPage には「タスク」と「ワークリスト」という 2 種類の「やるべきこと一覧」機能があります。その違いについて解説します。

ソーシャルグラフ、インタレストグラフ、そしてワークグラフ ... TeamPageの「ソーシャルグラフ」のモデルを使って、業務の効率化や他システムとの連携について紹介します。

ディスカッションの混線を防止するコミュニケーション整理術

2017/02/24 · · 投稿者 Takashi Okutsu

ディスカッション イメージ図最近、あるお客様からグループウェアとチャットツールについての相談を受けました。

このお客様は、これまでグループウェアの「掲示板」に取引先ごとのスレッドを立てて、商談や訪問などの報告をコメントするやり方で社内の情報共有を図ってきました。スレッド内の最新コメントを読めば、その取引先の最新状況がわかる仕組みです。

しかし、次のような問題がありました。

コミュニケーションツールの2つの問題点

1. いくつかの話題が入り混じり、話が混乱する

話題が入り混じって混乱する

ディスカッションが進む過程で、しばしばいくつかの話題に分かれることがあります。同じスレッド内で複数の話題が同時進行し、誰がどの発言に対してコメントしているのかがわかりにくくなり、混乱します。

話題ごとにスレッドを分けると混乱は収まりますが、今後は元のスレッドとの関連が途切れてしまいます。

2. 話題やアクションの繋がりが失われる

ディスカッションと次のアクションが分離・サイロ化

ディスカッションの過程で次にやるべきことが発生した時は、「掲示板」から「To Do」へと場所を移してタスク登録します。両者は別々の機能なので、別々にサイロ化し、関連が途切れます。話の流れも分断されてしまいます。

例えば、タスクを依頼されたとき、その背景を知るためには、掲示板の元のスレッドに移動して、スレッドの中から特定のコメントを見付けなければなりません。

逆に、掲示板のスレッドで「この後、誰がどのようなアクションを行ったのか」を知るには、「To Do」へ移動して該当のタスクを見付けなければなりません。

コミュニケーションの整理に必要なこと

この2つの問題は、特定のグループウェアだけのものではなく、多くのコミュニケーションツールにみられます。このお客様は、今流行のチャットツールもいくつか検討したものの、上記の問題の解決にはならないだろうと判断しました。

そして、代わりに注目したものは、TeamPage の次の機能や特徴でした。

1. ツリー型の階層コメントで混線防止

TeamPage では、あらゆる投稿にコメント、子コメント、孫コメント…とツリー構造の階層的なコメントができるように設計されています。ツリー構造なので、話題が分かれたときの混乱を抑制できます。

ツリー構造の階層コメント

また、「最新スレッド」画面には、各スレッドの最新コメントの投稿者、投稿日時、内容と共に合計コメント数も表示されます。複数の話題が同時進行しても混乱や漏れが発生しにくい工夫が施されています。

最新スレッド

2. どこからでも次のアクション登録

ディスカッションの過程で次にやるべきこと(To Do)が発生した時は、記事やコメントだけでなく、記事や段落内の各段落にもタスクや予定を登録できます。

段落にタスクを登録した例

階層化されたツリー構造が話題の混線防止に役立つとしても限度があります。数十件もコメントが追加されれば、いくらツリー構造になっていても階層が深くなりすぎて話の流れを追いにくくなることがあります。

そんなとき、「次にやること」を延々とコメントとして追加し続けるのではなく、新しいタスクとしてスレッドを分けましょう。スレッドが分かれても大丈夫。元の発生ポイントにタスクがぶら下がるので、関連性は明確なまま、「ここまで議論してきた結果、新しいタスクが発生し、タスク内でディスカッションが進み…」という仕事の流れが整理されます。

元の記事(段落)と新しいタスクとは常にリレーションシップで繋がっています。元のスレッドから新タスクのスレッドへの移動や、新タスクから元のスレッドへ移動も簡単です。

タスク内の引用で発生ポイントを確認

3. 時系列なタイムラインでディスカッションの流れを把握

ツリー構造はコメントの階層構造の表現や混線防止にはとても役立ちますが、たくさんのコメントが投稿されたとき、コメントの時間的な順序がわかりにくくなることがあります。ツリー構造の中に登録されたタスクや予定の発生順序も同様です。

タイムライン履歴プラグインは、この問題を解決します。

タイムライン画面では、スレッド中のコメント投稿、タスク登録、予定登録、タグ変更などが文字通り時間的な順序で並ぶので、ディスカッションの流れを追い、最新状況や結論をすばやく把握できます。

つまり、ツリー構造とタイムラインの両方をいいとこ取りできます。

ディスカッションのタイムライン

まとめ

仕事で使うコミュニケーション・コラボレーションツールには、ユーザーや業務の最新状況をすぐに把握できることが求められます。そのためには、情報が分かりやすく整理されていることが大切です。

TeamPage のコメント・スレッド機能や、どこでもアクション機能は、このような情報の整理にピッタリです。

ぜひ TeamPage をディスカッションの混線防止やコミュニケーションの整理にお使いください。

関連記事

「灰色の枠メニュー」って何?目立たせて記事や段落への操作をしやすくする方法 ... 薄い灰色をしているため、目立たず、気が付きにくい「灰色の枠メニュー。これを「赤い枠メニュー」にしてもっと目立つようにすると、段落への操作がやりやすくなります。

チーム作業を効率化するポイントは「情報を散在させず、1箇所にまとめる」こと ... 社内の情報共有を進めるには、必要な情報がすばやく一箇所で得られることが大切です。カスタマイズの自由度の高いダッシュボードやその他の機能で、使いやすい情報共有環境を作りましょう。

会議の「次にやること」も一ヶ所で管理して議事録をもっと活用する方法 ... TeamPage の「アクティブ議事録」では、議事録へのコメント追加だけでなく、付箋の追加、進捗を共有、タスク (To Do) や予定の計画や実行が可能です。議事録の一ヶ所で、場所を移さずに「次のアクション」を実行できます。

フロー型とストック型の「いいとこ取り」をするには ... リアルタイムの会話に向いているとされる「フロー型」のツール。繰り返し読んだり引用したりと後から活用しやすいとされる「ストック型」のツール。TeamPage は、どちらでも使えるように設計されています。

ソーシャルグラフ、インタレストグラフ、そしてワークグラフ ... TeamPageの「ソーシャルグラフ」のモデルを使って、業務の効率化や他システムとの連携について紹介します。

顧客との密な連携の上で業務改善を実現する「impi!」ソリューションの紹介

2017/02/03 · · 投稿者 Takashi Okutsu

Mr. Pierre Bienvenüe (impi)ピエール=ビヤンヴニュ氏 (Pierre Bienvenüe LinkedIn) は、南アフリカの業務改善コンサルタント事務所「impi」の創立者で、2012 年以来、TeamPage のソリューション・パートナーです。南アフリカ各地で中堅企業を中心に品質改善プログラムを提供し、業務改善の構想、運用開始、そして品質改善活動そのものの改善に、顧客と共に取り組み続けています。

この「impi!」は、TeamPage プラットフォームの上に構築される業務改善ソリューションです。ピエール氏は、当社のパートナーとなって以来、TeamPageの業務用テンプレート、プラグイン、使い方の開発などに強力いただいています。業績も好調です。

今回のブログ記事では、このピエール=ビヤンヴニュ氏と「impi!」業務改善ソリューションをご紹介します。

「impi」とは?

「Impi」とは、ズールー語 で「戦士の身体」を意味する言葉です。

19世紀の初め、南アフリカの比較的小さい勢力であったズールー部族は、勢力を拡大して王国となりました。そして、王国を統治したシャカ王のリーダーシップの影響により、その影響は南アフリカ全体に及びました。シャカ王は、伝統的に引き継がれてきた戦術を革新します。その範囲は、戦士団「impi」の組織構造と配備、指導力、訓練、敏捷性、兵站、兵器など、軍事関係のあらゆる面に及びました。シャカ王の改革は、規律(標準化)と創造性の向上を特徴とします。

シャカ王による戦士団の改革の影響は、彼の死後71年間も続き、1879年のイサンドルワナの戦いで英国軍を破りました。「英国軍は緒戦のイサンドルワナの戦いで槍と盾が主兵装で火器をほとんど持たないズールー軍に大敗を喫して思わぬ苦戦を強いられた。」 (WikiPedia)。

「impi!」ソリューションとは

impi! logo「impi!」は、TeamPage のプラットフォーム上で構築・運用される、業務プロセスの計画、サポート、管理、改善のための一連の改善ソリューションです。継続的な業務改善活動を基礎として、ISO 9001 準拠(品質管理規格)の業務管理システムを構築するための、自律的・計画的なアプローチ集です。規律と創造の改善活動を通じて、それぞれの従業員を「自ら考える人」に育成します。

しばしば業務改善活動は、「上から押し付けらる面倒なこと」と考えられることがありますが、「impi!」ソリューションでは会社と従業員とは敵同士ではありません。本当の敵は、ビジネスを進める中でのリスクやプロセスの中に潜んでいるムダです。ズールー戦士が槍や盾で武装して戦力を高めたように、「impi!」ソリューションは問題解決力や標準化で組織や従業員の戦力を向上させます。

「impi!」のロゴは、頭文字の「i」とエクスクラメーション記号「!」と合わせたものです。回転対称になっており、PDCA のような、標準化された、継続的な改善活動の意味が込められています。また、末尾のエククラメーション記号「!」は、ズールーの戦士たちの、圧倒的な力強さや胸高鳴る存在感を表しています。

TeamPage 上の「impi!」ソリューション概要

すべての impi! ソリューションは、ポリシー(理由)と標準作業手順(方法)を決定することから始まります。

これらの標準ドキュメントは、TeampPage の中に Wiki として作成・構築・整備されます。それぞれのドキュメントが、自転車の車輪のスポークのように、他のすべてのドキュメントへと繋がるハブの役割を果たすことが重要です。

ネットワーク化されたドキュメントのイメージ

しかし、組織内のシステムにナレッジが蓄積されているはずなのに、まとまっておらず、お互いに繋がっていないため、ナレッジをうまく活用できないケースが多々あります。すなわち、ナレッジの断片化です。

この問題は、TeamPage を使用することで解決できます。TeamPage では、ドキュメント同士の相互リンクやタグ付けが簡単にできるからです。これらの機能を使って、自社製の、ISO 9001 に準拠した Wikipedia 的ナレッジベースを確実に構築できます。ムダな文書作成のリスクが軽減され、チームメンバーよって作成されたドキュメントは、相互リンク、タグ付け、そして検索機能で繋がり、コンテキストとしてのナレッジを形成します。

「impi!」ソリューションのセットアップ作業では、まず、コンサルタント側(ピエール氏)が、コンサルタントを受ける側の顧客の環境に TeamPage と関連プラグインをインストールします。そして、必要な設定を行い、業務プロセス改善ソリューションを構築します。

コンサルタントも TeamPage にユーザーとして参加します。コンサルタントと顧客が同じ TeamPage の中で仕事をするところがミソです。コンサルタントは、リモートで TeamPage へアクセスして顧客の活動を把握し、潜在的な問題や機会を認識したり、質問に回答したり、問題を解決したりできるのです。このようにして、「impi!」は、その業務改善活動を成功へと導いています。

impiソリューション紹介イメージ

ソリューション関連プラグイン

当社は、ピエール氏の協力の下で、主に次のプラグインの開発や改善を行ってきました。これらのプラグインは、「impi!」ソリューションの中だけでなく、幅広い業種・業務でご利用頂けます。

品質管理モジュール

ISO 9001 準拠の品質管理業務をスムーズに行うためのエッセンスを取り入れました。標準作業手順書の管理から是正措置の追跡まで、品質管理の情報が分断されません。

品質管理〜フィードバックまとめ画面

署名要件モジュール

署名や決裁の要求・実行・管理するためのプラグインです。「これを読んでおいてください」「これを社内に公開して良いですか?」「改訂内容はこれでOKですか?」など、ユーザーやグループ(例えばマネージャーや上司など)の確実な承認が必要なあらゆる用途に使用できます。

署名要件モジュール

会議のシリーズ化プラグイン、改善機会の管理プラグイン

Coming soon!

まとめ

以上、TeamPage を IT プラットフォームとして使用し、多くの企業組織で業務改善活動を行っているピエール氏と「impi!」ソリューションをご紹介しました。さらに詳しい内容についてご興味のある方は、当社までお問い合わせください

また、当社では、ソリューション実現のプラットフォームとして TeamPage をお考えの、互いに信頼・協力・成長できるパートナー企業様(フリーランスの方でも結構です)を募集しております。ぜひお気軽にご連絡ください

関連記事

品質管理ソリューション ... 標準作業手順書の管理から是正措置の追跡まで、品質管理の情報が分断されません。ISO 9001コンプライアンス業務をスムーズに進められます。

品質管理モジュール プラグイン ... TeamPageで ISO 9001 品質管理業務を進めやすくするための工夫が詰められたプラグインです。

署名要求モジュール プラグイン ... TeamPageで署名や決裁の要求・実行・管理するためのプラグインです。情報公開の承認や、業務プロセスの履行チェック、あるいはマニュアルの改訂内容などの確認などを、ユーザーやグループ(例えばマネージャーや上司など)の確実な承認が必要なあらゆる用途に使用できます。

TeamPage 6.1.10 | 新しい署名要求モジュールと改善された統合検索機能 ... 「署名要求モジュール プラグイン」は、TeamPage 6.1.10 以降のバージョンで使用できます。この記事では TeamPage 6.1.10 のアップデート内容を紹介します。

ソーシャルグラフ、インタレストグラフ、そしてワークグラフ ... TeamPageの「ソーシャルグラフ」のモデルを使って、業務の効率化や他システムとの連携について紹介します。

会議の「次にやること」も一ヶ所で管理して議事録をもっと活用する方法

2016/11/28 · · 投稿者 Takashi Okutsu

「議事録」についてググってみる先日、議事録プラグインを使った、TeamPageでの議事録の作成と活用の方法についての紹介ビデオを公開しました。その流れで議事録についてGoogleで検索したところ、どうも一般的には、「議事録の活用」とは「後から読んで会議の内容を理解すること」や「欠席者へ回覧すること」だ、と考えられていることがわかりました。

しかし、これは「活用」なのでしょうか?どちらも「過去の記録を読む」ということには変わりありません。もっと「未来に向かって」活用する方法はないのでしょうか?

議事録は書き込み不可?

議事録を「書き込み可能」にして活用しよう

Photo by ぱくたそ

「議事録の作成が面倒」とか「議事録を作っても誰も読まない」などと時々耳にします。回覧して読んでくれたとしても、その後はどうでしょうか。社内イントラに静かに眠るだけな場合も多いのではないでしょうか。

せっかく時間と労力を割いて作成した議事録なのですから、死蔵するのはもったいないのですよね。でも、死蔵することになってしまうのには理由があるのです。

それは、議事録が「書き込み不可」という前提と仕組みで作られていること。作成されたときの状態で(誤字脱字の修正など細かな変更は除いて)残し続けなければならないと考えられていませんか。また、会議で決まったことのフォローアップはどのように行っていますか?メールやイントラの掲示板など、議事録から場を移して行っていませんか?

本当の「活用」のためには、これらの前提を捨てましょう。

書き込み歓迎!アクティブ議事録

TeamPageでは、議事録にコメントを加えてディスカッションしたり、付箋を貼ったり、進捗を共有したり、次のアクションや予定を立てたりできます。議事録の一ヶ所で、場所を移さずに「次のアクション」を実行できるわけです。

このような次の仕事にどんどん活かせる議事録を、静的に死蔵されている普通の議事録の反対の意味で、「アクティブ議事録」と名付けました。

アクティブ議事録は、会議で決まったことを記録するだけでなく、会議の後のフォローアップまでを共有する場です。「前回の会議、その後どうなっているのかな?」と進捗が気になったら、アクティブ議事録を確認しましょう。誰がどのようなフォローアップを行ったのか(行っているのか)が明確にわかります。

議事録が、死蔵されるべき文書ではなく、次のアクションの出発点になるわけです。

活用法 (1) 〜 会議の前

それでは、ここでTeamPageのアクティブ議事録の活用方法を紹介しましょう。

アジェンダとして配布する

アジェンダとは、討議内容や議題のことですね。通常は会議の前に決まっており、会議の参加者全員が前もって共有すべきものです。会議の効率的な進行には欠かせません。

会議を予定登録するとき、会議の内容を書くようにしましょう。文書ファイルや画像も添付できるので便利。参加者へ自動的に通知されるので、参加者は通知内容を読むだけで会議の内容を予め把握できます。

前もってアジェンダとして配布する(ファイル添付OK)

活用法 (2) 〜 会議の後

議事録の回覧・共有

会議が終わったら、会議予定として登録(投稿)済みの記事を編集するか、またはコメントして、議事録に仕上げます。編集やコメントの内容は自動的に参加者に再通知されるので、いちいち回覧する手間が省けます。検索やカレンダーで議事録を見つけるのも簡単です。

ここまではよくある「活用」方法ですが、さらにTeamPageの「アクティブ議事録」では次のような「活用」ができます。

タグ付けしてポイントを絞る

議事録の記事だけでなく、各段落にもタグ付けできます。長い議事録でも、どこにポイントがあるのかが分かりやすくなります。

それから、より見やすくするためにタグにはアイコンを設定しておきましょう。

権限設定で特定のユーザーだけにタグ付けを許可することもできます。

段落ごとにタグ付けできる

簡単なToDoチェックリストを作れる

上記の「段落ごとのタグ付け」機能の応用です。段落ごとに「to do」タグを付けることで、議事録の中に簡単なチェックリストを作成できます。

完了したときはチェックボックスをクリックするだけ。タグが「to do」から「done」に変わり、会議の参加者に自動的に通知されるので、進捗を別途メールやチャットで報告する必要がありません。

todo/done リスト

議事録の適切な位置にコメントできる

段落にはコメントもできます。コメント中の段落にも階層的なコメントができるので、議事録の中の適切な位置でディスカッションが可能になります。

スレッドが長くなっても大丈夫。コメントの▼アイコンをクリックしてスレッドを折りたたんだり、コメントを非表示にしたり、あるいはコメントのスレッドを議事録から独立させたりすることだって可能です。

段落ごとにコメント・ディスカッション

次のアクションを登録できる

議事録に関連する何かを別スレッドにしたいときは、予定(スケジュール)やタスク(To Do)として段落に登録しましょう。予定の中でもタスクの中でも、コメントやタグ付け機能を利用できます。

次回の会議の前には、この議事録で進捗を確認しましょう。会議で決まったことを誰がどのようなスケジュールで実行したのかが一目瞭然です。

会議の貴重な時間を関係者からの進捗報告に割くことも多いと言われます。アクティブ議事録があれば進捗報告の時間は必要なくなり、その時間をディスカッションに充てるなどして、会議を効率化できます。

段落に予定やタスクを登録

まとめ

TeamPageのアクティブ議事録なら、フォローアップのやり取りと議事録とが一ヶ所で管理されているので、情報が散らばりません。

会議のフォローアップのやり取りの中で、元の議事録を読み直すことがしばしばあると思いますが、TeamPageではすべてやり取りを議事録に関連付けられます。やり取りをたどれば議事録へ繋がるので、議事録を簡単に見付けられます。

ぜひTeamPageのアクティブ議事録を皆様の業務に取り入れてみてください。

関連記事

会議のムダを省く「スマート会議」で、議事録、決定事項、フォローアップの共有のススメ ... 「よくある会議のムダ」を解決するためのソリューションです。TeamPage の基本的なタスク管理機能や情報共有機能を応用・活用し、直感的で使いやすく設計されています。

チーム作業を効率化するポイントは「情報を散在させず、1箇所にまとめる」こと ... 社内の情報共有を進めるには、必要な情報がすばやく一箇所で得られることが大切です。カスタマイズの自由度の高いダッシュボードやその他の機能で、使いやすい情報共有環境を作りましょう。

議事録フォーム プラグイン ... 議事録を作成・編集・管理しやすくするプラグインです。会議の内容を共有するだけでなく、補足事項をコメントしたり次にやることをタスク登録したりできます。

アルコア社の事例: ITプロジェクトとコンプライアンスへの対応 ... 会議の時間を80%も削減し、ITシステムの更新プロジェクトを成功させた事例です。

プロジェクト管理ソリューション ... 段落タグによるToDoリストやタスク管理などをご紹介しています。

ソーシャルグラフ、インタレストグラフ、そしてワークグラフ ... TeamPageの「ソーシャルグラフ」のモデルを使って、業務の効率化や他システムとの連携について紹介します。

表示数       

Page Top