OmniAICreator/Qiita-1.07M huggingface dataset:
brew doctor

# `$brew doctor`したらWarningが出たお話
#### 何となく`$brew doctor`したら Warning が３つ出てしまい、一つ一つ解決していくことになった。<br>
## 一つ目の Warning
```terminal:ターミナル
Warning: Homebrew's sbin was not found in your PATH but you have installed
formulae that put executables in /usr/local/sbin.
Consider setting the PATH for example like so:
  echo 'export PATH="/usr/local/sbin:$PATH"' >> ~/.zshrc
```
#### これは簡単に解決できた。<br><br>ターミナルに書いてある通り<br><br>`$ echo 'export PATH="/usr/local/sbin:$PATH"' >> ~/.zshrc`<br><br>`$ source ~/.zshrc`<br><br>をターミナルに打ち込むだけ。<br><br>
## ２つ目の Warning
```terminal:ターミナル
Warning: You have unlinked kegs in your Cellar.
Leaving kegs unlinked can lead to build-trouble and cause brews that depend on
those kegs to fail to run properly once built. Run `brew link` on these:
  python@3.8
```
#### python@3.8 にリンクされていないという警告なので、リンクさせるコマンドを打つ。<br><br>`$ brew link python@3.8`<br><br>
## ３つ目の Warning
```terminal:ターミナル
Warning: A newer Command Line Tools release is available.
Update them from Software Update in System Preferences or run:
  softwareupdate --all --install --force

If that doesn't show you an update run:
  sudo rm -rf /Library/Developer/CommandLineTools
  sudo xcode-select --install
```
#### コマンドラインツールを一度削除して、再度インストールした。<br><br>`$ sudo rm -rf /Library/Developer/CommandLineTools`<br><br>一度コマンドラインツールを削除する。<br><br>`$ xcode-select --install`<br><br>再度インストール。
```terminal:ターミナル
$ brew doctor 

Your system is ready to brew.
```
#### <br><br><br>
## 追記<br>
##### 久々に　`$ brew doctor `　したら Warning 2個出たので解決法を追記する。<br>
```terminal:ターミナル
Warning: Some installed formulae are deprecated or disabled.
You should find replacements for the following formulae:
  php@7.2
```
#### 非推奨または無効だと言っているので、削除する。
`$ brew uninstal　php@7.2`
#### <br>
```terminal:ターミナル
Warning: Unbrewed static libraries were found in /usr/local/lib.
If you didn't put them there on purpose they could cause problems when
building Homebrew formulae, and may need to be deleted.

Unexpected static libraries:
  /usr/local/lib/libTMAESCrypt.a
```
#### これはよく分からなかったけど、調べたらスタティックライブラリの不整合ということらしい。<br><br>[参考記事](https://ichibariki.com/entry/2018/03/24/213524#Warning-Unbrewed-static-libraries-were-found-in-usrlocallib)<br><br>警告文に削除する必要があるかも、って書いてあるので削除する。<br>
`$ rm -rf /usr/local/lib/libTMAESCrypt.a`
#### 
## <br><br>参考記事<br>
### [brew doctorでのWarningを解決してみた(for Mac)](https://qiita.com/FrogWoman/items/7c0fdaa7550dc5895a33)<br>
### [HomebrewでdoctorしたらWarning: You have unlinked kegs in your Cellarとなった時の対応方法](https://qiita.com/ponsuke0531/items/80f716c803ac23c7849d)<br>
### [Homebrew 2.3.0 のアップデート時、Mac のCommand Line Tools をアップデート](https://qiita.com/oreo3@github/items/bffce1f6dfc8bba309fe)
iOS14のSmart Stackについて調べてみた

#  Smart Stackとは
iOS14で追加されれる機能のひとつ、Smart Stackについて、
検索したら英語の記事だらけだったので、調べてみました。


公式：https://www.apple.com/ios/ios-14-preview/features/
>Smart Stack In the Widget gallery, you can select the Smart Stack, a set of widgets you can swipe through that uses on-device intelligence to surface the right widget at the right time based on factors like time, location, and activity. For example, you might see the Apple News widget in the morning, Calendar events during the day, and commute time from Apple Maps in the evening.
（スマートスタックウィジェットギャラリーでは、スマートスタックを選択できます。スマートスタックとは、デバイス上のインテリジェンスを使用してスワイプできるウィジェットのセットであり、時間、場所、アクティビティなどの要素に基づいて、適切なタイミングで適切なウィジェットを表示します。 たとえば、朝はApple Newsウィジェット、日中はカレンダーの予定、夕方にはApple Mapsからの通勤時間が表示されます。）

# 調べた結果
デバイス上のSiriインテリジェンスを利用して、時間、場所、デバイスのアクティビティなどの要素に基づいた最適なウィジェットを表示してくれる機能のようです。
どうやらエンジニアが気にする機能ではないようでした、
シンプルにiPhoneユーザーとしては楽しみです！笑
iOS14の新機能の割には、なんかあんまり話題になってないな〜って思います。
名前だけ聞くと、ちょっと身構えそうなので「なんかエンジニアが気にしなきゃいけないような機能ではないらしいよ」っていう知見になればいいなと思い、書きました。笑

参考：
[Hack your Smart Stack: How to customize the new iOS 14 widget on your iPhone](https://www.cnet.com/how-to/hack-iphone-smart-stack-widget-how-to-customize-ios-14-home-screen-apps/)
[iOS 14: How to use the Smart Stack feature on iPhone to automatically surface the right widget](https://www.idownloadblog.com/2020/07/23/smart-stack-widget-iphone-tutorial/)
毎回docker-composeと記述するのがめんどくさい

開発環境にDockerを使うと環境構築などがかなり楽になると聞き、Docker-compose.ymlの書き方どころかDockerfileの書き方/読み方すらわからないにもかかわらずDockerを利用してRailsでアプリの開発を行っていました。（今はDockerの勉強もはじめDockerfileやdocker-compose.ymlについても徐々に理解できてきています）

そして開発中に毎回感じていたのが新たにGemを追加した後のdocker-compose buildなどでdocker-composeをタイプするのがめんどくさいということです。
dockerをdokcerやdocerなどとタイポしてエラーになることもしばしば。

そんななかQiitaでこちらの記事を見つけました。

[インフラど素人が1ヶ月半でKubernetes本番環境を作るまでの失敗の軌跡（奇跡）](https://qiita.com/_akira19/items/13004df2561fcd4cb410)

こちらの記事で「エイリアスは幸せ」という見出しがあり、そこで初めてエイリアスの設定で自分用のショートカットのようなものが作れるということを知りdocker-composeの呪縛から開放されました。

ちなみに私がエイリアスの設定で参考にしたのはこちらの記事です。

[【コマンド】docker用のコマンドショートカット「alias」のおすすめ設定](https://engineer.namake-mono.xyz/development/223/)

私のようにdocker-composeのタイピングに苦労している初学者の方は是非参考にしてみてください。

#まとめ

ウェブアプリを作りたかったため、Linuxの勉強はあまりしてこなかったのでこうした便利なコマンドの存在すら知りませんでした。

情報社会様様です。
[Ruby]簡易ポーカー作ってみました。アドバイスください

Ruby で簡易ポーカー（トランプは四枚だけど）を作ってみました。
が、あまりにもわからずに可読性落ちまくりのプログラムになってしまったので
よろしければアドバイスください。

```ruby:qiita.rb
n = gets.to_i
poker = []
i = 0
check = 0


n.times do
  number = gets.chomp
  poker.push(number.chars)
end


while n > 0 
  check = poker[i].uniq.map{ |e| [e, poker[i].count(e)] }
  case check.size
    when 4 then
      puts "No Pair"
    when 3 then
      puts "One Pair"
    when 2 then
      if check[0][1] == 3
        puts "Three Card"
      else
        puts "Two Pair"
      end
    when 1 then
      puts "Four Card"
    end
    i = i + 1
    n = n - 1
end
```

ブロック変数の理解が浅いことが悩みです笑
【SQL入門】インデックスによる高速化のパターン

## 内容
インデックスによる高速化の典型的なパターン3つをまとめる。

## 1. WHERE 句による絞り込み

```sql
-- インデックスのある列を WHERE 句に指定する(完全一致検索)
SELECT * FROM movie WHERE genre_id = 1;
```
上の例の場合、genre_id カラムにインデックスが作成されている時、高速に検索結果を得ることができる。

DBMSによっては、前方一致検索でもインデックスを利用した高速な検索が行われることがある。
ただし、部分一致検索や後方一致検索ではインデックスを利用することができない。

## 2. ORDER BY による並び替え

```sql
-- インデックスのある列を ORDER BY 句に指定する
SELECT * FROM movie ORDER BY genre_id;
```

インデックスには並び替えを高速化する効果もあるため、ORDER BY の処理が速くなる。

## 3. JOIN による結合の条件

```sql
-- インデックスのある列を JOIN の結合条件に指定する
SELECT * FROM movie JOIN genre ON movie.genre_id = genre.id;
```

結合処理は内部で並び替えを行っているため、インデックスのある列を使うと高速になる。

参考図書：[スッキリわかるSQL入門 第2版](https://www.amazon.co.jp/dp/4295005096/ref=cm_sw_em_r_mt_dp_IGtnFbPQ9MTVT)
babylon.jsチュートリアル１ - First Steps

babylon.jsのチュートリアルを学習していきます。

# babylon.jsとは
https://www.babylonjs.com/
webで動作する3Dレンダリングエンジンで、three.jsのようにwebglを容易に扱うことのできるライブラリです。

# First Steps

https://doc.babylonjs.com/babylon101/first
球体を表示するサンプルから、仕組みを理解します。

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="nobuyuki-ishii" data-slug-hash="eYZzvVy" 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="babylon101 first step">
  <span>See the Pen <a href="https://codepen.io/nobuyuki-ishii/pen/eYZzvVy">
  babylon101 first step</a> by nobuyuki ishii (<a href="https://codepen.io/nobuyuki-ishii">@nobuyuki-ishii</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# html

描画領域をcanvasで定義し、ライブラリを読み込む。cdn有。

```html
<!-- babylon.jsの描画領域 -->
<canvas id="renderCanvas" touch-action="none"></canvas>

<!-- babylon.js本体 -->
<script src="https://preview.babylonjs.com/babylon.js"></script>
<!-- .glTF, .obj, .stlファイルを読み込み可能にするライブラリ -->
<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<!-- ポインタイベントの各種ブラウザ対応 -->
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
```

# js

以下の流れで描画。
１．エンジン生成
２．シーン生成
３．シーンに設定（カメラ、光）追加
４．シーンに図形追加

カメラと光を設定していますが、カメラがないと見えないし、光がないと立体感がでないので、これらは必須の処理になるものと思います。また、最後のレンダー、リサイズ処理もないと正しい表示ができないので必須。
bayblon.js playgroundというサンプルを閲覧、改変できるweb上のエディタでは、`createScene`関数だけ定義すれば、動作するようになっています。エンジン、レンダー、リサイズといった処理は裏側でやってくれているようです。といったところからも、これらは必須と云えるものと理解しました。
https://playground.babylonjs.com/

```js
var canvas = document.getElementById("renderCanvas");
// エンジン生成
var engine = new BABYLON.Engine(canvas, true);

var createScene = function() {
  // シーン生成
  var scene = new BABYLON.Scene(engine);
  
  // カメラ追加
  // カメラがないと何も見えない
  var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, new BABYLON.Vector3(0,0,5), scene);
  // カメラを操作可能とする
  camera.attachControl(canvas, true);
  
  // 光設定
  // 光がないと、立体感がでない
  var light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 1, 0), scene);
  var light2 = new BABYLON.PointLight("light2", new BABYLON.Vector3(0, 1, -1), scene);
  
  // 球追加
  var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter:2}, scene);
  
  return scene;
};

// シーン作成
var scene = createScene();

// シーンを繰り返しレンダリング
// これがないと、図形が描画されない
engine.runRenderLoop(function () {
  scene.render();
});

// サイズ変更時にリサイズ
// これがないと、ウィンドウサイズを変更したときに状態が保持されない
window.addEventListener("resize", function () {
  engine.resize();
});
```
多段sshサーバーにVScodeで接続する(エージェントフォワード)

踏み台サーバーからプライベートサーバーにアクセスしたいですよね？

以下のようなサーバー構成で、ローカルのPCからssh接続をしてVScodeで開きたいです。
![無題のプレゼンテーション.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154053/b05ba452-b6a6-d863-a3f9-f371e3fda409.jpeg)


秘密鍵は踏み台サーバー、プライベートサーバーともにローカルにある鍵を使用します。
たまに秘密鍵を踏み台サーバーに置いているような記事があるんですが、ちょっとよろしくないですよね？
エージェントフォワードで鍵をサーバーに置くことなくローカルから持っていきましょう。
https://qiita.com/naoki_mochizuki/items/93ee2643a4c6ab0a20f5

## ssh/config
```
Host bastion
  Hostname aaa.aaa.aaa.aaa
  Port 22
  User user_name
  IdentityFile ~/.ssh/id_rsa
  ForwardAgent yes

Host private
  Hostname xxx.xxx.xxx.xxx
  Port 22
  User user_name
  ProxyCommand ssh -W %h:%p bastion
```

## ssh接続
```
# bastionサーバーにssh
$ ssh bastion

# privateサーバーにssh
$ ssh private
```

## VScodeプラグイン
VScodeのプラグイン`Remote - ssh`
をinstallする。
https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh

![スクリーンショット 2020-08-20 20.14.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154053/89556f29-8bfa-7d31-cb04-01f6d9bca7a1.png)

## VScodeで接続
左下の緑のボタンから接続
![スクリーンショット 2020-08-20 21.01.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154053/e3b57a92-4125-6138-3ff1-d820f5ab9646.png)

あとはよしなに。
【SwiftUI】NavigationView タイトルカスタマイズ方法

# タイトルとアクション等の設定
NavigationView に属性をつけるのではなく中身につけることに注意。

```Swift
NavigationView {
    VStack {
        Text("How to customize view")
    }
    .navigationBarTitle(Text("Hello"))
    .navigationBarItems(trailing: Button("Done", action: {
        // Action
        // 左に作るときは leading: にする
    }))
    // .inline .automatic .large
    .navigationBarTitleDisplayMode(.automatic)
    .navigationBarBackButtonHidden(true)
}
```

# タイトルのフォント/背景色の変え方
appearance()はあまり使わない方がいいという意見もありますが、これがとりあえず一番やりやすいかと思います。
UIViewController の属性を引き継いでいるので、中身はUIFont UIColor で設定します。

```Swift
struct MyView: View {
    init() {
         // 背景を透明にする
         UINavigationBarAppearance().configureWithTransparentBackground()

         // コンパクトなナビゲーションバーの時の背景色を変える
         UINavigationBar.appearance().barTintColor = .systemRed

         // コンパクトなナビゲーションバーのタイトル属性
         UINavigationBar.appearance().titleTextAttributes = [
             .font: UIFont.systemFont(ofSize: 10)
             .foregroundColor: .systemBlue,
         ]
         UINavigationBar.appearance().largeTitleTextAttributes = [
             .font: UIFont.systemFont(ofSize: 20)
             .foregroundColor: .systemBlue,
         ]
     }
     var body: some View {
          // Navigation View
     }
}
```
【JAVA】拡張子を除いて、ファイル名のみを取得する

# 目的
拡張子を除いて、ファイル名のみを取得する

# 実装例
```example.java
import java.io.File;
String fullPathString = "/home/hoge/abc.txt";

public static String getFileName(final String fullPathString) {
		File file = new File(fullPathString);
		String basename = file.getName();
		String woext = basename.substring(0,basename.lastIndexOf('.'));
		System.out.println(woext);
	}
```

    String basename = file.getName();
getName()メソッドでファイル名を取得する

    String woext = basename.substring(0,basename.lastIndexOf('.'));
substring()メソッドで第一引数から第二引数文字目までを取得
lastINdexOf()メソッドで末尾から数えて何番目に引数（’.’）があるのか調べる

これでabcが表示されるはず

# 参考文献
https://java-code.jp/187
https://java-code.jp/795
http://simplesandsamples.com/basename-rmext.java.html
Devise導入でハマった件

Ruby on Railsで構築したWebサイトにログイン機能を実装すべく、Deviseを導入したらガッツリはまって1日無駄にしたので備忘。

<h2>環境</h2>
・Ruby 2.6.3
・Rails　6.0.3.2
・MySQL

<h2>事象</h2>
Deviseをinstall後に、以下のコマンドでuserモデルを作成する。

```ruby:
rails g devise user
rails db:migrate
```

以下のメッセージが表示される

```ruby:
/usr/local/src/rbenv/versions/2.6.3/lib/ruby/gems/2.6.0/gems/railties-6.0.0/lib/rails/app_loader.rb:53: warning: Insecure world writable dir /home/rails in PATH, mode 040777
== 20200820093209 DeviseCreateUsers: migrating ================================
-- create_table(:users)
   -> 0.0270s
-- add_index(:users, :email, {:unique=>true})
rails aborted!
StandardError: An error has occurred, all later migrations canceled:
Mysql2::Error: Specified key was too long; max key length is 767 bytes
```

よくわからなかったので以下のコマンドでモデルを削除してリトライしてみることに

```ruby:
//モデル削除
rails d devise user
//モデル再作成
rails g decise user
//Migrate
rails db:migrate
```

そしたらこんなエラーが発生して、先のも進めず前にも戻れず泥沼にハマった。

```ruby:
Mysql2::Error: Table 'users' already exists
```

<h2>原因と解決法</h2>

⓵モデルが上手く削除されていない！

モデルの削除が不完全で、DB上から完全にテーブルが削除されていなかった。
https://qiita.com/Kuragasaki/items/7d98cf29341611fb189a

⓶テーブル作成時の設定を変更

DB作成時のカラムサイズが制限を超えているらしい。
Railsではカラムサイズを自動で判断するのだが文字コードによっては計算が上手くはまらず、MySQLの制限をオーバーしている模様。自動判断の設定を変更して制限以内に収まるようにする。
https://qiita.com/terufumi1122/items/9ea764618eba01144e09
【Unity】Final IKの中にモーション記録の機能があった件

こんにちはっ🌟八ツ橋まろんです

バーチャルYouTuberの中にはUnity + Final IKを駆使してキャラクターを動かし活動している人も多いことと思います。Final IKはその名の通りIKに関する有料アセットで、これ一つあればHTC Vive + Vive Trackerなどの構成でキャラクターを現実の動きとリンクさせることができます。

例)キャラクターとのリンク： 現実では中の人がだいたい同じ動きをしている
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">1年ぶりにVR Motion RecorderのIKの見直ししたらめっちゃ良くなった🌟<br><br>Final IKくんとちょっぴり友達になったよ <a href="https://t.co/jH1iFzxveJ">pic.twitter.com/jH1iFzxveJ</a></p>&mdash; 八ツ橋まろん🌰VtuberのMV制作🌰バーチャルマーケット5スタッフ (@Maron_Vtuber) <a href="https://twitter.com/Maron_Vtuber/status/1284698492938489856?ref_src=twsrc%5Etfw">July 19, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

また、バーチャルYouTuberの動画やミュージックビデオにおいては、表情や手の動きを「撮影の後で編集」するために「モーション記録」を行うことがあるかと思います。モーション記録をするためのアセットとして、Githubで公開されている[Easy Motion Recorder](https://github.com/neon-izm/EasyMotionRecorder)やAsset Storeの有料アセットなどが存在するようです。(弊調べ)

例)モーション記録：モーションはEasy Motion Recorderで記録し、手や表情、カメラワークなどを後付け編集している
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">【新着動画】『白日 / King Gnu』covered by 八ツ橋まろん<br><br>全編3D映像の曲ですっ💕衣装やらモーション、カメラワークなどがんばって自分でつくりましたー✨<br><br>オリジナルのミュージックビデオを是非ご視聴くださいっ🌟💕<a href="https://t.co/xFMj23C4Bc">https://t.co/xFMj23C4Bc</a> <a href="https://t.co/ln3iGaKUPf">pic.twitter.com/ln3iGaKUPf</a></p>&mdash; 八ツ橋まろん🌰VtuberのMV制作🌰バーチャルマーケット5スタッフ (@Maron_Vtuber) <a href="https://twitter.com/Maron_Vtuber/status/1282281048387121158?ref_src=twsrc%5Etfw">July 12, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
さて、Final IKの理解を深めようとFinal IKを眺めていたら、この中にモーション記録用のスクリプトが入っていることに気が付きました。

なるほど、これを使えばFinal IKだけでキャラクターの動きのリンクから撮影までできちゃうわけですね！知らなかった！！

ということで、このスクリプトを使うための簡単なやり方を紹介します。

①Hierarchyにある対象のキャラクターに"Humanoid Baker" component を追加、設定は画像の通り
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478685/b9549aa2-97ff-84bf-090f-ac660c6972c5.png)

②HierarchyにCanvasを作成
③Canvasの子にButtonを2つ作成し位置調整
④両方のButtonのButton ComponentのOnClickにキャラクターをドラッグ&ドロップし、片方の内容は"HumanoidBaker.StartBaking"にし、もう片方は"HumanoidBaker.StopBaking"にする。
![無題a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478685/cda04506-139b-ba80-0f65-7d2070df372c.png)

⑤シーンを再生して記録開始の方のボタンを押し、キャラクターを適当に動かしてみる

⑥記録終了の方のボタンを押すと、①で指定したフォルダにアニメーションが作成される

<↓↓↓↓使い方動画↓↓↓↓>
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">なんと、、、Final IKの中にモーション記録のスクリプトがあったのだ、、、💡✨<br><br>さっそく使ってみたよ‼‼軽くてとってもいい感じ‼‼<br>簡単な使い方のQiita記事も書いたのだっ🌟<a href="https://t.co/pBiMykm2fS">https://t.co/pBiMykm2fS</a> <a href="https://t.co/qZdOm3eRiS">pic.twitter.com/qZdOm3eRiS</a></p>&mdash; 八ツ橋まろん🌰VtuberのMV制作🌰バーチャルマーケット5スタッフ (@Maron_Vtuber) <a href="https://twitter.com/Maron_Vtuber/status/1296417474062286848?ref_src=twsrc%5Etfw">August 20, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

以上です。お疲れ様でした。

八ツ橋まろん
.NET系のフレームワークの概要についてそれぞれ調べてみた

現在Windowsアプリについて勉強しているのですが、「.NET ○○」と呼ばれるフレームワークがいくつかあり、それぞれ何が違うのかよくわからなかったので、.NET系のフレームワークには何があってそれぞれどういうものなのかについて調べてみました。

# .NET Framework

Windows 向けのアプリケーションを動作させるためのランタイム実行環境であり、アプリケーションフレームワークでもある。
様々な機能をライブラリとして提供しており、このライブラリを使用してWindowsの機能を簡単に実装することを可能にする。
Windows Formsアプリケーション、WPFアプリケーション、ASP.NETアプリケーションなどを作成することができる。

# .NET Core

オープンソースのソフトウェアフレームワーク。
.NET Framework とは異なり、Linux系 OS（Debian, Fedora、Ubuntu、etc）や macOS、Windowsなどクロスプラットフォームを対象としている。
これまではコンソールアプリやWeb、モバイルを開発対象としていたが、.NET Core 3.0よりWindows Formsや WPFアプリケーションがサポートされた。

# Xamarin

macOSアプリ、Windowsアプリ、iOSアプリ、Androidアプリなど、クロスプラットフォームを対象としたアプリケーションを作成することができる。
Xamarinを使用すると共通のコードでiOS、Android、Windownsアプリを一度に作ることが可能。
テクノロジー自体は.NET Frameworkと C#を基盤としているが、Monoというライブラリを使用している。

## Xamarin.Forms

オープンソースのUIフレームワーク。
Xamarin.Formsを使用すると、開発者は1つの共有コードベースから Xamarin.Android、Xamarin.iOS、Windowsのアプリケーションを作成できる。

## .NET MAUI

2021年11月頃に正式リリース予定。Xamarin.Formsの後継となる。

# .NET Standard

仕様であって、実体のないAPIの目録みたいなもの。
この仕様に従って.NET Frameworkや.NET Core、Xamarin、UWPといった様々な.NET実装においてAPIが実装されている。
それぞれの.NET実装は「固有部分のAPI」+「.NET Standard実装部分のAPI」からなる。
この.NET Standardに従って実装されたAPIというのは、どの.NET実装でも使えるAPIなので、このAPIだけを使ってライブラリを作成すれば、そのライブラリをすべての種類のアプリケーションの作成において使うことができる。
Base Class Libraryとも呼ばれる。

# まとめ

.NET CoreがWindows Formsや WPFアプリケーションをサポートしたことによって、今後はおそらく.NET Coreが.NET Frameworkに取って代わることが予想されます。
Xamarin.Formsに関しては、後継となる.NET MAUIと呼ばれるフレームワークが2021年11月頃に正式リリースされるらしいので、もしかしたら将来的には変わるかもしれません。
.NET系のフレームワークにはどういう種類があって、それぞれどういうものなのかが概要だけでもわかると、個人的にはドキュメントを読む際にスムーズに理解できる感じがしました。

# 参考URL

- [.NET Framework / .NET Standard / .NET Core とは何か？ | HIROs.NET Blog](https://blog.hiros-dot.net/?p=9086)
- [.NET Standardってなに？ - Qiita](https://qiita.com/shuhey/items/f1e3c03c724d54cec9bf)
- [Xamarin.Forms の概要 - Xamarin | Microsoft Docs](https://docs.microsoft.com/ja-jp/xamarin/get-started/what-is-xamarin-forms)
- [Microsoft、.NETのUIを統一する「.NET Multi-platform App UI」（.NET MAUI）を発表 - 窓の杜](https://forest.watch.impress.co.jp/docs/news/1254643.html)
Macでネットワーク機能のみ再起動する

## はじめに
Dockerの不具合などでたまにWi-Fiにつながらなくなることがあるので、その時に使う。


## コマンド
以下がコマンド
`ifconfig`コマンドで停止と起動が行える。

```bash
sudo ifconfig en0 down
sudo ifconfig en0 up
```


## cf.
https://apple.stackexchange.com/questions/284251/how-to-restart-network-services-on-sierra
neotree-mode における quicklook（チラ見）をMacOSの Quick Lookで実装した

neotreeというパッケージを用いることでファイルやフォルダをツリー表示できる。本パッケージについては多くの先人が参考記事を書いているので、ここでパッケージの詳細は述べない。

neotree-modeではSPCキーに、`neotree-quicklook`というチラ見のための関数がバインドされている。この関数はカーソル下のアイテムがファイルならばそれを別ウィンドウに開き、フォルダであれば展開することができる。ただ開いたファイルはそのままバッファとして残り続けるため、バッファを消すのが少々手間という問題がある。

一方、MacOSのFinderではSPCキーにQuick Lookがバインドされており、ファイル固有のアプリケーションを開かずとも、内容をプレビューできる優れものである。

本記事の主旨は表題の通りであり、MacOSのQuick Lookをneotree-modeでも利用可能にするものである。

以下がそのコードである。

```emacs-lisp

(require 'neotree)

(defun neotree-ql-dwim(file-path &optional arg)
  (interactive)
  (neo-global--select-mru-window nil)
  (call-process-shell-command
   (format "qlmanage %s -p\"$@\" &>/dev/null" file-path) nil 0))   

(defun neotree-quick-look2 ()
  "Quick Look like NeoTree open event."
  (interactive)
  (neo-buffer--execute nil 'neotree-ql-dwim 'neo-open-dir)
  (neo-global--select-window))

(with-eval-after-load "neotree"
  (define-key neotree-mode-map (kbd "SPC") 'neotree-quick-look2))
```

追記 (2024/07/08)：

Ubuntuで同様の機能を実現する記事を書いた：

https://qiita.com/ballforest/items/d1f6295f4ec7b6420b24

追記 (2024/07/13)：
コードを見直し、*Async Shell Command* バッファのポップ周りのごちゃごちゃした操作をなくした。
【Vue.js】ref属性でマーキングしたコンポーネントを$refsで取得

#生成されたコンポーネントを取得できる$refs

取得したいコンポーネントのタグ内に、**ref属性**を付与することでマーキングし、
実際に**$refs**でマーキングしたコンポーネントを取得できる。

###注意点

もちろんすでにレンダリングされたコンポーネントを取得するので、VueライフサイクルにおけるbeforeMount以下のプロパティ内では使用することはできない。

[Vueのライフサイクルについてはこちら](https://qiita.com/beanbeenzou/items/cfccfcf0d941f192638d)


#コンポーネントを特定させる

```vue

<template>
  <v-container ref="hoge">
  ・・・
  </v-container>
</template>


<script>
    let hogeComponent = this.$refs.hoge
</script>
```

特定したい要素にref属性を付与して、実際の処理する時の対象指定として$refsを使用して特定させる。


#配列の要素による、コンポーネントも特定させることができる

```vue

<template>
  <v-container>
    <v-row>
      <v-col v-for="item in items" ref="hoge">
      </v-col>
    </v-row>
  </v-container>
</template>


<script>
    let item1 = this.$refs.hoge[0]
</script>
```

ref属性の配列の要素の中でも、0番の要素だけを取得できる。
KerasでじゃんけんのAIを作った話

# はじめに
今回、初心に帰ってKerasでじゃんけんをするAIを作ってみました。その結果、まあまあ強いAIができて、ランダムに手を出すCPU(?)とじゃんけんをさせたところ、面白い結果が得られたので記事にしてみました

# 結果
まず先に結果を書きたいので、ソースコードは割愛します。
ランダムマンとじゃんけんを1万回させた結果、なんと、AIが5000回勝ち、ランダムマンに2倍の差をつけていました！

| AIの勝ち | ランダムの勝ち | あいこ |
|:-------:|:------------:|:-----:|
| 5074    | 2587         | 2339 |

つまり、AIは乱数をある程度予測していた、ということになります。
ということは、乱数にもある程度の規則があるのでは？

# ソースコード
以下はソースコードです

```Python:main.py
from keras.models import Sequential
from keras.layers import Dense
from keras.utils import to_categorical
import numpy as np
import random

#勝敗の判定
def witch(opp,me):
    if (opp==me):
        return 0
    if (opp==0 and me==1) or (opp==1 and me==2) or (opp==2 and me==0):
        return 1
    else:
        return 2

#どのくらい記憶しておくか
input_len=4

#ネットワーク構築
model=Sequential()
model.add(Dense(128,activation='sigmoid',input_shape=(input_len*2,)))
model.add(Dense(128,activation='sigmoid'))
model.add(Dense(3,activation='softmax'))
model.compile(loss='categorical_crossentropy',
              optimizer='Adam',
              metrics=['accuracy'])

# print(model.summary())

#　ランダムに初期化
opp=[]
for i in range(input_len):
    opp.append(random.randrange(0,3))
me=[]
for i in range(input_len):
    me.append(random.randrange(0,3))
    
#学習用データを作成、ランダムに初期化しておく
tmp=[]
for i in range(input_len*2):
    tmp.append(random.randrange(0,3))

X=np.array([tmp])
y=np.array([[1,0,0]])

# 0:グー　1:チョキ　2:パー
hand=["グー","チョキ","パー"]

# 勝敗のカウント
history=[0,0,0]


for i in range(10000):
    
    # 状況の作成
    state=np.array(opp+me)
    state=np.reshape(state,(1,)+state.shape)
    
    #入力
    # print("0:グー　1:チョキ　2:パー")
    try:
        # hand_opp=int(input())
        hand_opp=random.randrange(0,2)
    except ValueError:
        print("0から3までの値を入力してください")
        continue
    if not(0<=hand_opp<=3):
        print("0から3までの値を入力してください")
        continue
    if (hand_opp==3):
        print("履歴をリセットしました")
        history=[0,0,0]
        continue
    
    #相手の手を予測して、適切な手を選ぶ
    hand_me=(np.argmax(model.predict(state), axis=-1)-1)%3
    
    result=witch(hand_opp,hand_me)
    
    # 判定+表示
    print("AI："+hand[hand_me[0]]+"\nあなた："+hand[hand_opp])
    if(result==0):
        print("結果：あいこ")
        history[2]+=1
    elif(result==1):
        print("結果：あなたの勝ち")
        history[0]+=1
    elif(result==2):
        print("結果：AIの勝ち")
        history[1]+=1
    print("あなた:{} AI:{} あいこ:{}".format(history[0],history[1],history[2]))
    
    #学習用データに反映させる
    X=np.append(X,state,axis=0)
    
    ans=np.array([hand_opp])
    ans=np.reshape(ans,(1,)+ans.shape)
    ans=to_categorical(ans,3)
    
    y=np.append(y,ans,axis=0)
    
    #メモリを圧迫しないよう、最後の方のデータは消しておく
    if(X.shape[0]>10):
        X=np.delete(X,0,axis=0)
        y=np.delete(y,0,axis=0)
    
    model.fit(X[-4:], y[-4:], epochs=5,verbose=0)
    
    #ステータスの更新
    opp.pop(0)
    opp.append(hand_opp)
    me.pop(0)
    me.append(hand_me[0])
    # print()
```

おおまかに、
・ユニット128個からなる全結合層2層と、出力層を構築
・自分の出した手と相手の出した手をそれぞれ4つ覚えておく
・学習
こんな感じです。

コメントをいい感じに外したりつけたりすれば、自分 vs AIもできます
Tomcatサーバ始動時ポートが開いていないと怒られるので、キルする方法をメモっとく。

iPhoneで夢を見るためとか、PCを再起動する機会が多くて、Eclipse起動したらTomcatサーバ繋がらないとかよく起こる。

本当しょっちゅうポートが開いてないと怒られて調べるけども、記憶力が雑魚なためすぐ忘れてしまうので、自分のためにメモ。

## コマンドプロンプト
一応管理者権限で…。

```
netstat -aon | find "[ポート番号]"
```

PIDが表示されるので、

```
taskkill /pid [キルしたいPID]
```

大概これがでて管理者権限だろうが切れない。

```
エラー: PID ~~ のプロセスを強制終了できませんでした。
理由: アクセスが拒否されました。
```

ので、タスクマネージャーの詳細から、PID見て問題ないものであればキルしている。  
今のところこれで特に不具合はない。
通常のCloudFormationテンプレートをServerless Frameworkで読み込んで実行する

# きっかけ
AWS での Linux 踏み台ホスト作るときに、クイックスタートのテンプレートがあるのですが
できればServerless Frameworkで叩ける様にしたいと思ったけど
そのまま読み込めないのかなと探したら、素晴らしいプラグインあるじゃないですか！というこで記事に残しておく

[AWS での Linux 踏み台ホスト - クイックスタート](https://aws.amazon.com/jp/quickstart/architecture/linux-bastion/)

[このクイックスタートのソースコードを見る](https://github.com/aws-quickstart/quickstart-linux-bastion)

# Serverless Plugin Nested Stacks
https://www.serverless.com/plugins/serverless-plugin-nested-stacks

ネストされたスタックを通常のcloudformationとして記述し、それらをサーバーレスフレームワークと簡単に統合します。

## いつものごとくインストール
```
$ npm install serverless-aws-nested-stacks --save-dev
```

## serverless.ymlにプラグインとして、追加
```serverless.yml
plugins:
  - serverless-aws-nested-stacks
```

## customに、nested-stacksを記述
```
custom:
  nested-stacks:    
    location: nested-stacks # location:スタックファイルを配置するディレクトリ
                            # 1箇所しか指定できないので、ここにテンプレートを集めるしかない
    stacks:
      - id: VPCStack # Logical ID (Required)
                     # ${self:service}-${self:provider.stage}-VPCStack-XXXXXXXXXXXX
                     # この様なスタック名になる
        template: aws-vpc.template.yaml # テンプレートファイル名 (Required)
        enabled: true # optional flag for enabled/disabling substack
        timeout: 60 # Minutes before stack creation times out.
        parameters: # スタックに渡すパラメータを指定できる
          - AvailabilityZones: 'ap-northeast-1a,ap-northeast-1d'
          - KeyPairName: bastion_key
          - NumberOfAZs: '2'
          - PrivateSubnet1ACIDR: 10.0.0.0/19
          - PrivateSubnet2ACIDR: 10.0.32.0/19
          - PublicSubnet1CIDR: 10.0.128.0/20
          - PublicSubnet2CIDR: 10.0.144.0/20
          - VPCCIDR: 10.0.0.0/16
          - VPCTenancy: default
      - id: BastionStack # Logical ID (Required)
                         # 2つめのスタック
                         # ${self:service}-${self:provider.stage}-BastionStack-XXXXXXXXXXXX
                         # この様なスタック名になる
        template: linux-bastion.template # テンプレートファイル名 (Required)
        enabled: true # optional flag for enabled/disabling substack
        timeout: 60 # Minutes before stack creation times out.
        parameters: # スタックに渡すパラメータを指定できる
          - BastionAMIOS: Amazon-Linux2-HVM
          - BastionHostName: LinuxBastion
          - BastionBanner: 'Welcome! Bastion'
          - BastionInstanceType: t2.micro
          - BastionTenancy: default
          - EnableBanner: false
          - EnableTCPForwarding: false
          - EnableX11Forwarding: false
          - KeyPairName: bastion_key
          - NumBastionHosts: 1
          - PublicSubnet1ID: !GetAtt 
            - VPCStack
            - Outputs.PublicSubnet1ID
          - PublicSubnet2ID: !GetAtt 
            - VPCStack
            - Outputs.PublicSubnet2ID
          - QSS3BucketRegion: ap-northeast-1
          - QSS3BucketName: aws-quickstart
          - QSS3KeyPrefix: quickstart-linux-bastion/
          - RemoteAccessCIDR: 0.0.0.0/0
          - VPCID: !GetAtt 
            - VPCStack
            - Outputs.VPCID
```

## 実行すると、3つのスタックが作成される
1. bastion-prod
2. bastion-prod-VPCStack-XXXXXXXXXXXX
3. bastion-prod-BastionStack-XXXXXXXXXXXX
【メモ】C#におけるボックス化（boxing）と回避方法

#はじめに
Genericsが使うのでボックス化について意識することは減りました。
が、ボックス化について人に説明する機会があったので曖昧だったところを自分の為にまとめておきます。

# ボックス化
値型をobject型に代入するときに行われる処理。
参照型であることが必要な場面においても値型を使用できるようにする仕組み。

- 値型はスタック、参照型はヒープ上に実値が置かれる。
- object型は参照型なので、値型をobject型に代入したときに実値はヒープにコピーされる。（ボックス化）
- ヒープに実値コピーされるとき、元の型情報も付与される。

#ボックス化解除
ボックス化された値型のコピーを取り出すこと

- ボックス化されたobject型は実値がヒープ上に置かれている。
- ボックス化されたobject型を元の型に戻す（キャスト）するときに実値がスタックにコピーされる。（ボックス化解除）
- 型情報が間違えていたときはInvalidCastExceptionが発生する。

#パフォーマンス影響
>簡単な代入と比べて、ボックス化およびボックス化解除は負荷の大きいプロセスです。 値型をボックス化するときは、新しいオブジェクトを割り当てて構築する必要があります。 ボックス化ほどではありませんが、ボックス化解除に必要なキャストも大きな負荷がかかります。 詳しくは、「パフォーマンス」をご覧ください。

c.f. https://docs.microsoft.com/ja-jp/dotnet/csharp/programming-guide/types/boxing-and-unboxing#performance

#デメリット
- ボックス化はオブジェクトの一時的なコピーを生成するため、コストがかかる。
- ボックス化解除はオブジェクトの一時的なコピーを生成するため、コストがかかる。
- ボックス化解除時のキャストにもコストがかかる。
- ヒープ上の領域確保は、スタックと比べると重たい処理。
- キャスト時、型情報が間違えていたときはランタイムエラー（InvalidCastException）が発生する。

#ボックス化を起こさないために
- object型を使用しない
- Genericsを使用する


# 参考
- https://ufcpp.net/study/csharp/RmBoxing.html
- https://www.amazon.co.jp/Effective-C-%E3%83%93%E3%83%AB-%E3%83%AF%E3%82%B0%E3%83%8A%E3%83%BC/dp/4798119539
【Python】データサイエンス100本ノック（構造化データ加工編） 031 解説

- データサイエンス100本ノックをやりきる会を作りました🎉
- こちらの[Slack招待URL](https://join.slack.com/t/data-science-100nocks/shared_invite/zt-gfncg9vm-8W8b3UrDg8R~TKaqUkQpgw)からご参加ください！！
- ぜひ一緒に励まし合いながら、データサイエンス100本ノックをやり切りたいと思っています！

##Youtube
[動画解説](https://youtu.be/zA654bP6vWs)もしています。

##問題
P-031: レシート明細データフレーム（df_receipt）に対し、店舗コード（store_cd）ごとに売上金額（amount）の標本標準偏差を計算し、降順でTOP5を表示せよ。

##解答
```:コード
df_receipt.groupby('store_cd').amount.std(ddof=0).reset_index().sort_values('amount', ascending=False).head(5)
```

##出力
| 	| store_cd | amount |
|:-----------|------------:|:------------:|
| 28 | S13052 | 663.391816 |
| 31 | S14011 | 553.456916 |
| 42 | S14034 | 544.903736 |
| 5  | S13001 | 543.536561 |
| 12 | S13015 | 543.409938 |

##解説
・PandasのDataFrame/Seriesにて、同じ値を持つデータをまとめて処理し、同じ値を持つデータの合計や平均などを確認したい時に使用します。
・**'groupby'は、同じ値や文字列を持つデータをまとめて、それぞれの同じ値や文字列に対して、共通の操作（合計や平均など）を行いたい時に使います**。
・**'<列名>.std(ddof=0)'は、標本標準偏差を算出する際に'N-ddof(=0)'で割ることを指します**。 
・'.reset_index()'は、'groupby'によってバラバラになったインデックス番号を0始まりの連番に振り直す操作を行いたい時に使います。
・'.sort_values('amount', ascending=False)'で'amount'を降順に表示しています。**

※こちらのコードでは不偏標準偏差を出力します。不偏標準偏差の場合は、'ddof=1'となります。

```:コード
df_receipt.groupby('store_cd').agg({'amount':'std'}).reset_index().sort_values('amount', ascending=False).head(5)
```
【簡単】コマンドラインで複数のGeoJSONをマージする

みなさん、こんにちは。

突然ですが、複数のGeoJSONをマージしたいと思った事はありませんか？

調べてみると、超簡単だったので今日はその方法をご紹介します。



## geojson-merge とは？
Mapbox社製のnpmモジュール。複数のGeoJSONファイルをマージしてくれる。

https://github.com/mapbox/geojson-merge

##前準備

今回はCLIでやってみます。（npmモジュールとして読み込んで、[Javascript内で使う](https://github.com/mapbox/geojson-merge#api)こともできます。）

```
$ npm install -g @mapbox/geojson-merge
```

`$ geojson-merge -h`でインストールされているか確認します。

もし`geojson-merge: command not found` と表示されたら、パスが通ってない可能性があるので、ターミナルを閉じて開き直して下さい。

Windowsは、インストール方法が違うようです。[README (英語)](https://github.com/mapbox/geojson-merge#windows-instructions)を参照。

## マージ

```
$ geojson-merge file1.geojson file2.geojson > combined.geojson
```

### 2個以上のGeoJSONファイルを一括でマージ
```
$ geojson-merge folder/*.geojson > combined.geojson
```

## 感想・まとめ

GISで系で何かやりたいと思った時、Mapboxの[GitHubレポジトリ](https://github.com/mapbox)を探してみるのはオススメです。

この記事を良いなと思ってもらえたら、 LGTMやシェアお願いします。
GitHub の機能 GitHub Pages でウェブサイトを公開する為の手順

## この記事を読むとわかること
GitHubの設定をデフォルトから変更するだけでウェブページをネット上に公開する方法がわかります。

## 前提条件
OSバージョン: macOS Mojave Version 10.14.6
gitバージョン: 2.27.0
Gitがインストール済みであること
GitHubのアカウントを持っていること
GitHubに公開したいウェブサイトのhtmlファイルが既に公開済みであること

### 1. GitHubのリポジトリにて設定画面を開く
リポジトリ名の下で  [Settings] をクリックします。
![Screen Shot 2020-08-20 at 18.52.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668194/3b8a7385-3bbd-faca-4465-104af932aa50.png)

### 2. 設定画面のGitHub Pagesの項目の設定を変更
GitHub Pagesの項目まで下にスクロールして、Sourceのプルダウンメニューにて、デフォルトでは"None"になっている箇所を、"Select branch"を選び、ブランチ"master"を選びます。
![Screen Shot 2020-08-20 at 17.45.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668194/22fe6f26-838a-236f-5296-385fd0846767.png)

### 3. ウェブサイトのソースファイルを選択する
"Select branch"のプルダウンメニューからブランチを選択した後、ディレクトリを選択するためのプルダウンメニューが表示されますので、"root"か"docs"か選択します。
以下の例ではdocsフォルダを作っていないので、"root"を選択しています。
そして、"Save"を押して設定を保存します。これでウェブサイトは公開されました。

以下の図の右上に表示されているURLから公開されたウェブサイトにアクセスできます。
直後にアクセスしてもエラーになりますが、サイトが正常に表示されるまでに数分かかります。

![Screen Shot 2020-08-20 at 18.32.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668194/be9bbe25-8b00-4a93-69f2-30a0aa9a8e12.png)


終わり。


## 参考情報
[Creating a GitHub Pages site (GitHub.com Help Documentation)]
(https://docs.github.com/en/github/working-with-github-pages/creating-a-github-pages-site)
平仮名・片仮名の小文字を大文字にするワンライナー

# 概要
```python
translate_large_kana = lambda x: x.translate(dict([(ord(k), ord(k) + 1) for k in ('ぁ', 'ァ', 'ぃ', 'ィ', 'ぅ', 'ゥ', 'ぇ', 'ェ', 'ぉ', 'ォ', 'っ', 'ッ', 'ゃ', 'ャ', 'ゅ', 'ュ', 'ょ', 'ョ')]))
translate_large_kana('シャツ')
# シヤツ
```

# 何コレ？
- `ord('ぁ')` と `ord('あ')` みたいな小文字と大文字は ord の差が 1 なので、 `chr(ord('ぁ') + 1) == 'あ'`になる
- ↑の概念をもとに、小文字を大文字に変換する辞書を作成して、 str.translate する
- という lambda 関数を作った
[PHP]特定のYouTube動画の情報を取得する

特定チャンネルの動画情報だったりプレイリスト一覧を取得したいとき、YouTubeAPIv3を使うと思います。
PHPだと、ComposerとかでGoogle公式ライブラリを使うのもいいですが**特定の動画の場合はもっとかんたんに動画情報を取得できます。**

具体的にはAPIから動画情報が格納されているJSONを呼び出します。
以上！

## JSONのURL構造

`https://www.googleapis.com/youtube/v3/videos?id=[動画ID]&key=[APIKey]&part=snippet,contentDetails,statistics,status`

[APIKey]にはGoogleAPIから取得したAPIキーを入力してください。
キーの取得方法はネットに溢れかえってるんで自分で調べてください。

## サンプルコード
YouTubeAPIv3から特定動画のタイトルを取得してみます。

```php:yt.php
$api_key = "APIキーを入力"
$video_id = "動画IDを入力"
$url = "https://www.googleapis.com/youtube/v3/videos?id=$video_id&key=$api_key&part=snippet,contentDetails,statistics,status";
$json = file_get_contents($url);
$getData = json_decode( $json , true);
foreach((array)$getData['items'] as $key => $gDat){
	$title = $gDat['snippet']['title'];
}
// タイトルをechoする
echo $title;
```
Webアプリ開発ロードマップ

# Webアプリ開発ロードマップ

facebookのようなSNSサイトを作っていくことで、Webアプリの開発基礎を学ぶ

## ターゲット

プログラミング経験者でWebアプリ開発未経験の人向け。

## 目次

[第1回：Web開発の変遷](https://qiita.com/radiance1104/private/91956fa38d048d824f16)
[第2回：Angularの環境構築](https://qiita.com/radiance1104/private/eccc570b9d2515eef7e8)
[第3回：ログイン画面を作る（データバインディング）](https://qiita.com/radiance1104/private/0fc9865c8f75817fba85)
[第4回：ニュースフィード一覧画面を作る(画面遷移とディレクティブ)](https://qiita.com/radiance1104/private/7ca6338ce4ec291a95b9)
[第5回：ニュースフィードの日付フォーマットを変換する(パイプ)](https://qiita.com/radiance1104/private/c75fdaf110781c4d9ca9)
[第6回：Node.jsの環境構築](https://qiita.com/radiance1104/private/a98282db3948cfd59958)
[第7回：ニュースフィード取得サーバIFを作る](https://qiita.com/radiance1104/private/b803056636217b2a35a9)
[第8回：ニュースフィード取得サーバIFをWebアプリから呼び出す](https://qiita.com/radiance1104/private/fd3e8153c8676d3de07e)
[第9回：ニュースフィード投稿サーバIFを作る](https://qiita.com/radiance1104/items/bea119aa73b1648d3bd6)
[第10回：ニュースフィード投稿サーバIFをWebアプリから呼び出す](https://qiita.com/radiance1104/items/8f0476293cbc8ed49608)
第11回：データベースを使う
第x回：データベースとサーバIFを繋ぐ
第x回：ログインIFを作る
第x回：ログインIFをWebアプリから呼び出す
第x回：ログイン状態で画面遷移を抑止する（Guard）
第x回：AWS基礎
第x回：Cognitoを使う
第x回：API GatewayをLambdaを使ってみる
第x回：DynamoDBに繋いでみる
NugetしたPowerShellModuleが実行できない時

環境
Windows10
PowerShell 5.1.18362.752
Azure触っていて証明書エクスポートなど込み入った操作が必要なシーンがあり、
Azコマンドをパワーシェルにインストールした際、実行できず困ってしまいました。

パワーシェルで実行できない時のHowToってきっと山ほど資料があるでしょうが、自分の備忘録的に対処したことを記述します。

パワーシェルのエラー文言からリンクのページを読んだところExecutionPolicyというスクリプトの実行権限を変更する必要があるようです。
[Microsoftの記事](https://docs.microsoft.com/ja-jp/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-7)

まず、デフォルトのExecutionPolicyが何になっているのかを確認

```powershell
Get-ExecutionPolicy
```
そうするとRestrictedという設定が帰ってきます。
この設定はWindowsクライアントのデフォルト設定で、ps1xml, psm1, ps1といった全てのスクリプトファイル実行が禁止されています。

では、どの権限に変更すれば良いのか？
Bypassというポリシーに変更してください。
この設定にしておけば、Nugetしてきたモジュールなども問題なく実行可能です。

設定は次のコマンド（ポリシー名をBypassにしてください）

```powershell
Set-ExecutionPolicy -ExecutionPolicy <ポリシー名>
```

＊このExecutionPolicy変更時は管理者権限でPowerShellを起動しておく必要ありです。

この設定変更で、AZコマンドなどNugetしてきたスクリプトが実行できるはず、、、です！

参考：[About Execution Policies](https://docs.microsoft.com/ja-jp/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-7)
君の名は

立花「ごめん、間違ってサーバ OSごと落としちゃったから、データセンター行って電源入れてくるわ」

宮水「はぁ？ なんでそんなことになったの？」

立花「Tomcatを落とそうと思って、間違って`shutdown`を実行しちゃった」

宮水「なんでTomcatを落とそうと思って`shutdown`実行することになるの？」

立花「それが・・・Tomcatを落とすshellの名前が・・・」

宮水「まさか・・・」

大事なshell。忘れたくないshell。忘れちゃダメなshell。何だ、何だ、何だ？ 名前は...！

君の　名前は－－－　`shutdown.sh`

# でも、確かなことがある。私たちは絶対、見ればすぐに分かる。

見ればすぐわかるように、わかりやすいshellの名前を付けたら、間違ってOSのshutdownコマンドを実行してしまった話。

うっかり他のコマンドやシェルを実行してしまわないように、名前は`stop-tomcat.sh`とかユニークな名前をつけましょう。
.NET 5 Preview を Windows環境で試す方法

# はじめに

.NET 5 Preview を Windows環境の Visual Sutidio 2019 で試す方法の紹介です。
(オプションダイアログの設定が必要なのに気付かなくて、少しハマったので)

# .NET 5 SDK のインストール

以下のサイトから、.NET 5 の SDK をインストールします。
[Download .NET 5.0](https://dotnet.microsoft.com/download/dotnet/5.0)

赤枠部分がSDKのインストーラです。
ちなみに、右側はランタイムで、.NET 5 のプログラムを動作させるために必要なものです。
ここでは、開発するために必要なSDKをインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403606/cc7efa96-a0b4-f408-4bd4-af0fa71e63dc.png)

# オプションダイアログの設定

.NET 5 SDK をインストールするだけでは、まだ .NET 5 は利用できません。
[オプション]ダイアログの [プレビューの .NET Core SDK を使用] のチェックボックスを有効にする必要があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403606/08a12f97-2acf-87dd-a391-fd49c2cc9888.png)

# プロジェクトのプロパティの設定

上記の手順を実施後に、プロジェクトの [プロパティ] の [対象のフレームワーク] の選択肢を表示すると、 [.NET 5] が選択できるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403606/ce971e4e-b8cb-2d04-4557-24b5cd1ab6ce.png)

# まとめ
.NET 5 を設定されたプロジェクトは、.NET 5 SDK をインストールしていない人の環境では、コンパイルエラーになります。
従って、チームで開発しているソースコードを .NET 5 に変更する際は、全員がSDKをインストールしてから行う必要があります。

ちなみに私は「Serverless LT 初心者向け」というコミュニティを運営しています。
社外発表することに興味があるけど、ハードルが高くてなかなか機会が得られないという発表初心者が集まるオンライン発表大会を毎月開催していますので、よろしければご参加ください。
[Serverless LT 初心者向け - connpass](https://serverlesslt.connpass.com/)

Twitterでも開発に役立つ情報を発信しています → [@kojimadev](https://twitter.com/kojimadev)
ActionControllerエラー集（Ruby on Rails）※随時更新

# NoMethodError in [コントローラー名]#[アクション名]→undefined method `[キーワード]' for #<>

→[コントローラー名]の[アクション名]に[キーワード]のメソッドが定義されていない。

# Sprockets::Rails::Helper::AssetNotFound in [コントローラー名]#[アクション名]→The asset "" is not present in the asset pipeline.

# unknown attribute '[カラム名]' for [テーブル名].

→[テーブル]に[カラム]が見つからない。

【原因】
　引っ張ってきたインスタンス変数やテーブルのカラムにないカラム名を指定してしまっている。

　私の場合編集画面で、

```ruby:edit.html.haml
  = form_with model: @item, do |f|
    = f.file_field :[カラム名]
```

　で指定したカラムがテーブルに存在していませんでした。

【対処】
　①マイグレーションファイルに指定のカラムがあるか
　②マイグレーションファイルの指定のカラムにスペルミスはないか
　を確認

　ミスがあった場合、
　マイグレーションファイルを修正
　→rails dbコマンド周りは[こちら【逆引きrails dbコマンド集】
](https://qiita.com/tm762108/items/1691e49c6d6efb267daf)
[参考記事](https://qiita.com/Ayaka_ramens/items/f0c68b08fcf6145c2b17)
VScodeをきれいにアンインストールする（Windows）

自分のための備忘。

vscodeはWindowsのアンインストーラーを使ってアンインストールしても残骸が残る。
きれいに入れ直したいので、残骸を残さないためには

- `C:\Users\xxxxxxx`フォルダ配下の　`.vscode`フォルダ（拡張機能の保管場所らしい） 

と、同じ階層にある

- `\Appdata\Roming\Code`フォルダ (おそらくここに開いているファイルとか諸々の情報がある）

を削除する。
その後、インストールするととイチから入れ直せる。
django,wagtailのススメ~なぜpythonでwebサイトを開発するのか~

以下からどうぞ
↓↓↓↓↓↓
[PYTHON製WEBフレームワークDJANGOのススメ](https://ny-official.com/blog/2020/08/20/python%E8%A3%BDweb%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AFdjango%E3%81%AE%E3%82%B9%E3%82%B9%E3%83%A1/)
jQueryUIのDatepickerをBootstrapのmodal上に表示する

こちらの記事の改良版です。

[BootstrapのモーダルでjQueryUIのDatepickerのz-index問題を解消する小技 - Qiita](https://qiita.com/yamadayamada_jp/items/a2731f61c403b392b4ef)

## 環境

* jQuery UI 1.12

## コード

```js
$.datepicker.setDefaults({
  // options ...
  beforeShow: function() {
    if ($(this).parents('.modal').length) {
      $(this).css('z-index', String(parseInt($(this).parents('.modal').css('z-index') | 0, 10) + 1))
    }
  }
});
```
np.logとかで-infにしないようにしたい

## TL;DR

`np.clip`で最小値（最大値）を指定する！

## 実行環境

- python: 3.7.7
- numpy: 1.19.1

## なにがおきるの?

pythonのfloat型ではおおよそ`1e-323`未満の値は0.0になってしまいます．
pythonのfloat型は多くの環境では,-1.7976931348623157e+308から1.7976931348623157e+308の間で範囲を取りうる．

```bash
$ python
>>> a = 1e-323
>>> b = 1e-324
>>> print(a)
　1e-323
>>> print(b)
　0.0
```

bが0.0になってしまうため，このbに対してlogをとってしまうとエラーがでて-infになってしまいます．
また，0割の警告も出てきます．

```bash
>>> import numpy as np
>>> b = 1e-324
>>> np.log(b)
　__main__:1: RuntimeWarning: divide by zero encountered in log
　-inf
```



# 解決策

`np.clip`で最小値(最大値)を指定してあげる．

```bash
>>> import numpy as np
>>> b = 1e-324
>>> np.log(np.clip(a=b, a_min=1e-323, a_max=1e+10))
　-743.7469247408213
```

最小値(最大値)を指定してあげることで，floatの範囲外の値が入った時でも一応計算できるようになります．ただ，最小値（最大値）を超えた値はそれぞれ設定した値に丸め込まれてしまうのでその分誤差が大きくなってしまうデメリットもあります．
逆引きrailsコマンド集【DB編（入門〜初級）】

# はじめに
Ruby on Railsで開発をしていて、MySQLのDBを修正する機会が何度もあり、その都度エラーやデータの入れ直しが発生するため、コマンドの概要ともう少し掘り下げたところまでそれぞれの意味がおさらいできればと思い、記事にしました。
ご指摘等あればよろしくお願いいたします。

# 入門編

## ①モデルファイルを作成したので、DBに反映させたい→migrate
rails g modelでモデルファイル作成後、

```terminal
$ rails db:migrate
```

## ②DBを作ったが、不要になったので削除したい→drop

```
$ rails db:drop
```

## ③１つ前に反映したDBテーブルを修正するために、migrationを戻したい→rollback

```terminal
$ rails db:rollback
```

## 入門編まとめ
・migrateを実行すると、モデルファイルに基づいてマイグレーションファイルが作られる。
・作られたマイグレーションファイルを修正し、DBに反映するためには一度rollbackを実行しDB上から該当のテーブルを下げないといけない。（この際DBに入力したデータは削除される）

# 初級編
## ①現在、どのマイグレーションファイルがDB上で有効なのか確認する→migirate:status

```rb
$ rails db:migrate:status
```
適用されている場合はup、適用されていない場合はdownとしてファイルがターミナル上に表示される。

## ②任意のファイルまでrollbackを戻したい場合→rollback STEP=[ ]

```terminal
$ rails db:rollback STEP=[戻したいステップ数]
```

[参考記事:【Rails】$rails db:rollbackしたい時の間違えない手順](https://qiita.com/s_tatsuki/items/3e1f119c91e21b8f0c33)


## ③作成したDBを一旦削除して再度作成する（その１）→reset

```
$ rails db:reset
```

## ④作成したDBを一旦削除して再度作成する（その２）→migrate:reset

```
$ rails db:migrate:reset
```

## 初級編まとめ
・【resetとmigrate:resetの違い】どちらもDBを一旦dropして再度作成することは同じだが、どのファイルを元に作り直すかが異なるため、__migrate:resetではマイグレーションファイルを修正していればその内容も反映して作成されるが、migrate:resetではそうならない__ようだ。

詳しくは以下（常にmigrate:resetを使っていれば良さそうなものだが、そうもいかない時があるようだ）
[参考記事：rake db:reset と rake db:migrate:reset の違い]
(https://easyramble.com/difference-bettween-rake-db-migrate-reset.html)
[参考記事：rails db:migrate:resetできなかったのでrails db:resetした](https://qiita.com/mom0tomo/items/a252ff8a42eea00f81b1)

# 中級編

## 入力したDBの内容を消さずにカラムを修正したい→g migrationでカラム追加→db:migrate→カラム追加用のmigrationファイル削除

[参考記事：Rails カラム名変更方法](https://qiita.com/libertyu/items/93acd8733e34b1d0a63c)
[参考記事：マイグレーションを使ったカラムの追加、削除、データ型の変更　[ 自分用メモ ]](https://qiita.com/dawn_628/items/13fa64dc6d600e921ce3)

# まとめ

| コマンド 　　| 　　　概要 | オプションその他 |
|:-----------|------------:|:------------:|
| migrate | DBを作成 | |
| drop 　　| DBを削除 | |
| reset　　　　 | drop + migrate |　マイグレーションファイルの修正は反映されない　|
| migrate:reset |　drop + migrate　|マイグレーションファイルの修正も反映される|
| migrate:rollback | １つ前に反映したmigrateまで| STEP=[戻したいステップ数]で任意のmigrateまでDBを戻す|
| migrate:status |現在どこまでmigrateが反映されているか確認する||

[参考記事](https://qiita.com/kouhei_matuura/items/4f30b5658aaa70618834)
ffmpeg で動画の音量を調整する

自分の声を入れた動画を作ったとき，どうも音声レベルが小さくて聞き取りにくいときの調整方法です．自分用のメモなので，間違いなどあればご指摘ください．

2020/08/24
@nico_lab さんからのコメントを参考に修正しました．

# 環境
- MacOS: 10.15.6 (Catalina)
- ffmpeg: 4.2.2

# loudnorm フィルタ

ffmpeg にある loudnorm フィルタを使うと，EBU_R_128 とかいう方法を使って良い感じで音量を調整してくれるらしい．

https://ffmpeg.org/ffmpeg-filters.html#loudnorm
https://en.wikipedia.org/wiki/EBU_R_128

loudnorm フィルタでは，シングルパスとダブルパスの二つの方法がサポートされていて，前者は一回の処理で出力ファイルまで得られ，後者は一度対象ファイルの状況をチェックしてから，二度目の処理で出力ファイルを得る．ストリーミングしながら変換するときは前者なんだろうけど，動画ファイルの音量を調整するときには後者の方が良いのだと思う（たぶん）．

# ダブルパスでの音量調整

```
$ ffmpeg -i input.mp4 -vn -af "loudnorm=I=-14:TP=0.0:print_format=summary" -f null - 
```
のようにすると，解析結果が出力される．

```
Input Integrated:    -24.1 LUFS
Input True Peak:      -3.0 dBTP
Input LRA:             6.8 LU
Input Threshold:     -34.7 LUFS

Output Integrated:   -16.0 LUFS
Output True Peak:     +0.0 dBTP
Output LRA:            5.1 LU
Output Threshold:    -26.5 LUFS

Normalization Type:   Dynamic
Target Offset:        +2.0 LU
```

このうち Input の値を2回目の処理で入力する．measured_???とoffsetに上記で測った結果を入れる．（2020/08/24修正）

```
$ ffmpeg -i input.mp4 -af "loudnorm=I=-14:TP=0.0:measured_I=-24.1:measured_TP=-3.0:measured_LRA=6.8:measured_thresh=-34.7:offset=2.0:print_format=summary" -c:v libx264 -crf 30 -r 5 -s 1280x720 out.mp4
```

上では，画像サイズの変更も行っている．この処理を行うとめでたく音量調整が完了．

# 結果

上記のコマンドの実行結果は

```
Input Integrated:    -24.1 LUFS
Input True Peak:      -3.0 dBTP
Input LRA:             6.8 LU
Input Threshold:     -34.7 LUFS

Output Integrated:   -15.1 LUFS
Output True Peak:     +0.0 dBTP
Output LRA:            4.7 LU
Output Threshold:    -25.7 LUFS

Normalization Type:   Dynamic
Target Offset:        +1.1 LU
```

となっていて，1回目の実行よりラウドネス値や，トゥルーピーク値が目標に近づいているので，これでOKということでしょう．


また，以下のような便利なものがあるので，よく分からなければこっちを使う方が無難と思われる．私は気付いたのが最近でまだ試していない・・・．

- https://github.com/slhck/ffmpeg-normalize
- https://gist.github.com/kylophone/84ba07f6205895e65c9634a956bf6d54

（追記）
コメントいただいた @nico_lab 様がもっとキッチリ書かれているので，そちらの方が参考になると思います．
https://nico-lab.net/loudnorm_with_ffmpeg/

# 参考
- https://trac.ffmpeg.org/wiki/AudioVolume
- https://ffmpeg.org/ffmpeg-filters.html#loudnorm
PHPでOpenCVを使うまで(OpenCV-for-PHP)

PHPでOpenCVを利用する方法はいくつかあるようですが
OpenCV-for-PHPを利用する方法を紹介します。

[mgdm/OpenCV-forPHP]
https://github.com/mgdm/OpenCV-for-PHP

注意：
OpenCV-for-PHPはOpenCVの全ての関数がラップされていないので
利用したいOpenCVの関数が準備されていない場合、ご自身でOpenCV-for-PHP
ソースコードの改修・ビルドが必要になります。

### インストール前準備

インストールに必要なミドルウェアとバージョン
OpenCV 2.4.13
PHP5.2

動作確認できたOS
CentOS5
CentOS7

#### OpenCV2.4 インストール

OpenCVのビルドにgccとcmakeが必要なためそれぞれインストールします。
cmakeは、ソースコードcmake-2.8.12.1.tar.gzをダウンロードしてきて
ビルドしました。rpmパッケージがあればそちらを利用しても大丈夫と思います。

##### gccインストール
```
yum install gcc44 gcc44-c++
```
##### cmakeインストール
```
cd /usr/local/src
tar xzvf cmake-2.8.12.1.tar.gz
cd cmake-2.8.12.1
.configure
make
make install
```
##### opencvインストール

OpenCV2.1以降が要求されますが、2.4以降に実装されている機能を利用したいため
OpenCV2.4.13をダウンロードしました。
こちらもrpmパッケージを利用しても大丈夫かと思います。

https://sourceforge.net/projects/opencvlibrary/files/opencv-unix/2.4.13/opencv-2.4.13.zip/download

ビルドの際の注意点としてビルド用のディレクトリ(名前は何でもOK、手順ではbuildディレクトリ)を作成する必要があります。

```
cd /usr/local/src
unzip opencv-2.4.13.zip
cd opencv-2.4.13
mkdir build
cd build
cmake -D BUILD_EXAMPLES=YES -D CMAKE_BUILD_TYPE=RELEASE -D CMAKE_INSTALL_PREFIX=/usr/local/opencv -D BUILD_NEW_PYTHON_SUPPORT=NO -D WITH_1394=OFF -D CMAKE_C_COMPILER=gcc44 -D CMAKE_CXX_COMPILER=g++44 ../
make
make install
```

ライブラリ及びパッケージ登録

```
cd /etc/ld.so.conf.d
vi opencv.conf
```

```:opencv.conf
/usr/local/opencv/lib
```

```
ldconfig
cd /usr/lib/pkgconfig
ln -s /usr/local/opencv/lib/pkgconfig/opencv.pc .
```

#### PHP5.4インストール
OpenCV-for-PHPのビルド時に
PHP5.2以降を要求されますが、こちらの環境の都合上5.4をインストール
しました。

CentOS5の場合の手順になりますが、CentOS7の場合もyumレポジトリの追加以外は
ほぼ同様になります。

インストール済みのPHPを削除

```
#yum remove php php-*
```

PHP5.4のインストール
(利用するパッケージは環境に応じて選択してください。)

```
rpm -ivh http://rpms.remirepo.net/enterprise/remi-release-5.rpm  
yum --enablerepo=epel install libedit
yum --enablerepo=epel install t1lib
yum install --enablerepo=remi php php-pdo php-cli php-bcmath php-mbstring php-devel php-common php-mysql php-ldap php-gd
yum install --enablerepo=remi php-mcrypt php-pear
```

php.ini設定
date.timezone、mbstringの文字コード等設定を行います。

#### OpenCV-for-PHPのインストール

gitインストール

```
yum install --enablerepo=epel git
```

OpenCV-for-PHPのビルド

```
cd /usr/local/src
git clone git://github.com/mgdm/OpenCV-for-PHP.git
cd OpenCV-for-PHP
phpize
.configure
make install
```

```
vi /etc/php.d/opencv.ini
```

```:opencv.ini
extension=opencv.so
```
php -mでopencvが存在することを確認します。

```
php -m
[PHP Modules]
..略..
opencv
..略..
```

以上になります。

使い方は、OpenCV-for-PHP(https://github.com/mgdm/OpenCV-for-PHP)
内のexampleが参考になります。

全てのOpenCV関数が揃ってるわけではないため

OpenCVのリファレンスを参照して
https://docs.opencv.org/2.4/modules/refman.html

OpenCV-for-PHPのソースコード改修を行います。

---------
参考情報
https://qiita.com/Kogarasi/items/8c5e58821374cd7f332b