KAEDE Hack blog

JavaScript 中心に ライブラリなどの使い方を解説する技術ブログ。

雑記-- git.

Gitが分からない。

f:id:kei_s_lifehack:20181127222246p:plain

またエラーが出た。pushする前にpullしないといけないというのだけは読めた。

だが今やっているのは膨大なパッケージファイルを展開しているNuxt.jsのプロジェクトだから 簡単に、今までやってきた「中身のファイルを動かしてなんとかする方法」はできない。

考えてみればgitはadd, commit, pushの3つかremote repositoryを確認するremote -v, push先のurlを設定するadd url, Github使わない人でも使うclone url, 自分の githubから他のpcでpushした内容を引っ張ってくるpull origin masterくらいしか まともに使ったことはないし、commit -mもコメントをつけるというだけで、どうして uploadするだけなのにcommit もpushも必要なのか理解しようとしていなかった。

そもそもbranchが別れていてpushできないエラーは何かにつけて出ていて、 その度にかなり四苦八苦してその場しのぎで解決してきた。

何もGitがわかっていなかった。検索してノートにまとめて、一つ一つ理解しやすい言葉で 書いて自分の理解をちゃんとしたものにする機会なのかもしれない。

Githubのコミット履歴はキープできなくなるが、基礎的なところが抜けているのは 不安定な足場で作業を続けるようなものだから、ここはGitの理解にしばらく時間を使うべきだ。

これをしっかり理解して次はDocker, Bootstrap, JSのvarの中にfuncが入る構造......... 先は相当長そうだ。だが一つ一つ理解しなければ土台が出来ないと把握できれば 無気力はかなりマシになる。なった。理解しよう。gitを。

GitHub Setting Usage

GitHubにpushできるようになるまで

  1. GitHubのaccountを作ってRepositoryを作成する. 右上の+から。
  2. そこでclone用のURLをclip boardにcopyする, 何もまだローカルで書いてない場合はgit cloneで持ってきてそこで作業を始めるのが楽。
  3. Terminalを開いてcdでsetしたいdirectoryを開く
  4. git init で初期化
  5. git remote -v で確認
  6. git remote add origin https:.......でセットする
    two factor authをしている場合には //とgithub.comの間に@usernameを入れる。

あとはおなじみのadd, commit -m, pushのながれ。
うまくpushできなければ push -fとかで♪

追加

結構手順が異なる

kei-s-lifehack.hatenablog.com

GitHub Config Setting

  • 同じフォルダの.git/configに記述してある。
  • git config user.name (or emall)で確認, 追記できる こんな感じ
[remote "origin"]
        url = https://kaede0902@github.com/kaede0902/C_lang.git
        fetch = +refs/heads/*:refs/remotes/origin/*
[branch "master"]
        remote = origin
        merge = refs/heads/master
[user]
        name = kaede0902
        email = kaede0902js@gmail.com

Accountが二個目でTwo-Factor Authをしてしまっていると こっちもやらないとダメダメ

https://github.com/settings/tokens にアクセスして一時トークンの16進数を取得し、

https://username:HEXHEXHEXHEX@github.com/username/rep をgit clone or remote add originする。

次回以降はclone時にusername@を付け加えるだけでおkかも? 忘れたらvi .git/configで付け足しましょう。

REF

https://qiita.com/tq_jappy/items/6e2f81f372e4abaa5139

TIPS

  • commit -mはlocalに書き込む段階で, pushがその記録をwebにpushしてくれる。
  • commitのhistoryからdiff (どの行が+(追加) or -(削除) )かわかる

f:id:kei_s_lifehack:20190128012128p:plain
commit history

簡単なホームページとしてのGitHubPage公開の手順

備忘録としておいておきます。

githubにはGitHubPagesという、レポジトリのhtmlファイルをみれる(動く?)形で公開できる仕組みがあり

pages.github.com

これを使って、私のホームページは

KAEDE TEST SITE

としてuserName.github.ioのgithubレポジトリ直下の所のindex.htmlを使っています。

同じ方法で、f:id:kei_s_lifehack:20181109225331p:plain

userName.github.io以外のレポジトリも公開できることがわかったので書き留めておきます。

まずは公開する(既にgithubには公開している)レポジトリを開きます。

次にSettingsのタブに飛びます

f:id:kei_s_lifehack:20181109225532p:plain

そして初期状態ではNoneになっている

github pagesのvalueをmasterにします!!

f:id:kei_s_lifehack:20181109225757p:plain

これでアクセルできるようになりました!やったね!

ブラウザゲームとか作って人に見せたりするときは皆さんも是非!

(さてとあと一週間でこいつに衝突判定とかいろいろつけなきゃな....頑張るぞ)

Shooting Game

gitのxcurnエラーの解決 (Mac OS Mojave)

これを書いているのは2018 11月6日です。数日前、適当にMacOSのUpdateを"1 hour later"で更新させていたのが原因で、"gitが動かなくなりました。" * 2018/11/21追記 別のMacbookでもMojaveにOS updateした際に同じエラーが起こりました。  このOSではCommand Line Toolsを手動で入れ直さないとgitが使えないようです。

$ git -version xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun

、、、、、致命的です。かなりfatalです。せっかくGitHubの使い方を覚えたのにgitコマンドが実行すらできなかったらどうしようもありません。

調べても下記の方法しか見つかりませんでした。

qiita.com

しかし私の環境ではf:id:kei_s_lifehack:20181106230137p:plain

となってしまい絶望しました。しかしこの間

[http://kei-s-lifehack.hatenablog.com/entry/2018/11/03/%E9%96%8B%E7%99%BA%E9%80%B2%E6%8D%97%E3%81%A8crup%E3%82%A8%E3%83%A9%E3%83%BC_11/03?ga=2.155106554.313861102.1541511924-1140451526.1509203211:embed:cite]

このエラーをつぶやいていたらフォロワのこーたさんが「解決策思いついた」と言っていたのを思い出して、DM飛ばしてみたところ、「xcode command line toolsを最新版にしなよ。」「Apple devみて」と教えていただき、

(このページです)(command line tools apple devで検索したら出ます)f:id:kei_s_lifehack:20181106231833p:plain

Sign in with your Apple ID - Apple Developer

同じverの10.14のDmgファイルを選んでイントーラを入れて、パッケージを開いたら

f:id:kei_s_lifehack:20181106231725p:plain

f:id:kei_s_lifehack:20181106231816p:plain

gitコマンドが動くようになりました!!!!!!

嬉しすぎて泣きそう!!!!

githubを仕上げたのは別環境なので、git cloneから頑張るぞ!!!!

苦戦したけどGitHubデビュー完了!!

数ヶ月前に挫折したgit/githubに再挑戦しました。

GitHubを訪れるとコマンドも少ないしチョロいかな?と手をつけてみました。

f:id:kei_s_lifehack:20181105175104p:plain

が、結構苦戦したのでそこで遭遇したミスやエラーについてまとめておきます。

Herokuのように簡単にコマンドテンプレートを打ち込めばgitに作業を公開出来るのでは? (そもそもHerokuの環境構築すら自力でやっていないことを忘れていた) と思い立って、外出用のMacbook12 inch新しい作業ファイルからこのコマンドを打ち込んでみました。

しかし、用意したCanvasフォルダをクローンして、てんぷれーとのサンプルファイルをcommit -mまではできたものの、

(フォロワー様に"pushしないとGitHubに反映されないですよ"と教えてもらい)、pushを試みたところ

'正しいアクセス権またはレポジトリが存在しません'

と言ったエラーが出てしまいました。

f:id:kei_s_lifehack:20181105181957p:plain

ツイートしていたらまたアドバイスをたくさんいただいて、

git remote addの際にsshhttpsが混ざったの可能性を潰すために

レポジトリを上書きしたりもしましたが、そこではなく、アクセス権の問題でした。

.sshを探してlsしたところ、keyがなく、知っているホストしかありませんでした。

f:id:kei_s_lifehack:20181105184902p:plain

https://github.com/settings/keys

上記のurlで表示されるアクセスキーをあらかじめGitHubに公開しておく必要があったようです。

f:id:kei_s_lifehack:20181105184204p:plain

こちらですね。

こちらのサイトを参考にSSHを作成します。

qiita.com

f:id:kei_s_lifehack:20181105184426p:plain

make ssh keys, このコマンドを実行すれば生成されました。

f:id:kei_s_lifehack:20181105185513p:plain

f:id:kei_s_lifehack:20181105185638p:plain

できました!!!GitHub デビューです!!

たくさんリプライくれてありがとうございました!!

f:id:kei_s_lifehack:20181105185741p:plain

HTML5 Canvas 覚書

Canvas Note

// VScodeで書いてる自分用Canvas referenceの置き場です // Last updated: 2018-11-03.

Environment

// this makes full range of browser.
var canvas = document.querySelector('canvas');
var cW = canvas.width = window.innerWidth;
var cH = canvas.height = window.innerHeight;
var c = canvas.getContext('2d');
var midX = cW/2;
var midY = cH/2;

Back Ground

// in CSS
canvas { background: #000;
        width: 100%; height: 100%;}
body {margin: 0;}

Animation

function render() {
    c.clearRect(0,0,cW,cH);
    c.beginPath();
    hogeohoge; h++;
    requestAnimationFrame(render);
} render();

Draw Circle easier

function drawCircle(x, y, r, color) {
    c.beginPath();
    c.arc(x, y, r, 0, 2*Math.PI, false);
    c.fillStyle = color;
    c.fill();
}
drawCircle(200,200,30, 'darkblue');

Transformation

// x, y => 追加移動座標
// x1, y1, => 伸縮。 1 = 100%?
// x2, y2 => 傾き。1 = 90?
c.transform(x1, y2, x2, y1, x, y);

Expand from center

// 必要であれば初期化
c.setTransform(1,0,0,1,0,0;)
c.scale(2,2);
c.translate(x + 0.5 * w , y + 0.5 * h);
// これで図形が拡大される。

Radial Gradient

// x,y,r is starting value
// x2,y2,r2 is ending value
c.createRadialGradient(x,y,r,x2,y2,r2);

Draw Text

c.beginPath();
c.fillStyle = '#fff';
c.textAlign = "center";
c.font = '75px serif';
c.fillText('🎃Happy Halloween!!!🎃',cW/2,cH*.1);

Bezier Line

// 2D bezier curve line.
// (0, 0) to (endX,endY). 
// (midX,0) is the curving point.
c.lineWidth = "20";
c.beginPath();
c.moveTo(0, 0);
c.quadraticCurveTo(midX,0,endX,endY);
c.stroke();

// 3D one.
// (0, midY) to (endX,midY)
// (endX/3,0),(midX,endY) are the curving point!
c.beginPath();
c.strokeStyle = '#0a0'
c.moveTo(0, midY);
c.bezierCurveTo(endX/3,0,midX,endY,endX,midY);
c.stroke();

開発進捗 とcrupエラー 11/03

f:id:kei_s_lifehack:20181103000819p:plain

開発が進みました。

左右の動きをコメントアウトではなくて画面に表示するようにして、 弾速を快速にしました。滑らかさが減るのは仕方ない?

ソースコードと動作確認はこちらです。 コードエディタでなくてステージにカーソルを合わせて テストプレイしてみてください。

codepen.io

書き忘れましたがハロウィンにはベジエ曲線を駆使して、 これを作っていました。NO 画像です!!

コウモリや駅にあったような垂れ幕も描きたかったですが時間切れでした...

codepen.io

なお、Herokuのサイトの方は動かせなくなりました....

辛い........(gitが動かなくなってる) (xcodeを入れ直してもダメで八方塞がり) 成果物出さないとなのにな...

f:id:kei_s_lifehack:20181103001522p:plain