OmniAICreator/Qiita-1.07M huggingface dataset:
Angularの非同期処理について

[この記事はCODE BASE OKINAWA プログラミングスクールAdvent Calendar 2020 24日目の記事です](https://adventar.org/calendars/5735)

#Angularの非同期処理について知りたいよー
今年の10月からWeb業界？に転職し、現場でAngularを使っているので、
理解を深めるためにも、胆となる非同期処理について調べてみました！

## AngularではRxJS使ってるんですって
Angularでは、RxJSという非同期処理を簡潔に記述できるライブラリを採用しています！
キーワードとなるのは、下記3つ！
・Observable
・subscribe
・Observer

[RxJSの公式？](https://rxjs-dev.firebaseapp.com/guide/observable)に乗ってる、サンプルソースを基に理解していきましょう！

>以下は、subscribeするとすぐに（同期的に）値1,2,3をプッシュし、subscribe呼び出しから1秒経過した後に値4をプッシュして完了するObservableです。

```typescript:サンプルソース
import { Observable } from 'rxjs';

const observable = new Observable(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  setTimeout(() => {
    subscriber.next(4);
    subscriber.complete();
  }, 1000);
});

console.log('just before subscribe');
observable.subscribe({
  next(x) { console.log('got value ' + x); },
  error(err) { console.error('something wrong occurred: ' + err); },
  complete() { console.log('done'); }
});
console.log('just after subscribe');
```

```console:実行結果
just before subscribe
got value 1
got value 2
got value 3
just after subscribe
got value 4
done
```

### Observable
Observableオブジェクトは、subscribeというメソッドを保持しており、
2行目の部分で、そのsubscribe実行時の処理を定義しています。

### subscribe
subscribeを実行すると、Observableの購読を開始し、
引数で設定された、Observerオブジェクトのメソッドを実行します。

### Observer

Observerは、next、error、completeメソッドを保持しています。
next -> 実行時に走る処理
error -> エラー発生時に走る処理
complete -> 処理完了後に走る処理

サンプルコードでは、2行目でobserverに1~3の値を引数にnextメソッドを実行し、
その1秒後にcompleteメソッドを実行しています。

## ちょっと分かり辛いと思ったので、回転寿司で例えてみた
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/822808/3d3a6cec-9e1d-cb11-50e9-2dfb06fc49a7.png)

Observableは、寿司を回転させ、提供し続けて、
その回っている寿司をsubscribeで取って、Observerのnextで食べる。
取るときに手を滑らせて寿司を落とした場合はerrorが走り、
食べ終わったらcompleteで「ごちそうさま」を叫ぶ。
上記の内容で私は理解したつもりです！（違ってたら指摘ください！

## 次回予告
次回は実際にどのように使うのかとか書きたいなと考えていますので、こうご期待！
それでは、良いお年を！
IchigoJamで約分

今日は12/24…そう、約分して1/2にできる日ですね！

> 彼女から「12/24はどうする?」ってメールが来たから
> 「約分して1/2にした方がいい」って返信したら音信不通になった

(よく使われるコピペ)

というわけで、[こどもパソコン IchigoJam](https://ichigojam.net/)で約分を実装してみました。
※IchigoJamはjig.jpの登録商標です。

# 約分のアルゴリズム

約分は、分母と分子をそれぞれ両方の数を割り切る最大の整数(最大公約数)で割ることで実現できます。
最大公約数は、[ユークリッドの互除法](https://ja.wikipedia.org/wiki/%E3%83%A6%E3%83%BC%E3%82%AF%E3%83%AA%E3%83%83%E3%83%89%E3%81%AE%E4%BA%92%E9%99%A4%E6%B3%95)を用いて求めることができます。
これは、正の整数$a$と$b$の最大公約数を$gcd(a, b)$、$a$を$b$で割った余りを$a\mod b$と書くことにすると、
$a\mod b \neq 0$のとき$gcd(a, b) = gcd(b, a\mod b)$となることを利用し、
「$a\mod b \neq 0$である間、$(a, b)$を$(b, a\mod b)$で置き換えることを繰り返す」というアルゴリズムです。
$a\mod b = 0$となったときは、$a$が$b$で割り切れるということなので、最大公約数は$b$になります。
($b$は$b$で割り切れ、$b$より大きい整数では割り切れない)

以下、「$a\mod b \neq 0$のとき$gcd(a, b) = gcd(b, a\mod b)$となる」ことを示します。

$a, b$は、適当な正の整数$a', b', g$を用いて$a = ga', b = gb'$と表すことができます。
このとき、$a'=kb'+d$ ($k, d$は整数、$0 \leq k, 0 \leq d < b'$)とおくと、
$a = ga' = g(kb'+d) = gkb' + gd = k(gb') + gd = kb + gd$となり、
$a \mod b = gd$となることがわかります。 ($0 \leq d < b'$より、$0 \leq gd < gb' = b$)
したがって、$a \mod b$も$g$で割り切れる数となり、
「$a$も$b$も割り切る数は、必ず$a\mod b$も割り切る」ことがわかるので、
$gcd(a, b) \leq gcd(b, a\mod b)$となることがわかります。

逆に、$b = g'b', c = g'c' = a\mod b$ ($g'$は正の整数)とすると、
$a = k'b + c$ ($k'$は整数)と表すことができ、
$a = k'b + c = k'g'b' + g'c' = g'(k'b' + c')$となるので、$a$も$g'$で割り切れる数になります。
したがって、「$b$も$a\mod b$も割り切る数は、必ず$a$も割り切る」ことがわかるので、
$gcd(b, a\mod b) \leq gcd(a, b)$となることがわかります。

以上より、「$a\mod b \neq 0$のとき$gcd(a, b) = gcd(b, a\mod b)$となる」ことが示せました。

# 実装

```
10 ' ﾔｸﾌﾞﾝ
20 INPUT "ﾌﾞﾝｼ =",N
30 INPUT "ﾌﾞﾝﾎﾞ=",D
40 IF N<=0 OR D<=0 ?"ﾘｮｳﾎｳ ｾｲ ﾆ ｼﾃﾈ":GOTO 20
50 A=N:B=D
60 R=A%B
70 A=B
80 B=R
90 IF B>0 GOTO 60
100 ?N;"/";D;"=";N/A;
110 IF D/A>1 ?"/";D/A;
120 ?CHR$(10);
```

10行目は、`FILES`用のタイトルです。
20行目～40行目で、入力を受け付けています。なお、`N`はnumerator (分子) を、`D`はdenominator (分母) を表します。
50行目は、ユークリッドの互除法用に`A`と`B`を初期化しています。
60行目～90行目で、ユークリッドの互除法をしています。
100行目～120行目で、得られた最大公約数で分母と分子を割って約分をしています。
このとき、分母が1の時は分母を出力しないようにしています。

[IchigoJam web by jig.jp で開く](https://fukuno.jig.jp/app/IchigoJam/#10%20%27%20%EF%BE%94%EF%BD%B8%EF%BE%8C%EF%BE%9E%EF%BE%9D%0A20%20INPUT%20%22%EF%BE%8C%EF%BE%9E%EF%BE%9D%EF%BD%BC%20%3D%22%2CN%0A30%20INPUT%20%22%EF%BE%8C%EF%BE%9E%EF%BE%9D%EF%BE%8E%EF%BE%9E%3D%22%2CD%0A40%20IF%20N%3C%3D0%20OR%20D%3C%3D0%20%3F%22%EF%BE%98%EF%BD%AE%EF%BD%B3%EF%BE%8E%EF%BD%B3%20%EF%BD%BE%EF%BD%B2%20%EF%BE%86%20%EF%BD%BC%EF%BE%83%EF%BE%88%22%3AGOTO%2020%0A50%20A%3DN%3AB%3DD%0A60%20R%3DA%25B%0A70%20A%3DB%0A80%20B%3DR%0A90%20IF%20B%3E0%20GOTO%2060%0A100%20%3FN%3B%22%2F%22%3BD%3B%22%3D%22%3BN%2FA%3B%0A110%20IF%20D%2FA%3E1%20%3F%22%2F%22%3BD%2FA%3B%0A120%20%3FCHR%24%2810%29%3B%0A)

# 実行結果例

わざわざ動画にするほどではないと思ったので、動画は省略してテキストで実行結果例を示します。

```
RUN
ﾌﾞﾝｼ =12
ﾌﾞﾝﾎﾞ=24
12/24=1/2
OK
RUN
ﾌﾞﾝｼ =22
ﾌﾞﾝﾎﾞ=7
22/7=22/7
OK
RUN
ﾌﾞﾝｼ =480
ﾌﾞﾝﾎﾞ=640
480/640=3/4
OK
RUN
ﾌﾞﾝｼ =1280
ﾌﾞﾝﾎﾞ=720
1280/720=16/9
OK
RUN
ﾌﾞﾝｼ =256
ﾌﾞﾝﾎﾞ=16
256/16=16
OK
RUN
ﾌﾞﾝｼ =16
ﾌﾞﾝﾎﾞ=256
16/256=1/16
OK
```

# 結論

IchigoJamでユークリッドの互除法を実装し、約分をすることができました。
なお、12/24をどうするかは個人の自由です。
(中には会社に拘束されるなど、自由にできない人もいるかもしれませんが…)
mac スクショ方法（忘備録）

#Macでのスクショ方法
一定の期間が空くと「どうやってやるんだっけ〜」となってるのでここに記します。

###全画面のキャプチャ
```php
command + shift + 3
```
###選択部分のキャプチャ
```php
command + shift + 4
```
#最後に
よし。
Docker環境でalertmanagerでslackにアラートする

### 本記事でやること 
　docker-composeを用いてPrometheusとalertmanagerのコンテナを起動して、Slackで受信されたアラートが確認しています。

![Screen Shot 2020-12-24 at 8.11.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/195876/0e241c9a-fdfa-15e4-0cd3-b304a8a76068.png)


## 環境
　docker環境で、以下のアプリケーションが動くコンテナを作成します。
- Prometheus: 2.23.0
- alertmanager: 0.21.0

## 環境構築
　本記事では、docker-composeを使用して、Prometheusとalertmanagerを構築する。まずファイル構成を以下のように作成します。

```
docker-compose.yaml
prometheus
-- prometheus.yaml
-- alert_rules.yaml
alertmanager
-- alertmanager.yaml
```
　次に`docker network create --subnet=172.19.0.0/19 prom_net`でdocker networkを構築します。設定ファイルとdocker neworkを構築後、以下の`docker-compose.yaml`でdocker環境を構築します。

``` docker-compose.yaml
version: '2.2'
# define services
services:
  prometheus:
    image: prom/prometheus
    container_name: prometheus
    volumes: 
       - ./prometheus:/etc/prometheus
    command: "--config.file=/etc/prometheus/prometheus.yaml --storage.tsdb.retention.time=10m"
    ports: 
      - 9090:9090      
    restart: "no"
  alertmanager:
    image: prom/alertmanager
    container_name: alertmanager
    volumes:
      - ./alertmanager:/etc/alertmanager
    command: "--config.file=/etc/alertmanager/alertmanager.yaml"
    ports:
      - 9093:9093
    restart: "no"

# define network
networks:  
  default:
    external:
      name: prom_net

```

## Prometheus設定
　Prometheusの設定ファイルは以下になります。`slack_api_url: '< Your channel on Slack >'`に関しては作成した任意のSlackのWebhook URLを入れてください。

``` prometheus.yaml
global:
  slack_api_url: '< Your channel on Slack >'

route:
  receiver: slack
  routes:
  - match:
      receiver: 'slack'


receivers:
  - name: slack
    slack_configs:
    - channel: '< Channel Name >'
      text: '< Optional Text>'
```

　次に以下が、PrometheusがMertricに関してアラートを送信する設定になります。アラートを送信する条件に関しては適当なMetricsを選んでいるので、各自好きなMetricsを選んでください。

``` alert_rule.yaml
groups:
- name: prometheus_build
  rules:
  - alert: test
    expr: prometheus_build_info == 1
    for: 10s
    labels:
      severity: notice
    annotations:
      text: testsing alert
```

## テスト
　最後に、各アプリケーションのコンテナを起動させ、PrometheusとSlackで送信されたアラートを確認します。ちなみに、以下がdocker-composeで構成されたコンテナの起動・停止のコマンドになります。
`docker-compose up`
`docker-compose down`

### Prometheus
　以下、画像から`alert_rule.yaml`で設定された条件でアラートが送信されていることがわかります。
![Screen Shot 2020-12-24 at 7.47.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/195876/4189f5a8-5f98-57c1-f201-952c1da51e74.png)

### Slack
　Prometheusで表示されたアラートが、SlackのChannleで受信できていることがわかります。
![Screen Shot 2020-12-24 at 7.40.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/195876/b1470d21-d875-4cb5-9f1d-5178913cde64.png)

## 所感
　Prometheusとalertmanagerを用いて、Slackでアラートが受信できているか確認しました。今後はElasticsearchにアラートを送信して、Kibanaでログを確認できる構成をしたいと考えています。本記事では、アラートが送信できているか確認するために、SlackのChannelを使いました。
何学べばいいかわからない時に見直す3つの事

プログラミングをある程度経験すると定期的に訪れる「次何を学べばいいかわからない」って状況。
自分も今年からプログラミングを0から始め2~3回これを経験しました。
これを読んで1人でもプログラミング学習のモチベーションが上がればいいな〜と思います。

# アンチパターン①　本や動画で同じ技術をインプットし続ける
本を読んだだけでは知識は定着しません。
アウトプットして初めて自分の力となります。
ここで基礎知識がないから更にインプットすればいいんだ！と勘違いするのがアンチパターンです。
自分も特に作りたいものがなくてひたすら技術本を読んでた(サンプルコードいじってた)時期がありました。
それで成長したかというと結果、イマイチでした。

# アンチパターン②　とりあえずモダンな技術をインプットする
同じ技術を学ばなければ大丈夫！という訳ではありません。
学ぶべき基礎技術は沢山あったのにnuxt.jsやtypescriptなどモダンな技術を本や動画でひたすらインプットしてました。
確かに上記は必要なスキルでしたが、基礎ができていなかった自分にとっては成長したかというとイマイチでした。

# アンチパターン③　人に相談しない
何かと遠慮してしまうパターン。
上司や先輩は忙しいものの、成長したい！という旨を相談すれば悪い顔はしないはずです。
未経験で独学中の場合は相談する相手を探すのは難しいと思いますが、[MENTA](https://menta.work/)を使ってみるのはどうでしょうか？

# 改善案① 小さいものでもいいのでアウトプットをする
アウトプットというとLPのようなクオリティの高いものでなくても大丈夫です。
例えばAPIで何かデータを受信するなら1行を表示させるだけでもインプットの何倍も効果があります。
その時サンプルコードに好きなキャラ、人物、食べ物なんかにするとモチベーションが上がるでしょう。

# 改善案②　ロードマップを調べる
次これを学んだ方がいいよ！というロードマップはプログラミング世界だと沢山あります。
ベテランの人が経験を元に作ったマップなので初学者にとってはとても参考になるでしょう。
フロントエンドの場合のロードマップは[こちら](https://coliss.com/articles/build-websites/operation/javascript/vue-and-react-developer-roadmap.html)みたいなものになります。

# 改善案③　勉強せざるを得ない状況を作る
そもそも勉強のモチベが上がらないというパターンがあるでしょう。
なぜならほとんどの人が今勉強しなくても生活に困らないからです。
でも、今よりステップアップしたいと思った時に今の知識で足りますでしょうか？
知識がつかないとどうなるでしょう？

・後輩(年下)よりも仕事をこなせない
・自分のやりたい仕事(案件)が一生選ぶ事ができない
・新しい挑戦する機会すらない

自分は上記な状況に絶対なりたくありません。俗にいう負けず嫌いなんでしょう。
だから毎日の勉強しよう！というマインドになるんです。
余談ですが記事投稿時、自分は30歳で今でもそれなりに危機感はあります。
エンジニア定年説35歳とも言われてますから。
これが今25歳だったらここまで危機感はなかったでしょう笑


### 余談:勉強する仕組みを作ってみよう
もし勉強が続かないなら仕組みから変えてみましょう。
自分であれば毎朝エンジニアとzoom報告会をして、会社には一番乗りできてそれをslackで呟いてます。
これは勉強せざるを得ない状況を作ったとも言えるでしょう

さて、続きまして、アルサーガパートナーズ Advent Calendar 2020 最終日の記事は @miumi さんのクリスマスの過ごし方です。:tada:
プロジェクトマネージャー必読！エンジニアに学習コストをかけてでもTerraformでクラウド管理をしてほしいこれだけの理由

# はじめに

![logo-hashicorp-3f10732f.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201801/4179136c-3f28-bbcf-3bf5-1dbbe4491450.png)

この記事は [terraform Advent Calendar 2020](https://qiita.com/advent-calendar/2020/terraform) の24日目の記事です。

メリークリスマス！🎄 今年も残り1週間と早いですね。

## 書こうと思ったきっかけ

2020年に私の開発チームでAWSにログ基盤を構築しました。

AWSに興味があって入ったプロジェクトですが、「Terraformを導入しよう」という話があり「ぜひやらせてくださいっ！」と手を挙げましたが当時は「Terraformって何それ？おいしいの？」状態たったんですよね。笑

調べるうちにTerraformが **クラウド構築・運用の悩みを解消する** 技術であり、ぜひとも学習・導入すべきものだと感じたので、みなさんにもお伝えしたいという気持ちで書いています。 


## 記事の対象者

- AWSやGCP、Azureなどクラウドインフラを利用するプロジェクトのPMの方向け
- Terraformとは何か理解したい人

Terraformの始め方は他の記事で解説があるのでそちらにお任せしたいと思います。記事が長くなるので。

- [Terraform公式ドキュメント](https://www.terraform.io/docs/index.html)
- [AWSでTerraformに入門 | Developers.IO](https://dev.classmethod.jp/articles/terraform-getting-started-with-aws/)
- [Terraform職人入門: 日々の運用で学んだ知見を淡々とまとめる](https://qiita.com/minamijoyo/items/1f57c62bed781ab8f4d7)

## 記事のゴール

- なぜTerraformをプロジェクトに導入すべきかが理解できる
- なぜエンジニアに業務時間を使ってでもTerraformを勉強してもらうべきかが理解できる
- Terraformの基本概念の理解


# 一言で教えて！Terraformって何？

**「AWSやGCPのクラウドのリソースを手で構築・削除するの、面倒だなぁ...」** と思ったことはありませんか？

<img width="500px" alt="AdobeStock_134811800.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201801/b5b2e7d1-3bc9-c811-ee63-f896f39a9ff0.jpeg">

手運用でクラウドサービスを構築・運用すると

- 手順書作成の手間
    - しかも意味が伝わらない
    - 手順漏れ
- うっかりによる作業ミス
- 構築した人が異動・退職
    - 引き継ぎがうまくできてなかった

ということが発生しがちなのは、みなさんも経験があるのではないでしょうか？

それを解決すべく導入したいのがHashicorpが開発する **[Terraform](https://www.terraform.io/)** です！

コードベースでクラウドインフラを構築・管理できる（*IaC = Infrastructure as Code* という）ので、コマンドさえたたけるようになれば「誰でも同じインフラを構築できる」ようになります。

Ansibleのクラウド版だと思っていただけると理解しやすいですね。

Terraformは標準で200を超えるインフラサービスに対して利用が可能です。APIがあればプラグイン開発も可能です。

![Screen Shot 2020-12-24 at 2.17.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201801/9b0b9f30-6cc4-a16f-110e-4866c3961187.png)

構築の度に手作業を繰り返す必要がありません！もう手順書とはおさらばしましょう！

# 過去にAWS構築でやらかした失敗

僕の前職の話を少しさせてください。

現職への転職前に務めていたSIerで開発支援ツールをAWS上に構築しました。

その時はTerraformの存在を全く知らなかったので手で構築し、その手順をドキュメントに残しました。

今思うと、スクショの不足や言葉足らずに心当たりがあり、今回のログ基盤の構築をしながら「あの時Terraformを知っていればなぁ」と反省しました。

- 手順書は万全ではありません
    - 書いた人が説明を漏らしているかもしれません
    - 作業者に意図が伝わっていないかもしれません
    - 作業者に心理的な負担をかえてミスを誘発するかもしれません

コマンド一つでミスをしない、漏れがない状況を作り出すのがPMにとってもエンジニアにとっても幸せな結果になると思っています。


# まとめ

## Terraformとは？

- クラウドのリソースを構築・管理
- 構築・変更・管理がコードベースで可能
- Infrastructure as Code
- tfstateで状態をコードで管理
- Ansibleのクラウド版のイメージ
- Hashicorpが開発
- APIがあればプラグイン開発も可能

## なぜ学習コストをかけてでもTerraformを導入してほしいか

- クラウドのリソースを手運用するにはエンジニアの負担が大きい
    - 手順書の問題点
        - 誤読につながる
        - 読み手に意図が伝わらない / 時間がかかる
        - スクショ不足
    - 異動・退職による引き継ぎ不足
    - 操作ミス
    - 作業漏れ
- コードによる状態管理ができる
- 少ないコマンドで誰でも構築・変更を再現できる

# さいごに

2020年はコロナ渦で色んなことができなくなり、振り返れば仕事とヘルニアの手術の思い出しかありませんでした。笑

しかし、AWSでログ基盤を構築しTerraformの勉強ができたことは、僕にとって実りのある経験になったと感じています。

業務としてTerraformの学習時間を許容してくださった僕のPMには感謝しかありません。本当にありがとうございました。

2021年も技術的なチャレンジをたくさんしていきたいです。

それでは、メリークリスマス&よいお年を！🎍
エンジニア実務未経験者がサイト名設定〜サイトページ設計図まで書いてみた

# はじめに

今回PHPをサイト作成を通して学ぼうと考えました。
せっかくならただ作るだけではなく、自分なりにサイト名や設計図までしっかりとまとめようと決意しました！
ここで**PowerPoint**を使ってサイト名設定からサイトの設計図を作成してみました！
項目としては以下のとおりです。

- **サイト名設定**
- **サイト作成への背景**
- **あなたや自分へのGive**
- **予定使用言語等**
- **サイトページの設計図**
- **まとめ**
- **参考(またはテンプレ使用元の)サイト**


## 1.サイト名設定
今回「野菜の栄養価を一目でわかるようなサイト」をイメージして名前を付けました。
ただ日本語の名前だけだと自分としては物足りなかったため、英語表記も入れてみました:thumbsup:


「**あなたの健康のための野菜栄養価一覧サイト**」
***Nutritional value List Site of Vegetables to your Health***


この英語表記のままだと長いため３文字程度に省略して”**NVH**”としました！


## 2.サイト作成への背景
まずはずらっと背景並べてみますｗ

- 健康や睡眠系の読書をしていくうちに食べ物の栄養価は何が一番高いのか気になってきた
- 検索してみると**食材の栄養価を数値化して記載しているサイトは多い**
- しかし結局どの食材を使えば自分が求めている栄養価が摂れるのかパット見分かりづらい
- 数値ではなく、**「特定の栄養価で比較的多く含まれている食材はこれです」と栄養価と食材のみ表示**すれば探す手間が省ける
- そうすることで「とりあえずこの食材を摂ればこの栄養は確保できそうだな」と思えるようになる
- 自分が好きな“野菜”にフォーカスを当てて、**今まで読んできた「本」などを参考に作成してみたい**と思った

今では健康関連の問題点にフォーカスを当てているため、今後出てきそうな社会的課題を少しでも解決できればという思いがあってサイト作成に至った形になります:clap:


## 3.あなたや自分へのGive

**あなたへのGive**

- 特定の野菜で高い栄養価が何かを手間なく検索できる
- 料理などに応用できる
- **将来的に野菜の栄養の重要性を間接的に伝えられる**
- Qiitaなどで作成経緯を伝えられる（共有できる）

**自分へのGive**

- **本などで得た知識のアウトプットや整理ができる（復習ができる）**
- 料理などに応用できる
- PHPやフロント面のアウトプットができる
- Qiitaにサイト作成の経緯を投稿できる


## 4.予定使用言語等

**使用予定言語**
　フロント：Vue.js
　バックエンド：**PHP**,MySQL
**予定使用開発ツール**
　**AWS SDK for PHP**,AmazonS3,Docker

今回はまだ使用したことのないAWSのツールを使用し、どこまでできるかを試す目的もあります:smile:


## 5.サイトページの設計図

サイトのロゴは**PowerPoint**で作る予定です！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/971552/e40d00c6-e837-8a4f-adee-b50447b10bbc.png)
タイトルは**Vue.js**を用いて時間差でページを開いた瞬間に流れるような動きで表示されるようにします:muscle:

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/971552/e9694a22-e94f-b77d-f228-805b258f7e1d.png)
**PHP**と**MySQL**を用いて指定した（比較的多く含まれている）栄養価に当てはまる野菜のみを表示するようにします:thumbsup:

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/971552/7ba882ef-0adf-4adc-5b9c-59a40c7a391e.png)
**PHP**と**MySQL**を用いて検索した野菜のみを表示、または五十音順に表示するようにします:thumbsup:

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/971552/e047079d-a3ce-a8f6-9ce8-afde92cb1b62.png)
**PHP**を用いてお問い合わせ内容が作成したメールに届くように設定する予定です（メールは**Gmail**の予定）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/971552/b8155c48-b4eb-e2b1-737d-4955cc5607c8.png)
ほぼテンプレの内容ですが、お試しで今回は入れてみます！


## 6.まとめ

今回Qiita初投稿になるので内容どのようにしようかと迷いましたが、せっかくなのでPowerPointでまとめた内容をほぼそのまま使用しました:sweat_smile:
サイトの設計図はPowerPointで作成した設計図のテンプレートから改造して作ったのでそこまで手間はかからずに作れたので今後もまた使いたいなと思います！
「**これからポートフォリオを作りたい**」「**設計図ってどんな感じで作ればいいんだろう**」「**サイト名ってどう決めればいいんだろう**」のように思っている方々に参考になれば幸いです:grin:


## 7.参考(またはテンプレ使用元の)サイト

今回参考にしたサイト（動画）は以下になります。
[マークダウン記法(しまぶーのIT大学)](https://youtu.be/tjygVZLLeYc)
[パワーポイントでOK！ワイヤーフレームの作り方とテンプレート](https://ssaits.jp/promapedia/documents/wf.html)
[【テンプレート】サイトのご利用について(利用規約)のサンプル雛形](https://www.webernote.net/webcreate/terms.html)
AWS CloudShellをzsh化する

## CloudShellとは
Azureとかにはあった、Webコンソールでターミナルを使えるやつです。 
簡単なコマンドを叩くだけならいちいちCloud9環境やEC2をセットアップしなくてもよくなりました。
公式の紹介記事：https://aws.amazon.com/jp/blogs/news/aws-cloudshell-command-line-access-to-aws-resources/



## zsh化の手順
0.`.bashrc` のバックアップを作成します。(バックアップファイル名は任意)

```
$ cp .bashrc .bashrc.org
```

1.`.bashrc` を開きます。

```
$ vim .bashrc
```
2.最終行に以下を追記します。

```
zsh
```
(↓全体)

```..bashrc
# .bashrc
  
# Source global definitions
if [ -f /etc/bashrc ]; then
        . /etc/bashrc
fi
# Uncomment the following line if you don't like systemctl's auto-paging feature:
# export SYSTEMD_PAGER=

# User specific aliases and functions
complete -C '/usr/local/bin/aws_completer' aws
export AWS_EXECUTION_ENV=CloudShell

# settings for zsh
zsh
```

3.エディタを閉じます。

```
:wq
```
4.設定を反映します。

```
$ source .bashrc
```
以上で完了です。
あとは [oh-my-zsh](https://ohmyz.sh/) を導入するなど好きなようにカスタマイズします。

## Tips
* `$HOME`(`/home/cloudshell-user`)以下は永続ストレージなので、セッションタイムアウトしてもシェルの設定が保持されます。
* ストレージはリージョンごとに異なるため、別リージョンのシェルには反映されません。
* 操作に失敗してどうにもならなくなった時は 右上の[Actions] > [Delete AWS CloudShell home directory]からホームディレクトリを削除することで初期状態に戻せます。ただし、`$HOME`以下の情報は全て失われます。

## 参考
* [AWS CloudShell compute environment: specifications and software](https://docs.aws.amazon.com/cloudshell/latest/userguide/vm-specs.html)  
紹介した手順の公式ドキュメントです。
* [What is AWS CloudShell?](https://docs.aws.amazon.com/cloudshell/latest/userguide/welcome.html)  
CloudShellのユーザガイドです。
form_forについて

##概要
特定のモデルを編集・追加したい時に使う。

##使い方

```ruby:new.html.erb
form_for [引数] do |f|
~
end
```

引数にはモデルのインスタンスを指定。（@reviewなど）

##メリット
formを投稿した際に自動で切り替えてくれること
DBへの保存まで行えること

##form_tagとの使い分け
form_forはDBに保存したい内容がある時に使用
form_tagはDBに保存しなくていい時に使用

##一例

```ruby:new.html.erb
form_for [@review] do |f|
f.text_field :name
end
```

これで

```ruby:new.html.erb
<input id="review_name" name="review[name]" type="text" size="reviewモデルで設定したsize">
```
と同義になる。

f.htmlタグ :カラム名
で記述する。
form_for内におけるメソッドはformに使用するhtmlタグの分だけある。

##参考
https://qiita.com/jumpyoshim/items/ee5af466ef7959567174

https://pikawaka.com/rails/form_for
Ruby学習#2 Drawing a Shape


本日の学習内容

print 文とput文の違い

print 改行しない
puts 改行する

◎実装したコード
# Your code here!
puts "Mile"
puts " is cool"
print "Girafe Academy"
print "Mile"
puts " is cool"
puts "   /|"
puts "  / |"
puts " /  |"
puts "/___|"


◎環境デザイン
　・学習を阻害する要因を消し去った（スマホのyoutube動画）
　
●明日やること
　・【継続】既に基礎学習を終了しているため、プログラミングノートの作成に注力し、あまり時間をかけないこと。
　・Atomの環境構築　atom-runnerのインストール
【Java】Integerを==で比較した結果trueを返却していた問題

# 結論
Integer（≠int）を比較する場合に**==**を利用すると、-127～+128までの値はtrueを返却する**組み合わせ**がある。

# 何が起きたか
Integerを**==**で比較していた個所が、ある時から突然falseを返却するようになった。
※テストで使った値では正常になってしまったため気付かなかったようだ。

# 以下の2つの要素の組み合わせで発生する
## １．Integerへの値セット方法
主に以下の３通りがある。
Integer i1 = 16;
Integer i2 = Integer.valueOf(16);
Integer i3 = new Integer(16)

上記の１のパターンはオートアンボクシングされ、コンパイルされた結果は２と同様にvalueOfメソッドを利用した処理となる。（１と２は同値）
参考：[【Java】オートボクシング、アンボクシング](https://qiita.com/chihiro/items/870eca6e911fa5cd8e58 "【Java】オートボクシング、アンボクシング")


## ２．Integerのキャッシュ仕様
Integer.valueOf()は、通常設定での仕様上-128～+127まではキャッシュ（つまに同じインスタンス）を返却する仕様となっている。
参考：[Integerのソースを読んでみた](https://qiita.com/hiuchida/items/74a32193818b6d6d5174 "Integerのソースを読んでみた")

# **==**での比較時にtrueを返却する組み合わせとは？
* セットする時にInteger.valueOf()を利用している
* セットする数値が-128～+127の範囲

# 本件が気付き辛いポイント
* O/Rマッパーなどを利用しているとInteger型に値をどのようにセットしているか気にしない
* シーケンス値など0から増えていく場合に128以上の値でテストしない可能性がある
* 数値型はintが利用されている場合が多いと思う思い込み（==で比較すればいいという事になる）

# 本件と同じ問題とならないようにするには
Unitテストで限界値テストを組んであれば気付けた。
他にも、色々やりようはあるような気はしますが。

# 最後に
この件が起きるまでキャッシュの存在を知らなかったので良い気づきとなった。
（追加中）転記系テンプレート ExcelVBA




## コード
``` vb

Option Explicit

Type ShObj
  A As Worksheet
  B As Worksheet
  C As Worksheet
End Type
Dim Sh As ShObj

Type RngObj
  Og As Range  'Origin
  Tg As Range  'Target
  C As Range
End Type
Dim Rng As RngObj

Type 先頭データ行
  Og As Long  'Origin
  Tg As Long  'Target
  C As Long
End Type
Dim rH As 先頭データ行

Enum cOg  'Origin
  あ = 1
  い
  う
  え
  お
End Enum
Enum cTg  'Target
  か = 1
  き
  く
  け
  こ
End Enum

Sub 行列転置して飛び飛び範囲転記()
  On Error GoTo Err
  Set Rng.Og = Application.InputBox("転記したい範囲を選択して下さい。", "", Type:=8)
  Set Rng.Tg = Application.InputBox("転記先の最初のセルを選択して下さい。", "", Type:=8)

  Application.ScreenUpdating = False
  Dim i
  For i = 1 To UBound(Rng.Og.Value2)
    Rng.Tg.Cells(cTg.か, i).Value = Rng.Og(i, cOg.お).Value
    Rng.Tg.Cells(cTg.き, i).Value = Rng.Og(i, cOg.あ).Value
    Rng.Tg.Cells(cTg.く, i).Value = Rng.Og(i, cOg.う).Value
    Rng.Tg.Cells(cTg.け, i).Value = Rng.Og(i, cOg.い).Value
    Rng.Tg.Cells(cTg.こ, i).Value = Rng.Og(i, cOg.え).Value
  Next
Err:
  Application.ScreenUpdating = True
End Sub

Sub 飛び飛び範囲転記()
  On Error GoTo Err
  Set Rng.Og = Application.InputBox("転記したい範囲を選択して下さい。", "", Type:=8)
  Set Rng.Tg = Application.InputBox("転記先の最初のセルを選択して下さい。", "", Type:=8)

  Application.ScreenUpdating = False
  Dim i
  For i = 1 To UBound(Rng.Og.Value2)
    Rng.Tg.Cells(i, cTg.か).Value = Rng.Og(i, cOg.お).Value
    Rng.Tg.Cells(i, cTg.き).Value = Rng.Og(i, cOg.あ).Value
    Rng.Tg.Cells(i, cTg.く).Value = Rng.Og(i, cOg.う).Value
    Rng.Tg.Cells(i, cTg.け).Value = Rng.Og(i, cOg.い).Value
    Rng.Tg.Cells(i, cTg.こ).Value = Rng.Og(i, cOg.え).Value
  Next
Err:
  Application.ScreenUpdating = True
End Sub


Sub 連続範囲転記()
  On Error GoTo Err
  Set Rng.Og = Application.InputBox("転記したい範囲を選択して下さい。", "", Type:=8)
  Set Rng.Tg = Application.InputBox("転記先の最初のセルを選択して下さい。", "", Type:=8)

  Application.ScreenUpdating = False
  Dim i, j
  For i = 1 To UBound(Rng.Og.Value2)
    For j = cTg.あ To cTg.う
      Rng.Tg.Cells(i, j).Value = Rng.Og(i, j).Value
    Next
  Next
Err:
  Application.ScreenUpdating = True
End Sub

```
ロリポップ マネージクラウドのssh接続方法

公式の説明が初心者には意味が分からなかったので、なんとか成功したのログを残します。少しでも助けになれば幸いです。

#### 1.プロジェクトを新規追加。
ここから → https://mc.lolipop.jp/console
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276138/73912aa1-b462-11d2-40e1-82fdcabd30d0.png)

#### 2.鍵を新規作成。
クレジットカード登録などを終えて、プロジェクトの作成を終えたところで、
「ダッシュボード」→「SSH公開鍵の管理」→「鍵を新規作成して登録する」
→鍵が書かれたのテキストファイルが自動的にダウンロードされます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276138/94a41685-d036-7ba1-1e2b-2dfc0f23bec4.png)

#### 3.「.ssh」ファイルを自分のパソコンに作成。
公式のQ&A [ワンクリック鍵登録でダウンロードしたSSH秘密鍵を使用する](https://support.mc.lolipop.jp/hc/ja/articles/360052370234-%E3%83%AF%E3%83%B3%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E9%8D%B5%E7%99%BB%E9%8C%B2%E3%81%A7%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%E3%81%97%E3%81%9FSSH%E7%A7%98%E5%AF%86%E9%8D%B5%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B) にそって、まず自分のパソコンのターミナルで以下のコードを実行します。

僕の場合macなので、/Users/(自分のユーザー名が入る)/ に 「.ssh」というディレクトリが作成されます。
実際、保存場所はどこでもいいと思います。

```
mkdir -m 700 ~/.ssh
```

#### 4.ダウンロードした鍵ファイル（txt）を「.ssh」ファイルへ
先ほど作成した「.ssh」ファイル内に、先ほどダウンロードした鍵ファイル（txt）を、拡張子を削除して設置します。
拡張子を削除しないとなんかエラー出ました。なんでやねん。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276138/890cc389-e3ae-fcf2-bd11-bbc17e6e57f7.png)

#### 5.ターミナルで「.ssh」フォルダに移動
自分の場合は、macなのでこれでいけます。

```terminal
cd /Users/(自分のユーザー名が入る)/.ssh
```

#### 6.ファイルの設定をいじる
「.ssh」ファイルの位置で、これを実行します。
先ほどの鍵ファイルの権限を限定しておかないと後でエラーなんか出ます。なんで！

```terminal
# 警告されないよう秘密鍵ファイルの権限を限定する (ファイル名は id_ed25519 を想定しています)
chmod 400 ~/.ssh/id_ed25519
```

#### 7.全部完了。あとはssh接続のみ
__「.ssh」フォルダ内に移動した状態で実行しないといけません。__
「ダッシュボード」→「プロジェクト一覧・編集」→「SSH/SFTP」
ここのSSHコマンドをターミナルに入力すれば接続完了です。おつかれさまでした！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276138/a7d31a1c-1d43-4851-b478-e9994660e3eb.png)

```
ssh -p (ポート) (ユーザー名)@(ホスト名)
```
JavaScript・jQuery 学習のすすめ

## はじめに

私が JavaScript・jQuery に初めて触れてから 3 年以上が経ちました。
その間、AltJS である TypeScript に触れたり、React などのフレームワーク、npm・webpack・babel などの開発ツールなどにも触れてきました。

もともと C や Java を触っていたこともあり、動的型付けや関数が第一級オブジェクトであることなど新鮮なことがたくさんあり、同時に戸惑いも多くありました。
また、自分自身が非効率な学習法をしていたとの反省もあるので、個人的におすすめの学習法をここに記していきます。

## 対象

-   2 つめ以降の言語として、JavaScript を学習したい人
-   JavaScript を触ったことがあるが、改めてしっかり勉強したい人

## JavaScript おすすめ勉強法

### 歴史・言語特性を知る

JS に限った話ではないですが、いきなり文法などから入るより言語が生まれた経緯や、プログラミング言語としてどういった特性があるかなどを学びましょう。

### ECMAScript を学ぶ

#### ECMAScript とは

JavaScript を学ぶにあたって最初に学ぶべきは **ECMAScript** です。
ECMAScript を初めて聞いた人もいるかと思いますが、これは JavaScript の言語仕様を規定したものです。

JS は各種ブラウザやサーバーで動く(Node.js)ため、それぞれの環境で独自の仕様があります。
例えば、ブラウザでは DOM 操作のための機能があり、Node.js では標準入出力用の機能があります。

ECMAScript は毎年更新されており、それぞれ ES2020 のようにリリース年とともに表されます。ちなみに ES6 と言われるものは ES2015 の別名です。

#### なぜ

-   どの実行環境や FW でも役立つ知識であり、必要な知識
-   いきなり実践から入ると、基礎が身につかない

どの実行環境や FW でも役立つ知識(・必要な知識)が ECMAScript です。FW やライブラリを使うためには裏側を想像できる方が良く、そのためには JS の機能を知っておく必要があります。
例えば jQuery を触っていると、どこまでが JS 本来の機能でどこからが jQuery の機能なのかわからなくなることもあるかもしれません。

#### おすすめのサイトと書籍

選ぶ上で重要なのが、**ES2015(ES6) 以降に対応していること**と、**ブラウザでの処理に特化していないこと**です。
同じ JavaScript の入門書でも、ブラウザ寄りの本とそうでない本があるので注意が必要です。

-   [JavaScript Primer](https://jsprimer.net/)

    **超絶おすすめ。**
    これはある程度学習が進んだ後に読みましたが、ECMAScript の仕様を重点的に説明してあり、余計な解説がなくて良いです。
    また、最新の仕様(ES2020)にも対応しており、かなりおすすめできるサイトです。

-   [初めての JavaScript 第 3 版 ―ES2015 以降の最新ウェブ開発](https://www.amazon.co.jp/dp/4873117836)

    こちらは書籍のため最新の仕様には対応していませんが、ES2015 に対応していて選ぶ上での基準は満たしているのでおすすめできます。
    私はこの本で入門しました。

-   [MDN JavaScript リファレンス](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference)

    リファレンスとして。

### 基礎への理解を深める

さて、一通り ECMAScript について学びましたが、練習の場が必要かと思います。

そこで気をつけて欲しいのは、**Web アプリの作成は JS の基礎の勉強に向かない**ということです。
いきなり Web アプリを作ろうと思うと、DOM 操作を覚える必要があったり、HTML・CSS の知識が求められるため、JS を身につける上ではおすすめできません。
FW やライブラリを使うとそれらの勉強がメインになってしまいます。せっかくそれらを避けて基礎を勉強したので、基礎が不安定なうちはそれらを避けた方が良いです。

個人的なおすすめは、**Node.js で AtCoder や paiza にあるような問題を解いてみる**のが練習としてはおすすめです。
私の場合は、大学のアルゴリズムの課題を解いていました。ここで JavaScript の基礎がかなり身についたと感じてます。

### 関数型プログラミングをかじる

基礎への理解を深めると同時にやりたいことが、関数型プログラミングについて知ることです。

第一に**関数が第一級オブジェクトである**ことに慣れてください。
C や Java 出身だとここで躓くことが多いように感じます。

ここについてはおすすめの学習法は特にないです。
`関数型プログラミング`で調べて、どのようなものか調べてみると良いと思います。

### jQuery

jQuery はネット上に情報が掃いて捨てるほどあるので、ピンポイントで調べても情報が見つかるのですが、ある程度体系的に学んだ方が良いです。
軽く触るくらいなら良いですが、継続的に使う場合は、まとまったドキュメントを読みましょう。
おすすめは下の 2 つです。

-   [初心者向けの jQuery 入門講座](http://www.jquerystudy.info/)

    基本的な使い方がわかりやすいのと、リファレンスの一覧性が良いのでおすすめです。
    リファレンスは何度か全体に目を通すと良いです。

-   [公式](https://api.jquery.com/)

    最新はこちらで。

## まとめ

-   最初に ECMAScript (JavaScript のベース)を抑える
    -   おすすめは [JavaScript Primer](https://jsprimer.net/)
-   実践しつつ基礎への理解を深める
    -   Node.js で paiza や AtCoder にあるような問題を解くと基礎が身につきやすい
    -   関数型プログラミングに触れておく
        -   関数が第一級オブジェクトであることに慣れる
-   jQuery はある程度体系的に学ぶ
    -   おすすめは [初心者向けの jQuery 入門講座](http://www.jquerystudy.info/)

JS 自体が動的型付けであり、マルチパラダイムな言語であり、結構自由な言語です。
だからこそ、基礎をしっかり身につける必要があるかなと思ってます。
JavaScript~if文・switch文~

#はじめに
今回はif文・switch文についての投稿です。
ifを翻訳すると「もし～ならば、もし～なら、～という状況だと（仮定）すると」といった意味があり
if文とはまさに仮定を決めてその仮定を満たしたときに処理を行うことです。
同じような処理ができるのがswitch文です。
#if文
if文は処理を条件や状況に応じて実行内容を変えたい場合に使用します。
条件に当てはまればtrue、当てはまらなければfalseという真偽判定を行いその条件に合わせた処理が行われます。
構文は次のようになります。

```JavaScript:構文
if (条件1) {処理1} //条件1を満たせば処理1を行う
else if (条件2) {処理2} //条件1を満たさず、条件2を満たせば処理2を行う
else {処理3} //条件1も条件2も満たさなければ処理3を行う
```
JavaScripiではこのようにif・else if・elseを用いて処理の振り分けが出来ます。
次に実際の使い方の例を紹介します。

```JavaScript:実例
const total_price = 200;

if (total_price > 200 ){ 
  alert ('りんごを購入。残金もあります');
} else if (total_price == 200 ){
  alert ('りんごを購入。所持金は0円');
} else {
  alert ('りんごを購入することができません');
}
```
上記の例だと「total_price」に200が代入されておりifの条件である「total_price > 200」は満たされず実行されません。
次の eles if の条件である「total_price == 200」は満たされているのでalert ('りんごを購入。所持金は0円')が実行されます。
処理が実行されたので elseの処理は実行されません。
#switch文
switch文も条件に応じて複数の処理を使い分けたいときに使用します。
構文は次のようになります。

```JavaScript:構文
switch(式) //判定式に応じて処理を振り分ける
case 値: 処理 //条件を満たせば処理を実行する
default: 処理 //どの条件も満たさない場合の処理
```
考え方はif文と同じなので理解はしやすいと思います。
実例を使ってみましょう。

```JavaScript:実例
const name = '佐藤';

switch (name) {
  case '田中':
    alert('田中です');
    break;
  case '佐藤':
    alert('佐藤です');
    break;
  default:
    alert('登録はありません');
    break;
}
```
switch文()内の値がcaseに記述した各値と合致するもののみ処理を行います。caseの値の後には「;」ではなく「:」を記述します。
「break」は処理の終了を表す物で記述しないとその下の処理を実行します。
これを使って複数の値を処理するのに使えます。

```JavaScript:複数処理
const title = ポケモン

switch (title) {
  case 'ポケモン':
  case 'pokemon':
    alert('ポケモンもしくはpokemonです');
    break;
  default:
    alert('違うタイトルです');
}
```
「default」は「case」の値がどれも一致しないときに実行されます。省略も可能です。
#終わりに
今回の投稿は以上になります。if文、switch文共にとても便利ですのでぜひ使ってみてください。
できることの幅が広がると思います。
最後まで読んでいただきありがとうございます。
WEBアプリケーションの脆弱性まとめ

#SQLインジェクション
**概要**
DBに投げるクエリの中に不正な命令文を注入して、意図しない操作を実行させる攻撃手法。
クエリ中に外部から指定されたパラメータを使用する場合に考慮する必要がある

**被害**
外部から任意のクエリを実行できてしまう状態なため、DBにある情報が漏洩したり改ざんされたりする

**対策**
外部から受け取るパラメータにはサニタイズ（無効化）を施して、意図しないクエリが混入しないようにする

#OSコマンド・インジェクション
**概要**
OSコマンドを実行する部分に不正な文字列を注入して、意図しない操作を実行する攻撃手法。
システムに対して何らかの操作（ファイルの実行とかディレクトリの作成とか）を行う際、コマンドの中に外部から指定されたパラメータを含む場合に考慮する必要がある

**被害**
外部から任意のOSコマンドを実行できてしまう状態なため、乗っ取られたり踏み台に使われたりする

**対策**
外部から受け取るパラメータにはサニタイズを施して、意図しないOSコマンドが混入しないようにする

#パストラバーサル (ディレクトリトラバーサル)
**概要**
何かしら外部のファイルを参照する際に不正なパスを指定して、本来は見ることのできないファイルにアクセスする攻撃手法。
外部から指定されたパラメータをファイル名やパスに使用する場合に考慮する必要がある。
脆弱性自体はOSコマンド・インジェクションと同様で、攻撃の仕方が違うだけ

**被害**
本来は見ることのできないファイルが公開されてしまっている状態なため、プライベートな情報が漏洩してしまう

**対策**
外部から受け取るパラメータに意図しない文字列が混入しないようにする。
または、パーミッションを適切に設定する

#クロスサイトスクリプティング（XSS）
**概要**
スクリプトが実行可能な脆弱性をもつwebサイトへ、不正なスクリプトが埋め込まれたリンクなどを経由してアクセスさせ、ユーザが意図せずに不正なスクリプトを実行してしまう攻撃手法。
上で紹介した3つの攻撃手法はWEBアプリケーションの提供側が標的だが、XSSではユーザ側が標的になる。
外部からの入力をもとに動的にページを生成する場合に考慮する必要がある

**被害**
ユーザのブラウザ上で任意のスクリプトが実行可能な状態であるため、WEBサイトが改ざんされて表示されてしまったり、偽サイトへ移動させられたり、cookieを盗まれたり固定化されたりする

**対策**
外部から受け取るパラメータにはサニタイズを施して、スクリプトが埋め込まれないようにする

#クロスサイトリクエストフォージェリ（CSRF）
**概要**
不正なリクエストを受け付けてしまう脆弱性をもつwebアプリケーションにログインした状態で、悪意のあるリンクなど踏ませ、ユーザが意図しないリクエストを送信してしまう攻撃手法。
XSSと同様に、CSRFもユーザ側が標的になる。

**被害**
ログイン状態でのみ可能な操作を不正に実行されてしまうため、乗っ取りや、なりすましなどの被害につながる

**対策**
送られてきたリクエストが正しいもの判別するため、トークンなどを用いて正しいページ遷移でのリクエストかを確認する

#HTTPヘッダ・インジェクション
**概要**
HTTPのレスポンスヘッダに改行文字を混入させて、ユーザのブラウザで意図しない動作が実行される攻撃手法。
HTTPヘッダ・インジェクションもユーザ側が標的になる。
外部からの入力をレスポンスヘッダに含める場合に考慮する必要がある

**被害**
HTTPレスポンスに不正な文字列が追加されるため、Cookieの値を固定されたりレスポンスbodyを改ざんされたりする

**対策**
外部からの入力にはサニタイズを施して、レスポンスヘッダに意図しない文字列が混入しないようにする

#オープンリダイレクト
**概要**
リダイレクト先が不正に変更され得る脆弱性を持つページへ、悪意のあるリダイレクト先を設定したリンクを踏ませ、意図しないサイトへ移動させられる攻撃手法。
オープンリダイレクトもユーザ側が標的になる。
外部からのパラメータを使用してリダイレクトを行う場合に考慮する必要がある。

**被害**
不正に設定されたリダイレクト先でパスワードなどを入力してしまい、機密情報が漏洩する

**対策**
外部からの入力にはチェックを行い、不正なリダイレクト先が設定されないようにする。
または、ホワイトリストを設定してそこへのリダイレクトのみを許可する。

#まとめ
ほとんどの攻撃手法にも共通する対策は、外部から受け取るパラメータをそのまま使用しないということ

|名称 | 攻撃方法 | 標的 |
|:-:|:-:|:-:|
| SQLインジェクション | SQL文を評価する部分に不正な文字列を混入 | DBサーバ |
| OSコマンド・インジェクション | OSコマンドを評価する部分に不正な文字列を混入 | WEBサーバ APIサーバ|
| パストラバーサル | 不正なファイル名やパスを指定 | 〃 |
| XSS | 不正なパラメータを含むリンクを踏ませる | ユーザ |
| CSRF | 〃 | 〃 |
| HTTPヘッダ・インジェクション | 〃 | 〃 |
| オープンリダイレクト | リダイレクト先を改ざん | 〃 |
Notionでガントチャートを作る

アルプ株式会社でエンジニアをしています、集約のエンティティ@pictinyです。
これは[Notion Advent Calendar 2020](https://qiita.com/advent-calendar/2020/notion) 23日目のエントリです。
22日目は[Notionでマルチアカウントを使う](https://qiita.com/pictiny/items/54bedf75dba43d9bda2e)でした。

# ガントチャート
開発の計画を立てるときにガントチャートを作りたいことがあります。

## タイムライン
Notionのデータベースには表示を切り替える[View](https://qiita.com/pictiny/items/dba21dd5d226ac5b6849#view)を設定できます。
最近新しく追加されたタイムラインViewを使うと、以下のような時間軸を使った表示ができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427952/e6a55db1-a749-640b-91f7-da6e7c4b0e90.png)

日付のプロパティが1つでもあればタイムラインが使えますが、日付のプロパティが2つ以上あれば、 `Start date` と `End date` に設定することで、期間を表現することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427952/accd17c3-345d-bd59-32be-057f849ac8ad.png)

タイムラインでは時間軸の縮尺も選択できるので、長期間であっても表示には困らないと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427952/24f1278d-9f12-57f7-68e4-d75abde3983a.png)

# まとめ
Notionで開発タスクを管理するときは、タイムラインでガントチャートを作ると計画が立てやすいかと思います。

公式ドキュメントは[Timelines](https://www.notion.so/Timelines-3acc6722ccf24d03a53ea4e449627a60)にありますので、そちらもご覧ください。
改行コードを可視化するシェルコマンド

この文字列の改行コードなんだっけ？というに時たまにお世話になります。

## まずは改行コードの種類をおさらい

### CR (Carriage Return / キャリッジリターン) 

`\r` 復帰を意味する。古い Mac OS (バージョン9まで) で改行コードとして採用されていた。

### LF (Line Feed / ラインフィード)

`\n` 改行を意味する。Linux や macOS で改行コードとして採用されている。

### CRLF

`\r\n` 上記2つが連続したもの。Windows などで改行コードとして採用されている。

## 可視化するコマンド達

### hexdump コマンドを使用する場合 (パイプライン)

```sh
$ echo -e "AAA\r\nBBB" | hexdump -c
0000000   A   A   A  \r  \n   B   B   B  \n
```

### od コマンドを使用する場合 (パイプライン)

```sh
$ echo -e "AAA\r\nBBB" | od -c
0000000   A   A   A  \r  \n   B   B   B  \n
```

ファイルの文字コードを視覚化する場合は以下。

```sh
$ cat tmp.txt | od -c
0000000   A   A   A  \r  \n   B   B   B  \n
```

### printf コマンドを使用する場合 (変数)

```
$ var=$(echo -e "AAA\r\nBBB")
$ printf '%q' "$var"
$'AAA\r\nBBB'
```
[NeosVR]Impulse及びFlowについて


#はじめに
「QRコードをLogiXで読む」という記事を書こうとしたら記事ひとつでは収まりきらないことに気づいたのでそっちは後で分けて公開して今回は別のことについて書くことにししました。

今回はLogiXを組む上で重要となるImpulse(及びFlow)に関連する話をいくつか書いきました。
ローカルとグローバルについての理解が必要であるため、同アドベントカレンダーの[見ている人によって値が違う？？？](https://qiita.com/Rabbuttz_/items/a30f8992b836a663baff)を先に読むことをおすすめします。
また、この記事はLogiXをある程度触っている人向けです。

#FireOnTrueとLocalUser
入力されたBooleanがTrueになった時にPulseを出すノードには、FireOnTrueとLocalFireOnTrueがあります。FireOnTrueは入力されたUserを元にしてBooleanの評価を行い、LocalFireOnTrueは全てのUserがそれぞれでBooleanの評価を行います。
FireOnTrueにLocalUserを繋げるた場合、一見LocalFireOnTrueと同じ挙動をしそうですが、繋げてUserによって値の違うBooleanを入力するとBooleanが変わっている訳でもないのにPulseが何度もでてしまいます。
その原因は**FireOnTrueはBooleanが変わったかどうか実際に評価する時にUserの区別をしていない**ということです。
このためUserが切り替わった時にそのUserから見たBooleanがTrueだった時、FireOnTrueは「BooleanがFalseからTrueに変わった!」と誤解してしまいます。
![4D8176E2-B09A-4556-B96E-B4716710BD5C.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/921268/0e481b86-85fd-eda6-013f-c1804ba4109b.png)
また、FireOnTrueは一度に複数のUser分のBooleanを評価することは出来ません。前回の値を保存しておく入れ物が1つしか無いような感じです。そのためA→B→C→A...という風に順番に評価することになり、何度もPulseが出てしまいます。
LocalFireOnTrueの場合はUserごとに評価している（User分の入れ物がある）ため、Pulseが何度も出るということは起こりません。
![1AE6BF79-9134-4727-AA9D-7ECF2FAD316D.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/921268/b0134be9-d1db-0a23-4b24-7bd11158a146.png)

#LocalFireOnTrue
ゲーム等を作っていると、User全員分のPulseを出したい時が多々あります。そこで便利なのがLocalFireOnTrueです。本来LocalFireOnTrueはUserごとに値の違うBooleanを入れて使いますが、ここにBooleanLatchなどのグローバルで変わるBooleanを入れることで全員が各々で評価を行い、全員分のPulseを出すことができます。UserListの取得等に使えるので覚えておきましょう。

#長いループ処理とセーフティ
赤くなったLogiXノードを見たことがありますか？純粋にノードが壊れた時も赤くなりますが、大抵の場合はセーフティによってノードのEnableが切られることが原因です。誤ってPulseの入力と出力を繋いでしまったりループから抜けるためのIfを間違ってしまい永遠にループしてしまった時などに良く起こります。
しかしどうしても数千、数万回の処理を走らせたいということもありますよね？そんな時に使うのがUpdatesDelayノードです。UpdatesDelayは入力されたintフレームだけPulseを遅らせることが出来ます。これを1度の処理の最後に入れることで意図的に1フレームの遅延を発生させ、1フレームで全ての処理を行おうとするのを防ぐことが出来ます。数が少なくても1度の処理が重い時等にも使えます。
ただし、Forノードは処理が終わったタイミングで次のPulseを出しているのではなく単純に順番にPulseを出しているだけなので、UpdatesDelayで遅延を入れることができません。そのためUpdatesDelayを使う場合はIfとVariableIntを用いたループ処理を使いましょう。

#LogiXの並行処理
どのノードも基本的に1つのノードから同時に複数のPulseが出ることはありません。LocalFireOnTrueは全員分が微妙にずれて出てきますし、Sequenceは上から順番に出てきます。このため、繋ぐ順番によって処理が変わってしまいます。
ForもSequenceはその全ての処理を1フレーム内で完結させようとするため、一見並行処理をしているように見えますが、実際は順番に処理を行っているのだということを理解しておきましょう。

#終わりに
今回の記事ではImpulseを扱うにあたってつまずきやすいこと、思いつきづらいことを中心にまとめました。

アドベントカレンダーというものを知って前回、今回と人生で始めて記事を書いてみました。私は文章化するのがあまり得意ではないのでだいぶゆっくりになってしまいますが、わりと楽しかったので記事を書いてちょっとずつ自分の持ってる知識を広めていきたいと思います。
マンガでわかる文書化軽視アンチパターン

![B46E0727-92CD-4019-BF34-E371FDCDE663.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11525/f30d0559-49fa-52fd-d457-3d9cd8dc6da3.png)
http://wiki.c2.com/?ArchitectureByImplication

日本語のタイトルからその意味をもっとも誤解されやすいのがこの文書化軽視パターンです。このアンチパターンが語っているのは、成果物としてのドキュメントではなく、実装前のアイデア整理のためのドキュメントです。ポイントは文書を残すことではなく、「プログラミングの前に、まず母国語で考えろ」ということです。

英語では Architecture By Implication と名付けられていますが、こちらの方がそのゴールをうまく物語っています。Implication (含意) の逆は Explication (説明) です。言語化されたアイデア分析のプロセスといったニュアンスを持つ言葉です。

書籍の中で日本語タイトルや本文内容が文書化を強く主張しているのは、おそらく、アンチパターン本が書かれた時点では、まだそのためのツールがドキュメントしかなかったからだと思われます。つまり、当時まだこの世にテスト駆動開発が存在しなかったということです。

設計手法としての TDD は、先にアイデアに名前を付けさせ、その仕様をテストケースで表現するという点で、当時ドキュメントしかなかったのに代わって、画期的な仕様説明手法となりました。実践的モデラーによるドメインモデルのプロトタイピングにおいては、文書より優れているかもしれません。

手法は何であれ、このアンチパターンが主張したいのは、要求に応じた動きをいきなり実装した結果は、アーキテクチャではないということです。そこには、アイデア整理から生まれた語彙 (DDD でいうユビキタス言語) の代わりに、実際に動かして試さなければわからない「仕様(笑)」があります。

解決のための手続きしか書かれていないと、コードは非常に脆くなります。なぜなら、その部分に「何であるか」を指す名前が付いていないからです。各自が詳細手続きの意味をそれぞれの視点で解釈すると、誰も読めない [スパゲティコード](https://qiita.com/tanakahisateru/items/30f7a9ddf01f46fa7c08) 化がどんどん悪化していきます。

実際の動きはモックオブジェクトで代替してもよいので、まずコードを読んだときそれが何であるかを正しく理解できるように記述することが大事です。アーキテクチャをアーキテクチャたらしめるのに最も重要なのは、現象の結果ではなく、概念の説明です。実行時のコンピューターにとって何の意味もないそれは、ソースコードにとっては自身の強度を保つための、大事な形状構造=アーキテクチャです。

あ、でもいくらゴールがアーキテクチャだからって、それだけじゃメンバーがしんどいですよね。適度な自然言語はチーム開発にすごく有用なので、そっちもちゃんと活用しましょうね。
【祝！出航】お気持ちほっこりサービス「それゆけ はこぶね かんしゃ丸」


ハッピーメリークリスマス！　こんにちは、オンライン英会話サービスを提供する株式会社ベストティーチャーでRailsエンジニアとして元気に働く たわら です。

本記事は[クソアプリ Advent Calendar 2020](https://qiita.com/advent-calendar/2020/kuso-app)の24日目の記事です。


# 悪の情報って伝播しやすいですよね
悪の連鎖ってありますよね。悪口・悪事の情報がまた同じような情報を引き寄せてしまうというような。「弱いものたちが夕暮れ、さらに弱いものを叩く」なんてブルーハーツの詞もあります。

こういうときにボクは頭を抱えてしまいます。悪の連鎖に対して、一人の人間としてどう立ち振る舞ったらいいのだろうかと。

そしてボクは、アプリを作ることにしました。

# 善の情報を伝播させればいいのでは？

かの村上春樹は小説かエッセイのどこかで「いつの時代も善と悪が半々だと認識している。人間の中でも半々」うんぬんと語っていました。たしか。そして、かのカート・ヴォネガット・ジュニアは小説かエッセイのどこかで、「なるべく人生の良い面だけ見て生きるように」うんぬんと言葉を残しています。

つまり、悪の連鎖はたしかにあるけれど、同じくらい善の勢力があり、拮抗しているということです。悪の波紋と善の波紋がぶつかり合っているのですね。そしてなるべく善の勢力の情報を見るように、、、だけど耳目を引くのは悪の情報が多い気がする、、、

そうだ！ 善の勢力を可視化・体験できるサービスを作ればいいんだ！ 善の波紋！　波！　船！　はこぶね かんしゃ丸！

という背景から生まれたのが今回ご紹介する「それゆけ はこぶね かんしゃ丸」です。


# 誰かの小さな感謝に出会える お気持ちほっこりサービス

https://kansyamaru.herokuapp.com/

[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/606292/6292af4a-edab-a4de-e811-961ce4ff7f8c.png)](https://kansyamaru.herokuapp.com/)



# 遊び方

日々の小さな感謝をかんしゃ丸に載せて、「離岸させ」て船出を見送るだけです。かんしゃ丸はあなたの小さな感謝を誰かに届け、そして誰かの小さな感謝を届けてくれます。この世界は優しい誰かがいて、それを感謝する心優しい人がいる、ということを感じることができます。ほっこりできますね。そしてその小さな感謝をTweetすることで、誰かの小さな感謝の波紋をさらに広げることができます。

[![Image from Gyazo](https://i.gyazo.com/4eccff8ffcac9e882e36efba900ec199.gif)](https://gyazo.com/4eccff8ffcac9e882e36efba900ec199)

# 使用技術
### Rails
個人開発アプリは２つ目です。簡単なアプリでしたが、いい勉強になりました。

### javascript
個人開発でははじめて使いました。時間が経ったら要素が現れる、という簡単な操作ですが、できたときはうれしかったですね。

### CSShake
かんしゃ丸の画像を揺らしたかったのでCSShakeを利用しました。こういうのあるんですね。荒波を超えていく感じが出せたので気に入っています。

CSShake
http://elrumordelaluz.github.io/csshake/

# 感想
善の勢力を可視化する一助になれば幸いです！
アプリ作るのって楽しいですね。どんどん作っていきたいです。ちなみに かんしゃ丸 艦隊を組む予定でいます。

* 時を翔けるぞ はこぶね かんしゃ丸
* 次元を超えろ はこぶね かんしゃ丸
* 音速早いぞ はこぶね かんしゃ丸

かんしゃ丸 の画像はビックリマンシールっぽい感じのイラストにしたいです。

# 明日は？？？
@Yui_active さんです。乞うご期待です！

# 宣伝
オンラインで英語を「書く」「話す」能力を磨く機会を提供するサービスを提供しています。
iOSエンジニアを募集していますので、よかったらご検討ください。

英語を学びながら働きたいiOSエンジニア募集 - Qiita Jobs
https://jobs.qiita.com/employers/266/postings/1102
centos7 初期設定内容

#前置き
centosでのコマンドの確認とか気軽にできる環境が欲しかったので作成しました。
自分の作業のメモがわりの記事です

#環境情報
Mac OS Mojave 10.14.6
VMware Fusion 11.5.1
CentOS Linux release 7.9.2009 (Core)


#インストール後以下の順で実施

#host名設定
```
# vi /etc/hostname
```

#SELinux無効化
```
# getenforce
```
Enforcing
と出たら有効化状態

```
# vi /etc/selinux/config
```

SELINUX=enforcing
↓
SELINUX=disabled
へ変更


```
# reboot
```

```
# getenforce
```
disabled
になっていたらOK


#Redmineを導入してみます
```
# yum install -y epel-release
```
```
# yum install -y ansible git
```
ansibleとgitを導入


```
# git clone https://github.com/farend/redmine-centos-ansible.git
```
playbookの導入

```
# vi redmine-centos-ansible/group_vars/redmine-servers
```
db_passwd_redmineの値を任意のものに変えておく


```
# cd redmine-centos-ansible
```
ディレクトの移動をして

```
# ansible-playbook -i hosts site.yml
```
あとは待つだけ


#参考
https://github.com/farend/redmine-centos-ansible
【試作運用】赤ちゃん部屋の環境モニタリングをしてみる

#概要

プロトアウトスタジオアドベントカレンダーの記事ということで、プロトタイプをしてみた記事を書きました。

テーマは「**赤ちゃんの過ごす快適な環境づくり**」です。
様々な要素があると思いますが、今回は**快適な環境**に着目してまずは**環境モニタリング**のプロトタイプを作ってみました！

企画編は、「[**【企画編】赤ちゃん部屋の環境測定システムを作ってみた**](https://qiita.com/kmaepu/items/ebd5181aa5155ba86e54)」の記事で書いているので、この記事には連続稼働させるための変更点をまとめました。

主に次の2点を変更しました。

 - 温度、湿度のオフセット値を補正。
 - herokuへデプロイし、enebularを立ち上げておく必要をなくした。

#変更点
##温度、湿度のオフセット値補正
M5StickC用のENV HATをそのまま使うと、手元の温湿度計が示す値とかけ離れていたので、オフセット値の補正をしました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/2b325466-86e3-e1bd-a4d3-1c1dc7bb92c2.png)

補正方法ですがかなりざっくりとしたやり方で、起動してから5分程度そのままにし、5分経過時点の手元温湿度計に合わせるようにしました。

M5StickCのオフセット補正コードは次のようにしてみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/3fbfe0bf-c443-ac3e-107f-04bc9c40d295.png)

##herokuへデプロイ

enebularからHerokuへのデプロイは[こちら]
(https://docs.enebular.com/ja/deploy/deployflow/heroku/)を参考にしました。

enebularのアセット画面から**Deploy**を選択し、HerokuのAPI keyを登録するだけです。

#おわりに
これらの変更で、enebularを開いておかなくても動くのと、取得値か20%くらいずれていたのを1%程度に抑える改善ができました！

参考までに、作業部屋の室温と湿度をグラフ化してみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/6c2e08a1-769a-b3af-a823-48cde42dbc3b.png)

これで1週間くらい運用してみようと思います。
[Linux]ファイル閲覧時の文字化け対処法

ファイル閲覧時に文字化けさせずに閲覧する方法の覚書き

## 環境

* CentOS Linux release 7.9.2009

## 手順

### 1. 対象ファイルの文字コードを調べる

(1) 以下のコマンドを実行

```
nkf --guess ファイル名
```

* ファイル名がhoge.phpの場合は以下の通り

```
nkf --guess hoge.php
```

### 2. 対応する文字コードでファイルを開く

(1) 以下のコマンドを実行

```
cat ファイル名 | nkf 文字コード指定（入力関係）
```

* ファイル名がhoge.php, 「1. 対象ファイルの文字コードを調べる」の結果が「EUC-JP」の場合は以下の通り

```
cat hoge.php | nkf -E
```

※nkfコマンドの入力関係のオプション

|オプション  |文字コード  |
|---|---|
|-J  |ISO-2022-JP |
|-E |EUC-JP |
|-S|Shift-JIS|
|-W,-W8|UTF-8|
|-W16|UTF-16（リトルエンディアン）|
|-W16B|UTF-16（ビッグエンディアン）|

## 終わりに
最近、文字化けで読めない問題によく遭遇するので、すぐ対応できるようにしました

## 参考

* [Linux ファイルの文字コード確認・変換 | Qiita](https://qiita.com/H_Neco/items/48fa2eaaa0d9af2e45fe)
* [文字コードを指定してファイルを読む方法 | なおべりーのブログ](http://naoberry.com/tech/charactercode/)
* [【 nkf 】コマンド――文字コードと改行コードを変換する | atmarkIT](https://www.atmarkit.co.jp/ait/articles/1609/29/news016.html)
Ubuntu 再起動時に自動ログインする方法

# クイックセットアップガイド (CUI)
```shell:Shell
sudo systemctl edit getty@tty1.service
```
```
[Service]
ExecStart=
ExecStart=-/sbin/agetty --noissue --autologin <USERNAME> %I $TERM
Type=idle
```
入力し終えたら、`Ctrl + X` → `y` → `[ENTER]` の順に押す。

# はじめに
Ubuntu を起動・再起動する際、通常はログインユーザ名とパスワードを入力する必要がありますが、ユーザ名とパスワードを入力せずに自動でログインされた状態にする方法を紹介します。

# 環境
Ubuntu 20.10

# GUI (Ubuntu Desktop)
「設定」>「詳細」>「ユーザ」と進んでいくと「自動ログイン」という項目があるので、オフからオンにします。パスワードを要求されます。

[Ubuntu 18.04 LTSのデスクトップに「自動ログイン」する方法](https://linuxfan.info/ubuntu-1804-auto-login)

# CUI (Ubuntu Server)
以下のコマンドを実行します。

```shell
$ sudo systemctl edit getty@tty1.service
```

エディタ (nano) が開くので、以下をコピペします。

```
[Service]
ExecStart=
ExecStart=-/sbin/agetty --noissue --autologin <USERNAME> %I $TERM
Type=idle
```

`<USERNAME>` には自動ログインしたいユーザのユーザ名を入力します。現在のユーザ名は `whoami` コマンドでわかります。

## nano の使い方を軽く説明
ちなみに nano に慣れていない人もいるかと思います (自分もそうです) ので一応ファイルの保存の仕方を説明しておきます。

nano には Vim のように通常モードとかインサートモードとかありませんので、エディタが開いたらそのまま上記をコピペします。

次に `Ctrl + X` を押します。`Save modified buffer?` と訊かれるので `y` を押してファイルを保存します。`File Name to Write: ...` と表示されたらリターンキーを押せば終了します。

ちなみにこのファイルは nano でしか開けないようです。`EDITOR=vim` としてみましたが nano で開きました。

これで再起動したときに自動でログインされたはずです。Ubuntu Server の場合はちゃんと確認するためには Ubuntu Server を動かしている PC をモニターにつなげないとわかりませんが。

# 有用性
通常ユーザで起動するデーモンは、起動・再起動後に **一度そのユーザでログインしていないとデーモンが起動しない** ようです。たとえば PulseAudio のデーモンなどです。

通常ユーザで起動するデーモンは、システムワイドで起動するデーモンとは区別されます。たとえば PulseAudio をインストールする[^1]と、システムワイドにはデーモンファイルがありませんが、通常ユーザ用のデーモンファイルが用意されます。

```shell
# システムワイドには存在しない
$ systemctl status pulseaudio
Unit pulseaudio.service could not be found.
```

```shell
# 通常ユーザ用には存在する
$ systemctl --user status pulseaudio
● pulseaudio.service - Sound Service
     Loaded: loaded (/usr/lib/systemd/user/pulseaudio.service; enabled; vendor preset: enabled)
     Active: active (running) since Sun 2020-12-20 07:46:19 UTC; 3 days ago
TriggeredBy: ● pulseaudio.socket
   Main PID: 1911 (pulseaudio)
     CGroup: /user.slice/user-1000.slice/user@1000.service/pulseaudio.service
             └─1911 /usr/bin/pulseaudio --daemonize=no --log-target=journal
```

[^1]: Ubuntu Desktop の場合は最初からインストールされています

ユーザログイン時ではなく、システム起動時・再起動時にこういったデーモンを自動的に起動したい場合に、起動時の自動ログインが便利です。

今回紹介した方法以外で、このような通常ユーザ用のデーモンを自動起動したい場合のやり方として、以下の 2 つが考えられます。

- 通常ユーザ用のデーモンを無効化して、システムワイドに (root 権限としてそのデーモンを) 自動起動するように変更してしまう方法
- 本来 root 権限で実行するデーモンを、通常ユーザに代替して自動起動する方法

ちなみに 2 つめのほうは、要するにこういうふうに起動するということです。

```
ExecStart=/usr/bin/sudo -u <USERNAME> pulseaudio
```

PulseAudio で試してみましたが、どちらもうまくいきませんでした。そもそも PulseAudio はシステムワイドに起動することを想定していないため、うまく動作しませんでした[^2]。通常ユーザに代替する方法も、デーモンが起動せずうまくいきませんでした。

[^2]: 一応、システムワイドに起動する方法は公式で説明されているのですが……。[Running PulseAudio as System-Wide Daemon](https://www.freedesktop.org/wiki/Software/PulseAudio/Documentation/User/SystemWide/)

というわけで、通常ユーザ用のデーモンは、通常ユーザのまま起動する、そしてシステム起動時に自動的にそのデーモンを起動したい場合は自動ログインにする、というやり方が一番無難そうです。

# 参考サイト
[How can I get autologin at startup working on Ubuntu Server 16.04.1?](https://askubuntu.com/questions/819117/how-can-i-get-autologin-at-startup-working-on-ubuntu-server-16-04-1)
端末上のghciでグラフィック

# 目的

近年、端末が画像に対応してきました。chromebookのcrostiniでつかうhterm、macos上のiterm2、linuxのxtermなどです。
今回端末上のghciで画像を表示するのが目的です。

これまでも[IHaskell](https://github.com/gibiansky/IHaskell)というjupyter notebook上でHaskellを動かすものがあり、hvegaやgnuplotパッケージをつかってグラフが書けました。

しかし、セットアップが難しく、必要なパッケージのセットアップ、GHCのバージョン、OSといった環境を一式そろえるのが大変した。
nixをつかってセットアップを安定化させるもののありますが、nixを使ってないプロジェクトや、既存のnixのプロジェクト上でIHaskellのセットアップをするのは難しいです。さらに動作フローが複雑で、プロセル間通信などがあり、バグやセットアップのミスをチェックすることも困難でした。

端末上のghciで画像を表示することで、これらのセットアップの手間を省きます。

# 端末上の画像のフォーマット

端末上の画像のフォーマットには次の二つがあります。
主要な端末はどちらかをサポートしているように見えますが、vscodeの端末[xterm.js](https://github.com/xtermjs/xterm.js/)や[windows terminal](https://docs.microsoft.com/ja-jp/windows/terminal/)はどちらもサポートしてません。
今回この二つを出力するライブラリを作成しました。

* [Sixel](https://en.wikipedia.org/wiki/Sixel)
    * DECが開発した物理端末上の画像のフォーマット
    * カラーパレットを使い6ピクセルごとにエンコードする方式
    * 対応端末：xterm、mlterm、rlogin
* [OSC1337](https://iterm2.com/documentation-images.html)
    * iterm2で開発された画像フォーマット
    * jpegやpngなどのデータをbase64エンコードするだけの方式
    * 対応端末:hterm(chromebook)、iterm2、mlterm、rlogin

# Sixelライブラリ

端末上で画像を出力する[sixel](https://hackage.haskell.org/package/sixel)ライブラリを作りました。
ToSixelまたはToOSCのtype-classのinstanceなら画像になるようにしています。
[JuicyPixels](https://hackage.haskell.org/package/JuicyPixels)の画像データもそのinstanceになっていて端末上で画像として表示できます。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15901/9a255a04-88f7-e35c-105e-b88291b21187.png)

# ghci上での使い方

画像をサポートした端末上で、sixelライブラリをインストールしておきます。
interactive-printを下記のようにしてghciを起動します。

#### OSC 1337をサポートした環境(iterm2やhtermなど)の場合

```
> cabal repl "package名" --repl-options "-interactive-print=Data.OSC1337.putOSC"
```

or

#### Sixelをサポートした環境(xtermやmltermなど)の場合

```
> cabal repl "package名" --repl-options "-interactive-print=Data.Sixel.putSixel"
```

hvegaを使ったサンプルプログラムは[こちら](https://github.com/junjihashimoto/sixel/blob/master/examples/hvega/Main.hs)です。
あらかじめ表示したいものに対してToSixelまたはToOSCインスタンスを定義しておけば、下記のように端末上でグラフが表示できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15901/1dfaaefc-bef4-f7c6-b4e4-609e92bd8351.png)

# まとめ

* SixelフォーマットとOSC1337フォーマットに対応した端末上で画像を表示するためのsixelパッケージを作成
* ghci上で画像を表示。今回はhvegaのグラフをサンプルで使用。
Herokuコマンドまとめ

# はじめに
コマンドをまとめておくと便利だと思いこの記事を作成した。
また、前提としてHerokuアカウントを作成しているということ。
#Herokuを使う理由
通常デプロイには多くの時間と費用がかかるがHerokuは基本無料でデプロイの手間が少ないから。
# まとめる内容
・Herokuインストールコマンド
・ログインコマンド
・アプリケーション作成コマンド
・MySQLを使用できるコマンド
・暗号化した値の管理
・Heroku上にデプロイ
・マイグレーションファイルを実行
・公開したアプリケーションの確認
・デプロイ後のエラー

##Herokuインストールコマンド
コマンド

```
 brew tap heroku/brew && brew install heroku
```
バージョンを確認コマンド

```
 heroku --version
```
##ログインコマンド
```
#　ログインコマンド
heroku login
```
下記の表示が出ればログイン成功。

```
Logged in as sample@sample.com
```
##アプリケーション作成コマンド
コマンド

```
heroku create アプリケーション名
```
アプリケーションの作成に成功すると下記のように表示される。

```
Creating app... done, ⬢ アプリケーション名
https://アプリケーション名.herokuapp.com/ | https://git.heroku.com/アプリケーション名.git
```
##MySQLを使用できるコマンド
HerokuはデフォルトでPostgreSQLというデータベースになっている。
そこでClearDBアドオンを追加することによって設定できる。
###ClearDBアドオン
MySQLを設定できるコマンド
下記のようにコマンドを入力

```
heroku addons:add cleardb
```
次にMySQLに対応するGemを使うために下記のコマンドを入力

```
heroku_cleardb=`heroku config:get CLEARDB_DATABASE_URL`
```
さらに下記を入力

```
heroku config:set DATABASE_URL=mysql2${heroku_cleardb:5}
```
これでURLの再設定ができた。
##暗号化した値の管理
###credentials.yml.enc
情報を暗号化する際に用いるファイル
###master.key
credentials.yml.encを復号するための鍵の役割

このままだとGitのデフォルトの仕組み上master.keyは管理されないのでデプロイできない。

###環境変数
暗号化したデータを環境変数にセットする事ができる。
####環境変数の参照コマンド

```
heroku config
```
####環境変数の追加コマンド

```
heroku config:set 環境変数名="値"

ex)heroku config:set RAILS_MASTER_KEY=`cat config/master.key`
```
####環境変数の削除

```
heroku config:unset 環境変数名
```

##Heroku上にデプロイ
コマンド

```
git push heroku master
```
##マイグレーションファイルの実行
コマンド

```
heroku run rails db:migrate
```
##公開したアプリケーションの情報確認
コマンド

```
heroku apps:info
```
###ブラウザ上でアプリを開く

```
heroku open
```

##デプロイ後のエラー
ログを確認して原因を見つける。

```
heroku logs
```
最後のログの確認

```
heroku logs --tail
```
#参考にしたページ
[【超入門】基礎から始めるHerokuの使い方（初心者向け）](https://tech-blog.rakus.co.jp/entry/20200813/heroku)