OmniAICreator/Qiita-1.07M huggingface dataset:
独断と偏見で選ぶ作業効率をあげるキーボード

# はじめに
以下の人を対象に作業効率があがるキーボードを紹介します

 - 現在、リモートワークしていて作業効率をあげたい人
 - 4月から大学・高専などで情報系に入る学生
 - そろそろ本気になりたいプログラマ

# おすすめキーボード
## Happy Hacking Keyboard Professional HYBRID Type-S US 配列
通称、HHKB。満を持して、 Bluetooth 版の type-s が登場しました。
一度使うと他のキーボードに戻れないキー配列と打鍵感です。
価格が3万5千円（2020年現在）となっており、高いキーボードではあるものの一家に一台は欲しいキーボードです。
無刻印版を使うのが通。誰かに使われる可能性がグッと減ります。
友人曰く、「フリーアドレスの職場で置いておくと、私以外触らないので、席の確保楽」とのこと。
私がプログラムを書く時は、HHKBのtype-Sを使っており、2台目にHYBRIDを買おうか検討中です。
https://www.pfu.fujitsu.com/direct/hhkb/detail_pd-kb800wns.html

## REALFORCE
私はHHKBの熱狂的なファンなので、詳しくは知らないですが、こちらも捨てがたいです。
店頭で試し打ちした印象では、やや打鍵感は重めだった気がします。
価格も3万円とHHKBよりは、買いやすい値段になっています。
あと相模原市のふるさと納税の返礼品になったこともある模様。
https://www.realforce.co.jp/

## Majestouch 2（JP配列）
私の一押し。1万円前後で、打鍵感を選択できるのが特徴。
茶軸、黒軸、青軸、赤軸、MX SILENT、MX LowProfile赤軸があるらしいです。（私が知っている時代位より増えた）
私は普段のオペレーションでは茶軸のJPを使っています。
理由は、リモートに入った時にキー配列が異なると打ち込んだものと違うものがたまに表示されるため、典型的なJP配列を使っています。
軽めの打鍵感が好きな人は青軸がオススメです。
https://www.diatec.co.jp/products/list.php?s[]=110:1006:10026

## Microsoft 製のエルゴなんちゃら系キーボード
私はマイクロソフトの作るハードウェアが好きで、モバイル用のマウスは歴代マクロソフト社製です。
過去に優秀だった同僚が好んで使っていました。試してみる価値はあると思います。
https://www.microsoft.com/accessories/ja-jp/keyboards

## Ergodox EZ
分割キーボード。海外から輸送してもらう必要があり。
分割キーボードを使いたいと言う人が買っているイメージです。
初心者にはハードル高めですが、円高になっている今が購入のチャンスか！？
https://ergodox-ez.com/
https://qiita.com/moutend/items/dd3ac2b8cffd69809928

## Mint60
分割キーボード。
**<font color="HotPink">可愛い</font>**

自作キーボードなので、電子工学、電気回路を専攻しているような学生向け。
**<font color="HotPink">可愛い</font>**

ただし、金額が1万5千円から2万円です。。
学生には手が届かない価格だけども、キーボードを作ると言う体験ができます。

だが、
**<font color="HotPink">可愛い</font>**
**<font color="HotPink">可愛い</font>**
**<font color="HotPink">可愛い</font>**

https://eucalyn.shop/shop/kits/mint60-starter

## Let's Note
もはやキーボードではなくノートパソコンですが、打鍵感は非常に良いです。
キー配列が独特で積めるメモリー量と価格が難点ですが、ノートパソコンと割り切って使う分には非常に良いです。

## 旧型の ThinkPad キーボード (販売終了)
使ってきた中で、コストと打鍵感のバランスが一番よかったです。
現在の ThinkPad のキーボードはペタペタと打つ感じですが、旧型（2008年ぐらい）はカチカチと打鍵感があって非常に打ちやすかったです。
これでプログラム、オペレーション、どちらもやれるため、非常に助かった一台でした。
もう一度販売してもらえませんかね、Lenovoさん！！

# おわりに
インタフェースを自分にあったものを使うと作業効率が上がります。
作業に対するストレスも減ります。
リモートワークや勉強で自宅に快適な環境が必要になったことをきっかけに新しいキーボード買いませんか？

なお、キーボード以外にマウス沼と作業用椅子沼があり、これらも探し始めるとキリがありません。参考までに私の環境を言えば、

 - マウスはロジクールM705(高速スクロールができて、ログを追いかける時便利）
 - 椅子はコンテッサ2（14時間ぐらいは座り続けても腰痛にならない）

です。
Raspberry Pi, Jetson Nano向けオーディオ入出力ボードの作成(オーディオ入力ノイズ対策編)

引き続き[前回](https://qiita.com/kmitsu76/items/dec5701a52f2badd2379)作成したコーデックボードをRaspberry pi、Jetson Nanoへ接続し、検証していく。

##オーディオ入力のノイズ

オーディオ入力の設計は出力に比べて難しく感じる。
Audacityでオーディオ入力をモニターモードにして、Raspberry piを操作したところ、大きなノイズが観測された。バイパスコンデンサーを大きくしても効果がない。

参考動画
[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/1A3uct1OIP8/0.jpg)](http://www.youtube.com/watch?v=1A3uct1OIP8)

グラウンド電位も含めたノイズが載っているのではないかと仮定し、いろいろ調べてみたところ、アイソレーターというチップがあるようだ。

[ISO7641FM](http://www.tij.co.jp/product/jp/ISO7641FM)
データシートを見るとちょうど4本の信号線を分離してくれ、信号の方向も都合よく1本だけ反対を向いている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387653/c7797d04-e69e-a180-ba71-496af8afa6c2.png)
これを使ってアイソレータ基盤を作ってみる。
2次側はGNDから完全に分離されるので、別途電源が必要になる。
コーデックボードは5Vと3.3Vを必要とするのでUSB5V入力で3.3vはレギュレータから生成させる。
サーバー認証用のチップを追加で積んでみた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387653/b49b9996-e129-fa30-ff02-77428e99b8f0.png)

パターンデザインはGNDを分離させて作成した。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387653/7e5f5dfc-bfa1-a008-5e93-f0dca812f308.png)

2段重ねでRaspberry piとの間に挟み込む。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387653/e299121e-bd56-bc76-2998-dcb4860c40f8.png)

効果は参考動画をアップした。
[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/Ms9BSu468rs/0.jpg)](http://www.youtube.com/watch?v=Ms9BSu468rs)

画面操作によるオーディオ入力へのノイズ飛びつきをなくすことができた。
自分用メモ　2020.3.13更新

#VSCodeで競技プログラミング
ライブラリ(bits/stdc++.h)を使用するため

gccのbrewインストールに時間がかかるため、
・Xcodeを最新版に
・CLT（Xcode Command Line Tool)をインストールしておく
https://rcmdnk.com/blog/2019/02/26/computer-mac-homebrew/

gccのインストールとライブラリ(bits/std++.h)の設定
https://qiita.com/EngTks/items/ffa2a7b4d264e7a052c6

#シェルの変更
bash→zsh
https://qiita.com/tamakory/items/ce228762c9078466c71f

#vimを使ってみる
https://tech-camp.in/note/technology/1455/

#vim read only を強制保存
https://qiita.com/shuthimaru/items/2334f63845d8b0d85bdd
blocklyでobjectを動かす。 その２

#概要

blocklyでobjectを動かして見る。
fizzbuzzやってみた。

#結果

![image](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/b54a35bb-24dc-3308-ba1a-891ff45de320.png)


#フロー

![image](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/560ee0fa-7458-4d88-825f-219f9386f788.png)


#成果物

https://embed.plnkr.co/plunk/Od1JJN3xEebJZu2b

以上。
【Vue.js 】配列のデータを展開してループ（v-forディレクティブ）

## v-for
for文やwhile文のような繰り返しの処理をVueでも使うことができる（配列を用意して、そこから１つずつ取り出してその内容を表示する）　　
Vue.jsではこの繰り返し文を「v-for」ディレクティブを使用してhtmlファイル上で実現することができる。


基本構文
```v-for="各要素の一時的な変数名 in 繰り返したい配列やオブジェクト"```

データ配列を展開してみる

```sample.html
<div id="app">
  <dl v-for="grade in grades" :key="grade.subject" >
    <dt>{{ grade.subject }}</dt>
    <dd>{{ grade.score }}</dd>
  </dl>
</div>
```
```grades.js
new Vue({
   el: '#app',
   data: {
       grades: [
             { subject:'国語', score: '80点' },
             { subject:'数学', score: '68点' },
             { subject:'理科', score: '75点' },
             { subject:'社会', score: '88点' }
       ]
   }
});
```
```""grade in grades"```でdataのgradesプロパティを変数"grade"に置き換える。
```{{ grade }}```でデータを表示。

```sample.html
<div id="app">
  <dl v-for="(grade, index) in grades" :key="grade.subject" >
    <dd>{{ index }}</dd>
    <dd>{{ grade.subject }}</dd>
    <dd>{{ grade.score }}</dd>
  </dl>
</div>
```
要素の配列にはインデックス番号が割り振られているのでインデックスを取得することもできる。
```(grade, index)```
コンマで区切り、2番目の引数にインデックス用の変数を入れて括弧で囲むだけ。
```{{ index }}```で表示することができる。
※インデックス番号は0から始まることに注意。

#### keyプロパティの設定
上記のサンプルコードでは```:key=""```でkeyの設定がされている。ここではデータの値を入れているがインデックスを指定してもOK。
v-forディレクティブではユニークなkeyプロパティをつけなければならない。keyはVue.jsがデータを追跡する際のヒントになり、パフォーマンスにも影響する。
monorepoなプロジェクトでVSCode+ESLintがうまく動かないとき


monorepoなプロジェクトでたとえば

```
.
├── docker-compose.yml
└── services
    ├── my-bff
    │   ├── package.json
    │   └── yarn.lock
    └── my-api
        ├── package.json
        └── yarn.lock
```

というようにpackage.jsonがサブディレクトリにある構成のときにESLintがうまく動作しない。

以下をVSCode全体の設定として与えると動作するようになる。

```json
{
  "eslint.workingDirectories": [{ "mode": "auto" }],
}
```
【SEO】【構造化データ】パンくずリスト

##はじめに
ここでは実際にどのように実装をしたかを書いていきたいと思います。
パンくずリストはRDFa、microdata、JSON-LDで記述できますが、今回はRDFaを使った例を紹介します。

##パンくずリスト

ここ→[google developer's guide for breadcrumb](https://developers.google.com/search/docs/data-types/breadcrumb?hl=ja)に書いてあることをやっていきます。


```breadcrumb.html
<div class="pankuzu">
  <div class="inner">
    <ol vocab="https://schema.org/" typeof="BreadcrumbList" class="breadcrumb">
      <li property="itemListElement" typeof="ListItem">
        <a href="/" property="item" typeof="WebPage">
          <span property="name">HOME</span>
        </a><meta property="position" content="1">
      </li>
      <li property="itemListElement" typeof="ListItem">
        <a href="/spot/kanagawa/" class="prefName" property="item" typeof="WebPage">
          <span property="name">神奈川県</span>
        </a><meta property="position" content="2">
      </li>																	 
      <li property="itemListElement" typeof="ListItem">
        <a href="/spot/kanagawa/l141003/" class="cityName" property="item" typeof="WebPage">
          <span property="name">横浜市</span>
        </a><meta property="position" content="3">
      </li>
      <li property="itemListElement" typeof="ListItem">
	<span property="name">横浜市西区</span><meta property="position" content="4">
      </li>																			 
    </ol>
  </div>
</div>
```

補足すると、

- 最後のリストは現在地を表示するものなので`<a>`タグがない
- `<a>`タグのurlは相対パスでOK
- `<meta>`タグの`content`の数値は1から開始し、階層が深くなるごとにプラス1する


##ちゃんと書けているか確認したい
構造化データには決められたルールがあり、そのルール通り記述する必要があります。
本番公開前にエラーがないか確認したい...というとき、[構造化データテストツール](https://search.google.com/structured-data/testing-tool/)がとても便利です！
対象ページのURLからでも確認できますし、htmlをコピペするだけでもOKです。
最低限errorが出ないようにしてください。
（警告は修正必須ではありません。）

エラーが出ているときはこんな感じで表示されます。
![structuredDataWithAnError.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245841/98293f25-df52-8f9d-5400-ac0dcb9ba8d6.png)



ちゃんとできているとこんな感じで表示されます。

![structuredDataWithNoError.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245841/8b12eb8b-e70d-3b59-18bc-13b142f89e98.png)


##終わりに

WordPressだとプラグインでやっちゃったりすると思いますが、そうじゃなくても簡単ですぐできるのでやっておくといいと思います。
本番環境でデータベースに情報を入力する方法。(seed.rb, SQL)

# はじめに

ローカル環境ではMYSQLに直接データベースの情報を入力していたのに
本番環境ではどのように入れたら良いかわからなーーーい！！
という方に必見です！！

※「Ruby on rails」を用いて作業しておりますので
そのことに関する情報のアウトプット記事となっております！！



## 1.モデルの作成

使用するアプリは
①moviesテーブル
②genresテーブル
③movie_genresテーブル（中間テーブル）
のデータを持っているとします。

それぞれのモデルとマイグレーションファイルを作成します。

```ruby:ターミナル
rails g model movie title:string content:text --timestamps=false
# movieのモデルとマイグレーションファイルが生成される。
rails g model genre name:string --timestamps=false
# genreのモデルとマイグレーションファイルが生成される。
rails g model movie_genre movie_id:integer genre_id:integer --timestamps=false
# movie_genreのモデルとマイグレーションファイルが生成される。
```

それぞれのモデルの関係性は下記の通りです。

```ruby:movie.rb
class Movie < ApplicationRecord
  has_many :genres, through: :movie_genres
  has_many :movie_genres
end
```

```ruby:genre.rb
class Genre < ApplicationRecord
  has_many :movies, through: :movie_genres
  has_many :movie_genres
end
```

```ruby:movie_genre.rb
class MovieGenre < ApplicationRecord
  belongs_to :movie, optional: true
  belongs_to :genre, optional: true
end
```
※Rails5からデフォルトで外部キーのnilが許可されなくなったので、 nilを許可する場合は以下のようにbelongs_to へoptional: trueを設定する必要があります。

## 2.テーブルの作成

```ruby:ターミナル
rails db:migrate  # マイグレーションを実行し、テーブルを作成。
```
テーブルができるので
ここからが本番環境でも適応されるデータベースへの書き込み方になります！！

## 3.seed.rbの記述をし本番環境でテーブル情報を反映

seed.rbに下記のように入力します。

```ruby:seed.rb
Movie.create!(
  title: 'トイストーリー',
  content: 'おもちゃが動き出すよん',
)
#映画のtitleとcontentを入力
#書き方は他にもいろいろあるみたいですけど私はこの書き方にしました。

Genre.create!(
  name: 'アニメーション',
)
Genre.create!(
  name: 'アドベンチャー',
)
#ジャンルのnameを入力
```
この状態で

```ruby:ターミナル
rails db:seed
```
を入力するとローカル環境のデータベースで反映されています。
これらのデータを入力し終えたらリモートにpushしましょう。

では続けて本番環境で

```ruby:ターミナル
[ec2-user@******* ~]$ cd /var/www/アプリケーション名/
[ec2-user@******* アプリケーション名]$ cd current/
[ec2-user@******* current]$ rake db:seed RAILS_ENV=production
```
を入力すると本番環境でも
①moviesテーブル
②genresテーブル
が反映されることができました。

では続いて
③movie_genresテーブル（中間テーブル）を本番環境で反映させたいと思います。

## 1.SQLに直接記述し本番環境で中間テーブル情報を反映

seed.rbに中間テーブルデータを記述する方法もあるとは思うのですが、
自分では調べてもできなかったのでSQLに直接書く方法を記述します。

本番環境で下記を記述

```ruby:ターミナル
[ec2-user@******* current]$ mysql -u root -p
# Enter password: とパスワードを入力するように表示されるので、MySQLのrootパスワードを入力して、Enterしてください。
mysql> SHOW DATABASES;
# SQL文を実行すると今まで作ってきたデータベースが一覧で表示されます。
mysql> USE 対象となるデータベースを入力;
# USEで指定したデータベース内を操作できるようにします。
mysql> INSERT INTO movie_genres (movie_id, genre_id) VALUES (1, 1);
mysql> INSERT INTO movie_genres (movie_id, genre_id) VALUES (1, 2);
# これらを入力することで中間テーブルに情報を反映させることができます。
```

これで③movie_genresテーブル（中間テーブル）の情報も本番環境で反映させることができました。

他にもやり方はあると思いますが私はこのやり方でテーブル、
中間テーブルの情報を本番環境でも反映させることができました。

# おわりに
説明した方法以外にもやり方はあると思いますので他の方法が見つかれば
情報共有してもらえればありがたいです！！！

最後まで見てもらいありがとうございました！！
Rubocopについて

Rubocopとはなんぞや。
まあ、端的に言えば「汚いコードを指摘してくれる」gem。ruby限定ですけど。
ポートフォリオを作っている時、ふわふわと「最後の仕上げに入れればいっか」なんてふざけたことを考えていました。完成した今だから言う。


**バカかお前は！！！！！**

普段わたしはコーディングする際、めちゃくちゃ綺麗に書くことを意識して書いています。もうほぼ完成って段になってRubocopを通すとあら不思議！クソコードが大量に発見されました！ボコボコにされて泣きながら書き直しましたよ、ええ。
とにかくRubocopは、コードを書いた都度調整するのに最適だと思っています。
やり方は以下。

```Gemfile.
gem 'rubocop', require: false
```
bundle installでインストールして完了。

```
$rubocop
```
これでrubyの規定に沿わないものが出てきます。
しかしこれだけではrailsアプリ内のファイル全てが対象になります。泣きます。
なので対象を絞ります。
アプリ直下(Gemfileなどと同じ場所)に
「.rubocop.yml」
このファイルを作ります。
ここでは対象から除外するファイル・ディレクトリの指定だったり、無視するエラーの指定だったりのカスタマイズをします。

```.rubocop.yml
AllCops:
  TargetRubyVersion: 2.5
 
  Exclude:　#対象除外するファイル
    - bin/*
    - config/*
    - db/**/*
    - lib/*
    - public/*
    - strange/*
    - test/**/*
    - tmp/*
    - vender/*
    - spec/**/*


#無視するエラー
Style/Documentation:
  Enabled: false

Style/FrozenStringLiteralComment:
  Enabled: false

```

エラーの種類に関しては数が多いので都度ググってほしい。
まあ、「動けばいい」って点で言えばここで怒られようが気にしなくていいんですけどね。
ちなみに

```
$rubocop -a
```
これでチェックしながらある程度のコードを勝手に綺麗にしてくれます。あら素敵。


誰にも文句言われないようなコード書きたいなら使う価値あり。
DockerのContainerにコードの変更を反映させる方法

Dockerで立ち上げたContainerの挙動に、手元のコードの変更を即時反映させる方法です。

## Volumeを指定してマウントする

```yml
version: '3'
services:
  bot:
    image: watashino/image
    tty: true
    volumes:
      - ../:/src # <path in local>:<path in container>
    build:
      context: ..
      dockerfile: ./docker/services/bot/Dockerfile
```

container側のパスは絶対パスじゃないと怒られました。
iOS開発でプロジェクトファイルがコンフリクトしたときの対処方法

ここ数週間でプロジェクトファイルのコンフリクトを３回食らって、そのたびに焦ったので、対処方法をメモります。
Xcodeで編集できなくなるんで、最初遭遇したとき復旧不可能になったかと思って焦りました。

そもそもXcodeGenを使ってプロジェクトファイルがコンフリクトしないようにする対策もあるようなのですが、ここでは扱いません。
（[XcodeGenによる新時代のiOSプロジェクト管理](https://techlife.cookpad.com/entry/2019/04/26/110000)）

# 想定
`git pull`したら、プロジェクトファイルがコンフリクトした装置です。

# やること
```shell
git status
```

コンフリクトしているファイルを確認しましょう。

```shell:結果
On branch hoge
You have unmerged paths.
  (fix conflicts and run "git commit")
  (use "git merge --abort" to abort the merge)

Changes to be committed:

        new file:   NotConflicted.swift

Unmerged paths:
  (use "git add <file>..." to mark resolution)

        both added:      xxx.xcodeproj  ←これ！
```

実際プロジェクトファイルがコンフリクトするときってファイルの追加削除が激しいときなんで、
表示はもっと激しくなると思いますが、こんな感じになるかと思います。

# マージしよう
普通のファイルだったらXcode上でなおす選択肢もあるのですが、プロジェクトファイルがコンフリクトすると、
そもそもXcode上のプロジェクトが開けない状態になるので、それは無理です。
（もしXcodeで直編集できる方法あったら教えてください。
 拡張子変えるとかすればできそうですが、それ以外で……）
Xcode以外のエディタ（VSCodeとか）なら、単なるファイルとして扱われるので、それで編集しちゃうのも手です。

# mergetool
mergetoolを使います。

```shell
git mergetool
```

僕の環境だと、こんなんが開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333454/06b7b9e7-52e9-eac3-7c9e-9154b5c02280.png)
（画像: [Mac で使える git mergetool をいろいろ試してみる - OpenDiff](https://blog.eiel.info/blog/2013/06/26/git-mergetool-opendiff/)）

mergetool、設定すれば変えられるらしいのですが、
特に何もしていないと、Xcode入れたときの付属品としてついてくるこのアプリが起動するみたいです。
opendiffなのかFileMergeなのか、アプリ名がいまいちハッキリしないんで、そこはぼかします。

画面左がローカルブランチで、右がリモートブランチ、
下がMergeしようとした結果となっています。
変更箇所をポチポチたどっていき、Actionsのプルダウンから、
右を選ぶ、左を選ぶ、右/左有線で両方採用、など選べます。
いずれのアクションも不適なときは、下Windowで直接編集ができます。

# その後
コンフリクトを解消したら、そのまま閉じると、

```shell
Was the merge successful? [y/n]
```
と表示されるので、yを押すと、Merge完了となります。
元のファイルは.origファイルとして残りますので、コミットして問題がなかったら、ゴミになるので消します。
ツール側で保存してから閉じると、この質問が出ず、.origも作られないっぽいです。

# opendiff、どう？
正直使い勝手は微妙です。。。
しかし、必要最低限、という感じはします。
vimで直編集よりはマシかなあという程度。

僕は普段のコンフリクトはXcode上で確認してなおしているので、
プロジェクトファイルのときだけ使うものなので、そこまでこだわりがないので、これでやろうかなあと思っています。

Qiita見るとvimdiff入れてる人が多いっぽくて、opendiffでやっている例があまり見つからないので、敢えて書いてみました。

この方のブログ記事を見ると、他の選択肢が色々見られて良さそうです。
[Mac で使える git mergetool をいろいろ試してみる - 準備編](https://blog.eiel.info/blog/2013/06/26/git-mergetool/)
docker-compose upをしてもプロセスが終了してしまうことへの対応

基本的には docker はフォアグラウンドでプロセスが走っていれば docker container のプロセスが終了することは無いと思っていたのですが、うまくいかないことがあったのでその対応を書き残しておきます。

## tty: true にする

```docker:docker-compose.yml
version: '3'
services:
  bot:
    image: watashino/image
    tty: true # make container stay launched
    volumes:
      - ../:/src
    build:
      context: ..
      dockerfile: ./docker/services/bot/Dockerfile
```

[ttyの説明はこちらが詳しいです](https://qiita.com/toshihirock/items/22de12f99b5c40365369)


でも `tty: true` を付けているのに、commandを実行するとコンテナが終わってしまう。

## bashを対話モードで起動させておく

```dockerfile:Dockerfile
CMD bash -c "npm start && /bin/bash"
```

これによって、プロセスが起動状態のままになりました。

```zsh
$ docker ps
CONTAINER ID        IMAGE                        COMMAND                  CREATED             STATUS              PORTS               NAMES
3ae0sguc0f2c        watashino/image              "/bin/sh -c 'bash -c…"   28 minutes ago      Up 28 minutes                           bot
```
シェルスクリプト 備忘録

#ファイルディスクリプタ
プログラムからファイルを操作する際、操作対象のファイルを識別・同定するために割り当てられる整数値。

- 標準入力：0
- 標準出力：1
- 標準エラー：2

Windowsの世界では、ファイルハンドルとも呼ばれる。
Linuxの場合、ファイルディスクリプタの上限確認は、`ulimit`コマンドを使用する。

```bash

$ ulimit -n
1024
```

#パイプ
複数のコマンドをつなぎ、標準出力を次のコマンドに渡す。

xargsコマンドと併用することで、直前のコマンドの標準出力を後のコマンドの引数にして実行できる。

```bash

$ seq 8 | xargs echo
1 2 3 4 5 6 7 8
```
teeコマンドと併用することで、標準入力と標準出力をファイルに書き出すことができる。

```bash

$ echo "Hello world" | tee Hello.txt
Hello world
$ cat Hello.txt
Hello world
```

`${PIPESTATUS[@]}`でパイプの先頭、 もしくは途中にあるコマンドの終了ステータスを参照することができる。
`$?`はパイプの最後の終了ステータスしかわからない。

```bash

$ true | true | false
$ echo $?
1
$ echo ${PIPESTATUS[0]} ${PIPESTATUS[1]} ${PIPESTATUS[2]}
0 0 1
```

#リダイレクト
コマンドの実行結果をファイルに保存する。

##リダイレクトの種類
| コマンド | 説明 |
|:--------------|:------------------|
|コマンド>ファイル|コマンド結果をファイルへ書き込む | 
|コマンド<ファイル|ファイルの内容をコマンドの標準入力へ|
|コマンド>>ファイル|コマンドの結果をファイルへ追記|
|コマンド2>ファイル|コマンドのエラー出力をファイルに書き込む|
|コマンド2>>ファイル|コマンドのエラー出力をファイルに追記|
|コマンド>ファイル2>&1|コマンドの結果とエラー出力をファイルに書き込む|
|コマンド>>ファイル2>&1|コマンドの結果とエラー出力をファイルに追記|
|コマンド>/dev/null 2>$1|表示をしない|



- /dev/nullは、リダイレクト時に出力せず、破棄するときに指定するパス。

#変数
- 参照時には`$`をつける。
- =で代入する。前後に空白を入れることはできない。
- 代入時に`$`をつけない。
- ""(ダブルクォーテーションマーク)で囲むと文字列が展開される。
- ''(シングルクォーテーションマーク)で囲むと文字列は展開されない。
- ``(バッククオート)で囲むとコマンドの標準出力が変数に設定される。$(command)でもできる。

```bash

$ echo $hello

#代入
$ hello=hello
#参照
$ echo $hello
hello
#解放
$ unset hello
$ echo $hello

#読み取り専用
$ readonly var=foo
$ echo $var
huga
$ var=fuga
-bash: var: 読み取り専用の変数です
$ unset var
-bash: unset: var: 消去できません: variable は読み取り専用です

#コマンドの実行結果を変数に代入
#$(command)でも代替可能
$ cmd=`pwd`
$ echo $cmd
/root

```

#位置パラメータ
- スクリプト実行時に引数として渡された内容は、位置パラメータという変数に保持され、スクリプトの中では、`$1`~`$9`で表される。
- `$0`は実行中のスクリプト名を表示する。
- `$#`は位置パラメータの数を表示する。(0を除く)
- 位置パラメータを集合的に扱う場合は、`$*`,`$@`がある。
- bashの変数は、グローバルスコープである為、関数内で変数をローカルに扱いたい場合は、`local`を使用する。

```bash

#!/bin/bash
echo $0
echo $1
echo $2
echo $3
echo $#
echo $*
echo $@
```
上記を実行する

```bash

$ bash sample.sh p1 p2 p3
sample.sh
p1
p2
p3
3
p1 p2 p3
p1 p2 p3
```

#終了ステータス
- コマンドの実行結果の成否は特殊偏す`$?`に代入される。
- 慣例的に終了ステータス0の場合は正常終了を表し、それ以外はエラーもしくはエラーに準ずる状態である。
- `rm -f`の終了ステータスは、常に0になるので注意。
httaccessでhttpsにリダイレクトするやつ

##Force SSL
レンタルサーバごとにちょいちょい違って疲れるのでまとめる

```
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L]
</IfModule>
```

###さくらのレンタルサーバー
```
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP:X-Sakura-Forwarded-For} ^$
RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L]
</IfModule>
```

###GMO クラウド
```
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{ENV:HTTPS} !^on$
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>
```

もうみんなnginxでええやん

[.htaccessでhttpsリダイレクト](https://6oolab.com/archives/442)
VitualBoxでホストOSのIPアドレスが固定されている場合のネットワーク設定

#設定環境
ホストOS
Windows 10 Pro
*IPアドレスを固定した状態

仮想環境ソフトウェア
VitualBox

仮想環境OS
CentOS7

#インターネットに接続できなかった時点での設定
VitualBoxのネットワーク設定
ブリッジアダプター

その他の設定はデフォルトのまま

```command-line
$ nmcli device
DEVICE　TYPE　STATE　CONNECTION
enp0s3 ethernet disnonnected --
```

#設定の変更点
1．VitualBoxのネットワーク設定をNATに変更
2．ifcfg-enp03s　の設定変更
ONBOOT=no　→　yes

ifcfg-enp03sのパス
root/etc/sysconfig/network-scripts/ifcfg-enp03s　

#なぜ接続できなかったか（なぜ最初はブリッジアダプター設定にしたか）
今回の環境構築の前に、IPアドレスがDHCP自動取得になっている別PCでテスト環境を構築した際には、ブリッジアダプターで問題なく接続できた。
ブリッジアダプターとNATの接続方法の違いを理解しないと…

#参考
https://www.shookuro.com/entry/2018/02/10/172724
https://qiita.com/feifo/items/0fde474005589afcff68
https://endy-tech.hatenablog.jp/entry/2018/10/27/134223#VirtualBox%E3%81%AE%E4%BB%AE%E6%83%B3%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6
ローカル回転軸の表示・非表示

Maya標準機能でローカル回転軸を表示するとき、この操作をするかと思います。
「Display > Transform Display > Local Rotation Axes」

ただこの処理だと表示非表示のトグルになってしまい、
すべて表示、すべて非表示の挙動ができないのです、、、

なので、メモとして
「ローカル回転軸をすべて表示」するMELを貼っておきます。

例）すべてのジョイントのローカル回転軸を表示

```
string $objs[] = `ls -type "joint"`;
for($obj in $objs){
    setAttr ($obj+".displayLocalAxis") 1; // 0で非表示、1で表示
}
```


また、先ほどのfor文は、以下2点を変えれば、何でも使えます。
・ノードタイプを指定（type）
・アトリビュートに値を設定（setAttr）

例）すべてのskinClusterの最大インフルエンス数を保持にチェックして、インフルエンス数を「4」に設定する

```
string $objs[] = `ls -type "skinCluster"`;
for($obj in $objs){
    setAttr ($obj+".maintainMaxInfluences") 1;
    setAttr ($obj+".maxInfluences") 4;
}
```


注）上記のMELは
「指定ノードが存在して、アトリビュートも変更可能な状態」
を前提なので、例外処理は想定してません。
セミコロンレスって new FizzBuzz().say(0).say(1).say(2).say(3).say(4)... のことだと思ってた

# 解決 new FizzBuzz().say(0).say(1).say(2).say(3).say(4)は「メソッドチェーン」というのだ！
shiracamus様に教えていただきました。ありがとうございます。

----

javaのjの字も知らなかった2、3年前のことですが、
「セミコロンレスjava」といって、セミコロンなしでFizzBuzzをやってみたりするコードがネットで公開されてました。

```java:printやprintlnは戻り値なしだけどprintfは何故かPrintStreamを返してくれる。だからnullと比較できる
public class SemicolonLessFizzBuzz
{

	SemicolonLessFizzBuzz(int j)
	{
		for(int i : new int[] {j})
			if(System.out.printf("%d", i)!=null)
			{
				if(i%3==0)
					if(System.out.printf("fizz")!=null)
					{}else{}
				if(i%5==0)
					if(System.out.printf("buzz")!=null)
					{}else{}
				if(System.out.printf("\n")!=null){}
				if(new SemicolonLessFizzBuzz(j+1)!=null){}

			}
	}

	public static void main(String[] args)
	{
		for(int i : new int[] {0})
			if(new SemicolonLessFizzBuzz(i) != null){}
	}


}
```

こんな感じのとか、stream呼ぶのとかリファクタリングで無理やりセミコロンなしでクラス呼ぶのもあったなあ


当時の自分は全く理解できなかったのですが、最近になって
「`return this`なメソッドばかりのクラスってセミコロンなしで自在に呼び出せるんじゃね？」
とか思いました。
要は
`say(int i)`メソッドに`i`が3や5で割り切れるかを言わせ、さらに`return this`すれば
`new FizzBuzz().say(0).say(1).say(2)...`を呼ぶことでfizzbuzzができるんじゃないかと。

実はこの記事を書くまで、`return this`するメソッドによって1文をめちゃくちゃ長くするようなのをセミコロンレスというのだと勘違いしていました。



```java:new_FizzBuzz().say(0).say(1).say(2)...
public class FizzBuzz
{

	public static void main(String[] args)
	{
		if
		(
			new FizzBuzz()
			.say(0).say(1).say(2)
			.say(3).say(4).say(5)
			.say(6).say(7).say(8)
			.say(9).say(10).say(11)
			.say(12).say(13).say(14)
			.say(15)
			!= null
		) {}
	}

	FizzBuzz say(int j)
	{
		for(int i : new int[] {j})
			if(System.out.printf("%d", i)!=null)
			{
				if(i%3==0)
					if(System.out.printf("fizz")!=null)
					{}else{}
				if(i%5==0)
					if(System.out.printf("buzz")!=null)
					{}else{}
				if(System.out.printf("\n")!=null){}

			}
		return this;//ここだけセミコロンがでてしまう。。。
	}

}

```

こういう書き方って何て呼ぶんでしょうか？
~~ご存じの方コメント欄で教えてください！~~→コメント欄で教えてもらいました。「メソッドチェーン」といいます。

# new FizzBuzz().say(0).say(1).say(2).say(3).say(4)... のメリット

HTML5のCanvasに図形を書くためのクラスとか、phpでGDやらImageMagicを使うときとか、そういうときに役立ちます。

例えば`丸書く()`メソッド、`ちょん()`メソッド、`おまめ()`メソッドなどが定義されたクラスを使ってドラえもんを描画する場合、

```java
if(
doraemon = new CanvasWriter()
.丸書く().ちょん().丸書く().ちょん()         //丸書いてちょん、丸書いてちょん、
.おまめ().根().植木鉢().植木鉢()             //おまめに根が出て植木鉢、植木鉢
.date("2020/6/6").UFO()                     //6月6日にUFOが
.gothrough().gothrough().fall_down().お池(2)//あっち行ってこっち行って落っこちてお池が二つできました
.浮かべる(new 船()).三日月()                 //お池にお船を浮かべたらお空に三日月のぼってた
.ひげ()                                    //ひげを付けたらドラえもん
!=null){}
```

これで「セミコロンレスドラえもん」を描画できます。
メソッド名の工夫次第で可読性が大きく向上するのではないでしょうか。
(追記:fujitanozomu様、ご指摘ありがとうございます)
[Ruby]メソッドについて


メソッド

メソッドとは、プログラミングにおける何らかの処理をする命令群のことをいう。
メソッド名をプログラム中に記述することで、そのメソッドの処理を実行できる。

各メソッドの処理は様々で、メソッドを用いることで、
欲しい値を求めたり実行したい処理を命令することができる。
[学習45日目]CSS ~display~

#display:
##inlineを指定すると、文章の一部だけを指定できる
どんな時に使うかというと、

文章の一部で大事なところだけマーカーをつけたりできる
方法は
`background:マーカーの色`
とすればできる

##inline-blockとすると、インライン部分の幅や高さを指定することができる

##list-itemとすると、<li></li>で囲んだ時と同じようになる
リストのデザインをこだわる時は、CSSでこれを使ってデザインを変更していくのかな？


##display:noneとvisibility:hiddenの違い

display:noneは
領域ごとごっそり完全にその要素を消すイメージ。

bisibility:hiddenは
要素は隠すけど、領域は残す。
だから空間が残る。
おすすめの圧縮ソフトZstandard(zstd)の使い方

- [公式ウェブサイト](https://facebook.github.io/zstd/)
- [github](https://github.com/facebook/zstd)
- [wiki](https://ja.wikipedia.org/wiki/Zstandard)

# Zstandardとは(wiki)
> Zstandard (Zstd) は、2015年からFacebookに所属しているYann Colletによって開発された可逆圧縮アルゴリズムである。


# 主なオプション

|オプション|内容|
|:--------|:---|
|-d|解凍|
|-[1-19]|圧縮レベル指定(デフォルト:3)、--ultraで最大22まで指定可能|
|-o|ファイル名変更|
|-T[0-200]|スレッド指定(デフォルト:1)、0で空いているスレッドすべて使用|
|-dcf|圧縮ファイルの参照|
|--rm|圧縮/解凍後削除(デフォルトではgzと違い元ファイルは残る)|
|-v|圧縮/解凍時の詳細出力|
|-q|圧縮/解凍時のメッセージ抑止|
|-r|ディレクトリを再帰的に実施|
|-l|圧縮ファイルの情報表示|
|--output-dir-flat|結果の出力先指定|

# 関連コマンド
|コマンド|内容|
|:------|:---|
|unzstd|解凍|
|zstdcat|圧縮ファイルの参照|
|zstdgrep|grep|
|zstdless|less|
|zstdmt|空いているスレッドすべて使用|

# 使い方

```bash:圧縮
# 圧縮
zstd foo.txt

# 圧縮レベル指定
zstd -10 foo.txt
zstd --ultra -22 foo.txt

# ファイル名変更
zstd foo.txt -o bar.txt.zst

# スレッド指定
zstd -T4 foo.txt
zstdmt foo.txt
```

```bash:解凍
# 解凍
zstd -d foo.txt.zst
or
unzstd foo.txt.zst

# ファイル名変更
zstd -d foo.txt.zst -o bar.txt

# スレッド指定
zstd -d -T4 foo.txt.zst
zstdmt -d foo.txt.zst
```

```bash:参照
zstd -dcf foo.txt.zst
zstdcat foo.txt.zst
zstdless foo.txt.zst
```

```bash:tar
# tar 1.31以降はzstdに自動対応する
tar -acvf foo.tar.zst foo.txt bar.txt

# tar 1.22以降は-Iで圧縮形式指定
tar -Izstd -cvf foo.tar.zst foo.txt bar.txt

# tar 1.22未満は;で1行にするのがおすすめ
tar -cvf foo.tar foo.txt bar.txt; zstd foo.tar
```
# その他
拡張子で色分けしている場合は下記に設定追記

|ファイル名|内容|
|:--------|:---|
|/etc/DIR_COLORS|全ユーザ|
|~/.dir_colors|設定ユーザ|
gitで作業中、対応するgithubのページを表示

# モチベーション
git cloneして各種作業をしているときに、ふとそのレポジトリのgithubを開きたくなることがよくあります。例えば、新しいissueを立てたくなったとか、pull requestをwebから出したくなったなど私はよくあります。ですが複数のレポジトリを扱っていたりすると、今、何というプロジェクトのレポジトリで作業しているのか、branchなのか、forkなのか、をいちいち考えないと適切なgithubページにたどり着けません。

少し面倒だったので**giturlというgemを作りました。** :tada:

# こんな使い方
使い方は至ってシンプルです。引数にURLを知りたいディレクトリを指定するだけ。スペースで区切って複数同時に指定する事もできます。

```sh
$ giturl .
https://github.com/shinyaohtani/giturl/lib/
```

上記は `git clone` したレポジトリ`giturl`の`lib`というディレクトリで作業中に、カレントディレクトリ `.` に対応するgithubページのURLを表示した例です。

また引数に `--open` もしくは単に `-o` を付けるとブラウザでそのURLを開いてくれます。

```sh
$ giturl --open .
https://github.com/shinyaohtani/giturl/lib/
```

この場合、`giturl`の`lib`に対応するgithubページ(下記)が開きます。
<img width="1162" alt="スクリーンショット 2020-03-13 17.58.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38013/19cb346b-d26e-313b-83bd-b47af1e03d3d.png">

# インストール

今回、多くの人が使いやすいようにRubyGemsで公開しました。なので`gem install`で一発です。

```sh
$ gem install giturl
```

# しくみ

下記4種類のgitコマンドを[呼んでいるだけ](https://github.com/shinyaohtani/giturl/blob/master/lib/giturl.rb)です。簡単ですが利便性は非常に高いです。

```sh
$ git rev-parse --is-inside-work-tree
$ git rev-parse --show-prefix
$ git rev-parse --abbrev-ref HEAD
$ git config --get remote.origin.url
```

# 最後に

aliasなど、自前で書く前に一度お試しあれ。

# 参考

- [ロカールgitリポジトリでリモートのリポジトリURL確認方法 -- Qiita](https://qiita.com/zhao-xy/items/a35add58575ef7d9d4dc)
- [giturl 1.1.2 -- rubygems](https://rubygems.org/gems/giturl)
- [giturl Open GitHub URL for given directory -- github](https://github.com/shinyaohtani/giturl)
Nightwatchでinput type=dateの入力内容がずれる

## 問題
Nightwatchを使って以下のように日付を設定しようとする。

```javascript:動かない
browser.setValue("#date", "2020-03-13")
```

すると、下の画像のようなかたちで入力されていしまう。

![スクリーンショット 2020-03-13 18.00.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239739/38beeac2-4a76-1959-b5ac-bc6572c4c9a5.png)

## 理由
クロームの年度の部分は、6桁まで入力できるようになっている。
そのため、月の部分が年度に足し合わされてしまいズレが生じてしまう。

## 解決方法
スタックオーバーフローの[nightwatch set value to date input is failing for google chrome
](https://stackoverflow.com/questions/52765306/nightwatch-set-value-to-date-input-is-failing-for-google-chrome)では、`MM-DD-YYYY`の形式で入れたら動いたとのことだったが、自分の環境ではダメだった。

年度が6桁まで入るのが原因のため、

```javascript:動いた!
browser.setValue("#date", "002020-03-13")
```

としてやることで期待する入力を模すことができた。
透明性100% Activity

よく忘れる + 透明が好きなので
(status barもnavigation barも透明)

```xml:
<style name="XXXX.XXXX">
        <item name="android:windowEnterAnimation">@null</item>
        <item name="android:windowExitAnimation">@null</item>
        <item name="android:colorBackgroundCacheHint">@null</item>
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:navigationBarColor">@android:color/transparent</item>
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:windowActionBar">false</item>
        <item name="android:windowNoTitle">true</item>
</style>
```
Java Excel設定背景色と背景画像

本論文では、Spire.XLS for Javaを使って、Excel文書に背景色と背景画像を設定する方法を紹介します。

Excel workbookの背景色を設定します

```java

import com.spire.xls.ExcelVersion;
import com.spire.xls.Workbook;
import com.spire.xls.Worksheet;

import java.awt.*;

public class BackgroundColor{
    public static void main(String[] args){
        // Workbookオブジェクトを作成
        Workbook workbook = new Workbook();
        // Excelドキュメントを読み込む
        workbook.loadFromFile("input.xlsx");

        //最初のシートを取得
        Worksheet sheet = workbook.getWorksheets().get(0);

        //シートで使用されているセル範囲に背景色を設定します
        sheet.getAllocatedRange().getStyle().setColor(Color.green);
        //指定したセル範囲に背景色を設定します
        //sheet.getCellRange("A1:E19").getStyle().setColor(Color.yellow);

        //文書を保存
        workbook.saveToFile("SetBackColor.xlsx", ExcelVersion.Version2013);
    }
}
```
![Background color.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278784/479c65a8-b022-4e61-f59d-0eb36fbd400a.png)

Excel workbookの背景画像を設定します

```java

import com.spire.xls.ExcelVersion;
import com.spire.xls.Workbook;
import com.spire.xls.Worksheet;
import javax.imageio.ImageIO;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;

public class BackgroundImage {
    public static void main(String[] args) throws IOException {
        // Workbookオブジェクトを作成
        Workbook workbook = new Workbook();
        // Excelドキュメントを読み込む
        workbook.loadFromFile("input.xlsx");

        //最初のシートを取得
        Worksheet sheet = workbook.getWorksheets().get(0);
        //画像を読み込み
        BufferedImage image = ImageIO.read( new File("background.jpg"));
        //画像をシートの背景図に設定します
        sheet.getPageSetup().setBackgoundImage(image);

        //文書を保存
        workbook.saveToFile("SetBackImage.xlsx", ExcelVersion.Version2013);
    }
}
```
![Background image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278784/23a6a910-d9f6-b3d6-ab1e-3d8508780c64.png)
[学習45日目]CSS ~positionのいろいろ~

positionプロパティの基礎を学んだので、もう少し詳しく学んでみようとお思います。

#top,right,bottom,left全て0に設定するとき

##absoluteだと、親要素いっぱいの大きさになる

```style.css
.box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
```

##fixedだと、画面いっぱいの大きさになる

```style.css
.box {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
```

#floatプロパティ
##leftに設定すると、指定した要素を左に寄せます。

★absoluteを用いて左寄せにした場合との違い
それ以降の要素が指定した要素の右側に回り込む点。

★floatプロパティのデフォルト値はnone
このfloatプロパティを適用出来るのは、
位置指定されていない要素 に対してのみ有効です。

##rightに設定すると、右から要素が順番に並べられる
3、2、1
という感じ

##floatの解除方法

``clear:both;``
とする。

※個人的な注意memo
`float:none;`
ではない。

##大きさの調整
###（overflowで解決する）
floatプロパティを用いると、親要素から浮いた状態となるため、親要素から要素の高さを取得できずにfloatした要素がはみ出してしまった時、
``overflow:auto;``
とすると、適切な大きさに調整してくれる

###★★今日の主流なテクニックはclearfix
```style.css
.wrapper::after {
  content: "";
  clear: both;
  display: block;  
}
```

[参考]
従来のclearを利用したfloatの解除方法では、floatした要素の後ろにclearを指定した要素を加える必要があるため「不必要なHTMLが増える」といった問題が生じます
【Svelte】SvelteでMaterial UIを使ってみた 【Material UI】

## 概要
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33165/85f2b6a3-f96a-94be-7ccd-805f4db8179a.png)

SvelteにはReact等と同様にMaterialUIが用意されていますので、導入手順を書いていきます
[hperrin/svelte-material-ui](https://github.com/hperrin/svelte-material-ui)

## 手順
### MaterialUIインストール

#### フルパッケージのインストール
```sh:console
yarn add -D svelte-material-ui
```

今回は何を使うかが未定なので、一旦フルインストールします。

#### 補足：component単位のインストール
```sh:console
yarn add -D @smui/button
yarn add -D @smui/card
```

一応このようにcomponent単位でもインストール出来るので、実際に使うものが決まったらこちらのが良いかもです。


### themeディレクトリの追加
プロジェクトのrootに`theme`ディレクトリを作ります。

```sh:console
mkdir theme
```

その直下に`_smui-theme.scss`というファイルを作成します

```sh:console
touch theme/_smui-theme.scss
```

### index.htmlの追記
index.htmlに`https://fonts.googleapis.com/`から3つstylesheetを取り込みます。

```html:index.html
<!DOCTYPE html>
<html lang="jp">
<head>
	<meta charset='utf-8'>
	<meta name='viewport' content='width=device-width,initial-scale=1'>

	<title>Svelte app</title>

	<link rel='icon' type='image/png' href='/favicon.png'>
	<!-- 追加-->
	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
	<!-- -->
	<link rel='stylesheet' href='/global.css'>
</head>
<body/>
</html>

```
### rollup.config.jsの修正
`postcss`に`use`項目を追加して、`./theme`を読み込むようにします。

```js:rollup.config.js
postcss({
		extract: './dist/css/bundle.css',
		sourceMap: true,
		use: [
			['sass', {
			  includePaths: [
				'./theme',
				'./node_modules'
			  ]
			}]
		  ],
		plugins: [
			autoprefixer()
		]
	}),
```


### MaterialUI適用

サンプル集が[こちら](https://sveltematerialui.com/demo/select)
そのサンプル集の`*.svelte`のコードは[こちら](https://github.com/hperrin/svelte-material-ui/tree/master/site/src/routes/demo)のGithubにあります

今はどうやら設定するattributeのDocumentsがないっぽくて、適用したいUIをGithubのページから探して同じ設定をするしかなさそう・・・

## まとめ
今は英語Documentsすらままならない状態なので今後に期待です。
実際に使ったcomponentのまとめなども作れたらいいなぁと思ってます、チートシート的な。
大変ではありますが、調べながらやればキレイなMUIにはなるので是非ご利用を！
【No Code】BubbleでFacebookを使って認証する方法

NoCodeウェブアプリ作成サービスのBubbleを使ってFacebook認証をしようとして手間取ったのでメモ。

## 参考
他のひとが図付きで解説している記事(英語)
https://forum.bubble.io/t/automatically-enter-current-user-s-location/15685


## Facebook上の設定
まずFacebook上での設定を行う。

https://developers.facebook.com/apps/ にアクセスして、新しくアプリを登録する。

登録したアプリのページに「アプリID」「app secret」があるのでコピーする。UIが変わらなければ「設定」→「ベーシック」にあるはず。

## Bubble上の設定
ここからBubble上での設定。

コピーしたアプリIDとapp secretをpluginsのFacebookの「App ID/API Key」「App Secret」に貼り付ける。

「Use a generic redirect URL(...)」にチェックを入れる。

「Use a generic redirect URL(...)」の...のURLをメモするかコピーする。(Chromeでは開発者ツールのElementタブ上でコピーできる。おそらく https://grab-a-beer.bubbleapps.io/api/1.1/oauth_redirect のはず)

## 再びFacebook上での設定
Facebookの登録したアプリのページから「プロダクト」→「Facebookログイン」の設定をクリックしてログイン機能を追加する。

設定の「有効なOAuthリダイレクトURI」にコピーしたURLをタイプするか貼り付ける。

「変更を保存する」ボタンをクリックする。(これをしないと反映されないので気をつける。自分はこれを忘れてエラーになり少し悩んだ)

## 再びBubble上での設定
ボタンを作り、Workflowから「Signup/login with a social network」を選び、「OAuth provider」に「Facebook」を選ぶ。

これで、ボタンをクリックしたらFacebook認証ができるはず。
Windows Terminal - PuTTYっぽいcolor scheme

Windows Terminalが出てから、
これまで使っていたPuTTYから、Windows Terminalを使うことが増えました。

まだまだtmuxとの相性が悪いWindows Terminalですが（スクロール利かない、再描画遅い）、
Unicode絵文字も問題なく表示できる長所もあり、愛用しています。

# ColorScheme

PuTTYのColorSchemeをWindows Terminalで再現します。
ただし、PuTTYの青は非常に見づらいので、色を変えています。

下記をschemesの配列に追加します。

```profiles.json
    // Add custom color schemes to this array
    "schemes": [
        {
            "name": "puttyCustom",
            "foreground": "#BBB",
            "background": "#000",
            "black": "#000",
            "red": "#BB0000",
            "green": "#00BB00",
            "yellow": "#BBBB00",
            "blue": "#8080FF",
            "purple": "#BB00BB",
            "cyan": "#00BBBB",
            "white": "#BBB",
            "brightBlack": "#555",
            "brightRed": "#FF5555",
            "brightGreen": "#55FF55",
            "brightYellow": "#FFFF55",
            "brightBlue": "#5555FF",
            "brightPurple": "#FF55FF",
            "brightCyan": "#55FFFF",
            "brightWhite": "#FFF"
        }
    ],

```

利用しているprofileのcolorSchemeに、上のnameを追加すればOKです。

```profiles.json
        {
            "guid": "{c6eaf9f4-32a7-5fdc-b5cf-066e8a4b1e40}",
            "hidden": false,
            "name": "Ubuntu-18.04",
            "fontFace": "Consolas",
            "fontSize" : 9,
            "historySize" : 9001,
            "source": "Windows.Terminal.Wsl",
            "colorScheme": "puttyCustom"
        },
```

こんな感じです。

![コメント 2020-03-13 175359.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129201/b72c8aa8-77b3-1dcf-7540-1dc3c2d24bb1.png)
VSCodeでjupyter notobookを使う(mac OS)　(自分用メモ)

# 最終目標はVSCode上でのコーディング
VSCodeを使ってjuypterが動かせるらしいのでやってみる

# やったこと
・VSCodeのインストール
・Pythonの拡張機能のインストール
・anacondaのインストール
・.ipynbファイルの新規作成
・とりあえず実行してみた
・Error出力後の修正

# VSCodeのインストール

https://code.visualstudio.com/

ここでダウンロードし、その後インストール

# 拡張機能のインストール

左下の羅列しているアイコンのうち、４つの正方形があって右上がポロってなってるやつをクリック
↓
上の検索バーで"Python"と入力
↓
インストールしてVSCodeを再起動すると反映される

<img width="1140" alt="スクリーンショット 2020-03-13 17.41.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/601509/b16afa42-171f-ac29-0791-cf2d8f2f87a9.png">

#Anacondaのインストール

自分はanacondaやらminicondaやら入れまくってたので一度掃除した

参照元URL
https://weblabo.oscasierra.net/python-anaconda-uninstall-macos/

その後、インストール

参照元URL
https://tako1192.hatenablog.com/entry/2019/10/12/OSX_Catalina_%E3%81%A7Anaconda%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB

#.ipynbを実際に作ってみる

ノートブックを作成し、VSCodeで記述、実行を試みる。

参照元URL
https://dev.classmethod.jp/server-side/python/visual-studio-code-jupyter-notebook/

しかしError連発

しかし、VSCodeの拡張機能からなんかパッケージをインストールするかどうかを聞かれたので、迷わず『I got it!』を連打。そしたら全部のライブラリが使えるようになった。

<img width="1437" alt="スクリーンショット 2020-03-15 23.37.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/601509/4e2c997d-1f1a-a3e7-3fa3-049a74497146.png">

これはしっかり動いた時のもの
ライブラリも使えてる

Error時に参照したURL
https://teratail.com/questions/192633

#なんか記事書いてる時に見つけた良さそうなサイト
https://qiita.com/komiya_____/items/547ae8b5a9b031f18b59
Nuxt.jsでLottieを使う

#Lottie（ロッティー)とは

Airbnbから登場したiOS、Android、React Native対応のアニメーションライブラリ
Adobe After Effectで作成した動画をjsonに書き出し、ページ上にSVGやキャンバスなどで組み込んで描画してくれます。

今回はオープニングアニメーションを実装するのにLottieを使ってみたので備忘録的な。
（デザイナーさんがAfterEffectを駆使してjsonを用意してくれたのでjs実装のみです:clap:）

まずはライブラリをインストール
https://www.npmjs.com/package/lottie-web

```
npm i lottie-web
```

jsonの保存先は

```
assets/animation/sample.json
```

さっそくlottieを読み込んで行きます。。。!

####components/Lottie.vue

```components/Lottie.vue
<template lang="pug">
  .animationItem(ref="animationContainer")
</template>

<script>
import lottie from 'lottie-web'
export default {
  mounted() {
    const animationEvt = () => {
      const anim = lottie.loadAnimation({
        container: this.$refs.animationContainer,
        renderer: 'svg',
        loop: false,
        autoplay: true,
        animationData: this.options.animationData
      })
      anim.addEventListener('complete', () => {
　　　　  //処理
      })
    }
    const AnimStorage = () => {
      if (sessionStorage.getItem('access')) {
        // 初回アクセス以外の処理
      } else {
        // 初回アクセス時の処理
        animationEvt()
        sessionStorage.setItem('access', 0)
      }
    }
    AnimStorage()
}
</script>
```

sessionStorageを使って初回アクセス時にのみアニメーションする処理をしています。

lottieにはいくつかのオプションが用意されていて、
**container**: アニメーションを表示する要素を指定します。
**renderer**: アニメーションを出力する形式を指定します。svg/canvas/htmlの形式が指定できますが、基本的にsvgで問題なし。
**loop**: アニメーションを繰り返し再生するか指定します。再生し続ける場合は"true"に。
**autoplay**: 自動再生です。trueで自動再生します。
**animationData**: アニメーションのデータファイルを指定します。
その他にも、

```js
rendererSettings: {
  className: 'クラス名'
}
```
でクラス名を追加することもできます。

今回はオープニングアニメーションとして使うのでTOPページにLottie.vueをimportします。
####pages/index.vue

```
<template lang="pug">
    article
        Lottie(:options='lottieOptions')
</template>

<script>
import Lottie from '~/components/Lottie.vue'

export default {
  components: {
    Lottie
  },
  asyncData() {
    return {
      lottieOptions: {
        animationData: require(`~/assets/animation/sample.json`)
      }
    }
  },
}
</script>
```


![sample-min.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174180/1e5db8ae-d7c3-6362-7a2d-895477193c12.gif)
＊実際はもっと滑らかにテンポよく動きます

###所感
はじめてLottieを使ってみましたが、簡単にアニメーションを表示できるのでとても便利でした。
画面いっぱいに表示させる仕様だったのでオープニングアニメーションとして使うとなるとパフォーマンス的にちょっと厳しいと感じる部分もあり、Lottieを効果的に扱えるようにもっと工夫が必要だなと実感しました。。。



##参考

[公式](https://airbnb.design/lottie/)
[Nuxt + Lottieでお手軽アニメーション](https://slides.com/takumamiura/nuxt-lottie-2/fullscreen#/)
[AfterEffects+Lottieを使ったアニメーションをWebサイトで表示させてみた](https://note.com/cfbif/n/n929b444adc0d)
Nerves＋Phoenix 001

# はじめに
RaspberryPi上で動くNerves＋Phoenix環境の構築です。

# 参考
[hexdocs.pm/phoenix](https://hexdocs.pm/phoenix/installation.html#content)
[github.com nerves-project #phoenix-web-interfaces]
(https://github.com/nerves-project/nerves/blob/master/docs/User%20Interfaces.md#phoenix-web-interfaces)

@nishiuchikazuma
 [nerves_pack（vintage_net含む）を使ってNervesのネットワーク設定をした〜SSHログインまで〜](https://qiita.com/nishiuchikazuma/items/01f5df5472ec0feceb5f)

# 環境
- IEx 1.9.1 (compiled with Erlang/OTP 22)
- nerves_bootstrap-1.7.1

# 目次
- 下準備
- プロジェクトの作成
- プロジェクトの依存関係を整理
- 実行
- まとめ

# 下準備
ディレクトリ構成は以下とします。
phoenix
　├hoget
　└my_app_ui
プロジェクトの構成は「poncho project structure」とします。
※umbrellaは書くところが多くなりそうなので。。


```Elixir:
$ mix archive.install hex phx_new 1.4.15

#nervesを最新に（bootstrapのバージョンが古いと怒られる）
$ mix local.nerves
* creating **/.asdf/installs/elixir/1.9.1-otp-22/.mix/archives/nerves_bootstrap-1.7.1

# bootstrapのinstallが必要な場合は
mix archive.install hex nerves_bootstrap

```

# プロジェクトの作成


```Elixir:
$ cd phoenix
#nerves_packは使わなくてもOK。
$ mix nerves.new hoget --nerves-pack
$ mix phx.new my_app_ui --no-ecto --no-webpack

#とりあえずローカルで動くか確認
$ cd my_app_ui
$ mix phx.serve
```

ブラウザでlocalhost:4000にアクセス

![nerves.local_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295240/5320ecfd-20d6-1f86-2b14-e5c50948bbae.png)


# プロジェクトの依存関係を整理
今回はUsing a poncho project structureとします。

```Elixir:hoget/mix.exs

# hoget/mix.exs
# ...
  defp deps do
    [
      # Add
      {:my_app_ui, path: "../my_app_ui"},
      # ...
    ]
  end
# ...
```
```Elixir:hoget/config/config.exs

# Add　以下を追記
import_config "../../my_app_ui/config/config.exs"
import_config "../../my_app_ui/config/prod.exs"

config :my_app_ui, MyAppUiWeb.Endpoint,
  # Nerves root filesystem is read-only, so disable the code reloader
  code_reloader: false,
  http: [port: 80],
  # Use compile-time Mix config instead of runtime environment variables
  load_from_system_env: false,
  # Start the server since we're running in a release instead of through `mix`
  server: true,
  url: [host: "nerves.local", port: 80]
```
各々のプロジェクトでdeps.get

```Elixir:

$ cd my_app_ui
$ mix deps.get

$ cd hoget
$ mix deps.get
** (RuntimeError) environment variable SECRET_KEY_BASE is missing.
You can generate one by calling: mix phx.gen.secret_key_base

#SECRET_KEY_BASEを作れと言われるので、
$ mix phx.gen.secret
"秘密鍵ができる"

#とりあえず環境変数へ
$ export SECRET_KEY_BASE=秘密鍵
$ mix deps.get

```

SECRET_KEY_BASEは、
my_app_ui/config/prod.secret.exs
で設定されてるようですが、ここでは深追いしません。

# 実行

```Elixir:
$ export MIX_TARGET=rpi3
$ mix firmware
$ mix firmware.burn

```

ブラウザでnerves.localにアクセス

![nerves.local_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295240/5320ecfd-20d6-1f86-2b14-e5c50948bbae.png)

#まとめ
・Nerves上でPhoenixを動かした。
・プロジェクトの構成はponchoの方が独立性が高くなって、開発しやすいのでは。
・Phonenixの開発環境、SECRET_KEY_BASEの辺りは別記事で。
[Ruby]オブジェクトについて

■オブジェクト |

Rubyで扱える全てのデータは、「オブジェクト」と呼ばれる。
オブジェクトは 「物」 という意味で、現実世界の物をコードでも同様に捉えるようにするためのデータになる。

現実世界の"数、文字、色、時間"など、Rubyで扱う場合にはオブジェクトという形でデータ化されて、それぞれの持つ特性や動作を扱うことが可能となる。 


Rubyには、よく使われるオブジェクトがはじめから用意されている。 
以下。Rubyの代表的なオブジェクト。これら以外にもたくさんのオブジェクトがある。 
・オブジェクト名 " 扱うもの "
・文字列オブジェクト " 文字 "
・数値オブジェクト " 数 "
・日付オブジェクト " 日付 "
・配列オブジェクト " 複数のデータ "
・時刻オブジェクト " 時間 "
Grafana Prometheusのセットアップメモ

Grafanaインストール

```
wget https://dl.grafana.com/oss/release/grafana-6.6.2-1.x86_64.rpm
yum install --allowerasing grafana-6.6.2-1.x86_64.rpm
touch /etc/grafana/grafana.ini
```

Prometheusインストールからサーバー自体のメトリクスのグラフ表示までの単純動作確認
https://prometheus.io/docs/introduction/first_steps/

ローカルのnode-exporterのメトリクス取得とPrometheusでのグラフ表示確認
https://prometheus.io/docs/guides/node-exporter/

GRAFANA SUPPORT FOR PROMETHEUS
https://prometheus.io/docs/visualization/grafana/

起動

```
/opt/node_exporter-1.0.0-rc.0.linux-amd64/node_exporter &
/opt/prometheus/prometheus-2.17.0-rc.0.linux-amd64/prometheus --config.file=prometheus.yml &
systemctl start grafana-server
```

ブラウザでの確認
http://192.168.80.131:3000/

全部ローカルでの設定ファイル（prometheus.yml）

```
# my global config
global:
  scrape_interval:     15s # Set the scrape interval to every 15 seconds. Default is every 1 minute.
  evaluation_interval: 15s # Evaluate rules every 15 seconds. The default is every 1 minute.
  # scrape_timeout is set to the global default (10s).

# Alertmanager configuration
alerting:
  alertmanagers:
  - static_configs:
    - targets:
      # - alertmanager:9093

# Load rules once and periodically evaluate them according to the global 'evaluation_interval'.
rule_files:
  # - "first_rules.yml"
  # - "second_rules.yml"

# A scrape configuration containing exactly one endpoint to scrape:
# Here it's Prometheus itself.
scrape_configs:
  # The job name is added as a label `job=<job_name>` to any timeseries scraped from this config.
  - job_name: 'prometheus'

    # metrics_path defaults to '/metrics'
    # scheme defaults to 'http'.

    static_configs:
    - targets: ['localhost:9100']
```

https://prometheus.io/docs/prometheus/latest/storage/
※ストレージの制約（一か月の月次評価目的の阻害要因）はなさそう。
[学習45日目]CSS ~positionの基本~

今日はCSSのpositionプロパティについて！

使ったことあるけど、なんかいつも感覚的にやってて深くは理解していなかった。
感覚的にやっているから、思うような設定ができなかった。

なので、もう一度ちゃんと1から学びました！

#position:static;
これは、「なにもしない」という意味。
デフォルト値がstaticなので、基本はわざわざ設定しなくていいのかな？なんのためにあるんだろう？
と思って調べたところ、

・要素は通常の位置に：上下左右に動かすことができない
・要素の位置を調整できない：topやleftなどを指定しても効かない
・z-indexを指定できない：要素の重なり順を変えられない

という特徴がありました！なるほど。
これらを適用したい時は、わざわざ
`position:static`
を指定するってこと！


#position:relative;とposition:absolute;

##relative
relativeは「相対的に」という意味だから、
今のstaticな位置から相対的に、
topやbottom、left、rightで指定した分だけ動かすって感じかな


```style.css
position:relative;
top:50px;
left:50px;
```
としたら、今のいちから上へ50px,左へ50px分動かしてくれる。


##absolute;
relative(相対的な)の対義語、「絶対的に」という意味。

文で説明すると、
>positionにabsoluteを設定すると、positionがstatic以外に設定された親要素の左上端を基準として絶対位置を指定することができます。
親要素のpositionプロパティがstatic以外であれば、親要素の左上端が基準 となります。
>親要素が全てstaticである場合には、ドキュメントの左上端が基準となります。

みたいです。ちょっと難しい。。。。
とにかく
・直近のstatic以外の親要素の左上端が基準になる。
・ただし、親要素が全てstaticの場合はドキュメントの左上端が基準になる
とだけ覚えておこう


#fixedはabsoluteの一種
これもちょっとややこしい。
fixedは、「見えている画面サイズを基準とする」ので、
なんと、スクロースしても動かない！

なので、

```style.css
position:fixed;
right:50px;
bottom:50px;
```

とすると、常に見えている画面の右から50ｐｘ、下から50pxの位置に絶対的にいてくれる。


プロパッティの設定方法の基本はこれだけ！

positionは
・static
・relative
・absolute
・fixed
の4つが基本！
【初心者向け】Railsにおけるマイグレーションとは

#マイグレーションファイルとは
簡単にいうと、```sqlを使うことなくRails内だけでテーブルの作成・削除ができる```ファイルのこと。

本来ならわざわざ```sql```を起動して```CREATE TABLE ~~~```みたいに書いて実行しなければならないが、一つのコマンドで実行できる。

**すごく便利だ……**

エンジニアの方にも、マイグレーションのおかげで```sql```のコマンドをたくさん覚える必要なくテーブル管理できるとおっしゃっていたのでここの概念の理解は大事だと思いました。

##注意すべき点

* **マイグレーション実行後は、ファイル自体を修正してもデータベースの変更は不可。**


これは結構盲点だと思うので、将来チーム開発などをする際に絶対に意識しておくべきだと思います。

**参考文献**
[rails初心者がつまずきやすい「マイグレーション」](https://www.transnet.ne.jp/2015/12/29/rails%e5%88%9d%e5%bf%83%e8%80%85%e3%81%8c%e3%81%a4%e3%81%be%e3%81%9a%e3%81%8d%e3%82%84%e3%81%99%e3%81%84%e3%80%8c%e3%83%9e%e3%82%a4%e3%82%b0%e3%83%ac%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%80%8dcolnr/)
本番環境でデータベースが更新されない


###　追加したカラムが本番環境で反映されない...

`チーム開発デプロイ担当として苦労したエラーの解決方法になります。`



開発環境でデータベースに新しいカラムを追加しても
本番環境(EC2)へデプロイしても反映されない（泣）



本番環境でデータベースをマイグレートしてみよう！
これで反映されるだろ！


```:ターミナル
rake db:migrate RAILS_ENV=production
```
だが、
コマンドを実行しても反映されない...
どうやって追加した状態の新しいデータベースにするんだ..
と一日悩みました。


####ここで必殺技を伝授させ頂きました！


###本番環境にてもう一度データベースを再生成する！
```:ターミナル
$ RAILS_ENV=production DISABLE_DATABASE_ENVIRONMENT_CHECK=1 bundle exec rake db:drop

$ rails db:create RAILS_ENV=production

$ rails db:migrate RAILS_ENV=production

```

を実行すると開発環境にて追加したカラムが反映されます。
これで最新のデータベースになっています！

---
####＊注意↓↓↓
 企業に勤めている方は使用しないでください。
drop後に何らかのエラーで顧客情報などが消えてしまう事があるので、
個人で開発やスクールで開発している方向けです。

---



安全な方法は開発環境で追加したいカラムのマイグレーションファイルを作成し、リモートにPushした後本番環境で

```:ターミナル
$ rails db:migrate RAILS_ENV=production
```
を実行すると反映されます！
が、マイグレーションファイルの順番が違ったりすると読み込まない事があるので
簡単に反映させたい場合は上記の方法を行なってみてください。
codepenのscriptタグでつまづいたこと

##概要
codepenはiframeで別のブラウザでレンダリングした画面を埋め込んでいるため、手元で動かしているブラウザと異なる挙動を示す場合がある。
以下のようにjavascript内でDOMを操作する場合、htmlファイル内でのjavascriptの呼び出し（ `<script src="script.js"></script>`）は対象のDOM（`<button>`）の後に書く、あるいは`defer`を使用するが、codepenだと`<button>`の前に書いても問題なく実行出来た。

##やりたいこと
ボタンを押すと文字列が出力される、という挙動をhtmlとjavascriptで確認する。
【参照】
https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript#How_do_you_add_JavaScript_to_your_page

例）codepenの場合

```index.html
 <!DOCTYPE html>
 <html lang="en-US">
   <head>
     <meta charset="utf-8">
     <title>Apply JavaScript example</title>
     <script src="script.js"></script>
   </head>
   <body>
     <button onclick="">Click me</button>
   </body>
 </html>
```

```script.js

 function createParagraph() {
   let para = document.createElement('p');
   para.textContent = 'You clicked the button!';
   document.body.appendChild(para);
 }
 
 const buttons = document.querySelectorAll('button');
 
 for(let i = 0; i < buttons.length ; i++) {
   buttons[i].addEventListener('click', createParagraph);
 }
```

例）手元のブラウザの場合（今回はChrome）

```index.html
 <!DOCTYPE html>
 <html lang="en-US">
   <head>
     <meta charset="utf-8">
     <title>Apply JavaScript example</title>
   </head>
   <body>
     <button>Click me</button>
   </body>
   <script src="script.js"></script>
 </html> 
```
または

```index.html
 <!DOCTYPE html>
 <html lang="en-US">
   <head>
     <meta charset="utf-8">
     <title>Apply JavaScript example</title>
     <script src="script.js" defer></script>
   </head>
   <body>
     <button>Click me</button>
   </body>
 </html> 
```
【Ruby】変数とは？

変数とは？
変数は、他のプログラミング言語ではデータを入れる
"数値や文字を収納する箱のようなもの"と
表現されることが多い。

でもRubyの変数で「箱のようなもの」と覚えてしまうと、バグを生み出してしまう危険性がある。