Google Classroomを利用していると、前期と今学期のクラスが混在して見づらくなることがあります。この記事では、JavaScriptを使ってGoogle ClassroomのUIをカスタマイズし、特定のクラスを非表示にする方法について解説します。プログラミング初心者の方でも理解できるよう、基礎的な部分から説明します。
JavaScriptとは？
JavaScript（JS）は、ウェブページを動的に操作するためのプログラミング言語です。ウェブページ上でクリック、入力、スクロールなどの操作をトリガーにして、表示内容を変更したり、処理を実行したりすることができます。
例えば、特定の要素を非表示にしたり、動的にコンテンツを変更したりすることができるため、Google Classroomのようなウェブアプリのカスタマイズにも利用できます。
Google Classroomのクラスを非表示にする方法
Google Classroomでは、教師側が「アーカイブ」を使ってクラスを非表示にできますが、これは生徒側からはできません。しかし、JavaScriptを使うことで、ブラウザ上でクラスを非表示にすることが可能です。
まず、Google Classroomのページを開き、ブラウザの「開発者ツール」を使って、JavaScriptを実行する準備をします。次に、以下のような簡単なスクリプトを使って、特定のクラスを非表示にすることができます。
document.querySelectorAll('.class-card').forEach(function(card) {
if (card.innerText.includes('前期のクラス')) {
card.style.display = 'none';
}
});どのようにスクリプトを実行するか？
スクリプトを実行するには、以下の手順を試してください。
- Google Classroomのページを開く
- ブラウザの開発者ツールを開く（Chromeの場合、右クリック →「検証」）
- 「Console」タブに上記のJavaScriptコードを貼り付けてEnterキーを押す
これで、指定した条件に合うクラスが非表示になります。
プログラミング初心者でもできるのか？
JavaScriptはプログラミング初心者にとっては少し敷居が高いかもしれませんが、上記のスクリプトはとてもシンプルで、コピー＆ペーストで使うことができます。実際に手順に沿って進めることで、少しずつプログラムの基本を学んでいけます。
もしプログラムの用語がわからなくても心配いりません。上記のスクリプトは、特定の文字列を含む要素を見つけて表示を変更するだけのシンプルな処理なので、試してみることで理解が深まります。
まとめ
JavaScriptを使ってGoogle ClassroomのUIをカスタマイズする方法は、特定のクラスを非表示にしたり、表示を整えることができる便利な方法です。プログラミング初心者でも、簡単なコードを使って、ブラウザで実行することが可能です。この方法で、学期ごとに表示されるクラスを整理し、より見やすくすることができます。
コメント