OmniAICreator/Qiita-1.07M huggingface dataset:
Cloudflare の ngrok的なサービスがあるらしい ⇒ $ cloudflared tunnel --url localhost:8080 といった使い方

## 概要

タイトルの通りです。

ngrok とかが有名どころの、ローカルに立てたサーバをインターネット側からアクセスできるようにするやつです（Bot開発のプロトタイプを作る時とか、ローカルでテスト的に作ったサーバにインターネット側から HTTP リクエストを送りたい、とかそういう時に使う感じの）。
類似サービスもいろいろありますが、今回のものは自分は初めて見かけたように思います。

## 導入や使い方
### cloudflared の導入方法

Mac で Homebrew を使ってるなら、以下のコマンドで簡単に導入できます。

```bash
$ brew install cloudflare/cloudflare/cloudflared
```

その他の各OS での導入は、以下を見ると良さそうです。

●Install cloudflared · Cloudflare for Teams documentation
　https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/install-and-setup/installation

#### 【追記】 補足： Quick Tunnels
今回利用するものは、Cloudflare のアカウントなしで利用可能です。以下の公式ドキュメントを確認すると、これは「Quick Tunnels」と呼ばれるもののようです（なお、アカウントを利用した仕組みもあります）。

●Quick Tunnels · Cloudflare Zero Trust docs
　https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/do-more-with-tunnels/trycloudflare/

この「Quick Tunnels」の場合は、アクセス用の URL は以下となるようです。

- サブドメイン： ランダムに生成される
- ドメイン： trycloudflare.com

### cloudflared を実際に使う
そして cloudflared がインストールできたら、例えば localhost:8080 となるような何かローカルサーバ的なものを動かしてから、以下のコマンドを実行します（※ もちろん、ポート番号は 8080 でなくても利用可能です）。

```bash
$ cloudflared tunnel --url localhost:8080
```

そうすると、以下のように URL が表示されるので、こちらにアクセスすることで外部からの localhost へのアクセスが行えました。
![外部からアクセス可能なURL.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/bfda5160-63b7-071d-1d68-06fd47244dd2.jpeg)

#### 手っ取り早くローカル環境にサーバーを用意する（Python を使うパターン）
なお、Python が入っている環境で手っ取り早くローカルにサーバーを立てるのをやるなら、ワンライナーのサーバーを稼働させるのが良いかと思います。

```bash
# 2.x系
$ python -m SimpleHTTPServer 8080
# 3.x系
$ python -m http.server 8080
```

## 情報にたどり着いた経緯

なお、この情報にたどりついた経緯は、Google Colab絡みの内容をあれこれ調べる ⇒ 以下の記事を見つける ⇒ 「Cloudflare 提供の ngrok的なものがあるっぽい記載を見つける」 といった流れでした。

●【Argo Tunnel】StreamlitアプリをGoogleColabから秒で外部公開する – スペース・アイ株式会社
　https://www.space-i.com/post-blog/googlecola%E4%B8%8A%E3%81%8B%E3%82%89streamlit%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92-cloudflare%E7%B5%8C%E7%94%B1%E3%81%A7%E7%A7%92%E3%81%A7%E5%A4%96%E9%83%A8%E5%85%AC%E9%96%8B%E3%81%99%E3%82%8B/

記事の中の以下が該当部分です。
![コマンドが登場しているところ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/85f022a6-0292-be54-5360-cc2243c882ac.jpeg)

そして、その後に情報をググってみたりして、公式情報や以下の分かりやすく日本語で書かれたサイトにたどり着いたり、といった感じでした。

●Cloudflare提供のngrokみたいにローカルのアプリケーションを外部に公開するサービス - Argo Tunnel - nwtgck / Ryo Ota
　https://scrapbox.io/nwtgck/Cloudflare%E6%8F%90%E4%BE%9B%E3%81%AEngrok%E3%81%BF%E3%81%9F%E3%81%84%E3%81%AB%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%81%AE%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E5%A4%96%E9%83%A8%E3%81%AB%E5%85%AC%E9%96%8B%E3%81%99%E3%82%8B%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9_-_Argo_Tunnel

これは便利そう！！
Railsチュートリアル（第4版）のHerokuへのデプロイで　Couldn't find Active Storage configuration in /app/config/storage.yml (RuntimeError)と出てきて困った話

Railsチュートリアル（第4版）に取り組む際に発生したエラーについての備忘録。

# ログから発見した内容
```
Couldn't find Active Storage configuration in /app/config/storage.yml (RuntimeError)
```
と出てきた。
ディレクトリを見ても、`/app/config/storage.yml`なんてファイルは存在しないので困ってしまった。

# Railsのバージョンがおかしかった→バージョンを5.1.6に直して解決
調べてみると、`storage.yml`というものは`activestorage`なるものを利用するときに必要なものらしい？
`activestorage`はRailsチュートリアル第4版では利用していないのでここでエラーが起こっているようだ。
railsのバージョンを見てみると、5.1.6ではなかった。

```
$ rails --version
Rails 6.1.3
```
Gemfileのバージョンしてが悪そうだったので、

```:Gemfile(before)
gem 'rails', '>=5.1.6'
```

```:Gemfile(after)
gem 'rails', '5.1.6'
```
こうした。この後、`bundle update` `bundle install`して、コミット後にHerokuにプッシュしたところ上手くいった。

**結論：チュートリアルのバージョンと手元のバージョンが違うとおかしくなることがある**
バージョン管理の必要性を感じた、、、

# おまけ　ちょっと役にたったこと
```
$ heroku run rails console
```
と実行すると、本番環境でrails consoleが見れる。
しかも、バグっているときはバグった際のエラーコードを表示してくれた（初学者のため正式な動作は把握していません）。
`heroku logs --tails`やるよりも見やすいかもしれない。
地味にHomebrewが変わってる話

#地味にHomebrewが変わってる話

##内容
- Mac買いました
- とりあえずHomebrewをインストールしました
- Homebrew cask　がその辺のネット記事とちょっと違っていました


##Mac買いました
　これまでWindows機にLinuxをDualBootをして利用してましたが、Windows Updateを迂闊にした結果、Linuxの/bootを盛大に壊されました。それにイラッとした結果とM1 プロセスがどんなものか気になったということもあって、今回初めてのMacを購入してみました。

　購入したスペック
    - Macbook Air
    - メモリ ８G
    - US配列キーボード

　今回、初めてのMacでちょっと困惑したところを備忘録として残します。
##本題
　MacのパッケージマネージャとしてHomebrewがあります。[Homebrew](https://brew.sh/) インストールはHPのコマンドをコピペすれば大丈夫

~~~
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
~~~

その後、`brew -v`で何かしら出てくれば完了。
Homebrewは、Linuxのパッケージマネージャと少し異なり、CUIのアプリケーションしかインストールできません。GUIのアプリケーションは Homebrew-caskを用いてインストールします。これをそもそも知らなかった。

ここで、以前は`brew cask install`コマンドでcaskを用いたインストールができていたようですが、2021.04.05現在、オプションとして利用するようです。

~~~
brew install --cask [command]
~~~

地味ですが、ここで　しれっとコケました。


##後記
とりあえず、現段階でMacの挙動に慣れていないところはありますが、Linuxのノリで使えないのがちょっと厄介かなといったところ。
あと、なんで初期Shellがzshなんですかね？？？？
【Swift】XIBファイルを初期起動画面にする

#はじめに
XIBで初期起動する方法を紹介します。

#手順

###1.Main.storyboardを消去する
Main.storyboard起動をやめて使わなくなるので、消去しましょう。(move to trash)

###2.XIBを作成
Also create XIB fileをクリックしましょう
![スクリーンショット 2021-04-05 22.32.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954451/36d22584-8398-4ab0-8a9e-72a8b5b399dc.png)

TopViewController.swiftを作らずにViewからXIBを追加した場合は、以下のようにfile's ownerとviewを接続しなければいけません。

![スクリーンショット 2021-04-05 22.33.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954451/553f9d93-d728-a8d2-b983-bdf602ca030a.png)

わかりやすく背景色を赤とかにしておきましょう。

###3.SceneDelegateを編集
SceneDelegateを以下のようにはじめに起動したいControllerをrootViewControllerにします。

```swift:SceneDelegate
import UIKit

class SceneDelegate: UIResponder, UIWindowSceneDelegate {
    
    var window: UIWindow?
    
    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        guard let scene = (scene as? UIWindowScene) else { return }
        self.window = UIWindow(windowScene: scene)
        self.window?.rootViewController = TopViewController()
        self.window?.makeKeyAndVisible()
    }
}
```

###4.Info.plistを編集
以下のように、Storyboard NameとMain storyboard file base nameがMainになっているので、二つとも消去します。
![スクリーンショット 2021-04-05 22.39.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954451/57cb8b6f-22b7-6195-c02f-26cb2e24852a.png)

###5.ビルドする
これでビルドしてみてください。赤い画面(TopViewController.xib)が表示されるはずです。


#おわりに
おわりです。
Python subprocess パイプラインでsort, uniqコマンドに標準出力を渡したい

# cat sample.txt | sort | uniq

サンプルファイル（sample.txt）

```
2021-04-05
2021-04-06
2021-04-05
2019-01-01
```



期待結果

```
$ cat sample.txt | sort | uniq
2019-01-01
2021-04-05
2021-04-06
```



サンプルコード

```python
import subprocess as sb

args1 = ['cat', 'sample.txt']
args2 = ['sort']
args3 = ['uniq']

std = sb.PIPE

with sb.Popen(args=args1, stdout=std, stderr=std) as pr1:
    with sb.Popen(args=args2, stdin=pr1.stdout, stdout=std, stderr=std) as pr2:
        with sb.Popen(args=args3, stdin=pr2.stdout, stdout=std, stderr=std) as pr3:
            for date in pr3.stdout:
                print(date.decode('utf-8'))
```



実行結果

```
$ python3 subprocess_test.py


2019-01-01

2021-04-05

2021-04-06
```

# cat sample.txt | sort | uniq | sort -k1,1 -k2,2n

サンプルファイル（sample.txt）

```
class2	80	+20
class1	64	+4
class4 	55	-5
class3	67	+7
class2	79	+19
class3	48	-12
class4	55	-5
class1	64	+4
```



期待結果

```
$ cat sample.txt | sort | uniq | sort -k1,1 -k2,2n

class1  64      +4
class2  79      +19
class2  80      +20
class3  48      -12
class3  67      +7
class4  55      -5
```



サンプルコード

```python
import subprocess as sb

args1 = ['cat', 'sample.txt']
args2 = ['sort']
args3 = ['uniq']
args4 = ['sort', '-k1,1', '-k3,3n']

std = sb.PIPE

with sb.Popen(args=args1, stdout=std, stderr=std) as pr1:
    with sb.Popen(args=args2, stdin=pr1.stdout, stdout=std, stderr=std) as pr2:
        with sb.Popen(args=args3, stdin=pr2.stdout, stdout=std, stderr=std) as pr3:
            with sb.Popen(args=args4, stdin=pr3.stdout, stdout=std, stderr=std) as pr4:
                for score in pr4.stdout:
                    print(score.decode('utf-8'))
```



実行結果

```
$ python3 subprocess_test.py


class1  64      +4

class2  79      +19

class2  80      +20

class3  48      -12

class3  67      +7

class4  55      -5
```

# 参考記事

https://qiita.com/caprest/items/0245a16825789b0263ad

https://papiro.hatenablog.jp/entry/2016/02/21/175509
スマートバナーでスマホWebからアプリへの導線をつくってみた - iOS, Android 両対応-

#はじめに
**WEBアプリのモバイル化に成功した！...なのになぜだ！？全然インストールされない！！**

最近まさにそんな経験をしたんですが、ユーザの立場でよくよく考えてみると、アプリのインストールに至るにはいくつか障壁があるということに気が付きました。

- リリースされたアプリの存在にそもそも気が付かない
- アプリのインストールがめんどくさい(ストアいってアプリ名検索して...など)


なるべく障壁を低くしてユーザにアプリをインストールしてもらえる方法なんてあるのかよ...と頭を抱えたのですが、少しググったら👍な解決策をみつけてしまいました。

それが**スマートバナー**です。

これ↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569054/c3d00216-c790-e2e4-2b4a-e5e1047e3a36.png)

誰でも1回はみたことあると思います。
WEB版のアプリをスマホブラウザで開くと上部に表示されるアレですね。

というわけで今回はiOS, Androidでスマートバナーを出す方法をまとめました。

**「WEB版からアプリへの導線を簡単につくりたい」**
**「iOSとAndroidの両方で導線をつくりたい」**
という方に役立つ記事になると思います。

#Safari(iOS)
Safari(iOS)版のスマートバナーは、なんとAppleが公式で機能をだしています。

https://developer.apple.com/

しかも使い方は超簡単。
以下の`meta`タグをスマートバナーを表示したい画面の`head`タグに埋め込むだけです。

```html
<!-- Safari SmartBanner -->
<meta name="apple-itunes-app" content="app-id=[app-id]">
```
appleのdeveloperアカウントで、自分のアプリの9-10桁の`app-id`を確認することができるので、そこからコピペして利用します。

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html

Apple公式スマートバナーのメリットとデメリットは以下になります。

メリット

- アプリのインストール有無によって表示が変わる(`入手 - App Store` or `インストール済`)
- 表示によってタッチしたときの導線が変わる(インストール済の場合はアプリを開く)
- app-idを指定するだけでアイコンやアプリ名を自動入力してくれる

デメリット

- Androidでは使えない
- シミュレータには表示されないので実機での動作確認が必要

#Android
Androidの場合、iOSと異なり公式のスマートバナーは存在しません。
そのため、サードパーティのライブラリを使用する必要があります。

今回はこちらのライブラリを使用しました。

https://github.com/ain/smartbanner.js/

肝心の使い方なのですが、Safafiのときと同様に`meta`タグを`head`タグに埋め込むだけです。

```html
<!-- Android SmartBanner -->
<meta name="smartbanner:title" content=[アプリ名]>
<meta name="smartbanner:author" content=[会社名]>
<meta name="smartbanner:price" content=[アプリの値段]>
<meta name="smartbanner:price-suffix-google" content=" - Google Play"> <!-- Android用suffix --> 
<meta name="smartbanner:icon-google" content=[アイコン画像のパス]>
<meta name="smartbanner:button" content="開く"> <!-- ボタンの表示名 --> 
<meta name="smartbanner:button-url-google" content=[Google PlayのアプリURL]>
<meta name="smartbanner:enabled-platforms" content="android"> <!-- スマートバナーを利用するOSの指定 --> 
<meta name="smartbanner:close-label" content="Close">

<link rel="stylesheet" href="css/smartbanner.min.css">
<script src="js/smartbanner.min.js"></script>
````
これでスマートバナーが以下のように表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569054/e822263d-5d33-7e91-632e-78e49f721d0b.png)

サードパーティのスマートバナーのメリットとデメリットは以下になります。

メリット

- 表示する文をカスタマイズすることができる
- AndroidとSafariの両方で使える

デメリット

- インストール有無で表示ステータスを変えられない
- インストール済の場合でもアプリを直接開けない(ストアへの導線だけ)

#おわりに
スマートバナーの導入を検討されている方は、こちらの記事を参考にしていただければ幸いです。
iOSのショートカットを使ってDiscordにメッセージを送信する

# はじめに
ショートカットアプリとWebHookを使ってDiscordにメッセージを送信するやつです。
今回は、クリップボードの内容を送信するものを作ってみます。

# WebHookのリンクを貰ってくる
WebHookの作成にはウェブ版かデスクトップ版が必要みたいです。
今回は、デスクトップ版から作業します。ウェブ版も同じようにできると思います

該当のテキストチャンネルを右クリック→チャンネルの編集を開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201995/2681e61b-8f23-590c-6c7a-8f272028f112.png)

連携サービスからウェブフックを作成をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201995/d9c94856-33f2-c0e2-0302-fdb60082b8e6.png)

お名前は適当に入力します。
今回はQiitaにしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201995/31587eb4-02cb-47c6-4367-bfb9723f276e.png)
※保存を押さないと名前は変わらないので入力しただけで満足しないように!!

次に、Discordアプリに戻って、先程WebHookを作ったチャンネルを長押し→「チャンネルの編集」を開きます。
![image0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201995/fbaf9514-c709-fc91-2cff-04d352fc0523.png)

ウェブフックを開くと、先程作ったWebHookがあるので、それをタップします。
![image1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201995/a9f9e469-251a-1add-7367-1ffa74716fbf.png)
![image2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201995/d28e556d-bca0-f18a-f66f-09fb60931446.png)

ウェブフックURLをタップするとクリップボードにコピーされます。
![image3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201995/bdff752c-0426-4717-ad2f-8d4c9c77180c.png)

このURLはこの先使うので、大事にしましょう。

# クリップボードを取得して送信する
ショートカットアプリを開いて、右上の＋をタップして、ショートカットの新規作成に入ります。

アクションの追加から「共有」→「クリップボードの取得」をタップします。
次に、「Web」→「URL」をタップします。
URLの入力欄に先程コピーしたWebHookのURLを貼り付けます。
また、アクションを追加を開いて、「Web」→「URLの内容を取得」をタップします。
表示を増やすをタップして。
方法をPOSTにします。

本文を要求がJSONになっていることを確認して、新規フィードを追加をタップして、テキストを選びます。
キーに「content」テキストのところは「クリップボード」を選びます。

ちゃんとできているとこのようになっているはずです。
![image4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201995/60e57eb1-1b15-8de7-182c-8b32a2284c8d.png)
![image8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201995/f0967b1e-2794-00f1-c996-95cc843beb65.png)


これで完成です。右下の▷をタップすると実行されます。
許可がどうのこうの出ますので許可を押してやると送信されます。

試しに実行してみたGif
クリップボードにはQiita@yamagami2211を放り込んであります。
![xoO1ed2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201995/7323b964-afdb-91bd-c966-2e482a2689ff.gif)

# 最後に
今回はクリップボードから引っ張ってくるようにしましたが、入力欄を設けてその内容を送信するようにもできます。
クリップボードよりそっちのほうがいいと思いますけどね。

ショートカットでGifも作れるので、面白そうって思った方は色々試して見るのもいいかもしれません。
ASP .NET Core Tips - 設定情報をビューで取得する

#概要
ASP .NET CoreでSaaSを開発していた際に、
設定情報でCSSやらを切り替えたいと思って調べたことの備忘録。


#環境
・Azure App Service
・Visual Studio 2019 Community
・ASP .NET Core 3.1
※プロジェクトはノーマルなWebアプリケーションで作成

#参考
このページを見て作成しました。
[ASP.NET Core でのビューへの依存関係の挿入](https://docs.microsoft.com/ja-jp/aspnet/core/mvc/views/dependency-injection?view=aspnetcore-3.1)

#やりたかったこと
Azure App Serviceのアプリケーション設定（またはプロジェクト内のappsettings.json）で指定した値に応じて、
Webアプリが読み込むCSSや表示するロゴを変える。
→CSSや画像ファイル以外は同一コードにして、
　見た目が少し違う（例えば違うブランディングをした）Webアプリを作成し
　設定で簡単に切り替えられるようにする。

#手順
①設定
まず、Azure App Serviceのアプリケーション設定に値を定義します。
キーも値も任意なのですが、ここでは
　キー：ProductType
　値：Hapikuro
とします。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/9e455e06-5c8d-13a3-e421-36af7164cdf9.png)


②読み込むCSSを変える
_Layout.cshtmlでCSSを読み込んでいるので、
このファイルの先頭にまずは以下のコードを記述します。

```js:_Layout.cshtml

@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration
@{
    string productType = Configuration["ProductType"];
}
```

CSS読込みの箇所を分岐させます。

```html:_Layout.cshtml
@if (productType == "Hapikuro")
{
   <link rel="stylesheet" href="~/css/site_hapikuro.css" />
}
else
{
    <link rel="stylesheet" href="~/css/site.css" />
}
```

この方法だと簡単にできるんですが、
（よく考えたら・・・いやよく考えなくても）このままデプロイしちゃうと
問題な部分がありますね・・・。それはまた別の機会に書きます。
UbuntuにRedisをインストールする方法（備忘録）

## 経緯

開発したアプリケーションをデプロイしていざ本番環境で動かしてみると、sessionでcookieに格納したデータが4KB超えているのか、途中でサーバが落ちてしまう状況に、、、、。

泣く泣くsessionを使わない方法を調べていると、「Redis」というものがあり、それはRDBに保存している訳ではないので高速に格納・保存が可能だということで、Redisを使用することに決めました。

ただそこからインストール方法を調べて見たのですが、そもそものインストールからつまづいてしまったので、こうして備忘録という形で書き記しておきます。

## インストールでつまづいた理由
僕の調べ方が悪かったのもあるのですが、調べた記事がCentOSやmacにインストールする場合で、yumを使用していたりしました。

記事の中では、

```
brew install redis
```

や、

```
sudo yum --enablerepo=epel install redis
```

というコマンドが紹介されており、僕の環境ではインストールすることはできませんでした。（完全に調べ方をミスりました、、、）

## UbuntuでのRedisインストール方法
まずRedisのインストールするバージョンなどを確認

```
sudo apt show redis-server
```

バージョンとか確認したらインストール

```
sudo apt install redis-server
```

これでインストールできました。
本当に先人方は偉大です。いつもありがとうございます。

### Redisサーバ起動
```
sudo systemctl start redis-server
```

## Redisサーバ動いているか確認
```
ps ax | grep redis-server
```

### Redisサーバ停止
```
sudo systemctl stop redis-server
```
Firestoreを使用したデータの追加、読み取り

Firebaseのドキュメントにも書いてある通りだが、ViewControllerにFirebaseをimportしない方法で記述する。

```ruby:FirestoreContoroller.swift
import UIKit

class FirestoreViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
    }
    

    @IBAction func addAction(_ sender: Any) {
        Database.addTest()
      }

      @IBAction func readAction(_ sender: Any) {
        Database.readTest() { users in
          for user in users {
            print("\(user.first), \(user.last), \(user.born)")
          }
        }
      }
    }
```

```ruby:UserModel.swift
import Foundation
import FirebaseAuth

struct UserModel: Codable {

  private var _first: String?
  var first: String { _first ?? "" }
  private var _last: String?
  var last: String { _last ?? "" }
  private var _born: Int?
  var born: Int { _born ?? 0 }

  private var _weight: Double?
  var weight: Double { _weight ?? 0 }

  private var _height: String?
  var height: String { _height ?? "" }

  private let auth = Auth.auth()
  var isEmailValidation: Bool {
    auth.currentUser?.isEmailVerified ?? false
  }

  private enum CodingKeys: String, CodingKey {
    case _first = "first"
    case _last = "last"
    case _born = "born"
  }
}
```

```ruby:Database.swift
import Foundation
import Firebase
import FirebaseFirestore
import FirebaseFirestoreSwift


class Database {
  private static let db = Firestore.firestore()

  static func addTest() {

    var ref: DocumentReference? = nil
    ref = db.collection("users").addDocument(data: [
      "first": "Ada",
      "last": "Lovelace",
      "born": 1815
    ]) { err in
      if let err = err {
        print("Error adding document: \(err)")
      } else {
        print("Document added with ID: \(ref!.documentID)")
      }
    }
  }

  static func readTest(completion: (([UserModel]) -> Void)? = nil) {

    let _completion: ((QuerySnapshot?, Error?) -> Void) = { (querySnapshot, err) in

      var users: [UserModel] = []

      if let err = err {
        print("Error getting documents: \(err)")
        completion?(users)
        return
      }

      for document in querySnapshot!.documents {
        if let _user = try? Firestore.Decoder().decode(UserModel.self, from: document.data()) {
          users.append(_user)
        }
      }

      completion?(users)
    }

    db.collection("users").getDocuments(completion: _completion) //全部終わるまで待つ
  }
}
```
tryとexcept　Python競プロメモ④

使用言語　Python3

```
##.
###
...
```
上に書いたように3×3のマスがあるとし、そのうち上下左右のマスが「#」であるマスの座標を選ぶプログラムを書きたい。
ちなみに左上のマスを(0,0)とする。
これが

```
0 0
0 2
```
と出力するようにしたい。

```
new_data = [['#','#','.'],['#','#','#'],['.','.','.']]
H = 3 #行数
W = 3 #列数
```

データはこのように与えられているとする。

私の考えとして
①まずH、Wでfor文を作り、h行w列目を軸として、まずその両隣を見る。ここに「.」があればcontinueで抜ける。
②次に上下を見る。同様に「.」があればcontinueで抜ける。
③for文を抜けずにたどり着いた要素だけprintする

実際にコードで書いてみると

```
for h in range(H):
    for w in range(W):
        try:
            if new_data[h][w+1] == ".":
                continue
        except IndexError:
            pass
        try:
            if new_data[h+1][w] == ".":
                continue
        except IndexError:
            pass
        if w >= 1:
            if new_data[h][w-1] == ".":
                continue
        if h >= 1:
            if new_data[h-1][w] == ".":
                continue
        print(h,end = " ")
        print(w)
```
これで目的の出力を得ることができた。

このコードではtry文を使うことで、IndexErrorが起こっても対処できるようにした。


あと一点、私が詰まった点として、

```
new_data[h][w-1]
```
の記述について。
w=0の時、[w-1]は[-1]となってしまうため、本当ｇは一番最初の要素が欲しいにも関わらず、列の一番最後の要素が選ばれてしまうというミスをしてしまった。

なのでここではその前にw>=1とし[w-1]が自然数となるように指定した。

リストでマイナスを使うときはこの点に注意していきたい。
Rails jQueryが動かないときの解消方法


##はじめに

Railsにてポートフォリオ作成中に、
jQueryが機能しないことがあり苦戦した為、まとめます。
<br>
##実装した機能(一部紹介)

・slick(スライド機能)
・jp_prefecture(住所自動入力機能)
・iTyped(タイピングアニメーション)
・ScrollTop(ページトップにスクロールするボタン)
・ScrollReveal(要素のアニメーション表示)
　など
<br>
##開発環境

・ruby: 2.6.3
・rails: 5.2.5
・OS: macOS Catalina ver10.15.7
・Cloud9
<br>
##前提条件

・jQueryのコードはしっかり書いている(間違いなし)

__【ここが１番ポイントかも】__
・ページをリロードした時は__ちゃんと動く__
・別ページからリンクで飛んでくると__動かない__

##原因

Rails4以降に導入された`Turbolinks`が原因だった。

これが原因でjQueryのreadyイベントが着火しないらしい。

<br>
####Turbolinksとは

簡単に言うと、__ページ遷移を高速化させる仕組み__

※公式より
>Turbolinksを用いた画面遷移の順番
>1:リンクのクリックイベントが発火する
>2:画面遷移を阻害し、非同期でリクエストを送る
>3:レスポンスとしてHTMLを返す
>4:headタグに含まれているJSとCSSが、現在のページと一致しているかチェック

<br>
##解決方法

解決方法は__２つ__
1:`turbolinks: load`を使ってjsファイルを書きかえる
2:`Turbolinks`を機能として停止させる


####turbolinks: loadを使ってjsファイルを書きかえる方法

`$(function () { 〜`の部分を
`$(document).on('turbolinks:load', function() { 〜`に書きかえる

```js:jsファイル.
/* 変更前 */
$(function () {
  // 処理
});

/* 変更後 */
$(document).on('turbolinks:load', function() {
  // 処理
});
```

これだけ！簡単！
<br>
####Turbolinksを機能として停止させる方法

1:Gemfileの以下の記述を__コメントアウト__する

```Gemfile.
gem ‘turbolinks’, ‘~> 5’
```
<br>
2:読み込み

```ターミナル.
bundle install
```
<br>
3:`app/javascript/packs/application.js`の該当箇所を__コメントアウト__する

```js:application.js
require('turbolinks').start()
```
<br>
4:app/views/application.html.erbの該当箇所を__消す__(headタグ内)

```application.html.erb
<!--変更前-->
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

<!--変更後-->
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application' %>

<!--javascript~の部分の消した箇所はここ！-->
'data-turbolinks-track': 'reload'
```

<br>

これで解決！
僕は1の方法が早くて楽だったので1で解決しました！
<br>
##さいごに

コードは合っているはずなのになぜ動かない・・・
そんなこんなで１時間ほど時間を無駄にしてしまいました。

今後、私のようにこの問題にぶち当たった人が、
この記事見つけ、早めに問題を解決してくれたら幸いです。

ポートフォリオ作りながら、Qiita発信両立するのは難易度高い...。
<br>
誤字、誤った記述等ありましたら、コメントよろしくお願いします。
cloud.google.gpg の pubkey update

#概要
sudo apt updateしたらpubkeyの期限切れエラーが出たのでその対応方法を残す。

- 実施時期: 2021年4月
- OS: Ubuntu 18.4LTB
- 備考: 大体一年前にGCP SDKをインストール済み

##現象
sudo apt updateを実行すると下記の警告が表示されるようになった。

```terminal
W: An error occurred during the signature verification. The repository is not updated and the previous index files will be used. GPG error: https://packages.cloud.google.com/apt cloud-sdk InRelease: The following signatures couldn't be verified because the public key is not available: NO_PUBKEY 8B57C5C2836F4BEB NO_PUBKEY FEEA9169307EA071
W: Failed to fetch https://packages.cloud.google.com/apt/dists/cloud-sdk/InRelease  The following signatures couldn't be verified because the public key is not available: NO_PUBKEY 8B57C5C2836F4BEB NO_PUBKEY FEEA9169307EA071
W: Some index files failed to download. They have been ignored, or old ones used instead.
```

"https://packages.cloud.google.com/apt cloud-sdk"

について、

"The following signatures couldn't be verified because the public key is not available"

とおっしゃっている。

##対策
多分repositoryのpublic keyを更新すれば解決できると思って、ググってみると下記がヒット

https://cloud.google.com/sdk/docs/quickstart-debian-ubuntu?hl=ja

そういえば、一年前くらいにSDKをインストールしたことを思いだした。
書かれてあるとおりに下記を実施し、もう一度update & upgradeを実行

```terminal
curl https://packages.cloud.google.com/apt/doc/apt-key.gpg | sudo apt-key --keyring /usr/share/keyrings/cloud.google.gpg add -
sudo apt-get update && sudo apt-get install google-cloud-sdk
sudo apt update
sudo apt upgrade
```

解決！
Maven 3.8.1 で mvn install 出来ない(maven-default-http-blocker)されたメモ

## 何が起きたか

`mvn install` が実行できず、以下のようなエラーメッセージが表示された。

```
[ERROR] Failed to execute goal on project test: Could not resolve dependencies for project xxx: Failed to collect dependencies at my.test:dependency:version -> my.test.transitive:transitive:version: Failed to read artifact descriptor for my.test.transitive:transitive:jar:version: Could not transfer artifact my.test.transitive:transitive:pom:version from/to maven-default-http-blocker (http://0.0.0.0/): Blocked mirror for repositories: [blocked-repository-id (http://blocked.repository.org, default, releases+snapshots)]
```

[Maven 3.8.1リリースノート](https://maven.apache.org/docs/3.8.1/release-notes.html#how-to-fix-when-i-get-a-http-repository-blocked)より

これは例だがおおむねこんな内容であった。

## 原因

`maven-default-http-blocker` で検索したところ、上記のリリースノートが引っかかる。

このバージョンで `Block external HTTP repositories by default` が取り込まれたようで、pom.xml の repository に `http://example.com` のような HTTP での指定がデフォルトでブロックされるようになったようである。

Release Date が 2021-04-04 となっているのでこの記事を書いている時点ではかなり新しい。

## 解決策

指定 repository を HTTPS 対応するか、設定をいじるか。

あまりよくないのかもしれないが、急ぎで使えるようにする必要があったのでワークアラウンド的な対応をした。

```xml:${user.home}/.m2/settings.xml(環境によって違うかも)
<settings>
  ...
  <mirrors>
    <!-- ここをコメントアウトする
    <mirror>
      <id>maven-default-http-blocker</id>
      <mirrorOf>external:http*</mirrorOf>
      <name>Pseudo repository to mirror external repositories initially using HTTP.</name>
      <url>http://0.0.0.0/</url>
      <blocked>true</blocked>
    </mirror>
    -->
  </mirrors>
  ...
</settings>
```

とりあえず `mvn install` 出来るようになった。根本的な対応は後で考えよう……。
【インストール不要】Dockerでffmpegコマンドを使う！


# はじめに
ffmpegは動画の編集や変換などをおこなえるフリーソフトです。
ただ、一般的にffmpegを利用するにはffmpegをインストールする必要があるのですが、
ffmpegをインストールするのは面倒！という人のためにdockerを使用したffmpegコマンドの使用方法を紹介します。
# dockerでffmpeg
```bash
docker run -it --rm jrottenberg/ffmpeg:3.2-alpine [ffmpegのオプションなど]
```
# 便利コマンド
##カラーバー映像作成
```bash
docker run -v $(pwd):$(pwd) -w $(pwd) -it --rm jrottenberg/ffmpeg:3.2-alpine -f lavfi -i smptehdbars=1920x1080:d=10 -f lavfi -i sine=frequency=1000:d=10 output.mp4
```
Swiftオブジェクトとvoid*の連携

Cライブラリではしばしば見られる「void*でコンテキスト情報を渡し、後のコールバックではその値が引数として回ってくる」タイプのインターフェースを Swift で使う場合のメモ。平たく言うと Swift オブジェクトの参照をどうやって void* にキャストするか。

# Cインターフェース
さしあたりCインターフェースは次のようになっているとします。
c_call はコンテキスト情報とコールバックを受け取り、コールバックに info を渡す単純なトランポリンです。

```c_call.h
typedef void (callback_t)(void* _Nullable info);

void
c_call(void* _Nullable info, callback_t cb);
```

```c_call.c
void
c_call(void* _Nullable info, callback_t cb) {
    cb(info);
}
```

# Swift インターフェース
今回は Hello を表示する Greeting クラスを作り、それを info に渡して C 側から呼ぶことを考えます。

```Greeting.swift
class Greeting {
    // これを c_call 経由で呼び出したい
    func hello() {
        print("Hello")
    }
}
```

# Swift コールバックの定義

Swift では void* に UnsafeMutableRawPointer (const なら UnsafeRawPointer) が対応します。通常この手の引数は nullable だと思うので UnsafeMutableRawPointer? としています。

```Callback.swift
func swift_cb(info: UnsafeMutableRawPointer?) {
    guard let greeting = info?.bindMemory(to: Greeting.self, capacity: 1).pointee else {
        return
    }
    greeting.hello()
}
```
Swift 関数はそのまま C関数として渡せるので特に細かいことは考えなくて大丈夫です。UnsafeRawPointer を特定の型に変換するには bindMemory を使います。
オブジェクトを取り出すことができれば、あとは普通に hello() を呼び出すだけです。

# UnsafeRawPonter への変換

逆にオブジェクトの参照を UnsafeRawPointer へと変換するには withUnsafePointer/withUnsafeMutablePointer を使います。

```Callback.swift
func doGreeting() {
    var greeting = Greeting()
    withUnsafeMutablePointer(to: &greeting) { info in
        c_call(info, swift_cb)
    }
}
```
この関数は変換したいオブジェクトとクロージャを取り、クロージャは UnsafeRawPointer にキャストされた info を受け取ります。これで Swift オブジェクトを void* として C に渡してなにかさせるという事ができるようになりました。
Azure/AWSのリージョン選択方の違い

AzureとAWSでのリージョン選択(設定)の違いです

AWSを長年触っていた自分がAzureを触って「まったく違う」と感じたので記事にします

#リージョン選択の方法
仮想マシン(VM/EC2)を例にします

### Azureはサービスを選んでからリージョン 
* VMを選ぶ→　リージョンを選ぶ
    
### AWSはリージョンを選んでからサービス
   * リージョンを選ぶ→　ECを選ぶ

# イメージです
###Azureの場合
Azureはビル全体が1フロアで、その中からサービスとリージョンを選ぶ感じ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197418/9e2a0ec2-4cda-c38a-fd5f-241ce1aaa8fa.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197418/7e7a4d80-47f0-57b1-90f6-18f60999597d.png)

###AWSの場合
AWSはビルのフロアごとにリージョンがあって、そのフロア(リージョン)からサービスを選ぶ感じ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197418/145f2492-2968-7620-ed89-0a47e790251b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197418/6577f4a5-0797-12c2-e7a9-341f0b76a9d0.png)

#いいところ
* Azure
    * サービスの一覧が見られる
    * リージョンの変更が簡単(対象サービスの制限があるがARMを使う)
 

* AWS
    * サービスを意図しないリージョンに選び間違えることがない
    
　　※例えば東京リージョンの中では東京リージョン内のサービスしか使えない

#よくないところ
* Azure
    * たくさんサービスを使うと「これどこのリージョンだっけ？」てなる(みにくい)
    * サービスを選んだあとに、毎回リージョンを選ばないといけない(リージョン選び間違いが発生する可能性がある)

* AWS
    * 東京リージョンで使っていると思ったら「あ、バージニアだった！」って事がある(AWSあるある)
    * 使っているサービスの一覧を見られない(見る方法はタグエディタやCLIとかからなのでちょっと手間がかかる)
    * リージョン間移動は手間(EC2ならスナップショットかAMIを使って移動)

# 感想
どっちがいい？と言われると、これは好みだと思います
個人的にはAWSの方が自分にはあっているかなと思いました

サービスのリージョン間移動はAzureの方が楽だと思います
Laravel 認証済みユーザーの取得方法

## 公式ドキュメント

- [Laravel 9.x 認証](https://readouble.com/laravel/9.x/ja/authentication.html)

## 環境

- PHP: 8.1.12
- Laravel: 9.43.0

## 認証済みユーザー取得

Laravelで認証済みユーザーを取得する方法がいくつかあるのでご紹介します。

### Authファサード

https://readouble.com/laravel/9.x/ja/authentication.html#install-a-starter-kit

```php
use Illuminate\Support\Facades\Auth;

// 現在認証しているユーザーを取得
$user = Auth::user();

// 現在認証しているユーザーのIDを取得
$id = Auth::id();
```

### authヘルパー

https://readouble.com/laravel/9.x/ja/helpers.html#method-auth

```php
// 現在認証しているユーザーを取得
$user = auth()->user();

// 現在認証しているユーザーのIDを取得
$id = auth()->id();
```

### Requestインスタンス(メソッドインジェクション)

https://readouble.com/laravel/9.x/ja/authentication.html#install-a-starter-kit

```php:app/Http/Controllers/FlightController.php
<?php

declare(strict_types=1);

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Http\Response;

final class FlightController extends Controller
{
    /**
     * @param Request $request
     * @return Response
     */
    public function update(Request $request): Response
    {
        $user = $request->user();

        // ...
    }
}
```

LaravelのFormRequestもRequestを継承しているので、同様に `user()` メソッドを使用できます。

## 関連記事

https://qiita.com/ucan-lab/items/9a294163b0fd8ba25aca
自社開発企業のカジュアル面談の内容

wantedlyで応募した企業様とのカジュアル面談をしてきました。
まだ受けたことのない方は、カジュアル面談がどんな感じなのか気になる方いらっしゃると思うので参考までに内容まとめてみます！

## 受けた質問
・簡単な自己紹介
・なぜwebエンジニアなのか
・勉強会には参加しているか
・企業選びで重視してる点
・スクールの形態について
・チーム開発をやってみてどうだったか
・チーム開発と個人開発のどちらが面白かったか
・スペシャリストかジェネラリストか
・どのような働き方がよいか(リモートか出社か)
・会社の雰囲気はワイワイしてる方が良いか、みんなもくもくと集中して取り組む方がよいか
・逆に質問はあるか

## 感想
カジュアル面談といっても、普通に面接のような雰囲気でした。

それと、今回面談した企業様は、想像以上に技術重視<ポテンシャル重視でした。
「ポートフォリオで重視する点はありますか？」とお伺いしたところ、「ポートフォリオはあまり重視していない、みんな綺麗なソースコード使ってるだろうし…。うちはポテンシャル重視でやってるから、基本的な技術はしっかりとみんな身についている前提のうえで、人柄で決めている」
とご回答でした。

今回の企業様はかなりのポテンシャル採用のようでした。
反対に、ポートフォリオ重視の企業もあるという話も聞いてますので、どちらも万全にするべきだったなというのが僕の感想です。

## 注意しなければいけないと感じたこと
面談を受ける前に「今回のカジュアル面談では詳しい募集内容や業務内容についてお話できればと思います。」
と事前に言われれていましたが、募集内容や業務内容というよりは、ほとんど私に対する質問でして、結構深掘りもありました。

カジュアル面談だと甘く見ずに、本当にもう面接に挑む気持ちで準備をしっかりするべきだとも、改めて思いました。

以上、参考にして頂ければ幸いです。
【JavaScript】分割代入について


配列やオブジェクトの値を分割して代入したいときに有効

## 配列

```javascript:sample.js
const array = [1, 2, 3];
// e0...array[0]...e1...array[1]...e2...array[2]............
const [e0, e1, e2] = array;
console.log(e0)// 1
console.log(e1)// 2
console.log(e2)// 3
```
## オブジェクト
オブジェクトを変数に代入するときに分割して代入することができる

```javascript:sample.js
const obj = {a: 10, b: 20, c: 30};
const {a, c} = obj;
console.log(a); // 10
console.log(c); // 30
```

### 動作確認

```
docker run -it --rm node:lts-alpine sh
/# vi test.js
# ファイルをコピペ
/# node test.js
```
【AWS】AWS(Amazon Web Services)とは

#プログラミング勉強日記
2021年4月5日

#AWSとは
　まずネットでAWSについて調べてみると公式サイトで以下のように書いてあった。

> アマゾン ウェブ サービス (AWS) は、世界で最も包括的で広く採用されているクラウドプラットフォームです。世界中のデータセンターから 200 以上のフル機能のサービスを提供しています。
(引用：[AWS公式](https://aws.amazon.com/jp/what-is-aws/))

　AWSは、Amazonが提供している100以上のクラウドコンピューティングサービスの総称。なのでAWSについて理解するためには、まずクラウドコンピューティングを知らないといけない。

##クラウドコンピューティングとは
　クラウドコンピューティングは、サーバー、ストレージ、データベース、ネットワーク、ソフトウェアなどのコンピューティングサービスをインターネット(クラウド)経由でサービスを利用すること。
　通常は、ローカル環境のパソコン内に様々なアプリ(WordやExcelなど)をインストールして利用する。クラウドサービスと呼ばれるクラウドコンピューティングで提供されているサービスは、パソコンにインストールする必要がない。インターネットに接続できれば、サーバー上で提供しているサービスを利用できる。

#AWSの特徴
　
##1. 従量課金
　AWSは通信料や通信時間に応じて利用した分の料金を支払う従量課金制を用いている。

##2. 高いセキュリティ
　政府機関や金融機関も利用しているくらい高いセキュリティがある。各国の規制、コンプライアンスにも対応している。

##3. 安定したパフォーマンス
　世界20か所の地位式で運用されていて、ソフトウェア・ハードウェアのどちらも最新の状態である。

##4. 高い柔軟性・拡張性
　様々なサービスがあるので、必要な機能の組み合わせや追加、停止ができる。

#参考文献
[AWS公式](https://aws.amazon.com/jp/what-is-aws/)
[AWSとは？サービスの概要やできること、クラウド市場の展望について紹介](https://business.ntt-east.co.jp/content/cloudsolution/column-01.html)
[クラウド コンピューティングとは](https://azure.microsoft.com/ja-jp/overview/what-is-cloud-computing/)
[クラウドコンピューティングってどんなもの？定義やメリットをわかりやすく紹介（初心者向け）](https://www.cloud-for-all.com/blog/cloud-computing.html)
研究の足跡(グレブナー基底について) part. 1

# はじめに
初めまして、数理科学専攻の大学院生kotaと申します。
この度研究の週誌的なものを書いてみようと思いましたー。
# 目次
<!-- タイトルとアンカー名を編集 -->
1. [研究概要](#研究概要)
1. [グレブナー基底について](#グレブナー基底について)
1. [使用アルゴリズムについて](#使用アルゴリズムについて)
1. [参考文献](#参考文献)

<!-- 各チャプター -->
<a id="#chapter1"></a>
# 研究概要
皆さんは量子コンピュータは聞いたことあると思いますが、そのコンピュータによってRSA暗号の計算量的困難性が危ぶまれています。
Shoreさんのお陰というか素因数分解アルゴリズムのせいですね...
そこで多変数公開鍵暗号というものがあってとても便利なわけです!
暗号化はとても簡単で例えば
$f_1(x_1, x_2) = x_1^2 + 2 x_1x_2 + 11x_2^2$
という式があるとしたら$x_1, x_2$をmod 31の世界で整数を代入してそれをメッセージ(暗号化したい文章)にしてしまおうというものです。 mod 31なのは$F_{31}$という有限体を使うからですね。
というわけでこれを連立させて方程式を解くのが難しいよっていうのが計算量的困難性になります!
本当にそうだろうか?ということでゴリゴリ解いて最速アルゴリズムを見つけて解けないならばこの暗号は使える!っていうのを目指すのが研究の目標です...

<a id="#Chapter2"></a>
# グレブナー基底について
連立代数方程式を簡単に解くものにグレブナ基底計算がありますと
それをどれだけ早く計算できるかが鍵な訳です...
ちょっと例を見てみましょう!
例えば

```math
\left\{
\begin{array}{ll}
f = 2  x + 2 * y - 2 \\
g = 2  x + y + 1
\end{array}
\right.
```
この方程式を解きたいなって思った時、皆さんはガウスの消去法をなんとなくやるでしょう...
そんなとき

```python:グレブナー基底
R.<x, y> = QQ['x, y']
f = 2 * x + 2 * y - 2 
g = 2 * x + y + 1
I = (f, g)*R; I # fとgから生成されるイデアル(f, g)をIとします。
Ideal (2*x + 2*y - 2, 2*x + y + 1) of Multivariate Polynomial Ring in x, y over Rational Field
I.groebner_basis() #Iのグレブナ基底はこうなります.
[x + 2, y - 3]
```
このように x+2とy-3がグレブナー基底になるわけです。

```math
\left\{
\begin{array}{ll}
x + 2 = 0 <=> x = -2 \\
y - 3 = 0 <=> y = 3
\end{array}
\right.
```

グレブナー基底計算によりすぐに連立方程式の解が、、、

</div></details><a id="#Chapter3"></a>
#使用アルゴリズムについて
という風にこの計算アルゴリズムは多分ブッフバーガーさんのものが使われている(sagemathに聞いてください)
と思うのですが他にもアルゴリズムがあります。
早いアルゴリズムの研究が僕の研究です。
#これから二週間か一週間に一回研究の成果や数学に関するprogrammingについての記事を書いていきます.
#ご期待ください.


<a id="#reference"></a>
# 参考文献
ごめんなさい特にないです...
Unity VFX GraphのOutput Particle Meshで両面描画する方法。

##前提
VFX Graphで、Output Particle Meshノードをそのまま使おうと思っても面の裏側が描画されないため、使えない。
Blenderなどでメッシュそのものを2枚重ねにするという方法もあるが、確実ではないし、結構面倒くさい。

##やり方
Unityのカリングが効いてしまい片面になっているため、カリングを切ればいい。
Output Particle Meshノードをを選択した状態で、インスペクタ画面を開き**Cull ModeをOffにする**ことで両面が描画される。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409758/3630a969-a864-2dc9-cc9c-592aa32d42d8.png)
Windows 10 に AWS CLI インストール

# やること
Windows 10 に AWS CLI をインストールする

# 環境
Windows 10 Home バージョン 20H2

# 手順
以下の URL からインストーラをダウンロードし、実行する
https://awscli.amazonaws.com/AWSCLIV2.msi

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199232/42e0cba0-ebeb-b32c-8673-0d718ac77a04.png)

「I accept the terms in the License Agreement」にチェックを入れ、「Next」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199232/a18bd715-0c2e-ab3b-c9bb-05b818f69372.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199232/ab49a1ca-1e49-6ce6-ca6d-ebfb7f58e47c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199232/0ee576d8-75bf-70a3-09d7-d1c328145281.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199232/c510c3a1-584d-e493-2688-f14331551ba3.png)

ターミナルで `aws --version` を入力し、バージョンが表示されることを確認する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199232/25a2b1b5-ec90-762d-f98c-d23cad1fdd78.png)

# 参考
[Windows での AWS CLI バージョン 2 のインストール、更新、アンインストール - AWS Command Line Interface](https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/install-cliv2-windows.html)
よく使うherokuコマンド

###よく使うherokuコマンド


いつも忘れてしまうので備忘録として
忘れた時に見返して頂くと幸いです。

~~~sh
#CLIでのログイン
$ heroku login

#環境変数の確認
$ heroku config -a <app name>

#環境変数を指定して確認
$ heroku config:get ENV_VARIABLE

#環境変数の設定
$ heroku config:set ENV_VARIABLE = "hoge"

#環境変数の削除
$ heroku config:unset ENV_VAR_NAME

#ログの表示（tail）
$ heroku logs -a <app name> --tail

#git pushによるデプロイ
$ git push heroku master

~~~

###参考

[公式ドキュメント](https://devcenter.heroku.com/ja/articles/heroku-cli-commands)
ゴンペルツ曲線とは何か？（13）

#新型コロナ新規発生数を一次関数で近似する。
[ゴンペルツ曲線とは何か？（12）](https://qiita.com/BMJr/items/0cf2f2d2801ef52cda60)で COVID-19 の累計感染者数と新規感染者数が以下のように表せることを示しました。（*G*<sub>*max*</sub>：それぞれの波毎の総感染者数、*k*：減衰係数）

```math
\begin{align}
\ G(t)&=G_{max}e^{-e^{-kt}}\\
\frac{dG}{dt} &=kG_{max}e^{-kt-e^{-kt}}\\
\end{align}\\
```
2020.3.1 (day 0) - 2021.2.19 (day 355) の全経過を単一の式、一本の曲線で、ほぼ完全に近似できました。（計算式と実測値の相関係数: *R*<sup>2</sup> = 0.9999）
上式は二重指数関数であり描画するためには Mac の Grapher やエクセルなどのソフトが必要です。本稿では、より簡易に描画できるように新規発生数を**一次関数**で近似する方法を示します。
![gompertz_inflection.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193431/91075cb2-4eab-0ae9-e692-0e6d90fc4ad5.jpeg)
上図のようにゴンペルツ曲線は累計発生数が最大値の 1/*e* に達した時が変曲点となり新規発生数がピークに達します。
開始からピークまでの上り坂とピークから終息までの下り坂を2本の直線で近似します。
開始からピークまでの日数を *d*、ピーク時発生数を *h* とします。
新規発生数を二重指数関数で表すと、

```math 
\begin{align}
\ k&=\frac{2}{d}\\
\ y&=ehe^{-k(x-d)-e^{-k(x-d)}}
\end{align}\\
```
![linear_Gompertz.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193431/fc8f51f5-15fc-16ed-8425-c581e8dd66b1.jpeg)
上り坂（緑線）は

```math 
y=\frac{h}{d}x
```
下り坂（青線）は

```math 
\begin{align}
開始からピーク：ピークから終息&=\frac{1}{e}: 1-\frac{1}{e}\\
&=1:e-1\\
\end{align}\\
```

```math 
\begin{align}
\ y&=-\frac{h}{(e-1)d}x+h+\frac{h}{e-1}\\
\ &\fallingdotseq -\frac{0.58h}{d}x+1.58h\\
\end{align}\\
```
この波における総感染者数 *G*<sub>*max*</sub> は三角形の面積に等しく

```math 
\begin{align}
\ G_{max}&=\frac{edh}{2}\\
\ &\fallingdotseq 1.36dh\\
\end{align}\\
```
2本の一次関数と総感染者数が「開始からピークまでの日数: *d*」と「ピーク時発生数: *h*」の2つの値から算出できます。
##途中経過から総感染者数と終息日を予測する
ある地域で、以下のような経過になったとします。
![two_lines.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193431/3f2bfff2-08ba-0c77-313a-66f2c8e7fc27.jpeg)
30日目に35人の新規発生数となり、この時点をピークとすると *G*<sub>*max*</sub> = 1.36 *dh* = 1428人となります。30 *e* = 82日目に終息することが予測されます。もちろん、この先さらに増え続けてピークが後ろにずれ込む可能性はあります。また日本の第3波のように複数のゴンペルツ曲線が重なる可能性もあります。そのため、この**1428人**という数字は「順調にピークアウトして**最も総感染者数が少なかった場合**」の想定となります。この想定される総感染者数が地域の医療キャパシティを超える場合は医療崩壊の恐れあり、ということになります。

[ゴンペルツ曲線とは何か？（1）](https://qiita.com/BMJr/items/24fca066926d471c651e)
[ゴンペルツ曲線とは何か？（2）](https://qiita.com/BMJr/items/1f9135edfb5e68b4f7da)
[ゴンペルツ曲線とは何か？（3）](https://qiita.com/BMJr/items/4e2782e8f1d3c1db6801)
[ゴンペルツ曲線とは何か？（4）](https://qiita.com/BMJr/items/f1665fcf61fc1e182311)
[ゴンペルツ曲線とは何か？（5）](https://qiita.com/BMJr/items/6e48af3017941589bd74)
[ゴンペルツ曲線とは何か？（6）](https://qiita.com/BMJr/items/60858ef7148732b04160)
[ゴンペルツ曲線とは何か？（7）](https://qiita.com/BMJr/items/854d7ea041ac426c3e79)
[ゴンペルツ曲線とは何か？（8）](https://qiita.com/BMJr/items/acad4ec612086d20ac79)
[ゴンペルツ曲線とは何か？（9）](https://qiita.com/BMJr/items/775ae42bb5e0cc6dc461)
[ゴンペルツ曲線とは何か？（10）](https://qiita.com/BMJr/items/5a3fa10d72d107498604)
[ゴンペルツ曲線とは何か？（11）](https://qiita.com/BMJr/items/2055c27c0cb5596816df)
[ゴンペルツ曲線とは何か？（12）](https://qiita.com/BMJr/items/0cf2f2d2801ef52cda60)
[ゴンペルツ曲線とは何か？（14）](https://qiita.com/BMJr/items/4757e087752500913f1b)
Awesome CLI

# 説明
業務やプライベートで出会った頼もしいコマンドを書き溜めていきます。

# jq
出力されたjsonに対しオブジェクト記法でクエリを与えると好きな階層の情報を切り取り取得できる。ハイライトも付く

- [インストール参考](https://blog.memobog.net/2016/01/28/mac-%E3%81%AB-jq-%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB/)

### 使用例
`docker inspect`と合わせるとコンテナの情報が色々分かる

```
docker inspect hoge | jq '.[0]'
```

# parallel(gnu parallel)
並列処理ができる。かなり頼もしいコマンド

- [インストール参考](http://bicycle1885.hatenablog.com/entry/2014/08/10/143612)

### 使用例
hoge.shの中で引数を取り大量にあるpdfをghostscriptで一括並列処理なんてことに使ったり

```
ls foo*/bar*.pdf | parallel hoge.sh
```
【メモ】【Vue.js】transitionタグの使い方

##Vue.jsのtransitionタグとは？
Vue.jsの独自タグ。HTMLファイルの中で使用し、transitionタグで囲むとアニメーションをつけることができる。

CSSのtransitionプロパティがアニメーション全般に使用できるのに対し、transitionタグは**DOMの追加時と削除時**に使用できる。

```
<transition>
    <!-- アニメーションさせたい要素を書く -->
</transition>

```
##transition-groupタグ
**transition-groupタグ**で囲うことで複数の要素をアニメーションさせることができる。

```
<transition-group>
    <!-- アニメーションさせたい要素を書く -->
</transition-group >

```
##CSSトランジション
アニメーションは予め用意されたcss名で設定する必要がある。

```
/*現れる時*/
/*現れる前の状態*/
.v-enter { プロパティ: 値;}

/*現れる間の動き*/
.v-enter-active { プロパティ: 値;}

/*現れた後の状態*/
.v-enter-to { プロパティ: 値;}

```

```
/*消える時*/
/*消える前の状態*/
.v-leave { プロパティ: 値;}

/*消えている間の動き*/
.v-leave-actiove { プロパティ: 値;}

/*消えた後の状態*/
.v-leave-to { プロパティ: 値;}

```

```
/*移動中*/
/*移動中の動き*/
.v-move { プロパティ: 値;}

```

###参考文献：
1. [【Vue.js】transitionタグでアニメーション効果をつける](https://www.i-ryo.com/entry/2019/07/11/231002)
2. [Vue.js の transition ってなに？](https://python.ms/transition/#_1-%E5%8B%98%E9%81%95%E3%81%84%E3%81%97%E3%81%A6%E3%81%84%E3%81%9F%E3%81%93%E3%81%A8)
Docker上にOCaml+Coqの環境を構築して動かしてみるまで

<!-- Docker上にOCaml+Coqの環境を構築して動かしてみるまで -->

# はじめに
CoqをDocker上にインストールしたのでその手順をまとめます。
CoqのコードはOCamlに変換できるので、変換したコードをOCamlから呼び出してみます。
Dockerのインストールは済んでいる前提で進めていきます。

# OPAMのインストール
OCaml、CoqをインストールするためにまずOPAMをインストールします。
OPAMはOCamlのパッケージマネージャです。
OPAMをインストールするとOCamlは自動的に入りますが古いバージョンなので新しいバージョンを別にインストールします。

Alpine Linuxのコンテナを起動します。

```
$ docker run -it alpine
```

コンテナ内でOPAMをインストールします。

```
# apk update
# apk add alpine-sdk ncurses m4 opam
# opam --version
2.0.7
# ocaml --version
The OCaml toplevel, version 4.08.1
```

OPAMを初期化します。
DockerにOPAMを入れるときは'--disable-sandboxing'を付ける必要がありそうなので付けておきます。 https://github.com/ocaml/opam/issues/3498
'-y'は質問をすべてyesで答えて問題ないと思ったため付けています。対話的に選択したいなら外してください。

```
# opam init -y --disable-sandboxing
```

`eval $(opam env)`を実行するように表示されるので 実行します。

```
# eval $(opam env)
[WARNING] Running as root is not recommended
```

rootで実行しているので警告が出ますがこのまま進めます。

# OCamlのインストール

OPAMを使えばOCamlの複数のバージョンを切り替えることができます。
現在インストール済みのバージョンは`opam switch`で確認できます。

```
# opam switch
[WARNING] Running as root is not recommended
#   switch   compiler             description
->  default  ocaml-system.4.08.1  default
```

新しいバージョンをインストールします。(そこそこ時間がかかります)

```
# opam switch create 4.11.2
```

再び`eval $(opam env)`を実行します。

```
# eval $(opam env)
[WARNING] Running as root is not recommended
```

新しいバージョンがインストールされたことを確認します。

```
# opam switch
[WARNING] Running as root is not recommended
#   switch   compiler                    description
->  4.11.2   ocaml-base-compiler.4.11.2  4.11.2
    default  ocaml-system.4.08.1         default
```

# Coqのインストール

OPAMからCoqをインストールする方法は以下を参考にしましたので、同じように進めます。
参考：https://coq.inria.fr/opam-using.html

Coqのインストールには結構時間がかかります。

```
# opam install opam-depext
# opam-depext -y coq
# opam pin -y add coq 8.13.1
```

Coqがインストールされたことを確認します。

```
# coqc --version
The Coq Proof Assistant, version 8.13.1 (April 2021)
compiled on Apr 5 2021 10:33:10 with OCaml 4.11.2
```

# CoqのコードをOCamlに変換する

まずCoqのコードを用意します。
'id.v'という名前でファイルを作成し、関数idを定義します。
関数idは引数をそのまま返す関数です。

```id.v
Definition id (A:Set)(x:A) := x.

Require Extraction.
Extraction "id.ml" id.
```

簡単に説明をすると、1行目が関数idを定義しています。
2、3行目では関数idをOCamlに変換し'id.ml'のファイル名で保存しています。

'id.v'を`coqc`で実行します。

```
# coqc id.v
# ls
id.glob  id.mli   id.vo    id.vos
id.ml    id.v     id.vok
# cat id.ml

(** val id : 'a1 -> 'a1 **)

let id x =
  x
```

# 変換したコードをOCamlから呼び出す

OCamlのコードを用意します。
ファイル名は'hello\_coq.ml'とします。

```hello_coq.ml
let () =
  print_endline "Hello";;
  print_endline (Id.id "Coq!!");;
```

'id.ml'と'hello\_coq.ml'をコンパイルします。
mliファイルが存在する場合、一緒にコンパイルします。

```
# ocamlopt -c id.mli id.ml
# ocamlopt -c hello_coq.ml
# ocamlopt -o hello_coq id.cmx hell_coq.cmx
# ./hello_coq 
Hello
Coq!!
```

# おわりに
Coqをインストールして、OCamlから実行できるところまでできました。
ただし、Coqは定理証明支援システムなのでプログラムを証明するところからが本番です。
OCamlへの変換もCoqとOCamlでは数値やリストの型が異なるので、それぞれの変換方法を記述していく必要があります。
大変そうですがCoqと仲良くなりたいなと思います。
VelocityTrackerを使うときはオフセットに気をつけなさいって話

タッチ操作でViewなどを動かす場合、単にドラッグに合わせて動かすだけでなく、指を離す前の移動速度を計算し、慣性動作をさせると操作性が上がりますね。
AndroidではVelocityTrackerを使うことで、操作の速度を簡単に計算することができます。

ざっくり言うと以下のように使います。

```kotlin
private var velocityTracker: VelocityTracker? = null

override fun onTouchEvent(event: MotionEvent): Boolean {
    val velocityTracker = velocityTracker ?: VelocityTracker.obtain().also { velocityTracker = it }
    when (event.action) {
        MotionEvent.ACTION_DOWN -> {
            velocityTracker.clear()
            velocityTracker.addMovement(event)
        }
        MotionEvent.ACTION_MOVE -> {
            velocityTracker.addMovement(event)
        }
        MotionEvent.ACTION_UP -> {
            // 引数はms、1000を渡すとpixel/sの速度が得られる
            velocityTracker.computeCurrentVelocity(1000)
            val vx = velocityTracker.xVelocity
            val vy = velocityTracker.yVelocity
            // ここで計算した速度を使って慣性動作させる
            velocityTracker.recycle()
            this.velocityTracker = null
        }
        MotionEvent.ACTION_CANCEL -> {
            velocityTracker.recycle()
            this.velocityTracker = null
        }
    }
    return true
}
```

# View自体が動いている場合はオフセット計算が必要

しかし、View自体が動いている場合は、オフセット計算が必要です。
私は、毎回オフセット計算を忘れて時間を無駄にしております:cry:。頻繁に使うものでもないですしね。。

ViewのonTouchEventやOnTouchListenerのonTouchに渡されるMotionEventの座標は、そのViewの左上を原点とする相対座標系に変換されています。VelocityTrackerはこの相対的な座標を元に速度を計算しますので、このタッチ操作によって移動しているViewのMotionEventを渡してしまうと、操作の移動速度ではなく、タッチとViewの移動のズレだけを拾うことになるので、おかしな値が計算されてしまいます。

というわけで、親Viewの座標系に変換してVelocityTrackerに渡すか

```kotlin
private fun VelocityTracker.addAbsoluteMovement(v: View, event: MotionEvent) {
    val dx = v.x
    val dy = v.y
    event.offsetLocation(dx, dy)
    addMovement(event)
    event.offsetLocation(-dx, -dy)
}
```

raw情報を元に、絶対座標に変換してVelocityTrackerに渡す必要があります。

```kotlin
private fun VelocityTracker.addAbsoluteMovement(event: MotionEvent) {
    val dx = event.rawX - event.x
    val dy = event.rawY - event.y
    event.offsetLocation(dx, dy)
    addMovement(event)
    event.offsetLocation(-dx, -dy)
}
```

注意点としては、offsetLocationで座標系を変換した場合、必ず逆変換を行って元に戻しておきましょう。

以上です。
【初心者でもわかる】1行と2行など行数が違うものを同じ高さにして横並びにする方法

# どうも7noteです。行数が違っても高さを揃える方法について

行数が違うけど横並びにするようなレイアウトってうまく作らないとブサイクになってしまいます。
これを背景色やborderありでもきれいに並べる方法を紹介していきます。
フレックスボックスを使うのですが、**フレックスボックス特有の注意点もあるので最後まで読んでくださいね！**

**・[ 失敗 ] `display: inline-block;`で並べた場合。**
![miss01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/d37b0d07-b926-7e7e-b9de-ce27d6f9acd7.png)

**・[ 失敗 ] `display: inline-block;`で並べて高さも指定した場合。**
![miss02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/178e1ba1-31be-9500-f165-e7a6908f1387.png)

**・[ 成功 ] `display: flex;`を使えば簡単！**
![ok.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/26730527-e0b8-2e85-c76e-030957344969.png)



## 行数が違うコンテンツの横並びをフレックスボックスで対応する

```index.html
<ul class="box">
  <li>1行の文。</li>
  <li>ここには2行くらいの文章。</li>
  <li>ここには3行くらいのながーーーーい文章が入りますよ。</li>
</ul>
```

```style.css
.box {
  display: flex; /* 子要素をフレックスボックスで横並びにする */
  justify-content: space-around; /* 等間隔で左右に並べる */
}
.box li {
  width: 150px;           /* 幅を適度な大きさに指定 */
  background: #ddd;       /* 背景色をグレーに指定 */
  border: 1px solid #000; /* borderを引く */
}
```

**結果**
![ok.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/19834662-5e5e-1c20-49c9-836f4d68dfb0.png)

※ 等間隔で並べているので、**親要素が大きすぎると広がり過ぎてしまう**ので、そんなときは以下の対策がベストだと思います。

**・親要素に幅を指定する**
**・子要素の幅を30%などにして可変にする**

## フレックスボックスを使うときの注意

フレックスボックスには上下位置を指定するプロパティ（**align-items**）が存在します。これを指定してしまうと、**高さが揃わなくなってしまう**ので指定しないように注意！

**・ 要素を上下中央にしようとした場合、高さが揃わなくなる**

![ng.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/d197f20f-1695-4318-7bee-0114e42e86b2.png)

```style.css
.box {
  /* 以下の１行を追加してしまった場合 */
  align-items: center;
}
```

こういう使い方をしたいときはもちろん使ってOK!

## まとめ

フレックスボックスの基礎はプロゲートとかでも学べるので、そもそもまだフレックスボックスやったことないよという方は、プロゲートなどで基本をインプットすることをオススメします！
そしてこのようなフレックスボックスの具体的な使い方や注意点などはプロゲートだけで学習するには難しく、実際にやってみないとわからないことも多いので、参考サイトで調べたり記事を見て情報を得るか、先輩となるような人に教えてもらうしかないのでどんどんいろんなことに挑戦してみるのがいいと思います！

#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】WEB制作のちょいテク詰め合わせ](https://qiita.com/7note)