OmniAICreator/Qiita-1.07M huggingface dataset:
プログラミング未経験から始める！Flutterでアプリ開発【ios/android】

こんにちは。長谷川です。この記事では、自分の勉強もかねて、Flutterを使ったアプリ開発をなるべく易しく解説していくので、ぜひ最後までお付き合いいただけますと幸いです。
また、私自身こういった解説記事を書くのは初めてなので、至らぬ点は多々あるかとは思います。ぜひコメントで意見いただけると幸いです。

##この記事の対象

今まで全くプログラミングしたことないけどアプリ開発してみたい人、です。プログラミングは専門用語や英語が多くて億劫。。という方も、丁寧に用語解説をしながら記事を書いていくので安心して読み進めてみてください。

##必要なもの

1、windows10以降搭載のパソコン or Mac
2、アプリを作りたいと思う熱意👈大事！！

##習得までのロードマップ

lesson0 : Flutterって？アプリ開発って？
lesson1 : とりあえずプログラミングする環境を作ってみる。
lesson2 : Dart言語を学習しよう。
lesson3 : オブジェクト指向プログラミングを学習しよう。
lesson4 : Widgetの使い方
lesson5 : Coming Soon...

#【Lesson0】Flutterって？アプリ開発って？

みなさんはAndroid、ios(iPhone)のどちらを使っていますか。

アプリ開発の話に入る前に、スマホにおけるOS（オペレーティングシステム）の違いについて簡単にお話しておきます。
まずOSとは、スマートフォンをoperating（制御）するためのソフトウェアのことで、Google社が開発するAndroidとApple社が開発するiosの二種類のOSがあります。OSが異なっていることで、若干操作の方法が変わったり、セキュリティの信頼度が変わってくるのはご存じかとは思いますが、OSが異なるということは、アプリケーションを作成するための言語が異なってきてしまうことを意味しています。
したがってアプリ開発において、androidのためのアプリ制作とiosのためのアプリ制作は**全く別物です**。
例えば、Youtubeのアプリはandroidのものとiosのもので見た目こそ一緒ですが、使用されているプログラミング言語が違います。
AndroidはJava、iosはSwiftという全く違った言語で書かれています。アプリ開発が初心者にとって難しいのはこの問題が大きいでしょう。

しかし、この問題をFlutterが解決してくれました。Flutterを用いれば、一つのコードを書くだけでios/androidに加え、windowsのソフトウェア、さらにはホームページまで開発できてしまうのです。

Flutterってすっごー－い！！

##で結局Flutterってなんやねん

Flutterの歴史はとても浅いです。2018年にGoogle社によってFlutterは開発されました。まだまだ歴史が浅い分、書籍やサイトが少ないですが、一つのコードを書くだけで、様々な端末上で動くアプリが作れるという革新性から今最も注目されているフレームワークと言えます。

「は？フレームワーク？なんすかそれ」
「いい質問ですね！」（やってみたかった）

##どうして両方のアプリが一つの言語で作れるのか

Flutterでiosとandroidどっちのアプリも作れるとは言っても、どうやってそれを実現できているのかをご説明しましょう。
Flutterでは、Dart言語というプログラミング言語を利用します。Dartを用いてデザインや入力機能、ボタンの機能など一通り記述してしまいます。
そして！！Dart言語で書いた処理を、android用であればJavaに、ios用であればSwiftに**翻訳**してくれるのです。
Flutterとは、Dart言語をJavaやSwiftに翻訳してくれる仕組みです。しかもJavaやSwiftを書くよりもらくちんです。とてもらくちんなので、初心者でも簡単に取り組むことができるのです。


##終わりに

頭がこんがらがっている人、大丈夫です。初回から飛ばしすぎましたね。次回からは、実際に手を動かして勉強していきましょう。少しずつできることが増えるたび、Flutterを勉強するのが楽しくなってくるはずです。では次回。
ActionDispatch::Cookies::CookieOverflow (ActionDispatch::Cookies::CookieOverflow)の解決方

## 起こったこと

RailsAPIとNuxt.jsで作成しているアプリでdevise_token_authを使用した認証機能を実装中に、ログインをすると
```ActionDispatch::Cookies::CookieOverflow(ActionDispatch::Cookies::CookieOverflow)
```
が発生して、ログイン中のユーザー情報が取得できなかった。

主な原因としては
session 変数に多くのデータを保持する場合や
flash など view 関連のhelper で Objectやtextなど多くの文字列
を渡している場合に出るよう。

(CookieStore: session 情報を全てsecret_key_baseで暗号化し、クライアント側のCookie に保持。)

上記を解決するのに結構ハマったので、備忘録的に記事を書きます。
（何か別の方法等あればコメントにて教えていただけると幸いです）

## 解決法
該当コントローラーに下記メソッドを追加

```
request.session_options[:skip] = true
```

before_actionにてメソッドを発火させる。
HTMLとCSS の基礎

ここではHTMLとCSSの基礎ということで、Webページを作成する際に必要な言語であるHTMLとCSSについての説明を行っていきます。
この他にも動きのあるサイトを作成したいという場合はJavaScriptも使う必要があるのですが、ここでは割愛し時間があったら別の記事として書きたいと思います。

#HTMLとCSSの概要
HTMLは「Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略であり、webページを作成するために開発された言語です。
HTMLではこの文書と文書のつながりを示す「ハイパーリンク」という部分が特に重要な機能です。
ハイパーリンクはハイパーテキスト(特定の文書や画像をクリックすることで特定の位置や異なる文書へと飛ぶことができる機能)同士のつながりを表し、異なる文書やネットワーク間を行き来するための目的地を指定しています。
また、「マークアップ」は文書に目印をつけることを表し、マークアップされたテキストには「見出し」「段落」「箇条書き」のような特定の意味づけがなされています。

CSSは「Cascading Stylr Sheet」の略であり、文書のレイアウトを整えたり、装飾する際に用いられます。
ここでのCascadingとは「階段状の滝のような」「連鎖的に伝わる」といった意味を持ち、CSSの特性である「継承」を表しています。
HTMLではページを読み込むたびにすべての属性が書き換えられるのに対し、CSSでは一度描画した色や文字の大きさなどのスタイル、後から変更した要素にも適用できる機能を備えており、これがCSSの「継承」です。

Webページ作成において、基本的にはHTMLで構造的な意味づけ(マークアップ)を行い、CSSで装飾やレイアウトなどを決めていきます。
HTMLとCSSで分けて考えることにより、Webページ自体のメンテナンス性を向上させることができます。

##HTMLの基本構文

###要素(Element)
文の開始タグと終了タグに囲まれた範囲のことを「要素」といいます。
要素はHTMLを構成する基本的な単位となります。
以下の例では、 ＜h1＞と＜/h1＞がタグ、それに囲まれた全体の部分が要素です。

```html
<h1>HTMLとCSSの基礎</h1>
```

###よく使う要素

| 要素 | 用途 | 備考 |
|------|------|------|
|＜h1＞ ~ ＜/h1＞|見出し|h1からh6までの6段階存在する|
|＜p＞ ~ ＜/p＞|段落|ひとかたまりのテキストを段落として表現|
|＜ul＞ ~ ＜/ul＞|箇条書きリスト(順不同)|li要素とセットで使用する|
|＜ol＞ ~ ＜/ol＞|箇条書きリスト|li要素とセットで使用する|
|＜dl＞ ~ ＜/dl＞|記述リスト|dt要素、dd要素とセットで使用する|
|＜table＞ ~ ＜/table＞|表組み|tr要素、td要素とセットで使用する
|＜address＞ ~ ＜/address＞|連絡先|
|＜div＞ ~ ＜/div＞|任意の範囲・グループ化|
|＜a＞ ~ ＜/a＞|ハイパーリンク|
|＜em＞ ~ ＜/em＞|強調|
|＜strong＞ ~ ＜/strong＞|重要な語句|
|＜img＞ ~ ＜/img＞|画像|
|＜span＞ ~ ＜/span＞|任意の範囲|

###属性(Attribute)
要素に対して、様々なオプション設定のような役割を持つのが「属性」です。
各要素に対して共通の属性もあれば、特定の要素にしか存在しない属性も存在します。
以下の例ではa要素にhref属性が設定されています。
a要素の意味としてはハイパーリンクですが、href属性をつけることでそのリンク先の情報を指定しています。

```html
<a href = "https://qiita.com/">Qiita</a>
```

###DOCTYPE宣言(文書型宣言)
テキスト文書をHTMLにするためには、まずどのバージョンのHTML言語で作成されているのかを明示するためにDOCTYPE宣言というものをする必要があります。
HTMLのバージョンには「HTML5」「HTML4.01」「XHTML1.0」があり、そのいずれかの言語規格の記述する必要があります。
現在の標準規格はHTML5なので、特別な理由がなければHTMLの文頭で

```html
＜!DOCTYPE html＞
```
と明示する必要があります。
この宣言の後は、head要素とbody要素の中に、それぞれ必要な内容をマークアップしていきます。

##CSS
CSSの基本書式はとてもシンプルなものです。
CSSの土台となるHTMLのソースコードの中の「どの部分の」「どんな属性を」「どのような値にするか」ということを決まっている書式に基づいて書いていくだけです。
CSSでは上記に示した内容をそれぞれ「セレクタ」「プロパティ」「値」と呼びます。下の例は簡単なものですが、h1がセレクタ・colorがプロパティ・#ff0000が値を表します。このコードを適用すると、「h1要素の文字の色を赤くする」という命令になります。

```html
h1{color:#ff0000;}
```

##まとめ
webページを作成する際に必要不可欠なHTMLとCSSについて簡単にまとめました。
基礎中の基礎である内容ではありますが、今後その続きの内容についても書いていけたらいいなと考えてます。

##参考文献
https://saruwakakun.com/html-css/basic
javaScript68_toString()

ブラウザ何を出力するときは、実はtoString()関数の戻り値を出力しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/fcb4eba9-443d-24db-2334-d77d8b82d927.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/84c61e51-4aed-560e-f6db-62877e3c5da9.png)
上記の例だと、toStringはperの中にだけ追加されている。
全て生成されたインスタンスの中に同じtoStringをアクセスしたければ、toStringをクラスのインスタンスに追加すればOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/619e26d5-b906-5643-6b0b-687efb9dbd2e.png)
React 版 Fluent UI ライブラリの DetailsList で全選択チェックボックスを非表示にする

## やりたいこと
React 版 [FluentUI](https://developer.microsoft.com/ja-JP/fluentui#/) には [DetailsList](https://developer.microsoft.com/ja-jp/fluentui#/controls/web/detailslist) というデータテーブルのコントロールがあります。
このコントロールでは各行に選択用のチェックボックスを表示することができ、チェックボックスの表示をオンにすると便利機能としてヘッダーにも「すべて選択/解除」用のチェックボックスが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149212/997fcaf8-3c58-268d-01e1-1dc770c30d96.png)


今回は各行のチェックボックスは表示したまま、ヘッダーの「すべて選択/解除」チェックボックスのみを非表示にする必要がありました。

## 課題
`DetailsList`のヘッダー部品として`DetailsHeader`というコントロールがあり、それに対して`IDetailsHeaderProps`で各種プロパティが定義されています。(ここでは`detailsHeaderProps`という変数名)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149212/f8965a00-3394-e5cd-2606-c137595f15aa.png)

`IDetailsHeaderProps`の中には`checkboxVisibility`というプロパティも存在し、これにはenumとして`always/onHover/hidden`のいずれかが設定できるようになっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149212/e57ff481-70ff-21f5-1211-2f101c159719.png)

ここでalways(常に表示)とonHover(ホバー時に表示)を設定した場合は正常にチェックボックスの表示が機能するのですが、hidden(非表示)を設定しても非表示にはならず、onHoverと同じ挙動になってしまいます。
とりあえず[issueは出した](https://github.com/microsoft/fluentui/issues/21451)のですが、要素の非表示だけで実現できそうなのでCSSで対応してみます。

## CSSでやってみる

``` CustomDetailsList.tsx 
import { Component } from 'react';
import { DetailsList, IColumn, IDetailsListStyles, IDetailsHeaderProps, DetailsHeader } from '@fluentui/react';

const items = Array.from({ length: 10 }).map((item, index) => ({
    key: index.toString(),
    col1: `hoge${index}`,
    col2: `fuga${index}`,
}));


const columns: IColumn[] = [
    { key: 'col1', name: '列１', fieldName: 'col1', minWidth: 100 },
    { key: 'col2', name: '列２', fieldName: 'col2', minWidth: 100 },
];

const gridStyles: Partial<IDetailsListStyles> = {
    headerWrapper: {
         selectors: {
            '.ms-DetailsHeader-cellIsCheck':{
                visibility: 'hidden'
            }
    }
};

export class CustomDetailsListextends Component {
    render() {
      return (
        <DetailsList
          items={items}
          columns={columns}
          styles={gridStyles}
        />
      );
    }
  }
```

ポイントとしてはDetailsListの`styles`プロパティに設定する`gridStyles`の`selectors`で、DevToolsで確認した「すべて選択/解除」チェックボックスを指す`.ms-DetailsHeader-cellIsCheck`クラスを指定して`visibility: 'hidden'`を設定しているところです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149212/ce7a5ccd-07d0-70ff-1165-716dabfb6ebe.png)


これで各行のチェックボックスは表示したまま「すべて選択/解除」チェックボックスのみを非表示にすることができました。

【改修前】
![Animation19.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149212/96f19835-182e-5644-30df-f761c1856ca8.gif)

【改修後】
![Animation18.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149212/7e64fe52-1325-f8f7-c05f-42d07bd667e2.gif)
Herokuでアプリを作るのをもっと簡単にしよう

[Herokuの[Node.js getting started]](https://github.com/heroku/node-js-getting-started/)
Heroku公式のリポジトリは、ムダがあります。

- 不必要なモジュールの導入
- テンプレートの説明やタイトル

など、無駄があります。(2回言っちゃう)
ということで、無駄を無くしたものを作ってみました！

[Bellomakerの[Node.js getting started]](https://github.com/heroku/nodepack/)
やばいです！めちゃ無駄省きました！
使ってみてね



※あえて語彙力は低めで書いております
Next.js+TypeScript リロード(再読み込み)時は処理を行わない

#背景
2つのWebページ(ページA, ページB)がある。
ページAにて「router.push」をして、ページBへ遷移する。
遷移してきたページBではとある関数処理が実行される。そして、その関数処理の終了後にF5キー押下などによるリロード(再読み込み)を実行すると、再び関数処理が実行される。しかし今回リロード時に再び関数処理を実行したくないという場面に出会(でくわ)した。
苦戦したのでまとめておくことにした。

#開発言語 (バージョン情報)
React.js (17.0.2)
Next.js (11.1.2)
TypeScript (4.4.3)

#結論
Next.jsのnext/router
「router.events.on('routerChangeComplete', 関数名)」
を使用する

これを使用することで、リンククリックやボタン押下などによる「遷移先アドレスが変わる」ページ遷移のときに関数を発火させることができる。逆にリロードのような「遷移先アドレスが変わらない」ページ遷移のときは関数が発火しないことになる。

#実装例

- 以下のsample.tsxは上記でいうページB(遷移先のページ)にあたる
- 今回はリロードを含めないページ遷移時にダイアログを表示する例を挙げてみた

```typescript:sample.tsx
import FC, { useState, useEffect } from 'react';
import { useRouter ) from 'next/router';

const PageB: FC = () => {
  const router = useRouter();
  const [dialogOpen, setDialogOpen] = useState(false);

  useEffect(() => {
    // リロードを含めないページ遷移時に行なう関数を定義
    const handleRouteChange = () => {
      if (jobId !== undefined && jobId !== '') {
        setDialogOpen(true);
      }
    }

    // ここがポイント
    router.events.on('routerChangeComplete', handleRouteChange);

    return() => {
      router.events.on('routerChangeComplete', handleRouteChange);
    }
  }, [jobId, router.events]);

  return (
    <>
      {/* ダイアログ（propsのopenにTrueを渡すとダイアログが表示される） */}
      <DetailDialog
        open={dialogOpen}
        setOpen={{setDialogOpen}
        jobId={jobId}
      />
    </>
  );
};

expoer default PageB;
```

#参考

https://nextjs.org/docs/api-reference/next/router#routerevents
質問テンプレ



参考にさせていただいた記事です。

https://qiita.com/seki_uk/items/4001423b3cd3db0dada7

# エラーに遭遇して解決した時のテンプレ

# 目次
<!-- タイトルとアンカー名を編集 -->
1.[エラーメッセージ](#エラーメッセージのコピペとキーになると思われる部分)
2.[考えてトライしたこと](#考えてトライしたこととその結果)
3.[役に立った情報](#役に立った情報)
4.[次に活かすこと](#次に活かすこと)

# 開発環境

共有する必要があれば書く
あまり書かないかも

<!-- 見出しー -->

##エラーメッセージのコピペとキーになると思われる部分

```html:エラーメッセージ
##エラーメッセージを書く
```


# 考えてトライしたこととその結果



# ひと呼吸おく

第三者の視点に立ってみる。
一度距離をとって、見直してみる。
質問をされる側の視点にたつ。
いつ、どうやって質問するのがベストか。

# 役に立った情報

カードリンクや記事をペタペタする。

# 次に活かすこと

次に活かすための知見をまとめる。
Each child in a list should have a unique "key" prop.エラーについて

Each child in a list should have a unique "key" prop.
のようなエラーが出ました。
こちらの解決法についてmemoしていきたいと思います。

原因としては、ReactはJSXの配列からlistを作成する際、keyを呼び出す側につける必要があり、
今回Main.jsのWorksというコンポーネントにkeyがなかったので、
そのエラーでした。

```Main.js
 <div className="worksContainer">
          <h2>WORKS</h2>
          {worksList.map((worksItem) => {
            return (
              <Works
                name={worksItem.name}
                image={worksItem.image}
                skill={worksItem.skill}
                introduction={worksItem.introduction}
              />
            );
          })}
        </div>
```
この状態だと上記のエラーが出てしまい、
```Main.js
 <div className="worksContainer">
          <h2>WORKS</h2>
          {worksList.map((worksItem) => {
            return (
              <Works
                key ={""}
                name={worksItem.name}
                image={worksItem.image}
                skill={worksItem.skill}
                introduction={worksItem.introduction}
              />
            );
          })}
        </div>
```
keyを入れてあげるとエラーが消えました。

ReactはコンポーネントとDOMの関係性を作るためにkeyを使用していて、ライブラリーはこの関係性をコンポーネントをレンダリングするかどうかの判断基準に使用しているとのこと。

参考記事：https://sentry.io/answers/unique-key-prop/
公式：https://reactjs.org/docs/lists-and-keys.html
【Python基礎】 辞書型データから値を取る方法

### 概要
辞書型データから値を取る方法についての説明です。
他プログラミング言語には慣れているが、Pythonがはじめての方にこの記事が役に立てるかと思います。

### 辞書型について
Pythonの主な特徴の1つは辞書型（`dict`）があることです。
JavaScriptのObject型と似ているが少し違います。

```python
# 辞書型の例
sample_dict = {
    "a": 1,
    "b": 2
}
```
`sample_dict`から2つの方法で値を取ってみます。

## 値の取り方1
正常

```python
a = sample_dict["a"]
b = sample_dict["b"]
```
エラー

```python
c = sample_dict["c"]
```
`sample_dict`にキー`"c"`がないためエラー（`KeyError: 'c'`）が発生しました。<br>
エラーの対策として例外処理の実装をします。

```python
try:
    c = sample_dict["c"]
except KeyError:
    c = 0
```

あるいはキーの存在を事前に確認します。

```python
c = 0
if "c" in sample_dict:
    c = sample_dict["c"]
```
どちらもソースコードが複雑です。

## 値の取り方2

```python
a = sample_dict.get("a")
b = sample_dict.get("b", 0)

c = sample_dict.get("c")
print(c) # None
c = sample_dict.get("c", 0)
print(c) # 0
```

ソースコードが簡潔になりました。

## 結論
~~2つ目の方法が幅広く使えそうです。~~
キーの存在が確実であれば、1つ目の方法を使ってもいいと思います。（例外処理やキーの存在チェックが要らないからです。）

2022/03/03追記
どうせNULLチェックや空のチェックをする必要があるときなら、最初から1つ目の方法にして存在チェックを行ってもいいと思います。
透過pngを手軽に作成できる無料オンラインツール

#透過pngを手軽に作成できる無料オンラインツール
皆さんこんにちは！
透過pngを作成したい人がたくさんいるでしょう。
この記事は透過pngを手軽に作成できる無料オンラインツールと使い方についてご紹介します。役に立てれば幸いです。




##事前準備
編集したい画像
PicWishの公式サイト　(無料・オンライン)
このソフトは完全無料ですので、ご興味のある方はお試しください。



##使う手順
1.[PicWishの公式サイト](https://picwish.com/jp/?apptype=qiita)を開きます。
2.編集したい写真を選択し、アップロードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/417797/df705f44-f575-2a3f-1685-ed8370f76bf7.png)
3.数秒待つと、自動的に画像処理が行われます。 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/417797/2cf71004-b0c9-4d4e-8b2c-44a16c23f677.png)
4.[ダウンロード]をクリックすれば、透過pngの画像をダウンロードできます。
.NET 6.0とAlpineのバージョンアップで遭遇した問題二つ

# はじめに

.NET 6.0 のプログラムの修正が大体終わり、さて AWS の実行環境にデプロイしようかなというところで、2 つほどハマったのでメモしておきます。

|                                                            | 移行前        | 移行後      | 備考     |
| ---------------------------------------------------------- | ------------- | ----------- | -------- |
| ベースイメージ                                             | Alpine 3.11   | Alpine 3.14 |          |
| .NET                                                       | .NET Core 3.1 | .NET 6.0    |          |
| データベース<br>AWS Aurora MySQL                           | 2.x           | 2.x         | 変更なし |
| データベースアダプター<br>Pomelo.EntityFrameworkCore.MySql | 3.2.4         | 6.0.1       |          |

# Alpine 3.14 から Aurora MySQL 2.x に接続できない

Windows で実行している分には問題ないのですが、Alpine Linux から実行したら下記の例外が発生しました。
OS 側でサポートする TLS と Aurora 側でサポートする TLS のバージョンの差から発生する問題ですね。

```
An error occurred using the connection to database '' on server 'aurora-xxxxx-xxxxx.xxxxxxxxxx'.
System.InvalidOperationException: An exception has been raised that is likely due to a transient failure. Consider enabling transient error resiliency by adding 'EnableRetryOnFailure()' to the 'UseMySql' call.
 ---> MySqlConnector.MySqlException (0x80004005): SSL Authentication Error
 ---> System.Security.Authentication.AuthenticationException: Authentication failed, see inner exception.
 ---> Interop+OpenSsl+SslException: SSL Handshake failed with OpenSSL error - SSL_ERROR_SSL.
 ---> Interop+Crypto+OpenSslCryptographicException: error:14094410:SSL routines:ssl3_read_bytes:sslv3 alert handshake failure
   --- End of inner exception stack trace ---
   at Interop.OpenSsl.DoSslHandshake(SafeSslHandle context, ReadOnlySpan`1 input, Byte[]& sendBuf, Int32& sendCount)
   at System.Net.Security.SslStreamPal.HandshakeInternal(SafeFreeCredentials credential, SafeDeleteSslContext& context, ReadOnlySpan`1 inputBuffer, Byte[]& outputBuffer, SslAuthenticationOptions sslAuthenticationOptions)
```

以前、Debian でも同様のエラーが出たことがあるのでこれは下記の投稿と同じ方法で解決しました。

https://karuakun.wordpress.com/2020/06/29/asp-net-core%e3%81%ae%e6%a8%99%e6%ba%96%e3%82%a4%e3%83%a1%e3%83%bc%e3%82%b8debian-buster%e3%81%8b%e3%82%89mysql-3-6%e4%bb%a5%e5%89%8d%e3%81%ae%e3%83%87%e3%83%bc%e3%82%bf%e3%83%99%e3%83%bc%e3%82%b9/

最も簡単な方法は、ConnectionString に `SSL Mode=None` を設定することです。

# 一度閉じたコネクションを開くと動作が止まる

ローカルの開発時は Docker で起動した MySQL 5.7 に接続しているので気づかなかったのですが、2 回以上データベースにクエリを発行すると 2 回目のクエリの結果が返ってこない問題に遭遇しました。
Pomelo.EntityFrameworkCore.MySql が 6.0.1 で足回りに利用している MySqlConnector の最低バージョンを 2.1.2 に更新した事が影響している用です。
下記のドキュメントにあるように Aurora MySQL 2.x(MySQL 5.7) 系では MySQL の Pipeline に正しく対応していない事が問題らしく、ConnectionString に `Pipelining=False` を設定する必要があります。
この問題は Aurora 3.x(MySQL 8.0) 系では発生しないようです。

https://mysqlconnector.net/troubleshooting/aurora-freeze/

そのほか、MySqlConnector の接続文字列のオプションは下記のようなものがあります。

https://mysqlconnector.net/connection-options/

# おわりに

両方とも ConnectionString の調整で対応できるレベルで良かったです。
.NET 6.0 自体の更新はそれほど大変ではないのですが、OS 周りを含めて確認するとそれなりにハマりポイントがありますね。
皆さん更新はこれからだと思いますが、何かの役に立てたら幸いです。
gitコマンドコピペ元

gitコマンドで使うたびにググっているようなものをまとめてコピペできるようにしておく。逐次追加予定

### `git add` を取り消す(変更内容は取り消さない)
```sh
$git reset HEAD hoge
```

### 直前のコミットのメッセージを変更する
``` sh
$git commit --amend -m "変更後のメッセージ"
```

### `git add`ですでにgit管理下にあるファイルの変更をステージングする
``` sh
$git add -u
```
`git add -A (-all)`でもいいけど、git管理下にないファイルもステージングしてしまうので、`git add -u`してから`git add ファイル名`で個別に対応した方がミスが減ると思う。

### 特定コミットを別ブランチにマージする
``` sh
$git cherry-pick "コミット番号"
```
- `-e`でコミットメッセージを変更できる
- `-n`でコミットせずにマージだけしてくれる
- 参考 : https://git-scm.com/docs/git-cherry-pick
複数コミットに対してまとめて実施
``` sh
$git cherry-pick "コミット対象の1つ前のコミット".."コミット対象の最後のコミット"
```

### Untrackedファイルの一覧を取得する
``` sh
$git ls-files -o --exclude-standard
```
- `-o(--others)` : git 管理外のファイルを対象とする
- `--exclude-starndard : .gitignoreや.git/info/excludeなど除外対象になっているファイルを含む
#### さらにファイルをバックアップする
- `cpio`コマンドに渡すことでファイルのバックアップを作ってくれる
``` sh
$git ls-files -o --exclude-standard -z | cpio -pmd0 出力先ディレクトリ
```
- 出力先ディレクトリは、git管理ディレクトリ外に配置すること。カレント配下とかだと`git clean`した時にバックアップも消える
- 参考 : 
  - https://git-scm.com/docs/git-ls-files
  - https://gist.github.com/nflint/44712c41b38fbfed1bfa2555fbe053ae
### リモートリポジトリ削除
``` sh
$git remote rm リポジトリ
```
### 直前のコミットの打ち消し
``` sh
$git reset --soft(--hard) HEAD^
```
- soft : コミットを無かったことにして変更自体はワークスペースに戻る
- hard : コミットを無かったことにして変更自体もワークスペースから削除する

### 特定のファイルだけ、コミット前の状態に戻す
```sh
$git restore --source=コミット番号^ path/to/file.txt
```

### ローカルの状態からブランチを作成してリモートにpushする
検証用の設定とかをfeatureブランチに入れたくないときに、ローカルの状態から検証用ブランチを切ってそちらにコミットするときに使ったり

ブランチ作成する元ブランチに切り替える
``` sh
$git checkout develop
```
ブランチ作成
``` sh
$git checkout -b ブランチ名
```
ブランチをリモートに登録
``` sh
$git push -u origin ブランチ名
```
あとはいつも通りgit addしてcommit, pushすればよろし

### git commit, rebaseで利用するエディタを変更する
``` sh
$git config --global core.editor <エディタ名>
# git config --global core.editor vi
# git config --global core.editor code -> エラーになってできなかった
```

### reabseでコミットをまとめる
こちら参照
https://qiita.com/takke/items/3400b55becfd72769214
- コミットメッセージを残さない場合は、メッセージを残さないコミットをpick -> fixupにする

### リモートリポジトリが存在しないローカルブランチを削除する
リモートに存在しないローカルブランチをリストアップ。
```sh
$git branch -vv | grep ': gone]' | awk '{print $1}'
```

ローカルブランチ削除
```sh
$git branch -vv | grep ': gone]' | awk '{print $1}' | xargs git branch -d
```

ローカルブランチにpushしていないコミットがあっても矯正削除
```sh
$git branch -vv | grep ': gone]' | awk '{print $1}' | xargs git branch -D
```
※リモートと紐づいているローカルブランチをリモートトラッキングブランチというらしい

### git diff
ファイル名だけ取得
```sh
git diff --name-only
```

ブランチ比較
```sh
$git diff ブランチA ブランチB
```
カレントブランチと別のブランチ
```sh
$git diff ブランチB
```
特定コミットと比較
```sh
$git diff コミット番号
```

### コミット間で変更のあるファイルを抽出する
```sh
- リポジトリルートで実行しないとエラーになるので注意
$git archive ブランチ名 `git diff --name-only コミットfrom コミットto --diff-filter=d` -o diff.zip
```
参考： https://www.crecafe.co.jp/crelab/creative/3286/
Cloud FunctionsにSecretを環境変数として渡したが、デプロイ時に環境変数がなぜか取得できずデプロイエラーとなった件の解決

## 前提
* Cloud Functions(Node.js) + Express.js + TypeScript
* 異なるプロジェクトのFirestoreにアクセスする必要がある
* Service Account Keyのclient_email, private_keyを用いてinitializeApp()する
* Secret Managerにclient_email, private_keyを保存
* Cloud FunctionsにSecretを環境変数として渡している

## 最初作った構成
下記のソースだと、`firebase deploy --only functions`時にエラーを吐いた
client_emailをハードコードすると、private_keyで同様のエラー。
private_keyもハードコードするとうまく動いた。

```
Error: Error occurred while parsing your function triggers.
Error: Service account object must contain a string "client_email" property.
```

### index.ts
Express.jsを用いてAPIを作成
ルーティングを行う  

```typescript
import * as functions from "firebase-functions";
import express from "express";
import create from "./create";

const app = express();
app.post("/create", create);

export const api = functions
  .region("asia-northeast1")
  .https
  .onRequest(app);
```

### create.ts
```typescript
import {primaryFirebase, secondaryFirebase} from "./firebaseInitialize";

const primaryFirestore = primaryFirebase.firestore();
const secondaryFirestore = secondaryFirebase.firestore();

const create = async (req, res) => {
  const doc = await primaryFirestore.
    .collection("collectionName")
    .add({
      key: "value",
    });

  await secondaryFirestore
    .collection("collectionName")
    .doc(doc.id) // primary and secondary are same id
    .set({
      key: "value",
    });

  res.send("OK");
};

export default create;
```

### firebaseInitialize.ts
`process.env.CLIENT_EMAIL`が、直前のlogには出力されているのに、certにわたすService Account ObjectのclientEmailは文字列になっていないらしい。なぜ…？

```typescript
import admin from "firebase-admin";
import * as functions from "firebase-functions";

functions.logger.log("env: ", process.env); // ちゃんとログに出力されているのに……

export const primaryFirebase = admin.initializeApp();
export const secondaryFirebase = admin.initializeApp(
  {
    credential: admin.credential.cert({
      projectId: process.env.PROJECT_ID,
      clientEmail: process.env.CLIENT_EMAIL,
      privateKey: process.env.PRIVATE_KEY,
    }),
  },
  "secondary",
);
```

## 対策
ハードコードすると動くが、環境変数だと動かない。
Secret Manager経由で環境変数を渡す場合は、デプロイ時には環境変数は空のまま解釈されるとか…？
なぜだかわからないが、`process.env.CLIENT_EMAIL`, `process.env.PRIVATE_KEY`の読み込みを遅らせてみた。

### create.ts
dynamic importを使って解釈のタイミングをズラしてみたら、うまくデプロイされた。
APIもうまく動いている。

```typescript
const create = async (req, res) => {
  const {primaryFirebase, secondaryFirebase} = await import("./firebaseInitialize");

  const doc = await primaryFirebase.
    .firestore()
    .collection("collectionName")
    .add({
      key: "value",
    });

  await secondaryFirebase
    .firestore()
    .collection("collectionName")
    .doc(doc.id) // primary and secondary are same id
    .set({
      key: "value",
    });

  res.send("OK");
};

export default create;
```

なぜ最初のソースだとうまくいかなかったのか、、、分かる方ぜひご教授ください
【PHP】「Parse error: syntax error, unexpected end of file, expecting "," or ";" in～」というエラー発生

## 今回のコード
```php:index.php
<?php
echo "処理のはじまり！\n\n"

```
どこにでもある文字を出力をするコードです

## 実行

```console:console
$ php index.php
```

実行！！

```console:console
Parse error: syntax error, unexpected end of file, expecting "," or ";" in ~~~
```
> 解析エラー：構文エラー、予期しないファイルの終わり、「、」または「;」が必要です

上記のようなエラーが発生しました。

## 解決方法
翻訳を見れば誰でも分かることですが、終わりの``` ; ```が抜けているためのエラーなのでセミコロンを追加します。

```php:index.php
<?php
echo "処理のはじまり！\n\n"; //追加

```

とてもシンプルなエラーですがたまにやってしまう、、、
[デブサミ2022]「グローバル（マルチリンガル）ｘ人事ｘ スクラム x People Analytics」でのエンジニアの挑戦  で学んだ事

# はじめに

以下のデブサミのセッションを視聴して学んだことを書きます。

セッション名：「グローバル（マルチリンガル）ｘ人事ｘ スクラム x People Analytics」でのエンジニアの挑戦
スピーカー：村田 隆一[メルカリ]
概要ページ：https://event.shoeisha.jp/devsumi/20220217/session/3719/

# セッション内容

「変化に挑戦しよう」が主題のセッション(個人的にとても興味のあるテーマ)。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403606/f9c47c08-ee18-2470-e5fd-f56f69a18eaa.png)

これからは、各部門ないのエンジニア化も急速に進む(採用もエンジニアに)

People Analyticsとは、従業員に関するデータを分析して人事に活用すること。
これまでをもとに意思決定できるようにするために必要。
People Analyticsが必要な背景として、組織における多様性の拡大により、雰囲気を読むとか暗黙の了解が通用しなくなった。

メルカリは、急速な組織の拡大があり、様々な国の社員が増加。
そのため、ハイコンテクストなコミュニケーションから、ローコンテクストなコミュニケーションに。
よって、人事も、暗黙・感覚の世界から、言語化・数値の世界へ。
「測定できないものはマネージできない」と(ドラッガーに)言われているため、人事でやりたい分析を計測できるようにする。

人事をデータを用いるために、組織、人材、機械について、以下のように取り組む。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403606/e0d806e0-31ba-5897-312f-1d3c7b290613.png)

人事データは、タッチポイントごとにバラバラなので、標準化が必要だった。
人事データを扱うシステムを構築するには、人事データを扱う権限が必要だったため、人事部門に移動する事が必要だった。

大きくキャリアが変わってしまう苦悩は、以下のように乗り越えた。

- 不確実性が高い世の中なので、何年も先のキャリアはそんなに考えない
- ただし、定期的なWillの言語化は「自分が気持ちよく働くための環境や条件」の部分は行う
- データエンジニアへのチャレンジは困難だったが、データ分析基盤をBigQueryなどで構築する人事チームはかっこいいと自己暗示した
- 公式ドキュメントで解決できないことは、知見がある社外のエンジニアに聞いた
- スクラム知識がない組織に英語環境で導入するのは困難だったが、ゴールや目的を丁寧に分かりやすく説明した。繰り返し説明した。インセプションデッキ、ミッション、ロードマップは愚直につくった。

良かったことは以下。

- 非エンジニアとの仕事がメインになったことで、非エンジニアでも分かる説明の訓練ができた。
- People Analytics、データエンジニアとしてのスキルと経験を得た
- 知見がある人とのつながりを得られた(勇気を出して声をかける事が重要)
- チームビルディングができた

# 所感

変化に挑戦することで、実はあまりリスクがなく、大きなリターンが得られたというメッセージが強く伝わりました。
今まで「勘と経験」に頼っていた領域を、どのどん定量的なデータを活用するように変化させていく事は、様々な点が必要になると思いました。
【devise】undefined local variable or method `resource_name'の解決策

###解決策　

```ruby:application_helper
def resource_name
   :user
end

def resource
   @resource ||= User.new
end

def devise_mapping
   @devise_mapping ||= Devise.mappings[:user]
end
```
こちらのコードをポイっと入れるだけです！
解決！
CarrierWave使用時はコールバックの設定位置に注意

Ruby on Railsをで画像をアップロードする際によく採用されるCarrierWaveを使っている際にコールバックの設定で詰まったことがあったので備忘録として残しておきます。

### 行ったこと
Imageモデルに対してafter_commitでsave時に追加で処理を設定しました。

```ruby
class Image < ApplicationRecord
  mount_uploader :image, ImageUploader
  after_save_commit :send_message

  def send_message
    ...
  end 
end
```


### 発生した問題
`store_dir`に画像が保存されず、`cache_dir`のデータのままデータが変わらなくなってしまいました。

```bash
# 保存前
uploads/tmp/hoge.jpg
# 保存後
uploads/images/hoge.jpg
```

after_commitを使用している例もあり、実装としてNGではなさそう。

https://stackoverflow.com/questions/39514286/carrierwave-returns-path-of-tmp-file-instead-of-actual-in-a-callback

### 対処法

調べてみると、CarrierWave側にもコールバックが色々設定されていました。

```ruby
after_save :"store_#{column}!"
before_save :"write_#{column}_identifier"
after_commit :"remove_#{column}!", :on => :destroy
after_commit :"mark_remove_#{column}_false", :on => :update
...
```
https://github.com/carrierwaveuploader/carrierwave/blob/6c1140bc4f7d8457573249e7f4bd9576cf1f44c5/lib/carrierwave/orm/activerecord.rb#L59

今回動いていないのは`after_save :"store_#{column}!"`のstoreの処理。モデルの書き方でコールバックが競合しているのかなと思い、`mount_uploader`の位置を変更してみたところ、無事解決しました。

```ruby
# 変更前
class Image < ApplicationRecord
  mount_uploader :image, ImageUploader
  after_save_commit :send_message
  ...
end

# 変更後
class Image < ApplicationRecord
  after_save_commit :send_message
  mount_uploader :image, ImageUploader
  ...
end

```

CarrierWaveの保存処理で不具合が生じた場合は参考にしてみてください。
テスト1

```
import openpyxl
from datetime import datetime as dt

'''
エクセルのシート名にテーブル名を設定
ヘッダ列にカラム名を設定
ファイル名は任意
'''


def calc(ex):
    if isinstance(ex, int):
        return str(ex)
    elif (ex is None) or (ex == ''):
        return "''"
    elif ex in func_str_list:
        return str(ex)
    else:
        return "'" + str(ex) + "'"


func_str_list = ['CURRENT_TIMESTAMP', 'NULL']
# TODO 適宜修正
file_path = 'input_xlsx_path'
output_path = 'output_sql_path'
wb = openpyxl.load_workbook(filename=file_path)
tablename = wb.sheetnames
sheet = wb[wb.sheetnames[0]]
sql_str1 = 'INSERT INTO '
with open(output_path, 'w') as f:
    for i, row in enumerate(sheet):
        if i == 0:
            values = [cell.value for cell in row]
            col_list = ', '.join(values)
        else:
            values = [calc(cell.value) for cell in row]
            val_list = ', '.join(values)
            sql = 'INSERT INTO ' + tablename[0] + ' ( ' + col_list + ' ) VALUES ( ' + val_list + ' );'
            f.write(sql)
            f.write('\n')
            print(sql)
    tdatetime = dt.now()
    tstr = tdatetime.strftime('%Y-%m-%d %H:%M:%S')
    f.write('-- 出力日時：' + tstr + '\n')

wb.close()

```
Application.persistentDataPathなどまとめる


Application.persistentDataPathで取得した先

win:
「C:/Users/xxxx/AppData/LocalLow/CompanyName/ProductName」

ユーザー名：ore
会社名：hoge
アプリ名:XRHoge
 => C:\Users\ore\AppData\LocalLow\hoge\XRHoge

# windows
Application.dataPath : /Assets
Application.streamingAssetsPath : /Assets/StreamingAssets
Application.persistentDataPath : C:/Users/xxxx/AppData/LocalLow/CompanyName/ProductName
Application.temporaryCachePath : C:/Users/xxxx/AppData/Local/Temp/CompanyName/ProductName


# Android
Application.dataPath : /data/app/xxx.xxx.xxx.apk
Application.streamingAssetsPath : jar:file:///data/app/xxx.xxx.xxx.apk/!/assets
Application.persistentDataPath : /data/data/xxx.xxx.xxx/files
Application.temporaryCachePath : /data/data/xxx.xxx.xxx/cache
Reactでページ遷移を制御する

## はじめに

ユーザーが何かしらのデータを入力をした状態で画面の遷移を制御したい場合がある。
「リンク、戻る、進む、リロード、ホームボタン、タブを閉じる」を押したときにユーザーに遷移して良いかアラートを出したい。

### 開発環境
- react-router v5.2.0

## リンクでの遷移、戻る、進む

リンクでの遷移や「戻る」「進む」ボタンでの制御は`react-router`の`Prompt`で制御できます。
`when`が`true`の時に実行されます。
messageが返す文字列はカスタム可能です。
特定のページに対しての遷移を制御することもできます。
react-router v6系だと`Prompt`は対応していない模様。

```jsx
import React, { useState } from 'react'
import { Prompt } from 'react-router'

const App = () => {
  const [bool, setBool] = useState(true)

  return (
    <div>
      ・・・略
      <Prompt
        when={!bool}
        message={(location) => {
          return location ? 'ページ遷移できません' : true
        }}
      />
    </div>
  )
}

export default App
```

## リロード、ホームボタン、タブを閉じる

「リロード、ホームボタン、タブを閉じる」は`onbeforeunload`で制御します。
こちらは最新のブラウザでカスタムメッセージは使えないようです。
カスタムフックを作って制御しています。


```jsx
import { useEffect } from 'react'

const useOnbeforeUnload = (bool) => {
  useEffect(() => {
    window.onbeforeunload = () => (bool ? null : true)
  }, [bool])
}

export default useOnbeforeUnload

```

## 追記

実装できたぜ！と思ったらiOSで死んでた。
`react-router`が制御するページ遷移と戻る進むは問題なかったけど、`beforeunload`が対応していなかった。

https://developer.mozilla.org/ja/docs/Web/API/Window/beforeunload_event

## 参考資料

https://v5.reactrouter.com/core/api/Prompt

https://dev.to/eons/detect-page-refresh-tab-close-and-route-change-with-react-router-v5-3pd
USBIPを利用してRaspberryPiからWindows10へのUSBデバイス共有

#USBIPとは
ネットワーク（IP）を経由してUSBデバイスを共有するソフトウェア（ライブラリ）です。


#サーバ側設定（RaspberryPi）
1、USBIPライブラリをインストール

```
sudo apt-get install usbip
```
2、モジュールロード

```
sudo modprobe usbip-core
sudo modprobe usbip-host
```
3、デーモンスタート

```
sudo usbipd -D
```
4、USBデバイスをリスト

```
usbip list -l
```

結果：

```
 - busid 1-1.1 (0424:ec00)
   Standard Microsystems Corp. : SMSC9512/9514 Fast Ethernet Adapter (0424:ec00)

 - busid 1-1.2 (045e:07b2)
   Microsoft Corp. : 2.4GHz Transceiver v8.0 used by mouse Wireless Desktop 900 (045e:07b2)

 - busid 1-1.4 (1c1f:c18a)
   Goldvish S.A. : unknown product (1c1f:c18a)
```
5、デバイスのバンド

```
usbip --debug --log bind --busid=1-1.4　　#(上記usbip list -lのID)
```

#[クライエント側設定（Windows10）](https://github.com/cezanne/usbip-win/wiki/Install-usbip-win-client)
1、ソフトウェアをダウンロード
[usbip-win](https://github.com/cezanne/usbip-win/releases)

2、`usbip_test.pfx`をインストール
　注意点二つ
 - "Trusted Root Certification Authority" in "Local Computer" (not current user) and
 - "Trusted Publishers" in "Local Computer" (not current user)
 
3、`test signing`を有効

```
bcdedit.exe /set TESTSIGNING ON
```
4、仮想デバイスをインストール
※.僕の場合`usbip.exe install`、`usbip.exe install -u`を使ってインストールはできますが、`attach`コマンドを実行する時はvhciドライバー見つからないというエラーが出ました。でも、`usbip.exe install -u`を使ってインストールするのは影響はあるかどうかはわかりません。

```
usbip.exe install -w
```

#使用方法
1、サーバ側共有しているデバイスを確認

```
usbip list -r <Server IP address>
```
2、デバイスをアタッチ

```
usbip attach -r <server IP address> -b <Device bus ID>
```

#リソース解放
1、アタッチしているデバイスをリスト

```
usbip port
```
2、デバイスをデタッチ

```
usbip detach -p <port>
```
3、サーバサイドのアンバンド

```
usbip unbind -b 1-1.4
```

参考リンク：
https://progsoft.net/ja/software/usb-over-network
https://github.com/cezanne/usbip-win/wiki/Install-usbip-win-client
https://developer.ridgerun.com/wiki/index.php?title=How_to_setup_and_use_USB/IP
https://forums.raspberrypi.com/viewtopic.php?t=107720
プログラミング１年生のPythonメモ①～エラーの種類～

#はじめに
:hatching_chick::hatching_chick::hatching_chick:
こんにちは。文系出身のシステムエンジニア1年生です。

Pythonの資格試験に向け勉強していたところ、
エラーに関する部分がなかなか面白かったので、忘れないようここに整理しておこうと思います。

#エラーには2種類ある
間違ったプログラムを動かそうすると発生する**エラー**。
これらは大きく2つの種類に分けることが出来ます。

一つは`そもそも動かない（動かすことが出来ない）もの`。

もう一つは`動くけれど途中で止まってしまうもの`です。

一般的に前者は**エラー（構文エラー）**、後者は**例外**と呼ばれます。

今回取り上げるのは前者の**エラー（構文エラー）**です。
こちらはPythonにおける文法上の間違いによって起きていることが多いので、
原因を特定しやすい ＝ 修正しやすいエラーであると言えます。

エラーメッセージというと、発生する度にどうしても怒られている感じがして苦手だったのですが、
よくよく調べてみると、かなり具体的に間違いを指摘してくれていたようです。

以下、その種類と原因について簡単にまとめてみました。


#エラーの種類と主な原因

###SyntaxError
**プログラムが文法的に間違っている**ときに出るエラー。
「文法が違うのでこの構文は無効だよ！」と怒られている。
記号の漏れなど、ちょっとしたミスが要因になっていることが多い。
▼ここをチェック！
 - カンマ(,)の記入漏れはないか？
 - クォーテーション(''や"")が片方欠けていないか？
 - カッコを閉じ忘れていないか？
 - 関数の中のコロン(:)が抜けていないか？


###NameError
**定義されていない変数が使われた**ときに出るエラー。
「そんな変数は定義されていないので知らない！」と怒られている。
▼ここをチェック！
 - 変数を定義し忘れていないか？
 - 間違った名前で定義していないか？(こちらの可能性の方が高いかも)


###ValueError
**型は正しいが、引数に間違った値を渡している**場合に起きるエラー。
「その値、なんか間違ってるよ！」と怒られている。
▼ここをチェック！
 - 関数に渡した値は適切か？
　例）float型(浮動小数点型)の引数にstring型(文字列型)の値を入れている


###TypeError
**型が間違っている**ときに出るエラー。
「型が違うのでそんな処理は出来ないよ！」と怒られている。
先ほどの**ValueError**との違いに注意。
▼ここをチェック！
 - 違う型同士の計算など、無茶な処理をしようとしていないか?
　例）1 + '2'　(int型＋string型)　→ 数字と文字列は足し算出来ない…


###IndexError
**リストの範囲外のインデックスを指定した**時に起こるエラー。
「リストの中にそんなインデックスはないよ！」と怒られている。
※インデックス‥‥リスト（配列）の中の要素が何番目かを指すもの
▼ここをチェック！
 - 正しいインデックスを指定しているか?
 （インデックスを数えるときは"0"から始まることに注意！）


###IndentationError
**インデントが間違っているとき**に出るエラー。
「空白の部分がなんかおかしいよ！」と怒られている。
先ほどの**IndexError**と字面が似ているので注意。
※インデント…プログラミングを記述するときの字下げ部分（空白）のこと
▼ここをチェック！
 - 余計な空白を入れてしまっていないか？
 - 他の行とインデントが一致していない箇所はないか？


###KeyError
**辞書型で登録していない値を指定した**ときに出るエラー。
「そんなKeyはないよ！」と怒られている。
▼ここをチェック！
 - 存在しないKeyを指定していないか？
 - スペルを間違えていないか？
>**☆メモ☆**　
辞書型は Keyが"："の左、Valueが右です。例）{ Key1：Value1 , Key2：Value2, … } 
『Key（鍵）を使って、Value（値）を取り出す』という順番で覚えておくと思い出しやすいです。
（たまに分からなくなりませんか…？）

###ModuleNotFoundError
**インポートされていないモジュールを使おうとする**と起きるエラー。
英文そのままの意味で「そんなモジュールは見つからないよ！」と怒られている。
▼ここをチェック！
 - モジュールのインポート文を書き忘れていないか？
 - モジュール名のスペルは正しいか？


###AttributeError
**オブジェクトにないメソッドや属性を使用する**と起きるエラー。
「そんなメソッド（属性）は存在しないよ！」と怒られている。
原因はさまざまだが、「AttributeError：…」に続く文章で何が違うのか指摘してくれることも多い。
▼ここをチェック！
 - メソッドのスペルは正しいか？
 - 自分でクラスやメソッドを作った場合、その中でミスが起きていないか？


#さいごに
今回は特によく起きるエラーについて簡単にまとめてみました。

出てくるとなんだか不安になるエラーメッセージですが、きちんとその原因やヒントを伝えてくれていたんですね。
もちろんコピペして検索にかけてしまうのも手ですが、
ある程度種類を覚えておくと、間違いを（怒りながら）教えてくれる心強い味方が出来るかもしれません。


次回はもう1種類のエラーである**「例外」**について取り上げてみたいと思います！
ありがとうございました！


:hatching_chick::hatching_chick::hatching_chick:
正規表現で大文字小文字を置き換える

# 概要

VSCodeの置換機能で正規表現を有効にしてコード内の大文字小文字を切り替える方法です。
大量に大文字小文字を切り替えしたい場合に重宝します。

ある程度実験が必要だったたため、他にも困る人がいそうなのでシェアします。

# 免責事項

もう少しオシャレな正規表現を書ける気がしますが、
趣旨は「`\l`と`\u`を使うと大文字小文字を切り替えられる。」
というところなので当記事の範囲外とします。

# 前提条件

CSS内のカラーコードを置き換える前提です。

# 大文字から小文字へ変換

```null:src
:\s#([\dA-F]+);
```

```null:dist
:\s#\l\l\l\l\l\l\l\l$1;
```

|before|after|
|:-:|:-:|
|`: #3e3;`|`: #3E3;`|
|`: #33aaff;`|`: #33AAFF;`|
|`: #ff22ffff;`|`: #FF22FF55;`|

# 小文字から大文字へ変換

```null:src
:\s#([\da-f]+);
```

```null:dist
:\s#\u\u\u\u\u\u\u\u$1;
```

|before|after|
|:-:|:-:|
|`: #3E3;`|`: #3e3;`|
|`: #33AAFF;`|`: #33aaff;`|
|`: #FF22FFFF;`|`: #ff22ff55;`|

# 参考

https://docs.microsoft.com/ja-jp/dotnet/standard/base-types/substitutions-in-regular-expressions

https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions

https://regexr.com/

# まとめ

ある程度複雑な正規表現を書けると、
変換用のスクリプトを書いたりしなくても、
サクッと大量の文字を書き換えられるので便利！

みなさんも、正規表現のチカラでステキなコーヒーブレイクを！

**Excelsior!**
【Xcode】 One of the two will be used. Which one is undefined.

僕自身一番最初の投稿になります。ご容赦願います。

flutter でアプリ制作している時にファイアベースを使いたく、Xcodeの更新をした時のこと。
###環境
コマンド　xcode-select -v
Xcode： xcode-select version 2392.

コマンド flutter --version
flutter：Flutter 2.10.1 
#起きたエラー
objc[50765]: Class AMSupportURLConnectionDelegate is implemented in both /usr/lib/libamsupport.dylib (0x1f5f8f678) and /Library/Apple/System/Library/PrivateFrameworks/MobileDevice.framework/Versions/A/MobileDevice (0x103a742c8). One of the two will be used. Which one is undefined.

というエラー文がターミナルで出てios simulatorがつかえなくなった。また、xcodeも開けなくなったのですが、結論

##解決方法

結局**MacAirを再起動**すれば治りました。

とりあえず再起動すれば治ってよかった？のですが
上記の起きたエラーの部分がなんなのかわからずじまいで困っております。
ご理解のあるかたでよければ拙者にエラーの詳しい内容と意味を
教えていただきたく思います。
SwiftLayout: UIView DSL library

https://github.com/ioskrew/SwiftLayout

普通にUIKitの基本APIを使ってヴューを作成するとき普段は下のような形になるのが大抵でしょ。
```swift
let body: UIView
let profileImage: UIView
let nameLabel: UILabel

body.addSubview(profileImage)
body.addSubview(nameLabel)

NSLayoutConstraint.active([
 profileImage.topAnchor.constraint(equalTo: body.topAnchor),
...
])
```

まあview 1つや2つ程度簡単なものは上のような基本のAPIを使ってもよろしいでしょう。でもたとえピューが10個ならどうですか。その上ビューの関係も複雑で後でビューの関係に入りファクトリーが必要オフになったら恐ろしい状態になりますね。ここでifやenumまでひつようなじょうきょうを目の前にそたら諦めてSwiftUIが欲しくなりまう。

ここでこのライブラリーをご紹介させていただきたいと思います。
SwiftLibraryは基本的にSwiftのresultBuilderとUIView, NSLayoutConstraintのAPIを組み合わせて下の形でUIView間の結合、 NSLayoutConstraintの作成、後、前の二つの管理の通合をもっと楽で見やすく作成出来ように手伝う宣言形ライブラリーです。 

```swift
body {
 profileImage.anchors { // body.addSubview(profileImage)
  Anchors(.leading, .top, .trailing) // add lots of anchors or layout constraint
 }
 nameLabel.anchors {
  Anchors(.top).equalTo(profileImage, attribute: .bottom)
  Anchors(.leading, .bottom, .trailing)
 }
}
```

確かに見やすくとなるんだと思いますが、他の方はどうでしょうか。
Unityの文字化けを解消する！

# 初めに

Unityで日頃開発していて、気になっていたけど
実害はなかったので気にしてなかったのだけど、
UnityとVisualStudioの組み合わせで起きてしまう文字化け
今回は、これを自分なりの解消法を書きたいと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37068/5597c77c-1433-fe44-b939-f869082fd43f.png)


## なぜ文字化けがおきるか？
UnityからC#のスクリプトファイルを作成するとUTF-8(BOM無し)になりますが、
VisualStudioはUTF-8(BOM付き)じゃないとコードページを解釈できずにShift-JISになってしまうようです。

### 調べてみました。

googleで検索してみると自分なりの最適解が見つかりました。

https://noracle.jp/unity_script_encode_issue/

上記の内容を見て自分の最適解は
.editorconfig 
を使う方法を取る事にしました。
理由は、上記のURLと同じ理由で
```
スクリプトに手を入れる度にチェックが走るのは余計ですし、
外部アセットなど元からエンコードが整っているものをインポートする際にも走ってしまいます。
大量のスクリプトを含むアセットのインポートでは無視できないコストになるかもしれませんし、
プロジェクトが膨らんでくるとインポート時間も長くなっていくので、予め省けるコストは省いておきたいですよね。
```
あと、元からある、スクリプトはどうするかの問題も、ZiiDetector と言うアプリを使うことで解決しました。


#### スクリプト
.editorconfigってファイルをUnityのプロジェクト以下に置いて
テキストエディタで開いて下記を書く
```
root = true
[*.{cs}]
charset = utf-8-bom
```

##### 最後に
文字コードの問題はたびたびでるけど、統一してくれないかな～～。。
【JavaScript】デフォルト引数について

JavaScriptにおけるデフォルト引数についてメモしておく。

# デフォルト引数
デフォルト引数は、仮引数に対応する引数が指定されない場合、デフォルトで代入される値を指定することができる。もしデフォルト値が指定されていない仮引数に値が渡さなかった場合、その引数は```undefined```になる。

## 基本的な書き方
デフォルト引数は、```<仮引数> = <デフォルト値>```で指定することができる。

```javascript
function sample (<仮引数> = <デフォルト値>, <仮引数> = <デフォルト値>,...){
    // 処理内容
}
```

## サンプル
処理を確認する簡単なサンプルを書いてみた。

```javascript
function sum(a, b = 5, c = 2) {
	return a + b + c;
}

console.log(sum());          // NaN
console.log(sum(2));         // 9
console.log(sum(2, 1));      // 5
console.log(sum(2, 1, 10));  // 13
```

また、デフォルト引数はその前の引数（仮引数の左側）を使って指定することもできる。

```javascript
function sample(a, b = a * 2) {
	return a + b;
}
console.log(sample(5));    // 15
```

ちなみに、今回は仮引数に対して指定された引数が少ない場合だったが、逆に多い場合は単純に引数が無視されて処理が行われる。

```javascript
console.log(sum(2, 1, 10, 3));  // 13
```
PythonでHTMLを表示、html形式でダウンロード(Google Colab)

# PythonでHTMLを表示、html形式でダウンロードしてブラウザで表示する

## 経緯
 - Google Colabで出力されるのはモノクロのテキストだけだと思っていた
 - ライブラリ`IPython.display`に`HTML`という関数があることを知る
 - ライブラリ`google.colab`の存在を知る


## 出来る事
 - Pythonを使ってhtml形式のテキストをcolab上でレンダリング
 - 作られたhtmlはテキストファイルとしてダウンロードできる
 
## 1. PythonでHTMLを表示

### 1-1. importする
```Python
from IPython.display import HTML
```

### 1-2. HTML関数による出力
```Python
HTML('Hello HTML in Python!')
```
> ![スクリーンショット 2022-02-18 13.03.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2515378/f03ac687-993b-d6fa-bc43-26ce15032767.png)

### 1-3. cssも使える
```Python
html = 'Hello <span style="color: red">HTML</span> in Python!'
HTML(html)
```
> ![スクリーンショット 2022-02-18 13.14.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2515378/43db7a43-6712-3e90-9cd7-2a36fb29be62.png)

### 1-4. htmlはPythonで自由に成形できる
```Python
html = """<style>
    * {
        font-family: Courier;
    }
    .marker {
        color: red;
        background: #ffff00;
    }
</style>

"""

for _ in range(3):
    html += """
    <p>ここ <span class='marker'>テスト</span> に出るよ！</p>
    """
HTML(html)
```

> ![スクリーンショット 2022-02-18 13.17.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2515378/50a87c91-d119-46a2-13f0-45bbbbe9040e.png)


# 2.  html文字列をファイルに出力、ダウンロードする

## 2-1. コードを実行

```Python
from google.colab import files

with open('index.html', 'w') as f:
  f.write(html)

files.download('index.html')
```

実行するとダウンロードが始まる

> ![スクリーンショット 2022-02-18 13.26.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2515378/d1b621b7-0e4e-fd08-f63c-777642b25c88.png)

名前をつけて保存

> ![スクリーンショット 2022-02-18 13.27.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2515378/be71fd57-3253-610f-f284-06e545b36d1e.png)

ブラウザ(図はChromeの場合)の左下にダウンロードされたファイルが表示される

> ![スクリーンショット 2022-02-18 13.27.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2515378/22be4e12-784d-b916-e1a9-cd9180b6b3a5.png)

クリックするとcolabで作ったhtmlファイルがブラウザで表示される

> ![スクリーンショット 2022-02-18 13.43.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2515378/d9db7c8b-5c9a-cc40-68ce-f3a858a62928.png)

## 3. まとめ

 - `IPython.display`の`HTML`関数は有用
 - ここでは取り上げなかったがjavascriptも動作確認済み(Colabの中で)
 - Pythonでデータ分析してHTMLと併用して可視化など、応用範囲は広いと見られる
javaScript67_prototype属性

hasOwnPropertyの使い方：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/b509168e-d18e-7c21-77d0-7be6870283d4.png)

prototypeオブジェクトもオブジェクトです。そのため、指向先のオブジェクトがあります。
属性あるいは方法にアクセスする時、下記の手順になります。
自分の中で探す、自分の中になければ、prototypeのオブジェクトで探す。prototypeオブジェクトの中にもなかれば、prototypeオブジェクトのオブジェクトで探す。
そちらもなければ、undefinedを返す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/44c36694-e6c4-584b-0824-f99edf34fc26.png)

コードで書くと、こんな感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/73d6e23a-91c2-edd3-467b-240f4c03438d.png)
オンプレのIBM iにPower BIを接続して データセットを自動更新設定をする

#はじめに
Power BIをオンプレのIBM i(旧称AS/400)にODBCで接続しています。データセットの更新をスケジュール設定し、自動更新設定が自分が考えていたのと異なっていたので、共有させてください。

#設定手順概要
1.IBM iのODBCドライバー設定
2.IBM iとPower BIをODBC接続
3.On-premises data gateway の導入
4.資格情報の設定
5.スケジューリング

詳細は[弊社ブログをご覧ください。](https://alpcom.co.jp/blog/20220218/?utm_source=Qiita&utm_medium=post&utm_campaign=yas&utm_id=20220218
)
iOS 15.4におけるSharePlayに関するアップデート（FaceTimeをアプリから開始など）

以前の記事で、FaceTime参加者間でのデータ共有に向けてiOSアプリ内でSharePlayを統合させることについての完全ガイドを紹介しました。

https://qiita.com/MaShunzhe/items/aeeef55c8d5d66ee63d9

この記事は次の事柄を取り上げます：
- アプリ（iOS 15.4以降）から直接FaceTime通話をかける
- シェアシート上のSharePlayオプション
- SharePlayセッションを終了または退室
- システムUIメッセージを伝える

## アプリ（iOS 15.4以降）から直接FaceTime通話をかける

iOS 15.4 (現在ベータ版の段階) では、グループFaceTime通話を始めたい場合にもし進行中のFaceTime通話が無ければ、ユーザーを招待して通話を開始することができます。

システムがFaceTime参加者の提案リストを提示してくれて、連絡先アプリから招待する人を選び出すことができます。

<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/954feaf0-a9f9-7b17-a833-ad8c699b5b1c.jpeg">

これは、`GroupActivitySharingController`ビューコントローラーを使用することによって達成されます。

```swift
if #available(iOS 15.4, *) {
    guard let sharingController = try? GroupActivitySharingController(GroupActivityDefinition()) else {
        return
    }
    self.present(sharingController, animated: true)
}
```

`GroupActivityDefinition`は、`GroupActivity`タイプに準拠した構造体であるグループアクティビティの定義となります。

SwiftUI内では、この拡張機能を使用して、現在アクティブなキーウィンドウを取得し、ビューコントローラーを提示することができます：

```swift
extension UIApplication {
    var keyWindow: UIWindow? {
        return UIApplication.shared.connectedScenes
            .filter { $0.activationState == .foregroundActive }
            .first(where: { $0 is UIWindowScene })
            .flatMap({ $0 as? UIWindowScene })?.windows
            .first(where: \.isKeyWindow)
    }
}
```

```swift
if #available(iOS 15.4, *) {
    Button {
        guard let sharingController = try? GroupActivitySharingController(GroupActivityDefinition()) else {
            return
        }
        UIApplication.shared.keyWindow?.rootViewController?.present(sharingController, animated: true)
    } label: {
        Label("Start a FaceTime call", systemImage: "video.badge.plus")
    }
}
```

## SharePlayオプションのある共有シート

iOS 15.4以降で、アプリがSharePlayに対応しており、かつ共有シートが提示されている場合、常にSharePlayオプションが表示されます。

共有しているアイテムにSharePlayが含まれていない（例えば、アプリをダウンロードするためのリンクを共有している）場合は、除外アイテムに`.sharePlay`オプションを追加することができます。

```swift
let shareSheet = UIActivityViewController(activityItems: [URL(string: "https://apple.com")!], applicationActivities: nil)
shareSheet.excludedActivityTypes = [.sharePlay]
UIApplication.shared.keyWindow?.rootViewController?.present(shareSheet, animated: true)
```

# SharePlayに関するその他の知識

## グループセッションを終了する、またはグループセッションから退出する

グループセッションから退出したいが、他のFaceTime参加者とのセッションをアクティブなままにしたい場合は、`leave()`機能を利用できます。

```swift
groupSession?.leave()
```

参加者が全員のアクティビティを終了したい場合は、`end()`機能を使用します。

```swift
groupSession?.end()
```

## 体験がフォアグラウンドになければならないことをシステムに通知する

アクティビティを続行するには、アプリがフォアグラウンドにある必要があることをシステムに伝えることができます。

```swift
groupSession.requestForegroundPresentation()
```

## UIメッセージを提示する

一部のイベントタイプに基づいてUIを提示するようシステムに要求することができます。メッセージは参加者の連絡先アバターとともに表示されます。

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635330/dca79e82-1dd1-8130-de4f-07f95a55c68a.png">

システムが提供するいくつかのオプション(`GroupSessionEvent.Action`)のみご利用頂けます。種類はこちらからご確認頂けます。
https://developer.apple.com/documentation/groupactivities/groupsessionevent/action-swift.struct

```swift
groupSession?.showNotice(.init(originator: originator, action: .play, url: nil))
```
aws-amplify-vueの認証画面の日本語化 

#概要

aws amplify + vue2 + auth でセットアップしたwebサービスの認証画面を日本語化するためにやったことまとめ。

#参考記事

基本はこれでした。感謝。

https://qiita.com/Akio-1978/items/213a352dbc98578d83aa

#スタート地点

こちらでセットアップしたところ、一部日本語になっていたので上記記事とは状況が違いました。

![2022-02-18_13h22_38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579071/a5b37c45-a722-bd66-69a7-9a46314705e9.png)

調べたところ、main.jsの同階層に日本語化用のlocalize.jsが用意され、日本語化が実現されているようでした。が、以下2つも何とかしたい。

* Forgot your password?
* SIGN IN

#やったこと

##Forgot your password? 

localize.jsのキーが'Forget your password? 'となっており、スペルが違ってたので揃えたら日本語化できました。

新）'Forgot your password? '
旧）'Forget your password? '

##SIGN IN

'Sign in'というキーは存在。いろいろ試してたところ、'Sign In'という新規項目を追加することで日本語化できました。

追加）'Sign In': 'サインイン',

#結果

![2022-02-18_13h35_40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579071/39d4b9cc-02cf-a77d-47c6-2d8423a22a76.png)

※このスクショは未登録ですか? あたりもいじってます

#まとめ

便利ですね。バージョンアップ等でキーがころころ変わらないことを祈ります。
検索記事カテゴリーを整理して記事保存を有機的にして新しい言語の学習効率をUPしたい


# 目的

実務に合わせて新しい言語を学び、キャッチアップするスキルはエンジニア必須なので

・サクッと調べたい(検索利便性)
・知っていることと結びつけたい(既存知識の再利用)
・まとまりの中で理解したい(情報の体系化)

を満たせる何かがあると便利だなと思いました。

Laravelの**にいいね＆ストックした記事**をベースに索引記事をつくってみたところ
他言語に応用したら便利そうなので、テンプレートつくリました。

https://qiita.com/House-lovers7/items/1381fc8183aa98c008b3

Qiita左画面FaceBookアイコンf下の**...**を選択、
**Maerkdownで本文を見る**で原文コピペきますので、
よろしければ**もくじ**より下を個人用に改良してみてください。

![スクリーンショット 2022-02-18 13.05.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/455521/cdd5bd8c-e848-a8bd-bc72-d1b979b7589c.png)


# もくじ


| |もくじ|  |
|:-------:|:----------:|:----------:|
|1|[**心得/マインド系**](#心得マインド系)|
|2|[**参考レファレンス**](#参考レファレンス系)|
|3|[**基本コマンド/メソッド系**](#基本コマンドやメソッド系)|
|4|[**初期設定/ライブラリ系**](#設計やアーキテクチャ系)|
|5|[**設計/アーキテクチャ系**](#心得マインド系)|
|6|[**ディレクトリ構成/命名規則**](#ディレクトリ構成や命名規則)|
|7|[**デバック系**](#デバック系)|
|8|[**ログ出力系**](#ログ出力系)|
|9|[**マイグレーション系**](#マイグレーション系)|
|10|[**テスト系**](#テスト系)|
|11|[**Docker系**](#コンテナ系)|
|12|[**キャッシュ系**](#キャッシュ系)|
|13|[**バリデーション系**](#バリデーション系)|
|14|[**　ミドルウェア系**](#ミドルウェア系)|
|15|[**よくある/遭遇したエラー系**](#よくあるや遭遇したエラー系)|
|16|[**日付処理**](#日付処理)|

# 心得マインド系


# 参考レファレンス系


# 基本コマンドやメソッド系


# 初期設定やライブラリ系


# 設計やアーキテクチャ系


# ディレクトリ構成や命名規則


# デバック系


# ログ出力系


# マイグレーション系


# テスト系



# コンテナ系


# API連携


# セキュリティ系


# キャッシュ系


# バリデーション系


# ミドルウェア系



# よくあるや遭遇したエラー系



# 日付処理


# まとめ