OmniAICreator/Qiita-1.07M huggingface dataset:
【Nuxt.js × Firebase】個人開発でWebアプリを立ち上げるまでにやったこと


## はじめに
システム開発の世界に足を踏み込んで3年目のペーペーです。
この度初めて個人開発でWebアプリを作ってみました。
せっかくなら0からアプリリリースまでの流れを記事に起こし、これから開発を始める方などの参考になればなと思いました。

## 作ったもの
自分の趣味を一覧化し、他の人に共有する「Daily Palette」というアプリを作りました。
友達と話していて「おすすめの漫画教えて」と聞かれた際にONE PIECEとかありきたりなもの（失礼）しか咄嗟に出てこなく、自分の趣味を一覧化できるサイトがあればいいなと思い、作成しました。

こんな感じでいろんなジャンルごとに好きなタイトルを一覧化することが出来ます↓

<img width="250" alt="Screenshot_20220326-171423.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2606130/7da3cac8-cf16-48e7-a532-18cc87be0023.png">

https://daily-palette.com/

## 開発前準備

### コンセプト決め（2人日くらい）

漠然と以下の方針がありました。

・TODO管理や電卓などローカルで完結するアプリよりかはSNSのような他の人と繋がれるものを作りたい！
・日々の生活で痒いけど届かないようなプラスアルファしてくれるアプリ
・とはいえ初めてなのでコンセプト、技術要素はシンプルに。

このような願望ベースでアイデア出しをした結果、「趣味を共有する」というコンセプトの本アプリを作る方針になりました。


### アーキテクチャ検討・調査（1人日）

要件を満たすには以下の機能がざっくり必要

　・ユーザ認証機能
　・登録したデータを保存する機能（データベース）
　・ホスティング機能

調べたところFirebaseが最強そう。以下の記事を参考にさせていただきました。

■Firebaseの始め方
https://qiita.com/kohashi/items/43ea22f61ade45972881

フロントエンドは触ったことのあるNuxt.js  + バックエンドはいろいろ出来そうなFirebaseで決定。

<img width="600" alt="Group 2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2606130/5e2ce5b3-f042-21bb-f7e3-1cb36cc27ea1.png">

## 開発

### 環境構築 (0.5人日)

まず初めにGitアカウントの作成をし、開発者のローカルにチェックアウトしました。
下記の記事が参考になると思います。

■GitHubアカウント作成とリポジトリの作成手順
https://qiita.com/kooohei/items/361da3c9dbb6e0c7946b


Nuxtは公式が充実しているので、ほとんど公式を参考にしました。

■Nuxt.js公式
https://nuxtjs.org/ja/docs/get-started/installation

下記の記事も参考になりました。

■Nuxt.js + TypeScript での環境構築手順
https://qiita.com/couragenki/items/d8a809c383c4fef9ecda

今回はSPAモードで、言語はTypeScriptを選択しました。
この辺の良し悪しは作るものとか、その規模感によっても変わると思います。

Nuxtプロジェクトが作成できたら、Firebaseアカウントを作成します。
Firebaseについても公式がとても丁寧なので、公式だけで問題ないと思います。

■Firebase公式
https://firebase.google.com/?hl=ja

NuxtのプロジェクトからFirebaseを呼び出すところについてはやや詰まったのですが、
下記の記事が一番参考になりました。

■Nuxt で Firebase を使う (Cloud Firestore & Hosthing)
https://chaika.hatenablog.com/entry/2019/01/21/113000


### 開発 (12人日くらい)

ここではとにかく頑張るのみです。

## リリース

開発が終了したらついにリリースです。
リリース時期にやったことをいくつか記載します。

### ドメイン取得(0.1人日)

Firebaseの無料プランでもそのままアプリリリースすることは可能ですが、
独自ドメインでも、年に1000円前後しかかからないので買ってしまいました。

独自ドメインは、こちらから取得することができます。

■Google Domains
https://domains.google/intl/ja_jp/

「dailypalette.com」を使いたかったのですが、すでに使われていたので
ハイフンを入れて「daily-palette.com」を購入！

Firebaseを使っているとカスタムドメイン設定も簡単でした。
下記の記事を参考にしました。

■firebase hostingにカスタムドメインを設定する
https://qiita.com/tocomi/items/f7754a7ff05879fbb815

### デプロイ（0.1人日）

Firebaseではデプロイも簡単に行えます。実際リリース時というよりは、開発しながらもデプロイは何度か行いました。

■Firebase Hostingを使ってみる
https://firebase.google.com/docs/hosting/quickstart?hl=ja#deploy


ここまでできれば完了です！
ブラウザから、独自ドメインで決めたURLを叩くと自分が作ったサイトにアクセスすることができます〜！

### OGP設定（0.2人日）

リリースした後で、気付いたのですがLINEやTwitterでの共有をした際にでてくる画像や文言の設定も必要でした。
こんなやつ↓
<img width="400" alt="Group 4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2606130/efde69e4-0bfd-3c13-6c25-8aa8b5c47157.png">


下記の記事が参考になりました。

■Nuxt.jsでOGP設定をする方法
https://qiita.com/TK-C/items/317a02620fe3f5b92673

以上です！良い個人開発ライフを！！
Flutter環境構築（Mac Intel-chip）

基本的には下記の記事通りでよかったけど・・・。

https://qiita.com/ruru9yoonsic/items/1d21826f9b591577d307

最後に一つだけWarningが残ったので備忘。
警告内容は以下。

:::note warn
Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1) ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
:::

以下を実行して、y/Nと聞かれるので全て「y」を選択。

~~~.zsh
flutter doctor --android-licenses
~~~

その後、再度以下を実行
~~~
flutter doctor
~~~


No issues found!
超初心者が、３日でDP-900に合格してみた

#超初心者が3日でMicrosoft認定試験のDP-900に合格してみた勉強法を自分用にメモしたものです。

**■合格者のスペック■**
・国公立大学文系卒業
・業務でデータ分析はする。特にMicrosoftに詳しいわけではない。
・AZ-900は事前に合格済
・勉強期間は3日程度

**■勉強方法・合格のコツ■**
AZ-900を受検していたというのもあってMicrosoftの試験に
慣れていたのが大きかったです。
やったことはたった２つだけ。

*①Microsoft主催のトレーニングを受講する*
皆さんが記載されているトレーニングです。
無料バウチャーもあるので絶対受けたほうがいいです。
大枠をここでつかむ。

*②Microsoftが提供しているDP-900の試験対策オンデマンド教材を視聴*
結構知らない人もいるみたいです。
「Microsoft 試験対策　○○（試験名）」
などとググって検索するとヒットしました。
この教材を２周くらいしてノートにまとめます。

これだけ。

**■所感■**
皆さんが書かれている通り、AZ-900よりも試験範囲が狭いので簡単に思いました。DP-900に特化した書籍は特にないと思いますので、Microsoft公式さんの教材をフル活用するのが良いかと思います！
[Docker]Nginx+PHP-FPMのコンテナのアクセスログが二重に出てハマった件

# はじめに
NginxとPHP-FPMをsupervisorで起動したDockerコンテナ内にLaravel環境を作っていました。

無事Laravelのwelcomeページが表示できるようになったものの、
docker logsを見てみるとアクセスログがおかしいことに気付きました。

```
172.17.0.1 - - [26/Mar/2022:15:27:56 +0900] "GET / HTTP/1.1" 200 17606 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.82 Safari/537.36"
- -  26/Mar/2022:15:27:56 +0900 "GET /index.php" 200
```
ん？この下のログは何？

**何故かアクセスログが二重に出力されていたのです。**
しかもフォーマットが違う。

ということで出力されるログを1つにしようとしたのですが、
**結局解決までに3時間近く掛かりました。**

なかなかに心が疲弊しました。

心を落ち着かせるためにも記事として残しておきます。


# 原因
で結局何が原因だったかというと、
**PHP-FPM側のアクセスログの設定でした！**

はい、最初に紹介した2つ目に出ていたログというのは
**PHP-FPMのアクセスログだった**んですね。

そもそも今回のDockerコンテナのベースイメージはphp:7.4-fpm-alpineを使っていたのですが
PHP-FPM側のログの制御というのは/usr/local/etc/php-fpm.d/docker.conf内でやっています。

でそこにあったんですね。
PHP-FPM側のアクセスログの設定が！
```
[www]
; if we send this to /proc/self/fd/1, it never appears
access.log = /proc/self/fd/2
```
はい。

そしてご丁寧にコメントで「/proc/self/fd/1に送ったら出力されなくなるよ」と言ってくれているので
/proc/self/fd/1に変更したところ、無事出力されなくなりました。

こんなことかよ、と思いました。

# ハマった最大の原因
振り返ってみると私が盛大にハマった最大の原因は、
**アクセスログなんだからNginxが出力しているんだろうという思い込みでした。**

その思い込みがあったため、Nginxのaccess_log周りの設定に問題があると考え、
そこばかりイジって無駄に何時間も浪費してしまいました。

ただその過程でaccess_log周りの設定に関して色々勉強できたので
良かった部分もありましたけどね！


# あとがき
思い込みって怖いです。
「これNginxの問題ではないのでは？」ともっと早く気付けたらと非常に悔やまれます。

何時間も同じところに詰まり続けたら
何か根本的に勘違いしているんじゃないかと疑った方がいいですね！

# 参考サイト
[Docker + Nginx + Laravel(PHP-FPM)な環境のログを整理する](https://zenn.dev/nagi125/articles/8f6d4639342f1fc644eb)
AWS Cloud9で実行するAWS CLIの権限について

# はじめに
AWS Cloud9でAWS　CLIの実行や、CDKのデプロイをすることが最近多かったため、実行権限と変更方法について記載していきます。
Cloud9が何なのかは以下をご確認ください。
あまり本筋ではないので、詳細は割愛しますが、一言でいうとマネジメントコンソール上で利用できるIDE環境です。
開発に必要なツールやSDKなどが予め設定されていて、非常に便利です。（実態は裏でEC２が動いています。）
>AWS Cloud9 は、ブラウザのみでコードを記述、実行、デバッグできるクラウドベースの統合開発環境 (IDE) です。これには、コードエディタ、デバッガー、ターミナルが含まれています。Cloud9 には、JavaScript、Python、PHP などの一般的なプログラム言語に不可欠なツールがあらかじめパッケージ化されているため、新しいプロジェクトを開始するためにファイルをインストールしたり、開発マシンを設定したりする必要はありません。Cloud9 IDE はクラウドベースのため、インターネットに接続されたマシンを使用して、オフィス、自宅、その他どこからでもプロジェクトに取り組むことができます。また、Cloud9 では、サーバーレスアプリケーションを開発するためのシームレスなエクスペリエンスが提供されており、リソースの定義、デバッグ、ローカルとリモートの間でのサーバーレスアプリケーションの実行の切り替えを簡単に行えます。Cloud9 を使用すると、開発環境をすばやくチームと共有し、ペアプログラミングを行って互いの入力をリアルタイムで追跡できます。

https://aws.amazon.com/jp/cloud9/

# Cloud9でAWS CLI等を実行する場合の権限
以下の公式マニュアルに記載がありますが、どうやらCloud9を呼び出している元のIAMユーザの権限をチェックし、
そのユーザがリクエストされたアクションを実行する権限があるかをチェック、なおかつAWSマネージド一時認証情報なるものをチェック、許可されたアクションであれば実行が許可されるようです。許可されないアクションは以下に記載されています。

>AWS Cloud9 は、呼び出し元の AWS エンティティ (IAM ユーザーなど) が、AWS におけるリクエストされたリソースに対してリクエストされたアクションを実行する許可を有しているかどうかをチェックします。許可がない場合、または明示的に拒否されている場合、リクエストは失敗します。
>AWS Cloud9 は AWS マネージド一時認証情報をチェックし、その許可が AWS 内のリクエストされたリソースに対するリクエストされたアクションを許可するかどうかをチェックします。許可がない場合、または明示的に拒否されている場合、リクエストは失敗します。AWS マネージド一時認証情報のサポート許可のリストについては、「AWS マネージド一時認証情報によってサポートされるアクション」を参照してください。

https://docs.aws.amazon.com/ja_jp/cloud9/latest/user-guide/security-iam.html#auth-and-access-control-temporary-managed-credentials

# 実施した内容とトラブル
## トラブル
Cloud9を作成したユーザ＆使用したユーザ：制限された権限を持つIAMユーザ
上記ユーザで、Cloud9からCDK Deployを実行したところエラーに・・・
権限が不足していることがわかり、Administrator Accessを保持するIAMロールにスイッチして
再度CDK Deployを実行しましたがうまくいかず・・・という状態が発生しました。

## 解決策
Cloud9の環境をスイッチロールしたIAMロールで作成し直したところ、解決しました。
なぜ解決したのかちょっとはっきりはわからないのですが、作成者の権限がある程度影響するのでしょうか？
現時点であまりわかっていません。

## 結局やりたかったこと
Cloud９でAdministrator Access権限のロールでAWS関連のコマンドを実行したい

# Cloud9でIAMロールの権限で、AWSCLI等のアクセスを行う方法
いろいろ調べていたら以下のブログにたどり着きました。
クラスメソッドさんいつもありがとうございます！

https://dev.classmethod.jp/articles/execute-aws-cli-with-iam-role-on-cloud9/

どうやら、上記に記載したAWSマネージド一時認証情報の機能を無効化し、Cloud9のEC2インスタンスに直接IAMロールをアタッチすればよいとのこと。
早速やってみました。
## ①AWSマネージド一時認証情報の機能の無効化
以下の通り、Cloud9のコンソールからPreferenceを開き、「AWS managed temporary credentials」を無効化します。
![名称未設定.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/584167/ef41e9c2-21bf-ba9f-5145-f345afb2edd4.jpeg)

## ②EC2へのIAMロールのアタッチ
あとは、対象のEC2にIAMロールをアタッチするだけです。
![名称未設定１.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/584167/5ff6bb9a-9f81-7ab7-cefa-c2b9bb9f734a.jpeg)

上記方法でリトライしたところ、無事CDKのデプロイもできるようになりました！

# まとめ
Cloud９は実行環境を簡単に作成できますが、実行権限については注意が必要だと思いました。
とはいえ、非常に便利なサービスなので、使い倒していきたいですね。
ネットワークの基本についてまとめてみる＃１

こんにちは。
エンジニアになるための基礎中の基礎であるネットワークに関して学んでいるので、
アウトプットのためにも、まとめてみようかなと思い、執筆してみます。

参考に読んでいる本は[こちら](https://www.amazon.co.jp/%E3%82%B9%E3%83%A9%E3%82%B9%E3%83%A9%E3%82%8F%E3%81%8B%E3%82%8B%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF%EF%BC%86TCP-IP%E3%81%AE%E3%81%8D%E3%81%BB%E3%82%93-%E7%AC%AC2%E7%89%88-%E3%83%AA%E3%83%96%E3%83%AD%E3%83%AF%E3%83%BC%E3%82%AF%E3%82%B9-ebook/dp/B07BFN6DF8/ref=sr_1_2?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=2W4Y04QR4LN0E&keywords=%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF+TCP&qid=1647520426&sprefix=%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF+tcp%2Caps%2C248&sr=8-2)の

![スラスラわかるネットワーク&TCP/IPのきほん](https://m.media-amazon.com/images/I/61Nl35JEWJL.jpg)
スラスラわかるネットワーク&TCP/IPのきほん

です。
少し要約しながらまとめて、感想とかも伝えられればいいかなと思います。


## ネットワークについて

コンピューター同士がつながると、（情報をやり取りする）だけでネットワークになります。
ネットワークの中でも最も規模が大きいのがインターネットです。

ネットワークは御存知の通り、メールを送ったり、チャットを送ったり、ファイルを共有したりで役立っている。

### サーバーとクライアント
またサービスを提供するコンピュータ（以下PCという）をサーバーといい
サービスを受ける側をクライアントという
例えば、Webページを開くときに、クライアント（自分の持っているスマホPC）がサーバーに情報をくれと要求して、
サーバーは「はいどうぞ」とサービスを提供し、クライアントは「ありがとう」とサービスを受け取る

ピアツーピアという形式もあり、２台のPCがサーバー側とクライアント側両方の機能をもってサービスを提供し合う
（インターネット電話など）

### パケット交換
昔の携帯はよくパケットと聞いたことがあるが、最近聞かない。
パケホとかよく言ったな　３G回線

パケットとはメールやファイルなどのデータを小さな単位に分けて送るのだが、その単位をパケットと呼ぶ。
送る側はデータをパケットにわけて送り、受け取り側はパケットを集めて１つのデータにする
![パケット交換方式（総務省）](https://www.soumu.go.jp/johotsusintokei/whitepaper/ja/r01/image/n1101250.png)

## コンピュータ・ネットワークの階層モデル
ネットワーク４つの階層があり、それぞれ役割をこなして、通信している

![ネットワークの階層](https://thinkit.co.jp/sites/default/files/styles/main_image_730x/public/main_images/5800_main_8.png?itok=23DSvTFH)

それぞれの役割を簡単にまとめると

 | 階層 | 役割 | キーワード |
|:-----------:|:------------:|:------------:|
| アプリケーション層   | WEBや電子メールなどサービスをユーザに提供する       | サーバー、クライアント、HTTP,SMTP、FTP     |
| トランスポート層 | アプリケーション層とインターネット層を仲介しデータを正しく届けるための手配をする      | TCP,UDP     |
| インターネット層  | 宛先のIPアドレスを手がかりに離れた場所のコンピュータまでデータを送れるようにする      | IPアドレス　IPv4、IPv6、ルーティング         |
| ネットワークインターフェース層  | ネットワークカードなどの通信用のハードウェアを制御してデータを転送する  | イーサーネット、無線LAN   |


ということになる。

## プロトコルってなに？

ネットワークを理解するのに重要なキーワードがプロトコルです。
日本語でいうと約束事です。

下記のようにプロトコルは組み合わせて使われます。
 | Webページ閲覧 |  説明 |
|:-----------:|:------------:|
| アプリケーション層 |HTTP：Webページを見るためのプロトコル | 
| トランスポート層 |TCP：データを確実に届けるためのプロトコル | 
| インターネット層 |IP：一般的な通信に使うプロトコル | 
| ネットワーク・インターフェース層 |イーサーネット：有線LANでデータを送るための規格 |

 

## 感想
この本はかなり初歩的な話がメインで図解がたくさんあるので、初心者向けです。
基礎を知りたい人にはもってこいの一冊かなっと感じました。
実際にブラウザの検証ツールでネットワークの項目をみるとより深くわかるような気がしています。


## まとめ　
今回はここまでの全体的な話までとします。

次回はアプリケーション層の詳細についてです。
Automation 360のOCR(ABBYY)で遊ぶ

#  はじめに
Automation 360のOCRはどれくらい使えるの？という質問を受けて、OCR(ABBYY)の設定を調べてみました。
半日くらいしか調べていませんが、わかった範囲の事を記録しておきます。
なお、私はAutomation Anywhere社の人間でも、ABBYY社の人間でもありません。Web上の情報とAutomation 360で動かしてみての結果であるため、まだまだ不十分の可能性があります。何かご指摘あればお願いします。


# OCR(ABBYY)を使うときに必須の設定

先達の有用な情報があります（感謝）。

https://apeople.automationanywhere.com/s/question/0D52t00000cx9zBCAQ/quick-tips-a360-ocr%E3%82%A2%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E6%97%A5%E6%9C%AC%E8%AA%9E%E3%81%AE%E8%AA%AD%E3%81%BF%E5%8F%96%E3%82%8A%E7%B2%BE%E5%BA%A6%E3%82%92%E5%90%91%E4%B8%8A%E3%81%95%E3%81%9B%E3%82%8B-%E3%83%97%E3%83%AD%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%97%E3%83%AD%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E5%88%A9%E7%94%A8?language=en_US

https://qiita.com/aaiso/items/499eae27706da9c7299d

重要な点は以下。
```
[RecognizerParams]
TextLanguage=JapaneseModern
```
※これがないと日本語英語混じりの文で英語が読み取れない

# それ以外の設定
まず、Automation 360はABBYY FineReader 12を同梱しています。このFineReaderの設定についてはABBYY FineReader Engine User's Guideを見ました。


## とにかく情報を多く取りたい
```
[PageAnalysisParams]
EnableTextExtractionMode = TRUE

[ObjectsExtractionParams]
EnableAggressiveTextExtraction = TRUE
DetectTextOnPictures = TRUE
```

https://support.abbyy.com/hc/en-us/articles/360004955899-EnableTextExtractionMode-prev-FlexiFormsDA-
ここに、V10のFlexiFormsDA指定のようにできるだけ情報を取りたいときはV12では上記の３つを指定してと書いてある。

ただ、EnableTextExtractionMode=TRUEを指定すると、表を検知しなくなります。
例えば以下の画像(情報処理試験の過去問)をOCRしたとき...
![ipa_sc_am_q18-19_table.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632535/11677224-edff-d454-e39f-bbc0c66fe727.jpeg)

~~~ md:EnableTextExtractionMode有効
問19イーサネットにおいて,ルータで接統された二つのセグメント間でのコリジョンの
伝搬と,宛先MACアドレスの全てのビットが1であるブロードキャストフレームの
中継について,通切な組合せはどれか,
コリジョンの伝搬
ブロードキャストフレームの中縷
ア
伝搬しない
中継しない
イ
伝搬しない
中継する
ヴ
伝搬する
中維しない
伝搬する
中耕する
~~~


~~~ md:EnableTextExtractionModeなし
問19イーサネットにおいて,ルータで接統された二つのセグメント間でのコリジョンの
伝搬と,宛先MACアドレスの全てのビットが1であるブロードキャストフレームの
中継について,適切な組合せはどれか,
	コリジョンの伝搬	ブロードキャストフレームの中析
ア	伝搬しない	中継しない
イ	伝搬しない	中組する
ヴ	伝搬する	中維しない
X	伝搬する	中掛する
~~~

表の形をできるだけ活かしたい場合は、EnableTextExtractionModeを指定しない方がよさそうです。

## 原稿が斜めになっていても読み取りたい
```
[PrepareImageMode]
CorrectSkew = TRUE
```
※ただしデフォルトがTRUEなので指定せずとも傾いた原稿はOKです。

##  画像の上の文字も読み取りたい
```
[ObjectsExtractionParams]
DetectTextOnPictures = TRUE
```

例えば
![a360_ocr_page.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632535/735a4a3b-d45a-df2b-f83c-b1ea57796249.jpeg)
こんな画像があったとして、一番上の
「フォーラムトピック
 ソリューションを検索、情報を共有、サポートを依頼できます。」
という部分は、
TextLanguage=JapaneseModern
だけでは読みとれませんが、
DetectTextOnPictures = TRUE
を入れると読めます。


## 縦書き日本語
これは特にini触らずともデフォルトで認識してくれました。

#  さいごに
正直、これはAutomation Anywhereの話ではないですね。
ABBYY FineReaderの設定は非常に多くて、全部は見切れません。何かおもしろい設定があったら、追加していきます。
shionさん主催のコワーキングスペース C作業場さんの勉強会がいい感じだったので、Rails Pluginを「リリースした話」

# この記事は

データベースを使って手っ取り早く（計算量は考えずに）ツリーダイアグラムを描きたいんだよって人向けに作ったRails Pluginを紹介する記事です。

![ActsAsTreeDiagram.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179979/05a6f43d-832c-327d-6678-b2c54034877f.gif)

* gem
    * [acts_as_tree_diagram | RubyGems.org | コミュニティのGemホスティングサービス](https://rubygems.org/gems/acts_as_tree_diagram)
* github
    * [smapira/acts_as_tree_diagram](https://github.com/smapira/acts_as_tree_diagram)

# やりたかったこと

mermaidもいいけど出来るだけ手作業はしたくなかったので

# 前提

* Rails
* ActAsTree

# やり方
```ruby
# Gemfile
gem "acts_as_tree_diagram"
```

```scss
// app/assets/application.scss
@import 'acts_as_tree_diagram'
```
```ruby
# model
class Animal < ApplicationRecord
	extend ActsAsTreeDiagram::ViewDiagram
	acts_as_tree order: 'name'
end
```
```html
<div id="act_as_tree_diagram">
    <ul class="tree">
        <li>
            <code>
                <%= link_to Animal.find(1).name, animals_path(Animal.find(1)) %>
            </code>
            <ul>
                <%= Animal.diagram_molecules_tag(where: { id: 1 }, path: animals_path).html_safe %>
            </ul>
        </li>
    </ul>
</div>

```

最後までお読みいただきありがとうございます。
もし、気に入っていただける内容ありましたら、「いいね」や「シェア」していただけるととても嬉しいです。
今後の活動の大きな励みになります！

# 参加した勉強会
[\[新宿御苑前\]がやがやと勉強する会(テーマ自由、初心者歓迎！) - connpass](https://c-sagyoba-benkyoukai.connpass.com/event/234981/)
結論から報告するのは難しい

## 「結論から報告しろ」

様々なビジネス書にもドヤ顔[^1]で書かれていますし、その様に報告してもらいたいのはその通りですが、この発言をすることによって結論から報告してもらえるようになったことはあまりない気がしています。

皆さんや皆さんの周りの人はどうでしょうか…？

少し客観的にこの話の構造を考えると『自転車に乗れない人に **「自転車に乗れば目的地に簡単に早く着くよ」** というアドバイスをしている』様な構造に思えてきます。

できる人から見ると当然できて然るべきなのでカジュアルにアドバイスをしていますが、できない人から見ると何が悪いかさっぱり分からないからできない。
トヨタ式なぜなぜで詰めても、本人の中にそれを実行するための何かがないため、メンタルが傷む事はあってもカイゼンされることはない。

…ということで今回は「結論から報告する」ために何が必要かを探りつつ訓練法を紹介してみたいと思います。


## そもそも結論とは？

> ［名］(スル)
> １ 考えたり論じたりして最終的な判断をまとめること。また、その内容。「調査の―を出す」
> ２ 論理学で、推論において前提から導き出された判断。終結。断案。⇔前提。

引用元：[goo辞書](https://dictionary.goo.ne.jp/word/%E7%B5%90%E8%AB%96/)

調べてみたらよく分からなくなりましたが、日常業務で登場する「結論」は以下の様に感じます。

1. 自分と相手の間に何らかのトピックがあって
2. その中で、報告する時点で一番重要なこと

こちらの想定で考察を進めてみましょう。


## 『思った通り』のトピックの認識が同じ奇跡

多くのケースでは、**『そもそも何らかのトピックの認識が自分と相手で異なっていて』** 自分なりに一番重要と思っていることを伝えたにも関わらず **『結論から報告しろ』** と一蹴されている様に感じます。

逆に言うと、トピックが **『思った通り』** 伝わっている人からの報告は必ずしも結論から報告していないかもしれないけれども目くじらを立てて『結論から報告しろ』と言わなくてもなんとなく修正されていってる気がします。

ベン図で表すとこんな感じでしょうか。

![00-topics.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136165/af26f455-b07a-3d69-9515-7dc8d4a1e49d.png)

あまり意識することはないと思いますが、わたし達の会話は経験によって補われている部分が大きいです。
類似した案件を経験している人には話が伝わる可能性が上がる一方、未経験の新人には話が伝わる可能性が下がっていると思います。
にも関わらず、聞く側は当然理解できると思って話を聞いてしまいます。当然理解したと思っていれば、その場で質問が出ることはないです。問題が出た際に「なんで聞かなかったの？」と問い詰めると「質問できる程理解できていなかった」というところまでがテンプレ[^2]かと思います。

話す方も聞く方も話が伝わることはむしろ奇跡と思っておいた方が余計な軋轢を生まなくてよいかもしれません。


## トピックの理解と整理（二次元整理法）

とは言え、令和の世の中のIT業界で毎回奇跡が起きることを祈って仕事をするのはあまりセンスのよい行いとは言えないでしょう。
ということで、トピックの理解に有効と思われる方法を紹介してみたいと思います。

(二次元整理法)
- エクセル方眼紙（各セルの横幅を縮めて方眼紙状にしたエクセルシート）を用意する
    - スプレッドシート等、オンラインで同時編集できることが望ましい
- トピックに含まれる要素を箇条書きする
- ホワイトボードの様に縦横自由に使う
- 内容が近いものは近くに書く

(サンプル)
![10-00-方眼紙.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136165/a4c87ffa-40a2-723b-7899-b1102ce85dc0.png)

相手から依頼を受けた時点で依頼内容を細かい箇条書きに分解して書き出し、縦横に配置して整理する方法です。
『１次元ではなく２次元で考える』、『簡単に編集ができる』の２点を満たせればエクセルやスプレッドシートである必要もありません。[^3]

長々と前フリを書いて仰々しい名前を付けた[^4]割には「エクセル方眼紙を使おう」しか言ってないのですが、現状が上手くいっていないのであれば何かカイゼンしないといけませんが、大変なことは長続きしないので簡単にできることをやりましょうという考え方ですね。

自転車には練習をしないと乗れるようにならないです。「練習していたらある日乗れるようになったが、結局何で乗れるようになったか分からない」という経験もあるかと思いますが、トピックの理解と整理も同じく地道な訓練によって、 **ある日突然劇的にカイゼンされる性質のもの** だと思っています。


## まとめ

意識の高いビジネス書を読んだり、先輩に指摘されたりして「結論から報告」することを考えるのは必要なことだと思いますが、トピックを理解・整理して結論にたどり着くには訓練が必要です。

今回は訓練の手法として二次元整理法を紹介してみました。慣れてくれば脳内でも整理ができることが増えて、いちいち書き出さなくても「結論」を見繕うことができるようになりますし報告以外でも役に立ちます。もしよろしければ試してみてください。

[^1]: ドヤ顔の文章にイラッとしたのが個人的結論なので最初に書きました。上から目線で言うのはやめましょう。
[^2]: アンチパターン。気をつけましょう。
[^3]: マインドマップツールもあるのですが、書き方が制限されるので個人的には合いませんでした。
[^4]: 名前をつけた方が浸透しやすいらしいので付けてみました
猫に学ぶデータサイエンス

データに関する記事を書こう！

https://qiita.com/official-events/30be12dd14c0aad2c1c2

テーマ2『データに関する記事を書こう！』参加記事です。

# 猫に学ぶこと

猫に学ぶことには、猫が得意なことと、人間が不得意なことがあるかもしれない。

人間が計算機に勝てる３つのこと。忘れる、あきらめる、やめる

https://qiita.com/kaizen_nagoya/items/49dc709d289d22846044

人間が猫に勝てるかとはなんだろう。

例：道具（機械）を作って操作する。言葉を使って伝達する。猫に餌を運ぶ。

猫が人間に勝てることはなんだろう。

例：じっとしつづけられること。何かの気配を感じること。知らんぷりができること。

最後の知らんぷりができることは、人間が計算機に勝てることと相似かもしれない。

# 猫が得意なこと

## じっとしている

じっとしているデータは、体の主な部分が数mm以上動いていない状態が何秒続いているかのデータとして記録できる可能性がある。

複数台のカメラがあれば、実現可能だろう。

実際に、猫観察Webカメラがどれくらいあるかは未調査。

RaspberryPi 4 上の FreeBSD で USB接続のWebカメラ + OpenCV ネコの顔抽出を試す

https://qiita.com/s_mitu/items/b6209a4a3cd70f264079

raspberry pi3で猫監視カメラを作る全体の流れ

https://qiita.com/masamekko/items/98c4333302b3792b1698

Jeston Nano 2G で猫を識別して自動撮影するまで

https://qiita.com/kwin786/items/4112a25eb11c7c51ad4c


対話型LINE BOTの作り方002 (猫の写真を送る)


https://qiita.com/mahiroaug/items/50efc5ab7ff084aa06cc

「LINE Messaging API + Googleスプレッドシート + 猫画像API」による１問１答ではないチャットボットを作りました

https://qiita.com/tatsuya1970/items/5a2e8cb31f77eb0340df

猫好きエンジニアのIoT obnizを使った「遠隔ご飯あげマシーン」

https://qiita.com/kakakaori830/items/099493aae7d7b1e71765

WebRTCで常時接続のペットカメラを作ってみた(Nuxt.js + Python + Firebase + SkyWay + ラズパイ)

https://qiita.com/akinko/items/86e004cb727806c31cf7

### じっと見つめる

じっとしている場合には
　寝ている
　じっとみつめている
　何かを目でおいかけている
　しっぽだけうごいている
などの状態がある。

### 動いている車を見て止まる

猫の交通事故の何割かが、車道で動いている車を見て猫が止まって跳ねられたという状況があるらしい。動いている車を見て止まる性格をどう変えていけるか未調査。

猫の交通事故死データをどこかで蓄積してくださると助かる。


猫中心設計。仮説（25)

https://qiita.com/kaizen_nagoya/items/d409c1185df30f660adc

## 知らんぷり

猫に話しかけても、知らんぷりされたことはないだろうか。
猫は、自分が興味がないこと、自分に脅威が及ばないことは知らんぷりするらしい。知らんけど。

知らんぷりの画像による自動判定はむつかしそう。なにをもって知らんぷりをしたかどうか。
話しかけた音、身振りとの、視線と体の連動性で判定すればいいのだろうか。

## 素早い動き

カメラとモータを連動させて動きに追随できるようにする。

## 鳴く

マイクで鳴き声を取得する。

## 反応
### 音に反応

複数のカメラのうち、１台は音源を向くようにする。

　　猫に反応
　　鳥に反応
### 気配に反応

気配とは何か。電磁環境の違い、重力場の違い、特定の周波数の音の違いなど調べる。

# 参考資料

【動物会話】カラスとの遭遇に向けて「カラスにオウム返し」作ってみた♬


https://qiita.com/MuAuan/items/81d65752d0cf90104175

OpenCV 3で犬と猫を分類できるように学習してみる（BOW: Bag Of Visual Words, KNN: k-Nearest Neighbour, k-meansクラスタリング, KAZE）

https://qiita.com/hitomatagi/items/883770046de5746a5deb

私がデータ分析に関して「教えていただいたこと」と「大切だと実感したこと」

https://qiita.com/kazuo_reve/items/ce39ccb23d2dc501c49f

## 自己参照

「データサイエンスのための統計学入門 ―予測、分類、統計モデリング、統計的機械学習とRプログラミング」Peter Bruce、Andrew Bruce。dockerで機械学習(72) with R (2)

https://qiita.com/kaizen_nagoya/items/479e3283a2d030726254

データサイエンティストへの５つの門。あなたはいくつの門をくぐりましたか？統計と確率(8)

https://qiita.com/kaizen_nagoya/items/ee5fa7b2a7f7c2b450d4

データサイエンティストの気づき「勉強だけして仕事に役立てない人。大嫌い！」。『それ自分かも ? 』ってなった。

https://qiita.com/kaizen_nagoya/items/d85830d58d8dd7f71d07




＜この記事は個人の過去の経験に基づく個人の感想です。現在所属する組織、業務とは関係がありません。＞

# 文書履歴(document history)
ver. 0.01 初稿 　20230505

## 最後までおよみいただきありがとうございました。

いいね　💚、フォローをお願いします。

####  Thank you very much for reading to the last sentence.

Please press the like icon 💚　and follow me for your happy life.
cronでは設定できない特定時間の実行除外方法

～cronでは細かく設定できない部分をシェルスクリプトによって、実装したのでその記録～
# 背景
cronによるジョブ（シェルスクリプト）の定期自動実行は最もメジャーな手段であると思う。  
ただ、cronでは特定時間だけ実行を見送るといった設定が難しい。  
毎日5分おきにジョブを定期実行しているとする。
時間単位（ex.15時～16時）での除外であれば、crontabの時に「0-15,16-24」と設定すれば良い。   
しかし、15時30分から16時00分はジョブ実行をしないといった設定をcrontabに指定できない（私の調べた限り設定方法が見つからなかった）。  
___『ある時間帯の何分間だけ除外したい』___ といった場合はどうしたら良いの！？   
___『起動するジョブ（シェルスクリプト）で制御するしかないでしょ！』___ ということでスニペットレベルで作成してみたので、その記録をここに残します。

# 実装内容
起動時間範囲を記載した設定ファイル（time.csv)を読み込み、現在時刻がこの起動範囲であれば、「Hello!」と出力し、それ以外であれば、「Out of time」と出力するシンプルなスニペット。

```bash:echo_Hello.sh
#!/bin/bash
readonly configFile="time.csv"

declare -a csv_data

currentTime=`date +"%H%M"`

while IFS=, read -a csv_data;
do
	echo "From=" ${csv_data[0]}
	echo "To=" ${csv_data[1]}
	echo "currentTime=" ${currentTime}
	if [ $currentTime -ge ${csv_data[0]} -a $currentTime -le ${csv_data[1]} ]; then
		echo "Hello!"
	else
		echo "Out of time!"
	fi
done < "${configFile}"
```

```csvs:time.csv
0000,1530
1600,2400
```

## シェルスクリプトについて補足
- [readonly](https://xtech.nikkei.com/it/article/COLUMN/20060227/230867/)は、変数を読み込み専用とする指定。設定ファイルを誤って書き換えないように配慮してみました。
- [「declare -a」](https://genzouw.com/entry/2019/01/30/081600/688/#)は、配列として変数を定義する指定。

## 設定ファイル（time.csv）の内容
第１列名が、起動させたい下限時間  
第２列名が、起動させたい上限時間

# 実行方法
crontabで「echo_Hello.sh」定期間隔で実行するように設定すれば、15時30分から16時00分以外で「Hello!」と出力されてそれ以外であれば「Out of time」と出力される。
crontabに5分おきに実行する設定例
```bash:5分おきに実行する設定例
$ crontab -e
# 5分おきに実行
*/5 * * * * ./echo_Hello.sh
```
# サンプルスニペットソース
このスニペット自体は、活用できる機会は少ないかもしれないけど、[私のGitHubリポジトリ](https://github.com/LittleBear-6w6/shell_snippets/tree/main/determine_startupTime)で公開しています。

# 参考文献
- [日経XTECH](https://xtech.nikkei.com/it/article/COLUMN/20060227/230867/) , 2022/03/26アクセス時点
- [ゲンゾウ用ポストイット](https://genzouw.com/entry/2019/01/30/081600/688/#) , [@genzouw](https://twitter.com/genzouw) , 2022/03/26アクセス時点
- [プログラムの超個人的なメモ](https://dk521123.hatenablog.com/entry/2021/08/13/120956), 2022/03/26アクセス時点
Goのポインタを図解で理解する。

# Goのポインタについて、よく分からなかったので、図を交えて理解してみました。

下記のようなコードがあるとします。

```go
package main
import "fmt"

func main() {
	var name = "taro"
}
```
メモリ上では下記のような概略図となっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547556/dbe1e3d1-7b54-ee4a-d953-36556d710f95.png)

型の前に*がついている場合「ポインタ変数」となります。
ポインタ変数には、メモリのアドレスが格納されています。
```go
var pv *string
```

上記の場合のpvに格納されたアドレスのメモリにはstring型のデータが格納されているという意味となります。

イメージは下記の図のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547556/3aa394e4-a7a0-e32b-15bb-7365b405d583.png)
当然、下記のような式はコンパイルエラーとなります。
```go
package main

import "fmt"

func main() {
	var name = "taro"
	var pv *string

	pv = "hello" //ここでコンパイルエラー
}
//pvにはメモリのアドレスが格納されるのでstring型のデータをを直接入れることはできない。
```

変数の前に&がついた場合は、その変数が指し示すメモリのアドレスを参照します。

```go
package main
import "fmt"

func main() {
	var name string = "taro"
	var pv *string = &name
}
```
メモリ上では下記のような概略図となっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547556/2af8c1a4-825c-e8ff-d864-40077ed67f88.png)


また、下記のコードもコンパイルエラーとなります。

```go
package main

func main() {
	var name = 123
	var pv *string

	pv = &name //ここでコンパイルエラー
}
//nameが格納されているアドレスを仮に11111111とする。
//pvには&nameにより、name変数のメモリ（つまり11111111）が格納されようとしている。
//pvは本来、string型の値を持つメモリのアドレスしか格納できない。(var pv *string)
//しかし、int型の値を持つメモリのアドレスを入れようとしている。(pv = &name)
//よって、エラーとなる。
```

ポインタ変数の前に*をつけると格納されたアドレスのメモリに格納された値を参照します。



下記のようなコードがあるとします。

```go
package main
import "fmt"

func main() {
	var name string = "taro"
	var pv *string = &name
	fmt.Println(*pv)
}
```
```
>> taro
```

メモリ上では下記のような概略図となっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547556/dc547529-67b5-6949-b6ea-b5439dc561fc.png)


以下のようなコードの場合は、関数外のnameには影響しません。

```go 
package main

import "fmt"

func main() {
	var name string = "taro"
	rename(name)
	fmt.Println(name)
}

func rename(name string) {
	name = "yamada" + name
}
```

```go
>>taro
```
メモリ上では下記のような概略図となっています。
※図内の関数はrename関数のことです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547556/5ff47916-5c4d-971a-a56b-7a23858fad4a.png)
以下のようなコードの場合は、関数外のnameの値が書き換わります。

```go
package main

import "fmt"

func main() {
	var name string = "taro"
	rename(&name)
	fmt.Println(name)
}

func rename(name *string) {
	*name = "yamada" + *name
}
```

```
>> yamadataro
```
メモリ上では下記のような概略図となっています。
※図内の関数はrename関数のことです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547556/278f8291-c0fc-5e64-0b36-c7a528446904.png)

以上となります。

## 姉妹記事

https://qiita.com/sho_U/items/131de2c3295641e26a10

## 参考にさせていただいた記事

とってもやさしいGo言語入門
https://zenn.dev/ak/articles/1fb628d82ed79b#%E6%A7%8B%E9%80%A0%E4%BD%93

ポインタを図で理解する
https://christina04.hatenablog.com/entry/pointers-in-golang

ありがとうございました。
URLとドメイン(学習中・メモ)

・URL
　インターネット上にあるホームページやファイルの位置や情報を示すもの。
![original.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600460/b306359f-d946-a156-c7d2-b00f4b04f325.jpeg)
以下よりURLに含まれている要素の説明

・プロトコル
　対象となる事項を実行するためのルールのこと。「インターネット上で通信をするとき、このルールに従いましょう」という取り決めのことを指します。

　プロトコルの種類
  ・http…WebサーバーとWebブラウザ間でデータを送受信する。
  ・https…「http」にデータ暗号化機能を付与したもの。
  ・mailto…メール送信先を指定する。
  ・ftp…ファイルをダウンロードする。

・スキーム
 　前述したプロトコルというルールを規定するもの。

・ホスト名
　ホスト名は、ネットワークに接続されたホスト（機器やサーバー）の名前を指す。

・ドメイン
　IPアドレスを人間が読みやすいように置き換えたもの。
 ドメインには、更に細かく左から順に「サードレベルドメイン」「セカンドレベルドメイン」「トップレベルドメイン」の3つに分けられます。

・サードレベルドメイン
 　セカンドレベルドメイン以下に属しているドメイン。
　
・セカンドレベルドメイン
 トップレベルドメインの種類によって、どのようなドメインがセカンドレベルドメインになるかは変わります。

・トップレベルドメイン
 ドメインの一番最後にある「jp」「com」「net」などの文字列のこと。
・ディレクトリ
　ディレクトリは、サーバー内のフォルダ名と位置を表している。
　
・ファイル名
　URLの末尾に配置される一番小さなファイルを表します。

間違いやアドバイスなどあれば、遠慮なく言って欲しいです。


参考文献：https://ferret-plus.com/8736?page=3
Web3.0とDAOについて調べてみた

## 結論

Web3には危険もある。
しかし、盛り上がりがすごくて希望ばかり！

---

### ターゲット

- 「Web３ってなに？」な人
- 仮想通貨やWeb３を気になっている人
- DAOも気になっている人

---

### 筆者

なる
サーバーサイドエンジニア
とにほめLT会の主催者

https://tonihome.connpass.com/

---

## Web3.0とは？

---

#### そもそもその数字は何？

---

#### Web1.0

![ArCeE8lBCFgMoCh1647763239_1647763261.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498701/5cc6088a-6616-96ba-9d78-ea57fab857bb.png)


---

- 1995 ~ 2005年
- ホームページ時代
- **一方向**

- **読み取り専用時代**

---

#### Web2.0

![Social Media_Isometric.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498701/e5c1a04f-9504-24b7-9a0e-1fb935000e5a.png)

---

- 2005年 ~ 2018 年
- クラウド・SNS時代
- **双方向**
- 中央集権管理 & ユーザーの参加

---

### Web3.0

![Network _Flatline.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498701/1f015998-5774-3d4c-f267-42f2bff4a9f2.png)

---

- 2018年 ~
- ブロックチェーン時代
- **多方向**
- 非中央集権
    - 管理者がいない

---

### 有名な事例

---

![1_M5JgwC4zOcX0LaQsLd1fkw.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498701/2e723e35-9ca9-8775-ff8e-a8d988527763.png)
出典元： [Medium](https://medium.com/@essentia1/why-the-web-3-0-matters-and-you-should-know-about-it-a5851d63c949)

---

#### Dappsって何？

---

- **D**ecentralized **App**lication**s**の略称
- ブロックチェーン上でソフトウェアを動作させる「スマートコントラクト」の応用
- 分散管理によって常に稼働し続けられる

---

#### Dappsの基盤はイーサリアムが主流

---

#### イーサリアムって仮想通貨の？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498701/1c7655bf-02d6-b1b6-7897-d2e7237dd834.png)

---

#### ビットコインとイーサリアム比較

- どちらも仮想通貨として公開
- ビットコインは送金や決済に特化
- ビットコインの仕組みを活用したものがイーサリアム

---

### どんな影響がありそうか？

---

#### OSからの解放

![OS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498701/31551e8f-d3d8-2e69-dd1a-c3ca64e5918d.png)

---

```
特定のOSやデバイスを介さずともアプリやサービスを利用
OSによって使用可否が決められることが無くなるかも
```

---

#### システム障害からの解放

![障害.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498701/50b8e57a-493f-5443-94fc-fc92d2ee3d57.png)

---

```
中央集権型: サイバー攻撃を受けやすい問題点
分散管理型: サービスの提供基盤が大幅に安定
```

---

### 情報統制からの解放

![情報統制.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498701/b1bdb98f-5b5e-d015-523e-5072f2571f3c.png)

---

```
とある国では情報統制がファイアウォールで行われてきた
ネット検閲システムを潜るためのVPNなどの活用
どこからでも自由なコンテンツへのアクセスを技術的に可能に
```

---

## 最近の盛り上がりDAO

---

### DAOとは？

---

#### なんの略？

**D**ecentralized **A**utonomous **O**rganization
（分散型組織）

---

#### これまでと何が違うのか？

株式会社とは全く違う`組織形態`

ブロックチェーン上で世界中の人々が協力して管理・運営される組織
→ 社長なし、株主なし、入社なし

---

#### どんなものがあるか

資金量が最大のDAO:
分散型取引所であるユニスワップのDAO（約3300億円）

---

#### 現状

- 資金の総額
    - 2021年1月: 約440億円 → 9月中旬: 約1.8兆円に
- 2021年12月のDAOメンバーおよびトークン保有者の合計
    - 約130万人(年初から130倍)

---

## 詐欺も増えてる

---

- 2022年1月：　約4億6000万円の被害報告
- NFTと暗号通貨アルトコインの投資詐欺の増加
- 把握されていないものを合わせると甚大。。。

---

## 結論

希望がたくさん！
法律や制度が追いついてきた時の世界が楽しみ！

---

個人開発について発信しています！
Twitterもフォローください👏
[@1026NT](https://twitter.com/1026NT)
なる

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/498701/3db40e7d-3213-be1f-8650-c6ad5dff69c9.jpeg" width="300px">
Pipenvでの基本的な環境構築

Pythonパッケージの管理にPipenvを利用しています。

今回は、Pipenvで環境構築を行うときに、よく使用するコマンドをまとめました。


[公式ドキュメント](https://pipenv-ja.readthedocs.io/ja/translate-ja/basics.html)


## 前提

- `pyenv`と`pipenv`がインストールされていること。

## 自分が環境構築をするとき

### 作業ディレクトリのpythonのバージョンを指定する

pyenvを使ってバージョンの切り替えを行います。

```shell
$ pyenv versions  # 使用できるインストール済みのPythonのバージョンが表示される
```

上記コマンドを打って表示されたバージョンの中から選択します。

```shell
$ pyenv local 3.9.1  # 現在のディレクトリでバージョンを指定する
```

これで、コマンドを実行したディレクトリに、`.python-version`というファイルが生成され、バージョンが書き込まれています。

```text: .python-version
3.9.1
```

### pythonのバージョンを指定してpipfileを生成する

最初にpythonのバージョンを指定します。

```shell
$ pipenv --python 3.9  # 3.9でpipfileが生成される
```

これで、直下に次の2つのファイルが生成されます。

- `Pipfile`: インストールパッケージの情報がかかれたもの
- `Pipfile.lock`: インストールしたパッケージの細かいバージョン、ハッシュ、依存関係がかかれたもの

この2つを、他の人に共有すると、同じ仮想環境を再現することが可能になります。

### パッケージをインストールする

基本のインストールコマンド

```shell
$ pipenv install google-cloud-tasks
```

インストールしていくと、上記の`Pipfile`と`Pipfile.lock`が更新されていきます。

#### バージョンを指定してインストールしたい時

```shell
$ pipenv install "google-cloud-tasks==1.5.0"
```

#### Pipfileを書き換えてインストールしたい時

Pipfileを直接書き換えたのち、下記コマンドを打つことでもインストール可能です。

これであれば複数のパッケージを一度にインストールすることも可能です。

```text:Pipfile
[packages]
google-cloud-tasks = "==1.5.0"
```


```shell
$ pipenv install
```

#### 開発環境にのみインストールする

```shell
$ pipenv install flake8 --dev 
```

### パッケージをアンインストールする

```shell
$ pip env uninstall google-cloud-tasks
```

### requirements.txtを生成する

```shell
$ pipenv lock -r > requirements.txt
```

GAEでPythonのパッケージをインストールするには、`requirements.txt`が必要なため、よく使います。

以上で、基本的な仮想環境の定義は完了です。

この後、基本的に下記のファイルをgitに上げています。

- `.python-version`
- `Pipfile`
- `Pipfile.lock`
- ` requirements.txt`

-----

## 他の人が作った仮想環境を再現したい時(既存のPipfileとPipfile.lockから仮想環境を再現したい時)

`Pipfile`と`Pipfile.lock`のあるディレクトリで下記コマンドを実行します。

```shell
$ pipenv sync
```

上記コマンドは、`Pipfile.lock`に従って仮想環境を再現します。


他にも、再現するためのコマンドは、

```shell
$ pipenv install  # Pipfileからインストール
```

```shell
$ pipenv update  # Pipfileからインストールし、アップデートがあればアップデートする
```

がありますが`sync`であれば、同じ環境が再現でき、かつ、依存関係の確認がないため動作が早いです。

もし、`Pipfile`がなく、`requirements.txt`しかない場合は、下記コマンドで`requirements.txt`からpipenvでインストールすることもできます。

```shell
$ pipenv install -r requirements.txt
```

## pipenv installした後でやり直したくなった時

```shell
$ pipenv --rm  
```

私は、エラーなどで環境構築に失敗した場合、上記コマンドを打ったのち、`Pipfile`と`Pipfile.lock`の差分をStashして、再度パッケージのインストールをやり直します。

## PycharmでPipenvを利用するには

弊社ではPycharmを利用しているメンバーも多いです。

環境構築を行うディレクトリでプロジェクトを開き、`Preference`の`Python Interpreter`から追加します。

- Base Interpreterに使用したいpyenvのpythonをおく
- Install package from Pipfileにチェックを入れる

これをするだけで、直下にある`Pipfile`を参照して仮想環境の構築をおこなってくれます。便利！

## あとがき

環境構築はたまにやると「どうやるんだっけ…」とよく忘れて毎回Google先生に質問してしまっているので、よく使うコマンドをまとめました。

業務であれば、上記コマンドがあれば大抵対応できます！
SeleniumBasicのインストール　エクセルで気軽に流行りのRPA② 

# はじめに

前回、SeleniumBasicを使ったRPA開発事例を紹介しました。今回は、インストール手順をまとめます。次回、サンプルプログラムを作成してみます。
初回のインストールでは、「SeleniumBasic」の本体とブラウザを動かす「WebDriver」（今回はChromeDriver）の2つダウンロード・インストールが必要なので、やや手間ですが、30分以内に終わる作業になります。

# 使うツールと環境

PC：Windows10
Office：Microsoft Excel 2019
ブラウザ：Google Chrome最新版
SeleniumBasic

# インストール手順
1. SeleniumBasicをダウンロード
・下記、URLの中部「Download」の「Release page」をクリック。
・遷移後のページの「SeleniumBasic-2.0.9.0.exe」をクリックして、インストーラーをダウンロード。
https://florentbr.github.io/SeleniumBasic/
1. SeleniumBasicをインストール
・基本的にOKで進めればインストールされます。
1. .NET Framework 3.5のランタイム
・下記、URLから.NET Framework 3.5をダウンロードして、インストール。
https://www.microsoft.com/ja-jp/download/details.aspx?id=21
1. Chromeのバージョンを確認
Chromeを開き、URL欄に「chrome://version/」を入力し、Google Chrome横の数字をメモ。（下記画像の99.0.4844.74）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119135/6fb661be-4c7f-5d86-b64c-99aaa0217ea9.png)
1. ChromeDriverのダウンロード
下記、URLを開き、上の番号と同一のChromeDriverをダウンロードする。※完全に一致していなくとも最初の2桁があっていればOK。
https://chromedriver.chromium.org/downloads
1. ChromeDriverの格納
SeleniumBasicをインストールされている下記フォルダに、ダウンロードしたChromeDriverをコピー。
C:\Users\{Windowsユーザ名}\AppData\Local\SeleniumBasic
(「%LOCALAPPDATA%\SeleniumBasic」でも開けます)
※隠しフォルダになっています。また、古いバージョンのドライバーが入っているので上書きして大丈夫です。
1. VBAの参照設定
EXCELを開き、「開発」→「Visual Basic」を開く。
メニューバーの「ツール」→「参照設定」を開くとライブラリを選択画面が開かれる。
「Selenium Type Library」にチェックを付けるとSeleniumBasicが使えるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/119135/bcbc07b2-0d73-89a4-8233-3ae7486384eb.png)
※EXCELを開いたときにメニューに「開発」がないときは、メニューの「ファイル」→「オプション」から、「リボンのユーザー設定」からメインタブに開発を追加してください。

# 補足：ブラウザについて

今回は、Google Chromeを使用しましたが、他のブラウザを使うことも可能です。EdgeやFirefoxなども同様にバージョンにあった、WebDriverをダウンロードしてください。

# よくあるトラブルシューティング

* ChromeとChromedriverのバージョン
Chromeのバージョン更新は自動のため、最新になるのにタイムラグがあるようです。
「chrome://version/」からバージョンを確認して、ダウンロードしてください。
* .NET Framework 3.5のインストール忘れ
これをインストールし忘れることが多々ありました。
環境特にWSUSを導入しているドメイン内だとインストールできないこともあるので、ネットワーク管理者に相談してください。
* 参照設定
VBAの参照設定は、新規ファイルだと初期化されてしまうので、都度読み込みの設定が必要です。
人材系企業・採用業務のRPA事例～エクセルで気軽に流行りのRPA①

# はじめに

私は人材系企業の社内SEとして、RPA開発を行っていました。流行り言葉となっているRPAですが、高額なシステム、優秀なシステムコンサルタントによる分析・開発が必要と言われています。
しかし、採用業務に使うシステムは、一般にWebアプリケーションが多いです。そのため、ブラウザ自動化ツールの活用により、有償のソフトウェアを使わなくてもRPA導入ができる余地があります。
今回は、みんな大好き？エクセル＋SeleniumBasic(詳細は後述)を使うことで気軽（≠簡単）にRPAを試すことができることを紹介します。
実際に業務で使用したツールと開発した事例を紹介し、どのようなことができるかをお伝えします。
続編では、[②インストール方法](https://qiita.com/Rui010/items/0a226c26fe44e56c9c39)、③実際のプログラム例　を執筆しようと思います。

:::note warn
お手軽＝サーバの準備等不要、特別なツール不要、業務用PCならほぼ全員が使える
という意味で書いており、RPA開発(≒システム開発)には、業務知識だけでなく、プログラミング(VBA)の知識が必要になります。
:::

# 使うツールと環境

* PC：Windows10
* Office：Microsoft Excel 2019（※VBAが使えれば、バージョンは問わないはずです）
* SeleniumBasic
公式サイト:https://florentbr.github.io/SeleniumBasic/

# SeleniumBasicとは？

そもそも、「Selenium」と呼ばれるブラウザの自動化ツールが存在します。SeleniumBasicはそのSeleniumをExcelVBAやVB.Net、VBScriptで利用できるライブラリ（プログラム集のようなもの）になります。
元々、SeleniumはWebアプリ等のブラウザテストを自動化させるために使われており、Java、Python、C#などですでに開発されていました。
SeleniumBasicでは、SeleniumをEXCEL VBAで開発することができるため、下記のメリットがあります。

* ユーザの各PCで実行可能（EXCELがインストールされていれば良い）
* VBAなので、既存業務に組み込み可能（Webサイト操作による部分の自動化のみ追加）
* VBAの延長なので、簡単？（と思われている）

これらは、裏を返すとデメリットになるのですが、「気軽」という部分で選択されていました。
また、SeleniumBasicとSeleniumはAPIが同じまたは似ているため、情報量の多いSeleniumを調べれば、同様のことができるため、調べながら進めるにはちょうど良いかと思います。

参考(Seleniumブラウザー自動化プロジェクト): https://www.selenium.dev/ja/documentation/

# 人材系企業、採用業務での事例

1. 取引先企業の調査
人材業界に関わらずですが、取引先をインターネットを使って調査をすることがあるかと思います。例えば、Googleで企業名や代表者名を調べて実存するか調べたり、ニュースサイトで検索して事件や行政処分等を受けていないかなどの調査をすることがあると思います。
この業務を効率化するために、
:::note
* EXCELに取引先情報を入力
* 各取引先ごとにGoogleやニュースサイトで検索
* 結果のスクリーンショット画像を取得
* フォルダに保存する
:::

RPAを開発しました。調査担当者は、画像を確認し、懸念点がありそうな企業に絞って追加調査することになり、大部分の無問題の企業の調査時間の短縮になりました。
2. ATS応募者の自動スクリーニング
リクオプやジョブオプなど、ATS(※1)を導入している企業の場合、応募者データを一覧で出力できます。また、応募者が多いと、学歴や希望シフトなどで1次スクリーニングすることがあると思います。また、その1次スクリーニングはEXCEL関数を組んだシートで簡単にできるようにしていることも多々あると思います。
毎日、ATSからダウンロードして、その後の処理を自動化するために、

:::note
* ATSへのログイン
* 応募者データのダウンロード
* スクリーニングツールへの貼り付け
* スクリーニングシートを各店舗ごとに分割
* メール作成(※2)
:::

のRPAを開発しました。面白くない日々のルーティンを自動化させるのは、RPAの強みだと思います。
※1)ATS=Applicant Tracking Systemの略で、採用管理システムのこと
※2)メール作成の自動化はWindowsAPIを使い、Outlookの自動化で対応
3. OMRの自社サイトからメディアに自動出稿
最近流行りのOMR(※1)を実践されている企業の場合、自社の採用情報はすべて自社採用サイトに掲載されていると思います。ただ、自社サイトだけでは採用ができないため、バイトルやタウンワークなどにも広告掲載していると思います。そのときに、自社サイトからデータを出力して、必要な加工をして、媒体社の担当者にメールするということをしていると思いますが、2と同様に開発をしました。
※1)OMR=Owned Media Recruiting。自社採用サイト（オウンドメディア）を通じた採用活動のこと。求人媒体によらず直接採用を行う手法。
4. 競合調査
時給によって応募者の総数が変わってくるため、特に派遣会社は競合調査を行っていることが多いです。そのやり方は、各求人メディアを開いて、職種や業種で検索して、ページをコピーして、時給のみ取り出していくようなことをしていることもあります。ブラウザ自動化ツールのSeleniumBasicを使えば、

:::note
* サイトを開く
* 職種や条件で検索
* 検索結果のページから時給部分だけ抜き出す
* 一覧表にする
:::

という一連の流れを自動化することが可能です。

# まとめ

今回はSeleniumBasicを使って、Webアプリケーションの業務を自動化した事例を紹介しました。人材業界や採用業務は汎用のものが多くブラウザで操作できるようなサービスが多いです。そのため、SeleniumBasicなどを使って、ブラウザ自動化することで一部の業務をRPA化することができました。

# 補足：有償のツールでRPAはもっと簡単？

有償のUiPathやWinActorはノーコードで誰でもみたいな宣伝がされていますが、当然、トレーニングが必要です。そして、開発である以上、プログラミング思考がないと業務を構造化して自動化させることは難しいと思われます。
また、ブラウザの自動化には、HTMLの知識が必要であり、知識いらずということではありません。

* 続き
[②インストール方法](https://qiita.com/Rui010/items/0a226c26fe44e56c9c39)
[③実際のプログラム例](https://qiita.com/Rui010/items/f4ed764a6630eda824be)
論文管理ソフト「Zotero」にオリジナルのPDFリーダーが付いたが、Acrobatなど外部リーダーを使いたいとき

# 前置き
Zoteroのv6に、ZoteroオリジナルのPDFリーダーの機能が付き、Zotero一つで論文の管理からハイライトなどの編集までできるようになった。

体感ではAcrobatより動作が軽い気がするが、やはりAcrobat readerの方が機能が良く、こちらを使いたい。

# Acrobat readerを使いたいとき
Acrobat等外部PDFリーダーをデフォルトにしたければ、[公式ドキュメント](https://www.zotero.org/support/pdf_reader)によると、設定の「一般」→「PDF書類を開く」を変更すればよい。
![zotero.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2603341/38073939-ce8b-4614-9524-767a1edd811b.png)
プリミティブ型をラップすると、何がうれしいのか。

# 主旨
オブジェクト指向エクササイズなどでは、プリミティブ型(int, stringなど)をクラスでラップすることを勧める記事をよく見る。
本記事では、プリミティブをラップすることで、どんなことに有効なのかを説明してゆく。

# 結論
①業務知識(=ドメイン）を含むビジネスロジックが、コードのクライアント側に漏れ出すことを防ぐため。
②ロジックの重複を防ぐため。

# 具体例
![タイトルなし.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532785/495080cd-a4ea-9cd9-04e1-2051678b9b76.png)

上記の図を用いて、年度を例にして説明をする。
ビジネスロジックを組み立てる際に、特定の年度における「年度開始日」と「年度終了日」が必要になったと仮定する。
このような状況において、年度をint型で扱っている場合に、上記の日付を求めるメソッドは、年度を扱う側に定義することとなる。

## いけてないポイント①：メソッドを定義する場所
メソッドが定義されている場所は、年度から求めた日付を扱って、より高度なビジネスロジックを組み立てなくてはならない場所である。
そのような場所に、たかが年度における変換ロジックを記載すると、全体の見通しが悪くなる。

## いけてないポイント②：ロジック重複の可能性
別のプログラムでも同様に、「年度開始日」と「年度終了日」が必要になったと仮定しよう。
同じファイル内にビジネスロジックがあるなら問題はないが、別のファイルであればどうであろう。
安易な解決方法は、ロジックを重複することである。別な方法としては、publicでstaticなメソッドにすることである。
どちらも、エレガントでない。

## プリミティブ型をクラスでラップする
年度の値であるint型に対して、クラスでラップすると、上記の問題が一度に解決する。
メソッドを定義する場所については、これ以上なく適切な場所になる。(年度クラスにおける開始日、終了日であるため。)
また、年度クラスを使用する限り、ロジックの重複もあり得ない。

# まとめ
プリミティブ型では、データに対しての振る舞いが足りないことがよくある。
エンタープライズアプリケーションではそれがより顕著である。
そこで、プリミティブ型をクラスでラップすることで、特定のロジックを綺麗にカプセル化できることになる。
その結果、ドメインが外に漏れ出すことでのコードの重複や、その値を使用する側のコードでの可読性のアップ、そして、再利用性があることを学んだ。
上記が、DDDであるところのValueObjectとなる。
wavファイルの中身の値をバイナリで見て確認する

音声ファイルのフォーマットとしてよく使われる.wavの中身を見ていてアレッとなってしまったので基礎的な部分から復習します。自分用の備忘録です。

たとえばこんな形のサイン波のファイルを用意してみます。
![波形.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2380862/3a27c519-1f8b-25e1-057f-476c32fdd5ac.png)

これをバイナリエディタで見てみるとこんな感じです。
![波形バイナリ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2380862/f5f08030-eb0d-b980-25b9-0e65c7eee05b.png)

中身はshort（符号付き16bit整数）でリトルエンディアンで収められています。
無音部分はバイナリでもx0000の値になっていますね。
立ち上がり部分の最初の値は[32 07]ですが、リトルエンディアンなので実際には[x0732](10進数だと1842)です。
Sinカーブの一番うしろの部分を見てみると値は[27 F8]なので実際には[xF827](10進数だと-2009)になっています。

一周期分のサンプル値をすべて書き並べると以下のようになりました。
10進/16進　
00000000/00000000
00001842/00000732
00003677/00000e5d
00005501/0000157d
00007307/00001c8b
00009088/00002380
00010839/00002a57
00012554/0000310a
00014228/00003794
00015854/00003dee
00017428/00004414
00018944/00004a00
00020397/00004fad
00021783/00005517
00023096/00005a38
00024332/00005f0c
00025488/00006390
00026560/000067c0
00027543/00006b97
00028435/00006f13
00029233/00007231
00029934/000074ee
00030535/00007747
00031035/0000793b
00031433/00007ac9
00031726/00007bee
00031914/00007caa
00031996/00007cfc
00031971/00007ce3
00031841/00007c61
00031606/00007b76
00031265/00007a21
00030821/00007865
00030274/00007642
00029627/000073bb
00028882/000070d2
00028041/00006d89
00027107/000069e3
00026084/000065e4
00024973/0000618d
00023780/00005ce4
00022508/000057ec
00021161/000052a9
00019745/00004d21
00018262/00004756
00016719/0000414f
00015121/00003b11
00013473/000034a1
00011779/00002e03
00010047/0000273f
00008282/0000205a
00006489/00001959
00004674/00001242
00002844/00000b1c
00001005/000003ed
-0000837/fffffcbb
-0002677/fffff58b
-0004508/ffffee64
-0006325/ffffe74b
-0008120/ffffe048
-0009888/ffffd960
-0011624/ffffd298
-0013320/ffffcbf8
-0014973/ffffc583
-0016576/ffffbf40
-0018124/ffffb934
-0019613/ffffb363
-0021036/ffffadd4
-0022389/ffffa88b
-0023668/ffffa38c
-0024868/ffff9edc
-0025986/ffff9a7e
-0027018/ffff9676
-0027960/ffff92c8
-0028810/ffff8f76
-0029564/ffff8c84
-0030220/ffff89f4
-0030775/ffff87c9
-0031229/ffff8603
-0031579/ffff84a5
-0031824/ffff83b0
-0031964/ffff8324
-0031998/ffff8302
-0031925/ffff834b
-0031747/ffff83fd
-0031464/ffff8518
-0031076/ffff869c
-0030585/ffff8887
-0029993/ffff8ad7
-0029301/ffff8d8b
-0028512/ffff90a0
-0027628/ffff9414
-0026653/ffff97e3
-0025589/ffff9c0b
-0024441/ffffa087
-0023211/ffffa555
-0021905/ffffaa6f
-0020526/ffffafd2
-0019079/ffffb579
-0017568/ffffbb60
-0016000/ffffc180
-0014378/ffffc7d6
-0012708/ffffce5c
-0010997/ffffd50b
-0009249/ffffdbdf
-0007470/ffffe2d2
-0005666/ffffe9de
-0003844/fffff0fc
-0002009/fffff827

以上
Laravelでのクッキーの読み書き【個人的なお勉強アウトプット】

## 参考図書
https://www.amazon.co.jp/dp/B07CLLW4MX/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1

Laravelではクッキーの読み書きの機能も用意されている。

## クッキーの値の取得
`$変数 = $request->cookie(キー)`

## クッキーを新たに保存
`$response->cookie(キー, 値, 分数)`

クッキーの値の保存と値の取得は用意されているオブジェクトが違う。

```app/Http/Controllers/HelloController.php
class HelloController extends Controller{
public function index(Request $request){
if($request->hasCookie('msg')){
$msg = $request->cookie('msg');
}else{
$msg = 'Cookieはありません';
}
return view('hello,index', ['msg'=>$msg]);
}
public function post(Request $request){
$msg = $request->msg;
$response = response()->view('hello.index',['msg'=>$msg]); 
$response->cookie('msg',$msg,100)
return $response;
}
}
```
viewを含めたResponseを用意し、cookieで保存してから、そのResponseをreturnする。
クッキーはクライアント側に保存されるものだから、レスポンスをクライアントに返さないと保持はされない。
Go開発入門 静的チェックツール編


# はじめに

Goの静的チェックのためのツール群をコマンドとともにいくつか紹介します。

# ツール編

## gofmt

goのコード整形ツールです。
Go teamによって標準化されています。
```
 gofmt -l -w main.go  
```

## golint 

goらしくない書き方を指摘するツールです。
```
golint . 
```

## go vet

goのバグを指摘するツールです。
```
go vet main.go
```

## errcheck

エラーチェック漏れを指摘するツールです。
```
 errcheck  github.com/foo
```

例えば、下記のようなエラーチェックを行っていないと指摘されます
```
	if err := router.Run(); err != nil {
		log.Fatalf("server cant start :%v", err)
	}
```
https://github.com/kisielk/errcheck

# 応用編

## makefile

上記を統合してMakefileを作りましょう。
メリットは、コマンド間の依存関係を定義できる点です。
たとえば、 下記の場合、make build (単に makeで可)の前に go fmt, errcheck, およびgo vetが実行されていることを保証できます。

```
.DEFAULT_GOAL := build

fmt:
	go fmt ./...
.PHONY:fmt

lint: fmt
	golint ./...
.PHONY:lint

vet: fmt
	go vet ./...
.PHONY:vet

errcheck: vet
	errcheck ./...
.PHONY:errcheck

build: errcheck
	go build .
.PHONY:build

run: errcheck
	go run .
.PHONY:run
```

## 自動整形

フォーマットはエディターで自動化すると良いです。
vscodeの場合は次のような設定をします。
1. Go for Visual Studio Codeというプラグインをインストール
2. setting.jsonの記述
```
  "editor.formatOnSave": true,
  "[go]": {
    "editor.defaultFormatter": "golang.go"
  },
```
【Vue.js】vue-routerでのURLパラメータ使用法

## 概要
Vue.jsプラグインのvue-routerにおけるURLパラメータの使用法について記述。
## 定義
### vue-router
SPA開発に使用するVue.js公式のプラグイン。
### URLパラメータ
URlの末尾に付ける値。
## なぜ必要か
ユーザーによって固有のコンテンツを出し分ける為。
## 実装例
vue-routerの場合は、パラメータとして受け取るURLの末尾に「:パラメータ名」を付ける。

例：todoページへの遷移
```
path: "/todo/:id"
```
上記の場合、パラメータ名は「idとなる」。

そしてこの値がrouteの中にparameオブジェクトとして格納される。
$routeはvue専用の変数でルートの情報が入っている。
parameの値は配列になっており、パラメータと値がプロパティとして保存される。
データアクセスは以下の形。
```
$route.parame.パラメータ名
```


methodsでログインページからtodoページに遷移する場合の記述。
```
methods: {
    handleLogin(session) {
      this.$axios.post('login', session)
        .then(res => { 
          this.login = res.data,
          this.$router.push({ path: `/todo/${this.$route.params.id}`})})
        .catch(err => console.log(err.status));
        }
  }
```
VSCodeでhtmlのlangを初期設定で日本語設定にする方法

# この記事のゴール
- 「en」になっている部分を初期設定で「jp」にする
![スクリーンショット 2022-03-26 15.04.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/d7b9ed70-e078-5f4e-53db-96946120f5b0.png)

# 手順
## 【手順1】 VSCodeの設定を開く
![スクリーンショット 2022-03-26 15.08.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/30e5617c-afff-331b-7063-02fc8a830ac9.png)
![スクリーンショット 2022-03-26 15.10.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/cd8d4b5e-6b1d-7668-4ca9-399eb2d15b24.png)

## 【手順2】 jsonファイルを開く
![スクリーンショット 2022-03-26 15.34.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/4d8171de-4570-6b8c-c509-d2932347f4e5.png)


## 【手順3】 jsonファイルにコードを追加
- 以下のコードをコピーして貼り付けてください
```.json
 ,
    "emmet.variables": {
        "lang": "ja"
    }
```
![スクリーンショット 2022-03-26 15.21.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/2b9fa8c8-b85b-2962-c422-a4d5925ea745.png)

## 【手順4】 実際に初期設定で「jp」になっているか確認をする
![スクリーンショット 2022-03-26 15.24.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/cc35c681-ff4c-9695-3b6b-af76b1b80ba3.png)
![スクリーンショット 2022-03-26 15.24.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/6eb80a70-567e-fa71-acf2-2a1caf92aab0.png)

無事、初期設定で「jp」になっていればお疲れ様でした！
Pythonで日本語が含まれるJSONをファイルに書き込む際、可読性を上げるための最低限の設定

## 概要

PythonにはJSONモジュールを使うと、JSONをファイルに書き込むことが簡単にできます。json.dump()で可能です。

ただ、オプションを何も指定せずにファイルに書き込みを行うと、以下のような状態になります。

* 1行にまとめられた状態で書き込まれる
* 日本語のような非ASCIIコードはエスケープされる

よって、可読性を上げる最低限の設定をする方法を挙げます。

## オプション無しでjson.dump()を実行した場合

```python
import json
tags = [{"pref": "北海道", "city": "札幌市"}, {"pref": "東京都", "city": "港区"}]

with open('./test.json', 'w') as f:
    json.dump(tags, f)
```

### 実行結果

```:test.jsonの内容
[{"pref": "\u5317\u6d77\u9053", "city": "\u672d\u5e4c\u5e02"}, {"pref": "\u6771\u4eac\u90fd", "city": "\u6e2f\u533a"}]
```

オプション無しでは「1行、非ASCIIコードはエスケープされる」という結果になります。

なお、エスケープされたJSONはjson.load()で読み込めば、問題なく読み込んでくれます。ただ、問題なく読み込めたとしても、JSONファイルをcatやlessなどで直接参照した場合、人間の目には読みにくい（実質的には読めない）ものです。

```:参考
with open('./test.json', 'r') as f:
    print(json.load(f))

# 結果
[{'pref': '北海道', 'city': '札幌市'}, {'pref': '東京都', 'city': '港区'}]
```

## 最低限の設定で可読性を上げる

「インデントを指定、非ASCIIコードをエスケープしない」設定をすることで、可読性の良い形で出力されます。

### 構文

```python
import json
tags = [{"pref": "北海道", "city": "札幌市"}, {"pref": "東京都", "city": "港区"}]

with open('./test.json', 'w') as f:
    json.dump(tags, f, indent=4, ensure_ascii=False)
```

### 実行結果
```:test.jsonの内容
[
    {
        "pref": "北海道",
        "city": "札幌市"
    },
    {
        "pref": "東京都",
        "city": "港区"
    }
]
```

json.load()による読み込みも問題ありません。

```:参考
with open('./test.json', 'r') as f:
    print(json.load(f))

# 結果
[
    {
        "pref": "北海道",
        "city": "札幌市"
    },
    {
        "pref": "東京都",
        "city": "港区"
    }
]
```

## 参考

https://docs.python.org/ja/3/library/json.html
知らないとやばい！　作業効率を上げるためのショートカットキー(Mac)

# この記事の概要
自分が学習している時にショートカットキーのことがわからず、
かなり非効率なPC操作をしていました。
そういったことにならないようにショートかカットキーを覚えて効率化させて欲しいです。

実際に***自分は手を動かしてショートカットキーに慣れることができた***ので
操作してみてくだい。体に覚え込ませるイメージです。


# ショートカットキー一覧
ショートカットキーを一覧にしていきます。
***Mac前提で記載***していきます。

### これは知らないとまずいショートカットキー

|ショートカットキー|どういう機能か|
|--|--|
|Command + C|コピー|
|Command + V|ペースト|
|Command + Z|直前のコマンドを取り消す|
|Command + A|全選択|
|Command + R|再度読み込み|

### 知っていると便利なショートカットキー

|ショートカットキー|どういう機能か|
|--|--|
|Command + tab|アプリを切り替える|
|Command + X|切り取り|
|Command + N|新規の書類またはウインドウを開く|
|Command + T|新しいタブを開く|
|Command + M|ウインドウを小さくしてしまう|
|Command + W|最前面のウインドウを閉じる|
|Command + Q|App を終了|
|Command + S|保存|
|Command + F|検索|
|Command + L|カーソルをアドレスバーに持ってくる|
|Command + space|Spotlight 検索|
|Command + control + 電源ボタン|Macを強制的に再起動|

### shifキーを使う便利なショートカットキー
|ショートカットキー|どういう機能か|
|--|--|
|Command + shift + tab|アプリの切り替え（最近使った順番の逆順）|
|Command + shift + R  |スーパーリロード|
|Command + shift + n |シークレットモード
|Command + shift + 3|画面全体をスクショ|
|Command + shift + 4|画面の範囲を選択してスクショ|
|command + shift + S|名前をつけて保存|
|command + shift + Z|command + Zの取り消し|
|Control + shift + 電源ボタン |スリープモード|

### optionキーを使う便利なショートカットキー

|ショートカットキー|どういう機能か|
|--|--|
|Command + option + 矢印|windowの中を移動できる|
|Command + option + 電源ボタン|スリープモードにする|
|Command + option + i  |devtools立ち上げ|
|Command + option +　M|前面の App のウインドウをすべて最小化|
|Command + option + esc|App を選択して強制終了|


### 知っておいて損はしないショートカットキー

|ショートカットキー|どういう機能か|
|--|--|
|Command + B|選択した文字をを太字|
|command + U|選択した文字に下線を引く|
|Command + G|直前に検索した項目が次に出現する箇所を検索|
|Command + P|コピー|
|Command + H| App のウインドウを非表示|
|Command + O|選択した項目を開く。開くファイルを選択するためのダイアログが開く|
|Command + ,(カンマ)|Appの環境設定を開く|
|Command + D|ブックマーク編集|



### 番外編
バックスラッシュの入力が最初わからなかったので念のため載せておきます。
|コマンド|出力|
|--|--|
|Option + ¥マーク　|Option + ¥マーク　\　バックスラッシュ|




# 面白い動画
こちらの動画の解説が面白かったので良かったら視聴してみてください！

https://www.youtube.com/watch?v=DuvrYlOOp6Q

# この記事の今後について
自分がこれは使えるなと思ったら随時追加していきます。

### 参考資料
https://qiita.com/shuntaro_tamura/items/6e4b87022ef0e606ad3c

https://support.apple.com/ja-jp/HT201236

https://qiita.com/kuniyonkunisan/items/e64cd25dc228eb9dfb04