OmniAICreator/Qiita-1.07M huggingface dataset:
CDK(TypeScript)で既存のS3 Bucket上のLambdaを指定する


aws-cdkでの環境構築メモです。
特定のBucketへのPutをトリガーに発火するLambdaを作っています。
ただし、Lambdaのコードベースはcdk管理外のS3で管理されているものとします。


## 1. fromCfnParametersのdefault値で無理やり当てる


```typescript
...
    /* S3  */
    const originalVideoBucket = new Bucket(this, `OriginalVideoBucket` , {
      bucketName: resources.originalVideoS3Bucket.name,
      removalPolicy: cdk.RemovalPolicy.DESTROY, // RETAIN
      versioned: true,
      publicReadAccess: false,
    });

    const fn = new lambda.Function(this, 'OriginalVideoAssetUploaded', {
      functionName: resources.originalVideoUploaded.lambdaName, 
      runtime: lambda.Runtime.GO_1_X,
      handler: 'main',
      memorySize: 128,
      code: lambda.Code.fromCfnParameters({
        bucketNameParam: new CfnParameter(this, "OriginalVideoBucketLambdaSourceBucket" , {
          default: <既存のS3Bucket>,
        }),
        objectKeyParam: new CfnParameter(this, "OriginalVideoBucketLambdaSourceS3Key" , {
           default: <既存のS3Key>,
        }),
      }),
    });

    fn.addEventSource(new  eventSource.S3EventSource(originalVideoBucket , {
      events: [ EventType.OBJECT_CREATED],
    }))

```

## 2. Bucket.fromBucketName

```typescript
    const resourceBucketRef = Bucket.fromBucketName(this , `resource` , resources.resourceS3Bucket.name);

    const regionalUserApiLambda = new lambda.Function(this, 'RegionalUserApi', {
      functionName: resources.userApi.lambdaName,
      runtime: lambda.Runtime.GO_1_X,
      handler: 'main',
      memorySize: 128,
      timeout :  Duration.seconds(10),
      code: lambda.Code.fromBucket(resourceBucketRef , resources.userApi.lambdaS3Key)
    });


```

## 3. ``` @aws-cdk/aws-sam ``` の方のCfnFunctionを使う
```typescript
import * as Sam from "@aws-cdk/aws-sam"
....
....

    const samFunction = new Sam.CfnFunction(this, 'OriginalVideoAssetUploaded', {
      functionName: resources.originalVideoUploaded.lambdaName,
      codeUri: {
        bucket : <既存のS3Bucket>,
        key: <既存のS3Key>
      },
      handler: 'main',
      runtime: 'go1.x',
      memorySize: 128,
      timeout: 3,
      events: {
        "mys3event": {
          type : `S3`,
          properties : {
            bucket : originalVideoBucket.bucketName,
            events : `s3:ObjectCreated:*`,
          },
        },

      },
    });

```

こっちのパターンはs3 eventの方がうまく設定されないのでちょっとCloudformationとしての構文出力と照らし合わせて検証中です
Pythonを使い始める

#Pythonエントリークローラー
これは私の**最初**のpythonプロジェクトです、ここで共有してください〜
--by yolo

- 現在、大まかな機能として、ユーザーが映画のチケットや電車のチケットの購入などのイベントを受け取る製品を開発しています。 次に、アプリはSMSを読み取り、SMSを解析し、時刻と場所を取得し、バックグラウンドで自動的にメモを作成して、イベントの1時間前にユーザーに通知します
- このプロジェクトは `python3` のバージョンを使用します


```ruby:init.py

# -*- coding: UTF-8 -*-  
 
# import need manager module  
import MongoUtil  
import FileUtil  
import conf_dev  
import conf_test  
import scratch_airport_name  
import scratch_flight_number  
import scratch_movie_name  
import scratch_train_number  
import scratch_train_station  
```
[original source](https://blog.csdn.net/u014044812/article/details/78894108?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522159065468819726869022711%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=159065468819726869022711&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v2~pc_rank_v3-3-78894108.first_rank_ecpm_v2_pc_rank_v3&utm_term=python%E7%88%AC%E8%99%AB)
CentOS8 + Apache2.4.37 + php7.2(php-fpm) で HTML ファイルの中で PHP を実行する

# Apache と PHP のインストール
```bash
# yum install httpd php
```

# Apache と PHP の起動と自動起動の設定
```bash
# systemctl start httpd
# systemctl enable httpd
# systemctl start php-fpm
# systemctl enable php-fpm
```

# PHP の設定変更
```bash
# vi /etc/php-fpm.d/www.conf
```
security.limit_extensions のコメントアウトを外し、末尾に .html を追加する。

```bash
# vi /etc/httpd/conf.d/php.conf

<FilesMatch \.(php|phar)$>
を
<FilesMatch \.(php|phar|html)$>
のようにファイルの種類に html を追加する。
```

各サービスを再起動する

```bash
# systemctl restart httpd
# systemctl restart php-fpm
```
console.logでフォーマット指定子を使う！

# console.log()

JavaScriptの`console.log()`でC言語のようなフォーマット指定子が使えることを知ったので、まとめておきます。

(追記：6/23)
`console.log()`に限らず、consoleオブジェクト全般の使い方について、以下の記事にまとめてみましたので、参考にしてください。
[【consoleオブジェクト完全版】ログ出力を極める！](https://qiita.com/sa9ra4ma/items/bc6c12044582126c1be9)


# 通常

とりあえず通常の書き方
`console.log("hoge")`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638864/5d3a9bf6-a3b6-668a-5cd3-64ed05165ed3.png)


# %s

ただの文字列
いまいち使い道が分かりません
`console.log("%s", hoge)`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638864/cf248733-bebe-d185-fe20-0a68e5b3fa5a.png)


こっちで十分ですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638864/0abb9d1b-bab8-2817-aa6f-34f3db039908.png)


しいて言うならこれですかね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638864/7e593be4-d47f-9e5a-86b6-2c94a19ad061.png)
`...arry`はスプレッド構文という書き方で、配列やオブジェクトを展開してくれます。


# %oまたは%O

つまずきがちなObjectの出力
`consol.log("%o", hoge)`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638864/087b8913-f307-1e1d-4209-8a19409ff67e.png)

これでもできますけどね
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638864/b2d0443b-c2b4-01ef-0c92-0ddc539bf712.png)

ちなみに`%O`
いまいち違いが分かりません
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638864/41bedcd2-f79e-0d56-3f8c-a263aff69cd7.png)

# %dまたは%i

お次は整数値です。
`console.log("%d", hoge)`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638864/3a8c176b-bfab-fa7a-6cbe-372655ad717f.png)

0埋めや半角スペース埋めもできます。
これはChromeやSafariでは使用できませんでした。
下記画像はFirefoxでの検証結果です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638864/5cc5d953-908a-c9ff-ea3f-1e82a8b07907.png)

ちなみに小数を表示しようとすると、小数点以下は切り捨てられます。
入力: 1.1 → 出力: 1
入力: -1.1 → 出力: -2

# %f

浮動小数点です。
`console.log("%f", hoge)`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638864/2b0e071c-a659-4034-6806-99645e927c77.png)

小数点以下の桁数指定ができます。
これもChromeやSafariでは使用できなかったので、Firefoxでの検証結果です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638864/f1c89c7d-aadb-39fa-0bf1-772fffd88b0e.png)


# %c

出力にCSSスタイルを適用できます。
`console.log("%cあいうえお", style)`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638864/430b1457-68c8-d5f4-27f1-2546c5471dec.png)



---
[参考サイト](https://developer.mozilla.org/ja/docs/Web/API/console#Outputting_text_to_the_console)
🔰【UiPath】<input type="file"・・・>タグの［参照］ボタンを『クリック』する方法

# ■ はじめに
UiPath触り始めて半月くらいの初心者です。
つまづいたところと、どのように解決したかを、メモっていきます。

# ■ 課題

IE11で、タグが
`<input type="file">`
云々となっている［参照］ボタンを**クリック**アクティビティでクリックできずにハマったのでメモ。

ボタンのイメージはこんな感じ。
　↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/398135/525f6530-287a-55a3-099b-52a8bc99c7c4.png)
［参照］ボタンを押してファイルを選択すると、パスを含んだファイル名が左側の欄にプレビューされるようになっていて、直接編集はできないので、どうしても［参照］ボタンを押さなければならない。
そのくせ、要素を選択しようとすると、ファイル名の欄と参照ボタンが丸ごと選択されてしまう。



# ■ 解決策

「クリックの種類」を**CLICK_DOUBLE**にする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/398135/90b8b515-4f7e-c701-0087-f6ce88528526.png)

### ※注意！

「クリックをシミュレート」は**False**にしておく。
　⇒ True にしてハマった・・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/398135/e71dce06-f379-f6a3-1d24-7533d1b739ce.png)

# ■ おわりに

もっと適切な方法があるのかもしれません。
見つけたら追記していきます。
インスタンスメソッドとクラスメソッドの違い

Rubyに関して学習中に表題の部分で混乱してしまったので、
整理するためにもまとめて見ました。

※誤っている点がありましたら、ご指摘いただけると幸いです。。。

#インスタンスメソッドとクラスメソッドの違い

    class Example
      def index
      end
    end
      
      
      ①example = Example.new 
      example.index  //インスタンスから呼び出す　→○

      ②Example.index  //クラスから直接呼び出せない　→こちらを使用する際はメソッドにself.をつける（self.index）

      index  //もちろんこれではエラー表示


要するに、基本メソッドを呼ぶ際は、インスタンスを作成してそこからよび起こす（①）。
→インスタンスメソッド

②のようにインスタンスの作成をせずともメソッドを呼び起こす方法。
→クラスメソッド

といったようなイメージ。

クラスメソッドの使用のメリットとしては、他インスタンスの情報を含まないメソッドとして使用できる点があるようです（具体例はわからなかったので、わかり次第まとめます。）
まずはクラスと関係性はあるが、他インスタンスの情報を含まない独立したメソッドという認識でOKそう。
fullcalendarのイベントを特定の条件のイベントだけ表示させる方法

Qiita初投稿です。よろしくお願いします。
fullcelndarのイベントをユーザー詳細画面でそのユーザーのみのイベントで表示させる時に、苦戦したので備忘録として投稿させていただきます。

#準備
本記事は特定のイベントの表示を目的にしているため、準備は自分が参考にした記事を貼らせていただきますので、参考にしていただけたらと思います。この記事の通りに実装してもらったらカレンダーは表示できると思います。
[参考記事](https://qiita.com/sasasoni/items/fb0bc1644ece888ae1d4)

#目的
では、本来の目的であるユーザーのみのイベントを表示させていきます。

#実装
###ログイン機能の実装

```ruby:Gemfile
gem 'devise'
```

```:ターミナル 
$ bundle install
$ rails g devise:install
$ rails g devise User
$ rails db:migrate
$ rails g devise:views
```
これでユーザーの新規登録ができるようになりました。

###コントローラ
userのコントローラを作ります。

```:ターミナル 
$ rails g controller users show
```

コントローラにイベントを取り出す記述をします。

```ruby:app/controllers/users_controller.rb
class UsersController < ApplicationController
  def show
    @user = User.find(params[:id])
    @events = @user.events
  end
end
```
ユーザー詳細画面にカレンダーの記述をします。

```erb:app/views/users/show.html.erb
<div id="calendar"></div>
```
これで表示されるはず、、ですが恐らくカレンダーだけ表示されてイベントがうまく表示されていないと思います。
原因はjson.jbuilderファイルにあります。

###json.jbuilderはどこを経由してデータを取得しているか
これを理解する必要があります。index画面でカレンダーを表示できたときのターミナルを見てみると

```Rails:ターミナル 
Processing by EventsController#index as JSON
```
とあります。
こちらから指示していないのにEventsControllerのindexアクションを探しに行っているのはなぜでしょう？
実は参考記事の中で指定していました。

```js:application.js
$(function(){
 ･･･
  $('#calendar').fullCalendar({
  events: '/events.json'
});
```
events: '/events.json'という記述で上記のターミナルのような結果になっていました。
今はUsersControllerのshowアクションを探して欲しいので、以下の手順が必要になります。

###1. index.json.jbuilderをshow.json.jbuilderに変更し、usersディレクトリ内に移す。
そのまんまです。中身を少し弄ります。

###2. application.jsの記述をusers/show.html.erbに移す。
```erb:app/views/users/show.html.erb
<div id="calendar"></div>
<script>
$(function () {

          function eventCalendar() {
              return $('#calendar').fullCalendar({});
          };
          function clearCalendar() {
              $('#calendar').html('');
          };
          $(document).on('turbolinks:load', function () {
          eventCalendar();
          });
          $(document).on('turbolinks:before-cache', clearCalendar);

          $('#calendar').fullCalendar({
              events: '/users/<%= @user.id %>',
              //カレンダー上部を年月で表示させる
              titleFormat: 'YYYY年 M月',
              //曜日を日本語表示
              dayNamesShort: ['日', '月', '火', '水', '木', '金', '土'],
              buttonText: {
                  prev: '前月',
                  next: '次月',
                  prevYear: '前年',
                  nextYear: '翌年',
                  today: '今日',
                  month: '月',
                  week: '週',
                  day: '日'
              },
              timeFormat: "HH:mm",
                //イベントの色を変える
              eventColor:'#63ceef',
              //イベントの文字色を変える
              eventTextColor: '#000000',
          });
});
</script>
```

ユーザー詳細画面で表示させたいため、events: '/users/<%= @user.id %>'と記述しました。これでCustomersControllerのshowアクションを呼ぶことができます。カレンダーの表示はできましたか？

#まとめ
gemの動きだけではうまく表示できないので、jsonの知識が少し必要でした。
ご不明な点があれば、コメントしていただけたらと思います。
VisualStudioでincludeディレクトリなどの設定を使いまわす[備忘録]

最近VisualStudioで外部のライブラリを使うことが増えてきたのですが、プロジェクトを作成するたびにinclude,lib等のディレクトリの指定を手作業で行うのが苦痛なため、簡単に出来る方法がないか探しみたら発見したのでその方法をメモしておきます。

#プロパティシートの追加
[表示]->[その他のウィンドウ]->[プロパティマネージャー]を選択してプロパティマネージャを出します。
![qiita01_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411974/5dfb26a8-18cc-b117-d642-42c71390dc4c.png)

プロパティマネージャからプロジェクト名を右クリックし[新しいプロジェクトプロパティシートの追加]を選びます。
![qiita01_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411974/022b8035-8689-436d-5591-c45f7b77f78d.png)
プロパティシートの作成画面がでるのでわかりやすい名前を付け保存場所を決めたら、追加を選択します。
![qiita01_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411974/0b908d05-b803-1b9f-5f94-95e74aaa7110.png)

# プロパティシートの設定
作成したプロパティシートがプロパティマネージャに表示されているので、クリックしてプロパティのページを開きます。
![qiita01_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411974/989dbde9-ead1-5fc9-0960-2ad76024568d.png)

後は自分が追加したいライブラリのpathなどをいつも通り設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411974/bee8b1b3-6670-b4c0-e403-5178aea696b6.png)

#プロパティシートを使いまわす
他のプロジェクトからプロパティシートを読み込ませて設定を共有します。
プロパティマネージャを[開いて](#プロパティシートの追加)プロジェクト名を右クリックし[既存のプロパティシートの追加]を選びます。
![qiita01_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411974/203c3fb9-6904-ce6c-504c-88804a121312.png)

後は、作成したプロパティシートを選べば、プロパティシートの設定がプロジェクトに反映されます。

#終わりに
これでも面倒くさい気がするのでいっそのこと全プロジェクトに反映できるような設定ないかなーって気持ちになっています。
e1000e :Detected Hardware Unit Hang:

ちょっと古めのラックサーバに ubuntu18.04 をインストールして動かしていたら
dmesg に「e1000e :Detected Hardware Unit Hang:」が大量に出るようになった。
トラフィックがない時にも出ている。

ネット上には tso off などの情報があるが解決しない。

https://downloadcenter.intel.com/ja/download/15817/Intel-Network-Adapter-Driver-for-PCIe-Intel-Gigabit-Ethernet-Network-Connections-Under-Linux-
から最新ドライバーをダウンロードしてビルドするためREADMEを読んでいたら以下を発見する。

 既知の問題/トラブルシューティング
 ============================
 82573（V / L / E）TXユニットハングメッセージ

 82573チップセットを備えたいくつかのアダプターは、「TX unit hang」メッセージを表示します
 e1000edriverでの通常の操作。 TSOが有効になっている場合に問題が発生する 
 および無効になっていますが、これは、
 EEPROM。ベンダーへのチップセットの初期リリースには、EEPROMビットがありました。
 機能を有効にしました。問題が発見された後、新しいアダプタは
 EEPROMの機能を無効にしてリリースされました。


 lspci で確認すると確かに 82573V と 82573L を使用している。
READMEの記述に従い

\# ethtool -e enp15s0
Offset          Values
\------          ------
0x0000:         00 e0 81 b1 b7 f1 30 0b 47 f6 02 10 ff ff ff ff
0x0010:         ff ff ff ff 6b 22 11 52 f1 10 9a 10 86 80 de ac
                                                          
0x001e が de はだめで df になる必要がある。
スクリプトをダウンロードして実行する。

\# wget http://e1000.sourceforge.net/files/fixeep-82573-dspd.sh

\# bash fixeep-82573-dspd.sh enp15s0
enp15s0: is a "82573L Gigabit Ethernet Controller"
This fixup is applicable to your hardware
executing command: ethtool -E enp15s0 magic 0x109a8086 offset 0x1e value 0xdf
Change made. You *MUST* reboot your machine before changes take effect!

\# ethtool -E enp15s0 magic 0x109a8086 offset 0x1e value 0xdf

再起動したことろ、２度と「e1000e :Detected Hardware Unit Hang:」は出なくなった。

結局、ドライバーを更新せずにパッチだけの対応で完了した。

初期チップの不良とは、それをパッチで修正できるとは Intel やりますね。
Gitでやらかしたコミット＆プッシュを無かったことにした話

こんにちは、@0yanです。
運用中のアプリのコード修正時、直前の`git add`を取り消したかったのですが、某記事に書いてあった「はじめてのgit addを取り消す」という内容を**「最近行ったaddの1回目を取り消す」**という意味だと勘違いし、`git rm --cached -r .`を実行後、マスターブランチに`git push`するという大失態を犯しました。`git init`した後の`git add`を取り消すという意味だったらしく、GitHubのマスターブランチは空っぽに･･･。

本記事はそれを解決したという記事です。こんなしょうもないことをする人はいないと思いますが、万が一、私と同じことをしてしまった方がいた時に役立つよう投稿しておきます。あぁ、恥ずかしい。


# 解決手順
1. GitHubのリモートリポジトリで元に戻したいコミットのコミットIDを調べる
2. ローカルリポジトリで元に戻したいコミット以降のコミット（=やらかしたコミット）を、`git reset --hard [1で調べたコミットID]`によって削除
3. `git push -f origin master`でリモートリポジトリに強制プッシュ


# 補足
`git reset`はあまり推奨されない方法らしく、本当は`git revert`を使った方が良いそうです。詳しくは以下の記事等をご参照ください。

[【Git】間違ってpushした場合の取り消し方](https://qiita.com/kazu56/items/ce6eafa67a09463e6064)


# 参考文献
[git commit を取り消して元に戻す方法、徹底まとめ](http://www-creators.com/archives/1116#_push)
[Python] 二分探索　ABC155D

#[ABC155D](https://atcoder.jp/contests/abc155/tasks/abc155_d)


小さい順に K 番目の値を求めよ
⇒　x 以下のものが K 個以上あるような、最小の x を求めよ

内容は下記の引用である。この投稿は私的メモである。
[ABC155【D問題の復習】文字起こしをするくらいの勢いで解説動画を復習したら、二分探索の苦手感が減ってきた](https://note.com/tak_nakamori/n/n78a5ad8330aa)

[AtCoder Beginner Contest 155(ABC155) A～E解説](https://note.com/tanon_cp/n/ne423915acdaa)

```python:サンプルコード
n,k=map(int,input().split())
arr=list(map(int,input().split()))
arr=sorted(arr)
nc=0
zc=0
pc=0

# 負数の数(nc)、0の数(zc)、正数の数(pc)を数える
for i in range(n):
 if arr[i]<0:
   nc+=1
 elif arr[i]==0:
   zc+=1
 else:
   pc+=1

# 積が負となるペアの個数を求める
ncc=nc*pc
# 積が0となるペアの個数を求める
zcc=zc*(nc+pc)+(zc*(zc-1))//2
# 積が正となるペアの個数を求める
pcc=(nc*(nc-1))//2+(pc*(pc-1))//2

# K番目の値が負の場合
if k <= ncc:
 arr1=[]
 arr2=[]
 # 負数、正数をそれぞれ昇順に並べる
 for i in range(n):
   if arr[i] < 0:
     arr1.append(-arr[i])
   elif arr[i] > 0:
     arr2.append(arr[i])
 arr1=arr1[::-1]
 c1=len(arr1)
 c2=len(arr2)
 l = 0         # left
 r = 10**18+1  # right 答えでもある
 # 負数のマイナスを取って計算しているため積の大小が逆転するので、大きなほうからK番目
 # 小さなほうから(積が負となるペアの個数-K)番目の値を求める
 k = ncc-k
 while r-l != 1: # rとlが1違い、すなわちrが答えとなるまで繰り返す
   mid=(l+r)//2 # 区間の中間値を更新
   cnt=0
   pos=c2-1
   # 区間[left, right)でのしゃくとり法
   # 各負数ごとに積が勝手に決めた値midよりも小さくなる正数の個数を求め足し合わせる
   for i in range(c1):
     while pos!=-1:
       if arr2[pos] > mid//arr1[i]:
         pos-=1
       else:
         break        
     cnt+=pos+1
   # 勝手に決めた値mid以下の個数が(積が負となるペアの個数-K)個以上であれば真の値はmid以下
   if cnt > k:
     r = mid  # rightをmidに更新してやり直し
   # そうでなければ真の値はmid以上
   else:
     l = mid  # leftをmidに更新してカウントやり直し
 # 負数のマイナスを取って計算したので最後にマイナスを付けて出力する
 print(-r)

# K番目の値が0の場合
elif k <= (ncc+zcc):
 print(0)

# K番目の値が正の場合
else:
 arr1=[]
 arr2=[]
 for i in range(n): #負数、正数をそれぞれ昇順に並べる
   if arr[i] < 0:
     arr1.append(-arr[i])
   elif arr[i] > 0:
     arr2.append(arr[i])
 arr1=arr1[::-1]
 c1=len(arr1)
 c2=len(arr2)
 l=0
 r=10**18+1
 k -= (ncc+zcc) #正数の中で小さい順にK番目の数を調べたいので負数、0の数を取り除く
 while r-l != 1:
   mid=(l+r)//2
   cnt1=0
   pos1=c1-1
   # 各負数ごとに積が勝手に決めた値midよりも小さくなる負数の個数を求め足し合わせる(しゃくとり法)
   for i in range(c1):
     tmp=0
     while pos1 != -1:
       if arr1[pos1] > mid//arr1[i]:
         pos1-=1
       else:
         break
     tmp+=pos1+1
     # 各要素について、自身を2回選んだ場合の積が勝手に決めた値mid以下なら条件を満たすペアの個数を1減らす
     if arr1[i]**2 < mid:
       tmp-=1
     cnt1+=tmp
   cnt1 = cnt1//2 #上記の処理では同じペアが2回数えられているので個数を半分にする
   cnt2=0
   pos2=c2-1
   # 各正数ごとに積が勝手に決めた値midよりも小さくなる正数の個数を求め足し合わせる(しゃくとり法)
   for i in range(c2):
     tmp=0
     while pos2!=-1:
       if arr2[pos2] > mid//arr2[i]:
         pos2-=1
       else:
         break
     tmp+=pos2+1
     if arr2[i]**2 < mid:
       tmp-=1 #各要素について、自身を2回選んだ場合の積が勝手に決めた値mid以下なら条件を満たすペアの個数を1減らす
     cnt2+=tmp
   cnt2=cnt2//2 #上記の処理では同じペアが2回数えられているので個数を半分にする
   cnt=cnt1+cnt2
   if cnt >= k: #勝手に決めた値mid以下の個数がK個以上であれば真の値はmid以下
     r = mid
   else: #そうでなければ真の値はmid以上
     l = mid
 print(r)
```
VuejsでGoogleMapAPIを使用して現在地を中心にしたマップを表示する

# VuejsでGoogleMapAPIを使用して現在地を中心にしたマップを表示する

## 概要
- VuejsのGoogleMapのプラグインを使わないで現在地を中心としたマップを表示する

## 環境
- Mac Catalina(10.15.2)
- Node (v12.7.0)
- VSCode

## 前提
- VueCLIを使用する
- GoogleMapAPIのKeyは取得済み

## 手順
### プロジェクトを立ち上げる
- 以下のコマンドでプロジェクトフォルダ新規作成する

```
vue create google-map-vue-practice
```


- プロジェクトフォルダをVSCodeで開く

### ファイルを変更する
- public/index.htmlに以下のコードを追加する
    - API_KEYは自身のGoogleMapAPIKeyに置き換える

```html:index.html
        <div id="app"></div>
    <!-- built files will be auto injected -->
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
  </script>
  </body>
```

- App.vueを以下のようにする
    - navigator.geolocation.getCurrentPosition
        - 現在地を取得する関数
    - window.google.maps.LatLng
        - 緯度経度のオブジェクトを作る関数
    - window.google.maps.Map
        - GoogleMapを作成する関数
    - window.google.maps.Marker
        - マーカーを作成する関数

```vue:App.vue
<template>
  <div id="app">
    <div id="map" ref="map" />
  </div>
</template>

<script>

export default {
  name: "App",
  data: () => ({
    map:null
  }),
  mounted() {
    if (navigator.geolocation) {
      // callback関数内でthis使えないため
      let vm = this
      navigator.geolocation.getCurrentPosition(
        function(position){
          let latlng = new window.google.maps.LatLng(
            position.coords.latitude,
            position.coords.longitude
          );
          vm.map = new window.google.maps.Map(vm.$refs["map"], {
            center: latlng,
            zoom: 4
          })
          new window.google.maps.Marker({
            position: latlng,
            map: vm.map
          })
        }
      )
    }
  }
};
</script>

<style>
#map {
  height: 600px;
  background: gray;
}
</style>
```


### 実行する
- 以下のコマンドでローカル実行する

```
npm run serve
```

- `http://localhost:8080/`でブラウザを開くと以下の画面が出る

![スクリーンショット 2020-05-28 17.20.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267662/75a56e48-a253-fe2a-687d-5ccccaca3c96.png)

## 終わりに
- 今回のプロジェクトを[私のリポジトリ](https://github.com/tamamu79/google-map-vue-practice)で公開
    - 上記のコード以外も少し混ざってますのでご了承ください
recyclerViewにステータスバー分のパディングを入れる

###最初に
このページはステータスバーを透過させた際にステータスバーのメニューと
リストの内容が被ってしまうことがあるため備忘録として記させていただきます
##実装方法

```MainFragment.kt
 override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        presenter.onViewCreated()
        recyclerView.requestApplyInsets()
        recyclerView.setOnApplyWindowInsetsListener{v, insets ->
            v.setPadding(0,insets.systemWindowInsetTop,0,0)
            return@setOnApplyWindowInsetsListener insets
        }
    }
```
**setOnApplyInstesListener**内の**insets.systemWindowInsetTop**でステータスバー分の高さを取得してパディングに設定します
ステータスバー分下げるだけの場合は**setOnApplyWindowInsetsListener**内のみの
処理で十分ですが、ここで一つ注意していただきたいのがタブなどでフラグメントを
制御している場合、遷移後に**setOnApplyWindowInsetsListener**内に処理が入ってくれずパディングが設定されないことがあるので
**requestApplyInsets()**を書いてあげることにより一度リセットをしてくれるため
再度中身の処理に入ってくれます
#最後に
前回ステータスバーの透過方法を書かせていただいたのですが仕事で作っている
アプリでrecyclerViewに実装した際にパディングが実装されない不具合に直面した
ため書かせていただきました
AndroidStudioのライブラリの更新を知る方法

# Androidのライブラリの更新を確認する方法
AndroidStudioで確認する方法とGradleのコマンドで確認する方法が二つあります。
Androidはプロジェクトの規模感にもよりますが、ある程度主流なライブラリがあり多く導入する必要があります。そのため更新も多く必要になるためここに確認方法をメモします。
ライブラリはバージョンを上げるとライブラリのバグの可能性もあるため、それはアプリのバグになるため、要注意です。アップをする必要ないものはしないほうが懸命ですが、firebaseなどの大手ライブラリはアップしないと行けない場合が多いんです。

## AndroidStudioで更新を確認する方法
1. AndroidStudioメニュー > File > Project Structure
2. Project Structureダイアログが表示(Suggestionを選択)

<img width="945" alt="スクリーンショット 2020-05-27 18.10.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109862/d6bde892-3f20-528d-9cbd-9cd8cd7bf1b1.png">

この画面で現在のバージョンと最新のバージョンを一目で確認できます。
Gradleファイルを見るだけでも更新がわかるんですが、ファイルを分けている場合（バージョン管理用など）にそれでは確認できないです。Project Structureが一番見やすいためここで確認してください。

## Gradleコマンドで確認する方法

Gradleの設定についてはこちらを参考にしてください
https://github.com/ben-manes/gradle-versions-plugin#usage

下記のコマンドを実行することで確認ができます
```
./gradlew dependencyUpdates
```
gradleファイルでdependencyUpdatesをカスタムすることでフィルタもかけられます。
ここら辺はドキュメントを参考に調べてください。よく使う手法です。
ITパスポート（計算問題）

損益分岐点　＝　固定費　÷（１　ー　変動費　÷ 売上高）

損益分岐点　＝　固定費 ÷ （１－変動比率）
変動比率　＝　変動費 ÷ 売上高
変動費 = 売上高 - 利益 - 固定費

利益　＝　売上高　ー　変動費　ー　固定費

固定費　＝　売上高　ー　変動費　ー　利益


営業利益率　＝　営業利益　÷ 売上高


変動費＝売上高×変動費率
総費用＝固定費＋（売上高×変動費率）



自己資本比率　＝　総資産　÷　自己資本　x 100

売上原価＝期首商品棚卸高 ＋ 当期商品仕入高 － 期末商品棚卸高


直列システム0.9 × 0.9 = 0.81
並列部分を求める式は　1－（1－0.9）×（1ー0.9）=0.99
稼働率0.99と0.9の直列システムの稼働率は0.99 × 0.9 = 0.891

並列システムの稼働率は、0.99に稼働率0.9のシステムが並列となっている
1－(1－0.9)(1－0.99) ＝0.999
Flutter環境構築でDartが見つからないという問題

# エラー内容
### VS Codeの場合
Could not find a flutter SDK. Please ensure flutter is installed and in your PATH(you may need restart).

### Android Studioの場合
Dart SDK is not configure

# 概要
ここあたりを解消するときにしたことをメモ程度に残しておきます。
よかったら参考にしてください。
環境環境: macOS Catalina

1. まずこちらの手順通り実施する
ここでflutterをダウンロードした箇所を覚えて置く必要があります。
(https://flutter.dev/docs/get-started/install/macos#update-your-path)
2. flutterフォルダの中にbinがあることを確認します。
3. flutterのbinまでのpassを取得します。(例: /Users/{{username}}/flutter/bin)
4. sudo vi /etc/paths を実行します。
5. aと押下します
6. 最後にpass取得したpassを保存して終了です。
7. escを押下します
8. :とqを押下します
9. Enterを押して完了です。
10. そしたら後はVSCode or Android Studioを再起動してください

参考までにvmコマンド一覧
https://uguisu.skr.jp/Windows/vi.html

## 完成図
<img width="575" alt="スクリーンショット_2020-05-28_17_19_59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/115405/98e52dc9-f8b6-24ca-3de3-90bdca5a7e09.png">
データの並び替え降順、昇順/Railsでまとめてみた

投稿したデータや記事の並び替えを変える際に、descが降順？降順？で毎回ググって調べていたのでまとめました。

```ruby:board.rb
class Board < ApplicationRecord
  scope :desc, -> { order(created_at: :desc) } #作成の降順
  scope :asc, -> { order(id: :asc) } #idの昇順　デフォルトでasc（昇順）で表記されるので明示的に書くことは少ない
end
```
java でAPI呼ぶ時にjavax.net.ssl.SSLHandshakeException発生すること

だれか答えたらありがたいです

https://stackoverflow.com/q/61788988/13538484

　　　　　　　URL url = new URL("https://xxxxRequest");
            HttpsURLConnection conn = (HttpsURLConnection) url.openConnection();
            conn.setDoOutput(true);
            conn.setDoInput(true);
            conn.setRequestMethod("POST");
            conn.setRequestProperty("Content-Type", "application/json; charset=utf-8 ");
    //some headers and params
            OutputStreamWriter os = new OutputStreamWriter(conn.getOutputStream());
            os.write(json.toString());
            os.flush();
            conn.connect();
            recode = conn.getResponseCode();

エラーメッセージ
javax.net.ssl.SSLHandshakeException: Failed to negotiate the use of secure renegotiation
    at sun.security.ssl.Alerts.getSSLException(Alerts.java:192)
    at sun.security.ssl.SSLSocketImpl.fatal(SSLSocketImpl.java:1946)
    at sun.security.ssl.Handshaker.fatalSE(Handshaker.java:316)
    at sun.security.ssl.Handshaker.fatalSE(Handshaker.java:306)
    at sun.security.ssl.ClientHandshaker.serverHello(ClientHandshaker.java:513)
    at sun.security.ssl.ClientHandshaker.processMessage(ClientHandshaker.java:207)
    at sun.security.ssl.Handshaker.processLoop(Handshaker.java:1037)
    at sun.security.ssl.Handshaker.process_record(Handshaker.java:965)
    at sun.security.ssl.SSLSocketImpl.readRecord(SSLSocketImpl.java:1064)
    at sun.security.ssl.SSLSocketImpl.performInitialHandshake(SSLSocketImpl.java:1367)
    at sun.security.ssl.SSLSocketImpl.startHandshake(SSLSocketImpl.java:1395)
    at sun.security.ssl.SSLSocketImpl.startHandshake(SSLSocketImpl.java:1379)
    at sun.net.www.protocol.https.HttpsClient.afterConnect(HttpsClient.java:559)
VSCodeでDjangoを使用した仮想環境を構築する(Windows)

あらかじめPythonとVSCodeをダウンロードしておく

#事前準備
##仮想環境を作成する
仮想環境を作成するツールをダウンロードする

```cmd.exe
C:¥Users>pip install virtualenv
```

仮想環境を作成する。今回はsrc_pyという環境をD直下に作成する
D:¥src_py

仮想環境用のフォルダを作成する

```cmd.exe
C:¥Users>D:
D:¥>mkdir src_py
D:¥>cd D:¥src_py
```
以下のコマンドを実行して仮想環境にする

```cmd.exe
D:¥>cd D:¥src_py
D:¥src_py>python -m venv venv
```

現在のフォルダ構成はこうなっている
src_py
└─venv

##Djangoをインストールする

まず、activateで仮想環境を動作させる
(venv) D:¥src_py>と表示されたら成功

```cmd.exe
D:¥src_py>D:¥src_py¥venv¥Scripts¥activate
(venv) D:¥src_py>
```
仮想環境はdeactivateで終了できる
次にDjangoをインストールする

```cmd.exe
(venv) D:¥src_py>pip install django
(venv) D:¥src_py>python -m pip install --upgrade pip
```

##プロジェクトを作成する
今回はenv1というプロジェクトを作成する

```cmd.exe
(venv) D:¥src_py>django-admin startproject env1 .
```

現在のフォルダ構成はこうなっている
src_py
├─env1
└─venv
└─manage.py

#VSCodeでの環境構築
VScodeを起動し、ファイル→フォルダを開くを選択し、仮想環境のあるフォルダ
(今回はD:¥src_py)を選択する。

赤枠をクリックしPython,Djangoをインストールする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624328/f19647fb-5de3-c534-9240-59305073ff46.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624328/2180eb5a-78d4-5d66-3b9b-67dedca58afe.png)

Ctrl + Shift + pでコマンドパレットを開き
Python:Select Interpreterを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624328/91dfa0e1-d338-2d44-2f93-efd9486449dc.png)

先ほど作成した仮想環境のPythonを選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624328/6084699c-4629-bb6a-b3d9-4d441d013397.png)

左下が仮想環境のPythonを参照していたら成功
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624328/4383a009-6b08-319f-fb70-e1bc1896275b.png)

設定ファイルを作成する。
▷ボタンをクリック→Create a launch.json fileをさらにクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624328/5ed61e71-3738-cd5f-3b79-c6a3130a199d.png)
Pyhonを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624328/98951791-e15e-5884-2466-d7d8638cc885.png)
Djangoを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624328/5684a7b3-2b4f-32cd-cf9d-316dd0c890d5.png)
launch.jsonファイルが作成されるので赤枠の▷をクリックして実行する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624328/73b615bb-ef68-923c-7266-a33682d285ab.png)
実行中にWinError 10061が出力された場合は
Set-ExecutionPolicy -ExecutionPolicy Unrestricted -Scope CurrentUser
をターミナルで実行し、スクリプトの実行を許可してから再度▷ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624328/f94bc9c8-fc00-a590-2322-d3983171f06b.png)
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
と出力されたら成功
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624328/cdbb394f-fc9e-693d-9bad-283778986a61.png)

Webブラウザでhttp://127.0.0.1:8000/にアクセスする
このような画面が表示されていれば成功。仮想環境の構築は終了
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/624328/e5106cc1-c726-83ac-1e6a-4a3bfeb852b9.png)
CleanArchitecture ファイルの自動生成（iOS・Swift）

CleanArchitectureではファイルを大量に生成するので、できれば手動ではなく自動で行いたい。そのための手段をまとめた。

### Xcodeのテンプレート機能

#### メリット

Xcodeの機能として、テンプレートファイルを用意しておいておくと、ファイル生成時に選ぶことができる。
Xcodeの機能にすぎず、特別な設定は不要でプロジェクトの中身に何ら影響がない。テンプレートファイルは~/Library/Developer/Xcode/Templatesに置く。

#### デメリット

テンプレートファイルは何処かから拾ってくるか自分で書く・編集する必要がある。自分は下記から拾った。

#### 参考
https://medium.com/swift2go/installing-the-clean-swift-template-in-xcode-6b4367006827

### Kuri

#### メリット

普通に使いやすい

#### デメリット

ymlファイル・テンプレートファイルをプロジェクトルートに置かないといけない（プロジェクトの構成に影響がある）

#### 参考

https://github.com/bannzai/Kuri
https://dev.classmethod.jp/articles/making-progress-ios-dev-using-kuri/
https://dev.classmethod.jp/articles/introduction-of-kuri-generate-command-option/
AWS CLI on dockerで標準出力ページングや環境変数引き渡しで悩まないためのalias設定

# .zshrcとか.bashrcなどに書いておく内容
長くなってしまいました。
変数評価のところをもうすこしきれいに書きたいのですが、動いているので一旦お披露目します。
(改行ないと見苦しいんですが、環境差異ありそうなので修正しました)

```shell

AWS_PAGER=cat
alias aws='docker run --rm -ti -v ~/.aws:/root/.aws -v $(pwd):/aws -v ~/.ssh:/root/ssh $(for _e in AWS_PAGER AWS_ACCESS_KEY_ID AWS_CA_BUNDLE AWS_CONFIG_FILE AWS_DEFAULT_OUTPUT AWS_DEFAULT_REGION AWS_PROFILE AWS_ROLE_SESSION_NAME AWS_SECRET_ACCESS_KEY AWS_SESSION_TOKEN AWS_SHARED_CREDENTIALS_FILE;do if [ "x$(eval echo \$$_e)" != "x" ];then echo -n " --env $(echo ${_e})=$(eval echo \$$_e) ";fi;done) amazon/aws-cli'
```

# 経緯
AWS CLI v2になり、いくつかの理由により on docker で動かそうとしたところ以下のような挙動を確認し、こう動かしたいという要望を持ちました。

- cli_pager を ~/.aws/config に設定しているのに反映されてなさそうな挙動を示します。具体的にはless/moreのようなものが間に挟まっているように見えます。
- dockerコンテナに対して環境変数を可能な限り引き渡してあげたい([公式ドキュメント](https://docs.aws.amazon.com/cli/latest/userguide/install-cliv2-docker.html)では動作の確認のための最小限の利用方法のみの記載となっています)

cli_pager についてはあまり大きな問題になってないようなので、僕の端末環境に依存するものじゃないかと推測しています。
いずれにしても、

- 環境変数は全部引き渡したほうがよい
- pager を使わない = cat にすればいいんじゃね?

というような理由により、aws cli on docker における(そこそこ)気の利いたaliasを書いてみることにしました。

# 挙動の説明らしきもの
# 環境変数全部渡し

`$for _e in ...` 以降でAWS CLIが取り扱う変数を列挙し、設定が行われている場合にはdockerコンテナに対して環境変数を引き渡します。

## aws cliをdockerで動かすとcli_pagerを正しく評価しない?
~/.aws/config には

```
[default]
region=us-west-2
output=json
cli_pager=
```
のような記述を行っていますが、どうしてもless(more?)を使いたいようです。
僕の意図した挙動ではないので、一行目で `cat` をpagerとして指定しています。
別の何かをフィルタにする際には随時 `env pager="hoge" aws ...` のような手続きにすることとします。
flutterで画像サムネイル付きリストを表示

# やりたいこと

画像サムネイル付きリストを表示させたい。
（リストの各項目の左端に写真が表示される）。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75451/cc7ac103-c489-89fd-3b98-651a5ec6673d.png)


# 画像データの取得

https://qiita.com/kenichiro-yamato/items/83c508d24de9d588da07
を参照。


# 完成形 main.dart


```dart

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Icons List',
      theme: ThemeData(
        primarySwatch: Colors.pink,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: '写真サムネイル付きリスト'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: 
      ListView(
        children: <Widget>[
          ListTile(
            leading: Image.network('https://www.listofdownload.com/wp-content/uploads/2018/11/Marvels-Spider-Man-4K-Wallpaper-3840x2160.jpg', width: 70,),
            title: Text("スパイダーマン"),
            ),
          ListTile(
            leading: Image.network('https://sce.scene7.com/is/image/playstation/pljm16288_640x360', width: 70,),
            title: Text("バイオハザード RE:2"),
          ),
          ListTile(
            leading: Image.network('https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRZ6BNGobCtQJC4Pn0qumG3SkbVmbPvbns6-YO3PLI_KhSAfnXz&usqp=CAU', width: 70,),
            title: Text("ファイナルファンタジー７リメイク"),
          ),
        ],
      ),
    );
  }
}

```
なぜファイル末尾に改行を入れるのか

Rubyのプログラムを書いていてふと思ったのでメモ。

[なぜ最終行に改行を入れるのですか？](https://teratail.com/questions/71778)

>POSIX上、テキストファイルは「行」の集合体で、そして「行」は「0文字以上の文字+改行」からなっている、とのことです（Qiita）。
Rubyのコードでも、（よほど変なことをしない限り）それに従わない必要性のある理由もないことでしょう。C言語においても、改行で終わらないコードは正しく動くことが保証されません。


- そう決まっている
- 改行がなかったらエラーが起きるかもしれない

ということみたいですね。

# VSCodeでファイル保存時に自動で改行うを入れる設定

1. ツールバー > Code > Preferences > Settings で設定を開く
2. 「insert newline」で検索
3. 「Files: Insert Final Newline」の項目にチェックを入れる
Markdown PDF でPDF変換しようとしたときに出るエラー "ERROR: exportPdf()" の解決方法 (Windows)

日本語の解決策がなかなか出てこなかったので備忘録として...

## エラー内容
右下にでてくるけど全然役にたたないエラー報告たち

```
Error: Failed to launch the browser process! TROUBLESHOOTING:
https://github.com/puppeteer/puppeteer/blob/master/docs/troubleshooting.md

ERROR: exportPdf()
```
## 原因
settings.json に Chromium または Chrome 実行可能ファイルへのPathがないから

## 解決方法
Ctrl + "," で settings.json を開き, 以下の文を追加してあげてください.

```
"markdown-pdf.executablePath": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
```

## 参考資料
もう普通に[Markdown PDF](https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf)さんのとこに書いてありました。

前はこんなことしなくても勝手に増えてたのかな、ほかの環境だとこんなことしなくても動作するんですけどね...
[メモ] react-scriptsで環境毎にビルドできる様にする

# 概要
Create React Appで書いたフロントエンドのソースを環境毎に値を変更してビルドしたかったので対応しました。

## やり方
環境変数を使います。
詳しくはこちらを参照してください。
[Adding Custom Environment Variables](https://create-react-app.dev/docs/adding-custom-environment-variables/)

簡単に要点をまとめると

- `.env`ファイル内に環境変数を定義しておけばJavaScript内で`process.env.XXXXX`で取得可能
    - `REACT_APP_` というプリフィックスにしておけば `public/index.html` 内でも使用可能
- `yarn start` 時には `.env.development` 系、 `yarn build` 時には `.env.production` 系の環境変数が使用される
    - この辺りのルールは上記のページを参照する

複数の環境変数を切り替えられないか調べましたが特に情報が見つかりませんでした。
npmに何かありそうな気配でしたが、あまり依存するのもどうかと思ったので簡単な仕組みで実現することにしました。
ビルド時は `.env.production.local` に書かれている環境変数が最も優先されて使用されるため、このファイルをビルド時に入れ替えれば要件は満たせます。
簡易なshellスクリプトを作成しました。

[set-env-file-for-react-script.sh](https://gist.github.com/from-unknown/fe9fa2b44c27d03302c1a7925fe4624e)

単に `.env.production.xxxx` という環境毎の.envファイルを作成しておくと、それをコピーするだけのshellです。
このファイルと `package.json` のスクリプトを組み合わせて以下の様なコマンドを用意しました。

```json
"build:develop": "./set-env-file-for-react-script.sh develop && yarn build && rm ./.env.production.local"
```

これで `build:develop` を実行すると `.env.production.develop` を `.env.production.local` に入れ替えてビルドするという事が実現できます。
最低限ですがこれでやりたい事は一旦実現できました。

よりよいやり方や標準的な手法があれば教えて下さい。
ヒープ領域制限によりnode.jsのビルドが通らない場合

環境
インスタンス：t3a.nano
OS: AmazonLinux2
node.js:v14.3.0

上記環境でnpm run serveを実施してVueアプリの動作確認をした後に
npm run buildでビルドを実行したところ

```
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
```
のエラーが表示されてビルドが通らなかった。

ビルドするためのメモリが足らないと判断できるため
スワップ領域を確保したうえで
https://qiita.com/nakamto/items/5e78e9caceeff6b9e2b4

```
$ export NODE_OPTIONS="--max-old-space-size=1024"
$ npm run build
```
※1024は確保できるメモリ量に応じて変更してください。
max-old-space-sizeの値を指定することでビルドが通りました。

メモリの少ないインスタンスを利用していることが原因
と推測しますので、メモリが大きいインスタンスへ変更しても良いかもしれません。
macOSでsshの設定

シザーキーボードに戻った MacBook Pro 13inch に代えました.
Macが変わったついでに、備忘録で設定の一部を記録しておこうと思います.
今回は、sshです.

# ssh

## キーの作成

`-C` はコメントで自分の場合は習慣的に `$MAIL/$HOSTNAME` のようなフォーマットにしています.

```shell
ssh-keygen -t ed25519 -C "foo@example.com/bar"
```

## 設定

実際には色々ありますが、最低限として、以下のようにしてコメントを元に設定を気軽に追加できるようにしておきまします.

[macOS で再起動しても ssh agent に秘密鍵を保持させ続ける二つの方法 - Qiita](https://qiita.com/sonots/items/a6dec06f95fca4757d4a) でとても良い方法(`UseKeychain`,`AddKeysToAgent`)が紹介されてました.

```config:~/.ssh/config(600)
Host *
  UseKeychain yes
  AddKeysToAgent yes

# Host foo
#   HostName 111.111.111.1111
#   Port 1111
#   User user_name
#   IdentityFile ~/.ssh/id_rsa
#   ForwardAgent yes
```

## ssh-agent

Macの場合は起動時にすでにssh-agentは起動しています.
以下のように未設定の状態でも環境変数の `SSH_AUTH_SOCK` を確認することができます.

```shell
$ echo $SSH_AUTH_SOCK
/private/tmp/com.apple.launchd.KkNdVZ6iBA/Listeners
```

### キーの追加

あとは、キーを追加する場合は以下のようにします
(デフォルトの`~/.ssh/id_rsa`の場合)

```shell
ssh-add -K
```

明示的にキーを指定する場合は以下のようになります.

```shell
ssh-add -K path/to/id
```

この時の `ssh-add` のオプション `-K` は macOS 固有のオプションになります
エクセルから参照するオンプレのSQLserverをAWSに移行する

#社内ではエクセルでのマスタ管理が一般的
SQLserverでのマスタ管理を行う前の状況：
どこの部署でも使用するような社員名簿のような人事マスタが、人事部や情報システム部と交流のある一部の人だけが使える状態となっていた。最新情報が使えるのは人事部、情報システム部だけで、他の方は手に入れた人事マスタの情報を自分で更新している状況であった。
そんな非効率で不公平な状況を改善する為に、SQLserverで社内DBを構築した。SQLserverを選定したのはエクセルから直接最新データを読み込める為、VBA等での作り込みが不要になる為であった。

社内DBは余っていたデスクトップパソコン上に構築したので、利用者が増えるにつれてパワー不足が顕著になってきたので、AWS(RDS)に移行することにした。

#RDS上に.bakを復元する方法で悩む
OS上に構築した場合は.bakを置いたディレクトリを指定するだけで復元できたが、RDSの場合はS3に置く必要があるとのこと。S3にバケットを作成し、RDSからアクセスできるようロールを設定。
RDSにSqlServerManagementStudioで接続して、下記のクエリを実行することで復元が実施できた。
最初は復元に失敗したが、S3にアクセスできないというメッセージであったので、権限を見直したことで解決。

```
exec msdb.dbo.rds_restore_database 
@restore_db_name='データベース名', 
@s3_arn_to_restore_from='arn:aws:s3:::保存先とファイル名.bak';
```
復元クエリの実行状況は下記のクエリで確認可能。
```
exec msdb.dbo.rds_task_status
```

#AWS(RDS)上にデータ移行したのに社内からエクセルからアクセスできない
ダイレクトコネクトで社内とAWSが繋がっているので、社内からアクセスできるはずなのに、アクセスできず。確認するとAWSのセキュリティグループの設定に問題があったので、設定見直すことで解決。しかし、SQLserverのユーザーが認証できないというエラーが発生。
![2020-05-28_15h21_44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359386/832e94c4-9e0b-5dc9-1ad0-917e71a9d0cb.png)

#.bakを復元すると既存のユーザーアカウントでアクセスできなくなる
ユーザーアカウントが存在するSQLserverに.bakを復元すると「ログインユーザー」と「データベースのユーザー」この2つに不整合が生じ、今回の現象が発生しているということを理解。不整合を解消するクエリとして紹介されていた下記のクエリを試してみた。
下記は参考にさせて頂いたサイトです。
http://www.3s-sys.co.jp/blog/2017/01/25/1071/
https://sql-oracle.com/sqlserver/?p=143

```
USE [データベース名]
EXEC sp_change_users_login 'Update_One','[現在データベースに登録してあるユーザ名]','[ログインしたいユーザー名]'
```
が、解決せず。。。

#解決
「ログインユーザー」と「データベースのユーザー」の不整合が原因なら、SqlServerManagementStudioでそれぞれのユーザーを手動で削除して再作成すれば解決できるのでは？と考え、実行してみたところ、解消できました。

「ログインユーザー」削除
![2020-05-28_15h27_37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359386/e9ad2f8f-ccce-4028-4700-727788800d28.png)
「データベースのユーザー」削除
![2020-05-28_15h23_17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359386/e2dbbe06-5785-7176-af74-18945d1fb747.png)

ユーザーの再作成
![2020-05-28_15h28_43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359386/93067f6a-4d49-2246-95b3-520d4d91960c.png)

###再作成したユーザーは権限もなくなっているので、Grantで各テーブルやビューの閲覧権限を付与してして移行が完了しました。
Amazon Elastic Block Store (Amazon EBS)

#Amazon Elastic Block Store (Amazon EBS)
> Amazon Elastic Block Store (Amazon EBS) は、EC2 インスタンスで使用するためのブロックレベルのストレージボリュームを提供します。EBS ボリュームの動作は、未初期化のブロックデバイスに似ています。これらのボリュームは、デバイスとしてインスタンスにマウントできます。同じインスタンスに複数のボリュームをマウントしたり、一度に複数のインスタンスにボリュームをマウントすることができます。これらのボリューム上にファイルシステムを構築できます。また、これらのボリュームをブロックデバイスを使用する場合と同じ方法で使用できます (ハードドライブとして使用するなど)。インスタンスにアタッチされているボリュームの設定は動的に変更できます。

##暗号化シナリオ

* 暗号化されていないボリュームを復元する (デフォルトでの暗号化が有効になっていない場合)
* 暗号化されていないボリュームを復元する (デフォルトでの暗号化が有効になっている場合)
* 暗号化されていないスナップショットをコピーする (デフォルトでの暗号化が有効になっていない場合)
* 暗号化されていないスナップショットをコピーする (デフォルトでの暗号化が有効になっている場合)
* 暗号化ボリュームを再暗号化する
* 暗号化スナップショットを再暗号化する
* 暗号化されたボリュームと暗号化されていないボリュームとの間でデータを移行する

###暗号化されていないボリュームを復元する (デフォルトでの暗号化が有効になっていない場合)
> デフォルトでの暗号化を有効にしないと、暗号化されていないスナップショットから復元されたボリュームは、デフォルトで暗号化されません。

<img width="639" alt="スクリーンショット 2020-05-28 16.06.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321923/dc134de2-26a9-6dee-3024-eb0d743e1bd4.png">

###暗号化されていないボリュームを復元する (デフォルトでの暗号化が有効になっている場合)
<img width="654" alt="スクリーンショット 2020-05-28 16.08.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321923/52f98660-a161-a66c-bc5c-2a45c19f6edf.png">


###暗号化されていないスナップショットをコピーする (デフォルトでの暗号化が有効になっていない場合)
<img width="637" alt="スクリーンショット 2020-05-28 16.07.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321923/4b823e2a-36fd-8746-b493-d09140da7f4f.png">

###暗号化されていないスナップショットをコピーする (デフォルトでの暗号化が有効になっている場合)
> デフォルトでの暗号化を有効にした場合、暗号化されていないスナップショットのコピーには暗号化が必須であり、デフォルトの CMK を使用する場合は、暗号化パラメータは必要ありません。

<img width="634" alt="スクリーンショット 2020-05-28 16.10.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321923/41fd3627-c6c5-813a-a522-558e1c6509be.png">

###暗号化ボリュームを再暗号化する
> CreateVolume アクションが暗号化されたスナップショットに対して実行されるときは、別の CMK でそれを再暗号化することができます。以下の図は、そのプロセスを示したものです。この例では、CMK A と CMK B の 2 つの CMK を所有しています。ソーススナップショットは CMK A によって暗号化されています。ボリュームの作成中に、パラメータとして指定された CMK B のキー ID を使用して、ソースデータは自動的に復号され、次に CMK B によって再暗号化されます。

<img width="637" alt="スクリーンショット 2020-05-28 16.11.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321923/857d78db-16bf-fa6a-aba2-9001a260795a.png">

###暗号化スナップショットを再暗号化する
> スナップショットをコピー時に暗号化する機能により、すでに暗号化された自己所有のスナップショットに新しい対称 CMK を適用できます。結果として作成されたコピーから復元されたボリュームには、新しい CMK を使用してのみアクセスすることができます。以下の図は、そのプロセスを示したものです。この例では、CMK A と CMK B の 2 つの CMK を所有しています。ソーススナップショットは CMK A によって暗号化されています。コピー中に、パラメータとして指定された CMK B のキー ID を使用して、ソースデータは自動的に CMK B によって再暗号化されます。

<img width="624" alt="スクリーンショット 2020-05-28 16.12.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321923/e9995b56-550a-c743-c322-00ba4f542a97.png">

##Amazon EBS 高速スナップショット復元
> Amazon EBS 高速スナップショット復元を使用するとスナップショットからボリュームを作成でき、このボリュームは作成時に完全に初期化された状態になります。これにより、ブロックの初回アクセス時における I/O オペレーションのレイテンシーがなくなります。高速スナップショット復元を使用して作成されたボリュームでは、プロビジョンドパフォーマンスをすべて即座に提供できます。
SoXコマンドで超簡単にモノラル音源をマルチチャンネル音源にミックスできる

#SoXコマンド便利〜！！！

モノラル音源wavをマルチチャンネル（サラウンド音源）にするのにわざわざソフト開いたりpython走らせたりしてたのがアホみたい！！！！

#SoX - Sound eXchangeとは

音声信号処理プログラミングのスイスアーミーナイフ（公称）
http://sox.sourceforge.net/

Linuxやmacでは単純にコマンドラインから音を再生してみたり、録音したりといった簡単なことから、wavからMP3に変換したり、サンプリングレートをリサンプリングしたり、アップミックスしたり、ダウンミックスしたり、トリミングしたり、X倍速で再生したり　etc...

Windowsでも使えるらしい（使ったことないから分からん）

#基本構文
```
sox fuga ☆ hoge
```
fuga・・・扱いたいデータの指定
☆・・・操作コマンド
hoge・・・入力/引数

コマンド例

| コマンド       |効果|使用例|
|:-----------------:|:------------------:|:------------------:|
| -t             |transrate(データ形式変換)|               |
| -M             |mix（結合・ミックス）|               |
| -c             |channel(チャンネル制御)|               |
| trim           |trimming（切りとり・分割）|               |
| -e             |effector(エフェクト追加)|               |
| -r             |Sampling rate（リサンプリングなど）|               |
| -b             |bit depth（ビット数変換など）|               |
  
#アップミックス・ダウンミックス

##モノラル → ステレオ / サラウンドサウンド
input1~3.wavがモノラルだったらoutput.wavは３chになるし、input1~2がモノラルでinput3が３chだったらoutput.wavは５chになってくれる

```
sox -M input1.wav input2.wav input3.wav output.wav
```

##ステレオ / サラウンドサウンド → モノラル
数字でチャンネル指定します

```
sox input.wav -c 1 output.wav
```
＠media ミス備忘録

メディアクエリでどうしてもサイズがフォントサイズが変更されない時に
分かった対処方法

```css

.p-header__nav-menu__closelist .c-header__nav-menu__closelist a {
    color: #FFFFFF;
    font-size: 12px;
}
```

このようなCSSの施一計をしている場合は、

```CSS
@media (min-width:768px) {
.c-header__nav-menu__closelist a {
    font-size: 12px;
}
}

```

このように設計してまうと、どこの親要素のaタグなのか理解してもらえず
反映されない。

```CSS
@media (min-width:768px) {
.p-header__nav-menu__closelist .c-header__nav-menu__closelist a {
    font-size: 12px;
}
}

```
この書き方じゃないと反映されない。
Raspberry Pi 4 メモリ8GB版が登場 & 64bit OSも

# この記事について
タイトルのとおりです。

# Raspberry Pi 4  8GB版
Raspberry Pi 4 メモリ8GB版が発表されました。詳細は以下の公式発表をご参照ください。
https://www.raspberrypi.org/blog/8gb-raspberry-pi-4-on-sale-now-at-75/

## 変わった部分は？
- メモリ搭載量が 8GB になった
- 従来よりメモリに高い電流を供給する必要があるため、電源まわりの回路が微妙に変わった（※COVID-19 のせいでこの回路の部品供給が3ヶ月遅れたらしいです）

変更点は以上とのことです。要はメモリ搭載量が増えただけですね。

## 新OS? "Raspberry Pi OS"
従来から提供されているOSである Raspbian は、互換性を重視していたため、32bitのOSとしてビルドされていました。
8GB版でもこの Raspbian が使用できるとのことですが、32bitからくる制限で1プロセスあたりに使用できる最大メモリは3GBまでとなっています。
これを回避するために、新しく "Raspberry Pi OS"と言う名前で、32bit/64bitの両方に対応するOSも合わせて発表されました。

64bit版OS（ベータ版）は以下のフォーラムの書き込み内からダウンロードできるようです。
https://www.raspberrypi.org/forums/viewtopic.php?f=117&t=275370
~~Raspberry Pi OS と言う名前になったらしいですが、ファイル名は raspbian のままですねｗ~~

#購入先
日本でも販売開始になったようです。下記から購入できます。
https://raspberry-pi.ksyic.com/news/page/nwp.id/95
https://www.switch-science.com/catalog/6370/
flutterでアイコン付きリストを表示する

# やりたいこと

アイコン付きのリストを表示させたい。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75451/64a26c23-f61d-adbc-d088-4c15ba62c670.png)



# 完成形 main.dart


```dart


import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Icons List',
      theme: ThemeData(
        primarySwatch: Colors.pink,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'アイコン付きリスト'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: 
      ListView(
        children: <Widget>[
          ListTile(
            leading: Icon(Icons.add_a_photo),
            title: Text("項目名A「あいうえを」"),
            ),
          ListTile(
            leading: Icon(Icons.computer),
            title: Text("項目名B「東京都渋谷区」"),
          ),
          ListTile(
            leading: Icon(Icons.mobile_screen_share),
            title: Text("項目名C「1234567890」「１２３４５６７８９０」"),
          ),
        ],
      ),
    );
  }
}

```



# Iconsの仕様

https://api.flutter.dev/flutter/material/Icons-class.html
Why e-learning Apps are the current need amid COVID-19 chaos

Though schools and colleges have been closed due to COVID-19 pandemic situation, E-learning apps like Udemy help students in a great way to learn from their homes in this situation by connecting them with the best instructors online around the world with the help of e-learning Apps.

In today’s world, many industries, schools, and businesses accept online courses and Certifications. As the acceptance of online degrees and certifications become more prominent, the popularity of online Learning Apps is also continuing to increase. Online learning has been rapidly adopted due to wide-spread access, and the many benefits it offers.

From a recent survey, it has been reported that the E-Learning apps are the future of education and on high demand for the next coming years. So it's the right time to build your e-learning app

##Udemy Clone Script helps you in Faster Development

[Udemy Clone Script](https://www.employcoder.com/udemy-clone) helps you save your time and cost of building an app from scratch that enables you to launch your online learning marketplace like Udemy instantly. You can start your own e-learning marketplace with our highly customized Udemy clone app with advanced features for Android and iOS to Web.

##Ways to Earn Revenue through Udemy Clone

You can get revenue through Primary Courses
You can get revenue through commission fee
You can get revenue through Subscription

Now it's your time to enter the e-learning industry and launch an eLearning app like Udemy that provides true value to your audience.