OmniAICreator/Qiita-1.07M huggingface dataset:
KDG HACKS 2021「新しいオリンピックの楽しみ方をデザインしよう」をハックしてみた

# はじめに
先日、[KDDI学生向けハッカソン2021](https://www.kdghacks.com/)が開催され、非常に多くの学生さんのアイデア、ハックしたサービスを見せていただきました！
本当にどれも面白く、僕もチュータとして今大会は参加させていただいたのですが、やはり実際にやってみたいなぁという思いに駆られてしまったので、急遽、同じテーマでハックしてみようかなという記事になります。笑

(まあ、作りたいものがあったのと、ふざけ倒してやろうと思っていたので。w)

# アイデアソン
* タイトル : **誰が優勝？ 予想して盛り上がれ！**
* コロナ禍の観戦者が持つ課題 :   
① コロナになり、オフラインのイベントだと盛り上がりに欠ける。   
② 家にいても世界中のオリンピック観戦者と盛り上がりたい。

# ハッカソン
僕なら、こんな感じのアーキテクチャにするかなぁ。
特徴は、フロント/バックエンドをCloud RunにDeployし、LBで分散させていること、外部LBで複数regionに振り分ける前提で考えているので、こんな感じにしています。
あとは、バックエンドから、ML系サービスに対しイベント駆動で実行をかけ、データストアに書き込むようにしています。
(ある選手の過去戦績から、今年の結果を予想とかは、こっちの処理でさせることを考えています。)
ただ、Translation apiやText-to-speachなどは、フロントから直接呼び込む(バックエンドでGWっぽくマスクしてもいいが、まあいっか、、ww)ようにしています。

* アーキテクチャ
![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/e4c3e476-059f-d83d-6c23-e8157999855c.png)

# 成果物
* タイトルのようにこのサービスは、各種目で誰が優勝するのかをBetし、観戦を楽しむものです。
* 一番上には、1~3位までの選手が表示され、Bet数で順位が表示されるようになっています。
* 真ん中のグラフは、Betの多い3選手の過去の成績を表示し、そこからMLにかけ今年の順位予想を表示してくれます。

![スクリーンショット 2021-07-16 1.49.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/660bad77-45f6-b9f7-9435-3804e47afa43.png)

* 次のグラフは、ある種目の全選手の人気Bet数が表示されます。
![スクリーンショット 2021-07-16 1.53.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/7f404074-8bdc-a4d6-14a3-c344550ffe2e.png)

* 最後にBetしたい選手を入力するComponentがあるようなデザインにしています。

![スクリーンショット 2021-07-16 1.54.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/678543a4-357a-0a7f-eb05-b9afa7455368.png)


実際にDeployしてみました。
(最後までシステムは組んでいないので、画面に表示されているのはMockデータです。)
多分、近々GCPのアカウント消しちゃうのでリンク先無ければごめんなさいw

https://olympic-ui-koitabashi-i5s53ybqla-an.a.run.app/

# 最後に
* だいたいこれで1~2時間くらいでアーキテクチャを考えフロント実装し、Deployまでって感じですね！
* 時間かけて、上のアーキテクチャを実際に作るかは暇があればかなぁ。w
* いやぁでも実際にハッカソンやってみるの楽しいっすね！
* 現場からは、以上です！


# 参考
https://www.kdghacks.com/
useStateを使うときのあの構文の意味

# useStateを使うときのあの構文

これ。

``` JavaScript
const [count, setCount] = useState(0);
```

仕事で使ってるときはなんとなーく使っていたけど、
Reactの復習中に改めて見直したらなんだこれ…となったので備忘録として残したい。
絶対忘れる。

# JavaScriptの構文だった。

調べてみると、正体はjsの構文でした。
（しかもちゃんとドキュメントを読んでいればすぐわかるレベル）
お恥ずかしながら初めて知りました。

結論から書くと、上記の例の左辺の配列のうち、
1つ目の要素（上記の例だとcount）にstateの値、
2つ目の要素（上記の例だとsetCount）にstateを更新するための関数が返されているとのこと。

以下、Reactの公式ドキュメントより引用。
https://ja.reactjs.org/docs/hooks-state.html#tip-what-do-square-brackets-mean

>この JavaScript の構文は “分割代入 (destructuring)” と呼ばれています。これが意味するところは、fruit と setFruit という名前の 2 つの変数を作って、useState から返される値のうち 1 つ目を fruit に、2 つ目を setFruit に代入する、ということです。これは以下のコードと等価です：

> ``` JavaScript
  var fruitStateVariable = useState('banana'); // Returns a pair
  var fruit = fruitStateVariable[0]; // First item in a pair
  var setFruit = fruitStateVariable[1]; // Second item in a pair
```

>useState で state 変数を宣言する際、ペア、つまり 2 つの要素を含んだ配列が返されます。1 つ目の要素は state の現在の値、2 つ目の要素はそれを更新するための関数です。これらには特定の意味があるので、アクセスするのに [0] や [1] を使うのではちょっと分かりづらくなります。だから代わりに分割代入を使うというわけです。

#まとめ
なんとなーくコードを書くのをやめましょう、
そして公式ドキュメントはちゃんと読みましょう。（戒め）

ご指摘などありましたらコメントにていただけると助かります。
【Swift】参照型と値型について

##  参照型と値型の違いについて



##参照型
参照型とは、インスタンスが値への参照を表す型のことを言います。下記の例では、a、bという空箱のに対して、同じ場所からデータを持ってきて（参照して）います。なので、bのプロパティの値を変更するとaの値も同時に変化していることが分かります。

```swift:
class StringClass {
    var string =  "何も言いません"
}

let a = StringClass()
print(a.string) // 何も言いません
var b = a

b.string = "こんにちは"
print(b.string) // こんにちは
print(a.string) // 何も言いません
```
## 値型
値型とは、インスタンスが値への参照ではなく値そのものを表す型のことを言います。下の例で言うと、インスタンス化する際にc,dという空箱にStringStructがコピーされているイメージです。それぞれのプロパティの値を確認しても、別々のものとして存在していることがわかります。なのでその後の操作や演算等はもとのデータには影響しません。

```swift:
struct StringStruct {
    var string = "何も言いません"
}

let c = StringStruct()
var d = c

d.string = "こんばんは"
print(c.string) // 何にも言いません
print(d.string) // こんばんは
```

##イメージ（参照型）
プロパティbの値が変更された為、値を参照しているaの値も変更されていることがわかります。
![1ABAB61A-48AE-4D0B-BBD7-CFB030711689.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1170864/bbb5e306-7d87-b8b4-f7f0-d97688401cb4.jpeg)




##イメージ（値型）
c,dはそれぞれコピーによって作成されたインスタンスなのでc,d同士に依存関係がありません。
![76578BB2-680B-472F-B404-AB91FABD8C37.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1170864/6ec20726-31bd-e2fd-2403-431f0b11f8dc.jpeg)
JavaScript 関数

#関数

関数はfunction 関数名(){}を使って表します。
表示する時は関数名();を使います。
ES6からだと少し書き方が変わってきます。
定数に関数を代入していくイメージを持って下さい。
const 定数名 = function() {

}
ですが、この省略形のアロー関数もあります。
const 定数名 = () => {

}

#スコープ

変数の使える範囲をスコープと言います。
関数の中で宣言した変数は関数の中でしか使うことができません。
これをローカルスコープと言い、このような変数をローカル変数と言います。


#引数

関数の中で引数を受け取ることができます。

```JavaScript
function introduce(name) {
  console.log(name);
}

introduce("Takeshi"); // => "Takeshi"
```

#戻り値

returnを使って、戻り値を受け取ることができます。
また、returnは関数の処理を終わらせることができます。

```JavaScript
function add(a,b) {
  return a + b;
}

var sum = add(3,5);
console.log(sum); // => 8
```

#最後に
初心者ですので、拙い文章や書き方だと思いますが、最後まで見て頂き
ありがとうございました。もし、ご指摘等がございましたらよろしくお願い致します。
本人確認資料の仕様に気をつけよう

※かなりニッチなネタですが、私自身が困った経験をしたので綴ります。

## 本人確認資料のアップロード
もしあなたがセキュアなサービスを開発しているならば「本人確認資料のアップロード機能」を実装する機会があるかもしれません。
方法はさまざまですが、写真を撮ってアップロードするのが Web でもモバイルアプリでも主流ではないでしょうか。

本人確認資料でよくあるあるなのは「運転免許証」です。
本名、現住所、顔写真が記載された公的書類なので、結構な方が選択するかと思います。

## 表面だけでは足りない

運転免許証の表面には本名、現住所、顔写真などが記載されています。
これを送れば十分と思われるかも知れませんが、例えば引越をして現住所が変わっていたらどうでしょうか？

住所が変更となった場合、運転免許証の場合は裏側の備考欄に新しい住所が印字されます。
結婚など何らかの理由で名前が変わる場合も裏面の備考欄に記載されます。

つまり裏面も送信できるようにしないと、最新の情報を証明できないのです。
（仮に表面の情報が正確であったとしても、備考欄が空欄であることを確認すべきですから、裏面は送信必須かと思います。）

では表面と裏面の２枚を送信できるようなUIにすれば解決でしょうか？
・・・実は答えは「NO」なのです。

## 裏面だけでも足りない！！！

例えば名前が変わって裏面の備考欄に新しい名前が印字されたとします。
その後、引越をして新しい住所を印字しようとすると、困ったことに備考欄の空欄が不足してしまいます。

空欄が足りなくなった際、運転免許証の場合は裏面に新しい備考欄用の紙が貼られ、その上に印字がなされます。
参考：https://www.police.pref.hyogo.lg.jp/corona/data/koshintetudukikaishi6.pdf

するとどうなるでしょうか。
「顔写真は表面、氏名は裏面１、現住所は裏面２」といったレアな状態が起こりえます。
表と裏の２枚送信できるUIにしてしまうと、氏名を証明することができず詰んでしまうのです。

## まとめ

ユーザーが困らないように、どのようなケースがありえるか考慮するのは重要です。
今回の例では以下のような状態になっていれば解決することができます。

- 凝ったことをせずに複数枚送信できるようにする
    - おすすめ
- 適切なサポートフォームを用意する
    - 大半は表裏２枚で十分なので、レアケースは人力対応するという判断もあり
- 警視庁長官になって免許証表面を再印字できるようにする
    - 備考欄シールってなんやねん、、、(愚痴)
- マイナンバーカード流行らせる
    - それな(それな)

※他イケてる解決方法があればコメントにどうぞ
PythonでSymbolのハーベスト成功日時を計算する

## 概要
@nobu_kyutech さんの下の記事を参考に取得したハーベスト履歴から、さらにハーベストが成功した日時を求めて表示してみました。

https://qiita.com/nobu_kyutech/items/cac214d7c98217e802f9

## ハーベスト日時の求め方

参考記事の手順でハーベスト履歴を取得すると、ハーベストが成功したheight(ブロック高)と収穫量が結果として得られます。このheightから、そのブロックが生成された日時を取得していきます。

## ポイント
- [heightからそのブロックの詳細情報を求めるAPI](https://docs.symbolplatform.com/symbol-openapi/v1.0.0/#operation/getBlockByHeight)を利用しました。
    - 上記のAPIから取得できるブロック生成時のTimeStampは、 **ネメシスブロック生成時からの経過時間（ミリ秒）** となっているので注意が必要です。
- 基準となる、 **ネメシスブロックの生成時刻** は、[Symbol Blockchain Explorer](http://explorer.symbolblockchain.io/blocks/1)で確認できます。
    - このとき、上記のブロック詳細に記載されている生成時刻は、アメリカ基準時間となってますのでここも注意です。

## 結果

ブロック情報を取得する部分のみ抜粋。その他の部分は@nobu_kyutech さんの記事を参照ください。

```py:
import datetime

# ネメシスブロックの生成日時（アメリカ時間）
NEMESIS_BLOCK_TIMESTAMP = "2021-03-16 00:06:25"

# heightからブロック情報を取得する関数
def get_blocks( height ):
    req = urllib.request.Request(NODEURL + '/blocks/' + height)
    with urllib.request.urlopen(req) as res:
        return json.load(res)

# ブロックの生成日時を取得して日本時間で返す
def get_datetime( height ):
    data = get_blocks( height ) 
    # ネメシスブロック生成時からのミリ秒が返る
    ts = int(data['block']['timestamp'])
    # 日本時間に合わせる（9時間追加）
    ts += 32400000
    nb_ts = datetime.datetime.strptime(NEMESIS_BLOCK_TIMESTAMP, '%Y-%m-%d %H:%M:%S')
    dt = nb_ts + datetime.timedelta(milliseconds=ts)
    return datetime.datetime.strftime(dt,'%Y-%m-%d %H:%M:%S')
```

ハーベスト成功したブロックのheightから、それぞれの生成時刻（日本時間）を取得していけば、
ハーベスト履歴として日時も一緒に表示することができます。

```
height:138196, datetime:2021-05-04 08:51:25, amount:134.42294
height:16699, datetime:2021-03-23 03:31:53, amount:135.382769
height:8870, datetime:2021-03-20 10:17:53, amount:140.428445
```

## まとめ

SymbolはAPIやSDKが凄く親切かつドキュメントも見やすくてとても良いですね。
ハーベスト履歴の日時表示とかは、[XemBook](https://xembook.github.io/xembook)さんはじめ有志の皆様が既に見やすい/使いやすい
ツールを多数作ってくれていますが、勉強も兼ねてあえて自前でやってみました。

これで、ハーベスト成功した間隔に合わせてメッセージを変えて通知を飛ばしたり、
ハーベスト生活をより楽しむためのツールを自分なりに作ってみる予定。

Python不慣れなのでダサい書き方になってるかもしれませんがご容赦ください。
もっと良い書き方あるよ！やり方あるよ！って場合はアドバイスいただけると嬉しいです。
styled-componentsの不思議な仕組み(タグ名＋文字列)を簡単なサンプルで再現



[動作サンプル](https://murasuke.github.io/tagged-template/)

* styled-componentの「タグ名`` ` ``cssのスタイル定義`` ` ``」という書き方が気になるので仕組みを調べました。

　`タグ名`の後ろに括弧もなく突然`` ` ``テンプレート文字文字列`` ` ``が現れるやつです。

```typescript
const TestDiv = styled.div`
  color:blue;
  font-size:20pt;
`;`
```


これは[タグ付きテンプレート](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals#tagged_templates)という構文で、関数に文字列を渡すのとほぼ同じ事ができるようです。詳細はリンク先でご確認ください。

```javascript
function tag(strings) {
  console.log(strings.raw[0]);
}
tag`string text line 1 \n string text line 2`;
// tag('文字列');
```

## styled-componentsの仕組みを再現する最小限のサンプルコード

こんな感じで使える「なんちゃってstyled-componsnts」を作ってみます。

```typescript
// 「なんちゃってstyled-componsnts」を関数として呼び出して、コンポーネントを取得
const Tag1 = pTag('color:red;');

// 「なんちゃってstyled-componsnts」をタグ付きテンプレートとして呼び出す
const Tag2 = pTag`
color:blue;
font-size:20pt;
`;

// Tag2はborderをprops経由で渡す
return (
  <div className="App">
    <Tag1>Tag1</Tag1>
    <Tag2 style={{border:'1px solid green'}}>Tag2</Tag2>
  </div>
);
```



* ソース全体

  * 仕組み自体は難しくありません。&lt;style&gt;タグと&lt;p&gt;タグをセットで作成し、ユニークなclass名をつけて、styleの適用をしています

```tsx
let seq = 0; // classNameを重複させないためのシーケンス番号

// 「<p>タグ＋スタイル設定」コンポーネントを返す「なんちゃってstyled-componsnts」
const pTag = (styles: ReadonlyArray<string> | string) => {
  return (props: any) => {
    // class名を生成(重複しないようにseqをカウントアップ)
    const clsNm = `clsNm${seq++}`;

    // <style>タグを<p>をセットで生成する
    // 重複しないclass名でタグとセレクタを作成する
    // propsはpタグに引き渡す
    return (
      <>
        <style>.{clsNm} {'{'}{styles}{'}'}</style>
        <p className={`${clsNm}`} {...props}>{props.children}</p>
      </>    
    )
  }
};

// 「なんちゃってstyled-componsnts」を関数として呼び出して、コンポーネントを取得
const Tag1 = pTag('color:red;');

// 「なんちゃってstyled-componsnts」をタグ付きテンプレートとして呼び出す
const Tag2 = pTag`
color:blue;
font-size:20pt;
`;

// 生成したコンポーネントを表示する
function App() {
  return (
    <div className="App">
      <Tag1>Tag1 props.childrenに渡す文字列</Tag1>
      <Tag2 style={{border:'1px solid green'}}>Tag2 props.childrenに渡す文字列</Tag2>
    </div>
  );
}

export default App;

```


* 生成した画面イメージ

指定したスタイルが適用されていることがわかります。

![img1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276579/8d2894e4-43df-8105-99e4-947d2fe782f2.png)



* 生成したDOM

![dom.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276579/59fa335f-ba7f-8bdf-1947-85e6eef7899e.png)

https://github.com/murasuke/tagged-template

## 参考ページ

[Demystifying styled-components](https://www.joshwcomeau.com/react/demystifying-styled-components/)
linuxをインストールしたiMacの起動音を無効にする

古いiMac(9,1 Core2duo)は純正のOSとしてはOS X El Capitan 10.11.6が最終版になっている。古いマシンですが、今でもアルミの本体や画面は美しく、Linuxをインストールして再利用してみました。

# Linux(Debian Bullseye)のインストール
インストーラのUSBスティックメモリを作成して、iMacに挿し起動する。この時、Optionキーを押しながら電源を入れることで、起動用のディスクを選択する画面になり、インストーラのUSBを選択する。

あとはそのままインストールを実施する。

# 起動音を無効に
Debian Bullseyeのインストールはすんなり実行できたが、起動するたびに、「ジャーン」と起動音が鳴り響く。正直うるさいので何とかしたい。最近のMacだと鳴らなくなっているらしいので、多くの人がうるさいと思っていたのかも。

## OS X
OS Xからは`sudo nvram StartupMute=%00`を実行すると起動音を無効にすることができるようです。しかしすでにOS XからLinuxに変更してしまったので、この方法は使えない。

## Linux
調べてみると、Linuxでも起動音を無効にすることができるようなので、やってみる。
`efivar -n 7c436110-ab2a-4bbb-a880-fe41995c9f82-SystemAudioVolume -p`コマンドを実行すると現在の設定を確認できる。この値を修正して起動音を無効にする。いきなり値を設定しようとすると、エラーになるので書き込みできるように`chattr`した後で値を書き込む。

```
chattr -i /sys/firmware/efi/efivars/SystemAudioVolume-7c436110-ab2a-4bbb-a880-fe41995c9f82
printf "\x07\x00\x00\x00\x00" > /sys/firmware/efi/efivars/SystemAudioVolume-7c436110-ab2a-4bbb-a880-fe41995c9f82
```

これで無事にLinuxから起動音を無効にできた。
【UiPath】設定ファイルが既に開いているかどうかを確認

# はじめに

この投稿は、RPAツール「UiPath」での実装パターン についての記事です。

UiPathのコミュニティ「UiPath Friends」が企画する「UiPathブログ発信チャレンジ2021サマー」の 16日目の投稿でもあります。

企画の内容は [**こちら**](https://note.com/shumpei_w/n/n651cbdbec4e8) 。カレンダーのURLは [**こちら**](http://u0u1.net/sUwZ) です。

https://twitter.com/ShumpeiWatanabe/status/1405168150736359427?s=20


# 設定ファイルを開いたまま実行して、排他エラー

開発中には良くあります。
設定ファイルに項目を追加して、そのままデバッグ実行すると、以下のような「ファイルが開いている＝排他エラー」になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154139/d3b4fd5e-a15f-0c0e-de22-788d594cc804.png)

Excelアプリケーションスコープを使用し「読み込み専用」で参照しても良いですが、項目追加後のファイル保存忘れに気づけなくなる危険性もあるので「排他エラー」で仕方ないのですが、再度実行するのは面倒です。

# ファイルが開いていればダイアログを表示

なので、以下のようなフローを事前に呼び出して
　`ファイルが開いていれば、「閉じてください」ダイアログを表示`
とすると、再実行しなくて良くなり、便利です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154139/c40d0dab-47c9-2ef1-1c24-e629617c8779.png)

:::note warn
ダイアログを表示すると「UnAttendedRobot」の場合、処理が中断されてしまうので、この方法は「AttendedRobot」または開発中のみにしたほうが良さそうです。
設定ファイルに「確認ダイアログを表示する」フラグを用意し制御するのもGoodです。
:::

「ファイルが利用中か？」のチェック処理については、ネット上に色々紹介がありますが、InvokeCodeアクティビティで以下のように「排他モードで開いてみる」という方法で実施しています。（VB.NETのコードです）


``` VB
isUsing = False
If Not(System.IO.File.Exists(filePath)) Then
    Throw New Exception("ファイルがありません。" & filePath)
End If
'// ファイルを排他モードで開いて、エラーが出れば使用中とみなす（Using指定すると自動開放される）
Try
    Using myFileStream As New FileStream(filePath,
                                         FileMode.Open, 
                                         FileAccess.ReadWrite,
                                         FileShare.None)
    End Using
Catch ex As Exception
    isUsing = True
End Try
```

指定のファイルを開いている場合、以下のようなダイアログが表示されます。
ダイアログが出たら、設定ファイルを閉じてからOKボタンを押せば処理続行されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154139/1b42ca7c-faa0-a127-ebd0-e9cea2585df2.png)

設定ファイルに限らず、処理結果ファイルなどにも応用できます。

内容を確認しやすいように、xaml形式に切り出したものを用意しました。

https://github.com/miyag/UiPath.ReusableCode/blob/master/ReadAndOverrideConfig/FileOpenCheck.xaml

# 終わりに

いかがでしたでしょうか。実装例として役立てば幸いです。
この記事が参考になったら、 LGTMをお願いします。閲覧ありがとうございました。
残プロ　第-44回　~論文.pdfを自動でリネーム~

# 自動で論文タイトルにリネームしたい

皆さんは，論文のpdfファイルをダウンロードした際，ファイル名が意味のない数字やアルファベットの羅列になった経験はありますでしょうか．おそらく，論文を集める際に全員が通る道だと思います．

今回は[PDFMINER](https://github.com/pdfminer/pdfminer.six)を使って，Pythonでpdfを解析し，自動でタイトルを取得します．
なお，プログラムの作成に当たり[こちらの記事](https://qiita.com/mima_ita/items/d99afc28b6f51479f850)をかなり参考にさせていただきました．先人って凄い！


~~~ python:PDFRename.py
import os
import sys
from pdfminer.pdfparser import PDFParser
from pdfminer.pdfdocument import PDFDocument
from pdfminer.pdfpage import PDFPage
from pdfminer.pdfpage import PDFTextExtractionNotAllowed
from pdfminer.pdfinterp import PDFResourceManager
from pdfminer.pdfinterp import PDFPageInterpreter
from pdfminer.converter import PDFPageAggregator
from pdfminer.layout import LAParams, LTContainer, LTTextLine

def get_objs(layout, results):
    if not isinstance(layout, LTContainer):
        return
    for obj in layout:
        if isinstance(obj, LTTextLine):
            results.append({'text': obj.get_text(), 'height': obj.height})
        get_objs(obj, results)


def get_title(path):
    with open(path, "rb") as f:
        parser = PDFParser(f)
        document = PDFDocument(parser)
        laparams = LAParams(all_texts=True)
        rsrcmgr = PDFResourceManager()
        device = PDFPageAggregator(rsrcmgr, laparams=laparams)
        interpreter = PDFPageInterpreter(rsrcmgr, device)
        page = next(PDFPage.create_pages(document)) #１ページ目
        interpreter.process_page(page)
        layout = device.get_result()
        results = []
        get_objs(layout, results)
    f.close()
    title = max(results, key=lambda x:x.get('height'))
    print(title.get('text'))
    return title.get('text').strip()


def main(path):
    os.rename(path, get_title(path)+".pdf")


if __name__ == '__main__':
    path = sys.argv[1]
    main(path)
~~~


get_objs関数内で扱っているobjはheightやwidthも取得できます．
このプログラムでは**１ページ目**にある一番**height**が大きいオブジェクトをタイトルとしています．**type**による条件処理は行ってないのでたまに失敗します．興味ある方はぜひ挑戦してみてください！
Django１～Djangogirls-知ったこと、躓いたところを書きなぐり

自分用です。

仮想環境（virtual environment)の構築
[Djangogirls](https://tutorial.djangogirls.org/ja/django_installation/)より作成

結果
◎それっぽいものができた
◎仮想環境は少し慣れることができた
△よくわからないまま完成させてしまった
☟
やりながら知識も付きそうな本を買い、内容を補完した。
また、時間がかかっても調べながらやることにした。

やりながら分からなかったこと
・コマンドプロンプトで
　仮想環境を作成したいフォルダに移動して
例：cd C:\Users\Name\abc
例：C:\Users\Name\　にいるなら　cd　abc
★コマンド操作を分かっていない…最低限知識を付けよう。
　cdとmkdirは覚えた。やっぱり使わないと思い出せない。

C:\Users\Name\djangogirls> python -m venv myvenv
pythonの部分を「python3」として実行すると何も作成されず、
「Python」とだけ表示されたためpythonにしたところできた。
・venvは「ブイエンブ」と読む
・myvenvは自分の名前や好きなものにしていい（特殊記号やアクセント文字は×）

上記の操作でdgangogirlsの中にmyvenvフォルダが作成される。
cd myvenvで移動してScript/activateで仮想環境を起動可能
（もしくは、myvenv/Script/activate）
（仮想環境を抜ける時はDeactivate）
何度もactivateをactiveと打ち間違えて無駄に悩んだ（笑えない）

VSCodeで「requirement.txt」を作成して、
コマンドプロンプトでDjangoをインストール
（新規ファイル作成→名前を付けて保存→requirement.txt）
requirement.txtは情報用
VSCode使い始めたときは見やすくて感動した。かわいい。

django-admin.exe startproject　プロジェクト名 .
でDjangoプロジェクトを作成する
.はカレントディレクトリ

VSCodeをもう一度見たら、インタプリタを選択してねとの表示
クリックしてmyvenvのpythonインタプリタを選択
（出ない場合はめちゃめちゃ大変だった）

setting.pyのTIMEZONEを"Asia/Tokyo"、LANGAGEを"ja"

python manage.py migrateでデータベース作成

ウェブサーバを起動（python manage.py runserver）
setting.txtにALLOWED_HOSTS = ['localhost']（もしくはワイルドカード？）追加
http://localhost:8000
につながるか確認
（ctrl+breakでサーバー稼働停止）

ついに作る！
blogの作成なのでblogフォルダをstartapp blogで作ってmakemigrations

コードエディタでsettingをいじる（mysite/setting）
blogにできたmodelをいじる
classでオブジェクトを定義、それぞれのプロパティを設定
　blogの公開のためにメソッドを設定
→ここらへんもそのままやっているだけで
全体像をつかむこと（何のためにどこが紐づいているか）ができていなかった

デプロイdeploy！意：公開、配置
（開発したサービスを使用できる状態にする）
リポジトリ＝ファイル、ディレクトリの状態を記録する場所
Djangogirlsの説明にはSECRET_KEYの話が出ずにデプロイをしていたため
セキュリティ関係が全然分からない状態のまま。

☟
最低限つけるべき知識
・コマンド操作
・デプロイ
・セキュリティ
あと、公式ドキュメントをちゃんと読まないと！
ADT7410から温度データを取得し、サーバーに送信する方法

##環境
・　IoTデバイス : ESP-WROOM-32
・　ファームウエア : MicroPython1.13
・　温度センサー : ADT7410
・　サーバー : Ubuntu 20.04 LTS

##ソースコード(ESP32)
・　ADT7410用ライブラリ

```ADTLib.py
from machine import I2C, Pin
p21 = Pin(26, Pin.IN, Pin.PULL_UP)
p22 = Pin(27, Pin.IN, Pin.PULL_UP)

class ADT7410:
    def __init__(self):
        self.i2c = I2C(scl = Pin(27), sda = Pin(26), freq = 10000)

    def getTemperature(self):
        data = self.i2c.readfrom_mem(0x48, 0x00, 2)
        temp = (data[0] << 8 | data[1]) >> 3
        if(temp >= 4096):
            temp -= 8192
        value = temp * 0.0625
        return value

    def temperature(self):
        temp = self.getValue()
        return temp

```

・　ADT7410からデータを取得しサーバーに送信するプログラム

```send.py
from machine import Pin, RTC
import network, urequests, utime
import ujson
import ADTLib
import usocket

#日付取得
def get_jst():
    rtc = RTC()
    url_jst = "http://worldtimeapi.org/api/timezone/Asia/Tokyo" # see http://worldtimeapi.org/timezones
    retry_delay = 5000 # interval time of retry after a failed Web query
    response = urequests.get(url_jst)
    # parse JSON
    parsed = response.json()
    #parsed=ujson.loads(res) # in case string
    datetime_str = str(parsed["datetime"])
    year = int(datetime_str[0:4])
    month = int(datetime_str[5:7])
    day = int(datetime_str[8:10])
    hour = int(datetime_str[11:13])
    minute = int(datetime_str[14:16])
    second = int(datetime_str[17:19])
    subsecond = int(round(int(datetime_str[20:26]) / 10000))
    # update internal RTC
    rtc.datetime((year, month, day, 0, hour, minute, second, subsecond))
    # setup day of the week
    daysOfTheWeek = "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"
    tm = utime.localtime(utime.mktime(utime.localtime()))
    # generate formated date/time strings from internal RTC
    date_str = "{0:4d}/{1:02d}/{2:02d}".format(*rtc.datetime())
    time_str = "{4:02d}:{5:02d}:{6:02d}".format(*rtc.datetime())
    date_ok = date_str + " " + time_str
    return date_ok

HOST = 'IPアドレス'
PORT = 8080

date = get_jst()
#温度データ取得
adt = ADTLib.ADT7410()
temp = adt.getTemperature()

data = {"temp" : temp, "date" : date}

#ソケットの作成
sock = usocket.socket(usocket.AF_INET, usocket.SOCK_STREAM)
saddr = usocket.getaddrinfo(HOST, PORT)[0][-1]

#サーバーに接続
sock.connect(saddr)

#データ送信
sock.sendall(bytes(ujson.dumps(data), "utf-8"))

#終了
sock.close()
```

##ソースコード(サーバー)
・　データを受け取るプログラム

```server.py
class MyTCPHandler(socketserver.BaseRequestHandler):

    def handle(self):
        self.data = self.request.recv(1024).strip()


        print("{} wrote:".format(self.client_address[0]))
        print(self.data)

if __name__ == "__main__":
    HOST, PORT = "IPアドレス", 8080

    with socketserver.TCPServer((HOST, PORT), MyTCPHandler) as server:
        server.serve_forever()
```
##実行結果
・ESP32側

```
{"date": "2021/07/15 23:27:37", "temp": 28.25}'
```

・　サーバー側

```
b'{"date": "2021/07/15 23:27:37", "temp": 28.25}'
```

##参考文献
[1][MicroPythonのTCP通信をパケットキャプチャする](https://blog.goediy.com/?p=311)
EC2踏み台サーバーを経由して、RDSのDBを別のRDSのDBに移す方法

# はじめに

タイトルどおり、EC2踏み台サーバーを経由して、RDSのDBを別のRDSのDBに移す方法について記載します。
<img width="300" alt="スクリーンショット 2021-02-19 18.49.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/988747/8ea4d446-2136-a3a7-d628-0040e8293856.png">
## 流れ
①EC2にSSH接続する

②EC2からRDSのmysqlにログインできるか確認

③RDSのDBをEC2にエクスポートする

④別のRDSのDBパラメータグループのパラメータを変更

⑤EC2から別のRDSにインポートする


## 環境
EC2:Amazonlinux2
RDS:Aurora/mysql



# ①EC2にSSH接続する

[こちらの記事を参考にしてください。](https://qiita.com/holdout0521/items/7010ab2401c813d67d0f)
SSH接続した状態で①〜⑤まで作業してください。

# ②EC2からRDSのmysqlにログインできるか確認


```
$ mysql -h RDSのエンドポイント -P 3306 -u ユーザー名  -p

Enter password: 

mysql> SHOW DATABASES;

old_DB
```
コピーしたいDB名を`old_DB`とします。

### エラー対処①「Access denied」
```
ERROR 1045 (28000): Access denied for user
```
「Access denied」が表示され、mysqlにログインできない場合は、セキュリティグループに問題がある可能性があります。RDSのインバウンドルールを確認し、EC2からの接続が許可されているか確認してみてください。

また、`RDSのエンドポイント`、`ユーザー名`、`パスワード`が間違っている可能性もありますので、確認方法が分からない方は、以下のサイトを参考に調べてください。
[【AWS図解】RDSのユーザ名とパスワードを忘れた場合の確認方法](https://hiyowa-na-engineer.com/rds-check-password/)


Aurora/mysqlであれば、`リージョン別クラスターのライターインスタンス`を`RDSのエンドポイント`に指定しました。

### エラー対処②「mysql: コマンドが見つかりません」
mysqlをインストールしましょう
mysql-communityリポジトリを使ってmysqlをyumでインストールします。

```
$ sudo yum install -y https://dev.mysql.com/get/mysql80-community-release-el7-3.noarch.rpm
$ sudo rpm --import https://repo.mysql.com/RPM-GPG-KEY-mysql-2022
$ sudo yum install -y mysql 
$ mysql --version
mysql  Ver 8.0.18 for Linux on x86_64 (MySQL Community Server - GPL)
```
他にもHomebrewでmysqlをインストールする方法もあります。

# ③RDSからEC2にエクスポートするコマンド

```
$ mysqldump --skip-column-statistics　--quick --single-transaction -h RDSのエンドポイント -u 別のRDSのユーザー名 -p  DB名 | sed -e 's/DEFINER[ ]*=[ ]*[^*]*\*/\*/' >  /var/tmp/dump.sql
```

DB名:`new_DB`
オプション:```--skip-column-statistic --quick --single-transaction```

なぜこのようなコマンドなのかはこちらを参考にしてください。
[MySQLのDBからAWSのRDSへデータをインポートする](https://qiita.com/hikey/items/ab5fca33849d3e3929cb)


# ④別のRDSのDBパラメータグループのパラメータを変更
別のRDSのmysqlにログインし、下記のValueがOFFであればONにする必要があります。

```
mysql> SHOW VARIABLES LIKE 'log_bin_trust_function_creators';
+---------------------------------+-------+
| Variable_name                   | Value |
+---------------------------------+-------+
| log_bin_trust_function_creators | OFF   |
+---------------------------------+-------+
```
OFFのままだと、⑤のEC2から別のRDSにインポートができません。
RDSのDBパラメータグループのパラメータを新しく作成し、`log_bin_trust_function_creators`を1に変更し、RDSにアタッチさせ、再起動します。すると、ValueがONになります。
RDSに元々ついているデフォルトのDBパラメータグループは、パラメータが変更できない仕様になっていますので、新しく作成する必要があります。

```
mysql> SHOW VARIABLES LIKE 'log_bin_trust_function_creators';
+---------------------------------+-------+
| Variable_name                   | Value |
+---------------------------------+-------+
| log_bin_trust_function_creators | ON    |
+---------------------------------+-------+
```

詳しい方法は下記を参照してください。
[AWS RDS MySQL で create function できるようにする](https://qiita.com/ytyng/items/1c5b9ee748f8d6d71c52)
https://aws.amazon.com/jp/premiumsupport/knowledge-center/rds-mysql-functions/

# ⑤EC2から別のRDSにインポートする
別のRDSに新しくDBを作成し、そのDBにインポートします。

```
mysql> CREATE DATABASE new_DB;
```

```
$ mysql -h RDSのエンドポイント -u 別のRDSのユーザー名 -p  DB名 < /var/tmp/dump.sql
```
.NET MVCのViewのRazor構文でif文を使い、返す値を単に文字列にする方法

Viewのファイルを操作するにあたり、困ったことがあった。

~~~csharp
@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Password)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.done)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
            @Html.ActionLink("Details", "Details", new { id=item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.Id })
        </td>
    </tr>
}
~~~
という構文があったときに、item.doneはbool型の値なので、
trueの場合は、済
falseの場合は、未
を表示したい場合、`<td>`タグの中を`<div>`などのhtmlタグで囲まずに使う方法が分からなかったので調べてみた。

方法は2つ。

## 文字列を`<text>`タグで囲む

~~~csharp
        <td>
            @if(item.done){
               <text>済</text>
            } else {
　　　　　　　　　<text>未</text>
            }
        </td>
~~~

## 文字の前に「@:」をつける
~~~csharp
        <td>
            @if(item.done){
               @:済
            } else {
　　　　　　　　　@:未
            }
        </td>
~~~


## 参考記事
https://www.atmarkit.co.jp/fdotnet/rapidmaster/rapidmaster_03/rapidmaster_03.html
UIActivityIndicatorView

# UIActivityIndicatorView
<img width="150" alt="76672204-41E7-4068-BC4A-F32585505D39_1_201_a.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1466343/9b0ec9c6-9349-b5bf-0869-9bc27190982d.jpeg"> 

# コード

##Indicator

```Swift:Indicator
import Foundation
import  UIKit

class Indicator:UIViewController{
    
    let activityIndicator = UIActivityIndicatorView() //インスタンス化
    
    func createIndicator(targetView:UIView){
        
        activityIndicator.center = targetView.center //真ん中に表示
        activityIndicator.style = .large  //表示するスタイルを設定
        activityIndicator.color = .black  //indicatorの色を設定
        
        targetView.addSubview(activityIndicator)
        
    }   
}
```

## ViewController

```Swift:ViewController
import UIKit

class ViewController: UIViewController {


    let indicator = Indicator()
    
    var indicatorCount = 0  //indicatorのアニメーションのStartかStopかを判定させるための変数
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
    }

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        
        indicator.createIndicator(targetView: self.view)　//indicator作成
        
    }
    
    @IBAction func indicatorStartStop(_ sender: Any) {
    
        if indicatorCount == 0{
        
        indicator.activityIndicator.startAnimating()　
        indicatorCount = indicatorCount + 1
        
        }else if indicatorCount == 1{
            
            indicator.activityIndicator.stopAnimating()
            indicatorCount = indicatorCount - 1
            
        }       
    }   
}
```

# 終わり
iOSアプリ開発を始めて２週間目くらいの時に、indicatorをクルクルさせただけでも感動してたなぁ
【今日の学びメモ】ブラウザでパフォーマンス計測

# Chrome

- **DevTools** を開く
- **Network** タブを選択する
- DevTools 左上の赤い丸を押し、ネットワークログの記録を始める
- ページをリロードする

![スクリーンショット 2021-07-15 23.05.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748993/46ac92fc-2367-0050-cef0-4ab2753dbc61.png)


# Safari

- **デベロッパーツール**を開く
- **タイムライン**タブを選択する
- デベロッパーツール左上の赤い丸を押し、収録を始める
- ページをリロードする

![スクリーンショット 2021-07-15 22.58.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748993/9ad0643d-2938-0581-6329-5835deb0bb80.png)


いつかパフォーマンス改善をするときのためにメモ。
活性化関数として使用されているシグモイド関数について学習

今回の記事では、ニューラルネットワークの活性化関数として使用されているシグモイド関数について、Udemyの講座にて学習した内容を要約する。なお、本記事に掲載しているコードは、すべて下記URLに掲載しているUdemy講座から抜粋している

Udemy講座URL
[みんなのAI講座 ゼロからPythonで学ぶ人工知能と機械学習 【2021年最新版】](https://www.udemy.com/course/learning-ai/)

#目次

[1.関数の描画](#1-関数の描画)
[2.べき乗とネイピア数](#2-べき乗とネイピア数)
[3.シグモイド関数](#3-シグモイド関数)

#1-関数の描画

 - numpyをインポート
    - 数学の計算ライブラリが多く入っている
    - 大量データの取り扱いに向いている

```Python
import numpy as np
```

 - linspace
    - 値が並んだ配列を作成
    - 範囲を指定し、その区間を標準で50に区切る
    - 区切る数を変更する場合はもう一つ引数を追加する
    - 主にx軸などの範囲を決めるときに使用する

- また、グラフを表示する際は matplotlib をインポートする

```Python
import matplotlib.pyplot as plt
```

 - ここで下記関数を定義するコードの例を示す(抜粋)

$$y=2x+1$$

$$y=x^2-4$$

$$y=0.5x^3-6x$$

```Python
import numpy as np

x = np.linspace(-4, 4) # x軸の範囲は-4～4とする
y_1 = 2*x + 1          # 1次関数
y_2 = x**2 - 4         # 2次関数
y_3 = 0.5 * x**3 - 6*x # 3次関数
```


#2-べき乗とネイピア数

 - ネイピア数eの数値は下記の通り

$$e = 2.718281828459045...$$

 - numpyをインポートしていると、np.eでネイピア数を利用することができる

```Python
import numpy as np
print(np.e)
```

 - ネイピア数のべき乗の性質
    - yの微小な変化/xの微小な変化(曲線の傾き)が元の関数に近づく
    - 式の変形がしやすいため人工知能分野でよく使われる
    - 下記コードを実行することにより、曲線の傾きが元の関数に近づくことが確認できる



```Python
import numpy as np
import matplotlib.pyplot as plt

x = np.linspace(-2, 2)
dx = 0.01 #微小な変化
e = np.e #ネイピア数

y_e = e**x
y_de = (e**(x+dx) - e**x) / dx

plt.plot(x, y_e, label="e^x")
plt.plot(x, y_de, label="de")

plt.xlabel("x_value",size=14)
plt.ylabel("y_value",size=14)
plt.legend()
plt.show()
```

![ネイピア数.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1001869/bfc385ec-d198-2b3d-d5c4-365fb8838c8d.png)

 - 以下の式におけるnの値を大きくするとネイピア数の値に近づくことができる

$$(1+\frac{1}{n})^n$$

```Python
def approach_napier(n):
  return (1 + 1/n)**n
```

#3-シグモイド関数

 - シグモイド関数は下記の通りの式で表現され、入力(x)から0~1の範囲に変換する

$$ y = \frac{1}{1+e^{-x}}$$

 - シグモイド関数の傾きを求めるすなわち微分すると、下記の通りもとのシグモイド関数に置き換えて表現できるためよく使われる

$$ y{'} = y(1-y)$$


```Python
import numpy as np
import matplotlib.pyplot as plt

e = np.e #ネイピア数

# シグモイド関数
def sigmoid(x):
  y = 1 / (1 + e**-x)
  return y

 # シグモイド関数を微分
def df_sigmoid(x):
  d = sigmoid(x) * (1 - sigmoid(x))
  return d

#微小な変化
dx = 0.1
x = np.linspace(-8, 8)
y_sig = sigmoid(x)
# シグモイド関数の傾き
y_d = (sigmoid(x+dx) - sigmoid(x)) / dx
y_df = df_sigmoid(x)

plt.plot(x, y_sig ,label = "sigmoid")
plt.plot(x, y_d, label = "d_sigmoid")
plt.plot(x, y_df, label = "df_sigmoid")
plt.legend()

plt.xlabel("x",size=14)
plt.ylabel("y",size=14)
plt.grid()
plt.show()
```

![シグモイド.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1001869/163f7621-f000-331e-fe38-05c3b5d629b4.png)


#参考文献


[みんなのAI講座 ゼロからPythonで学ぶ人工知能と機械学習 【2021年最新版】](https://www.udemy.com/course/learning-ai/)
【AWS】Draw.io + VScodeでAWS構成図を書く

## きっかけ
最近、プリセールスを手伝うことが多く、そのため、アプリアーキテクチャ、インフラ構成図をよく書いています。
まずExcelで作成して、レビューOKになったものを提案書用にPPTに修正して、、、という二度手間が発生していたので、同じ形式できれいに作れないかと検索した結果、Draw.ioに行きつきました。

## 前提
- VSCodeインストール済み

## 構築手順
1. Draw.io Integrationプラグインの導入
1. 構成図作成
1. ファイル出力

## 1.Draw.io Integrationプラグインの導入
- 以下リンクでInstallを押下するか、VSCodeのプラグイン検索で"Draw.io"で検索するかでDraw.io Integrationのインストールを実施する。
(インストール後、VSCodeの再起動を推奨)

https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio

![スクリーンショット 2021-07-15 214144.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479886/37433efe-0bce-0881-43db-31b4c7739864.png)

## 2.構成図の作成
- .drawioなどDraw.ioに関係する拡張子を持つファイルを作成、読み込むと方眼紙のような編集画面が開きます。
- 左側メニューで検索すると関係するアイコンが表示されるため、選択して配置することができます。
![スクリーンショット 2021-07-15 214613.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479886/e78866c7-f672-4bcc-b7dd-0348ad58d9c8.png)

- 左メニュー下の"More Shapes"でAWSアイコンセットなどを選択することができ、左mニュー欄に追加することもできます。
![スクリーンショット 2021-07-15 223745.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479886/0ac2cb44-1d52-7405-8d08-dc1cf80f23ee.png)

- 最近、よく書いているインフラ構成図の一部を作成すると以下のようになりました。~~(Draw.io使用している間は明るめのテーマがよさそう…)~~
コメントでテーマの変え方教えていただいたので、記事末尾に追加しました！
![スクリーンショット 2021-07-15 221339.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479886/b7a2cc2f-5e16-ed32-c181-5a45cd394789.png)

## 3.ファイル出力
- ファイル出力するには、File>Exportから可能。出力形式はsvg, png, drawioが選択できる。

![スクリーンショット 2021-07-15 221428.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479886/216b301f-3d22-49e0-fb7a-7d7aff53b9f0.png)

- pngで出力してみたが画質が悪かったため、File>PropertiesからZoomの値を上げるて再出力すると画質が向上した。

![スクリーンショット 2021-07-15 221818.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479886/cc9c4102-b290-5a77-3099-ca0790fe31b1.png)
![スクリーンショット 2021-07-15 224555.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479886/385b561a-5f33-be2c-11e4-e377dfb9748f.png)

- 最終的に出力したpngは以下。
![AWS_Structure.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479886/046b7c17-f70d-2283-7856-c97e20a3c5f2.png)

##　追記: 背景色変更方法
※ @github0013@github 様にコメントで教えていただきました。ありがとうございます！

- VSCode右下'Theme :xxx'の部分を押下
![スクリーンショット 2021-07-19 092739.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479886/d06c38a5-da8c-39c2-b711-3c17d68528a7.png)

- 変更したいテーマを選択
![スクリーンショット 2021-07-19 092628.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479886/17a4c2e1-11db-560a-82e0-ece4803d3059.png)

- 背景色が変わったことを確認
![スクリーンショット 2021-07-19 092709.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479886/6f71dc84-7ab3-3717-0c4e-d5e5f4d17549.png)

## 修正履歴
- 2021/7/19 : コメントでいただいた背景色変更方法を追記
Source Treeの最低限の手順

<h1>概要</h1>
作業用ブランチでファイルを編集したところからmasterにマージまでをおさらい。
<h1>①適当にファイルを編集</h1>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630191/885d8686-305a-3008-6725-373ff7e943f8.png)
<hr>
<h1>②Hunkをステージへ移動</h1>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630191/fb012476-b350-4b29-105c-caf4ef649017.png)
<hr>
<h1>③コミットコメント書く+チェックボックスにチェックしてコミットボタン</h1>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630191/7907b002-155d-e412-34ee-0e953da0bab3.png)
<hr>
<h1>④マージ先のブランチにチェックアウトしてる状態でマージ元右クリックから現在のブランチに{マージ元ブランチ名}をマージするを選択</h1>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630191/3a02fe6b-2999-be45-ae45-b05efd00f3e8.png)
Ruby pを使ったコード検証（デバック）

###pを使ったコードの検証方法
　想定した処理がどこまで正しく行われているか？デバックして状況確認をする

**使えそうなシーン**
　・ エラーが起こったとき
　・ 今この変数は文字列？数値？配列？
　・ ifで正しく条件分岐されてるのか？
　・ 他人のコードの処理の流れを追いながら理解したい

**方法**
　「p」を処理ごとに分かりやすく文字/数値で入れる  

----------------------------------------------------
**例① 他人のコードの処理の流れを追いながら理解したい**

``` .rb
p "a:"
seats_and_groups = gets.split(/\s/)
p "b:"
empty_seat = [*1..(seats_and_groups[0].to_i)]
p "c:"
seats_count = empty_seat.count
p "d:"
number_of_visitors = seats_and_groups[1].to_i
p "e:"
[*1..number_of_visitors].each do
  p "f:"
  used_seats = gets.split(/\s/)
  p "g:"
  users = used_seats[0].to_i
  p "h:"
  seating_number = used_seats[1].to_i
  p "i:"
  fill_last_number = ((seating_number + users) - 1)
　　　　続
```
出力 （入力１回目[6 3]／２回目[2 3]での、実行された処理の違いが分かりやすい）

```
"a:"
6 3
"b:"
"c:"
"d:"
"e:"
"f:"
2 3
"g:"
"h:"
"i:"
```  
------------------------------------------------------------
**例② 今この変数は文字列？数値？配列？**

``` .rb
  if next_seat_candidate.count == next_seat_candidate.uniq.count
    p "1:"
    p empty_seat
    if ((seating_number + users) - 1) > seats_count
      empty_seat = empty_seat - [*1..fill_last_number]
      empty_seat = empty_seat - [*seating_number..seats_count]
    else
      empty_seat = empty_seat - [*seating_number..fill_last_number]
      p "2:"
      p empty_seat
    end
```  

出力（変数/配列の状況の変化がわかる）

```
"1:"
[1, 2, 3, 4, 5, 6]
"n"
"p"
"2:"
[1, 2, 5, 6]
"f:"
```
--------------------------------------------------
大量のファイルをgit pushした際に、「client_loop: send disconnect: Broken pipe」エラーが発生

#筆者の環境
ターミナル：iterm2
git:git version 2.30.1 (Apple Git-130)


現象
大量のファイルを「git push」した場合、「client_loop: send disconnect: Broken pipe」とエラーが表示される

```
client_loop: send disconnect: Broken pipe
send-pack: unexpected disconnect while reading sideband packet
fatal: the remote end hung up unexpectedly
```

「client_loop: send disconnect: Broken pipe」を元に調査し、2つの対応を実施


#解決方法
<h4>①http.postBuffer</h4>

```
git config --global http.postBuffer 157286400
```
大きいサイズをpushする場合バッファサイズを使用するため、増減を上げる
この設定は、[公式](https://git-scm.com/docs/git-config)に記載がある通り、<font color="DeepPink">小さなファイルのpushでもメモリを大量に消費する場合があるので、解決したら戻しましょう</font>

https://qiita.com/akiko-pusu/items/2d65a54e9d2a6c7f9d13


<h4>②サーバの応答回数の設定</h4>

```
vi ~/.ssh/config

Host github.com
 ServerAliveInterval 60
 ServerAliveCountMax 30
```
上記設定は、sshでリモートアクセスする際に、サーバが応答なかった場合、60秒間維持しその接続を30回繰り返すという設定


上記2つの対応を行なった後にエラーが変わり、下記対応に続く

https://qiita.com/kobatako125/items/9d4d1ad86a504044c9c2
CSS で要素をちょうど中心に持ってくる

# はじめに
いつも目測でなんとなくやってしまっていた。
インターン先でコードを読んでいる途中、綺麗に配置する方法を知ったのでまとめた。

今回は [codepen](https://codepen.io) を使って説明する。

# 中心に配置したい要素を用意する
横が 300px, 縦が 150px の長方形を作った。
![スクリーンショット 2021-07-15 22.07.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748993/4d3c0006-5f01-674d-0e27-7445ab4666dc.png)

# 要素の左上端を中心に移動させる
`position: absolute`とし、`left: 50%`かつ`top: 50%`の位置に移動させた。

このときの 50% というのは、画面幅基準であって要素幅基準ではないことに注意。
![スクリーンショット 2021-07-15 22.06.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748993/c1f823be-81d7-febd-d5b3-5289ea8f6684.png)

要素の左上端部分が白い画面の中心にある状態になった。

# 要素の横幅50%分だけ左に移動させる
`transform`属性を使い、`translate: (-50%)`を指定。
画面の中心にあった要素の左上端が、x軸負の向き（左）に 50% 移動した。

このときの 50% は、要素の横幅に対しての 50% である。

![スクリーンショット 2021-07-15 22.06.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748993/65bfbd56-11d3-515f-427f-52f4b76cddf1.png)

これで、要素が水平方向の中心に配置された。

# 要素の縦幅50%分だけ上に移動させる
`translate: (-50%, -50%)`とし、y軸負の向き（上）に 50% 移動させた。

このときの 50% は、要素の縦幅に対しての 50% である。
![スクリーンショット 2021-07-15 22.05.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748993/7c933e50-e7d0-df02-8e13-a2662b33ad81.png)

要素を白い画面の中央に配置することができた。

画面幅を変えてもレイアウトはそのまま。

![スクリーンショット 2021-07-15 22.21.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748993/870b785d-f7d6-1509-ff94-0d25c7e20173.png)

![スクリーンショット 2021-07-15 22.22.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1748993/f8a3075c-a60c-a011-493f-bb6a732cf703.png)


# おわりに
CSSを書くたびに、勉強し直さなきゃと思っている。
Active adminのCSSの影響を取り除く

# Active AdminのCSSの影響を取り除く
現在RailsでWebアプリを作成しています。
Bootstrapの表示が正常にできないと思ったら、ActiveAdminのCSSと競合しているということがわかりました。そのときの解決の備忘録を書いておきます。

# 前提
   - react-bootstrapにてフロントでbootstrapとreactを利用
   - devise, active adminは既に導入済み
   - rails 6.x
   - ruby 2.7.2

で動かしています。 

# 作業

1. config/initializers/active_admin.rbに追記する。

``` config/initializers/active_admin.rb
  config.clear_stylesheets!
  config.register_stylesheet 'active_admin'

  config.clear_javascripts!
  config.register_javascript 'active_admin'
```
2.app/assets/stylesheets/application.cssから、 `*= require_tree .` を取り除く

```app/assets/stylesheets/application.css
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *= require bootstrap/dist/css/bootstrap.min.css
 *= require_self
 */

```

# ハマった所
`The asset "active_admin.scss.css" is not present in the asset pipeline` のエラーが発生した。
` config/initializers/active_admin.rb`の設定に拡張子(.scss)を追加して書いていたため、.scss.cssを参照してしまっていた。

`*=require tree .`を外すことでbootstrapとactive_adminのcssの競合を排除できることに気が付かなかった。

以上です。
UI 改善は必要性があるものなのでしょうか？

こんにちは。
UI の改善は、止むを得ない場合を除き、必要性があるものなのでしょうか？

Windows OS の UI について変遷の記事（下記）を見つけたことをきっかけに考えました：

* 「[Microsoftは“UI音痴”なのか？](https://www.itmedia.co.jp/enterprise/articles/1708/04/news046.html)」
  * 「あれ？　UIが変わった？　いつものツールはどこ？――Windowsユーザーなら、きっとそんな戸惑いを持ったことがあるはず。」

なお、macOS の Big Sur (11.x) も UI 刷新がありましたが、やはり賛否もあるようです。

* Apple 社も「UI音痴」を免れないのかもしれないと思いました。
Twitterウィジェットのスタイルの変更

## 概要

サイトに埋め込んだTwitterウィジェットの文字の大きさを変更したい
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1765459/79c225d4-79d4-57aa-29f8-803cc6f85143.png)

## 参考にしたサイト
[Twitterタイムラインのデザインをカスタマイズし、サイトに表示する方法(TwitterAPIに頼らずに変更)](https://irokoto.co.jp/blog/20200612/post-12)

### ウィジェットのIDを指定して変更するサンプル

```javascript

let add_style_to_twitter_timeline_retry_count = 0;

window.addEventListener('DOMContentLoaded', function () {
    add_style_to_twitter_timeline();
});

/**
 *
 */
function add_style_to_twitter_timeline() {

    const widget = document.getElementById("twitter-widget-0");

    // iframe内のコンテンツが読み込まれるまで0.5秒毎にリトライ
    if (null === widget) {
        // リトライの上限は5回
        if (5 > add_style_to_twitter_timeline_retry_count) {
            ++add_style_to_twitter_timeline_retry_count;
            setTimeout(function () {
                add_style_to_twitter_timeline();
            }, 500);
        }
        return;
    }

    // タイトルのフォントサイズ変更
    [].forEach.call(widget.contentWindow.document.getElementsByClassName('timeline-Header-byline'), function (x) {
        x.style.fontSize = '20px';
    });
}
```

### ウィジェットを２つ設置して、その２つに同じ変更をするサンプル（Jquery版

```javascript
function add_style_to_twitter_timeline() {

    const widget = $('iframe.twitter-timeline');

    // ２つのiframe内のコンテンツが読み込まれるまで0.5秒毎にリトライ
    if (2 > widget.length) {
        // リトライの上限は5回
        if (5 > add_style_to_twitter_timeline_retry_count) {
            ++add_style_to_twitter_timeline_retry_count;
            setTimeout(function () {
                add_style_to_twitter_timeline();
            }, 500);
        }
        return;
    }

    // タイトルのフォントサイズ変更
    const widget_contents = widget.contents();
    widget_contents.find('head').append('<style>.timeline-Header-byline{font-size:20px;}</style>');
}
```

### 一言

iframe内のスタイルの変更初めてやった😄
githubに大量のファイルをpushする際に、エラーが発生する「Connection to github.com closed by remote host.」

#筆者の環境
ターミナル：iterm2
git:git version 2.30.1 (Apple Git-130)

現象
大量のファイルgithubにpushしたところ
「Connection to github.com closed by remote host.」
となり、リポジトリにpushできず


#実行コマンド

```
# 対象のフォルダ（ディレクトリ）に移動する（/Users/test/hogeの大量ファイルをgitにあげる）
$ cd hoge

# git init で ローカルリポジトリを作成する
git init
git add .
git commit -m "Initial commit"

# リモートリポジトリのアクセス先を設定する
$ git remote add origin https://github.com/GitHubのユーザ名/GitHubのリポジトリ名.git

# pushする
$ git push -u origin master
Enumerating objects: 2624, done.
Counting objects: 100% (2624/2624), done.
Delta compression using up to 8 threads
Compressing objects: 100% (2536/2536), done.
send-pack: unexpected disconnect while reading sideband packet
Connection to github.com closed by remote host.
fatal: the remote end hung up unexpectedly

```

#解決方法
結論から記載すると、「~/.ssh/config」に下記の記載をすれば、解決
※「~/.ssh/config」はsshでリモート接続する際の設定ファイル

```
#viエディタで記載（無ければ作成）
vi ~/.ssh/config

Host github.com
 Hostname ssh.github.com
 Port 443
```

2時間費やして、英語のサイトで解決
うまくいかないなぁと思いつつ頑張っていこう


#解決方法の参考URL
[ssh_exchange_identification: Connection closed by remote host under Git bash](https://stackoverflow.com/questions/10127818/ssh-exchange-identification-connection-closed-by-remote-host-under-git-bash)（英語のサイト）
窓が開いているかどうかのセンサーデータをポータルで見やすく表示

家の窓が開いているかどうかをGoogle Data Portalでモニタリングできるようにしました。
※ まだ1階と2階しかセンサーが設置されていないので、3階とLoftのデータは取れていないです

![portal_mado.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/849198/2ec569e7-dc53-c76a-65d7-203fd08f25de.png)


#### 前提
* Google Data Portalにベースとなるレポートがあること (詳細は以下ページ参照)

https://qiita.com/tosshie/private/bc43114d42e05bc3afcb

* Google SpreadSheet に窓の開閉情報がリアルタイムに更新されていること (詳細は以下ページ参照)

https://qiita.com/tosshie/private/0e4a7cb3f8171984dc39


#### Google SpreadSheet側の設定
* Google Data Portalの仕様で、スコアカードを使う場合は"合計"とか"平均値"とかしか表示できないので、最新値だけのシートを作ります
   
https://qiita.com/tosshie/items/740515ba66116bf56e84

* 一段階でやってもいいのですが、関数が読みにくくなるので二段階でやっています。
* 第一段階
    * 最新データのみを表示するシートを作成
    *関数例： `=if(indirect("test1!B"&counta(test1!A:A))="",if(indirect("test1!B"&counta(test1!A:A)-1)="",if(indirect("test1!B"&counta(test1!A:A)-2)="",indirect("test1!B"&counta(test1!A:A)-3),indirect("test1!B"&counta(test1!A:A)-2)),indirect("test1!B"&counta(test1!A:A)-1)),indirect("test1!B"&counta(test1!A:A)))`
    * 以下の場合の例です
        * 元データが入っているシート名："test1"
        * B列に入っているデータを引き抜いています
        * 一番下の行に値がなかったら1個ずつ上の行を見に行くようにしています

https://qiita.com/tosshie/items/740515ba66116bf56e84

* 第二段階
    * ステータスを数字に変換するためのシートを作成
    * Open!を1, Closeを0に置き換えています
    * 関数例：`=if(current!B2="Open!",1,if(current!B2="Close",0,"NG"))`


#### Google Data Portal側の設定
* Google Data Portalを開きベースとなるレポートを表示
* 右上の編集ボタン
* メニューのデータを追加 → Google SpreadSheetから最新データのみを表示するシートを選択 → 追加 → レポートに追加
* メニューのリソース → 追加済みのデータソースの管理 → 追加したものの編集ボタンをクリック
* 値を以下のように変更し完了ボタンを押す → 閉じる
    * 窓の開閉データ
        * タイプ: 数値
        * デフォルトの集計: なし
    * 日付データ
        * タイプ: 日付、時、分
        * デフォルトの集計: なし
* テキストを追加
    * 横長の四角
    * 窓を識別する名前を記載(1F_northなど)
    * 塗りつぶし：カスタムの白と水色のグラデーション（お好みで）
* グラフを追加 → スコアカード → 配置
* スコアカードのメニュー（右側に出ているプロパティ的な部分）を変更
    * データソース: 追加したシートを選択
    * 期間のディメンション: 不要（値が入っていたら削除）
    * 指標: 窓の開閉データ(0 or 1が入っている)を選択
    * スタイルメニューから背景色を指定
        * データが取れなかった時用の色を指定（私は紫を指定しています）
    * 条件付き書式
        * ルール1:
            * 色のタイプ：単一色
            * 書式ルール：値、等しい、1
            * 色とスタイル：
                * 文字：transparent
                * 塗りつぶし：青
        * ルール2
            * 色のタイプ：単一色
            * 書式ルール：値、等しい、0
            * 色とスタイル：
                * 文字：transparent
                * 塗りつぶし：transparent
    * このスコアカードを小さくしてテキストの上に配置
* ↓の絵のように、開いているときは青空が見えている感じで表示されます。

![mado.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/849198/bb779454-bf9f-780c-aa8f-82213ef21546.png)

----------

2021年3月から始めたスマートホーム化はこちらに一覧化しています（2021年7月時点）

https://qiita.com/tosshie/items/82dcc6405925b12d2fd1
PHP 自動販売機ロジック

Every Qiita #13
のんびり独学初学者の毎日投稿チャレンジ 13日目
今回は・・・
自動販売機ロジックを考えたときの備忘録です。

###処理内容
お釣りを貨幣毎に何枚必要かを計算し出力します。不足の場合不足金を出力します。

```php5
$purchase = 10000;   // 支払い金額
$product = 9000; // 購入金額
function calculation($purchase, $product){
  $money = [10000,5000,1000,500,100,50,10,5,1];
  $change = $purchase-$product;
  $result = [];
  if ($change < 0) {
	return $change *= -1;
  }
  foreach ($money as $value) {
    if($change <= 0){
      $result[$value] = 0;
    }else{
      $page = floor($change/$value);
      $result[$value] = $page; 
      $change -= ($page*$value);
    }
  }
  return $result;
}
```
返り値には貨幣をキーとして、値に対応する枚数を指定しています。

####解説
1. 貨幣の種類を格納した配列を用意します。
1. お釣りを計算
1. 返り値は配列になるので、空の配列を定義します。
1. お釣りが0円未満の場合は-1を掛けてreturnします
1. お釣りが0円以下の場合は枚数=0に設定し、全ての貨幣と枚数を出力できるようにします。
1. お釣りを貨幣で割った整数値が枚数になるのでfloor関数で枚数を計算します。←そのまま返り値に格納します。
1. 貨幣×枚数をお釣りから引き、お釣りを再定義します。<br>
 ※4〜6を全ての貨幣でループ処理させます。
ビューバインディングを有効にする(ViewBinding)


#ビュー バインディングとは
ビューを操作するコードを簡単に記述できる機能です。モジュール内でビュー バインディングを有効にすると、そのモジュール内に存在する XML レイアウト ファイルごとにバインディング クラスが生成されます。バインディング クラスのインスタンスには、対象レイアウト内で ID を持つすべてのビューへの直接参照が組み込まれます。

ほとんどの場合、ビュー バインディングは findViewById の後継となります。

#設定方法

```kotlin:build.gradle(Module)
ndroid {
    compileSdkVersion 30
    buildToolsVersion "30.0.3"

    defaultConfig {
        applicationId "com.example.helloworldcount"
        minSdkVersion 16
        targetSdkVersion 30
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}
```


こちらの上にあるbuild.gradle(Moddule)のbuildTypesの
下あたりにbuildFeatures追加していきます。



```
buildFeatures {
        viewBinding = true
    }
```


MainActivityにprivate  lateinit var  binding: ActivityMainBindingと
binding = ActivityMainBinding.inflate(layoutInflater)
        val view = binding.root
        setContentView(view)
を追加していきましょう！

```kotlin:MainActivity
package com.example.helloworldcount

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.example.helloworldcount.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    private  lateinit var  binding: ActivityMainBinding
    val count = 0
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        val view = binding.root
        setContentView(view)
    }
}

```


そうするとこのような感じで使用できるようになります。
ボタンをタップした時にTextを変える処理です。


```
binding.button.setOnClickListener {
            binding.textView.text = " こんにちは "
        }

```

以上ビューバインディングを有効にするやり方でした。
久しぶりにWindowsPCのセットアップをしたので

# やあやあみんな元気に社畜してるかな

qiitaの更新が久しぶりすぎてなんか違和感があるかもしれないけど
世界で最弱の人間になりながら這いつくばって要件定義からデザインから何でもかんでもやってしまう人になりました


# 本題


Windowsなんて久しく触ってないし。
むしろawsに知見がある人がいないの？
って事で、
先輩インフラエンジニアから知恵をお借りしてなんとか一匹狼してます。

# で現場で入れろって言われたソフト
XAMPP
はい？ってなった。
ローカルで何台も仮想サーバ立てられないし。
あ、うんそういう感じなのねって言う。

ファイルジラ
確かに妥当だけど環境設定周りとダブルチェックができるような環境設定を誰も知らなかった件。

# テキストエディタ
好きなもの入れてって言われたのでいつも通りのサブライムテキスト。
かなーりカスタムした。

あとはVS Codeかなぁ
でピンク配色にカスタム。

バージョン管理のシステムがグダグダだったので
gitの関係をいれて
git bashである程度リナコマ打てるようにして
万事休すかと思ったら

My SQL Workbenchインスコしたけど、
アカウント情報もなんもかんも教えて貰えなくて詰んだ。
インスコするところとか見学させてとか言われたのに私の要件を満たして無いじゃん。
LAMPじゃないからしゃーないかしかも言うなればその程度なのねー、CUIって大切なのにーって思った

# あーちなみに
最近、Lambda復帰。
ステップファンクション始動。
で、このセットアップをしたPCは案件の都合で使用しなくなりました。
借用PCが快適すぎるのでウハウハです。
あと。
Python初めました。（冷やし中華はじめました的な。