授業の準備
Microsoft Teamsにログインし、授業の会議に参加してください。
前回の復習
前回の知識問題
- 「インタラクティブ」を正しく説明しているのはどれですか
- 人やシステムが双方向にやりとりすること
- お問い合わせフォームのこと
- 情報を整理して伝えること
- ユーザーがアクションすること
- SNSなど交流サイトのこと
- 「プライバシーポリシー」を正しく説明しているのはどれですか
- 個人情報の集め方や利用方法についてまとめたもの
- お問い合わせフォームのチェック項目のこと
- Webサイトの使い方をまとめたもの
- 情報の公開範囲を定めたもの
- 個人情報の範囲を定めたもの
- 「フォームの入力欄に薄い色で表示される、入力例や誘導」はどれですか
- プレースホルダー
- リプレースフォーム
- ホルダープレース
- 送信完了
- フォルダー
- インタラクティブな要素ではないものはどれですか
- ブラウザ
- お問い合わせフォーム
- サイト内検索
- いいねボタン
- AIアシスタント
- お問い合わせフォームの「送信する」に相当する英語はどれですか
- Submit
- Subset
- Subject
- Substitute
- Suggest
ストック情報とフロー情報
情報は大きく分けて「ストック情報」と「フロー情報」に分けることができます。
Webサイトにおけるストック情報とフロー情報
Webサイトに掲載する情報も、ストック情報とフロー情報に分けることができます。
| ストック情報の例 | ・会社情報 ・サービス ・FAQ ・プライバシーポリシー ・サイトマップ など |
|---|---|
| フロー情報の例 | ・お知らせ ・ブログ ・実績 ・プレスリリース など |
アンケートにご協力ください
本学では、より質の高い授業を提供するため、教育方法の改善に取り組んでいます。その一環として、学生の皆さんが「授業をどのように感じているか？」についてアンケートを実施させていただきます。是非とも本アンケートへのご協力をお願いいたします。
なお、誰がどのような回答をしたのかは担当教員にはわかりません。回答結果は授業改善のためのみに利用します。学生の皆さん各人が成績評価などにおいて不利になるようなことは絶対にありません。下記アンケートの各項目をよく読んで回答をお願いいたします。
https://forms.office.com/r/Vq2EPY1b8b
Studio：CMS
Studioにログインしてください。
Studioには、フロー情報を効率よく管理するための「CMS」という機能があります。CMS機能を使って、以下の工程で「お知らせ」を作成します。
- STEP1：モデルの作成
- STEP2：アイテムの追加
- STEP3：アイテム詳細ページを作成
- STEP4：エディタに紐づけ
- STEP5：動作確認をする
STEP1：モデルの作成
CMSの管理では、デザインエディタではなく、「CMS」の画面を表示します。
「モデル」はフロー情報のテンプレートのようなものです。記事のテンプレートとしてのモデルと、カテゴリーのテンプレートとしてのモデルの2つを追加します。
- 「空白からはじめる」からモデルを作成します
- 「記事タイプ」のモデルを追加します
- モデル名は「お知らせ」にします
- 別のモデルを新規追加します
- 「カテゴリータイプ」のモデルを追加します
- モデル名は「お知らせカテゴリー」にします
STEP2：アイテムの追加
各モデルをベースに作られるコンテンツを「アイテム」と呼びます。「お知らせ」と「お知らせカテゴリー」のアイテムを、それぞれ3つ作成します。
- 先に「お知らせカテゴリー」にアイテムを追加します
- アイテムを新規追加します
- アイテム名を「ニュース」、Slugを「news」にします
- 公開します
- 別のアイテムを新規追加します
- アイテム名を「プレスリリース」、Slugを「press-release」にします
- 公開します
- 別のアイテムを新規追加します
- アイテム名を「採用」、Slugを「recruit」にします
- 公開します
- アイテムを新規追加します
- お知らせの一覧画面を表示します
- 一覧リストの見出し右側にある「＋」から「プロパティを追加」します
- 「お知らせカテゴリー」を追加します
- 「お知らせ」にアイテムを追加します
- タイトルを「ホームページをリニューアル」にします
- お知らせカテゴリーを「ニュース」にします
- 内容を「ホームページをリニューアルしました。」にします
- 公開します
- 別のアイテムを追加します
- タイトルを「2025年度の採用について」にします
- お知らせカテゴリーを「採用」にします
- 内容を「今年度の採用についてお知らせします。」にします
- 公開します
- 別のアイテムを追加します
- タイトルを「新商品の発売について」にします
- お知らせカテゴリーを「プレスリリース」にします
- 内容を「新商品を販売します。」にします
- 公開します
CMSのトップページに移動します。左側のメニューを見て、お知らせが「3」、お知らせカテゴリーが「3」であることを確認しましょう。
STEP3：アイテム詳細ページを作成
- デザインエディタに移動します
- 左メニューを開き、「ページ」タブを表示します
- ページを追加します
- 「動的ページ」を追加します（隠れているので注意）
- モデルを選択（お知らせ）で作成します
- すでに表示されている要素をすべて削除します
- コンポーネント「header」「footer」を追加しする
- 「div」をその間に追加してタグの種類を「main」に変更する
- mainの横幅を100%、縦幅を960pxにする
- mainの内側の余白を32pxにする
- mainの塗りを「#FFFFFF」にする
- 「main」にテキストボックスを3つ追加する
- 右メニューを表示しておきます
- 一番上のテキストボックスの内容を「CMSプロパティから選択」して「Title」にする
- 文字サイズを40pxにする
- 真ん中のテキストボックスの内容を「CMSプロパティから選択」して「公開日時」にする
- 色を「#AAAAAA」にする
- 一番下のテキストボックスの内容を「CMSプロパティから選択」して「Content」にする
- 色を「#111111」にする
STEP4：エディタに紐づけ
- 「HOME」を編集します
- 見出しとカルーセル以外の要素は削除します
- mainの横幅を100%にする
- 左メニューを開き、「追加」タブを表示します
- CMSから「お知らせ」のListをHOMEの「main」に挿入します
- レイヤータブに切り替え、Listの表示数を「3」に変更します
- List内のリンク要素「a」を選択し、右メニューからリンクを編集します
- リンクを「CMS – お知らせ」にします
STEP5：動作確認をする
ライブプレビューから確認しましょう。
知識問題
今日の授業内容を知識問題で復習しましょう。
CampusApp
- CampusAppの「CBT（知識問題）」から、知識問題にチャレンジしましょう
- 100点が取れるまで、繰り返し挑戦しましょう
- 期末の定期試験は知識問題の中から出題します
パソコンの再起動／シャットダウン
授業の終わりに必ずパソコンを再起動（次に他の授業がある場合）、またはシャットダウン（次に他の授業がない場合）してください。