はじめに
産技高専電気電子工学コースでは、用途に応じて様々なICTツールを活用しています。オフィシャルに用意されているものも含めて、説明をしておきます。また、後半では主にテキストファイルのバージョン管理を行う Git について説明します。
各種 ICT ツールの紹介
1. 校務支援システム
主にシラバス閲覧、成績開示、授業アンケートなどを行います。
2. Google Classroom
学校としてのオフィシャルな掲示板です。昨年度から教務室・学生室・教務学生係・キャリア支援センターなどがオフィシャルな連絡をしてくれるようになりました。電気電子の学生は基本は見ているだけで Ok だったが、昨年度からは一般科目の教員が、これで授業を行うことが多くなりました。今年度はクラスの Classroom ではなく、科目ごとに別に Classroom を作ることになっています。
3. moodle
コースとしてのオフィシャルな LMS です。重要なお知らせは各クラスのアナウンスで流れるので、通知に注意してください。また必要だと思うフォーラムなどは購読しておいてください。クラス以外にも科目ごとにコースが作成され、課題などが科されます。また、ICT活用計画や進路など授業に関係ないコースも作成されるので、各自確認しておいてください。
4. Slack
クラス運営のために活用しているチャットツールです。 以前は、BYOD が始まる 3年生から使っていたが、コロナ禍に合わせて 2 年生から運用するようにしました。 担任からのHR連絡、雑談、科目ごとの課題の共有、各種調査などリアルタイムに必要な情報共有は主にここで行われます。 昨年度は、入院などで学校にしばらく来れない期間があった場合などに、他の人がその期間のノートを共有してあげたりと色々と活用されていました。 是非活発に活用してください。
5. Google Drive
学校として Google Workspace for Education (旧 G Suite) を契約しているため、メール以外に容量無制限の Google Drive が利用できる。 特に、以下のページからインストールできるバソコン版 Google ドライブをインストールすると、この Google Drive がそのままネットワーク共有ドライブのように活用できます。→ パソコン版 Google ドライブを導入する
6. Google Documents
Google Documents (Word のようなもの)、Google Spreadsheet (Excel のようなもの)、Google Slides (PowerPoint のようなもの)の総称です。 複数人で共有編集できるので、グループワークなどにおける班提出資料の作成などで多く使われています。詳細は授業中にデモを使って説明します。
Git によるバージョン管理
後期の情報処理IIIの授業では、ペアプログラミングを実施します。 ペアプログラミングでは、二人でテスト・実装を分け合って記述するため、ソースコードを共有する必要があります。 本コースでは Git という分散リポジトリシステムを活用しています。 ファイルに変更があるごとに差分をコミットしていき、必要があれば任意のタイミングのコミットに戻したりすることも可能となります。 外部のリポジトリサーバ(本コースでは Bitbucket を利用)を経由することで、複数人でリポジトリを共有することも可能となります。 ここでは、最初に既存のフォルダからリポジトリを作成する方法を説明します。次に Bitbucket に設定済の共有リポジトリから、自分のフォルダにクローンを作成し、複数人でリポジトリ共有をする演習を行います。
また、Bitbucket のアカウント作成および公開鍵の登録はすでに設定済であるとします。まだやっていない人は、BYOD PC のセッティング(2021年版: 目次) - hkob’s blogをみて設定しておいてください。
1. 既存のフォルダをリポジトリに設定
レジュメ(1)で作成した「LaTeXtest」フォルダをリポジトリにしようと思います。 もし、レジュメ(1)で「LaTeXtest」というフォルダに入れていなかった場合には、ここで作成しておいてください。 以下、箇条書きで説明を記述します。
新規リポジトリを作成します。macOS 版は「新規..」から「ローカルリポジトリを作成」、Windows 版は「Create」ボタンをクリックします。
新規リポジトリを作成 次にリポジトリの場所を設定します。 macOS 版はパス名の横の「...」を、Windows 版はパス名の横の「参照」をクリックして、前回作成した「LaTeXtest」フォルダを選択します。 実は、ここでリモート(BItbucket 側)のリポジトリも作成できるのですが、Bitbucket 側のやり方も知っておいてもらいたいので、わざと作成しないでお来ます(後で自分でリポジトリを作成する時にはチェックを入れても構わない)。Windows 版ではすでにフォルダがあると警告が出るが、そのまま進めます。 macOS 版では作成後、リストに「LaTeXtest」の名前が出るだけなので、ダブルクリックして開きます。
リポジトリの場所の設定 これでリポジトリの管理画面が開きます。 若干画面表示が異なりますが、内容は同じです。 作成したばかりのためリポジトリは空であり、不明なファイルが8つあるのは共通です。 first.tex は作成したファイルですが、残りの aux (相互参照番号などの記録ファイル)、dvi (組版したファイル)、fdb_latexmk (latexmk の作業ファイル)、fls (latexmk が作業したファイルのリスト)、log (ログファイル)、、sync.gz (tex と pdf の相互位置を記録したファイル)、pdf (組版した結果)の7つのファイルは、システムが自動生成したファイルです。 後者の7つはバージョン管理する必要はないので、これらを無視する設定を行います。
リポジトリ表示画面 この設定ファイルを作成するため、gitignore.ioにアクセスします。出てきた画面に「LaTeX」「macOS」「Windows」「VisualStudioCode」などを入れて「作成する」をクリックします。
gitignore.io ブラウザ画面に .gitignore のテキストが表示されます。 昨年度、何人かの学生が自動翻訳設定にしていたために、列記されているファイル名が日本語に翻訳されていてトラブったという失敗報告がありました。 画面上に日本語の文字列が出てないことを確認した上で、表示されたテキスト全体をコピーしてください。 具体的には、macOS の場合には「Command + A」を押して全テキストを選択し、「Command + C」でクリップボードにコピーします。 Windows の場合には「Control + A」を押して全テキストを選択し、「Control + C」でクリップボードにコピーします。
新しいファイルで「.gitignore」というファイルを作成します。頭の「.」を忘れないようにしてください。
ファイルを追加 先ほどコピーした .gitignore の中身をここに貼り付けます。以下のような形になっていることを確認してください(くれぐれも日本語の文字列になっていないことを再度確認してください)。
.gitignore の作成 .gitignore のおかげで、「first.pdf」以外の余計なファイルは見えなくなりました。 ただし、コンピュータにとって、「first.pdf」が不必要であることは推測できません。そこで、このファイルだけは手動で .gitignore に登録します。どちらの環境でも first.pdf の上で右ボタンを押して「無視...」をクリックします。
右ボタンで「無視...」を選択 どちらの環境でも「無視する範囲」を「このリポジトリのみ」に設定して、「名前に一致するファイルを無視」として「OK」を押します。
このリポジトリのみに「LaTeXtest.pdf」を追加 こうすると「.gitignore」「first.tex」のみが候補に残ったことになります。 この状態で最初のコミットを行います。
- macOS の場合には、左上のコミットボタンを押したのち、二つのファイルにチェックマークをつけます(もしくは、上のチェックボックスをクリックしてもよいです)。
- Windows の場合には、選択項目をインデックスに追加(または全てインデックスに追加」をクリックします。すると、ファイルが下の欄から上の欄に移動します。
- その後、下のメッセージ欄に「first commit」のようにメッセージを記述して、「コミット」ボタンをクリックします。これで最初のコミットが終了します。
- 次にファイルを更新してみます。vscode でフォルダを開いているので、日付を今日に変更してみましょう。 タイプセットして、PDF が書き換わったことを確認したら、SourceTree の画面に戻ってみる。
\date{令和3年 4月 13日 (火)}
SourceTree に戻ると先ほどコミットした「LaTeXtest.tex」がオレンジ色で再度表示されていることがわかる。ここで、「LaTeXtest.tex」をクリックしてみると前に書いた日付が赤色で「-」、書き換えた日付が緑色で「+」で記載されていることがわかる。リポジトリにはこの差分情報のみが記録される。ここにあるように「日付の変更」として再度コミットしてみる。
差分のコミット ここでこれまでの履歴を確認してみます。 「ファイルステータス」の下の「履歴」(macOS)または「History」(Windows)をクリックしてみます。 するとここまでの二つのコミットが順に表示されていることがわかります。 ただし、確認したら「ファイルステータス」に戻しておいてください。 よほどのことがない限り、過去のファイルに戻したいということはそんなにないと思いますが、どうしてもやり方が知りたい人は自分で調べるか私まで連絡してください。
2. 手元のリポジトリを Bitbucket に新規登録
一台のマシンでリポジトリ管理するのも便利です。 さらに、外部にリポジトリを保存すると、マシンのトラブル時や複数台のマシンでの共有、今後実施するペアプログラミングなどの際にも活用できるようになります。 ここでは、先に登録してもらった Bitbucket へのリポジトリ登録方法を説明します。 ブラウザ画面については、ほとんど同じなので macOS の Safari の画面のみを掲載します。 また、内容はほとんど同じなので、昨年度の画面をそのまま使わせてもらいます。
Bitbucket にログインし、左側の「+」をクリックします(左図)。 その後、ポップアップメニューから「CREATE」の下の「リポジトリ」をクリックします(中央図)。 ここで出てきたウインドウで、リポジトリ名を「LaTeXtest」、「READMEを含めますか?」を「No」、Default branch name を「master」、プログラミング言語を「LaTeX」として「リポジトリの作成」をクリックします。最近は、「master」という名前は使わず「main」を使う流れになっていますが、ローカルで作ったものが「master」になっているのでそちらに合わせます。
新規リポジトリの作成 次のような画面になるので、「パケツに何かを入れましょう」の下に「SSH」と書かれていることを確認した上で、文字列の右側の「Copyアイコン」をクリックします。
SourceTree の画面に戻り、右上の歯車アイコンの「設定」をクリックし、「リモート」タブを表示します。ここで「追加」ボタンをクリックします。
SourceTree - 設定 - リモート リモートの名前(リモート名)は「origin」、URL/パスに先ほどコピーした文字列を貼り付ける。その後、頭についている「git clone 」という文字列を消して、「git@bitbucket.org」から始まる文字列だけを残します。 設定ができたら、「OK」を押してください。
リモートリポジトリの登録 この後の手順は OS ごとに異なるので、先に Windows 版を説明します。 最初に「プッシュ」をクリックして表示されたダイアログで「master」の横のチェックボックスをクリックし、プッシュをクリックします。
プッシュの設定 bitbucket のキーの確認が表示されるので、「はい」をクリックします。
キャッシュの確認 プロセスを再起動する必要があると表示されるので、「OK」をクリックします。 実際にプッシュが進まなかったので、再度プッシュをやり直したらうまく動作しました。
再実行の警告画面 次に macOS 側を説明します。以前は macOS 版はトラブらなかったのですが、今回はうまく動作しませんでした。そこで、Windows 版で自動で設定できたキャッシュの登録を手動で行うます(SourceTree 4.0 に上げてから不具合が目立つ気がしています)。vscode 上のターミナルを開き、ssh で bitbucket.org に接続し、キーを登録します。
> ssh bitbucket.org The authenticity of host 'bitbucket.org (18.205.93.1)' can't be established. RSA key fingerprint is SHA256:zzXQOXSRBEiUtuE8AikJYKwbHaxvSc0ojez9YXaGp1A. Are you sure you want to continue connecting (yes/no/[fingerprint])? yes Warning: Permanently added 'bitbucket.org,18.205.93.1' (RSA) to the list of known hosts. PTY allocation request failed on channel 0 logged in as hkob You can use git or hg to connect to Bitbucket. Shell access is disabled Connection to bitbucket.org closed.
ここでキーが登録されれば、Windows 版と同様に処理ができるようになります。 まず、SourceTree でプッシュをクリックし、さらに「master」の横のチェックボックスをクリックして「OK」をクリックします。
プッシュの設定 場合によっては出ないかもしれないが、もしパスワード要求があったら Bitbucket のパスワードを入力します。
パスワード要求 詳細をみると、git push が成功していることがわかります。
進捗の詳細画面 この後は、ローカルでコミットし、成功したらプッシュすることで Bitbucket にもリポジトリのバックアップが保存されることになります。
3. 既存のリポジトリのクローン
次に、私が用意したリポジトリを各学生がクローンし、自分の担当分を編集してコミット・プッシュする練習を行います。 投票機能で Bitbucket の設定が終わったと宣言した学生に対して、私のリポジトリの書き込み権限を付与します。 リポジトリの招待を受けたら、Bitbucket にログインすると「test_ip3300_2021」というリポジトリが見えるようになります。
表示された画面で「クローンを作成」というリンクをクリックします。
その後、下のような画面が表示されるので「Clone in Sourcetree」というボタンをクリックします。
すると macOS 版、Windows 版ともにダイアログが現れるので許可します。
ここから macOS 版と Windows 版で対応が異なったので、別々に表記します。
macOS 版では以下のようなダイアログが表示されます。
このままだとホームディレクトリの直下にファイルを作成してしまうので、LaTeX フォルダを作成し、さらにその下に test_ip3300_2021 というフォルダを作成して、そこに保存することにしました。まず、フォルダ名の右の「...」をクリックし、LaTeX フォルダ、さらにその下にtest_ip3300_2020 フォルダを作成します。過去に作った LaTeXtest なども後でここに移動するとよいと思います。
作成した test_ip3300_2020 が選ばれたところで、開くをクリックします。
以下のようにフォルダ名が変わったことを確認して、「クローン」をクリックします。
このフォルダを vscode で開きたいので、「端末」をクリックして表示されたターミナルに以下のコマンドをタイプします。macOS 版はこれで終了です。
code .
Windows 版は SourceTree が開くものの URL がうまく引き継がれないようでした。
仕方ないので、SourceTree を開き、タブの「+」をクリックした後で、「Remote」をクリックします。
以下の図のようにアカウントが見えているのと思うので、下の「アカウントを編集」をクリックします。
アカウントを表示すると「プロトコル」の部分が「HTTPS」になってしまっています。
ここで編集をクリックして設定を変更します。
優先するプロトコルを「SSH」に変更します。
「OK」ボタンが押せなくなっているので、「OAuthトークンを再読み込み」とします。
一度ブラウザを使って認証作業が行われ、SourceTree に戻るように言われます。
このページは閉じてしまって構いません。
SourceTree に戻ると下の画面のように「認証に成功」という文字が書かれて「OK」が押せるようになります。
「OK」を押せばプロトコル変更が成功したことになります。
元の画面に戻り、右に表示されるリストから「test_ip3300_2021」を選択します(私の場合は保有しているリポジトリが多すぎるのでリポジトリ名をタイプして絞り込んでいるが、学生は2個しか表示されていないのでタイプの必要はありません)。
ここで、test_ip3300_2021 の右にある「Clone」をクリックします。
これで macOS と同様にクローンの画面になります。
デフォルトで Documents の下の test_ip3300_2020 にクローンされます。
もし場所を変えたければ、右の参照で変更するとよいです。
この例では Documents の下に LaTeX というフォルダを作り、さらにその下に test_ip3300_2021 というフォルダを作っています。
フォルダを指定したら、最後に「クローン」をクリックします。
Windows でもこのフォルダを vscode で開きたいので、「Explorer」をクリックして Explorer で表示したのち、右ボタンで「code で開く」とするとよいです。
どちらの環境でも vsocde のフォルダの場所に、各学生ごとのファイルが保存されていることがわかります。
ここから自分の学生番号のファイルを開き、タイプセットを実行する(Command+Option+b または Ctrl+Alt+b)。
実は、1行目の% !TEX root =main.texという行により、自動的に main.tex がタイプセットされるようになっています。
右側に PDF を表示して(Command+Option+v または Ctrl+Alt+v)、タイプセット結果を確認してみてください。
4. 複数人でのリポジトリ管理 (演習課題)
上記のクローンが設定できたら、自分の学生番号のファイルを自分の環境に合わせて書き換えてください。 誰も M1 MacBook Air でないはずなので、全員の PC が異なるはずです。 タイプセットしてコンパイルが正しく実行できたら以下の手順で、プル、コミット、プッシュを実行します。
注釈: 通常は、複数人が同じファイルを編集する可能性があるので、コミット→プル→必要ならコミット→プッシュという形になるのですが、今回は同じファイルを編集する可能性が全くないため、最初のコミットを省略することにします
- 自分のファイルを編集します
- タイプセットします
- 結果を確認して、正しくタイプセットされていることを確認します
- SourceTree にて、「プル」を実行します。これにより他人が編集した内容が自分のリポジトリに保存されます
- 2 で実施した手順でコミットします
- 同様にプッシュを実行します。もし、他人のプッシュとかぶってエラーが出た場合には、プルからやり直します。
- 履歴で正しくプッシュできたことを確認します。
この課題はリポジトリで確認できるので、課題自体を moodle で提出する必要はありません。 採点結果は、課題2のところで確認できます。後日、moodle の通知を確認してください。
かなり長くなってしまったが、これが2回目、3回目の授業内容となります。
P.S. 昨年度までは、ターミナルや PowerShell を開いていくつかの作業をしていました。 SourceTree のアプリからターミナルを開くと、該当のフォルダでターミナルが開けるためです。 ただし、今年度からは vscode を運用しているので、説明を簡略化するために vscode 内のターミナルで簡単な処理は実施することにしました。 ターミナルの開き方については省略します。
