OmniAICreator/Qiita-1.07M huggingface dataset:
PHPでmkdir時に4桁のパーミッションを文字列型の変数の値より指定するには


PHPのmkdir関数でディレクトリを作成する際に8進数4桁のパーミッションを指定する場合、mkdir関数の第2引数へ
```
mkdir('/var/dat/hogefuga', 0755, true);
```
のような形で指定することで、0755(rwxr-xr-x)というパーミッションのディレクトリが作成されます。
変数でセットする場合も、
```
$perm = 0755;
mkdir('/var/dat/hogefuga', 0755, true);
```
とすることで、上記と同様のパーミッションでディレクトリを作成することができます。
しかし、変数が文字列型である場合、例えば
```
$perm = '0755';
mkdir('/var/dat/hogefuga', 0755, true);
```
である場合、0755(rwxr-xr-x)とならず（例えば、-wxr---tのようになり）、意図したパーミッションとならない場合があります。
変数が文字列型であるケースとしては、Webシステムから送信された値や、DBやAPI、ファイル等から取得した値を使用するケースが挙げられます。
## 原因
文字列型の値は、10進数の数値として扱われます。つまり、0755(8進数)ではなく、755(10進数)として扱われます。
これにより、意図したパーミッションでディレクトリを作成することが出来ません。
## 対応
octdec関数で文字列型を8進数の整数へ変換することで、この問題を解消することができます。
```
<?php
$perm = '0755';
$mydir = '/var/dat/hogefuga';
mkdir($mydir, octdec($perm), true);
```
## 参考
- https://stackoverflow.com/questions/28672096/change-0777-string-to-0777-octal-literally
パパが if を減らすにはどうすればよいのか

[「パパの書くプログラムってif文すごく少ないね」 → 「よく気がついたな。if文をあまり書かないよう設計すると皆に喜ばれるぞ」](https://togetter.com/li/1474046)

この記事が話題になっていて、うんうん子供の頃からこういう所を意識して書いてたら良いコードが書けるようになりそうだなーなんて思ってみてたら、想像とちょっと反応が違って[割と否定的な意見](https://b.hatena.ne.jp/entry/s/togetter.com/li/1474046)が多かったので具体的に if を減らすとはどういうコードなのかを簡単に紹介してみます。

ちなみに全く特別な手法ではなくむしろ普段から皆こういうコードを書いていると思うし、元ツイートの人がこういう書き方を意識しているのかはわからずまた手法も無数にある為、あくまでも参考としての1例として見てもらえれば :pray:

## お父さんな、ポリモーフィズムで食っていこうと思うんだ :man_tone1: 

それでは定番の動物で簡単なサンプルを書いていきます。

```golang
package main

import (
	"fmt"
)

type Animal struct {
	Name string
}

func main() {
	dog := Animal{Name: "dog"}
	cat := Animal{Name: "cat"}

	makeSound(dog)
	makeSound(cat)
}

func makeSound(a Animal) {
	if a.Name == "dog" {
		fmt.Println("わんわんお")
	} else if a.Name == "cat" {
		fmt.Println("にゃー")
	}
}
```

この程度だと別にこれでも良いのですが、例えば他にも処理が増えた場合や、動物の種類が増えた場合に関数の種類x動物の種類毎に処理を修正していくことになるため、共通の interface を定義します。

```golang
package main

import (
	"fmt"
)

type Animal interface {
	Name() string
	Sound() string
}

type Dog struct {
	name string
}

func (d Dog) Name() string {
	return "いぬ"
}
func (d Dog) Sound() string {
	return "わんわんお"
}

type Cat struct {
	name string
}

func (c Cat) Name() string {
	return "ねこ"
}
func (c Cat) Sound() string {
	return "にゃー"
}

func main() {
	dog := Dog{name: "dog"}
	cat := Cat{name: "cat"}

	name(dog)
	name(cat)
	makeSound(dog)
	makeSound(cat)
}

func name(a Animal) {
	fmt.Printf("わたしのなまえは%sです\n", a.Name())
}

func makeSound(a Animal) {
	fmt.Println(a.Sound())
}
```

これでコード上から if を消すことが出来ました。は？こんなの当たり前じゃんと思うかもしれないですけど、あの話って if を switch にかえるとか三項演算子で書くとか業務を改善してとかそういう事ではなく、多分こういう当たり前のことを言っているんだと思います。

お父さんな、やっぱり Youtuber で食っていこうと思うんだ。
vue.jsでmomentを使ってみた

[Vue.js(Vue CLI)](https://cli.vuejs.org/)で[moment.js](https://momentjs.com/)を使ってみたときのメモです。

## やっておくこと
基本的なところはスッとばします。

```sh
$ vue create vue-moment-sample
$ yarn add moment
```



## サンプルソース
今回はサンプルなので、コンポーネントではなく`App.vue`にて試しています。

```vue:.src/App.vue
<template>
  <div id="app">
    <h1>MOMENT SAMPLE</h1>
    <h2>現在日</h2>
    <p>{{ getTime | moment }}</p>
    <h2>生まれた日</h2>
    <p>{{ "1990-10-23 00:00:00" | moment }}</p>
    <h2>生まれてから</h2>
    <p>{{ elapsedDate(getTime , "1990-10-23") }}日</p>
  </div>
</template>

<script>
import moment from "moment" //利用するコンポーネントでインポート

export default {
  name: 'App',
  computed: {
    getTime() {
      return moment()
    }
  },
  methods: {
    elapsedDate(a, b) {
      return moment(a).diff(moment(b), 'days', false)
    }
  },
  filters: {
    moment(date_str) {
      moment.locale('ja')
      return moment(date_str).format('YYYY-MM-DD')
    }
  }
}
</script>
```

## フォーマットについて
- `moment().format('YYYY/MM/DD')`というような形でフォーマットを指定する。

日本語でよく使いそうなフォーマットを整理してみた。

| 日時  | フォーマット | 備考 |
|:-----|:-----------|:----|
| 2020/2/28 | `YYYY/M/D` | |
| 2020-02-28(金) | `YYYY-MM-DD(dd)`| `moment.locale('ja')`が必要|
| 2月28日 金曜日 | `MMMDo dddd` | `moment.locale('ja')`が必要|
| 2/28 14:25 | `M/D HH:mm` | 0時を24時として扱いたい場合は`HH`の代わりに`kk`を用いる |
| 2/28 午後 14:25 | `M/D(dd) a hh:mm` | 英語表記の場合は、`a`でam/pm、`A`でAM/PM

## わかったことメモ
- `filters`として定義してフォーマット(`YYYY-MM-DD`など)を整えるのに使える
- 時間の加算・減算などの処理のときも、活躍しそう
- 日本語表記など特定語表記を使いたい場合は`moment.locale()`を使う

## 調べてることメモ
いったんググっても出てこなかったところは、少しずつ使いながら調べていく。

- 経過時間を`moment(moment(to).diff(moment(from))).format('HH:mm:ss')`のようにしても、正しく表示されない(9時間多く表示されてしまう)。
- `main.js`などで一度`moment.locale('ja')`しておけば良いのか？
- `vue-moment`や`vue-cli-plugin-moment`などはどう使う？

## 参考
- [Moment.js Documentation](https://momentjs.com/docs/)
- [全61件！Moment.js日付フォーマット実例 | CONSOLE DOT LOG](https://blog.capilano-fw.com/?p=908#i-5)
JQuery-UIでのダイアログ表示(１)

JQuery-UIでダイアログを表示する方法を調べたので投稿

- headタグにJQuery、JQuery-UIのCDNを記載する  

```html:JQuery、JQuery-UIのCDN
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
```
- bodyにボタンとダイアログを記述、dialog_msgがダイアログ部分。  
各種の言語で以下のようなhtml文が作成するようにすれば
サーバー側の言語がなんであれブラウザ側は同じになります。

```html:dialog.html
<div id="dialog">
<input type="button" value="dialog" onclick="view_dialog('dialog_msg', false, false)">
<div id="dialog_msg" title="dialog" hidden>ここがダイアログに表示される</div>
</div>
```
- onclickで呼び出されるJavascriptの関数。  
idと閉じるボタンの表示/非表示の切り替え、モーダルかどうかを引数で渡すようにしている。

```javascript:dialog.js
function view_dialog(id, is_close, is_modal)
{
   var opt = {};
   //閉じるボタンの非表示
   if(is_close){
      opt.dialogClass = "no-close";
   }
   //モーダル表示
   opt.modal = is_modal;
   
   $("#"+id).dialog(opt);
}
```

他のオプションに関してはまた次回
JQuery-UIの詳細は以下のリンクを参照
[https://api.jqueryui.com/dialog/](https://api.jqueryui.com/dialog/)
tetst

####はじめに

とかいらずに、

速攻でGCPのVMにユーザーを作ってログインしてみましょう。

コンソールを使用するよりも、コマンドだけで完結するとカッコイイですネ！！
これができると何が良いかはシリません！！


###前提条件

-  VM（centos7）はすでに作成している
-  ローカルPCはMAC(SDKインストール済み)



####1:インスタンスの起動
```
gcloud compute instances start VM名
```


####2:ユーザー作成
まずはVMに接続

```
gcloud beta compute ssh --zone "ゾーン名" "VM名" --project "プロジェクト名"
```

ユーザー作成

```
sudo useradd ユーザー名
```

ユーザーの一覧確認

```
cat /etc/passwd
```

ローカルPCへ

```
exit
```


####3:鍵を作成ー登録


鍵を作成

```
ssh-keygen -t rsa -f ~/.ssh/my-ssh-key -C "ユーザー名"
```

`my-ssh-key`は好きな名前でOK
公開鍵と秘密鍵が作成されます。


秘密鍵の権限を変更

```
chmod 400 my-ssh-key
```

公開鍵をコピる

```
cat  ~/.ssh/my-ssh-key.pub
```

鍵をVMに登録

```
gcloud compute instances add-metadata インスタンス名 --zone ゾーン名 --metadata "^#&&#^ssh-keys=ユーザー名:ssh-rsa 鍵本体 ユーザー名" 
```


####4：作成したユーザーでログイン

外部IPを確認
（EXTERNAL_IP　外部IPです。）

```
gcloud compute instances list
```

ログイン

```
ssh ユーザー名@外部IP -i ~/.ssh/my-ssh-key
```

成功できました？
これでターミナルのみでログインができました。


wao
単体テスト、統合テスト

テストコードを書く際の原則
①各exampleで期待する値は1つ
②期待する結果をはっきりわかりやすく記述
③起きて欲しいことと起きてほしくないこと両方をテストする
④境界値をテストする
⑤可読性を考えつつ、適度にDRYにする

テストを記述していく上でのポイント
・example１つにつき、結果を一つだけ期待している
・どのテストも明示的である
・できる値が返ってくるときと、そうでないときを両方テストする
・FactoryBotを上手く利用して、すっきりとまとめる
・Fakerでダミーデータを作成する
・テスト内で使用する変数は、インスタンス変数として定義するのではなく、letを使用する


コントローラーのテストの流れ
describe ◯◯Controller do
  describe 'HTTPメソッド名 #アクション名' do
    it "インスタンス変数は期待した値になるか？" do
　　"擬似的にリクエストを行ったことにするコードを書く"
      "エクスペクテーションを書く"
    end
    it "期待するビューに遷移するか？" do
      "擬似的にリクエストを行ったことにするコードを書く"
      "エクスペクテーションを書く"
    end
  end
import pandasでエラーがでる。

import pandasができなくなったので対処をメモする。
-

import pandas　をするとしたのようなエラーが出てくる。

```
AttributeError: module 'pandas' has no attribute 'compat'
ImportError: cannot import name 'NA'
```
上のようなエラーが出てきたので困ったので対処をメモしておく。

```
pip install -U pandas
```
[pythonでpandasのimportエラー](https://teratail.com/questions/113563)
無理

```
!pip uninstall pandas -y
```
[pandasがインポートできない件について (AttributeError)](https://teratail.com/questions/154152)

無理


[Can't get jupter to start #2344](https://github.com/jupyter/notebook/issues/2344)
上の記事を参考にして

```
pip install --upgrade pip
pip uninstall python-dateutil
pip install python-dateutil

```
これで一応
import pandas ができるようになったが、

```
ERROR: heroku 0.1.4 has requirement python-dateutil==1.5, but you'll have python-dateutil 2.8.1 which is incompatible.
ERROR: boto3 1.9.120 has requirement botocore<1.13.0,>=1.12.120, but you'll have botocore 1.13.8 which is incompatible.
ERROR: awscli 1.16.272 has requirement rsa<=3.5.0,>=3.1.2, but you'll have rsa 4.0 which is incompatible.
```

以上のようなエラーがでたので、他に響いていそう？
とりあえずはスルーした笑
DialogFragmentでViewBindingを使う

Android Studio 3.6から [ViewBinding](https://medium.com/google-developer-experts/exploring-view-binding-on-android-44e57ba11635)が使えるようになりました。

今回はDialogFragmentでViewBindingを使う方法を調べました。

# サンプルコード

```HogeDialogFragment.kt
class HogeDialogFragment : DialogFragment() {
    private lateinit var binding: FragmentHogeDialogBinding

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        super.onCreateDialog(savedInstanceState)
        binding = FragmentHogeDialogBinding.inflate(requireActivity().layoutInflater)
        val dialog = Dialog(requireContext())
        dialog.setContentView(binding.root)
        return dialog
    }
...
}
```
機械学習の準備

今日は機械学習の理解を深めようと
まず環境として色々インストールしました。

# Flask
pythonの軽量なウェブアプリケーションフレームワーク

# Heroku
WEBアプリの公開を簡単にしてくれる画期的なサービス

#  Visualbox
仮想環境の準備

# Vagrant 
Visualboxを利用するためのソフトウェア
Javaで文字コード変換してハッシュやBase64エンコードする方法

# サマリ
Javaで文字コード変換してハッシュやBase64エンコードする方法の説明。
結論としては以下のようにすればよい。

例）"文字列"をSJISとしてBase64エンコードする場合

```
Base64.getEncoder().encodeToString("文字列".getBytes("SJIS"));
```


# 目的

-「文字列をSJISに変換してハッシュ化」という要求に対して以下のような頓珍漢なことをしてしまった。
　`new String("文字列".getBytes("UTF-16"), "SJIS")`
- JavaのStringでの文字コードの扱いについて以外にわかっていなかったので整理。

# 本文

### 勘違いしていた実行例

```
＜プログラム＞
//文字コードをSJISに変換
String sjisString = new String("文字列".getBytes("UTF_16"), "SJIS");
System.out.println("SJISに変換した文字列：");
System.out.println(sjisString);
		
//SJISに変換した文字列をBase64にエンコード
String base64String = Base64.getEncoder().encodeToString(sjisString.getBytes());
System.out.println("Base64エンコードした文字列：");
System.out.println(base64String);

＜実行結果＞
SJISに変換した文字列：
��e�[WR
Base64エンコードした文字列：
77+977+9Ze+/vVtXUhc=
```

「文字列をSJISに変換してハッシュ化」の要求に対し、このロジックにしたのは以下のように考えたため。

　①Javaの中では文字列はUTF-16で扱われている。
　　↓
　②まずは文字列をUTF-16からSJISに変換する必要がある。
　　↓
　③SJISに変換した文字列をBase64にエンコードすればよい。

SJISに変換したつもりの文字列を標準出力すると文字化けしているのは、「SJISの文字列をUTF-8で表示されているからかな？」とおかしな納得をしていた。

### 勘違いのポイント

最初の1行目。

```
//文字コードをSJISに変換
String sjisString = new String("文字列".getBytes("UTF_16"), "SJIS");
```

これはUTF-16からSJISに文字コードを変換するわけではなく、以下の動作をする。

1. `"文字列".getBytes("UTF_16")`　で"文字列"をUTF-16のバイト配列にエンコード
2. `new String("文字列".getBytes("UTF_16"), "SJIS")`　でUTF-16でエンコードされたバイト配列をSJISの文字コードで文字列に復元

異なる文字コードで復元しているので文字化けして当然である。

### まとめ

String#getBytes(Charset charset)は文字列を指定された文字コードに変換してくれる。
同じ"文字列"でも指定する文字コードによって結果は以下のように変わる。

```
＜プログラム＞
byte[] utf16 = "文字列".getBytes("UTF-16");
byte[] utf8  = "文字列".getBytes("UTF-8");
byte[] sjis  = "文字列".getBytes("SJIS");
		
System.out.println("UTF-16 ：" + Arrays.toString(utf16));
System.out.println("UTF-8　：" + Arrays.toString(utf8));
System.out.println("SJIS   ：" + Arrays.toString(sjis));

＜実行結果＞
UTF-16 ：[-2, -1, 101, -121, 91, 87, 82, 23]
UTF-8　：[-26, -106, -121, -27, -83, -105, -27, -120, -105]
SJIS   ：[-107, -74, -114, -102, -105, -15]
```

冒頭に記載したBase64エンコードやハッシュ化のメソッドは引数にbyte[]をとるようになっている。
このため、上記のとおり文字列を希望の文字コードでgetBytes()して、各メソッドの入力にすればよかった。

Base64.getEncoder()#encode(byte[] src)
DigestUtils#digest(byte[] data)

わかってしまえばとても初歩的な話だが、一度勘違いしてしまうと、なかなか気が付けなかった。

# 参考にさせていただいたページ
いいから聞け！ 俺が文字コードについて教えてやるよ その２（Javaの文字コード編）
https://cero-t.hatenadiary.jp/entry/20110621/1308667569
SourceTreeでThe requested URL returned error: 403のエラーが出た件について。

こんにちは　
SourceTreeでプッシュする際に
**The requested URL returned error: 403**
とエラーが出て、解決したため記録します。

##解決方法
SourceTreeの設定からアカウントを開きます。
<img width="443" alt="スクリーンショット 2020-02-27 23.57.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517291/b2a177a4-a087-d5d6-844c-4f1df1843ca3.png">

高度な設定を開き、ホスト名またはユーザー名を選択し、削除します。
<img width="678" alt="スクリーンショット 2020-02-27 23.57.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517291/75cd6add-2cfb-f48a-c470-1e32a72e6454.png">

そして、再度プッシュを行うとgithubのユーザー名とパスワードを求められるので、入力すると解決します。

###原因はわかりません。。。
わかる方教えてください。。。
Amazon Rekognition イメージ内のテキスト は日本語に対応していない

##結論から
表題の通りです。

特にreference(https://docs.aws.amazon.com/ja_jp/rekognition/latest/dg/text-detection.html )には書かれていないのですが、デモ画面の結果の右側に英語(米国)のみと書いていますね。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29032/a2d33769-24ea-bba4-8fa2-660efea625ac.png)

## Amazon Textractでも結果は同じ
近いサービスとしてTextractがあるので、ダメ元で試してみた → 結果は同じ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29032/785a1079-56d4-6a20-e97d-f69ab246e959.png)
多対多テーブルの作り方

## データベース設計
投稿(postテーブル)に対してタグ(tagテーブル)付けができる機能を作るとします
一つの投稿は複数のタグを持つことができ、一つのタグは複数のタグを持つことができる場合、そのままアソシエーションを組んでしまうとデータベースの中身が複雑になってしまいます。
そのためどの投稿がどのタグに結びついているのかを記憶するテーブルを別に作り、整理します。
## 内容
### postテーブルを作る
```:ターミナル
rails g model Post image:text
```

### tagテーブルを作る
```:ターミナル
rails g model Tag name:string
```

### 中間テーブルを作る
中間テーブルは各モデルの複数形を名前をスネーク型で繋げます
今回の場合はPosts_tags
postとtagの結びつきを記憶するテーブルのため各idのカラムを作ります
refarencesの型はこの後記述するマイグレーションファイルに記載するforeighn_keyの制約に対応した型になります。
foreighn_keyはpost_idやtag_idカラムに対してpost_idに対応したpostsテーブルのidがあることを保証する制約です。
例)post_id:1  tag_id:1 であればpostsテーブルにid:1の投稿があり、tagsテーブルにもid:1があることを保証しています。

```:ターミナル
rails g model Posts_tags post_id:refaremces tag_id:refarences
```

## アソシエーション
多対多テーブルのアソシエーションはthroughを使用します。
postとtagは関連しているがposts_tagsを経由して関連することを表します。

```ruby:ppst.rb
has_many :posts_tags
has_many :tags, through: :posts_tags
```

```ruby:tag.rb
has_many :posts_tags
has_many :posts, through: :posts_tags
```

```ruby:posts_tag.rb
belongs_to :post 
belongs_to :tag
```

## マイグレーションファイル
```ruby:マイグレーションファイル
class CreatePostsTags < ActiveRecord::Migration[5.2]
  def change
    create_table :posts_tags do |t|
      t.refarence :post_id, foreign_key: true
      t.refarences :tag_id, foreign_key: true

      t.timestamps
    end
  end
end
```

## 完成
これで多対多テーブルの作成が完了します。
※sqliteでrefarences型を使用しようとしたところマイグレーションができませんでした。integer型に変更したところマイグレーションできたので、sqliteではrefarences型は使用できないようです。
androidのtargetSdkVersionを'R'に変更する

#はじめに
探すの戸惑ったのでここにメモしておきます。

#参考
https://developer.android.com/preview/setup-sdk?hl=ja

#解決サンプル

```build.gradle
android {
    compileSdkVersion 'android-R'

    defaultConfig {
        targetSdkVersion 'R'
    }
}

```

#targetSdkVersionについて少し
対応する最大のバージョン
文字のアウトラインだけ色が変化するCSSアニメーション

#やりたいこと

- テキストのアウトラインだけ色が変化するようにしたい
- テキストは決め打ちではなく、自由に変えられる

#イメージ

<img width="749" alt="スクリーンショット 2020-02-27 23.41.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592738/9a45d5db-e55a-d6a5-b906-b26d181ecd55.png">

このカラフルな部分がグラデアニメーションする感じです。

#出来上がったコード

```index.html
<p class="txt-outline">TEXT OUTLINE</p>
```

```style.css
body{
 background-color:#fff; 
}
.txt-outline{
	text-align:center;
	font-size: 5rem;
	color: #fff;
	-webkit-text-stroke: 4px rgba(0,0,0,0);
            text-stroke: 4px rgba(0,0,0,0);
	font-weight: bold;
	letter-spacing:3px;
	background: -moz-linear-gradient(-45deg, #661df7 0%, #fcbf2f 25%, #ef26ba 50%, #2696f2 75%, #661df7 100%) 0% center / 200% auto;
	background: -webkit-linear-gradient(-45deg, #661df7 0%,#fcbf2f 25%,#ef26ba 50%,#2696f2 75%,#661df7 100%) 0% center / 200% auto;
	background: linear-gradient(135deg, #661df7 0%,#fcbf2f 25%,#ef26ba 50%,#2696f2 75%,#661df7 100%) 0% center / 200% auto;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-animation: outlineRun 4s linear infinite;
	        animation: outlineRun 4s linear infinite;
}
/* 背景の横位置をズラす */
@-webkit-keyframes outlineRun {
  to { background-position-x: 200%; }
}
@keyframes outlineRun {
  to { background-position-x: 200%; }
}
```
`text-stroke`の色を透明にし、背景色と文字色を同じにするのがポイントです。

#実際のサンプル

<p class="codepen" data-height="344" data-theme-id="6431" data-default-tab="result" data-user="mei331" data-slug-hash="VwLpRrJ" style="height: 344px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="outline text animation">
  <span>See the Pen <a href="https://codepen.io/mei331/pen/VwLpRrJ">
  outline text animation</a> by Mei Koutsuki (<a href="https://codepen.io/mei331">@mei331</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
SassとStylusについて

業務でStylusを使用することになったので、Stylusの書き方について、まとめてみました。

# CSSの問題点

CSSは、HTMLでマークアップしたものを飾り付けることで、より意味を持たせるためのスタイル言語です。
これにより、PCの画面をHTMLだけのものに比較して様々な表現をすることが可能となりますが、CSSでは`{}`が必要だったりセミコロンが必要だったりと、多くの制約があることが事実としてあります。
その制約を取ることができないものか。
これを考えた末、SassとStylusが誕生しました。

# SCSSとは
Sass（サス）とはCSSをより簡略的に、しかし多機能で書けるようにした記法です。
具体的に見てみましょう。

```css
CSS
div {
    margin: 0 auto;
}
 
div p {
    padding: 20px;
}
```

```css
Sass
div {
    margin: 0 auto;
    p {
        padding: 20px;
    }
}
```

上がCSS、下がSassとなります。
見てみると、Sassは入れ子構造で`div`を一つにできているのがわかります。
このように、書き方を省略してもCSSと同じようにスタイリングすることができるのがSassの魅力です。

# SASSとSCSS
少しわかりにくいですが、SassにはSASSとSCSSというふたつの記法が存在します。

```css
SASS
div
    margin: 0 auto
    p
        padding: 20px
        span
            font-color: red;
```

```css
SCSS
div {
    margin: 0 auto;
    p {
        padding: 20px;
        span {
             font-color: red;
        }
    }
}
```

上がSASS、下がSCSSです。
実は先ほど紹介したSassは`SCSS`の記法であったことがわかります。
SASSが先に生まれ、SCSSが後にできているのですが、
どちらもネスト構造（入れ子構造）を作ることで、省略をしようとしていることがわかりますね。
ただ、そのアプローチがインデントを作ることであるか、`{}`をつくることであるか、という違いであると言えます。
SASSのほうがよりシンプルだと思うのですが、CSSとの連携に乏しかったこともあり、結局`{}`を持ったSCSSの記法が一般的になりました。

# Sassはmixinが使える
ここで、少しSassの機能として、mixinに触れておきます。
CSSでは基本的には全ての値をスタイル時に決めておくことが必要で、動的に表示を変えたりすることが難しいという点がありました。
Sassはそれを改善するためにmixinという機能を搭載しています。
mixinとは、引数を使ってスタイルの設定ができる、いわばプログラミング言語的にCSSを扱うことができる機能です。



# Stylusとは

CSSの書き方のひとつで、自由な書き方で書くことができます。
具体的には、

- CSSをそのまま書くことができる
- SCSSをそのまま流用することができる

というように、他の記法をそのまま使うことができます。

その中で、CSSだと `{}` などが必要となるところで、それが必要なく書くことができるところが便利なところです。

また、変数や引数を使用したりと、動的に書くことができるのも、Stylusの魅力であると言えます。

構造はインデントを使うことで階層を作ることができます。
書いていると、インデントがないと階層構造を作れないので、インデントがずれてしまうとその後の設計が全て狂ってしまうという事がありえます。

詳しくはまた後日付け加えようと思います。
Amazon Rekognition チュートリアルほんとに10分でできるか？


#モチベーション
Amazon Rekognition チュートリアル
10 分間と書いてあるが、ほんとに10分でできるか検証したい。

# 結果→できた
チュートリアル：https://aws.amazon.com/jp/getting-started/tutorials/detect-analyze-compare-faces-rekognition/

23:24～23:32 約8分

「類似度」が 10 を超えていないことに注意してください。 と記載あるがsimilarityが13超えていたパターンがあったのはご愛敬w
エラー解決　python バージョン確認


単純にpythonのバージョン確認しようとしたら
変な内容が出たので書きます。

# python -V
通常のバージョン確認これは問題なし

最後のVを大文字にしなかっただけでした。

# python -v
これだとなぜか
下記のような内容が出てきます。

```shell:
import _frozen_importlib # frozen
import _imp # builtin
import '_thread' # <class '_frozen_importlib.BuiltinImporter'>
import '_warnings' # <class '_frozen_importlib.BuiltinImporter'>
import '_weakref' # <class '_frozen_importlib.BuiltinImporter'>
# installing zipimport hook
import 'zipimport' # <class '_frozen_importlib.BuiltinImporter'>
# installed zipimport hook
import '_frozen_importlib_external' # <class '_frozen_importlib.FrozenImporter'>
import '_io' # <class '_frozen_importlib.BuiltinImporter'>
import 'marshal' # <class '_frozen_importlib.BuiltinImporter'>
import 'posix' # <class '_frozen_importlib.BuiltinImporter'>
import _thread # previously loaded ('_thread')
import '_thread' # <class '_frozen_importlib.BuiltinImporter'>
import _weakref # previously loaded ('_weakref')
import '_weakref' # <class '_frozen_importlib.BuiltinImporter'>
# 以下略
```
【Ruby on Rails 5】Instagram風簡易SNSアプリを作ってみよう！（Techpit教材）を終えて

#Techpitの【Ruby on Rails 5】教材の感想
[TechCommit](https://www.tech-commit.jp/)さんのお年玉企画にて頂いた[Techpit](https://www.techpit.jp/)教材を使って、Ruby on Rails 5で簡易アプリを作成しました。
簡単ではありますが、どのようなことを学べたのか、その感想を記します。

また、当方実務経験などが全く無く、言語を独学で学んでいる程度なので、経験も知識も非常に浅いことをご了承願います。

##教材に取り組む上で必要な知識
まず、【Ruby on Rails 5】[instagram](https://www.instagram.com/?hl=ja)風簡易SNSアプリを作ってみよう！という教材は、以下の言語を使用します

- HTML
- CSS
- Javascript
- Ruby


必要条件は**HTML/CSS、及びRubyの基礎知識**とされています。

主な目的はRuby on Railsの流れを把握するものであり、
SNSの[instagram](https://www.instagram.com/?hl=ja)を参考にしたアプリ作成を進める内容となっています。


今回の教材に取り掛かるにあたって、HTMLとCSS、Rubyの基礎知識を[Progate](https://prog-8.com/)で補っています。
教材は、2回ほど繰り返し学習を行いました。

※教材内でHTML/CSSは多く使われますが、詳しい解説はありません。

##教材の流れと大まかな内容

- 環境構築
 - Mac -Homebrew
 - Windows -Cloud9
- Railsアプリケーション作成
 - Gemインストール 
 - ローカルサーバー立ち上げ
- MVC知識
- Bootstrap導入
- 機能を付ける
 - サインアップ・サインイン
 - プロフィール
 - 画像投稿
 - いいね
 - コメント
- デプロイ
 - Herokuを利用してサービス公開
- pry-railsを用いたデバック方法
 

どのファイルでどのコードを記述するか、コードの意味から、詳しい情報が書いてある詳細ページのリンクも要所要所あります。

また、各項ごとに質問投稿欄があり、わからないことが運営へ質問出来るようになっていました。

##全体を通しての感想
プログラミング超初心者ながら教材を終えて、感想を大きく三つあります。

- 初心者にも作れるわかりやすさ
- 使用する知識が多い
- エラーに慣れてくる

####初心者にも作れるわかりやすさ

アプリを作るというと難しそうだなとは思っていましたが、
一つ一つのページを作り、それを組み立てるような流れでわかりやすかったので、
進めていければアプリ作成・公開まで行うことが出来ます。

####使用する知識が多い

教材内容全てを理解する、というのは、特に言語など基礎の基礎を学んだだけでは出来ませんでした。使用する言語も多い(ように感じた)ので、基礎知識しか無い段階で全て理解しようとすると相当な時間がかかると思われます。

といっても、そもそもこの教材の一番目的がRuby on Railsの流れを把握することなので、まずは流すように取り組むだけでも、大枠が見えてきます。
細かいことを知りたい時はそのページで質問するでも、リンクを参考にするでも可能なところが良かったです。

####エラーに慣れてくる

私が初心者なせいかとは思いますが、教材通りにしているつもりでもどこかしらでエラーが起きて躓いてしまうことが多々ありました。

しかし自分が躓いていることは大体他の人も躓いていることが多かったので、特に各項の質問投稿欄は、同じエラーで解決した人が居たりして、非常に助けになり、また、何度かエラーを繰り返すことでエラーの直し方や着目すべきところも以前より見えるようになった気がします。

##まとめ

長くなりましたが、この教材の対象者でもあるように、Ruby on Rails開発の流れをつかみたい人、アプリを作成してみたい人、特にRubyを学んでいる方にはおすすめです。

しかし感想でも触れましたが、やはり言語の面での自分の知識不足が痛かったです。
基礎知識をしっかり固めてやると、もっと入りやすいのかなと思いました。教材としては扱いやすくてとても良かったです。

アプリ作成、そしてサイトの公開まで学べるという点で、知識の色んな活用の仕方が出来るのではと思います。
リダイレクトFizzBuzz

# 結果表示

![capture1](https://raw.githubusercontent.com/matoruru/imgs/master/redirect-fizzbuzz/redirect-fizzbuzz.gif)

# 計算過程

![capture2](https://raw.githubusercontent.com/matoruru/imgs/master/redirect-fizzbuzz/redirect-fizzbuzz-url.gif)

# リポジトリ

[![matoruru/redirect-fizzbuzz - GitHub](https://gh-card.dev/repos/matoruru/redirect-fizzbuzz.svg)](https://github.com/matoruru/redirect-fizzbuzz)
sutara79さんの「Laravel 5.7で基本的なCRUDを作る」にチャレンジした時の参考サイトまとめ

##sutara79さんの「[Laravel 5.7で基本的なCRUDを作る](https://qiita.com/sutara79/items/ef30fcdfb7afcb2188ea#crud%E6%A9%9F%E8%83%BD)」にチャレンジした時の参考サイトまとめ

メイン
https://laraweb.net/

Laravel 6系でmake:authを使う方法
https://qiita.com/rei67/items/d6d0f5f6e58edbb17c09

ヘルパー関数 まとめ(asset etc..)
https://laraweb.net/knowledge/835/

viewメソッドの使い方
http://tektektech.com/views-helper/326/

翻訳文字列の取得(__メソッド)
https://readouble.com/laravel/5.7/ja/localization.html#retrieving-translation-strings

モデル結合ルート
https://cpoint-lab.co.jp/article/201906/10008/

コンポーネントとスロット
https://webplus8.com/laravel-blade-component/
https://debuglog.net/laravel-component/

クエリビルダ
https://www.wakuwakubank.com/posts/453-laravel-sql-basic/

MySQLの外部キー制約
https://qiita.com/suin/items/21fe6c5a78c1505b19cb

explode関数で文字列を分割
https://techacademy.jp/magazine/11415

オートロード
https://laraweb.net/surrounding/1642/

自作のヘルパー関数を追加
https://s8a.jp/laravel-custom-helper

バリデーションのis-invalid
http://www.tohoho-web.com/bootstrap/forms.html

バリデーション解説
https://qiita.com/kd9951/items/e797b17c03fc8e8f414b
備忘録：多重ネストしたループの内包表記

for文がネストした内包表記を書こうとしたら一発でできなかったので忘れないようにメモ


以下のような辞書型を二次元のリストに変換する処理をやりたかった

```python
> # これを
> d1 = {'a': {'aa': (1, 3), 'ab': (5, 7)}, 'b': {'ba': (2, 4), 'bb': (6, 8)}}

> # こうしたい
> _d1 = [('a', 'aa', 1, 3), ('a', 'ab', 5, 7), ('b', 'ba', 2, 4), ('b', 'bb', 6, 8)]
```

for文を内包表記で書くときは_forの前方に中身がくる_と安直に覚えていたので、内部のfor文を外側のfor文の前方に書いた。

``` python
> [(k, _k, vals[0], vals[1]) for _k, vals in obj.items() for k, obj in d1.items()]
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
NameError: name 'obj' is not defined

name 'obj' is not defined
```


ネストしたループは後方に書くのが正解

``` python
> [(k, _k, vals[0], vals[1]) for k, obj in d1.items() for _k, vals in obj.items()]
[('a', 'aa', 1, 3), ('a', 'ab', 5, 7), ('b', 'ba', 2, 4), ('b', 'bb', 6, 8)]
```
Flatpak で Fcitx が動かない問題

ディストリビューション非依存のパッケージマネージメントシステムとして、[Flatpak](https://flatpak.org)というものがあります。

このFlatpak、ユーザー権限でバイナリパッケージを手軽にインストールできたりして、Gentoo使いの自分としては便利に使っているのですが、一つ問題があります。それは、日本語入力ができない、という問題です。

正直そんなに日本語入力する機会なんてないし…と思っていましたが、最近チャットツールとかを導入したせいで、日本語を入力する必要に迫られていました。とりあえずは、ブラウザでWeb版を開いてなんとかしていたんですが、重い腰を上げて解決策を探ってみることにしました。

### 原因

あちこち調べた結果、日本語入力ができない問題は、FcitxとFlatpakアプリとの間で、D-Bus通信がうまく行っていないことが原因とわかりました。

なぜ通信がうまく行っていないのか。その原因は２つありました。１つ目は権限の問題です。
Flatpakはセキュリティにも配慮していて、アプリケーションをサンドボックスに押し込んで実行するようになっています。当然、各種通信やアクセスも制限しています。そうした制限の一部として、ソケット通信も制限されています。D-Busはリンク層としてはソケット通信を行っているので、当然この制限の影響を受けます。

### 解決策

そのため、この「ファイアウォール」に穴を開ける必要があります。
調べてみると[いい感じのIssue](https://github.com/flatpak/flatpak/issues/2031)がありました。どうやら`--talk-name=org.freedesktop.portal.Fcitx`と実行時に指定すれば良いようです。恒久的に設定したければ、`override`すればよさそうです。

さて、問題はまだ続きます。
D-Bus通信は、その名の通りバス型の通信システムなので、「宛先」（正確にはオブジェクト名）を指定する必要があります。その「宛先」の命名規則には慣例があって、だいたいのアプリケーションはその慣例に従っていたわけですが、Fcitxはその慣例に従っていませんでした。しかし、[Fcitxでのこの修正](https://gitlab.com/fcitx/fcitx/blob/master/src/frontend/ipcportal/ipcportal.h#L27)によって、慣例通りに振る舞うようになりました。
その結果、以前の振る舞いを前提としていた一部のFlatpakアプリでFcitxが動かなくなってしまったのでした。この問題は[Fcitx側でもすでに把握](https://gitlab.com/fcitx/fcitx/issues/429)しています。

解決策は、アプリケーション側が対応してくれるのを待つか、Fcitxにパッチが当たるのを待つか、です。しかし、Fcitx側での修正は、影響範囲が広く、かつ挙動を正しく修正した結果による挙動なため、修正は難しいように思います。

### めんどくさいので諦めた

ここまで書いておいて申し訳ないですが、自分はとりあえずiBusに逃げることにしました
だって日本語そんなに打たないんだもの…

以上、Flatpakで日本語入力できなくて困っている方の役に立てれば幸いです。

# 参考資料
- [Arch LinuxのFcitx+Mozcで日本語入力できない問題の解決法](https://qiita.com/matoruru/items/ab8b7beac4312586ac12)
- [D-Bus のはなし｜Wireless・のおと｜サイレックス・テクノロジー株式会社](https://www.silex.jp/blog/wireless/2017/01/d-bus.html)
bootstrapのbuttonのdata-***-textで詰んだ話

結論から言うと、Bootstrap4ではdata-***-textは使えなくなったらしい。

これ↓

HTML

```html
<button type="button" id="sampleButton5" class="btn btn-default" data-process-text="実行中" data-complete-text="完了" autocomplete="off">
	サンプル
</button>
```
Javascript

```Javascript
$(function () {
	$('#sampleButton5').on('click', function () {
		$(this).attr( 'disabled', 'disabled' ).button('process').delay(3000).queue(function() {
			$(this).button('complete');
		});        
	});
});
```


AdminLTE3で動かねえ！！！！って思ってたら、AdminLTE3はBootstrap4だから････っていう。

以下のURLに、v4で消したって載ってた。
https://getbootstrap.com/docs/3.3/javascript/#buttons-stateful

Stateful
Add data-loading-text="Loading..." to use a loading state on a button.
**This feature is deprecated since v3.3.5 and has been removed in v4.**

じゃあどーすんのって話なんだけど、Javascriptで頑張れって書いてある････

具体的には、button.text('文字列')を使えばよさそう。

まあさっきのJavascriptのコードは、以下のような感じにすればできると思う。(試してないからわからないけど)

```Javascript
$(function () {
	$('#sampleButton5').on('click', function () {
		$(this).prop('disabled', true).button.text('実行中').delay(3000).queue(function() {
			$(this).button.text('完了');
		});        
	});
});
```

地味にattrもpropに変えたりしてるけど･･･
仙台CTF 2019 NL2.攻撃コード 100

#問題

http://ctf.sectanlab.jp/2019/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/6878fd89-8385-228f-df7d-301d41341a45.png)

#解いてみた

問題のファイルを解凍するとDBのログとWebのログがありました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/5902c16d-41b0-426c-66f4-29c7a47ecb46.png)

フォーム入力って基本的にPOSTが多いからWebログからは判明しないかなと思いつつも一応見てみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/fcc8909f-cb71-f6f2-2b86-de1588ba5ff6.png)

POST通信もありつつ明らかに怪しげなパラメータがついたGETもあります。
試しに最初に出てきた怪しげなGETをURLデコードして回答してみます。

URLでコードにはCyberChefを使いました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/8f53be9d-5318-4212-ef22-bb0065c3ef67.png)

これで答えてみましたが、これは違いました。
たぶん戻りサイズが一番大きいのが答えだろうと思ってほかの怪しいGETを見てみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/73e354cb-cd20-c5a4-1f45-e5f82c35c70f.png)

この14150が一番大きい。
ということでこれをCyberchefを使ってURLデコードしたもので回答すると正解でした。
個人的ポートフォリオの再構築始めました


今日は、改めて開始したことのご宣伝です。

大前提

* 適用範囲が「鈴江個人」です（SESに近い業務が５年以上あります）

作り始めたきっかけ

* 「契約の都合」によって、表に公開できないお仕事が増えた
* 書類チェックとか、技術的な相談とかコードや全体像を持っておいた方が説明しやすいものが増えた
* 自分が売り込むときの知識的な棚卸を兼ねて
* 会社員や転職、似た事例の説明で使えるように→2020/02/27時点ではフリーとして活動しています
* 参加した勉強会についての感想とかを形にで残そうと思って

個人的ポートフォリオのいいところ

* 著作権明記してあれば、全部公開できる
* なんだかんだで、知識の幅が広がる
* 業務でやっていなかった範囲も変更して仮用意する必要があるので、見えてくるものが多くなる

もともと持っていたポートフォリオが以下になります
https://sakuriver.tumblr.com/

ベースにするスキルシート

事前に打ち合わせをして「取引先」や「タイトル名」等の特定できる情報をのぞいて
「技術構成」と「担当箇所（当時の名刺範囲で）」だけで用意したスキルシートが以下のようなスクショになります

[スキルシート例](https://gyazo.com/b4c0fdad889d378b3f9b032b034a7f68)

<img width="876" alt="3f6c7cc6b05280b717320e1d0443a8e8.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45396/06f8178a-e968-91e3-8958-fafb0b1c1dbc.png">


勉強会報告アプリ

* 勉強会の感想や再学習のまとめ用に始めています
* 勉強会に参加して「満足」じゃなくて、知識を定着したり、自分自身で発信していくための取り組みとして
* [関西自主勉強会](http://sakuriver.hateblo.jp/entry/2020/02/09/034451
)
* [GlobalGameJam2020の報告](http://sakuriver.hateblo.jp/entry/2020/02/08/082536)


* 知識や経歴を財産ととらえる
車や土地を有形財産などというように、今まで自分が取り組んできたことを無形財産として分析してみます。
何に取り組んできてきたかを振り返りつつ、同じようなシステム構成で最新技術の勉強をする
    lamp → 仮想環境 + Webサーバーのインスタンス + DB + バックエンド言語　
    金融系 → java + webシステム + バッチシステム + DB 

等々の因数分解をして、因数分解した単位で内容を考える

考えた内容から、自分で作るものをざっくり考える（相談された技術からでも可能）

PHP、Pythonなどでのゲーム開発→サーバーのapiと管理画面を作ってみる
ゲーム系のフロント→自分のやりたい範囲などの作成
業務関連のシステム設計 DBのパラメータや画面を考えたりとモックの並行など

等々

機能単位等で動画撮影をする
具体的な所について、説明できると自分の理解度が上がるので小分けにしてyoutubeにあげています
どう解決したか、実施した内容で何ができるようになったかを説明できるようにするため

　[jmeterを使ってのシナリオテスト自動例](https://www.youtube.com/watch?v=yYvf9AOvlYM)
　[画面遷移を作っての例](https://www.youtube.com/watch?v=kN_MkkdiUfM)

プログラムは適宜githubで公開しています

https://github.com/sakuriver

個人例になるので「やりたいことのために何が必要か」から逆残をしてやってみるでもいいと思っていたりします
仙台CTF 2019 NL1.IDSパケット解析 100

#問題

http://ctf.sectanlab.jp/2019/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/ed79cb8a-85e2-99de-2b7e-6ada9cd43085.png)

#解いてみた

問題のpcapを見てみるとまさかの2つありました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/e3f7a002-9587-bfc2-a16a-fed52f0f237d.png)

容量小さいNo1から見てみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/f34c3a50-a32b-5490-1d37-16480b7462c6.png)

ん？あれ？IPアドレスが2種類しかなくて一つはプライベートアドレスになってる。
グローバルIPアドレスは1つしかないので自然とこれが答えですね。
エラー解決　herokuの導入


herokuに手を出して見ようと思い
エラーが出たのでその備忘録を

# brew install heroku　からのエラー
基本となるこちらからインストールしようとしたら
下記のようなエラーが出ました。

```shell:
Error: No available formula with the name "heroku" 
==> Searching for a previously deleted formula (in the last month)...
Warning: homebrew/core is shallow clone. To get complete history run:
  git -C "$(brew --repo homebrew/core)" fetch --unshallow

Error: No previously deleted formula found.
==> Searching for similarly named formulae...
Error: No similarly named formulae found.
==> Searching taps...
==> Searching taps on GitHub...
Error: No formulae found in taps.
```

# 原因　brew tap　の忘れ
brew tapとは公式以外のリポジトリをフォーミュラとしてHomebrewに追加するものです。

要は非公式な方法を追加する形です。

結果としてしたのコマンドを打てば解決します。

```shell:
brew tap heroku/brew
```

## フォーミュラ
formulaの意味: 手順、ビルド方法、手順が書かれたスクリプトなどです。

# 解決結果

```shell:
＄ brew tap heroku/brew && brew install heroku
# 上記のコマンドでフォーミュラの追加とインストールまとめて行います。

# ついでに下記のコマンドでバージョン確認です。
$ heroku --version
```

# 解決経緯
エラー内容の検索から
かきのリンクに飛び
https://qiita.com/Feel-Physics/items/98b4aacbd6e52a2bde2e

中身をみていたら、tapに触れた内容があったので、tapとherokuを繋げた検索をしたら解決

検索と探索が決めてでした。
Tweet  app　コントローラの記載ミス

投稿はできるがtext, image_urlが保存されないトラブルについて

確認して言った手順
1.投稿は完了するがビューへ反映されない。
2.ターミナルなどにはエラー文が出てこない。
3.データベースのtweetsテーブルを確認したところ保存されていない事がわかった。
4.tweets_controller.rbのcreate アクション内でbinding.pryを設け、paramsの中身を確認。

```
 13: def create
 => 14:   binding.pry
    15:   Tweet.create(tweet_params)
    16: end

[1] pry(#<TweetsController>)> params
=> <ActionController::Parameters {"utf8"=>"✓", "authenticity_token"=>"0OetjLpGY/lhw+49IYsP6z/lYBicOBakjt7zB/n3lXPLq1ShQdX3hu5sZApmOfmY+rCNTiNpym1PH0lREvaCnw==", "tweet"=>{"image"=>"〇〇.jpg", "text"=>"test"}, "commit"=>"SEND", "controller"=>"tweets", "action"=>"create"} permitted: false>
```

5.image と text の情報は取得できていることがわかる。
6.次にtweet_paramsを確認すると、user_id しか取得できていないことがわかった。

```
[2] pry(#<TweetsController>)> tweet_params
  User Load (0.4ms)  SELECT  `users`.* FROM `users` WHERE `users`.`id` = 1 ORDER BY `users`.`id` ASC LIMIT 1
  ↳ app/controllers/tweets_controller.rb:42
=> {:user_id=>1}
```
7.したがって、ストロングパラメータで指定しているパラメータに不備があることがわかる。
8. ストロングパラメータにおいて、image と text も許可（permit）するように記載することで解決できる。

 ```
"tweet"=>{"image"=>"〇〇.jpg", "text"=>"test"},
```
※tweetの中にimageとtextが入ってるので出してあげる必要がある。
9.最後に下記の内容へ変更したら正常となった。

```tweets_controller.rb
Before
def tweet_params
    {user_id: current_user.id}
 end

After
def tweet_params
  params.permit(:image, :text).merge(user_id: current_user.id)
end
```
PHPで十進法->二進法に変換する

PHPで十進法->二進法に変換するコードを書いてみました。
decbin()関数があリますが。


```php:binary.php
<?php

  $input = fgets(STDIN);
  $binary = array();

  while(true){
    $remainder = $input % 2;
    $input = floor($input/2);
    $binary[] = $remainder;
    if ($input == 0 || $input == 1){
      $binary[] = $input;
      break;
    }  
  }
  foreach(array_reverse($binary) as $bit){
    echo $bit;
  }
}
?>
```
WPF フォルダ選択ダイアログ

# ■概要

フォルダ選択ダイアログ。
![FolderBrowse0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/e5f39e1b-9520-cbf2-011f-3e48ab1470bf.png)

# ■環境

* Windows 10
* Visual Studio 2019
* .NET Framework 4.8

# ■準備

NuGetで`Microsoft.WindowsAPICodePack-Shell`をインストール。

![FolderBrowse1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/b66f3383-4f0c-2cc2-4246-dba68483f609.png)

# ■コード例

```Xml:MainWindow.xaml
<Window x:Class="FolderBrowse1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:FolderBrowse1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Button Content="押せ" HorizontalAlignment="Left" Height="67" 
            Margin="235,35,0,0" VerticalAlignment="Top" Width="109" 
            Click="Button_Click"/>
    </Grid>
</Window>
```

```CSharp:MainWindow.xaml.cs
using System.Windows;
using MSAPI = Microsoft.WindowsAPICodePack;

namespace FolderBrowse1
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        /// <summary>
        /// コンストラクタ
        /// </summary>
        public MainWindow()
        {
            InitializeComponent();
        }

        /// <summary>
        /// ボタンクリック時の処理
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            var dlg = new MSAPI::Dialogs.CommonOpenFileDialog();

            // フォルダ選択ダイアログ（falseにするとファイル選択ダイアログ）
            dlg.IsFolderPicker = true;
            // タイトル
            dlg.Title = "フォルダを選択してください";
            // 初期ディレクトリ
            dlg.InitialDirectory = @"D:\Work";

            if (dlg.ShowDialog() == MSAPI::Dialogs.CommonFileDialogResult.Ok)
            {
                MessageBox.Show($"{dlg.FileName}が選択されました。");
            }
        }
    }
}
```

# ■実行

![FolderBrowse2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/06ca8768-181f-cc44-7d76-c81e77a5fbc1.png)
↓
![FolderBrowse3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/4fcd7913-2909-0575-4a38-808cc707601c.png)
↓
![FolderBrowse4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142879/852cbf50-91d5-6478-c20a-9a0f81371a5d.png)
仙台CTF 2019 Tri3.Botnet Brute forces RDP 100

#問題

http://ctf.sectanlab.jp/2019/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/676b388f-fc60-c103-de97-b5ccfb95f108.png)

#解いてみた

こんなのあったっけな？
調べるとすぐ出てきますね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/839a50ac-ff7c-d73e-2bfe-2fe821e5cc01.png)
Netflixのデータサイエンティスト採用面接（ざっくり和訳）

#The Netflix Data Scientist Interview Questions
Netflixのデータサイエンティスト採用時の面接に関する[記事](https://towardsdatascience.com/the-netflix-data-scientist-interview-35093d4c20aa)を見つけたので、ざっくり和訳と所感を。。

#Netflixでのデータサイエンティスト仕事
いろんなチームにデータサイエンティストがおり、それぞれの部門で仕事をしており、ディープラーニング、機械学習、統計モデル等を用いて、各チームのミッション（おすすめする映画やドラマの精度向上などなど）に取り組んでいるそう。

まぁ、これは想定できますし、どこの企業でも似たような感じかもしれないですね。
データサイエンス部みたいな部署があり、そこにデータサイエンティストが集まっている会社も多いかもしれませんが。


#求められるスキル
これ気になりますね。日本と違いがあるのか、そうでもないのか。。。

・統計学や経済学等の修士号、博士号
・大量のデータを用いて商品を革新させた実績を伴う、関連領域での5年以上の実務経験
・SparkやSQL、Python、Rを用いた経験
・実際に機械学習で成果を上げた実績
・観測データやABテストの領域で活用される深い統計知識
・TableauやR Shinyを用いてダッシュボードの構築経験

実績をかなり求めていますね。おそらく書類が通って面接では根掘り葉掘り聞かれるのでしょう。どんなデータで、どんな手法で、どんな実績をあげたのかを。（というか、書類でそこをアピールしないと通らないかもしれないですね）
また、NetflixはABテストをすごく多用する会社のイメージが有り、その知識も学んだほうが良いですね。テスト設計の知識を。単純にランダムで良いのか。サンプルバイアスの除き方なり。

#具体的にどんな仕事をNetflixのデータサイエンティストはしてるの？
プラットホームビジネスなので、内部のいろんなところで活躍してると想像できますが、具体例としては下記のような感じ。。。

・個人最適化
製品チームやエンジニアチームと協力して、映画やドラマのおすすめアルゴリズムの改善

・UIの改善
機械学習を用いたUIの改善

・製品開発
会員の動きや動画コンテンツのパフォーマンスからビジネスインサイトを得るための、フレームワークや視覚化ツールを開発し、他チームへ提供

・会員獲得
新規会員登録のためのデータセットの作成

・マーケティング
非技術チームでも使える、直感的なデータ活用ツールの開発



直接自分たちがビジネスを改善するタスク（おすすめアルゴリズムの改善など）もあれば、知識のない人間でもデータを活用できるようなツールの開発も行っているんですね。社内ツールによって、統計的知識がないチームでもデータをミスなくビジネスに活用できる、っていうのは大事ですね、作る側は大変そうですが。。。


#面接の流れ
大きく3ステップのようです。電話での採用リクルーター/採用マネージャ面接 → 電話での技術面接 → 対面でのチーム面接

・電話での採用リクルーター面接
30分ほどの電話面談では下記を主にチェックされるそうです
 -書類に書いてある経歴をよく理解し、ポジションにマッチするか
 -コミュニケーション能力（一般的な受け答えがちゃんとできるか、経歴とかちゃんと説明できるか）

・電話での採用マネージャ面接
ここでは技術的な質問が出てくるそうです
 -なぜ、過去のそのプロジェクトではそのアルゴリズムを用いたのですか？
 -機械学習アルゴリズムや分析手法を開発した方法を教えて下さい
など。これらを通して、応募者のレベル感を把握し、チームにマッチするか（技術的な意味で）をチェックするそうです。

日本だと、採用担当者からこのレベルまで聞く企業は少ないかもしれませんね。。。（転職したのが数年前なので最近の事情はわかりませんが。。。）

上記を通過すると次は技術面接になります。
・電話での技術面接
名前の通り、技術的な質問が45分ほどあるそうです。SQLなり、実験計画なり、機械学習なり、、
 -ABテストに関してご存知のことをお話ください。
 -L1正則化、L2正則化のちがいは？また、0.5正則化が一般的に用いられない理由は？
 -オンライン勾配投下法とバッチ勾配投下法の違いは？
 -利害関係者に機械学習の結果を報告する、一番良い方法は？

「理屈は知らんが、コードは書ける」ってタイプだとここで落ちそうですね。。


・対面でのチーム面接
上記を通過すると対面面接に呼ばれ、ランチを挟んで2回行われるそうです。
実際のデータサイエンスチームや製品マネージャー等の6～7人と、分析コンセプトや手法、製品に関してなど多様な範囲のディスカッションになるそうです。おそらく実務に近い形で「候補者が現場でworkするのかチェックされる」のでしょう。
ABテストや、仮設検証、Pythonのコード、SQLのコード、実験計画なり、いままでの面接で聞かれてきたことを現場で活かせる人なのか（知識だけで頭でっかちになり、実務では活躍できない人もいますからね）、また、企業カルチャーにフィットする人なのか、みられるのでしょう。




誤訳あるかもしれませんが、ざっくりこんなことが書かれてました。
個人的な一番の感想は、「うちでもこのフロー導入してくれないかな（現場離れた部長職以上の人が面接で採用した人間は使えないこと多すぎて迷惑なんだよ！！知識だけでコードかけなかったり、本に書いてあるきれいなデータしか触れたことなくて、実ビジネスのデータじゃ思考停止したり、知識のない部署や顧客への説明が下手くそすぎてクレームきたり。）」です。笑


##はてなブログも書いてます
良ければこちらも見ていただけると喜びます。
ゆくゆくはコード以外の雑多なことははてなブログに記載しようかな思ってます。
https://data-analy.hatenablog.com/

##ストアカで先生はじめました
データ分析初心者向けに、ストアカというサービスを利用して「ざっくりわかるデータサイエンス」という講座を解説しました！
極力数式は使わず、「ざっくり」と理解することを目的とした初学者向けの講座です。
良ければぜひ受講ください！
https://www.street-academy.com/myclass/75133
https://www.street-academy.com/myclass/73308
仙台CTF 2019 Tri2.サプライチェーン攻撃 100

#問題

http://ctf.sectanlab.jp/2019/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/b95ea184-81fd-c968-5f61-ed0cb3eb6428.png)

#解いてみた

ASUSのやつですね。

ASUS公式の「ASUS Live Update Utility」に設けられたバックドア経由でマルウェアが配布されていたことが判明
https://gigazine.net/news/20190326-asus-live-update-utility-backdoor/

ここに書いてました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/3228deb9-b9f8-9369-e7b1-8ce02374cc5b.png)
仙台CTF 2019 Tri1.不正ログイン対策 100

#問題

http://ctf.sectanlab.jp/2019/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/e46c3bfe-8330-59c2-aca6-3696595cb850.png)

#解いてみた

二要素認証かと思ったら違いました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/c521fc2f-cc0b-5864-5369-b85041a3e38d.png)

右下にこたえありました。
確かにこう言うか。
discord.pyをasyncからrewrite版にバージョンアップしたときのメモ

いやぁ・・・ｗ


せっかくdiscordの板とかで質問とかして回答いただいても、
「あ・・・ワイの古かった・・・」
ってなると回答してくれた方にも申し訳ないし、なによりずっと古いバージョンのものを使ってる事自体が情けないというか。

きっと僕以外にも、
「バージョンアップしないといけないのはわかってはいるんだけどどんな壁が待っているのかわからないし・・・とりあえず来月やろう」
って思っている方もいると信じて、そういった方に少しでも勇気を分けてあげられればと。

基本的には、
1.最新のdiscord.pyにする。
↓
2.とりあえず今まで通り動かしてみる
↓
3.エラーがでる
↓
4.https://discordpy.readthedocs.io/ja/latest/migrating.html でエラーがでてるメソッドを検索かけてみて修正する

をひたすら繰り返せばなんとかなります。

また、pyenvのvirtualenvとかで既存の環境とは分けてやったほうが安全です。
また、gitとかで管理しているのであればブランチは切りましょう（当たり前や）


それでは書いていきます。

## idがstr型からint型になった。

idをとって何か処理したり分岐させてるところでもしシングルコートで囲って判別してるところがあったら外してあげる。
どうしても今まで通りでやりたい場合は、

```
str(client.user.id)
```

という形でくくってあげる。



## メッセージの投稿


### async

```
await client.send_message(message.channel, "メッセージ")
```

### rewrite

```
await message.channel.send(res)
```

## 画像の添付


### async

```
await client.send_file(message.channel, res)
```

### rewrite

```
await message.channel.send(file=discord.File(res,))
```

メッセージを送るときと同じメソッドを使うんですね。
resには、添付したい画像へのパスが入っている想定です。
またタプルで渡しているところにも注意です。（複数貼りたいときは普通にカンマ区切りで大丈夫）


## リアクションの付与

### async

```
await client.add_reaction(message, e)
```

### rewrite

```
await message.add_reaction(e)
```

## あれ・・・以上・・・？

えっと・・・


終わっちゃいました！！ｗ

本当はもっといっぱいあると思ってたんですけどやってみたらこんなもんでした。（僕の場合は）

多分修正行数としては5行くらいだったんじゃないでしょうか。（idを直書きでstrで判定してた部分が2行あった）


この記事で一番大事なのは、やってみれば以外と大したことないのでとりあえずやり始めてみよう！！ってことになると思います！

もしかしたら僕が見落としてるだけで別のところも修正しないといけないかもしれませんが、
そういうのがあったらまた適宜追記していきたいと思います。
複数の配列にeachメソッドを使いたい

##rubyのzipメソッドを使えば可能
Ruby 2.7.0 リファレンスマニュアルよりサンプルコードを引用

```
p [1,2,3].zip([4,5,6], [7,8,9])
    # => [[1, 4, 7], [2, 5, 8], [3, 6, 9]]

p [1,2].zip([:a,:b,:c], [:A,:B,:C,:D])
    # => [[1, :a, :A], [2, :b, :B]]

p [1,2,3,4,5].zip([:a,:b,:c], [:A,:B,:C,:D])
    # => [[1, :a, :A], [2, :b, :B],
    #     [3, :c, :C], [4, nil, :D], [5, nil, nil]]

p [1,2,3].zip([4,5,6], [7,8,9]) {|ary|
  p ary
}
    # => [1, 4, 7]
    #    [2, 5, 8]
    #    [3, 6, 9]
    #    nil
```

## 参考
https://docs.ruby-lang.org/ja/latest/method/Array/i/zip.html

https://freesworder.net/ruby-each-multiple/
Ruby/GTK3 - Switch

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/d0832695-67b1-9f6a-515e-713508bada12.png)

`gem install gtk3`

# Switch

Gtk.Switchは、オンまたはオフの2つの状態を持つウィジェットである。 
シグナルは `notify::active` に接続するのがよいとのこと。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144608/b3be997d-d972-ed60-e220-4b0e9ecbdd2e.png)

```ruby
require 'gtk3'

class SwitcherWindow < Gtk::Window
  def initialize
    super
    set_title 'Switch Demo'
    set_border_width 10

    grid = Gtk::Grid.new
    grid.set_column_spacing 6
    grid.set_row_spacing 6
    add grid

    4.times do |i|
      2.times do |j|
        switch = Gtk::Switch.new
        switch.signal_connect('notify::active') { |s| on_switch_activated s }
        switch.set_active [true, false].sample
        grid.attach switch, i, j, 1, 1
      end
    end
  end

  def on_switch_activated(switch)
    state = switch.active? ? 'on' : 'off'
    puts "Switch was turned #{state}"
  end
end

win = SwitcherWindow.new
win.signal_connect('destroy') { Gtk.main_quit }
win.show_all
Gtk.main

```

* [Python版](https://python-gtk-3-tutorial.readthedocs.io/en/latest/button_widgets.html#switch)
Android sdkmanager tool not found.の解決法

Flutterの開発環境を整えている最中に、

```
Android license status unknown.
```

というエラーが出た。

```
% flutter doctor --android-licenses
```

というコマンドを入力すると、

```
Android sdkmanager tool not found
```

今度はこんなエラーが。どうやらAndroid SDKManagerの方で調子が悪いらしい。

すったもんだの末に、
Android StudioのPreferencesから、Android SDKの設定を開いてみると、SDKToolsというところにて、Android SDK Toolsにチェックが入っておらずAndroid SDK Toolsがインストールされていなかった様子。
<img width="1053" alt="スクリーンショット 2020-02-27 22.01.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261020/cf9cbc01-9838-47a9-454c-27629f63e93d.png">

結果、順調に解決しました。
<img width="631" alt="スクリーンショット 2020-02-27 22.04.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261020/507b90bb-1ac5-8c9f-3c47-49b09e25a7c3.png">
Heroku、Flask、Python、Gitでアップロードする方法（その④）

#Heroku、Flask、Pythonについて、Progateやドットインストール、Qiita等でひととおり学習したので、まとめてみる
[（１）作業ディレクトリを作成
（２）仮想環境を設定
（３）必要なフレームワークとWEBサーバーをインストール
（４）FlaskファイルをPythonで作成
（５）Flaskファイルを実行してみる](https://qiita.com/drafts/8ed2aa6334141e6b2db5/edit?resume=true)
[（６）Herokuにデプロイする
　　①Herokuにアカウント登録する
　　②HomebrewでHerokuをインストールする
　　③Gitを用意する
　　④Herokuにアプリを作成する
　　⑤ローカルアプリとHerokuアプリを紐つける](https://qiita.com/drafts/a7ea7c7a12c56ab8e901/edit?resume=true)
　　[⑥Herokuへのデプロイに必要なファイルを作成する
　　⑦Herokuへデプロイする](https://qiita.com/drafts/50d04013bf74ba270960/edit?resume=true)
（７）エラー対応
　　①heroku ps:scale web=1で正常になるケース
　　②heroku ps:scale web=1で正常にならないケース
（８）ファイルを更新する



#（７）エラー対応
以下を入力し、デプロイすると、ブラウザに以下のようなエラーメッセージが表示された。

```
heroku open
```

<img width="527" alt="スクリーンショット 2020-02-27 21.07.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29856/7eafc173-1f2b-fb91-cc79-bb14ac6f988e.png">

ターミナルに以下を入力し、ログを確認する。

```
heroku logs --tail
```

すると、

```
heroku[router]: at=error code=H14 desc="No web processes running" 
```

というメッセージ。
###①heroku ps:scale web=1で正常になるケース
code=14をググると、以下のサイトに詳細が書かれている
https://github.com/herokaijp/devcenter/wiki/error-codes

```
heroku ps:scale web=1
```

として、

```
heroku open
```

とすると、
<img width="158" alt="スクリーンショット 2020-02-26 22.38.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29856/4077cdec-5d45-1180-a294-11c9d337a45f.png">

無事、正常にデプロイできた。

###②heroku ps:scale web=1で正常にならないケース
code=14をググると、以下のサイトに詳細が書かれているが、改善しなかった。

もう一度、デプロイに必要なファイルを確認すると、Procfileにタイポを発見。
（誤）web:gunicorn hello:app --log-file -   
（正）web: gunicorn hello:app --log-file -
:の後ろに空白がなかった。

修正し、再度以下の通り進める。

```
git status
```

以下のように更新したファイルが表示された。

```
modified:   Procfile
```

今度は、'the-second'として入力。

```
git commit -m'the-second'
```

```
git push heroku master
```

```
heroku open
```

無事、ブラウザに以下のように表示され、正常にデプロイできた。
<img width="158" alt="スクリーンショット 2020-02-26 22.38.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29856/4077cdec-5d45-1180-a294-11c9d337a45f.png">



#（８）ファイルを更新する
基本的に（７）の②の要領でファイルを追加、または修正したものをHerokuにデプロイすればOK。
Heroku、Flask、Python、Gitでアップロードする方法（その③）

#Heroku、Flask、Pythonについて、Progateやドットインストール、Qiita等でひととおり学習したので、まとめてみる
[（１）作業ディレクトリを作成
（２）仮想環境を設定
（３）必要なフレームワークとWEBサーバーをインストール
（４）FlaskファイルをPythonで作成
（５）Flaskファイルを実行してみる](https://qiita.com/drafts/8ed2aa6334141e6b2db5/edit?resume=true)
[（６）Herokuにデプロイする
　　①Herokuにアカウント登録する
　　②HomebrewでHerokuをインストールする
　　③Gitを用意する
　　④Herokuにアプリを作成する
　　⑤ローカルアプリとHerokuアプリを紐つける](https://qiita.com/drafts/a7ea7c7a12c56ab8e901/edit?resume=true)
　　⑥Herokuへのデプロイに必要なファイルを作成する
　　⑦Herokuへデプロイする
[（７）エラー対応
　　①heroku ps:scale web=1で正常になるケース
　　②heroku ps:scale web=1で正常にならないケース
（８）ファイルを更新する](https://qiita.com/drafts/0352898c40830547015f/edit?resume=true)



###⑥Herokuへのデプロイに必要なファイルを作成する
デプロイに必要なファイルを２つ作成する。

まず、Herokuでアプリを動かすために、どんなライブラリが必要かを伝えるファイルとして、requirements.txtを作成する。
my-projet内で以下を入力する。

```
pip freeze > requirements.txt
```
requirements.txtには、今までインストールしたライブラリ一覧が表示されたファイルが作成される。

次に、Herokuでアプリを起動した際に最初に実行されるコマンドを記載したファイルとして、Procfileを作成する（拡張子の指定はしない）。

```
touch Profile
```

作成したProcfileを開き、以下を入力して保存する。

```
web: gunicorn hello:app --log-file -
```

hello.pyの中の、appというサーバーを開くという意味になる。
webの後ろは、必ずスペースを付けないと、後々Herokuにデプロイした際にエラーとなるので注意が必要。

###⑦Herokuへデプロイする
まず、以下をターミナルに入力し、今のmy-project内のファイルの状態を表します。

```
git status
```

次に、どのファイルをHerokuにデプロイするのかを指定します。
全てのファイルを指定することとし、以下を入力。

```
git add .
```

その後に以下のように入力し、再度ステータスを確認すると、ファイルをデプロイするための準備が整った状態を確認できる。

```
git status
```

次に、これらのファイルはどういう内容が更新されたのか、何が変更されたのかを説明する必要を記載する必要がある。今回は'the-first'として、以下のように入力。

```
git commit -m'the-first'
```

再度ステータスを確認すると、

```
git status
```

全てのファイルをデプロイできる状態にした（コミットした）と表示される。

```
On branch master
nothing to commit, working tree clean
```

これでHerokuにファイルをpushする（デプロイする）準備が整った。
以下を入力し、Herokuにpush（デプロイ）する。

```
git push heroku master
```

最後に以下を入力してデプロイを確認する。

```
heroku open
```

ブラウザが開き、以下のように表示されれば成功。
<img width="158" alt="スクリーンショット 2020-02-26 22.38.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29856/fb41de62-a9b1-e89e-ad8c-49ce3ab57df0.png">


[Heroku、Flask、Python、Gitでアップロードする方法（その④）]
(https://qiita.com/drafts/0352898c40830547015f/edit?resume=true)