OmniAICreator/Qiita-1.07M huggingface dataset:
MIMEタイプを直接書く以外で指定したい

## 経緯
WebAPIなどで使用するMIMEタイプ。
普段C#では直接書いているけど、定数だし何かで定義されているのでは？と思って調べたので記録用に。

## C#: [System.Net.Mime](https://docs.microsoft.com/ja-jp/dotnet/api/system.net.mime?view=net-6.0)

使いそうなのは以下の表に
|呼び出し方  |MIMEタイプ  |
|---|---|
|MediaTypeNames.Application.Json|application\/json|
|MediaTypeNames.Application.Pdf|application\/pdf|
|MediaTypeNames.Application.Soap|application\/soap|
|MediaTypeNames.Application.Xml|application\/xml|
|MediaTypeNames.Application.Zip|application\/zip|
|MediaTypeNames.Image.Gif|image\/gif|
|MediaTypeNames.Image.Jpeg|image\/jpeg|
|MediaTypeNames.Text.Html|text\/html|
|MediaTypeNames.Text.Plain|text\/plain|
|MediaTypeNames.Text.Xml|text\/xml|

## 感想
.Net Frameworkを使っているのですが、application/jsonが無くて使えなかったのが残念でした。
いつか使ってみたいと思いますが、使うのと使わないのとでは、どちらが良いのでしょうね…
Flutter：ロジック部分でのLocalize対応された文言の呼び出し

## やりたいこと
ロジック部分で多言語対応された文言を呼び出したい。（通信失敗時のerrorMessageの設定など）

## 前提
多言語対応にflutter_localizationsを用いています

## 方法
``` 
class HogeState extends State<Hoge> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const HogePage(),
　　　　　　　　　　　　// 多言語対応部分
      localizationsDelegates: L10n.localizationsDelegates,
      supportedLocales: L10n.supportedLocales,
      // 以下を追加する
      navigatorKey: NavigationService.navigatorKey
    );
  }
}

class NavigationService {
  static GlobalKey<NavigatorState> navigatorKey =
  GlobalKey<NavigatorState>();
}

// 呼び出し
L10n.of(NavigationService.navigatorKey.currentContext!)!.hoge_name
```

さらに呼び出しを簡略化するために以下のようにすれば、いちいちcontext呼び出しの書き方をしなくて済む
```
class LocalizeString {
  static L10n? l10n() {
    if (NavigationService.navigatorKey.currentContext == null) {
      return null;
    }
    return L10n.of(NavigationService.navigatorKey.currentContext!);
  }
}

// 呼び出し
LocalizeString.l10n().hoge.name
```


## 参考
https://stackoverflow.com/questions/66139776/get-the-global-context-in-flutter
Windows環境のJulius4.6で特定の単語を認識させる方法

# 前準備
**C:/Julius/dict** となるように **dict** フォルダを作成する。

# 「読み」ファイルの作成
**C:/Julius/dict/test.yomi** となるように **test.yomi** を作成する。
中身は以下のように編集する。([単語] + [Tab] + [ひらがな])
```test.yomi
おはよう    おはよう
こんにちは  こんにちわ
こんばんは  こんばんわ
宜しく  よろしく
```

# 「音素」ファイルの作成
コマンドプロンプトを**管理者**で開く。
**dict** フォルダに移動する。
```
cd C:\Julius\dict
```

以下を実行する。
```
perl C:\Julius\julius-4.6-win32bin\bin\yomi2voca.pl ./test.yomi > ./test.phone
```
**perl** のインストール方法は[**こちら**](https://www.javadrive.jp/perl/activeperl/index4.html)を参考にする。

**test.phone** が作成され、以下のようになっていればOK。
```test.phone
おはよう	o h a y o u
こんにちは	k o N n i ch i w a
こんばんは	k o N b a N w a
宜しく	y o r o sh i k u
```

# 「構文」ファイルの作成
**C:/Julius/dict/test.grammar** となるように **test.grammar** を作成する。
中身は以下のように編集する。(先ほど作成された **test.phone** を参照する。)
```test.grammar
S : NS_B TEST NS_E
TEST : OHAYOU
TEST : KONNICHIWA
TEST : KONBANWA
TEST : YOROSHIKU
```

# 「語彙」ファイルの作成
**C:/Julius/dict/test.voca** となるように **test.voca** を作成する。
中身は以下のように編集する。(先ほど作成された **test.phone** を参照する。)
```test.voca
% OHAYOU
おはよう    o h a y o u
% KONNICHIWA
こんにちは  k o N n i ch i w a
% KONBANWA
こんばんは  k o N b a N w a
% TEST : YOROSHIKU
宜しく  y o r o sh i k u
% NS_B
[s] silB
% NS_E
[/s]    silE
```

# 「辞書」ファイルの作成
以下を実行する。
```
perl C:\Julius\julius-4.6-win32bin\bin\mkdfa.pl test
```
test.dfa、test.term、test.dict、test.dfa.forwardの4ファイルが生成されればOK。

# Juliusで実行
```
chcp 65001
C:\Julius\julius-4.6-win32bin\bin\julius -C C:\Julius\dictation-kit-4.5/am-gmm.jconf -nostrip -gram ./test -input mic
```

登録した単語を話して反応すればOK。
以上、Windows環境のJulius4.6で特定の単語を認識させる方法でした。

# 参考にしたページ
https://kocoffy.com/iot/post-519/
StaticPressはカスタム投稿タイプと相性が悪い

執筆時点で原因解決しておらず単なる問題提起のメモです。
もし解決策をご存知の方の目に触れたらラッキーだなぁ…という程度に。

StaticPressはWordPressの動的ページを静的なHTMLファイルに出力してくれる非常に便利なプラグインだが、困った課題にぶつかった。

## 前提

- AWS EC2でWordPressを稼働し、静的ファイルはS3に投げている
- プラグイン自体のカスタマイズは避けたいため、プラグインのコードには手を出していない

## 課題

StaticPressで再構築する時、「**カスタム投稿のアーカイブページ**」を正常に静的ページ出力してくれない。

カスタム投稿については公式機能なので説明を避けますが、カスタム投稿は専用のカテゴリを設定でき、WordPressで言うアーカイブページとはそのカテゴリ以下の記事一覧ページのことを指します。

その「カスタム投稿のアーカイブページ」が複数ページにまたがった時の `/category/page/2/` `/category/page/3/` といったページネーション用のページを、StaticPressが出力してくれないことがある。しかもその法則性がよく分からない。

例として以下のような状況です。


- カスタム投稿タイプA → 出力しない
    - カテゴリA1 → 出力しない
    - カテゴリA2 → 出力する
    - カテゴリA3 → 出力しない
- カスタム投稿タイプB → 出力しない
    - カテゴリB1 → 出力する
    - カテゴリB2 → 出力しない
    - カテゴリB3 → 出力しない
    - カテゴリB4 → 出力する

## 解決には至っていない試行錯誤

- カテゴリ関連の他のプラグインが干渉している？
    - Taxonomy Orderを使っているのでカテゴリの順番を入れ替えてみる
        - 出力する/しないカテゴリが変わった
    - Taxonomy Orderを無効化してみた
        - 出力する/しないカテゴリが変わった…が、法則性分からず
    - 無効化しても意図通りにはならないのでStaticPressが悪そう

「カテゴリの並び」を変えることで出力したりしなかったりするが、まさかStaticPressがカテゴリの並びで処理を変えてることは考えられず、　率直に言えば意味が分からない状況。
営業職からエンジニアになる方法 3選【実話】

# 読んでほしい方
* エンジニアを目指している方
* エンジニアになりたいが、未経験のため書類選考が通らず、悩んでいる方
* 本当にあったエンジニアへの転職方法に興味がある方


# ワタシはダレ？
* 文系出身
* 新卒で営業職（IT業界・ソフトウェアテスト）
* エンジニアになって６年
* フロントエンドからサーバーサイド、インフラ、機械学習系の案件を横断的に経験
* 採用担当


# 方法１　友人・知人に紹介してもらう
エンジニア転職を考えている方にとって、確度が高い方法です。

というのも、未経験者の採用では、**「人柄」** と **「社風に合うか」** の２つが重視されます。
なので、既にお互いどんな人かを知っていると、採用される側も採用する側も、判断がしやすくなります。

元々、信頼関係のある場合だと、「転職考えてるんだよね〜」と話したタイミングで、「じゃあ、うちの会社来る？」といった流れになることもあります。

人脈を広げやすい**営業職の特権**でもあります。

# 方法２　営業先に常駐する
クライアントにIT系の企業がある方や、IT業界で営業をしている方でしたら、あり得る話だと思います。
実際、ワタシはこの方法でエンジニアのキャリアをスタートさせました。

最初は担当営業として関わっていたのですが、やる気があってコミュニケーションも取りやすいということで、
「エンジニアとしてうちに常駐してみないか？」と誘って頂きました。

※この時点でプログラミング未経験でした
（本当にありがとうございました。）


# 方法３　未経験採用を行っている企業に応募する
方法１と方法２、共に当てはまらない場合、どうしたら良いか困ってしまいますよね。

大丈夫です、**未経験の方を採用をしている企業** が残っています。
ただ１つだけ注意して頂きたいポイントがあります。

それは、**「１人で現場に入る可能性がある企業を選ばない」** ことです。

未経験の状態でいきなり１人で現場に入ると、
* 育成する気がないエンジニアと仕事をすることで、成長が見込めない
* 分からないことを気軽に質問できない
* テストばかり任される
* 激務

といった可能性が高くなってしまいます。
せっかく転職してもこれでは残念すぎますよね。。

現在、当社では一緒に働く仲間を募集しております！
未経験で入社し、活躍している社員がたくさんいる環境です。

もちろん、全員がオフィスまたはリモートで仕事をしています。

ご興味ある方は[こちら](https://www.recruit.nuco.co.jp/)より。
DOBOT Magician　便利リンク集　Pythonでの実行方法

# 

## DOBOT MagicianをPythonで動かすときに便利なリンク集

- DOBOT Magician OFFICIAL Download
    https://www.dobot.cc/downloadcenter/dobot-magician.html#most-download
    DobotStudioはControl Software
    デモプログラムはDevelopment protocol内のDobot Demo v2.3

- DOBOT Magician Specifications
    https://www.dobot.cc/dobot-magician/specification.html

- DOBOT Magician デモ説明書
    https://physical-computing-lab.net/wp-content/uploads/dobot-magician-demo-description-JP.pdf

- DOBOT API 
    http://www.dobot.it/wp-content/uploads/2018/03/dobot-api-en.pdf

- Dobot Magician User Guide
    https://afrel.co.jp/pdf/product/dobot-magician-user-guideV1.5.1_jp.pdf
    Workspace(可動範囲など)は27ページから

PTP移動 : 原点からの座標を入力して移動（x,y,z,R)
JOG移動 : 第1から4軸の各速度と加速度を入力して移動（時間指定はできずに停止の信号が来るまで動作）

## PythonでのAPI
DobotStudio内のScript画面の左側
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2608274/98533176-e9de-45e8-ba87-b1141c7a2fa7.png)

＋ボタンを押すと関数が出てくるので？を押すと表示される
![キャプチャ1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2608274/3c5ff4d0-4f27-6136-4a5e-7ea4ef8141b2.png)
recsys-pythonを進めていく(第1章)

# 参考文献とか
1. https://recsyslab.github.io/recsys-python/

# やった理由
- 推薦システムに入門したいなとここ3年ほど思っていた。
- `NumPy`を使って行列計算とかに慣れていきたいと思っていた。
- twitterで1.が流れてきたので、とりあえず読み進めていくことにした。

# やったこと
- google colabで参考文献1.の第1章を解いた。
- 以下の場所に.ipynbファイルを置いておいた。暇だったら見ていってほしい。
  - https://github.com/yaminabeworks/qiitakiji/blob/main/numpyknock_recsys01.ipynb

# 感想

- 元ネタのページは、推薦システムの理解のためだけでなく`numpy`を使ってなんかしてみるいい機会を作ってくれたという点でもとてもありがたいものだった。
  - 連休は終わってしまったが、来週までに時間を作って進めていきたい。
- そこまでむずかしくない操作でも1章分、26問もあるとちょっと尻込みする。
  - なんだかんだ着手から1日くらいかかった。
- colabとgithubの連携はできたので、早速第2章をやる。
- `networkx`の使い方含むネットワーク分析か情報検索分野でこういうの作りたいなの気持ち。

# 次にやること

- 参考文献1.の第2章
自己紹介！よりそう人事の江尻です。

# ご挨拶

はじめまして！
株式会社よりそうで人事をしている江尻と申します。
今回はじめてQiitaに投稿をするにあたり、何を投稿すればいいんだ・・・と沼にハマりました。
これまでずっとROM専だったのですが、いざ自分が書くとなるとなかなか難しいですね。。。
悩んだ結果「まずは自己紹介だ！」と思い記事を作成しています笑

# 江尻悠矢って何してる人？
株式会社よりそうで人事として営業・マーケティング・開発職等の部署を担当。
採用としては主に「エンジニア」「デザイナー」「ディレクター」などのクリエイティブ職を担当。
過去からの経験としては、営業と人事（テックリクルーター）。
新卒で株式会社LIXILに入社し、ルートセールとリフォームセールスを2年ずつ経験。
その後株式会社アウトソーシングテクノロジーで採用へキャリアチェンジし、カオナビでもエンジニア部門の採用を担当。

**↓他のSNSアカウントはこちらコチラ！↓**
友達申請、フォローぜひよろしくお願いいたします！詳細が気になる方はぜひ見てみてください笑
- [Facebook](https://www.facebook.com/yuya.ejiri)
- [LinkedIn](https://www.linkedin.com/in/yuyaejiri/)
- [Twitter](https://twitter.com/yuya_ejiri)

# 最後に
こちらのアカウントではエンジニア採用や、よりそうのエンジニア組織、自分自身が最近感じた技術に関する内容を投稿していく予定です！
エンジニアの仕事をしている訳ではないですが、マークダウンの勉強にもなるなと思いつつ初記事を書きながら。
あまり書き慣れていないためお見苦しい内容が多いかと思いますがぜひ読んでいただけると幸いです🙇‍♂️
fetch-mockを使ったテスト

**mocha**におけるテストで**fetch-mock**を使ったのでメモしておく。
フロントエンドで、fetch APIを使ってリクエストを行う部分のテストをする際にリクエストを**mock**するのに**fetch-mock**を利用した。

# mockとは
**mock**とは、テスト対象クラスが呼び出しているクラスを置き換えるためのテスト用オブジェクトのこと。**mock**でテスト対象クラスが呼び出しているクラスを置き換え、**mock**の動作を指定することで意図したテスト条件を作ることができる。

# fetch-mockを使ったテスト
**fetch-mock**を使ったテストの内、GETリクエストのテストの場合をメモしておく。

```javascript:テストコード例
import fetchMock from "fetch-mock";

describe("APIのテスト", () => {

    afterEach(() => {
        // fetchMockをリセット
        fetchMock.restore();
    });

    it("GETメソッドをmock", async () => {
        // fetch-mockを設定
        fetchMock.get(<リクエストURL>, {
            <レスポンスの内容>
            // 例
            //status: 200,
        });
        const result = <テスト対象メッソド>
    });
});
```
上記のように、``fetchMock.get()``の第1引数にURLを指定し、リクエストのURLと一致した場合**mock**される。第2引数はレスポンスを指定する。
Essentialエディションの制約


+ [OWDはSalesforceEssentialエディションをサポートしていません。](https://trailhead.salesforce.com/trailblazer-community/feed/0D54S00000G3t60)
+ [Salesforce Essentials is not supported because REST API is not available.](https://trailhead.salesforce.com/trailblazer-community/feed/0D54S00000CgPqr)
  そのため、名刺読み取りなどの外部アプリとの連携はできない

そのため、データを取り出すのはレポートしかなさそう。

+ [Export a Report in Salesforce Essentials](https://help.salesforce.com/s/articleView?id=000391139&type=1)
+ [Exporting data from Salesforce Essential](https://trailhead.salesforce.com/trailblazer-community/feed/0D54S00000MivNh)
nuxt.jsでgenerateした静的サイトではnuxt/axiosのproxy機能は使用できない

※指摘大歓迎!

# 背景
- SPA など静的サイトとしてデプロイし、外部の API を実行する。
- nuxt.js で開発する際、CORS 対応として nuxt/axios の proxy 機能を使用する回避策が良く見つかる。
- `yarn dev` などでローカルサーバを起動して動作確認する場合には問題ない。
- `yarn generate` などでビルドした成果物を Web サイトとしてデプロイすると proxy が機能しない。

# 原因
- 仕様
    - ライブラリにも > Proxy support for nuxt server とある。
    - https://github.com/nuxt-community/proxy-module 

# 回避策
- proxy 機能を使用しない
- nuxt.config.js の axios 設定に baseURL を指定するのが便利
Laravel でログ出力

この記事の内容は、laravel8で動作確認しています。
とりあえず簡単にログ出力します。


# Logファサードを使用してログに情報を書き込む

```
use Illuminate\Support\Facades\Log;

Log::emergency($message);
Log::alert($message);
Log::critical($message);
Log::error($message);
Log::warning($message);
Log::notice($message);
Log::info($message);
Log::debug($message);
```

##### 例
```
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Log;

class AppController extends Controller
{
    public function index()
    {
        Log::debug('message');
        return view('home');
    }
}

```

# ログの出力先
デフォルト設定では、`storage/logs/laravel.log`に出力される。

# エラーログの出力先を分ける
エラーログだけを日ごとの別ファイルに出力する設定。
`config/logging.php`に下記のように設定を追加する。
```config/logging.php
    'channels' => [
        'stack' => [
            'driver' => 'stack',
            'channels' => ['single','errors'],  // 'errors'を追加 
            'ignore_exceptions' => false,
        ],

　        ・・・・・省略

        // 追加
        'errors' => [
            'driver' => 'daily',
            'path' => storage_path('logs/errors.log'),
            'level' => 'error',
        ],       
    ],



```


# 参考記事
https://readouble.com/laravel/8.x/ja/logging.html
Vueを触ってみた話

## はじめに
前から興味のあったVueについて触ってみました。

### 導入

基本は公式に書いてあります。
[公式のインストール手順](https://jp.vuejs.org/v2/guide/installation.html)

npmは事前にインストールしておく。

Vueのインストールは難しくもなく、コマンドプロンプトでインストールして、プロジェクトを作るだけでした。

インストールは、
```
npm install -g @vue/cli
```

終わったらインストールできたか確認してみます。
-V, --version で確認できます。

```
vue -V 

// 結果：@vue/cli 5.0.4
```

インストール時間は２・３分くらいでしょうか。

### プロジェクト

プロジェクトの作成は以下コマンド（大文字は使えないそうなので注意）
```
vue create sampleproject
```

そうするとVue2かVu3か聞かれるので任意のものを選んでください。
参考：[Vue3とVue2の違い・Vue3の注目機能](https://www.ragate.co.jp/blog/articles/8232)

```
Vue CLI v5.0.4
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features
```
そうすると今度は、依存関係をインストールする際にYarnを使うかNPMを使うか聞かれます。
好きな方を選んでください。
```
Vue CLI v5.0.4
? Please pick a preset: Default ([Vue 3] babel, eslint)
? Pick the package manager to use when installing dependencies: (Use arrow keys)
> Use Yarn
  Use NPM
```
1・2分の作成処理が終わるとプロジェクト作成の完了です。

作成したプロジェクトの階層で以下コマンド
```
npm run serve
```
で起動し、http://localhost:8080/ にアクセスすれば作ったページを確認できます。

初期のままだと以下のようなページが表示されるはずです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1062357/5e158a76-19f3-3134-141c-2cd1731bc580.png)

### まとめ
10分もかからず導入からプロジェクト作成までできました。簡単ですね。

### サンプル
まだ着手の段階ですが、自分がよく見ている配信サイトTwitchの便利機能をVueで作れないか試しています。
[TwitchSearchWebApp](https://github.com/yus-sasaki/TwitchSearchWebApp)

今後進展があれば、また記事にしたいと思います。
マッピングファイルのステータスを読み解く

次世代シーケンサーのデータ解析でよく出てくる SAM/BAM ファイルの取り扱いには Samtools が便利ですが、このツールを使ってステータスも見ることができます。今回はこのステータスでは何が得られるのか、軽くまとめてみたいと思います。データ解析している人が見ているデータにはこんなのがあるだと知っていただければ幸いです。

http://www.htslib.org/

# SAM/BAMファイルとは
次世代シーケンサーで取得したシーケンスリード配列はゲノムのどこから得られたデータなのかを計算（マッピング）した結果を表現するファイルフォーマットがSAMファイルです。BAMは簡単に言えばSAMファイルを圧縮して軽量にし、コンピュータが扱いしやすくした形式です。

# ステータスの出力方法
コマンドは次のようになります。

```
$ samtools stats sample.bam 
```

マッピング結果はSAMで得られることが多いですが、BAMに変換、且つ、ソートする必要があります。

http://www.htslib.org/doc/samtools-stats.html

# 出力内容
#（シャープ）で始まる行と、大文字2～3文字から始まり空白で区切られた行があります。
前者は後者の内容を説明しており、grep~ の部分のコマンドでこのパートが抽出できるとあります。
ちなみに空白はタブ文字ですので、抽出してExcelに読み込めばきれいに表示できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1711036/bb4a7d20-ef9f-7c58-d0bc-9d1d132ce15d.png)
～中略～
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1711036/359694df-ccea-19f9-4254-cddfab97a257.png)

# SNで始まるパート
ステータスの最初の方にあるSNで始まる行のみ、#（シャープ）で始まる行ではなく2列目に3列目の数値の名称（キー）が書いてあります。このパートはサマリーであり重要な集計値が載っているので細かく見ていこうと思います。

2列目の名称だけ取り出しましたが、ほぼそのままの意味が書いてありわかりやすいです。4列目に補足がある行もあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1711036/d11f72ce-8ba0-df94-8dc5-008d0e8af05a.png)

すごく細かく分析されているので重要なところを上げてみます。

<dl>
  <dt>raw total sequences</dt>
    <dd>マッピングの計算に使われたシーケンスリードの数</dd>

  <dt>reads mapped</dt>
    <dd>マップできたシーケンスリードの数</dd>

  <dt>reads unmapped</dt>
    <dd>マップできなかったシーケンスリードの数</dd>

  <dt>non-primary alignments</dt>
    <dd>トップヒット以外のマッピング結果（マルチトップヒットがあった場合は、1つを除いて non-primary となる）</dd>

  <dt>insert size average</dt>
    <dd>ペアエンドシーケンスのマッピング結果から計算されたフラグメントサイズ平均</dd>

  <dt>insert size standard deviation</dt>
    <dd>前項の標準偏差</dd>

  <dt>inward oriented pairs</dt>
    <dd>ペアエンドシーケンスのマップされた方向の位置関係がforward/reverseであるペア数</dd>

  <dt>outward oriented pairs</dt>
    <dd>同じく位置関係がreverse/forwardであるペア数</dd>

  <dt>pairs with other orientation</dt>
    <dd>同じく位置関係がforward/reverse、reverse/forward以外であるペア数</dd>

  <dt>pairs on different chromosomes</dt>
    <dd>同じく位置関係でChromosomeが異なるペア数</dd>

</dl>
【UE4】NiagaraEditor上で30FPS以外見たいじゃん？

:::note info
UE5.5で公式が対応したっぽいよ！
:::
|ω・｀)ﾉ ﾔｧ

私です

みんな大好き(?)NiagaraだけどNiagaraEditor上だと30FPS固定なの　知ってました？
(UE4.27.2現在)

モジュールの組み合わせとかモジュールによっては可変フレームで表示崩れたりするんだけど
そもそも実際に30FPS以外で動かした時にしかわからんから気づくの遅れるんだよね

30FPS環境をベースに諸々作って　さあ60FPSなり120FPSなりのアレに対応すんぞー！
ってなったときに　エフェクト変なんだけど！！！！　もぅﾏﾁﾞ無理　ってなる（なった

そっちはまぁ追々どうにかするとして
まずはやっぱり　エディタ上で30FPS以外の時の見た目を確認し出来るようにしたいじゃん？

## なして30FPS固定なん
いやホント　なんで30FPSなん？
ってところから

NiagaraEditor上で表示されるNiagaraSystemはSoloモードが有効になっていてAgeUpdateModeがDesiredAgeになってます
この状態のNiagaraSystemは任意のAgeを渡すことが出来ます。
エディタのタイムラインとこのAge同期させて一時停止や巻き戻しなんかが出来るようになってるわけですね　多分

んで　そのSoloモードが有効な場合UNiagaraComponent::TickComponentの中で
現在のNiagaraSystemのAgeと更新したいDesiredAgeの差分をみてSeekDeltaを渡す　みたいなコトをしているんですが

この値が

> , SeekDelta(1 / 30.0f)

で初期化されていて　これの影響でNiagaraEditorは30固定なんですね TA BU NN NE !!

## 改造する
というわけでざっくり改造していきます。

NiagaraEditorで動いているNiagaraSystemのDesiredAgeを更新している場所が
> FNiagaraSystemViewModel::SequencerTimeChanged()

です
なので　FNiagaraSystemViewModel　あたりに SetSeekDelta を仕込んでやれば良いわけですね
今回は任意のFPSを指定出来るようにしたいのですが　UI部分まで変更するのは面倒なので
とりあえず飾りにしかなってないタイムラインのFPSを渡すようにしちゃいましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275100/01c15320-e111-647e-552f-2c604d868b18.png)
ちょうど　FNiagaraSystemViewModel　はNiagaraSequencerを持っているのでこの値を取得してやります。
> float SeekDelta = (float)Sequencer->GetRootDisplayRate().Denominator / (float)Sequencer->GetRootDisplayRate().Numerator;

さらにさらに
このクラスはプレビュー中のNiagaraComponentも持っているのでそのまま渡せちゃいます
> PreviewComponent->SetSeekDelta(SeekDelta);

切り替えたかどうかの判定をするのもめんどくせーので

FNiagaraSystemViewModel::SequencerTimeChanged()

の
> EMovieScenePlayerStatus::Type CurrentStatus = Sequencer->GetPlaybackStatus();

の下辺りに書いちゃってください

はい　これでタイムラインの表示FPSでNiagaraEditorの更新がされるようになりました
ヤッタネ

## おわり
というわけで　30FPS固定だったエディタを他のFPSにも対応することが出来ました
別に少しくらいパーティクルの広がり方変わってもいい　って場合はまぁ　気にしないでいいと思う。
シード値で乱数固定してたりしてると　FPSによってシード値変わるからマジで気をつけましょう　
まじで　
まじで　
まじで・・・・・

はぁ・・・

UE5になったらデフォで切り替えれるといいなぁ

今回はこんなんで
ノシ
SQLインジェクション(学習中・メモ)

・SQLインジェクションとは？
SQLインジェクションとは、アプリケーションの脆弱性により本来の意図ではない不当な「SQL」文が作成されてしまい、「注入(injection)」されることによって、データベースのデータを不正に操作される攻撃のこと。

・SQLインジェクションの仕組み
（例）
userというユーザ情報が格納されているデータベースのテーブルに対し、入力されたIDに合致するデータを検索する。
↓
SELECT * FROM user WHERE id=‘$ID’
↓
SELECT * FROM user WHERE id=‘taro’ or ‘A’=‘A’
↓
‘A’=‘A’は必ず成り立つので情報漏洩確定

・SQLインジェクションによる被害
 　情報漏洩やWebサイトの改ざんなど。
　　
・SQLインジェクションの対策方法
  根本的なSQLインジェクション攻撃の対策としては、安全なWebサイト・Webアプリケーションを開発するこ とです。セキュアプログラミングでSQLインジェクションの脆弱性が存在しないWebサイトを制作することで対策可能。発生する原因は、本来実行されるべきSQLの構文が変更されるためなので、対策としては、Webアプリケーションがユーザから想定外の情報が入力されてもそのまま処理せず、正しくエラー処理を実施することが最重要事項となります。

代表的な対策方法は、「プレースホルダの利用」「エスケープ処理」「アプリケーションに渡されるパラメータにSQL文を直接指定しない」ことが挙げられます。

▼プレースホルダの利用
プレースホルダを利用することで、SQLの構文が事前に確定し、ユーザーからの入力値等によって不正なSQLが実行されることを防ぐことができます。 
*プログラミングにおけるプレースホルダー => プログラミングのコードの中で、利用者が入力する値など、実行時に外部から与えられる要素を反映させたい場合があります。
その場合に、外部から与えられる要素が入る予定の場所のことをプレースホルダーと呼んでいます。

▼エスケープ処理
エスケープ処理とは、検索バーや入力フォームなどユーザーが入力できる機能を実装しているWebサイトに対して、特定の文字が普通の文字として解釈されるように処理することを指します。エスケープ処理を行うことで、SQLインジェクションを受けても、攻撃コードの中の特定の文字列や記号を削除したり置き換えたりして、攻撃を無効化できます。

▼アプリケーションに渡されるパラメータにSQL文を直接指定しない
Webアプリケーションに渡されるパラメータにSQL文を直接指定する実装は、そのパラメータ値の改変により、データベースの不正利用につながる可能性があります。IPAでは避けるべき実装として挙げられています。

・Webアプリケーションを常に最新バージョンに保つ
OSやアプリケーションのバージョンアップの中身は、ほとんどが脆弱性対策です。実行することで現段階に起こりうるリスクを下げることができます。

・クラウド型WAFでのセキュリティ対策
WAFはファイアーウォールやIPS/IDSでは防ぐことができない、Webアプリケーションの脆弱性を悪用したサイバー攻撃を防ぎます。SQLインジェクション以外の攻撃にも対応しているため、より安全にWebサイトを運用できるようになります。

*WAFについて↓
よくセキュリティ対策として「ファイアウォール」を耳にしますが、このファイアウォールは「インフラ/ネットワーク層」しか防御できません。、それ以外にも「ソフトウェア/OS層」や「Webアプリケーション層」という守らなければならないエリアがあります。「Webアプリケーション層」へのサイバー攻撃からWebサイトを守る「WAF」やソフトウェア/OS層を監視・防御する「IPS/IDS」を使い、多層防御を実現することがサイバー攻撃対策には必須です。

![about_waf_img.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600460/d1945964-7bcd-fc0c-ad17-1e7150b6ee47.png)


間違いやアドバイスなどあれば、遠慮なく言って欲しいです。

参考文献：

https://www.shadan-kun.com/waf/sql_injection/
本日より未経験からWEB系エンジニアを目指します


# はじめに
初投稿になります。
未経験からWEB系エンジニアを目指そうと思います。

WEB系エンジニアを目指そうと思った経緯はアプリケーションテスターのアルバイトをしてる際に、日々苦戦しながらも業務を楽しんで働いているアプリケーションエンジニアの方々に刺激を受け、私もエンジニアに戻って同じ経験を味わいたいと思ったからです。
お金がないのでアルバイトをしながら勉強していきます。
これからは日々学んだことをoutputする場に使用させて頂きます。よろしくお願いします！

# ロードマップ
ひとまず学習時間を考慮しロードマップ作成してみました。
計画を立てた以上頑張ります！

- 何月後に就職を目指しているか
    - 4ヶ月後を目指す（現在3/29　4ヶ月後7/29）
- どのくらい学習時間にさけられるか
    - 週41時間、月164時間
        - 2日　勉強日　8時間×2日
        - 4日　仕事後勉強日　5時間×4日
        - 1日　見直し日　5時間×1日

3ヶ月目でポートフォリオ完成を目指す（492時間）

### ロードマップ
#### 1ヶ月目　必要言語の基礎を固める（164時間）
- 基礎は基本情報のみで行う（30時間）
    - 4日
    - chapter18~　は開発とは関係ないのでスキップ
- HTML&CSS（10時間）
    - 以前模写サイトを作ったことがあるため2日程度で
    - ひとまず模写コーディングを一回行ってみる
- linux基礎(20時間)
    - 3日
- JavaScript(10時間)
    - 2日
- PHP（40時間）
    - 5日
    - アプリケーションを作ってみる
- SQL（30時間）
    - 4日程度？
- Lalave前半（20時間）
    - 全体で9日程度？

#### 2ヶ月目　ポートフォリオ作成に着手し始める（164時間）
- Lalavel後半（50時間）
- Git（15時間）
    - 2日
- 認可認証(10時間)
    - 1日
- Docker(10時間)
    - 1日
- heroku、AWS(15時間)
    - 2日
- 企画、設計(40時間)
    - 1週間
- ポートフォリオ作成開始(20時間)
    - 全体で1か月程度
    - ポートフォリオ完成のタイミングで面接がいけるように転職活動開始

#### 3ヶ月目（164時間）　ポートフォリオ完成。必要であればポートフォリオの研磨
- ポートフォリオ作成完了(140時間)
- テストコード学習？
    - 必要であればphpunit学習
- 転職活動本格的開始

#### 4か月目　転職活動本格的にスタート
- 一か月で内定を目指す！


# 参考

下記ロードマップを参考にさせて頂きました。
- [未経験からwebエンジニアになるロードマップ](https://qiita.com/mk18/items/83ab9f14bdf46e67886f)
- [Webエンジニアになりたい人に捧げる学習ロードマップ](https://www.wantedly.com/companies/gizumo-inc/post_articles/352325)
- [【実体験をもとに】30歳未経験から独学4ヶ月でバックエンドエンジニアとしてWeb系自社開発企業へ転職するまでのロードマップ](https://qiita.com/WATARU_GP01/items/7e534e08f9f583d15775)
karma init でエラーになる

# 環境

* Node.js@15.3.0
* karma@6.3.17
* karma-cli

# 事象
* karma-cli をグローバルにインストール後、[karma 公式](http://karma-runner.github.io/6.3/intro/configuration.html)に記載されている通りに`karma init` を実行しても、エラー「`node:internal/modules/cjs/loader:922`」が出力され、初期化処理が実行されない

```bash:console.log
$ karma init
node:internal/modules/cjs/loader:922
  throw err;
  ^

Error: Cannot find module 'C:\Program Files\Git\Users\***\AppData\Local\Temp\fnm_multishells\89596_1648101114983\node_modules\karma-cli\bin\karma'
?[90m    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:15)?[39m
?[90m    at Function.Module._load (node:internal/modules/cjs/loader:763:27)?[39m
?[90m    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:76:12)?[39m
?[90m    at node:internal/main/run_main_module:17:47?[39m {
  code: ?[32m'MODULE_NOT_FOUND'?[39m,
  requireStack: []
}
```
※ 一部マスキング

# 結論
* karma のローカルインストール先相対パスを指定して実行する

```bash:console.log
$ ./node_modules/karma/bin/karma init

～・～・～ 中略 ～・～・～

RequireJS bootstrap file generated at "C:\Users\???\test-main.js".
Config file generated at "C:\Users\***\karma.conf.js".
```

# 個人的な見解

* ログに出力されるフルパスが`C:\Program Files\Git\***`から始まってる事から、公式セットアップ方法はkarmaをグローバルにインストールする前提になっている。しかし、[同ページ内でローカルインストールを推奨](http://karma-runner.github.io/6.3/intro/installation.html#installing-karma-and-plugins)しておいて、そりゃねぇだろ（ただの愚痴）
【PHP】sessionを理解する

## sessionを理解する
これまでsessionを理解せずにRubyやら進めてきたが、
今回理解することに成功した。はず。

sessionを使うと何ができるのか。
またどのような際に使うと役立つのか備忘録として書いていきたい。

## sessionとは?
SESSIONとは、サーバ側で保有する、一時的なデータ保存の仕組みのこと。

ログイン情報など、ユーザーと紐づく情報をサーバー側に一定期間保存しておくことができる。
サーバ側にデータを保存するため、Cookieよりもセキュリティ面で優れている。

SESSIONが使われる例として一番代表的なのはログイン機能。

ユーザIDやパスワード情報をサーバ側にSESSIONとして保存しておくことで、
複数ページにわたるwebサービスでも同じ値を使い回すことができる。

## sessionが必要な理由
HTTPプロトコルでは、通常、情報の保持ができないため
sessionを用いて、一時的に情報を保持する必要があるとされている。

SESSIONとしてデータがサーバに存在していれば、
サーバ上のSESSIONデータから情報を取得するだけで、複数画面に渡るwebサービスでも、簡単かつ安全にデータを使い回すことが可能。

## Cookieとは
Cookieとは、ブラウザ側で保有する、一時的なデータ保存の仕組みのことだ。

よくオンラインショッピングなどで、一定期間の間、ログイン中のユーザのショッピングカートの中身が保存された状態になっているのは、Cookieが働いてくれているためである。

## sessionの使い方
```
session_start();

$_SESSION['キー名'] = バリュー;
```

session_start();　にてsessionをスタートさせる。
セッションを使うプログラムソースなら必ず書く。

そして、スーパグローバル変数「$_SESSION」にキーと値を代入をする。

## sessionを用いたFormを使った例
```
// test.php

<?php

session_start();

// POST を受け取る変数を初期化
$blood = '';

// セレクトボックスの値を格納する配列
$bloodList = array(
  "A",
  "B",
  "O",
  "AB"
);

// 戻ってきた場合
if(isset($_SESSION['blood'])){
  $blood = $_SESSION['blood'];
}
?>


<body>
  <form method="POST" action="test1.php">
    <select name="blood">
      <?php
        foreach($bloodList as $value){
          if($value === $blood){
            // ① POST データが存在する場合はこちらの分岐に入る
            echo "<option value='$value' selected>".$value."</option>";
          }else{
            // ② POST データが存在しない場合はこちらの分岐に入る
            echo "<option value='$value'>".$value."</option>";
          }
        }
      ?>
    </select>
    <input type="submit" value="送信する"> 
  </form>
</body>
```

```
// test1.php

<?php

session_start();

$_SESSION['blood'] = $_POST['blood'];
// POST データを代入する
$blood = $_POST['blood'];

?>

<body>
  <?php echo $blood ?>
  <a href="test.php">戻る</a>
</body>
```

これで戻るボタンを押して戻ったあともsessionが効き、
入力した血液型が保持されている。
【Rails】背景色・色・フォントなどランダムに投稿したい！！

# 【Rails】背景色・色・フォントなどランダムに投稿
## はじめに
本記事では
Rubyの**Sample**メソッドを用いて実装を行なっています
## 下準備
興味のない方は飛ばしてOK

```terminal:terminal
rails new sample
rails db:create  
rails g model Example body:string
rails db:migrate
rails g controller examples
code .
```


```ruby:config/routes.rb
  resources :examples
  root 'examples#index'
```
```ruby:app/controllers
    def index
        @examples = Example.all
        @example = Example.new
    end
    def create
        example = Example.new(example_params)
        if example.save
            redirect_to :action => "index"
        end
    end
    private
    def example_params
        params.require(:example).permit(:body)
    end
```
続いてindex.html.erbというファイルをapp/views/examplesに作成し、以下をコピペします
```erb:app/views/examples/index.html.erb
<%= form_for @example do |f| %>
    <%= f.label :body %>
    <%= f.text_field :body , :size => 140 %>
    <br>
    <%= f.submit "exampleする" %>
<% end %>

<div class="examples-container">
    <% @examples.each do |t| %>
    <div class="example">
        <%= t.body %>
    </div>
<% end %>
```



## sampleコード
一度試してみましょう
```erb:app/views/examples/index.html.erb
<%= form_for @example do |f| %>
    <%= f.label :body %>
    <%= f.text_field :body , :size => 140 %>
    <br>
    <%= f.submit "exampleする" %>
<% end %>

<!-- 追記箇所ここから -->
<% colors = %w|#51617A #5A9AFB #A6C8FA #2C4B7A #839EC7| %>
<div class="examples-container">
    <% @examples.each do |t| %>
    <%= content_tag :div, style: "background-color: #{colors.sample}" do %>
    <div class="example">
        <%= t.body %>
    </div>
    <% end %>
<% end %>
<!-- 追記箇所ここまで -->
```
ここで追記した以下の部分について解説をします。
```erb
<% colors = %w|#51617A #5A9AFB #A6C8FA #2C4B7A #839EC7| %>
<div class="examples-container">
    <% @examples.each do |t| %>
    <%= content_tag :div, style: "background-color: #{colors.sample}" do %>
    <div class="example">
        <%= t.body %>
    </div>
    <% end %>
<% end %>
```
まず
```rb
<% colors = %w|#51617A #5A9AFB #A6C8FA #2C4B7A #839EC7| %>
```
の部分ではcolorsという名前の配列を作っています！
%wとすることで、colorsの中身が配列の形で
```
["#51617A", "#5A9AFB", "#A6C8FA","#2C4B7A","#839EC7"]
```
となります。
その後
```erb
<%= content_tag :div, style: "background-color: #{colors.sample}" do %>
```
#{colors.sample}とすることで背景色が先ほどの配列の中から一つ選ばれます！

## sampleメソッドとは

sampleメソッドとは、Rubyの言語でランダムで配列から要素をひとつ選択して返すメソッドです。
例えば
```rb
array = [1,2,3,4,5,6,7]
```
とした上で
```rb
array.sample
```
とすることで1~7までの数値からランダムで1つ選択されます！

これを使って応用してみましょう！
## 応用編
```diff_erb
<% colors = %w|#51617A #5A9AFB #A6C8FA #2C4B7A #839EC7| %>
+ <% widthes = %w|10em 20em 30em| %>
<div class="examples-container">
    <% @examples.each do |t| %>
+ <%= content_tag :div, style: "background-color: #{colors.sample};width:#{widthes.sample};height:#{widthes.sample}" do %>
    <div class="example">
        <%= t.body %>
    </div>
    <% end %>
<% end %>
```
とすると縦・横の幅が10em・20em・30emの中から任意に取られます！
面白いですね！

## 終わりに
この機能で色々なことができると思います！背景写真をランダムに変えたり、投稿一覧画面を色鮮やかにしたりなどなど！
**プロダクトはあなたの思い通りに**
GeekSalonWebメンターいとじゅんがお送りしました！
【PowerShell】Notes 文書を CSV ファイルにエクスポートする

# 概要

VBA のサンプルはたくさんあるので、PowerShell(Ver5.1) で書いてみました。

# 前提

LotusScript は 32bit版 PowerShell でしか動作しません。

https://qiita.com/yoshi_iwa/items/13a74e534bc5f2b6aaae

# ソース

```powershell:Export-Csv.ps1
using namespace System.IO;

# [32bit版 PowerShell](C:\Windows\SysWOW64\WindowsPowerShell\v1.0\powershell.exe) でしか使えません。
Param (
    # Notes DB ファイルパス
    [Parameter(Mandatory, ValueFromPipeline, Position=0)]
    [FileInfo] $Path
) Begin {
    $ErrorActionPreference = [System.Management.Automation.ActionPreference]::Stop

    # Notes を設定するセッション接続
    $Notes = New-Object -ComObject Lotus.NotesSession
    $Notes.Initialize('')
} Process {
    $db = $Notes.GetDatabase('', $Path, $false) 

    $Title = $db.Title
    $Documents = $db.AllDocuments

    $doc = $Documents.GetFirstDocument()
    $rows = if ($doc) {
        do {
            $row = @{}
            $doc.Items | % {
                if (![string]::IsNullOrEmpty($_.Name)) {
                    $row.Add($_.Name, $_.Text)
                }
            }

            [PSCustomObject]$row

            $doc = $Documents.GetNextDocument($doc)
        } while ($doc)
    }

    if ($rows) {
        pushd $Path.DirectoryName

        $rows | Export-Csv -NoTypeInformation "$Title.csv" -Encoding UTF8

        popd
    }
} End {
    $ErrorActionPreference = [System.Management.Automation.ActionPreference]::Continue
}
```

## 使い方

Notes 文書ファイル(.nsf) をパイプラインで渡せます。

```powershell
dir C:\NotesDb -File -Recurse -Include *.nsf | .\Export-Csv.ps1
```

---
# 参考サイト

- [GDIplusCODE (sakura.ne.jp)](http://gdipluscode.sakura.ne.jp/etc/shortcode4notes.html#section9)
- [Lotus Domino Designer 8.5 ヘルプ - 例: COM を使用して Lotus Domino オブジェクトにアクセスする](http://153.231.246.220/help/help85_designer.nsf/f4b82fbb75e942a6852566ac0037f284/3b7b2e64a2433180492575050037e130?OpenDocument)
- [ノーツ/ドミノの即戦力サンプルコード | 120 サンプル (tooljp.com)](http://tooljp.com/notes_qa/notes_qa_list.html)
  - [ビューからノーツ文書をCSVとして書き出すサンプルコード| ノーツドミノ (tooljp.com)](https://tooljp.com/notes_qa/B16FEDB9B9EFF9C74925696A005A4EDE.html)
- [PowerShellでNotesメールを取得する - 適材適所 (tekizai.net) 【注意点】32Bit版のPowerShellを使います](https://www.tekizai.net/entry/2019/09/14/130000#注意点32Bit版のPowerShellを使います)
[UE4] TSoftObjectPtrでのロード


なんか関係している箇所をメモ。

## C++
```
// DataTableなどから取得してくる
TSoftObjectPtr<USkeletalMesh> softPtr;

// メモリにあればGetで取得できる
USkeletalMesh* ret = softPtr.Get();

// メモリになかったとき
if (ret == nullptr) {
	ret = softPtr.LoadSynchronous();
}
```

## Blueprint

AssetManager
### AsyncLoadPrimaryAsset
メモリにロード
PrimaryAssetに設定するには
ProjectSettingsのGame>AssetManager>Primary Asset Type to Scanに設定が必要
AsyncLoadxxxxxxxx系

### UnloadPrimaryAsset→CollectGabage
メモリから解放
CollectGabageを行はないといけないのはそれ単体は解放されるが
一緒に読み込まれたものを解放するため（参照が残っていたら消えない

### LoadAssetBlocking
Salesforceフローで更新レコードを使用する方法は？


いつもは何でもApexでゴリゴリ書いているので、それ以外の自動化処理を使う理由を見いだせません。新しいことを覚えるのは辛い。
しかし、最近Flowの質問が多いので英語で書かれたいいお手本を訳しながら、回答に使える英文を整理しようと思います。

これが元ネタ
[How to use Update Records in Salesforce Flows ?](https://sfdcpanther.com/how-to-use-update-records-in-salesforce-flows/)


# レコードの更新 UPDATE RECORDS

更新するSalesforceレコードを特定し、それらのレコードで変更する値を設定します。これを行うには、レコード変数またはレコード収集変数に格納されているIDとフィールド値を使用するか、指定条件を使用してレコードを識別し、フィールド値を個別に設定します。
Identify Salesforce records to update, and set the values to change in those records. To do so, use the IDs and field values stored in a record variable or record collection variable, or use specify conditions to identify the records and set the field values individually.

[レコードの更新]要素では、更新するレコードを識別してその値を設定する方法を選択することで、要素の残りの部分に何を入力するかが決まります。
In the Update Records element, your selection for how to identify the records to update and set their values determines what to enter in the rest of the element.

**レコード変数またはレコード収集変数を使用する**
**Use a record variable or record collection variable**


レコード変数またはレコードコレクション変数に変更するフィールド値を入力した場合は、レコード変数またはレコードコレクション変数のIDとフィールド値を使用することを選択してから、使用する変数を選択します。 
If you’ve populated a record variable or record collection variable with the field values to change, choose to use the IDs and field values from a record variable or record collection variable, and then select the variable to use. 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/dc5f5388-fbe0-8389-4619-93dd03dc33a4.png)


**条件を使用し、フィールドを個別に設定します**
**Use conditions and set fields individually**

レコードを更新するオブジェクトを選択し、レコードのリストをフィルターで除外する条件を追加し、それらのレコードに対して変更するフィールド値を設定します。 
Choose the object whose records you want to update, add conditions to filter down the list of records, and set the field values to change for those records. 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/26d6ed94-9dfb-724c-dd31-fa6f9caff829.png)

# 最終結果 FINAL OUTCOME

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/b3ce61b3-ceab-643e-f957-1a9f2e65c05d.png)

[ユーザから取引先責任者情報の収集](https://trailhead.salesforce.com/ja/content/learn/projects/build-a-simple-flow/collect-contact-info-from-your-user?trail_id=build-flows-with-flow-builder)
SESSIONとCookie(学習中・メモ)

・SessionとCookie
SESSION、Cookieともデータを一時的に保有しておくという点では同じ役割を持つ。
具体的な違いとして、サーバ側で保有するのかブラウザ側で保存するのかという違いがある。

Q, CookieおよびSessionはなぜ必要なのか？
A, HTTPが「Stateless(ステートレス)」という性質を持っているから。
要は「サーバーがクライアントの情報を保持し続けられない」ことを意味している。
![2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600460/fbe3bb3f-ae14-4eb6-e1ed-aa9039be839e.jpeg)
上記のような状態だと、色々な問題が発生する。
例えば、ショッピングサイトなどで買い物かごを作成する際に、リクエストの度にリセットされるから一向に作成できないという問題。
これらを解決するためのSESSIONとCookieが存在する。


以下より説明
・Session
SESSIONとは、サーバ側で保有する、一時的なデータ保存の仕組みのことだ。
サーバ側にデータを保存するため、Cookieよりもセキュリティ面で優れている。

![edit-5-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600460/3288bc8d-3a98-e20d-ed33-e3863e3e3006.png)

・Cookieとは
 Cookieとは、ブラウザ側で保有する、一時的なデータ保存の仕組みのことだ。

よくオンラインショッピングなどで、一定期間の間、ログイン中のユーザのショッピングカートの中身が保存された状態になっているのは、Cookieが働いてくれているためである。

・SESSIONの使用例
SESSIONが使われる例として一番代表的なのはログイン機能。
session_start();は、セッションを使うお決まりの文句。
スーパグローバル変数「$_SESSION」にキーと値を代入すればOK。

・Cookieの使用例
同じくログイン機能と合わせて使われることが多い。
setcookie(クッキー名, 値, 保存期間, [以下オプションは省略]）;
スーパグローバル変数$_COOKIEに、setcookie()関数でセットしたクッキー名を、キーに指定してあげれば、値が取得可能になる。


図解での説明
ショッピングサイトにアクセスするユーザーとそのサーバー↓
![5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600460/b77c0785-ee53-1f2f-80ae-e421aafcf68f.jpeg)

ユーザーがアクセスすると、ショッピングサイトのサーバーは、「Session ID」を生成して、ユーザーと紐付けた上でサーバーに保存します。そして、ショッピングサイトの画面を返すと同時に、このSession IDをブラウザに渡します。
そしてブラウザは、この送られてきたSession IDを、送ってきたサーバーの情報等を含めた上で、「Cookie」に保存します。Session IDはユーザーに固有の値が割り当てられます。↓
![6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600460/af735585-8647-1622-9279-34cb6a95e18a.jpeg)

ユーザーによる一連の動作(サイトにログイン、サイトにアクセス、買い物かごに商品を入れる、購入する、ログアウトする)のことを「セッション(Session)」と言います。そしてこのとき、Cookieに紐付いているサーバー情報を元に、先ほどCookieにセットしたSession IDが自動的にサーバーに送信されます。するとサーバーは、Session IDにより「誰からの通信か」を認識した上で、選択した本をSession IDと紐付けてサーバー側のデータベースに保存します。
![7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2600460/2bff25d3-b601-72da-0780-ea297d96ed6a.jpeg)このような一連の動作によって、ショッピングサイトは、ユーザーの情報をHTTP通信のステートレス性に関係なく保持することができるのです。


間違いやアドバイスなどあれば、遠慮なく言って欲しいです。



参考文献：

https://hara-chan.com/it/programming/session-cookie-difference/

https://www.engilaboo.com/definitely-understand-cookie-session/
【OBGノウハウ】バリデーションチェックについて

# はじめに

会員登録ページで名前やメールアドレス、パスワードなどなど必要事項を入力する際に「正しく入力してね！」と注意されることがありますよね？

今回は、そんな入力値に対してチェックを行い妥当な表現であるか確認をする「バリデーションチェック」についての記事です。入力チェックとも呼びますね。

よく使用される基本的なものをJavaScriptを用いて簡易なものですが実装してみました。

# 入力フォームの作成

まずは簡単な入力フォームを作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100940/0a0ff0ad-5112-60f2-2b22-98c8987c2687.png)


このフォーム内に入力された文字列に対してバリデーションチェックを行っていきます。
今回行うバリデーションチェックは以下の4点です。

:::note info

①文字数チェック
②未入力チェック
③正規表現チェック
④一致チェック（パスワードとパスワード（再入力）

:::

まずは、各フォームの入力値を取得しましょう～！

```js
    const name = document.getElementById("name").value;
    const mail = document.getElementById("mail").value;
    const pass = document.getElementById("pass").value;
    const rePass = document.getElementById("rePass").value;
```


# 文字数チェック

指定した文字数以内の入力であるかのチェックです。
今回はhtml内で`maxlength`で最大文字数を指定することで、規定以上の文字が入力できないようにしました。

```html
<p>名前（全角）</p>
    <input type="text" name="name" id="name" maxlength="50">
```
jsでチェックしたい場合は、文字数を`length`によってカウントして条件分岐を行うなど・・・

```js
   const str = "あいうえお"
   if(str.length > 3){
      console.log("3文字以内です");
   }else{
      console.log("3文字以上です");
   }
```

# 未入力チェック

入力がされているかどうかのチェックです。
今回は入力フォームの文字列が空文字（`""`）である場合にエラーとしました。
全項目に対して同じことを行っているので、or（`||`）で繋いでまとめています。

```js
    if(name == ""|| mail == ""||pass == ""||rePass == ""){
        this.errorMessages.push("未入力の項目があります。"); 
    }
```

スペースやタブの場合も入力があるとみなされて、空文字判定とはなりません。
そういった目に見えない入力値を防ぐために、前後のスペースやタブを削除するには`.trim()`を使いますが、今回は入力項目も少ないので割愛しました。


# 正規表現チェック

全角文字で入力されているか、半角英数字で入力されているか、指定したい文字列の形式（メールアドレス）かのチェックを行います。
()内に記載しているのが正規表現であり、マッチしていなければエラー表示を行います。

```js
    //全角入力チェック(名前）
    if(!name.match(/^[^\x01-\x7E\uFF61-\uFF9F]+$/)){
        this.errorMessages.push("名前は全角で入力してください。");
    }
    //半角英数のみで@が含まれているか（正規表現）のチェック（メール）
    if(!mail.match(/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/)){
        this.errorMessages.push("正しいメールアドレス（半角英数字で@を含む）を入力してください。");
    }
    //半角英数チェック（パスワード）
    if(!pass.match(/^[A-Za-z0-9]+$/)){
        this.errorMessages.push("パスワードは半角英数字で入力してください。");        
    }
```

## 正規表現とは？
参考：[正規表現](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions)
文字列内で文字の組み合わせを照合するために用いられるパターンのことです。
スラッシュ`/`で囲まれたパターンと、` RegExp `オブジェクトのコンストラクター関数を呼び出す方法がありますが、今回は前者を使用しました。


|構文|概要|
|--|---|
|^|文字の先頭| 
|$|文字の末尾|
|+$|+はその前のものが1回以上繰り返すこと。前にあるものが終わりまで続くこと。|
|[^\x01-\x7E\uFF61-\uFF9F]|全角文字（[^\x01-\x7E\xA1-\xDF]では半角カナも含まれてしまう）|
|[a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]|a～z、A～Z、0~9と._-で始まり@以降もa～z、A～Z、0~9と._-で終わる（＝メールアドレス）|
|[A-Za-z0-9]|a～z、A～Z、0~9の半角英数字。|

# 一致チェック

パスワードとパスワード（再入力）欄の入力値が一致しているかのチェックです。
こちらは冒頭で取得した各フォームの入力値（`pass`と`rePass`）が一致していない場合にエラーを返す処理としました。一致しているかチェックしたい項目を比較すればOKです。

```js 
//一致チェック（パスワード・パスワード（再））
    if(pass != rePass){
        this.errorMessages.push("パスワード欄とパスワード再入力欄には同じ値を入力してください。");
```

# おわりに

今回紹介したページが以下になります。
よかったら動かしてみてください～～～！

https://mymy3910.github.io/loginPage/
設計の超初心者、シーケンス図の複合フラグメントを学ぶ

## 「シーケンス図でループ処理ってどうやって書くんだろう？」

「まさか、ループの数だけ矢印を書くわけではないよね……？」と思い、少し調べてみたところ、シーケンスの繰り返しや分岐は「複合フラグメント」という要素を用いることで記述できることがわかった。

## 『複合フラグメント』を使う！
そういうわけで、シーケンス図におけるループ処理と、その他分岐処理などよく書きそうなシーケンスについて、書き方を調べてみた。

### loop
メッセージが繰り返し送信されることを表現する複合フラグメント。イメージとしてはfor文やwhile文。
相互作用オペレータ（右上の枠）にloop(ループ回数の最小値,ループ回数の最大値)を書く。最小値は省略可で、()内に何も書かない場合は無限ループを表す。
また、相互作用制約（フラグメントを実行する条件）を書く場合は、ループの実行条件を書く。

![loop.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1062427/2100e90f-2822-19c8-d46d-20c8d1203d99.png)

### alt
条件によってシーケンスが変わることを表現する複合フラグメント。イメージとしてはif-elseやswitch文。
相互作用オペレータにはaltと書く。点線で条件ごとのシーケンスを区切り、相互作用制約として実行条件をそれぞれの枠に書く。
![alt.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1062427/1ab69ebf-d2eb-0cbe-7248-b86aa56a59a4.png)


### opt
ある条件が成立する場合のみメッセージを送信することを表現する複合フラグメント
。イメージとしてはelseのないif文。
相互作用オペレータにはoptと書く。相互作用制約として実行条件を書く。
![opt.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1062427/263fccc2-1d6d-8386-d805-c31f5677f3dc.png)


### ref
複雑な相互作用を複数の相互作用に分けて表現する複合フラグメント。
相互作用オペレータにはrefと書き、枠内にシーケンスを分けた相互作用の名前を書く。
![ref.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1062427/8d723323-9b55-5cec-c471-c1a004e1e78e.png)

## まとめ

複合フラグメントを活用できると、シーケンス図で表現できる処理の幅が増える。
今回はよく使いそうなものに絞ったが、複合フラグメントは他にも種類がある（parやbrakeなど）ようなので、機会があれば調べて使えるようにしたい。

## 参考
『かんたん UML入門 [改訂2版] (プログラミングの教科書)』
ネットワークのトラシューに使うコマンドのメモ

# net-toolsとiproute2

- net-tools
    - ifconfig等が含まれているパッケージ
    - 開発が2011年で止まっている
    - `/proc`以下のファイルから情報を収集しているため、正確さに欠ける
- iproute2
    - ipコマンド等が含まれているパッケージ
    - net-toolsよりもパフォーマンスが高い
    - Netlink APIを使用して情報を収集しているため、正確

# NICの確認

```bash
# ip linkで出力される情報 + IPの情報
$ ip a
# net-toolsを使用する場合
$ ifconfig
```

```bash
# 有線LANのNICの詳細
$ ethtool en0
# 無線LANのNICの詳細
$ iwconfig wlan0
```

```bash
# 統計情報の確認
$ ip -statistics link
# net-toolsの場合
$ netstat -i
```

# ARPテーブル

```bash
# 一覧
$ ip neigh show
# net-toolsを使用する場合
$ arp -a
```

```bash
# 動的に追加されたエントリを削除
$ sudo ip neigh flush 192.168.0.1
# net-toolsを使用する場合
$ sudo arp -d 192.168.0.1
```

```bash
# ARPテーブルのモニタリング
$ ip monitor
```

# ルーティングテーブル

```bash
$ ip route
# net-toolsの場合
$ route
```

# ソケット

```bash
$ ss
# net-toolsの場合
$ netstat
```

# ハードウェアの確認

```bash
$ lshw
```

# 疎通確認

- 送信側

```bash
$ ping 192.168.0.1
```

- 受信側

```bash
$ sudo tcpdump -i eth0 src host 192.168.0.1
# キャプチャしたパケットをファイルに出力する場合
# 出力されたファイルはWiresharkから読み込むことも可能
$ sudo tcpdump -w hoge.cap -C 1 -Z root -i eth0 src host 192.168.0.1
```

# 余談

- iproute2にはtc(Traffic Control)コマンドが含まれており、ネットワークのレイテンシやスループットを制御することが可能となっている
dataframeに、date型やobject型のデータがある際の、正規化をする際の修正点

問題点
dataframeに、date型のデータがあると、エラーが発生する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1863223/9c56056b-08a1-9fba-870a-6d93b3dad5e7.png)
エラー表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1863223/24f84736-93d7-5910-df4d-88c079077ea4.png)
解決策
１．データ型を確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1863223/3a068fef-d170-a0ca-9e9f-47176bb0c0c2.png)
２．time(datetime)をindexにする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1863223/5863b0ac-fff6-aea1-20da-0471841b767e.png)
３．エラー表示（could not convert string to float: 'NE'）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1863223/125f54f9-0395-0192-4222-4711e6266f19.png)

4.ラベルエンコーディング

```py
# ラベルエンコーディング（LabelEncoder）
from sklearn.preprocessing import LabelEncoder
label_train = train.copy()
label_valid = val.copy()

s = (train.dtypes == 'object')
object_cols = list(s[s].index)
#カテゴリデータを使用して各列にラベルエンコーダを適用します
label_encoder = LabelEncoder()
for col in object_cols:
    train[col] = label_encoder.fit_transform(train[col])
    val[col] = label_encoder.transform(val[col])
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1863223/03c5c1d9-64a7-b62b-ee20-e890078b4ece.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1863223/d024e358-f294-e3c7-9b9f-54acc4efd107.png)

'
クラウドエンジニアを目指す文系卒の僕の自己紹介

# 初めに 

22年度卒文系学部卒の、たいきです。 
AWSでのアウトプットの記録として投稿を始めました。 
直近の目標はクラウドエンジニアとして経験を積むことです。 
今後、同じような背景を持った人の参考になれば幸いです。 

 

# 資格・経験 

応用情報技術者試験(2021/10月取得) 
AWS Solution Architect - Associate(AWS-SAA 2021/12月取得) 
AWS Solution Architect – Professional(AWS-SAP 2022/3月取得) 
７か月間のシリコンバレーでの留学 

 

# テクノロジーに興味を持ったきっかけ
　シリコンバレーでのシェアハウス中の経験が、文系卒の僕がこの業界に飛び込んだ大きな要因です。約１０数人いたハウスメート全員がエンジニアでした。そのような環境の中で一人のフランス人が僕にプログラミングを熱心に教えてくれました。最初に触れたのはPythonです。CodeWarsという学習サイトでアルゴリズムの練習にものすごくのめりこんだことを覚えています。これが僕がこの業界での初めての経験です。 

　一番大きなきっかけは、あるアメリカ人エンジニアの開発光景を見ていた時です。彼はXRを工場に導入するシステムを開発していました。そのデモ動画を見せてもらいとても好奇心がそそらてました。そしてそれをきっかけに、僕は彼のようにSFの世界にあったものを現実の世界に実現させえたいと考えるようになりました。 

 

# クラウドエンジニアを志望する理由 

　最初は、どこかのサイトの「世界で給与が高い資格ランキングでAWS-SAAが１番である」という理由だけでクラウドの勉強を始めました。しかし、勉強を続けていくとこの技術自体・技術の将来性に非常に関心を抱きました。そして、同時に「テクノロジーに興味を持ったきっかけ」を思い出しました。この技術は非常に興味深く、同時に非常に成長性のあるものです。このテクノロジーで技術を学びトップになれば、「SFの世界を現実の世界にする」というプロジェクトにインフラ構築という大きな役割で関われるのではと、これがクラウドエンジニアになりたいと考えた理由です。 

 

# 今後の目標 
直近１年間の目標
・AWS-SAPで学んだクラウドの理論を実現できるようになること
・組織にクラウドエンジニアとして参加し、個人ではできない一番クラウドの恩恵を受ける大規模なクラウド構築を経験すること。
(みんな大好き)サクラエディタの小技

## はじめに
みんな大好きサクラエディタの便利な小技を紹介していきたいと思います！

個人的によく使う小技を中心にご紹介させていただきます。

## ショートカットキー

|機能名|ショートカットキー|
|-|:-:|
|コピー|Ctrl + c|
|貼り付け|Ctrl + v|
|切り取り|Ctrl + x|
|元に戻す|Ctrl + z|
|全選択|Ctrl + a|
|名前を付けて保存|Shift + Ctrl + s|
|上書き保存|Ctrl + s|
|検索|Ctrl + f|
|置換|Ctrl + r|
|日付を挿入|Alt + ;|
|時間を挿入|Alt + :|

## 検索・置換について

自分はよくサクラエディタをデータを整形する際に使用したりします。
例えばタブ区切りのデータをカンマに区切りに変えたり、文末に特定の文言をプラスしたい…などといったときに活用します。

その際に用いる文言について紹介します。
置換のウィンドウを表示させたら中段の「正規表現」にチェックすることをお忘れなく。

#### ・タブをカンマに置換したい場合
置換前　：　¥t
置換後　：　,

#### ・文頭に文言追加したい場合
置換前　：　^
置換後　：　追加したい文言

#### ・文末に文言追加したい場合
置換前　：　$
置換後　：　追加したい文言


## その他便利な使い方
#### ・Alt + 矢印キー
矩形選択が出来ます。

例えば、固定長のテキストデータからカラム単位でデータを抜き出したい時、非常に重宝します。

少しでもお役に立てれば嬉しいです！
【Swift】クロージャ 簡略引数名

### ■ 簡略引数名 - 引数名の省略

簡略引数名 (shorthand argument name)は、
$に引数のインデックスを付けた$0や$1となります。
```
let isEqual: (Int, Int) -> Bool = {
    return $0 == $1
}

isEqual(1, 1) // true
```
【SpringBoot】SpringBootTest実行時にapplication.properties/yaml/ymlの設定を上書きする

## やり方
`SpringBootTest`アノテーションの`properties`に値を設定することで`application.properties`に設定された値を上書きすることができます。

https://spring.pleiades.io/spring-boot/docs/current/api/org/springframework/boot/test/context/SpringBootTest.html

### サンプルコード
以下のコードでは、`ApplicationTests`の実行時のみ`lazy-initialization`を無効にしています。

```kotlin
import org.junit.jupiter.api.Test
import org.springframework.boot.test.context.SpringBootTest

// lazy-initializationを切ることで全Beanが正常に初期化されることをテストしている
@SpringBootTest(properties = ["spring.main.lazy-initialization=false"])
class ApplicationTests {

    @Test
    fun contextLoads() {
    }
}
```

### 補足
この他にも特定のテストで設定を上書きする方法は幾つかあります。
下記のページなどが参考になると思います。

https://www.baeldung.com/properties-with-spring#boot
【Python OpenCV】 ファイル名が日本語・パスに日本語が含まれる画像を扱う方法

# OpenCVは日本語を扱えない
OpenCVはANSI文字列以外の文字を扱えない仕様になってます。
つまり、日本語を含むファイル名・パスを扱えません...。

## 実行環境
Python : 3.10.1
OpenCV : 4.5.5

## エラー
```
[ WARN:0@14.898] global D:\a\opencv-python\opencv-python\opencv\modules\imgcodecs\src\loadsave.cpp (239) 
cv::findDecoder imread_('E:/my/蛻ｶ菴懃黄/map.png'): can't open/read file: check file path/integrity
```

```
TypeError: unsupported operand type(s) for *: 'NoneType' and 'int'
```


## 対策方法
Pillowで画像ファイルを開き、OpenCV(NumPyのndarray)に変換して対策します
```python:
import numpy as np
from PIL import Image

# Pillow 画像読込
pilimg = Image.open("path")

# Pillow -> NumPy
img = np.array(pilimg)

# カラー画像の場合、RGB -> BGR変換する
if img.ndim == 3:
    img = cv2.cvtColor(img, cv2.COLOR_RGB2BGR)
```
Pillowでは、カラー画像の場合RGB順にデータが格納されていくので、cvtColorでOpenCVの形式(BGR)へ変換します。
※NumPyのほうが画像読込が平均処理時間が早いですが、画像保存の際の平均処理時間はPillowが早いので、今回はPillowを使用しています。(画像読込はNumPy、保存はPillowと使い分けるのが得策かも？)
【Swift】Sequenceプロトコル

### インターフェース
- map(_:)メソッド

## map(_:)メソッド - 要素を変換する
これは、全ての要素を、特定の処理を用いて変換する。要素を変換する処理は、引数のクロージャを用いて指定する。
Sequenceプロトコルのmap(_:)メソッドは、
Optional<Wrapped>型のmap(_:)メソッドと同じ意味を持つ。

#### (例) [Int]型の配列の各要素を2倍にする
```
let array = [1,2,3,4,5]
let doubled = array.map({ element in element * 2 })

doubled // [2,4,6,8,10]
```
Nuxt × TypeScript プロジェクト作成時エラー(Cannot find module './index.vue?vue&type=script&lang=ts&')の解決方法

Nuxt × TypeScript のプロジェクトを作成し、WEBブラウザで開いた時に
下記エラーが発生した場合の解決方法

:::note alert
Error:
Cannot find module './index.vue?vue&type=script&lang=ts&'
:::

# 1.概要
```
npx create-nuxt-app プロジェクト名
```
言語の選択で "TypeScript" を選択


```
cd プロジェクト名
npm run dev
```
localhost:3000/ にアクセス

Errorが発生！

# 2.解決方法
ts-loaderのバージョンを変更

```
cd プロジェクト名
npm uninstall ts-loader
npm install ts-loader@8.2.0 
```
:::note info
これで解決しました！！！
:::

(もしくは、npmのバージョンを最新にする等々...)
processingでPDF出力のサンプル

# はじめに
　ProcessingにはPDF保存の機能が標準で備わっている。jpgやpngの保存に比べ、ベクター形式で保存できるので、解像度に左右されない出力が可能になる。また、Illustrator等に読み込み可能なので、再加工が容易になる。

10年前のPDFのバージョンから、3Dデータも保存できるようになっていて、ProcessingのPDF書き出しも、それに対応してる。お手軽だ。
https://processing.org/reference/libraries/pdf/index.html

# 円を書く
Andy gilmoreの作を例に、プログラムしてみる。
重要な部分は下記のとおり。

```java
size(512, 512);//通常
size(512, 512, PDF, "triCircle.pdf");//PDF書き出し
```

![triCircle.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/d811bfdf-e25b-8e80-5ec7-7436070713aa.png)

# 印刷について
　この図柄の場合、モアレが発生する。しかも、モニタ上では、拡大率によって、モアレの見え方が変わってくるうえに、印刷時のモアレとは一致しないので、印刷物としての作品とする場合、試行錯誤か必要な題材かと思う。

# コード

```java:triCircle.pde
import processing.pdf.*;

size(512, 512, PDF, "triCircle.pdf");

PVector c1;

//Background
fill(0);
noStroke();
rect(0, 0, width, height);

//
ellipseMode(RADIUS);
noFill();
strokeWeight(0.1);
stroke(255,128);

for (float th=0; th<2*PI; th+=PI*0.01) {
  c1 = new PVector(cos(th)*64+256, sin(th)*64+192);
  ellipse(c1.x, c1.y, 128, 128);

  c1 = new PVector(cos(th)*64+192, sin(th)*64+256+47);
  ellipse(c1.x, c1.y, 128, 128);

  c1 = new PVector(cos(th)*64+320, sin(th)*64+256+47);
  ellipse(c1.x, c1.y, 128, 128);
}
exit();
```
複数言語を勉強していて陥ること

プログラミングにおいて、複数言語を勉強していると陥ることがあります。私だけかもしれませんが紹介します。
# 文法が分からなくなる。（混乱しやすくなる）
どういうことかと言うと、分かりやすく配列（リスト）を例に挙げていきます。

```php_code.php
$num = array(1,2,3)
```
```python_list.py
lists = [1,2,3]
```

二つのコードにおいて、リストの中身のインデックス番号を取り出すとき、PHPであれば、```print_r($num);```で取り出せるが、Pythonにはない（追記参照）。リストのデータを取り出すときのように以下のコードを打たないといけない。

```python_list2.py
for list in lists:
    print(list)
```
このコードの結果が
```python_result.py
1
2
3
```
となる。
※追記
Pythonでインデックス番号を取得したいときは、
```python_list3.py
print(list(enumerate(lists))) # リスト
print(dict(enumerate(lists))) # 辞書

for i, number in enumerate(lists): # for文
    print([i], number)
```
などと書くと良い。（リスト形式や辞書、for文での取り出しなどいろいろある。*上記参照)

複数言語を勉強していると、書き方が分からなくなり、調べないといけなくなる。

# リストの操作も違う。
リストでデータの追加・変更・削除をする場合、PHPとPythonではコードが異なる。（当たり前だが）
それも頭が混乱する原因の一つです。

# 結局は
分かりやすいメモなどを残しておくか、都度確認をするしかないのでしょう。

皆さんはどう、対策をしていますか？