OmniAICreator/Qiita-1.07M huggingface dataset:
return renderについて

# 概要
チュートリアルをやっているときに、return renderが分からなかったのでまとめてみました。

# return renderとは
views.pyで使われるメソッドで、指定されたtemplateをレンダリングして、HTTPレスポンスを返すことです。
初心者の僕にはレンダリングやHTTPレスポンスなど何を言っているのか分からなかったので、まずはその用語から調べてみました。

[参照サイト：OFFICE54](https://office54.net/python/django/views-render-how-to)

![スクリーンショット 2022-03-03 9.21.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1184823/76dab476-f012-b610-3d1d-c256a5efcb48.png)



- HTTPレスポンス
HTTPリクエストに対する返答がHTTPレスポンスです。
あなたが開いているWebページで別のページへのリンクを押したときに、WebページからWebサーバーへリンク先のhtmlを渡すように要求します。 ***この要求をHTTPリクエストと言います。*** Webサーバーは要求を受けて、htmlをWebページへ返します。 ***この返答がHHTPレスポンスとなります。*** 

[参照サイト：「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典](https://wa3.i-3-i.info/word1842.html)



- レンダリング
何らかのデータを元にして表示内容を作ることです。
WebサーバーはHTTPリクエストを受けて、 ***受け取った情報を元にWebページを作成します。*** このWebページをHTTPレスポンスとして返します。この受け取った情報を元に表示することをレンダリングと言います。


[参照サイト：「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典](https://wa3.i-3-i.info/word1359.html)
[参照サイト：Wikipedia](https://ja.wikipedia.org/wiki/%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0_(%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%82%BF))


- 改めてreturn renderとは
htmlページを作成して、HTTPレスポンスとしてWebページに返すことです。

# return renderの使い方
    return render(受け取った第一引数,表示させたいHTML,渡したい変数)

- 受け取った第一引数
これには`request`が大体入っている印象です。ここにはgetまたはpostの情報や、セッション情報が入っています。

- 表示させたいHTML
ここには表示させたいHTMLを指定します。

- 渡したい変数
ここには辞書型のデータを指定します。例えば適当な変数`posts`として、この`posts`にはデータベース操作をして取得したデータを入れます。

# まとめ
`return render`は`views`で使いますが、今回調べていく過程で`views`は`forms`、`models`、`template`とを操作する大事なファイルであり、renderメソッドは指令を出すためにしっかりと理解して使う必要があると感じられました。
Herokuの本番環境でactiveadminにログインできない

## 原因
現在開発しているアプリケーションにてactive_adminを導入した際、デプロイ後、本番環境で管理画面にアクセスを試みる。
![スクリーンショット 2022-02-07 19.28.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/891544/911dda83-13a8-f44c-67d4-7b571d31da8d.png)

あれ、入れない。。。。

単純に本番環境のDBに管理者としてユーザー登録ができていない為アクセスができていない状況。

その時の`seed.rb`には

```rb
AdminUser.create!(email: "設定したアドレス", password: "設定したパスワード", password_confirmation: "設定したパスワード") 
```

と記入されており、ローカル環境では上手くいった為、てっきり本番環境でも`heroku run rake db:seed`したらいけると勘違い;;;

## 解決方法
`heroku consol`でコンソールを起動

```rb
AdminUser.create(:email => "admin@test.com", :password => "password", :password_confirmation => "password")
```

上記のような適当なadmin userを作り、管理者画面にて先程作ったユーザー情報でログイン。

ドキドキしながらログインしてみる。。。

![スクリーンショット 2022-02-07 19.31.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/891544/08f80c30-8c8c-c7f3-985d-e2c49f5119db.png)

無事、解決しました！！！！！
Databricks ReposとAWS CodeCommitを連携する

本書は[DatabricksにおけるAWS CodeCommitを用いたバージョン管理](https://qiita.com/taka_yayoi/items/bdf421d402a95acde4e5)で説明しているDatabricks ReposとAWS CodeCommitの連携手順をウォークスルーするものです。

# AWSでの設定

Databricks Reposと連携するAWSマネジメントコンソールで設定を行います。

## 連携用IAMユーザーの作成

[Git 認証情報を使用した HTTPS ユーザーのセットアップ \- AWS CodeCommit](https://docs.aws.amazon.com/ja_jp/codecommit/latest/userguide/setting-up-gc.html#setting-up-gc-connect-console)で説明されている手順に従って設定を行います。

1. **IAM**に移動し、**ユーザー**にアクセスします。
1. 連携用のIAMユーザーを作成します。
1. **[Grant permissions (アクセス許可の付与)]**で、**[Attach existing policies directly (既存のポリシーを直接アタッチする)]**を選択します。
1. ポリシー**AWSCodeCommitPowerUser**をアタッチします。
![Screen Shot 2022-02-20 at 15.53.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/b6b71f1c-5dd0-57f5-1cab-29748aa01ea4.png)
1. 作成したユーザーの**認証情報**タブを開きます。
1. **AWS CodeCommit の HTTPS Git 認証情報**で**認証情報を生成**をクリックします。後のステップで使用するので、ここで表示される**ユーザー名**と**パスワード**をコピーしておきます。
![Screen Shot 2022-02-20 at 15.56.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/52f1a041-5c20-d9bf-ec3c-7dd55f8bf803.png)

## AWS CodeCommitのレポジトリの作成

1. **AWS CodeCommit**にアクセスします。
1. **リポジトリ**をクリックし、**リポジトリを作成**をクリックします。
1. リポジトリ名を指定して作成します。
1. URLのクローンの**HTTPS**をクリックしてURLをコピーします。
![Screen Shot 2022-02-20 at 15.51.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/c4afe161-712b-3d9c-1591-4fc26aaa2d42.png)

# Databricksでの設定

1. サイドメニューから**Settings > User Settings**にアクセスします。
1. **Git integration**タブを開き、**Git provider**ドロップダウンリストからAWS CodeCommitを選択します。
1. **Git provider username**と**HTTPS Git password**に、[連携用IAMユーザーの作成](#連携用iamユーザーの作成)でコピーしておいたユーザー名とパスワードを入力します。
![Screen Shot 2022-02-20 at 15.49.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/d2d5c2ff-d6af-7418-22bc-ff76af6ba340.png)
1. **Save**をクリックします。

# Reposでの同期

連携の設定が完了しましたので、CodeCommitのレポジトリとの同期を行います。

1. サイドメニューの**Repos**に移動し、自身のユーザー名のフォルダで**Add Repo**ボタンをクリックします。
1. [AWS CodeCommitのレポジトリの作成](#aws-codecommitのレポジトリの作成)でコピーしたURLを**Git repo URL**に貼り付けます。
1. **Create**をクリックします。

これでDatabricksとAWS CodeCommitのリポジトリが同期されるようになります。
![Screen Shot 2022-02-20 at 16.01.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/955aa317-a038-5415-2c19-e1b85ea8b43e.png)

### Databricks 無料トライアル

[Databricks 無料トライアル](https://databricks.com/jp/try-databricks)
kotlin-serialization

## Gradle設定追加
```Groovy:build.gradle
buildscript {
    dependencies {
        // Kotlin Serialization(追加)
        classpath "org.jetbrains.kotlin:kotlin-serialization:1.6.10"
    }
}
```

```Groovy:build.gradle(app)
plugins {
    
    // Kotlin Serialization(追加)
    id 'kotlinx-serialization'
}

dependencies {
    // Kotlin Serialization
    implementation 'org.jetbrains.kotlinx:kotlinx-serialization-json:1.3.2'
}
```


## Kotlin
### Jsonに変換するクラス
```Kotlin:UserInfo.kt
import kotlinx.serialization.Serializable

// @Serializable属性を付与
@Serializable    
data class UserInfo(
    var userName: String,
    var phoneNumber: String,
    var email: String,
)   
```

### Jsonへ変換
```Kotlin:Encode.kt

import kotlinx.serialization.encodeToString
import kotlinx.serialization.json.Json

class Encode {
    fun hoge() {
        val userInfo = UserInfo("Name", "09012345678", "hogehoge@hoge.com")

        val jsonStr = Json.encodeToString(userInfo)
    }
}
【Docker】port is already allocatedエラーを解決する方法

これはDockerもよくわかっていない状態だと、非常にハマります。
というか自分はすごいハマりました。

解決する方法は、簡単です。
エラー文の通りに実行するだけです。

### 解決方法
エラー文には、「Portが既に使われているよ」と書いてあるので
使われているポートを調べて、停止して、再度compose up -d をするだけです。

僕は、ひとつひとつポートを停止しては繋げてを繰り返しましたが、もっといい方法があれば教えていただきたいです。

参考記事・これを見ればできます

https://teratail.com/questions/212664
Angularでmoment.jsの不要なlocaleをwebpackなしで消す方法

`npm i`を終えている段階で

1.  `node_modules/moment/locale` の中身を必要なもの以外削除する  
例えば`ja`のみ残すなら  
` find node_modules/moment/locale/ -type f | grep -v -E 'ja.js' | xargs rm -rf`
2. ビルドする

お疲れさまでした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37384/8c4efc10-b115-2fa1-d152-a5629d5bc532.png)


Angularでwebpack用の諸々を入れたくない、moment.jsもまだ使いたい人向けです。
当然非推奨なやり方ですが、必要な方はどうぞ。
【PostgreSQL】サーバーを起動時にエラーが発生

## エラーの発生内容
```rb
ActiveRecord :: ConnectionNotEstablished
PG::ConnectionBad: could not connect to server: No such file or directory
        Is the server running locally and accepting
        connections on Unix domain socket "/tmp/.s.PGSQL.5432"?
```

## やったこと
- PC自体を再起動 → NGだった
- `psql -V`を実行
 - バージョンが`psql (PostgreSQL) 14.1`
- `brew services list`を実行
 - postgresql が error
- `tail -n 20 /usr/local/var/log/postgres.log`を実行

```rb
2022-02-04 05:55:21.403 JST [4050] FATAL:  database files are incompatible with server
2022-02-04 05:55:21.403 JST [4050] DETAIL:  The data directory was initialized by PostgreSQL version 13, which is not compatible with this version 14.1.
2022-02-04 05:55:31.536 JST [4118] FATAL:  database files are incompatible with server

以下省略
:
:
:

```

## 解決方法
PostgreSQLのメジャーアップデートが原因で，データベースが読めないケースと推察。
以下を順に実行

```
brew services stop postgresql
==> Successfully stopped `postgresql`
```

```rb
brew upgrade postgresql
Warning: postgresql 14.1_1 already installed
```

```rb
rm -rf /usr/local/var/postgres.old

brew postgresql-upgrade-database
==> Upgrading postgresql data from 13 to 14...

省略
：
：

==> Upgraded postgresql data from 13 to 14!
==> Your postgresql 13 data remains at /usr/local/var/postgres.old
```
```rb
brew services start postgresql
==> Successfully started `postgresql`
```

```rb
brew services list
postgresql    started
```

やっぱり互換性が問題だったみたいですね；；
とにかく解決できてよかったーー。
PUT と POST どっち使う？5分で使い分けを確実に覚えよう！

## はじめに

HTTP API の開発における POST と PUT の使い分けは、言うまでもなくこんがらがりやすいところです。PUT メソッドをそもそも使っていない開発者も多いでしょう。しかし、使い分けをある程度理解することで、より表現力のある API 設計ができるようになります。

ここで POST と PUT の使い分けについて紹介します。

## POST と PUT の違い

POST と PUT の根本的な違いは、リクエストに同封されているデータの **意図** です。POST は、リソースの新規作成、バッチ処理開始、データの削除など幅広く使うことができます。それに対して PUT は、使い方がもっと限定的で、主に既存リソースを「置き換える」ために使われます。

## [POST](https://triple-underscore.github.io/RFC7231-ja.html#section-4.3.3)

POST リクエストを受付したサーバーは、送られたデータで **基本的になんでもしていい** です。リソースを作成することも `201 (Created)` 削除することも `204 (No Content)` 非同期的処理を開始することも `202 (Accepted)` キャッシュを利用して既存リソースにリダイレクトすることも `303 (See Other)` 幅広く使うことができます。そのため、基本的に冪等性がないオペレーションで、キャッシュの対象になりません。

POST メソッドは特に、**リソースの新規作成** に使われることが多いです。[RFC 7231](https://datatracker.ietf.org/doc/html/rfc7231) の仕様上、POST リクエストの結果、リソースが作成された場合、サーバーは `Location` フィールドに新規リソースの識別子を記載した `201 (Created)` レスポンスを返すべきとされています。

```
# 新規 articles レコードを作成するリクエスト
POST /articles HTTP/1.1
{
  "name": "Foo",
  "author": "hankehly",
  "content": "123"
}

# id=12 の articles レコードが作成されたことを伝えるレスポンス
HTTP/1.1 201 Created
Location: http://example.com/articles/12
```

新規リソースを作成する場合は、リクエスト送信時に識別子の `id` が分かりません。このように、POST リクエストによるリソース作成は、RDB の `INSERT` オペレーションと似ています。

## [PUT](https://triple-underscore.github.io/RFC7231-ja.html#section-4.3.4)

PUT メソッドの意図は、対象リソースの **置き換え** で、リクエスト送信時に識別子を指定する必要があることから、primary key を指定した [`INSERT ... ON CONFLICT DO UPDATE`](https://www.postgresql.org/docs/current/sql-insert.html "PostgreSQL: Documentation: 14: INSERT") 文と似ています。

```sql
INSERT INTO articles
  (id, name, author)
VALUES
  (12, "test", "hankehly")
ON CONFLICT
  (id)
DO UPDATE SET
  name = "test",
  author = "hankehly"
```

上記 SQL を PUT リクエストで表すと、以下のようになります。

```
PUT /articles/12 HTTP/1.1
{
  "name": "test",
  "author": "hankehly"
}
```

このように、PUT メソッドを使うことによって、サーバー側で保持している対象リソースのデータを **リクエストの同封のデータで置き換える** ように指示できます。同じ PUT リクエストを繰り返しても、対象リソースが置き換わるだけで、レスポンス内容もサーバー側のリソースの状態も変わらないため、冪等性のあるオペレーションです。

PUT の成功レスポンスには、いくつかのパターンがあります。

1. 置き換え後のデータを `200 (OK)` で返す
1. 置き換え後のデータは返さないが、処理が成功したことを `204 (No Content)` で伝える
1. 対象リソースが存在しなかったため、新規作成したことを `201 (Created)` で伝える

```
HTTP/1.1 200 OK
{
  "id": 12,
  "name": "test",
  "author": "hankehly"
}
```

## 終わりに

以上 POST と PUT の基本的な違いについて紹介しました。ぜひ、今後活用して、表現力の高い HTTP API の設計につなげていただければと思います。
JSONデータの構成をツリー構造で出力する

# はじめに
タイトルの通りです。
ネスト構造が深すぎるデータ仕様をドキュメントにまとめないといけないということで、ツールとして作成したpythonのプログラムの改修版です。

# 動作確認環境
- Windows10
- python3.9.4
```
c:\>python --version
Python 3.9.4
```
※まぁ、python3系であれば動くかと、、

# コード
```python:json_2_tree_structre.py
from sys import argv
import json

# 構造が変わったときのインデントスペース数定義
HIERARCHICAL_INDENT = 2
# 型名変換定数定義
REPLACE_KEYS = {"dict": "object", "list": "array"}

# キー名変換(変換)
def replace_key(key_name):
    if key_name in REPLACE_KEYS:
        # 定義にある場合はそのままのキー名を返す
        return REPLACE_KEYS[key_name]
    else:
        # 定義にない場合はそのままのキー名を返す
        return key_name


# データを構造構成で出力
def json_2_tree_structre(data, indent=0):
    # インデント設定
    space = " " * (indent)
    # KeyValueの場合
    if type(data) == dict:
        for key in data.keys():
            # キー名出力
            print(space, key, sep="", end="")
            # 型名出力
            print(
                "\t", "(%s)" % replace_key(type(data[key]).__name__), sep="", end="\n"
            )
            # 再帰処理
            json_2_tree_structre(data[key], indent + HIERARCHICAL_INDENT)
    # 配列の場合
    elif type(data) == list and len(data) > 0:
        # 再帰処理
        json_2_tree_structre(data[0], indent)
    return


def main():
    # 引数チェック
    if len(argv) > 1:
        # ファイル読み込み
        fd = open(argv[1], mode="r")
        data = json.load(fd)
        fd.close()
        # 変換関数実行
        json_2_tree_structre(data)
    else:
        print("args shortage")


if __name__ == "__main__":
    main()

```

# 実行方法
以下のようなJSONファイルがpythonファイルと同じフォルダ内にあるとして、
```JSON:sample1.json
{
  "id": 1,
  "type": "sample",
  "data": {
    "pointsA": [99, 83, 71, 59, 91],
    "pointsB": [78, 69, 98, 87, 74],
    "evaluation": "B",
    "test": {
      "temp1": "test1",
      "temp2": "test2",
      "temp3": "test3",
      "temp4": "test4"
    }
  }
}
```
コマンドプロンプトやpowershell等で
```shell
python json_2_tree_structre.py sample1.json
```
を実行

# こんな感じ
```
id      (int)
type    (str)
data    (object)
  pointsA       (array)
  pointsB       (array)
  evaluation    (str)
  test  (object)
    temp1       (str)
    temp2       (str)
    temp3       (str)
    temp4       (str)
```

# 最後に
型とかタブとかそのあたりの出力はお好みで、、

# 参考
[こちらの方](https://qiita.com/hibit/items/a499efb6f6b934b6eb2b)のプログラムをベースで作らせてもらっています。
Hello!

Oppkeyでは、テクニカルコンテンツを中心とし、製品や企業のサービスへのエンゲージメントを獲得するDevRelを中心としたマーケティングを行っています。

USマーケットエントリーに関わっているこちらの製品

https://www.youtube.com/channel/UCQYZ5DTwMrnd2UxSb-D6jLQ


USでは特にコロナ以降、Theta360改めて注目されています。

例えば、
車のディーラーに出向いて、車を購入したいた市場が、今はネットで車を選び、試乗を一週間してから購入というサービスもあたり前で、ディーラ同士は車の紹介動画をいかに効率的にわかりやすく作れか？が競争力につながっています。
Richo Theta 360は、一回の動画で車内が確認できることから大人気だそうです。


コロナ以降、出歩かず、動画で確認する。。。ということが当然の生活様式としてすでに定着しているとのこと。


まだ、日本では浸透していないDevRel。Oppkeyの活動を紹介していきます。

最後まで、読んでいただき、ありがとうございました！
ActiveModel::MissingAttributeError: can't write unknown attribute `` に悩まされた【Rails】

RailsのAPIを一から作っている時に遭遇しました。ググっても全然引っかからないし「もぅﾏﾁﾞ無理。。。ﾘｽｶしょ。。。」ってなってました。ですが結構基本的なところでポカしてました。

結論から言えば，`primary_key: true`を書き忘れていただけだったのですが。なぜこれでエラーが出たのか考えてみます。

# Railsでprimary_keyのカラムを変える手順

https://guides.rubyonrails.org/active_record_migrations.html#creating-a-table

Railsでprimary_keyを変更する手順は、以下の通りです。

1. `create_table`メソッドに、`id: false`を渡す
1. `create_table`メソッドのブロックに、`primary_key: true`を渡したフィールドを作る

もし`primary_key`自体いらねえよって時は，`create_table`に`id: false`を渡すだけで`primary_key`自体作らなくなります。

お手本は、
```ruby
class CreateUsers < ActiveRecord::Migration[7.0]
  def change
    create_table :users do |t|
      t.string :id, limit: 32, null: false, primary_key: true
      t.string :password_digest, null: false

      t.timestamps
    end
  end
end
```

こんな感じ。

# `validates`とは

`validates`とは、rubyのスクリプト上でデータを検証して、おかしいデータを弾いてDBに書き込まれないようにする、みたいな機能です。

`validates`の中でも`uniqueness: true`に関しては、このバリデーションが走るたびにDBにフルアクセスが走ります。(MySQLなら`EXPLAIN`などを実行してみるとわかります。)　なので、扱いには十分に気をつける必要があります。

加えて余談ですが、RailsのいわゆるFormObjectとよばれる、`ApplicationRecord`を継承していないクラスにおいて、`include ActiveModel::Model`をするクラス内では、`uniqueness: true`を書くことができません。DBにクエリを発行しないvalidation、たとえば正規表現など、しか定義できないのですよね。

# 問題の`MissingAttributeError`

このエラーは、`uniqueness: true`と`id: false`と`primary_key`指定忘れをフルコンボしていた時に出てきました。おそらくですが、save!する時にprimary_keyが内部的に空文字だったのだとおもいます。

もしエラーが出てきて、ググっても何も出てこない時は、大体簡単な設定ミスだったりすることが非常に多いなという体感があります………………
javaScript82_Math

Mathは構造関数ではない。
Mathはツールに属し、中には数学に関する計算方法と属性などが入っています。
そのため、Mathを使う時に、新しいオブジェクトを作る必要はありません。
直接使うことができます。
注意：大文字で書いた属性は全部変わらない値です。例：PI
console.log(Math.PI);

abs()は数値の絶対値を計算することができる。
console.log(Math.abs(-1));
結果は１になります。

Math.ceil()
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/12fe6a64-8534-5f40-e885-033a3873532f.png)
Math.floor()
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/e8a18f25-a9dd-8303-0df3-a302720944fc.png)
Math.round()
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/910a872e-a3f2-f114-af6d-06d6a5726ecc.png)
Math.random()
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/2df94cc8-6fa2-da0f-5a5d-8fbbef54e030.png)
Math.Max(),Math.Min(),Math.pow(),Math.sqrt()
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1067004/69ffeaf6-4a6a-0b02-3f28-a03c72d365be.png)
PHPデフォルト引数値


関数を定義する際にデフォルト値を引数に渡していれば呼び出す際に引数を渡さなくとも渡したデフォルト値が返ってくる。
-->試しにdate()関数から得られる月、日、曜日を渡そうとしたが、エラー。

PHPマニュアル曰く、デフォルト値は定数式でなければならないとのことだったので今後忘れないように気を付ける。
https://www.php.net/manual/ja/functions.arguments.php#functions.arguments.default
日時にてデータを抽出する際にハマったこと（Snowflake）

## はじめに
Snowflakeのデータを**日時にて抽出する際**に想定した出力が得られないことがあったので，解決策と共に書きたいと思います．

## 準備
まず初めにデータ抽出元のテーブルを作成します．（データベース・スキーマは作成済みとする）
ここでは単純なid・created_at・titleの3つで構成されているテーブルを作成しています．

```sql
create or replace table test_table(
    id number autoincrement,
    created_at TIMESTAMP_TZ,
    title string
);
```

中身を確認してみます．何もデータを挿入していないため空です．

```sql
select 
    * 
from 
    test_table;
```

次にランダムなデータを作成し，そのデータを挿入してみます．
なお日時に関しては**UTC**タイムゾーンにて挿入します．

```sql
insert into test_table(created_at, title)
select 
    dateadd(
        hour,
        row_number() over (order by true) - 1,
        '2020-01-01T00:00:00Z'::timestamp_tz
    ),
    randstr(10, random())
from table(generator(rowcount => 100000));

```

> ランダムなデータを挿入するSQLとして下記URLに記載されているSQLを少し書き換えて利用しています．
> [Snowflake でダミーデータを生成する](https://zenn.dev/indigo13love/articles/6c3a3b234e5279)

## 抽出してみる
日時で抽出してみます．

```sql
select 
    * 
from
    test_table
where 
    created_at between '2020-01-01 00:00:00' and '2021-01-01 00:00:00';
```

結果を降順にソートした結果が以下の通りになります．**なぜか範囲外のデータ**が含まれています．
![qiita_snowflake_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/949737/717cae28-f444-4704-3613-9d5638156391.png)

## 原因
データの**タイムゾーン**とクライアントの**タイムゾーン**がずれていることが原因です．
日時データは**UTC**で入れています．しかしクライアントのタイムゾーンを下記のSQLを用いてみてみると…

```sql
show parameters like '%timezone%';
```

![qiita_snowflake_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/949737/c56993ee-0a9e-9d91-5d93-5e2f7d83fd9a.png)

**何故か**アメリカ（ロス）のタイムゾーンになっており，データのタイムゾーンとクライアント側のタイムゾーンがずれています．

## 解決策
### 一時的な解決策
セッションにおいてタイムゾーンを**UTC**に変更することでそのセッションにおいては解決することが出来ます．

```sql
alter session set timezone = 'UTC';
```

### 恒久的な解決策
**全ての日時データ**がUTCで入っていて，全てUTCにて見たい！という人はアカウントに設定されているタイムゾーンを**UTC**に変更することで，恒久的に解決することが出来ます．

```sql
alter account set timezone = 'UTC';
```

### 確認
先程と同じように日時で抽出してみます．

```sql
select 
    * 
from
    test_table
where 
    created_at between '2020-01-01 00:00:00' and '2021-01-01 00:00:00';
```

結果を降順にソートした結果が以下の通りになります．範囲外のデータが**きちんと除外**されています．

![qiita_snowflake_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/949737/5fd21430-e073-475c-3d8b-84c1876c2fdd.png)

## おまけ
### タイムゾーンをデフォルトに戻す方法

```sql
alter session unset timezone;
```

```sql
alter account unset timezone;
```


## まとめ
- **きちんとデータのタイムゾーンとクライアントのタイムゾーンを確認しておこう**
- **Snowflakeに限らず**データの時刻とクライアントの時刻がずれているということはあるのできちんと確認しておこう


## 参考文献
- Snowflake でダミーデータを生成する
    - https://zenn.dev/indigo13love/articles/6c3a3b234e5279
- Snowflakeドキュメントへようこそ — Snowflake Documentation
    - https://docs.snowflake.com/ja/
検証ツールでは問題ないのに、スマホのみフッターが下に固定されない


コンテンツが少ない際に、フッターの下に不自然な空白が発生してしまうので下記のサイトを参考に実装してみました
[フッターをページの最下部に固定](https://qiita.com/d0ne1s/items/5c629bc543e70ed2bf98)

```html
<body>
  <header>ヘッダー</header>
  <main>コンテンツ</main>
  <footer>フッター</footer>
</body>
```

```css
body {
  display: flex;
  flex-flow: column;
  min-height: 100vh;
}
main {
  flex: 1;
}
```

すると、PCの検証ツールでスマホ版のサイトを表示したらフッターが一番下に来ますが、
スマホでサイトを開いてみると、一番下にフッターが固定されず、フッターの下に不自然な余白が出来ていました。
AndroidやiPhone、SafariやChrome, Firefoxで試してみても同様の現象が確認できました。

この画像はM1 Macbook Air(Chrome), OPPO Reno A(Chrome)で表示させたものです。
[![Image from Gyazo](https://i.gyazo.com/d56a5f19a1dc0edeac1cac71d2991d55.jpg)](https://gyazo.com/d56a5f19a1dc0edeac1cac71d2991d55)

## 対処法
CSSを下記のように修正

```css
body {
  display: flex;
  flex-flow: column;
  min-height: 100vh;
}

 /*修正箇所*/
footer{
  margin-top: auto;
}
```

Flexboxとmargin: auto;の組み合わせで、Flexアイテムに自動マージンを適用すると、
そのマージンは適用される方向に応じて、Flexコンテナ内の余分なスペースを占有するように
自動的に拡張されます。

なので、margin-top: auto;をfooterにあてることでコンテンツが少ない場合、
footerの上に自動で余白が作成され、footerが一番下に表示されるという仕組みです。

最初のflex: 1;も自動で余白を作成するので役割は変わりません。

## まとめ
直接的な問題点はわかりませんでしたが、「flexbox スマホ 不具合」で検索したところ
バグが多いという記事がいくつか出てきましたので、その影響はあるかも知れません。
原因がわからない場合は、やり方を変えてみるのが大事ですね。

もし、原因がわかる方がいらっしゃれば、教えていただけると幸いです。

### 参考サイト
[フッターをページの最下部に固定](https://qiita.com/d0ne1s/items/5c629bc543e70ed2bf98)
[CSSでfooterを固定する方法３つを解説！【初心者向け】](https://webukatu.com/wordpress/blog/11208/#Flexboxfooter)
[CSS Flexboxとmargin: auto;の自動マージンがどのように相互作用するか、両端揃え・右寄せの実装テクニック](https://coliss.com/articles/build-websites/operation/css/css-flexbox-and-auto-margins.html)
【GAS】コードから追加したトリガーが無効になるやつの超簡単な回避方法

## 概要
GoogleAppsScriptで毎回定時にスクリプトを実行したくて、実行されるたびに次のトリガーをセットするコードを書いたところ、２回目が実行されず「このトリガーは無効になりました。原因は不明です。」という表示が？

ググってみたら似たような事例があるようで、V8ランタイムのバグなんだとか。

複数のページで紹介されていた回避方法は、V8ランタイムを無効にするか、コードをデプロイしWEBアプリとして実行するというもの。

V8無効はなんか嫌だしWEBアプリってのも面倒だなぁ・・・と別の方法を試したところ、あっさり解決したので投稿。

## 方法
エラーに共通しているのが、最初の実行を手動で行っているという事。

WEBアプリからの実行で回避する方法もそうだけど、もしかして初回を手動で実行しなければ行けるんじゃね？と思い試してみたのが次の方法。

もったいつけてみたけど超簡単で **最初の実行をトリガーから実行** しただけ。

## もうちょっと詳しく
例えばこんなコードを作ったとする。

```javascript
function set_trigger() {

  var triggers = ScriptApp.getProjectTriggers();
  for(var trigger of triggers){
    if(trigger.getHandlerFunction() == 'set_trigger'){
      ScriptApp.deleteTrigger(trigger);
    }
  }

  myFunction();

  var time = new Date();
  time.setMinutes(time.getMinutes()+1);
  ScriptApp.newTrigger('set_trigger').timeBased().at(time).create(); 
}
```

`set_trigger`を実行すると、`set_trigger`がセットされたトリガーを削除、`myFunction`を実行、新しく`set_trigger`を実行するトリガーを１分後にセットする。
（`myFunction`は何でもいいので省略）
これで、１分毎に`myFunction`が実行されるはず・・・。

だけど「このトリガーは無効になりました。原因は不明です。」となってしまう。回避するには概要で書いた方法が一般的。

### 無効になる場合
①手動実行
②トリガーがセットされる
③なぜか無効になる

### 回避できる場合
①WEBアプリで実行
②トリガーがセットされる
③実行され次のトリガーもセット
以降③の繰り返し

### そこで試してみたのが
最初からトリガーで実行すれば、回避できる場合の③からスタートしたことにならないかなと思って、`set_trigger`を時間主導型のトリガーにセットして実行してみた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/708687/ce9dbbbb-0540-b6ce-d1f2-452dd55b990e.png)
こんな画像が証拠になるとは思わないけど^^;
あっさりエラー回避できてしまった。

## 最後に
今回の`myFunction`は、スプレッドシートに実行時間を書き出すだけの簡単なコードで、手動実行からはエラーになり、確かにこの方法でエラーを回避できたわけだけど、他のコードでも必ず回避できるかは検証してないので悪しからず。

試してみたら意外と上手くいくかもよって程度の記事。

### おしまい
Google reCAPTCHAの種類

# reCAPTCHAについて
reCAPTCHAは、Webフォームなどに登録する際、botなどによる悪質なアクセスからWebサイトを守るための機能です。フォームに登録する際、「私はロボットではありません」というチェックボックスをよく見かけると思いますが、これがreCAPTCHAの仕組みの一部です。

reCAPTCHAの例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517906/7a3989c9-9f33-432a-923f-fab71630c63d.png)

##reCAPTCHAのバージョン一覧
reCAPTCHAは現在、v3まで公開されています。botの攻撃に悩まされているサイト運用者へのツールとしての「CAPTCHA」機能と、その判定データを有効活用するという意味を込めて「reCAPTCHA」という名前が採用されました。v1はbotではないと判断するための文字認証が複雑化し、人間でも読み取ることが難しくなったため、提供は終了しています。

### reCAPTCHA v1

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517906/af3d6d29-8fcc-a244-bb58-bf5aedaffef6.png)
reCAPTCHA v1は、歪んだ英数字をユーザーに提示し、入力させるものです。一昔前までは、「botが歪んだ文字を認識するのは難しいだろう」と言われていましたが、最近はbotの性能が上がったため、reCAPTCHA v1は破られるようになった為、現在では非公開となっています。

### reCAPTCHA v2

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517906/c45dd34d-fa1f-733a-aa26-f262bb8475f6.png)

reCAPTCHA v2はチェックボックスをクリックした際に、BOTによるアクセスの可能性がある場合、お題に出されている画像に当てはまる信号や車を選択して認証します。

### reCAPTCHA v2 invisible
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517906/ee29e675-0161-c473-4b74-503f1de869a7.png)


reCAPTCHA v2 invisibleは、reCAPTCHA v2から「私はロボットではありません」というチェックボックスを無くしたものです。reCAPTCHA v2 invisibleは、invisible（目に見えない）という名前の通り、ユーザーに「reCAPTCHAがあるな」と意識させない作りになっています。

reCAPTCHA v2 invisibleの挙動は、ユーザーが送信ボタンを押した際、BOTによるアクセスの可能性がある場合、v2同様パネルを選択しての認証を行います。


### reCAPTCHA v3
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517906/69eb09e4-7427-979a-c009-c651ff2db7ac.png)

見た感じはinvisibleと変わりませんが、reCAPTCHA v3は最新版のreCAPTCHAです。reCAPTCHA v3は、ユーザーが人間かどうかを判断するために、ユーザーに何らかのアクションを求めることはありません。つまり、v2のようなパネルが表示され選択することが必要なくなります。

機械学習によってreCAPTCHA v3は、ユーザーがbotか人間かを自動で判断し、reCAPTCHA v3は、人間とbotのWebページ上の行動を機械的に学習し、人間のパターンとbotのパターンを判別しています。

reCAPTCHA v3は、ユーザービリティを一切損なうことなく、botを検知できます。そのため、特に理由がない限り、reCAPTCHA v3の導入をおすすめします。
AWS公式資料で挑むSCS認定(2)-作戦を立てる

[前回] [AWS公式資料で挑むSCS認定(1)-計画を立てる](https://qiita.com/mingchun_zhao/items/c7e8075ea87765e90f30)

## はじめに

カーリング女子のチーム力、憧れますね。
声を掛け合う、ミスしても激励し合う、信頼関係があってからこそでしょうか。
笑いながら試合を楽しむ姿に心が和みます、「そだねー」も聞けてよかったです。

## 試験準備の作戦は「森から木へ」

対象サービスが多岐にわたるので、「森から木へ」準備を進めようと思います。

- 森は、全体像のことで、セキュリティの原則やAWSのセキュリティ戦略を押さえる
- 木は、細部のことで、個々のサービスやツールの機能、それぞれの違いを押さえる

## 「森」セキュリティの一般論

### 情報セキュリティの3原則

[Wikipedia](https://ja.wikipedia.org/wiki/%E6%83%85%E5%A0%B1%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3)から、CIAの定義(米中央情報局のことではありません)

- 機密性(Confidentiality)
    - 情報へのアクセスを認められた者だけが、その情報にアクセスできる状態を確保すること
    - 自己解釈: 情報を関係者以外にアクセスさせない
- 完全性(Integrity)
    - 情報が破壊、改ざん又は消去されていない状態を確保すること
    - 自己解釈: 情報を関係者以外に変更・削除させない
- 可用性(Availability)
    - 情報へのアクセスを認められた者が、必要時に中断することなく、情報及び関連資産にアクセスできる状態を確保すること
    - 自己解釈: 情報を関係者が必要時に使えるようにする

### 更に四つ加えた7原則も存在するようです

- 真正性(authenticity)
    - ある主体又は資源が、主張どおりであることを確実にする特性。
    - 自己解釈: 情報を操作しているのが本人であっているか(なりすましではないか)
- 責任追跡性(accountability)
    - あるエンティティの動作が、その動作から動作主のエンティティまで一意に追跡できる事を確実にする特性。
    - 自己解釈: 情報をいつ、だれが、どのように操作したか履歴を辿れるようにする
- 否認防止(non-repudiation)
    - ある活動又は事象が起きたことを、後になって否認されないように証明する能力
    - 自己解釈: 情報を操作した人が後になって「おれはやってないっすよ」と言わせない
- 信頼性(reliability)
    - 意図した動作及び結果に一致する特性
    - 自己解釈: 情報への操作が期待通りの結果となる(故障やバグにより間違った結果にならない)

### 最小権限の原則

[Wikipedia](https://ja.wikipedia.org/wiki/%E6%9C%80%E5%B0%8F%E6%A8%A9%E9%99%90%E3%81%AE%E5%8E%9F%E5%89%87)から、
「最小権限の原則とは、情報セキュリティや計算機科学などの分野において、コンピューティング環境の特定の抽象化レイヤー内で全てのモジュール（主題によっては、プロセス、ユーザー、プログラム）がその正当な目的に必要とされる情報と計算資源のみにアクセスできるように制限する設計原則である」

ようは、アクセス制御における権限設定は、必要最小限に留めておきましょう、とのことです。例えば、ネットワーク通信におけるポート番号設定は、実際使用するポート番号以外をすべて禁止する。

### AWSのセキュリティ戦略はどうよ

[AWSクラウドの戦略的なセキュリティ](https://aws.amazon.com/jp/security/?nc1=f_cc)に、以下方針4点が記載されていました。

1. 防止
    - 計画済みAWSをスムーズに導入するために、ユーザーのアクセス許可とID、インフラストラクチャ保護、データ保護対策を定義します。
    - 自己解釈: 不正アクセスを防止する、データを保護する
2. 検出
    - ロギングとモニタリングサービスを使用して、組織のセキュリティ状況を可視化します。これらの情報を、イベント管理、テスト、監査のためのスケーラブルなプラットフォームに取り込みます。
    - 自己解釈: アクセスログを監視する、不正アクセスを検出する
3. 対応
    - 自動化したインシデント対応と復旧で、セキュリティチームの主な焦点を対応から根本原因の分析に移行できます。
    - 自己解釈: インシデント発生したら、迅速に原因分析し対策を立て、事業継続を図る
4. 修復
    - イベント駆動型の自動化を活用して、AWS環境をほぼリアルタイムで迅速に修復および保護します。
    - 自己解釈: サイバー攻撃などによりシステムやデータが破壊されても、迅速に復旧可能に

つまり、AWSが提供する様々なセキュリティ関連サービスやツールは、上記方針のいずれかを実現するために実装された手段に過ぎないとのことでしょうか。
試験準備の全過程において、常に上記方針に立ち返って、関連サービスやツールの目的や機能を理解したほうがよさそうです。

## 「木」はどうする?

下記順で勉強進めようと思います。

1. 試験対象のサービスと機能
2. 試験対象のツール・テクノロジー・概念
3. 推奨されるAWSに関する知識

## おわりに

「森から木へ」と試験準備の作戦を立て、「森」の全体像を確認しました。
次回から、「木」の細部を順序良く通してみようと思います。
お楽しみに。

[次回] [AWS公式資料で挑むSCS認定(3)-対象サービス攻略](https://qiita.com/mingchun_zhao/items/3c93d2c1f39ee8badc07)
Python 証券コードを入力すると会社名が出るUI

## 証券コードを入力すると会社名が出るUI
tkinterを使い、証券コードを入力するとその会社名が出るプログラムの作成

入力されたコードが正しいと会社名、それ以外だと「input code」を表示するUIを作ります

まずは必要モジュールをインポート


```python
# モジュールのインポート
import tkinter as tk

import pandas as pd
import csv
```

証券コードと、会社名を取得
[Pythonで証券コードから会社名の取得(Edinetコードリストを利用)]([https://qiita.com/kilowatt/items/db14be70097da269c76d)


```python
with open('EdinetcodeDlInfo.csv') as f:
    reader= csv.reader(f)
    next(reader)
    col = next(reader)
    data = [row for row in reader]
df = pd.DataFrame(data, columns=col)
```

tkinterでまずはwindowを作成


```python
root = tk.Tk()
```

証券コードを入れる`Entry`と会社名を入れる`Label`を作成。
`Entry`にはに入力があった時に検証する`validate='key'`を設定。その時に動作する`vcmd`を設定。
`vcmd`には動作させたい関数(cord_chkという関数を今回は作成します)と、動作させたい関数に渡す引数を設定(今回は入力値を取得するための引き数`%P`を設定)します。


```python
entry = tk.Entry(root, width=10, bg='white',
                 validate='key',
                 vcmd=(cord_chk, '%P'),)
entry.grid(column=0, row=0)

label = tk.Label(root, text='input code', bg='gray')
label.grid(column=0, row=1)
```

vcmdで動作させる関数を、`register`メソッドに定します。


```python
cord_chk = root.register(func_cord_chk) 
```

動作させる関数は以下です。入力が数字でかつ4桁の時に動作させます。
コードが間違えた(リストにない)場合は`input code`を表します


```python
def func_cord_chk(code):
    #4桁の数字の場合はTrue、そうでない場合はFalseに今後変更すること
    if (len(code) == 4) and (after.encode('utf-8').isdigit()):
        code_0 = after + '0'
        company = df[df['証券コード'] == code_0]['提出者名']
        if len(company) == 1:
            label.config(text=company.values[0])
        else:
            label.config(text='input code')
    else:
        label.config(text='input code')
    return True
```

すべてを動作させるコードは以下です。


```python
#モジュールインポート
import tkinter as tk
import pandas as pd
import csv

#銘柄コードと、会社名を取得
with open('EdinetcodeDlInfo.csv') as f:
    reader= csv.reader(f)
    next(reader)
    col = next(reader)
    data = [row for row in reader]
df = pd.DataFrame(data, columns=col)

# 入力が数字でかつ4桁の時に動作させる関数
def func_cord_chk(after):
    #4桁の数字の場合はTrue、そうでない場合はFalse
    if (len(after) == 4) and (after.encode('utf-8').isdigit()):
        code = after + '0'
        company = df[df['証券コード'] == code]['提出者名']
        # 会社名があった場合は会社名をLabelのテキストに入力
        if len(company) == 1:
            label.config(text=company.values[0])
        else:
            label.config(text='input code')
    else:
        label.config(text='input code')
    return True

# windowの作成
root = tk.Tk()

# registerの設定
cord_chk = root.register(func_cord_chk) 

# 入力(Entry)、結果(Label)の出力の作成
entry = tk.Entry(root, width=10, bg='white',
                 validate='key',
                 vcmd=(cord_chk, '%P'),)
entry.grid(column=0, row=0)

label = tk.Label(root, text='input code', bg='gray')
label.grid(column=0, row=1)

# 出力
root.mainloop()
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2510470/91dd88bc-099d-0dac-6195-df0cdb7db0ed.png)



トヨタ自動車の銘柄コード7203を入力すると以下のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2510470/aa1111b6-649e-d9d4-5311-2d9f8e7ef6b0.png)
FileMaker あれこれ [初学者]

#FileMakerを業務で使うことになったのでアウトプットしてみた

一般的なショートカットキー

スクリプトモード
```shift+command+s```
レイアウトモード
```command+l```
ブラウズモード
```command+b```
各保存
```command+s```



##スクリプト(レイアウト切り替え)
①スクリプトモード
②+ボタンクリック　名称設定
③右タブのステップ欄に切り替え/移動を開きレイアウト切り替えをダブルクリック
④レイアウト切り替え[元のレイアウト;アニメーション: なし]　　　　　　　←から元のレイアウトをクリック
⑤レイアウト...
⑥遷移させたいレイアウト名を選択
⑦レイアウト切り替え[「レイアウト名」(関連つけられているテーブル);アニメーション: なし]となる。
⑧保存


##レイアウト切り替え(ボタン)
①レイアウトモード
②レイアウトツールバーの左から6番目ボタンを付与できる
③ドラッグでボタンの大きさを調整
④ボタン設定で表示したいボタンの名前を設定
⑤処理をスクリプト実行にする
⑥どこにレイアウトを切り替えるかのスクリプトを選択する




##戻るクリック時、レイアウト切り替えをレコードそのままで遷移させる。
2/20(日)追記↓

①詳細へ移動するスクリプトに変数を設定。
制御>変数を設定　一番上に定義する
名前をグローバル変数にし値をGet(レコード番号)繰り返し1
![スクリーンショット 2022-02-20 15.09.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918688/7542cc88-11df-dead-1d36-ba22f1e1000a.png)




②一覧へ移動するスクリプトに変数を設定。
切り替え/移動>レコード/検索条件/ページへ移動
ダイアログあり:オフ; 先ほどつけた変数を引数に
![スクリーンショット 2022-02-20 15.12.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/918688/c759ce26-b6da-13c2-02bc-756955be1697.png)



今後覚えていったことをアウトプットしていきます。
簡単に表を見やすくする配色術

![FHQkJXDaIAUx7dJ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565276/4ede538b-bd45-1251-2333-d9898a24aabb.jpeg)
![FHQkJvfakAEOsLD.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565276/a7a6ab25-1580-b91a-89c8-93503e32eee8.jpeg)
![FHQkKEjaUAAcf7_.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565276/919e9c27-e741-6875-cbcf-7a58deffe34b.jpeg)
![FHQkKcCakAEbFW6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565276/e39bc163-9aac-920d-fc46-bbe34fbe9829.jpeg)
![FHVcFDlagAElMgS.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565276/d4d17bc9-7a64-7beb-051e-98bf9d0ae3df.jpeg)
![FHVcFZraAAAWF2f.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565276/56a6841b-3072-9795-550f-465ac2e9f542.jpeg)
![FHVcF2aaUAcWU93.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565276/101ae24b-6bfd-9f41-0011-2f09072cafba.jpeg)
![スクリーンショット 2022-02-20 13.33.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565276/0dd1a422-132d-2ca7-18c6-89194da55cf7.png)

あわせて読んでおきたい記事
https://note.com/mochineko_note/n/n4ffa4ef70fdd
EC2,LightsailにBitnamiでたてたWordpressの.htaccessを有効にする際に/app/がない

備忘録的なものなので簡単な記事ですが。

BitnamiでたてたWordpressにBasic認証などで.htaccessを使いたい場合、
/app/以下の場所でよく説明されている記事を見かけるが、
/app/なんてないよ〜という方は

`/opt/bitnami/apache2/conf/vhosts/wordpress-vhost.conf`

かもしれません。

6行目付近のAllowOverride部分

```
AllowOverride None
```
を

```
AllowOverride All
```
にして、再起動してみてください。


あくまで自己責任でお願いします。
Playgroundsで試す時には実行部分を関数で囲んだ方がいい

メモリ周りについてplaygroundsを使って試している日のこと
「`view`のメモリが解放された時，プロパティの`model`のメモリも解放されるはず...」

```Swift
class Model {
    weak var viewController: ViewController?
    init() {}
    deinit{ print("model is released") }
}
class ViewController: UIViewController {
    let model: Model
    init(model: Model) {
        self.model = model
        super.init(nibName: nil, bundle: nil)
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    deinit{
        print("view is released") 
    }
}

let model = Model()
var viewController: ViewController? = ViewController(model: model)
model.viewController = viewController
viewController = nil
```

```Swift
view is released
```

「あれ，model is releasedも出力されるはずなのに」

試行錯誤しているうちに，`model`が参照されっぱなしであることに気づきました．

```Swift

func main() {
    let model = Model()
    var viewController: ViewController? = ViewController(model: model)
    model.viewController = viewController
    viewController = nil
}

main()
```
のように関数で囲むことで，期待通りの挙動を確認することができました．
クレヨンしんちゃん(Flutter)

久々にFlutter使ってUIを書いたのでリハビリがてら

# 背景サイズの設定
スマホで動画見るときには綺麗に全画面使ってほしいので`SafeArea`なしでドドーンと表示させましょう

```dart
class OpeningPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: double.infinity,
      width: double.infinity,
    );
  }
}
```

# 色の定義
FlutterにはColor, Colorsクラスがありますがパーセンテージ指定して色を作れないので0〜255の値に変換して定義してあげます(パーセンテージも使えたかもしれないです)

```dart
const topColor = Color.fromARGB(255, 240, 130, 163);
const bottomColor = Color.fromARGB(255, 242, 242, 122);
const titleColor = Color.fromARGB(255, 97, 3, 94);
```

# gradient
Flutterでgradientを使用する際は`gradient`をあてた`decoration`をwidgetに適用します

```dart
class OpeningPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: double.infinity,
      width: double.infinity,
      decoration: BoxDecoration(
        gradient: LinearGradient(
        begin: FractionalOffset.topCenter,
        end: FractionalOffset.bottomCenter,
        colors: [
          topColor,
          bottomColor,
        ],
      )),
    );
  }
}

```


![No Text](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/608715/b0325ab9-3a34-f4f0-2065-50cbcca4f960.png)


いい感じですね

# タイトルの追加
タイトルを追加します


```dart
const titleStyle = TextStyle(
    color: titleColor,
    fontSize: 36,
    decoration: TextDecoration.none,
    fontWeight: FontWeight.bold);

Center(
  child: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('かいはつとちゅうで',
          textAlign: TextAlign.start,
          style: titleStyle.copyWith(fontSize: 16)),
        Text('開発途中で', textAlign: TextAlign.start, style: titleStyle),
      ],
    ),
    Padding(
      padding: const EdgeInsets.only(left: 40),
      child: Text('だいたいプレビュー使わなくなるゾ', style: titleStyle),
    ),
  ],),
)
```


ポイントはcolumnのaxis周りです
SwiftUIとはデフォルト値が異なるのでリストが中央に配置されるようにあれこれ設定します
2行目の行頭ずらしですが今回はPaddingを用いました

# 完成形

![Simulator Screen Shot - iPhone 13 - 2022-02-20 at 05.01.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/608715/1278632f-cb0e-ccc7-7c46-07bcb55f8666.png)


これでFlutterを使ってクレヨンしんちゃんのタイトルコールを作ることができました
いかがでしたか？
エンジニア・PMのための配色講座：グレースケール

![FGcx9s_UYAQzztp.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565276/029e190b-32d2-1969-84a6-395c6801d3d0.jpeg)
![FGcx-IhUUAQ-juh.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565276/13ceae18-0f33-4449-dd34-308bb22e10ef.jpeg)
![FGhw_cWVQAMLEmM.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565276/2122dd6c-47ba-9eb1-1b83-3585f76564a7.jpeg)
![FGhw_aTVkAQ7Tf3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565276/3f802366-cd13-fb6c-5e43-6bff233b9eb7.png)
![FGhw_a1UYAAqLop.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565276/81894c62-03df-e602-6639-ae5a8a532d57.png)
![FGhw_coUcAEL4wm.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565276/efca6d19-c401-f2f6-d483-cb6dd946ff93.jpeg)
![FGnAhcdUYAAGLPL.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565276/b1c14e36-8807-1023-3b0f-e0319ef1d95e.jpeg)
![FGnAh0SVEAIV6Br.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565276/3f2a2156-8023-773f-dd2e-a5a883d580e8.jpeg)
![FGnAiLuVEAQHyP3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565276/ee744e0d-092e-4b9f-1d67-b039b8601aaf.jpeg)

続きはこちら
https://note.com/mochineko_note/n/n4ffa4ef70fdd
Mac OSでC++コンパイラをClangからGCCに切り替える際に，シンボリックリンクの設定がうまくいかなかった．

#この記事の想定読者

MacOSの利用者で，C++のClangからGCCへの切り替えをしたいがシンボリックリンクの設定が上手くいかない人．

#実行環境
機種 : MacBook Pro 2017
OS : Mac OS Monterey ver. 12.2.1
プロセッサ : 2.3 GHz デュアルコア Intel Core i5
メモリ : 16GB 2133 MHz LPDDR3
グラフィックス : Intel Iris Plus Graphics 640 1536 MB


#背景
[Visual studio codeで競プロ環境構築[mac OS]](https://qiita.com/EngTks/items/ffa2a7b4d264e7a052c6)に沿って，ClangからGCCへの切り替えをしていたがうまくいかなかった．

具体的には，

```terminal
$ which g++
/usr/bin/g++
```

が

```terminal
$ which g++
/usr/local/bin/g++
```

に変化するはずだが，変化しなかった．そのためClangからGCCへの切り替えができず．

#解決方法
全ての場合に当てはまるか分からないが，自分の場合は以下のようにして解決した．

まず，

```terminal
$ brew doctor
```

と入力すると，

```terminal
Warning: Broken symlinks were found. Remove them with `brew cleanup`:
  /usr/local/bin/g++
  /usr/local/bin/gcc
```

と出力される．つまり，シンボリックリンクが壊れているから

```terminal
$ brew cleanup
```

と入力しなさい，という警告メッセージが出てきた．そのため`brew cleanup`を入力すると，

```terminal
Pruned 2 symbolic links from /usr/local
```

となり，壊れているシンボリックリンク2つを取り除いたよ，と出力される．
そこで，以下のコードを打って改めてシンボリックリンクを設定する．

```terminal
$ ln -s /usr/local/bin/g++-11 /usr/local/bin/g++
$ ln -s /usr/local/bin/gcc-11 /usr/local/bin/gcc
```

元々の記事では，上記のコードの`g++-11`や`gcc-11`はそれぞれ`g++-9`や`gcc-9`と書かれていたが，（特に何も工夫しなければ）現在はver. 11を使うことになるので書き換えた．

これでシンボリックリンクの設定は完了した．最後に，`which g++`でClangからGCCに切り替わっているかチェックする．

```terminal
$ which g++
/usr/local/bin/g++
```

期待通りの出力が得られたので無事切り替わっていることが分かる．めでたし，めでたし．
StorybookをNetlifyにデプロイする

## はじめに
Reactなどでのフロントエンド開発に[Storybook](https://storybook.js.org/)は欠かせないツールになりつつあると思います。Storybookはコンポーネントカタログや開発ツールとしての機能だけでなく、コンポーネントのデザインレビューにも有用です。ただしデザインレビューの度に、プルリクエストをローカルへpullしてstorybookを起動するのは非常に面倒だと思います。
この面倒くささはNetlifyで解決できます。NetlifyにStorybookをデプロイすればよいのです。
Netlifyを利用するにあたりGithub ActionsなどのCIを導入する必要はありません。設定が簡単な上に、[Deploy Previews](https://docs.netlify.com/site-deploys/deploy-previews/)機能によりプルリクエストのStorybookも勝手にデプロイしてくれます。デザインレビューにもってこいです。さらに公開ホスティングで良ければNetlifyを無料で使えます。
この記事ではStorybookをNetlifyにデプロイする方法（2022/02時点）を紹介します。

### 前提
- 開発しているアプリケーションに[storybookがインストール](https://storybook.js.org/docs/react/get-started/install)されていること。
- `yarn build-storybook`（などのStorybookをビルドするコマンド）が叩けること。

## netlifyにデプロイする
### Netlifyアカウントの作成
（既にアカウントを持っている場合はスキップしてください。）
まずNetlifyアカウントを作成します。作成途中、下のスクショのように`Deploy your first project`という画面が出てくるので、`Import from Git`をクリックし、Storybookをデプロイしたいリポジトリをインポートします。
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210408/621b2477-e4ea-10ee-fa0f-79d9bd40cbbc.png)


### ビルド設定
アカウントを作成しリポジトリをインポートすると、ビルドを設定する画面に遷移するので、`Build command`と`Publish directory`を以下のように設定します。
既にアカウントを持っている場合は、新たにサイトを作成するか、既存のBuild Settingsをいじり、以下の値を設定してください。

|key|value|
|--|--|
|Build command|yarn build-storybook|
|Publish directory|storybook-static|

![tempsnip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210408/d7785339-a164-c3e2-285f-4a34cd7f8c04.png)


以上で設定は完了です。
設定後、Netlifyが自動でProduction branch（デフォルトはmainブランチ）のコードをビルドしStorybookがデプロイされると思います。またプルリクエストを作成したときには、それをトリガーに自動デプロイが走りプレビューが作成されます。GitHubを使用しているなら、デプロイ完了後にBotがNetlifyから吐き出されたURLを教えてくれます（`Browse the preview:`の右）。
![tempsnip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210408/811378e4-91da-62aa-497d-791cbf239c2f.png)


## Q&A
#### Deploy failed due to an error in @netlify/plugin-nextjs pluginというエラーが出る
nextjs用プラグインがNetlifyにインストールされていることが原因です。Pluginsタブを開き、`Essential Next.js`のOptionsから`Uninstall plugin`をクリックし、このプラグインをアンインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210408/1b61dbd1-aa4e-1de3-b06a-494c8966bdfa.png)

その後デプロイを再実行するとこのエラーが消えると思います。

参考：[Cannot deploy Next.js to Netlify. Deploy failed due to an error in @netlify/plugin-nextjs plugin | stackoverflow](https://stackoverflow.com/questions/69831067/cannot-deploy-next-js-to-netlify-deploy-failed-due-to-an-error-in-netlify-plug)

#### nodeのバージョンを指定したい
netlifyに環境変数を設定することでバージョンを指定できます。
例えばnodeのバージョンを14にしたい場合、Build & Deploy > Environmentで`Edit variables`をクリックし、次のようにkeyとvalueを追加します。

|key|value|
|--|--|
|NODE_VERSION|14|

参考：[Build environment variables | Netlify Docs](https://docs.netlify.com/configure-builds/environment-variables/#netlify-configuration-variables)
Slim4で新しく作ったプロジェクトでルーティングが解決しない...？

#問題
Slim4であるプロジェクトから複製した別プロジェクト。
namespaceなどを変更して実行しようとしたが、ルーティング箇所でコントローラが見つからないというエラーが発生。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213142/3bc079d7-8892-cc91-47e5-16eeb69039bc.png)


ルーティング(index.phpに記述)の指定はこう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213142/6fa008bb-41b0-f252-83d2-c9e7f0e96698.png)
Controller自身はこんな感じ。（srcディレクトリ直下に配置）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213142/dd5f1b4e-fa96-80c8-74af-07f16e4d0f6f.png)

composer.jsonのautoload指定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213142/786e379c-a2aa-a4ef-1573-459a5f0192e0.png)



これで /admins にアクセスすると最初のエラーが表示される。

パスの指定もあっているはずだし、はて...:thinking:

#対処
で、いろいろ悩んだ結果、気付いた。
composer.jsonは別プロジェクトから持ってきたもので、autoloadに記載するパスなどを変更したが、反映をしていなかった。

一度以下を実行。

```
$ composer dump-autoload --optimize
```
または

```
$ php .\composer.phar dump-autoload --optimize
```

これで再度、同じパスにアクセスすると...
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213142/e76274a1-ca2c-cd79-b6a3-78c62997d1c2.png)

無事通りました。
ありがとうございました:angel:

composer.json の autoloadを書き換えても、すぐに反映されるわけではない。
しばらく触らず忘れていました。
【Flutter】Error: Member not found: 'packageRoot'.

# iOSのビルドでエラー

Flutterの参考書として購入した本のサンプルを実行しようとしたら以下のようなメッセージが出て、ビルドができませんでした。
自分でプロジェクトを新規作成した場合は、ビルドが成功してiPhoneのシミュレータが起動するのに…。

```
Error: Member not found: 'packageRoot'.
```

なんせFlutterをインストールして参考書を買ってきたばかりなので、右も左もわかりません。
とりあえずGoogle先生に聞いてみました。

|![スクリーンショット 2022-02-20 12.50.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28184/1a085b38-b762-f6b7-32f1-328acbae1e17.png)|
|:-:|

ありがたいことにドンピシャの内容がありました！

https://stackoverflow.com/questions/70389267/error-member-not-found-packageroot-in-flutter

ここに書いてあるように、３つのコマンドを実行することによりエラーが出なくなりました。

```shell-session:
$ flutter channel stable
$ flutter upgrade
$ flutter pub upgrade
```

ちなみに今回購入した参考書はこれ。
2章のサンプルが動いたので読み進めていきます。

https://www.amazon.co.jp/dp/B098X2LZZB/

やっぱり新しい開発環境を構築して使えるようになるには何日かかかるなぁ。
Laravelの謎すぎたエラー「500エラーなのにステータスコード200」

## 現象
Laravelで、エラーが発生しているのに、HTTPステータスコードは200が帰る。

```php
abort(500)
```

でもレスポンス200が帰る。
なんで？nginxの設定？？？

## 原因と解決

phpファイルの頭に空白行があった・・・

```php

<?php
```
discord.js v13 のみでスラッシュコマンドを登録する

## はじめに

スラッシュコマンドとは，下の図のようなコマンドのことであり，v13系のdiscord.jsでbotに実装できるようになりました．
従来botがコマンドを受け取るには，サーバー（ギルド）に書き込まれる文章を監視し続け，任意のコマンドを含む文字列を取得した場合はプログラムを実行させることでコマンドのような機能を実装していました．
しかし，スラッシュコマンドが導入されることでユーザーは使いやすく，開発側は（実装方法にもよるが）プログラムが読みやすく書きやすくなりました．
![名称未設定 1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510882/833af2f7-87dc-d0cc-be6b-94a29d6a08e7.jpeg)
しかし，たいていのスラッシュコマンドの記事では，登録はREST APIを自分で叩いて行う方法が紹介されています．
（[公式のガイド](https://discordjs.guide/interactions/registering-slash-commands.html#guild-commands)でさえそう）

しかし，自分でREST APIを叩かずとも，discord.jsだけでサーバー（ギルド）にスラッシュコマンドを登録することができます．

## 実行環境
node.js(TypeScript) / Discord.js v13.6

## discord.jsのみでスラッシュコマンドを登録

Commands配列はApplicationCommandDataResolvable型（[ApplicationCommandData](https://discord.js.org/#/docs/discord.js/stable/typedef/ApplicationCommandData)型とRESTPostAPIApplicationCommandsJSONBody型の直和型）の配列です．


```typescript:index.ts
import { Client, ApplicationCommandDataResolvable } from 'discord.js';

    const client = new Client({
	    intents: [Intents.FLAGS.GUILDS, Intents.FLAGS.GUILD_MESSAGES, Intents.FLAGS.GUILD_VOICE_STATES]
    });

    const sample: ApplicationCommandDataResolvable = {
		name: 'bgm',
		description: '音楽を再生します．',
		type: 'CHAT_INPUT'
	};
	const Commands = [sample];

	client.on('ready', async () => {
			// ギルドコマンドの場合(開発環境推奨)
			await client.application.commands.set(Commands, 対象サーバーのギルドID);
			// グローバルコマンド登録の場合(本番環境推奨)
			await client.application.commands.set(Commands);
	});

    client.login(botのトークン);
```
以上でプログラムを実行すると，自動的にスラッシュコマンドが登録されます．
手作業であったり，node-fetch, @discordjs/rest 等用いてスラッシュコマンドを登録する必要がなくなります．

### ギルドコマンドとグローバルコマンド
どちらもスラッシュコマンドであり．ギルドコマンドは即時反映，グローバルコマンドは1時間キャッシュされるという特徴があります．
つまり，グローバルコマンドの場合はコマンドを修正，消去しても1時間はキャッシュされるため，なかなか反映されません．
そのため，開発環境ではギルドコマンドを利用することを推奨します．

## 参考
当記事は，以下の文献を参考に，スラッシュコマンドの登録方法を記しました．

https://sabe.io/tutorials/how-to-build-discord-bot-typescript

こちらの文献は，スラッシュコマンドを用いたbotを作成するチュートリアルです．
しかし，グローバルコマンドを用いているため，スラッシュコマンドの反映が遅いことに注意が必要です．
このチュートリアルではスラッシュコマンドをユーザーが実行後にbotがどのようなプログラムを動かすのかを設定するまでを学ぶことができます．

## トラブルシューティング
### 402等のエラーが出る
botの権限設定が適切でない可能性があります．botの権限は以下のように applications.commandsにチェックが入っていますか？
![名称未設定 2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510882/383252b1-e8a6-8be0-844e-7b8a69f01102.jpeg)

その他エラーが出る場合はコメントまでお願いします．
【Rails】条件に応じて、適用するCSS（セレクタ）を変える（備忘録）

みなさん、こんにちは！
筆者は大学生限定のプログラミングスクール「GeekSalon」でメンターをしています！
興味のある方や話だけでも聞いてみてい方はぜひのぞいてみてください👍

https://geek-salon.com/?utm_source=Direct&utm_medium=attract&utm_campaign=3Q&utm_content=Fukuoka_B1_3Q

さっそく今回の本題に入っていきます！
今回は、条件に応じて適用するCSSのセレクタを変えるというものを実装していきます。

筆者は、投稿にカテゴリ（category）のカラムを追加しており、そのカテゴリに応じて投稿の背景色が変わるというものを実装しました！
完成イメージは以下のようになります

![image (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2429739/09510018-1a0f-b25c-05b7-0d716dc54c57.png)


##実装環境
ruby 2.7.4p191 (2021-07-07 revision a21a3b7d23) [x64-mingw32]
Rails 6.1.4.1


##実装①　～HTMLファイルのClassをいじる～
まずは投稿の背景色を実装するために定義したClassをいじっていきます。


```Ruby:Tweet/index.html.erb
<div class="tweet-container
<% case t.category %>
<% when "#春" then %>
  tweetback1
<% when "#夏" then %>
  tweetback2
<% when "#秋" then %>
  tweetback3
<% when "#冬" then %>
  tweetback4
<% end %>
">

#省略

</div>
```

##実装②　～CSSファイルをいじる～
次はHTMLファイルで定義されたそれぞれのClassに対応するセレクタを用意し、それに記述を加えていきます。


```Ruby:tweet.scss
.tweet-container{
    border: dotted;
    border-radius: 10px;
    padding-top: 10px;
    margin: 5px;
  }

  .tweetback1{
    border-color: rgb(255, 255, 252);
    background-color: rgba(248, 211, 233, 0.349);
  }

  .tweetback2{
    border-color: rgb(80, 255, 153);
    background-color: rgba(80, 255, 153, 0.349);
  }

  .tweetback3{
    border-color: rgb(255, 255, 80);
    background-color: rgba(255, 243, 80, 0.349);
  }

  .tweetback4{
    border-color: rgb(80, 255, 255);
    background-color: rgba(80, 176, 255, 0.349);
  }
```

これで終わりです！
このようにすることで、投稿時のカテゴリに応じて適用されるCSSのセレクタを変更し、表示される投稿の背景色を変更することができました！

このやり方は投稿の背景色変更以外にも幅広く使えるため、プロダクトに応じて応用していきましょう！