OmniAICreator/Qiita-1.07M huggingface dataset:
Linuxの便利ショートカット（初心者の方へ）


## はじめに
- Linuxの学習を進めていきたい初学者です
- 時短になりそうなショートカットを、手を動かして確認するついでにメモしただけの記事です
- よくばらずに、絶対使える！ってやつを押さえていきたいです


## 画面すっきり系
- `control + c`
    - 実行中のコマンドを強制終了する

- `control + l`
    - 画面をクリアに出来る
    - ログが溜まって、すっきりしたい時に使える
    - 厳密には、入力待ちの行が一番上に来てるだけ


## カーソル移動系
矢印キーまで手を動かさなくて済む

- `control + a`
    - 行の先頭に移動する
    - atama(頭), アルファベットの先頭
- `control + e`
    - 行の最後に移動する
    - end
- `control + f`
    - 一文字進む
    - forward
- `control + b`
    - 一文字戻る
    - back
- `esc + f`
    - 一単語次へ進む
- `esc + b`
    - 一単語手前へ戻る

## 編集
### 一文字削除
- `control + h`
    - `backspace`の代わり
    - hidari
- `control + d`
    - `delete`の代わり

### 一気に削除
- `control + u`
    - 行頭まで削除する
- `control + k`
    - 行末まで削除する
- `control + w`
    - 手前にある単語を削除する
    - word
- `control + y`
    - 最後に削除した内容を挿入
    - 切り取り→貼り付けで使える？

## 履歴
矢印キー使わなくても良くなる

- `control + p`
    - 一つ前のコマンドを表示
    - previous
- `control + n`
    - 次のコマンドを表示


## まとめ
- 随時追記予定です（検索系などは、まだ使う機会が少ないので）
- とりあえず矢印キーは封印します。

## 参考資料
こちらのUdemy講座で紹介されたものを参考にさせて頂きました。
[もう怖くないLinuxコマンド。手を動かしながらLinuxコマンドラインを5日間で身に付けよう](https://www.udemy.com/course/unscared_linux/)
AWS LambdaをTypescript+Webpackでデプロイする

Lambda関数をTypescriptで記述したくなった。
さらに、Webpackでバンドルした後にLambdaにアップロードすることを試みる。

## 作業手順

1. Typescript環境構築
2. Lambda関数作成
3. Webpack準備

## 1. Typescript環境構築

package.jsonを用意する。
Typescriptに必要なパッケージやWebpackでtsファイルをビルドするためのパッケージ、Lambda側で型定義するためのパッケージをインストールしておく。

```json:package.json
{
  "scripts": {
    "build": "webpack --mode production --config webpack.config.ts"
  },
  "devDependencies": {
    "@types/aws-lambda": "^8.10.62",
    "@types/webpack": "^4.41.22",
    "ts-loader": "^8.0.4",
    "ts-node": "^8.1.0",
    "typescript": "^4.0.3",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11"
  }
}

```

## 2. Lambda関数作成

Lambda関数を用意する。
ハンドラに渡した引数に対して型を貼っておく。
以下はAPI Gatewayのイベントを受け取っている例だが、S3イベント用やCloudfront用イベントの型も用意されている。

```typescript:index.ts
import { APIGatewayEvent, APIGatewayProxyCallback, Context } from 'aws-lambda';

export async function handler(event: APIGatewayEvent, context: Context, callback: APIGatewayProxyCallback) {
    console.log("hello world");
    return;
};
```

## 3. Webpack準備

Webpackで出力サイズを抑えた上でLambdaにアップロードする。

```typescript:webpack.config.ts
import { Configuration } from 'webpack';

const config: Configuration = {
  target: 'node',
  entry: {
    'index': `${__dirname}/index`,
  },
  output: {
    path: `${__dirname}/dest`,
    filename: 'src/[name]/index.js',
    libraryTarget: 'commonjs2',
  },
  externals: ['aws-sdk'],
  module: {
    rules: [
      { test: /\.ts$/, use: [ { loader: 'ts-loader' } ]}
    ],
  },
  resolve: {
    extensions: ['.js', '.ts'],
  },
};

export default config;
```

ビルド実行すると、destディレクトリが作成され、出力ファイルが生成されていることが確認できる。

```bash
$ npm run build
```

後は、出力されたファイルをzip化してアップロードすれば良い。

## まとめ

型定義しておけばLambda関数の記述もWebpackの設定も簡単になったように感じました。
ServiceNow - onChangeスクリプトを起動する変数の値を変更する

#概要
ServiceNowで入力された変数の値を変更したい場合があります。例えば、日付を選択された場合に時間を零時に変更したい場合があります。但し、onChangeで値を変更すると再帰的にonChangeスクリプトが実行されてしまします。
（ServiceNowフォーラムでの質問でした。）

例：次のonChangeスクリプトが実行されると再帰的に呼び出されます。
変数「start_datetime」はDateTime型です。

```
function onChange(control, oldValue, newValue, isLoading, isTemplate) {
  if (isLoading || newValue === '') {
    return;
  }
  var valid_from_date = g_form.getValue('start_datetime');
  valid_from_date = valid_from_date.split(' ')[0];
  valid_from_date = valid_from_date + " 00:00:00";
  g_form.setValue('start_datetime', valid_from_date);
}
```

#対策
このような場合は一回しか呼ばれないようにグローバル変数を定義するのではなく、スクリプトで設定する値をif文の条件にします。
例えば、時間を零時に変更する場合はif文で零時であるか確認します。

```
function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading || newValue == '') {
        return;
    }
    try {
		var dateArray = newValue.split(' ');
		if (dateArray[1] != '00:00:00') { // 既に00:00:00が確認。そうである場合は再設定をしない。
            var valid_from_date = dateArray[0] + " 00:00:00";
            g_form.setValue('start_datetime', valid_from_date);
        }
    } catch (e) {
        alert("error:" + e.message);
    }
}
```

以上
pythonでJSONデータの2階層目移行のキーを取得する


## ファイルの例
例えば、`"ruleId"`をキーにして値を取得したいとき

```test.json
{
    "timestamp": 1604751455679,                                                                   
    "ruleGroupList": [
        {
            "ruleGroupId": "AWS#AWSManagedRulesCommonRuleSet",
            "terminatingRule": {
                "ruleId": "NoUserAgent_HEADER",
                "action": "BLOCK",
                "ruleMatchDetails": null
            },
            "nonTerminatingMatchingRules": [], 
            "excludedRules": null
        }
    ]   
}
```

## 取り出し方
- `jsn["ruleGroupList"][0]["terminatingRule"]["ruleId"]`のように取り出す

```python
import json

with open('test.json') as f:
    jsn = json.load(f)

print(jsn["ruleGroupList"][0]["terminatingRule"]["ruleId"])
```

## 実行結果

```
yuta:~ $ python jsontest.py 
NoUserAgent_HEADER
```
DjangoでSNS作成時のコマンド

Djangoのアプリケーション作成時に必要なコマンドです。
自分でもよく忘れるのでメモとして残しておきます。

#Djangoのプロジェクト作成（初め方）

`django-admin startproject プロジェクト名`

#アプリケーションの作成

`python manage.py startapp アプリケーション名`

#Webサーバーの起動

`python manage.py runserver`

#管理者の作成

`python manage.py createsuperuser`

#マイグレーションファイルの作成

`python manage.py makemigrations アプリケーション名`

#マイグレーションを実行

`python manage.py migrate`

#Djangoのブラウザアドレス

`http://localhost:8000/アプリケーション名/`
Catalinaでpyenv を使ってPythonを3系にあげようとしたらエラーになる

##環境
mac OS Catalina
バージョン　10.15.7
Xcodeインストール済み(Version 12.1)だけど、ずっと開いていない

##普通の手順

```$ python --version```
で現在のバージョンを確認し　→ 2.7.なんぼのはず

```$ brew update```

```$ brew install pyenv```
homebrewでpyenvをインストール

```$ pyenv install 3.6.5```
ここで、エラーひとつめ
エラー内容
>zipimport.ZipImportError: can't decompress data; zlib not available
make: *** [install] Error 1

というのが出てきましたので

```$ brew install zlib```
しますが、特に変わらず。

https://qiita.com/miyacomaru/items/a105800f938de7b908e0
を参考に、
```$ xcode-select --install```
しましたが、
>このソフトウェアは、現在ソフトウェア アップデート サーバから入手できないため、インストールできません。

というアラートが出ます。

https://qiita.com/kuzira_vimmer/items/6b017896f9b44ae9f5c3
こちらを参考に下のページから手動でCommand Line Toolsをインストールすることで解決しました。（要Devアカウント？　AppleIDでログインでもOK? 自分はDevアカウントを持っていたのでどちらかわからずです）

https://developer.apple.com/download/more/

#インストールできた！　次は「常に3系（私の場合は3.6.5）を使うように設定」

まずは、バージョンを確認

```$ pyenv versions```
でpyenvは3.6.5になっていることを確認
```$ python --version```
では、2.7.なんぼのままです

## pyenvをinitする
```$ pyenv init```
すると、

```# Load pyenv automatically by appending```
```# the following to ~/.bash_profile:```
```eval "$(pyenv init -)"```

という指示が出てきますので、

```$ echo 'eval "$(pyenv init -)"' >> ~/.bash_profile```
して完了！

最後に
```$ python --version```
してみると　3系になっているはず。
便利❣️Rails開発がスムーズになる機能！


現在私はdocker環境下でRuby on Railsで自社サービスの開発を行っており、
dockerを使用した方ならご理解頂けると思うのですが、、、





<br><br>


＿人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人人＿
＞ 🚨docker関連のコマンド反応がめっっっっっっっっっっっちゃ遅い！！！🚨 ＜
￣^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y￣




<br><br>





特に以下のケースを確認する時に時間がかかるとイライラします。。



<br><br>


- コントローラに渡すパラメーターの中身を確認したい。 

- 呼び出しているActive Recordの種類。

- render元のファイル。



<br><br>


とまあいろいろあるのですが、とにかく以下から始まるコードはとにかく遅いです。
(この前migrationファイルを作成するのに約10分かかりました。。)

```
$ docker-compose run ~
```


<br><br>


そんな私と同じような環境で開発している、Rails初心者の方へ朗報です！
`Rails panell`というchromeの拡張機能はご存知でしょうか？？

<br><br>

結論から言うとめちゃ便利です。
デバッグ関連で`pry`とか使用している人もこれは入れて欲しい。
以下概要です！


<br><br>


![スクリーンショット 2020-11-08 11.16.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563816/5d66fe15-e4aa-34e0-a0a6-f019e8e1207a.png)
Chrome store link
https://chrome.google.com/webstore/detail/railspanel/gjpfobpafnhjhbajcjgccbbdofdckggg



<br><br>

これを拡張機能に追加すると、検証ツールの一番右側に追加されて、以下のことを簡単に確認できます！
（上記画像参照。）


>
- Breakdown: 処理時間の内訳(ActiveRecord, Rendering, Other)
>
- Params: コントローラから参照できるparamsの内容
>
- ActiveRecord: そのリクエストを処理する際に発行したSQLと処理時間
>
- Rendering: ビューテンプレートごとの描画時間

（参考元：https://chopschips.net/blog/2015/03/06/rails-panel/）

<br>

なのでいちいちコンソールを立ち上げたり、`pry`で止めたりせずとも簡単に確認できちゃいます！
これでデバッグに係る時間を少しでも削減できますね♫

<br>

今回初投稿となり拙い文章で間違っている箇所もあるかと思いますが、
もしここまで読んでくれた方がいたらとても嬉しいです！

<br>

もっと便利な拡張機能あるよとかあれば、是非コメントで教えてください🙇‍♂️
以上初心者エンジニアでした！
【Python】for文を使った九九表

for 命令文を利用して九九表を作ってみた。

```python
for i in range(1, 10):
    for j in range(1, 10):
            print(i * j, end=' ')
    print()
```

``end``はprintでデータを出力した後(末尾)に出力するものを指定
今回はスペース
**※何も指定しなければ、改行コードが指定される。**

出力

```python
1 2 3 4 5 6 7 8 9 
2 4 6 8 10 12 14 16 18 
3 6 9 12 15 18 21 24 27 
4 8 12 16 20 24 28 32 36 
5 10 15 20 25 30 35 40 45 
6 12 18 24 30 36 42 48 54 
7 14 21 28 35 42 49 56 63 
8 16 24 32 40 48 56 64 72 
9 18 27 36 45 54 63 72 81 
```
Amazon Linux2でHomebrewのインストール

#はじめに
Amazon Linux2でHomebrewのインストールをおこなったので、備忘録としてメモを残しておく。

#インストール
[Homebrew](https://brew.sh/)を参考にインストール。

```
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```
そうするとパスがないと下記の注意が表示される。

```
Warning: /home/linuxbrew/.linuxbrew/bin is not in your PATH.
```

そのため下記のコマンドを実行すると使えるようになる。

```
export PATH=/home/linuxbrew/.linuxbrew/bin:$PATH
```

念のためHomebrewがインストールされているか確認。

```
brew -v
```

`We recommend that you install GCC: brew install gcc`と推奨されてたので、gccもインストールしておいたほうがよさそう。

```
brew install gcc
```

注意や推奨の内容

```
Warning: /home/linuxbrew/.linuxbrew/bin is not in your PATH.
==> Installation successful!

==> Homebrew has enabled anonymous aggregate formulae and cask analytics.
Read the analytics documentation (and how to opt-out) here:
  https://docs.brew.sh/Analytics
No analytics data has been sent yet (or will be during this `install` run).

==> Homebrew is run entirely by unpaid volunteers. Please consider donating:
  https://github.com/Homebrew/brew#donations

==> Next steps:
- Run `brew help` to get started
- Further documentation: 
    https://docs.brew.sh
- Install the Homebrew dependencies if you have sudo access:
    sudo yum groupinstall 'Development Tools'
    See https://docs.brew.sh/linux for more information
- Add Homebrew to your PATH in /home/ec2-user/.bash_profile:
    echo 'eval $(/home/linuxbrew/.linuxbrew/bin/brew shellenv)' >> /home/ec2-user/.bash_profile
    eval $(/home/linuxbrew/.linuxbrew/bin/brew shellenv)
- We recommend that you install GCC:
    brew install gcc
```

参考
https://www.it-swarm-ja.tech/ja/ruby/homebrew%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%82%A8%E3%83%A9%E3%83%BCbrew%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%81%8C%E8%A6%8B%E3%81%A4%E3%81%8B%E3%82%8A%E3%81%BE%E3%81%9B%E3%82%93/1069923138/
Python Counterクラスが便利な件について　～もう自分で数える必要は無い～

#概要
これまで、リスト内に要素が何個ずつ含まれているかをチェックするために、リスト要素をfor文で回して、dictに要素・個数の組み合わせをセットしていた。
しかし、collections.Counterクラスを使えば、一行で処理が可能となる。

#これまで(dictでごりごり)
```Python
    a = [1, 2, 2, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 5]
    b = [1, 2, 2, 3, 3, 3, 4, 4, 4, 4, 6, 6, 6, 6, 6, 6]

    a_dict = dict()
    b_dict = dict()

    for item in a:
        if item in a_dict:
            a_dict[item] += 1
        else:
            a_dict[item] = 1

    for item in b:
        if item in b_dict:
            b_dict[item] += 1
        else:
            b_dict[item] = 1

    print(a_dict) #{1: 1, 2: 2, 3: 3, 4: 4, 5: 5}
    print(b_dict) #{1: 1, 2: 2, 3: 3, 4: 4, 6: 6}

```
#Counterクラスを使うと
```Python
    from collections import Counter

    a = [1, 2, 2, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 5]
    b = [1, 2, 2, 3, 3, 3, 4, 4, 4, 4, 6, 6, 6, 6, 6, 6]

    a_counter = Counter(a)
    b_counter = Counter(b)
    print(a_counter) #Counter({5: 5, 4: 4, 3: 3, 2: 2, 1: 1})
    print(b_counter) #Counter({6: 6, 4: 4, 3: 3, 2: 2, 1: 1})

```
#Counterクラスでは、和集合・差集合の演算が可能
```Python

    from collections import Counter

    a = [1, 2, 2, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 5]
    b = [1, 2, 2, 3, 3, 3, 4, 4, 4, 4, 6, 6, 6, 6, 6, 6]

    a_counter = Counter(a)
    b_counter = Counter(b)

    print(a_counter + b_counter) #Counter({4: 8, 3: 6, 6: 6, 5: 5, 2: 4, 1: 2})
    print(a_counter - b_counter) #Counter({5: 5})
```
#Counterの内容のソート
直接ソートは出来ないので、以下の様に(個数,キー値)タプルのリストを個数でソートして、さらに（キー値,個数)のリストに戻す様にする。
したがって、ソート結果はタプルのリスト型になる。

```Python

    from collections import Counter

    a = ["A", "B", "B", "C", "C", "C", "D", "D", "D", "D", "E", "E", "E", "E", "E"]

    a_counter = Counter(a)

    #昇順ソート
    a_counter_sorted = [(l, k) for k, l in sorted([(j, i) for i, j in a_counter.items()])]
    print(a_counter_sorted) #[('A', 1), ('B', 2), ('C', 3), ('D', 4), ('E', 5)]

    #降順ソート
    a_counter_sorted = [(l, k) for k, l in sorted([(j, i) for i, j in a_counter.items()], reverse=True)]
    print(a_counter_sorted) #[('E', 5), ('D', 4), ('C', 3), ('B', 2), ('A', 1)]

```

#AtCoderでCounterクラスを利用すると簡単に解ける問題
+ https://atcoder.jp/contests/abc181/tasks/abc181_d　
→これの解説でCounterの存在を知った

+ https://atcoder.jp/contests/abc091/tasks/abc091_b
+ https://atcoder.jp/contests/abc072/tasks/arc082_a 
→ai,ai-1,ai+1をリストにぶち込み、リストをCounter化して、Couterの個数が一番大きいキー値が答え
+ https://atcoder.jp/contests/arc086/tasks/arc086_a
+ https://atcoder.jp/contests/abc058/tasks/arc071_a
→Counterを積演算し、残った要素を昇順で個数分結合する
+ https://atcoder.jp/contests/typical90/tasks/typical90_at
+ https://atcoder.jp/contests/abc210/tasks/abc210_c
【Rails/AWS】RDSのMySQLに繋がらないエラーの考えられる原因(database.yml)

# はじめに
 本記事は、RailsアプリをAWSにデプロイした際に発生する可能性のある
 MySQLに繋がらないという事象に対する原因例を紹介します。
 原因はかなり初歩的な原因でしたが、筆者はこのエラー原因が特定できずとても苦労したため、
 今後同じエラーに遭遇した方の助けになれば幸いです。

# 開発環境
 + Ruby 2.5.1
 + Rails 5.2.4.4
 + AWS(EC2, RDS) 
 + MySQL(RDS) 5.6.48

# 前提条件
 + RailsアプリをEC2のWebサーバー上にgitクローン済み。
 + 基本的な設定は完了済みで、rake db:create RAILS_ENV=productionのコマンドを実行する手前の状態。
 + RDSのDBインスタンスを作成済み。
 + Railsのdatabase.ymlは下記の内容です。

```database.yml
default: &default
  adapter: mysql2
  encoding: utf8
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password:
  socket: /tmp/mysql.sock

production:
  <<: *default
  database: データベース名
  host: <%= ENV['DATABASE_HOST_PRODUCTION'] %>
  username: <%= ENV['DATABASE_USER_NAME_PRODUCTION'] %>
  password: <%= ENV['DATABASE_PASSWORD_PRODUCTION'] %>
```

# エラー内容

以下のコマンドだとRDSのMySQLに繋がったのですが・・・・

```
[ec2-user@ip-10-0-1-10 アプリのディレクトリ]$ mysql -h RDSのエンドポイント -u root -P 3306 -p
```

以下のコマンドだと繋がらず、MySQLに繋がらないというエラーが出ました。

```
[ec2-user@ip-10-0-1-10 アプリのディレクトリ]$ rake db:create RAILS_ENV=production
Can't connect to MySQL server on '10.0.1.10' (111)
Couldn't create 'データベース名' database. Please check your configuration.
rake aborted!
Mysql2::Error::ConnectionError: Can't connect to MySQL server on '10.0.1.10' (111)

Tasks: TOP => db:create
(See full trace by running task with --trace)
```

# 原因/解決策
当初はホスト名の設定ができていなかったので、エンドポイントを環境変数に入れて修正したのですが、
mysqlコマンドだと繋がるのにrakeコマンドだと繋がらないという謎の現象が発生しました。
いろいろ調べたところ、MySQLのパスワードに**パスワードに"#"が入っていることが原因**でした。
YAMLファイルはコメントアウトの記法が#ということで、パスワードに"＃"が入っているとコメントされてしまいます。
パスワードを変更したら無事rakeコマンドが通りました。
みなさんお気を付けください。

# まとめ
**MySQLのパスワードに"#'を含めるのは良くない。**
サイトにGooglemapを埋め込む

## ■ はじめに

タイトルについて記事にしました。
この記事で得る内容は以下の通りです。

・CSSの基礎知識が増える
・サイトにGooglemapを埋め込む方法

## ■ 手順

・ まず、サイトに載せたい地図をググります

![スクリーンショット 2020-11-08 10.36.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/f8115178-b10f-f212-1ed5-71229e86f9cb.png)

・ 検索結果画面右にある地図をクリックします

![スクリーンショット 2020-11-08 10.37.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/f1cecce0-6849-e9e6-db2e-a88b180050e2.png)

・ 共有をクリックします

![スクリーンショット 2020-11-08 10.40.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/fd6e638b-b768-5799-c876-c8e4031b3a0e.png)

・ 共有をクリックすると、モーダルが表示されますので、地図を埋め込むをクリックします

![スクリーンショット 2020-11-08 10.42.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/6b7778d7-f669-4d91-919a-1496f33fc3d7.png)

・ HTMLをコピーをクリックします

![スクリーンショット 2020-11-08 10.45.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/6f82e260-a0d7-2735-47e9-7770343088c5.png)

・ 自分はhamlを使っていますので、[ここ](https://htmltohaml.com/)で変換して

![スクリーンショット 2020-11-08 10.50.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/b07d5c84-7d1c-a762-257f-ece8528a8618.png)

・ ロケット記法から`:`に書き換えて

```haml:index.haml
%iframe{allowfullscreen: "", "aria-hidden": "false", frameborder: "0", height: "450", src: "https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12964.445925063472!2d139.7169535!3d35.6742569!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xf8fe5cab0f97a8d8!2z5piO5rK756We5a6u6YeO55CD5aC0!5e0!3m2!1sja!2sjp!4v1604800490948!5m2!1sja!2sjp", style: "border:0;", tabindex: "0", width: "600"}
```

・ 最低限、高さと幅を調整して

```scss:index.scss
    // 中略
    iframe {
      height: 100%;
      width: 100%;
    }
```

![スクリーンショット 2020-11-08 11.01.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/962b3afc-8041-3980-4b50-c0cccf825a62.png)

この様にサイトにGooglemapを埋め込むことができます
[Swift5]"lottie-ios"を使ってアニメーションを実装する方法

## lottie-iosとは？
**Lottie(ロッティー)**は、Airbnbから登場したiOS、Android、React Native対応のアニメーションライブラリです。Adobe After Effectsで表示できるアニメーションをリアルタイムでレンダリングし、ネイティブアプリで静的なコンテンツを作るのと同じくらい簡単に面白い動きをするアニメーションを作成することができます。

▼詳しくはこちら
https://ferret-plus.com/6214

▼公式ページはこちら
https://airbnb.design/lottie/

## 実装環境
macOS Catalina 10.15.7
Xcode 12.1
Apple Swift version 5.3

今回は**TestApp**というプロジェクトで実装します。

## 導入の流れ
①CocoaPodsのインストールとインポート
②JSONファイルのダウンロード
③ダウンロードしたファイルを読み込んでコード記述

## ①CocoaPodsのインストールとインポート
必要とするPodsは`pod 'lottie-ios'`。

```Podfile.
# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'TestApp' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

pod 'IBMWatsonToneAnalyzerV3', '~> 3.6.0'

  # Pods for TestApp

  target 'TestAppTests' do
    inherit! :search_paths
    # Pods for testing
  end

  target 'TestAppUITests' do
    # Pods for testing
  end
  
  //ここをインストール
  pod 'lottie-ios'

end
```
`pod install`が完了したらプロジェクトへimportします。

## ②JSONファイルのダウンロード
それではLottieのアニメーション検索ページへ移動してお気に入りのアニメーションをダウンロードしていきます。

▼検索ページ
https://lottiefiles.com/featured?page=1

お気に入りのアニメーションが決まったらクリックして下記のようなページを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643372/c1e6be50-955e-f89a-9795-427ec86c7d53.png)
右上にある**Download JSON**を選択し、**Lottie JSON**を選択してJSONファイルをダウンロードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643372/ec0bb603-9b25-e6ea-9032-ed57ee81d867.png)
ダウンロードが完了したらドラック&ドロップでプロジェクトファイル追に加します。
ドラックする場所は`info.plist`の上あたりでOKです。

## ③ダウンロードしたファイルを読み込んでコード記述
それではいよいよ実装です。

```ViewController.swift
import UIKit
import Lottie //①でインポート済

class ViewController: UIViewController {
    
    //AnimationViewの宣言
    var animationView = AnimationView()

    override func viewDidLoad() {
        super.viewDidLoad()

        //アニメーションの呼び出し
        addAnimationView()
    }
    
    //アニメーションの準備
    func addAnimationView() {
        
        //アニメーションファイルの指定
        animationView = AnimationView(name: "38280-man-chilling-on-electric-scooter") //ここに先ほどダウンロードしたファイル名を記述（拡張子は必要なし）
        
        //アニメーションの位置指定（画面中央）
        animationView.frame = CGRect(x: 0, y: 0, width: view.frame.size.width, height: view.frame.size.height)
        
        //アニメーションのアスペクト比を指定＆ループで開始
        animationView.contentMode = .scaleAspectFit
        animationView.loopMode = .loop
        animationView.play()
        
        //ViewControllerに配置
        view.addSubview(animationView)
    }
```

## 動作確認
コードの記述を終えたら動作確認を行います。
下記画像のように画面中央にアニメーションが表示されていれば成功です！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643372/d9c279d8-61df-7368-66c0-e32e6ce6d16b.png)

## 最後に
今回行ったようにLottieを使えばクオリティの高いアニメーションを短いコードで実装できます。
他にもオシャレなアニメーションがたくさんあるので一度みてみても良いかもしれませんね！

最後までご覧いただきありがとうございます！
是非参考にしていただければと思います。
array_shift()ってなんやねん!!

#array_shift()ってなんやねん
##説明
array_shift() - 配列の先頭の要素を取り除く
ただそれだけ、

```
$tehai_predict = [1,2,3,4,5,6,7,8,9,11,12,13];
$lead_element = array_shift($tehai12_predict);
var_dump($tehai_predict);
var_dump($lead_element);
```

```
[2,3,4,5,6,7,8,9,11,12,13]
1
```
が出力される。

#筆者
2020年1月ごろからプログラミング学習し始めました。
日々の学習についてあげています。
麻雀点数計算アプリを作成中！！！
Template Method Pattern

#Template Method Pattern
<font color="#00f">templateで処理の大枠を決めてロジックを共有する
サブクラスではtemplateで決た枠に従い処理を行う</font>

[Design Pattarm MENU](https://qiita.com/old_cat/items/852d980bedb9100dd7e3)

##Template Method Pattern 例
以下のクラス構成で確認します

|クラス|説明|
|-----|----|
|template.class|処理の大枠を記述する|
|sam1.class|処理の詳細を肉づける|
|sam2.class|処理の詳細を肉づける|
|user(Main.class)|Template Patternの動作を確認する|
＊user　他の開発者がこのパターンを利用する、という意味合いを含みます

```java:template.class
abstract class template{
  abstract String temp1();
  abstract String temp2();
  abstract String temp3();
  final    void show(){
           System.out.print(temp1()+temp2()+temp3()+"\n");
           }
}
```
```java:sam1.class
class sam1 extends template{
  String temp1(){return "<<< ";}
  String temp2(){return "Template";}
  String temp3(){return " >>>";}
}
```
```java:sam2.class
class sam2 extends template{
  String temp1(){return "[[[ ";}
  String temp2(){return "Template";}
  String temp3(){return " ]]]";}
}
```
```java:user(Main.class)
public static void main(String[] args){
sam1 s1= new sam1();
sam2 s2= new sam2();
s1.show();
s2.show();
}}
```
AWSWAFのAWSManagedRulesCommonRuleSet	の動作確認方法


## RestrictedExtensions_URIPATH

>リクエストの URI パスに、クライアントが読み取りや実行を禁止されているシステムファイルの拡張子が含まれていないかを検査します。パターンの例には、.log や .ini などの拡張子があります。

- URL内に、`ini`,`log`などのアプリケーションの重要なファイルへのアクセスを防ぐ

```
curl -i https://dev.vamdemic.jp/aaa.ini
```

## NoUserAgent_HEADER

>HTTP User-Agent ヘッダーのないリクエストをブロックします。

- ツールなどによる総当たり攻撃を防ぐ

```
curl  https://dev.vamdemic.jp  -H "User-Agent:"
```

# 参考
https://docs.aws.amazon.com/ja_jp/waf/latest/developerguide/aws-managed-rule-groups-list.html
exuberant-ctagsとuniversal-ctagsの違い

# 目的

wsl上でctagsを使おうとすると、インストールする必要があった。
exuberant-ctagsとuniversal-ctagsの違いを調べた。

結論は、universal-ctagsをインストールすればよい。

```
$ ctags -R .

Command 'ctags' not found, but can be installed with:

sudo apt install exuberant-ctags  # version 1:5.9~svn20110310-12, or
sudo apt install universal-ctags  # version 0+git20181215-2
```

# [exuberant-ctags](http://ctags.sourceforge.net/)

複数のプログラミング言語に対応したctags。
公式ページのリリース最新Version 5.8 [09 July 2009]とあるため、
開発が10年前に止まっている。

# [universal-ctags](https://ctags.io/)

universal-ctagsは、exuberant-ctagsの開発を引き継いでいるプロジェクトとのこと。universal-ctagsを使っていれば間違いなさそう。

> universal-ctags has the objective of continuing the development from what existed in the Sourceforge area. Github exuberant-ctags repository was started by Reza Jelveh and was later moved to the universal-ctags organization.
【R】 tibbleには何でも入れられる？

###目次
[【R】 dplyr::group_nestを使って集計する](https://qiita.com/ki073/items/0ba83b5546f99739e623)
【R】 tibbleには何でも入れられる？ <- ここ

###はじめに
dplyrパッケージを使っているとよくtibbleに変換されてしまいます。このtibbleにはいろいろなデータを入れることができるようで、tibbleやggplot2で作ったグラフを入れてみます。RStudioを使うとデータを階層的に見ることができるのでお薦めします。
###データを作ってみる
サインカーブのデータを作ってみます。

```R
library(tidyverse)
library(magrittr)

sine.data <- tibble(cycle=1:4)
sine.data %<>% mutate(sine=map(cycle, ~(tibble(x=0:99/50) %>% mutate(y=sinpi(x*.x)))))
```

sine列には、tibbleの中にcycle周期分のsineデータが入っています。
次にそれをグラフにしてみます。

```R
sine.data %<>% mutate(graph=map(sine, ~(ggplot(.x, aes(x,y))+geom_point())))
```

mapの使い方が分からない時には、目次の一番上のリンクを辿ってみてください。
RStudioでsine.dataの中を見ると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171895/d8ec86ae-bdf7-156f-60e5-453e9adfad55.png)
このようになっています。

4つのグラフを1つにまとめて表示してみます。
リストとして取り出して、arrangeGrobで1つにまとめています。

```R
library(gridExtra)
plot(arrangeGrob(grobs=sine.data$graph), ncol=2)
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171895/8bf385ff-d61f-0f2c-6bc5-a12831284675.png)

###データを保存
次にそれぞれのデータをファイルに保存してみます。
一旦リストにしてからwalkを使って保存しています。泥臭くなってしまいましたが、良い方法があれば教えてください。

```R
y <- sine.data %>% select(cycle, sine) %>% as.list %>% transpose
y %>% walk(~(write_csv(.x$sine, paste0("sine", .x$cycle, ".csv"))))
```

sine1.csv,sine2.csv,sine3.csv,sine4.csvの4つのファイルができているはずです。

###データファイルを読み込む
ファイルを作りましたので、それを全部読み込んでみます。

```R
sine.data2 <- tibble(file.name=list.files(pattern=".csv", full.names=T))
sine.data2 %<>% mutate(sine=map(file.name, ~read_csv(.x)))
```

1行目で拡張子がcsvのファイル名のリストを作って、2行目で読み込んでいます。これらデータを使って上に書いたようにグラフを作ることもできます。
　
また、`sine.data2 %>% unnest(sine)` で読み込んだデータ全部つなぎ合わせることもできます。

tibbleには列単位で、同じデータタイプである制約がありますが、リストにできるものであれば、tibbleやグラフデータなどいろいろなタイプのでデータが入れられます。
vistaでvs2010 その3

#概要

vistaで、visual studio 2010やってみた。
コマンドプロンプトで、C++をコンパイルしてみた。

#コマンドプロンプトで、dllをコンパイル。

```
cl makedll.cpp /LD
```

#サンプルコード

makedll.h

```
extern "C" __declspec(dllexport) int Tasu(int x, int y);

```

makedll.cpp


```
#include <windows.h>
#include "makedll.h"

BOOL APIENTRY DllMain(HANDLE hModule, DWORD ul_reason_for_call, LPVOID lpReserved) {
	switch (ul_reason_for_call)
	{
	case DLL_PROCESS_ATTACH:
	case DLL_THREAD_ATTACH:
	case DLL_THREAD_DETACH:
	case DLL_PROCESS_DETACH:
	break;
	}
	return TRUE;
}
int Tasu(int x, int y) {
	return x + y;
}




```

以上。
AWSWAFでAWS-AWSManagedRulesLinuxRuleSetをセットしたときの動作確認方法


## AWS-AWSManagedRulesLinuxRuleSet

>Linux オペレーティングシステムルールグループには、Linux 固有のローカルファイルインクルージョン (LFI) 攻撃など、Linux 固有の脆弱性の悪用に関連するリクエストパターンをブロックするルールが含まれています。これは、攻撃者がアクセスすべきでないファイルの内容を公開したり、コードを実行したりする攻撃を防ぐのに役立ちます。アプリケーションの一部が Linux で実行されている場合は、このルールグループを評価する必要があります。このルールグループは、POSIX operating system ルールグループと組み合わせて使用する必要があります。

- LinuxOSの重要なファイルを指定するとWAFで予め弾いてくれる
    - クラスメソッドさんのサイトでは、`/etc/passwd`でやってた。ここらへんのあたりのファイルが対象のもよう

```bash
curl -i https://dev.vamdemic.jp/proc/version
```


### 動作確認


#### `/proc/varsion`を指定すると、ALBから403で弾かれる
```
yuta:~ $ curl -i https://dev.vamdemic.jp/proc/version
HTTP/1.1 403 Forbidden
Server: awselb/2.0
Date: Sun, 08 Nov 2020 01:21:37 GMT
Content-Type: text/html
Content-Length: 118
Connection: keep-alive

<html>
<head><title>403 Forbidden</title></head>
<body>
<center><h1>403 Forbidden</h1></center>
</body>
</html>
yuta:~ $ 
```

#### `/proc/varsio`だと、ALBはぬけてその先のEC2内のApacheが返している

```
yuta:~ $ curl -i https://dev.vamdemic.jp/proc/versio
HTTP/1.1 404 Not Found
Date: Sun, 08 Nov 2020 01:21:39 GMT
Content-Type: text/html; charset=iso-8859-1
Content-Length: 196
Connection: keep-alive
Server: Apache/2.4.46 () OpenSSL/1.0.2k-fips PHP/7.2.34

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>404 Not Found</title>
</head><body>
<h1>Not Found</h1>
<p>The requested URL was not found on this server.</p>
</body></html>
```

WAFコンソールでも検知している
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293481/128c6ee6-41d4-7913-009b-4495e1221a6c.png)


# 参考
https://docs.aws.amazon.com/ja_jp/waf/latest/developerguide/aws-managed-rule-groups-list.html
https://dev.classmethod.jp/articles/generate_test_log_with_waf_rules/
ghq + peco + GitHub CLIでターミナルの生産性を上げたい！

## はじめに

何番煎じかはわかりませんが、有名なghq・pecoの組み合わせが汎用性ありすぎてとても便利だったので一例を記事にしてみました。

## 目的

今更ですがghq,peco,GitHubCLIが超便利だったので紹介します。
一例としてこんな感じでターミナルからブラウザでリポジトリを開けるようにします。
![f18c1a326f1c910b0bed4ae97e0e8a40.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374058/2c6c4ed3-e2cb-e42a-eb25-e8289926d07b.gif)

### [ghq](https://github.com/x-motemen/ghq)とは

リポジトリ管理ツールです。
`ghq get <リポジトリのURL>`でghqで設定したディレクトリにgit cloneしてくれます。
さらに`ghq list`でghqで管理しているリポジトリ一覧を一覧で出力してくれます。
詳細は[作者の方のブログ](https://motemen.hatenablog.com/entry/2014/06/01/introducing-ghq)や[公式のリポジトリ](https://github.com/x-motemen/ghq)を参照してください。

- インストール例（Mac OS）

```zsh

 $ brew install ghq
```

- 設定例

```:.gitconfig
[ghq]
  root = ~/projects # gitで開発を行っているディレクトリ
  root = ~/go/src # goのリポジトリは別で管理しているという人用（一例です）
```

### [peco](https://github.com/peco/peco)とは

標準入力で渡された一覧を表示しつつ、インクリメンタルサーチでテキストを絞っていけるツールです。
もともと`ctrl + r`でインクリメンタルサーチできると思いますが、pecoだとコマンド履歴を表示した上で絞っていけるので超便利です。
いつもありがとうございます。
詳細は公式や[こちらの記事](https://qiita.com/vintersnow/items/08852df841e8d5faa7c2)とか色んな方が紹介してくださっているのでそちらを参照してください。

- インストール例（Mac OS）

```zsh

$ brew install peco
```

### [Github CLI](https://github.com/cli/cli)とは

GitHubが[2020年9月に正式版を公開](https://github.blog/jp/2020-09-18-github-cli-1-0-is-now-available/)した、コマンドライン上でGitHubの操作を行えるツールです。
[マニュアル](https://cli.github.com/manual/)が用意されているので使い方は[こちら](https://cli.github.com/manual/)に載っています。

- インストール例（Mac OS）

```zsh

$ brew install gh
```

- インストール後の認証

```zsh

$ gh auth login
```

認証まで完了したら`gh repo view <リポジトリ名>`とかでリポジトリの内容を閲覧してみましょう。
ターミナルにREADMEの内容が出力されると思います。

## 実用例

ghq,peco,GitHubCLIがインストールできて準備ができたら実際に使ってみます。
エイリアスは設定しなくてもコマンド打てますが、設定しておくのがおすすめです！

### 対象リポジトリをブラウザでターミナルから開く

- 以下を.zshrc(or .bashrcなど)に記載

```bash:.zshrc
# aliasはお好きなのを設定してください。
alias ghw='gh repo view -w $(ghq list | peco)
```

- 設定を反映する

```zsh

$ source ~/.zshrc
```

- Demo
こんな感じでターミナルからブラウザでリポジトリを開くことができました！
![f18c1a326f1c910b0bed4ae97e0e8a40.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374058/2c6c4ed3-e2cb-e42a-eb25-e8289926d07b.gif)


### 番外編

以下でこんなのもあるよというのも記載しています！

```zsh:.zshrc

# ghqで管理しているリポジトリにpecoで絞って移動する。
alias cdp='cd $(ghq list -p | peco)'

# ghqで管理しているリポジトリをpecoで絞ってVSCodeで開く。
alias vs='code $(ghq list -p | peco)'

# カレントディレクトリのOpenになっているPRをブラウザで開く。
alias pr='gh pr view --web'
```

## 終わりに

ghqとかpecoなどを使った組み合わせは他にもたくさん探したらでてくると思いますが、
今回はGithubCLIとの組み合わせを載せてみました。
それぞれ個別で利用してもとても便利ですね。
こんな便利なものを公開してくれている方々に本当に感謝です。
「これもええで！」みたいなのがあればぜひ教えて下さい！

## 参考

ありがとうございます！

- https://cli.github.com/manual/gh_pr_view
- [GitHub CLIで始める快適GitHub生活](https://qiita.com/ryo2132/items/2a29dd7b1627af064d7b)
- [ghq: リモートリポジトリのローカルクローンをシンプルに管理する](https://motemen.hatenablog.com/entry/2014/06/01/introducing-ghq)
- [え、まだpecoを使ってないの？？？](https://qiita.com/vintersnow/items/08852df841e8d5faa7c2)
【2020年11月】Githubアカウント作成方法

久々にGitHubアカウントを作成したので作業メモとして残します。

## Github公式ページを開く
[Github公式](https://github.com/)
![スクリーンショット 2020-11-08 9.24.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/863439/4bb26771-4a8b-c7e5-2351-296ccf70347b.png)

---

## 作成するアカウント情報の入力
下記の必要なものを入力して、「Sign up for Github」を押すっ！
・Username
・Email
・Password
![スクリーンショット 2020-11-08 9.24.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/863439/4bb26771-4a8b-c7e5-2351-296ccf70347b.png)

---

## 人間であることを証明
はい、では、人間であることを証明して見せましょう！
「検証する」を押すっ！
![スクリーンショット 2020-11-08 9.27.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/863439/adb050ca-c1cd-a3a8-1842-d2d04f53b72a.png)

---

この画面が出れば、人間であることが確認されます
「Join a free plan」を押します。
![スクリーンショット 2020-11-08 9.27.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/863439/bcbb2e24-83ab-521c-444d-c5f1ce4fdf09.png)

---

## 次の画面で入力フォームが表示されますが、何も入力せず「complite setup」をクリックでもアカウント作成ができるようです。
＊ はい。すいません。。キャプチャを撮り忘れました。。

---

## Githubから、メールが届いているので確認しましょう
「Verify email address」を押します。

![スクリーンショット 2020-11-08 9.31.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/863439/99ae5326-c70f-10a3-c19d-21029955e577.png)

---

## アカウント作成完了
GitHubのログイン済みの画面が表示され、作成が完了となります。
![スクリーンショット 2020-11-08 9.31.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/863439/1aed8ed4-1e60-a7ec-62c1-d5ca90d0eb34.png)

---


# ・感謝:clap:
最後まで、読んでいただけたら、幸いです^^
初めてQiitaに投稿してみました。
画像だらけで、読み辛いかもしれませんが、今後、見やすい、理解しやすく書ける様に頑張りますー！
Android 日付を取得する方法

Androidで日付を取得する方法を記録します。
思ったよりも簡単に書けました。

      fun getToday(): String {

             //表示させたい型を決める。　yは年、Mは月、dは日。
             //単位は自由に決められる。例えば、"yyyy/MM/dd"でもOK。
            val sdf = android.icu.text.SimpleDateFormat("yyyy年MM月dd日", Locale.JAPAN)
            
            //date型のインスタンスを作る。
            val date = Date()

            return sdf.format(date)
      }


以上です。
POSTMAN で画像を投稿する

#はじめに
これまでテキストデータを投げることばかりしていたので
初めて画像投稿機能をやるときに、ちょっと手こずりました
##方法
パラメーターに次のように記載すると出来ました！
<br>
<b>パラメーターの名前[要素名]</b>
<br>
なので今回は、image[cat_photo]といった具合に記載しました。
下のようにデータ登録した上でSendするといいです。
![スクリーンショット 2020-11-08 9.33.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639411/81f8f3cc-33bb-2a79-ccb4-8c45c4362911.png)
データベースを確認、、、
ない！と思ったら
![スクリーンショット 2020-11-08 9.41.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639411/85aab610-11a5-cc77-a0e2-5540947248fb.png)
active_storageにきちんと紐づいた形で収まってました。
![スクリーンショット 2020-11-08 9.40.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639411/e709a1d7-8761-3a50-8d21-c77a9e01ded8.png)
PlotlyのLayoutに書くdomain属性って何？

このテーマに関して、英語のドキュメントにはコードと実行結果しか載っておらず、
ちょっとわかりにくかったのでその解説を残しておきます。

<h1>domain属性の使いどころ</h1>
<ol>
  <li>１つの画像に複数のグラフを配置したい時の位置指定</li>
  <li>（x軸またはy軸を共有）同じグラフ内に複数のデータを重ねたい時の位置指定。これにはdomainの他にも軸の設定とか調整が必要なので説明は省略します。</li>
  <li>  他にもこういう時に使うよ、というのがあれば教えてください！</li>
</ol>

<h1>参考ドキュメント</h1>
https://plotly.com/javascript/subplots/#multiple-custom-sized-subplots

これはJavaScriptのドキュメントですが、Pythonで書くときの参考にできます。


この <b>multiple-custom-sized-subplots</b> という項目では
上記の用途１の、与えられた１つのエリア内に複数のグラフを表示するときの、
<b>配置とサイズ</b>を設定しています。

JSとHTMLのコードをCodePenですぐ描画確認できるので、試してみてください。


<h1>実際のコード(JS)</h1>

```
var plot1 = {
  x: [1, 2],
  y: [1, 2],
  type: 'scatter',
  name: '(plot1)'
};

var plot2 = {
  x: [1, 2],
  y: [1, 2],
  type: 'scatter',
  name: '(plot2)',
  xaxis: 'x2',
  yaxis: 'y2'
};

var plot3 = {
  x: [1, 2],
  y: [1, 2],
  type: 'scatter',
  name: '(plot3)',
  xaxis: 'x3',
  yaxis: 'y3'
};

var data = [plot1, plot2, plot3];

var layout = {
  title: '複数プロットのサイズをカスタマイズ',
  xaxis: {
    domain: [0, 0.45],
    anchor: 'y1'
  },
  yaxis: {
    domain: [0, 1],
    anchor: 'x1'
  },
  xaxis2: {
    domain: [0.55, 1],
    anchor: 'y2'
  },
  yaxis2: {
    domain: [0.55, 1],
    anchor: 'x2'
  },
  xaxis3: {
    domain: [0.75, 1],
    anchor: 'y3'
  },
  yaxis3: {
    domain: [0, 0.45],
    anchor: 'x3'
  },
};

Plotly.newPlot('myDiv', data, layout);
```
<h1>実際のコード(HTML)</h1>
```
<head>
	<!-- Load plotly.js into the DOM -->
	<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>

<body>
	<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>
```
<h1>描画結果</h1>
このような配置になっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462013/2a4bcb59-2fcb-8e83-5306-06f652f73956.png)

<h1>domainで指定する値の解説</h1>
domain は 領域という意味です。
xaxis(x軸): と yaxis(y軸): 両方に domain属性があるのが分かります。
このそれぞれのdomainで座標の範囲を設定します。

以下Layout内の記載

```
  xaxis: {
    domain: [0, 0.45],
    anchor: 'y1'
  },
  yaxis: {
    domain: [0, 1],
    anchor: 'x1'
  },
```
与えられた描画面積の、横（x）と縦（y）のそれぞれの最長を<b>１</b>としたときの
小数の値で指定します。

上のplot１の例では、
x軸の <b>domain:[0, 0.45]</b> は　<b>0〜0.45</b> の範囲
y軸の <b>domain:[0, 1]</b> は　　<b>0〜1</b> の範囲　ということになっています。
![スクリーンショット 2020-11-08 7.54.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462013/8aa979e6-f5d1-cb0f-6521-aeaf18e335a1.png)
※描画されたウィンドウのサイズが変わったので、この画像が少し横に伸びたように見えてしまっています。

<h1>ちなみに</h1>
私が最初にドキュメントをみたとき、0.55やと0.75のような数がややこしかったので0.5と1で設定してみました。
すると下のように、グラフの終端ともう一つの軸の開始がかぶってしまいました。
グラフ間は10％くらい開けておくのがスタンダードのようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462013/7315d25f-0366-87c8-33cb-55e2c532dcf4.png)

<h1>最後に</h1>
コードと描画結果をみただけで理解できた方も結構いたかもしれませんが、
私は、初見で[0.55, 1]がマジックナンバーにしか見えず混乱しました。数学の基礎って大事ですね！


補足：複数グラフの扱いについて疑問のある方は、<a href="https://plotly.com/javascript/subplots/">こちら</a>のPlotlyのJavaScriptドキュメントの[Try It On CodePen]で動作確認するのがおすすめです。
vistaでvs2010

#概要

vistaで、visual studio 2010やってみた。
コマンドプロンプトで、C++をコンパイルしてみた。

#コマンドプロンプトで、exeをコンパイル。

```
cl sampleA.cpp kernel32.lib user32.lib gdi32.lib
```

#サンプルコード

sampleA.h

```
#define MENU_NAME   	NULL
#define WIN_W	   		500
#define WIN_H	   		180
#define WIN_X	   		100
#define WIN_Y	   		50

```

sampleA.cpp

```

#include <windows.h>
#include "sampleA.h"

#define CLASS_NAME  	"Sample_A1Class"
#define WIN_TITLE   	"Sample_A1"
LRESULT CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM);
BOOL InitApplication(HINSTANCE);
BOOL InitInstance(HINSTANCE, int);
int APIENTRY WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine, int nCmdShow) {
	MSG msg;
	if (!hPrevInstance)
	{
		if (!InitApplication(hInstance))
			return FALSE;
	}
	if (!InitInstance(hInstance, nCmdShow))
	{
		return FALSE;
	}
	while(GetMessage(&msg, NULL, 0, 0))
	{
		TranslateMessage(&msg);
		DispatchMessage(&msg);
	}
	return msg.wParam;
}
BOOL InitApplication(HINSTANCE hInstance) {
	WNDCLASS wc;
	wc.style = CS_HREDRAW | CS_VREDRAW;
	wc.lpfnWndProc = (WNDPROC) WndProc;
	wc.cbClsExtra = 0;
	wc.cbWndExtra = 0;
	wc.hInstance = hInstance;
	wc.hIcon = LoadIcon(hInstance, IDI_APPLICATION);
	wc.hCursor = LoadCursor(NULL, IDC_ARROW);
	wc.hbrBackground = (HBRUSH) (COLOR_WINDOW + 1);
	wc.lpszMenuName = MENU_NAME;
	wc.lpszClassName = CLASS_NAME;
	return(RegisterClass(&wc));
}
BOOL InitInstance(HINSTANCE hInstance, int nCmdShow) {
	HWND hWnd;
	hWnd = CreateWindow(CLASS_NAME, WIN_TITLE, WS_OVERLAPPEDWINDOW, WIN_X, WIN_Y, WIN_W, WIN_H, NULL, NULL, hInstance, NULL);
	if (!hWnd)
		return FALSE;
	ShowWindow(hWnd, nCmdShow);
	UpdateWindow(hWnd);
	return TRUE;
}
LRESULT CALLBACK WndProc(HWND hWnd, UINT uMsg, WPARAM wParam, LPARAM lParam) {
	HDC hDC;
	PAINTSTRUCT ps;
	int ret;
	switch(uMsg)
	{
	case WM_PAINT:
		BeginPaint(hWnd, &ps);
		hDC = ps.hdc;
		TextOut(hDC, 10, 10, "SDK -> MFC", 10);
		EndPaint(hWnd, &ps);
	break;
	case WM_LBUTTONDOWN:
		hDC = GetDC(hWnd);
		TextOut(hDC, LOWORD(lParam), HIWORD(lParam), "Hello World", 11);
		ReleaseDC(hWnd, hDC);
	break;
	case WM_CLOSE:
		ret = MessageBox(hWnd, "プログラムを終了しますか", "確認", MB_YESNO | MB_ICONQUESTION);
		if (ret == IDYES)
			DestroyWindow(hWnd);
	break;
	case WM_DESTROY:
		PostQuitMessage(0);
	break;
	default:
		return(DefWindowProc(hWnd, uMsg, wParam, lParam));
	}
	return 0;
}



```


以上。
Adapter Pattern

#Adapter Pattern
<font color="#00f">あるクラスのメソッドを再利用する
再利用されるクラスを修正したりはしない</font>

Adapter Patternは以下の2つの方法があります
・再利用されるクラスをextendsしたクラスを利用する
・再利用されるクラスをインスタンス化して利用する

[Design Pattarm MENU](https://qiita.com/old_cat/items/852d980bedb9100dd7e3)
##再利用されるクラスをextends

以下のクラス構成で確認します

|クラス|説明|
|-----|----|
|sam.class|再利用されるクラス|
|adapt.class|sam.classのsam()を、adapt.classのexec()でラップして再利用する|
|user(Main.class)|Adapter Patternを使う|
＊user　他の開発者がこのパターンを利用する、という意味合いを含みます

```java:sam.class
class sam {
  void sam(){System.out.print("base");}
}
```
```java:adapt.class
class adapt extends sam{
  void exec(){
       System.out.print("<<< ");    // A
       sam();                       // sam.classのsam()メソッド
       System.out.println(" >>>");} // A
}                                   // Aでsam()をラップしてます
```
```java:user(Main.class)
public static void main(String[] args){
  adapt ad= new adapt();
  ad.exec();
}}
```

##再利用されるクラスをインスタンス化
構成は上記と同じで、adapt.classを変更します

```java:adapt.class
class adapt extends sam{
  sam s=new sam();
  void exec(){
       System.out.print("<<< ");
       s.sam();
       System.out.println(" >>>");}
}
```
【JavaScript】submitイベント

#プログラミング勉強日記
2020年11月8日
submitイベントについて、短くまとめる。

#submitイベントとは
ユーザーが\<input type='submit'>や\<button>をクリックしたり、
フィールド内でenterを押すと、イベントが発生する。

#submitイベントの書き方

```index.html
  <form action="#" id="form">
        <input type="submit" value="検索" id="input">
    </form>
```

```script.js

document.getElementById('form').onsubmit = function() {
    console.log('クリックされました');
}

```
form要素のid属性を取得して、submitイベントが発生したら、コンソールにクリックされましたと文字列を表示する。

#注意点
input要素のid属性やbutton要素を取得しても、submitイベントは発生しない。
submitイベントはform要素自身で発生するもの。


```script.js

document.getElementById('input').onsubmit = function() {
    console.log('クリックされました');
}

```
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">メモ<br>submitイベントはform要素自身で発生するもの。<br>input要素のid属性やbutton要素を取得しても、submitイベントは発生しない。 <a href="https://t.co/il29OK99CR">pic.twitter.com/il29OK99CR</a></p>&mdash; ミキ🐹@プログラミング (@mikiprogram) <a href="https://twitter.com/mikiprogram/status/1325228556369027073?ref_src=twsrc%5Etfw">November 8, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

twitterにinput要素のid属性を取得した場合の挙動をツイート

#formの入力内容を読み取る
```index.html
<section>
  <form action="#" id="form">
        <input type="text" name="word">
        <input type="submit" value="検索" id="input">
  </form>
  <p id="output"></p>
</section>
```
```script.js


//form要素のid属性を取得し、変数formに代入
let from = document.getElementById('form');

//p要素のid属性を取得し、変数outputに代入
let output =document.getElementById('output');

//取得したform要素内の送信ボタンがクリックされた時に発生
form.onsubmit = function (event) {

//form要素の基本動作をキャンセル
event.preventDefault();

//テキストフィールドの入力内容が定数searchに代入
const search = form.word.value;

//取得したp要素のコンテンツを『${search}』の検索中...に書き換える
output.textContent = `『${search}』の検索中...`;
}

```

#参考資料
* [HTMLFormElement: submit イベント](https://developer.mozilla.org/ja/docs/Web/API/HTMLFormElement/submit_event)

* [element.name](https://developer.mozilla.org/ja/docs/Web/API/Element/name)

* [Event.preventDefault()](https://developer.mozilla.org/ja/docs/Web/API/Event/preventDefault)
Java Design Patterns

#デザインパターンまとめ

オブジェクト指向とはシステムの開発、保守、拡張時に、追跡困難なバグの発生を抑えるために、様々な工夫を施す開発指向です。

java デザインパターンは、クラスの再利用性を高めることで拡張しやすく、保守しやすいシステムづくりを指向します。


下記は未完成なMenuです
*はリンク切れしてます

##Menu
[Iterator](https://qiita.com/old_cat/items/5b8d22650e85109e93a2)
[Adapter](https://qiita.com/old_cat/items/673f09a8308c7d658012)
[Template Method](https://qiita.com/old_cat/items/a18975c92f1ff6dcc41a)
[Factory Method](https://qiita.com/old_cat/items/4caf7ac104070886c56e)
[Singleton](https://qiita.com/old_cat/items/80b1db06852e9d52f3f7)
[Prototype](https://qiita.com/old_cat/items/950e85d5e9baf9cdd668)
[Builder](https://qiita.com/old_cat/items/45a4a2e4772004ed3935)
[Abstract Factory](https://qiita.com/old_cat/items/00a9a53b48637bc0f910)
[Bridge](https://qiita.com/old_cat/items/2fbb5f36796554c272dd)
[Strategy](https://qiita.com/old_cat/items/70437f3c8215dd0e3b14)
[Composite](https://qiita.com/drafts/716fd23a1422622609a5/edit)
[Decorator](https://qiita.com/old_cat/items/c7ede455af9bfa047448)
[Visitor](https://qiita.com/old_cat/items/da69feb3f7cd5750492a)
[Chain of Responsibility](https://qiita.com/old_cat/items/27b1c65d57255141ceb4)
[Facade](https://qiita.com/old_cat/items/a80326429e449c26afd7)
[Mediator](https://qiita.com/old_cat/items/cd26fc238e240c70d85e)
[Observer](https://qiita.com/old_cat/items/2407b0ca2d1091bcf253)
[Memento](https://qiita.com/old_cat/items/0e389c3bfd99661ca34f)
[State](https://qiita.com/old_cat/items/d0ffaabef66064314d40)
[Flyweight](https://qiita.com/old_cat/items/c6f8004afdc3dee8172a)
[Proxy](https://qiita.com/old_cat/items/6dc0512987eb09b53c30)
[Command](https://qiita.com/old_cat/items/3b23bc9696d730e092c7)
*[Interpreter]()

##オブジェクト指向のヒント
オブジェクト間の依存性を薄める

・抽象クラスやインターフェイスプログラミングを意識する
・正しく動くクラスは修正せず拡張して使う
・ The Liskov Substitution Principle(LSP)を意識する
　 Superクラス型の変数を利用して、そのサブクラスを一括して扱う
　 instanceofを使いたくなったら意識する（instanceofではなくLspでできないか？）
スクラム開発のWHY

# スクラムの説明の問題
よくあるスクラムの説明では、**HOWにフォーカス**していて**WHYにフォーカス**してないものが多いように思います。

会社ではスクラムマスターしているのですが始めた当初はWHYを理解できておらず、誤った方向にスクラムを導いてしまったり、本当のメリットが享受できていなかったです。
そんな自分の失敗から学んだ、それぞれのルールのWHYを共有したいと思い記事にしました。

# スクラム開発のWHY！

## なぜ自己組織化？
スクラムではトップダウン的な意思決定プロセスではなくチーム自身で判断して行動できること（自己組織化）が求められます。これについては大きく2つのWHYがあると考えています。

### WHY① モチベーションと成果
モチベーションには2種類のモチベーションがあり、一つは給料や罰則による**アメとムチによる外発的モチベーション**です。外発的モチベーションは一般的に浸透している手法ですが、心理学や経済学の研究によって金銭的な報酬を提示されると、人間のクリエイティブな発想が低下し、一度アメをもらうと作業に対して興味・関心が失われることがわかっています。

そのため、スクラムが目指してるのはもう一方の自分がやりたいという意思からくる**内発的なモチベーション**です。内発的モチベーションを持ってもらうためには、目的、スキルアップ、個人裁量の3つを与えることが大切だと言われており、スクラム開発でトップダウン的な意思決定をせず、個人裁量による自己組織化を提唱しているのにはこういった背景があります。

モチベーションについてもっと詳しく知りたい人はダニエル・ピンクの[モチベーション3.0](https://www.amazon.co.jp/dp/B018HVOXBA/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)をぜひ読んでみてください。

### WHY② 無駄を減らす
スクラム開発では無駄を極限まで減らすという考えがあります。そのためマネージャーや管理者などの余分な役職の定義がありません。
これはシンプルな理由ですが、誰かが管理者になる場合はその人がボトルネックになる可能性があります。また、問題を一番理解している現場の開発者が、わざわざ上司に報告するのは無駄だからです。

## なぜイテレーティブ？
スクラムでは2週間程度のスプリントを繰り返して、イテレーティブに開発をおこなっていきます。

### WHY①　チームの改善
スプリントを切らないウォーターフォール的な開発では開発プロセスの検証がされないままの開発が進められる場合が多々あります。
スクラムにはスプリントレトロスペクティブがあり、これを導入することでスプリントごとに開発プロセスやチームの雰囲気など改善がなされることでスプリントを重ねるごとに、より効率的に働くことが可能になります。

### WHY②　アウトプット
新しいシステムを開発するときに漏れがなく、余分なものもない完璧な設計をするのは不可能です。そのため、スクラムではバックログを活用して、価値の高いものから着手することで、余分なものがなく本当に必要な機能が揃ったシステムを開発できます。また、スプリントを繰り返しているので、出来上がったもののフィードバックを素早く得られることができ、ビジネスの変更にも強くなります。

## 指標の導入は？
スクラムでは他のアジャイル手法とは違い、ベロシティなどの指標は一切出てきません。指標は導入してはいけないというルールはありませんが、安易な指標の導入には大きなリスクがあります。

### WHY①　局所最適
例えばベロシティに着目すれば、工数の過剰見積もりに繋がる可能性があります。不具合の件数に着目すると改修をしなくなったり、重要だけど複雑な部分を避ける可能性出てきます。
この現象は局所最適と呼ばれていて、本当に大切なことは顧客体験の最大化にも関わらず、そこにフォーカスがされなくなることがあります。

### WHY②　個人よりチーム
局所最適の話とつながりますが、指標が個人のスキルにフォーカスするようなものになると、自分自身のパフォーマンスを上げるために、チームとしてのパフォーマンスに目が向きづらくなります。例えばベロシティを重視した場合に、ソースレビューや新人のサポートは自分自身のパフォーマンスの低下を引き起こします。

いかに優秀なメンバーを揃えても、バトンを落としてしまってはリレーでは勝てないのと同じように、本当の目的を見失ってしまうと開発が失敗に終わることになります。

# 最後に
私自身まだまだスクラム勉強中なので、どんどん新しいことがあれば追加していこうと思います。
内容はあくまで私の意見なので、ご意見ご指摘あればぜひコメントいただけると嬉しいです。
LINE BOT にGoogleカレンダー予定を通知

#はじめに

###前提
* ラインボットのアカウント
https://first-contact.jp/blog/article/linebot/

* Googleカレンダーに予定をいれる
* 通知を送りたいラインに友達登録をしておく

###大まかな流れ
1. ラインボットからアクセストークンを取得
2. コード解説
3. 最後に


###ゴール
毎日の設定した時間に今日の予定を通知してくれます☕️


##1.作成したアカウントに移動し、アクセストークンをコピーします。

![スクリーンショット 2020-11-08 7.20.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538355/3953e12f-c382-6337-9d69-62afcf50a936.png)


##2. コード解説

```index.gs
var access_token = "ACCESS_TOKEN" //<= LINEのアクセストークン

function getCalendar() {
  var startDate = new Date();
  const CALENDAR_IDS = ["********@gmail.com"]; //<=　Googleのメールアドレス（複数可能）
  let message = []
  
  CALENDAR_IDS.forEach(function(CALENDAR_ID){
    var myCalendar = CalendarApp.getCalendarById(CALENDAR_ID)
    var myEvents = myCalendar.getEventsForDay(startDate)
    
    myEvents.forEach(function(event){
      event.getTitle()
      event.getDescription()
      var eventStartTime = event.getStartTime();
      eventStartTime = Utilities.formatDate(eventStartTime, 'JST', 'HH:mm');
      if (event.getTitle()) {
       message.push(eventStartTime + '：' + event.getTitle() + '\n\n')
      }
      if (event.getDescription()) {
       message.push(event.getDescription() + '\n\n\n')
      }
    });
  })  
  message = message.join('');
  return push(message);
}


//メッセージを送信する関数を作成
function push(message) {
  var url = "https://api.line.me/v2/bot/message/push";
  var headers = {
    "Content-Type" : "application/json; charset=UTF-8",
    'Authorization': 'Bearer ' + access_token,
  };

  var postData = {
    "to" : to,
    "messages" : [
      {
        'type' : 'text',
        'text' : message
      }
    ]
  };
  
  var options = {
    "method" : "post",
    "headers" : headers,
    "payload" : JSON.stringify(postData)
  };

  return UrlFetchApp.fetch(url, options);
}
}
```

- １行目、LINEアクセストークン設定

```
var access_token = "ACCESS_TOKEN" //<= LINEのアクセストークン
```

- 2行目、カレンダー情報を取得したいGoogleアカウントのメールアドレス設定

```
const CALENDAR_IDS = ["********@gmail.com"]; //<=　Googleのメールアドレス（複数可能）
```

- 3行目~25行目

今回は、複数のアカウント設定を想定していますので、foreachでループ処理をしています。

- 25行目以降で、LINEにメッセージを送るためのパラメータを設定しています。


##3. 最後に

どうですか？うまく送信できましたか？☕️

定期実行、トリガーの設定方法
https://tonari-it.com/gas-timed-driven-trigger/

メッセージタイプを変更したい場合、
https://developers.line.biz/ja/reference/messaging-api/#rich-menu

カレンダー📆取得内容変更したい場合、
https://developers.google.com/calendar/v3/reference/events#resource
WordPressでjQueryが読み込まれない時に見るポイント

WordPressでjQueryを読み込んだときに、動かないことがたまにあります。
その際に、見ておくべきポイントを抑えておきましょう！

# $を使ってないですか？
静的サイトでjQueryを使用していた方だとこのようにコードを書いているのではないでしょうか？

```script.js
$(document).ready(function(){
    ここにjQueryの処理を書く
});

//または

$(function(){
    ここにjQueryの処理を書く
});
```
ちなみにここで書かれている`$(document).ready(function(){ `はHTMLの読み込み完了後に処理を実行するという記述になります

でも、実はWordPressでは＄を使うと動かない仕様になっています。
WordPressでは他のライブラリも使用しており、jQuery同様に$を使用するものがあるため衝突をさけるために機能しないようにされているようですね。
なので、このように書き換える必要があります。

```script.js

jQuery(function(){
    ここにjQueryの処理を書く
});

```
こちらの記事が勉強になります。
https://www.buildinsider.net/web/jqueryref/067
https://briarpatch.co.jp/wp-jquery

# <?php wp_footer(); ?>を読み込んでいますか？
こちら、意外と盲点でした。
WordPressでテーマ開発をするときに、意味もわからず、`wp_header()`と`wp_footer()`を読み込んでいるのですが非常に大切な役割があるので解説していきます。

`wp_header`は</head>タグの直前に記述する必要があります。

```index.php
<head>
<? php wp_header(); ?>
</head>
```
ここでは、`wp_header`を読み込むと、`functions.php`からstyle.cssの情報を呼び出すことができます。

`functions.php`への記載の仕方は下記をみてみてください。
https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_enqueue_style

`wp_footer`は`</body>`の直下に記載します。

```index.php
</body>
<?php wp_footer(); ?>
</html>
```

`wp_header`同様に`functions.php`から`script.js`を読み込むように設定します。

こちら参考サイトです。
https://blog.yuhiisk.com/archive/2016/09/02/js-scripts-in-wp-footer.html

テーマ開発する際には、多くの方が`functions.php`から読み込むように設定しているかと思います。
なので、`wp_footer`がないとjsを読み込まれないといった現象が起きるわけですね。

#まとめ
styleやjs読み込まれないと焦りますよね。でも、一つずつ原因を絞っていけば必ず動くようになりますので焦らず取り組んでいきましょう〜！
Bashで湯婆婆を実装してみる（短）

元ネタ: [Javaで湯婆婆を実装してみる](https://qiita.com/Nemesis/items/c7192a7c510788d2cba2)
Bashの亜種: [Bashでエイリアスを作ってくれる湯婆婆コマンドを実装してみた](https://qiita.com/namn1125/items/9e2e1a01a53334daf35c)
贅沢なコードが多いので、短めに（124文字、256バイト、ただし最終行も含めた改行含む）。


```yubaba.sh
echo 契約書だよ。そこに名前を書きな。
read X
echo フン。$Xというのかい。贅沢な名だねぇ。
Y=${X:$RANDOM%${#X}:1}
echo 今からお前の名前は$Yだ。いいかい、$Yだよ。分かったら返事をするんだ、$Y!!
```


入力が無い場合は

```
$ bash yubaba.sh
契約書だよ。そこに名前を書きな。

フン。というのかい。贅沢な名だねぇ。
yubaba.sh: 行 4: X: 2818%0: 0 による除算です (エラーのあるトークンは "0")
今からお前の名前はだ。いいかい、だよ。分かったら返事をするんだ、!!
```

以上
【Swift】SCNNodeの色を変更する

SceneKit View上に描画をした際に、描画の色を変更したかったので調べました。

|実行環境|バージョン|
|:--|:--|
|Swift|5|
|Xcode|12.0|

例としてballのnodeを作成しています。

```swift:
let ball = SCNSphere(radius: 0.01)
let node = SCNNode(geometry: ball)

//色変更のコード
ball.firstMaterial?.diffuse.contents = UIColor.red
```

<code>UIColor.Red</code>の部分にお好みの色を入れると色変更が出来ます。