現在の教材構成

配布ZIPを展開すると、主に次のような構成になっています。VS Codeでは、HTMLファイルを1つずつ開くのではなく、jspsychフォルダ全体を開きます。

jspsych/
    ├── index.html
    ├── vscode.html
    ├── hello-world.html
    ├── fixation.html
    ├── image.html
    ├── audio.html
    ├── video.html
    ├── gonogo.html
    ├── sample-hello-world.html
    ├── sample-fixation.html
    ├── sample-image.html
    ├── sample-audio.html
    ├── sample-video.html
    ├── sample-gonogo.html
    ├── dist/
    │   └── jsPsych本体とプラグイン
    └── media/
        └── 画像・音声・動画

教材一式をパソコンに保存しておけば、インターネットにつながっていなくても、jspsychフォルダのindex.htmlをダブルクリックして目次を開き、各ページを読んで学習できます。外部サイトを開くときはインターネットが必要です。

VS Codeをダウンロードしてインストール

VS Code公式ダウンロードページを開く ↗

macOSの場合

1. 公式ページでmacOS版をダウンロードします。通常はページが適切な版を案内します。
2. ダウンロードした.dmgファイルを開きます。
3. Visual Studio Code.appをアプリケーションフォルダへドラッグします。
4. アプリケーションフォルダからVS Codeを起動します。

Apple MシリーズのMacはApple silicon版、古いIntel搭載MacはIntel版を選びます。分からない場合はUniversal版も利用できます。

macOS Catalina 10.15を使用している場合：現在のVS Codeは対応しておらず、VS Code 1.97が最終対応版です。可能であればmacOSを更新してから最新版を使用してください。公式案内 ↗

Windowsの場合

1. 公式ページでWindows版のUser Installerをダウンロードします。
2. ダウンロードした.exeファイルを実行します。
3. 画面の案内に沿ってインストールし、VS Codeを起動します。

教材フォルダを開く

1. 配布ZIPを展開します。ZIPの中を直接編集しないでください。
2. VS Codeのメニューからファイル → フォルダーを開くを選びます。
3. 展開した教材のjspsychフォルダを選びます。
4. 左側のエクスプローラーにdist、media、各HTMLファイルが表示されることを確認します。

フォルダを信頼するか尋ねられた場合は、授業で配布された教材であることを確認してから信頼するを選びます。

メニューを日本語化

1. 左側の四角が並んだ拡張機能アイコンを押します。
2. 検索欄にJapanese Language Packと入力します。
3. Japanese Language Pack for Visual Studio Codeを選びます。
4. 発行元がMicrosoft、拡張機能IDがMS-CEINTL.vscode-language-pack-jaであることを確認してインストールを押します。
5. 案内に従って表示言語を日本語へ変更し、VS Codeを再起動します。

日本語 Language Packの公式ページ ↗

おすすめの拡張機能

拡張機能画面で名前またはIDを検索し、同名の別拡張機能と間違えないよう発行元も確認します。

Hello Worldを開いてみよう

1. 左側の一覧でsample-hello-world.htmlを選びます。
2. ファイルを右クリックしてOpen with Live Serverを選びます。
3. ブラウザに「はじめてのHTML」と「Hello World!」が表示されれば準備完了です。
4. VS Codeで文字を変更して保存し、ブラウザが更新されることを確認します。

教材の目次に戻る ↑