OmniAICreator/Qiita-1.07M huggingface dataset:
xpring-jsを使ってXRPをMainnet上で送る

# やりたいこと
- タイトルの通り

# ソース
- https://github.com/yuki777/xpring-xrp-sender

```javascript
  const senderWallet = Wallet.generateWalletFromSeed(process.env.SENDER_SEED);
  const remoteURL = process.env.REMOTE_URL;
  const drop = BigInt((Math.round(amount*1000000)).toString()); // 1XRP = 1,000,000drop

  let testOrMain = XrplNetwork.Main;
  if(process.env.IS_TESTNET){
    testOrMain = XrplNetwork.Test;
  }

  const xrpClient = new XrpClient(remoteURL, testOrMain);
  const senderXAddress = senderWallet.getAddress();
  const senderClassicAddress = XrpUtils.decodeXAddress(senderXAddress);
  const receiverXAddress = XrpUtils.encodeXAddress(receiverClassicAddress, receiverTag);
  const transactionHash = await xrpClient.send(drop, receiverXAddress, senderWallet);
```

# 使い方
```bash

node send-xrp.js --help
Usage: send-xrp [options]

Options:
  -V, --version                    output the version number
  -d, --destination <destination>  Destination xrp address (default: false)
  -t, --tag [tag]                  Destination tag (default: null)
  -a, --amount <amount>            Send amount. 1 = 1 XRP. (default: false)
  -h, --help                       display help for command

Examples:
  node mainnet-send-xrp.js -d rUas92gJndsSWhFCBbkH3N1yt8YztVfosA -t 4294967295 -a 0.000001
```

# ほか
- Xpringがサーバー側コンポーネントを用意してくれてるのでXRPの送信は楽ですね :)
- 需要があればもう少し書く
【Laravel】php artisan migrateエラーへの対応 : 1   PDOException::("SQLSTATE[HY000] [2002] Connection refused")       /Applications/MAMP/htdocs/task_test/vendor/laravel/framework/src/Illuminate/Database/Connectors/Connector.php:70

#【Laravel】php artisan migrateエラーへの対応 : 1   PDOException::("SQLSTATE[HY000] [2002] Connection refused")       /Applications/MAMP/htdocs/task_test/vendor/laravel/framework/src/Illuminate/Database/Connectors/Connector.php:70

上記エラーを対応した際の内容を記録します.

## 目次
* [動作環境](#動作環境)
* [解決法](#解決法)
* [調べたこと](#調べたこと)
* [エラー原因の考察](#エラー原因の考察)
 
---------------------------------------
## 動作環境
`OS : macOS Mojave 10.14.6`
`MAMP : 5.7`
`MySQL : 5.7.26`
`PHP : 7.2.31`
`laravel : v6.18.16`


## 解決法

先に解決した方法を記載します.
.envファイルに`DB_SOCKET=/Applications/MAMP/tmp/mysql/mysql.sock`を追加します.


```bash:.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_blog
DB_USERNAME=blog_user
DB_PASSWORD=mnhgtr54
//追加
DB_SOCKET=/Applications/MAMP/tmp/mysql/mysql.sock
```

キャッシュをクリアし、再度、マイグレーション

```bash:
$ php artisan cache:clear #キャッシュをクリア
$ php artisan migrate #再度実行
Migration table created successfully.
```
こちらの記事を参考にしました.
https://teratail.com/questions/183824


## 調べたこと

MAMPのページを見るとUnixソケットのパスが記載されている.

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526570/9fdb3505-6121-b49f-cd3a-76ddf4a47a17.png)

またUnixソケットを利用する場合はSocketを使用する必要があるとのこと

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526570/2d0b9a28-308e-63ec-3fab-078762876673.png)

ここでそもそもUnixソケットとは何かについて調べたところUNIXドメインソケット通信という通信プロトコルということが分かった

>UNIXドメインソケット（英: UNIX domain socket）とは、単一のオペレーティングシステム内で実行されるプロセス間でデータを交換するためのデータ通信の終点.UNIXドメインソケットは、アドレス・名前空間としてファイルシステムを使用している。これらは、ファイルシステム内のinodeとしてプロセスから参照される。これは、2つのプロセスが通信するために、同じソケットを開くことができる。しかし、コミュニケーションは、完全にオペレーティングシステムのカーネル内で発生する

[詳細はこちらのページが参考になります.](https://qiita.com/kuni-nakaji/items/d11219e4ad7c74ece748)

##　エラー原因の考察
   
今回のエラーの件をまとめると

 MacのターミナルとMAMPのMySQLは同一のマシン上にインストールされているため,
Unixドメインソケット通信を利用して接続する必要があった.

 そのため,MAMPのヘルプにあるようにドメインソケットのアドレスとなる`/Applications/MAMP/tmp/mysql/mysql.sock`を指定することでターミナルとMySQLで通信ができるようになった
GitHub コンフリクトの解消

# GitHubでのコンフリクト解消法

GitHubへのPull requests時にコンフリクトが置きている場合、下のような表示が出る

![alt](https://help.github.com/assets/images/help/pull_requests/resolve-merge-conflicts-button.png)

####右上の[Resolve conflicts]をクリック

![alt](https://help.github.com/assets/images/help/pull_requests/view-merge-conflict-with-markers.png)

↑↑のようにコンフリクト部分を表示してくれるので不要な部分を削除する
(<<<<<<<、=======、>>>>>>>も削除)

####削除できたら[Mark as resolved]をクリック

![alt](https://help.github.com/assets/images/help/pull_requests/mark-as-resolved-button.png)

コンフリクトしているファイルが複数ある場合は左側のconflicting filesの次のファイルに移動します


![alt](https://help.github.com/assets/images/help/pull_requests/resolve-merge-conflict-select-conflicting-file.png)


####全てのファイルで修正が終わったら[Commit merge] をクリック

![alt](https://help.github.com/assets/images/help/pull_requests/merge-conflict-commit-changes.png)


以上、GitHubでのコンフリクト解消でした
ファビコンの配置（Python,Flask,Heroku使用時）

#ファビコンが反映されない！
全然ファビコンが表示されなかった。調べてもわからなかった。
`ファビコン　配置`　`ファビコン　場所`
で調べるとだいたい「ルートディレクトリに」「index.htmlと同じ階層に」って出てくる。
「HTMLのheadにlink書けば（imagesファイルとかでも）大丈夫」という話もあった。

でないんだが？？？
<img width="869" alt="スクリーンショット 2020-05-31 20.07.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638366/d4058d63-6243-0f4e-c4ec-d281f53c442f.png">


#HTMLとCSSしかないサイトとは違う！
HTML,CSSだと

```
project
├ index.html
├ favicon.ico  ←--ルート、index.htmlと同じ階層
├ css
│ └ stylesheet.css
└ images
  └ photo.png
```

JSが加わると

```
project
├ index.html
├ favicon.ico  ←--ルート、index.htmlと同じ階層
├ css
│ └ stylesheet.css
├ js
│ └ common.js
└ images
  └ photo.png
```

ってかんじだけど、これがだいたい調べると出てきていた。
Flaskが加わると変えないといけない。
`フラスク　パイソン　ファビコン　フォルダ　配置` あたりを組み合わせて検索。

```
project
├ static
│ ├ css
│ │ └ stylesheet.css
│ ├ js
│ │ └ common.js
│ ├ images
│ │ └ favicon.ico  ←--┐
│ └ favicon.ico  ←--staticの中（もしくはさらにimagesの中でも可）
├ templates
│ └ index.html
├ app.py
└ servise.db
```
<img width="874" alt="スクリーンショット 2020-06-01 13.39.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638366/70250604-5cd1-ef0d-9a94-5d55c847ec89.png">

静的ファイルの方、staticの中にないといけなかった。
HTMLのheadにリンクを置くもの（CSS,JS）と同じだって覚えよう。
プログラミングスクールでFlask練習用に作ったページでもでこうなってたから、ちゃんと見ればよかった。
あとこのバックエンド系のフォルダ作ったのは別の作業者だったので、配置が違う理由とか全く考えずに使っていた。

#参考
[Herokuにファビコンをデプロイするにはどうすればよいですか？](https://www.it-swarm.dev/ja/favicon/heroku%E3%81%AB%E3%83%95%E3%82%A1%E3%83%93%E3%82%B3%E3%83%B3%E3%82%92%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E3%81%99%E3%82%8B%E3%81%AB%E3%81%AF%E3%81%A9%E3%81%86%E3%81%99%E3%82%8C%E3%81%B0%E3%82%88%E3%81%84%E3%81%A7%E3%81%99%E3%81%8B%EF%BC%9F/956952696/ "it-swarm.dev")
[Adding a favicon](https://flask.palletsprojects.com/en/1.1.x/patterns/favicon/#adding-a-favicon "Flaskヘルプ")
llvm-mingw(clang) + imgui + wine64 で HW accelerated OpenGL 3.3 GUI アプリを開発実行する

## 背景

* OpenGL で HW accelerated が必須もしくは強く推奨される C++ アプリを開発している
  * 多量のポリゴン描画するとか, shader 使うとか
  * UI ほしいので, imgui 使う
  * Windows, Linux 両方で動かしたい
  * Windows では基本リリース物(.exe)が動けばよいので, 開発時は慣れきった Linux で行いたい
* clang address sanitizer を Windows でも使いたい 

とりあえず OpenGL 3.3(NVIDIA GPU で確認)が HW acclerated(つまり CPU エミュレーションではなく GPU を使ってくれる)で動くのを確認しました.

## インストール, 設定

llvm-mingw(clang) 入れます.

https://github.com/mstorsjo/llvm-mingw

cmake, optional で ninja あたりもいれておきます.

libunwind.dll などへのパスを LD_LIBRARY_PATH に追加しておきます.
 
OpenGL 開発環境としては, glad https://glad.dav1d.de/ で extension loader, glfw3 で画面生成環境を作るのが推奨です.

imgui では glfw3 + opengl3 を使います(OpenGL 3.3+ の機能を使わないのであれば, opengl2 でもいいかも)

あとは cmake で llvm-mingw cross するように `CMakeLists.txt` を書き書きします!
(MinGW gcc を使う場合も同等)


wine64 を入れます.

apt で入るのでも行けるかもしれませんが, 今回は執筆時点で最新 stable 5.0 を使いました.

Ubuntu 18.04 に WINE 最新版(2020/05/10 時点 stable 5.0) apt package をインストールするメモ
https://qiita.com/syoyo/items/69d25664ab0e7f537ae8


`a.exe` を `wine64 a.exe` で起動するのはめんどいので, `a.out` のように `./a.exe` のようにして起動できるようにします.

binfmt + wine で Windows バイナリを Linux で ./a.exe のようにして実行するメモ
https://qiita.com/syoyo/items/9fd8758ea3878c36e807

これで完成です!


<blockquote class="twitter-tweet"><p lang="en" dir="ltr">MinGW(llvm-mingw clang) cross compiled imgui(OpenGL 3.3) Win64 app runs finely on Ubuntu 18.04 + wine64(use binfmt to directly launch .exe) with HW accelerated GPU(NV GPU)!!!! 🥳🎉💪🥰 You can develop OpenGL 3.3 Win64 app on Linux without VS/MSVC!!! <a href="https://t.co/ssZRbd1UWk">pic.twitter.com/ssZRbd1UWk</a></p>&mdash; Syoyo Fujita 🌸 レイトラ 🐯 2 周年 🎉 (@syoyo) <a href="https://twitter.com/syoyo/status/1267394388474265601?ref_src=twsrc%5Etfw">June 1, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

wine 独自の OpenGL 設定などは不要でした.
wine の OpenGL 実装が, うまく Linux 側の OpenGL ドライバを叩いてくれているようです.

## 発展

Windows に VNC や RDP で繋いで, IDE としては Visual Studio をつかう.

Windows 機を別途用意します.
ディスクを NFS or samba なりでマウントしておき, git repo フォルダを Windows と Linux マシンで両方から見えるようしておく.

Windows で OpenGL/Vulkan アプリを動かして画面をイントラネットで VNC などで転送したいメモ
https://qiita.com/syoyo/items/909f5915252ba5f197a0 

快適なテキスト編集のために, 画面転送オプションで非圧縮モードを選びましょう!

## TODO

* [ ] Vulkan API が動くか試す. 
  * Wine 5.0 から Vulkan 1.1 が対応されています https://www.linuxuprising.com/2020/01/wine-50-stable-released-with-vulkan-11.html
  * 現状 NVIDIA GPU は Vulkan 1.1 までの対応なので, ちょうどよいでしょう.
nginxの動作検証環境をDockerを用いて構築する

手軽に nginx の設定ファイルを修正し，動作確認ができる環境を作成．

https://github.com/kayamin/handson_nginx

```terminal:ディレクトリ構成
./handson_nginx
├── README.md
├── docker
│   ├── nginx
│   │   ├── Dockerfile
│   │   ├── nginx.conf
│   │   ├── nginx.repo
│   │   └── nginx_with_comment.conf
│   └── springboot
│       └── Dockerfile
├── docker-compose.yml
└── nginx_log
    ├── README.md
    ├── access.log
    └── error.log
```

## 何が嬉しい？
- nginx.conf の設定内容の動作検証を手軽に行うことができる
    - docker-compose を用いて nginx の裏に springboot が存在する環境を手軽に立ち上げられる
    - nginx.conf を変更したら docker-compose コマンドを再度走らせるだけで設定が適用される
    - nginx のエラーは内容は error.log に即座に書き出されるので設定ファイルの何が間違っているのかがすぐに分かる
 
## 使用手順

```terminal:立ち上げてみる
git clone https://github.com/kayamin/handson_nginx.git
docker-compose up -d
docker ps
```
```terminal:リクエストを投げてみる
# springboot コンテナへ直接リクエスト
curl -v localhost:8090/hello 

# nginx コンテナに対してリクエスト -> springboot コンテナへプロキシされる
# access.log にログが追加されるので確認
curl -v localhost:80/hello 

# springboot コンテナへ直接リクエスト
curl -v localhost:8090/addtwo/4

# nginx コンテナに対してリクエスト -> rewrite された上で springboot コンテナへプロキシされる
# error.log にリライトのログが追加されるので確認
curl -v localhost:80/foward_proxy2/4/addtwo
```

```terminal:nginx.confを修正して反映する
# nginx.conf を好きなように編集する
~

# 再度docker-composeコマンドを実行する
# nginx.conf の修正を検出して nginx イメージが再作成され立ち上がる
docker-compose up -d --build

# nginxコンテナが立ち上がらない場合は何かしらエラーが出ていないか error.log を確認
docker ps
```

## 備考
- springboot 側には `/hello`, `addtwo/{$num}` APIのみ用意

## 参考
- [Nginx + Spring Bootアプリケーションをdocker-composeで起動する](https://qiita.com/kent-hamaguchi/items/8f5ac7f05b7145c40b7c)
- [Nginx reverse proxy + URL rewrite](https://serverfault.com/questions/379675/nginx-reverse-proxy-url-rewrite)
- [Nginxのリダイレクト設定のメモ](https://qiita.com/kt_higa/items/f26ba1453164c82d6ad5)
- [nginx実践ガイド impress top gearシリーズ Kindle版](https://www.amazon.co.jp/nginx%E5%AE%9F%E8%B7%B5%E3%82%AC%E3%82%A4%E3%83%89-impress-top-gear%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-%E6%B8%A1%E8%BE%BA%E9%AB%98%E5%BF%97-ebook/dp/B01N183E3H/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&keywords=nginx&qid=1591004963&sr=8-1)
- [Dockerfileを改善するためのBest Practice 2019年版](https://www.slideshare.net/zembutsu/dockerfile-bestpractices-19-and-advice)

## 所感
- [nginx実践ガイド impress top gearシリーズ Kindle版](https://www.amazon.co.jp/nginx%E5%AE%9F%E8%B7%B5%E3%82%AC%E3%82%A4%E3%83%89-impress-top-gear%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-%E6%B8%A1%E8%BE%BA%E9%AB%98%E5%BF%97-ebook/dp/B01N183E3H/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&keywords=nginx&qid=1591004963&sr=8-1) の内容を実際に試してみたく構築した
- 実際に自分で環境を構築することで centos7, systemd, docker, docker-compose 等についての理解が深まった
【Rails5】[ Turbolinks ] ページ遷移やブラウザバックでJSが動かないときの対処法

##実装した機能

####開発環境
```text
ruby > 2.6.5
rails > 5.2.4.2
```

####実装したJS
```js
$(document).ready(function(){
   $("#menu").on("click", function() {
      $(this).next().slideToggle();
   });
});
```

jqueryを使って、なんの変哲もない開閉式ハンバーガーメニューをつけました。
JSのコード自体の良し悪しはおいておいて、動作としては問題ないはずです。

##状況
初期ロード時には問題なく動作する。
ページ遷移、ブラウザバックのときに挙動がおかしい。
クリックで発火はしているが、開閉をループしたり、不安定。
リロードすると通常動作する。

##考察と対策
動いてはいるので、おそらく読み込みのタイミングが間違っている？
→ `ready` `onload` `ajaxStop` など一通り試してみてもダメ。

グーグル先生に相談したら、こんな記述を発見

```js
$(document).on('turbolinks:load', function () {
...
});
```

`turbolinks:load` なにこれ見たことない…
どうやらRails独自の記述らしいです。

##Turbolinksの扱い

こちらの記事を参考にさせていただきました。
[turbolinksチートシート](https://qiita.com/morrr/items/54f4be21032a45fd4fe9 "turbolinksチートシート")

####Turbolinksとは？

- Ajaxによるページ遷移の高速化のためのライブラリ(Gem)
- ユーザ側から見て、通常のページ遷移と同じように表示される/動作する
- Rails4からデフォルトでインストールされている

つまり、この機能が今回のJSに影響してしまっているようです。

####turbolinksをどう扱うか

Gemなので、消してしまえば解消はできますが解決にはならないので
どう扱うべきかリサーチしてみました。

主にこのような扱いがあります。

1. \<a>タグごとにturbolinksを無効にする
1. turbolinks自体を無効化（削除）する
1. JSの読み込み時にturbolinksを適応しない、タイミングを変える

##1.\<a>タグごとにturbolinksを無効にする

リンク自体に`{"turbolinks" => false}`を指定すると
そのリンクはturbolinksが無効になります。

```erb
<%= link_to "HOGE", root_path, data: {"turbolinks" => false} %>
<%# => <a data-turbolinks="false" href="/">HOGE</a> %>
```
これを記述すれば、間違いなくturbolinksを外すことができます。
特定のスクリプトのみ制御する場合は良さそうですが、さすがに全部に記述するのは厳しそうですね…

##2.turbolinks自体を無効化（削除）する

####Gemを削除

この一行を削除

```rb:Gemfile
#gem 'turbolinks', '~> 5'
```
```terminal:ターミナル
$ bundle update
```

####application.jsを編集

```app/assets/javascripts/application.js
//= require turbolinks #この行を削除
```

###application.html.erbを編集
`'data-turbolinks-track': 'reload'` を削除します。

```erb:app/views/layouts/application.html.erb
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
```

これで無効化されました。
JSなどを多用するサイトでなければ無効化してしまうのが確実かもしれません。

##3.JSの読み込みにturbolinksを適応しない

`ready` `onload` などと同じように、
この記述でturbolinksを適応せずにロードできます。

```js
$(document).on('turbolinks:load', function () {
...
});
```

他にも、turbolinksを適応するタイミングも変更ができます。
詳しく知りたい方はこちらを参照ください。
[その他のライフサイクルイベントをとる](https://qiita.com/morrr/items/54f4be21032a45fd4fe9#%E3%81%9D%E3%81%AE%E4%BB%96%E3%81%AE%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B5%E3%82%A4%E3%82%AF%E3%83%AB%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%82%92%E3%81%A8%E3%82%8B "その他のライフサイクルイベントをとる")

スクリプトごとに微調整が効くので、今回はこれが最適解だと思います。

##まとめ
果たして、Turbolinksは優れた機能なのか、おせっかい機能なのか…
今の所どちらとも言えません笑
デフォルトでインストールされているということは、きっとあったほうが良いのだろうと思いますが…
もっと効果的な使用法をご存じの方はぜひコメントを下さい！
Ruby+Seleniumでブラウザの自動化ツール作成

大学の履修登録の抽選科目で誰かが外した時に、先着でその授業を取るためにひたすらポチポチする作業を自動化するツールを作りました。
大学ごとに履修登録の仕方は異なると思うので、大枠だけ記しておきます。
使用したのはRuby、SeleniumWebDriver、ブラウザはGoogleChromeです。

##Seleniumとは
Webブラウザ上でWebアプリケーションを自動で操作（テスト）するツール。

##Selenium WebDriverとは
旧来のSelenium RCの問題点を解決し、ブラウザを操作する仕組み。
Selenium RCをSelenium1、Selenium WebDriverをSelenium2とも呼ぶ。

##環境

```
$ sw_vers
ProductName: Mac OS X
ProductVersion: 10.14.6
BuildVersion: 18G103

$ ruby -v
ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-darwin18]
```

##Selenium WebDriverのインストール

```
$ gem install selenium-webdriver
```
ターミナルでSelenium WebDriverのgemを追加。

```
$ gem list
```
でselenium-webdriverと表示されればOK！

##ChromeDriverのインストール
今回はブラウザでGoogleChromeを使用するので、下記リンクからChromeDriverをインストールします。

[Chrome Driver](http://chromedriver.storage.googleapis.com/index.html)

##サンプルコード
エディタでコードを書いていきます。大学によってページ遷移など異なると思うので、簡潔に。
今回はRubyを使用するため、selenium_test.rbなどと名付けておきます。

```ruby:selenium_test.rb
require 'selenium-webdriver'

driver = Selenium::WebDriver.for :chrome
driver.manage.timeouts.implicit_wait = 60
# 指定したドライバの要素が見つかるまでの待ち時間を指定

driver.navigate.to "URL"
# URLを指定してアクセス

driver.find_element(:xpath, '該当のxpathを記載').click
# xpathでボタンを指定して押す

driver.find_element(:name '指定したいname属性').send_keys('入力したいワード')
# name属性の入力フォームを指定して文字を入力する。

# 後はif文やloop文などを使用して、各々の大学の履修登録に合わせて作成してください

driver.quit
# ドライバを閉じる
```


以下コマンドで実行。

```
$ ruby selenium_test.rb
```
おかしな点があればご指摘お願いします！！

##参考
[Seleniumチートシート](https://morizyun.github.io/web/selenium-cheat-sheet.html)
「Project Jupyter」によるWeb上での実行環境

# ＠ITによるPythonの記事

Pythonを勉強するにあたり、その言語の特徴を最初に知っておくことは、「行儀の良い」コードを書くためには重要だと思います。

そこで、Pythonの特徴を調べたところ＠ITに記事がありました。

 - [Pythonってどんな言語なの？](https://www.atmarkit.co.jp/ait/articles/1904/02/news024.html)

「１行で多くの処理を記述可能」という特徴を読んで、昔Perlで挫折した経験を持つ身としては一抹の不安を感じますが、「シンプルな方が良い」というモットーらしいので、それに期待することにします。

# 「Project Jupyter」によるWeb上でのPython実行環境

＠ITの記事「[Pythonってどんな言語なの？](https://www.atmarkit.co.jp/ait/articles/1904/02/news024.html)」で紹介されていた「Webで利用できるPython環境」である「Project Jupyter」のGUIが少し変更になっていたので操作方法を記載します。

## サイト「Project Jupyter」へアクセス

まずは、「Project Jupyter」のページへアクセスします。

https://jupyter.org/index.html

## JupyterLabの起動

そして、「JupyterLab 1.0」の「Try it in your browser」をクリックします。

![0001.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646886/b27f101c-093d-c439-ede4-38b046a365bf.jpeg)

「Try Jupyter」のページに遷移しますので、「Try JupyterLab」をクリックします。

![0002.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646886/098510e8-49ce-c4d9-ce05-e619293d916c.jpeg)

起動中の画面が出ますので、起動するまでしばらく待ちます。

![0003.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646886/013c27b2-9fa7-0088-e349-9f64dd8262c7.jpeg)

以下のような画面が表示されると起動が完了します。

![0004.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646886/134a248e-5b00-2b21-f61a-50bf10baf801.jpeg)

## Python実行用タグの作成

Pythonを実行するには、メニュー[File]-[New]-[Notebook]を選択します。

![0005.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646886/e7b2134d-9fec-0ff2-8806-c3565ef6e52d.jpeg)

すると、ダイアログが表示されますので、「Python3」を選択します。

![0006.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646886/4ea69079-7c45-7eb9-9259-ac75673cc872.jpeg)

Pythonを実行するための新しいタグが作成されます。

![１００１.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646886/e1155811-7051-b93f-3d98-4b2d7c1d824f.jpeg)

## Pythonコードの実行

新しくできたタグにある、テキストエリアにPythonのプログラムを入力します。

![0007.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646886/efa523c9-c420-bc97-4b6f-f55d479f231e.jpeg)

タグ内の上側にある「▶︎」ボタンを押します。

![0008.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646886/15c415d1-d879-ecaf-796e-4cbbf98e77d7.jpeg)

すると、入力したPythonコードが実行されます。

![0009.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646886/23a5ebae-4847-0427-9432-fce8eb56a527.jpeg)


## 注意点

「Project Jupyter」によるWeb上でのPython実行環境は、何も入力せずに一定時間が過ぎると作成した環境自体が失われ、最初からやり直す必要があるのでご注意ください。あくまでもお試し環境ということで、ご注意ください。



最後までご覧いただき、誠にありがとうございました。
GITメモ


[最新のコミットのみ取得]
git clone --depth 1 https://github.com/git/git

[gitで外付けHDDにリモートリポジトリを作成する](https://kinacon.hatenablog.com/entry/2019/04/22/git%E3%81%A7%E5%A4%96%E4%BB%98%E3%81%91HDD%E3%81%AB%E3%83%AA%E3%83%A2%E3%83%BC%E3%83%88%E3%83%AA%E3%83%9D%E3%82%B8%E3%83%88%E3%83%AA%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B%E3%80%82)
heroku に push しようとするとprecompiling assets failed. が起きてしまう件

#環境
rails 5.2.3
Vs code

#基本的な解決法
多くの場合 config/application.rb
内に config.assets.initialize_on_precompile=false
の記述を加えればこの問題は解決される。

#これ以外の場合
RAILS_ENV=production bundle exec rake assets:precompile
を行いどのファイルが悪さをしているのかを調べる

自分の場合 application.css の
 @import="bulma";
が悪さをしており　これを削除したところdeployがうまくった
(うまくいったがbulmaを消したためビューが崩れてしまった。)
app/assetsやアップロードされたS3上のファイルはCloudFrontで速度改善しよう

# TL;DR
コンテンツの表示速度改善にはCDN配信が有効です。
【対応前】
<img width="747" alt="スクリーンショット 2020-05-06 15.35.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239829/c606f536-86ba-d743-4e0b-1d9e40d6da9f.png">
【対応後】
<img width="827" alt="スクリーンショット 2020-05-06 15.34.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239829/e78e3ea9-0505-feb0-86f1-181eb3b757ff.png">

# はじめに
アプリケーションで使用するCSSやJavascript、デザインアイコン、アップロードした画像など同一ページ内にそれらが入り混じっていると表示にかなり時間がかかりますよね。lazyloadやCache-Controlをしているけどさらに全体最適を考えている方はCDN配信を利用してみるのは如何でしょうか。


今回は詰まった箇所をまとめていくので以下の部分は省略します。

- S3バケットの作成方法
- Carrierwaveの初期設定
- CloudFrontの作成方法

作成方法などは丁寧な記事がたくさんあるのでそちらを確認したほうがわかりやすいです。
S3バケットの作成、Carrierwaveの接続設定、CloudFrontの作成は済んでいる前提で進めていきます。

# CloudFrontの設定

```ruby:config/initializer/carrierwave.rb
config.asset_host = 'https://d3if231hoge.cloudfront.net'
```

`https://` を付け忘れるとエラーになります。

```ruby:config/environments/production.rb
config.assets.compile = true

config.action_controller.asset_host = '//d3if231hoge.cloudfront.net'
```

`compile=false` だとエラーになるようです。

```
ActionView::Template::Error(The asset "d1234.cloudfront.net/../hoge.png" is not present in the asset pipeline.
```

# app/assets/

上記、各自作成したhostを設定後に`bundle exec rake assets:precompile`を実行すると`app/assets`にあるファイルは自動的にS3に配置されます。
　
表示する際はasset_pathで指定。相対パスではなくファイル名指定。

```ruby
= image_tag asset_path('hoge.png')
```

Heroku運用している場合は、デプロイ時に自動でプリコンパイルしたいと思います。  
その場合はheroku.ymlの`release`ブロックに追記すると自動プリコンパイルしてくれます。

```ruby:heroku.yml
release:
  command:
    - rake assets:precompile 
```

# app/assets/以外のS3配置のファイル
アプリケーション経由でS3に直接配置されたファイルはassets:precompileの対象外です。(考えてみたら当然なのですが、S3のassets配下に画像設置しているのにプリコンパイルされない!みたいなよくわからない思考になっていた時がありました..)


# おわりに
app/assets周りの画像を多用しているページでCDN対応ができると、GoogleのPageSpeed Insightsで10ポイントほど上がりました。
CSSの書き方まとめた

# はじめに
今回はCSSについてです。
主にエビデンスとして
## CSSの概要
CSS は、正式名称を**Cascading Style Sheets**と言いウェブページのスタイルを設定するコード。
文字を赤色にしたり、主にデザインよりなスタイルシート言語。
## CSS ルールセットの構造
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397376/c113b0fd-fc2e-3652-86d8-21973c1699a5.png)
全体の構造をルールセット（ルール）と呼ぶ
ルールには各パーツに名前がある
それが下記である。

パーツ

- セレクタ (selector)
    - ルールの先頭にある**HTML要素名**
    - 別の要素をスタイルするには、Selector を変更する
    - 今回は**P**を設定している
- 宣言 (declaration)
    - color: red; のような単一のルールで、要素のプロパティのうちどの要素をスタイルするかを指定する。
- プロパティ (property)
    - 指定された HTML 要素のスタイルを設定する方法
    - 今回は color は＜p＞要素のプロパティ
- プロパティ値 (property value)
    - プロパティの右側にはコロンの後にプロパティ値があり、与えられたプロパティの多くの外観から 1 つを選択
    
CSSで記述する上での注意点もあげます
注意点
- 各ルールセット (セレクタを除く) は中括弧 ({}) で囲む必要がある
- 各宣言内ではコロン (:) を使用してプロパティを値から分離する必要がある
- 各規則セット内でセミコロン (;) を使用し、各宣言を区切る必要がある。

他にもさまざまな種類のセレクタがある。詳しくはセレクタガイドを参照
[セレクタガイド](https://developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/Selectors)

## CSSのコード
### CSS読み込み
まずはHTMLファイルにCSSファイルを読み込んでもらうように紐付けパスを入力
ヘッダー情報に記載する！
※先にCSSファイルは**stylesフォルダ「style.css」**で格納している。

```html:test.html
<link href="styles/style.css" rel="stylesheet" type="text/css">
```
### ページの文字を全て色を変える
今回は赤色に変える
※**＜p＞＜/p＞**で囲んでいる文字は色が変わる

```css:style.css
p {
  color: red;
}
```
### 一度に複数のプロパティ値を変更する
```css:style.css
p {
  color: red;
  width: 500px;
  border: 1px solid black;
}
```
### 複数の要素を選択する
カンマで区切ることで一気にできる

```css:style.css
p,li,h1 {
  color: red;
}
```
### お洒落なフォントを設定する
最初に[Googleフォント](https://fonts.google.com/)から洒落たフォントのURLをGETしてくる
[手順参考](https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like#Font)

```html:test.html
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
```
全体のフォントサイズと入手したフォントをHTMLに反映させる

```css:style.css
html {
  font-size: 10px; /* px means 'pixels': the base font size is now 10 pixels high  */
  font-family: 'Open Sans', sans-serif; /* this should be the rest of the output you got from Google fonts */
}
```

### ページの色を変更する
今回は青色を設定している

```css:style.css
html {
  background-color: #00539F;
}

```
### ボディを並べ替える

```css:style.css
body {
  width: 600px;/* bodyは常に600Pxの幅になる。*/
  margin: 0 auto;/*最初の値が上下、最後の値が左右（今回は使えるスペースを均等に配置している）*/
  background-color: #FF9500;/*背景色をオレンジにする*/
  padding: 0 20px 20px 20px;/*値は上・右・下・左の順に設定される*/
  border: 5px solid black;/*ボディの全側面に 5 ピクセル幅の黒ベタの境界線を設定するだけ。*/
}

```

# 終わりに
CSSをいじれるようになるだけでWebページの幅が広がって楽しい
Basic2. アイデアを作ってみよう

# 1. Ideaを作成

1.1. build.gradleを編集

```
	implementation('org.springframework.boot:spring-boot-starter-thymeleaf')
	implementation('org.springframework.boot:spring-boot-starter-data-jpa')
	runtimeOnly('com.h2database:h2')

```

h2の設定
src/main/application.property
=> src/main/application.yml

```
spring:
  datasource:
    url: jdbc:h2:./h2db/sampledb;
    driverClassName: org.h2.Driver
    username: username
    password:
  jpa:
    hibernate:
      ddl-auto: update
  h2.console.enabled: true

```

http://localhost:8080/h2-console
にアクセスして、jdbc:h2:./h2db/sampledb;、usernameを入力してDBに接続してみよう

1.2. Model(EntityとRepository)を追加

1.3. ControllerとViewを追加


1.4. 初期データを/h2-consoleから流し込む

company から ideaに変更する
```

INSERT INTO company(name, description)
VALUES('name', 'desription');
INSERT INTO company(name, description)
VALUES('name2', 'desription2');


```
Javascriptでクリップボード書き込み

# ※CodePenでは失敗します。
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="takumikunn15" data-slug-hash="zYrOqMd" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Clipboard Write">
  <span>See the Pen <a href="https://codepen.io/takumikunn15/pen/zYrOqMd">
  Clipboard Write</a> by 匠君 (<a href="https://codepen.io/takumikunn15">@takumikunn15</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
[ブラウザ対応表](https://caniuse.com/#feat=mdn-api_clipboard_write)
Vue.js filter関数のはなし

# filter関数とは
配列の中身を特定の条件で絞り込みを行うメソッド。

```js
配列.filter
(絞り込む関数（変数)        //←この変数は配列を一つ一つ取り出した要素が入る
{絞り込み処理})           //上の行の「絞り込む関数」でこの行の「絞り込み処理」を呼び出している
```

# 今回のテーマ：子に配列を渡してデータを判別してもらう
[Vue.js　プロップスの話](https://qiita.com/aliceroot0678/items/6deb0706a9eb0cf4668d)で親子コンポーネントのプロップスについて説明した。
今回は、プロップスのデータを配列にして、
カテゴリーを分けて、データを受け取りたい。

# 親コンポーネントを準備
今回は子にお使いをしてきてもらうので、買い物リストを作成します。:apple:
買い物リストには買うものの名前と、売り場を示す`category`を追加しました。

```Parent.vue
<template>
<Child :list = list></Child>
</template>
<script>
    import Child from "../components/Child";
    export default {
        components:{Child},
        data(){ 
            return{
                list:[
                    {name:"りんご",category:"果物"},
                    {name:"砂糖",category: "調味料"},
                    {name:"いちご",category:"果物"}
                ]
            }
        }
    }
</script>
```

# 子コンポーネントを準備
複数のものをリストアップされてるので。今回は`Array`で受け取ります。
もらったリストを使って、お店の人に「〇〇ください」と伝えます。


```Child.vue
<!--Parent.vueの子コンポーネント-->
<template>
    <div>
        {{lists[0].name}}ください

    </div>
</template>
<script>
export default {
    components:{},
    data:function(){
        return{}
    },
    props:{
        lists:{type:Array}
    }
}
</script>
```

## `v-for ="変数 in 配列"`
`v-for`は、foreach文みたいなもの。`v-bind`でkeyを設定しなきゃいけない。
第二引数として配列のインデックスを受け取ることができる。
区切る文字`in`は`of`でもいい。
v-forが指定した要素の中で、配列の中身をとりだして、それぞれに処理を行う。
繰り返したくないものは要素の外に出してあげる。

```Child.vue
        スーパーにて、
        <div v-for="list in lists" v-bind:key="list.name">   //v-bindは省略できるので、:key=とも書くことができる。
            {{list.name}}ください
        </div>
```

スーパーなら上記のコードですべてが揃うけど、
今は果物屋にいるので、果物だけをピックアップして、「ください」と言いたい。

#改めてfilter関数


```js
配列.filter
(絞り込む関数（変数)       
{絞り込み処理})
```

今回、`category`が"果物"のものだけをピックアップしたい。

```Child.vue
<script>
    computed:{
        fruits:function () {              //fruitsがfilter関数でピックアップしたものだけが入る変数
            return this.lists.filter(    //配列listsからfilter関数で値を返してください
                function (value) {       //valueを使ってfunctionという処理を行う。valueはlists）（配列）を一つ一つバラバラにしたものです
                    return value.category ==="果物"   //valueのcategoryが"果物"と完全一致したものだけを返します
                }
</script>
```

上記のコードで配列`lists`の中で、`category`が果物になっているものだけが`fruits`に入りました。

# ちなみに
computed（算出プロパティ）はmethodみたいなものだけど、methodは毎回処理される。
computedはデータが変わったら処理される。
Raspberry Pi に無線LAN USBドングルを追加して、2つのネットワークに接続する方法

# １．はじめに

Raspberry Piで無線LANセグメントが2つ必要になり、標準の無線LANに加えもう一つ無線LAN USBドングルを接続しました。
簡単にできると高を括っていましたが意外と手こずりましたので、手順を備忘録として残します。

# ２．構成
（１）Rspberry Piが接続するネットワーク
　　　■ 無線LANネットワーク
　　　      ・192.168.1.1/24
　　      　・192.168.10.1/24

（２）小型無線LAN子機
　　　ELECOM WDC-150SU2MBK

（３）OS　Raspbian 
　　　　　・2020-02-05-raspbian-buster

# 3．設定
## 3-1．Raspberry Pi Zero WHとRaspbian(2020-02-05-raspbian-buster)の構成パターン
システム情報を表示

```Command:システム情報を表示
uname -a
```
コマンド結果：
Linux raspberrypi 4.19.118+ #1311 Mon Apr 27 14:16:15 BST 2020 armv6l GNU/Linux

WDC-150SU2MBKが搭載しているチップは、RealTekのRTL8188EUSなので、
「4.19.118+ #1311」をキーに
http://downloads.fars-robotics.net/wifi-drivers/8188eu-drivers/
でドライバーを検索。

![01.png](http://seahorse-inc.com/QIITA/RaspberryPi-2WiFi/01.png)

検索結果：8188eu-4.19.118-1311.tar.gzを使用する。

次に、ドライバーのダウンロードとインストール
ここでは ワーク用のディレクトリー drivers を使用しました。

```Command:ドライバーのダウンロードとインストール
mkdir drivers
cd drivers
wget http://downloads.fars-robotics.net/wifi-drivers/8188eu-drivers/8188eu-4.19.118-1311.tar.gz
tar zxf ./8188eu-4.19.118-1311.tar.gz	
sudo ./install.sh
```

際起動すると WiFiドングルのLEDが光るので、WiFiアクセスポイントへの接続
ここでは、VNCでRaspberry Piに接続してGUIで設定しました。
![02.png](http://seahorse-inc.com/QIITA/RaspberryPi-2WiFi/02.png)

接続完了！　ifconfigで確認します。
pi@raspberrypi:~ $ ifconfig

```Command:ifconfig結果
wlan0: flags=4163<UP,BROADCAST,RUNNING,MULTICAST>  mtu 1500
        inet 192.168.1.37  netmask 255.255.255.0  broadcast 192.168.1.255
        inet6 fe80::5037:56df:953:a52a  prefixlen 64  scopeid 0x20<link>
        inet6 2400:4051:323:9800:54ef:d64a:ab1b:ec7d  prefixlen 64  scopeid 0x0<global>
        ether b8:27:eb:1c:9c:cc  txqueuelen 1000  (イーサネット)
        RX packets 2414  bytes 183487 (179.1 KiB)
        RX errors 0  dropped 0  overruns 0  frame 0
        TX packets 1744  bytes 486105 (474.7 KiB)
        TX errors 0  dropped 0 overruns 0  carrier 0  collisions 0

wlan1: flags=4163<UP,BROADCAST,RUNNING,MULTICAST>  mtu 1500
        inet 192.168.10.2  netmask 255.255.255.0  broadcast　192.168.10.255
        inet6 fe80::4ec1:919:81cb:b06  prefixlen 64  scopeid 0x20<link>
        ether 04:ab:18:72:ca:d0  txqueuelen 1000  (イーサネット)
        RX packets 1633  bytes 252500 (246.5 KiB)
        RX errors 0  dropped 0  overruns 0  frame 0
        TX packets 90  bytes 12891 (12.5 KiB)
        TX errors 0  dropped 0 overruns 0  carrier 0  collisions 0
```

# ４．おわりに

Raspberry Pi 3B+ , Raspberry Pi4　も同じ手順で接続できました。
アプリ開発超初心者が休業中にiOSアプリを公開した話

# iOSアプリ開発は初心者でもできる？
　Yes
##はじめに　
　先に結論から述べると100%できます。なぜなら、ボンクラの僕にもできたからです（笑）どのくらいボンクラかと言うと、普通運転免許？の学科試験に二度落ちたくらいです（笑）おそらく、この記事の読者のほうが何十倍も賢いことでしょう。
　そんな僕がたった１ヶ月半でどうやって、自作アプリをApp store(アプリケーションのダウンロードサービス)に公開するまでに至ることができたのかを、<b>勉強法やマインド面</b>を中心に、専門用語は避けて語っていきたいと思います。
　iOSアプリを開発してみたいけど<b>何から始めたら良いのかわからなかったり、はじめてみたけれど、進め方がよくわからない</b>と感じている方への助け舟となれたら嬉しいです。ただし、科学的根拠は一切ないので、一意見として受け止めてください（笑）
##用意するもの
　アプリ開発において用意するものは以下の２点です。
パソコンに関しては、Windowsでできないこともないらしいですが、使い方ガイドや参考資料が豊富なMacが望ましいです。また、iOSアプリを開発するための環境は、Xcodeを利用します。以下のURLからダウンロードページに飛べます。
1.Macのパソコン
2.Xcode(できれば最新バージョン)
[ダウンロード] https://apps.apple.com/jp/app/xcode/id497799835?mt=12
　App storeに公開するためには上記の２点＋Apple Developer(年会費：1万1800円)に登録する必要があります。実機実験やシミュレータの利用は登録しなくてもできます。詳しくはググってみてください。
##勉強法
　僕の勉強法を大雑把に説明すると、以下の３つのステップです。
<b>効率よく学習するコツは、ステップ③を重視すること</b>です。以下で説明します。

① Swift(iOS開発用言語)の基礎学習
　・「15時間でわかるSwift集中講座」(Swiftのバージョン間違った)著者：高橋広樹
　・「本気ではじめるiPhoneアプリ作り」著者：西磨翁
　・ドットインストール（動画学習）
②サンプルコードを写経する(mainはXcodeの使い方を学習)
③自作（バス時刻表アプリ）
　
　かけた期間で言うと、①に2週間②に1~2週間③に2~3週間程度です。
自粛期間中と言うこともあり、１日の平均学習時間は３時間くらい取れていました。
　<b>ここで大事なことは③の自作の段階にすぐに移ることです。</b>
多くの方が、理解していないのにできる訳ない（怒）と考えると思います。
確かにそうです。基礎がわかっていないのに作れるわけがありません。ここで言いたいことは、①の基礎学習期間に時間を使いすぎるな！と言うことです。
　ここに時間を使いすぎる人の多くは、完璧に理解しないと、もしくは覚えないといけないと考えていると思います。しかし、はっきり言って、Swiftを完璧に理解してるエンジニアは、ほとんどいないですし、ましてやコードを全て暗記している人なんてSwiftの開発者ぐらいです（笑）多くのエンジニアは、ネットなり書籍なりを調べながら開発しています。iOS開発を仕事にしてバリバリお金を稼いでいる人たちがどうなのかはわかりませんが、その方達もはじめは、調べながら開発していたはずです。全てを理解しようとせずに、何となくわかってきたぞとフワッとした感じで十分です。英会話とは違って、コンピュータは入力を待ってくれます（笑）とにかく簡単なもので良いので、自作アプリを作ってみましょう。
　とは言っても、学習能力には個人差あるし、「やっぱりどのくらい学習すれば良いかわからないよ」と言う方もいると思います。そこで、ボンクラの僕を最底辺として、学習量の目安を立てると、<b>多くても上の３つの様な参考書（何でも良い）を一周すれば十分</b>だと思います。理解力がある人は３つ目の動画学習だけで良いかもしれません。
##何を開発すれば良いの？
　とにかく作れと言われても、何を作ったら良いのかわからないし、そもそも何が作れるのかもわからないと思います。iOSアプリでは情報さえあれば、基本的に何でも作れると言っても良いです。しかし、初学者にとって技術的に難しすぎると言ったことはあると思います。例えば、ネットと通信を行ったりするようなアプリは、サーバーサイドの知識もある程度はないといけないため、初学者には難しいかもしれません。したがって、自分ができそうなレベルのちょっと上のレベルくらいのものが良いと思います。初学者が比較的に作りやすいアプリを以下に書いてみました。アイデアが浮かなければ、他者が開発したアプリを真似してみるのもありだと思います。
・バス時刻表アプリ
・メモ機能アプリ
・現在位置取得（GPS）を利用したアプリ
・画像認識系アプリ
・計算アプリ
##アプリを公開するためには
　しかし、上記のようなアプリは世の中に無数にあり、そのまま公開するとなると難しいです。恐らく審査ではねられます。appleの審査にこのような項目があるからです。
4.1：模倣
4.2：必要最低限の機能しかない
　そのため、何かひとつ独自性のある機能を足してあげたら良いと思います。僕が初めて、公開したアプリ（バス時刻表アプリ）もその程度のレベルでした。
##最後に
　独学でプログラミングを学習しようと思うと、正直かなり根気がいります。実際に、プログラミングを学習したけれど、挫折する人がほとんどだそうです。その原因の一つとしては、一緒に勉強する仲間や指南してくれる人がいないからだと思います。そんな時は、オンライン上のセミナーに参加したり、SNSで志が同じ仲間を探してみたりすることでモチベーションを保てるのではないかと思います。プログラミングも言語の学習と同様で、学び続ければ必ず会話ができるようになります。一緒に頑張りましょう。
[cx_Oracle入門](第1回) cx_Oracle概要

# 連載目次
[連載：cx_Oracle入門　目次](https://qiita.com/nakaie/items/df170c3fa6895cf1b44d)

# cx_Oracleとは
cx_OracleはPythonからOracle DatabaseにSQLアクセスするためのモジュールです。オラクル社が自ら作成しています。
[PEP 249 (Python Database API Specification v2.0)](https://www.python.org/dev/peps/pep-0249/)になるべく準拠するように作成されています。
2020/6/1(本記事初期公表)時点のcx_Oracleのバージョンは7.3です。
Python2.7以降、もしくはPython3.5以降で稼働します。
また、2020/6/27にcx_Oracleのバージョン8.0がリリーされました。
8.0はPython2のサポートを終了し、Python3.5以降のサポートとなっていますので、Python2を利用予定の方はご注意ください。
7.3も引き続き入手可能です。
ライセンスはBSD licenseです。
DBアクセス部分はPro*Cではなく、ODPI-C(Oracle Database Programming Interface for C)という、オラクル社提供のOSSのC言語用のOracle Databaseアクセスライブラリを使用しています。
cx_Oracleには大きくは以下のような機能があります。

- 基本的なSQLアクセス(DML / DDL / DCL)
- PL/SQLの実行(無名PL/SQL、ストアドプログラム)
- SODA(Simple Oracle Document Access, JSONドキュメントストアにアクセスするためのAPI)への対応
- XML DB(XMLType)への対応
- オブジェクト機能への対応
- クライアントサイド・コネクションプールの提供
- その他Oracle Database機能への対応(インスタンスの起動/停止等)

# cx_Oracleの基本的な情報源
すべて英語ベースです。
- [公式ドキュメンテーション](https://cx-oracle.readthedocs.io/en/latest/)
- [GitHub](https://github.com/oracle/python-cx_Oracle)

# cx_Oracleのインストール
### 前準備
cx_Oracleを利用するためにはOracle Clientが必要です。Instant Clientでも問題ありません。JavaでいうところのThin Driverに相当するものはありません。
Oracle Clientのバージョンは11.2以上に対応しています。接続先のOracle Database Server側は、利用しているOracle Clientが対応しているバージョンが利用可能となります。
cx_Oracle利用のための環境変数は特にありませんが、Oracle Clientのための環境変数(ORACLE_HOME, NLS_LANG等)は必要です。
cx_Oracleを利用したアプリケーションをテストする前に、SQL*PlusやSQL Developerなどを使用して、cx_Oracleインストール対象マシンからOracle Databaseにアクセスできることを確認しておいてください。

### インストール
pipやcondaのようなパッケージマネージャーを使用してインストールすることが可能です。以下、pipでのインストール例です。

```
pip install cx_Oracle
```

Python2環境や、あえて古いバージョンを使用したい場合は、以下の様にバージョン番号を指定してインストールします。

```
pip install cx_Oracle==7.3
```

## サンプルアプリケーション

```sample01a.py
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
import cx_Oracle  # (1)

USERID = "admin"
PASSWORD = "FooBar"
DESTINATION = "atp1_low"
SQL = "select 12345 from dual"

connection = cx_Oracle.connect(USERID, PASSWORD, DESTINATION)  # (2)
cursor = connection.cursor()  # (3)
cursor.execute(SQL)  # (4)
for row in cursor:  # (5)
    print(row[0])  # (6)
cursor.close()  # (7)
connection.close()  # (8)
```

以下、他の言語でOracle Databaseにアクセスするアプリケーションを作成したことのある方であれば不要なレベルですが、ソース内のコメント番号に対応して、各行を簡単に解説します。

1. cx_Oracleをimportする必要があります。
2. データベースに接続し、セッションを確立します。
3. SQL文をハンドリングするためのカーソルオブジェクトを作成します。
4. SQL文を実行します。
5. 今回はSELECT文を発行しているので、結果セットの内容を取り出しています。
6. レコードはタプルで戻されます。
7. カーソルオブジェクトをクローズします。
8. セッションを切断します。

# 変更履歴
- 2020/6/7 : 
 - タイトルに回数を追加
 - 「cx_Oracleのインストール」に環境変数への言及を追加
 - 「サンプルアプリケーション」にカーソルクローズを追加
- 2020/6/27 : 
 - 「cx_Oracleとは」にcx_Oracle 8.0の情報を追加
 - 「cx_Oracleのインストール」に旧バージョンのインストール方法を追加
- 2020/7/1 : 連載目次を追加
メールアクションのトラブルシューティング

#ヘルプの内容の補足

https://help.salesforce.com/articleView?id=send_email_action_troubleshoot.htm&type=5

- (日本語版)活動コンポーザに [メール] タブを表示するには、[メール送信] を [すべてのメール] に設定します。
- (英語版)To see the Email tab in the activity composer, set Email Deliverability to All Email.

何を設定するのかさっぱり分からん。
しかし、[メール送信] を [すべてのメール] という文言は

設定-->メール送信

にあるメールを送信するためのアクセス権しか思いつかない。
ビンゴ！！　設定するとうまくいきました。
せめて、設定にあるって記述が欲しかった。
AtCoderBeginnerContest169復習＆まとめ（後半）

# AtCoder ABC169
2020-05-31(日)に行われたAtCoderBeginnerContest169の問題をA問題から順に考察も踏まえてまとめたものとなります．
後半ではDEの問題を扱います．[前半はこちら](https://qiita.com/takaito0423/items/4ff4bfc5f578beed6e76)．
問題は引用して記載していますが，詳しくはコンテストページの方で確認してください．
[コンテストページはこちら](https://atcoder.jp/contests/abc169)
[公式解説PDF](https://img.atcoder.jp/abc169/editorial.pdf)

## D問題　Div Game
> 問題文
> 正の整数$N$が与えられます。$N$に対して、以下の操作を繰り返し行うことを考えます。
>　・はじめに、以下の条件を全て満たす正の整数$z$を選ぶ。
>　　◦ある素数$p$と正の整数$e$を用いて、$z=p^e$と表せる
>　　◦$N$が$z$で割り切れる
>　　◦以前の操作で選んだどの整数とも異なる
>　・$N$を、$N/z$に置き換える
> 最大で何回操作を行うことができるか求めてください。

とりあえず素因数分解すれば，この問題は簡単に解けることは気づいたので，いつもお世話になっている記事検索して，素因数分解の部分のコードをコピーしました．
[Pythonで高速素因数分解〜競プロ用〜](https://qiita.com/snow67675476/items/e87ddb9285e27ea555f8)
今回の問題は，ある素因数$p_1$を$k$個，持っているとき，何回操作を行うことができるかを考えないといけませんが，操作回数　→　必要な素因数$p_1$の個数は
$1 → 1$
$2 → 3$
$3 → 6$
$4 → 10$
$5 → 15$
と階差数列になっています．
これを計算すると，$m$回操作をするために必要な素因数$p_1$の個数は$\frac{m(m + 1)}{2}$個となることがわかるため，素因数分解した各素因数に対して，操作が何回できるかを計算し，足していくことで答えを得ることができました．

```python:abc169d.py
def factorization(n):
    arr = []
    temp = n
    for i in range(2, int(-(-n**0.5//1))+1):
        if temp%i==0:
            cnt=0
            while temp%i==0:
                cnt+=1
                temp //= i
            arr.append([i, cnt])
    if temp!=1:
        arr.append([temp, 1])
    if arr==[]:
        arr.append([n, 1])
    return arr
n = int(input())
if n == 1:
    print(0)
else:
    x_list = factorization(n)
    ans = 0
    for x in x_list:
        n = 2
        while True:
            if x[1] < (n * n + n) // 2:
                ans += n - 1
                break 
            n += 1
    print(ans)
```

入力が$1$のときだけ，気を付けないとですね．

## E問題　Count Median
> 問題文
> $N$個の整数$X_1,X_2,⋯,X_N$があり、$A_i \leq X_i \leq B_i$であることがわかっています。$X_1,X_2,⋯,X_N$の中央値として考えられる値はいくつあるか求めてください。

BとC問題に時間とられ過ぎて，間に合いませんでしたが，$A$と$B$を別々にソートして，その中央値を使えば解けるのは，すぐにわかりました．
データ数が奇数個の場合までコード書いてタイムアップ．

問題に関して，まず$A_1,A_2,...,A_N$をソートした結果，得られる数列を$C_1,C_2,...,C_N$とし，$B_1,B_2,...,B_N$をソートした結果，得られる数列を$D_1,D_2,...,D_N$とする．

### データ数が奇数個
答えは$D_{(N+1)/2} - C_{(N+1)/2} + 1$個となる．

### データ数が偶数個
答えは$D_{N/2} - C_{N/2} + D_{N/2+1} - C_{N/2+1} + 1$個となる．
例えば，$C_{N/2}=5, C_{N/2+1}=7, D_{N/2}=7, D_{N/2+1}=9$とすると，考えられる組み合わせは，

| |5|6|7|
|:------------------:|:------------------:|:------------------:|:------------------:|
|7|6|13/2|7|
|8|13/2|7|15/2|
|9|7|15/2|8|

と重複しているものが多く，答えは$6,13/2,7,15/2,8$の$5$個である．
この答は，表の行数＋列数 - 1であるため，上記の計算式で，同様の答えを得ることができる．

```python:abc169e.py
n = int(input())
a_list = []
b_list = []
for i in range(0, n):
    a, b = map(int, input().split())
    a_list.append(a)
    b_list.append(b)
a_list.sort()
b_list.sort()
if n % 2 == 0:
    x1 = n // 2 - 1
    x2 = n // 2
    print(b_list[x2] - a_list[x2] + b_list[x1] - a_list[x1] + 1)
else:
    x = n // 2
    print(b_list[x] - a_list[x] + 1)
```



AからCの問題セットがいつも通りの難易度であれば，5完できてたと思うが，勉強不足を感じます．
就職するまでに，少しでもプログラミングの力上がればいいなと思って始めたので，目的に合っている感じはしているので，今後も参加していきたいと思います（BとC問題通せず，rate落ちてたら距離を置くとこだった）．
F問題は，今週忙しいので時間ができたときにでも追記できたらいいなと思ってます．

後半も最後まで読んでいただきありがとうございました．
Dockerコンテナ内でyumコマンドが使用できない

Dockerコンテナ内でyumを用いてインストールしようとしたら下記のようなエラーメッセージが表示された。（yumは入っていて、バージョンも表示される

    $ bash-4.2# yum update
    読み込んだプラグイン:ovl, priorities
    amzn2-core                                            | 2.4 kB     00:00
    http://packages.groonga.org/centos/2/x86_64/repodata/repomd.xml: [Errno 14] HTTP Error 404 - Not Found
    他のミラーを試します。


     One of the configured repositories failed (Groonga for CentOS 2 - x86_64),
     and yum doesn't have enough cached data to continue. At this point the only
     safe thing yum can do is fail. There are a few ways to work "fix" this:

     1. Contact the upstream for the repository and get them to fix the problem.

     2. Reconfigure the baseurl/etc. for the repository, to point to a working
        upstream. This is most often useful if you are using a newer
        distribution release than is supported by the repository (and the
        packages for the previous distribution release still work).

     3. Run the command with the repository temporarily disabled
            yum --disablerepo=groonga ...

     4. Disable the repository permanently, so yum won't use it by default. Yum
        will then just ignore the repository until you permanently enable it
        again or use --enablerepo for temporary usage:

            yum-config-manager --disable groonga
        or
            subscription-manager repos --disable=groonga

     5. Configure the failing repository to be skipped, if it is unavailable.
        Note that yum will try to contact the repo. when it runs most commands,
        so will have to try and fail each time (and thus. yum will be be much
        slower). If it is a very temporary problem though, this is often a nice
        compromise:

            yum-config-manager --save --setopt=groonga.skip_if_unavailable=true

    failure: repodata/repomd.xml from groonga: [Errno 256] No more mirrors to try.
    http://packages.groonga.org/centos/2/x86_64/repodata/repomd.xml: [Errno 14] HTTP Error 404 - Not Found

ミラー内にページがないですよという旨のエラー。
キャッシュに古いurlが残って404を返されることもあるようなので、下記コマンドでキャッシュをクリアしたが改善しなかった。

    $ yum clean metadata
    $ yum clean all

ミラーとなるベースのページ設定を編集すれば解決した。

    $ cd /etc/yum.reps.d
    $ ls
    amzn2-core.repo  groonga.repo
groonga.repoでエラーが出ていたのでこちらを編集する。(存在しているページを指定すればOK)

    $ vi groonga.repo
    [groonga]
    ～略～
    baseurl=http://packages.groonga.org/centos/8/$basearch/
    #baseurl=http://packages.groonga.org/centos/$releasever/$basearch/　コメントアウト
    ～略～

実行して成功するか確認する。

    $ yum update
プログラムに全く影響を与えずLighthouseのスコアを上げる方法

# 高速化って楽しいですよね

でも仕事でやってるなら目標とか期日があるのでつらくなることも

もう改善するとこねーよってとこまで頑張っても無料のサーバーを使っていると良い結果が出せずに苦しむこともあります

しかし諦めなければLighthouseの結果を良くする方法が残っているかもしれない！！

これがその高速化を使う前の結果です
<img width="541" alt="高速化前.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/169961/0211bb78-494c-7053-06c4-0c1a01b86491.jpeg">


そしてこれが高速化を使った後の結果です
<img width="517" alt="高速化後.JPG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/169961/28d008b7-8413-9c17-44f6-d8591e5b59fc.jpeg">


100点満点とはいかないけど大幅に上がります。目標達成できるならこんな手段もありますよってことで。

で、いったいどんな手なんだと気になりますよね？
その方法はシークレットモードでクロームを起動してあとは普通にLighthouseを実行するだけ。

たったこれだけで計測の邪魔をしているプラグインにお休みいただくことが出来ます！！！


あ、ごめんなさい知ってました？
そりゃまた失礼・・・


計測に使ったのは自分が書いてる[GatsbyJSに関するブログ](https://myblog-by-mako-tos.netlify.app/)です。

ごめんなさい、ブログに誰も来ないのでこれ書きました
雑にDebugger for ChromeでAngularを立ち上げるときの設定

Angularの時にぺってやってる内容。他で動くは未検証。
弄るのは`mame` と `url` と `webRoot` くらい。

```js:launch.json
{
  // IntelliSense を使用して利用可能な属性を学べます。
  // 既存の属性の説明をホバーして表示します。
  // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "localhost:4200",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:/*": "${webRoot}/*",
        "webpack-internal:/*": "${webRoot}/*"
      }
    }
  ]
}
```
【MAC】firebase インストール時のエラー処理まとめ

備忘録

macユーザーが、
firebaseCLIをインストールしようと試みた時に遭遇したエラーと処理をメモメモ。

手順は以下の通り
①firebaseCLIインストールの時
②firebase initの時


##①firebaseCLIインストールの時

まずはコマンドでインストールを実行

```
$ npm i -g firebase-tools
```
すると、
"WARN"とか"ERROR"の嵐が。。
そんな時はグローバルパスを変更。

```
$ mkdir ~/.npm_global
$ npm config set prefix ~/.npm_global
$ npm install -g firebase-tools
```

これでインストール完了できました！

##②firebase initの時
さて次は任意のフォルダに移動して初期化コマンドを実行

```
$ mkdir 任意フォルダ名
$ cd 任意フォルダ名
$ firebase init
```

無事にできたらOK。

```
Error: HTTP Error: 401, Request had invalid authentication credentials. ~
```
マジ facki**

こんな時はログインし直してみましょう。

```
$ firebase logout
$ firebase login

//もう一度実行
$ firebase init
```

これで成功。
あとはターミナル上で必要なものをポチればOK。

上のエラー原因はfirebaseの認証tokenの有効期間が大体1時間くらいで切れちゃうからだそうで。
-ユーザー セッションの管理-　firebase.com
https://firebase.google.com/docs/auth/admin/manage-sessions

##③追記：init時にfirebaserc already has a default project, skippingとなってしまう時
これの原因は前回、同じプロジェクトでinitしたり、あるいはaddするとなる、とのこと・・・
なので、最初にfirebase の状態を確認。

```
$ firebase use
```
そうすると、

```
Active Project: プロジェクト
Project aliases for プロジェクト保管場所:
default (プロジェクト)
Run firebase use --add to define a new project alias.
```
と出るので

```
firebase use --clear
```
と、

```
firebase use --unalias default
```
をcommandに打ち込んで、もう一回initすれば無事initできます。
skippingが起きた時はぜひ試してみてくださいー


##まとめ

今回はfirebaseインストール時の処理についてまとめました。
これでfirebaseいじれる。。。
macの人はこのエラーに遭遇する率が高いようなので注意ですね。
次回はReactアプリのデプロイ過程をここでメモろうと思いますー
Pythonで関数の呼び出し元を取得する

## やりたいこと
処理中の関数を呼び出したファイル名・関数を取得したい。

## 方法
[inspect](https://docs.python.org/ja/3/library/inspect.html)を使う。

## やりかた
```python:caller_file.py
import callee_file


def main():
    callee_file.callee_function()


main()
```

```python:callee_file.py
import inspect

def callee_function():
    # print(inspect.stack())
    print(inspect.stack()[1].filename)
    print(inspect.stack()[1].function)
```

inspect.stackには呼び出しが遅い順に格納されている。
4行目のコメントアウトを外すと以下の配列が出力される。

```
[
  FrameInfo(frame=<frame at 0x7fa68460f050, file '/path-to-dir/callee_file.py', line 4, code callee_function>, filename='/path-to-dir/callee_file.py', lineno=4, function='callee_function', code_context=['    print(inspect.stack())\n'], index=0),
  FrameInfo(frame=<frame at 0x10cc17650, file 'caller_file.py', line 5, code main>, filename='caller_file.py', lineno=5, function='main', code_context=['    callee_file.callee_function()\n'], index=0),
  FrameInfo(frame=<frame at 0x10ca61450, file 'caller_file.py', line 8, code <module>>, filename='caller_file.py', lineno=8, function='<module>', code_context=['main()\n'], index=0)
]
```

1つめが callee_file.py4行目の `print(inspect.stack())` の情報、
2つめが caller_file.py5行目の `callee_file.callee_function()` の情報
3つめが caller_file.py8行目の `main()` の情報である。

1つ前の関数呼び出しの情報がほしいので、配列2つめの情報を取得するため `inspect.stack()[1]`となる。
`inspect.stack()[1]` のプロパティは以下の通りだが、今回はファイル名と関数名を取得できればいいので
`inspect.stack()[1].filename`, および `inspect.stack()[1].function`を利用する。
ちなみに、配列の番号でも取得できるので `inspect.stack()[1][1]`, および `inspect.stack()[1][3]` でも良い。

## 参考
https://stackoverflow.com/questions/900392/getting-the-caller-function-name-inside-another-function-in-python
GrafanaでSlackへのAlertが届かない問題の解決法

SlackにIncoming WebhookでAlertを送信する際に、通知がいかない場合
Edit Notification ChannelからInclude Imageをoffにすると解決します
<img width="505" alt="スクリーンショット 2020-06-01 17.09.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213392/b040e2b8-1fdd-f2d7-2545-541b548d45fe.png">
[Vuetify] v-selectで[object, object] と表示された時の解決法

## 現象

```
items: [{id:1, text: 'テキスト'},{id:2, text: 'テキスト2'},{id:3, text: 'テキスト3'}]
```

上記のようなオブジェクトの配列をv-selectで表示。

```vue

<v-select
 :items="items"
/>
```

すると以下のように `[object, object]` と表示される。
<img width="572" alt="スクリーンショット 2020-06-01 16.22.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142616/7f37ce4c-1cad-46e2-910f-6f5d50da1631.png">


## 解決策

vuetifyの公式ページにオブジェクト使用時の記述があった。
<img width="873" alt="スクリーンショット 2020-06-01 16.43.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142616/47347e71-ca35-5288-4dca-f09f600d7c32.png">

### items-textを使う

`item-text="オブジェクトのプロパティ名"`使うことで解決

```vue

<v-select
 item-text="text"
 :items="items"
/>
```

<img width="561" alt="スクリーンショット 2020-06-01 16.23.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142616/10c6aa6f-d410-a950-6b5f-d479d79ca206.png">

### items-valueも使って値の指定を行う

あくまで表示はできたが、フィルタリングする時など、表示と裏で保持する値をそれぞれ分けたい場合は、 `items-value` を使う。

実際に値を確認するために、 `@change="changedValue"` を追記し、select選択時にconsole.logで値を出力する。

```vue

<v-select
 item-text="text"
 item-value="id"
 :items="items"
 @change="changedValue"
/>
```

```js

methods: {
 changedValue(value) {
  console.log('value', value)
 }
}
```

`表示`
<img width="561" alt="スクリーンショット 2020-06-01 16.23.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142616/10c6aa6f-d410-a950-6b5f-d479d79ca206.png">
`値`
<img width="73" alt="スクリーンショット 2020-06-01 16.51.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142616/d73dbc4f-5c33-27c0-76e6-3fb26b34bdf1.png">

無事、表示と値を分けることができたので解決。


## 参考文献
https://vuetifyjs.com/ja/components/selects/
イベントデータの設定

```
document.getElementById('form').select.onchange = function(){
```
:point_up:onchangeイベント：フォーム内容が変わった時に発生する

```
document.getElementById('form').select
```
<form></form>部品を設定するにはname属性で取得をする

❸valueをつくる

```
document.getElementById('form').select.value
```
:point_up: プルダウンメニューの場合は親要素のvalueを調べに行ってくれる

❹location.hrefに代入する


```
location.href = document.getElementById('form').select.value;
location.href = 新しいURL
```