OmniAICreator/Qiita-1.07M huggingface dataset:
Wikipediaの情報をCSVに保存し、Railsで活用

野球選手のデータをRailsで扱いたかったんですが、活用できるAPIがなかったので自力で集めてみました。
PythonはGoogleColaboratoryを使用してます。

## 0.流れ
Wikipediaの情報をGoogleColaboratoryからスクレイピング
↓
データを整え、CSVに保存
↓
Railsのデータベースに保存
↓
表示する

## 1.スクレイピング

### 準備
```python
import requests
import pandas as pd
from bs4 import BeautifulSoup

# 広島東洋カープの選手一覧
url = "https://ja.wikipedia.org/wiki/%E5%BA%83%E5%B3%B6%E6%9D%B1%E6%B4%8B%E3%82%AB%E3%83%BC%E3%83%97%E3%81%AE%E9%81%B8%E6%89%8B%E4%B8%80%E8%A6%A7"
```

### データの取得

```python
df = pd.read_html(url)
df[5].head()
```
![スクリーンショット 2021-03-05 17.09.53.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292027/49a5257d-5034-a155-9bf6-2d44ee363a8e.jpeg)


df[4]には投手の情報が入っています。
df[5],[6],[7]に捕手、内野手、外野手の情報が入っているので、野手として1つにまとめます。


```python
df_fielder = pd.concat([df[5], df[6], df[7]], ignore_index=True) #新たに行番号の割り当てのオプション
df_fielder["field"] = "F"
df[4]["field"] = "P"
```

### カラム名を英語表記に変更

```python
df_player = pd.concat([df_fielder, df[2]], ignore_index=True)
df_player.rename(columns={"背番号":"number", "選手名":"player_name", "投":"hand", "打":"bat"}, inplace=True)

df_after_player=df_player.drop("備考", axis=1)
df_after_player["team"]="C"  #カープ
df_after_player["league"]="S" #セ・リーグ
```




## 2.CSV保存
```python
from google.colab import files
import datetime

# ファイル名に日時を挿入
dt_now = datetime.datetime.now()
dt = dt_now.strftime('%Y%m%d%H%M%S')
file_name = "Carp_"+ dt + ".csv"

# CSVに変換
df_fielder.to_csv(file_name, index=False)

# CSVファイルのダウンロード
files.download(file_name)
```



## 3.Rails

### モデルの作成
```terminal
$ rails g model Player number:integer player_name:string hand:string bat:string team:string
```

### CSVの情報をデータベースに保存

```ruby
require 'csv'

CSV.foreach("Carp_20210304124010.csv", headers: true) do |row|  #「headers: true」先頭行をヘッダーとするので、rowには入らない
  Player.create!(
    # rowには、["22", "中村奨成", "右", "右", "C"]と各選手の情報が入っている。
    number: row[0].to_i,  #ファイル内で文字列になっていたため数値へ変換
    player_name: row[1],
    hand: row[2],
    bat: row[3],
    field: row[4],
    team: row[5],
    league: row[6]
  )
end

puts "Finish!"
```

### コントローラの作成
```terminal
$ rails g controller Players index
```

### コントローラからDBの情報を取得

```ruby
class PlayersController < ApplicationController
  def index
    @players = Player.all
  end
end
```

### ビューで表示
```
<% @players.each do |player| %>
  <li style="list-style: none"> 
    <%= player.number %>
    <%= player.player_name %>
    <%= player.hand %>
    <%= player.bat %>
    <%= player.team %>
  </li>
<% end %>
```


## 4.結果
こんな感じに表示することができました。
![スクリーンショット 2021-03-05 17.26.22.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292027/d0740544-0e1b-0651-d3a2-06d05b3d83c2.jpeg)
日付フォーマットの共通化

## はじめに
日付フォーマットメソッドを共通化して適用する方法について

## 環境
Rails 5.2.4

## やったこと

共通フォーマットの設定はここに記述します。

```config/initializers/time_formats.rb
Time::DATE_FORMATS[:datetime_jp] = '%Y年%m月%d日 %H時%M分'
```

Viewに適用します。

```
<% @boards.each do |b| %>
  <tr>
    <th><%= f.created_at.to_s(:datetime_jp) %></th>
    <th><%= f.updated_at.to_s(:datetime_jp) %></th>
  </tr>
<% end %>
```

これが（フォーマット前）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94029/7548cf9e-f0f6-1742-7e63-69368fd9d7e0.png)

こうなります（フォーマット後）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94029/e85fe5a9-0001-058d-94a9-cd0fe377cd13.png)
【Rails】renderメソッドのcollectionオプションの使い方

# 環境
macOS: Big Sur Ver11.2.2
Rails: 6.０．０
Ruby: 2.6.5


# エラーの内容
ビューファイルで以下のようにrenderメソッドを使って部分パーシャルを呼び出したのだが、なぜかエラーが出て表示されなかった。

```erb
<div class="main-contents">
  <h2 class="main-title">新規登録店舗</h2>
  <div class="contents-bar">
    <%= render partial: "static_pages/new_users", collection: @users %>
  </div>
</div>
```

# 解決策
通常なら上記の記述でパーシャルファイルでは「user」として変数を利用できるが、なぜか変数がうまく渡っていなかった模様。
試しに以下の記述を追記したら無事に表示された。

```erb
<div class="main-contents">
  <h2 class="main-title">新規登録店舗</h2>
  <div class="contents-bar">
    <%= render partial: "static_pages/new_users", collection: @users, :as => "user" %>
  </div>
</div>
```

「as」でパーシャルファイルで使う変数名を明確に指定しただけ。

とりあえず表示されて一安心です！
WEB developer in 2021 ＃０ はじめに

WEB developer in 2021のガイドに沿った学習をこれから進めていこうと思います。

#”WEB developer in 2021”とは
”WEB developer in 2021”とはKamran Ahmedというエンジニアが公開している。WEB(フロントエンド・バックエンド)エンジニア向けの学習の手引きのようなものです。どのような順序で何を学習するとよいかが書かれたロードマップになっています。
https://github.com/kamranahmedse/developer-roadmap
![web developer in 2021.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668383/b4f8a366-a46e-e15b-1fdf-8285d1db6718.png)
フロントエンドパス
![web developer in 2021 frontend .PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/668383/bfbe4f73-b218-6874-244f-95d764d93dad.png)

#なぜやろうと思ったのか
まず、自分はHAL東京という専門学校の4年制課程の2年生(2021年4月から3年生)です。しかし、未だにFEの午後試験に合格できずにいます。加えて、アウトプットした「作品」と呼べるものもほぼありません。つまり、来年度から始まるインターン、ひいては就職活動の時に「何を勉強してきたのか」あるいはその成果としての「作品」が無いと言っていい状況にいます。

つぎに、技術の移り変わりが激しいWEB業界において「自分はなにをキャッチアップすべきなのか」は現状の自分が判断すべきことではないと思いました。なので、(胡散臭くない)初学者向けのロードマップをどれか一つ選び愚直にそれをこなしていくしかないと思いました。

前述した自分の立場・状況・スキルなどを考慮し、「何を勉強してきたのか」を残すことができ、多くの初級エンジニアに参考にされているであろう”WEB developer in 2021”に沿った学習を既習範囲も含めブログに残していこうという結論に至りました。
WEB developer in 2021に沿った学習(復習)と並行して作品作りも行い、ロードマップには記載されてないFEの範囲にも手を伸ばし合格を目指します。
herokuにデプロイする際に' The Ruby version you are trying to install does not exist on this stack. 'という警告が出る問題の対処法

## 概要

Railsでアプリケーションを作成し、リモートリポジトリのherokuにpushした際に、下記の警告メッセージが表示され、pushに失敗してしまうというのが今回の大まかな概要になります。

```The Ruby version you are trying to install does not exist on this stack.
You are trying to install ruby-2.6.5 on heroku-20.
Ruby ruby-2.6.5 is present on the following stacks:
cedar-14, heroku-16, heroku-18
```
この警告は訳すと、「あなたはRubyのバージョン2.6.5をheroku-20スタックでinstallしようとしています」ってことですね。

要するに、**heroku側のスタックと、実際に利用しているRubyのバージョンがミスマッチしているが故に発生している警告**です。



## 解決策


警告メッセージによるとheroku-20では、Rubyのバージョン2.6.5はフォローされておらず、Rubyのバージョン2.6.5はcedar-14, heroku-16, heroku-18のスタック上でフォローされているということがわかります。

なので、下記のコマンドで

```
 heroku stack:set <stackname>
```

でherokuのスタックを変更すると、herokuにpushできるようになります。
Android開発でJSONからdataクラスを一発で作成する

## この記事は？
`JSON TO Kotlin Class`を使って、
JSONのテキストを適当なKotlin data classに変換する方法を紹介します。

## Pluginの導入
AndroidStudioの`Preferences>Plugins`から`JSON TO Kotlin Class`をinstall（ない場合はMarketplaceタブからDownload）

<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42913/8ea552ec-2b54-f2fe-0df2-60b42a008165.png width=640px>


## 使用方法
data classを作成したいpackageで右クリックをして、`Kotlin data class File from JSON`を選択。
<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42913/41de2ff8-12e4-5738-0898-9c55f1f92361.png width=640px>

JSONテキストをペーストし、Class Nameを入力し、Generateを押す。

<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42913/2c0a638c-7a96-2df9-11d7-b742aafc8477.png width=640px>

このような感じでdata classが作成される。

```kotlin
data class MovieList(
        val page: Int,
        val movies: List<Result>,
        val total_pages: Int,
        val total_results: Int
)

data class Result(
        val genre_ids: List<Int>,
        val id: Int,
        val original_language: String,
        val original_title: String,
        val overview: String,
        val popularity: Double,
        val poster_path: String,
        val release_date: String,
        val title: String,
        val video: Boolean,
        val vote_average: Int,
        val vote_count: Int
)
```
[iMacros] element A specified by (略) was not foundエラーの解消

## 事象
RECORADはできたけど、PLAYすると以下のエラーで落ちてしまう

```imacros:エラー内容
element A specified by TXT****(押下したい要素) was not found, line: 5
```
落ちている該当行

`TAG POS=1 TYPE=A ATTR=TXT:ボタン名`

## 解決方法

スクリプトの手直し編集（画像はiMacros for Chrome）
スクリプト名を右クリック＞Edit
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243523/ebe8e934-aa80-98bc-8b68-8c932ffa92a9.png" width="200px">


#### 原因1：ページのローディング時間が長かったので、このボタンを押す瞬間にまだページが読み込めていなかった
待機時間処理を追加して解決(単位：秒)

```
WAIT SECONDS=3
```

#### 原因2：`TAG POS=1 TYPE=A ATTR=TXT:ボタン名`がどの要素か特定できていなかった

XPATH指定で要素を指定すると解決

```
TAG XPATH="/html/body/div[9]/div/div/div/div[4]/dl[2]/dd/ul/li[4]/a"
```

※XPATH取得方法（Chromeの場合）
①F12でデベロッパーツール起動
②赤枠の矢印マークを押下
③要素を選択
③XPATHをコピー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243523/2cbd1a23-d562-74e3-5083-c2328d5f92b6.png)
ubuntu18.04LTSにNEUTRINOをインストール

# ダウンロード(1.3GBくらいあるので先にしておく)
NEUTRINO（オンライン版）をダウンロードし展開
URL:https://drive.google.com/drive/folders/1cDicMle0z0y6zRLbQp3dD2kI-Zn21YHC

# インストール

## gccのインストール
sudo apt-get install gcc
## numpy, scipyのインストール
pip install numpy
pip install scipy

## （NSFを使う場合のみ）nvidia-driverをインストール
（NSFを使う場合のみ）CUDA Toolkitをインストール

# 実行
## ダウンロードしたNEUTRINOを展開
実行権限を付与
chmod a+x Run.sh bin/*
./Run.sh



# 参考URL（本家）
「Linuxへのインストール手順」
https://n3utrino.work/596/
「0から作るDeepLearning」の6章を写経した時のエラー原因2

こんにちは！

今日のエラー原因を書きます。

使用した本：「０から作るDeepLearning」

リポジトリしたプログラム　→　[deep-learning-from-scratch](https://github.com/oreilly-japan/deep-learning-from-scratch.git)
#「hyperparameter.optimization.py」の写経について
・9割方写し間違いで文法的な間違いはなかった。

#エラー対策
移し直すのみ
#所感
3日連続で写経していると段々と移すスピードが早くなってきている感覚があります。
後は詳細なプログラムの内容を理解していきたいと思います。
Dashで作成したアプリをGitHubと連携させてHerokuに自動デプロイ

# はじめに

[Dashで作成したアプリをHerokuにデプロイ](https://qiita.com/honda28/items/fb0d61d59b27e18015f1)でアプリを Heroku にデプロイした。GitHub と連携させることができるようなので試してみた。私の GitHub アカウントは[これ](https://github.com/bemac-honda)。

# GitHub にコードをプッシュ

自身の GitHub にて whc-app という名前のリモートレポジトリを作成。[Dashで作成したアプリをHerokuにデプロイ](https://qiita.com/honda28/items/fb0d61d59b27e18015f1)にて、すでにローカルレポジトリが存在するため、リモートレポジトリにプッシュする。

```
$ git remote add origin https://github.com/bemac-honda/whc-app.git
$ git branch -M main
$ git push -u origin main
```

# GitHub と連携

[Heroku Dashboard](https://dashboard.heroku.com/apps)にて、[ whc-app ] → [ Deploy タブ ] → [ Deployment method ] から "GitHub" を選択。[ Connect to GitHub ] で自身のレポジトリを検索して [ Connect ]。
連携がうまくできれば Automatic deploys と Manual deploy の 2 通りのデプロイができるようになるので、順に試す。

## Manual deploy
文字とおり手動でデプロイを行う。
 [ Manual deploy ] にて、ブランチを選択して [ Deploy Branch ] を押すだけ。なにもなければ main ブランチでよいと思う。問題なくデプロイできれば [ View ] からそのままアプリを見ることができる。![Manual.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/769545/191e969d-23a7-76a8-9591-2d8a1994c632.png)

## Automatic deploys
GitHub にプッシュするとソースコードの変更を検知して、自動で Heroku のビルドを実行し、デプロイしてくれる。
 [ Automatic deploys ] にて、ブランチを選択して [ Enable Automatic Deploys ] をクリック。![Auto.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/769545/56d7cbdb-a4ec-45f4-07b2-467676095516.png)

これで今後コードを変更した際は GitHub にさえプッシュしておけば自動でデプロイされる。
Laravel はじめました [1. 環境構築]

Java エンジニアですが仕事で使うので Laravel を勉強してみました。

# 要件
- PHP 7.4
- Laravel 5.7
- MySQL 5.7
- Apache 2.4


# 開発環境
- macOS Big Sur
- VSCode


# ローカル環境構築
- mac の PHP はプリインストールの 7.4 をそのまま利用する

- VSCode に 以下プラグインを追加
    - Laravel Artisan
    - Laravel Brade Snippets
    - Laravel goto view
    - Laravel Snippets
    - PHP Debug
    - PHP IntelliSense


# リモート環境構築
どうせなら docker 上で動かそうと思い、 github をウロウロしました。
かなり素晴らしいリポジトリを発見したので、 fork させていただきました。

- [sosobl/env-laravel](https://github.com/sosobl/env-laravel)
    - fork 元は [ucan-lab/docker-laravel](https://github.com/ucan-lab/docker-laravel)
        - くわしい解説は [最強のLaravel開発環境をDockerを使って構築する](https://qiita.com/ucan-lab/items/5fc1281cd8076c8ac9f4) を参照
    - fork 元より以下を修正
        1. nginx ではなく apache を使用する
        2. mysql をダウングレード
        3. 使わなそうなコマンド等を削除

- 構成
    - app
        - php と apache が稼働するコンテナ
    - db
        - MySQL が稼働するコンテナ
        - 一応コンテナを落としても中身は残るようにしてある

- 使い方
    - 初回 (Laravel プロジェクトを作成する)

        ```bash
        $ git clone git@github.com:sosobl/env-laravel.git
        $ cd env-laravel
        $ make create-project # Install the latest Laravel project
        $ make install-recommend-packages # Not required
        ```

    - 初回 (既存プロジェクトをインポートする)

        ```bash
        $ git clone git@github.com:sosobl/env-laravel.git
        $ cd env-laravel
        $ git clone git@github.com:laravel/laravel.git docker-laravel/backend # Clone any project to the backend directory
        $ make init
        ```

    - 2 回目以降

        ```bash
        $ make up
        ```


# 改善点
- ローカルの IDE(VSCode) から docker コンテナ上で稼働する php へのデバッグ方法が未検討
    - 多分この辺を参考にすればすぐできそう
        - [Step Debugging](https://xdebug.org/docs/step_debug)
        - [VSCode + XdebugでCakePHPのデバッグ環境を整える。](https://hacknote.jp/archives/58162/)
        - [Visual Studio CodeでLaravelをリモートデバッグする設定【Vagrant編】](https://qiita.com/_bobtabo_/items/185475f43d438cd3562d)
        - [[PHP] Xdebug のリモートデバッグ、理解していますか？](https://qiita.com/castaneai/items/d5fdf577a348012ed8af)
        - [WSL2 UbuntuのPHPにXdebugを追加してVSCodeでデバッグする。](https://60can.hatenablog.jp/entry/wsl2-ubuntu%25e3%2581%25aephp%25e3%2581%25abxdebug%25e3%2582%2592%25e8%25bf%25bd%25e5%258a%25a0%25e3%2581%2597%25e3%2581%25a6vscode%25e3%2581%25a7%25e3%2583%2587%25e3%2583%2590%25e3%2583%2583%25e3%2582%25b0%25e3%258)
- Redis 入れないと...


# 変更履歴
- 2021/03/08
    1. PHP のバージョンを 5.6 へダウングレード（元は 5.7）
        - Laravel 3 の laravel/helpers.php 内に定義されている ```yield``` メソッドが PHP 5.5 以降は予約語として存在するためエラーとなる
    2. Laravel 3 を curl でダウンロード、解凍するよう修正
- 2021/03/17
    1. PHP は 7.4、Laravel は 5.7 にした
    2. Laravel 3 対応は Makefile に残しておいた。が、使用しない予定。
LaravelのMySQLデータベースをXAMPPからDockerに切り替え

自分はこのやり方でできたという記録用です。私はXAMPPを使っていましたが、Dockerに切り替えたいと思います。
既にアプリの中身は完成している状態から始めます。

プロジェクトのターミナルでDocker imageをダウンロード

```
docker pull mysql
```
mysqlサーバーを立てる

```
docker run --name mysql-server -e MYSQL_ROOT_PASSWORD="admin" -d -p 53306:3306 mysql
```
mysqlへログイン

```
mysql -uroot -padmin -h 127.0.0.1 -P 53306
```

XAMPPで作成していたデータベースをDockerのmysqlでも作成します。
新しいデータベースをXAMPPのものと同じように作り変えます。

```
php artisan migrate:fresh
```

エラー
>SQLSTATE[HY000] [2054] The server requested authentication method unknown to the client (SQL: SHOW FULL TABLES WHERE table_type = 'BASE TABLE')

認証方式を変えます。

```
SELECT user, host, plugin FROM mysql.user;

//私の結果
+------------------+-----------+-----------------------+
| user             | host      | plugin                |
+------------------+-----------+-----------------------+
| root             | %         | caching_sha2_password |
| mysql.infoschema | localhost | caching_sha2_password |
| mysql.session    | localhost | caching_sha2_password |
| mysql.sys        | localhost | caching_sha2_password |
| root             | localhost | caching_sha2_password |
+------------------+-----------+-----------------------+
```
私の場合rootの二つを変えました。

```
alter user 'root'@'%' identified with mysql_native_password by 'pass';
alter user 'root'@'localhost' identified with mysql_native_password by 'pass';
```
envファイルを書き換えます。

```
DB_CONNECTION=mysql
DB_HOST=localhost  //変更
DB_PORT=53306  　　//変更
DB_DATABASE=database_name  //自分が新しく作ったデータベース名
DB_USERNAME=root
DB_PASSWORD=pass  //先程のパスワード
```
ここまでできたらマイグレーションします。

```
php artisan migrate:fresh
```
php artisan serveと打つとデータベースにデータが入っていない状態で立ち上がると思います。シーダーファイルの中身を入れます。

```
php artisan db:seed
```
これでデータベースの移行が完了しました。

参考
https://tyablog.net/2017/06/10/docker-setup-mysql/
https://symfoware.blog.fc2.com/blog-entry-2160.html
Android開発でAPIキーを隠蔽してGitHubに上げる

# この記事の目的
Android開発でWebAPIを利用する場合に、APIキーをGitのコミットログに含めずに扱う方法を紹介する。


# 手順

## gradle.propertiesにAPIキーを記述
APIキーを記述

```properies
myApiKey=3a6...534
```

記述したAPIキーがgitの管理化に載らないよう、`gradle.properties`を.gitignoreに含めておく。

一度gitに`gradle.properties`を上げたことがある場合は、キャッシュを削除してからコミットする

## BuildConfigの作成
`app/build.gradle`にbuildConfigFieldを定義、

```gradle
android {
    defaultConfig {
        buildConfigField "String", "API_KEY", "\"${project.property("myApiKey")}\""
    }
}
```
ビルドするとBuildConfig.javaに追加されている

```java
public final class BuildConfig {
  ...
  public static final String API_KEY = "3a6...534";
}
```

## APIキーの取得
`BuildConfig.MY_API_KEY`でキーの文字列を取得

```kotlin
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        ...
        Log.i("MYTAG", BuildConfig.MY_API_KEY)
    }
}
```
RubyでMySQLに接続し、大量のINSERT文を作成する

大量のINSER文を発行する必要があったので、スクリプトで書いてみた。
RubyとMySQLはインストールしてある前提

### ディレクトリとファイルの作成
```bash:terminal
$ mkdir ruby_scripts && cd $_
$ touch test.rb
$ chmod 755 test.rb
```

### test.rbの中身
```test.rb
#!/usr/bin/ruby

require 'mysql2'

connection = Mysql2::Client.new(host: "localhost", username: "root", password: 'pass', :encoding => 'utf8', database: 'database_name')
# 自分の環境に合わせる

selectSql = "SELECT id FROM table WHERE flag = 1;"
# こんな単純なSELECT文ならそもそもスクリプトを書く必要はないと思うが...

res = connection.query(selectSql)

res.each do |r|
  code = r["id"]
  # 実行結果のINSERT文内の変数rにハッシュがそのまま入ってしまうので、値だけを取り出して新しい変数codeに代入

  puts "INSERT INTO table2 (id, code) VALUES (2, '#{code}');"
end
```
### Gemfileの作成
```
$ bundle init
```

### Gemfileの一番下に記述
```
gem "mysql2"
```
### bundle install
```
$ bundle install
```

### 実行
```
bundle exec ruby test.rb > hoge.sql
```

上記のコマンドを実行して作られる`hoge.sql`をsourceコマンドで実行すればデータをINSERTできます。
fuelphp バリデーションエラー（$val->error_message()）のcontrollerからviewへの渡し方

```
controller.php

if (Input::post('send')) {
    $val = Validation::forge();
    $val->add_field('name', '名前', 'required|max_length[40]|valid_string[alpha]');
    $val->add_field('email', 'メールアドレス', 'required|valid_email|max_length[250]');
    if($val->run()) {
        //バリデーション成功
    } else {
        //バリデーション失敗
        $err = array();
        foreach ($val->error_message() as $field => $message) {
            $err = array_merge($err,array($field => $message));
        }
        $data['err'] = $err;
    }
}
```

```
view.php

<?php if (isset($err)) { ?>
<?php foreach ($err as $key => $value) : ?>
    <?php echo '<p>'.$value.'</p>'; ?>
<?php endforeach ; ?>
<?php } ?>
```
【NW003】Azure ロードバランサを設計する

# Azureロードバランサのパラメータがわからない
AWSって直感的に判断してばばっと作成できたんですが、Azureはなにも考えずに作ろうとしたら仮想マシンをメンバとして追加できませんでした。
さらにチェコ語で表示される事件に見舞われ・・・ちょっと調べたらゴミカスみたいな情報しかないことに立腹しつつここにまとめておきます。各パラメータについてチェコ語問題を回避するために各パラメータは英語表記にしてます。
※わかんない部分は追って編集して更新。さらにクロスリージョンロードバランサについての記載は機能がプレビュー段階ということで、編集する可能性大。

## Project details
[Subscription]
どのサブスクリプションに作成するか指定。当然仮想マシン用のLBであればその仮想マシンが存在する場所を指定する必要がある。

[Resource Group]
どのResource Groupに作成するのかの指定。

## Instance details
[Name]
このLBの名前

[Region]
このLBを配置する物理的な場所

[Type]
Internal：Azureに閉じたアクセスになり、インターネット経由でアクセスできない
Public：インターネット経由でアクセスさせるためにPublic IPを付与させる

[SKU]
あとから変更できないみたい。
仮想マシン側のPublic IP SKUと一致するものを選択しないとこの後でLBのメンバーに仮想マシン追加できない。

Standard：Basicより機能面で良い。細かい情報はマニュアル参照で。Standardを指定したときのみ後続のTier設定やRouting preference設定が可能となる。たとえば、東日本と西日本の仮想マシンに対してのクロスリージョンのロードバランサ構成が必要な場合Standardが必須。

Basic：基本Standard使えとあるのでStandard選ぶこと。ただ参加させるべき仮想マシン
Public IPのSKUがBasicならBasicを利用すること。

[Tier]
クロスリージョンでのロードバランサ構成を行う場合にGlobalである必要がある。
Regional：クロスリージョンじゃないロードバランサ構成のときに指定
Global：クロスリージョンロードバランサ構成にする場合に指定

## Public IP address
[Public IP address]
既存のものを利用するか新規作成するかを選択

[Public IP address name]
Create newを選択した場合に、IPアドレスの名前を付与する

[Public IP address SKU]
これは上のInstance detailsに指定したSKUが自動的に設定される。

[IP address assignment]
Dynamic：動的に変化するPublic ip addressにする
Static：固定のPublic ip addressにする
動的IPにするケースって具体的にどういうケース化わかんないわ。
GlobalのDNS名で名前解決できるものくれるのか？

[Availability zone]
No zone：わかんない
Zone Redundant：わかんない
1：わかんない
2：わかんない
3：わかんない

[Add a public IPv6 address]
IPv6つかうかどうか。ちなみにSKUがBasicだとDymamic PIPしか使えない模様。
SKUがStandardだとStatic PIPに自動設定される。

[Routing preference]
Microsoft Network：可能な限りMicrosoftのグローバルNWを利用したい場合指定。ちなみにクロスリージョンロードバランサにする場合の要件になるみたい。なんでか知らんけど。
Internet：最低限MicrosoftのNWを利用し、基本インターネット経由でこのLBと通信させる場合に利用


URL:チュートリアル:Azure portal を使用してリージョン間 Azure ロード バランサーを作成する
https://docs.microsoft.com/ja-jp/azure/load-balancer/tutorial-cross-region-portal


変更履歴：
2021/3/8 クロスリージョン機能がプレビューであること記載、関連URL追加、Tier部分記載事項編集。
VPCの全体像⓵(AWS)

#VPCとは

VPCとは、仮想ネットワークサービスのことです。

これはAWSで作った様々なものを繋ぎ合わせる大変重要なサービスです。なぜなら全てのサービスを関連するものであり、エラーの原因にもVPCの知識が必要になることが多いからです。

VPCは、AWS内部のネットワーク環境で自分専用のAWSの領域です。その領域をどのようなセキュリティルールで守るのか、どの通信を入ってくるのを許可、拒否するのか。VPCは、セキュリティ面の設定も含まれるサービスです。

AWSアカウントを作成した後にデフォルトでVPCが１つ作成されていますが、このデフォルトVPCは使わずに個別に作成していくケースが多いです。


#サーバーの拠点

VPCの説明に入る前に、大切な用語である


・アベーラビリティゾーン
・リージョン
・エッジロケーション

について抑えていきます。

*以下は、AWSの公式サイト(Gloval Infrastructure)の内容です。

##アベーラビリティゾーン(AZ)

アベーラビリティゾーン(AZ）とは、データセンタのことです。

各データセンターには、数万台のサーバーが収容されていると言われています。このデータセンターの単位(青点)のことをアベーラビリティゾーン(AZ）と呼ばれています。

日本にも、東京に４つ、大阪に３つのAZがあります。
大きなデータセンターを持つよりも、小さなデータセンターに分割する方が安全です。


##リージョン

AZを束ねた地域(オレンジ点)を、リージョンといいます。


##エッジロケーション

クラウドフロントが情報をキャッシュして送る拠点を、エッジロケーション(ピンク点）といいます。キャッシュすることでネットワークの通信速度の遅延を防ぐことができます。しかし、AWSを利用する際は、こちらを意識する必要はありません。

*キャッシュ:一度使ったものを保存しておき次回以降の速度アップに役立てる方法

これからは、基本的には東京リージョンを使うという前提で説明していきます。

#複数のVPCを使うとき

個人で使う分には、VPCが１つあれば十分です。
しかし、企業では複数のVPCを使うことが多いです。

Ex)ショッピングサイトのVPC、動画サイトのVPC、ゲームサイトのVPC

なおVPCを作成できる数には制限があります。
１アカウントにつき、最大５つまでのVPCを作成できます。

##マルチVPC

１つのアカウントで複数のVPCを設定するパターンを、マルチVPCといいます。
１つのアカウントを使用するので、中規模企業向きとなります。

##マルチアカウント

AWSでは、クレジットカードを登録した管理アカウントから複数のアカウントを作ることができます。この作成した複数のアカウントぞれぞれにVPCを作成していくというやり方があります。これをマルチアカウントといいます。

チームが明確に分かれているような会社なら、マルチアカウントのようにアカウントを分けた方が権限管理がしやすくなります。複数のアカウントを使用するので、大規模企業向きとなります。

#サブネット

大きなネットワークを複数の小さなネットワークに分けてセキュリティレベルを高めようという考え方があります。その小さなネットワークをサブネットといいます。

サブネットは、データセンター(AZ)をまたいで作成することはできません。なので１つのAZを利用して作成していきます。

VPCやサブネットには、IPアドレスの範囲を割り当てて使用していきます。

##パブリックサブネット(Public subnet)

・インターネット接続可

ルートテーブルにインターネットゲートウェイのルーティング有

##プライベートナブネット(Private subnet)

・インターネット接続不可

ルートテーブルにインターネットゲートウェイのルーティング無
Swiftのメモ（素人が趣味でやってるのをメモしてるやつ。自分用）

 :relaxed:
textField.resignFirstResponder()は、キーボーどを呼び出しした際に、returnキーで消えてくれるもの。もしくは、キーボード以外の画面をタッチすると、消えてくれる

:sunglasses:
dismiss(animated: true, completion: nil)で、画面遷移する前の画面に戻れる感じ？

:frowning2:
 performSegue(withIdentifier: "SegueにつけるID名", sender: nil)
これで指定したSegueから移行させることができるはず・・・できた一応

isHiddenは隠すって意味ー
WaniCTF simple Writeup Using Ghidra

Ghidraを勉強した記録として残しておく。
基本的な stack strings の問題なのでsimpleと名付けられたのだと思う。

simpleの入手先

https://github.com/wani-hackase/wanictf2020-writeup/tree/master/reversing/simple/file


表層解析で得られる文字列 incorrect を検索
普通にmain関数内

main関数のデコンパイル結果（当初）

```c
undefined8 main(void)
{
  size_t sVar1;
  undefined8 uVar2;
  char local_78 [48];
  char local_48 [60];
  uint local_c;
  
  printf("input flag : ");
  __isoc99_scanf(&DAT_00100922,local_48);
  sVar1 = strlen(local_48);
  if (sVar1 == 0x24) {
    local_78[0] = 'F';
    local_78[1] = 0x4c;
    local_78[2] = 0x41;
    local_78[3] = 0x47;
    local_78[4] = 0x7b;
    （中略）
    local_78[31] = 0x69;
    local_78[32] = 0x6e;
    local_78[33] = 0x67;
    local_78[34] = 0x73;
    local_78[35] = 0x7d;
    local_c = 0;
    while (local_c < 0x24) {
      if (local_48[(int)local_c] != local_78[(int)local_c]) {
        puts("Incorrect");
        return 1;
      }
      local_c = local_c + 1;
    }
    printf("Correct! Flag is %s\n",local_48);
    uVar2 = 0;
  }
  else {
    puts("incorrect");
    uVar2 = 1;
  }
  return uVar2;
}
```

変数の型を変更してデコンパイル結果の誤りを正し，わかりやすい変数名に変更

```c
undefined8 main(void)
{
  size_t size;
  undefined8 uVar1;
  char flag [48];
  char input_value [60];
  int i;
  
  printf("input flag : ");
  __isoc99_scanf(&DAT_00100922,input_value);
  size = strlen(input_value);
  if (size == 0x24) {
    flag[0] = 'F';
    flag[1] = 0x4c;
    flag[2] = 0x41;
    flag[3] = 0x47;
    flag[4] = 0x7b;
    （中略）
    flag[31] = 0x69;
    flag[32] = 0x6e;
    flag[33] = 0x67;
    flag[34] = 0x73;
    flag[35] = 0x7d;
    i = 0;
    while ((uint)i < 0x24) {
      if (input_value[i] != flag[i]) {
        puts("Incorrect");
        return 1;
      }
      i = i + 1;
    }
    printf("Correct! Flag is %s\n",input_value);
    uVar1 = 0;
  }
  else {
    puts("incorrect");
    uVar1 = 1;
  }
  return uVar1;
}
```

0x00100793から始まる stack strings の逆アセンブル部分

```
        00100793 c6 45 90 46     MOV        byte ptr [RBP + local_78],0x46
        00100797 c6 45 91 4c     MOV        byte ptr [RBP + local_77],0x4c
        0010079b c6 45 92 41     MOV        byte ptr [RBP + local_76],0x41
        0010079f c6 45 93 47     MOV        byte ptr [RBP + local_75],0x47
        001007a3 c6 45 94 7b     MOV        byte ptr [RBP + local_74],0x7b
        （中略）
        0010080f c6 45 af 69     MOV        byte ptr [RBP + local_59],0x69
        00100813 c6 45 b0 6e     MOV        byte ptr [RBP + local_58],0x6e
        00100817 c6 45 b1 67     MOV        byte ptr [RBP + local_57],0x67
        0010081b c6 45 b2 73     MOV        byte ptr [RBP + local_56],0x73
        0010081f c6 45 b3 7d     MOV        byte ptr [RBP + local_55],0x7d
```

ソルバー ( Ghidra Script )

```python
ans=[]

inst = getInstructionAt(toAddr(0x00100793))

i = 0
while i < 0x24:
    ans.append(inst.getOpObjects(1)[0].getValue())
    inst = inst.getNext()
    i = i + 1

print(ans)
print(''.join(map(chr,ans)))
```
Microsoft Power Fx 概要

# 参照元
- Microsoft Power Fx Overview
    - Doc 
        - [Microsoft Power Fx overview](https://docs.microsoft.com/en-us/power-platform/power-fx/overview)
        - [What is Microsoft Power Fx?](https://powerapps.microsoft.com/en-us/blog/what-is-microsoft-power-fx/)
    - Video 
        - [April Dunnam "Microsoft Power Fx Overview"](https://www.youtube.com/watch?v=7ub-xeOAtFk)
        - [Rory Neary "What is Microsoft Power Fx?"](https://www.youtube.com/watch?v=DrE-IBSz9Aw)

# Power Fxとは？

- Power Apps キャンバスアプリで使われている数式言語（formula language）です。
- 可能な限りExcelに近いタイプ、演算子、関数を使い、Excelの知識が活用できます。
- Excelが提供しないデータ操作は、SQLを使っています。
- Cのような行コメント、インラインコメントが記述できます。

　スプレッドシートを作成するのと同じくらい簡単にアプリが作成できます。以下の表は、Power Fxの関数の全てで、緑色のマークがついているものは、Excelと同じか、非常に近いものです。
![PowerFx関数](https://powerappsblogscdn.azureedge.net/wp-content/uploads/2021/02/2021-02-28_13h01_54.png)

例えば、文字を逆順にで検索する数式は、以下のようになります。

Excelでは
![Exce](https://docs.microsoft.com/en-us/power-platform/power-fx/media/overview/reverse-search-excel.png)
Power Fxでは
![PowerFx](https://docs.microsoft.com/en-us/power-platform/power-fx/media/overview/reverse-search-power-apps.gif)

　スプレッドシートと同様に、変更が即時に反映され、コンパイルモードや実行モードにする必要はありません。インクリメンタルコンパイラで、エラーはすぐに表示されます。IntelliSenseや提案、自動補完、型チェックも機能します。数式言語で、コンポーネントと関数を作成できます。

　Power Fxの強力な式は、複雑な制御をLinqのように分かりやすく1行で記述することも出来るようになります。が、Power Fxはオブジェクト指向言語ではありません。
![Employee](https://docs.microsoft.com/en-us/power-platform/power-fx/media/overview/low-code-javascript.gif)

# どこが新しいの？

- この言語はオープンソースで開発されており、外部の人も貢献することができます。
- Power Platformの統一言語となる予定です。
- Power Fxの登場により"no code"から"pro code"までの全範囲が可能になります。

# ロールアウト

- 2021年末に、Dataversの計算列、AI Builder、Power Virtual Agentに実装します。
- 2021年以降に、Dataverseのビジネスルールの定義、Power Automateに実装します。

# 何の役に立つの？

- モデル駆動型アプリでは、JavaScriptを使う必要／理由がなくなります。
- Power AppsとPower Automateの式に一貫性ができます。

# しないといけないこと

- Power BI使いの人
    - 心配は不要です。MやDAXと置き換わるものではありません。3つ全てが一緒に幸せに暮らします。
- Power Automate使いの人
    - 今すぐすることはありません。どうなるか分かるのは、１～２年先です。
- Dataverse/Model Driven appとPower Virtual Agent使いの人
    - キャンバスアプリの式についての勉強を始めましょう
- Power Apps Canvas apps使いの人
    - 何の変更もありません。
    - サンプル https://github.com/microsoft/Power-Fx
【Flutter】showDatePickerで誕生日を指定させよう

Flutterでは、ユーザーに「日付」を選択させたいときはshowDatePickerメソッドを使います。
UIは下の画像みたいな感じ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1109597/e030a2e1-726e-6049-465d-3ca237d2658a.png)

これを使えば「誕生日を要求する」こともできます。
少し使い方にクセがあると感じたので、今回はshowDatePickerの基本的な使い方を紹介します。

```dart:main.dart
RaisedButton(
  child: Text('誕生日を設定する'),
  onPressed: () async {
    final date = await showDatePicker(
      context: context,

      locale: const Locale("ja"), //日本語化（アプリ自体を日本語対応させる必要があります。今回は省略させていただきます）
      initialDatePickerMode: DatePickerMode.year, //最初に年から入力させる
      initialDate: DateTime(DateTime.now().year - 10), //最初に選択させる日付（今回は10年前）

      firstDate: DateTime(DateTime.now().year - 100, DateTime.now().month, DateTime.now().day), //選択可能な、もっとも古い日付（今回は100年前の今日にしています）
      lastDate: DateTime(DateTime.now().year - 6, DateTime.now().month, DateTime.now().day), ////選択可能な、もっとも新しい日付（今回は6年前の今日にしています）
    );

    if (date != null) {
      //誕生日を取得した後の処理をここに書く
    }
  },
),
```

ざっとこんな感じ。（なお、今回は日本語化に関しての詳細は省かせていただきます。）

```dart:main.dart
      initialDatePickerMode: DatePickerMode.year, //最初に年から入力させる
```
これで「年」から入力させるようにできます。
誕生日なんかはいきなり月日からではなく、まずは年から選択させたいことが多いので、これは多用するかも。

```dart:main.dart
      initialDate: DateTime(DateTime.now().year - 10), //最初に選択させる日付（今回は10年前）
```
これは日付選択のポップアップが表示されたとき、一番最初に選ばれている日付を設定します。

```dart:main.dart
      firstDate: DateTime(DateTime.now().year - 100, DateTime.now().month, DateTime.now().day), //選択可能な、もっとも古い日付（今回は100年前の今日にしています）
      lastDate: DateTime(DateTime.now().year - 6, DateTime.now().month, DateTime.now().day), ////選択可能な、もっとも新しい日付（今回は6年前の今日にしています）
```
ここでは「日付選択の範囲」を設定しています。
さすがに0歳児に扱わせるわけにもいかず、かえって200、300歳の超絶高齢者がいるわけでもないので、とりあえず今回は「6歳～100歳」に範囲制限しています。

ちなみにDateTime型の形式は以下の通り。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1109597/fbfca428-548c-36d0-5977-2f085ef77367.png)

もし「10年3か月4日前」と表現させたい場合は、上記に沿って考えると

```dart
DateTime(DateTime.now().year - 10, DateTime.now().month - 3, DateTime.now().day - 4)
```

と表現できますし、「10年4日前」と表現させたい場合は

```dart
DateTime(DateTime.now().year - 10, DateTime.now().month, DateTime.now().day - 4)
```

と表現できます。

```dart:main.dart
    if (date != null) {
      //誕生日を取得した後の処理をここに書く
    }
```

最後に、showDatePickerメソッド外のこの記述ですが、日付無選択ならnullが返ってくるので「日付を選択されたとき」のみ処理を実行させるようにしています。

上のコードをコピペすれば、とりあえずshowDatePickerを表示するRaisedButtonウィジェットを実装できると思います。
【ExcelVBA】マウスポインタの移動

マウスポインタの移動のみ。
クリックはしていない。

```vb

Option Explicit

Declare Function SetCursorPos Lib "user32" (ByVal x As Long, ByVal y As Long) As Long

Sub MovePointer()

Dim i As Long, j As Long
Dim x As Double, y As Double
Dim rng As Range

Application.Cursor = xlNorthwestArrow

For i = 3 To 10 Step 2
    For j = 1 To 40 Step 2
        Set rng = Cells(j, i)
        x = ActiveWindow.PointsToScreenPixelsX(rng.Left * 96 / 72) + rng.Width / 2
        y = ActiveWindow.PointsToScreenPixelsY(rng.Top * 96 / 72) + rng.Height / 2
        
        Debug.Print rng.Address(0, 0) & "：x=" & x & ",y=" & y
        
        SetCursorPos x, y
        Application.Wait Now() + TimeValue("00:00:01")
        Set rng = Nothing
    Next j
Next i

Application.Cursor = xlDefault

End Sub
Dashで作成したアプリをHerokuにデプロイ

# はじめに

[Dashで世界遺産を世界地図にプロット](https://qiita.com/honda28/items/d9be242bece0caa8eedb)でアプリを作成してみたので、Heroku を使ってデプロイしてみる。準備は[Getting Started on Heroku with Python](https://devcenter.heroku.com/articles/getting-started-with-python#set-up)を、Dash アプリのデプロイは[Deploying Dash Apps](https://dash.plotly.com/deployment)を参考に進める。実行環境は以下の通り。
- Windows10 Pro
- Python 3.7.6
- Anaconda 4.9.2

コマンドライン上で行うものはすべて Anaconda Prompt で実行している。

# 準備

Heroku にデプロイするにあたり、以下が必要となる。
- Git
- Heroku Command Line Interface (CLI)

Git はすでにインストールしてあるため、Heroku CLI をインストール。[Getting Started on Heroku with Python](https://devcenter.heroku.com/articles/getting-started-with-python#set-up)にインストーラがあるので、該当するものをダウンロードし、インストールする。インストールはデフォルトのまま行った。

Anaconda Prompt 上で `$ heroku login` コマンドを実行すると、ウェブブラウザが立ち上がるのでログイン（アカウントがない場合は作成）する。ログインが完了したらこのブラウザは消しても問題ない。

# Dash アプリのデプロイ

[Deploying Dash Apps](https://dash.plotly.com/deployment)に従って進める。なお、仮想環境は venv ではなく Anaconda を用いている。

## 1. プロジェクトディレクトリの作成
```
$ mkdir world-heritage-cite
$ cd world-heritage-cite
```

## 2. Git によるディレクトリの初期化
test はもともと使用していた仮想環境。デプロイには gunicorn が必要となるため、インストールする。

```
$ git init
$ conda activate test
$ pip install gunicorn
```

## 3. app.py, .gitignore, requirements.txt, and Procfile の作成

### app.py
app.py は[Dashで世界遺産を世界地図にプロット](https://qiita.com/honda28/items/d9be242bece0caa8eedb)で作成したものを data とともにそのまま置く。名前は必ず app.py である必要があるようなので、名前を変更しておく。また `import os` と `server = app.server` の二文をプログラムに追記しておく。

### .gitignore
参考記事とは違いがあるので、いくつか削除して作成。正直理解していないので、詳しい方いたらコメントください。

```
# venv       # venv は使用していない
*.pyc
# .DS_Store  # Mac OS 特有のもの（？）
.env         # 正直よくわかっていないので残しとく
```

### Procfile
以下内容で作成。

```
web: gunicorn app:server
```

### requirements.txt
`$ pip freeze > requirements.txt`で自動で生成されるとのことだったが、以降で行う 4 のプッシュ時にエラーを吐いたので、自分で書く。（Anaconda を使っているので、pip freeze がうまく機能しないのかも。）

```
dash
dash-core-components
dash-html-components
gunicorn
numpy
pandas
plotly
```

## 4. Heroku の初期化、Git へのプッシュ、デプロイ
以下コマンドを実行。（余談ですが Windows は ' ' だとエラーを吐くようなので、" " を使う必要があるらしい。）

```
$ heroku create whc-app
$ git add .
$ git commit -m "Initial commit"
$ git push heroku master
$ heroku ps:scale web=1
```

[https://whc-app.herokuapp.com](https://whc-app.herokuapp.com)に接続するもエラー。![AppError.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/769545/f0f398b4-4776-ac03-2130-c3a58b2d874c.png)

`heroku logs --tail` でエラーログを見てみると、app.py での単純なプログラムのミス（データの読み込みをローカルにおける絶対パスにしていた）ためだった。修正後はうまく動いた。次は Heroku でのデプロイができたので、AWS におけるデプロイなども試したい。
Scss~変数~

それでは次に変数についてです！！
ここで『変数』とはなんぞやって方！！　一緒に振り返っていきましょう👍

#①変数とは？？
変数は名前を代入して使います。
例えば、fruits = りんご　みたいな感じです。
イメージとしては、左側のフルーツが箱でその中に品物を入れていく感じですね👍
ただ、変数はその名の通り値が変わリます！！
ですから、優柔不断にあーでもないこうでもないってやってても怒られません笑
反対に代入したものを変えてはいけなものを定数と言います！これはもう絶対に変えられないので、fruitsの中にりんごを入れたらそのままお会計に行きます😂

では！！変数を理解できたとこで（できましたよね？）

#Scssで使っていきましょう！！

```main.scss
section {
  background-color: royalblue;
  .case1 {
    font-size: 40px;
    .case2 {
      font-size: 15px;
    }
  }
}
```
これが前回までの記述内容になっていますが、これを少し変えていきます！！
今、フォントサイズを指定してますが、これをベースは20pxで使ってね、でももし嫌だったら変えてねって意味で
変数を指定します！！
更に今回はわかりやすいように背景カラーも代入していきたいと思います！！

```main.scss
$basefontsize:20px;
$background-color:orange;
section {
  background-color: royalblue;
  .case1 {
    font-size: $basefontsize;
    background-color: $background-color;
    .case2 {
      font-size: $basefontsize;
    }
  }
}
```
代入のときには"$"これを使います👍 代入はじめますよー！の合図です👌
あとは、コピーしてペタペタしていく感じですね😊
ブラウザで表示するとこうなります！
![スクリーンショット 2021-03-05 15.50.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1033397/2e519687-1e81-086a-9235-94d3241c2e49.png)

ちなみにエラーが起きるとこうなります🥲

![スクリーンショット 2021-03-05 15.42.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1033397/b763ae8c-2f6e-caac-7736-48c23fddb85d.png)

でも優しいから、９行目のscss間違えてませんか？って教えてくれます😊
【Android】Fatal Exception: java.lang.IllegalStateException: Can not perform this action after onSaveInstanceState をコルーチンで回避する【Tips】

## 結論
```kotlin
lifecycleScope.launchWhenResumed {
    HogeDialogFragment.show(supportFragmentManager, null)
    とか
    supportFragmentManager.commit {
        replace(R.id.container, HogeFragment())
    }
}
```

## 解説

`Can not perform this action after onSaveInstanceState`はその名の通り、Activityの[onSaveInstanceState](https://developer.android.com/reference/android/app/Activity?hl=ja#onSaveInstanceState(android.os.Bundle))メソッドが実行された後に、Fragmentの操作などを行うと発生するクラッシュです。
Rxなどの非同期処理を実行後にダイアログを表示する、などの実装をすると発生します。

では、[onSaveInstanceState](https://developer.android.com/reference/android/app/Activity?hl=ja#onSaveInstanceState(android.os.Bundle))はいつ実行されるのかというと

>*If called, this method will occur after onStop() for applications targeting platforms starting with Build.VERSION_CODES.P. For applications targeting earlier platform versions this method will occur before onStop() and there are no guarantees about whether it will occur before or after onPause().*

のように、なんとP以前ではいつ呼ばれるかも明確に決まっていません。


ですが、少なくともライフサイクルがonPauseに入る前、つまりonResumeの時のみ動くようにすれば回避できそうですよね？
そこで、[launchWhenResumed](https://developer.android.com/reference/kotlin/androidx/lifecycle/LifecycleCoroutineScope#launchWhenResumed(kotlin.coroutines.SuspendFunction1))を使います。これは、ライフサイクルがonResumeの時のみブロック処理を実行する関数になります。

>*Launches and runs the given block when the Lifecycle controlling this LifecycleCoroutineScope is at least in Lifecycle.State.RESUMED state.*

これを使うことで、P以前、以後関係なく安心して処理を実行することができるようになります。特にFragmentの操作などは、拡張関数などを定義しておくとスッキリ書けるのでオススメです。

## おわりに
こんな便利なものを用意してくれて、コルーチンありがとう。コルーチンをすこれ。
Synology の NAS に rsync でデータをバックアップ

次のページを参考にしました。
[ローカルと NAS 間の rsync をパスワードなしで実行](https://katurakuno.xsrv.jp/Linux/LinuxMint/rsync/withoutpass.html)

ローカルから、Synology にデータを同期アップロードします。

>ローカルのフォルダー
/home/scott/folder_aa

>Synology のフォルダー
/var/services/homes/scott/backup/folder_aa

Synology の設定

コントロールパネル -> ファイルサービス -> rsync
![rsync_mar05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/a8b3ad1a-490f-48f5-a460-bb089234cf80.png)


```text:/etc/rsyncd.conf
#motd file = /etc/rsyncd.motd
#log file = /var/log/rsyncd.log
pid file = /var/run/rsyncd.pid
lock file = /var/run/rsync.lock
use chroot = no
[USERDATA]
path=/var/services/homes/scott/backup
read only=false
uid=1029
gid=100
hosts allow=219.116.115.21
hosts deny=*
```

uid と gid は次のようにして調べます。

```text
$ more /etc/passwd | grep scott
scott:x:1029:100::/var/services/homes/scott:/bin/sh
```

スクリプト

```bash
rsync -av /home/scott/folder_aa scott@example.synology.me::USERDATA
```
Laravel セットアップ中つまづいたことメモ



## エラー1. No application encryption key has been specified.

これはencryption keyを設定しないと出るエラーです。
が、 `php artisan key:generate`でキーを生成しても出続けるエラーに困惑しました


### 解決方法
configのキャッシュが効いているのが原因でした。

```
$ php artisan config:clear
```
でキャッシュをクリアすると無事このエラーが解消されました。
参照:[エラー"No application encryption key has been specified."が出るとき
](https://akamist.com/blog/archives/2178)

## エラー2. The only supported ciphers are AES-128-CBC and AES-256-CBC with the correct key lengths.
エラー文を読む限り、サポートされている記号でないですよ!と怒られているよう。

色々調べてみると、どうやらbootstrapフォルダのパーミッションの問題らしい。
ls -l で調べてみると `drwxr-xr-x`となっていたので、

```
$ chmod 775 bootstrap
```

でパーミッションを変更。

そしてkeyをgenerateしてキャッシュをクリアすれば無事表示されました。

```
$ php artisan key:generate
$ php artisan config:clear
```
![スクリーンショット 2021-03-05 15.26.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/441432/88f5aafb-e2c1-6c1c-72d5-600d78134761.png)
【Swift】NavigationBarのtitleを『文字列 + 画像』にする

# どういうことか

こういうことがやりたい

![Simulator Screen Shot - iPhone 11 - 2021-03-05 at 15.02.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/413699/2e18d609-b77d-ccb2-ba31-2798da121708.png)

文字を書くだけであればControllerに

`title = "タイトル部分です"`

と書くだけでいい。

## 実装する

extensionを使う。
Controllerの一番下にでも書こう。

ここでは文字を **太字** にする設定も書いている。
細かい設定はともかくコピペで書いてもイケる。

```swift:ViewController.swift
// 文字列とアイコン画像を並べたタイトルを作る
extension HomeViewController {
    func setTitle(_ title: String, andImage image: UIImage) {
        let titleLabel = UILabel()
        titleLabel.text = title
        titleLabel.font = UIFont.boldSystemFont(ofSize: 14)
        let imageView = UIImageView(image: image)
        let titleView = UIStackView(arrangedSubviews: [imageView, titleLabel])
        titleView.axis = .horizontal
        titleView.spacing = 10.0
        navigationItem.titleView = titleView
    }
}
```

そしたら `viewDidLoad()` 内でこのメソッドに必要な値を渡す。

```swift:ViewController.swift
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // タイトルの文字列と画像の名前を渡す
        setTitle("タイトル部分です", andImage: UIImage(named: "user_icon")!)
    
        // 中略
```

以上です(´・ω・｀)
scss~入れ子構造~

scssを使うメリットはいくつかありますが代表的なものに入れ子がありますね。
それではみていきましょう！！

```index.html
<link rel="stylesheet" href="sample.css">
<section>
  <div class="case1">あいうえお</div>
  <div class="case2">かきくけこ</div>
</section>
```
cssの読み込みを忘れないように！！

さて！それでは、scssを書いていきましょう！！

```main.scss
section {
  background-color: pink;
  .case1 {
    background-color: rebeccapurple;
    .case2 {
      background-color: royalblue;
    }
  }
}
```
いつもだとこれでブラウザ表示するのですが、これではまだ反映されません🥲

ここでターミナルを開きます👌

``` 
% sass scss/main.scss:css/main.css
% less css/main.css
```
この流れでしたね！！それぞれはどのような意味があるのかは
▶https://qiita.com/akari_0618/items/14f53a8b3586785f15b3
こちらの記事を参照してください👍

![スクリーンショット 2021-03-05 15.11.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1033397/e48abd9f-13b0-d875-244b-cd90f69b4b51.png)

ブラウザで開いてこうなれば大丈夫です！！
完璧ですね😊
PipenvでFlaskアプリをHerokuにデプロイする手順

# はじめに
Flaskで作ったWebアプリをPipenvでHerokuに公開する手順を書いた。
`requirements.txt`を使わずにPipenvを使っている手順でまとまっているものが無さそうだったので。

# 前提条件
- pythonがインストールされていること
- pipがインストールされていること
- pipenvがインストールされていること（`pip install pipenv`）
- GitのCLIが使えること（Macなら最初から入っている）
- GitHubのアカウントがあること
- Herokuのアカウントがあること（Heroku CLIは不要）

# 手順
## 作業ディレクトリ作成
```:ターミナル
mkdir myapp
cd myapp
```

## 依存関係を追加
Pipenvで必要なライブラリの依存関係を定義する。
Pythonは3系を使う。
今回はFlaskアプリを作るので、`flask`と`gunicorn`の２つを入れる。

```:ターミナル
pipenv --python 3
pipenv install flask
pipenv install gunicorn
```

この時点で`Pipfile`と`Pipfile.lock`の2ファイルができているはず。

## Flaskアプリ作成
アプリケーションの本体を書き、`app.py`という名前で保存する。
ここでは簡単のため、以下の内容にする。

```app.py
# -*- coding: utf-8 -*-
from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return 'Hello, World'

if __name__ == '__main__':
    app.run()
```

## ローカルで動くことを確認
ローカルで動作確認をするには以下のようにする。

```ターミナル
pipenv run python app.py
```
（普通に`python app.py`とするとグローバルに定義されたPythonを使ってしまうので注意）
以下のように表示されればOK。

```
 * Serving Flask app "app" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)        
```

ブラウザでhttp://localhost:5000 にアクセスして、期待通りの内容になっているか確認。
上の例だと、「Hello, World」という文字列が表示されていればOK。

## `Procfile`を作成
公開したときに実行する処理の内容を記載した`Procfile`を作成する。
（必ずプロジェクトのルートに置く）

```:Procfile
web: gunicorn app:app
```

## Gitに登録
公開する準備として、ここまでの内容をGitに登録する。

```:ターミナル
git init
git add .
git commit -m "first commit"
```

## GitHubに登録
ブラウザからGitHubにログイン。
新しいリポジトリを作る。（privateでもOK）
指示にしたがってプッシュする

```:ターミナル
git remote add origin git@github.com:以下略
git branch -M main
git push -u origin main
```

## Herokuと連携して公開
ブラウザからHerokuにログイン。
Create new app。

- App nameに適当なアプリ名を入力。（これが公開するときのURLに含まれることになる。早いもの勝ちなので`myapp`とかはすでに取られている）
- Deployment methodにGitHubを指定。
- Connect to GitHubで先ほど作ったGitHubリポジトリを指定。（初めてやるときは認証が入るはず。指示に従っていればOK）
- Automatic DeploysでEnable Automatic Deploysを押す（これでGitHubリポジトリの特定のブランチ（例えば`main`）にプッシュされたことを検知して、自動でデプロイを行うようになる）
- 最初のデプロイをしたいので、Manual DeployでDeploy Branchを押す。

ブラウザでhttp://<アプリ名>.herokuapp.comにアクセスして、想定通りの内容になっているか確認。
これで公開ができた。
データサイエンスのシンポジウムに参加しました


先日、データサイエンスのシンポジウムに参加しました。（リモート参加）

#（１）人材について
冒頭で、データサイエンティストの人材育成の話がありました。

>・データサイエンティストを増やすことも重要なのですが、データサイエンティストを育てるための人材も必要

とのことでした。

私個人の意見としては、データサイエンティストをそんなに増やさなくても良いのではないかなと考えています。

今現在のデータサイエンティストは、自ら学んでデータサイエンティストになった方だと思います。（アーリーアダプタなので精鋭揃い）

今後、受け身的な勉強による、データサイエンティストが増えてくるとなると、知識はあるのだけれど、指示待ちの人材ばかり増えてしまってマジョリティー化してしまうのではないかと危惧しています。

IT人材も同様で、初めは、プログラムに向いている人がプログラムを作ります。
IT人材の増加が求められている現状で、受け身的な勉強で、プログラマになった人は、良いプログラムは作れなさそうな気がします。センスがある・センスがない　という問題もありますし。

#（２）分析結果を伝える人材
ひと昔前は、データが無いので、オープンデータの必要性が叫ばれていた様子ですが、最近はデータのオープン化も進んできた様子です。新型コロナの情報も容易に入手できるようです。

データは存在し、データサイエンティストも存在し、データの分析も出来るようになりましたが、分析結果を**「どう伝えるか」**という大きな問題があるような気がします。
例えるなら、最高の材料を仕入れている有名フランス料理店で、料理人は居るのに、完成した料理を運ぶ肝心のウエイターがいない状態と言える。

単に、数字やグラフを表示して説明することはできますが、国民に対して「こうしてください」「ああしてください」という内容を信念を持って伝える人材がいない様な気がしています。
IMAPでメールを取得するときのフラグの話


(Pythonタグついてるけど、Pythonに関係ないIMAPに関することなんですけどね。試したのがPythonだったので）

#IMAPのフラグについて

メッセージフラグ
IMAP4 では、各メッセージに対して、６個の標準フラグがあります。

`\recent`
最近届いたメッセージ（新着メール）

`\seen`
読まれたメッセージ（既読メール *1）

`\deleted`
削除フラグが設定されたメッセージ

`\draft`
下書きフラグが設定されたメッセージ

`\flaged`
特別なメッセージを示すフラグ

# IMAPにAppend[^1]で付加できないフラグ

答えは `\recent`

理由はRFC3501参照ですが 抜粋すると


[^1]: 今回の記事で出てくる関数的なものは Pythonでお話しますが、ほかの言語でも同じだと思います。


```
       \Recent
           Message is "recently" arrived in this mailbox.  This session
           is the first session to have been notified about this
           message; if the session is read-write, subsequent sessions
           will not see \Recent set for this message.  This flag can not
           be altered by the client.
```

＿人人人人人人人人人人人人人人人人人人人人人＿
＞　**This flag can not be altered by the client.**　＜
￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y￣


＿人人人人人人人人人人人人人人人人人人人人人人人人人人人人＿
＞　このフラグはクライアントが変更することはできません。　＜
￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y￣


AサーバからBサーバにメールをコピーする処理を作っていたときに発見。
既読のものは既読・未読の未読でコピーしたい！
と思ってフラグを全部コピーしてましたがエラーが出てしまいましたとさ。
機械学習アルゴリズムと機械学習モデルの違いとは？

**・この記事を書いた背景**
機械学習アルゴリズムとか機械学習モデルとかの違いがよく分かってなかったのでまとめてみました。

**・参考文献**
参考にしたのは[参考１（英語）](https://machinelearningmastery.com/difference-between-algorithm-and-model-in-machine-learning/ "参考１（英語）")と[参考２（日本語）](https://trainz.jp/media/learningtoai/tecnical-term/1700/ "参考２（日本語）")になります。

#機械学習アルゴリズムと機械学習モデルの違いとは？
機械学習アルゴリズムと機械学習モデルの説明は以下の通りです。

<br>
**機械学習アルゴリズム**
機械学習アルゴリズムはデータの中から規則性やパターンを発見し予測を行うプロセスです。つまり、データの学習・予測を行うのが機械学習アルゴリズムです。具体的には、決定木やロジスティック回帰・サポートベクターマシン・k平均法などのことです。これらは、全く異なる方法で学習・予測を行います。

<br>
**機械学習モデル**
機械学習モデルは機械学習アルゴリズムにデータを処理させて出てくる結果のことをいい、機械学習アルゴリズムがデータから何を学習したのかを示します。具体的にはで以下のような図が決定木の機械学習モデルとなります。

><img width=100% src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501636/82d8b180-dae7-523b-1170-5754b6349923.png">
＜KaggleのCoursesの「Intro to Machine Learning」Lesoon1の図＞



決定木に具体的な条件や最終的な予測結果まで書かれており、この機械学習モデルに新しいデータを入力すると、分岐しながら最終的に予測結果を導くことができます。

<br>
**結局、機械学習アルゴリズムと機械学習モデルはどう違うのか？**
機械学習アルゴリズムは、学習と予測をどのように行うかを表す手順のことです。一方で、機械学習モデルは機械学習アルゴリズム・データ・パラメータを決めた上で、出てくる結果になります。なので、同じ機械学習アルゴリズムでもデータやパラメータが異なれば、異なる機械学習モデルになります。
例えば、同じ決定木を使うにしてもその深さなどのパラメータを変えたり、入力するデータを変えれば異なるモデルになるということです。

<br>
**最後までお読みいただきありがとうございました**
ということで機械学習アルゴリズムと機械学習モデルの違いの説明でした。２つの違いについて、この記事を読んでよく分かったという方はLGTMよろしくお願いします！
Githubでライブラリをインストールする方法

#　はじめに
機械学習のためのライブラリがGithubで公開されていることが多いのでダウンロードしてnotebookで使用可能にするための方法を調べました。

#　解決方法
今回は例としてDeNAが開発した機械学習ライブラリHandyRLをインストールしてみます
ターミナルで以下のコマンドを実行します

```
git clone git://github.com/DeNA/HandyRL

```
あとはnotebookを開き、

```
import HandyRL
```
としてやれば終了です。

余談ですがターミナルでファイルを移動させるときには

```
mv　(移動させたいファイル) (移動先)
```
のコマンドを実行します
40 代おっさん　 EC2 に EBS をアタッチしてみた


## 本記事について

本記事は AWS 初学者の私が学習していく中でわからない単語や概要をなるべくわかりやすい様にまとめたものです。
もし誤りなどありましたらコメントにてお知らせいただけるとありがたいです。

## AWS 最終作成図

![ec2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641940/d0281a98-3072-5e9c-94fb-ee2555e1f24a.png)

## 作成図構築手順

❶ EC2 インスタンス作成と同時に Apache インストール
こちらの記事は ↓
<https://qiita.com/drafts/738c8f1905428e20e426/edit>
❷ EBS を作成してアタッチする
❸ アタッチしたあとマウントして使える状態にする

## 2. EBS を作成してアタッチする

サービスから EC2 を選んでください
そして左ペインからボリュームを選択

![ボリューム.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641940/bd29294c-63b8-96b9-dd44-661f1fe4f8b2.png)

ボリュームの作成をクリック

![ボリュームの作成.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641940/d356a4ce-db5d-7fd1-26e2-4fe68babef22.png)

（赤枠）ボリュームタイプは色々ありますが今回はスループット最適化 HDD で
（青枠）今回は５００で
（黒枠）ここで注意してほしいのはインスタンスと同じところにあるアベイラビリティーゾーンでないといけないと言うことを覚えておいてください
終わりましたら右下のほうにあるボリュームの作成をクリック

![ボリューム確認.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641940/b5721850-39fa-f357-d502-61c38f203165.png)

確認すると EBS ができています.
今は available（赤枠）でありどこにもアタッチされていません
ではアタッチします

![ボリュームのアタッチ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641940/c3d49862-47aa-037b-7de8-dfaddc0aa4c5.png)

写真上のアクションをクリックするとボリュームのアタッチ（赤枠）があるのでそれをクリック

そうすると ↓ のようになります
![ボリュームアタッチ２.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641940/be4a9b40-0305-11c3-64b1-e23d06d3bbf8.png)

（赤枠）作ったインスタンスを選択
（青枠）デフォルトで入っていますが名前を覚えるかコピーしておいてください
（黒枠）すべて終わったらアタッチをクリック

![アタッチ確認.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641940/bc4b0275-457f-c0b4-e054-05fe7c46774e.png)

EC2 のストレージを確認してみると/dev/sdf がアタッチされています（赤枠）

## 最後に

実はアタッチしただけだと使えないとのこと
つらいっすね～～
でも勉強のため頑張ります

またこの記事は AWS 初学者を導く体系的な動画学習サービス「AWS CloudTech」の課題カリキュラムで作成しました。
<https://aws-cloud-tech.com/>
AWS EKSとは？

## 勉強前イメージ

Kubernetesのための何かって感じ。。。

## 調査

### AWS EKSとは？

kubernetesのマネージドサービスで、AWS上で簡単に実行できるようなりました。

### そもそもKubernetesとは？

コンテナの運用管理・自動化を目的に作られた、オープンソースのシステムで
`K` と `s` の間にある `ubernete` の8文字であるため、`K8s` と表記されることもあります。

- Kubernetesは何をするのか？

コンテナの運用管理・自動化をします。
よって、Kubernetesの管理対象はコンテナになります。
以下図のように、Kubernetesを管理します

![k8sUntitled Diagram.drawio - diagrams.net - Google Ch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/f048e538-5b85-fd6c-8c01-b7efdd6df888.png)


また、自動化や複数のコンテナ管理を `コンテナオーケストレーション` と呼ばれます

- Dockerと何が違うの？

Dockerは1台のサーバ上でコンテナを作成し、その管理をしています。
しかし、複数台のサーバで稼働するコンテナを横断的に管理することが出来ないので、
複数台のサーバにまたがったコンテナを増やさないといけない場合に対処出来ません。
それを解決するのがKubernetesで、複数台のサーバのコンテナ管理を1台の実行環境のように扱うことが出来ます。

- Docker : 1台のサーバ上でしかコンテナを管理できない
- Kubernetes : 複数台のサーバにまたがったコンテナ管理ができる

### AWS EKSの特徴

そんなKubernetesを簡単に実行できるのがEKSですが、特徴としては以下です。

- 高可用性

複数のAZにまたがって管理されているので、1つのAZに障害が発生してもサービスを維持することが出来ます。

- セキュリティの強化

AWS Fargateを使用してサーバの管理をせずともコンテナを稼働させることができ、
アプリケーションごとにリソースの指定ができるので設計時にアプリケーションを分離させることが出来ます。

- オンプレのコンテナ管理も可能

AWS Outpostsというサービスを使用することでオンプレで稼働しているコンテナもEKSで管理を行うことが出来ます。

- 他のAWSサービスとの統合が簡単

ALBなど他のAWSサービスと統合をすることで負荷分散を行うことが出来ます。

## 勉強後イメージ

正直DockerとKubernetes、似たようなもんやろって思ってたところからちょっとわかった気がする。
そんな便利なやつがAWSのフルマネージドサービスで使えて、しかもほかサービスと統合するとオンプレのコンテナ管理もできる！

## 参考

- [【図解】コレ1枚でわかるKubernetes](https://blogs.itmedia.co.jp/itsolutionjuku/2019/07/1kubernetes.html)
- [AWSのAmazon EKSとは？特徴6つと開始する手順を解説](https://www.fenet.jp/aws/column/tool/368/)
久々の投稿。ITパスポート取得後

久々に投稿です。

以前ITパスポートを取った後Lpic level1を取る為に動いていましたが、ネットワークの勉強を優先し今はCCNAを先に取ろうとしています。

これからQiitaをできるだけ更新していこうと思っています。理由は2つ。

1つ目は、ネット上に沢山ある勉強用サイトで勉学を進めていると、難しくて理解出来なかったりすることがあると思います。そこで別で検索して調べ直すと、皆さまのQiitaでの記事が出てきて理解が進んだことが幾度となくあったからです。

2つ目は、その日学んだことを文字にすることにより自分の中の理解度が深まると思ったのと、学習の過程を何かしらの形で残したいと思ったからです。

同時に、自分の記事が将来的に今の自分と同じような方に役に立つようなものが偶然にでも生まれれば良いなと思っています。