OmniAICreator/Qiita-1.07M huggingface dataset:
【JavaScript/CSS】スクロールしたら順番に要素を表示するデモ（IntersectionObserver使用）

## はじめに
Webページで良く見る、スクロールしたら順番に要素が表示される演出のデモを作成してみました。

JavaScriptの`IntersectionObserver`を使っています。

## 環境
```yaml
OS: macOS Catalina 10.15.1
```
## 結論：デモ
各要素の数字は、`data-delay`を何秒に設定したかです。
参考までに表示してあります。

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="terufumi1122" data-slug-hash="PowbvVx" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="PowbvVx">
  <span>See the Pen <a href="https://codepen.io/terufumi1122/pen/PowbvVx">
  PowbvVx</a> by terufumi (<a href="https://codepen.io/terufumi1122">@terufumi1122</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## おわりに
最後まで読んで頂きありがとうございました:bow_tone1:

どなたかの参考になれば幸いです:relaxed:

## 参考にさせて頂いたサイト（いつもありがとうございます）
[IntersectionObserver?! Scroll Activated Animations & More with No Dependencies - YouTube](https://www.youtube.com/watch?v=_5Bu3JY-ZHc)
RaspberryPi4にOpenMediaVault5をインストールする

# 概要
RaspberryPi4を買ってきたので、OpenMediaVaultでNASを作ろうと、なった訳だけど
すごい昔にやったのとだいぶ違って
もうOpenMediaVaultがインストールされたOSをSDカードに書いてハイ終わり
と[いうわけ](https://github.com/OpenMediaVault-Plugin-Developers/docs/blob/master/Adden-B-Installing_OMV5_on_an%20R-PI.pdf)ではなさそうだ。

本稿では拙い英語力と偉大なるGoogle様のお力を借りて、なんとかOpenMediaVault5系（以下OMV）をRaspberryPi4にインストールしてみる。

# 用意
ソースのpdfにも書いてあるし、このページを読んでいる諸兄等には不要な情報かもしれないが、今回揃えたものを紹介。

- [RaspberryPi4](https://www.marutsu.co.jp/pc/i/1557807/)
    - 言わずもがな今回の主役 
- [SSD](https://www.intel.co.jp/content/www/jp/ja/products/memory-storage/solid-state-drives/consumer-ssds/6-series/ssd-660p-series/660p-series-2-tb-m-2-80mm-3d2.html.html) : Intel p660 2TB
    - 今回のある意味主役、奮発してM.2
    - USB3.0がボトルネックだって？そんなの気にしたら負けだよ！！
- [SDカード](https://kakaku.com/item/K0001162868/) : サンディスクの32GB
    - 安くなったなぁ、おい
- [M.2を装着するカード](https://www.amazon.co.jp/gp/product/B07T2GMPC4/ref=ppx_yo_dt_b_asin_title_o01_s00?ie=UTF8&psc=1) : WINGONEER X870
    - レビューが乏しいけどちゃんと動くよ
- その他ネジとかスペーサー、ケース、ヒートシンク、各種ケーブルとかもろもろ
    - 必ずしも全部はいらないよ

全部ドッキングするとこんな感じ（かっこいい！！）
![P_20191217_004541.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125791/d1f20638-3881-0140-6727-b74c6ccb4313.jpeg)
WINGONEER X870の使い方は本来逆向きらしいんだけど、このほうが冷えると思うよね？
（見栄えの問題で配線はしてないけど、結線はちゃんとやろうね）

あとは、インストールメディアを焼くためのPC。
WinでもMacでも大丈夫だけど、今回はWinでやっていきます。

# 本題

さて、ではメディアを作っていくために、まずはraspbianを落としてくる。
https://www.raspberrypi.org/downloads/raspbian/
↑ここにアクセスして、Raspbian Buster Liteをダウンロードするのが、OMV様的にはgoodらしいが、
私はNASからそのまま動画とかも再生したいし、Raspbian Buster with desktopを今回はチョイス。

ダウンロードしたzipWindows標準のアレで普通に解凍。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125791/5b126d1f-14b4-bf8a-c8e5-9bdb84ab7854.png)
こんな感じになればOK

次はisoファイルをSDカードに焼きます。
おすすめはこのソフトですが、何でもいいです。
https://www.balena.io/etcher/

![2019-12-17_1-21-31_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125791/50e8bcd3-9f55-49bd-b386-b4e04edcdd82.png)

とりあえず画面を写しながら、起動。
するとしばらくインストールが走るので、落ち着くまで待つ。
お気に入りの初期設定があるなら、いつやるのか？今でしょ。

ただ、必ずやらないと行けないのは以下
(デスクトップ版のせいなのか、sshは初期で起動していない)

```sh
sudo apt update
sudo apt dist-upgrade
sudo systemctl start ssh
sudo systemctl enable ssh
sudo reboot
```

上記を実施したら別マシンからSSHできるか確認。
（事前にRaspberryPiの中でIP調べておこう！）

```sh
ssh pi@xxx.xxx.xxx.xxx
```

そしてやっとOMV5をインストール
※必ずpiユーザーでやること！！！

```sh
wget -O - https://github.com/OpenMediaVault-Plugin-Developers/installScript/raw/master/install | sudo bash
```

ドキュメントによると30分かかることもあるらしいが、自分がやったときには15分くらいでできた。

終わったらもういっちょ再起動

```sh
sudo reboot
```

再起動から復帰したあと、今までのインストール作業がうまく行っていればブラウザからのアクセスでログインできるはず！
初期ユーザー名：admin
初期パスワード：openmediavault

こんな画面が出たら成功！
![2019-12-18_1-18-6_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125791/462af49a-2d89-3057-081f-43e7611b3c42.png)

お疲れさまでしたー
WebUIでの設定は他のブログや解説ページのほうがわかりやすのでそちらを参考にどうぞー←

ブログ始めました、よかったら遊びに来てください
https://red-full-moon.com/
Torについて

間違い等があればご指摘お願いいたします。

#はじめに
**注意！**
ネット等に関する専門的知識がない方はTorを使ってのonionサイトなどへのアクセスは危険なのでお控えください。
もし、アクセスする際にはご自身で調べたうえで自己責任で行ってください。

#Torとは？
Torというのは、匿名通信をすることができるソフトウェアやシステムのことです。
主にTorブラウザがそれに該当します。
匿名通信の仕組みが玉ねぎのようであることから、「The Onion Router」と呼ばれています。

#Torの仕組み
ここでTorの仕組みを簡単に説明します。
Torは複数のノードを経由させて通信を行い、その際に暗号化を行うことにより匿名通信を実現させている。ちなみにここでいうノードはサーバのことを言います。
例えば、PCでとあるサイトにアクセスしようとしたときにTorをつかってアクセスすると「PC→ノードA→ノードB→ノードC→サイト」というように接続を行うことになります。このとき各ノードに経由される度に暗号化した情報に対して復号を行います。Torでは安全性・匿名性を高めた状態で通信を行うことができ、情報がノードに知られることはありません。これにより情報の安全性と匿名性を保っています。
この通信方法のことを玉ねぎの皮むきにたとえて「オニオンルーティング」と言います。

#Torの欠点
さきほど、Torを使えば情報がノードに知られることはないと書きましたが、一つだけ例外があります。それが出口ノードと呼ばれるところです。
出口ノードというのはアクセス先のサイトに到着する直前のノードのことを言います。
出口ノードで暗号化した情報を復号し読める状態にしたうえでサイトに送ります。
（例：PC→暗号化→A→復号→B→復号→C（出口ノード）→復号→サイト）
そのため、出口ノードではその情報の中身を見ることができます。
これを利用して海外の警察などは出口ノードを設置して監視を行っていたりします。
これに対抗するために現在の開発元であるTor Projectは出口ノードのリストを公開したりしています。

#Torの現状
よくTorについて調べるとダークウェブなどに行き着きます。ダークウェブとはディープウェブ（一般に公開されていないサイト）の一部で違法な活動を行っているサイトのことです。Torはよくダークウェブにアクセスするためのツールであり、Tor＝犯罪と結びつける人がいますが、それは違います。
Torは本来、匿名ではないとネットが使えない環境にいる人のためにあるツールです。ただし、現状としてTorは犯罪者が使うものである印象が強くあります。

#Torでアクセスできるサイト
Torを使うとTorでしかアクセスできないonionドメインのサイトにアクセスできるようになります。このonionサイトには違法サイトなどもありますが、Facebookなどの皆さんが日常で目にするようなサイトもあったりします。

#最後に
今回、Torについて書かせていただきました。
この記事を読んでいかがでしたでしょうか。
これをきっかけにもっとTorに対して正しい知識を持ってくれる方が増えたらうれしいです。
お読みいただきありがとうございました。
メンテナブルに Tailwind CSS を使うなら

[Tailwind CSS](https://tailwindcss.com/) をちょっと前から使っていて、気に入ったのでどんどん適用範囲を拡張していきました。数十ページくらいのサイトを Tailwind でデザインし、その出来に満足していました。
（Tailwind の魅力は、選択肢の幅がちょうどよいところだと思っています。マージンが 1px か 2px かはどうでもよい、要素同士が近い方がいいのか遠い方がいいのかで用意されたクラスから選ぶ。）
しばらく時が経った頃、Tailwind の最新版がリリースされ、メジャーバージョンが上がっていることに気づきます。いっちょ最新バージョンに対応してやるかと思いいざ進めてみると、結構な労力を必要とすることが分かりました。このポストではそこで得た気づきの話をします。

## アップグレード手順はある

v0 系から v1 系へのアップグレード手順はこちらです。
https://tailwindcss.com/docs/upgrading-to-v1
順番にやっていけば良いと思いきや、まあ難しい。それぞれのクラスを使用している箇所を探すのが大変でした。似たようなクラス名ばかりなので検索で目的のクラスだけに絞り込めない。
次に、見方を変えて、アップグレードドキュメントは新旧バージョンの対応表と捉え、新バージョン Tailwind を読み込んだページを一つずつ確認し、デザイン崩れを直していこうとしました。しかし、崩れの原因がなかなか特定できません。しばらく試行錯誤した後、旧バージョンの使用に問題があるわけでもないので、アップグレードを諦めました。

## どうしたら良かったのか？

ユーティリティ CSS クラスをルールなくあちこちで使っていたのがメンテナンス性を下げました。サイトの規模が小さい段階ではそれでも構わないですが、規模が大きくなると分かったら、抽象化を進めることを検討すべきタイミングです。
といった内容がちゃんと公式で言及されていることに（ついさっきまで）気づきませんでした...。
https://tailwindcss.com/docs/extracting-components
というわけで、繰り返し現れる要素を JavaScript コンポーネントや CSS コンポーネントとして抽出しましょう。

## JavaScript (Vue) コンポーネント

```vue
<!-- In use -->
 <VacationCard
   img="/img/cancun.jpg"
   imgAlt="Beach in Cancun"
   eyebrow="Private Villa"
   title="Relaxing All-Inclusive Resort in Cancun"
   pricing="$299 USD per night"
   url="/vacations/cancun"
 />
 
 <!-- ./components/VacationCard.vue -->
 <template>
   <div>
     <img class="rounded" :src="img" :alt="imgAlt">
     <div class="mt-2">
       <div>
         <div class="text-xs text-gray-600 uppercase font-bold">{{ eyebrow }}</div>
         <div class="font-bold text-gray-700 leading-snug">
           <a :href="url" class="hover:underline">{{ title }}</a>
         </div>
         <div class="mt-2 text-sm text-gray-600">{{ pricing }}</div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
   export default {
     props: ['img', 'imgAlt', 'eyebrow', 'title', 'pricing', 'url']
   }
 </script>
```
https://tailwindcss.com/docs/extracting-components より

## CSS コンポーネント

JavaScript コンポーネントにするほどではない、ボタンのような、HTML の構造に依存しない、一つの要素に一つのクラスを当てるだけで完結するものなら CSS のクラスを定義していいでしょう。

```html
<button class="btn-blue">
   Button
 </button>
 
 <style>
 .btn-blue {
   @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
 }
 .btn-blue:hover {
   @apply bg-blue-700;
 }
 </style>
```
https://tailwindcss.com/docs/extracting-components より

## まとめ

愚直に入門記事どおりに Tailwind CSS を使うと、メンテナンス性を犠牲にしかねません。フレームワークの向き不向きや使い方は、プロダクトの成長時期に応じて考えておきたいですね。
java インストール編

今日はjavaの開発キットである
JDKのインストールについて書きます。

# JDKとは
Java Development Kitの略です。

javaはOracleによって提供されています。
よりビジネスに使われた方がoracle社としても都合がいいので
他の言語にとって変わられないよう
リリースから随分時がたった今でも頻繁に更新がされています。

# JDKのインストール確認

前提としてJDKのインストールがされてるか
verはどうなっているか確認します。

```bash:ターミナル
java -version
```

# JDKのインストール

こちらのリンクよりJDKの提供元であるOracle社のHPに行きます。

[oracle社](https://www.oracle.com/technetwork/java/javase/downloads/index.html)

そして画像中央のjavaのアイコンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430767/82747be3-6206-af79-6316-d5f24fbe12a8.png)

リンク先の下部にダウンロード一覧があります。
ライセンス契約に同意するにクリックして
自分のPCにあったファイルをダウンロードします。
※わかりやすくするため日本語変換しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430767/bc648f6f-5b7c-7cf7-56ff-8289eeb3edbe.png)

あとはダウンロードしたのを開いて、流れにそってインストールすれば完了です。

確認で前述したJDKのインストール確認を行って問題確認できれば完了です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430767/bb5c33ad-6d5b-6e7c-53b3-a7049fdb3f5b.png)
アプリプッシュ通知の運用イメージの紹介

# ■はじめに
こんにちは:smile:。
ディップでアプリのUIの改善やマーケティングのツール導入などiOSやAndroidアプリの開発のマネジメントをしている@m-komatsuです。
この記事は、ネイティブアプリにおけるプッシュ通知の運用イメージを軽く書いてみました。参考なるところはあまりないかもですが、見て頂いた方ありがとうございます。

今回は開発視点ではなく、アプリマーケティングよりの話を書かせて頂きます。
ディップのプッシュ通知は、自前ではなく主流としては、[Repro](https://repro.io/)さんのプッシュサービスを使わさせてもらっています。

選定理由としては、各プッシュサービス機能横並びが多いのですが、プッシュの開封率ってタップしないと見れなかったりします。Reproさんには「みなし開封」が数字と見れるのがいいなと思って選定しました。


# ■KPIツリー
アプリとしてみているKPIツリーはこんな感じです:eyes:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252082/b33ef01a-a0e2-3835-54ef-5bac50c623f6.png)



# ■Push通知で見る指標と対策
ディップで見ているプッシュ通知指標は大まかにですが4つで見ています。
どれかだけをやれば改善するわけでもないので『地道な継続的な運用』が必要になってきます。

## (1)プッシュ通知の配信対象者数
プッシュ通知が届くユーザーの数を見ていますが、主にみるべきポイントは、配信対象者数が減っていないかどうかですが、あまり直面したことはないですが、適切なタイミングで送っていなかったり、通知を送りすぎていないかなどを気を付ける必要があるため、どのようなユーザに、1日に通知がどうのようなタイミングで、ユーザによっては最大何通通知されるかを設計することがかなり大事です。
その為ペルソナもいくつか考えて最適な配信設計を心がけましょう。

## (2)プッシュ通知の開封率
プッシュ通知の配信対象者数のうち受け取った通知を開いてアプリを起動したユーザーの割合です。  
開封率UPをするには、

- キャッチコピーが大事：目を引くようなワードを含める
- タイミングが大事：ペルソナで決めたユーザの行動パターンをイメージする
- 画像付きのクリエイティブでユーザの目を引く
- 配信対象を事前にペルソナに沿って配信対象を絞る
- プッシュ通知にはタイトルと本文及びそこには絵文字も使って目立させる

## (3)プッシュ通知によるコンバージョン率
プッシュ通知が届いたユーザーのうち「応募完了」や「キープする」といった特定のアクションをしたユーザーの割合です。
プッシュ通知に目的とするイベントアクションのCVRを見ることによって、コンバージョンを増加させるためのプッシュ通知の施策を考えることが大事です。


## (4)プッシュ通知の許諾
**許諾率：**配信対象者数のうち端末のプッシュ通知を受け取る設定にしているユーザーの割合ですが、許諾率を高める施策はiOSアプリは、初回起動時にプッシュ通知の配信許可の有無をユーザに判断させる仕様であるため許諾率を高めるにはチュートリアルなどで、プッシュ通知の有用性をいかにユーザに伝えることが大事です。
ちなみに求人検索のアプリとして、許諾率を高めるためのチュートリアル施策は難しくなかなか改善できませんでした。単なるお得な情報が通知されることだけでなく、ユーザに刺さるワードを入れて訴えかけることが大事だと思います。ABテストなどでいくつかパターンで検討するとよいでしょう。
ちなみに許諾率**40%**あればよい方とどこかのイベントで聞いたことがあります。

# ■継続的な運用
継続的に運用できるように

- キャンペーンなどの施策毎のプッシュ通知
- 定常的なプッシュ通知

など施策毎で『配信数』『開封数』『開封率』『CV』『CVR』をまとめましょう。

【フォーマット例】

| 施策名       |施策の目的       |   KPI    |セグメント（ターゲット）| 通知内容 | 配信時間 | 配信期間 | 配信数|開封数|開封率| CV | CVR |
|:-----------------|:------------------|:------------------|:------------------|:------------------|:------------------|:------------------|:------------------|:------------------|:------------------|:------------------|:------------------|

**【キャンペーン通知例】**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252082/168790a4-c99e-7d77-b5ea-68e331b40c69.png)

**【定常的なプッシュ通知例】**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252082/a9105823-9cf4-6eaf-063e-c1eb1666702b.png)



# ■まとめ
プッシュ通知の運用について、初めての人を想定してご紹介致しました。
あくまでもサンプルベースですが、各KPIを管理してプッシュ通知の効果を測定し、アプリの成長につなげましょう。
もちろんこれだけやれば目的が達成されるわけでなく、広告運用で流入を増やし、アプリ内施策を継続的実施し、よりCVRを高める施策を継続的に実施していくことだ大事です。
日々の情報収集について

#いつの間にか...

時の流れは早いもので今年も残すところあと半月程ですね。
いつのまにか私の担当の日も過ぎてました。（すみません）

最近、環境の変化が多くなかなかまとまった時間が取れず、この日付を取った時点ではあれについて書こうかなとか、これもいいなとか考えてはいたんですが準備が間に合わず、この体たらく。😇

それはさておき、技術的な内容を描きたいなと思ってたのですが、今回は個人的に気になる**普段みなさんが技術的な情報やニュースをどこで収集してるのか聞いてみたいです。**

私は技術系の情報ってはなんとなくと能動的に収集していかないといけないなと思って暇な時に見る程度です。
あまり深く考えずに、知ってるサイトの興味のある記事とか業務に役立ちそうな記事を見てるくらいなので、何かここはおさえておけみたいなサイトとかあれば**コメント欄で是非教えて欲しいです。お願いします。**

私がよく見るサイトは以下です。

##[PublicKey](https://www.publickey1.jp/)
エンタープライズ向けの記事が多い。特にクラウド系の記事多い印象。
最近見た記事で面白そうだったのがAWSのCodeGuruの紹介です。
コンピュータが勝手にレビューしてくれたら人が見落とすようなバグも減らせそうですね。
~~関係ないけどレビューはレビュワーを夢の世界に誘えば承認通るって昔誰かが言ってた~~
[［速報］「Amazon CodeGuru」発表。機械学習したコンピュータが自動でコードレビュー、問題あるコードや実行の遅い部分などを指摘。AWS re:Invent 2019](https://www.publickey1.jp/blog/19/amazon_codeguruaws_reinvent_2019.html)

##[Data Insight](https://www.nttdata.com/jp/ja/data-insight/)
(なんかのきっかけで見るようになったけどなぜ見るようになったのか覚えてない・・)
(~~しかも最近あまり見てない・・~~）

##[News Picks](https://newspicks.com/)
最近見るようになりました。
技術系のサイトという訳では無いのですが、著名な人なんかが記事にコメントしてて、自分と違った視点からのコメントやいろんな見解が見れて面白いです。もちろん、普通にコメントも出来ます。

#終わりに
思い返してみると、なんかこうコード書いたり、なんか動かしたり、すぐ試すみたいなことが出来るような情報を得てるわけじゃないなとなんとなく思った。
あとブログとかニュースサイト以外にもTwitterなんかで適当に人をフォローするのもいいと思います。

取り止めないですが、余裕があればもうひと記事位かけると良いな・・・
ruby 学習アウトプット1

###はじめに
ただの初学者のrubyシルバー取得に向けての学習アウトプットです。
文章もただただ、タコ殴りしてるだけなので、温かい目で見守っていただけると幸いです。

###今回の教材
####公式擬似問題集
これは下記リンクからgithubに飛びます。
無料です。全50門解説もついてます。(ありがてぇ〜〜〜〜)
[https://gist.github.com/sean2121/945035ef2341f0c39bf40762cd8531e0](https://gist.github.com/sean2121/945035ef2341f0c39bf40762cd8531e0)

####やってみて

全然だめでした。。。。。
ということで、凹んでられないので詰まった部分を復習していきたいと思います。

####以下復習

* 可変長引数の問題

```ruby
#下記の実行結果は？
def foo (a, *b)
  p a
end
foo(1,2,3,4)
#結果は
1
```

`*b`は可変長引数で引数を複数個設定できる。引数は配列として受け取られるので今回の場合

```ruby
#*bの中身も出力してみる
def foo (a, *b)
  p a,b
end
foo(1,2,3,4)

#結果
1
[2,3,4]    #bは配列が出力される
```

* `size`メソッド

```ruby
puts({"members" => 193, "year" => 2014}.size)

#結果
2

```

`size`メソッドは要素の数を返す。今回はハッシュの要素数、配列の場合は配列の要素数。

* `clear`メソッド

```ruby

h = {1=>2, 3=>4}
h.clear
p h   #=>{}

ary = [1, 2]
ary.clear
p ary     #=>[]

#clearメソッドは空のハッシュ、配列を返す

```

ちなみに問題には`remove`,`destroy`,`empty?`の選択肢があったのですが、`remove`,`destroy`は`NoMethodError`で`empty?`はハッシュと配列をそのまま返してました。


* `chop`メソッド

```ruby
#ヘロ〜
s = "hello"
puts s.chop

#しかし！！結果は!!
hell

#地獄!!


```

`chop`メソッドは最後の1文字を取り除いた新しい文字列を返しますが、末尾が\r\nで終わってる場合は2文字取り除きます。

ちなみに`chomp`メソッドは末尾の改行コードを取り除きます。
`rstrip`は文字列の末尾の空白文字を除去した新しい文字列を返します。
こんなにあるんか、、、、、、、、と気が滅入り、、、、、いや、がんばります。

* IOクラスの問題

```ruby
File.open("foo.txt","r") do |io|
puts io.gets
 puts io.read
  io.rewind
  p lines = io.readlines
end
```
このコードのio.rewindの処理は何か？って問題でした。
答えは`IO#rewindはファイルポインターを先頭に移動させます。`とのこと。
つか、IOクラスって何？？って思いました。getとかは使っていたけど、IOクラスに関しては全くでした。頼りにしていたチェリー本でも網羅されていませんでした(泣)
なのでIOクラスはしっかり勉強しないとヤバ谷園ですね。()

* sort

```ruby

odd = [1,3,5]
even = [2,4,6]
num = odd + even
p num.sort

[1,2,3,4,5,6]

#ちなみにsortをつけないと
[1,3,5,2,4,6]

```

`sort`がないときの挙動も確かめときました。

* 正規表現の問題

`/^[hc].*o$/i`
この正規表現にマッチするものを2つ選べよ。

A.Hello
B.holland
C.Cello
D.h35L320

こちら先頭の文字がhかc(iオプションで大文字小文字無視)で.*で何かしら文字が連続してoで終わるってことで答えは。。。A,Cだ！！！！
ということなのですが、私、アルファベットのoを数字の0と読み間違えて、ハマってました（泣）


####復習してみて

2回目は流石に9割以上解けました。1回目に答えだけでなく1門１門調べて理由まで説明できるようにしました。まぁ、まだまだ、先は長いのでアール。。。。。
PowerShellで大きいサイズのファイルをリストアップ!!

# PowerShellとは

PowerShellはWindowsのシェル言語です。
従来コマンドプロンプトが担っていた役割は、徐々にPowerShellに移行されています。
加えてActiveDirectoryやExchangeといったミドルウェアの管理や
office365やAzure等のパブリッククラウドをPowerShellを用いたコマンドレットで指示を出せます。
最近では「.NET Core」としてLinuxへの環境でも動くようになっています。

# PowerShellの基本部分

PowerShellの参考書を読むと、一番最初に出てくるコマンドレットは以下のようなものです。

```powershell:GetChildItem.ps1
Get-ChildItem -Path 'C:\Users\xxxx' #ダブルクオーテーション内にフォルダを指定#
```

**動詞**+**指示対象**の組み合わせがPowerShellのコマンドレットの基本的な構成です。

動詞部分には、「Add」「New」「Make」「Export」等があります。

Visual Studio CodeにPowerShellの拡張機能をインストールすれば、
インテリセンスでコード補完してくれます。
「New...」と入力すると、その後に続く候補のコマンドがレコメンドされます。

![1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/123580/cd436e62-9b33-188b-f345-f89c2dd748c5.gif)

# サイズが大きいファイルを一覧で出力する

冒頭でPowerShellのポテンシャルに触れましたが、ActiveDirectoryに日常的に関わる人はそう多くありません。
PowerShellの可能性を多くの方に知ってもらいたいので、私自身がよく使うスクリプトを紹介します。

今回は簡単にファイルをリストアップして、サイズの大きい順にCSVに出力する例を以下に示します。
PCに蓄積した不要なファイルを棚卸しする目的で時々実行するととても便利です。

```powershell:GetFileSize.ps1
$Directory = "C:\Users\xxxx" #検索先ディレクトリ
$Output = "C:\Users\xxxx" #csv出力先フォルダ
$GetDate = Get-Date -Format "yyyy年MM月dd日"

Get-ChildItem -Path $Directory -Recurse -File `
  | Select-Object Name,Extension,Length,FullName,CreationTime,LastWriteTime `
  | Sort-Object -Descending Length `
  | Export-Csv -Path "$Output\Output_$GetDate.csv" -NoTypeInformation -Encoding Default -Append
```

今後も定期的にPowerShellの情報を発信していきます。
LaravelにSCSSの導入方法

 ### 前提
* Laravelのプロジェクトは作られている
* Laravelのバージョンは6.2を使用している

### 手順

1. Laravelプロジェクト配下で`npm install`のコマンドを実行する

2. sassメソッドでSassをCSSへコンパイルします
   * プロジェクト配下のwebpack.mix.jsに確認をする

```javascript:webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');
```

この一行でwebpackがresources/sass/app.scssファイルをpublic/css/app.cssにコンパイルしてくれる

3.`npm run dev`でコンパイルする。

 * npm run watchコマンドだと、app.scssファイルに変更が加わると自動でコンパイルしてくれるから便利！

4.app.cssを読み込む

`<link href="{{ asset('/css/app.css') }}" rel="stylesheet">`

`app.css`が読み込まれる
.NET Core 3.1 & EFCore 3.0 で Azure PipelineでCIを構築する

この記事は
**[C# Advent Calendar 2019](https://qiita.com/advent-calendar/2019/c-sharp)　の12/17**
の記事です

2019/12 
[.NET Core 3.1](https://dotnet.microsoft.com/download/dotnet-core/3.1) LTSが公開になりました。
これにより、[.NET Core 3.1は3年間のサポート対象になります](https://forest.watch.impress.co.jp/docs/news/1222358.html)


今月自分の関わるプロジェクトを 
.NET Core 2.2 ⇒3.1 
EfCore 2.0 ⇒ 3.0 に変更を行いました。


しかしCIで使っている [Azure PipeLine](https://azure.microsoft.com/ja-jp/services/devops/pipelines/)が、[.NET Core 3.1](https://dotnet.microsoft.com/download/dotnet-core/3.1) 規定値で対応していなかった為、
.NET Core 3.1で動くように変更しました。
そのメモを残します。


 **(2019/12/9現在)Azure PipeLineでは .NET Core 3.0 のCLIが適用されています** 

.NET Core 3.1 アプリ デフォルト設定ではCIできません。
 EFCore 3.0 から デフォルトで[EFCore CLI がインストールされていないため](https://docs.microsoft.com/ja-jp/ef/core/miscellaneous/cli/dotnet)

Migration を実行するために CLIを別途インストールする手順を加える必要があります。

---

簡単に言えば　以下の作業を追加するだけで恐らくCIできるようになると思います。


Agent jobをプラスして

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46608/e8656969-b07c-2207-58c9-6a0edf1b0a45.png)



.Use NET Core を使って
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46608/114ff3aa-4600-2665-9170-319fe49f3770.png)

バージョンで　3.1.x を指定して（一応Include Preview Versionsをつけて）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46608/8709e00a-38e7-b211-b970-f99d4549e14f.png)

これで、設定完了です。

---

EF Core を使って DB Migrationをするには　Command Lineを使うのが簡単です。

Command LineをAdd して

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46608/bc87f85d-bc88-f3c2-afe5-2b4aa6f54618.png)

---
EFCore 3.0　の場合は　
```dotnet tool install --global dotnet-ef```
を使って　ツールをインストールしたのち、Migration Scriptを実行します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46608/31409a63-566c-d619-b6ab-bfd92c477e28.png)

---
.NET Core 2.xの場合は、最初の.Use NET Core で
efCore CLIツールがもとから入ってるので

DB Migrationに
```dotnet tool install --global dotnet-ef```
コマンドは不要です。


↓流れとしてはこんな感じになります

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46608/d3264bd3-ac6f-a950-bfb2-df6ee7be6fc1.png)
おじさん視点から見たゆるい勉強会について

本記事は[「第二弾 地方IT勉強会 Advent Calendar 2019」](https://adventar.org/calendars/4620)の１８日目の記事です。
[第一弾](https://adventar.org/calendars/4605)の方では学生代表として、げんし君が[記事](https://genshi.hatenablog.com/entry/2019/12/18/000608?_ga=2.89951635.948900603.1576469101-887098159.1575196824)を書いてくれておりますので
読み比べてみて頂けるとこんな文章でも１００倍楽しめると思います。（ダイマ

# 自己紹介
北海道旭川市でIT系サラリーマンをしています。
よくいる地方IT会社員で「何でもできるけど、何もできない」を地で行っています。
ゆるい勉強会ではエモ発表担当と共同代表者（の真似事）をしています。


# ゆるい勉強会とは
tomio2480さんによると２０１2年8月ごろから旭川で活動を始めた、一応IT系の勉強会です。
今では休止中のUnity勉強会を除き、現存する旭川唯一のIT系勉強会でもあります。
特色としては学生が元気な勉強会と言う話に尽きると思います。学生が好きにやって、大人が見守る。
でもちょっと大人もやりたい！みたいな雰囲気がデフォです。
今年よりtomio2480さんが東京に就職されたため、私ともう一人の方が共同代表と言う事で引き継いだ形になります。


# きっかけ
参加のきっかけは３年ほど前、ある経緯で「会社を辞めたら自分に何ができるか」を考え始めた事です。
地方IT会社のあるあるかは分かりませんが、とにかく地盤が安定している場所にいると意外と考えてこない事で、今まで一生懸命仕事をしてきたし社内の評価も悪くない。そんな人間が一人だけで生きていけるのかと考えた瞬間　自分が井の中の蛙どころか水たまりのボウフラ状態だった事に愕然としたわけです。

そんな中で何か知見を広げる機会はないかと探し回った結果、以前に一度なんとなく参加していたゆるい勉強会の開催にたまたま引っかかったのが始まりでした。


# おじさん視点のゆるい勉強会（メインコンテンツ）
おじさんは、旭川に絶望をしていました。
札幌と比べて勉強会の数が桁違いで賃金も天と地。何が第２の都市だと。こんなんじゃこの先生きのこれない！と。これはもう諦めて引っ越すしかないかと札幌で就職先を探したりもしている中でした。

しかし勉強会に参加してまず思ったのが、みんな緊張しつつも楽しそうに発表をするところだなと思いました。

発表者が学生でほとんど埋まっていたのもあり、学生当時私が欲して止まなかった環境が今はここにあるような気がして、何か眩しいものを見たような気がしていました。
参加回数を経るにつれ、発表の上手くなる人間、大人顔負けのガチ発表をする人間と様々な色が出てきて、将来が楽しみな子達ばかりです。
おじさんは、旭川に居続けるのも悪くないんじゃないか、と思いました。

もちろんそれだけが理由ではないですが、今は思いとどまり自分の周りの環境を幸せにしていくことをモットーに日々過ごしています。

とはいえ、上手くなる人ばかりじゃないのも確かでしょう。それもいいと思います。

ちょっと失敗して「もうだめだ」と思って来ない人も出るかもしれません。それもいいでしょう。

話すのは苦手だけど、発表を聞くが楽しいから来ている！それもいいですね。

ITとかわかんないけど、伝えたいことがある！どんとこいです。

おじさんは、ゆるい勉強会に参加してくれる、またはしてくれたどんな人間も応援しています。

欲を言えば、本勉強会を巣立っていった子達がいつか戻ってくる時、旭川に帰ろうかと思っている時、そんな時に勉強会に立ち寄って成果を共有してくれたり、Uターンなどで戻って来て旭川に貢献してくれたらいいなとも考えています。もちろん地元で受け皿を用意できるのがベストですが、今はこういう遠回しな地域貢献の仕方もアリかなと。

# レベルを上げて、正論でぶん殴れ（成果的なお話）
そんなこんなで色んな方のお話を聞いたり試したりしているうちに、
いつの間にかレベルが上がっていることもあります。

社内でちょっとおかしな人扱いをされつつも、ちゃんと礼儀を尽くしていれば大抵の人は応援してくれます。
レベルが上がった状態で突っ込まれても痛くないような正論を展開すれば、周りの環境をある程度自分の思うように整備する事も叶います。

そう、例えば社内のオープンスペースでWifi・電源あり、
社外の人間招待可能なもくもく会スペースを確保することができ、快適な日々を過ごすこともできます。

叶わないって？
おめでとう！あなたは今泥舟に乗っている事に気づくことができました。さっさと転職しよう！

例えば、社内で定時後すぐもくもく会ができる会社とかどうでしょう？


# これからのゆるい勉強会
さて、まかり間違って私が代表の一人となってしまった
ゆるい勉強会のこれからに不安を覚える方も少なくないかと思います。
早速１回ひどい勉強会をやらかしたばかりですし。

代表ではありますが、個人的には「何かあった時のケツ持ち」感覚で務めています。
基本、ゆるい勉強会は誰がどこで開催してもいいものと考えています。
「やりたい人が、やりたい時にやる」のが理想の形ですが、未成年ではなかなか難しい部分もあると思いますので大人が出るべきところは出ようかなと。もちろん私も好きにやらせてもらいますが。

なのでみんな、どんどん好きにやったらいいんじゃない？
声をかけてもらえれば少なくとも私は全力で対応します。

ゆくゆくはメンバーが変わり、内容が変わり、時代が変わっても誰かが来た時、
この勉強会が残せていたらいいなと思っています。

# 身内感問題について
よく勉強会をやる上で「身内感が出てしまうので新規の方が入りにくいのでは」
という話題が出るのですが、私は地方でやっている以上、ある程度のメンバーの
固定からは免れられないのが必定かなと思っています。

どちらかというと運営側にいる人間が気にしてくれたりするのは
とても良いこととは思いますが、気にしすぎなくても大丈夫だと思います。
参加したい人はしますし、もし適してそうな人がいたら声をかけてくれたり、
新しく来た人に少し優しくしようかなと思ってもらえれば最高ですね。
人が変われば勉強会も変わるわけですし、その辺はゆるく構えていきたいと思います。

なんたって勉強会のモットーが「運営に労力をかけない」ことですから。

# お知らせ・宣伝
あ、そうだ。
これからのゆるい勉強会として一つお知らせがあります。
来たる２０２０年５月１６日、旭川にてLDDAsahikawaを開催予定です。
学生LTがメインコンテンツになる予定ですので、１０名ほど募集します。
みんな、出てくれるよね？（ニッコリ

# 最後に
色々好き勝手に書きましたが、要約すると「私が居たかった環境を誰かが欲しい時に用意してあげたいな」というお気持ち表明をしたく、筆をとりました。こういった投稿は初めてなので乱文雑文ポエム妄想などご指摘は受け止めますが極力変な地雷を踏んだと思って諦めてもらえればと思います。

ここまでお読みいただき、ありがとうございました！
また、今回投稿の機会をいただいたtomio2480さんにも感謝を。また勉強会で会いましょう！
それでは！
SQLite3からcsvへ出力する

# はじめに
いつもはcsvからデータを分析することが多いのですが、今日はsqliteのデータベースにデータが入っていました。
今回は、sqliteからcsvファイルを出力するメモを書いていきます。

# 基本のコマンド
|コマンド|説明|
|---|---|
|.tables|テーブルの一覧表示|
|.schema|テーブルの構造を表示|
|.quit|終了する|
|.headers|onにするとヘッダーが出る|
|.mode|csvにするとカンマ区切りになる|
|.show|設定の表示|
|.output|ファイル指定すると出力先がファイルになる|

## データベースを開く
最初に編集するデータベースを開きます。
`sqlite3 hoge.sqlite3 `

## データベースからcsvに書き出す
`fuga`の部分を.tablesで出てきた取得したいデータに書き換えてください。

```
sqlite> .tables
sqlite> .headers on
sqlite> .mode csv
sqlite> .output output.csv
sqlite> select * from fuga;
sqlite> .exit
```

# 参考
- [SQLiteからCSVファイルへ書き出す方法](https://qiita.com/qqhann/items/69ef194e3378bb68608a)
- [SQLite3 チートシート](https://qiita.com/sotetsuk/items/cd2aeae4ba7e72faad47)
単発的なPoCの発生原因と、その対処

この記事は、[機械学習工学／MLSE Advent Calendar 2019](https://qiita.com/advent-calendar/2019/mlse)、14日目の投稿記事です。

##問題設定
近年、各企業内で複数の機械学習関連のPoC（概念検証,Proof of Concept）の痕跡がシステム内に残り、運用効率を低下させる要因の一つとなっている事例を多く目にします。例えば、使いかけの実験用インスタンス、トライアル導入したままのツール、そして実運用されている基盤が組織ごとに乱立し、管理が放棄されている状況です。RPAなどの導入も相まって、各事業会社でこうした**「野良AI」**が、ちらほらあるという状態が生じつつあります。
これらの発生する原因は、PoC、システム実装した側において、初期計画としてのシステムの全体像が無かったからという他ありません。
このため、単発的なPoCを抑制し、環境の乱立を防ぐための手段を検討します。

##モチベーション
筆者は統計モデルのアナリストとして、受託型データ分析、PoC、システム実装に長年取り組んできました。その中で、企業の独自環境でのモデル開発するタスクにも多く対応してきました。
独自環境では、ネットワーク上の制約などから、分析環境を必ずしも最適な状態では確保できないという問題が生じます。また、アプリケーションとの連携性の点から、各プロジェクトごとに環境構築、実装用の基盤を構築する対応を取らざるを得ないこともありました。
こうした取り組みが、上記の問題を発生させる原因となっている可能性を鑑み、自省的な面も含め、対策を検討します。

##事業会社において、ありがちなPoC
一般的なシステム開発におけるPoCの目的としては、主として、
　**- 導入効果の検証**
　**- 技術的実現可能性の検証**
の２点が挙げられます。

その上で、筆者の主観において、
多くの事業会社での機械学習システム導入プロジェクトにおいては、それぞれ
　- 導入効果の検証　→　**システム導入による削減効果の検証**
　- 技術的実現可能性の検証　→　**モデルとしての精度**
などが重視される傾向があります。

この際、導入効果が具体的なフローとなっているため、PoC時点でも個別具体的なタスクに対して、固有のモデル構築による検証が求められます。特定のタスクに対して、様々な試行錯誤を経てデータパイプライン、モデル精度向上が試みられ、その成果として、一連の処理が構築されています。

**これらのPoC結果を資産としてそのまま開発フェーズに持ち込むこと**で、
個別の分析環境が分散化、固有化するという状態が発生し、
野良AIが社内の様々なフローで稼働して続けている状況が発生しているのではないかと考えます。

##望ましいシステムの在り方
19年12月に発表された早大の鷲崎教授らが手がけられた論文
[Studying Software Engineering Patterns for Designing Machine Learning Systems](https://arxiv.org/pdf/1910.04736.pdf)
では、機械学習システムのアーキテクチャ・デザインパターンが整理されています。
この論文は、各文献から代表的なMLのアーキテクチャ・デザインパターンの分類を試みたものであり、上記の課題感に対応したアーキテクチャパターンも提案されています。
例えば、
　- Design Holistically about Data Collection and Feature Extraction
　データ収集と特徴量抽出を統合的に設計し、パイプラインジャングルを解消する。

　- Data-Algorithm-Serving-Evaluator
　機械学習のMVC（Model-View-Controller）として、データ、アルゴリズム、推論、評価を分離する。

こうした**アーキテクチャパターンは、PoC時点での複雑なパイプライン、モデルを整理し、統合的に処理することを志向**しています。
実際に、これらの技術的担保として、各社のクラウドサービス上では、DL向けコンテナや、トレーニング、検証、デプロイのために機械学習のカスタムワークフローの構築を容易にするためのサービスも展開されています。PoC時点から、分析用コンテナで独立してモデル構築することで、システム上の多くの問題は解決できます。

ただし、コンテナとして各環境が分離していたとしても、その内部でのテスト状況、コードが管理されない状態が維持される可能性は残っています。この点で、本質的な解決にはなっていない可能性もあります。

##遡って、そのPoC、本当に個別具体的にモデル構築する必要はあったのか？
身も蓋もないのですが、お読み頂いている方が従事されているプロジェクトにおいて、ふと、本当にPoCでそんなにモデルを作る必要があったのか、と感じることはないでしょうか。

PoCの目的は、主として、
　**- 導入効果の検証**
　**- 技術的実現可能性の検証**
の２点ですが、現状の機械学習プロジェクトにおいては、後者の技術的実現可能性の検証に注力されすぎているように感じます。

対象となるタスクフローにおいて、完全に自前でモデルを作りきらなければならない場面は、実際は少なく、汎用モデルでも代替出来るものも部分的に含まれています。特に音声認識、画像認識、各データの特徴量化などは汎用的なモデルが提案されています（Cloud Speech API等々）。

PoC実施者は、まずはこれらの組み合わせにおいてアルゴリズムを組み合わせ、タスクに対応するロジックを組むことからスタートすることが重要です。これらの汎用的なアルゴリズムの利用は、上記の後続での統合を親和性が高く、アプローチの検証を容易とします。

一方で、逆に導入効果の検証においては、運用過程でのエラー処理、データの生成分布の変化の可能性なども含めた効果検証が軽視されています。これらは逆に運用時を想定し、仮想的に検証しなければならず、経験値が発揮される領域です。

このように現状PoCにおいては重視されているポイントは、システム実装とズレがあり、それらを修正していくことで、「野良AI」の発生を抑制していくことが出来るのではないかと考えています。

##PoC段階から出来ること
- 最新論文の利用以前に、共通化、汎用化が出来る部分を切り出す
- 統合を想定した分析基盤を構築し、PoCから利用
- 分析基盤の社内共有化
- 組み込みアプリケーションと疎結合を前提とし、各種コンテナを利用
KING OF TIMEの設定をクリアする

くそったれぇ・・・！
サイヤ人の王子であるこの俺様がなぜこんなことをっ・・・！

というわけで、
クラウド勤怠管理サービス「KING OF TIME」の設定をクリアするのに四苦八苦しました

# 何事？

自社の管理アカウントの設定で「パスワード認証で打刻」のまま、打刻用Windows10 PC（with ICカードリーダー on USB）に打刻クライアントソフトをインストール＆セットアップしちゃったんですが、
そのあとKING OF TIMEの管理WEBサイトで、組織の打刻方法を「ICカード認証」に変更しても、打刻PCでは「パスワード認証で打刻」のまま。。。

> Windowsメニュー > 設定 > アプリ

でKING OF TIMEをアンインストールしてみようと思ったけどおらず。。。
何者？？

あげくregeditまで動員したのだが、
結局

> hoge:\ProgramData\h-t.co.jp

なるフォルダがあったのでブチ削除候。
かーらーの、再インストールで無事、ICカードでタイムカードが押せるようになり申した

Q&Aにこんなん無かったゾ
書いとけよなぁ…ったく
embarkがインストールできなくて困ったとき

node-gyp, grpc でインストールに失敗している。

こんな感じのエラー

```
$ npm -g install embark
....
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:194:23)
....
```

Reference のように 0.8 でインストールするとOK

```
$ git clone git://github.com/creationix/nvm.git ~/.nvm
$ source ~/.nvm/nvm.sh
$ nvm ls
$ nvm ls-remote
$ nvm install 0.8
$ nvm use --delete-prefix v0.8.28
$ npm -g install embark
```

success install to embark

### Reference

https://qiita.com/koinori/items/18dd11bae20e008a8532
gossテストを使いまわしやすくする

この記事はgoss advent calender2019参加記事です。

本投稿では、gossテストの再利用性について書いていきます。
ただこの内容については設計要素を含み、必ずしも本投稿のやり方が正解ではありませんが
参考程度の筆者の使っているやり方を書ければと思います。

再利用の重要性
---------
これはgossに限りませんが**一度作った物を使いまわす**ことについて改めて重要であることを書いておきたいです。

何らか動いた結果があれば、それをどこまで変えても動くのか、どこを変えたら動かなくなるのかという観点で調べれば良いため、構築やテストの作業負荷を減らすことができます。


テストツールでの再利用のメリット
-------
手動テストでの再利用は、一度作成したテスト項目一覧(*テスト手順と期待結果が書かれたもの*)に留まり、テストを実行する場合は都度操作を行う必要があります。

しかしテストツールの場合は、テストの実行をコマンド1回程度で手軽に行えるため、何か気になれば実行したり、1日1回実行しても大した手間にはなりません。

また作成したテストシナリオをファイルで直接別のサーバでテストすることも可能なため、水平分散クラスタのノードのようにIP以外ほぼ同じ構成のサーバでの再利用に留まらず、
例えばOS部分のみ切り出して全体的に再利用したり、httpd部分、DB部分などM/W単位で切り出して再利用することも難しくはありません。

この内容については、gossに限らずserverspecでも同様の内容です。

再利用性の高いテストシナリオについて
------------
gossではgossfileディレクティブを使うことで、別のテスト項目ファイルを呼び出せるため、これを活用して再利用性の高い構成にします。

ここはどういう風に分割するか、などはあくまで一例です。

```
Hostname1.yaml
Hostname2.yaml
Prod/
  Common_OS.yaml
  Hostname1_httpd.yaml
  Hostname2_httpd.yaml
  Common_DB.yaml
Qas/
  Common_OS.yaml
  Hostname1_httpd.yaml
  Hostname2_httpd.yaml
  Common_DB.yaml
Dev/
  Common_OS.yaml
  Hostname1_httpd.yaml
  Hostname2_httpd.yaml
  Common_DB.yaml
```

それぞれHostname?.yamlで必要なディレクトリ以下のyamlをgossfileディレクティブでインクルードします。

```
gossfile:
  Prod/Common_OS.yaml: {}
  Prod/Hostname1.yaml: {}
  Prod/Common_DB.yaml: {}
```

これらファイルを同期するように各サーバに配置したり、NFSやCIFSでマウントした領域に置きます。


環境ごとでディレクトリを分けていますが、Command等で何か変更をかけるようなことをしていない限りは異なる環境のテストを実行しても問題にならない(Failは出ると思いますが)ため、構成管理優先して一纏めにしています。

テストシナリオ分割時に留意してないこと
-----------------
これは敢えてですが、**テスト項目の重複を容認**しています。

これは手動でのテストの場合、重複した内容は作業時間をロスすることになりますが
テストツールでの実行する場合は同じ結果が出るだけで処理時間の延びは容認できるケースがほとんどです。

どうしてもテストシナリオを使いまわししたり、抜け漏れを回避しようとすると重複しがちになりますが、そこは考慮しないと割り切ってテストを構成しています。

もちろん同じ内容を何回も実施しても意味はないため、積極的に重複する必要はありませんが、重複しても大丈夫としておくことで、抜け漏れがないか？という方に注力する方が良いかなと思っています。
digdagをちょっと便利に使うようになった話

この記事は[freee データに関わる人たち Advent Calendar 2019](https://adventar.org/calendars/4414) 18日目のエントリーです。

# 概要
nakamichiと言います。freeeのデータ基盤でエンジニアやってます。

弊社ではデータ分析のためのあれやこれやの処理ワークフロー制御にdigdagを使っているのですが、最近弊社内でのdigdagの使い方が若干便利になったので、それについて紹介しようと思います。

なおdigdagの内部構造や仕様についてはほぼ触れていません。

# 先にまとめ
* 開発者の人数が増えるにつれ、唯一のsandbox環境が混み合ってきて幸せでない
* GitHubのPR毎に検証環境を作成できるようにして幸せ

# これまでの使い方

## digdag構成
ざっくりですが、弊社のdigdag環境は以下のような構成なっています。LB ListnerとかTargetGroupとかACMとか細かい部分は端折っちゃいます。

![insight-digdag構成図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552311/682acde1-b068-6dff-fa1e-9db187836ed8.png)

だいぶ端折ってますが、digdag自体はとあるECSクラスターの1サービスとして稼働していて、ワークフローのメタデータ等はRDSに保管する、この構成がsandboxとproductionそれぞれに用意された状態となっています。

digdag自体が具体的なデータ処理を実行することはほとんどなく、基本的にはワークフローエンジンとしての役割に徹し、具体的な処理はAWS BatchやらGlueに任せ、それらのジョブを起動するシェルスクリプトをdigdag内で叩いているイメージです。

## digdagのワークフロー更新
digdagが関与する開発プロセスは基本的に以下の流れに則ります。

1. PR提出 → sandboxにデプロイ → 動作検証
2. 1の動作検証結果が問題なければPRをmasterにmerge → productionにデプロイ

1と2いずれもGitHubのイベントを受けてCircleCIジョブが発火します。CircleCIジョブはおおまかに以下の処理を実行します。

- (sandbox|production)のコンテナイメージをビルドし、latestタグを付けてECRにpush
- デプロイ用のECSタスクを(sandbox|production)のECSクラスタで起動。コンテナイメージのエントリポイントからワークフローのデプロイ処理が走る。

図にしてみました。ごちゃごちゃしてて心苦しい。

![insight-digdagワークフローデプロイ構成図 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552311/7a5ee6d2-88ac-08ba-d804-035afe5be879.png)


## 課題
sandbox環境のdigdagで検証を行うわけですが、sandboxには直近のPRのワークフロー内容が反映される仕組みとなっていたため、複数人で別のワークフローの編集を行っている場合、後出ししたPR(もしくはPRへのpush)が勝ちます。
並行してワークフローをいじる人数が少ないときは、

「sandbox更新してよかですか？」
「どうぞどうぞ」

の忖度でやり過ごせたのですが、人数が増えてくるに連れこの忖度が辛くなってきました。
やがてsandboxの渋滞が起こりはじめました。

# 打開策
そこでPR毎に検証用のdigdagを作ってしまえ！あとは各自が自由にワークフローいじってこう！という機運が高まりました。

## 必要なもの
まず検証環境共通で使うものとして、あらかじめ以下を準備します。

* ロードバランサ
* ドメインと証明書

またPR毎に必要なものとして、以下すべてをPR毎になんらかのイベント駆動でまるっと作成する仕組みを作ります。(今回はGitHub Actionsを採用)

* digdagサーバ
* メタデータ管理用のDB
* Target Group
* Listner Rule

## 検証環境生成フロー図

今日3度目の図です。検証環境が生成される一連のフローを表しました。

![digdag sandbox改善 構成図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552311/88dda48e-11d2-5cf3-515a-13fc1f35b683.png)

ちょっとうまく図で説明しきれなかったので、ポイントだけ補足します。

* これまでsandboxのECRリポジトリにsandbox:latestのタグしか付与していなかったところに、PR番号を取得してそれをタグとして採番するようにした
  * latestではなく各自が開発しているPR内容を含んだコンテナイメージを使ってデプロイが可能
* PRコメントの特定ワードにGitHub Actionsが反応し、図の番号順に検証用のAWSリソースを作成
  * オンデマンドで環境のご用意が可能
* 検証環境用のDNSホストゾーンにワイルドカード付きレコードを作成して、検証用ALBのドメインにALIASで紐付ける(ACMもワイルドカード付きで登録)
  * `pr-XXX.digdag.co.jp` のようにサブドメインがPR番号のドメインの名前解決が可能
* Target GroupとALBのListnerをPR毎に作成
  * 各PRのドメインと紐付け、ブラウザから各PRのdigdag環境にアクセス可能

また図では表わせていないのですが、PRへの追加push時は既存のCircleCIジョブで対応しています。該当のPR番号の検証環境が存在していたらワークフローの更新処理をするタスクを追加しました。これで都度変更があっても検証環境が更新されます。

ちなみに週末に一度お掃除ジョブが走り、検証環境用のAWSリソースのみ削除しにかかるので、ゴミが残って無駄コストを払い続けるとかはないようにしてあります。

# 効果
各自思い思いにワークフローを更新できるので、少なくとも譲り合いで開発や検証作業が止まることはなくなり、生産性は間違いなく上がりました。
週末までは環境が残っているので、エビデンスとしてワークフローの実行実績をそのまま残しておくなど、レビュー時にも役立っています(sandboxオンリーの時代にできていたことが検証環境でもできている)。

# 感想
深夜のノリで描いた構成図は色々とヤバい。
ReactNativeについて少し調べてみた

#  ReactNativeとは？
- Facebook社が開発・公開しているネイティブアプリのクロスプラットフォーム開発フレームワーク
- 言語としてJavaScriptを使用
- `JSX`というXMLシンタックスなライクな書き方ができる
- `Props`と`State`でデータを扱う

# JSXとは？
JSXはJavaScriptにXMLライクのシンタックスを追加する言語拡張です。
JSXを使うと、JavaScriptコード中にHTMLタグを埋め込んでいるかのように記述できます。

```javascript:JSX
<View>
  <Text>Hello world!</Text>
</View>
```

# Propsとは?
- コンポーネントと外部で値をやり取りするためのインターフェイス
- コンポーネントに必要な値を受け取ることができる。
- 状態によって値が変わるようなものはStateに任せるため、Propsは`immutable`で変更してはいけません。

```jsx:props
class Greeting extends Component { 
  render() {
    <div>
      <Hello name="react" />
      <p>Happy hacking!</p>
    </div>
  }
}
 
const Hello = (props) => {
  return <p>Hello, {props.name}!</p>;
}
```

# Stateとは?
- コンポーネントの状態を表す値を保管するものになります。
- これは、コンポーネントの現在の状態を扱うためのものです、つまりStateの値を操作することでコンポーネントの状態を操作します。
- コンポーネントの表示の変更など必須とも言える機能になります。

まずはconstructorで値を初期化します。
初期化したStateは「`this.state.〜`」で扱うことができます。


```jsx:state
constructor(props) {
  super(props);
  this.state = {
    value1: 'foo',
    value2: [ 'bar', 'baz' ],
  };
}

render() {
  return (
    <div>
      <h1>{this.state.value1} </h1>
    </div>
  );
}
```

今回はここまで
また調べたら投稿していきたいと思います。
レガシーアプリのiOS13対応（UISegmentedControl編

##はじめに
UISegmentedControl編とタイトルには記載してますが、
続編等は今の所は全くありませんｗｗｗ

さて、私が普段担当しているアプリは、業務で利用するInHouseの古いアプリなんですが
今年もiOSのバージョンアップ対応を毎度のごとく行っておりました。


UISegmentControlに関しても、今年は大幅に見た目が変わると知っていたので
TintColorの設定をして、アプリに合う見た目にして対応する事で十分だろうと思っていました。

先方にも、見た目がiOS13から変更された旨を伝え、一度はOKをもらっていましたが


**やっぱり、前の見た目に戻してくれないか？**


…



ｵｫｫｰｰｰ!! w(ﾟﾛﾟ;w(ﾟﾛﾟ)w;ﾟﾛﾟ)w ｵｫｫｰｰｰ!!


AppleがiOS13で変更した見た目に対して
iOS12以前の状態に戻していくことは
Appleに対しての反逆行為やぞーーーー(´；ω；｀)（勝手に思っているだけ？）


できれば今のiOS13の見た目のままでカスタマイズしたかったのですが、、、
NGが出てしまったのでは仕方ない。iOS12以前の見た目にするしかない。。できるのか。。。


結果的に言えば **可能** でした！！
比較すれば元々のiOS12以前のモノと若干違うのは分かりますが、全然許容範囲！

####実際のイメージをどうぞ！！
![Simulator Screen Shot - iPhone 8 - 2019-12-17 at 23.42.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88925/8f927261-99cf-c9a5-7b2e-3fa4b2142dca.png)




```swift:ViewController.swift
    override func viewDidLoad() {
        super.viewDidLoad()
        if #available(iOS 13.0, *) {
            let segSizeSingle = CGSize.init(width: self.segment.frame.size.width, height: self.segment.frame.size.height)
            self.segment.setBackgroundImage(self.makeImage(UIColor.clear, size: segSizeSingle), for: .normal, barMetrics: .default)
            self.segment.setBackgroundImage(self.makeImage(self.segment.tintColor, size: segSizeSingle), for: .selected, barMetrics: .default)
            self.segment.setTitleTextAttributes([.foregroundColor : UIColor.white], for: .selected)
            self.segment.setTitleTextAttributes([.foregroundColor : self.segment.tintColor!], for: .normal)
            self.segment.layer.borderColor = self.segment.tintColor.cgColor
            self.segment.layer.borderWidth = 1
        }
    }
    
    func makeImage(_ color : UIColor, size : CGSize) -> UIImage {
        UIGraphicsBeginImageContext(size)
        let rect = CGRect(origin: CGPoint.zero, size: size)
        let context = UIGraphicsGetCurrentContext()!
        context.setFillColor(color.cgColor)
        context.fill(rect)
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image!
    }

```

セグメントのBGImageや、レイヤー等の見た目を色々いじって実現しました！

今回のサンプルでは`ViewDidLoad`に記載しましたが
実際に実装する場合は`Extention`やObjective-Cだと`Category`で実装すると
アプリ全体で見た目を合わす事も簡単にできると思いますので
###是非、ご活用ください！！！！
（そんな古い見た目に変える要望ねーよ！とかは言わないで…）

最後までご覧いただき、ありがとうございました！！
[Re:ゼロから始めるVue生活] Vueで検索/ソートさせてみた（php連携）

Vueでリスト検索とソート機能を作ってみたので
さらに応用して、phpの配列データからVueに流し込んで処理した機能を作ってみました。

# ロジック
php配列データ
↓
JSONデータに変換
↓
JSONデータをJSの配列に格納
↓
JSの配列をvueのdataに格納
これでvueで取り扱えるデータになりました。

computed(算出プロパティ)
matched：
フォーム入力の数値 <= budgetの数値のリストのリストを表示
sorted：
ボタンのオンオフで昇順・降順ソート

limited：
limit数分表示できる

```php
<?php
    $list = [
        ['id' => '1', 'name' => '商品A', 'price' => '500'],
        ['id' => '2', 'name' => '商品B', 'price' => '300'],
        ['id' => '3', 'name' => '商品C', 'price' => '2000'],
        ['id' => '4', 'name' => '商品D', 'price' => '5000'],
        ['id' => '5', 'name' => '商品E', 'price' => '1500'],
        ['id' => '6', 'name' => '商品F', 'price' => '250'],
        ['id' => '7', 'name' => '商品G', 'price' => '100'],
        ['id' => '8', 'name' => '商品H', 'price' => '750'],
    ];
    $list_json = json_encode($list);
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Vue App</title>
</head>
<body>
    <div id="app">
        <input v-model.number="budget">円以下
        <p>{{ matched.length }}件表示中</p>
        <button v-on:click="order=!order">価格 ▼</button>
        <div v-for="item in limited" v-bind:key="item.id">
            {{ item.name }}: {{ item.price }}円
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.5/lodash.min.js"></script>

    <script>
        let list = JSON.parse('<?php echo $list_json; ?>');
        const app = new Vue({
            el: '#app',
            data: {
                // 検索初期値
                budget: '',
                // 検索数
                limit: 10000000000000,
                // 検索リスト
                list: list,
                // ソート初期値
                order: false,
            },
            computed: {
                matched: function() {
                    return this.list.filter(function(el) {
                        return el.price <= this.budget
                    }, this)
                },
                sorted: function() {
                    return _.orderBy(this.matched, 'price', this.order ? 'desc' : 'asc')
                },
                limited: function() {
                    return this.sorted.slice(0, this.limit)
                }
            }
        });
    </script>
</body>
</html>
```

phpを使用せずVueだけで作ったコードもありますので
こちらを参照してください。
[[Re:ゼロから始めるVue生活]メモ](https://qiita.com/ProgramingDai/items/854046b5488da9d0188e)
Uipathでエクセルにドット絵もどきを描いてみた

# はじめに
はじめまして、こんにちは。
人生初めてのアドベントカレンダーということでUipath暦1年9ヶ月、あまり使ったことのないセルの色を操作するアクティビティでロボットにドット絵もどきを描いてもらいました。
（余裕の遅刻ですみません）
では、早速行きましょう

# セルの色ってどうやって塗るの？
Uipathにはセルの色を取得するアクティビティと範囲のセルの色を変えるアクティビティがあります。これを使います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79318/020e5ed8-d235-0b08-6a20-55f357a8c207.png)
※「セルの色を取得」と「範囲の色を設定」

# セル番地を移動させるのはどうやるか
行は数字なので加算すればいい。問題は列名。繰り返すなら数字のほうが楽。
ただ、エクセルは27文字目以降「AA」のようにアルファベットが繰り上がります。
数字からこのアルファベットをどうやって変換するか。

## ヒントは26進数！
26進数の考え方で26までいったら1繰り上がるようなソースを作ります。
1. まず、アルファベットの26文字に対応する数字のディクショナリ型を作ります。  
↓こんな感じの  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79318/09c31f8b-a734-875e-dd9b-e48269d8bcd6.png)
2. 目的の番号を２６で割りあまりを求める⇒あまりに対応するアルファベットを設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79318/3d3899b4-d5ef-b918-651b-c6b7a8d166ed.png)
3. 商が1以上の場合、2を再実行し、設定したアルファベットを文字列結合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79318/25ac864f-495d-90ba-ba9f-7874885ebca6.png)

## セル番地の移動ができるようになったので...
縦と横にループでセル移動させて、色塗ったり、色を取得するようにする。

# ロボを作る
## 実験
セルの色をRGBで指定して、グラデーションをさせてみる。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Qiita用の色塗りロボ、その１<br>目標はお絵かきするロボ（時間の関係で2倍速） <a href="https://t.co/KxEMNdV3Na">pic.twitter.com/KxEMNdV3Na</a></p>&mdash; ベルガモット@C97 12/31(火) 西 B-66a (@belgamot_007) <a href="https://twitter.com/belgamot_007/status/1206951650021322753?ref_src=twsrc%5Etfw">December 17, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 
これはこれできれい。

## 本題！
お手本と同じ絵をエクセルに描いてもらう
<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">Qiita用の色塗りロボ、その２<br>お手本を真似させてみた（時間の関係で2.5倍速） <a href="https://t.co/CIQdEd2IMv">pic.twitter.com/CIQdEd2IMv</a></p>&mdash; ベルガモット@C97 12/31(火) 西 B-66a (@belgamot_007) <a href="https://twitter.com/belgamot_007/status/1206955497623937024?ref_src=twsrc%5Etfw">December 17, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 
できた（右がお手本。）

## おまけ
背景色を取得して、背景を青に塗り替える。
<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">Qiita用の色塗りロボ、その３<br>お手本を真似ながら、背景色を変えてみる（時間の関係で2.5倍速） <a href="https://t.co/BaZTn7Fry1">pic.twitter.com/BaZTn7Fry1</a></p>&mdash; ベルガモット@C97 12/31(火) 西 B-66a (@belgamot_007) <a href="https://twitter.com/belgamot_007/status/1206956885602996225?ref_src=twsrc%5Etfw">December 17, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 
これもうまくできた。

# まとめ
これをうまく使えば、ロボでドット絵アニメーションとかできるのでは？！
【Azure】ubuntu18.04 でLet'sEncryptでSSL証明を適用

AzureVMのubuntu18.04でLet’sEncryptを使ってSSL設定するまでをまとめました。

## 前提条件

1. AzureVMを使ってubuntu18.04を起動して、SSHログインできる。
2. httpで指定したドメインにアクセスできること
3. Apache2をインストール済み

```
$ apache2  -version
Server version: Apache/2.4.29 (Ubuntu)
Server built:   2019-09-16T12:58:48
```

## 1. Azureのポート開放

仮想マシンの設定 > ネットワーク からHTTPのポート80番とHTTPSのポート443番を開放する。
追加するときは、**受信ポートの規則を追加する** から追加できる
<img width="1415" alt="スクリーンショット 2019-12-17 23.58.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492847/07c77c4d-441b-0c87-fa2b-80595b2eb6e8.png">

## 2. Let's Encryptで証明書発行

```
sudo apt install certbot
```

インストールが終わったら`certbot`を実行する
ここではドメイン名を`hogehoge.com` メールアドレスを`mail@mail.com`とする
メールアドレスは入力しなくても良いが、Let’sEncryptから期限切れなどのメールを受信することができるので、入力しといた方が良い。

```
certbot certonly --webroot --webroot-path /var/www/html/ -d hogehoge.com -m mail@mail.com
```

この後に規約に同意するかなどの質問に答える。
基本 "Y" で答えればOK

その後`Congratulations!`と出れば成功

```
IMPORTANT NOTES:
 - Congratulations! Your certificate and chain have been saved at
   /etc/letsencrypt/live/www.hogehoge.com/fullchain.pem. Your cert
   will expire on 2019-12-18. To obtain a new or tweaked version of
   this certificate in the future, simply run certbot-auto again. To
   non-interactively renew *all* of your certificates, run
   "certbot-auto renew"
 - If you lose your account credentials, you can recover through
   e-mails sent to mail@mail.com.
 - Your account credentials have been saved in your Certbot
   configuration directory at /etc/letsencrypt. You should make a
   secure backup of this folder now. This configuration directory will
   also contain certificates and private keys obtained by Certbot so
   making regular backups of this folder is ideal.
 - If you like Certbot, please consider supporting our work by:

   Donating to ISRG / Let's Encrypt:   https://letsencrypt.org/donate
   Donating to EFF:                    https://eff.org/donate-le

```

証明書が生成されたかを確認するには下記コマンド

```
$ ls /etc/letsencrypt/live/hogehoge.com/
cert.pem  chain.pem  fullchain.pem  privkey.pem  README
```

## 3. Apacheの設定変更

Apacheのssl設定ファイルを編集する

```
$ vim /etc/apache2/sites-available/default-ssl.conf
```

vim で設定ファイルを開いたら、下記の該当箇所を変更する。
変更するときは念の為、コピーしてバックアップをとるか、コメントアウトして残しておいたほうが万が一のときに助かる。(設定ミスで、アクセスできなくなった経験あり)

```
ServerAdmin webmaster@hogehoge.com ←変更
DocumentRoot /var/www/html
ServerName hogehoge.com ←変更
SSLCertificateFile      /etc/letsencrypt/live/hogehoge.com/cert.pem ←変更
SSLCertificateKeyFile   /etc/letsencrypt/live/hogehoge.com/privkey.pem ←変更
SSLCertificateChainFile /etc/letsencrypt/live/hogehoge.com/chain.pem ←変更
```

私の環境では`Server Name`が最初から記述されていなかったため、自分で記述。

その後Apacheを再起動するとHTTPSで接続できるようになる

```
service apache2 restart
```

## うまくいかないときは

謎のエラーでうまくいかないときは、管理者モードでやるとうまくいきました。

```
sudo su -
```

でroot権限で上記手順をやってみてください。

Let’sEncryptは3ヶ月で期限が切れるので、それの自動更新とHTTPSへのリダイレクト設定は次回行います。
华强北での単体部品の探し方

このエントリはShenzhen Advent Calendar 17日目です。

#华强北で部品を買うという難しさ

同人ハードウエアで基板を作っていて、深圳にいくと特定の部品が欲しいと思う事があると思いますが、ともかく华强北電気街は広大で、目指す部品をどうやって探すかが一番の課題になります。

![01_華強広場酒店から見た華強北電気街.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120903/a2807898-cdec-99a6-4c19-2bbd08fe49f7.jpeg)
**华强広場酒店から見た電気街 ともかく広い**

![05_華強北路マップ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120903/0d872b4e-baf6-6c9a-9927-0cfbf2248d23.jpeg)
**华强北路に新しく掲示されたビルマップ。ともかくたくさんのビルがある**

特に、日本からの訪問での限られた時間でどうやって効率的に目標にたどり着くかは結構重要です。
そこで、ここ数回の深圳訪問で色々と試した目的の電子部品(今回はIC単体)の探し方を紹介します。

## 探し方1 「筆談」
自分が一番最初にやったのは「部品名を書いたメモを持って店頭であるか聞く」です。
华强北では扱う商品で同じ様な場所に集まっているので、半導体の看板が出ているお店へ行ってメモを見せて「这个有吗？(これありますか？)」と聞いてみます。ほとんどのお店は他のお店と在庫情報を共有をしている(**<-これはあとで重要になる**)ので、「とってくるから1時間たったらまた来て」と言って少量でも部品在庫を持ってきてくれます。

![お買い物メモ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120903/e7f1244f-b7e3-93f3-13eb-cb442ec1934b.jpeg)
**お買い物メモの例**

## 探し方2 「Aliexpressの業者さんにコンタクトをしてみる」

みんな大好きAliexpressではほとんどの電子部品が買えます。そこで、販売者(セラー)に直接「今度深圳に行くんだけど华强北に実店舗あるんなら訪問したい」とメッセージしてみました。
ただ、意外と実店舗を华强北に構えているセラーは少なくうまく行きませんでした。(よく考えたらそれはそうか...)

## 探し方3 「お店の人とWeChatで繋がって事前に探してもらう」

「探し方1」でも書いたのですが、お店で部品の有無を聞くとPCに向かって「在庫の有無」や「価格」を調べた上でどこかに注文して取りに行ったり持ってきてもらったりしていました。
よくよく見ているとどうも同じビルの店舗間で在庫情報をデータベースで共有しているようです。
そこで、前回訪問時に購入した店舗の店員さんとWeChatで繋がって直接チャットで在庫があるか事前に確認してみました。
![华强北の半導体やさんの名刺.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120903/8473b505-e305-395b-d68c-85f6e5369ea2.jpeg)
**今回お願いした半導体関係の店舗が集まった「都会電子城」のお店の名刺、WeChatのQRコードがある**


今回はAliexpressでもまだあまり見かけない「USB PDデバイス」用のコントローラを探してもらったのですが、少し時間がかかったものの、きちんと対応をしていただき無事にものを入手することができました。(黄小姐に大感謝です)

![Screenshot_2019-11-08-17-50-50-402_com.tencent.mm.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120903/1688ed7a-176e-7d62-3188-1d7ab436bb24.png)
**実際にやり取りをしたWeChatの画面の例**

WeChatはメッセージを長押しすると「翻訳」というメニューが出てチャットの中に翻訳結果が表示されます。
実際、店頭で対面しながら「会話はWeChatのメッセージで」というやり取りで言葉の壁を何とか超えて目的のICを入手できました。

## まとめ
お店にもよりますが、WeChatで繋がることで华强北での部品探しが非常にスムーズになります。
深圳へ出発する前に日本からお願いすることもできるので、ぜひ試してみてください。
マスタリング・イーサリアムを読んでいる

日本語版が出ているのを知ったので買って読んでいるけど、意味がわからないところが結構ある。というか6章がつらい。

たとえば6.6の「特別なトランザクション:コントラクト作成」のところ
> ゼロアドレスの使用はコントラクトの作成のみを目的としていますが、さまざまなアドレスから支払いを受け取ることがあります。これには2つの説明があります。それは偶然にイーサを損失するのか、意図的なイーサの焼却です。しかし、意図的にイーサを焼却したい場合、ネットワークへの意図を明確にして、代わりに特別に指定された焼却アドレスを使用する必要があります。

ゼロアドレスは意図的なイーサの焼却に使われるが意図的にイーサを焼却したい場合は代わりに特別な焼却アドレスを使用する必要がある…？

原文読んだら
https://github.com/ethereumbook/ethereumbook/blob/develop/06transactions.asciidoc#special-transaction-contract-creation

> However, if you want to do an intentional ether burn, you should make your intention clear to the network and use the specially designated burn address instead:

"You **should** make your intention clear..." だから普通は
「しかし、意図的にイーサを焼却したい場合は、ネットワークへの意図を明確にするために、代わりに特別に指定された焼却アドレスを使用する**べきです**。」
ぐらいでは。

あと
> コントラクト作成のためにゼロアドレスを宛先とする場合でも、常にtoパラメータを指定することをおすすめします。誤ってあなたのイーサを0x0に送信し、それを永久に失うコストが大きすぎるからです。また、gasPriceとgasLimitも指定する必要があります。

これも良くわからない。結局コントラクト作成のトランザクションのtoは0x0なんだから。例えば、コントラクト作成の意図のトランザクションのdataが誤って空だったりすると、to未指定でも0x0指定しても同じ結果になるはず。

これも原文を読むと
> It is good practice to always specify a to parameter, even in the case of zero-address contract creation, because the cost of accidentally sending your ether to 0x0 and losing it forever is too great. You should also specify a gasPrice and gasLimit.

なので
「必ずtoパラメータを指定する習慣づけをすることをおすすめします。たとえゼロアドレスのコントラクト作成の場合でもです。なぜなら、誤って0x0にイーサを送付してしまい、それが永久に失われてしまった時のコストが大きすぎるからです。gasPriceとgasLimitも指定する**べきです**。」

ぐらいかなあ。ようはto省略したりしなかったりしてると間違って0x0に送金しちゃうぞ。ぐらい。またここでもshouldを"必要です"って訳してるし。

こういう風に6章は重要そうだけど何が書いてあるかわからないところがあって、そのたびに原文をあたっているので辛いです。