メインコンテンツまでスキップ

ダッシュボードのウィジェットを利用して管理画面の表示を編集する

概要​

Kurocoの管理画面は通常版と簡易版の2種類があります。 どちらもダッシュボードのウィジェットで表示の編集ができますので、その方法について説明します。

学べること​

以下の手順でダッシュボードの表示を編集します。

前提条件​

管理画面の通常版・簡易版は所属するグループの設定よって制御されます。

Image from Gyazo

また、それぞれのデフォルトの表示は以下です。

  • 通常版(高機能)
    メンバーが持つ権限の機能がすべて表示されます。
    スーパーユーザーの場合は全ての機能が表示されます。
    Image from Gyazo

  • 簡易版
    ダッシュボードのウィジェットの機能を利用することを前提としているためデフォルトでは何も表示されません。
    Image from Gyazo

本チュートリアルを始める前提として、表示を確認するためのメンバー及びグループは事前に設定してあるものとします。

ダッシュボードに表示するファイルを準備する​

通常版・簡易版共に、システムの利用手順を示したPDFへのリンクを管理画面に表示します。
そこでまずはKurocoのコンテンツに操作マニュアルを保存します。

コンテンツ定義を追加する​

[コンテンツ定義]をクリックします。

Image from Gyazo

[追加]をクリックします。

Image from Gyazo

以下の内容を設定します。

項目設定
名前操作マニュアル
ID=1項目設定：ファイル(Kurocofilesに保存)
項目名：ファイル
識別子：なし
繰り返し回数：1
編集権限管理者

Image from Gyazo Image from Gyazo Image from Gyazo Image from Gyazo

設定ができたら[追加する]をクリックしてコンテンツ定義を追加します。
コンテンツ定義IDは後ほど使用するのでメモしておきます。

Image from Gyazo

コンテンツを追加する​

コンテンツ一覧の画面から[追加]をクリックします。

Image from Gyazo

以下を入力し、[追加する]をクリックします。

項目内容
タイトル任意のタイトル
ファイル任意のPDFファイル

Image from Gyazo Image from Gyazo

同様にいくつかコンテンツを保存します。
以上でファイルの設定は完了です。
次のステップから通常版・簡易版のダッシュボードの編集方法を説明します。

通常版の管理画面を編集する​

Kuroco管理画面の表示は通常版(高機能)と簡易版があり、グループの機能でどちらを表示するかを設定できます。

Image from Gyazo

通常版を選択した場合は、メンバーの持つ権限によって、ダッシュボード及び、サイドメニューの内容が変化します。
そこで、ダッシュボードのウィジェットを追加する前に、権限の設定でサイドメニューの表示を調整する方法もあわせて紹介します。

グループの権限を調整する​

通常版の管理画面の場合、サイドメニューの項目は自身が権限を持つ項目のみが表示されます。
表示は自動で変わりますので、グループの権限を調整して、対象のメンバーの持つ権限を絞ります。

[メンバー管理] -> [メンバー]をクリックします。 Image from Gyazo

メンバー一覧からグループ名をクリックします。
Image from Gyazo

以下を設定し、[更新する]をクリックします。

項目内容
名前任意の名前
ユーザー種別編集ユーザー
管理画面通常版(高機能)
権限設定以下の項目に「閲覧」「新規作成」「更新」「削除」の権限を与える。
  • コンテンツ
  • フォーム
  • 配信
  • メンバー
  • 自分のメンバー情報
  • メールひな形編集
  • マイページ

Image from Gyazo

以上で、サイドメニューに表示される内容が変化します。

ダッシュボードのウィジェットを追加する​

次にダッシュボードのウィジェットの機能で事前に作成したPDFへのリンクを表示します。
[環境設定] -> [ダッシュボードのウィジェット]をクリックします。

Image from Gyazo 追加をクリックします。

Image from Gyazo

以下のように設定します。

項目内容
名前任意の名前
HTML以下のコード
アクセス制限Developer
管理画面通常版
公開設定公開
マニュアルはこちらからご確認いただけます。<br>
{capture name='manual_method_params'}
{ldelim}
"topics_group_id":[9]
{rdelim}
{/capture}
{api_method
  var='manual_topics'
  model="Topics"
  method="list"
  version="1"
  method_params=$smarty.capture.manual_method_params|json_decode}
{if !$manual_topics.list|@is_array||$manual_topics.errors|@count>0}
  <p>ファイルを取得できませんでした。</p>
{else}
  <ul class="manual_list">
  {foreach from=$manual_topics.list item='topics'}
    {if $topics.ext_1|@empty}
      {continue}
    {/if}
    <li><a href="{$topics.ext_1.url|escape}" target="_blank">
      {$topics.subject|escape}
    </a></li>
  {/foreach}
  </ul>
{/if}

{literal}
<style>
.manual_list {
    list-style-type: disc;
}
</style>
{/literal}
ヒント

ダッシュボードのウィジェットではstyleタグでcssを書く事ができます。
また、Smarty及び、KurocoのSmartyプラグインの利用も可能です。

注意

"topics_group_id":[9]の部分はご自身のコンテンツ定義IDを使用してください。

Image from Gyazo Image from Gyazo

入力ができたら[追加する]をクリックしてダッシュボードのウィジェットを追加します。
ここで追加した通常版向けのウィジェットはダッシュボード上の「管理メモ」の上部に表示されます。

管理画面の表示を確認する​

対象のメンバーで管理画面にログインすると、設定した表示が確認できます。

Image from Gyazo

簡易版の管理画面を編集する​

簡易版の管理画面はダッシュボードのウィジェットを利用することを前提としており、デフォルトの状態では何も表示されません。
その代わりに、自由にHTMLを記述して管理画面の表示を作成できます。

ダッシュボードのウィジェットを追加する​

[環境設定] -> [ダッシュボードのウィジェット]をクリックします。

Image from Gyazo 追加をクリックします。

Image from Gyazo

以下のように設定します。

項目内容
名前任意の名前
HTML以下のコード
アクセス制限選択なし
管理画面簡易版
公開設定公開
<div class="row">
  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <!-- Title -->
        <h2 class="card-header-title fw-bold h4">
          コンテンツ更新メニュー
        </h2>
      </div>

      <div class="card-body">
        <div class="row">
          <div class="col-12 col-lg-6 col-xl-4 mb-6">
            <div class="row d-flex align-items-center mb-2 px-2">
              <div class="col-auto">
                <!-- Avatar -->
                <div class="avatar avatar-sm">
                  <div class="avatar-title font-size-lg bg-primary-soft rounded-circle text--primary">
                    <i class="fe fe-edit"></i>
                  </div>
                </div>
              </div>
              <div class="col ms-n3">
                <h3 class="d-inline h4 fw-bold mb-0 text-secondary">
                  コンテンツ
                </h3>
              </div>
            </div>
            <hr />
            <ul class="list-group list-group-flush my-n3">
              <li class="list-group-item px-2">
                <div class="row">
                  <div class="col d-flex align-items-center">
                    <h3 class="d-inline h4 mb-0">資料</h3>
                  </div>
                  <div class="col-auto">
                    <a class="btn btn-sm btn-primary" href="/management/topics/topics_edit/?topics_group_id=7">
                      <i class="fe fe-plus me-1"></i>追加
                    </a>
                    <a class="btn btn-sm btn-outline-primary"
                      href="/management/topics/topics_list/?topics_group_id=7&contents_type=15">
                      <i class="fe fe-list me-1"></i>
                      一覧
                    </a>
                  </div>
                </div>
              </li>
              <li class="list-group-item px-2">
                <div class="row">
                  <div class="col d-flex align-items-center">
                    <h3 class="d-inline h4 mb-0">動画</h3>
                  </div>
                  <div class="col-auto">
                    <a class="btn btn-sm btn-primary" href="#!">
                      <i class="fe fe-plus me-1"></i>追加
                    </a>
                    <a class="btn btn-sm btn-outline-primary"
                      href="/management/topics/topics_list/?topics_group_id=7&contents_type=17">
                      <i class="fe fe-list me-1"></i>
                      一覧
                    </a>
                  </div>
                </div>
              </li>
              <li class="list-group-item px-2">
                <div class="row">
                  <div class="col d-flex align-items-center">
                    <h3 class="d-inline h4 mb-0">記事</h3>
                  </div>
                  <div class="col-auto">
                    <a class="btn btn-sm btn-primary" href="#!">
                      <i class="fe fe-plus me-1"></i>追加
                    </a>
                    <a class="btn btn-sm btn-outline-primary"
                      href="/management/topics/topics_list/?topics_group_id=7&contents_type=18">
                      <i class="fe fe-list me-1"></i>
                      一覧
                    </a>
                  </div>
                </div>
              </li>
              <li class="list-group-item px-2">
                <div class="row">
                  <div class="col d-flex align-items-center">
                    <h3 class="d-inline h4 mb-0">お知らせ</h3>
                  </div>
                  <div class="col-auto">
                    <a class="btn btn-sm btn-primary" href="/management/topics/topics_edit/?topics_group_id=1">
                      <i class="fe fe-plus me-1"></i>追加
                    </a>
                    <a class="btn btn-sm btn-outline-primary" href="/management/topics/topics_list/?topics_group_id=1">
                      <i class="fe fe-list me-1"></i>
                      一覧
                    </a>
                  </div>
                </div>
              </li>
            </ul>
          </div>

          <div class="col-12 col-lg-6 col-xl-4 mb-6">
            <div class="row d-flex align-items-center mb-2 px-2">
              <div class="col-auto">
                <!-- Avatar -->
                <div class="avatar avatar-sm">
                  <div class="avatar-title font-size-lg bg-primary-soft rounded-circle text--primary">
                    <i class="fe fe-send"></i>
                  </div>
                </div>
              </div>
              <div class="col ms-n3">
                <h3 class="d-inline h4 fw-bold mb-0 text-secondary">
                  キャンペーン
                </h3>
              </div>
            </div>
            <hr />
            <ul class="list-group list-group-flush my-n3">
              <li class="list-group-item px-2">
                <div class="row">
                  <div class="col d-flex align-items-center">
                    <h3 class="d-inline h4 mb-0">フォーム</h3>
                  </div>
                  <div class="col-auto">
                    <a class="btn btn-sm btn-primary" href="/management/inquiry/inquiry_edit/?inquiry_id=1">
                      <i class="fe fe-settings me-1"></i>設定
                    </a>
                    <a class="btn btn-sm btn-outline-primary" href="/management/inquiry/inquiry_bn_list/?inquiry_id=1">
                      <i class="fe fe-list me-1"></i>
                      回答
                    </a>
                  </div>
                </div>
              </li>
              <li class="list-group-item px-2">
                <div class="row">
                  <div class="col d-flex align-items-center">
                    <h3 class="d-inline h4 mb-0">配信</h3>
                  </div>
                  <div class="col-auto">
                    <a class="btn btn-sm btn-primary" href="/management/magazine/magazine_edit/?magazine_id=1">
                      <i class="fe fe-settings me-1"></i>設定
                    </a>
                    <a class="btn btn-sm btn-outline-primary" href="/management/magazine/magazine_sendmail_list/?magazine_id=1">
                      <i class="fe fe-list me-1"></i>
                      一覧
                    </a>
                  </div>
                </div>
              </li>
            </ul>
          </div>

          <div class="col-12 col-lg-6 col-xl-4 mb-6">
            <div class="row d-flex align-items-center mb-2 px-2">
              <div class="col-auto">
                <!-- Avatar -->
                <div class="avatar avatar-sm">
                  <div class="avatar-title font-size-lg bg-primary-soft rounded-circle text--primary">
                    <i class="fe fe fe-user"></i>
                  </div>
                </div>
              </div>
              <div class="col ms-n3">
                <h3 class="d-inline h4 fw-bold mb-0 text-secondary">
                  メンバー管理
                </h3>
              </div>
            </div>
            <hr />
            <ul class="list-group list-group-flush my-n3">
              <li class="list-group-item px-2">
                <div class="row">
                  <div class="col d-flex align-items-center">
                    <h3 class="d-inline h4 mb-0">メンバー</h3>
                  </div>
                  <div class="col-auto">
                    <a class="btn btn-sm btn-primary" href="/management/memberregist/memberregist_column_setting/">
                      <i class="fe fe-settings me-1"></i>設定
                    </a>
                    <a class="btn btn-sm btn-outline-primary" href="/management/member/member_list/">
                      <i class="fe fe-list me-1"></i>
                      一覧
                    </a>
                  </div>
                </div>
              </li>
            </ul>
          </div>

          <div class="col-12">
            <div class="row d-flex align-items-center mb-2 px-2">
              <div class="col-auto">
                <!-- Avatar -->
                <div class="avatar avatar-sm">
                  <div class="avatar-title font-size-lg bg-primary-soft rounded-circle text--primary">
                    <i class="fe fe-mail"></i>
                  </div>
                </div>
              </div>
              <div class="col ms-n3">
                <h3 class="d-inline h4 fw-bold mb-0 text-secondary">
                  メールひな形
                </h3>
                <small class="d-block text-muted mt-1">システムから送信するメールの文面を編集できます。</small>
              </div>
            </div>
            <hr />
            <div class="row">
              <div class="col-12 col-md-6 col-xl-3 mb-4">
                <div class="list-group list-group-flush my-n3">
                  <div class="list-group-item px-2">
                    <h3 class="h5 fw-bold mb-0">
                      ログイン・リマインダー
                    </h3>
                  </div>
                  <a href="/management/mailtemplateedit/mailtemplateedit_edit/?mailtemplateedit_id=62"
                    class="list-group-item px-2">
                    <h3 class="h5 mb-0">
                      ログイン時のセキュリティ通知
                    </h3>
                  </a>
                  <a href="/management/mailtemplateedit/mailtemplateedit_edit/?mailtemplateedit_id=77"
                    class="list-group-item px-2">
                    <h3 class="h5 mb-0">
                      リマインダー 仮パスワード発行
                    </h3>
                  </a>
                  <a href="/management/mailtemplateedit/mailtemplateedit_edit/?mailtemplateedit_id=76"
                    class="list-group-item px-2">
                    <h3 class="h5 mb-0">
                      リマインダー パスワード変更の完了
                    </h3>
                  </a>
                </div>
              </div>
              <div class="col-12 col-md-6 col-xl-3 mb-4">
                <div class="list-group list-group-flush my-n3">
                  <div class="list-group-item px-2">
                    <h3 class="h5 fw-bold mb-0">メンバー</h3>
                  </div>
                  <a href="/management/mailtemplateedit/mailtemplateedit_edit/?mailtemplateedit_id=83"
                    class="list-group-item px-2">
                    <h3 class="h5 mb-0">アカウント登録の完了</h3>
                  </a>
                  <a href="/management/mailtemplateedit/mailtemplateedit_edit/?mailtemplateedit_id=84"
                    class="list-group-item px-2">
                    <h3 class="h5 mb-0">アカウント情報編集の完了</h3>
                  </a>
                  <a href="/management/mailtemplateedit/mailtemplateedit_edit/?mailtemplateedit_id=80"
                    class="list-group-item px-2">
                    <h3 class="h5 mb-0">アカウント削除の完了</h3>
                  </a>
                  <a href="/management/mailtemplateedit/mailtemplateedit_edit/?mailtemplateedit_id=82"
                    class="list-group-item px-2">
                    <h3 class="h5 mb-0">
                      <span class="badge bg-secondary-soft me-2 p-2">管理者宛</span>アカウント登録通知
                    </h3>
                  </a>
                  <a href="/management/mailtemplateedit/mailtemplateedit_edit/?mailtemplateedit_id=85"
                    class="list-group-item px-2">
                    <h3 class="h5 mb-0">
                      <span class="badge bg-secondary-soft me-2 p-2">管理者宛</span>アカウント情報編集通知
                    </h3>
                  </a>
                </div>
              </div>
              <div class="col-12 col-md-6 col-xl-3 mb-4">
                <div class="list-group list-group-flush my-n3">
                  <div class="list-group-item px-2">
                    <h3 class="h5 fw-bold mb-0">フォーム</h3>
                  </div>
                  <a href="/management/inquiry/inquiry_edit/?inquiry_id=1" class="list-group-item px-2">
                    <h3 class="h5 mb-0">自動返信</h3>
                  </a>
                  <a href="/management/mailtemplateedit/mailtemplateedit_edit/?mailtemplateedit_id=75"
                    class="list-group-item px-2">
                    <h3 class="h5 mb-0">
                      <span class="badge bg-secondary-soft me-2 p-2">管理者宛</span>新着通知
                    </h3>
                  </a>
                </div>
              </div>
              <div class="col-12 col-md-6 col-xl-3 mb-4">
                <div class="list-group list-group-flush my-n3">
                  <div class="list-group-item px-2">
                    <h3 class="h5 fw-bold mb-0">メールマガジン</h3>
                  </div>
                  <a href="/management/mailtemplateedit/mailtemplateedit_edit/?mailtemplateedit_id=78"
                    class="list-group-item px-2">
                    <h3 class="h5 mb-0">登録の完了</h3>
                  </a>
                  <a href="/management/mailtemplateedit/mailtemplateedit_edit/?mailtemplateedit_id=79"
                    class="list-group-item px-2">
                    <h3 class="h5 mb-0">退会の完了</h3>
                  </a>
                </div>
              </div>
            </div>
          </div>

          <div class="col-12">
            <div class="row d-flex align-items-center mb-2 px-2">
              <div class="col-auto">
                <!-- Avatar -->
                <div class="avatar avatar-sm">
                  <div class="avatar-title font-size-lg bg-primary-soft rounded-circle text--primary">
                    <i class="fe fe-book-open"></i>
                  </div>
                </div>
              </div>
              <div class="col ms-n3">
                <h3 class="d-inline h4 fw-bold mb-0 text-secondary">
                  マニュアル
                </h3>
                <small class="d-block text-muted mt-1">以下のリンクから操作マニュアルをご覧いただけます。</small>
              </div>
            </div>
            <hr />
            <div class="row">
              <div class="col-12 col-md-6 col-xl-3 mb-4">
                <div class="list-group list-group-flush my-n3">

                {capture name='manual_method_params'}
                  {ldelim}
                  "topics_group_id":[9]
                  {rdelim}
                {/capture}
                {api_method
                 var='manual_topics'
                 model="Topics"
                 method="list"
                 version="1"
                 method_params=$smarty.capture.manual_method_params|json_decode}

                {if !$manual_topics.list|@is_array||$manual_topics.errors|@count>0}
                  <p>ファイルを取得できませんでした。</p>
                  {else}
                    {foreach from=$manual_topics.list item='topics'}
                      {if $topics.ext_1|@empty}
                        {continue}
                      {/if}
                      <a href="{$topics.ext_1.url|escape}" target="_blank" class="list-group-item px-2">
                        <h3 class="h5 mb-0">
                          {$topics.subject|escape}
                        </h3>
                      </a>
                    {/foreach}
                {/if}
                </div>
              </div>      
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

{literal}
<style>
h2 {
  font-size: 20px;
}
</style>
{/literal}
ヒント

ダッシュボードのウィジェットではstyleタグでcssを書く事ができます。
また、Smarty及び、KurocoのSmartyプラグインの利用も可能です。 管理画面に適用されているCSSはデベロッパーツール等でご確認ください。

注意

"topics_group_id":[9]の部分はご自身のコンテンツ定義IDを使用してください。

Image from Gyazo Image from Gyazo

入力ができたら[追加する]をクリックしてダッシュボードのウィジェットを追加します。

管理画面の表示を確認する​

対象のメンバーで管理画面にログインすると、設定した表示が確認できます。

Image from Gyazo

関連ドキュメント​

サポート

お探しのページは見つかりましたか？解決しない場合は、問い合わせフォームからお問い合わせいただくか、Slackコミュニティにご参加ください。

フォームから問い合わせをする
Slackコミュニティに参加する