中国語研究室 Web サイトについて

/pub/WWW/china-lab

使用技術

• HTML
• bootstrap

前提知識

以下のドキュメントは、

• HTML の基本的な文法がわかる
• ディレクトリの概念が理解できている
• CUI の操作がある程度(情報基礎で習うレベル程度)できる
• わからないことでも調べながら試行錯誤できる

方向けに書いています。このような方に更新いただきたいです。

サイトの更新方法

手続き的な話

不用意な情報を発信しないために、良質な情報を提供するために、必ず守る。<br> 先生方と HP 更新担当者、相互確認の意識で行うと良いです。

• サイトの内容など(ニュース含む)を更新したら開発用の領域（CNS の個人用領域の public_html にクローンして pull すれば良いでしょう）にアップロードしてください。
• アップロードしたら、更新したページの URL を、専任の先生方を宛先に、SA リーダー・副リーダー・他の HP 担当・その他関係者を CC に入れ、確認依頼のメールを送信します。
• 修正事項があれば修正し再度確認依頼をかけ、OK であれば CNS サーバーの共同領域で pull して、本番環境で更新します。

技術的な話

• github で管理しています。
• 大まかな更新方法としては、github の china-lab organization の website リポジトリに push して
• CNS サーバーの共同領域にリモートログインして pull する形をとります。
• git pull するときは git のアクセストークンの設定が必要で少々面倒だった記憶があります。調べたら解決法が出てくるので、根気強くやっていただければと思います、、

技術的に困ったことあれば、強い知り合いに聞いていただく、ITC に問い合わせる、このドキュメントの最下部の問い合わせ先に問い合わせる、のようにしてください。

NEWS の更新方法

1. news_img フォルダ内に yyyymmdd.jpg の書式で、縦横比の 16:9 バナー画像を用意する。
2. news フォルダ内で、記事コピー用.html を複製する。複製したファイル名は yyyymmdd.html とする。
3. ニュースタイトル（検索して見つけてください）を記入、YYYY.MM.DD を実際の日付に変更、noimage.jpg を yyyymmdd.jpg に変更（適切な画像が無かったら noimage でも良いが見栄えがよくないため極力避ける）、「ここに記事を記入」コメントアウトを記事内容で置き換える（記事内容は p タグで段落分けすると見やすくて良い。なお、全てを p タグで再び囲む必要はない）
4. news フォルダ内の news.html の[１記事のブロックの始まり～終わり]を複製する。ファイル名含め、年月日を 3 箇所修正、タイトルを置き換える。
5. index.html(ルートディレクトリにある)の「お知らせ」部分の記事の一番下ブロックを切り取り、3 つの記事の一番上になるように貼り付ける。ファイル名含め、年月日を 3 箇所修正、タイトルを置き換える。
6. index.html、news/news.html、news/yyyymmdd.html が正常に更新されているか、間違いがないか確認する。

• 同一日に複数個記事を掲載する場合は 20221221_1.html,20221221_2.html のような命名規則で掲載しています。
• 記事内の画像をレスポンシブに記事の横幅に合わせて表示させたいときは、img 要素等に「class="container-fluid"」を付けると大体のケースでレスポンシブになってくれます。
• 記事内に pdf や追加画像などを掲載する場合は news_upload フォルダに格納しています。

ディレクトリ構造

• img
  • トップページに掲載しているバナーや、常設ページの画像など
• member
  • パスワード保護をかけているページ
• news
  • お知らせの各記事ページや、お知らせ一覧ページ(news.html)など
• news_img
  • お知らせの各ページのサムネイル画像を格納
  • noimage.jpg は画像がないとき用のサムネイル
• news_upload
  • お知らせの各記事に掲載する写真や pdf 格納用
• pages
  • 常設ページを格納
• sound_zip
  • 音声一括ダウンロード用 zip フォルダを格納。2023 年 3 月時点で最新（赤い先生用の本と対応している）。学習に便利なので、今後も継続してあると良いと思います。
• style
  • bootstrap でどうにもならかった箇所を修正するための CSS ファイルを格納
• upload
  • 旧サイトのファイルを引き継いでいる、HP に必要なデータ（音声データ、プリントの pdf など）を含む雑多なフォルダ。
• .gitignore
  • cns サーバーの共同領域上には古いサイトのバックアップとしてそのまま残してあるものがあるので、それらを git の管理下から除外している。
• .htaccess
  • パスワード保護用
• china-logo.png
  • ヘッダー用のメインバナー
  • ルートディレクトリにおいている意味はないので、置換等駆使してパスを変更頂き、img の中に格納して頂いてかまいません
• index.html
  • トップページの本体
• readme.md
  • 本ドキュメント

パスワード保護について

• https://www.sfc.itc.keio.ac.jp/ja/network_web_virtual2.html
• 上記 URL の「1. パスワードによる制限(Digest 認証)」に則ってパスワード認証を[member]フォルダにかけてあります。
• 著作権等の関係で、履修者以外に見せたくないコンテンツです。
• パスワード認証をかけたいコンテンツが生じた場合は、お手数ですが[member]フォルダへのアップロードをお願いします。
• 設定しているユーザ名とパスワードはこちらには明記しませんので、誰かに聞いてください。

セキュリティ対策について

以下の事項を.htaccess に設定済みです。

• git の管理ファイル、管理者権限の関係で消去不可能な旧サイトのファイル、旧サイト全体のバックアップ、readme 等にアクセスするとトップページにリダイレクトするように設定
• 存在しないページやファイルにアクセスするとトップページにリダイレクトするように設定

動画の埋め込みについて

• CNS サーバーに直接埋め込むとサーバに負荷がかかるので、外部サービスにアップロードするようにしている
• dropbox の場合 https://blanche-toile.com/web/website-dropbox
• youtube の場合 再生バーの埋め込みコードからコード取得可能
• 将来的な課題として、その時の担当者に依存せずに永続的に動画をアップロードし続けれられる仕組み作りも必要だと思います。（広報/HP 用のアカウントを作るとか？）

その他

• undraw から取ってきたバナー画像の縦横比は基本的に横 5:縦 4 で統一済み

積み残し事項

• 古い HP から移植してきた箇所について、不要なタグやクラスが混じっている。部分的には修正したが、大部分は未修正。時間があれば修正していただけると嬉しいです。
• 古い HP から引き継いでいる、upload フォルダ内の不要なファイルが大量に残っている。
• トップページのスライドショーが不安定（bootstrap のカルーセルをそのまま埋め込んでいて不具合が起きる場合があるので、抜本的改善を目指すなら別のプラグインか何かを導入する必要があると思われる。）
• ボタンのデザイン等、細かい配色やデザインがデザインカンプに沿っていない。

問い合わせ先

• 蒋理嘉（環境情報学部 2 年）rika.shou@keio.jp
• 李浩文（政策・メディア研究科修士 1 年） tony_li.haowen@keio.jp