OmniAICreator/Qiita-1.07M huggingface dataset:
Javaの条件分岐

##はじめに
小難しい部分は文章で説明するのがまだ難しいのでまずなにが出来ることの基本をモリモリ書いていくことにする.

###条件分岐の書き方

```kane.java
if(条件式){
  処理;
  }
```
**これが基本の形**
真偽値、比較演算子（==, < など）、論理演算子（&&, ||, ! ）などを使用して条件式を書いていく.


###ブロック{}
複数の処理をまとめたいときに使う.
**{ }の後ろにはセミコロンは不要。**


```kane.java

int x = 40

if (x >= 30) {
   System.out.println("xは３０以上。");
} else if (x > 20) {
   System.out.println("xは20より大きく３０より小さい。");
} else {
   System.out.println("xは20より以下。");
}

//今回は最初の処理で実行される
```

else ifは必要なだけ並べることができるが、**実行されるのは最初に合致した条件だけ。**


###switch文
条件の値がcaseの値と一致するとき、処理が実行される。
caseの後ろの**コロン（:）などは忘れがちなので注意。**


```kane.java
switch(条件の値) {
  case 値 1:
      処理;
      break;
  case 値 2:
      処理;
      break;
  case 値 3:
      処理;
      break;
}
```
**()の中の条件の値と、caseの値が「==」のとき、処理が実行される.**

```kane.java
int = x

switch(x % 2) { //条件の値

  case 0: //true
      System.out.println("これは偶数"); //これが実行
      break;
  case 1:
      System.out.println("これは奇数");
      break;
}
```
###break
switch文ではbreakがものすごく重要。**breakがないと**、**全て実行される**、switch文を使うときにはbreakは**絶対忘れないように**。
**※あえてcase文の処理を続けて実行したい場合に、breakを省略する。 フォールスルー というのがあり、case文のbreakを省略した書き方だが私の現段階では使い道がよくわからず言葉として残すために記述.**

###default
if文のelseに似ている。

```kane.java
int number = -1;

 switch(number) {
  case 0:
      System.out.println("0です");
      break;
  case 1:
      System.out.println("1です");
      break;
  case 2:
      System.out.println("2です");
      break;
  default:
      System.out.println("すみません。もう一度お願いします");
      break;
 }
```
###String型もいける

```kane.java
String number = "ゼロ";

 switch(number) {
  case "ゼロ":
      System.out.println("0です");
      break;
  case "イチ":
      System.out.println("1です");
      break;
  case "ニ":
      System.out.println("2です");
      break;
  default:
      System.out.println("すみません。もう一度お願いします");
      break;
 }
```

数値と同じように使える。


String 型が「null」という空っぽの状態であった場合、
(number = "", number = "null" などという状態以外で、nullというイレギュラーが入っている状態)
この場合は、defaultで拾ってくれないので注意。
**※これもまた理解できてないがメモとして残す**

##終わりに
他の投稿などをみて{}やif文switch文のインデントを変えるだけで見やすくなることに気づいた。
投稿の目次部分の#の数も意識したほうがいいかも。
COSMOCOMMUNICATOR　セットアップ  part1

# COSMOがやって来た
<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="ja" dir="ltr">きたきたきたー<br>ボーナス散財第一弾！ <a href="https://t.co/eFn3hiN2W7">pic.twitter.com/eFn3hiN2W7</a></p>&mdash; まこっちゃん (@cheng05) <a href="https://twitter.com/cheng05/status/1272880291099455489?ref_src=twsrc%5Etfw">June 16, 2020</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


それは突然の衝動に勢い任せにやって来た。
マジックトラックパッドの感度がおかしくて指を置いただけなのにうっかり購入したとは言えない。

そして開封は諸先輩のインプレを見ていただきたい。
林檎信者としては、頑張って真似したんだね。無理しなくてもいいのに。。。
って言う気持ちでした。まあ、iPhone4に追いついてないぐらいの仕上がりですね。私はplanetの個性を感じなくてがっかりした。

で、電源を入れようとしたら、電源入らなかったです。
リチウム系バッテリーなのに、０％　
# 0%ってアンタどうなってん？？？
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">これどうなんだ？動作確認せずに発送してるだろ？リンクス代理店としてどうなんだ？ダメだろうよ？ <a href="https://t.co/q0Ig9EM8VS">pic.twitter.com/q0Ig9EM8VS</a></p>&mdash; まこっちゃん (@cheng05) <a href="https://twitter.com/cheng05/status/1272884505301352454?ref_src=twsrc%5Etfw">June 16, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
# 思わず悪態をつきました。８万円の買い物なのでふざけんなよってやつですけどね。

でもこれどうやら皆さん0%入手のようですね。

***
そんで、AndroidをセットアップしないでLinuxを入れましょう。
あとで入れようなんて思ってるとAndroidを再セッツすることになりますよ。

手順はこちら
http://support.planetcom.co.uk/index.php/Linux_for_Cosmo

正直Google翻訳で十分わかる説明だと思います。
これわかんなかったら、触らない方がいい。
そんな気がします。

#### この先のお品書き
1. debianの日本語表示
2. 日本語入力
2. pythonを入れよう
2. wgetが入ってないの？
3. VScodeを入れようか。

以上の解説を予定しています。

ではではー
モーダルの表示/非表示

# プログラミングの勉強日記
2020年6月22日　Progate Lv.144
ReactⅢ
モーダル（ポップアップ）について学んだ。

##モーダルの非表示
　モーダルはクリックによって表示/非表示が切り替わる。なので、モーダルが表示されているかどうかの情報をstateにする。
　<font color=orange>isModalOpen</font>という真偽値型のstateを用意して、trueなら表示、falseなら非表示にする。つまり、trueのときはモーダルのJSXが存在し、falseのときはモーダルのJSXは存在しないようにする。

```react:lesson.js(stateの定義)
class Lesson extends React.Component{
  constructor(props){
    super(props);
    this.props={isModalOpen:false}
  };
...
```

###JSXと変数
　JSXは変数に代入して、`{変数名}`で表示することができる。

```react:sample.js
render(){
  let text=<p>Hello Reacr</p>
  return(
    <div>
      <h1>Hello World</h1>
      {text}
    </div>
  );
}
```
　変数textに代入したJSXを表示している。
<img width="571" alt="React6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/36643896-7926-5759-ddf5-849b5cd9ac3d.png">


###JSXとif文
　isModalOpenがtrueのときのみ表示する。変数modalを用意して条件分岐を行う。

```react:Lesson.js
render()[
  let modal;
  if(this.state.isModalOpen){  //isModalOpenがtrueのときに実行される
    modai= //modalのJSX部分
  }
  return(
    ...
    <div>
      <p>{this.props.name}<p/>
      {modal}  //変数modalに代入されたJSXが表示される。
    </div>
   ...
```

##モーダルの表示

```react:Lessonjs(stateを変更するメソッドの作成)
handleClickLesson(){
  this.setState({isModal:true});
```

```react:Lessonjs(メソッドを呼び出すonClickイベントの設定)
//画像をクリックしたときにモーダルを表示
<img src={this.props.image} 
     {onClick={()=> {this.handleClickLesson()} } />
```


###モーダルの非表示
　「とじる」ボタンをクリックしたときにモーダルを閉じる。

```react:Lessonjs(stateを変更するメソッドの作成)
handleClickClose(){
  this.setState({isModal:false});
```

```react:Lessonjs(メソッドを呼び出すonClickイベントの設定)
//画像をクリックしたときにモーダルを表示
<img src={this.props.image} 
     {onClick={()=> {this.handleClickClose()} } />
```

##テストコード

```react:Lesson.js
import React from 'react';

class Lesson extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isModalOpen: false};
  }

  handleClickLesson() {
    this.setState({isModalOpen: true});
  }
  
  handleClickClose(){
    this.setState({isModalOpen:false});
  }

  render() {
    let modal;
    if (this.state.isModalOpen) {
      modal = (
        <div className='modal'>
          <div className='modal-inner'>
            <div className='modal-header'></div>
            <div className='modal-introduction'>
              <h2>{this.props.name}</h2>
              <p>{this.props.introduction}</p>
            </div>
            <button
              className='modal-close-btn'
              onClick={()=>{this.handleClickClose()}}
            >
              とじる
            </button>
          </div>
        </div>
      );
    }

    return (
      <div className='lesson-card'>
        <div
          className='lesson-item'
          onClick={() => {this.handleClickLesson()}}
        >
          <p>{this.props.name}</p>
          <img src={this.props.image} />
        </div>
        {modal}
      </div>
    );
  }
}

export default Lesson;
```
ssh内でgit cloneをした際のpermission deniedを解決する

# 環境　
Mac OS Catalina バージョン　10.15.4

#前提

ssh内でgit cloneをしようと

```
git clone git@github.com: 自分のリポジトリのURL
```

をターミナルで打つと

```
Warning: Permanently added 'github.com,13.114.40.48' (RSA) to the list of known hosts.
Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
```

となり詰んでしまった......

# 解決法

SSHではなく、httpsでのクローンでうまくできた。
git hub内でのhttpsを押してURLをコピーする

<img width="159" alt="スクリーンショット 2020-06-22 21.48.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/660451/06424369-e18a-cfad-a94a-920ed354fb43.png">

```
git clone https:// 自分のリポジトリのURL
```


####無事完了！

```
Cloning into ...
remote: Enumerating objects: 150, done.
remote: Counting objects: 100% (150/150), done.
remote: Compressing objects: 100% (115/115), done.
remote: Total 150 (delta 17), reused 150 (delta 17), pack-reused 0
Receiving objects: 100% (150/150), 528.91 KiB | 829.00 KiB/s, done.
Resolving deltas: 100% (17/17), done.

```
PRML　演習問題 5.12（標準）　解答 

## 問題
> 停留点$\mathbf{w} ^ {\star} $のまわりでの誤差関数のテイラー展開(5.32)を考えることで、停留点が誤差関数の局所的極小点であることの必要十分条件は、(5.30)で定義されるヘッセ行列$\mathbf{H}$が正定値であることを示せ。ただし、$\hat{\mathbf{w}}$ $= \mathbf{w} ^ {\star}$である。

## 参考
#### 正定値
行列$\mathbf{H}$はすべての$\mathbf{v} \neq \mathbf{0}$に対して$\mathbf{v^THv} > 0$を満たすとき、またそのときに限り**正定値**であると言われる。(PRML本文より)

誤差関数のテイラー展開 
>
```math
\begin {align*}
E(\mathbf{w}) \simeq E\left(\mathbf{w}^{\star}\right)+\frac{1}{2}\left(\mathbf{w}-\mathbf{w}^{\star}\right)^{\mathrm{T}} \mathbf{H}\left(\mathbf{w}-\mathbf{w}^{\star}\right)
\tag{5.32}
\end {align*}
```

## 解答
- **ヘッセ行列$\mathbf{H}$が正定値である時に停留点が誤差関数の局所的極小点であることの証明**  

ヘッセ行列$\mathbf{H}$が正定値であるならば

```math
\begin {align*}
\left(\mathbf{w}-\mathbf{w}^{\star}\right)^{\mathrm{T}} \mathbf{H}\left(\mathbf{w}-\mathbf{w}^{\star}\right) > 0
\end {align*}
```  
が成り立つ。そのため(5.32)において

```math
\begin {align*}
E(\mathbf{w}) - E\left(\mathbf{w}^{\star}\right) \simeq \frac{1}{2}\left(\mathbf{w}-\mathbf{w}^{\star}\right)^{\mathrm{T}} \mathbf{H}\left(\mathbf{w}-\mathbf{w}^{\star}\right) > 0
\end {align*}
```
が成り立つ。このことから停留点は誤差関数の局所的極小点であることがいえる。

- **停留点が誤差関数の局所的極小点である時にヘッセ行列$\mathbf{H}$が正定値であることの証明**  

停留点が誤差関数の局所的極小点であるならば

```math
\begin {align*}
E(\mathbf{w}) - E\left(\mathbf{w}^{\star}\right) \simeq \frac{1}{2}\left(\mathbf{w}-\mathbf{w}^{\star}\right)^{\mathrm{T}} \mathbf{H}\left(\mathbf{w}-\mathbf{w}^{\star}\right) > 0
\end {align*}
```
が成り立つため、

```math
\begin {align*}
\left(\mathbf{w}-\mathbf{w}^{\star}\right)^{\mathrm{T}} \mathbf{H}\left(\mathbf{w}-\mathbf{w}^{\star}\right) > 0
\end {align*}
```  
が言える。この時$\mathbf{w}-\mathbf{w}^{\star}$は任意のベクトルを表すことができるため、
行列$\mathbf{H}$はすべての$\mathbf{v} \neq \mathbf{0}$に対して$\mathbf{v^THv} > 0$を満たすといえる。よって行列$\mathbf{H}$は正定値である。
[備忘録]railsでfullcalendar表示させてみた

#はじめに
現在個人アプリ制作をしており、予約機能を実装するためgem「fullcalendar」を使いました。
これから紹介する手順を踏んで行けば、とてつもなく簡単に実装できます。
そして自分が最強になったのかと感じてしまうはずです。。
自分の備忘録として掲載しますが、誰かの参考になれば嬉しいです。

ちなみに表示できたらこんな感じになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/569660/b64a5b8a-bfb9-b62e-ccd2-2a3a61dd5e82.png)

##実装順序
　
　１.　表示用のアプリケーション作成

　２.　DBの作成

　３.　Gemfileの導入、fullcalendarの呼び出し

　４.　gemを使うための記述をする。

　５.　ビューファイルの編集

　６.　CSSの編集　　　以上！！！

## １.表示用のアプリケーション作成、　２.DBの作成
　１．　まずはアプリを作成し、DBを作ります

``` ruby
$ rails _5.2.4.2_ new fullcalendar //newの隣には好きなアプリ名を入れてOK
$ cd fullcalendar
$ rails db:create
```

## ３.　Gemfileの導入、fullcalendarの呼び出し
ここでは実装に必要なGemを３つ入れていきます。

``` ruby
gem 'jquery-rails'   
gem 'fullcalendar-rails'
gem 'momentjs-rails'

$(document).ready(function(){
  $('#calendar').fullCalendar({
  });
});

//入力後、bundle install忘れずに！！
```

## ４.　gemを使うための記述をする。
 jsファイルに下記記述をコピペしてください。元々の記述とかぶる部分があるのでそこは被せてしまって構いません。
これないとjQueryとか使えません…

``` ruby:application.js
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require jquery
//= require moment
//= require fullcalendar
//= require_tree 
```

## ５.　ビューファイルの編集

 魔法のように一行入れるだけでOK（hamlでの記述になり申し訳ない）
※hamlとHTMLの記述を翻訳してくれるサイトもあるので是非ご活用ください。
　https://htmltohaml.com/
 
``` views/index.html.haml
 #calendar //これだけですww
```

## 　６.　CSSの編集
 ちなみにこんな感じでうまく画面の真ん中に表示されます。

``` css
#calendar {
  margin: 0 auto;
  width: 700px;
  text-align: center;
  position: fixed;
  top: 90px;
  bottom: 0;
  left: 0;
  right: 0;
 }
```
```css:application.css
*= require_tree .
 *= require_self
 *= require fullcalendar
 */
```
実装は以上になります！！

　


## 終わりに

こんな簡単に実装できるのに、私はいつのまにかapplication.jsを消していたようで全然表示されず、放置しかけてました。しかしなんとかgithubを活用し復活させ、無事に実装することができました。

まだまだこんな簡単な記事しかかけませんが、わからないこと、より改善できることがありましたらコメント下さい。
最後まで見ていただき、ありがとうございました😭
Anacondaを使ってWindowsにscrapyを導入する

## WindowsにScrapy導入する

### セットアップ環境
Windows 10 Pro 64bit、Anaconda Navigator 1.9.7

### anacondaをダウンロード
https://www.anaconda.com/products/individual

### scrapyインストール

*「Anaconda Prompt」* を起動し、下記のコマンド実行する。

`conda install -c conda-forge scrapy`
Elixir: [🐈, 🐕, 🐕, 🐈, 🐈, 🐕]のようなリストを[[🐈, 🐈, 🐈 ], [🐕, 🐕, 🐕]]に仕分けする

# はじめに
- @suin さんの[JavaScript: [🐈, 🐕, 🐕, 🐈, 🐈, 🐕]のような配列を[[🐈, 🐈, 🐈 ], [🐕, 🐕, 🐕]]に仕分けする](https://qiita.com/suin/items/25908e15aeaa7e3a1ae6)を拝見しまして、私はぜひ[Elixir](https://elixir-lang.org/)でやってみようとおもいました
- [Elixir](https://elixir-lang.org/)は`Elixir 1.10.3 (compiled with Erlang/OTP 23)`を使いました

# インストール
- まずは[Elixir](https://elixir-lang.org/)をインストールしましょう
    - 手前味噌ですが、[インストール](https://qiita.com/torifukukaiou/items/d04d0273749c41eb50af#0-%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB) などを参考にしてください

# その1

- `IEx`でやります

```elixir
$ iex

iex> ["🐈", "🐕", "🐕", "🐈", "🐈", "🐕"] |> Enum.group_by(& &1) |> Map.values()
[["🐈", "🐈", "🐈"], ["🐕", "🐕", "🐕"]]
```

- [|>](https://hexdocs.pm/elixir/Kernel.html#%7C%3E/2)
    - `Pipe operator`と言います
    - 計算の結果を次の関数の第一引数に入れて実行してくれます
- [Enum.group_by/3](https://hexdocs.pm/elixir/Enum.html#group_by/3)
    - `%{"🐈" => ["🐈", "🐈", "🐈"], "🐕" => ["🐕", "🐕", "🐕"]}`
    - [Enum.group_by/3](https://hexdocs.pm/elixir/Enum.html#group_by/3) まで実行した結果は↑こんな感じです
- [Map.values/1](https://hexdocs.pm/elixir/Map.html#values/1)

# その2

```elixir
iex> ["🐈", "🐕", "🐕", "🐈", "🐈", "🐕"] |> Enum.frequencies() |> Enum.map(fn {key, cnt} -> 
...> List.duplicate(key, cnt) end)
[["🐈", "🐈", "🐈"], ["🐕", "🐕", "🐕"]]
```

- [Enum.frequencies/1](https://hexdocs.pm/elixir/Enum.html#frequencies/1)
    - `%{"🐈" => 3, "🐕" => 3}`
    - [Enum.frequencies/1](https://hexdocs.pm/elixir/Enum.html#frequencies/1)まで実行した結果は↑こんな感じです
- [Enum.map/2](https://hexdocs.pm/elixir/Enum.html#map/2)
- [List.duplicate/2](https://hexdocs.pm/elixir/List.html#duplicate/2)
- `IEx`は`System.halt`で終わらせてください
    - [System.halt/1](https://hexdocs.pm/elixir/System.html#halt/1)

# Wrapping Up
- お好みの言語で仕分けをお楽しみください
- **Enjoy!!!**
FlutterのWebView

# 背景

去年の秋からFlutterでアプリ(iOS&Android)を開発し始めた。

UIはFlutterのUIパーツでほぼできますが、どうしてもWebのページあって、あそこの部分はWebページを表現したいたりしますね。
ウェブビューの役割果たすために

- Htmlのレンダリング
- JSのサポート面
- ローディングやリソースの読み込みのコールバックイベント
- JSとDartの橋役

上記を満たせば、残りは効率的問題、
具体的にdebug機能も求めることが望ましいですが、
今のほぼハイスペックスマホ時代は、特に問題ないでしょうと思うけどね。

ちょっと宣伝[私のブログ](https://zamberform.github.io/)

---

# 選別

Flutterのライブラリーは充実していて、頼りできるし、効率すごく上がるメリットあります。
[FlutterのライブラリーWebView](https://pub.dev/flutter/packages?q=webview)から検索して、`webview_flutter`と`flutter_webview_plugin`で私がプロジェクトのwebview表示として使用しようと思います。

## webview_flutter

マークは`flutter.dev`です。

つまり、Googleの公式サポートです。

もちろん、これを選ぶべきと思います。

Htmlのレンタリングはもちろん、
JSの切り替えは`javascriptMode `で一発解決します。

* コールバックイベント豊富です。

```
　onWebViewCreated
　navigationDelegate
　onPageStarted
　onPageFinished
```
　関数名から見ると、従来のAndroidのWebView感大きいですね。

* JSとDartの橋

```
　javascriptChannels
```

効率的にはさすがGoogle製、かなりチューリングしました、Flutterとの相性は抜群です。


## flutter_webview_plugin

マークは`fluttercommunity.dev `です。

Googleは政府機関に例えすると、こちらは民間機関の製品として認識した方がいいかと思います。
なので、使い勝手ですね。

`webview_flutter `にはないものは全部揃えたです、
例えば、Zoom機能とか、ローカル保存とか、何より、JSに対してのサポートは神レベルです。
実作業の時、`webview_flutter `はJSのアンカー（指定したclassやidにスクロールする機能）サポートしていなく、こちらはスムーズに動いた。
まだ、そのほか、webページでよく使われたjsのライブラリーはほぼこちらのライブラリーで動けるので、心配なく長く使えそうですね。
でも、`Scaffold`なので、Scaffold上のシェダーは加えて表示したい場合、Flutterのレンタリングで工夫する必要があります。

---

# セキュリティ

従来JS周りで、しつこいセキュリティ論はありますね。

* `webview_flutter`:`javascriptMode `でコントロールできる、まだ、`javascriptChannels `で発火イベントを捉えるので、セキュリティー面は極めて低いと思います。
* `flutter_webview_plugin `:同じく`withJavascript`でコントロールできますが、やはりjsのサポート面は大きいので、セキュリティ面は`webview_flutter `より低いです。ハイリスクと言えるほどではないです、どんどん使いましょう。

---

# 結論

両方のplugin（ライブラリー）同時にプロジェクトで利用すべきです。
必要に報じて、両方のパーツを使い回せば幾つの仕様に合わせます。

補足：
関数などの衝突あるかと心配するかもしれないですが、こちらの検証として、両方のライブラリーは特に衝突なし利用できます。
元々、dartはimportでパッケージを管理しているので、一緒にimportしても、名前つけると、ビルド時は名前は差し替えるので、特に心配しなくで大丈夫です。

最後に、同じ内容も[私のブログ](https://zamberform.github.io/)に載ってますよ。
SwiftからPythonスクリプトを呼ぶ「PythonKit」

PythonKitをつかってSwiftからPythonスクリプトを実行できます。
これにより、Pythonスクリプトを実行するMacアプリを開発できます。
（iOSでは機能しません）
<img width="444" alt="スクリーンショット 2020-06-18 13.58.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/1619058a-4f70-0516-8dac-33992f533d0f.png">

1、Xcodeプロジェクトを開きます。
「file→Swift Packages→Add Package Dependency」と進みます。
[PythonKitのGitHubリポジトリ](https://github.com/pvieito/PythonKit)からPackage Dependency URLをコピーペーストします。
<img width="1141" alt="スクリーンショット 2020-06-18 12.21.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/9bbe5686-b0fb-d359-0b0b-6173dc821390.png">


2、 Branch:masterを選択します。
<img width="1140" alt="スクリーンショット 2020-06-18 12.25.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/54a21868-99b9-f4fe-0a62-9d0804050a26.png">

3、Pythonファイルを作成します。たとえば、「example.py」と書きました。↓

```python:example.py
def hello（）：
    print（"Hello PythonKit"）
}
```

4、Xcodeプロジェクトのセッティング「TARGETS→Signing＆Capabilities」で、以下の設定をします。
・アプリのサンドボックスではなくMacのファイルにアクセス
・ライブラリの検証を無効
<img width="1136" alt="スクリーンショット 2020-06-18 12.34.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/8a3c342c-ef76-6836-c473-b83c59c35a6d.png">

5、ViewControllerからPythonファイルを呼び出します。

```swift:ViewController.swift
override func viewDidLoad() {
    super.viewDidLoad()
    let sys = Python.import("sys")
    sys.path.append("/Users/mlboy/PythonTest/") // example.pyのあるディレクトリへのパス
    let example = Python.import("example") // パイソンファイルをimport
    example.hello() // Pythonのファンクションをよぶ
   }
```

Xcodeコンソールを確認します。Pythonファイルが実行されて、"Hello PythonKit"がプリントされます。
<img width="673" alt="スクリーンショット 2020-06-18 12.54.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/01c26742-f801-b3c1-732f-62bfbecd5ebb.png">

Twitterフォローしてくださいお願いします！
https://twitter.com/JackdeS11
【xcode】swift if文 TextFildを使ったクイズ

##内容
TextFildで入力された数字が指定された数字だったら正解
でなければ、ヒントが出てくる

##今回使ったif文書式

if (条件式1){  処理1 } else if (条件式2){ 処理2 } else { 処理3 }
→条件式1が真なら処理1を実行、条件式1が偽で条件式2が真なら処理2を実行、全ての条件式が偽の時に処理3を実行

<a href="http://www9.plala.or.jp/sgwr-t/c/sec06-1.html">参考記事</a>

##コード
```
    @IBOutlet weak var Label1: UILabel!
    @IBOutlet weak var TextField: UITextField!

     override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    @IBAction func button(_ sender: Any) {
        var value:String
        value = TextField.text!
            var num:Int?;
            num = Int(value)
        
        if num == 24{
                Label1.text="正解！！"
            }else if 24 < num!{
                Label1.text = "もっと下かな！"
            }else{ Label1.text="もっと上だよ！"
                   }
```

##完成形
<img width="284" alt="スクリーンショット 2020-07-27 18.23.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/627010/ba274c17-73c5-56e0-caeb-0b94c147752f.png">
Rubocop導入＋手順とコマンドの備忘録

# Rubocopを使ったデバックのやり方
* 1.現在の違反をすべて記録した上で、いったん違反では無いことにする
* 2.記録した違反のうち1つを、違反していることに戻す
* 3.その違反を解消する
* 要するに`.rubocop.todo.yml`から違反を消し`bundle exec rubocop`を実行 → 修正

rubocop　通常実行コマンド
#
```
bundle exec  rubocop
```
大量に出てくるのがコード規約違反！


以下のコマンドを実行すると、規約違反の一覧が表示される`.rubocop.todo.yml`が生成される。
コマンド実行後は`.rubocop.yml`の一番上に`inherit_from: .rubocop_todo.yml`と追加される。
これがあると規約違反が読まれない。
#
```
bundle exec rubocop --auto-gen-config
```

以下のコマンドを実行すると、自動である程度を修正してくれる。
#
```
bundle exec rubocop -a
```

`.rubocop.yml`をルートディレクトリに作成して、設定を作れる。
最後に自分の使用例を載せます！

#
```.rubocop.yml
inherit_from: .rubocop_todo.yml

AllCops:
  # 除外するディレクトリ（自動生成されたファイル）
  # デフォルト設定にある"vendor/**/*"が無効化されないように記述
  Exclude:
    - 'bin/*'
    - 'lib/*'
    - 'node_modules/**/*'
    - 'db/**/*'
    - 'vendor/**/*'
    - 'config/**/*'
    - 'script/**/*'
    - 'test/**'
  # Rails向けのRails copsを実行。"rubocop -R"と同じ
  Rails:
    enabled: true

# "Missing top-level class documentation comment."を無効
Style/Documentation:
  Enabled: false

# コメントにはアスキー記号のみを使用してください
AsciiComments:
  Enabled: false

# "Prefer single-quoted strings when you don't need string interpolation or special symbols."を無効
Style/StringLiterals:
  Enabled: false

# "Line is too long"を無効
Metrics/LineLength:
  Enabled: false

# join_roomの記述が引っかかる為。省略は難しい
Etrics/MethodLength:
  Enabled: true
  Max: 18

#'frozen_string_literal: true'を無効
Style/FrozenStringLiteralComment:
  Enabled: false

# tweet_searchやtestのnamespaceが引っかかるため
Style/ClassAndModuleChildren:
  Enabled: false

# 線が多い長いブロックは避けてください
Metrics/BlockLength:
  Exclude:
    - 'spec/**/*'

# NotificationsControllerが22文字の為
Metrics/AbcSize:
  Enabled: true
  Max: 23

# if~else~endの方がひと目で分かりやすいと思うためfalse。詳細は以下を参照
# https://docs.rubocop.org/rubocop/cops_style.html#styleguardclause
Style/GuardClause:
  Enabled: false

# devise_helperの関係のため
Naming/HeredocDelimiterNaming:
  Enabled: false
```
動的メソッドと静的メソッド【オブジェクト思考】

#オブジェクト思考について


**クラス**
設計図

**インスタンス(実態)**
`new Sample`
設計図から作り出された実態
で新しい空のインスタンス(オブジェクト)ができる。


**プロパティ**
クラスが持つ変数

**メソッド**
クラスが持つ関数

#静的メソッド、動的メソッド

メソッドは基本的にインスタンスを生成してから利用する。
しかし、`static`なメソッド(静的なメソッド)であれば、インスタンスを生成しなくてもメソッドを利用できる


#self::と$this

`self::`は自分のクラスのプロパティ、メソッドへの静的アクセス

`$this`は自分自身のオブジェクトのこと

なので、

staticメソッドから$thisを呼び出したりすることはできない。

####参考
https://laraweb.net/surrounding/466/
http://note.onichannn.net/archives/648
Kotlinで二次元リストの行と列を入れ替える

Kotlin で二次元リストの行と列を入れ替える関数が欲しくなったとき、
大変参考になる [JavaScript の記事](https://qiita.com/kznr_luk/items/790f1b154d1b6d4de398) を発見しましたので、Kotlin版を作ってみました。

## 関数

```kotlin:function
fun <T> transpose(list: List<List<T>>): List<List<T>> =
    list.first().mapIndexed { index, _ ->
        list.map { row -> row[index] }
    }
```

## 使用例

```kotlin:sample
fun main(args: Array<String>) {
    val list1: List<List<Char>> = listOf(
        listOf('a', 'b', 'c'),
        listOf('d', 'e', 'f'),
        listOf('g', 'h', 'i')
    )
    
    println(list1)
    // => [[a, b, c], [d, e, f], [g, h, i]]

    println(transpose(list1))
    // => [[a, d, g], [b, e, h], [c, f, i]]
    
    val list2: List<List<Int>> = listOf(
        listOf(1, 2, 3),
        listOf(4, 5, 6),
        listOf(7, 8, 9)
    )
    
    println(list2)
    // => [[1, 2, 3], [4, 5, 6], [7, 8, 9]]

    println(transpose(list2))
    // => [[1, 4, 7], [2, 5, 8], [3, 6, 9]]
}
```
OpenVPN Access ServerでVPNを設定してもIPが元のままになってるときの対処法

Google Cloud上でOpenVPN Access Serverをデプロイして接続してみたのですがなんかIPがそのままで:thinking:になったので備忘録として軽く書いておきます。

##症状
OpenVPN Access Serverをデプロイし、ダウンロードしてきたプロファイルで接続したもののIPアドレスを見てみると変わっていない。

##対処法
Adminパネルに入って  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/380151/625a00a7-d379-a246-d85e-a39e23d086d9.png)
のVPN Settingsに行き、Routingセクションの
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/380151/09bfc38b-74ec-5673-e553-b7341e6533c3.png)  
のShould client Internet traffic be routed through the VPN?のところをNoからYesにする。

##おしまい
多分これでこの後Save Changeを押してそのあとに一回ページがリロードされてUpdate Running Serverというボタンが出てくると思うのでそれを押して変更を有効化させてあげたら終わりです。
【Rails】Twitterシェアボタンの作成方法

# 目標
![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/a56b59d8-7603-9cad-7fb1-b306b02b05d4.gif)

# 開発環境
・Ruby: 2.5.7
・Rails: 5.2.4
・Vagrant: 2.2.7
・VirtualBox: 6.1
・OS: macOS Catalina

# 前提

下記実装済み。

・[Slim導入](https://qiita.com/matsubishi5/items/b639ffddecc626856039)
・[Bootstrap3導入](https://qiita.com/matsubishi5/items/b117c95f4dd71340cc80)
・[Font Awesome導入](https://qiita.com/matsubishi5/items/a4c72f436e64ad106ee8)

# 実装

```slim:books/show.html.slim
= link_to "https://twitter.com/share?url=#{ request.url }&text=#{ @book.title }を、Twitterでみんなに広めよう！", class: 'btn btn-default', target: '_blank' do
  i.fab.fa-twitter style='color: #3399FF;'
  |  Twitterでシェア
```

`url=#{ request.url }`
➡︎ ツイート内に該当ページのURLを埋め込む。

`&text=#`
➡︎ ツイート内容を作成する。
Spring Bootで作成したアプリをコンテナー化して Azure App Serviceにデプロイする

# 内容
- Docker imageの作成
- Azure Container RegistryにDocker Imageをpushする
- Webアプリのデプロイ
- アプリを更新

# 参考にしたサイト
https://docs.microsoft.com/ja-jp/learn/modules/deploy-run-container-app-service/
https://spring.pleiades.io/guides/gs/spring-boot-docker/

# Docker imageを作成
- jarを作成する(jarの作成方法は[こちら](https://spring.pleiades.io/guides/gs/spring-boot-docker/)をご参照ください。)
- Dockerfileを作成する

```:Dockerfile
FROM openjdk:8-jdk-alpine
ARG JAR_FILE=target/*.jar
COPY ${JAR_FILE} app.jar
ENTRYPOINT ["java","-jar","/app.jar"]
```
- docker Imageを作成する

```bash
#Dockerfileが置いてあるディレクトリで実行
docker build --build-arg JAR_FILE=build/libs/*.jar -t hogehoge-web-app .
```

- dockerイメージを起動して動作確認

```
docker run -p 8080:80 -t hogehoge-web-app
```

- http://127.0.0.1:8080にアクセスして動作確認する

# Azure Container Registryにdocker Imageをpushする
### AzureポータルにてContainer Registryの作成
![貼り付けた画像_2020_06_22_18_24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149245/de09ca32-d8f7-eaea-6668-1767d1267794.png)

![コンテナー_レジストリの作成_-_Microsoft_Azure.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149245/9f5f1155-942f-bc38-494a-be9066592347.png)

### Azure Container RegistryにPush
- アクセスキーを取得する
![HoggehogeContainers___アクセス_キー_-_Microsoft_Azure.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149245/9adc9cf8-52ee-9185-bd3f-65498efa613f.png)


- Registryサーバにログイン

```
docker login HoggehogeContainers.azurecr.io --username HoggehogeContainers
# パスワードを聞かれるのでアクセスキーを取得するで取得したパスワードを入力する
```

- Tagを設定する

```
docker tag hogehoge-web-app HoggehogeContainers.azurecr.io/hogehoge-web-app:latest
```

- ImageをAzure Container RegistryにPushする

```
docker push HoggehogeContainers.azurecr.io/hogehoge-web-app:latest
```

# Webアプリのデプロイ
### Azure App Serviceの作成
![ホーム_-_Microsoft_Azure.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149245/c3bb7319-5371-eee0-fdab-bbc0fb6675a8.png)

![App_Service_-_Microsoft_Azure.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149245/ae72e800-44ea-0b8b-b1b1-2a1525c22cc4.png)

- Dockerコンテナーを選択してWebアプリを作成する

![Web_アプリ_-_Microsoft_Azure.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149245/af50321e-1fff-e476-3762-25eb26d04a0f.png)

#### コンテナーの設定
![hogehoge-web___コンテナーの設定_-_Microsoft_Azure.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149245/47d18940-01f3-1ed3-fcd2-929c9e1c70b7.png)

#### 動作確認
- 概要に記載されているURLにアクセスする

![hogehoge-web_-_Microsoft_Azure.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149245/3ab95876-a553-06aa-30a2-674b785bab7f.png)



# アプリを更新

- Docker ImageをビルドしてPushする

```
docker build --build-arg JAR_FILE=build/libs/*.jar -t hogehoge-web-app .
docker tag hogehoge-web-app HoggehogeContainers.azurecr.io/hogehoge-web-app:latest
docker push HoggehogeContainers.azurecr.io/hogehoge-web-app:latest
```
- 概要に記載されているURLにアクセスする
【Git】fatal: Not a valid object name: 'master'.の解決方法

##はじめに
Git初心者にとって、Git公式ドキュメントを読むのはなかなか大変なことです。 
なぜなら、専門用語と情報量が多く読む気がなくなるからです。
また、GitHubのドキュメントでは、英文で記載されている場合が有り
これも初心者が戦いを挑むには非常に厳しいです。
この記事では、専門用語を解説し英文はなるべく出さずにしたうえで、
この問題をを解決していきます。 

対象者
「fatal: Not a valid object name: 'master'.で積んだ」
「とりあえずGitの勉強をしたい」

というGit初心者向けです。
では、さっそく進めていきましょう！

専門用語
Git...どのファイルを追加したか削除したかなどを管理するツール。
GitHub...Gitと提携してみんなとやり取りができるWebサイト。
ブランチ...作業を枝分かれさせる事。
マスターブランチ...完成品用のブランチ。
リポジトリ...ファイルやフォルダを保存する場所。
コミット...どのファイルを追加したか削除したかなどを登録する事。


環境
OS: macOS Catelina (バージョン10.15.4)
ターミナル: Terminal.app

##1.原因
Gitで新しくブランチを切り分けようとした際に、
fatal: Not a valid object name: 'master'. エラーが表示されると思います。

原因は、<font color="Red">新しいブランチを作成するには最低1回はマスターブランチにコミットする必要があるからです。</font>
また、<font color="Red">最初のコミットが完了するまではマスターブランチが存在しません。</font>
何かをコミットするか、空コミットをしてマスターブランチを作成していきます。
<font color="Red">コミットする物がある場合は2-1へ。</font>
<font color="Red">空コミットの場合は2-2へ。</font>

##2.解決方法
###2_1.コミットする物がある場合
コミットしたい物を全て選択するには下記Gitコマンドを入力します。

```
git add .
```

コミットするには下記Gitコマンドを入力します。
xxxにはコミットのメッセージを入力します。

```
git commit -m "xxx"
```

コミットすると同時にマスターブランチが作成されたので、
GitHubのリポジトリに反映させます。

```
git push origin master
```

これでブランチが切り分けれます。

###2_2.空コミットの場合

空コミットはgit add.をせずに下記Gitコマンドを入力します。
xxxにはコミットのメッセージを入力します。

```
git commit --allow-empty -m "xxx"
```
コミットすると同時にマスターブランチが作成されたので、
GitHubのリポジトリに反映させます。

```
git push origin master
```
これでブランチが切り分けれます。

##おわりに
お疲れ様でした！ 
これで先に進めるようになりましたね。

この記事をきっかけに、より良いGit生活が送れていただければ嬉しいです！

##参考サイト一覧
###fatal: Not a valid object name: 'master'.の原因
[Git エラー「fatal: Not a valid object name: 'master'.」の対処法]
(https://qiita.com/takuma-jpn/items/fe205ff59cfa10746aa8)
[致命的：有効なオブジェクト名ではありません： 'master' - git]
(https://living-sun.com/ja/git/269792-fatal-not-a-valid-object-name-39master39-git.html)


###空コミットの作成方法
[Gitの最初のコミットは空コミットにしよう]
(https://qiita.com/NorsteinBekkler/items/b2418cd5e14a52189d19)
AzureFunctionsでCosmosDBの入力バインディングでInternal500エラー解消

CosmosDBのデータを入力バインディングで取得して表示するAzureFunctionをjsでしようとしたらInternal500エラーでつまづいたの解決メモ

###Error内容

```
Can't bind CosmosDB to type 'System.String'.
 Possible causes:
 1) Tried binding to 'Microsoft.Azure.Documents.Client.DocumentClient, Microsoft.Azure.DocumentDB.Core, Version=2.9.2.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35' but user type assembly was 'System.String, System.Private.CoreLib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e.
```

###functioin.jsonから下記を削除で解決らしい

``` json
"id": "",
"sqlQuery": ""
```

![NoName_2020-6-22_19-16-26_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/a2e316b2-7222-2dbd-13e8-86ccc5a81a59.png)

削除して保存しても、上書きできなかったです。。

###旧UIで構築して新UIで実行

関数のトップの概要から旧UIに切り替えして入力バインディングを設定

![NoName_2020-6-22_19-47-27_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/867b5807-7157-7ecb-fbe0-40b874e86293.png)

これで一覧取得の動作確認できました。。

``` js
module.exports = async function (context, req) {
    // 一覧
    context.res = {
        status: 200,
        body: context.bindings.inputDocument.filter(elm => !elm.isDeleted).map(elm => {
            return {
                id: elm.id,
                title: elm.title,
                content: elm.content
            };
        })
    };
};
```

![NoName_2020-6-22_19-53-29_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/ae41940e-f1c9-35ed-cf30-766aca5cb685.png)





###参考サイト
Azure Cosmos DB input binding for an Azure Function doesn't work
https://stackoverflow.com/questions/61988060/azure-cosmos-db-input-binding-for-an-azure-function-doesnt-work
Azure learning error: Can't bind CosmosDB to type 'System.String'
https://docs.microsoft.com/en-us/answers/questions/31217/azure-learning-error-cant-bind-cosmosdb-to-type-sy.html
SVProgressHUDをXcode11で使う

#メモ
SVProgressHUDをXcode11で実装しようとしたら、そのままだと動かないみたい。

#下準備
ターミナルを開いて`cd`コマンドでプロジェクトディレクトリに移動後、`pod init`を実行（podfileの生成）。
生成されたpodfileをテキストエディットとかで編集。
`pod 'SVProgressHUD'`を追加して、`pod install` か `pod update`を実行。
生成された`.xcworkspace`ファイルを開く。

#追加するコード

`AppDelegate.swift`に次のコードを追加。

```Swift:AppDelegate.swift
    var window: UIWindow?
```

`SceneDelegate.swift`の`scene(_:willConnectTo:options)`メソッド内に次のコードを追加。

```Swift:SceneDelegate.swift
    let appDelegate = UIApplication.shared.delegate as! AppDelegate
    appDelegate.window = self.window
```

#サンプルプロジェクト
サンプルプロジェクトはこちら
[https://github.com/rea-sna/SVProgressHUD_Sample](https://github.com/rea-sna/SVProgressHUD_Sample)

#動作画面
わかりやすくするために3秒後にHUDが消えるようにしています。
![ezgif.com-video-to-gif (6).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328477/2508f485-28e6-0792-e142-a880e9162722.gif)

# 参考記事
https://teratail.com/questions/216109
React開発環境構築(MacOS Mojava)

#Homebrewのインストール

 [Homebrew](https://brew.sh/index_ja) 

```
＄ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

###nodebrewのインストール
```
$ brew install nodebrew

$ nodebrew -v
nodebrew 1.0.1

$ nodebrew ls-remote
#インストール可能なnodeのバージョンが表示される
```

###nodeのインストール

```
$ nodebrew install-binary stable
```

インストールしnodeの有効化

```
$ nodebrew ls
v12.7.0

current: none


$ nodebrew use v12.7.0
v12.7.0

current: v12.7.0
```

##環境パスを通す

```
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
```

##nodeのバージョン確認

```
$ node -v
v12.7.0
```

##create-react-appをインストール

```
$ npm install -g create-react-app
```
MAMPのバーチャルホスト設定でShift_JISのHTMLに対応する

[MAMP](https://www.mamp.info/)のバーチャルホスト機能は複数サイトの開発・運用に非常に便利ですが、Webサイトの文字コードがShift_JISの場合には文字化けが発生してしまいます。
（現在ではUTF-8が一般的ですが、長い歴史のあるWebサイトの運用などでは稀に遭遇します）

バーチャルホストの設定をする httpd-vhosts.conf 内に下記のように記述することで、該当サイトのみShift_JISでの表示をおこなうことが可能です。

※ポート番号（`8001`）やルートディレクトリのパス（`/path/to/shift_jis_website/`）は適宜書き換えてください。

```apache:httpd-vhosts.conf

Listen 8001

<virtualhost *:8001>
    DocumentRoot "/path/to/shift_jis_website/"
    <Directory "/path/to/shift_jis_website/">
        AddType "text/html; charset=Shift_JIS" html
    </Directory>
</virtualhost>
```

なお、バーチャルホストの設定に関しては下記の記事が参考になります。

https://qiita.com/tsukishimaao/items/cab4caa065d901608856
JobAutoをつかって路線情報を取得する

# 路線情報を取得する

RPAの操作方法を覚えるミッションが発生したため、お勉強をすることにしました。ただ漫然とやっていては覚えのスピードが上がらないので、普段ものすごい気になっていたことをRPAを使っていろいろ調べることにしました。
今回はまず第一弾。ダイヤ乱れがおこるのはどの路線か？をRPAをつかって調査します。

## 使うもの
わたしが今使っているRPAはJobAutoです。JobAutoを使って運行情報を取得します。

## JobAutoでやりたいこと
JobAutoでやりたいことは、以下の３つ。

- 路線情報の取得
- 取得した情報を保存
- 路線情報の取得と保存を定期的に実施

## いざ作成
### 処理の流れを考える
路線情報がのっているページを表示して、WEBページ内に表示されているだけ取得と保存を繰り返し実行する、RPAのよくあるパターンを使うことにしました。

### 困ったこと
取得した情報を保存する方法に困りました。いつものパターンだと取得した情報はエクセルに保存しています。しかし、今回の場合だと、
- 取得した情報は常にエクセルの最終行から書かないとだめ
- エクセルだとデータの集計が面倒くさそう
と思ったので久しぶりにデータベースを使って保存することにしました。データベースなんて何年ぶりだろ。

## 出来上がったもの
出来上がったものが以下。アクションを設定するのに一番苦労したのが、データベースへのデータをInsertするSQLを書くところ。デバッグ実行したらいい感じに取得と保存ができていました。
![rosen.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/660351/5919d680-559b-df80-c1ea-5c3c6799826b.png)

## スケジュールの設定
できあがったもの（JobAutoではロボットというらしい）を定期的に行うように設定。ROBOWEBというスケジューラ（？）を使って設定しました。

## 作成後の感想
- エクセルに代わる保存の方法を考える
- InsertするSQLを作成する

この部分に時間を取られた。ロボット自体はさくっと作れた気がします。

## おまけ
保存したデータを分析した結果は、機会があればどこかで公開できれば。
React開発環境構築(Ubuntu18.04LTS)

#node.js npmのインストール
 

node.jsとnpmをインストールする

```
$ sudo apt install -y nodejs npm
```

nをインストール

```
$ sudo npm install n -g

$ sudo n stable
```

最初に入れた古い nodejs, npm の設定ファイルを消す。そして再ログイン。

```
$ sudo apt purge -y nodejs npm

$ exec $SHELL -l
```

node.jsのバージョンを確認する

```
$ node -v 
```

#create-react-appのインストール

```
$ sudo npm install -g create-react-app

>/usr/local/bin/create-react-app -> /usr/local/lib/node_modules/create-react-app/index.js
+ create-react-app@3.0.1
added 91 packages from 45 contributors in 1.799s
```
【Laravel】Carbon Data Missingエラーの対処

### 問題
日付を登録・更新する際に日付フォームのパラメータで、Carbon Data Missingエラーが発生した。
(datepickerを使用していて、渡ってくる値はY-m-d H:i)

このエラーは秒(second)が入っていないなどパラメータが不足することが原因で発生するため、パラメータに秒が含まれてないときの対処法を以下で説明する

### 概要
日付カラムを追加するため、モデルで$datesを設定している

```php:Model
protected $dates = [
    'public_start_at',
    'public_end_at',
];
```

$datesに設定しているとデフォルトでY-m-d H:i:sとなり、渡される値に過不足があると今回のようにCarbon Data Missingが起こってしまう

下記のようにdateFormatを設定することもできるが日付フィールド全体が'Y-m-d H:i'の形式になってしまうため、扱いづらい。

```php:Model
protected $dateFormat = 'Y-m-d H:i';
```

### 対処法

パラメータに渡すときは':00'を追加することで疑似的に秒を追加して対処する

```php:Store
 $news->public_start_at = $requestData['public_start_at'].':00';
 $news->public_end_at = $requestData['public_end_at'].':00';

```

ちなみにCarbonはY-m-d H:i:sの値しか受け付けない。(Y/m/dなどははじかれるので注意)

### 参考記事
日付ミューテタ
https://readouble.com/laravel/6.x/ja/eloquent-mutators.html

Laravel Carbon Data Missing
https://stackoverflow.com/questions/34968061/laravel-carbon-data-missing
新しいフレームワークを学ぶ時の勉強方法

新しいFWを学ぶ時の手順をマニュアル化できれば効率的に学習できるのでは？
という仮説をたて
備忘録として残してみた。


#学ぶ方向（ざっくり→詳細）

`1.フレームワーク自体の構造を学びそれから詳細について調べる。`

**手段/方法**

- 紙に構造を書き出す。
- データの流れを書く
- 各パーツについて調べる。

**ex)railsの場合**
- mvcを図で書いてみる。
- データの流れを書く
- モデル、コントローラ、ビューの役割について調べる。

`2.実際にフレームワークを使いcrudのあるアプリ()を作る`

**手段/方法**

- 実際にフレームワークを使いcrudのあるアプリを作る
- はじめに学んだ構造に対して自分が実装する機能のデータの流れを当てはめる。

**ex)railsの場合**
- メモアプリを作る記事を探す。
- 処理の流れ解説する記事をいくつか探す
django-debug-toolbarの設定（自用）

### インストール
$ pip install django-debug-toolbar

### settings

```settings.py
# DEBUG ONのsettings.py
def show_toolbar(request):
    return True

    INSTALLED_APPS += (
        'debug_toolbar',
    )
    MIDDLEWARE += (
        'debug_toolbar.middleware.DebugToolbarMiddleware',
    )
    DEBUG_TOOLBAR_CONFIG = {
        'SHOW_TOOLBAR_CALLBACK': show_toolbar,
    }
```
### project/urls.py

```
import debug_toolbar
urlpatterns += [
    path('__debug__/', include(debug_toolbar.urls)),
]

```
インスタンスセグメンテーションとは

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396969/d649bbd3-cfbf-7bde-82ab-0512fb4f50e0.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396969/ba0dffd7-810a-1fb3-435f-72af6b85cad8.png)


https://engineering.matterport.com/splash-of-color-instance-segmentation-with-mask-r-cnn-and-tensorflow-7c761e238b46

https://towardsdatascience.com/a-hitchhikers-guide-to-object-detection-and-instance-segmentation-ac0146fe8e11
AtCoder beginner Contest 171

A~Dまでを記載します。

##[A - αlphabet](https://atcoder.jp/contests/abc171/tasks/abc171_a)

pythonだと「isupper（）」を使うことで一瞬で解けます。

```Python:Python
A = input()

if A.isupper():
    print('A')
else:
    print('a')
```

##[B - Mix Juice](https://atcoder.jp/contests/abc171/tasks/abc171_b)

貪欲法？
金額の最小の商品から最適解の処理をひたすら繰り返します。

```Python:Python
N, K = list(map(int, input().split()))

A = list(map(int, input().split()))

A.sort()

ans=0
for i in range(K):
    ans+=A[i]

print(ans)
```

##[C - One Quadrillion and One Dalmatians](https://atcoder.jp/contests/abc171/tasks/abc171_c)

- ぱっと見て、N進数の計算だと閃きます。基準は26文字です。
- 基本的な考え方はN進数の計算処理を適応します。
- 全探索によるO(N)になります。

再起処理の記述にすると綺麗に記載できると思われます。
- 基準値26以下を終了条件にします。
- zの数字のみ個別に対応する必要があります。

26にてzの文字列結合を行います。
その後、26/26=1とし、'a'が表示されることに気付きます。
つまりzの時のみN/26の商の部分から１を引くことで計算が上手く行く事に気づく事ができます。

- z以外の数字はN/26の商で対応できます。

```Python:Python
def dfs(num):
    if num<=26:
        return chr(96+num)
    elif num%26==0:
        return dfs(num//26-1)+chr(122)
    else:
        return dfs(num//26)+chr(96+num%26)
 
N = int(input())
 
print(dfs(N))
```

##[D - Replacing](https://atcoder.jp/contests/abc171/tasks/abc171_d)

- 全探索だとO(NQ)で最大10億を超えるループになります。
- つまりO(N)の形に処理を変更しなければなりません。
- Aの入力にて渡される要素の個数を計測
- B、CにてAの要素が変更される数だけ合計値を増減する
- NのMAX値が100000なのでmapなどを使用する際には100001の要素を確保しましょう。

```Python:Python
N = int(input())
A = list(map(int, input().split()))
Q = int(input())

SUM=0
numbers=[0]*100001
for i in range(N):
    a=A[i]
    numbers[a]+=1
    SUM+=a

B=[0] * Q
C=[0] * Q
for i in range(Q):
    B[i],C[i]  = list(map(int, input().split()))

for i in range(Q):
    b = B[i]
    c = C[i]

    SUM = SUM - b * numbers[b]
    SUM = SUM + c * numbers[b]
    numbers[c] += numbers[b]
    numbers[b] = 0
    print(SUM)
```

##[E - Red Scarf](https://atcoder.jp/contests/abc171/tasks/abc171_e)

- 排他的論理和（xor）とは

比較した際に異なるbitなら1を返す回路の事です。
例えば、3が0011、5が0101なら、

| a | b | c |
|:--|--:|:-:|
| 0 | 0 | 0 |
| 0 | 1 | 1 |
| 1 | 0 | 1 |
| 1 | 1 | 0 |

0110は6になります。
また、xor回路は同じ値を処理した際、３ ^ 3 = 0となります。
0011と0011は全て同じbit配列になるからです。
このxorを今回の問題にて使用します。

N個の要素があるとして入力からNを受け取ります。
N個の要素にて、i番目以外の要素をxorにて処理した際の値がAiとして入力として受け取る事ができます。

入力された値をA1, A2, A3, ...., Anとした際、
求める値を　X1, X2, X3, ...., Xnと対応するとして

|  X |  A |                 C |
|----|----|:-----------------:|
| x1 | A1 |      X2 ^ X3 ^ X4 |
| x2 | A2 | X1 ^      X3 ^ X4 |
| x3 | A3 | X1 ^ X2 ^      X4 |
| x4 | A4 | X1 ^ X2 ^ X3      |

という表ができます。
そして、X1 ^ X1 = 0 を利用し、X1 ^ X1 ^ X1 = X1となる事を思い出してください。

A1 ^ A2 ^ A3 ^ A4 =
(X2 ^ X3 ^ X4) ^ (X1 ^ X3 ^ X4) ^ (X1 ^ X2 ^ X4) ^ (X1 ^ X2 ^ X3) =
（X1 ^ X2 ^ X3 ^ X4）

となります。そして、
（X1 ^ X2 ^ X3 ^ X4） ^ A1 = X1

を求める事ができます。
上記をプログラミングすると、

```Python:Python
N = int(input())
A = list(map(int, input().split()))

X = 0
for i in range(0, N):
    X = X ^ A[i]

for i in range(0, N):
    print(X ^ A[i], end=' ')

print('')
```
javascript学習(2020/06/22)

###jQuery
jQueryとはjavascriptのプログラミングでよく行われる定型的な処理を書きやすくしてくれるオープンソースのライブラリです。イベントの設定などのDOM操作やAjaxを得意としている。
###jQuery　要素を取得する$()メソッド

```JavaScript:sample.js
$('セレクタ')
```
###jQuery 取得した要素にイベントを設定

```JavaScript:sample.js
$('セレクタ').on('イベント名',function(){
  イベントが発生したときの処理
});
```

###よく使うjQueryメソッド
コア機能

|メソッド|概要|
|:----|----:|
|$('セレクタ')|セレクタにマッチする要素をすべて取得|
|$(配列またはオブジェクト)|配列のデータやオブジェクトのプロパティをすべて取得する
|$.ajax()|非同期通信をする|

トラバーサル($()で取得した要素から相対的な位置関係で別の要素を取得すること)

|メソッド|概要|
|:----|----:|
|next()|すぐ次の弟要素を取得する|
|find('セレクタ')|子孫要素の内セレクタにマッチする要素を取得する|
|children('セレクタ')|子要素をすべて取得する。パラメータにセレクタが含まれている場合、親要素がそのセレクタにマッチするときだけ取得する|
|each(function(){...})|取得したすべての要素や配列のデータなどに｛･･･｝を実行する|
|parent('セレクタ')|親要素を取得する。パラメータにセレクタが含まれている場合、親要素がそのセレクタにマッチするときだけ取得する。|
|siblings()|兄弟要素をすべて取得する|
|prev()|すぐ前の兄要素を取得する|


マニピュレーション(HTMLやcssｗｐ操作する機能)

|メソッド|概要|
|:----|----:|
|addClass('クラス')|クラスを追加する|
|removeClass('クラス')|クラスを削除する|
|toggleClass('クラス')|取得した要素にクラスがあれば削除、なければ追加する|
|text('書き換えるテキスト')|テキストコンテンツを読み取る|
|hasClass('クラス')|取得した要素にクラスがあるかどうかを調べる|
|prepend(要素)|取得した要素に子要素を挿入する。すでに子要素がある場合はそれよりも前に挿入する|
|append(要素)|取得した要素に子要素を挿入する。すでに子要素がある場合はそれよりも後に挿入する|
|attr('属性名','値')|要素の属性に値を設定する|
|attr('属性名')|要素の属性の値を読み取る|
|remove()|要素を削除する|


イベント

|メソッド|概要|
|:----|----:|
|on('イベント',function(){...})|イベントを設定する|
|event.preventDefault()|イベントの基本動作をキャンセルする(javascriptメソッド)|
リモートワークの議事録を自動で取ろうと努力した記録

# 前提
Macを使っての話になります。

# 背景
議事録が大変だ！

ということで、世の中にはたくさん議事録ツールが存在します。
が、会話内容を「よくわからないツールに流したくない」という理由でGoogleドキュメントの音声入力を使ってみます。

少し使ってみただけでも、中々の精度を保っています。

![スクリーンショット 2020-06-19 19.06.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178351/ed85eafa-22dc-b949-6c59-329e22f47346.png)

ですが、これにはいくつか問題がありました。

1. 自分の声しか拾わないため、メンバーの会話を拾って記述することが難しい
2. 改行や句読点などは非対応

2番目は、後で清書したりすることもできるため一旦は問題じゃないかなと思っています。
1番目の、他人の声が拾えないのはちょっと困りますね。

別のスマートフォン端末で声を拾って議事録を取る方法もあるらしいですが、今回はちょっとPC本体しか使えないのでこの方法は取りません。できるならこれが一番楽だと思います。

> (参考) https://hashikake.jp/articles/how-to-google-docs-ep01

ここだけ解決していきたいと思います。

## Googleドキュメントに全員の音声をのせる
そもそもGoogleドキュメントの音声入力のソースがどこから拾ってきているのかを調べると、デフォルトで設定されているマイクになっています。

<img width="389" alt="スクリーンショット 2020-06-22 14.42.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178351/d1f2a455-7c33-5d57-4d34-e9e0a563c7c0.png">

つまり、 「入力ソースに全員の音声を載せた音声を渡す」 ということができれば問題なさそうですね。

discordやYoutubeの音声を、自分の声と混ぜて使う方法などで試してみます。

## インストール
以下２つをインストールします

#### Soundflower
* 音声デバイスを作成する。入力/出力関係なく使える。

#### LadioCast
* Soundflowerで分離した音声から選択したものをミックスして出力する仮想ミキサー。

## 設定
Macの出力音を、 `Soundflower(2ch)` にします。
![スクリーンショット 2020-06-22 15.58.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178351/8236b5c1-2c63-b6cc-ce9b-2de96bee0455.png)

これで普段Macから流れてる音が、 `Soundflower(2ch)` に流れます。相手の声がここに乗っている状態ですね。

次に、 `Soundflower(2ch) + 自分の声` を `Soundflowr(64ch)` に流すようにLadioCastで設定します。

![スクリーンショット 2020-06-22 16.52.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178351/211c6457-2b14-af57-674e-f54411bcd648.png)

* 入力1 : Soundflower(2ch)
  * メイン/Aux1
* 入力2 : MacBook Proのマイク
  * メイン
* 出力メイン : Soundflower(64ch)
* 出力Aux1 : 外部ヘッドフォン

メイン に、相手の声と自分の声を混ぜます。
Aux1 に、自分が聞く予定の声を選択します。

イメージとしてこんな感じです
<img width="574" alt="スクリーンショット 2020-06-22 18.02.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178351/edf8febf-4917-903f-c8f4-ffc5425a798e.png">

そして、Googleドキュメントはデフォルトの入力サウンドを読みに行くため両方の音声を混ぜた `Soundflower(64ch)` を選択します。

![スクリーンショット 2020-06-22 18.04.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178351/e8f27282-2baf-4dc6-d32e-2e4192a46c1e.png)

これで相手の声と自分の声が両方GoogleDriverで読み取れるようになりました！

試しにYoutubeのニュースを聞き取らせてみます。

![20200622_2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178351/55c0bf89-e10b-a6a5-dd3e-68325f90497e.gif)

> https://www.youtube.com/watch?v=6DjzVofmn3o&t=60s

ほぼ完璧に聞き取れました！

## 実戦投入してみてわかった問題点
自分の声の入力も、音声での入力も問題なかったため、２つを組み合わせた議事録を実践投入してみたところ。。結果としては微妙な結果になりました。

#### 1 音声入力が途中で止まる
相手の声と、自分の声の入力デバイスが違うものを無理やり１つに合体させているからか、途中で音声入力が止まります。一度迷子になったら、二度と動き出しません。

再度入力し直しボタンを押せばいいのですが、ちょっと現実的じゃないですね。

#### 2 精度が悪い
２つの声を混ぜると、精度が著しく悪くなります。もう言ってることと8割くらい合わないようなレベル。

やっぱり、本来の使い方じゃないので無理やり感は否めないですね。。

## 解決策
そもそも、Google音声入力中は操作できないという問題もあります。つまり、議事録担当がキーボードやマウスを一切触れない事になります。

会議参加者のうち、一人全く何もできない状態が生まれてしまうのでそもそも議事録専用PCを用意してそこでやるのがいいかなと思いました。

そうすれば、全て外部からの入力音声で書き起こすことができ、その場合だと高い精度で議事録を書き起こすことができます。操作できないというデメリットも潰すことができます。

うまくMixして議事録の自動化を実現できている方がいたら教えてほしいです。

> (参考)https://irilyuu.com/mac-ios/mac/soundflower-ladiocast/
Yay! I'm on Rails!

# はじめに
初`Ruby on Rails`記念です。
# on Rails!
![rails.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538241/242d3045-89b6-28ef-b0bc-7cd4af0ca941.png)
先輩諸氏からすれば見慣れた画面かもしれませんが、嬉しいです。
# 環境
```raspberrypi.bash
pi@raspberrypi:~ $ uname -a
Linux raspberrypi 5.4.45-v7+ #1321 SMP Wed Jun 10 17:33:27 BST 2020 armv7l GNU/Linux
```
見ての通り、
`raspberry pi 3 B+`上の`raspberrypi`OS
# 嵌ったところ
例によって`sqlite`で嵌っております。
*[こちら -Qiita](https://qiita.com/___inon_/items/7566cc638d47ba99e23d)*を参考にして乗り切りました。

`Gemfile`の編集

```Gemfile
gem 'sqlite3', '1.3.13'
```
`bundle install`コマンド

```bundle.bash
$ sudo apt-get install libsqlite3-dev
$ sudo gem install sqlite3-ruby -- --with-sqlite3-include=/usr/include
$ gem install sqlite3 -v '1.3.13'
$ bundle install --path vendor/bundle
```
# まとめ
+ 初RoR
+ sqliteで嵌った
+ 今回はLAN上なので次は外部サーバに挑戦

参照したサイト
*[【解決】An error occurred while installing sqlite3 (1.3.11), and Bundler cannot continue. Make sure that gem install sqlite3 -v '1.3.11' succeeds before bundling. -Qiita](https://qiita.com/___inon_/items/7566cc638d47ba99e23d)*
DoozyUIでインスペクターからGameEventを送信する


手っ取り早くInspectorからDoozyのゲームイベントを送信したい！

自作コンポーネントだったり、他人のアセットだったり、諸事情でUIButtonが使えない場合などにどうぞ。


## やりかた
+ `KeyToGameEvent`コンポーネントを追加
+ `InputMode`を`None`に設定
+ OnClick()等のUnityEventに自分を追加して、`KeyToGameEvent.Execute`メソッドが実行されるように設定

参考画像
<img width="511" alt="スクリーンショット 2020-06-22 18.27.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54417/64853bc9-2680-ddca-0565-68f7af4d439c.png">
firebase Storageへのファイル保存

## はじめに
Reactでfirebaseへファイル(画像)を保存してみようと思い、試してみましたので、同じような初心者の方に向けて記事を書いてみました。

コードはこちら
https://github.com/daikidaiki1583/Works/tree/master/work11
(コメントが残ってあったりして見苦しい部分があるかと思いますが目をつぶって頂ければ幸いです)また、ご意見等あれば頂ければと思います！！


では早速...

## putメソッド

```JavaScript
    put(File)
```
これがストレージにファイルを保存するためのメソッド。
引数にはFileまたはBlobインスタンスを指定する必要がある。(今回Blobは試してないです)
このputメソッドを実施するために必要な知識を以下で説明。

## File()
https://developer.mozilla.org/ja/docs/Web/API/File/File

```JavaScript
    new File('①配列','②name','③option')
```
putメソッドの引数として渡すためにFileオブジェクトを渡す必要がある。<br>

①ではinputタグのtype='file'で取得した配列を追加
②はよくわからないけど、'.png'とした。
③はここでは必須項目。typeを指定しないと、ファイルの種類がapplication/octet-streamになり、firebaseストレージ内でファイルの種類が特定されなかった。ここではtype:image/pngと指定した。

```JavaScript
    const file = new File(this.file.current.files,'.png',{type:'image/png'})
    //変数fileをputメソッドの引数として渡す
    //this.file.current.filesはinputタグtype='file'で取得した配列を取得するコード
```

## ストレージ参照の作成
https://firebase.google.com/docs/storage/web/create-reference<br>
やっていることとしては、ストレージへの通り道を作っているイメージです。<br>

Reactということで、ClassComponentのconstructor内部でrefメソッドを変数に代入して使いやすくした。下記のように、続けてchildメソッドを実行。引数としてストレージ内部のフォルダ名(ここではimages)と、ストレージに保存する画像につける名前(ここではimages3)をpathの形式で指定。その後に続けて前述のputメソッドを実行することでファイルをストレージに保存できる。<br>
putメソッドはPromiseが返るようなので、thenとcatchで成功失敗に備える。

```JavaScript
　//firebaseに関係ある部分のコードの抜粋です。

  constructor(){
    super()

    this.storageRef = storage.ref()

  }

  this.storageRef.child('images/images3').put(file)
  .then(snapshot=> console.log('成功'))
  .catch(error => console.log(error))

```
## ※認証について
firebaseStorageの初期設定では、認証されたユーザーしかストレージへのファイルの読み書きができない設定になっている。今回は認証機能をコーディングせずfirebaseStorageを使用したため、firebaseコンソールでルールを書きかえる必要があった。<br>



```
    //初期設定
    rules_version = '2';
    service firebase.storage {
    match /b/{bucket}/o {
        match /{allPaths=**} {
        allow read, write: if request.auth != null;　//認証されたユーザーだけが読み書きできる。
        }
    }
    }
```

```
    //変更後　認証不要な設定に書き換えた
rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
    	allow read,write;
    }
  }
}
```


## 終わり

誰かの役に立てればうれしく思います！
JSONテキストを整形する方法について

# JSONテキストを整形する方法について

JSONテキストを整形したい場合は様々なシチュエーションであると思いますが、
それぞれのケースにおける成形方法を説明致します。

###前提条件
macOS
※但し、未検証なだけでWindows環境でも[jq](https://stedolan.github.io/jq/)は利用できます。


## 事前準備
<b>jqをインストールする<b>

```shell
$ brew install jq
```

## Vimで整形したい場合
コマンドラインで以下を入力する

```shell
:%!jq
```
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56472/3b922edb-acd6-658f-b143-f682f33bb571.gif">

## VSCodeで整形したい場合
JSONを行選択して`=`を押す
もしくはJSONを行選択してコマンドパレット(右クリック、またはショートカットキーから)を開き、`Format Document`を選択する

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56472/e39fc882-4723-acbe-2f00-863499176753.gif">

## クリップボードのJSONを整形したい
ターミナルから以下のコマンドを実行する

```shell
pbpaste | jq
```

※pbpasteというコマンドでクリップボードにコピーしている内容を出力することが出来ます。
※試したことはないですが、Windowsでも[pbpaste](https://github.com/ghuntley/pasteboard)は使える様です。
<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56472/802a7395-4224-7d54-2d61-db5e22bf32bc.gif">

## ターミナルで使える便利なエイリアス

``` shell
alias pbjq='pbpaste | jq'
alias pbjqccopy='pbpaste | jq -c | pbcopy'
```

`pbjq`をターミナルで実行するとクリップボードに設定されているJSONを整形してターミナルに出力する。

`pbjqccopy`をターミナルで実行すると、クリップボードに設定されているJSONをワンライナーに整形してクリップボードの内容を置き換える。

例. 以下のJSONをクリップボードにコピーする。

```JSON
{
  "name": "Tanaka",
  "age": 26
}
```

`pbjqccopy`を実行する。

```JSON
{"name":"Tanaka","age":26}
```

クリップボードが上記の内容にコンバートされる。

ターミナルでHTTPリクエストの引数にJSONを使いたい場合に重宝します。