OmniAICreator/Qiita-1.07M huggingface dataset:
Ubuntu14.04で Applmage のアプリケーションをDockに登録する方法

##概要
メイン・メニューアプリを使ってApplmage形式のアプリをLauncherに登録後、Dockにショートカットを配置する。

##メイン・メニューのインストール
端末(bash)を立ち上げて以下のコマンドを実行

```bash
sudo apt-get update -y
sudo apt-get install -y alacarte
```
<br>


##LauncherへApplmage形式のアプリを登録
デスクトップ左上のアクティビティをクリックして検索窓から「メイン」を検索して下に表示される候補の中から「メイン・メニュー」を選択
![Screenshot from 2020-05-15 18-31-44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534182/00ef67a0-09e8-d2fa-9e4e-20b471e7cc1f.png) 
<br>

アプリが起動したら左側メニューから適当なカテゴリを選択して、右側ボタン「新しいアイテム」をクリック
![メイン・メニュー_001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534182/d4e4ce74-cc62-06f8-de97-a43c3ffff1f3.png)
<br>

開いたメニューへ以下を記入してOKボタンを押下するとLauncherへアプリが登録される

**Name:**　　
登録するアプリの名前を記入（任意）

**command:**
BrowseボタンからApplmage形式のアプリを選択

**comment:**
省略可

**Launch in Terminal?**
未チェック
![Launcher Properties_002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534182/80f22761-7593-c6c6-fd5e-e809da0476ee.png)

##Dockへ登録
デスクトップ左下のダイヤルマークからアプリ一覧を表示して、Applmage形式のアプリをDockへドラッグアンドドロップすると登録される
Next JS Official Tutorial

# Next JS Tutorial

```javascript
getStaticProps()
```
Used to fetch external data when the content depends on it

## 1. Navigating between pages

### > Page <

A "page" is a React component which belongs to the "pages/" directory.
**Pages are associated with a route based on the name of the file**

eg.
- pages/index.js is associated with the route "/"
- pages/about.js is associated with the route "/about"

### > Link Component <
In Next.js, you use <Link></Link> tag which wraps around the <a> tag to navigate with in the application.

```react
<Link href="/">
  <a>Back to home</a>
</Link>
```

"Link" component allows **Client-side navigation**. This means that page transition is handle by JavaScript which is faster than a normal navigation. No HTTP GET request is made

### > Code splitting and prefetching <
Next.js does code splitting automatically. **This means that when a page loads, only the necessary content for that page is served.**

When a "Link" tag is encountered in a Next.js app, Next.js prefetches the code for the linked page in the background. **So by the time you click on the link, content is fetched and allows instant page transition**


## 2. Assets, Metadata and CSS

### > Assets <
Static files like images can be served from the "public" directory. They can be accessed from the root of the directory just like "pages" directory.
**Also a great place to store "robots.txt"**

*robots.txt : a file which tells the crawler which files the crawler can or can't request from your site

### > Metadata < 
Metadata of the page which is usually specified in a "head" tag can be edited using `<Head>` tag in next.js.

```react
<Head>
  <title> Title of the page </title>
</Head>
```

*If you want to customize html attribute, eg. lang, you can do so by using `<Document>` tag




## 2. Dynamic Routes
![Dynamic Routing](https://nextjs.org/static/images/learn/dynamic-routes/page-path-external-data.png)

When you want to have dynamic routes to pages where the route depends on the content.

- eg. posts/<id> where the id is the title of an article

### How-to

Under /pages create a file `[dynamic content].js`.

Pages that begin and end with [] are dynamic pages in next js

=== What is `async` in JavaScript? ===

### Summary
![How to dynamic)](https://nextjs.org/static/images/learn/dynamic-routes/how-to-dynamic-routes.png)

### API Routes

Use Preview mode for previewing wordpress.
Denoでのパッケージ読み取り方法

「Denoで型を使う場合どうすればいいんだろう？」 と思ったので、まとめました。

本記事は https://deno.land/manual/getting_started/typescript を基に作られています

 - DenoにはNPMのような唯一のパッケージ管理システムは無い
  - そのため package.json も node_modulesも無い
 - Denoでのモジュールのimport方法はURL（[* 拡張子を含む]）指定import
  - `import React from "https://dev.jspm.io/react/index.js";`
  - 見てわかる通り、 `.js` という拡張子が必要
 - 型定義をする場合はグローバルとローカルで方法が異なる
  
**[グローバルにある型を取得する場合]** `@deno-types=` コメントを `import` 時に記述する

```typescript:index.tsx
// @deno-types="https://servestjs.org/@v1.0.0/types/react/index.d.ts";
import React from "https://dev.jspm.io/react/index.js";
```

**[ローカルにある型を取得する場合]** ` /// ` triple-slash directiveを `export`時に 記述する

```javascript:foo.js
/// <reference types="./foo.d.ts" />
export const foo = "foo";
```

それぞれのコメントを見てわかる通り、importと同じ解決ロジックを使うため `.ts` という拡張子が必要
また、当たり前だがこれらが必要なのは `.js` ファイルが絡んでいる時だけ
[メモ] MongoDBで擬似的にエラーを発生させたい時のコマンド

## やりたいこと

DBから何かエラーが返ってきた時のエラーハンドリングが正しく動作するか試すためにMongoDBからエラーが返ってくるようにしたい

### failCommandを使う

詳しくはここを読む。
[The "failCommand" fail point](https://github.com/mongodb/mongo/wiki/The-%22failCommand%22-fail-point)

> mongod 4.0 and mongos 4.1.5.

以上でないと下記のコマンドは使えません。

まず、このコマンドを使うには `enableTestCommands` を有効化しないといけないです。
`/etc/mongod.conf` に以下を追加して再起動してください。


```shell
setParameter:
  enableTestCommands: 1
```

一時的に使用したいだけであれば以下のコマンドでmongodを起動してもOKです。

```shell
mongod --setParameter enableTestCommands=1
```

上記が設定できたらmongo shellにログインしてコマンドを実行します。

```javascript
db.adminCommand({
    configureFailPoint: "failCommand",
    mode: "alwaysOn",
    data: {errorCode: 2, failCommands: ["find"]}
});
```

上記の例の場合、 `find` コマンドが送信された時は必ず( `alwaysOn` )エラーコード2を返す様に設定します。
modeに `{times: N}` をセットすればN回失敗、 `{activationProbability: D}` (Dは0~1)を設定すれば確率で失敗させられます。
エラーではなく接続を切断したい場合は以下の様に `closeConnection: true` を指定すればできます。

```javascript
db.adminCommand({
     configureFailPoint: "failCommand",
     mode: {times: 3},
     data: {closeConnection: true, failCommands: ["find"]}
});
```

それ以外にも色々なオプションがあるので詳しくはWiki参照。
【気づきメモ】モデリング初心者が"【鬼滅の刃】炭治郎モデリング【MAYA】"で作り方を学ぶ

My Name is Izumi.月森イズミです。


【鬼滅の刃】炭治郎モデリング【MAYA】動画のモデリングの出来が素晴らしかったです。
そこで一体どんなことをやっているのか、気になりました。

[【鬼滅の刃】炭治郎モデリング【MAYA】](https://www.youtube.com/watch?v=q2HJXGssb4Q&feature=youtu.be)
(https://www.youtube.com/watch?v=q2HJXGssb4Q&feature=youtu.be)

---
このメモの想定読者は、モデリングソフトを数回触ったことのあるモデリング初心者です。
あたし自身、専門的な知見はありません。その点ご留意いただければと思います。

使うモデリングソフトはmayaが好ましいと思います。しかし工程を脳内変換できる方であれば、他のソフトでも可能かと。
動作実行ソフトはUnityを使っています。

---
以下、動画を見た制作過程のメモです。

#全工程
0:08 分割１のキューブを分割１でスムーズ化して顔を作っている
0:11 シンメトリの軸をオブジェクトxにしている

0:12　右上のツール選択表示ボタンから、ツール選択ウィンドウを表示している
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492471/1d62768e-4d0a-5150-f9c8-24c5e48bfc53.png)

ツール選択ウィンドウから、ソフト選択を使っている（減衰率は１）

アトリビュートエディタよりオブジェクトの透明度を繁文に下げている

##顔正面
0:21　ソフト選択と、エッジループ（ソフト選択）を使って、顔の大きさを調整している
メッシュ表示からソフトエッジを選択している（様子）

##横顔
###鼻
減衰半径2.56のソフト選択をしている
減衰半径1と2.56を行ったり来たりしている

##首まわり
減衰半径7または13のソフト選択をしている

##耳
（耳が急に現れた(￣▽￣;)）

唇、目の枠を調整している
唇は大きめに取り、下絵の線が最も底部になるように

##鼻
鼻下は多角的に見て作っている

下絵と違って、耳の前を持ち上げている

唇に神経を払っている

##テクスチャ
下絵をテクスチャに投影している

UV>平面>投影マニピュレータから
フィット対象：バウンディングボックス
投影元：Z軸（デフォーマの前に投影をチェック）

白目、黒目は別パーツずつ（球体）
球体の中心は、瞳の中心に

ライティングからフラットライトを充てている
白目を消して、下絵の白目でも違和感ないか確認している

黒目は奥行をつぶして楕円にしている
まぶたをかぶせている

既定のライティングの使用を使って確認している

##まつ毛
右にまつ毛を付け、左はまつ毛無し
右でまつ毛の形を調整し、ミラーリングした左で、顔の形を調整している

##眉毛
眉毛は飛び出している
少し浮かせている
ワイヤーフレームつきシェードで確認している

##髪の毛
髪の毛は顔より荒い
縦９分割、横２分割程度で作っている

減衰半径２で調整している
髪と一緒に目も調整している
髪の先は凹にそらせている


真っ黒に（テクスチャを充てて）全体シルエットを確認している

もみあげは合成して、横２分割から調整している部分がある

髪のポリは放射状に構成されている

白目のシャドーを入れている

＃ボディ
（ボディが急に現れたヾ(;´▽｀A``））
洋服は、押し出しオフセットを使って、後で内側を消している

バックルへのこだわりすごい！

歯を作っている

目の堀を単色で塗っている

下絵の色をコピーして、髪のテクスチャを作っている
マルチカットして、ハイライトする部分を作っている
色マップにUVを置いている（UVマップを描くのではなく、配置している）

基本的に、シャドーや色が変わる部分をマルチカットしてポリを作り、テクスチャを張っている！

千鳥格子の境目にポリがあたらないようにしている

ヒストリを削除した

##リグ
15:32 なんか致命的なエラー出た。
（リグを読み込んだ？）

耳の中のラインを描いた

下絵から切り取ってボタン、ピアスを描いた

リグのボーンを伸ばして、アウターと接続した

ここまでmaya

##Unity
シェーダーはUnity拡張エディタである、Shader Forgeを使っている様子

EverydayMotion Pack Freeアセットを使って走らせた。

mayaに戻って、コンポーネントエディタでリグの位置を数値で調整した。

アウターの下半身にはclothコンポーネントを使った。(max Distance =1)

mayaに戻って剣を作った。テクスチャは下絵からとっている。

手の筋のしわを描いた。

---
以上、いろんな気づきを得られた動画でした。
　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　月森
dockerの-dオプション、デタッチドモードって何？

`-d`で実行されるモード。デタッチドモード。

```
docker-compose up -d nginx mysql
```
`-d`はデタッチドモードのオプション。
バックグラウンドでcontainerを立ち上げる。

###バッググラウンドで立ち上げるとは？
バックグラウンドで立ち上げない場合は、コンソールがそのcontainerのログに専有されて他のコマンドを打つことができなくなる。

コンソールをコンソールとして使いたい場合、特にcontainerの挙動を見る必要がないときは`-d`オプションをつければよい。
Android Studio Designペイン Textタブ は どこ？

# 
　「はじめてのAndroidプログラミング第4版」で今日から勉強を始めましたが、１時間でAndroid Studioの使い方がわからなくなりました。
　原因は、バージョンの違いでした。

Android Studio 3.6.3バージョンでの、Designペイン Textタブの位置は、下の写真のとおりです。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501068/2af8cad6-f648-fc23-bd8d-e422052f05d7.png)

なお、 「はじめてのAndroidプログラミング第4版」のp058でつまづきました。


https://qiita.com/guijiu/items/2ee3d257ea4c00fa8eb3
rails generate migrationをdockerで立ち上げたRailsで実行したい

#はじめに
dockerでRailsを立ち上げたら、Railsコマンド使えなかった。困った。
これは完全なる自分用の備忘録です。

##既存DBのテーブルにカラムを追加したい
```
docker-compose exec app rails g migration AddSomeColumnsToHoge
```


`app`はdockerで立ち上がってるものです。`app`とか`web`とかそんな名前で使われることが多い。~~(知らんけど）~~
`AddSomeColumnsToHoge`の`Hoge`はカラムを追加したいテーブル名にしました。

これで`db/migrate`に `20200xxxxxx_add_some_columns_to_Hoge.rb`ファイルが作られます。
中身を見ると

```20200xxxxxx_add_some_columns_to_Hoge.rb
class AddSomeColumnsToHygienists < ActiveRecord::Migration[5.2]
  def change
  end
end
```
こんな感じ。
ここに追加したいカラムを書いていく。


```20200xxxxxx_add_some_columns_to_Hoge.rb
class AddSomeColumnsToHygienists < ActiveRecord::Migration[5.2]
  def change
    add_column :テーブル名, :カラム名, :型
  end
end
```

こんな感じ。
追加したいカラムが複数ある時は下に追記していく。

##型
| 型　　　　　       |    意味            |
|:-----------------|:------------------|
| string           |  文字列            |
| text             |  長い文字列         |
| integer          |  整数              |
| float            |  浮動小数           |
| decimal          |  精度の高い小数      |        
| datetime         |  日時              |
| timestamp        |  タイムスタンプ       |
| time             |  時間              |
| date             |  日付              |
| binary           |  バイナリデータ       |
| boolean          | Boolean           |

以上の型が指定できるみたい。


##マイグレーションを実行
追加したいカラムがかけたらマイグレーションを実行

```
docker-compose exec app rake db:migrate
```

`db/schema.rb`でカラムを追加したテーブルを確認すると、カラムが追加されてます！やったね！


#参考文献
- https://qiita.com/pon-san/items/c54aee04e56e6bb26eff
- https://qiita.com/zaru/items/cde2c46b6126867a1a64



#最後に
dockerで立ち上げたらコマンドややこしいと個人的に感じたので備忘録。
今度は削除とか変更とかで躓きそう。
その時は追記します。
殴り書きなので、不備とかアドバイスとかいただけるとありがたいです。

~~書いておいてアレだけど、基本的には参考文献の記事を参考にすると解決します~~
VisualStudio XMLコメント<inheritdoc/>の使い方

## このドキュメントの内容

VisualStudio2019 16.4 で inheritdoc がサポートされるようになりました。
メソッドをオーバーライドしたり、インターフェースのメンバを実装したりしたときに XML コメントを引き継ぐことができるようになる機能です。

対象のメソッドが複数の型パラメータや複数の引数を持つ場合にパラメータのコメントを期待通りに引き継がせることができず、小一時間試行錯誤してしまいました。単純な勘違いでした。

### 基底クラスに対してXMLコメントを記述する

次のように基底クラスを実装し、XMLコメントを記述しました。
GetItem メソッドは TKey, TItem の二つの型パラメータを持ちます。

```c#
/// <summary>
/// 基底クラス
/// </summary>
abstract class BaseClass
{
    /// <summary>
    /// 指定されたキーに対応するアイテムを取得します。
    /// </summary>
    /// <typeparam name="TKey">キーの型</typeparam>
    /// <typeparam name="TItem">アイテムの型</typeparam>
    /// <param name="key">キー</param>
    /// <param name="item">取得されたアイテム</param>
    /// <returns>取得できた場合 true を返します。</returns>
    /// <exception cref="KeyNotFoundException">
    /// 指定されたキーが存在しません。
    /// </exception>
    public abstract TItem GetItem<TKey, TItem>(TKey key);
}
```

### 誤）各タグに inheritdoc を記述する

summay や typeparam など各タグに inheritdoc を記述してみます。
基底クラスに記述したコメントは引き継がれるものの、型パラメータは全ての型パラメータに対するコメントが連結されて表示されてしまいます。

```c#
/// <summary>
/// サブクラス
/// </summary>
class SubClass : BaseClass
{
    /// <summary>
    /// <inheritdoc/>
    /// </summary>
    /// <typeparam name="TKey"><inheritdoc/></typeparam>
    /// <typeparam name="TItem"><inheritdoc/></typeparam>
    /// <param name="key"><inheritdoc/></param>
    /// <returns><inheritdoc/></returns>
    public override TItem GetItem<TKey, TItem>(TKey key)
    {
        return default;
    }
}
```

TKey のツールチップの表示結果です。TKey と TItem に対するコメントが連結された結果が表示されています。TItem のツールチップも同じです。
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280969/2f6ec06f-9da1-db09-2948-499aa4af7383.png)

### 正）inheritdoc だけ記述する

```c#
/// <summary>
/// サブクラス
/// </summary>
class SubClass : BaseClass
{
    /// <inheritdoc/>
    public override TItem GetItem<TKey, TItem>(TKey key)
    {
        return default;
    }
}
```

Tkey のツールチップの表示結果です。TKey に対するコメントだけが表示されています。
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280969/fb899e92-cdd0-65c7-2e05-2e5aa0b308ff.png)
【UE4】(大幅改良)一人マルチプレイヤー

<h2>PlayerControllerを使って汎用性をもたせる</h2>

前回作成したときはまだ覚えたてで、レベルブループリントに直書きしていました。
これでは当然のこと、レベルが変われば同じ処理を書かなければならないですので、
レベルが増えたらとんでもないことになりますし、設計としてもおかしいです。
https://qiita.com/KLaboratory/items/ebc47bcc22fbf9ff6a6e

以来少し上達して初心者から初級者くらいにはなったと思います。
PlayerControllerの使い方を覚え、今回はこれで実装することができました。
更には、少しばかり演出もいれることもできました。
<h3>必要なもの</h3>
必要というより、今回書いたのは
・PlayerControllerのBP
・アニメBP
だけです。PlayerControllerのBPに移動やジャンプ、その他すべての操作を記載して、アニメBPでそれを動かします。
通常のキャラクターBPには今の所何も書いていません。
指定するメッシュやアニメクラスを指定するだけのために存在しています。
もちろん制作が進めば記載することも出てくると思いますが、
何でもかんでもキャラクターのBPに書かなくてもいいということも少しわかってきました。
<h3>PlayerControllerのBP</h3>
これが全体図です。
![変身new1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588692/95926276-2b10-fbde-08c4-74b0bfa74c67.png)
上半分
![変身new2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588692/25c1e9eb-c361-76ce-88a9-2158cfe8a385.png)
変身するコマンドが入力されると、GetPlayerCharacter→GetActorLocationを取得して、キャラクターの位置にパーティクルを出現させます。
CharacterChangeというbool変数をtrueにして、その間にアニメーションBPを動かします。その間delayします。
2秒というのは変身する間の時間です。これは変身動作によって変えます。変身し終わったタイミングでfalseにします。
ここまでが前半部。次が後半です。
![変身new3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588692/24b7b843-859d-3d69-74c7-27a200288750.png)
GetPlayerCharacter→GetActorTransformで現在の位置を取得しセットします。
続いて今のキャラクターをDestroyします。
FlipFlopにしたのは、今回2つのキャラクターを入れ替えるのでこれが便利だったのですが、
キャラクターをたくさん用意しているならば新たに方法を考えなければなりません。ここは今後の私の課題です。
ここでキャラクタをspawnさせます。
![変身new4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588692/557f40ac-7e70-4287-279d-7f9710579bec.png)
コントローラーを紐付けるためGetPlayerController→Possessとします。
最後に、パーティクルを消して完了です。
<h3>アニメBP</h3>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588692/604bb227-01ef-a68e-d0c3-bfcec5239fe6.png)
下は移動、回転、ジャンプなのでよくあるものですが、今回関係するのは上の部分です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588692/23063f75-f9bd-4946-9e29-73c2987432cb.png)
GetPlayerControllerからControllCharacterにキャストします。
移動や回転と違って、Characterにキャストしたのではダメでした。理由については勉強中です。
PlayerControllerから取ってきたCharacterChange変数をアニメBPのbool変数にセットします。
そうするとアニメーションが動くということになります。
2秒後にCharacterChangeがfalseになるので、アニメーションが止まるということになります。

まだ覚えることがたくさんあり、また、わからないけど結果的に動いているという好ましくないことも多いですが、
少しずつ理解できたらいいかと思います。これからもよろしくおねがいします。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">UnrealEngineここまで上達した。<a href="https://twitter.com/hashtag/UE4?src=hash&amp;ref_src=twsrc%5Etfw">#UE4</a> <a href="https://twitter.com/hashtag/UnrealEngine4?src=hash&amp;ref_src=twsrc%5Etfw">#UnrealEngine4</a> <a href="https://t.co/8W5wZ5RzYk">pic.twitter.com/8W5wZ5RzYk</a></p>&mdash; 特命社長 (@tokumeishatyo) <a href="https://twitter.com/tokumeishatyo/status/1261212935764008960?ref_src=twsrc%5Etfw">May 15, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Cent OS を利用してrbenv で Rubyのダウンロードに失敗

rbenvを利用してrubyをダウンロードしようとしても
no such command install
と出てきてしまい失敗する。
rbenvはダウンロードされているようなのですがどうしてでしょうか。。。。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638258/07c639a1-4355-659a-c48b-8fc8caa05f3e.png)
ポートフォワードをしないでiptablesのNATテーブルに設定をしてみた


- 環境
    - Amazon Linux AMI release 2017.09
    - iptables v1.4.18

[プライベートIPアドレスとパブリックIPアドレスを組合せで変換してくれるNATテーブルに設定を入れる。](https://ponsuke-tarou.hatenablog.com/entry/2019/07/17/003304)
そうすれば、毎回ポートフォワードしなくてすむ。
![2020-05-15 18.21.30.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/ffd5624d-5cb7-1b0e-20ca-337c1e329157.jpeg)


# iptablesの記述方法
参考 : [iptables まとめ - Qiita](https://qiita.com/Tocyuki/items/6d90a1ec4dd8e991a1ce)
## DNAT
インターネットからLAN内にアクセスする時に送信先のパブリックIPアドレスをプライベートIPアドレスに変換してくれるのがデスティネーションNAT

```bash:iptables
-A PREROUTING -p tcp -m tcp --dport {経由地のポート} -j DNAT --to-destination {目的地のプライベートIP}:{目的地のポート}
```

## DNATの記述方法
LAN内からインターネットへ出ていく時に送信元のプライベートIPアドレスをパブリックIPアドレスに変換してくれるのがソースNAT

```bash:iptables
-A POSTROUTING -d {目的地のプライベートIP}/32 -p tcp -m tcp --dport {目的地のポート} -j SNAT --to-source {経由地のプライベートIP}
```

# iptablesのNATテーブルに設定する

|サーバ|パブリックIP|プライベートIP|使うポート番号|
|:-:|:-:|:-:|:-:|
|経由地|12.34.56.78|10.0.0.10|28090|
|目的地|なし|10.0.0.20|8090|

こんな状態の場合、以下のような設定をすれば目的地サーバに「12.34.56.78:28090」でアクセスできる。

```bash
# 1. 設定しようと思っているポート番号が使われていないか確認する
$ sudo cat /etc/sysconfig/iptables | grep 28090

# 2. iptablesのNATテーブルに設定する
$ sudo vi /etc/sysconfig/iptables
$ sudo cat /etc/sysconfig/iptables
#...省略..
*nat
-A PREROUTING -p tcp -m tcp --dport 28090 -j DNAT --to-destination 10.0.0.20:8090
-A POSTROUTING -d 10.0.0.20/32 -p tcp -m tcp --dport 8090 -j SNAT --to-source 10.0.0.10
COMMIT
#...省略..

# 3. iptablesを再起動する
$ sudo service iptables restart
iptables: Flushing firewall rules:                         [  OK  ]
iptables: Setting chains to policy ACCEPT: filter nat      [  OK  ]
iptables: Unloading modules:                               [  OK  ]
iptables: Applying firewall rules:                         [  OK  ]
```
Linux & Pythonで自分自身のピークのメモリ使用量を取る

# 結論
いろいろ調べたのですが、これよりマシな方法が見つかりませんでした。
`/proc`ファイルシステムを使っているので、サポートしているプラットフォーム(Linux等)でしか動きません。

```py
import os
import re

def peak_memory():
    pid = os.getpid()
    with open(f'/proc/{pid}/status') as f:
        # "VmHWM:    862168 kB" の形式になっている行を抜き出す
        for line in f:
            if not line.startswith('VmHWM:'):
                continue
            return int(re.search('[0-9]+', line)[0])
    raise ValueError('Not Found')
```

## なぜピーク使用量か?
とある関数の内部で、一時的にメモリ使用量がハネ上がる現象が起きました。

その関数をプロファイリングしてメモリ使用量がハネ上がっている箇所を突き止めたいのであれば[memory-profiler](https://github.com/pythonprofilers/memory_profiler)を使うのが良いかと思います。
今回、どこで増えるかは分かっていて、増えるのは仕方ないが、具体的にどれくらい増えるのかを調べたかったので、ピーク使用量を知る必要がありました。

## ピーク使用量を使わないとどうなるか。
現在のメモリ使用量であれば[psutil](https://github.com/giampaolo/psutil)で取れます。[このへん](https://psutil.readthedocs.io/en/latest/#psutil.Process.memory_full_info)を参照。

ですが、ピークではないので、例えばこういうコードのとき

```py:現在の使用メモリを取る
import psutil

def f():
    a = [0] * 20000000

print(psutil.Process().memory_full_info())
f()
print(psutil.Process().memory_full_info())
```

以下のような結果になります。

```text:あんまり変わらない
pfullmem(rss=12406784, vms=18395136, shared=6369280, text=4096, lib=0, data=6225920, dirty=0, uss=8134656, pss=9319424, swap=0)
pfullmem(rss=12619776, vms=18354176, shared=6385664, text=4096, lib=0, data=6184960, dirty=0, uss=8253440, pss=9438208, swap=0)
```

`f()`の中ではメモリをいっぱい使っているのですが、外では使っていないので、外からでは分からないんですね。

```py:fの中でも取ってみる
import psutil

def f():
    a = [0] * 20000000
    print('inner: ', psutil.Process().memory_full_info())

print('before:', psutil.Process().memory_full_info())
f()
print('after: ', psutil.Process().memory_full_info())
```

この場合、以下のようになります。

```text:真ん中だけいっぱい使っている
before: pfullmem(rss=12476416, vms=18395136, shared=6443008, text=4096, lib=0, data=6225920, dirty=0, uss=8179712, pss=9407488, swap=0)
inner:  pfullmem(rss=172519424, vms=178356224, shared=6520832, text=4096, lib=0, data=166187008, dirty=0, uss=168300544, pss=169528320, swap=0)
after:  pfullmem(rss=12754944, vms=18354176, shared=6520832, text=4096, lib=0, data=6184960, dirty=0, uss=8298496, pss=9526272, swap=0)
```

メモリを使っていそうなところに、ピンポイントでメモリ使用量を取るコードを入れられるなら、それでいいんですが、そうしたくなかったわけです。

## 今回の方法ではどうなったか?

```py:ピーク使用量を取る
import os
import re

def peak_memory():
    pid = os.getpid()
    with open(f'/proc/{pid}/status') as f:
        for line in f:
            if not line.startswith('VmHWM:'):
                continue
            return int(re.search('[0-9]+', line)[0])
    raise ValueError('Not Found')

def f():
    a = [0] * 20000000

print('before:', peak_memory(), 'KB')
f()
print('after: ', peak_memory(), 'KB')
```

結果、こうなりました。

```text:afterで増えてる
before: 9072 KB
after:  165532 KB
```

めでたしめでたし。

### 参考文献
[Linux プログラムのメモリ消費量を測る](https://qiita.com/propella/items/4a7f403015e0fbbf6fc6)

### コードについて
本記事に掲載されたコードを、自身・自社が開発されているPythonスクリプトに利用いただくのはご自由にどうぞ。
iOSの購読管理画面の呼び出し方

メモな感じですいません。
iOSの購読管理画面を呼び出す方法、ここに書いてあります。
https://developer.apple.com/jp/documentation/storekit/in-app_purchase/

```  
let url = "https://apps.apple.com/account/subscriptions"       
UIApplication.shared.open(URL(string: url)!, options: [:], completionHandler: nil)
```

WWDCのビデオはこちらです。
https://developer.apple.com/videos/play/wwdc2018/705/
Laravelで多言語処理を行う


# 目次
Laravelの記事一覧は下記
[PHPフレームワークLaravelの使い方](https://qiita.com/toontoon/items/c4d0371e504c37f6576e)

# Laravelバージョン
動作確認はLaravel Framework 7.19.1で行っています

# 前提条件
[eclipseでLaravel開発環境を構築する。デバッグでブレークポイントをつけて止める。(WindowsもVagrantもdockerも)](https://qiita.com/toontoon/items/76fa7f8845b20776077c)
本記事は上記が完了している前提で書かれています
プロジェクトの作成もapacheの設定も上記で行っています


# メッセージファイル作成
(1) /sample/resources/lang/en/messages.phpを作成

```en/messages.php
<?php

return [
    'sample' => 'sample message'
];
```

(2) /sample/resources/lang/jaフォルダを作成
(3) /sample/resources/lang/ja/messages.phpを作成

```ja/messages.php
<?php

return [
    'sample' => 'サンプルメッセージ'
];
```

# Controllerにメソッド追加
(1) /sample/app/Http/Controllers/SampleController.phpに下記を追記
`use Illuminate\Support\Facades\App;`

(2) /sample/app/Http/Controllers/SampleController.phpにmultiLangメソッドを追記

```
    public function multiLang(Request $request)
    {
        if ($request->query('lang') === 'ja') {
            App::setLocale('ja');
        } else {
            App::setLocale('en');
        }
        $data = [
            'msg' => __('messages.sample'),
        ];
        return view('sample.multiLang', $data);
    }
```

App::setLocaleメソッドを使うことによってresources/langフォルダ内のどのフォルダを使うか設定することができます
App::setLocaleメソッドを呼ばなかった場合、config/app.php内のlocaleが使われます
__('messages.sample')でmessages.php内のsample要素の値を取得できます

(3) /sample/routes/web.phpに下記を追記
`Route::get('sample/multi-lang', 'SampleController@multiLang');`


# viewの作成
 /sample/resources/views/sample/multiLang.blade.phpファイル作成

```multiLang.blade.php
<html>
    <head>
        <title>sample</title>
    </head>
    <body>
        <div>{{ $msg }}</div>
        <div>@lang('messages.sample')</div>
    </body>
</html>
```

bladeでは`@lang`('messages.sample')でmessages.php内のsample要素の値を取得できます
{{ __('messages.welcome') }}と書いても取得できます


# 動作確認
`http://localhost/laravelSample/sample/multi-lang`

```
sample message
sample message
```

`http://localhost/laravelSample/sample/multi-lang?lang=ja`

```
サンプルメッセージ
サンプルメッセージ
```
VSCode

# VSCode 拡張機能備忘

## インストールしてるもの

- HTML系
    - Auto Close Tag
    - Auto Rename Tag
    - colorize
        - CSS の色指定が楽になる

- Markdown
    - Markdown All in One
    - Markdown PDF
    - Markdownlint
    - Marp

- Javascript
    - ESLint
    - JavaScript code snippets
    - npm
    - npm Intellisense

- 日本語
    - Japanese Language Pack for VisualStudioCode
    - Japanese Word Handler

- Beautify
- Bracket Pair Colorizer
- Code Runner
- open in browser
- Live Server
- open-in-browser
- Output Colorizer
- Path Autocomplete
- Path Intellisense
- Prettier
- Rainbow CSV
- Setting Sync
- SSH FS
- Trailing Spaces
- Vetur
- vscode-icons
OCamlの学習をVSCode Remote Developmentで始めた

OCamlの勉強をしたいと思い、まず環境を立ち上げようと思った。

https://try.ocamlpro.com/

というブラウザで動くRepl?サービスもあるらしいのだが、できれば使い慣れたVSCodeでやりたいなーと思ったので、構築してみる。

# ３行で立ち上げる

- DockerとVSCodeをインストールし、[Remote Development Extension Pack](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack)をVSCodeの拡張機能から追加
- https://github.com/mk2/ocaml-dev-workspace をgitでクローン
- クローンしたリポジトリをVSCodeで開き、Remote Development機能を使って環境を立ち上げる

おしまい

# 使っているもの

- VSCode Remote Development
    - https://code.visualstudio.com/docs/remote/remote-overview
    - VSCodeのインターフェースだけローカルで動かし、開発時に使うプログラム・環境は別のマシンで動かす、という技術
    - macOS/Windows両方でできるといいなーと思ったので使う
- Dockerコンテナ
    - OCamlの公式が出してるコンテナイメージがあったので使う
    - https://hub.docker.com/r/ocaml/opam2
    - aptが使えた
- Ocaml Platform
    - https://marketplace.visualstudio.com/items?itemName=ocamllabs.ocaml-platform
    - VSCodeのプラグイン
    - VSCodeのプラグインは、Ocaml/ReasonML用がいくつも乱立しているようでどれを使えばよいのかよくわからなかったのだが、Qiitaでおすすめしている記事があったので、Ocaml Platformを使用
    - まだ未完成らしいが、初学者が学習用に使うなら大丈夫…そうな気がしている
    - ただし、エラーがでてもそれがプラグインの問題なのか自分の理解の問題なのかはわからない :innocent:
centos8apachでSSL化してみた

※注意
最近メモ書きをマークダウンで書くので、
そのままQiitaに上げれるなぁと思い投稿してみました。
個人使用のサーバーで、
セキュリティーとかはあまり気にして書いてません。

\###SSL証明書の導入手順（centos8 apach）

### ファイアウォール設定

httpとhttpsの通信を許可

```shellsession
firewall-cmd --permanent --add-service=http
firewall-cmd --permanent --add-service=https
firewall-cmd --reload
firewall-cmd --permanent --list-all
```

### サーバーホスト名の設定

`vi /etc/httpd/conf/httpd.conf`の
ServerNameを自分のドメイン名に変更

```shell
#ServerName www.example.com:80
ServerName www.selen.tokyo:80
```

### Let's Encryptのインストール

```shell
wget https://dl.eff.org/certbot-auto
mv certbot-auto /usr/local/bin/certbot-auto
chown root /usr/local/bin/certbot-auto
chmod 0755 /usr/local/bin/certbot-auto
```

`/etc/httpd/conf/httpd.conf`ファイルの最後に以下を追記

```shell
#SSL導入のため追記
NameVirtualHost *:80
<VirtualHost *:80>
ServerAdmin root@www.selen.tokyo
DocumentRoot "/var/www/html/selenreact/build"
ServerName www.selen.tokyo:80
</VirtualHost>
```

Let's Encrypt設定

```shell
/usr/local/bin/certbot-auto --apache
```

各質問に答えて入力
Congratulations!と出たら完了

のハズだったが、
私の環境の場合、成功ならず。
ページを確認すると、設定中のサーバーからの証明書になっていて、
いったん証明書の削除下記と

```shell
/usr/local/bin/certbot-auto delete -d www.selen.tokyo
```

SSL
下記のsslapachの設定ファイルを削除し、
`/etc/httpd/conf.d/autoindex.conf`
`/etc/httpd/conf/httpd-le-ssl.conf`

httpd.confの

```shell
Include /etc/httpd/conf/httpd-le-ssl.conf
```
の部分を削除し、httpdの再起動できることを確認して、
```shell
/usr/local/bin/certbot-auto --apache
```
をやり直すとSSL化できていた。

* * *

\###自動更新
SSL証明書は約３ヶ月で有効期限が切れるので、更新を自動設定

更新コマンド

```shell
certbot-auto renew
```

```shell
# /bin/sh
cd /root
certbot-auto renew
# ログ出力設定（下記無くても可）
LOG_ERR=/err.log
exec 2>>$LOG_ERR
date>>certbot-auto.log
```

cronの設定をする。

```shell
crontab -e
```

下記を追記

```shell
0 0 1 * * /root/certbot.sh:w
```

ログ出力は場所と権限を変えたほうがいいんだろうなぁ...

* * *

### Apache環境重要な設定値

SSLCertificateKeyFile：秘密鍵のファイルを指定
SSLCertificateFile：サーバー証明書のファイルを指定

### Apache起動・再起動・停止

`systemctl restart httpd`

`systemctl stop httpd`

`systemctl enable httpd`
HTML&CSS基本

タグの違いが分からなくて苦手意識しかなかったが特徴がわかった備忘録

HTMLは一番基本のウェブに表示されるもの
<!DOCTYPE HTML>
&lt;html&gt;
　&lt;head&gt;
　　&lt;meta charset="UTF-8"&gt;
　　&lt;title/title&gt;
　&lt;/head&gt;
　&lt;body&gt;
　　　　←ここに表示するものを書いていく
　&lt;/body&gt;
&lt;/html&gt;
永遠に書きかけかもしれない。
この記事を初めて書いた時&lt;&gt;がそのまま書くと消えてしまってどうしたらいいか分からなくてそのまま保存にしてた。

自分で調べて実装して行かないと覚えないんだな。

CSSはHTMLで書いた文字だけのものを着飾らせるもの。
ノートで言うと文字を黒だけでなく、赤にしたり枠で囲ったりすることで
見た目を作る。それぞれ画面に対してサイズ指定する事でデザインになる

どうしても曖昧だったのがBody要素(内容を書いていく部分)のタグの違い。

hタグ。見出し要素でh１などとして使うと勝手に大文字の太字になった上にユーザーや検索エンジンに対しても意味をもつ（今調べながら書いた）SEO対策にもなる。

pタグ。段落要素。囲ったものが１の文章として扱われる。

divタグ。単体でも使えるが　class属性を与えてそれぞれを個別のものとして扱えるようにする。
使う頻度としては　div class=""が一番多い。追加要素が出来ても構造に対して影響を与えないから
　
bタグ。太字を表す。囲ったものを太字にする。

aタグ。文字を別ページへのリンクにする。

タグはブロックレベル要素・インライン要素に分かれ
ブロックレベル要素はノートのページに対して枠を決めれる。
hタグでページの半分を使う




ある程度コードを書いて思った事は全体像が見えていなければ何を使ってどう構成するのか動かすときもチグハグになってしまう
RailsでRSSを生成した時の備忘録(RSS2.0準拠)

## これなに
RailsでRSSを生成した時にちょっと困ったりして調べたのでまとめておく。
RSS::MakerとかBuilder::XmlMarkupとかあるけど、[slim](https://github.com/slim-template/slim)で書けばいいじゃない！と思ったけど結局builderでも書きました。
たぶんSmartNewsの[SmartFormat仕様書](url: https://publishers.smartnews.com/hc/ja/articles/360010977813-SmartFormat%E4%BB%95%E6%A7%98%E6%9B%B8-RSS2-0%E6%BA%96%E6%8B%A0-)の必須項目は埋めてあるはず。

## サンプルコード

postsテーブルの構造はわりと一般的だと思うので割愛します。

### slim
```rss.xml.slim
doctype xml
rss version='2.0' xmlns:content='http://purl.org/rss/1.0/modules/content/' xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:media='http://search.yahoo.com/mrss/'

  channel
    title タイトル
    link = Settings.url
    description ディスクリプション
    language ja
    pubDate = Time.zone.now.rfc822
    copyright Copyright My Blog, Inc. All Right Reserved.

    - @posts.each do |post|
      item
        title = post.title
        link = post_url(post.permalink)
        guid = post.permalink
        description = post.description
        pubDate = post.published_at.rfc822
        category = post.category.name
        content:encoded
          = cdata_section(render partial: 'posts', formats: :html, locals: { post: post })
        media:thumbnail url=post.eyecatch_url
        dc:creator = post.author.name
```

### builder
```rss.xml.builder
xml.instruct! :xml, version: 1.0
xml.rss(version: 2.0, 'xmlns:content': 'http://purl.org/rss/1.0/modules/content/', 'xmlns:dc': 'http://purl.org/dc/elements/1.1/', 'xmlns:media': 'http://search.yahoo.com/mrss/') do
  xml.channel do
    xml.title 'タイトル'
    xml.link Settings.url
    xml.description 'ディスクリプション'
    xml.language 'ja'
    xml.pubDate Time.zone.now.rfc822
    xml.copyright 'Copyright My Blog, Inc. All Right Reserved.'

    @posts.each do |post|
      xml.item do
        xml.title post.title
        xml.link post_url(post.permalink)
        xml.guid post.permalink
        xml.description post.description
        xml.pubDate post.published_at.rfc822
        xml.category post.category.name
        xml.tag!('content:encoded') do
          xml.cdata! render partial: 'posts', formats: :html, locals: { post: post }
        end
        xml.tag!('media:thumbnail', url: post.eyecatch_url)
        xml.tag!('dc:creator', post.author.name)
      end
    end
  end
end

```


## メモ
- xmlでコロン付きのタグを扱いたい時はxml.tag!を使う
- cdataにしたい場合、slimではcdata_sectionヘルパー、xmlではxml.cdata!を使う
- slimはもちろんbuilderでもpartialを呼べる
検索機能の実装について

まずは検索機能の仕組みについて説明します。

1. INPUTタグに文字を入力
2. Submitボタンを押す
3. GETメソッド通信が走る
4. 検索ワードをDBに探しにいく
5. DBで見つかった検索ワードをコントローラーに渡す
6. コントローラーでDBから受け取った結果を、インスタンスメソッドに格納する
7. 値の格納されたインスタンスメソッドは、ビューに渡され、画面に出力される

---

実装に必要な記述を記載しておきます。
（例）タスク名とステータス（wip:着手中、peding:未着手、done:完了）の検索を、タスク一覧ページに表示させる

 ```ruby:index.html.erb
<div class="search">
  <%= form_with url: tasks_path, method: :get, local: true do |form| %>
    <div class="task_name">
      <%= form.label :task_name, t('view.task_name') %>
      <%= form.text_field :task_name %>
    </div>
    <div class="status">
      <%= form.label :status, t('view.status') %>
      <%= form.select :status, [ t('view.wip'), t('view.peding'), t('view.done') ], { include_blank: true } %>
    </div>
    <%= form.hidden_field :search, value: 'true' %>
    <%= form.submit (t('helpers.submit.search')) %>
  <% end %>
</div>

<h1><%= t('view.task_list')%></h1>
<p><%= notice %></p>
<div class="table">
  <table align="center">
    <tr>
      <th><%= t('view.enddeadline') %></th>
      <th><%= t('view.task_name') %></th>
      <th><%= t('view.content') %></th>
      <th><%= t('view.status') %></th>
      <th><%= t('view.priority') %></th>
    </tr>
  <% @tasks.each do |task| %>
    <tr>
      <td class="date_row"><%= task.end_on %></td>
      <td class="task_row"><%= task.task_name %></td>
      <td><%= task.content %></td>
      <td><%= task.status %></td>
      <td><%= task.priority %></td>
      <td><%= link_to t('view.check_contents'), task_path(task.id) %></td>
      <td><%= link_to t('view.edit_task'), edit_task_path(task.id) %></td>
      <td><%= link_to t('view.delete_task'), task_path(task.id), method: :delete, data: {confirm: t('view.confirm')} %></td>
    </tr>
  <% end %>
  </table>
</div>
</div>
```
スコープメソッドを使用することで、コントローラーで記述するコードをスッキリ簡潔に書くことができます。

```ruby:task.rb
class Task < ApplicationRecord
  scope :task_name_like, -> task_name { where('task_name LIKE ?', "%#{task_name}%") }
  scope :status, -> status { where(status: status) }
end
```

`1つ目の条件分岐:タスク名とステータス両方の絞り込み検索`
`2つ目の条件分岐:タスク名のみの検索`
`3つ目の条件分岐:ステータスのみの検索`

```ruby:tasks_controller.rb
class TasksController < ApplicationController
  
  def index
    if params[:search].present?
      if params[:task_name].present? && params[:status].present?
        @tasks = Task.status(params[:status]).task_name_like(params[:task_name])
      elsif params[:task_name].present?
        @tasks = Task.task_name_like(params[:task_name])
      elsif params[:status].present?
        @tasks = Task.status(params[:status])
      end
    end
  end
```
Deno: テキストファイルを削除 (Delete)

こちらで作成したデータを削除します。
[Deno: テキストファイルを作成 (Create)](https://qiita.com/ekzemplaro/items/8fbe34b16c3d457ca56c)

## プログラム

```ts:text_delete.ts
// ---------------------------------------------------------------
//	text_delete.ts
//
//					May/01/2020
//
// ---------------------------------------------------------------
import { text_read_proc } from "./text_manipulate.ts"
import { text_write_proc } from "./text_manipulate.ts"

// ---------------------------------------------------------------
console.error ("*** 開始 ***")
//
var file_txt:string = Deno.args[0]
var key:string = Deno.args[1]

console.log (file_txt)
console.log (key)

var dict_aa = text_read_proc (file_txt)

if (key in dict_aa)
	{
	delete dict_aa[key]
	text_write_proc (file_txt,dict_aa)
	}

console.error ("*** 終了 ***")

// ---------------------------------------------------------------
```

text_manipulate.ts はこちらと同じ
[Deno: テキストファイルを更新 (Update)](https://qiita.com/ekzemplaro/items/b884c5abd035b5bd8b73)

## 実行コマンド

```bash
deno run --allow-read --allow-write  text_delete.ts ./cities.txt t2384
```

## 確認したバージョン

```text
$ deno --version
deno 1.31.0 (release, x86_64-unknown-linux-gnu)
v8 11.0.226.13
typescript 4.9.4
```
Deno: テキストファイルを読む (Read)

こちらで作成したデータを読みます。
[Deno: テキストファイルを作成 (Create)](https://qiita.com/ekzemplaro/items/8fbe34b16c3d457ca56c)

## プログラム

```ts:text_read.ts
// ---------------------------------------------------------------
//	text_read.ts
//
//					Feb/27/2023
//
// ---------------------------------------------------------------
function sort_by_key_proc(left: {[key: string]: any},right: {[key: string]: any})
{
	const aa:string = left.key
	const bb:string = right.key

	var rvalue = 0

	if (aa < bb)
		{
		rvalue = -1
		}
	else if (aa > bb)
		{
		rvalue = 1
		}

	return	rvalue
}

// ---------------------------------------------------------------
function sort_proc (dict_aa: {[key: string]: any})
{
	var array = new Array()
	for(var it in dict_aa)
		{
		array.push({'key':String (it), 'value':dict_aa[it]})
		}

	array.sort (sort_by_key_proc)

	return array
}

// ---------------------------------------------------------------
function dict_display_proc(dict_aa: {[key: string]: any})
{
	var array_aa = sort_proc (dict_aa)

	for (var it in array_aa)
		{
		var key:string = array_aa[it].key
		var value = array_aa[it].value

		var out_str:string = key + "\t"
		out_str += value["name"] + "\t"
		out_str += value["population"] + "\t"
		out_str += value["date_mod"]
		console.log (out_str)
		}	
}

// ---------------------------------------------------------------
function text_read_proc (file_in: string)
{
	var dict_aa : {[key: string]: any} = new Object()

	var data:string = Deno.readTextFileSync (file_in,{ encoding: "utf8" })

	var lines_in: string[] = ("" + data).split ("\n")

	for (var it=0; it< lines_in.length; it++)
		{
		var rr: string[] = lines_in[it].split ("\t")

		if (1 < rr.length)
			{
			dict_aa[rr[0]] = {"name": rr[1],"population": rr[2],
				"date_mod": rr[3]}
			}
		}

	return	dict_aa
}

// ---------------------------------------------------------------
console.error ("*** 開始 ***")
//
var file_in: string = Deno.args[0]

console.log (file_in)

var dict_aa: {[key: string]: any} = text_read_proc (file_in)

dict_display_proc (dict_aa)

console.error ("*** 終了 ***")
// ---------------------------------------------------------------
```

## 実行コマンド

```bash
deno run  --allow-read text_read.ts cities.txt
```

## 確認したバージョン

```text
$ deno --version
deno 1.31.0 (release, x86_64-unknown-linux-gnu)
v8 11.0.226.13
typescript 4.9.4
```
コードを書く上で使えそうなJava14新機能

# Java14

2020/3/17にJava14がリリースされました。
Java14で追加された機能のうち、コードを書く上で使えそうな機能を紹介してみようと思います。


# record(preview)

データ保持用のクラスが簡単に作ることができる。

```java
public record Customer(String name, String age){}
```
以下のクラスと同等のものが作成される。

```java
public class Customer {
    private final String name;

    private final String age;

    public Customer(String name, String age) {
        this.name = name;
        this.age = age;
    }

    public String name() {
        return this.name;
    }

    public String age() {
        return this.age;
    }

    public String hashCode() {...}

    public boolean equals() {...}

    public String toString() {...}
}
```

値設定用のメソッドは定義されないため、インスタンス生成後に値を変更することはできない。

# テキストブロック

改行を含んだ文字列を定義することができるようになった。
"ではなく"""で文字列を囲むとテキストブロックとして認識する。

```java
String str1 = "aaaa\n"
    + "bbb";

String str2 = """
   aaa
   bbb\
   """
```

上記2つの文字列は同じことを示します。
改行をしたくない場合は場合は\を入れる。

# Helpful NullPointerExceptions

NullPointerExceptionが発生した際のメッセージが詳細に出せるようになった。


```java
String str = null;
str.length(); // NullPointerException
```

デフォルトでは以下のような例外が出力される。

```
Exception in thread "main" java.lang.NullPointerException
	at Test.main(Test.java:5)
```

java14では「-XX:+ShowCodeDetailsInExceptionMessages」をつけて実行すると、以下のような詳細な例外が出力されるようになる。

```
Exception in thread "main" java.lang.NullPointerException: Cannot invoke "String.length()" because "<local1>" is null
	at Test.main(Test.java:5)
```

# パターンマッチングinstanceof(preview)

instanceofで型のチェックをしつつ、その型の変数を定義できるようになった。

```java

Object obj = "obj";
if (obj instanceof String str){
    System.out.println(str.length());
}
```
【JavaScript】constで宣言した配列の値は変えられるのか？(→変えられる)


## 結論
タイトルの答えは「YES。変えられる。」

## 理由

「[JavaScriptでconstの配列の値が変わる理由](https://iwb.jp/javascript-const-array-variable-not-change/)」という記事を読んだところ、
> constの値は不変ということではなく、変数識別子が再代入できないというだけだからだ。

というのが結論だったが、実際の挙動も確かめたかったので手を動かしてみた。


## 実行できるパターン

#### 1.インデックスを指定した値の代入
```javascript
const arr1 = [];
arr1[0] = 'a';
console.log(arr1);

// 実行結果
// [ 'a' ]
```

#### 2. 要素の追加
```javascript
const arr2 = [];
arr2.push('b');
console.log(arr2);

// 実行結果
// ['b']
```

#### 3.要素の削除
```javascript
const arr3 = [1, 2, 3];
arr3.splice(1, 1);
console.log(arr3);

// 実行結果
// [ 1, 3 ]
```

#### 4. 参照している配列への要素の追加
```javascript 
const arr4 = [1, 2, 3];
const arr5 = arr4;
arr5[0] = 'c';
console.log(arr4);
console.log(arr5);

// 実行結果
// ['c', 2, 3]
// ['c', 2, 3]
```


## 実行できないパターン

#### 配列自体への再代入

```javascript
const arr6 = [1, 2, 3];
arr6 = [4, 5, 6];

// 実行結果
// arr6 = [4, 5, 6];
//      ^
//   TypeError: Assignment to constant variable.
```

## まとめ
配列の中身の操作や再代入に関しては、要素を追加しようが消そうが怒られることなく実行できた。
ただし「配列それ自体への再代入」はできなかった。
Deep Learning Specialization (Coursera) 自習記録 (C1W4)

# はじめに
[Deep Learning Specialization](https://www.coursera.org/specializations/deep-learning) の Course 1, Week 4 (C1W4) の内容です。

# (C1W4L01) Deep L-layer Neural Network
## 内容

- Deep neural network の記号の説明
- $n^{[l]}$ ; #units in layer $l$
- $a^{[l]}$ ; activations in layer $l$ ($x = a^{[0]}$, $\hat{y} = a^{[L]}$)
- $W^{[l]}$, $b^{[l]}$ ; weights for $z^{[l]}$

# (C1W4L02) Forward Propagation in a Deep Network
## 内容

```math
z^{[l]} = W^{[l]} a^{[l-1]} + b^{[l]} \\
a^{[l]} = g^{[l]}\left(z^{[l]}\right)
```

- ベクトル化する (Vectorized)

```math
Z^{[l]} = W^{[l]} A^{[l-1]} + b^{[l]} \\
A^{[l]} = g^{[l]}\left(Z^{[l]}\right)

```
# (C1W4L03) Getting your matrix dimensions right
## 内容

- バグを除去するためには，行列の次元があっているか調べる
- $W^{[l]}$ ; $(n^{[l]}, n^{[l-1]})$
- $b^{[l]}$ ; $(n^{[l]}, 1)$
- $dW^{[l]}$ ; $(n^{[l]}, n^{[l-1]})$
- $db^{[l]}$ ; $(n^{[l]}, 1)$ 
- $Z^{[l]}$ , $A^{[l]}$ ; $(n^{[l]}, m)$

# (C1W4L04) Why deep representation?
## 内容

- 浅い neural network より深い neural network のほうが，少ないユニットで複雑な表現ができる

# (C1W4L05) Building Blocks of a Deep Neural Network
## 内容

- Forward propagation と Back propagation をブロック図を使って説明

# (C1W4L06) Forward and backward propagation
## 内容

- ブロック図を発展させて Forward propagation と Backward propagation の全体像を説明
- Forward propagation
    - Input ; $A^{[l-1]}$
    - Output ; $A^{[l]}$ (cache $Z^{[l]}$)

```math
Z^{[l]} = W^{[l]} A^{[l-1]} + b^{[l]} \\
A^{[l]} = g^{[l]}\left(Z^{[l]}\right)
```

- Backward propagation
    - Input ; $da^{[l]}$
    - Output ; $da^{[l-1]}$, $dW^{[l]}$, $db^{[l]}$

```math
dZ^{[l]} = dA^{[l]} \ast g^{[l]\prime}\left(Z^{[l]}\right) \\
dW^{[l]} = \frac{1}{m}dZ^{[l]}A^{[l-1]T} \\
db^{[l]} = \frac{1}{m}\textrm{np.sum}\left(dZ^{[l]}\textrm{, axis=1, keepdims=True}\right) \\
dA^{[l-1]} = W^{[l]T}dZ^{[l]}
```

# (C1W4L07) Parameters vs Hyperparameters
## 内容

- Parameters ; $W^{[1]}$，$b^{[1]}$，…
- Hyperparameters ; learning rate $\alpha$，#iterations, #hidden layer $L$, #hidden units $n^{[i]}$, activation function の選択
- hyperparameters は parameters を制御するパラメタ 

# (C1W4L08) What does this have to do with the brain
## 内容

- ディープラーニングと脳の関係性について
- ニューロンはロジスティック回帰に似ているが，あまりこの比喩は使わない 


# 参考
- [Deep Learning Specialization (Coursera) 自習記録 (目次)](https://qiita.com/satomshr/items/dc4ae752c558798bbef6)
AsyncMemoizerをざっくり理解する

個人的には、これまで実装する機会はなかったものの、
他人のコードを読んでいると、時々出くわすので、忘れないための備忘録として記載しておきます。

#AsyncMemoizer

非同期処理を実行して、最初の一回の結果をキャッシュするときに使うもの。
例えば、StateFullWidgetを使用するシチュエーションにおいて、FutureBuilderを入れ込んでデータ取得している場合、
setStateしてリビルドされる度に、FutureBuilderがデータを取得してしまいます。
そういった非同期処理の冗長な再実行を回避させる事ができます。

#使用方法
非常に簡単で、.runOnceの引数に、非同期処理を渡すだけで実装できます。

```dart
class _SomeScreenState extends State<SomeScreen>

 AsyncMemoizer _memoizer = AsyncMemoizer();
 @override
  Widget build(BuildContext context) {
     return Scaffold(

//省略
         child: FutureBuilder(
            future: () => async {
               return _memoizer.runOnce(() async {
                   return await getInitData();
               });
            },
         );

//省略
```

ただし、画面遷移後に、データがキャッシュされていたらまずい様な場合
（再度画面を表示した時は、データを再取得したいような場合）は、
画面遷移後の処理として、要所要所に_memorizerをクリアする処理をいれないといけません。

# AsyncMemoizerの使用にあたって
ピンポイントでキャッシュ制御出来て便利そうである一方で、
そのクリア処理等、ちょっと細かな制御が発生する事があるので注意が必要かと思います。

基本的に、以下を守るように実装出来ていれば、あまり出番はないものだと思っています。

- 基本的にStatelessWidgetで実装する。
- StateFullWidgetとする必要がある場合は、最小コンポーネントに切り出して、最下層に追いやる。
PoCを作ろう～eInk ESP-32 電子ペーパーモバイルデバイスを作る１

先日公開しましたeInk ESP-32 電子ペーパーモバイルデバイスを作ったよ（PDA)を使いPoCを作るまでを少し書いてみます。
https://qiita.com/usashirou/items/077ed55db5714db1edb4
なお、PoCとは、プルーフオブコンセプトと言い、概念実証と言われています。
世間ではPoCで終わると言われますが、PoCは、1個だけの場合も、数百個作ることもあります。
動くものを作り、テストをすることは、机上とは全く異なり、PoCまで行うことは正しい行為だと思っています。

今回、これを書いた理由は、何かを作りたいけど、何からやれば良いかわからない
と言う人に少しでも助けになればと思って書いたものとなります。

なお、本件は、売れるものを作るではなく、
・一般では販売されない
・商品化されない
・独自の機能を追加したオリジナル
を作る事を主題としています。

#企画を作る
皆さんは企画ってどういうものだと思いますか？
・ターゲットはだれか？
・機能はどうするか？
・デザインは？
・値段は？
と決める必要があります。

私が昔関わった日本の大手企業の企画は、商品を購入する人ではなく、企画にアサインされた人でした。
結果として統計データなどを使いアーリーアダプターや、レイトマジョリティなどのターゲットとなる人を勝手に想定し消費者亡き状態で商品企画を進めており商品を欲しい人の思想や、気持ちは皆無でした。

数万台ではマスプロで売れた（ヒットする）とは言いません。
企画は統計データなどを使う事で失敗の責任を負わないように努力しているのですが、これでは消費者が本当に欲しいものは作れません。

ですが、私たちが作るPoCは売れる必要はありません。
自分が欲しいと思えるものを作る事が可能ですからやってみましょう。

#ターゲットは？
今回のデバイスは展示会に出ていたものを見て独自のエッセンスを加えて作ってみたものです
![IMG_7520.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/cab21676-5e21-7f0e-527c-83227b88af21.jpeg)

展示会では、病院の順番を知らせてくれるデバイスというものでした。
私は、ここから
・寝たきり老人のコミュニケーションツール
としても使えると考えました。
寝たきり老人がトイレ、ごはん、テレビ
といいたいけど、ヘルパーさんが近くに居ないというケースがあります。
そういったときに、使えるデバイスはどうでしょう？
玄関先に置いておいて、出かける時に押すボタンでもいいですよね。
バスや電車の時間がわかっても良いですよね

ちなみに、水平展開すると、美術館等での案内などにも使えますね
（でも、タブレットで同じことが出来るので要らないですね）

ここまで見て売れるのか？
と思いますよね。

正直、売れません、売れて1万台ですから金型を起こすとペイしないでしょう。
(金型代が約1000万かかりますから1台1200円のコストになります）

そもそもタブレットが5000円で買えるのに、これが欲しいですか？
電子ペーパーは、書換時にのみ電気を使います。
通信をしなければ、電池が長持ちするとはいえ、持っても1週間でしょう。
なかなか難しいデバイスですね。
でも、売ることが目的でないので、自由に作ることができますね
ただし、最低限、自分がターゲットとする層を考え、企画してみることをお勧めします。
（そうじゃないと、作ったけど、これ何に使うの？と聞かれても詰まってしまいますからね）

#サイズ
次は、サイズです、持ち運べるサイズはどの程度か？
市販のタブレットサイズに収めたいですよね。

でも、僕らが同じ集積度のものを作る事はできません。
なので、ある程度、大きいけど、手で持てるサイズで検討してみましょう。

#付加機能
今あるものを作っても無意味ですから、付加機能や特徴を加えましょう。
LEDやボタンは必須ですよね。
スピーカーもあると良いし、温湿度センサーや、加速度センサーなんて使えるかも？

という事で
・加速度センサー
・温湿度センサー
・ボタン
・スピーカー
・フルカラーLED
となりました。

#ポンチ絵(ラフ画）
ターゲットが決まり、サイズが決まり、機能が決まったので
筐体デザインに入ります。
素人が作るのですから、そんなたいそうなものは必要ありません。
![IMG_1574.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/149beb9d-9890-9f68-ac6f-eda50dbbd6f0.jpeg)
私は、デザインセンスがありませんから何個も書いて悩むことになります。
プロのデザイナーがいるならば、ポンチ絵を清書してもらうのも手です。
プロのデザイナーさんは、素人の描いた絵がそれこそ幼稚園のお絵かきが、イラストにまで変化することが可能です。

それでは、このラフから実際に形にしていきましょう。
２に続きます。
https://qiita.com/usashirou/items/c5f6307f899c21ec64a6
スプレッドシートで１つのセル内に複数のリンクを設定する方法


Googleスプレッドシートで１つのセル内に複数リンクを設定する機能がリリースされたとのことで早速試してみた。

## 手順

セル内の１つ目の文字にリンクを貼る
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242038/45e287e2-52c9-2b01-c086-0967baaf9c56.png" width=80%>

セル内の２つ目の文字にリンクを貼る
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242038/905fcf17-de48-ad0a-7a2d-779a052d3611.png" width=80%>

セルを選択するとリンクが２つ選択可能になる
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242038/5169afec-b32f-dbed-f9bc-ff9863cbbe62.png" width=50%>

これで、セル内の文字毎にリンク設定することができました！
個人的にはExcelを使っていた時代から、欲しいと思ってた機能ですので、このアップデートは本当ありがたいです。
AWS初心者が在宅勤務中にAWSの資格を取る記録 part4

##■5/11(Mon)
・Udemyで座学＆ハンズオン（セクション7～9）
　→S3、Well Architected Framework、信頼性の設計

###感想
今までオンプレミス環境のシステム設計や構築やテストなど行ってきたが、クラウドでも基本的な考え方は同じ。
しかし、キャパシティやリソースを考慮しない考え方は今までとは正反対のアプローチなので、非常に興味深い。

##■5/12(Tue)
・Udemyで座学＆ハンズオン（セクション10～11）
　→Route53
　　→ホストゾーン設定、ルーティング、フェイルオーバーの実装
　　　→以下のルーティングについて、3つのリージョンにEC2インスタンスを作成して動作確認
　　　　・シンプルルーティング
　　　　・加重ルーティング
　　　　・レイテンシールーティング
　　　　・位置情報ルーティング
　　　　・マルチバリュールーティング
　→データベース
　　→データベースの基礎、概要について

###感想
内容について、少しだけ詳細に書くことにした。

お名前.comでドメインを取得(1円/1年のやつ)し、ハンズオンを進めた。
Route53のルーティングについては、少し種類が多いので座学だけだと理解するのが面倒だと思う。

今週中にはこのコースは修了できそうなので、来週中にSAA試験の受験を画策中。

##■5/13(wed)
・Udemyで座学＆ハンズオン（セクション11～12）
　→データベース、ElastiCache
　　→DynamoDB、Aurora、EFS、Kinesis、ElastiCache、CloudFrontのハンズオン
　　　→サービスを構築し、挿入や削除等のデータ操作を実施

　※高額なサービスはハンズオン終了直後に消去しています

###感想
今までの業務ではデータベースを触る機会がなく、概要を理解している程度だった。
本講義を受講することでAWSサービスにおけるDBの概念と構築方法を学べた。

また、NoSQL型のDBサービスはSQL文でなく、視覚的に理解しやすいデータ操作であることに感動した。

##■5/14(Thu)
・Udemyで座学＆ハンズオン（セクション13）
　→サーバレスサービス
　　→SQS、SNSの概要、ハンズオン
　　　→サービスを構築し、メール送信等のハンズオンを実施

###感想
サーバレス化によるメリットである疎結合の概念ヨシ

##■5/15(Fri)
・Udemyで座学＆ハンズオン（セクション13～14）
　→サーバレスサービス、環境の自動化
　　→Lambda、CloudFormationの概要、ハンズオン
　　　→サービスを構築し、ハンズオンを実施

###感想
AWSを触っていて、一番感動したのはCloudFormation。
VMwareやHyper-Vにおいても、仮想マシンのコピー作ってデプロイして。。と環境構築は簡単だったが、
CloudFormationはさらに簡単だなと思う。
パチパチとコードを書いてさらっと環境を整えられるエンジニアになりたい。

#今週の総括
SAAの勉強を本格的に初めて2週間弱になりましたが、基本的にUdemyベースで進めています。

ノートをとる量が10倍くらい増えたので、おそらくCLFレベルの概要の把握だけだとダメなんだろうという気がしています。
ぼちぼち模擬試験に切り替えて、合格を目指していこうと思います。

また、在宅ワークのメリットを大いに感じています。
在宅で働くという勤務形態の最大のメリットは有効な時間の確保ができるということです。
自由な時間をAWSの勉強や読書、自身の好きなことに充てる時間とすることで、私生活にメリハリがでてきました。

そのお陰で、勉強をする努力をし、努力が当たり前となり、しなくては落ち着かないくらいになり、勉強をする習慣がつきました。
この習慣を今まで通りの環境に変わっても続けたいと考えます。
Laravelマイグレーションの基本まとめ(6以降対応)

#はじめに
Laravelのマイグレーションはデータベースをコントロールする機能です。
僕だけかもしれませんが、開発していく中でマイグレーションファイルははたまに触るくらいなので毎回ググっていたという経緯から備忘録としてマイグレーションの主な機能についてリスト化していきます。

#マイグレーション生成
まずは超基本的なマイグレーションファイルを作成するコマンド

```
$ php artisan make:migration create_[テーブル名]_table
$ php artisan make:migration create_users_table
```

このコマンドを実行するとusersテーブルが作成されます。

###マイグレーションファイルのオプション
マイグレーションファイルを作成する際に--tableと--createのオプションを指定できます。

例えば、以下のコマンドではオプションがない場合テーブル名が何かわからないので、
--table=usersをつけることで、usersテーブルの雛形を作成してくれます。

```
$ php artisan make:migration add_votes_to_users_table --table=users
```


#マイグレーション構造
マイグレーションを実行したら、以下のようなファイルが作成されます。
ここではカラムの追加やカラム型・物理名・論理名などを指定できます。

マイグレーションはupとdownのメソッドがあります。

upメソッドは新しいテーブル、カラム、インデックスをデータベースへ追加するために使用します。

downメソッドはupメソッドが行った操作を元に戻します。ロールバックの機能ですね。


```2014_10_12_000000_create_users_table.php
<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateUsersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('name');
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password');
            $table->rememberToken();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('users');
    }
}
```


#マイグレーション実行
マイグレーション構成を確認できたらマイグレーションを実行します。

```
$ php artisan migrate
```

###実働環境でのマイグレーション強制
マイグレーションを強制実行するコマンドがあります。

```
$ php artisan migrate --force
```

これ使ったことないです。
データ全部飛んじゃうので使うなって新人の頃に強く言われましたね。

例え、使うことがあってもリーダーに確認してからにしましょう。

#ロールバック
マイグレーションをロールバックするコマンドもあります。
ロールバックとは巻き戻すという意味で最後に実行したマイグレーション実行を巻き戻してくれます。

```
$ php artisan migrate:rollback
```

#マイグレーション変更・追加
生成したマイグレーションにカラムを追加したい場合、新たにマイグレーションを生成する必要があります。

例えば、usersテーブルにageカラムを追加したい場合、以下のように書きます。

```
    public function up()
    {
        Schema::table('users', function (Blueprint $table) {
            $table->integer('age');  //カラム追加
        });
    }


    public function down()
    {
        Schema::table('users', function (Blueprint $table) {
            $table->dropColumn('age');  //カラムの削除
        });
    }
```


以上になります！