OmniAICreator/Qiita-1.07M huggingface dataset:
「文言」でレンダリング-ハートを描くその1 VsCode Extentionインストール編

## はじめに
[前回](https://qiita.com/libru1/items/e291bfeebf8ad72859ba)コマンドラインにてレンダリングでhelloworldしました

どんな物がレンダリング出来るのか、いろいろなレンダリングしてみたくなります
ソースを作成するエディターが欲しくなりますね

この記事ではVsCode Extentionをインストールします
[次の記事](https://qiita.com/libru1/items/97f521f4d661b20115e1#_reference-92f372b037540e4d9a5d)ではv0.1.3になり増えたサンプルdraw_heart.wyでハートを描き、そのソースをレンダリングします

## インストール
[公式ReadMe](https://github.com/LingDong-/wenyan-lang)にあるPluginをインストールします

- [Plugin for VSCode](https://github.com/antfu/wenyan-lang-vscode) by [antfu](https://github.com/antfu)


まずは、[こちら](https://code.visualstudio.com/)よりOSを確認しVisual Studio Codeをダウンロードし、インストールします。

起動後、左側にあるExtension(ブロックのような)アイコンを選択し、
検索窓に「wenyan」と入力すると文言用のExtensionが表示されますので、「インストール(install)」を押してインストールします。Extensionの中にコンパイラが同梱されているようです。別途インストールしなくても良かったのでしょうか。
<img width="1024" alt="Screen Shot 2019-12-31 at 7.45.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/334227/40a2a5df-16b3-ba1b-977e-3aeb85db8340.png">

もしも、失敗した場合はコマンドラインから試してみましょう。
失敗した場合は、手動インストール用にダウンロードリンクが表示されますので保存します。

vsixファイルを保存したフォルダに行き、
windowsはパスも通ってるし、書き込み権限もあったので、そのまま実行

```sh
code --install-extension antfu.wenyan-lang-0.10.4.vsix
```

macOSではパスが通っておらず、権限もないようでエラーになったので、以下のように実行

```sh
sudo "/Applications/Visual Studio Code.app/Contents/Resources/app/bin/code"　--install-extension antfu.wenyan-lang-0.10.4.vsix
```
無事ソースに色がつきました

<img width="642" alt="Screen Shot 2019-12-31 at 8.19.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/334227/c620df89-4def-725c-45dc-c02d4acd1dc7.png">

## おわりに

最初windowsで作業してましたが、macに切り替えたらExtentionが入らず、結構はまりました。
gitブランチを作成しようとしたら『fatal: 'origin/ブランチ名' is not a commit and a branch 'ブランチ名' cannot be created from it』となった

## 事象

下記のようなgit環境がある。

```shell
$ git branch -a
* master
  remotes/origin/feature
  remotes/origin/master
```

ここで、`git checkout`コマンドで`origin/feature`から`feature`ブランチを作成してチェックアウトしようとしたら下記のようなエラーとなった。

```shell
$ git checkout -b faeture origin/faeture
fatal: 'origin/faeture' is not a commit and a branch 'faeture' cannot be created from it
```

## 解決

ブランチ名のtypoだった。エラーも「リモートにそんなコミットはないからブランチは作られなかったよ」と言っている。

- 誤：`git checkout -b faeture origin/faeture`
- 正：`git checkout -b feature origin/feature`

```shell
$ git checkout -b feature origin/feature                      
Branch feature set up to track remote branch feature from origin.
Switched to a new branch 'feature'
```

チェックアウトできた。

以上
c# (dotnet core 3.1) であけましておめでとうございます！

あけましておめでとうございます。
毎年、適当な言語を選んで、あけましておめでとうメールを送っています。
今年は c# にしてみました。

## Environment

* 開発環境: Windows 10 pro
* 開発ツール: Visual Studio 2019 + dotent core sdk 3.1
* 実行環境: Ubuntu 18.04.1 LTS x64

## Code

SmtpClientクラスはもう廃止なんですね。

>https://docs.microsoft.com/ja-jp/dotnet/api/system.net.mail.smtpclient?view=netframework-4.8
>  重要
> 新しい開発には SmtpClient クラスを使用しないことをお勧めします。 SmtpClient は多くの最新プロトコルをサポートしていないためです。 代わりにMailkitまたはその他のライブラリを使用してください。 詳細については、GitHub でSmtpclient を使用しないことをお勧めします。

MSの公式ドキュメントには``Mailkit``を使えと。オープンな社風になってしまったMSに私は戸惑いを隠しきれません。
というので nuget で ``Mailkit`` をインストールしてgithubのサンプルコードを使いました。

```c#
using System;
using MailKit.Net.Smtp;
using MailKit;
using MimeKit;
using System.Collections.Generic;

namespace mail
{
	public class Program
	{
		public static void Main(string[] args)
		{
			var msg = new CustomMessage()
			{
				Subject = "I wish you a Happy new year 2020",
				From = "dharry@example.co.jp",
				SmtpServer = "mail.example.co.jp",
				AuthUser = "dharry",
				AuthPass = "mypass",
			};

			msg.To = new List<KeyValuePair<string, string>>() {
				new KeyValuePair<string, string>("山田","yamada@example.com"),
				new KeyValuePair<string, string>("斎藤","saito@example.com")
				new KeyValuePair<string, string>("佐藤","sato@example.com")
			};
			msg.Body = body;
			msg.Send();
		}

		private const string body = @"2020年01月01日になりました。
あけましておめでとうございます。
今年もよろしくお願いします。
";
	}


	public class CustomMessage
	{
		public List<KeyValuePair<string, string>> To { get; set; }
		public string Subject { get; set; }
		public string From { get; set; }
		public string Body { get; set; }
		public string SmtpServer { get; set; }
		public int SmtpPort { get; set; } = 587;
		public string AuthUser { get; set; }
		public string AuthPass { get; set; }

		public void Send()
		{
			foreach (var p in To)
			{
				var message = new MimeMessage();
				message.From.Add(new MailboxAddress(From));
				message.To.Add(new MailboxAddress(p.Key, p.Value));
				message.Subject = Subject;
				message.Body = new TextPart("plain")
				{
					Text = $"{p.Key}さん\n\n{Body}"
				};

				using (var client = new SmtpClient())
				{
					// For demo-purposes, accept all SSL certificates (in case the server supports STARTTLS)
					client.ServerCertificateValidationCallback = (s, c, h, e) => true;
					client.Connect(SmtpServer, SmtpPort, false);
					// Note: only needed if the SMTP server requires authentication
					client.Authenticate(AuthUser, AuthPass);
					client.Send(message);
					client.Disconnect(true);
					Console.WriteLine($"sendmessage.. {p.Value}");
				}
			}
		}
	}
}
```

## Execute

ビルド->発行して、Linuxに持っていき、実行。
毎回思うのだが、dotnetコマンドの引数にdllというのが違和感ありすぎて困ります。

```console
$ dotnet ./mail.dll
```
【小ネタ】Windows10HomeでDocker環境を作ろうとしたら少しハマった話

# はじめに
Windows10HomeでもDocker環境を作ることができるらしいので試してみたらほんの少しハマったので備忘録として記事を残そうと思った次第です。
## 環境
- OS:Windows10Home
- ノートPC:HP Envy x360
- CPU:Ryzen7   

# 環境を作る手順  
## 参考記事
基本的に以下の記事にインストールにおける全てが記載されています。
- https://qiita.com/idani/items/fb7681d79eeb48c05144
- https://docs.docker.com/toolbox/toolbox_install_windows/

## `Docker-ToolBox`のインストール
基本的にwindows10Proの場合は`Docker Desktop for Windows`で環境を立てれるのですが、Homeの場合はProに搭載されているHyper-Vが無いため単体でDockerを動かすことができないようです。
そのため、Oracle Virtual Boxを使ってDockerを扱えるようにします。
そこで、`Docker-ToolBox`で必要なものをインストールします

インストールページ：https://github.com/docker/toolbox/releases

バージョンが色々ありますが、自分は最新版をインストールしました
**これが過ちになるとも知らずに…**

インストールするとデスクトップにアイコンが3つ追加されます
![file一覧.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226350/19a768d2-226e-4073-4511-ccb6846fb7e7.png)
上の画像の一番右のアイコンの`Docker Quickstart Terminal`を起動してdockerコマンドが使えるかを確認します
## 問題発生
Docker Terminal上でエラーを吐かれました
![docker_tool_box_error.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226350/85294ef2-c327-70be-66c1-5c51803f3483.png)
エラーの内容を調べてみると、`VT-X/AMD-vが有効化されていないけど？`らしい。
そこでタスクマネージャーを確認してみると…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226350/9cb32925-b8b4-5179-e362-30af1afd0fe9.png)
仮想化が有効化になっている…！
## 問題解決
もう少しGoogle先生で知らべてみると、以下の記事がすべてを解決してくれました。
https://hepokon365.hatenablog.com/entry/2019/07/28/012617
端的に言えばバージョンを下げれば動くらしい...
そこでバージョンを`v18.03.0-ce`に変更し、先ほどと同様に作業を進めていきます。
改めてDocker Terminalを起動してみると...
![docker_tool_box_success.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226350/9fb97fdd-4aed-5718-8ead-b0f33b35fab3.png)
**クジラ出たー‼‼**
一応dockerコマンドが動くかどうかを確認します
`docker run hello-world`を実行
![docker_tool_box_run_hello_world.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226350/711bc235-6a6d-be16-2083-6e87aa13e509.png)
動いてる‼
# まとめ
以上、windows10homeでdocker環境を作ろうとしてハマった話でした
Haskellことはじめ

*Haskell～教養としての関数型プログラミング～*を使って勉強

#### 今回 学ぶこと

| コマンド       |説明 |  
|:-----------------|:----------------------|
| stack ghci |Haskellを対話モードで起動|       
| :load path_to_file|ファイルを読み込む|  
| :reload|ファイルを再読み込みする |  
| it|直前に参照した値を取得する|   
| funct arg1 arg2 ...|定義済関数の呼び出し|

- 関数の定義  

```practice.hs
-- 引数1と引数2の乗算
func arg1 arg2 = arg1 * arg2

-- 部分適用の関数
abcCrypt n ed　mc = mc ^ ed `mod` n
-- abcCryptの第一引数だけ与える
abcCrypt1 = abcCrypt 138689
-- abcCryptの第一引数, 第二引数を与える
encrypt1 = abcCrypt1 13
decrypt1 = abcCrypt1 95497
------------------------------
```
- 部分関数
部分関数は外側の関数から内側の関数へ順次展開されていく

#### 実践
コマンドラインを管理者モードで起動する

```
# 対話モード起動
C:\Users\ユーザー名\Documents\haskell>stack ghci

# 対話モード終了
C:\Users\ユーザー名\Documents\haskell>:quit
```

#### 準備運動
コマンドプロンプトを管理者モードで実行し作業ディレクトリへ移動する

```
# ユーザーホームへ移動
cd %HOMEPATH%

# 対話モード起動
C:\Users\ユーザー名\Documents\haskell>stack ghci
*Main Funpaala> 123
123
Prelude> "hello haskell"
"hello haskell"
*Main Funpaala> pi
3.141592653589793
*Main Funpaala> 123 + 123
246
# 変数itに直前に評価した値が格納されている
*Main Funpaala> it
246

*Main Funpaala> repeat "Hello 2020"
# Hello 2020が延々と出力されるのでctrl + cで強制終了しましょう

```

#### practice/fruits.hsファイルを作成してみる

```fruits.hs
myFavoriteFruit = "orange"
```

#### ファイルを作成したらファイルをロードする

```
*Main Funpaala>:load practice/fruits.hs
[1 of 1] Compiling Main             ( practice\fruits.hs, interpreted )
Ok, modules loaded: Main.

# 変数を読み込んでみる
*Main> myFavoriteFruit
"orange"
```

#### ファイルを編集
```fruits.hs
myFavoriteFruit = "banana"
```
```
# ファイルをリロード
*Main> :reload
[1 of 1] Compiling Main             ( practice\fruits.hs, interpreted )
Ok, modules loaded: Main.

# 変数を読み込む
*Main> myFavoriteFruit
"banana"
```

#### RSA暗号の計算式

```
# 管理者モードでgit bashを起動
$ stack ghci

# 2の10乗を求める
*Main> 2 ^ 10
1024

# 13/5の剰余を求める
Prelude> 13 `mod` 5
3
```

#### Haskellで暗号化と復号化の式
c : 暗号化されたメッセージ
m : 復号化したメッセージ

```
# 暗号化
c = m ^ e `mod` n
# 復号化
m = c ^ d `mod` n
```

#### RSA暗号 実践

- 変数定義

```rsa.hs
e = 13
d = 95497
n = 138689

-- 引数m を暗号化
encrypt m = m ^ e `mod` n
-- 引数c を復号化
decrypt c = c ^ d `mod` n
```

- ファイルを読み込む

```
Prelude> :load rsa.hs
[1 of 1] Compiling Main             ( rsa.hs, interpreted )
Ok, one module loaded.
```

- 暗号化

```
*Main> encrypt 1001
90875
```

- 復号化

```
*Main> decrypt 90875
1001
```
2020年 Haskellことはじめ

### Haskellをはじめてみたい
*Haskell～教養としての関数型プログラミング～*という本に出合い、そんな欲に駆られました。 ハードルも決して高くなく、関数型プログラミングという新しい世界。2020年の幕開けには丁度よいと思うので手始めに環境構築をしてみます。 

### Stackの導入
Haskellプロジェクトを開発するためのクロスプラットフォームプログラムとのこと。
[公式サイト](http://docs.haskellstack.org)

##### STEP 1
windowsでのインストール方法は[公式サイト](http://docs.haskellstack.org)より[Windows 64ビットインストーラー](http://docs.haskellstack.org/en/stable/install_and_upgrade/)をダウンロード後、インストールすればよい。


##### STEP 2
Stackのセットアップ
コマンドプロンプトを管理者権限で起動後、下記コマンドを実行するとGHCのインストールが始まりstackのsetupが始まる。
GHCって何？って思った方は[https://www.haskell.org/ghc/](https://www.haskell.org/ghc/)のサイトを確認するとよい。

```
C:\WINDOWS\system32>stack setup

# インストールが始める・・・
# 下記のようなメッセージが出ればOK

Extracting  msys2-20180531.tar

Everything is Ok

Size:       281825280
Compressed: 63974800
Extracting msys2-20180531.tar...
Extracted total of 14569 files from msys2-20180531.tar
Copying skeleton files.
These files are for the users to personalise their msys2 experience.

They will never be overwritten nor automatically updated.

'./.bashrc' -> '/home/ユーザー名/.bashrc'
'./.bash_logout' -> '/home/ユーザー名/.bash_logout'
'./.bash_profile' -> '/home/ユーザー名/.bash_profile'
'./.inputrc' -> '/home/ユーザー名/.inputrc'
'./.profile' -> '/home/ユーザー名/.profile'
[0mstack will use a sandboxed GHC it installed[0m
[0mFor more information on paths, see 'stack path' and 'stack exec env'[0m
[0mTo use this GHC and packages outside of a project, consider using:[0m
[0mstack ghc, stack ghci, stack runghc, or stack exec[0m



```
#### インストール確認
```
C:\WINDOWS\system32>stack ghc -- --version
The Glorious Glasgow Haskell Compilation System, version 8.6.5
```

環境構築はここまで。
次からはHaskellに触れていきます。
Longan Nano で Bad Apple!! じゃない任意の動画を再生する

#はじめに
 秋月電子で830円で売っていたLongan Nano にBad Apple!!を再生するサンプルがあり
 動画ファイルの作り方の備忘録です。※wiki(中国語)に書いてあったことの要約です
 稚拙な文章ですが、誰かの役に立てれば幸いです。
　![bapple.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311381/5ff7f32d-07a8-d0c9-b9fc-952415eaf6c0.png)

秋月のサイト：http://akizukidenshi.com/catalog/g/gK-14678/
Longan Nano Wiki(中国語)：http://longan.sipeed.com/zh/examples/badapple.html
# 必要なもの
・デモのBad Apple!!を再生することが出来る　Longan Nano
・Python 実行環境
・tools_bmp2hex (https://longan.sipeed.com/zh/examples/badapple.html )
　　点击下载から入手可能
・Bmpリサイズツール　（今回は、Caesiumを使用）
・AviUtl
 　+連番BMP出力　(プラグイン)
・動画ファイル
# 動画ファイル　→　連続bmpで出力する
　・AviUtlで動画を開く
　　　(開くときに10fpsで変換しておく)
　・AviUtlで連続bmp出力する。
　　　プラグイン出力　→　連続bmp出力
# bmp のリサイズ(160 ☓　80)
　・Caesiumで連続bmpで出力されたbmpを160 x 80 に変換する。
# bmpのリネーム
　※tools_bmp2hexを解凍したフォルダにリサイズした連続bmpを入れておく
　・tools_bmp2hexのrename.pyを実行して連続bmpのファイル名をリネームする。
　　コマンドプロンプトとかで　Python rename.py 　
　　※1.bmp 2.bmpとかになる。
# bmp.bin 作成
　・tools_bmp2hexのgenhex.pyを実行する。bmp2hex.pyも使うので同じフォルダに入れておく
　　コマンドプロンプトとかで　Python genhex.py　"bmpの最大枚数"
　　　　　　　　　　　　　　EX:3000枚だったら　Python genhex.py　3000 
　　※それなりに実行までに時間がかかる。
# SDカードにbmp.binを入れておしまい。
　![sg.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311381/ffba474a-91ee-8e88-d617-feecac795141.png)
Wagtailを触ってみた(3)。ポップアップメッセージの調査、実装。

#### はじめに
こんにちは。

現在実装したい内容はページ編集後の保存時のバリデーション設定です。
タイトルが33文字を超えた時の挙動をタイトルが0文字だった時の挙動と同じにしたいのです。

実装方法を調査するために、今回はWagtailのコードを調査してみました。
[前回の記事](https://qiita.com/a27yb/items/b674b6f908240243bdd7#_reference-7f8095b659fc679f484e)

---

#### Wagtailのソースコードをチェックする
Wagtailはオープンソースなので、ネットで「Wagtail Github」と検索すれば[WagtailのGithubページ](https://github.com/wagtail/wagtail)がヒットします。
ページ保存時にどのコードが関わっているのかが知りたいので、とりあえずコード内検索にかけてみましょう。

<img width="1419" alt="スクリーンショット 2019-12-31 19.59.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517540/51f5760d-d671-748a-7a39-bd0b70e49eac.png">
<img width="1438" alt="スクリーンショット 2019-12-31 20.00.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517540/9db5b0b8-d221-9d2c-7e38-1eefca88f621.png">

django.poファイルが多くヒットしますね。これはページ内で使われている言葉を別言語に変換するためのファイルです。
このファイルは今回の内容とは深く関わらないと思うので、飛ばします。

wagtail/admin/views/pages.pyが怪しそうですね。
このファイル内でもエラーメッセージを検索して、それがどの関数で使われているのかを調べてみます。

どうやら、323行目のedit関数がそれっぽい感じを出しています。
create関数とedit関数は似ていますね。名前から推察するにページを作成した時と編集した時で動く関数が違うのかなぁ。（そうみたいです）

エラーメッセージが書かれているところはここですね。

```python
messages.validation_error(request, _("The page could not be saved due to validation errors"), form)
```
messagesはファイルの冒頭のimport文を見ると、

```python
from wagtail.admin import messages, signals
```
[wagtail/admin/messages.py](https://github.com/wagtail/wagtail/blob/9be694b508b1dedb2616516fcd630727c0cd762e/wagtail/admin/messages.py)のことだとわかりますね。
色々関数が書かれていますけど、大体はrender関数に処理が移行するみたいです。

```python
def render(message, buttons, detail=''):
    return render_to_string('wagtailadmin/shared/messages.html', {
        'message': message,
        'buttons': buttons,
        'detail': detail,
    })
```

wagtailでページの上部に出てくるバナー(?)メッセージを出すためには、この**messages**を使えばいいことがわかりました。

---

#### messagesメソッドを導入する
では、messagesメソッドを導入していきます。
これまで検討してきたやり方は、models.pyのsaveメソッドで保存時にバリデーションをかけるということです。
この手法では、データベースに保存するかどうかは設定できます。しかし、エラーメッセージの対応は難しいようです。
エラーメッセージを出すために、今回はhooksを使いたいと思います。

hooksはwagtail特有の便利な関数で、ある特定のイベントが発生した時にプログラムを実行する、ということが可能です。
Pageオブジェクトが編集される前や後、Pageオブジェクトが作成される前や後などもhooksは対応しています。
というわけで、Pageオブジェクトが編集された後のhooksを使ってみようと思います。


```python
from django.http import HttpResponse
from wagtail.core import hooks

from wagtail.admin import messages

@hooks.register('after_edit_page')
def after_edit_page(request, page):
    is_title_length_valid = True if (len(page.title) > 0 | len(page.title) < 33) else False
    
    if not is_title_length_valid:
        messages.error(request, "Title Count Error")
    

def index(request):
    return HttpReesponse("Hello, world.")

```
実行結果はこんな感じです。

<img width="1423" alt="スクリーンショット 2020-01-01 0.25.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517540/87cb888b-269c-b051-d4d4-e89031c6a6cf.png">

http://localhost:8000/django-admin/wagtailcore/page/

データベースの保存バリデーションとエラーメッセージの両方が実装できましたね。

---
#### さいごに
ガキ使見ながらやっていたら年を越してしまいました。**-_-**
wagtailではMarkDownで記事が書けるらしいので、それの実装でもしてみようかなと思います。
useAsyncStorageが酷すぎる（超個人的メモ）

![alt](https://user-images.githubusercontent.com/26253721/39765058-e8d0eae4-531b-11e8-9305-4c852f269517.png)

## useASyncStorageが酷すぎる
reactのhooksが出て着たことにより、様々なライブラリがreact hooksに対応し始めた。
AsyncStorageもver 1.1.0でhooksに対応したのだが、実装が酷かったので、ここにメモ。


以下のuseAsyncStorageが使用可能になった。

```js
const { getItem, setItem, removeItem, mergeItem } = useAsyncStorage('@NameOfTheStore')
```

ソースコードを読んでみると8行で実装されていた。
...ドイヒー
何をしているかと言うと、何もしていない。
ただ、コードを複雑にしたラッパーを作成しているだけ。

```js
export function useAsyncStorage(key: string): AsyncStorageHook {
  return {
    getItem: (...args) => AsyncStorage.getItem(key, ...args),
    setItem: (...args) => AsyncStorage.setItem(key, ...args),
    mergeItem: (...args) => AsyncStorage.mergeItem(key, ...args),
    removeItem: (...args) => AsyncStorage.removeItem(key, ...args),
  };
}
```

これは、オブジェクト指向におけるカプセル化が....
と言えなくもない。

だが、以下の二つのスニペットは、全く同じ動作をする。

```js
// hooks
import { useAsyncStorage } from '@react-native-community/async-storage'
const { getItem, setItem, removeItem, mergeItem } = useAsyncStorage('@NameOfTheStore')
getItem()

// 通常
import { getItem, setItem, removeItem, mergeItem } from '@react-native-community/async-storage'
getItem('@NameOfTheStore')
```

useAsyncStorageを使う意味はあるのか？

## まとめ
useAsyncStorageは、実務では役に立たないが、酒の席では役に立ちそうだ

完
webpack エントリーポイント Entry Points

# エントリーポイントとは
モジュールバンドラーでバンドルする際の、**解析のスタート地点**のファイル。
エントリーポイントを起点として、そのファイルで`import`しているモジュールを順番に辿っていく。

# 単一のエントリーポイント => 単一の出力先
`entry`プロパティを指定しない場合、デフォルトでは`./src/index.js`ファイルを見る。
=> エントリーポイントが`./src/index.js`であれば、`entry`プロパティを省略できる。

ファイル名やパスが違う場合は`entry`プロパティで、`webpack.config.js`ファイルからの相対パスを以下のように文字列で指定することができる。

```js:webpack.config.js
module.exports = {
  entry: './src/hoge.js'
};
```

上記は以下の短縮系。エントリーポイントが１つであれば上記で十分。

```js:webpack.config.js
module.exports = {
  entry: {
    main: './src/hoge.js'
  }
};
```

出力先のファイル名を変えたい場合は、`main`をそのファイル名にする。

# 複数のエントリーポイント => 単一の出力先

エントリーポイントが複数ある場合は、以下のように配列で渡すとバンドルファイルを１つにまとめることができる

```js:webpack.config.js
module.exports = {
  entry: ['./src/hoge.js', './src/fuga.js']
};
```

実行すると`dist/main.js`にまとめられている。

# 複数のエントリーポイント => 複数の出力先

エントリーポイントが複数あり、バンドルファイルもそれぞれ分けたい場合は、以下のように記述する。

```js:webpack.config.js
module.exports = {
  entry: {
    app: './src/app.js',
    adminApp: './src/adminApp.js'
  }
};
```

バンドルすると以下のようになる。

![スクリーンショット 2020-01-01 0.34.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308460/ce052cd5-38f3-4a4e-86bc-a9b792eefc12.png)

こちらも同様に配列で渡すことが可能。
【UE4】Editor Utility WidgetをC++から起動する

書いてるときに　あけてました　おめでとう

UE4いじり初めて1年ちょっと・・・　かな・・・？
そのレベルの人が色々調べてやってみたことを適当にメモっておくよ

---

Editor Utility Widgetでエディタ拡張がすっごい作りやすくなったけど
そのUIを起動するときに一々アセットを右クリックしてやったり分かりにくいメニューから起動するのってなんかね

自分で追加したメニューから起動したいやん？

ってことで
UIをC++から起動する方法のメモ

ちなみにUE4.24.1でのみ確認してます。

## 独自のメニューを追加
http://historia.co.jp/archives/370/
みんな大好きヒストリアさんのところがおすすめだぞ。

## Editor Utility WidgetでUIを作成
https://qiita.com/EGJ-Kaz_Okada/items/9f530db3b53d0fde3f20
おかずさんのところがおすすめだぞ。

## C++でEditor（略を表示する
ここからが本番

まずはアセットをロードする。

```c++

auto WidgetBlueprint = LoadObject<UBlueprint>(NULL, TEXT("パス"), NULL, LOAD_None, NULL);
```
普通にUBlueprintで読み込んでおけばOK

それをUEditorUtilityWidgetクラスにキャスト

```c++

TSubclassOf<UEditorUtilityWidget> WidgetClass = (TSubclassOf<UEditorUtilityWidget>)WidgetBlueprint->GeneratedClass;
```

そしてこれを使ってCreateWidgetする

```C++

UWorld* World = GEditor->GetEditorWorldContext().World();
UEditorUtilityWidget* CreatedUMGWidget = CreateWidget<UEditorUtilityWidget>(World, WidgetClass);
```

んで生成できたらSWindowにSetContentする

```C++

Window->SetContent(CreatedUMGWidget->TakeWidget());
MyWindow.Pin()->BringToFront(); // 最前面へ
```

たったこれだけで独自のメニューからEditor Utility Widgetで作ったUIを起動できるようになる。

まぁ　こんなことしなくてもメニューに追加されはするので
あくまでもわかりやすくするためだぁね

クラス設定とかからこのメニュー名設定できれば良いんだけど
さらに強いて言うなら
Unityのエディタ拡張みたいな感じでやれれば良いんだけどね・・・

まぁ　しゃーない

っと　こんな感じで
書ける範囲で色々書いていけると良いな

では　ノシ
【SwiftUI】現在のテーマが通常かダークテーマか調べる

# 概要
現在のテーマが、端末で設定されているダークテーマかライトテーマ(通常)か調べる方法

# 方法
現在設定されているテーマを、

```swift

@Environment(\.colorScheme) var colorScheme: ColorScheme
``` 
を使って取得します

```ColorScheme``` は、 ```ColorScheme.dark```と```ColorScheme.light``` というプロパティが存在しており、取得した```colorScheme```には上記のどちらかが設定されています

# 実装例
下記の例では現在のテーマを取得して、それに合わせた文字の色を設定しています


```swift
struct ContentView: View {

    //1. 現在の設定を取得
    @Environment(\.colorScheme) var colorScheme: ColorScheme

    var body: some View {
       Text("Hello World!")
           //2. 定義した変数のcolorSchemeを使って調べる(ダークテーマの場合は ColorScheme.dark)
           .foregroundColor(colorScheme == ColorScheme.light ? .black : .white)
    }


    struct ContentView_Previews : PreviewProvider {
        static var previews: some View {
            Group {
　　　　　　　　　//ライトテーマ(通常)
                ContentView()
　　　　　　　　　//ダークテーマ
                ContentView().environment(\.colorScheme, .dark)
            }
        }
    }

}
```

# 参考文献
[Xcode 11 -- SwiftUI's dark mode setup - Stack Overflow
](https://stackoverflow.com/questions/56531508/xcode-11-swiftuis-dark-mode-setup)
[ColorScheme - SwiftUI | Apple Developer Documentation] (https://developer.apple.com/documentation/swiftui/colorscheme)
LTspice Mac版ショートカット

# 目的
　LTspiceをMacで快適に使うために、ショートカットをまとめる
#この記事が役に立ちそうな人
　LTspiceをWinからMacに移行したい人
# 内容
Mac版の回路図<img width="786" alt="191229_LTSPICE.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227351/b4ca4006-8f24-0c6b-b0ed-19a54f26e6a4.png">
Win版に存在したメニューバーにショートカットキーがない！
Mac版は基本的に右クリックで表示されるメニューから配線、部品の設置を行う。
<img width="154" alt="スクリーンショット 2019-12-29 18.57.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227351/f1dedee9-dc45-e413-3825-db13eca9d07c.png">

一個ずつメニューを辿ればできないこともないけど、
ショートカットを使うことで、楽することができる。

#ショートカット集
僕が良く使うショートカットキー。
使い方は[fn]キー＋各ファンクションキー[F2等]です。

[fn]+Space :ズームフィット　画面サイズを回路の大きさにフィットさせる
[fn]+S     : Spice directiveの追加

[fn]+F2 : デバイス追加
[fn]+F3 : 配線を引く
[fn]+F4 : NetName 電位に名前をつける。GNDの設置もここから
[fn]+F5 : 削除（はさみ）
[fn]+F6 : コピー
[fn]+F7 : 移動
[fn]+F8 : ドラッグ

[fn]+F9 : undo、やりなおし

# 解析
また解析モードを設置する機能がパッと見つからない・・・
もしかして、自分でSpice directiveを記述する必要がある？！（求む情報）
よく使う過渡解析とAC解析は以下。

過渡解析 : .tran <開始時間> <終了時間> <データ間隔>
AC解析 : .ac oct <解析数（数/octave)> <開始周波数＞　＜終了周波数＞

#まとめ
ここまでわかれば、Win版からの移行はできるでしょう。
Spice directiveはWin版と一緒みたいなので。
WIndows で OpenCV の動く環境を Anaconda + python 3.7 で作る

# やること

anaconda で windows 上に python3 で opencv のプログラムが書ける環境を作ります。徳に難しいことはありませんが、メモとして残しておきます。

## 環境

- WIndows 10 home 64 bit
- Anaconda 2019.10
- Python 3.7.4
- OpenCV 

以下を参考にしてます。

- https://qiita.com/FukuharaYohei/items/5d49938ffd33d198f0c0
- https://qiita.com/SatoshiGachiFujimoto/items/94da93f88578b87f6a89

# 手順

## Anaconda のダウンロードとインストール

下記から取得して python 3.7 version をインストールしました。
https://www.anaconda.com/distribution/#download-section

## 環境の構築

Anaconda Prompt で下記を実行します。

```
$ conda create -n cv python=3.7 anaconda
$ conda activate cv
$ pip install opencv-python
$ pip install opencv-contrib-python
```

これで特に問題なくできました。

## 動作確認

適当な mp4 ファイル hoge.mp4 を用意して、下記を実効して1フレーム目の画像が表示されたら、問題なく動いてます（多分）。

```frame.py
import cv2

cap_file = cv2.VideoCapture('hoge.mp4')
cap_file.set(cv2.CAP_PROP_POS_FRAMES, 0)

ret, frame = cap_file.read()
cv2.imshow('img',frame)
cv2.waitKey(0)
```
PHP 配列まとめ

# 目的

- PHPで配列に値を格納して取り出す方法をまとめる

# 書き方の例

- 配列に格納し任意の値を出力する方法を記載する。

```php

$変数A = array("値A", "値B", "値C");

//値Aを出力
echo $変数A[0];

//値Bを出力
echo $変数A[1];

//値Cを出力
echo $変数A[2];

//配列の末尾に値Dを追加するしたい時
$変数A[] = "値D";

//値Aを値Eで上書きたいとき
$変数A[0] = "値E";
```

- 配列に格納された数値を全て足して表示する方法を下記に記載する。

```php
$all = 0;
foreach ($prices as $price) {
  $all += $price;
}
echo $all
```
# PHP 5.4以降の例

- 下記にPHP５．４以降の配列の書き方の例を記載する。

```php
$変数A = ["値A", "値B", "値C"];
```

- valueの値を区切り文字を指定して出力する。

```php
$変数A = ["値A", "値B", "値C"];

echo implode("区切り文字", ＄変数A);
```
Laravel開発時に便利なmake(Makefile)コマンド集

2020年最速の記事です😇

Laravel で開発する際、よく実行する `docker-compose` のように長いコマンドや環境構築時に多数のコマンドを実行する機会が多くあるかと思います。

各個人でalias定義したりshellの補完機能を設定しても良いですが、共有するのは手間です。

そんな時に Makefile を用意しておくと複数のコマンドを一度に実行するようにタスク登録できて便利です。 Makefile をGitで管理しておけば共有もとても楽になります。

## make コマンド

```shell-session
$ make --version
GNU Make 3.81
Copyright (C) 2006  Free Software Foundation, Inc.
This is free software; see the source for copying conditions.
There is NO warranty; not even for MERCHANTABILITY or FITNESS FOR A
PARTICULAR PURPOSE.

This program built for i386-apple-darwin11.3.0
```

`make` コマンドが使える環境ならokです。

## Makefile 使い方

コマンドを実行するディレクトリに `Makefile` という名前で配置すればokです。

```shell-session
$ make up
# docker-compose up -d # このコマンドが実行される
```

## Makefile 例

参照ファイル: [ucan-lab/docker-laravel/Makefile](https://github.com/ucan-lab/docker-laravel/blob/master/Makefile)

あくまでも例なので参考程度にしてください。

```makefile:Makefile
up:
	docker-compose up -d
build:
	docker-compose build
create-project:
	docker-compose up -d --build
	docker-compose exec app composer create-project --prefer-dist laravel/laravel .
	docker-compose exec app composer require predis/predis
install:
	docker-compose up -d --build
	docker-compose exec app composer install
	docker-compose exec app cp .env.example .env
	docker-compose exec app php artisan key:generate
	docker-compose exec app php artisan migrate:fresh --seed
reinstall:
	@make destroy
	@make install
stop:
	docker-compose stop
restart:
	docker-compose down
	docker-compose up -d
down:
	docker-compose down
destroy:
	docker-compose down --rmi all --volumes
ps:
	docker-compose ps
app:
	docker-compose exec app bash
fresh:
	docker-compose exec app php artisan migrate:fresh --seed
seed:
	docker-compose exec app php artisan db:seed
tinker:
	docker-compose exec app php artisan tinker
dump:
	docker-compose exec app php artisan dump-server
test:
	docker-compose exec app php ./vendor/bin/phpunit
cache:
	docker-compose exec app composer dump-autoload -o
	docker-compose exec app php artisan optimize:clear
	docker-compose exec app php artisan optimize
cache-clear:
	docker-compose exec app php artisan optimize:clear
cs:
	docker-compose exec app ./vendor/bin/phpcs
cbf:
	docker-compose exec app ./vendor/bin/phpcbf
db:
	docker-compose exec db bash
sql:
	docker-compose exec db bash -c 'mysql -u $$MYSQL_USER -p$$MYSQL_PASSWORD $$MYSQL_DATABASE'
node:
	docker-compose exec node ash
npm:
	docker-compose exec node npm install
	docker-compose exec node npm run dev
yarn:
	docker-compose exec node yarn
	docker-compose exec node yarn dev
```

これをベースに各プロジェクト用のコマンドを追加して使うと良い感じかなと思います。

## 参考

- [Makefileの関数](https://qiita.com/chibi929/items/b8c5f36434d5d3fbfa4a)
- [Make覚書](https://qiita.com/Shigets/items/27170827707e5136ee89)
- [2016年だけどMakefileを使ってみる](https://qiita.com/petitviolet/items/a1da23221968ee86193b)
- [Go言語開発を便利にするMakefileの書き方](https://qiita.com/yoskeoka/items/317a3afab370155b3ae8)
閲覧しているWebページの画像ファイル名一覧を表示するブックマークレット

`img`要素の`src`属性の値を一覧でブラウザーのコンソール画面に表示するブックマークレット。

```js
javascript:Array.prototype.forEach.call(document.querySelectorAll('img[src]'), el => console.log(el.getAttribute('src')));
```

次のブックマークレットは、画像ファイルの拡張子が`.png`、`.jpg`、`.gif`である場合のみコンソール画面に表示される。

```js
javascript:Array.prototype.forEach.call(document.querySelectorAll('img[src]'), el => { const src = el.getAttribute('src'); if (src.match(/\.(?:png|jpg|gif)$/)) console.log(src); });
```
Common Data Service セキュリティモデル : 階層セキュリティ

[前回](https://qiita.com/kenakamu/items/4eb4b55b52ccc4617bf4)は Common Data Service (CDS) のセキュリティより共有を見ていきましたが、今回は階層セキュリティを見ていきます。

[参照: アクセスを制御する階層セキュリティ](https://docs.microsoft.com/ja-jp/power-platform/admin/hierarchy-security)

# 階層セキュリティ

CDS はシリーズの初めに説明した通り、部署の階層によりセキュリティを管理します。また部署を超える場合はチームを使う事もできますが、現実世界では部署の構造とセキュリティの構造が一致しないことは多々あります。

その場合、同じく階層の概念を引き継ぎつつも部署とは異なる階層モデルを利用できるよう、「階層セキュリティ」が提供されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/1d0a8fa4-84bf-35aa-2108-1fa3c43f4f43.png)

階層セキュリティには以下のオプションがあり、どちらか一方だけを使う事ができます。

- 管理者階層
- ポジション階層

階層は既定で 3 層まで権限が及びます。

# 管理者階層

グローバル企業や複雑な構造をもつ企業では、メンバーとマネージャーが異なる国や地域にいるなどの理由で部署が異なる場合があります。この場合にもマネージャーは管理するメンバーのレコードに対する権限が必要となる場合があり、「管理者階層」が利用できます。
![](https://docs.microsoft.com/ja-jp/power-platform/admin/media/manage-hierarchy-security.png)

対象となるエンティティを選択することと、階層の深さを変えることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/286c9a43-f41a-1a4d-3bde-190bce143df8.png)

管理者階層を使う場合は、ユーザーの上司を設定してください。

# ポジション階層

上部/部下の関係以外にも、企業が定義するポジションによる階層が存在する場合、ポジション階層を利用できます。
![](https://docs.microsoft.com/ja-jp/power-platform/admin/media/position-hierarchy.png)
考え方は管理者階層と同じですが、ポジションは別途設定する必要があります。
「カスタムポジション階層」を選択後、「構成」をクリックしてポジションを作成、構成してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/2f02b0c8-7c3f-351a-b02e-b07e41885f7a.png)

# 動作確認

最後に動作確認します。各種データや設定は[初めの記事](https://qiita.com/kenakamu/items/1f039d8dfa787c4f0fac)で設定したものを使います。

上司設定は以下のようになっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/25207875-1161-031d-3bc9-3d23e9797d18.png)

1\.「営業部 部長」のセキュリティロールを「Common Data Service User」のみに変更。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/6f30ae08-8771-2b1f-f304-49cecc58285c.png)

2\. アプリより現時点での「アクティブな取引先担当者」を確認。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/f4ebe102-25b5-7be8-e376-65e16b465b2a.png)

3\. 階層セキュリティより「管理者階層」を「深さ: 1」で設定。「保存して閉じる」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/46583ac0-ea0b-90d4-e386-c74cc4501afe.png)

4\. 再度アプリより「アクティブな取引先担当者」を確認。「営業部 部長」が上司として設定されている「第1営業部 部長」と「第2営業部 営業担当」のレコードが見えることを確認。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/1e9147d9-1604-b3f7-15d7-506312ce9d8d.png)

5\. 階層の深さを 2 に設定。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/44c147a3-2c66-f40c-74a9-f62d1e5b719c.png)

6\. 再度アプリより「アクティブな取引先担当者」を確認。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/f1a857dd-5a4a-45be-486a-1cde193e1bb4.png)

# まとめ

部署とセキュリティの構成が異なる場合に、より直感的に利用できる選択肢ですが、管理者階層とポジション階層のどちらを使うか初めに慎重に検討してください。次回はフィールドレベルセキュリティを見ていきます。

次の記事へ
【Vue.js】Vuetifyのv-data-tableで行クリックとチェックボックスの連動

# 概要
以下、Vue.jsのUIライブラリである[Vuetify](https://vuetifyjs.com/en/)の話です。
`v-data-table`にチェックボックスを表示しつつ、行のクリックをチェックボックスも連動させたかったときのメモです。



# 方法


```vuejs:
<template>
  <v-data-table
    v-model="selected"
    :headers="headers"
    :items="items"
    item-key="id"
    show-select
  >
    <template v-slot:item="{ item, isSelected, select }">
      <tr :class="[{'v-data-table__selected': isSelected}]" @click="select(!isSelected)">
        <td>
          <v-simple-checkbox :value="isSelected" @input="select($event)" />
        </td>
        <td v-for="header in headers" :key="header.value">
          {{ item[header.value] }}
        </td>
      </tr>
    </template>
  </v-data-table>
</template>

```
`v-data-table`の`v-slot`のうち、テーブルのデータにクリックを仕込めそうなのは`body`, `item`, `item.<name>`あたりに見えると思います。
ただこのうち「行」の選択済み情報を持っているのは `item`のみです。
`item`の `isSelected`がそれに該当します。
そして`item`の `select`という選択のためのファンクションも持っていますのでこれを使います。

```
<tr @click="select(!isSelected)" >
```
この部分が本稿の全てです。
trタグに`@click`を書けばクリックイベントが仕込めることはVue.jsを勉強したらお分かりかと思います。
`v-slot`の`select`は直感的でチェックをつけたければtrueを、外したければfalseを渡してあげればいい形です。
`v-slot`には行が選択されているかの情報である`isSelected`がありますので、それを逆にして渡してあげればいいと、となります。
これで、行をクリックしたときにもチェックボックスにチェックがつきます。

# 蛇足
以下は失敗談です。

```
<v-simple-checkbox :value="isSelected" @input="select($event)" />
```
チェックボックスの部分の上記のソースですが、これは[公式のslotのサンプル](https://vuetifyjs.com/en/components/data-tables#slots)の`item.data-table-select`の部分でも記載されているものと同一です。
この部分を参考に、最初は`@input`の右辺をそのまま<tr>に仕込んでいました。

```
<tr @click="select($event)" >
```

ただこれは動きませんのでご注意ください･･･。
複数の Amazon SES 環境でドメイン検証を行なう（お名前.com 編）

# Route 53 だったら話は早いけど
AWS 上でシステムを構築する場合、DNS(ドメイン)運用には Amazon Route 53 を利用するのが最善であろうと思います。
しかし、様々な事情により DNS(ドメイン)運用は他社サービスで行なっている という場合も少なくないと思われ、私のところにも お名前.com で運用を行なっているドメインがあります。

AWSのメール送信（受信もできますけど）サービスである Amazon SES を利用する際に行なうことになる「ドメイン検証」は、DNSに ドメイン検証用のTXTレコード を登録することで行ないます。
同じメールドメインを 複数の Amazon SES 環境（別のリージョンとか、別のAWSアカウントとか）で使用する場合、ドメイン検証用の TXTレコード を複数登録する必要が生じますが、Route 53 の場合のやり方は、ちょっと探せば見つかると思います。
今回、お名前.com を使っている場合にどうすればよいか少し悩んだため、他の誰かの役に立つことがあるかもしれないと思い、記事にさせていただきました。

# サクっと結論から
お名前.com の DNSサービス では、同じホスト名の TXTレコード を複数 別々に登録することができます。（お名前.com 以外のDNSサービスでも大抵できるんですかね？^^;）

ですので、Amazon SESのドメイン検証用に登録するTXTレコード（ホスト名 "_amazonses.example.com." を複数登録してやれば問題ありませんでした。

いくつぐらいまで問題ないかは未検証ですが、少なくとも３つ別々に登録しても大丈夫でした。


# 少しだけ、詳しい話を
Amazon SES で「ドメイン検証」を行う場合、ホスト名 "_amazonses.example.com." の TXTレコード に、Amazon SES が指定する Value を設定する必要があります。
Route 53 でこの設定を行なう場合は、当該 TXTレコードの Value に改行を入れることで、複数の値を設定することができます。

ところが、お名前.com の DNSサービスで同じように設定しようとしても、Value に改行を入れたりして複数の値を設定することができず、「どうしよう？^^;」と思ってしまったわけです。
前述のとおり、お名前.com では同じホスト名で複数のTXTレコードが登録できたので、それで解決できました。（同じホスト名で複数のTXTレコードを登録するのは、SPFレコード登録の 間違い例 でよく聞くパターンですよね。）

ちなみに、AWSサポートへも問い合わせてみたところ、
ホスト名 "_amazonses.example.com." の他に、ホスト名から ”_amazonses.”を除いた "example.com." のTXTレコードでも Amazon SES のドメイン検証が可能とのことでした。
同じホスト名で複数のDNSレコードを登録できないような場合は、上記２パターンの DNSレコード を登録することで、２つまでの Amazon SES 環境で「ドメイン検証」ができますね。


# あとがき
ちょっと小さなネタではありますが、2019年のうちに１本記事を書きたかったので、恥ずかしながら初めての投稿とさせていただきました。
アウトプットも練習が必要・・ということで、2020年は情報の海を汚さないぐらいの記事をがんばって書いていこうと思います。^^
Common Data Service セキュリティモデル : レコードの共有

[前回](https://qiita.com/kenakamu/items/1f039d8dfa787c4f0fac)は Common Data Service (CDS) のセキュリティとして、ユーザー、チームとセキュリティロールについて説明しましたが、今回はレコードの共有を見ていきます。

# 共有

複数のユーザーが同一レコードにアクセスする必要がある場合、セキュリティモデルでは対応できない、もしくは手間がかかる場合あります。共有はそのような場合に手軽に使えますが、いくつか注意事項もあります。

共有はレコード単位で行われ、レコードのメニューより行えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/57c13868-fbe5-c7de-5b28-c67cee2cd067.png)

共有の対象は、ユーザーまたはチームが選択できます。また各操作ごとに権限を指定できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/3375ae9e-93c5-7215-7465-ae7d3914e47c.png)

また、親レコードを共有した場合、子レコードの権限は「関連の伝播設定」に依存します。多くの場合は親レコードと同じ権限が子レコードに対しても与えられる場合が多くなります。

# 共有の課題

共有にはいくつかの課題があります。

## 設定が見えない

共有は非常に簡単に行える半面、設定がレコードからしか見えないという課題があります。管理者が一貫して確認する画面がないため、あるユーザーが意図せぬレコードの参照ができる場合などにトラブルシューティングが困難になるという課題があります。

また伝播より子レコードに権限が広がった場合に、より確認が困難になります。

## パフォーマンス

ユーザーがレコードの一覧を表示した場合に、セキュリティロールベースでの権限だけでなく、個別レコードの権限も確認する必要があるため、パフォーマンスに影響が出ます。

# チームとの使い分け

基本的にはチームを使うことを強く推奨します。チームの作成や管理および権限割り当てなどプラスの作業が発生しますが、全体的な管理性とパフォーマンスを維持することが容易になります。

# まとめ

今回は共有についてみていきました。共有は Dynamics 初期からある機能で、セキュリティロールの限界を超えるための機能として存在しましたが、その後チームが実装されて使われる機会も減っていると思います。こんな機能があるという程度の認識でいいと思います。

[次の記事へ](https://qiita.com/kenakamu/items/eed3b6ae561c4e9ca148)
「文言」でレンダリングhelloworld(問天地好在)してみた

## はじめに

[前回](https://qiita.com/libru1/items/6542b45a945fc7fe10cf)インストールしたwenyanコマンドを使い、レンダリングに挑戦します

## 実行
レンダリング処理はソースファイルを読み、縦書きにレンダリングし、svgファイルとして出力します。
usageを確認します

```sh
$ wenyan
 ,_ ,_
 \/ ==
 /\ []

WENYAN LANG 文言 Compiler v0.1.2

Usage: wenyan [options] [files...]

Options:
  -v, --version        Output the version
  -l, --lang <lang>    Target language, can be "js", "py" or "rb" (default: "js")
  -c, --compile        Output the compiled code instead of executing it
  -e, --eval <code>    Evaluate script
  -i, --interactive    Interactive REPL
  -o, --output [file]  Output compiled code or executing result to file
  -r, --render         Outputs renderings
  --roman [method]     Romanize identifiers. The method can be "pinyin", "baxter" or "unicode"
  --log <file>         Save log to file
  --title <title>      Override title in rendering
  -h, --help           Display help
```
ver0.1.2になり*-r*オプションが*--roman*から*--render*になりました。

```sh
$ wenyan —render examples/helloworld.wy
```
ソースと同じexamplesフォルダにhelloworld.svgファイルが出来ました。

<img width="396" alt="Screen Shot 2019-12-31 at 6.10.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/334227/9587a8ac-32f2-5564-a5f8-61cccb10a1dc.png">

すごい、バッチリ縦書きでレンダリングされてます:clap_tone1:

しかし、よく見るとノドの逆側、右のタイトル部分に*examples/helloworld*と表示されています。
usageを見直すと、
 *--title*  が *Override title in rendering*とレンダリングに使用される旨表記されています。    

```sh
$ wenyan —render examples/helloworld.wy --text "問天地好在"
```

<img width="396" alt="Screen Shot 2019-12-31 at 6.44.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/334227/d518ba02-e7ff-e5bf-9f5a-c8b533e6f8d2.png">

無事タイトルが入りました

## おわりに

ファイル名はソースと同名、出力もソースと同階層が仮定されて謎のエラーに悩まされる事なく、簡単にレンダリング出来ます。美しいですね
pythonのmoduleとpackageがごっちゃになるの整理しとく


# module
pythonスクリプトの処理の書いてあるファイル

#### 取り込み方
```py

import module_name
# module_name.some_func() で呼び出し
from module_name import some_func
# some_func() で呼び出し
```

#### pathについて
モジュールを検索する時のpathは以下で確認できる

```py

import sys
print(sys.path)
```

pathの先頭は実行ファイルのpathとなる。
追加したい場合は `sys.path.append("./some_path")` などする

# package
moduleをまとめたもの。moduleをまとめたdirectoryに `__init__.py` が必要。

#### 取り込み方

```py

import package_name.module_name
# module_name.some_func() で呼び出し
import package_name.subpackage_name
# subpackage_name.some_func() で呼び出し
from package import module
# module.some_func() で呼び出し
```
ReactでHelloWorldしてから、ちょっとずつ足していく #6

ReactでHelloWorldしてから、ちょっとずつ足していく [#1](https://qiita.com/sato_c/items/e8c41eee6cbcf45355ab) [#2](https://qiita.com/sato_c/items/95ef771e2183f540e9ec) [#3](https://qiita.com/sato_c/items/3f825c6b3580a5f6946b) [#4](https://qiita.com/sato_c/items/2db853d2812e36a4af4c) [#5](https://qiita.com/sato_c/items/4e127b519c59535fada3)

### はじめに

ここで取り上げている内容を「チュートリアル」と書いていたのですが、完全に勘違いしていました。
実際はDocs→MAIN CONCEPTSにあるReactの考え方などをまとめているドキュメントで取り上げている内容を自分なりに理解を進めるためのまとめです。勘違いしたまま続けていたので、ちょっと意味不明になっているところがありました。

前回まででプログラムとしての処理はできていたので、バグ取りした内容をまとめて終わりにします。

残りの
- コンポジション vs 継承
- Reactの流儀
については、内容を読んで終わりにしました。

Reactの流儀は、既存サイトをReactにする方法をまとめたものでしたので、あらためて1から作ることになったときに参考にしていこうと思います。

### 削除がうまくいかない

前回までのプログラムでチェックボックスのチェック→削除ボタンで削除ができるようになりました。
しかし、削除するメンバーを二人以上選択していると削除が正しく動きませんでした。

削除したいメンバーはlocalDLという配列に入れています。
その内容をstateで保存してあるメンバーリストに反映させてから保存すれば削除は完了です。
しかし、複数指定しても一人分しか削除できていません。

そこで調べたところ、

```
nameList = this.state.names.filter(n => n !== localDL[i])
```

となっていた部分を

```
nameList = nameList.filter(n => n !== localDL[i])
```
に修正しました。

バグっている方では、nameListは常にstateで保存した内容から1つだけ削除した内容で更新されます。
(filterがlocalDL[i]にマッチする内容を取り除いて返すため)
その部分をnameListは最初に取りだして、localDLの内容の分1つずつ取り除いてnameListを更新することで、必要な人数削除できます。

これで、自分が当初考えていたメンバーの追加/削除を自由にできて、各メンバーのボタンを押せば挨拶する流れが実現できました。
一通り実装したぶんができたので、今回はこれで終わりにします。

### Reactを使ってみて

なにか新しい技術を使ってみたいと思い、公式サイトのドキュメントを読んだり、チュートリアルをやってみました。
また、Javascriptをあらためてやってみて、TypeScriptも試してみましたが、どちらも理解が足りないので今後の課題です。

Reactに関する情報は、Qiitaも含めてたくさんあるので、わからないところを検索できるのは非常に大きいと感じました。

次は、他のサイトからデータを受信して、それをレンダリングするというのに挑戦しようと思います。

PHP+DBで作っていたサイトをReact+HeadlessCMSに移行するという目的があるので、そのあたりもまた何か書けるようなことがあったらまとめて記事にしたいところです。
ruby における unless の利用が許容される範囲 (個人的見解)

# Overview

ruby では unless という構文が使えますが、これが時に可読性を著しく下げてしまう要因になってしまうなあ...と常々思っていました。

`あくまで個人的見解です`が unless を使っても良い条件と、あまり使わない方が良いかなと思っている条件をまとめてみます。

ご意見などありましたらご遠慮なくいただけると幸いです。

# ruby における unless

そもそもの unless の役割を最初にまとめます。

いろんな言語で使われている条件判定の一つに `if` があると思います。この `if` は、`条件式が true と判定される`場合、条件の中に記述した処理を通るというものです。

```ruby
if condition
  # comes here when the result of condition is true
end
```

翻って、`unless` とは、`条件式が false と判定される`場合、条件の中に記述した処理を通るというものです。

```ruby
unless condition
  # comes here when the result of condition is false
end
```

https://docs.ruby-lang.org/ja/latest/doc/spec=2fcontrol.html#unless

# unless がよく使われるケース

ruby だと即時復帰の文化が色濃い気がしているので、以下のように one liner で使うケースが多いかなと思います。

```ruby
return unless condition # when the result of condition is false, return!
```

で、この condition がどんな条件かによって使っていいケースかそうでないかに分かれます...。

# unless を使わない方がいい条件式

```ruby
cond_1 = true
cond_2 = false

puts 'comes here #1' unless cond_1 && cond_2   # 1
puts 'comes here #2' unless cond_1 || cond_2   # 2
puts 'comes here #3' unless !cond_1 && cond_2  # 3
puts 'comes here #4' unless !cond_1 || cond_2  # 4
puts 'comes here #5' unless cond_1 && !cond_2  # 5
puts 'comes here #6' unless cond_1 || !cond_2  # 6
puts 'comes here #7' unless !cond_1 && !cond_2 # 7
puts 'comes here #8' unless !cond_1 || !cond_2 # 8
```

このスクリプトを実行すると、何番が出力されると思いますか？
答えは `[#1, #3, #4, #7]` なのですが、自分はよーく考えないと分からないです。。。(特に条件に否定が入っている場合)

ということで個人的に unless を使わない方が個人的にいいと思う条件式は、`条件を複数含む条件式`です。

# unless を使っても良い条件式

反対に `unless` を使ってもいいと思う条件式は、以下のように`条件が一つ`の場合です。

```ruby
cond_1 = true
cond_2 = false

puts 'comes here #1' unless cond_1   # 1
puts 'comes here #2' unless cond_2   # 2
puts 'comes here #3' unless !cond_1  # 3
puts 'comes here #4' unless !cond_2  # 4
```

これだと、条件式の結果が false になっているものなので `[#2, #3]` ということがすぐわかります。

# unless の意義を考える

@scivola さんのご意見を受けて

```
そもそも条件式に ! を使わなくて済むように，というのが unless の存在意義の一つ
```

は確かにその通りだなと思いました。

```ruby
cond_1 = true

puts 'comes here #3' unless !cond_1
```

と書いて `unless` と `!` で二重否定の条件になるくらいであれば、大人しく

```ruby
cond_1 = true

puts 'comes here #3' if cond_1
```

と `if` を使った方がいい気がします。

# まとめ

ということで、`unless` の利用について個人的見解をまとめてみると以下のようになります。

- 条件式の条件が一つの場合は `unless` を使っても大丈夫。
- 条件式の条件が複数はなるべく `unless` ではなく `if` を使うことを検討する。
- `unless` と `!` で二重否定の条件になるくらいであれば `if` を使うことを検討する。

# おまけ

`unless` から `if` の変換に `ド・モルガンの法則` を利用すると楽に変換することができます。

<img width="268" alt="スクリーンショット 2020-01-03 12.06.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182916/302aa65f-978b-ff54-ada5-8b25dd350c52.png">

`unless A || B = if !A && !B`

<img width="263" alt="スクリーンショット 2020-01-03 12.06.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182916/06c93f4f-8bc1-ef12-9b1d-03f6f1400f3b.png">

`unless A && B = if !A || !B`

`unless` と `ド・モルガンの法則` については、
@jnchito さんの記事がとてもわかりやすかったのでリンクを載せさせていただきます :pray: 

https://qiita.com/jnchito/items/a24e2b188e44c0f8c2ad
PC上で編集したファイルをNDKでビルドしてadb経由で実行する

ほぼタイトルに書いてあることをしただけですが、せっかくなんで共有します。
例はアセンブリーで書かれたファイルをビルド・実行していますが、C言語でも同じようなことをすれば実行できるはずです（確かこの前試してうまくいった）。
ちょっとしたファイルをビルドしてAndroidで実行したいという時に参考にしてください。
Android Studioを立ち上げるまでもなく済みます。

# 背景

1. 最近わけあってアセンブリーを勉強し始めた。
1. お皿洗ってるときについでに勉強したいな、と思ってYouTubeで検索したら[Assembly Language Tutorial](http://www.newthinktank.com/2016/04/assembly-language-tutorial/)が見つかった。
1. やっぱり観るだけじゃ勉強にならないので実行したくなった。
1. 例はARM 32bit向けなので、手元のAndroidスマホなら実行できるかな、と思った。
    - 実際にはARM 64bitなので結構勝手が違い、移植に苦戦しましたが...

# あらかじめインストールしたもの

- Android NDK r20（以下、「NDK」と呼びます）
- Android SDK Platform Tools 29.0.2（以下、「Platform Tools」と呼びます）

# やったこと

## 必要なコマンドを`PATH`に追加

私の場合、

- `C:\android-sdk\android-ndk-r20b`にNDKを、
- `C:\android-sdk\platform-tools`にPlatform Toolsを

インストールしたので、以下のディレクトリーを`PATH`に追加しました。

- `C:\android-sdk\android-ndk-r20b\toolchains\llvm\prebuilt\windows-x86_64\bin`
- `C:\android-sdk\platform-tools`

## あとは繋いで`adb push`して実行するだけ

準備ができたら、お手持ちのAndroid端末を繋ぎましょう。
環境によってはさらに追加のドライバーや設定が必要かも知れませんが、手元の端末はすでにそこはクリアしているので省略します。

続いて、ビルドしたいソースコードを用意します。

冒頭に挙げたAssembly Language Tutorialを参考に、status code 65でexitするだけという、Hello Worldですらないものを書きました。
`asmtut1-1.s`という名前で保存します。

```nasm:asmtut1-1.s
.text

.global _start

_start:
MOV X0, #65
MOV X8, #93

SVC 0
```

※Assembly Language TutorialではARM 32bitのアセンブリーを紹介していますが、私の手元の端末はARM 64bitなので、[仮想 Arm64 マシンの作り方](https://www.mztn.org/dragon/arm64_01.html)を参考に翻訳しました。
きっとこれ以降も翻訳が必要な箇所があるかと思いますが、頑張ります。

ファイルができたら次のコマンドを入力してビルドします。

```bash
> aarch64-linux-android-as.exe asmtut1-1.s -o asmtut1-1.o
> aarch64-linux-android-ld -o asmtut1-1 asmtut1-1.o
```

`as`コマンドと`ld`コマンドに`aarch64-linux-android-`を付けただけです。

あとは`adb push`で端末に転送して実行するだけです。
とりあえず実行するだけなら`/data/local/tmp`というディレクトリーを使うのが簡単です。

```bash
> adb push asmtut1-1 /data/local/tmp/
asmtut1-1: 1 file pushed. 0.1 MB/s (856 bytes in 0.014s)
```

```bash
# Android端末上のshを起動する
> adb shell

# 実行権限を付けるのを忘れずに！
ocean_n:/ $ chmod +x /data/local/tmp/asmtut1-1

ocean_n:/ $ /data/local/tmp/asmtut1-1
65|ocean_n:/ $ echo $?
65
#^ exit codeがX0にMOVした値、65になった！
```

`aarch64-linux-android-as`を`aarch64-linux-android21-clang`（Windowsの場合`aarch64-linux-android21-clang.cmd`だったはず）に変えればC言語を試すこともできるはずです。

# 今後

そういえば[Assembly Language Tutorial](http://www.newthinktank.com/2016/04/assembly-language-tutorial/)はこの後gdbも使うみたいですが、どうやってやろう...😰
やっぱり[Termux](https://play.google.com/store/apps/details?id=com.termux&hl=ja)を入れるしかないかな...。
当初Termuxと[Vysor](https://vysor.io/)を使ってAndroid上のファイルを直接いじっていたんですが、微妙な使い心地だったので...。
【Vue.js】Vuetifyのv-data-tableの改行をCSSでやめさせる

# 概要
以下、Vue.jsのUIライブラリである[Vuetify](https://vuetifyjs.com/en/)の話です。
`v-data-table`の見た目を力技で顧客要望にできるだけ近づけようとしていた時のメモ。

`v-data-table`では、テーブルのヘッダーのやデータの値が長かったり記号まじりだったりすると、ウィンドウの横幅に応じて~~勝手に~~適宜改行してくれます。
ただ改行すると縦に伸びるわけで、それは嫌だという要望に対処します。
以下の記載は単純なCSSでの記載なので適宜環境に合わせてください。

# 方法

テーブル全体に強制したい

```vuejs:テーブル全体
<style scoped>
.v-data-table {
  white-space : nowrap;
}
</style>
```

ヘッダーだけに強制したい

```vuejs:テーブル全体
<style scoped>
.v-data-table th {
  white-space : nowrap;
}
</style>
```

データ行だけに強制したい

```vuejs:テーブル全体
<style scoped>
.v-data-table td {
  white-space : nowrap;
}
</style>
```

やっていることは全部同じですね。
強制した範囲に応じてCSSを書いてあげればいい形です。


もし１つの.vueファイルの中に2つの`v-data-table`があって、その片方にだけ適用したい場合は以下です。

```vuejs:テーブル全体
<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    class="myTable-1"
  ></v-data-table>
  <v-data-table
    :headers="headers2"
    :items="desserts2"
    class="myTable-2"
  ></v-data-table>
</template>
<style scoped>
myTable-1.v-data-table {
  white-space : nowrap;
}
</style>
```

当然white-spaceにnowrap以外のものも指定できるので、
各位の使用にあわせて読み替えていただければと思います。
PythonでABC101のA~C問題を解く

### はじめに
[前回](https://qiita.com/taxfree_python/items/264f6db542a939b0041e)からratedコンテストには出てないので進捗はないです。
タイトル詐欺になってますが、Cは解けませんでした。
### A問題
[問題](https://atcoder.jp/contests/abc101/tasks/abc101_a)
**考えたこと**
sは入力値
出力はsの中の'+'と'-'によって決まるので、sの中の'+'と'-'をカウントすればいいと考えた。

```python
s = list(input())
print(s.count('+')-s.count('-'))
```
countメソッドはintで返されるので、そのまま計算しています。

###B問題
[問題](https://atcoder.jp/contests/abc101/tasks/abc101_b)
**考えたこと**
nは入力値
最初に考えたのは、nをどうやって十進法の桁表示にするかです。最初は、桁を数えて$10^{桁数}$で割って計算しようかと思いましたが、pythonではもっと便利な方法があるのではとなり別の方法で実装しました。nをstrにしてlistにするという方法です。流れとしては、int→str→listです。pythonでは、strをlistにすると一文字ずつの要素を持ったlistになります。こうすることによってlistのindexを指定することによって計算することができるので楽になったかな?

```python
n = int(input())
n_l = list(str(n))
m = 0
for i in n_l:
    j = int(i)
    m += j
if n % m != 0:
    print('No')
else:
    print('Yes')
```
計算はごり押しです。

###C問題
[問題](https://atcoder.jp/contests/abc101/tasks/arc099_a)
解けませんでした。言い訳、ARCの問題だから。**見苦しい**
**考えたこと**
n,k,aは入力値
問題を見て、最小値は必ず1になることは分りました。理由は、数列aは1~nを並びかえた数列なのでどのように並び換えても最小値は1になるからです。そして、最初はnのなかに何個の(k-1)が入るかを考えました。~~これが一番おしかった~~。もちろんこの考え方は間違ってます。どこが間違っているかというと、最小値1を除いた数列の要素を変換するので、全体の要素はnではなく(n-1)になります。ここを見落していました。この間違いに気付けなかった自分が悲しい。

```python

n, k = map(int,input().split())
a = list(map(int,input().split()))
ans =  n // (k-1)
print(ans)
```
もちろんWAです。
このあとも色々考えましたが、迷宮に入って結局解けませんでした。
一応、解説を読んで理解はしたつもりです。

###まとめ
今回はCが解けなかったので、102のCは解けるようにがんばります。Cまで解けるようになりたい。
getElementById()とgetElementsByClassName()の違い

#getElementById()とgetElementsByClassName()の違い

getElementById()とgetElementsByClassName()の違いを自分がわかるように、サンプルプログラムを作りました。
コピー＆ペーストで利用可能です。

```html:title


<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>getElementById()とgetElementsByClassName()の違い</title>
  </head>
  <body>
    <div>↓getElementById()を使った実験</div>
    <div>getElementsById()は引数で指定したId名のエレメントを取得する。</div>
    <div id="quiz1">第1問！</div>
    <div id="quiz2">第2問！</div>
    <div id="quiz3">なし</div>
    <div id="quiz4">第4問！</div>
    <div id="quiz4">第5問！</div>
    <div></div>

    <script>
        var quiz1 = document.getElementById('quiz1');
        var quiz2 = document.getElementById('quiz2');
        var quiz3 = document.getElementById('quiz3');
        var quiz4 = document.getElementById('quiz4');
        var quiz5 = document.getElementById('quiz5');
        quiz2 = "ああああ";                     //quiz2のinnerHTMLに代入していないので、「ああああ」は表示されない
        quiz3.innerHTML = "第3問！";            //これが正しい。
        quiz4.innerHTML = quiz1.innerHTML;      //これも正しい。
        quiz5[0].innerHTML = "ああああ";        //間違い。getElementsByClassName()の書き方。
    </script>
    
    
    <div>↓getElementsByClassName()を使った実験</div>
    <div>getElementsByClassName()は引数で指定したclass名のエレメントを配列として取得する。</div>
    <div class="quiz2_1">第1問！</div>
    <div class="quiz2_2">第2問！</div>
    <div class="quiz2_3">なし</div>
    <div class="quiz2_4">第4問！</div>    
    <div class="quiz2_4">第5問！</div>
    <div class="quiz2_4">第6問！</div>
    
    <script>
        var quiz2_1 = document.getElementsByClassName('quiz2_1');
        var quiz2_2 = document.getElementsByClassName('quiz2_2');
        var quiz2_3 = document.getElementsByClassName('quiz2_3');
        var quiz2_4 = document.getElementsByClassName('quiz2_4');
        quiz2_2 = "ああああ";               //間違い。
        quiz2_3.innerHTML = "第3問！"       //間違い。getElementsByClassName()で取得するのは、エレメントの配列であるため
        quiz2_4[0].innerHTML = "第3問！"    //正解。
        quiz2_4[1].innerHTML = "第3問！"    //正解。
        //第6問！の表示は、そのまま表示されていることに注意。
    
    </script>
  </body>
</html>
```
「Linuxってなんだ？」と思ったので調べてみた

##Linux、説明できますか？
年末年始のお休みを活用して、いま自宅サーバーを立てようと頑張っています。
そこで、サーバーOSとしてUbuntuを入れました。
他にもCentOSも検討していました。

サーバーようにOSを選んでいた時に、ふと思いました。
「Linuxベース」とか「Linuxディストリビューション」とか聞いたことはあるけど、よくわからないことが多いなと。そこで、今回は自分のためにもLinuxについて調べてまとめてみました。

## 「Linux」はOS?
ここでは、そもそも、よく耳にする「Linux」って何？って疑問についてまとめました。

何も知らずに「LinuxってOSがあるのかなー」みたいに思っていましたが、それはちょっと違うみたいです。

「Linux」という言葉が指す機能は厳密に言うとOSの根幹機能であるカーネルなんだそうです。
しかし、一般的な使われ方の範疇では、カーネルやそれに付随するシステムソフトウェアをパッケージ化しているディストリビューションのことを指して「Linux」と呼ぶことが多いんだとか

##LinuxカーネルとLinuxディストリビューション
Linuxの定義がなんとなく分かったところで、カーネルとディストリビューションの違いを少し細かく調べました。

**・Linuxカーネルとは**
ハードウェアとソフトウェアの仲介をしてくれる機能がカーネル。
具体的な使われ方としては、CPUのリソースをアプリケーションごとにどう振り分けるのか、ハードウェアからの処理の順番を定めるなどの作業を行ってくれているとのこと。

より詳細については[コチラの記事](https://qiita.com/uguis410/items/17ec1e447e9716bfdca7)にあります。

**・Linuxディストリビューションとは**
distributionは英語で「配布」という意味です。
これは、カーネルを含むその他OSを構成するシステムソフトウェアをパッケージ化して
誰でも使えるような配布形式にしているためdistributionと呼ばれています。

UbuntuやCentOSもパッケージ化されたディストリビューションの１つと言えます。

##まとめ
Linuxについて簡単にまとめてみました。

意外と知っているようで理解できていないところが多かったです。
また、こんな簡単なまとめでは全く収まらないのがOSの世界でもあります。

その深淵の一部だけでも説明できてたら嬉しいです。