OmniAICreator/Qiita-1.07M huggingface dataset:
職務範囲が増え続けるのを防ぐジョブディスクリプション・ポーカー

「それもお願い❤」に対する防衛術

## 前口上
仕事をしていると元々やっていなかった業務が急に増えることがあります。単に前に担当していた人が辞めて自動的に引き継いだ場合もあるでしょうし、昇進して職責が変わった場合もあるでしょう。また急成長企業だとビジネスの成長によっていままでなかった業務が自然発生することも多いです。

[ダンバー数](https://zenn.dev/hiromichinomata/articles/bae3af6c7c2140#%E3%83%80%E3%83%B3%E3%83%90%E3%83%BC%E6%95%B0%3A-%E5%A4%A7%E6%9E%A0%E3%81%8B%E3%82%89%E6%8D%89%E3%81%88%E3%82%8B)でいうところの村や部族を超えるような組織だと職務要件が定まってきて、異なるチームのとある職種Aのやることの差分がほとんどないかもしれないですが、**ラーメン屋より多いといわれるIT企業では得てして組織サイズが小さく間のボールを誰が拾うかでもめやすい**ように思います。

意図的につらいボールを取りに行くことで社内ポジションを優位にすることもあるので、すべてが悪いわけではないですが、時にはつらくなってしまうこともあります。辞めた人の仕事を巻き取って、新しい開発に必要な本来の職責と少しずれた仕事も巻き取って、気づいたら俺/私やること多くない？

そんな時に周囲を巻き込んで**ジョブディスクリプション・ポーカー**をやってみるのはどうだろう？とふと思ったので素案を置いておきます。

## デリゲーション・ポーカーとは
ジョブディスクリプション・ポーカーはデリゲーション・ポーカーの亜種なのでまずはデリゲーションポーカーから説明します。

**デリゲーションポーカーは管理者・メンバー間で権限委譲の合意を細かくとっていくためのツール**です。業務を7つのカテゴリーに分けて整理します。カテゴリーは以下です。

1. Tell: I will tell them
2. Sell: I will try and sell it to them
3. Consult: I will consult and then decide
4. Agree: We will agree together
5. Advise: I will advise but they decide
6. Inquire: I will inquire after they decide
7. Delegate: I will fully delegate

Lv1が何も委譲していなくてLv7が完全委譲している状態。マネージャーが決めて伝えるから相談割合が増えていってLv4が均衡点。事後報告でいいよを経て完全に任せるに。

マネジメント3.0のツールなので基本上下関係のある二人の業務を整理するのに使います。

## 仕事がかぶる職種間でジョブディスクリプション・ポーカーをする
このフレームワークを聞いてもったいないと思ったのは権限委譲に特化している部分です。任意の職種間のボールを誰が拾うかの調整にも使えると思うんですよね。

営業とPMでもいいですし、PMとEMでもいいです。EMとテックリードの間の仕事でもいいかもしれません。

**デリゲーションポーカーを拡張して仕事がかぶる職種間でジョブディスクリプション・ポーカーをやってみる**のはどうだろうというのが提案です。

7項目を改変するとこんな感じでしょうか。細かすぎたら5項目や3項目に減らしてもいいかもしれないです。

1. A完結: Aが全部決める。自分からBに報告はしない
2. A決B報:Aが決めてBに報告する
3. A決B相: Aが骨子を作ってBに相談してAが決める
4. AB議論: AとBがフェアに議論して決める
5. B決A相: Bが骨子を作ってAに相談してBが決める
6. B決A報: Bが決めてAに報告する
7. B完結: Bが全部決める。自分からAに報告はしない

デリゲーション・ポーカーだと物理カードもあるのですが結果はデリゲーションボードにまとめることが多いようです。

ジョブディスクリプション・ポーカーでもカンバン系のツールかスプレッドシートにまとめるとよいように思います。

## ジョブディスクリプション・ボードを求人票に昇格させる
ジョブディスクリプション・ボードの効果は間のボールの整理だけではありません。

別チームでの同一職種間のやり取りが可視化されてくると、組織全体での職務要件が定まってきます。「うちのチームではこの業務は職種Aがやっているけれど会社全体でみると職種Bが担当しているので寄せよっか」という判断材料になります。

**間のボールが多い組織だと入社した後のサプライズが多い**と思うんですよね。その会社でしかないカスタム職種を作り混みすぎても応募してくれる人が減るのでサステナブルではないのですが、こういった整理をしていくことで求人票の要件の確度があがっていくようにも思います。

## 終わりに
**間のボールを拾ってくれる人が他にもいる場合に**職務要件が増え続けるのを防ぐ方法について書きました。

間のボールを拾ってくれる人が他にもいない場合はうーんどうですかね、SaaS活用や内製システム開発によって業務を軽くする、コンサルやフリーランスを活用するのは一つの方法ですが、本質的には同じレベルの人を採用する以外解はない気もします。
GMOペパボの開発生産性向上への取り組み ～プレビュー環境の構築～

この記事は 開発生産性 Advent Calendar 2022 の7目の記事です。
6日目の記事はharuki62さんの[開発組織が事業のLTV最大化につなげる仕組みづくり](https://note.com/haruki_m/n/nc68ec98843d5)でした。

こんにちは。@kenchankunsanです。GMOペパボ株式会社で技術責任者をしています。

GMOペパボでは、開発生産性に関する指標を計測・可視化する取り組みとして、[Four Keysの計測](https://tech.pepabo.com/2022/01/06/four-keys-dashboard/)や、Pull Request単位でのテストカバレッジなどの[コードメトリクスの計測](https://tech.pepabo.com/2022/04/25/code-metrics-dashboard/)に取り組んできました。また、開発から少し離れた分野ではカスタマーサポートにおける[問い合わせ対応の生産性の計測・可視化](https://tech.pepabo.com/2022/06/13/customer-service-productivity/) も行い、生産性の計測・可視化に全社で取り組んでいます。

本記事では、これらの取り組みやプロダクト開発チームの観察から明らかになった「開発プロセスのボトルネック」の解消に取り組んでいる事例を紹介します。

## カラーミーショップの開発プロセスにおける複数の環境

Webアプリケーションの開発では、開発フローにあわせてアプリケーションが動作する環境を複数用意していることが多いでしょう。本番環境、ステージング環境、テスト環境、開発環境、など分類や呼び名は開発組織によって異なると思いますが、今回紹介するカラーミーショップの開発組織では、以下のような用途で複数の環境を利用して開発を行なっていました。

- ユーザが利用する「本番環境」
- 本番環境へのリリース前の検証に利用する、本番とほぼ同等のデータで開発チームのみがアクセスできる「ステージング環境」
- 開発チームがローカル開発環境では検証が難しい機能の確認に利用する、本番環境とは独立したデータの「インテグレーション環境」
- 各開発メンバーのマシン上に構築する「ローカル開発環境」

また、ローカル開発環境以外は基本的に1つずつ稼動させており、例外としてQA用の専用環境と、脆弱性の診断など一定期間占有する必要があるような場合に使う占有環境がありました。

## 「イングレーション環境を占有します」

このように環境を分けて開発をしていると、特定の環境でしか検証が難しい機能開発というのがどうしても発生してしまいます。特にECプラットフォームサービスでは、決済事業者をはじめとする外部の連携サービスが多数存在していますし、そもそもカラーミーショップ自体も1つのWebアプリケーションではなく複数のWebアプリケーションによって構成されています。

そのため、複数のチームがインテグレーション環境を使った検証を行いたいという状況が発生し、あるチームが環境を占有しているあいだ他のチームは最も優先順位の高いタスクを止めなければいけないこともありました。

それぞれのチームが占有できるように十分な数の環境を用意すればよいのですが、一方で大量の環境を作成し、それをメンテナンスしつけるのもカラーミーショップのシステムアーキテクチャ(多くのコンポーネントがVMであること)と運用コストの観点から困難という状況でした。

## コンテナベースの新しい運用基盤の開発

少し話が変わりますが、カラーミーショップでは2年ほど前から[ShopSetという新しいアプリケーションの運用基盤](https://speakerdeck.com/takutakahashi/15nian-yi-shang-dong-kuecsisutemuwokuraudoneiteibunisurutameniyatuteirukoto)の開発・導入を進めています。

ShopSetが何なのかをざっくり説明すると「カラーミーショップを構成する複数のWebアプリケーションをkubernetes上動かすための仕組み」です。

もともとは、運用基盤の可用性と拡張性を高めるために開発をすすめてきたShopSetですが、これを利用することで[Heroku Review Apps](https://devcenter.heroku.com/articles/github-integration-review-apps) のような仕組みが構築できるのではないかと考えました。

## kubernetes上のプレビュー環境

ShopSetをHeroku Review Appsのように使うために、ShopSetの開発チームは以下のような仕組みを構築しました。

- 各アプリケーションのリポジトリに立てられたPull Request毎のコンテナイメージ自動作成
- 複数のShopSetを管理できるCI/CD環境
- ShopSetの管理を行うSlackコマンドとチャットボットの開発

新しくプレビュー環境を作りたい開発者やデザイナは、Slack上で`/shopset create`というコマンドを実行することで、個人用のインテグレーション環境を立ち上げることができます。また、カラーミーショップを構成する複数のWebアプリケーションを任意のブランチの状態で動かし、かつそのブランチの変更に自動的に追従するような仕組みになっています。

![Pasted image 20221207234025.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186836/a60efed4-629a-6be3-6b2f-457a9bd5c7de.png)

これを普及させるために、ShopSetの開発チームは他の開発メンバー向けのドキュメントを作成し、チームへの導入の支援も行っています。

現在では、外部システムとの連携に携わることの多いメンバーや、複数のWebアプリケーションにまたがる機能を開発するメンバーを中心に利用をすすめています。

## おわりに

さて、「プレビュー環境の導入によって開発生産性はどの程度向上したのか？」という点については、導入から1ヶ月ちょっとということもあり、まだ数値にはっきりと現われていません。しかしながら、体感では「環境を占有する」という状況は減っており、これから最初に紹介したような生産性指標に繋がってくると期待しています。

また、ShopSetをつかったプレビュー環境の技術的な詳細については、開発したメンバーがどこかで発表またはブログとして公開してくれると思いますのでご期待ください。
Directive composition API + Angular CDKでお手軽自作Menuの実装

これは[Angular Advent Calendar 2022](https://qiita.com/advent-calendar/2022/angular)の8日目の記事です。

Angular v15で追加されたDirective composition APIがAngular CDKとすごく相性が良さそうなので、説明ついでにCDKの布教活動をしたいと思います。

# Directive composition APIってなに？

> The directive composition API lets you apply directives to a component's host element from within the component.

公式にはこんな感じで書いてあります。ざっくりと「Component側の定義でDirectiveをホスト要素に追加できるよ。」といった感じです。

ComponentにDirectiveを追加する場合に、今まではこんな感じで書いていました。
```html
<app-cmp appDir></app-cmp>
```

Directive composition APIではComponentデコレータで追加出来ます。
```typescript
@Component({
  selector: 'app-cmp',
  template: 'app-cmp.html',
  hostDirectives: [AppDir]
})
export class AppCmp {}
```

使い所は多くないかもしれませんが、ComponentとDirectiveをセットで利用するケースなどに便利です。
とはいえイメージがしづらいので、CdkMenuを題材に利用ケースを考えてみましょう。

# CdkMenuを使う

CdkMenuはv14で追加されました。OverlayやPortalを使わずA11yまで考えてくれてすごく便利です。しかし、Directiveを提供しているだけなので、実装するとDirectiveだらけになります。

```html
<button [cdkMenuTriggerFor]="menu">Click me!</button>

<ng-template #menu>
  <div cdkMenu>
    <button cdkMenuItem>Item 1</button>
    <button cdkMenuItem>Item 2</button>
  </div>
</ng-template>
```

もちろんこのままで使えますが、Menuは様々なところで再利用したいので共通化するために、「常に同じclassを当てる」か「Componentとセットで使う」必要がありますが、それぞれ微妙にめんどくさいですよね。

```html
<button [cdkMenuTriggerFor]="menu">Click me!</button>

<ng-template #menu>
  <div cdkMenu>
　　　<!-- classを追加し忘れそう -->
    <button class="custom-menu-item" cdkMenuItem>Item 1</button>
   　<!-- 毎回cdkMenuItemを追加するのめんどくさい --> 
    <app-menu-item cdkMenuItem>Item 2</app-menu-item>
  </div>
</ng-template>
```

この問題を解決してくれるのがDirective composition APIです。Directive compostion APIを使って書き直してみましょう。

# CdkMenu with Directive composition API

まずはCdkMenuとCdkMenuItemを書き直していきます。

```typescript:menu.component.ts
@Component({
  selector: 'app-menu',
  templateUrl: 'menu.html',
  styleUrls: ['menu.css'],
  hostDirectives: [CdkMenu],
})
export class Menu {}
```
```typescript:menu-item.component.ts
@Component({
  selector: 'app-menu-item',
  templateUrl: 'menu-item.html',
  styleUrls: ['menu-item.css'],
  hostDirectives: [CdkMenuItem],
})
export class MenuItem {}
```

これでも十分ですが、折角なのでトリガーのprefixをappに統一します。

```typescript:menu-trigger.directive.ts
@Directive({
  selector: '[appMenuTriggerFor]',
  hostDirectives: [
    {
      directive: CdkMenuTrigger,
      // inputsを利用することで＠Inputを任意の名前で利用できます
      inputs: ['cdkMenuTriggerFor: appMenuTriggerFor'],
    },
  ],
})
export class MenuTriggerDirective {}
```

ここまでやるとHTMLはスッキリします。

```html
<button [appMenuTriggerFor]="menu">Click me!</button>

<ng-template #menu>
  <app-menu>
    <app-menu-item>Item 1</app-menu-item>
    <app-menu-item>Item 2</app-menu-item>
  </app-menu>
</ng-template>
```

なんかよく見る形になってませんか？これだけで再利用しやすい自作Menuが実装できちゃいます。

# 最後に

Angular CDKはDirectiveで提供されている機能がたくさんあるのでDirective composition APIと上手く組合わせることでMenu以外もお手軽に作れそうな気がしているので個人的には楽しみしかないです。

Angular CDKには他にも色々な機能がありますが、これを機にまずはMenuだけでもAngular CDKを使ってみませんか？

サンプルも作っているので是非参考にしてください。

https://stackblitz.com/edit/angular-ivy-kit6jd?embed=1

明日は@ocknamoさんです！
【初心者向け】SwiftUIのモディファイアについて

 # はじめに
こんにちは！
現在、学生IT団体watnowでエンジニアとして活動してます**くろちゃん**です。
今年も**AdventCallender**の季節がやってきたということで、僕が7日目を担当します。
今回は最近アプリを作るためにSwiftUIを勉強し始めたので、備忘録も兼ねて書いていこうと思います。

# モディファイアとは
そもそも、モディファイアってなんぞやと思う人がいるかもしれないので、簡単に説明を。
モディファイアとは`Text()`や`VStack`などのView構造体のプロパティを変更するための修飾子のことです。
下記のように`Text()`や`Button()`の後に`.モディファイア名`と言ったように記述して指定します。
```swift:ContentView.swift
struct ContentView: View {
    var body: some View {
        VStack{
            Button("Hello, world!"){
            }
            .frame(width: 200, height: 200)
            .background(.red)
        
            Text("Hello, world!")
            .font(.Title)
            .padding()
            .foreground(.white)
            .background(.red)
        }
        .pdding()
    }
}
```


# よく使うモディファイア
よく使うだろうなと思う、モディファイアをいくつか紹介させていただきます。
## .padding()
こちらはViewの周りに余白をつけてくれるモディファイアです。()の中に数値を入れることで、余白の大きさを調整することも可能です。

## .frame()
こちらはViewの幅や高さ、整列を調整できるモディファイアです。()の中に`指定したいプロパティ:数値`を入力することで調整できます。また、幅や高さは`maxWidth`や`minWidth`のように最大値と最小値も設定できます。

## .font()
こちらはView内の文字を装飾できるモディファイアです。()の中にAppleが既に用意している引数を入力することで指定できます。（例：.Title .largeTitle .caption）

## .fontWeight()
こちらはView内の文字の太さを指定できるモディファイアです。()の中にAppleが用意している引数を入力することで指定できます。（例：.black .bold .thin）

## .background()
こちらはView内の背景色を指定できるモディファイアです。()の中はAppleが用意しているカラーアセットから選ぶこともできますし、rgbで指定することもできます。

---

モディファイアにはさまざまな種類があり、ここでは全て紹介できないので詳しくは[Appleの公式ドキュメント](https://developer.apple.com/documentation/swiftui/capsule/view-implementations)を参考にしてみてください。
また、[こちらの方](https://ios-docs.dev/swiftui-modifier/)もよく使うモディファイアをまとめてくださっているので参考にしてみてはいかがでしょうか。

# モディファイアの順番
ここでいきなり質問です。
下の二つのコードはどちらも同じような出力結果だと思いますか？
 ```swift
VStack{
    Button("ボタン1"){
    }
    .background(.red)
    .frame(width: 200, height: 200)

    Button("ボタン２"){
    }
    .frame(width: 200, height: 200)
    .background(.red)
}
```
コードだけをみると`.frame(width: 200, height: 200)`と`.background(.red)`のモディファイアが入れ替わっているだけのように見えます。
ですが、プレビューを見るとその違いは明らかだと思います。
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1089991/ca2b8e55-8959-427d-cba7-8e6bc6fc8156.png">
`ボタン1`の方は`.background()`がかかった後に`.frame()`がかかっているため、見た目上では`.background()`がかかっている`ボタン１`というボタン内部のテキストの背景のみが赤くなっています。
`ボタン２`の方は`.frame()`がかかった後に`.background()`がかかっているため、フレームが200×200に拡大された後に背景が赤くなっています。
このように、モディファイアは記述する順番によって、修飾する順番も違ってきてしまうので注意も必要です。

# 終わりに
今回はSwiftUIのモディファイアについて書かせていただきました。僕もまだまだ勉強を始めたばかりなので、至らない点がいくつかあると思います。何かありましたら、コメントの方していただけると嬉しいです。
ここまで読んでくださりありがとうございました！
腕立てカウントーを作った！

![push_up.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2290515/18849280-a19e-1f5e-dc0e-981d0da6e6ae.gif)


こんにちは。[AMBL株式会社](https://www.ambl.co.jp/)のR&D部のエイドリアンです。この記事は[AMBLアドベントカレンダー2022](https://qiita.com/advent-calendar/2022/ambl-rd)の記事です。

# 概要

腕立ては好きですか？私は好きです。が、使ってる筋肉を意識しながら己の限界まで頑張ろうとすると、「あれ？今って何回やったっけ？」となりがちです。結果として達成感がなく、自分がちゃんと成長したかどうかさえ分からなくなってしまいます。ですので、今回は腕立てをカウントしてくれるものをちらっと作ってみました！

> 今ここで限界を超えろ。それしか道はねぇ。
>
> ～ヤミ・スケヒロ～

# やりたいこと

やりたいこと極めて単純です：腕立てを数える！
ではどうすればいいでしょうか？まず最初に腕立てについて考えてみましょう！

## 普通の腕立て

[ここ](https://www.shopjapan.co.jp/diet_labo/training/article_026/)によりますと、腕立ての手順は下記の通りだそうです。

1. 四つん這いの状態になり、手を肩幅よりも少し広めにして着きましょう。
1. 足を伸ばしてつま先を立て、頭から足首までがまっすぐになるようにしましょう。
1. まっすぐな姿勢をキープしながら脇を締めて肘を曲げ、体を床に着くギリギリまでゆっくりと下ろしましょう。
1. 床を押して肘を伸ばし、体を持ち上げましょう。③と④を繰り返しましょう。

**スタート、エンド (0, 100%)**
![start](https://www.shopjapan.co.jp/files/rcms_conv_webp/files/topics/6817_ext_06_1_1590651900.webp?v=1590653591)
*出典: https://www.shopjapan.co.jp/diet_labo/training/article_026/*


**途中(50%)**
![halfway](https://www.shopjapan.co.jp/files/rcms_conv_webp/files/topics/6817_ext_06_2_1590651900.webp?v=1590653591)
*出典: https://www.shopjapan.co.jp/diet_labo/training/article_026/*



注目していただきたいのは、1の*つま先を立て*と4の*体を持ち上げ*の部分です。この2つのポイントが我々の腕立てカウンター（以下Push-up counter）の重要な部分になります。

# 方法

ここでPush-up counterの方法を紹介します。簡単な処理フローは下記の図で表しております。

```mermaid
flowchart LR
    1画像取得-->2姿勢検知-->3角度算出-->4判定ロジック
```

それでは順番に説明していきます。

## ①画像取得

うん、画像がないと始まらないので、次に行きます。

## ②姿勢検知

今回は(も)Googleさん[Mediapipe](https://google.github.io/mediapipe/)の姿勢検知（もしくは骨格検知）モデル、Holisticモデルを採用します。必要にやりやすいし、精度、Performance共に申し分ない（遊ぶには）なのでおすすめです。

腕立てを検知する、肩、手首、足首の3つの点が必要です。ですので、下記のMediapipeのLandmarksから*11*,*27*,*15*を使います。

![sa](https://mediapipe.dev/images/mobile/pose_tracking_full_body_landmarks.png)
*出典: https://google.github.io/mediapipe/solutions/pose.html#pose-landmark-model-blazepose-ghum-3d*

## ③角度算出

そしてそれぞれの座標から内積を求め、下記の`theta`の角度を算出します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2290515/c1f90e91-4909-1cc2-48bb-a9d6cc625856.png)
*出典: エイドリアン*

普通の腕立てでは、手と足は地面に近い位置にあり、上記の三角形が形成されるでしょう。

内積の算出については[こちら](https://imagingsolution.blog.fc2.com/blog-entry-50.html)を参照してください。
ま、面倒くさいならどうぞ！

```python
import numpy as np

def calculate_angle(a, b, c):
    a = np.array(a)  # First
    b = np.array(b)  # Mid
    c = np.array(c)  # End

    radians = np.arctan2(c[1] - b[1], c[0] - b[0]) - np.arctan2(
        a[1] - b[1], a[0] - b[0]
    )
    angle = np.abs(radians * 180.0 / np.pi)

    if angle > 180.0:
        angle = 360 - angle

    return angle

```

## ④判定ロジック
そして最後に参照して`theta`に基づき、降下`down`と上昇`up`の2つのモーションに分け、それぞれに対して閾値を設定しカウントします。

では、実際にデモを見てみましょう！

# デモ

<iframe width="560" height="480" src="https://www.youtube.com/embed/4dmTTEnAOpI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


# 最後に

はい、(なんとなく)できました！同じロジックを使えばスクワット、懸垂等のエクササイズのカウントもできるでしょう。

今回のソースコードは[こちら](https://github.com/kayeungadrian-tam/personal-trainer/tree/v2/_old)です！

では、よい  :muscle: エクササイズ :muscle:  を！！

>　腕立ての限界は己の筋肉ではない
> 
> 〜エイドリアン〜
16行でBasicをPrologで実装な話

Pythonで書くと数百行かかるというような話をみて、Prologで書いたものあったよな。ないな。書いてみるかと思って書いてみたのですが、Prologに詳しくない人用に解説を加えてみました。

```prolog
a(V,G,[V|G]).
e(X,I,G,G):-member(X=I,G),!.
e(I,I)-->{integer(I)},!.
e(A+B,I)-->!,e(A,I1),e(B,I2),{I is I1+I2}.
e(X=E,V)-->!,e(E,V),a(X=V),!.
e(E1<E2,I)-->!,e(E1,I1),e(E2,I2),{I1<I2->I=1;I=0},!.
g(I:_,[I:E|Ls],[I:E|Ls]):-!.
g(I:_,[_|Ls],Rs):-!,g(I:_,Ls,Rs).
g(_:_,[],[]).
s(goto(I),_)-->{basic(P),g(I:_,P,Ls)},b(Ls).
s(X=E,Ls)-->!,e(E,V),a(X=V),b(Ls).
s(if(E,E1),Ls)-->!,e(E,V),({V=0} -> b(Ls);s(E1,Ls)).
s(print(E),Ls)-->!,e(E,V),{writeln(V)},b(Ls).
b([])-->!.
b([_:E|Ls])-->s(E,Ls).
run:- basic(P),b(P,[],_).
basic([
10:(a=0),
20:(print(a)),
30:(a=a+1),
40:(if(a<10,goto(20)))
]).
:- run.
:- halt.
```

SWI-Prologインストール、実行方法と結果
```
$ apt install swi-prolog
$ swipl a.pl
0
1
2
3
4
5
6
7
8
9
```


a/1 環境に追加
g/3 gotoの処理
s/4 文の評価
b/3 プログラムの評価
run/0 実行
basic/1 ベーシックのプログラム

最小限の機能しかないですが、これを元に拡張していけば何でも出来るようになると思います。

短くかける秘密は、Prologが数式処理に特化された言語であること。
普通のプログラミング言語とちがって数値演算よりも、数式処理に特化した珍しい言語で、ネストした関数を評価せずに単なる数式として扱い、返す値は論理値のみなので、使いづらく感じるかもしれないのですけど慣れると数式をそのまま扱える利点が生きてきます。

今回の実装ではDCG (通常はパーサに使うための引数を省略してかける機能) を環境の受け渡しに使っている（Haskellのモナドみたいなもん) のでより簡潔に書けました。

BASICの操作的意味を考えるとこんな感じになるんだろうなと思えるところがPrologで実装を書く楽しさでもあります。


どう考えて作ったのか？

たしか、番号付きのリストにプログラムを書いておいてリストを順番に実行すればいいんじゃね？
if文あればfor文とかの代わりにできるしgoto文を入れて変数が定義できて印字できればそれっぽく動くだろう。と漠然と、以下のようなプログラムを書いてみました：

```prolog
basic([
10:a=0,
20:print(a),
30:a=a+1,
40:if(a<10,goto(20))
]).
```

SWI-Prologの:は通常パッケージの区切りなのでたしか結構優先順位が高く結合されるんだったような、、、って思って試してみてやっぱりそうだったので、カッコつければいいやということで、最終的な形になりました。

インタプリタはとりあえず１個目の規則を適当に書いてみました：

```prolog
stmt(Σ,[N:X=E|Ls]):-expr(Σ,E,V),stmt([X=V|Σ],Ls).
```

ステートメントの実行時に式も評価しないといけないかってことで、

```prolog
expr(_,I,I):-integer(I).    % 整数の評価
expr(Σ,X,V):-member(X=V,Σ). % 変数
expr(Σ,A+B,I):-expr(Σ,A,I1),expr(Σ,A,I2),I is I1+I2. % 加算
```

くらいまで書いて環境をいちいち書くのめんどくさいなったのでDCGを使うことにしました。
DCGは引数を引き渡して次に渡してっていう以下のようなプログラムを

```prolog
a(A,E1,E6):- b(A,E1,E2),c(E2,E3),d(A+1,E3,E4),e(E5,E6).
```

以下のような-->で書いて省略出来るという機能です。

```prolog
a(A)--> b(A),c,d(A+1),e.
```

引数がリストだった場合にリストから値を取り出すとか、{}でくくると環境の引き継ぎはしないとかいう機能もあるのでパーサを書く時の入力リストを隠してかけて便利なのですが他にも使えます。

```prolog
expr(I,I,Σ,Σ):-integer(I).    % 整数の評価
expr(X,V,Σ,[X=V|Σ]):-member(X=V,Σ). % 変数
expr(A+B,I,Σ,Σ2):-expr(A,I1,Σ,Σ1),expr(Σ,A,I2,Σ1,Σ2),I is I1+I2. % 加算
```

としておいて、DCGで引数を省略します:

```prolog
expr(I,I)-->{integer(I)}.    % 整数の評価
expr(X,V,Σ,[X=V|Σ]):-member(X=V,Σ). % 変数
expr(A+B,I)-->expr(A,I1),expr(Σ,A,I2),{I is I1+I2}. % 加算
```

な感じで書けるんですが、変数を加えるところが悩むところです。


```prolog
stmt([N:X=E|Ls],Σ,Σ2):-expr(E,V,Σ,Σ1),stmt(Ls,[X=V|Σ1],Σ2).
```

add 述語で環境を受けとり値を設定する述語を作っておき、DCGで省略するとうまくいきます：

```prolog
add(XV,Σ,[XV|Σ]). % 環境に値を加える述語
stmt([N:X=E|Ls])--> expr(E,V),add(X=V),stmt(Ls).
```

普通のプログラマなら述語名は長いほうがいいんですが、操作的意味論の練習を考えると１文字に押し込むのに慣れたほうがいいので１文字にします。嫌がらせではありません。

```prolog
a(XV,Σ,[XV|Σ]). % 環境に値を加える述語
s([N:X=E|Ls])--> e(E,V),a(X=V),s(Ls).
```

ということで他にif文やgoto文を追加しました。

```prolog
b([])-->!.
b([_:E|Ls])-->s(E,Ls).
run:- basic(P),b(P,[],_).
```

プログラムの実行はrunとかで始めたいのでrun述語でベーシックのプログラムを読み込んで、一個ずつ取り出して実行するようにするなど微調整して完成です。

# まとめ

Prolog で適当にBASICのインタプリタを作ってみたら実装は16行程度で書けました。
せっかくなのでどんな気持ちで書いたのか説明してみました。
構文なども書くといいので後で書こうと思います。
【Playdate】クランク通知を実装してみる

<img width="472" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100912/c164646d-5653-c1c3-8840-84d4d6019d41.png">


Playdateの最も特徴的なデバイスである「クランク」の実装をしていきます。
ゲーム内でクランクを使う際にプレイヤーに通知する必要がありますが、SDK側で便利な機能があるのでそれを利用します。
[こちら](https://qiita.com/sada_lp1/items/1751040555361bae33b7)をベースに制作していきます。

## クランク通知

```
import "CoreLibs/object"
import "CoreLibs/graphics"
import "CoreLibs/sprites"
import "CoreLibs/timer"

import "CoreLibs/ui" -- crankIndicatorの利用準備

local gfx <const> = playdate.graphics

local playerSprite = nil

function myGameSetUp()

	local playerImage = gfx.image.new("Images/playerImage")
	assert( playerImage )

	playerSprite = gfx.sprite.new( playerImage )
	playerSprite:moveTo( 200, 120 )
	playerSprite:add()

	local backgroundImage = gfx.image.new( "Images/background" )
	assert( backgroundImage )

	gfx.sprite.setBackgroundDrawingCallback(
		function( x, y, width, height )
			backgroundImage:draw( 0, 0 )
		end
	)
	
	playdate.ui.crankIndicator:start()　-- クランクの初期化

end

myGameSetUp()

function playdate.update()

	if playdate.buttonIsPressed( playdate.kButtonUp ) then
		playerSprite:moveBy( 0, -2 )
	end
	if playdate.buttonIsPressed( playdate.kButtonRight ) then
		playerSprite:moveBy( 2, 0 )
	end
	if playdate.buttonIsPressed( playdate.kButtonDown ) then
		playerSprite:moveBy( 0, 2 )
	end
	if playdate.buttonIsPressed( playdate.kButtonLeft ) then
		playerSprite:moveBy( -2, 0 )
	end

	gfx.sprite.update()
	playdate.timer.updateTimers()
	
    -- クランクをドックに入れている場合、クランク通知を描画する
	if playdate.isCrankDocked() then
		playdate.ui.crankIndicator:update()
	end


end
```

利用の際は`crankIndicator`を初期化する必要があります。
まず`CoreLibs/ui`のインポート、次に初期化`playdate.ui.crankIndicator:start()`を実行します。
アラートの描画は`playdate.ui.crankIndicator:update()`を実行しますが、
実行前に`playdate.update()`関数内で`playdate.timer.updateTimers()`を先に実行している必要があります。
`playdate.timer.updateTimers()`の前に`playdate.ui.crankIndicator:update()`を実行しても描画されないので注意してください。
navigation component の lifecycle

# navigation component の lifecycle

navigation componentを使っていて、挙動であれっ？と思うことがあったため、簡単な画面遷移アプリを作ってlifecycleを試してみました。

内容としては、ボタンを押すと`MainFragment`→`SubFragment`にnavigationされるというものです。
以下、その時のログ(testは、`MainFragment`, test2は`SubFragment`に対応)

```
D/onAttach: test
D/onCreate: test
D/onCreateView: test
D/onViewCreated: test
D/onStart: test
D/onResume: test
//ボタンを押す
D/onPause: test
D/onStop: test
D/onAttach: test2
D/onCreate: test2
D/onCreateView: test2
D/onStart: test2
D/onResume: test2
D/onDestroyView: test
//戻る
D/onPause: test2
D/onStop: test2
D/onCreateView: test
D/onViewCreated: test
D/onStart: test
D/onResume: test
D/onDestroyView: test2
D/onDetach: test2

```
注意点としては、`MainFragment`の`onDestroyView`が呼ばれるのが`SubFragment`の`onResume`の後という点ですね。
あと画面戻るを押したときは`SubFragment`の`onDestroyView`が呼ばれるのが`MainFragment`の`onResume`の後になります。

私は、`MainFragment`と`SubFragment`の`onViewCreated`中に同じ`Flow`を処理する記述をしていたのですが、なぜか裏で動いている挙動に困っていたのですが、

```MainFragment.kt
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        lifecycleScope.launch {
            something.collect {
                // TODO
            }
        }
```

```SubFragment.kt
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        lifecycleScope.launch {
            something.collect {
                // TODO
            }
        }
```

↑画面遷移時にTODOが両方のFragmentで発火する


```MainFragment.kt
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        lifecycleScope.launch {
            lifecycle.whenStarted{
                something.collect {
                    // TODO
                }
            }
        }
```

```SubFragment.kt
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        lifecycleScope.launch {
            lifecycle.whenStarted{
                something.collect {
                    // TODO
                }
            }
        }
```

lifecycle.when〇〇等を使って、ちゃんと発火の制限をしましょう。
インスタンスの使用方法（コンストラクタ含む）を演習

# 問題
Humanクラスをインスタンス化してmanを作り、自己紹介メソッドsayHalloを実行してください。


```java
public class Human {
	String name;    //インスタンス変数を定義
	int age;

	public Human(String name, int age) {  // コンストラクタを追加
		this.name = name;                //インスタンス化した時に受け取ったnameとageを
		this.age = age;                  //インスタンス変数に代入し初期化する。
	}

	//インスタンスメソッドsayHelloを追加
	public void sayHello() {
		System.out.println("私の名前は" + this.name + "です。" + this.age + "歳です。");
	}

	// 動作確認用メソッド
	public static void main(String[] args) {
		//Humanクラスをインスタンス化
		Human man = new Human("山田太郎", 45);
		//インスタンスメソッドsayHelloの呼び出し
		man.sayHello();
	}
}
//演算結果
//私の名前は山田太郎です。45歳です。
```

# 補足
- インスタンス変数
→作られるインスタンスのもつ性質にあたるもの。インスタンス化しないと使えない。
（※クラス変数は一つしか定義できない。インスタンスがなくても使用できる。staticがつく。）
- インスタンスメソッド
→作られるインスタンスの動作にあたるもの。インスタンス化しないと使えない。
（※クラスメソッドはクラスに一つだけ。インスタンス化しなくても使える。staticがつく。）
- インスタンス化
インスタンスを作ること。
- コンストラクタ
インスタンス化する際に自動で行う前処理。主に初期化。クラス名と同じ名前にしなければならない。戻り値はなし。（コンストラクタ自身が戻り値と考えると納得！）
- this.
→変数の前につけて、自身のクラスの変数であることを示す。「自分の」と訳すとわかりやすい。
今回のコンストラクタではインスタンス化の際に引数を受け取る変数と最初に定義した変数を区別するために用意。
4equestとは何か

# はじめに
初めまして、4equestです。
私がこのIDを使っているせいでGoogleの検索結果が私に汚染されました。
ごめんなさい（？）
そういう気持ちも込めて、4equestというものが何なのかを残すためにこの記事を書きます。

# そういうnpmのパッケージ名
2015年あたりに公開された正規のnpmパッケージである「request」のタイポなパッケージです。
https://npm.io/package/4equest
すでに悪意あるパッケージとして保持されています。

このような、キーボードの似たような位置にある文字を利用したり、よくあるスペルミスを利用して有害なパッケージをインストールさせる攻撃をTypo squattingと呼びます。
https://brutalgoblin.hatenablog.jp/entry/2021/11/27/182601
こちらの記事にもある通り、コマンドラインでインストールして成功すると、間違ったパッケージ名であることになかなか気づけません。
最近は似たようなのにメールの送信先を間違えていた大学があったりしましたね。
恐ろしい攻撃です。

# じゃあマルウェアの名前をニックネームにしたって事？
そうであるともいえますし、違うともいえます。
このマルウェアの名前ですが、より深く調べているともう一つの真実が浮かび上がります。

答えを言ってしまうと、これはドイツのハンブルク大学による実験です。
詳細はこちらのレポートを読んでください。
https://incolumitas.com/data/thesis.pdf
62ページにインストールされた打ち間違いのパッケージ名の一覧があります。

また、実際に配布されていたパッケージにも大学のページへのリンクがあります。
https://web.archive.org/web/20160314051912/http://svs-repo.informatik.uni-hamburg.de:80/
(既に削除されているためアーカイブです。)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2984781/eae1d107-da56-8a24-ee1c-07eddd3c172b.png)
時期的にもこの実験で利用されたパッケージだと考えるのが妥当でしょう。
tarの本来の使い方を思い出す

[PONOS Advent Calendar 2022](https://qiita.com/advent-calendar/2022/ponos)の11日目の記事です。
昨日は@ferret_itachiさんでした

## 本記事を書くに至った経緯
Linuxを利用している方はaptやyum、dnf、Macならbrewなどのパッケージマネージャを使ってソフトをインストールしていることかと思います。パッケージマネージャにまかせておけばだいたいなんとかなります。
ソースコードを引っ張ってきて自身でコンパイルしてもいいんですが面倒くさいですよね。ソースコードをダウンロードする際に`hogehoge.tar.gz`というファイルであることがほとんどですね。実際のところ。パッケージマネージャを使っても裏では同じファイルをダウンロードしていたりします。
なんとなく`tar xvfz hogehoge.tar.gz`とコマンド実行してファイルを展開していますが、本来の使い方使わなくなって随分経つなぁと思い本記事を書くに至りました。

## 本来の使い方って・・・？
本来の使い方ってなんだろうってなるんですが、それはテープ媒体の操作です。一般的に知られているのはカセットテープやVHSといったプラスチックの中に磁気テープが入っているものです。私の場合はDATとかILOというテープ媒体を取り扱いました。
テープに対して操作を行う場合に`tar`コマンドを利用してファイルやディレクトリを読み込んだり書き込んだりする事ができます。私達はテープに読み書きするための形式のファイルをテープなしで取り扱っているということになりますね。
ほかにも`cpio`や　`pax`といったコマンドもありますが今回は`tar`に絞ってお話します。

## テープに書き込むときはこんな動きをしている
tarコマンドを使って色々行う際に、テープではどんな動きをしているのか
テープドライブのパスですが、`/dev/rmt/0m`を使用します。（各種OSでパスは違います）
### `c`オプション
`c`オプションを使うと新規でテープへの書き込みを行います。コマンドはこんな感じです。
`tar cvf /dev/rmt/0m ./hogehoge`
現在の一般的な使い方だとファイルやフォルダを新しくアーカイブしてファイル出力するというものです。
これをテープに同様のことを行った場合にはテープを巻き戻してテープの一番はじめから順にデータを書き込んでいきます。すでにデータが書き込まれている場合にもテープの一番最初からデータを上書きします。

### `r`オプション
`r`オプションを使うと新規でテープへの書き込みを行います。
`tar rvf /dev/rmt/0m ./hogehoge_add`
現在の一般的な使い方だとファイルやフォルダを既存のアーカイブしたtar形式のファイルに追加するというものです。
これをテープに同様のことを行った場合には既存のデータのいちばん最後までテープを早送りするなり巻き戻しするなりして移動してそこからデータを書き込んで追加します。
### `t`オプション
`t`オプションを使うとテープにどんなファイルが書き込まれているか標準出力します。
`tar tvf /dev/rmt/0m`
現在の一般的な使い方だとtar形式のファイルにどんなファイルがあるか参照するというものです。
これはテープでも一緒で、テープの一番最初からデータの書き込まれている箇所までテープを読み取りどんなファイルが書き込まれているか参照するというものです。

### `x`オプション
`x`オプションを使うとテープからファイルを取り出します。
`tar xvf /dev/rmt/0m`
現在の一般的な使い方だとtar形式のファイルからファイルを取り出すときに使用します。
これもテープでも一緒で、テープの一番最初からデータの書き込まれている箇所までテープを読み取り、別のファイルシステムにファイルを書き出すというものです。
## おわりに
結構この話題イケるだろうと思っていました。しかし実際書いてみるとあんまり書くことないなっていう絶望感がありました。この記事を書いているときにDATでの読み書きに時間がかかったことや、DATを入れても読み込んでくれなくてクリーニングテープ入れてクリーニングしたこととか色々思い出しました。
外に向けて何かを発信するということ自体をやらないので、いい機会になったかなと思っています。

明日は@nissy_gpさんの記事です。お楽しみに！
デスマでエナドリをがぶ飲みしたらいけないよ！

この記事は鈴鹿高専アドベントカレンダー2022 10日目の記事です

https://qiita.com/advent-calendar/2022/snct

今現在4プロジェクトくらい抱えてしまっていて、時間がないためクソ記事になりますがご了承ください
# 自己紹介
2022高専ロボコン　鈴鹿高専Bチーム　制御班
鍋王せさみジャーキーです
# 事の成り行き
**デスマでエナドリをがぶ飲みしてはいけないよ！**
私は今年の高専ロボコンで鈴鹿高専Bチームの制御を書いていました。まあロボコンあるあるなのかもしれませんが案の定デスマーチになりました。デバッグ地獄の中での私の一番の相棒が **「Monster Energy」** でした。（本番ギリッギリでロボットを動かせたのも、モンエナ飲んで火事場の馬鹿力で乗り切ったので、モンエナには感謝しかないです）
>薬理学的にいえば、カフェインは、覚せい剤と同じく気分を高揚させる「アッパー系」に分類されるドラッグの一種だ。両者の違いは、覚せい剤が神経細胞をダイレクトに興奮させてドーパミンを放出させるのに対し、カフェインは、「神経細胞の興奮を抑えている回路の働きを抑える」という、実にまわりくどいメカニズムで神経細胞を興奮させる、という点にある。
引用（https://www.buzzfeed.com/jp/toshihikomatsumoto/caffeine）

見事にオンシーズン中にカフェイン中毒症状がでました。オフシーズンに入ってからもエナドリを飲むことをずっとやめられず、結構飲んでました
ネットの記事にあったカフェイン中毒のセルフチェックをしたところ、心肺停止以外すべての症状が当てはまりました！リーチですね
# 苦労したこと
・なぜか記憶が飛びやすくなった
・飲んでないときは脱力感がある
・変な体の不調が多くなった
# 教訓
飲みすぎない！なるべくカフェインに頼らないようにしよう！
AUTOSAR web renewal, 使いやすい？ 

AUTOSAR の R22-11 の一般公開の日が近づいて、WebがRenewal。　

https://www.autosar.org

表紙は少しの違い 

# Document Serach

古い文書の検索が消えた？　

昨年までの文書のURLが変更になった？　

R21-11 以前の資料がリンク切れ。　

# 検索しやすくなった？　

同時に両方利用しないで判定するのは難しそう。　

# Partnerships

Core Partnaeship にjoinできない理由がよくわかっていない。　

国連の常任理事国みたいなもの？　

# リンク切れの嵐　

あるリンクを叩く。
https://www.autosar.org/nc/document-search/?tx_sysgsearch_pi1%5Bcategory%5D%5B119%5D=119&tx_sysgsearch_pi1%5Bquery%5D=

>503
Oops, an error occurred!
TYPO3 is an open source content management system. To maintain the quality of the system and to improve it, please help us by donating. Copyright © 1998-2022 Kasper Skårhøj. Extensions are copyright of their respective owners. Go to typo3.org for details.


# history
2018年以降の記述が見当たらない。　

https://www.autosar.org/about/history

#
【Laravel】Bladeの@ifで@extendsを分岐したい時は@extendsの中に三項演算子を書く

先日詰んだので備忘録としてメモしておきます。

# 検証環境
- Laravel Framework 8.83.8

# 分岐不可能な書き方
``@ifディレクティブ``の設定にも関わらず、両方のテンプレートが継承されてしまいます。
```php
@if(isset($param))
    @extends('auth/param_template')
@else
    @extends('auth/no_param_template')
@endif
```

# 分岐可能な書き方
``@extendsディレクティブ``の中に三項演算子を設定すると、継承の分岐が可能です。
```php
@extends(isset($param) ? 'auth/param_template' : 'auth/no_param_template')
```

# 感想
上記の実装自体、1つのテンプレートの中で2つのテンプレートの継承が行われているため違和感があります。
コントローラやルーティングでviewを分岐した方が素直な書き方かと思います。

# 参考記事
https://laravel.io/forum/08-12-2014-blade-if-else-and-extends

https://www.jaga.biz/web-dev-php/laravel_blade_extends_change/

https://readouble.com/laravel/8.x/ja/blade.html
App Service on  Linux 上の Node アプリケーションを VS Code でリモートデバッグする方法

# はじめに

App Service on Linux Node Runtime では、[リモートデバッグ機能がプレビュー提供](https://learn.microsoft.com/ja-jp/azure/app-service/configure-language-nodejs?pivots=platform-linux#debug-remotely)されています。
VS Code を使って簡単に App Service 上のアプリケーションにローカル環境のデバッガをアタッチすることができます。

# TL;DR

具体的な使い方は[VS Code の公式ドキュメント](https://code.visualstudio.com/docs/azure/remote-debugging) に載っています。
百聞は一見にしかずということで以下の5分ほどの動画を見るのが早いです。

<iframe width="560" height="315" src="https://www.youtube.com/embed/0pvTf4AuxcI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

# 事前準備

- アプリケーションコードをローカル環境に用意する
- App Service on Linux Node Runtime にアプリケーションコードをデプロイ
- VS Code に[App Service 拡張機能](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azureappservice)をインストール


# 使い方

## 開始方法
Resources Explore から目的のリソースを右クリックして [Start Remote Debugging]を実行します。
このとき、アプリケーションの再起動や接続までに数十秒かかることがあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4914/94705596-d3c3-7a64-d696-c2cd88cd4e11.png)

無事デバッガがアタッチされたら、あとはローカル環境にアタッチした時と同じように利用できます。

## Breakpoints/Logpoints の設定

ソースコードの任意の行にシンプルに停止するだけの Breakpoint や、条件付きで停止することができる Conditional Breakpoints、Hit count breakpoints、停止せずにログ出力だけをインジェクトする Logpoints が利用できます。

Breakpoints/Logpoints の詳細な使い方は以下を参照ください。

https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_breakpoints

以下は、`Hit count > 5` としているため、該当行の処理が 6 回目に行われた際に停止している例となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4914/90fbb56d-47bc-9027-7773-08a58a14fdf1.png)

Debug Console から値を書き換えることも可能です。以下はアプリケーションコードが、`res.render` する前に、`res.send("Hello from debugger!")` と実行した例です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4914/81882d49-d6c9-f964-ff3b-b979d3b2174b.png)

Breakpoints は処理が完全に停止しますが、Logpoints の場合は処理を停止させることなく、該当行実行時にログをインジェクトすることができます。
`{}` で変数を囲むことで、その値をログ出力することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4914/62718e78-ace8-4c0e-fbd9-59f4fe138f7d.png)

## Performance profile
CALL STACK ビューから、CPU Profile、Heap Profile、Heap Snapshot の取得が可能です。取得した各プロファイルはローカル側に保存されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4914/fba9d1b4-3a19-7081-724e-816c77edf4c2.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4914/d085fdd7-7d5e-8a0b-f28d-c8323c6b6190.png)

Performance profile の詳細な使い方は以下を参照ください。

https://github.com/microsoft/vscode-js-debug#profiling-support


# 注意点/所感
- リモートデバッグは便利な機能ですが、以下のような影響からユーザーエクスペリエンスを損ねるため、本番環境での利用は控えたほうがよさそう
  - リモートデバッグの開始/終了時には WebApps の再起動が発生します。
  - BreakPoint を設定すると、アプリケーションが止まってしまう可能性がある。

- 開発・検証用途においては、ローカルでは再現しないけど、App Service にデプロイすると発生する事象などの解析には便利かもしれない

- ポータルから [構成] > [全般設定]で確認できるリモート デバッグ とは連動していないようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4914/4cc2c188-66fb-f131-db64-20cb7470cc5d.png)
Alpine.store()を活用してグローバルな状態を定義しよう

# 別のファイルでグローバルな状態を定義する
JSファイルをViteやWebpackでバンドルする場合に使う書き方を紹介していきます。

# 覚えること
### Alpine.store
これはグローバルな状態を定義するために使います。
以下が基本の形です。x-dataの書き方とほぼ同じです。
```js
Alpine.store('名前', {
    プロパティ: 値,
    関数() {
        // 処理
    }
})
```
これをJSファイルにどのように書けばいいかと言うと、
```js
// alpinejsをインポートする
import Alpine from 'alpinejs'
 
// グローバルなデータを定義する
Alpine.store('darkMode', {
    on: false,
    toggle() {
        this.on = ! this.on
    }
})
 
// v3からインポート後にAlpine.start()を呼び出す必要がある↓
Alpine.start()
```
### $store
これはマジックプロパティと呼ばれる特殊なプロパティの一つです。
これを使えばAlpine.store()で登録した状態を取得できます。

以下が基本の形です
```
    $store.名前.プロパティ名 or 関数名
```
これだけで呼び出せます。

# 使用例
実際にこんな感じで使えます。
<p class="codepen" data-height="400" data-default-tab="html,result" data-slug-hash="jOKderR" data-user="gorimatyan" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/gorimatyan/pen/jOKderR">
  Untitled</a> by gorimatyan (<a href="https://codepen.io/gorimatyan">@gorimatyan</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

$storeのところでAlpine.store()で登録したグローバルな値を参照しています。

# まとめ
簡単に登録できた。
ActiveRecord::InvalidForeignKey in RoomsController#destroy エラーの解決方法

# エラー内容
・ActiveRecord::InvalidForeignKey in RoomsController#destroy　というエラーが表示された。
![ActiveRecord InvalidForeignKey in RoomsController　destroy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710373/c4b2d596-3726-313e-9b2d-f0babfe48391.png)

# 原因
・dependent漏れでした。

・ちなみにこんな記事もありました。 `dependent: :delete_all` を使っている方はこちらが原因かも？
 https://stackoverflow.com/questions/45522580/rails-activerecordinvalidforeignkey-in-articlescontrollerdestroy
>
>Using dependent: :delete_all does not use validation thus it is directly deleting records without validating >properly. Use dependent: :destroy if you want your records to be validated safely.
>
↓日本語訳↓
dependent: :delete_all はバリデーションを行わないので、適切にバリデーションを行わずに直接レコードを削除することになります。安全に検証（バリデーション）を行いたい場合は dependent: :destroy を使用します。

# 解決方法
・以下のように`dependent: :destroy`を設定すればOK

![image21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710373/30102280-cd71-96da-ee10-5281cadcc596.png)
MySQLの接続エラーの対処法

```
Can't connect to local MySQL server through socket '/tmp/mysql.sock'(2)
```
mysqlサーバーに接続する際、mysql.sockファイルを使って接続するらしいのですが、
なんらかの原因により、このファイルが消えることがあるそうです。

```
mysql.sockファイルを作ります。
$ sudo touch /tmp/mysql.sock
```
```
mysql再起動
$ sudo mysql.server restart
```

それでもなおらない場合
```
Can't connect to local MySQL server through socket '/tmp/mysql.sock'(38)　#2だったのが38に
```

この場合は、mysql.sockファイルが入っているディレクトリ権限が原因だと思われるので、
```$ sudo chown mysql:mysql /tmp```
これでもう一度
```$ sudo mysql.server restart```
をしましょう。

```
 ERROR! MySQL server PID file could not be found!
Starting MySQL
. ERROR! The server quit without updating PID file (/usr/local/var/mysql/MacBook-Air.local.pid).
```

再起動したらまた別のエラーが発生しました。
PIDファイルというものが存在しないようなので、PIDファイルを作成します
```
sudo touch /usr/local/var/mysql/*****.local.pid
```
*****のところは自分のパソコンのホスト名が入ります。
ホスト名は```uname -n```コマンドで確認することが出来ます。

PIDファイルを作成したらmysqlディレクトリ下の権限を変更します
```
sudo chown -R _mysql:_mysql /usr/local/var/mysql/
```
これでもダメなら
不要なプロセスを削除します
```
# mysql関係の動いているプロセスを確認
ps aux | grep mysql

# grep以外のプロセスをkillする
sudo kill -TERM 11111

# 接続できるか確認する
mysql -uroot
```

これでもダメなら
mysqlの再インストール

https://dezanari.com/mysql-terminal-login-denied/


6.MySQLを再インストール

```
$ brew install mysql
Updating Homebrew...
==> Auto-updated Homebrew!
Updated 1 tap (homebrew/core).
==> Updated Formulae
Updated 83 formulae.

==> Downloading https://homebrew.bintray.com/bottles/mysql-8.0.22.mojave.bottle.tar.gz
Already downloaded: /Users/username/Library/Caches/Homebrew/downloads/4a60667753e025faabe79e025a2f0a91ada50edf673388afad377e4489448ad2--mysql-8.0.22.mojave.bottle.tar.gz
==> Pouring mysql-8.0.22.mojave.bottle.tar.gz
==> /usr/local/Cellar/mysql/8.0.22/bin/mysqld --initialize-insecure --user=username --base
==> Caveats
We've installed your MySQL database without a root password. To secure it run:
    mysql_secure_installation

MySQL is configured to only allow connections from localhost by default

To connect run:
    mysql -uroot

To have launchd start mysql now and restart at login:
  brew services start mysql
Or, if you don't want/need a background service you can just run:
  mysql.server start
==> Summary
🍺  /usr/local/Cellar/mysql/8.0.22: 294 files, 292MB
```

homebrewでMySQLを再インストールできました。

本当に再インストールできているのか確認してみます。
```
$ which mysql
/usr/local/bin/mysql
```
ちゃんとできていますね。

再インストールできたのでMySQLを起動してみます。
```
$ mysql.server start
Starting MySQL
. SUCCESS! 
```
本当に起動しているか確認してみます。
```
$ mysql.server status
 SUCCESS! MySQL running (28596)
```
ナレッジツールをGROWI.cloudへ移行しました。

この記事は[ウェブクルー Advent Calendar 2022](https://qiita.com/advent-calendar/2022/webcrew)　7日目の記事になります。

昨日は、@kouki_kubota さんの「JavaScriptのthisについて」でした。

# はじめに
普段は、インフラエンジニアとして、弊社取扱サービスサイトのインフラ全般と社内イントラ
周りの改善や、新規インフラ環境構築、直近では、システム基盤の刷新案件の担当として
各ベンダ様や取引先とやり取りをしております。

# GROWIをSaaSサービスへ移行する前
弊社で、もともと　GROWIを AWS　EC2上に　Dockerコンテナとして起動し、
そこに、アプリを立てて、弊社の組織内で運用をしておりました。

# GROWIをIaaSで運用していた際の課題
## ユーザ認証
OneloginでSAML連携でユーザ認証させるか、ID・PASSWORDでユーザ認証させるかで
それぞれのアプリで運用方式が異なっておりました。

## 利便性
GROWIへアクセスするには、社内NWを介してアクセスする必要がありました。
出社やリモートワークといったハイブリッド勤務形態をとっており、常にVPN接続をする必要があったため、少しでも通信トラフィック量を減らす必要がありました。

## メンテナンス
バグFIXなどのGROWI本体の修正が入った場合、平日日中帯の通常時間ではメンテナンスができないため
深夜帯や休日などの時間帯でメンテナンスする必要がありました。

# GROWI.cloud へ移行した理由やその他内容
- GROWIがナレッジツールとして使い慣れていたこと
- SAML連携ができること
- ユーザ単位での課金ではなく、アプリ単位での課金であったこと
- データ移行も数営業日で完了できること
- 自動メンテナンスでバージョンアップができること

# GROWI.cloud へ移行する際考慮したポイント
- 前段で記載している通り、出社やリモートワークでのハイブリット勤務形態に対応するため、VPN接続をしなくてもいいように変更しました。
- ユーザ管理をしやすくするため、ユーザ認証をすべてOnelogin (IdP)へ統一変更しました。
    - 社外での作業でも、Oneloginを利用することで多要素認証を利用し、ログインする方式をとり、セキュリティを担保しました。
- どうしても平行稼働期間が必要だったため、新旧アプリの極力凍結期間を短くするようにしました。

# OneloginでのSAML連携する際のポイント
## Applications 追加時の操作
1. Onelogin 管理者メニューに移動します。
1. [Applications]-[Applications]をクリックします。
1. [Add App]をクリックします。
1. 虫メガネの検索欄で「saml」を入力検索し、[SAML Test Connector(Advanced)SAML２．０]をクリックします。
1. [Configuration]-[Display Name]に任意の名前を入れて、[Save]をクリックします。
1. [Configuration] をクリックし、Audicence、Recipient、ACS(Consumer)URL Validatorにそれぞれ必要な値を入力した上で、[Save]をクリックします。
1. [Parameters] をクリックし、GROWI.cloudで必要となるパラメータを追加入力します。



# 最後に
今回、GROWI.cloud への移行にあたり、ご協力ご支援いただいた 提供元の [WESEEK](https://weseek.co.jp/ja/)様には感謝いたします。
また、ご協力いただいた弊社社内の各アプリ管理者のみなさんおよび、システムの皆さんには感謝お礼申し上げます。
FeatureTestとユニットテストの使い分けについて

## LaravelでTDDしていますか？

Laravelのプロジェクトを新規作成すると、tests/Feature, tests/Unitディレクトリがついてきます。
tests/Featureの下にはFeatureテスト、tests/Unitの下にはユニットテストを書いてほしそうな構成です。

では、あなたのユニットテストが継承しているTestCaseクラスは `Tests\TestCase` でしょうか、それとも `PHPUnit\Framework\TestCase` でしょうか？
もちろん、 `Tests\TestCase` 自体が `PHPUnit\Framework\TestCase` を継承しているので、 `extends Tests\TestCase` なテストであっても `PHPUnit\Framework\TestCase` を継承はしています。

Tests\TestCaseはsetUp()でLaravelのapplicationを起動しています。
Laravelのapplicationが起動されていることによって、テスト時もFacade等の便利な機能が使えるというメリットがあるわけですが、一方でデータベースアクセスがあるクラスをテストするとテスト時にもデータベースを使ってしまうというデメリットがあります。
こうなると、テスト対象のクラス内には問題がなくてもDBデータやDBサーバーの状態によってテストが不安定になってしまいます（落ちやすくなる、結果が一定でなくなる）。

ユニットテストは「PHPUnitを使って書いたテスト」ではなく、「1つのクラスだけ独立して動かせるテスト」になるように書きましょう。
そして、ユニットテストを独立したテストとして書くためにはテストコードでなくプロダクションコード（テスト対象となるコード）の側を、ユニットテストできるように配慮して書く必要があります。

具体的には、 ユニットテストを書きたいぐらい複雑なクラスに対しては

- Laravelの提供するFacadeを使わずにFacade rootにあたるinterfaceをDIして利用する
- Modelのstaticメソッドを直接使わずサービスクラスを挟む（Repositoryパターンにしても良い）

のような工夫をすると良いです。

ユニットテストではモックした分、FeatureTestでは、ユニットテスト済の自分のクラスがデータベースやLaravelの機能と統合されたときに意図通りに動くかをテストできるように書きましょう。

## その他tips

Laravel特有の配慮でなく、一般的なPHPコードに対するユニットテストを書きやすくする工夫については、PHPカンファレンス北海道2019のアンカンファレンスで話した [テストを助けに使って設計を改善しよう～リファクタリングことはじめ～](https://speakerdeck.com/77web/tesutowozhu-kenishi-tuteshe-ji-wogai-shan-siyou-rihuakutaringukotohazime) にまとめていますので興味のある方はあわせてご覧ください。
.NET MAUIのDependency Injection (DI)について

# Dependency Injectionとは
Dependency InjectionとはDIとも呼ばれていて日本語で依存性の注入とも訳されています。
私たちは普段AのクラスにBクラス内のメソッドを使うとき、AクラスはBクラスをnewしてBクラスを引き出し、そのメソッドを呼び出している。
このクラス通しの関係を依存関係にあるといい、普段newしている場合はAクラスが別のクラスを引き出しているので注入とは言えません。
注入するということは外部からこのクラスを使いなさいとAクラスに与えることで、そのメソッドを呼び出す形にしています。
これによりクラスの疎結合が担保されます。

### メリット
主な利点はクラス同士の依存関係の結合を減らすことです。

各クラスがどのように実装されているかを知り、維持する必要がないため、再利用性、テスト性、保守性が向上します。
これにより機能を利用する側(A)と機能を与える側(B)のアクセスがより柔軟になります。

# .NET MAUIでの実装
.NET MAUIではデフォルトでDIコンテナ機能がついているので、簡単にDIができるようになり、大規模開発でもクラスの柔軟なアクセスができるようになります。

今回は、ViewModelをサンプルアプリに作成し、そこで作り出したプロパティをDIによりMainPageに表示させる方法で解説します。

ViewModelはこんな形
```cs
namespace Dependency
{
    public class ViewModel
    {
        public string VMTitle { get; set; } = "Dependency Injection!!";
    }
}
```
このVMTitleのプロパティをMainPageに入れたい

まずMauiProgram.csファイルにてDIをするためのコンテナを準備します。
```cs
public static class MauiProgram
{
	public static MauiApp CreateMauiApp()
	{
		var builder = MauiApp.CreateBuilder();
		builder
			.UseMauiApp<App>()
			.ConfigureFonts(fonts =>
			{
				fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
				fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
			});
        //↓たったこれを追加するだけでViewModelのDIコンテナが作成できる。
        builder.Services.AddSingleton<MainPage>();//最初の画面であるメインページ(クラスA)
		builder.Services.AddSingleton<ViewModel>();//プロパティを注入するViewModelクラス(クラスB)

        //またこんな形に省略もできる
        builder.Services.AddSingleton<MainPage>() //;がいらない
		       .Services.AddSingleton<ViewModel>();//最後に;
#if DEBUG
		builder.Logging.AddDebug();
#endif
		return builder.Build();
	}
}
```
作り出したDIコンテナをMainPageにコンストラクタとして注入するだけです。

そして受け取る側MainPageにはコンストラクタとして受け取る形で注入されます。
```cs
public partial class MainPage : ContentPage
{
                    //↓ViewModelをコンストラクタとして注入している
	public MainPage(ViewModel vm)
	{
		InitializeComponent();
		BindingContext= vm;//←注入したコンストラクタをバインディングコンテキストに代入
	}
}
```
MainPageのXamlではLabelのテキストに注入されたプロパティ"VMTitle"をバインディングします。
```xml
<Label Text="{Binding VMTitle}"//←バインディング
      SemanticProperties.HeadingLevel="Level2"
      SemanticProperties.Description="Welcome to dot net Multi platform App U I"
      FontSize="18"
      HorizontalOptions="Center" />
```

このような形で簡単に依存的注入ができるようになります。
![dependency.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3007605/e88761b4-c319-ff9e-8f42-df0b42be76e8.png)

# AddSingletonとAddTransient
AddSingletonとAddTransientの違いですが、これはnewしてインスタンスが1回切りの呼び出しにするか複数回呼び出すかの違いになる。

例えば一回きり呼び出されたら変更がないMainPageやListViewなどforの前にインスタンスがnewされていたようなページにはAddSingletonとなり、
遷移元が送ってくるデータによって、毎回画面の表示が変わるナビゲーション先のページなどはTransientの方が好ましい形となる。

以下Microsoft公式の説明
| 名前 | 説明 | 
|:-:|:-:|
| AddSingleton<T>  | アプリケーションの存続期間中残るオブジェクトの単一のインスタンスを作成します。  |
| AddTransient<T>  | 解決中に要求されたときにオブジェクトの新しいインスタンスを作成します。一時オブジェクトには事前定義された有効期間はありませんが、通常はホストの有効期間に従います。  |

# さいごに
今回作成した簡単なサンプルアプリだとDIの利点が全くないように見えますが、規模が大きくなるごと、処理が複雑になるごとにこのDependency Injectionの重要性がわかってくるかと思います。
かなり簡単に実装できると思いますので、ぜひ使ってみてください。
GitHub Actionsを使う前にactを使ってみる

12月8日、128ですね。7ビットですか。キリがいいですね。
キリがいいついでに今年試したことで記事を書こうと思います。
（ホントは256あたりで書きたいところですが、2月56日は無いので12月8日でヨシとしてます:relaxed:）

https://github.co.jp/features/actions

GitHub Actions、とても便利ですよね。
Pushしたらコードをチェックしてもらう、とか
ビルドやらバンドルやらをしてパッケージ化してもらう、とか
人間が繰り返したくない作業を肩代わりしてくれるのでとても重宝しています。

GitHubのFreeプランでも利用できますし、カジュアルなCI/CDはGitHubで十分な感じになってきています。
（もちろん制限はありますが、個人用途であれば困らないくらいの制限です）

非常に便利なGitHub Actionsですが、困りごともあります。

**GitHub ActionsはGitHubに上げないと使えない**ことです。

GitHubのサービスなんだから当たり前なんですけど。
とはいえActionsをトライ＆エラーしたいときとか、毎回GitHubに上げてたらエラい手間です。

とりあえずローカル実行でそういう技術は無いのか？と調べていて見つけたのがactになります。

https://dev.classmethod.jp/articles/act-for-github-actions-local-execution-tool/

↑の記事のまんまですけども。
GitHub Actionsは、起動するとコンテナ上でスクリプトを動かしてくれるものですが、
actはローカル上でコンテナを動かしてくれます。
ファイルもyml形式で作るので、GitHub Actionsの設定をそのまま流用できます。ノーストレス。

とはいえ、使えるようになる際に引っかかりました。

1. actでdockerが起動
1. ローカルのファイルをコンテナに移送
1. コンテナ側でスクリプト実行

ってな動きとなる認識なのですが、スクリプト実行しているはずなのに

```コンソール画面
unable to prepare context: unable to evaluate symlinks in Dockerfile path: lstat /mnt/c/xxxxx: no such file or directory
```
みたいなエラーが（`xxxxx`には実際のディレクトリ名が入っているとみなしてください）。
確かに、フォルダは作られているようなのですが、中身がありません。

移送自体はログに載っているし失敗している形跡はないのに、ビルドは出来ない・・・
ってことで夜中に（趣味なので夜中にやってました）悩んでいました。

いろいろ試してもどうにもならず、Issuesを見たら

https://github.com/nektos/act/issues/1227#issuecomment-1162626463

> I noticed this too with actions/checkout@v3. It seems to be fixed in #1226.
> My workaround was to build a local copy of act from master and use that for the time being.

とのこと・・・

https://github.com/nektos/act/pull/1226

> Container.CopyDir is no longer working with \ as destpath. Should it support backslash as path separator e.g. replace with forwardslash.
> It seems like my #1202 change causes issues with checkout on windows, files are no longer where they are expected to be.
> I wondered in the past why I saw \mnt\c\... in the act log, this now cause issues

ホストPCがWindowsだとディレクトリ指定に「\」（バックスラッシュ）を使いがちだけど「/」使わなきゃダメだったわー。なんかログも気になってたんだけどね！

みたいな話でしょうか。ショボいミスに引っかかってしまった形となります。

6/6に仕込まれたバグに私がぶつかってしまい、
数日（の深夜に）悩まされた中、6/22に解決したという話のようで、
**そんな2週間ちょっとのバグに引っかかるのか！**

と思った2022年でした！

そんな経験もとどめておきたいと思い記事にしました:smile:。
何かの参考になれば幸いです。
The action 'search' could not be found for TweetsController

# エラー内容
・The action 'search' could not be found for TweetsController　というエラー表示された。

![The action 'search' could not be found for TweetsController.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710373/d634a995-193c-ce90-145a-0e5330348635.png)

# 原因
・まだsearchアクションを作っていないため、検索フォームで検索してもエラーになっただけでした。。。

# 解決方法
・searchアクションを作りましょう笑
　手順通りに行うことですね！
【パソコン初心者】情報の表現

# 目次
- [情報量の単位](#情報量の単位)
- [表現可能な情報量](#表現可能な情報量)
- [大きな数値を表す接頭語](#大きな数値を表す接頭語)
- [小さな数値を表す接頭語](#小さな数値を表す接頭語)　
- [文字の表現](#文字の表現)

# 情報量の単位

コンピューターの内部では、全ての情報は電気信号の「ON」と「OFF」の２種類に分かれている。ここでいう「情報量」とは1と0という電気信号（語弊を恐れないで言うと）、いわゆる2進数で表現されている。このように**コンピューターで扱う最小の情報量の単位を1ビット、2ビット**という。さらに、**8個のビットを1つのまとまりにしたものをバイト**といい、2進数8桁に相当します。1バイトは8ビット、2バイトは13進数に相当する。バイトは、情報量の基本単位となっています。例えば、「10001111」は1バイトの情報量であり、このような「1」と「0」の場所は、ビットパターンと呼ばれることもあります。

![情報量の単位.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2647183/6ddf1c79-7e10-a3bf-3ca2-c658897f2fdc.png)

# 表現可能な情報量

1ビットで表現可能な情報量は「0」、「1」の2通り、2ビットでは「00」、「01」、「10」、「11」の四通り。3ビットでは「000」、「001」、「010」、「100」、「011」、「110」、「111」、「101」の8パターンです。
**一般的にはnビットでは$2^n$乗通りの情報を表現することができます**

# 大きな数値を表す接頭語

最近では、コンピューターが扱う情報量は膨大なものになっています。そこで、データ量を表すBバイトの前に10の整数乗倍を表す接頭語が使われます

| 接頭語 | 意味 |
|:-:|:-:|
| k(キロ)  | $10^3$  |
| M(メガ)  | $10^6$  |
| G(ギガ)  | $10^9$  |
| T(テラ)  | 10の12乗  |

# 小さな数値を表す接頭語

最近は、コンピューターの処理速度が非常に速くなっている。そこで、処理時間を表すS秒の前に10の整数乗倍を表す接頭語が使われています。

| 接頭語 | 意味 |
|:-:|:-:|
| m(ミリ)  | $10^-3$  |
| μ(マイクロ)  | $10^-6$  |
| n(ナノ)  | $10^-9$  |
| p(ピコ)  | 10の-12乗  |

# 文字の表現

コンピューターの内部は0と1の2進数で表現されているにもかかわらず、コンピューターが文字を扱うことができたのは**文字コード**と呼ばれる、文字の一つ一つに0と1の2進数で表現された識別番号を割りふられているからです。
　例えば、文字「あ」は、シフトJISコードでは「1000　0010　1010　0000」、Unicode（UTF-8）では「1110　0011　1000　0010」の識別番号が割り振られています。
メールなどで「文字化け」という現象が起こることがあります。これは作成者とが使用した文字コードとは異なる文字コードを当てはめたことが原因です。現代的な文字コードには、次のようなものがあります。

- ASCIIコード
    - 英数字・記号・制御文のみ。米国標準符号でえ最も基本となる文字コード。漢字・仮名の表現はない

- シフトJISコード
    - ASCIIコードに、漢字・仮名の日本語を加えたもの

- EUC
    - UNIXやLinuxなどで使用される。漢字・仮名を使用できる

- Unicode
    - 世界の文字の多くを一つの体系にしたもの。それを符号化する方式の一つにUTF-8がある。
差分ファイルだけRubocopをかけることで高速化するスクリプトを書いた

Railsプロジェクトが肥大化するにつれてRubocopの所要時間も増大し、コミット前の待ち時間でカップ麺が作れそうなレベルになってしまいました。
そろそろどうにかしたいなと思い、Rubocopを高速化する策を講じてみたので、今回はそれを共有したいと思います。

# スクリプト
スクリプトをコンテナの外で実行し、RubocopはRailsのDockerコンテナ内で走らせる想定です。

```bash
#!/bin/sh

# 削除されたファイルをRubocopの検査対象に含めるとエラーになるので除く
files=`git diff origin/develop --name-only --diff-filter=d | grep -e .rb -e .rake`

# 確認用にファイル一覧を出力する
echo ${files}

docker exec rails-container rubocop -a ${files}
```

まずdevelopブランチとのdiffを取り、変更のあったファイル名を取得しています。
削除されたファイルはRubocopにかけるとエラーになるので除外しています。
その中からgrepでRubyとRakeファイルだけを抽出し、Rubocopの引数として渡す流れです。
よければ必要に応じてアレンジするなどして使ってください。
paizaラーニング「二次元配列の入力 3 Python3編」

https://paiza.jp/works/mondai/array_primer/array_primer__2dmatrix_input_step3
#### 私の解答
```Python3
n = int(input())
for i in range(n):
    values = input()
    print(values)
```
#### 解答例
```Python3
N = int(input())

A = [[0] * 5 for _ in range(N)]
for i in range(N):
    values = input().split()
    for j in range(5):
        A[i][j] = int(values[j])

for i in range(N):
    for j in range(5):
        print(A[i][j], end="")

        if j < 4:
            print(end=" ")
        else:
            print()
```
【ActionView::SyntaxErrorInTemplate in TweetsController#edit】unexpected end...エラーの解決方法

# エラー内容

ActionView::SyntaxErrorInTemplate in TweetsController#edit　というエラーが表示された。
![ActionView SyntaxErrorInTemplate in TweetsController edit.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710373/c52ae82e-9196-1018-9c36-21244395bccd.png)

# 原因
・え、`</div>`が多いってこと？どういうことや！と思ったら、<% end %>の消し忘れでした。。
　よくみたら`unexpected end...`と言われていますね(-_-;)

# 解決方法
【以下は誤り】
```ruby
<div class="contents row">
  <div class="container">
    <h3>編集する</h3>
      <%= render partial: "form", locals: { tweet: @tweet } %>
    <% end %>
  </div>
</div>
```
↓
↓
↓

【正しくは以下】
```ruby
<div class="contents row">
  <div class="container">
    <h3>編集する</h3>
    <%= render partial: "form", locals: { tweet: @tweet } %>
  </div>
</div>
```