OmniAICreator/Qiita-1.07M huggingface dataset:
【Nuxt.js】StylusでBreakpointを効率良く書こう

従来のレスポンシブ対応にはcssにmedia queryを使用しますが、stylusでmixinを使用し記述を簡素化して書くことができます。
以下にその手順を紹介します。


まずデザインテンプレートにVuetifyを導入しているのでこちらを参考に設定をしていきます。
(こちらはお使いのフレームワークやご利用のBreakpointに合わせてください。)
https://vuetifyjs.com/en/customization/breakpoints

<img width="1044" alt="スクリーンショット 2020-03-03 13.13.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163786/83bf86f8-9c43-391b-d806-bf902eb318e2.png">

## 従来のCSS
```css
@media screen and (max-width: 600px) {
  color: red;
}
```

## Stylusでの書き方
Stylusでもほぼ変わらずタグを省略するぐらいしか違いがないです。

```stylus
@media screen and (max-width: 600px) {
  color red
}
```

## block mixinの使用
Stylusでは+接頭辞を付けてmixinを呼び出しのブロックに渡すことができます。
Sass では必要だった @mixin や @include の表記が不要です。

```stylus
hover() {
  &:hover, &:active {
    {block}
  }
}
+hover() {
  text-decoration: underline;
}
```
これらを応用してmedia queryを作成していきます。

## 変数をセットする
まずは変数用のstylusファイルを作成し、Vuetifyのbreakpointの数字をいれていきます。

```_variables.styl
small = 600px
midium = 960px
large = 1264px
xlarge = 1904px
```

## mixinsにセットする
次にmixin用のファイルを用意し記入していく。

```
breakpoint-sm()
  @media screen and (min-width: small)
    {block}
breakpoint-md()
  @media screen and (min-width: midium)
    {block}
breakpoint-lg()
  @media screen and (min-width: large)
    {block}
breakpoint-xl()
  @media screen and (min-width: xlarge)
    {block}
```

## さらに改良する

```
breakpoint(breakpointNames)
  for name in breakpointNames
    if name == 'xm'
      {block}
    if name == 'sm'
      @media only screen and (min-width: small)
        {block}
    if name == 'md'
      @media only screen and (min-width: midium)
        {block}
    if name == 'lg'
      @media only screen and (min-width: large)
        {block}
    if name == 'xl'
      @media only screen and (min-width: xlarge)
        {block}
```

## 使用するstyleに書いていく
それぞれの幅に合わしたものに書いていきます。

```style.styl
.contents
  padding 0px
  +breakpoint(xl)
    padding 10px
  +breakpoint(sm)
    padding 20px
  +breakpoint(md)
    padding 30px
  +breakpoint(lg)
    padding 40px
  +breakpoint(xl)
    padding 40px
```

## コンパイル
コンパイルされるとこのような結果になります。

```style.css
.contents {
  padding: 0px;
}
@media only screen and (min-width: 600px) {
  .box {
    padding: 10px;
  }
}
@media only screen and (min-width: 960px) {
  .box {
    padding: 20px;
  }
}
@media only screen and (min-width: 1264px) {
  .box {
    padding: 30px;
  }
}
@media only screen and (min-width: 1904px) {
  .box {
    padding: 40px;
  }
}
```
Pythonでtupleのlistを複数キーの昇降順を指定してソートする

# やりたいこと

SQLでソートするときには

```SQL
Select * from table Order By key1 DESC, key2 ASC
```

のように各キーの昇降順を指定することができます。

またC/C++などでは比較関数を自分で定義することで同様のことができます。

```c
int compare(const MyStruct *a, const MyStruct *b)
{
    if(a->k1 == b->k1){
        return b->k2 - a->k2;
    }else{
        return a->k1 - b->k2;
    }
}
```

一方でPythonではsortはkey関数と全体の昇降順しか指定することしかできず、複数要素を持つtupleをこのようにsortする場合はどうすればいいのか。

# 解決方法

公式docに書いてありました。
https://docs.python.org/3/howto/sorting.html#sort-stability-and-complex-sorts

>Sorts are guaranteed to be stable. That means that when multiple records have the same key, their original order is preserved.

>This wonderful property lets you build complex sorts in a series of sorting steps. For example, to sort the student data by descending grade and then ascending age, do the age sort first and then sort again using grade

```python
def multisort(xs, specs):
    for key, reverse in reversed(specs):
        xs.sort(key=lambda x: x[key], reverse=reverse)
    return xs
```

Pythonのソートは安定ソートなので優先順位の低いkeyから順に昇降順を指定して繰り返しソートすればいいのです。なるほどね!!
OSError: [Errno 40] Message too longが出たときの対処

UDP通信をしているときに

```
OSError: [Errno 40] Message too long
```
というエラーがでて困ってしまったので対処法を忘れないように載せておきます。

# 対処

```
sysctl -a | grep udp.maxdgram
```
を実行すると，udp通信の際のパケットの容量が表示されます。

```
net.inet.udp.maxdgram: 9216
```

この値を変更してあげることで解決しました。

```
sudo sysctl -w net.inet.udp.maxdgram=65536
```

## うまくいかなかったところ
実はこのとき，Pythonで大きさ65536のデータを送信してもまだエラーが出たので，少しデータを小さくして送信しました。なにか余分な情報が付加されて送信されているのでしょうか...
なにかわかりそうな方がいたら教えてもらえると嬉しいです。
TimerでWinFormを揺らしてみた

<pre>
using System;
using System.Drawing;
using System.Windows.Forms;

namespace WindowsFormsApplication
{
    public partial class Form1 : Form
    {
        private Timer timer;
        private int count = 0;
        private int count_max = 10;
        private int orgX;
        private int orgY;
        public Form1()
        {
            InitializeComponent();
            this.Move += (s, e) => {
                if (!timer.Enabled)
                {
                    orgX = this.Location.X;
                    orgY = this.Location.Y;
                }
            };
            timer = new Timer();
            timer.Tick += (s,e)=> {
                Point p =Location;
                if((count&1)==0)
                {
                    p.Offset(2, 2);
                }
                else
                {
                    p.Offset(-2, -2);
                }
                Location = p;
                count++;
                if(count>=count_max)
                {
                    count = 0;
                    timer.Stop();
                    Location = new Point(orgX, orgY);
                }
            };
            timer.Interval = 25;
        }
        private void button1_Click(object sender, EventArgs e)
        {
            if(!timer.Enabled)
            {
                timer.Start();
            }
        }
    }
}
</pre>
git stash まとめ：commitしていない変更を隠して、後から復活する。

<随時追加>

ブランチ移りたいけど、commitしたくない。。。
->stashがあるじゃない。

```
$ git stash save //変更を全て隠す. saveは省略可。
$ git stash -u //追跡されていないfileなども含めて全て隠す
```
これでバリバリcheckoutしちゃえるぜ。

　　
また、復活させたい時は、そのbranchに戻って、

```
$ git stash list //スタッシュで隠した変更の履歴表示
stash@{0}: ~
stash@{1}: ~

$ git stah list -p // 変更内容も含めて表示
```
戻ったじゃんね。


#参考文献
https://blog.labot.jp/entry/2019/07/01/183204#stash-all-edits
MacIaslをbuildする

dslのコンパイルに必要なiaslのmacOS版です。

https://github.com/acidanthera/MaciASL
をgit cloneして入手する。

https://www.acpica.org/downloads/
から
acpica-unix-20200214.tar.gz
をdownloadする。

展開して
`CFLAGS="-mmacosx-version-min=10.7 -O3" LDFLAGS="-mmacosx-version-min=10.7" make iasl -j $(getconf _NPROCESSORS_ONLN)`
とcompileする。

出来上がった
generate/unix/bin/iaslを
`cp generate/unix/bin/iasl ../MaciASL/dist/iasl-stable`
`cp generate/unix/bin/iasl ../MaciASL/dist/iasl-dev`
`cp generate/unix/bin/iasl ../MaciASL/dist/iasl-legacy`
とコピーする。

xcodeでMaciASL/MaciASL.xcodeprojを開き
左上の右向き矢印をクリックしてBuildする。

うまくいけば出来上がったMaciASLが起動する。

MaciASLは
Library/Developer/Xcode/DerivedData/MaciASL-buqlfeztwsgsyidyzflzhgdjyobk/Build/Products/Debug/
に存在する。
PythonでUDP同時接続

動画データをストリーミングするために，まず最初にシンプルな数字のデータを送受信できるプログラムを作りました！

# UDPを選んだ理由
最初はTCPでストリーミングサーバーを作っていたのですが，TCPだと一つのポートで複数のクライアントと同時通信ができなさそうだったので，StatelessなプロトコルのUDPで作ることにしました！

# 設定ファイル
```connection.ini
[server]
ip = 127.0.0.1
port = 1935

[packet]
# [bytes]
header_size = 4
# [pixels]
image_width = 256
image_height = 256
```

# 受信側
```python:server.py
import socket
import configparser
import logging

logging.basicConfig(level=logging.DEBUG)

config = configparser.ConfigParser()
config.read('./connection.ini', 'UTF-8')

# Connection Settings
SERVER_IP = config.get('server', 'ip')
SERVER_PORT = int(config.get('server', 'port'))

# Image Settings
IMAGE_WIDTH = int(config.get('packet', 'image_width'))
IMAGE_HEIGHT = int(config.get('packet', 'image_height'))
IMAGE_SIZE = IMAGE_WIDTH * IMAGE_HEIGHT // 2
logging.info(" IMAGE SIZE: " + str(IMAGE_SIZE))

if __name__ == '__main__':
  with socket.socket(socket.AF_INET, socket.SOCK_DGRAM) as s:
    s.bind((SERVER_IP, SERVER_PORT))
    logging.info(" Binding port on: " + SERVER_IP + ":" + str(SERVER_PORT))

    while True:
      data, addr = s.recvfrom(IMAGE_SIZE)
      print(addr, int.from_bytes(data, 'big'))
```

# 送信側
```python:stream.py
import socket
import configparser
import logging
import time

logging.basicConfig(level=logging.DEBUG)

config = configparser.ConfigParser()
config.read('./connection.ini', 'UTF-8')

# Connection Settings
SERVER_IP = config.get('server', 'ip')
SERVER_PORT = int(config.get('server', 'port'))

# Image Settings
IMAGE_WIDTH = int(config.get('packet', 'image_width'))
IMAGE_HEIGHT = int(config.get('packet', 'image_height'))
IMAGE_SIZE = IMAGE_WIDTH * IMAGE_HEIGHT // 2
logging.info(" IMAGE SIZE: " + str(IMAGE_SIZE))

if __name__ == '__main__':
  with socket.socket(socket.AF_INET, socket.SOCK_DGRAM) as s:
    i = 0
    while True:
      s.sendto(i.to_bytes(IMAGE_SIZE, 'big'), (SERVER_IP, SERVER_PORT))
      logging.info(" Sent: " + str(i))
      time.sleep(1)
      i = i + 1
```

# ざっくりとした流れ
設定ファイルからアドレスとポートを読み込み，そこにインクリメントされ続ける`i`の値を`stream.py`から'server.py'に送信し続けます。
'socket.SOCK_DGRAM'はUDP通信を行うことを示しています。`recvfrom()`は受け取ったデータとデータの送信元のタプルを返してくれるので，これを利用してターミナルに情報を表示します。

# 実行結果
`server.py`ひとつと`stream.py`ふたつで実行してみます。

```
INFO:root: IMAGE SIZE: 32768
INFO:root: Binding port on: 127.0.0.1:1935
('127.0.0.1', 55382) 0
('127.0.0.1', 55382) 1
('127.0.0.1', 55382) 2
('127.0.0.1', 55382) 3
('127.0.0.1', 55382) 4
('127.0.0.1', 55382) 5
('127.0.0.1', 55382) 6
('127.0.0.1', 55382) 7
('127.0.0.1', 55382) 8
('127.0.0.1', 59979) 0
('127.0.0.1', 55382) 9
('127.0.0.1', 59979) 1
('127.0.0.1', 55382) 10
('127.0.0.1', 59979) 2
('127.0.0.1', 55382) 11
('127.0.0.1', 59979) 3
('127.0.0.1', 55382) 12
('127.0.0.1', 59979) 4
('127.0.0.1', 55382) 13
('127.0.0.1', 59979) 5
('127.0.0.1', 55382) 14
('127.0.0.1', 59979) 6
('127.0.0.1', 55382) 15
('127.0.0.1', 59979) 7
('127.0.0.1', 55382) 16
('127.0.0.1', 59979) 8
('127.0.0.1', 55382) 17
('127.0.0.1', 59979) 9
('127.0.0.1', 55382) 18
('127.0.0.1', 59979) 10
('127.0.0.1', 55382) 19
('127.0.0.1', 59979) 11
```
２つのアドレスからデータがそれぞれ送られてきています！
OSをwindows10からubuntu18.04に入れ替える

今回は使用していなかった数年前,学生時代に購入した生協パソコンの中身をwindows10からubuntu18.04に入れ替えていきます。

今回使用したもの、手順は以下の通りです。
使用したもの
・生協PC(Panasonic　Let's note CF-AX2)
・DVD-RW
・PC(現在使用中)
・外付け光学式ドライブ

手順
・ubuntu-18.04.4-desktop-amd64.isoをダウンロード
・DVD-RWに書き込み(コピーではない)
・生協PCを立ち上げる
・F2ボタンでBIOSに入る
・BIOSでWindowsを消去しubuntuを使用できるようにする。

ひとつづつ丁寧に見ていきます。
・ubuntu-18.04.4-desktop-amd64.isoをダウンロード
まずは下記のリンクへ飛びます。
https://www.ubuntulinux.jp/News/ubuntu1804-ja-remix

ここからubuntu-ja-18.04.3-desktop-amd64.iso（ISOイメージ）をクリックしダウンロードします。
私は富山大学のものをダウンロードしました。

・DVD-RWに書き込み(コピーではない)
今回はDVD-RWに書き込みますが、USBにも書き込み可能のようなのでDVD-RWが手元にない方はそちらを試してみてください。
ダウンロードしたubuntu-18.04.4-desktop-amd64.isoファイルの上で右クリックしディスクイメージの書き込みを選択し、書き込みをします。
![2020-02-22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403932/58568a11-3c14-d896-c9b8-9155106222f1.png)


・生協PCを立ち上げる
生協PCには、光学式ドライブがついていないため、外付け光学式ドライブを使用し、DVD-RWを読み込みます。

・F2ボタンでBIOSに入る
外付け光学式ドライブを接続し、ディスクを読み込みながら立ち上げ時にF2ボタンを押し、BIOSに入ります。
分かりやすくするため、まずは言語を日本語にします。
![S__260210694.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403932/ab73c328-98b5-ea7a-a687-f8152d6baed4.jpeg)

次に起動タブへ移動します。そして、UEFI優先度のところで起動するドライブの優先順位を変更します。
![S__260210693.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403932/3b5f6f3b-4db7-cef6-95b0-beb15567b894.jpeg)

起動オプション#1をubuntuにすることで、ubuntuを最初に起動するようにします。
元々のwindowsを削除するかを聞かれるので削除する場合は削除を選択してください。
![S__260210691.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403932/0a401a37-de1a-81a4-0a7d-fa080bda9343.jpeg)


以上で、OS入れ替えは終了です。今後はこのPCを使って色々していこうと思います。
webpへの読み替え・確認方法


## .htaccessの記述

```apache
<IfModule mod_rewrite.c>
	RewriteEngine On
	RewriteCond %{HTTP_ACCEPT} image/webp
	RewriteCond %{SCRIPT_FILENAME}.webp -f
	RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>

<IfModule mod_headers.c>
	Header append Vary Accept env=REDIRECT_accept
</IfModule>

<IfModule mod_mime.c>
	AddType image/webp .webp
</IfModule>

```

## 確認方法

### 方法①
ぱっと見じゃ全然分からねぇので
コンソールでcontent-typeを確認します。
↓Networkタブ内に出力されてるレスポンスヘッダです。
![スクリーンショット 2020-03-04 11.44.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23195/1defdd31-1204-a482-3c69-11484466724c.png)

### 方法②

Chromeのプラグイン
[WebP Highlighter](https://chrome.google.com/webstore/detail/webp-highlighter/aonapkfkfneahhaonjjpmcabpnbdmojl)

これを使うと一目瞭然！...なのだが目がチカチカするので必要な時以外はDisableにしておくことをオススメする。
WordPress ライトボックスを投稿記事ではなくメインページで使用する方法

お世話になります。

WordPress 5.3.2にて、プラグイン”Easy FancyBox”や、”Responsive Lightbox & Gallery”を使用し、ライトボックスを投稿記事ではなく、front-page.phpで使用する方法を探しております。

色々検索しても投稿記事で表示させる方法のため、分からずご質問させていただいております。

投稿記事では画像のリンク先の設定をメディアファイルに設定で出すようですが、front-page.phpの中で使用する場合にもリンク先の設定をメディアファイルに設定することは出来るものでしょうか。

お手数ですが、ご教示頂けますと幸いです。
宜しくお願いいたします。
遅ればせながら、Flutterを始めてみる。（１）

# Flutterってなんだ。

- Flutter公式→ https://flutter.dev/
  - Google 製のアプリケーションUI構築ツールキット
  - iOS/Android どちらでも使える。両対応
  - 何やらいろいろ出来るらしい

- インストール
  - https://flutter.dev/docs/get-started/install
  - 公式の読み物が素晴らしいらしい（？）ので、それだけでも理解できるかも？

# なぜ今になってFlutter？
- iOS/Android両対応なのに惹かれた
- どうやら[Rive](https://rive.app)というのがFlutterに対応している
  - こいつがUI作るのには、すごい優秀に見える
- そんなわけで覚えてみようかなという安直な奴

追記か続き投稿予定

以上

# 参考
- Flutter公式
  - https://flutter.dev/
- Flutter でモバイルアプリを作ってみる 入門編
  - https://apps-gcp.com/introduction-of-flutter-about-header-and-footer/
- LinuxとかWindowsでiOSのEmulator使える？Flutterならね。
  - https://stackoverflow.com/questions/40567540/is-it-possible-to-develop-ios-apps-with-flutter-on-a-linux-virtual-machine
- Rive公式
  - https://rive.app
WEBrickでちょっとしたApplicationサーバーをたてる

# 背景

Faradayを使って外部のAPIからデータを取得するスクリプトを書いているけど、HttpStatusによる挙動をテストしたい。外部APIなので、いろんなレスポンスのHttpStatusを自由に変更できないので、自前でテスト用のサーバーを用意したいけど手間を掛けたくない。そんな時にWEBrickで簡単に環境を作れるよ、というお話。



# Webrickの起動と使い方

WEBRickサーバーの起動用スクリプトと、ページ用のスクリプトを用意する。

```webrick.rb
#!/usr/local/bin/ruby
# frozen_string_literal: true

require 'webrick'
opts  = {
  BindAddress:    '0.0.0.0',
  Port:           '7777',
  DocumentRoot:   './',
  CGIInterpreter: '/usr/local/bin/ruby'  # 環境による。DockerのRubyコンテナならこれでいい
}

server = WEBrick::HTTPServer.new(opts)

# /page にアクセスしたら page.rb を cgi で動かす
server.mount('/page', WEBrick::HTTPServlet::CGIHandler,  './page.rb')

Signal.trap(:INT){ server.server } # Ctrl+C で止める

server.start  # サーバースタート
```

```page.rb
#!/usr/local/bin/ruby
# frozen_string_literal: true
$SAFE = 1
require 'cgi'
cgi = CGI.new

cgi.out(type: 'text/html',
        charset: 'UTF-8',
        status: 200) do
  # return する文字列がBodyとして出力される
  '<html>Hello World</html>'
end
```


これらを同じディレクトリに設置して `webrick.rb` を実行すればよい。

```console
$ ruby webrick.rb
[2020-03-04 02:43:08] INFO  WEBrick 1.4.2
[2020-03-04 02:43:08] INFO  ruby 2.6.3 (2019-04-16) [x86_64-linux]
[2020-03-04 02:43:08] INFO  WEBrick::HTTPServer#start: pid=240 port=7777
```

これで`http://localhost:7777/`にアクセス出来る。


## CGIでRubyファイルを実行しているのだ

`webrick.rb` でWEBRickサーバーの実行を書いている。特に難しい内容はない。`server.mount('/page', WEBrick::HTTPServlet::CGIHandler,  './page.rb')`としているので、`http://localhost:7777/page` に接続すると `page.rb` が実行される。  
  
エンドポイントを追加したい場合は同じようにマウントしてやれば良い。  

`webrick.rb`で`CGIInterpreter`を指定しているのでRubyでcgiが実行される。



## `page.rb` でHTTP Status Code を変える

`page.rb` で普通にRubyのコードを書いたら良い。これも難しいことはない。
ハッシュの `status: 200` を404にしたり502にすればよい。



# もろもろめんどくさいからワンライナーでいいじゃん

```console
$ ruby -rwebrick -e 'Thread.start{s=WEBrick::HTTPServer.new(
DocumentRoot:".", Port:"7777", CGIInterpreter:"/usr/local/bin/ruby");
s.mount("/page", WEBrick::HTTPServlet::CGIHandler, "./page.rb");
s.start}; gets'
```

`http://localhost:7777/page`にアクセス出来る
Flaskの個人用メモ その2

Flaskを業務で初めて利用するため、メモ書きをする。
今回はその2。

その1は[こちら](https://qiita.com/speedstar18fct/items/eb0159c109172a90ca70)

### 参考
[Webアプリ初心者のFlaskチュートリアル](https://qiita.com/kiyokiyo_kzsby/items/0184973e9de0ea9011ed)

# DB(SQLite)操作

## 設定用ファイルの作成

作成するファイルは最低限3つ

- `__init__.py`
  - 中身は空でOK。モジュールとして呼び出す際に__init__.pyという名前のファイルが必要なため作らないといけないらしい
- `datebase.py`
  - DB設定系のファイル
- `models.py`
  - テーブルのカラム情報を定義するためのクラス管理用

## sqlalchemyのインストール

```
pip install sqlalchemy
```

## SQLite3をシェルから使えるようにする
https://www.sqlite.org/download.html

上記サイトから`sqlite-tools-win32～～～.zip`みたいなものをダウンロードした後に、
PATHでPythonのコマンド実行場所として指定してあるフォルダ(～～～/script/)へ中身のexeファイルをコピー

## SELECT

```python
from models.models import TestModelContent

items = TestModelContent.query.all()
return render_template("index.html", items = items)
```

## INSERT

```python
from models.database import db_session
# from datetime import datetime

name = request.form["name"]
content = TestModelContent(name)
db_session.add(content)
db_session.commit()
```

## UPDATE

```python
content = TestModelContent.query.filter_by(id = request.form["update"]).first()
content.name = request.form["name"]
db_session.commit()
```

## DELETE

```python
content = TestModelContent.query.filter_by(id = id).first()
db_session.delete(content)
db_session.commit()
```
チームでmaster keyを共有し、本番環境にも設定する方法【環境変数】

###環境変数とは何か？

マスターkeyなどをGITHUBなどにあげると、全員にキーがバレてしまうので、隠さないといけません。
そこで、環境変数の出番というわけです。

###環境変数の設定方法は？

環境変数の設定方法

```
$expert 変数名="hogehogehoge"
$ export RAILS_MASTER_KEY=マスターキーを
↑マスターキーを設定する場合 
```

###チームでmaster keyを共有する方法
rails new を行った際に、gitignoreにmaster keyがデフォルトで入っているが、メンバー開発を行い際に、githubにプッシュした際にmaster keyが無い。

全員でymlとmaster keyを共有するには
1.slackなどでmaster keyを共有
2.他の人は自分でconfig内にmaster keyファイルを作成し、受け取った内容をコピーする
3.slackを削除する


###本番環境にもmaster keyを渡さなければならない

本番環境からgitをpullした際にgitignoreにmaster keyを入力していると、本番環境にpullできないので、本番環境にも環境変数を与えるようにしなければなりません。

本番環境では、「etc/environments」ファイルに記述を行うことで環境変数を設定することができます。

その為に行うのが、本番環境にログイン→etc／environment→master keyの手順です。

```
コンソール
$ ssh -i ~/.ssh/（pemファイル名） ec2-user@（EC2のElastic IP）

[ec2-user]$ sudo vim /etc/environment

```

ここで、iを押すとコードが打てるようになります。

```
RAILS_MASTER_KEY='master.keyの値'

```

これで完了なので、exitで出てから確認しましょう！

```

[ec2-user]$ exit
$ ssh -i ~/.ssh/（pemファイル名） ec2-user@（EC2のElastic IP）
[ec2-user]$ env | grep RAILS_MASTER_KEY

```

以上で、master keyを環境変数を設定し、チームメンバーに共有、本番環境からpullすることができました。
Flaskの個人用メモ その1

Flaskを業務で初めて利用するため、メモ書きをする。

### モジュールの利用

```python
from flask import Flask,render_template,request

# from モジュール import クラス1, クラス2, クラス3...

```

### GETリクエストの受け取り方

```python
# requestクラスを使用
from flask import Flask, render_template, request

name = request.args.get("name")
```

### POSTリクエストの受け取り方

```python
# requestクラスを使用し、POSTで受け取った場合のメソッドを用意する
from flask import Flask, render_template, request

@app.route("/post", methods = ["post"])
def post():
    name = request.form["name"]
    # リストの場合はgetlistを利用する
    names = request.form.getlist("names")
```

### 変数のレンダリング

```python
# コントローラ側
 render_template("index.html", name = name)

# テンプレート側
<div>{{name}}</div>
```

### テンプレートでのif文利用
```python
# テンプレート側
{% if name == "tokyo" %}
<div>首都{{name}}</div>
{% elif name %}
<div>{{name}}</div>
{% else %}
<div>無名</div>
{% endif %}
```

### テンプレートでのfor文利用
```python
# テンプレート側
{% for city in cities %}
<div>{{city}}</div>
{% endfor %}
```

### ルーティング
```
# GET
@app.route("/get")
def get():

# POST
@app.route("/post", methods = ["post"])
def post():
```

### モジュールをまとめてインストール

```
pip install -r requirements.txt
```

requirements.txtの中身はこんな感じ

```
Flask==1.1.1
SQLAlchemy==1.3.10
・
・
・
インストールしたいモジュールをどんどん追加していく
```

[その2](https://qiita.com/speedstar18fct/items/9eb11544ffabd470916d)へ続く
Springフレームワーク全体構成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593810/656315ab-63fb-b64f-9d92-63236d440f84.png)
フレームワーク	ArtifactId	概要
Spring Core	spring-core	Springフレームワーク全般で必要となる中心機能。
Spring Beans	spring-beans	プログラムで必要となるコンポーネントをBeanとしてインスタンス化して利用するための機能。
Spring Context	spring-context
spring-context-support	アプリケーションのコンテキストを扱うための機能。
DIコンテナに必要なApplicationContextなどコンテキスト利用のためのクラス類がまとめられている。
Spring Expression Language
spring-expression	Springの設定を行うXMLなどで、JSPのEL式のような機能を提供する。
Spring AOP	spring-aop	AOP（Aspect Oriented Programming）のインタフェースを提供する。
機能としてはメソッドのインターセプト定義をし、共通処理を組み込むなど。
これらはAspectJ（Xerox社オープンソースライブラリ）の機能を核にして作成されており、実質的な実装はこれとなる。
Spring JDBC	spring-jdbc	標準JavaAPIであるJDBC（Java Database Connectivity）の機能を提供する。
Spring Object/Relational Mapping	spring-orm	Hibernate、iBatisといったORM（Object Relational Mapping）のための統合層を提供する。
Spring Transaction	spring-tx	トランザクション管理機能を提供する。
Spring 各ORMのトランザクションを統一的に扱う方法が用意されている。
Spring Web	spring-web	Webアプリケーションのための機能を提供する。
（HTTP通信、マルチパートファイルなど）
Spring Web MVC
spring-webmvc	SpringMVCに関する機能を提供する。
DispatcherServletがコアとなり、各機能の呼び出しを全て行う。

２．DIコンテナ概要
Springフレームワークのコア機能であるDIは「Dependency Injection」の略で「依存性注入」を実現する機能となる。

IoC（Inversion of Control）とも呼ばれる。

主な目的はコンポーネント（作成したプログラム部品）から特定のデータや設定を排除し、プログラム間疎結合の実現などにある。

これら詳細の概念やメリットについては、各種記事や文献を参考いただきたい。



基本となるDIコンテナの簡単な処理イメージを以下に示す。

DIコンテナ機能により、コンポーネントから依存性を排除する以外に、インスタンスの管理（newの箇所）もフレームワーク側へ移譲することができる。
![1q.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593810/2a219d25-b560-de37-ef70-b9e57d74e1d1.png)


３．SpringMVC概要
SpringMVCの全体構成（構成、階層、処理フロー）を以下に示す。

※TERASOLUNA開発ガイドの図を転載(*1)
![2q.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593810/ca62fc33-ad30-58ef-905d-cde22af3abd9.png)
clip-pathでマウスオーバー箇所をくり抜く

# 完成物

<p class="codepen" data-height="600" data-theme-id="dark" data-default-tab="css,result" data-user="ririli" data-slug-hash="PoqKyyR" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="PoqKyyR">
  <span>See the Pen <a href="https://codepen.io/ririli/pen/PoqKyyR">
  PoqKyyR</a> by ririli (<a href="https://codepen.io/ririli">@ririli</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


## ちょっと解説
clip-pathはもともと指定した要素を切り抜くためのパラメータで、今回だとデフォルトでは以下のように指定してます。

```
clip-path: circle(30% at 0 0);
```

x=0, y=0の場所を円形に30%の大きさで切り抜く、という指定です。

このatの後ろの座標をJavaScriptで動的に変更しています。

```
document.body.addEventListener("mousemove", function(e){
  
    //座標を取得する
    let mX = e.pageX;  //X座標
    let mY = e.pageY;  //Y座標
    document.getElementById("background").style.clipPath = "circle(30% at " + mX + "px " + mY + "px)";
  });
}
```

## あとがき
切り抜く形もかなり自由が効くのでいろいろなやり方で楽しめそうですね。
iTerm2 の初期にやる設定

# フォントサイズを変更したときに画面サイズを変えないようにする

General -> Window

Adjust window when changing font size

を off にする

# 新しい pane を開いたときに同じディレクトリで開く

Profiles -> General

Working Directory を

Reuse previous session's directory にする


# 色を変える

Profiles -> Colors

ここで変える。

# フォントサイズを変える

文字が大きいのがすきなので

Profiles -> Text

ここで変える。
Spring概要

https://sites.google.com/site/soracane/home/springnitsuite/spring-mvc/1-ji-ben-gai-nian-quan-ti-dena-chu-lifuro

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593810/bf0360d2-a12f-6d98-48b4-365734f61dd5.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593810/73f6e614-36e1-7211-056c-1227d186106c.png)
[vagrant]vagrant box addやvagrant upを行うと416エラーが出た理由と対処

# 概要
vagrantによる仮想開発環境構築を行おうとしたが、
`vagrant box add `を行ったら、

```
An error occurred while downloading the remote file. The error
message, if any, is reproduced below. Please fix this error and try
again.

The requested URL returned error: 416
```

と出て先に進まなくなった。
検索をかけても日本語情報が出てこなかったため書いた。

# まず、416エラーって何よ
簡単にまとめると**「お前が要求してる情報なんか違くね？」** って感じです。（語弊あり）

詳しくは以下
[416 Range Not Satisfiable - MDN](https://developer.mozilla.org/ja/docs/Web/HTTP/Status/416)

通常このエラーが返った時、ブラウザは改めて
**「ごめんよ、じゃあもう一回情報内容教えて」**
と再接続を行うのですが、vagrantではこの再接続を行わずにエラーとして吐き出してしまうため処理が止まってしまっているようです。

# 解決編
つまり、何らかの要因で接続が途中で切れてしまった場合、そのアクセス先の情報の削除を行わずに古い情報のままでvagrantが再取得に行っているのが問題のようです。
そのアクセス先の情報を消してしまいましょう。

```
cd ~/.vagrant.d
rm -rf tmp/*
rm -rf data/machine-index/*
```

お疲れさまでした。
exaをls互換にする

# exaなかなかおしゃれっすね！

[ls よりも exa を使おう！モダンな Linux コマンド達を紹介 \- Qiita](https://qiita.com/navitime_tech/items/c249269a3b47666c784b)

カラフルでいいですね。
黒地に白文字オンリーの色のない生活は嫌です。

でも... lsと互換じゃないところがある！

ということで `~/.bashrc` に追記。


```bash:.bashrc
if [[ "${-/i/}" = "$-" ]] ; then
    if [[ -x $HOME/.cargo/bin/exa ]] ;then
        function ls {
            if [ ! -t 1 ] ; then
                #パイプされているので互換性のために
                command ls "$@"
                return
            fi

            local OPT=`getopt -o Sa1ltrd --long all,help,oneline -- "$@"`
            if [ $? != 0 ] ; then
                echo "use the ls, Luke" >&2
                return 2
            fi
            eval set -- "$OPT"

            local newopt=("--time-style" "long-iso" "--icons" "--classify")
            local witht=""
            local withr=""
            local withS=""
            while true ; do
                case "$1" in
                    -t)
                        witht=1
                        shift
                        ;;
                    -r)
                        withr=1
                        shift
                        ;;
                    -S)
                        withS=1
                        shift
                        ;;
                    --)
                        shift
                        break
                        ;;
                    -*)
                        newopt=("${newopt[@]}" "$1")
                        shift
                        ;;
                    *)
                        break
                        ;;
                esac
            done

            if [[ $withS && $withr ]]; then
                newopt=("${newopt[@]}" "--sort" "size" "--group-directories-first")
            elif [[ $withS ]]; then
                newopt=("${newopt[@]}" "--sort" "size" "-r" "--group-directories-first")
            elif [[ $witht && $withr ]]; then
                newopt=("${newopt[@]}" "--sort" "newest")
            elif [[ $witht ]] ;then
                newopt=("${newopt[@]}" "--sort" "oldest")
            elif [[ $withr ]] ;then
                newopt=("${newopt[@]}" "-r")
            fi

            newopt=("${newopt[@]}" "$@")

            $HOME/.cargo/bin/exa "${newopt[@]}"
        }
    fi
fi
```

cshから引っ越して何年たったかわかりませんが（老害発言）、bashrcが肥大化しすぎてzshへの引っ越しが全然すすまないという悲しみ。

ということで、たまには小ネタ投稿でした。
Spring Framework　1回目

https://spring.io/projects/

Javaの開発では、高度な技術を簡単に導入できる「フレームワーク」が不可欠です。数あるフレームワークの中でも、Javaプログラマにとってもっとも広く支持されているのが「Spring Framework」です。ここでは、基本となる機能をピックアップし、その働きと使い方を説明していきましょう。
https://www.tuyano.com/index2?id=4466003

1. Springプロジェクトの作成
Spring Frameworkは、「Spring Tool Suite」などを使い、Apache Mavenでプロジェクトの作成からデプロイまでを行います。まずは、どうやってプロジェクトを作り実行するのか、その基本から説明していきましょう。

https://www.tuyano.com/index3?id=10646003

2. Dependency Injection（DI）とBean
Spring Frameworkの根幹は「Dependency Injection（依存性注入）」にあります。これは一体、どういうものなのでしょうか。その基本的な使い方を覚え、DIの働きを理解しましょう。
https://www.tuyano.com/index3?id=9616003

3. アノテーションによるDIの実装
Beanの利用は、Bean設定ファイルを使わず、クラスにアノテーションを記述して行うこともできます。この方法の基本を覚え、Beanと、更には「コンポーネント」を利用できるようになりましょう。
https://www.tuyano.com/index3?id=7606003

4. AOPの利用
DIと並びSpring Frameworkのコア機能となっているのが「AOP」と呼ばれる技術です。クラス内に外部から「処理」を挿入するAOPの仕組みと基本的な使い方についてここで理解しましょう。
https://www.tuyano.com/index3?id=6566003

5. AspectJを利用する
AOPを実現するものとして、Javaでは「AspectJ」というライブラリが広く使われています。Spring AOPで、このAspectJを利用したAOP処理について説明しましょう。
https://www.tuyano.com/index3?id=7606006

6. Spring Data JPAの利用
データベースアクセスに関するフレームワークとしてSpring Frameworkに用意されているのが「Spring Data JPA」です。これは文字通り、JPAを利用してデータアクセスを行うためのものです。その基本的な使い方について説明しましょう。
https://www.tuyano.com/index3?id=7626003

7. CRUDの基本をマスターする
データの作成（Create）、取得（Read）、更新（Update）、削除（Delete）の４つが、データベースアクセスの基本といえます。これらの基本操作について説明しましょう。
https://www.tuyano.com/index3?id=9736003

8. JpaRepositoryを利用する
Spring Data JPAでは、「JpaRepository」という機能を使うことで、非常に簡単にデータの検索が行えるようになります。その基本的な使い方をここで覚えましょう！
https://www.tuyano.com/index3?id=12626003


Spring Framework / Spring Bootに入門する人はまずこの資料を読もう！ #jsug
https://qiita.com/suke_masa/items/9dd3300c3190d6445ff8
Visual Studio 2019 のオプション設定の自分用メモ

# Visual Studio 2019 を自分好みにカスタマイズする

Visual Studio は、`ツール＞オプション...(Ctrl+,)` にて様々なカスタマイズが出来ますが、設定項目が多すぎて目的にたどりつけないことがあるので、自分用の覚書をここにまとめます。

## コードエディタの空白表示

- テキストエディタ＞全般
  -  表示＞空白の表示 をチェックオン

<img width="527" alt="VS2019-editor-show-space.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130677/7f42230b-5692-f38d-3354-1a4cea5a3b03.png">

## フォントおよび色
コードエディタの空白文字表示を有効にすると、色が目に痛いしフォントも気に入らないので変更します。

- 環境＞フォントおよび色
  - フォント："Consolas" を指定する
  - 表示項目＞スペースの表示：前景色 を "銀色" にする

<img width="527" alt="VS2019-font-setting.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130677/2817a4e6-1e25-6e3f-0ee9-cff8298a5236.png">

## タブ文字

コーディング規約（または宗教上の信念）に従って設定します。

- テキストエディタ＞C#＞タブ
  - インデント：スマート
  - タブ：空白の挿入 を選択する

<img width="527" alt="VS2019-editor-CS-tab.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130677/f7d0999f-ccd1-2ee8-6ced-25bed80951af.png">


## EditorConfig

先のタブ文字に関する設定を含めて、言語規則・書式規則・名前付け規則を、ソリューションフォルダ上の .editorconfig ファイルに書き出すことができます。このファイルがあると、ダイアログの設定よりファイル上内の設定が優先します。

- テキストエディタ＞C#＞コードスタイル
  - [設定から.editorconfigファイルを生成] ボタンを押す

https://docs.microsoft.com/ja-jp/visualstudio/ide/editorconfig-code-style-settings-reference?view=vs-2019
さくっと掲示板サイトを作る方法(Jimdo)

#きっかけ
ちょっと暇になったので。
#目標

さくっと(30分以内くらい)で掲示板付きのサイトを立てる
#対象
・匿名性のあるコミュニティーを作りたい人
・休校中にみんなとお話がしたいキッズ共(はQiita読まないか)(自己責任で。そして、決してキッズを貶しているわけではございません。勿論、私もキッズだった時代がありますしね。)(こいつ何言ってんだ)
#やってみよう(序章)
###1 Jimdoのアカウントを作る
http://jp.jimdo.com/
こちらからどうぞ
###2 サイトを立てる
Jimdoにログインして、ダッシュボードに移動し、新規ホームページをクリック
![C9431792-8E04-4EA0-8365-FA6ADA7B8E1D.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482921/db94cd07-ee10-496d-be90-f2735a661bdb.jpeg)
いろいろ聞かれるが、ホームページ>ジンドゥークリエイター>スキップ>
(適当なレイアウト選んで)>Free(料金プラン。お好みで)>ドメイン決めて>(無料)ホームページを作成！
で終わる。(ハズ。更新とかで変わってたらごめんね)
###3 サイトをきれいにする
のは省略。それは他のサイトで見てください(ぺこり)
#ようやく本題
###1 ページを作る
適当にページ作っといてください。
###2 そこに「ゲストブック」を追加する
その他のコンテンツ＆アドオンにあるので、とっても分かりづらい
###3 ゲストブック(掲示板)の設定をする
と言っても、お好みでやっとけばいいと思う(メールでの通知はオフ推奨)
<img width="1366" alt="7DA5473C-B9FF-4D5C-8F8E-2F7BBC1FC762.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482921/41f7243d-cf33-d1b1-f6bd-05c4de483e66.jpeg">

#完成！
結構(すごく)簡単だったと思いマウス。
管理メニュー>基本設定>パスワード保護領域　でサイトにパスワードをつけて、クローズドなものにもできます。
暇したら、Webサイト作成の練習兼暇つぶしがてら、やってみてもいいのではないでしょうか。
作ったの貼ってる(↓)んで、見てみてください。(閉鎖するかも)
https://keizibann.jimdofree.com/
パスワード:test
element14 の EXPLORE-NFC-WW で NFC 試してみる

NFCでやってみた実験一覧

- Felica でつくる簡単な入退室管理  (Rasbpberry Pi に複数台のカードリーダ) 
 - https://qiita.com/nanbuwks/items/e0988d8fec131baa579d
- RaspberryPi で NFC RFID-RC522  
 - https://qiita.com/items/c502ba880fbb93f522b3
- element14 の EXPLORE-NFC-WW で NFC 試してみる
 - https://qiita.com/items/0c436941a0c5f0a257b1
- Arduino ESP32 と STM32 で NFC RFID-RC522
 - https://qiita.com/nanbuwks/items/96c3c2d2af2cf97f3797
- RaspberryPi + ondryaso/pi-rc522 ライブラリで Mifare を操作する
 - https://qiita.com/nanbuwks/items/9cbf05609974870e9088
- STM32 で HID キーボード入力する カードリーダーを作る
 - https://qiita.com/nanbuwks/items/53839cfee81346ffd6c4


# EXPLORE-NFC-WW
![IMG_20200304_121841.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/0168cffc-a015-21ec-fa83-2e0084c4d68b.jpeg)

NXP PN512 搭載の RaspberryPi 用 HAT。
![IMG_20200304_121631.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/682c3b11-b5b8-6960-990f-f3c3a68c6f9e.jpeg)

PN512 は Full NFC Forum-compliant frontend とあり、読み込み／書き込みやP2P、カードのエミュレーションもできるらしい。Felicaにも対応している。
https://www.nxp.com/docs/en/data-sheet/PN512.pdf

EXPLORE-NFC-WW は element14 の名前を冠して販売しているけどどうやらNXPのリファレンスボードかな？

2013年頃販売開始かな？ 今では手に入りづらいけど、以前買っておいたものをテスト。

# 環境

Raspbian Buster Lite

# 取扱説明書

外箱の説明には、

www.element14.com/exploreNFC

に行けとあるが、アクセスすると

https://www.element14.com/community/docs/DOC-71574

にリダイレクトされる。

ここの、

「Getting Started Guide (.pdf)  」

はリンク切れである。

element14 では、とりあえずここ
https://www.element14.com/community/docs/DOC-71574/l/explore-nfc-board-for-raspberry-pi

に集まっているようだ。

また、 EXPLORE-NFC-WW で検索してもあまりないけど EXPLORE-NFC で検索すると出てくる。

https://www.nxp.com/products/rfid-nfc/nfc-hf/nfc-readers/explore-nfc-exclusive-from-element14:PNEV512R

が公式ぽい。ここの


「Application Note  ( 1 )
Quick Start-up Guide for EXPLORE-NFC working with Raspberry Pi (REV 2.6 )
」



で公開されている pdf ファイルに沿って作業。

# インストール

あらかじめ、RaspberryPiのSPIを有効にしておく。

「Embedded Software  ( 5 )
BSP, Drivers and Middleware  ( 4 )
NFC Reader Library for Linux V4.010.03.001609 (REV 1.0 ) 」

から、SW2827.zip をダウンロード、

を解凍し、出てきた
  libneardal0_0.14.3-1_armhf.deb
  neard-explorenfc_1.2-1_armhf.deb

をインストール。

# 実行

テストプログラムが使えるようになるので実行してみる。

```

$ explorenfc-basic 
neardal_mgr_prv_get_all_adapters(): Error: 2:GDBus.Error:org.freedesktop.DBus.Error.ServiceUnknown: The name org.neard was not provided by any .service files
No adapter found
```

エラー出る。wiringpiが入っていないためらしい。

```

sudo apt install wiringpi
```

でインストール

動かない・・・と思ったらRaspberryPiの故障でした。交換したら動くようになりました。

「NFC RFID-RC522」
https://qiita.com/nanbuwks/items/c502ba880fbb93f522b3
についてきたICカードをかざしてみました。

```

Waiting for tag or device...
Tag found
ISO14443A ATQA:         0400
ISO14443A SAK:  08
ISO14443A UID:  F2C16B33


```
Androidの画面向きを固定した際に出るワーニングを無視する

`AndroidManifest.xml` で画面の向きを固定しているとWarningが出るようになりました。

> Expecting android:screenOrientation="unspecified" or "fullSensor" for this activity so user can use the application in any orientation and provide a great experience on Chrome OS devices

どの向きでも使えるようにしたほうがユーザ体験がいいので `unspecified` か `fullSensor` を使うことを推奨するWaningなので、画面を固定しなければならないアプリではWarningを無視するパラメータを追加すると良いと思います。

```AndroidManifest.xml
    // tools:ignore="LockedOrientationActivity" で無視
    // 全体的に無視したい場合はapplicationで設定
    <application
        android:icon="@drawable/app_icon"
        android:label="@string/app_name"
        android:theme="@style/AppTheme"
        tools:ignore="LockedOrientationActivity">

    </application>
```


# 参考
https://stackoverflow.com/questions/58519021/in-androidmanifest-expecting-androidscreenorientation-unspecified
https://developer.android.com/guide/topics/manifest/activity-element?hl=ja
Could not detect target hardwareについて

# はじめに
JetPackでJetsonをセットアップしていると，このような画面になってJetsonが見つけられないことがあります．
![InkedScreenshot from 2020-03-04 10-00-42_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212330/4a94f9b6-f9b2-868a-40d1-e429b46c4123.jpeg)
これは電源管理ソフトウェアであるtlpパッケージが原因です．

# 解決方法
解決方法は2つあります．

## 1. tlpを消去
tlpを消去すれば解決します．

```bash
$ sudo apt remove tlp
```
ですが，どうしても消去したくない場合があります．
その場合は，解決方法の2つ目を参照してください．

## 2. ブラックリストに入れる
tlpによってUSB自動サスペンドが機能しているとその影響でリカバリーモードのJetsonが見つけられないようです．
tlpの設定に以下を追記して自動サスペンドのブラックリストに追加します．

/etc/tlp.conf

```
USB_BLACKLIST = "0955：7c18"
```

これで問題は解決します．

# 参照
[SDK Manager - Could not detect target hardware -NVIDIA DEVELOPER](https://devtalk.nvidia.com/default/topic/1048803/jetson-tx2/sdk-manager-could-not-detect-target-hardware/post/5398897/#5398897)
[VLC] 再生時に最前面にならない問題の対処法

# はじめに
プレイヤーが隠れているときにファイルエクスプローラーの動画をダブルクリックしたときに、プライヤーが最前面に来なかったので調べました

# 対処法

ツール >> 設定　>> 詳細の表示 >> すべて　>> メインインタフェース >> Qt >> インターフェースを手前に表示するタイミング　>> オーディオ/ビデオ
FramerXで作成したプロトタイプを共有する方法

#はじめに
開発でFramerXを使ってモバイルアプリのプロトタイプを作成し、webで公開しました。FramerXは全体的に日本語の資料が少ないので、備忘録も兼ねて共有方法を投稿しようと思います。

FramerXでデモを共有・プレビューする方法は主に３種類あります。それぞれ順を追って説明していきます。

　・Preview
　・Live Preview
　・Export Web Preview

#Preview
作成したプロトタイプを自分のPCで確認する際に使用する方法です。選択したフレームのプレビューを作業中のPCで見ることができます。この機能だけではプロトタイプを共有はできません。

[ Window ] -> [ Preview ]でプレビューを見ることができます。
 
![1_FjsJDEds0ciH8VrPxLvaTg.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560888/1527c4aa-4bc8-00bb-9b4a-043c732a79c4.jpeg)

#Live Preview
一時的なwebリンクを作成しプレビューする方法です。このリンクは誰とでも共有できますが、FramerXでプレビューが公開されている場合にのみアクセスできます。つまり、FramerXを終了すると、リンクが切れてしまいます。

右上隅にある中央のボタンをクリックするとWebリンクが作成されます。プロトタイプへの変更は、リアルタイムで更新されます。
![1_pJm6kmkERA6boSLm6JbBPA.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560888/2a27e78f-59b3-b9e3-9f0f-ec75c7aadc35.jpeg)

#Export Web Preview
データをエクスポートし、プロトタイプを永続的に共有する方法です。

対象のフレームを選択し[ File ] -> [ Export Web Preview ]でプロトタイプをエクスポートします。保存先にフォルダが生成され、中のindex.htmlをクリックすると、Webブラウザーでプロトタイプが起動します。

webにプロトタイプを公開する場合はこのフォルダをプライベートサーバーやNetlifyなどのサービスを介してホストします。

[Netlify](https://app.netlify.com/drop)を使えばファイルを簡単に公開することができます。

リンクを開きフォルダをドラッグ&ドロップするだけでwebに公開できます。サインアップをしないと２４時間でリンクが切れてしまいますが、サインアップをすれば永続的に共有することができます。
<img width="778" alt="スクリーンショット 2020-03-04 10.16.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560888/82de85b8-68fc-35c9-2306-0bf94dee2f5d.png">

FramerXを使うと簡単にプロトタイプが共有できますね！

以上
macOSで F-Secure 入れる際に、ESETが残っているよとエラーが出る場合

## 環境

+ macOS 10.15.3
+ ESET Cyber Security Pro V6.8
+ F-Secure Computer Protection 17.8

## 標準のアンインストーラ実行

https://eset-info.canon-its.jp/support/wc0102/#ECSP
該当バージョンのアンインストーラを実行。

その後 F-Secure のインストーラを実行してみると、、、

```
互換性のないソフトウェアが検出されました
この製品は、インストールされているマルウェア対策ソフトウェア (ESET, spol. s r.o.) と互換性がありません。インストールする前に互換性のないソフトウェアを削除してください。
```

まだ何かが残っている…？

## ESETの残存ファイルをコマンドで削除してみる。

参考：
https://community.f-secure.com/en/discussion/118798/installing-f-secure-anti-virus-on-mac-incompatible-software-detected

```
sudo rm -rf /Library/Application\ Support/ESET
```

その後 F-Secure のインストーラを実行してみるといけました。
【rubocop】こんな警告文がたくさん出た、Please set Enabled to either `true` or `false`

# rubocopの0.8.1で警告が出た、Please set Enabled to either `true` or `false`
このバージョンで新規に追加されたオプションがあると警告が出るようです

今回はこの3つ

```
- Style/HashEachMethods (0.80)
- Style/HashTransformKeys (0.80)
- Style/HashTransformValues (0.80)
```

設定ファイルで有効か無効化を選んで指定してくださいと言われてます。

version1まで、この3つのオプションは任意で有効にするか、無効にするかを選べます。
version1になると強制的に有効になるので、今のうちから true にしておくのが良いでしょう。


```
The following cops were added to RuboCop, but are not configured. Please set Enabled to either `true` or `false` in your `.rubocop.yml` file:
 - Style/HashEachMethods (0.80)
 - Style/HashTransformKeys (0.80)
 - Style/HashTransformValues (0.80)
For more information: https://docs.rubocop.org/en/latest/versioning/
```


## 修正方法
警告文にある通り、設定ファイルにこのオプションを利用するかどうか明記しましょう
そして怒られたら、直しましょう。

```yml:rubocop.yml
# For rubocop < 1.0.0
Style/HashEachMethods:
  Enabled: true

# For rubocop < 1.0.0
Style/HashTransformKeys:
  Enabled: true

# For rubocop < 1.0.0
Style/HashTransformValues:
  Enabled: true
```
【laravel】ErrorException file_put_contents(xxxxx): failed to open stream: No such file or directory

#エラーが発生するまでの過程
```
php artisan serve 
```
↑のローカルのサーバーを立ち上げた状態で開発を進めていた。
1. 開発中にプロジェクトディレクトリの名前を変更したいと思いだす。
2. laravel →　tutorial に名前を変更。
3. control＋ｃ　でサーバーを閉じる。
4. もう一度立ち上げる。
5. タイトルのエラーが発生。

#原因
ディレクトリの名前を変えたことによって、アプリケーション内に設定されていた、パスが通らなくなった。

#解決法
アプリ名/bootstrap/cache/config.php　
にあるパスを再構築することで解決できる。
以下のコマンドで、アプリケーション内のパスが再構築される。

```
php artisan config:cache
```
[EC-CUBE4]docker環境にSoap環境を設定する

# 概要
EC-CUBEでSoap通信を行うまでの設定をまとめる。
ここでは、公式ドキュメントにあるDockerfileを変更してSoap Clientがenabledになるまでを記載する。

**前提条件**
dockerでローカル開発環境が構築されていること。
[公式ドキュメント　Docker Composeを使用してインストールする](https://doc4.ec-cube.net/quickstart_install#docker-compose%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B)

# 現状
以下のコードを書いて実行するとエラーが発生する。

```php
$client = new \SoapClient("wsdlファイルのパス");
```

<img width="1057" alt="スクリーンショット 2020-03-03 22.56.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248644/c7b04542-fef2-b843-00b8-184b7896b417.png">

おそらくこの記事にあるようにsoap通信する環境がないと推測。
[参照記事](https://stackoverflow.com/questions/39347967/symfony2-using-soapclient/43488893#43488893)

phpinfoのPHP欄にsoap情報がない。
<img width="1067" alt="スクリーンショット 2020-03-03 22.55.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248644/14c92e8c-902e-635d-eddf-8b986eb2e896.png">


# 対応
### コンテナ内に入って`php-soap`をインストールする。

```console
root@xxxxx:/var/www/html# apt-get install php-soap
Reading package lists... Done
Building dependency tree
Reading state information... Done
Package php-soap is a virtual package provided by:
  php7.0-soap 7.0.33-0+deb9u6 [Not candidate version]
  php7.3-soap 7.3.14-1~deb10u1 [Not candidate version]
  php7.3-soap 7.3.11-1~deb10u1 [Not candidate version]

E: Package 'php-soap' has no installation candidate
```

インストール候補がない、と言われる。
dockerで環境を構築するときに設定しないとだめみたいなので、設定してBuildする。


### DockerFileを修正、再Build

こちらの[記事](https://stackoverflow.com/questions/50121641/enable-soap-for-php-in-docker-container)を参考に、Dockerfileに以下を追加。
`libxml2-dev`
`&& docker-php-ext-install soap`

```Dockerfile
:
:

RUN apt-get update \
  && apt-get install --no-install-recommends -y \
    apt-transport-https \
    apt-utils \
    build-essential \
    curl \
    debconf-utils \
    gcc \
    git \
    gnupg2 \
    libfreetype6-dev \
    libicu-dev \
    libjpeg62-turbo-dev \
    libpng-dev \
    libpq-dev \
    libzip-dev \
    locales \
    ssl-cert \
    unzip \
    zlib1g-dev \
    libxml2-dev \　　　　　　　　　　　　※追加
  && apt-get clean \
  && docker-php-ext-install soap \　　※追加
  && rm -rf /var/lib/apt/lists/* \
  && echo "en_US.UTF-8 UTF-8" >/etc/locale.gen \
  && locale-gen \
  ;
:
:
```

### 再ビルド

```console
$ docker-compose up -d --build 

これだとmysqlのコンテナも作られてしまうので、
postgresを使っている場合は
docker-compose up -d --build ec-cube postgres mailcatcher
かもしれない
```

### phpinfoで環境確認

PHPにsoapの文字があるので、環境が作られているみたい。
<img width="1068" alt="スクリーンショット 2020-03-03 22.56.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248644/f8e20148-63d6-1cab-73b1-ca423e012b61.png">

Soapの情報があった。Soap Clientがenableになっている。
<img width="962" alt="スクリーンショット 2020-03-03 22.55.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248644/212004a3-ab9c-a387-5af8-4626f9bd8bc0.png">
Vagrant（コマンド）

# 最初に
本ページでは、投稿者が使用したことのあるコマンドを備忘録として記載する内容です。

自身で学習してきた内容を書き出していきます。
基本的には自分自身でわかるような内容になりますので、ご容赦ください。
また、誤っている点がありましたら、コメントにてご指摘ください。

（要確認）マークがあるものは、「実行前に必ずググる」べき内容。



# index
- Vagrantコマンド
  - 起動時
  - ログアウト時
  - シャットダウン時
  - 休止時


# Vagrantコマンド
## 起動時

```terminal:
$ cd xx/xx/vagrant # vagrant上に移動
$ vagrant up # Vagrantを起動
$ vagrant ssh # SSH接続
$ cd /home/vagrant/work # 共有フォルダへ移動
```


## ログアウト時

```terminal:
$ exit # 調子が悪い時は何回か繰り返す
```

## シャットダウン時

```terminal:
$ vagrant halt
```

## 休止時

```terminal:
$ vagrant suspend # 再開はvagrant up
```



# 追加あれば、どんどん更新していきます。
駆け出しとして頑張ります。
Amazon Rekognition 顔登録時のフィルター機能・顔数制限

#Amazon Rekognition 顔登録時のフィルター機能・顔数制限概要
![amareko.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150720/2f4fac31-ac1b-80ed-7c10-4cc19205a61e.jpeg)

Amazon Rekognition IndexFaces API アクション時に登録したい顔の最大個数や、
鮮明ではなくぼやけている顔などを排除することが可能です。

##対象者
1. Amazon Rekognitionで質を保ちたい
2. クオリティーの低い画像を排除しお金を節約したい

デフォルト設定では、ぼけている画像や、背景に紛れ込んでいる顔画像も登録対象となり精度低下を招きます。
従来、IndexFacesすると入力画像の最大15の顔にインデックスを付けます。
顔検出モデルの新しいバージョンでは、入力画像の最大100の顔にインデックスが付けられます。


##使用できるフィルター一覧

**MaxFaces**
登録したい顔画像の最大値を設定できる
登録される画像は鮮明ではっきりした画像が優先度上位。

**QualityFilter**
質の悪い画像を除外するフィルター
QualityFilterを自動にした場合は、Amazonが質の悪い画像を除外してくれる。


##フィルター制度コントロール方法
フィルターをかけるレベルはコントロール可能
フィルターをAmazon側の自動にしたい場合は「**AUTO**」
判定甘めなフィルター「**LOW**」
中間的なフィルター「**MEDIUM**」
厳密なフィルタ「**HIGH**」
フィルタリングしない場合は、「**NONE**」を指定

##フィルター使用例
```python:amareko_filter.py

import boto3

collection = "qrestia"
image_file = "TestImage.jpg"
external_image_id = "Qiita test ID"

def index_faces():
    rekognition_client = boto3.client('rekognition')
    with open(image_file, 'rb') as image:
        
        rekognition_response = rekognition_client.index_faces(
            Image={'Bytes': image.read()},
            CollectionId=collection,
            ExternalImageId=external_image_id,
            QualityFilter="AUTO", #  QualityFilterを「自動」に設定する
            MaxFaces=3) #  顔検出の最大枚数を3つにする
    print(rekognition_response)

if __name__ == '__main__':
    index_faces()
```


##弾かれた原因確認する方法
画像で検出されたが、インデックスされていない顔に関する情報はUnindexedFaceオブジェクトの配列で確認可能です。
この応答から原因を把握し、適宜フィルター調整を行うことができます。

* EXTREME_POSE-顔が検出できないポーズになっています。たとえば、頭がカメラから離れすぎています。
* EXCEEDS_MAX_FACES-検出された顔の数がMaxFacesで指定した数よりも多い。
* LOW_BRIGHTNESS-画像が暗すぎる。
* LOW_SHARPNESS-画像がぼやけている。
* LOW_CONFIDENCE-低い信頼度で顔が検出。
* SMALL_BOUNDING_BOX-顔の周りの境界ボックスが小さすぎる。
【Nuxt.js】v-forディレクティブを使用して連想配列を表示させる

`v-for`ディレクティブを使用して、連想配列のkeyとvalueを表示させた時のメモ

```vuejs:index.vue
<template>
  <section>

        <!-- 省略 -->

        <div v-for="(value, key) in data" v-bind:key="key">
          <b-row class="contents">
            <b-col md="3">
              <p class="label">{{ key }}</p>
            </b-col>
            <b-col md="9">
              <p class="content">{{ value }}</p>
            </b-col>
          </b-row>
        </div>

        <!-- 省略 -->

  </section>
</template>
```

```vuejs

<script>
export default {
  data() {
    return {
      data: associative_array 
    }
  }
}
```
新しいシェルプログラミングの教科書を読んだ感想からのベスト3

買ったのは去年の年末なんです
ちょいちょい朝の通勤電車で読み進めて
約３ヶ月たってようやく読了しました

それはさておき

# 新しいシェルプログラミングの教科書という本を読んでみました
ここにその感想文を書きたいと思います
感想文なんてへたすりゃ中学生以来かもしれません
*中学の頃も好きな一文ベスト３とか書いていたら面白かったかも*

当時の中学生の自分は、

 - パソコンで
 - インターネットで
 - Markdown記法で
 - プログラミングの感想文を

書くなんて思いもしないでしょう
なんせ、将来の夢は漫画家だったんですから

# シェルプログラミングについて、ざっくりとした感想
**初心者〜中級者におすすめです**
初心者と言っても、学生の頃言語を習ってたり、
どこかのスクールに何年か通ってたり、とか
そういうものがまったくない自分みたいな人間が
半年弱あーだこーだ独学に近い状態で勉強したり教わったり、
実践をしたあとの初心者 `エンジニアの中では初学者というそうですね` が
あらためて読み直すと、あーこれね、あーこれこういうことだったんだね
という感じでわかりやすいです
前半はそんな感じで復習ができ、後半からはレベルの高いスクリプトを見せつけられます
二度美味しい内容になっております

また、コマンド一覧はすべて乗っているわけでなく
スクリプトを書く場合に使うであろうコマンドがいくつかあるのも
ちょうどよかったです

サンプルデータもあるので読了後
ダウンロードして復習もできるのがいいですね

~~~bash:つまり、ざっくり例えるとこういうこと？
Linuxという机の上に
bashというノートを置いて
ShellScriptというペンで、
したいことリスト書く
みたいなものですかね
~~~

# こんな{コマンド,書き方}あるんだと思ったもの `ベスト３!`
#### 3位 `: (コロン)` パラメータ展開
さすがに本の内容を乗せられないのと[こちら](http://komaken.me/blog/2014/07/21/bash%E3%81%AE%E6%8B%AC%E5%BC%A7%E3%82%84%E3%82%B3%E3%83%AD%E3%83%B3%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/)のまとまった情報がわかりやすいかと

これ`:`だけで何かが機能するんだという驚きでした
今までは単語の区分けぐらいに使っていたんですが、
こんな使い方もあるんだなーと
`ヌルコマンド` という[:(ヌルコマンド) - 何もしないコマンド](https://linuxcommand.net/null-command/)としても機能しますよね

### 2位 `until` whileの条件逆転版
さすがに本の内容を乗せられないのと[こちら](https://eng-entrance.com/linux-shellscript-until)のまとまった情報がわかりやすいかと

逆転版というのがかっこいいですよね
`!`  意外にも逆転するものがあるんだと
`繰り返しの条件が「偽」でなければならない`
この辺も中二病心をくすぐります
アンティルとか響きもかっこいいですよね

## 1位 `shiftコマンド` 引数を1つずらす
さすがに本の内容を乗せられないのと[こちら](http://sweng.web.fc2.com/ja/program/bash/bash-shift.html)のまとまった情報がわかりやすいかと

使いみちはどこなんだ、と
でも使ってみたら結構便利なんじゃないか、と
このコマンドの内容を読んでいて、通勤電車が短くなった記憶があります
どうやって使おうか、どう使うのが最適なのかを考えるのが楽しいです

こんな使いみちあるよ、という方コメントお願いいたします

# こんな機能が作れるんだと思ったもの `ベスト3!`
#### 3位 `ファイル形式を判別して圧縮ファイルを展開する`
これは本を読んでみてください

これ作って自分用のアプリにしてたら便利だろうなと思いました
というかフリーソフトなどはこういう仕組みで動いているんだろうなと
今まで何気なく使っていたソフトの仕組みをあらためて認識できたようです


### 2位 `複数のファイルから文字列を検索する`
これは本を読んでみてください

結構な頻度で検索つかいますよね
この日のファイルを抽出したい、とか、この時間のファイルとか
これ以上の容量のファイルとかとか
grepやfindでさらにオプションを組合わて検索していますが
その辺をまとめて一つのスクリプトにできるのはいいですよね


## 1位 `コマンドラインでゴミ箱を扱う`
これも本を読んでみてください

なるほど！と思った内容です
Linuxを扱っていて怖いのはなんと言っても
間違えてrmとかmvとかのコマンドを打ったら
めちゃくちゃあっさり対象ファイルが消えてしまうことですよね
*もちろんinfoを表示するオプションもありますが*
なんでゴミ箱みたいなのがないんだろうと思ったらまさにという内容でした
自分でも作ってみたいスクリプトです

### 次回、新しいシェルプログラミングの教科書を復習してみた感想からのベスト3でお会いしましょう！
[squidでhttpsプロキシ] slackのメッセージ読み込みがwebsocketだったので回避する。

# はじめに
sslインターセプトするhttpsプロキシを運用していて、不具合があった点が解消できましたので、記録します。
利用する環境は、前回構築した以下のものです。
**[squidでActiveDirectory連携とSSLインターセプトするProxyをdockerで手軽につくる](https://qiita.com/bashaway/items/6adc75265973de9b5fcc)**

# なにが起こったのか
slackアプリでメッセージが着信しない。
手動で「新しいメッセージを読み込む」をクリックしないと更新されない状態だった。
[![Screenshot from Gyazo](https://gyazo.com/5db6c1f8cc01f3a6bc103efc6e00a61a/raw)](https://gyazo.com/5db6c1f8cc01f3a6bc103efc6e00a61a)


# 原因調査

## 情報収集
まずは公式の情報を確認する。

> Slack の使用には、Slack のメッセージングサーバーとメンバーのアプリやブラウザー間での持続的な接続が必須となります。接続のために Slack はポート443経由の WebSocket を使用しています。
> 場合によっては、プロキシやファイアウォールがこの接続を妨害することがあります。Slack を使用しているユーザーが特定の場所から接続できない場合、または Slack 接続テスト で WebSocket の問題が見られる場合には、以下の方法でプロキシやファイアウォールの設定を変更して Slack への接続を常時オープンな状態に保つ必要があります。

出典：**[Slackの接続問題を管理する](https://slack.com/intl/ja-jp/help/articles/360001603387-Slack-%E3%81%AE%E6%8E%A5%E7%B6%9A%E5%95%8F%E9%A1%8C%E3%82%92%E7%AE%A1%E7%90%86%E3%81%99%E3%82%8B)**

## 接続テスト

ということで、接続テスト用のURL `https://[WORKSPACE].slack.com/help/test` にアクセスしてみる。（[WORKSPACE]はそれぞれのワークスペースに置き換えてください）
テスト結果は以下の通り、websocketがダメのようだ。
[![Screenshot from Gyazo](https://gyazo.com/74b117c478aca55cae2cc9b7e8b30302/raw)](https://gyazo.com/74b117c478aca55cae2cc9b7e8b30302)

公式のワークアラウンドを確認する。

> プロキシで SSL 暗号化解読を行っているかどうかを確認してください。暗号化解読を行っている場合は、プロキシで WebSocket をサポートするか、SSL 暗号化解読から \*.slack-msgs.com、wss-primary.slack.com、wss-backup.slack.com、wss-mobile.slack.com のドメインを除外する必要があります。

出典：**[Slackの接続問題を管理する](https://slack.com/intl/ja-jp/help/articles/360001603387-Slack-%E3%81%AE%E6%8E%A5%E7%B6%9A%E5%95%8F%E9%A1%8C%E3%82%92%E7%AE%A1%E7%90%86%E3%81%99%E3%82%8B)**

# 解決方法

とのことなので、websoketを利用するサーバのリストを作成して、SSL_BUMPの除外をしてみることに。
対象のサーバは、slack公式に記載のあったものたち。

```:wslist
^wss-(backup|primary|mobile)\.slack\.com:443$
^([^/][^/]*\.)*slack-msgs\.com:443$
```

これを、 `squid.conf` に喰わせる。

```:squid.conf
--------8<-----(snip)-----8<----------
# ここでwebsocket対象のリストを作成する
acl wslist url_regex -i "/etc/squid/wslist"

http_port 8081 ssl-bump generate-host-certificates=on dynamic_cert_mem_cache_size=4MB cert=/etc/squid/certs/ssl_bump_ca_cert.pem key=/etc/squid/certs/ssl_bump_ca_privkey.pem
sslcrtd_program /usr/lib64/squid/security_file_certgen -s /var/local/squid/ssl_db -M 4MB
sslcrtd_children 5

# もともとは、以下のようにホワイトリストのもの以外をBUMP対象外としていたが、これをコメントアウトする。
#ssl_bump bump !whitelist

# BUMP対象外とするサイトにwebsocketのリストも含める
ssl_bump bump !whitelist !wslist

sslproxy_cert_error deny all
--------8<-----(snip)-----8<----------
```

これで再度テストしてみる。

[![Screenshot from Gyazo](https://gyazo.com/257d05655ab11e8a176fc16ec4e9ffbf/raw)](https://gyazo.com/257d05655ab11e8a176fc16ec4e9ffbf)


うまくいった。
[![Screenshot from Gyazo](https://gyazo.com/c8dc145529fe5a5fe011cc0769f090a6/raw)](https://gyazo.com/c8dc145529fe5a5fe011cc0769f090a6)