OmniAICreator/Qiita-1.07M huggingface dataset:
Pythonを使ってWindowsやMacを監視し、操作中のアプリの情報を収集してみる

# はじめに

お家で仕事することが多くなり、多くの人が「みんなきちんと家で仕事してるのか？」という不安を抱えているという話を聞いています。

そもそも不安になること自体がおかしいことかなと思いますが、上司が不安になると自分が困ることになる人もいるのかなと思ったりもします。

ということで、パソコンを使っている時にリアルタイムで使用しているアプリの情報を収集できればその不安も少しは低減できるのではないかと考え、方法を検討してみました。

ここでは、「アクティブウィンドウを変更するたびにアクティブウインドウのタイトルを取得して表示する」という方法をまとめてみます。

# 動作環境

- macOS Move
- Windows10 Pro
- Python3.7

# ライブラリのインストール

## Macを操作するライブラリ

Macの方は以下のコマンドで必要なライブラリをインストールして下さい。

```
pip install -U PyObjC
```

## Windowsを操作するライブラリ

Windowsの方は以下のコマンドで必要なライブラリをインストールして下さい。

```
pip install -U pywin32
```

## スクリプトの作成

```py:get_active_window_title.py
#!/usr/bin/env python

import sys

# Mac用
if sys.platform == "darwin":
    from AppKit import NSWorkspace
    from Quartz import (
        CGWindowListCopyWindowInfo,
        kCGWindowListOptionOnScreenOnly,
        kCGNullWindowID
    )

    def getActiveWindowTitle():
    
        curr_app = NSWorkspace.sharedWorkspace().frontmostApplication()
        curr_pid = NSWorkspace.sharedWorkspace().activeApplication()['NSApplicationProcessIdentifier']
        curr_app_name = curr_app.localizedName()
        options = kCGWindowListOptionOnScreenOnly
        windowList = CGWindowListCopyWindowInfo(options, kCGNullWindowID)
        
        txt = ""
        
        for window in windowList:
            pid = window['kCGWindowOwnerPID']
            windowNumber = window['kCGWindowNumber']
            ownerName = window['kCGWindowOwnerName']
            geometry = window['kCGWindowBounds']
            windowTitle = window.get('kCGWindowName', u'Unknown')
            
            if curr_pid == pid:
                activeWindowTitle = ownerName + " - " + windowTitle

        return activeWindowTitle

# Windows用
elif sys.platform == "win32":
    import win32gui

    def getActiveWindowTitle():
        
        activeWindowTitle = win32gui.GetWindowText(win32gui.GetForegroundWindow());
        return activeWindowTitle

else:
    def getActiveWindowTitle():
        return ""
    
def main():
    bufWindowTitle = ""
    
    try:
        while True:
            activeWindowTitle = getActiveWindowTitle()
            if bufWindowTitle != activeWindowTitle:
                print(activeWindowTitle)
                bufWindowTitle = activeWindowTitle
    except KeyboardInterrupt:
        sys.exit(0)
        
if __name__ == '__main__':
    main()
```

# 実行

作成したら以下のコマンドで実行します。

```
python get_active_window_title.py
```

アクティブウィンドウを切り替えるたびにアプリケーション名が表示されるはずです。

できた！

これを指定したサーバーに送信するようにすれば自分がきちんと仕事をしていることがきちんとわかり、「証明しろ！」って言われても大丈夫！！
...大丈夫！
......大丈夫だと思う。
GDPR クッキ

https://laboradian.com/cookie-consent-popup/


https://makoto-shimizu.com/news/gdpr-cookie-consent-manager/

https://qiita.com/haruto167/items/59fb73d974abf8f91ed2

http://kachibito.net/useful-resource/ihavecookies

https://r17n.page/2019/11/14/js-cookie-consent-usage/
【vue.js】ドラッグで順番を変えられるリストを作った

Vue.Draggableというライブラリを利用して実現しました
https://github.com/SortableJS/Vue.Draggable


▼まずは普通に表示
【js側】
データを用意します
(TestViewという名前のコンポーネントにしました)

```js
<script>
    export default {
        name: "TestView",
        data: function () {
            return {
                list: [
                    { id: 1, name: 'リスト1' },
                    { id: 2, name: 'リスト2' },
                    { id: 3, name: 'リスト3' }
                ],
            }
        }
    }
</script>
```

【HTML側】
listをv-forを使って表示します
v-forについて: https://jp.vuejs.org/v2/guide/list.html#オブジェクトの-v-for

```html
<template>
    <div v-for="content in list" :key="content.id" style="margin: 10px;">
       <span>
            {{ content.name }}
       </span>
    </div>
</template>
```

ここまででこんな感じの表示ができます(スタイルは適当に変えています)
![スクリーンショット 2020-10-11 6.31.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553668/9109fcc7-ef7f-3b92-ca19-0c764e55cfc8.png)


▼並び替えできるようにします
Vue.Draggableをインストール
npmでインストールしました

```html
npm install --save vuedraggable
```

【js側】
Vue.Draggableをインポート

```js
<script>
    //インポート部分追記
    import draggable from 'vuedraggable'

    export default {
        name: "TestView",
        data: function () {
            return {
                list: [
                    { id: 1, name: 'リスト1' },
                    { id: 2, name: 'リスト2' },
                    { id: 3, name: 'リスト3' }
                ],
            }
        }
    }
</script>
```

【HTML側】
draggableタグでドラッグしたいリストを囲みます

```html
<template>
    <draggable v-model="list">
        <div v-for="content in list" :key="content.id" style="margin: 10px;">
            <span>
                {{ content.name }}
            </span>
        </div>
    </draggable>
</template>
```

ドラッグ&ドロップで順番を変えられるようになりました(画像だとわかりにくいですが...)
![スクリーンショット 2020-10-11 6.50.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/553668/07bc23bf-361f-6b5e-234f-315730b3d85b.png)
【Django】QuerySetを辞書型(dict)のlistに変換する

#はじめに
modelから取得したデータをQuerySet→dict要素を持つlistに変換してあれこれしたかったのですが、意外とすぐに情報が出てこなかったので投稿します。

#結論
以下でOKです。

```python
from .models import Choice

choice_query_set = Choice.objects.all() #QuerySet型で全件取得
choice_list = list(choice_query_set.values())
print(choice_list)
#[{'id': 1, 'question_id': 1, 'choice_text': 'test1', 'votes': 3}, {'id': 2, 'question_id': 1, 'choice_text': 'test2', 'votes': 1}, {'id': 3, 'question_id': 1, 'choice_text': 'test3', 'votes': 2}]
```

#解説

```python
from .models import Choice

choice_query_set = Choice.objects.all()
print(choice_query_set)  #QuerySetで取得
#<QuerySet [<Choice: test1>, <Choice: test2>, <Choice: test3>]>

print(choice_query_set.values())  #変換１
#<QuerySet [{'id': 1, 'question_id': 1, 'choice_text': 'test1', 'votes': 3}, {'id': 2, 'question_id': 1, 'choice_text': 'test2', 'votes': 1}, {'id': 3, 'question_id': 1, 'choice_text': 'test3', 'votes': 2}]>

print(list(choice_query_set.values()))  #変換２
#[{'id': 1, 'question_id': 1, 'choice_text': 'test1', 'votes': 3}, {'id': 2, 'question_id': 1, 'choice_text': 'test2', 'votes': 1}, {'id': 3, 'question_id': 1, 'choice_text': 'test3', 'votes': 2}]
```

変換１：choice_query_set<font color="Red">.values()</font>で<font color="Red">QuerySetが持つ各要素(Choiceオブジェクト)をdict型に展開</font>
変換２：<font color="Red">list(</font>choice_query_set.values()<font color="Red">)</font>で<font color="Red">QuerySetからlistに変換</font>

以上です。
知ってしまえばなんてことないですね:cat2:
拼音 pīnyīn

```python:pinyin.py
#    好好学习             说说
from haohaoxuexi import shuoshuo
pinyin = {
    'shēngmǔ'   : ['23 items'],          # 母音     / 声母
    'yùnmǔ'     : {                      # 子音     / 韵母
        'dānyùnmǔ'      : ['6 items'],   # 単母音   / 单韵母
        'fùyùnmǔ'       : ['9 items'],   # 副母音   / 复韵母
        'qiánbíyùnmǔ'   : ['5 items'],   # 前鼻母音 / 前鼻韵母
        'hòubíyùnmǔ'    : ['4 items'],   # 後鼻母音 / 后鼻韵母
    },
    'zhěngtǐrèndúyīnjié'    : ['16 items'], # 整体认读音节 
}
shuoshuo(pinying)
```
Xcode 12 でのLife Cycle比較


Xcode 12.0.1

UIKit App Delegateの場合
![スクリーンショット 2020-10-11 午後05.33.39 午前.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33953/11d8519b-7ad4-aefd-4527-68d7ad211f3b.png)


SwiftUIの場合
![スクリーンショット 2020-10-11 午後05.35.24 午前.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33953/0deec4e6-44de-9e84-8679-23357335d16d.png)

デリゲートがなくて、スッキリ！
gempgをインストールしようとするとlibpq-fe.hがないと言われる

アプリ作成コマンドを実行した際のエラーに苦しめられたので後発者のためにメモ書きとして解決策を記しておくことにする。
すぐ本題に入りたい方は’libpq-fe.hをインストールする’項まで飛ぶことを推奨する。

######開発環境
`windows 10 home
ubuntu 20.04 LTS
ruby 2.7.1
Rails 6.0.3`


#問題深堀り順
問題の深堀り順としては
#####①アプリ作成コマンド

```
rails new (アプリ名) -d pstgresql
```
にて
pg（1.2.3）のインストール中にエラーが発生し、Bundlerを続行できません。
バンドルする前に、`gem install pg -v '1.2.3' --source'https：// ruby​​gems.org / '`が成功することを確認してください。
というエラーがでた。

#####②エラー文の指示コマンドを実行してみる

```
gem install pg -v '1.2.3'
```
すると、どこかに保存されているmkmf.lpgにログが残っているから見ろと指示される。

#####③mkmf.lpgログを確認する
ログの中身にlibpq-fe.hが見当たらないという旨のエラーがでてることを発見。
これ以上深堀りできないのでlibpq-fe.hが存在しないというのが真の原因と断定。

#libpq-fe.hをインストールする

#####方法①（主が解決した方法）

```
sudo apt install libpq-dev
```

主が解決した手順以外にも場合によっては解決するかもしれない方法も載せておく。
あくまでかもしれないなので、解決しなくても許してほしい。
ちなみに主はこれでは解決できなかった。
#####方法②

```
Sudo apt-get install libpq-dev
```
#####方法③

```
sudo install postgresql-devel
```
#####方法④

```
sudo install postgresql
```

#解決確認
```
rails new (アプリ名) -d pstgresql
```
を実行してもエラーが発生していないことを確認。
問題が解決できたと判断する。
主の場合方法①で解決できた。
#最後に
この記事にたどり着きどうしてもわからなかったらこの記事に助けを求めてみてほしい。
おそらくその頃には主もそれなりに知識をつけているはずだろうからきっと助けれるはずだ。
公開鍵暗号方式について

自分の備忘録のため投稿します。
[参考資料](https://www.amazon.co.jp/dp/B07L9QXX9J/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)

## 用語解説
#### 暗号化

データを第三者にわからないように変換。

#### 復号
暗号化したデータを元の状態に戻す。

#### 公開鍵

データの暗号化をする。世間に公開するための鍵だから公開鍵。

#### 秘密鍵

データを復号化する。他人に見られちゃいけないから秘密鍵。

## 公開鍵暗号方式の流れ

① Aさん（受信者）が公開鍵と秘密鍵を用意。

② 公開鍵を公開して「自分にデータを送るときはこの鍵で暗号化して送ってね」。

③ Bさん（送信者）は Aさんの公開鍵を利用してデータを暗号化。A さんに送信。

④ A さんは B さんから送られてきた暗号化されたデータを自分で持っている秘密鍵で復号化。
LaravelでReactを使う私的まとめ

#Laravel Mix
- フロントエンドのアセットをコンパイル、バンドルしてくれる
- 中身はwebpackでwebpackの設定をわかりやすく掛けるようにラッピングしてある
- sass,babelなどは最初から用意されている

>###バンドル
バンドルとは、束（ねる）、塊などの意味を持つ英単語で、単体でも提供可能な製品やサービスを、複数組み合わせてセットで販売したり、別の製品やサービスに付属して販売、提供することをこのように呼ぶ。
引用：[バンドル  【 bundle 】 ](http://e-words.jp/w/%E3%83%90%E3%83%B3%E3%83%89%E3%83%AB.html)

つまり違うものを組み合わせてくれるってことかな

#Laravel Mixの実行
```
npm run dex
```
>npm run dev を実行すると、
package.jsonに書いてあるスクリプトが実行され、
設定ファイルに記述したコンパイルやバンドルが実行される。

>npm run production の場合は圧縮されたファイルが出力される。
引用：[Laravel Mixとは？webpackをより便利に、簡単に。Laravel以外でも使えるよ。](https://qiita.com/minato-naka/items/bfc3bbd9a388084e6f17)

```
npm run watch
```
関連ファイルを監視する
変更を感知すると自動的に再コンパイル

#`webpack.mix.js`ファイル
###Sass
saasメソッドはSassをCSSコンパイル

```
mix.sass('resources/assets/sass/app.scss', 'public/css');
```

#ページを作ってみる
```javascript:resource/js/app.js
/**
 * Next, we will create a fresh React component instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

//require('./components/Example'); 
require('./components/index'); //ここを書き換える
```
次に、すべてのルーティングをindex.balde.phpに集中させる

```php5:web.php
Route::get('/{any}', function(){
    return view('index');
})->where('any', '.*'); 
```
bladeファイルを作成

```php5:index.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
  <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>Title</title>
</head>
<body>
<div id="root">
    {{-- <example-component></example-component> --}}
</div>

<script src="{{ asset('/js/app.js') }}"></script>
</body>
</html>
```

これでreact-router-domによるルーティングに対応できました。


参考:[LaravelにReactを導入する時の手順〜ルーティングの設定](https://qiita.com/10mi8o/items/b435ef7fb838a40058c5)

#参考
- [バンドル  【 bundle 】 ](http://e-words.jp/w/%E3%83%90%E3%83%B3%E3%83%89%E3%83%AB.html)
- [Laravel Mixとは？webpackをより便利に、簡単に。Laravel以外でも使えるよ。](https://qiita.com/minato-naka/items/bfc3bbd9a388084e6f17)
- [LaravelにReactを導入する時の手順〜ルーティングの設定](https://qiita.com/10mi8o/items/b435ef7fb838a40058c5)
[Rails] user_idのwrong number of arguments (given 2, expected 0..1)の解消法

#前提
deviseを導入してユーザーと投稿を紐づけるところ
（deviseなくてもいいがcurrent_userは@current_userで定義する必要あり）

#やったこと
### [こちら](https://teratail.com/questions/218921)を参考に`**`を追加

```Ruby
@gear = Gear.new(
  **gear_params,
  user_id: current_user.id
)
```
⇒`hash key "" is not a Symbol`という謎のエラーにより撃沈

### gear_paramsメソッドを使わずに全部書いてみた

```Ruby
@gear = Gear.new(
      category: params[:category],
      name: params[:name],
      maker: params[:maker],
      price: params[:price],
      memo: params[:memo],
      user_id: current_user.id
      )
```
なぜかrollbackされデータベースに保存されず。。
`ActiveRecord::RecordInvalid (バリデーションに失敗しました: Userを入力してください`
（未解決）

#解決方法
####完全に分けて書けばハッシュをシンボルにとか考えずに済む

```Ruby
def create
    @gear = Gear.new(
      gear_params
      )
    @gear.user_id = current_user.id
      .
      .
      .
end
```

#参考にさせていただいたサイト
[ユーザと紐付けしたモデルから投稿を保存するのに躓いたので。備忘録として](https://qiita.com/uugo__/items/673f0830f11fd2b26c82)

#補足
gear_paramsはこう書いています

```Ruby
  private
  def gear_params
    params.require(:gear).permit(:category, :name, :maker, :price, :memo)
  end
```
DeepLab V3+ をCore MLに変換する

![segmentation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235259/c5991d4b-6a77-65bd-0dbe-50c8c338d445.gif)
凍結グラフから変換します。

DeepLabをトレーニングする方法、凍結グラフとしてエクスポートする方法は下記の記事を参照していただければ。
[DeepLabv3＋を自前のデータセットで学習させる](https://qiita.com/john-rocky/items/b362931286739162628d)

#手順

###１、必要なライブラリを用意
TensorFlow1をインストールしていない場合はインストール。

```shell

pip install tensorflow==1.x
```

Colabの場合。TensorFlow1を選択。

```shell

%tensorflow_version 1.x
```
Core ML Toolsをインストール。

```shell

pip install coremltools==4.0
```

###２、変換

```python

import coremltools as ct

input = ct.ImageType(shape=(1, 513, 513, 3))
mlmodel = ct.convert('./frozen_graph.pb',inputs=[input])
mlmodel.save('./deeplabv3')
```

🐣
****
お仕事のご相談こちらまで
rockyshikoku@gmail.com

Core MLを使ったアプリを作っています。
機械学習関連の情報を発信しています。

[Twitter](https://twitter.com/JackdeS11)
[Medium](https://medium.com/@rockyshikoku)
F#でAtCoder HHKB2020(Cまで)

解法に関する解説は公式がやっているので、F#での実装や.NETに関連したことについて自分のわかる範囲で。

# A - Keyboard
[A - Keyboard](https://atcoder.jp/contests/hhkb2020/tasks/hhkb2020_a)

``` fsharp
let s = stdin.ReadLine()
let t = stdin.ReadLine()
match s with
| "Y" -> t.ToUpper()
| _ -> t
|> stdout.WriteLine
```

.NETのライブラリに`ToUpper()`という小文字を大文字に変えてくれるメソッドがあるのでそれを使えばOK。
[String.ToUpper メソッド (System) | Microsoft Docs](https://docs.microsoft.com/ja-jp/dotnet/api/system.string.toupper?view=netcore-3.1)
パターンマッチを使っていますが、別に`if..then..else`でももちろんOK。

# B - Futon
[B - Futon](https://atcoder.jp/contests/hhkb2020/tasks/hhkb2020_b)

何故か問題の意味が理解できなくてかなり時間がかかってしまった。

``` fsharp
let [|H;W|] = stdin.ReadLine().Split() |> Array.map int
let S = [|for i=0 to H-1 do stdin.ReadLine()|]
let mutable ans = 0
 
for i=0 to H-1 do
    for j=0 to W-2 do
        let s = S.[i].[j..j+1]
        if not (s |> String.exists(fun x -> x='#')) then ans <- ans + 1
 
for i=0 to H-2 do
    for j=0 to W-1 do
        let s = S.[i].[j].ToString() + S.[i+1].[j].ToString()
        if not (s |> String.exists(fun x -> x='#')) then ans <- ans + 1
 
ans |>
stdout.WriteLine
```

実際、もう少し綺麗に書けそうな気もしますが……。
あと`FSharp.Collections.List`を使うとインデックスを用いたアクセスが遅くなるので配列の方が良い。

# C - Neq Min
[C - Neq Min](https://atcoder.jp/contests/hhkb2020/tasks/hhkb2020_c)

最初、「この書き方だとTLEになるよね」と思いつつTLEになるパターンで出しました😂

``` fsharp
let N = stdin.ReadLine() |> int
let p = stdin.ReadLine().Split() |> Array.map int
let memo : int[] = Array.zeroCreate 200001
let mutable minNum = 0
for i=0 to N-1 do
    let rec f n =
        if memo.[n] = 0 then n
        else f (n+1)
    memo.[p.[i]] <- memo.[p.[i]]+1
    minNum <- if p.[i] = minNum then (f minNum) else minNum
    minNum |> printfn "%d"
```

例のごとく、`List`ではなく配列でないとインデックスを用いた要素のアクセスが遅いので、どの整数が出現したかどうか記録するコレクションは配列を用います。

[C#で競技プログラミングをし続ける人のためのTips](https://qiita.com/Camypaper/items/de6d576fe5513743a50e)にもあるように、C#では`Console.WriteLine`が低速であるのと同様に、F#の`printfn`も内部で`Console.Out`を使っているので遅いです。
このままだと800msぐらいかかるので、文字列の連結や`System.Text.StringBuilder`クラスを使う、`AutoFlush`のプロパティをOFFにした独自の出力方法を使うなど、何かしら工夫をして最後に一気に出力する方が**本当は**良いです。

いい加減AtCoder用のテンプレートプロジェクトを作っておく必要性を感じています。

``` fsharp
open System.Collections.Generic
let N = stdin.ReadLine() |> int
let mutable ans = 0
let s = new HashSet<int>()  //let mutable s = Set<int> [||]
let sb = System.Text.StringBuilder()
 
let rec g n =
    if s.Contains(n) |> not then n
    else g (n+1)
 
for p in stdin.ReadLine().Split() do
    if s.Add(p |> int) then ans <- g ans // s <- p |> int |> s.Add
    sb.AppendLine(ans.ToString()) |> ignore
 
sb.ToString() |> stdout.Write
```

終了後、他のC#の回答を見て`HashSet`などを使ってみた場合はこちら。再帰関数を`while..do`に変えることもできますが、再帰の方が誤差かもしれないが速い。あと`for`ループの外で関数定義した方が数十ms程度かもしれませんが速い。

ちなみに、コメントで示したようにF#の`Set`を`mutable`にして使ったり、再帰を利用して使ったりしても遅いのでおとなしく`System.Collections.Generic.HashSet`を使った方がよさげです。

# おわりに
最近本腰を入れて始めたばかりですが、F#での参加者は非常に少ないのでこれからも何かしらの何かを書いていきたいところです。
Pythonで数字の桁数を取得する方法

#はじめに
数字の桁数を取得する方法です。
型のキャストが少し面倒くさいですが簡単です。
[追記]コメントで、よりスマートな方法を教えていただきましたので記載しました！

#整数の場合
数字を文字列に変換して、長さを取得する。
負の数の場合、マイナス符号が桁数に入ってしまうので絶対値に変換しておく。

```python
num = -12345
num = abs(num)           # 絶対値に変換
num_str = str(num)       # 文字列に変換
num_digits = len(num)    # 文字列の長さ（桁数）を取得

print(num_digits)        # 実行結果 5
```
もしくは1行で

```python
num = -12345
num_digits = len(str(abs(num)))     # 一括変換
print(num_digits)                   # 実行結果 5
```
#小数の場合
基本的には整数の場合と一緒ですが、桁数なので小数点を排除します。

```python
num = 0.123456
num = abs(num)
num_str = str(num).replace(".","")    # 小数点を無視
num_digits = len(num)
print(num_digits)                     # 実行結果 7
```
# スマートな方法
数値かどうかを判定するisdigit()を使ってカウントします。
整数でも小数でもこの書き方で可能です。

```python
def count_digit(value):
    return sum(c.isdigit() for c in str(value))

print(count_digit(-12345))     # 実行結果 5
print(count_digit(0.12345))    # 実行結果 6
print(count_digit(-3.14))      # 実行結果 3
```
[Rails] deviseで追加した:usernameがデータベースに追加されない

#問題
- sign_up画面でユーザーネームを入力しても保存されない
- rollback transactionとでてなぜかDBに保存できない
 

#前提
- deviseを導入していて、新規カラムを追加している <br>（今回は:usernameカラム）
- エラーメッセージを日本語化している

#やったこと
- 英語のエラーが分からないので[deviseを日本語化する](https://qiita.com/you8/items/921e0dd1210eb0d158df)と<br>[Devise日本語化後の「translation missing」に対処する](https://poinorou.hatenablog.com/entry/2019/09/16/090336)を参照

#解決方法
application_controllerに

```Ruby:application_controller
class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception
  before_action :configure_permitted_parameters, if: :devise_controller?

  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [:username])
  end
end
```
と記入:ok_hand:
タイマー作成①

# 初めに

新卒でIT系の企業に就職して半年がたち、10月から本格的に業務に参加させていただいています。もやしと申します。

現在配属している部署で、月に1度、自身が行っている勉強や、それによる成長度合い等の発表をさせていただく事になりました。

せっかくなので、勉強の過程で得られた知識やプログラムを共有したく、今回Qiitaに登録しました!
読みにくい文章ですが、興味のある方は、ぜひ読んでいってください。

# 本題

会社の新卒研修で作成したタイマーソフトを、もう一度作り直そうと思います。
というのもこの作成したタイマーソフト、今見直すと酷過ぎるプログラムでして・・・。黒歴史になりかねないので、今一度誰もが納得する出来にしたいです!

# 要求仕様書

うろ覚えですが、以下に与えられた要求仕様書を載せておきます。
研修では、細かい仕様をサポーターの方と話し合いながら決めましたが、今回は自分で決めようと思います。

> - 20分50秒までカウントするタイマーを作成してください。
> - 分数を設定するボタンを1回押すと1分カウントアップし、秒数を設定するボタンを1回押すと10秒カウントアップするようにしてください。
> - クリアキーを押すと、設定した時間がリセットされるようにしてください。
> - タイマースタート・ストップは1つのキーで制御してください。
> - 時間の設定は、カウントダウンが停止している時のみ行えるようにしてください。
> - タイマーが0になったら、「タイマーが終了しました」と3秒間表示し、3秒たったら自動的に時間設定を行えるようにしてください。
> - ただし、「タイマーが終了しました」と表示中に何らかのキーが押された場合、強制的に時間設定が行えるようにしてください。

長くなりましたが、以上が仕様書となります。図にすると、こんな感じですかね。
![状態遷移図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/781063/69861dab-2b2c-1795-754c-90a725baf240.png)


# 環境

IDE：Visual Studio Express 2017

言語:C#

フォームアプリケーションではなく、コンソールアプリケーションとして作成します。

# コーディング規約

実際に業務を始めてから痛感していることですが、コーディング規約を守るのは非常に大切ですね。
今回は[マイクロソフトドキュメント](https://docs.microsoft.com/ja-jp/dotnet/csharp/programming-guide/inside-a-program/coding-conventions)のコーディング規約に従ってコーディングしていきます。

**メソッド名を作成者の名前にするのは犯罪です。絶対にやめましょう。**（個人単位のデバッグ用なら良い）

前置きは以上となります。
次回からは実際にコーディングを行っていくので、よろしければ次回も読んでくださいね。
AWS初心者VPCまでを備忘録として簡単にまとめてみた

AWSについて整理します。

AWS＝クラウドサービス
■AWS特徴
1.EC2やRDSなど100以上のサービスが存在
2.リソースが柔軟
3.従量課金制

●インフラとは
ここではサーバーやネットワークの事
●サーバー
クライアントに対してサービスを提供するコンピュータの事
●ネットワーク
クライアントとサーバーの間でデータの送受信を行っている部分
●クラウド
インフラをネットワーク経由で使用管理すること
●オンプレミス
インフラを自前で用意して、自社で所有管理する事

■ユーザー
1.ルートユーザー
2.IAM(アイアム)作業用ユーザーを使用する事
【理由】
ルートユーザーは特権ユーザーで何でもできる為
※基本的に使わないように

■VPCネットワーク
●リージョン
AWSの各サービスが提供されている地域の事＝アメリカ、東京リージョン等
→日本で東京リージョン以外を使うと、若干の遅延が発生するのと、為替レートなどの影響で料金が高くなるケース有り

●アベイラビリティーゾーン（サブネット）
独立したデータセンターのようなもの
重要：通常アプリケーションを管理する際に、このサブネットを複数使用して、サーバーダウン等に対するリスク分散を行う
サブネットの１つがアクセス集中でダウンしても、他のサブネットに切り替える事ができる

●VPC
AWS上に仮想ネットワークを作成できるサービスの事
→サブネットは、VPCを細かく区切ったネットワークの事

■大枠
AWSの中に東京(各地)リージョンが存在し、その中にVPCがある。
更にその中にアベイラビリティーゾーン（サブネット）が存在しているイメージ。

以上VPCまでの用語や考え方を簡単にまとめてみました。誤りがある場合はぜひご指摘下さい。宜しくお願い致します。
React Material UI + Node.js expressのアプリ構築手順をまとめた

# はじめに

フロントエンドがReact（Material UI）、バックエンドがNode.js expressのアプリを構築することがあったので、（何番煎じか分かりませんが）備忘録に手順を残します。


# 環境

- Windows 10
- Node.js v12.16.3
- npm 6.14.4
- yarn 1.22.4


# 手順

### ディレクトリ作成

```
# アプリのコードを管理するディレクトリを作成
mkdir app
cd app
# クライアント、サーバーのコードを配置するディレクトリを作成
mkdir client server
```

### フロントエンド：React, Material UI の導入

```
cd client
npx create-react-app my-app   ※my-app=アプリ名 ※npxはnpm 5.2 から利用できるパッケージランナーツール
cd my-app
yarn add @material-ui/core --save
# アプリ内でアイコンを使用したい場合はこれもインストールする。回線が遅いとインストール時にタイムアウトが発生する可能性があるため、タイムアウトの時間を長めに設定しておく。
yarn add @material-ui/icons --save  --network-timeout 1000000000
```

※動作確認は後ほど実施

### バックエンド：express の導入

```
cd ../..
cd server
npm init (対話式で色々と入力するものがある。こだわりなければ全てEnterでよい。）
npm install express --save
type nul > server.js (macではtouch server.js かな？ 単にsever.jsというファイルを作成しているだけ。)
```

server.jsをテキストエディタで開いて下記のコードをコピペする。

```javascript:server.js
const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.json());
// Reactのアプリ名によってはディレクトリ名を一部変更する
app.use(express.static(path.join(__dirname, '../client/my-app/build')));

app.listen((process.env.PORT || 8000), () => {
  console.log(`Listening on port ${PORT}`);
});
```

## 動作確認

### フロントエンド

- 開発用サーバーの起動

```
cd client/my-app
yarn start
```

http://localhost:3000 にアクセスしてこのような画面が表示されれば成功です。
![SnapCrab_NoName_2020-10-11_0-43-57_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191958/446afd89-9a16-7ea2-cb3f-37ad29c24996.png)


`yarn start` を実行中にApp.jsなどを変更して保存すると自動でコンパイルをしてページも自動でリロードされます。
  
フロントの開発中は `yarn start`で開発用サーバーを起動させつつ、バックエンドのexpressのサーバーも起動させてREST APIの呼び出しをするのが良いと思います。

- ビルド

コードをビルドして、静的なファイル（html, jsファイルなど）を出力します。

```
yarn build
```

デフォルトでは `app/client/my-app/build` にビルドされたファイルが出力されます。
このフォルダをexpressのstaticフォルダとして設定しておくと、 http://localhost:8000 で表示することが出来ます。

### バックエンド

- サーバー起動

```
cd server
node server.js
```

http://localhost:8000 にアクセスして、http://localhost:3000 と同様の画面が表示されれば成功です。
![SnapCrab_NoName_2020-10-11_0-43-33_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191958/2f2a61d7-26d9-36a8-f3aa-ec0d5268aef7.png)

# おまけ

Material UIの Button component Icon componentを組み合わせた例です。
![SnapCrab_NoName_2020-10-11_1-0-16_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191958/c794999c-a115-7762-a713-5d3b1bed126f.png)

Material UIのIconの参照先： https://material.io/resources/icons/?icon=check_circle_outline&style=baseline

```javascript:App.js
import React from 'react';
import './App.css';

import { Button } from '@material-ui/core';
import CheckCircleOutlineIcon from '@material-ui/icons/CheckCircleOutline';

function App() {
  return (
    <div className="App">
      <Button  variant="contained" color="primary">
        <CheckCircleOutlineIcon />
        please click!
      </Button>
    </div>
  );
}

export default App;
```

```css:App.css
.App {
  padding-top: 100px;
  text-align: center;
}

```
# 参考サイト
- [新しい React アプリを作る](https://ja.reactjs.org/docs/create-a-new-react-app.html)
- [Material UI公式](https://material-ui.com/)
AWSによるクラウド入門 学習まとめ

# What's this?

以下の講義を学習した際のメモ
https://tomomano.gitlab.io/intro-aws/#_%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB

# 学習メモ

## 3.3. AWSでクラウドを作るときの基本となる部品

### 3.3.1. 計算

- EC2(Elastic Compute Cloud)
- Lambda Function as a Service(FaaS)

### 3.3.2 ストレージ

- EBS(Elastic Block Store)
- S3(Simple Storage Service)

### 3.3.3 データベース

- DynamoDB

### 3.3.4 ネットワーク
VPC(Virtual Private Cloud)
UnityのおすすめAsset（自作）

完全に宣伝ですが便利なAsset２つ紹介します。

# [Simple Selection History](https://assetstore.unity.com/packages/slug/129646)
お気に入りなし無料版[Simple Selection History Lite](https://assetstore.unity.com/packages/slug/130881)

Unityの選択履歴をとってくれるUtilityツールです。
中規模以上の開発で以前選択したAssetがどこにあるのか探すのに手間なことが多かったので作りました。
私としても気に入っているので開発現場に入ったときにはとりあえず勧めています。（無料版もありますし）

見た目はこんな感じ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294118/73e417c3-3819-4f90-dc8f-919d7dddd98c.png)


#### 機能
単純な選択履歴だけでは使っていてもあまりなので以下の機能があります。

- ドラッグ＆ドロップ
- 拡張子フィルター
- アセットを開く
- ショートカット
- お気に入り
- お気に入りの表示名変更

[使い方動画はこちら](https://youtu.be/NY3E5aDBkN0)
(QiitaってYoutubeの動画貼れないのか・・・。)

#### 設定

|設定名|内容|
|:--|:--|
|Auto remove same file history|同じファイルの履歴の古い方を自動で削除します|
|Without Hierarchy object|Hierarchy の選択は履歴に追加しなくなる|
|Scroll only history|hisotryのみスクロールさせる|
|Update when selected history|履歴をクリックしたときにも履歴に追加します|
|(お気に入りの表示名を変更)|ナンバリングなどのファイル名だと分からなので表示名を変更出来ます|

[設定動画はこちら](https://youtu.be/88i7KDyB2TQ)

詳しいドキュメントのページは[こちら](https://sites.google.com/view/transsoftsite/Home/simple-selection-history)


# [Utility Button](https://assetstore.unity.com/packages/slug/168562)
自分でボタンを作れるUtilityツールです。
開発中によく使うMenuItem・デバッグ機能や複数の手順をボタンに登録できるものです。
中規模以上の開発だとMenuがいっぱいになっていて選択の迷子になったり、決められた手順を何度もやるのが面倒だと思ったので作りました。

ボタンに作成するのはちょっと面倒ですが、自分だけのメニューを作れる感じです。
こちらは無料版はありません・・・。

見た目はこんな感じ（画面上に1列で配置したとき）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294118/e6d01f66-412e-d57e-7019-ec52146efc3f.png)

詳しいドキュメントは[こちら](https://sites.google.com/view/transsoftsite/Home/utility-button)

#### 機能
結局何ができるかって言うと結構いろいろできる感じになってます。

- MenuItemの実行
- Assetの選択、開く
- Log出力
- 処理の遅延
- Methodの実行
- クラスメンバーへの値代入
- 作成したボタンのショートカット登録

私がよく使うのは [Sceneを開く] [AssetBundleを作る] [よく使うインゲームのデバッグ機能] などボタンして効率化しています。

#### 例

Asset Store Windowを開くのですが設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294118/c3e29ae3-38dd-d9fa-70b4-628f3c823fe6.png)
複数のシーンを開く設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294118/fe6df52b-746d-606f-88f5-b99256eda7e3.png)
Assetを開く設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294118/1248ddb8-7062-9d47-2545-f4f1743ae9b3.png)



どうぞよろしくおねがいします。
if文について理解しよう！

今回は、ifについて学習したので、アウトプットしていきます
※以下の内容は、学習内容のアウトプット用のため、誤りがある場合があります。予めご了承ください

#if文とは？
***ifを一言でいうと、条件の成否に応じて実行する構文のことです。***
基本的な書き方は以下の通りです


```swift:qiita.rbvar 
if 条件式 { 条件式がtrueの場合に実行される文 }
```

次は簡単な例を見ていきましょう。

```swift:qiita.rbvar 
1.let value = 5
2.if value <= 10 {

print("valueは１０以下です")

}

実行結果：valueは１０以下です

```
このコードを日本語に直してみると

```swift:qiita.rbvar 
もし、[valueの値が１０以下だったら{}の中のメソッド実行してくださいね]という意味になります
```
非常に簡単で、わかりやすいですよね！
***ちなみに、if文の条件式はBool型を返す必要があります！***


では、さらにif文について深堀していきましょう！

#else節とは？
else節は、***条件が成立しなかった場合に実行する文のことを言います。***
基本的な構文を見ていきましょう！

```swift:qiita.rbvar 
if 条件式 { 条件式がtrueの場合に実行される文

 }else{
条件式がfalseの場合に実行される文
}
```
次は簡単な例を見ていきましょう！

```swift:qiita.rbvar 
1.let value = ２６
2.if value <= 10 {

print("valueは１０以下です")

}else{

print("valueは１０より大きいです")

}
//実行結果：valueは１０より大きいです

```
上記と同様に、このコードを日本語に直してみると

```swift:qiita.rbvar 
もし、[valueの値が１０以下だったら{}の中のメソッド実行してくださいね。
そうでないなら、else{}の中のメソッドを実行してくださいという意味になります。
```

また、else節にはif文をつなげて書くことができます。

```swift:qiita.rbvar 
if 条件式1 {
 条件式１がtrueの場合に実行される文

 }else if 条件式２{
条件式1がfalseかつ、条件式２がtrueの場合に実行される

}else{
条件式１、条件式２の両方がfalseの場合に実行される
}
```

#if-let文とは？
if-let文は、optional型の値の有無に応じて、分岐を行い値が存在する場合は、値の取り出しも同時に行える文のことです。

***Optional型とは？*** Optional型を深堀したい人はこちら！
[Optional(Wrapped)型を理解しよう！](https://qiita.com/syunta061689/items/f3db4706a2866bea1eaf)

では、基本的な書き方を見ていきましょう！

```swift:qiita.rbvar
if let 定数名　= Optional型の値{
値が存在する場合に実行される文

}else{
値が存在しない場合に実行される文

```
}

次は、簡単な例を見ていきましょう。

```swift:qiita.rbvar
let optionalA =Optional("G")

if let X = optionalA {

print("値は\(X)")

}else{
print("値が存在しません")

実行結果:値はGです
```
#最後に
今回は、if文についてアウトプットしていきました。
プログラミング初心者でも、理解しやすく、アプリ開発でも多用される構文なので、しっかり基礎をマスターしていきたいです。
UITextContentType の rawValue 一覧。

UITextContentType.init(rawValue: ) を使いたかったんですけど、rawValue が若干違っていたので自分用にリスト化しておきます。

| UITextContentType | rawValue |
|:-:|:-:|
| .addressCity  | address-level2 |
| .addressCityAndState  | address-level1+2 |
| .addressState  | address-level1 |
| .countryName  | country-name |
| .creditCardNumber  | cc-number |
| .emailAddress  | email |
| .familyName  | family-name |
| .fullStreetAddress  | street-address |
| .givenName  | given-name |
| .jobTitle  | organization-title |
| .location  | location |
| .middleName  | additional-name |
| .name  | name |
| .namePrefix  | honorifix-prefix |
| .nameSuffix  | honorifix-suffix |
| .newPassword  | new-password |
| .nickname  | nickname |
| .oneTimeCode  | one-time-code |
| .organizationName  | organization |
| .password  | password |
| .postalCode  | postal-code |
| .streetAddressLine1  | address-line1 |
| .streetAddressLine2  | address-line2 |
| .sublocality  | address-level3 |
| .telephoneNumber  | tel |
| .URL  | url |
| .username  | username |

たぶん二度と使う気はしないですが、ざっと検索した限りだと見つけられなかったのでまとめておきます。
なぜスクールはRubyを学習させるのか

# なぜJavaではなくRubyを推奨するのか
![iStock-973074712-490x265.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/725167/6e143b5c-7560-1194-72de-46124c645b39.jpeg)

## 結論

挫折しにくく比較的理解しやすいから(参考文献豊富)

# 実際に転職で求められるスキルとは

レバテックでの言語別求人
![sub1(1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/725167/252ea9ab-0dd5-429f-aeaf-68f5fdc5d800.png)
こんな感じでJavaが全体の<font color="Red">約３５%</font>と高割合を占めていて、PHPと合わせる全体の<font color="Red">約５０%</font>という結果となっています。
![kangaeruhito.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/725167/ea235c63-f1e3-91e8-1dfa-43958ad0ee8a.png)

**Rubyの需要・・・・・**

ってなる人、分かります。正直Wantedlyや他媒体の求人を見ていてもRubyエンジニアを求めてる企業はかなり少ないです。じゃあなんでスクールは推すのかというと、、
<font color="blue">アプリケーションを自力で作りやすいから!!!</font>
これに尽きると思います。Railsを使って便利なgemも使えば簡単に実装できますし、個人スケールで簡単にアプリ作成ができます。

# だからこそ企業が見る視点とは

スクール経由の求人企業なら何を学んできたのかを全て知り尽くされています。だからこそ、自発的に学んだ事をアプリに取り入れたり、自己研鑽しているかを重視しているような気がします。(多分)

# 結論

スクールでは実装に必要最低限の事しか教えてもらえず、あぁ〜もう無理やぁ〜ってなる気持ちも分かりますが、どちらかというとその部分を１番見ているポイントだと思うので最後まで諦めずに自発的に学んで転職・就職を成功させましょう！！！

現場からは以上です！
新潟県の Go To EATの加盟店一覧のPDFをCSVに変換

[新潟県Go To Eatキャンペーン](https://niigata-gte.com/)の利用できる店舗一覧（PDF）をCSVに変換

10/28現在はPDFがダウンロードできません
こちらに[新潟県の Go To EATの加盟店一覧をスクレイピングしてCSVに変換](https://qiita.com/barobaro/items/d1ac3a932abaa2959c14)の記事を作成しました

# PDFからCSV（現在は利用できません）
```shell
# PDFをダウンロード
wget https://niigata-gte.com/pdf/shop-list.pdf -O data.pdf

apt install python3-tk ghostscript
pip install camelot-py[cv]
```

# コマンド
```shell
camelot -p all -o data.csv -f csv -strip '\n' -split lattice -scale 40 data.pdf
```

# Python
```python
import camelot
import pandas as pd

tables = camelot.read_pdf(
    "data.pdf", pages="all", split_text=True, strip_text="\n", line_scale=40
)

df = pd.concat(
    [
        table.df.iloc[1:].set_axis(
            ["取扱店コード", "ジャンル", "店舗名", "住所", "電話番号", "テイクアウト", "デリバリー"], axis=1
        )
        for table in tables
    ]
)

df.to_csv("niigata.csv", encoding="utf_8_sig")
```
Python で、時差考慮で現在日時取得

# この記事について

この記事では、Python で現在日時を、時差考慮の上での取得方法について綴ったものです。
標準モジュール (` datetime `) のみの使用で、Python2 でも Python3 でも動く方法をメモしました。

` datetime `モジュールの色々なメソッドやオブジェクトの詳しい説明は省いています。

# きっかけ

Python で Web アプリを実装し、Heroku 上で動かそうとしていたときのこと。
ある機能の実装をしようとし、現在日時の取得の必要が。

単に現在時刻を取得しようとすると、Heroku サーバのシステム時刻が取得される。
Heroku サーバでは、+00:00 (UTC) でシステム時刻が動いている。

では、日本でアプリを動かしたとき、単に Heroku のシステム時刻が使われたらどうなるか。
アプリで機能を動かし、時刻取得をしたとき、日本時間 12:00 とします。
すると、Heroku のシステム時刻は 3:00。
日本時間は 12:00 だけど、アプリでは 3:00 として処理が進んでしまう。

んー、これじゃ良くない･･･。(カレンダー、リマインダーならなおさら。)
単に 9時間足してやればすぐ解決だが、せっかくだからサーバのタイムゾーン設定に依存せずに正確な日時が帰ってくるようにしたいな･･･。

# 手順

先に、とりあえず動くコード全体から示してしまいます。

```py
import datetime

# UTC (協定世界時) の時刻を取得
time_now_utc = datetime.datetime.utcnow()
print(time_now_utc)
# 2020-10-10 14:51:22.910110

# UTC より、日本は 9時間進んでいる
time_dt_ja = datetime.timedelta(hours=9)
print(time_dt_ja)
# 9:00:00

# UTC に 9時間足してやれば、日本時間になる
time_now_ja = time_now_utc + time_dt_ja
print(time_now_ja)
# 2020-10-10 23:51:22.910110
```

## 1. まずは UTC (協定世界時) の取得

` datetime.datetime.utcnow() `で日時を取得してやると、稼働マシンのタイムゾーンが日本でもイギリスでもアメリカでも、同じ結果 (UTC) が得られます。
(` datetime.datetime.now() `だと、稼働マシンのタイムゾーン設定によって結果が変わってきてしまいます。)
まずはこれで稼働マシンのタイムゾーン設定の違いを埋めます。

```py
time_now_utc = datetime.datetime.utcnow()

print(time_now_utc)
# 2020-10-10 14:51:22.910110

type(time_now_utc)
# <class 'datetime.datetime'>
```

ここでは` datetime `オブジェクトが得られます。

## 2. 次に時差を適用する計算の準備

` timedelta `オブジェクトの準備をします。
` datetime `オブジェクトは**時刻情報**のオブジェクトで、` timedelta `は**時間情報**のオブジェクトです。

```py
time_dt_test = datetime.timedelta(days=1, seconds=1, microseconds=1, milliseconds=1, minutes=1, hours=1, weeks=1)

print(time_dt_test)
# 8 days, 1:01:01.001001

type(time_dt_test)
# <class 'datetime.timedelta'>
```

このような形で日 (週、日) や時間 (時間、分、秒) を指定してやると、日と時間情報に変換してくれます。

## 3. 最後に計算

` datetime `オブジェクトと` timedelta `オブジェクトは、` + ` ` - `で演算できます。
UTC に 9時間を足してやることで日本時間になるので、

```py
time_now_ja = time_now_utc + time_dt_ja

print(time_now_ja)
# 2020-10-10 23:51:22.910110
```

あとは、適宜` datetime `のメソッドを使うなりしておしまい。

```py
print(time_now_ja.strftime("%Y年 %m月 %d日"))
# 2020年 10月 10日
```

` strftime() `についてですが、` %Y `, ` %d `, ` %m `だけでなく、色々な書式コードがあるようです。
詳しくは公式ドキュメントを参照
<https://docs.python.org/ja/3/library/datetime.html#strftime-strptime-behavior>

# 余談

公式ドキュメントによると、UTC の取得は` datetime.datetime.utcnow() `よりも
` datetime.datetime.now(datetime.timezone.utc) `の方が推奨されているようです。

<https://docs.python.org/ja/3/library/datetime.html>

ただ、Python2 では` timezone `オブジェクトが無いようです。

(でも、タイムゾーン関係は` timezone `オブジェクトを使っての実装の方が多分ずっとスマート。)
PDOクラスによるデータベース接続

# はじめに
phpを使うエンジニアを目指す身としてしっかりphpのことを深く理解していきたい！と言うことで、これからパーフェクトphpを読んで学んだことをこれからアップしていこうと思います。
初心者がなんか頑張ってるなーと温かい目で見ていただけると幸いです。
間違って理解している点などあれば是非終えていただけると幸いです。

# PDOによるデータベース接続

パphpでは以下のように接続すると書いているが、公式リファレンスによるとこの拡張モジュールは PHP 5.5.0 で非推奨となり、PHP 7.0.0.0 で削除されたとのことです。

```
$link=mysql_connect("localhost","root","root");  
```

僕はバージョン８になってから始めているのでsqlごとに接続方法を変えているのを初めて見ました。(PDOクラスによってデータベースの差異をなくしているので個々の接続方法があるのは当然ですが)
バージョン7以降ではpdoを使って接続する頃を推奨されているので以下のように書きます。

```
try{
    $db = new PDO('mysql:dbname=online_bbs; host=localhost;
    charset=utf8',"root","root");
    $db->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
    $db->setAttribute(PDO::ATTR_EMULATE_PREPARES,false);
    echo "接続成功";
}catch(PDOException $e){
    echo 'DB接続エラー:'.$e->getMessage();
}
```

ここではpdoの動作オプションをしてするPDO::Attributeメソッドを使っている。  

```
PDO::Attribute([オプション種別],[オプション値])  
``` 

### `PDO::ATTR_ERRMODE`はエラーの通知方法を指定している。
デフォルト値はPDO：:ERRMODE_SILENTが指定されていてこのままではエラーを出力しない(PDO：：errorCodeメソッドでエラーコードのみ取得可能)今回はPDO::ERRMODE_EXCEPTIONを指定することで例外（主にPDOException）をスローする。これによって接続できた場合は例外処理をスロー（スルー）できる。例外に対応する為はtry~catchブロックを使いキャッチするようにする。PDOExceptionはExceptionクラスのサブクラスなのでExceptionとしてキャッチすることも可能。

### `PDO::ATTR_EMULATE_PREPARES`はプリペアートステートメントのエミュレートを指定する 
デフォリトではtrueになっています。trueのままでは自動エスケープはされるものの 、SQLインジェクションの危険があるのでfalseにしておきます。
CentOS7+Anaconda+Django+ApacheでKerasを動かす

Anacondaで作った画像処理プログラムをApache+Djangoで動かしたくなったので簡単な自分用メモ。SSLとかセキュリティ的なことは全くしていません。
https://qiita.com/hinoma/items/5b881b8ac531a0ba7953 の続きになります。
とりあえず文字メインです。画像などはまだ用意してないので、後々準備できたら載せます。

#Djangoプロジェクト

前回の記事そのままだとCSSが動きません。そのため，setting.pyを編集します。

```setting.py
import os
TEMOLATES = [
  {
     'DIRS' : [os.path.join(BASE_DIR, 'templates')]


LANGUAGE_CODE = 'ja'
TIME_ZONE = 'Asia/Tokyo'

STATIC_ROOT = os.path.join(BASE_DIR, 'static')
```
そのあと，manage.pyとかと同じ階層に，staticディレクトリ, templatesディレクトリを作成し，
staticディレクトリにはcssファイル, templatesディレクトリにはhtmlファイルを入れます．

```/etc/httpd/conf.d/django.conf
# 追記
WSGIApplicationGroup %{GLOBAL}
WSGIPythonHome /usr/local/bin/pyenv/versions/anaconda3-4.4.0/

Alias /static/ /var/www/komon/static/
<Directory /var/www/komon/staitc>
  Require all granted
</Directory>
```

```
# python manage.py collectstatic
```
これを実行しましょう。

# 機械学習プログラムを実行
opencv, keras, tensorflow など使うことがあるので，これらをインストールしていきます。

```
# pip install opencv-python==4.4.0.44
# conda install keras=2.2.4
# conda install numpy=1.16.2
# conda install tensorflow=1.13.1
```
keras=2.2.4をインストールするとnumpy1.18がインストールされますが、これの相性が悪いのでダウングレードは必須です。

#libstdc++.so.6 version cxxabi_1.3.8' not found
いざapacheを実行したら起こったエラーがこれ。どうやら、libstdc++.so.6の中にcxxabi_1.3.8なるものがないらしい

```
# strings /usr/lib64/libstdc++.so.6 | grep CXXABI_
CXXABI_1.3
CXXABI_1.3.1
CXXABI_1.3.2
CXXABI_1.3.3
CXXABI_1.3.4
CXXABI_1.3.5
CXXABI_1.3.6
CXXABI_1.3.7
```
どうやら1.3.8がないので、これを何とかして取得する必要がある。

```
# cp /usr/local/bin/pyenv/versions/anaconda3-4.4.0/lib/libstdc++.so.6.0.26 /usr/lib64/
# mv libstdc++.so.6 libstdc++.so.6.bak
# ln -s libstdc++.so.6.0.26 libstdc++.so.6
# string /usr/lib64/libstdc++.so.6 | grep CXXABI_
(CXXABI_1.3.8があればよい)
```

```
# systemctl restart httpd
```
これを実行して問題なければ，djangoプロジェクトのviews.pyなどに

```python

import tensorflow as tf
```
などと追加した上で、外部のPCからIPを打って画面が表示されたら大丈夫だと思います。


# 画像認識などで画像に「日本語」を表示したいとき
英数字であれば

```python
cv2.putText(画像パス, 表示させたい文字, (x, y), cv2.FONT_HERSHEY_PLAIN, 2, 色, 1, cv2.LINE_AA)
```
などで表示させることはできるが、日本語はopencvでは表示できないためpillowを使う

```python
from PIL import Image, ImageFont, ImageDraw
```
はプログラムを通るが，日本語を表示させるときはフォントを読み込む必要があるので以下のコードで読み込む。

```python
font = ImageFont.truetype(fontpath, fontsize)
```

これが場合によってはエラーを起こすことがあり，

```
The _imagingft C module is not installed
```

となったときは以下のように解決するとよい。

```
# yum install freetype-devel libjpeg-devel libpng-devel
# pip uninstall pil pillow
# pip install pillow
# pip list
(これでpillowがあるか確認)
```

などのようにすると自分の環境では動作した。
numpyでファイルに要素を書き出し確認したい。

#配列の結合などで、思わぬエラーになり、ファイルに要素を書き出して確認したいがデフォルトではfloatなのでうまくいかない。

np.savetxtで、fmt="%d"を指定して書き出す。

```
np.savetxt("a.csv", target, fmt = "%d")
```
TimePickerDialogで未来時刻が選択出来ないようにする

TimePickerDialogで未来時刻が選択出来ないようにしようと思った。

しかし...

実装方法を探しに探したが、全く見つからぬ٩( ᐛ )و

そして私は **[MaterialDateTimePicker](https://github.com/wdullaer/MaterialDateTimePicker)** というライブラリに出会った。

### 実装してみる

- build.gradleのdependenciesに以下を追加

```kotlin
implementation 'com.wdullaer:materialdatetimepicker:4.2.3'
```

- MaterialDateTimePickerを表示してみる（ボタンをクリックしたらダイアログが表示されるようにしています）

```kotlin
class MainActivity : AppCompatActivity() {
  
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        findViewById<Button>(R.id.show_timepicker_button).setOnClickListener {
            clickButton()
        }
    }

    private fun clickButton() {

        // TimePickerDialogのOKをクリックした時に呼ばれる。
        // キャンセルや画面をクリックしてDialogを終了した時には呼ばれない
        val callback = TimePickerDialog.OnTimeSetListener { view, hourOfDay, minute, second ->
          // 選択した時間を取得して、何らかの処理を行う
        }

        val cal = Calendar.getInstance()

        TimePickerDialog.newInstance(
            callback,
            cal.get(Calendar.HOUR_OF_DAY),
            cal.get(Calendar.MINUTE),
            false
        ).show(supportFragmentManager, TAG)
    }

    companion object {
        private const val TAG = "MainActivity"
    }
}
```
表示された( ´∀｀)

<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365643/5eb187c3-f3bc-7cc1-61db-8eaeb57d9b87.png">

### 未来時刻が選択出来ないようにする

```kotlin
val cal = Calendar.getInstance()
val hour = cal.get(Calendar.HOUR_OF_DAY)
val minute = cal.get(Calendar.MINUTE)

TimePickerDialog.newInstance(callback, hour, minute, false).apply {
  // 現在の時刻を上限に設定する
  val timepoint = Timepoint(hour, minute)
  setMaxTime(timepoint)
}.show(supportFragmentManager, TAG)
```

未来時刻が選択出来ないようになりました

<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365643/5d909ee3-0e3d-ba71-c869-97bde59457e4.png"> <img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365643/f97b8762-9277-9113-b689-a1294685b0fd.png">

### その他の設定
- MaterialDateTimePickerのデザインを変更

```kotlin
TimePickerDialog.newInstance(callback, hour, minute, false).apply {
  // TimePickerDialogのカラーを設定
  accentColor = ContextCompat.getColor(this@MainActivity, R.color.colorAccent)
  // OKボタンの文言を設定
  setOkText("よしっ!")
  // OKボタンのカラーを設定
  setOkColor(ContextCompat.getColor(this@MainActivity, R.color.colorAccent))
  // キャンセルボタンの文言を設定
  setCancelText("あかん")
  // キャンセルボタンのカラーを設定
  setCancelColor(ContextCompat.getColor(this@MainActivity, android.R.color.darker_gray))
}.show(supportFragmentManager, TAG)
```

- TimePickerDialog.newInstanceのis24HourModeをtrueにすると24時間表示になる

<img width="200" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365643/706f31cb-8f85-cc70-c61e-d4f13c192c81.png">
[Julia occursin] Stringの中に目的のStringが存在するかチェック

# Stringの中に目的のStringが存在するかチェック

### Juliaだと
```Julia
occursin("ab", "abc")  # Stringがあるかをチェック
# true

occursin("12", "abc")
# false

'a' in "abc"  # Charがあるかをチェック
# true

'1' in "abc"
# false
```

`occursin` は `findfirst` や `findnext` とほぼ同じ。詳しくは以下を参照。
https://github.com/JuliaLang/julia/blob/539f3ce943f59dec8aff3f2238b083f1b27f41e5/base/strings/search.jl

```Julia
# 以下の二つは同じ
occursin("ab", "abc")
findfirst("ab", "abc") != nothing
```

### Pythonだと
```Python
"ab" in "abc"  #  Stringがあるかをチェック
# True

"12" in "abc"  
# False

'a' in "abc"  # Charがあるかをチェック
# True

'1' in "abc"
# False
```

# Version
julia version 1.0.5
DockerのBuildKitを有効化する (mac)

Docker for Macの「Preferences」を開き、「Docker Engine」のConfigureを以下のように変更する

```json
{
  "debug": true,
  "experimental": true,
  "features": {
    "buildkit": true
  }
}
```

![スクリーンショット 2020-10-10 23.43.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145075/fd5d0804-305d-4661-954c-138f12ec869b.png)

変更したら右下の「Apply & Restart」を押して反映する

`.bashrc`もしくは`.zshrc`に以下の環境変数を追加する

```sh
export DOCKER_BUILDKIT=1
export COMPOSE_DOCKER_CLI_BUILD=1
```

シェルを再起動する
これで`docker build`及び`docker-compose build`でBuildKitが有効になる
【RSpec】ヘルパーメソッドが使われたviewファイルをテストしたらActionView::Template::Error:が出た。。

個人開発のアプリに通知機能を実装し、その後GitにpushしてCircleCIのテスト結果を確認したら突然大量のテストが失敗していて少し困ったので、その解決方法をここで共有させて頂きます。

##エラー内容

```
Failure/Error: -if unchecked_notifications.any?

ActionView::Template::Error:
  undefined local variable or method `unchecked_notifications' for #<#<Class:0x0000555732134140>:0x00005557326f7f78>
```
通知が来ている場合と来ていない場合で表示するviewを変えるために、```unchecked_notifications```という、ヘルパーメソッドを定義しました。しかし、RSpec実行時にはこのヘルパーメソッドが読み込まれておらずエラーが出てテストに失敗してしまったようです。

```ruby:notifications_helper.rb

module NotificationsHelper
  def unchecked_notifications
    @notifications = current_user.passive_notifications.where(checked: false)
  end
end
```

##解決策
解決策は簡単です。
テストを実行するファイルに、モジュールをインクルードするれば解決するはずです。↓例

```ruby:post_spec.rb

require 'rails_helper'
#ヘルパーメソッドをインクルード
include NotificationsHelper

RSpec.describe '投稿機能', type: :system do
  #テスト処理
end
```

##最後まで読んでいただきありがとうございます！
日々学習したことをアウトプットしてます！ご指摘などあればコメントいただけますと幸いです！
each文の中にeach文でいい気分！？

#はじめに
each文が入れ子になると、読みにくいので、どう考えれば良いのか、まとめてみた。


##配列の中の配列の中の配列

```ruby

shopping_price = [["野菜", [200, 250, 220]], ["フルーツ", [1200, 1500]]]
```
そもそも配列の中に配列がある場合、どのようにして中の値を取り出すのか。
それは、添字を重ねることで、取り出すことができる。
上の配列で`1200`を取り出すなら、

`puts shopping_price[1][1][0]`

となる。

##each文

基本的な記述は

```ruby

配列.each do |ブロックパラメーター（変数）|
 #繰り返したい処理
end
```
ブロックパラメーターは`do~end`の中でのみ扱える変数。イメージとしては、配列の中が一つ一つ入っていく感じ。

配列の名前が複数形の場合、その単数形を入れることが多い。

##each文の中にeach文

```ruby

shopping_price = [["野菜", [200, 250, 220]], ["フルーツ", [1200, 1500]]]

shopping_price.each do |shopping|
 sum = 0
 shopping[1].each do |price|
  sum += price
 end
 puts "#{shopping[0]}の合計金額は#{sum}"
end
#=>野菜の合計金額は670円
#=>フルーツの合計金額は2700円
```

外のeach文には、
１回目に`["野菜", [200, 250, 220]]`
２回目に`["フルーツ", [1200, 1500]]`
が`|shopping|`の中に入る。

中のeach文の配列には、`shopping[1]`が当てられている。
つまり、
１回目に`[200, 250, 220]`
２回目に`[1200, 1500]`
が`price`の中に入る。

１回目の計算は、
sum = 0 + 200
sum = 200 + 250
sum = 450 + 220

となる。

shopping[0]には、`野菜`、`フルーツ`がそれぞれ入る。

##最後に
[角括弧]がたくさん出てきて、読みにくいが、どの[角括弧]も必要。
each文の中にeach文や配列の中に配列は読みにくいので、リファクタリングが必要だろう。
LaravelでExample.jsを表示させてみる

Reactを使う準備はできた
じゃあExample.jsの描画はどうやるんだ？ということで私的まとめ

###環境
- laravel 7.28.4

###準備

```
npm run dev
```
これを実行する理由は以下
>ブラウザで確認するためにnpm run watchコマンドを実行しておきます。npm run watchコマンドを実行しておくとファイルを更新するその更新を検知し自動でコンパイルを実行してくれます。
参考：[初めてのLaravel6.xとReact入門](https://reffect.co.jp/laravel/laravel6-react-router)

ファイルが変更されるたびにビルドをしてくれるってことですな
実行しておきましょう

###表示
表示させるコンポーネントはこちら
公式のまま

```Example.js
import React from 'react';
import ReactDOM from 'react-dom';

function Example() {
    return (
        <div className="container">
            <div className="row justify-content-center">
                <div className="col-md-8">
                    <div className="card">
                        <div className="card-header">Example Component</div>

                        <div className="card-body">I'm an example component!</div>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Example;

if (document.getElementById('example')) {
    ReactDOM.render(<Example />, document.getElementById('example'));
}

```
これを表示するViewを作成

```php5:/resources/views/sample.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
  <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>Title</title>
</head>
<body>
<h1>sample</h1>
<div id="example">
    <example-component></example-component>
</div>

<script src="{{ asset('/js/app.js') }}"></script>
</body>
</html>
```
参考：[LaravelでVue.jsを使って開発するファーストステップ](https://www.ritolab.com/entry/171)

Example.jsではdivのid名appに描画するから,
表示用のViewにそのように設置する

後はルーティング

```php5:web.php
Route::get('/sample', function () {
    return view('sample');
});
```

これで`locahost:8000/sample`にアクセスすれば表示がされる

###疑問
- 無意識に`locahost:8000/sample`にアクセスしたから表示されたもののポートの管理はどこでやっているのか
- php artisan serveを実行していないのにlocalhost:8000につないだらLaravelのwelcomeページが表示されることからちゃんとルーティングがされているのはなぜか
 


#参考
- [LaravelでVue.jsを使って開発するファーストステップ](https://www.ritolab.com/entry/171)
検索機能の実装

#はじめに
個人アプリの作成にて、投稿した記事の内容を検索で表示出来るように検索機能の実装を行う。

#ルーティングの設定

今回は:idを指定してページに遷移しないので、collectionを使用してルーティングを設定します。

```routes.rb
resources :posts do
  get :search, on: :collection
  resource :likes, only: [:create, :destroy] -いいね機能実装
end
```

#モデルの設定

**LIKE句**
LIKE句は、文字列の検索をすることができる。
whereメソッドと一緒に使う。

| 実行例 | 詳細 | 
|:-----------|------------:|
| where('title LIKE(?)', "a%")      | aから始まるタイトル       | 
| where('title LIKE(?)', "%b")     | bで終わるタイトル      | 
| where('title LIKE(?)', "%c%")      | cが含まれるタイトル       | 
| where('title LIKE(?)', "d_")        | dで始まる2文字のタイトル         |
| where('title LIKE(?)', "_e")      | eで終わる2文字のタイトル      | 


```app/models/post.rb
def self.search(search)
  return Post.all unless search
  Post.where('body LIKE(?)', "%#{search}%")
end
```

#コントローラーにsearchアクションを定義

```post_controller.rb
def search
  @posts = Post.search(params[:keyword])
end
```

#viewの実装
**renderメソッド**を使って、部分テンプレートを行っているものとします。
{ post: post } の右側の**post**はeachメソッド内の変数としての**post**で**post**のインスタンスを示しています。左側の**post**は部分テンプレート内での変数の名前を表しています。

```search.html.erb
<% @posts.each do |post| %>
   <%= render partial: "post", locals: { post: post } %>
<% end %>
```

#おわりに
比較的簡単に検索機能の実装は完了しました。
他にも機能を実装し、出来ることを増やしていこうと思います。
最後まで見ていただきありがとうございます:grin:
swiftで文字列を1文字ずつの配列に変換する

AtCoderの問題を解いている際に、文字列を1文字ずつ分割する必要があったのでメモ

```Swift
    let charArray = Array("abcdef")
    
    print(charArray)
    // ["a", "b", "c", "d", "e", "f"]
    print(type(of: charArray[0]))
    // Character
```
GHE（GitHub Enterprise）のバージョンをいちユーザーが確認する方法

# GHEのバージョンを確認する方法
1. GHEのページをどこでもいいので開く
2. ソースを表示する（Google Chromeなら「右クリック」->「ページのソースを表示」）
3. 「GitHub Enterprise Version」でページ内検索する
4. 下のようなタグがあるので、そこに書いてあるバージョンを確認する

```
<a aria-label="Homepage" title="GitHub Enterprise Version 2.19.12" class="footer-octicon d-none d-lg-block mx-lg-4" href="https://xxxxxxxx">
```

# GHEのバージョンを確認したくなった経緯

GitHub CLIを職場で使いたいと思い[GitHub CLI 公式ドキュメント](https://cli.github.com/manual/)を確認したところ、v2.20以降しか対応してないとのことでした。
自分の現場で使うことができるのか確認するためにGHEのバージョンを知りたかったわけですが、自分の現場はv2.19だったので使うことができませんでした。
悲しい。。。
buttonタグ マウスポインターを矢印から指(手)マークにする方法

## ボタン上のマウスポインター
HTMLへbuttonタグを記述し、ブラウザにボタンを作成する。
ブラウザに表示されたボタン上にマウスカーソルを重ねても、マウスポインターが矢印マークのまま指(手)マークへ変更されなかった。
下記実装で解決したので備忘録として記載しておきます。

## 実装内容
`style="cursor:pointer"`を追加する。

```html
<button class="new-text-btn">矢印マーク</button>
<button class="new-text-btn" style="cursor:pointer">手マーク</button>
```

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css,result" data-user="shimizukosuke19910320" data-slug-hash="pobJvvv" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="pobJvvv">
  <span>See the Pen <a href="https://codepen.io/shimizukosuke19910320/pen/pobJvvv">
  pobJvvv</a> by ShimizuKosuke19910320 (<a href="https://codepen.io/shimizukosuke19910320">@shimizukosuke19910320</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## 参考記事
ボタンのデザインは下記サイトを参照
https://jajaaan.co.jp/css/button/