OmniAICreator/Qiita-1.07M huggingface dataset:
ゼロ埋めの逆 Ruby

どのくらい経ったか定かではないけれども、一月くらいだろうか？
Ruby であるプログラムを書き始めて。
Ruby は iRuby で書いていて、それ以前には全く興味がなかったので Ruby については知らない、ゼロ知識から一ヶ月くらいたったのではないだろうか、というところにいる。
自分でオブジェクトを開放できない以外は不安はない。させてほしい、自分で。

あるデータを読み出して、https 接続先の API にクエリに投げるというとこを書いていて、反応を見ている。
反応を見ていると、`01`という文字列よりも、`1`の方が、都合が良さそうである。つまり左側にゼロがない方がいい。

そこで、ゼロパッディング（ゼロ埋め）されたものから、ゼロを取りたい。如何に？

まず、ゼロパッディング。

```ruby
num = "%02d" % 1
```

1 は 01 となる。文字列。

これを戻そうとするわけで、

```ruby
p num.to_i
```

01 から 1 になった。おしまい...

と思っていたら、こんままでは書いていたプログラムの中では通らなかった。

書いていたのは、レギュラーエクスプレッションで取り出した数字列 `01` だったのだ。

```ruby
num = /\d+/.match('def01abc')
puts num
```

の`01`なので、このままではマッチしたオブジェクトということになる。そうなっているので、to_i ってメソッドなんて無いというエラーになる。

```ruby
num.to_i
```

結果はエラー。

```ruby
num = /\d+/.match('def01abc')
num = num.to_s
p num.to_i
```

これでオッケー。

しかし、さらにこの書いていたプログラムでは、さらにその`01`を文字として他の変数に付け足したいところだったので、こうなる。

```ruby
num = /\d+/.match('def01abc')
text = 'book_title'
text += ' ' + num.to_s.to_i.to_s
p text
```

`"book_title 1"`

こういうのでやってみてね。

https://try.ruby-lang.org/playground/
Typora の自動画像アップロードを GitHub に設定

# はじめに

Qiita のエディタとして、シームレスなライブプレビューが特徴な [Typora](https://typora.io/) を使いたかったので、画像の自動アップロードを設定することで、Qiita に投稿するときは Markdown としてコピペして公開することができます。

# uPic をインストール

macOS で稼働できる画像アップローダーをインストールします。

```
brew install upic --cask
```

# GitHub 設定

## 画像用レポジトリ作成

画像のアップロード先として GitHub を使います。

![image-20210611173601387](https://cdn.jsdelivr.net/gh/kyouheicf/image@master/uPic/image-20210611173601387.png)

## トークン発行

こちらのリンクから作成できます

https://github.com/settings/tokens

![image-20210611173816591](https://cdn.jsdelivr.net/gh/kyouheicf/image@master/uPic/image-20210611173816591.png)

repo にチェックを入れて発行します

![image-20210611174228985](https://cdn.jsdelivr.net/gh/kyouheicf/image@master/uPic/image-20210611174228985.png)

# uPic 設定

先ほど作成したレポジトリとトークンを入力して設定します。

![image-20210611174442190](https://cdn.jsdelivr.net/gh/kyouheicf/image@master/uPic/image-20210611174442190.png)

# Typora 設定

最後に Typora エディタで以下のように設定します。

- 画像挿入時の挙動を「アップロード」
- イメージアップローダーに「uPic」

![image-20210611174635672](https://cdn.jsdelivr.net/gh/kyouheicf/image@master/uPic/image-20210611174635672.png)

# 動作確認

画像を貼り付けると Github にアップロードされたことがわかります

![image-20210611174837004](https://cdn.jsdelivr.net/gh/kyouheicf/image@master/uPic/image-20210611174837004.png)

# Qiita に投稿

Typora で全選択【Command】+【A】後に【Command】+【Shift】+【C】で Markdownとしてコピーできます。

Qiita に貼り付け後、タイトル、タグをつけて投稿完了です。

# 参考

- [Upload Images](https://support.typora.io/Upload-Image/#configuration)
- [いつの間にかbrew caskが使用できなくなっていた話 | 底辺プログラマーの戯言](https://www.mathkuro.com/mac/brew-cask-command-error/)
- [uPic tutorial - Github](https://blog.svend.cc/upic/tutorials/github/en/#%F0%9F%93%9D-Configuration-item)
hoverした時に画像を大きくする方法

```
//css
img:hover{
   transform:scale(1.1,1.1);
   transition: 1s;
}
//hoverした時に画像を大きくする
```

hoverして画像を大きくしたいけど親要素からははみ出したくない場合

```
.sample{
  overflow: hidden;
  display: inline-block;
}
.sample img:hover{
  transform:scale(1.1,1.1);
  transition: 1s;
}
```

NuxtにTailwindcssで書きたいけど慣れてないから普通のcss書いてしまう...。
Tailwindcssはnth-childとか使えないから結構不便なんだよな〜
総合的にはいいのかもしれないけど。。。
任意の言語のプログラミング演習をウェブブラウザで実施できるLMSの紹介

# はじめに

以前，[プログラミング演習を実施できるウェブシステム](https://qiita.com/tatkeshi/items/96a5572a4878eb496a68)の紹介記事を書きました．
このたび，より高機能化・高速化・安定化した新システムを開発したので，紹介させていただきます．

解説ページはこちらにあります: [https://kjmtks.github.io/hugin-page/](https://kjmtks.github.io/hugin-page/)
解説ページに，限定された権限しかありませんが，デモサイトを用意しております[^demo-site]ので是非お試しください．
[^demo-site]: 再起動を頻繁に行っておりますので，つながらないこともあります．

また，ご自身の環境にシステムを簡易的にインストールする方法を説明した3分程度の動画もあります: [YouTube](https://www.youtube.com/watch?v=Yvm4sSdc58M)
Azure の無料枠で試すこともできます．

# 主な機能

## 任意の言語のプログラミング演習をウェブブラウザで実施
本システムはサーバーに chroot 監獄を作成し，隔離された環境で，かつ，指定したリソース制約下で任意のプログラムを実行できる機能を持っています．
これにより，任意のプログラミング言語を対象としたプログラミング演習をウェブで実施することができます．画像やグラフの出力にも対応しています．
この機能を応用して，例えばウェブでLaTeXのタイプセットを行うことも可能です．

## 任意のプログラム実行環境の構築
プログラムを実行する隔離された環境は，任意に作成することができます．
また，事前に用意されたインストールコマンドを使用して，特定の処理系が実行できる環境を簡易に作成することができます．

## ヴィジュアルプログラミングに対応
Blocklyを用いたヴィジュアルプログラミングに対応しています．
ブロックの追加にも対応しています．

## 自由記述形，ファイル提出，フォーム入力の課題の出題
プログラミング演習以外の課題，すなわち，自由記述形課題，ファイル提出課題，フォーム入力課題の出題にも対応しており，LMSとして十分な機能を備えています．
なお，これらの課題およびプログラミング演習を1つ以上組み合わせてひとつの課題として出題することができます．

## Markdwon (or HTML) + Scriban によるコンテンツ記述
講義コンテンツはすべてテキストで記述します．
Markdwon (or HTML)と，Liquidライクなテンプレートエンジンである[Scriban](https://github.com/scriban/scriban)による記述に対応しています．

## Gitとの連携
このシステム自体がGitのリモートリポジトリとなっており，Gitのコマンドでコンテンツ等の入手，更新を行うことができます．
システムからもコンテンツの簡易的な編集が可能です．

## 単体テストによる課題の自動チェック
プログラミング演習に対して単体テストを用意しておけば，受講生はこれを利用して自分の組んだプログラムのチェックを自動で行うことができます．
これは，受講生の試行錯誤を推進するための機能です．

## 提出課題への手動フィードバック，最終成績のCSV出力
受講生は演習・課題を講師宛に提出することができます．講師はこれに対して採点をしたり，フィードバックコメントを送信することができます．また，再提出を求めることもできます．
また，受講生全員の採点結果をCSV形式で出力することができます．

## 受講生の学習行動の可視化，オンライン状態の監視，全行動の記録
受講生のすべての行動・オンライン状態は記録され，リアルタイムに確認することができます．
授業の進行を調整することに活用できるほか，学習が遅れている受講生の発見等に役立ちます．

## LDAP認証の利用（LDAPを使用しない認証との併用も可）
認証にLDAPを使用することができます．また，LDAPを使用しない認証も可能で，両認証を併用することもできます．

## マウス or スタイラスペンによるページへの書き込み
簡易的ですが，ペイントツールを使用することができます．
ページそのものに自由に書き込みができるのが特徴で，ページをスクロールしても適切な位置が保たれます．

## 講義コンテンツ，プログラム実行環境，課題のひな形をウェブからインポート
講義コンテンツや，プログラム実行環境のインストールコマンド，課題のひな形などを簡単に入手する機能があります．
いまはまだ少ないですが，これから充実させていく予定です．

これにより，他の人が作成した良質なコンテンツを入手して講義をしたり，自習をすることができます．
【Rails】ひとつ前のrailsコマンドをなかったことにする

<h2>間違えてコントローラーやモデルを作ってしまった</h2>
コマンドを打ったものの、想定していないディレクトリで実行してしまったりなどで、コマンドを間違えて売ってしまうことがあると思います。
今回はコントローラとモデルを作って、それを打ち消してみます

```
#誤って入力したコマンド
rails g controller session new

#上のコマンドを打ち消すコマンド
rails destroy controller session new
```

```
rails g model user name:string email:string
＃上記コマンドを打ち消すコマンド
rails destroy model user
```

<h2>参考</h2>

https://shinodogg.com/2011/02/15/rails%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%81%A7generate%E3%81%97%E3%81%9F%E3%81%AE%E3%82%92%E5%8F%96%E3%82%8A%E6%B6%88%E3%81%97%E3%81%9F%E3%81%84%E5%A0%B4%E5%90%88%E3%83%A1%E3%83%A2/
scilab計算問題！その１

#まえがき
物理演算のシュミレーションによく使われるscilabを用いた計算問題！
問題をときながらシミュレーションできるような構成になっているので、これをマスターしておけば、基礎部分はおｋ！
#実行環境
・windows10
・scilab(6.1.0)64bit


#計算問題をやっていく
問題全体の前提
※時間軸は０秒～１秒まで０．０１秒刻みで設定すること。
モータを単純比例フィードバック制御で動かすことを考える。
伝達関数はG(s)=k / ( Js+(B+k) )


>問題a
scilabを用いて以下のシミュレーションを行い、結果（波形）を記入せよ。
イナーシャ : J=1
粘性係数 : B=2
比例ゲイン : k=5　→　k=10　→　k=20

```c
s=%s;
t=0:0.01:1;

J = [1 1 1];
B = [2 2 2];
Kp = [5 10 20];
Col=[1 2 3];

for i=1:1:3
    P=(Kp(i)/(J(i)*s + B(i) + Kp(i)));
    sys = syslin('c', P);
    y = csim('step', t, sys);
    plot2d(t, y, Col(i)), xgrid();   
end;
```
![kadai03_a.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/855269/ebea5d47-2229-a557-0dc2-2467d6ae8562.jpeg)


___

>問題b
scilabを用いて以下のシミュレーションを行い、結果（波形）を記入せよ。
イナーシャ : J=1
粘性係数 : B=2 → B=5 → B=10
比例ゲイン : k=10

```c
s=%s;
t=0:0.01:1;

J = [1 1 1];
B = [2 5 10];
Kp = [10 10 10];
Col=[1 2 3];

for i=1:1:3
    P=(Kp(i)/(J(i)*s + B(i) + Kp(i)));
    sys = syslin('c', P);
    y = csim('step', t, sys);
    plot2d(t, y, Col(i)), xgrid();   
end;
```
c![kadai03_b.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/855269/4353b733-1614-5f11-acec-f3c330798c23.jpeg)

___

>問題c
scilabを用いて以下のシミュレーションを行い、結果（波形）を記入せよ。
イナーシャ : J=1 → J=5 → J=10 
粘性係数 : B=2
比例ゲイン : k=20

```c
s=%s;
t=0:0.01:1;

J = [1 5 10];
B = [2 2 2];
Kp = [10 10 10];
Col=[1 2 3];

for i=1:1:3
    P=(Kp(i)/(J(i)*s + B(i) + Kp(i)));
    sys = syslin('c', P);
    y = csim('step', t, sys);
    plot2d(t, y, Col(i)), xgrid();   
end;
```

![kadai03_c.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/855269/5bc73dd4-78dc-fd18-444f-3d82abcb4a24.jpeg)



#あとがき　
次回は定常偏差や積分器を用いた、シミュレーションをやります！
Apache起動方法~備忘録~

##Apache起動・停止

Apache起動
何も出力されなければOKです。

```vim 
sudo systemctl start httpd.service
 ```


Apache動作状態確認コマンド

```vim
systemctl status httpd.service
```

Apache停止コマンド

```vim
sudo systemctl stop httpd.service
```

Apacheの自動起動を有効にする
実行結果に「Created symlink from ～」と表示されれば成功です。

```vim
sudo systemctl enable httpd.service
```

Apacheの自動起動設定を確認する

```vim
systemctl is-enabled httpd.service
```

実行結果に「enabled」と表示されれば設定が有効になっています。


Apacheの自動起動を無効にする

```vim
sudo systemctl disable httpd.service
```

「Removed symlink ～」と出力されれば成功です。

Apacheの自動起動設定を確認する

```vim
systemctl is-enabled httpd.service
```

実行結果に「disabled」と表示されれば設定が無効になっています。

以上。
参考サイト
https://programming-style.com/apache/reference/boot-centos/
JavaScript基本文法

# 変数定義

var

再定義、再代入可能な書き方で今はあまり主流ではないです。

const

後から書き換えることのできない変数を定義する書き方で、再代入・再定義共に不可という制約があります。

値が変わらない変数を定義する際に使用します。

let

後で書き換えることのできる変数を定義する書き方で、再代入は可能だが、再定義は不可という制約があります。

値が変わる変数を定義する際に使用します。

# 条件分岐

・条件式を()でまとめる

・条件式後に続く{}の処理が実行される

・複数条件の場合はelse ifを使う

````
if (条件式１) {

　条件式１がtrueの時の処理

} else if (条件式２) {

　条件式１がfalseで条件式２がtrueの時の処理

} else {

条件式１も条件式２もfalseの時の処理

}
````
docker stackの基礎

#docker stackとは
swarmを作成するためのdocker composeファイルのようなもの



この記事はudemyのdocker講座
[Docker Mastery: with Kubernetes +Swarm from a Docker Captain]
(https://www.udemy.com/course/docker-mastery/)
を参考にし作成しています。
解釈の間違いなどがあるかと思いますがその時はコメントしていただけると幸いです。
又コミュニティガイドラインは守っているつもりですがQiitaを投稿し始めてまもないのでその際もコメントしていただけるとありがたいです。

```yml
version: "3"
services:

  redis:
    image: redis:alpine
    ports:
      - "6379"
    networks:
      - frontend
    deploy:
      replicas: 1
      update_config:
        parallelism: 2
        delay: 10s
      restart_policy:
        condition: on-failure
  db:
    image: postgres:9.4
    volumes:
      - db-data:/var/lib/postgresql/data
    networks:
      - backend
    environment:
      - POSTGRES_HOST_AUTH_METHOD=trust
    deploy:
      placement:
        constraints: [node.role == manager]
  vote:
    image: bretfisher/examplevotingapp_vote
    ports:
      - 5000:80
    networks:
      - frontend
    depends_on:
      - redis
    deploy:
      replicas: 2
      update_config:
        parallelism: 2
      restart_policy:
        condition: on-failure
  result:
    image: bretfisher/examplevotingapp_result
    ports:
      - 5001:80
    networks:
      - backend
    depends_on:
      - db
    deploy:
      replicas: 1
      update_config:
        parallelism: 2
        delay: 10s
      restart_policy:
        condition: on-failure

  worker:
    image: bretfisher/examplevotingapp_worker:java
    networks:
      - frontend
      - backend
    depends_on:
      - db
      - redis
    deploy:
      mode: replicated
      replicas: 1
      labels: [APP=VOTING]
      restart_policy:
        condition: on-failure
        delay: 10s
        max_attempts: 3
        window: 120s
      placement:
        constraints: [node.role == manager]

  visualizer:
    image: dockersamples/visualizer
    ports:
      - "8080:8080"
    stop_grace_period: 1m30s
    volumes:
      - "/var/run/docker.sock:/var/run/docker.sock"
    deploy:
      placement:
        constraints: [node.role == manager]

networks:
  frontend:
  backend:

volumes:
  db-data:

```
/homeをNFSマウントするときの忘備録

目的
=====================

よく忘れるので忘備録として記載しておきます。
HPCのテスト環境として作ることを想定しているため、下記をイメージしています。

- マウント元(export側): Master Server の`/home`
- マウント先(マウントポイント): Compute Node の`/home`

NFS server 設定
===========================

パッケージのインストール
-----------------------

```bash:command
sudo yum update -y
sudo yum install nfs-utils -y
```

NFS公開ディレクトリーの設定
--------------------------

### /etc/exportsの編集

変数は環境に応じて変更すること

```bash:command
EXPORT_DIR="/home"
PUBLIC_HOSTS="10.0.1.0/24"
OPTIONS="rw,no_root_squash,sync"
sudo sh -c "echo \"${EXPORT_DIR} ${PUBLIC_HOSTS}(${OPTIONS})\" >> /etc/exports"
```

このケースにおけるオプションは

- `10.0.1.0/24` :  公開するIPレンジ
- `rw` : 書き込み可能
- `no_root_squash` : rootのアクセス可能にします。
- `sync`: 以前の要求で発生した変更がディスクに書き込まれるまで、要求に応答しません
    - 非同期書き込みを有効にするには、async オプションを指定します。

### /etc/exportsの記述内容の反映

```bash:command
sudo exportfs -ar
```


### デーモンの有効化/起動/確認

```bash:command
sudo systemctl enable nfs-server
sudo systemctl start nfs-server
sudo systemctl status nfs-server
```


NFS公開ディレクトリーの確認
--------------------------

```bash:command
sudo showmount -e
```

```text
Export list for ip-10-0-1-202.ap-northeast-1.compute.internal:
/home 10.0.1.0/24
```

NFSクライアントの設定
==============================

公開ディレクトリーへのマウント
-------------------------

`SOURCE_DIR`は環境に応じて書き換えること

```bash:command
SOURCE_DIR="10.0.1.202:/home"
DEST_DIR="/home"
sudo mount -t nfs ${SOURCE_DIR} ${DEST_DIR}
```

マウント確認
----------------

```bash:command
df -h ${DEST_DIR}
```

```terminal
Filesystem        Size  Used Avail Use% Mounted on
10.0.1.202:/home   32G  3.5G   29G  11% /home
```

NFS公開ディレクトリの起動時自動マウント
-------------------------------

### 自動マウント設定

```bash:command
sudo sh -c "echo \"${SOURCE_DIR} ${DEST_DIR} nfs rw 0 0\" >> /etc/fstab"
sudo tail -1 /etc/fstab
```

`0 0`については "[fstabについて](https://qiita.com/kihoair/items/03635447591358210772)"を参照

### SELINUXの無効化

sshログインができるように、SELINUXを無効化します。

```bash:command
sudo sed -i s/"SELINUX=enforcing"/"SELINUX=disabled"/g /etc/selinux/config
```

### 再起動

```bash:command
sudo reboot
```
Matplotlib定量比較-箱ひげ図

## 箱ひげ図とは

箱ひげ図はデータの分布に関する追加情報を示すものです。
分布の中央値、四分位値の範囲、データの約99%の予想範囲がわかります。
範囲を超える異常値は強調されます。

## 簡単な箱ひげ図

```python
import matplotlib.pyplot as plt

fig, ax = plt.subplots()

ax.boxplot([data01['colName'], data02['colName']])

ax.set_xticklabels(['Data01', 'Data02'])
ax.set_ylabel('Col Name')

plt.show()
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260307/964618da-98cf-194a-3e57-72ad522d48d2.png)
Android StudioでRealmのクラスパスの依存関係が追加できない時の対応策

Androidアプリケーションで用いるデータベースとしてRealmを導入する時にハマった場所についての記事です。デフォルトで自動生成されたbuild.gradleのprojectの方を開き、dependenciesの３行目に

```gradle:
classpath "io.realm:realm-gradle-plugin:10.0.1"
```
を追加します。

```gradle:build.gradle(project)
// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
    ext.kotlin_version = "1.4.31"
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:4.2.0'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
        classpath "io.realm:realm-gradle-plugin:10.0.1"
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        google()
        jcenter()
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}
```

ここでSyncすると、以下のようなエラーメッセージが出ます。

```txt
A problem occurred configuring root project 'MyApplication'.
> Could not resolve all artifacts for configuration ':classpath'.
   > Could not find io.realm:realm-gradle-plugin:10.0.1.
     Searched in the following locations:
       - https://dl.google.com/dl/android/maven2/io/realm/realm-gradle-plugin/10.0.1/realm-gradle-plugin-10.0.1.pom
       - https://repo.maven.apache.org/maven2/io/realm/realm-gradle-plugin/10.0.1/realm-gradle-plugin-10.0.1.pom
     Required by:
         project :

Possible solution:
 - Declare repository providing the artifact, see the documentation at https://docs.gradle.org/current/userguide/declaring_repositories.html
```

ここで先程のbuild.gradle内のrepositoriesに ``jcenter()``を追加すればビルドエラーが消えます。

```gradle:build.gradle(project)
// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
    ext.kotlin_version = "1.4.31"
    repositories {
        google()
        mavenCentral()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:4.2.0'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
        classpath "io.realm:realm-gradle-plugin:10.0.1"
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        google()
        jcenter()
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}
```

```txt:出力
BUILD SUCCESSFUL in 10s
```
git打ち消しで重宝するコマンド集~備忘録~

gitで追跡を避けたいときや取り消す時などに利用するコマンド

#git addを取り消す。



#git init 直後のgit addを取り消したい場合。
※``cached``を忘れるとファイルやディレクトリを削除してしまうので取扱注意。

```vim
git rm --cached -r .
```

##特定のファイルの取り消し

```vim
git rm --cached -r file_name
```

#2回目以降のgit addの取り消しかた
##全てのファイルを取り消し

```vim
git reset HEAD
```

##特定のファイルを取り消し

```vim
git reset HEAD file_name
```


#意外と使えるgitコマンド
gitに追跡されたくないファイルって結構あると思うのですが、あんまり記事とかになってないので残しておきます。
通常追跡されたくないファイルは.gitignoreファイルに記載します。すでにgit配下にあるファイルは無視されません。



#方法

方法は二つあります。
##1.assume-unchanged

```
git update-index --assume-unchanged file_name
```
上記を取り消す

```
git update-index --no-assume-unchanged file_name
```




##2.skip-worktree

```
git update-index --skip-worktree file_name
```

上記を取り消す

```
git update-index --no-skip-worktree
```

上記の二つでgitのしつこい追跡から逃れることができます。解除も簡単なのでいいですね。
自分わりと使います。



#設定の確認

```
git ls-files -v
```


#assume-unchanged と skip-worktree の違い

この二つには以下のような違いがあります。

・assume-unchanged : そのファイルが作業ツリー上で変更されているときでも、git はその変更を無視して変更されていないとみなします。
・skip-worktree : そのファイルが作業ツリー上で変更されているときには、git はその変更を保ちます。
skip=worktreeの方が個人的には使い勝手がいいです。


とりあえず以上です。

※参考サイト
https://qiita.com/usamik26/items/56d0d3ba7a1300625f92
Windows 上、mkcert + SpringBoot localhost で https

基本の流れ
https://www.jianshu.com/p/0a0e592a8767
https://qiita.com/rkunihiro/items/530b5dc685bd3bff2082

でも、全部 Linux / MacOS + nginx の場合
Windows + Java(SpringBoot) の場合は、探してもなかなか出てこない。。。。

手順は以下通り：

まず、https://github.com/FiloSottile/mkcert/releases からWindows 版をダウンロード。（2021/06/11 現在は 1.4.3 版）
https://github.com/FiloSottile/mkcert/releases/download/v1.4.3/mkcert-v1.4.3-windows-amd64.exe

コマンドプロンプトで以下実行
１．java_home を設定。mkcert は java_home に CA を登録してくれるから。実際 SpringBoot を使用する jvm のパスを指定。

```shell
set java_home=D:\pleiades\jre
```
２．CA を登録。（１回のみ）ログにも出るが、システムとJava両方登録してくれる！Java は　java_home の環境変数に依存する。

```shell
mkcert-v1.4.3-windows-amd64.exe -install
The local CA is already installed in the system trust store! 👍
The local CA is already installed in Java's trust store! 👍
```

３．証明書を作成。ドメインをスペースで分ける。Java(SpringBoot)の場合、-pkcs12 が必須！

```shell
mkcert-v1.4.3-windows-amd64.exe -pkcs12 192.168.0.19 example.com localhost 127.0.0.1 ::1
Created a new certificate valid for the following names 📜
 - "192.168.0.19"
 - "example.com"
 - "localhost"
 - "127.0.0.1"
 - "::1"

The PKCS#12 bundle is at "./192.168.0.19+4.p12" ✅

The legacy PKCS#12 encryption password is the often hardcoded default "changeit" ℹ️

It will expire on 11 September 2023 🗓
```

４．できた 192.168.0.19+4.p12 ファイルを SpringBoot の src/main/resources フォルダに置く。

５．SpringBoot の https 設定

```properties:application.properties
server.port=8443
server.ssl.key-store=classpath:192.168.0.19+4.p12
server.ssl.key-store-type=PKCS12
server.ssl.key-store-password=changeit
```

６．以下どれでアクセスしても、問題なく表示するはず。
https://192.168.0.19:8443
https://127.0.0.1:8443
https://localhost:8443

以下参考
https://docs.oracle.com/cd/E19906-01/820-4916/geygn/index.html
https://support.code42.com/Administrator/6/Configuring/Install_a_CA-signed_SSL_certificate_for_HTTPS_console_access
https://connect2id.com/blog/importing-ca-root-cert-into-jvm-trust-store

以上。
クッキー　セッション　キャッシュ　違い

#当たり前だが別物
ー前のキャッシュが読み込まれて、、、
ークッキーを保存しますか？、、、

こういった場面よくある。
表題の３つとも情報を保存しているものではあるが違いをしっかり理解するためにも書き残しておく。

#クッキー（Cookie)
クッキー(Cookie)はユーザーのコンピュータに保存される小さなファイルのこと。
次の内容が記憶される。

1.クッキーが送信されたサーバーの名前
2.クッキーの有効期間
3.値 – ランダムに生成された一意の番号

##種類
クッキーには`セッションクッキー`と`永続クッキー`の２種類がある。
`セッションクッキー`は、Webサイトにアクセスしている間ブラウザに一時的に作成され、ユーザーがサイトを離れると、削除される。
一方、`永続クッキー`はユーザーがブラウザを閉じても削除されず、そのクッキーを作成したWebサイトにアクセスすると再度アクティブになる。永続クッキーは、Cookieのファイル内で設定された期間、ブラウザに残る。

**ショッピングサイトとかで毎回ログインしなくてもいいのはこのおかげ！**
名前とかemailとかを打ち込むとその情報がクッキーに変えられて保存される。

#セッション
セッションもクッキーと同様にデータを保存するものだが、接続中のユーザーの活動に関連する情報を一時的に保存している。

ショッピングサイトのカゴに入れたものが保存されたりする時とか！

#両者の違い
①保存場所。
クッキーはクライアント側のマシン（主にブラウザ）にのみ保存され、セッションはブラウザだけでなく、サーバーにも情報が保存されます。
②保存期間。
セッションはユーザーがブラウザを閉じると削除される。
一方、クッキーには永続クッキーがあり、情報を保持し続ける。
またセッションは無効にできないが、クッキーは無効にすることができる。

そしてクッキーは「誰が」の情報を取得し、セッションは「何をしたか？」という情報を取得している。
なので相反するものではなくお互いを補い合っている関係にある。

#キャッシュ
よく使うデータへのアクセスを速くするために、より高速な記憶装置に一時的に保存する仕組みのことを指す。
一回訪れたサイトを再度訪問すると一瞬で開いたりするあれ。
キャッシュに入っているならネットに繋がっていなくても閲覧が可能！

#3つの違い
キャッシュとクッキーおよびセッションとの大きな違いは、キャッシュが表示の高速化のために情報を保存しているのに対して、クッキーやセッションはユーザーの情報を保存していること。
クッキーは「誰が？」　セッションは「どんな行動」をしていたのかを記憶。互いに補い合っている！

モヤモヤしていたのですっきりした〜
【Laravel】Laravel課題：9-11 電話番号のバリデーション

```PHP
$request->validate([
 'phone' => ['nullable', 'regex:/^[0][0-9]{1,2}-{0,1}[0-9]{3,4}-{0,1}[0-9]{3,4}$/'],
]);
 
```

```PHP
先頭の1桁は０固定

^(0{1}

先頭は１〜３桁 ０固定

\d{1,3}
```
【論文紹介】Augmented Flavours: Modulation of Flavour Experiences Through Electric Taste Augmentation

#論文紹介
論文：Augmented Flavours: Modulation of Flavour Experiences Through Electric Taste Augmentation
著者：Nimesha Ranasinghe, David Tolley, Nguyen Thi Ngoc Tram, Yan Liangkun
https://www.researchgate.net/publication/325491251_Augmented_Flavours_Modulation_of_Flavour_Experiences_Through_Electric_Taste_Augmentation

#どんなもの
　お箸/お茶碗を使って、マッシュポテトと味噌汁の食体験に対する味覚拡張の影響を評価した研究。(電気刺激によって味を増強するようになっている。)
　食事するときにお箸/お茶碗を使って舌の先に電気刺激(どちらも同じ塩味と酸味の電気味覚)を送る。この道具を評価するために、ナトリウム含有量の異なるマッシュポテトと味噌汁を食べたときに、味の認識がどのように変化するかを測定。
　　→実験の結果、お箸を使って無塩のマッシュポテトを食べると塩味と酸味が増すこと、お茶碗を使って薄めた味噌汁を飲むと、酸味が増すことがわかった。


#先行研究と比較してすごいところ
　嗅覚や視覚、聴覚をコントロールすることで味の体験に影響を与える研究は多くされているが、デジタル味覚拡張の利用を調査した研究は少ない。この論文では、お箸とお茶碗の２種類を用いて研究されている。

　味のシミュレーションには化学物質を使用することが多い。化学物質を扱うためには保管場所や配送、メカニズムに問題がある。これによって技術を容易に実装できなくなっている。そのため、非科学的な刺激の使用に焦点を当てている。


#技術や手法のキモ
　お箸とお茶碗にそれぞれ同じ酸味と塩味の電気味覚を提供するシステム。それぞれ、電気パルスを発生させる。マイクロアンペア電流とPWMベースの技術を組み合わせて、塩味の電気味覚と酸味の電気味覚を生成する。
　被験者はボタンの操作によって味の設定を切り替えることができる。

　お箸とお茶碗にそれぞれ舌のインターフェースになる銀製の電極が取り付けられていて、そこに被験者に触れてほしい場所を示している。(味覚を感じるためには電極に同時に触れることが必要)


#検証方法
1. 5つの基本的な味の観点からどのような影響を与えるか
2. 被験者の総合的な嗜好にどのような影響を与えるか

　被験者にはお箸を使ってマッシュポテトを、お茶碗でお味噌汁を飲んでもらう。その後5つの基本の味(酸味、甘味、塩味、苦味、うま味)と、そのサンプルに対する全体的な好感度について評価してもらう。この道具を評価するために、ナトリウム含有量の異なるマッシュポテトと味噌汁を食べたときに、味の認識がどのように変化するかを測定。


#議論
 お箸でご飯を食べるときに、お箸は舌に触れないので正しい評価ができていないのではないか。
　


#気になった論文
　Spoon+とBottle+（Ranasinghe, Lee, Suthokumar, & Do, 2016）(過去の論文)
Railsアップデートにsproketsのエラーが出て起動できない

# 環境

- ruby 2.6.1
- rails 5.2.2 -> 5.2.6

# railsアップデート手順

1. Gemfileのrailsの箇所を`gem 'rails', '5.2.6'`に書き換え
1. `bundle update --conservative rails`を実行
1. エラーが出たら都度そのgemをrailsの後に追加していく
1. `rails app:update`を実行
1. 更新内容を確認しながら適用していく

# 発生したエラー

`rails s`でページを確認すると下記エラーが発生  

```
fest file in `app/assets/config/manifest.js` (Sprockets::Railtie::ManifestNeededError)
But did not, please create this file and use it to link any assets that need
to be rendered by your app:

Example:
  //= link_tree ../images
  //= link_directory ../javascripts .js
  //= link_directory ../stylesheets .css
and restart your server

For more information see: https://github.com/rails/sprockets/blob/070fc01947c111d35bb4c836e9bb71962a8e0595/UPGRADING.md#manifestjs
```

言われるがままmanifest.jsを追加するが下記エラーが発生

```
cannot load such file -- sassc
```

sasscのgem追加やmanifest.js周りの設定を書き換えるも解消できず  
(railsの中にengineも使っていて、そちらのsasscのコンパイルがうまく行っていないような挙動だった)  

# 修正方法

sprocketsの変更履歴を調べると4系から必要な対応だったため、バージョンを3系に固定しました（根本解決ではないので情報求む）

1. Gemfileに`gem 'sprockets', <~ '3.7.2'`を追加
1. `bunfle update --conservative sprockets`を実行
デバック環境を構築するMac編　外付けSSDにmac OSをインストールする（Intel,M1,Ventura対応）

ソフトウェアやハードウェアのデバックを行う際に開発環境とともに必要となるのがデバック環境です。
デバック環境を構築する　Windows10の回復機能でクリーンな環境に戻すの続きとして、MacOSにおけるデバック環境構築を行います。
https://qiita.com/usashirou/items/3dca5fa424fd637be079
使用する外付けSSDは3千円弱で入手できる１２０GB程度のものを使用しました。
# BigSurをダウンロードする
今回はBigSurをダウンロードします。
https://apps.apple.com/jp/app/macos-big-sur/id1526878132?mt=12
# BigSurをインストールする
BigSurのインストーラーを起動させます。
続けるをクリックしていきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/0f88ed6f-36d2-62de-6c09-49388005f881.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/fccb52cf-f413-f9a3-3a60-4d940f3f298a.png)
すべてのディスクを表示を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/525f356f-20ad-c285-60aa-f665966c3503.png)
# 外付けSSDを準備する
このままではインストールできません
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/9c85edda-e0f2-1468-5f52-89fd2602e975.png)
ディスクユーティリティを起動し左上の___すべてのデバイスを表示___を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/ed721d1d-4998-eb63-8519-aa2b04caa390.png)
__フォーマット：APFS
方式：GUIDパーテーションマップ__ 
を選択し消去します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/437749a8-9fd0-e0c1-1224-8e4ed0250cef.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/ca213c86-4261-c7a2-67ab-21f3a8488002.png)
今度は選択できるようになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/4296c45e-ee1f-f1f9-78d0-f13f9969aadf.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/b60b9b3f-aab3-d03c-95fa-4051b04194c1.png)
![スクリーンショット 2021-06-11 21.58.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/2aa00f37-9c57-9d16-f486-eadf44f5679f.png)
![スクリーンショット 2021-06-11 22.05.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/5b7362ca-276f-7d9b-6de9-0a8f13c1b096.png)
# 起動ディスクのセキュリティ変更
その後、数回の再起動を経てインストールが完了し、BigSurが起動します
・・・となるはずでしたが、外付けSSDを使用できない設定になっているケースがあり、起動ディスクのセキュリティを変更する必要がある場合があります。
# 数度の再起動
数度の再起動を繰り返した結果、外付けSSDからOSが起動することが出来ると思います。
# Optionキーを押して起動選択
起動する際にOptionキーを押しながら電源を入れます
これで起動ディスクを何にするかを選択できるようになります。
![スクリーンショット 2021-06-11 23.05.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/6ae4314c-40a9-01ba-a2a5-f63beefaec7e.png)
# macOS12 Montereyも対応
macOS Montereyでも問題なく起動しました。
![スクリーンショット 2021-07-07 10.27.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/5da8302a-1128-6e60-5d3f-278ed97c2914.png)
## 外付けSSDが問題なく認識されます
![スクリーンショット 2021-07-06 12.03.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/6775a607-0edf-2439-c539-3ae91188e3d0.png)
# macOS13 Venturaも対応
![スクリーンショット 2022-10-25 23.09.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/ead9a1b2-3fab-6ce6-8822-dc1e1a375bd7.png)
【在宅環境】新卒3か月で買った在宅部屋作りのオススメアイテム

##目次
* 自己紹介
* 現在の在宅環境と優先度別オススメアイテム
* これから買いたいもの

## 自己紹介
こんにちは、私は今年入社して3ヶ月目の在宅エンジニアです。ここ数年で在宅ワーカーが増えたと思いますが、私と同じように在宅で働いる方は快適に仕事できてますでしょうか？？
私は特に実家暮らしなので入社時の自室の環境は快適とは程遠い状況でした。。。
そんな私がこの数か月でストレスフリーな仕事環境を得るために購入したアイテムの中でオススメなものをいくつか紹介していこうと思います！

## 現在の在宅環境と優先度別オススメアイテム
###私の在宅環境
今の私のPC周りを簡単にイラストでまとめました！デスクトップパソコンに慣れているので、それに近いような環境にしています！
![グループ 7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1288580/9480950c-4041-05c6-3e24-3bc7659fca8e.png)

### 優先度別オススメアイテム
#### ☆☆☆優先度 高
* ディスプレイ(拡張用)  
自分の中では優先度がいちばん高かったです。価格も1万円台のものも多いので投資対効果が非常に大きいです。
私の環境ではノートパソコンのディスプレイを拡張する用途で購入しました。デュアル(あるいはそれ以上)のディスプレイにすると、”調べながら作業”やエンジニアだと”結果を見ながらコーディング”ができるので作業効率が飛躍的に向上します！
最近では「ワイドモニター」といった単体で横に広いディスプレイや、コードを書く人は「縦型ディスプレイ」を使う方も多いそうです！自分の
スタイルに合わせて購入するのもよいかもしれないです！

↓参考までに！

https://www.amazon.co.jp/ウルトラワイドモニター/s?k=ウルトラワイドモニター


* オフィスチェア  
在宅環境で腰の痛みや肩こりになやまされている方いませんか？？そういう方は真っ先に椅子に投資するとよいかもしれません！
私は思い切って”高級オフィスチェア”という類の椅子に清水の舞台から飛び降りる覚悟で購入しました。
現在その椅子を使って3か月経ちますが、腰痛は驚くほど改善されて姿勢もよくなっているのを実感します。
私が購入するときに見ていたポイントは"前傾モード"、"背中のフィット感"、"座面を前後調整できるか"でした。高い椅子ほどカスタマイズ性が
高くより自分に合わせられるようになっていますが、特に身長によって椅子との相性がかなりあると思ったので、ショールームに座りに行くことをお勧めします！

ちなみに私はこの椅子を選びました！高かったです。。。

https://www.hermanmiller.com/ja_jp/products/seating/office-chairs/sayl-chairs/

#### ☆☆優先度 中
* マウス
特にディスクトップPCに慣れている私にとってトラックパッド(ノートPCについているマウス)はストレスの原因でした。
キーボード入力の際に謝って触って変なところをクリックしてしまったり、、使いやすいと定評のmacbookですら私は苦手でした。。マウスのこだわりは特にありませんが、持ち運びできる小さいものというよりは長時間使っても疲れないものを選びました。
オススメはゲーム用のものを買うとボタンやドラッグの使用感が滑らかで非常に快適です！

* 有線LAN
在宅でweb会議等をしてる際に自分のネットワーク状況が悪くてコミュニケーションが滞ってしまう経験ありませんか？？解決策の一つに有線でインターネットを利用するという方法があります！自分の家のルーターが対応している場合はLANケーブルをPCまでつなげることで有線接続ができます！通信速度ももちろん改善されますが、大きな違いとしては安定した接続というところです。web会議のようなリアルタイムで通信していると少しでも通信が不安定になると映像が止まったりしてしまいます。そういった問題を解消するには有線接続は効果的ですよ！

#### ☆優先度 低
* キーボード  
これは私の手が大きいという理由でもあるのですが、ノートパソコンのキーボードだとタイピング速度がかなり落ちてしまうと感じたので外付けのキーボードを購入しました。購入前のWPM(一分間に打てる文字数)は280でしたが、購入後の現在は310ほどです(30文字は大きいですよね)。
一つ一つのキーが大きいので”間違って押してしまった”みたいなことも少なく個人的にはかってよかったと思います。
ちなみに僕はメカニカルキーボード(キーが大きいもの)が好きで↓を購入しました！

https://www.keychron.com/products/keychron-k8-tenkeyless-wireless-mechanical-keyboard
 
* タンブラー  
個人的な意見ですが、飲み物の補充って面倒ですよね、、怠惰な自分を甘やかすために650mlの容量のタンブラーを購入しました。
自分の使用感はとても快適でこどものころの夢だった”大量のカルピスをつくる”ということもできました！！



## これから買いたいもの
* モニターアーム
自分の机の上には私用のモニターを含めると3つ並んでいるのですが、モニターの土台が邪魔で机の掃除がしづらいです。机の上はきれいにしたい派なので、アームを買って土台を撤去したいです。。

* マイク
オンライン上のコミュニケーションだとやはり雑音だったり音質が悪かったりすると少なからず気になると思います。自分が結構気になってしまうタイプなのですが、オンラインコミュニケーションのハードルをすこしでも下げるために良いマイクを探している最中です。。
【初心者でもわかる】角がちょっとめくれている風CSSの書き方

# どうも7noteです。角がめくれているように見えるCSSを作る方法

CSSを使って、紙の端が丸くめくれているようなCSSを再現します。

![sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/e92978c6-4278-7807-34ce-c1eb6bc959e7.png)


## ソース

```index.html
<div class="box"></div>
```

```style.css
.box {
  width: 150px;    /* 幅を150pxに指定 */
  height: 200px;   /* 高さを200pxに指定 */
  border: 1px solid #000; /* 枠線を引く */
  position: relative;  /* 基準位置とする */
}
.box::before {
  content: "";
  width: 20px;   /* 幅を20pxに指定 */
  height: 20px;  /* 高さを20pxに指定 */
  background: linear-gradient(-45deg, #FFF 48%, #000 48%, #000 52%, #fff 52%);  /* グラデーションで1pxの線を引く */
  border-top: 1px solid #000;      /* 上に線を引く */
  border-left: 1px solid #000;     /* 左に線を引く */
  box-shadow: -1px -1px 2px #ccc;  /* うっすら影を作る */
  display: inline-block; /* インラインブロック要素にする */
  position: absolute; /* 相対位置に指定 */
  bottom: -1px; /* 下から-1ｐxの位置に配置 */
  right: -1px;  /* 右から-1ｐxの位置に配置 */
}
```


## 解説

まずは通常の四角形を作成し、borderを引きます。
その後、疑似要素で小さい四角形を作り、「右下なら反対の左と上」にborderを引きます。

斜め線をborderでは引けないので、グラデーションを使い「白→黒(1px)→白」のグラデーションを作成します。これを斜め方向に指定します。
position指定で-1pxずつずらすことで大きい四角の線を一部隠すことができます。

影は必要であればつけてください。若干の立体感が出ます。

## まとめ

もっとリアルな感じで作れるかなと思っていたのですが、基本のCSSで作るならこんなかんじでしょうか。
くるとしている感をだすなら画像のほうがいいかもしれませんね。

もしくは画像そのものをめくったように処理するjsなんかもあるのでそのようなライブラリを使うのもいいかもしれません。

#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】WEB制作のちょいテク詰め合わせ](https://qiita.com/7note)
DevOps とは？

## 勉強前イメージ

よく聞くけどなんのことかは理解できてない

## 調査

### DevOps とは

開発のDevelopment と 運用のOperations をあわせた言葉です。
開発では、開発するチームと運用するチームで分けられてることが多いですが、
DevOpsでは、開発チームと運用チームを1つにし、協力し合うことで迅速で柔軟に開発を進め、
サービスの提供を行うことをDevOpsと呼びます。

### DevOpsのプロセス

- 計画

開発する要件や各プロセスの実行計画などを決めます。

- 開発

計画に従って、プログラムを書いたり開発を行います。

- ビルド

開発されたソースコードをもとにして、ファイルを作成したりパッケージを作成します。

- 継続的インテグレーション(CI)

構成管理ファイル(github等)にコミットしたソースコードなどのビルドやテストを自動的に実施することです。
リリースまでの短縮や、バグを早期に発見することが出来ます。
CI/CDのCIがこちらになります。

- デプロイ

ビルドを行ったファイルを実際の使用環境で稼働できる状態にします。

- 運用

運用後の障害対応や、サーバなどのパフォーマンスを監視したりなど多岐にわたります。


- 継続的フィードバック

リリースを行ったサービスに関して、ユーザからの意見を継続的に受け取り、
開発プロセスに反映させることです。


## 勉強後イメージ

DevOpsよく聞くけど
簡単に言ったら開発と運用一緒にやろうねってことかな

## 参考

- [DevOpsとは何かを図でわかりやすく解説！アジャイルとの違いは？](https://udemy.benesse.co.jp/development/system/devops.html)
- [よく耳にするDevOpsとは？わかりやすく解説します](https://proengineer.internous.co.jp/content/columnfeature/13575)
Bubble.ioでSimple LineChart from ApexChartsを利用する

Bubble.ioで[Simple LineChart from ApexCharts](https://bubble.io/plugin/simple-linechart-from-apexcharts-1590676583119x228681247172329470)を利用したときの個人メモ

---

# Simple LineChart from ApexChartsの準備
- 「ApexCharts」を検索し、「Instal」を押下
![004.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242897/c1f5b65f-c92e-d4c3-24d2-19b153b11b13.jpeg)

# API Connectorの準備
- チャートに表示するデータをAPIを利用して取得する  

## インストール
- API Connectorのインストールは[Bubble.ioでAPI Connectorを利用する](https://qiita.com/nkmk1215/items/7b2a5aba763a973fa4bb)と同様

## 設定
- 設定は[Bubble.ioでChart Elementを利用する](https://qiita.com/nkmk1215/items/d32b23b2358fe719ce71)と同様
- 今回は2つのデータを使うため、「NetIncome」は取得する
![008.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242897/aa51a006-284c-2399-8e6a-248086c82c6b.jpeg)


# 画面実装
- 完成イメージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242897/5c36b4a7-4880-0bb6-83d4-ae7f12be5fc2.png)

## Group
- APIを紐づけるGroupを作成   
  ![003.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242897/8815867d-6264-9c84-a7f2-31b5de63f007.jpeg)

## Line Chart
- チャートを描画するLine ChartをGroup上に作成
![007.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242897/3cb7a208-4e80-31af-a032-8d098871019e.jpeg)


### Title
- グラフタイトルを指定（今回はApexChartを選択）

### Title Alignment
- グラフタイトルの表示位置を指定（今回はleftを選択）

### Series Categories
- X軸を指定（今回は日付）

### Series Name #1
- 1つ目のデータの名前を指定（今回はSale）

### Series Data #1
- 1つ目のデータの指定（今回は売上）

### Series Color #1
- 1つ目のデータの色を指定（今回は#77B6EAを指定）

### Series Name #2
- 2つ目のデータの名前を指定（今回はIncome）

### Series Data #2
- 2つ目のデータの指定（今回は収益）

### Series Color #2
- 2つ目のデータの色を指定（今回は#ED1717を指定）

### Chart Type
- チャートの表示形式を指定（今回はlineを選択）

### Stroke Curve
- データのつなぎ方を指定（今回はsmoothを選択）

### Enable Zoom
- グラフ内でズームの可否を指定（今回はチェックを入れる）

### Enable Animation
- ズーム時のアニメーションを指定（今回はチェックを入れる）

# 動作確認
- 画面描画時にAPIを実行し、チャートを表示する
![SimpleLineChartfromApexCharts.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242897/58bc9124-8038-868c-68d0-8a4154e026e4.gif)


- 2つのデータを同期的に表示（Sync Chart）
![009.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242897/f72f94ac-b5f6-3bd6-5736-5e4207cd7d6f.png)

- ドラッグアンドドロップで範囲してした部分をズーム
![010.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242897/7291e6bd-bba9-94fe-f009-0dd0cd37044b.png)
![011.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242897/781bfd1f-dcb5-2ab1-2529-2f9c583a907d.png)

# 感想
- Chart Elementよりは使いやすそう
- 複数データの表示はできる（Max5つ）が、表示形式は個別で指定できない
raspi 4でrasberry pi osにnode.jsをインストールする

raspi 4でrasberry pi osにnode.jsをインストールする方法です．
いろんな方法があると思いますが，この方法が一番簡単だと思いました．

まずcurlコマンドでnodesource.comからダウンロードします．

```bash
curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -
```
-s（--show-error）オプションはエラーを表示するためのもの．-L（--location）はページが移動していたら移動先から取ってくるようにするものです．21年6月の最新LTS版が14.17.0だったので14を指定しましたが，12や16を使いたい場合，14の部分を変えてください．

あとは管理者権限でインストールします．

```bash
sudo apt-get install -y nodejs
```

以上です．下記コマンドでインスールされているか確認できます．

```bash
pi@raspberrypi:~ $ node -v
v14.17.0
pi@raspberrypi:~ $ npm -v
6.14.13
pi@raspberrypi:~ $ 
```

### reference
https://linuxize.com/post/how-to-install-node-js-on-raspberry-pi/

https://www.fixes.pub/program/176230.html
Denoにコマンドライン補完を設定する

さっき存在を知った`deno completions`コマンドについて

## `deno completions`コマンドとは

denoコマンドにTab補完を設定するためのコマンド。

マニュアルによると、現在の対応状況は以下の通り。
https://deno.land/manual/getting_started/setup_your_environment

- zsh
- bash
- fish
- powershell
- elvish

## 使い方

わたしのパソコンはWindowsなので、powershellに対して補完を設定してみる。

まず、`$profile`のパスにファイルを新規作成する必要がある。（既に存在する場合はスキップ）

```powershell
PS> new-item -path $profile -itemtype file -force
```

次に、`$profile`にdenoの補完を出すための設定を書き込む。

```powershell
PS> deno completions powershell >> $profile
```

最後に再起動すると補完が有効になる。
ここで、スクリプトの実行が無効になっている場合はエラーが出る。
https://qiita.com/Targityen/items/3d2e0b5b0b7b04963750 ←この記事を参考に、スクリプトの実行を許可する。

```powershell
PS> Set-ExecutionPolicy -Scope CurrentUser RemoteSigned
```

これでdenoコマンドに対してTab補完が出るようになった。
HTML＆CSS　超初心者のpaddingとmargin



今日はprogateのHTML＆CSS道場コース！
学習コースはすんなり終えられたからいけるだろうと思っていたけど、やっぱり何も見ずに作るのは難しかった。。

特にpadding,marginなど配置に関わるもの。
これは要素の内側なの？外側なの？と混乱。
position:relativeとかfloatとかflexboxとか出てきたらさらに混乱しそう。。
応用に進む前に振り返っておくことにしました。

<h3>⭐️余白の考え方</h3>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/887525/23888d77-2351-6fa8-487d-ac87740425a4.png)

padding、margin、borderなどは上記のボックスモデルに基づいている。
HTMLの全ての要素にはborderがあるが、初期状態では表示されていない。
borderの外側余白がmargin、内側の余白がpaddingとなる。

<h4>⭐️padding、marginの使い方
上下左右ではなく、ある方向のみに余白を指定したい場合は
padding-top
padding-bottom
padding-right
padding-left　　　を使う。


まとめて書きたい場合は
値を４つ、スペース区切りで指定した場合、上右下左の順で適用される→ padding:20px(上) 10px(右） 20px（下） 10px（左）;
値を２つ指定した場合は上下　左右の順に適用される→ padding:10px(上下）　２０px（左右）；

<h4>レイアウト崩れを直すとき</h4>
要素の幅widthの指定に対して、paddingを追加したために要素はばの合計が100%を超えるとレイアウトが崩れる。
このようなレイアウト崩れはbox-sizing:border-box；で防ぐ。
（box-sizing:border-box;とすると、要素幅(width)にpaddingとborderが含まれるようになるため。）
ただしmarginは含まれない。

どうしてもわからないとき、模写とかなら元のページの検証機能を使うと答え合わせと見直しができる。
見たいページの上で右クリック→検証。CSSの欄を下までスクロールすると見たい要素のボックスモデルも見られる。

まだまだ追求すると奥深い、余白。
ただHTML＆CSSを使いこなすにはこの余白を制する重要性が高そう。
使いこなせるまで根気よく使ってみよう。。
Unity2017LTSでヒューマンフォールフラットのステージをつくってみよう【ざっくり概要編】

![Unity2017LTSで ヒューマンフォールフラットの ステージをつくってみよう.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/2587ac30-a352-efcd-f77b-461eb0c8def3.png)

clusterのワールドクリエイターならかんたんにできるんだぜ

# 開発環境の準備をしよう
## Unity2017LTSの準備
- Unity2017LTSをダウンロードしてインストールしましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/18dafa1d-7f62-1033-5ea3-85db68d072db.png)

## プロジェクトの準備
- ひとつプロジェクトをつくっておきます。
- 下図の場所から、packageデータをインポートします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/4f1a1083-fe86-58a2-805b-71c9e35c47c8.png)

- いったんプロジェクトを保存してUnityを終了します。
- 下図の場所から、ProjectSettingsをコピーして、自分のプロジェクト内で上書きします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/55063f3c-1da3-0ff3-2a27-64cfbc1e37b3.png)

# 開発しよう
## アセットの確認
- 下図の場所に、サンプルとなるSceneが格納されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/94334611-bdec-e5f9-6395-b8b3b939d150.png)

- 基本的にはclusterのワールド開発と同じで、スクリプトは使えません。
- animationなどコンポーネントベースのものは使えます。
- アセットストアのものも使えるものが多いです。

# 出力しよう
- 下図のように、各オブジェクトは子である必要があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/0eaaea79-c72d-b9f9-3ba1-7032ef07e53a.png)

- ステージのスクリーンショットが必要になるので、下図のように、実行中にF9ボタンでスクリーンショットを撮ることができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/88d30d01-3d9c-2837-ea32-b89f98800a55.png)


- 下図のように、「Human」-「Human Export」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/3cb9123c-7185-0e80-7707-08e5d566dd41.png)

- 下図のウィンドウで、もろもろ記入します。
- 最後に「ドリームをエクスポート」を押して、しばらく待てば完了です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/ecb6e3fe-16ff-ccb6-098b-8a063995ecd6.png)

# 実機確認しよう
- Unity2017が起動していると、ヒューマンは起動しません。いったん終了しましょう。
- 下図の通り、メニューを遷移していきます。



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/227b7005-979d-f319-5819-9dd566f5455f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/36d61501-7b59-a6e1-efe4-5f02225c5747.png)
GROPU BYする時のGROUP_CONCATの使い方

# 記事を書くきっかけ
会社の仕事で調べて便利だったので（知らなかった）
あとアウトプットが大事って聞いた

# group_concat
  [GROUP_CONCAT](https://dev.mysql.com/doc/refman/5.6/ja/group-by-functions.html#function_group-concat "MySQL 5.6 リファレンスマニュアル")

# 使い方
今回の仕事で使ったデータをマスクして使用します
genba_hatureiテーブル

| id | shain_no | name | genba | date_from | date_to |
|:-:|:-:|:-:|:-:|:-:|:-:|
| 1 | 10001 | Aさん | ビル建築  | 2019-04-01 | 2020-03-31 |
| 2 | 10002 | Bさん | 家屋建築 | 2020-02-01 | 2020-11-31 |
| 3 | 10003 | Cさん | 橋建設 | 2020-04-01 | null |
| 4 | 10001 | Aさん | 家屋解体 | 2020-04-01 | 2020-04-30 |
| 5 | 10002 | Bさん | アパート建築 | 2020-12-01 | null |
| 6 | 10001 | Aさん | 整地  | 2020-05-01 | null |

欲しいデータの返却値は以下

| shain_no | name | genba  |
|:-:|:-:|:-:|
| 10001 | Aさん | 2019-04-01 ～ 2020-03-31 : ビル建築 <br>  2020-04-01 ～ 2020-04-30 : 家屋解体 <br>  2020-05-01 ～ : 整地 |
| 10002 | Bさん | 2020-02-01 ～ 2020-11-31 : 家屋建築 <br> 2020-12-01 ～ : アパート建築 |
| 10003 | Cさん | 2020-04-01 ～ : 橋建設 |

書いたSQLが以下

```
SELECT
	  shain_no
	, name
	, group_concat( 
		date_from
		, " ～ "
		, date_to
		, " : "
		, genba separator "\r\n"
	) as genba
FROM
	genba_haturei 
GROUP BY
	shain_no
```

# 記事を書いてみて
最初は現場名だけまとめられれば御の字くらいに思ってましたけど、カンマ区切りで追加できるのが便利で一発でかけてしまった。
今後も便利だなと感じたら記事にしてみようかと思います。備忘録も兼ねて。

# 参考サイト
https://techblog.recochoku.jp/5346
https://dev.mysql.com/doc/refman/5.6/ja/group-by-functions.html#function_group-concat
Wi-Fi の 5GHz 帯と 2.4GHz 帯の違いと DFS について

# この記事は？

[Software Design 2019 年 5 月号](https://gihyo.jp/magazine/SD/archive/2019/201905) の TCP/IP 特集で、Wi-Fi の周波数帯について説明があったのでまとめた。

# TL;DL

* 5GHz 帯は  2.4GHz 帯と比べて高速で、家電や Blootooth 対応製品の電波とも干渉しない。
* しかし 5GHz 帯のチャネルによっては、気象レーダーや航空レーダーと干渉する。
  * 5GHz 帯の中でもそれらのレーダーと干渉しない W52 チャネルを使用するとよい。
  * ただし、他の無線 LAN 機器も W52 を優先して使おうとして混線するかもしれない。

# Wi-Fi 規格と周波数帯について

| Wi-Fi 規格 | 最大通信速度 | 周波数帯 |
| --- | --- | --- |
| IEEE 802.11a | 54Mbps | 5GHz |
| IEEE 802.11b | 11Mbps | 2.4GHz |
| IEEE 802.11g | 54Mbps | 2.4GHz |
| IEEE 802.11n | 300Mbps | 2.4GHz/5GHz |
| IEEE 802.11ac | 6.9Gbps | 5GHz |

# 5GHz 帯と 2.4GHz 帯の違いについて

| 周波数帯 | メリット | デメリット |
| --- | --- | --- |
| 5GHz<br>(高周波数) |  <ul><li>情報量が多い</li><li>高速</li></ul> | <ul><li>直進性が高く電波が回り込む特性が低いため、障害物に弱い</li><li>気象レーダーや航空レーダーの電波と干渉する</li></ul>  |
| 2.4GHz<br>(低周波数) | <ul><li>電波が遠方まで届きやすい</li></ul> | <ul><li>家電や Blootooth 対応製品などの電波と干渉する</li></ul> |

# DFS について

5GHz 帯はさらに 3 つのチャネルに分けられる。

| 周波数帯 | チャネル | 同じ周波数帯の電波 |
| --- | --- | --- |
| 5,180〜5,240GHz | W52 | |
| 5,260〜5,320GHz | W53 | <ul><li>気象レーダー</li></ul> |
| 5,500〜5,700GHz | W56  | <ul><li>船舶レーダー</li><li>航空レーダー</li></ul> |

* W53, W56 は他のレーダーとの共存のために DFS (Dynamic Frequency Selection) の実装が義務付けられている。
  * アクセスポイントがチャネルを使用する前に 60 秒間レーダーの存在を確認する。
    * レーダが検出されない場合はチャネルの使用を開始する。
    * レーダーを検出すると、チャネルを明け渡して他のチャネルを使用する。
      * レーダーを検出したチャネルは 30 分間使用できなくなる。
*  可能であれば、DFS の不要な W52 を使うとよい。
  * ただし、W52 と W53 の屋外利用は法令で禁止されている。
Liquid Object にCSSクラス名を指定する

ShopifyのTheme開発をやっていて、単純だけど発想に驚いたので共有してみました。
今回は、Liquidのオブジェクトで生成されるHTMLタグにCSSのclass名を指定できないかと思い調べていました！

言葉ではわかりにくいので、コードを書いて説明
```{{ 'ログイン' | customer_login_link }}```
を使うと
``` <a href="/account/login" id="customer_login_link">ログイン</a>```
を生成してくれる。

この生成してくれるHTMLにクラスを持たせようと思いましたが
```{{ 'ログイン' | customer_login_link | class: login-link}}```
こんなことはできず…


##　replace: を使ってHTMLを置き換え
参考にしたのはこちら
https://stackoverflow.com/questions/48530148/add-a-class-to-a-shopify-liquid-link

```{{ 'ログイン' | customer_login_link | replace: '<a', '<a class="login-link"'}}
```

Liquidのreplaceを使って生成される文字列を置き換えてあげる。
他に見ていた記事には、Liquidのオブジェクトにはクラス名は指定できないと書かれていて、ガッガリした次の瞬間に、感動いたしました。

他のことにも応用できそうなので参考にされてみてください。
自作Gemをアップデートする

# Gemを公開しました！・・・で終わらないで！

![2021-06-11_21-31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462614/c991093c-4d89-536f-15e5-5fe0ecd521ee.png)


話としてGemの作り方、公開のやり方はありますが、同じぐらい大事なのはGemのアップデートの公開のやり方かと思います。

よくある話として、Github上をみるとGemの開発は結構進んでいて、けれど、Rubygemsには公開されていない・・・・ということはみんな経験あるかと思います。

けれど、Gemのアップデート・Rubygemsへの公開って意外にも簡単です。

# 更新コマンド

更新コマンドがあります！バージョン自動であげてくれます！

まずはgem-releaseというGemをインストールします。

```sh
$ gem install gem-release
```

これでバージョンをあげるコマンドが使えるようになります。

```sh
$ gem bump --version minor # マイナーバージョン
$ gem bump --version major # メジャーバージョン
$ gem bump --version 1.1.1 # 特定バージョン
```

このコマンドを実行して、`bundle`コマンド実行して、Gemfile.lockの変更点もコミットします。
あとは一つだけです:

```sh
$ rake release
```

これでアップデートは完了して、Gemの新しいバージョンをRubygemsよりダウンロードできるようになります！

参考にしていたのはBundlerの公式サイトです（一番最後の方は特に参考になります）：
https://bundler.io/guides/creating_gem.html
try-catch-finallyブロックについて

# try-catch-finallyブロックについて

## try-catch-finallyブロックによる例外処理

Java言語には例外処理を行う方法が2つあります。

・try-catch-finallyブロックによる例外処理
・throwsキーワードによる例外処理

今回は「try-catch-finallyブロック」の説明をしていきます。

## try-catch-finallyブロックの構造

以下のコードをご覧ください。

```
void method(){
    try{
        例外が発生しそうな処理
    }catch(例外クラス名 変数名){
        例外が発生したときの処理
    }finally{
        必ず実行したい処理
    }
}

```

各ブロックの役割は、次の通りです。

・tryブロック ⇨ 例外が発生しそうな箇所をtryブロックで囲む
・catchブロック ⇨ 例外は発生したときの処理をcatchブロックの中に定義する
・finallyブロック ⇨ 例外が発生しなくても必ず実行したい処理をfinallyブロックに定義する

Java実行環境からスローされてきた例外のオブジェクトを受け取るのが、catchブロックの役割です。

```
catch(例外クラス名 変数名){}
```

例外クラス名は、Javaには例外クラスというものが存在しそれを上記に定義します。

## try-catch-finallyブロックの組み合わせ

try-catch-finallyのすべてのブロックを記述する必要はありません。
次の組み合わせが可能です。

・try-catch
・try-finally
・try-catch-finally

ただし、注意点として、tryブロックのみの定義はコンパイルエラーとなります。

## まとめ
・Javaの例外処理には2通り存在する。「try-catch-finallyブロック」「throwsキーワード」
・tryには例外が発生しそうな箇所をtryブロックで囲む
・catchブロックには例外は発生したときの処理をcatchブロックの中に定義する
・finallyブロックには例外が発生しなくても必ず実行したい処理をfinallyブロックに定義する
・try-catch-finallyのすべてのブロックを記述する必要はない。
CloudFrontを導入してからブラウザ再読込しないとトップページを表示できなくなった話

ブラウザ再読込をすると表示できるのですが、こういったエラーが出てトップページを表示できなくなってしまいました。
![unexpected token.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630191/bea88d28-4c23-06c0-ad35-7d0df4dea245.png)

エラーメッセージが示す余分な「<」が問題というより、今回の場合問題箇所のmain.jsはどうやら古いキャッシュのようで、ブラウザ再読込するとこのmain.jsが更新されエラーが消えるというなんとも嫌な状態です。

解決策としては、cloudfrontのBehaviorタブからMinimum TTL・Maximum TTL・Default TTLを0にすることで解決しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630191/da541e7c-cb1c-9aff-6cf6-f84090a2fd5b.png)
nvidia RTX3070 laptop搭載マシンへのCUDA11.3のinstall

## はじめに
この記事の主な目的は、「RTX3070 laptop マシンにnvidia driverを入れたいなら、Ubuntuは18ではなく、20にしよう」です。
でもそういうタイトルにすると、nvidiaのサイトにもUbuntu18サポートが書いてあるのにおかしいじゃないか！と言われそうなので、表題通りのおとなしいタイトルにしました。Ubuntu18.04で苦戦した内容は、ほとんどの人にはどうでもいいと思うので、最後にちょこっと書いておきます。

## 前提環境
PC: ASUS TUF Dash F15 laptop
CPU: 11th Gen Intel® Core™ i7-11370H @ 3.30GHz × 8 
GPU: NVIDIA GeForce RTX 3070 Laptop GPU/PCIe/SSE2
OS: Ubuntu 20.04.2 LTS
linux kernel: 5.8.0-55-generic
CUDA version: 11.3.1

## インストール方法
Ubuntu20をインストールします。
その後、基本的には[nvidia installation guide](https://docs.nvidia.com/cuda/cuda-installation-guide-linux/index.html)に従うだけでいけます。でも長いので、やればいいことだけ下にまとめます。

###1. gccのインストール
デフォルトではgccは入っていませんでした。Ubuntu20.04.2の場合、下記コマンドで9.3.0がデフォルトでインストールされます。

```
sudo apt install gcc
```

###2. リポジトリの追加とcuda toolkitのインストール
[こちらのnvidiaのサイト](https://developer.nvidia.com/cuda-downloads?target_os=Linux&target_arch=x86_64&Distribution=Ubuntu&target_version=20.04&target_type=deb_network)に、自分の型番を入れるだけ。
cuda toolkitに適切なNvidiaドライバーも含まれているので、このインストールのみでドライバもインストールできます。

　注意すべきは、最後に"deb[network]"を押すとダウンロードが始まっちゃうのかと思いきや、ダウンロードも含めた方法が出てくるだけ、ということ。この分かりにくい仕様に騙され、最初ボタンを押せませんでした。ポチッと押しちゃってください。
今回"deb[network]"を押したときに表示されるインストール方法の例

```
wget https://developer.download.nvidia.com/compute/cuda/repos/ubuntu2004/x86_64/cuda-ubuntu2004.pin
sudo mv cuda-ubuntu2004.pin /etc/apt/preferences.d/cuda-repository-pin-600
sudo apt-key adv --fetch-keys https://developer.download.nvidia.com/compute/cuda/repos/ubuntu2004/x86_64/7fa2af80.pub
sudo add-apt-repository "deb https://developer.download.nvidia.com/compute/cuda/repos/ubuntu2004/x86_64/ /"
sudo apt-get update
sudo apt-get -y install cuda
```

###3. 環境変数の設定
以下を~/.bashrcの末尾に追記

```
export PATH=/usr/local/cuda-11.3/bin${PATH:+:${PATH}}
```

以上です！rebootすればもう `$nvidia-smi` でnvidia driverが認識され、`$nvcc -V` でCUDAコンパイラのバージョンが確認できます。


## Ubuntu18.04.5にCUDA11.3を入れようとして、できなかったこと
- sudo ubuntu-driver autoinstall
    - →入ったのですが、古いドライバが入ったのか、リブートかけると起動せず、黒画面にHDMI関連のエラーが出た
- reposotiry追加してapt install
    - →[nvidia installation guide](https://docs.nvidia.com/cuda/cuda-installation-guide-linux/index.html)に従って、aptリポジトリを追加してインストールするも、リブートかけると起動せず、/var/log/Xorg.0.logも吐かれない。
- linux kernelを5.4.0に対し、NVIDIAが動作確認した5.3.0を入れ、上記aptリポジトリ追加方法でインストール
    - sudo apt install linux-image-5.3.0-74-generic linux-headers-5.3.0-74-generic linux-modules-extra-5.3.0-74-generic でインストール
    - →そもそもkernel5.3.0でブートできない。フリーズし、ログイン画面に行かない。
- runfile install
    - [nvidiaのサイト](https://docs.nvidia.com/cuda/cuda-quick-start-guide/index.html#ubuntu-x86_64)に従って、nouveauをblacklistにいれて、runfileをダウンロードして実行するも、リブートかけると起動せず、/var/log/Xorg.0.logも吐かれない。

というわけで、嫌になって、OSをUbuntu20に入れ直しました。すると、上記のようにあっさり行きました。

##  終わりに
まとめると、なんじゃそりゃ、というくらい簡単な記事ですが、その方法にたどり着くまで、４日ほどかかったので、まとめておきました。
皆さん、古いシステムにこだわらず、新しいのに移れば、驚くほどあっさりセットアップできたりすることがありますよ、と言って終わりたいと思います。
MAMP環境でLaravelをインストール

こんにちは。
タイトル通りMAMP環境で
Laravelをインストールする手順を
書いて行きます。

#はじめに
かなり初歩的な内容ですが、
今回はQiitaの投稿に慣れていきたい
という事で書いてみました。

#開発環境
前提に

* MAMP

* Composer

上記がインストール済みで
それ以降のLaravelインストールの
お話しになります。

#インストール方法
Laravelのインストールには、
２種類あるようで

* composer経由

* Laravel installer経由

があるようですが、
ここではcomposer経由を書いて行きます。

#まず最初に

ターミナルで

```
cd /Applications/MAMP/htdocs/
```
を打ち
htdocsへと移動します。

そこで

```
composer create-project laravel/laravel --prefer-dist プロジェクト名
```

これでLaravelのインストールを開始します。

最後に
successfully.
と出たらインストール完了です。

ちなみに、
上記のコマンドだとLaravelの最新バージョンが
インストールされます。

#バージョン指定したい場合

例えば
バージョンを6.0系にしたい場合

```
composer create-project "laravel/laravel=6.*" --prefer-dist プロジェクト名
```
これでバージョン6.0系になります。

以上です。
レスポンシブについて

#はじめに

当たり前ですが、パソコンでwebサイトを閲覧するときは画面がスマホより大きいです。

そしてスマホでwebサイトを見るときはパソコンより小さいです。

そういった様々なデバイスの大きさに対応し、閲覧しやすいデザインのWebサイトを作成する方法があります。

#レスポンシブwebデザイン

画面幅によって見た目が変わるようにWEBサイトやアプリケーションのデザインを設計することです。

作成したHTMLを画面のサイズによってCSSを変える事ができます。


![スクリーンショット 2021-06-11 19.39.09（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1264460/a275acd0-acc2-1710-04ec-256a24b33a61.png)


webサイトをレスポンシブ化する為には下記の行程が必要です。

* 表示領域を設定する

* 画面サイズによって画像のようにCSSを切り替える

* 画面サイズごとに適用するCSSを記述する

レスポンシブ対応をするためには、画面幅が異なるデバイスに対してWebサイトの表示領域の設定をする必要があります。

この表示領域をviewportと呼びます。

viewportの指定をしないと、スマートフォンで表示した時に、PCサイトのレイアウトをそのままスマートフォンの画面内に収まるように縮小して表示されるので、文字が小さくなり非常に見づらくなってしまいます。

#画面サイズを切り替える方法

「画面幅が500pxになった時のみ、h1タグのfont-sizeを5pxにしたい」場合は以下のように記述します。

```.css
@media (max-width: 500px) {
  h1 {
    font-size: 5px;
  }
}
```
**メディアアクエリ@media (max-width/min-width: 〇〇〇px) { }**

メディアクエリとは、表示された画面幅に応じて適用するスタイルを切り替える機能です。

**ブレークポイント**

ブレークポイントとは、メディアクエリによって規定されるスタイル適用の分岐点を指します。

@media (max-width: 500px){ }の場合は500pxがブレークポイントとなります。

ブレークポイントの値を何pxにするか、また何箇所ブレークポイントを置くかは制作するWebサイトの要件によって変わります。