OmniAICreator/Qiita-1.07M huggingface dataset:
Flutter 住所 or 郵便番号から緯度経度を取得する


### Flutterで住所or名称or郵便番号から緯度経度を取得する

検索しても、なかなか出てこなかったのでメモ代わり

https://pub.dev/packages/geocoding

Null Safety 対応バージョン
`geocoding: ^2.0.0`

Null Safety非対応バージョン
`geocoding: ^1.0.5`

``` dart
final searchWord = '東京タワー';
List<Location> locations = await locationFromAddress(searchWord);
print(locations.first.latitude);  // 35.6585805
print(locations.first.longitude); // 139.7454329

final zipCode = '105-0011';
locations = await locationFromAddress(zipCode);
print(locations.first.latitude);  // 35.6571637
print(locations.first.longitude); // 139.7485979
```
Google Apps Scriptで「Exception: Service Spreadsheets failed while accessing document with id」というエラーが発生

Google Apps Scriptを使ってGoogleスプレッドシートで作成したグラフ画像を自動でSlackに定期配信するbotを作っていたのですが

```
Exception: Service Spreadsheets failed while accessing document with id "〇〇〇〇"
```

というエラーが出て動かなくなってしまいました。

ネットで調べてみるとスプレッドシートの情報量が多すぎる場合やGoogle側のサーバーのエラーで起こるとのこと。

とはいえスプレッドシートの情報量は最小限に抑えてあるし、他のグラフ画像だと上手く実行されるのでGoogleのサーバーの問題とも考えにくい。

別に新しくファイルを作って同じコードを試しても変化なし。

とはいえプログラムファイルによってこのエラーが出たり出なかったりしていたので原因を調べていると

"１つのグラフに２つ以上の軸がある時"

このエラーが発生することが判明。

グラフの軸を１つにしたらすぐに直りました。

同じエラーでお困りの方は是非参考にしてみてください。
wordpressの教科書でサイドバーがうまく表示されない時確認箇所

教科書どおりにコード打ったのに表示が全然違う時の対処法です。

今回こんな表示になりました。![toyohiro.xyz_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/571184/42c82766-c3f4-dd22-41b1-140a1eceaca7.png)


＜状況＞
・バックグラウンドの表示がおかしくなった。
・サブメニュー画面で重大なエラー表示が出ている。

＜確認事項＞
・編集したコードの見直し（スペルミス、php打ち間違いがないか）

＜原因＞
・コードには全く違いはなかったことで盲点になっていた部分が１つ！
それは、投稿記事のカテゴリー部分です。![スクリーンショット 2021-03-17 22.42.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/571184/b94761fd-8bdc-7d6a-f624-a8cdfc2245d4.png)


カテゴリーのスラッグでスペルミスをしていました( ；∀；)
ここが間違ったことで記事が読み込めなかったみたいです。

コードはスペルチェッカーなどでスペルミスを見つけやすいですが、
wordpressの設定部分は、自分で確認に行かないとわからないので
可能性の一つとして片隅に留めておくと良いかもです。( ^ω^ )
Mac故障に備えた重要ファイルのバックアップ

# 経緯
Macのバックアップをとっていない状態で急に修理に出すことになってしまって焦ったので今後のためにメモ。
# TimeMachineの利用
可能ならTime Machineを利用するのが良い。Time Machineなら、設定ファイルから引き継げるので完全な形で復元できる。
https://support.apple.com/ja-jp/HT201250

難点は容量が多いとバックアップに時間がかかったり、普段からスナップショットで差分更新しているとネットワークに負荷かかったりするのでそこは容量・時間・緊急度と相談する必要がある。

# 重要ファイルだけ移行
ローカルの環境を一度綺麗にしたかったことと、それなりに容量があったため今回はこちらだけ外付けHDDに保存。

* .aws配下
    * config
    * credentials
    * キーペア（.aws配下ではないが関連として記載）

* .sshの配下
    * id_rsa.pub(公開鍵)
    * id_rsa(秘密鍵)
    * config(ホスト情報記載)
    * known_hosts

* 仮想環境ファイル
    * Vagrant `vagrant package`でパッケージ作成
    * Docker `docker commit`と`docker save`使う

* その他（ファイル意外も）
    * google日本語入力設定のエクスポート
    * gitのコミットし忘れないように
    * vscodeのバックアップ

これぐらい移しておいたら意外となんとかなった。というか、環境がすっきりしたので良かったかもしれない。
vscodeのvimでvimiumのようにジャンプする

# 概要
vscodeでvim拡張機能をインストールしている人はほぼ間違いなくeasymotion機能を使っているかと思います。めちゃくちゃ便利なんですが、easymotionはジャンプしたい単語の文字を入力して、いくつかの単語の候補の中から該当のラベルを入力してそこにジャンプするという動作が基本であり、私の一番求めているキー操作ではなかったので、キーバインドを工夫（というほどのものでもないですが）しました。
ちなみに私の一番求めているキー操作はvimiumのリンク先へジャンプするキー操作です。

# vimiumのジャンプ
chromeのextensionであるvimiumでは、リンク先へジャンプする場合に以下のキー操作でジャンプします。

1. fキーを入力
2. 画面上の全てのリンクにラベルが振られる
3. ジャンプしたい（開きたい）リンクのラベルを入力してジャンプする

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305269/7868275b-4257-2c16-58f0-fb3d7d1008a5.png" width=50%>

上記の画像はvimiumでfキーを入力したところですが、画面上の全てのリンクにラベルが振られていますよね、後はジャンプしたいリンクのラベルを入力するだけです。vscodeのジャンプでも全く同じ操作でジャンプしたいです。

# vscodeのeasymotionでのジャンプ
easymotionのインストール方法は他に詳しいサイトがたくさんあるので割愛するとして、インストール後に以下の設定をsettings.jsonに追加します。

```settings.json
    "vim.normalModeKeyBindingsNonRecursive": [
        {
            "before": ["f"],
            "after": ["leader", "leader", "leader", "b", "d", "w"]   
        },
```

そうするとvscodeでもvimiumのリンクジャンプと全く同じキー操作に！

1. fキーを入力
2. 画面上の全ての単語にラベルが振られる
3. ジャンプしたい単語のラベルを入力してジャンプする

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305269/731df3f6-a755-43cd-7abd-e719617d0ddd.png" width=50%>

上記の画像はvscodeでfキーを入力したところですが、全ての単語にラベルが振られていますので、後はラベルを入力すればその単語にジャンプします。

ちなみにこの設定は、本家vimのeasymotionでは以下のような設定と等しいです。

```init.vim
noremap f <Plug>(easymotion-bd-w)
```
bdはbidirectional(双方向)、wはwordの意味っぽいです。
Xcodeで実機テストができなくなりました。"Command PhaseScriptExecution failed with a nonzero exit code"というエラー

先日挫折しかけたSwiftでのエラーの解決方法が判明したので、メモとして残しておきます。

```
Command PhaseScriptExecution failed with a nonzero exit code
```
まずこんなエラーが出てビルドできなくなりました。

```swift
PhaseScriptExecution [CP]\ Embed\ Pods\ Frameworks /Users/◯◯◯/Library/Developer/Xcode/DerivedData/xxxxxxxxxx/Build/Intermediates.noindex/demo2.build/Debug-iphoneos/demo2.build/xxxxxxxxxxxxxxxxxxx
    cd /Users/◯◯◯/Documents/GitHub/xxxxxxxxxx
    /bin/sh -c /Users/◯◯◯/Library/Developer/Xcode/DerivedData/xxxxxxxxxx/Build/Intermediates.noindex/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

mkdir -p /Users/◯◯◯/Library/Developer/Xcode/DerivedData/xxxxxxxxxxxxxxxxxxxx/Build/Products/Debug-iphoneos/xxxxxxxxxxxxxxxxxxxx/Frameworks
rsync --delete -av --filter P .*.?????? --links --filter "- CVS/" --filter "- .svn/" --filter "- .git/" --filter "- .hg/" --filter "- Headers" --filter "- PrivateHeaders" --filter "- Modules" "/Users/◯◯◯/Library/Developer/Xcode/DerivedData/xxxxxxxxxxxxxxxxxxxx/Build/Products/Debug-iphoneos/AppAuth/AppAuth.framework" "/Users/◯◯◯/Library/Developer/Xcode/DerivedData/xxxxxxxxxxxxxxxxxxxx/Build/Products/Debug-iphoneos/xxxxxxxxxxxxxxxxxxxx/Frameworks"
building file list ... done
deleting AppAuth.framework/_CodeSignature/CodeResources
deleting AppAuth.framework/_CodeSignature/
AppAuth.framework/

sent 146 bytes  received 26 bytes  344.00 bytes/sec
total size is 441267  speedup is 2565.51
Code Signing /Users/◯◯◯/Library/Developer/Xcode/DerivedData/xxxxxxxxxx/Build/Products/Debug-iphoneos/xxxxxxxxxxxxxxxxxxxx/Frameworks/AppAuth.framework with Identity Apple Development: ◯◯◯ (xxxxxxxxxx)
/usr/bin/codesign --force --sign xxxxxxxxxxxxxxxxxxxx  --preserve-metadata=identifier,entitlements '/Users/◯◯◯/Library/Developer/Xcode/DerivedData/demo2-cuxtcawdfrqcqafwplsfrvhdggep/Build/Products/Debug-iphoneos/xxxxxxxxxxxxxxxxxxxx/Frameworks/AppAuth.framework'
Warning: unable to build chain to self-signed root for signer "Apple Development: ◯◯◯ (xxxxxxxxxx)"
/Users/◯◯◯/Library/Developer/Xcode/DerivedData/xxxxxxxxxxxxxxxxxxxx/Build/Products/Debug-iphoneos/xxxxxxxxxx/Frameworks/AppAuth.framework: errSecInternalComponent
Command PhaseScriptExecution failed with a nonzero exit code
```

ネットで調べて出てきた内容↓

・すべてのキーチェーンをロックしてから実機テスト
・Macの再起動
・Xcodeの再起動
・iPhoneの再起動
・Apple Developerで証明書の作り直し
・XcodeからApple IDをログアウト

といったことは試しましたが特に変化はなし。

自分一人では難しいと思いQAサイトにて質問↓↓

https://ja.stackoverflow.com/questions/74613/xcode%e3%81%a7%e5%ae%9f%e6%a9%9f%e3%83%86%e3%82%b9%e3%83%88%e3%81%8c%e3%81%a7%e3%81%8d%e3%81%aa%e3%81%8f%e3%81%aa%e3%82%8a%e3%81%be%e3%81%97%e3%81%9f-command-phasescriptexecution-failed-with-a-nonzero-exit-c/74675#74675

https://teratail.com/questions/327395

心優しい方々が相談に乗ってくれるもエラーは変わらず。

その後試行錯誤していたらApple DeveloperのCertificatesに

```
Worldwide Developer Relations Certificate Authority (Expiring 02/07/2023)
```
というダウンロードファイルを発見。

これをダウンロードしてその他のCertificatesやprofile関連のファイルをすべて０からやり直し。

するとエラーが解決しました。

## おすすめ情報

https://wagtechblog.com/programing/swift-iphone-application-school

https://wagtechblog.com/programing/swift-textbook.html
図書館で借りた本たちの記録

#マーケティング
####シュガーマンのマーケティング３０の法則　お客がモノを買ってしまう心理的トリガーとは　ジョセフ・シュガーマン／著　フォレスト出版

マーケティングの基礎がほぼ網羅されている。
目次がとても面白い。
が、正直現代のマーケティング関連の書籍を読んでたら真新しい情報はそんなになかったので、全部は読んでない。
でもマーケ領域に関心があるなら必読書なのではないかと思う

#Adobe関連
####逆引きPhotoshop
「非破壊的デザイン」や
流し読みするだけで、「あ、Photoshopでこんな加工の仕方もできるんだ」と勉強になること必至の一冊。


####ズボラPhotoshop
「いかに楽にそれっぽく作るか」をコンセプトにしたPhotoshop教材。
ネットにあるフリー画像を使って表紙にあるような加工をしていく。
PF作成の時期とかぶったので、パラパラ見るだけになってしまったが良書だった。


#経済学
####ＷＯＲＫ　ＤＥＳＩＧＮ 行動経済学でジェンダー格差を克服する
[YOURTRUSTの代表:岩崎由夏さんのnote](https://bityl.co/69xA)で発見した行動経済学に基づいた行動デザインに関する書籍。
ずっと勉強したいと思っていた「行動経済学」というワードに惹かれて借りることにした。
予約中。

#コミュニケーション
####たったの3秒 あなたの評価をガラッと変える声がけ習慣
図書館にいてふと目に止まったので借りてみた本。
会社において「どうして自分の方が仕事ができるのに、あいつの方が評価されてるんだろう」と
感じている人におすすめしたい。
どこの会社に属するにしても結局は「人」と「人」とのコミュニケーションが大切であり、
評価は好き嫌いで簡単に変わってしまうといったことが書いてある。
こういう時はこうしろ！というのが具体的に書いてあり、参考になるなと思った。
ただリモートが基本の勤務体制になるとまた色々と変わりそうだよね。

#生き方
####覚悟の磨き方
吉田松陰の教えが書いてある。
彼については銀魂に出てくる打ち首になった先生くらいの知識しかなかったが、
前書きの彼の人物像に関する考察が面白かった。
`今ここで海を渡ることが禁じられているのおは、たかだか江戸の二五〇年の常識にすぎない。今回の事件は。日本の今後三千年の歴史に関わることだ。くだらない常識に縛られ、日本が沈むのを傍観することは我慢ならなかった。`
と黒船来航の際、もう日本は終わりだというお通夜ムードの中、勝てないなら相手から学ぶべきだと一人で黒船にいき、「教えてくれ」と言って米国人を驚かせたこと

当時、一流の教師と教材が揃った塾もあったにも関わらず、
彼が手作りで弟子と一緒に作った最低限の教材のみの松下村塾から歴代総理大臣を何人も出した異例の業績を出したこと

牢屋に入れられている間にも生きる希望を失っている囚人たちを弟子にとって生き方を説いていたこと



こんな素敵な人だったんだなと思った。
インスタンスメソッドとクラスメソッド

#はじめに
Railsチュートリアルを進める中で、少しわかりにくかったのでまとめてみることにしました。

#違い
**インスタンスメソッド**
レシーバがあるメソッド
（レシーバとは.の前に書かれたメソッドを呼び出すオブジェクト）

```
user.name
[1.2.3].length
```

**クラスメソッド**
レシーバがクラスであるメソッド

```
User.new
```
newがクラスメソッド
上記の例では、Userクラスのオブジェクトを作成

#クラスメソッドの定義方法
Railsチュートリアル9章でも出てきますが、selfを使って２種類の方法で定義することができます。

①メソッド名の前にselfを記述する

```
class User < ApplicationRecord
・
・
  def self.new_token
    SecureRandom.urlsafe_base64
  end
```
self=Userとなる

②class << self
複数のクラスメソッドを書く際は、こっちの方が便利。

```
class User < ApplicationRecord
  .
  .
    def new_token
      SecureRandom.urlsafe_base64
    end
 ```
class << selfを記述しておくことで、それぞれのクラスメソッドにはselfはいらない。

ちなみに

```
def User.new_token
```
と、クラス名をそのまま記述する方法でも良いが、クラス名が変わった際に大変。

#まとめ
|名前|定義方法|呼び出し|
|:---:|:---:|:---:|
|インスタンスメソッド|def メソッド名|インスタンス.メソッド|
|クラスメソッド|def self.メソッド名|クラス.メソッド|
【React Hooks】useEffectをざっくり学ぶ

今日はuseEffectをざっくり学んでいきます！
#useEffectとは

useEffectは関数コンポーネント内で実行することができる関数です！
これだけだと分かりませんよね。。。

componentDidMount()とcomponentDidUpdate()とcomponentWillUnmount()を
1つにまとめて書くことができる関数です！
詳細の記述はチュートリアルをみていただき、ここではざっくり理解して頂ければと思います

要は、renderした後に実行される特別な関数です！
実際にコードを書いていきましょう！

#useEffectの書き方
useEffectの書き方が4パターンあります
一つずつ紹介していきます

###パターン①
renderされるごとにコールバック関数が呼ばれ、
return以降はUnmountする際に実行される

```

useEffect(() =>{
    console.log("render")
    return() => {
        console.log("Unmount")
    }
})
```

###パターン②
マウント時のみ表示される
要は一番最初だけ実行されます！ポイントは[]を空欄にすることです！
**この副作用がコンポーネント内のどの値にも依存していないということを React に伝えることになります。**
↑チュートリアルにも記載があるので確認してみてください！[Reactチュートリアル](https://ja.reactjs.org/docs/hooks-reference.html#useeffect)

```
useEffect(() =>{
    console.log("render")
},[])
```

###パターン③
①と②の複合ですね！
一番最初のrenderが終わった後に一度だけ実行され、クリーンアップの際にreturn以降の関数が実行されます！

```
useEffect(() =>{
    console.log("render")
    return() => {
        console.log('Unmount')
    }
},[])
```

###パターン④
最後は[]内で指定した値が変更になった時にのみ実行されます！
今回だとtimerが変更した時にのみuseEffectが実行されます！
指定することで余計な実行を避けることができます！

```
 const [timer,setTimer] = useState(0);

useEffect(() =>{
    console.log("render")
},[timer])
```


#実際に書いてみた
今回は1秒毎の数字が増えていき、ボタンを押すと数字が表示されなくなるコードを書いていきます！

```CountContainer.js
import React,{useState} from 'react'
import Count from './count'

const CountContainer = () => {

    const [bool,setBool] = useState(true);
    return (
        <div>
            
            <button onClick={()=>setBool(!bool)}>click</button>
            {bool && <Count/>}
        </div>
    )
}

export default CountContainer

```
まず大枠の`CountContainer.js`を作り、その中に`Count.js`を読み込む。
ここではtrueかfalseをuseStateで設定する
trueなら`Count.js`を表示するコードを作成しました
→`{bool && <Count/>}`


```Count.js
import React,{useState,useEffect} from 'react'

const Count = () => {
    const [timer,setTimer] = useState(0);

    const time = () => {
        setTimer(prevTimer => prevTimer + 1)
    }

  useEffect(() =>{
      const interval = setInterval(time,1000)
      return() =>{
          clearInterval(interval);
      }
  })

    return (
        <div>
            <p>timer : {timer}</p>
        </div>
    )
}

export default Count

```

次にcount.jsの中身です！
ここではuseEffectについてみていきます！
`const interval = setInterval(time,1000)`で1秒毎に1つずつ数が増えていく記述してます！
`return() =>{clearInterval(interval);}`とすることでクリーンアップする際に走る関数です！
こうすることでボタンが押されるとリセットされるイメージですね！


#最後に



useEffectを使う事で簡単に実装することができました！
ざっと復習したいときに見て頂ければと思います！
Railsチュートリアル9章まとめ

#はじめに
Railsチュートリアル9章を勉強していて、自分の中に落とし込むためにまとめてみることにしました。

#前提知識
HTTP通信は基本ステートレスな通信
ステートレスとは・・・ページ遷移の際など前の情報を引き継がない

しかし、ショッピングサイトのカートの中身など引き継いでいきたい場合もある。
その場合、ステートフルにしないと困る。
ここで用いられるのがsession管理。

session:接続中のユーザーの行動履歴
cookie:自分が誰なのかを証明するもの
 

#9.1.1 記号トークンと暗号化
・Remember me機能とは
ブラウザを閉じた後でもユーザーのログイン状態を保持するもの
例.Twitter


 
 
記憶トークン（remember token）を生成し、cookiesメソッドによる永続的cookiesの作成や、安全性の高い記憶ダイジェスト（remember digest）によるトークン認証にこの記憶トークンを活用する。
cookieには、セキュリティの観点からパスワード等をそのまま保存するのではなく、トークンを利用する。

```

class AddRememberDigestToUsers < ActiveRecord::Migration[6.0]
  def change
    add_column :users, :remember_digest, :string
  end
end
```

記憶ダイジェスト用にマイグレーションを作成する。これでdbにremember_digestカラムが追加される。
記憶ダイジェストとは、記憶トークンをそのままDBに保存するのではセキュリティ的に問題があるので、ダイジェストに変換したもの

```

  def User.new_token
    SecureRandom.urlsafe_base64
  end
end
```

新しいトークンを作成するため、User.new_tokenメソッドを定義
この際、urlsafe_base64メソッドを使う。(ランダムな文字列がほしいだけ）

```
class User < ApplicationRecord
  attr_accessor :remember_token
  .
  .
  .
  def remember
    self.remember_token = ...
    update_attribute(:remember_digest, ...)
  end
end
```

仮想のremember_token属性を作成。
rememberメソッドの一行目では、ローカル変数と区別するために、self.remember_tokenと記述。



```
  # 永続セッションのためにユーザーをデータベースに記憶する
  def remember
    self.remember_token = User.new_token
    update_attribute(:remember_digest, User.digest(remember_token))
  end
end
```
rememberメソッドを使って、ユーザーに記憶ダイジェスト(remember_digest)を追加！
ここでは、remember_tokenをUser.digestで変換し登録している。

#9.1.2 ログイン状態の保持
9.1.1でUser.rememberメソッドを定義し動作できるようになったため、ユーザーの暗号化済みIDと記憶トークンをブラウザの永続cookiesに保存して、永続セッションを作成する準備ができた。
　
これを実際に行なっていくためにcookiesメソッドを使用。
cookiesは、１つのvalue(値)とexpires(有効期限)からなる。このexpiresを20年にすることで実質永続的なセッションを作ることが可能。

## cookiesの設定

参照リファレンス:https://docs.ruby-lang.org/ja/latest/class/CGI=3a=3aCookie.html

```
cookies[:remember_token] = { value:   remember_token,
                             expires: 20.years.from_now.utc }
```
PrusaSlicerのプリンター設定

**1. Gコードの最初**
ノズルからのタレを減らすために先にヒートベッドを温めるようにしています。
また、プリント前にクリーニングがしやすい位置にノズルを移動させます。

	M862.3 P "[printer_model]" ; printer model check
	M862.1 P[nozzle_diameter] ; nozzle diameter check
	M115 U3.8.1 ; tell printer latest fw version
	G90 ; use absolute coordinates
	M83 ; extruder relative mode
	M140 S[first_layer_bed_temperature] ; set bed temp
	M190 S[first_layer_bed_temperature] ; wait for bed temp
	G28 W ; home all without mesh bed level
	G80 ; mesh bed leveling
	G1 Y-3.0 Z60 F1000.0 ; go outside print area
	M104 S[first_layer_temperature] ; set extruder temp
	M109 S[first_layer_temperature] ; wait for extruder temp
	G1 Y-3.0 Z0 F1000.0 ; go outside print area
	G92 E0.0
	G1 X60.0 E9.0 F1000.0 ; intro line
	G1 X100.0 E12.5 F1000.0 ; intro line
	G92 E0.0
	M221 S{if layer_height<0.075}100{else}95{endif}
***
**2. 終了Gコード**
標準を使用

	G4 ; wait
	M221 S100 ; reset flow
	M900 K0 ; reset LA
	{if print_settings_id=~/.*(DETAIL @MK3|QUALITY @MK3|@0.25 nozzle MK3).*/}M907 E538 ; reset extruder motor current{endif}
	M104 S0 ; turn off temperature
	M140 S0 ; turn off heatbed
	M107 ; turn off fan
	{if max_layer_z < max_print_height}G1 Z{z_offset+min(max_layer_z+30, max_print_height)}{endif} ; Move print head up
	G1 X0 Y200 F3000 ; home X axis
	M84 ; disable motors

***
**3. レイヤー変更前のGコード**
ファーストレイヤーのフローのみ変更できるようにM221を追加しています。
例では120に設定しています。

	;BEFORE_LAYER_CHANGE
	G92 E0.0
	;G4 P1
	;[layer_z]
	M221 S{if layer_num<1}120{else}95{endif}

***
**4.レイヤーチェンジ後のGコード**
標準を使用

	;AFTER_LAYER_CHANGE
	;[layer_z]
Twitter API で Request email address from users を Enable にしてもemailが取得できなかった

Twitter Developers でTerms of service と Privacy Policy に記入し、`Request email address from users is`をEnableにしても`auth.info`の中に`email`が返ってこなかった。

原因は`omniauth-twitter`のバージョンが古かったから。Twitter API の仕様変更で、`include_email`のクエリを付与しないとメールアドレスを返してくれなくなったらしく、これは`omniauth-twitter`の`1.2.0`では対応していない。
https://stackoverflow.com/questions/33292997/getting-email-back-from-twitter-oauth-with-devise-and-rails

`1.4.0`にバージョンを上げることで解決した。

```gemfile.ruby
gem 'devise'
gem 'omniauth'
gem "omniauth-rails_csrf_protection"
gem 'omniauth-twitter', '1.4.0'
gem 'dotenv-rails'
gem 'devise-i18n'
gem 'devise-i18n-views'
```

```console
$ gem list

omniauth (1.9.1)
omniauth-oauth (1.2.0)
omniauth-rails_csrf_protection (0.1.2)
omniauth-twitter (1.4.0, 1.1.0)
```

なぜか最新のomniauthではエラーがでて1.9.1になっている‥。

そもそものRails6へのdeviseとomniauth-twitter導入は以下の記事
https://qiita.com/cigalecigales/items/16ce0a9a7e79b9c3974e

## その他の参考記事
https://v-crn.hatenablog.com/entry/2019/08/26/OmniAuth%E3%81%AB%E3%82%88%E3%82%8BTwitter%E8%AA%8D%E8%A8%BC%E6%A9%9F%E8%83%BD%E3%81%AE%E5%AE%9F%E8%A3%85_%7C_Rails_%7C_Devise_%7C_email%E5%8F%96%E5%BE%97
Azure Static Web Apps が Azure DevOps からデプロイできるようになった

Azure の静的サイトホスティング環境である [Azure Static Web Apps](https://docs.microsoft.com/ja-jp/azure/static-web-apps/overview) の売りのひとつは、最初から GitHub と統合されていて、簡単なデプロイの設定をするだけで GitHub Actions と連動して CI/CD が組める点にありました。

しかし、Azure を使っているユーザーには、Azure DevOps でコードを管理している場合も多く、これは Static Web Apps のプレビュー開始以後の最もポピュラーな要望のひとつでもありました（Issue の 5番なのでプレビュー開始当初からの要望ですね）。

- https://github.com/Azure/static-web-apps/issues/5

執筆時点では公式の発表はありませんが、 [Azure Functions Live - Mar 2021](https://www.youtube.com/watch?v=xEYQBPo11iI) で説明されていましたので、そちらもご覧いただければと。

そして、既に Azure DevOps からデプロイができる環境が整いつつあり、実際に検証も成功したのでメモを残しておきます（近日中に正式手順が公開されると思うのでこの記事の方法はすぐに陳腐化すると思います）。

### 追記(2021.4.2)

公式手順が公開されましたので、以下ドキュメントに記載の手順に沿って実行することをおすすめします。
- [Tutorial: Publish Azure Static Web Apps with Azure DevOps](https://docs.microsoft.com/ja-jp/azure/static-web-apps/publish-devops)

## リソースの作成

まず、Static Web Apps のリソースを作成します。執筆時点では、UI からのデプロイは GitHub にしか対応していないので、Azure CLI で設定がほぼ空のリソースを作成します。

リソースグループ（以下例では `rg-xxx`）は事前に作っておき、以下の az コマンドを実行します。

```sh
az staticwebapp create -l westus2 -n swa-devops-vue -g rg-xxx -s "" -b "" --token "-"
```

`-s` と `b` にブランクを指定して、 `--token` にハイフンをいれているあたりがなんともハックな感じがしますね。

数分もすればリソースができるので、このまま放置して Azure DevOps 側の設定に移ります。

### パイプラインの設定

デプロイ対象のコードが Azure Repos など Azure DevOps で管理できていることを前提に、Azure Pipelines の設定をしていきます。

Azure Pipelines の画面から、`New Pipeline` をクリックし、Configure のステップで `Starter pipeline` を選択し、以下のように YAML を編集します。

```yaml
trigger:
  - main
pool:
  vmImage: ubuntu-latest
steps:
  - task: AzureStaticWebApp@0
    inputs:
      app_location: /
      output_location: dist
    env:
      azure_static_web_apps_api_token: $(deployment_token)
```

設定のポイントは以下2点です。

- task に `AzureStaticWebApp@0` を指定していること。これが Static Web Apps へのデプロイを実行するタスク本体になります
- `app_location` や `output_location` はフレームワークに合わせて設定します（上記は Vue.js のデフォルト設定）

## デプロイ用のトークンを設定

Azure ポータルに移動して、az コマンドで作成したリソースに移動します。なんとも不思議な何も設定が無い Static Web Apps ができていると思います。

Overview メニューの上に `Manage deployment token` があるのでクリックして、表示されるトークン文字列をコピーしておきます。

![swa-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30318/efc679e4-94c1-5207-6c68-4b83bfe546fa.png)

Azure DevOps に戻って、Pipeline の設定画面右上ので `Variables` をクリックして、トークンを以下のように設定して保存します。

- Name: YAML で定義したトークン名。上記の例だと `deployment_token`
- Value: Azure Portal でコピーしたトークン文字列

あとは、Pipeline を `Run` ボタンで実行して数分待てば、以下のようにビルドとデプロイが完了します。

![swa-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30318/473bbcfd-d41c-ccfb-9e81-2d565fa4eef2.png)

## 動作確認

Azure Portal の Static Web Apps リソースに戻って、`Environments` メニューでデプロイ結果を確認すると、以下のように Azure DevOps に紐づいていることがわかります。

![swa-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30318/6da4d7ba-db7e-028f-0bf5-96ef8c64b12d.png)

あとは、`Browse` クリックで正しく開発しているアプリケーションの画面が表示されれば OK です。

おそらく近いうちに UI から Azure DevOps やその他のリポジトリが選べるようになると思いますが、すぐに試したい方はこの方法で動作確認してみてはいかがでしょうか。
MACのターミナルからWAN側にssh接続しようとすると「client_loop: send disconnect: Broken pipe」となる場合の対応

# 現象

- MACのターミナルからWAN側にssh接続しようとすると「client_loop: send disconnect: Broken pipe」というエラーになってしまう
    - LAN内では問題なくssh接続できる
    - LAN内のRaspberry Piを踏み台にするとWAN側にssh接続できる

# 原因

- IPQoS関連ということがわかりましたがIPQoSについては割愛します。。

# 対策

- ~/.ssh/configに以下を指定することで接続できるようになりました

```
Host *
     IPQoS 0
```
markdownまとめ1

# markdownについて
初投稿になるので、markdownについてアウトプットしていく。
## そもそもmarkdownって？
markdownは、文書を記述するための軽量マークアップ言語のこと。
簡単な書式で記述できるので、短時間で見やすい文書を作成することができる。

## 見出し
シャープと半角スペースのあとに見出しを記述できる。
### 記述例
```markdown
# 見出し１
## 見出し2
### 見出し3
```
### 表示例
# 見出し１
## 見出し2
### 見出し3

## リスト
箇条書きのリストと番号付きのリストがある。
箇条書きの場合は、ハイフン(-)と半角スペースのあとに文字を入力する。
番号付きは、1. 2. 3. のあとに文字を入力する。
※箇条書きと番号付きはセットで記述することはできないので注意！
### 記述例
```markdown
- 箇条書きリスト１
- 箇条書きリスト２
- 
1. 番号付きリスト1
2. 番号月リスト2
```
### 表示例
- 箇条書きリスト１
- 箇条書きリスト２

1. 番号付きリスト1
2. 番号月リスト2

## リンク
[リンクタイトル名](リンク先URL)で記述できる。
### 記述例
```markdown
[qiitaトップページ](https://qiita.com/)
```
### 表示例
[qiitaトップページ](https://qiita.com/)

## 他にもあるのですが..
少しずつまとめていこうと思います。。
初心者がDocker ComposeでEC-CUBE構築してみる

##参考元
[< for EC-CUBE 4.0 Developers />](:https://doc4.ec-cube.net/quickstart_install?#4docker-compose%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B"EC-CUBE 4.0 開発者向けドキュメントサイト")
##動作環境

- OS : MacOS Catalina ver.10.15.7
- Dcoker Compose : version 1.27.4
- PHP : 7.3
- My SQL : 5.7
- Browser : Google Chrome

##やっていく

###clone
```
    git clone https://github.com/EC-CUBE/ec-cube.git
    docker-compose build -d
    docker-compose exec -u www-data ec-cube bin/console eccube:install
```
buildできることが確認できたら、一旦```docker-compose down```しておく。( dokcerらへんをいじるのも慣れていなかったので、練習の意も込めて。 )
###.envファイルをいじる

やりたいことは以下

- My SQL使いたい
- MAILER_URLにmailcatcherないしSMTPを設定
- 日本国内のみで運営するので、地域、タイムゾーン、通過を日本に設定する
- ユーザーデータのルート設定
- SSL

以下はmailcatcherを使う場合。
本番環境で使うメールのSMTPも再確認しておく。

```　.env
    APP_ENV=dev
    APP_DEBUG=1
    ~
    DATABASE_URL=mysql://dbuser:secret@mysql/eccubedb
    ~
    MAILER_URL=smtp://mailcatcher:1025
    ~
    ECCUBE_LOCALE=ja
    ECCUBE_TIMEZONE=Asia/Tokyo
    ECCUBE_CURRENCY=JPY
    ECCUBE_ADMIN_ROUTE=admin
    ECCUBE_USER_DATA_ROUTE=user_data
    ECCUBE_FORCE_SSL=true
```

使う前にスキーマ作成+初期データ投入

```
    docker-compose exec ec-cube composer run-script compile
```


###SCSSの出力先
私はいつもVSCodeのLive Sass Compilerを使っているので、Workspace > Settings: Formats > settings.jsonで出力先を変更。

```setting.json
    "liveSassCompile.settings.formats": [
       
       {
           "format": "expanded",
           "extensionName": ".css",
           "savePath": "html/user_data/assets/css",
       }
       ]
```
###確認
```
    $ docker-compose images
                
      Container               Repository          Tag       Image Id       Size  
                
    ---------------------------------------------------------------------------------
    ec-cube_ec-cube_1       ec-cube_ec-cube          latest   7f8b9cb19f17   1.098 GB
    ec-cube_mailcatcher_1   schickling/mailcatcher   latest   a92223e5253a   86.44 MB
    ec-cube_mysql_1         mysql                    5.7      f07dfa83b528   448.5 MB
```
やったあ〜
##あとがき
違うところで記していた日記の転載です。
当時はまだリリースされるかどうかの時期だったのですが、自動アプデしてくれたりもするのでもし今からだとしたらec-cube co.の方が簡単そうでいいなあと思います。
symfonyについては知見がないので、この後はデザインと少しの拡張だけをしました。
それだけでもてんやわんやするほどの初心者です。
Dockerfileにmatplotlibで日本語表記ができる設定を書いた

## はじめに
docker環境でwebアプリ開発をしていたのですが、そこに図を表示してみたくなってmatplotlibを入れました。しかしなぜか日本語表記が出来なくて手こずったので、その記録として残します。
他の記事をいろいろ探しましたが、jupyterのdockerイメージを使っているものが多く、ubuntuを使っているものが見つからなかったので、誰かの役に立てば嬉しいです。

参考にさせていただいた記事:
[Docker環境のPythonで日本語を使用できるように](https://qiita.com/e4Rl97/items/2b940b4354670ead3eb9)

## Dockerfile

```dockerfile:dockerfile
FROM ubuntu:18.04
RUN apt-get -y update \
    && apt-get -y upgrade \
    && apt-get install -y locales curl python3-distutils \
    && apt-get install -y unzip\
    && curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py \
    && python3 get-pip.py \
    && pip install -U pip \
    && pip install psycopg2-binary \
    && mkdir /code\
    && rm -rf /var/lib/apt/lists/* \
    && localedef -i en_US -c -f UTF-8 -A /usr/share/locale/locale.alias en_US.UTF-8\
    && rm get-pip.py

WORKDIR /code
ADD requirements.txt /code
# requirements.txtからパッケージのインストール
RUN pip install -r requirements.txt

# matplotlibで日本語を使うための設定
WORKDIR /
RUN curl -L  "https://moji.or.jp/wp-content/ipafont/IPAexfont/IPAexfont00401.zip" > font.zip \
    && unzip font.zip\
    && touch /usr/local/lib/python3.6/dist-packages/matplotlib/mpl-data/fonts/ttf/ipaexg.ttf\
    && cp IPAexfont00401/ipaexg.ttf /usr/local/lib/python3.6/dist-packages/matplotlib/mpl-data/fonts/ttf/ipaexg.ttf \
    && echo "font.family : IPAexGothic" >>  /usr/local/lib/python3.6/dist-packages/matplotlib/mpl-data/matplotlibrc \
    && rm -r ./root/.cache 

CMD ["bash"]
```
matplotlibで日本語表記が出来ない原因は日本語表記を可能にするフォントがないからです。
そのため、そのフォントをダウンロードして適切な場所に置いています。
今回使用しているpythonのバージョンはpython3.6です。バージョンに応じてpathのところを変更すると良いです。
また、ubuntu環境ではunzipコマンドがなかったので、それもインストールしています。
データ処理に使いそうなライブラリはrequirements.txtに入れています。(djangoを使っているので、それも入れてます)

```text:requirements.txt
django
numpy
pandas
matplotlib
seaborn
```
あとはdocker-compose.ymlに適切なコードを書いて実行するだけです。docker-compose.ymlは特に変更は加えていません。

## 結果
<img width="200" alt="Screen Shot 2021-03-17 at 21.30.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/708343/cec7d4fb-004d-9edd-6f35-a1c539a53e5e.png">
できた!

##まとめ
他のサイトではjupyterイメージで書いているものが多く、途中それでやったほうがよかったのかなと思いましたが、ubuntuでも出来たのでよかったです。最初からデータ分析ライブラリを入れるとわかっていたらjupyterのほうがよかったのでしょうか...。まだそこらへんの知識が全然ないので、もう少し深堀りしていきたいです。
もし何か間違っていたりしたら教えていただけるとありがたいです！
Pythonで定数を宣言したい（n番煎じ）

# 2021-03-18追記
さすがに適当に書きすぎてたので、もうちょっとちゃんと書き直しました。
下記のコードは継承周りでバグがあったので、**[ここ](https://qiita.com/nadu_festival/items/c507542c11fc0ff32529)**にあるコードを使ってください。

# TL;DR
- [1] Constantクラスを定義する（下記のコードコピペ）．

```Python
class ConstantError(Exception):
    """Constantクラスの例外"""
    pass

class MetaConstant(type):
    """Constantクラスのメタクラス"""

    # __init__関数置き換え用の関数
    def _meta__init__(self, *args, **kwargs):
        raise ConstantError("Can't make instance of Constant class")

    def __new__(cls, classname, bases, dict):
        # 定数クラスのインスタンス生成を禁止
        dict["__init__"] = cls._meta__init__

        # 継承時の定数再定義を禁止
        const_names = [name for name in dict if not name.startswith("__")]
        base_consts = set(*[base.__dict__ for base in bases])
        for name in const_names:
            if name in base_consts:
                raise ConstantError(f"Can't rebind constant [{name}]")

        return type.__new__(cls, classname, bases, dict)

    def __setattr__(self, name, value):
        if name.startswith("__"):
            super(MetaConstant, self).__setattr__(name, value)
        else:
            raise ConstantError(f"Can't set attribute to Constant [{name}]")

class Constant(metaclass=MetaConstant):
    """定数クラス"""
    pass
```

- [2] Constantを継承したクラスを宣言する。

```Python
class MyConstant(Constant):
    """サンプルの定数クラス

    Attributes
    ----------
    FOO : int

    methods
    -------
    twice_of_FOO
    """

    # クラス変数として定数を定義する
    FOO: int = 1

    # クラスメソッドも定義できる
    @classmethod
    def twice_of_FOO(cls):
        """FOOの二倍を返す関数

        Returns
        -------
        int : 2*MyConstant.FOO
        """
        return 2*cls.FOO

# 定義した定数クラスのサブクラスも作れる
# （サブクラスから親クラスの定数も参照できる）
class MySubConstant(MyConstant):
    """サンプルの定数クラス

    Attributes
    ----------
    FOO : int (by MyConstant)
    BAR : int
    """
    BAR: int = 2


# 参照は通常のクラス変数と同じように参照する
print(f"MyConstant.FOO = {MyConstant.FOO}")
print(f"MyConstant.twice_of_FOO() = {MyConstant.twice_of_FOO()}")
print(f"MySubConstant.FOO = {MySubConstant.FOO}")
print(f"MySubConstant.BAR = {MySubConstant.BAR}")

# 代入はできない
MyConstant.FOO = 2 # ConstantError

# あとから追加も不可
MyConstant.BAZ = 3 # ConstantError

# ただし例外的に"__"（アンダースコア2個）から始まるものは代入・変更OK
# 用法用量を守って正しく使ってね
MyConstant.__BAZ = 3
print(f"MyConstant.__BAZ = {MyConstant.__BAZ}")

# インスタンスの生成ができない
constant_instance = MyConstant() # ConstantError
```
# モチベーション
[ここ](https://code.activestate.com/recipes/414140-constant-types-in-python/)とかのコードは使えるは使えるんだが、**あとから定数を付け足せて**しまったり、**参照可能な定数を切り分けられない**辺りにもんやりしてしまっていた。
ので、n番煎じではありますが、定数クラス作ってみることにしました。

# 仕様
とりあえず、仕様としては下記のとおりとした。
1. クラス宣言時のみ、定数の宣言ができる（あとから付け足し不可）
2. 定数クラスのインスタンス生成は禁止
3. 継承関係を持たせることで、参照範囲を切り分け可

# で
出来たのが上記のコードですが、正直ここまで書いといて「（いや絶対探せばどっかにあるやん）」ってなってます。
これよりエレガントなコードあったら教えてくださいお願いします。

# ちなみに
見る人が見ればわかると思いますが、ミュータブルなデータ（辞書型とか）は、再代入不可でも操作はできるので、中身は変わったりします。
なので、イミュータブルなデータのみにするか、イミュータブルな辞書を使ったりしましょう。

# 参考にさせていただいた偉大な情報
- https://cream-worker.blog.jp/archives/1077207909.html
- https://maku77.github.io/python/syntax/const.html
- https://code.activestate.com/recipes/414140-constant-types-in-python/
RedHat８の言語ロケールにSJISを追加してみた

#1.はじめに
Redhat8では言語ロケールをUTF-8しかサポートしていない関係もあり、SJISでロケールを設定してもロケールが反映されず、文字化けを起こしてしまいます。
しかし、SJISを設定する方法もあるので今回はその手順をまとめていきます。

#2.概要
RedHat8で言語ロケールを【ja_JP.SJIS】に設定する。
なお、一部異なるがRedHat7でも同様の手順でロケール変更が可能です。

#3.サポート
RedHat公式の言語サポート状況を以下に記載します。

|バージョン  |サポート対象ロケール  |サポート状況  |
|---|---|---|
|RedHat5  |UTF-8  |サポート中  |
|RedHat6  |UTF-8  |サポート中  |
|RedHat7  |UTF-8  |サポート中  |
|RedHat8  |UTF-8  |サポート中  |

RHEL4以前では言語ロケールのサポートが終了しています。
RHEL8からそもそもSJISがデフォルトで入らなくなりました。

#4.ロケール変更手順
ではRedHat8で言語ロケールをSJISに変更する手順をまとめていこうと思います。

<b>手順１：ロケールパッケージのインストール</b>
ロケールパッケージをインストールします。
※RHEL7以前ではこの手順は必要ありません。

```bash
[user@ip-x-x-x-x ~]# sudo su -
[root@ip-x-x-x-x ~]# yum install glibc-locale-source
```

<b>手順２：文字マップの作成</b>
文字マップを作成します。
ASCIIに準拠していないため、警告メッセージが出力されますがマップ自体は作成されているため無視していただいて問題ありません。

```bash
[root@ip-x-x-x-x ~]# localedef -f SHIFT_JIS -i ja_JP ja_JP.SJIS
character map `SHIFT_JIS'' is not ASCII compatible, locale not ISO   compliant
```

<b>手順３：ロケールをセット</b>
SJISロケールをセットします。

```bash
[root@ip-x-x-x-x ~]# LANG=ja_JP.SJIS
```

<b>手順４：プロファイルへの記述</b>
プロファイルにロケール設定を記述して恒久的なロケール変更を実現します。
今回はOS全体のロケールを変更するので、rootユーザーの~/.bashrcへ記述したいと思います。

```bash
[root@ip-x-x-x-x ~]# vi ~/.bashrc
# 以下のコードを最下行以下に記述
export LANG=ja_JP.SJIS

[root@ip-x-x-x-x ~]# source ~/.bashrc
```
<b>手順５：確認</b>
ロケールが設定通り変更されているか以下コマンドを使用して確認しましょう。

```bash
[root@ip-x-x-x-x ~]# echo $LANG
ja_JP.SJIS
[root@ip-x-x-x-x ~]# locale
LANG=ja_JP.SJIS
LC_CTYPE="ja_JP.SJIS"
LC_NUMERIC="ja_JP.SJIS"
LC_TIME="ja_JP.SJIS"
LC_COLLATE="ja_JP.SJIS"
LC_MONETARY="ja_JP.SJIS"
LC_MESSAGES="ja_JP.SJIS"
LC_PAPER="ja_JP.SJIS"
LC_NAME="ja_JP.SJIS"
LC_ADDRESS="ja_JP.SJIS"
LC_TELEPHONE="ja_JP.SJIS"
LC_MEASUREMENT="ja_JP.SJIS"
LC_IDENTIFICATION="ja_JP.SJIS"
```
以上でロケールをSJISに設定することができました。
プロファイルにもロケール設定を記述しているため、OSへ再接続してもロケール設定が保持されます。

#5.ロケールが反映される範囲
上記手順のロケールセットを行うユーザーによって、ロケールの範囲が異なります。
root ⇒ OS全体 
user ⇒ そのユーザーのみ

特定のユーザー使用時のみ設定を反映させたい場合はそのユーザーにスイッチして以下手順を行います。
<例> ユーザー(auto)でのロケールを設定したい場合
<b>■ロケール変更手順</b>

```bash
[root@ip-x-x-x-x ~]# su auto
[auto@ip-x-x-x-x ~]# sudo localedef -f SHIFT_JIS -i ja_JP ja_JP.SJIS
[auto@ip-x-x-x-x ~]# LANG=ja_JP.SJIS
[auto@ip-x-x-x-x ~]# vi ~/.bashrc
# 以下のコードを最下行以下に記述
export LANG=ja_JP.SJIS
```

<b>■確認手順</b>

```bash
# ユーザー（auto）でロケール設定を確認
[auto@ip-x-x-x-x ~]# echo $LANG
ja_JP.SJIS
[auto@ip-x-x-x-x ~]# locale
LANG=ja_JP.SJIS
～～～
LC_IDENTIFICATION="ja_JP.SJIS"

# rootにスイッチしてrootのロケール設定を確認
[auto@ip-x-x-x-x ~] sudo su -
[root@ip-x-x-x-x ~]# echo $LANG
en_US.utf-8
[root@ip-x-x-x-x ~]# locale
LANG=en_US.utf-8
～～～
LC_IDENTIFICATION="en_US.utf-8"
```
特定のユーザーでのみロケールを変更したいなんて稀なことだと思いますが、一応頭の片隅に入れておきましょう。

#6.まとめ
今回はRedHatでSJISを設定する方法をまとめました。
他のOS(Debian等..)でのロケール変更手順もいつかまとめていこうと思います。
では以上になります、ありがとうございました。
ボディマス指数の計算方法（BMI）

HTML

<!doctype html>
<html lang='ja'>
<head>
    <meta charset='UTF-8'>
    <title>適正体重サンプル</title>
    <link rel='stylesheet' type='text/css' href='./style.css'>
</head>
<body>
<form action='weight1.php' method='post'>
    <p>
        <label>身長:</label>
        <input type='text' name='height'>m
    </p>
    <p class='button'>
        <input type='submit' value='送信する'>
    </p>
</form>
</body>
</html>


PHP

<?php
$height = $_POST['height'];
echo '適正体重は' . $height * $height * 22 . 'kgです。';
複数枚投稿する際に、投稿ボタンを押すとエラーが出た際の解決

プログラミング学習2ヶ月間。
Qiita初投稿。

写真複数枚投稿機能にて詰まったため、備忘録としてアウトプット。

今回詰まった内容としては複数枚投稿する際に、投稿ボタンを押すとエラーが出たといった内容。

抜粋コード記述

`new.html.erb`

```
<%= f.file_field :images, name: 'post[images][]', id: "item-image" %>
      <div class="items-box-img", id="image-lists" ></div>
      <% @post.images.each do |image| %>
        <%= image_tag image, class: 'item-box-img' %>
      <% end %>
```

`routes.rb`

```
resources :posts do
    resources :comments, only: :create
    collection do
      get 'search'
    end
  end
```

`posts_controller.rb`

```
class PostsController < ApplicationController
  before_action :authenticate_user!, except: [:index, :show]
  before_action :set_q, only: [:index, :search]
  before_action :set_item, only: [:edit, :show, :update, :destroy]
  before_action :redirect, only: [:edit, :destroy]

  def index
    @posts = Post.includes(:user).order("created_at DESC")
  end

  def new
    @post = Post.new
  end

  def create
    @post = Post.new(post_params)
    if @post.save
      redirect_to posts_path
    else
      render :new
    end
  end

  def show
    @comment = Comment.new
    @comments = @post.comments.includes(:user).order("created_at DESC")
  end

  def edit
  end

  def update
    return redirect_to posts_path if @post.user != current_user
    if @post.update(post_params)
      redirect_to post_path(@post.id)
    else
      render :edit
    end
  end

  def destroy
    @post.destroy
    redirect_to posts_path
  end

  def search
    @results = @q.result
  end

  private

  def post_params
    params.require(:post).permit(:name, :post_text, images: []).merge(user_id: current_user.id)
  end

  def set_q
    @q = Post.ransack(params[:q])
  end

  def set_item
    @post = Post.find(params[:id])
  end

  def redirect
    redirect_to posts_path if @post.user != current_user
  end
end
```

`post.rb`

```
class Post < ApplicationRecord
  belongs_to :user
  has_many_attached :images
  has_many :comments, foreign_key: :post_id, dependent: :destroy

  with_options presence: true do
    validates :name
    validates :image
  end
end
```

今回、投稿機能の保存に関してうまく作動していなかった。
エラー画面から読みとくに、画像データがsaveできてませんよというエラーが出た。
コントーラーのcreateアクションにbinding.pryをかけて、params内部を確認してみると、データは正常に送信されている状態であった。

そのため、記述のタイプミスがないかの確認と、なぜ画像データだけ保存ができないのかという点に着目した。

保存の処理という点で再度モデルを確認。

すると、
`has_many_attached :images`

上記は正確に記述できているよなと確認し直したが、やはりエラーの状態のままであった。

再度、コントローラーに定義したストロングパラメーターの記述

```
def post_params
    params.require(:post).permit(:name, :post_text, images: []).merge(user_id: current_user.id)
  end
```
を確認を行ったが問題なく記述はできている。
値は送信できているのになぜ保存の処理ができないかと考え、再度モデルの記述を確認しにいった。

そうしたら、7行目に記述してある
`validates :image`
が原因だと突き詰められた。

複数枚の処理を行うのに対して、単数形で`image`が記述してあったのが原因と突き止められた。

記述修正して、
`validates :images`
に変えたら問題なく保存の処理が行われ、表示に関しても問題なく動作した。


複数枚の機能に変更した際に、バリデーションも複数形の記述にしなくてはいけないというところを、すっかり飛ばしていたのがエラーの原因と考えついた。


初心者でまだまだわからないことも多いが改めて、複数形・単数形の記述の仕方には注意しなくてはいけないと再認識できたエラーであった。



これからも備忘録やアウトプットとして投稿できていけたらと思っています。

初心者ながら、もっと良い記述の仕方や、アドバイス等ありましたらお聞きできましたら幸いです。

宜しくお願い致します。
【Python】 Worksheet.column_dimensions列幅(行の高さ)を調整する。

pythonを使用してExcelファイルの操作を勉強しています。
本日の気づき(復習)は、セルの列幅(行の高さ)に関してです。
pythonでExcelを操作するため、openpyxlというパッケージを使用しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927441/e85180af-2ad6-1e4f-c2a9-7a3e2f9f3e99.png)

上記のようなブック「商品リストを」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927441/8d166914-b337-7191-6d7f-eb4ec0b563b9.png)

この様な表に変更したいです。

# Worksheet.column_dimensions

```python
# 列の幅を変更
ws.column_dimensions[列名].width = 列の幅(単位：文字数)

# 行の高さを変更
ws.column_dimensions[行番名].height = 行の高さ(単位：ポイント)
```
openpyxlには、行と列の幅をセルの文字数に合わせて
自動で変更してくれる機能はないようなので
個別に設定していきます。

列名なので
A,B,C....のようなアルファベット表記での指定が必要です。
逆に行番号の場合は
1,2,3,....のように数値を指定します。

# 最終的なコード

```python
from openpyxl import load_workbook

wb = load_workbook('商品リスト.xlsx')
ws = wb.active
column_width = {'B': 3.5, 'C': 30, 'D': 8, 'E': 8, 'F': 8}

for col, width in column_width.items():
    # 行の幅を変更
    ws.column_dimensions[col].width = width

wb.save('商品リスト_幅変更.xlsx')
```

ポイントは
- 列名とそれに対応する幅をPython辞書で用意する
- 辞書のキーと値を取り出すためにitemsメソッドを使用する

ということでしょうか。

Python辞書便利ですね。
これからも何かとお世話になりそうです。
[JavaScript]　IME入力中Enterと通常Enterはキーコードが違うらしい

#概要

ユーザーにフォームに入力させる際に、確定のEnterをトリガーにしてpostしたくて実装していたのですが、
フォーム入力時のEnterも関数が動いてしまいました。

IME(日本語等の文字入力)の場合は通常のEnterとキーコードが違ったみたいで、このような事象が起こったようです。
その解決法をメモします。


#実装

通常のEnterキーコード以外は受け付けないようにすれば良いです。
Enterは'13'でIME入力のEnterは'229'みたいなので、13以外は受け付けないようにします。

Vue.jsで実装します。

キーコード一覧
↓
[https://shanabrian.com/web/javascript/keycode.php](https://shanabrian.com/web/javascript/keycode.php)


```.vue
<template>
<div>
      <input
        id="search"
        v-model="word"
        type="search"
        placeholder="キーワードを入力..."
        @keydown.enter="searchTags">
</div>
</template>
<script>
  computed: {
    word: {
      get() {
        return this.$store.getters['search/word']
      },
      set(val) {
        this.$store.commit('search/setWord', val)
      },
    },
  },
  methods: {
    async searchTags(e){
      if (e.keyCode !== 13) return
      this.$store.dispatch('search/searchTags')
    },
  },
</script>
```

@keydown.enterでキー入力のイベントを取得します。

```.js
if (e.keyCode !== 13) return
```

でキーコードが13以外の場合はそのままreturnします。


#参考文献

[VueのEnterキーイベントで日本語入力中のEnterを制御する](https://qiita.com/TsukasaGR/items/22b306cb819bc7164bd7)
GitLabで複数ポートからのアクセスをListenする

# はじめに
GitLabで、独自URL設定は`/etc/gitlab/gilab.rb`の`external_url`で行えます。
また、通常のhttpのListenポートは80ですが、変更したい場合は以下のように記載することで可能です。

```bash:gitlab.rb
external_url 'http://gitlab.example.com:8080'
```
それでは、もし現在のポートに加えて別のポートからもListenできるようにしたい場合はどうしたら良いでしょう？
今回はその設定を試してみたいと思います。


# 設定
GitLab をパッケージインストールした場合、web は nginx で動きます。
ただ、インストール先は一般的な`/etc/nginx`ではなく、`/var/opt/gitlab/nginx/conf/gitlab-http.conf`になります。

```bash:修正
$ vim /var/opt/gitlab/nginx/conf/gitlab-http.conf
```
もし、現在がデフォルトの80ポートでアクセス可能な状態でしたら、その下などに8080ポートを追加してください。

```conf:gitlab-httpd.conf
server {
  listen 80;
  listen 8080; ← 追加
```
設定したら nginx の再起動を行います。
とは言っても、通常の `systemctl` での再起動ではなく `gitlab-ctl` で行います。

```bash:restart
$ sudo gitlab-ctl restart nginx
ok: run: nginx: (pid 22060) 1s
```

以上で完了です。
これで80ポートに加えて8080ポートでもアクセスできるようになります。


# 注意
GitLabの設定関連は `gitlab.rb` で管理します。
設定した値を反映するには `gitlab-ctl reconfigure` で再構築が必要ですが、これをしてしまうとポートの設定が戻ってしまうので注意が必要です。
その場合は再構築後に改めて今回の対応を行う必要があります。


# おわりに
わざわざ複数ポートでアクセスできるようにする機会はほぼないと思います。
ただ、こういったことを試すのは、そのシステムが「どうやって動いているか？」という仕組みを知るのにとても良いなと思います。
Golangで依存パッケージの脆弱性を調査するならNancyがおすすめ

# 概要
* Goで使用する外部パッケージが安全かどうかを調べる時にオススメなのが、[nancy](https://gonancy.dev/)です。
* ちなみにnancyとは、Sonatype OSS Indexを利用して、Golangの依存関係の脆弱性をチェックするツールです。
* nancyではdepまたはgo modの依存関係を調査してくれます。

![nancy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/79fec195-ab17-3383-03db-e5319d156c58.png)

# 導入方法
* install方法

```

> brew tap sonatype-nexus-community/tap
> brew install nancy
```

# 試す

* helpを見てみる
* 見てみると、引数にGopkg.lockまたは、go.sumのpathを指定してあげるようです。

```
❯ nancy --help
Usage:
nancy [options] </path/to/Gopkg.lock>
nancy [options] </path/to/go.sum>

Options:
  -noColor
    	indicate output should not be colorized
  -version
    	prints current nancy version
```

* 試しに、goのsample projectで試してみたいと思います。
* cloneしたsample => https://github.com/golang/example

```
❯ go list -m all | nancy go.sum
[1/3] golang/golang.org/x/mod@0.3.0    No known vulnerabilities against package/version...
[2/3] golang/golang.org/x/tools@0.0.0-20210112183307-1e6ecd4bf1b0    No known vulnerabilities against package/version...
[3/3] golang/golang.org/x/xerrors@0.0.0-20200804184101-5ec99f83aff1    No known vulnerabilities against package/version...

Audited dependencies: 3, Vulnerable: 0
```
Golangでインストールしたパッケージ(依存パッケージも含む)のversion確認方法

# 概要
Go言語で依存パッケージも含めてパッケージのversionを確認したいときに利用するコマンドです。
ただ、注意点としては、パッケージの開発が別のリポジトリに移動すると最新のversionを追えません。

```
go list -m -u all
```

# 試してみた
試しに、goのsample projectで上記のコマンドを試してみたいと思います。
cloneしたsample => https://github.com/golang/example

```
❯ go list -m -u all
go: finding github.com/yuin/goldmark v1.2.1
go: finding golang.org/x/net v0.0.0-20201021035429-f5854403a974
go: finding golang.org/x/sync v0.0.0-20201020160332-67f06af15bc9
go: finding golang.org/x/tools v0.0.0-20210112183307-1e6ecd4bf1b0
go: finding golang.org/x/xerrors latest
go: finding golang.org/x/sync latest
go: finding golang.org/x/sys latest
go: finding golang.org/x/crypto latest
go: finding golang.org/x/net latest
golang.org/x/example
github.com/yuin/goldmark v1.2.1 [v1.3.2]
golang.org/x/crypto v0.0.0-20200622213623-75b288015ac9 [v0.0.0-20210314154223-e6e6c4f2bb5b]
golang.org/x/mod v0.3.0 [v0.4.2]
golang.org/x/net v0.0.0-20201021035429-f5854403a974 [v0.0.0-20210316092652-d523dce5a7f4]
golang.org/x/sync v0.0.0-20201020160332-67f06af15bc9 [v0.0.0-20210220032951-036812b2e83c]
golang.org/x/sys v0.0.0-20200930185726-fdedc70b468f [v0.0.0-20210317091845-390168757d9c]
golang.org/x/text v0.3.3 [v0.3.5]
golang.org/x/tools v0.0.0-20210112183307-1e6ecd4bf1b0 [v0.1.0]
golang.org/x/xerrors v0.0.0-20200804184101-5ec99f83aff1
```

* 最新のversionと差異がある場合は下記のように表示されます。
* 左側のv1.2.1がcurrent versionで右側の[v1.3.2]がlatest versionとなります。

```
github.com/yuin/goldmark v1.2.1 [v1.3.2]
```
階層的クラスタリング

# 階層的クラスタリング

- 教師なし学習
- クラスタリング
    - 非階層的・・・グループ分けのみ
    - 階層的
        - 似たもの同士が階層的に集められている
        - ちょうどよいレベルで切れば任意の数のクラスターを作れる
    - 用途
        - 似たデータ同士を集めたい・・・同じクラスター内は似ている、異なるクラスター同士は異なる
        - 「似ている」の評価方法（類似度）
            - 距離・・・教師データを用いずに距離で類似度を測る
                - ユークリッド距離
                    - √(nΣi=1(ai-bi)^2)
                - マンハッタン距離
                    - nΣi=1(|ai-bi|)
                - ミンコフスキー距離・・汎用的
                - チェビシェフ距離・・差の最大値
                - マハラノビス距離・・データ群同士のばらつき
            - コサイン類似度
                - ベクトル同士の角度からベクトルの類似度・・・同じ方向を向いていれば似ている
【Node.js】パスを確認する方法(備忘録)

#プログラミング勉強日記
2021年3月17日
Node.jsの環境変数であるNODE_PATHの確認方法をまとめる。今回はすべてWindowsで行った。

#npmのPATHを確認する方法

```:コマンドプロンプト
$ npm bin -g
```

　コマンドを実行すると、ディレクトリがNode.jsをインストールしたときに自動的に設定される。そのパスが表示される。


#node_modulesのPATHを確認する方法
　Nodeのサーバーを立ち上げてから、nodeコマンドで下記を実行する。

```
> global.module.paths
```


#npmのPATHを通す方法

```
set NODE_PATH=C:\Users\フォルダ…
```

#参考文献
[【Express】環境変数とは？PATHを通すとは？けっきょく南極ローカルインストール！（Herokuコマンドでローカル起動）](https://www.i-ryo.com/entry/2020/09/26/183640)
[Node.jsのPath（パス）を確認する方法【初心者向け】](https://techacademy.jp/magazine/16113)
CakePHP3, CakePHP4 アソシエーションの条件を複数指定する!

googleさんに `multiple conditions columns join cakephp` とかで調べても全然結果は出なかった。。。
以外と知られてない情報かもなという所で、共有と備忘録を兼ねて、残します。

他のモデルを結合 (JOIN) したい時に、複数のカラムを指定したい事があると思います。

例えば、同姓同名の別人を含むテーブルがあったとして

`citizens`

| prefecture | name | birthyear |
|:---------:|:-----:|:-----:|
| Tokyo       |  山田太郎         | 1990 |
| Tokyo     |  名無し次郎   | 1988 |
| Wakayama       |  山田太郎         | 1955 |

彼らからのコメントを保管するテーブルがあると

`comments`

| prefecture |  name | comment |
|:---------:|:-----:|:-----:|
| Tokyo       | 山田太郎         | わしはいいとおもう |
| Wakayama      |　山田太郎         | いかんでしょ |

（まあ、ビジネスキーをつけてれば何も問題ないのですが）、commentsテーブルの内容を `select` する時に、複数条件指定しないといけないわけです。

SQLだと、以下のような感じ

```sql
SELECT 
  citizens.prefecture, 
  citizens.name, 
  citizens.birthyaer, 
  comments.comment 
FROM comments 
LEFT JOIN citizens 
  ON citizens.prefecture = comments.prefecture
  AND citizens.name = comments.name
```

まあ、 `JOIN` の条件を `AND` で結んで複数指定すると。

まあ、こういった事をする際に、当然かの有名なCakePHPならいい感じに書けそうに思えるんですが、これがXXXXXな事に、デフォでは対応してないんですね。
https://api.cakephp.org/3.6/class-Cake.ORM.Association.HasOne.html#_foreignKey
`foreignKey` の引数はガッツリ `string` です。


つーわけで、なんかしらやり方がないかと思ったら、以下の書き方でどうにかなりました。
(Tableのアソシエーションです。これ分からないならまず[ドキュメント](https://book.cakephp.org/3/ja/orm/associations.html)読んでください)


```php:CommentsTable.php
(略)

use \Cake\Database\Expression\QueryExpression;

（略）

$this
  ->hasOne('Citizens', [ // まずここで一つだけ条件をセット
    'foreignKey' => 'name',
    'bindingKey' => 'name',
  ])
  ->setConditions([ // 上で指定した条件以外をココでセット。配列なので3つだろうが4つだろうがどんと来い
    new QueryExpression('Citizens.prefecture = 'Comments.prefecture)
  ]);
(略)
```

SQLログも確認しましたが、いい感じにONに対してANDを繋いでいたので、問題なさそう。
（QueryExpression以外だと、WHEREで指定してるっぽい）
Web Audio APIを使用して（できるだけ確実に）音を出す

自分の備忘録も兼ねて、ベーシックな、かつ比較的確実に音が出るコードとして下記。
画面をクリックすると、440Hz（A4 / ラ）の音が1秒間再生されます。

<!-- Code Pen -->
<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="js,result" data-user="ts5h" data-slug-hash="zYoQKmo" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="440Hz Tone">
  <span>See the Pen <a href="https://codepen.io/ts5h/pen/zYoQKmo">
  440Hz Tone</a> by ts5h (<a href="https://codepen.io/ts5h">@ts5h</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

### 留意点など
- ```new OscillatorNode(audioContext)``` は、mobile Safariでは動作しませんでした。代わりに、```audioContext.createOscillator()``` のように書くと良いようです。
- 続けてクリックすると、現在再生中の音に加えてどんどんオシレータが生成されるので、クリップします。本当は、クリック時に再生中の音をカットするか、リミッタをかますなどの対策が必要。
- IEでは動作しません。


Web Audio APIは若干マイナーなためか情報が散逸的で、貴重なサンプルを見つけても、2021年現在では、そのままだと全然音が出なかったりします。
特に、個人的にはiPhone mobile Safariが鬼門かなと思います。
また、デスクトップ環境でもアクセス時にいきなり音が出るのは迷惑だということで、明示的に自動再生を許可しているか、ユーザーが何らかの操作をしない限りは音声再生はブロックされるとされているため、こうした条件をクリアするような記述方法を考慮する必要があります。（何故か音が出る場合もあるが、そちらはむしろ想定外の動作と思われる）
 
> Chrome 66では自動再生が許可されている場合を除き、ユーザーが何らかの操作をしない限り音声再生がブロックされる。Web Audio APIを使用する場合、ページ読み込み時にAudioContextオブジェクトを作成すると、ユーザーの操作後にresume()メソッドを実行しなければ音声は再生されない。

https://www.zaikei.co.jp/article/20180514/442077.html

# 注意点
上記サンプルは、2021年春時点で確認したものです。
今後またこのあたりの仕様は変わる可能性があります。

# 面倒くさい
https://qiita.com/aike@github/items/2851b94b516cf75a5350

にあるように、多分Tone.js等をラッパーとして挟んだ方が取り回しが良いでしょう。

https://tonejs.github.io/
SourcetreeでGitHubのプライベートリポジトリが表示されない

#まえがき
MacMiniをクリーンビルドするにあたり，Sourcetreeでプライベートリポジトリが表示されない問題が起こり，解決したので記録します。



#環境
OS : macOS Big Sur 11.2.3
チップ : Apple M1
Sourcetree : 4.1.0


#解決手順
##1， SSHキーを作成　
ターミナルで以下を入力

```
//SSHキーを作成
$ cd ~/.ssh && ssh-keygen -t rsa

//ディレクトリがなかったら
$ mkdir ~/.ssh

//この後以下の内容の文が表示されますが，わからなければEnter3回押すだけでいいです

//SSHキーを保存するフォルダを指定（変更なければ/Users/ユーザー名/.ssh/id_rsa）：
Enter file in which to save the key (/Users/ユーザー名/.ssh/id_rsa):
//パスフレーズを入力してください（パスフレーズがない場合は空）： 
Enter passphrase (empty for no passphrase): 
//同じパスフレーズをもう一度入力してください。
Enter same passphrase again:

//SSHキーが作成できたかを確認
$ ls ~/.ssh
id_rsa   id_rsa.pub
```

##2, GitHub設定(1回目)
GitHubのホーム画面から
settings >> Developer settings >> Personal access tokens

Generate new token(トークンを作成)から
repoとuserをチェック
![スクリーンショット 2021-03-17 19.40.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517291/4bd05fd5-5f02-2629-9537-00f831b9fdb0.png)

トークン(数字の羅列約30桁)が発行されるので一時的に保存

##3, Sourcetreeの設定(1回目)
Sourcetreeのホーム画面から

アカウント >> アカウント　>> 追加

 **保存はまだ押さない(押しても大丈夫だと思うが一応)**

|ホスト| GitHub |
|:------------:|:------------:|
|認証タイプ|Basic|
|ユーザー名|Githubユーザー名| 
|パスワード|先ほど作成したトークン| 
|プロトコル|SSH| 
|SSHキー|id_rsa.pub(自動で設定)| 
![スクリーンショット 2021-03-17 19.45.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517291/d80c6525-30d5-1907-dff7-cbd23cb91e6b.png)

**パスワードがGitHubアカウントのパスワードでないことに注意**
「クリップボードにコピー」を押してコピー

##4, GitHubの設定(2回目)
GitHubのホーム画面から
settings >> SSH and GPG keys >> SSH keys
New SSH key　から

|Title| 任意のタイトル名 |
|:------------:|:------------:|
|Key|先ほどコピーしたSSHキー(ssh-rsaから始まる内容)|

![スクリーンショット 2021-03-17 20.01.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517291/0fcc9cda-a71b-7b3f-d43d-468135ae58c4.png)

##4,Sourcetreeの設定(2回目)
保存を押し
Sourcetreeのリモートリポジトリにプライベートが表示されていることを確認


#あとがき
クローンする際，GitHubのユーザー名，パスワードを要求されましたが，ここでのパスワードはGitHubアカウントのパスワードで良さそうです。

またキーチェーンからもPCのパスワードを要求されたので常に許可にしました。

クローン，コミット，プッシュは問題なく使用できました。

またプッシュする際，[The requested URL returned error: 403](https://qiita.com/akidon0000/items/4257e95596a03cb04d3a)　が出たらこの記事を参考にしてみてください。
.gitignore に Pods/ を追記しても反映されない時の対処法


iOS のライブラリ管理で最もよく使われる CocoaPods の Pods ディレクトリを git で管理したくない時、
.gitignore のファイルに `Pods/`と記載する。

しかし Git のキャッシュが原因で反映されないことがある。

```terminal
$ cd プロジェクトのディレクトリ
$ git rm -r --cached .
$ git add .
$ git commit -m ".gitignoreの反映" 
```

以上でバージョン管理を外せる。