OmniAICreator/Qiita-1.07M huggingface dataset:
Create React AppからStorybookの追加が超簡単だった。

# 概要

ReactでStorybook使ってみたくて、色々調べてた結果、
設定面倒なのかなーと思ってたら`Create React App`からの追加が超簡単だったという話です。

# 環境構築

今回は`yarn`でゴリゴリ入れていきましょう。

```powershell
yarn global add create-react-app
yarn create react-app sample-storybook
cd sample-storybook
yarn add storybook
yarn storybook
```

ここまで来ると、「お？Create React Appで作ったプロジェクトやんけ！」
と勝手に解釈してくれて、良い感じに雛型を作ってくれます。超便利ですね。

再度`yarn storybook`を叩くと、`http://localhost:9009`でStorybookの
サーバーが立ち上がります。以上です。

# コンポーネント追加

`Material-UI`のボタンを追加してみます。
（実際は自作のコンポーネントを追加するような使い方になると思いますが）

```powershell
yarn add @material-ui/core
```

```javascript:src/stories/index.js
import React from 'react';

import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';

import { Button, Welcome } from '@storybook/react/demo';

+ import MaterialButton from '@material-ui/core/Button';

storiesOf('Welcome', module).add('to Storybook', () => (
  <Welcome showApp={linkTo('Button')} />
));

storiesOf('Button', module)
  .add('with text', () => (
    <Button onClick={action('clicked')}>Hello Button</Button>
  ))
  .add('with some emoji', () => (
    <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
  ))
+  .add('material', () => (
+    <MaterialButton
+      variant="contained"
+      color="primary"
+      onClick={action('clicked')}
+    >
+      Primary
+    </MaterialButton>
+  ));
```

ホットリロードで画面が更新されています。良いですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365084/79238fde-4fc6-75e2-a067-e76050f2bb75.png)
[Rust] PyO3 でモジュール構造を持つ Python パッケージ

[前記事](https://qiita.com/osanshouo/items/671888bdd6afeec1e939) の続きです.

中規模以上のパッケージの場合, 関数を複数のモジュールに分けたくなると思います (SciPy の `scipy.optimize`, `scipy.integrate` のように). ほぼ前回の記事通りですが, 若干ハマった部分があるので詳しく書いておきます.

# モジュールの作成

具体的に英語と日本語で hello world を出力する `language` パッケージをつくってみます. まずはモジュールを普通につくります.

```rust:src/en.rs
use pyo3::prelude::*;
use pyo3::wrap_pyfunction;

#[pyfunction]
fn hello() -> PyResult<()> {
    println!("Hello, world!");
    Ok(())
}

#[pymodule]
fn english(_py: Python, m: &PyModule) -> PyResult<()> {
    m.add_wrapped(wrap_pyfunction!(hello))?;
    Ok(())
}
```

```rust:src/ja.rs
use pyo3::prelude::*;
use pyo3::wrap_pyfunction;


#[pyfunction]
fn hello() -> PyResult<()> {
    println!("こんにちは, 世界!");
    Ok(())
}

#[pymodule]
fn japanese(_py: Python, m: &PyModule) -> PyResult<()> {
    m.add_wrapped(wrap_pyfunction!(hello))?;
    Ok(())
}
```

ここで, 本体 (`src/lib.rs`) から参照することになる `english`, `japanese` 関数に `pub` を付ける必要はありません. というのも, `#[pymodule]` アトリビュートによりラッパー関数が自動的に生成され, そちらを読み込みに行くからです. その結果, 本体は次のようなコードになります.

```rust:src/lib.rs
use pyo3::prelude::*;
use pyo3::wrap_pymodule;

mod en;
use en::*;

mod ja;
use ja::*;

#[pymodule]
fn language(_py: Python, m: &PyModule) -> PyResult<()> {
    m.add_wrapped(wrap_pymodule!(english))?;
    m.add_wrapped(wrap_pymodule!(japanese))?;

    Ok(())
}
```

ここで例えば `use en::english;` とするとコンパイルエラーになります. これは, 上で指摘したように, `language` 関数内で `en::english` 関数を呼び出しているように見えますが, `wrap_pymodule` マクロのために実際に呼び出している関数は `en::PyInit_english` 関数だからです (なのでこの関数を直接 `use` しても動きます).

# Python から呼び出し

`Cargo.toml` やコンパイル, `.so` ファイルの配置などは前記事通りです. 

```shell-session
$ python3
Python 3.7.2 (default, Jan 24 2019, 15:36:28)
[GCC 6.3.0 20170516] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> import language
>>> 
>>> language.english.hello()
Hello, world!
>>> language.japanese.hello()
こんにちは, 世界!
>>> 
```
え？Apple信者なのにマーク、のショートカットキー知らないの？

#はじめに
すみません。私も入力ミスで気がついただけです。
#結論
'shift'+'option'+'K'　で　''　出てきます。

#補足
ちなみにこれをグーグル先生で検索をかけると

![8274ba59f9a52bea37d627ad5a524165.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/418390/f99ad8ad-d95d-0981-bbe1-72bef7c1ce38.png)

アップルが検索に引っかかります
以上！
Pythonのスライスのstep機能

# スライスにはstep機能がある
Pythonのlistのスライスには指定した数ごとに値を取り出してくれるstep機能がある。

list[start:stop:step]
のように開始と終了のインデックスの後にstepの値を指定する。

以下例。

```python
num_list = [1, 2, 3, 4, 5, 6, 7]
print(num_list[1:6])   #[2, 3, 4, 5, 6]
print(num_list[::2])   #[1, 3, 5, 7]
print(num_list[1::2])  #[2, 4, 6]
print(num_list[:6:2])  #[1, 3, 5]
print(num_list[1:6:2]) #[2, 4, 6]
```
めちゃくちゃ簡単！！！ユーザーのTwitterアカウントに飛ぶ方法

どうも!!!
チャンクノです！！！
今回は条件付きではあるのですがユーザーのTwitterアカウントをクリックしたら、そのユーザーのTwitterページまで飛ばす方法を紹介します。
ずっとどうすればいいのか考えていて、ついにできました:relaxed:
嬉しい！！！！
特にやり方を調べても出てこなかったので(多分検索ワードが悪い)己の力でなんとかひねりだしました。
こういう、自分で考えてできた時にプログラミングって楽しいなって思います。

ではさっそく本題に入ります。
まず前提として
**DBにユーザーのTwitterアカウントを登録するカラムがあることが条件です。**
それだけです。

使用するものは
**aタグ**、**インスタンス変数、Twitterアカウントを保存しているカラム**
この三つです。
*link_toではできません。理由は不明です笑

で、どうするのかというと

```
                                Twitterアカウントを保存しているカラム                 
                                            ↓
%a{href: "https://twitter.com/#{register.account}"}
                                   ↑
　　　　　　　　　　　　　　　　　　インスタンス変数
```
aタグをこのような感じでを記述します。
からの〜

```
%a{href: "https://twitter.com/#{register.account}"}
  = register.account
```
こう！！！
ちなみに私はhaml記法でやる派なのでerb記法でやる方は記述がほんのちょっと変わります。

一応hamlからerbに変換してくれる超便利なサイトを貼っておきます。
https://haml2erb.org/

はい。
こうすることでviewに表示されているユーザーのTwitterアカウントがリンク化されます。
んで、いざクリックすると〜
ユーザーのTwitterページに飛べちゃいます!!!
ちなみに登録させるときはアカウントの前に**@**をつけてもつけなくても大丈夫です。

```
例
@freelife_blog ‏
freelife_blog ‏
カラムに保存するのはどちらでも良い
*上記のアカウントは今後の人生に役立つ情報がいっぱい詰まっているのでぜひフォローすることをおすすめします。
```
まあ見栄え的に@をつけたほうがよりそれっぽくなるでしょう。

というわけで以上がユーザーのTwitterページに飛ぶ方法でした！！！
ちなみになぜこれで飛ぶのかは、誰かのTwitterページのリンクを見てもらえればわかると思います。
それでは皆様のよきプログラミングライフを祈って🙏🙏🙏
Thuốc Tây chữa thoát vị đĩa đệm bằng cách tiêm ngoài màng cứng

![anh2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/465901/6e81c024-3744-101d-f0f3-a0cebd3cb4e4.png)
Thuốc tiêm hydrocortison chữa thoát vị đĩa đệm


Việc sử dụng các loại thuốc tiêm ngoài màng cứng để điều trị thoát vị đĩa đệm cần có sự tư vấn hướng dẫn của các bác sĩ chuyên khoa. Loại thuốc này khi sử dụng sẽ tiêm trực tiếp vào màng cứng cũng như dây thần kinh cột sống để làm giảm sự chèn ép rễ thần kinh gây đau và viêm nhiễm đối với người bị thoát vị đĩa đệm.


Thuốc tiêm hydrocortison
Đây là loại thuốc nổi tiếng và quen thuộc đối với những ai điều trị thoát vị đĩa đệm với mục đích giảm đau hiệu quả cho bệnh nhân bị đau thần kinh tọa.
Trường hợp tiêm ngoài màng cứng chỉ áp dụng cho bệnh nhân bị đau ở giai đoạn 3, khi tình trạng đau nhức đã lây lan sang các vùng khác của cơ thể dẫn đến tình trạng lồi đĩa đệm, thoát vị đĩa đệm nhẹ và vừa.
Thông thường, việc tiêm chỉ được thực hiện khi đã có chỉ định của các bác sĩ cụ thể với liều lượng 2 ngày 1 lần và thực hiện tiêm trong vòng 12 – 15 ngày với 6 mũi. Cụ thể việc tiêm sẽ được thực hiện theo các bước như sau:
Bước 1: Khi xác định được vị trí thoát vị đĩa đệm, các bác sĩ sẽ tiến hành khoanh vùng khu vực này và lau sạch, đồng thời bôi các loại thuốc sát trùng.
Bước 2: Chuẩn bị các dụng cụ cần thiết để tiêm thuốc hydrocortison và tiến hành pha thuốc để tiêm.
Bước 3: Sử dụng loại kim chuyên dụng để tiêm thuốc tây chữa thoát vị đĩa đệm  vào các đốt L3-L4 và L4-L5, tiêm từ từ cho đến khi qua dây chằng vàng thì dừng.
Bước 4: Thử hút để để phòng có dịch não tủy và máu, sau đó bơm thử 1ml không khí vô trùng, nếu vào nhẹ nghĩa là kim tiêm đã vào khoang màng cứng và có thể thực hiện việc tiêm thuốc.
Bước 5: Tiem thêm khoảng 2ml novocain và hydrocortison vào khoang ngoài của màng cứng như vậy là kết thúc quá trình tiêm.


Thuốc tiêm steroid
Đây là loại thuốc được sử dụng để tiêm xung quanh tủy sống, tác dụng của thuốc là làm giảm những cơn đau do thoát vị nhân tủy ở một mức độ nhất định.
Liệu trình tiêm của steroid cũng tương tự như hydrocortison tuy nhiên tùy vào từng thể trạng của người bệnh mà có thể điều chỉnh sao cho phù hợp và mang lại hiệu quả.

Xem thêm : chuabenhdaitrang.vn
【Java】Spring BootアプリケーションをAzure App Serviceにデプロイする

# 目的
Spring BootのWebアプリを、AzureのApp Serviceにデプロイする。

# 前提条件
Eclipse + Gradle でSpring スタータープロジェクトとして作成したものをデプロイする。

# App Serviceの作成
・TomcatとJavaのバージョンをWebアプリケーションと合わせる。
・OSはWindowsにすると、App Service Editorが使えるので便利。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424975/4d39b5d3-958d-cd29-5db8-5c634ae6f3ba.png)

# Warファイルの作成
Create a Deployable War File
https://docs.spring.io/spring-boot/docs/current/reference/htmlsingle/#howto-create-a-deployable-war-file

上記手順に従ってデプロイ可能なwarファイルを作る。
`@SpringBootApplication`の付いたクラスに`SpringBootServletInitializer`を継承させる。
かつ、build.gradleにwarのプラグインを追加し、Tomcatを`providedRuntime`にする。

```groovy:build.gradle
apply plugin: 'war'

dependencies {
	// warにTomcatを含めない
	providedRuntime 'org.springframework.boot:spring-boot-starter-tomcat'
}
```

'bootWar'タスクを実行し、warファイルを作る。
![01.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424975/ca5a638a-f602-f4aa-3ba4-83f83cc99d5b.png)


# WARファイルをAzureへ置く

App Service Editorを使用すると簡単。App Service Editorとは、App Service上のファイルをVisual Studio CodeみたいなGUIで直接編集できるツール。App ServiceのOSがWindowsの場合のみ使用できる。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424975/17278ac2-2d15-e88a-a75a-ae03da704272.png)

既にROOTフォルダがある場合は削除しておく。

App Service Editorのエクスプローラーの部分へ、作成したWARファイルをドラッグ＆ドロップしてアップロードする。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424975/a27ea1ca-5fc0-7cf3-1d08-aece4856e7f3.png)

アップロード先のフォルダ、またはエクスプローラーの余白で右クリック→「Upload File」でもアップロードできる。
しばらく待つと、WARファイルが展開される。

# おまけ：Tomcat入りのjarファイルをデプロイする方法

Spring Boot Deployment On Azure App Service — Zero Code Approach
https://medium.com/@k32y/spring-boot-deployment-on-azure-app-service-zero-code-approach-88305c8d0818
自動運転シミュレーション

# 概要

自動運転シミュレーションで、使えるコースをplunkerで作ってみた。
活用して下さい。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/b0294492-1db1-1cf9-a429-1de6920d794e.png)


# 成果物

https://embed.plnkr.co/lkdZPePPq7Pb3osCfe0d/

以上。
ランダム有向ネットワークと次数分布

#ランダム有向ネットワーク
頂点数：ｎ＝1,000,000個
辺数：ｍ＝約5,000,000本
この条件のもとランダム有向ネットワークをpythonで生成してみる。


```math
p=\frac{m}{n(n-1)}=5.000005000005e-06
```
この確率で辺生成を行う。
これはもし頂点数ｎのネットワークが完全グラフならば辺数lは

```math
l=\frac{n(n-1)}{2}
```
となる。有向ネットワークより出る辺、入る辺の２本があるので
考えられる最大の辺数は

```math
l=n(n-1)
```
よって確率ｐは上のようになる。

#ランダム有向ネットワークの生成
pythoｎのnetworkｘを使い、実際に生成してみる。

```python
import networkx as nx

A = nx.fast_gnp_random_graph(n, p, directed=True)
```
生成したネットワークの辺数、頂点数を調べてみる。

```python
print(nx.number_of_edges(A))
#=>5000971
print(nx.number_of_nodes(A))
#=>1000000
```
頂点数１００万、辺数約５００万のランダムネットワークができた。
#次数分布

![ダウンロード (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330569/9efa3f09-fb47-4f8e-ae15-66aa5017572a.png)

#ポアソン分布
辺を貼るか貼らないかというランダムネットワークは二項分布になっている。
また、p<<1, 1<<nであるのでポアソン分布になっているのでそれを確認する。

ある頂点ｖの次数の期待値は

```math
E[X]=2(n-1)p=2(n-1)\frac{m}{n(n-1)} = \frac{2m}{n}
```
となる。

$\lambda = \frac{2m}{n}$とすると、ポアソン分布$P_0(\lambda)$は以下になる。
![ダウンロード (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330569/e7ddbcc2-a1cf-6152-a4e9-f21ff3bb5593.png)

#比較
ポアソン分布と次数分布を比較する。
![Gnp&poisson.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/330569/f838eb0b-f90a-aecd-33f8-1ad4b4fe743b.png)
数式の展開はどこまで詳細化するとよいか。仮説（141）

数学、物理学の教科書、演習書などで、数式の展開を省略することがある。

理由はいくつか考えられる。

１　自明の展開を記述すると、量が膨大になる。返って分かりにくくなる可能性がある。

２　同じ優先順位の展開が複数あるとき、どれから記述するかで、分かり易さが変わる可能性がある。
　すべての展開順序を記述すると量が膨大になる。

３　他の類書に詳細な記載があるため省略する。

４　教科書の場合、対の演習書で紹介しており省略する。

５　教科書の場合、授業で示すため省略する。

６　自分の頭で考える必要があるため示さない。

７　一度提示した定理の利用事例は記載せず省略する。

８　一度提示した定理の利用は一度は示す。二度目以降は省略する。　

９　　数式処理ソフトで自動生成する部分は省略する。

１０　沢山の理論、演習問題を記載したい。展開は極力省略する。

具体例は順次探して追記します。

ｐ。s。
昔の電磁気の教科書は、各ページに１か所くらい誤植がありました。
授業に出ていないと、誤植がどこか分からなくなることがありました。

### 最後までおよみいただきありがとうございました。

いいね　💚、フォローをお願いします。

#### Thank you very much for reading to the last sentence.

Please press the like icon 💚　and follow me for your happy life.
Firebase Analyticsのカスタムイベントのデータを今月,先月で絞ってredashで見る

<img width="721" alt="スクリーンショット 2019-07-24 15.46.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204698/ac4e0e8a-c2af-fad5-3521-6094ee1907fd.png">


[Firebaseでイベントをログに記録](https://firebase.google.com/docs/analytics/cpp/events?hl=ja)したものをRedashで表示したくなり、一応できたのでメモ。

[Firebase の BigQuery Export](https://support.google.com/firebase/answer/7030014?hl=ja&ref_topic=7029512)の機能を使い、アナリティクスのデータとアプリのデータの統合を行うことができます。

詳しいFirebaseのデータをBigQueryに入れる方法はこちらの[BigQuery を Firebase にリンクする](https://support.google.com/firebase/answer/6318765)から確認してください。

RedashでBigQueryをデータソースに追加するにはこちらの[BigQuery Setup
](https://redash.io/help/data-sources/setup/bigquery)をご確認ください。

Firebaseのデータソースが選択できるようになると、下記のような日付ごとに作成されたイベントデータが確認できると思います。

![スクリーンショット 2019-07-24 16.05.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204698/7459f33b-eda2-82e8-b72f-fc4aebc30193.png)


詳しくは下記を参考にしてください。
[BigQuery Export のスキーマ
](https://support.google.com/firebase/answer/7029846?hl=ja)

それに対してクエリを書いていきますが、如何せんBigQueryも書いたことがなかったため、日付ごとのテーブルとは、unionしまくるのか？
と思ったけど、BigQueryにはワイルドカード テーブルという機能がありそれを用いれば**今月、先月**のデータが出せるということがわかりました。
([ワイルドカード テーブルを使用した複数テーブルに対するクエリ](https://cloud.google.com/bigquery/docs/querying-wildcard-tables?hl=ja))

例えば、今月の`hoge`イベントのカスタムパラメータを取得したい場合は、

```sql
-- 今月のPVデータ
SELECT JSON_EXTRACT(TO_JSON_STRING(event_params, TRUE), '$[3].value.string_value') AS hoge,
      count(*) AS PV
FROM `analytics_xxxxxxxx.events_*`
WHERE
  _TABLE_SUFFIX > CONCAT(FORMAT_DATE("%Y%m",(DATE_TRUNC(CURRENT_DATE('Asia/Tokyo'), MONTH))), "01")
AND event_name='my_custom_event'
GROUP BY JSON_EXTRACT(TO_JSON_STRING(event_params, TRUE), '$[3].value.string_value')
```

このようにすれば今月の1日以降のテーブルを対象に、イベントを取得することができます。
カスタムイベントのパラメータは`event_params `カラムにJSONで入っているので`JSON_EXTRACT`にて取得することができます。

先月も同じ要領です。

```sql
-- 先月のPVデータ
SELECT JSON_EXTRACT(TO_JSON_STRING(event_params, TRUE), '$[3].value.string_value') AS hoge,
       count(*) AS PV
FROM `analytics_xxxxxxxx.events_*`
WHERE _TABLE_SUFFIX > CONCAT(FORMAT_DATE("%Y%m",DATE_SUB(DATE_TRUNC(CURRENT_DATE('Asia/Tokyo'), MONTH), INTERVAL 1 DAY)), "01")
  AND _TABLE_SUFFIX < CONCAT(FORMAT_DATE("%Y%m",(DATE_TRUNC(CURRENT_DATE('Asia/Tokyo'), MONTH))), "01")
  AND event_name='my_custom_event'
GROUP BY JSON_EXTRACT(TO_JSON_STRING(event_params, TRUE), '$[3].value.string_value')
```

 __ワイルドカード テーブルには一定ルール的なのがあるのですが、[こちら](https://cloud.google.com/bigquery/docs/reference/standard-sql/wildcard-table-reference?hl=ja)のドキュメントを読むと理解できます。__

あとはRedashのクエリリザルトを使って、アプリのデータと結びつけることでFirebaseのイベントデータと、アプリのデータを紐づけることができ、
具体的なデータの分析を行うことができます。

めでたしめでたし。
pythonでtraitみたいなこと

## Overview

ruby の `extend` みたいな感じにやりたい話。

```bash
$ python -V
Python 3.7.2
```

振る舞いだけ別で定義して後から mixin みたいなことは、言語の機能としてはできないっぽいけど、
`type` でその場で class 生成して、対象の `__class__` に設定すると動的多重継承みたいにできるらしい。

委譲で済むならその方が良いと思うけど。

```a.py

class TraitA:
    def m1(self):
        print(self, "m1")

    def m2(self):
        print(self, "m2")

class TraitB:
    def m1(self):
        print(self, "m1")

    def m2(self):
        print(self, "m2")


class Base:

    @classmethod
    def factory(cls, val):
        x = cls(val)

        if val == "A":
            trait = TraitA
        else:
            trait = TraitB

        x.__class__ = type("{}+{}".format(cls.__name__, trait.__name__), (cls, trait), {})

        return x

    def __init__(self, val):
        self.val = val

    def __repr__(self):
        return "<{}>\t{}".format(self.__class__.__name__, str(self.__dict__))

    def is_A(self):
        return isinstance(self, TraitA)

    def is_B(self):
        return isinstance(self, TraitB)

if __name__ == "__main__":
    a = Base.factory("A")
    a.m1()
    a.m2()
    print(a.is_A())
    print(a.is_B())

    print("-"*30)

    b = Base.factory("B")
    b.m1()
    b.m2()
    print(b.is_A())
    print(b.is_B())
```

## 実行

```bash

$ python a.py
<Base+TraitA>	{'val': 'A'} m1
<Base+TraitA>	{'val': 'A'} m2
True
False
------------------------------
<Base+TraitB>	{'val': 'B'} m1
<Base+TraitB>	{'val': 'B'} m2
False
True
```
paddingとmargin (CSS)

未来電子テクノロジーでインターンをしている mrm1027 です。

【プログラミング初心者であるため、内容に誤りがあるかもしれません。
　もし誤りがある場合は、すぐさま修正しますのでどんどん指摘してください。】

<div class="heading">
  <h1>はじめに</h1>
</div>

プログラミングを始めて、1ヶ月が経ちました。
とてつもなく早く感じます。
最近ではプログラミングの進みがあまり良くなく、まとまった時間を確保することに
苦労しているところです。

カリキュラムの進捗としては、ProgateのHTML＆CSSの道場編中級編までようやく修了し、自由課題に入ろうとしているところです。

<div class="container">
  <h2> padding と margin の違い</h2>
</div>

CSSでpaddingとmarginが個人的に分かりづらかったので、この場を借りて復習させていただきます。

＜CSSの余白の考え方＞

要素の中身（内容）があり、そのまわりの余白がpaddingです。
そのまわりにはborder（線）があり、それより外側の余白がmarginです。
→　「borderを基準に「中」と「外」で考えたらいいのか！！！」

<img width="409" alt="スクリーンショット 2019-07-24 15.57.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/447345/3f996a90-389f-3478-5a3b-1f48d2dc7676.png">
[参考：https://saruwakakun.com/html-css/basic/margin-padding]


なお、要素に対してwidthとheightの値を指定した場合には、要素の中身の部分の大きさが変わります。
<img width="409" alt="スクリーンショット 2019-07-24 15.57.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/447345/12f69cb6-ab18-5374-04a3-8b0851a4fa37.png">

[参考：https://saruwakakun.com/html-css/basic/margin-padding]

→　「widthとheightを設定したら、paddingやmarginを含んだ要素の高さや広さを設定できると勘違いしてた！！！」

<div class="container">
  <h2>まとめ</h2>
</div>

paddingとmarginの違いが体系的に理解できるようになりました。
これからの知識の蓄積を忘れず、学習を進めていきます。
AtCoder Beginner Contest 004


###A - 流行

奇をてらうことなく。

```py
print(int(input())*2)
```

###B - 回転

L1、L2はnumpyで何かしら代用出来るのだろう。
（知らないけど）

printはスマートさに欠けて悲C

```py
import numpy as np
 
I = [input() for i in range(4)]
L1 = [list(i.replace(" ", "")) for i in I]
L2 = L1[::-1]
L3 = np.fliplr(L2)
[print(' '.join(i)) for i in L3]
```
Xcodeでソースコントロールを行う

# この記事は何？
Xcode Help ドキュメントより、Use Source Control を要約

### 環境
- Xcode11 beta
- macOS Mojave 10.14.6

# 手順
ファイルをバックアップし、他のユーザーと共同作業し、リリースにタグを付けるには、ソース管理を使用します。

### Step1: ローカルリポジトリを使う
新しいプロジェクトまたは既存プロジェクト用の[ローカルソース管理リポジトリを作成](https://help.apple.com/xcode/mac/11.0/index.html?localePath=en.lproj#/dev8f6ee148b)できます。
後で、プロジェクトを共有したり、複数のMacコンピュータからプロジェクトにアクセスしたりするには、[リモートリポジトリを作成](https://help.apple.com/xcode/mac/11.0/index.html?localePath=en.lproj#/deve306e855d)できます。

### Step2: リモートリポジトリを作成する
「アカウント」環境設定で、以下のリモートリポジトリアカウントを追加できます。
- Bitbucket
- GitHub
- GitLab

新しいリモートリポジトリを作成したい場合は...
[ローカルのソースコードリポジトリからリモートを作成](https://help.apple.com/xcode/mac/11.0/index.html?localePath=en.lproj#/dev2547b9dbe)してください。
既にリモートリポジトリが存在する場合は...
[リモートリポジトリからプロジェクトを複製する](https://help.apple.com/xcode/mac/11.0/index.html?localePath=en.lproj#/dev0c2b18623)か、[既存リモートをローカルリポジトリに追加](https://help.apple.com/xcode/mac/11.0/index.html?localePath=en.lproj#/dev436c8730d)します。

### Step3: 変更のプル、コミット、プッシュ
プロジェクトに変更を加えたら、[ソースエディタで変更を確認](https://help.apple.com/xcode/mac/11.0/index.html?localePath=en.lproj#/devbcd8cba58)するか、[ファイルのリビジョンを比較](https://help.apple.com/xcode/mac/11.0/index.html?localePath=en.lproj#/dev5ace8e9eb)します。
次に、[変更をソースコードリポジトリにコミット](https://help.apple.com/xcode/mac/11.0/index.html?localePath=en.lproj#/dev14751bc8b)します。
リモートリポジトリの場合は、コミットする前に[リモートリポジトリから変更をプル](https://help.apple.com/xcode/mac/11.0/index.html?localePath=en.lproj#/dev14751bc8b?sub=dev26896b8b9)し、コミットした後にその[変更をプッシュ](https://help.apple.com/xcode/mac/11.0/index.html?localePath=en.lproj#/dev14751bc8b?sub=dev349353c46)します。

### Step4：リポジトリとコミットを表示する
[ソース管理ナビゲータ](https://help.apple.com/xcode/mac/11.0/index.html?localePath=en.lproj#/deva996c49f0)で、リポジトリ内のブランチを選択し、[履歴エディタでコミットを表示](https://help.apple.com/xcode/mac/11.0/index.html?localePath=en.lproj#/dev89f34a32d)します。

ここでは他にも以下のアクションが可能です。
- コミットをフィルタリング
- 比較エディタでファイルを表示
- コミットの作成者に電子メールを送信

### Step5：ブランチを管理してタグを使用する
[リポジトリにブランチを作成する](https://help.apple.com/xcode/mac/11.0/index.html?localePath=en.lproj#/dev897cb9ff4?sub=devd0d6af11c)と、自分の変更を分離して他の人に影響を与えないようにできます。
後から、[リポジトリ内で分岐したブランチをマージ](https://help.apple.com/xcode/mac/11.0/index.html?localePath=en.lproj#/dev897cb9ff4?sub=dev49b9cff41)します。
ブランチで[コミットをタグ付け](https://help.apple.com/xcode/mac/11.0/index.html?localePath=en.lproj#/dev93bdbf94c)して、後で簡単にチェックアウトすることもできます。
特に、アプリを配布する前はコミットにタグを付けてください。
また、Tagsフォルダにグループを作成してリリースを整理することもできます。

参考: [ソース管理を構成する](https://help.apple.com/xcode/mac/11.0/index.html?localePath=en.lproj#/dev7ef1e7406)

## 要するに
#### ソースをバーション管理するには...
- まず、リポジトリを作る
- 後からリモート化もできる

#### リポジトリに変更をコミットするときは...
- コミットする前に、過去の変更をプル
- コミットした後に、新しい変更をプッシュ

#### 複数人でソース管理する場合は...
- ブランチを作る
- ブランチは、後でマージする
- ブランチにタグをつけておくと、チェックアウトするときに目印になる

## バージョン管理をはじめる方（自分）に
まずは、リモートではなくローカルで行うことから始めるといいでしょう。
GitHubやbitbucketなどのリモートは使わずに、Git単体で...
1. リポジトリ作成
2. 変更→コミット
3. ブランチ作成
4. チェックアウト→変更
5. マージ

を実践して、理解できたらリモートを作成してみる感じです。
XcodeはGUIでGitをサポートしているので、ターミナルから難しいコマンドを覚えたり入力する必要がありません。
意外とすんなりバージョン管理をはじめられる気がします。
LaravelでSQSからメッセージをデキューしたいだけの場合のプラクティス

## LaravelにあるQueue機能

AWS SQSに入ったメッセージを、Laravelフレームワークで処理したいことがあった。

LaravelにはもともとQueueの機能があり、それを使うことで簡易にできると思っていたが、これはLaravelからエンキューしLaravelからデキューする前提で作られているようだった。（？）

実際にJOBを投入するときは、処理するロジックのクラスも含めてエンキューする。
エンキューする際は決まった形にオブジェクトを作成し、デキューする際もそれ前提で処理をするようだった。

以下はエンキューする前に呼び出される関数。
ペイロードのオブジェクトをLaravelの仕様で作っている。

```php:vendor/laravel/framework/src/Illuminate/Queue/Queue.php
    /**
     * Create a payload for an object-based queue handler.
     *
     * @param  mixed  $job
     * @return array
     */
    protected function createObjectPayload($job)
    {
        return [
            'displayName' => $this->getDisplayName($job),
            'job' => 'Illuminate\Queue\CallQueuedHandler@call',
            'maxTries' => $job->tries ?? null,
            'timeout' => $job->timeout ?? null,
            'timeoutAt' => $this->getJobExpiration($job),
            'data' => [
                'commandName' => get_class($job),
                'command' => serialize(clone $job),
            ],
        ];
    }
```

## 今回やりたいこと

SQSにはLaravelではない別のクライアントからメッセージを入れる。
この入れられたメッセージをLaravelで処理したい。

もちろんLambdaなどで処理したほうがいいケースのほうが多そうだが、今回はプロジェクトの仕様でLaravelで行いたい。


### config/queue.php

今後Laravelの既存Queue機能を使うかもしれないので、configの場所は同じにする。
もともと以下の記述があるので、実際には.envへの追記になる。

```php:config/queue.php
        'sqs' => [
            'driver' => 'sqs',
            'key' => env('SQS_KEY', 'your-public-key'),
            'secret' => env('SQS_SECRET', 'your-secret-key'),
            'prefix' => env('SQS_PREFIX', 'https://sqs.us-east-1.amazonaws.com/your-account-id'),
            'queue' => env('SQS_QUEUE', 'your-queue-name'),
            'region' => env('SQS_REGION', 'us-east-1'),
        ],
```

### AWS SDK

composerでrequire

```
$ composer require aws/aws-sdk-php
```


### メッセージのデキュー

AWSクライアントを直接使うのではなく、config処理をそのまま活かすために、Laravelのクラスを使ってみた。
（Laravelのクラスの中で、AWSのSDKを使っている）

```php
use Illuminate\Queue\Connectors\SqsConnector;

/** 省略 **/

    public function handle()
    {
        $config = config('queue.connections.sqs');
        $client = (new SqsConnector())->connect($config);

        $sqs = $client->getSqs();
        $queue_url = $client->getQueue(null);

        $result = $sqs->receiveMessage([...]);

        ...
    }
```
物理定数とSI単位, 佐藤文隆, 2005

岩波講座-物理の世界 ものを見るとらえる〈9〉物理定数とSI単位, 佐藤文隆, 2005
![417A85XYX2L._SX337_BO1,204,203,200_.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51423/0ae3426d-7775-f5ca-7ee5-101ce6e32bb3.jpeg)
https://www.amazon.co.jp/dp/400011185X/


#参考文献
###1
図解雑学　単位のしくみ
###2
単位がわかると物理がわかる　
###3
理科年表　丸善
###4
P.J. Mohr and B.N. Taylor, Adjusting the values of the fundamental constants, Physics Today, AIP, Vol.54, March 2001, pp.29-31　

###5
J.C. Bergquist, S.R. Jefferts and D.J. Wineland, Time measurement at the millennium, Physics Today, AIP, Vol.54, March 2001, pp.37-42
###6
Science AAAS, Vol.306, No.5700 Nov. 19, 2004 Special Section, Fundamentals of Measurement, pp.1307-1336
###7
http://www.nmij.jp
###8
http://www.internet.jp
###9
http://www.bipm.fr
###10
http://www.codata.org
### 最後までおよみいただきありがとうございました。

いいね　💚、フォローをお願いします。
#### Thank you very much for reading to the last sentence.

Please press the like icon 💚　and follow me for your happy life.
PWAのmanifest.jsonを動的に生成する

#iOSにおける問題
[WebサイトをPWAに対応させる](https://qiita.com/yjtakahagi/items/9e68956132710cf3c283)
上記の対応を行ったサイトで実際にホーム画面追加したアプリを起動してみると、Andoroidでは問題なく利用できましたが、iOSではログイン画面が開きました。
セッション情報をLocal Storageに保存していた場合に、AndroidではLocal Storageの情報がブラウザと共有されるのに対し、iOSでは共有されないようです。

再度ログインし直せばそれで済む問題ではありますが、ユーザーにとっては２度手間になってしまいます。

#start_urlにパラメータを付加したい
上記の問題を解決するために、ホーム画面にアイコンを追加するタイミングでURLパラメータにセッショントークンを追加してログイン情報を引き継ぐことにしました。
そのために、manifest.jsonの内容を動的に作成し、start_urlにパラメータを付加することを検討しました。

#linkタグを書き換えられるようにする
まず、manifest.jsonを読み込むためにhtmlに追加したlinkタグを次のように書き換えます。

```index.html
<link rel="manifest" href="/manifest.json" />
```
↓

```index.html
<link rel="manifest" id="my-manifest" />
```
これで、次のようにしてmanifest.jsonを置き換えられるようになります。

```js
document.querySelector('#my-manifest').setAttribute('href', '/manifest.json');
```

#manifest.jsonを動的に生成する
次のようなfunctionを用意しておき、セッショントークンを生成したタイミングで呼び出すことでセッション情報を付加したURLを作ることができました。

```manifest.js
var setManifestURL = function (token = null) {
    var myUrl = window.location.href;
    var startUrl = token ? myUrl + "?token=" + token : myUrl;

    var manifest = {
      "name": "Sample Application",
      "short_name": "SMPL APP",
      "theme_color": "#2196f3",
      "background_color": "#2196f3",
      "display": "standalone",
      "start_url": startUrl,
      "icons": [
        {
          "src": myUrl + "/img/icons/icon-72x72.png",
          "sizes": "72x72",
          "type": "image/png"
        },
        {
          "src": myUrl + "/img/icons/icon-96x96.png",
          "sizes": "96x96",
          "type": "image/png"
        },
        {
          "src": myUrl + "/img/icons/icon-128x128.png",
          "sizes": "128x128",
          "type": "image/png"
        },
        {
          "src": myUrl + "/img/icons/icon-144x144.png",
          "sizes": "144x144",
          "type": "image/png"
        },
        {
          "src": myUrl + "/img/icons/icon-152x152.png",
          "sizes": "152x152",
          "type": "image/png"
        },
        {
          "src": myUrl + "/img/icons/icon-192x192.png",
          "sizes": "192x192",
          "type": "image/png"
        },
        {
          "src": myUrl + "/img/icons/icon-384x384.png",
          "sizes": "384x384",
          "type": "image/png"
        },
        {
          "src": myUrl + "/img/icons/icon-512x512.png",
          "sizes": "512x512",
          "type": "image/png"
        }
      ]
    }

    const stringManifest = JSON.stringify(manifest);
    const blob = new Blob([stringManifest], {type: 'application/json'});
    const manifestURL = URL.createObjectURL(blob);
    document.querySelector('#my-manifest').setAttribute('href', manifestURL);
}
```

#注意点
最初にこの方法を試した時にはURLや画像が無効だというエラーが出続け、解消するのに苦労しました。

原因はURLの指定方法にありました。
通常はstart_urlやアイコンのURLは相対パスでよかったのですが、動的にmanifestを読み込ませる場合はフルパスを指定しないと有効になりませんでした。

#参考資料
下記を参考にしました。
[How to Setup Your Web App Manifest Dynamically Using Javascript](https://medium.com/@alshakero/how-to-setup-your-web-app-manifest-dynamically-using-javascript-f7fbee899a61)
Oracle Cloud Infrastructure 2018 Architect Associate 合格体験記

　先日、今年2月7日に合格したOracle Cloud Infrastructure 2018 Architect Associateのバッジがメールにて送られてきました。オラクル青山センターで実施されたOCI Partner Deep Dive Daysというセミナーの最終日に受験しました。
<img width="837" alt="キャプチャ.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131627/ee262e0f-6c8a-b749-cd8f-a793a2839eee.png">

　私がOCIをやり始めたのが今年からなので、当時の自分からすると頑張って勉強したのかなと思います。と言っても試験勉強を始めたのは1週間前からでした。ぎりぎり合格でしたのでもっと早くから勉強しておけばよかったと思っています。(とはいえAWS/GCPなどクラウドの経験、試験範囲にあるterraformは以前の職場で使っていました。ただそれはあまり関係ないような気もしますが…)

1週間したことは以下の2点です。
・OracleCloud公式ブログのチュートリアル(初級編と中級編のLBのみ)
[チュートリアル](https://community.oracle.com/docs/DOC-1019313)
・こちらのUdemyの教材を猛スピードで3周やる(教材は全文英語です)。
[[1Z0-932] Oracle Cloud Infrastructure 2018 Architect](https://www.udemy.com/1z0-932-oracle-cloud-infrastructure-2018-architect/)

Deep Dive DaysはOCIの今後の動向や機能など、興味深いものでした。
しかしセミナーを受けただけでは本試験は合格しなかったと思います。

試験は受けたものの、本質的な理解や経験が今後も必要ですので、
ホワイトペーパーを読み込んだり、OCIをとにかく触って技術を上げていきたいと思います。

[ホワイトペーパー: インフラ > Oracle Cloud > InfrastructureCompute](https://cloud.oracle.com/ja_JP/compute)
[Oracle Cloud Infrastructure Security](https://cloud.oracle.com/iaas/whitepapers/oci_security_jp.pdf)
[Oracle Cloud Infrastructure での災害復旧のベスト・プラクティス](https://cloud.oracle.com/iaas/whitepapers/best_practices_for_dr_on_oci_jp.pdf)

あの頃に比べればOCIはやり倒していますし、Professionalレベルの試験が開始された時には是非取得したいです。
望遠鏡, 海野宣男, 2005

岩波講座-物理の世界　ものをも見るとらえる〈7〉望遠鏡　宇宙の観測, 海野宣男, 2005
![41HATAGRB5L._SX335_BO1,204,203,200_.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51423/2ad75cfe-4a86-6f9d-963f-93888ee80a89.jpeg)
https://www.amazon.co.jp/dp/4000111833/

#参考文献
###1
天文学における望遠鏡の歴史
###2
望遠鏡　美しい星の像を求めて
###3
反射望遠鏡　山下
###4
西村　宇宙の観測I 
###5
宇宙電波天文学
###6
電波望遠鏡をつくる　大月書店
###7
天文学史の試み
###8
宇宙史の中の人間
###9
理科年表　丸善
### 最後までおよみいただきありがとうございました。

いいね　💚、フォローをお願いします。
#### Thank you very much for reading to the last sentence.

Please press the like icon 💚　and follow me for your happy life.
数学から見た古典力学, 砂田利一, 2004

岩波講座-物理の世界-物の理-数の理〈2〉数学から見た古典力学, 砂田利一, 2004
![413EBHXNSGL._SX323_BO1,204,203,200_.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51423/8a0eb16e-258c-7444-fd01-1faa60a16442.jpeg)
https://www.amazon.co.jp/dp/4000111647

#参考文献
###1
多様体入門　裳華房
###2
局面の幾何　岩波講座
###3
コマの幾何学
###4
多様体のトポロジー　岩波　２００３
###5
位相幾何学I 岩波　１９６７
###6
現代ベクトル解析　岩波　１９６５
###7
分割の幾何学　日本評論社　２０００
###8
###9
### 最後までおよみいただきありがとうございました。

いいね　💚、フォローをお願いします。
#### Thank you very much for reading to the last sentence.

Please press the like icon 💚　and follow me for your happy life.
python3で切り下げ，切り上げ，四捨五入，だけのためにライブラリをimportしたくない

息抜きがてらプログラミングサイトの問題を解いていたのですが， ~~いちいちライブラリをインポートするのが面倒になったので，~~ 簡単な処理はimportせずに書くことでpython力を上げていこうと思い，とりあえず3つだけメモ的に残そうと思います．

# 環境
- macOS Mojave 10.14.5
- Python 3.7.3

# 対象読者
- なんとなくライブラリを使いたくない人

# 切り下げ
色々方法調べたところ，`math`ライブラリに`floor`なるものが存在するそうですが，タイトル通りインポートするのが面倒なので関数を適当に作ります．

```python:floor
>>> floor = lambda x: x//1
>>> floor(6.9)
6.0
>>> floor(6.1)
6.0
>>> floor(6.5)
6.0
```

関数にする必要あるか？という疑問はおいときます．
これは`a//b`という演算はよくやると思いますが，aをbで割った時の商(整数まで)を返すのでそれを利用して，1で割って切り下げを行なっています．
好きな桁で切り下げがしたい時は以下のようにすればなんとかなります．

```python:floor
>>> floor = lambda x,y: x//y * y
>>> floor(1220,10)
1220
>>> floor(1222,10)
1220
>>> floor(1229,10)
1220
>>> floor(1229,100)
1200
>>> floor(1229,1000)
1000
```

# 切り上げ
こちらも`math`ライブラリに`ceil`なるものが存在するそうですが，以下同文です．

```python:ceil
>>> ceil = lambda x: x//1 + bool(x%1)
>>> ceil(1.2)
2.0
>>> ceil(1.0)
1.0
>>> ceil(1.9)
2.0
>>> ceil(2.0)
2.0
```

ここでは`lambda`の説明は省きますが，その他を説明すると，切り下げ同様`x//1`で商を計算しています．そして`x%1`はxをyで割った時の余りを返すので，`bool()`でキャストしてあげることで余りが存在する時に1を足すことになります．
これで切り上げが実現できます．
応用編として好きな桁で切り上げは以下のようになります．

```python:ceil
>>> ceil = lambda x,y: (x//y + bool(x%y)) * y
>>> ceil(1222.2,1)
1223.0
>>> ceil(1222.2,10)
1230.0
>>> ceil(1222.2,100)
1300.0
>>> ceil(1222.2,1000)
2000.0
```

# 四捨五入
調べたところroundという関数が用意されているようですが，これは偶数への丸めのようで以下のような挙動をします．

```python:round
>>> round(2.4)
2
>>> round(2.5)
2
>>> round(2.6)
3
```

てことでこれも適当に関数作ってしまいましょう．　

ここで注意事項ですが，下のやり方では**round関数の上書き**を行なっています．本記事では既存のroundは不要かつ，わかりやすい関数名にするために上書きしましたが，一般的には推奨されないと思うのでこの方法を使用する際は，他の関数名にすることをオススメします．

```python:round
>>> round = lambda x: x//1 + bool(x%1 >= 0.5)
>>> round(1.0)
1.0
>>> round(1.2)
1.0
>>> round(1.4)
1.0
>>> round(1.5)
2.0
>>> round(1.8)
2.0
>>> round(2.0)
2.0
>>> round(2.5)
3.0
```

好きな桁数で四捨五入したい時は以下のようになります．

```python:round
>>> round = lambda x,y: (x//y + bool(x%y >= 0.5)) * y
>>> round(5555.5,1)
5556.0
>>> round(5555.5,10)
5560.0
>>> round(5555.5,100)
5600.0
>>> round(5555.5,1000)
6000.0
>>> round(5555.5,10000)
10000.0
```


# まとめ
最近1つの関数を使うためだけにライブラリのインポートを行うことがよくあるので，これからはもっと自力でかけるように日々精進しようと思いながら，またこんなネタ記事レベルを錬成している今日この頃ですね(￣∀￣)

# 参考記事
[Pythonで小数・整数を四捨五入するroundとDecimal.quantize](https://note.nkmk.me/python-round-decimal-quantize/)
やく立つCSS集

たまに使うCSSたちが覚えられねえ！メモしておこう。

####モデル画面用のクラス

```css:CSS
/*ベースクラス*/
.modal_overlay{
    display: flex;
    justify-content: center;
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.1);
    opacity: 1;
    transition: opacity 0.5s; /*おまけ*/
    transform: scale(1);      /*おまけ*/
}
/*コンテンツ用クラス*/
.modal_content{
    position: relative;
    align-self: baseline;
    width: 90%;               /*カスタム可*/
    top: 80px;                /*カスタム可*/
    padding: 30px 15px;       /*カスタム可*/
    box-sizing: border-box;   /*カスタム可*/
    background: #fff;         /*カスタム可*/
    line-height: 1.4em;       /*カスタム可*/
    transition: 0.5s;         /*おまけ*/
}
```

```html:HTML使用例
<div class="modal_overlay">
  <div class="modal_content" id='modalTop'>
    <p>こんにちは！</p>
  </div>
<div>
```

:notes:

####パンくず用クラス

```css:CSS
#bcnav > ul > li > a[href]::after {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 15px;
  margin-left: 12px;
  -webkit-transform: rotate(45deg) skew(-15deg, -15deg) translate(-1px);
      -ms-transform: rotate(45deg) skew(-15deg, -15deg) translate(-1px);
          transform: rotate(45deg) skew(-15deg, -15deg) translate(-1px);
  border-top: solid 1px #333;
  border-right: solid 1px #333;
}
```

```html:HTML使用例
<div id="bcnav">
  <ul>
    <li><a href="./xxx">大カテゴリ</a></li>
    <li><a href="./xxy">中カテゴリ</a></li>
    <li><a href="./xxz">小カテゴリ</a></li>
  </ul>
</div>
```

:notes:
【JavaScript】初めてのAnimationライブラリ導入(TweenMax)

アニメーションってかっこいいですよね。
かっこいいサイトって大体めっちゃ動きますよね。
ということでAnimationライブラリを使う練習してみます。

##TweenMaxとは
今回はTweenMaxというライブラリを使います！
凄く高機能らしいのですが、ファイルサイズがめっちゃ重いみたいです（113KB)
[こちら](https://ics.media/entry/14973/)曰く、
>TweenMaxは113KBと容量が大きいものの、モジュールを分解して読み込むことが可能。TweenMaxの兄弟であるTweenLiteだとわずか28KBです。パッケージマネージャーnpmやTypeScriptでの利用も、他のライブラリと比べて一歩進んでいます。詳しくは記事「ES Modules対応のgsapの使い方 - Qiita」を参照ください。

とのこと。
ファイルサイズを軽く扱う方法についても習得していければと思います。
(あとで参考にしそうなサイトたち）
https://blog.yuhiisk.com/archive/2016/10/05/create-tweenlite-animation1.html
https://qiita.com/manabe_66/items/42fec3e488190a0146f8

##TweenMax扱う方法
https://rfs.jp/sb/javascript/03js/greensock.html
http://un-tech.jp/tweenmax-started/
今日はこちらのサイトを参考に。

[公式サイト](https://greensock.com/)でダウンロード可能です。
CDNを利用する場合は、

```html
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
```

これをHTMLに貼り付けるだけでオッケーらしいです。
軽量化等はひとまず置いて、今回はこれでやってみます。

##TweenMax書き方

メソッドたくさんあるようですが、主要なものだけ。

|メソッド    |効果 |
|:-------------------:|:------------------:|
| set | プロパティの値のみ |
| from |  設定した値から初期値にアニメーション |
| fromTo  | 初期値を再設定・設定した値から初期値にアニメーション  |
| to  | 初期値から設定したアニメーション  |
| stagger  |  配列化されたセレクターを順にアニメーション |

```javascript
TweenMax.to('.c-kirby',2,{x: 700,repeat:-1,yoyo:true});
```
これはメソッドtoですね。
{}の中は順に
`動かす要素の指定` `プロパティ指定` `アニメーションの秒数` `繰り返し設定`(-1は無限リピート) `繰り返し方法`（yoyoは0-100%-0%の順で繰り返す）
色々な指定ができるので、詳しいのは公式を見るかhttp://reiwinn-web.net/2017/06/07/tweenmax/
このサイトが良さげです。

読み込むとちゃんと動きました！
参考リンク: RailsでViewを扱う方法

[Rein: RailsのActiveRecordでDB制約やデータベースビューを使えるgem（README翻訳）]https://techracho.bpsinc.jp/hachi8833/2017_09_11/45365

MySQLで利用できるかどうかなど未調査

※ 追記
ViewのCreateとApplicationRecordの利用はMySQLでも大丈夫でした
既約剰余類とオイラー関数

# 既約剰余類

$Z_n = \\{0, 1, \dots n \\}$の要素の中で、$n$と違いに素なもの

例)
$n = 18$の時既約剰余類は $\\{ 1, 5, 7, 11, 13, 17\\}$

これの個数を求めたい

# オイラー関数
素数$p$を用いて$Z_{p^k}$の個数$\phi(p^k)$は

$$
\phi(p^k) = p^k(1-\frac{1}{p})
$$

乗法性から既約剰余類$Z_{18}$の個数は$18 = 2 \times 3^2$より

$$
18(1 - \frac{1}{2})(1- \frac{1}{3})=6
$$

これはRSA暗号の公開鍵を作る際の底として使われています。

# コード

```Rust
fn gcd(a: usize, b: usize) -> usize {
    if b == 0 {
        a
    } else {
        gcd(b, a % b)
    }
}

// 素因数分解をします
// 試し割り法
fn trial_division(mut n :usize) -> HashMap<usize, usize>{
    let mut primes = HashMap::new();
    let mut i = 2;

    //  n を root n 以下の整数で割り切れるまで割っていく
    while i * i <= n {
        while n % i == 0 {
            n /= i;
            if primes.contains_key(&i) {
                let mut x = primes.get_mut(&i).unwrap();
                *x += 1;
            } else {
                primes.insert(i, 1);
            }
        }
        i+=1;
    }

    // 最後にnが素数になっている場合はそれ自身も素因数に含めて終了
    if n > 1 {
        if primes.contains_key(&n) {
            let mut x = primes.get_mut(&n).unwrap();
            *x += 1;
        } else {
            primes.insert(n, 1);
        }
    }
    primes
}

// A: オイラーのトーシェント関数
// B: 愚直に計算
struct A;
struct B;

trait EulersTotient {
    fn eulers_totient(n: usize) -> usize;
}

impl EulersTotient for A {
    fn eulers_totient(n: usize) -> usize {
        let mut s = 1.;
        for (k, _) in trial_division(n) {
            s *= 1. - 1. / k as f64
        }
        (s * n as f64) as usize
    }
}

impl EulersTotient for B {
    fn eulers_totient(n: usize) -> usize {
        (0..n).filter(|x| gcd(*x, n) == 1).count()
    }
}

fn main() {
    let n = 18;
    assert_eq!(A::eulers_totient(n), B::eulers_totient(n));
}
```

# 参考
[wiki](https://ja.wikipedia.org/wiki/%E3%82%AA%E3%82%A4%E3%83%A9%E3%83%BC%E3%81%AE%CF%86%E9%96%A2%E6%95%B0)
ROS2でament_pythonによるlaunchの作成

こんにちは、yamatomatsudaです。テスト前は他の用事が捗りますね。（なお単位ry）
今回はpython packageでlaunch fileを書いていこうと思います。

#ROS2のlaunchについて
さて、ros2 のlaunchを書こうと思って検索すると、これがなかなかみつからない。
とりあえずc++のlaunchを移植してみます。
publisher,subscriberはdemo_nodes_pyと同じものを使用します。（[talker.py](https://github.com/ros2/demos/blob/dashing/demo_nodes_py/demo_nodes_py/topics/talker.py),[listener.py](https://github.com/ros2/demos/blob/dashing/demo_nodes_py/demo_nodes_py/topics/listener.py)）
ちなみに、ROS2のヴァージョンはdashingを利用しています。

#バッファリング
パッケージ名、ファイル名は適宜書き換え、_ros2 run_で実行してみます。
setup.pyに、他のパッケージファイルと同じようにpy_modules,entry_pointsを書いておきます。
おそらくctrl+Cが押されるまで何も出力はされないはずです。
これを解決するために、書き込みバッファ内に存在するデータを無理矢理出力させます。
例えば、listener.pyで、

```
self.get_logger().info('I heard: [%s]' % msg.data)
```

となっているところを

```
print('I heard: [%s]' % msg.data,flush=True)
```
のように、書き換えます。printを利用しているのはNodeクラスのget_loggerにはflushオプションが存在しないからです。
これで、_ros2 run_コマンドではlaunchが動作するはずです。
#ros2 launch コマンド
launchコマンドで動作させるのは苦労しました。（ほんまに何も調べても出てこなかった。）
setup.pyに以下のように書き込めば、ビルド時にlaunchfileがws/install/share/に保存されるはずです。（package_nameは自分のpackage名）

```
data_files=[
        ('share/' + package_name, ['package.xml', 'test.launch.py']),
    ],

```

launchのドキュメント用意してよ〜〜！！
dCloudでAnsibleからNexusに何かするシナリオをやってみる（初心者向け画面多め）

# dCloudでAnsibleからNexusに何かするシナリオをやってみる（初心者向け画面多め）

dCloudを使ってみたい
VIRL試したい
Ansibleの勉強をしたい

を同時にかなえてくれる素敵な環境を試してみました。
dCloudは一般アカウントで使える環境もあるようなので、やるしかねぇ

## 必要なもの
Ciscoのアカウント（作り方はCiscoさんのドキュメント参照）
https://www.cisco.com/c/dam/global/ja_jp/partners/tools/ccoid/0003-1510-sb-how-to-make-ciscocomid.pdf

## いざ、環境予約
https://dcloud2-sng.cisco.com/
まずは画面右上からログインしましょう

画面上部のCatalogを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308260/c34ee6f9-4ba7-ea20-c2b0-8ff5e9959275.png)

検索ワードを入力する事ができるので今回は「ansible」と
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308260/1604ec11-aa73-69b5-c060-d57e146a13fd.png)

なにやらよさそうな名前があったのでSchedule
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308260/cba965ff-e232-3217-06fe-33302677f0e6.png)

予約したいスケジュールを選択してNext
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308260/51c3b074-6958-27b2-1850-8cd790da6187.png)

今回はお勉強なのでtrainingを選び、影響なしで
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308260/83054c3c-5d43-eda8-9ed0-ff0c933a0707.png)


すると、スケジュールが登録されました。※スクショの時系列は気にしないで下さい
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308260/8c5c3c88-b69f-c7e4-61b4-76a4bf6db443.png)

時間になるとscheduledからviewに遷移し、アクセスできるようになります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308260/4e465a33-891e-6a1b-e715-26d75e382f45.png)

## さあ、はじめよう
予約した環境の構成図が表示されるので、ここからは環境ごとになりますが、今回はworkstationにremote desktopでアクセス
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308260/e55c7a75-99bc-f9fb-f405-31cbc9d27ce2.png)

Demo Guideに従ってAnsibleのPlaybookでVIRLにあるNexusのSpine／Leaf構成からshowをとったりvlanを追加したりするシナリオを試しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308260/19a074e2-6794-fa15-145f-3da877b5e131.png)

VIRLの画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308260/a0c6d3bf-0117-4b89-9de6-950b2bcdd49c.png)

シナリオに従って進めてたら１台失敗したり　※もう一度実行したら成功した
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308260/cb5abebb-9ece-b0ff-0349-be48d101d0c2.png)

## 感想
Ansibleもくもく会と違ってメンターはいらっしゃいませんが、環境は似たような感覚で使用する事ができました。
シナリオもしっかりしていてPlaybookの説明もされています。
ドキュメントは英語ですが難しい文章は特になく、わからなくてもGoogle翻訳で問題ないレベルです。

Ansibleとネットワークについて気になっている人が、いろいろ自分で用意せずにライトに試す事ができる素晴らしい環境でした。

## 参考
https://www.youtube.com/watch?v=TmGNtvh1eeY
https://www.itbook.info/network/virl.html
多体系と量子場, 新井朝雄, 2002

岩波講座 物理の世界-量子力学〈5〉多体系と量子場, 新井朝雄, 2002
![41H1azHLL5L._SX341_BO1,204,203,200_.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51423/7e05521a-14d5-2dda-e947-a6a456e5ef26.jpeg)

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

#参考文献
###1
多体問題 新物理学シリーズ18, 高野文彦, 1975
![41a3wu40JTL._SY298_BO1,204,203,200_.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51423/14a4bc59-19c1-40a1-9782-aed7e3523fc4.jpeg)
https://www.amazon.co.jp/dp/456302418X

###2
物性研究者のための場の量子論1 新物理学シリーズ16, 高橋康
![51ETBogF4SL._SX333_BO1,204,203,200_.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51423/06e191dd-3b53-c621-e39f-3e0a7ae6316b.jpeg)
https://www.amazon.co.jp/dp/4563024163/

###3
物性研究者のための場の量子論2 新物理学シリーズ17, 高橋康
https://www.amazon.co.jp/dp/4563024171/
###4
朝永　量子力学II　みすず書房
###5
古典場から量子場への道　講談社
###6
ヒルベルト空間と量子力学
###7
量子力学の数学的構造I
###8
量子力学の数学的構造II
###9
フック空間と量子場　上
###10
フック空間と量子場　下
### 最後までおよみいただきありがとうございました。

いいね　💚、フォローをお願いします。
#### Thank you very much for reading to the last sentence.

Please press the like icon 💚　and follow me for your happy life.
WooCommerce Subscriptions でコピーする元注文の subscription_id の取得方法

#WooCommerce Subscriptions で元注文引き出す関数がない
WooCommerce Subscriptions の場合、定期購入時の元注文となる POST ID をかんたんに引き出す関数がありません。
そのため、元注文の `post_id` を見つけてくる方法を記述します。大きく２パターンあります。

##一回目の注文時
まずは最初の注文時です。ここが少しややこしいのですが、最初の注文が出来た後に、２回目以降にコピーして使う定期購入用の注文データを最初の注文番号の後に作る仕組みになっています。なので、最初の注文の `post_meta` などから探すことが出来ません。
WooCommerce subscription の `wcs_get_subscriptions_for_order` 関数を利用して以下のように引き出します。

```php:
$subscriptions_ids = wcs_get_subscriptions_for_order( $order_id );
foreach( $subscriptions_ids as $subscription_id => $subscription_obj )
    if($subscription_obj->order->id == $order_id) break;
$subscription_id;//order_ID
$subscription_obj;//Order Object
```

##二回目移行の注文時
二回目以降は、`post_meta` に保存されていますので、簡単に引き出せます。

```php:
$subscription_id = $order->get_meta(_subscription_renewal, true);
```
OperaTouch(Wallet)と提携したMarble.Cardsを使ってカードを作ってみる

#はじめに

先月(2019/06)仮想通貨のwalletに対応したOperaTouch(iOS版)が正式リリースされました。
ERC-20やNFTなどを利用することができます。

さて今回は、OperaTouchそのものではなく、
OperaTouchのリリース情報の中に、Marbel.Cardsの提携のことが書かれており、どのようなサービスか気になったのでMarbel.Cardsについて実際に触ってみました。

(OperaTouch)
https://www.youtube.com/watch?v=MWYw1D4n9jM
1:05
Create your own collectibles
(Collect the Web with MarbleCards)

Showcasing Marble.Cards
https://blogs.opera.com/mobile/2019/06/opera-touch-first-browser-for-ios-with-web3-support-and-crypto-wallet/

#Marbel.Cardsとは?

Marbel.CardsとはWebページをコレクターカードに変える事ができるゲームのようです。

#作ってみた
##0.とりあえず元になるtestページを用意する
画像もとりあえず適当に描いた
https://medium.com/@oggata/test-73f28ebd59db
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/87e485be-b852-dcb9-73ba-03b9aa755a06.png)


##1.URLを入力する
<img width="1351" alt="スクリーンショット 2019-07-24 13.58.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/22340dce-dc01-7ef6-47ef-5833bff1aa65.png">

##2.カードのレイアウトが作られる
<img width="1351" alt="スクリーンショット 2019-07-24 14.17.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/779b59c4-dc69-48dd-13d4-14316aa634e1.png">

##3.Gasを支払って、Blockchainに書き込むとカードが完成
<img width="1352" alt="スクリーンショット 2019-07-24 14.25.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/377032cb-8b5d-77ef-3a81-3cca25a9f4ad.png">

transaction
https://etherscan.io/tx/0x3786fbd8d886275904f49d395eceb47e934a70746e267345b46272ec549206e5

result
https://marble.cards/collection/initialauctions/0x28899653C0951D29635A4a123b8A43Eb15744f64/1;sortBy=auction_end_time_lower

##4.オークションとして販売が開始されました
<img width="933" alt="スクリーンショット 2019-07-24 14.38.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/acbbe934-0dc1-b1fd-1648-8742ae433c11.png">

ちなみに、保有者自体は、カードを作った人ではなくMarbleCards auction contractになっています。
このカードを自分で買うもよし、誰かが購入した場合は、一部手数料がクリエイターに入ることになっているとのこと。


##おしまい

カードを発見した人(つまりここではURLに対してgasPriceを払ってBlockchainに書き込んだ人)と、所有者というのは明確に分けているというところが、このサービスの特徴となっており、発見者は、URLの中でも、もっとも人気となりそうなURLを目利きして、GasPriceを払わないと、ただ、ただ闇雲にEthereumを消費してしまうことになりそうな印象を受けました。
curlコマンドで1000回ログイン試行するshellスクリプト

##経緯

1000セッションログインしても大丈夫か
簡単なテストを行いたかった。

Apache Benchや
JMeterなどのツールを導入するのが王道なんだろうけど、

多重下請けSIerあるあるで、ツール導入には、
各種申請（要１～２週間）が必要とか
ごにゃごにゃ言われてしまった。

「あ、めんどい。ぼくが自作したほうが早いわ」

ってことで

Shellの`curl`コマンドでログイン試行するスクリプト作ったので、忘備録です。

めっちゃ車輪の再発明ですが。

ちなみに、こんなテキトーな作りなので
実行には少し時間かかります。
1000回ログインするのに3分くらいかな。


##作ったもの

login_test.shが１回ログインを試行するスクリプト、
loop.shがそれを単に1000回繰り返すスクリプトです。

対象のWebサービスは1IDのセッション制限をつけてないので
同じIDで1000セッション

```bash:login_test.sh
#!/bin/bash
set -Ce
#--------------------------------------------
# ログイン画面取得→ログイン試行
# →ログイン後の画面取得のテスト
#--------------------------------------------

echo "login_test start $1" 

#ログインURL
login_url="http://hogehoge.com/login"

#ログイン後のみ見れるURL
func_url="http://hogehoge.com/main.html"

#ユーザーID
userId="user0001"

#パスワード
password="pCK&Ts3aYz"



#ログインURLアクセス、csrf_tokenを取得する
curl -s -c cookie_$1.txt $login_url > log_$1.txt
csrf_token=$(grep _csrf log_$1.txt | head -1 | cut -f 6 -d '"')


#ログイン試行
curl -s -b cookie_$1.txt -c cookie2_$1.txt -X POST -d userId=$userId -d password=$password -d _csrf=$csrf_token  $login_url


#ログイン後のみ見れるURLにアクセス。見れなかったら「失敗」と表示
curl -s -I -b cookie2_$1.txt $func_url > log2_$1.txt

if grep 'HTTP/1.1 200' log2_$1.txt >/dev/null; then
    :
else
    echo '失敗'
fi

exit 0
```

```bash:loop.sh
#!/bin/bash
set -Ceu
#--------------------------------------------
# 1000回ログイン試行するshell
#--------------------------------------------

echo "------------start--------------"

for i in `seq 1000`
do
  sh login_test.sh $i
done

echo "------------end--------------"

```


##もう少し詳しく解説

### `curl`コマンドについて
たぶん「シーユーアールエル」と読む。でもぼくは「カール」と呼ぶ。

指定したURLを叩いて、レスポンスを取得するコマンド

-c オプション　cookieを保存する。保存するcookieのパスを指定する
-b オプション　指定したcookieを読み込んで使う。ログインが絡む処理では必須
-I オプション　ヘッダのみ取得する。HTTPレスポンスが200かどうかだけ知りたかったので
-s オプション　プロセスメータや細かいメッセージを非表示にする。
-X オプション　POSTをつけることで、 GETではなくPOSTすることを明示
-d オプション　各パラメータをつけられる


### `csrf_token=$(grep _csrf log_$1.txt | head -1 | cut -f 6 -d '"')`
これは何してるかと言うと、保存したログイン画面のHTMLから、csrf_tokenを探して
変数にブチこんでいるところ。

本当はHTMLフォームの属性名から拾ってきたかったけど、いい感じに
拾える関数がなかったので、無理くり取得している。

（区切り文字を"にして、cutで分割、6つ目の要素を取得する、という方法。
HTMLに依存するのでログインページのHTMLみてうまく書き換えること）


### ```if grep 'HTTP/1.1 200' log2_$1.txt >/dev/null; then```
`grep`して'HTTP/1.1 200'が見つかったら、
`then`以下を実行する、というif。
grep結果は/dev/nullに捨ててしまうけど問題ない。


##参考にしたページ

https://qiita.com/ryuichi1208/items/e4e1b27ff7d54a66dcd9