課題実施状況一覧が確認できるようになります

WebClassの v11.12.1 で、学習記録ビューア コース活動状況画面から「課題実施状況一覧」が確認できるようになります。

score_summary_3.png

「課題実施状況一覧」にアクセスするには、ログイン後の画面で「コース活動状況」をクリックします。

score_summary_1.png

この画面で「課題実施状況一覧」をクリックします。

score_summary_2.png

教員がアクセスしたときは、以下のように、担当するコースでの全学生の課題実施状況が表示されます。学生のテストの得点なども確認できます。

score_summary_3.png

学生がアクセスしたときは、所属しているコースでの課題の締切、実施日、成績が表示されます。試験など成績非公開の教材は表示されません。

score_summary_4.png

v11.12.1 は3月2日にリリースされます。みなさんぜひ使ってみてください。

Firefox 97

Firefox 97 が 2月8日にリリースされました。

Firefox 97 release note

以下のリンクに主な変更点の情報が記載されています。

Pickup for WebClass

Webclass に影響ある箇所をピックアップします。

CSS プロパティcolor-adjustprint-color-adjust へと名称変更

color-adjust は印刷する際に追加するプロパティです。W3C では非推奨であり、print-color-adjust を使うように記載がありましたが、Firefox では今までサポートしてきました。WebClass の一部プラグインでは、 color-adjust を印刷カスタマイズ画面で使っていました。しかし、印刷される画面に大きな影響はありませんでした。

今後の Firefox リリースについて

次回のリリースは 3 月 8 日に予定されています。

Firefox Release Calendar

その他ブラウザのリリースはこちらにまとめています。

Chrome 98

Chrome 98 が2月1日にリリースされました。

Chrome 98 release note

以下のリンクに主な変更点の情報が記載されています。

https://www.chromestatus.com/features/schedule

Pickup for WebClass

WebClass に影響ある変更はありませんでした。

気になる変更点

私が気になった変更点をあげます。

COLR v1 フォントのサポート開始

新しいフォント形式のサポート開始です。

COLR v1はベクターフォントであり、色のグラデーションを表現する機能などがあります。

今まで、絵文字フォントはビットマップの画像をそのまま表示していましたがCOLR v1フォントを用いることでベクターで表現された絵文字を表示することができます。

ビットマップで表されたフォントよりもベクターフォントは拡大に強く、また同じ絵文字を表現するにもサイズが小さく済むというメリットがあります。

詳しくはGoogle によるブログ記事を参照して下さい。

Googleによるブログ記事 -COLRv1 Color Gradient Vector Fonts in Chrome 98-

今後の Chrome リリースについて

次回のリリースは2022年3月1日に予定されています。

Chrome Platform Status

その他ブラウザのリリースはこちらにまとめています。

ステップバイステップで学ぶ修学カルテ作成(後編)

この記事では WebClass の学習記録ビューアプラグインである修学カルテで使うカルテの作り方を説明します。

修学カルテは、大学を通しての学修について、教員のレビューを受けながら、学生が定期的に目標の設定と達成の振り返りを行うためのツールです。

学習記録ビューアマニュアル 修学カルテ

この「ステップバイステップで学ぶ修学カルテ作成」は前編中編、後編の3つに分かれています。

後編では、中編で作成した修学カルテの残りの部分を作っていきます。

目次

  1. カードの項目を作ろう 〜 appendable_card編 〜
  2. サマリーを作ろう

1.カードの項目を作ろう 〜 appendable_card編 〜

中編の 5.カードの項目を作ろう 〜 static_card編 〜 では、static_card というタイプのカードを用いて作成しました。カードにはもう一つ appendable_card というタイプがあります。static_card が学生に一つの入力項目を編集させるのに対し、appendable_card は一つの入力項目に何度でも追記できるようになります。実際に動作を見て確認しましょう。

コード量が大きくなってきたので、ここからは追加するコードを中心に記載していきます。

  <appendable_card id="append_test_card" title="追記式のテスト" append-auth="self,adviser" default-viewable="true">
    <field ref="append_comment" id="append_comment" />
  </appendable_card>
...
  <cards>
    <static_card id="grade1" title="1年次" edit-protect-target="self">
      <field ref="recognize_issue" id="recognize_issue" />
      <field ref="communicate" id="communicate" />
      <field ref="english" id="english" />

      <field ref="reflection" id="reflection" />
      <field ref="attach" id="attach" />
      <field ref="adviser_comment" id="adviser_comment" />
    </static_card>
    <static_card id="grade2" title="2年次" edit-protect-target="self">
      <field ref="recognize_issue" id="recognize_issue" />
      <field ref="communicate" id="communicate" />
      <field ref="english" id="english" />

      <field ref="reflection" id="reflection" />
      <field ref="attach" id="attach" />
      <field ref="adviser_comment" id="adviser_comment" />
    </static_card>
    <static_card id="grade3" title="3年次" edit-protect-target="self">
      <field ref="recognize_issue" id="recognize_issue" />
      <field ref="communicate" id="communicate" />
      <field ref="english" id="english" />

      <field ref="reflection" id="reflection" />
      <field ref="attach" id="attach" />
      <field ref="adviser_comment" id="adviser_comment" />
    </static_card>
    <static_card id="grade4" title="4年次" edit-protect-target="self">
      <field ref="recognize_issue" id="recognize_issue" />
      <field ref="communicate" id="communicate" />
      <field ref="english" id="english" />

      <field ref="reflection" id="reflection" />
      <field ref="attach" id="attach" />
      <field ref="adviser_comment" id="adviser_comment" />
    </static_card>

   <!-- こちらに appendable_card のコードを追加 -->

  </cards>

</doc_template>
...

cards 要素の内容に、新たに appendable_card 要素を追加します。

  • <appendable_card>

追記式のカードを追加するときに使用します。ここで使用する属性はほとんど一緒ですが、新たに append-auth 属性を追加する必要があります。

  • <appendable_card> : append-auth 属性

追記式のカードに追記ができるユーザを指定します。"self" を指定すると学生本人が追記できます。"adviser" を指定すると、アドバイザが追記できます。

例: <appendable_card id="append_test_card" title="追記式のテスト" append-auth="self,adviser" default-viewable="true">

次に、field_template を追加します。

<field_template id="append_comment" title="追記式用テスト" type="text" edit-auth="self,adviser" />
...
    <field_template edit-auth="self" id="english" title="英語力" type="rubric" require="true">
      <rubric>
        <rubric_header>
          <level value="5"/>
          <level value="4"/>
          <level value="3"/>
          <level value="2"/>
          <level value="1"/>
        </rubric_header>
        <dimension id="theme" title="【発音】" description="英語のネイティブな発音ができていますか。">
          <option level="5"/>
          <option level="4"/>
          <option level="3"/>
          <option level="2"/>
          <option level="1"/>
        </dimension>
        <dimension id="discussion" title="【文章力】" description="文法を意識し、相手に伝わるような文章を書くことができていますか。">
          <option level="5"/>
          <option level="4"/>
          <option level="3"/>
          <option level="2"/>
          <option level="1"/>
        </dimension>
        <dimension id="respect" title="【会話】" description="英語を用いて、相手に正しく情報を伝えられていますか。">
          <option level="5"/>
          <option level="4"/>
          <option level="3"/>
          <option level="2"/>
          <option level="1"/>
        </dimension>
      </rubric>
    </field_template>

   <!-- こちらに field_template のコードを追加 -->

  </field_templates>
</doc>

ここでは、static_card 同様に入力項目を追加しています。

以上を追加した後、修学カルテにカルテを登録してみます。すると、カルテ画面で「追記式のテスト」というタブが表示されます。

スクリーンショット 2021-12-15 9.46.30.png

これが追記式のカードの画面になります。記録を追加するときには、[修正]ボタンをクリックしてください。すると、以下のような画面が表示されます。

スクリーンショット 2021-12-15 9.46.41.png

今回は入力項目として「追記式用テスト」というテキストの項目を用意したため、以上のように、テキストフォームが表示されています。新たにデータを追加したいときには、[追加]から追記していくことができます。削除したデータがあれば、[削除]からデータを削除することができます。編集ができたら、[提出]ボタンをクリックしてください。

スクリーンショット 2021-12-15 9.47.03.png

提出をクリックすると、現在入力されているデータが保存されます。これが追記式のカードを追加する流れになります。

追記式には2つのレイアウトがあります。先ほど作成したものがデフォルトレイアウトになります。もう一つがcategorizedレイアウトと呼ばれるレイアウトになります。categorized レイアウトは、データをカテゴライズして表示することができるレイアウトになっています。より実践的な例として、この categorized レイアウトを用いて実装していきます。

例として、課外活動の記録を追記式で保存するようなレイアウトを考えます。まずは以下のようなappendable_card を追加していきます。

<appendable_card id="append_test_card" title="課外活動" append-auth="self" default-viewable="true" layout="categorized" category-field-id="extra_category">
  <field ref="extra_date" id="extra_date" />
  <field ref="extra_category" id="extra_category" />
  <field ref="extra_content" id="extra_content" />
  <field ref="extra_file" id="extra_file" />
</appendable_card>
...
    <cards>
      <static_card id="grade1" title="1年次" edit-protect-target="self">
        <field ref="recognize_issue" id="recognize_issue" />
        <field ref="communicate" id="communicate" />
        <field ref="english" id="english" />

        <field ref="reflection" id="reflection" />
        <field ref="attach" id="attach" />
        <field ref="adviser_comment" id="adviser_comment" />
      </static_card>
      <static_card id="grade2" title="2年次" edit-protect-target="self">
        <field ref="recognize_issue" id="recognize_issue" />
        <field ref="communicate" id="communicate" />
        <field ref="english" id="english" />

        <field ref="reflection" id="reflection" />
        <field ref="attach" id="attach" />
        <field ref="adviser_comment" id="adviser_comment" />
      </static_card>
      <static_card id="grade3" title="3年次" edit-protect-target="self">
        <field ref="recognize_issue" id="recognize_issue" />
        <field ref="communicate" id="communicate" />
        <field ref="english" id="english" />

        <field ref="reflection" id="reflection" />
        <field ref="attach" id="attach" />
        <field ref="adviser_comment" id="adviser_comment" />
      </static_card>
      <static_card id="grade4" title="4年次" edit-protect-target="self">
        <field ref="recognize_issue" id="recognize_issue" />
        <field ref="communicate" id="communicate" />
        <field ref="english" id="english" />

        <field ref="reflection" id="reflection" />
        <field ref="attach" id="attach" />
        <field ref="adviser_comment" id="adviser_comment" />
      </static_card>

      <!-- 先ほど追加した appendable_card の場所に今回のコードを代わりに入力します -->

    </cards>

  </doc_template>
...

categorized レイアウトにするために必要な属性が増えています。

  • <appendable_card> : layout 属性

layout 属性では、appendable_card がなんのレイアウトであるかを指定します。今回は categorized を属性値として指定してあげることで、categorized レイアウトにすることができます。

  • <appendable_card> : category-field-id 属性

どの field 要素を使ってカテゴライズするかを指定します。今回は extra_category を用いてカテゴライズします。

例: <appendable_card id="append_test_card" title="課外活動" append-auth="self" default-viewable="true" layout="categorized" category-field-id="extra_category">

次に、field_template 要素を追加します。

<field_template id="extra_date" title="日付" type="date" edit-auth="self"/>
<field_template id="extra_category" title="カテゴリ" type="select" edit-auth="self" require="true">
  <option value="ボランティア">ボランティア</option>
  <option value="部活動">部活動</option>
  <option value="学外発表">学外発表</option>
  <option value="その他">その他</option>
</field_template>
<field_template id="extra_content" title="内容" type="text" form_type="textarea" edit-auth="self"/>
<field_template id="extra_file" title="添付ファイル" type="file" edit-auth="self"/>
...
    <field_template edit-auth="self" id="english" title="英語力" type="rubric" require="true">
      <rubric>
        <rubric_header>
          <level value="5"/>
          <level value="4"/>
          <level value="3"/>
          <level value="2"/>
          <level value="1"/>
        </rubric_header>
        <dimension id="theme" title="【発音】" description="英語のネイティブな発音ができていますか。">
          <option level="5"/>
          <option level="4"/>
          <option level="3"/>
          <option level="2"/>
          <option level="1"/>
        </dimension>
        <dimension id="discussion" title="【文章力】" description="文法を意識し、相手に伝わるような文章を書くことができていますか。">
          <option level="5"/>
          <option level="4"/>
          <option level="3"/>
          <option level="2"/>
          <option level="1"/>
        </dimension>
        <dimension id="respect" title="【会話】" description="英語を用いて、相手に正しく情報を伝えられていますか。">
          <option level="5"/>
          <option level="4"/>
          <option level="3"/>
          <option level="2"/>
          <option level="1"/>
        </dimension>
      </rubric>
    </field_template>

    <!-- 先ほど追加した field_template の場所に今回のコードを代わりに入力します -->

  </field_templates>

今回新たに field_template 要素に単数選択の入力項目を準備します。単数項目を利用するには、field_template 要素の type 属性に select という属性値を設定します。

  • <field_template> : type 属性 = "select"

入力項目として、単数選択を使用できます。選択肢を設定するためには、field_template の内容に option 要素を用いて指定します。

また、新たに from_type 属性が登場しました。

  • <field_template> : form_type 属性

type が text で設定されている時、入力欄が1行か複数行かを設定できます。1行の時は "text", 複数行の時は "textarea" を設定します。

以上を追加したカルテを修学カルテに登録します。すると、「課外活動」というタブが追加されます。

スクリーンショット 2021-12-15 11.04.59.png

アドバイザーで「課外活動」を表示すると、以上のような画面となります。今回はデータを追加できる権限が学生のみとなっているので、アドバイザーからは追加できません。

学生から入力してもらうためには、「編集設定」から「編集期間」を設定する必要があります。

スクリーンショット 2021-12-15 11.04.59 2.png

「編集設定」では学生とアドバイザーが変更できるかどうかや、編集期間を設定できます。今回は「課外活動」の「編集期間」を設定します。本日を含めた日付を設定してください。最後に[保存]ボタンを押すのを忘れないでください。

スクリーンショット 2021-12-15 11.27.33.png

Screen Shot 2022-01-14 at 18.02.32.png

変更が終わったら、学生アカウントでログインし、「修学カルテチュートリアル」を開いてください。すると「課外活動」のところにペンのアイコンが表示されているのがわかります。このアイコンが表示されているときには、変更を加えることができます。「課外活動」をクリックしてください。

スクリーンショット 2021-12-15 11.32.12.png

「課外活動」を開くと、[新規登録する]ボタンが表示されるようになっています。これをクリックすることで、新しくデータを追加することができます。[新規登録する]をクリックします。

スクリーンショット 2021-12-15 11.35.28.png

すると、新規登録を行う画面が表示されます。この画面で学生はデータを入力します。

スクリーンショット 2021-12-15 11.37.23.png

今回は例として、ボランティアをしたというデータを入力します。そして、[提出]ボタンをクリックすると、以下のような画面に遷移します。

スクリーンショット 2021-12-15 11.38.32.png

この画面では、過去にどういったデータを入力したかがわかるようになっています。XML ファイルで、category-field-id を用いてカテゴリを分別していました。今回の画面でも、「カテゴリ」で選択できる項目で左のタブにカテゴライズされているのがわかります。categorized レイアウトではこのような表示画面を作ることができます。

2.サマリーを作ろう

修学カルテには、「Summary」 という画面があります。ここでは、各カードの入力状況を表示したり、ルーブリックの回答をレーダチャートで表示することができます。

スクリーンショット 2021-12-16 10.10.02.png

ルーブリックのデータを参考にして、レーダチャートが作られています。このレーダチャートはデフォルトでは全てのルーブリックで表示されるようになっています。この画面のレイアウトを変更することができます。

例えばルーブリックの結果の平均値を取得して、一つのレーダチャートにまとめて表示することができます。そのときには、以下のようなコードを doc_template 要素の内容に追加します。

  <summary>
    <rubric-chart>
      <axis-type>each-field</axis-type>
    </rubric-chart>
  </summary>
<doc id="carte_example" title="修学カルテチュートリアル">
  <doc_template>
    <profile>
      <param name="email" label="eメール" />
      <param name="profile.photo" label="写真" />
      <param name="profile.grade" label="学年" list-column="true"/>
      <param name="profile.faclt" label="学部" list-column="true"/>
      <param name="profile.dept" label="学科" list-column="true"/>
      <param name="custom.comment" label="自由入力" type="text"  edit-auth="self"   list-column="true" />
      <param name="custom.attach" label="添付ファイル" type="file" edit-auth="self" />
    </profile>

    <!-- doc_template の中である箇所に summary 要素を入力します -->
    <!-- 今回はここに入力します -->

    <cards>
      <static_card id="grade1" title="1年次" default-viewable="true" edit-protect-target="self">
        <field ref="recognize_issue" id="recognize_issue" />
        <field ref="communicate" id="communicate" />
        <field ref="english" id="english" />

新しい要素が出てきたので、少し説明します。

  • <summary>

サマリーに変更を加えたりするときに使用する要素です。

  • <rubric-chart>

サマリーのレーダーチャートの設定を記載するときに使用します。

  • <axis-type>

レーダーチャートの軸がどういった値を取るのかを指定します。値は以下を取ります。

  • each-dimention

ルーブリックごとにレーダーチャートが表示されます。

  • dimention

ルーブリックの dimention がレーダーチャートの軸になります。

  • each-field

各ルーブリックがレーダーチャートの軸になり、ルーブリックごとの平均値が表示されます。

以上のコードを適用すると、以下のようになります。

スクリーンショット 2021-12-16 10.28.24.png

以上のように、各ルーブリックが軸となり、各ルーブリックの平均値が値として使用されるようになりました。以上のように、サマリーの画面の変更を加えることができます。

また、サマリー自体を表示させないということもできます。その場合には先ほどの summary 要素を以下のように変更します。

<doc_template>
...

  <summary show="false" />

...
</doc_template>
<doc id="carte_example" title="修学カルテチュートリアル">
  <doc_template>
    <profile>
      <param name="email" label="eメール" />
      <param name="profile.photo" label="写真" />
      <param name="profile.grade" label="学年" list-column="true"/>
      <param name="profile.faclt" label="学部" list-column="true"/>
      <param name="profile.dept" label="学科" list-column="true"/>
      <param name="custom.comment" label="自由入力" type="text"  edit-auth="self"   list-column="true" />
      <param name="custom.attach" label="添付ファイル" type="file" edit-auth="self" />
    </profile>

    <!-- 先ほど追加した summary 要素に上書きして、入力します。 -->

    <cards>
      <static_card id="grade1" title="1年次" default-viewable="true" edit-protect-target="self">
        <field ref="recognize_issue" id="recognize_issue" />
        <field ref="communicate" id="communicate" />
        <field ref="english" id="english" />

新しい属性が出てきたので、説明します。

  • <summary> : show 属性

サマリーを表示させるかどうかを設定します。false を指定すると表示しません。true を指定すると、表示されます。デフォルトは true になっています。

作成したカルテを登録して表示すると、以下のような画面となります。

スクリーンショット 2021-12-16 10.36.02.png

左上のタブを見ると 「Summary」というタブが消えているのがわかります。以上のように、必要に応じてサマリーを編集したり、削除したりすることができます。

まとめ

修学カルテのカルテ作成は以上になります!作成したカルテは以下のカルテになります。この XML では、サマリーを表示させています。

completed_carte.xml

ここでは説明しきれない機能もありますので、気になる方はぜひカルテXML仕様を読んでみてください。

ステップバイステップで学ぶ修学カルテ作成(中編)

この記事では WebClass の学習記録ビューアプラグインである修学カルテで使うカルテの作り方を説明します。

修学カルテは、大学を通しての学修について、教員のレビューを受けながら、学生が定期的に目標の設定と達成の振り返りを行うためのツールです。

学習記録ビューアマニュアル 修学カルテ

この「ステップバイステップで学ぶ修学カルテ作成」は前編、中編、後編の3つに分かれています。

中編〜後編にかけて、修学カルテで使うカルテを作っていきます。

カルテとは、学生それぞれの学びの記録ができる場所です。修学カルテでは、XML と呼ばれる形式のファイルを作成することで、オリジナルのカルテを作ることができます。今回は XML ファイルを手順を追って作成していきます。

今回作成するカルテは、最終的に以下のようになります。1年次から4年次までの振り返りができるようなカルテです。学年ごとにルーブリック形式で振り返り項目があります。学生の振り返りに対して、担当教員がコメントを残せるようにしています。また、ボランティアなどの課外活動をまとめるような画面も用意しています。

スクリーンショット 2021-12-16 10.59.32.png

スクリーンショット 2021-12-16 10.59.56.png

では、早速始めていきましょう!

目次

  1. カルテの構成を理解しよう
  2. XML について
  3. まっさらなカルテを用意しよう
  4. プロフィールの項目を作ろう
  5. カードの項目を作ろう 〜 static_card編 〜

1. カルテの構成を理解しよう

修学カルテで使われているカルテはいくつかのブロックで構成されています。

  • プロフィール
    • 学生の基本情報を表示します
  • サマリー
    • カードごとの入力状況等を表示します
    • タブの名前として、「Summary」と表示されます
  • カード
    • カルテごとに定義した入力項目欄で構成されます
    • カードの単位で、表示・非表示や編集の可・不可を設定することができます
    • カードは複数用意することができます
  • 入力項目欄
    • カードごとに定義した入力項目が表示されます
    • 学生や、担当教員は入力項目欄からデータを入力します

スクリーンショット 2021-11-19 19.11.49.png

スクリーンショット 2021-11-19 19.07.34.png

これらの領域を XML を使って作っていきます。

2. XML について

修学カルテのカルテは XML という種類のファイルを用いています。XML を用いることで、カルテのプロフィール欄を変更したり、好きな入力項目を設定できます。

XML は以下の3つでできています。

  • 要素

要素は何を配置するかを定めます。修学カルテでは要素として使える名前はあらかじめ決まっており、こちらで公開されています。要素の名前で"タグ"と呼ばれるものを作って記載する必要があります。タグはのように""(開始タグ)で始まり、""(閉じタグ)で終わるものを指します。

  • 属性

属性は要素に情報を付け加えるために使用します。属性によっては、属性値として値を取ることがあります。属性は開始タグの中に記載します。

  • 内容

内容には画面に表示させたい文字を入力することができます。また、要素によっては内容に文字列ではなく他の要素を必要とするものもあります。内容は開始タグと閉じタグの間に記載します。

これらを以下のように配置します。

<要素名 属性名="属性値">内容</要素名>

また、要素の中に要素を含めることで、データとその構造を表現することができます。例えば、学生の情報は以下のようなXMLで表現できます(ここで使用しているタグは仮のもので、修学カルテで使用することはできません)。

<student>
    <name>山田 太郎</name>
  <faculty>経済学部</faculty>
  <status>卒業</status>
</student>

3. まっさらなカルテを用意しよう

XML について理解したところで、早速カルテを見ていきます。

まっさらなカルテの XML を用意しました。carte_example.xml.zip をダウンロードしてください。carete_example.xml.zip の中に carte_example.xml が入っています。

carte_example.xml

または、テキストエディタを開いて、コードを貼り付けて、ファイル名を「carte_examle.xml」にして保存してください。

<doc title="修学カルテチュートリアル" id="carte_example">
  <doc_template>
  </doc_template>
  <field_templates>
  </field_templates>
</doc>

コードの説明をします。

  • <doc>

全体を束ねるための要素です。この中にカルテの構成情報を書いていきます。

  • <doc> : title 属性

カルテに名前をつけます。今回は"修学カルテチュートリアル"というカルテ名になります。

  • <doc> : id 属性

カルテに固有の id をつけます。修学カルテでは、この id を用いて XML ファイルの識別を行います。この id は他カルテと重複しない値を設定してください。

  • <doc_template>

プロフィール項目を設定したり、カードの数を指定します。現在はまだ何も記載していないため、プロフィールとカード情報のみが表示されます。

  • <field_templates>

入力項目欄に入力項目を設定します。現在は何も記載していないため、入力項目欄には何も表示されません。

このまっさらなカルテを一度修学カルテに設定してみます。設定方法は前編を参考にしてください。

カルテを設定して、任意のユーザのカルテを見ると以下のような画面が表示されます。

スクリーンショット 2021-11-26 19.08.04.png

これでまっさらなカルテを設定できました。これからこのカルテを変更していきます。

4. プロフィールの項目を作ろう

プロフィールには学生の基本情報が表示されます。この欄に表示する情報を選択したり、新しく入力項目を追加することができます。プロフィール項目を変更するときには、 profile 要素を doc_template に追加する必要があります。追加すると以下のようになります。

<doc id="carte_example" title="修学カルテチュートリアル">
  <doc_template>
    <profile>

    </profile>
  </doc_template>
  <field_templates>
  </field_templates>
</doc>

doc_template の内容に profile 要素を追加できました。これだけではまだプロフィールの項目は追加されません。プロフィールの項目を追加するにはこの profile 要素の中に param という要素を追加する必要があります。

param という要素はプロフィール項目の種類や名前を決めることができます。例えば以下のような param 要素を設定することができます。

例: <param name="email" label="eメール" />

この param 要素について説明します。

  • <param>

プロフィールに項目を追加するときに使用します。

  • <param> : name 属性

param 要素にどんな情報を持たせるかを指定します。今回の例では、email の情報を持たせています。

  • <param> : label 属性

プロフィール項目に表示させるときに、どういう名前で表示するかを指定します。

今回の param 要素を見ると、閉じタグがないことがわかります。開始タグの後ろの ">" の前に "/" をいれることで、閉じタグを省略することができます。もし、要素に内容が必要なときには、この書き方では追加できないので、注意してください。
追加した XML ファイルが以下のファイルとなります。

<doc id="carte_example" title="修学カルテチュートリアル">
  <doc_template>
    <profile>
      <param name="email" label="eメール" />
    </profile>
  </doc_template>
  <field_templates>
  </field_templates>
</doc>

ここまでの変更を保存して、修学カルテに反映させてみます。「XML を変更する」をクリックします。

スクリーンショット 2021-11-26 19.23.24.png

すると、以下のようなポップアップが表示されます。
ここで「carte_example.xml」を選択して「更新する」をクリックします。

スクリーンショット 2021-12-02 12.45.48.png

更新ができたら、「修学カルテチュートリアル」のカルテをみてみましょう。

スクリーンショット 2021-12-02 13.02.49.png

すると「eメール」という項目が追加されたのがわかります。これでプロフィールの項目が追加できました。

実際にカルテを使用する際に用いる項目を追加してみます。今回は以下を追加します。

  • 写真
  • 学年
  • 学部
  • 学科
  • 自由入力欄
  • 添付ファイル

これらを追加するには、以下のように記載します。

<doc id="carte_example" title="修学カルテチュートリアル">
  <doc_template>
    <profile>
      <param name="email" label="eメール" />
      <param name="profile.photo" label="写真" />
      <param name="profile.grade" label="学年" list-column="true" />
      <param name="profile.faclt" label="学部" list-column="true" />
      <param name="profile.dept" label="学科" list-column="true" />
      <param name="custom.comment" label="自由入力" type="text"  edit-auth="self" />
      <param name="custom.attach" label="添付ファイル" type="file" edit-auth="self" />
    </profile>
  </doc_template>
  <field_templates>
  </field_templates>
</doc>

name 属性で新たに profile と custom という新しい属性値が出てきました。それぞれについて説明します。

  • profile は WebClassシステム共通で使われる情報を使うときに利用します。WebClass で登録されている情報がそのまま表示されます。
  • custom はカルテ用に自由に設定できます。ここに入力するユーザは XML で指定することができます。

profile については、データの参照方法が決まっています。例えば、例のように学年を用いる場合には、"profile.grade" という name 属性値を与える必要があります。どういった情報を利用できるかは修学カルテマニュアルを参照してください。

新しく出てきた属性について説明します。

  • <param> : list-column 属性

カルテのユーザ一覧画面で項目を表示するかどうかを指定します。"true" と設定することで、一覧に表示されるようになります。

  • <param> : type 属性

入力するデータがテキストかファイルかを選択できます。テキストの時は "text"、ファイルの時は "file" と設定します。

  • <param> : edit-auth 属性

編集ができるユーザを設定できます。設定できるユーザは以下の通りです。

"self": 学生本人が編集できます
"adviser": アドバイザーが編集できます
"self,adviser": 学生本人とアドバイザーが編集できます。 

「アドバイザー」というのは、修学カルテの権限設定にて、「担当ユーザーにアドバイスする」という権限が付与されているロールが与えられているユーザのことになります。

修学カルテでは、「学生」や「担当教員」といった役職を「ロール」という単位で扱います。ロールに権限を付与することで、アカウントの役割を設定していきます。

このファイルを実際に修学カルテに登録します。すると、一覧画面が以下のように変更されます。

スクリーンショット 2021-12-03 17.45.30.png

先ほど "list-column" に設定した"学年"、"学部"、"学科" が一覧で表示されるようになりました。

また、ユーザ画面を開くと、以下のようになっています。

スクリーンショット 2021-12-03 17.47.05.png

先ほど追加した項目が追加させているのがわかります。”自由入力”と"添付ファイル"は学生自身が変更を加えることができるようになっています。学生アカウントで確認すると[プロフィール編集]のボタンがあり、プロフィールを実際に変更することができます。

スクリーンショット 2021-12-03 17.48.29.png

[プロフィール編集]のボタンをクリックすると、編集画面が表示されます。先ほど"edit-auth" で "self" と入力した箇所が変更できるにようになっているのがわかります。

スクリーンショット 2021-12-03 17.50.26.png

これでプロフィール項目については完了です。

5.カードの項目を作ろう 〜 static_card編 〜

次にカードの項目を作っていきます。カードは、学生が授業記録や、実習記録を残すときに使います。

まずは簡単なカードを一つ追加してみます。

<doc id="carte_example" title="修学カルテチュートリアル">
  <doc_template>
    <profile>
      <param name="email" label="eメール" />
      <param name="profile.photo" label="写真" />
      <param name="profile.grade" label="学年" list-column="true" />
      <param name="profile.faclt" label="学部" list-column="true" />
      <param name="profile.dept" label="学科" list-column="true" />
      <param name="custom.comment" label="自由入力" type="text"  edit-auth="self"   list-column="true" />
      <param name="custom.attach" label="添付ファイル" type="file" edit-auth="self" />
    </profile>

    <cards>
      <static_card id="card_test" title="カードのテスト">
        <field id="card_filed_test" ref="comment" />
      </static_card>
    </cards>

  </doc_template>
  <field_templates>
    <field_template id="comment" title="コメント" type="text" edit-auth="self,adviser" />
  </field_templates>
</doc>

ここで追加されたのは <cards> と <cards> の中身です。それぞれについて説明します。

  • <cards>

カードを追加するときには、<doc_template> に新たに <cards> という要素を追加します。ここにカードの内容などを追加していきます。

  • <static_card>

カードの中身について記載します。カードは <static_card> と <appendable_card> の2種類があります。今回は を使います。

  • <static_card> : id 属性

カードに識別の id を与えます。これは他のカードと重複しないように設定してください。

  • <static_card> : title 属性

カードにタイトルをつけます。今回追加するのは「カードのテスト」という名前のカードです。

例: <static_card id="card_test" title="カードのテスト">
  • <field>

(もしくは)にどんな入力項目を追加するか記載します。今回は <static_card> の中に field 要素を追加します。

  • <field> : id 属性

入力項目に識別の id を与えます。これは他の入力項目と重複しないように設定してください。

  • <field> : ref 属性

field 要素では、どのような入力項目を使用するかを後で説明する field_template からしているする必要があります。この ref 属性では、どの field_template を参照するかを指定します。

例: <field id="card_filed_test" ref="comment" />
  • <field_template>

どんな入力項目にするかのテンプレートを作ります。filed_template 要素は のなかに追加します。今回の例では、何かしらのコメントを入れられるような入力項目になっています。

  • <filed_template> : id 属性

field_template を識別するために使用します。field 要素の ref 属性ではここで設定した id を参照しています。

  • <filed_template> : title 属性

入力項目に名前をつけています

  • <filed_template> : type 属性

入力形式を設定しています。種類として、"text" や "file" などがあります。

  • <filed_template> : edit-auth 属性

入力が可能なユーザを設定しています。

例: <field_template id="comment" title="コメント" type="text" edit-auth="self,adviser" />

この変更を一度修学カルテに反映させて、どう変わるのかを確認します。すると、カードが加わったことで、カードのタブが増えたことがわかります。

[カードのテスト]をクリックすると以下のような画面が出てきます。

スクリーンショット 2021-12-09 10.28.51.png

先ほど追加した field_template で設定したコメントの欄があるのが確認できます。[回答]をクリックすると、テキストを入力する欄が表示されます。

スクリーンショット 2021-12-09 10.28.51.png

今回は編集できる権限を持っているのが edit_auth より ”self,adviser" なので、学生本人か「担当ユーザーにアドバイスする」権限を持つユーザが編集できます。

以上がカードを追加する一連の流れになります。これから、より実践的な例を使って、カードを作ってみます。以下がコードになります。

<doc id="carte_example" title="修学カルテチュートリアル">
  <doc_template>
    <profile>
      <param name="email" label="eメール" />
      <param name="profile.photo" label="写真" />
      <param name="profile.grade" label="学年" list-column="true" />
      <param name="profile.faclt" label="学部" list-column="true" />
      <param name="profile.dept" label="学科" list-column="true" />
      <param name="custom.comment" label="自由入力" type="text"  edit-auth="self"   list-column="true" />
      <param name="custom.attach" label="添付ファイル" type="file" edit-auth="self" />
    </profile>

    <cards>
      <static_card id="grade1" title="1年次" edit-protect-target="self">
        <field ref="recognize_issue" id="recognize_issue" />
        <field ref="communicate" id="communicate" />
        <field ref="english" id="english" />

        <field ref="reflection" id="reflection" />
        <field ref="attach" id="attach" />
        <field ref="adviser_comment" id="adviser_comment" />
      </static_card>
      <static_card id="grade2" title="2年次" edit-protect-target="self">
        <field ref="recognize_issue" id="recognize_issue" />
        <field ref="communicate" id="communicate" />
        <field ref="english" id="english" />

        <field ref="reflection" id="reflection" />
        <field ref="attach" id="attach" />
        <field ref="adviser_comment" id="adviser_comment" />
      </static_card>
      <static_card id="grade3" title="3年次" edit-protect-target="self">
        <field ref="recognize_issue" id="recognize_issue" />
        <field ref="communicate" id="communicate" />
        <field ref="english" id="english" />

        <field ref="reflection" id="reflection" />
        <field ref="attach" id="attach" />
        <field ref="adviser_comment" id="adviser_comment" />
      </static_card>
      <static_card id="grade4" title="4年次" edit-protect-target="self">
        <field ref="recognize_issue" id="recognize_issue" />
        <field ref="communicate" id="communicate" />
        <field ref="english" id="english" />

        <field ref="reflection" id="reflection" />
        <field ref="attach" id="attach" />
        <field ref="adviser_comment" id="adviser_comment" />
      </static_card>
    </cards>

  </doc_template>
  <field_templates>
    <field_template edit-auth="adviser" id="adviser_comment" title="教職課程担当教員のコメント" type="text" />
    <field_template edit-auth="self" id="reflection" title="今年次の履修のまとめ" type="text" require="true" />
    <field_template edit-auth="self"  id="attach" title="他大学での履修のまとめ(転・編入生のみ)" type="file" />

    <field_template edit-auth="self" id="recognize_issue" title="課題探求" type="rubric" require="true">
      <rubric>
        <rubric_header>
          <level value="1">全くできていない</level>
          <level value="2">あまりできていない</level>
          <level value="3">まあできている</level>
          <level value="4">よくできている</level>
          <level value="5">とてもよくできている</level>
        </rubric_header>
        <dimension id="recognize" title="【課題認識と探究心】" description="自己の課題を認識し、その解決にむけて、学び続ける姿勢を持っていますか。">
          <option level="1"/>
          <option level="2"/>
          <option level="3"/>
          <option level="4"/>
          <option level="5"/>
        </dimension>
      </rubric>
    </field_template>

    <field_template edit-auth="self" id="communicate" title="コミュニケーション" type="rubric" require="true">
      <rubric>
        <rubric_header>
          <level value="5"/>
          <level value="4"/>
          <level value="3"/>
          <level value="2"/>
          <level value="1"/>
        </rubric_header>
        <dimension id="theme" title="【専門的なテーマの学習】" description="専門的な課題に対してどのくらい学んでいますか。">
          <option level="5">様々な角度から十分に学習を行なっている</option>
          <option level="4">十分に行っている</option>
          <option level="3">適度に行っている</option>
          <option level="2">行っているが、不十分である</option>
          <option level="1">行っていない。</option>
        </dimension>
        <dimension id="discussion" title="【グループでの討論、自分の主張について】" description="相手に対して、わかりやすいような説明ができていますか。">
          <option level="5">適切で創造的な手順・手段を用いて分かりやすく説明し、相手を十分に納得させることができる</option>
          <option level="4">適切な手順・手段を用いて分かりやすく説明し、相手を納得させることができる</option>
          <option level="3">切な手順・手段を用いて分かりやすく説明できる</option>
          <option level="2">切な手順・手段を用いて説明しようとしているが、不十分である</option>
          <option level="1">適切な手順・手段を用いて分かりやすく説明していない</option>
        </dimension>
                <dimension id="respect" title="【他者の意見の尊重について】" description="相手の意見をどのくらい理解できていますか。">
          <option level="5">相手の意見を十分に理解した上で、さまざまな視点から考えることができる</option>
          <option level="4">相手の意見を深いところまで十分に理解できる</option>
          <option level="3">相手の意見を正しく理解することができる</option>
          <option level="2">相手の意見を理解することができる</option>
          <option level="1">相手の意見を理解できていない</option>
        </dimension>
      </rubric>
    </field_template>

        <field_template edit-auth="self" id="english" title="英語力" type="rubric" require="true">
      <rubric>
        <rubric_header>
          <level value="5"/>
          <level value="4"/>
          <level value="3"/>
          <level value="2"/>
          <level value="1"/>
        </rubric_header>
        <dimension id="theme" title="【発音】" description="英語のネイティブな発音ができていますか。">
          <option level="5"/>
          <option level="4"/>
          <option level="3"/>
          <option level="2"/>
          <option level="1"/>
        </dimension>
        <dimension id="discussion" title="【文章力】" description="文法を意識し、相手に伝わるような文章を書くことができていますか。">
          <option level="5"/>
          <option level="4"/>
          <option level="3"/>
          <option level="2"/>
          <option level="1"/>
        </dimension>
        <dimension id="respect" title="【会話】" description="英語を用いて、相手に正しく情報を伝えられていますか。">
          <option level="5"/>
          <option level="4"/>
          <option level="3"/>
          <option level="2"/>
          <option level="1"/>
        </dimension>
      </rubric>
    </field_template>

  </field_templates>
</doc>

それぞれ年度ごとに振り返りができるように1年時から4年時までのカードを追加しています。年度の終わりにそれぞれのカードで復習をしてもらうような形式です。

コード量が一気に増えましたが、基本的な流れは先ほどと一緒です。ここで新たに追加された要素・属性について説明します。

  • <field_template> : require 属性

require 属性は必須項目にするかどうかを設定します。

例: <field_template edit-auth="self" id="english" title="英語力" type="rubric" require="true">
  • <rubric>

rubric 要素は入力項目にルーブリックを用いるときに使用します。

  • <rubric_header>

ルーブリックを使用するときに、表のヘッダに何を表示するかを指定します。

  • <level>

ルーブリックのヘッダの項目数を設定したり、ヘッダのセルに項目の内容を入れます。

  • <level> : value 属性

後に説明する option 要素で、どのヘッダに紐づくのかを指定するために必要な値になります。

  • <dimension>

ルーブリックの行に関する内容を記載するときに使用します。

  • <dimension> : id 属性

修学カルテでは、ルーブリックの情報を id 属性を用いて保存しています。この id 属性では、ルーブリックの行に関する情報を保存する時に使用します。この属性値は重複しない値を設定してください。

  • <dimension> : title 属性

ルーブリックの各行に対して、どういった項目なのかを設定できます。

  • <dimension> : description 属性

ルーブリックの各行に対して、どういった項目なのかの付属情報を設定できます。

  • <option>

ルーブリックのカラムの内容を設定します。

  • <option> : level 属性

ルーブリックのヘッダに登録した value 属性をみて、どの列に対応するのかを明記するための属性です。

例: 
<rubric>
  <rubric_header>
    <level value="3"/>
    <level value="2"/>
    <level value="1"/>
  </rubric_header>
  <dimension id="theme" title="【発音】" description="英語のネイティブな発音ができていますか。">
    <option level="3"/>
    <option level="2"/>
    <option level="1"/>
  </dimension>
</rubric>
  • <static_card> : edit-protect-target 属性

修学カルテでは、編集できる期間を設定できます。その編集期間を適用する対象を指定できます。今回は編集期間外では学生のみ変更できず、担当教員は編集期間外でも変更できます。

例: <static_card id="grade4" title="4年次" edit-protect-target="self">

この作成したカルテを実際に修学カルテに登録してみます。すると、以下のようなカードが新しく追加されているのがわかります。

スクリーンショット 2021-12-16 10.40.25.png

これでカードの追加ができるようになりました!カードの入力項目についてはルーブリック以外にもチェックボックスや、ファイルの登録など種類があります。もっと詳しく知りたい方は、カルテ XML 仕様をご覧ください

まとめ

中編は以上になります。次回の後編では、引き続きカルテを作成していきます。

また、他の機能に興味を持たれた方は、是非カルテXML仕様を読んでみてください。