OmniAICreator/Qiita-1.07M huggingface dataset:
CrystalでGTK4を使うためのメモ

## はじめに

GUIアプリを作りたいって思いませんか？
UbuntuではGnomeが標準的な環境で、ここではGTKアプリが広く使われています。Crystal言語でもGTKアプリを使いたいそういう人のためのメモです。

## 良い資料

いきなりですが、素晴らしい資料のリンクです。

https://ultimate-gtk4-crystal-guide.geopjr.dev/

この資料を読みこなせれば、以下の文章は不要といっても過言ではないでしょう。

## GTK3か、GTK4か

現在主流なのはGTK3だと思いますが、今後はGTK4が主流になっていくと思われます。GTK3と、GTK4は互換性のない部分も少なくないようで、GTK3のコードはそのままではGTK4で動かないようです。Crystalでは、

https://github.com/jhass/crystal-gobject

を使います。GTK4では、

https://github.com/hugopl/gtk4.cr

を利用します。ライブラリの名称が大変わかりにくいことになっていますが、crystal-gobjectはなかなかGTK4に対応しないために、gtk4.crをはじめられたそうで、今後の動向はわかりませんが、現時点では crystal-gobject の開発をまつよりも、gtk4.crを利用するほうが良さそうです。

## GUI builder

GTK3ではGladeというGUIビルダーが利用されていました。このGUIビルダーは（私の環境が良くないのかも知れませんが）かなりバグがあるという印象で、しばらく使っているとなにかのタイミングで異常終了してしまうことが多かったです。このツールはC言語で実装されています。

https://gitlab.gnome.org/GNOME/glade

Crystal言語では、Gladeの変わりにCambalacheというツールを利用します。このツールはPythonで実装されており、Gladeよりもかなり安定しているようです。Pythonなのでコードを編集できる人も多く、Gladeよりも継続的なメンテナンスが期待できるかも知れません。

https://gitlab.gnome.org/jpu/cambalache

Pythonを利用するGUIツールはインストールが煩雑なことが予想されますが、[Flatpak](https://flatpak.org/)からのインストールが推奨されているようです。スクリプト系言語でGUIツールを作った場合は、Flatpakで配布するのがGTK4のベストプラクティスなのかも知れません。

cambalache の問題点として、Storeに関してまだまだ弱いという点があげられる。TreeStoreやListStoreなどを編集するとなかなかうまくいかない。それに、TreeViewを使おうとすると、Attributeを追加しなければならないようだ。だから、GTK4を利用しようとすると、実際にはXMLを手動でいじる必要性が出てくる。


## プロジェクトのはじめかた

shard.yml に gtk4.cr を追加します。
通常のshardsと異なるのは、gtk4はインストールしたあとに bin/gi-crystal を実行してやる必要があります。

## 基本原則

* 引数はキーワード引数で渡す
* enumは定数で表現する

## GUIビルダーとの接続

こんな感じにしてuiファイルを読み込む。少しだけ注意するべきなのは、Cambalacheは２段階のファイル生成になっていて、プロジェクト自体は、cmbという拡張子で保存される。これをXML形式に書き出す必要がある。

```crystal
builder = Gtk::Builder.new_from_file("#{__DIR__}/../data/tree.cmb.ui")
```

builderから要素を取り出すときは、 `[]` を利用するようだ。具体的には、

```crystal
label = Gtk::Label.cast(builder["label"])
```

こんな感じである。さらにシグナルに接続しようとするときは、

```
app.activate_signal.connect(->activate(Gtk::Application))
```

こんな感じで接続する。

## 翻訳には po ファイルと gettext が必要である

## GResourceはとても便利

Ruby/GTKではGResourceを使う機会はほとんどないと思う。しかしCrystalではGResourceはすごく便利である。これは実行ファイルにデータを直接添付することができる。Rubyの場合はGemファイル（ZIP圧縮）なので、GResourceを使うメリットはほとんどないと思う。

## アイコンの作成

アイコンはSVGファイルを用意する。これは、inkscapeなどで作成することが可能である。

## デスクトップ

ランチャー用のデスクトップファイルを用意する

## インストールはMakefileで

この慣習が本当にいいかわからないけれども、Crystal言語ではMakefileが使われている。
installコマンドなどを使用してインストール時のファイルの配置を直接記述する。

shards build は、`--release` を受け取ることができる。

## つづく

（この記事はもっといろいろ書こうかと思ったのですが、とりあえず上記のチュートリアルに対するググラビリティがあまりよくないと思うので、日本語話者でCrystalのGUIを作成したい人が、チュートリアル記事に到達しやすくするために未完成の状態で、公開にします。もっと勉強が進んでCrystalのGUI作成をかなり理解したら、細かいノウハウは別の記事で公開したいと思います〜）
【夏休み企画】#IT用語一問一答【最終日】NAS

# この記事を読むと、、
- 「関連用語」を使って「NAS」を説明できるようになる
- 「NAS」がもっと好きになる(多分)

# 関連用語
RAID / NFS / SMB/CIFS / DAS / SAN

[**復習用**] 記事の内容を見る前に上記の言葉で「NAS」を説明してみよう！

# 企画説明
- クラウドって何？って人に聞かれて説明してるけど俺もよく知らないや、、
- ドキュメント読んでみてるけど半分くらい何言ってるか分かんない、、
- 今日の夕飯はナスの炒めものにしよっかな〜、あれ、NASってなんだっけ？

みたいなことが結構あったので、知ったかしていたIT用語を毎日一個ずつちゃんと学んでいこうっていう企画です！

昨日の記事はこちら↓

https://qiita.com/acta/items/f915f409524d6b4a6044

# NASとは
NAS = Network Attached Storage = LANに接続して用いるファイル共有システム

#### 各種機能
- **RAID** = Redundant Array of Inexpensive Disks
    - 安価な補助記憶装置を複数接続して、以下の機能を提供する
        - ストライピング
        - ミラーリング
        - パリティ訂正符号による冗長化
- dm-cryptなどによるディスクの暗号/復号化
- ウイルススキャン

#### NASで用いられるファイルシステム
- ext4 = 4th extended file system
    - Linuxにおけるジャーナリングファイルシステムの一つ
        - cf. ジャーナリングファイルシステム = ファイルのメタデータをジャーナルに保存しておくことで、メタデータの破損を防ぐシステム
- btrfs = B-tree file system
    - ディレクトリ構造にB木を用いる
    - COW = Copy-On-Write = 実際に書き込まれるまで複製しない方式
        - 複製後に何も書き込まなかった場合のメモリの無駄をなくせる
    - CRC32Cによるチェックサム
- ZFS

#### NASで用いられるファイル共有プロトコル
- **NFS** = Network File System
    - 主にUNIXで用いられる
- **SMB/CIFS** = Server Message Block / Common Internet File System
    - 主にWindowsで用いられる
- AFP = Apple Filing Protocol
    - macOSなどで用いられる
- HTTP

#### NASに類似のストレージシステム
- **DAS** = Direct Attached Storage = サーバとストレージを1対1で接続する形態
    - 構成が簡単
- **SAN** = Storage Area Network = LANとは別のストレージ用のネットワークを構築する形態
    - ストレージの集中管理や高速で安定した通信が可能
    - 導入の難易度は高い

# 参考資料
- https://en.wikipedia.org/wiki/Network-attached_storage
- https://en.wikipedia.org/wiki/Dm-crypt
- https://en.wikipedia.org/wiki/Ext4
- https://en.wikipedia.org/wiki/Journaling_file_system
- https://en.wikipedia.org/wiki/Btrfs
- https://www.fujitsu.com/jp/products/computing/storage/lib-f/tech/beginner/san-nas-das/
Tippecanoe で  ベクトルタイルを作るコツ 



# はじめに
この記事は、ウェブ地図の関係のうち、ベクトルタイル作成に関するメモです。

UN Vector Tile Toolkit は、ベクトルタイルに関する作業のいろいろなステップをサポートしています。今日はデータ変換、Produceについて書いてみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/252c0644-b9f4-af9f-55fd-3d334167597f.png)
（図 Furuhashi Lab. 一部改）

最近、わたしもいくつかのパターンでのデータ変換をやったり見たりする機会があったので、自分なりに感じたUNVTにおける ベクトルタイル作成のポイントを書いてみたいと思います。UNVTに学ぶ、Tippecanoeでのデータ変換のコツ、といったところです。（Tippecanoeはmapboxさんが開発したツールです。）


# ポイント

## 1. ソースデータを GeoJSON sequenceとして読んでくる

まずはソースデータを読んでくる段階です。いずれもコマンドラインで操作できるツールを使ってGeoJSON sequenceとして読み出すことが第一歩です。
* PostgreSQL/PostGIS は nodejs の pg モジュールで GeoJSON sequence を読み出す　ことができる。データサイズが小さければgdal（ogr2ogr）でも大丈夫。
* Esri shapefile、Esri Geodatabase、などは、ogr2ogr を使えば、 GeoJSON sequence を読み出す　ことができる。
* OpenStreetMapのデータ（osm.pbf）は osmiumのexport で出力できる。

ソースデータが大きい場合、この読み出しの段階で範囲を区切って複数の処理にしたりします。この場合は、ベクトルタイルの区画などを使うと効率的です（後で重複を考えなくてよいから）。

## 2. 出力したGeoJSON sequence を加工する（効率的なベクトルタイル構造のため）
だいたいnodejsでフィルターをしていますが、ソースデータから出てきたGeoJSON sequenceを整形します。nodejs の json-text-sequenceモジュールなどを使うケースが多いです。

このフィルターが効果的なベクトルタイル作成のための重要な部分です。フィルターを作る前にソースデータとベクトルデータの構造をよく考えることが大事です。

* Tippecanoe用の属性を与える
    * ベクトルタイルのレイヤ名
    * 最大ズームと最小ズーム
* 元データの属性に応じたデータの加工、取捨選択
    * 元データの属性によって、レイヤ名を変えたり、最大・最小ズームを変えたり、場合によってはnullを返したする。
    * 不必要な属性を削除する。必要な属性を追加する。
など



## 3. データの受け渡しを工夫する
出力　→　フィルター　→　変換　と段階が進みますが、この時にファイルとして保存すると時間がかかってしまいます。
ですので、読んだデータの受け渡しは、シェルスクリプトのパイプ（|）を使うことが多いですが、元データのサイズが大きくなるとnodejsの非同期処理spawnを使うこともあります。（ソースデータがもっと大きくなるとqueueなどを工夫して、小さくしたブロックをパラレルに処理していくというようなこともできます。）


## 4. 最後は Tippecanoe で変換
整形された GeoJSON Sequence を Tippecanoe に渡すことでベクトルタイルができます。Tippecanoe は Windows では動きにくいので、windowsのユーザーはDockerで疑似Linux環境を作ったり、ラズベリーパイで変換する。
* mbtiles形式に出力して、必要な場合はtile-joinでpbfファイルにするのが効率的。（mbtiles形式の方が一般的にサイズが小さい）
* pbfに出力する場合は圧縮しない。また、--no-size-limit をつけておくとよい。


# まとめ
ということで、今回はUNVTの手法に学び、Tippecanoeを使ったベクトルタイル変換のコツをまとめてみました。（ほかにもコツがあるかもしれません。）

ここでの知見はUN Open GIS Initiativeに参加して得たものを含みます。

# 参考
* 参考になる記事やレポジトリ
    * IT dashboard の行政界データをベクトルタイルにした(hfu, 2019)　https://qiita.com/hfu/items/35e6dc67d55f3bcec181
    * unvt/naru https://github.com/unvt/naru
    * data conversion from esri Geodatabase https://qiita.com/T-ubu/items/2dedbf45df9dcaeead33
* ツール関係
    * Tippecanoe https://github.com/mapbox/tippecanoe
    * npm pg https://www.npmjs.com/package/pg
    * gdal https://gdal.org/
【Rails】Webサイトの表示

## はじめに

RailsがWebサイトをどう表示しているかについて学習した内容をまとめました。

## urlのリクエストで実行するコントローラーを指定

```config/routes.rb
Rails.application.routes.draw do
    get '/' => 'home#index'
end
```

urlに‘/’のリクエストが来たらcontrollersのhomeにあるindexメソッドを実行

## ②表示するビューを指定

```controllers/home_controller.rb
class HomeController < ApplicationController
  def index
		render 'home/index'
  end
end
```

viewsのindexファイルをrender(表示する)させる

## ③ビューに記述されたHTMLを表示

```views/home/index.html.erb
<h1>HOME</h1>
```
WordPressにStripeのカスタマーポータルを導入した時の話


会員管理プラグイン『<a id="https://ja.wordpress.org/plugins/simple-membership/">Simple Membership</a>』を使用しているサイトにStripeのカスタマーポータルの導入した話

# 目次
<!-- タイトルとアンカー名を編集 -->
1. [https://example.com/customer-portal/ という固定ページを作成する ](#Chapter1)
1. [Customer Id の取得](#Chapter2)
1. [ボタンの設置](#Chapter3)
1. [諸注意](#Chapter4)
1. [終わりに](#Chapter5)

<a id="#reference"></a>
# 参考文献
- [Stripe Documentation](https://stripe.com/docs/api/customer_portal/sessions/create)

<!-- 各チャプター -->
<a id="#Chapter1"></a>
# https://example.com/customer-portal/ という固定ページを作成する 
WPの管理画面から固定ページを作成してください。


<a id="#Chapter2"></a>
# Customer Idの取得
Subscription Id から取得する方法とメールアドレスから取得する方法等がありますが、
<b>WordPressにメールアドレスが複数登録されていなくても、Stripeにはメールアドレスが複数登録されている場合があります。そのため、Subscription Idから取得するのが一般的です。</b>

<h3>$stripe の定義</h3>

```page-customer-portal/.php
$stripe = new \Stripe\StripeClient(
    'sk_live_****************'
);
```


<h3>Subscription Idから取得する</h3>

```page-customer-portal.php
//ログインユーザーのIDを取得してsubscriptionIDからCustomerIdを取得する
$member_id       = SwpmMemberUtils::get_logged_in_members_id();
$subscr_id       = SwpmMemberUtils::get_member_field_by_id( $member_id, 'subscr_id' );
$useSubscription = $stripe->subscriptions->retrieve($subscr_id);
$customer_id     = $useSubscription['customer'];
```
:::note warn
<h3>補足</h3>
メールアドレスから取得する場合


```page-customer-portal.php
$customers   = $stripe->customers->all(['email' => $user->user_email]);
$customer    = $customers->first();
$customer_id = $customer->id;
```
:::



取得したCustomer Id から、カスタマーポータルのURLを発行する。
```page-customer-portal.php
$session = $stripe->billingPortal->sessions->create([
    'customer'   => $customer_id,
    'return_url' => home_URL(),
]);
```
取得した $Session から、カスタマーポータルのURLへリダイレクトする。
```page-customer-portal.php
header("Location: " . $session->url);
```


<a id="#Chapter3"></a>
# ボタンの設置

好きなページ (*ログインしていないと見れないページにした方が良いです。)
に『カード情報の更新はこちら』のようなボタンを設置し、
リンク先を https://example.com/customer-portal/ に設定する

これでカスタマーポータルのページに自動的に遷移されるようになります。

<a id="#Chapter4"></a>
# 諸注意
・Stripeの導入方法等は省いております。

・カスタマーポータルのURLが取得できなかった場合用のページを設定するのがおすすめです。
「
お客様は本ページからクレジットカードの変更はできません。
誠に恐れ入りますが、一度お問い合わせをお願いいたします。
」等


1, Subscription Idで取得した場合に正しいカスタマーポータルのURLが取得できない場合は、会員期限が切れていてもログインできる場合などで発生しうる可能性が考えられます。(または、データの整合性が一致していない場合等)
2, メールアドレスで取得した場合は、正しいカスタマーポータルのURLが取得できない場合があります。 (メールアドレスの重複登録等)

<a id="#Chapter5"></a>
# 終わりに
先月、カスタマーポータルがノーコードで実装できるようになりました。
衝撃でした。。。。

しかし、メール認証等が発生するため、
既に会員サイト等を運用されている方のために、
今回公開することにしてみました。

多くの人のお役に立てることを願っております。
TypeScriptのジェネリクスは共変なので気をつけて使おう

コードを読めばクラスのジェネリクスは安心できないぜということがわかります。（念の為申し上げますが、ジェネリクスの使用を控えてと言っているわけではありません。ジェネリクスを使ってるクラスで型パラメータが違う場合は気をつけるべしということです。筆者は型パズルが好きです。）
JavaのジェネリクスとTypeScriptのジェネリクスは仕様が違います。
Javaのジェネリクスは不変。TypeScriptのクラスのジェネリクスは共変です。インターフェースに関してはTypeScriptは個々のフィールドか代入可能かどうかちゃんと判断してるっぽいです。そのうちコード追加できたらやります。

```typescript
// ただのスーパークラス
class SuperClass{
  public name: string = "super"
}
// サブクラスその1
class SubClass1 extends SuperClass{
  public email = "bar";
}
// サブクラスその２
class SubClass2 extends SuperClass{
  public address = "baz";
}
// ジェネリクスを使った配列のラッパークラスのようなもの
// 今回の主役
class List<T>{
  public array: T[] = [];

  public push(item: T) {
    this.array.push(item);
  }

  public get(index: number) {
    return this.array[index];
  }
}

// Listをインスタンス化
let sub1List = new List<SubClass1>();
let superList = new List<SuperClass>();
// superListにsub1Listの参照を渡す(TypeScriptのジェネリクスは共変なので可能)
superList = sub1List;
// SubClass2はSuperClassのサブクラスなので以下のコードはコンパイルエラーにならないが、、、
// 実際はsuperListはsub1Listを参照しているのでsub1ListにSubClass2のインスタンスが追加されている
superList.push(new SubClass2());
// itemの方はSubClass1と判定されているが実際はSubClass2である。
const item: SubClass1 = sub1List.get(0);
// したがって、したのコードの出力は
// undefined baz
// となる。
console.log(item.email,(item as SuperClass as  SubClass2).address)
```
テキストエディタを使ってWeb画面から雑にコピーした残念リストをシンプルきれいなリストにする

# はじめに
何らかのWebサイト上のコンテンツ一覧みたいなものを雑にコピペするとこんな感じになることってありませんか？
```
1.はじめに
1分
再生

2.こんな設定をする
24分
再生

3.設定を確認する
12分
再生

4.おわりに
3分
再生

模擬テスト①

模擬テスト②

```
私の場合、受講中の[Udemy](https://www.udemy.com/)講座の全容をざっと確認したいときに、`コースの内容`からタイトルだけをさくっと取得したいな～と思いコピーしたところ、上記な感じになって白目になりました。
Webサイトから雑にコピーすると案外あるあるではと思っています。

前述の残念テキストから、下記のようなシンプルきれいなリストをさくっと作りたい。
```
1.はじめに
2.こんな設定をする
3.設定を確認する
4.おわりに
模擬テスト①
模擬テスト②
```
そんな願望を、**テキストエディタ（今回はサクラエディタ）の置換機能と正規表現を使って**さくっと実現する自分的チートシートを記載します。

# 実行環境＆ツール
- Windows10
- サクラエディタ v2.4.1.2849 32bit (tag v2.4.1)
試していませんが、これ以外のテキストエディタでも可能だと思います

# 手順
## 基本の流れ
- `Ctrl + R`またはツールバーの`検索 > 置換`から置換ダイアログを起動
- `正規表現`チェックボックスにチェックを入れる
- 後述する`置換前` `置換後`をそれぞれの入力欄に入力
- すべて置換（置換失敗してもCtrl+Zでやり直せるのでとりあえずまとめてやってしまう）

## 1. 「再生」だけを含む行を一括削除
置換前：`^再生\r\n`
置換後：（何も入力しない）

## 2. 「○○分」だけを含む行を一括削除
置換前：`^[0-9]+分\r\n`
置換後：（何も入力しない）

## 3. 空行を一括削除
置換前：`^[\r\n]+`
置換後：（何も入力しない）

## （おまけ）「00:00」形式の時間だけを含む行を一括削除
今回の例だと出てきていませんが、時間数を`00:00`形式で記載していることも間々あります。そんなときに有効な正規表現です。

置換前：`^[0-9]{2}\:[0-9]{2}\r\n`
置換後：（何も入力しない）

### 解説
- `[0-9]{2}`で`2桁`の数字を指定できます

## （おまけ）数字とセクション名を`.`ではなくタブで区切りに変更
たとえばスプレッドシートに貼り付ける際、ナンバリングしやすくするために`.`区切りではなくタブ区切りにしたいこと、ありますよね。そんな時に有効です。

置換前：`^([0-9]{1,})(.)`
置換後：`$1\t`

### 解説
- カッコでくくると検索文字列をグルーピングできます
- `[0-9]{1,}`で1桁以上の数字を指定できます
- 置換後の`$1`：`$n(nは1以上の整数)`がカッコでグルーピングした文字列を参照できる。$1はカッコでグルーピングした文字列のうち、1つ目のグループを意味します

# おわりに
こういう地味な作業、1つ1つ調べればやり方は見つかる便利な時代ですが、暗記するほど利用頻度も高くなく、意外と毎回調べていて毎回時間がかかるものだと思います。
この記事に書かれているものがばちっとハマる方は少ないかもしれないですが、こういった自分的チートシートを作っておくと作業効率アップになるかなとも思います。

なお、正規表現さんとは顔見知り程度の関係なので、ご指摘等大歓迎です。よろしくお願いいたします。

# 参考記事
- [利用可能な正規表現 ※サクラエディタ公式ヘルプ](https://sakura-editor.github.io/help/HLP000089.html)
- [秀丸で数字だけの行を削除したい](https://oshiete.goo.ne.jp/qa/2964081.html)
- [【サクラエディタ】空白行の削除、特定文字を含む行の削除＜正規表現＞](https://webzarashi.hatenablog.com/entry/sakura-regexp-8-linedelete)
- [[サクラエディタ] 空行を削除する](https://pasomaki.com/sakuraeditor-blankline-delete/)
【Athena】SQLで平日をカウントする

Athenaを使ってデータ集計をバッチ処理しているのですが、土日の扱いに困るときがあります。

平日しか稼働させないような日次のバッチ処理の場合、月曜の処理では直前の金曜まで取得したいが、火曜～金曜は前日まで取得できれば良い、という状況です。（こういう状況はあまりないかもしれませんが）

素直に、月曜用のクエリと火曜～金曜用のクエリを分ける・Lambdaなどで動的にクエリを書き換える、といった方法もあると思いますが、管理するリソースをなるべく減らしたいという思いで汎用的なクエリが書けないかと思った次第です。

このような期間指定の課題をAthena（SQL）でどうするかを備忘を兼ねて書きます。

### 前提
以下のようなデータがあるとします。

テーブル名：sample
|timestamp|item|
|---|---|
|2022-09-27 19:39:00|A|
|2022-09-27 19:40:00|B|
|2022-09-28 20:40:00|C|
|…|…|

このようなデータに対して、クエリを実行する当日から、直前の平日までの期間のデータを取得することが目標です。

### クエリの方針

* 日時を表すデータをtimestamp型として扱う
* timestamp型のデータから日付を抽出する
* 日付から曜日を抽出する
* 曜日を、平日=1、土日=0と置き換える
* window関数を使い、現在日付から何日目の平日かを集計する

### 実際のクエリ

まずは上記のsampleテーブルを読み込みます。
ここで、`day`としてtimestampから日付を抽出します。
```sql
with input as (
    select
        timestamp
        , date(cast(timestamp as timestamp)) as day
        , item
    from sample
),
```

次に、日付を曜日に変換します。
`day_of_week`関数は、日付を月曜=1～日曜=7として曜日に変換してくれます。
つまり、`day_of_week`が1~5の場合は平日になるので、後段での集計のために平日を1、土日を0に変換します。
```sql
weekdays as (
    select distinct
        day
        , if(day_of_week(day) < 6, 1, 0) as weekday
    from input
),
```
この`weekdays`という句は、日付のマスタ的な位置づけとして、後段のクエリで`input`句とjoinするために利用します。

ここまでで、平日を1、土日を0とできたので、あとはカウントするだけです。
今回は集計当日からそれぞれの日までの平日の数を数えたいので、window関数を利用します。
```sql
valid_day_count as (
    select
        day
        -- 集計当日からその日までの平日の数
        , sum(weekday) over(
            order by day desc
            rows between unbounded preceding and current row
        ) as valid_day
    from weekdays
),
```
window関数は見慣れないと圧倒されてしまいますが、上記のクエリの場合over()の中で指定した条件に応じでsum()を実行する、という気持ちです。

ここでは
`order by dey desc`で日付の降順に並べたデータを、`rows between unbound preceding and current row`でその行から一番上の行まで（つまり当日まで）を範囲として、その範囲のweekdayの値を`sum()`するという形です。

weekdayの値は、平日=1、土日=0としているので、`valid_day`には集計当日からその日までのあいだの平日の日数が入ります。

ここまできたら、元のデータ`input`に対して`valid_day_count`をjoinしてあげます。

```sql
aggregation as (
  select i.*, v.valid_day
  from input as i
    left join valid_day_count as v
      on i.day = v.day
),
```

こうすることで、`valid_day`に対して平日のカウント数が設定されているので、必要な平日数を指定すれば土日を考慮した期間のデータを抽出できます。

```sql
select *
from aggregation
where
    valid_day <= 2
```

クエリをまとめると以下の通りです。

```sql
with input as (
    select
        timestamp
        , date(cast(timestamp as timestamp)) as day
        , item
    from sample
),
weekdays as (
    select distinct
        day
        , if(day_of_week(day) < 6, 1, 0) as weekday
    from input
),
valid_day_count as (
    select
        day
        -- 集計当日からその日までの平日の数
        , sum(weekday) over(
            order by day desc
            rows between unbounded preceding and current row
        ) as valid_day
    from weekdays
),
aggregation as (
  select
    i.*
    , v.valid_day
  from input as i
    left join valid_day_count as v
      on i.day = v.day
)
select *
from aggregation
where
    valid_day <= 2
```
北朝鮮のIT用語


一体誰向けなんだという感じですが、朝鮮民主主義人民共和国で使われてるIT用語をまとめようと思います。
日本語だとカタカナ語になってる語も漢字語になったりするので面白い。
もし間違いがあればコメントお願いします。

| 日本語 | 朝鮮語 | 直訳 |
|:-:|:-:|:-:|
| キーボード | 건반 | 鍵盤 |
| マウス | 마우스 | マウス |
| パソコン | 개인용콤퓨터 | 個人用コンピューター |
| ディスプレイ | 표시장치 | 表示装置 |
| 携帯電話 | 손전화기 | 手電話機 |
| スマホ | 지능형손전화기 | 知能型手電話機 |
| ケーブル | 케블 | ケーブル |
| CD | 압축원판 | 圧縮円板 |
| メモリー | 기억기 | 記憶機 |
| ブラウザ | 열람기 | 閲覧機 |
| インストール | 설치 | 設置 |
| インストーラー | 설치기 | 設置機 |
| インターネット | 인터네트 | インターネット |
| OS | 조작체계 | 操作体系 |
| システム | 체계 | 体系 |
| サイト | 싸이트 | サイト |
| メールアドレス | 우편주소 | 郵便住所 |
| ユーザーインターフェース(UI) | 사용자대면부 | 使用者対面部 |
| グラフィカルユーザインタフェース(GUI) | 도형방식사용자대면부 | 図形方式使用者対面部 |
| キャラクタユーザインタフェース(CUI) | 문자방식사용자대면부 | 文字方式使用者対面部 |
| ネットワーク | 망 | 網 |
| LAN | 국부망 | 局部網 |
| WAN | 광역망 | 広域網 |
| VPN | 가상개별망 | 仮想個別網 |
| サーバー | 봉사기 | 奉仕機 |
| クライアント | 의뢰기 | 依頼機 |
| ウイルス対策ソフト | 반비루스쏘프트웨어 | 反ウイルスソフトウェア |
| 無限ループ | 무한순환 | 無限循環 |
| プログラム | 프로그람 | プログラム |
| ソースコード | 원천코드 | 源泉コード |
| ライブラリ | 서고 | 書庫 |
| 関数 | 함수 | 関数 |
| メソッド | 메쏘드 | メソッド |
| 引数 | 인수 | 引数 |
| キュー | 대기렬 | 待機列 |
| クラス | 클라스 | クラス |
| インスタンス | 사례 | 事例 |
| コンパイラ | 번역기 | 翻訳機 |
| オブジェクト指向プログラミング | 객체지향프로그람작성 | 客体指向プログラム作成 |
| マークアップ言語 | 표식언어 | 標識言語 |
| スクリプト言語 | 대본언어 | 台本言語 |
| インタプリタ | 해석기 | 解析機 |
| グローバル変数 | 전역변수 | 全域変数 |
| ローカル変数 | 국부변수 | 局部変数 |
| 変数 | 변수 | 変数 |
| リスト | 목록 | 目録 |
| データベース | 자료기지 | 資料基地 |
| SQL | 관계형자료기지관리체계조작언어 | 関係型資料基地管理体系操作言語 |
| コミット | 단위업무처리완료 | 単位業務処理完了 |
| パス | 경로 | 経路 |
| パスワード | 통과암호 | 通過暗号 |
| IPアドレス | IP주소 | IP住所 |
| ディレクトリ | 등록부 | 登録簿 |
M1 Macでzsh: command not foundに遭遇した場合の解決法

M1 Macでnpmのパッケージ追加時に`zsh: command not found`に遭遇してパッケージが使用できない場合の解決法を投稿させていただきます。私も何度かこの問題に遭遇しているので参考になれば幸いです。

1. global用にディレクトリを作成: ```mkdir ~/.npm-global```
1. npm用のパスを1.で作成したディレクトリに設定: ```npm config set prefix '~/.npm-global'```
1. ```.profile```に以下を追加: ```export PATH=~/.npm-global/bin:$PATH```
1. システム変数を更新: ```source ~/.profile```

パッケージを一度アンインストールしてから再インストールしたところパッケージが使用できるようになりました。

参考記事 

http://npm.github.io/installation-setup-docs/installing/a-note-on-permissions.html
【PHP】元のDateTimeオブジェクトを変更せずに日付のmodifyを行いたい

## 概要
PHPの日付で計算した後の値取得を行うとなると、DateTimeのオブジェクトを作成した後に`modify`関数を呼ぶ方法が挙げられます。[[PHP] 日時の加算・減算をする（modify）](https://php.programmer-reference.com/php-datetime-modify/)の記事に、実装例があります。
ただ、注意点としてDateTimeのmodifyは破壊的なメソッドなので、modifyを呼び出した後に元のオブジェクトの値も変わってしまいます。元のDateTimeオブジェクトを変更せずに日付のmodifyを行いたい場合どうするか、というのを今回メモ書きします。

## 対応方針
modify後は新しいオブジェクトを使用したい場合、元のオブジェクトに変更を加えない`DateTimeImmutable`クラスが用意されているので、これを使えばやりたいことができそうです。DateTimeImmutableの概要については[【PHP】DateTimeクラス・DateTimeImmutableクラスのオブジェクトの違い](https://blog-and-destroy.com/17424)の記事を参照ください。
では、DateTimeからDateTimeImmutableを作成したい場合どうするか。[DateTimeImmutable::createFromMutable](https://www.php.net/manual/ja/datetimeimmutable.createfrommutable.php)のドキュメントにある通り、DateTimeImmutableにはDateTimeから新しいオブジェクトを作成する`createFromMutable`メソッドが用意されているので、これを使えばよさそうです。

## 実装サンプル
以下は、DateTimeのオブジェクトを受け取って、1日後の新しいDateTimeImmutableオブジェクトを返す実装のサンプルです。

```php
use \DateTimeImmutable;

public function getPlusOneDayImmutableDateTime($dateTime) {
    return DateTimeImmutable::createFromMutable($dateTime)->modify('+1 day');
}
```
AlphaFold予測構造についてのpLDDTカラーリングコマンド

AlphaFold Databaseで使われている予測構造の自信度ことpLDDT値に応じたカラーリングスキームをPyMOLやUCSF Chimera, Chimera Xなどで再現したいということはよくあると思いますので、それを載せておきます。

## お手本

https://alphafold.ebi.ac.uk/entry/A0A452S449

こちらのカラーリングスキームを再現します。

![Screenshot 2022-10-05 0.02.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224327/da15a9ee-8157-0d2b-1c6b-ddc2f0734833.png)


## PyMOL

```python
color 0x0053D6, b < 100
color 0x65CBF3, b < 90
color 0xFFDB13, b < 70
color 0xFF7D45, b < 50
# 原子ごとの色分け
util.cnc
```

![Screenshot 2022-10-05 0.05.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224327/4433e183-9f4d-09f8-6de2-0d35f0242063.png)

オブジェクトごとにしたい場合は`color 0x0053D6, AF-A0A452S449-F1-model_v3 and b < 100`のように、オブジェクト名を`b < `の前に挟んでおきましょう。

```python
color 0x0053D6, (object_name) and b < 100
color 0x65CBF3, (object_name) and b < 90
color 0xFFDB13, (object_name) and b < 70
color 0xFF7D45, (object_name) and b < 50
```

（参考）`spectrum b, red_yellow_green_cyan_blue, minimum=50, maximum=90`を使う方法もあり、これは値に応じてグラデーションになるので値の大小関係が明確になりますが、あまり差はないかもしれません。

![Screenshot 2022-10-05 0.07.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224327/5546e61b-606d-64c7-aa3c-e9dca0821f3a.png)


## UCSF Chimera

上部メニューのFavoritesからCommand Lineを選択することで画面下部にコマンド入力欄が現れるので、そこに以下のコマンドを入力します。

```
color #0053D6 @/bfactor<100
color #65CBF3 @/bfactor<90
color #FFDB13 @/bfactor<70
color #FF7D45 @/bfactor<50
```

![Screenshot 2022-10-05 0.14.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224327/d45f2839-3c9a-5133-5ba0-4a051c2ee537.png)

## UCSF ChimeraX

文法がChimeraから変わっている。

```
color @@bfactor<100 #0053D6
color @@bfactor<90 #65CBF3
color @@bfactor<70 #FFDB13
color @@bfactor<50 #FF7D45
```

![Screenshot 2022-10-05 0.12.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224327/e04b896a-b74a-65c1-1f0f-aca4bc8c7233.png)
ファイルシステム操作コマンド

●ファイルシステムのチェックを行うコマンド
ファイルシステム　コマンド
・ext4 fsck.ext4、e2fsck
・xfs fsck.xfs、xfs_check
・btrfs fsck.btrfs

fsck.ext4 [オプション] デバイス
e2fsck [オプション]　デバイス

オプション
・-b 指定のスーパーブロックを使い復元を行う
・-c 不良ブロックのチェックをおこなう
・-p 自動的に不良ブロックを修復する

●xfs_check
xfsのチェックをおこなう

xfs_check [オプション]　デバイス

●fsck -t 種類　[オプション]　デバイス
fsck.{種類}を呼び出し統一的に使うことができるコマンド


※ファイルシステムの検査・修復の最中に対象ファイルシステムに書き込みが行われると、ファイルシステムの整合性が取れなくなり状態が悪化してしまう可能性があるので、これらの作業が競合しないように注意する。

●ファイルシステムの検査・修復中に対象ファイルシステムに書き込みが行われないようにするには

・アンマウントしておく
・マウント時に ro マウントオプションを指定し、読み込み専用としてマウントしておく
　※起動プロセスにおいて、最初にルートファイルシステムを読み込み専用でマウントしてチェックした後に、読み書きできるように再マウントするのは、このため。
・「/etc/fstab」で対象ファイルシステムの fsck フラグが 1 以上になっていることを確認の上、shutdown コマンドに -F オプションを指定し、起動時に強制的にチェックを行わせるようにする

●ファイルシステムを作る mkfs 系コマンド、ファイルシステムをチェックする fsck 系コマンドの他にも、多くのユーティリティコマンドが存在。
以下の表のコマンドはすべて、作成済みのファイルシステム（デバイス）を引数に取って動作

コマンド
・tune2fs ext2,ext3,ext4の設定を行う
・e2label ext2,ext3,ext4のラベルを操作
・dumpe2fs ext2,ext3,ext4の詳細を表示
・dump ext2,ext3,ext4をバックアップする
・restore dumpで作成したバックアップから復元する

・xfs_admin xfsの設定を行う
・xfs_info ｘｆｓの情報を表示する
・xfs_check xfsをチェックする
・xfs_repair xfsを検査、修復する
・xfsdump xfsをバックアップする
・xfsrestore バックアップあｋらxfsを復元する

●tune2fs

tune2fs [オプション]　デバイス
・-c 自動fsckが行われるまでのマウント回数を設定
・-i 自動fsckが行われるまでの時間を設定
・-j ext2をext3に変換（ジャーナリング機能を付与）
・-l スーパーブロックの内容を出力
・-m 続けてroot用予備領域の割合を設定
・-L 続けて指定した名前でラベルをつける

●ファイルシステムを作成するコマンド
ファイルシステム　コマンド
・ext4 mkfs.ext4、mke2fs
・xfs mkfs.xfs
・btrfs mkfs.btrfs

mkfs.ext4 [オプション]　デバイス
mke2fs [オプション]　デバイス

オプション
・-j　ext3として作成する
・-b 続けてブロックサイズをbyte単位で指定
・-m 続けてroot用予備領域の割合を指定
・-L 続けてボリュームラベル名を指定
・-n 実際には実行せず確認のみ
・-t 続けてファイルシステムの種類(ext3.ext4など)を指定

●Btrfsコマンド
ファイルシステムを操作するコマンド

btrfsコマンドの書式と主なサブコマンド

btrfs サブコマンド

・filesystem show ファイルシステムの情報を表示
・subvolume create サブボリュームを作成
・subvolume delete サブボリュームを削除
・subvolume list サブボリュームの一覧を表示
・subvolume snapshot スナップショットを作成


●ext2ファイルシステムはtune2fsコマンドを使ってext3に変換が可能。
ext2/ext3/ext4ファイルシステムからbtrfsファイルシステムへの変換はbtrfs-convertというコマンド。これらの場合も、万が一のためのバックアップは必要ですが、新たにデータを手動でコピーすることなく、新しいファイルシステムに移行することができる。
【C言語】大きい整数型long longを使う / 流動的な桁数の0埋め【備忘録】

# 大きい整数は64ビットの整数型long longを使う

整数型intはサイズが32ビットしかないので、整数の桁が大きくなるときは別の変数型を使います。
今回はlong long型（64ビット）を使うとうまくいきました。

>問題：
>標準入力から二つの整数aとbが入力されます。
>aを左にbビットシフトした結果を一行で出力してください。
>（TechFULより引用）

::: note info
long long型の変換指定は **%lld** と書く
:::

```diff_c
#include <stdio.h>
int main(void)
{
    long long a, b, i;
    scanf("%lld %lld", &a, &b);

    a = a << b;

    printf("%lld\n", a);
    return 0;
}
```
2022/10/5実施
参照先：TechFUL

https://techful-programming.com/user/skill/problem/coding/35

---
# 流動的な桁数の0埋めをする

桁数が定まっていないときのゼロ埋めのやり方です。
桁数が（例えば8桁と）決まっている場合は`"%08d"`と書きます。
しかし今回は桁数が変数nで与えられるまで分からないので`*`を使いました。


>問題（概要）：
>ふたつの同じ桁数の二進数a, bが与えられる。
>桁数nも与えられる。
>a, bをOR演算したものを出力したい。
>（元の問題はTechFULより）


::: note info
**printf("%0*d", 0埋めしたい桁数, 数値);**
:::

::: note info
`-`をつけると左詰めにできる
:::


参考にした記事：
https://marycore.jp/prog/c-lang/left-right-zero-padding/


```diff_c
#include <stdio.h>
#include <stdlib.h>

int binaryToDecimal(int);//2進数を10進数に変換する関数のプロトタイプ宣言
int decimalToBinary(int);//10進数に2進数に変換する関数のプロトタイプ宣言

int main()//メインの関数
{
    int n, a, b, answer, i;
    scanf("%d %d %d", &n, &a, &b);

    //aとbを10進数に変換する
    a = binaryToDecimal(a);
    b = binaryToDecimal(b);

    //OR演算をする
    answer = a | b;
    answer = decimalToBinary(answer);

    //答えを出力する
    if (answer == 0) {
        for (i = 0; n > i; i++) {
            printf("%d", answer);
        }
        printf("\n");
    }
    else {
        printf("%0*d\n", n, answer);
    }

    return 0;
}

int binaryToDecimal(int bi) {//二進数を10進数に
    int temp = 0;
    int base = 1;
    while (bi > 0) {
        temp += (bi % 2) * base;
        bi -= bi % 2;
        bi /= 10;
        base *= 2;
    }
    return temp;
}

int decimalToBinary(int de) {//10進数を二進数に
    int temp = 0;
    int base = 1;
    while (de > 0) {
        temp += (de % 2) * base;
        de -= (de % 2);
        de /= 2;
        base *= 10;
    }
    return temp;
}
```
2022/10/4実施
参照先：TechFUL

https://techful-programming.com/user/skill/problem/coding/11856


今の実力ではこれしか思いつきませんでした。
スムーズなコードが書けるようにいつか再チャレンジしたいです。
OracleLinux ON VirtualBoxの仮想NIC追加時の備忘録

# イメージ
仮想NICを２つ用意して、１つをNAT接続、もう一方をホストからのPostgreSQL接続用として設定。
追加した仮想NICはVirtualBox側の設定だけでは有効にならないので注意。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624778/48d7e6c9-d7f3-039a-6f48-35a0b75d2ffd.png)
# 仮想アダプター１の設定
ポートフォワーディング設定でPostgreSQLのポート"5432"に穴を開ける。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624778/942b1c38-9d14-c6b0-7096-544ded6ccfcf.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624778/c77172c3-e112-8482-a593-1b7c822a83eb.png)
# 仮想アダプター２の設定
「ネットワークアダプターを有効化」にチェック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624778/1d1e0416-f5dc-5ef2-a6d7-1cc19b1b7046.png)
# ゲストOS(OracleLinux)上でのネットワーク設定
デフォルトでは仮想アダプタ２は無効・未設定になっているので設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624778/a108a4f0-59b5-5750-89b9-9fe69fad7f24.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624778/39b87be4-86a4-c6ce-9f81-c3ccf1c3c304.png)
接続が有効になる。再度設定を開き、「自動接続」も有効にする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624778/dda8768b-ef5c-036e-1860-0ea5118ac0ac.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624778/8ee65369-60a2-cb2d-7cf9-5be66f026f43.png)
Basic認証の導入（環境変数設定の流れ）

# 目的
アプリケーション(サーバー)へのアクセスを制限するため、Basic認証(ユーザー名とパスワードが無いとサーバーにアクセスできなくさせる)を導入する。

## 導入の流れ
## 1.authenticate_or_request_with_http_basicメソッドを実施
    #Basic認証によるログインの要求は、すべてのコントローラーで行いたいため、
     Basic認証の処理をapplication_controller.rbのprivate以下にメソッドとして定義し、before_actionで呼び出す。
    
    before_action :basic_auth


    private
    
    def basic_auth
      authenticate_or_request_with_http_basic do |username, password|
        username == 'admin(任意)' && password == '2222(任意)'
      end
    end

## 2.Basic認証のコードを編集
上記1のコードでは、ログインにユーザーネームとパスワードが記載されており、セキュリティ面で不安が残るため、環境変数を利用する必要がある。
ただ、Basic認証は完全に信頼できる認証方法でないと知っておく必要がある。
（HTTP通信で定義されている仕様上、ユーザー名とパスワードが通信経路上にそのまま送られるため、漏洩のリスクがある。また、ログアウトの概念が定義されていないため、もし必要になる場合は自力で実装する必要がある。などが理由）

Basic認証に関する環境変数は、<strong>シェル</strong>と呼ばれるプログラムを用いて、定義する。
・<strong>シェル</strong>：ターミナルとOSを繋ぐ窓口役

シェルを用いて、<strong>zsh</strong>もしくは<strong>bash</strong>と呼ばれるファイルに環境変数を定義する。
・<strong>zsh</strong>：ログインシェルと呼ばれるもので、プログラムを実行する時に、ユーザーの要求に一番最初に対応する役割を担う。隠しファイルなので、特別な設定なしではFinderなどには表示されない。環境変数を記載する場所は、設定ファイルである「.zshrc」の中。
・<strong>bash</strong>：zsh同様、ログインシェルの1つ。zshとの違いは、OSがCatalina以降であれば「zsh」、Mojave以前であれば「bash」が自動で適用される。環境変数を記載する場所は、設定ファイルである「.bash_profile」の中。

zshやbashなどの設定ファイルは、<strong>vim</strong>というコマンドを用いて編集する。(見えないファイルだから)
・<strong>vim</strong>：サーバー上で使用できるテキストエディタ。vimコマンドを用いることで、指定したファイルの編集をターミナルから行うことが可能になる。
    	
    % vim ~/.zshrc #使用例(zshrcファイルの編集をターミナルから行う)

vimには<strong>「通常モード」</strong>と<strong>「インサートモード」</strong>がある。
・<strong>通常モード</strong>：コマンドを打つことでファイルを保存したりvimを終了したりできる。
・<strong>インサートモード</strong>：ファイルに編集を加えることができる。この場合、「i」キーを押すことで「insert（インサート）モード」になり、文字の入力が可能になる。ファイル編集後は、Escキーを押すと「通常モード」に戻る。

#### [通常モードで使えるコマンド一覧]
    :w	　　　#作成・編集したファイルを保存する。
    :q	　　　#vimを終了します。
    :q!	　　　#編集した内容を保存しないでvimを強制終了します。
    :wq	　　　#編集した内容を保存してvimを強制終了します。

ファイル編集後は、<strong>sourceコマンド</strong>を実行する必要がある。
・<strong>sourceソースコマンド</strong>：シェルに記述された内容を実行する役割を担う。今回は、zshファイル、もしくはbashファイルに記述された内容を実行する。

## 3.開発環境で環境変数を設定する手順(macOSがCatalina以降の場合)
    #手順①
    % vim ~/.zshrc　 
    
    #手順②
    「iキー」を押して、インサートモードに移行。
    ターミナルの左下に「INSERT」と表示されたら成功。

    ＃手順③
    zshrcファイル内に以下2行のコードを記載    	
    ~ここから~
    export BASIC_AUTH_USER='admin'
    export BASIC_AUTH_PASSWORD='2222'
    ~ここまで~
    
    #手順④
    「escキー」を押して、 「:wq」と入力。入力後、「Enterキー」を押して終了。

    #手順⑤
    % source ~/.zshrc   #sourceコマンドの実行
    
    ※macOSがMojave以前であれば、編集するファイルを「.bash_profile」に変更し同様の手順を踏めば良い。

## 4.本番環境で環境変数を設定する手順
    #以下コマンドを順に実行
    % heroku config:set BASIC_AUTH_USER="admin（任意）"
    % heroku config:set BASIC_AUTH_PASSWORD="2222（任意）"
    （% heroku config　　でパスワードとユーザー名が表示されていれば、正しく設定ができている。）
    
    #変更したコードをコミットし、Herokuへデプロイ。
    % git add .
    % git commit -m "Basic認証を導入"
    % git push heroku master
WindowsＰＣの異常シャットダウン

Winodows10 
HDD+SSD　500GB
メモリー８ＧＢ
Wifi

# 異常シャットダウン


Windowsパソコンで異常シャットダウンが続いてたので、メモとして記録。
検索してもパソコン修理業者の広告ばかりで、なかなか適切な情報に届かないので。

## ウィルス感染がないか？
当初、変なサイトでもいじってウィルススにでもやられたのかと思い。ウィルスススキャンをしましたが。
異常ありません。
イベントログを確認しましたが、システムログに
DistributedCOMの警告メッセージが・・


調べたら、無視してもよいとの情報を確認。

## ハードディスク障害の疑いないか？
・デフラグを実行
・CHKDSKを実行　エラーなし。

この間に何度も堕ちる。
他のイベントログを確認したが異常なし。

## ドライバの異常ないか？
他のドライバーに問題ないか確認。
・コンピューターの管理→デバイスマネージャーを開く。一つ一つ確認。
問題なし

## メモリーに異常がないか？
パソコンのダウンと闘いながら、検索してググったらメモリーの不具合の場合があると分かり。
パソコンの検索まどから「Windowsメモリ診断」を入力して実行。
結果　エラーなし。

## 電源に異常がないか？
次に、電源の問題で起きることを検索して分かり。
電源を見たらファンが動いていない。
常時動かしているので電源が劣化した可能性あり。
型番を調べて購入して交換。

これでやっと解決すると思ったら、症状改善せず。　（汗）

## イベントログ　システムログ？？

そこで、気になったのが、当初のイベントログのシステムの警告。
DistributedCOM
いろいろと、ググりまくり・・・
[「【Windows10】イベントID:10016 エラーを解決する方法」](https://ameblo.jp/ryouto-h/entry-12452982860.html)

この記事を参考に修正。

現在、安定しています。

最初のイベントログをもっと調べれば良かった。
マイクロソフトのサポートサイトに気にしなくてもよいなんて書いてあったから無視しました。余計な経費が掛かった。
電源はどのみち劣化していくので、結果オーライかな。
HonKit使ってみました

HonKit は GitBook（legacy） を Fork して作られたドキュメントページ・書籍作成ツールです。
作者の azu さんのブログ『Web Scratch』に開発の経緯などが詳しく書かれています。

https://efcl.info/2020/06/19/githon/

## 作ったデモページ

Firebase で公開しています。

https://handson-honkit.firebaseapp.com/

勉強のために「架空のサポートサイト」というテーマで何か作ってみようと思い立ったものですが、せっかくなので HonKit を使う手順をまとめてみました。セットアップからちょっとしたカスタマイズまで、手元の操作をそこそこ詳しく落とし込めたかなと思っています。

## なぜ HonKit を使おうと思ったのか

手順はデモページに全て書いてしまったので、このブログエントリではデモページには掲載していない部分について触れておこうと思います。

私の仕事はフロントエンドエンジニアで、いくつかのシステム開発に関わっています。製品のリリースと並行して社外・社内向けのドキュメントサイトを用意することがあり、そんな時に必ず出てくるのがツール選定の悩みです。今まで使ったツールは WordPress や GitHub Pages があり、静的コンテンツを生成する手法としては Jekyll や Hugo などを使ったことがあります。これらのツールはそれぞれアップデートもされていて使い勝手も悪くないのですが、どうしても普段のシステム開発とは違ったコマンド群や記法を学習することになります。

専属のメンテナーがいればそれほど問題にはならないかもしれませんが、小規模の開発体制の現場ではシステム開発しているエンジニアが自分自身で記事を書いたりメンテナンスをしています。セットアップやビルドでなじみのない独特のエラーにぶちあたった時、それを乗り越えて使いこなすだけのナレッジが全てのメンバーに均等に行き渡らず、そのツールを導入した最初のメンバーが職人と化してセットアップ作業やメンテナンスを一手に引き受ける傾向がありました。

どの領域のエンジニアでもセットアップできて、かんたんに記事が書けて、変更履歴がログに残って、ガチガチのテンプレ縛りがなく見た目もそこそこカスタマイズできる、そんなツールはないのか....！？あった、gitbook-cli！しかし動かぬ！！

..........legacyだと？？？？

すみません最後のほう熱くなりましたが、そんな感じで涙目でググッていたら見つけたのが HonKit というわけです。

## 使ってみてどうだったか

> どの領域のエンジニアでもセットアップできて、かんたんに記事が書けて、変更履歴がログに残って、ガチガチのテンプレ縛りがなく見た目もそこそこカスタマイズできる

この部分に関しては私の求めていたニーズにジャストフィットしていると言えます。試しにデプロイしたのは FireBase ですが、ビルドして静的コンテンツを吐き出すという仕組みから、どのホスティングサービスでもいけると思います。

何より legacy になった gitbook-cli を生まれ変わらせてみんなが使えるようにメンテナンスしてくれていることが嬉しいですね。セットアップからデプロイまで身近な git の操作で完結できることが有り難く、エンジニアの受け入れ度が高いことが予想されます。

興味をもってくれた方は、ぜひデモページをご覧いただければと思います。
X-Techについてまとめてみた

# はじめに
IT×ビジネスという視点で週1本記事を投稿しています。
もし興味のある方は下のリンクから他の記事も見ていただければ幸いです。
 [@7_inai_](https://qiita.com/7_inai_)
# X-Techとは
 X-tech(クロステック)とは、既存の業界のビジネスとAI・IoT・ビッグデータなどといった先進的なテクノロジーを結びつけて生まれた新たな製品やサービス、その取り組みのことを指します。

# ◯◯Tech
前述した通り、ビジネス × テクノロジーで表される製品やサービスをX-Techと呼びますが、この「X」の部分にさまざまなビジネスを当てはめて、◯◯Techと呼びます。
例えば以下のようなものがあります。

・[FinTech](https://qiita.com/7_inai_/items/e6b0c453f9887b762f0d)
・[AgriTech](https://qiita.com/7_inai_/items/64b86514ce189f3dd09f)
・[EdTech](https://qiita.com/7_inai_/items/c61c3f4f13dfe94c3bb3)
・HRTech
・HealthTech
・MedTech

# X-Techが流行した背景
- スマホの普及
スマホとしてだれもが手元にネットワークにアクセス可能な端末機器を持つようになったことで、簡単にITサービスに触れられるようになりました。これにより、企業から顧客へのアプローチが容易になったことにより、ITを使用したビジネスが流行しました。
- ITによるコスト低下
これまで人が取り組んでいた作業の代わりにデジタル技術を使用することで人件費を抑えることができます。そのため、システムに置き換えられる作業は置き換えることが主流となっています。また、例えばクラウド技術により導入コストが安くなったことも理由の1つです。

# 終わりに
X-techの流行はITエンジニアのあり方を変える要因にもなってくるでしょう。例えば今までシステム開発はSIerに丸投げしていたような企業も、システム開発がビジネスの根幹になってくるとあれば、自社でシステム開発部門を設けて、システム開発を行なった方が、臨機応変さや追加開発等の面で優位に働きます。そうなった場合には、IT以外の得意分野を持っているエンジニアがより活躍できるフィールドへと変わってくるでしょう。今のうちにIT以外の得意分野を探しておくこともキャリア形成においては有効になってくるかもしれません。

最後までお付き合いくださりありがとうございました。
windowsの英語配列キーボードで英語切り替えをより簡単に

# はじめに
私は会社でwindowを使用しており、家ではmacを愛用していることから、windowの環境下だとタイピングにおいて不便を感じることが多い。
日本語配列の場合、英語切り替えは`Caps Lock`であり、タイピングしながら左手の小指で簡単に切り替えができる。
しかし英語配列の場合は Alt + `   が切り替えのボタンとなり、いったんタイピングを止めて２つの指で切り替えをする必要がある。
ここではmicrosoftのpower toysを利用してキー再マップをすることで英語切り替えをより簡単にすることを紹介する。

# 環境
windows 10

# Power Toys のインストール
GitHubによるインストール
https://github.com/microsoft/PowerToys/releases/tag/v0.62.1

`Assets`の`PowerToysSetup-0.62.1-x64.exe`をダウンロードし、インストールする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821152/42997579-aa7d-cd48-4bd7-5a7586948637.png)


## 英語切り替えボタンの設定
キー再マップ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821152/2d4b72db-93c1-bc2f-41cd-729ecf708070.png)
`Caps Lock` をAlt + ` として設定 

これで`Caps Lock`を押すことによって英語に切り替えることができる

## Caps Lockを設定する
ショートカットの再マップ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821152/0e8b1c67-b5c0-1cfe-ea4d-6b33f6619d8c.png)

`Shift + Caps Lock` を元の`Caps Lock`として設定しておく。 


# まとめ
Power Toysはmicrosoftが提供するソフトなので、安心して会社のパソコンでも使用することができる。
[microsoft 公式 Document](https://learn.microsoft.com/ja-jp/windows/powertoys/install)
AccessVBA レコードセット処理時のメモ

### 1. トランザクション処理時の注意点

特にテーブルと直接紐づいたフォームで、トランザクション処理を実行する場合の注意点。
勢いあまって？やりそうなのが次のような指定。

``` VB
    Dim ws As DAO.WorkSpace
    
    Set ws = DBEngine.Workspaces(0)
    ws.BeginTrans            ' トランザクション開始

    Dim qd As QueryDef
    Set qd = CurrentDb.QueryDefs("クエリー1")
    qd.Execute
    ・・・・
    ws.CommitTrans           ' トランザクションコミット

    Set qd = Nothing
    Set ws = Nothing         ' ⇒これは絶対やっちゃダメ！(>_<)
```

Visual Basic Editorの画面から、オブジェクトブラウザーで"Workspace"の構成を調べるとわかりますが、オブジェクト"Workspace"の配下には、オブジェクト"Databases"が存在します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170624/ca934786-968e-0e6a-15fd-d60dda070c2c.png)
つまり、上記のようにWorkspaceにNothingを指定⇒内容をクリアすることで、該当フォームで使っているCurrentDbが使えなくなるのです。

***
### 2. ForwardOnlyタイプ
OpenRecordsetなどでレコードセットをオープンするとき、指定するタイプには
・結果集合の参照のみのとき：SnapShot
・結果集合の更新ありのとき：DynaSet
を指定することが多いようですが、大量データを参照する必要があるときはForwardOnlyタイプの使用も検討するとよいでしょう。

 **＜ForwardOnlyタイプのレコードセットの特徴＞**
・結果集合の参照のみ可能
・メソッドMoveFirst/MoveLastは指定不可。MoveNextのみ指定可（実行時エラーになります）
・RecordsetCountの値が当てにならない・・・次項参照
・他のレコードセットタイプより処理速度が高速
　※参考：[OpenRecordset メソッドのレコードセットタイプを比べる（T'sWare）](https://tsware.jp/labo/labo_04.htm)

その性格上、例えばマスタレコードを全件走査して・・・といったバッチ処理などに使うと有効でしょう。

***
### 3. RecordSet.RecordCountのワナ
Recordsetオブジェクトには"RecordCount"というプロパティがあって、いかにも
 **「いつでもレコードセットの件数を格納している！」**
というような名前なんですが、その扱いには注意が必要です。

例）テーブル"tablea"には7,500件のレコードが格納されています
```VB
Dim rs As DAO.Recordset

' Tableタイプでオープン
Set rs = CurrentDb.OpenRecordset("testa", dbOpenTable)
Debug.Print "Table 処理開始：" & rs.RecordCount
Do While (Not rs.EOF)
    rs.MoveNext
Loop
Debug.Print "Table 処理終了：" & rs.RecordCount

' SnapShotタイプでオープン
Set rs = CurrentDb.OpenRecordset("testa", dbOpenSnapshot)
Debug.Print "Snapshot 処理開始：" & rs.RecordCount
Do While (Not rs.EOF)
    rs.MoveNext
Loop
Debug.Print "Snapshot 処理終了：" & rs.RecordCount

' ForwardOnlyタイプでオープン
Set rs = CurrentDb.OpenRecordset("testa", dbOpenForwardOnly)
Debug.Print "ForwardOnly 処理開始：" & rs.RecordCount
Do While (Not rs.EOF)
    rs.MoveNext
Loop
Debug.Print "ForwardOnly 処理終了：" & rs.RecordCount
```
（実行結果）
```
Table 処理開始：7500
Table 処理終了：7500
Snapshot 処理開始：1
Snapshot 処理終了：7500
ForwardOnly 処理開始：1
ForwardOnly 処理終了：-1
```
つまり、
・Tableタイプ：常にレコードセットの件数を保持
・Snapshotタイプ：アクセス済の件数を保持
・ForwardOnlyタイプ：？？？
という仕様になっているようです。

とはいえ、Tableタイプ以外でもレコードの存在有無には使えるわけで、うまく使いこなすことが大切でしょう。
【Java SE11 Silver】入社１ヶ月でJava Silver合格した勉強法

## はじめに
こんにちは、名古屋勤務の1年目エンジニアです。

私は、今年6月前職を辞めてプログラミングスクールに通い、先月IT企業に転職しました。

先月から社外のJava研修で学習しながらJava Silverの勉強を進めていました。

そこで今回は、勉強方法やコツを共有したいと思います。

:::note info
ちなみに合格点65点のところ85点で合格しました。
:::

前提として、プログラミングスクールでは１０週間ほどRubyについて学びましたが、
Javaの知識はゼロの状態で始まりました。

前職もITとは全く関係なく、正真正銘の初心者です。

## 勉強方法
結論から言いますと、__黒本を３周しました__
[Java Silver 黒本](https://www.amazon.co.jp/%E5%BE%B9%E5%BA%95%E6%94%BB%E7%95%A5Java-SE-11-Silver%E5%95%8F%E9%A1%8C%E9%9B%86-1Z0-815/dp/4295007625/ref=pd_bxgy_sccl_2/355-3502044-3384762?pd_rd_w=W1sqj&content-id=amzn1.sym.918446e7-72f4-48c7-a672-af3b6ace2b19&pf_rd_p=918446e7-72f4-48c7-a672-af3b6ace2b19&pf_rd_r=GWRW91EHSHSRMN04Q557&pd_rd_wg=IOca5&pd_rd_r=b76a3bcd-294b-4ccd-8236-cf9b66667c32&pd_rd_i=4295007625&psc=1)

とは言っても、ただ３周しただけではなく、意識した事があります。

コツと勉強時間を参考にしてください

### 勉強のコツ
問題集での勉強にはコツがあります。

それは、__自信がない問題に印を打つこと__

正解したけどまぐれだったときに、印があることでその問題をしっかり見直す事ができ、

印ないのに不正解なところは分かったつもりになって勘違いしている可能性があることに気づけます。

印なくて正解のところはもう大丈夫！ということで特に解説を見る必要はないので、時間の節約になります。


1. １周目
わからないことの方が多いので、所見はわかる範囲で問題を解きながら、
わからないところを回答を見ながら学習する。
:::note alert
この時気をつけるのは、１周目で全て理解しようとしないこと
わからなくて当然なので、「こういうのがあるのか」位でOK
:::
1. ２周目
一度問題を解いて分からないところをもう一度解く
例）１章の問題を解く→1,4,8間違えた→1,4,8だけもう一度解く
:::note warn
２周目でも正答率50％の章とかあります。
落ち込まないで間違えたところを見直して2回目は解けるようにする
:::
1. ３周目
全ての章の問題を通してやる（答え合わせは随時やってます）
最後に、間違えた問題を通しで解く
:::note info
３周目は見たことある問題が多くなってくるはず！
模擬試験で８０％以上は取れるようにしよう
:::

### 勉強時間
合計時間は約50時間。

勉強の期間は１ヶ月弱ですが、Javaの研修と同時進行で進めていたため、

被っている内容もあり常にJavaを触っていたのでかなりいい環境で勉強できていました。

一日1-2時間ほど勉強して土日は合計3時間ほど勉強していました。

受かればいいというレベルであれば30時間くらいあれば受かるレベルにはなれると思います

## 試験当日の流れ
私はオンラインで受験したので、その時気になっていたことや注意点などを紹介します。

オンラインでの受験は、まずチケットを購入して、受験を予約します。
[受験までの流れをわかりやすく説明しているサイト](https://yumanoblog.com/java-silver/)

#### 当日疑問に感じていた点とその回答
Q.トイレは行ける？
A.行けない。朝は水を最低限に抑えて試験前にトイレを済ませておく

Q.紙のメモは取れる？
A.取れない。一様画面にメモ取れるやつがあります（動作重くて一回も使ってない）

Q.黒本の問題と比べて簡単？
A.難易度は同じくらい、見たことない問題も数問合ったけど、全く同じ問題の方が多かった。

#### 一番気をつけてほしいこと！
:::note info
ここからは試験当日にあったトラブルが書いてあるので、時間がない方は飛ばしてください
:::

__Certviewにある自分のプロフィールの名前が合っているかどうかを確認すること__

もう一度言います

__Certviewにある自分のプロフィールの名前が合っているかどうかを確認すること__

もう一回くらい言いたいくらいですが、

なぜこんなに大事かというと、私自信名前を間違えていて、大変なことになったからです。

試験当日私は自信がありコンディションも万全で張り切ってチェックインしました。

やりとりも英語だと聞いていたけど、日本語話せるアジア系の方でチャットも問題ありませんでした。

本人確認で準備していたパスポートの写真を見せると、

「登録されている名前と違います」

え？そんなことは絶対にないはず、「もう一度確認していただけますか？」

「パスポートにはーーーーーーーと書いてありますが登録された名前はーーーーーーです」

やば！！！！！！！

これってもしかして試験受けれないやつ？３万以上も払って大事な休日を犠牲にしたのに。

とめちゃくちゃ萎えてる時、

「名前は後日変更の申請をしてください」

え？試験は受けれるの？

「今日はこのまま受けていただいて、後日名前変更の申請ができます」

うぉーーーーー！良かったー。

安堵感の中試験も順調に進み、すぐに結果が出た85点。。うん、悪く無い。

あとは名前を変更するだけ

すぐに名前変更の手続きを行い返信が返ってきた。

よし、受け取った証明書の名前も変更してもらおう、

Q&Aで調べていると

>認定資格の証明書の名前は変更できません

まじか、ずっとこの間違えた名前の証明書を持たないといけないのか。。。

そんな悲しみと共に、名前をしっかりと確認しておけばよかったととても後悔しました。

Java Goldを正しい名前で取って上書きするしか。。。

ということで、みなさんには同じ過ちを繰り返さないためにも、しっかりと名前を確認しましょう！

## 終わりに
長々と試験当日の話を書きましたが、読んでいただいた方ありがとうございます。

今度は残りの研修期間２ヶ月の間でJava Goldを取得しようと考えています。

取得できたらまた勉強方法や、試験の内容など共有していきます。
pgAdmin4のインストールとServerの設定について

## pgAdminインストールについて

https://www.pgadmin.org/<br>
上記より、pgAdminのページへ飛び、左側にあるQuick Links内のDownloadへ遷移してください。
DownloadページにはOSを選択するアイコンがあるのでご自身のOSを選択し、任意のversionを選択します。<br>
Filesという見出しの下に「pgadmin4-x.xx.dmg」というファイルがあるのでクリックし、ダウンロードとインストールをしてください。<br>
## Serverの設定について
pgAdminを起動しましたら、データベースにアクセスするためのサーバーを作成します。<br>
Window左上のSeversを右クリックし、Register/Serverを選択します。
![スクリーンショット 2022-10-04 22.33.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2881858/deb09e21-21e9-88ac-62f0-fe39bed25301.png)

GeneralタブのNameに作りたいserverの名前を入力します。<br>
![スクリーンショット 2022-10-04 22.48.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2881858/fca71ca9-22b9-ee21-2c82-45e1dcccd6a0.png)

Connectionタブに移り、Hostname/addressを入力します。
ローカル環境で動かす場合は、「127.0.0.1」を入力します。
![スクリーンショット 2022-10-04 22.50.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2881858/cda8e155-dd2d-d312-b931-12bbb5de67f4.png)

次に、Usernameを入力します。
Usernameはpostgresqlでsuperuserに設定したアカウント名を通常は入力してください。
もし、superuserのアカウントがわからない場合はデータベースをpsqlで立ち上げて「\du」コマンドを入力してください。
![スクリーンショット 2022-10-04 22.44.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2881858/e3582146-145a-99e5-2ef2-e50376523534.png)

このような形で、superuserのRolenameを取得することができます。<br>
![スクリーンショット 2022-10-04 22.51.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2881858/18232f8d-bc7e-c05a-d7cc-ef060e5c735d.png)


ここまで入力が完了しましたら、下のSaveボタンを押して作成完了です!
【Spreadsheet】Google Sheetsのgidとは何か？【https://docs.google.com/spreadsheets/d/.{44}/export?format=csv&gid=0】

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435735/ccf4c127-cef3-458a-7774-6d3e51404a37.png)

Sheet idのようです。
*gid=0*は`シート1`
*gid=1604918764*は`シート2`
みたいな感じです。

何も指定しない場合は、`シート1`になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435735/ab0beaa3-a17e-951b-fc21-d316b90619c7.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435735/78929dcb-e7ba-d37f-2ed6-69484873a1ba.png)
phpmyadmin インストール

画面が真っ白なの。phpmyadmin。
結論から言うと

・phpmyadmin5系は エラーが出ないので、まずはphpmyadmin4を入れて原因をさぐれ

ということ。

参考
https://blog.denet.co.jp/how-to-fix-phpmyadmin-white-screen/
https://www.den-tsu.net/pma_err/
https://resource-sharing.co.jp/centos7-mysql-mariadb-root-password-forget/

phpMyAdmin4 を ダウンロード、解答、フォルダコピー
```
wget https://files.phpmyadmin.net/phpMyAdmin/4.9.10/phpMyAdmin-4.9.10-all-languages.zip
mkdir phpMyAdmin && unzip phpMyAdmin-4.9.10-all-languages.zip
cp -pr /home/your/phpMyAdmin  /usr/share/
```

```nginx
server {
    listen 80;
    index  index.html index.php;

    location /phpmyadmin {

#IPアドレスで制限 allow のipのみログインできる
#        allow 111.222.333.444;
#        deny all;

        alias /usr/share/phpMyAdmin/;
        try_files $uri $uri/ /index.php;

        location ~ ^/phpmyadmin/(.+\.php)$ {
            alias /usr/share/phpMyAdmin;
            fastcgi_pass   unix:/var/run/php-fpm.sock;
            fastcgi_param SCRIPT_FILENAME /usr/share/phpMyAdmin/$1;
            include fastcgi_params;
            fastcgi_intercept_errors on;
        }
     }
}

```

これでOK

動かなかった原因はセッションのパーミッションエラーでした。

```
chown nginx /var/opt/remi/php81/lib/php/session
```

DBのパスワード忘れちゃったよという場合は

```
mysql -u root
update user set password=PASSWORD("新パスワード") where User='root';
flush privileges;
quit
```

で、

```
mysql -u root -p
```

で先程指定したパスワードでログインできるかチェック。
スプレッドシートで別のシートの値をINDIRECT関数で動的に参照するメモ


仕事柄、成績付けや採点をやることがありますが、他のシートを動的に参照したいケースがあります。

特にプログラム書くわけではないけどGAS使わなくてもINDIRECT関数を使って出来たのでメモです。

> https://support.google.com/docs/answer/3093377?hl=ja

こんな感じで使えます。

```
=INDIRECT(A1&B1&"!H3")
```

<blockquote class="twitter-tweet" data-theme="dark"><p lang="ja" dir="ltr">INDIRECT関数の恩恵を受けた<br><br> / Googleスプレッドシートでシートの参照をセルから取得したい、セルに書かれたシート名にアクセスしたい場合 <a href="https://t.co/76H1UdelCx">https://t.co/76H1UdelCx</a></p>&mdash; 菅原のびすけ (@n0bisuke) <a href="https://twitter.com/n0bisuke/status/1577277990248927232?ref_src=twsrc%5Etfw">October 4, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## やりたいこと

Googleスプレッドシートに

- 集計用の`採点小計`のシート
- 各学生の点数が入ってるシート

の2種類があります。

> ![スクリーンショット 2022-10-04 22.06.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/318bb6c4-fbfc-f518-1e21-cf19ecaad145.png "スクリーンショット 2022-10-04 22.06.14.png")

`採点小計`のシートに **`宿題ID`と`名前`を記載することでシートを読みに行って点数を自動的に入れたい**。

> ![スクリーンショット 2022-10-04 22.19.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/385d2d85-8c29-c176-ca18-9a97de2e540a.png "スクリーンショット 2022-10-04 22.19.17.png")


といったことをやりたいです。

## 文字列連結の`&`とシート参照の`!`だけではうまくいかない問題

基本的な文字列の連結は`&`を使うので、`=A2&B2`とすると0201菅原になります。

> ![スクリーンショット 2022-10-04 22.20.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/89aac57a-4d89-1ec3-fb17-0512656023f6.png "スクリーンショット 2022-10-04 22.20.23.png")

また、別シート参照は`"シート名!範囲"`が基本なので、`='0201菅原'!I3`などとすることで別シートの範囲を参照できます。

> ![スクリーンショット 2022-10-04 22.24.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/ca800c0e-117b-d8d8-c827-4adcf57af1f7.png "スクリーンショット 2022-10-04 22.24.10.png")

この二つを組み合わせると上手くいきません。

> ![スクリーンショット 2022-10-04 22.26.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/46df203a-b9f2-0c4b-ec56-791602268fd0.png "スクリーンショット 2022-10-04 22.26.21.png")

`=A2&B2&!I3` など試しましたがエラーが出て参照できないようでした。

## INDIRECT関数

ちゃんとドキュメント読んでませんが、どうやらINDIRECT関数を使うことで、

- `&`で範囲連結してシート名の文字列を作る
- `!`と範囲を連結し、範囲の文字列を作る
- 生成された範囲を読み込みにいく

といった処理を一気にやってくれてそうでした。

> ![スクリーンショット 2022-10-04 22.28.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/221920d4-966a-359c-b129-ac96bc02a747.png "スクリーンショット 2022-10-04 22.28.40.png")

`=INDIRECT(A2&B2&"!I3")`

## まとめ

めちゃ便利でした。
GAS使わないといけないものだと思ってたので感動です。
簡単に作れるReactの検索機能の実装

今回はReactの検索機能の実装方法を説明します。

参考記事
https://qiita.com/koichi0909/items/8476073805306df60781


### 検索フォームを作る

最初に検索フォームを作ります。
ここでは、usestateで、検索したい値を入れるsearchNameの変数を作ります。
そして、inputで入力できるようにし、入力値をsearchNameに入るようにします。

``` JavaScript

const [searchName, setSearchName] = useState("");

return (
        <>
         <input
          type="text"
          placeholder="todoを探す"
          onChange={(event) => {
            setSearchName(event.target.value);
          }}
        />
       </>
)

```

### 表示する

残りは表示するだけになります。
mapする前にfitterで絞り込みを行います。
最初にif文では、inputの値がない場合は、そのままdataを返します。
そして、data.titleがSearchNameに含まれる値が同じだった場合、
それと同じdata.titleを返します。
toLowerCaseは小文字に変換するメソッドです。

もしidにしたい場合は、data.idにすれば作ることができます。
とても使い勝手がいいので、ぜひ使って見てください。

```JavaScript
return(
          {firedata
            .filter((data) => {
              if (searchName === "") {
                return data;
                //そのまま返す
              } else if (
                data.title.toLowerCase().includes(searchName.toLowerCase())
                //valのnameが含んでいたら小文字で返す　含んでいないvalは返さない
              ) {
                return data;
              }
            })
            .map((data) => {


```
Reactを触ってみたら…こんなの初心者に勧めるなと思った件（React歴1日）

## 0.触ろうと思ったキッカケ
ササっと説明すると…
>同期「React触ってんだよね」
→Vue.jsかReactが結構、話題に上がるよな
→なんか理解できた方が可能性、広がりそう（フレームワーク未経験）
→環境どうすっかな
→CodePenで書けるやんけ！勉強しよ！

この時は、まだ知らなかったんです。
「初心者にReact進める人はドS」ってことに…

## 1.序盤は、まぁ…普通かな？
早速、Hellow Worldで入学式を開いてみました。
まぁ…こんな感じかっといった雰囲気でした。
表示までなら、そこまで複雑じゃなかったからね（フラグ）

次に何やろか考えた時に
「昔つくったサンプル、これReactで書いたらどうなるんだ？」
そう思って色々いじることにしました。

（ここから初心者殺しだと理解し始める）

**昔、DOM操作の例で作ったサンプル**
**チェックボックスの状態でテキストの色が切り替わる**
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="qBYVxbO" data-user="DoNotPrayDebug" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/DoNotPrayDebug/pen/qBYVxbO">
  textID</a> by DoNotPrayDebug (<a href="https://codepen.io/DoNotPrayDebug">@DoNotPrayDebug</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 2.ちょいまち、難易度上がってないか？
流石に無策でいきなり書き始めるのはムリがある…
そう思い、今回の実装に使いそうな要素を色々、調べてみましたが…
「え、難易度…上げ過ぎじゃないですか？」

そう思わずにはいられませんでした。
まず、値の保持にはクラスを使わなきゃいけない（ここで難易度あがる）
そのために、クラスを継承しましょう（初心者バイバイやんけ）

「初心者にクラスは早い」

ある程度、理解した人なら問題なく開発できると思います。
実際、私も数時間で「心で理解できたので」
だけど、新人さんには優しくないと思いました。

こんなもんを未経験者に触らせたら
キライになるじゃんと思いましたね。

そんなことを思いながら
>調べる
→動かす
→デバッグ
→調べる

この流れで何とか過去に作ったサンプルと同じ動きをする
コードがかけました（React歴、約半日の作品）

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="yLjELQw" data-user="DoNotPrayDebug" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/DoNotPrayDebug/pen/yLjELQw">
  ReactTest1</a> by DoNotPrayDebug (<a href="https://codepen.io/DoNotPrayDebug">@DoNotPrayDebug</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

…書けはしましたが、いくつかツッコミたいことあると思います。
私も色々言いたいですから。
（恥ずかしいけど、記録として、そのままを残しておきます）

もし、この記事を新人プログラマが見てましたら一言
「基本を押さえてからReactは触りなさい」

クラスまでを一通り理解できたなら、ネットの記事見ながら
開発はできると思います。
（私も自分を実験体にしてレポート出していくので）