2021-10-15

一人暮らし最初に揃えたものリスト

f:id:kei_s_lifehack:20211017200743p:plain

優先して買うもの

電動昇降机 74k

ベッド 17k

冷蔵庫 24k

オフィスチェア x 2

なんらかしらの棚

1. 仕事デスク

1-1. Flexispot E7 -- メインの電動昇降机 74k

flexispot.jp

FLEXISPOT E7B Standing Desk, Electric Elevation Desk

https://www.amazon.co.jp/dp/B08F7MQL3S/ref=cm_sw_r_cp_apan_glt_i_77XXEP33ZWT8HG4DTF0B?psc=1

FlexSpot E7

74k

60k と比べ、上位機種は掲載重量が多く、手前が丸くなっていて、角も丸くなってる

1-2. ニトリソファチェア 40k

f:id:kei_s_lifehack:20211017195452p:plain

黒の。かなり豪華。肘当ても休まるし足も伸ばせる。

ゲーミングチェアよりあぐらも組めるし断然快適。

ニトリで見たところ、この皮の40kのものが一番後ろにもたれかかった時の気持ちよさと、前屈みになった時の連携が良かった。

15k の革だと前屈みになる時に対応しない。

メッシュの3万の豪華なやつはおしりの沈み方が落ち着かない

1-3. Huawei Mate View GT 34 -- ウルトラワイド、曲面、type-c 給電、VESA、

https://www.amazon.co.jp/dp/B097275MTF/ref=cm_sw_r_tw_dp_YK7WZGHFK6PNEBS6232Swww.amazon.co.jp

65k のメインモニタ

周辺機器として、type-c ケーブル、会議用女優ライト、MacBook Stand、マイク、なども必要

2. ゲーム、ゲスト用デスク

2.1. Flexispot E3

33k の電動昇降チェア

2.2 ニトリザビスワークチェア 15k

f:id:kei_s_lifehack:20211017200141p:plain

このワークチェアは肘掛もないが、座り心地が反発強くてかなり良い。

リラックスはできないので完全に仕事用の椅子。サブチェア。

2.3 ウルトラワイドゲーミングモニター

MSI 200HZ MAG301 29.5V 53k

https://www.amazon.co.jp/dp/B093VRS3X2/ref=cm_sw_r_apan_glt_i_5WHGCPQXT6VA6SH6H3S2

LG 160HZ 34WP60C-B 34V 57k 曲面

https://www.amazon.co.jp/dp/B09DSY4VCK/ref=cm_sw_r_apan_glt_i_DPKS410P5834HKTDDWK9

LG 144HZ 32V 曲面 50k

https://www.amazon.co.jp/dp/B07PNNLCSW/ref=cm_sw_r_apan_glt_i_10V79NP9EBRM6RPBKQ67

1番コスパが良い

重いらしいが。

11k ダイヤルキャビネット

貴重品や契約書をしまう

https://www.amazon.co.jp/dp/B06XW8V1ZJ/ref=cm_sw_r_tw_dp_VAEWY64S8GY6GZX9YMS7www.amazon.co.jp

10k amzn 折りたたみメッシュチェア

https://www.amazon.co.jp/dp/B0169FQENG/ref=cm_sw_r_apan_glt_i_ZGT46RXYENKZ0HS2Y4DH?_encoding=UTF8&psc=1www.amazon.co.jp

折りたたみで 10k 。折り畳みの割にはリラックスできそう。コード書けるほどかは未検証。

3人目が来る時用に買う。年末で OK

腰当て用の毛布が必要かも？

冷蔵庫 -- ハイセンス 30k

https://www.amazon.co.jp/dp/B08QD3YKQD/ref=cm_sw_r_tw_dp_R57WEJ42FT6D10KKCPM2?_encoding=UTF8&psc=

冷凍庫も横に開くのがアイリスより良い。

折りたたみベッド -- 17k

https://www.amazon.co.jp/dp/B002FDQ53Q/ref=cm_sw_r_apan_glt_i_C9YTFSF3A9XCDHMB14B1?_encoding=UTF8&psc=1www.amazon.co.jp

17k

ベッドは椅子にもなる！

アイリスオーヤマ

ドラム式洗濯乾燥機 -- 100k

高いので今度

https://www.amazon.co.jp/gp/aw/d/B08Q7V5NM4/ref=sspa_mw_detail_0?ie=UTF8&psc=1&th=1www.amazon.co.jp

アイリスの洗濯乾燥機

これで洗濯もの干さなくて良くなる

これだと洗剤の自動投入ができない？

とりあえずコインランドリーで代用可能

2021-09-26

MySQL start しない PID ファイルがないエラーを socket ファイルが入っている /tmp の所有者とグループを _mysql に変えることで解決した

マシン

2020 M1 Mac

状況

brew install mysql

==> Installing mysql
==> Pouring mysql--8.0.26.arm64_big_sur.bottle.1.tar.gz
==> /opt/homebrew/Cellar/mysql/8.0.26/bin/mysqld --initialize-insecure --user=ka
==> Caveats
We've installed your MySQL database without a root password. To secure it run:
    mysql_secure_installation

MySQL is configured to only allow connections from localhost by default

To connect run:
    mysql -uroot

To start mysql:
  brew services start mysql

brew install で入れた直後

mysql -uroot
ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)

それを通して接続できないと言われている socket ファイルを作成してみる

qiita.com

sudo touch /tmp/mysql.sock

mysql -uroot

ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (38)

数が増えただけで動かない...

restart してみる

sudo mysql.server restart
 ERROR! MySQL server PID file could not be found!
Starting MySQL
.Logging to '/opt/homebrew/var/mysql/kaede0902s-Air.err'.
 ERROR! The server quit without updating PID file (/opt/homebrew/var/mysql/kaede0902s-Air.pid).

再起動もできない

今度は mysql の server pid が見つからないとエラーが出ている

/tmp に所有権を与える

qiita.com

数字が増えたパターンのも網羅されていた

sudo chown mysql:mysql /tmp 
kaede0902@kaede0902s-Air ~ % sudo mysql.server restart  
 ERROR! MySQL server PID file could not be found!
Starting MySQL
.Logging to '/opt/homebrew/var/mysql/kaede0902s-Air.err'.
 ERROR! The server quit without updating PID file (/opt/homebrew/var/mysql/kaede0902s-Air.pid).

しかし PID の問題なのでダメだった。

かのように思われたが、Qiita の記事とは mysql フォルダの場所が違うので、それを考慮してコマンドを打てていなかっただけだった。

動いているプロセスを潰す

qiita.com

プロセスを見ても今の grep 以外動いていない。

tmux が原因かも？

tmux を全て切ってアプリを再起動する

:tmux kill-server
[server exited]

cmd q

しかしこれでも変わらなかった

mysql.server を start する

https://skill-up-engineering.com/2018/06/27/pid%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AB%E9%96%A2%E3%81%97%E3%81%A6/

Linux上ではあるサービスが起動するとプロセス番号を振ってテキストファイルとして保存します。これがpidファイルと呼ばれるもので、これがあるときは基本的にはあるサービスが動いているよ！という目印になります。

pid ファイルとは、サービス起動時に作成されるらしい。つまり restart の前に start をすれば作成されるのではないかと予想する

sudo mysql.server start                   
Password:
Starting MySQL
.Logging to '/opt/homebrew/var/mysql/kaede0902s-Air.err'.
 ERROR! The server quit without updating PID file (/opt/homebrew/var/mysql/kaede0902s-Air.pid).

start しようとしても PID ファイルを更新せずに終了してしまいましたというエラーが出る

mysql/kaede0902s-Air.err ファイルを見てみる

log を見てみる

/opt/homebrew/var/mysql/kaede0902s-Air.err

にログを書いているはずなので中身をみるが

ls /opt/homebrew/var/mysql/ 

#ib_16384_0.dblwr   ib_buffer_pool      public_key.pem
#ib_16384_1.dblwr   ib_logfile0     server-cert.pem
#innodb_temp        ib_logfile1     server-key.pem
auto.cnf        ibdata1         sys
ca-key.pem      mysql           undo_001
ca.pem          mysql.ibd       undo_002
client-cert.pem     performance_schema
client-key.pem      private_key.pem

.err ファイルも .pid ファイルもない

Hostname を設定してみる

rooter.jp

Macのホスト名は ComputerName,HostName,LocalHostName があります。これらが設定されていないと、自動でホスト名を割り当てられてしまう可能性があります。つまり、あるネットワークでmysqlサーバを起動し、別のネットワークでサーバを終了させようとすると、起動した時のPIDファイルが必要になるため、エラーが起きてしまいます。

sudo scutil --get ComputerName
kaede0902’s MacBook Air

sudo scutil --get HostName
HostName: not set

sudo scutil --get LocalHostName
kaede0902s-MacBook-Air

コンピュータの名前が空白付きで

ローカルホストの名前がハイフンで繋げたもの

ホスト名がセットされていなかった

sudo scutil --set HostName rooter

sudo scutil --get HostName       
rooter

記事の通りに rooter で設定する

sudo mysql.server start
Starting MySQL
.Logging to '/opt/homebrew/var/mysql/rooter.err'.
 ERROR! The server quit without updating PID file (/opt/homebrew/var/mysql/rooter.pid).

それでもダメだった。x86 と arm64 を切り替えてもダメ。

mysql ディレクトリに _mysql に所有を与える

ithack.y-canvas.com

 sudo chown -R _mysql:_mysql /opt/homebrew/var/mysql
kaede0902@rooter ~ % sudo mysql.server restart                          
 ERROR! MySQL server PID file could not be found!
Starting MySQL
.Logging to '/opt/homebrew/var/mysql/rooter.err'.
 SUCCESS! 
kaede0902@rooter ~ % sudo mysql.server restart
Shutting down MySQL
. SUCCESS! 
Starting MySQL
. SUCCESS! 
kaede0902@rooter ~

所有者と所有グループを変更したら成功という表示が出た

この _mysql:_mysql は user と usergroup だ Lpic 101 の知識を思い出した

eng-entrance.com

chown は所有グループを変更するコマンド。権限ではなかった

kaede0902@rooter ~ % sudo mysql.server start
Starting MySQL
. SUCCESS! 
kaede0902@rooter ~ % mysql -u root   
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 10
Server version: 8.0.26 Homebrew

Copyright (c) 2000, 2021, Oracle and/or its affiliates.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql>

接続成功！

まとめ

PID ファイルがなくて mysql が動かせないエラーは、その実行している mysql のフォルダに権限を与えることで解決した。

ただのユーザーだからシステムに変更を加えるような権限は最初はないから開発の時は与える動作を明示的にしなくてはいけない場合があると解釈した。

2021-09-26

tmux 便利なコマンド

基本的に

ctrl b + c で仮想タブ ( window ) の作成

ctrl b + % で左右に分割して新しいペインを作成

ctrl b + " で上下に分割して新しいペインを作成

ctrl b + n/p で仮想タブの左右移動

ctrl b + o でペインの移動

これらで操作する

prefix d / tmux a

tmux の中断と再会。

f:id:kei_s_lifehack:20210926150905p:plain

開いている tmux 自体を

f:id:kei_s_lifehack:20210926150935p:plain

一時的に中断することができる

この後アプリを cmd q で落としても、開き直して tmux a を打てば

f:id:kei_s_lifehack:20210926151307p:plain

ペインとウインドウが元通りになる

M1 Mac では x86 でしかインストールできなくて、ARM64 でしか起動できない CLI ツールが多いので

いちいちペインを切り直さなくて済む分、この tmux の中断は役に立つ。

2021-09-22

Vue Editor を作る

要件

Vuetify を使用

3 つの components からなるようにする

www.justinmind.com

これを参考に作る

アプリの作成

vue create editors

Vue CLI v4.5.13
✨  Creating project in /Users/kaede0902/code/editors.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

added 1283 packages in 2m

120 sec かかった。長い

v-container のグリッドが動くのを確認する

npm i vuetify

vuetify をまず入れて

<template>
  <v-app>
    <v-container>
      <v-row>
        <v-col>
          <h2>Editor A</h2>
        </v-col>
        <v-col>
          <h2>Editor B</h2>
        </v-col>
        <v-col>
          <h2>Editor C</h2>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

コンテナに ROW ( 縦に伸びる ) を入れてその中に COL ( 横に伸びる ) を 3 ついれる

f:id:kei_s_lifehack:20210922021455p:plain

これで並んでいるのを確認

      <v-row align="center" >
        <v-col>
          <h2>Editor A</h2>
        </v-col>
      </v-row>
      
      <v-row>
        <v-col>
          <h2>Editor B</h2>
        </v-col>
        <v-col>
          <h2>Editor C</h2>
        </v-col>
      </v-row>

中央揃えにする

まずこれをしないと見にくい

意外と探すのに苦戦したが

stackoverflow.com

      <v-row align="center" >
        <v-col>
          <h2>Editor A</h2>
        </v-col>
      </v-row>
      
      <v-row>
        <v-col>
          <h2>Editor B</h2>
        </v-col>
        <v-col>
          <h2>Editor C</h2>
        </v-col>
      </v-row>

f:id:kei_s_lifehack:20210922023339p:plain

これで、align="center" がついているところは中央揃えになっていることを確認できる。

2021-09-21

React Router を試す

CRA

reactrouter.com

npx create-react-app react-router 

Success! Created react-router at /Users/kaede0902/code/react-router
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

create-react-app で作って

npm start

Compiled successfully!

You can now view react-router in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.3.61:3000

Note that the development build is not optimized.
To create a production build, use yarn build.

f:id:kei_s_lifehack:20210920231949p:plain

npm start で走らせる

react-router-dom を入れる

npm i react-router-dom

added 13 packages, changed 6 packages, and audited 1721 packages in 31s

Router, Switch, Route, Link, を import する

App.js で

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

これらを import する

App で Route を組む

export default function App() {
  return (
    <Router >
      <li>
        <Link to='/'>Home</Link>
      </li>
      <li>
        <Link to='/about'>About</Link>
      </li>
      <Switch>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </Router>
  );
}

App で Router で囲って、最初に共通部分として Link を置いておく

その下に Switch で

/about の時は <About />

/ の時は <Home />

をスイッチさせる

Home と About のコンポーネントを書く

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

Home と About が呼ばれた時に出すものは下に書く。

実際に `/` と `/about` にアクセスしてみる

これで

f:id:kei_s_lifehack:20210921033454p:plain

/ の時は <Home />

f:id:kei_s_lifehack:20210921033532p:plain

/about の時は <About />

これらの URL と呼び出される components の切り替えを書ける。

2021-09-20

Django を環境構築して View にルーティングする

docs.djangoproject.com

環境構築

python@3.8 が入っていることが前提。

pip@19 から @21 に更新

pip は使う python を切り替えたりできるバージョン管理ツール

node とは違ってサーバーを動かす機能はない。

最初に入っている@19は Django の要件に満たない？ので更新

venv

venv とは何？なぜ必要？

venv は node には全くない機能。

JS/ node は普通ディレクトリに直接 node_modules を作成するが

python/ venv は仮想の python の実行環境を作成して、

そこで python ライブラリをインストールできるようにする。

tutorial.djangogirls.org

Before we install Django we will get you to install an extremely useful tool to help keep your coding environment tidy on your computer. It's possible to skip this step, but it's highly recommended. Starting with the best possible setup will save you a lot of trouble in the future!

( Django を入れる前にとても便利なこの venv を入れるべき。)

( 使わなくてもいけるけど、強く推奨する。やっておけば未来の多くのトラブルを防げる。)

とこのサイトにも書いてある

venv を起動

ls
python3 -m venv django-test
ls
django-test

作成するとディレクトリが作られる。

django-test % ls
bin     include     lib     pyvenv.cfg

中を見てみると、バイナリやライブラリやコンフィグファイルが作られている。

source django-test/bin/activate
(django-test) kaede0902@kaede0902s-Air code %

shell ファイルを起動する source コマンドで起動できる。

この python 仮想環境でライブラリを入れて run させるようにする。

Django を Rosetta の x86 アーキテクチャで入れる

そのまま Arm64 のアーキテクチャで入れるとエラーが出るので

Terminal アプリを右クリックして option -> finder で開く

f:id:kei_s_lifehack:20210920165217p:plain

Rosetta で開くを ON にして Terminal を開いてから入れる。

uname -m
x86_64

uname -m で x86 アーキテクチャで動いているのを確認できる

Rosetta で開くと M1 での問題を解決できるので、Django が問題なく入る。

(django-test) kaede0902@kaede0902s-Air code % python3 -m pip install Django

Collecting Django
  Downloading Django-3.2.7-py3-none-any.whl (7.9 MB)
     |████████████████████████████████| 7.9 MB 690 kB/s 
Collecting pytz
  Downloading pytz-2021.1-py2.py3-none-any.whl (510 kB)
     |████████████████████████████████| 510 kB 1.3 MB/s 
Collecting asgiref<4,>=3.3.2
  Downloading asgiref-3.4.1-py3-none-any.whl (25 kB)
Collecting sqlparse>=0.2.2
  Downloading sqlparse-0.4.2-py3-none-any.whl (42 kB)
     |████████████████████████████████| 42 kB 891 kB/s 
Installing collected packages: sqlparse, pytz, asgiref, Django
Successfully installed Django-3.2.7 asgiref-3.4.1 pytz-2021.1 sqlparse-0.4.2

Django 3.27 と asgiref, pytz, sqlparse, が この venv に インストールされた

Django Project を作成する

作成して、構成を見る

django-admin startproject djangoProject

これで作成できた

djangoProject % ls
djangoProject   manage.py

これの中身は、manage.py と、さらに同名フォルダになっている

ls
__init__.py asgi.py     settings.py urls.py     wsgi.py

その中身に設定ファイルなどが入っている。

python manage.py runserver

f:id:kei_s_lifehack:20210904202322p:plain

manage.py runserver で動かせた。

Poll App を作る -- startapp

polls プロジェクトを作る

docs.djangoproject.com

Django はプロジェクトの中に複数のアプリが入る解釈になる。

サーバーを止めて

python3 manage.py startapp polls

これで作成できる

polls % ls
__init__.py admin.py    apps.py     migrations  models.py   tests.py    views.py

view, model, そして app の構成になっている。app が Controller か？

djangoProject % ls
db.sqlite3  djangoProject   manage.py   polls

djangoProject (親) の下の djangoProject (子供) と並列に作られる。

djangoProject/polls/view を書き足す

from django.shortcuts import render
# write your code

最初はこれしか書いてない

from django.http import HttpResponse

def index(request):
    return HttpResponse("Here is poll index")

django.http というライブラリから HttpResponse を import して

def で index を作成して、request を引数で受け取る

そして import した HttpResponse で string で文字列を返すように作る

しかし、これだとこの画面が読み込まれないので、urls.py を作らないといけない。

djangoProject/polls/urls.py を作る

自動作成はされない。

from django.urls import path

from . import views

urlpatterns = [
    path('', views.index, name='index')
]

path 関数を django.url というライブラリから import する

さっき作った views を同じ階層から import する

url のパターンとして、空白文字列で、view の index def, 名前を index とする

これが polls アプリ側のルーティングファイル。

次は全体のルーティングファイルを作る

djangoProject/djangoProject/urls.py を作る

作る位置が紛らわしいので注意。

from django.contrib import admin
from django.urls import path

urlpatterns = [
    path('admin/', admin.site.urls),
]

最初からここまでできている

ここに

from django.urls import path, include
    path('polls/', include('polls.urls')),

django.urls ライブラリから include を追加で持ってきて

polls に polls の urls を include で含ませる

f:id:kei_s_lifehack:20210920195140p:plain

すると、polls にアクセスできるようになる

f:id:kei_s_lifehack:20210920195707p:plain

代わりに Root にはアクセスできなくなる

開くたびにエラーが出るのは気持ち悪いのでオリジナルで

    path('', include('polls.urls'))

これを追加した

f:id:kei_s_lifehack:20210920200051p:plain

これで root のアクセスで polls/index に動くようにできた。

2021-09-17

M1 Mac 環境構築 -- 開発環境、プログラミング言語編

dev.to に移行しました

優先して買うもの

1. 仕事デスク

1-1. Flexispot E7 -- メインの 電動昇降机 74k

1-2. ニトリ ソファチェア 40k

1-3. Huawei Mate View GT 34 -- ウルトラワイド、曲面、type-c 給電、VESA、

2. ゲーム、ゲスト用デスク

2.1. Flexispot E3

2.2 ニトリ ザビス ワークチェア 15k

2.3 ウルトラワイド ゲーミングモニター

MSI 200HZ MAG301 29.5V 53k

LG 160HZ 34WP60C-B 34V 57k 曲面

LG 144HZ 32V 曲面 50k

11k ダイヤルキャビネット

10k amzn 折りたたみメッシュチェア

冷蔵庫 -- ハイセンス 30k

折りたたみベッド -- 17k

ドラム式洗濯乾燥機 -- 100k

マシン

状況

それを通して接続できないと言われている socket ファイルを作成してみる

restart してみる

/tmp に 所有権を与える

動いているプロセスを潰す

mysql.server を start する

mysql/kaede0902s-Air.err ファイルを見てみる

Hostname を設定してみる

mysql ディレクトリに _mysql に所有を与える

まとめ

prefix d / tmux a

要件

アプリの作成

v-container のグリッドが動くのを確認する

中央揃えにする

CRA

react-router-dom を入れる

Router, Switch, Route, Link, を import する

App で Route を組む

Home と About のコンポーネントを書く

実際に / と /about にアクセスしてみる

環境構築

pip@19 から @21 に更新

venv

venv とは何？なぜ必要？

venv を起動

Django を Rosetta の x86 アーキテクチャで入れる

Django Project を作成する

作成して、構成を見る

Poll App を作る -- startapp

polls プロジェクトを作る

djangoProject/polls/view を書き足す

djangoProject/polls/urls.py を作る

djangoProject/djangoProject/urls.py を作る

1-1. Flexispot E7 -- メインの電動昇降机 74k

1-2. ニトリソファチェア 40k

2.2 ニトリザビスワークチェア 15k

2.3 ウルトラワイドゲーミングモニター

/tmp に所有権を与える

実際に `/` と `/about` にアクセスしてみる