メディア表現 VI 10.プロジェクト管理 + バージョン管理

メディア表現 VI TOP に戻る

本日の内容

【第10回】プロジェクト管理 Slackを用いたプロジェクト管理について学修する。

となっていますが、Slackの紹介をしてから、

バージョン管理ファイルの更新記録を管理するGit/Githubについて学修する。

もやっていきましょう。(一回ずつまいて、14回目にFlutterFlowについても触れたいと思います。)

前回のおさらい

Notionの使い方自体はそんなに難しくなかったと思いますが、実は

データベースの設計
統合

という作業をしていることになります。 データベースというキーワードがこの演習の中で何度も出てきていると思いますが、これに慣れて欲しいです。プログラミングをしないでも様々なことができるノーコード・ローコードツールですが、結局、設計はしっかり考える必要があります。

Slack

Slackとは？

Slack とは何でしょう？

Teamsもチャットをベースに様々な機能が利用できるツールです。

SlackもTeamsもどちらもコミュニケーションツールであることには変わりありません。

TeamsはOffice 365を利用する企業が、チームワークを向上できるように開発されました。

違いは

多人数のビデオ会議利用が多いなら、Microsoft Teams
テキストコミュニケーション重視なら、Slack

としている見方が多い模様です。

コロナでリモートワークが普及し、一気にビジネスコミュニケーションツールが普及した経緯があります。

元々Slackのシェア率が高かったのですが、Teamsが追い越しました。これは、Office365を利用していた会社がそのままTeamsを利用したことによるでしょう。

オンラインミーティングのツールとしてはTeams,Zoom,Webex等いくつかありコロナ時にどれを使うかの検討が行われました。

シェアとしてはTeams>Slackとなりますが、利用目的がTemasではオンラインミーティングというのが多いかもしれません。

連携アプリ

ビジネスコミュニケーションツールであるTeamsもSlackも他のツールとの連携ができることが一つの特徴です。

Teamsを見てみましょう。チャンネルのタブの「投稿」「Files」の右に「+」があり、そこからアプリをタブとして追加することができます。試しにmindを検索するとMindMupがここにもありますね。

左バーの一番下にもアプリアイコンがあり、そこからいわゆるアプリとして追加することもできるようです。

Slackの連携についてみてみましょう。 Slack連携ツール・アプリおすすめ21選！スケジュール・タスク管理を効率化

Teams,Slackとも連携ツールに同じものもあります。 Googleのサービスに関してはGoogleDrive等、Slackでしか現状、連携が取れない模様です。

まとめ

オンラインミーティングのツールとしてのTeams, ビジネスコミュニケーションツールとしてのSlackですが、進化した結果、そこまで多くの違いのないところを目指しているように感じます。

連携アプリは数多いのですが、使いこなすとより便利になるかもしれません。社会に出て「もう少し便利にならないかな」と思ったら、ビジネスコミュニケーションツール及びその連携ツールを調べてみましょう。

一つだけ注意があります。複数人で利用する場合、グループ内に新しいツールに適応できない人がいる場合には機能しません。全員のITリテラシーを高めていく必要があります。

バージョン管理

バージョン管理とは？

現在でも課題提出などで当てはまるかもしれませんが、仕事をし始めるとたくさんの書類を作成することとなります。

そして、

書類自体をどんどんブラッシュアップする
内容を追記する

等の理由により修正を加えることが日常的に起こります。

そうすると

どこを変更したのか？

ということを管理したくなります。後で、「あ、やっぱり前の方が良かったので、元に戻して！」なんて指示もあったりします。

これは、いわゆる文書だけでなく、デザイン、映像等全てに当てはまることです。

この時に、元に戻る方法を忘れてしまうと非常に困ります。さて、どうしたものでしょうか？

ファイル名等によるバージョン管理

一番オーソドックスなのは、

時間割案_ver100.txt
時間割案_ver101.txt

や

時間割案_20221125.txt
時間割案_20221213.txt

等のように、ファイル名にバージョン、日付、日時を付加して管理する方法です。(.txtとテキストファイルになっていますが、どんな拡張子でも利用できます。)

個人的にはこの方法が確実なため、現在も利用しています。

ちなみに、イラストレーターの入稿時、テキストをアウトライン化することがあります。後で、誤字に気づいた時に、管理をしていないと困るため

名刺_20221125.ai
名刺_20221125_ol.ai

と、アウトライン化する前、後のファイルを保存しておきます。誤字があたっときには「名刺_20221125.ai」をコピーして

名刺_20221130.ai

等とリネームして、修正を加えます。

ファイルの比較

少し修正しただけだと、どこを修正したのか確認するのが大変な時があります。テキストファイルであれば、diffというコマンドを利用すると簡単に比較できます。

が…ターミナル慣れていない人が多いので、やってみようの1でダウンロードしてから、VSCodeでやってみよう、に飛ばしましょう。(余裕ある人は試してくれてOKです。)

やってみよう

diff_text.zipをダウンロードして解凍する。
わかりやすくするためにデスクトップに移動
コマンド+スペースでSpotlightを出してターミナルを開く
username$ の後に cdとスペースを入力し、デスクトップのdiff_testフォルダをドラッグ&ドロップ
cd /Users/sammy/Desktop/diff_testみたいになったらリターン（作業するフォルダを指定しています）
diff syllubus_ver10.txt syllubus_ver11.txt と入力してリターン

すると、2箇所のファイルの違う箇所がリストアップされます。

diffの説明

「12c12,15」とは12行目が変更（change）され12行目から15行目の内容に取って代わったことを示します。
その後に、変更前、「—」変更後、と表示されます。

他にも「5d4」とあれば、5行目が削除(delete)されて、4行まで詰められたという意味になります。

ちょっと使いづらいですね。

VSCodeでやってみよう

VSCodeで新しいウィンドウを開く
二つのファイルをドラッグ&ドロップ
syllubus_ver10.txtをアクティブに
Command+Shift+PでCompareと入力し、「ファイル：アクティブファイルを比較しています」を選択
syllubus_ver11.txtを選択

左右にウィンドウが分かれ、比較することができます。

右上の「…」からインラインビューを選択すると、一つのウィンドウで異なっている部分が上下に並んで比較することができます。

2つのファイルの内容を比較して差分を表示する

バージョン管理システム

バージョン管理システムとは

手作業ではバージョン管理が大変だよね、ということでバージョン管理システムというものが開発されます。

SCSS(1972) テキストファイルのみに対応
RCS(1982) バイナリファイルにも対応
CVS(1990) サーバ上で管理
SVN,Subversion(2000) ファイル名・ディレクトリ名の変更に対応
Git, Mercurial(2005) より高機能に(サーバ上のリモートリポジトリ、PC上のローカルディレクトリ)
主流はGitに

参考：Gitが出来るまでの歴史と将来の展望(バージョン管理システム)

個人的にはWebの仕事において、バージョン管理の必要に迫られていたため、Subversionあたりを試した記憶があります。でも、あまり使い勝手が良くなくて、結局手動での管理をしていました。

ですが、現場を離れてGitがさらに注目されているなぁ、と感じ始めました。至る所で使われている時代の流れを感じました。

また、このようなTweetが目につくようになりました。

情報系学科で教員はGitを教えろ

Gitとは？

Gitで管理しているファイルであれば、コンピュータ上でファイルの編集履歴を管理できるので、古いバージョンから新しいバージョンまでの管理が簡単に行うことができます。

Gitでできること

古いバージョンに簡単に戻せる
新旧のファイルを一元管理できる
編集した履歴を複数人で共有できる
複数人で修正した部分を一つに統合できる

誰が使える？

テキストファイル・バイナリーファイル、なんでも扱えるため、

プログラマー
Webデザイナー

に限らず、あらゆる事務作業に利用できます。

Gitの構成

Gitの構造

リポジトリ

ファイルやディレクトリを入れておくもので、二つに分かれます。

リモートリポジトリ(特定のサーバ上にあり、複数人で共有することが可能)
ローカルリポジトリ(自分のPC上にある)

普段の作業はローカルリポジトリで行い、共有するときにリモートリポジトリに作業内容を上げることができます。

コミット

ファイルの保存をもう少し大きくした感じで、「この作業が終わったよ」「ここ修正したよ」という宣言みたいなものです。

作業や修正は複数ファイルにわたることがあるため、

ワークツリー：作業しているところ
インデックス：コミットに関連するファイルを登録するところ

の二つがあります。

クローン

リモートリポジトリからローカルリポジトリに丸ごとダウンロードしてくる機能となります。

プル

リモートディレクトリとローカルリポジトリとの差の部分だけダウンロードして情報を最新にする機能です。

プッシュ

ローカルリポジトリにあるファイルをリモートリポジトリに上げる機能です。

ブランチ

複数人で作業していると、Aさんはこのファイルをいじってるけど、Bさんはこのファイルをいじっている、ということが起こり、混乱の元となります。

そのため、ブランチ、という考え方を使って分岐して作業をします。

マージ

ブランチで作業しているものがOKになると、主となるマスターブランチと統合する必要があります。これをマージと言います。

ブランチ・マージは次のような関係になります。

ブランチ・マージ

GitHubとは？

GitHubはWebサービスで、リモートリポジトリを管理するものです。 Web用のUIがあるため、便利に利用することができます。

他にも

Bitbucket
GitLab

等あるのですが、現状Github一人勝ちのようです。 Google Trend : Github, Bitbucket, Gitlab

そして2018年にはマイクロソフトが買収を行いました。

使ってみよう

OSのバージョン等によって差がありそうですが、やってみましょう。

gitのインストール

Command+スペースでterminalと入力して、terminal.app(ターミナル)を開く
git –versionと入力してリターンと押すと、コマンドラインツールをインストールするように促されるので、インストール
改めてgit –versionでバージョンが出ればインストール完了

gitの初期設定

自分が誰かを設定しておきましょう。

$ git config --global user.name "ユーザーネーム"
$ git config --global user.email "eメールアドレス"

とターミナルで入力しておきましょう。 $マークは入力しません。スペースに気をつけましょう。ユーザーネーム、日本語やめておきましょう。例えばこんな感じです。

$ git config --global user.name "John Doe"
$ git config --global user.email johndoe@example.com

GitHubのアカウントを作成しよう

GitHubにアクセス
GitHubの登録の緑ボタンをクリック
ユーザ名・メールアドレス・パスワードを入力して、人間であることを証明してくださいw。ユーザ名はドメインにも使われます。(sammypprのように)
「Welcome to GitHub」と表示されて何点か質問されますが、スルーしてもOKそうです。「Complete setup」をクリックしましょう。
メールが届くので、「Verify email address」をクリックして終わりです。

GitHub上でリモートリポジトリを作成しよう

最近挙動が違うかもしれませんが…

Create repositoryをクリック
name your new repository…のところにtest-git
Publicを選択
Add a README fileにチェック
Create repositoryをクリック
Codeをクリックすると、リモートリポジトリのURLが表示されるので、URL右のボタンを押して、コピーしておきましょう。

VSCodeでクローンする

VSCodeで新しいウィンドウ
アイコンの上から3番目をクリック
Clone Repositoryをクリック
コピーしたURLをペーストしてClone from GitHubをクリック
許可を求めてくるので、許可(Allow)
ブラウザでサインイン
VSCodeを開くか聞かれたら開く
OK
もう一度Clone Repository
ローカルリポジトリの場所を指定してクローン

ローカルリポジトリにファイルを追加してプッシュまで

アイコンの一番上をクリック
test.txtとしてファイルを作り、なんでもいいので、中身を書いて保存しましょう。
上から3番目のアイコンをクリック
Changesにtest.txtがあるはずです。ファイル名右の+を押すと、StagedChangesに移ります。これ、説明したインデックスのところです。一時的においておきます。
Messageに初めてのコミットとか書いてCommit。次にSync Changesとすると、プッシュされリモートリポジトリに変更が反映されます。
ファイルに追記して、Sync Changesまでを2,3回やってみましょう。メッセージも適当に中身変えましょう。

コミットの確認

コミットの履歴を見るために拡張機能入れます。

拡張機能でGit Historyを検索してインストール
test.txtがアクティブな状態でCtrl+Shift+Pでgit logと入力して、「Git: View History(git log)」を実行
コミット履歴が表示されます。
古い方のコミットを押してからViewを押せば、その当時のファイルの内容を表示することができます。

バージョン管理どうですか？？？

GitHubでできること

元々gitはコマンドライン(ターミナル)で使うことを想定されていますが、VSCodeのおかげで少し難しさは消えたのではないでしょうか。

ここまででいっぱいな気がするので、ここまでにしておきますが、

複数人でのソース管理
ホームページの公開
マークダウンでのホームページの公開

等もできます。

ぜひ色々試してみてください。

GitHubを使ってMarkdown文書を５ステップでホームページとして公開する方法