2014.12.03以前から気になっていた「GitHub」なのですが、黒画面を使うって聞いていて、ビビって触れてなかったのですが、今働いている会社で「GitHubの教科書」っていう本を買ってくれたので、とりあえずひと通り読んでみたら、黒画面を使かわずにできることがわかり、はじめてのGitHubをやってみました!!GitHubにアカウントを作って、SourceTreeというGUIアプリをインストールすると黒画面を使わずにGitHubを使うことができちゃいます。今回参考にした本「GitHubの教科書」GitHubのアカウントを作成するGitHubアカウントの登録プランの選択メールアドレスの確認をするSourceTreeをインストールするSourceTreeのダウンロードSourceTreeのインストールSourceTreeにGitHubのアカウントを追加する(初期設定)GitHubに新しいリポジトリを作成してクローンする新しいリポジトリを作るSourceTreeにGitHubのリポジトリをクローンする(関連付けするイメージ?!)クローンしたファイルを修正してコミットしてみるローカルのファイルを修正する修正ファイルをコミットするコミットしたファイルをプッシュしてみるGitHubデビューのまとめ今回参考にした本「GitHubの教科書」ネットを見ていると同じようなデザインの表紙の本を見ることがあったのですが、今回はじめて見ることになり読んでみたのですが、初心者の僕でもわかるぐらい簡単に書いてくれている本でした。3人のキャラクター(エキスパート、使ったことある人、初心者)が出てきてそれぞれの立場でいろいろ説明してくれます。実際に社内で出来る人に聞いている状況と同じ感じなので、状況を想像しやすくかなりわかりやすかったです。https://github.com/はじめてアクセスするとこんな画面が出てきます。ちなみに英語しかないようです。右側にある「GitHubの新規登録」の部分に、自分の情報を入れて登録します。GitHub」をクリックするとプラン選択のページに移行します。次にプランの選択です。それぞれのプランの違いは「非公開」のリポジトリをどのぐらい持つことが出来るかっていうのが違いですね。Planだと、月22ドルで20個のプライベートリポジトリを持つことが出来るって感じです。Planで大丈夫です。プライベートリポジトリは作れないのですが、必要になった時にプランを変更すればいいかと思います。up」をクリックしましょう!GitHubのプラン選択そうするとGitHub内に自分のリポジトリが作成されます。GitHubのマイページグレーで隠している部分には、最初に入力したユーザー名が表示されます!メールアドレスの確認をする新規登録が完了すると、最初に入力したメアドに下記のメールが送信されてきます。入力したメアドが正しいのか確認する流れです。(届いたメールがスパム扱いされちゃってますねww)本文内にあるURLをクリックして、メール認証を完了させます。クリックすると次の画面が出てきます。表示されているメアドで間違いなければ右側にある「Confirm」をクリッククリック!そうすると、下記の画面に変わりメアドの認証は完了です。先ほどのメアド以外に追加したいものがあれば赤枠の中にメアドを入力して「Add」を押しましょう。GitHub-メアドの追加ここで、登録したメアドとパスワードは、あとで使うので覚えておきましょう(ログインで使うので忘れることはないと思いますがww)SourceTreeをインストールするGitHubのアカウントが作成できたら次は「SourceTree」を使えるようにします。SourceTreeのダウンロードまずは、SourceTreeのページに行ってファイルをダウンロードしましょう。https://www.atlassian.com/ja/software/sourcetree/overview自分のパソコンに合わせて右上から「Mac版をダウンロード」か「Windows版をダウンロード」を選択するか、左側にある「SourceTreeApp.comで無料入手」をクリックします。SourceTree-ダウンロード今回は「SourceTreeApp.comで無料入手」をクリックしたら勝手にMacかWinか判断してページが出てきます。SourceTree-ダウンロード(Mac)めっちゃ目立ってる青いボタンをクリックします。(ダウンロードページに遷移するのですが、先ほどのMac版・Win版を選択した時と同じページのようです。)ファイルの保存先が選択できるようになるので、好きなところに保存しましょう!SourceTreeのインストールダウンロードが完了したら、SourceTreeの圧縮ファイルを開きます。Macだと下記ウィンドウが出てくるので、左にある「SourceTree.app」をドラッグして「Applications」の上でドロップします。(初めてMac使った時は、これが何なのかよく分かってなかったですね〜。)SourceTree-インストールパソコンの設定によって、アプリを開いていいか出てくるので、「開く」を選択です!アプリの認証インストールできたらSourceTreeを開いて初期設定を始めます。SourceTreeにGitHubのアカウントを追加する(初期設定)SourceTreeを開くと最初に「使用許諾契約に同意」の画面が出てきます。内容を確認して同意にチェックを入れて「続ける」をクリックします。「SourceTreeの使用データを送信して・・・」の部分は好きなほうにして下さい。仕様データを送信することに、特に問題なければそのままで大丈夫です。次にSourceTreeに先ほど作成したGitHubアカウントを追加します。「ユーザーアカウント」をGitHubにして、GitHubの「ユーザー名・パスワード」を入力します。SourceTree-GitHubアカウント追加そうすると「初めてのリポジトリをクローンする」と出てくるので、自分のパソコン内のどこにGitHubで使う情報を保存するか選択しましょう!「コピー先」の右側にある「。保存先が決まると下記の下記が出てくるので「新規リポジトリ」をクリックしてGitHubとつなげることになるのですが、一旦そのまま開いておいて下さい。その前に、GitHubで新しいリポジトリを作成しましょう。SourceTree-新しいリポジトリGitHubに新しいリポジトリを作成してクローンするここまでで、GitHubのアカウントを作成して、SourceTreeが使えるようになりました。これでやっと下準備ができたのでGitHubを使い始めていきます!!(ここまでがちょっと長かったですね。repository」っていうボタンがあるのでクリック!そうするとリポジトリの新規作成画面に行きます。ここで、これから作成する新しいリポジトリの「名前1」「リポジトリの詳細2」「公開/非公開の選択3」「READMEファイルを最初から作るか4」を決めていきます。name」・・・リポジトリ名。自分がわかりやすく覚えられるものにしましょう。2「Description」・・・このリポジトリの説明。任意項目なので入れなくても大丈夫。3「Public(公開)・Private(非公開)」・・・非公開は有料プランなので、プラン変更が必要です。README」・・・リポジトリ内に入れるREADMEファイルを最初に作っておくかどうか。repository」をクリックしてGitHubの中にリポジトリを作成しましょう!GitHub-リポジトリ新規作成サンプルこれで新しいリポジトリが作成できました!こんな感じで先ほど作ったリポジトリが表示されると思います。GitHubのページを見たことがあれば「あぁ〜〜これねぇ〜」ッてなるかと思います。GitHub-リポジトリページSourceTreeにGitHubのリポジトリをクローンする(関連付けするイメージ?!)さて、新しいリポジトリがGitHub内に作成できたのですが、今の状態だとweb上にあるだけなので修正作業をすることが出来ないので、web上のデータを自分のパソコン内にもコピー(クローン)します。そこでSourceTreeを使います。さっき設定した後に、SourceTreeの画面を開いたままにしていたと思うのですが、「+新規リポジトリ」をクリックしてみてください。すると「URLからクローン」が出てくるので、クリック・くりっく・click!SourceTree-URLからクローンこんな画面が出てきますよね?SourceTree-リポジトリをクローンここに情報を入れるとGitHubとローカルのパソコンを関連付け出来ちゃいます。URL)に入れましょう!SourceTree-URLをペーストする※ここでちょっとハマったのですが、GitHubからURLをコピーしてペーストしたのですが、左下に「ソースパス/ソースURLとして正しくありません」っていう表示が変わらないことがありました。コピペしたままの状態じゃURL(テキスト?)として認識しないことがあったので、「ソースURL」の中の最後の文字を削除してて入力で消したものを再入力したらうまくいきました!「保存先のパス」は、初期設定時に選択しているので、自動的に出てくるかと思います。選択したフォルダ内に「名前」で入力したもので新しいフォルダが作成されます。完了するとSourceTreeの画面が開きます!一番上の部分に「リポジトリ名」が表示されてますね!!SourceTree-リポジトリ画面クローンしたファイルを修正してコミットしてみるこれで、環境が完成してリポジトリも作ることが出来たので、せっかくなのでちょっと使ってみましょう!ローカルのファイルを修正するSourceTree画面のど真ん中に「Finderで開く」って出てると思うのですが、それを押すとローカルのフォルダが開きます。「Finderで開く」が出ていない場合は、左メニューの「作業コピー」をクリックすると「Finderで開く」が出てくると思います。GitHubでリポジトリを作成する際に「README」ファイルを作るようにしたので、「README.md」というファイルが入っていると思います。これをテキストエディタで開きます。(僕はSublime使ってるのでそれで開く)ファイル内には。リポジトリ名と詳細が入っているかと思います。このファイルはリポジトリの説明書みたいな感じですね。テストで下記のように記述してみます。「##」を頭に入れると見出しになって、「*」を入れるとリストになるようです。入力したら保存して下さい。するとSourceTreeの画面が変わります。修正ファイルをコミットする左メニューの「作業コピー」をすると画面が3分割されています。SourceTree-作業ツリーファイル左下に先ほど修正した「README.md」ファイルが表示されています。右側には修正内容が表示されています。緑の部分は追加した部分ですね。ちなみに削除した部分は赤になるようです。この状態だと作業ツリーの中にデータがあるのですが、これをコミットできるように左上の「indexにステージしたファイル」に移動します。左下の「README.md」ファイルをドラッグして、左上の部分にドロップするだけです。ドロップするとファイルが移動します。SourceTree-ステージングしたあとこれでコミットする準備が出来ました。コミットしてみましょう!!コミットをクリックすると、パッと見何も変わってない気がするのですが、一番下に「コミット」のコメントを入力する部分が表示されてます!ここは必須入力なので、あとで見て分かりやすいコメントを付けておきましょう!(理由はあとで分かります)SourceTree-コミットのコメントを入れるコメントを入れたら右下のコミットを押しましょう!!画面が戻るので左メニューから「master」を押して下さい。先ほどコミットしたものがコメントと共に表示され、上のメニューのプッシュに数字が表示されました。コミットのコメントはこんな感じで表示されるので、いっぱい並んだ時にわかりやすくなるようにしておいたほうがあとで探しやすいです。SourceTree-コミット完了コミットしたファイルをプッシュしてみるコミットしたことで、リモートにあるGitHubに修正を反映させる準備が出来ました。今の状態は自分のローカル(パソコン内)で修正ができただけでGitHubの中には反映されていないので、「プッシュ」することで、メインとなるGitHubにデータを反映することが出来ます。先ほどのSourceTreeのプッシュボタンに数字が表示されたところをクリックしてみましょう!そうすると、どこにプッシュするか選択する画面が出てきます。SourceTree-プッシュする最初のこの状態ではそのままOKで大丈夫です。すると、GitHubにアクセスするためのログインのような画面が出てくるので、GitHubのアイパスを入力して下さい!SourceTree-GitHubのアイパス入力OKした後にGitHubのマイページにアクセスすると、先ほどコミットしてプッシュしたものが表示されてます!ちゃんとリモート(GitHub)に反映されました!!GitHub-プッシュ後の画面これで、完了です。あなたも私もGitHub使いになれましたwwwwwGitHubデビューのまとめGitHubは黒い画面を使って、難しいことをやるイメージだったのですが、思ってた以上にすごく簡単にGitHubを始めることが出来ました。ネットで探していると僕がわかるようなひと通りの流れがなかったので、GitHubをやってみたい(というか、仕事でファイルの上書きし合いがあったので必須)と思っていたのですが、1冊の本に出会えたおかげでかなり簡単に作業して使いはじめることが出来ました。今の状態だと1人で使っている状態なので、これからは数名でGitHubを使っていきいろいろ覚えていくことがまだまだあります。本を読むと、wikiやissue、Gistなど便利なものがたくさんあるようです。実際に使い込んで、今後の作業を便利なものにしていきたいですね!!!最後にもう一度、今回かなり役立った本です!!なんでもやり始めてしまえばどうにかなるものですが、やり始める時が大変です。コピーtontotakumiをフォローするtontotakumitontotakumi.com関連記事web制作Macで画像をまとめてリサイズするときに便利な「Th-MakerX」を入れてみた(無料で)WindowsからMacに乗り換えてから色々と必要なソフトが出てきました。ブログをこうやって更新するときに必要なのが、画像を記事の中に入れることなんですが、まとめてリサイズするのは結構大変です。ある程度ページの制作が進んでくると、ヘッダー下のメニューの内容を変更したくなってきますよね。2017年はじめ頃から僕は見かけるようになってきたのですが、すご〜く簡単に言うとスマホアプリに見える・使えるwebサイトの感じです。...2018.11.21web制作wordpressのアイキャッチ画像をリサイズする方法(初心者向け)これも前から気になっていたものの一つで、トップページに表示されるアイキャッチ画像がおっきくてどうにかしないとなぁ~って思っていたものを変更することにしました。わからないことをGoogleで検索して、新しい情報を得る時にいつも気になってみていたのが、この情報はいつの情報?!っていうことがよくありました。Adsenseの広告を設置する方法を説明します。ここが圧倒的にわかりやすい。環境とかにこだわりがないなら、この通り進んだらいいと思う。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。views2017.04.06Wordpressで複数の会員が独自のページを作成し、内容を管理・更新できるようにする方法。(3)これから1年間ブログを頑張れるなら、最初からXサーバーにしとくのがオススメです。views2017.04.06Wordpressで複数の会員が独自のページを作成し、内容を管理・更新できるようにする方法。(3)これから1年間ブログを頑張れるなら、最初からXサーバーにしとくのがオススメです。タイトルとURLをコピーしました。