OmniAICreator/Qiita-1.07M huggingface dataset:
Golang入門.3 -html/templateを使う-

## はじめに
[Golang入門.2 -http.Handleの実装を見る-](https://qiita.com/ryuji0123/items/9d95c4db88a6b2e3e59f)の続きです。また今回から実際のアプリを作っていきます。詳細は決めていませんが、[Grammarly](https://app.grammarly.com/)と併用して英語の文章を快適に書くためのエディタを作ろうと思っています。

## 今回のテーマ
　`html/template`を使ってhtmlファイルを返せるようにします。なお、内容は[Writing Web Applications](https://golang.org/doc/articles/wiki/)に準拠します。

## 概念
　今回はエディタとして必要な入力画面を出せるようにします。基本的には`IndexHandler`(前回までの`HelloHandler`)内でhtmlファイルを読み込み、必要な変数を`Page struct`を通して渡しています。

## コード
[commit](https://github.com/ryuji0123/blog-editor/commit/b0267c8830232974c4fd9ae4b811ab3b7ab09f62)

```main.go
package main

import (
	"html/template"
	"log"
	"net/http"
)

type IndexHandler struct {}

type Page struct {
	Title string
	Body []byte
}

func loadPage() (*Page, error) {
	return &Page{
		Title: "Blog Editor",
		Body:  []byte(""),
	}, nil
}

func(h *IndexHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
	p, _ := loadPage()
	t, _ := template.ParseFiles("template/index.html")
	t.Execute(w, p)
}

func main() {
	index := IndexHandler{}
	server := http.Server{
		Addr: "127.0.0.1:8080",
	}
	http.Handle("/", &index)
	log.Fatal(server.ListenAndServe())
}
```

```template/index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{printf "%s" .Title}}</title>
</head>
<body>
    <form>
        <div>
            <textarea rows="20" cols="80">
            </textarea>
        </div>
    </form>
</body>
</html>
```

## 実行・確認

```sh
go run main.go
```

の後にブラウザ上で`localhost:8080`を確認すると入力画面が出力されています。なお、以降はブラウザ上でGrammarlyが自動で作動することを想定します。例えばChromeの場合は拡張機能としてインストールして設定することができます。
electron-builderでerror: Unable to commit changesが出る場合

日本語の記事がなかったためメモ。
エラーログなどとっていなかったので情報が少ないですが・・・。

# 問題
electron-builderを使ったnpmプロジェクトでelectron-builderを実行するとerror: Unable to commit changesが出る。

# 原因、解決方法
マカフィーのリアルタイムスキャンが原因だったようです。リアルタイムスキャンをオフにしたらエラーが出なくなりました。

# 参考
https://github.com/electron/electron-packager/issues/590#issuecomment-431991782
" a server is already running" エラー対応の自動化(シェルスクリプト使用)

# エラーの原因

Dockerを使用して立ち上げたRailsコンテナのプロセスを「Ctrl + c」で強制終了し、「rails s」で再びサーバーを立ち上げようとすると" a server is already running" というエラーが発生することがあります。

原因は、pids/server.pid というファイルが残っていることです。手動ではありますが、コマンドラインで以下を実行すれば解決します。

```
rm tmp/pids/server.pid
```

毎回のように丁寧にDockerコマンドを入力すれば問題は発生しませんが、「Ctrl + c」で楽にサーバーを終了させたいというのが人間だと思います。しかし、エラーに怯え、エラーが発生した際に毎回手動対応することは大変に面倒なので、削除を自動化するシェルスクリプトを書きます。

まずは、Railsアプリのあるディレクトリに「delete-server-pid.sh 」というファイルを作成します。以下のコマンドを実行しても良いです。

```
touch delete-server-pid.sh 
```

作成したファイルにシェルスクリプトを書きます。

```
#!/bin/sh
set -e

if [ -f tmp/pids/server.pid ]; then
 rm tmp/pids/server.pid
fi

exec "$@"
```

次にコマンドラインで以下を実行し、パーミッションを設定します。

```
chmod +x delete-server-pid.sh
```

あとは、Railsのために用意されたDockerfileに作成したシェルスクリプトを実行するように設定します。

```
# Start the main process.
CMD ["rails", "server", "-b", "0.0.0.0"]
```


```
ENTRYPOINT [​ "./delete-server-pid.sh " ​] 
CMD ​​ ["bin/rails", "s", "-b", "0.0.0.0"] ​ 
```

これで、server.pidがあれば削除されるように自動化されました。


# 参考書籍/参考資料

コード自体はこちらに書かれています。
https://stackoverflow.com/questions/35022428/rails-server-is-still-running-in-a-new-opened-docker-container

書籍ですが、シェルスクリプトの詳しい解説はこちらにあります。
https://www.amazon.co.jp/Docker-Rails-Developers-Applications-Everywhere/dp/1680502735
とある学生がゲーム開発してみた#5(blenderデビューの話)

#blenderから逃げてきた私、とうとうやります。
###逃げてきた理由
1.分かりにくい！
どうも感覚的に操りにくくて···
2.ThinkerCADがあった。
モデリングをThinkerCADでやると簡単なんですよ。ホント。
#とうとう始めるっぽいよ。
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614245/1d414450-c53b-f7fc-3b88-a43f4e2f4aa9.png)
さぁblenderのデフォルトからキューブを取り除き、いよいよスタートします！
まずはプレーンを出して、細分化して、って···細分化でつまずきました。私の参考にしたサイトはWキーで細分化···的なことが書いてあったのですができなかったので(おそらく私のblenderのバージョンが古いからです。)右クリックして直接細分化しました。で、頂点選択···でもつまずきました。どのボタンか分かりませんでした。(こっちは後でちゃんと出来ました。)
#仕事内容
1.プレーンを細分化する。
2.頂点選択で複数頂点(下の画像にあるオレンジ色のてんてんのことです。)
3.青矢印でぐいーっと引っ張る！
この3ステップでできちゃいました。(実際は1ステップ目にたどり着くまでかなり時間がかかったけどね。)
#ついに完成！
![キャプチャ2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614245/c0211f7a-b222-d7f4-2678-6fed2e2cb369.png)
で、いろいろ頑張った結果が上の画像です。結構いいでしょ？でしょ？
#なぬっ
で、この記事を描き終わった後、作った地形をUnityにインポートして使おうとしたのですが…メッシュが入ってない…メッシュは入れれば良いのですが…なぬっ？メッシュの向きが90度違う上にちっこい…どうやらメッシュはインポートした時に一緒に入ったようで、メッシュコライダー？を入れる前に大きさとか向きとか変えたのが原因っぽいです。
【rails】データをグラフで表示する

### 前提
Rails 5.2.4.2

#### gem追加
```ruby:Gemfile
gem'lazy_high_charts'
```
```termina:terminal
bundle install
```

####javascriptライブラリの読み込み

```ruby:app/assets/javascripts/application.js
//= require highcharts/highcharts
```

#### コントローラにグラフを描画するアクションを記載
```ruby:app/controllers/application_controller.rb
  def index
    ...
    cities = House.pluck(:city).uniq.sort
    people = House.pluck(:num_of_people).uniq.sort
    max_people = people.max
    min_people = people.min

    @chart2 = LazyHighCharts::HighChart.new("graph") do |c|
      c.title(text: "地域毎の世帯あたりの人数(子供なし世帯)")
      #x軸
      c.xAxis(categories: people, title: {text: 'Number of households' } )
      #y軸
      c.yAxis(title: {text: 'count' } )

      cities.each do |city|
        family_has_nochild = []
        for num in min_people..max_people do
          #グラフ化したいデータを条件指定して抽出し、配列に入れる
          family_has_nochild << House.where(city: city).where(num_of_people: num).where(has_child: "No").count
        end
        #グラフ表示したいデータを配列で渡す
        c.series(name: city, data: family_has_nochild )
      end
      #凡例
      c.legend(align: 'right', verticalAlign: 'top', x: -100, y: 180, layout: 'vertical' )
      #グラフ種別を指定（棒グラフ）
      c.chart(type: "column" )
    end
   ...
```
#### ビューで表示したいグラフを読み込む
```ruby:app/views/houses/index.html.haml
.wrapper
  %h1
    = "Houseデータのグラフ"
  .wrapper__guide
    = "インポートしたHouseデータ（csv）のグラフを表示します"

  .wrapper__chart
    .wrapper__chart__first
      # グラフの読み込み
      = high_chart("my_chart2", @chart2)
    .wrapper__chart__second
      # グラフの読み込み
      = high_chart("my_chart3", @chart3)
```

#### 結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/564329/a146e949-91bb-6969-c1cc-3a7416bbb592.png)

#### 参考
https://qiita.com/kazumons/items/c435b14fb637dfeeb4e6
https://www.school.ctc-g.co.jp/columns/masuidrive/masuidrive20.html

#### 補足
グラフの色などの表示についての細かい設定はどうやるねん？
【アーチャー伝説】ゲーム募集掲示板作成

#はじめに
スマホゲームのマルチプレイ募集掲示板を作ってみました．是非使ってみてください！
[ヒーローデュオ募集掲示板](https://archer-duo.herokuapp.com/)

#技術
Express+React+Typescriptで書きました．Webpackでビルドしたりウォッチしたりって感じで．あと今回Herokuでホスティングしましたが，MySQL無料で使えることにびっくりでした．

#画面構成
![スクリーンショット 2020-04-16 15.38.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458915/5396abb1-21e6-4c42-0f91-c3abe4aa52d2.png)
![スクリーンショット 2020-04-16 15.38.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458915/25ac6068-c5e4-1a77-d50c-c0750abfd3ef.png)
![スクリーンショット 2020-04-16 15.38.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458915/b65baf2f-d752-52aa-1624-e81cad85d480.png)

#工夫ポイント
今回募集掲示板ってことで，やっぱりページ更新なしで募集欄が自動更新されることが重要だと思ったのでコンポーネント再描画にもってこいのReactで．
あとは他の掲示板とさほど変わらないかな？使いやすいとは思うんで，是非ー！
[ヒーローデュオ募集掲示板](https://archer-duo.herokuapp.com/)
猫ブログ作ってみた

###就職してから久しぶりの開発。
SEになって3年。プログラミング案件はたった5件程度。
ホワイトというばホワイトなんでしょうが・・・

そんな私ですが、飼い始めた猫（るーちゃん）のブログを開設したく
その開設までの流れを備忘録として書いてみました。

## 1. WordPress導入の流れ
そもそもWordPressの入れ方さえ忘れてしまったので、とりあえず検索の最上部にヒットしたサイトを参考に導入してみます。
https://webst8.com/blog/wordpress-basic-howto/
>  1. サーバーレンタル
>  2. ドメイン取得
>  3. WordPressインストール

とりあえずこんな感じで作業すれば導入ができそうです。

## 2. サーバーレンタル
上記のURLでは[エックスサーバー](https://www.xserver.ne.jp)、[ロリポップ](https://lolipop.jp/)を挙げていますね。
私は以前に[XFREE](https://www.xfree.ne.jp/)を使用していたので、そのまま流用します。
XFREEはWordPressの導入記事も多く、無料で使用できるのが嬉しいですね。
会員登録すればすぐに使えたような気がします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107995/085ffc94-a760-61ec-45fe-463260fcac1b.png)
久しぶりにログインしたらすべて凍結されてました（笑）
WordPressサーバーは凍結解除申請をしておきます。

## 3. ドメイン取得
以前、ここで詰まって中断してしまったんですよね。
無料でやりたくて海外のドメイン取得サイトを見ていたんですが、結局よくわからず断念。
今回もとりあえず飛ばします。
できたら次回以降の記事で書けたらと！

## 4. WordPressインストール
FTPを用いてそれっぽくしたかったのだけれど、
参考にしていたサイトだとやりたいことにそぐわないことに今更気が付きました・・・

それなりの量になってしまったので、FTP版は次回の記事で書かせていただきます。:hand_splayed_tone2:
猫ブログ作ってみた。といいつつまだ作れてませんね（笑）
Sidekiq周り

Sidekiqのジョブには以下のステータスがある

- 処理待ち
- 実行中
- リトライ待ち
- 実行予約(その時間まで実行されない)
※一度失敗すると「リトライ待ち」になり、処理待ちには出てこない

「実行中」のジョブは削除できないという縛りあり。

それぞれの数、一覧、削除をするサンプル(rails consoleで実行)

**処理待ち**


やりたいこと|コード
---|---
数表示|Sidekiq::Queue.new.size
一覧表示|Sidekiq::Queue.new.each {&#124;job&#124;puts "#{job.jid} #{job.klass} #{job.args}"}
削除|Sidekiq::Queue.new.clear ※全削除

**実行中**

やりたいこと|コード
---|---
数表示|Sidekiq::Workers.new.size
一覧表示|Sidekiq::Workers.new.each {&#124;process_id, thread_id, job&#124; puts "process_id:#{process_id}, thread_id:#{thread_id}, job:#{job}"}
削除|※実行中は削除不可 もしsidekiq停止させていい＆全redisのデータ飛ばしていいなら以下の方法<br>1. sidekiqプロセスキル<br>2. redis-cliを起動(redis-cliコマンド)して以下を順に実行<br>3. KEYS *<br>4. flushall<br>5. KEYS *<br>6. sidekiqプロセス復活

**リトライ待ち**

やりたいこと|コード
---|---
数表示|Sidekiq::RetrySet.new.size
一覧表示|Sidekiq::RetrySet.new.each {&#124;job&#124;puts "#{job.jid} #{job.klass} #{job.args}"}
削除|Sidekiq::RetrySet.new.clear

**実行予約**

やりたいこと|コード
---|---
数表示|Sidekiq::ScheduledSet.new.size
一覧表示|Sidekiq::ScheduledSet.new.each {&#124;job&#124;puts "#{job.jid} #{job.klass} #{job.args} #{job.created_at} #{job.at}"}
削除|**全削除**<br>Sidekiq::ScheduledSet.new.clear<br>**特定のジョブを削除**<br>**1. 一覧表示して削除したいジョブのJID(=先頭の文字列)を確認する**<br>Sidekiq::ScheduledSet.new.each {&#124;job&#124;puts "#{job.jid} #{job.klass} #{job.args} #{job.created_at} #{job.at}"}<br>**2. <JID>に上記で特定したJIDをセットして実行**<br>``Sidekiq::ScheduledSet.new.find_job('<JID>').try(:delete)``<br>=>-1


https://www.rubydoc.info/github/mperham/sidekiq/Sidekiq/SortedEntry#at-instance_method

に書いてあることを利用すればもっと柔軟なことができそうなのだが・・・・
Ajaxとは。。



簡潔にざっくりいうと、
《Asynchronous JavaScript ＋ XML》の略で【Ajax】

・Asynchronous　＝　「非同期」
　　　+
・JavaScript
　　　+
・ 　XML（形式のデータ）

みたいな感じで各言語や単語、データを組み合わせたIT用語とでも受け取っておいて今のレベルでは差し支えないのではないかと。

参考記事にも記載されているとおり、※「Ajax」自体が何かの技術や言語を指すわけではありません。※

あくまで実装方式の呼び名です。

雰囲気としては下記の感じ。

↓↓↓↓↓↓↓↓↓↓↓↓

JavaScriptで非同期通信できたよね？それを使って、XML形式のデータをサーバとやり取りしたら、
なんかいろいろできるんじゃね？良いね！でも「JavaScriptで非同期通信してXMLデータを～」って、
なんか長ったらしくて呼びにくいな。よし！「JavaScriptで非同期通信してXMLデータを～」のことを
「Ajax」って呼ぶことにしよう！

完全にノリを表している造語みたい...。


もっと簡潔にいうのであれば

#■「Ajax」とは..

・JavaScriptを使うぜ！
・サーバと非同期通信するぜ！

を表した言葉。


これはこれでこれまで「「Ajax」.....なんじゃこの単語、めっちゃ難しいやんけ..」と絶望した方には拍子抜けすぎるのでもうひと知識を伝授。


#・XMLとは。
Extensible Markup Language（エクステンシブル マークアップ ランゲージ）

##参考記事
https://wa3.i-3-i.info/word12672.html
https://wa3.i-3-i.info/word1577.html
↑もはやここで書くことすらなくなるほどの参考記事。。
応用数学／情報理論

#1.はじめに
　今回は、情報理論についてまとます。

#2.Summary
1)自己情報量：
　　　**$I(x)=-logP(x)$**

2)エントロピー：　　　　
　　　**$H(x)=\sum_i -P(x_i)logP(x_i)$**

3)エントロピー（2値）：　
　　　**$H(x)=-plog(p)-(1-p)log(1-p)$**
　
4)KLダイバージェンス：　
　　　**$D_{KL}(P||Q)=\sum_x P(x)log\frac{P(x)}{Q(x)}=\sum_x(p(x)logP(x)-p(x)logQ(x))$**

#2.自己情報量
　発生確率の大小によって情報量は変わる。確率は掛け算で取り扱いが面倒なので、logを取り足し算に変換。確率が小さいほど情報量を大きくとしたいので、マイナスを付ける。つまり、
　　**$I(x)=-logP(x)$**

1〜40の目が出るルーレットにおいて、
情報A）1〜10の目が出る： $-log_2(\frac{1}{4})=log_24=2$

情報B）偶数の目が出る：　$-log_2(\frac{1}{2})=log_22=1$

情報C）1〜10の目が出る　かつ　偶数の目が出る： $-log_2(\frac{1}{4}*\frac{1}{2})=log_2(8)=3$

・情報Aは情報Bより発生確率が低いので、情報量が大きい。
・logを取っているので、情報C＝情報A＋情報Bが成り立つ。

#3.エントロピー（平均情報量）
　エントロピー（平均情報量）とは、分からなさ。
ルーレットの出目を教えて貰う場合のエントロピー（平均情報量）は、自分が既に知っている情報によって変化する。

自分が何も知らないときに、出目を教えて貰う場合の平均情報量：
　　**$H(x)=\sum_{i=1}^{40}-P(x_i)logP(x_i)=-\frac{1}{40}log(\frac{1}{40})*40
=log_2{40}\fallingdotseq 5.32$**

自分が情報Cを知っていたときに、出目を教えて貰う場合の平均情報量：
　　**$H(x)=\sum_{i=1}^5-P(x_i)logP(x_i)=-\frac{1}{5}log(\frac{1}{5})*5
=log_25\fallingdotseq 2.32$**

つまり、既に知っている情報がある場合は、平均情報量が小さい。

自分が何も知らないときに、出目が偶数か、奇数か教えて貰うときの平均情報量：
　　**$H(x)=\sum_{i=1}^{2}-P(x_i)logP(x_i)=-\frac{1}{2}log(\frac{1}{2})*2
=log_2{2}=1$**

自分が何も知らないときに、出目が2か2でないかを教えて貰う場合の平均情報量：
　　**$H(x)=\sum_{i=1}^{2}-P(x_i)logP(x_i)=-\frac{1}{40}log(\frac{1}{40})-\frac{39}{40}log(\frac{39}{40})*40
=log_2{40}\fallingdotseq 0.17$**

つまり、出目が2か2でないかという情報は、大体予想がつくことなので、平均情報量は小さい。

#4.KLダイバージェンス
　同じ確率変数xに対して異なる確率分布P(x)とQ(x)があるとき、カルバック・ライブラー・ダイバージェンス（KLダイバージェンス）を使って、この２つの分布にどれだけの差があるのか測ることが出来る。

　　$D_{KL}(P||Q)=E_{x\sim P}
\begin{bmatrix}
log\frac{P(x)}{Q(x)}
\end{bmatrix}=
E_{x\sim P}[logP(x)-logQ(x)]$

＊$E_{x \sim P}[f(x)]$は、P(x)に関するf(x)の期待値
＊但し、$D_{KL}(P||Q)\neq D_{KL}(Q||P)$である。
応用数学／確率分布

#1.はじめに
　今回は、確率分布についてまとめる。

#2.Summary
![スクリーンショット 2020-04-14 16.14.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209705/829fdd1b-1b35-e31e-b30e-a3bb66d153ac.png)

#3.離散確率分布の分散式導出
![スクリーンショット 2020-04-14 19.38.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209705/2087349a-a606-87c2-8cdd-e336b0b49334.png)



#4.確率モデル
**1)機械学習モデル**
![スクリーンショット 2020-04-14 18.57.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209705/f7a1aa44-6b59-c4e2-b314-9fd838d6bf65.png)
**2)確率モデル**![スクリーンショット 2020-04-14 19.21.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209705/e15fdaf2-fccf-61a3-e0f1-0da2e12461b6.png)
![スクリーンショット 2020-04-14 19.26.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209705/a1fdd10a-03f5-801f-92b9-a7b7f03e63ad.png)
機械学習／カーネル法

#1.はじめに
　今回は、カーネル法についてまとめます。

#2.カーネル法
　SVM等で**非線形問題**を解くときに、トレーニングデータを**射影関数φ**を使って高次元の特徴空間に射影して学習し、学習後に同じ射影関数φを使って元に戻して解く方法を**カーネル法**と言います。
　　　$f(x)=b+\sum_{i=1}^m \alpha_ix^Tx^{(i)}=b+\sum_{i=1}^m \alpha_i*\phi(x)*\phi(x^{(i)})$

　但し、この方法には１つ問題があって、射影する特徴空間の次元数が非常に高くなってしまうことが多く、新しい特徴量 $\phi(x),\ \phi(x^{(i)})$ を生成する計算コストが非常に高くなってしまいます。

　そこで、射影関数の内積結果 $\phi(x)* \phi(x^{(i)})$ を既知の変数だけで計算する手法を **カーネルトリック**と言い、その条件を満たす関数 $f(x,x^{(i)})=\phi(x)* \phi(x^{(i)})$を**カーネル関数**と言います。

#3.カーネル関数
　よく使われるカーネル関数は、
**1)多項式カーネル**　　
　　$K(X_i,X_j)=(X_i^TX_j+c)^d$

**2)ガウスカーネル**
　　$K(X_i,X_j)=exp
\begin{bmatrix} 
-\frac{||x_i-x_j||^2}{2 \sigma^2}
\end{bmatrix}$

**3)シグモイドカーネル**
　　$K(X_i,X_j)=tanh(bX_i^TX_j+c)$

#4.多項式カーネルの導出
　２次元から３次元へ射影する下記の式を考えます
$\phi(x)=\phi(x_1,x_2)=(x_1^2, \sqrt2 x_1x_2, x_2^2)$

　すると、射影関数の内積は、
$\phi(x)^T\phi(y)=(x_1^2,\sqrt2 x_1x_2,x_2^2)^T
(y_1^2,\sqrt2 y_1y_2,y_2^2)$
$=x_1^2y_1^2+2x_1y_1x_2y_2+x_2^2y_2^2=
(x_1y_1+x_2y_2)^2$
$=((x_1, x_2)^T(y_1, y_2))^2=(x^Ty)^2$

つまり、射影関数の内積は、元のベクトルの内積の二乗で表せるわけです。
これは、多項式カーネルの c=0, d=2 の場合に相当します。
Lightdmでマルチディスプレイ

## 環境

archlinux + deepin desktop enviroment

## 参考

english
https://wiki.archlinux.org/index.php/LightDM#LightDM_displaying_in_wrong_monitor

japanese
https://wiki.archlinux.jp/index.php/LightDM#LightDM_.E3.81.8C.E9.96.93.E9.81.95.E3.81.A3.E3.81.9F.E3.83.A2.E3.83.8B.E3.82.BF.E3.81.AB.E8.A1.A8.E7.A4.BA.E3.81.95.E3.82.8C.E3.82.8B

```text:/etc/lightdm/lightdm.conf
display-setup-script=xrandr --output HDMI1 --primary
```

## すでに起動している状態でhdmiを認識させる

```bash:shell
xrandr --output HDMI1 --primary
```
javascript Promiseを実際に書いて理解する 

#Promiseを理解する。
javascriptを記述するうえで欠かせないのが、非同期処理です。
非同期処理のためPromiseを理解したいと考えております。
（async・awaitという便利な記述もあるみたいですが、それはまた今度）

## Promiseを知らないと
今まではPromiseを使わずに、コールバックを多用してました。

# 作ったもの
ページを読み込んだときのboxの「height」を表示。
3秒後に「height」が変更。
再度「height」を取得してサイズを表示。

# 実際の記述

```html
<div id="box" style="width: 100px; height: 200px; background-color: #999; color: #fff;">
	<p class="size"></p>
	<h2 id="success"></h2>
</div>
```

```js
//変数セット
let size = document.querySelector(".size");
let box = document.querySelector("#box");
let success = document.querySelector('#success')


//p.sizeタグに現在のbox高さを表示する。
size.textContent = box.clientHeight;

//プロミスに成功した場合の文章です（stringとする）
var success_text = "成功です";


//Promiseのインスタンスを作成する。
var promi = new Promise(function(resolve,reject){


	//型のチェック："string型"でなければrejectが作動する
	if(typeof success_text != "string"){
		reject('文字ではありません');
	}


	//〇秒後にcss変更
	setTimeout(function () {
		var width = parseInt(box.style.height);
		box.style.height = 333 + "px";
		return resolve(success_text);
	}, 3000);
});


//Promiseインスタンスの呼び出し
promi.then(function(value){

	//成功したときのフロー
    //console.log(value);
    success.textContent = value;
    size.textContent = box.clientHeight;


	//失敗（エラー）したときはエラー文をキャッチ
}).catch(function(error){
    console.error(error);
});
```

# Promiseでネスト構造を作成してみる。
応用編としてプロミスを利用した、ネスト構造を作成してみます。

```js
new Promise(resolve =>{
	setTimeout(() =>{
		console.log("1番目");
		resolve();
	},1000)//待ち時間を記述
}).then(() =>{
	return new Promise(resolve =>{
		setTimeout(() =>{
			console.log("2番目");
			resolve();
		},1000)//待ち時間を記述
	});
}).then(() =>{
	return new Promise(resolve =>{
		setTimeout(() =>{
			console.log("3番目");
			resolve();
		},1000)//待ち時間を記述
	});
});
```
Visioシェープメモ

#Shape

## Shape Transform
|セル名|意味|
|:--|:--|
|Width|図形の幅|
|Height|図形の高さ|
|angle|親図形から見たときの回転角|
|PinX|親図形の原点基準とした中心座標X|
|PinY|親図形の原点基準とした中心座標Y|
|LocPinX|図形の中心座標|
|LocPinY|図形の中心座標|
|FlipX|左右反転しているかどうか|
|FlipY|上下反転しているかどうか|
|ResizeMode|図形に対して現在設定されているサイズ変更の動作<br ^>0:グループの設定 <br \>1:位置の変更 <br \>2:サイズの変更 <br \>|
【ruby】ビュー内で<% i += 1 %>など書かずにeach.with_indexで書く方法

#経緯
ランキングを表すビューを書いてるときに以下のように直接コード内に
AUTO_INCREMENTになるように(整数値が1ずつ増えていく)
i+=1と設定していました。

```erb:app/views/ranks/_rank.html.erb
<% i = 1 %>
<% models.each do |model| %>
  <tr>
    <td><p><%= i %>位</p></td>
    <!--(省略) -->
  </tr>
  <% i += 1 %>
<% end %>
```

このままでは見た目があまりきれいじゃないです。

#解決方法
each.with_indexを使います。

```erb:app/views/ranks/_rank.html.erb
<% models.each.with_index(1) do |model, i| %>
  <tr>
    <td><p><%= i %>位</p></td>
    <!--(省略) -->
  </tr>
<% end %>
```

これでできました。
この場合はブロック変数のiがオートインクリメントになります。
そして、each.with_indexの後ろにある(1)はスタートの番号を表しています。
1,2,3・・・と増えていきます。

こんな感じになります。
![スクリーンショット 2020-04-16 15.13.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/574173/d90ff122-4e07-6299-efba-0ae6bfeda23a.png)


##参考
・https://qiita.com/gestalt/items/d2c663b4be524581747e
・https://shinkufencer.hateblo.jp/entry/2019/07/19/000000
【Mac】 Rails環境構築

## はじめに
### 本記事でのゴール
Railsを使用したローカル環境を構築
### 環境構築までのフロー
* Command_Line_Tools_for_Xcodeの導入
* HomeBrewの導入
* rbenvの導入し、rubyのインストール
* bandleの導入
* railsの導入
* サンプルワークスペースの作成

## 環境構築
### Command_Line_Tools_for_Xcodeの導入
[apple Developer](https://developer.apple.com/download/more/) より端末のOSに合わせたCommand_Line_Toolsをインストールしてください。
<img width="1395" alt="スクリーンショット 2020-04-16 15.25.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620117/eb4a6b89-e44c-dfbb-9077-f741bfd76f02.png">
### HomeBrewの導入
各パッケージをインストールするために、[HomeBrew](https://brew.sh/index_ja)の導入を行います。

```
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```
### rbenvの導入し、rubyのインストール
rubyのバージョン管理パッケージのrbenvの導入を行います。

```
$ brew install rbenv ruby-build
```
導入確認として下記のコマンドでバージョンが取得出来る事を確認してください。

```
$ rbenv -v
rbenv 1.1.2
```

初期セットアップを行います。

```
$ echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
$ source ~/.bash_profile
```

rbenvを使用し、rubyのインストールと端末への読み込みを行う。

```
$ rbenv install 2.6.5
$ rbenv global 2.6.5
$ ruby -v
ruby 2.6.5p114 (2019-10-01 revision 67812) [x86_64-darwin18]
```

### bandleの導入
Mac端末では既に`bundle`が導入されているかと思いますが、未導入の場合には下記コマンドで導入を行ってください。

```
$ gem install bundler
$ bundle -v
Bundler version 1.17.2
```

### railsの導入

bundleを使用し、railsの導入を行います。
アプリケーションを作成するdirを作成し、railsを導入する準備を行う。

```
$ mkdir ~/workspace
$ cd ~/workspace
$ bundle init
```
作成された`Gemfile`に記載されているrailsのコメントアウトをコメントを外しバージョン指定を行う。

```
$ vim Gemfile
# frozen_string_literal: true

source "https://rubygems.org"

git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }

gem "rails", "5.2.4.1"
```

Gemfileを基にrailsの取得を行います。

```
$ bundle install --path=vendor/bundle
$ bundle exec rails -v
Rails 5.2.4.1
```

### サンプルワークスペースの作成
サンプル用のワークスペースを作成し、アプリケーションを起動させます。

```
$ bundle exec rails new sampleApp
$ cd sampleApp/
$ bundle exec rails s
```

[ローカルの3000ポート](http://localhost:3000/)へアクセスする事で、アプリケーションの起動が確認できます。
<img width="677" alt="スクリーンショット 2020-04-16 16.58.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620117/cf7f9e18-a46b-6f7d-269e-357890bf627b.png">
Ryby on railsで NOFILEと出た時の対処法(MySQL)

# はじめに
railsで手動でデータを消してしまい、NO FILEが作られました。私はまだ初心者なので、さんざん検索したのですが、バージョンの違いなどで解決まで時間がかかったのでrails5.2.1 での解決方法を備忘録としてメモしておきます。（ついでに初投稿です！）
ミス等ありましたらご指摘ください。
参考：　[railsのrakeのmigrationファイルを削除しNO FILEとstatusに出た時の対処](https://joppot.info/2014/10/16/2104)

# 本題
### rails db:migrate:statusで確認
私の場合このように表示されました。これからさらにDBを追加していく時にNO FILEがあると邪魔だし、なんか嫌だし。。　消したい！

```
$ rails db:migrate:status

 Status   Migration ID    Migration Name
--------------------------------------------------
   up     20200409041144  Create users
   up     20200409041159  Add devise to users
   up     20200409043157  Add username to users
   up     20200409043957  Create tweets
   up     20200409044148  Add text to tweets
   up     20200410022026  Add user to tweets
   up     20200410022800  Add userid to tweets
   up     20200415052544  ********** NO FILE **********  <=これ
```
### ひとまずファイルを与える
ファイル名はどうせ消すので何でも良いのですが今回はdummyとします。

```
$ touch マイグレーションのID_dummy.rb
 私の場合だと
$ touch 20200415052544_dummy.rb
```
これをターミナルで実行すると、マイグレーションのID_dummy.rbのファイルができているはずです。

そしてそのファイルの中に下のコードをコピペ

```
class Dummy < ActiveRecord::Migration[5.2]
 def change
 end
end
```
##### ここでMigrationの隣にある[]内はバージョンを指定しているので必要に応じて変えてください。
rails5.2.1なら上のコードでOK
忘れず保存します。

### もう一度rails db:migrate:statusで確認
```
$ rails db:migrate:status

 Status   Migration ID    Migration Name
--------------------------------------------------
   up     20200409041144  Create users
   up     20200409041159  Add devise to users
   up     20200409043157  Add username to users
   up     20200409043957  Create tweets
   up     20200409044148  Add text to tweets
   up     20200410022026  Add user to tweets
   up     20200410022800  Add userid to tweets
   up     20200415052544  Dummy
```
NO FILEだったのがDummyに変わりました！
準備完了！

### downさせる

```
$rails db:migrate:down VERSION=マイグレーションのID
 私の場合だと
$rails db:migrate:down VERSION=20200415052544
```
### 実行
```
== 20200415052544 Dummy: reverting ============================================
== 20200415052544 Dummy: reverted (0.0024s) ===================================
```
こんな感じに表示されましたか？もうファイルはdownの状態なので普通にDeleteすれば完了です。（ここはもちろん手動でOK)

### 結果

```
$ rails db:migrate:status

 Status   Migration ID    Migration Name
--------------------------------------------------
   up     20200409041144  Create users
   up     20200409041159  Add devise to users
   up     20200409043157  Add username to users
   up     20200409043957  Create tweets
   up     20200409044148  Add text to tweets
   up     20200410022026  Add user to tweets
   up     20200410022800  Add userid to tweets
```
NO FILEが消えました！　以上です。

余談ですが、初心者の学生さんでプログラミングの話題を共有出来る方を探しています。もし良ければ、
[twitter @chocola35175554](https://twitter.com/chocola35175554)までDMください！
コンビニ払いには十分注意しましょう

# TL;DR
- コンビニ払いは現金払いと同様に悪用できる(支払者の認証がない)
- ありがとうAmazon
- ありがとうWelnet
- Googleの広告は業者の適正さを表していない
- 物の適正価格は理解せよ
- それでも欲に負ける(泣)
- セキュリティネタですｗ

# 流れ
電子マネーのギフトカードは一般的になっており、オンラインでの取引もされています。
Amazonギフトカードなどが代表的なものでしょうか。

キングギフト　https: //www .giftking .jp/ でギフトカード発注しましたがコンビニ払いを悪用してお金を騙し取られそうになりました。危ない危ない。
皆が気づくようにこのエントリを残します。

1. Googleでギフトカードの売買を検索すると引っかかる
2. サイトに行くと15％引きくらいでギフトカード販売している(その電子マネーは正規だと0.5％引き位で相当な値引き)
3. 購入するとメールが届く
4. その後セブンイレブン用コンビニ払いのリンクが届く。開くとセブンイレブンで払い込める画面が表示される

<img width="400" alt="Screen Shot 2020-04-16 at 12.40.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106545/2d28adcc-486a-c65f-5e0a-529169cd324b.png">

５. コンビニで支払いをすると、お礼メールが届く。実は払い込んだ先はAmazonであり、自分が誰かのAmazonの支払いを肩代わりさせられた状態
6. 待ってもギフトカードが届かず、連絡しても返事なし
7. リンクの発行元がAmazon(Welnet)になっているので[Amazon](www.amazon.co.jp/contact-us/)、[Welnet](https://www.well-net.jp/contact/)に連絡
8. Amazonから警察に被害届か相談届を出して受理番号をもらうように指示。
9. WelnetはAmazonにコンビニ払いのシステムを提供しているだけであると深夜に関わらず返信いただく。別途情報をいただく。
10. 県警に相談後、地域の警察に連絡が行き、受理番号を受領。
11. Amazonは支払先を一時的に凍結し、返金の手続き

#　今回の手順の一般化
不正の手口については、下記の流れが考えられます。
1. 悪意のある第三者（加害者）が架空サイトで被害者から注文を受ける
2. 加害者がAmazon社へ該当金額の注文を行い支払用のURLを入手
3. 支払用のURLをお客様に送信して代金の支払へ誘導
4. 被害者が代金を支払う
5. 加害者がAmazon社から何らかの商品（サービス）を受け取る

#　詐欺サイトの出来
このサイトは結構ちゃんとできているんですよ。例えば以下のような感じです。
ただしこのサイトの王冠の絵は他社のパクリです。
<img width="400" alt="Screen Shot 2020-04-16 at 14.52.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106545/0fe1eb55-49c5-1c02-c8e5-5552b557772e.png">

- Googleの広告を効果的に使っている
- 会社概要、利用規約、プライバシーポリシー、特定商取引法に基づく表記　がちゃんと存在する
- ただし電話番号はメールしたら教えると書いてある
- 会社の住所は実在する
- 注文、入金時にちゃんとメールが飛んでくる(運営がしっかりしているように見える)
- ポイント制度がある（継続性のあるビジネスに見える)
- 誰かが購入したカードの実況が表示されている(活動的に見える)
- お知らせが2018年7月から順次更新されている(ように見える)

# まとめ
払込票の連絡先がAmazonになっていたのでなにかおかしい、と思いつつ支払ってしまいました。
ギフトカードが安い、サイトが異常に遅い、等々気づいていたのですけどね。
他に騙された人が居なければいいのですが。50万円分のギフトカードとかもあったのでちと心配です。
私も高額のギフトカードが欲しかったですが、虫の知らせで少額にしていました。それでも心理的にはダメージアリです。
Amazon様、Welnet様、警察担当者様にはお世話になりました。
今後はお世話にならないようにします。

本エントリーに関連されている方で、異議のある方は連絡先等を明記の上、お知らせ下さい。
マインクラフトコマンド紹介　#2

# 始めに
皆さんこんにちは～！マインクラフターのムー＃です。
今日紹介するコマンドは前回のコマンドの応用編です
まだ前回のコマンドをチェックしていない人はこちらをチェック！
「[マインクラフトコマンド紹介　#1](https://qiita.com/MU_SAN/private/e3bf56c9e46179a32ae6)」

##今日のコマンド
今日のコマンドは、前回のコマンドのレベルを少し上げたものです、
具体的に何が変わったかというと、前回のコマンドでは右クリックの判定にニンジン付きの棒をそのまま使っていたために
同時に複数の魔法を使うことが出来なかったのですが今回はニンジン付きの棒にtagをつけることによって同時に複数の魔法を使えるようにしました。
ということで今日のコマンドは**即死魔法**です。当たったエンティティをを確実に倒せる魔法です。
ゾンビだろうが村人だろうが

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615707/85fb9044-8625-4044-e613-5aef6954cc42.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615707/b7f26dec-9be0-58dd-453b-339b12737f1f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615707/47ab4b3e-1064-2b18-75e7-2fce45b18726.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615707/7756747e-0fac-51cb-6cd7-86be38b4b8b1.png)

###コマンド解説
![2020-04-16_14.49.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/615707/6c7007b2-3f3b-4632-7f3f-430e9ab0f7d5.png)

まずはコマンドに必要なスコアボードの作成(useRodは前回にひき続きそのまま使います）
・/scoreboard objectives add d_rod dummy

次に魔法を使うアイテムを入手
・/give @p minecraft:carrot_on_a_stick{display:{Name:'{"text":"ドラゴンブレス"}'},ItemName:d_rod} 1

(上記はどちらもチャット欄に入力してください)

次にコマンドブロック(左から)

・/execute as @a[scores={useRod=1..,d_rod=1}] at @s run summon minecraft:armor_stand ~ ~ ~ {NoGravity:1b,Marker:1b,Invisible:1b,Tags:["magicalBall2"]}

・/execute as @a[scores={useRod=1..}] at @s run tp @e[tag=magicalBall2,limit=1,sort=nearest] ~ ~ ~ ~ ~
・/execute as @e[type=armor_stand,tag=magicalBall2] at @s run tp ^ ^ ^1.0

・execute as @p[scores={useRod=1..}] at @s run playsound minecraft:entity.ender_dragon.growl master @p[scores={useRod=1..d_rod=1}] ~ ~ ~ 100 2

・/scoreboard players set @a[scores={useRod=1..d_rod=1}] useRod 0

・execute as @e[tag=magicalBall2] at @s run effect give @e[type=!minecraft:player,distance=..1.5] minecraft:instant_health 1 25 true

・execute as @e[tag=magicalBall2] at @s run effect give @e[type=!minecraft:player,distance=..1.5] minecraft:instant_damage 1 25 true

・execute as @e[tag=magicalBall2] at @s run particle minecraft:witch ~ ~1.5 ~ 0.1 0.1 0.1 0.02 100

・scoreboard players set @a[scores={useRod=0}] d_rod 0

・execute as @a[nbt={SelectedItem:{tag:{ItemName:d_rod}}}] run scoreboard players set @s d_rod 1

####最後に
今日のコマンドはこれで以上になります。もし自分好みにアレンジしたい方が入ればeffectコマンドを変えれば対象にかける効果が、playsoundコマンドで右クリックをした時の音が変わります！
それではまた、よろしくお願いします。
【pry】Docker環境下でbinding.pryを使ったデバッグ


#Docker コンテナ内で、binding.pryを使ったデバッグを行いたい場合

>docker-compose run --rm -p 3000:3000 コンテナ名 bash
>bundle exec rails s -b 0.0.0.0

**docker-compose run:**
引数で指定したサービスのコンテナ内でコマンドを実行する。
docker-compose upとの違いは、upはdocker-compose.ymlに定義されたcommandを実行するのに対し、runはパラメータで指定したコマンドを実行する。

**--rm:**
コンテナが終了したら、そのコンテナを捨てる。
これを指定しない場合、runで実行したコンテナが使われずにdocker上に残ってしまう。

**-p:**
ポートを指定する。コンテナ内の3000番のポートをホスト側(mac)の3000番にバインドし、localhost:3000でアクセス出来るようにする。

**コンテナ名:**
docker-compose.ymlに定義されたコンテナ名

**bash:**
bash(コンソールシェル)で開く

**-b 0.0.0.0:**
全てのアドレスからの接続を受け付ける

# 参考

この記事は以下の情報を参考にして執筆しました。


- [Docker Compose コマンドライン・リファレンス ](https://fukatsu.tech/homebrew)
- [rails s -b 0.0.0.0 のオプション-bの意味](https://qiita.com/Masato338/items/f162394fbc37fc490dfb)
ブラウザのローカルストレージに情報を保存する

# はじめに
デジタルサイネージでコンテンツを再生する際、他のコンテンツと交互に再生する場合があります。その場合、コンテンツは再読み込みされるため、ニュース情報やショップ情報などは、数十件とある記事から続きを再生する必要があります。
普段はCookieを使って再生位置を記憶させていますが、コンテンツをまたいで記事の続きを再生させたい場合には、localStorageを使って再生位置を保存して、コンテンツで流す記事を調整します。

# 目次
1. 環境
2. localStorage
3. localStorageの注意点
4. Store.js
5. Store.jsの使い方
6. 参考

# 1. 環境
Windows10 Pro
Chrome 80.0.3987.163 / 64bit

# 2. localStorage

>local storageはHTML5の新機能であり、Webブラウザ（すなわちブラウザのユーザー）がJavaScriptを用いて任意の情報を保存できる仕組み
>*～[HTML5のLocal Storageを使ってはいけない（翻訳）](https://techracho.bpsinc.jp/hachi8833/2019_10_09/80851)より引用～*

だそうです。Cookieとの違いは以下

|  | 保存容量 | サーバの利用 | 保存期間 |データ形式|
|:--|:--|:--|:--|:--|
| Cookie |最大4KB |あり|任意に指定|文字列|
|localStorage |5MB（ブラウザにより可変）|なし|無期限|文字列|

# 3. localStorageの注意点
localStorageは、どのJavaScriptからでも読み込みできるので、
個人情報やセッション情報など、重要な情報は保存してはいけません。
デジタルサイネージは固定のPCでの運用が想定され、筐体に埋め込まれてるので、
そこまで気にしなくても良いかもしれませんが、通常のサイトにおいて、
セッション情報など、一時的な情報をローカルを扱いたい場合は、sessionStorageを使うのが良いそうです。sessionStorageはブラウザタブが閉じるとデータも消えるようです。
今回はデータを残しておきたいので、localStorageを使用しています。

# 4. Store.js
localStorageでのデータのやりとりを扱いやすくしてくれる、
JavaScriptライブラリです。
[store.js](https://github.com/marcuswestin/store.js/tree/master/dist)から`store.legacy.min.js`をダウンロードして使います。

以下のブラウザに対応しているみたいです。

>- IE6+
- iOS 8+
- Android 4+
- Firefox 4+
- Chrome 27+
- Safari 5+
- Opera 11+
- Node

>[store.js (Supported Browsers)](https://github.com/marcuswestin/store.js#user-content-supported-browsers)より引用

また、localStorageは文字列のみの保存しかできないのですが、Store.jsを使うと、
JSONなどを文字列に変換する部分はStore.jsがやってくれるみたいで、
そのままJSONとして使う事ができます。

# 5. Store.jsの使い方
## 基本的な使用例
データを保存したり読み込んだりするための`key`となる名前を任意に付けます。
既にデータがあるかどうかをチェックして、なかったらデータを保存。
あったら、データを読み込み

```javascript:howto.js
var key = 'hoge';
var obj = {};
var data = {mode:'news',count:0};
try{	//データがある
	obj = store.get(key);  //読み込み
}catch{	//データがない
	store.set(key,data);  //保存
	obj = data;
}
console.log(obj.mode, '/', obj.count);
```
## 削除と一覧

```javascript:delete.js
//指定のkeyを削除
store.remove(key);

//localStorageまるごと削除
store.clearAll();

//localStorage内のデータ一覧
store.each(function(value, key) {
	console.log(key, '=>', value)
})

```

# 6. 参考
[JSでブラウザにデータを保存する(store.js)](https://qiita.com/Schwl_Freiheit/items/019d80572eef545d4c6c)
[ブラウザのローカルストレージにデータを保存する「Store.js」](https://s8a.jp/javascript-store-js)
[HTML5のLocal Storageを使ってはいけない（翻訳）](https://techracho.bpsinc.jp/hachi8833/2019_10_09/80851)
Firebase Crashlyticsを手動インストールして試してみた

Firebase Crashlyticsをセットアップする手順まとめです。
Fabric Crashlyticsのセットアップ手順は多く公開されていますが、Firebase Crashlyticsの方はあまり多くないのでログ残しときます。

## 手動インストールの手順

いろんな事情でCocoaPodsを使えない環境の場合、この手順でセットアップできます。
Firebase未導入の場合は、[公式のドキュメント](https://firebase.google.com/docs/ios/setup)にしたがって環境を整えてから始めましょう。

### Firebase Crashlyticsをプロジェクトに追加する
はじめに公式サイトから[最新のSDK](https://firebase.google.com/download/ios?hl=ja)をダウンロードして解凍します。
解凍後、`FirebaseCrashlytics`内の3ファイルを使います。

* `FirebaseCrashlytics.xcframework`
* `upload-symbols`
* `run`

`FirebaseCrashlytics.xcframework`はフレームワーク本体で、プロジェクトに組み込めばOKです。
`upload-symbols`と`run`は、デバッグシンボルをFirebaseにアップロードするスクリプトです。このスクリプトを実行できないと、Firebase上でクラッシュ情報を解析できない恐れがあります。

#### FirebaseCrashlytics.xcframeworkへの参照を追加
FirebaseCrashlytics.xcframeworkを、XcodeのProject Navigatorにドラッグし参照を追加します。

![スクリーンショット 2020-04-16 11.31.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30970/eff77a71-73c5-9551-b89d-74d522de5471.png)

"Copy files if needed"へのチェックを忘れずに。

#### プロジェクトディレクトリにスクリプトを追加
プロジェクトのディレクトリに `scripts` ディレクトリを作成し、この2ファイルを配置します。

* upload-symbols
* run

### デバッグシンボルをアップロードするスクリプトを実行できるよう設定する
ビルド成功後、デバッグシンボルをアップロードするよう設定を変更します。

Xcodeで、プロジェクトの Build Phases を開いた後 "New Run Script Phase"から実行するスクリプトを追加します。

スクリプトにはこの1行だけペーストします。

```bash
${PROJECT_DIR}/scripts/run
```

"input files"には、この2行を追加します。

* `${DWARF_DSYM_FOLDER_PATH}/${DWARF_DSYM_FILE_NAME}/Contents/Resources/DWARF/${TARGET_NAME}`
* `$(SRCROOT)/$(BUILT_PRODUCTS_DIR)/$(INFOPLIST_PATH)`

ビルドを実行し、成功していればセットアップ完了です。

### 試しに落としてみる
どこでも良いので、`assert(false)` や `fatalError()` を挿入してわざと落としてみましょう。
しばらく待つとFirebaseコンソール上で確認できます。

## ハマったこと
### dSYMが不足していてクラッシュログが表示されない…
dSYMが不足しているとクラッシュログが表示されない場合があります。
その場合、[この手順](https://firebase.google.com/docs/crashlytics/get-deobfuscated-reports-new-sdk?platform=ios&authuser=0)を参考にしてFirebaseにアップロードすると改善される場合があります。
ToF センサーのシミュレーションのメモ

## 背景

ToF をレイトレーシングでシミュレーションすることで, ToF センサーの設計や三次元復元などに役立てる


PROCEDURE ENABLING SIMULATION AND IN-DEPTH ANALYSIS OF OPTICAL
EFFECTS IN CAMERA-BASED TIME-OF-FLIGHT SENSORS 
https://www.int-arch-photogramm-remote-sens-spatial-inf-sci.net/XLII-2/83/2018/isprs-archives-XLII-2-83-2018.pdf

ここから辿っていけばよさそうかも?
10~70歳までのドロップダウン


## forとwhileの違い
Qiita投稿2回目。



```php:for.php
<?php print('<h3>for年齢</h3>'); ?>
<form action="output.php" method="get" accept-charset="utf-8">
<select name="age" id="age">
<?php
for ($i=10; $i<=70; $i++) {
    print('<option value="'.$i.'">'.$i.'歳</option>');    # code...
}
?>
</select>
<input type="submit" value="送信する" />
</form>
```
```php:while.php
<form action="output.php" method="get" accept-charset="utf-8">
<?php print('<h3>while年齢</h3>'); ?>
<select name="age" id="age">
<?php
$i=10;
while ($i <=70) {
    print('<option value="'.$i.'">'.$i.'歳</option>'); 
    $i++; 
}
?>
</select>
<input type="submit" value="送信する" />
</form>
```
Ruby 素数を求めるアルゴリズム

```ruby
def prime(n)
  num = 2
  catch(:break_loop) do  
    while n > num do
      if (n % num) == 0 
        # puts "#{n} is not prime number"
        throw :break_loop
      end      
      num += 1
    end
      puts "#{n} is prime number"
  end
end

2.step do |i|
  prime(i)
  # break if i == 100
end
```

↑これをコピペして実行してください！

素数を求める永遠の旅に出れます


もし、素数でない数字も一緒に表示したい場合こちらをコピペして実行してください↓（コメントアウト外しただけです）

```ruby
def prime(n)
  num = 2
  catch(:break_loop) do  
    while n > num do
      if (n % num) == 0 
        puts "#{n} is not prime number"
        throw :break_loop
      end      
      num += 1
    end
      puts "#{n} is prime number"
  end
end

2.step do |i|
  prime(i)
  # break if i == 100
end
```

※注意
このまま実行すると無限に素数を求め続け、処理が終わりません。
もし、任意の数字で処理を止めたい場合、breakの前についてる＃を取ってコメントアウトしてから、１００と書かれている部分を任意の数字に置き換えてください！

```ruby
2.step do |i|
  prime(i)
  break if i == 100
end
```
アップキャストとダウキャストとコンストラクタ

import java.util.*;

 interface Sample{
     //定数はインターフェースに定義できるよ
     public final static int num=10;
    //抽象メソッド　public abstractは自動で作られる
    public abstract void hoge();
    
}

 interface Test{
     //定数はインターフェースに定義できるよ
     public final static int num=10;
    //抽象メソッド　public abstractは自動で作られる
    public abstract void exe();
    
}

//多重実現
class SampleImp implements Sample,Test{
    public void hoge(){
        
    }
    
    public void exe(){
        
    }
}


class A{
    
    public int i=10;
    
     A(int i){
        System.out.println("Aのコンストラクタ");
    }
    
    void test(){
        System.out.println("void test A");
    }
    
    void test2(){
        System.out.println("void test2 A");
    }
}

class B extends A{
    
    public int i=100;
    
    B(){
        super(100);
        System.out.println("Bkon");
    }
    
    @Override
    void test(){
        System.out.println("void test B");
    }
    
     void test3(){
        System.out.println("void test3 B");
    }
    
   
}

public class Main {
    public static void main(String[] args) throws Exception {
        
        //キャストアップの例
        // サブクラスからスーパーへキャストアップした場合、変数はより近い方１０が使用され、メソッドはオーバーライドさ
        //れたテスト２と出力、Bのメソッドは上書きされていないので使おうとするとエラー
        
        //注意　フィールド変数はスーパークラス、メソッドはサブクラスが優先される、という点です。
        A b= new B();
        
        b.test();
        //b.test3();
        
        //ダウンキャストの例↓アップキャストしたものだけを戻せる　調べる方法として　instanceof 　を使用することもできる
        
        // アップキャスト(暗黙的)
        A bb= new B();
        
        // ダウンキャスト(明示的)
        B bbb = (B)bb;
        
        // SubClassのメソッド
        bbb.test();
        bbb.test3();
        
        
        
    }
}
CircleCIからpytestのカバレッジ結果を見る


# 概要
> テストカバレッジのレポートをHTMLとして出したけどCircleCIから見る方法がわからない！

という方向けに、どうすればカバレッジレポートをCircleCIから見る方法を書いていきます

# 注意
結構強引なので、もっといいやり方がある気がします。何かいい方法を知っている方はコメントでお願いします

# 手順
1. カバレッジレポートを出す
2. config.ymlを変更してArtifactsとしてアクセスできるようにする

## カバレッジレポートを出す
どう出してもかまいませんが、ここは`pytest`でやっていこうと思います(楽なので)

`src`ディレクトリのコードについて、`test-reports`ディレクトリにHTML形式のカバレッジレポートを出します

```bash
pytest --cov=src --cov-report=html:test-reports
```

## config.ymlをいじる

```yml
version: 2
jobs:
  build:
    docker:
      - image: circleci/python:3.7.2
    steps:
      (省略)
      - run:
          name: run test
          command: |
            . venv/bin/activate
            pip install pytest
            pip install pytest-cov
            pytest --cov=src --cov-report=html:test-reports
      - store_artifacts:
          path: test-reports/
          destination: circleci-docs
```

のようにすると、以下の画像のように`Artifacts`の部分にカバレッジレポートのファイル群が表示されます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/322161/e6096016-ea61-b0d5-d4c2-b3ac51477b45.png)

これの`index.html`を踏むと、カバレッジレポートが見れました！やった

ファイル名をクリックすると、きちんとファイルごとの結果についても見れます


終わりです
CIS(IBM Cloud Internet Service)でmTLSを構成する(2) - クライアント証明書をブラウザに設定

#1. はじめに

[CIS(IBM Cloud Internet Service)でmTLSを構成する(1) - 基本設定編](https://qiita.com/testnin2/items/f83b09c3404810b9bb27)の続きです。

前回はクライアント証明書ありで`curl`を使ってmTLSで接続できることは確認した。今回はブラウザ経由で接続してみたい。クライアント証明書の設定方法はブラウザごとにお作法が違うようなので、今回はMac上でChrome/Safariで接続できるように構成してみる。


#2.  pkcs12形式の証明書を作成

以下でクライアントに配布するclient.p12というクライアント証明書を作成する。

```shell-session:pkcs12形式の証明書を作成
# openssl pkcs12 -export -out client.p12 -inkey client-key.pem -in client.pem -certfile ca.pem
Enter Export Password:
Verifying - Enter Export Password:
```

#3. クライアント証明書をMacのキーチェーンアクセスにインポート

上記`client.p12`をダブルクリックし、設定したパスワードを入力
<img width="445" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/0903cdda-68b1-fdce-f42f-b871adf719f7.png">
証明書が取り込まれたことがわかる。
<img width="876" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/4b7bcde0-ec79-a886-9f84-455e7ffb2a7c.png">

#4. importしたCA証明書を常に信頼に変更
CA証明書をダブルクリックし、「この証明書を使用するとき：」を`常に信頼する`に変更する。
<img width="515" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/e0b34c62-eec0-0434-c74b-90074c3fafaa.png">

これで、CA証明書、クライアント証明書の両方が信頼済みになる。
<img width="876" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/8008f3d3-b588-bb12-6833-c3acd0eb02c8.png">

#5. クライアント証明書にて、新規識別プリファレンスを設定
「新規識別プリファレンス」を選択
<img width="876" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/36a90259-6bde-b509-2651-d7c6b14654b3.png">
対象のURLおよび証明書を選択
<img width="428" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/6fbace65-e7e7-2d70-75af-4bf72cbff96d.png">
設定後の確認。「すべての項目」を選択すれば、識別プリファレンスを確認できる。
<img width="878" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/b2f4fd2d-4772-b829-8f66-93a15673cd82.png">

#6. Chromeからアクセス

Chromeからアクセスすると初回アクセスに以下のメッセージが表示される。
<img width="539" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/6e0835a8-bf9d-46e5-ff99-e590f09c7055.png">
<img width="436" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/ab95d657-437f-ac98-09d3-d8e60f0da6a6.png">
無事アクセスできた！Safariでも同様のメッセージが出るが、同じ設定でやはりアクセスできるようになる。
<img width="414" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/c90a5a8c-0ba3-5bfd-8a0e-5232e730cc81.png">
symfonyのchoiceTypeでplaceholderを消す方法(EC-CUBE4)

EC-CUBE4では配達日時や時間の初期値として、「選択しない」が選択されている。
しかし、日時を選ばせないのは都合が悪いので「選択しない」をそもそも表示しないようにしてみました。

注文確認画面における配達時間選択画面を生成している部分が以下の通り

```
$form = $event->getForm();
$form->add(
    'DeliveryTime',
    EntityType::class,
    [
        'label' => 'front.shopping.delivery_time',
        'class' => 'Eccube\Entity\DeliveryTime',
        'choice_label' => 'deliveryTime',
        'choices' => $DeliveryTimes,
        'required' => false,
        'placeholder' => 'common.select__unspecified',
        'mapped' => false,
        'data' => $ShippingDeliveryTime,
    ]
);
```

これのplaceholderをfalseに変えてあげると、「選択する」というoptionが消せるようになりました。

```
$form = $event->getForm();
$form->add(
    'DeliveryTime',
    EntityType::class,
    [
        'label' => 'front.shopping.delivery_time',
        'class' => 'Eccube\Entity\DeliveryTime',
        'choice_label' => 'deliveryTime',
        'choices' => $DeliveryTimes,
        'required' => false,
        'placeholder' => false,
        'mapped' => false,
        'data' => $ShippingDeliveryTime,
    ]
);
```
auth/admin-restricted-operation This operation is restricted to administrators only.

Firebaseで認証時に以下のエラーが出る場合

`auth/admin-restricted-operation This operation is restricted to administrators only.`

Firebaseのコンソール画面にある `Authentication` から `Sign-in method` を選んで、利用したい認証方式を有効にする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201603/84566ceb-8295-460f-aba1-e7f5cda4017e.png)
vuepress で mathjax で数式を使うメモ

# 背景

* レイトレーシング, 機械学習などで, 数式入りの文章を書きたい.
* 動的な機能を使うわけではないので, static site generator を使いたい.

static site generator は, hugo https://gohugo.io/ などいくつかありますが,
最近のナウでヤングそうな docusaurus, vuepress を使ってみたい.

docusaurus はなんか重そうなので, vuepress を使ってみます.

![Screenshot from 2020-04-16 13-24-47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36275/cd5b65ec-35fd-434f-9d5a-eed3fb22027a.png)

Markdown + LaTeX 形式で書けます!

## node 環境をインストール
 
node.js 界隈は, 半年ごろにパッケージマネージャいろいろ環境変わったりする感じで追いつくのが大変です(昔は grunt とか gulp がありましたね).

現在(2020/04/16)だと, パッケージマネージャとして yarn を使うのがおすすめのようです.

nodejs(+ npm)は, apt で入るのとかだとバージョン古かったりで問題が起きやすいので, nvm(node version manager) か, 自前で nodejs を落としてパスを設定しておきます.

nvm を使うのを記述しておきます.

https://github.com/nvm-sh/nvm

nvm インストール後, LTS 版の node(+npm)を入れます.

```
$ nvm install --lts
```

### yarn のインストール

```
$ npm install -g yarn
```

### vuepress のインストール

https://vuepress.vuejs.org/guide/getting-started.html

vuepress を local install で行います.
(システムグローバルでインストールだと, mathjax plugin を使うときに, shared-libs モジュールが見つからないエラーなどが出ました)

まず, ドキュメント(プロジェクトの)フォルダを作ります.

```
$ mkdir mysite
$ cd mysite

# Edit markdown
$ vi README.md
```

vuepress を `-D` 付き(developer mode)で入れます. そうしないと, 上記にあるように mathjax plugin に必要な shared-libs などがインストールされません(たぶん).

```
$ yarn add -D vuepress 
```

`yarn` のインストール先は, 環境によっていろいろ変わるようです. 筆者の場合は `~/local/npm/bin/yarn` にインストールされていました. 必要に応じて yarn を `PATH` に登録しておきます.

つぎに mathjax plugin を入れます. 幸いなことに, vuepress では標準(?)で mathjax plugin が用意されています.
こちらはドキュメントにあるように npm を使ってみます.

https://vuepress.github.io/en/plugins/mathjax/

```
$ npm install -D vuepress-plugin-mathjax
```

プロジェクトフォルダに, `.vuepress` フォルダがなければ作成し,

`.vuepress/config.js` にプラグインの設定を記述します.

```
// .vuepress/config.js
module.exports = {
  plugins: [
    [
      'vuepress-plugin-mathjax',
      {
        target: 'svg',
        macros: {
          '*': '\\times',
        },
      },
    ],
  ],
}
```

そして, Markdown のファイルに, mathjax の設定を入れます.

```
---
mathjax:
  presets: '\def\lr#1#2#3{\left#1#2\right#3}'
---

# Hello

$x+y=2$

```

`presets` は TeX(数式)の前に挿入されるコードを指定するようです. とりあえずドキュメントにあるままにしましたが, これはどのような振る舞いをするのですかね?

あとは, vuepress を起動します. local install の場合は `./node_modules/.bin/vuepress` あたりにあります.

```
$ ./node_modules/.bin/vuepress dev
```

デフォルトでは `localhost:8080` で立ち上がります.

![Screenshot from 2020-04-16 13-24-47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36275/cd5b65ec-35fd-434f-9d5a-eed3fb22027a.png)

Voala!

.md を編集したら, インタラクティブに反映されます!


うまくいかなかったら `vuepress dev --debug` としてデバッグプリントしてみましょう.



## TODO

* [ ] nodejs, 依存関係でいろいろモジュールインストールしまくりでつらいので, なんかフォルダ一式落としたら使えるみたいなのがほしい 
* [ ] LaTeX 数式フォントが使えるか調べる
* [ ] より LaTeX 的な theme を探す
* [ ] .html の release(publish)について調べる
CSSのみで文字をキラーンとさせる方法

CSSのみを使用して文字が光ったようなアニメーションを実装します。（IE非対応）
以下、参考にした資料。
・[文字グラデーション](https://marie-web.design/blog/text-gradation/)
・[バックグラウンドの位置変更](https://developer.mozilla.org/ja/docs/Web/CSS/background-position)
・[CSSアニメーション](https://techacademy.jp/magazine/25592)

この3つの記事（機能）をベースに実装しました。
ちなみにFlashかと思ったのですが、たぶん違くて正式なアニメーションの名称が分かれば教えて欲しいです！

## 完成イメージ
![flashImage.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420031/140bb238-8e43-340f-b9a5-8f93c6522d8e.png)
※gitは後で乗せます。

## コード

```html:html
<div class="back">
  <h1>～FlashTest～</h1>
</div>
```

```css:css
.back{
    background-color: gray;
    width: 100%;
    height: 100vh;
}

h1{
    width: 100%;
    font-size: 50px;
    background: -webkit-linear-gradient(-30deg, black 1%, white 5%, black 10%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-position: -200px;
    animation-name: flashText;
    animation-duration: 1.5s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
}

@keyframes flashText{
    0%{
        background-position: -100px;
    }
    100%{
        background-position: 300px;
    }
}
```

これで出来るかと。ホームページのタイトル部分とかに使えそうですね＾＾
php laravel blade　文字超過丸め方 (1分で読めます)

#やばい、、また詰まった、、、、
テキストの文字を丸めたい時ありますよね！
mb_strimwidth()を使うとできます。
ですが、文字数ではなく幅を考慮して**文字列をカット**しますのでご注意を！
指定の文字幅より長い場合にカットして最後に任意の文字列(...等)をつける事が可能に！！

コード
```mb_strimwidth("おはようございます", 0, 15, "...");```

こんな感じで使えます！！

詳しくはマニュアルに載ってます！
↓
[公式マニュアル](https://www.php.net/manual/ja/function.mb-strimwidth.php)
リダイレクトページとかでクエリストリングにURLを入れたいとき

こんな感じでencodeして、`props.redirect_url`内部のクエリストリングが、`qs`のクエリストリングとして認識されないようにする。

```js
const qs = `?redirect_url=${encodeURIComponent(props.redirect_url)}`;
```

AWSとかもこんな感じになってたので多分一般的な方法なんだと思う
Xcode11以降 Carthageでライブラリを追加するときの注意点

Carthageでライブラリを追加するときにXcodeのTargetのGeneralタブでframeworkを追加する作業が必要ですが、Xcode11からこのframeworkの追加部分が若干変わっていました。

**Xcode10**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6149/c7db63eb-6a06-b4b3-d346-66fc99eed119.png)

**Xcode11**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6149/b0841d17-c531-ac94-6354-7a522548a890.png)

このように、Xcode10までは`Linked Frameworks and Libraries`のセクションの`Status`欄に`Required`と`Optional`を設定していたものが、`Frameworks, Libraries, and Embedded Content`という旧`Linked Frameworks and Libraries`と`Embedded Binaries`とマージしたものになって`Embed`欄に`Do Not Embed`, `Embed & Sign`, `Embed Without Signing`を設定するように変わっていました。（あと関係ないですが、Xcode11では名前順に自動でソートされるようになっていました）

[Carthageのドキュメント](https://github.com/Carthage/Carthage#if-youre-building-for-ios-tvos-or-watchos)を読むと`Do Not Embed`を選ぶように書いてあります。

> Open your application targets’ General settings tab. For Xcode 11.0 and higher, in the "Frameworks, Libraries, and Embedded Content" section, drag and drop each framework you want to use from the Carthage/Build folder on disk. Then, in the "Embed" section, select "Do Not Embed" from the pulldown menu for each item added. For Xcode 10.x and lower, in the "Linked Frameworks and Libraries" section, drag and drop each framework you want to use from the Carthage/Build folder on disk.

ここが気をつけるポイントなのですが、**デフォルトでは`Embed & Sign`になってしまうので、必ず`Do Not Embed`に変更しなければなりません。**

`Embed & Sign`にしていても普通に手元でビルドしてる分には特に影響がないのですが、ipaファイルを作成する際のビルド時に問題が発生しますのでご注意ください。

```
Error Domain=IDEDistributionPipelineErrorDomain Code=0 "Code signing "XXX.framework" failed." UserInfo={NSLocalizedDescription=Code signing "XXX.framework" failed., NSLocalizedRecoverySuggestion=View distribution logs for more information.}
```
Visioショートカットメモ

#Visio2010用ショートカット

|機能|ショートカットキー|
|:--|--:|
|オブジェクト選択ツール|Ctl+1|
|テキスト|Ctl+2|
|コネクタ|Ctl+3|
|鉛筆|Ctl+4|
|自在曲線|Ctl+5|
|直線|Ctl+6|
|円弧|Ctl+7|
|四角形|Ctl+8|
|楕円|Ctl+9|
|スナップ，接着のON,OFF|ALT+F9|