OmniAICreator/Qiita-1.07M huggingface dataset:
Javaでの文字列結合について

# Javaでの文字列結合
業務でJavaを触っている中で何気なく、文字列結合って使ってるが、先日コードレビューを受けた時に、文字列結合をする時は `+`ではなく、`StringBuilder`を使ったほうが処理速度が早いとの指摘を受けた。
正直経験も浅く、言語の仕様までを把握していないのでいい機会だと思い調べてみました。

## 「+」 を使用した文字列結合
`StrgingBuilder` のインスタンスを生成し `append()`で文字列を結合した後に、`String`のインスタンスを作成するらしい。メモリ上の領域が広がるわけではないらしいです。

つまりループ処理の中などで`+演算子`を使って文字列を結合すると、メモリを無駄に消費してしまう。

そのため`StringBuilder`を使用するほうが性能的には良いらしい。

ただし以下のようなケースの場合は、`+演算子`を使うほうがよい。
・1行で複数の文字列リテラルを結合する場合
・1行で複数の文字列リテラルとString変数を結合する場合

```java
public class Main {

    public static void main(String[] args) {
        public static final String COMMA = ","
        String subject1 = "国語";
        String subject2 = "数学";
        
        String timeTable = subject1 + COMMA subject1 + COMMA subject2
    }
}
```




## StringBuilder を使用した文字列結合

先程も説明したようにループ処理等で文字列を結合する場合には適している。

```java
public class Main {

    public static void main(String[] args) {
        String languageAry[] = {"Java", "Ruby", "PHP", "JavaScript"};

        StringBuilder sb = new StringBuilder();
        for(language : languageAry){
            sb.append(language)
        }

        String sb = sb.toString();
        System.out.println(fuga);
    }
}
```

ちなみに`append()`は引数にString以外の型の変数を受け取ることが出来る。
今まで、それを知らずに`int型`の値をその都度`ToString()`でパースしていたので、コードも減るし、便利なので積極的に使って行こうと思います。

```java
public class Main {

    public static void main(String[] args) {

        StringBuilder sb = new StringBuilder();
        sb.append("hoge");
        sb.append(10); // 問題なく処理が通る

        String fuga = sb.toString();
        System.out.println(fuga);
    }
}
```
###### 実行結果
```java

hoge10
```

### 参考
[[Java]文字列連結で、＋演算子 or StringBuilder どちらを使うべき？](https://gabekore.org/javap-bytecode-plusoperator-stringbuilder)
[StringBuilderクラスについて](https://qiita.com/atsuk0r0/items/1208b5fead98676bc3c7)
[Java(tm) Platform, Standard Edition 8](https://docs.oracle.com/javase/jp/8/docs/api/java/lang/String.html)
【Semantic Segmentation】DeepLab(v3+) : DeepLab(v3)との違いは？

<h1>背景</h1>
[DeepLab(v1)](https://qiita.com/minh33/items/8eb31d16a975d2a87de5),[DeepLab(v2)](https://qiita.com/minh33/items/23030207de240edecc15),[DeepLab(v3)](https://qiita.com/minh33/items/deb7765ca064f1b0477b)を調べたから最後にDeepLab(v3+)を要約しupdateについて比較していきたいと思う。
全部読むの大変だった(T_T)

<h2>version3からのupdate</h2>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/52e65f12-b4ce-6d9b-35f1-e2e91cc2383e.png)

DeepLabv3では(a)のEncoderのみで1/8のサイズのSemantic Mapを8倍にinterpolationして最終出力としていた。

しかし、それだと1/8の粗さの精度しか出ないので、Decoderを一部取り入れる事にしたらしい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/d7aa5943-3eae-461b-bdc0-5bfeed8de3ff.png)

MobileNetで出てきたDepthwise、Pointwise Conv、空間方向とChannel方向に分けて2回畳み込みしたほうが、普通のConvolutionより計算量が小さくなる。
詳細はこのあたりを参考にしてみてください
https://qiita.com/omiita/items/77dadd5a7b16a104df83

Dilated(Atrous) Convにも同じものを適用して計算量を下げた。



もう一つ違いはResNetを[Xception](https://qiita.com/woodyZootopia/items/3adc613e7717b6b5a260)に変えた事。


<h2>結論</h2>
新たなupdateは以下の3つ
・Decoderの追加
・Depthwise Separable ConvolutionをDilated(Atrous) Convolutionに応用した
・ResNet->Xception

DeepLabV1からDeepLabV3+まで追ってみたが、Dilated(atrous) Convを使って効率的にGlobal Featureを取りに行くかについてがこの研究のメインテーマであったと感じた。

<h1>参考文献</h1>
Encoder-Decoder with Atrous Separable Convolution for Semantic Image Segmentation
https://arxiv.org/pdf/1802.02611.pdf
リクエストパラメータに情報を含めず ヘッダーに設定する方法




#結論：実装は以下
```java
 @GetMapping(path = "/hoge", produces = "application/json")
    public Response getSproItems(@Validated Request request,
                                @RequestHeader  (value="User-Agent", required=false) String agent,
                                @RequestHeader("Cookie") String cookie)
        return service.getResponse(request,agent,cookie) 
    }
```



#リクエストURL
https://hoge.jp/hoge?query=apple&results=30&in_stock=true
クエリ：apple
件数:30
在庫有無:有


ARCで送るとこんな感じ。
![719dd75ea2d1ef06a2e0304ce21115c5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/684145/5a1918b2-a4e9-e03c-5c91-07103a99932e.png)



するとリクエストパラメータ(query=apple&results=30&in_stock=true)は
格納用のクラスに格納され、
リクエストヘッダーの情報は、string型として別で保管されます。

情報をリクエストURLに
含めたくないときは便利かもしれません。
電卓作成

今回は完全自作でiphoneの純正電卓アプリを作っていく

まずはフローチャートであらすじとシナリオを書く

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481470/c7aa9943-2d12-f83a-6263-18718ea60235.png)

すごく大雑把だけど、ここから詳しく書いていく
こんな感じ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481470/c7373d91-6b44-40cb-72a0-f2524d5788fb.png)

現状での完成イメージはこんな感じ
けど、全て実装できないのでまずは単純に＝ボタンで計算をするところまでを実装する

前回のように2次元配列で実装したいが今回は何も見ず最低限度の検索だけで作りたいのでhtmlで書き出す

早速挫折した
onclickを使う事が出来なかった（笑）
とりあえずボタンを押したらポップアップを表示させることでonclickが働いてるかを見る
>https://techacademy.jp/magazine/15062

これからは普通に調べながらやっていく（笑）

##次はクリックさせたら変数にそれを反映させる
onclick内に変数を操作する


##変数をhtmlに表示する
≻https://www.sejuku.net/blog/88958


##テキストボックスから値を取得
≻https://techacademy.jp/magazine/21069
Bokeh_リアルタイムトレンド書いてみた

from bokeh.plotting import figure, output_file, show
from bokeh.models import DatetimeTickFormatter
from bokeh.models import ColumnDataSource, HoverTool, CrosshairTool, NumeralTickFormatter
from bokeh.models.widgets import Button, Select, RadioGroup, TextInput, TableColumn, DataTable
from bokeh.models.widgets import DateFormatter

from bokeh.layouts import Column, Row
from bokeh.plotting import curdoc
import pandas as pd

from bokeh.palettes import Dark2_5 as palette 
import random
import itertools 

global df

#colors has a list of colors which can be used in plots 
colors = ["red","blue","green","black"]


# 出力HTMLファイルパスを指定
df = pd.read_csv("stockchart_20201115.csv")
#output_file("graph1.html", mode="inline")

# 描画レイアウト
df['日付']=pd.to_datetime(df['日付'])

data = {'x' : df["日付"],
        'y' : df["始値"],
        'y_end': df["終値"],
        'y_start' : df["始値"]
       }

source = ColumnDataSource(data= data)

p = figure(
   title="simple line example",
   plot_width=1000,
   plot_height=500,
   x_axis_type="datetime",
   y_axis_label ="日経平均株価",
   x_axis_label ="日時"
)


# プロットに判例と線の暑さを指定したrenderer(今回は折れ線グラフ)を追加
p.line('x', 'y', source = source)     


# 吹き出し
hover = HoverTool(
   tooltips=[
        ("Date", "$x{%F}"),
       ("始値", "$y{0,0}"),
       ("終値", "@y_end{0,0}")       
   ],
   formatters={"$x": "datetime"},
   mode="vline",
   show_arrow=False,  # 矢印を消します
)

columns = [ 
    TableColumn(field="x", title="One", formatter=DateFormatter()), 
    TableColumn(field="y", title=" Two")
] 

#表を表示
data_table = DataTable(source=source, columns=columns,selectable = True,
                       sortable = True, width=600, height=500, fit_columns=False)

layout = Row(p,data_table)

def update():
    df_new = pd.read_csv("stockchart_20201115.csv")
#    
    # 描画レイアウト
#    df['日付']=pd.to_datetime(df['日付'])
#    
    data = {'x' : df["日付"],
            'y' : df["始値"],
            'y_end': df["終値"],
            'y_start' : df["始値"]
           }
    source.stream(data)
#    i=random.randint(0,3)
#    p.line('x', 'y', source = source,color=colors[i])     
    
#    source.stream(data)

curdoc().add_root(layout)
curdoc().add_periodic_callback(update, 1000)

# 結果を描画
#show(layout)
React Native (Expo) + unstatedで状態管理するアプリを実際に作り始める時に参考にしたリポジトリ

## はじめに

React Nativeの状態管理で最近はReduxよりunstatedを使うと便利という記事を見て、
使いたいとは思いつつも、どうやって実装するのか全体のイメージが湧きませんでした。

その時にいくつかリポジトリを参考にしたのでメモ。

## unstated-demo

一番最初の入門としてよくあるカウンターアプリの実装の参考にしたリポジトリ。
あとunstatedで取得したデータを一覧表示する所も参考になりました。

https://github.com/dabit3/unstated-demo

## react-native-social-app-sample

unstated+react-navigationの連携の実装で参考にしました。

unstated-demoよりも実用に近いかたちになっているので、
入門が終わってからはこちらのリポジトリを主に参考にしていました。

Subscribe以外の場所でContainerにアクセスしたくなった時の、
HOC化の実装もされているので、イメージが湧いて助かりました。

https://github.com/kdenz/react-native-social-app-sample

## おわりに

unstated使えば、Reduxで分けていたStore, Reducer, Actionという処理が一つのファイルにまとまるので見通しがいいし、実装しやすくて良かったです。

ただReact Nativeと組み合わせた実装例が少ないので、今回の記事が参考になれば幸いです。
Git rebaseのユースケース

# 目的

- 最近プロジェクトで`$ git rebase`をすることがあったので例として紹介する

# 前提情報

- 実際の開発現場で`$ git rebase`を実行したときの内容をまとめる。
- このプロジェクトの開発言語はPHPでフレームワークはLaravelを使用している。

# ユースケース

1. 自分の作業ブランチはmasterから分岐したブランチである。わかりやすいように自分の作業ブランチはAブランチとする。
1. 先輩の作業ブランチもmasterから分岐したブランチである。わかりやすいように先輩の作業ブランチをBブランチとする。
1. 先輩がDBの設計とマイグレーションを実施し自分がサーバサイドの機能を作成する段取りになっていた。
1. DBができないとサーバサイドの実装はできないがDBのER図やカラム情報がドキュメントで開示されていたた。そのため先行してmasterからAブランチを分岐して作業を開始した。
1. Aブランチの実装完了前に、先輩が作業完了しBブランチをリモートリポジトリにpushした。
1. Aブランチはmasterから分岐しているが、分岐元をBブランチにしたい。下記の方法でrebaseを行い分岐元をBブランチとした。
    1. `$ git fetch`を実行してリモートリポジトリの最新の情報をリモート追跡ブランチに取得した。
    1. `$ git branch -a`を実行してリポジトリの一覧を出力しBブランチがあることを確認した。
    1. `$ git checkout Bブランチ名`を実行してBブランチをローカルリポジトリに取得した。
    1. `$ git switch Aブランチ名`を実行してAブランチに移動した。
    1. `$ git rebase Bブランチ名`を実行してAブランチの分岐元をmasterからBブランチに変更した。
今日の積み上げ python 学習記録#1

#本日の学習6：30～8：30

```csharp

def print_hand(hand, name='ゲスト'):
    
    hands = ['グー','チョキ','パー']
    
    
    print(name + 'は' +hands[hand] + 'を出しました')

print('じゃんけんをはじめます')
player_name = input('名前を入力してください：')

print('何を出しますか？（0: グー, 1: チョキ, 2: パー）')


player_hand =int(input('数字で入力してください：'))

if player_name == '':
   
    print_hand(player_hand)
else:
   
    print_hand(player_hand, player_name)
```

int関数で整数化したinput関数の戻り値を変数player_handに代入しその変数を定義した関数print_handの第一引数に割り当てるのが味噌でした。

本業の仕事を昼までしたらまたお昼からぼちぼち遊びます。

```csharp

class MenuItem:
    # 引数「name」と「price」を受け取るようにしてください
    def __init__(self,name,price):
        # 「サンドイッチ」の代わりに引数nameの値を代入してください
        self.name = name
        
        # 「500」の代わりに引数priceの値を代入してください
        self.price = price

    def info(self):
        return self.name + ': ¥' + str(self.price)

    def get_total_price(self, count):
        total_price = self.price * count
        return total_price


# 引数を「サンドイッチ」と「500」としてください
menu_item1 = MenuItem('サンドイッチ',500)

print(menu_item1.info())

result = menu_item1.get_total_price(4)
print('合計は' + str(result) + '円です')
```
本日の夕方の学習
progateにて クラス　インスタンス　インスタンス変数　init ここら辺が一番苦手かも！！
おさないさんの動画でも写経ばかりしてました。何回か復習必要そうですね！
Windows 端末で Nextcloud の WebDAV マウントを行う場合の留意点

# WebDAV を Windows 10 でマウントさせる際の問題
Windows 10 で Nextcloud などのオンラインストレージを WebDAV を利用してネットワークドライブマウントさせた後、サインアウトやマシン再起動をした後に再接続ができなくなることがあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316764/b798b088-cef3-e203-9479-1d8ac3269178.png)
orz...

# 対策方法
Windows の `WebClient` サービスを自動起動するように設定すると再接続できるようになります ( サインアウトやマシン再起動後の初回は WebDAV の認証が必要です ) 。

## GUI による設定方法
1. 「サービス」を起動します。検索 ( 虫眼鏡アイコン ) から `サービス` で検索すると早いです。  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316764/9e6402c3-5e28-cdc6-4b96-6edc9bf6ace3.png)
2. サービスの一覧から "WebClient" を探します。これを右クリックし、「プロパティ」をクリックします。  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316764/831485f0-f002-8b8d-4439-74a156b9a729.png)
3. 「全般」タブの中にある「スタートアップの種類」のプルダウンで「自動」を選択します。  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316764/32a7cad5-2531-7864-6d50-7eb61802162a.png)
4. 「OK」をクリックします。  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316764/0b7c5954-12bd-b140-b4a4-8a97e6fe1ad1.png)
5. "WebClient" の「スタートアップの種類」が `自動 (トリガー開始)` になっていれば完了です。  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316764/0b564583-9182-c356-280f-41d83e5dacef.png)

## コマンドライン による設定方法

```powershell:コマンドプロンプト
sc config "WebClient" start= auto
```

```powershell:Powershell
Set-Service -Name 'WebClient' -StartupType 'Automatic'
【Semantic Segmentation】DeepLab(v3) : DeepLab(v2)との違いは？

<h1>背景</h1>
[DeepLab(v2)](https://qiita.com/minh33/items/23030207de240edecc15)を調べたから次はDeepLab(v3)のupdateについて比較していきたいと思う。



<h2>version2からのupdate</h2>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/6e9158d7-2965-0e8d-0c16-657b6ecfb00f.png)

DeepLab(V2)ではDilated conv が4種類rate=(6,12,18,24)とあったが大きなrateになると、filterが大きすぎて端っこの情報しか畳込んでいない事に気づきrate=24を削除した。
さらにImage Pooling(average pooling)と1x1 convolutionを足すことで画像サイズを多様化させた。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/aaf4d26d-fb32-d6b6-76c9-886d8063316f.png)

Multi-Gridという手法をResNetで特徴量を抽出するのに用いた。(a)普通のconvolutionを用いて画像全体の特徴を得ようとすると画像サイズを縮小しないとイケない(b)Dilated(Atrous) Convなら画像サイズを小さくせずに済む

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/735125fc-798b-268c-de78-e65c2e82a27d.png)

実験した結果(1,2,1)が一番精度が良かったらしい。

<h2>結論</h2>
・ResNetにDilated(Atrous) Convを導入し、Multi-Gridで様々な比のrateで畳み込みしたこと
・ASSP Moduleの弱点を修正したこと

次はDeepLab(v3+)について調べたいと思う

<h1>参考文献</h1>
Rethinking Atrous Convolution for Semantic Image Segmentation
https://arxiv.org/pdf/1706.05587.pdf#page=10&zoom=100,412,814
【Python】Tor経由で接続して、IPと利用状態を確認してみる

興味本位で実装してみたものの、日本語の文献が少なかったので書きます。
興味本位で試しただけなので特に深い意味や使用例はないです。いや、ほんまに。

# 自己責任でお願いします
**不正利用等を推奨するものではありません。**
ここで紹介した方法による如何なるトラブルに対しても、当方は一切の責任を負いかねます。

# やること
- [Torのインストールとセットアップ](#torのインストールとセットアップ)
- [Torの起動](#torの起動)
- [Torを用いた実装と実行](#torを用いた実装と実行)

# 環境
```:CentOS
CentOS Linux release 8.2.2004 (Core)
pip 20.2.4
Python 3.8.5
Tor 0.4.3.6
```
```:macOS
macOS Big Sur 11.0.1
Homebrew 2.5.12
pip 20.2.4
Python 3.8.5
Tor 0.4.4.6
```

# Torのインストールとセットアップ
### インストール
```:CentOS
# dnf -y install tor
```
```:macOS
$ brew install tor
```

### セットアップ (スキップ可)
この手順はスキップ可能です。

詳細な設定を行う場合は、以下のファイルをお好みのエディタで編集します。

```:CentOS
# nano /etc/tor/torrc
```
```:macOS
$ cd /usr/local/etc/tor/
$ cp torrc.sample torrc
$ nano torrc
```
例えば、ノード/出口ノードで中国とロシアを経由しないように設定する場合は、以下を追加します。

```:torrc
ExcludeNodes {cn},{ru}
ExcludeExitNodes {cn},{ru}
```
日本国外からのアクセスであるように見せかけたい場合は`ExcludeExitNodes`に`{jp}`を追加します。


# Torの起動
```:CentOS
# # 起動
# systemctl start tor

# # 再起動または停止する場合
# systemctl restart tor
# systemctl stop tor
```
```:macOS
$ # 起動
$ brew services start tor

$ # 再起動または停止する場合
$ brew services restart tor
$ brew services stop tor
```

# Torを用いた実装と実行
### ライブラリとか
- PySocks

```
$ pip install PySocks
```

### ソースと結果
Torのプロキシを利用して接続し、IPアドレスとTorの利用状態の変化を確認します。

```python
import json
import socks
import socket
import urllib.request

# IPとTorの利用状態を取得して表示
def check():
    req = urllib.request.Request("https://check.torproject.org/api/ip")
    with urllib.request.urlopen(req) as res:
        json_res = json.load(res)
    print(f"IP: {json_res['IP']}, Tor: {json_res['IsTor']}")

# 設定前の状態を確認
check()

# Torのプロキシを利用するように設定
socks.set_default_proxy(socks.PROXY_TYPE_SOCKS5, "127.0.0.1", 9050)
socket.socket = socks.socksocket

# 設定後の状態を確認
check()
```
実行結果

```
IP: XXX.XXX.XXX.XXX, Tor: False
IP: YYY.YYY.YYY.YYY, Tor: True
```
結果から分かる通り、設定後のインターネットアクセスはTor経由となるため、IPが変わっています。ぐへへ。

実行時にエラーが出る場合は、Torが起動していないかもれません。[ここの手順](#torの起動)を確認して起動(または再起動)してみてください。

>確認用ページ
https://check.torproject.org/

# 終了
起動したままだとアレなので、使わない時は[Torを停止](#torの起動)しておきましょう。
悪用ダメ、絶対。筆者も興味本位でちょっとやってみただけだし。いや、ほんまに。
FreeRTOS理解その７（ボタン押下を意図的に無視：キュー操作）

# ボタン押下を一定時間無視
[FreeRTOS理解その６（ボタン押下をキューに入れて通知](https://qiita.com/infinite1oop/items/7822fe4b4ee01e258b2d)）の続きである。ボタン押下をキューを使って別タスクに通知するのが前回の意図。今回は、何かイベントなどが発生した時に、ボタン押下を一定時間、意図的に無視することが目的。

## 考察
ボタン押下自体を防ぐことはできない。イベントが発生したときに、[その６](https://qiita.com/infinite1oop/items/7822fe4b4ee01e258b2d)のボタンハンドリングタスクでSleepするなど検討したが、このソフトウェア構成（キュー利用）では、メッセージ受信（キューからのメッセージを取り出す）側タスクで、ボタン押下した事実をキャンセルする（キューをクリアする）ことがベストと判断し、
　[xQueueReset()](https://www.freertos.org/a00018.html#xQueueReset)
を使うこととした。
ここでは、何かのイベントをシリアル回線からの入力とする。つまり、シリアル回線から入力があったとき、一定時間ボタン押下を無視することとした。

## ソースコード
メイン部分であるloopタスク（メッセージ受信側）のみ記載。他の部分（タスクなど）は[その６](https://qiita.com/infinite1oop/items/7822fe4b4ee01e258b2d)と同じ。

```c++
void loop() {
  uint8_t btn;
  char *pushed_btn[] = {"Left short", "Left long", "Middle short", "Middle long", "Right short", "Right long"};
  
  if (Serial.available() > 0) {
    xQueueReset(qBtn);
    Serial.printf("%s Interrupt by console. 3 seconds sleep.\n", Serial.readString());
    vTaskDelay(3000);
    xQueueReset(qBtn);
    Serial.printf("Queue is emply.\n");
  } else if (xQueueReceive(qBtn, &btn, (100/portTICK_PERIOD_MS)) == pdPASS) { // 100ms wait. if portMAX_DELAY, wait forever.
    Serial.printf("%s pushed\n", pushed_btn[btn]);
  }
  vTaskDelay(1);
}
```
- シリアル回線から入力があれば（Serial.available()）、それまでにキューに入っていたメッセージ（ボタン押下情報）をxQueueReset()により削除。
- ここでは、一定時間のボタン押下無視時間を３秒間とした（vTaskDelay(3000)）。実例としては、何か時間がかかる処理を行っていると仮定。
- この３秒間にもキューにメッセージ（ボタン押下情報）が入るかもしれないので、３秒経過後にも再度xQueueReset()により、キュー内メッセージを削除する。状況により、この２回目のxQueueReset()だけでも十分なケースもあるだろう。
- [その６](https://qiita.com/infinite1oop/items/7822fe4b4ee01e258b2d)とは異なり、xQueueReceive()では無限待ちできないため（シリアル回線からの入力検知が必要）、適当な時間（ここでは100ms）内に、キュー内にメッセージがない場合は、xQueueReceive()を抜ける。

## 実験
成功（動画があればよかったかも）。

## 最後に
もっと賢い方法があるかもしれない。
ヘッダーの一例

※ お手数ですが、Code Pen のResult欄を0.25xにしてご覧ください。

<p class="codepen" data-height="321" data-theme-id="light" data-default-tab="css,result" data-user="momonoki1990" data-slug-hash="eYzXqzR" style="height: 321px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="headerサンプル">
  <span>See the Pen <a href="https://codepen.io/momonoki1990/pen/eYzXqzR">
  headerサンプル</a> by 熊瀬川直也 (<a href="https://codepen.io/momonoki1990">@momonoki1990</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

* div.header-innerで両padding内側寄せ
* ヘッダーの中に横並びにしたい```div li```は```display: inline-block;```かけておく
* 全体を左と右の両端寄せにするため、```header-innerにdisplay: flex;   justify-content: space-between; align-items: center;```
* header-innerの子タグはdiv二つ(left,right)にまとめる
* 左に寄せた中div.leftの中で距離をとりたいので、div.genderに```margin-left```
* 並びにするものは```ul li```を```list-style: none; margin: 0;```をかけて使う。
* ```li```に上下```padding```かけて、ヘッダーの高さを押し広げる。```a```タグにかけた場合は、リンクの選択範囲がヘッダーの高さ分まで広がる
* 適宜```li.current```に```background-color```つけて選択されていることを示す
積上げ棒グラフを使って、時期ごとに棒の色を変える方法【Excel】

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/459893/8b87cd01-4d22-f0ea-5e30-cb054c78d522.png)

上記グラフは、児童手当の累計額の積上げ棒グラフです。

児童手当は、0歳から3歳までと、3歳から15歳までの支給額が異なります。

月額が異なることをグラフで視覚的に表現するには、以下のようにデータ行を2つに分け、グラフの種類を積上げ棒グラフにすることで実現できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/459893/4626c0eb-4d42-bbdd-2c4c-a417c5e1eece.png)


また、用途はないかもしれませんが以下のようにデータ入力すると、、、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/459893/a6b67792-a607-2553-30d1-799dcec75a0b.png)

グラフの色はこうなります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/459893/8b64e928-a7cb-fe10-9a4f-913ae4fde6af.png)
【WEBコーディング】windows 静的HTMLサイト制作でローカルに設定するGulpのインストール一覧(自分用)

#【WEBコーディング】静的HTMLサイト制作でローカルに設定するGulpのインストール一覧

以下のインストール済みを確認

```
node --version
npm --version
gulp --version
```

ローカルにgulpをインストール

```
npm install --save-dev gulp
gulp -v　// CLIとLocalのバージョンが表示されればOK
```

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

```
npm install --save-dev browser-sync
npm install gulp-clean-css --save-dev
npm install gulp-rename --save-dev
npm install gulp-uglify --save-dev
npm install gulp-imagemin --save-dev
npm install imagemin-pngquant --save-dev
npm install imagemin-mozjpeg --save-dev
npm install gulp-sass --save-dev
```

インストールしたパッケージを使ったgulpfile.js
browser-syncがうまくいかなかったので、修正

```javascript:gulpfile.js
var gulp = require("gulp");

try { fsevents = require('fsevents'); } catch (error) {}

const { src, dest, watch, parallel } = require("gulp"),
 browsersync = require('browser-sync').create();

const taskServer = (done) => {
 browsersync.init({
  server: {
   baseDir: './',
   index: 'index.html'
  },
  port: 2000
 })
 done();
};

const taskReload = (done) => {
 browsersync.reload();
 done();
};

// Wacth
const taskWatch = (done) => {
 watch('./**/*', taskReload);
 done();
}

exports.default = parallel(taskServer, taskWatch);

var uglify = require('gulp-uglify');
var rename = require("gulp-rename");

gulp.task('minjs', function() {
  return gulp.src("js/*.js")
    .pipe(uglify())
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest('js/'));
});

var imagemin = require("gulp-imagemin");
var imageminPngquant = require("imagemin-pngquant");
var imageminMozjpeg = require("imagemin-mozjpeg");

var imageminOption = [
  imageminPngquant({ quality: [0.65, 0.8] }),
  imageminMozjpeg({ quality: 85 }),
  imagemin.gifsicle({
    interlaced: false,
    optimizationLevel: 1,
    colors: 256
  }),
  imagemin.mozjpeg(),
  imagemin.optipng(),
  imagemin.svgo()
];

gulp.task( 'imagemin', function() {
  return gulp
    .src( './img/base/*.{png,jpg,gif,svg}' )
    .pipe( imagemin( imageminOption ) )
    .pipe( gulp.dest( './img' ) );
});

var gulp = require('gulp');
var sass = require('gulp-sass');

var cleanCSS = require('gulp-clean-css');
var rename   = require("gulp-rename");

gulp.task('sass', function() {
  // return gulp.src('./scss/**/*.scss')
  return gulp.src('./scss/style.scss')
    // .pipe(sass({outputStyle: 'expanded'}))
    .pipe(sass({outputStyle: 'compressed'}))
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest('./css'));
});

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task( 'watch', function() {
  gulp.watch( './scss/**/*.scss', gulp.task( 'sass' ) );
});


```

2つのコマンドプロンプトで以下を実行して、ブラウザリロードとsassを自動コンパイルさせる

```:ブラウザリロード
cd "gulpfile.jsのあるディレクトリ"
gulp
```
```:sassコンパイル
cd "gulpfile.jsのあるディレクトリ"
gulp watch
```


# 参考
https://haniwaman.com/gulp-windows/
https://mimirswell.ggnet.co.jp/blog-221
https://haniwaman.com/gulp/
JavaScript初心者が覚えた、エラー把握＆解決方法のまとめ

#console.log();

```javascript

console.log("Hello");
```
等と構文内に入れ、cromのディベロッパーツールを使ってどこまで実装されているのか、どこで止まっているか切り分けると便利です。
Helloの部分は変数を代入して、値がきちんと取得されているかなど、確認します。

#スマホでのconsole.logの確認方法
スマホではconsole logが見れないので

```html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/vConsole/3.3.4/vconsole.min.js"></script>
<script>
        window.onload = function() {
                initVConsole();
            }
            // Initialize vConsole
        function initVConsole() {
            window.vConsole = new window.VConsole({
                defaultPlugins: ['system', 'network', 'element', 'storage'],
                maxLogNumber: 1000,
                onReady: function() {
                    console.log('vConsole is ready.');
                },
                onClearLog: function() {
                    console.log('on clearLog');
                }
            });
        }
    </script>
```

をhtml構文のfooterへ追記して、console logを表示させるボタンを追加して上げます。
※テスト段階で有効的な方法です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/a1f6635e-14c0-2c1a-7675-1c4996752faf.png)

#javascriptが読み込まれない
asyncを外した時に動いたら、読み込んでいるjQueryのバージョンが古いという事が考えれます。
asyncの場合はjQuery3.3.1で動きました。


#Uncaught TypeError:Cannot set property 'onclick' of null

原因：基本的に文法エラーまたは記述箇所のミス
解決：文法エラーがないか確認。bodyコンテンツの最下部に記述。

プログラミングは基本的にコードは上から順に読み込むので、
head要素にコードを書き読み込むとbody要素とその子孫はまだ取得できないのでエラーになります。

head要素に書かず、body要素の最後にコードを書く

onclickの結果は「該当要素なし」としてnullになり、

Uncaught TypeError: Cannot set property 'onclick' of null at test.js:12と

コンソールに出力されます。しかし、body要素の最後であれば、全てのHTMLを読み込んだ後なので、
情報を取得してイベントを発生させることができます。
【macOS Big Sur】JetBrains製のIDEがタブ表示されて困っている人へ

フルスクリーンでJetBrains製のIDEを開いた時などに、いちいちタブ表示になってしまっている場合

## TL;DR.
- 「システム環境設定」 → 「一般」 → 「書類を開くときはタブで開く」 → 「しない」
   ![スクリーンショット 2020-11-28 6.22.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165108/d6edc19f-2839-7db2-861e-18b93dc341f0.png)

ポップアップ表示などでいちいちタブ表示になってしまう人は、これで元の設定に戻すことができます
（GUIでブランチ作成する時とかいちいちタブ表示になってUXめっちゃ悪い）

## 参考
- [Macで「プレビュー」の1つのウインドウに複数のファイルを表示する - Apple サポート](https://support.apple.com/ja-jp/guide/preview/prvw1085/mac)
Python。バックスラッシュでも、さすがに、識別子は複数行に分割できません。

#概要
Python。バックスラッシュでも、さすがに、識別子は複数行に分割できません。
リファレンスにその旨書いてますが、、、
ぱっと、そう読めないかもしれないので、記事にします。

#リファレンスの記載

以下、リファレンス

https://docs.python.org/ja/3.6/reference/lexical_analysis.html

引用。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/342207/cee1af82-11d5-7323-877f-c6ee740b9bf7.png)

テキストとして引用すると、

>バックスラッシュが文字列リテラル中にある場合を除き、バックスラッシュの後ろにトークンを継続することはできません (すなわち、物理行内の文字列リテラル以外のトークンをバックスラッシュを使って分断することはできません)。

**んんんん。これで、識別子を割れないと、ぱっと理解できるかな？？**


#念のため、識別子をわってみた。


```
>>>
>>> abcd = 1
>>> efgh = 1000
>>> ijkl = abcd +\
... efgh
>>> ijkl
1001
>>>
>>>
>>>
>>>
>>> ijkl = ab\
... cd+efgh
  File "<stdin>", line 2
    cd+efgh
     ^
SyntaxError: invalid syntax
>>>
>>>
```

**SyntaxError: invalid syntax**になります。


#まとめ
特にありません。
ちょっと、手間取ったので、記事にしてみました。（同じ症状の人に役立つことを期待して。。。）
コメントなどあれば、お願いします。:candy:
**当然、識別子を複数行に割りたいわけではないです。ルールを確認したいのと、そのルールをリファレンスとかから、さっと読み取りたい、という一般的な観点です。**
4つの条件から判定する関数

4条件と銘打ったが、
厳密に言うと今回の例は2条件＋2条件に分けることができた。
![図5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281933/ed49558f-73c5-d7d8-3ba5-cc06f0f2afda.jpeg)
純粋な4条件の場合、
最終的に要素数総当り分の配列が必要になってくるので
要素を分解できないか考えるの大事だなーという話

今回の例は

- i1,i2からo1
- タイプ,i3からo2
- o1,o2からo

という3段構成


## 1つ目
入出力表と判定表を作る
![図1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281933/d81a32a6-f061-c38c-4be0-7ac33965c3b7.jpeg)![図2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281933/4fd0cab5-1299-4e0d-5f7e-8bbf292dbd92.jpeg)

入出力表の関数はこう
![図6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281933/232aa7dc-738c-2c7f-517c-ee7d9a84fa68.jpeg)


## 2つ目
入出力表と判定表を作る
![図3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281933/40419641-8037-2d3a-c619-c48c27906cb5.jpeg)![図4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281933/10f36daf-542b-3e47-f4b2-246a827cb169.jpeg)

入出力表の関数はこう
![図7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281933/d2652b2d-7f73-0fbb-8d7f-f8f98ea0e5d7.jpeg)
`VLOOKUP関数`の`検索方法`を`近似一致`にすると区間判定ができるので
多段`IF関数`を長々と書く必要もなければVBAで`Select文`を構える必要もない。

## 2つの出力を文字列結合
最終的には完成形の入出力表にまとめる。
関数は`&`で結合するだけ。
![図8.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/281933/435e5e49-a643-6783-8d40-c50c8e0c4502.jpeg)
あとは好みでプルダウンメニューなど追加すれば完成。
Godot Engine - 実行時にノードをシーンとして保存する

# 環境
- Windows10 home
- Godot Engine v3.2.3.stable.mono.official

# 手順
1. 親ノードに以下スクリプトをアタッチ
2. 実行
3. デバッグダイアログを閉じる
4. シーンが保存される

# 使い道
- 自動生成ダンジョンなどの保存
- インポートした素材などの保存

# スクリプト
```gdscript
(例: 子ノードを保存する)
extends Node

func _ready() -> void:
    var child = get_child(0)
    var path = "res://sample/" + child.name + ".tscn" # 指定ディレクトリが存在しなければエラー
    var ps = PackedScene.new()
    ps.pack(child)
    ResourceSaver.save(path, ps)


(例2: 最下層の子ノードを全て保存する)
extends Node

func _ready() -> void:
    for i in range(get_child_count()):
        var child = get_child(i)
        SaveNode(child)

func SaveNode(child: Node) -> void:
    var count = child.get_child_count()
    if (count > 0):
        for i in range(count):
            SaveNode(child.get_child(i))
    else:
        var path = "res://sample/" + child.name + ".tscn"
        var ps = PackedScene.new()
        ps.pack(child)
        ResourceSaver.save(path, ps)
```

# 参考  
https://godotengine.org/qa/903/how-to-save-a-scene-at-run-time
深層学習とかでの、「帰納」「演繹」、由来等が調べにくかったので、表にまとめた。演繹は中国語、帰納は日本語かな。

#概要
（タイトルの通り）

#結果

||■演繹|備考|
|:---|:---|:---|
|1|英語||
||deduction|帰納は、Induction。このinとdeの対比は、日本語の漢字に比して、スキっとしています。|
|2|意味の説明 by Wikipedia※1||
||演繹（えんえき、英: deduction）は、一般的・普遍的な前提から、より個別的・特殊的な結論を得る論理的推論の方法である。||
|3|漢字の由来（成語由来）|
||『「演繹」は、中国の思想家・朱熹(しゅき)が書いた文章から使われるようになった言葉です。』※2|中国由来です。帰納は、下記の表のとおり、**そうじゃないです。**|
|4|帰納法、演繹法とかの文脈で使われた最初||
||『この「帰納」と「演繹」という言葉は、現在でも使われている語ですね。これは、西先生が訳したものだと言われています。この「百学連環」講義の数年後、明治7年に刊行した『致知啓蒙』でも、一旦は「鉤引〔deduction〕」「套挿〔induction〕」と訳した上で、「演繹」「帰納」としています。』※3||
|5|帰納、演繹がどっちがどっちかの覚え方（私見）||
||演繹の「演」の演じるという文字で、方向性を感じれませんかね。|(ちょっと、弱いですね。こんがらがりそう。。。）|

※1 出典：  https://ja.wikipedia.org/wiki/%E6%BC%94%E7%B9%B9
※2 出典：  https://gimon-sukkiri.jp/deduction/
※3 出典：  https://dictionary.sanseido-publ.co.jp/column/100gaku85

||■帰納|備考|
|:---|:---|:---|
|1|英語||
||Induction|演繹は、deduction。このinとdeの対比は、日本語の漢字に比して、スキっとしています。|
|2|意味の説明 by Wikipedia ※5||
||帰納（きのう、英: Induction、希: επαγωγή（エパゴーゲー））とは、個別的・特殊的な事例から一般的・普遍的な規則・法則を見出そうとする論理的推論の方法のこと。||
|3|漢字の由来（成語由来）|
||『この言葉は、明治時代の日本で、英語の訳語として作り出された言葉です。』※4|**演繹と違って**日本語漢字というか、中国由来じゃないみたいです。|
|4|帰納法、演繹法とかの文脈で使われた最初||
||(演繹にも同じことを記載しました。再掲。）『この「帰納」と「演繹」という言葉は、現在でも使われている語ですね。これは、西先生が訳したものだと言われています。この「百学連環」講義の数年後、明治7年に刊行した『致知啓蒙』でも、一旦は「鉤引〔deduction〕」「套挿〔induction〕」と訳した上で、「演繹」「帰納」としています。』※3||
|5|帰納、演繹がどっちがどっちかの覚え方（私見）||
||帰納の「納」の納めるという感じで方向性を感じとれませんかね。|(ちょっと、弱いですね。こんがらがりそう。。。）|

※4 出典： https://gimon-sukkiri.jp/deduction/
※5 出典： https://ja.wikipedia.org/wiki/%E5%B8%B0%E7%B4%8D



#参考にした記事
https://gimon-sukkiri.jp/deduction/
https://dictionary.sanseido-publ.co.jp/column/100gaku85
React classコンポーネントから関数コンポーネントにModalを変換する

##今回使用するModalはこちら。
[デモサイトはこちら](https://chenjiahan.github.io/rodal/)


##クラスコンポーネントでの書き方

```react:modal.jsx
import React from 'react';
import Rodal from 'rodal';
// include styles
import 'rodal/lib/rodal.css';
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: false };
  }
  show() {
    this.setState({ visible: true });
  }
  hide() {
    this.setState({ visible: false });
  }
  render() {
    return (
      <div>
        <button onClick={this.show.bind(this)}>show</button>
        <Rodal visible={this.state.visible} onClose={this.hide.bind(this)}>
          <div>Content</div>
        </Rodal>
      </div>
    );
  }
}
```

関数コンポーネントでは、thisは使用できない。
パーツに分けて変換していこう！

###①Stateパーツ

【classComponent】this.state === 【functionComponent】 State

```react:classComponent.jsx
 constructor(props) {
    super(props);
    this.state = { visible: false };
  }
```
```react:functinComponent.jsx
 const [visible,setVisible] = useState(false);
```

###②handleパーツ
【classComponent】 this.setState === 【functionComponent】 handle

```react:classComponent.jsx
show() {
    this.setState({ visible: true });
  }
  hide() {
    this.setState({ visible: false });
  }

```

```react:functinComponent.jsx
   const modelHandleOpen = () => {
    setVisible(true);
  }
  const modelHandleClose = () => {
    setVisible(false);
  }
```
###③Contentsパーツ

```react:classComponent.jsx
 <button onClick={this.show.bind(this)}>show</button>
   <Rodal visible={this.state.visible} onClose={this.hide.bind(this)}>
     <div>Content</div>
   </Rodal>
```
```react:functinComponent.jsx
  <button className="navItemPopUp" onClick={modelHandleOpen}>アバウト<br/>
      <span><InsertEmoticonIcon/></span></button>
      <Rodal visible={visible} onClose={modelHandleClose}>
          <div>プロフィールの内容</div>
      </Rodal>
```
rails db:migrateでalready existsというエラーの対処方法

rails g modelでモデルを作った後、<strong>rails db:migrate</strong>したらエラーが出たのでその時の対処法をメモしておきます。
#エラー内容
```
--------------------------------------------------------------------------
rails aborted!
StandardError: An error has occurred, all later migrations canceled:

Mysql2::Error: Table 'notifications' already exists: CREATE TABLE `notifications` (`id` bigint NOT NULL AUTO_INCREMENT PRIMARY KEY, `visiter_id` int NOT NULL, `visited_id` int NOT NULL, `post_id` int, `comment_id` int, `action` varchar(255) DEFAULT '' NOT NULL, `checked` tinyint(1) DEFAULT FALSE NOT NULL, `created_at` datetime NOT NULL, `updated_at` datetime NOT NULL)
--------------------------------------------------------------------------
```
もうすでにこのファイルは存在していると言われているみたいです。
1回モデルを消したときにテーブルが残っていたのかも？
#対処方法
最初にモデルを削除します

```
$ rails destroy model Notification
```
次にテーブル削除のために削除用のmigrationファイルを作成します(ファイル名はなんでも良いです)

```
$ rails generate migration drop_table_notifications
```
作成したmigrationファイルにテーブル削除を記述する

```
class DropTableNotifications < ActiveRecord::Migration[5.2]
  def change
    drop_table :notifications
  end
end
```
最後にマイグレーションを実行します

```
$ rails db:migrate
```
これでちゃんとテーブルも削除できて、無事モデル作成後、rails db:migrateも通りました！

#参考にした記事
https://note.com/oreno/n/n45f8208ade29
とても分かりやすかったです！ありがとうございました！
[iWork]Apple Pagesのファイル形式を解析してみた その2

#Protocol Bufferとは
Protocol BufferはGoogleによるスキーマ言語の一種で、簡単にいえばバイナリベースのXMLみたいなものである。XMLと同様、こういうふうに書けよ、という`.proto`ファイルと実際に受け渡しされるバイナリーデータの二種類が存在する。
バイナリーデータの方はそのままの状態では読めたものじゃないのでこれまたデコードを必要とする。
デコードをprotocコマンドを使ってやろうとしたがうまくいかなかった。
Macだとprobuf Viewerというのがあるのでそれで見ることができる。
https://apps.apple.com/jp/app/protobuf-viewer/id1165908879?mt=12
.protoファイルはリバースエンジニアリングされている。
https://github.com/obriensp/iWorkFileFormat/tree/master/iWorkFileInspector/iWorkFileInspector/Messages/Proto
# Snappy圧縮の仕組み
iwaで用いられている圧縮方式。チェックサムが利用されていないなど、通常の圧縮方式とは違う様式である。
snzipコマンドで`-t iwa`と指定すれば見ることができる。
+ 古い形式ではIndexディレクトリがIndex.zipになっているが、最新のものではなっていない。
+ 暗号化されたファイルの読み込みなんかはどうやるんだろう。
とにかく短期間でPythonを一通り学びたい人におすすめのUdemyのPython講座(初級編)

##はじめに
今回はPythonでの開発に興味を持っている初心者の方に向けての記事になります！
自分は下記のワークフローをすすめることでおおよそ2週間ほどで簡単なpythonのコードを書けるようになりました！
是非ご参考にしてください。
##ワークフロー(初級編)
###1.Youtube
まずUdemyといいたいところですが、Youtube等でざっと概要掴むのもいいのかなと思っています。
おすすめは下記動画になります。キノコードさんも,いまにゅさんもかなりの量のpythonの動画を作成されているので、見始めたらそのまま無料でひたすら勉強し続けるという選択肢もあるのかなと思っています。

キノコードさんの動画
https://www.youtube.com/watch?v=xuAOomwQxbk
いまにゅさんの動画
https://www.youtube.com/watch?v=rPCm-v_W4Ng

###2.Progate
ここでもUdemyといいたいところなのですが、個人的にはまずprogateだと思っています。
Udemyの講座でもいいのですが、開発環境だったり色々合わせる作業が必要になる、
且つそこそこUdemyの講座は難しい(個人の感想)のでProgateの講座を進めていきましょう。
自分はドットインストールはやったことがないので、人によってはドットインストールをおすすめする方はいるかもしれないです。

###3.Udemy
やっとUdemyです。まずここまででPython固有の書き方などは軽く一周できた状態だと思っています。
ここからは簡易的な復習をしつつ少し発展的な内容に入っていくのがいいと思っています。
個人的にはデータ解析や、データベースとの接続だったりは中級以降の内容だと思っているので、クラスの継承やデータ構造までを勉強できれば初級は完了だと思っています。
初級が終わった時点で試しにスクレイピングのコードを作成するのがいい成功体験になるのではないかと思っています。
では具体的に自分が受講したUdemy講座で初心者の方におすすめの講座を紹介していきます。

##受講したUdemy講座
ここでは実際自分が受講した講座の中でも初心者の方におすすめの講座を紹介していきます。
###現役シリコンバレーエンジニアが教えるPython 3 入門 + 応用 +アメリカのシリコンバレー流コードスタイル
この講座に関しては初心者の方以外でもおすすめできます。初心者の方はセクション9までを一通りすればいいと思います。そのセクション以降は発展的な内容に進んでいくので、理解が追いついていない状態ですすめるのはあまりおすすめできません。
####講座URL
https://www.udemy.com/course/python-beginner/learn/lecture/8304808#overview
####良かった点
とにかくわかりやすいです。実際に講師の方がライブコーディングするのを見ながら勉強をすすめることができます。動画を見てローカルで自分でも実行してみての繰り返しはかなり勉強になると思います。
28.5時間と費用に対して、破格の内容ですので、是非一度ご覧になってください。

###Python で学ぶアルゴリズム とデータ構造（初級編）【丁寧な解説+Python 実装でアルゴリズム の基本を学習】
####講座URL
https://www.udemy.com/course/python-algorithm-beginner/learn/lecture/14886498#content
####良かった点
タイトル通り初級と書かれているので初心者向けです。そこまで長い講義ではないですが、Pythonでアルゴリズムを作成してみたい方には入門の講義としてハードルが高すぎないよくできた講義になっていると思います。

###現役シリコンバレーエンジニアが教えるアルゴリズム・データ構造・コーディングテスト入門
####講座URL
https://www.udemy.com/course/python-algo/learn/lecture/20174116#overview
####良かった点
これは最初に紹介した方の別動画になります。
様々なアルゴリズムを動画を見て手を動かしながら学ぶことが可能です。
こちらもかなりボリュームがある講座で、且つそこまで難しすぎないのでおすすめです

###Python / Flask 人工知能 超入門 - Python 人工知能 API を使った LINEbot を作ろう
####講座URL
https://www.udemy.com/course/draft/2655334/learn/lecture/17596622#overview
####良かった点
ここでは初めてpythonのフレームワークを使ってみます。
講義自体は２時間程度でwebアプリを自分で作ってみて、且つモダンな技術に少し触れてみるいい機会になるのではないでしょうか

###PythonによるWebスクレイピング 〜Webアプリケーション編〜
####講座URL
https://www.udemy.com/course/python-scraping-application/learn/lecture/14545346#overview
####良かった点
紹介する最後の講座になります。おそらくここまでできたらPythonの勉強も初級を終え、中級に移ったと言えるのではないでしょうか。ここではデータ構造の復習をしながらスクレイピングについて学んでいけます。
スクレイピングの技術を学んでいくとPythonの中級程度の勉強をすすめる際のデータセットを自分で作成できたり、簡単なスクレイピングの仕事であればご自身でも取れるようになるかと思います。

##環境設定
実際にどう入れるかとかは動画だったり他の教材で出ると思うのでこれは個人の好き嫌いがありますが、
私はvscode上でpython、jupyternotebookをローカルにインストール後、
xx.ipynbというファイル形式でvscodeでjupyternotebookの開発環境を設定することがおすすめです。
動画教材ではpycharm等使うのですが、まず有料なのと、それになれたら便利すぎて戻れなくなってしまったり、普段使っているエディタと違ったりするのが面倒なので、もともと使っているエディタで完結できるのが理想だと思っています。

##最後に
pythonは楽しいものです!
私はかなりおすすめします!
楽しんでやることがなによりだと思っているので道中も楽しんで学んでいきましょう
以上初心者の方におすすめのUdemy講座でした！

##追記
現在私は個人事業主として下記のサイトの事業を取り進めております。(サイトはまだ作成して間もないのでまだガタガタです、、)
ホテルの自動チェックインのラインでの実装や、rpaの制作をメインに進めています。
ビジネスでのLineBotのご活用や作業の自動化等にご興味があれば是非ご連絡ください。何卒よろしくお願いいたします。

####サイト:
https://senren.work/
####メディアに取り上げていただいた記事:
https://ascii.jp/elem/000/004/033/4033137/
####メール:
info@senren.work
Word2vecを超高速..、いや爆速化。（magnitudeです）

といったものの、word2vecではいくら工夫しても処理に時間がかかってしまいます。
word2vecを使ったwebアプリを制作してるんですが、ローディングに14秒ほどかかります。辛い。

```python
model.wv.most_similar(positive=['cat']) 
# これは猫の似てる言葉を探すやつ。
```
情報源：https://ssabcire.hatenablog.com/entry/2019/11/09/195459

なので、word2vecってやつから、magnitudeってやつに乗り換えます。
Sqliteの構造を利用されているらしい（？）MySQLとか独自の構造持ってて早いですもんね。
これは、magnitudeのgithubには以下のように書かれてます。

```
...これは主に、Gensimのよりシンプルで高速な代替手段となることを目的としていますが、...
```

こちらのブログを読みましたが、[Embeddingを高速に取り出すMagnitude](https://kamujun.hatenablog.com/entry/2019/02/28/160616) なんか早いっぽい？笑
なんでとりあえずやってみよう！
→[magnitudeのドキュメント](https://github.com/plasticityai/magnitude)

# wikipediaのword2vec学習モデルをmagnitude用に変換。
magnitudeでは、word2vecで使う.binで終わるデータが使えません。
.magnitudeで終わる専用の形式に変換が必要です。

今回は、これを使います。
[日本語 Wikipedia エンティティベクトル](http://www.cl.ecei.tohoku.ac.jp/~m-suzuki/jawiki_vector/)！

これをダウンロードして解凍したら「entity_vector.model.bin」が手に入ると思います。これをmagnitude用に変換。
macのターミナルにこれを入力しましょう。

```
python -m pymagnitude.converter -i (ダウンロードしてきた変換したいbinファイル) -o (変換した後の保存場所。最後に適当に.magnitudeついたファイル名をつけてあげましょう。)
```
↓例えばこんなイメージ

```
python -m pymagnitude.converter -i /user/yamakaz/test/entity_vector.model.bin -o /user/yamakaz/test/hozon/new.magnitude
```

情報源: [magnitudeのドキュメントの下のほう](https://github.com/plasticityai/magnitude)

# エラーが出た方へ。
mac catalinaでやってましたが、annoyってやつと、xcodeをインストールしてないとこれはできないみたいでした。
他にもいろいろ足りない方は多分エラー出るので、エラーしっかり読んで１つ１つインストールしていきましょう。
ちなみに、annoyのインストールと、Xcodeのインストールだけ書いときます。（Xcodeのがないとannoyが入りませんでした。）

```
xcode-select --install
```
情報源：[macOSアップデート後の『xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools)...』の対処法](https://qiita.com/nishina555/items/e23d73067a5cac182a63)

```
pip install annoy
```

# 変換待機...´∀｀

そしたら変換が始まります。かかるよ〜。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276138/24514187-d7b8-4ebd-88d5-d865a5b18522.png)

でけた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276138/58553979-b9a0-19c6-9364-b5056661e0a6.png)


# 使ってみる

```test.py
# magnitudeを準備。
from pymagnitude import *
vectors = Magnitude("/entity_vector/wiki.magnitude") # ← さっき変換したデータ

# 似てる言葉を1000個探し、resultsに取得した配列を突っ込む。
results = vectors.most_similar(u'松本人志', topn = 1000)

# resultsを表示。
for result in results:
    print(result)
```

##### （注意!!! 初回ロード時だけめっちゃ時間かかります。エラー出たのか、なんかバグったのか焦りますけどひたすら待ちましょう。）
で..できた！！！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276138/1b5ed77d-7960-d437-208f-54228593c64b.png)

や、やば...早すぎ。
word2vecで14秒くらい処理に時間がかかっていたのに、2,3秒になりました。
すごい。作った人天才です。

ぜひ使いましょう！
RPGツクールMZでピクチャの原点を右上に指定する方法

原点を右上に指定すると、たとえば
公式プラグインの「TextPicture.js」を使うときに
下記画像のように文字を右寄せで表示できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/915492/78f9c046-fb7c-1c1d-d848-c34985efd05f.png)



#【手順】
1. 「rmmz_sprites.js」を開きます。
1. 「Sprite_Picture.prototype.updateOrigin」の関数を以下のように書き換えます。
 
```js
Sprite_Picture.prototype.updateOrigin = function() {
    const picture = this.picture();
    if (picture.origin() === 0) {
        this.anchor.x = 0;
        this.anchor.y = 0;
    } else if (picture.origin() === 1){
        this.anchor.x = 0.5;
        this.anchor.y = 0.5;
    } else if (picture.origin() === 2){
        this.anchor.x = 1;
        this.anchor.y = 1;    
    }
};
```
3.RPGツクールMZの画面を開き、イベントコマンドなどから以下の形式でスクリプトを記述します。

```js
$gameScreen.showPicture(番号,"画像の名前",原点,x座標,y座標,拡大率(幅),拡大率(高さ),不透明度,合成方法)
```
入力例

```js
$gameScreen.showPicture(1,"画像Ａ",2,100,100,100,100,255,0)
```

#【この改造をするメリットの例】
 公式プラグインの「TextPicture.js」を使うときに文字を右寄せで表示できるようになります。

#【注意点】
この改造をしてもエディタの「イベントコマンド」の「ピクチャの表示」からは、<br>原点を右上に設定はできません。<br>スクリプトでピクチャを表示する必要があります。

#【その他】
記事の内容の正確性は保証できません。
内容は読者自身の自己責任の基にご利用ください。
DYNAMIC_(MULTICAST_)DELEGATEにC++からバインドする

小ネタです。
UE4のデリゲート(≒イベントディスパッチャー)は大きく分けて2種類あります。

###ネイティブコードを主にバインドすることを前提としてる
`DELEGATE`
`MULTICAST_DELEGATE`

###ブループリントの関数を主にバインドすることを前提としている
`DYNAMIC_DELEGATE`
`DYNAMIC_MULTICAST_DELEGATE`

です。前者をネイティブデリゲート、後者をダイナミックデリゲートと呼ぶことにします。
前者は**ラムダ式など柔軟かつ多彩な形で関数を登録できる**のに対して、後者はBindUFunctionのように**UnrealEngineのリフレクションを経由したアクセス**しかできません。

稀にダイナミックデリゲートに対してネイティブの関数をバインドしたくなる時があります。
今回の記事はこれに関する簡単なTipsです。

#UFUNCTION宣言されていればネイティブ関数を登録できる
このような感じでUFUNCTIONとして宣言されている関数であれば、

```c++
	UFUNCTION()
	void OnLevelUnloaded();
```

以下のような形で関数名をFName型にしたもので登録することができます。

```c++

	FScriptDelegate Delegate;
	static const FName OnLevelUnloadedFunction(TEXT("OnLevelUnloaded"));
	Delegate.BindUFunction( this, OnLevelUnloadedFunction );
	UnloadLevel->OnLevelUnloaded.Add(Delegate);
```

#ペイロード(追加のデータ)を乗せたい！
単純に関数を呼び出すだけであればこれで問題ないのですが、やはりデリゲートにたいして追加のペイロードを乗せたくなる時があると思います。
ネイティブデリゲートであればラムダのキャプチャなどによって超簡単にペイロードを乗せることができますが、
(キャプチャとは[]の中の部分です)

```c++
	FCoreDelegates::GetPakEncryptionKeyDelegate().BindLambda([DefaultKey](uint8 OutKey[32]) { FMemory::Memcpy(OutKey, DefaultKey.Key, sizeof(DefaultKey.Key)); });
```

ダイナミックデリゲートではそうはいきません。
対策として中間のオブジェクトを用意することで疑似ペイロードを再現します。

```c++
UCLASS()
class ULevelUnloadHelper : public UObject
{
	GENERATED_BODY()
public:
	UPROPERTY()
	ULevelStreaming* Level;
	UFUNCTION()
	void OnLevelUnloaded();
};
```

バインドする時は、中間のオブジェクトを作成してからパラメータをセットし、
その中間オブジェクトをデリゲートに登録します。
重要な点としては、**BindUFunctionの第一引数で渡されるオブジェクトはTWeakObjectPtrで保持されることに注意する必要があります**。
登録してから呼び出すまでにGCに回収されないようにAddToRootを呼び出しています。

```c++
	ULevelUnloadHelper* helper = NewObject<ULevelUnloadHelper>();
	helper->Level = UnloadLevel;
	helper->AddToRoot();

	FScriptDelegate Delegate;
	Delegate.BindUFunction(helper, FName(TEXT("OnLevelUnloaded")));
	UnloadLevel->OnLevelUnloaded.Add(Delegate);
```

登録したデリゲートが読みだされたら、中間オブジェクトに対してRemoveFromRootを呼び出し、GCで回収できるようにしておきましょう。

```c++
void ULevelUnloadHelper::OnLevelUnloaded()
{
    RemoveFromRoot();
    Level->SetIsRequestingUnloadAndRemoval(true);
}
```

※もしデリゲートが呼び出されないケースがある場合、AddToRoot設定が残りメモリリークの可能性があります。
安全なタイミングでTObjectIteratorなどを回し、不運にも残ってしまったオブジェクトに対してRemoveFromRootを呼び出す必要があるかもしれません。

#まとめ
 - ダイナミックデリゲートにはUFUNCTION定義すればネイティブの関数を名前でバインディングできる！
 - `obj TRYGC` でコンソールコマンドから即座にGCが呼び出せる。 詳しくはこちら→[[UE4] Objコマンドによるオブジェクト解析](https://qiita.com/donbutsu17/items/dd9e00bee27d6868ed3d)
 - ダイナミックデリゲートに渡すUObjectは弱参照ということを覚えておく。(←これが言いたかっただけ)
[Android]HomebrewでAndroidSDKをインストールする。

- Mac利用者で、`Homebrew`を利用してソフトウェアを管理している方、`AndroidSDK`も`Homebrew`で管理したい方向けです。

## `android-sdk`のインストール

- インストール方法は以下です。

```
$ brew install android-sdk
```
## `platform-tools`のインストール

- `Homebrew Cask`に`platform-tools`という`Formulae`がありそちらからもインストールできますが、先ほどインストールした`android-sdk`に付属している`sdkmanager`を利用してインストールします。
- `android-sdk`は不要で、`adb`や`fastboot`を利用したい場合、`platform-tools`単体でインストールすることも可能です。 そのため独立した`Formulae`が用意されているのでしょう。
- [SDK Platform-Tools リリースノート  |  Android デベロッパー  |  Android Developers](https://developer.android.com/studio/releases/platform-tools?hl=ja)に以下の記載があるように、`sdkmanager`でインストールしましょう。  

> Android デベロッパーは、最新の SDK Platform-Tools を Android Studio の SDK Manager から、または sdkmanager コマンドライン ツールから取得する必要があります。

- `Android Studio`や`intellij`は`sdkmanager`でインストールした`platform-tools`が利用されます。
- インストール方法は以下です。

```
$ sdkmanager platform-tools
```
- また、インストールした`platform-tools`のパスを`zprofile`や`zshrc`などお好みの方法で通します。

```
$ export PATH=/usr/local/share/android-sdk/platform-tools:$PATH
```
- これで`adb`や`fastboot`が利用できるようになっているはずです。

## 任意の`SDK Platform`のインストール

- 以下のようにコマンドライン上で任意の`SDK Platform`をインストールしておくことで`Android Studio`や`intellij`などのIDE側で`android-sdk`として認識してもらえるようになります。

```
$ export sdkmanager platforms;android-33
```

## 以上

- これで以上になります。`Android Studio`や`intellij`などのIDEに以下`android-sdk`のパスを設定することで`Homebrew`でインストールした`android-sdk`を利用して開発を行うことができます。

```
/usr/local/share/android-sdk
```
ターミナルの出力結果をテキストに出力する

### 0.背景
ターミナルで出力した結果をテキストに出力できたら便利だと思い、まとめました。

### 1.使用環境
- mac.os バージョン10.15.6
- Ruby2.6.6

### 2.実際やってみる
Rubyのバージョンを追加する際にインストール可能なバージョンを確認したいと思い、
`rbenv install --list-all`を実行したところ、見切れてしまいました。
<img width="400" alt="ターミナル.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689555/725bc1d3-aad1-8682-3c06-5fdb990af3c9.png">
新たにインストールを行う、2.5.1のバージョンを探していますが見当たりません。
※rbenvとは、`Rubyのバージョンを簡単に切り替えてくれるツール`のことです。
参考リンク：[rbenvの使い方と仕組みについて](https://qiita.com/Kodak_tmo/items/73147ed4f0eec54d6e94)

そこで下記のサイトを元に出力してみました。
[[Tool] Mac標準コマンドで出来る！ターミナルの出力結果をテキストファイルにも保存する方法](https://www.yoheim.net/blog.php?q=20120818)

```
$ script sample.txt           #ファイル名を指定する
$ rbenv install --list-all    #実行したい処理
...
$ exit　                      #書き出しを終了
```
実行すると`sample.txt`の名前でテキストに出力できたことが分かります。
無事探していた**2.5.1**も見つかりました。

<img width="400" alt="sample.txt.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689555/0c6b86de-c6fb-23f4-e584-fba22dd29a98.png">

### 3.どこに保存されているのか？
先ほどのコマンドは保存場所を指定していません。ではどこに保存されているのか？というと
`ホームディレクトリ`に保存されます。ホームディレクトリはmacの場合、Finderを開いて`Shift + command + H`で飛べます。

#### （2025.3.6追記）
以前はホームディレクトリに保存されていましたが、作業ディレクトリで保存されていましt。
ホームディレクトリでテキストファイルが見つからない場合は、作業ディレクトリでもご確認ください。

#### 補足：ファイル名を指定しない場合
ファイルを指定しない場合、`typescript`に保存されます。
参考リンク：[Linuxコマンド【script】](https://webkaru.net/linux/script-command/#:~:text=script%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89,-%E6%9B%B8%E5%BC%8F&text=script%E3%82%92%E5%AE%9F%E8%A1%8C%E3%81%97%E3%81%A6,typescript%E3%80%8D%E3%81%AB%E4%BF%9D%E5%AD%98%E3%81%95%E3%82%8C%E3%81%BE%E3%81%99%E3%80%82)
`typescript`もホームディレクトリに保存されます。
<img width="400" alt="screen typescript.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689555/3335cba3-f072-2f55-ad8c-c8aff36277f0.png">


### 4.応用先
`Gitでlogを出力したいとき`など、いろんなところで活用できるのではないかと思います。
読んで頂き、ありがとうございました。
Juliaのshellモードや外部プロセス(Windows)

Running External Programs
https://docs.julialang.org/en/v1/manual/running-external-programs/
にて、つまずいたので。


```julia
julia> mycommand = `echo hello`
`echo hello`

julia> typeof(mycommand)
Cmd

julia> run(mycommand);
hello
```
マニュアルでは上のようになっているが
`run(mycommand);`でうまくいかない。

```julia
julia> run(mycommand);
ERROR: IOError: could not spawn `echo hello`: no such file or directory (ENOENT)
Stacktrace:
 [1] _spawn_primitive(::String, ::Cmd, ::Array{Any,1}) at .\process.jl:99
 [2] #585 at .\process.jl:112 [inlined]
 [3] setup_stdios(::Base.var"#585#586"{Cmd}, ::Array{Any,1}) at .\process.jl:196
 [4] _spawn at .\process.jl:111 [inlined]
 [5] run(::Cmd; wait::Bool) at .\process.jl:439
 [6] run(::Cmd) at .\process.jl:438
 [7] top-level scope at REPL[29]:1
```
となってしまう。

https://github.com/JuliaLang/julia/issues/23597
によるとシェルモードを扱うのにgit bashを組み込んでいるのが問題みたい？？？

`cmd /c echo hello`でうまくいきます。

```julia
julia> mycommand = `cmd /c echo hello`
`echo hello`

julia> run(mycommand);
hello
```
DHCP の基本設定について纏めてみた

# dhcpサーバー

## dhcpd.conf

|dhcpd.confの設定項目|説明|
|---|---|
|option domain-name|ドメイン名|
|option domain-name-servers|DNSサーバー|
|option routers|デフォルトゲートウェイのIP|
|option subnet-mask|サブネットマスク|
|option broadcast-address|ブロードキャスト|
|option ntp-servers|NTPサーバーのIP|
|option netbios-name-servers|WINSサーバーのIP|
|default-lease-time|クライアントに貸し出すデフォルトリース期限|
|max-lease-time|クライアントから貸し出す期間を要求してきた場合の最大リース期限|
|range|範囲|
|host|クライアントで固定IPアドレスを使用|
|fixed-address|固定で割り当てるIPアドレス|
|hardware|クライアントを特定するためのMACアドレス|

## 設定例

```:dhcpd.conf
subnet 192.168.1.0 netmask 255.255.255.0 {

 option routers 192.168.1.100;
 option subnet-mask 255.255.255.0;
 option domain-name "example.com";
 option domain-name-servers 8.8.8.8;
 option ntp-servers 210.173.160.27;

 range 192.168.1.101 192.168.1.200;
 default-lease-time 21600;
 max-lease-time 43200;

 host subnet {
  hardware ethernet 00:11:22:33:44:55;
  fixed-address 192.168.1.99;
 }
}
```

※ systemctl status dhcpd で、
`WARNING: Host declarations are global.  They are not limited to the scope you dec...hem in`
のように表示された場合。
特定のPCに固定のIPアドレスを割り当てたい時に使う「host」宣言を「subnet」区内に記述すると「Host」宣言はグローバルである。と、ワーニング出力されてしまいます。
一応動作はしますが「subnet」区外(グローバル宣言区)に定義し、dhcpdサービスを再起動すれば出力されなくなります。

## リース期間

dhcpd が現在貸し出しているIPアドレスは、**dhcpd.leases** に記録されています。
このファイルが存在しない場合は、あらかじめ作成しておく必要があります。

```
# touch /var/lib/dhcp/dhcpd.leases
```

# dhcpクライアント

CentOS の場合は、次のように設定します。

```:/etc/sysconfig/network-scripts/ihcfg-eth0
BOOTPROTO=dhcp
```

**nmcli** もしくは、**dhclient**

```
# nmcli connection modify ihcfg-eth0 ipv4.method auto
```

```
# dhclient -d ihcfg-eth0
```

# dhcpリレーエージェント

次の例は、ihcfg-eth1 で受け取ったDHCPリクエストを、192.168.0.100 にリレーするようにしています。

```
# dhcrealy -i ihcfg-eth1 192.168.0.100
```

# IPv6の自動設定

IPv6クライアントは、IPv6ルーターに対して、RSを送り、それに対してルーターはRSを返します。
IPv6クライアントは、ルーターからの情報（プレフィックス）と自身のMACアドレスから生成される情報（インターフェースID）に基づいて、IPv6アドレスを生成します。
また、RA発信元のルーターをデフォルトゲートウェイに設定します。
Linuxでは、radvd をを導入することで、RAを送信できるようになります。

```:/etc/radvd.conf
interface ihcfg-eth3
{
 AdvSendAdvert on;
 prefix 2001:db8:0:1::/64
}
```

IPアドレス以外の情報（DNSサーバーのIPアドレスなど）を割り当てる場合は、DHCPサーバーが必要となります。