OmniAICreator/Qiita-1.07M huggingface dataset:
pugでhtmlをコンパイル

# Pugでhtmlをコンパイル

sassのようにhtmlでもコンパイルできないものかと探していたらpugがいい感じだったのでメモ
似たようなものでhamlがあるが、pugしました。
理由は下記

- コンパイルがnode
- 記法がsassに似ている

[公式サイト](https://pugjs.org/api/getting-started.html)
[pug github](https://github.com/pugjs)

## インストール

まずはNodeをインストール[Node](https://nodejs.org/en/)

```bash
node -v
v10.15.0
npm install pug -g
#今回は-gでマシン全体にしました。
#開発のみなら-Dでpackage.jsonにしてもいいかも
```

## コンパイル

```pug:test.pug
doctype html
// コメント
html(lang="ja")
  head
    meta(charset="utf-8")
    style(src="css/style.css")
    title テスト
  body
    h1#sitettl Pugタイトル
    main.main
      h2.content_ttl サブタイトル
```

```bash
pug test.pug
```

```html:pug.html
<!DOCTYPE html>
<!-- コメント-->
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <style src="css/style.css"></style>
    <title>テスト</title>
  </head>
  <body>
    <h1 id="sitettl">Pugタイトル</h1>
    <main class="main">
      <h2 class="content_ttl">サブタイトル</h2>
    </main>
  </body>
</html>
```

## gulpでコンパイル

sassと同じくpugもgulpでコンパイルを自動でタスク処理をしました

### 必要なパッケージをインストール

```bash
# gulpをインストールgulpのバージョンはGulp 4

npm install gulp -D
npx gulp -v
# CLI version 2.0.1
# Local version 4.0.0

# pug 用のgulp パッケージをインストール
npm i -D gulp-pug gulp-notify gulp-plumber
```

### gulpファイルを作成

ディレクトリの構造はこんな感じ

```bash

develop/
├──assets/
   ├──pug/ #ここにpugファイルを作成
public/ # ここにhtmlファイルを作成

```

```js:gulpfile.js
// パッケージをインストール
const gulp = require("gulp");
const notify = require("gulp-notify");
const plumber = require("gulp-plumber");
const pug = require("gulp-pug");

//pug入力先、html出力先を記述
const paths = {
  src: {
    pug: "develop/assets/pug/**/*.pug",
  },
  public: {
    html: "public/",
  },
};

// setting : Pug Options
const pugOptions = {
  pretty: true,
};

// pugコンパイル
gulp.task("pug", done => {
  gulp
    .src(paths.src.pug)
    .pipe(
      plumber({ errorHandler: notify.onError("Error: <%= error.message %>") })
    )
    .pipe(pug(pugOptions))
    .pipe(gulp.dest(paths.public.html));
  done();
});

gulp.task("dev", () => {
  gulp.watch(paths.src.pug, gulp.task("pug"));
});
```

### gulpを動かす

```json:package.json
"scripts": {
  "dev": "gulp dev"
}
```

```bash
npm run dev

# Using gulpfile ~\gulpfile.js
# Starting 'dev'...
# Starting 'pug'...
# Finished 'pug' after 22 ms
# こんな感じになればdevelop/assets/pugのファイルがpublicにhtmlが作成される

```
mac の terminal.app で Odyssey に Personality を流し込む

Odyssey MAX 10 FPGA Eval Kit に Personality を流し込むには、[MacnicaのWebページ](https://service.macnica.co.jp/library/115109)によれば「Windows上のTERA Termから、“ファイル・メニュー ＞ ファイル送信” を選択します。“バイナリ”オプションを有効にして、作業2で作成した jbc ファイルを選び、“開く” ボタンを押します。」とあります。

これをMacのterminal.app でやってみます。

# シリアル接続して、terminalから操作してみる

Odyssey MAX 10 FPGA Eval Kit の Tier 2 にある MicroUSB コネクタを MacにUSB接続すると、/dev/tty.usbmodemFA131 が現れるので、screen で接続します：

USB Blaster とかではなく、USB-MicroUSBケーブルで接続するだけでOKです。

```shell-session:
$ screen /dev/tty.usbmodemFA131
```

Odyssey MAX 10 FPGA Eval Kit の　S3 ボタンを押して、LEDが点灯した状態にしておき、Enterを押し下げると、シリアルコンソールにメニューが現れます：

注： 改行コードが期待と異なるので、こんな縦に揃った綺麗な表示になってくれません。表示を綺麗にする方法は調査中。

```
pression Menu
--------------
Please select from the following options:

0: Display list of personality names in Flash
1: Download a personality file to flash
2: Erase a specific personality file slot
3: Re-image the entire flash
4: Erase the entire flash
5: Download a MAX 10 .jbc file to a specific personality
6: Program MAX 10 using .jbc file from a specific personality
7: Test SRAM
8: Get temperature reading
9: Read flash ID
10: Get heart rate
11: Test proximity sensor

NOTE: To program the BLE module, please close Tera Term and
press the pushbutton near the battery slot or pushbutton
S3 if using the MAX 10 board - when LED turns off

>
```

# ボード上に登録されている Personality のリストをみる

メニューに従い、0 を入力すると、リストが返ってきます。

```
>0

Personality 1: ADC and Audio Monitor
Personality 2: Max10 Remote Control
Personality 3: Frequency Detect
Personality 4: PWM LEDs
Personality 5: Dual Config FPGA LOAD
Personality 6: Dual Config PWM LEDs
Personality 7: 
Personality 8: 
Personality 9: 
Personality 10: 
Personality 11: Temp Humidity
Personality 12: Heart Rate Monitor
Personality 13: Motion Detect
Personality 14: Proximity Detection
Personality 15: 

--Press Enter to continue
```

07、08、09、10　が空いています。

# Personality を書き込んでみる：

08に書き込んでみます：

```
>1

Enter two digit Personality number (01 through 15)
08
File will be downloaded to flash offset 150000

Select File->Send File - in Tera Term and make sure 
Binary option box is checked before pressing OK.
Hit Enter after file transfer is done
```

ここでバイナリを流し込みます。screenの Ctrl-A のあとに : を入力して cat で流し込みます：
[Odyssey Web Utility](https://odyssey.m-pression.com/) から "Custom Command Test" を download したものを流し込んでみました：

```
Ctrl-A :exec !! cat GATT_2065.bin
```

このあと、Enter を入力するとメニューがでます……　と思いますが出てきません。
シリアル接続がおかしくなっているだけのようです。この状態でもちゃんと08にPersonalityを書き込めています。

[Androidアプリ](https://play.google.com/store/apps/details?id=com.odyssey.mpression) から見てみると、「Custom Command Test」がリストに登場しました。
<img src="https://qiita-image-store.s3.amazonaws.com/0/61810/661dd380-b5d4-e1ed-5ae5-c36b2b775584.png" width="240">

<!--
![Screenshot_20190224-014351.png](https://qiita-image-store.s3.amazonaws.com/0/61810/661dd380-b5d4-e1ed-5ae5-c36b2b775584.png)
-->
discord.py rewriteのCogに変更があったようなので

discord.pyのrewriteバージョンに更新がありました。

前提: discord.pyのrewriteバージョンとasyncバージョンの区別ができる。
discord.pyのrewriteバージョンを使っている。

**※Botを作り始める人向けではありません。**

# Cogを知らない人へ
## Cogっておいしいの?
Cogは、クラスの一種で、使い方はたくさんありますが、よくあるのが「コマンド類を別ファイルで定義」というものです。

たとえば、「hogehogebot」にはゲーム、音楽再生、天気予報の機能があったとします。
通常は、

```python:hogehogebot.py
import discord as d
from discord.ext import commands as c

bot = c.Bot(command_prefix="!")

@bot.command()
async def game_numguess(ctx):
    """数あて"""
    ....

@bot.command()
async def music_youtube(ctx, *, name):
    """YouTube音源再生"""
    ....

bot.run("tokenをおく")
```

などと書きますが、これでは`hogehogebot.py`が長くなり、ごちゃごちゃします。
そこで、ファイルを分けるために、Cogを使います。

```python:hogehogebot.py
import discord as d
from discord.ext import commands as c
from cog_music import Music
from cog_games import Games

bot = c.Bot(command_prefix="!")

bot.add_cog(Games())
bot.add_cog(Music(bot=bot))

bot.run("tokenをおく")
```

## Cogされるファイルの中身は?
以前は以下のように、単純なクラスでした。

```python:cog_music.py
from discord.ext import commands as c

class Music:
    def __init__(self, bot):
        self.bot = bot
    @c.command()
    async def music_youtube(self, ctx, *, name):
        ...
```

# Cogの改定について
Cogが改定されたのは、2019年2月23日。以下のような変更点があります。

* Cogのクラスは、すべて`discord.ext.commands.Cog`から継承しないといけない
* そうしないと、Cogを読み込んでもらえない
* Cog用のエラーチェックなどの方法が変わった

# 上のコードを書き直して

```python:cog_music.py
from discord.ext import commands as c

class Music(c.Cog, name="Music"):
    def __init__(self, bot):
        self.bot = bot
    @c.command()
    async def music_youtube(self, ctx, *, name):
        ...
```

`c.Cog`が追加されていますね。
nameは既定でクラス名と同じなので、省いても大丈夫です。

# ほかにも
* Cog内でon_messageなどを使っている場合は、`@c.Cog.listener()`を付けましょう。
* Cogのコマンドをtupleで得るには、`Cog.get_commands()`が使えます。
* `Command.instance`は`Command.cog`になりました!
* Cog関連で`__`から始まる名前の関数は、すべて改名されています。

# 公式ドキュメント
* [Cogs](https://discordpy.readthedocs.io/en/rewrite/ext/commands/cogs.html)
* [Cogs - API Reference](https://discordpy.readthedocs.io/en/rewrite/ext/commands/api.html#cogs)
技術用語をエモく伝わるように言い換えるチートシート

## この記事の目的

商談や要求定義などで、どうしても技術用語や英語が出ちゃう時。
色々な言い方を試してきました。
個人的な経験上の言い換えを、色々な方のに見ていただき活用していただければと思います。
逆に、色々なご意見をいただき、ご教授いただくという下心があります。

## 言い換えた内容を伝える時に想定する相手

・業務については精通しているが、システムのことは門外漢。
・経営者。またはそれに準ずる部門（●●戦略）など。

## チートシートの整理方針


#### 当面

思いつくままに増やしていきます。

### ある程度、コメントやご指摘などいただいた後

単語帳のような形式でチートシートにまとめる（予定）。

## 言い換えチートシート

| 仕分 | 専門用語 | 言い換え |
|-----|----------|-------|
| ハードウェア | ラックマウントサーバ | とても壊れにくいパソコン。 |
| ソフトウェア | データベースサーバ | 黒板。対して個々人が使っているEXCELをノートと表現する。 |
| 機械学習 | 過学習 | バカになった。 |
| 人工知能 | ドメイン | 今回の課題とする範囲。 |
| 機械学習 | 不完全性定理 | 無限ループ怖い。 |
| ネットワーク | オンプレミス | 倉庫を買う。対してクラウドは倉庫を借りる。本棚と図書館で比喩することも |
| 機械学習 | 破壊的学習の困難性 | 機械学習は学習内容を「忘れる」「上書きする」がとても難しい。 |
| ネットワーク | ボトルネック | 渋滞が起きてる |
| ハードウェア | メインフレーム | トランザクションに特化したコンピュータ。もうじき技術者がいなくなって粗大ゴミになる。 |
| クラウド | マネージド環境 | レンタル倉庫。倉庫の掃除とかのオプションコミコミ。
| ネットワーク | ルートテーブル | 標識とか順路を書いた地図。これが壊れると渋滞とか迷子が増える。 |
| アルゴリズム | NP完全 | ゴキブリが1匹いたら2匹いる。5匹いたら250匹いる。10匹いたら100匹いる。コンピュータがねずみ算式に増える増やさないと 対処できないんですよ。 |
| ヒューリスティック | 機械学習 | 入れ知恵 |
| クエリプラン | データベース | 表計算の効率的なやり方。例えば、生徒名簿と出席番号と今までのテストの成績を纏めた表から数学が得意な子を探すにどうするのが一番早いか。 |
| ランダムサンプリングの強力さ | 機械学習 | コインを投げる賭けで、10回連続で当てたら、「絶対イカサマしてる」って思いますよね。 |
| ランダムサンプリングの難しさ | 機械学習 | 選挙の当確や、予想って、いろんな投票所、時間、性別、年齢等に出口調査して出来るだけランダムサンプリングできるようにしている。そのノウハウの違いで予想、当確の精度、とタイミングが変わる。このノウハウがお金になる程難しい。 |
| バギング | 機械学習 | ランダムサンプリングの強力さを使った学習の方法。簡単そうに見えてランダムサンプリングって難しい。逆にやりすぎるとイカサマを覚える（過学習）する。この調整難しいんです。お金かかるんです。 |
[C#]ジェネリックメソッドの動的呼び出しについて

# やりたいこと
データベースからのオブジェクト取り込み、あるいはその書き込みに使用するための処理をループ化するための前研究

# やったこと
- リフレクションを使用したメソッドの動的取得
- 取得したメソッドのジェネリックメソッド化
- ジェネリックメソッドの実行

## メソッドの動的取得
System.Reflection.MethodInfoを用いる。
クラスが持つメソッド名については私の知る範囲だとベタで用いなければならないというのが残念ではある。

```csharp:GetMethodInfo
System.Reflection.MethodInfo methodInfo = Type.GetMethod(string methodName, BindingFlags flags);
```

## メソッドのジェネリック化
単純にMethodInfo.GetGenericMethodメソッドに対して対応する型引数と対応する型情報の配列を引数として用いる

## メソッドの実行
何気に引っかかる。
MethodInfo.Invokeメソッドは第1・第2引数ともにObject型(およびその配列)であるため何を入れても大体コンパイルエラーを起こさないためである。
第1引数にはインスタンスオブジェクトを、第2引数には実行時の引数として使用したいものを順番に投入する。
Staticだったり引数なしメソッドなら必要に応じてnullにする。

# ソースコード
[長くなったので全文はGitHubを見てほしい](https://github.com/Argent0159/Study-CSharp/blob/master/CallTest/Program.cs)
sudo 実行をパスワード入力無しで実行（および cron 実行）

こんにちは。
```sudo``` による指定コマンドの実行をパスワード入力無しで実行できるようにし、また ```cron``` 実行も確かめました。

まず ```sudo``` に関する設定を編集開始するために、```visudo``` コマンドを管理者権限で起動します：

```console
$ sudo visudo
``` 

そして、下記のように指定コマンド（フルパス）の実行設定の行を追加しました [^1]。この例ではシェルスクリプトを指定しています。

[^1]: admin グループが sudo 実行権限を持っていることを仮定しています。

```
%admin  ALL=NOPASSWD: /home/me/execute.sh
```

なお下記を参考にしました。
- [Using sudo in a Cron Job](https://macosx.com/threads/using-sudo-in-a-cron-job.284877/)
- [crontabでsudoを利用する時の注意点など](http://www.crossl.net/blog/crontab/)
- [sudo のパスワードを入力なしで使うには](https://qiita.com/RyodoTanaka/items/e9b15d579d17651650b7)
[React] JSX内で直接for文やif文を使う

# したかったこと

renderメソッドで返すJSXの外側でfor文やif文や定義すると、return処理が増えたりして煩雑になってしまうので、JSXの中で直接for文やif文を呼び出したかった。

# 採用した作戦

即時関数を使う
[参考にさせていただいたサイト - Qiita](https://qiita.com/endam/items/1bde821c4b29f9b663da)

# コード

```javascript:ScoutArticleSelector.jsx
render() {
    const articles = this.state.articles;
    return (
      {(() => {
          for(let i=0; i < articles.length; i++) {
            const label = articles[i].label;
            if (articles[i].value == this.props.target_article_id) {
              return(
                <div>
                  ...
                </div>
              )
            }
          }
      })()}
   )
}
```

まだ汚い感じがしますが…
Go言語が好き？

Go is an open source programming language that makes it easy to build simple, reliable, and efficient software.

Go:　https://golang.org/

ほかの言語と共通点が多いものの、違うところも多いのですが、全体的に簡潔で素晴らしいです。

#コード例
##switchその１
※switchに何も書かずに、caseに条件を書く
![image.png](https://qiita-image-store.s3.amazonaws.com/0/346425/f359a182-93be-611b-89dd-97573966dace.png)

結果：
>go begin
>合格
>go end

ここでは、80以上の場合は、合格と良好両方合致するので、実行したい場合は、「fallthrough」を追加して、そのあとの判断を続けます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/346425/71fd9df1-d552-3d10-4cfa-0d9ce5542767.png)

結果：
>go begin
>合格
>良好
>go end

##switchその２
※switchに条件を書いて、caseに判断値を書く
![image.png](https://qiita-image-store.s3.amazonaws.com/0/346425/ac9afb63-bb29-525f-446e-d9e695bdaa30.png)

結果：
>go begin
>90点
>go end


#forの例
##forその１：条件なしのfor句
![image.png](https://qiita-image-store.s3.amazonaws.com/0/346425/53f286b8-fcb2-013c-f0ae-29dbf6a3a36a.png)


##forその２：JAVAのwhile句と同じように書く
![image.png](https://qiita-image-store.s3.amazonaws.com/0/346425/bed8015c-7946-fa6a-18a7-1f641f101a08.png)

結果：
>go begin
>1
>2
>3
>4
>5
>go end

##forその３：典型的な書き方
![image.png](https://qiita-image-store.s3.amazonaws.com/0/346425/bbe48bdc-9139-9684-1484-b6a5bf6fb805.png)

結果：
>go begin
>0
>1
>2
>3
>4
>go end


あとは、goto,continue,breakとLABELで制御できます。

#関数の複数結果を返すことはできる
![image.png](https://qiita-image-store.s3.amazonaws.com/0/346425/1bf2a7db-fb47-44ee-3b4e-1c5be2e7da99.png)

関数は複数戻り値が書くことはできます。
また、利用したくない戻り値は、「_」で戻り値をスキップできます。

結果：
>go begin
>manCount: 100
>womanCount: 150
>go end

面白いものがいっぱいありますね。

以上
ipynbファイルをダブルクリックで開く(Windows)

最初に投稿した時（2019年2月）からVSCodeの対応状況が変わったので更新しました（2020年5月）。

# 環境

- OS: Windows 10 v1909
- エディター: Visual Studio Code 1.45.1 & Python拡張機能 2020.5.80290

# Visual Studio Codeで開く
[2019年10月のPython拡張機能](https://devblogs.microsoft.com/python/python-in-visual-studio-code-october-2019-release/)をインストールしていれば、Visual Studio Codeで開けます。
ipynbファイルを右クリック→[プログラムから開く]→[別のプログラムを選択]でVisual Studio Codeを選択。「常にこのアプリを使って.ipynbファイルを開く」のチェックボックスにチェックする。
![ipynbを開く.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239172/b7f7d508-0bf4-6bf9-e6ee-4896c4f49300.png)

以下で丁寧に説明されていますので、詳細はそちらをご覧ください。

- [VSCode で快適Jupyter Notebooksコーディング　前編](https://qiita.com/ss_33_sss/items/b018e55834f21d1a593d)
- [VS Code で快適Jupyter Notebooksコーディング　後編](https://qiita.com/ss_33_sss/items/7c628f66b69a42ec56ca)


# ブラウザーで開く
Anacondaをインストールしていれば、ipynbファイルを右クリック→[プログラムから開く]で、Anacondaのインストール先(デフォルトだと`C:\ProgramData\Anaconda`)のScriptsフォルダーにある`jupyter-notebook.exe`か`jupyter-lab.exe`を選択。


# こんな面倒な方法もある
一通り書いてから上記の方法に気付いた。かなc。
個人的な備忘録です。
## 概要
ipynbファイルがあるフォルダーを初期フォルダーとしてJupyter Notebookを起動する方法。レジストリー編集も、管理者権限も不要。引数として受け取ったファイルの親フォルダーに移動しJupyter Notebookを起動するexeファイルを作り、ipynbをそのexeファイルに関連づけ。

## ps1ファイルの作成
exeファイルの元となるps1ファイルを作成。

```powershell:start_jupyter.ps1
cd (Get-Item $Args[0]).DirectoryName
jupyter-notebook
```
## ps1ファイルのexe化
PS2EXE-GUIをダウンロード。
https://gallery.technet.microsoft.com/scriptcenter/PS2EXE-GUI-Convert-e7cb69d5

PS2EXE-GUIを解凍したフォルダーにstart_jupyter.ps1ファイルを置き、exe化。

```powershell
$ cd <解凍したフォルダー>
$ .\ps2exe.ps1 .\start_jupyter.ps1 .\start_jupyter.exe
```

ps1が実行できない場合には、

```powershell
$ Set-ExecutionPolicy Bypass -Scope process
```
とし、実行ポリシーを変更。

[メモ]
私のようにスタートメニューからたどれない人は、自分でショートカット(%SystemRoot%\system32\WindowsPowerShell\v1.0\powershell.exe)を作成してから起動。

## ファイルの関連付け
ipynbファイルを右クリック→[プログラムから開く]で、作成したstart_jupyter.exeを選択。これでダブルクリックでJupyter Notebookを開けるように。

## 参考
管理者権限なしでPowerShellスクリプトを実行する方法
https://qiita.com/alchemist/items/e6706cd425f8f5e5032e
Django QuerySet 外部キー制約無しで結合する

## 内部結合(直積した結果からユーザーIDが等しいもの)

https://docs.djangoproject.com/ja/2.1/ref/models/querysets/#extra

```bash
Customer.objects.extra(
  tables=['django_user'],
  where=['customers.created_user_id=django_user.id']
).extra(select={'username': "django_user.last_name+django_user.first_name"})

SELECT (django_user.last_name+django_user.first_name) AS `username`,
       `customers`.`id`,
       `customers`.`created_at`,
       `customers`.`created_user_id`
FROM `customers`,
     `django_user`
WHERE (customers.created_user_id=django_user.id)
ORDER BY `customers`.`id` ASC
```

## 外部結合

https://stackoverflow.com/questions/21271835/left-join-django-orm
https://github.com/django/django/blob/master/django/db/models/sql/datastructures.py#L26-L139

```python
joinField = ForeignKey(
    to=User,
    on_delete=lambda: x,
)

joinField.opts = Options(Customer._meta)
joinField.opts.model = Customer
joinField.get_joining_columns = lambda: (("created_user_id", "id"),)

j = Join(
    User._meta.db_table,
    Customer._meta.db_table,
    'T1',
    "LEFT JOIN",
    joinField,
    True
)

q = Customer.objects.values()
q = q.extra(select={'username': "django_user.last_name+django_user.first_name"})

q.query.join(j)

print(q.query)
```
【Azure】For Kubernetesとは何か？と構成要素～ハッカソン行ってきたのでさらっと復習～

#Azure For Kubernetes(クーバネイテェス)ってなんぞや

- Micrisoftが提供するAzureのサービスの一つ
- 複数のコンテナ(ACR,Dockerコンテナ.etc)を組み合わせて**冗長構成を構築する**ツール※1
- Ingress,Service,Deployment,Pod,Containerで構成されていて、各設定をすれば動く。

さらっというとこんな感じ。
 
##どう構成されているか

- Container
    - いわゆるアプリケーション1単位。
    - Dockerのimage1つと考えればいい。
    - Dockerのランタイムが備わっていて、dockerコマンドが使える。
    - Container対POD=多対１。
- POD
    - Deploymentで記述するreplicasの数だけこのPODが不死鳥の如く蘇ってくる。
    - 正確には死んだPODとは別の新しいPODが作成される。内部的なIPは変わるが通信するのに設定変更不要。
    - POD対Deployment=多対１
- Deployment
    - Azure For Kubernetesの核技術。**記述したreplicasの数だけPODが生き返る。これを1から実現するのがとてつもなく難しく、Azure For Kubernetesを使うのはこれが理由といっても過言ではない。**
    - なので同じアプリケーションセット(Containerを持つPOD)を複数冗長的に動かしたいならAzure For Kubernetes。
    - PODのマネージャ。
    - Serviceからのアクセス先。
    - Deployment対Service=多対１
- Service
    - Ingressからのアクセスや他のServiceからのアクセスを捌く。
    - 内部のロードバランサー的な役割。
    - Service対Ingress=多対１
    - ServiceにオープンなIPを振ることもできるが、セキュリティ設定が煩雑なのでIngressを使用する事が推奨される。
- Ingress
    - Kubernetes外部からのアクセスを捌く。
    - 外部のロードバランサー的な役割。
    - Ingress対Service=1対多
    
##どうやって使うか
- AzureのPortal上からKubernetesを作成し起動させる。
- VMを用意する(AzureだとVirtual Machines)。
- コンテナを用意する(AzureだとACR)。
- VMからKubernetes CLIを使えるようにしておくと便利。
- アプリケーション(DockerのImage)を作成する。
- VMからACRに作成したImageをPushする。
- kubernetesの認証情報を得る。
- yamlファイルでIngress,Service,Deployment,Pod,Containerの設定をVM上からKubernetesコマンドで行う。
 
#ってな感じで
さらっとAzure For Kubernetesとは何かっていうのと、何で出来上がってるか(構成要素)と、それらの設定をしていくのがAzure For Kubernetesを使うってことですよ～っていう内容でした。
※関西Javaの会？関JAVA？に行ってみて、寺田 佳央さんの話を聞きながらやったことの復習。
以下、ちょっと書き残したこと。

※1
様々なモジュールの管理運用を総指揮するので、オーケストラを纏める指揮者に見立てて、よくオーケストレーションツールと呼ばれる。
オーケストレーションツールであるとか言われてもいきなりなんやねんってなる方もいるので後ろに持ってきました。
Dockerランタイムですが、新しいAzureForKubernetesのバージョンはMobyに対応しているそうです。
Ruby素人だったころに覚えたこと

#きっかけ
Rubyメインで開発する会社に転職して、入社当時のメモが出てきたので、折角なので。
僕は前職JavaとVBA、C#だったので、わからないことだらけでした。
自分の解釈だけだと不安もあるので、別リンクも張ります。
まだまだ理解が浅いので間違っていたらマサカリ投げてください。

##レストフル、name space
CRUDやurlに/区切りでUSER/editとか出るあれ。
該当するリソースにRDBと、HTTPメソッドを利用して操作できる

name spaceってメモだと同じURLに紐づいたりRoutingがどうこうって書いてるんだけど、調べてみたら
https://qiita.com/srockstyle/items/5b0bf6fe2a78e1aa7363
こんな感じ。moduleの話が出てきたから、自社のソースで最初に覚えたのは一般的じゃない使い方かもしれない。

RESTの参考リンクはこちら
https://qiita.com/kidach1/items/43e53811c12351915278

##partiial
パーシャル。部分テンプレートのこと。_始まりで記述して、そのテンプレートを他で使うことができる。
自社だと「_form」とかで入力欄を共通化したりしたり、「_csv_reader」みたいにCSVのインプットをテンプレにしてる。
https://qiita.com/shizuma/items/1c655dadd2e04b3990a8

##ハッシュとシンボル
ハッシュはkeyとvalueでデータを格納できる構造のこと。
シンボルは「:symbol」みたいに先頭に「:」が付いたもの。文字列の代わりに使えて、
メモリ消費が文字列に比べて低いからコスパがよいらしい。

なんでハッシュとシンボルを一緒に書いたかというと、シンボルはハッシュのkeyにかけて、
更にハッシュの書き方で、
「hoge: "fuga"」みたいに書けるから混乱の極だったから。

https://qiita.com/ryosuketter/items/257d672eb83210b5f8dc


##メソッドの戻り値
これは最後に評価された値。Javaみたいに return 変数名。とかじゃなくて最初みたとき何を返すの？って混乱した。


#最後に
あとはインスタンス変数とか、moduleとかあるけど、その辺はあまり気にならなかったかなと。
SIERからWEB系の会社に転職した感じたのはRubyもだけど、JS(VueとかTypeScript)、HTML、CSS、GIT、Docker、k8s、サーバーの知識…ともうなんでも必要。
覚えることが多すぎて最初は目が回ったけど、いろんな人に聞いたり助けてもらって何とか仕事ができてます。いろんな人に感謝を。早く戦力になれるようにがんばります。

PS：似たような記事があった。
https://qiita.com/ryo2132/items/2bb76e4012c80a654119
Rasberry Pi は Android 9 Pie の夢を見るか？（速報：動画あり）

つい先日、Windows10 ARMに引き続き、Raspberry Pi 3/3+にAndroid 9 Pieのインストールが可能になったニュースがあったのでテストしました。
夢、見れました。
<img width="1788" alt="A9.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/88766/d290be4b-3d4b-bf12-c3e4-e8e3eb1c511b.jpeg">

youtube動画
####■ Android 9 Pie on Raspberry Pi 3B+ with hardware acceleration *Wi-FI , Bluetooth OK"
https://www.youtube.com/watch?v=JC7FMrlvnXU

見ていただけると分かるのですが、起動(1分20秒)も動作もキビキビ早いです。しかも、すでに3+でWiFi&Bluetoothが使えます。
さすがにAndroidはOSSのLinuxベースのOSだけありますね。Windows 10 ARMもこのぐらい早ければ実用になるのですが..
しかもLinuxカーネルとU-BootはGPLv2なので、Windows 10 ARMと違いライセンス的にはクリアしています。（たぶん..）ソースと一緒の配布が必要です。


Root化(ADB)するのがUSB-Sirial or Android Stadio　(windows版ではadbが無かったのでMac版インストール中）が必要かつトリッキーなオペレーションがあり、Win10 ARMに負けず劣らずややこやしい（というかAndroid on Raspberry Piの方が難しい）ですが、時間と根気があればGoogle PlayでAndroid アプリがインストールできるようになります。
<img width="1899" alt="2.png" src="https://qiita-image-store.s3.amazonaws.com/0/88766/69401606-d914-c37e-d034-da66749aa74b.png">
<img width="748" alt="3.png" src="https://qiita-image-store.s3.amazonaws.com/0/88766/6c39e506-46cb-d8db-16d6-e904fe460a72.png">
<img width="1328" alt="5.png" src="https://qiita-image-store.s3.amazonaws.com/0/88766/9eb4f9ca-0f55-1f29-9db5-e748bf32ce16.png">

動作電流は負荷かけていないのです5.2-5.07V/0.7-1.5A程度でした。

####■ 関連記事 【Rasberry Pi は Windows10 ARM の夢を見るか？】　
https://qiita.com/msegawa200x/items/a1c2fd8d1c5fd85413c7
jQueryUI sortableのsort中、画面スクロールの高さ分、要素がずれる件について

# 概要

覚書です。
jQueryUIのsortableはこれまでも使ったことがあるのですが、
sortで掴んだ要素がスクロールした高さ分上方向にずれるということが初めて発生し、
どうやって解決したかをメモします。

「jQueryUI sortable ずれる」でググると、タイトルの通りの事象を報告されている方が多くいますが、私なりに考えたところ、原因は親Elementの **「position:relative」** ではないかと思っています。
以下、原因を突き詰めていった流れです。


# 原因予測
sortしたい要素のdrag中にずれる。
drag中の要素は、position:absoluteになり、topやleftで位置指定されている。
そのtopがscrollした分だけずれるということは、
position:absoluteの上にposition:relativeがついて相対位置指定が変になっているのではないか？

# 実験: position:relativeを一つずつ外す

ずれが発生したHTMLとCSSを簡略化するとこんな感じです。

```
...
 <style>
   #container {
     position: relative; 
   }
   #container> div {
     position:relative;
   }
 </style>
 <script>
  $("ul").sortable();
 </script>
</head>
<body>
  <div id="container">
     <div>
       <ul>
         <li>1</li>
         <li>2</li>
       </ul>
     </div>
  </div>
</body>
</html>
```


position: relativeが怪しいということで、一つずつ外して確認してみる。
(実際の作業時は、まだposition:relativeが原因ではないか？と予測が立つ前はすべてタグやCSSを1つずつ切って確かめるという泥臭いことをしていました・・)



# 結果: position:relativeが全て無くなったらずれが解消された

sort中の要素は絶対位置指定となっている中で、
相対位置が決まってしまっているとスクロール分を反映できないということなんだな？
と理解。


ちなみに、
このずれる事象は、Chrome,Firefoxでは起きましたがEdgeでは起きなかった。

# 思うこと

結果としては親position:relativeを撲滅することで解消されましたが、
どうしても親にはposition:relativeは必要だ！ということもある時はどうしようか悩むところです。

今回 `body > div#container` にも付いていたわけですが、body直下のdivは共通のレイアウトに関わるので場合によっては修正は難しいことがありそう・・？

本当に必要なのかposition:relativeなのか精査するのもいいですね。大変ですけど。

あとはsortableしたいリストを、画面の上になるべく設置して、スクロールが影響しないようにする、という対処療法もありますかね・・・。
DjangoでCSSファイルを読み込む方法

#DjangoでCSSファイルを読み込む方法

1.settings.pyにて以下のコードを記入

```settings.py
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]
```
2.Templateファイルにて以下のコードを記入
　(ただし、必ず　{% extends 'base.html' %}　が先頭で記載されなければならない)

```~.html
{% load static %}
```

3.テンプレートファイル(基本はbase.html)に以下のコードを記入
　この場合はstatic/app.cssのディレクトリです。

```base.html
<link rel="stylesheet" href="{% static 'app.css' %}">
```

以上で無事に反映されるはずです！！
初心者向け　React環境設定をする

# サーバサイドエンジニアがReact環境を作るまで
## まずはじめに
・当方PHP3年位の実力
・Reactってなんだろう？的な感じでいろんなサイトみて作ってみましたレベル
・これからフロント頑張ろうと思っていますレベル
※なので、ご指摘等あれば教えてくださいませm(_ _)m

## 環境構築
### ディレクトリ作成
```
mkdir react
cd react
```
どこにでもいいのでまずはディレクトリを作成する
### package.json作成
```
npm init -y
```

### React インストール
```
npm install --save-dev react react-dom
```

### webpack インストール
```
npm install --save-dev webpack webpack-cli
```

### Babel インストール
```
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015 babel-preset-react
```
loaderは7にしないとbuild時にエラーが出たので、指定をする

### .babelrc作成
```
touch .babelrc
```
```text:.babelrc
{
    "presets": [
      "react", "es2015"
    ]
  }
  
```

### webpack.config.js作成
```
touch webpack.config.js
```
```javascript:webpack.config.js
module.exports = {
  entry: './app.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  module: {
      rules: [{
          exclude: /node_modules/,
          loader: 'babel-loader',
          query: {
            presets: ['react', 'es2015'],
          },
      }],
  }
}
```

## 実際にコードを書く
```html:index.html
<!Document html>
<div id="header"></div>
<div id="content"></div>
```

```javascript:app.js
import React from 'react'
import ReactDOM from 'react-dom'

class Header extends React.Component{
  render(){
    return(
      <div>header!</div>
    );
  }
}

class App extends React.Component{
  render(){
    return(
      <div>Hello World!!</div>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById("header"))
ReactDOM.render(<App />, document.getElementById("content"))
<script src="./dist/bundle.js"></script>
```
## buildする
```
npm run build
```

## 最後に感想
Build時にエラーが起こり依存関係でライブラリが正常に呼ばれない事象が
結構ハマりました。
「システムは魔法」？　期待を調整しつつ要求定義を進めるためには


みなさん、こんにちは。
今日はすでにいろんな人が書いていると思いますが、私が自分自身の言葉で書きたくなったので、システム開発時の要求定義・要件定義について書きたいと思います。

<h3>“びゃー”って、何？</h3>
私は今、コンサルタントとして企業のデータベースとある業務に関するシステムの要求定義・要件定義を行なっています。

そこでシステム導入前の業務を行なっているお客様からよく聞くのは

「ここは機械的に計算してもらって・・・」
「これ入れたらこれが自動的に出てくるようにして・・・」
「システムでびゃーっとこのExcelファイルを出力して・・・」

“機械的に” とか　“自動的に” とか　“びゃーっと” とか
それってどういう意味でしょうか？

上流工程に携わったことがある方は特によく聞く言葉かなと思うのですが
それをITの設計に落とさないといけない側はこう思います。

「その“びゃー”っていうのはどういうことかもっと説明してくれ・・・」

これまで言語化されていなかったり体系化されていなかったり、平準化されていない業務を言語化するのがコンサルタントの仕事なんですが、
そしてシステムへの期待値をコントロールしていくのがコンサルタントの仕事なんですが、
それを認識してその上で伝えたいのが今日のタイトルです。


要求定義・要件定義って要は自動化ってどこからどこまで、何が一体どうなって/どうやったら最終的にほしいものが出てくるのか・・・
みたいなことを本当に大雑把に言うとやっているかと思いますが、これがとっっっても難しい。
それってなぜならお客さんもこれまで自分の業務をそこまで体系的に捉えられているわけではないから。やりやすいように作業手順みたいなものがあるとは思いますが、それはあくまで「その人がその人向けに」カスタマイズした手順。システム向けに考えられているわけではない。
それをじゃあ翻訳してあげましょうというのが私たちコンサルタントであったり、SEの皆さまもやっていらっしゃるわけですね。

ところがここで例の問題が出てきます。システムへの過度な期待、です。
冒頭でご紹介したこと、割と日常茶飯事でエンジニアの方は言われていないでしょうか？
お客さんだって、いやもう私だって、できることならお願いしたいんです。
システムに「いい感じでやっといて、」と。

なぜシステムにはぽいっとお願いしたら人間と同等かそれ以上のなんだかすごいものを出してくれると思ってしまうのでしょうか。

考えました。


<h3>システムは基本的に受け身な箱です。</h3>

システムはインプットとして投入されたものと、それらを使って人間が指示命令した手順以外のことは基本的にしてくれません。これを知らない方、または言われればそうだけど、あんまり意識したことなかったな、という人が多いから人間みたいにお願いすれば自分で考えていい感じにやってくれると無意識に思ってしまうから要求定義・要件定義のときの翻訳が難しくなってしまうのではないか、と私は考えています。

さらにこの中身はこの2点に尽きるのかなと思っています。
・言葉にしなくてもやってほしいことは伝わると思っている
・業務を言語化できたとしても翻訳する先の言語や仕組みを知らないから要求定義・要件定義が片手落ち

この課題を解消していくには、私たちが仕事にしている翻訳活動の他に、IT側のできる/できないを伝えつつ一方で業務の可視化、平準化を平行してやっていかないといけない。

これが超難しいと言われる所以と思っています。


この課題って永遠の課題だと思うんです。
だから常に口すっぱく、飽きられるくらいでもいいから伝えていかないといけないと思っています。

システム化のプロジェクトは非常に多くの人たちが役割を分担して成り立っています。いろんな問題がそれぞれの視点からあげられます。その中で要求定義・要件定義を担当する人が一番いろんな課題を集約して板挟みになるのかな、と思っているのですがめげずにやっていってほしいです。

そんな人が一人でも増えたら「システムは魔法」なんて幻想は少しでもなくなって、システムと人間の双方の調整で業務改善/システム導入ができるんだなと理解してもらえることができるのではないかなと期待しています。
上下中央揃えの方法（Bootstrap FontAwesome）

FontAwesomeのアイコンとテキストを表示させた時に
テキストがアイコンの真ん中に表示されずに困ったので解決方法をメモします。

結論としてはFontAwesomeアイコンのCSSと
テキストのCSSに

```
display: table-cell; vertical-align: middle;
```
を加えれば良い。

詳細はこちらに書いてある。
http://unitopi.com/css-vertical-align/

つまり、vertical-align　はブロック要素には無効なので
明示的に対象の要素がテーブル要素である事を示さなければならないとの事です。

参考までに・・・

```
<div class="col">
  {% if user.is_authenticated == False %}
      <a href="#" class ="grid_atag" style = "border-spacing: 10px 5px">
          <i class="fa fa-sign-in fa-2x mr-2" style = "display: table-cell; vertical-align: middle; border-spacing: 3px 0;"></i>
            　<div class = "ml-2" style = "display: table-cell; vertical-align: middle;">サインアップ</div>
      </a>
  {% endif %}
</div>
```
画像からOCRテキスト出すやつを高速化する

# 環境

* Windows 10
* Python 3.7.1 (Anaconda3-2018.12-Windows-x86_64)
+ PyOCR
+ Tesseract OCR 4.0.0

# 画像をOCRするやつの並列化版

前回の[画像をOCRして検索用のテキストファイルを作る](https://qiita.com/ltzz/items/ac2a7e662029838cdd4c)だとシングルスレッドで処理するので遅かった。

標準ライブラリに入っているPoolというやつを使うとmapするときに並列処理できるらしいので、それに合わせてOCR処理を書き換えた。

pyocrとTesseract OCRが並列で呼び出しても問題ないIFになっているかどうか不安だったが、OCRする度にTesseract OCRを新たに呼び出す設計で問題なかった(少なくとも上記環境では)。

```python
from PIL import Image
import sys

import pyocr
import pyocr.builders
import glob
import os

from multiprocessing import Pool
import multiprocessing as multi

def ocrimage(file):
    tools = pyocr.get_available_tools()
    if len(tools) == 0:
        print("No OCR tool found")
        sys.exit(1)
    # The tools are returned in the recommended order of usage
    tool = tools[0]
    print("Will use tool '%s'" % (tool.get_name()))
    # Ex: Will use tool 'libtesseract'
    
    langs = tool.get_available_languages()
    print("Available languages: %s" % ", ".join(langs))
    lang = langs[0]
    print("Will use lang '%s'" % (lang))
    ocrtext = tool.image_to_string(
        Image.open(file),
        lang="jpn",
        builder=pyocr.builders.TextBuilder(tesseract_layout=6)
    )
    return ocrtext

if __name__ == '__main__':
    
    njobs = 1
    if multi.cpu_count() > 2:
        njobs = multi.cpu_count() - 1
    
    ocrtext = ""
    filelist = []
    for p in glob.glob('./**', recursive=True): # ディレクトリとファイル取得
           if os.path.isfile(p):
               # ファイルの場合
               name,ext = os.path.splitext(p)
               if ".jpg" == ext or ".png" == ext or ".gif" == ext:
                   filelist.append(p)
                    
    # 並列処理                
    process = Pool( njobs )
    ocrtexts = process.map(ocrimage, filelist)
    process.close()
                    
    for index, p in  enumerate(filelist):
        ocrtext += p + ":\n" + ocrtexts[index] + "\n\n"
    
    f = open('ocrtext.txt', 'w', encoding='utf-8')
    f.write(ocrtext)
    f.close()
```

前回はRyzen7 2700X(8コア16スレッド)で1スレッドしか使ってなかったので約2500個の画像に1時間ぐらい掛かっていたが、今回のコードで10分程度に高速化した。

HyperThreadingなどのSMTはCPUの空きパイプラインを活用して5-20%程度性能を改善するらしいのだが、実コア数を超えた時点でPCの動作が重くなる。

multi.cpu_count()が返すのはどうも論理コア数らしいので、実コア数に合わせたい感はある。

論理コア数を全部使い切られるとPCが大変重くなって作業できなくなるので一応-1している。

余談だが、`if __name__ == '__main__':`を忘れたせいで1時間半損した。

2/27追記: なんか"UnicodeEncodeError: 'cp932' codec can't encode character ..."とエラーが出た。
書き込み時のエンコーディング指定忘れが原因だった。ちゃんと`encoding='utf-8'`をつけましょう…。
Rubyでgemを指定したディレクトリにインストールする方法

## Rubyでgemを指定したディレクトリにインストールする方法
`$ bundle install`
すると、
デフォルトのRuby PATHにgemがインストールされますが、
`$ bundle install --path <パスを入力>`
することで、指定したパスにgemをインストールすることが出来ます。## 終わりに
私は現在、Web3のサービスの開発をしています。詳しくはこちらの記事をご覧下さい。
        [無料でイーサリアムが当たる、Web3時代の寄付サイトを作った話](https://note.com/kenroda/n/n814347fbdcd7)
cloud9でvue.jsプロジェクトをrunしたらエラーになった話

## 技術書をせっせこやっていこう
どうにも買って満足してしまうのですが、技術書は買っても手を動かさないとスキルにならない。
積んでる本を消化していかんとね、とぽちぽちやり始めた。

## やってる技術書
- Vue.jsとFirebaseで作るミニWebサービス

## 環境
- cloud9
- Node.js v8.11.2
- Vue.js 2.9.6

## エラーって？
npm run devしたら「Invalid Host header」が出た。
プロジェクトを作り直しても変わらずで、5分くらい詰んだ。

<img width="627" alt="スクリーンショット 2019-02-23 23.17.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/304374/ddf0c1a7-4c9a-0fef-061b-0279e809fb60.png">

## 解決方法

ググったら速攻で出て来た。
次からは3分悩んでダメだったら検索することにしよう。

```
　(前略）
　　：
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
　　：
　(以下略)
```

これ(↑)をこんな感じ(↓)に「disableHostCheck:true」を追加する。
追加する際は直前のオプションの最後尾にカンマを入れ忘れないように注意。

```
　(前略）
　　：
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true,
    disableHostCheck: true
  },
　　：
　(以下略)
```

するとこーなる。

<img width="625" alt="スクリーンショット 2019-02-23 23.17.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/304374/59c3d355-1cf7-ac9d-625d-b46f9b5ef7d7.png">


やったぜ！

## 参考資料
[webpack-dev-serverで起動したアプリが「Invalid Host header」と表示される場合の対処法](https://qiita.com/yutasuzuki0206/items/542390f7a046772262fe)
複数のテキストメモを１つにまとめるコマンド

# Powershellで下記を実行

```powershell
Get-ChildItem * | Sort-Object -Property LastWriteTime | ForEach-Object {@'
FileName - {0} -- LastUpdate: {1}
{2}

#########################

'@ -f $_.Name, $_.LastWriteTime, (Get-Content $_.FullName -Raw)} | Out-File ..\out\memo_all.txt -Encoding default
```

※あらかじめ目的のファイルのあるフォルダに移動しておく。
　2回目以降実行の際に、新たに作成したファイルを取り込まないようにするため、
　1階層上のフォルダにoutフォルダを作成しておき、そこに出力する。

出力ファイルは以下のようになる

```
FileName - 0220.txt -- LastUpdate: 2019/02/23 22:16:29 
hogehoge
hogehoge 

#########################

FileName - 0221.txt -- LastUpdate: 2019/02/23 22:16:34 
fugofugo
piyopiyo 

#########################

FileName - 0222.txt -- LastUpdate: 2019/02/23 22:16:38 
nya
nya
nya 

#########################
```


# Bashで
せっかくなのでBashでも作ってみた（Bashだと日付の"/"が"-"になって出力される）

```bash
for i in `ls -tr *.txt`; do echo -e "FileName - $i -- LastUpdate: `ls --full-time $i | sed -e "s/ \+/ /g" | cut -d " " -f 6-7 | cut -d "." -f 1` \n `cat -s $i` \n\n#########################\n" >> ../out/memo_all.txt ; done
```



# 両方作成してみて気づいたこと

- powershellの **ヒアドキュメント** （@'～'@の部分。わりと自由に成型できる）が便利。
- Bashよりファイルの **情報（プロパティ）**を得るのが楽。更新日時がすんなり拾えた。他の情報も必要に応じて簡単に追加できる。
- Bashはひと工夫必要で、コマンドがだいぶややこしくなった。その代わり、好きなフォーマットに変えられるなど、自由度が高いとも言えそう。
- 例えばcatの部分は **-sオプション** を使うことで、2行以上連続した（無駄な）改行を1行にしてくれる。今回はあえて入れてみたが、なくてもよい。
- **cat**を**grep**に変えて、必要な情報の入った行だけ拾うor不要な行は抜くことも可能（`grep -v "^$"`とすれば**空の行は全て捨てられる**、など）。



#### 注意点

**改行コードがLF** になっているようなので、メモ帳でそのまま開くと改行が反映されません。別のエディタを使いましょう。（私は職場ではサクラエディタを、家ではAtomか**Typora**を使っています）



# 雑感・経緯

皆さんはPCでどのようにメモを取って、保存・活用していますか？

業務手順、思案中のコマンド、先輩エンジニアが使っている便利なワンライナーなど、様々なメモをテキストファイルに保存しておく…という機会はきっとあると思います。

しかし、その管理は難しく、業務や日付単位でファイル名を付けたりするものの、あの日あの時あの場所で残したはずのメモが見つからない…ということに陥りがちではないでしょうか。


私は約半年にわたって「日付.txt」を量産してしまったため、約100のテキストファイルから目的の情報を探すのがしんどくなり、これを考えました。探し物が見つからなくても踊るわけにはいきませんし。

何かのお役に立てれば幸いです。



# 参考

[テキストファイルの内容をファイル名付きで表示する](https://qiita.com/quenhulu/items/ee2a5aed89a0e702cdda)
[ファイルのタイムスタンプを取得する](https://qiita.com/tmd45/items/45b677e06d1aedca7b45)
[How to get filename with the content of the file in PowerShell - Stackoverflow](https://stackoverflow.com/questions/43316420/how-to-get-filename-with-the-content-of-the-file-in-powershell)
プログラマ３５歳限界説

※2024/03/06　この記事は移動しました。
[プログラマ３５歳限界説](https://qiita.com/moonWalf/items/0260bf1ed97163a2c71e)

## プログラマに年齢はどこまで関係するのか？

よく
「プログラマ３５歳限界説」
というのを耳にする。

理由は

- 新しいことを学習する能力が落ちるから
- 単価が上がるから(客先常駐の場合)
- 管理職へ上がるタイミングだから

というところだろうか。
今年で３５歳になる私にとって、他人事ではない。
ちょっと考えて見ようと思う。

### 新しいことを学習する能力が落ちるから

一般に流れている説として、
年齢が上がるほど学習能力が落ちると言われている。
１０代の頃に比べると、３５歳のほうが物覚えが悪い、と。

しかし。

これはたぶん、すこし本当で、あとは嘘なんだと思う。

たとえば、ポケモンの名前をすべて覚える能力なら、
１０代のほうが高いんだと思う。
つまり、意味を考えず、単に丸暗記する能力なら、
若いときのほうが高いんじゃないか、ということ。

一方で、意味を考えながら覚えるようなことについては、
年齢が上がるほど、経験が増えるほど、論理力が高いほど、
覚える能力が上がっていくんじゃないかと思う。

と考えると、プログラムは「考えて覚える」ものだから、
年齢が上がったら覚える能力が落ちるどころか、
若い頃よりも高まっていると考えられるのではないか。

それから、日常的に勉強や考えるようなことを
しているかどうか、というのもある。

以前の会社の営業の人は、日頃勉強をする人ではなかった。
そういう人は、年齢が上がったほうが学ぶ能力が
上がっていることを自覚できていないのではないか。
だからこそ、先入観による結論が出てくるのではないか。

という気がしている。

自分の実感としても、
高校生の自分と「よーいどん」で勉強すると、
余裕で勝てる自信がある。

ただし、勉強する時間がない、というのはある。

### 単価があがるから

客先常駐限定の話かな。
これは、今はあまりないんじゃないかと思う。
昔は年齢が上がると単価が高くなり、
客先から敬遠されがちになっていたそうだ。

しかし。

むかしから５０代のプログラマが
客先常駐としていたし、今だっている。
単価が高くて年をとっている人が敬遠される、
というのは、あまりないんじゃないかと思う。

ちなみに、昔５０代の人と一緒に仕事をした。
その仕事はVB.NETだったのだが、
その人はそれまでCOBOL中心でJavaを少し、
という人だった。
しかし、ひと月の間にすっかりマスターして、
サクサクとかけるようになっていた。
このことからも、ひとつめの
「新しいことを学習する能力が落ちるから」
というのは違うんだろうなぁと思ってる。

### 管理職へ上がるタイミングだから

これは難しい。
今の日本の多くの組織は、
プログラマの次はシステムエンジニアで、
その次はプロジェクトマネージャで、
というキャリアが多い。
そして

プロジェクトマネージャ>システムエンジニア>プログラマ

という序列がついていたりする。
個人的には、それぞれ必要なスキルが異なるだけで、

プロジェクトマネージャ=システムエンジニア=プログラマ

だと思っている。
ついでにシステムエンジニアという
なんとも曖昧な職は不要では？
とも思ってる。

ちょっとグチっちゃった。

で。
こういうキャリアパスが描かれてしまっているので、
本人が望む、望まないにかかわらず、
プログラマとして続けるのが難しくなってくる面はある。

だからこれに関しては、
働き方や所属している会社によって大きく異なる。
半分、本当ともいえるかな。

### まとめちゃう

実感として、
「プログラマ別に限界とか無い説」
を唱えたい。

そもそも３０，４０代からプログラマになる人もいるし、
年齢による限界っていうのは考えにくい。
プログラマに限定せず、「考える、想像する」職業と考えると、
６０，７０代のデザイナーや建築士なんてザラにいる。
将棋の棋士や数学科の教授や作家だって年齢なんか関係ない。

能力うんぬんというよりも、
環境や固定観念によるものが大きんだと思う。
続けようとすれば、いつまででも能力を向上しながら
続けることが可能だ、という結論になった。

### とはいえ

ひとつだけ。
将棋の羽生さんやMLBのイチロー選手などなど、
多くの一流の人達が似たようなことを言っている。

「情熱を傾け続けることが大切」

と。

そう、プログラマだって同じで、
情熱を持ち続けることが出来るかどうか？
というのは、一番大切なポイントなんだと思う。

### 個人的なこと

では、自分はどうなのか？
というと、
実はいま、プログラムへの情熱が薄れつつある。
いわゆる
「燃え尽き症候群」の1.5歩手前くらいにいる。

だからこそ、こんな記事を書いてみた。

情熱は維持するように工夫するか、
流れに身を任せて、他のことに傾けるか。
そんな分岐点にいる気がする。
Windows 10 Pro x64 + Python3 で selenium + chromedriver で複数選択可能なselect要素を操作してみる

#目的
複数選択可能なselect要素を操作してみる
##サンプルコード
対象とするhtmlの抜粋
<pre>
&lt;select name="msel" size="5" multiple&gt;
&lt;option value="demo1"&gt;デモ1&lt;/option&gt;
&lt;option value="demo2"&gt;デモ2&lt;/option&gt;
&lt;option value="demo3"&gt;デモ3&lt;/option&gt;
&lt;option value="demo4"&gt;デモ4&lt;/option&gt;
&lt;option value="demo5"&gt;デモ5&lt;/option&gt;
&lt;/select&gt;
</pre>
コード

```python
import time
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait, Select
from selenium.webdriver.support import expected_conditions as EC

driver = webdriver.Chrome('C:\\Dev\\tool\\webdriver\\chromedriver.exe')  
driver.get('http://localhost:8080/')
try:

    element = WebDriverWait(driver, 10).until(
        EC.presence_of_element_located((By.NAME, 'msel'))
    )

    elm = driver.find_element_by_name('msel')
    # multiple かどうか
    print(Select(elm).is_multiple)
    # value で選ぶ
    element = Select(elm).select_by_value('demo1')
    # 表示テキストで選ぶ
    element = Select(elm).select_by_visible_text('デモ4')

    elm = driver.find_element_by_name('msel')

    # 最初に選択されている項目のみ
    em = Select(elm).first_selected_option
    print(em.get_attribute('value') + ':' + em.get_attribute('text')) 

    # 選択されている項目を全て
    em = Select(elm).all_selected_options
    for item in em:
        print(item.get_attribute('value') + ':' + item.get_attribute('text')) 

    time.sleep(2) # 表示確認用のwait
finally:
    driver.quit()
```
##参考にしたサイトはこちら
[7. WebDriver API](https://kurozumi.github.io/selenium-python/api.html)
[セレクトボックスを作る](https://www.tagindex.com/html_tag/form/select.html)
JavaScriptで.NetライクなString.Format()

ES6のテンプレート構文を使えないブラウザ(IE11とか)でも、似たような事がしたいとき用のメモ。
C#とかVB.NetのString.Format()みたいな使い方が可能。

```javascript
console.log("aaa,{0},ccc,{1},eee".format("bbb","ddd"));
// "aaa,bbb,ccc,ddd,eee"

// フォーマットを変数に入れておくことも出来る分、テンプレートリテラルより扱いやすいかも
let str = "aaa,{0},ccc,{1},eee";
str.format("bbb","ddd");
// "aaa,bbb,ccc,ddd,eee"
```


事前準備として、以下のコードをでString.format()メソッドを作成しておく。

```javascript
(function(){
    if (!String.prototype.format) {
        String.prototype.format = function () {
            var args = arguments;
            return this.replace(/{(\d+)}/g, function (match, number) {
                return typeof args[number] != 'undefined'? args[number]: match;
            });
        };
    }
})();
```

参考元：[JavaScript equivalent to printf/String.Format](https://stackoverflow.com/a/4673436/5483207)
【Rails】カラム名変更でConstraintExceptionがでたときの対処法

モデルのカラム名を変更しようとしたところ、"SQLite3::ConstraintException: FOREIGN KEY constraint failed:"というエラーが吐かれたので、その対処法を書いておきます。

確証を持ってやったというより、できそうだなと思ったらできてしまった感じなので、間違っている部分などあればぜひ教えてください！

##`rails db:migrate`のかわりに`rails db:migrate reset`を実行する
結論からいうと、`rails db:migrate`ではなく`rails db:migrate reset`をうつことで無事にエラーを回避してカラム名の変更を行うことができました。

ふつうは`rails db:migrate`なので、ちょっとイレギュラーな対応になるのかもしれません。

##前提と実現したかったこと
Railsチュートリアルの拡張機能（リプライ機能）を実装していて、userモデルのカラム名を変更しようとした。

カラム名の変更方法については、以下の記事を参考にさせていただきました。
[【備忘録】Rails-カラム名を変更する方法](https://qiita.com/kaito-chiba/items/723da8627438b67cc02c)

ざっくりと説明すると、
①`rails g migraiton rename_カラム名_column_to_テーブル名`でマイグレーションファイルを生成
②マイグレーションファイルに`rename_column テーブル名, 変更前のカラム名, 変更後のカラム名`を追記
③`rails db:migrate`を実行
という流れです。

ここで、先述の"ConstraintException"なるエラーが発生しました。

##外部キーによる他モデルとの関連づけが原因
エラーに"FOREIGN KEY"とあるとおり、外部キーをつかってrelationshipsテーブルと関連づけをしていたことが原因でした。

```ruby:user.rb
class User < ApplicationRecord
  has_many :microposts, dependent: :destroy
  has_many :active_relationships, class_name:  "Relationship", foreign_key: "follower_id", dependent: :destroy
  has_many :passive_relationships, class_name:  "Relationship", foreign_key: "followed_id", dependent:   :destroy
  has_many :following, through: :active_relationships, source: :followed
  has_many :followers, through: :passive_relationships, source: :follower
...
```

以下の記事を参考にしたところ、
①外部キーをつかって他のテーブルと関連づけをしていた
②すでにDB内にデータが存在しており、キーによる紐付けがおこなわれていた
という状態だったので変更ができなかったらしい（変更してしまうとデータ整合性がとれなくなる）、ということが分かりました。

[外部キー制約でハマったので(rails)](https://qiita.com/kemako/items/e98174b9747e0b2c75a6)

ちなみに上記記事では、has_manyにつづけて`dependent: :destroy`を指定することでこのエラーを解決しています。

##変更したいカラムはキーとは無関係なので、DBをリセットすることで対処
ただし、今回変更したかったカラムは外部キーに設定したカラムではないので、単純に`dependent: :destroy`をつける対処はできません。

また、変更するカラムが外部キーとは直接関係ないことから、問題になるのは②の「すでにDBに存在していて、他のテーブルに紐づいているデータ」になりそうです。

もしそうであれば、この「すでにあるデータ」をいったん空にしてしまえば`rails db:migrate`が実行できるはず。...DBをリセットしてマイグレーションを実行って、`rails db:migrate:reset`そのものじゃん。

ということでやってみたら無事にマイグレーションが実行できました。schema.rbも意図したかたちになっています。
WSL 用に LS_COLORS を直す

# 解決したいこと

WSL で ls したときに ↓ みたいにディレクトリに背景色が付くのを直したい。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/154409/72ae6cd2-f4ee-66c3-4bff-98dac8acfda5.png)

# 原因

WSL 上のディレクトリは other writable として認識されてしまっているらしい。以下のテストスクリプトを流してみるとわかる。

[ls \- Testing LS\_COLORS in zsh \- Unix & Linux Stack Exchange](https://unix.stackexchange.com/questions/20721/testing-ls-colors-in-zsh/20742#20742)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/154409/65037098-2987-4e93-73cc-dbe68df225d1.png)

# 解決方法

other writable なファイルを表示するときの書式を変更して、ディレクトリの書式にすればよい。私の環境ではディレクトリの書式は `01;34` だった。

```bash
$ echo ${LS_COLORS} | tr ':' '\n' | grep -wE 'di|ow'
di=01;34
ow=34;42
$
```

あとは bashrc なり zshrc なりに↓のように書いておけばよい

```bash
LS_COLORS="${LS_COLORS}:ow=01;34"; export LS_COLORS
```

ちなみに `/proc/version` を見て WSL かどうかチェックを入れて分岐してもよい。

[linux \- How to check if a program is run in Bash on Ubuntu on Windows and not just plain Ubuntu? \- Stack Overflow](https://stackoverflow.com/questions/38086185/how-to-check-if-a-program-is-run-in-bash-on-ubuntu-on-windows-and-not-just-plain)

```bash
if grep -qE "(Microsoft|WSL)" /proc/version &> /dev/null ; then
  LS_COLORS="${LS_COLORS}:ow=01;34"; export LS_COLORS
fi
```
Go言語での継承についての色々

## 説明
と言っても、既知のものを組合わせただけで真新しいものは何もない。


よくあるパターンとして、`interface`を定義して、それの実装`struct`を用意する。

```Go
type Hoge interface {
  Func1()
  Func2()
}

type hoge struct {
}

func (h hoge) Func1(){}
func (h hoge) Func2(){}
```

こんな感じ。

で、実装`struct`が一つの場合は良いけど、複数ある場合に同じような処理をその複数で実装すると`D.R.Y`に反するので、どうにかしたいと思うこともあるはず。

そんな時に使えるのが、`temporary`な`struct`を作ると良い。

```Go
type _hoge struct {
}

func (h _hoge) Func1(){ ... }
func (h _hoge) Func2(){ ... }

type hoge1 struct {
  _hoge
}

type hoge2 struct {
  _hoge
}
```

とやると、 

```Go
h1 := &hoge1{}
h2 := &hoge1{}
h1.Func1()
h2.Func1()
```

というのができる。

もちろんフィールドも使うことができる。

```Go
type Hoge interface {
  Func1()
  Func2()
}

type hoge struct {
  f1 int
  f2 string
}

func (h hoge) Func1() int {
  return h.f1
}
func (h hoge) Func2() string {
  return h.f2
}

type hoge1 struct {
  _hoge
}
```

となった時に、

```Go
h1 := &hoge1{}
h1.f1 = 5
h1.f2 = "test"

v1 := h1.Func1()
> 5
v2 := h2.Func1()
> test
```

となる。

ただこのままだと、

```Go
h1 := &hoge1{
  f1: 5,
  f2: "test",
}
```
とはできない。
なぜなら、`hoge`に`f1`や`f2`が定義されていないから。


とは言えども、定義したらしたらで別問題が発生。

```Go
type hoge1 struct {
  _hoge
  f1 int
  f2 string
}
```

としたら、

```Go
h1 := &hoge1{
  f1: 5,
  f2: "test",
}
```

としたらエラーにはならないけど、

```Go
v1 := h1.Func1()
> 0
v2 := h2.Func1()
> 
```

となる。
それは、フィールドを定義しているところが違うから。
もし定義前と同じようにしたければ、

```Go
func (h hoge) Func1() int {
  return h._hoge.f1
}
func (h hoge) Func2() string {
  return h._hoge.f2
}
```

としたら良い。

あとは、今までの流れを組合わせたら問題は解決できるはず。

## お願い
訂正、補足などありましたら、適宜コメントお願いします。
RoR｜Railsで別名のついたカラムで合計値を出してみる

# はじめに

Railsで合計値もとめる場合に`sum`を利用すると思います。
やりたかったことは本の金額に税率をかけて税込価格を求めたかったのですが、`AS`を使って別名をつけたときにうまくいきませんでした。

```ruby
2.4.1 :027 > Book.select("id, ROUND(price * 1.08) AS price_in_tax").sum('price_in_tax')
   (2.4ms)  SELECT SUM(price_in_tax) FROM "books"
ActiveRecord::StatementInvalid: SQLite3::SQLException: no such column: price_in_tax: SELECT SUM(price_in_tax) FROM "books"
	from (irb):27
```

SQLを見てみるとそりゃそうかって感じですよね。

# 前準備

## Bookモデル

Bookモデルには値段（`price`）カラムを持っています。

```ruby
class CreateBooks < ActiveRecord::Migration[5.2]
  def change
    create_table :books do |t|
      t.integer :price

      t.timestamps
    end
  end
end
```

## seedデータ

```ruby
Book.create!(price: 255)
Book.create!(price: 100)
Book.create!(price: 50)
Book.create!(price: 10)
Book.create!(price: 30)
Book.create!(price: 120)
Book.create!(price: 150)
Book.create!(price: 250)
Book.create!(price: 135)
Book.create!(price: 300)
```

# Arelを使うといいらしい

Arelを使うとSQLを自在に組み立てて実行することができそうです。
そのオブジェクトを`from`で指定することで、普段の？ActiveRecordのメソッドを実行できます。

```ruby
table = Book.select("id, ROUND(price * 1.08) AS price_in_tax").arel
Book.from(table).sum(:price_in_tax) # 1512.0
```

SQLは次のように組み立てられていました。サブクエリみたいな扱いになっているんですね。

```sql
SELECT SUM(price_in_tax) FROM (SELECT id, ROUND(price * 1.08) AS price_in_tax FROM "books")
```

---
＊追記（2019/03/26）

`arel`を使わなくても同じ結果になるようですね:wink:

```ruby
table = Book.select("id, ROUND(price * 1.08) AS price_in_tax")
Book.from(table).sum(:price_in_tax) # 1512.0
```

組み立てられたSQLはこんな感じです。

```sql
SELECT SUM(price_in_tax) FROM (SELECT id, ROUND(price * 1.08) AS price_in_tax FROM "books") subquery
```

# そもそもさ。。。

合計値を求めてから税率を求めてもいいですよね:laughing: 
税込価格だけじゃなく、`AS`を使って別名を付けて合算するなんてことはよくあるのでいいサンプルじゃないかもしれないですね :laughing: 

```ruby
Book.sum(:price) * 1.08 # 1512.0
```

# おわりに

Arelを使ってSQLを自由自在に組み立ててる記事はいっぱいあるのですが、それを実行した結果はあまり見なかったので誰かの助けになれば幸いです:smile:
VSCode起動時に前回のフォルダを開かない設定にする

Visual studio Codeを起動時に前回のフォルダを開かないようにする設定

```json:setting.json
"window.openWithoutArgumentsInNewWindow": "on",
"window.restoreWindows": "none"
```

### 注意点
- 試行錯誤しているうちに出来るようになったので、上記のどちらか片方でも良い・・・かもです。
- 設定後、何回かVSCodeを再起動しないと反映されないとの声もあります。
OXPSをコマンドラインでXPSへ一括変換する

Win8.1のマシンで作った大量のoxpsファイルをWin7で見る必要があったので調べた。

```powershell
cd "C:\Program Files (x86)\Windows Kits\8.1\bin\x64\"
xpsconverter /XPS /InputFile="変換前oxpsファイル" /OutputFile="変換後xpsファイル"
```

※OutputFileにはファイル名まで必要です。
【Python】画像の切り出し方法【OpenCV】

pythonでopencvを使って画像をトリミングしたい場合、いつもググってしまう為自分用メモ兼誰かの役に立てば。

いつものレナさんに50ピクセルで補助線を引いた画像を例に切り出し。
![lenasan.jpg](https://qiita-image-store.s3.amazonaws.com/0/364219/b96701c4-c3f1-c654-6557-f16d2da04d0f.jpeg)


```python
import cv2

# 画像読み込み
img = cv2.imread("lerasan.jpg")

# img[top : bottom, left : right]
# サンプル1の切り出し、保存
img1 = img[0 : 50, 0: 50]
cv2.imwrite("out_sample1.jpg", img1)

# サンプル2の切り出し、保存
img2 = img[50 : 150, 100 : 250]
cv2.imwrite("out_sample2.jpg", img2)
```

結果はこんな感じ。
サンプル1　![sample1.jpg](https://qiita-image-store.s3.amazonaws.com/0/364219/c8027921-e2d7-266d-f2fc-72956d9bd8d6.jpeg)

サンプル2　![sample2.jpg](https://qiita-image-store.s3.amazonaws.com/0/364219/c412ccd0-52a8-9368-8192-613bdb049d5d.jpeg)
備忘録


## コード備忘録
ネットで見つけた便利なコードサンプル

## 全組み合わせの列挙
引用元は[こちら](http://chakotay.jugem.jp/?eid=612)
解説は[こちら](https://qiita.com/masakinpo/items/b6ae147d9a61b592240a)

### ・順列

~~~java
    public static void permutation(String q, String ans){
        // Base Case
        if(q.length() <= 1) {
            System.out.println(ans + q);
        }
        // General Case
        else {
            for (int i = 0; i < q.length(); i++) {
                permutation(q.substring(0, i) + q.substring(i + 1),
                        ans + q.charAt(i));
            }
        }
    }
~~~


### ・組合わせ

~~~java
    public static void combination(String q, String ans, int k){
        // Base Case
        if(ans.length() == k) {
            System.out.println(ans);
        }
        // General Case
        else {
            while (q.length() > 0) {
                combination(q.substring(1), ans + q.charAt(0), k);
                q = q.substring(1);
            }
        }
    }
    public static void main(String[] args) {
        combination("abcd", "", 2);
    }
~~~

### ・第2引数ansをprivateなコンストラクタのように扱う

~~~java

public static void permutation(String q){
  permutation(q, "");
}

private static void permutation(String q, String ans){
  //省略
}
~~~
Eclipse JAVA開発に便利プラグイン：Decompiler

Eclipseにて、JAVAの開発はいろいろライブラリを使っております。
DebugなどライブラリのClassファイルの中身を入りたい場合、どうしたらよいかの問題があります。

方法１：ライブラリと同じバージョンのソースのZIPファイルをダウンロードして設定する
方法２：ClassファイルをDecompileするプラグインをインストールして中身を確認する
　Decompilerインストール方法：
　・Help⇒Eclipse　Marketplace⇒Findに「decompiler」を入力して検索する
　・Enhanced Class Decompiler　の右下にあるInstallボタンをクリック
　　　　※すでにインストール済みの場合は「Installed」

![image.png](https://qiita-image-store.s3.amazonaws.com/0/346425/743d0731-d98d-fd4e-08b7-9daf00f4895c.png)

インストール後、JARファイルを開いて、クラスファイルをダブルクリックすると、中身が見えます。
ただし、Decompilerはいつくかのツールがありますので、Open　Class　Withで選択できます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/346425/f87d661d-4e61-ee68-73df-5035ec25e69e.png)


CFR: https://www.benf.org/other/cfr/
FernFlower: https://github.com/fesh0r/fernflower
JD: http://jd.benow.ca/
Procyon: https://bitbucket.org/mstrobel/procyon

以上