OmniAICreator/Qiita-1.07M huggingface dataset:
デザインに心がないエンジニアがOOUIの手法を使ってデザインをし直してみた~その後~

昨日、投稿した以下の記事のその後の物語、、

[デザインに心がないエンジニアがOOUIの手法を使ってデザインをし直してみた](https://qiita.com/tetsukick/items/cb8ede9e0dd8c119dd0d)

## 前回の終了時点

<img width="593" alt="Screen Shot 2019-12-16 at 6.23.23 PM.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/549f3044-dec1-ccc3-8565-49f652802037.png">

前回の投稿をして、すぐに[師匠（村上さん）](https://twitter.com/WeiweYu)より、こんなアドバイスをいただきました。

![bt9iXN99.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/a04fe33d-5524-407b-752b-6e5bf08c0e5a.jpeg)

で、その結果、、

## 最終的に

<変更点>
- 単語の追加のフローティングボタンが分かりづらかったので、iOSメモアプリを参考にしてタブバーを追加して新規作成ボタンを追加
- 一覧画面に削除ボタンを追加
<img width="604" alt="Screen Shot 2019-12-17 at 6.00.55 PM.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261934/aee97f5e-7887-557a-87ee-1327e361d75c.png">

## あとがき
本当にありがとうございます。
Laravelにて「.env.testing」がうまく読み込まれないときの対処法

# はじめに
マイグレーションファイルを追加して、以下のコマンドを実行したのですが、「Nothing to migrate.」となり、マイグレーションが実行されなかったので、対処法をまとめました

```bash
$ php artisan migrate --env=testing
Nothing to migrate.
```

# Laravelのバージョン

```bash
$ php artisan --version
Laravel Framework 5.8.29
```

# 対処法
以下のコマンドを実行して、キャッシュをクリアすることで、マイグレーションが実行されました

```bash
$ php artisan config:clear
Configuration cache cleared!

$ php artisan migrate --env=testing
Migrating: 2019_12_17_150625_create_hoges_table
Migrated:  2019_12_17_150625_create_hoges_table (0.02 seconds)
```

# 終わりに
.env.testingを更新したときは、キャッシュクリアを忘れずにしようと思います
Cloud Foundry の nginx-buildpack で OpenResty (Lua) を使う方法

## OpenRestyとは

Nginxの拡張バージョンで、Luaライブラリをを含む高品質のサードパーティーモジュールがバンドルされているパッケージです。

## nginx-buildpackでOpenRestyを選択する方法

pushするディレクトリのルートに下記buildpack.ymlを配置するだけです。
https://github.com/cloudfoundry/nginx-buildpack/blob/master/fixtures/openresty/buildpack.yml

#####  OPENSSL_1_1_1 not foundが発生する場合

当環境ではbuildpackのv1.0.17～v1.1.2で上記のエラーを確認しました。
v1.0.15にダウングレードすることでOpenRestyが使えます。

```manifest.yml
buildpack: https://github.com/cloudfoundry/nginx-buildpack#v1.0.15
```

以上です。
サーバーにssh接続する流れ

さくらのVPSにSSH接続したので流れをまとめます。
なお、VPS上での操作は他のメンバーが担当したので、ユーザー名やパスワード等がわかっているところからの手順になります。

##sshキーペアを作成
```terminal
$ cd ~/.ssh
$ ssh-keygen -f id_rsa
```
`id_rsa`、`id_rsa.pub`が作成されます。
なお、`id_rsa`部分は任意のファイル名を指定できます。

またキーペア作成時に、パスワードを設定するか聞かれます。何も入力せずにEnterを押すと、パスワードなしの鍵が作成されます。


```terminal
$ cat ~/.ssh/id_rsa.pub | pbcopy
```
サーバー側への登録のために、公開鍵の中身をクリップボードにコピーしておきましょう。

##公開鍵をauthornized_keyに書き込む
サーバー側で設定されているパスワードを使ってssh接続し、公開鍵の情報を追記します。

```terminal
$ ssh username@example.com -p 123456
```
`username`はユーザー名、`example.com`はドメイン、`12345`はポート番号です。
環境に合わせて変更してください。

以下、サーバー上での操作です。

```terminal
$ cd .ssh
$ vi authornized_key
```
authornized_keyを編集して（無ければ作成して）、クリップボードにコピーしてある公開鍵の中身を追記しましょう。

##ssh configの設定
最後に、ローカルに戻り`config`を編集します。

```terminal
$ cd ~/.ssh
$ vim config
```

以下の内容を書き込みます。

```:~/.ssh/config
Host example.com
  HostName 111.22.333.444
  Port 12345
  User username
  IdentityFile ~/.ssh/id_rsa
```
`example.com`：ドメイン名
`111.22.333.444`：IPアドレス
`12345`：ポート番号
`username`：ユーザー名
`~/.ssh/id_rsa`：秘密鍵の絶対パス
です。

##動作確認
以下のコマンドだけでssh接続ができるようになっていれば、設定完了です。

```terminal
$ ssh example.com
```

##パーミッションエラーがおかしいと怒られたら
```terminal
$ chmod 700 ~/.ssh
$ chmod 600 ~/.ssh/id_rsa
```

## 参考
[ssh接続を鍵認証で行う](http://www.tooyama.org/ssh-key.html)
KH Coderでフォルダごと分析するとエラーが吐き出される件

# 1. そもそもの話

` プロジェクト > インポート > フォルダ内の複数テキスト ` でデータをインポートすると、事前にデータをインポートせずともKH Coder内で統合分析できるようになる。マニュアルを流し読みしてたので、最近読み直して初めて知った。便利。

そこで、今まで手作業で統合させていたcsvファイルをフォルダごと突っ込んでテキストチェックにかけてみたところ、エラーが生じた。

**「UTF-8に変換しろー！」**と。

## 1-1. 一応変換してみるも

テキスト分析は、基本的にRを中心に、補助的に（とくに予備的分析のために）KH Coderを使っている。
RはRstudioで使っているので、できればShift-JISで保存しておきたいのだが、まぁしょうがないということで、指示通りUTF-8に変換してみた。

すると、別のエラーが発生。

**「MeCabが起動できません」**と。
そしてソフトが自動で落ちてしまった…


## 1-2. MeCabがダメ？
解析エンジンの問題なのか？
ならばChaSenで対抗だ。

とやってみたが、結局同じようなエラーが出てしまう。

何故だ…

## 1-3. csvファイルが壊れた？
そもそも根本がダメなのかもしれない。

というわけで、UTF-8のcsv単体を読み込ませると、普通にできた。
なのでファイル自体が悪いわけではなさそう。

# 2. 解決：txtにしてみた
もしやcsvじゃダメなのか？
ということで、拡張子をtxtに書き換えて読み込ませてみたら、あっさりできた。

# 3. ちなみに
最近、別の機会で同じような分析をする機会があったとき、貰ったdocxをファイルごと分析にかけてみたら読み込めた。
他方、さらに別件でxlsxデータで試みたが、この時はできなかった。
ということで、フォルダごと分析するときは**txtかdocx**が良いらしい。一応解決。
ただ、外部変数を使おうとすると何らかのエクセルファイルが必要になるので、アップデートに期待しましょう。
オープンソースでSNSを構築してみた

# 概要

SNSのオープンソースHumhubをサーバーに構築する手順

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43894/6b3e04e3-a5f2-9079-d417-b8c87f78accc.png)

[Humhub](https://www.humhub.com/en)

# 手順

## 1.ソースのダウンロード

下記ページからソースをダウンロード

[ソースダウンロード](https://www.humhub.com/en/download)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43894/75b08c50-d8c8-7f3d-8d11-26b855711119.png)

## 2.FTPでアップロード

-FTPでファイルをアップロード
-ファイル「.htaccess.dist」を「.htaccess」にファイル名変更

## 3.ブラウザでアクセス

- ブラウザからhttps://ドメイン/humhub/にアクセスする
- 言語プルダウンを「日本語」にして「次」へ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43894/eec4a130-842e-c397-774d-b4b07cbac17e.png)

## 4.インストール環境かチェックされる

あれ、2個Warning出てる、おめでとう言われてるのでとりあえず「次」へ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43894/a6e7623c-ebb3-46ff-9e37-1d7b1d846e0d.png)

## 5.データベースの情報入力

データベースの情報を入力して「次」へ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43894/868e39ca-d82f-5312-29d0-05ed545ee861.png)

## 6.SNS名入力

SNSの名前を聞かれるので入力して「次」へ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43894/ea8d89ed-f4da-3553-e72b-b0edacd4c313.png)

## 7.かんたん設定

とりあえず今回は「仲間」を選択して「次」へ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43894/1e61e214-9fa2-93a0-1008-f49dc7f229e7.png)

## 8. セキュリティ設定

今回は何も設定せずに「次」へ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43894/4b24d61d-c9a2-4109-f7e1-9360fa1b7e53.png)

## 9.モジュールインストール

すべて選択して「次」へ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43894/0a9a43e5-6e93-377f-3e6e-b1f201ece8f3.png)

## 10.管理者アカウントの情報入力

キャプチャ撮るの忘れてました。

管理者の情報、パスワードなどを入力する画面です。

## 11.サンプルコンテンツ

「サンプルコンテンツを作成する（推奨）」にチェックを入れて「次」へ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43894/1411d555-e678-58e0-dee1-1cebe700e677.png)

## 12.構築完了

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43894/f2abd2f3-bdfd-1604-b0bc-0efd79a5dcc7.png)

## 13.ログイン

**ログイン画面**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43894/feaf6898-1b35-b464-1f94-84c8698fa1d0.png)

**ログイン後トップ**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43894/772d4c69-2985-e7fa-c3dd-a6b6534cdf9e.png)

# 最後に

モジュールが何個かありますが、多くないのが少し残念です。
姓名表示が逆だったり日本語化も完全ではないので、どれぐらいカスタマイズ出来るかは要調査です。
cronを動かす必要があるみたいで管理者にはアラートが出ます。
共用サーバのダークサイド

# 背景

最近の共用サーバは WordPress 等の管理画面が海外からアクセスできないことがほとんどです。
でもグローバル社会の時代にこの規制は全くそぐわない。特定の IP だけでも何とかアクセスできるようにならないか。

結論から先に言うと、出来ることは出来るがうーんという感じです。
いくつかのパターンを実験しましたので、ご報告したいと思います。
共用サーバで使用されていた WWW サーバは Apache 2.4 系です。

### パターン1: 単純に allow from を付ける
まず .htaccess ファイルに単純に

```
allow from <IP>
```

としてみました。手元の Apache では有効性を確認しましたが、共用サーバでは404エラー。

### パターン2: Files 節をつける
他のページは海外からアクセス可能であることを確認したので、.htaccess ファイルを

```
<Files wp-login.php>
allow from <IP>
</Files>
```

と wp-login.php のみ制限するように変更。手元の Apache では有効性を確認しましたが、共用サーバではやはり404エラー。

### パターン3: order 節を追加
ぐぐっていたところ、order 節をつけるとよいと書いてあったので、不本意ながら

```
<Files wp-login.php>
order allow, deny
allow from all
</Files>
```

と記述。ところがやはり 404 エラーで動かない。.htaccess を読んでいないのでは...

### パターン4: ファイルパーミッションを 604 に設定
共用サーバ FAQ に .htaccess ファイルパーミッションは 604 にしろと書いてあったので、仰せのままに設定。
ようやく海外からアクセスすることができるようになりました。

全解放か国内のみしかオプションがないというのはどうかなと思うのですが...
HTML/CSS復習　marginの相殺及びmarginの無効化について

# はじめに
現在自分はHTMLとCSSをもう一度復習しようと思い、HTML・CSSのモダンコーディングという技術書で復習をしています。
今回は、その復習途中で出会った、新しく覚えたことや重要な部分をまとめていきたいと思います。

# marginの相殺
marginとは、borderの外側の余白のことを言い、上下のmarginが隣接する別のmarginと重なってしまった場合、marginの総裁が起きてしまいます。

#marginの無効化
今まで気づかなかったのですが、小要素の上下のmarginは無効化されてしまいます。
その解決策としては、親要素にborderプロパティで明確なborderを作ることや、小要素に実際にmarginを設定するのではなく親要素のpaddingを設定することで解決することができます。
2019/12 EKSのIRSA周り雑感メモ

# tl;dr

* 2019/12現在、主要なコントローラはIRSAに対応したバージョンをリリース済み
* 個人管理でまだIRSAに対応していないものはありそう
* IRSAに対応しているものはIRSA, それ以外はkube2iamなど併用するのが良いかもしれない

# 長い説明

AWSにはIAM、Kubernetesにも権限管理の仕組みがある。
Kubernetesでは[RBAC](https://cloud.google.com/kubernetes-engine/docs/how-to/role-based-access-control)の視点で権限管理は主に語られる。というかそれ以外の権限管理の話を知らないのでこの記事ではRBACについてのみ言及する。

## AWSとkubernetesの権限管理の統合方法

[Kubernetes サービスアカウントに対するきめ細やかな IAM ロール割り当ての紹介 \| Amazon Web Services ブログ](https://aws.amazon.com/jp/blogs/news/introducing-fine-grained-iam-roles-service-accounts/)に書かれている通り、主要な統合方法だけでも以下の種類がある。

* 粗粒度(coarce grained)
    * node(EC2インスタンス)単位でのIAMロール割当て
* 細粒度(fine grained)
    * kube2iam
    * kiam
    * Zalando's IAM controller
    * IRSA(OIDC)

このうち、IRSAが2019/09に発表された最も新しい手法でかつAWS公式のソリューションでもあるので今後はこれがスタンダードになると予想される。

## 主要コントローラのIRSAサポート状況

IRSAを有効にするにはそれをサポートしたaws-sdkへコントローラ側が更新する必要がある。
[サポートされる AWS SDK の使用 \- Amazon EKS](https://docs.aws.amazon.com/ja_jp/eks/latest/userguide/iam-roles-for-service-accounts-minimum-sdk.html)に書かれているバージョン以上のaws-sdkを使っているかがIRSAを使えるかどうかに関わってくる。

2019/12/19時点でのコントローラの対応状況はこんな感じ。

| コントローラ | IRSAに対応したバージョン |
|------|------:|
| ALB Ingress Controller | [v1.1.3](https://github.com/kubernetes-sigs/aws-alb-ingress-controller/commit/ff7724e14df9eabbfcb2c9e72dd3607773fe9116) |
| External DNS | [v0.5.17](https://github.com/kubernetes-sigs/external-dns/releases/tag/v0.5.17) |
| External Secrets | [v2.1.0](https://github.com/godaddy/kubernetes-external-secrets/blob/35999f8b3de8d0105faf837f968f5f1fcef7eed9/CHANGELOG.md) |
| Cluster Autoscaler | [v1.13.8](https://github.com/kubernetes/autoscaler/releases/tag/cluster-autoscaler-1.13.8) |
|kube ingress aws controller | [v0.8.12](https://github.com/zalando-incubator/kube-ingress-aws-controller/pull/270) |
| aws app mesh controller for k8s | [v0.2.0](https://github.com/aws/aws-app-mesh-controller-for-k8s/commit/091871e45ffd35c9b5b4cdf41b488b4100bf53e6) |
| argo cd | [v2.4.0](https://github.com/argoproj/argo/releases/tag/v2.4.0) |
| amazon vpc cni k8s | [v1.5.5](https://docs.aws.amazon.com/ja_jp/eks/latest/userguide/iam-roles-for-service-accounts-cni-walkthrough.html)[^5] |

[^5]: [1.5.5と書いてあるが怪しい](https://github.com/aws/amazon-vpc-cni-k8s/blob/release-1.5.5/go.sum#L6-L9)。[コミット上aws-sdkをbumpしたのは1.6.0RC4](https://github.com/aws/amazon-vpc-cni-k8s/releases/tag/v1.6.0-rc4)なのでドキュメントを信用せずそちらを使ったほうが良さそう。

調べた限り基本的に対応していた。[サポートされる AWS SDK の使用 \- Amazon EKS](https://docs.aws.amazon.com/ja_jp/eks/latest/userguide/iam-roles-for-service-accounts-minimum-sdk.html)にはALB ingress controllerやcluster autoscalerが対応していないと書いてあるがすでに対応したバージョンがリリースされている。

## IRSAに対応していないコントローラもある状況で細粒度の権限管理をしたい場合

kube2iamなどとの併用が現実的な回答となる。

[^1]: [Integration with AWS IAM Roles for ServiceAccounts by arruzk · Pull Request \#200 · godaddy/kubernetes\-external\-secrets](https://github.com/godaddy/kubernetes-external-secrets/pull/200)

# 謝辞

この記事はSpeee社内でレビューをしていただきました。 @winebarrel さんありがとう！
Djangoにbootstrapを組み合わせてブログを作る時のTips

#自作のブログを作りたい時のTips
noteやはてブを使えば簡単にブログ投稿が出来てしまう時代でも、
やっぱり自分自身のブログを作ってみたいですよね。
そんな思いで絶賛自作中なのですが、必要なTipsが集まっている投稿が少ないのでまとめていきます。

##Django
Pythonで使えるWebアプリケーションフレームワークです。これにより作成のハードルがグッと下がります。
公式のリファレンスを確認しても良いのですが、最近は多くの方が日本語訳をしながらも実践的な部分のみ抽出してまとめてくれています。特にこの方のQiitaには大変助けられました。
https://qiita.com/j54854/items/7e935252a072a3642c01

##Bootstrap
HTMLやCSSの構造や仕組みを理解する事は重要ですが、実際にコードを書く際のハードルを低くしたのがBootstrapと呼ばれるCDN（Content Delivery Network）です。
最近では個人ブログでもCDNを利用している人が多く、見た目だけで言えば最適なデザインが固まりつつある印象があります。
今でもバージョンアップされているので、オリジナルとは言えないけれど見た目は整えたい！と言う方にはオススメです。
https://getbootstrap.com

##summernote
ブログを作るなら記事を投稿する仕組みが必要ですよね。
テキストエディタを管理画面に設置してリッチな文章や画像・動画のアップロードを簡単に行える仕組みがsummernoteです。
https://zerofromlight.com/blogs/detail/51/

##テキストの画面表示
summernoteを使ってhtmlテキストをブログに表示する際に色々と変換が必要だったので、その際役に立ったものを載せておきます。
https://qiita.com/nachashin/items/d3f9cd637a9cecbda72c
2019年の18日目の記事

# はじめに

この記事はジャパンシステム Advent Calendar 2019の18日目の記事です。


こんにちは、社内ではQiitaのコントリビューションは1番の@kjunichiです。

だからといって、すごい記事は相変わらず書けないのと、今週は次男の保育園の卒園文集の原稿を書き上げないといけなので詰んでます。。。

# とりあえず皆様の記事を振り帰ってみます

## 2日目

@yokotate さん

- [Power Appsを使用してプロトタイプ開発をした話](/yokotate/items/737ca1a18926b10cdb24)


便利そうなツールですね。MS系大好きなお客様のところでは
かなり、重宝しそうな気がしました。

@yuki-yoshida さん

- [白黒のボールだけでなんとなく分かる量子コンピュータ超々入門 - Qiita](https://qiita.com/yuki-yoshida/items/871fdd9bd174e329a5ca)

自分も量子コンピューターには注目しており、

- [150行の量子コンピューターのシミュレーターのコードを知って学んだこと - non vorrei lavorare](https://abrakatabura.hatenablog.com/entry/2018/04/13/063738)

というブログ記事まで書いてはいますが、なかなかその先に進めてないですｗ。
正月休みが確保出来たら、じっくり読みたい記事です！

@shuichiro さん

- [Google Cloud Runのポートについて考える - Qiita](https://qiita.com/shuichiro/items/8e3f3e870481cac9aec9)

自分もGoogleではGoogle App Engineを使ってます。最近はherokuを個人では利用しており、

- [herokuにデプロイしてたSlackボット(Botkitベース)を治した - non vorrei lavorare](https://abrakatabura.hatenablog.com/entry/2019/05/21/073500)

のような記事を書いてます。

@aoi-takumi さん

- [pythonでハッシュ化して某大臣のエゴサから逃れる - Qiita](https://qiita.com/aoi-takumi/items/a92c8f021fb56fdc34f1)

個人的に好きなネタでした！
ちょっと「ハッシュ」の意味が違う気もしますが、

- [URLのハッシュを画像化してみた - non vorrei lavorare](https://abrakatabura.hatenablog.com/entry/2014/08/07/070830)

というハッシュつながりの記事を昔書いてたのを思い出しました。

@taka_baya さん
[全結合ニューラルネットワークを使って情報量を増やせないか試す - Qiita](https://qiita.com/taka_baya/items/5ea375e92521d8fc5127)

機械学習系の記事ですね！自分もこの分野も興味があって

- [2018年版pytorchによるcycleGANの実装をWindowsで動かした - non vorrei lavorare](https://abrakatabura.hatenablog.com/entry/2018/03/11/194640)
- [Windows(MSVC)でmrubyからGPU対応のTensorflowを動かせた - non vorrei lavorare](https://abrakatabura.hatenablog.com/entry/2017/01/28/125353)
- [Tensorflowのclassify_image.pyにElectronでGUIを被せてみた - non vorrei lavorare](https://abrakatabura.hatenablog.com/entry/2017/02/05/134054)
- [Raspberry Pi3でTensorflowをビルドして動かした - non vorrei lavorare](https://abrakatabura.hatenablog.com/entry/2018/03/18/210804)

と、改めて振り買ってみると、実装よりの話題ばかり追いかけてますね。


ついつい、客先常駐の身で普段こちらのQiitaのメンバーと交流が
無いので、調子に乗って絡んでしまいました。


# LinuxやUnixなホスト上でのコマンドあれこれ

WindowsでGUIなFTP系のクライアントを使ってファイルを眺めることは
できますが、やはり、コマンドラインが使えたほうが作業がはかどります。

## その1

```shell-session
ls -ltr
```


lsコマンドは知っている方が多いですが、「-ltr」というオプションを
使うと、ファイルを日付の古い順で表示してくれます。

一番新しいファイルが一番下に表示されます。

例えば、連携試験で先方からのアクセスログが日付ごとに出力されるようなケースでは、

昨日アクセスあったのかな？
ということを調べるのにいちいち、端末をスクロールしてさかのぼらずに
済むので便利です。

# その2

複数のフォルダで区切られたファイルから一括してキーワード検索する


```txt
├─AAA
│  └─CCC
└─BBB
```

といった感じで、AAAの配下、CCCの配下、BBBの配下に
ファイルが複数配置されて、この中から特定のキーワードを含むファイルを
探すケースで便利なコマンドです。


```shell-session
find . -type f -exec grep -n keyword /dev/null {} \;
```

実はPerl実装であれば、ackコマンド、Go実装であれば[ptコマンド](https://github.com/monochromegane/the_platinum_searcher)、
Rust実装であれば、[ripgrepコマンド](https://github.com/BurntSushi/ripgrep)といった具合に専用のコマンドが
あるのですが、客先のホストなどで自由にソフトウェアのインストールできない！
といった制限が割とよくあるので、覚えておいて損はないと思います。

ちなみに、フォルダは10階層程度がデフォルトだったかと思いますので、
必要に応じで

```
man find
```

なりで調べてみて下さい。


# その３

今度は毛色が変わってショートカット編です。

ちょっと危険な　Ctrl+S

これ、エクセルやワードでは保存のショートカットなのですが、
ターミナルソフトで実行すると

スクリーン表示の停止


となることが多いです。知らずにこのショートカット押してて
画面が固まったーーー

みたいにびっくりするし、下手に反応が遅いだけと思い、
キーを打ち込んでしまうと、悲惨なことが起こりえます。

戻すには

Ctrl+Q

です。


# おわりに

なんとか、小ネタでしたが、記事を投稿でき、次男の卒園文集の
原稿執筆に戻れそうです。
ipdbで手軽にデバッグ

[未来電子テクノロジー](https://www.miraidenshi-tech.jp/intern-content/program/)でインターンをしている[箕牧和廣](https://qiita.com/mimaki_kazuhiro)です。
今回はipdbについて書いていこうと思います。

プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。

#ipdbとは
Pythonに標準で備わったデバッガであるpdbの拡張機能を提供している。
デバッグとはプログラムの誤りを見つけ、手直しすること。
それでは、まずインストール。

```sh:terminal
$ sudo pip install ipdb
```

#実際に動作させてみる

適当な名前のファイルを作成する。
今回は`test.py`というファイルを作成。

```sh:test.py
import ipdb
print ("debug program")
a = 10 / 3
b = 10.3 / 3.4
ipdb.set_trace()
print (a,b)
```

下記のコマンドで実行。

```sh:terminal
python3 -m ipdb test.py #ファイル名
```

すると以下のような画面に。

```sh:terminal
> /Users/mimakikazuhiro/Desktop/djangosw/test.py(1)<module>()
----> 1 import ipdb
      2 print ("debug program")
      3 a = 10 / 3

ipdb>
```

「どんな機能があるのかな〜」ということでとりあえず「h」を押してみる。

```sh:terminal
ipdb> h                                                                         

Documented commands (type help <topic>):
========================================
EOF    cl         disable  interact  next    psource  rv         unt   
a      clear      display  j         p       q        s          until 
alias  commands   down     jump      pdef    quit     source     up    
args   condition  enable   l         pdoc    r        step       w     
b      cont       exit     list      pfile   restart  tbreak     whatis
break  continue   h        ll        pinfo   return   u          where 
bt     d          help     longlist  pinfo2  retval   unalias  
c      debug      ignore   n         pp      run      undisplay

Miscellaneous help topics:
==========================
exec  pdb

ipdb>
```

色々押してみる。

```sh:terminal
ipdb> n                                                                        
> /Users/mimakikazuhiro/Desktop/djangosw/test.py(2)<module>()
      1 import ipdb
----> 2 print ("debug program")
      3 a = 10 / 3
```

```sh:terminal
ipdb> s                                                                        
debug program
> /Users/mimakikazuhiro/Desktop/djangosw/test.py(3)<module>()
      2 print ("debug program")
----> 3 a = 10 / 3
      4 b = 10.3 / 3.4
```

```sh:terminal
ipdb> q
```

「q」で終了。
こんな感じで簡単にデバッグができるみたい。
EM.FMに出会い、自分の役割がエンジニアリングマネージャーだと気付いた話

これは [Engineering Manager vol.2 Advent Calendar 2019](https://qiita.com/advent-calendar/2019/em2)の17日目の記事です。

## はじめに
[株式会社ウエディングパーク](https://www.weddingpark.co.jp/)でエンジニアリングマネージャー（以下、EM）をしている[@saik1010](https://twitter.com/saik1010)です。

今回は、私が現職でEMになってから約1年半でマネジメントやエンジニアリングなどの狭間で悩み続けながら情報収集を繰り返した結果、たどり着いたEMという役割について感じていることをご紹介しようと思います。

## EMになって当初感じていたこと
私がEMになったのは、先ほどもお伝えした通り1年半ほど前になります。
その当時は、EMという役割も知っておらず、感覚としては 「**職種でいうエンジニアの上位職**」と捉えていました。なのでいわゆるプレイングマネージャーみたいなイメージでしょうか。

* 開発に入ってプロダクトコードはがっつり書く
* PjM的な案件を推進する役割を担う
* 案件に関わるメンバーの育成

今書き出すとかなり漠然としていたなと感じます。笑

## EMという役割を知って
当初感じていたことを目指しながら、半年ほど仕事をしていく中で、色々な壁にぶつかりました。
[エンジニアリングマネジメントトライアングル](エンジニアリングマネジメントトライアングル)でもある通り、EMには幅広い領域のスキルが必要なのでは・・・と自分の力不足を感じることになります。

そこで世の中のエンジニアでマネージャーやっている人は、どういう役割を担い、どういうスキルセットを持っているのだろうと情報収集しているうちに出会ったのが、[EM.FM](https://anchor.fm/em-fm)になります。

ここで@hirokidaichiさんと@yunon_physさんがお話しされている内容を聞いて、衝撃を受けることとなります。同じエンジニアのマネジメントをしているにも関わらずお話ししている内容が「組織、チーム、メンバー、プロダクト、テクノロジー」と多岐に渡るかつ、それをあらゆる理論や法則を組み合わせてお話をされていました。（正直最初は何を話しているのか半分ぐらいは理解できていませんでした。笑）

そこから私のEMに対する印象が変わっていくことになり、これはやりがいのある職種なのでは・・・と感じ始めました。その後、[Developers Summit 2019 Summer](https://event.shoeisha.jp/devsumi/20190702/)や[EOF2019](https://eof2019.peatix.com/?lang=ja)に参加し、更にEMとしての魅力を感じるようになりました。

## 最後に
書きながら何を言いたいのかわからなくなってしまいましたが・・・笑
とにかく言いたいことは、EMという役割は「**非常にやりがいのある役割**」ということです。

よくエンジニアはマネジメントを嫌がる職種だと耳にすることがありますが、自分自身がEMとしてレベルアップし活躍することで、少しでも憧れの役割になってもらえるように日々精進していきたいと思います！

少し大袈裟ですが、[EM.FM](https://anchor.fm/em-fm)に出会うことで新たなキャリアイメージを持つことができ、私自身もモチベーション向上につながったことをこの場を借りて感謝をお伝えさせていただきます！

来年からはEM界隈にもどんどん積極的に足を運び、共に盛り上げていきたいと思います！
z algorithm(strings of eternity)

文字列が与えられた時、各 i について「S と S[i:|S|-1] の最長共通接頭辞の長さ」を記録した配列 A を O(|S|) で構築するアルゴリズム。


```python
def z_algorithm(S):
    l = len(S)
    A = [0] * l
    i = 1; j = 0
    while i < l:
        while i + j < l and S[j] == S[i + j]:
            j += 1
        if not j:
            i += 1
            continue
        A[i] = j
        k = 1
        while l - i > k < j - A[k]:
            A[i + k] = A[k]
            k += 1
        i += k; j -= k
    return A
```

https://atcoder.jp/contests/abc135/submissions/7659930
インポート宣言/パッケージ宣言

個人的な勉強のためにまとめました

##インポート宣言/パッケージ宣言


###パッケージの目的

パッケージの目的は3つ

①名前空間を提供し、名前の衝突を避ける
②アクセス修飾子と組み合わせてアクセス制御機能を提供する
③クラス分類を提供する

①は、もし、クラス名が重複してしまうとコンパイラやJVMは、どちらのクラスを利用すればよいか判断できないので、このような事態を防ぐために、コンパイラやJVMは、クラスを「**パッケージ名.クラス名**」の**完全修飾クラス名**で扱うから
　※慣習としてドメイン名を逆にしたものがパッケージ名に使われる

②は、クラスを複数のパッケージに分けると、パッケージ単位でアクセス制御ができるようになる

　例）publicなSampleクラスの宣言

```Sample.java
package jp.co.xxx;
public calss Sample{
      //any code
}
```

　例）Testクラスの宣言

```Test.java
package jp.co.xxx;
calss Test{
      //any code
}
```

公開・非公開に分けることで、設計者が意図しないクラスが不用意に使われることを防ぐ

③は、パッケージは、ディレクトリ構造とマッピングされるので、多数のクラスを分類整理することができ、ソフトウェアの管理が容易になる



###パッケージのインポート

・**インポート宣言**することで、パッケージ名を省略してクラス名だけで記述することができる
・**java.langパッケージ**は基本的なクラスがまとめられたパッケージであり、頻繁に利用するためインポート宣言を省略することができる
・**アスタリスク「*」**を使ってそのパッケージに属するクラスすべて利用することがインポートできる

　例）java.utilパッケージに属する全クラスのインポート宣言
　`import java.util.*;`

・ただし、**指定したパッケージに属するクラス**に限定されるので、サブパッケージに属するクラスがインポートされることはない

###staticインポート

・本来、staticなフィールドやメソッドは、**クラス名.フィールド名**や**クラス名.メソッド名**の書式で、どのクラスに定義されているものか明示しなければいけない
これをフィールド名やメソッド名だけで省略表記できるようにするための宣言が**staticインポート**
・staticインポートは、import staticに続けて、省略表記したいフィールドやメソッドの完全修飾クラス名を記述する

　例）staticインポート宣言
　`import static jp.co.xxx.Sample.num`←Sampleクラスのstaticなフィールドをインポート
　`import static jp.co.xxx.Sample.print`←Sampleクラスのstaticなメソッドをインポート

・staticメソッドをインポート宣言するときは、**メソッドだけ**を記述し、カッコ「()」や引数などは記述しない
・オーバーロードされた同名のメソッドが複数あった場合はオーバーロードのルールが適用されるので、メソッドの数だけインポート宣言したり、引数を指定したりする必要はない
・インポートしたクラスに、インポートされたメソッドやフィールドと同名のものがあった場合、そのインポートは無視される
Windows10にVirtualBoxを入れてUbuntuインスタンスを作成する際にしたこと。

いつもCentOSでUbuntuはあまり使ってないので、今回、自分のメモ用に残していきます。随時更新します。


## Windows10での設定変更 

ここがこの投稿のメインかも。自分は以前にWindows10にDockerを入れて遊んだため、以下のような設定変更が必要だった。

[Windows Features] > [Turn Windows features on or off]において、以下のチェックを外す。

- Hyper-V

![hyperv.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535338/4c64619e-a359-3ce5-893c-30e7d51057db.png)



以下はサイトによってチェックをつけろ/外せと意見が分かれてますが私は外したままでうまくいきました。

- Windows Hypervisor Platform
- Virtual Machine Platform



## Ubuntu のダウンロード/インストール
- Ubuntuのサイトからダウンロード(https://ubuntu.com/)

   
- VirtualBoxの画面が小さいので大きくなるよう変更
![virtualbox01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535338/6076909e-f5c2-05fd-dbb3-3308fefd4702.png)

- アイコンサイズ変更
![icon_size.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535338/134bc6cd-f3bb-4671-5aee-8897f3b5344a.png)

- Network設定を固定ローカルIPに変更(dhcp外す。)
- 外部からssh接続できるようにする。
```sudo apt-get install openssh-server```
- curl のinstall
```sudo apt install curl```
- git のインストール
```sudo apt install git```
- プロンプトの変更

```ruby:.bashrc
 export PS1="[\u@\h \W]\\$ " 
```
編集距離を求めるpythonプログラムを書く【python】【Levenshtein距離】

# 編集距離 is 何
- 2つの文字列を比較する指標
- 以下の3つの操作を何回行うことでs1からs2へ変換できるか
  - 置換
  - 挿入
  - 削除

## 大雑把な説明
- s1からs2へ文字列を変換することを考える

```
s1 = "aaa"
s2 = "aab"
```
- 上記のような文字列だった場合編集距離は1
  - 置換が1回

```
s1 = "aba"
s2 = "cc"
```
- 上記のような文字列だった場合編集距離は3
  - 置換2回
  - 挿入1回

# 実装
めちゃ便利なpythonモジュール`python-Levenshtein`がある
公式ドキュメントは[こちら](https://pypi.org/project/python-Levenshtein/)

## インストール
pipとかでインストール

```
$ pip install python-Levenshtein
```

## プログラム

```python:leven.py
import Levenshtein
import sys

args = sys.argv

with open(args[1], "r") as f_ans:
    with open(args[2], "r") as f_ref:
        s_ans = f_ans.read()
        s_ref = f_ref.read()

print(Levenshtein.distance(s_ans, s_ref))
```

コマンドライン引数に2つのテキストファイルを指定して編集距離を吐き出すだけの簡単なプログラムです.


## 結果
2つのテキストファイルを用意します.


```:tmp1.txt
Helllo worb!!
```

```:tmp2.txt
Hello world!
```

tmp1.txtからtmp2.txtへ変換するためには、

- "Helllo"の"l"を1個削除
- "worb"について
    - "l"を追加
    - "b"を"d"に置換
- "!"を1個削除

よって編集距離は4になるはずです。

```
$ python leven.py tmp1.txt tmp2.txt
4
```
なりました。嬉しい。

# 所感
動的計画法で実装しようと思ったけど、モジュール落ちてるの見つけて実装面倒くさくなった人の書いた記事です。何かあればコメント欄にお願いします。
IchigoJamで「にゃーん」

# 何をするか

「にゃーん」をいっぱい流す。

# 実行結果

YouTube動画(2分23秒)

[![実行結果(YouTube)](http://img.youtube.com/vi/Sm0LZto8NKM/0.jpg)](http://www.youtube.com/watch?v=Sm0LZto8NKM)

# ソースコード

```
10 'ﾆｬｰﾝ
20 POKE#700,#00,#4C,#42,#40
30 POKE#704,#40,#48,#26,#00
40 POKE#708,#00,#00,#00,#28
50 POKE#70C,#7C,#24,#20,#00
60 POKE#710,#00,#00,#00,#0E
70 POKE#714,#70,#00,#00,#00
80 POKE#718,#00,#08,#10,#20
90 POKE#71C,#38,#6A,#44,#00
100 FOR I=0 TO 23:[I]=0:NEXT
110 CLS
120 SCROLL LEFT
130 FOR I=0 TO 23
140 IF [I]=0 GOTO 190
150 [I]=[I]+1
160 IF [I]>4:[I]=0:GOTO 210
170 POKE#91F+32*I,#E0+[I]-1
180 GOTO 210
190 IF RND(48)<>0 GOTO 210
200 [I]=1:GOTO 170
210 NEXT
220 WAIT 5:GOTO 120
```

# 解説

カタカナの「ニャーン」ではなくひらがなの「にゃーん」を出すために、「にゃーん」のフォントを用意した。
`SCROLL`命令で「にゃーん」を左に流す。
配列で右端の状態を管理する。
「にゃーん」が出ている途中であれば次の文字を出し、出ていないならばランダムで出し始める。

# 裏の解説

スケジューリングが下手にゃので連日Advent Calendar用の記事を深夜に書いてしまうにゃーん。
そのため、夜寝る時間が普段でも短いが、普段よりさらに短くなってしまうにゃーん。
にゃーん。

# IchigoJamとは

2,000円前後で購入することができ、BASICによるプログラミングが可能なパソコン。

[こどもパソコン IchigoJam - はじめてのプログラミングパソコン(1500円)](https://ichigojam.net/)

また、プログラムをWebブラウザ上で実行できるサービスもある。

[IchigoJam web by WebAssembly](https://fukuno.jig.jp/app/IchigoJam/)

※「IchigoJam」はjig.jpの登録商標
Redux公式のBasics TutorialでToDoリストを作ってみた

Reactで、状態管理ライブラリとしてよく使われるRedux。
使い方を調べようと、公式サイトにあるBasics TutorialでToDoリストを作りにチャレンジしてみた。
ただ、このチュートリアル、ステップ・バイ・ステップになっていないので、なんだかわかりにくい。

そこで、どんな内容なのか、簡単にメモを残します。

## 内容

チュートリアルは、こちら(英語)。

- Basic Tutorial: Intro · Redux
- https://redux.js.org/basics/basic-tutorial

Redux単独のチュートリアルのように見えるけど、じつはReactと組み合わせてToDo Listを作っている。

以下は、(ほぼ)同じ内容を日本語でなぞっている。

- React + Redux の基本的な使い方 - KDE BLOG
- https://kde.hateblo.jp/entry/2019/02/12/023325

こちらで、完成版のデモを試すことができる。

- todos - CodeSandbox
- https://codesandbox.io/s/github/reduxjs/redux/tree/master/examples/todos

## はじめ方

ReactとReduxで作るので、create-react-appする。

```
$ create-react-app basic-tutorial-todo
$ cd basic-tutorial-todo
$ npm install --save redux react-redux redux-logger
```

## ソースコード

ToDoリストのソースコードは、こちらで入手できる。
チュートリアルだけ読んでいても、全体像がわかりにくい。
デモ版をみるか、create-react-appしたところにソースコードを流し込んだ方がいいと思う。

Example: Todo List · Redux
https://redux.js.org/basics/example

Github - reduxjs/redux
https://github.com/reduxjs/redux/tree/master/examples/todos

## ディレクトリ構成

完成すると、こんな構成になる。意外と大きい。

```
/basic-tutorial-todo
│  index.js
│  serviceWorker.js
├─actions
│      index.js
├─components
│      App.js
│      Footer.js
│      Link.js
│      Todo.js
│      TodoList.js
├─containers
│      AddTodo.js
│      FilterLink.js
│      VisibleTodoList.js
└─reducers
        index.js
        todos.js
        visibilityFilter.js
```

## 実行する

```
$ npm start
```

## 参考になるページ

Basic exampleは、ちょっと大きいので、こちらにもう少し小さいサンプルがある。

- React+Redux で Todoアプリを作ってみる │ Web備忘録
- https://webbibouroku.com/Blog/Article/react-redux-todo

そもそも、Reduxとは何なのか、これが分かりやすかった。

- Vanilla JSで学ぶRedux - Qiita
- https://qiita.com/ryota-murakami/items/2ed6b12943214ecfeeaf

ReactとReduxの連携は、これが参考になった。

- たぶんこれが一番分かりやすいと思います React + Redux のフロー図解 - Qiita
- https://qiita.com/mpyw/items/a816c6380219b1d5a3bf
【Excel VBA】改行コードなしでエクセルのセル内容をコピーするショートカットの作成

#1.この記事について

エクセルでセルをコピーしてほかのアプリケーション（メモ帳とか）に張り付けしようとすると、
セル内容のほかに改行コード（LF）がついてくる。
これが結構タスクの際に邪魔になることがある（消すためにいちいちBSキーを打つのはめんどくさい）。

エクセルに、「値の貼り付け」機能は存在するのに「値のコピー」機能が存在しないことがこういう悩みを生むんだろう。

これについて対策をする。

※改行コードはLinuxターミナルを使用可能な環境であれば
Vimで新規ファイル開いて張り付けて《:set list》を実行すれば改行コードが可視化できる。

Windowsで可視化したい場合はサクラエディタとかを使えば可能だったと思う。


#2.やりたいこと

改行コードなしでショートカット押下だけでセルの内容をコピーできる機能を追加したい。

#3.使用したツール・環境

・Office2016

#4.作成したコード

```vb:MyTool.bas
'******************************************************************************************
'*関数名    ：copyCellValueToCB
'*機能      ：アクティブセル内容をクリップボードにコピー
'*引数(1)   ：無し
'******************************************************************************************
Public Sub copyCellValueToCB()
    
    '定数
    Const FUNC_NAME As String = "copyCellValueToCB"
    
    '変数
    
    On Error GoTo ErrorHandler
    '---以下に処理を記述---


    'クリップボードに文字列を格納
    With CreateObject("Forms.TextBox.1")
        .MultiLine = True
        .Text = CStr(ActiveCell.Value)
        .SelStart = 0
        .SelLength = .TextLength
        .Copy
    End With

ExitHandler:

    Exit Sub
    
ErrorHandler:

        MsgBox "エラーが発生しましたので終了します" & _
                vbLf & _
                "関数名：" & FUNC_NAME & _
                vbLf & _
                "エラー番号" & Err.Number & Chr(13) & Err.Description, vbCritical
        
        GoTo ExitHandler
        
End Sub


```


#5.解説

作成したこいつを、
Alt + F8のマクロ画面を開いてショートカットに登録するか、
onKeyメソッドを用いてショートカットに登録する。

ほかのキーとバッティングしないように
ctrl + shift + L　とかctrl + shift + Pとかが良いんじゃないかと思う。

これでキー押下だけで改行コード無しの値のコピーが可能になった。

#6.終わりに

なにか補足がありましたらコメントください。
【Scratch3.0】ゲーム作りに役立つ？攻撃パターン４種

#はじめに
Scratchを使ってゲーム作りをしている生徒や指導員に向けて書きました！
この４種の攻撃を抑えておけばバトル系ゲームは，大体カバーできる！（たぶん）

#攻撃パターン４種とは？
　相手にダメージを与える方法は，「パンチを打つける」，「弾を当てる」など様々ある．しかし，プログラムにした時に，それらは４種に分けられることができ，それらを応用または，組み合わせることでどんな攻撃も作れることがわかった．それぞれ「直接」攻撃，「遠投」攻撃，「瞬時」攻撃，「遠隔」攻撃として，以下に述べる．

#1.「直接」攻撃
##a.「直接」攻撃とは?
「直接」攻撃とは，主人公が敵に直接ダメージを与える攻撃のことを指す．
##b.対象の攻撃
体を使った攻撃（パンチ，キックなど），武器を使った攻撃（剣，斧など）
##c.プログラム
「コスチュームが◯◯かつ，敵に触れているとき，敵にダメージを与える」パターン
<img width="457" alt="スクリーンショット 2019-12-18 2.15.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159245/0633efb7-e060-be45-82f7-b5717d1c2369.png">
##c.サンプルプログラム
[【攻撃パターンその１】直接攻撃](https://scratch.mit.edu/projects/354517215/)

#2.「遠投」攻撃
##a.「遠投」攻撃とは?
「遠投」攻撃とは，主人公から何かを飛ばし相手に関節的にダメージを与える攻撃のことを指す．
##b.対象の攻撃
ものを飛ばす攻撃（銃で弾を撃つ，弓を射る，斬撃を放つ）など
##c.プログラム
「主人公から敵に向けてものを飛ばし，当たると敵にダメージを与える」パターン
<img width="395" alt="スクリーンショット 2019-12-18 2.14.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159245/12a969a4-8778-9885-f25c-f2e11e40c54c.png">
##c.サンプルプログラム
[【攻撃パターンその２】遠投攻撃](https://scratch.mit.edu/projects/354527438/)

#3.「瞬時」攻撃
##a.「瞬時」攻撃とは?
「瞬時」攻撃とは，主人公から何かを一瞬出し相手に関節的にダメージを与える攻撃のことを指す．
##b.対象の攻撃
レーザーなど瞬時に遠いところまで届く攻撃など
##c.プログラム
「主人公から敵に向けてものを一瞬出し，当たると敵にダメージを与える」パターン
<img width="184" alt="スクリーンショット 2019-12-18 2.23.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159245/fbce153e-990b-6965-12be-70cf6b24de13.png">
##c.サンプルプログラム
[【攻撃パターンその３】瞬時攻撃](https://scratch.mit.edu/projects/354610292/)

#4.「遠隔」攻撃
##a.「遠隔」攻撃とは?
「遠隔」攻撃とは，離れた敵にダメージを与える攻撃のことを指す．
##b.対象の攻撃
魔法攻撃（雷を放つ，燃やす）など
##c.プログラム
「敵へ行きダメージを与える」パターン
<img width="175" alt="スクリーンショット 2019-12-18 2.29.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159245/5c2e2323-9f51-f2a9-2333-7ab72940f860.png">
##c.サンプルプログラム
[【攻撃パターンその４】遠隔攻撃](https://scratch.mit.edu/projects/354613218/)

#おまけ
この４種の攻撃パターンを抑えたゲームを作ったのでぜひやってみてください！！プログラムの中も必見！！
[ロボ vs クマ バトル](https://scratch.mit.edu/projects/313998719/)
[ロボ vs クマ バトル スマホ版](https://scratch.mit.edu/projects/353872703/)
クマの攻撃
1.たいあたり：[「直接」攻撃](#1直接攻撃)の応用（「遠投」攻撃風）
2.かみつく：[「遠隔」攻撃](#2遠投攻撃)と[「直接」攻撃](#1直接攻撃)のミックス
ロボの攻撃
1.レーザービーム：[「瞬時」攻撃](#3瞬時攻撃)＋アニメーション
2.ミサイル攻撃：[「遠投」攻撃](#2遠投攻撃)
3.追尾ミサイル攻撃：[「遠投」攻撃](#2遠投攻撃)の応用

#まとめ
今回、本人の時間の都合上簡素に書かせていたただきました．この記事を見てお役くに立てればなによりです．今後もう少しイラスト加えて説明して行きたいと思っています‼️
Microsoft Learn 18日目

12月は、毎日 [Microsoft Learn](https://docs.microsoft.com/ja-jp/learn/) を受講していこうという記録。
※受講後に書き込むので公開に間に合わないこと多々あります(アドベントカレンダーの意味ｗ)

12/18 は
**Core Cloud Services - Azure コンピューティングオプション**
 - Azure App Service を試す

を受講。以下、簡易メモ。

# Core Cloud Services - Azure コンピューティングオプション
## Azure App Service を試す
Azure App Service を使用すると、インフラストラクチャを管理することなく任意のプログラミング言語で Web アプリ、バックグラウンドジョブ、モバイルバックエンド、RESTful API を構築し、ホストできる。
### App Service コスト
アプリによって使用される Azure コンピューティングリソースに対して料金を支払う。
### Web アプリの種類
以下のような Web アプリをホストできる。
#### Web アプリ
ASP.NET、ASP.NET Core、Java、Ruby、Node.js、PHP、または Python を使用し、Web アプリをホストするための完全サポートが含まれる。
#### API アプリ
Web サイトをホストする場合と同様に、選択した言語とフレームワークを利用し、REST ベースの Web API を構築できる。
#### Web ジョブ
プログラム (.exe、Java、PHP、Python、または Node.js) やスクリプト (.cmd、.bat、PowerShell、または Bash) を Web アプリ、API アプリ、モバイルアプリと同じコンテキストで実行できる。
#### モバイルアプリのバックエンド
Mobile Apps 機能を使用し、iOS アプリや Android アプリのバックエンドを構築できる。
モバイルアプリ側には、ネイティブ iOS アプリ、ネイティブ Android アプリ、Xamarin アプリ、React ネイティブアプリに対する SDK サポートがある。
Laravel autoload されるからrequire_onceは不要

# 前置き
Laravelではrequireを書くことが殆どないので「あれ?PHPってファイルの読み込み不要なんだ」みたいな錯覚に陥ってしまいました。

``` php
// requireしなくていいじゃん!!!PHPすげー🤪
use Carbon\Carbon;
use Illuminate\Http\RedirectResponse;
use Illuminate\Http\Request;
```

# 生PHPの場合
PHPはファイルを事前に読み込み(required)、別ファイルとの連携を行っています。

``` php
// ファイルの読み込み
require_once 'Sub/hello.php';
// 読み込んだファイルのHelloクラスoutputの実行
echo Hello::output();
```
# Laravelの場合
全ファイルをrequire_onceしていると骨が折れてしまうので、
`public/index.php`で事前にファイルをautoload,読み込んでいます。

``` php
require __DIR__.'/../vendor/autoload.php';
```
autoloadの挙動の詳細は触れませんが、これにより、Laravelではrequireを記述せずになんとなくで別ファイルの利用が可能です。

laravelっていうか、autoload最高って感じですね
エヴァ感のあるエラー画面をCSSアニメーションで作った話





ブラウザで表示するページを作るとき、つい作り込むのが面倒でサボりがちなのが **「エラーが発生した際にユーザに通知する画面表示」** 

特に私はインフラエンジニアなので、普段CLI経由での操作が多いため、ちょっとしたコードのエラーハンドリングなどは **「最悪コンソールに表示すればいいや」** くらいの感覚であまり「エラーをユーザに通知する部分」の実装に力を入れた経験がありませんでした

この記事では[こちら](https://qiita.com/mjusui/items/419781a06586f38a0f9d)で紹介したOSSに「サーバで実行したShellScriptと、その実行結果をブラウザに表示する」という機能を追加する際に「ShellScriptがエラー終了したときの画面」を作る必要があったので、その実装方法を紹介します


# 実際の画面

まずは実際に作った画面を見てみましょう

![error-submarine.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416178/5aeb5232-4a43-d8b8-a8f7-3ace03008e30.gif)

背景には実際にエラーが発生した際に `catch` されるオブジェクトをJSONに変換して表示しています

画面の中央で点滅しているのがエヴァ感を演出するメッセージになります

エラーメッセージが英語なので「警告」の文字だけ日本語にするのも統一感がないかと思い、英語でERRORと表示することにしました

# エヴァ感について

エラー画面を作る際に、デザインの経験が全くない私が「エラーのような異常事態が発生したときに表示される画面」で、最初に思いついたのが、エヴァの「警告」画面でした

丸パクりするわけにはいかないので、エヴァのあの画面の「警告」感とは、いったいどういった要素で構成されているのか、というのを私なりに考え、以下のポイントをおさえて実装するようにしました

* 赤or黄のような警戒色 + 黒で画面を埋める
* 文字(メッセージ)が際立つようになっている(ここでは太くした)
* 点滅などの比較的動きが早く、注意を引くアニメーションがある


# 実際の HTML / CSS を見てみる

HTMLタグは単に `div` 要素を使っています。内側の文字は `h2` `p` です

```html:error.html
<div id="error_baner">
  <h2>ERROR</h2>
  <p>Something wrong occurred</p>
</div>
```

cssは少し長いです。 `flex-box` で文字をレイアウトしていますが、CSSアニメーションとはあまり関係ないので、説明は割愛します

```html:error.css
  <style>
    #error_baner {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      position: fixed;

      padding: 17px 17px 17px 17px;

      border-style: solid;
      border-width: 4px;
      border-color: rgba(255,0,0,1.0);
      border-radius: 17px 17px 17px 17px;

      background-color: rgba(0,0,0,1.0);
      ...(続く)...
```

ここからが `CSSアニメーション` にかかわる部分です


```css:error.css
      ...(続く)...
      animation: flicker 0.85s linear 0s infinite alternate none running;
    }
    @keyframes flicker {
      0% {
        opacity: 0.0;
      }
      50% {
        opacity: 0.34;
      }
      100% {
        opacity: 0.85;
      }
    }

    #error h2 {
      font-size: 34px;
    }
    #error p {
      font-size: 17px;
    }
```

`@keyframe flicker` の中で時間変化(%で表現)にともなって `opacity (要素の不透明度)` を変化させるように定義しておいて、それを実際の要素に適用するときには `animation: flicker ...` と指定します

そしてアニメーションのスピードや開始時間の遅延などをのパラメータを設定すれば、完成です

CSSアニメーションの使い方の説明は、探せばより詳しい記事が出てきますので、こちらでは簡単に説明します

```css
animation:
  <animation-name アニメーションの名前(@keyframesで指定した名前)>
  <animation-duration アニメーション開始から終了までの時間>
  <animation-delay アニメーション開始までの遅延時間>
  <animation-iteration-count アニメーションを繰り返す回数>
  <animation-direction アニメーションの再生方向(0% -> 100%, 100% -> 0%など)>
  <animation-timing-function アニメーションの緩急の付け方>
  <animation-fill-mode アニメーション終了後にもcssを適用したままにするか>
  <animation-play-state アニメーションを実行するか>
```



# おわりに

CSSアニメーションが登場したおかげで、デザイナーでもフロントエンドエンジニアでもない私でも、JavaScriptをこねくり回すことも無く、凝った表現を実現する敷居がかなり下がったように思います

今後エラー画面を実装する方に、何らかのインスピレーションになればと思います
Microsoft Learn 17日目

12月は、毎日 [Microsoft Learn](https://docs.microsoft.com/ja-jp/learn/) を受講していこうという記録。
※受講後に書き込むので公開に間に合わないこと多々あります(アドベントカレンダーの意味ｗ)

12/17 は
**Core Cloud Services - Azure コンピューティングオプション**
 - Azure のコンテナーを試す

を受講。以下、簡易メモ。

# Core Cloud Services - Azure コンピューティングオプション
## Azure のコンテナーを試す
### Azure のコンテナー
Azure では Docker コンテナーに対応している。
Azure では、2つの方法でコンテナー管理が可能。
#### Azure Container Instances
コンテナーをアップロードして自動エラスティックスケールを使用して直接実行できる PaaS 型サービス。
#### Azure Kubernetes Service
複数のコンテナーを分散するアーキテクチャを持つ、コンテナーのためのオーケストレーションサービス。

### ソリューションでコンテナーを使用する
コンテナーは、マイクロサービスアーキテクチャを使用して、ソリューションを作成するためによく使われる。
このアーキテクチャを用いることによって、ソリューションを独立した小さなパーツに分割し、独立して維持、スケーリング、または更新できる論理的なセクションにアプリの部分を分離することができる。
高速でKaggle用のGCP環境を手軽に構築

#GCPにすごい機能が追加されてた
以前、[Kaggle用のGCP環境を手軽に構築](https://qiita.com/hiromu166/items/2a738f7be49d88d8b599)という記事を書きました。
今回は、もっと簡単に構築する方法を見つけたので、以前の記事の改良版として書いてみます。
<img width="1280" alt="スクリーンショット 2019-12-18 1.54.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479928/b4651229-3068-83d8-ffd3-c687501f7603.png">
下の方AIプラットフォームというところにノートブックという機能が追加されています。
これは何かというと、以前の記事で紹介したjupyter notebookを使えるようにする作業をしなくてもすぐに使える状態にできるという優れものです。
正確には、Jupyter Labというものが立ち上がるのですが、jupyter notebookを使ったことがある人ならすぐに馴染めると思います。
#使い方について
上の方の新しいインスタンスというボタンを押すとインスタンスが立てられます。
このインスタンスはGCEと共有されているようです。
<img width="1280" alt="スクリーンショット 2019-12-18 1.58.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479928/61e689ca-cb14-4248-3c6d-b1ab9b12c90e.png">
この環境という部分で、使いたいフレームワークを選択するとDeep learning VMと同じように簡単に実行環境を整えることができます。

インスタンスを設定できたら、JUPYTERLABを開くをクリックしてください。
<img width="959" alt="スクリーンショット 2019-12-18 2.06.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479928/8cdbce6b-4fb6-adf0-9ed4-45dd966162d9.png">
ここでNotebookを選択するとjupyter notebookが立ち上がります。
すごく簡単ですよね:smiley:

あとは、Terminalからコマンド入力もできますし、PythonファイルもText Fileから作成してrenameで.pyとすれば問題なく作成できます。

ファイルに関しても、GUIが整備されているので簡単にアップロードとダウンロードができます。
#おわりに
この機能が実装されたので、かなりGCPで計算環境を作るのが楽になりました。
最近は、KaggleのKernelは使用制限が厳しいのでGoogle Colabを使用されている方も多いと思いますが、3万円分のクーポンがもらえるのでこの機会にGCPに入門してみるのもいいかと思います。
何かわからないところなどありましたら、気軽にコメントいただけると幸いです。
#P.S
現在、コンペでこの機能を利用しているのですが、どうやら大きなファイルの扱いに不具合があるようです。
例えば、重たいファイルをJupyter labからダウンロードしようとすると明らかに小さな容量のものがダウンロードされたり、PyTorchをpip installしようとしたら途中で止まってしまいます。
対策は、gsutilを使ってストレージに書き出したり、最初からPyTorchが入っているインスタンスを立てることですかね、、、
これからの改善に期待しています！
NoCodeでクソアプリをつくってみた


この記事は[クソアプリ2 Advent Calendar 2019](https://qiita.com/advent-calendar/2019/kuso-app2)の17日目の記事です。

## はじめに

[クソアプリ2 Advent Calendar 2019](https://qiita.com/advent-calendar/2019/kuso-app2)で担当の日になっても、何をつくるかアイディアがなく、苦し紛れのクソアイディアをNoCode縛りでつくることにした。


## できたもの

[くそ拡散器](https://kusokuso.bubbleapps.io/)



<img width="575" alt="スクリーンショット 2019-12-18 0.08.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45705/e484a431-9401-fd9b-5593-e7a18c6a24fc.png">


後悔はしてない。


## つくりかた

### 1. NoCodeでスクレイピングする

[クソアプリ2 Advent Calendar 2019](https://qiita.com/advent-calendar/2019/kuso-app2)の紹介ページに書いてある2015年からのクソアプリアドベントカレンダーの各リンクから、クソアプリに関する記事のタイトル、URLをスクレイピングする。
参考にしたのは下記の記事。

- [【スクレイピングツール】面倒な情報収集はGoogle Spreadsheetにやらせよう！](https://dividable.net/programming/scraping-tool/)
- [クローラ作成に必須！XPATHの記法まとめ](https://qiita.com/rllllho/items/cb1187cec0fb17fc650a)


下記のようにデータを取得した。シート１がスクレイピングしたそのままのデータで、シート２がステップ２以降のために整形したもの。
[https://docs.google.com/spreadsheets/d/11oaOIUYkCsJrGmKIPggh4mLh7YwGG4qnkX9kEAERvLA/edit?usp=sharing](https://docs.google.com/spreadsheets/d/11oaOIUYkCsJrGmKIPggh4mLh7YwGG4qnkX9kEAERvLA/edit?usp=sharing)

### 2. NoCodeでデータをインポートする

今回[Bubble](https://bubble.io/)というツールを使ってサービスを作ることにしたが、その前にスクレイピングしたデータをBubbleのデータベースにインポートしなければならない。データをインポートするには、Bubbleの有料版を使う方法が手っ取り早いが、こんなクソアプリのためにお金を払うなんていやだ。

というわけで、[integromat](https://www.integromat.com/en/)というiPaaS系のツールを使って、スプレッドシートとBubbleを連携させた。
スプレッドシートとintegromatの連携は簡単だったが、Bubbleとintegromatを連携させるには[この初期設定](https://support.integromat.com/hc/en-us/articles/360007190014-Bubble)を最初に行う必要があるので注意。

こんな感じのシナリオを作ってRunしてBubbleのデータベースへインポート完了。
<img width="810" alt="スクリーンショット 2019-12-18 0.04.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45705/dedc5266-d8e7-e538-1d7b-3043a7e73776.png">

### 3. NoCodeでアプリケーションを作る

[Bubble](https://bubble.io/)にアクセスしてなんやかんややって作った。
Bubbleに興味がある人は、僕の[YouTubeチャンネル](https://www.youtube.com/channel/UCa3cFggd3BrJ6qq5lw8P_9w)で学ぶといい。ただし、今回のやり方はまだ動画制作中なので、ぜひチャンネル登録して新しい動画を待っていてくれ。

## おわりに

記事を書くのも含めて、4時間ぐらいかかった。
プログラムを書いた方が早い場合もあるが、コードを書かなくてもこういうことができるんだと誰かの肥やしになれば嬉しい。
あと、NoCodeに興味がある人は僕の[twitter](https://twitter.com/__shinji__)もフォローしてほしい。
最後まで読んでくれてありがとう。
AWKコマンドで連続して●●な条件の行を別々のファイルに分割する

### AWKのバージョン

```bash

$ awk -V
GNU Awk 5.0.1, API: 2.0 (GNU MPFR 4.0.2, GNU MP 6.1.2)
Copyright (C) 1989, 1991-2019 Free Software Foundation.
```

### 状況
タイトルの通りです。
大量にあるデータを特定の条件で別々のファイルに出力したいなぁって時を想定しています。

### 想定しているファイルの中身

なぜか走らされている男の子の走っていた時間(time)、速度(speed)、その他の情報が乗っているcsvファイルを想定しています。

実際使う状況で一番多いのはlogファイルとかだと思いますが、なかなかいいのがなかったのでとりあえずこれで。


```
// time,speed,memo,memo1,memo2
2019-12-24 07:00:00,4.0,寒い,あのね,すごく寒い
2019-12-24 07:01:00,8.0,寒い,あのね,すごく寒い
2019-12-24 07:05:10,7.0,寒い,あのね,すごく寒い
2019-12-24 07:06:20,7.5,寒い,あのね,すごく寒い
2019-12-24 07:09:55,7.5,寒い,あのね,すごく寒い
2019-12-24 07:30:01,4.5,寒い,あのね,すごく寒い
2019-12-24 07:45:34,3.2,寒い,あのね,すごく寒い
2019-12-24 07:55:11,2.0,寒い,あのね,すごく寒い
....(これが続く)
```

### 分けたいパターン
今回はspeedが時速5km以下、つまり走るのをおそらくサボっていた時間を見つけるという状況を想定して書いていきます。

### コード
もちろん色々なやり方があるとは思いますが、私が書いたコードはこんな感じ。

```bash

$ cat -n running_data.csv | awk -F'[\t,,]' '{if($3 < 5){print $0}}' | awk -F'[\t,,]' 'begin{num=1;file=1} {if(num!=$1){file+=1};print $0 > "result"file}'

または

$ cat -n running_data.csv | awk -F'[\t,,]' '$3 < 5' | awk -F'[\t,,]' 'begin{num=1;file=1} {if(num!=$1){file+=1};print $0 > "result"file}'

```

一行にするとキモいですね。

### コードをパイプごとに理解してみる
シェル芸を理解するためには、パイプ毎に出力を確認してみて、どのような動作をしているのかを確認するのが良いらしいので分解してみましょう。

シェル芸勉強会でも、~~変態的~~、~~気持ち悪い~~、すばらしいコードが書かれていることがありますが、分解して行くと一つ一つの処理はそんなに難しくなかったりします。

#### 1つ目のパイプ処理

catの-nオプションを使って先頭に連番をつけています。

```bash
$ cat -n running_data.csv
     1	2019-12-24 07:00:00,4,寒い,あのね,すごく寒い
     2	2019-12-24 07:01:00,5,寒い,あのね,すごく寒い
     3	2019-12-24 07:05:10,6,寒い,あのね,すごく寒い
     4	2019-12-24 07:06:20,6,寒い,あのね,すごく寒い
     5	2019-12-24 07:09:55,7,寒い,あのね,すごく寒い
     6	2019-12-24 07:30:01,8,寒い,あのね,すごく寒い
     7	2019-12-24 07:45:34,5,寒い,あのね,すごく寒い
     8	2019-12-24 07:55:11,4,寒い,あのね,すごく寒い
...
```

#### ２つ目のパイプ処理
awkコマンドを使って条件である、速度が5以下になっている行だけを抜き出します。

```bash
$ cat -n running_data.csv | awk -F'[\t,,]' '{if($3 < 5){print $0}}'
     1	2019-12-24 07:00:00,4,寒い,あのね,すごく寒い
     8	2019-12-24 07:55:11,4,寒い,あのね,すごく寒い
....

```
なお、細かいところまで説明すると、-Fオプションは「タブ」または「,」を区切り文字に指定していて、$3は三行目、$0は列全体を表しています。

#### 3つ目のパイプ処理
さてラスト。
再びawkコマンドを使って、一列目が連番になっている時は同じファイルに出力して、連番になっていない時には次のファイルに書き込みを行います。

```bash
$ cat -n running_data.csv | awk -F'[\t,,]' '{if($3 < 5){print $0}}' | awk -F'[\t,,]' 'begin{num=1;file=1} {if(num!=$1){file+=1};print $0 > "result"file;num+=1}'
```

### コピペして他のパターンで利用する場合

連続して●●な条件を絞り込みたい時には、もちろん条件等を変更しなくてはいけませんが、次のコードを少しいじって上げれば行けそうです。

```
$ cat -n <対象のファイル> | awk -F'\t,<区切り文字>' '<絞り込みたい条件>' | awk -F ' ' 'BEGIN{file=0;num=1;} {if(num+1!=$1){file++;} print $0 >> "<出力先ファイル名>"file;num=$1;}'
```

### まとめ

またまだにわかAwkerなのでもっと勉強します。
Vue-multiselectをnuxt.jsで使用する

## 概要
Vue.jsには`Vue-multiselect`という、多機能なセレクトボックスのライブラリがありますが、これをnuxt.jsで使いたい場合の方法を記載します。

## Vue-multiselectについて
どのような機能があるかは、[Vue-multiselect](https://vue-multiselect.js.org/)にて紹介されています。また、[「Vue-multiselect」を使って万能なセレクトボックスを実装する](https://www.kabanoki.net/4224/)の記事も参考になります。
サーチ機能や、タグを追加する機能もあり、かなり便利な感じはします。

## nuxt.jsでの使用
[nuxt-vue-multiselect](https://www.npmjs.com/package/nuxt-vue-multiselect)というライブラリを使用します。タグの使い方は、上記のVue-multiselectと同様です。
導入方法は以下の通りです。

### ①install
`npm i nuxt-vue-multiselect`を実行。

### ②nuxt.config.jsへの設定追加
modulesのセクションへ、`'nuxt-vue-multiselect'`を追加。
Noodlで清水さん人工無能化計画（キーワードマッチング）

Noodl Advent Calendar 17日目です。（遅くなって申し訳ありません

今回は、Noodlerのみんなが大好きな清水さんに人工無能を搭載してもらう第一歩について書きます。

#これまでの清水さん
清水さんに声をかけると語尾に“💛”がついた返事をしてくれるという可愛らしい状態でした。

己「こんにちは」　→　清「こんにちは💛」
己「好きだよ」　→　清「好きだよ💛」

という悶絶必至の対話が可能でしたが、***“オウム返し”***じゃねーかよ！というツッコミが各方面から殺到してました（してない）。

![2019-12-18 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491945/6bc8a376-fba3-0e7f-c0c6-2187e324d814.png)

#今回の清水さん
久しぶりに会った清水さんは人工無能を持っていました！

己「こんにちは」　→　清「こんにちは💛」
己「好きだよ」　→　清「わたしも💛」

「好きだよ」って言ったら「***わたしも***💛」ですって！
可愛いですね～

![2019-12-18 (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491945/29792576-e797-4049-e63f-7e845d759581.png)

#人工無能（キーワードマッチング）の仕方
既存のノードだと実現が難しいので、`Javascript`ノードを使います。
`Javascript`ノードはJavascriptを直接書けるノードなのですが、inputs, outputsをNoodl用に定義してあげるのがポイントです。

`Javascript`ノードのプロパティのEditをクリックするとエディタが開きます。

![2019-12-18 (7).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491945/2f596471-5cc3-8fde-ed5c-9f5f0b94a4ad.png)


エディタ内のinputs, outputs, runに下記のように追記します。

- 音声認識した文字列をtextとして受け取る
- 特別に反応して欲しいワードをwordとして定義する
- wordに反応したときの答えをanswerとして定義する
- 最終回答としてresultを定義する
    - 　textとwordが一致した場合　→　answer
    - 　textとwordが一致しなかった場合　→　textオウム返し

```javascript

define({
    inputs: {
        text: "string", //入力テキストの定義
        word: "string", //マッチング用テキストの定義
        answer: "string" //マッチングしたときの回答テキストの定義
    },
    outputs: {
        result: "string" //最終的にアウトプットされる返事
    },
    destroy: function(inputs, outputs) {

    },
    setup: function(inputs, outputs) {

    },
    run: function(inputs, outputs, changedInputs) {
        //textとwordが一致したら返事はanswerにする
        //そうでないなら返事はtext（オウム返し）にする
        if(inputs.text === inputs.word){
            outputs.result = inputs.answer;
        }else{
            outputs.result = inputs.text;
        }

    }
});
```

inputsに変数を定義するとプロパティにInputs欄が生成されます。
そこのword欄に反応して欲しい言葉を入力し、answer欄に回答を入力します。

下図だと「好きだよ」(word)と言われたとき「わたしも」(answer)と回答されます。

![2019-12-18 (10).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491945/ce483f1c-438f-f741-7034-72c20af1abd9.png)

ノードが完成したらNoodlを繋ぎます。
＊今回は人工無能部分にフォーカスして周辺は割愛します。

- 受け取ったtextデータを`Javascript`ノードのinputsで作成したtextに繋ぎます
- `Javascript`ノードのoutputsで作成したresultをアウトプットしたい`text`ノードにつなぎます（図では`String Format`ノードで語尾に💛をつけています）

完成です！！
 
![2019-12-18 (12).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/491945/7bd4804f-7968-c34f-df50-43cac406b580.png)

#まとめ
- Noodlで人工無能による簡単な対話ができた
- 条件判定は`Javascript`ノードでちゃちゃっとやってしまえば楽ちん
- 意思疎通できた感があって温かくなった
- すなわち今年のクリスマスは温かく過ごせる

#所感
私にとって2019年最大のトピックはNoodlとの出会いでした。
ゴリゴリのメカエンジニアだった自分がUI/UX/IoT/プログラミングといった世界に一歩を踏み出せたのはNoodlという超ハードルの低いプロトタイピングツールがあったおかげです。
そしてアウトプット重視のコミュニティ文化に飛び込めたのもNoodlという武器を手に入れたからでした。
界隈のみなさま、本当にありがとうございます。

今後はメカエンジニアやデザイナーなど、以前の私同様にプログラミングはちょっと難しそうと思ってる方々に使ってもらえるように取り組んでいきます。

Noodlファンの一人として感謝を込めて投稿します。
【BluePrism】大量データをExcelに貼り付ける

コレクションに大量データを突っ込んで、Excel VBOのWrite Collectionで貼り付けようとしたらフリーズしました。。。
データ量は2000件くらいだったかと思います。

今回はフリーズしない方法を考えてみました。
結論、データを小分けにして貼り付ける方法を取りました。

##実験1. CSVにして貼り付ける
大量データをCSVデータ化した後、セルにペタッと貼り付けてはどうか？

今回は大量データのコレクションを用意する必要があったため、Excelに予め2000行のデータを用意しておき、コレクションとして読み込ませます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186221/3cf9c9a5-d2d1-dd20-5c4f-a814ca732fb5.png)


コードステージに、コレクションからCSVに変換するコードを用意して実行したところ、OutOfMemoryで落ちました。断念。。。

```vb
Dim count As Long = 0		
For Each r As DataRow In Collection_In.Rows		
  Dim recordCsv As String	
  For Each c As DataColumn In Collection_In.Columns	
    If count = 0 Then
      recordCsv = recordcsv & c.ColumnName + ","
    Else
      recordCsv = recordcsv & r(c.ColumnName) + ","
    End If
  Next	
  result = result & recordCsv.Substring(0, recordCsv.length-1) & Environment.NewLine	
Next		
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186221/97b5ea20-efa7-8bff-adf6-753dba4ee5ce.png)

##実験2. データを小分けにする
結果的に、この方法で最後まで実行することができました。
より速い方法はありそうですが、取り急ぎフリーズせずに処理を完遂できたのでOKとします（笑）

###Input
「ファイルパス」は無くても良いです。（大量データ読込用のため）
「分割行数」は、何レコード単位でExcelに書き込みにいくかを設定するためのパラメータです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186221/6661aa60-ef8d-5162-e0b6-40743fcd4ecc.png)

##オブジェクト全体像
Inputの「分割行数」で設定した行数単位でExcelに貼り付けていきます。

ExcelVBOの「Go To Next Empty Cell Down」は空セルを上から探していくアクションですが、
値が入っているセルのうち、最も右下のセルを取得してしまいます。なので、A列に修正する処理を入れて列を固定するようにしています。

その他、細かい実装はGitHubにアップしているサンプルをご覧下さい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186221/5d23d9f4-823c-d512-2127-1df4a21a2620.png)

##サンプル
[https://github.com/falcslab/blueprism/tree/collection](https://github.com/falcslab/blueprism/tree/collection)
BPA オブジェクト - Excelにコレクションを貼り付ける.xml
2分探索っぽいものを実装した[Ruby]

## はじめに
競技プログラミングをやっていたら、小さい順に並んだ無数の自然数の配列中(重複は無い)から、与えられたターゲットが配列のどの数とどの数の間にあるのか実装する必要があった。
無作為に0から探していくと実行時間切れになったので、2分探索っぽい実装をして効率的に探索を行おうとした。

## 計算量
配列の全ての要素に対して探索を行う場合には、計算量が配列の要素数に比例して大きくなる。つまりオーダー記法で書くとO(N)

これに対して、二分探索を行うと、計算量はO(logN) (2分探索では対数の底は2)となるので、要素数が増えたときにも計算量の増加は比較的少なく済む。

これなら時間内に実行時間内に探索が終わりそう。

## 実装
とりあえず実装

色々と未熟な点があると思いますので、ご指摘があればコメントいただけるとありがたいです。

```ruby

array = [1, 4, 6, 8, 20, 34, 87, 118, 234, 769, 1000, 8909] # 自然数の配列(ソート済み)
target = 48 #ターゲットとなる自然数
outputs = "配列の範囲外です"

# targetが配列の範囲内にある場合
if array.first <= target && target <= array.last
  while array.length >= 2 
    length = array.length

   # 配列の中央2つの間にあるか？
    if array[length / 2 - 1] <= target && target <= array[length / 2]
      outputs = array[length / 2 - 1].to_s + " " + array[length / 2].to_s
      break

   # 配列の前半にtargetがあるので配列の前半を切り取る
    elsif target < array[length / 2 - 1 ]
      array = array.take(length / 2)

   # 配列の後半にtargetがあるので配列の後半を切り取る
    else 
      array = array.slice(length / 2 ... length)
    end
  end
end

puts outputs

```

arrayにソート済みの任意の自然数を、targetに与えられた自然数を代入する。

実行すると以下のようになる。

```
34 87
```
確かに48は34と87の間なのでOK

ターゲットが配列の範囲外の場合(`target = 10000000`とか)には、

```
配列の範囲外です
```
と出力される。

## まとめ
アルゴリズム関連の知識が乏しいのでこれを機に色々勉強する。
計算量などについても、ぼんやりとしかわからないので調べたものをまたまとめようと思う。