OmniAICreator/Qiita-1.07M huggingface dataset:
4-1 CSS基礎

# CSS(Cascading Style Sheets)とは

Webページの<font color="red">スタイル</font>を指定するための言語です。

スタイルとは、例えば

- 文字の大きさ
- 文字の色
- 背景色

などがあります。


# CSSの指定方法

3種類あります。

1. 要素に直接指定する
2. headタグ内にstyle要素を追加して指定する
3. css用ファイルで指定する。

# 1.CSS指定(要素に直接指定する)

```html
<p style="font-size: 20px; font-weight: bold;">あいうえお</p>
```

上記は、フォントサイズを20pxに、フォントを太字に指定しています。

CSSは、以下のようにプロパティと値で構成されます。

```html
style="プロパティ名: 値;"
```

<font color="red">プロパティ（property）</font>とは適用するスタイルの種類のことです。 


# 2.CSS指定(headタグ内にstyle要素を追加して指定する)


```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- ここから -->
    <style>
      h1 {
        font-size: 100px;
      }
    </style>
    <!-- ここまで -->
  </head>
  <body>
    <h1>あいうえお</h1>
  </body>
</html>
```

上記は、h1タグに対してフォントサイズを100pxに指定しています。

この場合のCSSの書き方は、以下のようになります。

```html
セレクタ　{
  プロパティ名: 値;
  プロパティ名: 値;
}
```

セレクタとは、<font color="red">どの要素に</font>という指定をするものです。
後ほど解説します。

# 3. CSS指定(css用ファイルで指定する)

pタグの背景色を赤に指定する例

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1888749/834f0e8d-3a97-fe31-a227-f50ef8f0019d.png)

headタグ内にのlinkタグで外部作成CSSファイルのリンク先を指定します。
以下のようにheadタグ内に記述します。

```html
<link rel="stylesheet" href="cssファイル名" />
```

# セレクタ

[ここから代表的なものを紹介します。](https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/CSS_basics)

- 基本セレクター
 - 要素型セレクター
 - クラスセレクター
 - ID セレクター
- グループ化
 - セレクターリスト
- 疑似
 - 子孫結合子
 - 子結合子

# MDNの紹介

CSSのプロパティなどについて詳細を確認したい場合、MDNを見るとよいと思います。
VSCodeで標準のリファレンスとして搭載されていますのです活用しましょう。
（ブラウザ別の対応なども記載されていますね。）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1888749/829b19f4-338b-4cdb-cc31-792302d431af.png)


# 演習

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- ↓↓↓ ここから -->
    <link rel="stylesheet" href="style.css" />
    <!-- ↑↑↑ ここまで -->
  </head>
  <body>
    <div class="hira">
      <h2>あいうえお</h2>
      <p>かきくけこ</p>
      <p>さしすせそ</p>
    </div>
    <div class="alpha">
      <h2>aiueo</h2>
      <p>kakikukeko</p>
      <p>sasisuseso</p>
    </div>
    <div class="number">
      <h3>1,2,3,4,5,6,7,8,9,0</h3>
      <p>10,20,30,40,50,60,70,80,90,100</p>
      <p>100,200,300,400,500,600,700,800,900,1000</p>
    </div>
  </body>
</html>
```

上記HTMLにCSSを指定し、下記表示に近づけるように実装してみてください。
※h2タグのフォントは`ＭＳ Ｐゴシック`を指定します。 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1888749/3f69c48a-0ef1-9b54-f7e0-c472d5f3124e.png)

以下のように指定しました。

```css:style.css
.hira {
  background-color: red;
  text-align: left;
}

.alpha {
  background-color: gray;
  text-align: right;
}

.number {
  background-color: skyblue;
  text-align: center;
}

h2 {
  font-style: oblique;
  font-family: "ＭＳ Ｐゴシック";
}
```
iOS開発環境におけるデバッグ効率を上げるTips

# はじめに

この記事は自分がデバッグを行う中で便利だと思ったことを記載しています。
定期的に追記/更新していきます。

# 設定

## 言語環境など、特定の設定状態で起動する

シュミレータや実機でデバッグを行うとき、Localizedの確認のために特定の言語や地域で起動したい場合があります。

### After

![IMG_2202.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300780/1340e8b1-5441-bfb1-bda6-2a9ddc5034e4.png)

言語設定の場合、実機やシュミレータでも設定アプリから設定することができます。
しかし、切り替える度に画面が暗転し、短い再起動のような状態に陥ります。

### Before

Edit Scheme -> Run -> Optionsと遷移すると以下のような画面が表示されます。

![Screen Shot 2021-10-06 at 1.21.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300780/283bd39b-24f1-293c-7189-0fb3aa104a0d.png)

ここのApp Languageで設定することができます。
他にもApp Regionで地域を設定したり、StoreKit Configを設定したりなど、たくさんのことができますので、ここを使うことで更に効率を上げられると思います。
RSpecのmatcher  to be_validとto_invalidについて

# RSpecとは
Rubyでwebアプリなどを作っている時、
ちゃんとアプリが自分たちの設計通りに動くがテストするた目の機能がRSpecです。

# matcherとは
自分がテストでこういうように動くと期待してテストをします。
それが期待した通りに動いたか、動かなかったかを確認するためのものです。

# to be_validとは
validとは有効という意味の単語です。
あることを期待してその通りの結果になるのかをテストするときに使います。
例えば

```rb
memo = Memo.new(title: "RSpec", content: "テストを学習")
expect(memo).to be_valid # memo.valid? が true ならテストは期待通りに動いてることになります。
```

# invalid
invalidは有効ではないのでfalseを返します。

```rb
memo = Memo.new(title: "RSpec", content: "テストを学習")
expect(memo).to be_invalid # memo.in_valid? がfalseかどうかを確認します。
```

# 最後に
自分はエンジニアの実務は未経験の状態で書いているのですが、
現役エンジニアの方がお話されていたことを書きます。
***この記事は未経験に方向けですの記事です。***

プロジェクトや会社によって変わってくるのですが
***実務ではコードレビューで動作の確認はしない***みたいです。
中には上記のような会社やプロジェクトもあるかと思います。ただRailsの開発だと
***RSpecでテストを書いて動作するかテストをする***みたいです。
実務に入る前にテストを学習してから実務に入るといいみたいです。


# 参考資料
https://qiita.com/jnchito/items/2e79a1abe7cd8214caa5
https://qiita.com/Naoki_Egawa/items/160b04193d8f3c534127
ニューモーフィズムでむにゅっとしたボタンを実装する

webデザインについて調べていると、「ニューモーフィズム（Neumorphism）」というデザイン手法に出会ったので、cssで実装してみました。
# ニューモーフィズム（Neumorphism）とは
>ニューモーフィズム（Neumorphism）とは、ベース（背景）から要素が押し出されていたり、窪んでいたりするようなスタイルのデザイン手法です。
>凹凸によって要素を表現しているため、ミニマルデザインとの相性がとても良く、美しく洗練された印象のデザインに仕上げることができます。
[ニューモーフィズムとは？デザイン方法やルールのまとめ](https://webdesign-trends.net/entry/11155)

どうやら2020年からデザイントレンドとして再度注目を集めているそうです。
(元となるスキューモーフィズムという現実世界に存在するものをデジタルの世界で再現するデザイン手法が以前に流行していました。)
自分の記憶では、昔のiphoneの計算機のUIがこのニューモーフィズムで作られていた気がします。

![KOGrmzdfbPsIqxt1633445700_1633445711.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481264/c22fe7ab-a039-d1af-9813-8fc99df6e565.jpeg)

pinterestで検索をかけるとたくさんヒットしました。
[検索結果](https://www.pinterest.jp/search/pins/?q=neumorphism&rs=typed&term_meta[]=neumorphism%7Ctyped)
![aUBeQXa6gqJfPIs1633446261_1633446271.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481264/1b665aae-9442-f135-3ece-aeeb49b21222.png)

# 実装
非常に簡単です。
以下のサイトで簡単にニューモーフィズムをcssを使って再現できます。
[Neumorphism.io](https://neumorphism.io/)
![スクリーンショット 2021-10-06 0.10.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481264/70e7cd17-d3fa-c4e7-926c-84c40addd61e.png)


下記コードで再現しました。

```html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Neumorphism</title>
	</head>
	<style>
		body {
			background-color: #afdcf3;
			display: flex;
			align-items: center;
			justify-content: center;
			min-height: 100vh;
		}
		.flex {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			gap: 0px 100px;
		}
		.neumorphism {
			width: 300px;
			height: 300px;
			border-radius: 57px;
			background: #afdcf3;
			box-shadow: 9px 9px 18px #95bbcf, -9px -9px 18px #c9fdff;
		}
		.neumorphism:active {
			box-shadow: inset 9px 9px 18px #95bbcf, inset -9px -9px 18px #c9fdff;
		}
		.neumorphism2 {
			width: 236px;
			height: 236px;
			border-radius: 50%;
			background: linear-gradient(145deg, #bbebff, #9ec6db);
			box-shadow: 24px 24px 47px #93b9cc, -24px -24px 47px #cbffff;
		}
		.neumorphism2:active {
			background: linear-gradient(145deg, #9ec6db, #bbebff);
		}
	</style>
	<body>
		<div class="flex">
			<div class="neumorphism"></div>
			<div class="neumorphism2"></div>
		</div>
	</body>
</html>
```

# 実装結果

https://yuyaamano23.github.io/neumorphism/

![画面収録 2021-10-06 0.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1481264/69b6ded8-c98f-542d-7f18-c210f137515b.gif)

思っていた通りのむにゅっとしたUIが再現できました！😎

# 参考にさせていただいた記事

https://webdesign-trends.net/entry/11155

https://zenn.dev/byanbyan/articles/34832541cfc980

https://tech.arms-soft.co.jp/entry/2021/05/26/090000
Pythonで書いたCGIが動かない時真っ先に確認するたった2つのポイント

# TL;DR
- **chmod 755しました？**
- **実行したいファイルの改行文字、LFですか？**

# 環境
- RHEL
- httpd
- 開発はVSCode on Windows

# 詳細

- Windows上で開発している限り動作する
- Pythonファイルの拡張子をcgiに変更してRHELのhttpd領域にアップロードしても動かない！
- 調べて毎回上記2点で解決するので書いた。コードを疑う前にまずチェックしてみよう的なノリ。
PG::ObjectInUse: ERROR database "〇〇" is being accessed by other usersが出た時の対処法

#このエラーの意味とは
このエラーはデータベースが他のプロジェクトやuserで使われているために発生するエラーです。


#原因
考えられる原因としては
データベースに接続中のために発生しているので
・Dockerを使っている場合、他のプロジェクトでもdockerが立ち上がっている
・tableplusやpostmanに接続中
・rails コンソールでデータベースにアクセス中

などが考えられるとアドバイスをもらいました。

#解決策

1 dockerを使っている場合

dockerを起動している方に限った解決策です。
ただ自分はこのやり方で解決したわけではないのでご了承ください。
・dockerで他のプロジェクトなどでも起動している場合は
dockerの接族状況を確認します。

```
$ docker network ls

NETWORK ID     NAME                         DRIVER    SCOPE
70875147784c   bridge                       bridge    local
561d44c3a725   ▲▲               　　　　　　　　　　　　　　　　　　　　　　　　bridge    local
#省略
b63f10ebb8b7   〇〇                  　　　　　　　　　　　　　　　bridge    local
```
別のプロジェクトでもdockerが立ち上がっていました。

まず一度全部dockerを止めます。

```
$ docker-compose down
```
で落とした後、再度dockerを起動します。

```
$ docker compose up

```
で起動するやり方があるみたいです。

2 再起動

少し面倒なやり方ですが、PCを再起動することです。
データベースにアクセス中で下手にデータベースをいじりたくないなら
PCを再起動するやり方があります。
自分はこのやり方で解決できました。


#最後に
人によってエラーが出たタイミングや状況は違うので、
上のやり方でも解決できない場合はあるかと思います。
状況によっていろいろ対処するのがいいかと思います。
Railsのhas_many throughの使い方を簡単にまとめました。

Railsチュートリアルの１４章で出てきた**「has_many through」**の使い方をわかりやすいように、まとめていきます。
※Railsチュートリアルをやっていないと、いきなりコードを見ても理解できないかもしれないです。
まず、以下のコードを例に説明していきます。

```ruby
class User < ApplicationRecord
  has_many :active_relationships, class_name:  "Relationship",
                                  foreign_key: "follower_id",
                                  dependent:   :destroy
  has_many :followeds, through: :active_relationships #ここ
#<User id, name, email, created_at, updated_at, password_digest>
end
```

```ruby
class Relationship < ApplicationRecord
  belongs_to :follower, class_name: "User"
  belongs_to :followed, class_name: "User"
#<Relationship: id, follower_id, followed_id, created_at, updated_at>
end
```
**throuch**の挙動は、
・userモデルのインスタンスにthroughの後に書かれたメソッドを実行する。
・・戻り値のrelationshipインスタンスにhas manyの第一引数を単数系にした、メソッドをインスタンス一つ一つに実行する

↑この説明じゃわからないと思うので、もう少しわかりやすく説明していきます。
***

まず**「・userモデルのインスタンスにthroughの後に書かれたメソッドを実行する。」**についてです。

```ruby
has_many :followeds, through: :active_relationships
```
userモデルに対して「through: :active_relationships」に書かれている「:active_relationships」メソッドを実行します。
↓つまり内部でこんな感じに動きます。

```ruby
user = User.first #仮に最初のユーザーだったら
relationships ＝ user.active_relationships
```
active_relationshipsメソッドは
user.id == relationship.follower_idのrelationshipインスタンスの集合を返すので
relationships変数の中には、relationshipインスタンスの集合が入っています。
****
次に**「・戻り値のrelationshipインスタンスにhas manyの第一引数を単数系にした、メソッドをインスタンス一つ一つに実行する」**の部分です。
****


```ruby
has_many :followeds, through: :active_relationships
```
has_manyの第一引数の:followedsを単数系にするとfollowedになり、
先ほどのrelationship変数に対してfollowedメソッドを実行します。
followedメソッドはRelationshipモデル内のbelongs_toで生成されたメソッドです。

```ruby
belongs_to :followed, class_name: "User"
```
↓内部ではこうなっています。

```ruby
user = User.first#仮に最初のユーザーだったら
relationships ＝ user.active_relationships
relationships.map(&:followed)
```

この一連の流れを「has_many :followeds, through: :active_relationships」で生成した。followedsメソッドをuserインスタンスに対して呼び出すと実行してくれます。
***
###第一引数を任意の単語に変更することもできます。
:followedsを :followingに変更します。
ですがこれではfollowed_idと紐ずくuserインスタンスを取得できません。
そのため明示的にsource: :followedとしてfollowed_idと紐ずくuserインスタンスが欲しいとrailsに伝える必要があります。

```ruby
class User < ApplicationRecord
  has_many :active_relationships, class_name:  "Relationship",
                                  foreign_key: "follower_id",
                                  dependent:   :destroy
  has_many :following, through: :active_relationships, source: :followed

end
```
***
##まとめると
```ruby
user.following
```
と書くと内部では、

```ruby
user.active_relationships.map(&:followed)
```
このような処理が行われています。

**※厳密に言うとmapを使うと戻り値は配列で、user.followingを使うと戻り値のクラスは「User::ActiveRecord_Associations_CollectionProxy」になるみたいですが、データの集合が取得できるという意味では近いイメージです。**
WebComponents > lit-element vs skatejs vs stencil vs stencil-js



日記メモです。


数年ぶりに最近またWebComponentsを調べています。

調べ中ですが、lit-elementをもうちょっと調べてみようかなという、本日のメモです。



数年前、GEの[Predix](https://www.predix-ui.com/#/gallery)でWebComponentsの時代がくるのかと期待して、自分もWebComponentsの波に乗ってみたものの、世間はReactやVueへ流れていきました。

そんなWebComponentsの世界でもPolymerが王道かなと思ってたら、Polymerの更新が怪しくなってlit-elementが誕生するという雲行きの怪しさも拍車をかけた気がします。
（ただ、[IE11でまともに動くのがPolymerだった](https://qiita.com/sugasaki/items/d5ef5da4a8104d2b18f4)のでPolymerは重宝しました。）


そのlit-elementも怪しいなと思ってたのですが、2019年から現在までも順調に伸びてるようなので、使ってみても大丈夫かなという思いが湧いてきました。

![スクリーンショット 2021-10-06 0.09.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/bc8870d7-06c3-7916-2318-7fc07c163243.png "スクリーンショット 2021-10-06 0.09.03.png")

[@polymer/polymer vs lit-element vs skatejs vs stencil vs stencil-js | npm trends](https://www.npmtrends.com/lit-element-vs-skatejs-vs-stencil-vs-stencil-js-vs-@polymer/polymer)




という事で、特にオチはないですが、lit-elementを改めてもうちょっと調べてみようかなと思った記録です。


ところで、以下に、
[Web Components – React](https://ja.reactjs.org/docs/web-components.html)


> Web Components 内で React を使用することも、React 内で Web Components を使用することも、あるいはその両方を行うこともできます。

と書いてありますが、その下にさらに、

> React を使用するほとんどの人は Web Components を使用しませんが、Web Components を用いたサードパーティ製の UI コンポーネントを使用したい時などには活用できるかもしれません。

と書いてあって、
気持ちはわかるけど、・・・
全員がReact使ってる組織・環境だったらそれでいいでしょうけどね。

共通化は技術的にもマインド的にも永遠の課題かもしれないです。
PG::DuplicateColumn: ERROR:が出た時の対処法

#このエラーの意味とは
PGはpagesのことみたいです。
***Duplicate***とは***複製***の意味です。Columnはカラムのことです。
これは***テーブルに同じカラムが複製されている***。
***同じ名前のカラムが存在しているのはダメだよと怒られているエラー***です。

#どんな時エラーがでた？
railsで```add_〇〇_to_articles.rbの内容を書き直そうと思い、
rails g migration  add_〇〇_to_articles 〇〇:string``` 実行
これはカラム追加コマンド```です。

⚫︎コマンドの説明はこの記事に載せてあります。
https://qiita.com/Hashimoto-Noriaki/items/c9d31577fd647ee8d08f

その後、 bundle exec rspec --tag focus (rspecのテスト)```を実行しました。
(このコマンドはテストをしたい内容を絞ってやるときに実行します。)
 するとエラーが出て、

```
#省略

bin/rails:4:in `<main>'
Tasks: TOP => db:test:load => db:test:purge
(See full trace by running task with --trace)
Migrations are pending. To resolve this issue, run:

        rails db:migrate RAILS_ENV=test
No examples found.

```
このコマンドを実行
```rails db:migrate RAILS_ENV=test```
を実行。すると```PG::DuplicateColumn: ERROR:```のエラーが出てきました。

#解決策
先にお伝えしますが、実際自分が解決したやり方は違うので下で書くことと違います。
なぜ違うのかというと人によってエラーが出た状況が違うからです。

一般的には

```
rails db:migrate:reset
```
を使うといいみたいです。
このコマンドは***データベースを作成した時、migrationを実行してデータベースを作った後に、
作ったデータベースをmigration実行前に戻すコマンド***です。
rails db:resetだとデータベースごと消えてしまうのであまり推奨されないみたいです。

rails db:migrate:resetによってcreate(データベース作成)もされた状態で
空のデータベースの状態に戻せるので、またデータベースを構築していくことができます。



⚫︎参考記事
https://k-koh.hatenablog.com/entry/2020/05/29/174420
https://kirohi.com/rails_duplicate_error#i-4
ABC88 C - Takahashi's Information を解いた

https://atcoder.jp/contests/abc088/tasks/abc088_c

![abc88_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/94fb341b-3046-c473-e072-290ada685dda.png)
![abc88_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/11a7aa7c-564a-d051-c01c-5f6782ddfcbf.png)
![abc88_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/fde01274-b2c9-6792-869d-10fbb14ec8ba.png)

ね、眠い。
とりあえず、for 文が面倒だったから、力技。

```TakahashiSinformation.py
C = [list(map(int,input().split())) for _ in range(3)]
#print(C)

if C[0][1]-C[0][0] == C[1][1]-C[1][0] == C[2][1]-C[2][0]:
    if C[0][2]-C[0][1] == C[1][2]-C[1][1] == C[2][2]-C[2][1]:

        if C[1][0]-C[0][0] == C[1][1]-C[0][1] == C[1][2]-C[0][2]:
            if C[2][0]-C[1][0] == C[2][1]-C[1][1] == C[2][2]-C[1][2]:
                print("Yes")
                exit()
print("No")
```

問題にあるように素直に、全部試して OK なら Yes, ダメなら No
【TypeScript】tsconfig.jsonで出力先を設定したのに反映されないあなたへ

TypeScriptに入門した際に、tsファイルのコンパイル後の出力先を設定したはずなのに、想定通り出力されないということがありました。
初学者の中には、同じつまづきをされる方もいるかもしれないので共有します。

## 安心してください。設定は間違っていないのだから（多分）

今回は、tsconfig.jsonで「出力先」を設定した想定です。
こんな風に記述しているのではないでしょうか？

```:tsconfig.json
{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2015",
    "outDir": "./dist",
    "sourceMap": true,
    "strict": true
  },
  "include": [
    "src"
 ],
}
```

今回問題となる出力先に関する記述は、`"outDir": "./dist"`の部分。
この場合、出力先はtsconfig.jsonと同じ階層にあるであろうdistディレクトリになるはです。

各ファイルの位置関係は下記のとおりです。

```
┃
┣━ node_modules/
┣━ dist/ # 出力先
┣━ src/
┃　　　　　┗━ index.ts
┣━　ｔｓconfig.json
┣━　package-lock.json
┗━　package.json
```

それでは、Typescriptを初めて書いたindex.tsをいざコンパイル。

```:bash
$ npx tsc ./src/index.ts
```
**？？？**
![スクリーンショット 2021-10-05 23.45.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275589/85f0f94e-8c5e-75ea-5a25-6a126993275c.png)
index.jsよ、なぜ、そこにいるのか...（もちろん、distディレクトリの中は空です。）

## 結論 ファイル名を指定しなければよい

結論を言うと、「ファイル名」を指定しないで下記の用にコマンドを実行するだけで解決します。

```:bash
$ npx tsc
```
これをやりたかったんだよ。
![スクリーンショット 2021-10-05 23.50.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275589/e5584d61-673c-20ef-1ae3-26de48f91143.png)

### なぜか

公式ドキュメントの[What is a tsconfig.json](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)にこのように書いてあります。

> When input files are specified on the command line, tsconfig.json files are ignored.
> 訳） コマンドラインで入力ファイルを指定すると、tsconfig.jsonは無視されます。

ということで、良かれと思ってファイル名を指定してコンパイルしていたがために、出力先を指定したのに反映されていないという憂き目にあっていました。

たったこれだけのことでしたが、20分くらい悩んでっしまったので、同じ問題に直面している人が早い段階でここにたどり着いてくれることを祈ります。
2021年版 iOSアプリ配布用証明書の作り方

# はじめに

iOSアプリの配布用証明書（Distribution Certificate)の作り方はいつも忘れてググってしまうのですが、最近ググると古いやり方が大量にヒットするうえ、さらに自分の記憶も2016年頃で止まってたため、大混乱しました。

最近iOS開発を始めた人は何も混乱しないような気がしますが、新しいやり方を備忘録として書き残します。 

昔は証明書署名要求(CSR)ファイルをローカルで生成し、Apple Developer へアップロードして iOS Distribution Certificatie を生成してました。検索するとたくさんヒットするのはこちらのやり方です。

Xcode 8以降では証明書の自動管理機能が導入され簡単になっています。現在は、Xcode の Manage Certificates 機能で「Apple Distribution Certificate」を作成するのがシンプルな手順と思われます。

# Xcode からの Apple Distribution Certificate の作り方
手順は Xcode 12.5 のものです。

- Xcodeを起動し、メニューの[Xcode]- [Preferences...]-[Accounts]でアカウント画面を開く
- Apple ID とチームを選択し、右下の[Manage Certificates...]を選択
- Singning certificates for "Team Name": ダイアログが表示されたら、左下の + ボタンをクリック。
- [Apple Distribution...] を選択

![manage_certificates.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43781/0be2503a-50f0-e7db-8a65-c86841d64420.png)

以上のステップだけで、Apple Distribution Certificate が生成されます。

※この画面では日付しか項目を区別する方法がないため、面白がって何個もCertificateを作ると区別がつかなくなるので注意しましょう（やっちゃいました...）。

## CERファイルのダウンロードは不要
前記の方法に従って、Xcode で Apple Distribution Certificate を生成すると、Apple Developer アカウントに登録されるのと同時に、Mac の KeyChain にも自動で登録されます。このため、昔は必要だった Apple Developer アカウントから .CER ファイルをダウンロードして登録するステップは必要ありません。また、他のマシンでビルドする際も Xcode に Apple ID でログインすれば、Apple Distribution Certificate は自動でダウンロードしてくれます。

## 秘密鍵のバックアップは必要
秘密鍵のバックアップは以前と同様に、自前で行う必要があります。KeyChain に登録された Apple Distribution Certificate にぶら下がる形で、秘密鍵が登録されてます。

![certificate.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43781/aee60f18-3307-9bd1-c742-c7055e11a276.png)

以前と同様に、現在でも、この秘密鍵をなくしてしまうとビルドはできません。また、他のマシンでビルドする場合にも秘密鍵が必要になります。秘密鍵は .p12 形式でエクスポートし、自前でバックアップしておく必要があります。

# よもやま 
証明書署名要求(CSR)ファイルを Xcode の Certificate Assistant で作る昔ながらの方法では、生成時に「CommonName」欄に入力した名称で、KeyChain の Keys カテゴリに秘密鍵と公開鍵の両方が追加されます。これをよく知らずにCSRを作ると、後で一体何のために KeyChain に登録されたものなのか非常に分かりにくいエントリが KeyChain に溜まることになります。
 
Xcode の Manage Certificates 機能で作成すると、先のスクショのように`Apple Distribution: Team Name (TEAM ID)` のような形式の分かりやすい名前で秘密鍵のエントリが KeyChain に登録されます。したがって、後から KeyChain を見ても分かりやすく、やはりこちらの Xcode から直接 Distribution Certificate を作るほうが堅実かなと思います。
プログラミングスクールに通って正直に思ったこと

#まずはじめに
スクールに通おうと思ったきっかけは、ゼロから独学でプログラミングを学んでいたのですがある一定で学習方法が難しいと思い始めスクールに通うことを決めました。
しかしスクールの数は多く、悪い噂もちらほらあり、通う前にかなり調べました。
半信半疑でスクール学習がスタートしたんですが、、


###結論から言うとスクールに通って大正解だったなと思いました。

#良かった点
###学んでいく上で進行方向が明確なこと
- 独学での一番の悩みだったのは今やっていることが順序良い学びなのか、そして内容の解釈が本当に正しいのか把握し辛かったことです。
- 今やるべきことを、迷わず学習に時間を費やせたのは、本当にストレスの軽減＋集中することができました。

- それと今の問題に対して自分で調べる→やっと解決する→また問題→解決するのループは本当にためになりました。（特に調べ方を学べました）
そこも計算してカリキュラムも作られているのだとは思いますが、良い感覚を得られました。

###数多くのメンターさんレビューしてもらえること、質問できること。
- 当たり前ですが友達に相談するわけではないので緊張感を持って、なお効率のいい質問方法を意識することができたのは良かったことの一つです。
- レスポンスの早さ、説明のわかりやすさも◎でした。

- それぞれのメンターさんによって着眼する点が違って色んな角度からレビュー、ご指摘頂けたことは本当に良い経験になりました。
今思えばもっと質問しとけば良かったなと思いました。。と思えるほど誰かに（知識がある方）質問できることはありがたいことだったと思います。

##週二回の30分間のメンタリング
###これが一番でした。
- 合計15回程だったと思います。

スクールに通う前にメンターの口コミなどもかなり見ていたのですが、　メンターさんがいたから頑張れた〜、親切な方だった〜とかいうレベルじゃなかったです。
####想像以上の対応で本当に素晴らしい方でした！！
ここまで親身にやってくれるの？と驚愕なレベルでした。
じゃあ何をしてくれたのか？それはただ画面越しに話をしただけです。

はじめてのメンタリング→なんでスクールに入ったの？動機を教えてほしいから始まり〜
最初の方はほとんど課題についてで、自分のスケジュールに合わせて目標を決めてくれたりといった感じです、そして進行状況についての質問、現在難しいと思う部分についての細かな説明や、現在の課題の理解度をチェックしてくれるなどでした。
進行につれて内容もレベルアップしてくれました、その中でも話してもらってよかったことを簡単にピックアップします。

- カリキュラムにはあまり重視されてない実践的な技術を教えてくれる
- プログラミング自体を好きでいることの大切さ
- プログラミングをする上での環境（PC機器周り）
- 勉強会について
- 今後の学習方法
- 自分を客観視することの大切さ
- プログラミングの流行りや言語の入れ替わり
- 現在働いている仕事の内容や、どういった経緯でプログラマーになったのか？
- 現場での共同開発での流れなど、アジャイル開発、ウォーターフォール開発について
- 自社開発、SESその他、仕事の内容や仕組みなど
- プログラマーを大事にしてくれる会社
- どういった職場を選ぶのがいいのか？など自分にとってはどれも有益すぎる情報ばかりでした。

####特にその方から大事にしてほしいと言われたのは、時間と選択についてです。
#### 本当に時間は大事にしてと言われました。


 - 時間＝命と引き換え。 

 - タイムバケット。
      - 本当にやりたいことは何なのか？20個考えてみてその中から更に絞って5に絞って考えてみるなど、
現在の年歳から死ぬまでにそのやりたいことができるか？具体的に何歳までに？何をするかなるべく明確になど。人生の逆算ですね。
 - 人生は選択の繰り返しだから、自分の選択一つで全てが変わっていく、本当にいま選択していることは正しいのか？今集中できる選択？人間選び？自分にどんな影響があるか？しっかり考えてほしい。

どの言葉も御尤もであって、当たり前の事なのかもしれませんが、スクールを通して数回画面越しに話をしたイチ生徒にここまで熱く話してくれる言葉の重み、重要性、その方の考え方に、本当に感化されました。
時には一時間以上話をしてくださったことなどもありました。自分はたまたまタイミングや時期が良かったのかもしれませんが、現役でお仕事をされてる方であって、メンター業も忙しい中これだけ時間を割いて頂いたこと、本当に課金レベルでした。

プログラミングをやっていく上での心構えや学習の取り組み方、継続する為のモチベーションなど、そして人として多くの事を学ばさせていただきました。
この方のお陰でよりプログラミングが好きになったのは間違いありません。



###結果自分はプログラミグスクールに通ってほんとに良かったと思いました。
学習自体はある程度カリキュラムに沿ってという部分もありますが、結果的に自走力が大事になってきます、それも良い学びになりました。
こういった対応が当たり前なのかもしれません、自分の場合は入校前に不評も耳にしていて構えていたこともあり加点方式になった為、より良く見えた部分もあるとは思いますが、お金を払った以上の価値がありました。
誰かにすすめるとかそういったものではないですが迷っている方がいたらまず悩むより行動だと思います。
それと、やっぱりどういった場所も最後は人が大事だということを改めて感じました。
これからもスクールで学んだこと、メンターさんに教わったことを生かして日々の時間を大切にし、時間と引き換えに、自分を成長させていこうと思います。
自作パッケージをMintに対応する方法

「Swift PackagesによるCLIツールの作成方法」は5部構成です。
記事を順番に読み進めると、Swift PackagesでCLIツールを自作して公開できるようになります。

第1部: [Swift PackagesでCLIツールを自作する](https://qiita.com/uhooi/items/4a4d9694e8a362b6885f)
第2部: [自作パッケージをSwift Package Indexに追加する](https://qiita.com/uhooi/items/689801dad2cf2e0a37b4)
第3部: 自作パッケージをMintに対応する　__←イマココ__
第4部: 自作パッケージをHomebrewに追加する（未投稿）
第5部: 自作パッケージをCocoaPodsに追加する（未投稿）

## はじめに

自作パッケージをMintに対応する方法を紹介します。

## 「Mint」とは？

私が以前投稿した記事をご参照ください。

https://qiita.com/uhooi/items/6a41a623b13f6ef4ddf0

## 環境

- OS：macOS Big Sur 11.6
- Xcode：12.5.1 (12E507)
- Swift：5.4.2
- swift-tools：5.4

## Mintへの対応方法

自作パッケージがあれば、 `Package.swift` に `products` を追加するのみで対応できるので、その手順を紹介します。

### パッケージを自作する

自作パッケージがなければ始まりません。

以下の記事を参考にパッケージを自作します。

https://qiita.com/uhooi/items/4a4d9694e8a362b6885f

### Package.swiftの編集

`Package.swift` に `products` と `.executable(name:targets:)` を追加します。

`name` は任意に付けられ、そのままバイナリ名になります。
そのため、すべて小文字が望ましいです。

`targets` は `.executableTarget(name: ...)` の `name` を指定します。 

以下の例では `uhooi` という名前でバイナリが生成されます。

```diff_swift:Package.swift
// ...
let package = Package(
    // ...
    platforms: [
        .macOS(.v10_10),
    ],
+   products: [
+       .executable(name: "uhooi", targets: ["OutputUhooi"]),
+   ],
    // ...
    targets: [
        .executableTarget(
            name: "OutputUhooi",
            // ...
            ),
        // ...
    ]
)
```

たったこれだけでMintでインストールできるようになります。

```shell-session
$ mint install uhooi/swift-output-uhooi

$ mint run uhooi/swift-output-uhooi uhooi "I'm uhooi."
┌|▼▼|┘<I'm uhooi.
```

Mintに対応するというより、単純にバイナリ名を変えたいときにも使う手法です。

## おわりに

自作パッケージをMintに対応することができました！
自分のパッケージがMintで使えるようになるのはとても嬉しいです :relaxed:

## 参考リンク

- [Add mint support · mac-cain13/R.swift@3158a81](https://github.com/mac-cain13/R.swift/commit/3158a813cfffceb5364abcd42f4e288fe86a56a3)
- https://twitter.com/the_uhooi/status/1439432795206475782?s=20
[Blazor] Identityの認証ページのUIをデフォルトから変更する方法

Blaozrアプリの認証画面をコマンド一発で作成できるMicrosoft.AspNetCore.Identityはとても便利ですが、ログイン画面などのUIを編集したくてもHTMLのコードがプロジェクト内で見当たらず、困ってしまいました。

実は一手間加えるだけで簡単にコードを編集できるようになります。

# 結論
aspnet-codegeneratorを使って認証画面のコードをスキャフォールドするだけ！

```
dotnet aspnet-codegenerator identity -dc WebAppAuth.Data.ApplicationDbContext --files "Account.Register;Account.Login;Account.Logout;Account.RegisterConfirmation" --force
```

#やり方
※以下、全てCLIでプロジェクトを進めています。
## 手順1
まずCLIからBlazor serverアプリを作成します。

```
dotnet new blazorserver -o hoge --no-https true --auth Individual
```
各オプション
-o -> アプリの名前
--no-https -> trueでlocalhostにアクセウスしたときにhttpsにリダイレクトされなくする
--auth -> IndividualでMicrosoft.AspNetCore.Identityの認証コードをスキフォールドする

## 手順2
必要なパッケージをインストール

```
dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design
dotnet add package Microsoft.EntityFrameworkCore.SqlServer
```

## 手順3
コードジェネレーターでコードを自動生成

```
dotnet aspnet-codegenerator identity -dc WebAppAuth.Data.ApplicationDbContext --files "Account.Register;Account.Login;Account.Logout;Account.RegisterConfirmation" --force
```

生成されたAreas/Identity/Pages/Account以下のファイルでLogin.cshtmlやRegister.cshtmlを編集できます。

### 参考文献
https://docs.microsoft.com/en-us/aspnet/core/security/authentication/identity?view=aspnetcore-5.0&tabs=netcore-cli
Aurora Serverlessとは？

Amazon Auroraには、キャパシティタイプに

- プロビジョニングタイプ
- サーバーレスタイプ

がある。


サーバーレスタイプのことをAurora Serverlessと呼ばれる。
特徴は、アプリケーションニーズに応じて、自動的に起動、シャットダウン、および容量を拡大または縮小される。

プロビジョニングタイプは、必要に応じて容量やエンジンなどスペックを準備する、いわゆるマニュアルで構築するタイプ。

## 料金
データベースの容量、ストレージ、および I/O 分に対してのみ料金が発生する。
上記を考慮した「ACU（Aurora capacity unit）」という単位で料金の算出を行なう。
ACU ・・・　約2GBのメモリーと対応するCPU/Network性能

料金表
https://aws.amazon.com/jp/rds/aurora/pricing/

また、プロビジョニングタイプと比較すると、使えば使うほどサーバーレスタイプのほうが割高のようだが、ある一定値まではサーバーレスタイプのほうが安い模様。
参考サイト
https://dev.classmethod.jp/articles/calculate-amazon-aurora-serverless-costs/#toc-3


## 参考
https://aws.amazon.com/jp/rds/aurora/serverless/
Angularでのサービスの作成方法とシングルトンデザインパターンについて

Qiita初投稿です！
技術ブログを書いたことがない＆メモ書き程度の文章なので読みにくかったらご容赦

# サービス作成のコマンド
サービス名.service.tsを作成する

```
ng generate service サービス名
```

# サービスの作り方
@injectableデコレーターが使われていることがサービスであることの条件

```book.service.ts
import { Injectable } from '@angular/core';
import { Book } from './book';

@Injectable({
  providedIn: 'root'
})
export class BookService {

  getBook(): Book[] {
    return [
    ...
```

上記の例のように「providedIn: 'root'」が設定されている場合（デフォルト時）は、コンポーネント内でimportするだけでコンポーネントから直接呼び出すことができる。

それ以外の設定を使う場合、モジュールにサービスを登録するにはprovidersパラメータにサービスクラスを入れる
declarationsはコンポーネントを登録するパラメータなので間違えないこと
サービスはコンポーネント（@Componentデコレーター）のprovidersパラメーターでも登録できる。
その場合は登録したコンポーネントと子コンポーネントでのみサービスを利用できる。
(モジュールで指定されたサービスはモジュール全体でアクセス可能)

```app.module.ts
import { NgModule } from '@angular/core';
...
import { BookService } from './book.service';

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    BrowserModule,
    ...
    CoopModule
  ],
  entryComponents: [EventComponent, BookComponent, WingsComponent],
  providers: [
    BookService
  ],
```

# サービス生成のアプローチ
サービスを生成するときのオプションがいくつかある。
インスタンスを一つだけ生成して複数のコンポーネントで使いまわしたり、通常はコンポーネントに注入するたびにインスタンスを生成することができる。

サービスインスタンスの生成方法

|プロパティ|概要|
|-|-|
|useClass|指定されたクラスを、注入のたびにインスタンス化|
|useValue|指定されたオブジェクトを常に引き渡す（同じインスタンスを使いまわす）|
|useExisting|指定されたトークンのエイリアスを生成|
|useFactory|指定されたファクトリー関数で、注入の際にオブジェクトを生成|

使用例

```use.component.ts
@Component({
  selector: 'app-use',
  templateUrl: './use.component.html',
  styleUrls: ['./use.component.scss'],
  providers: [
    { provide: UseService, useValue: new UseService() }
  ]
```

~~モジュール全体で一つのサービスインスタンスを使うには、ルートモジュールまたはbootstrapModuleメソッドでサービスを登録する~~
もっと簡単な方法がある。
サービスのprovidedInプロパティを'root'に設定すると、アプリ全体で一つのインスタンスが使いまわされる。
このように一つのインスタンスを使いまわす設計を**シングルトンデザインパターン**と呼ぶ。
Angularではサービスを作成するとデフォルトでprovidedInプロパティに'root'に設定されて、アプリ全体で使われるインスタンスが一つになる。


```use.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class UseService {
  created: Date;

```


bootstrapModuleメソッドでサービスを登録する場合
※私が学習に使用したテキストのバージョンが古かったため下記の方法を記載していますが、Angular公式ではサービスに`providedIn: 'root'`を設定する上記の方法が推奨されています

```main.ts
platformBrowserDynamic().bootstrapModule(AppModule, {
  providers: [
    { provide: UseService, useClass: UseService }
  ]
}).catch(err => console.error(err));
```
ABC103 C - Modulo Summation で笑ってしまった

https://atcoder.jp/contests/abc103/tasks/abc103_c

![abc103_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/cef7536c-3b16-43ab-d726-9dcc1ed69971.png)
![abc103_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/da34a38c-c77c-205f-470f-44a7b04dcc48.png)
![abc103_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/e07684bb-0be7-245e-ef6d-6ec903de0baf.png)

良くわからん。回答を見た。

https://www.youtube.com/watch?v=nVSWen0oM38

思わず笑ってしまった。そんなんあり!?
いや、アリだ、きっと。。

```ModuloSummation.py
N = int(input())
A = list(map(int,input().split()))

ans = 0

for i in range(N):
    ans += A[i]-1

print(ans)
```

***

再チャレンジ。過去のアプローチは丸忘れ状態。
A の最小公倍数-1 を m とすれば
良いと思った。

```abc103c.py
N = int(input())
A = list(map(int,input().split()))
from math import gcd
x = (A[0]*A[0+1])//gcd(A[0],A[0+1])
for i in range(2,N):
    x = (x*A[i])//gcd(x,A[i])
#print(x)
ans = 0
for i in range(N):
    ans += (x-1)%A[i]
print(ans)
```
railsチュートリアル第七章 ユーザー登録フォーム

##ユーザー登録フォーム
今度はユーザー登録フォームを作成しましょう。
signupのページに示したとおり、ユーザー登録ページはまだ空白のままなので、このままではユーザー登録できません。
この節の目標は、登録欄を作成することです。

###form_withを使用する
ユーザー登録ページで重要な要素は、ユーザー登録に不可欠な```情報を入力するフォーム```です。
Railsで```form_with```ヘルパーメソッドを使います。
このメソッドはActive Recordのオブジェクトを取り込み、その```オブジェクトの属性を使ってフォームを構築```します。

ユーザー登録ページ /signup のルーティングは、Usersコントローラーのnewアクションに既に紐付けられていることを思い出してください。
したがって、次のステップは、```form_with```の引数で必要となる```Userオブジェクトを作成```することになります。
必要となる@user変数の定義は、下のようになります。

```rb
class UsersController < ApplicationController
  
  def show
    @user = User.find(params[:id])
    # データベースからユーザー情報を取り出す
  end
  
  def new
    @user = User.new
    #新しくユーザーオプジェクトを作成する
    # オブジェクトの属性をつける
  end
end
```
フォームそのものは下に示します。7.2.2で詳しく触れますが、まずはSCSSで見栄えを整えてみましょう。
```box_sizing```ミックスインをリスト 7.2から再利用していることに注目してください。
これらのCSSルールが一度適用されると、ユーザー登録ページは図 7.13のようになります。

####新規ユーザーのためのユーザー登録フォーム
app/views/users/new.html.erb

```html
<% provide(:title, 'Sign up') %>
<h1>Sign up</h1>

<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <%= form_with(model: @user, local: true) do |f| %>
      <%= f.label :name %>
      <%= f.text_field :name %>
      <!--名前をつける欄を作成-->

      <%= f.label :email %>
      <%= f.email_field :email %>
      <!--email-->

      <%= f.label :password %>
      <%= f.password_field :password %>
      <!--パスワード-->

      <%= f.label :password_confirmation, "Confirmation" %>
      <%= f.password_field :password_confirmation %>
      <!---->

      <%= f.submit "Create my account", class: "btn btn-primary" %>
    <% end %>
  </div>
</div>
```
####ユーザー登録フォームのCSS
app/assets/stylesheets/custom.scss

```scss
/* forms */

input, textarea, select, .uneditable-input {
  border: 1px solid #bbb;
  width: 100%;
  margin-bottom: 15px;
  @include box_sizing;
}

input {
  height: auto !important;
}
```

####演習
1.試しに、ブロックの変数fをすべてfoobarに置き換えてみて、結果が変わらないことを確認してみてください。
確かに結果は変わりませんが、変数名をfoobarとするのはあまり良い変更ではなさそうですね。その理由について考えてみてください。
確認　成功。
setodaNoteCTF - Stegano 100 

#問題

https://ctf.setodanote.net/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/c899affd-f224-0ea5-2df3-be8e12d9801c.png)

#解いてみた

画像をUsaMimiで見てみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/900e717e-18dd-1862-b8c1-b0750dc977ad.png)

XORに変えてみると真ん中に文字列が見えました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/71a20a2e-fbe2-1341-7480-95607b5afe6d.png)

これを入力してみたものの間違い。
ほかにもあるのかもしれません。

ほかのモードも見てみると左上にありました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/87a930af-9e2d-eb7e-401e-6c0105e8ec81.png)

括弧閉じがないので他にもあるはず。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/360c128d-2e05-abe4-5390-341a7e93c3d6.png)

ありました。
見づらくて1とlとかを何度か打ち間違えましたが正解できました。
【個人開発】スマホの傾きを検知して、気になるあの子を転がすだけのアプリを作ってみた。

# **はじめに**
気になるあの子をコロコロしたいという要望を聞いたので、物理的に気になるあの子を転がすスマホ用アプリを作りました。

iphoneだと動作が安定しないので、androidでの利用をお勧めします。
ちなみにipadだと動作が安定していました。

今回は約3日で作成しました。

https://affectionate-bohr-19c20b.netlify.app/


# **構造**
HTML、CSS、JavaScriptのみのお手軽実装。UIフレームワークとしてはbootstrapを使ってます。

# **デプロイ**
netlify

# **作ってみての感想**
javascriptでジャイロセンサーを使ったアプリを作れることを知ってウキウキで着手しましたが、canvasを使っての実装にだいぶ手こずりました。

また、バーにぶつかった時の検知も手動で作っているので、そこにも時間がかかり、リファクタリングが後回しになってしまったので、これから頑張って整えていきたいと思います。

また、私自身androidを使っていたので、iphoneでの動作確認がしっかりできず、周りの人に聞いたところ、なぜか気になるあの子が蛇のように繋がってしまうことがあったり、背景が反映されなかったりしているようです。

これもなんとかしていけたらなと思ってます。

iphoneのiOS13以降はこちらでジャイロセンサーの許可モーダルを作成しなくてはいけなかったので、そちらもいろいろなサイトを参考にさせていただきました。

[https://blog.ikunaga.net/entry/ios-safari-motion-sensor-not-working/#ios13](https://blog.ikunaga.net/entry/ios-safari-motion-sensor-not-working/#ios13)
[http://dotnsf.blog.jp/archives/1076737232.html](http://dotnsf.blog.jp/archives/1076737232.html)

# **おわりに**
暇な時間のお供にどうぞお使いください。

↓暇つぶしにこちらもどうぞ。

https://zen-sinoussi-c18c33.netlify.app/

https://gifted-curran-aecac2.netlify.app/

https://flamboyant-beaver-eb2250.netlify.app/

http://kinokoshindan.herokuapp.com/
【学習記録】HTML 10/5 ３日目

平日はなかなか厳しい。
負けずに続けます。


##CSSで文字の大きさを変える
　font-sizeプロパティを使う
　単位はpx
　
　h1{
　　color: #ff000;
　　font-size: 10px;
　}

##文字種類（フォント）
　font-familyプロパティを使う
　フォント名にスペースがある場合は、” “ で括ること

　h1{
　　font-family: serif;
　}

　p{
　　font-family: “Avenir Next”;
　}

##背景色を変える
　background-colorプロパティを使用
　色の指定方法はcolorプロパティと同じ

##要素のサイズを変える
　横幅はwidth、高さはheightプロパティを使う
　単位はpx

　h1{
　　width: 500px;
　　height: 80px;
　　background-color: #ff000;
　}
[メモ]twitch使ったWebAppのアーキテクチャ草案

勉強したいものを詰め込んだ
バッチ処理はそんな重くないからもしかしたらlambdaに移すかも
APIはGoで書くかPythonで書くか悩み中

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278872/a5018f1a-6b8e-d7ea-8abd-86c4ec8bd22f.png)
Drupal8から9にマイグレーションした作業メモ

PHPカンファレンス2021を見ながら、自分のDrupal8のサイトを9に移行作業したので記録簿として残す。

自分の生活リズムで進捗がないので、動画観ながら平行して移行することとした。

Drupal8から何回かマイグレーションしては行っていた。
composer２回実行して5分立たずにDrupla9化は完了したので、個人サイトも直ぐに終わるもんだと予想していたのだが・・・。

##マイグレーション準備
コアもモジュールもテーマも最新に。
Docker環境にサイトデータを持って来て、取り急ぎマイグレーションしたら画面真っ白で状況が改善しないので調べていくことにした。

[Upgrade Status](https://www.drupal.org/project/upgrade_status)での結果。
![myg2021-10-05-22.20.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59566/11a39e30-b18d-9801-734c-03c14aea20fa.png)
黄色で表示されたモジュール等を整理していく。

[syntaxhighlighter](https://www.drupal.org/project/syntaxhighlighter)モジュールがDrupal9には未対応。
そしてテーマをカスタムした[SASS Bootstrap Starter Kit](https://www.drupal.org/project/bootstrap_sass)が該当した。

[syntaxhighlighter](https://www.drupal.org/project/syntaxhighlighter)モジュールは[CKEditor CodeSnippet](https://www.drupal.org/project/codesnippet)に変更。

MOCHIYAさんのブログを参考に。
[Drupal8 WYSIWYGエディターでソースコード（code）を入力するための機能追加方法]
(https://www.mochiya.ad.jp/blog/drupal_knowledge/detail/91)

https://www.mochiya.ad.jp/blog/drupal_knowledge/detail/91

最新だと動かないと嫌なので一つ前のでバージョン`codesnippet_4.15.1`を/librariesにCodeSnippetを設置しました。

またDrupal8の[SASS Bootstrap Starter Kit](https://www.drupal.org/project/bootstrap_sass)は下記のように表示され、適用できない。

```
Hoge 8.x-1.6
SASS Bootstrap Barrio SubTheme.
This theme is not compatible with Drupal 9.2.6. Check that the .info.yml file contains a compatible 'core' or 'core_version_requirement' value.
```

ご指摘通りにテーマの.info.ymlに互換性あるように追記する。

```themes.info.yml
core_version_requirement: ^8 || ^9
```

残りの有効になっていないモジュールやテーマをディレクトリから削除すると100%になったので準備完了。
![myg2021-10-05-22.31.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59566/ec6c2d2f-f82b-c096-ef6a-d5fee084452b.png)

移行する前にこちらのコマンドを実行。

```
composer require 'drupal/core-recommended:^9' 'drupal/core-composer-scaffold:^9' 'drupal/core-project-message:^9' --update-with-dependencies --no-update
```

composer.jsonを確認すると下記のように変更される。

```composer.json:
        "drupal/core-composer-scaffold": "^8.9",
        "drupal/core-project-message": "^8.9",
        "drupal/core-recommended": "^8.9"
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　↓
        "drupal/core-composer-scaffold": "^9",
        "drupal/core-project-message": "^9",
        "drupal/core-recommended": "^9",
```

下記コマンドでマイグレーションを実行。何もなかったらDBを更新します。

```
# composer update
# drush updatedb
```

Drupal9への移行は完了した。

カスタムしたメニューが表示されないのが確認できたら、マイグレーションは失敗でやり直した方がいいだろう。

##移行を終えて

実は`drupal/legacy-project`で動いていたのを`drupal/recommended-project`で動かしたかったが、隙間時間で問題解決するまで時間が掛かり`drupal/legacy-project`のまま。
時間を見つけて`drupal/recommended-project`に切り替えたい。

##参考リンク
https://www.drupal.org/docs/upgrading-drupal/upgrading-from-drupal-8-to-drupal-9-or-later
【Angular】同コンポーネントリロード時、パラメータ数が固定ではない場合のリロード方法

# 概要
共通部品から画面遷移を行いたいとき、コンポーネントは同じだが、パラメータ数が固定ではなく変化するときの処理で詰まった経験があるので備忘録としてメモ

# 検証環境
* Angular CLI: 11.2.10
* Node: 14.16.1
* OS: win32 x64

# ソースコード
必要なモジュールをインポートする

```ts
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute  } from '@angular/router';
```

インポートしたモジュールをコンストラクタで設定する

```ts
constructor(private readonly router: Router, private readonly route: ActivatedRoute) { }
```

ngOnInit()でURLのパラメータ情報をMapに格納する

```ts
ngOnInit(): void {
  // 現在のURLにパラメータが存在していた場合のみforを回す
  if (this.router.url.indexOf('?') !== -1){
    // URLのパラメータをMapに格納する
    for (const key of this.route.snapshot.queryParamMap.keys) {
      this.paramMap.set(key, this.route.snapshot.paramMap.get(key));
    }
  }
}
```

画面遷移の要素（ボタンなど）をクリックしたときに呼ばれるメソッドに追加していく
同じURLに遷移する場合ngOnInit()が呼ばれないという記事※1を見たので呼ばれるように以下の2つを設定する

```ts
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
this.router.onSameUrlNavigation = 'reload';
```

NavigationExtrasのqueryParamsを設定するためにパラメータ情報が格納されているMapをObject型に変換する
MapをObject型に変換するやり方はJavaScriptバージョンによってやり方が違うので環境に合わせた実装方法を選択する

***ES2019以降***のJavaScriptのバージョンでは以下のように変換ができる

```ts
queryParams: Object.fromEntries(this.paramMap)
```

***ES2019以前***のJavaScriptのバージョンでは以下のように変換できる※2

```ts
queryParams: Array.from(this.paramMap).reduce((obj, [key, value]) => (Object.assign(obj, { [key]: value }) ), {})
```

要素をクリックしたときに呼び出されるメソッドの全体像としては以下のようになる

```ts
clickComponentReload(){
  // 現在のURLを取得する
  const currentURL = this.router.url;
  // リロード時ngOnInit()が呼び出されるように設定
  this.router.routeReuseStrategy.shouldReuseRoute = () => false;
  this.router.onSameUrlNavigation = 'reload';
  // 現在のURLにパラメータが存在していた場合
  if (this.router.url.indexOf('?') !== -1){
    const navigationExtras: NavigationExtras = {
      // queryParamsにパラメータの情報を格納する
      queryParams: Object.fromEntries(this.paramMap)
    }
    // パラメータの直前までカットする
    this.router.navigate([currentURL.slice(0, currentURL.indexOf('?'))], navigationExtras);
  } else {
    // 画面にパラメータが存在しない場合現在のURLを渡す
    this.router.navigate([currentURL]);
  }
}
```


# まとめ

現在のURLからパラメータを取得することで、パラメータが固定されていなくてもパラメータを自動で取得できるので汎用的に使えます。

# 参考

※1 同じURLにルーティングする際にngOnInitを呼び出すようにする https://qiita.com/bass/items/d692a3f15964e7b5c0ba
※2 Convert ES6 Map to Object Literal https://gist.github.com/lukehorvat/133e2293ba6ae96a35ba
PowerShellでPDFからXDWファイルを作成する

##はじめに
個人で使用される方はあまりいないでしょうが、会社にFujiXeoxの複合機が導入されているとDocuWorksDeskもインストールされていることは多いかと思います。
よんどころない事情でPDFからXDWの定期変換を組む必要が生じたので備忘として記載します。
##前提
DocuWorksはFujiXeoxから、APIが無償で公開されています。
下記サイトからSDKをダウンロード可能です。（要ユーザー登録）
https://direct-fb.fujifilm.com/ap1/dc/docuworks/ja/dl/list.jsp

.Net版も存在するので、最も手軽なPowerShellでこれを利用します。

##環境
Windows 10pro 10.0.17763
VSCode　1.60.2
PowerShell 5.1
DocuWorks Desk 8.0.7
DocuWorks Development Tool Kit 8

※蛇足ですが合致するバージョンのDocuWorks Deskが必須です。

##解説
ダウンロードしたSDKを解凍し、dwsdk805jpn>dotNET>binと潜った先にある「Xdwapiwn.dll」が.Net用のDLLファイルです。

解凍したフォルダ直下にあった「XDWAPI_dotNET.xdw」が.Net版のリファレンスです。
それによれば`XDW_CreateXdwFromImagePdfFile`が一番それらしいです。
ですがこれで確実に変換できるのはFujiXeoxの機器から生成されたPDFのみです。

そこで`XDW_BeginCreationFromAppFile`を利用します。
こいつはPDFファイルを関連付けられているアプリケーションを開き、DocuWorksPrinterで印刷してくれます。
DocuWorksPrinterは印刷対象の文書をXDWとして出力するので、結果XDWへの変換が叶います。
`XDW_BeginCreationFromAppFile`は非同期実行なので、`XDW_CREATE_STATUS`オブジェクトに格納される進捗状況を確認し、完了後に`XDW_EndCreationFromAppFile`で処理を終了する形になります。
最低限の処理を記載すると下記のようになります。

```PowerShell:PDFtoXDW.ps1
##DLLファイルを読み込む
Add-Type -Path "C:\dll\Xdwapiwn.dll"

##ファイルの場所
$PDFPath="C:\InputPDF.pdf"
$XDWPath="C:\OutputXDW.pdf"

##タイマー
$SleepTime=0

##生成されるXDWのハンドル
[ref]$Handle=[FujiXerox.DocuWorks.Toolkit.Xdwapi+XDW_CREATE_HANDLE]::new()
##PDFからXDWを生成
[FujiXerox.DocuWorks.Toolkit.Xdwapi]::XDW_BeginCreationFromAppFile($PDFPath,$XDWPath,"FALSE",$Handle)
##生成状況のステータスを格納するオブジェクト
[ref]$Status=[FujiXerox.DocuWorks.Toolkit.Xdwapi+XDW_CREATE_STATUS]::new()
##一秒単位で生成状況を監視する
do {
    ##生成状況を$Statusに格納
    [FujiXerox.DocuWorks.Toolkit.Xdwapi]::XDW_GetStatusCreationFromAppFile($Handle.Value,$Status)
    
    ##一秒まつ
    Start-Sleep -Seconds 1
    ##タイマーに累積秒を記載
    $SleepTime+=1
    
    ##60秒で生成できなかったら処理終了
    if ($SleepTime -ge 60) {
        Write-Host "生成できんかった"
        [FujiXerox.DocuWorks.Toolkit.Xdwapi]::XDW_EndCreationFromAppFile($Handle.Value)
        Exit
    }
    ##Phase=8が完了なので8になるまでループ
} while ($Status.Value.Phase -ne 8)

##処理を終了
[FujiXerox.DocuWorks.Toolkit.Xdwapi]::XDW_EndCreationFromAppFile($Handle.Value)
```
##注意
`XDW_BeginCreationFromAppFile`はPDFであれば、関連付けられているアプリケーションを経由せずに出力可能らしいのですが私の環境では今のところうまくいかず……。
##参考サイト
https://www.miyazakidenshikiki.jp/solution/docuworks-advice/category2/aboutDocuWorksAPI.html
AWS TimestreamというDBのざっくりまとめ

## どういうDB？
高速かつスケーラブルなサーバーレス時系列データベースサービス。
完全マネージド型であるためサーバーの管理は不要。
リレーショナルデータベースの最大 1,000 倍の速度と 10 分の 1 のコストで簡単に保存し、分析できる。

## どう使われる？
IoT および運用アプリケーションに適したDB
時系列データを溜めて、可視化・分析したいとき
天気や株価などなど

## 特徴は？
- 低コストで高パフォーマンス
- 自動スケーリングによるサーバーレス
- データのライフサイクル管理
- 簡素化されたデータアクセス
- 時系列専用
- 常時暗号化

## 調べてみた感想
安くて高パフォーマンスなんだけど、時系列専用ということで用途はかなり限られてしまいそう
IoTなど、シンプルなデータを利用してプログラムを動かすといったことがメインで
いろんな種類のデータをリレーション貼って管理するなど、複雑なデータ管理はできないのでWEBアプリケーションとかには不向きなのかと思った。

## 参考
https://aws.amazon.com/jp/timestream/
https://www.skyarch.net/column/amazon-timestream/
https://dev.classmethod.jp/articles/amazon-timestream-ga/
画面遷移しても地図の位置座標を維持。sessionStorageを使って制御してみた。

Leafletを使って地図を使ったアプリを作成しいていましたが、画面遷移（あるいはリロード）したときに必ずデフォルトの座標に戻ってしまい、使いづらさを感じていました。
そこで、画面遷移しても遷移前に見ていた地図座標を保持したいと思いsessionStorageを使いました。

具体的に実現した方法をまとめてみます。

# 開発環境
Ruby 2.6.5
Ruby on Rails 5.2.6
Leaflet.js 1.7.1

# Leafletの初期設定
ここではLeaflet.jsの導入は省略します。
[Leaflet.js](https://leafletjs.com/)
まずLeafletで地図を表示するためのデフォルトの設定をします。
マップタイルはオープンソースのOpenStreetMapを使用します。

```html:index.html
<div id="mapid"></div>

<script>
 //デフォルトの位置座標とzoomを指定
 var mymap = L.map('mapid').setView([35.680196, 139.766746], 16);

//マップタイルを指定
 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution: 'c <a href="//osm.org/copyright">OpenStreetMap</a> contributors, <a href="//creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
    maxZoom: 18,
    minZoom: 3,
}).addTo(mymap);
</script>

```
デフォルト座標`35.680196, 139.766746`は東京駅を中心にした地図を表示しています。

しかし、この設定だと地図をスクロールして別の地域を表示していても、画面を遷移（またはリロード）する度にまた東京駅に戻ってしまいますよね。アプリによってはこの挙動が不便になる場合もあります。

# sessionStorageとは？
そこでsessionStorageという仕組みを使いました。

sessionStorageとは、JavaScriptを用いてブラウザにデータを保存できる仕組みです。HTML5から導入されたWebStorageの１つです。
ブラウザ画面を開いているセッションにおいてだけデータを保持でき、新しいタブやウィンドウを開くと新しいセッションが開始します。
画面遷移やリロードしてもデータが保持されるのが特徴です。

[sessionStorage](https://developer.mozilla.org/ja/docs/Web/API/Window/sessionStorage)

他にlocalStorageがありますが、こちらはブラウザを閉じてもデータ保持が持続してしまうので、sessionStorageほど気軽には使えないですね。


# sessionStorageで画面遷移前の位置情報を保持する
地図の位置情報をsessionStorageに保持してみます。

まず、現在表示している地図の中心の位置座標をJavaScriptで取得します。
以下のコードを追加します。

```html:index.html
<script>
//下記を追記
mymap.on('move', function(e){
　　　　currentPosi = mymap.getCenter();
  currentZoom = mymap.getZoom();
}
</script>

```
地図の中心座標とzoomの値を変数に格納します。これで地図を動かすたびに、位置座標を取得して変数に保持することができます。


次に取得した位置座標のデータをsessionStorageに保持していきましょう。

sessionStorageに保持するには、キーと値を設定します。
`sessionStorage.setItem('key', value)`

```html:index.html
<script>
mymap.on('move', function(e){
　　　　currentPosi = mymap.getCenter();
  currentZoom = mymap.getZoom();
  //下記を追記
  sessionStorage.setItem('currentLat',currentPosi.lat);
  sessionStorage.setItem('currentLng',currentPosi.lng);
  sessionStorage.setItem('currentZoom',currentZoom);
}
</script>
```
GoogleChromeの検証画面でsessionStorageの値が保持されているかどうかを確認できます。

Application > Storage > sessionStorage > http:~

![sessionStorage.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1464615/e4239da4-6615-a07b-bc3a-486498f4a940.png)

設定したキーと値がセットになって保持されていることが確認できました。
これで画面遷移してもデータを持ち越すことができます。

# sessionStorageの値を受け取り、リロード後の地図に反映

次に画面遷移した時にこの位置座標を受け取り、地図に反映させます。

```html:index.html

<script>
　　var sessionKey = sessionStorage.getItem('currentLat');
 
 //sessionStorageが空だった場合と値が存在する場合で分岐し、デフォルト値を動的に生成
 if( sessionKey == null ){
    var defaultLatlng = [35.678362, 139.715387];
    var defaultZoom = 13;
  } else {
    var defaultLatlng = [Number(sessionStorage.currentLat), Number(sessionStorage.currentLng)];
    var defaultZoom = Number(sessionStorage.currentZoom);
　　　　};
 　var mymap = L.map('mapid').setView(defaultLatlng, defaultZoom);//直書きだった座標とzoomの値を、変数にする

//以下省略

</script>

```

これで画面遷移前の位置情報を、画面遷移後（今回はリロード後）の地図に反映することができました。
ファビコンの設定

<h1>ファビコンの実装</h1>
自分のwebアプリ、サイトには目標となるファビコンを設定したくなりますよね。
今回は少し手間取ったのでメモとして残します。

<h1>ファビコンの作成</h1>
IllustratorやPhotoshopで作れる人は作ってもいいでしょうし、僕みたいに作れない人はファビコン専用の作成サイトとかアイコンの作成でもサイズを変えればファビコンにできるので試してみてください
僕は下のサイトを使いました。
色や、枠なども選べて使いやすかったです！

https://iconmonstr.com/


<h1>HTMLに記載</h1>
ファビコンを設定する時は、htmlファイルのhead内に記載します。

```
  <link rel="icon" href="画像のリンク" >
```

みたいな感じです。画像のリンクか、相対パスなどでも表示できるみたいなのでプレビューなどで見て表示されるものを使ってください。

僕はawsのs3に画像を保存していたので、hrefの引数はawsの画像オブジェクトurlです。
これでファビコン実装完了です！

<h1>各デバイスでの設定</h1>

safariやgooglechrome などのサイトは先ほどのコードで表示できるみたいですが、IEやスマホなどでホームに追加した時は表示されません。

なので、デバイス毎に設定する必要があります。

iphoneのホーム画面用

```
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
```

android用

```
 <link rel="icon" type="image/png" sizes="256x256" href="android-chrome.png">
*sizeは256x256もしくは192x192
```

これで各デバイスの設定は完了しました。

一つ一つ書いていったら面倒ですし、画像のサイズをいちいち変えるのはとても面倒なので、もし数が増えそうだったらファビコンの一括作成サイト等を利用するのがいいかと思います。

僕も利用したのですが、公式の手順にそってみても上手く表示されなかったり、開発環境では表示されたのに本番環境になると何故か表示されない現象に陥ってしまったのでawsからの引用となりました。
ファビコンなんて簡単だって〜と思っていたのですが、結構ハマってしまいました。
正直舐めてました笑
やっぱり触ってみないと分からないので、気になることはどんどんやって行きます！
そしてもっとちゃんとした記事を書くぞ！

記事に間違い等ありましたら教えていただけると幸いです！
setodaNoteCTF - magic_number 80 

#問題

https://ctf.setodanote.net/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/0bc6f97d-dbad-0b78-92b3-9817d3900859.png)

#解いてみた

問題文を見た感じhexなのでファイルをhexで表示させてみたら何かわかるかも。

添付ファイルをhexで見ていると先頭が一致するファイルがありました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/04e34330-4c15-903a-9e37-b6a7a91a010c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/af16a9f6-b0c4-37be-30ef-8138c3a73d74.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/35ee226b-e51d-ec30-86c2-6fba72a3af90.png)

それぞれのファイル名をつなぎ合わせると正解でした。
【Laravel】エラーメッセージの日本語ファイルの用意をコマンドラインで。

Laravelではエラーメッセージを簡単に表示させる機能があるのでとても便利です。

:::note alert
タイトルは必ず指定してください。
:::

↑みたいなやつです！

いつも、エラーメッセージの日本語ファイル公式ページからコピペしていたのですが、コマンドラインでやる方法を見つけたので、共有します。

## コマンドでのエラーメッセージの日本語ファイルの用意

```bash
$ php -r "copy('https://readouble.com/laravel/8.x/ja/install-ja-lang-files.php', 'install-ja-lang.php');"
$ php -f install-ja-lang.php
$ php -r "unlink('install-ja-lang.php');"
```
laravel6やlaravel7の場合は`8.x`の部分を変更してください。
実行後は、`resources/lang/ja/`配下にエラーメッセージの日本語ファイルが作成されています。

- auth.php
- pagination.php
- passwords.php
- validation.php

## configファイルを修正
もしconfigの日本語設定をしていないければ修正してください。

```config/app.php
    'locale' => 'ja',
```

キャッシュも忘れず削除して、再作成をするようにしてください。

```bash
$ php artisan config:clear
```

以上になります。
setodaNoteCTF - F 80 

#問題

https://ctf.setodanote.net/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/201f2488-359b-0603-f0fe-b80d3bbe7f22.png)

#解いてみた

全然わからないです。
最初の行をgoogleで検索してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/3569a55e-1523-84f8-a409-18167a233699.png)

一つ目にhello worldみたいなのが出てきたので中を見てみます。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/481b2aea-8366-b9cb-e550-6d2db361d36f.png)

たぶんこの言語ですね。

URLを見てみると
https://source.test-smoke.org/repos/tools/brainfuck/hello.bf
brainfuckとか拡張子がbfとかあったのでgoogleで検索してみるとbrainfuckという言語があるらしい。



Brainfuck Interpterer and Tape Visualizer
https://fatiherikli.github.io/brainfuck-visualizer/

でweb上で実行できるようなのでやってみる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/305c768e-4a32-c55b-639f-af95aae9ed3e.png)

え！Memory error！

試しにさっきのhello worldを実行してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/d56f0670-c2d1-30e6-e266-6663ab47e895.png)

できた。
このサイトがぶっこわれてるわけではなさそう。

何度やってもメモリエラーになるので他のサイトを探す。
brainfuck interpreter
https://sange.fi/esoteric/brainfuck/impl/interp/i.html

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/6e1ccbce-4023-5628-5cdb-466bc7150ed3.png)