OmniAICreator/Qiita-1.07M huggingface dataset:
flaskとsqlite3の接続

<div align="center">
  <img src="https://flask.palletsprojects.com/en/1.1.x/_images/flask-logo.png" />
</div>
# はじめに
Flaskを使用して１からアプリケーションを作り、必要な技術を学んでいただけるようにまとめています。

- [flaskによる簡易アプリの作成](https://qiita.com/k_yokozuka/items/7e7d4a095dcf32ec9b30)
- [Home画面を作成してみる](https://qiita.com/k_yokozuka/items/2526c1dfc5ae78b30642)
- [認証機能を作成してみる](https://qiita.com/k_yokozuka/items/46c7afab4f5335112105)
- データベースを使用してみる ← ★現在ここ
- [CRUD機能を作成してみる](https://qiita.com/k_yokozuka/items/6b67b25e541ae4af6fe3)

# databaseにアクセス

#### データベースのインストール・設定
今回はSQLiteを使用します。
※ macの方はデフォルトでインストールされています。
※ windowsの方は[こちら](https://www.sqlite.org/download.html)からインストールしてください。
また、設定は[こちら](https://www.dbonline.jp/sqlite/install/)を参照して行ってください。

* インストール確認

~~~
$ sqlite3 -version
3.28.0 ...
~~~

また、今回使用するORM（Object Relational Mapper）のインストールを行います。

* SQLAlchemyのインストール

~~~
# mac
$ pip3 install Flask-SQLAlchemy

# windows
$ pip install Flask-SQLAlchemy
~~~

* 初期設定

~~~:src/__init__.py
from flask import Flask
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config["SECRET_KEY"] = b'_5#y2L"F4Q8z\n\xec]dasfe/'
app.config["SQLALCHEMY_DATABASE_URI"] = 'sqlite:///flask_blog.db'
app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = True

db = SQLAlchemy(app)

import src.views
~~~

#### モデルの定義
今回作成するのはブログなので、タイトル・本文があり、投稿日時もデータベースで管理します。
新たにsrcディレクトリに"models"を作成し、"entires.py"を作成します。

~~~:src/models/entry.py
from src import db
from datetime import datetime


class Entry(db.Model):
    __tablename__ = 'entries'
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(50), unique=True)
    text = db.Column(db.Text)
    create_at = db.Column(db.DateTime)
    
    def __init__(self, title=None, text=None):
        self.title = title
        self.text = text
        self.create_at = datetime.now()
~~~

#### スクリプトで共通処理の実行
最後にモデルで定義した内容をデータベースに反映させます。
データベースへの反応は以下の二つがあります。
* コンソールでの実行
* スクリプトでの実行

今回はスクリプトでの実行を紹介します。（こちらはミスが起こりにくく実際の開発環境でよく使用されています。）

まず、スクリプトを実行するのに必要なライブラリをインストールします。

~~~
# mac
$ pip3 install Flask-Script

# windows
$ pip install Flask-Script
~~~

実際のスクリプトは以下になります。

~~~:manage.py
import sys
sys.dont_write_bytecode = True

from flask_script import Command
from flask_script import Manager

from src import app
from src import db

class InitDB(Command):
    def run(self):
        db.create_all()

if __name__ == '__main__':
    m = Manager(app)
    m.add_command('init_db', InitDB())
    m.run()
    
~~~

作成したスクリプトファイルを実行します。

~~~
# mac 
$ python3 manage.py init_db

# windows
$ python manage.py init_db
~~~

実行後'src'ディレクトリに'flask_blog.db'というファイルが作成されていることを確認できるはずです。
flaskによる簡易アプリの作成

<div align="center">
  <img src="https://flask.palletsprojects.com/en/1.1.x/_images/flask-logo.png" />
</div>
# はじめに
Flaskを使用して１からアプリケーションを作り、必要な技術を学んでいただけるようにまとめています。

- flaskによる簡易アプリの作成 ← ★現在ここ
- [Home画面を作成してみる](https://qiita.com/k_yokozuka/items/2526c1dfc5ae78b30642)
- [認証機能を作成してみる](https://qiita.com/k_yokozuka/items/46c7afab4f5335112105)
- [データベースを扱ってみる](https://qiita.com/k_yokozuka/items/7a6ced851081cc95aa7e)
- [CRUD機能を作成してみる](https://qiita.com/k_yokozuka/items/6b67b25e541ae4af6fe3)

### Flaskとは
Flaskは2010年に開発されたPythonのマイクロフレームワークです。
必要最小限のライブラリに依存し、特定のツールやライブラリを必要としないため、「マイクロフレームワーク」と呼ばれています。

##### 以下のような特徴があります。
* マイクロフレームワークなので、非常に軽い
    * 必要最低限の昨日しか持っていないので、余計な機能が動作を重くするといったことがありません
* 拡張性が高い
    * 必要最低限のコア機能に、拡張機能を組み合わせて作成していくのがFlaskの設計思想です。
    * ORM、キャッシュ、認証は後から機能を追加する必要があります。
* カスタマイズ性が高い
    * DBが必ずしもセットされず、NoSQLを利用したいといったケースの場合Flaskではかなり細かくカスタマイズできます。
* シングルファイルフレームワーク
    * Flaskを利用する場合、Flaskをインストールして、1つのファイルに数行のコードを記述するだけでターミナルで起動できます。


### シングルファイルフレームワーク
Flaskは「シングルファイルフレームワーク」であるというモチベーションで作られました。
最小限の昨日であることからどのようなアプリケーションにもカスタマイズできるという素晴らしさも兼ね備えています。

# 開発環境
* mac(catalina)
* 言語： Python 3系
* フレームワーク： Flask 
* DB： SQLite
* ORM: SQLAlchemy

仮想環境で行うことをオススメします。


# 成果物
#### ディレクトリ構成

~~~
app/
  ├ src/
     ├ templates
     ├ static
  ├ manage.py
  ├ requirements.txt
  ├ venv
  ├ server.py
~~~

## flaskにおける簡単アプリの作成
### __init__ファイルの作成

~~~:src/__init__.py
from flask import Flask

app = Flask(__name__)

import src.views
~~~

### viewsファイルの作成

~~~:src/views.py
from src import app

@app.route('/')
def index():
    return "Hello World"
~~~
### 起動ファイルの作成

~~~:server.py
import sys
sys.dont_write_bytecode = True

from src import app

if __name__ == '__main__':
    host = '127.0.0.1'
    port = 5000
    app.run(host=host, port=port, debug=True)
~~~

このファイルは、http://127.0.0.1:5000/ にリクエストが会ったときの処理を記載しています。
* 'if __name__ == '__main__':'はこのファイルを直接実行されたときに実行される処理を記述しています。
* 'debug=True'はデバッグモードでアプリケーションを起動し、これで実行することにより、アプリの実行時にコンソール上に様々な情報が表示される。

### 実行
~~~:python
$ python3 serve.py
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
~~~

![python-flask.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/618885/80a0054c-4ff9-89fb-e646-b72aaa6d546b.png)
javascript 正規表現 test を使って、完全一致 部分一致 をあぶり出せ

条件分岐で `test` をよく使います。
`test` は正規表現パターンと文字列の一致を `true`, `false` で返します。

完全一致、部分一致、前方一致、後方一致など、使い方を忘れやすいのでまとめます。

基本的な使い方はこれ。

``` js
/パターン/.test('検索したい文字列')

// 例 (URLに qiita が含まれるか)
const url = window.location.href
if ( /qiita/.test(url) ) {
  console.log('qiita')
}
```

## 完全一致

**単数**
`^`（先頭が一致） と `$`（末尾が一致）を使う。
（`===` を使えば良いのであまり使わないけど・・・）

``` js
/^qiita$/.test('検索したい文字列')
```

**複数**
`()` で囲って `|` でつなぐ。

``` js
/^(qiita|hoge|huge)$/.test('検索したい文字列')
```

## 部分一致

完全一致がわかれば簡単。
`^` と `$` を取るだけ。

``` js
// 単数
/qiita/.test('検索したい文字列')

// 複数
/qiita|hoge|huge/.test('検索したい文字列')
```

## 前方一致 後方一致

これも簡単。
`()` でくくって、
前方一致なら先頭に `^` を
後方一致なら末尾に `$` をつける。

``` js
// 前方一致 単数
/^qiita/.test('検索したい文字列')

// 前方一致 複数
/^(qiita|hoge|huge)/.test('検索したい文字列')

// 後方一致 単数
/qiita$/.test('検索したい文字列')

// 後方一致 複数
/(qiita|hoge|huge)$/.test('検索したい文字列')

```

## 大文字小文字どちらでも一致させる

正規表現のオプション `i` をつける。

``` js
/qiita/i.test('検索したい文字列')
```
ラズパイ stretch にwin10からリモートデスクトップ接続する

##モチベーション
ラズパイにはwin10からsshで接続していろいろ試してたんだけど、画像処理をやろうと思うとCUIでは無理でGUIが使いたい。調べるとwindowsのremote desktopが使えるようなので、導入する。

##環境
* RaspberryPi3B+
* OS:Raspbian stretch 9.13
* xrdp 0.9.1-9+deb9u4

##手順

```
# xrdpのインストール
sudo apt-get update
sudo apt-get install xrdp

＃バージョン確認
pi@raspberrypi:~ $ sudo apt-cache policy xrdp
xrdp:
  インストールされているバージョン: 0.9.1-9+deb9u4
  候補:               0.9.1-9+deb9u4
  バージョンテーブル:
 *** 0.9.1-9+deb9u4 500
        500 http://raspbian.raspberrypi.org/raspbian stretch/main armhf Packages
        100 /var/lib/dpkg/status
pi@raspberrypi:~ $

```

win10からラズパイのIPを指定してremote desktop接続する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29032/3b4137bc-dc00-4221-7da6-72819647e132.png)

sessionにXorg選択し、IDとPW入力したら、接続できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29032/0606b1bd-f3dd-cc7f-d16f-ea1df9d32e30.png)
【Rails】DockerからRails newができない


[【Rails】Rails 6.0 x Docker x MySQLで環境構築](https://qiita.com/nsy_13/items/9fbc929f173984c30b5d "【Rails】Rails 6.0 x Docker x MySQLで環境構築")



こちらの記事を参考に、
Rails６でDocker環境を構築中、
下記のエラーが出ました。


```ruby:ターミナル
Bind for 0.0.0.0:3306 failed: port is already allocated
```




直訳するとすでに3306のポートは割り当てられてますよとのこと。

```ruby:ターミナル
$ docker ps
```

```ruby:ターミナル
CONTAINER ID   IMAGE       COMMAND                  CREATED       
fbfa25282c46   mysql:5.7   "docker-entrypoint.s…"   7 hours ago
STATUS       PORTS                               
Up 7 hours   0.0.0.0:3306->3306/tcp, 33060/tcp
```

```ruby:ターミナル
$ docker stop fbfa25282c46
```
3306を発見！！

でコンテナをストップさせ、
無事にrails newができました。
SwiftUIで、アニメーションを試してみた

#アプリ開発の経歴

・住宅関連の組み込み機器のデータを見える化したアプリの請負案件に携わりXcodeとSwift/Objective-Cに初めて触れる

・列車の設備点検を行うipad専用のアプリ案件に携わり、テストコードの書いたりRealmBrowserの使い方を学ぶ

・オンライン飲み会を開催してお酒を勧める仕組みのアプリ開発案件に携わり、TypeScriptとVue.js/Nuxt.jsを業務を遂行しながら学び、作成したSPAをアプリから見れるようにするiOSアプリを一から作成

#今回のテーマ
2019年に新たに登場したSwiftUIのアニメーションを書籍で学習したので、使い方などをアウトプット

#環境
Xcode Ver.12.3
MacBookPro 16インチ

#バネのアニメーション
バネのアニメーションとして、「interpolatingSpring」というものがあり、学習している書籍によると
減衰スプリングモデルという計算方法でアニメーションを設定できるものみたいです。
小難しい話は、専門書に委ねるとして、早速試していきましょう！

![ezgif-7-7955949ca5d8.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864623/3439b25e-5224-dc27-22a7-3e0e619a153e.gif)



剛性が高くなると、振動数が増え、
減衰値が大きくなると、振動が早く弱まる(0にすると動きが止まりません)

下記に、コード貼っておくので遊んでみてください。

```ruby:sampleCode.swift
struct ContentView: View {
    バネに取り付けられたオブジェクトの質量
    @State var massp:Double = 1.0
    バネの剛性
    @State var stiffness:Double = 0.0
    バネの減衰値
    @State var damping:Double = 0.0
    バネの初期速度
    @State var initialVelocity:Double = 0.0
    回転角度
    @State var angle:Double = 0.0
    var body: some View {
        VStack{
           
            Text("バネアニメーション")
                .padding()
                .rotationEffect(.degrees(angle))
                .animation(.interpolatingSpring(mass: massp, stiffness: stiffness, damping: damping, initialVelocity: initialVelocity))
            
            Button(action:{self.angle += 45}){
                Text("回転")
            }
            .frame(width:300,height:50)
            .cornerRadius(8.0)
            .border(Color.black)
            .background(Color.red)
            .padding()
           
            VStack{
                Text("質量:\(massp)")
                Slider(value: $massp, in: 0...1000,step:0.1)
            }
            VStack{
                Text("剛性:\(stiffness)")
                Slider(value: $stiffness, in: 0...1000,step:0.1)
            }
            VStack{
                Text("減衰値:\(damping)")
                Slider(value: $damping, in: 0...1000,step:0.1)
            }
            VStack{
                Text("初期速度:\(initialVelocity)")
                Slider(value: $initialVelocity, in: 0...1,step:0.1)
            }
            
        }
       
    }
}
テスト24

```vb

'--------------------------------------
'標準モジュール
'別ブックのプロシージャの実行とRaiseEventのテスト
Sub メール作成()

Dim BookName As String
BookName = "C:\Users\User\Desktop\VBA練習3.xlsm"
Dim mail As cls_Mail


Set mail = New cls_Mail
ThisWorkbook.Sample
mail.myMail

'パスは、「'」で囲む / マクロ名の前に「!」をつける
Application.Run "'" & BookName & "'" & "!Mail_Create"

End Sub

Public Sub cls_Mail_aaa()

    MsgBox "test"

End Sub

Sub awt()
'プロシージャのアドレス(番号)を取得できる
'WinAPIを使う時に必要になるらしい
Debug.Print VBA.CLng(AddressOf Module6.ボタン1_Click)

End Sub

'--------------------------------------
'ThisWorkbookモジュール

Private WithEvents MC As cls_Mail

Public Sub MC_aaa()

   MsgBox "テスト"

End Sub

Public Sub Sample()

    Set MC = New cls_Mail
    MC.myMail

End Sub

'--------------------------------------
'cls_Mailモジュール

Public Event aaa()

Public Sub Class_Initialize()

'初期化に必要な処理を入れる

End Sub

Public Sub myMail()

RaiseEvent aaa

End Sub
    

Public Sub MC_aaa()

MsgBox "テスト"

End Sub

'----------------------------------------------
'別ブックのプロシージャ
Sub Mail_Create()

'Outlookオブジェクト生成
Dim OL As Outlook.Application
Dim MI As Outlook.MailItem
Set OL = CreateObject("Outlook.Application")
Set MI = OL.CreateItem(olMailItem)

'メール各設定
MI.SentOnBehalfOfName = "差出人"    '差出人
MI.To = "To宛先"    'TO
MI.CC = "CC"    'CC
MI.BCC = "BCC"    'BCC
'MI.Attachments.Add "D:\sample.txt"    '添付
MI.Subject = "件名"    '件名

'本文
MI.Body = "本文テスト"

'メール表示
MI.Display

''オブジェクト解放
'Set OL = Nothing
'Set MI = Nothing

End Sub


```
GitHubで使えるイカしたREADMEの作り方

## 概要
散らかっていたGitHubを整理して、きっちりしたREADMEを書いたので、その方法をまとめました。
一度フォーマットを決めておけば後々楽になるので、ぜひこれを読んでイケてるREADMEを作成してみてください。

## READMEの構成

色々と調べた結果、このような基礎構成になりました。

```
# name

image or gif

## Overview

## Requirement

## Usage

## Features

## Reference

## Author

[twitter](https://twitter.com/Kotabrog)

## Licence

[MIT](https://......)
```

必要があれば、これに付け加えていく感じです。
私のGitHubになりますが、例えばこんな感じになります。

https://github.com/kotabrog/ft_mini_ls

以下ではそれぞれについて簡単に解説をいたします。

### name

私は基本的にrepository nameを書いています。

### image or gif

やっぱり最初にイメージがあるとインパクトがありますからね。差し込み方はこんな感じです。

```
![gif](https://github.com/kotabrog/ft_mini_ls/blob/main/image/ft_mini_ls.gif)
```

### Overview

ここには概要を書いています。基本的に１～２行くらいに収まるようにします。

### Requirement

環境や、必要なライブラリなどについて言及しています。
……とはいっても、場合によっては動作確認をした環境だけ載せているという感じで、必ずしも必要としてない条件も載せてしまっています。
例えば以下のように示しています。
必要があればバージョンなども載せています。

```
- macOS
- clang
- Docker 19.03.6
```

### Usage

簡単な使い方です。

### Features

詳しい仕様について、基本的に箇条書きで紹介しています。
Usageで紹介しなかった詳しい使い方も書いています。
箇条書きで書きづらい場合や、長くなりそうな場合には、「Features」ではなく「Description」に変更したほうが個人的にはピンときます。

### Reference

参考URLを書きます。

### Author

自分の情報を載せています。
私はTwitterのアカウントなんかを載っけています。

### Licence

Licenceについて載せています。例えば以下のような感じです。

```
[MIT](https://......)
```

## Licenceについて

Licence、何それ、おいしいの？と思っていたのですが、READMEを作るために調べていたら以下のよう言葉を見かけました。

>著作権を主張しないつもりなんだったらそれを明示的に宣言して欲しい。ライセンスが明示されていないのは、どんなライセンスよりも厳しいライセンスだ。

（[Ruby 1.9.2リリースとWEBrick脆弱性問題の顛末](https://nishiohirokazu.hatenadiary.org/entry/20100819/1282200581)より）

たしかに、明記されていないと著者の意向がわからないですものね。

せっかくプログラムをGitHubに載せたのなら、色々な人に使ってもらいたいし、できれば著者へのリンクをつけていただいたり、紹介していただきたい……と思ったので、私はできるだけ制限のないライセンスである「非コピーレフト型」の「MIT」を選択しました。
Licenceについて詳しくは以下の参考URLをご参照ください。

- [githubでライセンスを設定する方法](https://qiita.com/shibukk/items/67ad0a5eda5a94e5c032)
- [ライセンスの種類について](https://qiita.com/legitwhiz/items/bb34ef20ba23336e0c87)
- [githubでのライセンスの選び方と基準](https://www.catch.jp/oss-license/2013/09/10/github/)

## gifについて

ページの最初に画像があるとインパクトがありますが、それが動いていたらなおのことインパクトがあります。
しかし、gif画像なんて作ったことない……という方に、簡単に作れるサイトをご紹介します。

- [LICEcap](https://www.cockos.com/licecap/)
- [BannerKoubou](https://www.bannerkoubou.com/anime/gif-henshuu/)

LICEcapはディスプレイに写っているものを簡単にgif画像にすることができるアプリです。
BannerKoubouは、gif画像を編集することができるWebサイトです。

使い方としては、最初にLICEcapでディスプレイに表示しているものをgif画像にして、その後で、前後の部分やもたついている部分をBannerKoubouで切り取るといい感じのgif画像を簡単に作ることができます。

ぜひお試しください！

## Markdownについて

READMEで使えるMarkdownのチートシートは、以下のものがわかりやすかったです。

- [markdown-cheatsheet](https://gist.github.com/mignonstyle/083c9e1651d7734f84c99b8cf49d57fa)

また、READMEの書き方についても参考にさせて頂いたこちらの記事では、htmlやcssの書き方を利用した画像の貼り方も紹介しているので、ぜひ御覧ください。

- [README.mdをカッコ可愛くデザインしてアプリの魅力を120%にする](https://qiita.com/aocattleya/items/5f836e9c65ba3eb3af03)

## おわりに

プログラムを書くことが忙しくて、READMEなどはおろそかにしてしまいがちですが、この投稿がそんな忙しいエンジニアの手助けになれたら嬉しいです。
（いっぱい調べたので、見てほしい）。

## 参考URL

- [わかりやすいREADME.mdを書く](https://deeeet.com/writing/2014/07/31/readme/)
- [わかりやすい README 駆動開発](https://qiita.com/b4b4r07/items/c80d53db9a0fd59086ec)
ラズベリーパイにIPアドレスではなくraspberrypi.localでアクセスできる理由


DNSサーバーなどはつくっていないのになぜかラズベリーパイに

* 名前でSSHできたり

```shell
ssh pi@raspberrypi.local
```
* ウェブサーバー立ててブラウザからhttp://raspberrypi.local/ でアクセスしてindex.html 見れたりしたのですが、ずっと不思議でした。

しばらく調べて行って原因がわかりました。
mDNSという方法を使っています。
確認のために以下を打つとこの機能が動いているのがわかります。

```
sudo /etc/init.d/avahi-daemon status
```

試しに、

```
sudo /etc/init.d/avahi-daemon stop
```
をやると名前でアクセスできなくなるのを試すことができます。

つまり、avahi-daemonというものを使って、名前をつけたいサーバーで設定するだけで名前解決できるのですごく便利です。（もちろん、同一のネットワーク内でしか有効ではないです。）
社内サーバーを作る時とかには有効ですね。

## 参考：

IPアドレスがわからないラズパイにホスト名でSSH接続する簡単な方法（mDNS） | IoT PLUS
https://iot-plus.net/make/raspi/ssh-connect-using-mdns/

手持ちのRaspberryPiをサクッとmDNSに対応させる - Qiita
https://qiita.com/takish/items/1a640576caa2d0dfefc4
Blenderのインストール方法

注）執筆時点でのBlenderのバージョンは`2.91.0`、OSは`Windows 10`です。参考にしてください。

#初めに
今回はBlenderについてです。無料で3Dモデルの作成などができるアプリになります。わかりにくいところもあるでしょうが、なるべくわかりやすく説明します。
私はBlenderはそれほど詳しいわけではないので、操作の説明などはほかの方の記事をご覧ください。もちろんインターネットにもたくさん記事はあります。

#Blenderのインストール
では早速始めましょう。

まず、[こちら](https://www.blender.org/)にアクセスします。

![Redirecting... _ Slack - Google Chrome 2021_01_11 18_16_17 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1017236/3470b48b-15bf-cc49-67d9-c565b69b562a.png)
そのページにある、**Download Blender 2.91.0**と書かれたボタンをクリックします。(右下の薄ら青いボタンです)

そうすると下の写真のようなページにアクセスできると思うので、環境に合わせた設定に変えてから、ボタンを押しましょう。
![Redirecting... _ Slack - Google Chrome 2021_01_11 18_21_18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1017236/08ea7eb5-b890-aaba-a2ae-6a173fad26ed.png)

Blenderのインストーラがインストールされます。
![Blender Setup 2021_01_11 19_39_56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1017236/23b6aa7d-eab2-9ad5-5cac-8a160dffd60d.png)

下のほう見切れてますけど、**Next**をクリックして進めていきます。

![Blender Setup 2021_01_11 19_40_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1017236/be85bf7a-10b6-1afa-961d-a917921235a7.png)

**I accept the terms in the License Agreement**（和訳　＝＞　"使用許諾契約の条項に同意します"）をクリックしてください。

![Blender Setup 2021_01_11 19_40_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1017236/f7dc4e53-619e-82f1-fdde-6ef6764cecae.png)

本体をインストールする場所を変更できます。

![Blender Setup 2021_01_11 19_40_15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1017236/68ed3ded-fbb1-9d13-097b-2dcea16502b6.png)

ここで**Install**をクリックすると、始まります。

![Blender Setup 2021_01_11 19_41_30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1017236/0fda0474-e79e-60b1-f9a8-a98a19a4efa4.png)

終了しました。

#終わりに
いかがでしたでしょうか？わかりやすいと思っていただけたら幸いです。

以上になります。楽しい3DモデリングLifeを！ｗ
PhoenixをSlimでもっと読みやすく

# はじめに
僕は普段、Webアプリやサイトを作るときは**Nuxt.js**を使う事が多いです。
ルーティングや書き方がシンプルなので開発がしやすく、重宝しています。
しかし、好きな言語は**Elixir**なのでそろそろ`LiveView`を使ったフロント開発にも手を出してみようと思って、今回はLiveViewにSlimを組み合わせたものを試してみました。

# Slimとは
HTMLタグを短く簡潔に書くことができるテンプレートエンジンです。
僕はNuxtを書いているときにHTMLが読みづらくなってしまうことがあるので、Slimを試してみようと思いました。

```html:index.html
<html>
  <head>
    <title>Slim Sample</title>
  </head>
  <body>
    Slim Sample Website
  </body>
</html>
```

```slim:index.slim
html
  head
    title Slim Sample
  body
    | Slim Sample Website
```

このように、HTMLを短く記述することができます。

# サンプルプロジェクトで試してみる

## プロジェクト作成
LiveView付きのプロジェクトを作成します。

```bash
mix phx.new bealchemist --live --no-ecto
```

## phoenix_slimeを導入
SlimeをLiveViewの中でも扱うために、`phoenix_slime`というライブラリを導入します。

まずは`mix.exs`のdepsに`phoenix_slime`を追加して、`mix deps.get`でインストールします。

```elixir:mix.exs
defp deps do
    [
      ...
      {:phoenix_slime, "~> 0.13.1"}
    ]
  end
```

`phoenix_slime`が導入できたら、`config.exs`に次の記述を追加します。
この記述では、拡張子が**slim**, **slime**, **slimleex**のファイル用のテンプレートエンジンを用意しています。

```elixir:config.exs
config :phoenix, :template_engines,
  slim: PhoenixSlime.Engine,
  slime: PhoenixSlime.Engine,
  slimleex: PhoenixSlime.LiveViewEngine # If you want to use LiveView

config :phoenix_slime, :use_slim_extension, true
```

次に、`dev.exs`にも変更を加えます。

```elixir:dev.exs
# Watch static and templates for browser reloading.
config :my_app, MyApp.Endpoint,
  live_reload: [
    patterns: [
      ~r{priv/static/.*(js|css|png|jpeg|jpg|gif)$},
      ~r{web/views/.*(ex)$},
      ~r{lib/APP_web/templates/.*(eex|slim|slime)$}
    ]
  ]
```

これでslimを使うための準備は完了です。

## slimのページを表示させてみる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352824/decaed8d-1416-66c6-72d3-228589ee3407.png)

今の状態で`mix phx.server`をし、http://localhost:4000/ にアクセスすると上の画像のような画面が表示されると思います。
このプロジェクトに、数字をカウントする新しいページを追加してみます。

### ページの追加
`lib/APP_web/live`ディレクトリに、`index_live.ex`と`index_live.html.slimleex`を作成します。

```elixir:index_live.ex
defmodule BealchemistWeb.IndexLive do
  use BealchemistWeb, :live_view

  def mount(_params, _session, socket) do
    {:ok, assign(socket, :val, 0)}
  end

  def handle_event("inc", _, socket) do
    {:noreply, update(socket, :val, &(&1 + 1))}
  end

  def handle_event("dec", _, socket) do
    {:noreply, update(socket, :val, &(&1 - 1))}
  end
end
```

```slim:index_live.html.slimleex
h2 The count is: <%= @val %>
button phx-click="dec" -
button phx-click="inc" +
```

### ルーティングの設定
新しいルーティングも設定しておきます。

```elixir:router.ex
scope "/", BealchemistWeb do
  pipe_through :browser

  live "/", PageLive, :index
  live("/index", IndexLive)
end
```

これで準備完了のはずです。

# 実行
`mix phx.server`で実行し、http://localhost:4000/index にアクセスすると、次のようなページが表示されると思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352824/0f5abe32-c90d-b78f-1223-85ddb4191a85.png)

PhoenixがSlimをしっかりと読み込んでくれていることがわかります！

## 覚えておくと役に立つかもしれないこと
- `phoenix_slime`の導入中に、`slimleex`を正常に読み込んでくれずにエラーが発生したりしている場合は、`mix clean`をすると直ったりします。
- VSCodeを使っている人は、`slimleex`などのハイライトをさせるために**settings.json**をいじったりするとやりやすいかもしれないです。

# 参考リンク
> https://qiita.com/pugiemonn/items/b64171952d958dc4d6be
> https://github.com/slime-lang/phoenix_slime
Google Colabを寝かさないシェルスクリプト

表題の件ですが、下記となります。

live-colab.shというファイル名で作成します

```bash
#!/bin/bash
# usage live-colab.sh "URL of Colab"

for i in `seq 0 10000`
do
  echo "[$i]" ` date '+%y/%m/%d %H:%M:%S'` "connected."
  curl "$1" > /dev/null 2>&1
  sleep 60
done
```

```bash
$ ./live-colab.sh "<Google ColaboratoryのURL: https://colab.research.google.com/drive/xxxxxxxxxx>"
```
kubernetes + docker シェルメモ

sentOS
dokcer kubernetes minikube
構築スクリプト

```
#! /bin/sh

# Modify yum.conf
sed -i -e "/timeout\=/d" /etc/yum.conf
sed -i -e "13s/^/timeout=300\n/g" /etc/yum.conf
sed -i -e "/ip_resolve\=/d" /etc/yum.conf
sed -i -e "14s/^/ip_resolve=4\n/g" /etc/yum.conf

# Add .curlrc
cat <<-EOF > ~/.curlrc
ipv4
EOF

# Install conntrack
yum install -y \
  conntrack-tools-1.4.4

# Install "Docker"
yum install -y \
  yum-utils-1.1.31 \
  device-mapper-persistent-data-0.8.5 \
  lvm2-2.02.185

yum-config-manager \
    --add-repo \
    https://download.docker.com/linux/centos/docker-ce.repo

yum install -y \
  docker-ce-19.03.8 \
  docker-ce-cli-19.03.8 \
  containerd.io-1.2.13

mkdir -p /etc/docker
cat <<-EOF > /etc/docker/daemon.json
{
  "dns": ["8.8.8.8"]
}
EOF

systemctl enable docker
systemctl start docker

# Install "kubectl"
curl -LO https://storage.googleapis.com/kubernetes-release/release/v1.18.2/bin/linux/amd64/kubectl
chmod +x ./kubectl
mv -f ./kubectl /usr/local/bin

# Install "minikube"
curl -Lo minikube https://storage.googleapis.com/minikube/releases/v1.9.2/minikube-linux-amd64
chmod +x minikube
install minikube /usr/local/bin
rm -f minikube

# stop firewall
systemctl disable firewalld
systemctl stop firewalld

# Add addons
/usr/local/bin/minikube start --vm-driver=none
/usr/local/bin/minikube addons enable ingress

# Docker restart and update DNS settings
systemctl restart docker
```
GLSLで球体の頂点の色をグラデーションにしてみる

# やりたいこと
GLSLでキャンバス上に3Dの球体を描く。
頂点ごとに色を変えてグラデーションをつくる。

# 基本となるコード
```
// 頂点座標の定義（球体状にする） @@@
        const VERTEX_COUNT  = 100; // 頂点の個数
        const VERTEX_RADIUS = 1.0; // 球体の半径
        this.position = [];        // 頂点座標
        this.color = [];           // 頂点色
        for(let i = 0; i < VERTEX_COUNT; ++i){
            // 変数 i を元にラジアンを求める（XZ 平面をぐるりと一周するためのラジアン）
            const iRad = (i / VERTEX_COUNT) * Math.PI * 2.0;
            // 求めたラジアンからサインとコサインを作る
            const x = Math.sin(iRad);
            const z = Math.cos(iRad);
            for(let j = 0; j < VERTEX_COUNT; ++j){
                // 変数 j を元にラジアンを求める（上から下までぐるっと半周するためのラジアン）
                const jRad = j / VERTEX_COUNT * Math.PI;
                const radius = Math.sin(jRad);
                const y      = Math.cos(jRad);
                // 計算結果を元に XYZ 座標を決める
                this.position.push(
                    x * VERTEX_RADIUS * radius,
                    y * VERTEX_RADIUS,
                    z * VERTEX_RADIUS * radius,
                );
                this.color.push(i / VERTEX_COUNT, j / VERTEX_COUNT, 0.1, 1.0);
            }
        }
```

this.color.pushの中身を少しづつ変えて、カラーバッファに送る色を変える。

# 例1：0.1でまわす→オレンジと緑になる

![スクリーンショット 2021-01-11 19.22.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238801/f05d5d69-6ecd-b214-7fe4-78b9fe1e9823.png)

```jsx

this.color.push(i / VERTEX_COUNT, j / VERTEX_COUNT, 0.1, 1.0);
```

# 0.5にする場合

赤系→緑系でカラフルなグラデになる

![スクリーンショット 2021-01-11 19.14.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238801/c47e5771-9d45-e90e-92d4-d8f960f21128.png)


```jsx
this.color.push(i / VERTEX_COUNT, j / VERTEX_COUNT, 0.5, 1.0);
```

# 例3: 1.0にする場合

ピンクと青の球になる

![スクリーンショット 2021-01-11 19.32.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238801/e484113f-4839-93fb-dfa7-cac9d77a6420.png)


```jsx
this.color.push(i / VERTEX_COUNT, j / VERTEX_COUNT, 1.0, 1.0);
```

1.0以上は色が変わらない。
selenium ケーススタディ まとめ python pyCharm

## Seleniumで困ったことのまとめ
最近、seleniumを入力作業の自動化をする仕組みを作りそれにあたって困ったことなどこの記事でまとめていこうかなと思います。何をimportするとかは書いたらpycharmが勝手に教えてくれるので省略

## reCAPTCHAや二段階認証の回避
chromeにてユーザープロファイルに対象のサイトのログイン情報を記憶させ、seleniumでユーザープロファイル指定、ドライバー初期化にて回避する。

```
# main.py
from selenium import webdriver

options = webdriver.ChromeOptions()
options.add_argument("--user-data-dir=C:\Users\Yoshi\AppData\Local\Google\Chrome\User Data")
options.add_argument("--profile-directory=Profile 7")
driverPath = "C:\Program Files (x86)\WebDriver\chromedriver_win32\chromedriver_87.exe"
driver = webdriver.Chrome(executable_path=driverPath, options=options)
```

## Send.keyが遅い......
execute_scriptを使ってテキストボックスに値を入力します。

```
# webドライバー初期化は省きます
targetId = "targetId"
inputVal = "inputVal"
# 改行を含めて文字列を入力したいとき↓
# inputVal = inputVal.replace('\n', '\\n')

driver.execute_script(f'document.getElementById("{targetId}").value="{inputVal}";')
```


## 要素の存在チェックを行う

```
# webドライバー初期化は省きます
if len(driver.find_elements(By.ID, "element")) > 0:
    print("あるよ。")

```


## Conform Alert box のOKボタンを押す
```
# webドライバー初期化は省きます
# クリックするのは何でもよいComform Alertとの表示のトリガーとなるものをクリック
driver.find_element_by_xpath("xpath").click()
Alert(driver).accept()   # OK
Alert(driver).dismiss()  # キャンセル

```

## type fileに画像を送る
```
# webドライバー初期化は省きます
productImgFilePath = r"C:\work\RakumaAutoApp\1.jpg"
driver.find_element_by_xpath("xpath").send_keys(productImgFilePath)
```

# アクセス毎にIPアドレスを変えたい
以下を参考↓
https://takazawa.github.io/hobby/selenium_python_tor/

## xpathの確認方法
chromeだけ、たぶんほかのブラウザも大体おんなじ感じだと思う
・F12で開発者用画面を開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/709188/5186f615-a064-cd45-df3f-930f102770b0.png)

・何でもよいから選択
対象要素右クリ、Copyを見れば見つかる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/709188/ac00ffde-8160-1b68-7555-78a12ceafa0e.png)


## まとめ
今回の入力作業自動化のプログラム作成で初めてPythonを触り、いい勉強になった。Seleniumも何かと何もせずに勝手にブラウザ動かしてなんかしてくれるのできもちいい。
Windowsでvagrant upが出来なかった

#前提

Windows10でHomesteadを使ってlaravel開発をしようとしている。

以下のサイトを参考にした。
[Laravel開発のはじめかた Windows編 | Hypertext Candy](https://www.hypertextcandy.com/start-laravel-project-on-windows)

#本題
git, vagrant, homesteadをインストールし、さあ仮想環境を起動しようと
```$vagrant up
```を実行。

すると、、、
```Check your Homestead.yaml (or Homestead.json) file, the path to your private key does not exist.```
というメッセージが。

#解決
結局、以下の記事を参考にさせて頂き、解決しました。
[LaravelのHomestead設定 | BeCrazy](https://it.becrazy.jp/article/laravel-homestead-setting)
どうやらサーバーに接続するための鍵がないから作れってことみたい。

###手順

1.必要なディレクトリを作る
```$mkdir %HOMEDRIVE%%HOMEPATH%\.ssh```

2.鍵を作る
```$ssh-keygen -t rsa -f %HOMEDRIVE%%HOMEPATH%\.ssh\id_rsa```

途中でパスワードの作成を求められるが、2回Enterキーだけを押して空のままでいい。


もう一度
```$vagrant up```
で今度は成功した。
AsciiDocからChmの作成


# AsciiDocからChmの作成

Microsoft Compiled HTML Help(chm)は古い技術ですが、いまだに使用されています。
検索機能もあり、かなり便利と思っています。
AsciiDocからDocBook、DocBookからChmを作成する手順をまとめました。

ツールの使い方の説明が不十分です。時間があるときに追記します。

# AsciiDocの作成

適当に作成してください。

作成したファイルは、this.adoc

# AsciiDocからDocBookへの変換

```dosbatch
asciidoctor -b docbook this.adoc
```

# DocBookからChmの変換

## docbook-xslの準備

docbook-xsl-1.79.1 のXSLTをダウンロードして任意のフォルダに配置

## XSLTの作成

```xml:docbook_htmlhelp_chm.xsl
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version='1.0' xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:import href="file:///任意のフォルダ/docbook-xsl-1.79.1/htmlhelp/htmlhelp.xsl"/>
<xsl:output method="html" encoding="Shift_jis" indent="no"/>
<xsl:param name="l10n.gentext.default.language">ja</xsl:param>
<xsl:param name="l10n.gentext.language">ja</xsl:param>
<xsl:param name="chunk.first.sections">1</xsl:param>
<xsl:param name="chunk.section.depth">2</xsl:param>
<xsl:param name="base.dir">htmlout</xsl:param>
<xsl:param name="manifest.in.base.dir">1</xsl:param>
<xsl:param name="html.stylesheet">help.css</xsl:param>
<xsl:param name="htmlhelp.encoding">17</xsl:param>
</xsl:stylesheet>
```

パラメータの意味は、以下 DocBook のページを参照してください。
[パラメータ](http://docbook.sourceforge.net/release/xsl/1.75.1/doc/html/index.html)

「任意のフォルダ」を絶対パスで指定します。
help.cssは適当なものを用意してください。

## DocBookからHTML Helpのソースへの変換

docbook_htmlhelp_chm.xslを使用して、お好きなXSLTプロセッサで、this.xmlを変換します。
上記XSLTを使用すると、フォルダhtmloutに出力されます。

## HTML Helpのソースから htmlhelp.chmへの変換

フォルダhtmloutのhtmlhelp.hhpをHTML Help Workshop で開いて、コンパイルします。

htmlhelp.chmが作成されます。
AWSでGPU必須のバッチ処理を動かす

# まとめ
* 使うべきサービスは AWS Batch
* GPUあり/なしで挙動が変わるライブラリに注意
    * DockerHubにGPUあり版のイメージがある場合はそれをbaseにすると楽
    * 例: PyTorch

# 背景
* 以下の要件を満たすシステムをAWS上に組みたい
    * 毎日/毎週1回のみ動かし、他の時間は課金しないで欲しい
    * スポットインスタンスが使えると嬉しい
    * GPUは必須
    * 例: https://zenn.dev/miyatsuki/articles/0d66daf6615962
* それができそうなサービスがいろいろあるがどれを使えばいいのかよくわからない
    * Fargate
    * ECS
    * SageMaker
    * AWS Batch (採用)

# なぜAWS Batch？
* Fargate
    * GPUが使えないのでNG
    * CPUだけなら、Fargateでもいいと思います
* ECS
    * GPUインスタンスを立ち上げ続ける必要があるのでNG
* SageMaker
    * （サービスがありすぎてよくわからない。。。）
* AWS Batch
    * 特定時間のみ起動して終わったらインスタンスを閉じてくれる
    * スポットインスタンスも使える
    * GPUインスタンスも使える

# AWS Batchの使い方
1. ECR (Elastic Container Registory) に動かしたいコンテナのイメージをpushする
2. AWS Batchのコンピューティング環境を作る
    1. マネージド型を選択
    2. インスタンスの設定 -> スポット
    3. オンデマンド料金 -> 予算をみて適当に設定。50%だとそんなに待たされることはなかったです。
    4. 許可されたインスタンスタイプ -> GPUが使えるインスタンスを選択。g4dn.xlargeが最安なので、これから様子をみてみるのも良いかもしれません
    5. EC2設定のイメージタイプ -> Amazon Linux 2 (GPU)
3. AWS Batchのジョブキューを作る
    1. コンピューティング環境は2.で作った物を選ぶ
4. AWS Batchのジョブ定義を作る
    1. プラットフォーム -> EC2
    2. イメージ -> 1でpushしたもの
    3. コマンド -> バッチで実行したい物をCMDの引数として使えるように書く。元のイメージのCMDは上書きされるので、イメージ側に記載している場合でも改めて設定が必要
    4. メモリ -> 2GBで足りない場合は増やす
    5. GPUの数 -> 1
5. AWS Batchのジョブを投げる
    1. ジョブ画面から新しいジョブを作成をクリック
    2. ジョブ定義とジョブキューは4と3で作った物を選択
    3. 最後の送信を押すと、ジョブがsubmitされる
6. AWS Batchのジョブ実行を見守る
    1. ダッシュボード画面からジョブの実行状況が見られるので見守る

# コンテナイメージについて
コンテナ側がGPU Readyになっていても、イメージファイル内のソフトウェアがGPU対応してないと、結局CPUで動作してしまう。個人的に注意すべきと思う点は下記。

* pip installした際に、PCの状況をみてGPUなし版を入れてくるライブラリがある
    * PyTorchなど
    * このようなライブラリのGPU版が必要な場合は、DockerHubからGPU版が入ったイメージをpullしてくると楽
        * 例: https://hub.docker.com/layers/pytorch/pytorch/1.7.0-cuda11.0-cudnn8-runtime/images/sha256-9cffbe6c391a0dbfa2a305be24b9707f87595e832b444c2bde52f0ea183192f1?context=explore
firebaseのstorageにアクセスしたときに出たエラーとCORSの設定メモ

# ハマりメモ

ローカル環境からfirebaseのcloud storageにアクセスしたときにこのエラーがでる場合は、GCP側のGoogle Cloud Storageのoriginの設定に`localhost:3000`(ポート番号はnuxtを使った場合なのでそれぞれの環境による)を設定する必要がある

例えばこんなコードで

```
async asyncData({params, $http}) {
  const content = await fetch('https://firebasestorage.googleapis.com/v0/b/XXXXXXXXXX.appspot.com/o/users%2FEZ0DxH9xVbV75MqDNGOEJMs3SuF2%2FY32rq55WORMqU5jLVylE.html').then(res => res.text())
  return {content}
}
```

こんなエラーがでる

```
from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
```

こんな場合はGCPのGSのoriginの設定が必要

# 参考

[ウェブでファイルをダウンロードする#CORS の構成](https://firebase.google.com/docs/storage/web/download-files?hl=ja#cors_configuration)

[Firebase StorageにCORSの設定をする](https://qiita.com/niusounds/items/383a780d46ee8551e98c)
Visual Studio Code ( VS Code ) で jupyter notebook 環境を構築　Mac版

# Visual Studio Code ( VS Code ) で jupyter notebook 環境を構築　Mac版

## 目的
Python開発環境の作業メモとして記載。
ANACONDAのライセンスが変わり、当面は問題無いのですが、ANACONDAを使わないPythonのローカル開発環境へ移行してみました。
jupyter notebookは Visual Studio Code ( VS Code ) とそのJupyter Extension for Visual Studio Code （Jupyter 拡張）を使うことにしてみました。
手順は簡単ですが使い方のメモとしても記載しておくことにしました。
Pythonの開発環境としては、pyenvとpyenv-virtualenvを利用しています。（別記事）

## Mac環境
OS : Mac OS Big Sur(11.1)
Xcode ： App Storeではインストールしていない

## Visual Studio Code ( VS Code ) をインストール
[Visual Studio Codeサイト](https://code.visualstudio.com/)からダウンロードし、インストール
![スクリーンショット 2021-01-11 18.52.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273559/16239593-a0b7-26be-407a-944ca380beef.png)

## Visual Studio Code Insidersをインストール
[Visual Studio Codeサイト Insiders](https://code.visualstudio.com/insiders/)からダウンロードし、インストール!

![スクリーンショット 2021-01-11 18.57.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273559/5ad06002-be82-82ab-215f-57ad8fafd7a4.png)

起動すると警告が出ますが「開く」
![スクリーンショット 2021-01-11 19.00.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273559/63716836-01b5-b325-e6fc-0e0827a1f388.png)

## Jupyter Extension for Visual Studio Code （Jupyter 拡張）をインストール
https://marketplace.visualstudio.com/items?itemName=ms-toolsai.jupyter

[Jupyter Extension for Visual Studio Codeサイト Insiders](https://marketplace.visualstudio.com/items?itemName=ms-toolsai.jupyter)からダウンロードし、インストール!

![スクリーンショット 2021-01-11 19.05.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273559/30856510-a6ee-9101-837e-2f948889ab99.png)

Visual Studio Code.appを開くようにポップアップが出ます
![スクリーンショット 2021-01-11 0.07.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273559/dcf403c8-b718-608a-20f8-2d853aec5cb2.png)

Visual Studio Code が起動し、そのウインドウ内でJupyterが開かれます
![スクリーンショット 2021-01-11 0.07.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273559/332af5d0-c54a-7ce2-03bd-53c7e02f8101.png)

インストール　を押します
![スクリーンショット 2021-01-11 19.17.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273559/f02ae223-2609-67a9-7829-24b15d5da65d.png)

## 使い方
Visual Studio Code を起動します

全てのコマンドを表示　commandキー＋shiftキー+pキー　を押します

jupyter: Create New Blank Jupyter Notebook を選びます

![スクリーンショット 2021-01-11 19.22.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273559/6899f347-118c-a68e-f531-936aeb866bde.png)

インストールが必要なものがあれば、ポップアップ表示されますので、インストールしてください

Visual Studio Code 内にJupyter Notebookが起動します
![スクリーンショット 2021-01-11 19.26.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273559/007a1425-ff39-2c83-994c-30c03a6068b1.png)

右上に利用しているPython環境が表示されており、こちらをクリックすると、実行するPython環境を切り替えることができます
![スクリーンショット 2021-01-11 19.29.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273559/ededeb98-edbe-0931-9e1a-74e36ce255b1.png)
Bashのファイルリダイレクトの優先順位 ('>' | '>>' | '<') について

# bashでの`>` ` >>` ` <`の扱い

minishellの実装にあたり、bashの最もシンプルな`>` ` >>` ` <`の3つのファイル出入力リダイレクトの仕様をまとめました。


### `<` `<<`：　ファイルのインプット (上書き、追記）

##### ① 引数は複数指定可能

```shell

$ cat aaa.txt bbb.txt
aaa
bbb 
```

##### ② リダイレクトは最後が一つだけ読み込まれる

```
$ cat < aaa.txt < bbb.txt 
bbb
```

##### ③ 引数とリダイレクトだと引数が優先

```
$ cat < aaa.txt bbb.txt 
bbb
```
```
$ cat aaa.txt < bbb.txt 
aaa
```
```
$ cat < aaa.txt bbb.txt < ccc.txt 
bbb
```

---
### `>` ：　ファイルのアウトプット

##### ① アウトプットは最後のファイルのみ実行される

```
$ cat aaa.txt bbb.txt > output1.txt > output2.txt 
$ cat output1.txt
$ cat output2.txt
aaa
bbb
```
##### ② アウトプットはどこに書いてもいい

```
$ cat > output1.txt aaa.txt bbb.txt
$ cat output1.txt
aaa
bbb
```

```
$ cat aaa.txt > output1.txt bbb.txt
$ cat output1.txt
aaa
bbb
```

# 実装の観点から

#### ① インプットは引数優先

- 引数を入力ファイルとして追加していく
- 引数がない間`<`ごとに入力ファイルを上書きしていく
- 引数を見つけた時点でリダイレクトの入力ファイルは無視


#### ② アウトプット先は一つ

- デフォルトは標準出力
- `>`ごとに出力先を上書きしていく


以上です！
Linux②【ディレクトリコマンド】

# はじめに
これは学習用のメモになります。

ディレクトリとはフォルダのことです。ファイルを格納するフォルダのこと。
ディレクトリは入れ子構造になっている。

#主要なディレクトリの役割

`/bin`

* 一般ユーザーおよび管理ユーザーの両方が使用するコマンドの実行ファイルを格納
* 特に、Linuxの動作に最低限必要な重要度の高いコマンドの実行ファイルを格納

`/dev`

* デバイスファイル（ハードウェアをファイルとして扱えるようにしたファイル）を格納

`/etc`

* 設定ファイルを格納
* Linuxで動作するアプリケーションの設定ファイルや、Linux自体の設定に関わるファイルを置かれている
`/home`

* ホームディレクトリ（Linuxのユーザーごとに割り当てられる個人用ディレクトリ）が配置される
* ユーザーはホームディレクトリ内に自由にファイルやディレクトリを作成できる

`/sbin`

* 管理者ユーザー向けのコマンドの実行ファイルを格納

`/tmp`

* 一時的なファイルを格納
* アプリケーションの実行中に結果を一時的にファイルとして保存する場合に使用

`/usr`

* 各種アプリケーションと、それに付随するファイルを格納

`/var`

* 変化するデータを格納
* アプリケーションを動作する上で作成されたログなどを格納


##1.cd(change directory）
```
cd [ディレクトリ]
```
ディレクトリを移動するコマンド

###特別なディレクトリの指定
カレントディレクトリ、親ディレクトリ、ホームディレクトリには特別な指定方法がある

|ディレクトリ| 意味　|指定方法　
|:------:|:------:|:------|
|カレントディレクトリ | 現在自分がいるディレクトリ| 「.」|
|親ディレクトリ | 一つ上の階層のディレクトリ| 「..」|
|ホームディレクトリ| 「/home/ユーザー名」ディレクトリ| 「~」|
|ルートディレクトリ | 「/」ディレクトリ|「/」|


##2.pwd
```
pwd [オプション]　　　#ほとんどオプションをつけることはない
```
カレントディレクトリ（今いるディレクトリ）を表示するコマンド
今どこのディレクトリにいるのか教えてくれるコマンド

##3.ls
```
ls [オプション][ディレクトリ・ファイル名]　
```
ファイルやディレクトリの一覧を表示するコマンド
今いるディレクトリの中に入っているフォルダ/ファイルがわかる


###便利なパス名展開
パス名展開を使うと複数のファイルを一度に指定できる

####パス名展開

|記号| 意味
|:------:|:------:|
|* | 任意の文字列| 
|？| 任意の1文字|

```
具体例
#拡張子がhtmlのファイルの一覧を表示
$ls *.html
index.html home.html job.html

#zから始まり4文字で終わるファイルを表示
$ls /bin/z???
/bin/zcat /bin/zcmp /bin/znew
```

###よく使うオプション

#####ls -l
ファイルの詳細情報を表示する

#####ls -a 
隠しファイルも含めた全てのファイルを表示する

#####ls -F
ファイルの種別を表示


##4.mkdir(make directory)
```
mkdir [オプション]<作成するディレクトリ名>
```
ディレクトリを作成するコマンド

###よく使うオプション

####-p
深いディレクトリを一度に作成する
-pオプションをつけるとtest,2019というディレクトリを事前に作らなくていい

```
$mkdir -p test/2019/08
```

##5.rmdir(remove directory)
```
rmdir <ディレクトリ名>
```
空のディレクトリを削除するコマンド(空でないディレクトリを削除しようとするとエラーになります）
あまり使うことはない（ほとんどrmコマンドを使うことが多い）

##6.パス
パスはディレクトリやファイルの住所情報。
ディレクトリの階層の区切りを「/」で表現する

###パスの種類
####1)絶対パス
絶対パスはルートディレクトリ（「/」)から始まるパス。

```
/home/kume/code/README.md
```
####2)相対パス
相対パスはカレントディレクトリから始まるパス。

```
code/README.md
```

##7.コラム（コマンドの使い方を調べる）

###1)helpコマンド
`--help`オプションで、コマンドのヘルプメッセージを表示する

```
<コマンド> --help

#具体例
　ls --help
使用法：ls[オプション]...[ファイル]...
```
使用方法、コマンドの概要、利用可能なオプション一覧を教えてくれるので、コマンド概要を理解したい時に使います。

###2)manコマンド
manコマンドで、コマンドのマニュアルを表示する
--helpオプションより詳しいので、コマンドをきちんと理解したい時に使用する

```
man <調べたいコマンド名>

#具体例
man ls
NAME
    ls -list directory contents
#キーワードから検索できる
man -k move
```
第9回：ニュースフィード投稿サーバIFを作る

[目次：Webアプリ開発ロードマップ](https://qiita.com/radiance1104/private/7c5b04ce4cf8ec7bd708)

# 第9回：ニュースフィード投稿サーバIFを作る

今回はニュースフィードを投稿するPOST /newsfeedsを作成します。

## ニュースフィードを投稿するIFを登録する

下記のようにapp/rest.tsを修正し、expressにPOST /newsfeedsを追加します。
一旦受信したデータをログに出力するだけにしておきます。

```
        });
        app.post('/newsfeeds', (request, response, next) => {
            try {
                console.log(request);
                response.sendStatus(200);
            } catch (error) {
                response.sendStatus(500);
            }
        });
    }
    stop() {
```

## 作成したIFをクライアントから呼んでみる

Postmanを使って、作成したPOST /newsfeedsを呼び出してみます。
画像のようにPOST http://127.0.0.1:4300/newsfeedsを作成し送信するとレスポンスが受信できていることが確認できます。
1) 画面上部のタブ(＋)をクリックし、新規のタブを追加します。
2) メソッドにPOSTを選択します。
3) request URLにhttp://127.0.0.1:4200/newsfeedsを入力します。
4) Bodyに画像のとおりJSONを設定します。
5) Sendボタンをクリックします。

![スクリーンショット 2021-01-11 18.36.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202428/0467180b-daa4-c6d4-e738-a84e51f9d55b.png)

Sendを押すとレスポンスとして200 OKを受信していることが確認できます。

## サーバ側で受信したデータを確認する。

PostmanからPOSTメッセージを呼び出したあと、サーバ側のログにリクエストの中身が出力されました。
bodyの中に送信したデータが入っていることが確認できます。

![スクリーンショット 2021-01-11 18.41.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202428/017ae8aa-ef99-0e49-146d-1a502e239608.png)

## joiを使ってパラメータチェックを行う。

### モジュールをインストールする

下記のコマンドを実行し、joiをインストールします。

``` cli
$ npm install joi
```

### joiを読み込ませる

下記のようにapp/rest.tsを修正し、joiを読み込ませます。

``` app/rest.ts
import bodyParser = require('body-parser');
import joi = require('joi');
import {environment} from '../environment';
```

受信したリクエストBODYをjoiを使ってバリデーションします。

``` app/rest.ts
      try {
          const body = request.body;
          console.log(body);
          // パラメータのフォーマットを定義
          const scheme = joi.object({
            message: joi.string().required(),
            createdAt: joi.date().required()
          });
          // バリデーション
          const {error, value} = scheme.validate(body);
          if (error) {
            response.sendStatus(400);
          } else {
            response.sendStatus(200);
          }
      } catch (error) {
```

messageはstring型であること、createdAtはDate型であることをチェックしています。
また、どちらもrequiredで必須パラメータであることを指定しています。

Postmanから様々なパラメータを設定し呼び出してみて、
パラメータエラー(400)を正しく検知できていることを確認しましょう。

## 最後に
今回はニュースフィードを投稿するPOST IFを一つ作成してみました。
次回はフロントエンドからこのAPIを呼び出してみます。
今回開発したソースコードは [GitHub](https://github.com/radiance1104/web-learning-loadmap/tree/stage8-create-post-newsfeeds) に入っています。
Flaskで作るSNS　Flask(Blueprint,bcrypt)編

#TL;DL
Udemyの下記講座の受講記録

Python+FlaskでのWebアプリケーション開発講座！！～0からFlaskをマスターしてSNSを作成する～
https://www.udemy.com/course/flaskpythonweb/

この記事ではFlaskのBluePrintによるアプリケーション管理とbcryptによるパスワードの暗号化について記載する。

##BluePrintとは
作成したアプリケーションを機能などの単位別にグループ分けして管理したい場合に利用する機能。

例えば、個人情報管理機能（site1）とデータ照会機能（site2）のモジュールを別々に管理したい場合に、BluePrintを使用して分割管理することで、アプリケーションとしての見た目は1つでも、内部管理的には複数のアプリケーションとして分割管理することが可能となる。

**基本構造**
![スクリーンショット 2021-01-03 17.01.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/600163/306cf7a0-ca90-1c6a-1e9e-964203e93e19.png)

**構文**

１．管理したいアプリケーションをBluePrintオブジェクトとして作成する。

| フォーマット | サンプル | 作成されるURL例 |
|:--|:--|:--|
| BluePrint(サイトの名称, \_\_name\_\_, url_prefix='/urlとして利用する文字列') | mysite1_bp = Blueprint('mysite1', __name__, url_prefix='/site1') | http://www.xxxx/site1/hello |

```python
from flask import Blueprint, render_template

'''BlurPrintインスタンスの作成'''
mysite1_bp = Blueprint('mysite1', __name__, url_prefix='/site1')

@mysite1_bp.route('/hello')
def hello():
    return render_template('mysite1/hello.html')
```

２．__init__.py でアプリケーションにBluePrintオブジェクトを登録する。

```python
from flask import Flask

def create_app():
    app = Flask(__name__)
    from flaskr.mysite1.views import mysite1_bp
    from flaskr.mysite2.views import mysite2_bp

    app.register_blueprint(mysite1_bp)
    app.register_blueprint(mysite2_bp)
    return app
```
３．setup.py で__init__.pyに定義したアプリケーション情報を取得し、アプリを起動する。


```python
from flaskr import create_app
from flask import render_template

app = create_app()  # __init__.appより取得

@app.route('/')
def home():
    return render_template('home.html')

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000, debug=True)
```

##パスワードの暗号化（bcrypt）
Flask-Bcryptを利用してパスワードを暗号化する。

```terminal
: inport時は「flask_bcrypt」と単語感がアンダースコアである点に注意
>>> from flask_bcrypt import Bcrypt

: bcryptオブジェクトの作成
>>> bcrypt = Bcrypt()
>>> testpass = 'password'

: パスワードのハッシュ化
>>> hashed_password = bcrypt.generate_password_hash(password=testpass)
>>> hashed_password
b'$2b$12$3B0I.CHMIEya1OdyI/m44Od7I.TKhRLiOA.EMMWQP3MgUXgr9dkYG'

: ハッシュ化パスワードとの正誤比較
>>> bcrypt.check_password_hash(hashed_password, 'password')
True
>>> bcrypt.check_password_hash(hashed_password, 'pass')
False
```

サンプル

```python
from flask_bcrypt import generate_password_hash, check_password_hash

class User(UserMixin, db.Model):
    __tablename__ = 'users'

    id = db.Column(db.Integer, primary_key=True)
    email = db.Column(db.String(64), unique=True, index=True)
    username = db.Column(db.String(64), index=True)
    password = db.Column(db.String(128))

    def __init__(self, email, username, password):
        self.email = email
        self.username = username

        # フォームから渡されたpasswordの値を暗号化して変数に格納する。
        self.password = generate_password_hash(password)

    def validate_password(self, password):

        # 関数に渡されたパスワードが正しいか比較する。
        return check_password_hash(self.password, password)
```
自習” A Beginner's Guide to Getting User Input in Python”の和訳


元記事URL　https://hackernoon.com/a-beginners-guide-to-getting-user-input-in-python-141q312q

自習用の翻訳なので、自己責任でご利用ください。

# A Beginner's Guide to Getting User Input in Python(初心者向けガイド　Pythonでデータを入力する方法)
January 8th 2021
2021年1月8日

![29079D8A-0671-4DF0-8C5B-281A33731DFA.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35680/c22aafa3-b7d7-b6aa-9d8c-e8110a8e6b85.jpeg)



@aswinbarath
Aswin Barath
Budding Software Engineer
@aswinbarath
オースウィン・バラス
新人ソフトウエアエンジニア

Getting input from the user is what makes a program more interactive with the user.
ユーザから入力を受け付けることは、ユーザにとってプログラムをよりインタラクティブなものにします。

Hence, in python we have an input function: input(), to receive input from the user.
ですから、ユーザからの入力を受け取るために、Pythonには入力のための関数 `input()`があります。

Take a look at an example.
次のサンプルコードを見てください。

![B5BDCCF8-EA2D-476F-9274-CC484680B005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35680/15d8c6bd-5a95-7228-19fd-acea0c036039.png)


Output:
画面出力は次のようになります。

```
Enter any data:Happy new year!
Happy new year!
```

## Input Function Under the Hood(入力関数の内部の動き)

When input() function is encountered by python, the program will pause until the user enters data.
Pythonインタプリタが `input()` 関数を実行すると、ユーザがデータを入力するまでプログラムは一時停止します。

Later, any input entered by the user will be converted into a string. Let’s see another example to understand this point.
その後に、ユーザが何かしらのデータを入力すると、そのデータは文字列オブジェクトに変換されます。これを理解するために、次のサンプルコードを見てください。

![6CAC671F-E665-4AB1-B14C-FAB6DDB87812.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35680/07d9117e-6c4f-bf2c-0d01-c84c19a73336.png)


Output:
画面出力は次のようになります。

```
Enter any text: Have a great year ahead.
text: Have a great year ahead. , type: <class 'str'>
Enter any number: 2021
number: 2021 , type: <class 'str'>
```

So, in these cases make sure that you convert the input to your preferred data type using its corresponding constructors. Let’s see that example too.
このため、以上の場合には対応するコンスタラクタ（入門者が読むならば、ここでは変換手段）を使って入力されたデータを望むデータ型に変換する必要があります。次のサンプルコードも見てください。

![80AAAEF2-C6AC-43C0-9C12-7A5EE17E0401.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35680/dc1f7495-a919-859d-c744-0bf2738313a7.png)

Output:
画面出力は次のようになります。

```
Enter any number: 2021
number: 2021 , type: <class 'int'>
```

So, code along and have fun :)
と、いうことで、コーディングを楽しみましょう！(^v^)
（CBTで受けれられる）データ分析関連資格の難易度とお役たち度

## 育休期間中に

随分と長いことSWE/DSとしてやってきたのですが、育休期間を利用し、データ分析関連の資格を一ヶ月以内に取得しようとしました。
人の能力を計測するベンチマークとして資格というのはありそうな話であり、資格がどの程度意味がありそうなのかを実感値を持ってみたかったので受けてみました。


## いつでも受けれるCBTのデータ分析関連試験

年末年始の空き時間にCBT(コンピュータベースでの試験)で受けれるという条件と、異常に費用がかさまないという条件で探した結果、以下の４つの試験を受けることにしました。

1. 統計検定2級
2. Pythonエンジニア認定基礎試験
3. Pythonエンジニア認定データ分析試験
4. 統計調査士

ディープラーニング協会さんが主催するG検定・E検定もスコープに入れようとしたのですが、十万程度する講義を聞かなくてはいけないということで、流石にそこまでは投資対効果が不透明なものに投資できないと諦めました。


## 各勉強時間と結果

すでにある程度の実務経験がある人は想像通りそんなに難しくないという結果になりました。

- 統計検定2級 → 合格
    - 時間:日数にして2週間程度、合計12時間程度
    - [勉強ノート](https://gink03.github.io/%E7%B5%B1%E8%A8%88%E6%A4%9C%E5%AE%9A/)

過去問と統計WEBさんを参考に実際に解いてみて理解が浅い部分を補填するような勉強法をおこない行いました。
個人的にはCBTのテストは筆記の過去問より個々の問題は簡単だと感じましたが、量が多く、手計算では大変でした。


- Pythonエンジニア認定基礎試験 → 合格
    - 時間:60分程度
    - [勉強ノート](https://gink03.github.io/python%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E8%AA%8D%E5%AE%9A%E8%A9%A6%E9%A8%93/)

ノー勉で受かるレベルのものであると感じました。[Pythonの公式サイトのチュートリアル](https://docs.python.org/ja/3/tutorial/)を一通り読んだだけで合格することができました。


- Pythonエンジニア認定データ分析試験 → 合格
    - 時間:2時間程度
    - [勉強ノート](https://gink03.github.io/python%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E8%AA%8D%E5%AE%9A%E8%A9%A6%E9%A8%93/)

numpy, pandas, matplotの使い方とrandom forest, svmを聞いてくるような試験です。少々お値段が高いと思いましたが、参考書として紹介されている[Pythonによるあたらしいデータ分析の教科書](https://aoten.jp/store/detail.html?c1=%E8%B3%87%E6%A0%BC%E5%AF%BE%E7%AD%96%E6%95%99%E6%9D%90&c2=Python%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E8%AA%8D%E5%AE%9A%E8%A9%A6%E9%A8%93&no=a2480i_s180919)を購入して一通り拝読しました。matplotだけは怪しかったのですが、内容を眺めて把握してほぼ疑問がなかったので流し読みで終わりました。


- 統計調査士 → 合格
    - 時間: 日数にして一週間程度、合計8時間程度
    - [勉強ノート](https://gink03.github.io/%E7%B5%B1%E8%A8%88%E8%AA%BF%E6%9F%BB%E5%A3%AB/)

名前がかっこいいので受けたのですが、内容は国家の統計調査を行うための知識を問うものであり、データを読み取ってどういうことかを言い当てる以外に、どのような統計調査があるか、どのような法令になっているか、国家の統計の歴史など文系的素養がためされる試されるものです。体系的な知識でない歴史とか法律を覚えるのがとても苦手なのでこの試験が一番苦労しました。
勉強方法としては、[総務省統計局のホームページ](http://www.stat.go.jp/index.html)をダラダラと眺めるのが良さそう（歴史的背景や統計調査をどういう運用をしているかがわかる）


## 各試験の感想と実際に役に立ちそうなのか

お役立ち度でいうと、統計検定2級 > 統計調査士 > Pythonエンジニア認定データ分析試験 > Pythonエンジニア認定基礎試験です。実際の実務に照らしわせてそんな印象を持ちました。
Pythonの文法やライブラリを使う能力は非本質的でバージョンアップやそもそも言語の変更によりその知識が意味をなさなくなることが多いです。また、データがPythonのpandasですぐ扱える状態に加工されているとかもそんなに多くはなく、実験計画を立ててどういったデータを取得するかも重要な視点になり、実験計画ができる方が重要なケースもあり、本質的な知識のほうが取り回しがよく、再利用性も高いため、統計検定関連の知識のほうが意義があると感じました。


## 余談

資格よりコンペに参加するほうが良い理論、実感したところあります。

どの資格を受けてみようかなといろいろ見た中で、やたらSQLの資格を押すサイト・ブログも多かったのですが、BigData関連ではOracleとか特定のベンダーのDBを覚えることにあまり意味がない印象があり、GCP BigQueryやAWS Athenaなどが使えるとよいのではないか（つまりクラウドの資格のほうがいいのでは）という感想でした。

統計検定はやっていて楽しかったのと、たまにある知識の抜け漏れを無くすような嬉しい効果があったので準一級までは受けようと思いました。おすすめです。

実際に育児をしてみてとても実感したのですが、生後間もない赤ちゃんが居て、ミルクやおむつ交換に追われて、原因が特定できないギャン泣きなどされると、本を開き集中して勉強することのハードルが上がります。赤ちゃんの泣き声は大人に対するアラートなので、感情を強く揺さぶり、集中力が一気に下がります。世の育児と仕事を両立しているパパママは本当にすごいと実感しました。