webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

WEB制作会社のフォトグラファー

GitHubとSourceTreeの導入

GitHubとSourceTreeの導入 - WEBサイト制作の勉強からの転載

自分のレファレンス目的です、、、

GitHubとSourceTreeの導入

Git(ギット)とは、バージョン管理を行うためのツールのことです。複数人でプログラミングやコーディングを行う場合、ソースコードを効率的に管理・運用する必要があります。「誰がどのファイルのどの部分を修正したのか?」や「リリース予定の機能追加で更新するのは、どれとどれか?」といったことです。

例えば、Aさんがトップページの修正を行っている間に、Bさんがトップページの他の部分の修正を行っていたとします。お互いに修正が終わり修正内容をアップロードした場合、もちろんAさんがアップロードしたデータにはBさんが修正した内容分は反映されていないので、アップした内容はAさんの作業分しかアップロードされていない事になります。さらに、その後Bさんがデータをアップロードしてしまうと、今度はBさんが修正した分のみが反映されて、Aさんが修正した分は消えてしまいます。なので、このような事が起こらないように、事前にローカル上で互いのデータを見比べて、AさんとBさんのデータの差分をお互いにチェックしてからアップロードをする必要があります。
Gitはこういった場合に作業をより円滑に進められるようにつくられたツールで、システム開発の現場では一般的に使われているツールの一つです。

GitHubとは

Gitは通常、リモート上とローカル上を使い分けて作業を行います。GitHub(ギットハブ)とは、このリモートにあたる部分を提供しているサービスのことです。複数人での開発をサポートしてくれる便利な機能が備わっていて、現在ではエンジニアにとって欠かせないツールの一つになりました。無料でも使用する事が出来ますが、プライベート(非公開)リポジトリを利用したい場合は、有料プランに登録する必要があります。

SourceTree

Gitのクライアントツールと呼ばれ、Gitの操作を簡単にするものです。通常Gitのコマンドはターミナル上で打ち込みますが、SourceTreeを使う事でより視覚的に、簡単に作業を行う事が出来ます。

Gitで使う用語

初めてGitを触る人にとって、解り辛さの原因の1つに用語の解り辛さが挙げられます。意味をしっかりと理解出来れば作業自体は難しくないので、まずはよく使うワードとその意味をしっかりと理解しましょう。

リポジトリ

リポジトリとは、ファイルやディレクトの状態を保存する場所です。変更履歴を管理したいディレクトリなどをリポジトリの管理下に置くことで、そのディレクトリ内のファイルなどの変更履歴を記録することができます。Dreamweaverで作業する時に設定する「サイトの管理」と同じような物です。
リポジトリは自分のマシン内にある「ローカルリポジトリ」とサーバなどネットワーク上にある「リモートリポジトリ」の2箇所にあります。基本的にローカルリポジトリで作業を行い、その作業内容をリモートポジトリへプッシュする流れで行います。GitHubはこの「リモートリポジトリ」の場所を提供してくれるサービスです。


コミットとプッシュ

コミット(commit) :ファイルの追加や変更の履歴をリポジトリに保存すること。GitHubではこの際に作業者が「どこどこを変更しました」など他の人に解るようにメモを残せるような機能もついています。

プッシュ(push) :ファイルの追加や変更の履歴をリモートリポジトリにアップロードするための操作です。

基本的な作業の手順としては

  1. 「ローカルリポジトリ」のデータを変更させて
  2.   コミットしてから
  3. 「リモートリポジトリ」にプッシュする

といった感じです。

ブランチ

ソフトウェアの開発では、現在リリースしてるバージョンのメンテナンスをしながら新たな機能追加やバグ修正を行うことがあります。このような、並行して行われる複数のバージョン管理を行うために、Gitにはブランチ(branch)という機能があります。
ブランチは履歴の流れを分岐して記録していくものです。分岐したブランチは他のブランチの影響を受けないため、同じリポジトリ内でそれぞれの開発を行っていくことができます。

GitHubとSourceTreeの導入方法

f:id:yachin29:20170314234848p:plain

GitHubでの作業

GitHub上での作業は非常に簡単で単純ですが、基本的にインターフェイスが英語なので、ある程度慣れが必要になります。
まずはGitHubのアカウントを作りましょう。
続いて、プランを選択します。有料のプランもありますが、無料で使えるFreeプランがあります。Freeプランはソースがオープンになってしまいますが、今回はFreeプランで登録するので、「Free」を選んでから「Finish sign up」ボタンをクリックします。

リポジトリの作成

アカウントを作った後に、そのプロジェクトのマスターがリポジトリを作成します。
GitHubにログインした状態で、「New Repository」ボタンを押します。

f:id:yachin29:20170317105000p:plain


次に表示される画面では、「Repository name」の入力のあと、必要に応じて「Description」も入力します。
また、リポジトリの種類を「Public」か「Private」を選択します。この「Private」リポジトリは、有料会員のみ作成することが可能なので、ここでは「Public」を選びましょう。
最後に、リポジトリの中にあらかじめREADMEファイルを作成しておく場合は「Initialize this repository with a README」にチェックを入れます。.gitignoreやlicenseについては後で追加や変更ができますので、Noneを選択します。

f:id:yachin29:20170317105303p:plain

必要項目の入力が終わり「Create repository」ボタンをクリックするとリポジトリの作成は完了です。
次の画面で、リモートリポジトリのアドレスが表示されますので、控えておいてください。また、このリモートリポジトリのアドレスはプロジェクトチームの他のメンバーがGitHubとSourceTreeを紐付ける時に必要になるので、他のメンバーにも教える必要があります。


SourceTreeのインストー

次に以下のサイトからSourceTreeをインストールします。
ja.atlassian.com

SourceTreeでの作業

GitHub上に作った「リモートリポジトリ」をローカル上にコピー(クローン)します。
「リモートリポジトリ」のURLをコピーし、SourceTreeの「新規リポジトリ」→「URLからクローン」を押し、先程コピーしたURLとクローン先(ローカル上)のディレクトリを指定します。
ローカル上に「リモートリポジトリ」のクローンである「ローカルリポジトリ」を作る際には中身が空のディレクトリを用意してあげる必要があります。
そしてクローンすると、新しくローカルリポジトリが作成されます。


作業開始直後はまだ何も表示されませんが、その後更新作業などを進めていくと、このようにグラフが伸びていき、作業の進捗状況なども可視化でき、解りやすくなります。
作業を進めるとこんな感じになります。
f:id:yachin29:20170317110837p:plain


以上で、GitHubとSourceTreeの導入部分は終了です。
次回は実際の作業やよく起こる問題の対処法などを説明します。とにかくこういうのは慣れなので、実際の現場仕事で致命的なミスを犯してしまう前に友人同士で練習してみる事をオススメします。

 

相対パス、絶対パス、ルートパス

相対パス (普段使い)

いまいる「ファイル」を起点にして、場所を指定する。

いま、コードを記述しているファイルが起点。

いま記述しているファイル(例えばindex.html)と同じ階層にあるファイルやフォルダ(例えばcommonフォルダ)は以下のように記述する。

./common

common

commonフォルダの中のcssフォルダの中のstyle.cssを指定するときは、、、

./common/css/style.css

common/css/style.css

のように記述する。

「./」は同じ階層という意味です

 

style.cssで同じ「common」フォルダの中にある「images」フォルダ内の「pic.jpg」をbackgroundとして指定するときは、、、

まず、「style.css」から一つ上の階層にでます。この階層は「css」フォルダと同じ、つまり「images」フォルダと同じ階層になります。

「../」が一つ上の階層という意味になります。

../images

この中にある、「pic.jpg」を指定します。

../images/pic.jpg

 

絶対パス(ほぼ使わない)

CDNとかそんなときしか使わない。

よそのサイトを参照するときに使います。

 

ルートパス(案件によって指定されれば)

一番最初の階層からのパス。

/index.html

/common/css/style.css

のように記述する。

/ がドキュメントルートを表している。

 

他の人がコーディングしているソースを見るときに、、、

「(なにもなし)」 「./」「../」の時は相対パス

 

「/」が先頭にある時はルートパス

くらいはわかっていると便利。

 

windows10 電源管理

f:id:ohta-felica:20170713233314p:plain

 「高速スタートアップを有効にする」チェックを外す。

 

f:id:ohta-felica:20170713233530p:plain

 先日無償アップグレードが終了した『Windows10』ですが、初期状態で有効になっている『高速スタートアップ』と呼ばれる機能が様々な不具合・異常動作の原因になっているようで、8/12現在ではこの機能を"無効"にするよう推奨されています。今回は、この『高速スタートアップ』を無効化する手順と、そもそもこの機能は何なのか?という事について簡単に紹介致します。

そもそも『高速スタートアップ』とは何なのか?

実はWindows8.1から存在しているこの『高速スタートアップ』、文字通りの意味で"スタートアップ(起動)"を"高速"にするもので、過去のOSにあった「休止状態(ハイバネーション)」に似たような仕組みになっています。(ただ、「休止状態」はWindows10にもまだあります)

Windows10では初期状態(デフォルト)で有効になっているため、基本的には以下の手法を自分で行わなければ無効化は出来ません。

有効化した場合の問題点

つい先日も、これに起因すると思われるトラブルに対処してきたのですが、現在最も多く報告されているのが、"終了時と起動時にPCの構成に変化があった際に様々な不具合が生じる"というものです。

具体例を挙げると、"USB外付けHDDを付けたままシャットダウンした後、この外付けHDDを外してからPCを起動し再度その外付けHDDを接続しても認識をしない"と言ったようなトラブルケースが考えられます。

上記以外にも、"起動は速くなるが終了が異常に遅くなる""起動時のWindowsUpdateによる更新作業が終わらない""起動時にNumlockがオンにならない""起動時にブルースクリーンエラー(BSOD)が発生する"等々、様々なものが報告されています。

 

gitを使って、チームで作業する準備

まずはリモートサーバー上での作業になります。

リモートサーバーに、

1.  チームを作る

2.  チームのメンバーを登録する

3.  チームのフォルダ(=リポジトリ)を作る

4.    各個人のフォルダ(=ローカルリポジトリ)とチームのリモートリポジトリを紐づけます。

1.から3.はbitubucketとgitをインストールして作業します。

4.に進むためにはsourcetreeをインストールする必要があります。dreamweaverでもローカルのリポジトリを使えるようになりました。

 

リモートでリポジトリを管理するためには「bitbucket」か「github」を使います。

github」で非公開のリポジトリを作成するにはお金がかかってしまいます。

「bitbucket」では非公開のリポジトリを無料で作成できますが容量の制限があります。

 

ここでは、ローカルでリポジトリを管理するために「sourcetree」を使います。

「git」をGUIで使えるアプリケーションです。

 

1. まずは「管理者」がチームを作る(チーム名の登録)

「bitbucket」をインストールする。リモート上で「gitで管理するフォルダを=リポジトリ」を操作するために使います。

インストールが完了すると下のような画面が現れるので、「plan to work with others?」

にすすむ。

まず「管理者」がbitbucketをインストールして「team」を構成する。

とにかくチームを作って、チームのプロジェクト、チームのリポジトリといった具合に

チームで作業をするためには、チームを構成する。

f:id:ohta-felica:20170712235343p:plain

 

f:id:ohta-felica:20170713220507j:plain

 チームの名称は「会社+部署名」などにしておくと便利で分かりやすい。チームのフルネームなので、とにかくなんのチームかわかるようにしておく。

チームIDは、URLの一部になるので「チーム名」のわかりやすい省略形を指定する。

 チームのコード名といいますか、3letter-codeのようなものです。

 

 

2. チームの構成員を登録

チームの構成員は随時追加できるので、まずは当面一緒に作業する人をメンバーに加えておく。

それぞれのメンバーには

sourcetree 

bitbucket


git (githubではない、、、)

Git

 

以上3つアプリケーションをインストールしてもらう。

それぞれのサービスに登録する「氏名」「メールアドレス」は共通にしておくのが基本。管理者の”bit bucket”から、チームのメンバーに登録するときはアプリケーションをインストールした際のメールアドレスが必要となります。

 

3. リモートリポジトリを作成 

 チームのリモートリポジトリを作成する。

リポジトリとはgitによって管理されているフォルダのこと。

ただのフォルダではなく「.git」という名前の付いたファイルが中にあるフォルダで、

このファイルがあるとバージョンの管理ができる。

このフォルダの中にあるファイルはすべてログが記録されているということ。

とにかく「チーム」の「リモートリポジトリ」を作成する。

中身は空っぽでよい。

f:id:ohta-felica:20170713000145p:plain

 

f:id:ohta-felica:20170713000417p:plain

 上の例だと、、、

「buyou」チームの、「BYO」プロジェクトに属す「BYO」リポジトリ(フォルダ)

を作成しています。「リポジトリタイプ」は「git」,つまりGITによって管理されているリポジトリであるということ。作成をクリックして作成します。

 

 

4. ローカルにクローンを作成する 

チームのリモートリポジトリを作成したら、「リポジトリ」の「概要」を確認します。

一番左の「+」をクリックすると、、、

f:id:ohta-felica:20170713222151p:plain

 下のような画面になります。

f:id:ohta-felica:20170713222414p:plain

 「clone this repository」をクリックします。

なにをしているかというと、、、

リモートサーバー上にある「チーム」の「リモートリポジトリ(フォルダ)」からローカル上の指定したフォルダにリモートリポジトリのファイルをダウンロードするということ。

ただダウンロードするのではなく、ローカル上の指定したファイルを「ローカルリポジトリ」にしてくれます。つまり「git」で管理しているフォルダを作ってくれる。だからダウンロードとは言わないのでしょう。

f:id:ohta-felica:20170713222846p:plain

 「clone in sorce tree」をクリックすると、リモートリポジトリのURLが表示され、

ローカル上のどの場所に「ローカルリポジトリ」を作成するのか指定できますから、入力をします。このとき先に進まないときは、現在見えているウィンドウの裏に隠れている「source tree」のログインウィンドウを探してみましょう。(わたしはこれで手間取りました、、、)

 

このようにして、「リモートリポジトリ」と自分のローカルにある「ローカルリポジトリ」の同期をとる準備ができました。

「クローン」とは最初に、リモートからローカルにデータを移す時に使う言葉です。

「クローン」の後にリモートからローカルに差分データやログをダウンロードすることを「プル」といいます。

逆に、ローカルからリモートに差分データやログをアップロードすることを「プッシュ」といいます。

 

これらの言葉が「git」でバージョン管理するときのハードルになっています。しかしその用法や意味を理解すればそんなに難しくないと思います。

 

空っぽのフォルダ、、、

まだリポジトリの中が空っぽなので、管理者は自身の「ローカルリポジトリ」にプロジェクトに必要なファイルをいれます。

その後に、ローカル上で「ステージ」→「コミット」そしてリモートに「プッシュ」しておきます。 

 

こうして、リモート上にあるプロジェクトに必要なファイルを、メンバー全員で使うことができるようになりました。

git install その3

f:id:ohta-felica:20170709224653p:plain

 これが「gitビューを表示する」アイコン。

クリックするとタブの中身が表示される。

新しく「リポジトリ」を作成しただけでは、ファイルの変更が追跡できていません。

追跡できていないファイルはgitビューで緑色の表示になります。

f:id:ohta-felica:20170709225133p:plain

緑色の表示がされているファイルを「コミット」すれば追跡が開始されます。

 

「gitパネル」に切り替えます。

 

f:id:ohta-felica:20170709225858p:plain

 現状は、「リポジトリ(ファイルを管理するためのフォルダ、、、)」を作成した状態。

どのファイルの変更を追跡するのかまだ指定をしていない。

リポジトリ」に「コミット」すると追跡が始まる。

というか、以後の変更に対して「差分」を取ってくれる。

リポジトリ」に「コミット」する前に、まず「ステージ」する。

「ステージ」「コミット」の作業は「gitパネル」で行う。

 

f:id:ohta-felica:20170709230030p:plain

 「全てをステージ」をクリックする。

こうして、サイト内にあるすべてのファイルを「ステージ」して「コミット」する準備をする。

クリックすると、「ステージされたファイルをコミット」アイコンが表示される。

f:id:ohta-felica:20170709230549p:plain

 コミットの画面が出てきます。

一番下にコメント欄があるので、変更箇所を簡単にまとめて記載しておく。

f:id:ohta-felica:20170709230912p:plain

 「gitビュー」はじめは緑表示されていたファイルが黒表示になっています。

f:id:ohta-felica:20170709231040p:plain

 少し変更を加えて、なにが起きるのか調べてみます。

変更した箇所に黄色い目印が付きました。

f:id:ohta-felica:20170709231438p:plain

 「git表示」の変更を加えたファイルが「赤」表示になりました。

f:id:ohta-felica:20170709231527p:plain

 「gitパネル」に修正を加えたファイルが表示されています。

「修正済み」と書かれています。

f:id:ohta-felica:20170709231656p:plain

 「差分」アイコンをクリックすると、差分が確認できます。

f:id:ohta-felica:20170709232540p:plain

 

f:id:ohta-felica:20170709232633p:plain

 「ファイルを元に戻す」アイコン

f:id:ohta-felica:20170709232743p:plain

 「OK」クリックするを元に戻ります。

f:id:ohta-felica:20170709232815p:plain

 

dreamweaverでgit その2 リポジトリの作成や紐づけ

gitのインストールがすんだら、dreamweaverを立ち上げる。

 

ひとまず作ったhtmlファイルをローカルサーバー上にあげて、みんなでgitをどのように使うのか、自分で確かめている段階です、、、、

f:id:ohta-felica:20170709222746p:plain

 

f:id:ohta-felica:20170709223108p:plain

 

f:id:ohta-felica:20170709223255p:plain

 以上で、gitリポジトリを作成できました。

 

 

 

追記:

bitbucketを使って、チームのリモートリポジトリを作成しました。

ohta-hiroyuki.hatenablog.com

自分もこのチームのメンバーなので、

チームのリモートリポジトリのURLを入力して

自分のユーザー名(チームに登録されているattlacianアカウント名)

パスワードを入力するとうまく紐づけられました!

これでsourcetreeなしでもいけるのか?

f:id:ohta-felica:20170713231243j:plain

 

dreamweaverでgit その1

Git - Downloads

f:id:ohta-felica:20170709221037p:plain

 

 adobeのサポートには

「gitクライアントはデフォルトの設定でインストールすることをお勧めします」

とあるので、下記の通りデフォルトでインストールしました。

f:id:ohta-felica:20170709221212p:plain

 

f:id:ohta-felica:20170709221412p:plain

 

f:id:ohta-felica:20170709221435p:plain

 

 

f:id:ohta-felica:20170709221457p:plain

 

f:id:ohta-felica:20170709221528p:plain

 

f:id:ohta-felica:20170709221601p:plain

 いろいろあるけれども、とりあえずデフォルト。

人が作ったボタンを分解してみる

f:id:ohta-felica:20170622234259p:plain

 分解した状態。

一番下から、執拗な分析をしてみる。

f:id:ohta-felica:20170622234756p:plain

 「描画モード」は変更しても変わりはない。

「不透明度」を「75%」にするのも味付け程度。

「オフセット」に対してぼかしは2倍。

「カラー」ではなく「濃さ」にしている。ここがポイントだろう。

「100%」だと黒いシャドーになる。なんだろう?

にじんだようにシャドー。

 

f:id:ohta-felica:20170622235644p:plain

 下から2番目。微妙なグラデーション。

「ブレンドモード」は通常。

f:id:ohta-felica:20170622235825p:plain

 下から3番目。ソリッドカラー。

 

f:id:ohta-felica:20170623000030p:plain

 下から4番目。まずはグラデーション。

縦横比率95.3%

回転-13.9度

f:id:ohta-felica:20170623000343p:plain

 不透明度を「100%」にしてみる。

f:id:ohta-felica:20170623000453p:plain

 ちなみにスクリーンでダブらせるとこんな感じ。

f:id:ohta-felica:20170623000559p:plain

 「40%」にしてみるとこんな感じ。

f:id:ohta-felica:20170623000654p:plain

 

f:id:ohta-felica:20170623000734p:plain

 一番上。まずはグラデーション。

 

f:id:ohta-felica:20170623000828p:plain

 こちらは不透明度が「79%」

f:id:ohta-felica:20170623001051p:plain

 全部重ねた状態。

ソリッドカラーを変更するだけで、いろんな色のボタンが作れるのは便利ですね!

f:id:ohta-felica:20170623001211p:plain

 

black and white bitmap image変換してイラストレーターに再配置

splatterを使って遊ぶ。

f:id:ohta-felica:20170618215204p:plain

 resizeしてから、部分によってみるとこんな感じ。

ウォーターマークも見える。

f:id:ohta-felica:20170618215329p:plain

 グレースケールに変換する。目的は白黒のビットマップイメージを作ること。

f:id:ohta-felica:20170618215418p:plain

 破棄します。

f:id:ohta-felica:20170618215504p:plain

 OPTION!

フィルター→ぼかし→ガウス

半径は1.5px

拡大するとこんな感じ

f:id:ohta-felica:20170618220318p:plain

 レベル補正を使って輪郭を調整します。

f:id:ohta-felica:20170618220448p:plain

 ↑OPTION終わり

 

モノクロ2階調に変換します。

 

f:id:ohta-felica:20170618215707p:plain

 解像度は800から1200。

50%を基準に2階調に分けるを選択。

こうすることで、中途半端なグレーが存在しなくなる。

f:id:ohta-felica:20170618215812p:plain

 拡大するとこんな感じになります。

 

f:id:ohta-felica:20170618220631p:plain

 このままTIFFで保存して、フォトショップはここまで。

イラストレーターを開いて、新規ファイルを作成。先程保存したTIFF画像を配置します。

 

f:id:ohta-felica:20170618220942p:plain

 「編集」「カラー」「オブジェクトを再配色」

f:id:ohta-felica:20170618221334p:plain

 スプラッターを好きな色に変更できます。

f:id:ohta-felica:20170618221429p:plain

 フォトショップでモノクロに階調のビットマップにしてからイラストレーターに再配置というプロセスは応用範囲が広そうです。