OmniAICreator/Qiita-1.07M huggingface dataset:
"errorMessage": "An error occurred (UnauthorizedOperation) when calling the DescribeInstances operation: You are not authorized to perform this operation.", エラー

【An error occurred (UnauthorizedOperation) when calling the DescribeInstances operation】
DescribeInstances するための権限がない。というエラー。

```json:エラー
{
  "errorMessage": "An error occurred (UnauthorizedOperation) when calling the DescribeInstances operation: You are not authorized to perform this operation.",
  "errorType": "ClientError",
  "stackTrace": [
    "  File \"/var/task/lambda_function.py\", line 10, in lambda_handler\n    response = ec2_client.describe_instances()\n",
    "  File \"/var/runtime/botocore/client.py\", line 357, in _api_call\n    return self._make_api_call(operation_name, kwargs)\n",
    "  File \"/var/runtime/botocore/client.py\", line 676, in _make_api_call\n    raise error_class(parsed_response, operation_name)\n"
  ]
}
```

対象のLambda関数に付与されたIAMロールに AmazonEC2ReadOnlyAccessを追加する。
Lambda > 関数 > 対象Lambda関数 > 設定タブ > アクセス権限 > 実行ロール > 【対象ロール】> IAM設定画面に遷移 > 【ポリシーをアタッチします】> AmazonEC2ReadOnlyAccessを選択 > 【ポリシーのアタッチ】
AWS Systems Manager のフリートマネージャにマネージドインスタンスとしてEC2が表示されない。

<code>素人が自分のノートとして書いてますが、改善点あれば是非コメントください</code>

### 問題
SSM エージェントをインストールしてるにも関わらず、SSM のフリートマネージャにマネージドインスタンスとして出てこなかった。

### 背景
EC2 にインストールされた SSM エージェントは、SSM のエンドポイントに TCP/443 でアクセスする必要がある。デフォルトでそのエンドポイントはパブリックなアドレスである。

### 理由
SSM エージェントがインストールされた EC2 がインターネットへの接続するルートが無く、デフォルトでパブリックにある SSM のエンドポイントと通信できていなかった。

###解決方法
1．NATGWを導入するなどして、SSM のエンドポイントに通信できるようにする。
2．VPCエンドポイントを設定し、SSM のエンドポイントにプライベートアクセス出来る様にする。
https://aws.amazon.com/jp/premiumsupport/knowledge-center/ec2-systems-manager-vpc-endpoints/

Tips. 経路が出来てから SSM フリートマネージャで表示されるまでインスタンスによって時間差がありました。自分の環境下では最大30分ほどの時間差があったかと思いますので焦らず待ちましょう。
BacklogでGit連携

# 新しく何かを始めるとき

- 該当ディレクトリまで移動
- `git init` :セット完了
- 新規ファイルなどを作成する
- `git status` :現在の状態を確認
- `git add <file_name>` :indexに入れる
- `git commit -m "message"` :commit
- `git status` :コミットできているかどうか、現在の状況を確認
- `git log`

# リモートリポジトリ
- backlogにて場所を先に作成
- HTTPの所のURLをコピー
- `git remote add origin <HTTP:URL>
- →尚、originの所は任意の名前で良いっぽい
- →今回は`origin`という名前になっているだけ。originが一般的

# push
- `git push -u <repository> <refspec>`
- `<repository>`：プッシュ先のアドレス
- `<refspec>`：ブランチ名
- ※ただし一番最初、空のリポジトリプッシュするときにはこれらは省略できません！

### ■初回リモートリポジトリとbacklogの設定
- pushするときに初回はbacklogの設定が必要
- `git push -u origin master`
- user名：backlogのメールアドレス
- password：backlogのパスワード

このユーザー名でしこたまこけたので、絶対記録に残します。







# コマンド一覧
| command            |       Right align |
:--------------------|:-----------------:|
| git init           |  初期設定 |
| git status         |            column |
| git add ----.txt   |              will |
| git commit -m ""   |                be |
| git log            | ログ |
| aligned            |           aligned |
HTMLとCSSのあれこれ

忘備録。

# html
##目次
- 水平線の種類

###水平線の種類

* none
    * ボーダーは表示されず、太さも0になります。表のセルなどのボーダーが重なり合う場合は他の値が優先されます。これが初期値です。
* hidden
    * ボーダーは表示されず、太さも0になります。表のセルなどのボーダーが重なり合う場合はhiddenの値が優先されます。
* solid
    * 1本線で表示されます。
* double
    * 2本線で表示されます。
* groove
    * 立体的に窪んだ線で表示されます。
* ridge
    * 立体的に隆起した線で表示されます。
* inset
    * 上と左のボーダーが暗く、下と右のボーダーが明るく表示され、ボーダーで囲まれた領域全体が立体的に窪んだように表示されます。上下左右の一部だけに指定しても立体感は出ません。
* outset
    * 上と左のボーダーが明るく、下と右のボーダーが暗く表示され、ボーダーで囲まれた領域全体が立体的に隆起したように表示されます。上下左右の一部だけに指定しても立体感は出ません。
* dashed
    * 破線で表示されます。
* dotted
    * 点線で表示されます。

[border-style](http://www.htmq.com/style/border-style.shtml)


# css

```
セレクタ {
プロパティ:　値;
}
```
Dialogflowでチャットボット -会話の分岐

1ならばa
2ならばb
と、会話を分岐させましょう。



# contextで会話の分岐
>―――――――――――――――――――
bot『いいことがあったの？』


</br>
</br>
</br>
</br>
</br>


必要な要素がない場合、次の会話で聞くということをさせてみましょう。
ex.
「今日の天気は？」→「場所はどこですか？」→「ニューヨーク」
「ロンドンの天気は？」→「いつですか？」→「明日」
contextを使って、この構文を作ります。
contextでは、前の会話情報を保持したまま、次の会話を読み込むことができます。

「Intent」→「天気」のページへ移り、
「Action」の必須要素にチェックを入れます。
場所の要素と日付の要素を必須にするため、2つのREQUIREDにチェックを入れました。
![スクリーンショット 2017-08-14 9.02.10.png](https://qiita-image-store.s3.amazonaws.com/0/192887/a813a1ab-57b8-e81c-dad5-d2867c169ee6.png)


同じAction欄の右に「PROMPTS」があります。
必須情報がなかった場合の回答を入れます。

>―――――――――――――――――――
PROMPTS：場所はどこですか？
―――――――――――――――――――

![スクリーンショット 2017-08-14 9.04.17.png](https://qiita-image-store.s3.amazonaws.com/0/192887/bc70c84e-950e-20f4-78a8-a90952943009.png)
Closeで閉じて大丈夫です。

</br>
</br>
</br>


一番上に戻り、
「Context」を押すと、二つの入力欄が出現します。
下の方の output context に「location」と入れてください。

>―――――――――――――――――――
Add output context：location
―――――――――――――――――――

自然と5という数字がくっつくと思います。
これは5回まで、情報を保持したまま次の会話に移るという意味を指します。回数は変更できます。
![スクリーンショット 2017-08-14 9.08.44.png](https://qiita-image-store.s3.amazonaws.com/0/192887/fc4508ec-742c-a5ef-8e55-fc9a4c8dc00f.png)

終わったら、必ず「SAVE」してください。


</br>
</br>
</br>
</br>
</br>



では、インプット側の会話を追加しましょう。
「CREATE INTENT」から新しい会話を作ります。

>―――――――――――――――――――
・Intent name：日付context
・Context(Add input context)：location
・User says：明日/来週月曜は？/昨日です。…など
・Response：(空欄)
・Fulfillment：✔︎Use webhook
―――――――――――――――――――

</br>
</br>
</br>

同じページの「Action」へ移ります。

>―――――――――――――――――――
・PARAMETER NAME：geo-city
・VALUE：#location.geo-city
―――――――――――――――――――

を追加してください。
![スクリーンショット 2017-08-14 9.46.50.png](https://qiita-image-store.s3.amazonaws.com/0/192887/7eda0a29-1294-7b62-4194-c9c9840e6133.png)

これで、場所情報は前の会話の中から引っ張って来ることができます。
「SAVE」して確かめてみましょう。

</br>
</br>
</br>

質問を二段階に分けます。

>―――――――――――――――――――
Try it now：ニューヨークの天気は？
―――――――――――――――――――

![スクリーンショット 2017-08-14 9.52.16.png](https://qiita-image-store.s3.amazonaws.com/0/192887/cb51c925-a2e4-6d7a-f341-a7d3761699ad.png)
</br>

場所の情報は保持されたままなので、「いつですか？」に対する答えを書きましょう。

>―――――――――――――――――――
Try it now：昨日は？
―――――――――――――――――――

![スクリーンショット 2017-08-14 9.53.49.png](https://qiita-image-store.s3.amazonaws.com/0/192887/8348ae86-4954-078a-f591-9931c9430717.png)
昨日の日付でニューヨークの天気情報が表示されました。成功です！

</br>
</br>
</br>
</br>
</br>

# おわりに

</br>
</br>

次→
・[DialogflowをSlackに連携させる](http://qiita.com/ume1126/private/1fa38c430fc0e6248be8)
TypeScriptとReactを一緒に使う方法


#ゼロからTypeScriptとReactを一緒に使う
tsxファイルを作成

```react.tsx
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<h1>Hello</h1>, document.getElementById("app"));
```

↓"jsx": "preserve"をreactに変更

```tsconfig.json
"jsx": "react"
```

↓変更してあげます。
↓entry: './src/react.tsx'
↓test: /\.tsx?$/
↓extensions: ['.tsx', '.ts', '.js']

```webpack.dev.js
module.exports = {
  mode: 'development', 
  entry: './src/react.tsx',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist'
  },
  devtool: 'inline-source-map',
  module: {
    rules: [{
      test: /\.tsx?$/,
      use: 'ts-loader',
      exclude: /node_modules/
    }]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  }
}
```

#create-react-appでTypeScriptとReactを一緒に使う
#####create-react-app
様々な機能を詰め込んだ、React Applicationを作るためのツールです。

↓インストール

```
% npx create-react-app typescript-react --template typescript
```

#####react-app-env.d.tsファイル
↓import文のような感じで、実際には、中身のたくさんのものが読み込まれています。

```react-app-env.d.ts
/// <reference types="react-scripts" />
```

#props
props : 親コンポーネントから子コンポーネントへ値を渡すための仕組みです。

propsはコンポーネント利用時に属性として設定ができる値で、
一度設定してしまえば後から変更ができません。

概念的には、コンポーネントは JavaScript の関数と似ています。（“props” と呼ばれる）任意の入力を受け取り、画面上に表示すべきものを記述する React 要素を返します。

↓は、propsに型をつけないと動きません。

```App.tsx
import React from 'react';
import Hello from './components/Hello';

function App() {
  return (
    <div>
      <Hello message="I can do it."></Hello>
    </div>
  );
}

export default App;
```

```Hello.tsx
import React from 'react'

const Hello = (props) => {
  return <h1>Hello {props.message}</h1>
}

export default Hello;
```

↓propsに型を付ける

```Hello.tsx
import React from 'react'
type HelloProps = {
  message: string;
}

const Hello = (props: HelloProps) => {
  return <h1>Hello {props.message}</h1>
}

export default Hello;
```
[随時更新]開発手法に関する用語を五文字で要約

###SLCP
客店共通語
補足説明：購入者と供給者の共通語を規定している

###プロセス中心手法
手順に注目

###DFD
データ流れ

###データ中心手法
DB中心

###スパイラルモデル
一通り繰返

###アジャイル開発
作りながら

###システム要求分析
what

###ソフトウェア要求分析
how

###ソフトウェア詳細設計
もじゅ内容

###OOP
オブ指向略

補足説明：オブジェクト指向の略称だよん

###UML
書き方規則

###Field
属性

###Method
振舞

###コンストラクタ
生成後関数

###クラス
鯛焼き型

###インスタンス
鯛焼き

###オーバーロード
多種類関数

###アップキャスト
親を子型に

###多態性
呼出同じ

補足説明：呼び出し同じでも、振舞が異なる奴！全然、大したことない。
abstract class Animal {
    abstract cry();
}

class Dog extends Animal {
    void cry() {
        system.out.printlm("wan,wan");
   }
}

class Cat extends Animal {
    void cry() {
        system.out.printlm("nyan,nyan");
  }
}

...
Animal animal = new Dog();
animal.cry(); // "wan,wan"

...

Animal animal = new Cat();
animal.cry(); // "nyan,nyan"

cryと呼び出しても、アップキャストによって振る舞いが異なる。

###クラス図
図式化

###汎化
継承

###シーケンス図
時系列順

###デザインパターン
先人の知恵

###要件定義
要望確認

###テスト
動確

###セグメント
分割固まり

###セグメンテーションフォルト（違反）
無効読書
補足説明：メモリの変な所を操作しようとすると起きるエラー
例えば、多くの処理系では読み書きできない場所である0番地に読み書きをしたりすること。

###ポインタ
場所
補足説明：あるデータが、メモリ上のどこにあるのかを示す

###アドレス
住所

###*p
ポイ変宣言

###p = ?
アドレス

###*p = ?
値

###&
アドレス

###p
値

###ホワイトボックステスト
中身

###ブラックボックステスト
中身無視

###テストケース
検証情報

###命令網羅
全処理

###分岐網羅
全分岐

###条件網羅
全条件

###複数条件網羅
全組合せ

###テスト・カバレッジ
精度

###メモ
・アセンブラはオブジェクト指向ではないよ
・オブジェクト間のやり取り情報は、メッセージというよ
・開発手法11まで
AWS Organizationsでメンバーアカウント作成時にメールアドレスを間違えたらアカウントが消せなくなった

[AWS Organizations](https://aws.amazon.com/organizations/)を使用すると、請求先等を共有するAWSアカウントを一元管理できます。1つのAWSアカウント内で独立する複数のアプリケーションを稼働させていると、何に利用されているのかわからないリソースが作成されてしまったり、アカウントに過剰な権限が付与されてしまったりしますが、AWS Organizationsを用いて環境ごとにアカウントを分けることで、見通しを良くすることができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534541/10eafaff-3c08-64ef-d5f4-5948b10cae69.png)

AWS Organizationsでアカウントを作成する際、初期パスワードを入力する欄はありません。このため、メンバーアカウントでログインするためにはパスワード復旧手順（＝パスワードリセットメール）を使用する必要があります。


> [Accessing and administering the member accounts in your organization](https://docs.aws.amazon.com/organizations/latest/userguide/orgs_manage_accounts_access.html)
> When you create a new account, AWS Organizations initially assigns a password to the root user that is a minimum of 64 characters long. All characters are randomly generated with no guarantees on the appearance of certain character sets. You can't retrieve this initial password. To access the account as the root user for the first time, you must go through the process for password recovery.

ここで問題になってくるのは、**パスワードリセットには正常に受信できるメールアドレスが必要である**という点です。このため、**誤ったメールアドレスを使用してメンバーアカウントを作成してしまった場合、そのアカウントにログインすることはできません**。また、AWS Organizationsでメンバーアカウントの作成はできても削除することはできません。

サポートに問い合わせてみたところ、以下のような返答でした。

> 誤って作成されたアカウントにご登録のメールアドレスを作成いただけない場合、
> アカウントの削除とはなりませんが、下記の方法でご対応いただけないか、ご確認のほどお願いいたします。
>
> 【メンバーアカウントにサービスコントロールポリシー(以下、SCP)を設定する】
>
> Organization 配下のメンバーアカウントに対しては、IAM ポリシーと同等の SCP を設定することが可能でございます。
全てのリソースのすべての Action を拒否することで、実質的に該当アカウントの利用を無効化することができます。
>
> 詳細につきましては、以下のドキュメントをご参照いただけますと幸いでございます。
> ※マスターアカウントにて設定いただく必要がございます。
> ※設定方法などでご不明点がございます場合は、技術サポート窓口までお問い合わせが必要となります。ご了承ください。
>
> ▼サービスコントロールポリシー
> https://docs.aws.amazon.com/ja_jp/organizations/latest/userguide/orgs_manage_policies_scp.html 
>
> アカウントの削除につながるご案内とならず申し訳ございませんが、
> AWS側でお客様のアカウントの削除や登録メールアドレスのご変更などは承っておりませんので、
> 上記でご対応いただけないか、ご確認いただけますと幸いでございます。

AWS側でのアカウント削除等は行っていないとのこと。辛いですがセキュリティのことを考えれば当然の処置とも言えますね。

皆様もAWS Organizationsを使用する際は気を付けましょう:muscle: それにしても登録時にメールアドレスが本当に正しいのか確認の画面くらい入れてくれても良いと思うのですが。
export 'default' (imported as 'VueFire') was not found in 'vuefire' エラーの対処法

Vue.js + Firebaseでアプリを作っていたら、

```bash
export 'default' (imported as 'VueFire') was not found in 'vuefire'
```

というエラーが出た。

## 解決方法
`import VueFire from "vuefire";` を `import { firestorePlugin } from "vuefire";` に変更すると解決した。

## 実装

> Before

```javascript
import Vue from "vue";
import VueFire from "vuefire";
import firebase from "firebase/app";
import "firebase/firestore";

Vue.use(VueFire);
```

> After

```javascript
import Vue from "vue";
// 変更
import { firestorePlugin } from "vuefire";
import firebase from "firebase/app";
import "firebase/firestore";

Vue.use(firestorePlugin);
```
JetBrains IDE の Console タブの色がおかしい不具合を修正する

# 現象

JetBrains製のIDEでは、VSCodeと同じようにターミナル/コンソールを起動することができます。しかし、Windowsで同じようにターミナル/コンソールを起動してコマンドを打ち込んでいると、何やら下図のように妙に変な背景色がかかり、画面が見づらくなる現象が発生します。本記事は、 https://youtrack.jetbrains.com/issue/IDEA-145236 の内容を抜粋のうえ、解決内容を日本語化した内容となります。

![サンプル](https://youtrack.jetbrains.com/api/files/74-933843?sign=MTYyMTU3NTYwMDAwMHwxMS0xfDc0LTkzMzg0M3xoM3lqNHJ3RWNQd1J6NE1jT3VWLWNpb1hvWW5W%0D%0AeXloclFlTFVSQl9nUG5ZDQo%0D%0A&amp;updated=1602080490365 "サンプル")

# 解決方法

1. レジストリエディタを開きます
2. HKEY_CURRENT_USER -> Console を開き、右側のペインを表示させます
3. 右側のペインに表示されたレジストリキー「ScreenColors」を右クリックし、削除します
4. JetBrains IDEを再起動します

![サンプル](https://youtrack.jetbrains.com/api/files/74-255040?sign=MTYyMTU3NTYwMDAwMHwxMS0xfDc0LTI1NTA0MHx4bGM2VmlScFVKNlZQUEdfQ2FsRlZza1RkTGVs%0D%0ASEE1NDRTWUtnS25yUTBRDQo%0D%0A&amp;updated=0 "サンプル")
【Python】編集中のExcelの指定した範囲をgoogle翻訳する

###はじめに
編集中のExcelのセルを手軽にGoogle翻訳するためのコードです.ファイルを閉じたりファイル名を指定して実行したりするのが面倒な方向けです.

###開発環境
windows10
Python-3.9.4
使用ライブラリ pywin32, datetime, googletrans

###コード

```python
import win32com.client
import datetime
from googletrans import Translator
translator =  Translator()

#開いているExcelbookを取得.複数開いている場合最初に開いていたものが指定されるはずですが、bookは1つしか開いていない前提です.
xl = win32com.client.GetObject(Class="Excel.Application")

#ActiveSheetを取得
ws = xl.ActiveSheet

#Excelを起動したまま
xl.Visible = True

#翻訳したい列
column = "A"
#翻訳結果を書き込む列
column_result = "B"
#翻訳したい行範囲を書き込む
row_s = 3
row_e = 200

for row in range(row_s, row_e+1):
  # cell        : 翻訳対象のセル
  # cell_result : 翻訳結果を書き込むセル
  row = str(row)
  cell = ws.Range(column+row)
  cell_result = ws.Range(column_result+row)

  # 空欄などには翻訳を実行しない
  if cell.value is None:
    pass
  elif isinstance(cell.value,int):
    pass
  elif isinstance(cell.value,datetime.time):
    cell.number_format = "h:mm"
    pass
  elif isinstance(cell.value,datetime.datetime):
    cell.number_format = "yyyy/m/d"
    pass
  else:
    cell_result.value = translator.translate(str(cell.value),src="en", dest="ja").text

```
ORB-SLAM2のDockerfileメモ

昔書いたDockerfileが出てきたので共有します。
# Dockerfile
```Dockerfile
# FROM nvidia/cuda:10.2-devel-ubuntu18.04
FROM ubuntu:18.04

# timezoneの選択で停止するのを防ぐ
ENV DEBIAN_FRONTEND=noninteractive
RUN apt-get update \
  && apt-get install -y git

# 必要なパッケージをインストール
RUN apt-get update \
	&& apt-get install -y lsb-release \
	&& apt-get install -y -my wget gnupg

# ROS
ENV APT_KEY_DONT_WARN_ON_DANGEROUS_USAGE=DontWarn
RUN sh -c 'echo "deb http://packages.ros.org/ros/ubuntu $(lsb_release -sc) main" > /etc/apt/sources.list.d/ros-latest.list' \
	&& apt-key del F42ED6FBAB17C654 \
	&& apt-key adv --keyserver hkp://ipv4.pool.sks-keyservers.net:80 --recv-key C1CF6E31E6BADE8868B172B4F42ED6FBAB17C654 \
	&& apt-get update \
	&& apt-get install -y ros-melodic-desktop-full

RUN apt-get install -y python-rosdep \
	&& rosdep init \
	&& rosdep update \
	&& echo "source /opt/ros/melodic/setup.bash" >> ~/.bashrc \
	&& /bin/bash -c "source ~/.bashrc" \
	&& apt-get install -y python-rosinstall python-rosinstall-generator python-wstool build-essential

# OpenCV
WORKDIR /opt/
# RUN apt autoremove -y libopencv-dev python-opencv
RUN wget https://raw.githubusercontent.com/yakiimo121/milq/master/scripts/bash/install-opencv.sh \
	&& chmod +x install-opencv.sh \
	&& ./install-opencv.sh

# ROS workspace
WORKDIR /opt/catkin_ws/src/
RUN /bin/bash -c "source /opt/ros/melodic/setup.bash && catkin_init_workspace"

WORKDIR /opt/catkin_ws/
RUN /bin/bash -c "source /opt/ros/melodic/setup.bash && catkin_make && source devel/setup.bash"

# # # Pangolin
WORKDIR /opt/catkin_ws/src/
RUN git clone https://github.com/stevenlovegrove/Pangolin.git

WORKDIR /opt/catkin_ws/src/Pangolin/build
RUN apt-get install -y libglew-dev \
	&& cmake .. \
	&& make -j20 \
	&& make install

WORKDIR /opt/catkin_ws/src/
RUN git clone https://github.com/ILab-01/ORB_SLAM2.git

WORKDIR /opt/catkin_ws/src/ORB_SLAM2/
RUN chmod +x build.sh \
	&& ./build.sh

RUN chmod +x build_ros.sh \
	&& /bin/bash -c "source /opt/ros/melodic/setup.bash; ROS_PACKAGE_PATH=/opt/catkin_ws/src/ORB_SLAM2/Examples/ROS:/opt/ros/melodic/share; echo $ROS_PACKAGE_PATH; ./build_ros.sh" 

```

# メモ
本家（`https://github.com/raulmur/ORB_SLAM2.git`）はビルド時にエラーでこける

```bash
error: 'usleep' was not declared in this scope
```
そこで、修正されたこちら（`https://github.com/ILab-01/ORB_SLAM2.git`）のリポジトリを使用した。

OpenCVの4系だとエラーが出るのでOpenCVの3.4.1をインストールするスクリプトを用意した
`https://raw.githubusercontent.com/yakiimo121/milq/master/scripts/bash/install-opencv.sh`
裏返せる可能性（斜め） (paizaランク C 相当) 

https://paiza.jp/works/mondai/a_rank_level_up_problems/a_rank_pincerattack_step3

　最初は力業でこんなことをやった。

```java:Main.java
import java.util.Scanner;

public class Main {
    public static void main(String[] args) {
        int h, w, y, x;
        String[][] map;

        Scanner sc = new Scanner(System.in);

        h = sc.nextInt();
        w = sc.nextInt();
        y = sc.nextInt();
        x = sc.nextInt();

        map = new String[h][w];

        for(int i=0; i<h; i++){
            for(int j=0; j<w; j++){
                if(i == y && j == x){
                    map[i][j] = "!";
                } else {
                    map[i][j] = ".";
                }
            }
        }
        //_____ここまで初期化______

        //右上
        int tx = x+1;
        for(int i=y-1; i>=0; i--){
            if(tx < w){
                map[i][tx] = "*";
                tx++;
            } else {
                break;
            }
        }

        //右下
        tx = x+1;
        for(int i=y+1; i<h; i++){
            if(tx < w){
                map[i][tx] = "*";
                tx++;
            } else {
                break;
            }
        }

        //左下
        tx = x-1;
        for(int i=y+1; i<h; i++){
            if(tx >= 0){
                map[i][tx] = "*";
                tx--;
            } else {
                break;
            }
        }

        //左上
        tx = x-1;
        for(int i=y-1; i>=0; i--){
            if(tx >= 0){
                map[i][tx] = "*";
                tx--;
            }
        }

        //_____ここから表示_______
        for(int i=0; i<h; i++){
            for(int j=0; j<w; j++){
                System.out.print(map[i][j]);
            }
            System.out.println("");
        }
    }
}
```

「うんまあそうなんだけど、もっとこう、すっきりとだね」
　自分でもんやりしながら解説を見て、「あーそっか」と納得して書き直した。

```java:Main.java```
import java.util.Scanner;


public class Main {
    public static void main(String[] args) {
        int h, w, y, x;
        String[][] map;

        Scanner sc = new Scanner(System.in);

        h = sc.nextInt();
        w = sc.nextInt();
        y = sc.nextInt();
        x = sc.nextInt();

        map = new String[h][w];

        for(int i=0; i<h; i++){
            for(int j=0; j<w; j++){
                if(i == y && j == x){
                    map[i][j] = "!";
                } else if(y-i == x-j || y-i == -x+j) {   //これで済む話だった
                    map[i][j] = "*";
                } else {
                    map[i][j] = ".";
                }
            }
        }
        //_____ここまで初期化______

        //_____ここから表示_______
        for(int i=0; i<h; i++){
            for(int j=0; j<w; j++){
                System.out.print(map[i][j]);
            }
            System.out.println("");
        }
    }
}
```

「指定した座標の斜め一直線」ということは、

```math
y = x \\
y = -x
```

　この二式でいいわけだ。そこから入力されたY座標とX座標分ズレさせればいいんだから

```math
y-i = x-j \\
y-i = -(x-j)
```

　これでよい、と。

　中学生レベルのことでも大事なところで思い出せるかどうかは別問題……と。
　ひとまずこの方針でこの問題は詰められそうだ。
pip install時のUnicodeDecodeErrorの原因と解決法

# pip install時にUnicodeDecodeErrorが発生
```:実行コマンド
pip install pyopenjtalk
```
```:エラー内容
UnicodeDecodeError: 'ascii' codec can't decode byte 0xe3 in position 2186: ordinal not in range(128)
or 
UnicodeDecodeError: 'ascii' codec can't decode byte 0xe3 in position 1256: ordinal not in range(128)
```

# 原因と解決策
デフォルトの言語設定が日本語非対応であるが、ライブラリ内で日本語を読み込んでいることが原因。

```
apt-get install language-pack-ja
export LC_ALL="ja_JP.utf8"
```
で言語設定を変更すれば解決する。
ちょっと前のnodeで開発されたIonicアプリを動かす方法の覚書

## はじめに
業務上、2,3年前(かもっと前？)の少し古いバージョンのionicを使って開発されたアプリを動かさないといけなくなり、なんかうまく動かないので、なんとか動かす方法を調べました。



まあ、結論から言ったら単純で、アプリで使われていたパッケージ(のバージョン)が、開発環境のnode(npm)のバージョンではサポートされていなかっただけでした。
初心者には世知辛いですね。

あ、ちなみにOSはWindows10です。

## 問題
とりあえず、プロジェクトディレクトリで、

```
$ionic serve
```
をしたら動かなかった。

それは当たり前のことで、というのも
[Githubからダウンロードしたリポジトリを、自分の環境で起動させる方法（Ionicの場合）](https://qiita.com/kokogento/items/61e99c2f0313f5b7bd2c)
に書いてあるように、package.jsonで記述されているパッケージがインストールされていないから。

そこで、同じく上の記事にも書かれているようにしたら動くかなと思ってやってみると、

```
$ npm install
...(略)...
Downloading binary from https://github.com/sass/node-sass/releases/download/v4.11.0/win32-x64-72_binding.node
Cannot download "https://github.com/sass/node-sass/releases/download/v4.11.0/win32-x64-72_binding.node":

HTTP error 404 Not Found
...(略)...
```
と、エラーが出て動かなくて悲しくなった。

## 原因

[これ](https://github.com/sass/node-sass/issues/2662)がエラーの原因でした。

どうも、nodeのバージョン12以降ではnode-sassというパッケージがサポートされていないらしく、
一方、開発環境のnodeが14.16.1(npmは6.14.12)だったので、該当のパッケージをインストールできていなかったのが原因でした。

## 解決策

使っているnodeのバージョンを変える。
そのために、nvmを使う。

1. nodeのバージョン管理をするnvmをインストール
[こちらの記事](https://qiita.com/anpontanpokan/items/fbc90d67eaecf0dd5ab4)を参考にしました！(Macとかでも基本的には同じ感じかと。)  
https://github.com/coreybutler/nvm-windows/releases  からnvm-setup.zipをダウンロードしてnvmをインストール。

2. nvmでアプリで使うバージョンのnodeをインストール→nodeのバージョン切り替え
同じく上の記事を参考にしました。  
まずはインストール済みのバージョンを確認。
`$ nvm list`
続いて、バージョンを指定してインストール
`$ nvm install バージョン番号`
バージョンの切り替え
`$ nvm use バージョン番号`
バージョンの確認
`$ node -v`

3. パッケージをインストール
`npm install`
エラーがでなければOK. エラーが出る場合は調整が必要?
 
4. serveでブラウザで動くはず！
`ionic serve`
自分の環境では動きました。いぇーい。

次はbuildを目指します。

## さいごに
普段はDjangoとか使っていて、スマホアプリ開発とかは全くの初心者なので勉強しながらだと意味分かんないぐらいに時間がかかってしまいました。
きっとこうやって人は成長していくんだろう、、、。
賢者からは程遠い生き方だなあ、、、。
かっこいいよこもじしゅう

エリート先輩エンジニア、AWSのプレゼンをするかっこいい外人、ありがたいコードを公開してるやたら近い自撮りアイコンのおじさん、彼らはいつだって僕の憧れです。
そんな憧れの存在に近づくためにできることは？彼らに共通することは？？

#かっこいい横文字を使おう
そう！！彼らはいつだってクールな横文字をふんだんに使い、効率的に会話を進めます！
早くクールな横文字を覚え、かっこいいエンジニアにならなければ！！！

#単語集
###DX
かっこよさ：★★☆☆☆
DX：Digital transformation、デジタルトランスフォーメーション、デジタルによる変革
ITを活用し社会や生活を変革させるという考え方、取り組み

###アジャイル
かっこよさ：★★★★★
Agile：敏捷な、機敏な
迅速なシステム提供を目ざすソフトウェア開発手法の総称

###ジャムスタック
かっこよさ：★★★★☆
JAMstack
JavaScript、API、マークアップ言語により開発されたサイト
セキュア、スケーラブルなどの特徴がある

###ベストプラクティス
かっこよさ：★★★☆☆
best practice
最良の実践法、最善の方法、一番いいやり方

###インスタンス
かっこよさ：★☆☆☆☆
instance
設計図をもとに具体化したもの
オブジェクト指向プログラミング言語で使われる言葉

###ヘルスチェック
かっこよさ：★☆☆☆☆
health check
機器やソフトウェア、システムが正常に稼働しているかを外部の別の機器などから監視、検査すること。

###マネージドサービス
かっこよさ：★★☆☆☆
通信サービス、ITサービスの内、必要な機器やソフトウェアの導入や管理、運用などの業務も一体的に請け負うサービス

###プロビジョニング
かっこよさ：★★☆☆☆
provisioning
>設備やサービスに新たな利用申請や需要が生じた際に、資源の割り当てや設定などを行い、利用や運用が可能な状態にすること。

###ステートレス
かっこよさ：★★☆☆☆
stateless
現在の状態を保持せず入力の内容によってのみ出力が決まる。
状況によらず同じリクエストなら必ず同じ結果になる。

###ステートフル
かっこよさ：★★☆☆☆
stateful
以前の状況を踏まえた応答を行う。
状況によって同じリクエストでも結果が変わることがある。

###ベストエフォート
かっこよさ：★★★☆☆
best effort
ベストを尽くして頑張るが、保証はしない。
努力目標
ギャランティの逆

###ギャランティ
かっこよさ：★★☆☆☆
保証すること、ギャラのこと。
ベストエフォートの逆。

###モノリシック
かっこよさ：★★☆☆☆
monolithic
>一枚板という意味で、ソフトウェア的には、全体が1つのモジュールでできていて、分割されていないことを意味する。

###イベントドリブン
かっこよさ：★★★☆☆
イベントの発生をきっかけに動作するプログラムやシステムのこと。
イベント駆動型と言われることもある。

###SLA
かっこよさ：★★★☆☆
Service Level Agreement
サービスを提供する側が、どの程度の品質を保証するか提示したもの。

###I/O
かっこよさ：★★☆☆☆
Input と Output の頭文字。
入力と出力の両方を指す言葉。

###スループット
かっこよさ：★★☆☆☆
>スループットとは、機器や通信路などの性能を表す特性の一つで、単位時間あたりに処理できる量のこと。ITの分野では、コンピュータシステムが単位時間に実行できる処理の件数や、通信回線の単位時間あたりの実効伝送量などを意味することが多い。

###SCSI
かっこよさ：★★★☆☆
Small Computer System Interface
>SCSIとは、コンピュータ本体にストレージ装置（外部記憶装置）などの周辺機器を繋いで通信するための接続方式の標準規格の一つ。

###iSCSI
かっこよさ：★★★★☆
internet Small Computer System Interface
>SCSIコマンドを、IPネットワーク経由で送受信する通信規約（プロトコル）。

###ロギング
かっこよさ：★☆☆☆☆
ログを記録すること。

###ペルソナ
かっこよさ：★★★★★
>商品開発の際に設定する架空の人格。名前・年齢・性別・趣味・住所などから始め、細部に至る人物像を作りだし、その人格に感情移入することで、ユーザビリティーに優れた製品・商品の開発に結びつける。

###シフトレフト
かっこよさ：★★★★☆
>セキュリティにおける 「シフトレフト（Shift Left）」 とは、より早期の段階でセキュリティに関する問題に対処する、ソフトウェアの開発や運用の考え方です。
https://www.sqat.jp/tamatebako/7205/

###BI
かっこよさ：★★★☆☆
Business Intelligence
>企業の情報システムなどで蓄積される膨大な業務データを、利用者が自らの必要に応じて分析・加工し、業務や経営の意思決定に活用する手法。

###telnet
かっこよさ：★☆☆☆☆
>ネットワークを経由して他のコンピュータ（主にサーバ）に接続し、遠隔操作するときに使う仕組み（のひとつ）
情報のやり取りを暗号化せず平文で送っているためセキュアではない。

###SSH
かっこよさ：★☆☆☆☆
通信の内容が暗号化されたtelnet

###FTP
かっこよさ：★☆☆☆☆
ネットワーク経由でファイルを送受信するためのメジャーなやり方。

###SFTP
かっこよさ：★☆☆☆☆
暗号化されたFTP

###ディザスタリカバリ (DR)
かっこよさ：★★★☆☆
>自然災害や自然じゃない災害が発生したときに速やかに復旧できるように備えること

#参考資料
[コトバンク](https://kotobank.jp/)
[「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典](https://wa3.i-3-i.info/index.html)
[IT用語辞典 e-Words](https://e-words.jp/)
[weblio国語辞典](https://www.weblio.jp/)
APNsPHP で HTTP/2 プロトコル に対応する 

ここ最近の案件でiOSのプッシュ通知周りでかなりはまってしまったので(現状解決済み)
その際の解決策を共有します!

APNs【Apple Push Notification service】によるレガシーバイナリプロトコルでのプッシュ通知は、2021 年 3 月 31 日にサポートが終了します。
このため、HTTP/2 ベースの APNs である APNs Provider API に移行する必要があります。

参考 : https://developer.apple.com/jp/news/?id=c88acm2b


## ApnsPHP ライブラリを使用している場合
ApnsPHP というプッシュ通知用のライブラリを使用している方は要注意です。
正式版の ApnsPHP は、HTTP/2 プロトコルに対応していません。

でも大丈夫です！
GitHub からプレリリース版の v2.0.0-alpha を持ってきましょう。

Release HTTP/2 Protocol support.
https://github.com/immobiliare/ApnsPHP/releases/tag/v2.0.0-alpha

すでにApnsPHPをインストール済みの方は、以下の３つのファイルを上書きすれば OK です。

**ApnsPHP/Abstract.php
ApnsPHP/Message.php
ApnsPHP/Push.php**

#### 呼び出し元ソースコードの修正
呼び出し元のソースコードも少し修正する必要があります。

```php
<?php
require_once 'vendor/autoload.php';

$push = new ApnsPHP_Push(
	ApnsPHP_Abstract::ENVIRONMENT_SANDBOX,
	'server_certificates_bundle_sandbox.pem',
	ApnsPHP_Abstract::PROTOCOL_HTTP // ★HTTPプロトコルを使用！
);

$push->setRootCertificationAuthority('entrust_root_certification_authority.pem');
$push->connect();
$message = new ApnsPHP_Message('Device Token...');

// Set the topic of the remote notification (the bundle ID for your app)
$message->setTopic('com.armiento.test'); // ★バンドルID

$message->setText('Hello APNs-enabled device!');

$push->add($message);
$push->send();
$push->disconnect();

?>
```

サーバーもHTTP2に対応させましょう。

必要サーバー要件
    **openssl 1.0.2e以上
    curl 7.46以上（+nghttp2）
    PHP 5.5.24以上**
Google ColaboratoryでApache Cassandraを使う

https://www.udacity.com/course/data-engineer-nanodegree--nd027

で使うのだけど、自分のColaboratoryで練習するための設定の防備録

#レファレンス

https://cassandra.apache.org/

https://github.com/datastax/python-driver

#Cassandraのインストール
ipynbの記述ってどうすればいい感じなんだろ :thinking: 

`!java -version`で確認すると `openjdk version "11.0.11" 2021-04-20`なので _OpenJDK 8_のインストールも実施する。

```python:install_colab.ipynb

import os

#apt-getで入れた場合、ディレクトリ作成されない場合があるので、追加
new_dir = '/run/cassandra'
os.makedirs(new_dir, exist_ok=True)


!apt-get install openjdk-8-jdk-headless -qq > /dev/null
!echo "deb http://downloads.apache.org/cassandra/debian 40x main" | sudo tee -a /etc/apt/sources.list.d/cassandra.sources.list

!curl https://downloads.apache.org/cassandra/KEYS | sudo apt-key add -

!sudo apt-get update -qq

!sudo apt-get install -qq cassandra > /dev/null

!pip install -q -U cassandra-driver

import os
os.environ["JAVA_HOME"] = "/usr/lib/jvm/java-8-openjdk-amd64"

#colabratoryだとユーザはrootなのでオプション付きで起動する。
!cassandra -R -p /run/cassandra/cassandra.pid > /dev/null

!nodetool status
```

##結果
```bash:result
Datacenter: datacenter1
=======================
Status=Up/Down
|/ State=Normal/Leaving/Joining/Moving
--  Address    Load      Tokens  Owns (effective)  Host ID                               Rack 
UN  127.0.0.1  68.9 KiB  16      100.0%            8d69312c-7b81-4543-a6c6-e8abf3a0a85c  rack1
```

#停止

```python:stop_cassandra.ipynb
!kill `cat /run/cassandra/cassandra.pid`
```

#データベース作成等
```python:creatdb.ipynb
import cassandra

from cassandra.cluster import Cluster
try: 
    cluster = Cluster(['127.0.0.1']) #If you have a locally installed Apache Cassandra instance
    session = cluster.connect()
except Exception as e:
    print(e)
 
try:
    session.execute("""
    CREATE KEYSPACE IF NOT EXISTS my_db 
    WITH REPLICATION = 
    { 'class' : 'SimpleStrategy', 'replication_factor' : 1 }"""
)

except Exception as e:
    print(e)

try:
    session.set_keyspace('my_db')
except Exception as e:
    print(e)
```

あとは　`CREATE TABLE IF NOT EXSTS my_db`と続けて、テーブルを作っていく。

#まとめ

cassandraの起動に少し時間がかかるくらいなので、これくらい気楽なのがいいと思う。
jQuery CDNの種類

jQueryのCDNを調べたら意外と種類があったので、記事にしてみた。

載せてるCDNはjqueryのサイトに記載があった物を載せています。

https://jquery.com/download/#using-jquery-with-a-cdn

##jquery##
jqueryの公式？なCDNのようです

```html
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
```

[https://https://code.jquery.com/](https://code.jquery.com/)

##Google##

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
```

[https://developers.google.com/speed/libraries#jquery](https://developers.google.com/speed/libraries#jquery)

##Microsoft##

```html
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js"></script>
```
[https://docs.microsoft.com/en-us/aspnet/ajax/cdn/overview#jQuery_Releases_on_the_CDN_0](https://docs.microsoft.com/en-us/aspnet/ajax/cdn/overview#jQuery_Releases_on_the_CDN_0)

##Cdnjs##

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
```

[https://cdnjs.com/libraries/jquery](https://cdnjs.com/libraries/jquery)

##Jsdelivr##

```html
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
```

[https://www.jsdelivr.com/package/npm/jquery](https://www.jsdelivr.com/package/npm/jquery)
Linuxでユーザー追加と公開鍵設置を行うスクリプト

# 公開鍵認証でのユーザー追加
クラウド上のサーバなどを設置した際に、ユーザー認証は公開鍵認証のみを許可している場合も多いと思います。というかそうした方がよいです。
ただ、多人数が使う場合に公開鍵設置は結構面倒な作業になるのでスクリプト作りたいなぁと思っていました。で、作りました。
本当にちゃんと運用する場合はLDAPとかを考えた方が良いです。

# 仕組み
Ubuntuだとユーザ追加のコマンドとして`adduser`が用意されていて対話形式で追加できますが、この場合だと公開鍵を手動で置く必要があります。
一方でLinuxで用意されている`useradd`コマンドであればオプションを組み合わせていろいろできます。
ぶっちゃけ`adduser`コマンドでもいろいろできそうですけど、`useradd`で作ったので`adduser`のことは忘れてください。

# 公開鍵の設置
基本的な話ですが、公開鍵（`id_rsa.pub`）を置く場所は`~/.ssh/authorized_keys`です。
新しいユーザを作ったら、ホームディレクトリの下に`.ssh`ディレクトリを作って、その下に`authorized_keys`の名前で`id_rsa.pub`をコピーすれば良いです。面倒ですね。
useraddコマンドにはskellという機能があります。

## skell機能を使う
skell機能は、簡単に言うと新ユーザのホームディレクトリをコピーして作ってくれる機能です。
`-k`でディレクトリを指定します。そうするとそのディレクトリのファイルをコピーしてくれるのです。
つまり、`useradd`する前に公開鍵をskellディレクトリへコピーしておいて`useradd`すればいいのです。
結局コピーするなら、`useradd`した後にシェルスクリプトで追加しても一緒って思いがちですが、ファイルの権限とか所有者とか考えるとskell使った方が良いです。

# スクリプト第一弾
てことでまずはこんなシェルスクリプトを考えてみました。

```sh
#!/bin/sh

if [ $# != 2 ]; then
  echo Usage: $0 username pubkey
  exit 1
fi

cp $2 skell/.ssh/authorized_keys || exit 1
sudo useradd -m -k skell $1
```

使い方は第一引数がユーザー名、第二引数が公開鍵ファイルパスになります。
実行する場所の`skell/.ssh`ディレクトリが作られていることが前提です。
ファイルが無いなどのエラーの場合は末尾の`|| exit 1`が働いて強制終了します。
この書き方便利なので重宝します。

これで目的の8割は達成しましたが、もうちょっと運用考えます。

# ユーザー追加フロー
このスクリプトだとユーザー名と公開鍵を貰って、スクリプトを叩く必要がありますが、容易に想像できるのがみんな`id_rsa.pub`のファイルを送ってきて、それを取り違えてユーザー作ってしまうという運用ミスです。
ファイルを間違えて上書きする危険もあれば、コマンドを叩くときに間違える可能性もあります。
この危険性をなくすためにやることは1つです。

- 公開鍵は希望するユーザー名で送って貰う

hogeというユーザ名を希望するなら、公開鍵をhogeという名前に変えてから送って貰います。
hogeというファイルは`pubs`とかのディレクトリに格納して、それを指定することでユーザ追加するようにしましょう。

# スクリプト第2弾
さて、こんな感じになります。

```sh
#!/bin/sh
if [ $# != 1 ];then
  echo Usage: $0 username_pubkey_path
  exit 1
fi

username=`basename $1`
cp $1 skell/.ssh/authorized_keys || exit 1
sudo useradd -m -k skell ${username}
```

使うときは`./add.sh pubs/hoge`といった形で指定します。
`basename`でファイル名を取得できるのでそれをそのままユーザー名にします。

# もうちょっとだけ
もうほぼ目的は達成しましたが、この方法で追加したユーザーにはパスワードが設定されていません。
公開鍵でssh認証のみを指定している場合はパスワードを使う場面がない・・・と思いきや、例えばchshするときとか、権限を貰ってsudoするときとかに困ります。
useraddにはパスワードを引数で指定できますが、cryptのハッシュ値を入れないといけないのでちょっと面倒です。

## パスワードを作る
平文のパスワードを、ハッシュ化された文字列に変換しましょう。
ハッシュ化に必要なのは元の平文と、ソルトの値になります。
ソルトを指定しないでみんながハッシュ値を使っていると、ハッシュ値を比較しただけで「こいつ、ここのパスワードとここのパスワード一緒やん！」ってなるのでソルトが必要です。
ただ、ランダムでいいのでランダム文字列を生成します。

```sh
salt=`cat /dev/urandom | tr -dc 'a-zA-Z0-9' | fold -w 8 | head -1`
```

これでソルトが作れます。
パスワードは下記のようにして作れます。

```sh
cmd="perl -e 'print crypt(\"${username}\", \"\\\$6\\\$${salt}\");'"
pass=`eval ${cmd}`
```

コマンド内に引数埋め込むのどうすんだっけ？っていうのを忘れたのでevalしました。1行で書けると思います。そのうち直します。
これを`useradd`の`-p`オプションで指定すれば完成です。

# シェルスクリプト：最終形態
ということで下記のようになります。

```sh
#!/bin/sh
if [ $# != 1 ];then
  echo Usage: $0 username_pubkey_path
  exit 1
fi

username=`basename $1`
salt=`cat /dev/urandom | tr -dc 'a-zA-Z0-9' | fold -w 8 | head -1`
cmd="perl -e 'print crypt(\"${username}\", \"\\\$6\\\$${salt}\");'"
pass=`eval ${cmd}`

cp $1 skell/.ssh/authorized_keys || exit 1
sudo useradd -m -k skell -p ${pass} ${username}
```

他にも最初から設置したいファイルがあればskellの下に置けば良いので、適宜アレンジしてみてください。
Cloud Messaging 反復設定には制限があるって話

# はじめに
以下の操作を行う方に向けた記事になります

- Firebase コンソールから Cloud Messaging の通知を作成
- スケジュール設定で「カスタム反復」を設定

# 結論
> プロジェクトごとに最大 10 個の個別の定期的な通知を実行できます。

Firebase Console から設定でき **る繰り返し通知設定** は記事執筆段階で **10個まで** と制限されています。
10個以上の繰り返しプッシュ通知を行いたい場合は、Cloud Messaging API を用いて繰り返し処理を自作する必要があります。

※ Firebase Console に記載されていますが、発見が遅れ、原因把握が遅れたので知見として記事にしています

# 苦戦ポイント
上限に達した状態で繰り返し通知設定を試みると以下のようなエラーが表示されます。
このエラーから「入力内容に間違いがあるのではないか」と予想し、何度も何度も設定を見直すことになってしまいました（通知に使えない文字列が含まれていないか　など）。

まぁ、繰り返しは上限に達しているのに「繰り返し」でリクエストした時のエラーなので間違ってはいないです。
（とはいえ、もっと親切なエラーを出してほしいなぁと思ったのは内緒です）

![Screen Shot 2021-05-18 at 0.39.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128344/5c4f4abc-41a2-3564-09b2-70489161275d.png)

```json
{
  "error": {
    "code": 400,
    "message": "Request contains an invalid argument.",
    "status": "INVALID_ARGUMENT"
  }
}
```

# おわりに
この記事で、私みたいに無駄に悪戦苦闘する人が減れば嬉しいです（こんな事する人、そもそも居ないかな？）
【JavaScript】jQueryの基礎


##jQueryとは
JavaScriptでできることをより簡単に書けるように設計したライブラリ

##基本構文

```javascript:JavaScript
$(function() {
/* コード実装部 */
});
```

セレクタとメソッドで構成されている

```
$("セレクタ").メソッド("パラメータ[引数]");
```

###セレクタ
操作対象となるHTML要素が入る

* 基本形
$("セレクタ")

* IDセレクタ
$("#Selector")

* クラスセレクタ
$(".Selector")

* 要素セレクタ
$("h1")

例）h1要素のテキストを動的に変更する

```javascript:JavaScript
$('h1').text('Hello');
```

###メソッド＆イベント
指定した要素に対して何を行うかを記載する
パラメータ付与でより具体的で細かく指定可能
[よく使用するメソッド一覧](https://qiita.com/fukumone/items/3ecc0c58ff9c811b3f35)

	• addClass
		○ 要素にクラスを追加する
	• attr
		○ 属性を取得、書き換える
	• bind
		○ onと一緒
	• change
		○ select要素、input要素、text要素が変更されたらイベント発火
	• click
		○ 要素をクリックしたらイベント発火
	• data
		○ データ属性を取得する
	• find
		○ 指定した要素から、指定した条件に合致する子孫要素を選択する
	• hide
		○ 要素を非表示にする
	• on
		○ 動的に作られた要素に対して、イベントを追加していく
	• removeClass
		○ 要素からクラスを削除する
	• show
		○ 非表示状態にある要素を表示する
	• text
		○ 要素内のテキストを取得、書き換える
	• toggle
		○ showとhideの機能をまとめたもの

##サンプル
**addClass**
addClassメソッドを用いて、クリック時pタグに色付け

```html
<!-- addClass -->
<style>
  .color{
    font-size: 10px;
    color: red;
  }
</style>
<p>Hello</p>
<script>
  $("p").click(function(){
	$(this).addClass('color');
  })
</script>
```

**on**
onメソッドを用いて、セレクトボックスで選択されたときに処理を発生させる

```html
<body>
  <select>
    <option value='aaa'>aaa</option>
    <option value='bbb'>bbb</option>
    <option value='ccc'>ccc</option>
  </select>
  <span></span>
</body>
<script>
$("select").on("change", function(evt){
  selected = ($(evt.target));
  if(selected.val() === "aaa"){
    $("span")
    .stop()
    .css("opacity", 1)
    .text("selected.val()")
    .fadeIn(30)
    .fadeOut(1000);  
  }else if(selected.val() === "bbb"){
    $("span")
    .stop()
    .css("opacity", 1)
    .text("selected.val()")
    .fadeIn(30)
    .fadeOut(1000);
  }else if(selected.val() === "ccc"){
    $("span")
    .stop()
    .css("opacity", 1)
    .text("selected.val()")
    .fadeIn(30)
    .fadeOut(1000);   
  }
})
</script>
```

##まとめ
基本構文を抑えれば概要はつかむことができると思った
メソッド・イベントについては細かく覚えることよりも実務で出てきたものを調べて対応していきたい

##参考
https://qiita.com/chopesu_se/items/8b5c51f9b0b077613cac

https://www.sejuku.net/blog/104042

https://qiita.com/fukumone/items/3ecc0c58ff9c811b3f35
FirebaseにSHA1が登録できないのはOAuthClientが上限に達しているからかもしれない

# TL;DR

タイトルのとおりなんですが、Firebaseにアプリ署名鍵の `SHA256` は登録できるけど、 `SHA1` だけ登録できない場合はGCPのOAuthクライアントが上限に達しているかもしれません。確認してみましょう。

# なぜSHA1だけエラーになるの？

Firebaseでは、プロジェクト作成時にOAuthクライアントが作成されるわけではなく、`SHA1` のフィンガープリントが登録されたタイミングでOAuhtクライアントが作成されます。なので、OAuthクライアントが上限に達していると `SHA1` 登録時のOAuthクライアント作成が失敗し登録できないようです。

# 上限ってどれぐらい？

一概には言えないようですがとても低いようです。
[Google Cloud Console ](https://console.cloud.google.com/apis/credentials) にアクセスして対象のプロジェクトを確認して複数あるようなら使ってないやつを削除してみましょう。

# なんで上限低いの？増えないの？

OAuthの不正利用を避けるために増やさない方針らしいです。頑張りましょう。
クラスタリングについてのメモ



## クラスタリング
### 階層的クラスタリング
#### 階層的クラスタリング　デンドログラムの描画
距離に着目したクラスタリング
デンドログラムを書いて自分でどのようなクラスターにするかを決める時に使う

##### 準備
データセットを用意する
データを正規化する MinMaxScaler

##### クラスタリングの手法を決定しクラスタリングを行う
linkage 手法：ward,single最短距離法,complete再長距離法,centroid重心法

クラスタ間距離の計算　ward法
計算量は多、分類感度が良い
- クラスタの重心をとる
- (各クラスタの重心からの距離)^2を計算 これが小さく、クラスタ間距離が大きい方がクラスタリングがよくできているといえる。
- クラスタとクラスタの重心を求め、(重心から各点の距離),(結合後の距離)^2を計算
- (結合後の距離)^2 - (各クラスタの重心からの距離)^2をクラスタ間の距離とする
- これを繰り返して近い点から順にまとめていく(ボトムアップアプローチ)



##### デンドログラムを書く
良いデンドログラム　異なるクラスタ間の距離は長く、同クラスタの点同士の距離は短い
悪いデンドログラム　鎖状になっている

##### fclusterメソッドを使用して、クラスター間の距離tを指定してデータセットを任意のクラスタ数に分割する

##### クラスタの詳細な分析
- seabornのペアプロットで クラスタ化の関係性を調べる 
元のデータに ‘cluster’という列を追加する
seabornのペアプロットでデータをクラスタごとにプロットしてさらにクラスタ間の関係を探っていく

- clusterごとのデータの統計量を調べる
Query メソッドで各クラスターのデータを取得し、そこに対してdescribeで統計量を調べる 

- エルボー図を使用する横軸にクラスタ数、縦軸に損失関数をプロットして下げ止まるところをクラスタ数として採用する 

- シルエットプロットを行う
凝集度、乖離度から、シルエット係数を算出
可視化
凸状のクラスターを作らない手法に関しては適切な評価が出来ない場合がある
from silhouette import silhouette_visuallizer





### 非階層的クラスタリング
#### K-means法
距離に着目したクラスタリング
事前にクラスター数Kを決めておいてクラスタ間の距離の値を最小化するようなクラスタリングをする

##### アルゴリズム
①クラスタ数Kを決める

②適当にデータにクラスタを設定する
③クラスタごとに重心(平均値)を求める
④データのクラスタを求めた重心に基づいて振りなおす

②～④をイテレーション数繰り返す



#### DBSCAN
密度に着目したクラスタリング
Core点から到達可能な点を同じクラスタだとみなすクラスタリングの手法

##### クラスタの詳細な分析
k-dist graph


### 手法の選択

- デンドログラム
自分でクラスタ間の距離も見てクラスタを解釈することができる。

- kmeans
凸のクラスターをクラスタリングする時に使える、例えばmoon データセットには使えない、dbscanを使う

- DBSCAN
凸でないクラスタをクラスタリングする時に使える。
epsとmin_samplesの設定が難しい
【JavaScript】要素を取得する主な方法

##要素を取得する主な方法
* document.getElementById()
* document.querySelector()
* document.querySelectorAll()

以下でそれぞれ説明

###document.getElementById()
指定したIDを持つ要素を取得する
存在しない場合、nullが返る

```html:HTML
<span id="spanText">Hello</span>
```

```javascript:JavaScript
var spanText = document.getElementById('spanText');
console.log(spanText); //<span>
console.log(spanText.textContent); // "Hello"

var divText = document.getElementById('divText');
console.log(divText); // null
```

###document.querySelector()
CSSセレクタでマッチした最初の要素を取得する

>**CSSセレクタとは**
>CSSによるデザイン指定をどのHTML要素に適用させるかを指定するもの

```html:HTML
<p class="foo">Hello</p>
```

```javascript:JavaScript
var foo01 = document.querySelector('.foo');
console.log(foo01); // <p>
console.log(foo01.textContent); // Hello
```

###document.querySelectorAll()
CSSセレクタでマッチした要素を取得して、NodeListとして返す

```html:HTML
<p class="foo">Text 1</p>
<ul>
  <li>Text 2</li>
  <li class="foo">Text 3</li>
  <li>Text 4</li>
  <li>Text 5</li>
</ul>
<ul id="textList">
  <li class="foo">Text 6</li>
  <li>Text 7</li>
</ul>
```

```javascript:JavaScript
var foo01 = document.querySelectorAll('.foo')

console.log(foo01); //NodeList (3) [p.foo, li.foo, li.foo]

foo01.forEach(function (elem) {
  console.log(elem.textContent);
});
// "Text 1"
// "Text 3"
// "Text 6"

/* getElementByIdとの組み合わせ */
var
  textList = document.getElementById('textList'),
  foo03 = textList.querySelectorAll('.foo');

foo03.forEach(function (elem) {
  console.log(elem.textContent);
});
// "Text 6"
```

###取得したNodeListの使い方(一例)
配列に変換する

```javascript:JavaScript
var elem =[].slice.call(document.querySelectorAll('section'));
```

>**slice()**
>配列を新しい配列オブジェクトに作成して返すメソッド

>**call()**
>他のオブジェクトが持つメソッドを自分のメソッドのように呼び出すメソッド

##参考

https://qiita.com/amamamaou/items/25e8b4e1b41c8d3211f4

https://www.sejuku.net/blog/27019


**追記：修正しました(2021-05-19)**
Pythonの`+=`はin-placeである


Pythonで、listを別の変数に代入後、配列の要素を変更すると、元の配列の要素も変更される。これはRubyでも同様だし、参照値の概念から理解できる。

```py
a=[1]
b=a
b[0]=2
print(a)
print(b)
```

```
[2]
[2]
```

ところがそれだけでなく、`+=`を実行すると、元の変数まで書き換わってしまう事象があった。

```py
a=[1]
b=a
print(id(a))
print(id(b))
b+=[2]
print(id(b))
print(a)
print(b)
```

```
140675580591136
140675580591136
140675580591136
[1, 2]
[1, 2]
```

https://docs.python.org/ja/3/library/operator.html#in-place-operators にあるように、`+=`がin-placeであるためである。実際に、id()が変化していないことがわかる。

念のため、CPython/PyPy/Jython/IronPython/Nuitka/Grumpyでこの動作になることを確認。

## 他の言語

### Ruby / Crystal

```rb
a=[1]
b=a
b[0]=2
p a
p b
```

```
[2]
[2]
```

また、object_idが利用できる。

```rb
a=[1]
b=a
p a.object_id
p b.object_id
b+=[2]
p b.object_id
p a
p b
```

#### Rubyの出力

```
47281727614540
47281727614540
47281727457620
[1]
[1, 2]
```

#### Crystalの出力

```
140128848109184
140128848109184
140128848109120
[1]
[1, 2]
```

+=によりobject_idが変化していることがわかる。

なお`Array#concat`を使った場合Pythonの`+=`と同じ動作になる。

```rb
a=[1]
b=a
b.concat([2])
p a
p b
```

```
[1, 2]
[1, 2]
```

### D

Dではobject_idは利用できない(変数のポインタにid的意味はない)が、要素変更で元の配列が書き換わり、連結で元の配列が書き換わらないことを示せば目的としては十分である。

```d
import std.stdio;
void main(){
	int []a = [1];
	int []b = a;
	b[0] = 2;
	writeln(a);
	writeln(b);
}
```

```
[2]
[2]
```

```d
import std.stdio;
void main(){
	int []a = [1];
	int []b = a;
	b ~= [2];
	writeln(a);
	writeln(b);
}
```

```
[1]
[1, 2]
```

### Scala

Scalaではobject_idは利用できない(以下同様)

```scala
object Wandbox {
	def main(args: Array[String]): Unit = {
		var a = Array(1)
		var b = a
		b(0) = 2
		println(a.mkString(" "))
		println(b.mkString(" "))
	}
}
```

```
2
2
```

```scala
object Wandbox {
	def main(args: Array[String]): Unit = {
		var a = Array(1)
		var b = a
		b ++= Array(2)
		println(a.mkString(" "))
		println(b.mkString(" "))
	}
}
```

```
1
1 2
```

### Groovy

```groovy
def a = [1]
def b = a
b[0] = 2
println a
println b
```

```
[2]
[2]
```

```groovy
def a = [1]
def b = a
b += [2]
println a
println b
```

```
[1]
[1, 2]
```

### Kuin

```
func print(a: []int)
    for i(0, ^a-2)
        do cui@print(a[i].toStr())
        do cui@print(" ")
    end for
    do cui@print(a[^a-1].toStr())
    do cui@print("\n")
end func

func main()
    var a: []int :: [1]
    var b: []int :: a
    do b[0] :: 2
    do @print(a)
    do @print(b)
end func
```

```
2
2
```

```
func print(a: []int)
    for i(0, ^a-2)
        do cui@print(a[i].toStr())
        do cui@print(" ")
    end for
    do cui@print(a[^a-1].toStr())
    do cui@print("\n")
end func

func main()
    var a: []int :: [1]
    var b: []int :: a
    do b :~ [2]
    do @print(a)
    do @print(b)
end func
```

```
1
1 2
```


+=(に相当するもの)がin-placeでないことがわかる。この違いを把握していないとPythonでははまるかもしれない。

----

Swiftの例を掲載していましたが、SwiftのArrayは値型なので(要素変更で元の配列が書き換わることがないため)、例として不適切でした。削除しました。
CodeBuildでSSMパラメーターストアやSecrets Managerでパラメーターを参照する

# CodeBuildの環境情報を外部に出す

AWSを利用したCI/CDで、ビルドが必要な場合に利用することになるCodeBuild。
CodeBuildで行われるビルドの詳細設定はbuildspec.yamlというファイルに記述することになります。
ビルドの設定を書く際には参照する他リソースのarnや、アクセスキー等の情報が必要となるケースがあります。
しかし通常のプログラムと同様に、環境情報を直接ファイルに書くのは、セキュリティや水平展開の面でアンチパターンとなります[1]。
そこでCodeBuildはenvパラメーターの中で外部から環境情報を読み込むことができます。
ここで設定できる環境情報はCodeBuild自体に設定された値も参照できますが、SSMパラメーターストアやSecretsManagerからも直接読み込めます。


```buildspec.yaml
env:
  parameter-store:
    ssm_parameter: "[パラメーターの名前]"
  secrets-manager:
    secret_parameter: "[シークレットの名前]:[シークレットのキー]"

phases:
  pre_build:
    commands:
      - PARAM1=${ssm_parameter}
      - PARAM2=${secret_parameter}
      #以下省略.どちらの値もログ出力では***になる.

```

またIAMロールに対応するサービス(今回であればパラメーターストアとシークレットマネージャー)の読み込みポリシーをアタッチするのを忘れずに。ないと権限がないとエラーが出てきます。
(ただこの時の権限エラーは、何の権限がないか出てくれるので非常にわかりやすいです。)

余談ですがパラメーター名にハイフンを含めないようにしましょう。
シェルスクリプトはハイフンを用いたパラメーター名を使うことができないです。

これでひっかかった


その他のbuildspec.yamlの詳細な記述については公式ドキュメント[2]が参考になるかと思います。

## 参考

[1]https://qiita.com/yusukaaay/items/7ae2df0b0e9cc66ac572

[2]https://docs.aws.amazon.com/ja_jp/codebuild/latest/userguide/build-spec-ref.html#build-spec.env.parameter-store
SQLインジェクションが話題になってるけど

SQLインジェクションが話題になっている。多分あの話題はデマだとは思うが、それが何なのかの知識はあったほうが良いと思う

## SQLインジェクションとは

まず、以下のようなテーブルが存在するとする。

```sql
CREATE TABLE `table` (
  `id` INTEGER NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `content` VARCHAR(255) NOT NULL
) Engine=InnoDB;
```

次に、以下のようなコードを考える。

```php
<?php
$conn = new mysqli('localhost', 'username', 'password');
$sql = "SELECT * FROM table WHERE content LIKE '%" . $_GET[
  'q'] . "%'";
$res = $conn->query($sql);
// 以下、$resを使って処理を行う
```

これを使うと何が起きるか説明すると、qパラメータに`A%' OR '%' = '`と指定すると、全部の行が取得できてしまうのである。これがSQLインジェクションである。

では、どのような対策をすれば良いのだろうか。以下のようにすれば良い。

```php
<?php
$conn = new mysqli('localhost', 'username', 'password');
$eq = $conn->real_escape_string('%' . preg_replace(
  '/([%_#])/', '#\\1', $_GET['q']) . '%');
$sql = "SELECT * FROM table WHERE content LIKE '" .
  $eq . "' ESCAPE '#'";
$res = $conn->query($sql);
// 以下、$resを使って処理を行う
```

やっているエスケープ処理は2つ。

1. LIKE節のために文字列をエスケープし、%および_に意味を持たせないようにする。その際、 https://www.websec-room.com/2013/12/17/1339 にあるように、ESCAPEを明示的に指定することにより、他のSQLエンジンとの互換性を担保する。
2. [mysqli::real_escape_string](https://www.php.net/manual/ja/mysqli.real-escape-string.php)を呼び出して、SQLで意味のある文字列をエスケープして、SQLに組み込んだ時に無害になるようにする

一応、これで脆弱性を受けるリスクは大幅に減少するが、都度このような記述を考えるのは面倒である。なので、既存のライブラリを使って書くのが一番楽であるのは言うまでもない。
React初学者によるuseEffect解釈

#本記事
本記事はReactのuseEffectに関してまとめた記事になります。
間違い等ございましたらお手数ですが、ご連絡いただけますと幸いです。


#useEffectとは
React 16.8で追加された新機能であり、基本構文にはuseState、useEffect、useCallback/useMemo、useReducer、カスタムフックがある。
（特殊なケースに対応したuseImperativeHandle、useLayoutEffect、useDebugValueがある。※この記事ではこれらに関しての説明は省かせていただきます。）

#何ができる？
ユーザーが何かしらのアクションをした段階で、<font color=blue>**副作用的な処理**</font color>をする。
例えば、以下の例だとボタンがクリックされる度に"再描画されました"とデベロッパーツールに表示されているが、**名前を入力した際にも**同じ現象が起きてしまう。つまり、ユーザーが何かしらのアクションを起こした際(≒開発者が意図した通りの行動をユーザーがした際に)、このコンポーネントに記述されている、意図しない処理が何度も呼び出されている事になる。

####具体例

```react:index.jsx
function EffectHook() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState("");
  useEffect(() => {
    document.title = `クリック数: ${count} 回`;
    console.log("再描画されました");
  });

  return (
    <div>
      <p>クリック数： {count} 回 </p>
      <p>名前: {name}</p>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <button onClick={() => setCount(count + 1)}>カウント+</button>
    </div>
  );
}

export default PracticeCountUp;
```
#上のコードを修正する
```react:index.jsx
function EffectHook() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState("");
  useEffect(() => {
    document.title = `クリック数: ${count} 回`;
    console.log("再描画されました");
  },[count]);  #ここを修正する！

  return (
    <div>
      <p>クリック数： {count} 回 </p>
      <p>名前: {name}</p>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <button onClick={() => setCount(count + 1)}>カウント+</button>
    </div>
  );
}

export default PracticeCountUp;
```

useEffectの第二引数に[count]としてやることで、**ボタンをクリックした時のみ**際レンダリングする様にできる。すなわち、useStateの状態変数に変更が起きた際にのみ(上の場合だとcount)レンダリングできる。

#最後に
最後までご覧いただきありがとうございました。
ざっくりとまとめてみましたが、間違い等気づいた際には修正させていただきます。
Internal Dummy Connection について

# access.log にやたら internal dummy connection が増えた

原因の追究が必要だが、とりあえずログから分離しないと見てらんないので、
https://renoji.com/IT.php?Contents=OS_CentOS/Ref_InternalDummyConnection.html
を参考に作業した

記載はしなくなった。


```text
# diff httpd.conf.old httpd.conf
223c223,226
<     CustomLog "logs/access_log" combined
---
> #    CustomLog "logs/access_log" combined
>     # mod for separate internal dummy connection 2021/05/18 by hatake
>     SetEnvIf User-Agent "internal dummy connection" ExclusionLog
>     CustomLog logs/access_log combined env=!ExclusionLog

# systemctl restart httpd
```

[次] 別ログにこれだけ出す方法は？
ワクチン接種のスケジューリングもルールエンジンで可能になる

何かと進まない、日本国内でのワクチン接種。
いろいろ問題点はあるようですが、こんなのどうでしょうか？

https://rheb.hatenablog.com/entry/OptimizingCovid19VaccinationScheduling.html?sc_cid=7013a000002w8XzAAI
UTCタイムスタンプ(UNIX時間)をJSTに変換して表示するワンライナー

<追記>
さらに短く書けると @nazka9o さんからコメントいただきました。コメントのワンライナーのほうがさらにラクかと思います。
</追記>

https://qiita.com/ryoto20707/items/19c5bc6646db99bd3acb

こちらの記事のphpスクリプトを参考にして、ワンライナーでUTCなUNIX時間からJSTの見やすい表示に変換するワンライナーを作りました。
頭が悪いため、UTCとJSTの変換で毎回悩んでしまうのです。

```shell
$ echo 1620889236 | (read t; php -r "echo (new DateTime())->setTimestamp($t)->setTimezone(new DateTimeZone('Asia/Tokyo'))->format('Y/m/d H:i:s') . PHP_EOL;";)
2021/05/13 16:00:36
```

キモは変換させたいUNIX時間をphpスクリプト内に書かず、スクリプトの最初のほうに書いてあるってところです。echoとreadを駆使してSHELL変数化してphpの-rオプション構文のなかに押し込めました。
phpの処理の中にUNIX時間を書かなきゃならないとするとカーソル移動が超面倒くさいと思うので。
Macでバックスラッシュとアクセント記号付き文字を打つ方法

====== 2022/12/16　追記 ======
`日本語-ローマ字入力`を選択して，`入力モード:`で`英字`にもチェックを入れる．
この設定はやめて，Karabiner-Elementsで\と¥を入れ替えるようにした．


https://qiita.com/TomokiYamashit3/items/1bc4d4af259708a8a71d

====== ====== ====== ====== 



# 環境

- macOS Big Sur 11.2, 11.3など
- 標準の日本語JISキーボード

# バックスラッシュ

![スクリーンショット 2021-05-18 16.45.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/921280/45b31a35-4a3c-c910-9a8a-e4fc566f8771.png)

システム環境設定 --> キーボード --> 入力ソース

`日本語-ローマ字入力`を選択して，`入力モード:`で`英字`にもチェックを入れる．
また，下の方に`"¥"キーで入力する文字:`の設定があるのでバックスラッシュを選ぶ．
英字を入力する際、入力ソースは`ABC`の方ではなく，こちらを使う．


入力ソースにABCを使っても`option + ¥`でバックスラッシュが打てるが，1発でバックスラッシュを打つ設定が無い．


# アクセント記号付き文字

![スクリーンショット 2021-05-18 16.51.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/921280/b23c0e87-8635-27c6-f34e-1b6ea0375775.png)

Å（オングストローム）などのアクセント記号付き文字を打つ際は，入力ソースに`ABC`の方を使う．
大文字のAにアクセント記号がついたものは`Shift + a`を長押しすれば上の画像のように候補が出てくるので選ぶだけでいい．
小文字や他の文字でもその文字のキーを長押しするだけ．

入力ソースに`日本語-ローマ字入力`を選択していると長押ししてもAAAAAAAAAAのように入力されるだけなので注意．

普段は`日本語-ローマ字入力`で英字も入力して（バックスラッシュが簡単に打てる），アクセント記号付き文字が必要な時だけ，少し面倒くさいが入力ソースを`ABC`に切り替えるようにしている．