OmniAICreator/Qiita-1.07M huggingface dataset:
Class '~~~' has no 'objects' memberpylint(no-member)のエラー/警告について(@Python/Django)

#はじめに
今回は、Djangoでアプリ作成する際に発生したエラー・警告について触れていきます。

参考記事は[こちら](https://wonwon-eater.com/vscode-python-django-lint/)

#エラー詳細

Djangoのクラスであるmodelsのオブジェクトを参照する際にエラー検知されてしまいました。。

![スクリーンショット 2020-12-16 15.13.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692063/49f9ba5b-44f5-ceb7-79c4-c8747bbe9964.png)


#実行した処理

①pylint-djangoをインストール
ターミナルを開き以下のコマンドを実行します。

```
$ pip install pylint-django
```

②VSCodeの設定変更

VSCodeを利用しているため設定に変更を加えていきます。

画面左下の歯車マークから設定を開き(command+,)、
Python › Linting: Pylint Argsの箇所に以下の項目を追加します。

`--load-plugins=pylint_django`

以上で完了しました。

#まとめ
エラーや警告の内容を深掘ると興味深いですが、
気付いたら1日経ってたりします。。
頑張っていきます！！😂

参考にさせていただいた記事の作成者様ありがとうございました。
roman numerals



# お題

アラビア数字(arabic numerals)を受け取って，ローマ数字(roman numerals)を返すmethodを書きなさい[^pine]．


# ローマ数字で使われる文字

| arabic numerals | roman numerals |
|----------------:|:---------------|
| 1               | I              |
| 5               | V              |
| 10              | X              |
| 50              | L              |
| 100             | C              |
| 500             | D              |
| 1000            | M              |


# 例

| arabic numerals | roman numerals |
|----------------:|:---------------|
| 1               | I              |
| 2               | II             |
| 4               | IV             |
| 5               | V              |
| 6               | VI             |
| 9               | IX             |
| 10              | X              |
| 11              | XI             |
| 14              | XIV            |
| 15              | XV             |
| 19              | XIX            |
| 38              | XXXVIII        |
| 42              | XLII           |
| 49              | XLIX           |
| 51              | LI             |
| 97              | XCVII          |
| 99              | XCIX           |
| 439             | CDXXXIX        |
| 483             | CDLXXXIII      |
| 499             | CDXCIX         |
| 732             | DCCXXXII       |
| 961             | CMLXI          |
| 999             | CMXCIX         |
| 1999            |                |


# 最終

```ruby
# coding: utf-8
def romanize(number)
  a=[1000,900,500,400,100,90,50,40,10,9,5,4,1]
  r=["M","CM","D","CD","C","XC","L","XL","X","IX","V","IV","I"]
  roman=[]

  number=number.to_i

  if (number > 0 and number < 4000) then
    for i in 0..12 do
      while number>=a[i] do
	roman.push(r[i])
	number-=a[i]
      end
    end
  else
    puts "変換できません"
  end

  puts roman.join(' ')
end



puts "アラビア数字を入力してください"
n=gets
romanize(n)

```


# 発展

整数はInteger classです．[hello class](https://qiita.com/daddygongon/items/969ad5112878f6dab844)を参照して，Integer classを拡張して，

    999.to_roman #=> CMXCIX

と返すようにしなさい．

```ruby
# coding: utf-8
def romanize(number)
  a=[1000,900,500,400,100,90,50,40,10,9,5,4,1]
  r=["M","CM","D","CD","C","XC","L","XL","X","IX","V","IV","I"]
  roman=[]

  number=number.to_i

  if (number > 0 and number < 4000) then
    for i in 0..12 do
      while number>=a[i] do
	roman.push(r[i])
	number-=a[i]
      end
    end
  else
    puts "変換できません"
  end

  puts roman.join(' ')
end



puts "アラビア数字を入力してください"
n=gets
romanize(n)

```


# 参照文献

[^pine]: "初めてのプログラミング", Chris Pine (著), 西山 伸 (翻訳),オライリー・ジャパン (2006/7/24).



------
 - **source** ~/grad_members_20f/members/NobuakiMori/ex_roman_numerals.org
Flask, Vue.js, OpenCV, Pytorchで画像認識アプリをHerokuにデプロイする

MNISTで学習したモデルを使って複数桁の数字を認識できないかと思った．ついでにWebアプリとしてデプロイもしてみた．
- [コード](https://github.com/yamaguchi-milkcocholate/playground)
- [アプリ](https://playground-d.herokuapp.com/#/)

## 作業工程

- 機械学習モデルを学習
- 複数桁の数字を一桁の数字へ変換するモジュールを作成
- Flask & Vue.jsのWebアプリを作成
- Herokuへデプロイ

## 機械学習モデルを学習
[PyTorch MNIST example - GitHub](https://github.com/pytorch/examples/tree/master/mnist)を参考にして学習．
学習に使用したコード→ [./server/modules/mnist.py](https://github.com/yamaguchi-milkcocholate/playground/blob/main/server/modules/mnist.py)

## 複数桁の数字を一桁の数字へ変換するモジュールを作成
コード→ [./server/modules/processes.py](https://github.com/yamaguchi-milkcocholate/playground/blob/main/server/modules/processes.py)
メソッドについて説明する．

##### `__init__()`
コンストラクタではフロントから送信された１次元の画像データ（1channel）と画像のサイズ（width, height）を受け取り，(width, height, channel)へ変換する．
例) MNISTだったら (784, ) → (28, 28, 3)


##### `_labeling()`
OpenCVを使って，画像を2値化・ラベリング処理し，それぞれを正方形の画像データに変換する（`_to_square()`を使用）．

##### `_to_square()`
`MARGIN=5`，つまりラベル付けされたピクセルから縦横方向に最低5ピクセル余白を取った正方形画像データに変換する．

##### `divide_to_digit()`
`_labeling()`,`_to_squre()`で変換したそれぞれの画像をbase64でエンコードする．（あとでフロントに渡すため）

## Flask & Vue.jsのWebアプリを作成
#### フロンエンド
`package.json`は以下のようになっている．開発時は`npm run watch`を実行すると便利．コンパイルされたファイルが`./dist`に作成される．

```json
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "watch": "vue-cli-service build --watch"  # 追加文
  }

```

#### サーバサイド
以下のパッケージをインストールする．
- Flask
- Flask-Cors
- gunicorn
- numpy
- opencv-python
- Pillow
- torch
- torchvision

開発時は`python server/app.py`を実行してサーバを立ち上げる．→ [http://127.0.0.1:5000](http://127.0.0.1:5000)

## Herokuへデプロイ
まず，Heroku CLIをインストールする．

その後，ログインしてHerokuへpushする．

```console
heroku login
git add.
git commit -am "[update]"
git push heroku main
```

## 最後に
Herokuにデプロイする時に,OpenCVやPytorchが結構厄介だった．
「スクラムガイド2020」更新概要

##指⽰的な部分を削減##

スクラムガイドは時間が経つにつれて少し指⽰的なものになっていた。2020 年版では、指⽰的
な表現を削除または緩和して、スクラムを最⼩限かつ⼗分なフレームワークに戻すことを⽬的
としている。たとえば、デイリースクラムの質問の削除、PBI（プロダクトバックログアイテム）
の属性に関する記述の緩和、スプリントバックログにあるレトロスペクティブのアイテムに関
する記述の緩和、スプリントの中⽌のセクションの削減などを実施した。

##ひとつのチームがひとつのプロダクトに集中する##

これはチーム内で分断が発⽣し、PO と開発チームの関係が「プロキシ」や「我々と彼ら」とい
った問題につながることを排除するためである。存在するのは、PO、SM、開発者の 3 つの異な
る責任を持ち、同じ⽬的を共有するひとつの「スクラムチーム」だけである。

##プロダクトゴールの導⼊##

スクラムガイド 2020 年版では__「プロダクトゴール」__を導⼊した。スクラムチームに⼤きな価値
のある⽬的に集中してもらうためである。各スプリントでは、プロダクトを全体的なプロダク
トゴールに近づける必要がある。

##スプリントゴール、完成の定義、プロダクトゴールの居場所##

以前のスクラムガイドでは、明確なアイデンティティーを与えることなく、「スプリントゴー
ル」と「完成の定義」について説明していた。これらは作成物ではなく、作成物に付随するも
のだった。2020 年版では「プロダクトゴール」を導⼊し、これらの位置づけを明確にした。3
つの作成物には、それぞれの「確約（コミットメント）」が含まれる。つまり、プロダクトバ
ックログにはプロダクトゴール、スプリントバックログにはスプリントゴール、インクリメン
トには完成の定義（カッコをなくした）が含まれる。これらの存在により透明性がもたらされ、
作成物の進捗に集中できるようになる。

##⾃⼰組織化よりも⾃⼰管理##

以前のスクラムガイドでは、開発チームは⾃⼰組織化しており、「誰が」「どのように」作業
するかを選択できるとしていた。2020 年版ではスクラムチームの⾃⼰管理に重点を置き、「誰
が」「どのように」「何の」作業をするかを選択できるようにした。

##スプリントプランニングの 3 つのトピック##

これまでのスプリントプランニングのトピックである「What」と「How」に加えて、スクラム
ガイド 2020 年版では、3 つ⽬のトピック__「Why」__に重点を置いた。これはスプリントゴールで
⾔及されている。

##幅広い読者のために全体的に⽂章を簡略化##

スクラムガイド 2020 年版では、冗⻑で複雑な⽂章と IT に関する記述（例：テスト、システム、
設計、要求など）を排除している。以上の変更で、スクラムガイドは 13 ページ未満となった。


##最後に##
__「Zentao」__の技術者からの資料に感謝します。スクラムを深く勉強して開発したいなら、Zentaoリンクをクリックして、技術者がオンラインであなたの質問に答えることができます。
[オープンソースのプロジェクト管理ソフトウェア-スクラムツール - ZENTAO](https://bit.ly/3gLXSsU)
and / or の結果を変数に入れる時絶対注意！

# [x = true and false] は思ったとおりにならない

```rb
true and false # => false
false and true # => false
true and true # => true
false and false # => false

true && false # => false
false && true # => false
true && true # => true
false && false # => false

x = true and false # => false
p x # => true !!!!!!!!!!
x = false and true # => false
p x # => false
x = true and true # => true
p x # => true
x = false and false # => false
p x # => false

x = true && false # => false
p x # => false
x = false && true # => false
p x # => false
x = true && true # => true
p x # => true
x = false && false # => false
p x # => false
```

# 理由

https://docs.ruby-lang.org/ja/latest/doc/spec=2foperator.html

- and
- or

は`=`より優先順位が低いため`x = true and false`では

1. x = true
2. true and false (結果は捨てられる)

という現象が起きてしまい、`x`は`false`にならない。

# 解決策

- &&を使う
- x = (true and false)
超主観的便利だけどあまり知られていないプラグイン

## 同じようなプラグイン紹介に飽きたあなたに
みなさんこんにちは、今日も元気にVSCodeを使っていますでしょうか？
様々なPluginを入れる事によって便利になるVSCodeですが
定番のPlugin紹介に飽きた人も多いと思います。(indent-rainbowやLint系は飽きるほど紹介記事を見ました)
勿論、定番なのは人気があるからなのですが、あまり知られていくても便利なPluginも多く存在します。
この記事ではそんなPluginを超主観的に紹介していければと思っています。
※あくまで個人的にあまり知られていないと感じたものを紹介しています。
 ディスる意図はありません。開発者さん気分を害されたらすいません・・。

### multi-command
[https://marketplace.visualstudio.com/items?itemName=ryuta46.multi-command](https://marketplace.visualstudio.com/items?itemName=ryuta46.multi-command)
multi-commandはその名の通り、複数のコマンドを1つのコマンドに定義出来る拡張機能です。
僕はVSCodeVimでエクスプローラーを移動する際に素早く移動するのに使っています。
勿論汎用性が高い機能なので様々な場面で応用できるはずです。

> 参考
[VSCode の拡張 multi-command を公開しました](https://ryuta46.com/173)

### Bracket Lens
[https://marketplace.visualstudio.com/items?itemName=wraith13.bracket-lens](https://marketplace.visualstudio.com/items?itemName=wraith13.bracket-lens)
いくらインデントに色がついても条件については分かりません。
Bracket Lensではブロックに対応する条件文を表示してくれます。
これと定番プラグイン(indent-rainbowやBracket Pair Colorizer 2等)を併用するともうコードの海で迷う事は無くなるでしょう。

同じ作者の方の[Blitz](https://marketplace.visualstudio.com/items?itemName=wraith13.blitz)等も使いやすいのでお勧めです。

> 参考
[VS Code ネタ詰め合わせ 2020](https://qiita.com/wraith13/items/1be9b4743576f4e31d92)

### Project Dashboard
[https://marketplace.visualstudio.com/items?itemName=kruemelkatze.vscode-dashboard](https://marketplace.visualstudio.com/items?itemName=kruemelkatze.vscode-dashboard)
Projectの管理に困っていませんか？
Project Dashboardはカンバン方式でProjectを表示し簡単に開くことが出来ます。
マウスを使わないと選択出来ないのが難点なのですが、見やすい画面表示がかなり強力です。

### Snippetica for Markdown
[https://marketplace.visualstudio.com/items?itemName=josefpihrt-vscode.snippetica-markdown](https://marketplace.visualstudio.com/items?itemName=josefpihrt-vscode.snippetica-markdown)
markdownのsnippetを追加してくれます。
本当に特別な機能はないのですが、追加してくれる量や使いやすさから個人的に気に入っています。

### Toggler
[https://marketplace.visualstudio.com/items?itemName=tehstun.toggler](https://marketplace.visualstudio.com/items?itemName=tehstun.toggler)
ショートカットを押すだけで特定の文字をtoggleしてくれるPluginです。
トグルしたい文字を追加するのも容易ですし、使える場面も多いので重宝しています。

## 終わりに
もう2020年も終わりですね。
少し個人的な話をさせていただくと、かけだし効率厨としてVimからVSCodeに移行を決意して
ひたすらsettings.jsonを弄りまくった年でもありました。
突き詰めるとやっぱりVimが使いたい、けどVSCodeの楽さに溺れたいという
ジレンマを抱えて2021年も生きていくのでしょうか。
たかがテキストエディタ、されどテキストエディタ。
脳で認識した情報がダイレクトに送れるようになるその日まで毎日を過ごしていきたいものです。
fluent-bitのプラグインをGO言語で書く話


この記事は [ABEJA Advent Calendar 2020](https://qiita.com/advent-calendar/2020/abeja) 17日目の記事のつもりでした。


fluent-bitのプラグインをGO言語で書く話。を書こうと思いましたが、時間がなかったのでリンクだけ貼っておきます。

公式のRepo
[github.com/fluent/fluent-bit-go](https://github.com/fluent/fluent-bit-go)

実装方法
[github.com/fluent/fluent-bit-go example](https://github.com/fluent/fluent-bit-go/tree/master/examples/out_multiinstance#example-out_multiinstance)

aws cloudwatch logs 用のfluent-bitのgo実装
[github.com/aws/amazon-cloudwatch-logs-for-fluent-bit](https://github.com/aws/amazon-cloudwatch-logs-for-fluent-bit)
APIとSDKって何が違うの？

自分の周りでもごっちゃになっている人がいたので、
まとめておこうと思います。

##APIとは
Application Programming Interface の略
ソフトウェアの機能やデータなど、プログラムがその機能を外部の他のプログラムから相互にやり取りできるようにする仕様のこと。

##SDKとは
Software Development Kit の略
特定のプラットフォームを対象としたソフトウェアアプリケーションの開発に使用できるツールセット(ソフトウェア製品)のこと。

##つまり..
APIは「何らかのサービス」への仕様に対して、SDKは特定の目的のためのソフトウェア製品ということ。
なのでSDK内にパッケージングされたAPIを提供することもあるという感じ。

##参考
http://tom-rc.hatenablog.com/entry/2014/12/10/232830
「Web系エンジニアになろう」読みました！

![84ECD1B0-020C-4A0F-9AF1-2767A756F1CA.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/958041/83c3c6d9-ff0f-1975-976b-242f3796a4c1.jpeg)
遅くなりましたが「Web系エンジニアになろう」を読みました。今まではWeb系エンジニアになるためにどんな知識が必要なのかフワフワしていましたが、この一冊のおかげでハッキリしました。とても有り難いです。この本から得られた情報を元に以下の順番で行動していきたいと思います。
・Linux基礎の学習
・GitとGitHub基礎の学習
・Ruby on Rails基礎の学習
・ポートフォリオ作成
・AWS基礎
AWS で「非VPC. インスタンスを作成するには、VPC とサブネットが必要です。」と表示される

#ターゲット
- 上記のエラーが出た人
- AWS初心者


#概要
AWSでEC2インスタンスを作成する際、ステップ 3: インスタンスの詳細の設定の画面の上部に下記メッセージが出て、インスタンスを作成できないことがあります。
>非VPC. インスタンスを作成するには、VPC とサブネットが必要です。VPC コンソールで VPC を作成する か 新しいデフォルト VPC の作成 をしください。


#原因
当たり前なのですが、インスタンスを作成するために必要なVPCが作成されておらず、当該画面の`ネットワーク`の項目が選択できないことが原因です。
わかっている人はVPCを作ってそれを選べば解決します。

そもそもデフォルトVPCが存在するはずなのですが、削除してしまった人はエラーになってしまいます。
AWS初心者がこのエラーに出くわすと、VPCって何? 状態なので困ります。
また、とりあえずインスタンス立てたいときデフォルトVPCがあると便利です。


#解決策
デフォルトVPCを作成します。

>Amazon VPC コンソールを使用してデフォルト VPC を作成するには
1. https://console.aws.amazon.com/vpc/ で Amazon VPC コンソールを開きます。
2. 画面左枠のナビゲーションペインで、[VPC] を選択します。
3. [Actions]、[Create Default VPC] の順に選択します。
4. [作成] を選択します。確認画面を閉じます。

引用元：

https://docs.aws.amazon.com/ja_jp/vpc/latest/userguide/default-vpc.html#create-default-vpc:~:text=Amazon%20VPC%20%E3%82%B3%E3%83%B3%E3%82%BD%E3%83%BC%E3%83%AB%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%83%87%E3%83%95%E3%82%A9%E3%83%AB%E3%83%88%20VPC%20%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B%E3%81%AB%E3%81%AF

詳細はこちら↑で参照してください。

# 引用 / 参考
引用
1. [デフォルト VPC とデフォルトサブネット](https://docs.aws.amazon.com/ja_jp/vpc/latest/userguide/default-vpc.html#create-default-vpc:~:text=Amazon%20VPC%20%E3%82%B3%E3%83%B3%E3%82%BD%E3%83%BC%E3%83%AB%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%83%87%E3%83%95%E3%82%A9%E3%83%AB%E3%83%88%20VPC%20%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B%E3%81%AB%E3%81%AF)

参考
1. [Amazon VPC で削除したデフォルト VPC を復元する方法を教えてください。](https://aws.amazon.com/jp/premiumsupport/knowledge-center/deleted-default-vpc/)
マルチスケールシミュレーション特論

\![Mac OS X-10.15.7](<https://img.shields.io/badge/MacOSX-10.15.7-brightgreen>) \![ruby-2.7.1p83](<https://img.shields.io/badge/ruby-2.7.1p83-brightgreen>) 


# introduction

マルチスケールシミュレーション特論のためのlink


# qiita\_links

-   No.1 [shell+emacs](https://qiita.com/Argonaut/items/5e5264d76c4a06d76dde)
-   No.2 [org-mode](https://qiita.com/Argonaut/private/12240bd5ed4ef9173639)
-   No.3 [rakeの使い方](https://qiita.com/Argonaut/private/06b126800bcfb4b641b2)
-   No.4 [Rubyの基礎1](https://qiita.com/Argonaut/private/f7795827bff62d97c8b4)
-   No.5 [Rubyの基礎2](https://qiita.com/Argonaut/private/b18b8b93a5f0a7c6f3bf)
-   No.6 [再帰を使ったFibonacci数列](https://qiita.com/Argonaut/items/3e0a0968a294503f8fcf)
-   最終課題 [Google Recruitを解く](https://qiita.com/Argonaut/items/88b7ee9b5bd790ec0d3b)



------
 - **source** ~/Desktop/grad_members_20f/members/mm-cell/README.org
Python で blackbox 関数の最適化をするメモ

## 背景

* Black box(e.g. 外部クローズドソースプログラムを実行) だったり微分が取れない関数や計算を最適化したい.

## blackbox 最適化

いくつかライブラリがあります.

https://github.com/paulknysh/blackbox

とりあえず試すのによさそうです. コード自体 200 行くらいですのでアルゴリズムを知るのにもよいかも.

https://github.com/paulknysh/blackbox/issues/17

Windows python だとスレッド関連でハングするっぽいようですので注意です.

https://github.com/pablormier/yabox

3D 図がオシャンティ.

https://www.localsolver.com/docs/last/quickstart/solvingyourfirstmodelinpython.html

C++ binding もあります.

https://github.com/vthorey/benderopt

JSON で設定がかけるので便利.

### 引数のある関数

benderopt で `minimize` には変数しか渡せません.

定数パラメータを与えたい場合は, 幸いにも `minimize` の実装自体はコンパクトなので, この実装を参考にしつつ自前でループを書くのがよさそうです.

https://github.com/vthorey/benderopt/blob/master/benderopt/minimizer.py

## hypterparameter optimization

最近ですと機械学習界隈で Hyperparameter 最適化が話題です.
Hypterparameter 探索も使えるかもしれませんね.
スマホのCLS対策でやったこと

# はじめに
もしも～し、Core Web Vitals（コアウェブバイタル）対策、大丈夫ですか？（鬼〇の刃より）

スマホサイトのコーディング時、img要素のwidth属性とheight属性を指定してこなかったサイトが多く存在しているかと思います。
弊社もそのレギュレーションでコーディングしてきたため、対応に追われることに…。
今回は実際に対応した方法を簡単にまとめたいと思います。
いろいろと試行錯誤しながらなので、その点ご了承ください！

# 事前準備
数値をチェックするのにChromeの開発ツール内にある「Lighthouse」を利用していますが、レポートを作成するのにちょっと時間がかかってしまうんですよね。
ページをリロードするだけで数値が分かる便利なChromeのアドオンがあったので入れました、便利です！

Web Vitals
https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma

# やったこと
## img要素のwidth属性とheight属性を指定
調べると皆さん言っている通り、これだけでおおむね改善します。
指定する数値は画像の実寸でOKです。

```
<img src="***.png">
```

↓

```
<img src="***.png" width="〇〇〇" height="△△△">
```

### （必要があれば）CSSの修正
Retina対応によって大きめの画像を使用しているので、width属性とheight属性を指定することで表示崩れが起きることもあると思います。
その場合はimg要素にwidth: 100%;を追加するなど、適宜対応してください。

```
img {
　　width: 100%;
　　height: auto;
}
```

## 要素の高さ（min-height）を指定
img要素だけ修正しても、改善しない場合があります。
画像の高さが担保されても、それを囲む要素自体が何らかの理由でパラパラと表示されていけば、エラーになってしまいます。
とくにファーストビューにそういった要素が入っている場合は要チェックで、サイトの作りにもよりますが、繰り返し処理など動的に表示させている要素は、比較的エラーになりやすいかと…。
なので、その要素全体を囲んでいる要素にmin-heightを指定して高さを担保してあげます。
高さが決まっていない場合でも、ファーストビューで見えている範囲を考慮して指定すれば改善に繋がりました。

# 結果
下記はアドオンのキャプチャです。
このように数値が緑色の範囲（0.1未満で良好）になれば問題ないでしょう。（もちろんLighthouseでも計測可能です）
修正したものを反映させ、Google Search Console上で再度検証させます。
結果で出るまで最大4週間かかるそうなので、気長に待ちつつ、たまにチェックしておきましょう！
![chrome_add.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314279/5992f3fd-c248-7ff7-0f39-b9b0fa09fa8b.png)


# 最後に
ウェブクルーでは一緒に働いていただける方を随時募集しております。
お気軽にエントリーください！

 [開発エンジニアの募集](https://hrmos.co/pages/1004681658307198976/jobs/214)

[フロントエンドエンジニアの募集](https://hrmos.co/pages/1004681658307198976/jobs/210)
Next.js で .html 拡張子のページを作る方法

# 方法
`Hoge.html.tsx` みたいなファイル名にする

# 何でそんな変なことを
旧サイトに `.html` ありのURLがあるときにnext.jsに移行する際の話なので、0からサイトを作るときは当然必要ない
本当は `.html` ありへのアクセスをなしへリダイレクトするのが良いのだが、種々の事情で `.html` ありを残す必要があるときに使える
例） アプリのweb viewで.htmlありのURLと一致する判定が存在し、リダイレクトすると挙動を破壊するし、そちらをすぐに直せないとき
スペースの正規表現

入力フォームのバリデーションに使えそうな、スペースの正規表現です

```
// 1回以上の半角スペースのみ
hankakuSpace = /^\u3000*$/g;

// 1回以上の全角スペースのみ
zenkakuSpace = /^\x20*$/g;

// 1回以上の半角スペース＋1回以上の全角スペース
hanzenkakuSpace = /(\u3000+)+(\x20+)/g;

// 1回以上の全角スペース＋1回以上の半角スペース
zenhankakuSpace = /(\x20+)+(\u3000+)/g;
```
Rubyの標準出力

# 概要  
Rubyで使用する標準出力について、「''」または「""」で書いた時の挙動の違いをまとめました。  
# pメソッド
* 「''」で書いた場合  

```
p 'foo', 'bar', 'baz'

# 結果
"foo"
"bar"
"baz"
```  

* 「""」で書いた場合  

```
p "foo", "bar", "baz"

# 結果
"foo"
"bar"
"baz"
```
# putsメソッド  
* 「''」で書いた場合  

```
puts('foo, bar, baz')

# 結果 
foo, bar, baz
```
* 「""」で書いた場合  

```
puts("foo, bar, baz")

# 結果
foo, bar, baz
```

# printメソッド  
* 「''」で書いた場合

```
print('foo\nbar\nbaz')

# 結果
foo\nbar\nbaz
```

* 「""」で書いた場合

```
print("foo\nbar\nbaz")

# 結果
foo
bar
baz
``` 

# まとめ
* p, putsメソッドは「''」、「""」に限らず結果は変わらない  
* pメソッドは「""」で結果が表示され、puts,printメソッドは何も囲まれず表示される
* printメソッドは「''」の場合は改行コードは無視される
hello_class



# 目標

Rubyでのclass化(隠蔽,継承)を理解する.


# 解説


## 隠蔽

まずは,gets\_nameで入力をとってきて,puts\_nameでHello ～～と表示するプログラムを使っていきます.

```ruby
def puts_hello name
  puts "Hello #{name}."
end
def gets_name
  name = ARGV[0] || 'world'
  return name
end

name = gets_name
puts_hello name
```

入力がない場合はHello worldと表示します.クラス化するメリットとしてはmain loopを隠すことが出来ます.これが隠蔽です.

```ruby
class Greeter
  def initialize
    name = gets_name
    puts_hello name
  end
  def puts_hello name 
    puts "Hello #{name}."
  end

  def gets_name
    name = ARGV[0] || 'world'
    return name
  end
end

Greeter.new
```

Greeterというクラスを作ることでmainの部分を隠蔽できました.これを動かすと

    >ruby hello_class.rb Taro
    Hello Taro.

無事出力されました.


## @name

先ほどのnameという変数を@nameとすることでGreeterというクラスの中で参照することが出来ます.それらを反映させると

```ruby
class Greeter
  def initialize
    @name = gets_name
    puts_hello 
  end
  def puts_hello  
    puts "Hello #{@name}."
  end

  def gets_name
    name = ARGV[0] || 'world'
    return name
  end
end

Greeter.new
```

先ほどのコードとの違いとして,puts\_helloを定義する際に,引数のnameがないという点です.


## 継承

次はmethodで定義したものをclassに継承していきます.次のコードの中ではinherited classが継承の部分を表しています.

```ruby
require 'colorize'

#method
def hello name
  "Hello #{name}"
end
name =ARGV[0]
puts hello(name).green

#inherited class
class Greeter < String
  def hello
    "Hello #{self}."
  end
end

greeter = Greeter.new(ARGV[0])
puts greeter.hello.red


#extend class
class String
  def hello
    "Hello #{self}."
  end
end

puts ARGV[0].hello.blue

```

実行してみると以下の結果になります.

    Hello Taro
    Hello Taro.
    Hello Taro.

そして,コードの中のextend classについてはclassに上書き(over ride)したものになっています,


# 参考にしたサイト

この記事を書くために以下のサイトを参考にしました.[チャート式ruby-VI(hello class)](https://qiita.com/daddygongon/items/969ad5112878f6dab844)



------
 - **source** ~/grad_members_20f/members/Takahiro-Nishikawa/ruby_hello_class.org
エラーメッセージ　Invalid redeclaration of '***' について

#開発環境
Swift5 Xcode12.2
#概要
Invalid redeclaration of '***' 
というエラーメッセージが出てきた際の対処法について記載します。
#このエラーメッセージについて
この英語で書かれたエラーメッセージを読んでいきます。今回は比較的短い文章なんですが、
invalid(無効な), redeclaration(再宣言), of~(~の)
となっているのでこれらを繋げると、of以下のクラスやメソッドに対して無効な再宣言がある、ということになります。つまり、
'***' についての宣言が二回されているため、これを1つにする必要があります。
#ソースコード
```
var abc = 0
var abc = 1 //エラー
```
#対処方法
```
var abc = 0
```
というように、宣言を1つにする。どこかで同じ変数、同じメソッドに対して宣言が2度されてないかを確認する。
#参考にした記事
[Swiftのコンパイルエラー寄せ集め](https://samekard.blogspot.com/2014/09/swifterror.html)
Flash Advent Calendar 11日目 - WebGL導入への道のり04 中抜き多角形 -

WebGLを導入するにあたり描画課題として

* グラデーション
* マスク
* 中抜き描画
* 線の描画
* ブレンド
* フィルター
* 9-slice

っと、まだまだ書けそうな内容があったので
負荷部分の前に、もう少しだけ描画関連の事を書こうと思います。

今日は中抜き描画に関して書こうと思います。
[5日目の記事](https://qiita.com/ienaga/items/4e2a0cf78896e1bdfc86)でも書いたのですが
swfの描画は一筆書きで、時計回りと半時計周りが重なる部分は描画しないっという仕様です。

最初にチャレンジしてみた事

# パスの外周から三角形のポリゴン情報を自前で作ってみる

中抜き描画するのに、最初に思いついたのは自前で三角形(ポリゴン)を作ってみる
って事でした。
処理内容が難しすぎて完成には至りませんでした。。。

## 三角形のポリゴン情報を自前で作ってみる

外周のパス情報から三角形を刈り取っていく
0,0の起点から一番遠い箇所から刈り取っていくのが一般的だそうです。

![sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/1aaf6c31-c38b-7931-19eb-431d29e969c7.png)

起点となる座標のベクトルを維持したまま次の座標に移動します。
そうしないと、内側と外側の判断が行われず、変なポリゴンができてしまいます。
ご注意を
![sample2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/f8f69e34-bc29-9399-aa91-c2ec7680cd85.png)

ここまではなんとか実装できたのですが、次で挫けてしまいました。

## 穴あき多角形の三角形(ポリゴン)

完成したい描画
![sample3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/c4047a9d-9780-c09b-5048-a05b3acd6502.png)

まず始めに多角形を結合して一個の多角形にします。
切れ目となる座標と同じx,yをもう一個追加して、データ的にも結合します。

![sample4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/8bde7127-6c44-5868-5f34-13d3dc09f2a0.png)

後は、上の刈り取り方法で同じように刈り取っていきます。
![sample5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/dadd414f-9ebf-58f9-1eae-63238556342a.png)

比較的、色々な多角形に対応できたのですが
自分の技量では複雑な多角形には対応できなかったのでこの手法は断念してしまいました。
また、頂点情報が肥大化して描画負荷が高くなってしまいました。

色々と試したのですが、中抜き多角形の塗り描画は
[この記事](https://lab.sonicmoov.com/development/programming/webgl-bezier-shader/)の手法で描画する事で全ての問題が解決しました。

刈り取り手法を使えば、線の幅を自由に可変できる描画は実現可能だったので
結果的には無駄ではなかったのですが、色々と力量不足を感じました。
日々精進です・・・

次回こそはWebGLの負荷に関して書こうと思います。
JavaScriptとPHPを習い始めたばかりの人間がECサイトを構築するトライアル開始します


こんにちは。

プログラミング初学者ですが、
授業でJavaScriptとPHP、APIやFirebaseを学んだので
何かしら形にしてアウトプットをしてみたくなりました。

年末年始は授業もなく時間もできるので、一旦どこまでかかるかすら
把握しておりませんが、ECサイトを作ることに挑戦しようと思います。


思い立った敬意としては、学校のメンターでありCTOなど務めていらっしゃる
偉大な先輩から、

「作りたいものがあって、それをコード書きまくってダメなら何がダメか調べて
を繰り返し、自走していくことでようやく血肉となった結果自分の企画も
レベルが上がっていく」

なんとも筋トレのようなスポーツのような言葉をいただきとても共感させていただいたから。



過程やStuckしたポイントをどんどん更新しながらあげていって
同様にプログラム初学者の方々の背中を少しでも押せるような内容にしたいと思います。


日記のような形でこまめに更新していきます。

次の投稿は
・ECサイトにある機能のブレークダウン
・ECサイト作成に必要な技術


この辺り投稿予定。
【音声データ変換】.m4a→.mp3→.wav

# 【音声データ変換】.m4a→.mp3→.wav

## 目的
windowsのボイスレコーダーで録音した`.m4a`の音声ファイルを`.wav`に変換する方法で少し止まったのでメモしておく

## 解決方法
タイトルの通り、`.m4a`→`.mp3`→`.wav`のように、`mp3`を経由して変換したらできた。

## コマンド
### `.m4a`→`.mp3`
```
$ ffmpeg -i input.m4a -ab 256k output.mp3
```

### `.mp3`→`.wav`
```
$ sox input.mp3 output.wav channels 1 rate 16k
```

## Pythonとかでまとめてやるなら
```Python
import glob, os

# .m4a→.mp3 m4a_dataにある.m4aの音声データをmp3_dataへmp3として保存する
for filename in glob.glob( 'm4a_data/*.m4a' ):
    a = filename[len("m4a_data")+1:][:-4] # ファイル名だけ取り出す ex) m4a_data/hoge.m4a → hoge
    os.system("ffmpeg -i m4a_data/{}.m4a -ab 256k mp3_data/{}.mp3".format(a,a))

for filename in glob.glob( 'mp3_data/*.mp3' ):
    a = filename[len("mp3_data")+1:][:-4] # ファイル名だけ取り出す ex) mp3_data/hoge.mp3 → hoge
    os.system("sox mp3_data/{}.mp3 data_wav/{}.wav channels 1 rate 16k".format(a,a))
```
PowerDVD Ultra 18等で『DLNA TV 二か国語放送主福切り替え』がブロークンなのを対策してみる

表題のような問題を解決したいわけですが、最低限左chの日本語音声と右chの英語音声が混ざっているのが不快ですが、PowerDVD Ultra側では切り替えができません。サウンド－＞スピーカーのプロパティー－＞レベル－＞バランス

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452229/9705affe-abcc-0c43-650a-de9709b07c7a.png)

のLやRを0にしたり、100にしたりすればいいのですが、ダイアログを辿るのが面倒なので、プログラムダブルクリック一発で所望の設定をしたいわけです。で、

```c++:restore.cpp
#include <windows.h>
#include <mmdeviceapi.h>
#include <endpointvolume.h>
#include <stdio.h>

int main(int argc, char** argv) {
	HRESULT hr;
	IMMDeviceEnumerator* pEnum = NULL;
	IMMDevice* pEndpoint = NULL;
	IAudioEndpointVolume* pAudioEndVol = NULL;

	hr = CoInitializeEx(0, COINIT_MULTITHREADED);// Coおまじない

	// MMDevice インターフェースを取得

	hr = CoCreateInstance(__uuidof(MMDeviceEnumerator), NULL, CLSCTX_ALL, IID_PPV_ARGS(&pEnum));
	if (FAILED(hr)) {
		CoUninitialize();
		return 1;
	}

	// defaultのオーディオエンドポイントを取得

	hr = pEnum->GetDefaultAudioEndpoint(eRender, eConsole, &pEndpoint);
	if (FAILED(hr)) {
		if (pEnum)
			pEnum->Release();
		CoUninitialize();
		return 2;
	}

	// ボリュームオブジェクトを作成

	hr = pEndpoint->Activate(__uuidof(IAudioEndpointVolume), CLSCTX_ALL, NULL, (void**)&pAudioEndVol);
	if (FAILED(hr)) {
		if (pEndpoint)
			pEndpoint->Release();
		if (pEnum)
			pEnum->Release();
		CoUninitialize();
		return 3;
	}

	// 左右のチャンネルの音量をセット

	char* pfile;
	pfile = argv[0] + strlen(argv[0]);
	for (; pfile > argv[0]; pfile--)
	{
		if ((*pfile == '\\') || (*pfile == '/'))
		{
			pfile++;
			break;
		}
	}

	if (!_stricmp(pfile, "left.exe")) {
		pAudioEndVol->SetChannelVolumeLevelScalar(0, 1.0, &GUID_NULL);   // Left
		pAudioEndVol->SetChannelVolumeLevelScalar(1, 0.0, &GUID_NULL);   // right


	}
	else if (!_stricmp(pfile, "right.exe")) {
		pAudioEndVol->SetChannelVolumeLevelScalar(0, 0.0, &GUID_NULL);   // Left
		pAudioEndVol->SetChannelVolumeLevelScalar(1, 1.0, &GUID_NULL);   // right

	}
	else {
		pAudioEndVol->SetChannelVolumeLevelScalar(0, 1.0, &GUID_NULL);   // Left
		pAudioEndVol->SetChannelVolumeLevelScalar(1, 1.0, &GUID_NULL);   // right
	}

	if (pAudioEndVol)
		pAudioEndVol->Release();
	if (pEndpoint)
		pEndpoint->Release();
	if (pEnum)
		pEnum->Release();
	CoUninitialize();
	return 0;
}
```
build済みのバイナリの名前を変更して、
left.exeにするとダブルクリックでleft ch 100%,right ch 0%へ、
right.exeにすると同じく　left ch 0%,right ch 100%へ、
それ以外の名前ではleft chも right chも100％になります。

これらのプログラムで2カ国語混線は回避できますが、音量低下とバランス悪化が気になる方は、apo equalizer等で、

```text:japanese.txt
Copy: L=L R=L
```

なるスクリプトを末端に置けばいいです。普通の状態に戻すのは、このスクリプトをremoveすればいいです。（意外に面倒ですけど。）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/452229/5ccd8fbb-4dcb-4280-e293-000720485c51.png)
【Ruby】条件に一致する要素のみ抜き出し新たな配列を作る。filterとselect

個人メモです。

条件に一致する要素のみ抜き出し新たな配列を作るメソッドに、`select`と`filter`がある。

これはどちらも同じ。rubyの公式ページを見ると、filterメソッドの実例にはselectが使われている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/c523d647-e253-16ce-9fe1-ee57b1af4f73.png)

＞[ruby公式 Array#filter](https://docs.ruby-lang.org/ja/latest/method/Array/i/filter.html)



<br>
##rangeオブジェクト
1~3までのrangeオブジェクトに対して、2以下に該当する数値のみを抜き出し配列を作成する。

```ruby:select
range = 1..3   #[1,2,3]
range2 = range.select{|x| x<=2}

p range2
#出力
[1, 2]
```

```ruby:filter
range = 1..3   #[1,2,3]
range2 = range.filter{|x| x<=2}

p range2
#出力
[1, 2]
```

filterもselectも結果は同じ。


<br>
##配列

```ruby:select
arr = [1,2,3]
arr2 = arr.select{|x| x<=2}

p arr2
#出力
[1, 2]
```



<br>
##オブジェクト
オブジェクトの場合、変数を２つ設定する。
1つ目の変数がキー、２つ目の変数が値となる。

※変数が１つのみの場合はKVのpairが入る。

```ruby:
obj = {:a=>1, :b=>2, :c=>3}
obj2 = obj.select{|x, y| y<=2}

p obj2
#出力
{:a=>1, :b=>2}
```

mapメソッドと異なり、処理結果はオブジェクトで返る。（mapの場合は配列が返る）
【Rails】seeds.rbを使ったdbへの反映

<h1>本投稿の目的</h1>
・Railsについての議事録です。

---
<h1>学習に使った教材</h1>
Udemyの以下2つの教材を参考にまとめました。
・["はじめてのRuby on Rails入門-RubyとRailsを基礎から学びWebアプリケーションをネットに公開しよう"](https://www.udemy.com/course/the-ultimate-ruby-on-rails-bootcamp/) 
・["フルスタックエンジニアが教える 即戦力Railsエンジニア養成講座"](https://www.udemy.com/course/rails-kj/)

---

<h1>○seeds.rbについて</h1>
・新規投稿view実装前に初期データを投入する際に使用
・rails db consoleに比べて,大量のデータを実装する際に便利
・(基本的には,rails console からの作成が一般的)

<h1>○seeds.rbの記述方法</h1>

・プロジェクト名/db/seeds.erbにコードを記述
・今回は,数字の繰り返しパターンのユーザーデータを50個dbへ反映させる

```ruby:qiita.rb
if Rails.env == 'development'
  (1..50).each do |i|
    model名.create(name: "ユーザー#{i}", title: "タイトル#{i}", body:"本文#{i}")
  end
end
```

【解説】
`Rails.env == 'development'`
・railsの実行環境が開発モードかどうかを判定
・env は"development(開発)" "テスト(test)" "production(本番)"の3つが存在

`model名.cretate(column名: 値,column名: 値)`
・データベースに値を保存するコード
・`model名`は単数系で記述すること

【createメソッドについて】
以下のようにすることで縦に並べて記述が可能

```ruby:qiita.rb
model名.create([
  { name: '値1' },
  { name: '値2' },
  { name: '値3' },
  { name: '値4' },
  { name: '値5' },
  { name: '値6' }
])
end
```

【解説】
・配列の中にハッシュ形式で記述する
・まとめて複数のデータを保存が可能

<h1>○seeds.rbの実行</h1>

```
rails db:seed
```

・seeds.rbに記載した情報をdbに反映させるためのコード

---
Jest のテストがメモリ不足で落ちまくっていたので、調査方法を調べてみた

## TL;DR

簡易的にメモリの利用状況を知りたいのであれば次のオプションで jest 実行

実行例:

```shell
$ node --expose-gc ./node_modules/.bin/jest --runInBand --logHeapUsage
PASS  test/a.e2e-spec.ts (10.43 s, 160 MB heap size)
PASS  test/b.e2e-spec.ts (18.028 s, 197 MB heap size)
PASS  test/c.e2e-spec.ts (5.313 s, 215 MB heap size)
...
```
ちなみにこの実行例は実際にメモリリークが発生してるテストなので、リークしていなければ基本的にここの値は大きく変わらないはず

Google Chrome の inspect 機能を使いたい場合は次のオプションで jest 実行

実行例:

```shell
$ node --inspect-brk ./node_modules/.bin/jest --runInBand
Debugger listening on ws://127.0.0.1:9229/8ede11f0-7073-49bc-8e17-c16e661197d2
For help, see: https://nodejs.org/en/docs/inspector
# Chrome の chrome://inspect を開いて `inspect` ボタンをクリックするとを押すと進む
Debugger attached.

# Chrome の inspect ツールから breakpoint からの開始ボタンをクリックすると進む
RUNS  test/operations/event.e2e-spec.ts
...
```

ちなみに「これで最低限作業できる」ってオプションなので、「他のオプションを組み合わせたらもっと有用なデータが取れる」みたいなことはあるかもしれない。
もしご存知の方がいればコメントいただけると幸い。

### オプションたち

#### [--runInBand](https://jestjs.io/docs/en/cli#--runinband)

Jestを実行したプロセスをそのままテスト実行プロセスとして利用し、全てのテストを直列で実行するデバッグ用のオプション。

`--maxWorkers=1` と似ているが子プロセスを生成しないという点が違う。はず。
内部の実装を見ていないのでもしかすると同じなのかもしれないけど。

あと `--runInBand` と `--maxWorkers` を同時に指定すると「バカなの？」と聞かれてコマンドが終了するので「わぁ、同時に指定しちゃった！どっちだ！」みたいなことにはならない。

#### [--logHeapUsage](https://jestjs.io/docs/en/cli#--logheapusage)

それぞれのテストでのメモリ使用量を出力してくれるオプション。
Jest の `--runInBand` オプションと node (v8) の --expose-gc オプションの設定が必要とのこと。

付けると時間情報の部分にメモリの利用量も表示されるようになる。

例:

```shell
# オプション無し
PASS  test/a.e2e-spec.ts (10.43 s)

# オプション有り
PASS  test/a.e2e-spec.ts (10.43 s, 160 MB heap size)
```

「メモリ利用量」と連呼しているけど、あくまでも「ヒープメモリ」であることには注意。
ただデバッグしてる時はそこまで気にする事でも無い。

#### --expose-gc

Node.js のオプションかと思ったら v8 のオプションらしい。
Web 上でのオプションのドキュメントは見当たらなかったのでオプションのありかだけ。

```shell
$ node --v8-options | grep expose-gc
  --expose-gc (expose gc extension)
  --expose-gc-as (expose gc extension under the specified name)
```

要は GC の情報を外部のアプリケーションからも触れるようにしてあげることでメモリの利用状況をより細かに取得できるようにしているんだと理解している。
`--logHeapUsage` を取りたいなら必要だと言われているから付ける。以上。

#### [--inspect-brk](https://nodejs.org/api/cli.html#cli_inspect_brk_host_port)

こちらは Node.js のオプション。
デバッグ用の `inspector` というサービスを立ち上げると同時に、ユーザーのアプリケーション実行前に Break してくれる。 `--inspect` というオプションを使うとデバッガーを接続した瞬間にアプリケーションコードが実行される。基本的に自分が手動で実行する分には `--inspect-brk` で良いと思う。

## ToDo

あとで chrome を使った inspect 周りを書く


## 参考文献

https://dev.to/pustovalov_p/reducing-jest-memory-usage-1ina
「こうすれば Jest のメモリ利用状況把握できるよ」ってのを教えてくれた記事
ただ、結論が「`--logHeapUsage` するとその度に gc が走るからそれでパフォーマンス改善したよ。」だったので対処法は別途調べ中。

https://www.alexkras.com/simple-guide-to-finding-a-javascript-memory-leak-in-node-js/
Node のメモリリークのデバッグ方法を書いている記事
細かいメモリリークへの対応が書いてあるけど、「自分のコードにメモリの stats 出すコードを埋め込んで調査する」が基本スタイルなので、今回の jest のメモリ利用状況把握とは若干噛み合わない部分も。
Automation360  - Webサイトの表の中にあるリンクをクリックする

##Webサイトの表の中にあるリンクをクリックする

例えば、WebベースのEDIシステムなど、下記の様に表の中にリンクが現れることがあります。
これをクリックする方法です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615564/cda5a0ef-fb04-73bf-1bba-e0735421ee1d.png)

A2019のユニバーサルレコーダーを使ってキャプチャすると、下記の様にテーブルとして認識します。

| HTMLの表をキャプチャ |
|:-:|
| ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615564/dce2528e-5724-06d8-2f78-04869ffac600.png)  |

そして、「テキストでセルをクリック」だったり、「インデックスでセルをクリック」というアクションがあり、
行けそう！と思うのですが、残念ながら、**表の中の文字**にリンクが設定されている場合は利用できません。

＊下記の楽天トラベルWebサイトのカレンダーコントロールのように、文字の上ではなく、セル自体にリンクが設定されている場合は、「テキストでセルをクリック」や「インデックスでセルをクリック」が使えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615564/ae8e222e-2581-9567-145a-20dd54135916.png)

##では、どうしよう？

下記の様に処理する事で、目的のリンクをクリックすることが出来ます。

###ステップ１　テーブルとしてデータを取得
まず、クリックしたい対象を特定する必要がありますので、テキストデータを取得します。
これは、１アクションですね。レコーダー：キャプチャで表を指定し、アクションで「テーブルを取得」、テーブル型変数を作成して指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615564/b6806f8e-14ff-e535-bf70-9e894a6dff17.png)


###ステップ２　ループでデータを確認しながら、該当のところをクリック
ここでは、「オートメーション福岡」の注文データにアクセスしてみますが、
ループで順次値を確認しつつ、目的の行数を特定し、DOMXPathで指定することで実現しています。

下記がフローです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615564/e6106bc0-6da0-6558-f220-66297fb2b373.png)

| ID | アクション | 説明 |
|:-:|:-:|:-:|
| 1  | ループ  | 前のステップで取得したテーブル変数のデータを１行目から順に処理します。<BR>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615564/25665a18-13ee-22e1-ca25-afdb71f5d1d6.png)
  |
| 2  | IF  | テーブル変数の１列目の値を確認し、目的のアイテムの場合に処理をする。<BR>ここでは、「オートメーション福岡」かどうかをチェックしています。<BR>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615564/d98f4bd3-d067-4978-5935-bd65f3c40979.png)
  |
| 3  | 数字：文字列に変換  | カウンターの値（何行目が目的の値なのか）を、文字列変数に変換します。<BR>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615564/b2d7ecd1-9c7f-0c81-b574-3ae82b10c4dd.png)
  |
| 4  | メッセージボックス  | ここは、確認用にデータを表示。<BR>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615564/338c1931-f6eb-07fd-7d44-24674b98f8bb.png)
 |
| 5  | レコーダー：キャプチャ  |  ここが肝の処理です。<BR>レコーダー:キャプチャを使って、リンク部分のテキストをキャプチャします。<BR>それにより、HTMLの\<A href>の部分が取得できます。<BR>クリックしたい行数が既に取得できていますので、その行のデータをクリックするように、カウンター用の変数を使って指定します。<BR><BR>尚、HTML InnerTextやHTML Hrefなどのように、変動する要素がある場合は、「オブジェクトのプロパティ（x/x）」を展開してチェックを外してください。<BR>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615564/7f86f8bf-f088-6e8c-4ff1-0b4b6e93a6c5.png)
 |
| 6  | インクリメント  |  カウンター用に作っている数字変数を＋１する<BR>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615564/d90a29e1-42e2-4b88-ac2c-7bdaddcd5473.png)
 |

##コメント・・・
他にもやり方はあるかと思いますが、参考になればと思います。
「ユーザーに寄り添ったサイト」を作る為に 1人のデザイナーがチームで体現した事

この記事は「株式会社エイチームフィナジーのAdvent Calendar 2020」22日目の記事です。
新卒2年目デザイナーの @yudai_neba が担当いたします。

今回はデザイン関係のお話になりますので、noteに寄稿した物をシェアさせていただきます。

記事はこちら↓
[「ユーザーに寄り添ったサイト」を作る為に 1人のデザイナーがチームで体現した事](https://note.com/nyudai/n/n28abe8456a1c)
Command CompileSwiftSources failed with a nonzero exit codeというエラーがでた時の対処

## 解決するかもしれないエラー
Command CompileSwiftSources failed with a nonzero exit code

##エラーの原因
外部ライブラリがiOS 10.0+と書かれていたのにpodfileを

```
# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'//ここ
```
のまま使っていたことが原因でした。
指定されたバージョンにすることでエラーは解決しました。
nodemailerでWindowsパスを使って添付ファイルを指定する。

CSVでメールの情報を受け取ってnodemailerで送信するスクリプトを書いていた。
CSVには添付ファイルの情報がwindows形式パスで入ってくる。

```
C:\hoge\hoge.jpg
```

↓以下のコードで送信できると思って一生懸命実行しまくっていた

```
let message = {
  from: config.FromAddress,
  to: targetMail.to,
  subject: targetMail.subject,
  text: targetMail.body,
  attachments: [
    {
      filename: 'hoge.jpg',
      path: 'C:\\hoge.jpg'
    },
  ]
};
```

送れない。。。
結果、これで送ることが出来た

```
let message = {
  from: config.FromAddress,
  to: targetMail.to,
  subject: targetMail.subject,
  text: targetMail.body,
  attachments: [
    {
      filename: 'hoge.jpg',
      content: fs.createReadStream('C:\\hoge.jpg')
    },
  ]
};
```
パスではなくストリームを渡す
【Ruby】mapメソッドの使い方。オブジェクトの値を処理しハッシュやシンボルで取得する方法。

個人メモです。

mapメソッドを使うことで、元のオブジェクトの各要素を処理した配列を取得することができる。

・`オブジェクト.map{|変数| 処理}`
　┗ 変数にはオブジェクトの各要素が入る
　┗ 処理結果が配列で返る
　┗ 非破壊処理（元のオブジェクトのそのまま）

##目次

1. [rangeオブジェクトの場合](#rangeオブジェクトの場合)
2. [配列の場合](#配列の場合)
    3. [1次元配列](#1次元配列)
    4. [2次元配列](#2次元配列)
    5. [多次元配列](#多次元配列)
6. [オブジェクトの場合](#オブジェクトの場合)
    7. [引数が２つの場合](#引数が２つの場合)
    8. [キーを配列として取り出す](#キーを配列として取り出す)
    8. [値を配列として取り出す](#値を配列として取り出す)
    9. [オブジェクトの値を処理してオブジェクトとして取り出す](#オブジェクトの値を処理してオブジェクトとして取り出す)
    10. [配列からシンボルに変換](#配列からシンボルに変換)
    11. [配列からハッシュに変換](#配列からハッシュに変換)
12. [オブジェクトの引数が１つの場合](#引数が１つの場合)



<br>
##rangeオブジェクトの場合

```ruby:
range = 1..3
range2 = range.map{|x| x*2 }

p range2   
#出力
[2, 4, 6]
```


<br>
##配列の場合
###1次元配列

```ruby:１次元
arr = [1, 2, 3]
arr2 = arr.map{|x| x*2 }

p arr2   
#出力
[2, 4, 6]
```

<br>
###2次元配列
2次元配列の場合、配列内の要素が繰り返される。

`[1, 2] * 2 = [1, 2, 1, 2]`

```ruby:2次元
arr = [1, [2, 3]]
arr2 = arr.map{|x| x*2 }

p arr2   
#出力
[2, [2, 3, 2, 3]]
```


<br>
###多次元配列の場合
多次元配列の場合、カッコを一つ外した要素が繰り返される。

`[[1, 2]] * 2 = [[1, 2], [1, 2]]` 

```ruby:多次元
arr =  [1, [2,3], [4, 5, [6, 7]],[[8, 9]]]
arr2 = arr.map{|x| x*2 }

p arr2   
#出力
[2, [2, 3, 2, 3], [4, 5, [6, 7], 4, 5, [6, 7]], [[8, 9], [8, 9]]]
```



<br>
##オブジェクトの場合
オブジェクトの場合、ブロック内で指定する**引数の数により取り出す要素が異なる**。

また、処理結果は**配列で返る**。


| 変数の数 | 内容 |　取得要素の例 |
|:-:|:--|:-:|
| 1 |  キーと値  | [:a, 1] |
| 2 |  第1引数：キー、　第2引数：値、  | :a, 1 |


一般的な使い方としては、オブジェクトのキーまたは値のみを配列として取り出したい場合に使用する。（変数を２つ指定）


<br>
###引数が２つの場合
引数が２つの場合、1つ目の引数にキーが、２つ目の引数に値が入る。

####キーを配列として取り出す

```ruby:キーのみ配列として取り出す
obj = {:a=>1, :b=>2, :c=>3}
obj2 = obj.map{|x, y| x }

p obj2
#出力
[:a, :b, :c]
```

<br>
**▼エラー事例**
キーに対しては四則演算などの処理はできない。実行するとエラーになる。

```ruby:error
obj = {:a=>1, :b=>2, :c=>3}
obj2 = obj.map{|x, y| x*2 }

NoMethodError (undefined method `*' for :a:Symbol)
```


<br>
###値を配列として取り出す

```ruby:そのまま取り出す
obj = {:a=>1, :b=>2, :c=>3}
obj2 = obj.map{|x, y| y }

p obj2
#出力
[1, 2, 3]
```


```ruby:四則演算した場合の例
obj = {:a=>1, :b=>2, :c=>3}
obj2 = obj.map{|x, y| y*2 }

p obj2
#出力
[2, 4, 6]
```


<br>
###オブジェクトの値を処理してオブジェクトとして取り出す
オブジェクトの値を処理してオブジェクトとして取り出す方法について。

####▼配列からシンボルに変換

処理結果で`[キー, 処理]`を作成し、
`to_h`メソッドでシンボルに変換する。

```ruby:
obj = {:a=>1, :b=>2, :c=>3}
obj2 = obj.map{|x, y| [x, y*2]}

p obj2
#出力
[[:a, 2], [:b, 4], [:c, 6]]

p obj2.to_h
#出力
{:a=>2, :b=>4, :c=>6}
```

<br>
**▼メソッドチェーン**
メソッドチェーンを使えばシンプルに記述できる。

```ruby:
obj = {:a=>1, :b=>2, :c=>3}
obj2 = obj.map{|x, y| [x, y*2]}.to_h

p obj2
#出力
{:a=>2, :b=>4, :c=>6}
```



<br>
####配列からハッシュに変換

処理結果で`[キー, 処理]`を作成し、
`to_h{|変数1, 変数2| [変数1.to_s, 処理]}`でハッシュに変換する。

```ruby:
obj = {:a=>1, :b=>2, :c=>3}
 obj2 = obj.map{|x, y| [x, y*2]}.to_h{|v, w| [v.to_s, w]}

p obj2
#出力
{"a"=>2, "b"=>4, "c"=>6}
```


<br>
###引数が１つの場合
引数が１つの場合、キーと値のセットを１つの要素として抜き出す。

処理をすると、KVのpairがセットで処理される。

```ruby:
obj = {:a=>1, :b=>2, :c=>3}
obj2 = obj.map{|x| x*2 }

p obj2   
#出力
[[:a, 1, :a, 1], [:b, 2, :b, 2], [:c, 3, :c, 3]]
```
git pull --rebaseを取り消す方法

`git reflog`して

```
9102cb2 (HEAD -> hogehoge_branch) HEAD@{0}: rebase finished: returning to refs/heads/hogehoge_branch
省略
50859b6 (origin/develop) HEAD@{10}: pull --rebase origin develop: checkout 50859b63d2ec7911ba6ef791e80324a56077d841
```

こんな感じのが出力されるので、`git reset --hard HEAD@{11}`したらよい（head番号はもちろん変わります）
Github APIでリポジトリのIssue一覧をCSV出力

開発・運用にてGithubのIssueで問題・課題を管理している場合、
上司や顧客への定例報告などで、特定の期間に発生またはクローズしたIssueを提出・報告する必要があるかもしれません。
そんなときに一括でCSV出力する方法です。

#基本コマンド
以下コマンドで30件Issueを取得可能

```
curl -u ":username" "https://api.github.com/repos/:owner/:repos/issues?state=open" jq -r '["number","title","html_url"], (.[] | [.number,.title,.html_url]) | @csv' > issues.csv
```
ご参考
[GitHub issuesからCSV出力するコマンド](https://gist.github.com/ko31/8b8e6bbdcbe58d1964be7d8aebec40d0)

* :username→githubの自身のアカウント名
* :owner→owner名
* :repo→リポジトリ名

例：11月1日以降にクローズしたIssueを更新日付の降順で取得。取得項目はnumber、タイトル、URL、クローズ日

```
curl -u "yamada" "https://api.github.com/repos/githubtest/testrepo/issues?state=closed&per_page=100&sort=updated&direction=desc&since=2020-11-01" | jq -r '["number","title","html_url","closed_at"], (.[] | [.number,.title,.html_url,.closed_at]) | @csv' > issues.csv
```

##トラブルシューティング
###jqのインストール
jqをインストールしていない場合以下エラーが発生

```
jq: command not found
```
jqをインストールすれば解決。私の場合Mac環境なのでHomebrewでインストール

```
brew install jq
```

###github認証エラー
コマンド実行後にパスワードを求められる。認証失敗した場合、404のjsonレスポンスが返ってきてnumberが見つからず以下エラー表示となる。

```
jq: error (at <stdin>:4): Cannot index string with string "number"
```

* ユーザ名とパスワードを確認する
* githubアカウントに二段階認証が有効になっている場合、Personal Access Tokenを設定し、パスワードにトークン文字列を入力する必要がある。トークンの設定方法は以下参照  
[GitHub「Personal access tokens」の設定方法](https://qiita.com/kz800/items/497ec70bff3e555dacd0)

#主なパラメータ
## state
* オープンかクローズかフィルター
* state=open またはstate=closed と指定

```
curl -u ":username" "https://api.github.com/repos/:owner/:repos/issues?state=closed" jq -r '["number","title","html_url"], (.[] | [.number,.title,.html_url]) | @csv' > issues.csv
```
##page
* Issueが複数ページに渡る場合、ページ番号を指定可能
* page=2 のように指定

```
curl -u ":username" "https://api.github.com/repos/:owner/:repos/issues?state=closed&page=2" jq -r '["number","title","html_url"], (.[] | [.number,.title,.html_url]) | @csv' > issues.csv
```
##per_page
* 1ページあたりの取得件数
* デフォルトで30件。最大100件まで指定可能
* per_page=100 のように指定

```
curl -u ":username" "https://api.github.com/repos/:owner/:repos/issues?state=closed&per_page=100" jq -r '["number","title","html_url"], (.[] | [.number,.title,.html_url]) | @csv' > issues.csv
```

##sort
* 取得するIssueのソートに使うパラメータを指定。デフォルトはcreated
* created→作成日時
* updated→更新日時
* comments→コメントされた日時

##direction
* sortの昇順、降順を指定。デフォルトは降順
* asc→昇順
* desc→降順

```
curl -u ":username" "https://api.github.com/repos/:owner/:repos/issues?state=closed&per_page=100&sort=updated&direction=desc" jq -r '["number","title","html_url"], (.[] | [.number,.title,.html_url]) | @csv' > issues.csv
```

##since
* 指定した日付以降のIssueを取得
* since=YYYY-MM-DD で指定
 * YYYY-MM-DDTHH:MM:SSZでの指定も可能

```
curl -u ":username" "https://api.github.com/repos/:owner/:repos/issues?state=closed&per_page=100sort=updated&direction=desc&since=2020-11-01" jq -r '["number","title","html_url"], (.[] | [.number,.title,.html_url]) | @csv' > issues.csv
```

##その他
その他のGETパラメータは以下docsを参照。取得されるjsonのサンプルがあるため、表示項目を増やすのにも参考になる。
https://developer.github.com/v3/issues/#list-repository-issues
Rails：コントローラに定義する基本的7つのアクション

# 最初に

**カレンダー企画2020の16日目**
プログラミングの勉強を始めて3ヵ月程経ったので学んだことのメモをアウトプットとして記事に残します。
これからプログラミングの世界に入る人の手助けになれたら嬉しい限りです。
間違っていたり、言葉が違っていたり、誤解されるような言葉があったら教えてください^^
言葉を長々と読みづらかったら申し訳ありません。少しずつなれてがんばります。

## railsの7つのアクションについてちょっとまとめてみる

railsのControllerで使われる基本7つのアクションがある。
（例外として自作で名前をつけて作る事もある。）
これから紹介する7つの役割をしたい時は原則つける名前が定義されている。
一覧でどうぞ！

| アクション名 | 役割 |
|:-:|:-:|
| new      | データを新規作成する  |
| create   | データを追加する  |
| index    | データの一覧を表示する  |
| show     | データの内容を表示する  |
| edit     | データを編集する  |
| update   | データを更新する  |
| destroy  | データを削除する  |

言葉の表現の仕方は色々あると思うので自分で理解しやすいものにしてください！（意味が変わらない程度に、、、）


## new

**新規作成する**という役割があります。

たとえば、
SNSで何か投稿しようと文字を書いたり、写真をアップロードしたりする場所
ブログなら記事を書いている場所
そこがnewアクションです！

## create

**データを追加、登録する**という役割があります。

たとえば、
newアクションで作成したもの（上記の例の続き）
「投稿」とかのボタンありますよね？
それがcreateアクションです！

書いただけではどこにも表示されない。誰も見れない。残らない状態ですよね！
createをしてはじめてデータとして残ります。

## index

**一覧表示**という役割があります。

たとえば、
SNSでたくさんの人の投稿内容がズラッと並びますよね？
それがindexアクションです。

## show

**内容、詳細を表示**という役割があります。

たとえば、
indexで表示されているものをクリック、タップすると内容が全部みれたり、画面がその投稿だけになりますよね？
それはshowアクションです。

## edit

**編集する**役割があります。

たとえば、
投稿した内容で間違えあった！
情報が更新されたので投稿内容を変えたい！
そんな時に編集しますよね？

編集するところがeditアクションです。

newではないところに新しく作るアクションで
editではある物を作り直すアクションです。（newに似ていますね。）

## update

**更新する**役割があります。

編集した内容を保存するイメージです。
newを保存するのにcreateアクションを使います。
editを保存するのにupdateアクションを使います。

セットで覚えやすいかもしれないですね。

updateはeditを保存するだけでなく他にも変更を更新したりします。
editとだけセットという考えはやめてください。（書いといてなんですが、、、）

上書き保存的なイメージです！（私は！！）


## destroy

**削除**の役割です。

たとえば、
投稿をを削除したり、アカウントを削除したりする時に行われるアクションです。
データベースからデータを消し去ります！（物理削除というみたいです。）

これは余談
論理削除というのもあり、画面上では消えているがデータは残っている状態です。

たとえば、
運営としては過去に注文した履歴は残して置きたい。でも、ユーザーは退会したい。こんな時に使われます。ユーザー側からはログインできない状態（退会）管理者側の画面にはデータが残るという処理もできます。
この時に使うアクションはdestroyではなく、updateなのです！こういうupdateの使い方もあるみたいです！


## 最後に

ザーッとまとめましたが、あくまで基本的なアクションです。
showの画面にindexを表示するようなこともあります。上記の内容が絶対ではないですが基本的にこれを使います！感じで覚えて置くといいかも！
ヘッドレスCMS+SSGを導入することに当たってNodeサーバー構築

#目的：
担当する記事サイト改修でSSG/ヘッドレスCMSを導入する

#問題：
・Vercelの利用を考えましたが、ドメイン変更が必要。
・SSG/ヘッドレスCMSを導入したいけど、ドメイン変更したくないというディレクターの要望。

#検討
・とりあえず既存サーバー内にNodeサーバー構築し、いろいろ試すことに

#nodenvとは
・nodeのバージョンを管理するためのコマンド
・プラグイン(nodenv-build)を入れることで、nodeのインストールが可能

# nodenvのダウンロード
GitHubからnodenvのソースをcloneする
```
git clone https://github.com/nodenv/nodenv.git ~/.nodenv
```

# nodenvのビルド
nodenvをビルドして実行可能な状態にする
```
cd ~/.nodenv && src/configure && make -C src
```
#pathを通す
```
echo 'export PATH="$HOME/.nodenv/bin:$PATH"' >> ~/.bash_profile
echo 'eval "$(nodenv init -)"' >> ~/.bash_profile
```
pathを通してコマンドを叩けるようになる

#シェルを再起動する
```
exec $SHELL -l
```
ログインシェルを再起動して新しい設定ファイルを読ませる

#nodenvバージョンの確認
```
nodenv --version
```

##プラグインのインストール
### プラグイン用のディレクトリ作成
```
mkdir -p "$(nodenv root)"/plugins
```
### プラグインのインストール（clone）
```
git clone https://github.com/nodenv/node-build.git "$(nodenv root)"/plugins/node-build
```
### nodenvアップデート用プラグインのインストール（clone）
```
git clone https://github.com/nodenv/nodenv-update.git "$(nodenv root)"/plugins/nodenv-update
```
nodenv updateとコマンドを叩くことで、nodenvとそのプラグインを自動的にアップデート可能

# nodeのインストール

## インストール可能nodeバージョンの確認
```
nodenv install --list
```
## nodeのインストール(14.15.1は現時点でのLTSバージョン)
```
nodenv install 14.15.1
```
## rehash実行
```
nodenv rehash
```
・nodenvからnodeやグローバルなnpmパッケージを見えるようにするため
・新しいnodeのバージョンを入れたり、npm install -gなどを行ったときに実行する必要がある

## nodeバージョンの確認
```
nodenv versions
* 14.15.1 (set by /home/ec2-user/***_deploy/blog/.node-version)
```

## nodeバージョンの指定
プロジェクトで使うnodeのバージョンを指定
プロジェクトのディレクトリでのみ使うnodeのバージョンを指定する
```
cd /home/ec2-user/xxx_deploy/blog
nodenv local 14.15.1
```
プロジェクトのディレクトリ (/home/ec2-user/xxx_deploy/xxx_blog)内に.node-versionという名前の不可視ファイルが生成され、その中にそのディレクトリで使うnodeのバージョンが記述

ちなみにグローバルで使う場合のnodeバージョン指定
```
nodenv global 14.15.1
```
グローバルとローカル両方指定した場合、ローカルで指定した方が優先らしい。

## build
```
npm ci(少し時間かかる)
```

```
npm run build
```
Compiled successfully、Export successfulメッセージでbuildが完了し、プロジェクトのディレクトリにout(デフォルト)というフォルダが出来て色々吐き出される。
outフォルダ内の記事のhtmlファイルを開くと問題なく記事が表示されたのでbuildが正常に行われたと判断。


![スクリーンショット 2020-12-16 13.43.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274686/00f75531-15ef-a9da-2658-8a6ac201cbb2.png)

## その他nodeコマンド
### nodeアンインストール
```
nodenv uninstall 14.15.1
```

### nodenvのアップデート
```
nodenv update
```

### nodenvのアンインストール
~/.nodenvのディレクトリを消すだけ
```
rm -rf $(nodenv root)
```

サーバーで直接コマンド実行でbuildが正常に行われたので次はGitHubActtionでpush時に自動でgitから最新ソースをpull後にnodeサーバーでbuildする仕組みを下記のように実装。
https://qiita.com/kerry/items/5568232516b8ee323d4b
PHPでsassを使うには

SCSSからCSSを生成するために必要なSCSSコンパイラをPHPで実行できるライブラリがphp-sassです。
##php-sassをインストール
composerでライブラリをインストールします。

```:ターミナル
composer require panique/php-sass
```
##PHPファイルへの記述
PHPファイルを用意します。

```index.php
<?php
require 'vendor/autoload.php';

if($_SERVER['SERVER_NAME'] == 'localhost') {
    SassCompiler::run("scss/", "css/");
}
?>
<html>
<head>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
    <div class="main">
        <h1 class="title">Hello php-sass</p>
    </div>
</body>
</html>
```
PHPファイルでSassCompiler::run()メソッドを呼び出して、SCSSの入力先とCSSの出力先を指定します。

##SCSSファイルへの記述
SCSSファイルを用意します。

```base.scss
// 変数
$font-color: #333333;
$bg-color: #CCCCCC;
$font-size-default: 16px;

body {
  color: $font-color;
  background: $bg-color;
}
```

```style.scss
@import "base"; // インポート

// コメント（コンパイル後残らない）

%text {/* コメント（コンパイル後も残る） */
  font-size: $font-size-default * 2;  // オペレーター
  text-align: center;
}

// ネスト
.main {
  h1 {
    // 継承
    @extend %text;
    margin-top: 80px;
  }
}

// ミックスイン
@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.title { @include transform(rotate(30deg)); }
```
##SCSSファイルからCSSファイルへコンパイル
SCSSファイルを編集し保存すればコンパイルがされ、cssフォルダの中にstyle.cssができます。

```style.css
body {
  color: #333333;
  background-color: #CCCCCC;
}
.main h1 {
  /* コメント（コンパイル後も残る） */
  font-size: 32px;
  text-align: center;
}
.main p {
  margin-top: 80px;
}
.title {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}
```

ディレクト構成は以下のようになります。
![スクリーンショット 2020-12-16 13.35.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535877/46ce0658-e499-878d-fc20-72893aacde3c.png)
MacOS上にVirtualBoxを立てるときは6.1.4以上にしてはいけません。

MacOS上にVirutalBoxを立てて開発環境として使っている人多いと思いますが、6.1.4以上にするとえらい目にあいますので注意喚起します。

# 消費メモリが倍になるという致命的問題
6.1.4以上だと、（ゲストOSに）指定したメモリの倍の量がホストOSで確保されてしまいます。
つまり、ゲストOSに2Gを指定したら、ホストOSでは4G確保されてしまうということです。

複数台ゲストOSを立ち上げたりすると、たとえ16Gのメモリを積んでいたとしても、あっという間にメモリを食いつぶしてしまいます。これはかなり致命的問題です。

## 解決策は？
この現象はVirtualBoxの開発コミュニティに報告されいてますが、解決には至っていません。
https://www.virtualbox.org/ticket/19726

最後のコメントを見ると、この現象は 6.1.4 から発生していることが確認できます。

```
In our team we can confirm the issue with latest MacOS (Catalina and Big Sur):

Since VBox 6.1.4 the memory consumption for any Linux VM (in our case a docker-machine, boot2docker based) is doubled. Downgrading to 6.1.2 solves the issue, but unfortunately this is not an option on Big Sur, since 6.1.16 is required.

It would be very cool if it could be addressed on the next releases.
```

自分の手元のVirtualBox でも 6.1.2 にダウングレードしたら解決しました。

# MacOSのアップグレードも要注意
MacOSを11(Big sur)に上げると、VirtualBoxが6.1.16以上を要求されてしまいます。
また、その他の問題も発生しているようです。

（参考）
[macOS Big SurでVirtualBoxが動かないので対応した話](https://www.mmpp.org/archives/2133)

これらの問題が完全に解決するまで Big sur へのアップグレードは待った方が良いかと思います。