OmniAICreator/Qiita-1.07M huggingface dataset:
Vue.js基礎

## データバインディング
データと描画を同期する仕組み。

## v:bindについて
・dataオプションに指定した、データをデータバインディングする。

```vuejs

		<p id='app'>
      <input type=“text” v-bind = “message”>
		</p>
```   

```vuejs

 <script>

        const app = new Vue({
            el: '#app',//htmlのappの中でvue.jsを適用する*
            data: {
                toggle: true
				  message: "Hello Vue.js!" 
            }
        });
    </script>
```
とすることにより、テキストボックスの中に[Hello]と表示される
<img width="430" alt="c7c1f0e309f0ef3e0fa8d3491a0f0ebf.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/499375/3724aec4-de26-3a6d-b60b-b5a926d614ee.png">


## v-ifについて
・要素の表示/非表示を切り替える

```vuejs

 <div id=“app”>
        <p v-if=“toggle”>
            dousita
        </p>
    </div>
```

```vuejs

 <script>

        const app = new Vue({
            el: '#app',//htmlのappの中でvue.jsを適用する*
            data: {
                toggle: true
            }
        });
    </script>
```
toggleがfalseになっていたら、dousitaが表示されず、
toggleがtrueになっていたら、dousitaが表示される。

## v-if と　v-showの違い
v-if:falseでは、DOMレベルで要素が削除されてしまうが、
v-showでは、検証ツールで見てみると、

```html

<div id="app"><p style="display: none;">
            dousita
             </p>
</div>
```
display:noneという形で、DOMからは要素は削除されない。
CSSのディスプレイプロパティを利用して、表示/非表示を切り替えている

## v-forについて
・オブジェクトの繰り返しを、v-forディレクティブで行う方法

```html
  <div id=“app”>
        <ol>
            <li v-for=“color in colors”>{{ color }}</li>
        </ol>
    </div>
```

```vuejs

<li v-for=“color in colors”>{{ color }}</li>
```
colorは任意の値でも良いが、単数形にしておくとコードの可読性が上がる。colorsの部分には、表示に使う配列を指定する。

```vuejs

<script>

        const app = new Vue({
            el: '#app',//htmlのappの中でvue.jsを適用する
            data: {
                colors: ['red','green','blue']
          }
        });
    
</script>
```

## コンポーネントについて
- 名前付きの再利用可能なVueインスタンス。
- UIパーツを作成することができる。
- 何回も使いまわせる。

```vuejs

<div id=“app”>
        <hello-component></hello-component>
    </div>

    <script>
        Vue.component('hello-component',{
           template: '<p>Hello</p>'
        })
        const app = new Vue({
            el: '#app',//htmlのappの中でvue.jsを適用する
            data: {
                message: 'Hello!!!'
’           }

        });
    </script>
```

<img width="227" alt="2722603c6bca95f9e25149b99e53dbc0.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/499375/cbfae848-3e1e-23a8-0182-0aae512e82ea.png">

と表示される。

```vuejs
<script>
Vue.component('コンポーネントの名前',{
           template: 'htmlに表示させたい内容'
        })
</script>
```
蛍光画像の焦点面を変えた画像を作り出す「Deep-Z」

Nature Methods誌を読んでいたら興味深いツールを見つけました。「Deep-Z」というツールです。


カメラは焦点があり、焦点以外の面にあるものはぼやけて写ります。
顕微鏡も同じで、特に蛍光顕微鏡ではよく見られます。(ぼやけることを回避するために、共焦点顕微鏡や LightSheet顕微鏡が開発されていますが。）

Deep-Zでは、このぼやけを逆に利用し、Deep Learningを適応することで、焦点を自在に変えたものを仮想的に作りだすようです。
方法としてはGANを用いることでリアルに近いものを生成しています。

1枚の蛍光画像から、Z方向に上下10枚ずつの画像を生成することができるようです。
つまり2次元の画像から、3次元のスタック画像を作りだします。

論文：https://www.nature.com/articles/s41592-019-0622-5
GitHubページ：https://github.com/puppy101puppy/Deep-Z
英語記事：https://protocolsmethods.springernature.com/users/47824-aydogan-ozcan/posts/55017-a-virtual-journey-within-a-fluorescent-sample-3d-digital-refocusing-of-fluorescence-images-using-deep-learning

##動かしてみる
コードは、Fijiのpluginとしてコンパイルされたものが公開されています。
インストールはpluginフォルダに入れるだけのため、非常に簡単です。

モデル、デモ画像は開発者が公開しているものを利用することが出来ます。(http://bit.ly/deep-z)

線虫のデモ画像です。これを入力とします。
![Input.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521288/acaa5d20-74e5-473d-bce9-50a9376ad4fd.jpeg)
かなりぼやけています。

画像は1024×1024のみ対応のため、サイズが異なるときはimageJの[Canvas Size]機能で調整しましょう。
使用するときは画像のパスを指定して読み込んで使うため、ストレージのどこかに保存しておきましょう。

動かすには[Process]タブの[Deep-Z Digital Propagation Network]をクリックします。
ここで、モデルのフォルダのパスと画像のパスを指定し、[OK]で開始です。
＊オプションを[Generate Stack]にしておくと、スタック画像を生成してくれます。

開始するとまず、マスク画像が現れます。おそらく一定以上の輝度値がある領域のみを処理するようです。
一枚当たり十数秒の時間で生成されました。

出力画像です、（仮想的に焦点面を6 μｍずらした画像）
![DeepZ propagated stack -1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/521288/d5841fdd-200b-d752-aaaa-cc7d4db15c3d.jpeg)


ぼやけていた画像の焦点があって、体部の中の粒子がきれいに見えるようになりました。
生成された画像はかなりリアルです。

##感想
デモ画像を適用してみて、焦点がピッタリの画像が生成されて驚きました。
やはりGANはリアルな画像を作り出すのに長けているのではないでしょうか。

使い方としては、例えば画像をとった後で「もっと焦点を変えて撮影すればよかった」となることがあります。
そういった場合はこのソフトを使うことで、画像を有効利用することが出来るのではないでしょうか。

自分の画像でトレーニングしてモデルを作ることはまだできないようですが、出来るようになればさらに使いやすくなると思います。
ABC152 解説

[ABC152](https://atcoder.jp/contests/abc152)の解説です。
自分は39:11全完で世界28位。もうちょっとすらすらできてもよかったかな、とは思います。
では、解説に移りましょう。
# [A問題](https://atcoder.jp/contests/abc152/tasks/abc152_a)
$N=M$ かどうか判定しましょう。おわり。
# [B問題](https://atcoder.jp/contests/abc152/tasks/abc152_b)
これは、$a$ と$b$ の大小を考えるだけで解けるのですが、少し知識的な面で補足を。
C++のstd::stringでは、コンストラクタに長さと何らかの文字を与えると、その文字を長さ分だけ連結した文字列を生成してくれます。
これを利用して解いた自分のコードは[コレ](https://atcoder.jp/contests/abc152/submissions/9599263)です。覚えておくと便利なときがたまにあります。
# [C問題](https://atcoder.jp/contests/abc152/tasks/abc152_c)
300点にしては難しめだったかもしれません。
愚直な大小比較をすると、時間制限に引っかかります。
端の方から累積して最小値を取ると、判定が一発でできるので、最初に累積最小値を取っておきましょう。
# [D問題](https://atcoder.jp/contests/abc152/tasks/abc152_d)
結構めんどくさいですが整理して解きましょう。
Aと、Bの長さを全列挙します。
Bの長さがNの長さより短い場合は、最初と最後の2文字以外自由なので、$2^{length(B)-2}$ 通りあります。
Bの長さがNの長さより長い場合は、ひとつも作れません。
あとは、等しい場合です。
Aの最後の文字がNの最初の文字より大きい場合は、作れません。
Aの最後の文字がNの最初の文字より小さい場合は、最初と最後の2文字以外自由なので、$2^{length(B)-2}$ 通りあります。
等しい場合だけまた場合分けがあります。
Aの最初の文字がNの最後の文字以下の小さい場合は、Nの最初と最後の文字を除いて見た数+1通りあります。
そうでない場合は、Nの最初と最後の文字を除いて見た数と同じ通り数あります。
こうして全列挙を行い、値を足せばよいです。
一応計算量は理論上 $O(N\log N)$ ですが、まあ $O(N)$ だと思っていいです。
# [E問題](https://atcoder.jp/contests/abc152/tasks/abc152_e)
$A_iB_i$ の値として考えられるのは、$A$ の最小公倍数にするのが明らかに最適です。
最小公倍数をmodつきで求めたいところですが、ユークリッドの互除法を使って最大公約数を通じて求めてしまうと、modが崩れて破滅します。
そこで、最小公倍数の定義を考えて、$A$ の各要素を素因数分解し、各素因数について最大値を求め、最小公倍数を直接求めに行きます。
$A$ の各要素は今回小さめなので、素因数分解をしても間に合います。
計算量は $O(N\sqrt{A})$ です。
# [F問題](https://atcoder.jp/contests/abc152/tasks/abc152_f)
今回は、ABCのFとしては非常にちょうどいい難易度だったと感じます。
制約を眺めると、$M$ が最大でも $20$ であることに気づきます。これを利用して解きます。
まず、すべての $u_i,v_i$ について、DFSなどでパス上の辺を列挙し、どの辺を通るかがすぐわかるようにしておきます。この判定を $O(1)$ でできるようにしておくとあとが楽です。（しなくても解ける気はしますが、しない意味がないのでしましょう。）
そのあとは、bitDPをします。
${\rm dp}[i][S]=i$ 番目までの辺を使って、集合 $S$ に含まれる $u$ と $v$ の組み合わせについて、パス上に黒い辺を含ませる通り数
とします。
答えは ${\rm dp}[N-1][U]$ ($U$ は全体集合）となります。
先に行ったDFSでの列挙を利用して遷移の計算量を抑えられ、全体での計算量は、$O(NM2^M)$ となります。
# おわりに
今回のABCでレートが久しぶりに上がりました。
さっさと黄色に復帰したい…
JetBrains_学習ノート_001

#vim 関連資料（コマンド一覧）

- JetBrainsの製品（IDE）の中にほとんどが下記のように「Vim Emulator」というプラグインを起動できます。
![Vim Emulator](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551056/728f3f7c-5a97-da39-b9a3-062df22acad2.png)

- Vimは慣れるとコーディングの効率も高いと思いますので、下記の関連資料をメモします。

    - 日本語関連資料：（[Vim入門 @kyawphyonaing 2018年11月05日に更新](https://qiita.com/kyawphyonaing/items/b31378ccde7957bc541d)）
![Vim keyboard_JPN](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551056/a6cdd86f-e140-19cb-fae3-f4852998dd94.png)

    - 中国語関連資料：（[菜鸟教程](https://www.runoob.com/linux/linux-vim.html)）
![Vim keyboard_CHN](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551056/a07bd0f7-c8d0-0f0e-2b8f-c5a34b41db91.png)
[R] ArcGIS とか QGIS っぽいインターフェースを R で作ってみる

Rmarkdown でマップとテーブルをくっつけて表示したら、ArcGIS とか QGIS みたいになりました。 
![Test.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569582/bff6b51e-ef6f-92a9-536c-376e7e5708a0.jpeg)

（Markdown の中に Markdown を書いていくのはどうしたらよかったのだろうか...。 ※下記ではチャンクをコメントアウトしています。）

```r
## 0. 準備
# ```{r setup, include=F}
knitr::opts_chunk$set(echo=T)
library(colorRamps)
library(data.table)
library(dplyr)
library(DT)
library(mapview)
library(sf)
setwd("C:/hoge/piyo/")
# ```

## 1. データの読み込み
# ```{r code1, echo=F, warning=F}
Ward <- sf::st_read("Boundary_Ward_Tokyo23.shp")
CCM <- sf::st_read("Boundary_CCM_Tokyo23.shp")

m <- mapview(Ward, color="blue", lwd=2, legend=F, 
             col.regions="White", alpha.regions=0, 
             map.types="CartoDB.Positron") +
     mapview(CCM, zcol="Pop", lwd=0.2,
             col.regions=colorRampPalette(c("white","orange","red","darkred")))
# ```

## 2. マップの表示
# Mapping
# ```{r code2, echo=F, out.width='100%'}
m@map
# ```

## 3. 属性テーブルの表示
# Attribute table
# ```{r code3, echo=F, warning=F, out.width='100%'}
DT::datatable(CCM, rownames=F, editable=T)
# ```
```
データは統計GIS（ https://www.e-stat.go.jp/gis/ ）よりDLしたものです。

あと、Kepler.gl で 3次元化したマップを組み込むのはリンクの貼り付けでできたが、属性テーブルをエディットした結果を逐次的にマップに反映させる方法を試行中...。
AfterEffectsでNeumorphism Design

皆さんは、Neumorphismという言葉を聞いたことがありますか？
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321517/34cccc6a-63a4-1ac1-cc57-14e3b03ad1b9.jpeg">

new + skeuomorphism から来た単語で、これから流行るUIデザインだと言われているらしいです。
iOSで実装している記事 [Neumorphism: 令和時代のスキューモーフィズム](https://qiita.com/touyoubuntu/items/bf887093ec7265efe201) を読み、かっこええ！！！なんじゃこれ！！！っとなったので、映像分野でも使えればなぁなんて思ってノリで作ってみたら案外簡単に作れちゃったのでご紹介します。

# Neumorphism Designってそもそもなんやねん
長々と説明したいところなのですが、あいにく語彙力が足りないようなので何よりもこちらを参照することをおすすめします↓
[Neumorphism (Soft UI) in User interface design - Tutorial](https://uxplanet.org/neumorphism-in-user-interface-tutorial-c353698ac5c0)

まとめると左上、右下への影で立体感を再現します。使用する色は輝度が違うグラデーションの色です。あらまあなんて簡単なんでしょう。
<img width="800" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321517/de18c594-e489-d0ff-b0f0-6c9512cb7523.png">


# 早速AfterEffectsで再現
Neumorphismについての説明はほどほどに、早速作っていきましょう！！！

## コンポジションと平面を作成
まずはAfterEffectsを開き、新規コンポジションを作成します。詳細設定は画像の通りです。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321517/24e347bc-618c-6721-6d05-6b8a82fb2f5a.png">

続いて、新規平面レイヤーを作成します。この時、カラーは背景&ボディの本体となる色を選択します。


画像の場合では、#F08F9F を使用しています。
<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321517/9de2f30d-f33e-a389-f7bb-d54c707c2135.png">

## 長方形を描画
次に、新規シェイプレイヤーを作成し、長方形を描画します。塗りは、平面レイヤーと同じ色を使用します。

画像の場合は同じく#F08F9F を使用しています。
<img width="1000" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321517/cc847570-47e9-a7b2-33ab-167ad5039dec.png">

## シャドウ(影)を入れる
そして、今回の鍵となるシャドウ(影)の描画をしていきます。
ますは、左斜め上方向へのベース色よりも明るい色での影を描画します。
対象の長方形を選択し、エフェクト＞遠近＞ドロップシャドウ を適用します。

画像では、シャドウのカラーに #FBE8EB を使用しています。不透明度50%、方向は-45°、距離は9、柔らかさ16を設定します。
<img width="700"src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321517/bd0f6018-0dd2-55f2-f2c2-b5b3479f54bd.png">

最後に、右斜め下方向への暗い色の影を描画します。
同じく長方形へ、エフェクト＞遠近＞ドロップシャドウ を適用します。

カラーは #E96178 を使用しています。不透明度50%、方向は135°、距離は9、柔らかさ16 を設定します。
<img width="700" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321517/76550eda-8868-c7f6-188c-efbcb8eeccb7.png">

## え？これだけ？
そうなんですこれだけです。あとは図形に角丸を適用したり、好きな文字を入れることでかっこよくなります。

ということで完成形はこちら。
<img width="1000" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321517/4bfa4946-4349-5bdb-6f65-a64ffcc27cea.jpeg">

# 番外編: 動きをつけるとこうなる
せっかくのAfterEffectsなのでイージングを使ったモーションを2種類作ってみました

①浮かび上がるモーション
![neum_1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321517/28712aff-aa49-af47-227e-0c20a4736964.gif)

②びよーんって出てくるモーション
![neum_2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321517/be8d97dc-fa71-407f-76b1-2637dbe1c07a.gif)

# まとめ
今回は、AfterEffectsでNeumorphism Designの作成をしてみました。よかったら実践してみてください！！
この記事を読んでいただいたこと、本当にありがとうございます。いいねつけてくれると嬉しいなぁって心の中で叫んでいるのでぜひ:thumbsup:

初Qiita記事書かせていただきました。Qiitaなのにコーディングじゃないのかよ？！？！って自分でも思いますが、いつかAndroidとかの記事とか出せるくらいつよくなれればな、なんて思ってます。


個人的にはNeumorphismめちゃめちゃ気に入ってるのでみんなも使いましょ！！！！！笑
You don't have bcrypt installed in your application. と言われた

railsチュートリアル第6章の最後の最後のrails testでエラってハマりまくったので備忘録。

#環境
- Rails 5.1.6
- ruby 2.6.1p33 (2019-01-30 revision 66950) [x86_64-darwin18]

#問題発生

ユーザー作成も認証もできたし一区切り！と、ローカルでの`rails test`はok
しかしマージしてpushしたあと再び`rails test`したところ怒られました

```railsconsole
You don't have bcrypt installed in your application. Please add it to your Gemfile and run bundle install:??
```

bcryptはinstallしてるしGemfileにもGemfile.lockにもあるのになんでだ・・・？
ググると同じようなエラーでハマったという方がいらっしゃって
rails server再起動とかuninstallしてから再インストールやってみたけど解決せず・・


#なんとか解決


- Gemfileの`bcrypt`の部分をコメントアウトする
- `bundle install`する
- コメントアウト外す
- 再び`bundle install`

たまたま見つけたこちらの方の手順でいけました:sob:
[rails consoleでコマンド実行時のbcryptに関するエラーとその対処法](https://qiita.com/ricoirico/items/f3600abea6eb221a62df)

根本的な原因がまじでわかんないのでもちょい調べる。
GASでGoogleカレンダーのリマインドをラインに送る

# はじめに
Google App Scriptを使って、Googleカレンダーに登録してある、予定のリマインドをラインに送信する方法です。


## システム構成図

![b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158142/2f5b9243-f51c-0508-9083-ac75077b1915.png)




## コード
```javascript
var token = "<token>";
var google_calendar_id = '<calendar_id>';

function notify() {
  var calendar = CalendarApp.getCalendarById(google_calendar_id);
  var today = new Date();
  var tomorrow = new Date(today);
  tomorrow.setDate(tomorrow.getDate() + 1);
  var events = calendar.getEventsForDay(tomorrow);
  if( events.length >= 1 ) {
    var title = events[0].getTitle();
    var message = title;
    sendToLine(message);
  }

}

function sendToLine(message){
  var options =
   {
     "method"  : "post",
     "headers" : {"Authorization" : "Bearer "+ token},
     "payload" : "message=" + message
   };

   UrlFetchApp.fetch("https://notify-api.line.me/api/notify", options);
}
```
#### ポイント
- 特定のカレンダーの明日の予定をチェックして、あればラインにメッセージを送信する


### トリガーの設定
<img width="660" alt="スクリーンショット 2020-01-19 22.15.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158142/ba66b436-d0bd-e7cc-19af-1729694336a8.png">

こんな感じで毎日決まって時間に実行するようにしています。
【Rails】Colorpickersliderの使い方

# 開発環境
Rails 5.2.4.1
ruby 2.4.0

## 前提
devise導入済み
userにcolorカラムを追加
<img width="427" alt="Screen Shot 0002-01-19 at 22.05.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212678/f4658e36-0805-62eb-eb3a-78bca5eac911.png">


## 参考URL
[色の指定が自由自在！カラーピッカーを出現させるjQueryプラグイン「Bootstrap Color Picker Sliders」](https://haniwaman.com/bootstrap-color-picker-sliders/)
[Bootstrap Color Picker Sliders]( https://www.virtuosoft.eu/code/bootstrap-colorpickersliders/)


### まとめた経緯
自社内サービスでガントチャートを作成するに当たり、
自分の色をつけることでわかりやすくしようとしました。

# 使い方
##ソースをダウンロードする↓
 [Github](https://github.com/istvan-ujjmeszaros/bootstrap-colorpickersliders)から
ファイルをダウンロードする

## ライブラリを読み込む
jQuery, Bootstrap, tinyColorに依存するので、それらを先に読み込む
(ここは省略します)

## 表示のしかた
```haml:index.haml
...
= f.text_field :color, id: 'hsvflat', autofocus: true, autocomplete: 'color'
```

## jsの初期化
```haml:index.haml
<script>
  $("#hsvflat").ColorPickerSliders({
    color: "#F44336",
    placement: 'right',
    sliders: false,
    swatches: ['#F44336', '#E91E63', '#9C27B0', '#673AB7', '#3F51B5', '#2196F3', '#03A9F4', '#00BCD4', '#009688', '#4CAF50', '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800', '#FF5722', '#795548', '#9E9E9E', '#607D8B', '#000000', '#FFFFFF'],
    hsvpanel: false
  });
</script>
```

# こんな感じになるよ
<img width="558" alt="Screen Shot 0002-01-19 at 22.17.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212678/b2e1874a-91e9-b025-37a1-857bba27fee4.png">
67日目 【Kaggle入門】ランダムフォレストを使ってみたが？

KaggleのTitanic予想。前回は`全員生存モデル`と`Gender Based Model`(男性死亡・女性生存)を作りました。[66日目 【Kaggle入門】一番カンタンなTitanic予想](https://qiita.com/robamimim/items/fbc03fb52fd0ddf3e2c3)　

今回は機械学習ということで、ランダムフォレストを使ってみました。
元ネタはこちら。KaggleのNotebookで一番人気のレシピです。[Titanic Data Science Solutions](https://www.kaggle.com/)

書いてあるのが英語なので、とりあえず上から下までざーっと眺めます。
結論、ランダムフォレストが一番使いやすかったようです。

さっそく前回の`Gender Based Model`を元に実行してみました。

---
###`train.csv`と`test.csv`からデータを切り出します。
この辺は前回といっしょ。

```11.py
import pandas as pd
# pandasでCSVを読み込む
train_df = pd.read_csv('train.csv')
test_df = pd.read_csv('test.csv')

#性別を男０女１に変換
train_df.replace({'Sex': {'male': 0, 'female': 1}}, inplace=True)
test_df.replace({'Sex': {'male': 0, 'female': 1}}, inplace=True)

#Dataframeを作る
train_df = train_df.loc[:,['PassengerId','Survived','Sex']]
test_df = test_df.loc[:,['PassengerId','Sex']]
```

###訓練用データから予測モデルを作ります。

・訓練用データ`train.csv`を説明変数(x)と目的変数(y)に縦割りします。
・さらに擬似訓練データ(X_train, y_train)と擬似テストデータ((X_valid, y_valid)に横割りします。


```12.py
#ベースラインモデルの構築
#データ分割のモジュールをインポート
from sklearn.model_selection import train_test_split

#訓練用データを元データから切り出して、.valuesでnumpy.ndarray型に変換する
X = train_df.iloc[:, 2:].values        #原因となる要素群
y = train_df.iloc[:, 1].values         #結果

#テストデータ
X_test = test_df.iloc[:, 1:].values #原因となる要素群

#訓練用データを分割して予測モデルを作る
#データの分割には、scikit-learnのtrain_test_split関数を使用
#分割をランダムにするシード値を42にする（銀河ヒッチハイクガイドによる）
X_train, X_valid, y_train, y_valid = train_test_split(X, y, test_size=0.3, random_state=42)
```

####擬似訓練データで学習させ、予測モデルをつくります。
予測モデルで擬似テストデータを予測します。
結果のスコアが近いほどいい予測モデルとされています。
訓練データのスコアが良すぎる過学習や、低すぎる学習不足の場合は予測モデルを見直します。

```13.py
#ランダムフォレストで予測モデルを作成する
from sklearn.ensemble import RandomForestClassifier

#擬似訓練データを学習し予測モデルを作成する。
rfc = RandomForestClassifier(n_estimators=100)
rfc.fit(X_train, y_train)

#擬似訓練データX_train, y_train)のスコアを見る
print('Train Score: {}'.format(round(rfc.score(X_train, y_train), 3)))
#擬似テストデータ(X_valid, y_valid)のスコアを見る
print(' Test Score: {}'.format(round(rfc.score(X_valid, y_valid), 3)))
```

####擬似訓練スコアと擬似テストスコアを確認します。
>Train Score: 0.785
> Test Score: 0.791

今回の結果は・・・いいんでしょうか、どうなんでしょうか。人間が学習不足ですね。
まあともかくモデルができたし予測してみましょう。

###作成した予測モデルでテストデータを予測します。

```14.py
#作成した予測モデル( rfc.predict)でテストデータ(X_test)を予測する
y_pred = rfc.predict(X_test)

#結果をPandasデータフレームに変換する。
submission = pd.DataFrame({
        "PassengerId": test_df["PassengerId"],
        "Survived": y_pred
    })

#CSVに出力する。
submission.to_csv('titanic1-2.csv', index=False)
```

#完成！

さっそくKaggleにアップします。

`Public Score:0.76555`

？？？

これは前回の男性死亡女性生存モデルと同じ結果です。
CSVファイルを確認すると確かにまったく同一でした。
元データのtrain.csvを見ると、女性の生存率は75%、男性は18%なので、ある程度は異なる予測がでると思っていたので以外でした。

予測モデルは890件のtrain.csvを7:3分けにした600件余りのデータを元にしました。予測に十分な数に足りていないのかもしれません。あるいは、ランダムフォレストはあいまいな予測が苦手なのかもしれませんし、もしかしたらどこかでコーディングを間違っているのかもしれません。


この辺、ちょっとよくわからないので保留にします。
四角い領域の切り取り、切り貼り



操作したかったのは、ファイル一覧から、ファイル名だけを取得したい。

ls で一覧を作り、アルファベット順ではなくなるが、空白を改行にすれば一覧はできる。

あとからアルファベット順に整列させればいいだけだから。

```
# ls -al
-rw-r--r-- 1 root root   612491 Jan 16 08:54 AUTOSAR_ATR_Features.pdf
-rw-r--r-- 1 root root   793502 Jan 16 08:54 AUTOSAR_ATR_Requirements.pdf
-rw-r--r-- 1 root root  2337614 Jan 16 08:54 AUTOSAR_EXP_ARAComAPI.pdf
-rw-r--r-- 1 root root  1002668 Jan 16 08:54 AUTOSAR_EXP_AcceptanceTestsOverview.pdf
-rw-r--r-- 1 root root   560821 Jan 16 08:54 AUTOSAR_EXP_AdaptivePlatformInterfacesGuidelines.pdf
-rw-r--r-- 1 root root  1018829 Jan 16 08:54 AUTOSAR_EXP_ApplicationLevelErrorHandling.pdf
-rw-r--r-- 1 root root  2532981 Jan 16 08:54 AUTOSAR_EXP_BSWDistributionGuide.pdf
-rw-r--r-- 1 root root   496123 Jan 16 08:54 AUTOSAR_EXP_CDDDesignAndIntegrationGuideline.pdf
-rw-r--r-- 1 root root  1268324 Jan 16 08:54 AUTOSAR_EXP_ErrorDescription.pdf
-rw-r--r-- 1 root root   224193 Jan 16 08:54 AUTOSAR_EXP_IPsecImplementationGuidelines.pdf
-rw-r--r-- 1 root root   406631 Jan 16 08:54 AUTOSAR_EXP_InterruptHandlingExplanation.pdf
-rw-r--r-- 1 root root  3089695 Jan 16 08:54 AUTOSAR_EXP_LayeredSoftwareArchitecture.pdf
-rw-r--r-- 1 root root   721400 Jan 16 08:54 AUTOSAR_EXP_MacroEncapsulationofInterpolationCalls.pdf
-rw-r--r-- 1 root root   608024 Jan 16 08:54 AUTOSAR_EXP_ModeManagementGuide.pdf
-rw-r--r-- 1 root root  1595982 Jan 16 08:54 AUTOSAR_EXP_NVDataHandling.pdf
-rw-r--r-- 1 root root   578278 Jan 16 08:54 AUTOSAR_EXP_ParallelProcessingGuidelines.pdf
-rw-r--r-- 1 root root  3454258 Jan 16 08:54 AUTOSAR_EXP_PlatformDesign.pdf
-rw-r--r-- 1 root root  1879071 Jan 16 08:54 AUTOSAR_EXP_SafetyUseCase.pdf
-rw-r--r-- 1 root root   867947 Jan 16 08:54 AUTOSAR_EXP_SensorInterfaces.pdf
-rw-r--r-- 1 root root  2120376 Jan 16 08:54
```

昔、vzエディタで四角い領域の切り貼りをしていた。
今でも、その頃の習慣で、四角い領域の切りはりをしたくなることがある。

ネットで検索したら

Macでテキストを矩形選択！文字を四角くコピーする方法 
https://infini-lab.com/rectangular-selections-on-mac

を見て、optionを押しながらマウスで選択しようと、
mi.appで実施したらうまく行かなかった。

macOS同梱の「テキストエディタ」で処理したらうまくいった。

ただし、テキストエディタに貼り付けると、ファイル名が一列にならばずに、３文字くらいずれる。

上記ファイルでいえば四角く切り取ると、

4 
54 
:54 

という３種類の先頭が生まれる。
これは、この類型の文字列を削除する処理で対応した。

# 文書履歴(document history)
ver. 0.01 初稿 20200119
ver. 0.04 URL追記　20230302

### 最後までおよみいただきありがとうございました。

いいね　💚、フォローをお願いします。

####  Thank you very much for reading to the last sentence.

Please press the like icon 💚　and follow me for your happy life.
例外の復習

```py:1
l = [1, 2, 3]
i = 5

print('start')
try:
    l[0]
except IndexError as ex:
    print('そのインデックスはありません。{}'.format(ex))
except NameError as ex:
    print('定義されていません。{}'.format(ex))
except Exception as ex:
    print('other: {}'.format(ex))
else:
    print("正常に処理されました。")
finally:
    print("end")
```

```:1の実行結果
start
正常に処理されました。
end
```
どのエラーも発生しないので、
elseブロックとfinallyブロックが実行された。

```py:2
l = [1, 2, 3]
i = 5

print('start')
try:
    l[i]
except IndexError as ex:
    print('そのインデックスはありません。{}'.format(ex))
except NameError as ex:
    print('定義されていません。{}'.format(ex))
except Exception as ex:
    print('other: {}'.format(ex))
else:
    print("正常に処理されました。")
finally:
    print("end")
```

```:2の実行結果
start
そのインデックスはありません。list index out of range
end
```

インデックスが2までしかないのに、
インデックス5を指定し、
IndexErrorが発生する。
なので、
except IndexError as exのブロックとfinallyブロックが実行された。

```py:3
l = [1, 2, 3]
i = 5

del l

print('start')
try:
    l[0]
except IndexError as ex:
    print('そのインデックスはありません。{}'.format(ex))
except NameError as ex:
    print('定義されていません。{}'.format(ex))
except Exception as ex:
    print('other: {}'.format(ex))
else:
    print("正常に処理されました。")
finally:
    print("end")
```

```:3の実行結果
start
定義されていません。name 'l' is not defined
end
```

del lでlがなくなったので、
NameErrorが発生する。
なので、
except NameError as exのブロックとfinallyブロックが実行された。

```py:4
l = [1, 2, 3]
i = 5

print('start')
try:
    l + ()
except IndexError as ex:
    print('そのインデックスはありません。{}'.format(ex))
except NameError as ex:
    print('定義されていません。{}'.format(ex))
except Exception as ex:
    print('other: {}'.format(ex))
else:
    print("正常に処理されました。")
finally:
    print("end")
```

```:4の実行結果
start
other: can only concatenate list (not "tuple") to list
end
```
リストとタプルを足し算するので、
IndexErrorでもNameErrorでもないエラーが発生する。
なので、
except Exception as exのブロックとfinallyブロックが実行された。
エンジニアのポートフォリオを作ってみた

以前からポートフォリオサイトを作ってみたかったので今回作ってみました。

https://sssttt-maker.github.io/portfolio/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/508016/a5b4f024-30c5-6dc8-1627-52981beea84c.png)


github.ioで公開できる最近まで知りませんでした。

<h2>デザイン</h2>
デザインは、僕の大好きなブランド会社のTOKYO BASEさんのホームページを参考にさせていただきました。
http://www.tokyobase.co.jp/

パララックスサイトみたいなのがかっこいいなと思ったので導入。
セクションが次々に動いていてとても気持ちいいです。

cssで
 
```
position: sticky;
```

というのをsection指定にして入れるだけで簡単に再現できちゃいます。
【スマホ】トップへ戻るナビを画面下部に固定する場合

画面を少しスクロールした後で「トップページへ戻る」アイコンを画面の下部にフェードイン表示させる。

この場合、Javascriptでウインドウの高さ・幅を取得した後、

CSSでアイコンの位置を、

```css:style.css
top:ウインドウの高さ-70px
left:ウインドウの幅-70px
```

と設定していた。

スマホのブラウザ（AndroidのChrome、Operaで確認）はある程度下へスクロールするとアドレスバーが自動的に隠れる仕様になっている。
隠れる時（下へスクロールする時）は問題ないけど、再び表示されるとき（上へスクロールする時）に、アイコンの位置がずれることに気が付いた。

そこでウインドウサイズは関係なしで、シンプルにCSSへ

```css:style.css
bottom: 70px;
```

と設定したところ、うまくいった。
vscodeのmarkdown css変更メモ

初期のcssだと若干見づらいところがあるので、githubのcssに差し替えた際のメモ

## github cssの取得

- https://github.com/sindresorhus/github-markdown-css ダウンロードしてくる
- 「.markdown-」 を 「（空白）」にリプレースする
    - 「」はいらない。念のため

## プレビューのcssを上記に変更

- "markdown.styles": ["C:\\Users\\<ユーザー名>\\.vscode\\md_preview.css"] とするとプレビュー時のcssが変わる
    - C:\Users\<ユーザー名>\.vscode以下に置く必要はないけど、その方がわかりやすいかと

## Markdown PDFのcssも上記に変更

- C:\Users\<ユーザー名>\.vscode\extensions\yzane.markdown-pdf-1.4.1\styles\markdown-pdf.cssを上書きする
    - 念のため、元ファイルはリネームしておいた

## フォントを変更

そのままだと漢字が太かったり、細かったりと読みづらいので以下のようにした

```
body {
font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'ＭＳ　Ｐゴシック', 'MS PGothic', sans-serif;
}
```

## 参考にさせていただいたサイト

- 参考というか、もうそのままですね。ありがとうございました。
- https://qiita.com/08thse/items/205eea7ed85188ae38bf
- https://qiita.com/__mick/items/c80fab6c185a41882880
SuperCollider+CommonLispで曲を作る環境を揃えてみた。

### はじめに

CommonLispで作曲したいのでそれができる環境を揃えた。

SonicPiやTidalCycles等、現状だと選択肢は存在するものの、自分がCommonLisp（Lisp族、Scheme等も含むよ）を推す理由は以下の通り。
（自分がLisp触って1ヶ月程度なので理由についてはあとで整理するかも）

* 関数型言語の参照透過性＋副作用の関係で途中修正がプログラマにとって容易
* リストと譜面の相性はすごくいい（リスト内のデータも場合によっては途中で関数化するのも他と同じルールで書ける）
* 処理の途中で関数の再定義が可能なため、展開を広げやすい

どちらかというとTidalCyclesはHaskellなので似たような性質があると思います。

あとは個人的な理由ですが、プログラミング始めたときからずっと手続き型言語をお腹いっぱい使っていたので、そこから離れたく視点でプログラム書いてみたくなった、というのもあります。

### 環境

Windows10
Roswell経由でSBCL1.4.14をインストール済み
SuperColliderは3.10.3

Roswell
https://github.com/roswell/roswell

### 準備

下記モジュールを使います。
CommonLispによるSuperColliderクライアントだそうです。

https://github.com/byulparan/cl-collider

### 操作

* SuperColliderをインストールする
* Roswellからros installを実行、Lispの実行環境を構築する
* コマンドラインから「ros run」を実行、REPL環境を起動する
* 上記URLの「Usage:」に従い、命令を入力していく
（ちなみに上記のモジュールはquicklispでダウンロードしてくることが可能です）

あとはシンセサイザーの定義と鳴らす命令を書くだけという。

ソフトウェアの準備もそれほどしなくて済むのでありがたい。
GlideApps Listまとめ

# はじめに
この記事はGlideAppsのListについてまとめたものです。
［FEATURES］と［ADD］についてはまとめていません。

![layout-list00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128060/45452e72-c62d-c704-8335-820b278f1f18.png)

今回使用したデータは次の通りです。
![image01.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128060/bd123707-2d73-9aca-43ab-0d205ff42429.png)

他のGlideAppsの記事を見てみると過去と現在とでUIが変わっているので、お手元の環境と異なるようであれば、他の記事を参考にした方が良いかもしれません。

# List
データの一覧をリスト形式で表示するSTYLE。

**データ一覧画面**と、データを選択した時に遷移する**Detail Screen(データ詳細画面)**が存在する。

データ詳細画面に遷移させない事も可能。

## Data
アプリの画面項目に表示させるスプレッドシートのデータの設定。

画面のどこが、どの設定で、どのスプレッドシートのデータと紐づいているのかを下図に示す。

![layout-list01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128060/38db7272-8500-47af-3c7d-bc743c56547f.png)

## OPTIONS

### Show title when image is not available
画像を表示する領域があった場合に、画像が利用可能でない場合に［Data］-［Title］の値を表示させるかどうか。
![layout-list-options01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128060/d7bdb398-2940-9810-526b-d2d5c43ba966.png)

### Action
List内のデータをタップした時の動作の設定。

- Link Detail Screen: List内のデータをタップするとDetail Screenに遷移する
![layout-list-action01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128060/fab5f245-3592-8fc8-4da4-41256be1c9e0.png)
- None: List内のデータをタップしても何もしない

# Detail Screen

Detail Screenは他のStyleでも使用可能なので記事を分けました。
[こちらの記事]()をご覧下さい


# 最後に
2019/01/01時点ではCompact ListとTilesも見た目が異なるだけで、構成は殆ど一緒でした。
おそらく、Listが理解できれば上記の2つも理解は早いと思います。
GlideApps 運用のための動作確認【都度更新】

# はじめに
この記事はGlideを運用するにあたって気になった事を、実際に手元で動かしてみて、結果どうなったかを確認してみた記事になります。

仕様を考えると当たり前の内容もあるかもしれませんが、それでも実際に動作を確認してみるというのは大切な事だと思います。

「多分大丈夫です」ではなく、「大丈夫です。動作確認済みです」と答えたいと思っているので、本記事を作成しました。

# Google スプレッドシート関係

※次の表に記載されている「ファイル」は「スプレッドシートのファイル」です。

|実施内容|結果|詳細|確認日付|
|:------|:--:|:--|:-------|
|ファイルの移動|○|アプリ作成時に保存されていた場所から他の場所への移動は**問題は無い**|2020/01/01|
|ファイルが保存されているフォルダの名称変更|○|アプリ作成時に保存されていたフォルダの名称を変更しても**問題は無い**|2020/01/01|
|ログイン履歴のデータの登録|○|E-Mail認証を使用するとログイン履歴記録用のシートがスプレッドシートに作成され、データが登録されていくが**データ件数制限には影響がない**|2020/01/01|

# STYLE関係

|実施内容|結果|詳細|確認日付|
|:------|:--:|:--|:-------|
|日時情報が存在しないデータにCalendarを適用する|×|適用自体は可能だが**データが画面に表示されない**<br><br>後から日時情報を入力すれば表示される|2020/01/01|

# COMPONENTS関係

|実施内容|結果|詳細|確認日付|
|:------|:--:|:--|:-------|
|Switchの［Column］にチェックボックス以外のデータ形式（テキストなど）のカラムを指定する|×|指定自体は可能だが、Switchを使っての入力は`True`/`False`しかないので**仕様的に問題がある**|2020/01/01|
Ionic4にAdMob Freeを設定する(Android)


(AdMobのアプリIDの発行等は他の記事を参照してください...)
#インストール
1.

```bash
ionic cordova plugin add cordova-plugin-admob-free --variable ADMOB_APP_ID="事前に取得したAdMobAppID"
```
2.

```bash
npm install @ionic-native/admob-free
```
#使う

```typescript:app.module.ts
...
import { AdMobFree } from '@ionic-native/admob-free/ngx'; //追加
...
providers:[
...
AdMobFree, //追加
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }]
...
```

```typescript:使いたい場所（hoge.page.ts)
import { AdMobFree, AdMobFreeBannerConfig } from '@ionic-native/admob-free/ngx';
...
constructor(private admobFree:AdMobFree) {
    this.setads();
   }
...
setads() {
    const bannerConfig: AdMobFreeBannerConfig = {
      // add your config here
      id:'ca-app-pub-1919810/114514', //任意の広告ユニットID
      isTesting: true, //デバッグ時はオンにする
      autoShow: true
     };
     this.admobFree.banner.config(bannerConfig);
     
     this.admobFree.banner.prepare()
       .then(() => {
      
       })
       .catch(e => console.log(e));
  }
...
```
#お疲れ様でした！

#追記
表示されない場合は１週間ぐらい待つと表示されるようになるらしい...?
スタック　ヒープについて学んでみた


※　書き手はC言語のみ勉強している身の為，他言語での仕様は分かりかねます．また，実装時の環境で本記載も変わる為，自環境で一度確認することを推奨します．

# メモリの種類について

| 名前| 配置データ | R/W|容量|
|:-----------|:------------|:------------|:------------|
|プログラムメモリ  | 関数・定数 | R |大サイズ|
| <dt>スタックメモリ</dt> | <dt>ローカル変数</dt>  | <dt>R/W</dt>  |<dt>小サイズ</dt> |
|静的メモリ | 関数外変数 | R/W |中サイズ|
| 動的メモリ（ヒープメモリ） | メモリ確保領域変数 | R/W |大サイズ|


主に4種類のメモリを活用する．
どれも一時的に使用するメモリで，通常RAMのどこかのセクションに一部に属する．

##スタックメモリについて

* スタックメモリが割り当てられる対象
 - プログラムの実行単位毎（タスクやスレッド）
 - タスクや関数内で宣言された変数やアドレス情報

もしタスクが終了されたり，関数から抜けるとこのスタックメモリの内容は破棄される．

下のような関数内の変数"a"はスタックメモリ上に保存されている事となる．

```C:スタックメモリ例
void A(void){
  int a = 0;
}
```

* サイズが決まるタイミング
 - プログラムがコンパイルまたはリンクされる時

* スタックメモリを使うメリット
 - プログラムが組みやすい（メモリ確保領域を指定することなく，自動で確保してもらえるから）

* スタックメモリ使用時に注意する事
 - 使用できるサイズが制限されている為，使い過ぎるとすぐ「スタック・オーバーフロー」となる．
 - 組み込み等，使用できるメモリが制限されている場合，ずっとスタックメモリで確保したものが残ってしまう事があるので，使用時には注意が必要

##ヒープメモリについて
必要な時に動的に確保され，使い終わったら解放されるメモリ．
アプリケーションやOSで動的に確保される．

* ヒープメモリが割り当てられる対象
 - malloc()関数で確保される領域．

* ヒープメモリの解放方法
 - free()関数で解放される

* サイズが決まるタイミング
 - メモリを確保する際に動的に決まる

* ヒープメモリを使うメリット
 - 不必要にメモリを沢山使うことを防げる

* ヒープメモリ使用時に注意する事
 - フラグメンテーション（メモリが虫食い状態で使われてしまう事）が発生しやすい


#参考サイト
https://monozukuri-c.com/langc-stack-memory/
https://it-trend.jp/development_tools/article/32-0041
Excelで「開発」タブを表示する

#はじめに
今回は**Excel 2016**を用いて記事を書いています。
また、新しいExcelデータを開いたという前提で内容を書いております。

#やること
写真の赤の下線部分のように**[開発]タブを表示**していきます。
![開発タブ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563044/635fa318-31c4-ac60-b642-20790ee70ef1.jpeg)

##手順1:空白のブックを開く
まずはExcelを開き**空白のブック**を選択してください。
![空白のブック](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563044/c862fe7d-d9ed-9072-e1d7-bd03999a80ae.png)

##手順2:[ファイル]タブを選択する
写真の赤の下線部分の**ファイル**タブを選択してください。
![ファイルリボン](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563044/b1959a04-5353-c5a0-5f9a-63d33b338a54.jpeg)



##手順3:[オプション]の選択
写真の1番下にある赤の下線部分の**オプション**を選択してください。
![オプション](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563044/42af1aa3-30ce-3b93-b3f0-b3f16d56ad77.jpeg)

##手順4:[リボンのユーザー設定]の選択
出てきた画面の左側に基本設定(写真)の部分があるので、そこから**リボンのユーザー設定**(写真の赤の下線部分)を選択してください。
![リボンの設定](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563044/e8f0a40c-3767-3ead-d0d9-befcc7578fac.jpeg)


##手順5:[開発]のチェックボックスをON
右側にあるメインタブ(写真)の下の**[開発]のチェックボックス**(写真の赤の下線部分)にチェックを入れ、OKを選択します。
![チェックボックス](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563044/919ca723-26bd-540f-8ad1-68ec5704ba96.jpeg)

##手順終了
以上の手順で[開発]タブを表示できると思います。

#[開発]タブから出来ること

* マクロを書く。
* XML コマンドを使用する。
* ActiveX コントロールを使用する。
* Microsoft Excel でフォーム コントロールを使用する。
* Microsoft Visio で新しい図形およびステンシルを作成する。　など


#参考
[[開発] タブを表示する](https://support.office.com/ja-jp/article/-%E9%96%8B%E7%99%BA-%E3%82%BF%E3%83%96%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B-e1192344-5e56-4d45-931b-e5fd9bea2d45)
React NativeのAndroidビルドでapp:mergeReleaseResources FAILED（Error: Duplicate resources）

## 下記の記事の補足
https://qiita.com/sekitaka_1214/items/2c9c3a698727d8bde659

## やること

1. `android/app/src/main/res/drawable-*`のフォルダを削除
2. `raw`フォルダ内のキャッシュみたいなファイルを削除
3. `cd android && ./gradlew assembleRelease`を実行

2に関しては、必要なファイルが含まれている場合もあるので、一旦全部削除して3を行い、not foundになったファイルだけをgitで元に戻す必要があるようです。
JavaScript勉強の記録その21:setIntervalとclerIntervalを使って関数の呼び出し

#setIntervalを使って関数を呼び出す
setInterval(関数名,ミリ秒)とすることで、特定のメソッドを指定したミリ秒間隔で呼び続けることができます。　
以下の例では、showDateTimePerSecondという関数を1秒間隔で呼び、Dateオブジェクトを生成し、コンソールに表示しています。

```index.js
function showDateTimePerSecond() {
  console.log(new Date());
};

setInterval(showDateTimePerSecond,1000)

//=>Sun Jan 19 2020 21:27:11 GMT+0900 (日本標準時)
//=>Sun Jan 19 2020 21:27:12 GMT+0900 (日本標準時)
//=>.....
```

#clearIntervalを使ってsetIntervalを止める
反対にclearIntervalを利用すれば、setIntervalで呼び続ける処理を止めることができます。
以下の例では変数iが３になった時点で、clearIntervalを呼んで、処理を止めています。

```index.js
let i = 0;

function showDateTimePerSecond() {
  console.log(new Date());
  i++
  if (i > 2) {
    clearInterval(intervalId);
  }
};


const intervalId = setInterval(showDateTimePerSecond,1000);
console.log(intervalId);

//=>1
//=>Sun Jan 19 2020 21:36:05 GMT+0900 (日本標準時)
//=>Sun Jan 19 2020 21:36:06 GMT+0900 (日本標準時)
//=>Sun Jan 19 2020 21:36:07 GMT+0900 (日本標準時)
```

clearIntervalは引数にsetIntervalの返り値を渡してあげることによって、どのsetIntervalを止めるか指定することができます。
上記の例ではあえて、console.log(intervalId)として、setInterval（）の返り値を表示させています。
つまり上記の例では返り値が１のsetIntervalを止めているということです。
Rails 5.2 (with --api) + ActiveAdmin + devise

# はじめに
Rails (with --api)でActiveAdminを使う際に必要となる手順についてまとめてあります。
他にも記事がたくさんありますが、deviseを使う使わないなどの選択肢で、記事通りで動かないことがあったので、ここではdeviseを使う前提で書いてあります。

# 環境
- Rails 5.2.4
- ActiveAdmin 2.6.0
- devise 4.7.1
- mini_racer 0.2.9

# 参考
https://blog.heroku.com/a-rock-solid-modern-web-stack
(ほぼリンクの手順ですが、config/application.rbの内容を補足)

# Gem インストール

```ruby:Gemfile
gem 'activeadmin', '2.6.0'
gem 'devise', '4.7.1'
gem 'mini_racer', '0.2.9'
```

```
$ bin/bundle install
```

# ファイルの修正

```ruby:app/controller/application_controller.rb
class ApplicationController < ActionController::Base
    protect_from_forgery with: :exception
end
```

次のファイルを継承してコントローラを実装する。

```ruby:app/controller/api_controller.rb
class ApiController < ActionController::API
end
```

```ruby:config/application.rb

require "sprockets/railtie"   # uncommented
...
  class Application < Rails::Application

  # Middleware for ActiveAdmin
    config.middleware.use Rack::MethodOverride
    config.middleware.use ActionDispatch::Flash
    config.middleware.use ActionDispatch::Cookies
    config.middleware.use ActionDispatch::Session::CookieStore

    config.generators do |g|
        g.scaffold_controller = :scaffold_controller
    end
  end
end
```

```
$ mkdir -p app/assets/config && echo '{}' > app/assets/config/manifest.js
```

# インストール
```
$ bin/rails g active_admin:install
$ bin/rails db:migrate db:seed
```

# 動作確認
```
$ bin/rails s
```

http://localhost:3000/adminにアクセスしてログイン画面が表示されれば完了です。


# モデルの追加方法

```
rails g active_admin:resource some_model
```

```ruby:app/admin/some_model.rb
ActiveAdmin.register User do
  permit_params :xxx, :yyy, :zzz
end
```
Rails+WebpackerにVue.jsとReactの両方を入れる

環境：Rails 6.0、Webpacker 4.2、Vue.js 2.6、React 16.12

Webpackerを使ってVue.jsとReactの両方を動かすことに成功したので、メモしておきます。

### コピー元の作成

まず、設定ファイルのコピー元とするだけのアプリケーションを作成します。すでにVueを入れたアプリケーションがある場合は、Reactで作ります。

```zsh
% rails new reactapp --webpack=react
```

Reactを入れたアプリケーションがある場合は、Vueを指定します。

```zsh
% rails new vueapp --webpack=vue
```

### yarn add

Vueで作ってあるアプリケーションには、Reactのモジュールをインストールします。prop-typesはWebpackerがデフォルトで入れるものですが、必須ではありません。

```zsh
% yarn add @babel/preset-react babel-plugin-transform-react-remove-prop-types prop-types react react-dom
```

Reactで作ってある場合は、Vueのモジュールをインストールします。

```zsh
% yarn add vue vue-loader vue-template-compiler vue-turbolinks
```

### babel.config.js

ルートにあるbabel.config.jsは、Reactで生成したものを使います。つまり、すでにReactならそのままにし、VueならReact用のbabel.config.jsを上書きします。

### config/webpacker.yml

config/webpacker.ymlは、元からあるものを使い、Reactを加える場合は`.jsx`を、Vueを加える場合は`.vue`を追加します。

```config/webpacker.yml
  extensions:
    - .vue
    - .jsx
```

### config/webpacker/

ReactにVueを加える場合は、Vueで生成したものからconfig/webpacker/loaders/vue.jsをコピーします。

また、config/webpacker/environment.jsはVueのもので上書きします。

### 両方動かしてみる

次のような感じで両方を動かすapplication.jsを書いて動けば成功です。

```app/javascript/packs/application.js
require("@rails/ujs").start();
require("turbolinks").start();

import React from 'react';
import ReactDOM from 'react-dom';

import Vue from 'vue';
import TurbolinksAdapter from 'vue-turbolinks';

import VueApp from '../vueapp';
import ReactApp from '../reactapp';

Vue.use(TurbolinksAdapter);

document.addEventListener('turbolinks:load', () => {
  if($('#vue-app').length) {
    new Vue(VueApp).$mount('#vue-app');
  }

  if($('#react-app').length) {
    ReactDOM.render(React.createElement(ReactApp), $('#react-app')[0]);
  }
});
```

実際にこんなアプリケーションを作ることはないと思いますが、現実的な使い方として考えられるのは、Railsアプリケーションの中でVueを使う部分とReactを使う部分を分けるケースです。その場合は、app/javascript/packsの下にVue用とReact用のxxx.jsを作り、レイアウトテンプレートを複数作ってjavascript_pack_tagを切り替える、ということになるでしょう。
内包表記でのif...else

リストの[内包表記](https://docs.python.org/ja/3.7/tutorial/datastructures.html#list-comprehensions)にif...else文がある場合、初心者はコードの読む順番に戸惑うことがあると思います。

```python
>>> x = [8,1,7,2,6,3,5,4]
```

#内包表記のif

```python
>>> l1 = [i for i in x if i > 5]
>>> l1
[8, 7, 6]
```
ここでの`if i > 5`は内包表記の一部となります。
次のコードと等価です:

```python
>>> l1 = []
>>> for i in x:
...     if i > 5:
...             l1.append(i)
...
>>> l1
[8, 7, 6]
```

#内包表記でのif...else

```python
>>> l2 = [i if i > 5 else 0 for i in x]
>>> l2
[8, 0, 7, 0, 6, 0, 0, 0]
```
ここでの`i if i > 5 else 0`は内包表記のシンタックスではありません。
次のコードと等価です:

```python
>>> l2 = []
>>> for i in x:
...     l2.append(i if i > 5 else 0)
...
>>> l2
[8, 0, 7, 0, 6, 0, 0, 0]
```
#条件式
上記の`i if i > 5 else 0`は[条件式](https://docs.python.org/ja/3/reference/expressions.html#conditional-expressions)という演算です。

```python
>>> i = 6
>>> i if i > 5 else 0
6
>>> i = 4
>>> i if i > 5 else 0
0
```
#ちなみに
条件式ではelseがないと怒られます。

```python
>>> i = 6
>>> i if i > 5
  File "<stdin>", line 1
    i if i > 5
             ^
SyntaxError: invalid syntax
```
なので
下記のように書いても同じく怒られます。

```python
>>> l3 = [i if i > 5 for i in x]
  File "<stdin>", line 1
    l3 = [i if i > 5 for i in x]
                       ^
SyntaxError: invalid syntax
```
#参考
[if/else in a list comprehension?](https://stackoverflow.com/questions/4260280/if-else-in-a-list-comprehension)
技術系ドキュメントの書き方の基本

# ドキュメントを書く段取り
技術系のドキュメントを書きたいと思ったときにまずやること。それはネタ集めです。ドキュメントを書く時の段取りは以下の段階を踏みましょう。

1. ネタ集め
2. 構成
3. 下書き
4. 清書

## ネタ集め
ドキュメントに書くネタを集めます。ネタ集めでは以下のことをやります。

* 書きたいことを決める
* 書きたいことの情報を集める
* 情報の裏付けをとる

技術系のドキュメントに限らず、文章を書くときの一番の基本です。注意すべき点は、まず書きたいことを決めたとして、それを言葉で説明できることです。書きたいことを言葉で説明できないのに、ドキュメントが書ける道理がありません。

次に、書きたい事の情報を集めましょう。例えば、Linxuのコマンド操作についてドキュメントを書くとして、Linuxのコマンドと操作方法を知らなければドキュメントは書けません。ここで大事なのは、ただ知っているだけではなく、説明できる理解度が必要だということです。

最後に、集めた情報の裏付けを取ります。集めた情報に間違いがあっては元も子もありません。先ほどのLinuxのコマンド操作であれば、実際に動かしてみて、意図したとおりに動くことを確認することです。裏付けの確認をするには、どういう前提や条件が説明できるかどうかで判断できます。

## 構成
集めたネタを組み合わせる作業です。書きたいことに基づいて集めネタを検討していきます。この段階で、集めたネタが足りなければネタ集めのフェーズに戻ります。集めたネタが多い場合は、どのネタを使うかを選択します。

内容の充実したドキュメントを書こうと思えば、多くのネタから書く内容を選んで組み合わせていくことになります。集めたネタは、全てドキュメントに盛り込めるとは限りません。ドキュメントに記載できなかったネタは、別のドキュメントに活用しましょう。もしくは、単体のメモ書きとしても活用できます。

構成が固まると、ドキュメント全体のボリュームが見えてきます。もし、ドキュメントのボリュームに対して要件が出ている場合は、この段階で過不足が分かります。要件を満たしていないのであれば、ネタ集めのフェーズに戻ります。多すぎる場合は、使うネタを絞り込んでいきます。

## 下書き
ドキュメントには以下の三つの要素があります。

* ドキュメントの内容
* 校正
* レイアウト

これらの質を高めることで、読みやすいドキュメントが書けます。下書きでは、この三つの要素の内のドキュメントの内容を作っていきます。

まず、ドキュメントの内容は、構成のフェーズまでにまとめた情報です。技術系のドキュメントであれば、文章だけでなく図や表が必要になることもあります。構成を元に実際のドキュメントを借り組みしていくことで、内容が固まってきます。

下書きのフェーズで注意すべきは、ドキュメントの内容に集中することです。この段階ではまだまだ内容が変わることがあります。細かい言葉遣いや書面のレイアウトのミスを潰していくと、内容の変更の際の手戻りが大きくなります。また、内容と校正とレイアウトを同時にやると書く人の負担が大きくなります。

校正に関しては、知識さえあれば第三者でも対応できます。レイアウトに関しては、ドキュメントの内容よりも、ドキュメントを作成するソフトのスキルが問われます。無理にドキュメントの内容をまとめた人がやる必要はありません。

## 清書
下書きのレイアウトと校正を行います。下書きでもおおまかなレイアウトや校正は行いますが、厳密におこなうのは、内容が固まった後です。ネタ集め、校正、下書きが適切にできていれば、清書のフェーズは機械的な作業になります。

下書きまでのフェーズであれば、清書で使用するフォーマットを使用する必要はありません。よく、清書のフォーマットに下書きをすれば効率が良いと誤解されます。清書のフォーマットで下書きすると、フォーマットのデータが壊れたり、改ページなどの設定のやり直しが多発して、かえって効率が落ちます。

清書したドキュメントは、基本的にあまり更新しないことをお勧めします。長編のドキュメントの場合、修正箇所が不明確になったり、内容に矛盾が発生する原因になります。誤字脱字や多少の追記であれば問題はありませんが、内容の変更が伴う場合は、変更の内容に伴いフェーズを戻して作業することをお勧めします。
[R] gdb に格納されたGISデータをsfクラスとして読み込む

GISデータをgdbフォルダで渡されることが増えてきたので、Rで読み込む方法をメモ。

gdb は

- ファイルサイズの大きいベクターデータを保存できる。ファイルサイズが大きく .shp で書き出せないときなどに役立つ（.shpに書かなけきゃいいんですがそうもいかない場合が...）。
- multiple feature class を扱うことができる。たとえば、屋根形状を含めた建物ポリゴンデータの保存に役立つ。



```r
### 0. 準備
library(mapview)
library(sf)
setwd("C:/hoge/piyo")

### 1. 読み込み
TokyoMP <- sf::st_read(dsn="GISdata.gdb", layerName="Boundary_Tokyo")

### 2. マッピング
mapview(TokyoMP)
```

ちょっと前に {arcgisbinding} というArcGISとRをつなげるパッケージが現れたので、これを使った方法は下記のとおりである。こちらの方法のメリットはまだよくわかっていない（思いつくところでは、このパッケージはラスターをgdbに書き込むことができる。筆者はラスターをgdbに書き込みたくなり、他パッケージだとできなそうだったところ、このパッケージをみつけた。）。パッケージの詳細は https://r-arcgis.github.io/ にある。

```r
### 0. 準備
library(arcgisbinding)
library(data.table)
library(dplyr)
library(mapview)
library(sf)

### 1. ArcGIS pro のライセンスを確認
# 事前に ArcGIS pro を起動してログインしておく
arcgisbinding::arc.check_product() 

### 2. gdbフォルダの中身を確認
path1 <- "C:/hoge/piyo/GISdata.gdb"
(DataList <- arcgisbinding::arc.open(path1)@children$FeatureClass)
# [1] Boundary_Tokyo

### 3. sf 形式として読み込み
TokyoMP <- arcgisbinding::arc.open(paste(path1,"/Boundary_Tokyo",sep="")) %>%
           arcgisbinding::arc.select() %>% 
           arcgisbinding::arc.data2sf()
## 4. マッピング
mapview(TokyoMP)

## 5. gdb に書き込み
arc.write("C:/hoge/piyo/GISdata_new.gdb/TokyoMP2",TokyoMP)
# 新しいgdbフォルダ（GISdata_new.gdb）にオブジェクト TokyoMP を
# ファイル名（フィーチャークラス名）TokyoMP2 として保存。
# 新しい gdb は事前に作っておかなくても大丈夫。
```

※追記 2020-04-08
思いつくメリットと、書き込みを追記しました。
グローバル変数とローカル変数2

```py:1
player = '太郎'

def f():
    player = '次郎'
    print('local:', locals())

f()
print(player)
```

```:1の実行結果
local: {'player': '次郎'}
太郎
```

ローカル変数を宣言しないで、
locals()を実行すると、

```py:2
player = '太郎'

def f():
    print('local:', locals())

f()
print(player)
```

```:2の実行結果
local: {}
太郎
```
空の辞書がかえってくる。


globals()も実行してみると、

```py:3
player = '太郎'

def f():
    print('local:', locals())

f()
print('global:', globals())
```

```:3の実行結果
local: {}
global: {'__name__': '__main__', '__doc__': None, '__package__': None, '__loader__': <_frozen_importlib_external.SourceFileLoader object at 0x7efff584a2b0>, '__spec__': None, '__annotations__': {}, '__builtins__': <module 'builtins' (built-in)>, '__file__': 'Main.py', '__cached__': None, 'player': '太郎', 'f': <function f at 0xxxxxxxxxxxxx>}
```

たくさん出てくるが、
'player': '太郎'と出ている。

他に`__name__`は`__main__`であるとか、
`__doc__`は何も入っていなくてNoneであるとか
事前に宣言されているものがでてくる。

ここでこのファンクションにドキュメントを書いてみると、

```py:4
"""
test ##################
"""

player = '太郎'

def f():
    print('local:', locals())

f()
print('global:', globals())
```

```:4の実行結果
local: {}
global: {'__name__': '__main__', '__doc__': '\ntest ##################\n', '__package__': None, '__loader__': <_frozen_importlib_external.SourceFileLoader object at 0x7f73121652b0>, '__spec__': None, '__annotations__': {}, '__builtins__': <module 'builtins' (built-in)>, '__file__': 'Main.py', '__cached__': None, 'player': '太郎', 'f': <function f at 0x7f7312236e18>}
```

`__doc__`が'\ntest ##################\nとなった。

関数内の`__name__`や`__doc__`も見てみると、

```py:5
player = '太郎'

def f():
    """Test func doc"""
    print(f.__name__)
    print(f.__doc__)

f()
print('global:', __name__)
```

```:5の実行結果
f
Test func doc
global: __main__
```
まず、
`print(f.__name__)`
で関数fの名前が出力され、
次に、
`print(f.__doc__)`で関数fのドキュメントが出力される。
最後に、
`print('global:', __name__)`で
文字列'global:'に続いて全体ファンクションの名前が出力される。
同人ゲーム/音楽の頒布形態について網羅したい

> ※書き途中
> 最終更新日: 2020.01.19

# 2020年、頒布メディアの形態の実態とは？

同人誌即売における電子メディアの形態が、2016年あたりから急激に変化しつつある。

所謂「Downloadカード」の普及がよく叫ばれるが、その実の中身は多様で、整理しておいた方がよい、というか、そんな需要が身近で生まれたので、CD/DVDといった古典的なメディア以外のものについて整理すると共に、それらについては、さらに掘り下げをしておきたいと思う。

## 頒布メディアの種類

長らく「電子メディア = CD/DVD」という時代があった気もするが、そうでない形が非常に増えている。ということで、まずは実際に即売会で扱われる「物理的な頒布物」という視点から列挙してみたいと思う。

- 円盤形（CD/DVD/Blu-ray）
- カードリッジ系（MO/フロッピーディスク）
- USBメモリ系
    - キャラクターや鍵をあしらったグッズ的側面も合わせもつ筐体もある
- メモリカード系(SDカード/メモリスティック）
- 独自基盤/筐体
    - 独自ハード物や安価なVRデバイスにプリインストールした状態のもの
- ダウンロード系（カード型/ペーパー型/本型/グッズ刻印型...etc）
    - 詳細は後述

## 見本誌提出のメディアの種類

頒布に直接関わるわけではないが、即売会のレギュレーションによっては「オフラインでの確認/保管ができる媒体」での見本誌提出を要求されることがある。

その場合によくとられる対応について、補足として纏める。

### 円盤系/カードリッジ系/USBメモリ系/メモリカード系

原則そのままOK。ただし、ダウンロード先URLを収録する、実態はWebから取ってくるインストーラーを収録する、、みたいな場合、それを焼いたメディアを提出してね、ということがあるので、心に余裕があったら、そういう形式の時は気をつけよう。

頒布時にCDケースのような一定のサイズの外装を持たない場合、見本誌用には別途その手のケースを用意するか、ジップロックのようなものに入れて提出するのが定石。

### 独自基盤/筐体

そもそも「でかい」「数が少ない」「高価」というケースが多い性質上、ロットが3桁とかいってない限りは、提出を要求されることはないと考えて良いだろう（イベント主催の判断によるが）。

とはいえ、中身のプログラム/映像/音楽...etc だけ抽出した物理媒体を提出できるようにしておくと、余計な説明がいらなくなるので、出来たら用意しておくと良さげ。

## ダウンロード形態の関する掘り下げ

所謂「Downloadカード」は標準化された形式ではない。すなわち、作り手の数だけ、その実態が異なる可能性を秘めている媒体である。

そう、その昔「ダウンロード」といえば「サークルの運用するサーバから、プログラム/CG/音楽...etc をダウンロードをすること」と同義であったが、今の時代の「Downloadカード」はそうでないことの方が多いのだ。

ここでは、ダウンロードカードに記載されることのある内容と対比する形で、ダウンロード形態について、よくあるものを列挙する。

## 広告 vs 頒布物論

LineスタンプやiTunes Storeへのリンク/QRコードを記載した、ペーパー/ポストカード、なんならイラスト集の奥付けに添えて書いてあるようなもの、これらはどうなるのだろうか？

ぶっちゃけ、イベント主催側の判断による、、としか言えない。

ただ、サークル側の主張を尊重し、かつ、電子メディアに理解のある人間と話をしているのであれば、伝え方によって、どっちとも取ってもらえるケースが多いだろう。

ただの宣伝として書いてあるだけなら、そう伝えれば良いし、それがこのイベントでの頒布物なんだ！という主張ならば、そう伝えれば良い。

## 同人向け印刷/製造会社

事業者に関する知識は、独特のメディアやダウンロードカードを見た場合に混乱を避けるのに役立つ。
Androidアプリにプライバシーポリシーを置くときの構成


ここ最近は、Androidアプリにプライバシーポリシーを盛り込むことが当たり前になってきています。
以前にも、Googleのポリシー違反の取り締まりが厳しくなり、GooglePlayから大量のAndroidアプリがリジェクトされる事態もありました。

その時は、ブログに適当にプライバシーポリシーのページを作って、リンクを貼ることで難を逃れました。（いいのか、それで・・・）

しばらく放置していましたが、そろそろ改善しようといろいろ考えて、自分なりに考えてみましたので、まとめます。

### これまでの構成

![old.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113289/8d945487-e2fd-e184-0a16-3f3418577957.png)

- ブラウザを起動して、プライバシーポリシーのページを表示

> **改善したいこと**
> 
> - 通信が出来ない時は表示できない
> - ブログにページを作ったのでイケてない

### 改善した構成

![new.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113289/7d04fc00-4625-77a6-6a35-5cda94ec9a74.png)

- FirebaseStorageにあるファイルの更新日時を確認
- ローカルの方が古ければ、FirebaseStorageからダウンロードして最新化
- 表示は、アプリ内のWebViewで行う
- 初回起動時にネットに繋げなくても、アプリ内のAssertsに置いてあるページを表示

### なぜHostingじゃなくてStorageか

- Storageのほうが安い
- ネットが繋がってなくても表示したい

まず、価格はStorageの方が安いです。
HostingとStorageの価格は以下の通りです。

**無料の使用量**

| |Hosting|Storage|
|:--|:--|:--|
|容量|1GB|5GB|
|転送|10GB/月|1GB/日|

あとは**Hosting**にすると、結局これまでの構成と何ら変わりがないですね。

### プライバシーポリシーの更新について

- **Storage**に置いてあるファイルを最新にする
- アプリ内のAssetsに置いてあるファイルを最新にして、新しいアプリをアップロードする

プライバシーポリシーの更新に関しては、**Hosting**の方が便利です。
しかし、ネットがない状態で確認できないのは少しネックですし、これが良いとは思いません。やはり、内蔵するのが一番良いです。
とはいえ、アプリ自体を更新しないと最新化されないのもネックです。
そこで、最新のプライバシーポリシーを**Storage**から取得し、なければローカルで表示という方法を取りました。

### プライバシーポリシーを作る

これに関してはあまりノウハウはないのですが、次の本の雛形を参考に作りました。サービスの拡大をしながら、充実していければ良いかなと思います。

良いウェブサービスを支える「利用規約」の作り方
https://www.amazon.co.jp/dp/B07Q721691/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1

### まとめ

いろんなアプリを見てますが、プライバシーポリシーの表示は、通信してるのが多いですね。今回**Firebase**を使いましたが、とっても便利で簡単です。どんどんアプリ開発に活用していきたいですね。
Vue DevtoolsがVue.js not detectedと表示される際の対処法

#localhost作業時にて、Vue.js not detectedと表示されたとき

![vu.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533444/6029672c-c657-cdad-6d51-80ad5d472267.png)


を許可する。
[Android] Install Referrer API の使用方法について

## 前書き
[公式](https://android-developers.googleblog.com/2019/11/still-using-installbroadcast-switch-to.html)から案内がありましたが、2020年3月1日を持って、アプリインストール時に、Google Play Store が INSTALL_REFERRER の BroadCast Intent を送信しなくなります。

それ（BroadCast Intentの廃止）を契機に、Install Referrer の情報を取得していた場合は、取得方法を見直す必要があります。

## 対応方法
[Install Referrer API](https://developer.android.com/google/play/installreferrer?hl=ja) を使用して、referrer を取得します。
Install Referrer API は、Google Play アプリのバージョン 8.3.73 以降がインストールされているデバイスで使用可能となります。

以下のような情報が取得できます。
・インストール済みパッケージのリファラー URL。
・リファラー クリックが行われたときのタイムスタンプ（秒単位）。
・インストールが開始されたときのタイムスタンプ（秒単位）。

なお、この方法はあくまでリファラーを取得するもので、従来の Install Receiver の完全なる代替となるわけではありません。
「Installの瞬間」に実行したい処理があってもその契機がなくなることになります（認識違いあれば指摘をいただけますと。。。）
ただし、冷静に設計その他を考え直せば「本当にInstallの瞬間に行わなければいけない処理」というのはあまり無いはず。。

## 実装例
```groovy:bulid.gradle
dependencies {
    ...
    implementation 'com.android.installreferrer:installreferrer:1.1'
    ...
}
```

```kotlin:sample
private lateinit var referrerClient: InstallReferrerClient

referrerClient = InstallReferrerClient.newBuilder(this).build()
referrerClient.startConnection(object: InstallReferrerStateListener {

    override fun onInstallReferrerSetupFinished(responseCode: Int) {
        when (responseCode) {
            InstallReferrerResponse.OK -> {
                val response: ReferrerDetails = referrerClient.installReferrer
                Log.d(TAG, response.installReferrer)
                Log.d(TAG, response.referrerClickTimestampSeconds.toString())
                Log.d(TAG, response.installBeginTimestampSeconds.toString())
            }
            InstallReferrerResponse.FEATURE_NOT_SUPPORTED -> {
                // Install Referrer API に対応していない Play Store アプリの場合
            }
            InstallReferrerResponse.SERVICE_UNAVAILABLE -> {
               // 接続できない場合
            }
        }
        referrerClient.endConnection()
    }

    override fun onInstallReferrerServiceDisconnected() {
        // 次回、startConnection() を呼び出すことで再接続を試みる
    }
}
```

## 注意点
>注意: インストール リファラー情報の使用可能期間は 90 日です。この情報は、アプリが再インストールされない限り変更されません。アプリで不要な API 呼び出しが行われないようにするには、インストール後の最初の実行時に API を 1 回だけ呼び出します。

との事なので、実際には（基本的には）複数回呼び出さないための制御を入れてあげる必要がありそうです。

## 参考
[Google Play のインストール リファラー](https://developer.android.com/google/play/installreferrer?hl=ja)