OmniAICreator/Qiita-1.07M huggingface dataset:
HTMLの説明リストのタグ(dl dt dd)の使い方

#プログラミングの勉強日記
2020年8月20日　Progate Lv.226

#それぞれのタグの意味
少し前までは、<font color=blue>定義リスト</font>としての役割を持っていた。
　dl（definition list）：定義リスト
　dt（definition term）：定義する言葉
　dd（definition description）：定義の説明

```html:
<dl>
  <dt>バスケットボール</dt>
  <dd>アメリカ発祥のスポーツ</dd>
</dl>
```
実行結果
![0820-1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/81585c21-2973-b3c6-5454-943953aeb171.png)



HTML5では、<font color=blue>説明リスト</font>としての意味に変わり用途が広がった。
　dl（definition list）：説明リスト
　dt（definition term）：説明する言葉
　dd（definition / description）：定義文 / 説明文

```html:
<dl>
  <dt>バスケットボール</dt>
  <dd>アメリカ発祥のスポーツ</dd>
</dl>
```

実行結果
![0820.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/69b011b7-371c-b4fa-daeb-44023b2c0499.png)


#使い方
　使い方は、まず全体に`dl`を囲い、`dt`に説明したいものを書いて、`dd`にそれに対する説明を書く。dlの中にはdtとddはいくつ書いても大丈夫。

```html:使い方(htmlファイル)
<dl>
  <dt>説明したいこと</dt>
  <dd>それに関する説明</dd>
  <dd>それに関する説明2</dd>

  <dt>説明したいこと2</dt>
  <dd>それ(2)に関する説明</dd>
</dl>
```

#事典的な意味を強調する方法
　HTML5では定義リストと説明リストの2つの役割がある。検索エンジンからはそれぞれ同じタグなので、その内容が定義リストとしてなのか説明リストとしてなのかがわからない。
　定義リストとして、事典的な意味を強調するためには`dfn`タグを使う。

```html
<dl>
  <dt><dfn>バスケットボール<dfn></dt>
  <dd>アメリカ発祥のスポーツ</dd>
</dl>
```

#ulのリストとの使い分け
　単純なリストだけではul(ol)を使ったリストでいいが、リストに説明が必要な場合にdlを使う。

```html:ulを使う例
<ul>
  <li>バスケットボール</li>
  <li>サッカー</li>
  <li>相撲</li>
</ul>
```

```html:dlを使う例
<dl>
  <dt>バスケットボール</dt>
  <dd>アメリカ発祥のスポーツ</dd>
  <dt>サッカー</dt>
  <dd>イングランド発祥のスポーツ</dd>
  <dt>相撲</dt>
  <dd>日本発祥のスポーツ</dd>
</dl>
```


#参考文献
[ライバルに差を付けたい！HTMLコーダー必見のdl dt ddタグの基礎～応用](https://ferret-plus.com/5063)
[HTMLの説明リストタグ【dl・dt・dd】の使い方を徹底解説](https://webliker.info/13381/)
Python3 競技プログラミング用 標準入力

#概要
Python3の競プロ用によく使う標準入力のメモです。

参照するときに迷うことがなくなるように、コメント付きで１つのコードにまとめています。


#コード


```python

'''
標準入力を受け取る方法まとめ
'''

#___文字列や数値をそのままほしい場合___#
# 文字列 １行１つ
s = input()

# 文字列 １行２つ
s, t = input().split()

# 整数 １行１つ
s = int(input())

# 整数 １行２つ
n, m = map(int, input().split())


#___リストでほしい場合___#
# リスト 文字列 １行
a = input().split()

# リスト 整数   １行
a = list(map(int, input().split()))

# リスト 文字列 nが指定行
a = [input() for i in range(n)]

# リスト 整数 nが指定行
a = [int(input()) for i in range(n)]

#___二次元配列でほしい場合___#
#２次元配列 文字列 nが指定行 空白区切りで複数行列
a = [input().split() for l in range(n)]


```
bake modelコマンドを継承した独自コマンドをallで呼び出す

# やりたいこと
[こちら](https://qiita.com/learn_tech1/items/9556eea585dcac6eab6d)の記事で`bake model`コマンドをカスタマイズした`bake baked_model`コマンドを作成した。

今回はこちらのコマンドをテーブルをいちいち指定せずに実行する`bake model all`を継承した`bake baked_model all`を実装する。

# 実装

`ModelAllCommand`を継承して、initializeだけオーバーライドして、`BakedModelCommand`に差し替えるだけ。

```src/Command/BakeModelAllCommand.php
<?php
declare(strict_types=1);

namespace App\Command;

use Bake\Command\ModelAllCommand;

class BakedModelAllCommand extends ModelAllCommand
{
    public function initialize(): void
    {
        parent::initialize();
        $this->modelCommand = new BakedModelCommand();
    }
}

```

# 実行方法

```
bin/cake bake baked_model all
```
ちなみに`baked_model_all`にはならない。
allという単語だけ予約後みたいな扱いでアンスコつなぎにならない仕様のよう。（なのでクラス名を`BakedModelWholeCommand`とすると`baked_model_whole`となる。）
【Laravel】ユーザ認証/ユニットテスト

こちらの記事は以下の書籍を参考にアウトプットとして執筆しました。
[PHPフレームワーク Laravel入門 第2版](https://www.amazon.co.jp/dp/B08625YD7H/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)

#ユーザ認証
Laravel標準装備の認証機能「Auth」について

ユーザ認証は以下の機能のこという

- ユーザ登録
- ログイン、ログアウト
- ユーザ情報の管理などのホーム画面
- ログインしていないユーザのアクセス制限
- 現在のユーザのログイン状態などを調べるプログラム

これらの機能はLaravelのAuthクラスを使うと一括で実装できる。

##Authのセットアップ
Auth機能はLaravelに標準で要されておらず、以下の2つのインストールが必要

|名前|説明|
|---|---|
|laravel/ui|composerでインストール|
|npm|Node.jsをインストール|

インストール手順は省略

##Userモデルクラス
AuthはDBにusersテーブルを作り、そこにユーザ情報を保存する。
##Authの各種メソッド
###Auth::user
ログインしているユーザのモデルインスタンス(Usersモデルクラス)を返す。
ログインしていなければnullが返る
###Auth::check
現在アクセスしているユーザがログインしているかどうかを確認

|返り値|意味|
|---|---|
|true|ログインしている|
|false|ログインしていない|

##ログインページ
ログインページはAuthが自動生成する。

#ユニットテスト
テスト機能の基本となる
##ユニットテスト
アプリ開発におけるプログラムの正常性確認をユニットテストという。
単体テストとも呼ばれ、PHPUnitを利用してテストする。

ユニットテストではテストのスクリプトファイを生成、しそこにテスト内容を書く。
ExampleTest.phpを参考にテスト処理を生成する。

クラス名は冒頭に`test`が入っていればいい

##テスト用DBを用意する
**本番のDBをテストに使用するのは危険**
テスト用のDBを作成しておく。

その後ダミーレコードなどを入れておく。

##phpunit.xml
PHPUnitの設定に使用するDBを追記する
SQLiteはファイルパス、MySQLはDB名でOK
Rails × Herokuアプリ高速化のためにやった/やりたいこと

実装が比較的楽で、インパクトが大きいものをピックアップ。

## Cloudflare (CDN)
JSやCSSはCDNに乗せる。他のCDNでも良いが、Cloudflareは無料だから最高。

## Cloudinary (画像配信)
画像はCloudinaryで最適化して配信。画像の圧縮、適切なサイズでの配信、Webp対応等全部やってくれる。

## クエリ最適化
N+1をなくす。pluckを使う。

## turbolinks、rails-ujsを活用する
Formのバリデーションなど、積極的に`hoge.js.erb`を使っていく

## partialを使いすぎない
partialは、保守性可読性とパフォーマンスのトレードオフ。
collectionオプションが使える場合には活用する。

## ループの中の処理に気を使う
インスタンスを無駄に生成しない、など。

## HTMLをgzip圧縮
Herokuだとデフォルトでgzip圧縮してくれないので、gemを使って対応。

## 重い処理はPumaの外に流す
例えば画像アップロードはLambda等に捌かせる

## 金を積む
最後はこれ
【個人アプリ開発メモ】画像が粗くなってしまう問題の解決

## 直面している問題
![スクリーンショット 2020-08-20 午後1.51.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547640/c03c51cb-8620-8296-84a0-f45ab57a82e0.png)
こんな感じで投稿画像が粗くなってしまう

## ヒントはつかめてる
画像のデフォルトのサイズは
app/uploaders/image_upload.rbのこの部分で設定できる。

```ruby:image_upload.rb
process resize_to_fit: [300, 200]
```
これと同じ大きさで画像を表示すれば、キレイに表示できる。
逆にこれと違う大きさで画像を表示しようとすると、粗くなってしまう。

そのことがわかったら、
![スクリーンショット 2020-08-20 午後2.06.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547640/456225c1-83af-cbdf-e08b-b4bc34f123dc.png)
こんな感じでキレイに表示できた。

しかしこれで問題が完全にクリアになったわけではない。
![スクリーンショット 2020-08-20 午後2.09.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547640/80ba9dcb-3772-508f-5066-fbe539ccd3b8.png)
こちらはプレビュー画像なのだが、こちらが少し粗くなってしまった。

複数の画像の大きさの設定したいときはどうすればいいのだろうか？

今気づいたのだが、選択する画像によってキレイになったり粗くなったりする。
これがなぜそうなるのかがまだわからない。
【Unity】WindowsでwebGLビルドをするときの注意点

# この記事でできること
- windowsでwebGLビルドができるようになる。

## こんなことありませんか？
- windowsでなぜかwebGLビルドができない。

## 原因
- windowsの場合、プロジェクトの作成場所のフルパスに全角が入っていると、webGLビルドができない。
![a01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/91ab594a-544e-d6e6-0ac3-713663479bca.png)

## 対処法
### すでにプロジェクトを作成している場合
#### 1. プロジェクトをエクスポートパッケージします。
![a02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/7086bab7-1721-1474-9aa5-b8245b43b913.png)
![a03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/952d7af6-3cff-a358-0491-202ecb34d246.png)
![a04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/560afa01-9161-71ec-ffae-e1056b324057.png)

#### 2. Cドライブ直下などに、任意の半角英数でunityの作業用フォルダを作成します。(フォルダまでのフルパス内に全角が入っていないこと)
![a05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/8776ff9d-dd2f-e51e-6ba0-c5fe4010bae6.png)


#### 3. 上記②で作成したフォルダ内に、新規プロジェクトを作成します。
#### 4. 上記③で作成したプロジェクトで、インポートパッケージで①のパッケージデータを読み込みます。
![a06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/3554f649-bbb7-a432-5532-34b5448a936b.png)
![a07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/d2b45f54-57b4-2aa7-02a2-738af0778bbb.png)
![a08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/c92b6c3a-ed67-84a9-e387-727928f1d74b.png)
![a09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/bf67443a-8155-014f-0efe-0f8789b6a48f.png)


#### 5. あとはwebGLビルドを通常通り行います。
![a10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/c0acf704-18f0-7253-09ae-a55bd3438a87.png)


### これから新規プロジェクトを作成する場合
- 最近のwindowsは、全角のフォルダが存在します。(「ドキュメント」や「ダウンロード」など)
- CドライブやDドライブなどの直下に、任意のunityの作業用のフォルダを半角英数で作成して、そこにプロジェクト(プロジェクト名は半角英数です)を作成します。
- この状態であれば、問題なくwebGLビルドができるはずです。
IntelliJ IDEA で後付で build.sbt を有効化する方法


## .idea/sbt.xml を作成する


```
vim .idea/sbt.xml
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
  <component name="ScalaSbtSettings">
    <option name="linkedExternalProjectsSettings">
      <SbtProjectSettings>
        <option name="externalProjectPath" value="$PROJECT_DIR$" />
        <option name="modules">
          <set>
            <option value="$PROJECT_DIR$" />
            <option value="$PROJECT_DIR$/project" />
          </set>
        </option>
        <option name="sbtVersion" value="1.3.13" />
      </SbtProjectSettings>
    </option>
  </component>
</project>
```

## IntelliJ をリスタート

sbt shell ができてれば OK 

## Appendix

皆さん困っているようですね。

SBT and External Libraries in Intellij
https://stackoverflow.com/questions/21208778/sbt-and-external-libraries-in-intellij

SBT imports NOT in External Libraries on Existing Projects
https://intellij-support.jetbrains.com/hc/en-us/community/posts/360000148430-SBT-imports-NOT-in-External-Libraries-on-Existing-Projects
MSDOSバッチでファイル移行（フォルダ構成も変更）

# はじめに
ファイルのサーバー（NAS等も含む）移行は、案外大変です。
コピるだけだろーと思っていると、大変な目にあったという経験がある方もいらっしゃるかと思います。
フォルダ構成をそのまま移動するときは、WINDOWS系なら`ロボコピー`がお勧めです。
※ロボコピーを使うときは移動元と移動先の設定だけは、くれぐれも逆にしないよう要注意してください。

今回は、フォルダ構成を変えながらファイルを移動する`DOSバッチ`を作成したので、備忘録的に記述します。

# 前提
特定の書類ファイルがドーンと同じフォルダに大量（エクスプローラーが固まるくらい）に置いてあるとして、少しだけフォルダ構成を変えて整理しながら移動していくDOSバッチを作りました。

概要
下記のように移動先は、`root`と`連番フォルダ`の間に
`連番フォルダの左３桁`でフォルダを挟むようにしてコピーしていきます。
※大量のフォルダが、少し探しやすい構成になるかなと。

・移動元フォルダ
　root\連番フォルダ\連番ファイル.xxx
・移動先フォルダ
　root\連番（左３桁）\連番フォルダ\連番ファイル.xxx

# ファイル移動
出来るだけシンプルな命令で、処理することにしています。
copyコマンドは、`xcopy`を使っています。
※`xcopy`はオプションで作成日付を維持したいなどの要望がある程度カバーできるので、調整してくださいね。あと、ネットワーク越しのコピーもできます。

大量フォルダの移動なので、分割実行も考えて小さい単位の処理とします。
一発で出来るんですが、そこはご容赦ください。
どのくらいの量を１回のコマンドで処理するかを環境と相談して決めてください。

例は、600番台～609番台のフォルダの移動について記述していきます。

①パスの設定
②フォルダ作成
③フォルダ移動
　１フォルダずつ、一個一個コピーしていきます。
※バッチの実行は`cd`コマンドで移動元のフォルダに移動して実行することとします。

```
@echo off
echo *********************************
echo ①パスの設定
echo *********************************
echo 移動元（from）
set FROM_PATH=D:\テスト\root_from
echo 移動先（to）
set TO_PATH=\\[IPアドレス]\root_to\

echo コピー元：%FROM_PATH%
echo コピー先：%TO_PATH%
pause
echo *********************************
echo %date% %time% 開始600番台～609番台
echo *********************************
echo ②フォルダ作成
for /l %%i in (0,1,9)   do ( for /d %%j in (60%%i*) do (if not exist %TO_PATH%\60%%i mkdir %TO_PATH%\60%%i))
echo ③フォルダ移動
for /l %%i in (0,1,9)   do ( for /d %%j in (60%%i*) do (if %%j neq 60%%i xcopy /D /E /Y %FROM_PATH%\%%j %TO_PATH%\60%%i\%%j\))
echo *********************************
echo %date% %time% 終了600番台～609番台
echo *********************************
echo *********************************
echo %date% %time% 終了しました
echo *********************************
pause
```

ぱっとみて気づいた方もいるかもですが、②のフォルダ作成は無駄にループしていて冗長ですね。
一応意図があって、抜け番号帯があるときに無駄にフォルダを作らないようにしています。
※内容更新が停止されていて動かないなら、フォルダは事前に作っちゃっうといいですね。

# 説明
目的のコマンドは、フォルダ移動なので③の部分を切り出して説明します。

>echo ③フォルダ移動
>for /l %%i in (0,1,9)   do ( for /d %%j in (60%%i*) do (if %%j neq 60%%i xcopy /D /E /Y %FROM_PATH%\%%j %TO_PATH%\60%%i\%%j\))

一行で書いていて見通しよくするために、細かく改行していきます。
//でコメントの意味で説明を書きます。

```
//0から増分1で9までループ
for /l %%i in (0,1,9)   do (
  //移動元からフォルダの左３桁が「600*～609*」のフォルダ名を探すループ
  //60%%iが600の場合、%%jには「600*」のフォルダ名が１つずつ取得されます。
  for /d %%j in (60%%i*) do (
    //取得した%%jが60%%iと不一致なら、XCOPYを実行します。
    //「if %%j neq 60%%i」は、常に成立しますね。※3桁のフォルダは無い前提です。
    //[for do]を使っている関係で、xcopyコマンドだけでは実行できなかったんです。
    //他にいい方法があれば、変更してください。
    if %%j neq 60%%i xcopy /D /E /Y %FROM_PATH%\%%j %TO_PATH%\60%%i\%%j\
  )
)
```

以上ですが、参考になれば幸いです。
IBM Cloud Activity Tracker with LogDNAを使ってみる

# はじめに

IBM Cloudを業務で使用するうえで、IBM Cloudのユーザ管理、アクセス管理、サービスの作成・削除などの各種のアクティビティのログを、後々の監査の目的で残しておきたいという要望があるかと思います。

AWSでは[CloudTrail](https://aws.amazon.com/jp/cloudtrail/)というサービスが提供されていますが、IBM Cloudでこれに該当するのが「**IBM Cloud Activity Tracker with LogDNA**」(以降、Activity Tracker）です。

別記事「[IBM Log Analysis with LogDNAで、IBM Cloud Kubernetes Service(IKS)のログを監視・アラート通知する](https://qiita.com/hisato_imanishi/items/cdfe71a98919d3dfe38f)」では、アプリケーションやミドルウェアのログ収集について述べましたが、Activity Trackerでは、あくまで監査証跡としてのログ保管・参照を目的にしています。

Activity Trackerも、先のLog Analysisと同様、LogDNAを使用しており、その使用感は変わりません。
また、Activity Trackerは、LogDNAのインスタンスを作成し、有効にするだけで、対象サービス・処理のアクティビティログが自動的に収集されます（[IBM Cloud Object Storage](https://cloud.ibm.com/docs/Activity-Tracker-with-LogDNA?topic=Activity-Tracker-with-LogDNA-cloud_services#storage)は一部の例外あり）。

それでは実際にインスタンスを作成し、ログがどのように収集されるかを見ていきましょう。


# Activity Tracker使用上の注意点

まずはじめに注意点です。

Activity Trackerのインスタンスはリージョン単位で作成しますが、**各リージョンによってログ収集可能なサービスが異なります。また、アカウントやユーザなどの管理のアクティビティのログは、「フランクフルト (eu-de) 」のインスタンスにのみ収集されます。そのため、他のリージョンでインスタンスを作成してもユーザの招待などのログは収集されません。**（Activity Trackerの[チュートリアル](https://cloud.ibm.com/docs/Activity-Tracker-with-LogDNA?topic=Activity-Tracker-with-LogDNA-getting-started)でも、リージョンはフランクフルトで作成と記載されていますが、フランクフルト以外では収集されないとは記載されていないので分かりづらい...）

各リージョンでどのサービスのログが収集可能かは、[ロケーション別のクラウド・サービス](https://cloud.ibm.com/docs/Activity-Tracker-with-LogDNA?topic=Activity-Tracker-with-LogDNA-cloud_services_locations)にまとまっていますので、事前にご確認ください。

AWSのCloudTrailでは[設定により全リージョン対象に収集が可能](https://aws.amazon.com/jp/cloudtrail/faqs/)なので、IBM Cloudもいずれ対応してくれればと思います。


# Activity Trackerを使ってみる

IBM Cloudの[Activity Tracker](https://cloud.ibm.com/observe/activitytracker)のページにアクセスします。

「Activity Trackerインスタンスの作成」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386149/e3ac652c-739a-a5db-5212-03123eb78360.png)


「リージョン」で「フランクフルト」、料金プランでは「7日間のイベント検索」を選択し、「作成」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386149/2c3e5f19-af8b-6a34-e352-c0e32edc615a.png)

以下のように、Activity Trackerのインスタンスが作成されます。
「LogDNAの表示」リンクをクリックすることで、LogDNAのダッシュボードに遷移し、アクティビティログを参照することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386149/7a6e03b0-1f4a-2660-5dbf-6a1715625411.png)


アクティビティログが収集されることを確認するために、[アクセス（IAM）の設定ページ](https://cloud.ibm.com/iam/overview)でユーザ管理に関する変更を実施してみます。

別記事「[IBM Cloudでのユーザ招待、他ユーザへの多要素認証の要求設定](https://qiita.com/hisato_imanishi/items/424b18227d5f2b41386c)」で実施した、他要素認証の要求設定をON・OFFした結果のログが以下の画面の赤枠部分になります。
1行だけしか表示されていませんが、該当行をクリックすることで、詳細なログが展開されます。（セキュリティ上の都合で、ここではお見せできないですが...）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386149/0b0ac8ee-8bc3-30c8-77e5-cc0a52dc7402.png)

以上のように、Activity Trackerは非常に簡単に使い始めることができます。

唯一、前述の通り、インスタンスを作成したリージョンによって収集される・されないがあるので、その点だけ注意が必要です。
UNIX(mac)のシンボリックリンクとlnコマンド

## UNIXのリンクとは
UNIXのリンクはファイルやディレクトリに別名をつけることができる仕組み。
つまりmacOSにおける「エイリアス(別名)」、Windowsでいう「ショートカット」はUNIXでは「リンク」と呼ぶ。

### リンクは２種類
・ハードリンク
・シンボリックリンク(多くの場合はこっちを使う)

### シンボリックリンクがよく使われる理由

・リンク先がわかりやすい
・ディレクトリへのリンクが作成できる
・異なるディスクボリュームへのリンクが作成できる

## lnコマンドでシンボリックリンクを作成する
### 構文
`ln [オプション] 元のファイルパス リンクのファイルパス`
オプションに「-s」を指定することでシンボリックリンクを作成する。
(-sがない場合はハードリンクの作成になる。)

### ファイルに対してシンボリックリンクを作成する例
`ln -s first.txt second.txt`
`ln -s first.txt third`
ファイルの順番はcpコマンドと同様「元」「作成先」の順。

### ディレクトリに対してシンボリックリンクを作成する例
`ln -s src/app01/db myDB`

## 参考
[これから学ぶmacOSターミナル](https://www.amazon.co.jp/%E3%81%93%E3%82%8C%E3%81%8B%E3%82%89%E5%AD%A6%E3%81%B6macOS%E3%82%BF%E3%83%BC%E3%83%9F%E3%83%8A%E3%83%AB-%E5%A4%A7%E6%B4%A5-%E7%9C%9F/dp/429500040X/ref=tmm_pap_swatch_0?_encoding=UTF8&qid=&sr=)
Windows環境でのStackのアンインストール

# 前書き
[The Haskell Tool Stackのサイト](https://docs.haskellstack.org/en/stable/README/#the-haskell-tool-stack)ではUn*x OS環境へのインストール方法とは別に、Windows環境へのインストール方法も記載があるものの、アンインストールについては
`Removing ~/.stack and /usr/local/bin/stack should be sufficient. `
との記載があるだけ。
ところがWindows環境ではそんなモノはないので、ここで詰んでしまう。
プログラミング開発、Windowsユーザーに冷たすぎ問題がここでも。

# 結論
次を削除する。

- stack-root（Linuxなら`~/.stack`)である`c:\sr`を丸ごと削除
- Linuxではstack-root配下にある`programs`が、windowsの場合には`AppData\Local\Programs`にあるので`stack`フォルダを丸ごと削除
- windowsの場合、`stack install`でできたexeファイルとstackの実行ファイル自身が、ユーザーフォルダ配下の`AppData\Roaming\local\bin`にあるので、不要なものを削除する

Windowsのstackにはアンインストーラーも付いてくるが実行しても

- stackの実行ファイルの削除
- ユーザー環境変数（後述する`stack-root`と`local-bin`へのpath）の削除

のみのようで、一連の関連フォルダは残ってしまうので手作業で削除する。

# 詳細

## Stackの各種パス比較
`stack path`コマンドの応答結果比較。
`xxxxx`はユーザー名

| path             | Linux                                   |    Windows                            |                  |
|:-----------------|:----------------------------------------|:--------------------------------------|:-----------------|
| stack-root       |/home/xxxxx/.stack                       | C:\sr                                 |windowsのsnapshotはここ|
| programs         |/home/xxxxx/.stack/programs/x86_64-linux |C:\Users\xxxxx\AppData\Local\Programs\stack\x86_64-windows| 
|local-bin         |/home/xxxxx/.local/bin                   |C:\Users\xxxxx\AppData\Roaming\local\bin|stack installで出来た実行fileの置き場|
|stackの実行file   |/usr/local/bin/stack                     |C:\Users\xxxxx\AppData\Roaming\local\bin\stack.exe

- `programs`にはwindowsの場合、当方の環境では`ghc`と`msys`（と`7Z`）があった
- `local-bin`は`stack install`でできた実行ファイルをコピーして置く場所で、具体的には当方の環境では`doctest`,`hlint`,`intero`といった辺りの実行ファイルがあった。windowsの場合Stack自身とそのアンインストーラーもここに置かれる。


アンインストールとは直接関係ないのですが`stack path`で応答される

- `local-bin`
- `local-bin-path`

の違いが分からない。
もしかすると上の説明も`local-bin-path`を使ったほうが適切なのかも（当方の環境ではいずれも同じパスが指定されています）
開発とは_メモ_20200820

#開発とは



**１．開発の現状について**

　　IT業界では、何をやりたいの？開発？それともテスター？など聞かれることが多々あります。
　　実際どういうものが開発でどういうものがテストなどの境界など人それぞれによっては考え方が
　　異なると思います。
　　
　　本資料では、筆者の経験を交えて実際の現場での開発についての認知はこういうもの？といった
　　知識をチームでの開発を題材として展開します。

　　私たちがするソフトウェアの開発は、ハードウェアの開発と比べ修正を後から加えることもできるため
　　新規開発以外に、既存のものをよくする「保守開発」や似たようなプログラムを開発する
　　「派生開発」もよく行われます。

　　さらに某ウイルスの影響で開発の概念も大きく変わってきています。
　　リモートワークも開発方法の変化とも言えますね。

**２．チームによる開発**

　　＜**チームによる分業＝開発**という考え＞

　　例えば以前からその現場に先輩社員のAさんがいるとしましょう。
　　Aさんは"設計"や"製造"業務をそのプロジェクトで任される大ベテランのエンジニアです。

　　そこに新入社員の若手Bくんがメンバーとして参入することとなりました。
　　Bくんはそのプロジェクトでテストだけをプロジェクトが終わるまでの期間の間、任されました。
　　この時点であれっ？てなった方は違和感にお気づきかもしれません。

　　Bくんはテスターでプロジェクトに参入したのですが、そこの開発現場での認識はテスターも
　　立派な"**開発**"だという考え方でした。

　　これは、全工程を含めて開発であるという考え方とチームで分業して従事しているみんなが開発
　　のメンバーという考え方です。

　　一方で"開発"とは設計工程から製造などのみが開発だという考え方もあります。

　　間違っていたら申し訳ないのですが、よく目にする開発経験〇年以上というような募集は
　　後者のほうを要求されていると考えています。

　　結論は**チームによる分業＝開発**ではなく、**チームによる分業＝開発の方法**ということですね。
　　そういうところをあいまいにしてしまうことで、
　　以前の筆者もテスト工程しかまだ経験はしてないが開発〇年以上しましたよ！といっていました。


**３．チームによる分業の特徴について**

　　＜メリット＞

　　・個人のスキルを上げることで柔軟に適応ができ、幅広く長期にわたり開発効率を上げる
　　・ツールを使うことで手軽に効率を上げられる

　　＜デメリット＞

　　・個人のスキル向上に一定の時間がかかるため即効性は期待できない
　　　また、１日は２４時間しかないからその時間での効率アップにも限界がある。
　　・ツールは決まった動作しかしないので、想定していないことなどには使えません。

　　分業は**その長所も短所も全体に大きな影響を与える諸刃の剣**です。
　　だからといって少人数で全部やればいいやんという考え方は私個人は違うと思います。

　　大人数での分業をうまく行うことができれば非定期的で特殊な業務に対しても大幅に開発効率を
　　向上させることができます。

**４．チームによる分業、タスク管理について**

　　チームでプログラム開発や保守などの作業をする際、新しい機能の追加依頼が来たり
　　エンドユーザーから調査の依頼が来ることがあります。

　　そんな時、自分が抱えているタスクと優先順位付けや期限付けなどタスク管理も
　　しなければいけません。

　　このような状況に陥った場合、もちろんチームで開発を行いますから自分のことだけ
　　終わっていればいいやとはいけません。
　　タスク管理表をチームで準備して記入したり、週初めに各チームで会議して実施する範囲を
　　決めて進めたりと方法はたくさんあります。

　　私は開発現場ではどうかと聞かれるともちろん報告メールや進捗の会議などもやりますが
　　それに加えて自分個人のタスク管理表を使っていました。

　　タスク管理表を上長にお渡しすれば、そのまま一週間のタスクの流れがわかり、
　　上長が進捗状況などを把握しやすかったからです。

　　こういったコミュニケーションや連携など、ITの知識以外の能力も必要になるわけですね。
長押し続けている間繰り返し処理をするLongPressGestureRecognizer

#UILongPressGestureRecognizer + Timerで

押し続けている間、連続で処理をするボタンをつくりたい。
たとえば、押している間ミサイルを連写するとか。
**UILongPressGestureRecognizerの state.beganでタイマーのリピート処理を始め、 state.endedで Timer.invalidate( )　することで実現できます。**

```swift
@objc func repeateWhilePressing(_ gestureRecognizer : UILongPressGestureRecognizer){
        switch gestureRecognizer.state {
            case .began:
        print("shot!")//短いタップでも反応するようにここにも処理を書いておきます。

        pressTimer = Timer.scheduledTimer(withTimeInterval: 0.1, repeats: true, block: { (Timer) in
                       print("shot!")//押している間0.１秒間隔で繰り返し。
                   })
               case .ended:
                   pressTimer?.invalidate()
               default:
                   break
               }
    }
```

**短いタップの場合も反応するように、Long Pressの最小プレス時間を小さく設定。**

```swift
let longPress = UILongPressGestureRecognizer(target: self, action: #selector(repeateWhilePressing()))
longPress.minimumPressDuration = 0.01
```

押している間の結果
>shot!
shot!
shot!
shot!
shot!

****
Core MLを使ったアプリを作っています。
機械学習関連の情報を発信しています。

[Twitter](https://twitter.com/JackdeS11)
[MLBoysチャンネル]
(https://www.youtube.com/channel/UCbHff-wfjTnB3rtXIP6y0xg)
[Medium](https://medium.com/@rockyshikoku)

[相棒](https://twitter.com/oka_yuuji)
[note](https://note.com/oka_yuuji)
日本の地域メッシュを生成するPythonモジュールを公開しました

## 更新情報

### 2020/11/23

- 5mメッシュへの対応
- 別称は250, 125...から、250m, 125m...に変更

### 2020/09/04

以下の2点が修正されました。この事で、一部互換性が失われた箇所があります（コード規則、メッシュ番号）。詳しくは[リポジトリのREADME](https://github.com/MIERUNE/japan-mesh-tool)をご覧ください。

- 100m、10mメッシュへの対応
- 分割地域メッシュのコード割り振り規則の見直し（@warenashiさんありがとうございました）

## TL;DR

https://github.com/MIERUNE/japan-mesh-tool

- 日本の標準地域メッシュを生成するPythonモジュールをOSSとして公開しました
- 50mまでのよく使われる単位のメッシュを生成出来ます
- 試験的に作成したRust版も含みます

## 標準地域メッシュとは？

>
地域メッシュ（ちいきメッシュ）とは、統計に利用するために、緯度・経度に基づいて地域をほぼ同じ大きさの網の目（メッシュ）に分けたものである。メッシュを識別するためのコードを地域メッシュコードと言う。
[地域メッシュ - Wikipedia](https://ja.wikipedia.org/wiki/%E5%9C%B0%E5%9F%9F%E3%83%A1%E3%83%83%E3%82%B7%E3%83%A5)

## 公開する理由
- 地域メッシュを50mまで生成出来て手軽に使えるOSSはなさそうだったので
- 様々な機会で地域メッシュが必要になるケースは多く、様々な方がその都度開発していると思われるので

## japan-mesh-tool
https://github.com/MIERUNE/japan-mesh-tool
MITライセンスのもと頒布します。

### 実行環境
- Python3.8で開発(3系なら動くと思います)
- 標準モジュールのみを使用しています(依存なし)

### 機能
①メッシュ次数②領域(経緯度)から、メッシュデータをgeojsonl形式で出力します。
geojsonl形式：geojsonをFeature単位で行区切りしたテキストファイル、GeoJSONSeqとも言う

### 対応メッシュ次数

|  次数  |  別称  |  詳細  |  メッシュコード  |
| ---- | ---- | ---- | ---- |
|  1  |  -  |  80kmメッシュ |  4桁  |
|  2  |  -  |  10kmメッシュ |  6桁  |
|  3  |  -  |  1kmメッシュ  |  8桁  |
|  4  |  500  |  500mメッシュ |  10桁  |
|  5  |  250  |  250mメッシュ |  12桁  |
|  6  |  125  |  125mメッシュ |  14桁  |
|  7  |  50  |  50mメッシュ  |  14桁  |

### 使い方(Python)

```
python python/japanmesh/main.py <meshnum:メッシュ次数> <-e:領域指定、"カンマ区切り経緯度 カンマ区切り経緯度"形式で指定> <-d:保存先>
```

#### コマンド例

```
python python/japanmesh/main.py 5 -e 142.2,44.0 142.3,44.5 -d ./
```

4次メッシュ以上は別称で指定する事が出来ます

```
python python/japanmesh/main.py 250 -e 142.2,44.0 142.3,44.5 -d ./
```

領域、保存先は省略可能です。
その場合、全国分の1次メッシュをカレントディレクトリに出力します。

```
python python/japanmesh/main.py 1
```

3次メッシュ以上は総メッシュ数が膨大なので、大きい領域を指定すると処理に時間がかかります。

### 使い方(Rust, 試験的)

処理速度改善のため、試験的にRustで同じ処理を書きました。rust/japanmeshがコンパイル済みのバイナリです(Windowsはrust/japanmesh.exe)。

```
rust/japanmesh <meshnum:メッシュ次数> <領域指定(省略可)>
```

常にカレントディレクトリにgeojsonlファイルを出力します。

#### コマンド例

macOS(64bit)

```
rust/japanmesh 5 142.2,44.0 142.3,44.5
```

または領域を省略して

```
rust/japanmesh 3
```

### Pythonモジュールとして
- ./python/japanmesh自体をPythonモジュールとしてimport可能です
- その場合、get_meshes()関数のみを使用可能です
(使用例は./python/sample.pyを参照)

## メッシュの生成ルール

赤：3次、白：4次（3次を4分割）
![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73197/439b7789-555e-75b1-203d-c2468b4e60e6.png)

青：5次、黒：7次（5次を25分割）
![スクリーンショット 2020-08-18 17.28.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73197/5dfa0ebe-2b7d-728c-468f-41b24f515baf.png)


- 3次までは<https://www.stat.go.jp/data/mesh/pdf/gaiyo1.pdf>に従う
- 4次以降は以下のルールに基づき上位メッシュのコードに対し、末尾に2桁ずつコードを付加する(上記画像のとおり)
    - 左下を00とする
    - 上方向にひとつ進むと10、ふたつ進むと20…とする
    - 右方向にひとつ進むと01、ふたつ進むと02…とする

https://qiita.com/Kanahiro/items/0ac3ccfdaf19155ece9c
TypeScriptをWSL+Ubuntuで環境構築する

表題の通りです．メモ程度に書いておきます．必要に応じてまた追記します．

## 環境
* Ubuntu 20.04 focal(on the Windows Subsystem for Linux)

## 必要なもの
* node.js <- 必要
* TypeScript <- こっちが主

## 手順

コマンド類は適宜 `-y` を使うと幸せだと思います．

### nodeを入れる

TypeScriptはnode.jsのnpmを使っていれます．nodeを入れましょう．

普通にaptでいけます．

```
sudo apt install nodejs npm
```
ただ，Windowsではnpm勝手に入ったけど，Ubuntu先輩はnpmも入れてやらんといけないようです．

```
npm --version
```
とか叩いてやって，バージョン出たらOKです．適宜ターミナルの再起動とかはしてあげてくださいね．

### TypeScriptを入れる

主題．npmを使えばいいだけなのでそんなに難しいことはないです．

```
sudo npm install -g typescript ts-node
```

ただ，こちらも先述の `npm` のように，`ts-node` を入れないと，この言語のトランスコンパイラであるところの `tsc` コマンドが直打ちできないようで．
`sudo npm install -g typescript` だけで本体は入るので，使い方に依ってはそっちだけで良いのかもしれません．

こっちもバージョンを適当に叩いて入ってるか確認しておきましょう．

```
tsc --version
```
【PHP】配列keyの挙動について

###配列のkeyはint型かstring型の2種類
整数を配列のkeyに指定した場合、int型として扱われるため注意が必要です。

```php
$array1 = [
    '1983' => 'ファミコン',
    '1989' => 'ゲームボーイ',
    '1994' => 'プレイステーション',
];

var_dump(array_keys($array1));

// 実行結果
array(3) {
  [0]=>
  int(1983)
  [1]=>
  int(1989)
  [2]=>
  int(1994)
}
```

###stringで指定していた場合でもkeyにするとint型になる

```php

// keyをstring型で指定しておく
$key1 = (string)'1983';
$key2 = (string)'1989';
$key3 = (string)'1994';

var_dump($key1);
var_dump($key2);
var_dump($key3);

//var_dumpの結果
string(4) "1983"
string(4) "1989"
string(4) "1994"


//stringで指定した変数をkeyにして配列を作成
$array1 = [
    $key1 =>'ファミコン',
    $key2 => 'ゲームボーイ',
    $key3 => 'プレイステーション',
];

// stringで指定していた年数がint型になっている。
var_dump(array_keys($array1));

array(3) {
  [0]=>
  int(1983)
  [1]=>
  int(1989)
  [2]=>
  int(1994)
}

```

###float型、8進数の場合

```php

$array = [
    1.2 => 'foo',
    2.6 => 'bar',
    0332 => 'hoge',
];

var_dump($array);


// 小数点切り捨ての10進数へ変換される
array(3) {
  [1]=>
  string(4) "foo"
  [2]=>
  string(4) "bar"
  [218]=>
  string(4) "hoge"
}

```

###整数にしたくない場合
- 文字列を連結しておく

    例：「S_01」、「02A」など

- ハッシュ化しておく
macOS Big Sur beta 5 で日本語入力への切替ができなくなった場合の対応方法

# はじめに

**macOS Big Sur beta 5** にアップデートしたところ、**日本語入力への切替ができなくなった**ので、対応方法についてまとめました。

# 原因

なぜか、**macOS Big Sur beta 5** にアップデートした際に、**キーボード**設定の**入力ソース**から**日本語**が削除されていました。
まだbeta版ですし、キーボード周りの変更がいくつかあったみたいなので、その辺りにバグが残っているのかもしれません。
（~~利用しているキーボードがUS配列なので、それも関係あるかも :thinking:~~ 日本語キーボードでも同様の現象が起きることが確認できました。）


# 対応方法

**キーボード設定**の**入力ソース**に**日本語**を追加することで、無事に**日本語入力へ切替できる**ようになりました :thumbsup:


# 最後に

macOS Big Surでキー入力をリマップする記事も書いたので、よかったらこちらも見てください :raised_hand: 

* [macOS Big Sur（ベータ版）でキー入力をリマップする](https://qiita.com/zizi4n5/items/7974d4751212214dab4e)

#PowerAutomate 承認アクション の再割り当てされた際に何かしら処理を行う方法

# Power Automate の承認アクション

Power Automate は、業務ワークフローをノーコードで構築できるように、Microsoft 365 の標準プランであっても利用できる、承認アクションというものがあります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269159/e43818ed-65ca-8fab-b46e-880e449112c5.png)

使用するとこんな感じで相手に承認が飛びます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269159/089a7c05-e199-3593-eddf-5ade94826d20.png)

承認・拒否・再割り当てと選ぶことができるのですが、この再割り当てを実行すると、再割り当てする相手を指定することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269159/943483a6-3acd-bb74-2d40-59e0115dea1b.png)


しかし、この再割り当てをしても、フローはそのまま待機状態となってしまい、誰に今割り当てられているのか、割り当てた本人もしくは割り当てられた相手にしかわからず、申請者本人は知る由もなく、承認が滞っている際のフォローアップができない問題が出てきます。

# 再割り当てされた情報はどこに入るのか？

承認情報のデータは、全てCommon Data Service に格納されています。
その中で、承認ステータスの情報を持っているのは、こちらのエンティティです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269159/b6331b84-263e-5b49-aa50-d1047187cc68.png)

実際に見てみましょう

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269159/3907c289-5a86-4e82-73c5-5e8c13986522.png)

データから判断すると

- Owning User Index が現在承認先のユーザー（systemuser）の識別子
- Approval Id Index がその承認情報(approval)データの識別子

のようです。
承認情報には、このようにタイトルが含まれています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269159/52fb63cd-7069-d024-b6b4-150de944a3ce.png)

こちらをうまく使うことで、再割り当ての情報を引き出すことができそうです。

# フローを作ってみる

ということで、Approval Request のエンティティが更新されたことを検知して実行されるフローを作成しました。
※Common Data Service のコネクタは有償プランとなります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269159/64978243-218b-a0f1-2276-5458754a34e8.png)

実行結果はこのようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269159/d18b796d-bf91-c570-e21a-f62c90701e55.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269159/8de2601b-b04e-b746-18e7-01eed066b8a3.png)

きちんとデータは取れていますね！

# 実際の調査の模様はこちらのYouTubeから

調査の過程を踏まえて、どのようにすれば問題解決につながるか
その辺も交えてお楽しみいただけると幸いです。

https://youtu.be/gDhgpu1RD4g
PHP基礎④


###　echoの省略

```PHP:PHP
<?php echo ?>
↓　↓　↓
<?= ?>
# 省略できる！
```

###　ランダムなメッセージの表示

```PHP:PHP
mt_rand(1,3);
# 1以上、3以下のランダムな整数値を作成
```


###　悪意にあるコードを防げる

```PHP:PHP
<?= htmlspecialchars($message, ENT_QUOTES, 'UTF-8'); ?>

「htmlspecialchars」に(変数,ENT_QUOTES,文字コード)
```
WindowsでCMakeをするために


# アブストラクト

MSYS2を使うとWindowsでも簡単にCMakeができます。
（詳しくは[対処法](#対処法)の項を参照）

# ある晴れた昼下がり

macが壊れました。
急遽Windowsを発掘して作業する必要に迫られました。

# Windowsにcmakeを入れて遊ぼうとする

いつも通り[CMakeのサイト](https://cmake.org/)からCMakeを入れ、C++のプログラムをコマンドプロンプトでCMakeしようとしました。
ソースコードな以下の通りです。

```cpp:test.cpp
#include<iostream>
int main(){
  std::cout << "Hello World!!" << std::endl;
  return 0;
}
```

```cmake:CMakeLists.txt
cmake_minimum_required(VERSION 3.1)
project(test)
add_executable(test test.cpp)
```

cmakeをしてみると次のようなエラーが出ます。

```shell
-- The CXX compiler identification is unknown
...
```

どうやらCMAKE_CXX_COMPILERの設定が無いようなので、セットします。
今回はMingwのg++を使うことにしました。

```cmake:CMakeLists.txt
cmake_minimum_required(VERSION 3.1)
set(CMAKE_CXX_COMPILER C:¥Mingw¥bin¥g++)
project(test)
add_executable(test test.cpp)
```

すると、次のようなエラーが出ます。

```shell
...
  when parsing string
    C:¥Mingw¥bin¥g++
  Invalid character escape '¥M'
...
```

￥マークが悪さをしているようです。
調べてみると、'￥'や'\'ではなく'/'を使うべきらしいので書き換えます。

```cmake:CMakeLists.txt
cmake_minimum_required(VERSION 3.1)
set(CMAKE_CXX_COMPILER C:/Mingw/bin/g++)
project(test)
add_executable(test test.cpp)
```

すると、次のようなエラーが出ます。

```shell
...
  The CMAKE_CXX_COMPIER:
    C:/Mingw/bin/g++
  is not a full path to an existing compiler tool.
...
```

C:/Mingw/bin/g++が見つからない...?
仕方がないので、g++をセットします。

```cmake:CMakeLists.txt
cmake_minimum_required(VERSION 3.1)
set(CMAKE_CXX_COMPILER g++)
project(test)
add_executable(test test.cpp)
```

すると、次のようなエラーが出ます。

```shell
...
  The C++ compiler:
    C:/Mingw/bin/g++
  is not able to compile a simple test program.
...
```

g++が動かないようです。
当然``g++ test.cpp``は動きます。
この辺りで、コマンドプロンプトでCMakeをするのを諦めました。

# 対処法

MSYS2を使います。使い方は[こちらの記事](https://qiita.com/iwatake2222/items/14b749a945dda0af949f)に詳しくありました。

## 手順

1 . MSYS2をインストールする(https://www.msys2.org/)

2 . MSYS2 MinGW64 shellで開発環境をインストールする

```shell
pacman -Syuu
pacman -S base-devel
pacman -S mingw-w64-x86_64-toolchain
pacman -S mingw64/mingw-w64-x86_64-cmake
```

3 . MSYS2 MinGW64 shell上でCMakeを行う。その際、オプション``-G "MSYS Makefiles"``を付ける。

```shell
cmake .. -G "MSYS Makefiles"
```

これでめでたくCMakeができました。
縦スクロールバーが2本出てくる&hidden消したら内側に出てきちゃう問題

今のPJにBacklogがないので備忘録


#問題
・webサイトの縦に長いページだと縦スクバーが2本出てくる
・参考サイトで出てきた以下記述を消すと、横スクが出てくる＆縦スクがbodyの内側に出てきちゃう

```CSS:css
html, body {
width: 100%;
overflow-x: hidden;　←消す
}
```
https://kotori-blog.com/css/scroll-y/

#解決方法
```CSS:css
html, header {
width: 100%;
overflow-x: hidden;
}
```

bodyをheaderにするだけでした。
これに1時間近くかけてたの工数泥棒としか言えず…。
(Swift 5対応)UILabelの文字に縁取り(袋文字)をする2つの方法 

どうも、肩と背中の日焼けが激しすぎて服を着ないまま禁断の在宅勤務を行なっているiOSエンジニアのkaです。

文字の表示を簡単にネイティブの機能だけを使ってテレビ番組のテロップ風にしたいということでやってみました。

#NSAttributedStringを使う方法
``` swift.swift
let stroke:UIColor = UIColor.black
let foreground:UIColor = UIColor.white
let width:CGFloat = 3.0

let strokeTextAttributes = [
    .strokeColor : stroke,
    .foregroundColor : foreground,
    .strokeWidth : width,
    .font : UIFont.boldSystemFont(ofSize: 20.0)
    ] as [NSAttributedString.Key : Any]
let string = NSMutableAttributedString.init(string: "縁取り文字", attributes: strokeTextAttributes)
label.attributedText = string
```
![スクリーンショット 2020-08-20 11.56.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678249/7afb4d57-55e9-97e0-02ff-7a199f9b8caf.png)



#CGContextを使う方法

UILabelのサブクラスを作ります

```DecoreateLabel.swift
class DecorateLabel: UILabel {
    
    var strokeColor:UIColor = UIColor.white
    var strokeSize:CGFloat = 2.0
    
    override func drawText(in rect: CGRect) {
        if let context = UIGraphicsGetCurrentContext() { 
            let textColor = self.textColor
        
            context.setLineWidth(self.strokeSize)
            context.setLineJoin(CGLineJoin.round)
            context.setTextDrawingMode(.stroke)
            self.textColor = self.strokeColor
            super.drawText(in: rect)
        
            context.setTextDrawingMode(.fill)
            self.textColor = textColor
        }
        super.drawText(in: rect)
    }
}

```

```swift.swift
let label = DecorateLabel()
label.frame = CGRect(x: 150, y: 200, width: 200, height: 20)
let stroke:UIColor = UIColor.black
let foreground:UIColor = UIColor.white
let width:CGFloat = 8.0
label.strokeColor = stroke
label.textColor = foreground
label.strokeSize = width
label.text = "縁取り文字"
```
![スクリーンショット 2020-08-20 12.09.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/678249/5445ff5b-5ad7-a53a-9a0a-b3f9ebafb83c.png)

#補足
NSAttributedStringを使う方法だと文字の内側に縁取り
CGContextを使う方法だと文字の外側に縁取りをします
場面によって使い分けましょう！


###参考: 
[storyboard で UILabel を袋文字にする](https://ofsilvers.hateblo.jp/entry/uilabel-with-stroke)
[UILabelの文字に枠をつけ、袋文字（縁取り文字）を作る](
https://qiita.com/1plus4/items/249d01e48eb456e99e67)
[UILabelをNSAttributedStringで文字装飾（Swift 4対応）](https://qiita.com/roba4coding/items/7a5decc7e4f6137fcc88)

###終わりです

Brewus,Inc.
株式会社ブリューアス
https://brewus.co.jp
Nuxt.jsのSPAモードでTypeSquareのWebフォントをロードする

NuxtでTypeSquare使う情報があまりなかったので。

普通の静的ページだとヘッダーでTypeSquareのスクリプトを読み込ませてあげれば、スクリプトがよしなにDOM中の文字を解析してサブセットフォントをロードしてくれるが、NuxtのSPAモードだとDOMコンテンツが組み立てられる前にスクリプトが動いてしまうみたいで、フォントが表示されなかった。

なので、最初のスクリプトロード時にはフォントをロードしないようにして

```js:nuxt.config.js
head: {
    script: [
      {
        src: "//typesquare.com/3/tsst/script/ja/typesquare.js?hogehoge%3D&onload=false"
      }
    ]
}
```

フォントを使いたいページで

```vue:pages/index.vue
<script>
export default {
  mounted() {
    Ts.loadFont();
  }
}
</script>
```
とやると表示されました。

もっと正しいやり方知ってる人は教えてください。
Python: 巡回セールスマン問題をやってみた

[巡回セールスマン問題](https://ja.wikipedia.org/wiki/巡回セールスマン問題)ってどんな問題だったっけ?ふわっとしてたんで、理解するために、まずはシンプルに総当たりで解いてみた。だけです。

[巡回セールスマン問題をいろんな近似解法で解く（1）](https://qiita.com/take314/items/dc2e6cf6d97889923c8b)

```py
from itertools import permutations as IT_perm

total_cost = lambda costs : lambda seq : sum(
    costs[ seq[i - 1] ][ e ]
    for i, e in enumerate( seq )
)

head_fixed_permutations = lambda nodes : (
    nodes[ 0:1 ] + list( tail ) 
    for tail in IT_perm( nodes[ 1: ] )
)


costs = [
      [0, 6, 5, 5]
    , [6, 0, 7, 4]
    , [5, 7, 0, 3]
    , [5, 4, 3, 0]
    ]

nodes = [0, 1, 2, 3]

print(
    min(
        head_fixed_permutations( nodes )
        , key = total_cost( costs )
    )
)

# 結果：[0, 1, 3, 2]
```
リスト costs で、ノードa から ノードb までの移動コストが cost[a][b] で与えられているという前提です。
nodes はその ノードのリストで、出発点は nodes[0]：(値は 0)に固定、ということです。

考えたやりかたは、
先頭を固定したノードの順列に、
コストの合計を計算する関数を適用した値で、
最小のものを
出力する
ということです。

なるほど、こういうことか。意外とシンプルでした。
VirtualBoxで共有フォルダの設定（Guest: Ubuntu20.04LTS）

# VirtualBoxの設定
メニューから
デバイス > 共有フォルダ
を選択

ダイアログ右にある"フォルダ+マーク"から共有フォルダの追加を行う
![sf_setting.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34985/da9b03fa-257e-9ff6-282f-e6ea3424fe30.png)

フォルダのパスで、ホストマシン上の共有するフォルダを選択。
フォルダ名は選択した共有するフォルダ名のが自動入力される。（任意の名前に変更可能）
読み込み専用、自動マウント、マウントポイント、永続化の設定は任意。

私の場合は、自動マウントと永続化をチェック、/home/<ユーザ>/以下にマウント用ディレクトリを作成して指定。

# Ubuntuでの権限設定
共有フォルダを作っただけだとフォルダやファイルへのアクセスのたびに「権限がない」等と怒られるので、設定を行う。

```
~$ sudo gpasswd -a $USER vboxsf
```
NCMB Swift コメント機能を理解して実装

コメントクラス作って、格納して実装するよりNCMBObject型のまま扱う方が勝手がいいのでNCMBObjectクラスでコメント機能実装します！


```Swift:CommentViewController.swift
func loadComments() {
        comments = [Comment]()
        commentNcmbArray = [NCMBObject]()
        let query = NCMBQuery(className: "Comment")
        query?.whereKey("postId", equalTo: postId)
        query?.includeKey("user")
        query?.findObjectsInBackground({ (result, error) in
            if error != nil {
                KRProgressHUD.showError(withMessage:  error!.localizedDescription)
            } else {
                self.commentNcmbArray = result as![NCMBObject]
                for commentObject in result as! [NCMBObject] {
                    // コメントをしたユーザーの情報を取得
                    let user = commentObject.object(forKey: "user") as! NCMBUser
                    let userModel = User(objectId: user.objectId, userName: user.userName, displayName: user.object(forKey: "displayName") as! String)
                    userModel.displayName = user.object(forKey: "displayName") as? String
                    
                    // コメントの文字を取得
                    let text = commentObject.object(forKey: "text") as! String
                    let userImagePath = "https://mbaas.api.nifcloud.com/2013-09-01/applications/自分のIDいれてね！/publicFiles/" + user.objectId
                    
                    //                    cell.userImageView.kf.setImage(with: URL(string: userImageUrl), placeholder: UIImage(named: "human.png"), options: nil, progressBlock: nil)
                    // Commentクラスに格納
                    let comment = Comment(postId: self.postId, user: userModel, imageUrl: userImagePath,text: text, createDate: commentObject.createDate)
                    self.comments.append(comment)
                    
                    // テーブルをリロード
                    self.commentTableView.reloadData()
                }
                
            }
        })
    }

```
"error[E0433]: failed to resolve: could not find `client` in `communicator`"が出てきて困った

『プログラミング言語Rust 公式ガイド』をやっていて詰まった。

調べてみると、

https://users.rust-lang.org/t/failing-to-find-a-module-solved/10345/10

> To fix compilation you just need remove #[cfg(test)] from here:

```
# [cfg(test)]

pub mod client;
```
> because of with #[cfg(test)] at the top of pub mod client, you client
module compiles only if build tests via cargo test

Ooh...

`# [cfg(test)]`をつけているとテストをビルドするときだけモジュールがコンパイルされるらしい。

なるほど。
NCMB SNSアプリ　選択したデータの削除

選択したデータの削除

```swift:ViewController.swift

 func didTapMenuButton(tableViewCell: UITableViewCell, button: UIButton) {
        let alertController = UIAlertController(title: nil, message: nil, preferredStyle: .actionSheet)
        let deleteAction = UIAlertAction(title: "削除する", style: .destructive) { (action) in
            SVProgressHUD.show()
            let query = NCMBQuery(className: "Post")
            query?.getObjectInBackground(withId: self.posts[tableViewCell.tag].objectId, block: { (post, error) in
                if error != nil {
                    SVProgressHUD.showError(withStatus: error!.localizedDescription)
                } else {
                    // 取得した投稿オブジェクトを削除
                    post?.deleteInBackground({ (error) in
                        if error != nil {
                            SVProgressHUD.showError(withStatus: error!.localizedDescription)
                        } else {
                            // 再読込
                            self.loadTimeline()
                            SVProgressHUD.dismiss()
                        }
                    })
                }
            })
        }
        let reportAction = UIAlertAction(title: "報告する", style: .destructive) { (action) in
            SVProgressHUD.showSuccess(withStatus: "この投稿を報告しました。ご協力ありがとうございました。")
        }
        let cancelAction = UIAlertAction(title: "キャンセル", style: .cancel) { (action) in
            alertController.dismiss(animated: true, completion: nil)
        }
        if posts[tableViewCell.tag].user.objectId == NCMBUser.current().objectId {
            // 自分の投稿なので、削除ボタンを出す
            alertController.addAction(deleteAction)
        } else {
            // 他人の投稿なので、報告ボタンを出す
            alertController.addAction(reportAction)
        }
        alertController.addAction(cancelAction)
        self.present(alertController, animated: true, completion: nil)
    }
```
React Router v6 の Object-based Routes をキメると、ルーティング実装が気持ちよくなる(かもしれない)ので紹介させてほしい

React Router v6(20200820時点では6.0.0-beta.0でpre-release) には新機能として Object-based Routes が追加される。試しに使ってみたところ気に入ってしまったのでぜひ紹介させてほしい。コンポーネントとルーティングをいい感じに分離できてなかなか気持ちが良かった。

## 概要
- 「ルーティング用のオブジェクトを作成し、それをuseRoutes hooksでコンポーネントに読み込む」という形でルーティングを実現。
- 「ルーティング用のオブジェクト」でchildrenを設定することで、ネストの深いルーティングも1つのオブジェクトで表現可能。
- childrenは親コンポーネント内で`<Outlet />`コンポーネントとして呼び出し可能で、他のコンポーネントと組み合わせての利用も可能。

## コード例
上の説明だけだと伝わる気がしないのでコード例を示す。
特に「親コンポーネント」「子コンポーネント」に、`<Route>`や`<Switch>`(v6では`<Routes>`)といった「ルーティングに関わるコード」がほとんど存在しない点に注目してほしい。

詳細は公式サイトを参照のこと。
https://reacttraining.com/blog/react-router-v6-pre/#object-based-routes

なお以下のコードは必要な箇所を部分的に抜き出したものであり、そのままでは動作しない。(例えばReact Routerに関係ないimportは全て省略している)
動作するコードは以下リポジトリ参照。(本記事と関係のないコードも多数含まれる点に注意)
https://github.com/takahiromasui001/zaik/tree/00ed024c4f36218a004280adc25316bbc55dbdab

### ルーティング用のオブジェクト
ルーティングの情報をコンポーネントからほぼ完全に分離できる。別ファイルにすると更に爽快感が増す。

```routes.tsx
import { Navigate } from 'react-router-dom'

export const rootPath = [
  { path: '/login', element: <Login /> },
  {
    path: '/*',
    element: <Private />,
    children: [
      {
        path: 'stocks/*',
        element: <Stock />,
        children: [
          { path: '/:id', element: <StockDetail /> },
          { path: '/', element: <StockList /> },
        ],
      },
      { path: '/', element: <Navigate to="/stocks" /> },
    ],
  },
]

```

なおこの例ではchildrenを利用することで、ネスト構造を1つのオブジェクトにまとめているが、オブジェクトに分けて必要なコンポーネントに個別に読み込ませることもできる。(その場合は後ほど紹介する`<Outlet>`を用いず、次に紹介する「親コンポーネント」の実装のみでネスト構造のルーティングを実現することも可能)

### 親コンポーネント
「ルーティング用のオブジェクト」をimportしてuseRoutesに渡すと、ルーティング機能を持つelement(ReactElement)を作成してくれる。elementをreturnに埋め込むだけでルーティングが実現できる。

```App.tsx
import { rootPath } from './routes'

function App() {
  const element = useRoutes(rootPath)

  return  (
    {element}
  )
}
```

### 子コンポーネント
「ルーティング用のオブジェクト」においてchildrenとして設定したルーティングは、親コンポーネント内で`<Outlet />`を呼び出すことで利用可能。`<Outlet />`はコンポーネントとして扱えるので、他のコンポーネント(下の例で言うとHeader)と組み合わせて利用出来てとても便利。

```Private.tsx
import { Outlet } from 'react-router-dom'

const Private: React.FC = () => {
  return (
    <>
      <Header />
      <Outlet />
    </>
  )
}
```

## デメリット
機能を知らないと、最初に各コンポーネントで`<Outlet />`を見た際にルーティングのことだとは全く分からないし、コンポーネントだけを上から辿っても(routes.tsxを見ない限り)ルーティングの情報に行き着けない。コードの可読性が別の観点で落ちているかもしれない。

## 最後に
最初にも書いたがまだβ版なので注意して利用のこと。
また、ドキュメントを見ながらサラッと実装して動いて喜んでいるだけなので、おかしな点があったら指摘してほしい。
あとNext.js(触ったことない)のpagesを用いた自動生成(?)ルーティングと使い勝手を比較したい。

## 参考ページ
https://reacttraining.com/blog/react-router-v6-pre/#object-based-routes
material-iconsをローカルから読み込んで使う備忘録

# Material-iconをローカルで使う
## アイコンデータをダウンロード
[material-icons.woff2](https://fonts.gstatic.com/s/materialicons/v34/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2)

## ファイルに保存
`material-icons.woff2`として保存する

## CSSから読み込み
```css:material-icons
@font-face {
  font-family: Material Icons;
  font-style: normal;
  font-weight: 400;
  src: url(../font/material-icons.woff2) format('woff2');
}
.material-icons {
  font-family: Material Icons;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
}
```

## 通常の使い方で
```html
<i class="material-icons">place</i>
```
マップの判定・縦横 Python3編やってみた(Bランク相当）



###昨日公開されたPaizaのAランクセットアップ。
コーディングした内容が保存されないので記録として。
現在Bランク。



####コード

```python:paiza_map.py

h,w = [int(i) for i in input().slit()]

board = [list(input()) for i in range(h)]



for i in range(h):
    for j in range(w):
        #左上の場合
        if i == 0 and j == 0:
            if board[0][1] == "#" and board[1][0] == "#":
                print(i,j)
        #右上の場合
        elif i == 0 and j == w-1:
            if board[0][j-1] == "#" and board[1][j] == "#":
                print(i,j)
        #左下の場合
        elif i == h-1 and j == 0 :
            if board[i][1] == "#" and board[i-1][0] == "#":
                print(i,j)
        #右下の場合
        elif i == h-1 and j == w-1:
            if board[i-1][j] == "#" and board[i][j-1] == "#":
                print(i,j)
        #上の場合
        elif i == 0:
            if board[0][j-1] == "#" and board[0][j+1] == "#" and board[1][j] == "#":
                print(i,j)
        #下の場合
        elif i == h-1:
            if board[i][j-1] == "#" and board[i][j+1] == "#" and board[i+1][j] == "#":
                print(i,j)
        #左の場合
        elif j == 0:
            if board[i+1][j] == "#" and board[i-1][j] == "#" and board[i][1] == "#":
                print(i,j)
        #右の場合
        elif j == w-1:
            if board[i+1][j] == "#" and board[i-1][j] == "#" and board[i][j-1] == "#":
                print(i,j)
        #それ以外
        else:
            if board[i+1][j] == "#" and board[i-1][j] == "#" and board[i][j-1] == "#" and board[i][j+1] == "#":
                print(i,j)

```
####感想
分岐多めでめんどくさいけど、かなり簡単な部類。
予め整理して取り組めば10分余り位で溶ける問題。








######参照#######
 [マップの判定・縦横 (paizaランク B 相当)](https://paiza.jp/works/mondai/a_rank_level_up_problems/a_rank_snake_map_boss?language_uid=python3&t=0282a4089979385a8ccc9d006550d366)
vistaでquartus その29


#概要

vistaでquartusやってみた。
cpu作ってみた。
aluを拡張してみた。

#サンプルコード

加算、減算、乗算、除算、剰余、大きい、小さいを実装。

```
module alu(input [15:0] a, input [15:0] b, input [4:0] f, output reg [15:0] s);
	always @(a or b or f)
	begin
		case (f)
		0:
			s = b + a;
		1:
			s = b > a;
		2:
			s = b < a;
		3:
			s = b - a;
		4:
			s = b * a;
		5:
			s = b / a;
		6:
		begin
			s = b / a;
			s = b - s * a;
		end
		default:
			s = 16'hxxxx;
		endcase
	end
endmodule

```

以上。
WSL2でRstudioを使うときのX11 Forwarding設定

# WSLのバージョン

もともと旧WSLを使用していたのだが、同じ端末でWSL2に更新した。
WSLにおいて下記コマンドを入力。

```:コマンド
lsb_release -a
```

出力でバージョンが20.XXとなっていることからWSL2への更新がなんとかできたことを確認。

```:出力
Distributor ID: Ubuntu
Description:    Ubuntu 20.04.1 LTS
Release:        20.04
Codename:       focal
```

# WSL2でのX11 Forwarding設定

実用面でWSL (18.XX)とWSL2 (20.XX)の使い勝手の差はほとんどなく（何かしらのツールがバージョンしているしていないの違いはある）、パフォーマンスなどへの改善が多いのかと思う。

大きく違う点として、X11 Forward設定のアドレスがlocalhostでなくなったということがある。

この設定は、ホームの.bashrcなどで次の一行を追加することで行われる。

```
(WSL)
export DISPLAY=localhost:0.0

(WSL2)
export DISPLAY=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2}'):0
```

WSL2では、端末を起動するたびにアドレスが変わるため、/etc/resolv.confからnameserverを読み取ることによって設定している。

```:確認
> $DISPLAY
172.20.XXX.X:0: command not found
```

x11-appsなどをインストールしたうえで、コマンド`xeyes`を実行し、その設定が完了していることを確認する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187118/3dbdde99-c8e0-341d-d201-3d7f23df9501.png)


# RStudio-serverでX11の機能を確認

RStudio-serverのインストールについては、[公式](https://support.rstudio.com/hc/en-us/articles/360049776974-Using-RStudio-Server-in-Windows-WSL2)でどんどん更新があるほか、いくつか記事はあるため、作業に時間を要するにせよ、あまりつまることなく作業を進められるかと思う。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187118/bc45292a-448f-ca34-610b-2c5f3bb82431.png)

写真にあるように、次のコマンドを実施してみる。

```
capabilities()
```

すると、X11でFALSEと付記されていることがわかる。
例えば、3次元プロット用パッケージ [rgl](https://cran.r-project.org/web/packages/rgl/vignettes/rgl.html) とかだと、新たにウィンドウを開いて描画結果を出力するのであるが、この状態だとそれができない。

```:rgl読み込み時のWarning
> library(rgl)
Warning messages:
1: In rgl.init(initValue, onlyNULL) : RGL: unable to open X11 display
2: 'rgl.init' failed, running with 'rgl.useNULL = TRUE'. 
> open3d()
null 
   1 
```

読込時に上記Warningが現れ、`open3d()`にてウィンドウを開こうとしても開けない。
ちなみに、WSL2のコマンドライン上でRを起動すると、このようなエラーはでず、正常に機能する。

# 解決策：再起動とDISPLAYの修正

原因は、環境変数DISPLAYがRStudioだと異なってしまっているため。

```DISPLAYの確認
> Sys.getenv("DISPLAY")
[1] ":0"
```

これは、X11 Forwardingにlocalhostを用いていたWSLでは正常に動く状態だが、WSL2からは書き換える必要がある。

一度、Rをrestartする。

WSL2のコマンドライン上で`$DISPLAY`を確認したうえで、RStudioの設定を変更する。

```DISPLAYの更新
> Sys.setenv("DISPLAY" = "172.20.XXX.X:0")
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187118/6438b6bd-784c-394c-2c5b-93de3a9b0991.png)

`capabilities()`のX11欄がTRUEとなり、これでrglが使える。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187118/59f625a8-c0cd-9248-79b6-8694da9ec3e3.png)