KAEDE Hack blog

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

株式会社Ceressの3Dayハッカソンに参加しました!2019.08.03-06

株式会社Ceressの3Dayハッカソンに参加しました!

title

ユーザを楽しませるサービスを作成しよう!

what

From idea to coding. という触れ込みだった. Career Selectの電話面接で勧められて申し込んだ

https://careerselect.j://careerselect.jp

試験や抽選はなかった.交通費と昼食が支給された.

仕事の様に住所から交通費を確認してもらえると 思っていたら 領収書が必要になっていて交通費を一部もらい損ねたorz

used tools

PHP Slim Framework.
atom-sync-pro, github branch, adminer (like mysqladmin)

Where

(Moppy squerral img)

wooden nice clean floor (img)

nice view(img)

https://ceres-inc.jp

From 2005. Setagaya 4-10-1, Setagaya 4-10-1 17F to 19F 150 worker. Main lang is php. mobile(point media) and financial. bitcoin. moppy, osaihu.com, tikecomi, look, Aoo.

f:id:kei_s_lifehack:20190926165318p:plain
moppy

https://pc.moppy.j://pc.moppy.jp

Wooden Osyare floor. Nice UI trash can. Nice door, clean office. Ceilling is low, lamps are too bright. People are fashonable judged by youtube.

https://youtu.be/OgvyxxZncy://youtu.be/OgvyxxZncyY

Prepare

エクセル方眼紙で申請用紙が送られてきた. スライドにはAtomの拡張のリストが記載されていた.

by given personal sever access pass and basic login sytem by slime frame work. エクセルファイルでチートシートが与えられてそれに 頼ってしまった.

did what

making controllers and views like cakephp

  • register account, delete account,
  • login and logout, item-detail page, parchace culc, payment selection, user own page, purchased history,

could not

register items, seach items, modern UI, sale page, UIが一番しょぼいとチームについてくれたメンターからも 言われたし,実際 text-align: center;以外ほとんど CSSが当たっていなかったのでそこ先に作って渡されるDB からのデータを二人に丸投げしてしまえばよかった?

what I did?

Just transaction history and detail, 最初に作っていた商品追加のページは進捗が遅かったからか 「いらないだろ」とリーダーに切られてしまった. 取引画面のtwigとCSSしか結果的に貢献できなかった.本当に悔しい.

what should I do

just make the top and k same simple UI parts to show and copy, also using bootstrap classses BootStrapの用法に慣れておくべき

lacked

Basic PHP CakePHP に比べてSlimはかなり生に近く,生でログインすら書いたことがなかったのは割と致命的だった. SQL innerjoin skills
そもそもinnerjoinすら概念がわかっていないのは 論外だった.足手まといで申し訳ない. twig debug and print skill cakeで言う所の.ctp fileがtwigなのだが,記法に永遠に苦戦していた. cakeにしかdebug()なんてfuncはないのにいつまでも 繰り返したりして時間を無駄にした. 自身でフレームワークを調べてCRUDして手になじませる 努力の不足だ.用意されたサーバーで動くからといって自分で環境構築するのを面倒臭がってしまった.

Day 1

ice break, build theme, 1/3日目はアイスブレイク(緊張を溶かすの意味), サービスのテーマの選定を行った. 3人ずつのチームに分けられた.HAL大阪と機械学習マン.

Menter

Hukumoto(leader): Yamamoto(thin), Matida. Imai(lady),Hamaaki,

Icebreak

Make same typeof kirigami 切り紙大会を行った.レクリエーションだ.

Buisness Model Canvas

ビジネスモデルキャンバスの講義が行われた.

Deny!!

Solve PB, 98% is alredy serviced. 問題解決するサービスの98%はすでにサービス化されている (2019, Ceress株式会社調べ) Deny everything, 全てを否定しろ. 我らは広告はユーザーが物を買う物という概念を覆した. ユーザーが広告を見ることでお金を稼げる様にした. Do not search too much. 調べすぎるな.全て構想がかぶることはまず無いし, モチベーションがなくなってしまう.

senario graph

Make cards of: when, Where, who, did what,

Brain streaming

do not deny, quality than quantity

Merit for Users

cost cut for textbooks, sending cost, 私たちのグループは教科書の新規購入代や,配送料や 届かない心配をハックするサービスを作ろうとした.

Buisness Model Campus

Framework. for venture. ベンチャーに最適なプログラミング言語ではなく, アイデア出しのフレームワーク. write the basis TATAMI sheet. why x 5. strong, weak, opat, thread,

二日目と三日目からチームごとの開発に入った. 役に立てなくてgitのbranchから教わっていたので頭が痛い.

Service logics

screen

top, all, detail, form,

logic

routing, DB connect print el, validate,

design

HTML, button, UI, icon,

DB

Create, Read, Update, Delete,

Admin

Now users, graph, login,

Make mock from cacoo.com work breakdown structure. by zenkit

CakePHP Intro and Migration

cake3 usage

f:id:kei_s_lifehack:20190927015743j:plain

public tutorial

https://book.cakephp.org/3.0/en/tutorials-and-examples/cms/articles-controller.html

install

Use Composer.

getcomposer.org

curl -s https://getcomposer.org/installer | php

Composer (version 1.9.0) successfully installed to: /Users/kaede/code/cake3/composer.phar
php composer.phar create-project --prefer-dist cakephp/app hoge
- Installing cakephp/plugin-installer (1.1.1): Downloading (100%)

When completed, Directory will be like this:

▾ interns/
    ▸ bin/
    ▸ config/
    ▸ logs/
    ▸ plugins/
    ▸ src/
    ▸ tests/
    ▸ tmp/
    ▸ vendor/
    ▸ webroot/
        composer.jsongg
        composer.lock
        index.php
        phpunit.xml.dist
        README.md
composer.phar
README.md

start server

bin/cake server

runs app in http://localhost:8765/
Defalt Page is this:

f:id:kei_s_lifehack:20190926144456p:plain
cui server

f:id:kei_s_lifehack:20190926144536p:plain
8765 default

At first, your cakephp project is not connected to Database.

(img)

Writing setting file and making a database enables connection.

connect Database(DB)

Rewrite app.php

In Datasources:
'className' => 'Cake\Database\Connection',
'driver' => 'Cake\Database\Driver\Mysql',
'username' => 'root',
'password' => '',
'database' => 'yourDBname',

create DB

Download XAMPP or LAMPP and create your DB.

www.mysql.com

www.apachefriends.org

f:id:kei_s_lifehack:20190926144713p:plain
xampp app

open XAMPP and start all.

mysql -u root
create database hoge;

You see SQL is connected now.

(img)

Manage table

www.ritolab.com

create table

CakePHP can make tables by simple commands

qiita.com

bin/cake bake migration CreateTableName  
columnName:string columnName:text created modified  

You can make sure your table was made by MySQL console.

f:id:kei_s_lifehack:20190926144837p:plain
tables

This makes 20190924_migration.php, but this did not made the table yet.

execute

You have to execute this by:

bin/cake migrations migrate

This made tables of the migration definition.

delete table

bin/cake bake migration DropTableName  

add a column to table

bin/cake bake migration AddColumnNameToTableName columnName:type
bin/cake bake migration AddPriceToTableName price:decimal

undo the migration

bin/cake migrations rollback

can reset.

delete a column

bin/cake bake migration RemovePriceFromTableName price

Make Controller

dev.to

bin/cake bake all tableNames

cmd can make proper files:
controller, model, ctps, and the functions index, add, edit, view,

See the CRUD in the browser

Conclusion

This article introduced:
making DB by SQL,
creating table and columns by migration,
creating controllers by bake all.

This made minimum CRUD system.

GitLab 初期設定 -- SSH priv pub key の作成、.ssh/config とサイトへの各鍵の登録、接続と push の確認

why

まっさらな状態から GitLab の初期設定をする機会があったので、ちょうどいいのでまとめておく

昔書き殴ったメモの記事が酷かったので、わかり易く書き直したくなった

ググって StackOverFlow と GitHub Doc を見てみる

stackoverflow.com

The https protocol requires you to enter your username and password every time. You need to use the ssh protocol. For that, you need to create SSH keys first.

help.github.com

GitHub 公式のこのドキュメントを参照する

ssh-keygen -t ed25519 -C "your_email@example.com"

これで ed25519 というアルゴリズムを使ってメアドに対応する ssh-key を作成できるらしい

freak-da.hatenablog.com

個人的には、パスフレーズは気休め程度にしかならないと思っているので付けていない。 そもそも、SSH秘密鍵パスフレーズは、ネットワーク越しのパスワードとは違うもので (だから違う名前がついているのだが)、ZIPファイルのパスワードと似たようなものだ。 攻撃者がファイルをローカルにコピーしてじっくり解析できる。

ssh-keygen で ed25519 の秘密鍵 公開鍵 を生成

docs.gitlab.com

Algorithm    Public key  Private key
ED25519 (preferred) id_ed25519.pub  id_ed25519
RSA (at least 2048-bit key size)    id_rsa.pub  id_rsa

GitLab 公式で推奨されているように、RSA 方式より強固な ed25519 方式を使う

ssh-keygen -t ed25519 -C "kaede****@gmail.com"
Generating public/private ed25519 key pair.

Enter file in which to save the key (/Users/kaede0902/.ssh/id_ed25519): 
Created directory '/Users/kaede0902/.ssh'.
Enter passphrase (empty for no passphrase): 
Enter same passphrase again: 

Your identification has been saved in /Users/kaede0902/.ssh/id_ed25519.
Your public key has been saved in /Users/kaede0902/.ssh/id_ed25519.pub.

The key fingerprint is:
SHA256:****** kaede0902js@gmail.com

The key's randomart image is:
+--[ED25519 256]--+
|      *****    |
|  *****        |
+----[SHA256]-----+

.ssh/_id_ed22519 に ssh key (priv) が作られた

.ssh/_id_ed22519.pub に pub key も生成。

同時に無くした場合に再発行できる fingerprint?

と randomart image? が発行されるので控えておく。

GitHub/GitLab に pub key を登録

公開鍵をサーバー上に登録する。

qiita.com

f:id:kei_s_lifehack:20210914203910p:plain

GitLab だとここで

f:id:kei_s_lifehack:20210920221552p:plain

GitHub だとここ。

タイトルにはマシン名を登録する

ssh-ed25519
ABCDEFGH
****@example.com

と貼り付ける

メールアドレスも必要。

GitLab への 秘密鍵情報を .ssh/config に書く

docs.gitlab.com

.ssh/ に config という名前のテキストファイルを作成して

今度は

# GitLab https://yourCompany.com

Host YourCompany.com
  PreferredAuthentications publickey
  IdentityFile ~/.ssh/id_ed25519

Git のリポジトリサイトを書いて、その URL を書く。コメントアウト

Host に GitLab の URL

推奨認証は公開鍵

識別ファイルに先ほど作った秘密鍵の場所を書く。

RSA より強固な ed25519 を使っているので、鍵名は rsa にならない

ssh -T で GitLab との接続テスト

% ssh -T your.company.com
The authenticity of host 'your.company.com (111.1111.1111.)' can't be established.
ECDSA key fingerprint is SHA256:****.
Are you sure you want to continue connecting (yes/no/[fingerprint])? yes
Warning: Permanently added 'your.company.com' '1111.1111.1111' (ECDSA) to the list of known hosts.

これで接続先がリストに登録された。

2回目をやっても 拒否されるが、それは大丈夫

メアドとユーザー名を入力して push

これでクローンしてきてコミットすると

Author identity unknown

*** Please tell me who you are.

Run

  git config --global user.email "you@example.com"
  git config --global user.name "Your Name"

to set your account's default identity.
Omit --global to set the identity only in this repository

と言われるので従う。

するとコミットして push できるようになる。

これで解決。

git branch -D test
Deleted branch test (was abc123).

テストに使ったブランチは、リモートもローカルも消しておきましょう。

LINUX COMMANDS

Hello Bash!

f:id:kei_s_lifehack:20190927005924j:plain

What is bash

Bourne Again Shell.
Regular prompt is ´$´

Search your environment

Define your info by shell command!!!

echo $SHELL  
/bin/bash
finger kaede
Login: kaede    Name: KAEDE
Dir: /Users/kaede   shell: /bin/bash/
on Since ....
No Mail.
No Plan.

bash --version
GNU bash, version 3.7.75(1)-release(x86_64-apple-darwin18)........

Dif of C lang

Shell Script is different from C language.
* No compilie, textfiles run, Not binary.
* Easy to culc string.
// write example
Good for combination of other cmds.
(It can use shell cmd like ´cp´, ´echo´ inside!)

Min tutorial

Open Your Termninal App.
Make a file named hello.sh
And give it a power: chmod 755 hello.sh
Write inside hello.sh

#!/bin/sh
echo 'Hello shell!!'

Then run by ./hello.sh

It returns Hello shell!!

Linux Commands

echo

Print "string" to the terminal.
echo -e: enables escape sq
sequence: [\t,\n,\c]
\c prevent line break

mv

move fileName to your/path/here
or nameBefore to nameAfter

cp

copy to newFileName to your/path/here
or nameBefore to copiedFileName

ln

ln -s: make symbolic links. for example:

kaede: ~$ ln -s /opt/lampp/htdocs/ws/ .
kaede: ~$ cdls workspace
kaede: ~$ hi.php savetest.txt
kaede: ~$ pwd -P
kaede: ~$ /opt/lampp/htdocs/ws

This create dir alias.
(stack link)

man

man cmdName : open the command manual file.

pwd

print current dir structure.
pwd -P: print symbolic link real structure.

touch

make file.

rm

rm hoge.txt  
# remove the file  
rmdir foo/  
# remove the empty dir  
rm -rf hoge  
# remove every thing  
$ touch hoge.txt; ls
$ hoge.txt
$ rmdir hoge.txt
$ rmdir: failed to remote 'txt': Not a directory
$ rm hoge.txt; ls
$ 
$ mkdir hogedir
$ rm hogedir/
$ rm: cannot remove 'hogedir/': Is a directory
$ rmdir hogedir/; ls
$ 

wc

word count. used in linux command pipeline.
who | wc: 5 25 264
who | wc -l: 5

sort

sort results.

cat num3 num2 num1
3 2 1 
cat num3 num2 num1 | sort
1 2 3 

cat

Usage

Create a file with contents
Print the files contents
Join 2 files
Overwrite a file by one file

Create a file

cat > fileName: can create a file
with contents. To end, press <C-d>

cat > createTest 
contents below...
2nd line
3rd line
(ctrl d)

cat createTest

contents below...
2nd line
3rd line

a file with contents.

Display files

Display contents of the file

cat ../hello.sh

#!/bin/sh
echo 'Hello'

It can display multi files

cat hello hi
hello every body
hi world
Display options

cat -n filename: print with line numbers

cat songs
"Heal The World"
There's A Place In
Your Heart

cat -n songs
    1    "Heal The World"
    2    There's A Place In
    3    Your Heart

cat -e filename: print with $ mark at the end

cat -e songs
"Heal The World"$
There's A Place In$
Your Heart$

cat -T filename: change tab to ^I
but it will not work now...
cat filename | more: default??
cat filename | less: hide all but contents

join file1 contents to the file2's end

cat hoge >> foo:
join hoge content to foo's end

cat hello >> hi
cat hi
hi world
hello every body

join 3 files to one new file

cat file1 file2 file3 > newfile: newfile include file1 ~ 3 's contents.

cat hi hello songs > hihellosongs
cat hihellosongs

hi world
hello everybody
"Heal The World"
There's A Place In
Your Heart

overwrite a file by a file

cat originFile > writtenFile: Overwrite writtenFile by originFile

cat hi hello
hi world
hello everybody
cat hi > hello 
cat hi hello
hi world
hello everybody

refered

My Vim Settings and favorite liberaries

My Vim Settings and favorite liberaries

f:id:kei_s_lifehack:20190927010611p:plain

intro

vim is great, however using simple extensions by neobundle boost your coding more faster.
I will write my favorite vim extension usage and simple commands.
https://qiita.com/fasahina/items/2767891134028648f288

Plugins

surround.vim

link

http://weibeld.net/vim/surround-plugin.html

surround the word

ysw: surround the word, and cursor go down.
yss: surround the line, and cursor go down.
and type ", the word was surrounded by "
yss<p>: can surround the whole line, like,
<p>Dolor provident amet consequatur earum</p>

del the surrounding

ds: target the surrounding, and type "
can delelte the surrounding ",
dst: delete the tag.

change the surrounding

cs"/: changes "hoge" to /hoge/.
It's same as vim ciw.

emmit.vim

https://github.com/mattn/emmet-vim https://qiita.com/yyuuiikk/items/6c7e793b9c734a84b62a ctrl y ,: changes the emmit shorten code to html.
like div, !, form, tag.class, tag#id, ...
try the tag you use often.

Settings

Writing JP

sites.google.com

"カーソルを表示行で移動する。物理行移動は<C-n>,<C-p>
nnoremap j gj
nnoremap k gk
nnoremap <Down> gj
nnoremap <Up>   gk

"日本語(マルチバイト文字)行の連結時には空白を入力しない。
set formatoptions+=mM

"画面最後の行をできる限り表示する。
set display+=lastline
  • 1st setting enables go down as you see

  • 2nd setting deletes cating inserted space.

  • 3rd, deletes this!!!!!!!!!!!!

@
@
@
@

Struggled by Migration Err and Solved

CakePHP Migratation Error

f:id:kei_s_lifehack:20190927010059j:plain

want

I want to make database table in cake php console, so I searched migration command, but it does not work

Err

migrateerr

Foos-MBP:cms kaede$ bin/cake migrations migrate
using migration paths
 - /Users/kaede/code/cake3/cms/config/Migrations
 using seed paths
  - /Users/kaede/code/cake3/cms/config/Seeds
  using environment default
  using adapter mysql
  using database cake_cms

   == 20190814163826 CreateTests: migrating
   PDOException: SQLSTATE[42S21]: Column already exists: 
   1060 Duplicate column name 'id' in 
   /Users/kaede/code/cake3/cms/vendor/robmorgan/phinx/src/
   Phinx/Db/Adapter/PdoAdapter.php:167

It said deplicated, but Even the table was NOT created...

<?php
use Migrations\AbstractMigration;

class CreateProducts extends AbstractMigration
{
    /**
     * Change Method.
     *
     * More information on this method is available here:
     * http://docs.phinx.org/en/latest/migrations.html#the-change-method
     * @return void
     */
    public function change()
    {
        $table = $this->table('products');
        $table->addColumn('name', 'string', [
                'default' => null,
                'limit' => 255,
                'null' => false,
        ]);
        $table->addColumn('description', 'text', [
                'default' => null,
                'null' => false,
        ]);
        $table->addColumn('created', 'datetime', [
                'default' => null,
                'null' => false,
        ]);
        $table->addColumn('modified', 'datetime', [
                'default' => null,
                'null' => false,
        ]);
        $table->create();
    }
}

solved

one of the migration file has a id column, that is deplicated the default generated auto increment id key. So I deleted the migration file, then all worked.
migratedone

I confirmed in MySQL.

hogecreated

Done. Never make a column named id!!

ref

https://www.ritolab.com/entry/61

MySQL RENAME Fake News

MySQL RENAME Fake News

f:id:kei_s_lifehack:20190927010813j:plain I cannot change databases column by the ordinary command. It was wrong, its fake news!!!

My Env

MacOS Mojave, MySQL Server version: 10.1.39-MariaDB Source distribution

why

Making a CRUD app, but I want to change table column, from text to desc, so I searched and used alter command, but right SQL command returns error messages.

happend

Then I searched Google for solve, but some are wrong.
So I was stacked!!

My table

MariaDB [cake_cms]> describe interns;
+----------+--------------+------+-----+---------+----------------+
| Field    | Type         | Null | Key | Default | Extra          |
+----------+--------------+------+-----+---------+----------------+
| id       | int(11)      | NO   | PRI | NULL    | auto_increment |
| email    | varchar(255) | NO   |     | NULL    |                |
| name     | varchar(64)  | NO   |     | NULL    |                |
| text     | varchar(255) | NO   |     | NULL    |                |
| location | varchar(64)  | YES  |     | NULL    |                |
+----------+--------------+------+-----+---------+----------------+

MariaDB [cake_cms]> Alter Table interns Rename Column text to desc;
ERROR 1064 (42000): You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to
use near 'Column text to desc' at line 1

Refered

https://www.dbonline.jp/mysql/table/index18.html
says to use

ALTER TABLE table_name
CHANGE COLUMN old_name TO new_name;

https://stackoverflow.com/questions/30290880/rename-a-column-in-mysql This site says:

ALTER TABLE tableName RENAME COLUMN "oldcolname" TO "newcolname" datatype(length);

So I write

alter table interns rename column "name" to "newname" varchar(255);

But returned syntax error message....

I do not know what to do. Please help me!

from comment of Stack Over Flow

My Question stackoverflow.com

ALTER TABLE table CHANGE COLUMN name newName varchar(5)

Then I tried

alter table interns change column name newName varchar(5)
MariaDB [cake_cms]> alter table interns change column name newName varchar(5); 
Query OK, 6 rows affected, 2 warnings (0.02 sec) Records: 6 Duplicates: 0 Warnings: 2

-> it worked!!!

Inconclude

The document was wrong.
rename column old to new
change column old to new
rename column old new
were not exist!!!
No TO!! No rename!!!

https://www.geeksforgeeks.org/sql-alter-rename/
was fake!! https://www.1keydata.com/sql/alter-table-rename-column.html
was right.
https://www.quora.com/How-do-I-rename-a-column-of-a-table-in-SQL
This former query was right.

I think many ppl are coufused.

Be careful!!!