OmniAICreator/Qiita-1.07M huggingface dataset:
vue.js 同じurlに移動する

同じurl。
/article/333/ から /article/777/ に移動する場合。

これが同じ article だとうまく画面が切り替わらない。

そんなときの対応

```hoge.vue


<router-link :to="{ path: '/article/777/'}">
   次のページへ
</router-link>

//略


beforeRouteUpdate (to, from, next) {

    this.nextId = to.params.id;//333
    this.getArticle();
    next();//必須 これを読み出さないと、urlが変わらない

},


//略


getArticle(){
    
    let dataform = new FormData();

    //現在のアドレスバーから 記事 IDを取得
    var id = this.$route.params.id;
    
    //次のIDが空じゃなければ
    if(this.nextId != ''){
        id = this.nextId;
    }

    dataform.append('id',id);
    axios.post('/article/view/', dataform).then(e => {

    }).catch((error) => {

        console.log(error);

    });


},

```

これで url もデータも切り替わる。


# component の場合は？

親メソッドで v-if で制御

```

<articlenote-component :social_id="this.res.social.id" v-if="this.res.social.id"></articlenote-component>

beforeRouteUpdate (to, from, next) {


var tmp = this.res.social.id;
this.res.social.id = '';
next();//必須 これを読み出さないと、urlが変わらない

},

```
[自分用メモ]Springフレームワークについて

## 自己紹介
Javaを勉強したての社会人一年目です。
業務でspringフレームワークを使用しているので、メモとしてまとめています。

Javaに関するアドバイス等募集中です。

## Springフレームワークとは
JavaでWebシステムを開発する時にとても便利なフレームワーク(簡単に言いすぎてるかな笑笑)。

springMVC、springsecurity...等、spring〇〇がいっぱいある。

## 構成(処理の流れ)
くそ雑な図ですが笑笑

![springmvc-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685853/89f0c93f-32ae-733f-4b23-61a3b2a37910.jpeg)

### クライアント側
**1.HTMLファイルやJSPファイル**

### サーバ側
2～6はJavaファイル

**2.controller**
　画面処理等

**3.service**
　DBから取得した値を使ったりする処理等

**4.form**
　1で入力された値を保持する場所
  　setter, getterで値の出し入れ可能

**5.entity またはdomain**
　DBから取得した値を保持する場所
  　setter, getterで値の出し入れを可能

**6.mapper**
　DBと接続する

**7.xmlファイル**
　SQLを記述
Ubuntu16.04で外部リンクからchromeが開かない

ここでは、根本的な解決はできていないのでご注意ください。初投稿です。

# 問題
Ubuntu16.04で外部リンク（slackなどに貼られたURL）をクリックするとGoogleChromeの新しいタブが開き、リンク先が開かない現象。

# 解決策
以下の2つを参考にしました。
[https://teratail.com/questions/122863](https://teratail.com/questions/122863)
[https://qastack.jp/ubuntu/689449/external-links-are-opened-as-blank-tabs-in-new-browser-window-in-chrome](https://qastack.jp/ubuntu/689449/external-links-are-opened-as-blank-tabs-in-new-browser-window-in-chrome)

どうやら、
/usr/share/applications/google-chrome.desktop
の

```
exce=/usr/bin/google-chrome-stable 
```
を

```
exce=/usr/bin/google-chrome-stable %u
```
にすると良いらしいので、早速やってみました。

```
$ cd /usr/share/applications
$ sudo vi google-chrome-stable
```
テキストエディタはお使いのも使用してください。ちなみにviはこの辺を参考にするといいです。
[https://prev.net-newbie.com/linux/commands/vi.html](https://prev.net-newbie.com/linux/commands/vi.html)

これでなおった！やった！
と思いきや、変わらずリンク先は表示されず、、、

このあとも色々調べましたが、これというものはありませんでした。（わかる方がいたら教えてください）

# 苦し紛れの対処法
**・FirefoxとGoogleChromeをハイブリットで使う**

UbuntuのデフォルトブラウザであるFirefoxでは外部リンクを開くことができたので、ブラウザのデフォルト設定をFirefoxに変更しました。しかし、自動翻訳の恩恵が受けられるchromeは捨てがたいのでランチャーにそのまま登録しておき、状況に応じて使い分けていくことにしました。

ブラウザのデフォルト設定は
画面右上の歯車マーク→このコンピュータについて→デフォルトのアプリ
で変更できます。

以上です。
【Git】特定のコミットに対してタグを設定する。

自分用のメモとして残します。


#■やり方
###1.タグを設定
```shell
git tag -a タグ名称 -m'コメント' コミットRev
```

###2.リモートに反映する
```shell
git push origin タグ名称
```

#■余談
タグって頻繁に設定するわけじゃないからド忘れしちゃいます(; ･`д･´)
laravel 前ページ、次ページ

laravel で 前後のページ、及びレコードを取得したい場合がある。
その時の書き方。

```


$next = Article::query()//単数形 User
    ->where('id','>',$request->id)
    ->orderBy('id','ASC')
    //NGユーザーは読み出さない
    ->whereDoesntHave('social', function ($q){
        $q->where('ng',1);
    })
    ->select('id','name')
    ->first();//最初の

//次ページある
if (!empty($next->id)) {
    pd($next->id);
    pd($next->name);
} else {

    pd("次ページはありません");

}



$prev = Article::query()//単数形 User
    ->where('id','<',$request->id)
    ->orderBy('id','DESC')
    //NGユーザーは読み出さない
    ->whereDoesntHave('social', function ($q){
        $q->where('ng',1);
    })
    ->select('id','name')
    ->first();//最初の

//次ページある
if (!empty($prev->id)) {
    pd($prev->id);
    pd($prev->name);
} else {

    pd("前ページはありません");

}



```

こんな感じ。
Laravel5.5 備忘録 ちょっとした備忘録



##気づいたこと

```php
route(ルーティングで指定したname) 
```




```php
view(resources/viewsディレクトリ のビューファイル名)
```
修正点(追記) :
~~view()でも、ルーティングで指定したnameを利用できる。~~
~~view(ルーティングで指定したname)~~
~~運用・保守で、URL変更が起こった時のことを考えて、
viewの中でもnameを指定。~~
>ビューはresources/viewsディレクトリのサブディレクトリにネストすることもできます。ネストしたビューを参照するために「ドット」記法が使えます
https://readouble.com/laravel/5.5/ja/views.html

例えば、resources/views/password/reset.blade.phpだとすると、

```php
view('password.reset')
```

##ちょっと便利な書き方
モデルにリクエストされた新しいデータを入れるとき。

```php
$item = new Item();
$item->name = $request->name;
$item->price = $request->price;
$item->description = $request->description;
$item->stock = $request->stock;
```
↓ 一つ一つ$requestのデータを代入しても良いが、一気にまとめて入れることができる。

```php
$item = new Item();
$item->fill($request->all())->save();
```
[(Laravel) fillを使ってモデルの複数カラムを更新する](https://qiita.com/tkt989/items/c2e01ec2fe91ef5f08d2)
[Laravel 5.5 Eloquent](https://readouble.com/laravel/5.5/ja/eloquent.html)
Reactでデバッグに使う用のテキストエディタを作った

(2020.08.12更新)
npmパッケージとして公開しました。
この記事とは仕様が変わっているので今後はこちらを使うことをお勧めします。
[シンプルなReact用JSONエディター](https://qiita.com/nariakiiwatani/items/dd9b2d724013acc53c8a)


# やったこと

Reactで作ったコンポーネントの動作確認をするのに、渡すpropsを直接ソースに打ち込んでコンパイルして確認して・・・という流れを毎回辿るのは、ホットリロードがあっても辛かった。

何もプロジェクト全体をビルドしなくても、そのコンポーネントに渡すpropsだけを差し替えられれば良いのだから、画面上に置いた`textarea`にJSONを書いて渡せば良いんじゃないかと思ってやってみた。

[DebugTextEditor.tsx](https://gist.github.com/nariakiiwatani/87889a1993d2cffc07233a0f20a0ed11)

# 使い方

例えばこんな感じ。
`onChange`イベントで`handleUpdateDebugData`を発火して、エディタに書かれた内容をJSONにパースして、テストしたいComponentのpropsに渡している。
JSONのパースに失敗したときはエラーの内容がエディタの方に表示される。

```react:使用例

import React, { useState, useCallback } from 'react'
import { DebugTextEditor } from './DebugTextEditor'

const Index = props => {
	const [data, setData] = useState({})
	const [error, setError] = useState("")
	const handleUpdateDebugData = useCallback(str => {
		try {
			setData(JSON.parse(str))
			setError("")
		}
		catch (e) {
			setError([e.name, e.message].join(":"))
		}
	}, [setData, setError])
	return (<>
		<YourComponent data={data} />
		<DebugTextEditor onChange={handleUpdateDebugData} error={error} />
	</>)
}
```

```react:その他オプション
<DebugTextEditor
	// valueで初期値を設定可能
	value=""
	// onSubmitを指定するとSubmitボタンが現れる
	onSubmit={handleUpdateDebugData}
	// 各要素のstyleをprops.styleから上書き可能
	style={
		// 親要素(form)のスタイル
		...
		textarea: {
			// textarea要素のスタイル
			...
		},
		error: {
			// error用要素のスタイル
			...
		},
		button: {
			// button要素のスタイル
			...
		}
	} 
/>
```

# 今後やりたいこと

- エディタ部分は素の`textarea`まんまなので、Tabキーが使えなかったり自動インデントできなかったりでJSON文字列を書くには辛い
	- [Editor.js](https://editorjs.io/)とか[Draft.js](https://draftjs.org/)とか使えば良いのかなとも思うけど手を出せてない。やりたいことに対して手段がデカすぎる気もしている。
- npmで公開しないと、正直、自分がこの記事を読んだとして、使ってみようとは思わない。
    - 単にやったことないからだろうけどハードルの高さを感じている。うーん。
- Productionビルド時に勝手に消えてくれたらいいなあ
- ページをリロードする度に打ち込んだ文字列が消えるので、LocalStorageに保存しておきたい
- styleの指定方法が小慣れてないので、なんか良い方法あったら知りたい
nextjsで複数のレイアウトをサーバー側(SSR)で特定し出力したい

# useStateを使う問題

https://nextjs.org/docs/advanced-features/custom-app
ページ全体に共通なレイアウトはcustom-appを使って設定できる、が`useState`なんかをして動的に変更すると一瞬DefaultLayoutが表示されて、その後にLayout2に切り替わるようなことになってしまう。

```tsx:雑な例
import type { AppProps } from 'next/app'
...
...

function MyApp(props: AppProps) {
  const { Component, pageProps } = props
  const [layoutType, ...] = useState()
  ...
  ...

  const Layout = layoutType == ... ? Layout2 : DefaultLayout

  return(
    <>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </>
  )
}

export default MyApp
```


# 解決方法

AppPropsの`router.route`を使う。

```tsx

function MyApp(props: AppProps) {
  const { Component, pageProps, router: { route } } = props

  console.log("route", route) // => pages直下のパスが返ってくる  
```

この`route`のパスで、パス毎で表示に必要なLayoutを切り替えてやればクライアント側で動的に変わらない。
[swift5]エラーUse of unresolved identifier 'FirebaseApp'の対処法

## エラー内容
FacebookログインをFirebaseを用いて実装しようと思い、コードを書いている際に発生したエラーです。記述コードは以下の通り。

```AppDelegate.swift
import UIKit
import Firebase  //このコードを記述
                
@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
       
        FirebaseApp.configure()  //このコードを記述
        return true
    }
```

`FirebaseApp.configure()`の箇所に`Use of unresolved identifier 'FirebaseApp'`というエラーが発生する。

**環境▼**
swift5
Xcode 11.6

## 原因
どうやら`pod 'Firebase/Core'`をインストールした際に、古いバージョンでインストールされていた模様。`FirebaseApp`はバージョン4以上でないと定義されていないらしい。

なので、`pod 'Firebase/Core'`のバージョンを更新すれば解決できそう！

## 対処法
①対象アプリのディレクトリ内に存在する`Podfile.lock`ファイルを削除。
②ターミナルで以下のコードを実行し、podを最新状態へ更新する。(アプリのディレクトリ

```ターミナル.
pod repo update
```

```ターミナル.
pod update
```

③続いて依存関係を考慮したいので、podfileには`pod 'Firebase/Core'`だけを記述して以下を実行。

```ターミナル.
pod install
```

これで`最新のpod 'Firebase/Core'`と、関連のライブラリがインストールされるので、Xcodeで確認してみて下さい。エラーが解決されていると思います。

なお、一度最新のpodをインストールすれば`Podfile.lock`に最新バージョンが固定される為、他のpodを入れても問題ないので安心して下さい！

## 最後に
今回のエラーはswift初学者が高確率で遭遇するエラーだと思われます。
是非参考にして下さい！
【node.js】 node.jsインストール 芋っていたけど、簡単だった件...

##【ゴール】
node.jsを自身のPCインストール

##【目次】
###■node.jsとは
###■インストール
###■確認
###■実際にファイルを作成,node起動


##【環境】
■ Mac OS catalina
■ node v12.18.3
■ npm v6.14.6

##【開始】
####node.jsとは
■サーバーサイドで動くjavascriptのライブラリ
■動きが早い
■チャットや同時に多数の接続があっても耐える
■npmも同梱とお得。

####インストール
下記の公式ページへ。
https://nodejs.org/ja/download/

＊OSによって異なるので注意。
＊確認事項ありますが、全て確認し、進めてください。

####確認
実際にPCにインストールされたか確認

■node.jsのバージョンを確認

```mac.terminal
$ node -v
v12.18.3
```

■npmのバージョンを確認
＊npmとは「node package manager」の略。nodeのマネージャーさんですね。

```mac.terminal
$ npm -v
6.14.6
```

####実際にファイルを作成,node起動

■Descktopに適当にディレクトリ作成
■その中にファイル「index.html」「index.js」を用意

```mac.terminal
$ cd Descktop
$ mkdir JS
$ cd JS 
$ touch index.html
$ touch index.js
```

■node.jsのローカル環境を起動

```mac.terminal
$ npx @js-primer/local-server
```

■html/jsファイルに追記

```html:index.html
<p>hello.</p>
<script src="index.js"></script>![スクリーンショット 2020-08-06 12.10.24.png]
```

```js:index.js
conole.log('hello,world');
```

すると....


![スクリーンショット 2020-08-06 12.12.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620689/d61d21a0-a7aa-ea0a-9b69-f9a81c94b11f.png)


以上。
あとはフレームワーク等使用すればいいですね。


##【合わせて読みたい】
■ 【comandLine】　一言で　コマンドライン　各種コマンド　ターミナル
https://qiita.com/tanaka-yu3/items/b32e353bd6d7c9ebd4fb

■ 【javascript】　テンプレートリテラル とは　一言で。
https://qiita.com/tanaka-yu3/items/9b07bd9fc4126291be28

■アプリケーション開発の準備 · JavaScript Primer #jsprimer
https://jsprimer.net/use-case/setup-local-env/
[メモ] React.FC の PropTypes 指定

# [メモ] React.FC の PropTypes 指定

React.FC で PropTypes を使用する場合に以下の記述にする

```tsx:react-prop-types
import PropTypes from 'prop-types';
import React from 'react';

/** Props の型を定義 */
type Props = {
  /** こども */
  children?: React.ReactNode;
};

/**
 * Component.propTypes に指定する変数
 * - 上記の Props を `React.WeakValidationMap` に渡す
 */
const propTypes: React.WeakValidationMap<Props> = {
  children: PropTypes.node,
};

const Component: React.FC<Props> = (props) => <div>{props.children}</div>;

Component.propTypes = propTypes;
export default Component;
```
Flexboxでカルーセルスライダーをつくる

カルーセルスライダーとは、たいていのスライダーは1つの画像などを表示するのに対し、複数のものを表示し、左右の矢印を押下すると、ページャーのようにみえていなかった次の組を表示するもののことを指しています。

## できあがったもの

### イメージとしてはこんな感じのもの
![0bf58c02-2815-4805-8b6a-60056d0b4dcf.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34634/b18a1c74-fcc4-9956-86d7-c9a17991a8d9.png)

### コード

```html
<div class="carousel">
  <div class="carousel_prev">&lt;</div>
  <div class="carousel_list_outer">
    <ul class="carousel_list">
      <li class="carousel_item">1</li>
      <li class="carousel_item">2</li>
      <li class="carousel_item">3</li>
      <li class="carousel_item">4</li>
      <li class="carousel_item">5</li>
      <li class="carousel_item">6</li>
      <li class="carousel_item">7</li>
      <li class="carousel_item">8</li>
    </ul>
  </div>
  <div class="carousel_next">&gt;</div>
</div>
```

```sass
.carousel{
  display: flex;
  align-items: center;
  width: 100%;
  .carousel_prev,
  .carousel_next{
    padding: 10px;
    cursor: pointer;
    &.hidden{
      visibility: hidden;
    }
  }
  .carousel_list_outer{
    flex: 1;
    overflow: hidden;
  }
  .carousel_list{
    display: flex;
    align-items: center;
    transition: 0.3s;
    .carousel_item{
      flex: 0 0 25%;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 25%;
      height: 100px;
      background-color: #ccc;
      border: 1px solid #fff;
    }
  }
}
```

### 簡単に解説

まずは、左右の矢印とカルーセルの表示エリアをFlexboxで横並びにし、カルーセルは`flex: 1;`で幅いっぱいにする
はみ出た部分を表示したくないので`overflow: hidden;`をつける
もし、左右の矢印ではなく、横スクロールであれば、`overflow-x: auto;`とすればOK

カルーセル自体もFlexboxで横並びにする
今回は、決まった数を表示し、左右矢印でその数分移動させたかったので、`flex: 0 0 25%;`として、4つ表示するようにした

あとは、左右の矢印を押下したときに、何かしらの方法で、`.carousel_list`にクラスをつけるなどし、`transform: 'translate(-100%, 0)';`などとします
ここの数値のコントロールで、1つずつスクロールさせることもできます

また、Flexboxのorderでも制御することができると思います。

## Vue.jsで、左右の矢印を制御する
CSS(Sass)は同じなので割愛します
（最後まできたら、最初に戻らず、矢印を非表示にするタイプです）

```vue
<template>
  <div class="carousel">
    <div @click="carouselPrev" class="carousel_prev" :class="{hidden:(list.length<=4) || (carouselIndex===0)}">&lt;</div>
    <div class="carousel_list_outer">
      <ul class="carousel_list" :style="{transform: 'translate(-'+carouselIndex+'00%, 0)'}">
        <template v-for="(item, index) in list">
         <li class="carousel_item">{{item}}</li>
        </template>
      </ul>
    </div>
    <div @click="carouselNext" class="carousel_next" :class="{hidden:(list.length<=4) || (carouselIndex===carouselIndexMax)}">&gt;</div>
  </div>
</template>

<script>
export default {
  layout: "white",
  data(){
    return{
      list: [1, 2, 3, 4, 5, 6, 7, 8],
      carouselIndex: 0,
    }
  },
  computed: {
    carouselIndexMax() {
      return parseInt(this.list.length/4)-1;
    }
  },
  methods: {
    carouselPrev(){
      this.carouselIndex--;
    },
    carouselNext(){
      this.carouselIndex++;
    }
  }
}
</script>
```
AnsibleでVMwareにあるtemplateからの起動及び設定を自動化


# はじめに
VMwareをAnsibleで操作する機会があったのでメモ。
vmware_guestモジュールを使用して、VMWwareのテンプレートを展開し、設定するという動作を自動化します。
Jekinsとかでジョブ化すると便利です。

# 前提事項
vCenterがないと、vmware_guestモジュールは使えないです。

# vmware_guestモジュール

```
---
- name: VM from Template and customize
  vmware_guest:
  # vCenterの情報
    hostname: "{{ vcenter_hostname }}" 
    username: "{{ vcenter_username  }}" 
    password: "{{ vcenter_password }}" 
  # 仮想マシンの設定
    validate_certs: False                   # 初回SSHの確認をしない。
    datacenter: "{{ datacenter_name }}"   　# データセンターの指定
    esxi_hostname: "{{ esxi_host }}"        # 仮想マシン起動するesxiを指定    
    folder: "{{ vm_folder }}"   　          # フォルダを指定
    template: "{{ vm_template }}"           # templateを指定 
    name: "{{ vm_name }}"                   # 仮想マシン名を指定    
    state: poweredon                        # パワーオンして起動
    wait_for_ip_address: yes                # 起動していることを確認

  # ディスクの設定
    disk:
    - size_gb: "{{ vm_storage }}" 
      type: thin
      datastore: "{{ datastore_name }}"     #　使用するデータストア

  # メモリ、CPUの設定
    hardware:
      memory_mb: "{{ vm_memory }}" 
      num_cpu_cores_per_socket: "{{ vm_cpu }}"      #　1ソケットあたりのコア数

  # ネットワークの設定
    networks:
    - name: VM Network
      type: static
      ip: "{{ vm_ip }}" 
      netmask: "{{ netmask }}" 
      gateway: "{{ gateway }}" 

   # DNSの設定     
    customization:
      dns_servers:
      - "{{ dns_servers }}"

  delegate_to: localhost             #　コントロールノードで実行                  
  ```
 `delegate_to: localhost` でコントロールノードを指定して実行する必要があります。


# まとめ
  内部的にVCenterのAPIをたたきに行っているようなので、VCenterの性能を越える処理をできない。
  いっぺんにたくさんのノードを起動するのにはあまり向いていない。良い方法はないだろうか。
Ansibleは公式ドキュメントが分かりやすい。それだけで、Ansibleが好きになりそう。

# 参考文献
https://docs.ansible.com/ansible/latest/modules/vmware_guest_module.html
PDF形式の外国語の論文をブラウザで翻訳ツールを使って読む方法

# はじめに
[Mouse dictionary](https://qiita.com/wtetsu/items/c43232c6c44918e977c9)のような翻訳ツールをPDFファイルでつかいたい！と思った時は、`pdf.js`というpdfをhtml要素に変換してくれるWebツールを使う。

# 使い方
① [pdf.js](https://mozilla.github.io/pdf.js/web/viewer.html)が埋め込まれたサイトにアクセス (リンクはツールの公式サイト)
② サイト上部にある open file ボタンをクリックして、保存済みのpdfファイルを選択する
Dockerで最速Django、MariaDB、Gunicornの開発環境構築

docker-composeを用いて、DJangoの開発環境を整える、docker-compose.ymlを自分で作成しました。

https://github.com/yuta-hidaka/Docker-Django-MariaDB-Gunicorn

こちらを使って、Djangoの開発環境を整えます。

#目次
[1.レポジトリのクローン](#1-レポジトリのクローン)
[2.設定ファイル(.env)/Requirements.txtのコピー](#2-設定ファイル(.env)/Requirements.txtのコピー)
[3.イメージのbuild](#3-イメージのbuild)
[3.localhostにアクセス](#3-localhostにアクセス)
[4.settings.pyを編集](#4-settings.pyを編集)
[5.ご意見募集中！！！](#5-ご意見募集中！！！)
[5.おわりに](#5-おわりに)


#1. レポジトリのクローン

```
git clone https://github.com/yuta-hidaka/Docker-Django-MariDB-Gunicorn.git/ hogehoge
```

#2. 設定ファイル(.env)/Requirements.txtのコピー

.envで必要な情報を書き換えてください
requirements.txtで必要なmoduleを調整してください

```
cd hogehoge
cp .env.sample .env
cp django_data/requirements.txt.sample django_data/requirements.txt
```

#3. イメージのbuild

```
cd hogehoge
docker-compose up --build
```

#4. localhostにアクセス

表示されていることを確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/398570/86ec7df9-ede1-4902-2394-d15b901181c3.png)


#5. settings.pyを編集

接続先をMariaDBに変更し、Djnagoの初期設定に従って進んでください。

#6. ご意見募集中！！！

Docker初心者が作ったファイルのため、改善意見や、これはダメなんじゃない？
といった意見をお待ちしています！！
javac_コンパイルについて_資料_メモ_20200806

**１．javacとは**

・**javac　コマンドとは**

　　javacコマンドは、javaコマンドと並び頻繁に利用するツールになります。
　　これはJava言語で記述されたソースコード(.java)をバイトコードを含むクラスファイル(.classファイル)に変換する
　　コンパイラであり、Javaでのプログラム開発には欠かせません。

　　※開発現場によっては使うところが存在するのかな？というのが筆者の感想です
　　　　＞通常は統合開発環境(エクリプスなど)で自動でコンパイルされます。(設定がされていればですが)

![コメント 2020-08-06 103411.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/687164/c6e62dbd-8dba-23d9-ff05-cbf5493c807b.png)

・**javacコマンドの利用方法**

　　>**javac [各種オプション] ソースファイルなど**

　　さまざまなオプションの指定が可能ですが、指定可能なオプションは
　　「javac-help」で調べることができます。


・**コンパイルまとめ**

　　上記まででは自分でjavacコマンドを利用してコンパイルする方法をまとめてきました。

　　javacコマンドの使い方を知っておくメリットとしては、いつも当たり前のように統合開発環境で
　　自動コンパイルされていて、とロジックは知らないけど勝手にコンパイルはできているから
　　そんなん自分でやらんでいいやんと思う人もいる中、いざ統合開発環境を使えない状況になったとき
　　自分の解決手段が増えるからです。

**２．アノテーション**

・**アノテーションとは**

  「この部分は警告を出さなくてもいい」という指示をソースコードの中に記述することができます。
　　それが**アノテーション**です。


・**アノテーションの使い方**

  アノテーションは"@"から始まる記述で、コメント内ではなく作成中のソースコードにそのまま記述します。

　記述例

　　@SuppressWarning("serial")

次回の記事はアノテーションの種類から学習していきたいと思います。
ここの知識、間違っているよという部分がありましたらご指摘いただければ幸いです。
iOS14での写真アプリへのアクセスレベルについて

# はじめに
*※ 本記事はWWDC2020で発表された内容を元に作成しております。*
*※ 記事中の画像はWWDC2020での発表のものを引用させていただいております。*

iOS14から写真アプリへのアクセス方法に更新があるため、今回調査してまとめてみました。

# 写真アプリへのアクセスレベルの指定
iOS14から写真アプリへの認証を確認する際にはアクセスレベルを指定することが必要になります。
これには新たに定義された列挙型の`PHAccessLevel`を用います。
これによりアクセスレベルを**追加のみ**`.addOnly`、もしくは**読み込み/書き込み**`.readWrite`に指定することができるようになりました。

<img width="750" alt="スクリーンショット 2020-08-05 22.36.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550560/115a742a-97c5-abdb-ba3f-8726b1bebd7b.png">

# 見た目の変化
iOS13以前では新規でアプリをリリースしてそのアプリ内で写真を撮った場合、単に写真アプリへのアクセスを許可するかどうかの表示となっていたと思います。

iOS14ではアクセスのレベルがより細かく設定できるようになりました。
これにより、

```
写真の追加のみ
　├ 許可する
　└ 許可しない

読み込み/書き込み
　├ 全ての写真を対象
　├ 選択した写真のみ対象
　└ 許可しない
```

といった選択肢になりました。 
`PHAccessLevel`を`.addOnly`にしていると左画像、`.readWrite`にしていると右画像のようになります。
<img width="315" alt="スクリーンショット 2020-08-05 22.21.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550560/b3234fd5-c7c2-14d8-1592-61cb59ee92f1.png"> <img width="300" alt="スクリーンショット 2020-08-05 22.21.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550560/38fea5c1-6085-fdb6-a5de-20ccbf5e0afc.png">

# コードでの対応
iOS13までは`PHPhotoLibrary.authorizationStatus()`に引数はありませんでしたが、iOS14では下記コードの中段のように引数にアクセスレベルを宣言する必要があります。
![PHAccessLevelを用いたコード](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550560/19ca80ea-06f6-800f-47f9-7902db016abb.png)

# まとめ
iOS14からは`PHAccessLevel`の登場により写真アプリのアクセスに影響が現れるので、アプリの用途に応じて認証の`.addOnly`か`.readWrite`を宣言する必要があります。
抜け漏れをせずに対応していきましょう。

# 参考
1. [Handle the Limited Photos Library in your app](https://developer.apple.com/videos/play/wwdc2020/10641/?time=457)
2. [Photo library changes in iOS 14](https://mackuba.eu/notes/wwdc20/handle-the-limited-photos-library/)
3. [authorizationStatus() | Apple Developer Documentation](https://developer.apple.com/documentation/photokit/phphotolibrary/1620745-authorizationstatus)
TodoじゃなくてNoTodoアプリをリリースした。。（とridgepoleの注意点）

## 前書き

https://notodoo.herokuapp.com/
今回、NoTodoというwebアプリを作りました。Todoリストを作って「やることが多すぎる！」と感じたことはありませんか？
しかし逆にやらなくてもいいことも多くないですか
無駄なことを減らせば本当にやらなければいけないことに時間をさくことができます。
このwebアプリはそんな「しないことリスト」(NoTodo)をつくるためのものです。ツイッターでリストを公開することも出来ます。

[NoTodo>](https://notodoo.herokuapp.com/)

##使った技術

rails6 
heroku hobbyプラン(freeだとスリープするのがつらい)
ドメインは取得してません。

使ったgem（一部省略してあります）

```
gem 'rspec-rails'
gem 'factory_bot_rails'
gem 'ridgepole'
gem 'devise'
gem 'omniauth-facebook'
gem 'omniauth-google-oauth2'
gem 'dotenv-rails'
gem 'devise-i18n'
gem 'devise-i18n-views'
gem 'activeadmin'
gem 'rails-i18n'
```


今回初めて使ったものはrspecとfactory_bot_railsとridgepoleとomniauth-facebookです。
特に今回はridgepoleについて書こうと思います。

##紹介

今回始めてスマホ優先のサイトを作りました。いままではずっとパソコン優先のサイトでした。

![NOtodotop.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480294/7984c6b9-c0c4-3505-0b23-8021132b39cf.png)

↑ログイン前のTopページ　TodoではなくNoTodoが目立つようにしました。
登録ページにはSNS認証が実装されています。（facebook認証が調子悪いときがあります。できないときはこのQiitaの記事のコメントにかいてください。)


![notodo2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480294/a2a6bc9b-024d-5ef0-d4fb-e5290d53eeb6.png)

↑ログイン後のtopページ　ずっと表示され続けるページと保存した翌日には非表示になるページがありますがデザインは一緒です。


##ridgepole

使ってみた感想としてはすごく便利っです。migrateファイルをいちいち作らなくてもいいのはすごく楽でスマートです。ただ初めてなので結構つまずいたとこがありました。今回はそのうち２つを説明しようと思います。

###①

```ruby:migrate
create_table :posts do |t|
```

```ruby:ridgepole
create_table "posts" do |t|
```

ちがいです。笑うかもしれませんがマイグレーションからそのままコピーして移すと最初、結構ハマります。できれば文法同じにしてほしかったです（わけがあって変えてるのかもしれない）。

###②

このサイト公開するにあたって最もハマった点です。ふつうherokuで公開するとき最後に

```
heroku run rails db:migrate
```

を打つと思うのですがこれをやってしまうと大変です。

```
heroku run 'bundle exec ridgepole -c config/database.for.heroku.ridgepole.yml -E production -f db/Schemafile --apply'
```

ホントはこれをやるべきでした。しかしもうDBをリセットしても治りません。他にもやり方があるかもですが僕の場合は一旦アプリを削除してheroku createからやりました。これがわかるまで丸１日かかりました（泣）ちなみにseedをやるときはheroku run rails db:seedでいいんです。

##ridgepoleを使うメリット・デメリット

###メリット
・いちいちmigrateファイルをつく作らなくてもいい。
・ファイル一つで済む。

###デメリット
・コマンドが覚えにくい

```
bundle exec ridgepole -c config/database.for.heroku.ridgepole.yml -E development -f db/Schemafile --apply
```
こんな長いのなかなか覚えられません。いちいちコマンドを遡ってやらないといけません。

・エラーが不親切

これはただの僕の技術不足かもですがエラーが分かりづらいと思います。サンプル出せなくてすみません。


##まとめ
いろいろ書きましたがとにかく[NoTodo](https://notodoo.herokuapp.com/)お願いします。

https://notodoo.herokuapp.com/
Xcode11.4~ (Swift5.2)のarchiveビルドでoptimazation level設定によりcrashすることがある現象の原因と対策

# 現象
 * swift 5.2(Xcode11.4~)で、 swift compileの optimazation level: `Optimize for Size [-Osize]` だと、UILabel#textやUITextField#text セット時などにcrashするバグがある。
 * Releaseビルドで設定されている可能性があるコンパイラのオプションなので、DebugビルドではCrashしないのに、ArchiveでのipaだとCrashするという状況になる
 * 
https://bugs.swift.org/browse/SR-13038

 

※ 下記はbugs.swift.orgから転載
## crash時のログ
`outlined bridged method (mbgnn) of @objc ~.text.setter`
<img width="753" alt="89361059-37407180-d705-11ea-8a40-207efe82f397.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37373/58e59d78-8b9c-9f9d-aa62-06f9559f8192.png">

## crashするコード例

```swift:

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // This will crash when -Osize optimize for size
        self.title = WordServer.instance.sentence
        
        // Also crashes
        //self.title = WordServer.instance.formatSentence
        
        //ok
        //self.title = WordServer.instance.ok
        
        //also ok
        //self.title = WordServer.instance.sentenceFunc()
        
        
    }


}

class WordServer {
    
    static var instance = WordServer()
    
    var aWord: String = "test"
    var anotherWord: String = "test2"
    
    var sentence: String {
        return String("Test sentence with word 1: \(aWord) and word 2: \(anotherWord)")
    }
    
    var formatSentence: String {
        return String(format: "Test sentence with word 1: %@ and word 2: %@", "test1", "test2")
    }
    
    var ok: String {
        return String("This one is ok.")
    }
    
    func sentenceFunc() -> String {
        return String("Test sentence with word 1: \(aWord) and word 2: \(anotherWord)")
    }
    
}
```

# 原因
 * optimazation level: -Osizeのときの、swiftのコンパイルの問題らしい。
 * 現在（2020/08/06）は、未解決状態。2020/6/17にpostされた問題らしい。
    https://bugs.swift.org/browse/SR-13038

# 対策方法
現状、下記のどちらかの対策でcrash防止できた(bug報告されているので、いつかは修正されるとは思われるが）

## 対策方法１
* 下記のように varのプロパティ( `.sentence` )を `let` のローカル変数にしてから、UILabelやUITextFieldのtextプロパティにセットする。

```swift
        //self.title = WordServer.instance.sentence
        let sentence = WordServer.instance.sentence
        self.title = sentence
```


## 対策方法2
* Swift Compiler - Code Generation - Optimization Level を `Optimize for Size [-Osize]` から `Optimize For Speed [-O]`に変更する（通常、Archive 対象のビルトタイプ(Release)で設定）
* Xcode11くらいからdefaultのOptimization Level は　`Optimize For Speed [-O]`　ですし、特に問題なければこちらが良さそうと思っています。
<img width="824" alt="スクリーンショット 2020-08-06 10.59.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37373/5e150e96-47c6-4dc0-9585-7034bce82af6.png">
チャットボットはどのように機能しますか？

人間は常に自動操作デバイスに魅了されており、今日では、より人間らしくなり自動化されているソフトウェア「チャットボット」です。 即時応答と常時接続の組み合わせにより、Webアプリケーションのトレンドを拡張または置き換える魅力的な方法になります。 しかし、これらの自動化プログラムはどのように機能するのでしょうか？ みてみましょう。
チャットボットはどのようにして人間の言語を処理できますか？
最初は、チャットボットは通常のアプリのように見えます。アプリケーション層、データベース、外部サービスを呼び出すAPIがあります。チャットボットの場合、UIはチャットインターフェイスに置き換えられます。チャットボットはユーザーにとって使いやすいものですが、アプリの処理が複雑になります。

ボットが顧客の意図を理解できないという一般的な懸念があります。ボットは最初に実際のデータでトレーニングされます。すでにチャットボットを持っているほとんどの企業は、会話のログを持っている必要があります。開発者はそのログを使用して、顧客が何を要求しようとしているか、それが何を意味するかを分析します。構築された機械学習モデルとツールの組み合わせにより、開発者はお客様の質問と回答を最適な回答と照合します。例：顧客が「支払い領収書はどこにありますか？」 「支払い領収書を受け取っていません」と同じ意味です。開発者の強みはモデルのトレーニングにあり、チャットボットがこれらの質問の両方を接続して正しい意図を導き、出力として正しい答えを生成できるようにします。利用可能な広範なデータがない場合は、さまざまなAPIデータを使用してチャットボットをトレーニングできます。
チャットボットはどのようにトレーニングされますか？
チャットボットのトレーニングは、人間に教えるよりもはるかに高速で大規模に行われます。 Humansカスタマーサービス担当者にはマニュアルが提供され、それを読んで理解してもらいます。カスタマーサポートチャットボットには何千もの会話ログとそれらのログが提供されますが、チャットボットはどのタイプの質問にどのタイプの回答が必要かを理解できます。

それが生きている後、チャットボットはどのようにして学びますか？
チャットボットの準備が整い、顧客とライブで対話できるようになると、スマートフィードバックループを実装できます。顧客が質問する会話中に、チャットボットは「あなたがa、b、cのどちらを意味しますか」などの異なるオプションを提供することで、いくつかの回答をスマートに提供します。そうすることで、顧客自身が実際のインテントと質問を照合し、その情報を使用して機械学習モデルを再トレーニングできるため、チャットボットの精度が向上します。

それにもかかわらず、ユーザーがボットを正しい方向に動かしていない新しい応答に基づいてモデルが変更されないことを保証する場所には制限があります。チャットボットはまた、人々がチャットで言うことを言い換えるだけでなく、ボットの所有者が答えてほしいことを答えるように教えられています。
より多くのAIチャットボットを見ることができます。https://bap-software.net/knowledge/ai-chatbot/
Swiftのstatic （初歩的）

この記事はstaticの使い方を簡単にまとめたもので、詳しい解説は明記されていません。

##使い方

```swift
struct MyStructuer {
    let instanceProperty = "ABC"
    static let typeProperty = 123 //これだけ！！
}
```
変数などを定義する際に、直前にstaticをつけるだけです。

staticをつけた場合と、つけなかった場合の違いを見ていくと

```swift
struct MyStructuer {
    let instanceProperty = "ABC"
    static let typeProperty = 123 
}

mystructuer = MyStructuer() //インスタンスを生成
print(mystructuer.instanceProperty) //=> ABC
print(MyStructuer.typeProperty) //=> 123
```
どこが違うかというと、

staticをつけていない変数はMyStructuerクラスからインスタンスを生成し、その**インスタンスから**プロパティを出力しています。
staticをつけている変数は、**インスタンスは使わずに**プロパティを出力しています。

これによってインスタンスを生成する手間が省け、どこからでも簡単にプロパティを呼び出すことができます。

しかし逆の操作はともにエラーになりますので注意してください。

```swift
print(MyStructuer.instanceProperty) //=> エラー
print(mystrctuer.typeProperty) //=> エラー
```

staticはクラスやメソッドにも同様にして使えるので、より快適なコードを目指して使いこなしたいですね！
wsl2のubuntuでsudo apt updateが出来ない

タイトル通り、aptをupdateしようとしても以下のエラーが吐かれる。

```shell-session
Hit:1 http://ftp.jaist.ac.jp/pub/Linux/ubuntu bionic InRelease
Get:2 http://ftp.jaist.ac.jp/pub/Linux/ubuntu bionic-updates InRelease [88.7 kB]
Get:3 http://ftp.jaist.ac.jp/pub/Linux/ubuntu bionic-backports InRelease [74.6 kB]
Get:4 http://ftp.jaist.ac.jp/pub/Linux/ubuntu bionic-security InRelease [88.7 kB]
Reading package lists... Done
E: Release file for http://ftp.jaist.ac.jp/pub/Linux/ubuntu/dists/bionic-updates/InRelease is not valid yet (invalid for another 5d 14h 28min 50s). Updates for this repository will not be applied.
E: Release file for http://ftp.jaist.ac.jp/pub/Linux/ubuntu/dists/bionic-backports/InRelease is not valid yet (invalid for another 5d 14h 30min 25s). Updates for this repository will not be applied.
E: Release file for http://ftp.jaist.ac.jp/pub/Linux/ubuntu/dists/bionic-security/InRelease is not valid yet (invalid for another 5d 14h 27min 36s). Updates for this repository will not be applied.
```
調べてみると、InReleaseファイルとシステムの時間がズレているため起きているエラーだという事が判明した。
dateコマンドで調べると、確かにズレてる。(正しい日時は 08/06 2020)


```shell-session
$date
Fri Jul 31 15:33:55 JST 2020
```
時刻合わせのやり方にも色々あるようだが、これはWSLでよく起こる問題のようなので[このissues](https://github.com/microsoft/WSL/issues/4245)を参考にしたところ、以下のコマンドでupdateはできるようになった。

```
$sudo hwclock --hctosys
```
このコマンドはハードウェアの時刻をシステムの時刻に反映させているのだが、ハードウェアの時刻自体も1~2分ズレているので、根本的な解決はできていないのかもしれない...

おわり
bcpユーティリティを使用したデータのインポート/エクスポートについて

## はじめに
ローカルのSQLServerにデータをインポート/エクスポートする際に使用したbcpユーティリティについて、備忘のためにまとめています。

## bcpユーティリティとは？
Microsoft SQL Serverの一括コピープログラム(BCP)APIを使用するコマンドラインツールのことです。
(参考) https://docs.microsoft.com/ja-jp/sql/tools/bcp-utility?view=sql-server-ver15

次のタスクが実行可能です。

 - SQLServerテーブルからデータファイルへのデータの一括エクスポート
 - クエリからのデータの一括エクスポート
 - データファイルからSQLServerテーブルへのデータの一括インポート
 - フォーマットファイルの生成

## 使用例 （約15000件のテストデータをインポート/エクスポート）
### インポート
```
bcp User in ~/Desktop/users.dat -N -U "user" -P "password" -S 127.0.0.1 -b 1000
```

bcp テーブル名またはクエリ **in**/**out**/**queryout**/**format** 〜が基本の書き方となります。
テーブル名/クエリの後にどのタスクを実行するかを指定します。

|実行タスク|説明|
|:---|:---|
|**in** data_file|ファイルからデータベース テーブルまたはビューへのコピーを行う。|
|**out** data_file|データベース テーブルまたはビューからファイルへのコピーを行う。|
|**queryout** data_file|クエリからのコピーを行う。データをクエリから一括コピーする場合にのみ指定する必要がある。|
|**format** nul|指定されたオプション(-n、-c、-w、-N) と、テーブルやビューの区切り記号に基づいてフォーマットファイルを作成する。フォーマットファイルの作成については[こちら](https://docs.microsoft.com/ja-jp/sql/relational-databases/import-export/create-a-format-file-sql-server?view=sql-server-ver15)をご参照ください。|

その他のオプションは以下の通りです。

|オプション|説明|
|:---|:---|
|**-N**|文字以外のデータについてはデータベースのネイティブなデータ型を使用し、文字データについては Unicode 文字を使用して、一括コピー操作を実行する。フィールドごとにファイルストレージ型を確認するプロンプトが表示されず、よしなに型を判断してくれる。|
|**-U** login_id|SQLServerへの接続に使用されるログインIDを指定する。|
|**-P** password|ログインIDのパスワードを指定する。|
|**-S** server_name|サーバー名を指定する。|
|**-b** batch_size|何行分のデータを1トランザクションとして扱うかを指定する。今回は1000を指定。|

実行した結果、**962ms.**でインポートが完了しました。
<img width="593" alt="in.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661388/690fdcc5-2923-9fe9-31e6-a1658dad9ba5.png">


### エクスポート
```
bcp "select * from User" queryout ~/Desktop/users.dat -N -U "user" -P "password" -S 127.0.0.1
```
今回は**queryout**を指定してクエリを用いたエクスポートを実行しました。
実行した結果、**84ms.**でエクスポートが完了しました。
<img width="593" alt="queryout.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661388/c3699439-47f9-3099-e533-c11020f7e9c3.png">


## 参考リンク
- [bcpコマンドのオプションについて](https://docs.microsoft.com/ja-jp/sql/tools/bcp-utility?view=sql-server-ver15)
Process Builder の小技

[まとめページに戻る](https://qiita.com/Keiji_otsubo/items/60afc2a8d211b6f7d89f)
[まとめN～Z](https://qiita.com/Keiji_otsubo/items/92f92bb9f668ca9688be)

# 開発者環境は新規作成できそう 2023/06以降

+ [Crear un proceso automatizado con Process Builder , no esta disponible en mi playground](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V000075vhljSAA)

:::note
Try using the developer orgs. You can create a new PB

Starting in Summer ’23, we’re blocking the creation of processes. You can still activate, deactivate, and edit any existing processes. To test and create processes for use in managed packages, developer orgs still allow you to create processes. For new automations, use flows.

https://help.salesforce.com/s/articleView?id=sf.process_overview.htm&type=5
:::

Playground
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/7f5322b7-91b0-8217-8e86-62952cfee709.png)

developer orgs
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/d58697f1-78c2-c81a-6032-cba2a67cc4eb.png)



# Execute a process builder only for update action
修正の時だけ、処理する方法

+ [Execute a process builder only for update action](https://developer.salesforce.com/forums/?id=9060G000000ICvSQAW)

# プロセスビルダーを文書化する

+ [Document Your Process Builder](https://qiita.com/Keiji_otsubo/items/037f05945f3b3f8a7def)

# surveyとの関係

+ [エラー-この調査バージョンをアクティブ化できません。別のバージョンが1つ以上のオブジェクトによって参照されているか、必要な権限がありません。](https://qiita.com/Keiji_otsubo/items/2fbdd8984a5ffeaa3222)

# Apexで使う

+ [InvocableMethodについて](https://qiita.com/Keiji_otsubo/items/b47749f3b72903aa4c7e)

# 数式

+ [プロセスビルダーの時の数式](https://qiita.com/Keiji_otsubo/items/98091c960a785f2052f0)
HHKB【US配列】でMacとWindows共用のために初めに行った設定

別にHHKBに限らずですが一応メモとして残しておく．

1.Left CtrとLeft Cmdの入れ替え
-
copy paste やfind機能を使用するときに混乱するのを避けるため行った．
方法
karabinerをインスコする
simple modificationsの項目からleft ctr→left cmd,left cmd→left ctrを両方設定する．
この時片方だと何故かコンビネーションを認識してくれないのでこのように設定する．本体の使用感を変更したくない場合は外部接続キーボードのみを選択できる．karabinerは便利
2.IME変更をAlt+`に割り当てる．
-
まず、システム環境設定を開き,その中の項目「キーボード」を選択する．その後開く画面の中の「ショートカット」タブを選択し、「前の入力ソースを選択」のキーのところをクリックしてAltと`を同時押しする．
3.あとは随時更新したい
-
目下のところスリープをFn+Escで統一したいのだがwin10の付属ショートカットだとalt+ctr+なんかのキー（今はSとしている）にしかならない．助けてくれ
4.shift+`が§になってしまう誤動作の対処
-
なぜかkarabinerで
\`→`としたら治った．hhkbは不思議ちゃんだね．かわいいね
Vue.jsを１から学んでみた〜ミックスイン〜

[Vue.js を１から学んでみた。](https://qiita.com/sh-watanabe/items/c7fc086a4ea5c707fbd3)にて書いてきましたが、
長くなり編集しにくくなってきたので、分割しました（こんなやりかたしないのかな？知りたい。）

## 10-1. 概要

`export default{`に定義されている、data、componentsなどは総じて**オプション**と呼ばれる。

```sample.vue
<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  // dataはオプションの1つ
  data: function() {
    return {
      name: "次郎"
    }
  },
  // componentsはオプションの1つ
  components: {
    HelloWorld
  }
}
</script>
```

これらのオプションをJavaScriptファイルにまとめて、複数のvueファイルで使い回す仕組みを*ミックスイン*という。

## 10-2. 基本的な使い方

新しいJavaScriptファイルを作成し、共有したいオプションを実装する。

```（特に何もしない）main.js
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')
```

```capitalizeMixIn.js
// 実際のミックスインの実装
export const capitalizeMixIn = {
  props: {
    message: {
      type: String
    },
  },
  data: function() {
    return {
      msg: this.message
    }
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
}
```

```（特に何もしない）App.vue
<template>
  <div>
    <Job message="system engineer"></Job>
    <Job message="monotas"></Job>
  </div>
</template>

<script>
import Job from "./components/Job.vue";

export default {
  components: {
    Job: Job
  }
}
</script>
```

```Job.vue
<template>
  <div>
    {{ msg | capitalize }}
  </div>
</template>

<script>
// mixinの取り込み
// '@'はsrcをルートとして定義できる便利なもの
import { capitalizeMixIn } from  "@/capitalizeMixIn"

export default {
  // ミックスインの設定
  mixins: [capitalizeMixIn]
}
</script>
```

*結果*
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69626/1000e6e8-864f-f2c0-34f7-03f6630c25a8.png)

### オプションが被った場合

ミックスインのオプションと、ミックインを指定しているコンポーネントで、オプションが被った場合は、*コンポーネントが優先される*。
*ただし、ライフサイクルメソッドについては、ミックスインもコンポーネントも両方とも実行される。ミックスイン→コンポーネントの順番で実行される。*


```Job.vue
<template>
  <div>
    {{ msg | capitalize }}
  </div>
</template>

<script>
import { capitalizeMixIn } from "@/capitalizeMixIn"

export default {
  mixins: [capitalizeMixIn],
  // ミックスインと同じキーのdataオプションを用意
  data: function() {
    return {
      msg: "component message"
    }
  },
}
</script>
```

*結果：コンポーネントが優先される*

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69626/2cdd3fd2-c473-1268-0a32-38632ba75c0e.png)

## 10-3. グローバル登録について

コンポーネントやカスタムディレクティブのように、グローバル登録はあるっちゃあ、ある笑
ただ、、、仮にライフサイクルメソッドを実装してしまうと全てのコンポーネントが展開された時に実行されてしまい危険w
なので、載せないでおく。
実現したい内容が他の方法ではどうしてもできない場合に調べようと思うので割愛。
[SQL]INSERT文でテーブルへデータ挿入

#テーブルへデータを挿入
テーブルへデータを挿入するには、INSERT文を用います。
以下が記述方式です。

```
INSERT INTO テーブル名 (カラム名1, カラム名2, ...) VALUES ('値1', '値2', ...); 
```

実際に書いていくとこんな感じになります。
「値」を入力する場合、文字データは「'」で囲むことを忘れないでください。

```
mysql> INSERT INTO meibo (id, name) VALUES (1, 'テスト太郎');
Query OK, 1 row affected (0.20 sec)
```

「Query OK」と表示されているので、挿入成功です。
Vimの簡易チートシート

# Vimの簡易チートシート
4月からVim(neovim)を使用して開発を行っています。
毎回操作が曖昧になってしまうので普段使うものだけをまとめたチートシートを作成しました。

## 操作一覧

| 操作(mac) 　　                     | ショートカット　　  |
|:----------------------------------|:--------------|
| 挿入モードへ                         |i              |
| カーソルの下に新しい行を追加し、挿入モードへ |o              |
| 上書きモードへ                       |R              |
| ノーマルモードへ                      |ESC            |
| ←移動                             | h             |
| ↓移動                             | j             |
| ↑移動                             | k             |
| →移動                             | l             |
| 半画面下に移動                      | Ctrl + d      |
| 半画面上に移動                      | Ctrl + u      |
| 行末に移動                         | $             |
| 行頭に移動                         | 0             |
| 次の単語に移動                      | w             |
| 前の単語に移動                      | b             |
| 対応する括弧に移動                   | %             |
| カーソルのある行とその下の行を連結       | J              |
| カーソル位置から行末まで削除           | D              |
| カーソルのある行をコピー               | yy             |
| カーソルのある行を切り取り             | dd             |
| カーソルのある文字を削除              | x              |
| 貼り付け                           | p             |
| アンドゥ                            | u             |
| リドゥ                              | Ctrl + r      |
| 保存せずに終了                      | :q            |
| 保存せずに強制終了                  | :q!            |
| 保存                             | :w             |
| 保存して終了                       | :wq            |
| 検索とハイライト                     | /(検索する文字)  |
| カーソル位置にある単語を検索してハイライト | *             |
| ハイライトを終了                     | :noh          |
| 領域選択モード                      | v             |
| 範囲選択                          | Ctrl + v      |
| 行選択                            | Shift + v     |
| コピー                             | y             |
| 切り取り                           | d             |
| 画面分割(上下)                     | :split       |
| 画面分割(左右)                     | :vsplit      |
| ウィンドウの削除                      | :q           |
| 次のウィンドウへ                      | Ctrl + w  w |
| 上のウィンドウへ                      | Ctrl + w  k |
| 下のウィンドウへ                      | Ctrl + w  j |
| 右のウィンドウへ                      | Ctrl + w  l |
| 左のウィンドウへ                      | Ctrl + w  h |
| 上下左右のウィンドウ入れ替え            | Ctrl + w  r |
【UFT】Recovery ~回復シナリオ~の設定方法

UFTでは、実行中に予期しないエラーが発生する場合があります。

通常だと、エラーが発生したらそこでテスト実行が止まり、
後続のスクリプトは停止してしまいます。

UFTではエラー発生時に、後続のテスト実行を継続したり、
特定の処理を実行をしてくれる**回復シナリオ**というものがあります。

今回は、この**回復シナリオ**について記述していきます。

※この記事ではUFT One(Ver.15.00～)を使用します。

# 回復シナリオとは
UFTのテスト実行中に、予期しないエラーなどで実行が停止した時に、
**無人**でテスト継続や再実行などの処理を行う設定ができるのが回復シナリオになります。

この回復シナリオは以下の要素で構成されています。

|要素|説明|
|---|---|
|トリガ・イベント|実行セッションを中断するイベント。<br>実行エラーなどを検知する|
|回復操作|トリガ・イベントで中断した後に、続行できるようにする|
|回復後のテスト実行オプション|回復操作後にUFTが行う操作を設定する。<br>再実行や次のテストから続行するかなど|

# 設定方法

1.任意のテストを開く
2.メニューバーにある[ リリース ] > [ 回復シナリオ マネージャ ]を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288745/d4c2f1ec-59d3-3aad-0341-7826798c5043.png)

3.[ 新規シナリオ ]を選択。回復シナリオ ウィザードが表示される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288745/d8000c0f-3e91-f703-8aa9-443bbda444b5.png)

4.回復シナリオ ウィザードの表示に従った設定を行う。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288745/3bcd2cc6-4291-9152-811a-081c3c352617.png)
→ これで作成は完了

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288745/580f22ee-6172-55f4-2c52-90065cd28929.png)


****

5.回復シナリオを紐づけたいテストを開く
6.メニューバーにある[ ファイル ] > [ 設定 ]を選択
7.メニューから[ 回復 ]を選択
8.[ 追加 ]を押下し、作成した回復シナリオを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288745/dc4e1c7e-5748-29bb-99b3-dbc963b494c3.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288745/ac42d39b-6a47-18e0-12e3-a26da003f307.png)

9.[ ソリューションエクスプローラー ] に回復シナリオが追加されていたらOK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288745/0b438970-3c26-b05c-b0de-77289973ae04.png)

# おわりに

ここでは簡単に設定の方法について記述しました。
実際には、様々なことを検討して回復シナリオを作成することが求められます。

機会があれば、回復シナリオの応用や、紹介できる範囲での導入事例についても記事にしようかと思います。



# 参考・参照
・UFT One Object Model Reference（公式ページ）
https://admhelp.microfocus.com/uft/en/15.0-15.0.1/UFT_Help/Subsystems/OMRHelp/Content/OV_Supp_Util/Utility_ReservedObj.htm?tocpath=Object%20Model%20Reference%20for%20GUI%20Testing%7CUtility%20Objects%7C_____0
Googleアナリティクスを活用し、サイト分析を行う-1章

###  <font color='lightblue'>背景</font>
現在デプロイしているサイトが自分以外のユーザに見ていただいているのか、経緯やアクセス数を調査したく、グーグルアナリティクスを導入することにしました（ちょっと噛みそうになります…笑）
今まで、gitのトラフィックなどから、自分のポートフォリオサイトのアクセスを確認していたのですが、アナリティクスを使用していろいろと傾向を調査していきたいと考えています。

※この記事は、アナリティクスを設定してから、約１時間ほど経過しました。まだ分析結果が表示されないのですが、もう少し、待ってから状況を報告したいと思います（長ければ24時間かかるとのことです。）
表示結果や、手順の修正情報等々はおって掲載します。

###  <font color='lightblue'>環境</font>
| 項目              |               内容 | 
|:-----------------|:------------------:|
| OS.Amazon Linux AMI     |           release 2018.03 |      
| Ruby On Rails    |           v5.2.4.3 |   
| MySQL            |           v5.6 |   

###  <font color='lightblue'>設定手順</font>
作業時間：15分
(1)Googleアカウントの作成（割愛）
(2)Googleアナリティクスアカウントを作成
サイトに従って、主に以下を入力するだけです。
・アカウント名
・ウェブサイト名
・ウェブサイトのURL
・レポートのタイムゾーン

(3)トラッキングコードを設置
上記のアカウントを作成すると、トラッキングコードが配布されます。
これをサイトの各ページの<ヘッダ>タグに組み込みます。
私の場合、railsで稼働しているので、application.html.erbに設定しました。以下のようになります。

```erb:app/views/layouts/application.html.erb
<html>
  <head>
   ...

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxx-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-xxxxxxxx-1');
    </script>

  </head>

  <body>
    <%= yield %>
  </body>
</html>

```

以上です。


###  <font color='lightblue'>参考</font>
[Googleアナリティクス導入時の設定・設置方法【初心者向け】](https://qiita.com/dichikawa/items/cc485002dd0d785f3b01)
[【今さら聞けない】Googleアナリティクスとは？導入手順から使い方まで5分で理解！](https://wacul-ai.com/blog/access-analysis/google-analytics-method/what-is-google-analytics/#/s01)
Rails Webpacker configuration file not found

###発生条件
rails6で新規アプリを作るとそうなる

rails webpacker:install
↪︎yarn not installed.

brew install yarn
↪︎brew command not found.

Homebrewをインストール

###用語解説
webpacker -> railsでwebpackを使えるようにするためのgem。node.jsのモジュールの1つ。rails6からwebpackerが初期設定で搭載されるようになった。webpackはjs,css,画像といったモジュールをまとめてくれるツール。これにより管理しやすくなるだけでなく、webの読み込み速度が上がる。

yarn -> node.jsのパッケージマネージャ。webpackerを使うために必要。パッケージマネージャとは、多くのプログラムをまとめるパッケージを管理するツール。フレームワークやwebpackのようなモジュールバンドラーなどの多くのプログラムで構成されているモノを速くインストールすることができる。パッケージマネージャがない場合手動でパッケージを管理しなければいけないためとても大変。rails6からwebpackerが搭載されるようになったためyarnをインストールする必要性が出た。

Homebrew -> 


###関係性
yarn -> webpacker 

###参考
[webpacker, yarn](https://www.sejuku.net/blog/68146)
GurobipyをMacで自分のPython環境から実行する


# はじめに

gurobiはターミナルから実行できるほか
Pythonのソースコードからgurobipyライブラリを呼び出して，Pythonでオーバーラップして使用することができます．

```py
import gurobipy as gp
```

しかし，

```
pip install gurobipy
```

だとどうやらエラーが出るらしく，マシンにインストールされたgurobiから直接setup.pyを実行してインストールする必要があるようです．

# Macの場合

自分の今のプロジェクトファイルを仮に

`~/develop/ProjectA`としてこのProjectAでは，venvなどで仮想のPython環境が実行されているとします．

次にmacのGurobiがインストールされているフォルダに移動します．
これはどうやら

`/Library/gurobi0902/mac64`のようにLibrary以下にバージョン`0902`のインデックスがついてそのmac64フォルダに入っているようです．


よって，

```
cd /Library/gurobi902/mac64/
python setup.py install  
```

とすればよいです．

これでvenvやvirtualenvにおいて，自分のプロジェクトProjectAなどにライブラリgurobipyを作成することができます．
Python 3.9のdictのマージ（`|`）が便利っぽい

# 概要

Python3.9からdictがマージできるようになったようす。
`|` でできるようす。

# 使ったPython

```
Python 3.9.0b5 (default, Aug  6 2020, 10:04:28)
[Clang 12.0.0 (clang-1200.0.26.2)] on darwin
Type "help", "copyright", "credits" or "license" for more information.
```

# 試してみます

## 基本的な使い方

```python
>>> a = {'a1': 1}
>>> b = {'b1': 1}
>>> a | b
{'a1': 1, 'b1': 1}
```

## マージと代入

```python
>>> a = {'a1': 1}
>>> b = {'b1': 1}
>>> a |= b
>>> a
{'a1': 1, 'b1': 1}
```

## 同じキーがあったとき

```python
>>> a1 = {'a': 1, 'b': 1}
>>> a2 = {'a': 2, 'b': 2, 'c': 2}
>>> a1 | a2
{'a': 2, 'b': 2, 'c': 2}
>>> a2 | a1
{'a': 1, 'b': 1, 'c': 2}
```

## ちょっと込み入ったdict

```python
>>> d1 = {'a': 1, 'b': {'c': 2}}
>>> d2 = {'z': 999}
>>> d1 | d2
{'a': 1, 'b': {'c': 2}, 'z': 999}
```

```python
>>> d1 = {'a': 1, 'b': {'c': 2}}
>>> d2 = {'z': 999, 'b': {'c': 888}}
>>> d1 | d2
{'a': 1, 'b': {'c': 888}, 'z': 999}
```

# まとめ

すこぶる簡単にしか試していませんが便利っぽいです
Vue.jsを１から学んでみた〜フィルター〜

[Vue.js を１から学んでみた。](https://qiita.com/sh-watanabe/items/c7fc086a4ea5c707fbd3)にて書いてきましたが、
長くなり編集しにくくなってきたので、分割しました（こんなやりかたしないのかな？知りたい。）

## 9-1. 概要

Utilityクラスの様なもの。
例えば、引数の値を全て大文字にしたいような機能が欲しい場合、定義して使うことができる。

## 9-2. 基本

利用できるのは、mustache展開(`{{}} の展開`)と `v-bind`の２つ。

### 単一指定

対象のVueインスタンスプロパティに対して`| (パイプ)`を設定する。

```sample.html
<!-- mustaches -->
{{ message | capitalize }}

<!-- v-bind -->
<div v-bind:id="rawId | formatId"></div>
```

### 複数指定

複数指定する場合は、以下の様に`|`でつなげる。

```sample.html
<!-- mustaches -->
{{ message | capitalize | subString }}
```

### ローカル登録

`filters`で登録する。

```App.vue
<template>
  <div>
    <Job message="system engineer"></Job>
    <Job message="hogehoge"></Job>
  </div>
</template>

<script>
import Job from "./components/Job.vue";

export default {
  components: {
    Job: Job
  }
}
</script>
```

```Job.vue
<template>
  <div>
    {{ msg | capitalize }}
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String
    },
  },
  data: function() {
    return {
      msg: this.message
    }
  },
  // ローカル登録
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
}
</script>
```

*結果：先頭の文字列だけが大文字*
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69626/1760d651-f13e-ab2d-ae58-970cd30264d5.png)

### グルーバル登録

`main.js`にて登録する。

```main.js
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// グローバル登録
Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  render: h => h(App),
}).$mount('#app')
```

```App.vue
<template>
  <div>
    <Job message="system engineer"></Job>
    <Job message="hogehoge"></Job>
  </div>
</template>

<script>
import Job from "./components/Job.vue";

export default {
  components: {
    Job: Job
  }
}
</script>
```

```Job.vue
<template>
  <div>
    {{ msg | capitalize }}
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String
    },
  },
  data: function() {
    return {
      msg: this.message
    }
  },
}
</script>
```

*結果：先頭の文字列だけが大文字*
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69626/1760d651-f13e-ab2d-ae58-970cd30264d5.png)

## 9-3. 注意事項

* this.は使えない

### computedとの違い

* computedは、キャッシュが残るため仮想DOMが変更した場合のみ実行される。パフォーマンスの面で優れている。
* フィルターは、都度実行されるためパフォーマンスの面では劣る。ただ、作りやすく利用もしやすい。
【Android】SHA-1 署名証明書フィンガープリントを取得する

#リリース用署名証明書

```terminal:terminal
keytool -list -v -keystore your_keystore_name -alias your_alias_name
```
your_keystore_name は「.keystore」や「.jks」拡張子を含む完全修飾パスとキーストア名で置き換える。
your_alias_name は作成時に証明書に割り当てたエイリアスで置き換える。

#デバッグ用署名証明書
Linux または macOS の場合:

```terminal:terminal
keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android
```

Windows の場合:

```terminal:terminal
keytool -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android
```

#どんな時使うのか
APIキーに制限を入れずにAndroidアプリを公開すると下記のようなメッセージが表示される↓
![2キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/566570/d653fce9-514c-6564-5329-777a6298d150.png)
このセキュリティアラートを解消するためにGCPのAPIキーに使用制限を加える。
その時にSHA-1 リリース用署名証明書フィンガープリントが必要。

#参考サイト
[API キーの制限を適用する](https://cloud.google.com/docs/authentication/api-keys#api_key_restrictions)