Skip to content

smkwlab/ise-report-template

BranchesTags

Repository files navigation

情報科学演習 I,II レポート　テンプレート

1. 基本的な使い方

Step 1: リポジトリ準備

  1. 自分のレポートリポジトリを作成（自動セットアップ推奨）
  2. VS Code + DevContainerで開発環境を構築

Step 2: レポート作成サイクル

  1. 作業用ブランチ作成 → 0th-draft, 1st-draft, 2nd-draft など
  2. レポート作成 → index.htmlを編集、リアルタイム品質チェック
  3. Pull Request提出 → 自動品質検証・レビュー対象登録
  4. フィードバック対応 → 指摘に応じて新ブランチで修正

Step 3: 完成・提出

  • 🔄 修正必要な場合、新ブランチで改善継続
  • ✅ 承認後、finalタグを付けて提出完了

📋 提出フローの特徴

  • 品質保証: 自動的なHTML/日本語チェック
  • 段階的改善: ドラフト版による反復改善
  • 透明性: すべての変更履歴・コメントが記録
  • 効率性: VS Codeでのリアルタイムフィードバック

2. 具体的な作業内容

2.1 自分用のリモートリポジトリの作成

🚀 方法1: 自動セットアップ（推奨）

前提条件:

以下のソフトウェアがインストール済みであること：

  1. Docker Desktop - 開発環境の実行に必要
  2. GitHub Desktop - リポジトリ管理・同期に必要
  3. GitHub CLI (gh) - リポジトリ作成スクリプトの実行に必要

準備:

GitHub CLI の認証を完了してください：

gh auth login

注意: gh コマンドが見つからない場合は インストール方法 を参照してください。

リポジトリ作成:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/smkwlab/student-repo-management/v1/create-repo/setup.sh)" bash ise

💡 v1 は安定版（最新の v1 系）を指す移動タグです。最新の開発版を試す場合は URL の v1 を main に置き換えてください。

実行手順:

  1. 上記コマンドを実行（macOS のターミナルまたは Windows の WSL 内）
  2. 学籍番号・課題種別・レポート番号を入力
  3. 自動でリポジトリ作成・セットアップ完了

方法2: 手動セットアップ

  1. ブラウザでこのリポジトリーにアクセスし Use this template ボタンをクリック
  2. リポジトリ作成画面になる
    • Owner は smkwlab のまま
    • Repository name は、 k99rs999-ise-report1 のように自分の学籍番号を入れ、さらに情報科学演習I(あるいはII)のレポートであることが分かるような名前にする
      • 前期の 情報科学演習I と後期の 情報科学演習II では別のリポジトリーを作る
    • 公開範囲は Private のまま
  3. Create repository from template ボタンをクリック

2.2 リポジトリをローカルにコピーし、作業用ワーキングディレクトリを作成

  1. 作成されたリポジトリーの画面で Code ボタンをクリック
  2. Open with GitHub Desktop をクリック
  3. 自分のPCでリポジトリーを置くディレクトリを確認して Clone ボタンをクリック

2.3 初回作業ブランチの確認

セットアップ完了後、以下のブランチ構成が自動作成されている。

  • main: テンプレート・最終版管理用
  • 0th-draft: 初回作業用ブランチ（作成済み）

2.4 レポート作成ワークフロー

📝 Step 1: 作業ブランチでレポート編集

  1. ブランチ切り替え: GitHub Desktopで0th-draftブランチを選択
  2. VS Code起動: Open in Visual Studio CodeでDevContainer環境を開始
  3. レポート編集: index.htmlを編集（リアルタイム品質チェック付き）
  4. ファイル追加: 必要に応じて画像・CSS追加可能

🔍 Step 2: 品質確認・コミット

  1. 品質チェック: VS Code保存時に自動的にtextlint・HTML検証実行
  2. プレビュー確認: Live Previewで表示確認
  3. コミット: GitHub Desktopで変更をコミット
  4. プッシュ: Push originでリモートリポジトリに反映

📤 Step 3: Pull Request提出

  1. PR作成: Create Pull Requestをクリック
  2. タイトル設定: 現在のブランチ名（0th-draft）を記述
  3. 内容記述: 変更点・工夫点をWriteタブに記述
  4. 提出: Create pull requestボタンで提出完了

🔄 Step 4: 自動次版準備（GitHub Actions）

  • PR提出後: 自動的に1st-draftブランチが作成される
  • 品質レポート: Pull Request画面に詳細な品質分析が自動生成

💬 Step 5: フィードバック対応

  1. レビュー確認: Pull Request内のコメント・指摘事項を確認
  2. 次版作業: GitHub Desktopで1st-draftブランチに切り替え
  3. 修正作業: 指摘に応じてindex.htmlを修正
  4. 再提出: Step 1-3を繰り返し

✅ Step 6: 完成・提出完了

  • OK判定後: finalタグを付けて提出完了
    1. GitHub Desktop のHistoryで最新コミットを右クリック
    2. Create Tag... → Nameにfinalと入力
    3. Create Tag → Pushでリモートにプッシュ
  • 提出終了: お疲れ様でした

🎯 ワークフローの特徴

  • 自動化: 次版ブランチの自動作成でスムーズな改善サイクル
  • 品質保証: 各段階での自動チェック・フィードバック
  • 透明性: すべての変更・コメントがGitHub上で管理
  • 学習効果: Pull Requestによる協働開発スキル習得

3. レポートの書き方 (index.html の更新)

3.1 情報科学演習x のレポートとしての注意事項

  • 情報科学演習I のレポートにおけるプログラミングテストに関する記述では、すべての問題について記述すること
  • 情報科学演習II のレポートにおいては、チームメンバーについても記述すること

3.2 日本語的な注意事項

  • である体で書くこと
  • 長い文を書かず、適切に文を分割すること
    • 「が」で続けるのは良くない
  • 適切な内容で段落を分割すること
  • 文の途中に箇条書きを入れないこと
  • すべての図や表は本文中で参照すること
  • まとめは感想ではない。
    • 今後の課題を除いて、それ以前の本文で記述されていないことを、まとめに書いてはいけない

3.3 HTML的な注意事項

  • title 要素と h1 要素にレポートのタイトルを記述
  • header 要素中の author クラスが指定された p 要素に著者情報を記述
  • 報告書本体は h2 以下のレベル (h2, h3, h4,...) で構造を作る 各 hX 要素には自動で採番される
    • h2 の構成については、このまま変更なしで問題ないと思われる
  • 日本語のレポートらしくするために p 要素については先頭行の行頭に空白が入るようにしてある
    • しかし、これが気に入らない場合はスタイルを変更してよい
  • 図や表にはキャプションを入れる。入れ方はsample-index.htmlを参考にすること
  • プログラムを記述する際には、< の後に空白を入れるように注意すること。 空白がないと HTML の開始タグと誤認識され表示が乱れる。
  • 段落を書くときも、1文1行で記述すること
    • 差分が見やすいし、編集指示も出しやすい

3.4 textlintによるチェック

このリポジトリはtextlintによる機械的な表記のチェック機能をインストール済み。 情報科学演習用に最適化された設定で、レポートの品質向上を支援する。

  1. VS Codeでファイルを保存すると問題ウィンドウにtextlintの実行結果が表示される
  2. 指摘内容にしたがって文章を推敲すること
  3. 情報科学演習特有の用語（プログラミング、アルゴリズム等）が適切に処理される
  4. 学術文書向けに文章長制限を100文字に設定済み
  5. URL・メールアドレスは文章長チェックから除外される

3.5 HTML品質検証

Pull Request作成時に自動的にHTML品質検証が実行される。

検証項目:

  • W3C HTML5準拠チェック: 標準的なHTML構文の検証
  • HTMLHint品質チェック: セマンティックHTMLの推奨事項
  • アクセシビリティチェック: 画像のalt属性、見出し構造の確認
  • CSS構文チェック: スタイルファイルの基本的な構文検証

確認方法:

  1. Pull Request作成後、Actionsタブで検証結果を確認
  2. 検証完了後、PR画面下部に品質レポートが自動生成される
  3. ⚠️ 警告がある場合は、指摘内容を確認して修正すること

3.6 品質レポートの見方

Pull Request作成時に以下の情報を含む詳細レポートが生成される。

📊 HTML Quality Report

  • 検証結果: 各品質チェックの実行状況
  • ファイル分析: 処理されたHTMLファイル数、CSSファイル数
  • 品質ガイドライン: 改善のための具体的な指針
  • 設定ファイル: 使用している品質設定の説明

対応方法:

  • ✅マークの項目: 問題なし
  • ⚠️マークの項目: 確認・修正推奨
  • エラーが表示された場合: 該当箇所を修正して再提出

4. 開発環境・品質管理システム

4.1 DevContainer開発環境

このテンプレートは、VS Code + DevContainerによる統一開発環境を提供する。

環境構成：

  • Base OS: Alpine Linux（軽量・高速）
  • Node.js: textlint・品質ツール実行
  • Extensions: HTML/CSS/Japanese入力支援
  • 自動設定: 開くだけで全ツールが利用可能

利用方法：

  1. VS Codeで「Dev Containers: Reopen in Container」を実行
  2. 自動的に開発環境が構築される
  3. ファイル保存時に自動品質チェック実行
  4. リアルタイムフィードバックによる高品質レポート作成

4.2 統合品質管理システム

このテンプレートには、レポートの品質を自動的に検証するシステムが組み込まれている。

📝 リアルタイム品質チェック（VS Code内）

  • textlint: 日本語文書検証（である調、文長制限、専門用語）
  • HTML5 Validator: W3C準拠チェック
  • Live Preview: 即座な表示確認

🔍 Pull Request時自動検証

  • W3C HTML5準拠チェック: 標準的なHTML構文の検証
  • HTMLHint品質チェック: セマンティックHTMLの推奨事項
  • アクセシビリティチェック: 画像alt属性、見出し構造
  • CSS構文チェック: スタイルファイルの基本的な構文検証

📊 自動品質レポート生成

  • Pull Request作成時に詳細な品質分析レポートを自動生成
  • 改善点の具体的な指針を提供
  • 段階的品質向上のための継続フィードバック

About

No description, website, or topics provided.

Resources

Readme

License

MIT license

Contributing

Contributing
Activity
Custom properties

Stars

0 stars

Watchers

1 watching

Forks

2 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages