OmniAICreator/Qiita-1.07M huggingface dataset:
JavaScriptで連想配列入りの2次元配列を作るサンプル

#やりたいこと
JavaScriptで2次元配列を作って、2次元の内1方向を連想配列にする。

#サンプルコード
以下のようにすると、2次元配列の中に連想配列が入るっぽい。

```html:test.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>さんぷる</title>
  </head>
  <body>
    <button type="button" id="testButton">てすと</button>
    <script src="test.js"></script>
  </body>
</html>
```

```javascript:test.js
let twoDimArray = [];
document.getElementById('testButton').addEventListener('click', function() {
  let infoSet = {a: 1, b: 2, c: 3, d: 4, e: 5, f: 6};
  twoDimArray.push(infoSet);
});
```

#結果
以下のコードで内容を確認したのが下の画像なので、なんとなく上手くいってそう。

```javascript:test.js
let twoDimArray = [];

document.getElementById('testButton').addEventListener('click', function() {
  let infoSet = {a: 1, b: 2, c: 3, d: 4, e: 5, f: 6};
  twoDimArray.push(infoSet);
  console.log(infoSet);
  console.log(twoDimArray);
  console.log(twoDimArray[0]);
  console.log(twoDimArray[0].a);
});
```

![WS_000026.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488743/d92296f8-5e43-a555-3222-e50d7f29611f.jpeg)
Docker - Permission Denied when Write Files to Host

# 1. Dockerfile
> I created a normal user JohnnyChu to run the program in docker.
It will write a log file in /data/log inner container and container volume bind the host /foo/log. Now, it will occur permission denied problem.

```dockerfile
# build stage
FROM golang:1.12.9-alpine AS build-env
RUN apk update -qq && apk --no-cache add git gcc g++
COPY . /src/
ARG BUILD_ENV
RUN cd /src && go build -tags ${BUILD_ENV} -o /src/dist/app

# final stage
FROM alpine:3.10.2
WORKDIR /app/
COPY --from=build-env /src/dist/ /app/
RUN addgroup -S JohnnyChu && adduser -S JohnnyChu -G JohnnyChu && chown -R JohnnyChu:JohnnyChu /app/
USER JohnnyChu
EXPOSE 8080
ENTRYPOINT ["./app"]
```

# 2. Run
```
# docker run -v /foo/log:/data/log  ... --name boo ...
```

# 2. Check User UID:GID inner Container.
```
# docker exec -it boo sh
/app $ cat /etc/passwd
...
...
guest:x:405:100:guest:/dev/null:/sbin/nologin
nobody:x:65534:65534:nobody:/:/sbin/nologin
JohnnyChu:x:100:101:Linux User,,,:/home/JohnnyChu:/sbin/nologin <--- UID:100 GID:101
```

# 3. Chown Host's Log Folder
```
# chown -R 100:101 /foo/log
```

# 4. Restart Container
```
# docker restart boo
```

https://stackoverflow.com/questions/29245216/write-in-shared-volumes-docker/
Windows環境のvagrant box add でエラー

急にWindowsでvagrant box addが以下のエラーでできなくなった。

```vagrant
==> box: Box file was not detected as metadata. Adding it directly...
==> box: Adding box 'XXXXX' (v0) for provider:
    box: Unpacking necessary files from: file:///XXXXX.box
==> box: Box download is resuming from prior download progress
    box: Progress: 0% (Rate: 5446k/s, Estimated time remaining: 0:00:50)
An error occurred while downloading the remote file. The error
message, if any, is reproduced below. Please fix this error and try
again.

Failed writing body (16 != 16383)
```

解決策が見つからず困っていたところ、
Cドライブの容量がいっぱいなだけでした。。。

いつか同じ境遇の方の救いになりますように。。。
人気エディタSublime Text3とAtomどちらが良い？

##Sublime Text3の特徴

SublimeText3は無料で使える※テキストエディタです。日本でリリースされたのは2011年のSublimeText 2だそうです。
豊富なプラグインがあり、後述するパッケージを使って機能を自分好みに拡張できます。
自動保存してくれる機能もあり、誤ってウィンドウを閉じてももう一度直前の状態で開き直せます。
見た目はシンプルですが、色味のせいか少し地味な印象もあります。
![sublime.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482202/eeb2532f-1431-1498-8045-1f26f39fd1c1.png)



※有償版もあり、無料で使うと下のような警告メッセージが保存時などに表示されます

![messagepng.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482202/45a7e54f-3c3e-f943-6987-c8bb335a847e.png)



公式
https://www.sublimetext.com/

##Atomの特徴

AtomはGithub開発がしたオープンソースの無料テキストエディタです。
基本設定のままでも、様々な便利機能が付いています。ごちゃごちゃしていないデザインもGood。
デフォルトで様々な言語のシンタックスハイライトに対応しています。

![atomhtml.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482202/8ca15673-fa9a-f246-1bc3-d3d448ac7013.png)


フリーソフトですが、SublimeText3のような「お金払ってね」メッセージが出てこないのは地味に嬉しい。

公式が開発しているのもあって、githubとの連携も可能です。
基本的な部分ははSublimeText3とよく似ていて、パッケージで機能を拡張できます。

公式
https://atom.io/

##比較

比較1　動作の軽さ

|エディタ|評価|備考|
|---|:---:|---|
|SublimeText3|○||
|Atom|△|プラグインなどの利用環境により重くなる可能性あり|

比較2　自動保存

|エディタ|評価|備考|
|---|:---:|---|
|SublimeText3|○|保存せずウィンドウを閉じても復元|
|Atom|×|保存せず閉じると変更は消える|

比較3　日本語対応

|エディタ|評価|備考|
|---|:---:|---|
|SublimeText3|△|PackegeからJapaneseプラグインを入れる必要あり|
|Atom|○|デフォルトで日本語対応|

参考：https://proengineer.internous.co.jp/content/columnfeature/7341




比較4　検索・置換


|エディタ|評価|備考|
|---|:---:|---|
|SublimeText3|◎|多様な検索・置換機能|
|Atom|△|置換や選択の種類、gotoがプラグインを入れないとできないなどのSublimeとの比較で○|

参考：
・https://www.buildinsider.net/small/sublimetext/02
・https://co.bsnws.net/article/180

##まとめ

以上のように、これらのエディタはどちらもフリーで使えるのに有料エディタ並に多機能で便利なことがわかります。
用途や好みもありますが、導入が簡単なので両方試してみるのもいいと思います。

個人的にはSublime Text3が好みです。
（動作が重なったり、誤って未保存のファイルを閉じたりした経験から）


##終わりに

現在では、Visual Studio　Code、Vimなど様々なエディタが出回っています。
当然、サクラエディタなども人気がありますが、Mac非対応なので、Macで開発する場面で不便を感じるケースもあるかもしれません。
その点、Sublime Text3とAtomはWin、Macともに対応している点は安心です。

皆さんも気分転換に普段とは違うエディタを試してみてはいかがでしょうか。


その他参考にさせていただいたサイト

・https://eng-entrance.com/sublimetext-start
・https://www.bunkei-programmer.net/entry/2015/01/17/232841
・https://techacademy.jp/magazine/3060
・https://webliker.info/64198/
【Unity】子の要素をFindを使わずにFor文で取得する。

##はじめに（追記）
**追記 :** コメントでさらにスマートな処理を書いていただいたので、そちらも併せて紹介しておきます。

---

GameObjectをFindで取得するには、当然Findするオブジェクトを指定しなければいけないため、
取得したいオブジェクトの数だけ分が増えます。これが数が増えてくると面倒くさい...。

気付けばこんな事に...
![コメント 2019-08-28 144732.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/421073/100d33a1-b71c-f983-02c8-59a3e2f0817b.png)

これをなんとか解消したいと思い、色々試した結果For文を使って短く、それでいて管理が楽にできたので
記事としてまとめようと思った次第です。

##Script（追記）
**追記 :**追記のスクリプト

```C#:GetChildNext.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class GetChild : MonoBehaviour
{
    public GameObject[] Parents;
    List<GameObject> Paneles;

    void Start()
    {
        Paneles = new List<GameObject>();

        foreach(GameObject p in Parents)
        {
            foreach(Transform child in p.transform)
            {
                Paneles.Add(child.gameObject);
            }
        }

        for(int i = 0; i < Paneles.Count; i++)
        {
            Debug.Log(Paneles[i]);
        }
    }
}
```
この処理では親を1、子を2、子の子を3としたとき、Parentsにセットしている子を取得するので、
1をセットしている場合、2のオブジェクトは取得されるが、3は取得されません。
（下のGetChild.csでも同じです）

3を取得したい場合は2をセットすれば取得できます。

---

```C#:GetChild.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class GetChild : MonoBehaviour
{
    public GameObject[] Parents;
    GameObject Panel;
    List<GameObject> Paneles;

    void Start()
    {
        Paneles = new List<GameObject>();

        for(int v = 0; v < Parents.Length; v++)
        {
            for(int i = 0; i < Parents[v].transform.childCount; i++ )
            {
                Panel = Parents[v].transform.GetChild(i).gameObject;
                Paneles.Add(Panel);
            }
        }

        for(int i = 0; i < Paneles.Count; i++) //確認用の表記
        {
            Debug.Log(Paneles[i]);
        }
    }
}
```
たったこれだけです。

使い方は以下の通りです。

**1、何らかのオブジェクトにアタッチする**
**2、子を取得したい親オブジェクトをParentsインスペクターにセット**
　(Sizeを変更すればセットできる数も増えます）
![コメント 2019-08-28 144732.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/421073/caff63e9-ed59-4ef2-8bd5-6b1a5ad27a6a.png)

##さいごに
この方法を考え付いたのは、インターフェースの記事を見ていて、こういう感じにうまく
まとめられないかなぁ～という漠然とした思い付きで試してみた結果、
「なんかできたわ」という感じでした。

自分の知識量が以前に比べて増えているんだなぁという実感を得られたので良かったです。
この方法が誰かの役に立ちますように。
[バッチ] Tailっぽくログを監視できるバッチファイル

# やりたいこと
アプリなどが吐くログを、テキストエディタでいちいち開かずに、リアルタイムに監視したい。

# やり方
PowerShellの`-Tail`を使う。

# バッチのコード

```MyTail.bat
@echo off
set TARGET="%1"
echo %TARGET% をモニタします。

powershell -NoProfile -ExecutionPolicy unrestricted -Command "Get-Content -Path %TARGET% -Tail 0 -Wait"
```

上記を書いたバッチファイルに見たいログファイルをドラッグしてやると、監視することができる。
Rails 画像アップロード機能の実装方法　メモ

#初めに
railsで画像をアップロードする機能を実装するには、carrierwaveというgemを使う方法があります。
今回、画像を投稿する機能について学習したので、自分なりにまとめておこうと思います。

##使用するgem
###・Carrierwave
画像をアップロードするために必要な機能を追加するためのgem

※Carrierwaveの導入には「ImageMagick」がインストールされている必要があるので、
実装前に以下のコマンドを入力して置くといいかもです。

~~~ターミナル
$ brew install imagemagick
~~~


###・Minimagick
画像に対して、画像同士を合成したり、リサイズしたりと編集することができるようになるためのgem

##実装
では実装に入っていきます。
1.まずは上記の２つのgemを扱えるようにするためGemfileに以下のように追記します。

~~~ruby:Gemfile
gem 'carrierwave'
gem 'mini_magick' #画像に対して処理を行う場合
~~~

2.gemをGemfileに追記したのでターミナルで以下のコマンドを実行します。

~~~
$ bundle install
~~~

3. 次にcarrierwaveを利用するためのアップローダーを作成します。carrierwaveを導入したことで以下のコマンドが利用できるようになったので、ターミナルで実行しましょう。

~~~
$ rails g uploader image　※imageの箇所は任意の名前でOKです。例：pictureなど
~~~

するとapp/uploadersディレクトリ以下にimage_uploader.rbが作成されます。
このファイルに別途記述を行うことで、アップロードの仕方を設定できます。
※設定方法は下記５．以降を参照

4.アップローダーが作成できたので、画像アップロード機能を実装したいモデルに対して編集を行っていきます。

~~~ruby:モデル名.rb
# app/models/モデル名.rb
  mount_uploader :image, ImageUploader
~~~
上記を追記することで、アップローダーを任意のモデルに対して
マウントすることができました。
※マウント
取り付ける、搭載するなどの意味

↑↑↑画像をアップロードする機能のみの場合はここまで↑↑↑

5.アップロードする画像に対して別途処理を行いたい場合は
以下の設定を行います。
3.で行ったrails g uploader imageで作成された
image_uploader.rbを確認し、
include CarrierWave::MiniMagickがコメントアウトされているので、これを以下のように解除しましょう。
コメントアウトを解除することでgem 'mini_magick'を使用することができるようになります。

~~~ruby:app/uploaders/image_uploader.rb
class ImageUploader < CarrierWave::Uploader::Base
  # Include RMagick or MiniMagick support:
  # include CarrierWave::RMagick
  include CarrierWave::MiniMagick
~~~

これでmini_magickの機能が使用できるようになったので
例えば、image_uploader.rbの任意の箇所に以下のコードを追記すると、縦横比を維持したまま、width, heightを800pxにリサイズしアップロードすることができるようになります。

~~~ruby:app/uploaders/image_uploader.rb
class ImageUploader < CarrierWave::Uploader::Base
  # Include RMagick or MiniMagick support:
  # include CarrierWave::RMagick
  include CarrierWave::MiniMagick
  # ~省略~
  process resize_to_fit: [800, 800]
end
~~~

#おわりに
以上がgemのCarrierwaveとmini_magickを使用した画像のアップロード機能の実装になります。
画像の投稿はwebアプリケーションにおいて基本的な機能ですので抑えて置きたいと思います。

###使用したgemのGithub
・Carrierwave
https://github.com/carrierwaveuploader/carrierwave
・mini_magick
https://github.com/minimagick/minimagick
wordpressの固定ページから階層分けして静的ページつくってみた【アップデート対策】

@DaichiSaitoさんの記事「[テーマ内のファイルを静的サイトのように階層分けする方法(WordPress)](https://qiita.com/DaichiSaito/items/df887b3cca78e1f728de)」を勝手に補足してみた記事です。:bow_tone1:


##そっくり真似します
wp-content / themes / twentynineteen（使用しているテーマ）の直下にテンプレート元を作成。
/ member / member.php

```
<?php
/*
Template Name: メンバーページ
 */
```

/ member / page-a / page-a.php

```
<?php
/*
Template Name: ページA
 */
```
/ member / page-b / page-b.php

```
<?php
/*
Template Name: ページB
 */
```

wordpress管理画面→固定ページ→新規追加→右上のネジマーク「設定」→ページ属性：テンプレート
テンプレートの欄を押すとプルダウンで一覧でてくる。
現設定だと「メンバーページ」しか追加されていない。

class-wp-theme.phpを修正

```php
$files = (array) $this->get_files( 'php', 1, true ); //変更前
$files = (array) $this->get_files( 'php', -1, true ); //変更後
```
再度、固定ページのテンプレートを見てみると「ページA」と「ページB」が追加されている。



##補足
コアファイルをいじっているとWordPressアップデート時に上書きされてしまうので対策。
functions.phpに追記

```php

/**
 * 固定ページのテンプレートを下層ファイルも読み込めるようにする設定の際に、wordpress updateで初期値に更新されてしまうため、
 * 対策として文字列'get_files( 'php', 1, true )'が存在するとき'get_files( 'php', -1, true )'に置換する処理。
 */
function class_wp_theme_convert()
{
    $data = file_get_contents('../wp-includes/class-wp-theme.php');

    if (strpos($data, "get_files( 'php', 1, true )") !== false) {
        $data_convert = str_replace("get_files( 'php', 1, true )", "get_files( 'php', -1, true )", $data);
        file_put_contents('../wp-includes/class-wp-theme.php', $data_convert);
    }
}

add_action('init', 'class_wp_theme_convert');
```
とりあえず動けーな実装なので、アクションフックinitは毎回処理呼んじゃってイケてないです、イケてるタイミングのフックに修正してください。


##参考記事
[テーマ内のファイルを静的サイトのように階層分けする方法(WordPress)](https://qiita.com/DaichiSaito/items/df887b3cca78e1f728de)
無料ゲーム（フリーゲーム）の新作公開【ボンバーマン風の爆弾アクションゲーム 全60ステージ】

#BOMBER60（ボンバー60)
![sns.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453200/d0a765d3-81ce-5d85-c982-da0e236129de.png)

今回の自作ゲームは「爆弾アクション」。
スマホ、タブレット、パソコンのメジャーなブラウザに動作対応している、無料ブラウザゲームです。

プログラマーの皆様、作業中の気分転換（現実逃避？）に、プレイして頂ければ幸いです。

##BOMBER60のプレイ動画
![bomber.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/453200/f9cc8fd1-6493-54d7-e5bf-5692cc3bb6ca.gif)

ご覧の通り、**一人プレイ用ボンバーマン** のような雰囲気のゲームです。


BOMBER60はコチラからどうぞ↓
https://hotnews8.net/game/act/bomber60/

この他にも自作ゲームを公開し、Qiitaでご紹介しております↓
https://qiita.com/hotnews/items/47e2bb7af47678d34514


**もし少しでも面白いと思ったら、シェアしてください**
m(_ _)m

---
**追記：**
「ボンバー60」をさらに面白くした「**ボンバーDX（全50ステージ）**」を公開しました。
https://qiita.com/hotnews/items/d738deb4f71861b23976

ボンバーDXは、こちらから遊べます↓
https://hotnews8.net/game/act/bomberDX/
HTML Metadata Scrapping by URLitor

<h1>HTML Metadata Scrapping with <a target="_blank" href="http://www.urlitor.com/web-scraping">URLitor</a></h1>
The tool can scrape a maximum of 100 URLs per time and accepts up to 10 xPath expressions. xPath is a language for finding information in an XML document. xPath uses expressions to select nodes or node-sets in an XML document. 

Scrapping procedure is given below:

<h2>STEP 1:</h2>
Access to the <a target="_blank" href="http://www.urlitor.com/web-scraping">URLitor</a>
Click on "ADD HTML ELEMENT" button to add your desired meta tags you want to scrap.
Meta Tag examples: <i>Page Title, Meta Description, Meta Keywords, Canonical Tag, </i>etc. 

<h2>STEP 2:</h2>
Enter the website URLs separated by Line Feed (Enter) and click on submit to scrap.
Example:
<i>https://www.w3schools.com/html/
https://www.w3schools.com/css/</i>

<h2>STEP 3:</h2>
You will see the extracted Metadata in a table added to the bottom of the page.
Now you can download extracted Metadata by clicking on "Download CSV".
ひさびさのRaspberry Pi 3Bでやったこと(Scratch 3 Desktopインストール)

こちらにあるとおり、Scratch 3 DesktopがRPi3にも入れられるということなので、
ひさびさにRPi3を整備し直すことになりました。

やったことをメモっておこうと思います。

- SDカードに最新のBusterのイメージを焼く
    - Windows端末にEtcherをインストール
    - イメージzipをダウンロード
    - EtcherでSDカードに書き出し（フラッシュ）
- SDカードからRaspbianを起動後、画面をみながら以下初期設定
    - `sudo raspi-config`でSSH有効化。Xの転送も設定([参考](https://www.raspberrypi.org/forums/viewtopic.php?t=27387))
    - `sudo apt-get update && sudo apt-get dist-upgrade`でパッケージ最新化
    - ネットワークアドレスが起動時に分からないとき用にbluetoothでのシリアル接続＆ログインの設定([参考](https://qiita.com/Hiroyuki_OSAKI/items/0387b73f3006e51f4c9a))
    - 持ち合わせの3.5 inchディスプレイが使えるようドライバをインストール([参考](http://www.lcdwiki.com/3.5inch_RPi_Display))

## Raspberry PiにScratch 3 Desktopを入れる

以下でかんたんにインストールできました。

```
sudo apt-get install scratch3
```

さて起動してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96277/04e3a1ea-37f3-5ab1-42d4-ebe4fb34c29d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96277/d4784541-e2df-c326-744d-2e06b04d417c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/96277/77719dc1-2a6c-0ad9-567d-9b52967db2c4.png)
Git入門(リポジトリ作成からプルリクエストまで)

# Git初心者が最低限覚えるべきだと思ったこと

gitを使っていく中で、最低限必要だと思った知識をまとめてみました。

# そもそもGitとは

プログラムソースなどの変更履歴を管理するバージョン管理システム。
簡単に言うと、複数人で作業するときに使うとても便利なもの。

- 他人の作業が可視化される
- 分担して作業がしやすい

# Gitの事前知識

- リポジトリ･･･貯蔵庫（ファイルやディレクトリの状態を保存する場所）
- ローカルリポジトリ･･･自分のところに作られるリポジトリ
- リモートリポジトリ･･･ネットワーク上に存在する自分以外のリポジトリで複数人でも管理することができる
- ブランチ･･･複数の作業を並行して行うために分岐して履歴の流れを記録していく
- コミット･･･変更を記録すること
- プルリクエスト･･･自分がした変更をリポジトリに取り込んでもらうように要求すること
- ワーキングツリー･･･作業中の場所
- インデックス･･･コミットの対象となるファイル等を置く場所（ステージともいう）

# 作業の流れ

1. Git用のディレクトリを作成<br>リモートリポジトリが存在しない場合は2.へ<br>リモートリポジトリが存在する場合は3.へ
2. `git init`<br>gitリポジトリにする
3. `git clone`<br>リモートリポジトリの内容を自分のマシンに複製する
4. `git branch`<br>ブランチをすべて表示する<br>＊が付いているブランチが自分がいるブランチ
5. `git branch 好きなブランチ名`<br>好きなブランチ名でブランチが生成できる<br>※作業する内容に即したブランチ名にする！
6. `git branch`<br>ブランチができたか確認する
7. `git checkout これから作業するブランチ名`<br>ブランチの切り替えをする
8. `git branch`<br>ブランチの切り替えができたか確認する
9. 作業する
10. `git status`<br>変更状態を見る<br>赤色がワーキングツリーにあるもの<br>- modified...修正したファイル<br>- deleted...削除したファイル<br>- Untracked files...新規作成したファイル
11. `git diff`<br>変更したファイルのソースコードを確認
12. `git add ファイル名`<br>選択したファイルをインデックス（ステージ・エリア）に上げる
13. `git status`<br>変更状態を見る<br>緑色で表示されていればインデックスに上がっている
14. `git commit -m "メッセージ"`<br>追加・変更したファイルをローカルリポジトリに登録する
15. `git log`<br>作業ブランチの履歴を見る
16. `git push origin 作業したブランチ名`<br>リモートリポジトリに変更を反映する
17. Githubのページを開いてプルリクエストを出す

# また作業をしたい時

1. `git checkout master`
2. `git pull origin master`<br>リモートリポジトリの内容をローカルリポジトリに取り込む
3. 作業の流れの3.から始める
git のマージコンフリクト時の BASE,LOCAL,REMOTE

# Gitのマージ

忘れやすいのでメモ

| 名称    | 内容                                                             |
|:--------|:----------------------------------------------------------------|
| BASE    | 共通先祖の内容、3wayの時はここにマージ結果を格納する?               |
| LOCAL   | 手元つまりマージ前の現ブランチでの内容、2wayの時はここにマージ結果を格納する? |
| REMOTE  | マージ相手のブランチの内容                                         |

3-way mergeになるのは、共通先祖があるとき(普通はある)

履歴の連続性のないマージや、元が別のファイルなのにrenameで同じになったなどでのコンフリクトからのマージの発生などでは3wayは適切じゃないらしい(最近のvimdiffはよしなにそれらを処理できるとのこと)

winmergeの3wayも一応できてるかな? 

...今のgitのwinmergeのデフォルトだと、3wayマージ設定を生かせないらしく、ちょっと酷いことになる。
各種の3way設定をちゃんと設定しないとだめ[^1]

[^1]: [Git で WinMerge するときの設定\+α \- Qiita](https://qiita.com/tsuyoshi_cho/items/80901b31f609c85e8ee0) の設定はOK、`-t winmerge` だとREMOTEにコンフリクトした現ファイルが入ってしまう(2way/3wayどちらの条件でも)
elixirでフィボナッチ数列

elixirでフィボナッチ数列のN番目を求めるサンプルコードです

```
0, 1, 1, 2, 3, 5, 8, 13...
```

elixir勉強の一環でやってみました

メソッドのパターンマッチングを用いることで`if`文でネストされないシンプルなコードになったような気がします


```elixir
def fibonacci(1), do: 0
def fibonacci(2), do: 1
def fibonacci(n), do: fibonacci(n - 1) + fibonacci(n - 2)
```
【Vue・React・Elm】ビューの書き方を比べてみた


## Vue.jsの場合

---

## Vueのビューはこんな感じ

```vue
<template>
  <div>
    <button v-on:click="decrement">-1</button>
    <div>{{ count }}</div>
    <button v-on:click="increment">+1</button>
  </div>
</template>
```

ほぼHTMLですね。見やすいです。


---

## Vueでの条件分岐や繰り返し

**v-if**や**v-for**などの**ディレクティブ**というものが用意されていて、それをHTMLの属性みたいに書きます。

### 【例】記事タイトル一覧

記事があれば、その分だけ繰り返し表示するし、1件もなければ「記事がありません。」と表示する例です。

```vue
<template>
  <ul v-if="items.length">
    <li v-for="item in items">
      {{ item.title }}
    </li>
  </ul>
  <p v-else>記事がありません。</p>
</template>
```

v-ifとかv-forとか色々覚えないといけませんが、個人的には割と分かりやすいと思います。

---

## Reactの場合

---

## Reactのビューはこんな感じ


```jsx
render() {
  return (
    <div>
      <button onClick={decrement}>-1</button>
      <div>{ count }</div>
      <button onClick={increment}>+1</button>
    </div>
  )
}
```

Babelというトランスパイラを使うことで、ReactのビューもHTMLみたいに書けます。
これはJSXという書き方なんですが、ほぼHTMLそのままで個人的には読みやすいと思します。

ちなみにJSX記法を使わない場合は、以下の様にReact.createElementメソッドを使用します。

```js
render() {
  return (
    React.createElement('div', null, 
      React.createElement('button', { onClick: decrement }, '-1'),
      React.createElement('div', null, count),
      React.createElement('button', { onClick: increment }, '+1')
    )
  )
}
```

---


## Reactでの条件分岐や繰り返し

JSXの中では、if文やfor文は使えません。
そのため三項演算子や配列のmapメソッドを使って記述します。

### 【例】記事タイトル一覧

```jsx
render() {
  return (
    <div>
      { items.length > 0 ? (
        <ul>
          { items.map((item) => {
            return <li>{ item.title }</li>;
          })}
        </ul>
      ) : (
        <p>記事がありません。</p>
      )}
    </div>
  )
}
```

JSXの中でJavaScriptを書くときには**波括弧**で囲まなければいけません。

---

## Elmの場合

---

## 賢い人は考えた

「HTML要素って、要は`タグ名`と`属性`と`中に入ってる子要素たち`・・・」
「この３つから構成されているやん？」

```html
<div class="container" id="hoge">
  <span>子要素</span>
</div>
```

「じゃあ、`div`とか`span`っていう関数を作って・・・」
「第一引数には`[ class "containor", id "hoge" ]`みたいに属性のリストを渡して」
「第二引数には子要素のリストを渡せばええやん」

```elm
div [ class "container", id "hoge" ] [
    span [] [ text "子要素" ]
]
```

「↑こう書いたらHTML要素を返してくれるような・・・」
「各タグ名に対応したHTML関数たちを作ればええんや！」
「ただの関数やから、ループさせるのに（`v-if`とか`v-for`のような）専用の書き方とか要らんで」
「Elmの`if`や`List.map`関数とかと、シームレスに組み合わせられるんや！」

---

## Elmでは`div`や`span`すらも関数

Elmでは、各HTML要素に対応した**関数**があらかじめ用意されています。
（header, section, p 等々・・・）

このHTML関数たちを使って、**ビュー部分**と**プログラム部分**をシームレスかつ柔軟に書くことができます。

「配列の分だけループして表示させるための特別な構文」もありませんし、
「属性値を動的に生成するための特別な書き方」もありません。

---

## ということで、Elmのビューはこんな感じ

```elm
view model =
    div []
        [ button [ onClick Increment ] [ text "+1" ]
        , div [] [ text <| String.fromInt model.count ]
        , button [ onClick Decrement ] [ text "-1" ]
        ]
```

---

## Elmでの条件分岐や繰り返し

条件分岐や繰り返しに関して、ビュー専用の構文はありません。
普通にElmの`List.map`関数とか`if`などを使用します。

### 【例】記事タイトル一覧

```elm
view model =
    div []
        [ if List.length model.items > 0 then
            ul [] (model.items |> List.map liComponent)
            -- 記事（items）が1件以上あれば、
            -- その分だけliComponentを呼び出して表示する

          else
            p [] [ text "記事がありません。" ]
        ]


-- ただ関数を作ればコンポーネントのように利用できる
liComponent title =
    li [] [ text title ]

```

---

## シンプルでいい感じ！

---


## 完
[Swift 5]UIButtonに設定したimage(画像)を右側に表示する

UIButtonは、アイコンと文字を同時に設定できますが、デフォルトでは左側に表示されます。
文字を左、アイコンを右側に表示したかったのですが、思ったより単純にはできず、今回以下のように実装しました。

##実装
```UIButton+.swift
extension UIButton {
    // ボタンのアイコンをLeading(右側)に表示する
    func iconToRight() {
        if #available(iOS 11.0, *) {
            // leadingはiOS 11以降のため
            contentHorizontalAlignment = .leading
        } else {
            contentHorizontalAlignment = .right
        }
        semanticContentAttribute =
            UIApplication.shared.userInterfaceLayoutDirection == .rightToLeft
            ? .forceLeftToRight : .forceRightToLeft
    }
}
```
##使用方法

```swift
sampleButton.iconToRight()
```

もう一つ、トランスフォームを使って反転させる方法もあるようでしたが、今回はsemanticContentAttributeを使う方法を採用しました。

##代替方法

```swift
button.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
button.titleLabel?.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
button.imageView?.transform = CGAffineTransform(scaleX: -1.0, y: 1.0)
```

## 参考
https://stackoverflow.com/questions/7100976/how-do-i-put-the-image-on-the-right-side-of-the-text-in-a-uibutton
ES6の分割代入

# 問題
二次元配列をオブジェクトの配列に変換する。

```javascript:問題
const classes = [
  [ '化学', '1時限目', '鈴木先生' ],
  [ '物理', '2時限目', '佐藤先生'],
  [ '数学', '3時限目', '木村先生' ]
];

//これをこうしたい。
const classesAsObject = [
    { subject:'化学', time: '1時限目', teacher: '鈴木先生'},
    { subject:'物理', time: '2時限目', teacher: '佐藤先生'},
    { subject:'数学', time: '3時限目', teacher: '木村先生'}
]
```

#ES5で書く
器となる配列を先に宣言しておいて、forループの中で作成したオブジェクトをその配列に放り込んでいく。

```javascript
var classesAsObject = [];
for (var i=0; i<classes.length; i++) {
  var element = { 
    subject: classes[i][0],
    time: classes[i][1],
    teacher: classes[i][2]
  }
  classesAsObject.push(element);
};
```

# ES6で書く
引数を分割代入で受け取ってオブジェクトリテラルを返すmapを作る。

```javascript
const classesAsObject = classes.map(([subject, time, teacher])=> {
    return {subject, time, teacher};
});
```

# 何を使っているか
- [Array.prototype.map()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
- [アロー関数](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
- [オブジェクトリテラル](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer)
- [分割代入](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)
fdiskコマンド

# はじめに
ディスクのパーティションを設定するときに使用するfdiskについてのメモです


# 結論
fdiskには-uオプションをつけてパーティションの区切りをセクタ番号で表示しましょう

# ハードディスクの2種類のアクセス方式
## CHS方式
* 10年以上前の旧式のハードディスクではC(シリンダ)H(ヘッド)S(セクタ)のCHSの情報を与えてどのセクタのデータを読み書きするかを指示
* 当時MS-DOSの使用でディスクパーティションはシリンダ単位で分ける必要があった。LinuxもデュアルブートなどではMS-DOSやwindowsと共通の仕様に従うことはそれなりに意味があったのでLinux版のfdiskもパーティション作成ではデフォルトでCHS方式でディスクの情報を表示

## LBA方式
* 現在のハードディスクのアクセス方式。すべてのセクタに0からの通し番号でアクセス

## fdiskコマンド
fdiskコマンドはデフォルトでCHS方式でディスクの情報を表示。パーティションの始点と終点がシリンダ番号で表示されているがこれは正確な情報ではない

# 参考
[プロのための Linuxシステム・10年効く技術 (Software Design plus) ](https://www.amazon.co.jp/%E3%83%97%E3%83%AD%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE-Linux%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%83%BB10%E5%B9%B4%E5%8A%B9%E3%81%8F%E6%8A%80%E8%A1%93-Software-Design-plus/dp/4774151432/ref=sr_1_2?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=2UD2L7ZI0HMIK&keywords=%E3%83%97%E3%83%AD%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AElinux&qid=1566966367&s=books&sprefix=%E3%83%97%E3%83%AD%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE%2Cstripbooks%2C270&sr=1-2)
[小ネタ]疑似フレンドの別の解法

# 疑似フレンド
以前、こんな話を書きました。

[Delphi の疑似フレンド](https://qiita.com/pik/items/72fd5ab68a2cd40f2d39)

要約すると Unit Friend を使って別の所から Protected にアクセスできるよ、という話です。

```pascal:TFoo宣言
unit Foo;

interface

type
  TFoo = class
  protected
    procedure Bar; ///// ← 同じ Unit 内か継承先からしかアクセス出来ないが…
  end;
```

```pascal:別の場所からアクセス
unit Bar;

interface

type
  TOpenFoo = class(TFoo) end; ///// ← こんな風にダミーで継承すると…

implementation

procedure Baz;
begin
  var Foo := TFoo.Create;
  TOpenFoo(Foo).Bar; ////// ← TOpenFoo と同じ Unit 内なので Protected にアクセスできる！
end;

end.
```

# もうひとつの冴えた？やりかた

疑似フレンドは毎回キャストしないと行けないしエレガントじゃないなーと思っていたんですよ。
で、こんな風に Class Helper 使ってみたら割とエレガントじゃないですか？

```pascal
type
  TFooHelper = class helper for TFoo
  public
    procedure BazCaller;
  end;

procedure TFooHelper.BazCaller;
begin
  Baz;
end;
```

最近だと、こんな感じで TScrollBox が隠している ScrollBar にアクセスするために使いました。
こういう用途だと、TOpen でキャストするよりエレガントに書けます。

```pascal
type
  TScrollBoxHelper = class helper for TScrollBox
  private
    function GetHorzScrollBar: TScrollBar;
    function GetVertScrollBar: TScrollBar;
  public
    property HorzScrollBar: TScrollBar read GetHorzScrollBar;
    property VertScrollBar: TScrollBar read GetVertScrollBar;
  end;

function TScrollBoxHelper.GetHorzScrollBar: TScrollBar;
begin
  Result := HScrollBar;
end;

function TScrollBoxHelper.GetVertScrollBar: TScrollBar;
begin
  Result := VScrollBar;
end;
```

# まとめ

Class Helper を使う方法はコード量が増えるので時と場合しだいですね。
でも、こんなやり方があるよって知ってるとごく稀にイイかもしれません。
CLionでROSC++開発

# はじめに
　私はJetBrainsのエディタを愛用していますが、roscppをCLionで開発する方法というのが意外と記事として残っていなかったので、今回はUbuntuでROS開発をJetBrainsのCLionで行う方法を紹介します。

# 事前準備
　Ubuntu、そしてUbuntuのバージョンにあうROSのバージョンを予めインストールしておいてください。

# CLionインストール
　https://www.jetbrains.com/clion/
　こちらのサイトからソフトウェアをダウンロードしましょう。
　そして、ダウンロードしたファイルを解凍すれば完了です。

# アイコンの設定
　端末からCLionを実行する方法でもいいですが、いちいち端末を立ち上げるのが億劫なので、ランチャーにアイコンを設定します。アイコンの設定は[こちらの記事](https://qiita.com/HiroRittsu/items/6257767d0d8ab55bb498)を参考にしてください。
ただし、このままではROS特有のライブラリなどがCLionで認識されないので、以下の部分を変更する必要があります。

```cmake
Exec=bash -c "/path/to/your/clion/bin/clion.sh %f"

# 以下の行を追記する(CLion, ROS Melodic の場合)
Exec=bash -c "source /opt/ros/melodic/setup.bash; source /path/to/your/catkin_ws/devel/setup.bash; /path/to/your/pycharm/bin/clion.sh" %f

```
ちなみにこれはPycharmでROS開発でも必要な設定になります。

# CmakeLists.txtの設定
　CLionはプロジェクトを読み込むときにCMakeLists.txtを参照しています。そのため、パッケージ１つだけ読み込んで開発するときには、パッケージ内にあるCMakeLists.txtを開けば問題なく開発ができます。しかし、ワークスペースまるごとをプロジェクトとして読み込むには少しだけ手間をかける必要があります。

## catkin_ws/srcの中にCMakeLists.txtがない場合
　rosのmelodicからsrcの中にCMakeLists.txtのシンボリックリンクが生成されなくなったようです（要確認）。CLionでプロジェクトを読み込む際にはそのCMakeLists.txtが必要になります。そこで、以下のコマンドでシンボリックリンクを生成し、ROSのライブラリなどを読み込めるようにします。

```bash
cd ~/catkin_ws/src #rosのワークスペースのsrcに移動
sudo ln -s /opt/ros/melodic/share/catkin/cmake/toplevel.cmake CMakeLists.txt
```

## rosメッセージのincludeパス設定
　さらにrosで独自にメッセージを作成した場合、パスを設定しなければCLionが正常に認識せずエラーを吐きます。そこで、catkin_ws/srcの中にあるCMakeLists.txtにincludeパスを追記します。

```bash
cd ~/catkin_ws/src #rosのワークスペースのsrcに移動。
sudo gedit CMakeLists.txt #root権限で開く。gedit以外のエディタでも可
```
とりあえず以上のコマンドでCMakeLists.txtを開きます。そして以下の一文を追記します。

```cmake
include_directories(/home/<USER>/catkin_ws/devel/include)
```
\<USER>の部分は自分のユーザー名に置換してください。

## プロジェクトの読み込み
　あとは特に難しいことはなく...
1. CLionのメニューの"開く"
2. catkin_ws/srcの中にあるCMakeLists.txtを選択
3. "プロジェクトとして読み込み"　

という流れでCLionでROS開発ができるようになります！

# 参考サイト
http://yura2.hateblo.jp/entry/2016/10/22/ROS%E9%96%8B%E7%99%BA%E3%81%ABPyCharm%E3%82%84CLion%E3%82%92%E4%BD%BF%E3%81%86%E9%9A%9B%E3%81%AETips
シリアライズ(serialize)とエンコード(encode)の違いについて

シリアライズとエンコードの違いを学んだのでざっくりと概要まとめ。

厳密な定義というよりは用途の視点からまとめました。
間違いなどありましたら、ご指摘いただけると助かります...


##エンコード

エンコードとは単なる形式変換のこと

「CDデータをMP3にエンコード」とかみたいに、単純に形式変換することです。

PHP では
```json_encode($test)```
でよく遭遇します。
(↑では $test データをJSON形式にに変換(エンコード)します。)

#### 使用場面
自前のAPIとか。
たとえば、外側に「配列を配列として送りたい」時とかにJSON形式にして送ります。
JSON形式はブラウザとか、他の言語とかでも配列として解釈できるからです。(JSON形式になってると操作しやすいので嬉しい)

## シリアライズ

シリアライズとは「保存するための」形式変換のこと

####使用場面
配列とかオブジェクトを一旦どこかのファイルに保存しておきたいとき。
自分のファイルに配列を一時保存しときたい時とかに使います。
違う処理の時に、そのファイルから配列、オブジェクトを読み込んで使用できます。

自分が遭遇したのは、古いシステムでxmlファイルをシリアライズして保存 → 読み込む時にアンシリアライズしてxmlに戻すというものでした。
( json_encode() でできるじゃん(当時は json_encode() がなかったらしい))

プログラムA で PHP で配列を作る。これをシリアライズしたファイル「hoge」として保存。
プログラムB で「hoge」ファイルの読み込み。(文字列)
「hoge」ファイルをアンシリアライズして配列に戻す。

##まとめ
シリアライズはエンコードの中でも特殊なパターンで、情報を保存可能な形にすること。
シリアライズでやってることはだいたい json_encode でできる(と思う。)
【vscode】『Live Sass Compiler』の.cssの出力先変更設定（win10）

#vscodeの拡張機能『Live Sass Compiler』 のcssの保存場所を変更する方法 (win10)

####デフォルト設定だと.scssのコンパイル先は同階層になっているので変更する

######▼デフォルト設定だと
root
├ scss
・  ├style.scss
・  └style.css 
・

同階層に吐き出される

これを
↓↓↓↓
####▼別階層に吐き出されるように設定したい
root
├ scss
│  └style.scss
├ css
・　└style.css
・
・


###■変更方法

①vscodeのEXTENSIONS: MARKETPLACEの検索窓でsassと入力。
一覧からLive Sass Compiler を見つけ、右下の歯車マークをクリック
②configure extension settingsをクリック
③エディタにて表示された内容のうちLive Sass Compile › Settings: Formats欄を見つけ、edit in setting.jsonをクリック
④空のjsonができるので、その中身に以下を貼り付けて保存

--------------

{
    "liveSassCompile.settings.formats":[
       {
           "format": "expanded",
           "extensionName": ".css",
           "savePath": "/css"
       }
   ]
}

--------------
以上。これで思いどおりの場所に吐き出されました。


###（；；）今回の試行錯誤
まずpackage.jsonをマニュアルどおりに変更すればいいのかと思いきや、
書き換えても変化なし。
↓
別で制御してる設定ファイルがあるのか？と思い探してみるも
本体がどこにあってどのjsonを読み込んでるのかわからない。
↓
本体＆設定ファイルを探す
↓
見つかったけど設定変えても変化ないのであきらめかけたときvscode側で設定ボタン発見。流れでなんとなく設定したらできた。


#####探した場所
・プロジェクトフォルダ内(この階層のscssがコンパイルできていたので一応確認)
　→結果：はずれ。ただ単にエディタで開いているscssをコンパイルする仕様だったっぽい
・C:\Program Files (x86)
　→結果：はずれ。インストールされているならここかとも思ったが
・C:\Users\xxxx\\.vscode\extensions\ritwickdey.live-sass-3.0.0\package.json
　→結果：本体発見。しかしjsonいじっても変化なし
・C:\Users\xxxx\AppData\Roaming\Code\User\setting.json
　→結果：あたり。前述の①～の方法で作ったファイルはここにあった


そもそもなぜritwickdey.live-sass-3.0.0\package.jsonを読み込んでないのかが解明できてなくてモヤモヤしてるが、ただ私はコンパイルをしたいだけで、、、ってことを鑑みるともうこれ以上時間かけたくないのでここで終了！
ってか\\.vscode\って名前の階層あるくせに、\code\って。。。
何だよこの階層・・・これはわからないよぉ・・・


同じ苦しみを味わっている方の参考になれば嬉しいです。
[正規表現]かっことその中身を全てを除去



```php

'/\([^\)]+\)/si'

$output = preg_replace('/\([^\)]+\)/si', '', mb_convert_kana($input, 'a'));
```

かっこを全角→半角変換した後に、
前かっこ＋かっこの中身(後ろかっこを覗く)＋後ろかっこ という正規表現。



`/` : 正規表現の始まり
`\ `: エスケープ記号
`(` : 半角前かっこにマッチ
`[^\)]` : これは)以外にマッチする1文字という意味。[]の中にマッチの条件を書く。^は否定。
`+` : その前に出て来たやつが1回以上繰り返し。今は)以外が1文字以上あればOK。
`\` : エスケープ記号
`)` : 半角後ろかっこにマッチ
`/` : 正規表現の終わり
`s` : 改行も含んでマッチ
`i` : 大文字小文字、どちらもマッチ
（siは要らないかも？）

補足
`[]` : []内の1文字
`[^a]` : a以外の1文字

[参考サイト 正規表現のパターン](http://gimite.net/help/devas-ja/all_regex.html)
[参考サイト siとか。正規表現の修飾パターン](https://www.bnote.net/php/php/17_regular_expression.shtml)
Qt Creatorでビルドした.exeファイルを実行/配布する

Qt Creatorでビルドするとワークディレクトリ以下に.exeファイルが生成されるが、依存関係の問題で、そのままダブルクリックしても実行できない。
これをQtCreatorなしで実行、及び実行可能な状態で配布する簡単な手順を示す。

# パスを通す（コンパイルした環境で実行したい）

特別な依存関係は、主に以下の2つ
（インストールディレクトリ・バージョン・コンパイラによって読み替えてください）
* C:\Qt\5.12.4\mingw73_64\bin
* C:\Qt\Tools\mingw730_64\bin
これを環境変数に当てておけばダブルクリックで実行できる。

cmdで実行するなら

```bat:run_qtapp.bat
set PATH=C:\Qt\5.12.4\mingw73_64\bin;C:\Qt\Tools\mingw730_64\bin;%PATH%
hoge.exe
```

# 依存関係を集める（依存ライブラリとセットで配布したい）

Qt SDKについてくる`windeployqt.exe`を使うと、必要な依存関係を集めてくれる。
`C:\Qt\5.12.4\mingw73_64\bin\windeployqt.exe`
（同じくインストールディレクトリ、バージョンとコンパイラで読み替えてください。）

使い方は簡単
Qt Creatorがビルドした.exeファイルに対して実行するだけ

```
mkdir .\DISTDIR
copy path\to\QTAPP.exe .\DISTDIR
// qmlがある場合
"C:\Qt\5.12.4\mingw73_64\bin\windeployqt.exe" .\DISTDIR\QTAPP.exe --qmldir path\to\SOURCE
// qmlがない場合
"C:\Qt\5.12.4\mingw73_64\bin\windeployqt.exe" .\DISTDIR\QTAPP.exe
```
必要なライブラリがDISTDIRに集まるので、ディレクトリごと配布すればよい。
lambda(golang) の local 実行

# 概要
* docker と serverless-framework (golang) 併用時に docker.sock のマウントや、パスをホスト側と一致させないといけないのが辛い。
* serverless-framework の ```sls invoke local ``` で実行していることをホスト側で実行すればよいのでは、と思ったので試してみました。
* [発端](https://qiita.com/h-nago/items/6cc56b017f6e75cb8ac2)

# コンテナ
```dockerfile:Dockerfile
# build stage
FROM golang:1.12.7 as build-stage

WORKDIR /go/src/app

ARG GOOS=linux
ARG GOARCH=amd64

COPY . .

RUN go build -o ./bin/hello path/to/main.go


# local invoke stage
FROM lambci/lambda:go1.x as invoke

WORKDIR /go/src/app

COPY --from=build-stage /go/src/app/bin /var/task

CMD ["hello"]

```


```yaml:docker-compose.yml
version: '3.4'

services:
  builder:
    build:
      context: .
      target: build-stage
  invoke:
    build:
      context: .
      target: invoke
```

# 実行
```bash
$ docker-compose run --rm invoke
START RequestId: c60e09aa-e9ef-1869-84e5-1a66bb8401d5 Version: $LATEST
END RequestId: c60e09aa-e9ef-1869-84e5-1a66bb8401d5
REPORT RequestId: c60e09aa-e9ef-1869-84e5-1a66bb8401d5	Duration: 1.39 ms	Billed Duration: 100 ms	Memory Size: 1536 MB	Max Memory Used: 6 MB
{"statusCode":200,"headers":{"Content-Type":"application/json","X-MyCompany-Func-Reply":"hello-handler"},"multiValueHeaders":null,"body":"{\"message\":\"Go Serverless v1.0! Your function executed successfully!\"}"}
```

# 補足
* ```lambci/lambda:go1.x``` は、```/var/task``` 配下にバイナリを置き、バイナリ名を cmd で指定してやることで実行してくれます。
* ```sls invoke local ``` の挙動についてはコードを見たものではなく、ホスト側に生成されるディレクトリを見て推測したものです。
Kotlinでコルーチンを使っていて、"Inappropriate blocking method call"という警告が出る場合

# 対処法
- Alt+Enter押して出る様に`@Suppress("BlockingMethodInNonBlockingContext")`を追加する
- 対象の行を適切なコルーチンコンテキスト(大抵の場合はDispatchers.IO)で呼び出す

2個めの対処法の場合は`withContext(Dispatchers.IO) { blockingMethod() }`ってするのが一番楽

# 原因
詳細知らないので推測ですが、呼び出しているメソッド(大抵の場合外部ライブラリ/JDK等の非suspendメソッド)でブロッキング処理(多くの場合I/O処理)が行われているのをIntelliJが検知して警告を出しているんだと思います。
I/O関係のブロッキング処理はIOコンテキストで呼び出せば大丈夫なので、コルーチンコンテキストは適切に使いましょう、ということですね。
springを勉強するうちに、Neither BindingResult nor plain target object for bean name 'command' available as request attribute　エラー対処 

#springmvcのフォームredirectの練習をしたとき、jsp中にspringのformタグを使い時、こんなエラーが発生しました。
Stacktrace:] with root cause
java.lang.IllegalStateException: Neither BindingResult nor plain target object for bean name 'command' available as request attribute
	at org.springframework.web.servlet.support.BindStatus.<init>(BindStatus.java:141)
	at org.springframework.web.servlet.tags.form.AbstractDataBoundFormElementTag.getBindStatus(AbstractDataBoundFormElementTag.java:178)


調べたところ、
##エラーが発生した理由：
　　　spring：bindのソースの中身を見ると
　　　Object target = requestContext.getModelObject(beanName);
   if (target == null) {
    throw new IllegalStateException("Neither BindingResult nor plain target object for bean name '" +
      beanName + "' available as request attribute");
   }
ようは、ある画面にリクエストする時、リクエストにオブジェクトのcommandがないので、エラーが発生する

解決方法：
　JSPに、<jsp:useBean id="command"  class="com.xxxxxbean.xxx" scope="request" ></jsp:useBean>を追加します
coc-typescriptで最初に開いたtsxのファイルだけtsとして認識される問題の対処法

vim起動後最初に開いた`tsx`のファイルだけ`ts`として認識されてしまい、正しくtsserverに解析されない問題が発生していた。

# 原因
vim側の`filetype`が`typescript`に設定されてしまっていた。
2ファイル目以降も`typescript`として認識されていたが、いい感じに解析してくれていた。

# 対策
typescriptのハイライトをしてくれる[leafgarland/typescript-vim](https://github.com/leafgarland/typescript-vim)が`filetype`を`typescript`に設定していたので消去した。
ハイライトは[maxmellon/vim-jsx-pretty](https://github.com/MaxMEllon/vim-jsx-pretty)だけで十分してくれたので消しても問題なかった。

`~/.config/nvim/init.vim` に以下の設定を追記し、`tsx`の`filetype`が`typescript.tsx`として認識されるようにする。

```vimscript
autocmd BufNewFile,BufRead *.tsx let b:tsx_ext_found = 1
autocmd BufNewFile,BufRead *.tsx set filetype=typescript.tsx
```

# 参考
https://github.com/neoclide/coc.nvim/issues/48
https://github.com/ianks/vim-tsx/blob/master/ftdetect/typescript.vim
超初心者が受けるJS社内勉強会：第4回

# 実践

## `<script>` タグを書く場所

- `<HTML>` `<Body>`タグの一番下`</body>`の前


```HTML:例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="keywords" content="">
<meta name="description" content="">
<title></title>
</head>

<body>

<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="js/randomBg.js"></script>

</body>
</html>
```

##決まり事

```js:

$(function(){
});
```

- DOMを全部読み込んでから処理するという意味。`{ });`内に処理を書く

```js:
var data
```

- functionの中でのみ、変数を使えるようにする。ローカル変数。<br>変数のスコープをファンクション内に設定する
- varをつけないと **<font color="Crimson">グローバル変数</font>** となり、**function外でも使えてしまう**。（上書きされる）

```js:
$(data.module).on('click', data.btn, function(){}
```
- 処理実行を軽減するため、限定的な書き方をする。チェックボックスとか。

```js:
alert('Hello, world!');
```
- （ブラウザの）ポップアップを出す

```js:
'use strict';
```
- エラーを発見しやすくなる。

決まり事の部分は、jQueryでもともと用意されているので、そちらを参照(公式→[https://api.jquery.com/](https://api.jquery.com/) )し、バージョンに合わせたものを使用する。




暗記モノ嫌い :frowning2: :sob:

[超初心者が受けるJS社内勉強会：第5回6回] (https://qiita.com/m_hamada/items/aeeeaa66fe8b10adba0d) →
Photoshopテキストレイヤーのサイズを正しく取得する

Photoshopでテキストレイヤーのサイズ取得が少し癖があるのでメモ。
Textレイヤーの種類がそもそも二つあり、サイズの取得方法が結構違う。

# PointText
![204176afa99bab3deb1dd65041ff914e-png.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189041/213d1f69-0f76-abaf-4584-ee32a17234a8.png)

アンカーのポイントを基準にサイズが自動調整されるテキストのこと。
基本的にこちらのサイズ取得はレイヤーのサイズ取得とロジックが一緒でboundsから取得するのがいい。

```point_text_size.jsx
var layer = app.activeDocument.activeLayer;
 
// テキストレイヤーでない場合、textItemが取得できないのでreturn
if(layer.kind == LayerKind.TEXT) return;
 
var bounds = layer.bounds;
var width  = bounds[2].as("px") - bounds[0].as("px");
var height = bounds[3].as("px") - bounds[1].as("px");
```

# ParagraphText
![ed89e3e23631d3be931de8f07c3f10dd-png.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189041/69fbdb43-96df-4d91-79da-91d07091f46b.png)

ボックスを基準に、ボックスの中身を満たす形でテキストが流し込められるテキストのこと。

通常のboundsからのサイズ計算の場合、テキストボックスのサイズは ***現在テキストが入力されているエリアのサイズ***になってしまうため、正しいパラグラフのボックスサイズが取得できない。
この時どうすればいいかと言うと、***パラグラフテキストの場合のみアクセス可能になるItemTextのwidthとheight***を利用するといい。

```paragraph_text_size.jsx
var layer = app.activeDocument.activeLayer;
 
// テキストレイヤーでない場合、textItemが取得できないのでreturn
if(layer.kind == LayerKind.TEXT) return;

var width,height;
 
if(layer.textItem.kind == "PARAGRAPHTEXT")
{
  width = layer.textItem.width.as("px");
  height = layer.textItem.height.as("px");
}
```
ちなみにtextItem.widthとheightはPARAGRAPHTEXTでない場合、アクセスした瞬間に落ちるので注意(判定をしっかりいれる。もしくは、try-catchではさみましょう)
CentOS7にてpython、paramikoの実装

##お久しぶりです
>どうも。最近CentOS7にて辞書攻撃を作成する際にず～～～っとわからず時間のかかったpythonの実装、paramikoの実装について解説していきます。


#paramikoとは
> そもそも、paramikoってなに？という感じですが、paramikoというのは簡単に言うと
「pythonを使ったsshをする際に使われるライブラリ」って感じです。
まぁこの実装に僕の知識がないのも相まって三日くらいしらべまくったわけですが(白目)

#実装環境
- Virtual Box ver.6
- CentOS 7

#ついに実装
> ながったらく話しましたが実装について解説していきます。以下に実行したコマンドを記します。  

```
// リポジトリの追加（たぶんこれがないと無理）
# yum install https://centos7.iuscommunity.org/ius-release.rpm
```
```
// pythonのインストール  
# yum install -y python36  //36の部分にはpythonのバージョンを指定　ex)36→3.6
```
```
//  pythonのライブラリ系のインストール
# yum install -y python36u
# yum install -y python36u-libs
# yum install -y python36u-devel
# yum install -y python36u-pip
```

> まぁここは自由にしてください（笑）でもpipのインストールは絶対してください  

```
// paramikoのインストール
# pip install paramiko
```
>もし、成功せず「'pip install --upgrade pip' command.」、みたいなエラーメッセージが出たらアップデートしてください

```
// pipのアップデート
# pip3.6 install --upgrade pip
```
>3.6にはバージョンの指定です。Tabキー使ってください  
それでもできなかっらた3.6をつけなかったり色々やると大丈夫な気がします  

##pipとは
> 絶対インストールしてほしいといった「pip」ですが、いったい何なのか、  
>>pipとはpythonのパッケージを管理するものらしいです。
  
>簡単に述べるとparamikoはyumじゃなくてpipじゃないとダメだよってことですね


#最後に
・ こういった経緯によってやっとのことで辞書攻撃についての開発環境が整いましたので、次回は辞書攻撃について書かせてもらいます。

最後までありがとうございましたー
【初心者向け】cssのclass名の付け方って、どんな名前をつけたらいいか分からないよね。についての回答。

WEB業界に入ってhtml / cssを学習し始めた頃、
えっclass名って、どんな名前を付けたらいいの？
っていう問題が自分の中でありました。

当時の僕はこう思っていました。

###「どんなclass名をつけたら正解なんかが分からん」

周りに聞いても結局、
👪「とりあえずこういう名前にしとこか」
👨‍👨‍👧「後で見た時に分かりやすい名前をつけるんよ」
とか言いながら、さらっと名前をつけてしまう。

で、こう思ったわけですよ。
👳‍♂️「えっなんでその名前にしたん？」
この疑問に嫌味な意味はなく、本当に単純に理由が知りたい。

経験者はわかってるんですね。
cssの設計がもうすでに頭にあるわけやから命名ルールに沿ってつけていくだけ。
でも、初心者からすると「なぜそうなのか」が分からない。

あとあとわかったけど、結構なんとなくの名前でつけてます。
単純に囲いたいだけなら「wrap」とか「area」
カード型みたいな表示にしたいなら「card」とかそんな感じ。

なので僕のclass名のつけかたを少しだけ書いておきます。
※あっ独自ルールのやつです。


ちなみにアンスコ２つにしているのはBEMっぽさと
class名の見やすさと外部apiのcssとの差別化を図るためです。
（大体はアンスコ１つじゃないかな。）

---

#### 大枠、レイアウト
・〇〇\_\_area
・〇〇\_\_box
・〇〇\_\_card
・〇〇\_\_contents

#### 要素を囲いたいときは、親要素に\_\_wrapを
・〇〇\_\_area\_\_wrap
・〇〇\_\_box\_\_wrap

#### ヘッダー/フッター部分
・〇〇\_\_header
・〇〇\_\_footer

#### 内容の中のヘッダーやフッターは
・〇〇\_\_content\_\_top
・〇〇\_\_content\_\_bottom


#### header の入れ子の要素は、
・〇〇\_\_title -> title 内の要素は p とか span とかで囲ってもいい
・〇〇\_\_side -> side 内の要素は header\_\_side\_\_item（itemを使う）
※切り分けるために item にもう一つclass名をつける場合は、type\_\_〇〇みたいな感じ。
※item じゃなくてボタンとかの場合も type\_\_submit type\_\_cancel とかで切り分ける。
※他には mode\_\_〇〇 とかよく使います。

#### 内容部分
・〇〇\_\_body
・〇〇\_\_content
※内包する要素のclass名としては、〇〇\_\_areaとか、〇〇\_\_box、〇〇\_\_card、
とか形状によってそれぞれ名前を変更したりします。


---

大まかなレイアウト時はこんな感じです。

#### 「〇〇\_\_の部分ってなんて名前にすればいいの？」

例えばサイトTOPページなら site-top
サイトの概要のページだと site-info みたいな。
あとは site\_\_title とか info\_\_title、site-info\_\_title にしてもいい

とりあえずは自分なりのルールを作って、統一性を持たせたclass名を心がける。
慣れてきたらBEMとかの玄人さんたちが考え出した、命名規則を勉強するといいかも。

### 「あっ最後にこれだけは！」
シンプルな単語のみのclass名は絶対やめたほうがいい。
後でcssを作り込んでいる時に、予期せぬスタイルが反映されて大変なことになる。
content とか、text とか、
あとは left とか right とか、場所が固定されるものは極力使用しないように。
（cssでレイアウトの位置替えは楽勝なので）

それでは。
gitで時間の表示フォーマットを変更する

# TR;DR

```
git log --date=<format>
git show --date=<format>
git branch --format='%(authordate:<format>)'
```

の`<format>`部分を調べた際に、探すのに時間かかってしまったのでメモ

# ドキュメント

[git branchのドキュメント](https://git-scm.com/docs/git-branch#Documentation/git-branch.txt---formatltformatgt)の--format見ると、git-for-each-refと同じって書いてある

> --format <format>
> A string that interpolates %(fieldname) from a branch ref being shown and the object it points at. The format is the same as that of git-for-each-ref[1].

[git-for-each-refのドキュメント](https://git-scm.com/docs/git-for-each-ref#Documentation/git-for-each-ref.txt-worktreepath)見ると、日付の形式はgit-rev-listを見てねって書いてある

> As a special case for the date-type fields, you may specify a format for the date by adding : followed by date format name (see the values the --date option to git-rev-list[1] takes).

[git rev-listのドキュメント](https://git-scm.com/docs/git-rev-list#Documentation/git-rev-list.txt---dateltformatgt)にやっと書いてあった

ただし、独自の形式にする場合は
`--date=format:...`はシステムのstrftimeに送るからパラメータはそっち見てねってあるので

[strftime](https://linuxjm.osdn.jp/html/LDP_man-pages/man3/strftime.3.html) を見ないといけない

# サンプル書式

## 

```
$ git branch --format='%(authordate)'
Tue Aug 27 19:34:50 2019 +0900

$ git branch --format='%(authordate:relative)'
16 hours ago

$ git branch --format='%(authordate:local)'
Tue Aug 27 19:34:50 2019

$ git branch --format='%(authordate:iso)'
2019-08-27 19:34:50 +0900

$ git branch --format='%(authordate:iso-strict)'
2019-08-27T19:34:50+09:00

$ git branch --format='%(authordate:rfc)'
Tue, 27 Aug 2019 19:34:50 +0900

$ git branch --format='%(authordate:rfc2822)'
Tue, 27 Aug 2019 19:34:50 +0900

$ git branch --format='%(authordate:short)'
2019-08-27

$ git branch --format='%(authordate:raw)'
1566902090 +0900

$ git branch --format='%(authordate:unix)'
1566902090

$ git branch --format='%(authordate:default)'
Tue Aug 27 19:34:50 2019 +0900
```

## 独自フォーマット

```
$ git branch --format='%(authordate:format-local:%Y-%m-%d %H:%M:%S)'
2019-08-27 19:34:50
```

## `:human`は使えなかった

```
$ git --version
git version 2.17.1

$ git branch --format='%(authordate:human)'
fatal: unknown date format human
```

恐らくバージョンによるもので、version 2.21.0 から追加された模様です。
`--date=human`についての表記が[ver 2.20.0](https://git-scm.com/docs/git-rev-list/2.20.0)にはなく、[ver 2.21.0](https://git-scm.com/docs/git-rev-list/2.21.0) からはありました。
php 前置演算と後置演算の違い

#近況報告

エンジニア転職成功しました。YouTubeでエンジニア転職したい方向けに情報発信しています。

https://www.youtube.com/channel/UCcXQG8lu_EdyP2Cbhtz1bcA


#前置演算と後置演算の違い

##前置演算
```php:test.php
$t = 0;
$s = ++$t;
print $s;

/*結果
$t 1;
$s 1;
*/
```

  - $s = ++$x ような形で、先に演算してから値を代入する
  - $sに代入される値は、演算後の値である
  - 前置演算は加算子以外にも、--$xのような減算子の書き方が可能
  - ++をインクリメント、--をデクリメントと呼ぶ


##後置演算

```php:test.php
$t = 0;
$s = $t++;
print $s;

/*結果
$t 1;
$s 0;
*/
```

- $s = $x++のような形で、$sに代入してから演算する
- $sに代入される値は、演算前の値である
- 後置演算は加算子以外にも、$x--のような減算子の書き方が可能
Vue CLI で VSCode+TypeScript+ESLint+Prettierの環境構築

# はじめに

TypeScriptの場合も、これからはESLintらしい。

* [TypeScript on ESLint の未来](https://qiita.com/mysticatea/items/aaf677928e965abe093d)
* [さよならTSLint、お久しぶりESLint]
(https://k2ss.info/archives/2689)

Vue CLIのV3を使って、TypeScript+ESLintの初期構築手順をまとめる。

# 手順

## vue-cliのインストール

```
# npm i -g @vue-cli
```

```
# vue -V
3.11.0
```

## Vue CLIによるプロジェクト作成

```
# vue create myproject
```

マニュアルを選択

```
? Please pick a preset: 
  default (babel, eslint) 
❯ Manually select features 
```

インストールしたい機能を選択する。
`TypeScript`と`Linter / Formatter`を有効化。その他はお好みで。

```
? Check the features needed for your project: 
 ◉ Babel
 ◉ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
 ◉ CSS Pre-processors
❯◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing
```

以降は有効化した機能に関する質問が続く。

Linterとフォーマッタに関する質問で、`ESLint + Prettier`を選択。

```
? Pick a linter / formatter config: 
  TSLint 
  ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
❯ ESLint + Prettier
```

それ以外の質問はお好みでOK。


## VSCodeの設定追加

ESLintの拡張機能を追加。
[ESLint](https://github.com/Microsoft/vscode-eslint)

さらに、プロジェクト設定を追加。

```setting.json
{
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ],
}
```

## Prettierの設定追加

`.prettierrc`をルートディレクトリに追加する。

```
{
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}
```

`.eslintrc.js`のrulesに追加してもOK

```.eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ["plugin:vue/essential", "@vue/prettier", "@vue/typescript"],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    // 以下を追加
    "prettier/prettier": [
      "error",
      {
        "singleQuote": true,
        "semi": false
      }
    ]
  },
  parserOptions: {
    parser: "@typescript-eslint/parser"
  }
};
```

## ESLintの実行

デフォルトの設定だと、Linterが勝手に修正してしまう。
https://teratail.com/questions/186587

無効化したい場合は、`package.json`を修正する

```package.json
{
  "name": "myproject",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    // --no-fixを追加
    "lint": "vue-cli-service lint --no-fix",
    // 追加
    "lint:fix": "vue-cli-service lint"
  },
  "dependencies": {
    // 各種ライブラリ
  },
  "devDependencies": {
    // 各種ライブラリ
  }
```

ESLintを実行

```
# npm run lint
```

警告が多数検出されたら、正常に動作している。

```
warning: Replace `"Avenir"` with `'Avenir'` (prettier/prettier) at src/App.vue:13:16:
```

# 補足

既存のプロジェクトをTSLintからESLintに切り替える場合は、色々ライブラリを追加する必要があるみたい
[Vue.jsでtypescript-eslint + Prettierを導入する](https://qiita.com/markey/items/cfeb2a07e11d43676505)
【Python】文字列の部分参照 (備忘録)

#はじめに
Pythonで文字列を扱うことが多いので、文字列の扱いかたを簡単にまとめます。

参考書: 入門 Python3

#環境
OS: macOS Mojave

#文字列のうち任意の文字を抽出する
扱う文字列は以下の通りです。

```python:
letters = "123456789"
```

文字列のうち任意の文字の位置を指定して抽出する場合は以下の構文で抜き出す。

```python:
letters[開始:終了:段階]
```

###例
例えば初めから七番目 (0から数えたら6番目) まで２つずつを抽出する場合は以下のようになる。
(初めから抽出する場合は数字を省略できる。)

```python:
>>>letters[:7:2]
'1357'
```

初めから最後まで、2つずつ抽出する場合

```python:
>>>letters[::2]
'13579'
```

後ろから3番目を参照したい場合

```python:
>>>letters[-4]
'7'
```

(応用) 文字列を逆転させたい場合

```python:
>>>letters[::-1]
'987654321'
```
Material-ui React Component を WebdriverIO react$ で取得してみたら失敗した → できた

2019/09/06 追記
できました。詳細はここに
https://qiita.com/r315dr/items/bf12c70256c22c81c5e5

# はじめに
[WebdriverIOのBlog](https://webdriver.io/blog/2019/04/03/react-selectors.html)にReact Selectorsの話が出ていたので試す。
Material-uiのコンポーネントを取得してみようと思う。
ソースは[ここに置く](https://github.com/moeyashi/material-ui-with-webdriberio)

## 環境
* Mac
* Next.js
* Material-ui
* WebdriverIO

# Getting Started
### next.js with material-ui
[Next.jsのGithub](https://github.com/zeit/next.js/tree/canary/examples)にはExamplesが豊富にあるので、探す。
Material-uiを見てみると、Material-uiの方をみろとあるので、[こっちを見る](https://github.com/mui-org/material-ui/tree/master/examples/nextjs)。
書かれている通り、ソースのダウンロード&`npm install`&`npm run dev`して、http://localhost:3000 にアクセス
![スクリーンショット 2019-08-28 10.06.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321322/6f69f987-8fb0-59c1-2222-9cf24c34c1c4.png)

「Go to the about page」に飛ぶと
![スクリーンショット 2019-08-28 10.07.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321322/1cec1a0b-8e36-ead7-67a7-06c2e1521bf9.png)

### install WebdriverIO
先ほどのディレクトリのまま、WebdriverIOを[Getting Started](https://webdriver.io/docs/gettingstarted.html#install-webdriverio-cli)を参考にインストールする。

* サービスはSelenium-Standaloneを選択した
* baseURLは`http://localhost:3000`

# いざテスト
### テストコード

```javascript:test/specs/basic.js
describe('material-ui component', () => {
  it('go to about page and back main page', () => {
    browser.url('/'); //baseURLで指定したのがここで活きる
    browser.$('=Go to the about page').click(); //リンク名Selector
    const button = browser.react$('Button'); //React Selector
    button.waitForExist(5000);
    button.click();
    browser.$('=Go to the about page').waitForExist(5000);
  });
});
```

### 結果
失敗・・・

```:console抜粋
[0-0] Error in "material-ui component go to about page and back main page"
element ("Button") still not existing after 5000ms
Spec Files:      0 passed, 1 failed, 1 total (100% completed) in 00:00:13
```