OmniAICreator/Qiita-1.07M huggingface dataset:
俺用メモ python csv グラフ

#はじめに
論文用のグラフを作りたい．
Excelを使うと便利なのだが，，同じ大きさ（幅や高さ）のグラフを量産するのはExcelはどうも苦手らしい．
後々忘れると思うのでメモしておく．
データはCSVで保存されたものを使う．

#やり方
##大まかな流れ
spyderを使う．
pandasとmatplotlibを使う．

csvを読み込む．
読み込んだ値をdfという名前で定義する．
1列目，２列目，３列目にそれぞれ'num1', 'num2', 'num3'という名前を付ける．
printでちゃんとCSVが読み込めているか確認する．
plt.plot(df['num1'], df['num2'],marker="o")　X軸をnum1,Y軸をnum2で書く．マーカーでプロットする．
PNGで保存する．


##コード


import pandas as pd
import matplotlib.pyplot as plt

df = pd.read_csv('4.csv', names=['num1', 'num2', 'num3'])
print(df)
plt.plot(df['num1'], df['num2'],marker="o")
plt.savefig("1.png")
plt.show()


##4.csvの中身．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298521/fd329031-b680-b64f-1c24-ede91bf80722.png)

##結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/298521/1a7f3b47-2478-5d9b-eb31-2620d326ded2.png)

##メモ
3列目は使っていない．
CSVは.pyと同じフォルダに入れておく．


###今後やりたいこと
論文のフォーマットに合わせて編集．
軸ラベルや凡例を入れる
herokuへのpushができない！まずは、local環境で動作するか確かめてみよう。

# はじめに
意気揚々とRailsでwebアプリを作り始めたところ
Precompiling assets failed.が出力されて
`git push heroku master`ができない...
初っ端から躓きました \\(^O^)/

同じようなエラーで悩まされてる方の助けになればと思い、記事を投稿しました。

#結論
localで`rails server`を実行して出力されたエラーに従うことで、解決しました。

# 解決までの道のり
`git push heroku master`を実行したときのエラーは次の通り

```
remote:  !
remote:  !     Precompiling assets failed.
remote:  !
remote:  !     Push rejected, failed to compile Ruby app.
remote:
remote:  !     Push failed
remote: Verifying deploy...
remote:
remote: !       Push rejected to herokuアプリ名.
remote:
To https://git.heroku.com/herokuアプリ名.git
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/herokuアプリ名.git'
```

ネットでヒットした解決策を片っ端から試すも、あえなく撃沈
ふと、`rails server`を試したところ、そもそもlocalでアプリが立ち上がらないことが判明！
設定ファイルいじってるうちにサーバーが起動しなくなってたのね…
エラー内容は次の通り

```
$ rails s
C:/Users/ユーザ名/environment/アプリ名/config/environment.rb:8:in `<top (required)>': undefined local variable or method `config' for main:Object (NameError)
```
エラー文にあったファイルを見ると…

```environment.rb
# Load the Rails application.
require_relative 'application'

# Initialize the Rails application.
Rails.application.initialize!

# compile ON
config.assets.compile = true #この行が悪さをしていた
```

ということで次のようにコメントアウトする。

```environment.rb
# Load the Rails application.
require_relative 'application'

# Initialize the Rails application.
Rails.application.initialize!

# compile ON
# config.assets.compile = true #この行が悪さをしていた
```

すると無事railsサーバーが起動してくれました！

### 背景
本番環境のデータベースとしてPostgreSQLを使う場合は
`config.assets.compile = true`
の追記が必要とどこかの記事で読んだので追加していたのですが、追加するファイルを間違えてました(ﾟ∀｡)ｱﾋｬ

### そして…
localでうまくいったので、変更をgitにpushした後、herokuへもpushできることを祈りつつ、
`git push heroku master`をしたところ
無事、私の`hello world!`を全世界に公開することができました。

## 今回の教訓
remoteでうまくいかない場合は、まずlocalから

灯台下暗しでした！
Groovyでオーバーロード可能な演算子を優先順に

すっきり表記したいから演算子をオーバーロードするのですが、優先順位を意識して設計しないと括弧だらけになってしまいます。

|Usage|Implementation|
|---|---|
|x()|x.call()|
|x[y]|x.getAt(y)|
|x++|x.next()|
|x--|x.previous()|
|~x|x.bitwiseNegate()|
公式ドキュメントにはbitwiseNegateが他と同レベルと書かれているのですが、実際に~x++を実行するとnextの後でした。

|Usage|Implementation|
|---|---|
|x**y|x.power(y)|

|Usage|Implementation|
|---|---|
|+x|x.positive()|
|-x|x.negative()|

|Usage|Implementation|
|---|---|
|x*y|x.multiply(y)|
|x/y|x.div(y)|
|x%y|x.mod(y)|

|Usage|Implementation|
|---|---|
|x+y|x.plus(y)|
|x-y|x.minus(y)|

|Usage|Implementation|
|---|---|
|x<<y|x.leftShift(y)|
|x>>y|x.rightShift(y)|
|x>>>y|x.rightShiftUnsigned(y)|

|Usage|Implementation|
|---|---|
|x in y|y.isCase(x)|
|x as y|x.asType(y)|

|Usage|Implementation|
|---|---|
|x&y|x.and(y)|

|Usage|Implementation|
|---|---|
|x^y|x.xor(y)|

|Usage|Implementation|
|---|---|
|x&#x7C;y|x.or(y)|

|Usage|Implementation|
|---|---|
|x[y] = z|x.putAt(y, z)|
asciidoctorのエスケープ応用編～ エスケープした文字列を強調するなど～

## 概要
asciidoctorのエスケープのまとめです。

大抵は、バックスラッシュ(`\`)を使う方法でうまくいき、他のサイトもその方法を紹介しています。それももう少し複雑なマークアップ(入れ子)をしていくとうまくいかないため、Predefined Attributesを使った方法も含めて、エスケープ方法のまとめ記事を書いてみました。

大雑把に言えば、次の表にあるような書き方もあるよ。ということです。
![asciidoc-escape-examples.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/326797/9d3e32db-1984-f726-eb79-8c1e0ab71ea1.png)



### 方法1: バックスラッシュ(`\`)を使う
見栄えを保てること、リファレンスを見なくても想像つく点で、とっつきやすい方法。`include`, `pass` マクロ等の無効にも使える。

**例**

* `X.\*.*` -> `X.*.*`

**補足**

* エスケープする文字、しない文字が混在してくると訳が分からなくなるので、その場合は、Predefined Attributes をお勧めしたい。  
  `*` を含む文章を強調する場合だとか。

### 方法2: Predefined Attributes を使う
Predefined Attributes (定義済みの属性) を使う。これが一番副作用のない方法。意味的な部分とマークアップで別の表記となるから、エスケープした文字列を強調するだとかができるようになります。

以下、よく使うものを挙げておく。

* `{vbar}` ... `|` に置換される。table書式中で有用。
* `{asterisk}` ... `*` に置換される
* `{backslash}` ... `\` に置換される
* `{startsb}` ... `[` に置換される
* `{endsb}` ... `]` に置換される

**例**

* `X.{asterisk}.{asterisk}` -> `X.*.*`

**注意**

* {amp} は、`&` (特殊文字)に置き換えられる
  文字として表示したければ `&amp;` を使う  
  参考にある表で、置換後に `&#nnnnn` となっているのは文字として置換されるが、それ以外は、置換後の文字そのものとなる。 

### 方法3: Passthrough をする
`pass:[～]` を使う。エスケープする目的での使用はあまりお勧めしない。

**例**

* `pass:[X.*.*]` -> `X.*.*`

**補足**

* 良くも悪くも **そのまま出力** なので、HTMLでいうと特殊文字を含むと出力が壊れるし、スタイルシート周りも周囲と異なる結果となる
* PDF出力時でも、対応する Passthrough された内容が解釈できなければ表示できない  
  → マニアックな話をすると、 `asciidoctor-pdf`　は `<strong>Foo</strong>` といった **特定のHTMLタグ** をPDF上の表現に置き換える仕組みのようです。

### その他: テーブルのセル中で `|` をバンバン使う
`separator` を使う。ただ、セパレーターに `|` 以外を使うと、エディターのSyntax highlight が効かなくなるので、数が多くなければ `{vbar}` を使うやり方を推奨する。

```
[cols="3" separator="¦"]
|===
¦ Equations ¦ English ¦ Mean

¦ |A × B|
¦ magnitude A cross B
¦ 外積の大きさ
|===
```

### 参考
* [Predefined Attributes for Character Replacements | Asciidoctor User Manual](https://asciidoctor.org/docs/user-manual/#charref-attributes)  
  日本語がよいという人は以下を参照
  * [Asciidoctor 文法クイックリファレンス(日本語訳) > 17. 属性 > 17.2. 属性の優先順位 (高いものから列挙)](https://takumon.github.io/asciidoc-syntax-quick-reference-japanese-translation/#_%E5%B1%9E%E6%80%A7%E3%81%AE%E5%84%AA%E5%85%88%E9%A0%86%E4%BD%8D_%E9%AB%98%E3%81%84%E3%82%82%E3%81%AE%E3%81%8B%E3%82%89%E5%88%97%E6%8C%99)  
  ※ 訳のアンカーの付け方が微妙で、翻訳が修正されるとリンク切れになるかもしれない。
azureでpython使ってlinebot開発（その１）

# はじめに
[前回の記事](https://qiita.com/sy0629/items/df4fafe1d38483598239)の続きになります。今回は、Line Botを作成するところまで。

# 概要
LineBotを作成していきます。イメージはこんな感じ
![概要](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501314/6b19682a-b1e2-bca1-5715-69092a516fe9.png)
Userから入力されたメッセージをLineBotが検知してAzure FunctionsのHTTPトリガーへPOSTリクエストを出す。
HTTPトリガーは、POSTパラメータを検証し、正常なものであれば、Userから入力されたメッセージをキューに設定し、Service Busへ登録する。
その際、LineBotにはステータスコード200を返却する。
また、POSTパラメータが正常なものでなければ、ステータスコード400を返却する。
Service Bus TriggerはService Busを監視しており、Service Busにキューが登録されたことをトリガーに動き始める。
キューにはUserが入力したメッセージが登録されているので、そのメッセージをLineBotへ返信し、
UserはLineBotへ返信された内容を参照できる。

# LineBotの作成
Userからメッセージを受け付けるLineBotの作成を行います。
はじめに、[LINE Developers](https://developers.line.biz/ja/)にアクセスし、適当なMessaging API用のLineBotを作成します。（※手順は省略します。）
LineBot作成後、作成したLineBotと友達になってやってください。
設定はAzure FunctionsのHTTP Trigger作成後に行っていきます。
【PHP】Laravel学習メモ / 三項演算子

#三項演算子

三項演算子では条件式を１文で書けます。



```
条件式 ? 式１ : 式２

TRUEの場合 : 式１実行
FALSEの場合 : 式２実行
```

if文の場合

```php
<?php
$var = 100;
if ($var % 2 === 0){
echo $var."は偶数です";
}else{
  echo $var."は奇数です";
}
//100は偶数です
?>
```
↓
三項演算子を使った場合

```php
<?php
$var = 100;
$str = ($var % 2 === 0) ? "偶数です" : "奇数です";
echo $var."は".str;
//100は偶数です
?>
```
バイブレーションモーターをクラウド経由で動かしてみる ~obniz BordとFirebaseの連携~

##概要
Firebase経由でobniz BordとGroveのバイブレータを動かす知見が少なかったので
ほぼ自分用に書いておきます。

firebaseの値が変わるとバイブが鳴り始める仕様です。

参考記事(ワンフットシーバスの田中さん)
https://www.1ft-seabass.jp/memo/2019/09/24/obniz-hand-connect-hololens/


##概要図
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/d1a793f5-3b6a-1ec5-aefa-a0e5e87d9faa.png)
※白色の線は実質使っていないのでIOポートがもったいない。


##必要な材料
・obniz Bord
・GROVE Vibration Motor コード番号 SEEED-105020003

##コード

```index.html
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
    <script src="https://unpkg.com/obniz@2.4.0/obniz.js" crossorigin="anonymous"></script>
</script>
    <script src="https://www.gstatic.com/firebasejs/4.1.3/firebase.js"></script>
    
  </head>
  <body>

    <div id="obniz-debug"></div>
    <button id="on">ON</button>
    <button id="off">OFF</button>
    <div id="print"></div>

    <h1>Hello Grove Vibration Motor</h1>
    <script>
        // Initialize Firebase
        var config = {
            apiKey: "[apiKey]",
            authDomain: "[authDomain]",
            databaseURL: "[databaseURL]",
            projectId: "[projectId]",
            storageBucket: "[storageBucket]",
            messagingSenderId: "[messagingSenderId]",
            appId: "[appId]"
        };
        firebase.initializeApp(config);
    </script>
    
    <script>
    //読み込み処理

      firebase.database().ref('/tables1/').on('value',function(snapshot) {
        var istatus = snapshot.child("status").val();  
        var obniz = new Obniz("obnizID");
        
        obniz.onconnect = async function () {
          obniz.display.clear();

          // IO3をGNDとして使う
          obniz.io3.output(false);
          // IO2をVINとして使う
          obniz.io2.drive('5v');
          obniz.io2.output(true);
          
          // istatus が10になったらON
          if (istatus ===10){
              while(istatus ===10){                
                obniz.io0.pull('5v');
                obniz.display.clear();
                obniz.display.print("ステータス = ON");
                $('#print').text("ステータス = ON");

                await obniz.wait(500);

                obniz.io0.pull(null);          
                obniz.display.clear();
                obniz.display.print("ステータス = OFF");
                $('#print').text("ステータス = OFF");

                await obniz.wait(500);

                firebase.database().ref('/tables1/').on('value',function(snapshot) {
                istatus = snapshot.child("status").val();
                });
              }

            
          }else{
                        
            obniz.io0.pull(null);          
            obniz.display.clear();
            obniz.display.print("ステータス = OFF");
            $('#print').text("ステータス = OFF");
            
            await obniz.wait(1000);

          }
      }
      });


    </script>

  </body>

```

##デモ動画
twilioマグカップに取り付けて電話っぽくしてみた。
http://www.youtube.com/watch?v=6ETPtop1_uw
[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/6ETPtop1_uw/0.jpg)](http://www.youtube.com/watch?v=6ETPtop1_uw)
Pythonのプログラムをとりあえず書いて動かしてみる

# 概要
　この記事は初心者の自分がRESTfulなAPIとswiftでiPhone向けのクーポン配信サービスを開発した手順を順番に記事にしています。技術要素を1つずつ調べながら実装したため、とても遠回りな実装となっております。

　Pythonはもとより、プログラムを初めて触ってみようという方にとって、現代のfremeworkを前提としたプログラミングでは環境構築だけで挫折してしまうかもしれません。そこでとりあえずプログラムを書いて動かす体験が簡単に出来る方法を紹介します。ここではPythonを扱います。またコンピュータはMacを想定します。

### 手順
* 作業用フォルダを作る
* Pythonがインストールされているか確認する
* エディタでpythonのプログラムを書く
* ターミナルでプログラムを実行して動作確認

### 作業用フォルダを作る
作業用フォルダとして、ホームディレクトリ（ユーザ名のフォルダ）配下にプログラムを保存するためのフォルダを作ります。自分は ホームディレクトリ/workspace/python-sample になるようにフォルダを作成しました。フォルダ名は英文字にしておく事をオススメします。

### Pythonがインストールされているか確認する
Macの場合は最初からPythonがインストールされています（Mac OS 10.15 時点まではそう）。バージョンが少し古いですが、基本的なプログラムを動かす程度であれば問題ありません。念のため本当にインストールがされているか確認します。

確認はMacの場合はターミナルで簡単に出来ます。ターミナルはWindowsで言うとコマンドプロンプトに該当するツールです。ターミナルは通常、アプリケーション/ユーティリティ　に格納されています。
<img width="350" alt="where-tarminal.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526594/f805efb5-1f29-14e7-2d7f-4071400439e5.png">

ターミナルを開いて、以下のコマンドを入力して実行（Enterキーを押す）してください。（$マークは初めから表示されているので入力しません）

```
$ Python -V
```
Pythonのバージョンが表示される場合、既にPythonがインストールされています。


### エディタでpythonのコードを書く
エディタはMacだとテキストエディットなどが使えます。これからPythonを本格的に書こうと思っているのであれば、[Visual Studio Code](https://azure.microsoft.com/ja-jp/products/visual-studio-code/) などをインストールすると便利です。無料で利用できます。インストールも通常のアプリケーションと同じ方法で出来ます。

では早速、定番の文字を表示するプログラムを書いてみます。

```py
print('Hello Python')
```

たった1行の簡単なプログラムです。書いたら先ほど作成したファイルに保存をしますが、この時の注意点は2つ。
* ファイル名は英文字表記にしてください
* 拡張子は .py にしてください。こうする事でpythonのプログラムである事がコンピュータに伝わります。


### ターミナルでプログラムを実行して動作確認
ターミナルを開いてプログラムを保存したフォルダまで移動します。移動する時のコマンドは

```
$ cd フォルダのパス
```
となります。（$マークは最初から表示されているので入力しません）

例えば、ホームディレクトリ（ユーザ名のフォルダ）/workspace/python-sample　にプログラムを保存した場合、ターミナルを開いた時の位置は自動的にホームディレクトリとなるので、

```
$ cd workspace/python-sample
```
となります。「cd」はフォルダを移動する時に使うコマンドで、change directry の略です。一つ上のフォルダに移動する時は、

```
cd ../
```
と入力します。


プログラムを保存したフォルダに移動したら、下記のコマンドでプログラムを実行出来ます。

```
python ファイル名.py
```

実行するとターミナルに結果が表示されます。プログラムに書いたHello Python　というキーワードが表示されています。（以下、実行結果）
<img width="420" alt="python-hello-run.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526594/e44d7472-cf58-07ee-d2a5-ed6c42c87adb.png">


このような流れで、開発環境がしっかり構築出来ていないくてもサンドボックス的にPythonのプログラミングを試す事が出来ます。


次は、[pipenvの仮想環境を作ってDjangoをインストールします](https://qiita.com/Ajyarimochi/items/04d895506b719219f240)
【webpack】globuleについてまとめる

webpackなんかでよく使っているglobule。
使い方がさっとわかるように、公式を見つつ簡単にまとめておきます。

公式→https://www.npmjs.com/package/globule


##globuleは何をする？
ワイルドカードでファイルを探してきてくれる〜

```
npm i globule
```

```
yarn add globule
```

好きな方法でインストールしましょう。
そしてファイルの先頭に以下を書けば使えるようになります。

```javascript

const globule = require('globule');
```


##globule.find

書き方は二種類！好みで選びましょう。

```javascript
globule.find(patterns [, patterns [, ...]] [, options])
globule.find({src: patterns, /* other options */})
```
上がパターンを列挙後オプションをつける指定、
下が全てオプションで指定する方法。

コンマで区切っていくと複数指定できる。
`!` を先頭につけると意味を反転できる。（否定）


###オプションの種類

**`src`**  ・・・パターン指定を行える。`patterns`の代わり。
**`srcBase(cwd)`**・・・探し出す基準になるファイルを指定できる。
**`prefixBase`**・・・`srcBase(cwd)`で参照しているとき、srcBase自体のパスを表示するかどうかをtrue/falseで指定（初期値false)
**`matchBase`**・・・スラッシュなしでパターンを指定している時、`*`検索時にスラッシュも含めるかどうかをtrue/falseで指定(初期値false)

###例-------------

```javascript
globule.find("foo/*.js")
// ["foo/a.js", "foo/b.js"]　が戻り値

globule.find("*.js", {srcBase: "foo"})
// ["a.js", "b.js"]　が戻り値
// fooのファイルを基準にして以下を探している

globule.find({src: "*.js", srcBase: "foo", prefixBase: true})
// ["foo/a.js", "foo/b.js"]　が戻り値
// srcBase自体のパスも表示させている

globule.find({src: "*.js", matchBase:true})
//["a.js", "b.js","foo/a.js", "foo/b.js"] が戻り値
// スラッシュ（/)も検索に含んでいる。言い換えれば階層が下のものも検索する
```


##globule.match
与えられたファイルパスを,それぞれsrcとdestのキーを持ったオブジェクトにして配列に格納し返す。

```javascript
globule.mapping(filepaths [, filepaths [, ...]]  [, options])
globule.mapping({src: filepaths, /* other options */})
```

###オプションの種類
globule.findで使えるオプションに加えて、以下も使える。（一部抜粋です）
**`destBase`** ・・・ここで指定したファイルパスが、それぞれのdestのキーで吐き出されるパスの前に追加される。
**`srcBase`**・・・ここで指定したファイルパスが、それぞれのsrcのキーで吐き出されるパスの前に追加される。


###例-------------

```javascript

globule.mapping(["foo/a.js", "foo/b.js"])
// [{src: ["foo/a.js"], dest: "foo/a.js"}, {src: ["foo/b.js"], dest: "foo/b.js"}]

globule.mapping(["foo/a.js", "foo/b.js"], {destBase: "bar"})
// [{src: ["foo/a.js"], dest: "bar/foo/a.js"}, {src: ["foo/b.js"], dest: "bar/foo/b.js"}]
// destファイルの先頭にbarのパスが追加されている

globule.mapping(["a.js", "b.js"], {srcBase: "foo", destBase: "bar"})
// [{src: ["foo/a.js"], dest: "bar/a.js"}, {src: ["foo/b.js"], dest: "bar/b.js"}]
// srcファイルの先頭にfooのパスが追加されている
```

##globule.findMapping
globule.findとglobule.mappingの合わせ技が使える。

```javascript
globule.findMapping(patterns [, options])
```

###例-------------

```javascript

globule.findMapping("foo/*.js")
// [{src: ["foo/a.js"], dest: "foo/a.js"}, {src: ["foo/b.js"], dest: "foo/b.js"}]

globule.findMapping("foo/*.js", {destBase: "bar"})
// [{src: ["foo/a.js"], dest: "bar/foo/a.js"}, {src: ["foo/b.js"], dest: "bar/foo/b.js"}]
// 見つけてきたファイルのdestにbarのパスを追加

globule.findMapping({src: "*.js", srcBase: "foo", destBase: "bar"})
// [{src: ["foo/a.js"], dest: "bar/a.js"}, {src: ["foo/b.js"], dest: "bar/b.js"}]
// 見つけてきたファイルのsrcにfooを追加
```
今の時代はAPKをコマンドで署名するなら、jarsignerではなくapksignerを使う

# あらすじ

現場ではAndroid TVの開発をやっているのですが、シェルスクリプトで署名済みのAPKを作ろうとした時に、jarsignerだとエラーが出るなどしてうまくいかなかったので、色々調べてみました。

# jarsignerで署名ができないパターン

どうやらAndroid 7.0以上ではできないらしい。
[Android 7.0 以上では jarsigner ではなく apksigner で署名する | メモ帳](https://web.archive.org/web/20191225205710/https://egg616.com/%E6%8A%80%E8%A1%93%E3%83%A1%E3%83%A2/post-121/)

公式のページを見ても、apksignerについてのみ記載されていた。
[apksigner &nbsp;|&nbsp; Android Developers](https://developer.android.com/studio/command-line/apksigner?hl=ja)

# 事前準備

Android SDK Build Tools のリビジョン 24.0.3 以上で利用可能です。
事前にパスを通しておきましょう。

```shell:.bash_profile
export ANDROID_HOME=/Users/[ユーザ名]/Library/Android/sdk
export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:$ANDROID_HOME/build-tools/28.0.3
```

また、署名するために必要な情報も用意しておきましょう。

- 未署名のAPKファイル
- キーストアファイル
- キーストアパスワード
- キーエイリアス

# 使用方法

先に実際のコマンドを示します。

```
apksigner sign --ks [キーストアファイル] -v --v2-signing-enabled true --ks-key-alias [キーエイリアス] --ks-pass pass:[キーストアパスワード] [未署名のAPKファイル]
```

それぞれのオプションの意味は以下の通りです。

| オプション | 意味 |
|:-----------------|:------------------|
| --ks | キーストアファイル |
| -v | 詳細出力モードを使用 |
| --v2-signing-enabled | APK 署名スキーム v2 を使用するかどうか |
| --ks-key-alias | キーストア内で、その署名者の秘密鍵と証明書のデータを示すエイリアス名 |
| --ks-pass | 署名者の秘密鍵と証明書が含まれているキーストアのパスワード |

```--ks-pass``` オプションのフォーマットとしては以下がサポートされています。

| フォーマット | 意味 |
|:-----------------|:------------------|
| ```pass:<password>``` | apksigner signコマンドの他の部分と一緒にパスワードをインラインで指定 |
| ```env:<name>``` | 指定する環境変数にパスワードを保存 |
| ```file:<filename>``` | 指定するファイル内にパスワードを 1 行で保存 |
| ```stdin``` | 標準の入力ストリーム内にパスワードを 1 行で指定 |

# 署名されているか確認する方法

以下のコマンドで署名情報を出力することができます。

```
apksigner verify --print-certs -v [署名済みのAPKファイル]
```

それぞれのオプションの意味は以下の通りです。

| オプション | 意味 |
|:-----------------|:------------------|
| --print-certs | APK の署名証明書に関する情報を表示 |
| -v | 詳細出力モードを使用 |

# より詳細な使い方

それぞれのより詳細な使い方に関しては、以下を参照してください。
[apksigner &nbsp;|&nbsp; Android Developers](https://developer.android.com/studio/command-line/apksigner?hl=ja)
Freecadの忘備録(自分用)

自分用の忘備録です。

##　プリミティブの球を作成してigesでエキスポートする(半径と位置を指定して）

``` Sphere.py
import FreeCAD as APP
import Part
freecad = APP.newDocument("model")
comp_1 = Part.Sphere()
comp_1.Radius=10
myPart = freecad.addObject("Part::Feature","comp_1")
myPart.Shape= comp_1.toShape()
myPart.Placement = App.Placement(App.Vector(100,0,0),App.Rotation(App.Vector(0,0,1),0))
freecad.recompute()
myPart.Shape.MatrixOfInertia
freecad.saveAs("comp_1.FCStd")
Part.export([freecad.Objects[0]],"comp_1.iges")
```
【PHP】Laravel 学習メモ/ (Request $request)　

#(Request $request)

```php
<?php
namespace App\Http\Controllers;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;

class SampleController extends Controller{
  public function postsample(Request $request){

  }
}
?>
```
よく見かけるので調べました。
postsampleアクションの引数にあるRequest $requestとは？

Requestはクラス
$requestはインスタンス

useでRequestを使用するという記述があリます。
引数の中のRequestはそれを指しています。
クラスがある場合、インスタンスを用意すべきということで$requestも引数に一緒に記載されているということらしいです。
【PHP】Laravel 学習メモ/ classの名前空間とuse宣言

#クラスの名前空間とuse宣言
Controllerの最初に書きます。

名前空間:　ファイルの場所を示す
use宣言:　中で使うファイルを宣言

```
<?php
namespace App\Http\クラスのディレクトリ;
use 使用するクラス
class クラス名　extends 継承するクラス名 {

}
?>
```

例：

```php
<?php
namespace App\Http\Controllers;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;

class SampleController extends Controller{
  
}
?>
```
平方根をとった数字が整数かどうかを判断するのに恐ろしく手間をかけていた話

##はじめに

本日は題名の通り、私がAtcoderの問題を解いていてたまに出てくる、
ある値の平方根が、整数になるかどうか、という判定の為に書いたソースについて
説明していこうと思います。

##失敗例

平方根をどうやって計算しても良いかわからない私は、
とりあえずググって出てきたMath.sqtr(x)を使って平方根を求めることを覚えました。

それをどうやって整数か判断するか、と考えた時、私の頭の中では、
「整数　= 小数点が存在しない数」という式を思いついた為、
そのように書いてみることにしました。

```sample.rb
x = gets.split(' ').map(&:to_i)
count = 0
x.times do |n|
 a = Math.sqrt(n)
 #以下で、小数が存在しないことを判定
 if a(-1) == nil
  count += 1
 end
end

```
aの-1桁目、小数第一位が存在しない=整数、と言うことを考えていましたが、
見事にこれは不正解となりました。

##何が問題だったのか

上記のソース何が悪かったか、と言いますと、
Math.sqrtを使って、平方根をとった数字は、**float型**となってしまう点です。
そのため、答えが整数であっても**1**とはならず、**1.0**となってしまうので、
小数第一位がどの数字にも、存在することになってしまうのです。

##どうやって解決したか

###失敗した解決策

またしても失敗例となりますが、上記を試してダメだった私は、
「小数が存在しない=小数第一位で切り上げしても数字が変わらない」と考えたため、
切り上げのceilを使って以下のように変更してみました。

```sample.rb
x = gets.split(' ').map(&:to_i)
count = 0
x.times do |n|
 #以下で、平方根をとった数字に小数が存在しないことを判定
 if Math.sqrt(n).ceil == Math.sqrt(n)
  count += 1
 end
end

```

ですがこちらも案の定不正解です。
小数第一位が0であっても、x.012395995...となり、
整数とならない可能性を考慮できていませんでした。

###成功した解決策
では、どうやって整数かを判定したのか。
正直私の中では、数字をどう使って判定すれば良いかわかりませんでした。
結果として、最善策でないのは百も承知で、以下のような方法で判定してきました。

```sample.rb
x = gets.split(' ').map(&:to_i)
count = 0
x.times do |n|
 #以下で、平方根をとった数字に小数が存在しないことを判定
 a = Math.sqrt(n).to_s
 index = a.index('.')
 if a[index+2] == nil
  count += 1
 end
end

```
平方根をとった数字を一回文字列に変換します。
そして、'.'が何番目に存在するかを取得し、
'.'の位置から+2番目、つまり小数第2位に当たる数が存在するかどうかを判定し、
存在した場合は、整数でない、存在しない場合は、整数という風に判別しました。

##もうちょっと改善

一応、求めたかった答えを得ることはできましたが、
あまりにもまどろっこしいやり方なため、
もう少しスマートに解きたい、と思っていたところ、
ある方から頂いた助言により、できたのが以下のソースです。

```sample.rb
x = gets.split(' ').map(&:to_i)
count = 0
x.times do |n|
 #以下で、平方根をとった数字に小数が存在しないことを判定
 a = Math.sqrt(n)
 if a%1 == 0
  count += 1
 end
end

```
平方根をとった数字を1で割って余りが出るかどうか、を判定して、
整数かどうかを見分ける方法ですね。

何を思ったか、私は小数以下は1で割ったら無視されると考えていました。

##最後に

かなり苦しめられた問題でしたが、
自分で不恰好なりにも、一つ斬新？な発想で解を用意し、
最終的には文字列に変えずに、整数を判定する方法がわかったので、
大きな収穫だったと思います。

競技プログラミングをすることで、
コーディングが上達するのかはよくわかりませんが、
与えらた条件をうまく使って、
文字・数値・配列などを自由に扱えるようになれれば、と思います！
【PHP】Laravel 学習メモ/ ControllerからViewへ値を渡す方法

#ControllerからViewへ値を渡す方法

```php
//SampleController.php

<?php
public function index(){
  $data["name"] = "Tom";
  $data["age"] = "10";
  return view('sample.index', $data);
}
?>
```
または、

```php
//SampleController.php

<?php
public function index(){
  return view('sample.index', ['name' => 'Tom']);
}
?>
```

###compact関数を使用

```php
//SampleController.php
<?php
public function index(){
  $name = "Tom";
  $age  = "10";
  return view('sample.index', compact('name', 'age'));
}
?>
```

###withメソッドを使用

```php
/SampleController.php

<?php
public function index(){
  return view('sample.index')->with('name', 'Tom');
}
?>
```

※学習中の為、間違い等ありましたらご指摘お願いいたします。
firestoreのセキュリティルールメモ

# firestoreの制限

セキュリティ目的などでfirestoreの権限を制限する事ができる。

```
service cloud.firestore {
  match /databases/{database}/documents {
    match /<some_path>/ {
      allow read, write: if <some_condition>;
    }
  }
}
```

https://firebase.google.com/docs/firestore/security/get-started?hl=ja

基本的にはmatchでどのドキュメントかを指定して、allowでなにを許可するか、ifでその許可する際の条件を指定する。

# 複数の条件がtrueのとき

複数条件文にヒットした際はtrueになる。

https://firebase.google.com/docs/firestore/security/rules-structure?hl=ja

# ルール

* read
    * get・・・一つのドキュメントを読める
    * list・・・複数のドキュメントをqueryとcollectionを使って読み込める
* write
    * create
    * update
    * delete

https://firebase.google.com/docs/firestore/security/rules-structure?hl=ja

# 投稿者のみに編集権限をもたせたい

```
service cloud.firestore {
  match /databases/{database}/documents {
    match /posts/{post} {
      allow delete: if get(/databases/$(database)/documents/users/$(request.auth.uid)).data.admin == true
    }
  }
}
```
https://firebase.google.com/docs/firestore/security/rules-conditions?hl=ja
ラズベリーパイとESP32で温度管理システムの制作(1)


#ことはじめ
私の勤め先で扱っている製品は温度が2~3℃変動しただけで不良品になってしまうほど温度に対してシビアな為、
作業に使う3つの部屋に温度計を10か所以上配置して24時間管理しています。

このシステムを作る前同じようなソフトを作りましたが、データインポートに対して特に考えていなかった為
週に一回温湿度データを収集してExcelでまとめる作業がありこの作業が面倒だった為
温湿度収集→記録→表示→分析まで一本化する新バージョンをラズベリーパイとESP32で作ります。

#概要
![温度管理システム.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/361605/9a5b8786-e52f-2bd7-01f5-e791fa9257f6.png)
ラズベリーパイをサーバーにして、SHT31を付け各ポジションに配置した
ESP32からラズベリーパイへ温湿度を送信します。

####表示する方法はブラウザとExcelを使います。
ブラウザでは各ポジションの現在の温湿度と更新時間のみを表示します。
これの前バージョンはグラフも表示していましたが、しょっちゅう見るものでもないので、
異常があった時だけお知らせをして置けば現在の状況で十分なので最低限の情報の表示にします。

ExcelではVBAからSQLiteのデータを直接インポートして、グラフの更新も自動で行えるようにします。
前バージョンではこれを逐一CSVファイルでエクスポートしていて
コピペしていたのがしんどかったので一本化しました。

私としてはソフトからCSVファイルを抽出してExcelにコピペするという作業は
マクロを使ってもなんかスマートじゃないな～と思ってます。

SQLiteをExcelで動かす拡張ファイルは以下の参考サイトからダウンロードします。[リンク](https://gabekore.org/sqlite-for-excel-vba)

この拡張ファイルを使うことで、データベースから直接Excelのシートにデータを持ってくることが出来ます。


#必要な部品を揃える
β版は個人で作る必要があります。なので予算の都合上M5Stackは買えませんので
温湿度センサー以外は安い部品で作ります( ;∀;)
##必要な部品
####ラズベリーパイB+
家にあったものを使います。
####ESP32
Amazonで購入しました。[リンク](
https://www.amazon.co.jp/ESP-32S-NodeMCU-32S-ESP32-WROOM-32-Bluetooth%E3%83%87%E3%83%A5%E3%82%A2%E3%83%AB%E3%83%A2%E3%83%BC%E3%83%89-%E3%83%87%E3%83%A5%E3%82%A2%E3%83%AB%E3%82%B3%E3%82%A2CPU/dp/B07R87Z178/ref=sxin_4_ac_d_rm?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&ac_md=0-0-ZXNwMzI%3D-ac_d_rm&keywords=ESP32&pd_rd_i=B07R87Z178&pd_rd_r=e7c23c49-a599-4611-8f1e-42c1b38cbf17&pd_rd_w=iTOLi&pd_rd_wg=T9VoW&pf_rd_p=adac676a-d6cb-422e-a6b8-c597fbb4d00d&pf_rd_r=TF89S1ZW5X29N4XJVJNN&psc=1&qid=1572745368)

####SHT31温湿度センサーモジュール
秋月電子で購入しました。[リンク](http://akizukidenshi.com/catalog/g/gK-12125/)

####ユニバーサル基板　6x8cm
Amazonで購入しました。[リンク](https://www.amazon.co.jp/gp/product/B074YFS6MV/ref=ppx_yo_dt_b_asin_title_o03_s00?ie=UTF8&psc=1)

####100μf電解コンデンサ
家に合ったものを使います。

####電池ボックス
Amazonで購入しました。[リンク](https://www.amazon.co.jp/gp/product/B07MVYMN2H/ref=ppx_yo_dt_b_asin_title_o02_s00?ie=UTF8&psc=1)

####単３乾電池
適当に買ってきたものを使います。

####ssd1306(OLED有機ディスプレイ)
Amazonで購入しました。[リンク](https://www.amazon.co.jp/gp/product/B017M15KX6/ref=ppx_yo_dt_b_asin_title_o01_s00?ie=UTF8&psc=1)

####ジャンパワイヤー
Amazonで購入しました。[リンク](https://www.amazon.co.jp/gp/product/B00J3E1206/ref=ppx_yo_dt_b_asin_title_o02_s00?ie=UTF8&psc=1)

####2.1mmDCジャック　メス
秋月電子で購入しました。[リンク](http://akizukidenshi.com/catalog/g/gK-05148/)

####2.1mmDCジャック　オス
秋月電子で購入しました。[リンク](http://akizukidenshi.com/catalog/g/gC-06712/)

必要な部品はこんなところでしょうか。
次回は部品が来る前に設計をします。
CSSメディアクエリ　メモ

```ruby:application.css
...
...
@media screen and (min-width:480px) { 
	.aaa{
		color: red;
	}
}
@media screen and (min-width:768px) and ( max-width:1024px) {
	.aaa{
		color: blue;
	}
}
@media screen and (min-width:1024px) {
	.aaa{
		display: none; /*見せない*/
		visibility: hidden; /*divは存在すけど表示なし*/
	}
}
```


```erb:view/home/top.html.erb
....
<div class="aaa">ここがレスポンシブ対象</div>
....
```
(非Root) Android版LINEが溜め込んでいる画像を削除する

#スマホのストレージをLINEが圧迫している
今や日常のコミュニケーションツールとなったLINEですが長年使用しているとストレージをとんでもなく圧迫しますよね．私のXperia X Performanceの場合，LINEだけで5GB近くストレージを占有しています．本体ストレージが32GBでシステム領域がその半分ですから，如何にLINEが肥大化しているかがお分かりいただけると思います．
![Screenshot_20191103-104004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501664/2a52763f-23cf-7251-d226-1910a6d6d010.png)

そんなLINEですが，主な保存ファイルは画像・動画のようです．そしてこれらはLINEの設定画面等から個別に削除することができません．(トーク丸ごと削除はできますが，画像だけ消して軽くしたいですよね)

<font color="MediumVioletRed">※※ここから先はAndroid(LINE)のシステム領域へちょっとだけ足を踏み入れます．LINEが正常に動作しなくなる可能性があります．事前にバックアップを取るなど準備を入念に行い必ず<b>自己責任で</b>行ってください．</font>


##LINEのデータ保存先

/[ストレージ]/Android/data/jp.naver.line.android/storage/mo
※[ストレージ]の部分は機種によって異なる場合があります．私の場合は
/storage/emulated/0/Android/data/jp.naver.line.android/storage/mo でした

##操作方法
①LINEを終了します．念のためスマホを再起動してもOK

②moフォルダをPC等にコピーすることでバックアップします．
この時，全ファイルを確実にコピーするためADBコマンドでコピーすることをお勧めします．(MTP接続だとすべてのファイルがコピーできないことがあります)



③moフォルダを丸ごと削除します
※このディレクトリはRoot権限がなくても自由にいじることができます．

④LINEを起動し，トーク画面を開けることを確認します

以上!

##ほかの画像類
どうやらLINEはさまざまなファイルを storage/配下にため込んでいるようです．
storage/toyboximg/内も削除して大丈夫なようです．


##BeforeAfter
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501664/5c41db53-3ea9-80d2-b6f5-fb8a81c6b465.png)
#Ruby の Faraday で ssh + SOCKS  による https proxy 接続ができなかったので faraday_adapter_socks gem で Middleware 指定をした

# SOCKS を起動

```
ssh -vND 8888  user@host
```

# gem install

```
gem install faraday
gem install faraday_adapter_socks
```

# Ruby or pry

環境変数に socks のURLを指定する

```
https_proxy=socks://127.0.0.1:8888 ruby some.rb
```

```
https_proxy=socks://127.0.0.1:8888 pry
```

# Ruby Code

adapter を指定して get リクエストしてみる

```rb
Faraday.new(url: 'https://httpbin.org/ip') { |conn| conn.adapter :net_http_socks }.get.body
```

e.g result 

IPアドレスを返してくれるサービスにリクエストを投げてみる
sshサーバーのIPアドレスが返ってきたら成功

```
[8] pry(main)> Faraday.new(url: 'https://httpbin.org/ip') { |conn| conn.adapter :net_http_socks }.get.body
=> "{\n  \"origin\": \"YYY.YYY.YYY.YYY, YYY.YYY.YYY.YYY\"\n}\n"
```

# アダプタを指定しなかった場合

こんなエラーが起こっていた

```
[10] pry(main)> Faraday.new(url: 'https://httpbin.org/ip').get.body
Faraday::ConnectionFailed: end of file reached
from /usr/local/lib/ruby/2.5.0/net/protocol.rb:189:in `rbuf_fill'
Caused by EOFError: end of file reached
from /usr/local/lib/ruby/2.5.0/net/protocol.rb:189:in `rbuf_fill'
```



# Grete gem "faraday_adapter_socks" !

thank you 

https://github.com/goldeneggg/faraday_adapter_socks/blob/master/lib/faraday/adapter/net_http_socks.rb

```rb
module Faraday
  class Adapter < Middleware

    register_middleware net_http_socks: :NetHttpSocks

    class NetHttpSocks < Faraday::Adapter::NetHttp

      SOCKS_SCHEMES = ['socks', 'socks4', 'socks5']

      def net_http_connection(env)
        proxy = env[:request][:proxy]

        net_http_class = if proxy
          if SOCKS_SCHEMES.include?(proxy[:uri].scheme)
            Net::HTTP::SOCKSProxy(proxy[:uri].host, proxy[:uri].port)
          else
            Net::HTTP::Proxy(proxy[:uri].host, proxy[:uri].port, proxy[:user], proxy[:password])
          end
        else
          Net::HTTP
        end

        net_http_class.new(env[:url].host, env[:url].port)
      end
    end
  end
end
```


# MiddleWare Image

![image](https://user-images.githubusercontent.com/13635059/68077691-9f2afa00-fe0b-11e9-9058-2b80c7b1f4f0.png)

https://lostisland.github.io/faraday/middleware/


# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2660








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
【Git】直前のコミットのコメントを修正する方法

Gitでコミットする際にコメントを書きかけでコミットしてしまった、直前のコメントをよりよい内容に修正したいといった場合の対処法です。

## 対象
Git

## 環境
OS：Windows10
Git：コマンドプロンプト（コマンドライン）

## 手順
### その1
→ おそらく一般的なやり方

1.git commit --amendする

```
> git commit --amend -m "コメント"
```

2.前のコメントをpush済の場合は-fオプションつきで強制的にプッシュする

```
> git push -f
```

### その2
→ 以下の手順でも可能
1.直前のコミットに対し、git reset --softする

```
> git reset --soft "HEAD^"
```

2.リポジトリの直前のコミットが取り消される。ステージの状態を確認しておく。

```
> git status
```
3.ステージにコミット取り消ししたファイルが乗っていることを確認できたら、再度コメントをつけてコミットする

```
> git commmit -m "コメント"
```
4.前のコメントをpush済の場合は-fオプションつきで強制的にプッシュする

```
> git push -f
```

## 備考
最初、手順その2を書いていましたが、その1のほうが一般的とわかり、追記しました。

## 参考
[［初心者向け］こんなときどうする⁉︎ GitのTips31選！](https://qiita.com/Keisuke69/items/35d60e4e375fc525ccbd)
第三回開発合宿: チーム開発本格始動！

# 第三回開発合宿: チーム開発本格始動！

## アクシス福岡の開発合宿とは

こんにちは、株式会社アクシス福岡オフィスのueharaです。

福岡オフィスでは **普段の業務は全て忘れて、自分の興味のある事を勉強したり作ったり** する場として月に一度、開発合宿なる物を行っています。

参加は自由ですが、開発合宿をより有意義なものにするための工夫として各人が今回の開発合宿で「勉強すること」や「作るもの」を事前に共有し合います。
とはいっても、ルールとしてあるのは上述した事ぐらいで実際には談笑しながら作業を進めており、堅苦しさは皆無です！

今は社内のみで参加者を募って実施していますが、ゆくゆくは社外の方達との交流の場として「開発合宿」を実施できたらいいなぁ〜って思ったりしてます。

- [第一回開発合宿](https://qiita.com/michida/items/bf2c150e94e231795685)
- [第二回開発合宿](https://qiita.com/aoki_s/items/828299f41c5134ba65ca#_reference-042ede0e591c1dff28fb)

## スケジュール/開催場所

前回と同様、スペースマーケット様で博多のレンタルスペースをお借りしました。
スケジュールは以下です。前回と遜色ないですね。

- 10:00 開始
- 13:10 お昼
- 14:10 再開
- 18:00 成果発表
- 19:00 解散

この場所は広くて、ホワイトボードもあってと、とても便利です。今後開発合宿に参加するメンバーが増えてもまだまだ余裕があるので心配ないですね。

ただ一つ不満があるとすれば、日当たりが悪く昼なのにくらかったりしてちょっと怖い・・・。でも、悪いところをあげるとすればそれぐらいでとても良いです。おすすめ。

## 作業内容

僕は、この開発合宿でチームとして一つのアプリケーションを作ることに挑戦しています。
「どのようなアプリケーションを開発するか？」という、まさにゼロからスタートして、議論を交わしながら少しずつ進めています。

今回は、以下の議題について話し合いました。

- アプリケーション名
- 必要な機能の洗い出し
- テーブル設計
- ディレクトリ構造

議題としてあげた、四つ全てを完了することはできませんでした。
ディレクトリの構成を決めるには僕含めみんな勉強不足だったため、今回は保留となりました。

それ以外の議題に関しては無事決めることができ、必要な機能の洗い出しとテーブル設計の話し合いは盛り上がりました。
中でもテーブル設計では全員が「これで大丈夫か？」「もっといい方法はないか？」を本気で考えていて、目に見えて良い方向に進んでいることがわかり素直に感動しました。

チームで何かをゼロから作ることは、普段の業務では中々経験できることではないです。
特に、設計に関しては骨組みが完了した状態から始まることも多いので議論を交わしながら設計が出来ている今の状況はとても貴重な経験だと感じています。

議論が一通り完了し、ローカル環境の構築を行い今回の開発合宿での作業は終わりとなりました。

濃密な議論ができたので、個人的に「作りたいアプリケーション」へのイメージが確立できました。
また、チームメンバー全員が限りなく近いイメージをしているんじゃないかなぁって思ってます。（願望）

![IMG_0053.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329786/3b086a72-3690-e87f-7206-d069a93e77fe.jpeg)
機能の洗い出し後のホワイトボード

![IMG_0054.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329786/9df38a38-5257-77ba-232d-5dfe09a1318c.jpeg)
テーブル設計しているときのホワイトボード（一番白熱したときの画像撮り忘れてた・・・）

![IMG_0055.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329786/321814e3-de61-455b-3e93-fb208024decd.jpeg)
今回決めきらなかったディレクトリ構成について議論しているときのホワイトボード


## ローカル開発環境

チームで開発を行うにあたってローカルでの開発環境を構築しました。
せっかくなので構築手順を記事にしようと思い以下を執筆しました。
「Docker+Go+mysql」に興味ある方は是非以下の記事も併せてご覧ください。

https://qiita.com/fumiya-uehara/private/73f285f072fc9aea2485

## おまけ

![IMG_20191027_133814.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329786/2262a6bf-f282-d8e5-83c9-4ebe29534b75.jpeg)
福岡ということで、お昼からもつ鍋を食べました。
前田屋というお店で内装も綺麗で、料理もとても美味しかったです。

![vr_takimoto.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329786/84bcab43-2a19-ce1b-ca7c-29055cb7ea45.jpeg)
VRでおおはしゃぎの40代男性w
Oculus Goを持ってきてくれてVR体験したりと、わいわいしてました。
ベイズの定理は何がすごいのか？

#はじめに
統計や機械学習を学ぶとき、最初の方にベイズの定理を学ぶ事が多いです。
ただ、このベイズの定理の利点がいまいちイメージしにくかったので、今回、記事にまとめました。
ベイズの定理については知ったけど、そのありがたみがいまいちよく分からないが対象読者となると思います。

#ベイズの定理について
ベイズの定理は、事前確率と事後確率の関係を表す式で、
事象$A$,$B$が起こる確率を$P(A)$,$P(B)$で表し、
事象$A$の観測後に事象$B$が起こる条件付き確率（事後確率）を$P(B|A)$で表す時、
事象$B$の観測後に事象$A$が起こる条件付き確率$P(A|B)$について以下の式が成り立ちます。

```math
P(A|B) = \frac{P(B|A)P(A)}{P(B)}
```

その導出方法や詳細な説明については、以下の様なサイトで分かり易く解説されているかと思います。

参考サイト
・[ベイズの定理とベイズ更新](https://qiita.com/FrontPark/items/4cd6a24098ae122d16ed)
・[ベイズの定理の基本的な解説](https://mathtrain.jp/bayes)

式だけみるとなんてことはないのですが、とにかくここで重要な事は、***$P(A|B)$を$P(B|A)$,$P(A)$,$P(B)$で求める事が出来る点***であることを頭に留めておいて頂きたいです。

#クラス分類における例
例えば、あるデータ$x_i$がクラス$w_1$,$w_2$に属するかどうかを求めるとします。
これは、データ$x_i$が観測された際、それがクラス$w_1$にある確率$P(w_1|x_i)$と、クラス$w_2$にある確率$P(w_2|x_i)$
を比べる事で、どちらのクラスに属するかを求められます。

```math
\left\{
\begin{array}{ll}
P(w_1|x_i) > P(w_2|x_i) ⇒ x_i \in w_1 \\
P(w_1|x_i) < P(w_2|x_i) ⇒ x_i \in w_2
\end{array}
\right.
```

しかし、$P(w_j|x_i)$を直接求めようとすると、取りうるデータ全てに対して、事後確率$P(w_j|x_i)$を求める必要があり、これは現実的には、データ数が限られているので膨大なデータが必要となります。（下図の右のイメージ）
一方、事前確率$P(x_i|w_j)$を求める場合は、有限のデータからでもそのデータの分布から有る程度信頼できる値を取り出すことが出来ます。
よって、統計的に識別問題を解く際には、***直接求められない事後確率***を***事前確率***から求められるベイズの定理が有効になります。（下図の左のイメージ）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305763/378f941b-6ee4-dfd0-8e3a-9e157f85350a.png)

#おわりに
今回は、ベイズの定理の有用性について、説明させて頂きました。
この定理が機械学習などの分野において、どのように使われているのか、少しでもイメージを持つきっかけになればと思います。
最後まで読んでいただきありがとうございました。
HTTPで取得したファイルをPDFか判定

#はじめに
swiftのPDFKitを使ったPDFビューアーを作る時に、httpでダウンロードしたファイルがPDFかどうかを判定する必要がありました。PDFの判定方法とswiftでの実装を書きます。

# PDFの判定
Webサーバから、HTTPでダウンロードしたコンテンツがPDFか判定するのは、以下の2種類がありました。サーバからの応答メッセージ中のHTTPヘッダを見ることで、PDFか判定できそうです。

1.  Content-Type: ブラウザ中でPDFが表示される
2.  Content-Disposition:　PDFがダウンロードされる

### 1. Content-Type
ブラウザでPDFが表示されるパターンです。HTTPヘッダには、以下の文字列が存在しています。このヘッダが存在する時には、PDFファイルと認識できます。

``` 
Content-Type: application/pdf
```

### 2. Content-Disposition
ブラウザでPDFがダウンロードされるパターンです。HTTPヘッダには、以下の文字列が存在しています。ファイルの拡張子が`.pdf`の場合に、PDFファイルと認識することにします。

```
Content-Disposition:attachment;filename='downloaded.pdf'
```

# SWIFTでの実装
上記のPDF判定をSWIFTで記載したコードです。以下の開発環境での動作は確認しています。
## 開発環境
このコードの実装環境は以下です。
- Xcode : 11.1
- iOS : 13.2

## PDF判定コード
URLを引数に渡し、戻り値でPDFの判定をするコードです。semaphoreを使って、PDF判定が完了してから判定結果を戻り値で戻します。webサーバからの応答を待つので、Mainスレッドで使えるコードではありません。必要があれば、semaphoreをやめて、非同期で実装してください。

``` swift
    private func isPdf(url: URL) -> (Bool) {
        var result: Bool = false
        var request = URLRequest(url: url)
        request.httpMethod = "HEAD"
        let semaphore = DispatchSemaphore(value: 0)
        URLSession.shared.dataTask(with: request) { (data, urlResponse, error) in
            guard let urlResponse = urlResponse as? HTTPURLResponse else {
                // レスポンスなし
                result = false
                semaphore.signal()
                return
            }
            if let contentType = urlResponse.allHeaderFields["Content-Type"] as? String {
                if contentType.contains("application/pdf") {
                    result = true
                    semaphore.signal()
                    return
                }
            }
            if let contentDisposition = urlResponse.allHeaderFields["Content-Disposition"] as? String {
                if contentDisposition.contains(".pdf") {
                    result = true
                    semaphore.signal()
                    return
                }
            }
            result = false
            semaphore.signal()
        }.resume()
        semaphore.wait()
        return result
    }
```

# 参考文献
- [Content-Type一覧(IANA)](https://www.iana.org/assignments/media-types/media-types.xhtml)
- [Content-Disposition Header (RFC6266)](https://tools.ietf.org/html/rfc6266)
UiPathでSelectorに変数を設定する方法

# UiPathでSelectorに変数を設定する方法

## Selectorに変数を使いたいケースって？

UiPathで、表データに対して一行ずつアクセスしたい場合や、aaname属性を動的に指定したい場合など、Selectorに変数を使いたいケースはありますよね。

例えば、以下のセレクターがあったとします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526766/b34c09af-6333-a271-9182-5d5a59f1aec6.png)

tableRowが"2"と指定されていますが、この箇所を動的に指定することで特定の行にアクセスすることができます。

## Selectorに変数を設定する方法（従来のやり方）

これまではSelectorに変数を設定したい場合、以下のように、直接Selector文字列に変数を埋め込まなければなりませんでした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526766/100ff464-8120-2b1a-c6f9-ae0f68c64e1f.png)

セレクターエディターは表示されず、式エディターで表示され、非常に使い勝手が悪かったのですが、最新バージョン（Studio 2019.10.0-beta.463 - 2019/10/31）では改善されているようです！

## Selectorに変数を設定する方法（新しいやり方）

セレクターエディターにて、変数化したい箇所を選択すると、「右クリックで変数設定できるよ」と補足説明が表示されます！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526766/e6e3a3f4-a8c0-f84a-33c8-b8dd0eac8a02.png)

試しに右クリックすると出てきました！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526766/dbd6a49d-ed1b-c103-1eae-9c92f7f360cb.png)

「変数を選択」をクリックすると、定義済みの変数が表示されます。
設定したい変数を選択し、「OK」をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526766/c95991c9-de11-ab12-7779-7dcf31f6d097.png)

そうすると、`{{rowNumber}}`という形で変数が設定されています。
このことより、UiPathにおけるセレクター内の変数設定には、`{{変数名}}`を指定するということが判明しました。Int型から文字列型への置換も不要そうです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526766/e9ee41f0-3a17-ab7e-e62d-d93eca60cdef.png)

セレクターエディターで表示できるのは嬉しいですが、
検証とかハイライト、使えるのかな？と思い、試してみました。

変数パネルで変数の規定値を設定していない場合、NGでしたが、
変数パネルで変数の規定値を設定しておけば、ちゃんと検証もハイライトも使えました！
これは嬉しい！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526766/c308f8fc-f350-5020-3f35-463c5252bc36.png)

もちろんUi Explorerもちゃんと使えました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526766/8d331613-532c-77fe-1b01-c7fb42614750.png)

ちなみに、tableRowなどの、プロパティ名自体も変数化できるかなと試してみましたが、どうやらできないみたいです。

UiPatherの皆さん、これで快適なSelector生活が送れそうですね:relaxed:
ウェブページセキュリティ対策（クリックジャッキング）

フレームの脅威というものをいまいち把握していなかったのですが、
クリックジャッキングというものがあるのですね。

こちらで詳細を把握させていただきました。
>https://blog.tokumaru.org/2013/03/clickjacking-report-by-IPA.html
⇒機能を勝手に実行されるという面で考えると、CSRFと酷似

具体例をだすとこんな感じでしょうか。
①攻撃者が今話題のニュース記事を投稿
　⇒iframeで某通販サイトのページのhtmlを透過で表示し、見た目を変えて画面を表示
②ユーザーが"①"のサイトの次へボタンをクリック（某通販サイトと思わずに）
③結果、某通販サイトを退会させられた

#対策
httpヘッダにX-FRAME-OPTIONSを付与する。
ブラウザが値を検知し、iframeの出力を制限してくれる。

とはいえ、すべてのブラウザがこのhttpヘッダに対応しているかは？なので、
シンプルにCSRFと同じく登録更新系ではトークンを使用するようにしておけば、
安心ではないでしょうか。
退会するには、前画面のトークンが必須など。

んー、iframe詳しくないですが、その前画面すら偽サイトで表示してしまったら、
トークン必須チェックもすり抜けてしまう？

どうなんでしょう？とりあえず、httpヘッダにX-FRAME-OPTIONSを付与すれば、
主要ブラウザを使用しているユーザを救うことができる。

気が向いたときに試してみます！
Windows10でPATHの設定をする。

#この記事をまとめることになった経緯

特定のフォルダのPATHで設定したかったのだが、Windows10で初心者ユーザーにやさしくしているつもりが、ちょっと手の込んだことをしようとすると途端にどこに何があるのかわからなくて、途方にくれたので、まとめの意味も込めて書いてみます。
ユーザーフォルダも勝手に日本語に変換しててわけわかんないし・・・元に戻して！！

#PATHとは
PATHとは、ルートフォルダ(C:\)から実行したいファイルが保存されているフォルダまでのフォルダツリー。
たとえば「メモ帳」は C:\Windows\System32\というフォルダにnotepad.exe が入っていて、この時のPATHは、「 C:\Windows\System32\」となる。
これがWindowsの中で環境設定がされていれば、コマンドプロンプト上で、Notepad.exeと打ち込むだけで、メモ帳が起動しまする。


#PATHの設定
###PATHの種類
環境変数（environment variable）OSに設定を保存するためのシステム変数のことで、Windowsには大きく分けてシステム環境変数(systemroot)とユーザー環境変数(userprofile)という2種類の環境変数があります。それぞれ
・システム環境変数：そのPCを利用する全ユーザーが共有して利用する値
・ユーザー環境変数：各ユーザーごとの個別に設定する値
という意味で、実行したいプログラムの保存場所がPATHの中に含まれていない場合は使用できないが、実行したいプログラムの保存場所をPATHに追加することで使用できるようになります。

環境設定は「システムの詳細設定」から確認可能です。
Windows10の場合は以下の手順で設定画面に移動できます。
###PATHの設定手順
・Windowsのスタートボタンを右クリックしシステムを選択します
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273281/0b416eb9-7a5c-40a5-2208-98e139675271.png)


システム情報をクリックします
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273281/c7fe65c5-2a45-eb10-58e6-aa1b23ee7157.png)


システムの詳細設定を選択します。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273281/7095a2c8-c00c-5b24-0510-1dc73eff7a18.png)


環境変数(N)をクリックします。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273281/1b03150f-abc7-68df-b924-06f359e49bc3.png)


PATHに変数を追加するためにユーザー環境変数のPathを選択し編集をクリックしｍさう。
ここで、パソコンを使用する人全員の環境にPathを通す場合は、下のシステム環境変数のPathを選択しクリックします。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273281/8343d524-54d4-4281-0005-a7a97a0a505b.png)


新規をクリックし、追加したいPATHを記入します。「C:\ProgramData\Anaconda3\]を追加する。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273281/7b072bae-af6a-86de-d5eb-c3096d0fcb26.png)


PATHに追加したフォルダが設定されているかどうかを確認するにはコマンドプロンプトでPATHと入力します。

```php
Microsoft Windows [Version 10.0.15063]
(c) 2017 Microsoft Corporation. All rights reserved.

C:\Users\(省略)>path
PATH=C:\Users\(省略)\AppData\Local\Continuum\anaconda3;C:\Users\(省略)\AppData\Local\Microsoft\WindowsApps;C:\Program Files\Intel\WiFi\bin\;C:\Program Files\Common Files\Intel\WirelessCommon\;C:¥ProgramData¥Anaconda3¥;C:\Users\(省略)\AppData;

C:\Users\km47114>
```

表示されるPATHの中に設定したフォルダが明記されていれば成功です。
VS のプロジェクトを思った通りのディレクトリ構成にする

# 問題

既存のGitHubプロジェクトがあり、そこに対して、思った通りのディレクトリ構成でVSのプロジェクトを作りたい。
普通にテンプレートを作成すると、ディレクトリを掘ってしまう。

理想的には

```
Keda.Durable.Scale.sln
src
 - Keda.Durable.Scale.Server
    - Keda.Durable.Scale.Server.csproj
 - Message
    - Keda.DurableScale.Message.csproj
test
 - Keda.Durable.Scale.Server.Test
    - Keda.Durable.Scale.Server.Test.csproj
```

みたいにしたい。この作戦を踏襲。

* [Create Project/solution in an existing directory?](https://stackoverflow.com/questions/923461/create-project-solution-in-an-existing-directory)

# 解法

## Solution の場所を調整する

クローンした一つ上のディレクトリに行き、クローンしたディレクトリの名前を指定する。

クローンしたディレクトリは、`keda-durable-scaler`だったので、一つ上のディレクトリを最初の画面で指定する。
こんな感じ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3470/b63bc5e5-d8be-dbc6-6534-ad67f21ff5fb.png)

その後、VisualStudioが起動したら、ソリューションを右クリックで、名前を変更する。すると、ソリューションファイルの実体もそれに変えてくれる。

## Csproj ファイルの場所を調整する

Visual Studio の中でディレクトリを掘って、そこにプロジェクトを作成しても思った通りにならない。Visual Studio の中からはいい感じなのだが、実際のディレクトリは違う。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3470/5d0bfbe5-9fd6-7c92-3c2f-400eaa1288c7.png)

### 実際のディレクトリ
直下にできてはるし、、、

```bash
$ ls
CODE_OF_CONDUCT.md           Keda.Durable.Scaler.sln  LICENSE    SECURITY.md
Keda.Durable.Scaler.Server/  keda-durable-scaler/     README.md

```

ちなみに、VSの中で削除しても、実体はのこっている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3470/19f6123a-ebe1-4b31-1fdf-002c9f12eb51.png)

### 実際のディレクトリ

```bash
$ ls
CODE_OF_CONDUCT.md           Keda.Durable.Scaler.sln  LICENSE    SECURITY.md
Keda.Durable.Scaler.Server/  keda-durable-scaler/     README.md

```

### 先にディレクトリを作成して指定する。
PowershellやBashで先にディレクトリを作成しておく。さらに、先ほどやったように、VSの内部でも、ディレクトリを先に指定しておく。

```bash
CODE_OF_CONDUCT.md       keda-durable-scaler/  README.md    src/
Keda.Durable.Scaler.sln  LICENSE               SECURITY.md  tests/
```

プロジェクト作成時にテンプレート指定時に、Locationで、ディレクトリを指定する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3470/e4eb2621-d879-8fc8-018a-9ea336910d3e.png)

### 実際のディレクトリ

思った通り

```powershell
PS > tree . 

▒▒▒▒src
▒   ▒▒▒▒Keda.Durable.Scaler.Server
▒       ▒▒▒▒bin
▒       ▒   ▒▒▒▒Debug
▒       ▒       ▒▒▒▒netcoreapp3.0
▒       ▒▒▒▒obj
▒           ▒▒▒▒Debug
▒               ▒▒▒▒netcoreapp3.0
▒▒▒▒tests
```
Mac OS Catalinaの辞書.appで英辞郎を利用する

# 動機

[Chrome拡張の高速な英語辞書ツールをつくりました(Mouse Dictionary)](https://qiita.com/wtetsu/items/c43232c6c44918e977c9) の記事を見て、
英辞郎を購入したので、せっかくだから日常使いのMacの辞書にも適用したいと思ったのが動機です。

Mac OS Catalina で動かすのに少し調べる必要があったので、同じようなことを求めている人がいたら助けになれば幸いです。

**辞書ファイルを作成するのに合計8.5h弱時間がかかりますので、電源アダプターをつけた状態で実行することをオススメします。**

それと、この手順を踏まなくても、[Mac用の辞書にしたものが購入](https://www.tecorin.com/osx/)できるのでそれでも良い気がします。Demo版では正しく動作しておりました。

<img width="802" alt="preview-2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45426/24ae74f1-7bf6-eb19-23ad-f870d5d9a113.png">

# 環境

- Mac OS Catalina
- Xcode11
- Ruby 
- Homebrew

# 手順

## Additional Tools for Xcode 11のダウンロード

https://developer.apple.com/download/more/ よりDLしてください。

解凍すると Utilitesの中にDictionary Development Kit があるので任意の場所にコピーしてください。　自分は、 ~/workspace/ を作成してその直下にコピーしました。

<img width="882" alt="AdditionalTool.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45426/14e69fcb-69a2-6616-ad64-994eac77524a.png">

## nkfをインストール&英辞郎のテキストをUTF-8変換

英辞郎のテキストファイルをUTF-8に変換する目的で使用します。

```
brew install nkf
```

```
nkf -w --cp932 英辞郎.txt > eijiro-utf8.txt
```

## スクリプトをGitからDL

[OS Xの「辞書」アプリで「英辞郎」を使う](http://www.binword.com/blog/archives/000569.html) の一部を変更したものになります。

```
git clone https://github.com/masa7351/make_eijiro_dic.git
```

## Dictionary Development Kitに渡す形に変換

eijiro-utf8.txt から MyDictionary.xml を作成

```
cd make_eijiro_dic
rm MyDictionary.xml; ruby eiji_conv.rb < eijiro-utf8.txt > MyDictionary.xml
```

## Dictionary Development Kit で辞書作成＆インストール

Makefile の DICT_BUILD_TOOL_DIR はDictionary Development Kitを配置したパスに書き換えて実行してください。

```
cd make_eijiro_dic
make; make install
```
※ MacBook Pro(2016)にて8時間弱時間がかかりました。

```
ls ~/Library/Dictionaries/英辞郎.dictionary
```
ファイルが存在していれば成功

## 辞書を適用
自分は、辞書.appを立ち上げ直すことで、環境設定に 英辞郎 が候補として出てきました。

<img width="559" alt="setting-2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45426/443dd868-4b4f-3176-596f-180a92a9a2bc.png">


# 参考
- [Macの辞書ツールに「英辞郎」をいれる](https://qiita.com/dendensho/items/9b16afb83675ffcb9b02)
Reactをすぐ試したいときにCDN（インストールなし）で読み込む方法


Reactの勉強や練習をしよう！

と思ったときに、npmなどでダウンロードするものが色々あるので、
ちょっと面倒だなーと言うときにCDNのみで利用できるようにする方法をメモしました。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Reactサンプル</title>
<!--head内でcdnで読み込む。バージョンは適時こちらを参考に調整。
https://ja.reactjs.org/docs/cdn-links.html-->

  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
</head>
<body>

<!--コンテンツをここに。-->

<div class="main">
    <div class="section" id="app1">ここ</div>
</div>

<!--reactスクリプト。type指定忘れずに-->
<script type="text/babel">
  ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('app1')
  );
</script>
</body>
```

[注意点]
scriptのtypeはtext/babelを指定すること。
じゃないとJSXでの書き方ができないです！
FRONTEND CONFERENCE 2019 登壇資料まとめ

11月2日（土）に実施された、FRONTEND CONFERENCE 2019 の登壇資料のまとめです。
資料を発見次第随時アップデートしていきます。


## FRONTEND CONFERENCE 2019
- [<https://2019.kfug.jp/>](https://2019.kfug.jp/)
- 2019年11月2日（土）
- 梅田 グランフロント北館10F カンファレンスルーム タワーB

## セッション一覧
- [<https://2019.kfug.jp/session>](https://2019.kfug.jp/session)

## ハッシュタグ
- [#frontkansai](https://twitter.com/search?q=%23frontkansai)

## セッション
&nbsp;&nbsp;&nbsp;&nbsp; | A | B | C  
--- | --- | --- | ---
11:00〜| [モダンJavaScript再入門](https://speakerdeck.com/likr/re-introduction-to-modern-javascript)  <br>尾上 洋介さん| [デザイン・設計の体幹とスキル](https://speakerdeck.com/ykazu/core-skills-of-the-design-for-front-end) <br>山下 一樹さん | [PWAとCache API](https://speakerdeck.com/tiwuofficial/pwatocache-api-number-frontkansai) <br>田口 航さん
11:45 〜 | [ディレクトリ構成ベストプラクティス 〜 Angularアプリを作り続けてわかったこと](https://speakerdeck.com/okunokentaro/frontend-conference-2019) <br>okunokentaroさん| [事例からみるアプリデザインの成長戦略とWeb Native Platform](https://speakerdeck.com/rdlabo/app-design-growth) <br>榊原 昌彦さん| [JavaScript も jQuery も未経験の新人エンジニアが 1 年間 Vue.js を学習して感じた話](https://speakerdeck.com/yugkwmt/frontend-conference-2019) <br>川又 由雅さん
13:00 〜 | Adobe XDで作るマイクロインタラクション <br>松下 絵梨さん| [UIデザイナが実装できる良さ](https://speakerdeck.com/contiki9/ui-designer-coding-goood) <br>コンチさん | [レガシーなフロントエンドをリプレイスする](https://speakerdeck.com/daikids2/regasinahurontoendoworipureisusuru) <br>小島 大基さん
13:45 〜 | [2019年のUIパフォーマンス](https://speakerdeck.com/jlkiri/2019nian-falseuipahuomansu) <br>キリル ワシルツォフさん | - | [Nuxt.js + Firebaseでの開発と高速化に挑んだ話](https://speakerdeck.com/bumptakayuki/nuxt-dot-js-plus-firebasetefalsekai-fa-togao-su-hua-nitiao-ntahua) <br>カンボ@沖縄(鈴木孝之)さん
14:30 〜 | AWSを活用したフロントエンド開発 <br>前田 圭介さん | [高齢者でも使えるプロダクトUIの挑戦](https://speakerdeck.com/jmblog/designing-user-interfaces-for-the-elderly) <br>神保 嘉秀さん| -
15:15 〜 | [私たちはなぜ SPA で開発するのか](https://speakerdeck.com/potato4d/why-you-choose-spa) <br>花谷 拓磨さん | [プロダクト開発とFigmaのより良い関係を求めて](https://speakerdeck.com/takanorip/purodakutokai-fa-tofigmafalseyoriliang-iguan-xi-woqiu-mete) <br>大木 尊紀さん | [React Hooksで\<video\>を乗りこなす](https://speakerdeck.com/narirou/reacthookstevideowocheng-rikonasu) <br>浜田 真成さん
16:00 〜 | [フロントエンドエンジニアのためのセキュリティ対策](https://speakerdeck.com/masashi/number-frontkansai-2019) <br>平野 昌士さん | [Flutter For Webを用いて居酒屋で使えそうなゲームを作ってみた備忘録](https://speakerdeck.com/yujionishi/ju-jiu-wu-deshi-esounaapuriwoflutter-for-webdezuo-tutemitabei-wang-lu) <br>大西 優司さん | Web 制作現場のディレクションを支える GitHub <br>後藤 知宏さん