情報リテラシー実習Ⅱ　遠隔授業プラス

テーマ：VSCodeの利用

授業ではAdobeのDreamWeaverという、ホームページ作成ソフトを使用していますが、非常に高価なため、個人で導入している人は少ないと思います。

そのため、ご自宅で自習しようとしても、なかなか環境を揃えることは困難だと思います。

この授業では、HTMLやCSSを自習したい、自宅から課題を提出したいなどと思われている方のために、Microsoft社が開発している、VSCodeの紹介と利用方法、DreamWeaverとの違い、学外から学校のサーバーに接続し、課題提出する方法をご紹介したいと思います。

VSCodeとはh

VSCodeとは、正式にはVisual Studio Codeといい、Microsoft社の提供する無償のコードエディタです。

エディタとしての使いやすさはもちろん、さまざまな拡張機能によって使い勝手を向上させたり、利用の領域を拡げられるのが魅力です。

学外でHTMLを作成したいと思っても、DreamWeaverがインストールされていないと効率が上がりません。

そこで、遠隔授業プラスでは、自宅でも課題に取り組めるよう、VSCodeの使い方を解説します。
ぜひ活用してください。

インストール

VS Codeのインストールは、Googleなどで検索し、公式サイト（code.visualstudio.com/download）からお使いのOS（Windows/Mac/Linux）用インストーラーをダウンロードし、実行するだけです。Windowsではインストーラーを起動後、「同意する」「次へ」「インストール」をクリックすれば良い。
デフォルトのオプションのまま進めて問題ありません。

またWindowsであれば、Microsoftストアから「Visual Studio Code」で検索してインストールボタンを押せば完了します。

お好みで選んでください。

起動するには、［スタート］メニューをクリックし、すべてのアプリから［Visual Studio Code］をクリックして起動するか、エクスプローラーでファイル名の上で右クリック→「アプリケーションで開く」で表示される一覧に「Visual Studio Code」があればそこから起動してファイルも開けます。

起動するとデフォルトではウェルカムページが表示されます。
ウェルカムページには、最近開いたものの一覧、ファイルを開く操作、ちょっとしたTipsなどが表示されます。

なお、毎月更新され、その都度改良や、機能が追加されます。
その際には起動時に通知されますので、時間があるときにアップデートしてください。

各部の構成

キャプションバー
編集中のファイルやワークスペースが表示されるのがキャプションバーです。

アクティビティバー
タスク（作業）の内容を大きく切り替えるのがアクティビティバーです。アクティビティバーには、初期状態で上に5つ、下に2つのアイコンがあります。上から順番に、以下の機能となっています。
（拡張機能をインストールするとアイコンが追加されることがあります。）
- エクスプローラー：ファイルやフォルダをツリー表示する
- 検索：検索を実行し、結果を表示する
- ソース管理：変更のあったファイルを一覧表示し、コミットも行う
- 実行とデバッグ：編集中のファイルから直ちに実行したり、デバッグしたりする
- 拡張機能：拡張機能をインストールしたり、アンインストールしたりする
- アカウント：サインイン中のユーザの情報や設定の同期を行う
- 設定：VSCodeのさまざまな設定を行う

プライマリサイドバー
アクティビティバーのアイコンのクリックによって表示され、対応する作業の場所となるのがプライマリサイドバーです。
通常はエクスプローラーを表示させておくことが多いですが、編集画面が狭くて邪魔な場合はたたんでおくことができます。

エディタグループ
エディタとしてはある意味メインとなる部分がエディタグループです。開いているファイルをタブで表示したり、アクティビティバーの操作によって作業ページをタブで表示したりします。エディタグループ内では、エディタを左右または上下に分割したり、ファイルについては変更内容をdiff形式で表示したりすることができます。

セカンダリサイドバー
プライマリサイドバーのサブ的な位置付けとして使用できるのがセカンダリサイドバーです。

パネル
通常はエディタグループの下に表示され、問題の箇所、コンソール出力、デバッグコンソール、ターミナルなどを切り替えながら利用できるスペースがパネルです。

ステータスバー
ステータスバーには、カーソル位置、タブのスペース数、文字コード、改行文字、プログラミング言語、フィードバックや通知のショートカットアイコンが表示されます。
拡張機能をインストールした場合は、アイコンが追加される場合があります。

日本語化

インストールすればすぐに使えますが、メニュー等が英語表記になっているので戸惑うかもしれません。

そこで日本語化して使いやすくしましょう。

必要になってくる作業が拡張機能のインストールです。

左側ペインから拡張機能を選択。

「Japanese Language Pack」と入力して検索。
Japan…と入力してゆくと絞り込まれて表示されます。

表示された Extensions の一覧の中から「Japanese Language Pack for Visual Studio Code」をクリック。

「Japanese Language Pack for Visual Studio Code」の画面が表示されますので、「install」をクリック。

インストール完了後、画面右下に「Change Language and Restart」と表示されるのでクリックして再起動する。

これでメニュー等のUIが日本語化されます。

ファイルの作成

方法１

ファイルメニューから「新しいテキストファイル」を選択
ウィンドウサイズによっては、ファイルメニューが表示されない場合があるが、その時はハンバーガーメニュー（三本線のアイコン）をクリックする

下のバーの「プレーンテキスト」をクリック

上部「検索メニュー」のところに「言語モードの選択」入力フィールドが表示されるので、「HTML」と入力し〔Enter〕キーを押します。

半角「<」を入力していくと候補がリストされるので、マウスでクリックするか矢印キーで選択し〔Enter〕キーを押すと、自動的に補完され、「>」を押すと閉じタグを補完してくれます。

これで、DreamWeaverと同じような使い勝手になりますが、HTMLのスケルトンを順次入力していく必要があります。

もう一つの方法は、

ファイルメニューから、「新しいファイル」を選択すると、先と同様に上部「検索メニュー」のところに「言語モードの選択」入力フィールドが表示されます。

「HTML」と入力し〔Enter〕キーを押します。
すると、「ファイルの作成」ウィンドウが開き、あらかじめ決めた保存場所を指定して、ファイル名を入力して保存します。
作成するファイル名が決まっている場合はこの方法が便利でしょう。

あとは、上記同様、半角「<」を入力していくと候補がリストされるので、マウスでクリックするか矢印キーで選択し〔Enter〕キーを押すと、自動的に補完され、「>」を押すと閉じタグを補完してくれる。

いずれにしても、新規で作成すると、空白のウィンドウが開きます。
補完機能がありますので、キータッチは少なくなりますが、定型のHTML入力が必要です。
そこで、もっと簡単ににゅうりょくする方法を見てみましょう。
VS Codeには、デフォルトで「Emmet」という機能が搭載されているので簡単にスケルトンを入力することができます。

EMMETとは

HTMLやCSSのコーディングを高速化する省略記法（ショートカット）と、それを展開する機能です。（DreamWeaverにも搭載されている）

ただし、Emmetの機能を利用するには、事前にファイルの属性を、対応する言語モードに変更しておく必要があります。（HTML等）

便利な使い方

半角の「!」を入力した後「Tab」を押すとHTMLのスケルトンに展開されます。

ただし、出来上がったHTMLは「Lang=”en”」（英語）となっていることに注意が必要です。
このままブラウザでHTMLを表示すると文字化けする可能性があります。

Emmetで作成されるHTMLのLanguageを日本語（ja）にする方法

VS Codeの歯車アイコン＞設定（Ctrl+,）を開く。

検索欄に emmet.variables と入力。

「Emmet: Variables」項目で「項目の追加」をクリック。

項目（Key）に lang、値（Value）に ja を入力。

OKを押して設定を保存。

その他の機能

Emmetの記法は独自のものなので、覚えるまでは大変ですが、一度覚えてしまうと高速にコーディングすることができます。

一例
「h1」（先頭の<をつけずに）〔Tab〕キーを押すと
```
<h1></h1>
```
と展開してくれる。この場合あまりメリットを感じないが、次のような場合には劇的に効率化される。
半角で「ul>li*3」と入力して〔Tab〕キーを押すと
```
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
```
のように展開してくれます。
また、メニューボタンのようにコーディングするには、
半角で「ul>li*3>a」と入力して「Tab」キーを押すと
```
    <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
```
のように展開してくれます。非常に早くなりますね。

CSSファイルの作成

CSSファイルを作成するのは、別途ファイルを作っておく必要があります。
HTMLと同様に、「ファイル」メニューから、「新しいファイル」を選択します。
BOXに「css」と入力して「Enter」キーを押すと、「保存」ウィンドウが開きますので、適切な名前をつけて保存します。

1行目にはDream Weaverと同じように「@charset "utf-8";」と入れておきましょう。

あとは、CSSの記法に従い入力していきましょう。
こちらも補完機能がありますので、文字入力していくと候補がリストされますので、選択していきます。

CSSファイルの添付

HTMLにCSSファイルを添付するには、HTMLファイルに切り替え、

<head>と</head>の間、</title>の後ぐらいに半角で

「<link」と打ちます。スペースキーを入れて「h」と入力すると候補がリストされるので「href」を選択します。これで「href="”」のように補完され、キャレットがダブルコーテーションの間に点滅します。
ここに添付するCSSファイル名を記述するのですが、すでにCSSファイルを作成している場合は、半角で「./」と入力すると、HTMLファイルを保存したフォルダと同じフォルダにあるファイルが一覧されますので、必要なファイルを選択します。
ファイルも選択するだけですね。

その後に　「rel="stylesheet" type="text/css"/>」と入力するのですが、こちらも補完機能が働きますので、実際に入力するのは、「re」、「s」、「t」、「/c」、「>」くらいです。

拡張機能

機能拡張は、有志が作成した、より便利にする機能で、編集を快適にしてくれます

。
導入方法は、一番最初に日本語化の拡張機能を入れたときと同じです。
ここでは、おススメの拡張機能をいくつか紹介します。

Auto Rename Tag
開始タグを変更すれば、自動で終了タグも変更してくれる

Prettier
コードを自動的に整形してくれるツールです。

HTML Hint
htmlの文法に間違いがあると、表示してくれます。

IntelliSense for CSS
CSS側で定義されているclassやid名の入力候補を補完してくれる機能

Live Server
ローカル環境でHTMLファイルをリアルタイムにプレビューするための拡張機能です。

Color the tag name（タグに色つけ太郎）
HTMLやJSXのタグをカラフルにして分かりやすくするための拡張機能

SFTP
自分のPCから課題を提出することができます。

LIVE Server

DreamWeaverでは、コード入力したり、CSSを設定すると、リアルタイムにプレビュー画面が変更されます。

しかしVS Codeにはプレビュー機能が実装されていません。

そこで便利なのがVisual Studio Code（VSCode）の拡張機能である「Live Server」です。この拡張機能を使うことで、ローカル環境でウェブサイトを簡単にプレビューできるようになります。

この拡張機能をインストールすると、自分のコンピュータ内でローカルウェブサーバーを立ち上げ、ウェブページをブラウザで表示できるようにします。

インストール
- VSCodeの拡張機能タブ（左側の四角いアイコン）をクリックし、「Live Server」と検索してインストールする。

HTMLファイルを開く
- プロジェクト内のHTMLファイルを開く。
- あらかじめ「フォルダを開く」で、プロジェクトのフォルダを指定しておかないと機能しないので注意が必要です。

Live Serverを起動
- 画面右下のステータスバーにある「Go Live」をクリックするか、ファイルを右クリックして「Open with Live Server」を選択する。

ブラウザで表示される
- 自動的にブラウザが立ち上がり、http://127.0.0.1:5500/のようなURLでウェブページが表示されます。編集を加え、保存するたびにブラウザがリロードされ、リアルタイムに変更を確認できます。（いちいち保存して、HTMLをダブルクリックして開く必要がないので便利です。）
- DreamWeaverとの違いは、ブラウザを起動しておかなくてなならない点ですが、DreamWeaverのプレビュー（ライブ表示）では表現できないCSSが、実際のブラウザで確認できることです。

学外から課題提出する方法

以上がVSCodeの使用方法になりますが、学外から学校のサーバーに接続し提出する方法をご紹介します。

VPNの設定

学校のサーバーに接続するには、VPNという方法で接続する必要があります。

詳細は、情報教育環境ガイドブック vivIThttps://www.dwc.doshisha.ac.jp/dp/vivit_student2026を読んで下さい。
その中の71ページ目から書かれているように、VPNのソフトをインストールする必要があります。ご自分のPCの種類に応じて、必要なソフトをダウンロードして下さい。
リンクは、ページ下部に貼っておきます。

VPN ソフトのダウンロードとインストール

Windows用 BIGIPEdgeClient.zip : BIGIPEdgeClient.exe

Mac用 BIGIPMacEdgeClient.zip：mac_edgesvpn.pkg

Windowsなら、BIGIPEdgeClient.zipという圧縮ファイルがダウンロードされますので、解凍して下さい。

BIGIPEdgeClient.exeというファイルが表示されたら、ダブルクリックして、表示に従いインストールして下さい。

場合によっては「Windows によって PC が保護されました」という警告が消磁されることがあります。
この場合は、「詳細情報」の文字をクリックして、「実行」ボタンを押して下さい。

インストールが完了したら「Finish」ボタンを押して終了します。

スタートメニューから、「すべてを表示」ボタンを押して、アプリの一覧から「BIG-IP Edge Client」のアイコンを探し、クリックします。
一番最初の起動時に、アップデートのインストールが何回か表示されることがありますので、「Yes」を押してアップデートして下さい。

起動したら、学校のユーザーIDとパスワードでログインします。

ブラウザ（Edge、Chrome等）を起動し、URL欄に「ホームページサイト一覧」のアドレス

http://webi.pcedu.dwc.doshisha.ac.jp/edu/edu_new/service/hp/hp_ichiran/student/

と入力して作成したページが見られたら成功です。
学校のサーバーに接続する作業が終了したら、VPN切断しBIG-IP Edge Clientを終了して下さい。

VS CodeにSFTPをインストール

課題を学校のサーバーにアップロードするには、「FTP」という機能で転送します。
しかし、VS CodeにはFTP機能がありませんので、拡張機能を導入する必要があります。

VS Codeを起動し、「拡張機能」アイコンをクリック

一番上のBOXに「SFTP」と入力します。

アプリがリスト表示されるので、
Natizyskunk（ナティジスカンク）氏作のSFTP（おそらくトップに表示されますが、同名の拡張機能が表示されますので、間違えないようにして下さい）をインストールします。

インストールが完了したら、上部の「エクスプローラー」アイコンをクリックます。

キーボードから「Cmd+Shift+P」のキーを同時に押します。

表示されたコマンドパレットに「SFTP: config」と入力します。

すると、以下のようなファイルが表示されますので、例に従って変更します。

ただし、”password”の項目は表示されていない場合は入力して下さい。

{
    "name": "DWC",//
    "host": "web.pcedu.dwc.doshisha.ac.jp",
    "protocol": "ftp",
    "port": 21,
    "username": "あなたのユーザーID",//例えばCS000000
    "password": "指定されたパスワード",
    "remotePath": "/あなたのユーザーID/",//例えばCS000000（usernameと同じもの）
    "uploadOnSave": false,
    "useTempFile": false,
    "openSsh": false
}

自動的にフォルダ内に「.vscode」フォルダが作成され、「sftp.json」という名前で保存されます。

課題を編集し提出する

学校で作成したページの続きを作成する場合は、「初回のみ」以下の作業をして下さい。

「ドキュメント」フォルダ（デスクトップでも結構です）に新規フォルダを作成し「Web公開用」など、わかりやすい名前をつけます。

VS Codeを開き、「ファイル」メニューから、「フォルダを開く」を選択します。

フォルダ選択のウィンドウが開いたら、先ほど作成した「Web公開用」フォルダを選択し、［フォルダの選択］ボタンを押します。

VPNで学校のサーバーに接続します。

vs codeのエクスプローラーペイン上でマウスの右ボタンをクリックし、表示されたメニューから、「Sync Remote →Local」を選択します。

うまく接続されると、学校のサーバーからダウンロードされます。（エラーが出た場合は、設定ファイルを見直してみて下さい。）

エクスプローラーから編集したいHTMLをダブルクリックし、編集します。

作成したファイルをアップロードするには、作成したファイルを保存し、エクスプローラーに表示された、アップロードしたいファイル名の上でマウスの右ボタンをクリックし、「Upload File」を選択します。

アップロードが完了したら、Edge等のブラウザを開き、URL欄にhttp://web.pcedu.dwc.doshisha.ac.jp/あなたのユーザーID/と入力し、授業で作成したMyHomepageが表示され、「情報リテラシー実習Ⅱの課題」のリンクをクリックして、表示されたら提出完了です。

一連の作業が完了したら、VPNを終了して下さい。

後日、作業を再開したいときは、VPNで接続しなくともオフラインで編集し、完了してから8からの作業をしてください。

以上がVSodeの紹介と課題の提出方法でした。
もし、授業以外でHTML作成やプログラムを作成されるときにお役に立てれば幸いです。