OmniAICreator/Qiita-1.07M huggingface dataset:
Microsoft Learn 14日目

12月は、毎日 [Microsoft Learn](https://docs.microsoft.com/ja-jp/learn/) を受講していこうという記録。
※受講後に書き込むので公開に間に合わないこと多々あります(アドベントカレンダーの意味ｗ)

12/14 は
**Core Cloud Services - Azure portal を使用してサービスを管理する**
 - パブリックおよびプライベート プレビュー機能へのアクセス

を受講。以下、簡易メモ。

# Core Cloud Services - Azure portal を使用してサービスを管理する
## パブリックおよびプライベート プレビュー機能へのアクセス
Azure 機能のプレビューを評価目的で提供している。
プレビューとして提供されることが多い領域。
・新しいストレージの種類
・Machine Learning の機能強化などの新しい Azure サービス
・他のプラットフォームとの新規の統合または既存の統合の強化
・サービス用の新しい API

### 機能プレビューのカテゴリ
プライベートプレビュー：Azure の特定のユーザーに評価目的で提供される
パブリックプレビュー：Azure のすべてのユーザーに評価目的で提供される

### プレビュー機能の探索
Azure portalでも検索が可能。



...今回は全然間に合いませんでしたorz
'10' - 1 = 9 だけど '10' + 1 = '101' になる

jsで演算していて
おや？っとなったことがあったのでメモ。


## string + number は string

```js

function typeOf(value) {
  'use strict';
  console.log(typeof value);
}

var num = '10'
var result = num + 1
console.log(result) // '101'
typeOf(result) // string
```

## string - number は number
```js

function typeOf(value) {
  'use strict';
  console.log(typeof value);
}

var num = '10'
var result = num - 1
console.log(result) // 9
typeOf(result) // number
```

## まとめ
冷静になって考えればそりゃそうなんだけど、演算子で変わるのはちょっと面白かった
Unity ARKitのobject trackingにおける注意点

Unity ARKitでのobject trackingがうまくできなくて悩んでいたのですが
ほんのちょっとしたことでうまくできたのでとりあえず、object trackingまでの一連の流れを記事にします。

## 目標
- Unity ARKitでのobject trackingがうまくできるようになる

## 開発環境
- macOS Catalina ver: 10.15.2
- Unity 2019.2.10f1
- iPhone X iOS 13.2.3

## 結論
先に結論だけ載せておきます。言っていることがわからなければ、記事下のObject Trackingまでの道のりを見ればわかるかと。

注意点はARKit scannerでオブジェクトをスキャンした時と同じ場所(背景)でObject Trackingをするということだけです。

なのでARKit scannerを使ってスキャンする際は、どこでスキャンするかまで考えておいた方が良いですね。

<img width="472" alt="スクリーンショット 2019-12-15 18.32.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191216/125f58b5-3e36-fc2c-87d2-214be2ed8a0f.png">
この例だと、同じ木の床の上にオブジェクトを置いた時ならうまくトラッキングできるのですが、他の何か（ベット、カーペットなど）の上だとうまく反応してくれません。

## Object Trackingまでの道のり

Object Trackingまでの道のりを以下に載せておきます。

### パッケージインストール
Package Managerが諸々必要なものをインストールします。現状ではObject Trackingはpreview版でのみ使えます。

- AR Foundation: preview.1 - 3.1.0
- AR Subsystems: preview.1 - 3.1.0
- ARKit Face Tracking: preview.1 - 3.1.0
- ARKit XR Plugin: preview1. - 3.1.0

### Project Settings
アプリを動かすのに必要な設定をします。

- [Other settings] -> [Configuration] -> [Requires ARKit Support]にチェックを入れる
- [Other settings] -> [Configuration] -> [Target minimum iOS Version]を11.0にする
- [Other settings] -> [Configuration] -> [Architecture]をARM64にする

### Add objects
<img width="255" alt="スクリーンショット 2019-12-15 18.12.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191216/fbb4980a-ac0e-17f5-acff-6169ab7c1510.png">

[XR] -> AR Session OriginとAR Sessionを作成
MainCameraを消して、AR Session Originの子AR CameraをMainCameraにセットする

### Object Tracking
object Trackingをするには、[ARKit scanner](https://developer.apple.com/documentation/arkit/scanning_and_detecting_3d_objects)なるアプリで3Dオブジェクトの特徴量データをとる必要があります。ARKit scannerの使い方は[こちらのブログ](http://nn-hokuson.hatenablog.com/entry/2019/06/25/192111)を参照してください。ここでは、PCにスキャンしたデータを送るまで終わったと仮定して話を進めていきます。

まずスキャンしたデータをインポートします。その次にReferenceObjectLibraryを作成します。
<img width="600" alt="スクリーンショット 2019-12-15 18.52.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191216/ddb83a50-7aee-fbdd-15ae-db8e5ef0f00e.png">

作成したReferencebjectLibraryのAdd Reference Objectでスキャンしたデータをセットします。名前も一応データ名と同じにしておきます。

<img width="492" alt="スクリーンショット 2019-12-15 18.55.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191216/8d3e4c11-2f8d-6556-1a6e-7bbdd11d2557.png">

AR Session OriginオブジェクトにAR Tracked Object Managerというスクリプトをアタッチします。
そして先ほど作成したReferenceObjectLibraryと適当にサイズ0.1のcube prefabを作成してそれぞれ割り当てます。

<img width="600" alt="スクリーンショット 2019-12-15 18.59.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191216/a6cbec7e-48ab-2fb7-ee18-e692b81fb563.png">

あとはビルドすれば完成です。

## 最後に
ARでobject trackingができるようになると色々と妄想が広がりますよね！

## 参考資料
- [ARKit scanner] (https://developer.apple.com/documentation/arkit/scanning_and_detecting_3d_objects)
- [【ARKit】3Dオブジェクトをマーカーにする](http://nn-hokuson.hatenablog.com/entry/2019/06/25/192111)
Laravel+vueでnuxtのlayoutComponentっぽいことがしたい

~~正解がわからないので、いい方法教えてほしいです。~~

正解はこちらでした
https://github.com/ktsn/vue-router-layout

LaravelはAPIオンリーでnuxtjsにしたいですが、諸事情ありで出来ないときできるだけvueだけで管理したく、Laravelのlayoutを使うと密結合だし、vueとLaravelのbladeを両方管理しないといけないので、分離したいです。
vueRouterでlayout設定するのが正義なのか？？

## component登録はフォルダまるごと

```js:reesources/js/app.js

//|-- app.js
//|-- vue
//|-- |-- pages
//|-- |-- |-- Sample
//|-- |-- |-- |-- Index.vue

// 正規表現で.vueのついたファイルをまるごとrequire
const files = require.context('./vue/pages/', true, /\.vue$/i);
// そのfilesをmapで回して、コンポーネント登録
files.keys().map(key => {
    const split = key.split('/');
    Vue.component(
        split.reverse()[1] + split.pop().split('.')[0],
        files(key).default
    );
// 例： 
// Vue.component(
//    'SampleIndex', 
//    require('./vue/pages/Sample/Index.vue').default
// );
});
```

## Laravelのブレードはシンプルに
上記でvueにComponent登録は終わってるものとして、SampleIndexを呼び出す

```php:sample.blade.php
<!DOCTYPE html>
<html>
<head>
  @include('layouts.header')
</head>
<body>
  <div id="app">
    <sample-index />
  </div>
</body>
</html>
```

## Vueのページコンポーネントとして
本来なら`export default { layout: 'default' }`にしたいけどやり方がわからなくて、`<Layout>`を呼び出す。ここで変更したいときは`<Layout name="default">`のようにname属性で変更する。

```vue:pages/SampleContent.vue
<template>
  <Layout>
    SampleIndex
  </Layout>
</template>

<script>
import Layout from '@/layouts/Layout';
export default {
  components: {
    Layout
  }
}
</script>
```

```vue:layouts/Layout.vue
<template>
  <component :is="name">
    <slot />
  </component>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: 'Default'
    }
  }
}
</script>
```

```vue:layouts/Default.vue
<template>
  <div class="default">
    <header />
    <main>
      <slot />
    </main>
    <footer />
  </div>
</template>

```
ロボットの実行中に開始したプロセス”だけ”をKillする

Kill Processとかプロセス名を指定していちいち組み込むのが面倒だし、なにより作成者にルールとして守らせるのも酷なので、「そのロボットが実行中に開始したプロセス”だけ”をKillするxamlパーツ」を作成してみた。Userは、何も考えずに、そのワークフローを呼ぶだけでいいようなつくりにする。
#そもそもLibraryかProcessか問題
部分的なパーツとして配布する場合、Libraryとして中身をわからなくしてもいいけど、今回はUserみんなにも中身を知ってほしいので、あくまでinvokeする必要のあるxamlとして配布することにした（invokeも使ってほしいしね。。。あと、PackageのManageとかも面倒そうだし。。。）
#基本的な構造
①AssignでSystem.Diagnostics.Process.GetProcesses()で実行中のすべてのプロセスを取得し
②OpenBrowserでBrowserを開き
③Tryの中で実行中のプロセスの中から、UiPath.Executor.exeをProcessオブジェクトとして取得
④開始時刻（Process.StartTimeオブジェクトで事前に取得済）よりも前（DateTimeの比較演算）のものをKill
（↓はKillするところまで:Write Lineのところ）![Main.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/550312/d03df894-e490-f2b7-3e80-1f8bfd09f01e.jpeg)

#問題とその解決
**デバック実行中に**(ここ大事)問題が発生。最初の数件のProcessにはアクセスできるけど、権限の関係上アクセス不可能なものがある。Tryで握りつぶして解決（したことにする）。
以下、コミュニティでの私の質問と、根本的な原因を示してくださった方の解答です。なんでも
""
デバッグ実行では、アクティビティ単位で例外の検出をしているので、Try-Catchが補足する前に、例外を補足してしまったためメッセージが出ます。ここで単に続行とすると、外側のTry-Catchで補足してくれて、そのまま処理が進むと思います。
""
とのことでした。なんとも足元をすくわれたような感覚。。。
https://forum.uipath.com/t/uipath-executor-exe-kill/176831/9?u=haguruma

近々社内に配布しよう！してみる。しようっかな。。。きっとする。。。。
pythonとcplexで最適化を扱いたい

#はじめに
これはpythonを用いてソルバーを扱いたい学生向けと考えて書いています．(CPLEXの使用法自体には述べていないので，それを求めている場合ならBack to Googleしてください．)



# CPLEXってなーに
簡単に言えば，**有償ソルバー**です．

> CPLEXは、IBM社が提供する商用の数理最適化ソフトウェアです。（アカデミック版は無料）

IBMの提供する最適化ソルバーってことです．学生なら無料で使える．
一時期学生版ダウンロードできなかったらしいけど，今はできる(2019.12.15情報)
1アカデミックメールアドレスで1アカウントつくることができて、1アカウント毎に1回だけダウンロード、インストールできる。慎重にダウンロードしよう。

### 事前準備 on windows
個人的に躓いたポイントはここ．
PythonでCplexを使うなら．Pythonは**64bit版**の**3.6**か**3.7**をインストールしてください．
cplexのwindows対応版が64bitなので，なぜか次項のconvert.pyまではうまくいくし，
pip listの時点ではしっかりcplexと表記が出るけど，

```python
import cplex
```
でエラーが出る．

エラーは

```
%1は有効なwin32アプリケーションではありません
```
だったと思う．

# CPLEXのダウンロード
Cplexは本来有償版だが，学生アカウントを作成すればインストールできる．
私はここを参考にしてインストールした．
[【学生版】CPLEXのインストール手順に関する情報があまりなかったので書いてみた](https://qiita.com/nanametal_/items/ab9492193bf48e29b5ea)
数年前だとIBM Download Directorとか入れなあかんかったっけ…？？という所感…

# Pythonライブラリとして適用
cplexのフォルダ構成はこのようになっている(一部抜粋)　C:\Program Files\IBM\ILOG\CPLEX_Studio1210\以下部分．
![cplexフォルダ構成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184388/d09273ff-a296-7bcf-20d1-cc5960db32d2.png)
構成内に大量のsetup.pyがあるから要注意(引っかかった)
cplexを導入する場合，上図の〇のどちらかを実行しなければならない．
python3.7ならディレクトリ3.7配下のsetup.pyを実行する．

```
 >>> python setup.py install
```
終わったら，pip listを表示してcplexがライブラリとして登録されていることを確認する．

参考サイト：[PythonからCplexを呼び出す](http://yambi.hatenablog.com/entry/20160716/1468673454)

一応終わったらターミナルでもpythonでimport cplexを確かめよう．
Azure DevOps の ビルドエージェント で .NET Core 3.1 をビルドする

# 最新情報
(2020/02/24 修正)
Azure DevOps の ビルドエージェント が .NET Core SDK 3.1 に対応しました！
下記、ビルドエージェントを利用することで、.NET Core SDK 3.1を利用できます。

[Windows Server]
https://github.com/actions/virtual-environments/blob/master/images/win/Windows2019-Readme.md

[Ubuntu]
https://github.com/actions/virtual-environments/blob/master/images/linux/Ubuntu1804-README.md

本記事の記載内容に関しては対応不要です。
お間違え無く！

# 概要
先日 (2019年12月) .NET Core 3.1 がリリースされました。
喜びの元、早速手持ちの.NET Coreプロジェクトを 3.0 から 3.1 にアップグレードしたところ、
Azure DevOps のビルドパイプラインにてエラーが発生しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/353069/70351d5e-5dee-ca03-d703-cf4e1a506915.png)

エラー内容から Azure DevOps の ビルドエージェント が .NET Core SDK 3.1 に未対応で、
.NET Core SDK 3.0 までしかインストールされていないことが原因でした。
恐らく近日中には公式対応されると思いますが、打開策を探したところ Developer Community にヒントとなる情報がありました。

https://developercommunity.visualstudio.com/content/problem/844809/azure-pipelines-wapproj-build-fails-using-windows.html

```

- task: UseDotNet@2
  displayName: 'Use .NET Core sdk 3.1.100'
  inputs:
    packageType: sdk
    version: 3.1.100
    installationPath: $(Agent.ToolsDirectory)/dotnet

```

ビルドパイプラインにdotnetコマンドタスクを追加し .NET Core SDK 3.1 をインストールするというものです。
手元のプロジェクトで試したところ、上手くパイプラインを実行することが出来ました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/353069/5d71eb42-689b-7f8e-08b9-e0661a123858.png)

過渡期の一時的な対応内容となるかと思いますが、参考情報として掲載します。
Svelte/SapperでOGP設定をする

# はじめに

SSRを選択する理由にOGP設定ができることが挙げられます。
最近、注目されているSvelte/SapperではどのようにOGP設定をするのか調査しました。

2021/02/17:追記
svelte-meta-tagsを使うのが便利です
https://github.com/oekazuma/svelte-meta-tags

# OGP設定

OGP設定ではページごとに内容が変わることが求められます。
そうでなければ、異なる商品なのに静的なOGP設定しかできません。

OGP設定の`og:url`にはリクエストURLを設定することにします。
sapper ではPRELOADINGを提供していて、簡単に言うと、実際に画面を開く前に、事前に読み込めるものは読み込んで高速化する技術です。このPRELOADING処理内でリクエストURLも取得することができます。

これを使うには、以下のようにscriptタグを`context="module"`で宣言します。
この中の処理はserverでのみ実行され、clientでは実行されません。
(Next.jsの`getInitialProps`やNuxt.jsの`asyncData`だと公式サイトで言っています。)

```js:index.svelte
<script context="module">
  export function preload({ host, path, params, query }) {
    // 処理
  }
</script>
```

この中でogp設定に必要な情報を作成し、必要であればDBなどから取得してください。
ここでは簡単に以下のように設定します。

```js:index.svelte
<script context="module">
  export function preload({ host, path, params, query }) {
    // 必要ならここでDB取得処理を書いてください。

    let ogp = {}
    ogp.url = 'https://' + host + path
    ogp.type = 'article'
    ogp.title = '記事編集タイトル'
    ogp.description = '記事詳細'
    ogp.site_name = 'サイト名'
    ogp.image = 'https://sample/ogp_image.png'

    return { ogp }
  }
</script>
```

しかし、このままでは同じindex.svelteファイルからは読み取れないので、このscriptタグとは別に`context="module"`のないscriptタグの中でogp変数を外部から読み取れるようにexportで宣言します。※この変数名と`<script context="module">`内の戻り値の変数は同じにする必要があります。

```js:index.svelte
<script context="module">
  ...
</script>

<script>
  export let ogp
</script>

<svelte:head>
  <title>Sapper project template</title>
  <meta property="og:url" content={ogp.url} />
  <meta property="og:type" content={ogp.type} />
  <meta property="og:title" content={ogp.title} />
  <meta property="og:description" content={ogp.description} />
  <meta property="og:site_name" content={ogp.site_name} />
  <meta property="og:image" content={ogp.image} />
</svelte:head>
```

## 参考サイト

[Sapper公式 PRELOADING](https://sapper.svelte.dev/docs#Preloading)
iOS13のセルのselectedとhighlightedにつまずいた

# はじめに
iOS13 で動作チェックをすると下記のような画面に遭遇した:scream:

| iOS12 | iOS13 |
| --- | --- |
|![12](https://user-images.githubusercontent.com/34936885/70865066-8aaa5780-1f9c-11ea-8cf4-6e344644c571.png)|![13](https://user-images.githubusercontent.com/34936885/70865070-9269fc00-1f9c-11ea-8083-352a78542cc9.png)|

（どちらも一番上のセルが選択状態になっています）

iOS13 の `UITableViewCell` の選択時の状態がおかしい:bomb:

# 現象
こちらどうやら iOS13 からセルの選択とハイライトの時の動作が変わったようです。

[iOS13リリースノート](https://developer.apple.com/documentation/ios_ipados_release_notes/ios_13_release_notes#3319780)

今まで選択とハイライトの時は `contentView` の `subView` の背景色が透明になっていましたが iOS13 からは変化しなくなったようです。(こちらは以前から告知されていたようですが知りませんでした...:see_no_evil:)

今までは下記のように選択時も View の色を保持したい場合は `setHighlighted(_:animated:)` と `setSelected(_:animated:)` で色を再設定するか ImageView を使うなどしないといけませんでしたが iOS13 からはそういったことをしなくてもよくなったようです。

<img width="300" alt="color" src="https://user-images.githubusercontent.com/34936885/70865073-98f87380-1f9c-11ea-929c-2e7026ab717b.png">

(`UILabel` の `Highlighted` の色はちゃんと反映されました)

# 対応
`contentView` の `subView` の背景色が変化しなくなったので今までと同じようにするには今回の場合は `UITextView` の背景色を clear にすれば今まで通りの表示になります。

`UITextView` の背景色の初期設定は Xcode10 だと white, Xcode11 だと System Background Color でした。どちらの設定も最初にのせた画像のように iOS13 の場合に表示がおかしくなるので clear に変更する必要があります。 `UILabel` の初期設定は Default になっており iOS12, 13 ともに問題なく表示されました。 

# さいごに
iOS13 と 13未満で動作が異なるので `subView` の背景色の設定には気をつけましょう！！

New Features っていう表現て素敵ですね:heart_eyes_cat:

アプリのリリースノートとかでよく見る「軽微な不具合を修正しました」とかも New Features って言えば平和になる気がします:innocent:
QoreSDKを使ってNBA選手の活躍予測をしたい

これは[深層学習以外の機械学習と応用技術 by QuantumCore Advent Calendar 2019](https://qiita.com/advent-calendar/2019/quantumcore_reservoir)の15日目の記事です。

# やりたいこと

時系列情報を用いてNBA選手の活躍予測をする。

今回はユタ・ジャズ所属のDonovan Mitchell選手の「出場分あたり得点数」を予測します。

[Donovan Mitchell (Basketball Reference)](https://www.basketball-reference.com/players/m/mitchdo01.html)

ちなみに僕はバスケットボール初心者です。

# 仮定

**「シーズンでの活躍の浮き沈みって毎シーズン同じになるんじゃない？」**

---

例えば、「シーズンはじめは不調だけど途中で調子を取り戻し、シーズン終盤で活躍のピークを迎える」

かなり粗い仮定ですが、これとQoreSDKでどこまでできるか試してみました。

# データと予測内容

## データ
[Basketball Reference](https://www.basketball-reference.com/)をスクレイピングして、各試合における選手のBox Score(出場記録)を取得。

なおBaketball Referenceには1954年頃からの試合データがあり、一応全データをスクレイピングしました。もし内容が気になる方はご連絡ください。

## 予測するもの

- 説明変数: 開幕からの日数
- 目的変数: 出場分あたり得点数 (`PTS/MP`)

11月中旬までのDonovan Mitchellの出場分あたり得点数は以下のようになります。

<img width="878" alt="スクリーンショット 2019-12-16 0.03.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186209/0dc8e2b3-b099-067e-38b2-3d8214829ba4.png">

今回は18/19シーズンのデータを使ってTrainを、19/20シーズンの途中まででValidationをします(モデルの変更は行いませんが)。その後、実際の試合に対してDonovanの活躍予測をします。

# コード

## 接続

```python
from  qore_sdk.client import WebQoreClient
client = WebQoreClient(username="", password="p@$$w0rd", endpoint="")
```

## データ準備

`Donovan.csv`にはスクレイピングした選手の成績があるとします。

```python
import pandas as pd
donovan = pd.read_csv('Donovan.csv', parse_dates=['date'], index_col='date')
```

<b>(再出)</b>

- 説明変数: 開幕からの日数
- 目的変数: 出場分あたり得点数 (`PTS/MP`)

```python

# シーズン開始前の10月1日を規準とする。
# 開幕の日のほうが良いかもしれない

X = donovan[(datetime.datetime(year=2019, month=10, day=1)>donovan.index) & (donovan.index>datetime.datetime(year=2018, month=10, day=1))].index
X = X - datetime.datetime(year=2018, month=10, day=1)

y = donovan[donovan.index.year==2018]['PTS per mn']
```

データ分割

```python
import sklearn.model_selection as model_selection
X_train, X_valid, y_train, y_valid = model_selection.train_test_split(
    X, y, shuffle=False, random_state=44
)
```

学習と予測

```python
# Train
res = client.regression_train(X=X_train.values, Y=y_train.values)

# 予測
pred = client.regression_predict(X=X_valid.values)
```

バリデーション(という名の確認)

```python
import sklearn.metrics as metrics
rmse = metrics.mean_squared_error(y_valid, pred["Y"])**.5
mae = metrics.mean_absolute_error(y_valid, pred["Y"])

print("RMSE=", rmse)
print("MAE=", mae)
print("RMSE/MAE=", rmse/mae)
```

# 結果

学習の時点で`HTTPError: HTTP Error 500: INTERNAL SERVER ERROR`が発生。解決次第、記事をアップデートします。

# 予想される課題

- 仮定が単純すぎる
  - 時間以外の要素を考慮するべきかもしれない
- そもそもパフォーマンス評価に軸が「出場分あたりの得点数」だけはおかしい
- まずは、結果を出そう。

# QoreSDKの使い心地

別データセットで学習・予測をすると、確かにお手軽さ・楽チンさがあります。Reservoir Computingのような、利点をもつが複雑な計算を簡単に再現できるツールというのはもっと知られるべきだと思いました。

一方、その分ブラックボックス的印象を受けることがあり、[運営の初日記事](https://qiita.com/ryoppippi/items/f607c8828238094eade0)や[ドキュメンテーション](https://qcore-info.github.io/advent-calendar-2019/index.html#qore_sdk.client.WebQoreClient.classifier_train)を始めとした説明をしっかりと理解する必要があります。特に、ドキュメンテーションには初日記事にあるような、背景・理論の説明ページがあってもいいのかなと感じました。

いずれにしても、このようなツール開発に時間を注くQuantumCoreの皆様に敬意を示します。
【Vue.js】Vue-CLI4.1.1でFont awesome5を使う手順

## はじめに
**Vue-CLI**(4.1.1)で**Font awesome**を使う手順をまとめました。

[公式ドキュメント](https://github.com/FortAwesome/vue-fontawesome)

## この記事が役に立つ方
- これからVue-CLIでFont awesomeを使ってみたい方

## この記事のメリット
- Vue-CLIでFont awesomeが使えるようになる

## 環境
```yaml
OS: macOS Catalina 10.15.1
Vue: 2.6.10
vue-cli: 4.1.1
vue-router: 2.6.10
vuex: 3.1.2
```
## 1.インストール

```shell
$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/vue-fontawesome
```
上記で基本的なアイコンは読み込めるようになります。


### 注意

**InstagramやTwitter**などの**ブランドアイコン**は別ファイルに切り分けられているため、**別途読み込み**が必要です。

```shell
$ npm i --save @fortawesome/free-brands-svg-icons
```
必要があれば上記コマンドでインストールしましょう。

## 2.使うアイコンの登録
### 2-1.使うアイコン名を確認
[Font awesomeのサイト](https://fontawesome.com/)で任意のアイコン詳細画面まで行き、枠で囲ってある2箇所を確認しておきましょう。

![スクリーンショット 2019-12-16 0.28.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483292/b335eb8f-364e-9bd4-a06b-8ff29d7aff33.png)


### 2-2.使うアイコンを`src/main.js`に登録
確認しておいた情報を元に、以下コードを書きます。

```javascript:src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// ここから追記 //

import { library } from '@fortawesome/fontawesome-svg-core'

// solidの中で何を使うかをキャメルケースで記載
import { faDog, faHotdog } from '@fortawesome/free-solid-svg-icons'

// brandsの中で何を使うかをキャメルケースで記載
import { faTwitterSquare } from "@fortawesome/free-brands-svg-icons"

import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

// 上記で記載したアイコン名をLibraryに追加
// solid, brands関係なしでOK。
library.add(faDog, faHotdog, faTwitterSquare)

Vue.component('font-awesome-icon', FontAwesomeIcon)

//　ここまで追記 //

Vue.config.productionTip = false

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

```


### solid
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483292/c1ccbf23-5021-9fbc-e6e1-83645f221ea5.png) ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483292/35a4ddb7-1c98-55d2-0df7-bd8744d3a6be.png)

### brands
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483292/7d634140-b582-982a-aeb5-c6796ffaa3f1.png)

これで、上記アイコンが使えるようになっています。

## 3.任意のテンプレートに記述
使いたい箇所に以下のように記述すればアイコンが反映されます。
※例はテキトーです。

### solid

```html
<p>
  <font-awesome-icon :icon="['fas', 'dog']" />
  かわいいワンコ
</p>
```

```html
<h1>
  <font-awesome-icon :icon="['fas', 'hotdog']" />
  ホットドッグ早食い大会！
</h1>
```

### brands

```html
<a href="twitterへのリンク">
  <font-awesome-icon :icon="['fab', 'twitter-square']" />
</a>
```

## おわりに
最後まで読んで頂きありがとうございました:bow_tone1:

どなたかのお役に立てれば幸いです:relaxed:

## 参考にさせて頂いたサイト（いつもありがとうございます）
- [GitHub - FortAwesome/vue-fontawesome: Font Awesome 5 Vue component](https://github.com/FortAwesome/vue-fontawesome)
Errors thrown from here are not handledとは

サンプルコードを参考にしてコードを書いていると、エラーが発生した。

![スクリーンショット 2019-12-16 0.06.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546679/4b42539e-2b4d-34b8-f2ab-5c735333ee97.png)


```
Errors thrown from here are not handled
```

って。


日本語だと、「ここからスローされたエラーは処理できません」
と。

これはなんだ？

調べる必要性がある。
Catalina: zsh への移行でpyenvが動かなくなる問題

# 問題

CatalinaにOSをアップデートするとbashからzshへの移行を勧められる。ここで、zshに移ってしまうとそのままではpyenvが機能しない。

## 環境

- iMac late2012
- macOS Catalina 10.15.2

## 再現してみる

pyenvでversionを表示させると確かに出てくる。

```bash
% pyenv versions
  system
  3.6.5
  3.6.5/envs/3.6.5_tensorflow_cpu
  3.6.5_tensorflow_cpu
* 3.7.4
```

現在設定されているpython環境は3.7.4なはず。

```bash
% pyenv local
3.7.4
```

しかし、実行すると、systemのpythonが上がってくる。

```bash
% python

WARNING: Python 2.7 is not recommended.
This version is included in macOS for compatibility with legacy software.
Future versions of macOS will not include Python 2.7.
Instead, it is recommended that you transition to using 'python3' from within Terminal.

Python 2.7.16 (default, Nov  9 2019, 05:55:08)
[GCC 4.2.1 Compatible Apple LLVM 11.0.0 (clang-1100.0.32.4) (-macos10.15-objc-s on darwin
Type "help", "copyright", "credits" or "license" for more information.exit
```


## 解決策

sh で使用する場合には、.zshenv や .zshrc などに設定を書く必要がある。

以下の行を追加してあげることでpyenvが復活する。

```bash
export PYENV_ROOT="$HOME/.pyenv"
export PATH="$PYENV_ROOT/bin:$PATH"
eval "$(pyenv init -)"
```

エディタで.zshrcを起動して、

```bash
vim ~/.zshrc
```

先ほどの行を足してあげる。そして、sourceして再読み込みすればオッケー

```bash
source ~/.zshrc
```

試しにPythonを起動してみる

```bash
% python
Python 3.7.4 (default, Sep 28 2019, 14:11:05)
[Clang 10.0.1 (clang-1001.0.46.4)] on darwin
Type "help", "copyright", "credits" or "license" for more information.
>>>
```

期待通りのpython環境が上がってきてくれました！！
Firebaseのpython SDKでCloud Storageにファイルをアップロードする方法

メモ

```python
import firebase_admin
from firebase_admin import credentials
from firebase_admin import firestore, storage

cred = credentials.Certificate('your-cred.json')
firebase_admin.initialize_app(cred, {'storageBucket': '<bucket-name>'})

bucket = storage.bucket()

filename = 'image.png'
content_type = 'image/png'
blob = bucket.blob(filename)
with open(filename, 'rb') as f:
    blob.upload_from_file(f, content_type=content_type)
```


# Ref
- https://firebase.google.com/docs/storage/admin/start
- https://googleapis.dev/python/storage/latest/buckets.html#google.cloud.storage.bucket.Bucket.blob
MySQLチートシートd

#  MySQLコンソールの開始


```
# MySQLサーバ立ち上げ
$ mysql.server start



# MySQLサーバに接続
$ mysql　-uroot -p
$ mysql -u ユーザー名 -D データベース名 -p
```

# MySQLコンソール内にて

```
# 各userの権限の確認(user情報のテーブルはmysql.user)
> SELECT user, host FROM mysql.user ORDER BY user

# 各user情報の項目確認
> show columns from mysql.user;

# ユーザの操作
> DROP USER ユーザ名;

# データベースの操作
> show databases;
> drop database データベース名;
> use テーブル名;
> show tables;
```


# その他
[[MySQL]権限の確認と付与](https://qiita.com/shuntaro_tamura/items/2fb114b8c5d1384648aa)
[MySQL のデータベースユーザーとデータベースアクセス権限](https://www.saintsouth.net/blog/mysql-user-and-permissions/)
【VScode】autopep8のフォーマットが効かない【Python】

#概要
会社のPCではうまくいくのに、自宅のVScodeでautopep8のフォーマッタが効かなくてやる気が失われていた
-> 問題は設定にあり

# 環境
- MacOS Mojave 10.14.6
- Visual Studio Code 1.40.2
- Python 3.7.4
- autopep8 1.4.4

autopep8の他に、flake8とmypyを使用していた。
環境はPipenv使用のvenv（VScode上でインタプリタを適切に選択できていれば問題ないので今回の問題とは無関係。）

# 設定と症状

Settings.jsonはこんな感じ。
formatOnSaveは効いているもののフォーマットはされておらず、右クリックからドキュメントのフォーマットをしても無反応。
ただコマンドラインからフォーマット(```$ autopep8 sample.py```)は効いていた。

```json:settings.json
  "editor.formatOnSave": true,
　"python.linting.enabled": true,
  "python.linting.pylintEnabled": false,
  "python.linting.flake8Enabled": true,
  "python.linting.flake8Args": [
    "--ignore=E402, E501, W503"
  ],
  "python.formatting.autopep8Args": [
    "--ignore=E50", //セミコロンで改行させて
    "--max-line-length=120",
    "--aggressive",
    "--aggressive",
  ],
  "python.jediEnabled": false,
  "python.linting.mypyEnabled": true,
```

#解決
フォーマッター効かせずに書くのがきつすぎたので必死で検索。

こんなissueがあった。
autopep8 formatting not working #2843
https://github.com/Microsoft/vscode-python/issues/2843

>@thernstig your settings aren't quite right; you want as you have to make each individual item you would pass on the command line an individual thing in the array:

>"python.formatting.autopep8Args": ["--max-line-length", "100"]
>>コマンドラインには配列内の個々のアイテムを渡す必要があります。（意訳）

間違っていたのは以下の部分。

```json:settings.json
  "python.formatting.autopep8Args": [
    "--ignore", 
    "E50",
    "--max-line-length",
    "120",
    "--aggressive",
    "--aggressive",
  ],
```

autopep8は以下のように設定できるが、settings.jsonでは配列中の個々で渡す必要があるようだ。
脳死で上のflake8の項目設定と同じように書いてたな・・・

```bash
usage: autopep8 [-h] [--version] [-v] [-d] [-i] [--global-config filename]
                [--ignore-local-config] [-r] [-j n] [-p n] [-a]
                [--experimental] [--exclude globs] [--list-fixes]
                [--ignore errors] [--select errors] [--max-line-length n]
                [--line-range line line] [--hang-closing] [--exit-code]
                [files [files ...]]
```
unable to start ssh-agent service, error :1058

```powershell:ssh-agentの実行で1058エラー
> ssh-agent
unable to start ssh-agent service, error :1058
```

OpenSSHのサービスが起動していない

### OpenSSH サービス起動（＆自動実行）

Windowsサービスを開く

OpenSSHを選択し、右クリックメニュー「プロパティ」

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151078/8ed17e77-fdf6-c953-6cb7-ef5ac6ccec27.png">
スタートアップの種類を「自動」に設定

<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151078/4e6f33bd-e4a2-80ff-9d83-e3d043d7f1b6.png">

OpenSSHを選択し、右クリックメニュー「開始」

<img width="600" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151078/0e715d9c-9e27-ea18-55b6-ec9edd203877.png">

----

参考にしました
[stackoverflow](https://stackoverflow.com/questions/52113738/starting-ssh-agent-on-windows-10-fails-unable-to-start-ssh-agent-service-erro)
swift初心者がiOS13対応でメインスレッド以外でUI更新をしてクラッシュさせてしまった話

## はじめに
私物でapple製品を一度も買ったこともない人間が、ある日iOSアプリの改修担当になり、iOSアプリの開発あるあるのメインスレッド以外でUIの更新をしようとしてクラッシュさせてしまっときの備忘録です

## ~~何もしてないのに~~クラッシュ？何・・・だと・・・?
swiftの基礎を~~なんとなく~~勉強してiOS13対応を黙々とやっていました
その時のビルドして動作確認をすると、モーダルを表示するところで突如クラッシュを起こしてしまいました・・・・

一体なんだ？？っとなりクラッシュした原因を漁ってみると、以下のようなエラーが・・・

```
Fatal Exception: NSInternalInconsistencyException
Modifications to the layout engine must not be performed from a background thread after it has been accessed from the main thread.
```

どうやらバックグラウンドスレッドでUI更新をするのはやめろとのこと
このあたりはGCD※の都合上だめみたいです

※GCD(Grand Central Dispatch)についていは以下の記事を見て理解
https://qiita.com/ShoichiKuraoka/items/bb2a280688d29de3ff18

## iOS13対応に伴って急にだめになったのはなぜに？
https://forums.developer.apple.com/thread/121424
それらしき記事があり、iOS13のアップデートで内部的仕様が変わったみたい


## え？じゃあマルチスレッドのときどうすれば？？？
かんたんな話、メインスレッドにキューとして入れればいいだけの話でした
`DispatchQueue.main.sync` でいい感じにキューに溜め込んでくれるみたいです

```swift
DispatchQueue.main.sync {
    // code...
}
```

## 終わりに
普段はwebアプリばっかり書いているのもあり、アプリ開発大変だなぁという気持ち
swift力を高めねば・・・
Kaggleって怖いとこじゃないよ。

# はじめに

この記事は日経xTECHさん主催の「AI道場「Kaggle」への道」アドベントカレンダーの記事です。
遅ればせながらKaggleにこの度入門いたしましたので、こちらにその経緯を書かせて頂きます。


# Kaggleとは？

Kaggleとは、

**強いデータサイエンティストがしのぎを削って精度向上のために人間性を捨てる場所**😭

ではなく、

### あるテーマに沿って、参加者みんなで精度を上げていく、知的欲求を満たす場所💪(._.💪)

だと思っています。(まだ参加して1週間くらいなんですけどもね。)

ほんと？って思った方はMNISTとか、いろんなコンペに実際に参加されてみるといいかと思います。

# Kaggleってどんなことするの？

コンペティションが開始されると共に、色々な情報がDiscussionに飛んできます。
例えば先日開催された、[DeepFakeDetectionChallenge](https://www.kaggle.com/c/deepfake-detection-challenge/overview)で見てみてもわかる通り、
与えられた難しい問題に対して、何が使えるか早速議論が始まっています。

![Kaggle_DFDCコンペDiscussionの様子](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182970/527bc35f-d288-840a-8dd4-fcec560be136.png)

DFDCコンペは、Test用のFakeVideoが与えられ、それに対してFake-or-Trueを答えると言うコンペです。

例えば、上から2つ目では、「この問題に対するState-of-the-artな論文を集めてきたよ！」と投稿され、
下から2つ目では、「videoに使われてる音って判別に使えないかな？」とか。
積極的に議論され、試してみたけどどうだった。とかって言う議論をここでチェックすることができます。

Kaggleではコンペ中に自分が得た知見を他者に公開する時は、
基本的にDiscussionを通してShareしなければなりません。
なので、ここを見ればわかっている全ての情報が公開されている訳です。

みなさん、メダルが欲しいですから、基本的にわかったことは情報共有していきます。
情報共有したことが評価されてUpvoteされるのも、**知的好奇心が刺激されてすごく楽しいです。**

# Kaggleは全て自分でやる必要はない

Kaggleでは、プログラムもその知見としての価値を持ちます。
どうやってFakeを見破るか、といった知見を**Kernel**として公開します。

![Kernelを公開](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182970/a2110ccb-0cd2-59eb-5902-17ff5e4d0e17.png)

ここで公開されているKernelは、全て再利用が可能で、そのまま使ってSubmitしても大丈夫です。
逆に、自分が機械学習のプログラミングが得意なら、ここで公開して披露することで、Upvoteしてもらえ、
メダルがもらえます。

ここで、あえて言わせていただきましょう。
### コンペに勝つだけが、Kaggleではない！


ここがKaggleの面白いところだと思っています。
知見を披露して褒められることは、**誰だって嬉しいことでしょう。**
だって、相手は日本を限らず世界中のデータサイエンティストなんですから、

# なら、参加してみましょうよ！

Kaggleに参加するのに、特別な知識や経験などは要りません。
全て用意してもらえる訳ですから。それでいて強い。って言われるなら**やるっきゃないでしょ！**

# 注意して欲しいこと🚨

Kaggleはアカウント1人につき1つと限定されています。コンペ成績に支障が出るためです。
なので、下手にアカウント2個作って電話番号をダブらせて登録とかすると、**アカウントロックされます。**(1敗)

# おわりに

ざっくりとした入門記事ですみません。
でもKaggleで参加しようか迷ってるくらいなら一度くらい参加してみませんか？

繰り返しますが、
### Kaggleは”競争”ではなく”知的好奇心を刺激しまくってくれる楽しい競技”です

正直競争とか考えてると、leakとかshakeup/downとかで面白みを全く失ってしまう気がします。
(某kiriDSの方々って、競争・闘争・血で血を洗えみたいなイメージを植えつけすぎな気がします。)

Kaggleにある本当の楽しさって、
競争による優越とかキャリアアップの修行とか賞金とかそんな俗っぽい面白さではないと思うんですよ。
自分の知見が広がる楽しさ、思ってもみなかった発見とか、そういう知的なパズルでしかないんです。

なので、

### Kaggle、怖いとこじゃないよ！

ってことを伝えたかったです！読んでくださってありがとうございました！
Macで快適にタイピングするための方法

# 概要

Macで快適にタイピングするために、macOS標準でサポートされている
移動・編集系のキーボードショートカットを紹介します。

慣れると本当に快適ですよ！！


# こんな人に読んでもらいたい

* Macを使っている
* タイピングがそこそこ速い
* プログラミングしていて四六時中キーボードを触っている
* 移動・編集系のショートカットを使っていない


# キーボードを触っている時間

私は普段プログラミングしているので四六時中キーボードを叩いています。
Qiitaを見ている皆さんもそんな人が多いんじゃないでしょうか。

プログラミングとかを仕事にしていると
キーボードを触っている時間がすごく長くなります。
プログラミングとかしている人でキーボードを触るのが嫌いな人はいないと思いますが
どうせなら少しでも快適にタイピングできれば良いと思いませんか。

タイピングにおいて不快なことって
「入力の遅さ」や「入力ミス」だと思うんですね。

それらを減らすためにタイピングを練習したりするわけですが
ある程度タイピングができると
速さも正確性も増してかなり快適になります。

でも、これってまだ快適なタイピングではないと思うんです。


# 快適なタイピングとは？

快適とか不快っていうのは
個人の感覚による部分が大きいと思いますが

私の場合
タッチタイピングするためにホームポジションに手を置いたまま
なのが快適です。

ホームポジションから手が離れて
カーソルキーやバックスペースキー
タッチパッドやマウスに手を移動させるのが不快です。

カーソルキーやタッチパッドが嫌なのではなくて
頻繁にホームポージションから離れて行ったり来たりするのが不快なのです。

なぜ、ホームポジションから離れるのが嫌かというと
ひとつは普通に手を大きく動かさないといけないことと
もうひとつはホームポジションから一旦離れて
再びホームポジションに手を戻した時に微妙に手の位置がズレたりして
復帰直後は入力ミスしがちだからです。


# 移動・編集系のキーボードショートカット

macOSには標準で移動・編集系のキーボードショートカットがサポートされています。
これを使うことでホームポジションから手を離す回数がグッと減ります。

macOSのショートカットは非常に沢山あるのですが
移動・編集系のショートカットに絞るとざっと次の通りです。

* カーソル移動

```
Ctrl + p：上：（previous の p）
Ctrl + n：下：（next の n）
Ctrl + b：左：（backward の b）
Ctrl + f：右：（forward の f）

Ctrl + a：行頭
Ctrl + e：行末（end の e）

Ctrl + v：次頁
```
（前頁のショートカットはない）


* 文字削除

```
Ctrl + h：カーソル左側１文字を削除
Ctrl + d：カーソル右側１文字を削除：（delete の d）

Ctrl + k：カーソル位置から改行まですべて削除
```

まだ他にもありますが

まずは１０個

これだけ知っていればかなり快適になるはずです。


# 使えるところ

macOSの機能なので文字を入力できるところのほとんどで使用することができます。
使えないところはどこ？ってぐらい使えます。

* テキストエディット
* Finder
* Spotlight
* ターミナル
* Safari
等々

OS標準のアプリでなくても大抵は使えます。
Chrome、Firefoxなどのブラウザや
VisualStudioCode、Sublime Textなどのテキストエディタでも
RubyMine、Pychamなどの開発ツールなんかでも使えます。
（使えないショートカットキーもあったりします）

でも、使えないところもあります。

* Microsoft Office
* 独自キーバインドのエディタ

他にも使えないところはあると思います。


# 大事な設定

キーボードショートカットを活用するためには
Macのシステム環境設定で
キーボードのキーリピートを「速い」に
リピート入力認識までの時間「短い」にしておくと良いです。

<img width="538" alt="スクリーンショット 2019-12-15 23.47.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261675/1bce5497-f2da-c731-db9f-e0455ac5f298.png">


# まとめ

macOSの移動系のキーボードショートカットを使うことで
ホームポジションから手を離す回数を減らすことができるので
かなり快適にタイピングすることができると思います。

慣れるまでは「ウッ！」てなるかもしれませんが
それを超えるともう離れられなくなると思います。

それでは快適なタイピングを！！

***

## おまけ１

みなさんはそれぞれ好みのテキストエディタを使っていると思いますが
Emacsっていうエディタがあるのをご存知ですか？

今回紹介したキーボードーショートカット（キーバインド：キー割り当て）
実はEmacsのそれとほとんど同じなんです。
Emacsの方がMacよりも先輩なのでMacが互換性を持たせたんですね。

EmacsではCtrlキーとoptionキーを多用します。
しかし、Macではoptionキーを使うショートカットが
記号の入力に割り当てられています。

Emacsで前頁のキーは、option + v なのですが
Macの標準ではルート記号が表示されてしまいます。


## おまけ２

Unix上の有名なエディタにEmacs と Vi があります。
その昔どちらが優れているかという論争があったのをご存知ですか？

私は普段のMacのキーバインド、つまりEmacsのキーバインドを使っていますが
ターミナルでサーバーに入って作業する時なんかはViを使っています。

サーバーには最低でもViは入っていることが多いので使っていますが
Vi。。。全然嫌いじゃないんですけど、いつまで経っても慣れないですね。

Viはデフォルト設定だとESCキーを多用します。

macbookがTouch Barを搭載した時、ESCキーが物理キーでなくなりました。
アップルはEmac派で、本気でVi派を潰しにかかったのかと思いました。

先頃発売されたmacbook 16インチではESCキーが物理キーとして復活しました。
ホッと胸を撫で下ろしました。


## おまけ３

キーバインドとかと全然関係ないですが
海外ドラマで「シリコンバレー」というのがあります。
ドラマの舞台はシリコンバレーのスタートアップ企業です。
是非プログラマーの人に見てもらいたいと思います。

インデントはタブかスペースかといった痴話喧嘩とか
一般の人が見てもわからないけれど
プログラマーが見たら笑えるネタであふれています。



以上です。
ConoHaサービスを使ったブログ開設の流れをかんたんに説明するよ

こんにちは、ましろです。
「[ConoHa Advent Calendar 2019](https://qiita.com/advent-calendar/2019/conoha)」の15日目の記事となります。

#はじめに
皆さんは自分のサイト（ブログ）を持っていますか？

僕はサイト運営が好きで、趣味の知識を分かりやすくまとめたサイトをよく作っています。

自分が興味を持って調べたり体験してみたりしたことを記事にする感じですね。

そうすることで、

-自分の記憶を整理することができる
-自分のことを知ってもらうためのポートフォリオになる
-同じ悩みを持った人の問題解決にも繋がり感謝される
-自分のつくったサイト経由で仕事の依頼がくる

といったメリットがあるんです。

この記事では、自分のサイト（ブログ）をConoHaサービスを使って作る流れをかんたんに説明します。

まだ自分のサイト（ブログ）を持っていないよ～という方は、この機会にぜひ作ってみてはいかがでしょうか。

#ブログを作る手順
ブログを作る手順は以下のとおり。

-レンタルサーバーの契約
-ドメイン取得
-WordPressのインストール
-独自SSL（無料）の設定
-WordPressのデザインテーマを入れる

##①レンタルサーバーの契約
■[ConoHa WING](https://www.conoha.jp/wing/)

ConoHaには「VPS」と「WING」がありますが、ブログを作るだけであれば「WING」でOKです。

「VPS」は自由にいろいろなことができるため、その分少し難しくなる感じですね。

Qiitaを利用している皆さんには全然難しくないかもしれませんが、何にもわからない初心者なら「WING」を選びましょう。

【申し込みの流れ】

１，基本情報（名前、住所、メアド）を入力する
２，本人確認を行う→SMS認証が簡単
３，支払い方法を選択する
４，プランを選択する→「ベーシック」でOK

##②ドメイン取得
ドメイン取得といえば「お名前ドットコム」が有名ですが、ConoHaでもドメインを取得できます。

ConoHaで取得することで、わざわざアカウントを作成する手間やサーバーとドメインを紐付ける設定項目が省けるのでおすすめです。

##③WordPressのインストール
ConoHa WINGでは「WordPress」を簡単にインストールできます。

【設定項目】
![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311845/6be50e5b-81c1-0193-cb61-459c30be769b.png)
１，URLは「wwwなし」でOK
２，サイト名はあとで変更できます
３，ユーザー名、パスワードはWordPressにログインするときに使います

##④独自SSL（無料）の設定
独自SSLの設定を行います。

独自SSLとは、データのやり取りを暗号化して覗かれないようにして、安全性を高める仕組みです。

独自SSLの設定をすることで、「http://」から「https://～」になります。（sが付く）

ここの設定をすることで、「http://」から始まるURLを入力しても「https://～」へ自動的にリダイレクト（転送）されるようになります。

【独自SSL設定の流れ】
![2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311845/06b3ea85-11db-04f0-67f1-2c0282419ec1.png)
１，「サイト管理」→「サイトセキュリティ」→「無料独自SSL」を「ON」をクリックする
２，「設定中」となるので「利用中」に変わるまで待つ

![3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311845/ef8faecc-d3fd-45d5-0491-37f67536cab9.png)
３，「サイト管理」→「サイト設定」→「かんたんSSL化」にあるボタン【SSL有効化】をクリックする

##⑤WordPressのデザインテーマを入れる
デザインテーマによってブログの見た目が変わります。また、デザインテーマによって設定項目も違ってきます。

テーマはたくさんあるので気に入ったものを利用するといいと思いますが、個人的には国産テーマがいいと思います。

【人気のWordPressテーマ】
無料→[Cocoon](https://wp-cocoon.com/)
有料→[SANGO](https://saruwakakun.design/)、[JIN](https://jin-theme.com/)

#まとめ
この記事では、ConoHaサービスを使ったブログ開設の流れについて簡単に説明しました。

自分のブログで記事を書くと愛着も湧いてくるのでたのしいですよ！

興味があれば作ってみてはいかがでしょうか。

筆者のブログ→[PCやWebサービスなどを解説するブログ-ましろぐ-](https://www.mashilog.com/)
一筋の光が差し込むWebサイト

[ゆるWeb勉強会@札幌 Advent Calendar 2019](https://adventar.org/calendars/4273) 16日目の記事です。

# 前置き
皆様おはようございます。DE-TEIUです。
本日の記事はCSSとJavaScriptを使った小ネタの紹介です。
ソースコードも公開しておりますので、何かの参考になれば幸いです。

#成果物
Webサイトが停電によって真っ暗になってしまい、内容が読めなくなった事はあるでしょうか。
今回は、そんな時にWebサイトを光らせて内容を表示させる方法をご紹介します。


[サーチライト](https://search-light.netlify.com/)
【使い方】タップしたところが光ります。暗闇に隠された何かを見つけましょう。

## 一筋の光が
差し込みましたね。

#解説
##概要
Webサイトのメインコンテンツの上に真っ黒なオーバーレイを重ねてます。
また、オーバーレイは縦3*横3の計9個の要素で構成されています。
その要素の内、中央の要素の背景色だけを画面クリック時に切り替えられるようにします。

図にするとこんな感じです。
![Untitled Diagram.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173272/4598934e-dd04-f094-b634-ad0e52f352bd.png)

後は、現在クリックされている位置に合わせてオーバーレイを移動させます。

基本的な仕組みは以上です。
(ロジック自体はjQueryで適当に実装してます。)

##実装の要点
- [Android Chromeでの画面更新を阻止](#android-chromeでの画面更新を阻止)
- [iOS Safariでのバウンススクロールを阻止](#ios-safariでのバウンススクロールを阻止)
- [CSSのグラデーションでライトっぽい表現](#cssのグラデーションでライトっぽい表現)

###Android Chromeでの画面更新を阻止
AndroidのGoogle Chromeには、画面の上の方から下の方にドラッグすると画面のリフレッシュを行うPull-to-Refresh機能が搭載されています。
便利な機能ではありますが、今回のWebアプリでは画面をドラッグしてライトを動かすという仕様上、このリフレッシュ機能が暴発してしまう事があります。切りましょう。

cssでbodyに以下の設定をするだけで良いです。

```scss:index.scss
body {
  overscroll-behavior-y: none;
}
```

overscroll-behaviorプロパティとは、画面内のスクロール可能な領域が末端に来た時の画面の振る舞いを指定するものです。
今回はoverscroll-behavior-yにnoneを設定したため、縦スクロールが画面端に来ても何も処理を起こさないようにしています。

参考：
[Android ChromeでPull-to-RefreshをCSSで無効化する。](https://qiita.com/TanakaMidnight/items/979cd7f044fb03a12a9d)

###iOS Safariでのバウンススクロールを阻止
iOS Safariには、画面内のスクロール可能な領域が末端に来た時、そのままスクロールし続けると画面外へスクロールし、指を離すと画面内に戻るという機能が搭載されています。
この機能がONになっていると画面ドラッグ時にライトと一緒に表示させたいコンテンツまでスクロールされてしまいます。切りましょう。

iOSのSafariでは前述のoverscroll-behaviorが未対応なので、JavaScriptでなんとかしましょう。

```javascript:index.js
$(() => {
  document.addEventListener('touchmove', function(event){
    event.preventDefault();
  }, { passive: false });
}
```

これでスクロール時に発生するデフォルトのイベントを阻止できます。

参考：
[2019年、JavaScriptでのスクロール一時禁止はこれだ！（スマートフォン）](https://qiita.com/yukiTTT/items/773356c2483b96c9d4e0)

### CSSのグラデーションでライトっぽい表現
まずはradial-gradient関数で円形の透過グラデーションを作ります。

```scss:index.scss

$light-gradient: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.3) 40%,
    rgba(0, 0, 0, 1) 70%,
    rgba(0, 0, 0, 1) 100%
);
```

そしてmask-imageプロパティを使うと、要素内に円形の透過グラデーションをマスクレイヤーとして設定できます。
(Chromeではベンダープレフィックスが必要)

```scss:index.scss

#light-space {
  &.on {
    mask-image: $light-gradient;
    -webkit-mask-image: $light-gradient;
  }
}

```

##おわりに
こういうちょっとしたネタを形にするだけでも、作ってる過程でそこそこ知見を得られたりするので皆さんもやっていきましょう。

#ソースコード
[GitHub](https://github.com/de-teiu/search-light)に公開中です。
Kotlin + Gradle で Tomcat 7 の Hello World

この記事は、 [大阪工業大学 Advent Calendar 2019](https://adventar.org/calendars/4049) の16日目の記事です。

## 背景・目的

本業が Android アプリ開発で、趣味が Web アプリケーション開発です。
なので、普段 Android アプリ開発に用いる Kotlin + Gradle を Web アプリケーション開発にも用いたいと考え、 Hello World を作成しました。

![screenshot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/40619/1b0f5f46-faf5-ce09-72b2-401f8b224e7e.png)

## つくったもの

GitHub: https://github.com/mizo0203/hello-world-tomcat-kotlin

## 開発環境

| IDE                                      |
|:-----------------------------------------|
| IntelliJ IDEA 2019.3 (Community Edition) |

開発に用いる IDE は IntelliJ IDEA です。

Android アプリ開発用といえば Android Studio が公式の IDE として公開されていますが、 Android Studio は IntelliJ IDEA がベースです。基本的な操作方法は Android Studio と変わりません。

上記、 GitHub 上のリポジトリを Clone or download して、 IntelliJ IDEA から Open できます。 IntelliJ IDEA 2019.3 (Community Edition) にて動作確認済です。

## ローカル環境で動作確認

[Gradle Tomcat plugin](https://github.com/bmuschko/gradle-tomcat-plugin) を導入しました。下記コマンドで、ローカル環境に Tomcat サーバを起動できます。

```shell
$ ./gradlew tomcatRun

> Task :tomcatRun
Failed to create META-INF directory in classes directory /Users/satoki/GitHub/hello-world-tomcat-kotlin/build/classes/java/main
Started Tomcat Server
The Server is running at http://localhost:8080/hello-world-tomcat-kotlin
<==========---> 80% EXECUTING [18s]
> :tomcatRun
```

下記コマンドでサーバを停止できます。

```
$ ./gradlew tomcatStop

BUILD SUCCESSFUL in 614ms
1 actionable task: 1 executed
```

`Address already in use (Bind failed)` エラーによってサーバ起動に失敗するならば、 `./gradlew tomcatStop` コマンドの実行忘れが考えられます。 

```shell
$ ./gradlew tomcatRun --stacktrace --info

# 〜省略〜

> Task :tomcatRun FAILED
Starting ProtocolHandler ["http-bio-8080"]
Starting ProtocolHandler ["ajp-bio-8009"]
Started Tomcat Server
The Server is running at http://localhost:8080/hello-world-tomcat-kotlin
Pausing ProtocolHandler ["http-bio-8080"]
Pausing ProtocolHandler ["ajp-bio-8009"]
Stopping service Tomcat
Stopping ProtocolHandler ["http-bio-8080"]
Stopping ProtocolHandler ["ajp-bio-8009"]
Destroying ProtocolHandler ["http-bio-8080"]
Destroying ProtocolHandler ["ajp-bio-8009"]
:tomcatRun (Thread[Execution worker for ':',5,main]) completed. Took 4.563 secs.

FAILURE: Build failed with an exception.

# 〜省略〜

Caused by: org.gradle.api.GradleException: An error occurred starting the Tomcat server.
        at java.base/jdk.internal.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)

# 〜省略〜

Caused by: java.net.BindException: Address already in use (Bind failed)
        at java.base/jdk.internal.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)

# 〜省略〜

BUILD FAILED in 5s
2 actionable tasks: 1 executed, 1 up-to-date
```

## 参考サイト

* [Gradleとgradle-tomcat-pluginを使ってローカルでTomcatを起動する - そうなんでげす](https://www.soudegesu.com/java/tomcat-with-gradle/)
* [bmuschko/gradle-tomcat-plugin](https://github.com/bmuschko/gradle-tomcat-plugin)
* [IntelliJ IDEA を使って Web アプリケーションを Tomcat へデプロイしてみた - Qiita](https://qiita.com/shinyay/items/a3561bae8f0b1804bbb4)
THEOSでの簡単なtweak作成

# THEOSでの簡単なtweak作成
初めまして、なんとなーくqiita始めてみました。
SsS136というのは、高校の友達３人で作ったグループです。３人の名字の頭文字のsを並べて作った適当な名前です。フォロバ返すのでよかったらフォローお願いします。

Twitter　[@DevTweak](https://twitter.com/DevTweak)
cydia repo [https://SsS136.github.io/](https://SsS136.github.io/)

#はじめに

必要なもの
↓
theos
terminal
filza file manager

今回は、theos構築済を前提として話を進めますので、theos
の構築はまあ自分でググるなりしてください。

#本題

まずはじめにterminalを開いて、`$THEOS/bin/nic.pl`　を実行します。

iphone/tweakを選択し、必要事項を入力します。

`Project Name (required):`
これはtweakの名前です。今回は、名前をtestにします。

`Package Name [com.yourcompany.test]:`
ここはそのままEnterで大丈夫です。

`Author/Maintainer Name`
自分の名前を入力しましょう。

`[iphone/tweak] MobileSubstrate Bundle filter [com.apple.springboard]:`
今回は、LINEのtweakを作っていくので、
jp.naver.line
と打ちます。

`[iphone/tweak] List of applications to terminate upon installation (space-separated, '-' for none) [SpringBoard]: `
ここはLINEと打ちます。

ここまで行ったら、Filzaを開きます。
するとtestというフォルダーができているはずです。

まずはtweak.x というフォルダーを編集していきます。
最初にある文字を全て消し、
このコードを入力してみてください。

 ```objc:tweak.x
%hook NLConfigurationManager
-(bool) useNewsTab
{
    return FALSE;
}
%end
```
このコードは、LINEのnewsタブを消すことができる簡単なコードです。

次にmakefileを編集します。

```objc:makefile
ARCHS = armv7 arm64

INSTALL_TARGET_PROCESSES = LINE

include $(THEOS)/makefiles/common.mk

TWEAK_NAME = test

test_FILES = Tweak.x
test_CFLAGS = -fobjc-arc

include $(THEOS_MAKE_PATH)/tweak.mk
```
ARCHS = armv7 arm64　を一番上に追加記述してください。

これでコードを書く作業は、以上です。

次はいよいよdebファイルを作る作業です。
terminalを開き、
cdコマンドでtestがあるディレクトリまで移動します。
僕の場合、testがあるディレクトリは
/var/mobile/test
なので、
`cd /var/mobile/test`
と打ち、移動できたら
`make package`
と打ちます。

見事成功したら、testのなかに、packagesというファイルができてるはずなのでその中にあるdebファイルをインストールしてみてください。
![lines.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551593/3ca0ddd4-a4ab-b197-6a62-65dc4288db43.jpeg)

newsタブが消えて通話タブになってたら成功です！！

#まとめ

簡単ですよね！！！
結構初歩的なところまで説明したので、次からは説明を省くかもです。
これからも色々と書いてくので、twitterのフォローよろしくお願いします！！
jenkinsとgitつなげる

https://open-groove.net/jenkins/tomcat-maven-git/

# ls -l /usr/local/jenkins/plugins 以下に
・git.hpi
・git-client.hpi
・scm-api.hpi

があるのを確認


# プロジェクト　設定

ソースコードの管理

✓ Git
・Repository URL
	http://192.168.10.xx:8080/gitbucket/git/root/test.git
	(gitbucketで設定されたURL)
・Credentials なし
以下デフォルト


# 手動で実行

########　以下動かない？　###########
/root/test/.git/hooks
ができるので

vi post-receive
*****
#!/bin/bash
 
curl -X POST http://192.168.10.xx:8090/jobs/app-test-job/builds
*****



# 参考
https://ics.media/entry/3283
JenkinsでCI環境構築チュートリアル ～GitHubからWebサーバーへのデプロイ～
API設計のポイント

# エンドポイントの設計

## 設計の注意点

1. 短くて入力しやすいこと  
→ 極力、不要な文字や重複は省くこと。
2. 可読性を考慮する  
→ 単語の省略はしないこと。
3. 小文字に統一し、文字間はハイフネーションで繋ぐ  
→ キャメルケースやスネークケースは非推奨。
4. ルールを統一すること  
→ 複数のAPI間で似たような情報の取得に際して予測可能な設計にしておくこと。
5. 内部のアーキテクチャに依存しないこと  
→ 脆弱性を突かれる危険がある。
6. バージョン番号をつけること。  
→ 今後の拡張性のため。
7. 名詞で構成し、動詞を含めないこと（ただし、searchは検索のみを目的にしたAPIであることを明示する意味で置くことがある)

```:よくない例
1. `service`や`api`といった文字が不必要。
http://api.example.com/service/api/users/

2. `ms`や`u`が何を示すのかわからない。（実際職場でありました。センスを疑う。） 
http://api.example.com/ms/u/

3. キャメルケースやスネークケースは推奨されない。
http://api.example.com/userId/

4. クエリパラメータ指定なものとURI指定のものが混在する。
http://api.example.com/userId/id?=100
http://api.example.com/userId/100/name

5. 内部でCGIやPHPを利用していることがわかり、脆弱性が発見された場合の攻撃対象となりやすい。
http://api.example.com/cgi-bin/getIofo.php?id=100
```

### HTTPメソッドを用いてエンドポイントを増やさずに機能を増やす。

|主なメソッド|役割|
|:---:|:---:|
|GET|リソースの取得|
|POST|リソースの新規登録|
|PUT|リソースの更新|
|PATCH|リソースの一部更新|
|DELETE|リソースの削除|

`POST`は初回登録のみで、それ以降は`PUT`か`PATCH`を利用するのが正しい。後者2つの使い分けは、リソースが膨大で一部のみ更新したい時に`PATCH`を使う。
これらのメソッドを使い分けることで、エンドポイントを増やすことなく提供できる機能を拡張できる。

例

`http://api.example.com/v1/users` + `GET` → ユーザ一覧取得
`http://api.example.com/v1/users` + `POST` → ユーザ新規登録

# クエリパラメータの設計

### 取得数をクエリパラメータで指定する方法

膨大なデータから一部を取得する場合に位置を指定する方法は相対位置と絶対位置の2パターンある。

#### 相対位置指定

1. `per_page=50&page=3`
2. `limit=50&offset=100`

前者の方法では、1ページあたりの件数を指定してその何ページ目（page=1からカウント）の情報を取得するかを指定している。
後者の方法では、offsetの何番目(offset=0からカウント)からカウントして何件取得するか(limit)を指定している。

ただしこの方法は遅いかつ、探索中に更新されると情報に齟齬が生まれる。

#### 絶対位置指定

→データのIDや時刻を記録しておき、`あるIDより前`や`ある時刻以降`といった指定をする方法。

### クエリパラメータで指定させるかパス内に指定させるか

* 一意なリソースを示すものか:アクセストークンなどはリソースとは直接関係ない。
* 省略可能か:パスに埋めると省略できなくなる。

# レスポンスデータの設計

## まずデータフォーマットを決める。

→ 時代の流れはJSON。  XML？知らない。

## 設計の注意点

1 エンベロープは冗長なのでいらない。

```json
{
    "header":{
        "status": "success",
        "errorCode": 0
    },
    "responce":{
        "key1": "value1"
        "key2": "value2"
    },
}
```
ヘッダーのメタデータも含めて全てのデータを包む構造をエンベロープという。HTTPヘッダに入れればいい。

2 データはなるべくフラットにすることが推奨される。（関連性のあるデータ動詞は階層構造にする。ケースバイケース）
3 配列をそのまま返すのはセキュリティ上危険（JSONインジェクション）。オブジェクトにして包むこと。

# エラー時の返値設計

* ステータスコードでエラーを表現すること。
  * 200返しておきながらエラーとかしない。
* レスポンスボディにはエラー時の専用のデータ構造を用意し、そこにエラー情報を格納する。
matplotlibまとめ

https://estuarine.jp/2016/09/jp-fonts-matplotlib/

yum -y install ipa-gothic-fonts ipa-mincho-fonts ipa-pgothic-fonts ipa-pmincho-fonts

rm fontList.py3.cache # Python 3]



https://qiita.com/ysdyt/items/3eb9b438980409c8f3e2

/usr/share/fonts/ipa-pgothic/ipagp.ttf


import matplotlib
from matplotlib.font_manager import FontProperties

#font_path = './TakaoPGothic.ttf'  #DLしたパスを指定. /font以下でなくても良い
font_path = '/usr/share/fonts/ipa-pgothic/ipagp.ttf'
font_prop = FontProperties(fname=font_path)



####
# 例
plt.text(X[i, 0], X[i, 1], hoge, fontproperties=font_prop)

他のブログでは、matplotlibの環境ファイルであるmatplotlibrcファイルのfont.familyの箇所を、DLしたフォント名で指定して、使用するフォントを書き換えているがmatplotrcファイルを書き換えることができない弱い権限のときは plotする時にいちいち引数にfontproperties=font_propを渡してあげることで解決している
（※いちいち引数に書くのはややめんどくさくはあるが、そこまで頻繁にmatplotlibで日本語表示をしない人は、環境ファイルを書き換えて何かよくわからんことになってしまうより、暫定的に変更する方がむしろ楽かもしれない）

fontproperties=font_propをいちいち渡して日本語表示する際の注意点としては、
plt.legendするときだけfontproperties=font_propではなく、prop=font_propとなる点。

# 例
plt.legend(['hoge'], prop=font_prop, loc='upper left')
(備考)MatplotlibのFontキャッシュ削除
Fontのキャッシュが残っていると、設定変更しても反映されない可能性があるのでこれを削除する

$ rm ~/.cache/matplotlib/fontList.cache
ApolloClient(React)で、loadingやerror時の表示処理を共通化する。

元々はこちらで紹介されている方法です。
[How to handle loading and error state in a generic way?](https://github.com/trojanowski/react-apollo-hooks/issues/89)

ローディング中にコンテンツを覆うモーダルウィンドウ。

```tsx
const LoadingModal: React.FC = () => (
  <Dialog open>
    <ProgressImage />
  </Dialog>
);
```

エラーメッセージを表示するダイアログ。

```tsx
import { ApolloError } from 'apollo-client';

interface ErrorModalProps {
  error: ApolloError;
  onClose(): void;
}

const ErrorModal: React.FC<ErrorModalProps> = ({ error, onClose }) => {
  const [open, setOpen] = useState<boolean>(!!error);
  const handleClose = () => {
    setOpen(false);
    onClose();
  };

  return (
    <Dialog open onClose={handleClose}>
      {error.message}
      <Button onClick={handleClose}>
        close
      </Button>
    </Dialog>
  );
};
```

Propsで`useQuery`OR`useMutate`のステータス値を受け取り、必要に応じてダイアログを表示するコンポーネント。

```tsx
interface HandleQueryProps {
  loading: boolean;
  error?: ApolloError;
}

const HandleQuery: React.FC<HandleQueryProps> = ({
  loading,
  error,
  children,
}) => {
  const onError = ()=> {
    setOpen(false);
    // 必要に応じてリダイレクトなど
  };

  return (
    <>
      {children}
      {loading && <LoadingModal />}
      {error && <ErrorModal error={error} onClose={onError} />}
    </>
  );
};
```

`HandleQuery`コンポーネント利用例。

```tsx
const SameComponent: React.FC = () => {
  const { data, loading, error } = useQuery(QUERY);

  return (
    <HandleQuery loading={loading} error={error}>
      <ChildComponent data={data} />
    </HandleQuery>
  );
}
```


### 参考情報
[APOLLO DOCS > Client(React) > Error handling](https://www.apollographql.com/docs/react/data/error-handling/)
[React > Error Boundary](https://ja.reactjs.org/docs/error-boundaries.html)