OmniAICreator/Qiita-1.07M huggingface dataset:
Gitリポジトリの統合

# はじめに
Gitの移行をしたいと思い，以下を参考にやってみました。
[Gitレポジトリを移行する方法](https://qiita.com/tanacasino/items/901723e3463bac38f40e)
ところが，この方法だと移行先のリポジトリに既にコミットがある場合，上書きされてしまいます。
そのため，移行先のリポジトリにコミットがあった場合でもそのコミットを残して移行できる方法を調べたので，その方法を備忘録として残したいと思います。

# 手順
1. 移行先のリモートリポジトリを作成・ローカルにクローン
2. リモートリポジトリに移行元のリポジトリを追加
3. 移行元のリポジトリの内容をfetch
4. 移行元のmasterブランチの内容を，移行先のmasterブランチにマージ
5. 移行先のリポジトリをリモートにプッシュ

### 移行先のリポジトリをクローン
Github上で新規リポジトリを作成し，ローカルにクローン

```console
$ git clone git@github.com:target-repository.git
$ cd target-repository
```

### リモートリポジトリに移行元のリポジトリを追加
ローカルに存在している移行元のリポジトリをリモートリポジトリとして登録

```console
$ git remote add source /path/to/source-repository
```


### 移行元のリポジトリの内容をfetch
移行元のリポジトリの内容を，`fetch`コマンドを用いて取得

```console
$ git fetch source
```

### 移行元のmasterブランチの内容を，移行先のmasterブランチにマージ
```
$ git merge --allow-unrelated-histories source/master
```
- `--allow-unrelated-histories`オプションを用いることで，共通の祖先を持たないブランチ同士を強制的にマージすることができる

### 移行先のリポジトリをリモートにプッシュ
```console
$ git push -u origin HEAD
```

# 参考
- [Git で複数のリポジトリをまとめたり、逆に切り出したりする](https://qiita.com/uasi/items/77d41698630fef012f82#repo1subdir-%E3%81%AB-repo2-%E3%82%92%E5%85%A5%E3%82%8C%E3%82%8B)
- [【Git】2つのGitリポジトリを履歴を保持して統合したい](https://qiita.com/no_kawai/items/5efe8e47e54ebccd0bf8)
- [Git 2つのリモートリポジトリを同期する](https://qiita.com/airkoda/items/09c33c27e3f59dc636bc)
ReactでonClick={() =>がわからない

Reactでこういうコードがありました。

```js
<Chip
 label={"ラベル"}
 onClick={() => handleClick("ラベル")}
/>
```

それで、これが解せなかった。

```js
onClick={() =>
```

結論、今の僕の認識では、ユーザーがブラウザで`Chip`をクリックすると、


```js
() => handleClick("ラベル")
```

これで定義した`handleClick`が実行されるという認識において、

[MDNのアロー関数に書いてある仕様](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)とは違うのかな？と思いました。


## アロー関数は学びました

[【JavaScript】アロー関数式を学ぶついでにthisも復習する話](https://qiita.com/mejileben/items/69e5facdb60781927929)

このqiitaで書かれれる、

```
3行でまとめ
・JavaScriptのES6でアロー関数式という、今までとは違った関数の書き方が追加された
・アロー関数式は既存の関数式より文字数が短くなるだけではなく、宣言時のthisを束縛して不変のものにするという効果を持っている
・ほとんどの場面ではアロー関数式を使うほうがわかりやすくなるが、thisを束縛されて困る場面もあるので要注意！
```

というところも納得しました。

これを読んだ後でも、所謂アロー関数式の説明では、 `onClick={() => handleClick("ラベル")}`の動きはよく理解できなかった。

自分で試して、

```
var arguments = [1, 2, 3];
var arr = () => arguments[0];

 // 1
console.log( arr() )
```

だとコンソールに1が出てくるけど、

```
var arguments = [1, 2, 3];

 // () => arguments[0]
console.log( () => arguments[0] )
```

これだとコンソールに`() => arguments[0]`が出てくるということを見ても、


ブラウザからのクリック動作がまさに、`onClick={() => handleClick("ラベル")}`で言うところの、`関数実行()`になるものと判断しました。

そして、これはこういうもので、アロー関数のイロハとは違うと認識しています。

間違ってたら詳しく教えてください٩( 'ω' )و
よくある電気のスイッチみたいなのをCSSで作ってみた（ロッカスイッチ）

# どうも7noteです。スイッチを作りました。

![sample.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/8241d11d-cb87-01d2-5808-d8d76737402c.gif)


またまた唐突に思い立って、もしかしたらそれっぽいのが作れるのではと思い作ってみました。
使い所は少ないかもしれないですが、どこかのサイトの作成の参考になればいいなと思います。

## 作り方

```index.html
<label class="rocker"><input type="checkbox" value="" name="rocker"><span></span></label>
```

```style.css
label input {
  display: none; /* デフォルトのinputは非表示にする */
}

label.rocker {
  border: 5px solid #000;
  border-radius: 5px;
  display: inline-block;
}
label.rocker span {
  width: 150px;
  height: 50px;
  position: relative;
  border: 1px solid #666;
  border-right: 5px solid #666;
  background: linear-gradient(to right, #000 50%, #333 51% );
  display: inline-block;
  box-sizing: border-box;
}

label.rocker span::before,
label.rocker span::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
label.rocker span::before {
  content: 'OFF';
  color: #FFF;
  left: 2px;
}
label.rocker span::after {
  content: 'ON';
  color: #999;
  right: 2px;
}

label.rocker input:checked + span {
  background: linear-gradient(to right, #333 50%, #000 51% );
  border-left: 5px solid #666;
  border-right: 1px solid #666;
}
label.rocker input:checked + span::before {
  color: #999;
}
label.rocker input:checked + span::after {
  color: #FFF;
}
```





## ※課題点

**・labelが1つだけではonとoffの切り分けが難しい。**
このソースでは、onを押したときだけonにし、offを押したときだけoffにすることができない。
labelを2つ使い分ければできそうな気がするが、また時間のあるときに追記しようと思う。

## まとめ

ところでこのスイッチの名前はなんていうのかと思って調べたら、
「ロッカスイッチ」というらしいですね。
勉強になりました。

#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】WEB制作のちょいテク詰め合わせ](https://qiita.com/7note)
VisualStudioCod日本語化が英語に戻ったら？

VisualStudioCod日本語化が英語に戻ったら？下記の様に設定
command + shift + pでコマンド パレットを表示させ
”Japanese Language Pack for Visual Studio Code” がインストールされてる前提で
![スクリーンショット 2021-01-13 12.01.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101462/cabe2e89-e38b-bd47-8079-53f5fa7463eb.png)
configure display lannguage Enterで下記の様にen jaと出るのでjaを指定
![スクリーンショット 2021-01-13 12.01.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101462/d2b660b5-4f7f-504c-af67-3ef36c470715.png)
VisualStudioCode再起動を指定で設定可能に。
![スクリーンショット 2021-01-13 12.07.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101462/0f1a4c21-00e0-270a-8298-c1ee79376e32.png)
Angular勉強会 #6 ディレクティブ② -ngModelと構造ディレクティブ-

## おさらい: ディレクティブとは
- ディレクティブとは、Angularのテンプレートの中で用いる特殊な指令である
- Componentと違い、HTMLの属性のように記述するという特徴がある
- ディレクティブを用いることで、効率的なViewの制御を行うことができる

---

## ngModel
- 恐らく最も利用頻度が高い属性ディレクティブ
- **利用にはFormsModuleのインポートが必要**
- 多くの標準コンポーネントに対して双方向のバインディングを提供する

```ts
export class AppComponent  {
  name = {
    family: "山田",
    first: "太郎"
  }
}
```

```html
<p>Family Name: <input type="text" [(ngModel)]="name.family"></p>
<p>First Name:  <input type="text" [(ngModel)]="name.first"></p>

<!-- プロパティ内部と直接バインドすることも可能 -->

Your Name: {{name.family}} {{name.first}}
```

---
## NgIf ディレクティブ
- 特定の条件に従い、要素の表示/非表示をコントロールする
    - ここでいう表示/非表示は、DOM要素としての存在/非存在と同等
    - CSSで「消す」（display="none"）とは次元が違うのに注意
    - `*ngIf="expression"` で記載する。**アスタリスク（*）に注意**
- プロパティアクセサの手前のNullCheckとしても有効


```html
<p>
  <input type="checkbox" [(ngModel)]="show">
</p>

<hello *ngIf="show" name={{name.first}}></hello>
```

NullCheckとしての利用は以下のような形になる。

```html
<hello *ngIf="name" name={{name.first}}></hello>
```

### 余談
`*`は省略記法で、フルでは以下のような記載が必要になる。本来`ngIf`は`ng-template`が持つプロパティである。

```html
<ng-template [ngIf]="show">
  <p>test</p>
</ng-template>
```
これは他の構造ディレクティブでも同一である。

---
## NgFor ディレクティブ
- リスト要素を受け取り、繰り返し処理を行う
- `*ngfor={syntax}` で指定する。内部のsyntaxは `let %element% in %lists%` という形式で、`lists` にはプロパティなどに定義されたリストを、`element` はリスト内にアクセスするアクセサ名を指定する。

```html
<div *ngFor="let item of items">{{item.name}}</div>
```

---
## *ngForの中身
`*ngFor` の中で定義する構文は通常のAngularの構文ではなく、ディレクティブ用のマイクロシンタックスと呼ばれるものである。[細かい文法](https://angular.io/guide/structural-directives#microsyntax)は現段階では割愛するが、以下の構文は有用なので覚えておくとよい。


### indexを利用したいとき
要素の何番目かを指定した場合は、ngForのSyntax内で `index` を別の変数にキャプチャすれば利用できる。

```html
<div *ngFor="let item of items; let i=index">{{i + 1}} - {{item.name}}</div>
```

### 要素の再レンダリングを避けたい時
ngForは列挙リストが変更された場合（例えばサーバーに問い合わせてリスト全体が更新された場合）、ngForで記述している要素全体を再レンダリングする。これは場合によっては非常におおきなパフォーマンス劣化を伴う。

こういった再レンダリングを避けるために、 `trackBy` という構文が用意されており、どの要素が変わったときに再レンダリングを行うのかを判定する関数を作成できる。例えば以下は要素のIDが変わらない場合はリストが差し替わってもレンダリング結果を再利用する、という動きを定義している。

```ts
trackByItems(index: number, item: Item): number { return item.id; }
```

```html
<div *ngFor="let item of items; trackBy: trackByItems">
  ({{item.id}}) {{item.name}}
</div>
```

---
## NgSwitchディレクティブ
- 変数を一つ受け取り、その変数の値によってレンダリングを分岐させる
    - デフォルトケースも指定可能
- 見てのとおり、`switch case`構文のディレクティブ版


```ts
<div [ngSwitch]="currentItem.feature">
  <app-stout-item    *ngSwitchCase="'stout'"    [item]="currentItem"></app-stout-item>
  <app-device-item   *ngSwitchCase="'slim'"     [item]="currentItem"></app-device-item>
  <app-lost-item     *ngSwitchCase="'vintage'"  [item]="currentItem"></app-lost-item>
  <app-best-item     *ngSwitchCase="'bright'"   [item]="currentItem"></app-best-item>
<!-- . . . -->
  <app-unknown-item  *ngSwitchDefault           [item]="currentItem"></app-unknown-item>
</div>
```

---
## 演習問題
以下の仕様でTODOリストを作成すること。

1. TODOを追加、編集、完了できる
2. 完了していないアイテム / 完了したアイテムでそれぞれフィルタリングできる
3. その他、自由な機能追加を歓迎します。
【Node.js × LINE WORKS API】監査ログをダウンロードする

すんごいドマイナーな内容なのですが、やりたいことのために必要だったので調べました。( ﾟДﾟ)

ただ、勉強不足なせいか思ったより時間がかかってしまいました。。。
反省と自身の備忘録的にしっかりとアウトプットしておこうと思います(=_=)

# LINE WORKS API

LINE WORKS で提供されている API です。
トーク Bot を操作したり、カレンダーやメールの内容を取ってきたりできます。
今回使用するのは [監査データのダウンロード API](https://developers.worksmobile.com/jp/document/30014002/v2?lang=ja) です。

[LINE WORKS Developers](https://developers.worksmobile.com/jp/?lang=ja)

# 実行環境

実行環境は以下の通りです。

- Node.js
- Visual Studio Code
- LINE WORKS API

# 事前準備

1. [Node.js をインストール ](https://qiita.com/kunihiros/items/eb22912f7bf41abf0161)
2. [Visual Studio Code をインストール](https://qiita.com/ponsuke0531/items/0d696eae286d1206baf9)
3. [LINE WORKS Developer Console で認証情報を取得](https://qiita.com/kunihiros/items/54853e910ed1dff9ebdc)
4. 各モジュールをインストール

```
npm install request --save
npm install csv --save
```

# API を Request するコード

```js:download.js
// LINEWORKS 認証情報
const CONSTS = require("./consts.js");

const request = require('request');
const csv = require('csv');

const apiId = CONSTS.API_ID;
const feature = 'log';
const service = 'message';
const serviceId = 'audit';
const endDate = getUnixTime();
const startDate = Number(endDate) - 86400; // 24時間前から現在時刻までのログを取得
const tenantId = CONSTS.DOMAIN_ID;
const domainId = CONSTS.DOMAIN_ID;
const rangeName = 'tenant';
const uri = `https://audit.worksmobile.com/r/${apiId}/audit/v2/${feature}/${service}/logs.csv?apiId=downCsvLog&serviceId=${serviceId}&startDate=${startDate}&endDate=${endDate}&tenantId=${tenantId}&domainId=${domainId}&rangeName=${rangeName}`;

const options = {
  'method': 'GET',
  'url': uri,
  'headers': {
    'consumerKey': CONSTS.CONSUMER_KEY,
    'Authorization': `Bearer ${CONSTS.TOKEN}`
  }
};
request(options, function (error, response) {
    if (error) throw new Error(error);
    csv.parse(response.body,
        { bom: true, columns: true },
        (err, data) => { console.log(data) }
    )
});

function getUnixTime() {
  const date = new Date();
  const now = date.getTime();
  return Math.floor(now/1000);
};
```

## コードについて補足

- 認証情報は CONSTS.js ファイルにまとめてあります。

```js:CONSTS.js
const DOMAIN_ID = 'xxxxxxxxxxxx';
const API_ID = 'xxxxxxxxxxx';
const CONSUMER_KEY = 'xxxxxxxxxxx';
const TOKEN = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'

exports.DOMAIN_ID = DOMAIN_ID;
exports.API_ID = API_ID;
exports.CONSUMER_KEY = CONSUMER_KEY;
exports.TOKEN = TOKEN;
```

- 今回はトークログを取得しているので `const service = 'message';` を指定しています。ログイン状況やメールなどのログも取得できます。詳しくは[公式ドキュメント](https://developers.worksmobile.com/jp/document/30014002?lang=ja)を参照ください。

- **トークログのみ** unix timestamp 形式で時間単位の指定が可能なので unix timestamp 形式で指定しています。
- UNIX time stamp 形式で指定する場合 **24時間以内のデータ**しか取得できません。

- Request URL、ちょー長いですよね！( ﾟДﾟ)ﾒﾝﾄﾞｲ
- 取得した CSV データには BOM が入っているので `csv.parse` するときにオプションを指定しています。`{ bom: true, columns: true }`

# おわりに

ここまでお付き合いいただきありがとうございました。

冒頭にも書きましたが、やりたいことがあって・・・
Bot の入っていないトークルームの発言をトリガーにしたいんですよね。
本当は GAS で実装したかったのですが GAS での csv ダウンロードがどうにもうまくできなくて。
GAS は Node.js での実装が終わったら再チャレンジしようと思います。

ではまた！(^^)/

# 参考にさせていただきましたm(_ _)m

[LINE WORKS Developers](https://developers.worksmobile.com/jp/?lang=ja)
[Visual Studio Codeをインストールする](https://qiita.com/ponsuke0531/items/0d696eae286d1206baf9)
Raspberry Piへのssh、RDP設定方法について

#SSH接続


1.「画面左上のラズパイマーク」→「設定」→「Raspberry Piの設定」からSSH の有効・無効の設定ができるので、sshを有効に設定。


2.(手順1できていたら、こっちはいらないかも)下記サイトの「Raspberry PiのSSH接続設定」を参考にssh有効化を設定。
https://qiita.com/3no3_tw/items/4b5975a9f3087edf4e20#raspberry-pi%E3%81%AEssh%E6%8E%A5%E7%B6%9A%E8%A8%AD%E5%AE%9A

下記コマンドを叩く。

```
$ sudo raspi-config
```

3.ラズパイとssh接続したいPCがpingで疎通取れるように設定。
基本は同じSSIDに接続していればいけるはず。macはpingのステルスモードを切った状態にしてから疎通確認してください。使用しているIPはターミナルから、ifconfigまたはipconfig、show ip addrコマンドのどれかで確認可能です。


4.sshのコマンドを叩く。

```
ssh ホスト名@IPアドレス
```


#VNC接続
ラズパイ側をVNC server、PC側をVNC clientとして使用します。


基本的に下記サイトを参考に設定しました。
https://qiita.com/n0bisuke/items/0ccec7f9ce71ef54ddcc


ラズパイ側の設定(VNC server)
0.自分の環境ではrealVNCがデフォルトで入っていたのでそれを使いました。tightvncも入れ直したら使えますが、real VNCの方が性能いいらしいです。
1.「Raspberry Piの設定」からVNCを有効にできるので、有効に設定してください。　
2. 画面右上に以下の画面のようなアイコンがあるので、これをクリックするとrealVNCの設定画面に行けます。(万が一消えてしまった場合は手順1.の作業に戻って、再度有効化してください)


3.開いた画面右上からoptionを開き、
SecurityのEncryptionをPrefer offに、AuthenticationをVNC passwordにUsers&PermissionのStandard userをダブルクリックしてパスワードを設定を実施してください。Standard userに設定できるパスワードは6文字以上8文字以下になるため、注意してください。
以下のサイトを参照してください。
https://denseforestreviewcannotsay.blogspot.com/2019/12/mac-raspbianvnc-apple-remote-desktop.html

mac PC側の設定(VNC client)
VNC viewerを使用せず、macにデフォルトである機能を使っています。win環境であればultraVNCが必要かと思います。


1.finderを選択して、画面右上のメニュー画面から「移動」→「サーバーへ接続」を選択してください。
2.開いた画面に、以下のようにアドレスを入力してください

```
vnc://<IPアドレス>:5900
```

3.うまく接続できていたらパスワードを聞いてきます。先ほどstandard userに設定したパスワードを入力してください。

謎の警告が出ると思いますが、特に気にせずconnectでいけました。
ここでエラーが発生することが多く、自分はここで詰まりました。うまくいかないときはラズパイ側のvncの設定がおかしくないか確認してください。ラズパイ側のVNCを無効にして再度有効にしたら自分は突破できました。




#固定IP化


以下のリンクを参考に、/etc/dhcpcd.confの設定を変更してください。
https://sites.google.com/site/voidlinuxmemo/she-ding/jing-deipadoresuno-she-ding
RSpec エラー 解決　undefined method 'name' in 'user' factory 

rspecコマンドを打った時に出たエラー。

## 結論　

FactoryBotの定義の書き方が違う。

## コード

間違った書き方

```ruby
require 'rails_helper'
FactoryBot.define do
   factory :user do
     name "Example"
     sequence(:email) { |n| "tester#{n}@example.com" }
     password "password"
     password_confirmation "password"
     year "1年"
     bio "hello!"
   end

end

```
正しい書き方

```ruby
require 'rails_helper'
FactoryBot.define do

  factory :user do
    name {"Example"}
    sequence(:email) { |n| "tester#{n}@example.com" }
    password {"password"}
    password_confirmation {"password"}
    year {"1年"}
    bio {"hello!"}
  end
end
```

### 一応gemfile

```ruby
group :test do
 #rspecには、以下の3つのgemが必要。
  gem 'rspec-rails'
  gem 'factory_bot_rails'
  gem 'rails-controller-testing'
  #rspecのfeatureで必要。
  gem 'capybara', '~> 2.13'
  #Capybaraでテスト中に、現在どのページを開いているのか確認するため
  gem 'launchy'
  #便利。validationが一行くらいでかける。
  gem 'shoulda-matchers',
    git: 'https://github.com/thoughtbot/shoulda-matchers.git',
    branch: 'rails-5'
end

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  gem 'spring-commands-rspec'
end

group :development do
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'web-console', '>= 4.1.0'
  # Display performance information such as SQL time and flame graphs for each request in your browser.
  # Can be configured to work on production as well see: https://github.com/MiniProfiler/rack-mini-profiler/blob/master/README.md
  gem 'rack-mini-profiler', '~> 2.0'
  gem 'listen', '~> 3.3'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'

end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
```


参考:
https://stackoverflow.com/questions/57126906/rails-undefined-method-name-in-user-factory-or-undefined-method-for-all-fac
Rust環境構築（Windows, IntelliJ IDEA）

RustをどのIDEで書けばいいのかわからず、長年連れ添ったIntelliJ IDEAでひとまずやってみることにしました。
(not [CLion](https://www.jetbrains.com/ja-jp/clion/))

# 実行環境を準備する
Rustをインストールし、実行環境を作ります。

### Rustを導入する
以下にアクセスしてRustを導入します。
https://rustup.rs/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/768602/e440337e-b548-8da2-d564-25ef00ba4816.png)
中央の`rustup-init.exe`をクリックするとexeファイルのダウンロードが始まり、ダウンロードできたら、そのままダブルクリックで実行してください。  

最初なのでとりあえずデフォルト設定でインストールします。
C++のビルドツールも必要になる旨のメッセージが出ますが、次の章で説明するため、一旦無視して進めます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/768602/3053de6c-78d1-beb4-2fe9-c6f245eb8b1f.png)
こんな画面がでてきたら「1」を入力してエンターを押します。  

これでRustのインストール自体は完了です。
しかし、これだけではコンパイル時にエラーとなります。  

### VisualStudioのビルドツールを導入する
Rustを入れただけでコンパイルすると以下のようなエラーが発生します。
```sh
error: linker `link.exe` not found
```

これはC++のビルドツールが存在しないためで最も簡単に入手できるVisualStudioのビルドツールを導入することで解決します。
以下にアクセスし、Build Toolsのダウンロードをクリックします。
https://visualstudio.microsoft.com/ja/visual-cpp-build-tools/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/768602/b07348ea-2fe1-db0c-73e0-4f6ace6f75d7.png)
ダウンロードが完了したら、実行し、`Visual C++ Build Tools`にチェックをつけインストールします。

これで実行環境ができました。
次にIDE（IntelliJ IDEA）側の設定を行います。

## IntelliJ IDEAの設定

### Rust用のプラグインを入れる
File>Settings>Pluginsを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/768602/880e7a8d-fced-6541-cb5e-ca8edd6bd5f5.png)
Marketplaceタブで検索欄に「Rust」と入力し、Installをクリックします。
※あとから撮ったので画像ではInstalledになっています。

これでIDE側も準備できたので、実際にHello Worldを出力するプログラムを作ってみます。

### Hello, world!
新規プロジェクトを開きます。  
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/768602/c13b07c8-6684-698e-b1ed-fa570c411813.png)
このようにRustの選択肢が増えているはずです。
Rustを選択すると以下のような設定画面になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/768602/89f00d79-1b8d-032f-e0a8-9fda898ea6fb.png)
それぞれのパスは自動設定ができるので、それに従い、Hallo Worldプロジェクトを作成します。
なおプロジェクト名はsnake_caseが推奨されているみたいです。（実行時に警告が出ます。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/768602/0df1898c-4a9a-439c-80ea-6ca8235ef1ea.png)

すでにHallo World!が出力されるプロジェクトになっているはずなので、そのまま実行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/768602/5f929d90-a963-5624-c3cb-a13415e913c1.png)
ちゃんとHello World!が出れば完了です。お疲れさまでした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/768602/77fa96fb-84d5-8506-0c02-6bbed51b22a6.png)
RSpec エラー　解決　undefined method `feature' for RSpec:Module

rspecコマンドを打った時に出たエラー。

## 結論

capybaraを読み込んでいなかった。

## コード

エラーコード

```ruby
require 'rails_helper'

RSpec.feature "Users", type: :feature do

  describe "Signup page" do
    before do
      visit signup_path
    end
 
    it "display Signup contents, title properly" do
      expect(page).to have_css('h1', text: 'ユーザー登録')
      expect(page).to have_title 'Signup hoge'
    end
  end
  
end
```
解決したコード capybaraを読み込む

```ruby
  require 'rails_helper'
+ require 'capybara/rspec'

RSpec.feature "Users", type: :feature do

  describe "Signup page" do
    before do
      visit signup_path
    end

    it "display Signup contents, title properly" do
      expect(page).to have_css('h1', text: 'ユーザー登録')
      expect(page).to have_title 'Signup hoge'
    end
  end
  
end
```

### 一応gemfile

```ruby


#rspecのprogressbarを表示してくれる。実行のコマンド% bin/rspec spec/ --format Fuubar
gem 'fuubar'

group :test do
 #rspecには、以下の3つのgemが必要。
  gem 'rspec-rails'
  gem 'factory_bot_rails'
  gem 'rails-controller-testing'
  #rspecのfeatureで必要。
  gem 'capybara', '~> 2.13'
  #Capybaraでテスト中に、現在どのページを開いているのか確認するため
  gem 'launchy'
  #便利。validationが一行くらいでかける。
  gem 'shoulda-matchers',
    git: 'https://github.com/thoughtbot/shoulda-matchers.git',
    branch: 'rails-5'
end

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  gem 'spring-commands-rspec'
end

group :development do
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'web-console', '>= 4.1.0'
  # Display performance information such as SQL time and flame graphs for each request in your browser.
  # Can be configured to work on production as well see: https://github.com/MiniProfiler/rack-mini-profiler/blob/master/README.md
  gem 'rack-mini-profiler', '~> 2.0'
  gem 'listen', '~> 3.3'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

```

参考:

https://stackoverflow.com/questions/26217184/rspec-3-1-undefined-method-feature-for-mainobject
VSCodeでのPython開発でリアルタイムにコードチェックが走るようにする


## はじめに

これまでPythonを使うときはちょっとしたスクリプトを書くシーンが多く、とりあえずJupyterNotebookに打ち込み＆実行してコーディング規約違反は後から気づいて直す…ということが多かったのですが…

PythonのWebアプリケーションフレームワークである[Django](https://www.djangoproject.com/)での開発をVisualStudioCodeで行いたい！ということになり、静的コードチェックとフォーマットツールを導入しました。

設定にあたりいくつか記事を参考にさせていただきましたが、JavaScriptのESLintプラグインのように入力時リアルタイムにチェックが走る設定をする記事が見当たらなかったので、備忘も兼ねて記事にしました。


## 概要

Pythonのコードチェックにはいくつか種類があり、現在VSCodeで設定できるものだけでも以下の通りたくさんあります。

- bandit
- **flake8**
- mypy
- prospector
- pycodestyle
- pydocstyle
- pylama
- pylint (default)

それぞれの特徴などはこの記事には記しませんが、今回インストールした**flake8**にはVSCode用に**cornflakes-linter**というプラグインがあり、導入することで入力に合わせてリアルタイムにコードチェックを走らせることができます！
![cornflakes.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1021040/ba2075fd-a56e-d457-8e4f-7b71bccb818d.gif)

## 環境
- Windows 10 Enterprise
- Python 3.9.1
- Visual Studio Code 1.52.1 (Pythonプラグインインストール済)

## 導入手順
### flake8をインストールする
コマンドプロンプト等のコンソールから下記コマンドを実行

```
pip install flake8
```
### cornflakes-linterプラグインをインストールする
VSCodeのMarketplaceからcornflakes-linterをインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1021040/cdbbef31-902c-57ab-fd20-454e44dbd23b.png)

### VScodeでcornflakes-linterを設定する
ファイル＞ユーザ設定＞設定　で設定画面を開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1021040/52f6bf84-ce77-fc85-ef14-d213a8b3c811.png)

cornflake等のキーワードで検索するとCornflakes>Linterの項目が出てくるので、下図のように設定

 - flake8のインストール先パス
 - コードチェックのタイミング（今回はリアルタイムにしたいので**onType**を選択）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1021040/57be5a3a-17de-0c50-3d60-441bfb22f30a.png)

### VSCodeでデフォルトのLinting設定を変更する【重要】

※ここを正しく設定しないとcornflakes-linterではなくデフォルトのflake8が動作してしまうのでご注意ください（実際躓きました…）

前のステップと同様にVSCodeの設定画面を開き、Python>Lintingの項目を下図のように設定

- PythonのLinting自体は **有効化**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1021040/e22f1bf8-3f4d-7880-ecdc-88e85a2edf40.png)

- 初期状態でPylintが有効化されている場合は **無効化**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1021040/3b822859-7410-f313-dc8c-bbb9340abf04.png)

- デフォルトのflake8は **無効化**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1021040/b72d2c94-cf2e-5b3b-f478-a7a0b28c3ac6.png)


- デフォルトのLint On Saveは **無効化**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1021040/485a7c0f-9813-7fe9-4562-2f3b51c11602.png)


以上です！いたってシンプルな手順で設定ができました。
この状態で.pyファイルを編集すると、コードチェックが動作するようになっているはずです。

## おわりに
フォーマットツールは別途blackをインストールし、保存時に自動整形されるように設定しています。（2つ目の参考リンク）
どのみち自動整形のために保存はするし、こまめな保存癖もあるのですが、リアルタイムチェックだと誤った入力（変数名のタイポなど…）をしたときにすぐ気づけたり、書きながら「あ、こういう書き方駄目なのか」とすぐフィードバックが得られたりとメリットも多いので、使い分けかなと思います。

PythonでWeb開発をされている方にはぜひ一度お試しいただきたいです…！

##参考リンク

https://qiita.com/psychoroid/items/2c2acc06c900d2c0c8cb
https://blog.daisukekonishi.com/post/python-black/
Cargoからrlibファイルをリンクする

Rustのlibクレートをbuildすると.rlibファイルが出来上がります。
通常, cargoのconfig.tomlに依存関係を記述すれば, 他のクレートでも勝手にリンクしてくれますが,
もし実装を公開せずにリンクしたいという場合のケースについて紹介します. 

```rust

fn main() {
    my_crate::my_mod::my_func();
}
```

### 1. 普通のケース(crates.ioのクレートをリンク)
Config.tomlにそのクレートを依存関係として記述するだけです.
https://doc.rust-lang.org/cargo/reference/specifying-dependencies.html

```toml:Config.toml
[dependencies]
my_crate= "0.1.12"
```
### 2. 普通のケース(ローカルのクレートをリンク)
Config.tomlにそのクレートのパスを記述します.

```toml:Config.toml
[dependencies]
my_crate= { path = "path_to_my_crate" }
```

### 3. 紹介するケース(手元にあるrlibファイルをリンク)
予めmy_crateをビルドして.rlibファイルを作成しておき, 
cargoビルド時にmy_crateをリンクするオプションを渡します.

```console
cargo rustc -- --extern my_crate=libmy_crate.rlib
```
cargoのrustcオプションの説明はこちらにあります. 
https://doc.rust-lang.org/cargo/commands/cargo-rustc.html
```cargo rustc```では ```-- ```　以降のコマンドをrustcへのオプションとして渡せます. 
今回の例では```--extern my_crate=libmy_crate.rlib```がrustcに渡されます.  

rustcを直接叩いてビルドしてもいいのですが, Cargo.tomlの依存関係に記述したクレート(hoge_crate)については, cargoが自動で```--extern hoge_crate==hoge_crate_rlib_path```オプションをつけて, クレートをビルドしてくれます.  

ですので, リンクしたいrlibファイルのみ明示的にexternしたほうが手軽です.
なお, rustcからrlibファイルのリンク方法がこちらにあります.
https://doc.rust-lang.org/stable/rust-by-example/crates/lib.html

ちなみに, ```cargo build```時に```cargo build --verbose```をつけると,
実際にcargoが実行しているコマンドが確認できます.  
CargoはConfig.tomlに記述した依存クレートをダウンロード&rlibファイルのビルドを行い, 
ビルドするクレートに依存クレートのrlibファイルをリンクしています.

#### rlibファイルでのリンクのデメリット
VScodeなどでrlsを使用できません.(多分) なので, rlsがそんなクレートはないと怒ってきます.
実装を隠したいケースでしかメリットが薄いです.  

個人利用ではあまりないと思いますが, 企業だと案外使うかもしれません.
なお, Cのオブジェクトファイルと異なり, ヘッダーのみ開示というやり方もできません. (多分)
Rustの場合APIをドキュメント化してrlibファイルと合わせて配布することになると思います. 
その際は, 
lib.rsに

```lib.rs
#![doc(html_no_source)]

pub mod hoge;
....
```
と記述すればソースはドキュメント内に追加されません.
Google Spread Sheet 行毎に特定の列に値があるときだけ背景色を付ける

# やりたいこと
Available 列に値があるときだけ行全体の色を変更します。表の中で有効な行をマークするイメージ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68978/7c1b3b90-2a39-4451-4350-4ddaaf7dd9b8.png)

# やりかた
「条件付き書式 (Conditional Formatting)」を使います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68978/82295d1d-5cd6-434d-bb73-bf1c6aad51cd.png)

で次のように指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68978/c0a6fbfb-d5e2-f380-3219-c23e8e10d37b.png)

## 解説
① 範囲に適用 (Apply to range)
これは色を付けたい（書式を変えたい）範囲を指定します。条件の値が含まれる列は範囲に入れる必要はありません。

② 書式ルール (Format rules)
まずは「セルの書式設定の条件 (Format cells if...)」ドロップダウンから 「カスタム数式 (Custom formula is)」を選択します。すると直下にテキストボックスが出現します。
ここに式 `=ISBLANK($A2)` と入力します。今回は、値が含まれていない場合に色を付けたいので `ISBLANK()` 関数を使います。

行列の指定方法ですが "**「範囲に適用 (Apply to range)」の一番左上に適用する式**" を記述します。この記事で伝えたかったことはこれです。

`$A` は "範囲内のどのセルからでも、絶対にA列を参照する" ことを示します。 `2` は `$` がついていないので "範囲の一番左上 A2 からは 2 行目を参照したので、たとえば A3 からは 3 行目を参照する" という風に、適用されるセルに応じて相対的に場所を指定していることを意味します。 

③ 書式スタイル (Formatting Style)
後はお好きに書式を設定して完成です。書式ルールに一致するセルに適用されます。


# おわり
```
　 ＿
　 ＼ヽ,　,、
＿　　`''|/ﾉ
＼｀ヽ、|
　＼, V
　 　 `L,,_
　　　 |ヽ､)　　　　　　　　　　　　　　　　,､
　　　.|　　　　　　　　　　　　　　　　　　 ヽYﾉ
　　 / 　 　 　 　 　 　　　　　　　　　 r''ヽ、.|
　 /　　　　　 　 ,..　-──-　.、　 　 `ｰ-ヽ|ヮ
　.|　　　　　 , ‐'´　　 ＿＿ 　 　 `ヽ、　　`|
　 |　　　　／　, ‐'"´ 　 　 　 ｀`''‐､　 ＼　 |
　 |　　　/　／　　　　　　　　　　 　 ＼　ヽ |
　 ヽ,　　y'　　　/` ‐ 、　　　 ,.. -'ﾍ 　 ヽ. }ﾉ
　　　ヽ,' 　 　 /　　　/｀,ゝ' ´ 　 　 ヽ 　 Y.
.　　　 i　　　 ,' 　 　 {　{　　　　　 　 ヽ 　 `、
　　　 l　 　 ,ｲ─- ､.._　ヽ　,,　_,.. -─:}　　　!
.　 　 |　　r‐i|　ｰ=ェｪ:ゝ　,.∠ｨｪｪ=ｰ' |r ､.　 l
　　　|　　{ﾄ｣l|.　　　　　 : | "　 　 ｀`: |!ﾄﾘ　　|
.　　│　　ヽ､|　　　　　 ;.｣_　　　　　 |'ソ　 　 !
.　　│　　 　 ヽ 　 　 r──ｯ　　　 /ﾉ　　　　|
　 　 |　　　 　 lヽ　　　￣￣ 　 　 / ｲ　　　　│
.　 　 !　　　 丶ヾヽ　　　 ~　　　, '　ﾉ　│　　 !
　　　 ﾄ.　　　　ﾐ.ゝ ヽ.＿＿__.／　　/　 l　　 /
　　　　ヽ　　ヽ　　　　　　　　　　　ｲ　,' / , '　　　　　　　┼ヽ　 -|r‐､.　ﾚ　|
　　　　　＼.　　　　　　　　　　　　　ノﾚ'／　　　　　　 　 ｄ⌒)　./|　_ﾉ　 __ﾉ
```
【VSCodeプラグイン】コーディング初心者こそPrettierをまずインストールしよう（動画解説付き）

[![og-image-for-top.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/289248/071fd586-766f-d233-10e4-e65cadc945be.png)](https://html-css.sokushu-class.com/preparation/install-editor-plugins.html?ref=qiita-img)

## はじめに

この記事は「HTML&CSS速習教室」の学習ページの1つ「[プラグインのインストール](https://html-css.sokushu-class.com/preparation/install-editor-plugins.html?ref=qiita-txt-1)」の中から、特にコーディングやプログラミングの学習を始めたての人にインストールして欲しいプラグイン「Prettier」の紹介部分を抜粋したものです。


## このページを読んで得られるメリット

- Prettierがどういうものかわかるようになる
- VSCodeのプラグインインストール方法がわかるようになる
- Prettierプラグインを有効にするための設定手順がわかるようになる


## Prettierの役割

Prettierを一言で説明すると「**コードをキレイに整形してくれるツール**」となります。

コーディングの学習を始めたばかりの初心者あるあるだと思うのですが、HTML・CSS・JavaScriptなどといったコードを書いていると「**コードがゴチャゴチャしてしまう**」という経験はありませんか？

コードがゴチャゴチャしていると

- 読みづらい
- コードにおかしい部分があっても気付きづらい
- 仕事レベルであれば先輩エンジニアに怒られる


など、デメリットのオンパレードとなります^^;


ただ、だからといって「コードをキレイに保つ」というのはコーディング初心者にとっては慣れていない作業なので、なかなか難しいかと思います。
（「そもそもキレイなコードってどういう状態？」という感じではないでしょうか？）


そういった悩みを一発で解決できるツールが「Prettier」になります。

現役で仕事をしているエンジニアであれば使っている人のほうが多いかと思いますが、コーディング学習を始めたての初心者こそまずは「Prettier」をインストールすることで、学習効率が大きく改善されるのかなと考えています^^


## Prettierのインストール手順と設定手順

手順は以下の動画で解説しているので、そちらを参考に同じように進めていただけたらと思います^^
↓
https://youtu.be/Xhh7ICNDymE
（直接動画を埋め込めないため、YouTubeのリンクを貼っています）

## おわりに

Prettierのインストールと設定が完了したら、ファイルを保存するたびに「自動整形」が実行されるか確認してみましょう^^

今回は「Prettier」を紹介しましたが、他にもコーディング初心者向けに紹介しているプラグインを「[プラグインのインストール](https://html-css.sokushu-class.com/preparation/install-editor-plugins.html?ref=qiita-txt-2)」の中で紹介しているので、もし興味があればぜひご覧になっていただけたらと思います^^
Redmineでチケットの表示件数（何件単位でページングするか）を設定

#何をしたいん？

下記の **1ページに…** の設定を変更したい！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/ce5eadf2-1a5a-c42c-1893-4542ab20e60d.png)

#ここで変更可

**管理** ページへ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/cd838c97-f561-1092-35f7-dbe4d98470c3.png)

さらに **設定** ページへ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/b5cd3c05-5099-8644-80a5-8e7c1bbb0bd2.png)

**全般** タブの **ページごとの表示件数** を設定すればOK！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/3e07dfaa-7cdc-d899-8ba2-00f8760b200b.png)

この方法はRedmineを使っている全ユーザーに適用されます。


#蛇足
抜け漏れチェックの為に残ってるチケット（タスク）を全部表示して、ざっと縦読みしたい時とかよくあります。
デフォルトの25件だと微妙に溢れて設定を切り替えるのが面倒なんです。

個人的には **1ページあたり50件表示でページ切り替えが発生しない** っていう状態が丁度いいです。

今度ユーザーごとに設定できるか調べてみよう。


#バージョン
CentOS Linux release 8.3.2011
Redmine 4.0.6.stable
Mac　読み上げ言語を切り替えるシェルスクリプト

## 読み上げ言語の切り替え

日本語だったら英語に、英語だったら日本語に切り替えるためのシェルスクリプトです。

automatorに実行させて、ショートカットで動くようにしています。
スクリプトを直接実行させると反映されなかったので、シェルをファイルに保存して、bash speech.shのように実行させています。

```
#!/bin/sh

SelectedVoiceID=`/usr/libexec/PlistBuddy -c "print SelectedVoiceID" ~/Library/Preferences/com.apple.speech.voice.prefs.plist`

if [ $SelectedVoiceID != 369275117 ]; then
	/usr/libexec/PlistBuddy -c "set SelectedVoiceID 369275117" ~/Library/Preferences/com.apple.speech.voice.prefs.plist
	/usr/libexec/PlistBuddy -c "set SelectedVoiceCreator 1886745202" ~/Library/Preferences/com.apple.speech.voice.prefs.plist
	/usr/libexec/PlistBuddy -c "set SelectedVoiceName Kyoko" ~/Library/Preferences/com.apple.speech.voice.prefs.plist
else
	/usr/libexec/PlistBuddy -c "set SelectedVoiceID 184560141" ~/Library/Preferences/com.apple.speech.voice.prefs.plist
	/usr/libexec/PlistBuddy -c "set SelectedVoiceCreator 1886745202" ~/Library/Preferences/com.apple.speech.voice.prefs.plist
	/usr/libexec/PlistBuddy -c "set SelectedVoiceName Ava" ~/Library/Preferences/com.apple.speech.voice.prefs.plist
fi

killall com.apple.speech.speechsynthesisd
killall SpeechSynthesisServer
```
serverlessでsqs+lambdaの構成

ServerlessFrameworkでsqsとlambdaの構成を説明します。
sqsもServerlessの管理下に含めたい人におすすめな方法です。
serverlessのインストールは済んでいるものとします。

## 環境
```
serverless -v
```
>Framework Core: 2.1.1
Plugin: 4.0.4
SDK: 2.3.2
Components: 3.1.3

```
node -v
```
>v14.7.0

## 1. serverless create
今回はtypescriptを使用します。

```
serverless create -t aws-nodejs-typescript -n {プロジェクト名} -p {パス}
```

-tオプションはtemplateで使用する言語を選択します。
-nオプションはnameでプロジェクト名を指定します。
-pオプションはpathで作成するプロジェクトをどこにおくか指定します。

例

```
serverless create -t aws-nodejs-typescript -n sample -p ./sample
```
これでカレントディレクトリ直下にsampleというtypescriptプロジェクトを作成することができます。
僕は作成したいディレクトリまで移動してこの書き方をすることが多いです。

```
ls sample
```
すると

```
handler.ts        package.json      serverless.ts     tsconfig.json     webpack.config.js
```
こんな感じになっていたら成功です。

## 2. sqsからメッセージを受けれるよう変更
デフォルトではapiの仕様になっているため、lambda関数がsqsからのメッセージを受け取るように変更します。
変更前にnpmでもyarnでもいいですがライブラリのインストールも忘れずに。。

### handler.tsの変更

```typescript:handler.ts
import { SQSHandler } from 'aws-lambda';
import 'source-map-support/register';

export const hello: SQSHandler = async (event, _context) => {
  for (const record of event.Records) {
    console.log(record)
  }
}
```

sqsに複数同時にメッセージが送信された場合に処理ができるよう、for ofを使用して配列の処理ができるようにしています。

### serverless.tsの変更
serverless.tsのresourceにsqsのもろもろの設定を書くことでsqsを作成することができます。

functionsの下に以下を追記します。

```typescript:serverless.ts
resources: {
    Resources: {
      MyQueue: {
        Type: "AWS::SQS::Queue",
        Properties: {
          QueueName: "forQiitaQueue",
          DelaySeconds: 10,
          MessageRetentionPeriod: 300,
          ReceiveMessageWaitTimeSeconds: 5,
          VisibilityTimeout: 60,
        }
      }
    }
  }
```
propertiesの中身について順を追って説明します。
DelaySeconds：配信遅延
MessageRetentionPeriod:メッセージ保持期間
ReceiveMessageWaitTimeSeconds:メッセージ受信待機時間
VisibilityTimeout:デフォルトの可視性タイムアウト

いずれも秒数指定です。

functionのeventがapiの仕様のままなので消しておきましょう。

```typescript:serverless.ts
functions: {
    hello: {
      handler: 'handler.hello',
      events: [
        {
          
        }
      ]
    }
  },
```
一旦これでdeployしてみましょう。

```
serverless deploy --profile {プロファイル名}
```

デプロイしたい環境のプロファイルを指定してください。

## 3. 確認・arnの指定
awsのコンソールでsqsの管理ページにアクセスして、sqs![スクリーンショット 2021-01-13 11.21.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1022774/cf0d5b1e-e4e3-a9e4-2b95-46b61ace8a34.png)
を作成できたか確認しましょう。
作成できていたら、ARNをコピーしてください。
先程、消したfuctionのeventsの部分に必要です。
以下のようにeventsの部分を編集してください。

```typescript:serverless.ts
functions: {
    hello: {
      handler: 'handler.hello',
      events: [
        {
          sqs: {
            arn: "コピーしたarn"
          }
        }
      ]
    }
  },
```

一旦これでokですが、本来であればarnをハードコードするのはよくないので環境変数などで参照するのがいいでしょう。
僕はclassmethodさんが解説しているこのやり方でいつもやっています。
https://dev.classmethod.jp/articles/serverless-framework-conf-change/

一旦はこれでokなのでまたデプロイしてみましょう。

## 4.確認!
sqsにメッセージを送信して、ログに出力されるか試してみましょう。
awsのコンソールから、sqsにメッセージを送信してみてください。

![スクリーンショット 2021-01-13 11.21.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1022774/4512168b-c95f-f114-2e43-43ea54ce860a.png)

awsのcloudwatchのログにbodyに"test"と入ったオブジェクトが出力されていれば成功です。
Manjaro Linuxでログインパスワードを忘れたときの対応

# 概要

- ログインパスワードを忘れたので、ログインできなくなった

# 対応手順

1. Grubメニューでkernelの末尾に `init=/bin/bash` を付与してF10を押下し、bashで起動する
2. `mount -n -o remount,rw /` でルートファイルシステムをread/writeでリマウント
3. `echo userid:password | chpasswd` でパスワードを変更する

# ref

パスワードリカバリ - ArchWiki
https://wiki.archlinux.jp/index.php/%E3%83%91%E3%82%B9%E3%83%AF%E3%83%BC%E3%83%89%E3%83%AA%E3%82%AB%E3%83%90%E3%83%AA
PHPでファイルのダウンロード（またはアップロード）や外部APIへのリクエストを行うと、同一セッション内の他のリクエストが処理できなくなる問題への対応方法

PHPでファイルのダウンロードやアップロード、外部APIへのリクエストを行うと、それらの処理中に他のリクエストが処理できなくなる事象が発生する場合があります。

## 発生条件

- ログインを必要とするシステムである。あるいは、ログインは行わないが、セッションの利用を行うシステムである。
- ファイルをダウンロード（またはアップロード中）、あるいは外部APIへのリクエストを行っている。また、処理時間のかかる（長い）処理である。
- 上記処理中に他の処理を行おうとすると（例えば同じシステム内の別機能を呼び出そうとすると）、結果が表示されるまでに時間がかかったり、タイムアウトする。
- 上記処理が完了あるいは中断後は、正常に他の処理を呼び出せるようになる。
- 上記処理中に、別ブラウザ（あるいは同一ブラウザのシークレットモード）から同じシステムへログインし、別機能を呼び出した場合は、当該事象（結果が表示されるまでに時間がかかる、タイムアウトする）は発生しない（＝同一セッションでは発生するが、別セッションでは発生しない）。
- セッションを利用しない機能では、当該事象は発生しない。

## 原因

セッションが排他ロックされているためです。
`session_start()` を呼び出すと、処理が完了されるか、明示的にセッションをクローズするまでの間、セッションがオープンされたままとなり、その間、排他ロックされます。

ほとんどの処理（すぐに完了する処理）においては、排他ロックによる影響を意識する必要はありませんが、ファイルのダウンロードやアップロード、あるいは外部APIへのリクエスト等、処理時間が長くなりがちな処理においては、排他ロックの影響について考慮する必要があります。


## 対応方法

ファイルのダウンロードやアップロード、時間のかかる外部APIへのリクエストを行う前に、セッションを明示的にクローズします。

※上記処理に必要となる値がセッションに格納されている場合は、セッションをクローズする前に取得し、変数や配列に格納しておきます。

`session_write_close()` を、時間のかかる処理の前に実行します。
参考：https://www.php.net/manual/ja/function.session-write-close.php

もし、処理完了後にセッションを参照したり、セッションデータを書き込みたい場合は、 処理完了後に`session_start()`してセッションを再開してから、セッションデータの参照や書き込みを行います。
参考：https://www.php.net/manual/ja/function.session-start.php

なお、セッションをクローズすることによって、セッションデータがクリアされることはありません。

また、上記はいずれもPHP標準メソッドになります。フレームワークを利用している場合は、フレームワークごとに実装は異なりますので、フレームワークのドキュメントより関連する内容を確認して対応してください。


## 参考

- https://unsolublesugar.com/20121103/113321/
- http://n-stream.seesaa.net/article/129291251.html
Codemagicでflutter build ipaが使用できるようになった

# はじめに
先日(1/11)、CodemagicのSlackのannouncementsチャンネルでこんなアナウンスがありました。
> Faster iOS builds with the flutter build ipa command :rocket:
Starting from Flutter version 1.24.0-6.0, Flutter has a new command for building iOS app archives: flutter build ipa. It optimizes how the .ipa file is created from the Flutter source and may significantly reduce your Codemagic iOS build times.
To use this build command with Flutter builds configured in the UI, select the Use flutter build ipa checkbox in App settings > Build > iOS build command.
You can also use it in your codemagic.yaml configuration, see an example here.
Note that:
* This command is not available on Flutter stable channel yet.
* You still need to set up code singing in your Codemagic configuration.

Flutter 1.24.0–6.0以降のバージョンで使えるようになった```flutter build ipa```がCodemagicでも使えるようになったようです。

flutter build ipaについてはmonoさんのブログがわかりやすかったです。
[`flutter build ipa` でiOS向けのビルドとアーカイブを同時に実行 🍎](https://medium.com/flutter-jp/ipa-e176de0276c6)

# 使い方

App settingからBuildの設定項目を開きます。すると中央くらいにiOS build commandとしてflutter build ipaが選択できます。
![スクリーンショット 2021-01-13 10.57.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327865/6cf49463-35cc-fc7f-c4be-50cf7c6b7af5.png)

ただし、これはFlutter versionをchannel Betaにしないと使えないのでその点を注意してください。
![スクリーンショット 2021-01-13 10.59.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327865/19474862-f7b1-74d2-6958-43b05653370e.png)

# ハマった点
主にFlutter versionをchannel Betaにしたことによるのが原因です。firebaseを使用している場合はこのようなエラーに遭遇する可能性があります。

```
Because every version of flutter_localizations from sdk depends on intl 0.17.0-nullsafety.2 and firebase_auth_web >=0.3.0-dev.1 depends on intl ^0.16.1, flutter_localizations from sdk is incompatible with firebase_auth_web >=0.3.0-dev.1.
And because firebase_auth >=0.19.0+1 depends on firebase_auth_web ^0.3.2+5, flutter_localizations from sdk is incompatible with firebase_auth >=0.19.0+1.
So, because memesan depends on both firebase_auth ^0.19.0+1 and flutter_localizations any from sdk, version solving failed.
pub finished with exit code 1
```

flutter_localizationsはflutter sdkのものを使用しており、intl 0.17.0-nullsafety.2に依存していますが、firebase_auth_web はintl ^0.16.1に依存しています。firebase_auth_webを直接的に使っていない場合は[このissue](https://github.com/FirebaseExtended/flutterfire/issues/4342)のコメントにある通り、pubspec.yamlに以下を追加します。

```
dependency_overrides:
  intl: ^0.17.0-nullsafety.2
```

また、deployment targetが10より小さい場合、pod install時に以下のエラーが発生したので、Podfileを修正しました。

```
[!] CocoaPods could not find compatible versions for pod "firebase_auth":
  In Podfile:
        firebase_auth (from `.symlinks/plugins/firebase_auth/ios`)

Specs satisfying the `firebase_auth (from `.symlinks/plugins/firebase_auth/ios`)` dependency were found, but they required a higher minimum deployment target.
```

# まとめ
Flutter 1.24.0–6.0以降のバージョンで使えるようになった```flutter build ipa```がCodemagicでも使えるようになったようなので共有しました。```flutter build ipa```を使うとビルド時間も短縮できるようなので使っていきたいですね。また、channel Stableで使えるようになるともっと使いやすくなりそうです。
【GAS】監査ログの取得（外部ドメインへの転送設定有効化を検知）


#やりたいこと
- Gmailの転送設定で外部ドメインへの転送を有効化したアカウントをSlackに通知させたい。
- 情報漏洩やうっかり外部ドメインへの転送設定を検知、早期に対処するため。
- 監査ログのチェックは１日毎で行う。
- 監査ログのイベント名で「email_forwarding_out_of_domain」に一致したもののみSlackに通知する。

#事前準備
Admin SDKのReportsを使うためにはサービスを追加しておく必要がある。

サービス > Admin SDK API の順に選択
バージョンは「reports_v1」、IDに「AdminReports」を入力して追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184018/6dff511f-5740-2b8d-7979-d91b14d174e3.png)


#コード

```javascript:sample.gs
var slackWebhookUrl = 'Slack Webhook URL';

function AuditLog() {

  var now = new Date();

  var oneDayAgo = new Date(now.getTime() - 1 * 24 * 60 * 60 * 1000); 

  var startTime = oneDayAgo.toISOString();

  var endTime = now.toISOString();

  var page;

  page = AdminReports.Activities.list('all', 'user_accounts', {
      startTime: startTime,
      endTime: endTime,
      maxResults: 5,
      pageToken: pageToken
    });//page = AdminReports.Activities.list('all', 'user_accounts', {

  var items = page.items;

  if (items){

    for (var i = 0; i < items.length; i++){

      var item = items[i];

      if (item.events[0].name == "email_forwarding_out_of_domain"){

        var text = "Gmailの転送設定有効化を検知しました。 " + item.id.time + " " + item.actor.email + " " + item.events[0].name + " " + item.events[0].parameters;
        postSlack(text);
      }//if (item.events[0].name == "email_forwarding_out_of_domain"){

    }//for (var i = 0; i < items.length; i++){

  }//if (items){

}//function AuditLog() {

function postSlack(text){
  var data = {
    "text": text
  }//var data = {
  var options = {
    'method' : 'post',
    'contentType': 'application/json',
    'payload' : JSON.stringify(data)
  };//var options = {

  Logger.log(options);
  UrlFetchApp.fetch(slackWebhookUrl, options);
}//function postSlack(text){
```
Androidアプリで電話をかける処理の基本の基

##Androidアプリで電話をかける処理の基本の基

Androidアプリで電話をかける処理をなんとなく実装していたため、改めてここに記載をし、自身の復讐をできればと思います。

※主に自身の毎日の復習・学習の機会創出、アウトプットによる知識の定着を目的としております。
暖かい目で見ていただけますと幸いです。

##Androidアプリから電話をかける方法
###IntentのACTION_CALLを利用する方法
IntentのACTION_CALLを利用することで、アプリ側で入力された番号を持って、電話をかけることができます。

※マニフェストで許可が必要
マニフェストでCALL_PHONEの許可が必要です。

###IntentのACTION_DIALを利用する方法
IntentのACTION_DIAL利用することで、アプリ側で入力された番号を持って、ダイヤラーと電話アプリを開くことができます

※ACTION_CALLとACTION_DIALの違い
ACTION_CALL：電話がそのまますぐかかる
ACTION_DIAL：電話アプリ・ダイヤラーを開くだけ。そこから改めて電話アプリ・ダイヤラー側で発信の操作（タップ）が必要

##Dangerous パーミッションの許可取得
Android 6.0らパーミッションの概念が変わり、ユーザーに許可を必要とするパーミッションと必要としないパーミッションの2種類にわかれました。

※おさらい
・Nomalパーミッション：アプリインストール時、AndroidManifest.xmlの記載を元に権限が得られる
・Dangerousパーミッション：ユーザーの許可により権限を得られる。ユーザーによって後から権限の取り消しも可能。

電話に関連するDangerousパーミッション(パーミッショングループPHONEに属するパーミッション)もありますので、用途に合わせて必要な権限を取得するよう設定しましょう。

##基本的なコード
```java
   Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse("tel:012345678"));
   startActivity(intent);
```
※マニフェストも許可が必要

```java:AndroidManifest.xml 
<uses-permission android:name="android.permission.CALL_PHONE" />
```

##エラー時の処理

ダイヤログ・電話アプリへの接続権限がないなどで、繋がらない可能性があります。
この基本的なコードのままでは例外時は電話が繋がらずかつ画面上でもなんの通知もない状態となってしまい、ユーザーからはどうなっているのか全くわからない状態になってしまいます。

ですので、例外処理を追加し、例外時はユーザーに例外内容を通知するように設定しましょう。

※または、startActivityの前に権限をチェックする処理を記載する方法でも対応可(発信ボタンを押したら、まずは権限チェックして、あればstartActivityとか)

```java
   Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse("tel:012345678"));

   //ここから例外処理
   try{
     startActivity(intent);
   }catch(e: SecurityException){
     Toast.makeText(context, "エラーです・・・・", Toast.LENGTH_SHORT).show()
   }
```

##まとめ
・各権限を事前に取得しましょう。
・Intentを利用して電話をかけましょう。
・エラー時に備え、例外処理も実装しておきましょう。
・権限がないのに、アプリ上で発信操作をしようとするユーザーに対する対策も構築しておきましょう。
[iOS][Objective-C] Objective-Cアプリ からWidgetを更新する方法



## ラッパー（swiftファイル）を用意する

WidgetKitHelper.swift

```
import WidgetKit
    
    @available(iOS 14.0, *)
    @objcMembers final class WidgetKitHelper: NSObject {

          class func reloadAllWidgets(){
 
            #if arch(arm64) || arch(i386) || arch(x86_64)
            WidgetCenter.shared.reloadAllTimelines()
            #endif

          }
    }

```

##swiftコードをインポート


```
#import "プロダクトネーム-Swift.h"
```

#####プロダクトネームとは
1. Projectナビゲーター (Xcodeの左側)のTargetsセクションからをアプリを選択
2. Build Settingsタブをクリック
3. "Product Name"で検索

##これで使用できます
```
    if (@available(iOS 14.0, *)) {
        [WidgetKitHelper reloadAllWidgets];
    }
```

##バックグラウンド時に更新させる場合
```
- (void)applicationDidEnterBackground:(UIApplication *)application {
    if (@available(iOS 14.0, *)) {
        [WidgetKitHelper reloadAllWidgets];
    }
}
```

[参考](https://stackoverflow.com/a/64007561 "参考")
pythonコードからkubernetesのpodを作成する方法

#はじめに
kubernetesでpodを作るためにはまずpodのyamlファイルを作り、作ったyamlファイルをコマンドでapplyすることにより作成することが出来るが、コマンドを使わずにpythonコードからpodを作成するしたいと思って調べたところ記事が見当たらず、プログラムを書くのに苦労したため共有しておきます。

#環境
* Ubuntu 18.04.2 LTS
* python 3.6.9
* kubernetesが動く環境

#podの基本的な作成方法
まず基本的なpodが作成できるか試してみる。podを作成するyamlファイルは何でもいいのですが、とりあえず簡単なpod.yamlのファイルを作成する。

```
$ vim pod.yaml
```
:set pasteでコピペすると楽

```pod.yaml
# Podを記述する時のきまり
apiVersion: v1
kind: Pod
# Podの名前やラベルをはじめとする細かい情報
metadata:
  name: myapp-pod  # Podに名前をつける
  labels:
    app: myapp  # ラベル app -> myapp をつける
# Podに配置するコンテナ本体の情報
spec:
  containers:
    - name: demo-container  # コンテナに名前をつける
      image: nginx  # コンテナ名(Docker Hubの名前と一致)
      ports:
        - containerPort: 80  # 80番ポートを使う
```
pod.yamlをapplyしてpodを作成してみる。

```
$ kubectl apply -f pod.yaml
pod/myapp-pod created
```
podが出来たか確認してみる。

```
$ kubectl get pod
NAME        READY   STATUS    RESTARTS   AGE
myapp-pod   1/1     Running   0          34s
```
作ったpodは用済みなので消しておく。

```
$ kubectl delete -f pod.yaml
pod "myapp-pod" deleted
$ kubectl get pod
No resources found in c0118272 namespace.
```

#pythonから作成
必要なものをインストールする。

```
$ pip3 install flask
$ pip3 install kubernetes
```

pod.yamlと同じディレクトリにpodcreate.pyという名前でpodを作成するpythonプログラムを作成する。namespaceのところは自分のnamespaceの名前に変更する。基本はdefaultになる。

```
$ vim podcreate.py
```

```podcreate.py
from flask import Flask
from flask import request
from kubernetes import client, config, watch
import yaml

app = Flask(__name__)
@app.route('/')
def pod_create():
    config.load_kube_config()
    with open("pod.yaml", "r") as f:
        pod = yaml.safe_load(f)
        k8s_apps_v1 = client.CoreV1Api()
        resp = k8s_apps_v1.create_namespaced_pod(body=pod, namespace="c0118272")
        print("pod created. status='%s'" % resp.metadata.name)
    return "pod created. status='%s'" % resp.metadata.name

if __name__ == "__main__":
    app.run(host='0.0.0.0', port=80)

```
ファイルの位置関係を確認する。

```
$ ls
podcreate.py  pod.yaml
```

flaskで書いたのでブラウザに表示して実行してみる。

```
$ export FLASK_APP=podcreate.py
$ flask run --host=0.0.0.0
 * Serving Flask app "podcreate.py"
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://0.0.0.0:5000/ (Press CTRL+C to quit)
 * 
```
ブラウザで実行してみる。urlはローカルなら[http://0.0.0.0:5000](http://0.0.0.0:5000)でローカルじゃなければポートは5000でIPアドレスが実行環境ごとに異なる。
![1-1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/739842/86053cf2-fbb4-cd21-7cc4-aad6fed32bfe.png)

上の画像のようになれば成功!

コマンドで確認してみる。

```
$ kubectl get pod
NAME        READY   STATUS    RESTARTS   AGE
myapp-pod   1/1     Running   0          3m11s
```
podが出来てたらやりたいことは完了！！

#おわりに
kubernetesのapiを使っていますが難しくてよくわからないので応用方法はそれぞれ調べてみてください！
良き研究ライフを～
めぐる式二分探索をPythonで実装する。シンプルな全探索との比較あり。

例えばAtCoderのこの[問題](https://atcoder.jp/contests/abc146/tasks/abc146_c?lang=ja)　(abc146のC)

線形探索で解こうとすると、探索範囲が$ 1≤A≤10^{9} $ となるので時間内に計算が終わりません。
（※$ 10^{8}$から$10^{9} $程度でTLEになります。）

試しに実装してみましょう。

```py
A,B,X = map(int,input().split())

max_int = 0
for i in range(1,10**9+1):
    if (A * i) + ( B * (len(str(i))) ) <= X:
        max_int = i
    else:
        break

print(max_int)
```
愚直に１から調べ上げる実装ですが、これを提出すると想定通り、TLEになってしまうものが大半です。このアルゴリズムをみてみると、1から順番に1ずつ大きくしていって条件を満たすかチェックしてます。

ということは$1,2,3,4,5,6,,  ,,10^{9}$というソート済みの配列に対して探索をしていることと同じです。このようなソート済みの時に使えるアルゴリズムといえば、、、。そう、二分探索ですよね。

ではアルゴリズムの教科書に書いてあるような方法で実装してみましょう。


```py
A,B,X = map(int,input().split())

#探索したい整数の範囲を定義
left = 1
right = 10 ** 9

#満たすべき条件
def validate(arg):
    if (A * arg) + ( B * (len(str(arg))) ) <= X:
        return True

#条件を満たす最大整数を探す二分探索
max_int = 0
while left <= right:
    mid = (left+right) // 2
    if validate(mid):
        max_int = mid
        left = mid + 1
    else:
        right = mid -1

print(max_int)
```

通常の2分探索であれば、条件を満たす値が見つかった時点でWhile文を抜けますが、この問題は条件を満たす最大の整数をみつける問題なので、そのまま続けます。ただし条件を満たす場合だけ、max_intを更新するのがポイントです。このコードのmidを答えに使うとバグります。

これでも問題ないのですが、めぐる式で指摘されているように、mid + 1 や mid -1 の部分で気をつけないと最後の境界判定のところでバグりやすいです。またWhileの条件判定も、<なのか<=なのか、間違えやすいポイントでもあります。

そこで、めぐる式を参考にして書き換えるとこうなります。

※めぐる式を参考にすると right-left > 1 となるまで条件を満たす最大のleftを探せばOKということになります。詳しくは[こちら](https://qiita.com/drken/items/97e37dd6143e33a64c8c)

※※めぐる式本家[こちら](https://twitter.com/meguru_comp/status/697008509376835584)です

```py

A,B,X = map(int,input().split())

#探索したい整数の範囲を定義
left = 0
right = 10 ** 9 + 1

#満たすべき条件
def validate(arg):
    if (A * arg) + ( B * (len(str(arg))) ) <= X:
        return True

#条件を満たす最大整数を探す二分探索
max_int = 0
while abs(right - left) > 1:
    mid = (left+right) // 2
    if validate(mid):
        max_int = mid
        left = mid
    else:
        right = mid

print(max_int)
```

めぐる式の場合、探索したい範囲の上限、下限より１つずつ大きくするのがポイントです。
このコードの場合、left = 0　　right = 10 ** 9 + 1　としてやります。

たいした変化ではないように見えますが、+1 -1がなくなるのと、>= なのか＞なのかで悩まなくてもすみますね。

abs(right - left)の差が１になったら終了です。
江頭ゲーム

ランダム関数で江頭を出現するかしないかを選択

偶数だったら江頭出現でそこからいくつか用意した江頭の写真を選択して表示

奇数だったら何もない画面に戻る

```js
function setEgasira() {
    const Body = document.getElementById("www");
    const img_Egasira = document.createElement('div');
    const checkEgasira = Math.floor(Math.random() * 4);
    if (checkEgasira % 2 ===0) {
        if (checkEgasira === 0) {
            img_Egasira.innerHTML = "<img src='./img/egasira-1.jpg' alt='img_Egasira' width='250px' height=150px' />";
        } else if (checkEgasira === 2) {
            img_Egasira.innerHTML = "<img src='./img/egasira-2.jpg' alt='img_Egasira' width='250px' height=150px' />";
        }
        Body.appendChild(img_Egasira);
    } else {
        www.innerHTML=""
    }
}
```