What's New Qiita

20200521のGitに関する記事は8件です。

  • 投稿日：2020-05-21T22:58:37+09:00

[git github]初めて使用する手順　一人でpush

ゲームで言うとgithubはセーブ場所

さーて環境構築したし　rails newして何か作成していくかー！　の前に
作成したものを保存する、いわゆるセーブする所が要りますよねっ？

私が一番初めに覚えた、githubの使い方さらっと記録します。

難しく考えずに手順はこれだけ

１、まず、セーブしたいディレクトリに移動。

$ cd ディレクトリ名

２、　そのディレクトリの中で

$ git init

　git initは新規作成の時のみ！

３、　ディレクトリの中身を追加

$ git add *

　*印は、今からディレクトリの中身全部入れます！って感じ。
　（その都度、追加したものだけ入れたいときは、$ git add -Aが良さげ。）

４、　コミットする（今から追加するものはこんなものですよ〜っていうコメント）

$ git commit -m "コメント"

コメント内容はできるだけ英語で記述できるようになった方がいい気がする。
　($ git commit -m "[add] user model"みたいな感じでパッとわかりやすく。)

５、 originという名でリポジトリURL登録

$ git remote add origin　'リポジトリURL'

　githubのHPで作成した新しいリポジトリのURLを貼ります。
　ちなみに私ここで初めてつまずいたんですけど、'リポジトリURL'の　'　'　←　これっ！　笑

　いらないですよ。　URLは、そのままコピペして貼り付けてください。

　どこの記事でもよくいろんな方がわかりやすく囲って下さってるんですけど
　これで１日中macと格闘しました。。。

　あとoriginって何ってなるけど気にせず使ってたら慣れます。

６、　最後に　push！

$ git push origin master

ゆるく言いますとpushで、githubにセーブしました。

これでgithubのリポジトリを確認したら入ってると思います。

もっと詳しく勉強していくならば、masterの部分も変わりますが
最初は一人で使うと思うので考えずバンバンpushして草を生やしていきましょー！！

２回目以降　同じリポジトリでしたら、ひたすら３・４・６の繰り返しですね。

基本的に最初はこれだけ

まだ私もgithubについて知らない事だらけですが

セーブできるし、内容見れるし、草生やせるし、まだまだ機能がいっぱいのgithub様。

少しづつ慣れていきましょ〜！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-21T22:45:59+09:00

gitでautherを間違えてコミットしちゃって手遅れなとき

要旨

誤った名前でコミットしたとき、名前（過去のすべてのAuthr)を変更したいときは、
ターミナルで以下のように指定する。

$  git filter-branch -f --env-filter "GIT_AUTHOR_NAME='ajimarusyokudo'; GIT_AUTHOR_EMAIL='valid_email@example.com'; GIT_COMMITTER_NAME='ajimarusyokudo'; GIT_COMMITTER_EMAIL='valid_email@example.com';" HEAD

実例

誤ってMona Lisaとして挙げてしまったとき（ほんとはMilk Boyなのに)の修正
image.png

以下をターミナルで叩く

$  git filter-branch -f --env-filter "GIT_AUTHOR_NAME='Milk Boy'; GIT_AUTHOR_EMAIL='valid_email@example.com'; GIT_COMMITTER_NAME='Milk Boy'; GIT_COMMITTER_EMAIL='valid_email@example.com';" HEAD

image.png

注意

変更がコミットされていないと怒られるので、.gitnoreに追加するか、退避させることが必要
（怒られるときとそうでないときがある、原因不明）

参考

https://qiita.com/sea_mountain/items/d70216a5bc16a88ed932

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-21T22:45:59+09:00

gitでauthorを間違えてコミットしちゃって手遅れなとき

要旨

誤った名前でコミットしたとき、名前（過去のすべてのAuthor)を変更したいときは、
ターミナルで以下のように指定する。

$  git filter-branch -f --env-filter "GIT_AUTHOR_NAME='ajimarusyokudo'; GIT_AUTHOR_EMAIL='valid_email@example.com'; GIT_COMMITTER_NAME='ajimarusyokudo'; GIT_COMMITTER_EMAIL='valid_email@example.com';" HEAD

実例

誤ってMona Lisaとして挙げてしまったとき（ほんとはMilk Boyなのに)の修正
image.png

以下をターミナルで叩く

$  git filter-branch -f --env-filter "GIT_AUTHOR_NAME='Milk Boy'; GIT_AUTHOR_EMAIL='milkboy@example.com'; GIT_COMMITTER_NAME='Milk Boy'; GIT_COMMITTER_EMAIL='milkboy@example.com';" HEAD

image.png

注意

変更がコミットされていないと怒られるので、.gitnoreに追加するか、退避させることが必要
（怒られるときとそうでないときがある、原因不明）

参考

https://qiita.com/sea_mountain/items/d70216a5bc16a88ed932

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-21T16:32:08+09:00

GitHubをコミットまで実際にやってみよう〜実践編 〜

はじめに

こちらの記事では、アカウント登録後のGitHubで
実際にリモートリポジトリにバージョンを保存するまでの流れを紹介します。

GitHubのアカウント登録方法は別でググっていただければと思います。
Gitの基本理解や、Gitへのコミット方法はこちらからどうぞ。

GitHubへ現在のバージョンを反映する

GitHubへリポジトリを反映するためにはいくつかのステップがあります。

1.GitGubにリモートリポジトリを作る
2.ローカルリポジトリにリモートリポジトリを登録
3.リモートリポジトリへプッシュする
4.GitHubのリモートリポジトリを確認する

1.GitHubにリモートリポジトリを作る

まずは、GitHubからログインをし
画面右上の+ボタンから「New repository」をクリック。
スクリーンショット 2020-05-21 16.00.35.png

次に、新しく作成するリモートリポジトリの名前を変更します。
「Repository name」に今回は、testと入力して
「Public」に青丸が付いているか確認。（もし付いていなければ「Public」をクリック）
その後、左下の「Create repository」をクリックでリポジトリを作成。
スクリーンショット 2020-05-21 16.06.54.png
これで中身のないリモートリポジトリtestの完成です。

2.ローカルリポジトリにリモートリポジトリを登録

現在、リモートリポジトリを作ることはできましたが
ローカルリポジトリをのバージョンは反映されていません。
ローカルリポジトリとリモートリポジトリを紐づけるためには
「プッシュ」というコマンドが必要になってきます。

では、早速リモートリポジトリの作成後の画面から解説します。
スクリーンショット 2020-05-21 16.06.16.png

...or create a new repository on the command lineと
書かれているものが、これから新しくローカルリポジトリを作成するときのコマンドです。

今回は、すでにローカルリポジトリがある場合、
... or push an existing repository from the command lineを
指定のローカルリポジトリのあるターミナルで入力していきましょう。
（ローカルリポジトリがまだない場合は...or create~のコマンドで作成しましょう。）

$ git remote add origin https://github.com/ユーザ名/test.git

うまく紐づけができたか確認しましょう。

$ git remote -v

3.リモートリポジトリへプッシュする

それでは、ローカルリポジトリと
リモートリポジトリの紐づけができたのでプッシュの説明を行います。

プッシュするコマンドはこちらです。

$ git push origin master

プッシュにはパスワードと名前の入力が必要です。
GitHubに登録した情報を入力し問題なければEnterを押しましょう。

GitHubはGitと違い、バージョンの管理をWeb上で確認することができます。
https://github.com/ユーザ名/リモートリポジトリ名（test)で
リモートリポジトリにきちんとプッシュされているか確認していきましょう。

Commitsという部分が1Commitsとなっていればプッシュ成功です。
クリックすれば git logのようにコミット履歴の確認も可能です。

まとめ

Gitのコミットの方法に比べて、ローカルリポジトリにあるバージョンを
リモートリポジトリに反映されるのはそこまで難しくありません。

念の為、一連の流れをおさらいすると下記のようになります。

1.GitGubにリモートリポジトリを作る
2.ローカルリポジトリにリモートリポジトリを登録
3.リモートリポジトリへプッシュする
4.GitHubのリモートリポジトリを確認する

ここまでの内容を理解すればGitHubの超初心者からの卒業です。
わからないことや疑問点等あればぜひコメントよろしくお願いします。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-21T14:05:45+09:00

Git 空コミットを行う

目的

  • Gitにて空コミットを行う方法をまとめる

具体例

  • 下記コマンドをGitによる管理が行われているディレクトリで実行する。

    $ git commit --allow-empty -m "コミットメッセージ"

  • リポジトリ作成時の最初期のコミットなどには下記を実行する。

    $ git commit --allow-empty -m "first commit"
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-21T12:33:50+09:00

WindowsでGitHubの複数アカウントをhttpsで使い分ける

はじめに

GitHubの複数アカウントを使い分けるには片方のアカウントでSSH接続する方法があります。ですがGitHubでGit LFSのファイルはhttpsのみでSSHにできないのでダウンロードできません。そこでCredential Managerのnamespaceで複数アカウントをhttpsで使い分けます。

必須環境

Git for WindowsのインストールウィザードでEnable Git Credential ManagerをチェックしてCredential Manager for Gitを一緒にインストールします。

image.png

メインアカウントの設定

特に設定は不要です。git cloneなどを行って認証するとコントロールパネルの資格情報マネージャーのWindows資格情報にgit:https://github.comが追加されます。

image.png

サブアカウントでの設定

Credential Managerでnamespaceを設定すると資格情報の先頭のgit:が変わり複数のアカウントを使い分けることができます。

  1. cloneする時はnamespaceが設定されていないので-c credential.namespaceで指定します。指定する名前はgit以外の英数字なら何でも構いません。

    git -c credential.namespace=sub clone https://github.com/[name]/[repository].git

  2. ダイアログが出てくるのでサブアカウントのアカウントとパスワードを入力します。

  3. cloneできたらローカルコンフィグにcredential.namespaceを設定します。

    cd [repository]
git config credential.namespace sub

  4. pushして失敗しない事を確認します。

    git push

cloneして認証が通った後に資格情報マネージャーを開くとsub:https://github.comが追加されています。

image.png

詳しくはCredential Manager for Windowsのcredential.namespaceを参照してください。

注意点

git configのConditional Includesを使うとgitdir:で指定したフォルダにcredential.namespaceを設定できそうですがCredential ManagerがConditional Includesに対応していないので利用できません。issuesに要望を上げたので興味ある方はリアクションやコメントをお願いします。

参考リンク

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-21T10:28:56+09:00

新しくgitを設定するときのやつ

完全に自分用です

自分のアカウントにリポジトリを作成

ここで設定するのはリポジトリ名くらいでとりあえず良い
https://github.com/...のアドレスを次で使うので念頭に

cdへ

cd awesomeapp

次にgit初期化

git init

これでいける

git add .
git commit -m "なんちゃら"
git remote add origin https://github.com/...
git push master origin

二回目からは

git status
git add .
git commit -m "なんちゃら"
git push origin master

でいける

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-05-21T01:19:57+09:00

webカメラを使って、1000px ×1000px のプロフィール画像を量産してくれるサイトをつくった

完成品

サイト名:1000×1000 証明写真
https://id-photo.ml (ダメだったらこっち:https://id-photo.herokuapp.com/)

作り方！！

・まずファイル構造はこんな感じ
スクリーンショット 2020-05-21 0.03.32.png
今回herokuを使ってデプロイするために、gitやら何やらが入っています。(もしかしたら、必要ないファイルもあるかも。すみません...)

・コード記述内容

index.html
<!DOCTYPE html>
<html>

<head>
  <title>1000×1000証明写真</title>
</head>

<body>
  <b>1000×1000証明写真</b>
  <div id="app">
    <div>
      <video ref="video" id="video" width="500" height="500" autoplay></video>
      <div>
        <button color="info" id="snap" v-on:click="capture()"><img src="img/icon.png"></button>
      </div>
      <canvas ref="canvas" id="canvas" width="1000" height="1000"></canvas>
      <ul>
      <li class="capture" v-for="c in captures" v-bind:key="c.d">
        <img v-bind:src="c" height="50" />
      </li>
      </ul>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        video: {},
        canvas: {},
        captures: []
      },
      mounted () {
        this.video = this.$refs.video
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
          navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
            this.video.srcObject = stream
            this.video.play()
          })
        }
      },
      methods: {
        capture () {
          this.canvas = this.$refs.canvas
          this.canvas.getContext('2d').drawImage(this.video, 0, 0, 1000, 1000)
          this.captures.push(this.canvas.toDataURL('image/png'))
          console.log(this.captures)
        }
      }
    });
  </script>

</body>
</html>

<style>
#canvas {
  display: none;
}
.capture {
  /* display: inline; */
  padding: 5px;
}
</style>
index.js
const express = require('express');
const app = express();

// public というフォルダに入れられた静的ファイルはそのまま表示
app.use(express.static(__dirname + '/public'));

// bodyParser
var bodyParser = require('body-parser');
app.use(bodyParser.json());

// POSTリクエストを受け付ける
app.post('/post', function (req, res) {

    for (key in req.body) {
        console.log(key, '=', req.body[key]);
    }
    res.end();

    res.send('hello world(POST)');
});

// GET リクエストを受け付ける
app.get('/get', function (req, res) {
    res.send('hello world(GET)');
});

//app.listen(8080);
app.listen(process.env.PORT || 8080);

console.log("server start! (heroku)");
.gitignore
# Dependency directories
node_modules/

# Optional npm cache directory
.npm
Procfile
web: node index.js

そのほかのファイルは下記コマンドからインストールできます。

npm init -y
npm i body-parser express

完成

触って遊んでみましょう。

step1「サイトへ飛ぶ」
https://id-photo.ml (ダメだったらこっち:https://id-photo.herokuapp.com/)

1.jpg

step2「カメラアイコンをクリックして撮影」
カメラのアイコンをクリックすると、1000px × 1000px の画像が下に量産されていきます。
2.jpg

step3「画像をダウンロード」
量産された画像の上で、右クリックをするとメニューがでるので、そこで「名前を付けて画像を保存...」を選択してください。
3.jpg

ダウンロードされた画像が、少し縦に伸びている感じになっているのはスリム効果です。

おわり

一応、今回使用した画像を貼っておきます。ご自由に使用してください。
icon.png

また今回参考にさせていただいた記事です
・https://qiita.com/kino15/items/8f8feffca54015555f4b

最後まで読んでいただきありがとうございました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧