OmniAICreator/Qiita-1.07M huggingface dataset:
【丁寧な解説書】jsプラグインModaal　〜カスタマイズ編〜


##はじめに
ここでは、めちゃ便利なModaalのたくさんのカスタマイズを丁寧に解説していきます。
ちなみにModaalの導入についてはこちらの記事をご覧ください。
[【丁寧な解説書】jsプラグインModaal　〜導入編〜](https://qiita.com/nukuri/items/9ed5c07a731a1d150f4b)

公式のサイトはこちら
* [公式サイト](https://humaan.com/modaal/)
* [github](https://github.com/humaan/Modaal)

##カスタマイズそもそも
まず、カスタマイズってそもそもどこを変えたらいいのっていう方のために、初歩的なお話をするのでそんなの余裕だよ！って方は次に進んでください。

まずは例をどんっ！

```javascript:sample.js
$('.my-link').modaal({
	type: 'inline',
	background: '#fff'
});
```
* `.mi_link`はHTML内のクラス名に対応しています。自分の使う形に適当に変えてくださいね。
* `$('.my_link').modaal();`これが基本形です。
* カスタマイズを追加の時はmodaalの括弧内に追加していきます。
* `type`や`loading_content`はkeyと呼ばれるもので、cssでプロパティみたいなものです。
* `ajax`や`Loading content‥`はvalueと呼ばれるもので、ここを変更して自分好みにカスタマイズします。


__忘れがちポイント__

* valueの`'(シングルクウォーテーションマーク)`
* 複数カスタマイズするときの`,(カンマ)`

#本題のカスタマイズオプション解説

###頻出度高め
まずは頻出度の高いものの説明を載せます！だいたいの人はここだけ見ればやりたいこと出来るはず！

####1. type
モーダルでぽんっと何を出すかによって設定が必要。
デフォルトはinline、型はstring型。

| カスタマイズ | 解説メモ |
|:---------- |:--------|
| inline     |  inline要素を表示させたい [inline要素の解説はこちら](https://saruwakakun.com/html-css/basic/display)|
| image      |  画像を表示させたい |
| iframe     |  別のHTMLファイルを表示させたい（Youtubeの埋め込みなど） |
| confirm    |  確認ダイアログなどの表示 |
| video      |  動画を表示させたい |
| instagram  |  instagramを表示させたい |

####2. background
モーダルがぽんって出てきたときのモーダル部分の裏のを覆っている色。
デフォルトは#000、型はstring型。

>ちょぴっとメモ
ここでrgba指定をすると背景の透過度も一気に指定できて便利！
ちなみにカラーコードのrgb変換はこちらのサイトをお使いください
[RGBと16進数カラーコードの相互変換ツール](https://www.peko-step.com/tool/tfcolor.html)

####3. animation_speed
モーダルでぽんっと出すのにかかる時間。
デフォルトは300（0.3秒）、型はinteger型。
> ちょぴっとメモ
githubにはafter_callback_delayも一緒に変えなきゃいけないよって書いてあるけれど、animation_speedの変更だけで大丈夫そうです。
もし、その注意書きの意味わかる方いらっしゃいましたらご指摘いただきたいです、！

####4. background_scroll
背景をスクロールさせるか否か
デフォルトはfalse、型はboolean型。
これを`true`に設定すると、モーダルの後ろをスクロール出来る。

####5. width
モーダルの希望の幅を指定。
デフォルトはnull、型はinteger型。

####6. height
モーダルの希望の高さを指定。
デフォルトはnull、型はinteger型。

###頻出度低め
ここはこのカスタマイズってどんな時に使うのーっていう人のために頻出度低めなものにちょっとだけ触れてます。

####1. hide_close
モーダルの閉じるボタンを表示するかを指定。
デフォルトはfalse、型はboolean型。

| カスタマイズ | 解説メモ |
|:-----------|:--------|
|  false     | 閉じるボタンを表示  |
|  true      | 閉じるボタンを非表示  |

>どんな時に使うの？
modaal.jsは便利なプラグインだから、閉じるボタンを用意してくれているけれど、自分でカスタマイズしたボタンを使いたいよ！っていう場合はvalueをtrueにしてね

####2. overlay_opacity
背景オーバーレイの透過度を指定。
デフォルトは0.8、型はfloat型。
>ちょぴっとメモ
先述の通り、backgroundでも透過度は指定できます。

####3. fullscreen
モーダルが画面全体に表示されるようにする。
デフォルトはfalse、型はboolean型。

>正直な話
youtubeのモーダルではサイズに変化がありませんでした、ので、ちょっと使い方が正直わかりませんでした、

####4. start_open
サイト読み込み時にモーダルが表示されるようにする。
デフォルトはfalse、型はboolean型。

####5. overlay_close
閉じるボタンだけでなく、モーダルの背景を押したらモーダルが閉じるようにしたり、しなかったり。
デフォルトはtrue、型はboolean型。

###confirmのカスタマイズ
先述のtypeをconfirmにすると、ダイアログを作ることができます。
![confirm.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/937659/258b86bd-1bdb-d797-6a04-61b364aa57dd.png)
__変更することが出来る部分__

| キー（key） | デフォルト |
|:----------|:--------|
| confirm_button_text  |  Confirm |   
| confirm_cancel_button_text  |  Cancel |   
| confirm_title  |  Confirm Title |   
| confirm_content  |  This is the default confirm dialog ‥‥ |   

##終わりに

たくさん細かく丁寧に解説したつもりですが、わからないことがあればぜひ教えていただきたいなと思います。また、私の知識不足によりtypeをajaxに指定したときのことは省いています。また頑張って勉強してから追加できたらしますー！
というわけで、ご覧いただきありがとうございましたー！
MiniMagickで画像がresizeできなかった時の対処法

PF作成中に生じたエラーです。オチは非常に簡単なものだったので前提条件は省きます。

erbファイルに以下の様に記述してサーバーを起動し、quiz_image（image_tagで表示されるはずの画像）を確認しようとしました。```<%= image_tag quiz.quiz_image.variant(resize: '300×300'), class: 'card-img-top' %>```だけ見てくだされば大丈夫です。

```_quiz.html.erb
<% if quiz.quiz_image.attached? %>
  <%= image_tag quiz.quiz_image.variant(resize: '300×300'), class: 'card-img-top' %>
<% end %>
<div class="card-body">
  <h3 class="card-title"><%= quiz.title %></h3>
  <p class="card-text"><%= quiz.sentence %></p>
  <% quiz.tags.each do |tag| %>
    <%= tag.name %>
  <% end %>
  <%= link_to '問題詳細へ', quiz, class: 'btn btn-primary'  %>
</div>
```

しかし、画像が表示されません。そこでターミナルを確認すると以下の様に書いてありました。

```
MiniMagick::Error (`gm convert /var/folders/43/2kbncrm93jsb1tpd11tsys0r0000gn/T/ActiveStorage-24-20210221-35258-1rq06qb.jpeg[0] -auto-orient -resize 100×100 /var/folders/43/2kbncrm93jsb1tpd11tsys0r0000gn/T/image_processing20210221-35258-1uhkzzk.jpeg` failed with error:
gm convert: Option '-resize' requires an argument or argument is malformed.
):
```

最後の一文をざっくり翻訳すると「resizeメソッドの文法がなんかおかしいよ」とあります。（malformedとは奇形という意味です）

みたところ変なところはないのでとりあえずググってみました。すると以下の記事を発見しました。

https://askubuntu.com/questions/629808/resizing-with-imagemagick-error-message

どうやら
'300×300'
ではなく
'300x300'
が正しい様です。一見同じ様に見えますが'×（かける）'と'x（エックス）'が違います。

書き直して再確認するとうまく行きました。どうやらASCIIには×という文字は存在しない様で、xで代用しているみたいです。
SSH接続したLinuxでキャプチャしたパケットをローカルPCのWiresharkで開きたい

## はじめに
TeratermなどでSSH接続したLinuxでキャプチャしたパケットを、ローカルのWiresharkで開いてグラフ解析などをしたい場合があります。

Linuxでキャプチャしたパケットを、ローカルPCにダウンロードする方法を調べてみたのでメモとして残しておきます。



## 目標
- SSH接続したLinuxでtsharkにてパケットをキャプチャし、それをローカルPCに落としてwiresharkで開く

## 環境
AWS EC2を使用
- インスタンス：t2.micro
- OS:Amazon Linux2
- ターミナル:Teraterm

## 準備 
あらかじめroot権限を取得しておく

- wiresharkがインストールされているか確認

```
rpm -q wireshark
```

- インストールされていなければ、インストールする 

```
yum -y install wireshark
```  


## パケットキャプチャ
- 適当なパケットをキャプチャし、ファイルに出力する

```
 tshark -i eth0 -w packet.pcapng
```

## ダウンロード
- 所有権を変更<br>
ダウンロードできるように一般ユーザー権限に変更する

```
chown ec2-user:ec2-user packet.pcapng
```

- teratermのssh SCPでダウンロード
  - ファイル→SSH SCP...→以下のように入力して[Recieve]

```
From:先ほどキャプチャして保存したファイルを指定
To:ローカルPCの適当なディレクトリを指定
```


## ローカルPCのWiresharkで開く
Wiresharkでダウンロードしたファイルを指定して開きます。
うまくできていれば開いてグラフ解析などの機能が使えるはずです。
Ruby on Rails: scopeはnilを返す使い方をしてはいけない

# はじめに
Railsで開発している時、scopeを使うシーンは多いと思います。
しかし、実務で使用している際、予期しない動作をすることがあったので、調べたことをまとめておきます。

# 実行環境
- macOS Catalina 10.15.7
- ruby 2.6.6
- Rails 5.2.4.3

# 事前準備
今回は`name`というカラムを持つ、Userというモデルを使用していきます。
また、`hoge`という名前と`fuga`という名前を持つ2つのレコードが入っている想定です。

```sh

> User.all
=> User Load (1.1ms)  SELECT `users`.* FROM `users`
#<User id: 1, name: "hoge">,
#<User id: 2, name: "fuga">
```

# scopeでUserを検索する
まずは通常通りscopeでUserを検索してみましょう。
scope自体の使い方の説明が主目的ではないので、簡単に特定の名前で検索するscopeを考えます。

```ruby
class User < ApplicationRecord
  scope :find_hoge, -> () { find_by(name: "hoge") }
end
```

このscopeを使うことで、`name`が`hoge`であるuserを検索することができます。
発行されるsqlをみても、きちんと`name`が`hoge`であるレコードを検索できていることが分かるかと思います。

```sh
> User.find_hoge
  User Load (0.8ms)  SELECT  `users`.* FROM `users` WHERE `users`.`name` = 'hoge' LIMIT 1
=> #<User: id: 1, name: "hoge">
```


# scopeでnilを返してみる
さて、それでは次に結果がnilを返すscopeを作成してみます。


```ruby

class User < ApplicationRecord
  ...

  scope :find_nobody, -> () { find_by(name: "nobody") }
end
```

上記のscopeでは`name`が`nobody`であるレコードを検索していますが、該当するレコードが無いためnilを返すと思われます。
実際に実行してみましょう。

```sh
> User.find_nobody
  User Load (1.4ms)  SELECT  `users`.* FROM `users` WHERE `users`.`name` = 'nobody' LIMIT 1
=> User Load (1.2ms)  SELECT `users`.* FROM `users`
#<User id: 1, name: "hoge">,
#<User id: 2, name: "fuga">
```

あれ？sqlが2回実行されていますね。
しかも`all`をした時と同様の挙動をしてしまっています。
どうやら結果もnilではないようです。

```shell
> User.find_nobody.nil?
  User Load (1.0ms)  SELECT  `users`.* FROM `users` WHERE `users`.`name` = 'nobody' LIMIT 1
=> false
```


# 原因
この挙動の原因は、`scope`の仕様にあります。

scopeはメソッドチェインなどで複数の条件を結合して使用することが想定されているため、**結果がnilとなった場合は該当scopeの検索条件を除外したクエリを発行する**という仕様になっているようです。

今回のケースではscopeの中身を直接実行してみると、想定通りnilを返していることが分かります。

```ruby
> User.find_by(name: "nobody")
  User Load (1.2ms)  SELECT  `users`.* FROM `users` WHERE `users`.`name` = 'nobody' LIMIT 1
=> nil
```

そのため、`find_nobody`の条件を除外したクエリ、つまり検索条件の無い`all`の結果が返ってきてしまっているのです。

実際に、scopeを連結してみると、上記の仕様がよく分かるかと思います。
`find_nobody`と`find_hoge`をチェインして使用してみましょう。

```sh
> User.find_nobody.find_hoge
  User Load (3.9ms)  SELECT  `users`.* FROM `users` WHERE `users`.`name` = 'nobody' LIMIT 1
  User Load (2.0ms)  SELECT  `users`.* FROM `users` WHERE `users`.`name` = 'hoge' LIMIT 1
=> #<User: id: 1, name: "hoge">
```

`nobody`について検索した後、`hoge`のみの条件で検索するクエリが発行されていますね。

# 対応策
ここまで見てきたように、nilを返す可能性がある場合はscopeで実装してしまうと予期しない結果となることがあるので、クラスメソッドで実装しておくのが良いかもしれません。

```ruby
class User < ApplicationRecord
  ...
  ...

  def self.find_nobody
    find_by(name: "nobody")
  end
end

```

```sh
> User.find_nobody
  User Load (0.7ms)  SELECT  `users`.* FROM `users` WHERE `users`.`name` = 'nobody' LIMIT 1
=> nil
```
無事にnilが返ってきますね。

# まとめ
scopeを使うことで頻繁に使用する処理などをまとめておけるのが便利です。
しかし、nilを返す場合には今回紹介したように想定と異なる動作をする場合があるので、注意する必要がありそうです。

# 参考
- [ActiveRecordのScopeは、連鎖できない使い方はしてはいけない(first等)](https://qiita.com/Ushinji/items/149eff5e3d45a6f0cd92)
- [パーフェクト Ruby on Rails](https://www.amazon.co.jp/%E3%83%91%E3%83%BC%E3%83%95%E3%82%A7%E3%82%AF%E3%83%88-Ruby-Rails-%E3%81%99%E3%81%8C%E3%82%8F%E3%82%89-%E3%81%BE%E3%81%95%E3%81%AE%E3%82%8A/dp/4774165166)
【Rails】ゲストログイン用のユーザー作成〜ポートフォリオに最適〜

### アプリケーションにテストログイン機能をつけた話し
まだまだやりたいことはいっぱいあるけれど、AWSへのデプロイが終わったので見てもらうことを考えてゲストユーザーでのログイン機能をつけることにしました。

諸先輩方のアプリケーションを見てもついていない人はいないぐらい実装率が高いので今や当たり前の機能になっていると感じます。
そもそもログインして見てもらうのにわざわざ登録させるのも気が引けるし、せっかく時間を割いて見にきてくれるのだから、おもてなしの心があるべきだと思います。

ではdevise導入済みで話しを進めていきます。

### １・`app/controllers`配下にusersがない場合

まずはコントローラーに新しいファイルを作成。

```terminal
$rails g devise:controllers users

⬇️できたファイル

app
 ┣controllers
      ┣users
         ┗confirmations_controller.rb
         ┗passwords_controller.rb
         ┗registrations_controller.rb
         ┗sessions_controller.rb
```
users直下に4つのファイルができました。


### ２・`routes.rb`に記述
```routes.rb
# devise_for :usersの部分に追加
Rails.application.routes.draw do
  devise_for :users, controllers: {
    registrations: 'users/registrations',
    sessions: 'users/sessions'
  }

〜略〜

# resources :users, only: [:show]　がある場合はその下に記述
devise_scope :user do
 post 'users/guest_sign_in', to: 'users/sessions#new_guest'
end
```

### ３・`sessions_controller.rb`にてメソッドを定義

```sessions_controller.rb
class Users::SessionsController < Devise::SessionsController
  def new_guest
    user = User.guest
    sign_in user
    redirect_to root_path, notice: "ゲストユーザーとしてログインしました。"
  end
end
```

フラッシュメッセージはお好みで。

### ４・userモデルにメソッドを定義

```user.rb

# モデルに定義なのでselfからスタート

def self.guest
  find_or_create_by!(email: 'test@test.com') do |user|
    user.password = SecureRandom.alphanumeric(10) + [*'a'..'z'].sample(1).join + [*'0'..'9'].sample(1).join
    user.nickname = 'ゲストユーザー'
    user.gender_id = '4'   ⬅️ActiveHashの入力
    user.genre_id = '9'    ⬅️ActiveHashの入力
  end
end
```
ActiveHashを利用している場合は`user.gender_id = '4'`などの記述で問題ありませんでした。
ゲストログインも通常のユーザー登録をする流れと同じ流れを辿るので、バリデーションがかけられていると未入力項目に対してエラーが出てしまう。
ここでしっかりと項目をうめておく。
passwordは最初`SecureRandom.urlsafe_base64`としていましたがAWSへのデプロイ時にエラーになり、ログを見るとバリデーションが不正とのこと。
記述を変えたら本番環境でも成功しましたので、もし引っかかってしまったら試してみて下さい。


### ５・ビューファイルを変更
```new.html.erb
<%= link_to 'ゲストログインはこちら', users_guest_sign_in_path, method: :post %>
```

ボタンを作る場所などレイアウトに合わせて適用。



### 参考にさせて頂きました
@take18k_tech様
[簡単ログイン・ゲストログイン機能の実装方法（ポートフォリオ用）](https://qiita.com/take18k_tech/items/35f9b5883f5be4c6e104#%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%82%B3%E3%83%BC%E3%83%89)

@rie1224様
[Railsでテストアカウントでの簡単ログインの実装方法](https://qiita.com/rie1224/items/5f8c88bca9f56c582f52)

ありがとうございました。
プログラミングの基本構造

##プログラミングの基本構造

　下記の３つの基本構造を使えば、複雑なプログラムを作ることができる。

```
　　　　1、順次進行
　　　　２、条件分岐
　　　　３、繰り返し
```
　これらは、どのプログラミング言語の中にでもある。

##１、順次進行
```
　　　　【順次進行】
　　　　　　プログラムが書かれている上から順に処理をしていくプログラム構造
```
　・プログラムの最も基本的な動きになる。　
![スクリーンショット 2021-02-21 19.18.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/780845/cf3fce9d-1b12-082b-b97f-22f02e10a74d.png)

##２、条件分岐
```
　　　　【条件分岐】
　　　　　　特定の条件の時には「A」という処理、そうでない時には「B」という処理をするプログラム構造
```
（例）20才以上であれば[A]　,そうでなければ[B]

##３、繰り返し
```
　　　　【繰り返し】
　　　　　　決まった回数や条件を満たすまで同じ処理を繰り返すプログラム構造
```
・繰り返しは「反復処理」といったりもする
フォームオブジェクトを作る際にハマったこと

# モデルの関係性
大まかなモデルは以下のモデルで、あとで出てくるprefectureはアクティブハッシュ を採用している。
userモデル　：ユーザー情報
itemモデル　：商品情報
orderモデル　：購入記録、user_id、item_id　を保存したい
order_addressモデル　：購入者住所、orderモデル生成時にできるorder_idを保存したい
order_formモデル（フォームオブジェクト）
（prefecture）モデル

# オブジェクトフォーム
```rb
class OrderForm
  include ActiveModel::Model
  attr_accessor :user_id, :item_id, :postal_code, :prefecture_id, :municipality, :address, :building_name, :phone_number

  with_options presence: true do
    validates :user_id
    validates :item_id
    validates :order_id
    validates :postal_code, format: {with: /\A[0-9]{3}-[0-9]{4}\z/, message: "Input correctly"}
    validates :prefecture_id, numericality: { other_than: 0, message: 'Select' }
    validates :municipality
    validates :address
    validates :phone_number, format: {with: /\A\d{10}\z|\A\d{11}\z/ , message: "Input only number"}
  end

  def save
    order = Order.create(user_id: user_id, item_id: item_id)

    OrderAdress.create(postal_code: postal_code, prefecture_id: prefecture_id, municipality: municipality, address: address, phone_number: phone_number, building_name: building_name, order_id: order.id)
  end
end
```


# 疑問点
order_idも保存したいから``` attr_accessor ```のなかに記述するのでは？

# 結論

『order_id』はorderが生成されたと同時に作られるから、そこにはかけない
``` attr_accessor ```の部分はhtmlファイルのフォーム部分で保存したいものの記述
のため、フォームでの段階では保存されない

**前提として** 保存の順番は　orderテーブル　　→　　order_adressテーブル　（order_idが必要）


だから、``` attr_accessor ```の段階ではorder_adressテーブルに保存したいorder_id
は作られていないから、そこにはかけない



**save**の意味
``` def save ``` の部分中身の意味はorderコントローラーの記述も見ないとわからない

# フォームオブジェクトを振り返ってみて出てきた疑問
今回は１対１の関係性でフォームオブジェクトを使っていたが、
１対多のときは使うことができるのか？使い方は？
pythonのsubprocessで標準出力を文字列として受け取る

# 概要
pythonでsubprocessを使って処理を行なった後，標準出力を文字列として受け取りたいことがあります．
ちょくちょく行う処理なのですが，いつもどうやるのか忘れるのでメモしておきます．

# version
python3.9.2 
(python3.7以降は同じ)

# やり方
subprocessの実行は最近(python3.5以降)では公式ドキュメントによると`subprocess.run`を使うのが良いみたいです．
一発で標準出力を文字列として受け取るには以下のようにします．

```python
>>> import subprocess
>>> output_str = subprocess.run('ls', capture_output=True, text=True).stdout
```

(`'ls'`は実行したいコマンドの例です．)

その結果，

```python
>>> print(output_str)
'Dockerfile\nLICENSE\nREADME.md\nsrc\n'
>>> print(type(output_str))
<class 'str'>
```

標準出力を文字列として受け取ることができています！

`capture_output=True`で出力が受け取れるようになり,
`text=True`を渡すことで出力をバイナリではなく文字列として返してくれるようになります．

さらに`subprocess.run`は`CompletedProcess`というクラスを返すのですが，
そのクラスの変数である`stdout`にアクセスすることで標準出力を受け取っています．


```python
>>> subprocess.run('ls', capture_output=True, text=True)
CompletedProcess(args='ls', returncode=0, stdout='Dockerfile\nDockerfile:cpu\nDockerfile:cuda10.2-cudnn7\nLICENSE\nREADME.md\ndata\nresult\nsrc\ntrained_model.npz\n', stderr='')
```

標準エラー出力や戻り値にアクセスしたい場合はそれぞれ`stderr`, `returncode`にアクセスすれば良いです．
M1 macでIPA processing failedを解決する

## 環境

- m1チップのMacBook air
- xcode12.3

## 症状

- ipaを作成するためにarchiveする
- Organizer画面からDistributeAppする
- adhocを選択してnextをクリック
- 次の画面に移動して1秒くらいで`IPA processing failed`と表示され、ipaの作成に失敗する
![スクリーンショット 2021-02-19 10.43.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268579/130e8924-2f18-689b-4dd3-4264c3a9a073.png)

- show logから`IDEDistribution.standard.log`を確認すると下記のようなlogがのこっている

```
description = "Configuration issue: platform AppleTVSimulator.platform doesn't have any non-simulator SDKs; ignoring it"
``` 

## 要因

iOS Deployment TargetがiOS13未満かつ、armネイティブのxcodeで行っていたことが要因

とはいえ、なぜm1 macでiOS13未満だとエラーとなるのかの根本的な原因は不明。誰かわかる人いたら教えてください。

## 解決方法
### 方法1
xcodeを一度終了し、finderからxcodeを右クリックして「情報をみる」から、「rossetaを利用」にチェックをいれてinetelアーキテクチャのxcodeでもう一度アーカイブから行う（もしかしたらアーカイブは必要なくてDistibuteAppだけでもよいかも）

### 方法2
iOS Deployment Targetを13以上にする
私の場合は、該当のプロジェクトのターゲットが11以上だったためこの方法は使えなかったため試していないが、参考した記事によるとこれでもいけるらしい

## 参考記事
[MACM1を使用してXcode12.2で「IPA処理に失敗しました」を修正する方法](https://stackoverflow.com/questions/64916429/how-to-fix-ipa-processing-failed-in-xcode-12-2-with-mac-m1)


## その他疑ったことたち

- podファイルや自作frameworkにarm64以外のアーキテクチャが含まれているせいでは？
→確かにarm64以外のアーキテクチャも含まれていたが、iOS13以上を指定したプロジェクトでテストしたした時にはipaが作成できたため、今回は違ったらしい。↓の記事の人がm1 macだったかは不明
["Configuration issue: platform iPhoneSimulator.platform doesn't have any non-simulator SDKs; ignoring it" でAdhoc ipa生成が失敗する時の対応](https://qiita.com/satoshi0212/items/71947583f3b2a62865e4)

- 自作frameworkの`embed & sigin`と`do not embed`を切り替えてみる
→意味なし

## 後書き
こんなん絶対わからないじゃん。無理じゃん。
m1 macはやっぱりまだ開発向きではない・・・　情報が限られすぎてる。
電池持ちは圧倒的に快適なんだけどね

## おもしろかったこと

参考にしたstackoverflowの記事内のコメント
> ->エラー「IPA処理に失敗しました」が表示される前に、ディスプレイ「Analyzing signnature」のロードプロセス中に、「次へ」ボタンをすばやく継続的にクリックしてエラーをスキップします。理由はわかりません。Appleが問題を解決できることを願っています。

たしかにこれで次の画面に進めたけどワロタ


Twitterもやってるので、よければフォローお願いします。
→https://twitter.com/ObataGenta
【過去の私】が作ったグラブルの救援検索アプリを【現在の私】がフルスクラッチしてやった

はじめまして、ユキギガンテと申します。
Androidエンジニアとしてお仕事をしています。
グラブルとアプリ開発が好きです。

## このアプリが誕生した経緯
それは私がAndroidエンジニアになる前のこと。
エンジニアになるために独学していた中で、自分でも何かアプリを作ってみたいと思ったのがきっかけです。noteに当時の話を投稿してみたのでよろしければご覧ください。
[私大文卒エンジニアの成り上がり#note](https://note.com/yuqinta/n/nae6811792a00)
## 旧バージョン
<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555431/c94c7054-87fe-1bae-5c2e-36d55a514c54.jpeg"/>　<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555431/71382183-e6c0-6636-9802-615769c53bf4.jpeg"/>
こんな感じ。
未経験の時代に独学で作っただけあって、ソースコードは凄い。
本当に動くのか、実験用に色々試したコードの集合体だ。
## 新バージョン
<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555431/e534824c-1ba0-3334-bbe9-2cb562fbd143.jpeg"/>　<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555431/551fc88e-7516-e202-9512-4e5df9a46521.jpeg"/>  <img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555431/fdcb6f1d-e7d2-671c-19c6-a0368f755d85.jpeg"/>
こんな感じ。
２個以上の同時検索や、オートリトライ設定等、検索面での機能を追加してる。
## 技術紹介
今回このアプリに取り入れている技術要素を紹介していく。
### CleanArchitecture × MultiModule
言わずと知れたクリーンアーキテクチャ。
私もかなり好んでおり、業務でもよく採用する。そこにマルチモジュールを採用することで依存関係を厳格化している。DIにはDaggerを使用。
実際のモジュール構成はこちら
![JRWモジュール構成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555431/12d691bc-3386-ab1b-3424-ca380e1ba13d.png)
### RxJava/Kotlin
ストリームで複雑な処理を作るのが好きなので、Rxを好んで使用している。
Coroutineも良いがストリーム操作においてはRxのほうが強いかなぁ。
検索機能における設定項目を複数実装したがそれもすべて１つのストリームで実現している。

```
　　//設定読み込み
    loadSetting.execute(NoRequestValue)
      .flatMap {
        enableDuplicateRetry = it.find{ setting -> setting.first == SettingModel.DUPLICATE_RETRY }?.second ?: false
        enableAutoRetry = it.find{ setting -> setting.first == SettingModel.AUTO_RETRY }?.second ?: false
　　　　//検索実行
        searchRescue.execute(NoRequestValue)
      }
      .repeatWhen {
        it.takeWhile {
         (retryCount < RETRY_LIMIT_COUNT)
             && (enableAutoRetry || enableDuplicateRetry)
        }.delay(RETRY_INTERVAL_TIME_MILLIS, MILLISECONDS)
　　　...以下省略
```
### MotionLayout (ConstraintLayout2.0)
画面の動きはMotionLayoutを用いて実装した。
全てxmlで定義が可能で、この動きに関する実装でコードは１行も書いていない。
![20210221_163627[1].gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555431/58a5b35e-9a0f-6ac4-da09-e3dbdbddc40e.gif)
### SharedElementTransition
画面遷移のアニメーション。昔GooglePlayで使われていたやつ。
最近はNavigationでの実装で遷移アニメーションの扱いが若干楽になった気がするが、遷移アニメーション自体は割と昔からある。
![20210221_170229[1].gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555431/8dc59d1b-8894-af5c-803b-ec28df22e399.gif)

### Service
この常駐windowはServiceを活用して実装している。
よくServiceにViewを持てるのかと聞かれるが、気合で持たせるのである。
![20210221_174429[1].gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555431/7c028047-08a8-1039-0a5d-ec4a651ca85a.gif)
## おわりに
このアプリは私が初めて作ったAndroidのアプリです。
それを今までずっとアップデートしてきていて、ついにフルスクラッチしました。

昔の自分のコードを見るのも面白いものです。今だから気づけることがたくさんあるので自分の成長を実感できます。

でもやはり、実際にアプリを使ってもらって、
レビューを貰ったり、応援の言葉を貰ったり、時には厳しい意見を貰ったりしながら開発していけるのが個人開発の醍醐味ですかね！

よろしければ、是非インストールしてみてください！
https://play.google.com/store/apps/details?id=com.app.yuqinta.kinofjob&hl=ja
Node.jsのバージョン管理

①```node --verion``` で現在のNode.jsのバージョンを確認。

②```n ls-remote --all```でダウングレード/アップグレードできるバージョンを確認。

③```sudo n 12.0.0```で指定のバージョンにダウングレード/アップグレードできる。
【CSS】 margin 0 autoが効かない原因と対処法

CSSで文字を中央寄せするために「margin 0 auto」を指定したのにも関わらず効いていなくて中央寄せにならないことがあります。
今回は中央寄せにならない原因とその対処法について解説していきたいと思います。

# margin 0 autoが効かない原因と対処法
## 原因1　インライン要素にmarginをしている

```index.html
  <body>
    <h1><a href="#">中央寄せ</h1>
  </body>
```

```stylesheet.css
a {
  margin: 0 auto;
}
```

　中央寄せになっていないのは、marginがかかっている要素がインライン要素だからです。インライン要素にはmarginやpaddingを指定できません。
インライン要素は、aタグ（リンク）、spanタグ（テキスト）、imgタグ（リンク）などのことです。
インライン要素を中央寄せしたいときは、text-alignを使用することで中央寄せにすることができます。ただし、親要素に指定します。

```stylesheet.css
h1 {
  text-align: center;
}
```

##原因2　ブロック要素に指定しているがwidthを指定していない
```index.html
  <body>
    <h1>中央寄せ</h1>
  </body>
```
```stylesheet.css
h1 {
  margin: 0 auto;
}
```

上記のように、ブロック要素にmargin 0 autoを使用しているのに中央によらない場合があります。この時の原因として考えられるのは、要素の横幅が画面いっぱいに広がっているため、要素を動かすことができないことが挙げられます。よくわからない時は一度、borderプロパティなどを用いて要素を可視化してみましょう。

```stylesheet.css
h1 {
  margin: 0 auto;
  border: 2px solid #000000;
}
```
このときは、widthを用いて親要素より幅を小さくすることで要素を中央に寄せることができます。

```stylesheet.css
h1 {
  margin: 0 auto;
  border: 2px solid #000000;
  width: 150px;
}
```


#まとめ
今回は、margin 0 autoを指定しても中央寄せにならない原因と対処法について解説しました。
初心者だと文字が中央寄せにならない等ということで結構悩むことが出てきます。
marginが反映されない時は、一度borderなどを用いて要素を可視化することで原因を特定することができることがあります。
cssでmarginで中央寄せができない時はぜひ参考にしてみてください。
Ruby on Rails における_pathと_urlの違い

<p>現在、RailsTutorialを学習中の駆け出しエンジニアの者です。</p>
<p>railsヘルパーの一種であるpathとurlの違いを理解できていませんでしたので、自分なりに調べてみました。</p>

<h1>_pathは相対パス、_urlは絶対パス</h1>
<div class="code-frame" data-lang="text">
<pre>
（例）
root_path => '/'
root_url  => 'http://www.example.com/'

new_user_path => '/users/new'
new_user_url => 'http://www.example.com/users/new'
</pre>
</div>
<h3>相対パス</h3>
<div>_pathは相対パスを示しています。相対パスはアプリケーションから見て、どのファイルやフォルダの位置にあるのかを示します。上の例であるnew_user_pathで説明しますと、viewフォルダの中のusersフォルダの中のnew.html.erbを呼び出していることになります。
</div><br/>

<h3>絶対パス</h3>
<div>_urlは絶対パスを指定しています。絶対パスとは、そのページをインターネットからアクセスする際のurlを示します。
なので、今いる位置に関係なく呼び出すことができますし、外部のサイトを呼び出すこともできます。</div>

<h2>使用方法の違い</h2>
<p>Railsの開発においての_pathと_urlの使用方法の違いを説明します</p>
<h3>_pathの使用方法</h3>
<p>_pathはredirect_to以外でよく使用します。</p>
<p>例えばlink_toなどで使用します。</p>
<h3>_urlの使用方法</h3>
redirect_toのときに使用する。
なので、Railsにおいてはコントローラの際に使用することが多いです。
ATmega328PBを使う (1) Microchip Studioのインストール

#はじめに
プラモデルをLEDで電飾するのにATmega328を使おうと思っています。
開発環境としてMicrochip Studioをインストールしました。元はAtmel Studioというらしいですね。

#Download
Micochipのサイトからダウンロードします。
https://www.microchip.com/en-us/development-tools-tools-and-software/microchip-studio-for-avr-and-sam-devices

Web Installerを選択しました。
![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68712/20424cff-98be-763c-f817-86c6a3129f24.png)

#インストール
インストーラーを起動しインストールを開始。

ライセンス
![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68712/daf2f872-a56f-75b6-de98-38ec6c3648e1.png)

アーキテクチャーを選択。とりあえず全部。
![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68712/248d2cec-d4ad-9129-162e-9c6d40123ed3.png)

![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68712/359cb648-4379-f3b9-e6fd-db4d7edbb44e.png)

![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68712/5e98ebd4-3079-7032-7900-479858bb960f.png)

Installボタンを押してインストールを開始します。
![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68712/b8f9cb1f-c60d-71b0-04b7-c8a6199480c2.png)

指示に従って進めます。
![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68712/429b8d4f-2810-432c-90eb-d76acba3c8b3.png)

![08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68712/be5da42b-824f-9304-ea12-e11a0523fdd9.png)

![09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68712/e3739dd7-c72d-28ff-0a61-f32cc77f8f93.png)

![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68712/de2c14e1-10c9-4692-c55b-6b93bd4bf2e9.png)

![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68712/2993e11c-c6a0-b720-5690-3f77b79ac2be.png)

![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68712/bce7c71f-02e8-d3c8-28ee-53faaa5e07e9.png)

![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68712/b3fa1f6e-80c4-afe7-68d7-999b653add98.png)

![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68712/8d7e607b-f681-0ba5-7654-e5576d4f814a.png)

VisualStudio関係のインストールが続けて始まります。
![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68712/0cf18426-4985-9b75-9156-c33e7aea08a5.png)

![16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68712/f52e9b84-db7b-fc1e-d251-ed19de530b3e.png)

ドライバー関係のインストールも終了すると無事に起動しました。
![17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68712/2152715d-3815-4ca6-2d68-83558ea1d00c.png)


以上です。
詳細画面での進捗率ゲージの作成

# はじめに
オリジナルアプリでクラウドファンディングサイトを作成した際に、
jQueryを使って進捗率ゲージを作成したので紹介します。
初学者なのでより良い方法が他にもあるかもしれませんが、どなたかの参考になれば嬉しいです。
[![Image from Gyazo](https://i.gyazo.com/b2ca1e6d58cd4696b51477c8d0571ea9.jpg)](https://gyazo.com/b2ca1e6d58cd4696b51477c8d0571ea9)
# 環境
・Rails 6.0.0
・Ruby 2.6.5
・jQuery
# 作成手順
【view】

```ruby:details.html.haml
.contents-pacent
  .contents-pacent__box1
    進捗率
  .contents-pacent__box2
    - @percent = number_to_percentage(@total.to_f/@project.target_amount*100,precision: 1)
    = @percent
    .contents-pacent__box2__graph1
      .contents-pacent__box2__graph2
        %input{name: "percent", type: "hidden", value:@percent, class: 'percent' }
```

①ゲージを挿入したい部分にクラスを設定します。
　→.contents-pacent__box2__graph2の部分

②inptを用いてDBのインスタンス変数の値を取得します。
　→inputのvalueに変数を設定することでjQueryで変数を使えるようにします。
　　※今回は変数の詳細は割愛します。
　参考記事：https://qiita.com/Kohei_Kishimoto0214/items/d919b00d75dec0699cf0

【CSS】

```ruby:_projects_details.scss
.contents-pacent__box2__graph2{
  background-color: #ea662d;
  height: 15px;
  border-radius: 6px;
  max-width: 100%;
}
```

③CSSは以上の通りです。
　進捗率が100％以上になっても突き抜けてしまわないように
　max-width: 100%;を設定しています。

【jQuery】

```ruby:project_detail.js
$(function() {
  let percent = $( ".percent" ).val();
  window.onload = function(){
    $(".contents-pacent__box2__graph2").css({ 'width' : percent } );
    }
});

```
③viewのinputの値を取得します。
④リロードのタイミングで.contents-pacent__box2__graph2のwidthの値を@percentからとるように設定します。

# 最後に
詳細画面は以上のようなシンプルな設定でゲージの作成ができました。
しかしトップ画面の並んでいるプロジェクトそれぞれに進捗率を反映させるのには少し手間取りましたので
次回紹介できればと思っています。
【Python】SQLiteによるデータベースの操作

SQLiteは非常にお手軽なデータベースです．
軽量でありながらデータベースの操作言語SQLを利用して本格的なデータベース操作が行えるという点に注目が集まっています．
ファイル1つが1つのデータベースであり，組み込み用途でよく利用されています．
Pythonから使う場合，標準ライブラリのsqlite3を利用する宣言だけで使うことができるのもメリット．


例）shuto.sqliteというデータベースに，リンゴやバナナの値段を挿入し，それを抽出する．


```python
import sqlite3

# sqliteのデータベースに接続
dbpath = "shuto.sqlite"
conn = sqlite3.connect(dbpath)

# テーブルを作成し、データを挿入する
cur = conn.cursor()
cur.executescript("""
/* itemsテーブルが既にあれば削除する */
DROP TABLE IF EXISTS items;

/* テーブルの作成 */
CREATE TABLE items(
    item_id INTEGER PRIMARY KEY,
    name TEXT UNIQUE,
    price INTEGER
);

/* データを挿入  */
INSERT INTO items(name, price)VALUES('Apple', 800);
INSERT INTO items(name, price)VALUES('Orange', 780);
INSERT INTO items(name, price)VALUES('Banana', 430);
""")
# データベースに反映させる
conn.commit()

# データを抽出する
cur = conn.cursor()
cur.execute("SELECT item_id,name,price FROM items")
item_list = cur.fetchall()
# 一行ずつ表示
for it in item_list:
    print(it)
```

```
(1, 'Apple', 800)
(2, 'Orange', 780)
(3, 'Banana', 430)
```

```python
import sqlite3

# データベースに接続
filepath = "test2.sqlite"
conn = sqlite3.connect(filepath)

# テーブルを作成
cur = conn.cursor()
cur.execute("DROP TABLE IF EXISTS items") 
cur.execute(""" CREATE TABLE items (
    item_id INTEGER PRIMARY KEY,
    name    TEXT,
    price   INTEGER)""")
conn.commit()

# 単発でデータを挿入
cur = conn.cursor()
cur.execute(
    "INSERT INTO items (name,price) VALUES (?,?)",
    ("Orange", 520))
conn.commit()

# 連続でデータを挿入
cur = conn.cursor()
data = [("Mango",770), ("Kiwi",400), ("Grape",800),
    ("Peach",940),("Persimmon",700),("Banana", 400)]
cur.executemany(
    "INSERT INTO items(name,price) VALUES (?,?)",
    data)
conn.commit()

# 400-700円のデータを抽出して表示
cur = conn.cursor()
price_range = (400, 700)
cur.execute(
    "SELECT * FROM items WHERE price>=? AND price<=?",
    price_range)
fr_list = cur.fetchall()
for fr in fr_list:
    print(fr)
```

```
(1, 'Orange', 520)
(3, 'Kiwi', 400)
(6, 'Persimmon', 700)
(7, 'Banana', 400)
```

ここで注目したいのは，SQL内で実際に挿入する値を「？」を使って表現します．そしてexecute()メソッドの第二引数で実際の値を指定します．すると「？」の部分が値に置換されます．
この仕組みを使えば，セキュリティの脅威を防ぐことができるだけでなく，意図しないSQLの破壊を防ぐことができます．

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/377231/01cbe1dc-a874-b924-0d35-e2f4fd742589.png" width="200px">

![snakes.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/377231/d543fb8d-1b54-8af0-f592-3a148581cc75.png)
【初心者でもわかる】cssで水面に反射したような鏡面反射を作成する方法

# どうも7noteです。鏡面反射の作り方。

水面に反射したように、画像の下に水面に反射したような画像をおいて鏡面反射を作ります。

**見本**

![image01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/ebb00bbe-26c2-2868-4a9a-bd5d7000104b.png)

## 鏡面反射のソースの書き方

```index.html
<div class="image">
  <img src="sample.jpg">
</div>
<!-- ↓反射用↓ -->
<div class="spreflect">
  <img src="sample.jpg">
</div>
```

```style.css
.image {
  margin-bottom: 1px; /* 反射するとこの隙間 */
}

.spreflect {
  transform: scale(1, -1); /* 上下反転 */
  position: relative;  /* 基準位置とする */
}
.spreflect::before {
  content: "";         /* 疑似要素に必須 */
  width: 100%;         /* 幅いっぱい */
  height: 100%;        /* 高さいっぱい */
  display: block;      /* 高さを指定するためにブロック要素にする */
  background: linear-gradient(#fff 30%, rgba(255,255,255,0) 100%); /* 徐々に透明にする */
  position: absolute;  /* 相対位置に指定 */
  top: 0;              /* 上から0pxの位置に指定 */
  left: 0;             /* 左から0pxの位置に指定 */
}
```

## まとめ

同じような方法で`box-reflect`というプロパティを使って要素を反転させることができます。

> https://shanabrian.com/web/css3/box-reflect.php
※`box-reflect`を使った場合は「Safari、Chrome」にしか対応できないので注意！

#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】WEB制作のちょいテク詰め合わせ](https://qiita.com/7note)
アセットパイプラインについて解説

###アセット（assets）とは
railsのapp/assetsディレクトリにはimages、javascripts、stylesheetsの**3つのディレクトリ**があります。
それぞれ画像ファイル、javascriptファイル、cssファイルを置くためのディレクトリです。

これらの事を**アセット(assets)**と呼びます。


###アセットパイプラインとは
アセットパイプラインはstylesheetsディレクトリ以下の複数のファイルを１つに結合し、1個のcssファイルを生成する事をいいます。アセットパイプラインの最大の特徴は**ファイルの変換と結合**です。


###sassとは
SassとはCSSを拡張したスタイルシート言語のことです。
ブラウザではSassを理解できないため、サーバー側でsassをcssに変換してやる必要があります。この処理の事を**コンパイル**と呼びます。よく使用される拡張子.scssはsassの一種です。scssはapp/assets/stylesheetsに配置します。

###なぜファイルを結合する必要があるのか
なぜ複数のファイルを結合するかというと、**ブラウザとサーバー側のHTTP通信の回数を減らすため**です。これによってサーバーへの負荷を減らすことができます。


###アセットパイプラインの利用方法

stylesheetsディレクトリのapplication.cssを開くと以下の記述があると思います。

```
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */


```
まずはこれらを解説していきます。
コメント中の*はディレクティブと呼ばれ、アセットパイプラインの設定を行なっています。

```
 *= require_tree .
```
はアセットパイプラインが処理するファイルの設定範囲を設定しています。.(ドット)はstylesheetsディレクトリ以下の全ファイルを処理対象として指定しています。

ここを対象のディレクトリにしたい場合は

```
 *= require_tree ./対象のディレクトリ名
```

とします。


```
*= require_self
```
次に*= require_selfですが、これはself＝自分自身、つまりはapplication.css自身をアセットパイプラインの処理対象とする事を宣言しています。


###スタイルシートを目的別に分ける方法
まずstylesheetディレクトリにadmin.cssを作成します。

```
*
*= require_tree ./admin
*/
```

/config/initializers/assets.rbに以下を記述します。

```
Rails.application_config.assets.precompile += %w( admin.css)
```

これによりadmin.cssがプリコンパイルの対象に加わります。


次にstylesheetsディレクトリにadminディレクトリを作成し、layout.scssを作成しスタイルを記述します。

続いてviews/lauouts/application.html.erbをadmin.cssに変更します。

sample_app/app/views/layouts/admin.erb

```
<!DOCTYPE html>
<html>
  <head>
    <title><% title_helper %></title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'admin', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>
```
link_tagをadminに変更しています。


/application.controller

```
layout :set_layout

private def set_layout
    if params[:controller].match(%r{\A(admin)/})
      Regexp.last_match[1]
    else
      "customer"
    end
end
```
上記によりset_layoutメソッドはadminという文字列を返します。この文字列がレイアウトとして使用されます。あとはこれを繰り返すことで利用別ごとにスタイルシートを作成できます。
Buildkitを「docker-compose build」で使う方法

皆さんこんにちは！

まだまだ毎日投稿しているのですがネタ尽きないっす。

なんならもっと書きたいぐらい。

色々記事書いてるので、ぜひ時間のある方はほかの記事もご覧ください！

さて、今回はDockerの記事です。

Dockerで作ったイメージをAWSのECRにプッシュしようとしたら以下のような警告が表示されました。

```
[+] Building 0.1s (2/2) FINISHED
 => [internal] load build definition from Dockerfile                                     0.0s
 => => transferring dockerfile: 2B                                                       0.0s
 => CANCELED [internal] load .dockerignore                                               0.0s
 => => transferring context:                                                             0.0s
failed to solve with frontend dockerfile.v0: failed to read dockerfile: open /var/lib/docker/tmp/buildkit-mount119702719/Dockerfile: no such file or directory
```

明らかにビルドできてない気がする。

実際にECSでこのイメージを使ってもエラーが表示される。

ってことで半日くらいかかった末にようやく答えが出た。

僕自身WindowsでDockerの開発を行っているのですが、Windowsだとこの現象が起きるらしいです。

悲し。。。

なので、``docker-compose``でビルドしちゃえばいいんじゃねって思って半日近くの時間を費やしようやく答えを見つけた！

どうやら``docker-compose``はデフォルトでは``Buildkit``に対応していないらしい。

なので、``docker-compose``でBuildkitを有効にする魔法のコマンドを打つ！！！

###Mac###

```
COMPOSE_DOCKER_CLI_BUILD=1 docker-compose build
```

###Windows###

```
set "COMPOSE_DOCKER_CLI_BUILD=1" & set "DOCKER_BUILDKIT=1" & docker-compose build
```

``COMPOSE_DOCKER_CLI_BUILD=1``という環境変数を追加してあげることでBuildkitを使用してコンテナをビルドできるそうです。

Dockerは習い始めて約2週間、AWSは約1週間くらいなのですが、なれるまでに時間がかかりそうですね。

以上、「[Docker]Buildkitを「docker-compose build」で使う方法」でした！

良ければ、LGTM、コメントお願いします。

また、何か間違っていることがあればご指摘頂けると幸いです。

他にも初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい！！

Thank you for reading
STM32G031J6M6のArduinoでの温度,STTS751で温度表示(i2c AQM0802A)


x 愛用していたSTTS751の入手が難しくなったので代用品は、S-5851A。(おもにアドレスの違い)

1.SCLとSDAを接続、プルアップも忘れずに
2.電源の接続
3.下記のソースコードを書き込む
4.コンパイル実行で表示されたら終了
5.おわり

```c++

#include <Wire.h> //I2C library

//STM32G031J6M6
#define sdaPin PA12    // ArduinoA4
#define sclPin PA11    // ArduinoA5

// I2C temperature sensor - see table 1 of data sheet.  Resistor selects address. 
#define STTS751 0x39
#define I2Cadr  0x3e  // 固定

int     tempval;                //温度
char    data_read[2]={'@','t'}; //i2cバッファー
int     ii;                     //ループカウンター

char INIT_com[]={0x0,0x38,
0x0,0x39,
0x0,0x4,
0x0,0x14,
0x0,0x70,
0x0,0x56,
0x0,0x6C,
0x0,0x38,
0x0,0xC,
0x0,0x1,
0x40,0x41,0x99,0x99};

char INIT_cls[]={0x0,0x1};

void i2c_led_w(char *buff1){
  Wire.beginTransmission(I2Cadr);
  Wire.write(buff1[0]);
  Wire.write(buff1[1]);
  Wire.endTransmission();
  delay(2);
}//i2c_led_w

void setup()
{  
  delay(3000); //not delete

  //Wire.begin(); // initialise the connection //767
  Wire.begin(sdaPin,sclPin); //STM32G031J6M6

  //液晶の初期化
  for(ii=0;ii<11;ii++){
    i2c_led_w(&INIT_com[ii*2]);
  } //for

} //end setup

void loop()
{

  //画面のクリア
  i2c_led_w(INIT_cls);

  //0番目のレジスター
  Wire.beginTransmission(STTS751);
  Wire.write(0);
  Wire.endTransmission();
  delay(1);

  //温度の読み込み
  tempval = 99;
  Wire.requestFrom(STTS751, 1);
  while(Wire.available())  {    // 要求より短いデータが来る可能性あり
    tempval = (int)Wire.read(); // 1バイトを受信
  }//while
  delay(1);

  //液晶に表示
  data_read[1] = '0' + (tempval / 10);
  i2c_led_w(data_read);
  data_read[1] = '0' + (tempval % 10);
  i2c_led_w(data_read);

  delay(1000);
}//loop


```

![G031_STTS751_i2c_lcd_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/3837b71b-dceb-cbb6-9f25-710165b53076.jpeg)
UIElementsとOdinEditorWindowをあわせてみる

いやはや、UIElementsを使っているのですけどね
資料もないし大変ですね・・・

なんだろう結構複雑なEditor拡張を作るのにはまあIMGUIより向いているというのはまあ、そのとおりだと思うのですけど
「これからはこれを使ってエディタ拡張を書いていこう！」になるには結構時間がかかりそうな印象です。


一方Odinという拡張があります
https://assetstore.unity.com/packages/tools/utilities/odin-inspector-and-serializer-89041?aid=1101lGoY&utm_source=aff

これはIMGUI(OnGUI)を書かずにアトリビュートだけで色々エディタ拡張を出来るようにしようとしているアセットです
控えめに言ってちょーべんり
Odinは良いぞ！


さて、OdinにはOdinEditorWindowっていう便利な機能があるのですが、
要はEditorWindowの見た目をアトリビュートと変数だけで作ってしまえるというイケてる機能です

でもOdinもUIElementsとかで作るような凝ったものを作るのには向いていないのです。


そんなわけでその2つを組み合わせる方法をここにぺたりとおいておきます


			//DefaultInspectorを追加
			VisualElement root = rootVisualElement;
			root.Add(new IMGUIContainer(() => base.OnGUI()));

以上
Flutterで文字列を入力できるダイアログを作ろう

Flutterでダイアログを表示するにはshowDialog()メソッドを用いる。
これを用いて「文字列を入力できるダイアログ」が作りたくなった。
ネットで調べまくったおかげでコードができたので、今回はそれを紹介する。

#今回作るもの
<img width="300" alt="aaa.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1109597/cf7c44c4-1ea2-3b09-9889-54656a45103f.jpeg">
真ん中のボタンをクリックしたら、
<img width="300" alt="bbb.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1109597/a8fa0c96-106b-d001-0786-f575c34d41e5.jpeg">
こう表示させる（なお、言語設定を省いたので中国語フォントになっています。）

#コード
```dart:main.dart
import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  home: TitleScreen(),
));

class TitleScreen extends StatefulWidget {
  @override
  _TitleScreenState createState() => _TitleScreenState();
}

class _TitleScreenState extends State<TitleScreen> {

  Future<void> InputDialog(BuildContext context) async {    //処理が重い(?)からか、非同期処理にする
    return showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
            title: Text('タイトル'),
            content: TextField(
              decoration: InputDecoration(hintText: "ここに入力"),
            ),
            actions: <Widget>[
              FlatButton(
                color: Colors.white,
                textColor: Colors.blue,
                child: Text('キャンセル'),
                onPressed: () {
                  Navigator.pop(context);
                },
              ),
              FlatButton(
                color: Colors.white,
                textColor: Colors.blue,
                child: Text('OK'),
                onPressed: () {
                  //OKを押したあとの処理
                },
              ),
            ],
          );
        });
  }

  @override
  Widget build(BuildContext context) => Center(
    child: RaisedButton(
      child: Text('ダイヤログを表示'),
      onPressed: () {
        InputDialog(context);
      },
    ),
  );
}
```


丸々コピペしたら使えます。

AlertDialogのcontentにTextFieldをそのまま指定しているだけなので、実は意外とシンプル。
TextFieldの中身を取得したい場合は、TextEditingControllerで指定してください。
ER図について

# ER図とは？
Entitiy-relationship model
の頭文字をとったものです。
日本語でいうと、`実体関連モデル`といいます。

簡単にいうと、
`データベースの構造を可視化`してくれるものです。

※ ER図の作成はアプリ開発をする上で必要になります。

# ER図の作成手順
まず、①`モデル`を作ります。どんなモデルがあるのか？
次に、モデルに対してどんな②`カラム`(情報)を持たせるのか？
そして、③`関連付け`を行う（テーブルとテーブルがどのような関係にあるのか？）

①`モデル`(ここでは「テーブル」と定義します。テーブルとは簡単に例えるとデータの事です)
②`カラム`（データに必要な情報です）
③`関連付け`(データとデータの関係性です)

3つのことを考えて、作成する必要があります。

※ ER図に関して、より詳細の記事
https://qiita.com/ramuneru/items/32fbf3032b625f71b69d
https://qiita.com/yagi_eng/items/fac0e257317cea32d2d1

##### モデル(テーブル)
`どんなモデルを作るか`（どんなテーブルを作るのか）
例えば新規ユーザー登録機能を実装したい時は、
ユーザーを一括で管理するデータがあると思います。
それがユーザーモデル（テーブル）です。

##### カラム
`どんな情報を持たせるか`
ユーザー新規登録する時、
`ユーザー名、メールアドレス、パスワード`など入力する欄（情報）があります。
それがカラム（情報）です。

##### 関連づけ
`テーブルとテーブルの関連`

例えば、ユーザーの情報は1つのデータで管理されている。
同様に、商品の情報も1つのデータで管理されている。
ユーザーが商品を出品（或は投稿）することによって、商品という情報が商品データに追加される。
したがって、`ユーザーのデータと商品のデータは関係性があるということ。`

※ モデルとテーブルの詳細は、下記の記事を参照してください。
https://techacademy.jp/magazine/22033
https://rails-study.net/model/

# 完成図
![ER図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/943773/5ea3a7b8-d1b2-c395-1cd3-71469505b731.png)

#### 説明
上記が簡単なER図の完成図となっています。
まず、ユーザーというモデルがあります。

##### ユーザーモデルとカラム  
`PK`とは、`prime key(主キー)`といいます。
idがあることによって、ユーザーを識別する事ができます。  
id番号は、データベースにデータを登録する際に、連番で自動的につくものです。

※主キーであるidには1から始まる自然数が格納される。

ユーザーモデルは、ユーザー名`（カラム）`を持ちます。
新規登録する際に、ユーザー名は入力されます。
メールアドレス`（カラム）`もパスワード`（カラム）`も同様です。

※`カラム名は英語で登録`します。
※分かりやすいカラム名を推奨しましょう。

##### 商品モデルとカラム
ユーザーモデルと同じように`主キー`を持ちます。
商品名（カラム）と商品詳細（カラム）が存在します。

そして気になるのは、
`FK`という、`ユーザーid`です。

これを記述する理由は、
`誰が出品したのか？`（または投稿したのか？）ということを、
商品モデルに持たせる必要があります。

`外部キーFK（foreign_key）`として、
`ユーザーのid番号を商品モデルのカラムに追加`する事で、
誰が出品したのか（投稿したのか）識別する事ができるようになります。

##### 関連付け
最後に、テーブルとテーブルの関係を示すのが、
ER図の中央（ユーザーモデルと商品モデルに挟まれている）にある「線」の事です。
<br>

##### 線の意味を説明
ユーザーは、商品をたくさん持つ事ができます。
（一人のユーザーは、たくさんの商品を出品する事ができる）
これを1対多の関係、もしくは1:Nの関係と言います。

右側（商品モデル）の線先が三本線になっている事を「多」と表しています。
○ポチみたいなモノは「0」を表しています。
反対側（左側ユーザーモデル）の先端、2本の縦棒線は「1」を表しています。

今回のER図というのは、
`ユーザーは「0」以上の商品を持つ事`を表しています。
そして、`商品というのは必ず1人のユーザーに属する`こと。
というように可視化する事ができました。

これがテーブルとテーブルの関連付けを表す記述になります。

# まとめ
アプリケーション作成する前に、
ER図を先に完成させておけば、
アプリケーションを作成する際に生じる、
「あれ？何のテーブルが必要だったけ？」
「あれ？このテーブルとこのテーブルはどんな関係にしようとしていたんだっけ？」
みたいな事が、防げるようになります！

##### 可視化できると便利で見やすいですよね！
便利になるけど、ER図作成も少し時間がかかります💦笑

たくさんのデータを持つアプリケーションを作成する時は、
ER図作成することによって、有り難みがわかるようになります！
npmでcb.apply is not a function エラーが発生した対処

備忘録として。

### 現象
npmで何かパッケージをインストールしようとすると、以下のようなエラーが発生。
npmをアップデートしろとのエラーだが`npm update`や`npm instal`が同じようなエラーで実行できない。

```powershell
npm WARN npm npm does not support Node.js v15.9.0
npm WARN npm You should probably upgrade to a newer version of node as we
...
npm ERR! cb.apply is not a function 
...
```

### 環境
- Windows 10 pro
- Node.js バージョン 15.9.0 （Chocolateyからインストール）
- npm バージョン 7.5.3


### 原因
原因は、私の場合、昔にインストールしていたNode.js（アンインストール済み）のキャッシュが残っていたためのようでした。
npmのバージョンを`npm -v`で確認すると、本来7.5.3のはずが、6.0.0になっていました。残っていたキャッシュによりバージョン判定がうまくいっていなかったのでしょう。


### 対処
- `C:\Users\{ユーザー名}\AppData\Roaming`から`npm`, `npm-cache`フォルダを削除。
- 念のため、`npm cache clean --force`でキャッシュ消去
- Chocolateyからnode.jsを再インストール。
- npmをインストール。 `npm install -g npm@7.5.3`
【実験】GitLabのデータをNFSで管理する

[前回](https://qiita.com/fy406/items/f904241afea641950eac)の続きです。
今回は以前構築したNFSサーバーにGitLabのリポジトリデータ(プロジェクトやグループ等のデータ)を管理出来るように設定を行います。
GitLabのリポジトリデータは```/var/opt/gitlab/git-data```に格納されています。
やる事としてはこの```git-data```の中身をNFSのマウント先にコピーし、GitLabがこのNFSのマウント先を参照するように設定変更を行います。

# GitLabサーバーにNFSディレクトリをマウント
## NFSサーバーの設定
まずはGitLabのリポジトリデータを格納するNFSサーバー側で設定を行います。
```/home```配下等にGitLabのデータを格納するディレクトリを作成した後、```/etc/exports```ファイルに以下のような設定を追加します。

```ruby:/etc/exports
<GitLabデータを格納するディレクトリのパス> <GitLabサーバーのIPアドレス>(<オプション>)
オプション一例
rw:クライアントに書き込みを許可
async:非同期書き込みを有効にする
no_root_squash:クライアント側のroot権限にて実行可能とする
例:
/home/git-nfs 192.168.0.3(rw,async,no_root_squash)
```

設定を追加したらNFSサービスを再起動します。

```
sudo systemctl status nfs-server
sudo systemctl restart nfs-server
sudo systemctl status nfs-server
```

以上でNFSサーバー側の設定は完了です。

## GitLabサーバーにマウント
続いてGitLabサーバー側にてNFSサーバーで設定したディレクトリをマウントします。
```/mnt```ディレクトリ配下等にマウント先のディレクトリを作成し、以下コマンドでマウントを実施します。

```
sudo mount -t nfs -o rw <NFSサーバーのIPアドレス>:<NFSサーバーのGitLabデータ格納先パス> <マウントディレクトリへのパス>
例:
sudo mount -t nfs -o rw 192.168.0.2:/home/git-nfs /mnt/git-data-nfs
```

エラーなくマウントが実行できたら、次はGitLabのリポジトリデータをコピーします。
コピーは以下のコマンドで実行します。

```
sudo rsync -av /var/opt/gitlab/gitlab-data/repositories <マウントディレクトリへのパス>
例:
sudo rsync -av /var/opt/gitlab/gitlab-data/repositories /mnt/git-data-nfs/
```

上記コマンド実行後、NFSサーバーのGitLabデータ格納先の中に```repositories```ディレクトリが入っていれば成功です。
NFSサーバー側で確認がとれたら、```/etc/fstab```ファイルにマウントの設定を追加します。
```mount```コマンドだけだと次回サーバーを再起動した際に自動でNFSのマウントはされませんので、再度コマンドを実行し直す必要があります。
そのため、次回再起動時にも自動でマウントする為に```fstab```ファイルに設定を追加します。

```ruby:/etc/fstab
<NFSサーバーのIPアドレス>:<NFSサーバーのGitLabデータ格納先パス> <マウントディレクトリへのパス> nfs <オプション>　0 0
例:
192.168.0.2:/home/git-nfs /mnt/git-data-nfs nfs defaults 0 0
```

これで次回サーバーを起動した際に自動でマウントされるようになります。

# リポジトリデータの格納先の設定変更
リポジトリデータの移動が完了しましたので、次はこのリモートディレクトリをGitLabが参照出来るように設定します。
事前に以下のコマンドでGitLabサービスを停止します。

```
gitlab-ctl status
gitlab-ctl stop
gitlab-ctl status
```

続いて```/etc/gitlab/gitlab.rb```ファイルにリポジトリデータの参照先を変更する設定を追加します。
viエディタ等で```gitlab.rb```ファイルを開き、```/git_data_dirs```という単語で***2回***検索します。
該当の設定の上に同じワードの異なる設定があるので2回検索する必要があります。
該当の設定はコメントアウトされているので、設定の左側に記載されている```#```を外し、以下の様な設定に変更します。

```
git_data_dirs({ "default" => { "path" => "<マウントディレクトリへのパス>" } })
```

設定後、```gitlab-ctl reconfigure```コマンドでリコンフィグを実行します。
エラーなく完了しましたら以下のコマンドでGitLabサービスを起動します。

```
gitlab-ctl status
gitlab-ctl start
gitlab-ctl status
```

全てのサービスが```run```になっていれば正常に起動しています。
以上でGitLabリポジトリデータのNFSサーバー管理が実現できました。
マイナスのメタレベル

私は[以前の記事](https://qiita.com/SaitoAtsushi/items/d20199bfdd2d09211a5d)で識別子が束縛を持つかどうかを判定するマクロを書きました。 更にコードを整理しなおして [Github に置いて](https://github.com/SaitoAtsushi/r6rs-binding-check)います。

具体的な判定は手続きとして切り出してしまったので、マクロ定義の側はそれを呼出しているだけです。

```
(define-syntax bound?
  (lambda(ctx)
    (syntax-case ctx ()
      ((_ id)
       (identifier-bound? #'id)))))
```

`bound?` の実体はほぼ `identifier-bound?` に投げなおしていることがわかると思います。

このとき興味深いことがありました。 

このマクロ `bound?` がプログラムで使われるとき、渡される識別子のフェイズは 0 です。 `identifier-bound?` はフェイズ 1 として `import` しますから、 `identifier-bound?` の中で他の識別子 (を表す構文オブジェクト) と比較するときにはその識別子は `(meta -1)` としておくことで 1 から -1 して 0 になり、フェイズ 0 の識別子と比較するのに適切な状態となります。

この場合は処理の都合上、 `datum->syntax` `syntax` `quote` と比較しているので、これらは `(meta -1)` として `import` する必要がありました。

[マイナスのメタレベルが存在しうる](http://www.phyast.pitt.edu/~micheles/scheme/scheme22.html#negative-meta-levels)ということは知っていたのですが、自分が書いたプログラムの中に現れたのは初めてなので面白い体験でした。
GO言語から初めてみました(^O^;)

#とにかく右も左もわからず、がむしゃらに[本](https://www.amazon.co.jp/%E3%81%9F%E3%81%A3%E3%81%9F1%E6%97%A5%E3%81%A7%E5%9F%BA%E6%9C%AC%E3%81%8C%E8%BA%AB%E3%81%AB%E4%BB%98%E3%81%8F-Go%E8%A8%80%E8%AA%9E-%E8%B6%85%E5%85%A5%E9%96%80-%E6%B8%85%E6%B0%B4%E7%BE%8E%E6%A8%B9/dp/4297116170)を見ながら打ち込んでみます。プログラミング超初級の方の為の内容です。そして↓のコードはGO言語になります。
```hello.go

package main

import "fmt"

func main() {
    fmt.Println("はじめまして！")
}
```

package(パッケージ)の中にmain(メイン)という関数？があるってことでいいのかな？

import(インポート)はプログラミングでライブラリ？を読み込むことを示すらしい。で、（””）このダブルクォーテーション内にあるｆｍｔ（エフエムティー）というのもパッケージの１つでフォーマット（書式）を思わせるよう、ターミナル？に内容を表示する為の関数？を定義しているようです。

func(ファンク)は関数？を示す語で、横にmain(メイン)を付けるのが決まりだそうです。

そしてｆｍｔパッケージにあるPrintln(プリントライン)という関数？で（はじめまして！）の括弧内の内容を出力させます。

----------------------------
**＜関数＞**
とは、色々な処理をまとめた物でGO言語では１つの「データ型」になります。１度入力した物を皆でシェアしたり、他の場面で使ったり、２度書く必要が無い優れものです。関数を作ることを（関数を定義する）といいます。

**＜ターミナル＞**
とは、コンピュータに文字で指示を行う（コマンド）為のプログラムで、「端末」とも呼ばれます。macOSやLinuxなどのOSで利用され、Windowsでは「コマンドプロンプト」になります。

**＜ライブラリ＞**
とは、プログラム？の部品を集めたファイルのこと。

**＜プラグラム＞**
とは、コンピュータに対する命令（処理）を記述したもの。

----------------------------
[良い記事が書けるよう頑張ります。次の記事へ→](https://qiita.com/ume-bar/items/3f92fbb223e93bd5df3f)
Rethinking few-shot image classification: a good embedding is all you need 


- Yonglong Tian, Yue Wang, Dilip Krishnan, Joshua B. Tenenbaum1, Phillip Isola, MIT CSAIL, Google Research
- https://arxiv.org/pdf/2003.11539.pdf

# 概要
few shot learningのためにmeta-learningの手法が提案されているが、特に凝ったことをしなくても普通にsupervised, unsupervisedでrepresentation learningをして、線形クラス分類機をつけるだけで十分行ける、と言う主張。

非常に面白いのは、エンコーダのdistillを繰り返すことで、representationを改善できるということ。この際distill先のネットワークは元のネットワークと全く同じアーキテクチャを用いる。新しいネットワークは、通常のラベルに対するクロスエントロピーロスと、distill元のエンコーダ関数とのKLロスの重み付き加算を最小化するように学習する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412142/cbe4878b-a8c1-5a4a-a5fa-50c77721fa66.png)

この手法は、下の論文で提案されているらしい。

Tommaso Furlanello, Zachary Chase Lipton, Michael
Tschannen, Laurent Itti, and Anima Anandkumar. Bornagain neural networks. In ICML, 2018. 3, 4, 7

https://arxiv.org/abs/1805.04770

# 所感
- MAMLみたいなことをしなくてもOK、というのは結構強い主張では?
- self distill がそれほど有用だというのは今ひとつ直感的に納得行かないものがある。上の論文を読んでみよう。