OmniAICreator/Qiita-1.07M huggingface dataset:
rubygems.org にアクセスできず、 serverspec がインストールできない

<!-----

Yay, no errors, warnings, or alerts!

Conversion time: 0.56 seconds.


Using this Markdown file:

1. Paste this output into your source file.
2. See the notes and action items below regarding this conversion run.
3. Check the rendered output (headings, lists, code blocks, tables) for proper
   formatting and use a linkchecker before you publish this page.

Conversion notes:

* Docs to Markdown version 1.0β33
* Sat Jul 02 2022 19:14:56 GMT-0700 (PDT)
* Source doc: 2022-06-28 rubygems.org にアクセスできず、 serverspec がインストールできない
* Tables are currently converted to HTML tables.
----->

## 環境
* Windows 10
* VirtualBox
* ubuntu/focal64      (virtualbox, 20220308.0.0)
* ruby 2.7.0p0 (2019-12-25 revision 647ee6f091) [x86_64-linux-gnu
* gem 3.1.2
* Cisco Any Connect

## 発生した現象

Windows 10 上で動作する VirtualBox 上で Ubuntu 20.04 LTS をホストした。


```
gem install serverspec
```


のコマンドを実行したところ、以下のようなエラーが出て serverspec のインストールが失敗した。


```
default: ERROR:  Could not find a valid gem 'serverspec' (>= 0), here is why:
default: Unable to download data from https://rubygems.org/ - timed out (https://rubygems.org/specs.4.8.gz)
```

Cisco Any Connect を用いて、宅内とは異なる別のネットワークと VPN を接続した状態での実行だった。

VPN を接続した状態では、ブラウザから rubygems.org へのアクセスもエラーが発生しできなかった。

VPN を切断した状態ではブラウザから rubygems.org へのアクセスはできたが、依然、 VirtualBox 上の Ubuntu 環境からのアクセスはできないままだった。


## 解決方法

VPN を切断した状態で、Windows 10 上に gem を全てダウンロードした。

それを Ubuntu 環境にアップロードし、ローカルでのインストールを行った。

まず Gemfile を作成。


```
cat <<'EOF' > Gemfile
# frozen_string_literal: true
source "https://rubygems.org"
gem "serverspec"
EOF
```


Windows 10 上で `bundle install` を実行する。

同じ階層に vendor/cache ディレクトリが作成され、その中に依存するものも含め serverspec に関する全ての gem ファイルがダウンロードされる。

[ruby - What is the simplest way to download a gem without installing rubygems? - Super User](https://superuser.com/questions/325338/what-is-the-simplest-way-to-download-a-gem-without-installing-rubygems)


```
bundle install
```


これを VirtualBox 環境にアップロードする。今回は synced_folder の設定を利用していたため、そのディレクトリにコピーするだけでよい。

Ubuntu にログイン、コピーしたディレクトリ階層に移動し、 `gem install --local serverspec` を実行する


```
$ sudo gem install --local serverspec
Successfully installed sfl-2.3
... (略
Installing ri documentation for serverspec-2.42.0
Done installing documentation for sfl, net-ssh, net-scp, specinfra, multi_json, diff-lcs, rspec-support, rspec-expectations, rspec-core, rspec-its, rspec-mocks, rspec, serverspec after 9 seconds
13 gems installed
```


これで、 serverspec の gem ファイルをダウンロードすることができた。


## 余談

本件については [Stack Overflow などで様々な解決方法が議論・提案されていた](https://stackoverflow.com/questions/49800432/gem-cannot-access-rubygems-org)が、結局自分の環境でうまくいく方法を見つけることはできなかった。

これは暫定対応なので、恒久対応を今後見つける必要がある。引き続き調査する予定。
初心者向け　rails-i18nでエラーメッセージを日本語化（翻訳）できない　文字化け

## 実行環境

rails-i18nを利用してエラーメッセージを日本語化しようと試みたが上手くいかなかった。
以下の様に文字化けして表示されてしまう。


```terminal 
irb(main):002:0> Post.create!(title: "", content: "")
省略.rbenv/versions/3.0.3/lib/ruby/gems/3.0.0/gems/activerecord-6.1.6/lib/active_record/validations.rb:80:in `raise_validation_error': 

＊＊＊＊以下i18nによる翻訳結果****
\xE3\x83\x90\xE3\x83\xAA\xE3\x83\x87\xE3\x83\xBC\xE3\x82\xB7\xE3\x83\xA7\xE3\x83\xB3\xE3\x81\xAB\xE5\xA4\xB1\xE6\x95\x97\xE3\x81\x97\xE3\x81\xBE\xE3\x81\x97\xE3\x81\x9F: Title\xE3\x82\x92\xE5\x85\xA5\xE5\x8A\x9B\xE3\x81\x97\xE3\x81\xA6\xE3\x81\x8F\xE3\x81\xA0\xE3\x81\x95\xE3\x81\x84, Content\xE3\x82\x92\xE5\x85\xA5\xE5\x8A\x9B\xE3\x81\x97\xE3\x81\xA6\xE3\x81\x8F\xE3\x81\xA0\xE3\x81\x95\xE3\x81\x84
****以上がi18nによる翻訳結果****

(ActiveRecord::RecordInvalid)
irb(main):003:0> 
````

## 結論
すでに他のプログラマーの方が解説しているこちらを参照してください。
#https://qiita.com/jnchito/items/19bcf9a5dd32d1d472db

## 記事にした経緯

私が上手く検索することが出来ず、先ほど紹介した記事に辿り着けなかった為この記事を書いた。
恐らくプログラミング初学者だと、`rails console`　`文字化け`と検索できない人もいると思いました。
私と同じように無駄に時間を消費しないように祈ります。
django-rest-frameworkを使って画像アップロードする方法

# この記事の概要

django-rest-frameworkで画像アップロードする方法を記載する。

# django-rest-frameworkで画像アップロード

## modelsの作成

```models.py
class Food(models.Model):
    def get_upload_path(self, filename): # 追加
        f = '/food'
        return '/'.join(['./storage/images', f, filename])
    img   = models.ImageField(verbose_name='画像', upload_to=get_upload_path, null=True, blank=True) # 追加
```

## serializersの作成

```serializers.py
class FoodSerializer(serializers.ModelSerializer):
    img = serializers.ImageField(use_url=True) # 追加
```

## viewsの作成

```views.py
# 特に変更なし
from rest_framework import viewsets
from .models import Food
from .serializers import FoodSerializer

class FoodViewSet(viewsets.ModelViewSet):
    queryset = Food.objects.all()
    serializer_class = FoodSerializer
```

## urlsの作成

```urls.py
# 特に変更なし
from django.urls import path, include
from rest_framework import routers
from .views import FoodViewSet

foodRouter = routers.DefaultRouter()
foodRouter.register('food', FoodViewSet)

urlpatterns = [
    path('', include(foodRouter.urls)),
]
```
初めてのRailsチュートリアルに挑戦！第3章

# 学習内容
1. セットアップ
1. 静的なページの作成と調整
1. テスト実施
　＊Red→Green→Refactorの実施
1. タイトルの追加とテスト

# 学習時のエラー対応
最後にGitHubにプッシュする際に、以下のエラーが表示。
```
 $ git push origin master
To https://github.com/(ユーザー名)/sample_app.git
 ! [rejected]        master -> master (fetch first)
error: failed to push some refs to 'https://github.com/(ユーザー名)/sample_app.git'
hint: Updates were rejected because the remote contains work that you do
hint: not have locally. This is usually caused by another repository pushing
hint: to the same ref. You may want to first integrate the remote changes
hint: (e.g., 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.
```
調べてみると、GitHubを直接編集したことにより、ローカルにその状態のGitが存在しないエラーのようだ。
（実際にGitHubで直接マージしていた）
そのため、`git pull origin master
`でリモートリポジトリのGitをローカルに持ってくる。

`git log`で確認すると正しくpullできたようだ。
```
 $ git log
commit 97a26c3b4f597ff8f01a6420192e58a9b417304d (HEAD -> master)
commit 97a26c3b4f597ff8f01a6420192e58a9b417304d (HEAD -> master)
commit 97a26c3b4f597ff8f01a6420192e58a9b417304d (HEAD -> master)
Merge: 1da85c6 5b5c0c0
Author: （ユーザ名） <（登録アドレス）>
Date:   Sun Jul 3 05:44:25 2022 +0000

    Merge branch 'master' of https://github.com/（ユーザ名）/sample_app

commit 1da85c68599a006494730d2bdc155286f1275614 (static-pages)
Author: （ユーザ名） <（登録アドレス）>
Date:   Sun Jul 3 05:24:49 2022 +0000

    Finish static pages

commit 5b5c0c0b075937ab01a8302d7c520ab69f0c3f3d (origin/master)
Merge: 5e6780d 21811b3
Author:  （ユーザ名） <105146615+（ユーザ名）@users.noreply.github.com>
Date:   Sun Jul 3 10:51:20 2022 +0900

    Merge pull request #1 from  （ユーザ名）/static-pages
    
    Add a static pages controller
```
その後、`git push origin master`で正しくGitHubにpushできた。

# 学習を終えて
プログラミングを進める中で、テスト駆動開発の重要性を学んだ。
また、テストをこまめに実施することで、エラー発生時の対応ポイントが絞られることがわかった。
今後の開発では定期的にGitHubへのプッシュとHerokuへのデプロイが求めらると実感した。
macでcartopyをインストールする方法

# 開発環境
まずは、前提として動作確認を行ったPCの環境を明示します。
※ 尚、当記事後半の内容に関わりますが、ここでは``zsh``を使用しています。
- macOS Monterey 
- M1チップ
- zsh

# はじめに
地図描画系ライブラリであるcartopyをmacにインストールするための解説記事です。
ただし、この記事は、**pipユーザーがanacondaの有償化規定に触れずにインストールするための方法**であるため、最も簡単に・推奨されている方法とは異なります。

# 前提

``cartopy``のインストールは若干クセがあります。
公式サイトでは、
> The easiest way to install Cartopy is by using Conda. If conda is already installed, installation is as easy as:
>> conda install -c conda-forge cartopy

とあり、``conda``コマンドを使うことが推奨されています。しかし、Anacondaは、2020年4月以降より、**従業員数が200名以上の企業が利用する場合（業務以外での利用も含む）が有償化の対象となる**と発表されています。

となると、

- cartopyは``conda``でのインストールを推奨している
- ``conda``を使いたくても、anacondaが有償化されてしまっている

という現状があります。

そこで、``pip``を使ってインストールを試みる例は非常に多いと感じています。しかし、cartopyの依存パッケージに関連してpipでのインストールは中々上手くいきません ^^;

その上、**pipとconda混ぜるな危険**という考えが巷で流布されていることから、pipユーザーがcondaコマンドに手を出しにくい現状があると考えています。


以上を踏まえますと、
- cartopyをインストールしたい
- anacondaは有償化
- pipユーザーのためconda環境の構築に抵抗がある

といったような背景があります。
これらの背景を元に、インストール方法を解説します。

# 1. pyenvをインストール
```
pyenv --version
```
でバージョンが表示されていればOKです。
以下の項目は、スキップしてください。

## 1.1 brewのアップデート
まずは、brewのupdateを行います。
※ brewをインストールされていない場合は、``/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"``をターミナルに貼り付けて実行してください。うまくいきます（多分）。
```
brew update 
```
## 1.2 pyenvのインストール
それでは、本題の``pyenv``をインストールします。
```
brew install pyenv
```
でOKです。

最後に確認します。
```
pyenv --version
```
でバージョンが表示されればOK.

# minicondaをインストール
minicondaをインストールします。
```
pyenv install miniconda3-latest
```
これでOK。

ちなみに、``Anacondaは有償化されたのに、minicondaは大丈夫なの？``という声が聞こえてきそうなので、質問にお答えすると、[miniconda](https://docs.conda.io/en/latest/miniconda.html)の公式にこのように書かれています（2022/07/03 現在）。
> Miniconda is a free minimal installer for conda. It is a small, bootstrap version of Anaconda that includes only conda, Python, the packages they depend on, and a small number of other useful packages, including pip, zlib and a few others. Use the conda install command to install 720+ additional conda packages from the Anaconda repository.

# cartopyをインストール
それでは、``cartopy``のインストールを行っていきます。
## 仮想環境の構築
まずは、仮想環境の構築から
```
conda create -n conda_test_env python=3.9
```
これで、``conda_test_env``という名前の仮想環境が作成されます。

## 仮想環境のactivate
仮想環境・``conda_test_env``をactivateします。
```
conda activate conda_test_env
```
これでOK。

ちなみに、
```
CommandNotFoundError: Your shell has not been properly configured to use 'conda activate'.
```

といったエラーが出た場合の解決策についてです。
この場合、
### 1. conda.shのPATHを探す
まずは、conda.shのPATHを見つけます。
```
find ./ -name conda.sh
````
その中で、
```
/miniconda3-latest/etc/profile.d/conda.sh 
```
のようなやつがあればOKです。
ファイルパスを控えておきましょう。

### 2. .zshrcに反映させる 
先程、見つけたconda.shを反映させましょう。
ここでは、``$HOME/miniconda3-latest/etc/profile.d/conda.sh ``にあったと仮定します。
```
echo . $HOME/miniconda3-latest/etc/profile.d/conda.sh >> ~/.zshrc && source ~/.zshrc
```
でOKです。
改めて、仮想環境をactivateしましょう。

```
conda activate conda_test_env
```

## cartopyのインストール
以下のコマンドでOKです。
```
conda install -c conda-forge cartopy
```


以上になります。
お疲れ様でした〜！

参考になったらぜひ、LGTMください〜笑
タグマネージャーのトリガー設定方法

効果測定でタグマネージャーをwebページに埋め込むことはよくあると思います。
今回、cv率の計測に関して、「aタグ」のhref属性でクリックイベントを発火させたかったのです。

しかし、🔽のような構造のボタンの時、クリック要素としてspanを取得してしまい、hrefで判定できないという事象がおきました。

```html
<a href="#">
  <span>button</span>
</a>
```

# 解決法
aタグが見つかるまで、クリック要素の親タグを辿っていってもらうことで解決できました！
🔽の記事の通りにすれば良いです。
https://ayudante.jp/column/2018-09-27/11-19/
カスタムJS変数に追加

>function(){
>	// ---- 初期設定
>	var _gtm_element = {
>		parent: 10,				// 何階層遡って探すか、の定義値
>		element: null,
>		element_temp: null
>	};
>
>	// ---- 現在地から親要素へさかのぼってaタグを確認
>	if({{Click Element}}.tagName == 'A'){
>		// -- 現在地がaタグだったら
>		_gtm_element.element = {{Click Element}};
>	}else{
>		_gtm_element.element_temp = {{Click Element}};
>		// -- 定義した階層分遡って該当要素を検索
>		for(var i = 0; i < _gtm_element.parent; i++){
>			_gtm_element.element_temp = >_gtm_element.element_temp.parentNode;
>			if(_gtm_element.element_temp != undefined && >_gtm_element.element_temp.tagName == 'A'){
>				// -- 上位階層が存在し、かつ、上位階層がaタグだったら
>				_gtm_element.element = _gtm_element.element_temp;
>				break;
>			}
>		}
>	}
>
>	// ---- 最終判定
>	if(_gtm_element.element != null){
>		// -- 該当の要素が見つかった場合、該当要素のURL要素を返す
>		return _gtm_element.element.href || >_gtm_element.element.currentSrc || _gtm_element.element.src || null;
>	}else{
>		// -- aタグ要素が見つからなかった場合、諦めてClick URLを返す
>		return {{Click URL}};
>	}
>}
django-rest-frameworkの使い方

# この記事の概要

django-rest-frameworkを使う方法を記載する。

# django-rest-frameworkのインストール

## django-rest-frameworkのインストール

```
// django-rest-frameworkのインストール
$ pip3 install djangorestframework
```

# django-rest-frameworkの使い方

## django-rest-frameworkの設定(config)

```config/settings.py
INSTALLED_APPS = [
    'rest_framework', # 追加
    'api' # 追加
]
```

```config/urls.py
from django.contrib import admin
from django.urls import path, include # 追加

urlpatterns = [
    path('api-auth/', include('rest_framework.urls')), # 追加
    path('api/', include('api.urls')), # 追加
]
```

## modelsの作成(api)

```api/models.py
from django.db import models
from django.utils import timezone # timezoneのインポート

class Food(models.Model):
    def __str__(self):
        return self.name
    name  = models.CharField(verbose_name='名前', null=True, blank=True, max_length=64)
    created_at = models.DateTimeField(verbose_name='作成日時', default=timezone.now)
    updated_at = models.DateTimeField(verbose_name='編集日時', blank=True, null=True)
```

## serializersの作成(api)

```api/serializers.py
from rest_framework import serializers
from .models import Food

class FoodSerializer(serializers.ModelSerializer):
    created_at = serializers.DateTimeField(format="%Y-%m-%d %H:%M", read_only=True)
    updated_at = serializers.DateTimeField(format="%Y-%m-%d %H:%M", read_only=True)

    class Meta:
        model = Food
        fields = '__all__'
```

## viewsの作成(api)※ビューセットによる作成

```api/views.py
from rest_framework import viewsets
from .models import Food
from .serializers import FoodSerializer

class FoodViewSet(viewsets.ModelViewSet):
    queryset = Food.objects.all()
    serializer_class = FoodSerializer
```

## urlsの作成(api)

```api/urls.py
from django.urls import path, include
from rest_framework import routers
from .views import FoodViewSet

foodRouter = routers.DefaultRouter()
foodRouter.register('food', FoodViewSet)

urlpatterns = [
    path('', include(foodRouter.urls)),
]
```
jenkins:submoduleまでまとめて取得する（pipeline)


# 簡易チェックアウト
簡易チェックアウトの場合は、こう
```groovy
git branch: branch_name, url: GIT_URL, credentialsId: credentialsID
```

ただ、この場合タイムアウト10分で設定されているため、10分超えるクローンや、pullだとエラーになってしまう。
また、サブモジュールの取得まではできないので、GitSCMを推奨する。

# 細かく色々設定してGitチェックアウト
```groovy
checkout([$class: 'GitSCM',
                branches: [[name: branch_name]],
                    extensions: [
                        [$class: 'CloneOption', timeout: git_timeout],
                        [$class: 'CheckoutOption', timeout: git_timeout]
                    ],
                    doGenerateSubmoduleConfigurations: false,
                    extensions: [[$class: 'SubmoduleOption',
                                    disableSubmodules: false,
                                    parentCredentials: true,
                                    recursiveSubmodules: true,
                                    reference: '',
                                    trackingSubmodules: false]],
                    submoduleCfg: [],
                gitTool: 'Default',
                userRemoteConfigs: [[credentialsId: credentialsID, url: GIT_URL]]
            ])
```
gi_timeoutは、変数値でも直値でもいける。
parentCredentialsは、親のcredentials使ってアクセスするか、なので基本true.
recursiveSubmodulesは、再起的に取りに行くか。色々操作しないならそのままtrue.

```
def git_info = checkout([$class....
```
とすると、返ってきたgit_infoで、gitの環境変数に色々アクセスできる。

https://plugins.jenkins.io/git/


>Environment Variables
>
>The git plugin assigns values to environment variables in several contexts. >Environment variables are assigned in Freestyle, Pipeline, Multibranch Pipeline, >and Organization Folder projects.
>Branch Variables
>
>GIT_BRANCH
>
>    Name of branch being built including remote name, as in origin/master
>GIT_LOCAL_BRANCH
>
>    Name of branch being built without remote name, as in master
>
>Commit Variables
>
>GIT_COMMIT
>
>    SHA-1 of the commit used in this build
>GIT_PREVIOUS_COMMIT
>
>    SHA-1 of the commit used in the preceding build of this project
>GIT_PREVIOUS_SUCCESSFUL_COMMIT
>
>    SHA-1 of the commit used in the most recent successful build of this project
書籍「基礎からのWeb開発リテラシー」レビュー



## 書籍レビュー(2022年7月3日)
以下、の観点で書籍のレビューをしました。

１．元専門学校の教師の観点
２．現役のWeb系エンジニアとしての観点

基礎からのWeb開発リテラシー 増井敏克　著

https://gihyo.jp/book/2022/978-4-297-12907-1

## この本の概要（上記、技術評論社サイトより）
>プログラミング言語は学んでアプリを作ったけれど、実際にWebに公開するのは不安がある
>個人でWebサイトを作った経験はあるが、仕事とするには何に注意をすればいいのかわからない
> このような悩みを解消するには、実際のWeb開発がどのような流れで作られているのかを知ることが近道です。利用者として何気なく使っているWebアプリやWebサイトを開発者側からの視点で捉えることで、Web開発の全体像が見えてきます。Web開発で使われる基本的な用語を整理しながら、Webシステムがどのように作られているのかを押さえていきましょう。IT業界で仕事をしたいと考えている方だけでなく、新入社員の研修で何を教えれば良いのかわからないという方にとっても、Web開発の全体像を押さえるために最適な1冊となっています。

以下の章構成となっています。

|章|内容|
|:-----------|:------------|
| 第１章 | Webの概要 |
| 第２章 | Webサイトの構成 |
| 第３章 | Webサーバーへの配置 |
| 第４章 | Webに関するネットワーク |
| 第５章 | Webのセキュリティ  |
| 第６章 | ECサイトの設計と運用   |
| 第７章 | ECサイト制作に求められる知識   |

## 第１章 Webの概要
サーバとクライアントの関係について、Webサーバーの仕組みが詳しく紹介されています。クラウドサービス（SaaS, PaaS, IaaS）も一般的な言葉になっていますよね。Azure, GCP, AWS や最近のFirebaseやmBaaS, ヘッドレスCMSなんかも紹介されています。ヘッドレスCMSは以前に試しで使ってみましたが1hぐらいでサイト公開までできてシンプルでわかりやすかったです。

## 第２章 Webサイトの構成
HTMLの基礎から絶対パス、相対パスの説明、ブロック要素とインライン要素などウェブページ作成で基本となる説明が紹介されています。以下、は授業で過去使ったスライドですが、HTMLの構造の説明して表示して確認するぐらいしかしてなかったので補助教材的にこちらがあるとよかったですね。

![スクリーンショット 2022-07-03 134957.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689091/57263ae6-587c-1c88-ed3f-139a6998f357.png)

## 第３章 Webサーバーへの配置
ファイルの転送方法としてFTPやSCPの他、バージョン管理で必須のGitやGithubの紹介があります。GitやGithubは、使いながら慣れないとなかなか理解が難しいところですが、本書籍でイラスト入りでわかりやすく説明されているので全体像を把握するのにいいかと思いました。パーミッションまで踏み込んで解説されており、勉強になります。

## 第４章 Webに関するネットワーク
ウェブサイトを構築する上でネットワークの知識は欠かせないですね。HTTP, HTTPSなどのプロトコルを使った通信を知らなければウェブサイトを作成しても運用することは困難です。ブラウザで「レンダリング」を確認しながら本章を読むことで理解が深まると思います。

以下は以前、私が使ったスライドですが初心者だとなかなか図だけだと理解が難しいです。

![スクリーンショット 2022-07-03 135205.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689091/77c60406-6cf2-b2c1-1ccc-2769684396b8.png)

## 第５章 Webのセキュリティ
Webサイトを公開後には、脆弱性を突かれて XSS や CSRF, SQLインジェクション のような攻撃を受けることがあります。本書では、脆弱性診断ツールの紹介までされていたので、時間があるときに私も試してみたいと思いました。OAuth, OpenID Connectなどは、現在の仕事でも使っていますが、理解が難しい内容であるのでこちらの書籍で概要をつかむことができました。

## 第６章 ECサイトの設計と運用
ショッピングサイトがどのような構成になっているか、サイトマップの例がありわかりやすいです。データベースの設計例も掲載されています。

## 第７章 ECサイト制作に求められる知識 
なかなか意識しないところですが、プライバシーポリシーやセキュリティポリシーは近年、必要性が増している話ですね。Webサイト作成者なら知っておきたい知識です。

## 全体的な感想
全体的な感想としては、挿絵やフォントサイズが適切で見やすくわかりやすい内容になっていました。私が専門学校教師時代に「Webシステム構築」という授業をもったことがありますが、HTMLやCSSや教えたこがありますが、ウェブアプリを作るだけでなく、このような全体的な知識を網羅している書籍があればよかったな。と呼んでいて思いました。Web開発で必要な知識を一通り学べるため教科書や参考図書に向いてます。WEB系のシステム企業で、社員研修の参考図書で用いるのもいいかなと思います。

話が多少脱線しますが、専門学校教員時代にモバイルアプリ開発するために <a href="https://ja.monaca.io/" target="_blank">Monaca</a> というプラットフォームを利用していました。Monacaとは、AndroidやiOSで動作する「ハイブリッドアプリ」を作成することができるWEBサービスです。HTML, CSS, JavaScript というWeb開発の知識があれば、初心者でもアイデアさえあれば、簡単にアプリが作れます。さらに mBaaS のWebサービスである <a href="https://mbaas.nifcloud.com/" target="_blank">ニフクラ mobile backend</a> を組み合わせることでバックエンドの開発も容易にできます。専門学校教師のときは、こちらのプラットフォームを使ってアプリコンテストで多数の入賞をすることができました。それらの技術+知識という面でこちらの書籍は、学生の理解を深める参考書にいいじゃないかなと思いました。

Monaca

https://ja.monaca.io/

ニフクラ mobile backend

https://mbaas.nifcloud.com/

おわり。
[wordpress] headerにタグ埋め込みたい elementor

色々あってwordpressのheaderにタグを埋め込みたいことがありました。
よくある例のごとく「外観」　>　「テーマファイル　エディタ」からheader.phpを編集。公開したのですが、なぜか反映されていない事象に出くわしはまった。

# 解決法
プラグインのelementorを使っていたので、「Elementor」 > 「Custom Code」からLocation: headerに指定後無事読み込むことができました！

![スクリーンショット 2022-07-03 15.16.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787586/e7bf0ae1-88b0-17e0-7f4b-0a6f90fef162.png)
RestTemplateBuilder/RestTemplateでheaderを追加


## RestTemplateBuilder
ある```RestTemplate```で固定のheaderがあるなら```RestTemplateBuilder```を使用する。

```java
@Component
public class RestTemplateSample {
  final RestTemplate client;
  
  public RestTemplateSample (RestTemplateBuilder builder) {
    client = builder
        .additionalInterceptors((request, body, execution) -> {
          request.getHeaders().set("my-header", "hogeValue");
          return execution.execute(request, body);
        })
        .build();
  }
}
```

## RestTemplate
個々のアクセス時にheaderを追加するなら下記のような感じ。

```java
    RestTemplate client = new RestTemplate();
    
    HttpHeaders headers = new HttpHeaders();
    headers.set("my-header", "value");
    HttpEntity<String> request = new HttpEntity<>(headers);
    client.exchange("http://localhost:8081/a", HttpMethod.GET, request, String.class);
```
自己紹介


# 初投稿にあたって
今まで記事を投稿しようと後回しにしてしていましたが、多数のご要望を受けた気になって遂に投稿を始めようと思います。
Macのメモに大量に残している勉強のメモを、せっかく分かりやすくまとめるのであれば同じく勉強中の皆様へ発信していきたいと思っています。
業務経験は激浅ですので、発信内容としては基本的なことになります。ただ、基本こそ大事！ということで是非ご覧いただけたらと思います。

今回は初投稿ということで、自己紹介をさせていただきます。

## 自己紹介 （2022/7 現在）
**名前**
　grgr_engineer

**年齢**
　27歳

**業務経験**
　約1年

**前職**
　パーソナルトレーナー

**使用言語**
　Java、html、css




　上記の通り、業界未経験から昨年IT業界に足を踏み入れました。
前職は某パーソナルジムにてトレーナーとして働いていましたが、ふと自分の将来を考えたときに「なにか行動を起こさなくてはいけない、、！」と思い、ブラインドタッチも全くできない状態からなんとか転職し、今なお分からないことだらけの事象に埋もれながらもなんとか毎日を過ごしています。

　昨今、未経験からIT業界へと入る方はとても増えているので、自分の知識が少しでもみなさんの手助けになればと思いながらこれから投稿をさせていただきます。
　また、勉強内容だけでなく自分の経験も発信していきたいと思っていますので、これからの記事を楽しみにしていてください。
AWS amplify の概要とReactを例に初期セットアップまで

# このページは
個人趣味レベルで開発はしたことがあるけど、業務開発経験はこれからレベルの自分が噛み砕いた内容で記載。

## AWS Amplifyとは

### As is
開発してサービス作りたいけど、ホスティング先考えたり、データベース準備したり、リリースの仕組み用意したり、結構やること多い。

### To be
UIになるフロントエンドやサービスロジックの開発に集中して、バックエンドの諸々準備に手間をかける必要なし。

### 手段
AWS amplifyを使って開発する。

## AWS Amplifyの実態

自分の理解では以下。

### AWS Amplifyライブラリ
開発するフロントエンドのソースコード内でインポートをかけて利用するライブラリ。
ライブラリで準備されているメソッドを利用し、バックエンドとの連携・操作を一元サポートしてくれる。

### Amplify CLI
コマンドライン操作でAWSのバックエンドを準備・管理できる。データベース作ったりAPI追加したり。

### AWS Amplify Console
CI/CDとフロントエンドのホスティングを準備してくれる。

## (補足)開発環境・テストの整備面でできること
- バックエンドのローカルテスト
- バックエンド開発環境の分離
- Gitリポジトリ変更を検知し自動デプロイ
- ビルドフェーズで任意のテストを実行
- Cypress(E2Eテスト）

## AWS Amplify はじめ方

### Amplify準備

以下を参考にすると便利。
https://docs.amplify.aws/start/getting-started/installation/q/integration/react/

```
【必要な環境】
- Node.js v14.x or later
- npm v6.14.4 or later
```

以下を実行。

```
npm install -g @aws-amplify/cli
```

インストールができたら、amplifyのセットアップを行う。

```
amplify configure
```
対話式で進むので、必要な設定を答えていく。

## 初期プロジェクトの準備

以下を参考に進める。※今回はReact
https://docs.amplify.aws/start/getting-started/setup/q/integration/react/#create-a-new-react-app

Reactの空アプリケーションを作成。
```
npx create-react-app hands-on-todo
```
対話式で進むので進める。

## プロジェクト向けにamplifyのバックエンドを準備する

Reactのアプリケーションのディレクトリに移動し、`amplify init` コマンドを実行し、対話式で設定を進める。

```
cd hands-on-todo
amplify init
```

React向けのamplifyのライブラリをインストールする。
```
npm install aws-amplify @aws-amplify/ui-react
```
プロダクトマネージャーのキャリアパス

プロダクトマネージャーの仕事もさることながら、そのキャリアパスもまた曖昧なものです。プロダクトマネージャーを目指すなら、どうすればいいのか？そして、プロダクトマネージャーという仕事のゴールは何なのか。世間では「プロダクトマネージャー」とだけ言われていますが、プロダクトマネージャーにもいろいろな種類があり、それぞれ専門的になることができます。今回は、プロダクトマネージャーのキャリアパスの全体像、専門性、ステップアップの方法、ヒエラルキーなどを紹介する記事をリストアップしてみました。

>この記事や添付されているプロダクトマネジメントの記事をただ読んで終わりにするのではなく、共感したところをハイライトして、感想や学びをGlaspに残しておきましょう。そうすれば、いつでも見返すことができ、私たち皆が同時に学習することができます。
私のプロダクトマネジメントに関する記事のリーディングリストはこちらから参照ください。
👉 [Glasp – Product Management](https://glasp.co/#/kei/?p=32eAkUizIxRVTVOlDjWT&tag=Product%20Management)

準備ができたら、さっそく始めましょう。

続きはこちらからご覧ください。

[プロダクトマネージャーのキャリアパス](https://pmlibraries.com/2022/05/30/%e3%83%97%e3%83%ad%e3%83%80%e3%82%af%e3%83%88%e3%83%9e%e3%83%8d%e3%83%bc%e3%82%b8%e3%83%a3%e3%83%bc%e3%81%ae%e3%82%ad%e3%83%a3%e3%83%aa%e3%82%a2%e3%83%91%e3%82%b9/)
Djangoの環境構築

# この記事の概要

Djangoの環境構築について記す

# Djangoのインストール→プロジェクト作成→アプリ作成→アプリ起動

## Djangoのインストール

```
// python3,pip3のインストール（homebrew)
$ brew install python3
// .zshrcにpathを書く
export PATH="/usr/local/opt/python@3.7/libexec/bin:$PATH"
```

```
// djangoのインストール(pip3)
$ pip3 install django
// djangoのインストール確認
$ pip3 list
```

## Djangoのプロジェクト作成

```
// djangoプロジェクト作成
$ django-admin startproject config .
```

## Djangoのアプリ作成

```
// djangoアプリ作成
$ python3 manage.py startapp app
// 初期マイグレーション
$ python3 manage.py migrate
```

```config/settings.py
// アプリの設定
INSTALLED_APPS = [
    'app' # 追加
]
```

## Djangoアプリ起動

```
// djangoアプリ起動
$ python3 manage.py runserver
```
AWS Lambda,DynamoDB間のCRUD操作






## DynamoDBの環境準備
DynamoDB→テーブル→テーブルを作成からテーブル名peopleを作る。
パーティションキーを文字列型のSrとする。
そして、以下のようなテーブルを作成する。
![スクリーンショット 2022-07-03 14.07.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2040882/ec6515e6-c6c9-9575-5c35-5c0fa5e6edf3.png)

## AWS Lambdaの下準備
流れとしてはロールにポリシーを当て、そのロールをサービスで使用するといった流れになる。

まず実行ロールを作る。IAMからアクセス制限→ロール→ロールの作成を選択。

信頼されたエンティティタイプ：AWSのサービス
ユースケース：Lambda

を選択。

次に、AmazonDynamoDBFullAccessを許可ポリシーに選択。

ロール名をここではlambda-dynamodb-fullaccessとする。


## AWS Lambdaの下準備２

まず、lambdaホーム画面から関数の作成を選択。

関数名：dynamo-crud
ランタイム：Python3.9
実行ロール：lambda-dynamodb-fullaccess（先ほど作ったロール）

これで関数を作成をクリック。


まず最初にPython　SDKであるboto3をインポートする。
```
import boto3
from boto3.dynamodb.conditions import Key,Attr
```

次にラムダハンドラーを定義する。

```
def lambda_handler(event,context):
    __TableName__ = "people"
    Primary_Column_Name = 'Sr'
    Primary_Key="1"
　　　　　　　　#カラムを定義
    columns=["Age","First","Last"]

    #boto3の.client,.resourceはどちらを使っても良い。
    client = boto3.client('dynamodb')
    DB=boto3.resource('dynamodb')
    変数tableにテーブルpeopleを設定
    table=DB.Table(__TableName__)
   
```


## AWS LambdaでDynamoDBにある要素を読み取る（read）
次のコマンドで読み取れる。ラムダハンドラーの中に記述している。

```
#write in lambda handler
#Get the data
response=table.get_item(
Key={
    Primary_Column_Name:Primary_Key
}
)
print(response["Item"])

```

出力結果↓
```
{'Sr': '1', 'Last': 'boy', 'Age': Decimal('34'), 'First': 'tai1'}
```



## AWS LambdaからDynanoDBに要素を追加する（create）
今度は要素を追加する。これも同様にラムダハンドラーの中に記述。
```
#put items
Primary_Key="5"
response=table.put_item(
Item={Primary_Columns_Name:Primary_Key,
     columns[0]:44,
     columns[1]:"taiboy"
     columns[2]:"Python"

}
)
print(response["ResponseMetadata"]["HTTPStatusCode"])

```

出力結果↓
```
200
```

DynamoDBを見てみると（更新マークを押してください。）

![スクリーンショット 2022-07-03 14.02.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2040882/fdde7b28-a41a-c024-ea24-9542ce015f9f.png)

## AWS LambdaからDynanoDBの要素を削除する（delete）
今度はDBの要素を削除してみる。

```
#delete
Primary_Key="5"
response=table.delete_item(
    Key={
        Primary_Column_Name:Primary_Key
}
)
```

確認すると消えているはず

## （おまけ）全てのデータを取り出す。
今度はテーブルの全てのデータを取り出してみる。

```
#get all the Data from DynamoDB
response=table.scan(
    FilterExpression = Attr('Sr').gte("0")
)

for x in response["Items"]:
    print(x)
```
出力結果↓
```
{'Sr': '1', 'Last': 'boy', 'Age': Decimal('34'), 'First': 'tai1'}
{'Sr': '0', 'Last': 'boy', 'Age': Decimal('24'), 'First': 'tai'}
{'Sr': '4', 'Last': 'boy', 'Age': Decimal('22'), 'First': 'tai4'}
{'Sr': '3', 'Last': 'boy', 'Age': Decimal('58'), 'First': 'tai3'}
```
JIRA:REST APIを使ってJIRA情報を取得する(Jenkins)

JIRAの情報取得をcurlで行う話。
jenkinsでジョブとして使うのが目的です。

色々調べていたところ、groovyに直接curlの取得を書くと、java的に引っかかるエラーがでるため、jira取得はshファイルを使い、操作する時にpipelineでgroovyとかの操作をすることにしました。

また、ソースコードは、gitHubに登録してみたんですが、gitHubのSCM pipelineの使い方がいまいちわかってなくて直記入。

GitLabソースだったら、即できるんだけど。
調べたらGitHub x Jenkinsだと、ID/PWアクセスができなくなったっぽい？（ここは追々調査が必要だけど）

で、下記がJIRA情報の取得

```
curl --silent --request POST \
  --url "${URL}/rest/api/2/search" \
  --user "${JIRA_USR}:${JIRA_PSW}" \
  --header "Accept: application/json" \
  --header "Content-Type: application/json" \
  --data "{
    \"jql\": \"${JQL}\",
    \"maxResults\": 1000,
    \"fields\": [
      \"key\"
    ],
    \"startAt\": 0
  }" \
  -w '%{http_code}\n' \
  -o response.txt

```
JIRA_USRや、JIRA_PSWは、CredentialsIDとして登録し、ジョブ実行時にバインディングさせる。
![スクリーンショット 2022-07-03 14.18.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1026740/4737877b-7f06-4a97-a500-f270fbc12022.png)
認証情報は、登録したCredentialsのID

paramsの一部、ログはちょっとお見せできないが、これをするとjson情報が返ってくる。
（response.txtに保存される）
ここからさらに、Key情報を抜き出せば、チケットID(IssueID?)が返ってくる。
QIITA-132とか、DEVDEV-123とかの値。

response.txtは、archiveで保存すれば、そのファイルを読み込んであれこれできる。
![スクリーンショット 2022-07-03 14.21.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1026740/8605bba9-b888-c734-ac4e-b46ccbe00428.png)


参考
----
https://qiita.com/toshitk/items/f8109d7530386768ca9d
【Git】Git LFSとは

# Git LFSとは
Git LFSとは、Git Large File Storageの略で、音楽や動画などのファイルが大きいデータをGitで管理する時に使用するストレージのことです。Git Hubでは1ファイル50MBで警告、100MBでエラーとなってしまうのでGit LFSを上手く活用する必要があります。(引用：https://git-lfs.github.com/)
![スクリーンショット 2022-07-03 13.41.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2729622/84874ce2-f57b-ac2a-2731-e3f48944a47c.png)
# 使い方
1.まずは、Git LFSをインストールします。(その前にbrewコマンドを有効化しておく必要がありますが、それに関しては[Homebrewのインストール](https://qiita.com/zaburo/items/29fe23c1ceb6056109fd)がわかりやすいと思います。)
```
brew install git-lfs
```
2.git lfsを初期化するために以下のコマンドを入力します。これは起動するたびに毎回実行する必要があります。
```
git lfs install 
```
3.Git LFSで管理するファイルをここで指定します。つまりファイルが大きいものをここで指定しておけばいいですね。この例では、拡張子が.psdのファイルすべてをGit LFSで管理するよう指定しています。
```
git lfs track "*.psd"
```
4.先ほどのコマンドを実行すると.gitattributesファイルが自動的に生成されます。このファイルにGit LFSで管理するファイルが記述されています。そのまま.gitattributesをgit addしてください。
```
git add .gitattributes
```
5.後は普段通り、Gitの操作でファイルをadd→commit→pushすれば大丈夫です。
```
git add file.psd
git commit -m "Add design file"
git push origin main
```

# まとめ
Git LFSはGit Hubだけでは管理できない大容量のファイルを管理するためのストレージのこと。ただ、無料で使える容量は1GB/月なので注意が必要です。
yqコマンドでyamlのリストをループ処理したい

# 背景

yamlファイルを処理する`yq`というコマンドがある。これを使ってyamlのリストをループ処理したい場面があったのでその方法を書いておく。

https://github.com/mikefarah/yq

# やりかた

以下のようなyamlファイル（sample.yml）があったとする。コメントがあっても問題ない。

```yml
- name: taro
  age: 20

# 次男だよ
- name: jiro
  age: 18

- name: pochi
  age: 3
```

この各要素に対して何らかの処理をしたい場合、以下のようにできる。

```bash
num=$(yq '. | length' sample.yml)
for i in $(seq 0 $(($num-1))); do
    name=$(yq ".[$i].name" sample.yml)
    age=$(yq ".[$i].age" sample.yml)
  
    echo "${name} is ${age} years old."
done
```

うまくループ処理できている。

```
taro is 20 years old.
jiro is 18 years old.
pochi is 3 years old.
```
【AWS】CloudWatchでテストログを流す（ログインベントの作成）

CloudWatchでテストログを流す方法を書きます:pencil:

何らかの形でログをCloudWatch以外にとばしていて、
飛ばした先で正しくログが表示されているか確認したいときとかに使えます:bird:

## 使い方
出力させたいログストリームまで移動します。
CloudWatch→ログ→ロググループ→ログイベント→ログストリーム
→アクション→ログイベントの作成

![スクリーンショット 2022-07-03 13.58.02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/984662/fb31a977-d7b0-dfbe-e0d7-aa176174d55e.jpeg)

飛ばしたいメッセージを入力→作成
（連携先でフィルタされてる場合とか、正しく拾えるメッセージを入力しましょう）
![スクリーンショット 2022-07-03 14.02.24.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/984662/4d63f51a-cfb1-1e69-1f2d-e31eb242f18a.jpeg)

ログイベント上に表示されていれば、
CloudWatch上はOK。あとは連携先とかを確認すればよいです。
![スクリーンショット 2022-07-03 14.03.00.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/984662/88f01937-1d94-5ebd-a0c9-61aefc19a631.jpeg)

大した内容ではないですが、私はそれなりに重要な場面で使ったので
とんでる？とんでない？ちゃんととんでる！！やったー！！
とかそういうやりとりをするのは喜びがあったりします:bird:
wordleの国名版を作ったよ！

# TL;DR
有名なwordleの国名版をアンドロイドアプリにしました。ぜひ使ってみてね！
https://play.google.com/store/apps/details?id=com.chatram.wordle

## なぜ作ったか
今年のはじめ辺りにバズっていたので、作れるかなと思って今年の3月くらいに作りました。

## 例
![unnamed.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/648231/b422727c-f5a6-ad30-a242-baba544b10c3.jpeg)

本家と同様、文字があっているけど位置が違うと黄色、文字も位置もあっていると緑になります。

## 仕組み
外務省のホームページを参考にして、国として認められているところの名前をマップにぶち込んで、ゲームが立ち上がるorリセットボタンを押されるたびにランダムでその中の国名が答えとして選ばれます。
入力部分にはひらがなとカタカナ以外は入力できないようにregexで弾いています。
```dart
// random
class Randomizer {
  static var n = country_list.length;

  static String Generate() {
    List<String> array = [];
    var rand = Random();
    array.add(country_list[rand.nextInt(n)]);
    // 字数が10字に満たない時に空文字列を入れる
    if (array[0].length < 10) {
      (array[0] += " " * (10 - (array[0].length)));
    }
    return array.join('');
  }
}



// regex
inputFormatters: <TextInputFormatter>[
                FilteringTextInputFormatter.allow(
                    // ひらがなとカタカナ以外を弾くregex
                    RegExp(r'^[\u3040-\u30FF]+$')),
              ],
```

## 最後に
最後まで読んでくれてありがとうございます！
興味があったら使ってみてください！
https://play.google.com/store/apps/details?id=com.chatram.wordle

## 小言
作り方が気になった場合（そうそう居ないとは思いますが）は、githubに公開しているので、historyから覗いて見てください。
ブランチの概要・作成

# ブランチとは?

開発を複数人で並行して、機能の追加やバグの修正などといった作業を行う際に、プロジェクト本体に影響を与えずに、ブランチ(ポインタ)を作成することで、共同開発を行うことができるもの

ブランチは、コミットIDを記録したポインタを指している

# ブランチの使い方

### ブランチを使った並行開発イメージ図
![Github仕組み.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/790379/82c6b59e-f879-f99c-19bf-30ac40e62d25.jpeg)

### なぜブランチを作成するのか?
Guthub上で、チーム開発をする上で他のメンバーの作業の影響を受けないように、メインのブランチ(masterブランチ)から自分の作業専用のブランチを作成する。 そして作業の終わったメンバーは、メインのブランチに自分のブランチの変更を取り込んで行く(merge)のが一般的

#### ブランチを作成するメリット
・プロジェクトの本線に影響を与えることなく作業を実施することができる
・ブランチを作成することで、目的に合った作業を同時並行で行うことができる
・不具合が発生した場合の対応を容易に実施することができる

#### matserブランチ
主となるブランチのため、作業用のブランチからmasterブランチにmergeする際は、変更内容の確認や検証をしっかりやった上でmerge及びpushする

#### マージ(merge)
複数の連続するコミットを 1つの履歴に統合すること(materブランチに統合する)

# ブランチ関係のコマンド

```
$ git branch <ブランチ名>   (ブランチの作成)
```

```
$ git branch -a   (ブランチ全てを表示)
```
```
$ git checkout <ブランチ名>   (ブランチを切り替える)

$ git checkout -b <ブランチ名>   (ブランチ作成とそのブランチに切り替え)
```

``` 
$ git branch -m <旧ブランチ名> <新ブランチ名>   (ブランチ名を変更)

$ git branch -d <ブランチ名>   (ブランチを削除)
```

# ブランチを統合する際に気をつけること

### コンフリクト
リポジトリの別々のブランチで同じファイルの同じ行に対して、異なる編集を行った時に起きる現象

### コンフリクト解消方法

https://qiita.com/Kto_pi/items/4fd6bdec72e852763315

## 参考
https://it-kyujin.jp/article/detail/966/

https://backlog.com/ja/git-tutorial/stepup/01/

Git： もう怖くないGit！チーム開発で必要なGitを完全マスター (Udemy)
flutterで電卓アプリ作ったよ

# TL;DR
flutter×dartでアンドロイドアプリの電卓を作りました。既存の電卓アプリと違うのは、modが使えます。関数電卓ではないですが。
https://play.google.com/store/apps/details?id=com.chatram.calc_app

## なぜ作ったか
ネイティブアプリを作ってみたかったのと、クロスプラットフォームのflutterってどうなの？と思ったので作ってみた。

## 例
![unnamed.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/648231/5ad0167f-a0d8-fbdc-c47d-9e37bf5afad9.jpeg)
デザインは自分のアンドロイドにプリインストールされていた電卓アプリを参考にしました。

## 仕組み
計算部分
```dart
static String Execute() {
    var _result = Decimal.parse('0.0');
    try {
      _list_number.add(Decimal.parse(_buffer));

      if (_list_number.length == 0) return '0';

      _result = _list_number[0];
      _list_number.removeAt(0);
      for (int i = 0; i < _list_operand.length; i++) {
        if (_list_operand[i] == '+')
          _result += _list_number[0];
        else if (_list_operand[i] == '-')
          _result -= _list_number[0];
        else if (_list_operand[i] == '×')
          _result *= _list_number[0];
        else if (_list_operand[i] == '÷')
          _result = (_result / _list_number[0])
              .toDecimal(scaleOnInfinitePrecision: 17);
        else if (_list_operand[i] == 'mod')
          _result %= _list_number[0];
        else
          return 'e';

        _list_number.removeAt(0);
      }
    } catch (e) {
      _list_number.clear();
      _list_operand.clear();
      _list.clear();
      _buffer = '';
      return '';
    }

    _list_number.clear();
    _list_operand.clear();
    _list.clear();
    _buffer = '';

    return _result.toString();
  }
```
入力を数字とオペランドに分けてそれぞれ前から順に計算して結果を算出していきます。
エラー処理として、計算のどこかで事故ったり変な入力があったら、バッファをオールデリートして最初の入力前の状態になります。
感のいい方は気づいたかもしれませんが、この電卓は昔の電卓のように前から順に計算してしまうので、掛け算割り算が優先されません。
あとマイナスの計算はできません。

## 詰まったところ
- decimalを使わないと計算結果がブレるところ

既知の方は多いと思いますが、他の言語でもよく見られる挙動で、普通にfloatとかdoubleを使ってしまうと、入力された数字を一回2進数に変換して計算して、それをreturnするときに10進数に戻しているため、`0.1+0.2=>0.30000000000000004`みたいになってしまいます。

- 数字にカンマを入れるところ

意外とこいつが曲者です。理由は主に２つで、
- 入力された数字を一回何桁かチェックして、3桁ごとにカンマを入れてやる実装をするのですが、少数点以下を検知しないようにする面倒さ。

- 入力途中の数字にもカンマを適用する実装にしたため、入力ごとにこの操作をして、挙げ句計算するクラスメソッドに投げるときにカンマをデリートして、計算結果にもう一度カンマを追加するというひどい仕様になってしまったため。（よい方法が思いつかなかった）

おそらく開発の8割くらいがここに吸われました。後悔はしていません。

## 最後に
ここまで読んでくれてありがとうございます！
興味があったら使ってみてください！
https://play.google.com/store/apps/details?id=com.chatram.calc_app


## 小言
android studioが僕のpcでエミュレータまで動かすと爆熱もっさり挙動だったので、VSCodeに変えたら楽になりました。以上です。

使ってたプラグイン
https://github.com/ppmasa8/VSCode-settings#extensions
【Doctrine】接続しているRDBMSの名前取得

# はじめに
RDBMSの名前で条件判定が必要になり、名前取得の方法を調べたがたどり着くのに時間が掛かったため記事にしようと思いました。
使用している言語はPHP、フレームワークはSymfony、バージョンはSymfony4.4です。

# 結論
```php
$platformName = $entityManager->getConnection()->getDatabasePlatform()->getName();
var_dump($platformName); // mysql
```

# ちなみに
DoctrineとはSymfonyで利用されているORM(Object-Relational Mapping)です。
ORMを使用するとSQLを書かなくてもオブジェクトで直感的にデータベースを操作することができます。
Wikipediaには下記のように記載されている。

> オブジェクト関係マッピング（英: Object-relational mapping、O/RM、ORM）とは、データベースとオブジェクト指向プログラミング言語の間の非互換なデータを変換するプログラミング技法である。
> 

参考：[オブジェクト関係マッピング（wikipedia）](https://ja.wikipedia.org/wiki/%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E9%96%A2%E4%BF%82%E3%83%9E%E3%83%83%E3%83%94%E3%83%B3%E3%82%B0)

# 参考文献
[オブジェクト関係マッピング（wikipedia）](https://ja.wikipedia.org/wiki/%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E9%96%A2%E4%BF%82%E3%83%9E%E3%83%83%E3%83%94%E3%83%B3%E3%82%B0)
[doctrine-project:Platforms](https://www.doctrine-project.org/projects/doctrine-dbal/en/latest/reference/platforms.html)
[DoctrineでRedshiftとMySQLの両方を扱うアプリケーションについて](https://qiita.com/polidog/items/40467e75e0a391fc7b3f)
【怒りを昇華】AWS・ピアソンVUEなどの問合せ先リンク集＆オンライン試験当日にトラブった話

# はじめに

___※2022/7/9 [追記](#追記) あり___

備忘録を兼ねて、
[AWS認定試験に関する問合せ先](https://support.aws.amazon.com/#/contacts/aws-training/)　と、
[ピアソンVUEの（AWS認定に関する）問合せ先](https://www.pearsonvue.co.jp/aws/contact/)
（と、その他おまけ少々）を掲載します。

AWS認定試験をピアソンVUEで受験する上で何かしらの問合せが必要となった方や、これから受験予定で、万一の場合に備えたい方の参考となれば幸いです。

また、タイトルが穏やかではないですが、試験当日まさかの事態に直面し、この哀しみをどうすればいいの？（←著作権ギリか？）と感じたので、[そちら](#オンライン試験当日にトラブった話)についても記載します。
# リンク集
- __AWS認定__
  - __AWS認定試験に関する問合せフォーム__（「はじめに」記載のもの）
[https://support.aws.amazon.com/#/contacts/aws-training/](https://support.aws.amazon.com/#/contacts/aws-training/)
  - よくある質問
[https://aws.amazon.com/jp/certification/faqs/](https://aws.amazon.com/jp/certification/faqs/)

- __ピアソンVUE__
  - __ピアソンVUEの（AWS認定に関する）問合せ先__（「はじめに」記載のもの）
[https://www.pearsonvue.co.jp/aws/contact/](https://www.pearsonvue.co.jp/aws/contact/)
  - ピアソンVUE全般の問合せ先
[https://www.pearsonvue.co.jp/Contact-Us.aspx](https://www.pearsonvue.co.jp/Contact-Us.aspx)
  - OnVUE技術サポート
（チャットは英語のみ。試験のチェックイン中のサポート）
[https://www.pearsonvue.co.jp/onvuehelp](https://www.pearsonvue.co.jp/onvuehelp)

- __おまけ__
  - PSI（ピアソンVUE同様、テスト実施業者）の問合せフォーム
[https://psi-cdexp.zendesk.com/hc/en-us/requests/new?ticket_form_id=360000233892](https://psi-cdexp.zendesk.com/hc/en-us/requests/new?ticket_form_id=360000233892)
  - AWS全般の問合せ先
[https://aws.amazon.com/jp/contact-us/](https://aws.amazon.com/jp/contact-us/)
  - Amazon ヘルプ&カスタマーサービス
[https://www.amazon.co.jp/gp/help/customer/display.html?nodeId=GSD587LKW72HKU2V](https://www.amazon.co.jp/gp/help/customer/display.html?nodeId=GSD587LKW72HKU2V)
# オンライン試験当日にトラブった話
2022年7月2日、私はAWSの認定試験を自宅で受験するはずでした。

自前のPC、ネットワーク環境で前日に[システムテスト](https://candidatelaunchst.onvue.com/?locale=ja-JP&access_code=587474655&chat=false&session_id=17669592)を実施し、問題ないことを確認しました。
しかし試験当日、本番30分前にチェックインするため、[AWS認定アカウント](https://www.aws.training/certification)にログインを試みたところ、スマホでワンタイムパスワードが受信できませんでした。

スマホを再起動しても改善せず、よくよく画面を確認したところ、__電波が1本も立っていない！！__
こんな日に限ってスマホの不調？と思いましたが、原因は __auの通信障害__ でした。
こんな日に限って・・・。
こればっかりはどうしようもないなと笑うしかありませんでしたが、受験料をドブに棄てるわけにはいかないので何とかならないものかと調べてできたのが上記のリンク集です。この記事の作成時点で[OnVUE技術サポート](https://www.pearsonvue.co.jp/onvuehelp)のチャットの担当者からは

__「試験のポリシーに基づき、試験開始24時間前以降のキャンセルは認められず、受験料は没収されます。」__

と冷たい英文（大いに主観）でチャットの回答をいただき、ぐぬぬ・・・となっておりますが、並行して問合せ中のAmazonから再受験用のバウチャー等をもらえないかと淡い期待にしがみついています。

以上、ワンタイムパスワードがワンタイムも受信できなかったというお話でした。
2段階認証コワい・・・。

# 追記
その後、 [AWS認定試験に関する問合せフォーム](https://support.aws.amazon.com/#/contacts/aws-training/) より
___「かくかくしかじかの理由につき、どうかあっしに再受験用のバウチャーを恵んで下せぇ」___（意訳）
と泣きついたところ、
___「AWS担当部署にて確認しております。」___（一部抜粋）
との回答メールがありました。そして後日

___「今回は特別対応としてバウチャーを発行いたします。」___（一部抜粋）

・・・神対応に感涙。

早速2022年7月9日に自宅受験を申し込み、（再びの悪夢を回避するためAWSアカウントの2段階認証を一時的にオフにし、）無事に合格することができました！！

（あくまで __特別対応__ とのことですので、何でもかんでも泣きつけばバウチャーを発行してくれるわけではないと思われます。ご留意ください。）

いやしかし、本当に良かったです。
試験中はワクチン接種の副反応で発熱しながら、襲い掛かる尿意に心折れる寸前でしたが、それはまた、別のお話・・・。

___（本記事に記載のリンクは、2022年7月9日時点のものです。URLや遷移先の内容が変更となる場合がございますので、あらかじめご了承ください。）___
【AWS】Systems Manager Agentアップデート

仕事でやる機会があったので備忘:pencil:

## 対処すべきSSMAのバージョン
AWSから通知あり。WindowsSever上で稼働するSystems Manager Agentの下記バージョンで
ClouwdWatchプラグインを利用してCloudWatcログ送った場合、**インスタンスが高負荷**になる場合あり。
CPU高負荷なのですぐ対処しましょう。

該当バージョン：**3.1.804.0、3.1.821.0、3.1.941.0、3.1.1004.0**

## アップデート方法
一般的なコンソールからのアップデート方法を記載します。
なお、前提としてインスタンスにSSMインスタンスプロファイルが
アタッチされていることと、SSMエンドポイントと通信できる必要があります。

AWS Systems Manager→Run Command→コマンドの実行

名前：**AWS-UpdateSSMAgent**
ドキュメントのバージョン：１（デフォルト） ※最新が適用されます
![スクリーンショット 2022-07-03 12.48.54.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/984662/06f8373a-2459-6a8d-f4ba-a2d428ed97d8.jpeg)
ターゲット：**インスタンスを手動で選択**
キャプチャにはありませんが、ここでアップデートしたいインスタンスを選びます。
バージョンは赤枠の列から確認できます。
![スクリーンショット 2022-07-03 13.03.27.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/984662/ad218b67-fdc5-ffcc-f0d2-2bc637258c93.jpeg)

上記を入力し、**「実行」**
バージョン確認は上記実行後、またRunCommandに戻れば確認できます。
（フリートマネージャー管理下ならそこからも確認可能）

## その他補足
・本アップデートでOS再起動とかは発生しない
　セッションマネージャーすらきれないようなので、アプリの影響とかは基本気にしなくていいでしょう
・OS側からのアップデートも可能 Linuxはrpm、Windowsはexeが用意されている
・フリートマネージャーを使って自動更新が可能（フリートマネージャーの管理下にする設定必要）
・SSM使わないならアップデートの運用が手間なので削除も考える

**参考**
https://docs.aws.amazon.com/ja_jp/systems-manager/latest/userguide/getting-started-agent.html
https://dev.classmethod.jp/articles/aws-systems-manager-agent-update/
https://tech.liquid.bio/entry/2022/02/09/120000
cssでdisplay:none→display:blockに変更されたことをReact側で検出

cssでdisplay:none→display:blockに変更されたことをReact側で検出する方法がなかなかわからず、今回はonAnimationEndを使いました。そのときのメモです。

# 背景
画面サイズがPCサイズ→スマホサイズに変わったときに、メニューをタブからアイコンに切り替えるのを、cssの@mediaだけでやっていました。ただこの場合、スマホサイズに変わったときに何か処理をする場合に、何をトリガにすればいいのかがわからなくなりました。
Windowsのサイズを解析して、、という方法がありそうですが、もっと簡単にやりたかったです。

# 今回のやりかた
・アイコンに　onAnimationEnd=関数　を設定。これをトリガにする
・アイコンがdisplay:blockになったときにダミーのアニメーションを走らせる。0秒で変更するアニメーションとした
```css:css
@media screen and (max-width: 600px) {
  .IconArea {
    display: block;
    animation-name: dummyAnime;
    animation-duration: 0s;
  }
}

@keyframes dummyAnime{
  99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
```
```javascript:ソース
        <div className="IconArea" onAnimationEnd={onMenuIconDisplayed}>
                ：
        </div>
```
文字列　シングルクオートの盲点 式展開の際に注意！


普段何気なく使っていたシングルクオーテーションと
ダブルクオーテーションの違いを調べたので、メモ書きしておきます。

ポートフォリオを作成している際に、
'#{user.index}'
とした際に、式展開が出力がされなかったため、色々と調べてみると
"#{user.index}"
のようにダブルクオートを使わないと式展開は出力されないみたいです。

また同様に
改行もダブルクオーテーションでしか使えないみたいです。
楔形文字の変換gemとアプリを作りました。

# TL;DR
アルファベットないしはひらがな・カタカナを楔形文字に変換するrubygemとアルファベットのみを楔形文字に変換する
アンドロイドアプリを作ったので、使ってみてね！
rubygems: https://rubygems.org/gems/kusabi
android : https://play.google.com/store/apps/details?id=com.chatram.cuneiform

## 例
https://github.com/ppmasa8/kusabi/#usage-example
```ruby
# これはrubygems版
"Unknown".to_cuneiform => 𒌋𒉡𒆠𒉡𒃰𒉾𒉡

"!Unk@no#wn".to_cuneiform => !𒌋𒉡𒆠@𒉡𒃰#𒉾𒉡

"アンノウン".to_cuneiform => 𒀀𒅘𒁖𒌋𒅘

"アンノウン?".to_cuneiform => 𒀀𒅘𒁖𒌋𒅘?

```

## 仕組み
 タイトルからわかるようにかなり簡単な作りになっており、
https://github.com/ppmasa8/cuneiform/blob/master/lib/translate.dart#L35
```dart
List<String> result = [];
    List<String> strings = text.toLowerCase().split('');
    for (var str in strings) {
      String temp;
      if (hash[str] != null) {
        Runes input = Runes(hash[str]);
        temp = String.fromCharCodes(input);
      } else {
        temp = '';
      }
      // print(temp);
      // print(temp.isNotEmpty);
      temp.isNotEmpty ? result.add(temp) : result.add(str);
      print(result);
    }
// これはアンドロイドアプリ版の実装
```
予めマップにその文字に対応する楔形文字のユニコードを書いておいて、一文字ずつ置換していくだけの作りになっています。

また、変換できないよっていう文字が入ってきたらエスケープして、その文字は変換せずにそのまま出力します。

## 雑になってしまったところ
 実は楔形文字は年代によっても使われている文字がバラバラだったり、そもそも母音の「お」が存在していないことなりがあったので、正確性には大分欠けます。

## 最後に
最後まで読んでくれてありがとうございます！
興味があったら使ってみてください！
rubygems: https://rubygems.org/gems/kusabi
android : https://play.google.com/store/apps/details?id=com.chatram.cuneiform
カイ二乗適合度検定と独立性検定のmatlabでの計算


# 適合度の検定と独立性の検定の違い

カイ二乗適合度の検定と独立性の検定の違いについては下記記事が明解である。
https://qiita.com/m1t0/items/bcfc5f6b2c8697fea326

適合度検定は、期待度数が他から与えられ、この期待度数をもつ母集団から観測値が得られた時に統計量がχ二乗分布に近似的に従うことを利用して検定を行う。独立性の検定では、二元分類の場合、つまり二種類の変数によって観測値が分類されるとき、変数が独立であるとの仮定のもと期待度数を計算し、この期待度数をもつ母集団から観測値が得られた時に統計量がχ二乗分布に近似的に従うことを利用して検定を行う。

# matlabでの適合度検定

matlabには適合度検定を行う関数chi2gofが用意されている。
以下の例題について
https://bellcurve.jp/statistics/course/9494.html
matlabで計算した例を示す。

```matlab 
f = [55 22 16 7]; 
e = [40 30 20 10];
[~,p,st] = chi2gof([1:4],'ctrs',[1:4],'frequency',f,'expected',e,...
    'nparams',0,'alpha',0.05)
```
以下は実行結果です。
```terminal 
p =
    0.0238
st = 
  struct with fields:
    chi2stat: 9.4583
          df: 3
       edges: [1×5 double]
           O: [55 22 16 7]
           E: [40 30 20 10]
```

# matlabでの独立性の検定

matlabにはクロス集計表から独立性の検定を行う関数はないが、独立性の仮定のもと期待度数を計算すれば、適合度検定を行う関数chi2gofで検定を行える。

以下の例題について、
https://bellcurve.jp/statistics/course/9496.html
matlabで計算する例を示す。

```matlab 
x = [55 22 16 7; 40 32 24 4];
f = reshape( x', 1, [] );
e = [];
freedom = (length( f ) - 1) - (size( x, 1 )-1)*(size(x,2)-1);
bins = 1:length(f);
for i = 1:size( x, 1 )
    for j = 1:size( x, 2 )
        e(end+1) = sum(x(:,j))*sum(x(i,:))/sum(x,'all');
    end
end
[~,p,st] = chi2gof(bins,'ctrs',bins,'frequency',f,'expected',e,...
    'nparams',freedom,'alpha',0.05)
```
以下は実行結果です。
```terminal 
p =
    0.0844
st = 
  struct with fields:
    chi2stat: 6.6385
          df: 3
       edges: [1×9 double]
           O: [1×8 double]
           E: [1×8 double]
```
Reactの環境構築

# この記事の概要

Reactの環境構築について記す。

# Reactのインストール→アプリ作成→アプリ起動

## Reactのインストール（homebrew)
```
// homebrewでnode,npmのインストール
$ brew install nodejs
```

## Reactアプリ作成
```
// アプリ作成
$ npx create-react-app .
```

## Reactアプリ起動
```
// アプリ起動
$ npm start
```
[Ruby on rails] case式を使わない方法を模索する

# はじめに

未経験からエンジニアに転職しまして
業務で学んだ事をアウトプットしていきます！
## case文を使わなくても良いかも知れない
例えば遊園地の入園料で年齢によって処理を切り分けたいとします。
切り分けすぎですが

0歳から５歳なら１８０（円）を出力
６歳から１０歳なら３００（円）を出力
11歳から15歳なら５００（円）を出力
16歳から２０歳なら１,０００（円）を出力
２１歳以上なら３,０００（円）を出力

したいとします。

## case式で書く
今までの自分であればcase式を書いていました。
例えばこんな感じです。

```text.rb
age = 20

case age
when 0..5
  puts 180
when 6..10
  puts 300
when 11..15
  puts 500
when 16..20
  puts 1_000
when 21..nil
  puts 3_000
end
=>1000
```
よくある書き方だと思います。

ですが、別のファイルに切り出して定数で管理しても良いかもしれません。
## 定数で管理してみる
例えば別ファイルでこの様に定義してみます。

```constants.rb
class Constants
  Amusement_Park = [
    { age_range: 0..5,  fee: 180},
    { age_range: 6..10,  fee: 300},
    { age_range: 11..15,  fee: 500},
    { age_range: 16..20,  fee: 1_000},
    { age_range: 21..nil,  fee: 3_000}
  ].freeze
end
```
この様に定義した定数を下記の様に使います。
```text.rb
puts Constants::Amusement_Park.find {| amusement | amusement[:age_range].include?(age)}.fetch(:fee)
=>1000
```

とこれでも同じ出力結果を得る事が出来ます。

どちらが良いかは状況によるかと思いますが個人的には
**constants.rb　=> 定数を管理するだけ**
**text.rb => 料金を出力するだけ**

定数にして別ファイルに記載することで責務を切り分けてるのが気持ち良く感じます。

勉強時代は定数ってものにあまり馴染みがありませんでしたが、こんな使い方もあると勉強になりました。

読んで頂きありがとうございました！
JSONServerを立ち上げてみた

Vueで簡単なアプリを作成するために必要となるJSONServerを立ち上げました。

ターミナルでnpm i json-serverを実行しインストール、サーバー用のディレクトリを作成してそこにjsonファイルを配置しました。

```php:db.json
{
    "todos":[
        {
            "id":1,
            "text":"Vueのプログラミング",
            "categoryId":1
        },
        {
            "id":2,
            "text":"寝る",
            "categoryId":1
        },
        {
            "id":3,
            "text":"買い物",
            "categoryId":2
        }
    ],
    "categories":[
        {
            "id":1,
            "title":"未着手"
        },
        {
            "id":2,
            "title":"完了"
        }
    ]
}
```
サーバー用のフォルダに移動し、ターミナルでnpx json-server --watch db.jsonを実行するとサーバーが立ち上がりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2725725/f28e86bb-1242-0352-3889-f0431f1cea53.png)

これからこの仕組みを使ってアプリを作っていきます。
正規表現で改行を取得できない

<h1>正規表現における改行文字</h1>
<p>改行文字として\nと\rがある。</p>

![スクリーンショット 2022-07-03 12.04.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2531368/d1429d2e-a61d-eba9-cb8d-5b26a75b282d.png)

<h1>正規表現で改行を表すには</h1>

`[\n\r]`とすると良い
文字化けを防ぐ

# はじめに
取引先から受領したデータをDB登録してきちんと登録されたか画面上で確認するときに文字化けが起きていることが稀にありました。（DB登録せず、HTML上に直接記載したときとかも。。）
本記事は、そのときの対応内容を残した備忘録となります。


# 文字化けを防ぐには
原因としては、記号・特殊文字などの環境依存文字を使用していたため。
記号・特殊文字を使用したい場合は、「文字実体参照」か「数値文字参照」に置き換える必要がある。
こちらのサイトでよく使われる記号やマークの文字コード表がまとまっているので、確認するとよい。
[HTMLの記号・特殊文字の文字コード表（文字実体参照、数値文字参照）](https://gray-code.com/html_css/list-of-symbols-and-special-characters/)


# 環境依存文字チェッカーの紹介
文字化けが起きてから、文字コード表を確認して修正するのは面倒です。
受領したデータに環境依存文字が含まれているか事前に知るためのツールとして下記サイトが有用です。
[機種依存文字チェッカー](https://form.submitmail.jp/tools/check/)