KAEDE Hack blog

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

SQL勉強会をしてきた

令和元年めぐめぐ会

Why

仕事で言われてcakePHPをやることになって、その公式tutorを始めました。

https://book.cakephp.org/3.0/ja/tutorials-and-examples/blog/blog.html

しかしBlankのSQLを作る段階でどう作るかわからなくなってしまった

まずSQLのコマンドを覚えて効率的にかけるようになろうと上司に言われた。

その時megumishに声をかけてもらって、人数が増えたのでレンタルスペースを借りた。

Where, When

東京駅すぐの"KIZUNA 会議室" でした。 2019-05-02 13:00 ~ 19:00 の 6hでtotal 7.8k, 10人参加で780 yen / person だった。

Who attend

megumishのfriends, security, CTFの人が半分、 学生LT繋がり?の高校生から高専生、大学生や卒業生が半分だった。

How was

白くて長い机が6つ、使いやすかった。12人分十分なスペースがあった。

f:id:kei_s_lifehack:20190502223741j:plain
texts

トイレも清潔で、水場も綺麗だった。 megumishが旅行バッグで様々な分厚いSQLの本を持ってきてくれて、それで自分にあった本を見つけられた。 しかも詰まった時に丁寧に教えてくださった。ありがたい.....

f:id:kei_s_lifehack:20190502223638j:plain
desk

Progress

megumishに貸してもらったゼロから始めるSQLを使って
post SQLをterminalから起動して勉強した。

f:id:kei_s_lifehack:20190502223944j:plain
dbstart

megumishにいろんなコマンドを教えてもらった。 N高の子と「これすごいね〜、Terminalで見えるのはエモい〜」と 同じ書籍を進めながら話すのはとても楽しかった。 帰りのうどん屋フリーランスの方にキャリアの話を色々聞けて興味深かった。

f:id:kei_s_lifehack:20190502224030j:plain
udon

SQL

覚えたコマンドがこれらだ。 DATABASEの作成: CREATE DATABASE hoge;
DATABASEへのログイン:
DATABASEからの脱出: \q
DATABASEを全て表示: \l

TABLEの作成: CREATE TABLE hoge; (
id CHAR(4) NOT NLL,
name VARCHAR(100) NOT NULL,
) ;
など.
TABLEを全て表示: \d
TABLEの削除: DROP hoge;

列の全表示: SELECT * FROM hoge;
TABLEへの列の追加: alter ... TABLEの列の削除: ALTER TABLE hoge DROP COLUMN...

Career

業界知識が一番大事。そもそもプログラマーとは業務を電子化する仕事だから。またインフラが出来るとまさしく社の「インフラを握る」人材になれるので立場が強くなりやすいのはイメージが掴めた。 そしてインフラとサーバーサイドは別!!間違えないようにしよう!!!(同じだと思ってた)

conclusion

会場を決めて本を用意してくれたmegumish様、貴重なキャリアの話を聞かせて頂いたぽんこつ様、参加者の皆様ありがとうございました!またやりたいです!!

cakePHP, intl のERRと解決

installation

php composer.phar create-project --prefer-dist cakephp/app cms でスケルトンを作成しようとした macOS: 10.14.3 PHP 7.1.23 (cli) in /usr/bin/php/

Err

Your requirements could not be resolved to an installable set of packages.

Problem 1 - cakephp/cakephp 3.7.6 requires ext-intl * -> the requested PHP extension intl is missing from your system.

と出てしまい - Installation request for cakephp/cakephp 3.7. * cakePHPのinstallができない?intlが必要?になってしまった

yum

(https://qiita.com/machio77777/items/be29ca83992976afdcec) [CakePHP3でintl導入時につまずいた事]

の記事の通りにPHP intlを有効にしようと思ったが、 yum list | grep intl まず yum コマンドが見つからない。 brewを使った。

homebrew reinstall

次に (https://qiita.com/machio77777/items/ffed4c214ad6ea493cec)

の記事を見て とりあえずhomebrewからのphp intlのinstallをしてみた。

しかし

Error: No available formula with the name "php71-intl" ==> Searching for a previously deleted formula (in the last month)... Warning: homebrew/core is shallow clone. To get complete history run: git -C "$(brew --repo homebrew/core)" fetch --unshallow

Error: No previously deleted formula found. ==> Searching for similarly named formulae... Error: No similarly named formulae found. ==> Searching taps... ==> Searching taps on GitHub... Error: No formulae found in taps.

となってしまった。

この記事によるとHomebrewをre installするらしい。

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall)" /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

なおこれをやるとVimで" * y yのコマンドが動かなくなる。

PATH

これでしてみたがまだ which phpをすると usr/bin/になってしまう。 usr/local..にならない。

Teratailで回答を頂いて解決した。 teratail

export PATH=$PATH:/usr/local/opt/php@7.1/bin/php
になっていたのを
export PATH=/usr/local/opt/php@7.1/bin/php:$PATH
で逆にして

export PATH=/usr/local/opt/php@7.1/bin:$PATH
で最後のphpという実行ファイルの指定を消してintlが動いた。 kabaoさんありがとうございます。

確かにパスを通すのにfileを指定するのは変だ。

これでcakePHPのprojectがようやくstartできる!!!

PHP, 始めました。

PHP始めました

経緯

インターンに受かりました!!!

全休の水曜と、木曜の15:20に大学終わってから向かって出勤することになりそうです!!

そこで「時間があったらcakePHPのtutorをやってくれ」とのメールがあったので、 大学でPHPの本を探して一通りこなしてみることをきめました。

残念ながら図書館でcakePHPの本を探してもNO HITSでしたが、これがあったので やってみることにしました!!!

f:id:kei_s_lifehack:20190417212721j:plain
sikkari php
せっかくなので手順をまとめておきますわよ!

app

XAMPPをまず入れます。 Apache,MariaDB, PHP,が含まれているそうです。ここから。 https://www.apachefriends.org/jp/index.html

Disk ImageをDLして開くと /Applications/XAMPP/
に入ります。/Applicationなのがポイント。

user/Applications/ ではない 同じ名前だけど、もっと上のフォルダです。 'cd ../../' をすればよくわかるでしょう。

ご挨拶

さっきインストールした /Applications/XAMPP/htdocs/

にcdでいきます。HOMEのですね。 そしてindex.phpとかが置いてあるここに 'echo.php' を作ってみましょう。

そしてまぁ <php? echo ' Hello php! ' とか書いて localhost/echo.php
chrome検索ではなく「開く」と

挨拶ができました。

f:id:kei_s_lifehack:20190417213735p:plain
Hello PHP

かえではその次のformを作っています。

f:id:kei_s_lifehack:20190417214104p:plain
input PHP

中はそのままhtmlですしコマンド色々打たなくてもlocalhostが開けるので*いいですね。PHP

雑記

普通のHTML5のinputのmethodを ' POST ' にして

$hoge = $_POST [ ' hoge ' ] のように書くと受け取れる。

ただしここでは [ ] を使うとこ!!!

mb* や mt で MathやStringの関数にアクセスできる

Shortcuts of bashrc

Intro

ご存知の人も多いだろうが、MacではHOME directoryに.vimrcと同じように.bashrcがある。 この.bashrcは.bash_profileを参照して...というのは Vim8.0へのupdateの記事 で説明した通りだ。

Picture

f:id:kei_s_lifehack:20190409192526p:plain
.bashrc in terminal

さてこの.bashrcを編集すると何が嬉しいかだ。 結論から言うとコマンドのショートカットが作れる。

Setting

先に公開すると、2019-04-09 現在の私の.bashrcはこうなっている。ちなみにVimでは "* yyでClip boardにcopyできる。


export PATH="/usr/local/bin:$PATH"
alias be='bundle exec'
alias re='exec $SHELL -l'
alias o='open'
alias sl='ls'

alias p='git push origin master'
alias a='git add .'
alias cmt='git commit'
alias s='git status'
alias pull='git pull origin master'


前半が環境構築と通常コマンド
後半がGitのコマンドだ。

一行目は環境構築なので省略
二行目から解説していく。

template

形は
alias ( short cut のこと )
自分好みのコマンド名
= ' default command '
になる。

なおvimscriptだからか = とコマンドの間は開けられない。

Explain

alias be='bundle exec'
=> rails s など起動の前に使うので短縮
alias re='exec $SHELL -l'
=> .bashrcを書き換えた後にTerminalを再起動するのは面倒。これで済む。
alias o='open'
=> 何を使うにしろ index.htmlをopenするのは飽きるほど打つことになるので o index.htmlで開いている。
alias sl='ls' => 鉄道は走らなくていい、素早く確認できればいいんだ。

alias p='git push origin master' alias a='git add .' alias cmt='git commit' alias s='git status' alias pull='git pull origin master'  => お馴染みのgit コマンドたち。飽きるほど打つのに毎回毎回丁寧に打つのは無駄だと感じた。

alias cd=cdls
=> 後述。

conclude

以上が私が登録している.bashrcのaliasだ。
皆さんもお勧めがあったらTwitterとかで教えてくれると嬉しい。

Add

HOMEに.bash_profile がない場合は作成して   source ~/.bashrc    を追加することで.bashrcの読み込みをさせる必要がある。

参考 https://joppot.info/2013/12/06/72

Add2

.bash_profile のshort cutsだが、
cdのコマンドを打った後にlsもやってくれるようにするハックがあった。

function cdls() { \cd "$@" && ls }

https://joppot.info/2013/12/13/224

JS, 外部ファイルの読み込み

JSでの外部ファイルの読み込みと外部Funcitonの呼びだし

経緯

今まで作ったshooting.html

kaede0902.github.io

では200行近く全部HTMLに記述していたが、ファイルを分けてリファタリングをしたくなった。

MOBを const player = { x: midX, y: endY-60, w: 40, h: 60, spd: 12, hp: 50, clr: '#0095DD', }; const enemy = { x: endX/2.5, y: endY/3.0, w: 60, h: 120, spd: 10, hp: 200, clr: '#D00', drc: 1, }; const bullet = { player: { x: player.x, y: player.y, r: 10, spd: 48, clr: '#BBB', },

のようにsetするのは失敗したが、今回はcontext = canvas.getContext('2d')...などの お決まりの宣言と、円や線を楽に描画する関数をメインファイル仮の外に移すことに成功した

わかってる人にはあたりまえなのだろうが、私は初めてできて感動している。

手順

まずHTMLでは宣言のJS, 関数のJSの順で読み込む。 これで一つのファイルに上から書いたと同じように読み込まれる。

真っ先にcanvasタグがないと書き込む先がない。

次に各ファイルの内容を記述すればOKだ。 私のbaseは let cvs,ctx,endX,endY,midX,midY;

cvs = document.querySelector('canvas'); ctx = cvs.getContext('2d');

endX = cvs.width = window.innerWidth; endY = cvs.height = window.innerHeight; midX = endX/2; midY = endY/2;

ctx.lineWidth = 3; ctx.strokeStyle = ctx.fillStyle = '#FFF';

になっている。あとCSSで背景を黒にする。

それでfuncのファイルを書き込み、実行テストすればOKだ。

function drawArc(x,y,r,clr) { ctx.beginPath(); ctx.arc(x,y,r,0,2*Math.PI,true); ctx.fillStyle = '#'+ clr; ctx.fill(); } drawArc(midX,midY,50,"ddd");

結果

今回はGLAYの円を中心に書くだけにした。

f:id:kei_s_lifehack:20190331205047p:plain
glay circle

これでなんども同じ処理を書かなくても効率的に開発や勉強ができそうだ。

emmet.vim (Vimのhtml5補完)をインストールした。

経緯

VSCodeからVimに移行して二ヶ月が立つ。

クリップボードにコピーしたりもスムーズにできるようになってきた(参考記事)し、

kei-s-lifehack.hatenablog.com

レジスタとやらも少し知る機会になってよかった。

しかしHTML5ファイルを一から書く機会は実はなかった。 先ほど初めてHTML5ファイルを書こうとして DOCTYPE宣言のスペルが書けずに気が付いた。

VSCodeでは ! と打てば補完してくれるから、気にしたことはなかったなと。

コピペに毎回頼るのも非効率なのでPlug-inを探すことにした。

たどり着いたのがこのページだ

vimでhtmlをスラスラ書くためのレシピ - Qiita

これのemmet.vim (zen coding)を導入してみた。

....が、これまでの記事のように初心者向けに画像を多用しての丁寧な説明はなかったので

少しハマったw

導入手順

手順をわかりやすく説明すると

Emmet.vim - vim plugins for HTML and CSS hi-speed coding. : vim online

emmet.vimのサイトの下の方に 最新のDLリンクがあるのでそれをOSのDownloadsあたりにDLして

~/.vim/bundle

HOME下の.vimフォルダの/bundleフォルダに送り unzip(解凍)する。この中にREADMEやTUTORIALもあるので親切だ。

そしていつものようにNeoBundle先生に頼めばいいだけだ。 NeoBundle 'mattn/emmet-vim'

これで html5: とだけ書いて Ctrl y , のキーを押せば

<!DOCTYPE html> ここまでやってくれるのだ!!!!

他にもタグをバシバシかける機能もあるので活用していこうと思う!!! HTML5ゲーム制作頑張るぞ!!!

LINKS

github.com

Emmet.vim - vim plugins for HTML and CSS hi-speed coding. : vim online

EOF

ゴリラ.vim 2に行ってきました。

ゴリラ.vimに参加してきました!2回目です。 前回も参加して、Vim8.0にupdateできない原因を探ってもらって :terminalが使えるようにしてもらったりしてました。

場所

Quipper in 目黒

Quipperとは?

受験生御用達、勉強用SNS StudySapuriを開発してる会社様です! Qupper.com のサイトを見てもわかる通り、Global Companyです。 Study SapuriはQupperの日本語版?みたいですね。Railsで作ってるとか。 会場と食べ物の提供はQuipper様でした。オシャレだった....

ゴリラ.vimとは?

Vimmerの集まりです!! 主催者 twitter.com Conpassのリンク gorillavim.connpass.com

今回何が一番すごかった?

何と言っても Thinca さん https://twitter.com/thinca のライヴコーディングですね.... 「考える速度でコードを書く」とはどういうことか魅せられた。

Vim script(空白が正しい表記)でその場で募集されたお題を超速で解決する というものだったが圧巻。

実際に与えられたお題は、英文を単語に分解して、各単語が出てきた回数を入れて JSON出力しろというものだった。

物凄い速度でTry and Errorを繰り返し、Libraryも半端ない速度でTerminal内で検索し、 (そのLibraryは彼自身が9ヶ月前に開発したものだった!) 出力を終わらせた。

本当に格好良かった。 ありえないほど早い。美しい。彼の様なプログラマーになりたいと強く思った。

どうすれば彼みたいになれるんだろう?

日々書いていくのと「実践Vim」をやることだろうか?

tatsu-zine.com 税込2420円。

あとはOperator Counter Motionを意識しながらコマンドを自然に使える様にしていく。

とりあえず私はText Object, htmlのタグを一発で<>でくくれる様にしたり 複数行にある同じwordを一発で別のwordに置換したり、その辺から覚えていこうと思う。

本当に美しいものを見た。人間がやっていた。 この美しさを忘れない様に四月までの貴重な時間、励んで行こうと思う!

EOF