OmniAICreator/Qiita-1.07M huggingface dataset:
アプリケーションの同時起動制限にパッチをあてて対処する


Windowsでスクリーンショットを撮るツールとして[Greenshot](https://getgreenshot.org/)を使っています。HighDPIの問題など、Windowsの大きな仕様変更がつらみになり、メンテされずに死んでいくツールが多い中、Windows 10でもいい感じに動いてくれます。

ただ一つ問題があって、このツールではショートカットAではフォルダAに画像を保存、ショートカットBではフォルダBに画像を保存、などと細かなコンフィグを行うことができません。
それぞれ別のコンフィグを持った複数プロセスを同時に実行できればこの問題を解決できそうですが、アプリケーション側の制約により、そうすることはできません。

ひとまず真っ当な方法では対処できなさそうなので、力技でどうにかしましょう。
GreenshotはOSSなので当該箇所を書き換えて独自にビルドしてもいいのですが、お手軽な方法はバイナリを書き換える方法です。

## Mutexを指定してる箇所を探す

[greenshot/Startup\.cs at develop · greenshot/greenshot](https://github.com/greenshot/greenshot/blob/0561394194646a2f8e5ffd6e255bc3f762cce2ab/src/Greenshot/Startup.cs#L76)

```
var applicationConfig = ApplicationConfigBuilder
    .Create()
    .WithApplicationName("Greenshot")
    .WithMutex("F48E86D3-E34C-4DB7-8F8F-9A0EA55F0D08")
    .WithCaliburnMicro()
    .WithoutCopyOfEmbeddedAssemblies()
```

それっぽいですね。

## 文字列をASCIIコードにする

先頭の`F48E86D3`をASCIIコードにすると`46 34 38 45 38 36 44 33`になります。

<img width="404" alt="SnapCrab_NoName_2019-3-25_17-55-50_No-00.png" src="https://qiita-image-store.s3.amazonaws.com/0/47014/6d1eb197-696d-9ec6-a955-02606de5266e.png">

## ASCIIコードを検索可能なフォーマットにする

これに00を挟んで、`46 00 34 00 38 00 45 00 38 00 36 00 44 00 33`としたものがバイナリ上に存在します。

<img width="589" alt="SnapCrab_Stirling - Greenshotexe_2019-3-25_17-55-21_No-00.png" src="https://qiita-image-store.s3.amazonaws.com/0/47014/c336b76a-9cef-5fcf-49a1-7cc277a71a43.png">

## Mutexを書き換える

マッチした部分のどれか1バイトを書き換えるだけで作業は終了です。
linux パーミッション chmod

# 概要
`chmod`はファイル or ディレクトリに対する権限を設定するコマンド。
ユーザー区分ごとに権限を設定できる。

## 数字

| 読み込み権限 | 書き込み権限 | 実行/folder access |
|:--:|:--:|:--:|
| r | w | x | 
| 4 | 2 | 1 | 

## 記号

|記号|意味|
|:--:|:--|
|u|	所有者の権限|
|g|	グループの権限|
|o|	その他のユーザーの権限|
|a|	すべての権限|
|+|	権限を付加する|
|-|	権限を削除する|
|=|     権限にセットする|
|r|	読み込み権限|
|w|	書き込み権限|
|x|	実行権限|
|s|	セットID|
|t|	スティッキ・ビット

## setuid

passwd コマンドの setuid アクセス権によってユーザーはroot権限として実行できる

```
ls -l /usr/bin/passwd
-rwsr-xr-x 1 root root 59640 Jan 26  2018 /usr/bin/passwd
```

## setgid

実行ファイルの所有グループの権限で実行することができる

## sticky
ディレクトリ内のファイルを保護するアクセス権ビットです

設定したら、そのファイルを削除できるのはその所有者、ディレクトリの所有者、または特権を持つユーザーだけ

## sample

```zsh
# 実行権限を追加
chmod +x test

# 書き込み権限を削除
chmod u-w test

# dirフォルダ全部766にする
chmod -R 766 dir
rbenvでRuby2.5.3が見つからなくて困ったときのメモ

要は**「ruby-buildを最新のものにせいや」**だけだったんですが。

## 環境
OS: macOS Mojave バージョン10.14.3
シェル: fish
バージョン管理ツール: anyenv

```bash
$ anyenv version
jenv: 1.8 (set by /Users/{user_name}/.jenv/version)
ndenv: v10.13.0 (set by /Users/{user_name}/.anyenv/envs/ndenv/version)
rbenv: 2.5.1 (set by /Users/{user_name}/.anyenv/envs/rbenv/version)
```

※anyenvの導入についてはこの記事がわかりやすかったです。
[fishターミナルでanyenvとndenvをインストールする。](https://qiita.com/sea_ship/items/996ebb228e4eafa48c11)

## 方法
```bash
$ rbenv install --list
Available versions:
--- 中略 ---
  2.5.0-rc1
  2.5.0
  2.5.1
  2.6.0-dev
  2.6.0-preview1
  2.6.0-preview2
--- 後略 ---
```

2.5.3がいない。

```bash
$ cd /Users/{user_name}/.anyenv/envs/rbenv/plugins/ruby-build/
$ git pull
--- いろいろ落ちてくる ---
$ cd ~/
$ rbenv install 2.5.3
```

以上。終わり。

## 参考（というか、まるまんま答え）
結構悩んだのに、普通にissueに書いてあったですね・・・。

[Add Ruby 2.5.3 stable to rbenv #1128](https://github.com/rbenv/rbenv/issues/1128)
【Unity】Application.LoadLevelは非推奨になっていました

# 背景

[Unity5 3D/2Dゲーム開発 実践入門 作りながら覚えるスマートフォンゲーム制作（吉谷 幹人） \| 書籍 本 | ソシム](http://www.socym.co.jp/book/967)の本に書いあるコードを写経していたら、他のシーンを呼び出す```Application.LoadLevel```は非推奨ですと警告されました。

![loadlevel.png](https://qiita-image-store.s3.amazonaws.com/0/233011/b9ccad74-1e0c-ad28-9a82-668cd921d96d.png)


# 修正案

Visual Studioが親切に、Use```SceneManager.LoadScene```と教えてくれたので、言われた通りに修正すると、想定どおりに「ゲームタイトルのシーン⇔メインゲームのシーン」に遷移できました。

![loadscene.png](https://qiita-image-store.s3.amazonaws.com/0/233011/f7709abb-e006-c085-a9ed-63bd447c66a0.png)


# 終わりに

どうやらUnity 5.3（2015年12月16日リリース）の頃から、```Application.LoadLevel``` が非推奨になったようです。
自分がギリギリUnityを触ってた頃だったのですが、知らなかったので記事にしました。

他にも、自分が過去に使っていた```Application.LoadLevelAdditive```（遷移前のシーンを残して、他のシーンを呼び出す）も非推奨になっていました。
同じく```Application.LoadLevel```を使用すると、警告は消えます。

まとめると、下のような感じです。

```C#
        // 他のシーンを呼び出す
        Application.LoadLevel("Main"); // 非推奨
        SceneManager.LoadScene("Main"); // OK

        // 遷移前のシーンを残して、他のシーンを呼び出す
        Application.LoadLevelAdditive("Main"); // 非推奨
        SceneManager.LoadScene("Main", LoadSceneMode.Additive); // OK

        // 現在読み込んでいるシーンを再読込
        Application.LoadLevel(Application.loadedLevel); // 非推奨
        SceneManager.LoadScene(SceneManager.GetActiveScene().name); // OK
```
Bootstrap 4 の Grid system が safari でカラム落ちする

Bootstrap 4 の Grid system を Bootstrap 3 と併用すると、 safari でカラム落ちします。

原因は、 ```.row``` の擬似要素 ```::before``` , ```::after``` です。

回避方法（ SCSS ）

```
  .row
  {
    &::before,
    &::after {
      display: none;
    }
  }
```

で bootstrap 3 の micro-clearfix をリセットする。
C#はテキストと画像を含むPowerPointドクムを生成 

PowerPointドキュメント（スライド）は、一般的なプレゼンテーションのドキュメントであり、スピーチ、教育、製品のプレゼンテーションなどの面で広く応用されている。この文は、簡単なPowerPointファイルを作成する方法を紹介します。

以下のコードを使用する前に必要：

1. ダウンロード[Free Spire.Presentation](https://www.e-iceblue.com/Download/download-presentation-for-net-free.html)，インストール経路から引用Spire.Presentation.dllアプリケーション.
2. 名のスペースを引用する：

```
using Spire.Presentation;
using Spire.Presentation.Drawing;
```
簡単なPowerPointドキュメントを作成

```
// 新しいPowerPointドキュメントを作成します（デフォルトの1ページの空白のスライドを含む） Presentation ppt = new Presentation();

 //スライドサイズと方向を設定
 ppt.SlideSize.Type = SlideSizeType.Screen16x9;
 ppt.SlideSize.Orientation = SlideOrienation.Landscape;

 //スライドに背景画像を設定する
 string ImageFile = "background.png";
 RectangleF rect = new RectangleF(0, 0, ppt.SlideSize.Size.Width, ppt.SlideSize.Size.Height);
 ppt.Slides[0].SlideBackground.Fill.FillType = FillFormatType.Picture;
 IEmbedImage image = ppt.Slides[0].Shapes.AppendEmbedImage(ShapeType.Rectangle, ImageFile, rect);
 ppt.Slides[0].SlideBackground.Fill.PictureFill.Picture.EmbedImage = image as IImageData;

 //第1枚のスライドにパターンを追加
 IAutoShape textboxShape = ppt.Slides[0].Shapes.AppendShape(ShapeType.Rectangle, new RectangleF(50, 70, 600, 100));
 textboxShape.ShapeStyle.LineColor.Color = Color.Transparent;
 textboxShape.Fill.FillType = Spire.Presentation.Drawing.FillFormatType.None;

 //図形の段落をクリアする（デフォルトの空白がある）
 textboxShape.TextFrame.Paragraphs.Clear();

 //図形に段落と内容を追加する
 textboxShape.TextFrame.Paragraphs.Append(new TextParagraph());
 textboxShape.TextFrame.Paragraphs[0].TextRanges.Append(new TextRange("Spire.Presentation for .NET"));
 textboxShape.TextFrame.Paragraphs[0].SpaceAfter = 50f;

 //第2段の内容を追加
 textboxShape.TextFrame.Paragraphs.Append(new TextParagraph());
 string text = "プロフェッショナルのPowerPointコンポーネントは、PowerPointドキュメントの生成、読み取り、書き込み、修正、変換、印刷などの操作を行うことができます。";
 textboxShape.TextFrame.Paragraphs[1].TextRanges.Append(new TextRange(text));

 //段落中の文字のフォント、サイズ、色、段落の揃え方、段首が距離を縮める
 foreach (TextParagraph para in textboxShape.TextFrame.Paragraphs)
 {
     para.TextRanges[0].LatinFont = new TextFont("Arial Rounded MT Bold");
     para.TextRanges[0].FontHeight = 13f;
     para.TextRanges[0].Fill.FillType = FillFormatType.Solid;
     para.TextRanges[0].Fill.SolidColor.Color = Color.Black;
     para.Alignment = TextAlignmentType.Left;
     para.Indent = 35;
 }

 //ファイルを保存する
 ppt.SaveToFile("CreatPPT.pptx", FileFormat.Pptx2013);  
```

効果図:
![Create PowerPoint.png](https://qiita-image-store.s3.amazonaws.com/0/278784/41cc0ebb-f8aa-df4a-777a-56e0c854581c.png)

総括する
ネットでPowerPointの部品を操作するのは多くありません，Free Spire.Presentation優勢は無料で使いやすい，機能がそろっている，ただ、無料版だけで10枚のスライドを処理する制限があります，普通の利用者にとっては十分だ，より大きなスライドドキュメントを操作する必要がある場合，[ビジネス版もあります](https://www.e-iceblue.com/Download/download-presentation-for-net-now.html)，ページ制限はない。
平面上の2つのベクトルのなす角を求める

#### 数学公式
- **ベクトルの大きさ（長さ）**
$$ \mid \vec{a} \mid = \sqrt{a_1^2 +a_2^2} $$
- **内積の定義**
$$ \vec{a} \cdot  \vec{b} = \mid \vec{a} \mid \mid \vec{b} \mid \cos \theta $$
- **内積の代数的定義**
$$ \vec{a} \cdot  \vec{b} = a_1b_1 + a_2b_2 $$
- **ベクトルのなす角**   
内積の定義より、
$$ \\cos \theta  = \frac{\vec{a} \cdot  \vec{b}}{\mid \vec{a} \mid \mid \vec{b} \mid} = \frac{a_1b_1 + a_2b_2}{\sqrt{a_1^2 +a_2^2}\sqrt{b_1^2 +b_2^2}} $$
$$ \theta  = \cos^{-1}\left(\frac{a_1b_1 + a_2b_2}{\sqrt{a_1^2 +a_2^2}\sqrt{b_1^2 +b_2^2}}\right)$$


<img src="https://qiita-image-store.s3.amazonaws.com/0/384860/416fa92e-0789-6cf3-016f-fe1c034eb7f0.png width=50%>

---
#### AutoLISPで求める
```scheme
;; ベクトルの大きさを計算
(defun vector:Norm (v) (sqrt (apply '+ (mapcar '* v v))))
;; ベクトルの内積を計算
(defun vector:DotProduct (v1 v2) (apply '+ (mapcar '* v1 v2)))
;; アークコサインを計算
(defun math:Acos (r) (if (<= -1. r 1.) (atan (sqrt (- 1. (* r r))) r)))
;; 2つのベクトルのなす角を計算
(defun vector:GetFormedAngle (v1 v2)
    (math:Acos 
        (/ 
            (vector:DotProduct v1 v2) 
            (* (vector:Norm v1) (vector:Norm v2)))
    )
)
;; < Example >
(vector:GetFormedAngle '(3 -1) '(-1 2))
;; -> 2.35619 (135°)
```

---
#### AutoCAD .NET (C#) で求める
``` Vector2d ``` 構造体を使う。

```csharp
using Autodesk.AutoCAD.Geometry;
// 2つのベクトルのなす角を計算
public static double GetFormedAngle(Vector2d v1, Vector2d v2) {
    return Math.Acos(v1.DotProduct(v2) / (v1.Length * v2.Length));
}
// < Example >
var v1 = new Vector2d(3, -1);
var v2 = new Vector2d(-1, 2);
GetFormedAngle(v1, v2);
// -> 2.35619 (135°)
```

---
#### ObjectARX (C++) で求める
``` AcGeVector2d ``` クラスを使う。

```cpp
// 2つのベクトルのなす角を計算
static double getFormedAngle(AcGeVector2d v1, AcGeVector2d v2) {
    return acos(v1.dotProduct(v2) / (v1.length() * v2.length()));
}
// < Example >
auto v1 = AcGeVector2d(3, -1);
auto v2 = AcGeVector2d(-1, 2);
getFormedAngle(v1, v2);
// -> 2.35619 (135°)
```
[初心者向け]vuecliなしで簡単にテスト用の為にvuetifyを使う方法

> 引用 : https://vuetifyjs.com/en/getting-started/quick-start

#1.まず基本的なhtmlの基本枠を作成する。

```html:index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>

</body>
</html>

```

#2.Vuetifyを使う為にvuetifyにリンクを貼る。
```html:index.html
<!DOCTYPE html>
<html>
<head>
 <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
 <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>

 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
 <script>
 </script>
</body>
</html>

```

#3.bodyにidを指定したdivを追加して下に追加するscriptを追加したら完成です。
```html:index.html
<!DOCTYPE html>
<html>
<head>
 <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
 <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
 <div id="app">
    <v-app>
    <!-- ここにソースを書き始めます。 -->
    </v-app>
 </div>

 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
 <script>
 new Vue({
   el: '#app' 
   //ここにdataやらmethodやらを追加して下さい
 })
 </script>
</body>
</html>

```
【PL/SQL】テーブルをまるごとコピー(CREATE TABLE SELECT)

#テーブルをまるごとコピー(CREATE TABLE SELECT)
##やりたいこと
テーブル定義やデータのバックアップのためにコピーを行う。

##サンプルコード
`copy`コマンドなどはなく、`CREATE TABLE`を使用します。
`NOLOGGING PARALLEL`とつけると高速化すると思ってください。

```SQL
-- テーブル定義、データを含めコピー
CREATE TABLE table_copy NOLOGGING PARALLEL
 AS SELECT * FROM table_original;
```

##活用例
下記URLの差分確認などを使用し、同じテーブルで処理前後の差分比較などに使用します。
[【PL/SQL】SELECT結果の差分確認(MINUS)](https://qiita.com/t-kikuchi/items/9f3b8eb041d17b96c8dc)
レコード数が多い場合など、比較確認が難しい場合に便利です。
AndroidでRxを利用したクラスをテストするのに便利な拡張関数を作った-assertValueWith-

AndroidでRxを利用したクラスのテストをする際にちょっと手間だったことがあったので拡張関数を作ってみました。
※junit, robolectric, mockito, AssertionLibraryは[kluent](https://github.com/MarkusAmshove/Kluent)を利用しています。

# 面倒だったこと
## テスト対象
- 通信して結果を取ってくるHogeUseCaseがあるとして、そのテストをしたい。
- HogeUseCaseは結果をSingleで返してくるとする。
- HogeUseCaseにはHogeRepositoryをDIでInjectしている。

```kotlin:HogeUseCase.kt

class HogeUseCase @Inject constructor(private val repository: HogeRepository) {
    fun requestHoge(): Single<HogeResponse>  {
        return repository.requestHoge().subscribeOn(Schedulers.io())
    }
}

```

## テストクラス
テストを書くと下記のようになります。


```kotlin:HogeUseCaseTest.kt
class HogeUseCaseTest {
    private val hogeRepository: HogeRepository = mock()
    @Test
    fun requestHogeTest() {
        whenever(hogeRepository.requestHoge()).thenReturn(Single.just(HogeResponse("connection success", "200")))
        HogeUseCase(mock())
            .requestHoge()
            .test()
            .assertNoErrors()
            .assertValue { response ->
                try {
                    response.message shouldEqual "connection success"
                    response.resultCode shouldEqual "200"
                    true
                } catch (e: AssertionError) {
                    e.printStackTrace()
                    false
                }
    }
}
```
assertValueは処理ブロックを渡すことで中で要素の検証をするのですが、テスト成否をtrue/falseで返さなければなりません。
なので、中で検証するとなると、AssertionErrorをcatchした上でfalseを返す必要があります。
これが面倒だったので拡張関数化してみました。

# 作った拡張関数
assertValueはBaseTestConsumerにあるので、そこに拡張関数を作ります。

```kotlin:BaseTestConsumerExt.kt
fun <T, U : BaseTestConsumer<T, U>> BaseTestConsumer<T, U>.assertValueWith(verification: (T) -> Unit): U {
    return assertValue {
        try {
            verification(it)
            return@assertValue true
        } catch (e: AssertionError) {
            e.printStackTrace()
            return@assertValue false
        }
    }
}
```
使い方

```kotlin
@Test
fun requestHogeTest() {
    whenever(hogeRepository.requestHoge()).thenReturn(Single.just(HogeResponse("connection success", "200")))
    HogeUseCase(mock())
                .requestHoge()
                .test()
                .assertNoErrors()
                .assertValueWith { response ->
                    response.message shouldEqual "connection success"
                    response.resultCode shouldEqual "200"
                }
```

# 最後に
少し面倒だった処理を拡張関数にしてスッキリさせてみました。
もっといいやり方や、メソッドが用意されているなどありましたら教えていただけると幸いです。
Vs Codeのインデント折りたたみのショートカットが変わった

バージョンは1.32。

## これまでは ctrl + shift + [
これで動作させようとしたら、なぜか折りたたまれない。

## これからは cmd + k & cmd + [
二段階でコマンド入力しなければならないので、
ちょっと面倒くさいような。

公式の資料に書いてありました。
https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf

## 前のショートカットが使いたい場合
Macでは
Code > 基本設定 > キーボードショートカット　を参照。

Windowsだと最初が「設定」でしょうか...？

いっぱいあってどれだかわからない。
そこで**「再帰的」**で検索。

「再帰的に展開する」、「再帰的に折りたたむ」の２項目を
好きなキーバインドに設定して完了！
【PL/SQL】SELECT結果の差分確認(MINUS)

#データの差分確認(MINUS)
##やりたいこと
SELECT結果の差分の取得
または
SELECT結果に差分が存在しないことの確認

##サンプルコード
`MINUS`関数は前後の項目が一致する場合に差分が存在するかを比較します。
差分の検出は(SELECT) - (SELECT)となるため、対応を逆にしてUNION ALLしています。

```SQL
-- table_original - table_copy
SELECT * FROM table_original
MINUS
SELECT * FROM table_copy
UNION ALL
-- table_copy - table_original
SELECT * FROM table_copy
MINUS
SELECT * FROM table_original
```
##活用例
下記URLのテーブルコピーと併用し、同じテーブルで処理前後の差分比較などに使用します。
[【PL/SQL】テーブルをまるごとコピー(CREATE TABLE SELECT)](https://qiita.com/t-kikuchi/items/01db10efc6e4d1d79661)
レコード数が多い場合など、比較確認が難しい場合に便利です。
GR-CitrusでLチカ

ルネサスのがじぇるねボードGR-CitrusでLチカです。
GR-Citrusとは何ぞや？
Rubyが気軽に使えるRX631が載っているマイコンボードです。
http://gadget.renesas.com/ja/product/citrus.html

今回は、Lチカです。
少し説明を加えて書いてみました。

まずは、ブレッドボードにさしていきましょう。
残念な事にUSBケーブルと当たってしまうのでブレッドボードをフルに使えません。
![GR-Citrus-1.jpg](https://qiita-image-store.s3.amazonaws.com/0/285344/8ac52ec7-5262-de44-032d-c2f9fd595bc1.jpeg)
![GR-Citrus-2.jpg](https://qiita-image-store.s3.amazonaws.com/0/285344/eda9c36d-b98d-22c8-88fb-d59631904512.jpeg)
次にLEDと抵抗、ジャンパーケーブルを用意します。
![GR-Citrus-3.jpg](https://qiita-image-store.s3.amazonaws.com/0/285344/d3d883ca-0e25-e37a-d342-ab68b603e9c0.jpeg)
![GR-Citrus-4.jpg](https://qiita-image-store.s3.amazonaws.com/0/285344/80de8de9-142a-d35b-0121-f4f3a38ef3c4.jpeg)
まずは、USBを接続するとLEDが光るようにしましょう。
５Vの端子の上にジャンパーケーブルを差します。
反対側は左側の列に指します。
次に、そのひとつ下に抵抗の片側の足を差し、反対の足を一つ左側に刺します。
LEDの足の長いほうを抵抗の左足のひとつ下に差し、LEDの短いほうの足をさらにひとつ左に差します。
最後に、ジャンパーケーブルをその上と、GNDの上に差します。

これで、USBケーブルをさすとLEDが点灯するはずです。
![GR-Citrus-WIre-1.jpg](https://qiita-image-store.s3.amazonaws.com/0/285344/3826278e-5c84-037b-b513-1749e2e77c20.jpeg)



![GR-Citrus-5.jpg](https://qiita-image-store.s3.amazonaws.com/0/285344/53c71d05-24dc-43f4-9c93-125ee6b4109b.jpeg)
ブレッドボードは、上側と下側に別れて、縦に1列ごとに繋がっていますが
横方向には繋がっていません。（赤色の線が繋がっているところです）
![GR-Citrus-10.jpg](https://qiita-image-store.s3.amazonaws.com/0/285344/33f3bae3-086d-c0a7-134d-6f2d5741df87.jpeg)

５Vは抵抗を通る事で２V程度まで電圧を低くし、LEDを通り、０Vになり、GNDと繋がります。
LEDはプラス（＋）からマイナス（－）には電気を流しますが、逆には電気を流しません。
LEDを逆につなげてもLEDはつかないだけでなく、電気も流れません。（ためしにテスターではかってみてください）

それでは、次に、プログラムを書いてみるためにP12とP13を使用してみましょう。
今度は、５Vから抵抗を通り、LEDを繋げますが、最後にP12とP13を繋げます。
![GR-Citrus-6.jpg](https://qiita-image-store.s3.amazonaws.com/0/285344/c97e90ac-4381-5278-906b-8de57334cc9e.jpeg)

P12→抵抗→LED→GND
P13→抵抗→LED→GND
写真では、抵抗の後のLEDから分岐しています。

P12とP13をとする回路を構築します。
![GR-Citrus-WIre-2.jpg](https://qiita-image-store.s3.amazonaws.com/0/285344/79bc6671-8188-679d-351e-757749c70c9a.jpeg)


５Vや3.3VをHiとして０VをLoと識別します。
P12,P13が５Vである場合、電位差が発生し、LEDが点灯します。
P12,P13が０Vの場合は電位差が発生しないためLEDは点灯しません。

それではプログラムを書いて見ましょう
http://tool-cloud2.renesas.com/index.php

今回は、Webコンパイラを使います。
http://gadget.renesas.com/ja/product/citrus_sp2.html

```
/* GR-CITRUS Sketch Template V1.00を基にするよ*/

#include <Arduino.h>

void setup(){
	pinMode(PIN_LED0, OUTPUT);	//LEDを出力にするよ
	pinMode(1, OUTPUT);		//Pin1を出力にするよ
	pinMode(18, OUTPUT);		//Pin18を出力にするよ
}

void loop(){
	
	digitalWrite(PIN_LED0, HIGH);	//LEDをHi(5V)にするよ
	digitalWrite(1, HIGH);		//Pin1をHi(5V)にするよ
	digitalWrite(18, LOW);		//Pin18をLo(0V)にするよ
    delay(100);				//このまま待機
    
	digitalWrite(PIN_LED0, LOW);	//LEDをLo(0V)にするよ
	digitalWrite(1, LOW);		//Pin1をLo(0V)にするよ
	digitalWrite(18, HIGH);		//Pin18をHi(5V)にするよ
    delay(100);				//このまま待機
	}

```
Docker Quickstart Terminalの初回起動でエラー

#はじめに
docker初心者の私が、dockerの初回起動で出たエラーにハマったので、その解決策を共有したいと思います。同じような現象で悩まれた方がこの記事で解決してくれることを願います。

#どんなエラーか
Windows 10 Home 64bitにDocker Toolboxをインストールして
Docker Quickstart Terminalを起動させたら、以下のエラーメッセージがでました。

>Error creating machine: Error in driver during machine creation: Error setting up host only network on machine start: 
(中略)
´Checking if machine default exists´... Press any key to continue...

調べて対処方法をいくつか試しましたが、状況は変わらず仕舞い。

しょうがないので、自分でいろいろいじくっている内に解決したので、同じような境遇の人は以下の方法を試してみてください。
(ちなみにdocker toolboxを使った環境構築については調べればたくさんあるので、自分にわかりやすいものを選んでもらえればいいと思います。私は以下の記事を参考にしました。)
https://qiita.com/idani/items/fb7681d79eeb48c05144

#解決方法
うまくいった方法とは、
「Docker ToolboxにVirtualBox,gitをインストールさせず、個別にVirtualBox,gitを管理者権限でインストールする」やり方です。

Docker Toolboxのsetupで、途中この画面が出てきます。
![DockerSetup.png](https://qiita-image-store.s3.amazonaws.com/0/381951/02b25767-ec0e-993f-4bd5-77fc4b9b1979.png)

ここで、VirtualBox,gitを各々公式サイトから自分でインストールし、Docker ToolboxのsetupでVirtualBox,gitのチェック欄から外してインストールすれば、問題なく起動します。

つまり手順としては、
 0.VirtualBox,git,DokerToolboxをアンインストール
 1.VirtualBox,gitを管理者権限でインストール(右クリックで管理者権限の指定可能)
 2.DockerToolboxをVirtualBox,gitの欄を外して管理者権限でインストール

インストールした後、その都度再起動をいれるとなおいいと思います。
urlをreverseで受け入れる方法

#まずurlを指定する

```python:url.py
from django.conf.urls import url
from .views import MyView

urlpatterns = [
   url('main/', MyView.archive, name="main")
]
```

#その後urlを指定するための他のページで[reverse](https://docs.djangoproject.com/en/2.1/ref/urlresolvers/)を使って読み込む

```python:views.py
from .urls import urlpatterns
from django.views.generic import View
from django.core.urlresolvers import reverse

class MainClass():
 def __init__(self):
  print(reverse("main"))
  # "main/"出力される
```
ipythonの色が見づらい

色が見づらい．ひたすらに色が見づらい．辛い．
設定を変えました．OSはubuntuです．

参照は[こちら](https://qiita.com/fukuit/items/85b996ad55a1cf30c14c)

# 解決法

まず，下のコマンドを打ち込み，ipythonのconfig設定ファイルを生成し，編集画面に移る．

```terminal
user@user:~$ cd ~
user@user:~$ ipython profile create
# できたよーというようなことが表示される

user@user:~$ emacs ~/.ipython/profile_default/ipython_config.py
```

次に該当のファイル内に

```py
## Set the color scheme (NoColor, Neutral, Linux, or LightBG).
#c.InteractiveShell.colors = 'Neutral'
```

とあるので，

```py
## Set the color scheme (NoColor, Neutral, Linux, or LightBG).
c.InteractiveShell.colors = 'Linux'
```

に変更し，保存．

これによって，次回以降ipythonの色が見やすくなる．
Vue + TypeScript でFetchしたい時のIE対応

## 経緯
機械学習を使った推定を返させるWebAPIをPythonで作って、それにリクエストを投げて結果を表示するVueコンポーネントをTypeScriptで作りました。
あとは既存Webページに作ったVueコンポーネントを組み込んで終わりだと思ってたら、あ、またIEだけうまく動かない…ってことでPolyfillを入れました。
備忘録としてPolyfillを入れる方法をメモっておきます。

## 動作環境

#### ブラウザ
- Internet Explorer 11

#### Vueコンポーネント
- vue-cliでTypeScriptを有効にして作成
- Web APIにFetch APIでリクエストを投げて結果を表示

```ts:App.vue
fetch(apiUrl, args)
   .then((response: Response) => {
```

## Polyfillの入れ方

#### Promise
```bash
npm install --save-dev es6-promise
```

```ts:main.ts
import 'es6-promise';
```

#### Fetch API
```bash
npm install --save-dev whatwg-fetch
```

```ts:main.ts
import 'whatwg-fetch';
```

## まとめ
- Fetch APIをIEで動作させるにはPromiseとFetch APIのPolyfillが必要
- vue-cliで作ってTypeScriptで書いたVueコンポーネントに対して簡単にPolyfillを導入できた
JavaFX12でWebViewのClassNotFoundExceptionが出たときの対処メモ

# はじめに
WebViewを使っているとき、JDK12+OpenJFX12で実行したとき、
ClassNotFoundExceptionが出たので対処のメモです。

# Eclipse上の対処
[Run Configurations...]-[Arguments]-[VM arguments]に以下を加えてエラーが出なくなりました。

```
--module-path "C:\Program Files\Java\javafx-sdk-12\lib" 
--add-modules javafx.controls,javafx.web
--add-exports javafx.base/com.sun.javafx.logging=ALL-UNNAMED
--add-exports javafx.graphics/com.sun.glass.ui=ALL-UNNAMED 
--add-exports javafx.graphics/com.sun.glass.utils=ALL-UNNAMED 
--add-exports javafx.graphics/com.sun.javafx.application=ALL-UNNAMED 
--add-exports javafx.graphics/com.sun.javafx.font=ALL-UNNAMED 
--add-exports javafx.graphics/com.sun.javafx.geom=ALL-UNNAMED 
--add-exports javafx.graphics/com.sun.javafx.geom.transform=ALL-UNNAMED 
--add-exports javafx.graphics/com.sun.javafx.scene=ALL-UNNAMED 
--add-exports javafx.controls/com.sun.javafx.scene.control=ALL-UNNAMED 
--add-exports javafx.graphics/com.sun.javafx.scene.input=ALL-UNNAMED 
--add-exports javafx.graphics/com.sun.javafx.sg.prism=ALL-UNNAMED 
--add-exports javafx.graphics/com.sun.javafx.text=ALL-UNNAMED 
--add-exports javafx.graphics/com.sun.javafx.tk=ALL-UNNAMED 
--add-exports javafx.graphics/com.sun.javafx.util=ALL-UNNAMED 
--add-exports javafx.graphics/com.sun.prism=ALL-UNNAMED 
--add-exports javafx.graphics/com.sun.prism.paint=ALL-UNNAMED 
--add-exports javafx.graphics/com.sun.scenario.effect=ALL-UNNAMED
```

# 参考URL

https://www.reddit.com/r/JavaFX/comments/a3xjxy/how_to_run_controlsfx_java_11_and_javafx_11/
https://stackoverflow.com/questions/53215814/javafx11-java-lang-classnotfoundexception-com-sun-media-jfxmedia-events-players/53275389?noredirect=1#comment93434728_53275389
サーバーサイドしかやってこなかったエンジニアがポートフォリオを作った話

# はじめに
最近、QiitaやITの記事などでクリエイターの方がポートフォリオを作成したという記事をよく目にします。
実際に作成したポートフォリオを拝見させてもらうと、自分の経歴やスキル、成果物を素晴らしいデザインでサイトに載せ、世にしっかりと自分自身をアピールしているなーと感じました。
そこで、自分もポートフォリオを作ってみようと思い立ち、さっそく着手しましたが、肝心なことを忘れていました。

**フロントエンドなんてやったことないよ・・・・**

私の仕事を振り返ると、SEとして約10年間、ずっとサーバサイドの仕事しかしてきませんでした。
DBの構築・チューニングやサーバサイドのプログラミング、Webアプリケーションのデプロイや運用管理などがプロジェクトにおける主な役割です。
フロントエンドは外部に委託することがほとんどの為、デザインは全くできません。
一応、JQueryは長い間使っていたため、一通りの実装はできますが、cssはピンポイントでしか触ったことが無く、凝ったポートフォリオなんて夢のまた夢です。

しかし、**ポートフォリオとは自分のスキルを表現するモノ**のはずなのに、デザイン経験が無い自分が果たしてデザインを重視すべきかという疑問を抱きました。

結局「そもそもデザインなんてやったことないから、凝ったポートフォリオなんて必要ない！それよりも、サーバサイドの技術をアピールできるようなポートフォリオを作成すべし！」という結論に至り、デザインを投げて作成することにしました。

# できたもの
現在は都合上閉鎖しています

サーバサイドの技術なら、まずログイン機能は必要だろうと思い、ログイン式のポートフォリオにしています。
**下記のID・パスワードでログインできます。**

```
ID：user
PW：user
```

# 構想案
まず、ポートフォリオに載せたい機能を考えて列挙してみました。

- フロントエンドで人気の「Vue.js」を使用したい
- 流行ってるSPA(Single Page Application)にしたい
- レスポンシブデザインにしたい
- サーバサイドは慣れているSpring Bootを使いたい
- セキュリティは強固にしたい
- RESTful APIにしたい
- DockerでWebアプリケーションをデプロイしたい
- リバースプロキシ使いたい
- 見栄えは最低限でよい

ポートフォリオに上記の機能を持たせられれば、自分のスキルの証明にもなるはずと思い、このような構想になりました。

#実際に使ったもの
 - Vue.js
 - Webpack
 - Spring Boot
 - Spring Security
 - Gradle
 - MySql
 - Docker
 - Nginx

細かく上げるときりがありませんが、大枠は上記です。
バージョン等は今後、詳細記事を載せる際に記載する予定です。

# デザインについて
冒頭で述べたように、自分はデザインができませんので、無料のテンプレートを採用しました。
テンプレートはこちらで探しました。
[creative-tim][2]
[2]:https://www.creative-tim.com/
[ferret][3]
[3]:https://ferret-plus.com/8517

# 実装できた機能
#### フロントエンド
- SPA (Single Page Application)
- https化 (SSL対応)
- レスポンシブデザイン
- かっこよさげなテンプレートの利用 → デザインスキルが皆無でも何とかなりました

#### バックエンド
- DBを参照するログイン機能
- CORS (Cross-Origin Resource Sharing) 対策
- CSRF (cross-site request forgeries) 対策
- 実行できるAPI・表示メニューをユーザ権限によって制御
- RESTful API

### インフラ
- Dockerを利用したWebアプリケーションのデプロイ
- GCPでのリリース
- リバースプロキシの設定

普通のwebサービスとしてもリリースできるような運用環境となりました。
※ GCPのスペックを上げればの話ですが・・・

# リリースまでの手順
1. Vue.jsでフロントエンドを作成し、Webpackでビルド。
2. バックエンドにフロントエンドのモジュールを取り込み、gradleでビルド。
3. 出来上がったjarファイルをDockerfileを使ってビルド。（ビルド自体はdocker-hubに任せました）
4. GCEの作成時、コンテナイメージにdocker-hubを参照するよう設定し、リリース
5. Nginxをリバースプロキシに使い、ポートの転送設定

※ ドメインはお名前ドットコムで取得し、サーバ証明書はLet's Encryptで取得しました。

# とりあえずここまで
使用した技術は今後Qiitaの記事として一つ一つをピックアップして投稿する予定です。
git-hubについては要望があれば載せます。
もそ、プログラミングを学ぶ【Ruby & Rails復習編】【インスタンス変数】〜@があるとき、ないとき〜

相変わらずRailsに苦戦中の もそ。
以前書いたコードを一行ずつ分解して復習していますが、改めて見てみると理解があいまいで全然説明できない...。
マトリックスのネオみたいに、私にもプログラミングスキルをインストールしてほしい...。

今日は**ローカル変数**と**インスタンス変数**について書いていきます。

##ローカル変数
プログラムの一部分でしか利用できない変数のこと。
Railsの場合だと、たとえばコントローラファイル内で記述すればコントローラファイル内のみで利用できます。




```tweets_controller.rb
  def destroy
    tweet = Tweet.find (params[:id])
    if tweet.user_id == current_user.id
      tweet.destroy
    end
  end

```

こんな感じで、**変数名のみを記述**します。

##インスタンス変数
クラス内の共通の属性として、インスタンスに定義できる変数のこと。
以前、[たい焼きにたとえて説明した](https://qiita.com/moso/private/9cb367c0b47811e5cbd5)アレです。

インスタンス変数は、



```tweets_controller.rb
  def edit
    @tweet = Tweet.find(params[:id])
  end
```
こんな感じで**頭に@をつけて表記**します。

##で、どう違うの？
とりあえずいろんな種類の変数があることは分かりましたが、いまいち違いのわからない もそ。

<img width="375" alt="無題1160.jpeg" src="https://qiita-image-store.s3.amazonaws.com/0/372174/794a7976-4ef2-cce8-61e0-19f098a94319.jpeg">

「え？一緒じゃん？」とか思いがちですが、もちろんこの２つは性質がまったく違います。
(というか性質が一緒だったらわざわざ違う名前と表記にするメリットないですからね...)


さきほど、ローカル変数は**限られた場所でしか利用できない**と書きました。
ということは、インスタンス変数はその逆で**他のファイルでも使う場合**に使います。

もう一度インスタンス変数の書かれたコードを参照してみます。




```tweets_controller.rb
  def edit
    @tweet = Tweet.find(params[:id])
  end
```

この記述はtweets_controller.rbというファイルに記述されています。
ということは、ここでコントローラのアクションを定義しているわけですよね。

Railsの処理の流れとして、コントローラはビューに表示をさせる情報を渡します。
つまり、**対応するビューファイルに@tweetというインスタンス変数を渡さないといけません**。
今回の場合だとview/tweets/edit.html.erbというファイルにインスタンス変数を渡しています。

たとえばdestroyアクションで内容を確認せずに削除する場合は、ローカル変数を使います。
でももし削除内容を確認する画面を表示したい場合は、インスタンス変数を使います。


--
いかがだったでしょうか。
前回はparamsについて書きましたが、私はどうもこの変数の理解がふわふわしているようです。
こんなんでロープレやって大丈夫なのか...？ていうか普通に無理ちゃう？？
そんな不安を拭えぬまま、今日もコードと睨めっこを続けるもそであった...続く。
Railsチュートリアル　7章　ユーザー登録

##create

ユーザー登録では、controllerに

```ruby:
def create
  @user = User.new(params[:user])
end
```
とする必要がある
この**params[:user]**はpostリクエストの**ハッシュ値が**渡される

```ruby:
"user" => { "name" => "Foo Bar",
            "email" => "foo@invalid",
            "password" => "[FILTERED]",
            "password_confirmation" => "[FILTERED]"
          }
```

##ただし
実は**params[:user]にそのまま値を渡してしまうと非常に危険**である
例えば

```ruby:
admin='1'
```
これは管理者権限を持つ者だけが1を得ることができる
もしparamsに値がそのまま送れるとすれば、admin='1'を挿入するだけで管理者権限を奪われてしまう

そのためには
##Strong Parametars
このStrong Parametarsというのは、**必須のパラメータと許可されたパラメータを指定することができる**
更に、**paramsハッシュをそのまま渡すとエラーが発生する**ため、脆弱性から守られるようになった

>この場合、paramsハッシュでは:user属性を必須とし、名前、メールアドレス、パスワード、パスワードの確認の属性をそれぞれ許可し、それ以外を許可しないようにしたいと考えています。これを行うには、次のように記述します。

```ruby:
params.require(:user).permit(:name, :email, :password, :password_confirmation)
```

これで許可された属性のみがparamsハッシュとなる(:user属性がない場合はエラーになります)。

##shared
Railsの慣習として、**複数のビューで使われるパーシャルは専用のディレクトリ「shared」に置かれる**

```ruby:app/views/shared
```

##pluralize
pluralizeメソッドは**最初の引数に整数が与えられると、それに基づいて二番目の英単語を複数形にする**

```ruby:
>> helper.pluralize(1, "error")
=> "1 error"
>> helper.pluralize(5, "error")
=> "5 errors"
```
###assert_no_difference
assert_no_differenceメソッドのブロック内でpostを使い、メソッドの引数には’User.count’を与えています。これは**assert_no_differenceのブロックを実行する前後で引数の値 (User.count) が変わらないことをテストしています**

##follow_redirect!
このメソッドは、**Postリクエストを送信した結果を見て、指定されたリダイレクト先に移動するメソッド**

```ruby:test.rb
    follow_redirect!
    assert_template 'users/show'
```

この場合は**'users/show'テンプレート**が表示される
自分的JSメソッド集まとめていく用のやつ

自分用のメモ

## splice
古い要素を取り除き、新しい要素を追加するメソッド。

```js

array.splice('開始位置', '削除する個数', '配列に追加する要素')

//　配列の2つめにdrumsを追加する
let myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
myFish.splice(2, 0, 'drums');
// myFish は ["angel", "clown", "drum", "mandarin", "sturgeon"] 


// 配列の1つめを削除するメソッド
let data = [1, 2, 3];
data.splice(1, 1);
// data　は　[1, 3];
```
TimeMachineでセグメントを超えてバックアップをとる

4月から研究室から院生室に移動することになり，研究室のネットワークとは異なるセグメントに接続して作業することになりました．研究室のネットワークとは拠点間VPNで接続されているので，TimeMachineのバックアップもできるかと思っていたのですが，サーバーを発見できないというエラーで失敗していたので，対処法を調べました．

# 環境

* Macbook Air (13-inch, Early 2015)
* High Sierra ( 10.13.6 )
* QNAP NAS

![Memo-8.jpg](https://qiita-image-store.s3.amazonaws.com/0/249063/9056d28c-5cd6-ff49-99b1-babfbe8e34bd.jpeg)


TimeMachineサーバー(QNAP NAS)は固定IPアドレスが振ってある．
各ルータはお互いへのルーティングが可能になっている．
QNAP NASのTimeMachineの設定は割愛する．

# 結論

1. Finder上で cmd + K でサーバに接続
2. 「afp://\<\<IP ADDRESS\>\>/TMBackup」に接続．
3. TimeMachineの設定から，サーバが選択できるようになっている．

# 感想

よくよく考えれば，セグメント違うとブロードキャストパケットが届かないし，TimeMachineサーバが自動で見つからないのは当たり前ではある．しかし，同一セグメントに接続していた頃のようにバックアップを自動で取らないのは不便なので，何か方法を模索したい．
Embarcadero のアカウントサービスへログインしたい

# はじめに

サイトのリニューアルに伴い　**Embarcadero Developer Network (EDN)** へのアクセスがリダイレクトされてしまい、堂々巡りになってしまうことがあります。

:::note
EDN アカウントを新規で作りたい方は以下の記事を参考にしてください。

 - [EDN アカウントを作りたい (Embarcadero Supprt Wiki)](https://docwiki.embarcadero.com/Support/ja/EDN%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%82%92%E4%BD%9C%E3%82%8A%E3%81%9F%E3%81%84)
:::

## 例えば

[edn.embarcadero.com](http://edn.embarcadero.com/) に行ってみます。ページ上部からログインできますのでそこからアカウント管理画面に行ってみましょう...やってみて？

![image.png](https://qiita-image-store.s3.amazonaws.com/0/21785/52b7e789-62ca-f248-185a-852029328de9.png)

...アカウント管理画面に辿り着けなかったのではないでしょうか？**このページの上部からはアカウント管理画面に行けない**事を覚えておくといいと思います。

## クイックリンク

ここから行くといいよ。

■ アカウントの新規作成
https://members.embarcadero.com/newuser.aspx

■ アカウントの管理
https://members.embarcadero.com/

■ アカウントの管理 - アカウント情報の編集
https://members.embarcadero.com/editaccount.aspx

■ アカウントの管理 - ログイン情報の変更
https://members.embarcadero.com/changelogin.aspx

■ アカウントの管理 - OpenID設定の管理
https://members.embarcadero.com/OpenIDList.aspx

■ 登録製品 (ライセンスキー確認)
https://members.embarcadero.com/Products.aspx

■ 登録製品 (ダウンロード)
http://cc.embarcadero.com/myreg

# おわりに

~~IDERA の **Developer Tools Community** をブックマークしとくといいよ。~~
 - ~~https://community.idera.com/developer-tools/~~

IDERA の **Registered Product Portal** をブックマークしとくといいよ。

 - https://my.embarcadero.com
chrome73でCIが落ちる(chrome not reachable)原因と解決法

# ことの始まり
Rubyのバージョンを2.6.2にするタイミングでchromeもchromedriverも最新のものにしようとしていたらCIがコケまくるようになった。

```bash
Selenium::WebDriver::Error::WebDriverError:
            chrome not reachable
              (Session info: headless chrome=73.0.3683.86)
              (Driver info: chromedriver=73.0.3683.68 (47787ec04b6e38e22703e856e101e840b65afe72),platform=Linux 4.4.0-141-generic x86_64)
```

# 原因
chrome_optionsの一部が最新chromeとの互換性を失っていた。(らしい)
https://stackoverflow.com/questions/55222916/selenium-has-stopped-working-chrome-versions-do-not-match

`blink-settings=imagesEnabled=false`
`no-sandbox`
`disable-dev-shm-usage`
のどれかが原因だと思う。
おそらく `disable-dev-shm-usage` が原因...かな。
他の2つはオプションに含めていてもテストが正常に動くとの報告があった。
[puppeteer](https://github.com/GoogleChrome/puppeteer)を使う上で[メモリの関係上必要なもの](https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md#tips)だった？みたい
[すでに修正済み](https://github.com/c0b/chrome-in-docker/issues/1#issuecomment-348334294)で現在は不要。
もしこれでもないとすれば特定の組み合わせで起きるものなのかもしれない。

# 解決法
該当オプションを削除する事で問題なくテストが通るようになった。

```ruby
Capybara.register_driver :selenium do |app|
  Capybara::Selenium::Driver.new(
    app,
    browser: :chrome,
    desired_capabilities: Selenium::WebDriver::Remote::Capabilities.chrome(
      login_prefs: { browser: 'ALL' },
      chrome_options: {
        args: <ここのオプションの中のどれかが原因>,
      }
    )
  )
end
```

取り急ぎ修正の方向性だけ書いておきます。
細かいことはまだわかっていないのでわかり次第追記します。

## 追記

Chromiumのバグだそうです。現在は修正済み。
`--disable-features=VizDisplayCompositor`属性を付けてやると解決すると書いてあります。
https://stackoverflow.com/questions/55388995/chrome-73-stop-supporting-headless-mode-in-background-scheduled-task

# 余談
chromedriver-helperがサポートを終了するようです。
webdriversに移行するようにとのことです。
https://github.com/flavorjones/chromedriver-helper/issues/83
Google Drive Android API と Google Play Games Services の Saved Games は死ぬ

# TL;DR
Google Drive Android API は死ぬし、その結果 Google Play Games Services の Saved Games も死ぬ。等価な代替手段はない。金払って Firebase(Cloud Firestore とか)使え

## Google Drive Android API が今年(2019年)12月6日に死ぬ(Google Drive Android API Deprecation on Dec 6, 2019)
- https://developers.google.com/drive/android/deprecation

　Android で良い感じに動く Google Drive の機能が死にます。これは Android で良い感じに動く機能であり、その代替先として Android に限らない、どこでも動く汎用的な REST API があります。

- https://developers.google.com/drive/api/v3/about-sdk

　これを使えば、単なる Google Drive と連携してるアプリは生き長らえることができるので、ちゃんと移行していきましょう。

　さて、それとは別に Migration の項目をちゃんと確認していきます。

> #### Accessing App Data
> Support for storing and syncing in the <a href="https://developers.google.com/drive/android/appfolder">app data folder</a> will likely be removed from Drive in the future. Clients requiring app data storage are **strongly** encouraged to migrate to a non-Drive solution such as <a href="https://firebase.google.com/docs/firestore/">Cloud Firestore</a>.
> (雑な訳) Google Drive における<a href="https://developers.google.com/drive/android/appfolder">app data folder</a> への保存と同期のサポートは将来的に削除されます。(Google Drive の)app data storage 機能を使っているものは <a href="https://firebase.google.com/docs/firestore/">Cloud Firestore</a>  のような Google Drive ではないものへ移行するのを **強く** オススメします。

　というわけで、 app data folder の機能は将来的に消えるみたいです……と、ここでいきなり Google Play Games Services の Saved Games を見てみましょう。

- https://developers.google.com/games/services/android/savedgames

　なるほどなるほど <a href="https://developers.google.com/android/reference/com/google/android/gms/games/SnapshotsClient#open(com.google.android.gms.games.snapshot.SnapshotMetadata,%20int)">SnapshotsClient.open()</a> を使ってスナップショットから開く、と言うことか……

> `public Task<DataOrConflict<Snapshot>> open (SnapshotMetadata metadata)`
> Required Scopes: SCOPE_GAMES_LITE and <a href="https://developers.google.com/android/reference/com/google/android/gms/drive/Drive#SCOPE_APPFOLDER">SCOPE_APPFOLDER</a>.

**SCOPE_APPFOLDER**......? さっき出てきた **app data folder** じゃねーか！！！ つまり Saved Games の機能も **will likely be removed from Drive in the future** って事じゃん！！！

ついでに言うと 

- https://developers.google.com/android/reference/com/google/android/gms/drive/Drive

> **This class is deprecated.**
>  The Google Drive Android API is deprecated and will be turned down on December 6, 2019. See the migration guide for instructions on migrating to the REST API.

`com.google.android.gms.drive.Drive` クラスも死ぬし、その `static final` フィールドである  
`public static final Scope com.google.android.gms.drive.Drive.SCOPE_APPFOLDER` も死ぬのでは……？ どうなってんの Google Play Games Services...... これ、どこまで信用できるの？ 迂闊に使ってるとまたハシゴ外されたりしない……？


## 結論(再掲)

**Google Drive Android API は死ぬ** し、その結果 **Google Play Games Services の Saved Games も死ぬ** 。等価な代替手段はない。金払って Firebase(Cloud Firestore とか)使え。

### 個人的な感想

Google Play (Game) Services 周りの機能、昔っからずっと不安定というか、隙あらば消えていくので AWS あたりのマイクロサービス組み合わせてやってくのが一番寿命が長いというか、メンテフリーで維持できる気がします。
React NativeのWebViewでBasic認証を突破する方法まとめ

## 問題 Problem
React Nativeで開発していて`BASE_URL`がBasic認証が必要なページのときに、WebViewで表示させたい！
調べたときにあんまり情報なかったので、めちゃ覚え書き程度にさらっと書きました

## 解決法 Solution
 
```react
import React from 'react';
import { WebView } from 'react-native';
import {
  BASE_URL,
  BASIC_AUTH_USER_NAME,
  BASIC_AUTH_PASSWORD,
} from 'react-native-dotenv';

const MyComponent = () => {
  const basicAuthToken = btoa(`${BASIC_AUTH_USER_NAME}:${BASIC_AUTH_PASSWORD}`)

  return (
    <WebView
      source={{
        uri: `${BASE_URL}`,
        headers: {
          Authorization: `Basic ${basicAuthToken}`
        }
      }}
    />
  )
}
```


ポイントは`btoa()`関数で、Basic認証に必要な`username:password`という文字列をBase64エンコードして、`WebView`の`headers`情報に渡します。

```react
const basicAuthToken = btoa(`${BASIC_AUTH_USER_NAME}:${BASIC_AUTH_PASSWORD}`)
```

## 参考
[The WebView has no support for Basic Authentication (or custom headers). · Issue #19200 · facebook/react-native](https://github.com/facebook/react-native/issues/19200)
NetlifyでホスティングしてるSPAがブラウザリロードすると404になっちゃう

# 概要

NetlifyでホスティングしてるSPAがブラウザリロードすると404になっちゃう

# 対応

これの通り
https://www.netlify.com/docs/redirects/#history-pushstate-and-single-page-apps

# 方法

公開用のディレクトリ(自分の場合 `/public`)に `_redirects`ファイルを作成して以下を記述

```
/*    /index.html   200
```

いえい :cop:
ABC - 055 - A&B&C

#AtCoder ABC 055 A&B&C
[AtCoder - 055](https://atcoder.jp/contests/abc055)


##A問題
1食800円で、15食食べる毎に200円もらえるらしい。
大食いチャレンジのようだ。
N食分の総額とチャレンジの賞金を計算する。

 - 総額は $食事×800$
 - 賞金は15食毎に200なので、$N/15×200$

```java

        int numN = nextInt();

        int resX = numN * 800;
        int resY = (numN / 15) * 200;

        out.println(resX - resY);
```

---
##B問題
i回トレーニングするたびにパワーがi倍になる。
つまり、N回トレーニングするとパワーがN!になる。
そして、$N! mod 10^9+7$

 - $N!$を生成
 - $N!$を$10^9+7$で割る

$N!$の時点でprimitiveだと桁あふれの予感しかしないのでBigDecimalで実装。

```java

        int numN = nextInt();

        BigDecimal CONST = new BigDecimal(Math.pow(10, 9)).add(new BigDecimal("7"));
        BigDecimal res = BigDecimal.ONE;
        for (int i = 1; i <= numN; i++) {
            res = res.multiply(new BigDecimal(Integer.toString(i)));
        }

        out.println(res.remainder(CONST));

```

###**このコードはTLEになります**

 - N!を計算している時点でNG

欲しいのは$mod$
ということは、各桁を$mod$していけばよい。
[参考：余りについて](https://qiita.com/drken/items/3b4fdf0a78e7a138cd9a)

```java

        int numN = nextInt();
        long CONST = (long) (Math.pow(10, 9) + 7);

        long res = 1;
        for (int i = 1; i <= numN; i++) {
            res = (res * i) % CONST;
        }

        out.println(res);
```

---
##C問題
'S'と'C'を使って'Scc'を作る。
'C'×2で'S'が出来る。

 - 1S=2Cである。
 - Sと2Cを組み合わせてSが無くなったのちCが余った場合、4C消費すれば'Scc'を作れる。

```java

        long numS = nextLong();
        long numC = nextLong();

        long res = 0;
```

Sの数を元に、'Scc'を作成

```java

        long wk = numC - (numS * 2);
```

wk>=0ということはSを全て消費できたので、残りのCは「4Cで1Sccを作る」ために消費する。

```java

        if (wk >= 0) {
            res = numS + (wk / 4);

```

wk<0ということはnumC/2よりもSの方が数が多いということ。

 - numS > numC/2
 
SをCに変換することは出来ないので、numC/2がそのまま'Scc'の数となる。

```java
        } else {
            res = numC / 2;
        }
        out.println(res);
```
【WordPress・プラグインなし】管理画面にあるデフォルトの「投稿」の名前を変更する方法

管理画面にデフォルトで設定されている「投稿」は別の名前に変更することができます。
![widgets.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253923/750d50fc-53e3-510a-815e-9d36f7f335b4.png)　:arrow_right:　<img width="172" alt="スクリーンショット 2019-04-12 12.18.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253923/4ed06fd6-00b3-975b-f88b-75874b62860c.png">



`functions.php`に以下を追加します。
`$name`に変更したい名前を入れてください。

```functions.php
function change_post_menu_label() {
  $name = '新着情報';
  global $menu;
  global $submenu;
  $menu[5][0] = $name;
  $submenu['edit.php'][5][0] = $name.'一覧';
  $submenu['edit.php'][10][0] = '新しい'.$name;
  $submenu['edit.php'][16][0] = 'タグ';
}
add_action( 'admin_menu', 'change_post_menu_label' );
function change_post_object_label() {
  $name = '新着情報';
  global $wp_post_types;
  $labels = &$wp_post_types['post']->labels;
  $labels->name = $name;
  $labels->singular_name = $name;
  $labels->add_new = '新規追加';
  $labels->add_new_item = $name.'の新規追加';
  $labels->edit_item = $name.'の編集';
  $labels->new_item = '新規'.$name;
  $labels->view_item = $name.'を表示';
  $labels->search_items = $name.'を検索';
  $labels->not_found = '記事が見つかりませんでした';
  $labels->not_found_in_trash = 'ゴミ箱に記事は見つかりませんでした';
  $menu_icon = &$wp_post_types['post']->menu_icon;
  $menu_icon = 'dashicons-star-filled';// アイコン
}
add_action('init', 'change_post_object_label');
```

アイコンは他にもたくさん種類があります。
[https://developer.wordpress.org/resource/dashicons/](https://developer.wordpress.org/resource/dashicons/)
2行のシェルスクリプトのテストコードが60行になった話

うちの開発チームではすべてのプログラムにテストコードを書こうとしています。
pythonをメインに使うので、pytestに慣れています。

ある日、pytestの実行をシェルスクリプトで書こうとしました。
そのシェルスクリプトのテストコードをまたpytestを使って書いてみました。
シェルスクリプトの名前はctestとします。中身はこれだけです。

```
#!/bin/sh
pytest
```

この2行のシェルスクリプトのテストをpytestで書いてみました。

```
import os
import pytest
import subprocess

PATH = os.path.join(os.path.dirname(__file__), '..', 'ctest')


# 共通部分を関数化
def create_dummy_test(tmpdir, result):
    p = tmpdir.mkdir('tests').join('test_dummy.py')
    p.write("""\
def test_dummy():
    assert {}
    """.format("True" if result else "False"))
    os.chdir(tmpdir)


# 成功したらexit 0を返す
def test_exit_0_when_success(tmpdir):
    create_dummy_test(tmpdir, True)

    status = subprocess.call((PATH,))

    assert status == 0


# 失敗したらexit 1を返す
def test_exit_1_when_fail(tmpdir):
    create_dummy_test(tmpdir, False)

    status = subprocess.call((PATH,))

    assert status == 1


# 実行するとpytestが実行される
def test_execute_pytest_when_execute_ctest():
    res = subprocess.run(
        ["/bin/sh", "-x", PATH], stderr=subprocess.PIPE)

    assert b'+ pytest' in res.stderr


# 実行するとfailedと結果が表示される
def test_show_failed_result_when_execute_ctest(tmpdir):
    create_dummy_test(tmpdir, False)

    res = subprocess.run(
        [PATH], stdout=subprocess.PIPE)

    assert b"failed" in res.stdout


# 実行するとpassedと結果が表示される
def test_show_passed_result_when_execute_ctest(tmpdir):
    create_dummy_test(tmpdir, True)

    res = subprocess.run(
        [PATH], stdout=subprocess.PIPE)

    assert b"passed" in res.stdout
```

改行含めて60行になりました。これはさすがにテスト書き過ぎでしょうか。
(終わり)
【WordPress・プラグインなし】デフォルトの「投稿」(post)のアーカイブページを作成する方法

デフォルトの「投稿」（post）のアーカイブ（記事一覧）ページは無効になっているため有効化します。

```functions.php
function post_has_archive($args, $post_type){
	if('post' == $post_type){
		$args['rewrite'] = true;
		$args['has_archive'] = 'news'; //任意のスラッグ名
	}
	return $args;
}
add_filter('register_post_type_args', 'post_has_archive', 10, 2);
```
:heavy_plus_sign:　**設定 > パーマリンク設定 > 変更を保存**

この設定の場合は、`http://サイトURL/news/`でpostの一覧ページが表示できます。
Table/Collection Viewを内包するTable View Cellを作る

あるアイテムの一覧をTable Viewで表現し、各セルに対してアイテム毎に付けられているタグのリストを表示するようなUIコンポーネントの作り方を紹介します。

<img width="50%" src="https://qiita-image-store.s3.amazonaws.com/0/25727/3cb8df99-3771-bc24-a1c1-2abfd7f103a4.gif">

[ソースコード(ViewタブのCollection in the cell)](https://github.com/imk2o/UICatalog/tree/master/UICatalog)

色々な方法が考えられると思いますが、Table View Cellの中にCollection Viewを配置し、各タグをCollection View Cellで表現するという方針で考えてみると、

* 内包するCollection Viewは、表示するタグ(Cell)の数に応じて最適なサイズになること
* Collection Viewを抱える外側のTable View Cellは、Self sizingにより最適なサイズが適用される

## コンテンツに応じてサイズが決まる `UICollectionView`

[こちらの記事](https://qiita.com/imk2o/items/f22db30781f67cb52f9a#画面の一部をリスト化するには)で紹介した方法は、 `UICollectionView` にも適用できます。
`isScrollEnabled` が `false` のとき、 `intrinsicContentSize` が全てのセルが表示される大きさとなります。

```swift:IntrinsicCollectionView.swift
import UIKit

class IntrinsicCollectionView: UICollectionView {
    override var contentSize: CGSize {
        didSet {
            if !self.isScrollEnabled {
                self.invalidateIntrinsicContentSize()
            }
        }
    }
    
    override var intrinsicContentSize: CGSize {
        if self.isScrollEnabled {
            return super.intrinsicContentSize
        } else {
            self.layoutIfNeeded()
            return CGSize(width: UIView.noIntrinsicMetric, height: self.contentSize.height)
        }
    }
}
```

## 内包Collection Viewの更新とSelf sizing

あらかじめ、内包Collection Viewに適宜Auto Layout Contraintsを設定しておきます。

`UITableViewDataSource#tableView(_:cellForRowAt:)` においてセルのセットアップを行う `configure(...)` で

* `UICollectionView#reloadData()`
* `UICollectionView#layoutIfNeeded()`

をコールしておくことで、必要なサイズが伝播し、最適なサイズに調整されるはずです。

```swift:OuterTableViewCell.swift
import UIKit

class OuterTableViewCell: UITableViewCell {
    ...
    
    func configure(...) {

        ...

        // 内包Collection Viewを更新
        self.collectionView.reloadData()
        self.collectionView.layoutIfNeeded()
    }

    ...
}    
```

## おわりに

ここで紹介したCollection Viewを利用した方法は、Cellが自然とUIコンポーネントとして機能するので、汎用性が高く、デザイン変更しやすいやり方であると思います。反面、レイアウト計算の負荷もある程度生じるため、パフォーマンス低下に注意を払ったほうが良いかと思います。
Djangoの使い方～デプロイ編②～

##はじめに
[Djangoの使い方～デプロイ編①～](https://qiita.com/connecrew-sugiyama/items/ce5beafce9201736c39e)の続きです。
今回はデプロイ(インターネット上で実行できるようにする)をやります！
##PythonAnywhere アカウントにサインアップする
PythonAnywhere はインターネット上でpythonを動かすためのサービスです。


[**ここ**](https://www.pythonanywhere.com/)から「Beginner」アカウントにサインアップしましょう(無料枠で大丈夫です)
ちなみにブログのURLは「あなたのユーザー名.pythonanywhere.com」になります

##PythonAnywhere APIトークンの作成
 右上にある「Account」ページへのリンクをクリックし、「API Token」タブを選択し、
「Create new API token」ボタンをクリックして下さい。


これでAPIトークンが作成されました。

##PythonAnywhere でサイトを設定する
トップページに戻り「Bash」をクリックしコンソールを起動します。
PythonAnywhereバージョンのコマンドラインです。


PythonAnywhereにWebアプリケーションをデプロイするには、
コードをGitHubからプル→PythonAnywhereが認識→デプロイ
をする必要があります。これを自動でできるツールがあるのでインストールします。

```ruby:command-line
$ pip3.6 install --user pythonanywhere
```

Collecting pythonanywhere のようなメッセージがいくつか出力され、最終的にSuccessfully installed (...) pythonanywhere- (...)という行で終わります。


次にGitHub からアプリを自動的に構成するためのヘルパーを実行します。
https://github.com/<your-github-username>/my-first-blog.gitの部分はGitHubからクローンしたときのURLと一致します。

```ruby:command-line
$ pa_autoconfigure_django.py https://github.com/your-github-username/my-first-blog.git
```

もしこんなエラーがでたら
```You already have a virtualenv for...
Use the --nuke option if you want to replace it.
```

```ruby:command-line
$ pa_autoconfigure_django.py https://github.com/your-github-username/my-first-blog.git --nuke
```
を入力してみましょう。

これにより以下を自動でやってくれます
・GitHubからコードをダウンロードする
・PythonAnywhere上にvirtualenvを作成する。
・一部のデプロイメント設定で設定ファイルを更新する
・manage.py migrateコマンドを使ってPythonAnywhere上のデータベースをセットアップする
・静的ファイルの設定
・APIを通じてPythonAnywhereがあなたのWebアプリケーションを提供するように設定する


PythonAnywhereとあなたのPC上のデータベースは別物なのでcreatesuperuserで管理者アカウントを初期化します。

```ruby:command-line
(ola.pythonanywhere.com) $ python manage.py createsuperuser
```

混乱をさけるため自分のコンピュータで使用しているのと同じものを使用します。


PythonAnywhereのコードをlsを使ってみることもできます。

```ruby:command-line
(ola.pythonanywhere.com) $ ls
blog db.sqlite3 manage.py mysite requirements.txt static
(ola.pythonanywhere.com) $ ls blog/
__init__.py __pycache__ admin.py forms.py migrations models.py static
templates tests.py urls.py views.py
```

最後にPythonAnywhereの「Web」ページをクリックしてリンクを取得し、
実際に動いているかみてみましょう。
![成功画面.PNG](https://qiita-image-store.s3.amazonaws.com/0/376013/bd8a164c-7306-bc4a-c372-903cf76794fe.png)

URLの最後に/admin/を追加すると、管理サイトに移動します。
これでデプロイができました！
![管理画面.PNG](https://qiita-image-store.s3.amazonaws.com/0/376013/510e9de2-0b3c-46fa-afa9-36c3c4e16e37.png)

##おわりに
次はURLについてです！
次回→[Djangoの使い方～デザイン編①～](e55d7c65c4251b90d12d)
AWSを利用してwordpressサイトを1日で構築した話。


知り合いからWebサイト作ってよと頼まれたので、サクッと構築したときの話です。


## 1. AWSでWordPressウェブサイトの起動
下記手順に従うだけで、wordpressサイトを立ち上げることができます。
https://aws.amazon.com/jp/getting-started/tutorials/launch-a-wordpress-website/

## 2. お名前.comでドメイン取得
欲しいドメインを取得します。
https://www.onamae.com/

## 3. Route53でElasticIPとドメインを紐づける
下記手順に従って対応します。
https://aws.amazon.com/jp/getting-started/tutorials/get-a-domain/

ここまでで、wordpressサイトの構築完了です。

---

ここからは、wordpressのカスタマイズの話になります。

## 4. wordpressテーマ取得
・レスポンシブデザイン対応
・シンプルなテーマが良い
・無償
の点から「Lightning」を採用しました。

## 5. 必要なプラグインをインストールする
・AddToAny Share Buttons (シェアボタン)
　~Facebook、Twitter、Google+、Pinterest、WhatsApp などを含むページのシェアボタン~
・Contact Form 7
　~お問い合わせフォームプラグイン~
・WP Mail SMTP
　~Contact Form 7をインストールしただけでは、メール送信できない対策のため、SMTPサーバ設定を行うプラグイン~
・Imsanity
　~アップロードする画像のリサイズを行うプラグイン~
・Material Design Icons
　~マテリアルアイコンを利用したい~
・MetaSlider
　~簡単にスライドショーが作成できるプラグイン~

---

## 6. 作成したサイト

　こんな感じで簡単に作成できます。
　http://kajunomori.com/