OmniAICreator/Qiita-1.07M huggingface dataset:
【Angular】`ng build --prod`した資源をブラウザで開いたら、[Uncaught NullInjectorError: StaticInjectorError(AppModule)[HogeModule -> ParamDecoratorFactory]と出てしまった。


## 環境
- Angular 8
- Node.js 12.13.0

## NullInjectorErrorは突然に
実装した画面を開発環境で実際に確認するべく、いつも通り`ng build --prod`してS3に格納。CloudFrontのCreate Invalidationをやっていざ確認！と思ってページを開いてみたら…。

```
Uncaught NullInjectorError: StaticInjectorError(AppModule)
```

:innocent::innocent::innocent::innocent::innocent:

以前にもこのエラーが出たことがあったが、その時はServiceクラスをCoreModuleのProvidersに追加してないせいだったのでProvidersに追加して問題は解決した。
今回も新しく作成したServiceクラスをProvidersに追加し忘れたかなと思って確認した。
**が、全て追加されていた。**
しかも、

```
[CoreModule -> ParamDecoratorFactory]
```

なんだこれ…見たことない…。

## 原因はDecoratorの書き方にあった

同じチームの神ことKさんが気になる記事を発見してくださった。(ありがたやありがたや…:clap:)
[TypeScript - デコレータ](http://js.studio-kingdom.com/typescript/handbook/decorators)
どうやらParamDecoratorFactoryはデコレーターに関係あるっぽい…？
デコレーターを使っている箇所…？あ…。

今回のプロジェクトでは、ディレクトリ構成を以下のようにしていた。
参考： [How to define a highly scalable folder structure for your Angular project](https://itnext.io/choosing-a-highly-scalable-folder-structure-in-angular-d987de65ec7)

```
app
├ core
│ ├ services
│ └ core.module.ts
├ modules
│ ├ moduleA
│ ├ moduleB
│ └ moduleC
├ shared
│ ├ components
│ ├ pipes
│ └ interface
└ app.module.ts
```

基本的にServiceクラスは全てCoreModuleに集め、そこのProvidersに追加、CoreModuleをAppModuleにimportという形を取っていた。
さらに**CoreModuleがAppModule以外から呼ばれないよう、AppModule以外から呼ばれたら例外を投げるようにしていた。**

以下その設定をするソースコード↓(この設定方法は割とどこでも書いてあるやつ)

```typescript:core.module.ts
export class CoreModule {
    // CoreModuleのimportはAppModuleのみ。それ以外でimportをすると例外を投げる。
    // @ts-ignore
    constructor(@Optional @SkipSelf parentModule: CoreModule) {
        if (parentModule) {
            throw new Error(`CoreModule is already loaded. Import it in the AppModule only`);
        }
    }
}
```

ここでデコレーターを使っているではないか！
**コンパイルエラーで教えてくれていたのに、当時の自分はここを `@ts-ignore` を使って潰してしまっていたのだ。**

**TypeScriptでデコレータを使う時は括弧を付ける必要があった。**

そんなこんなで以下のように修正（してもらった）

```typescript:core.module.ts
export class CoreModule {
    // CoreModuleのimportはAppModuleのみ。それ以外でimportをすると例外を投げる。
    constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
        if (parentModule) {
            throw new Error(`CoreModule is already loaded. Import it in the AppModule only`);
        }
    }
}
```

これで再度ProdビルドしてS3にデプロイ、CloudFrontをいじったら正常に表示されるようになった。

## まとめ
**TypeScriptでDecorator使う時は括弧を忘れずにしよう**
Alexa Skill Builder - Specialtyを取得するまでにやったこと

この記事は[Fusic Advent Calendar 2019](https://qiita.com/advent-calendar/2019/fusic)の21日目の記事です。

昨日は@Y_uuuの[「RailsアプリをECS FargateへデプロイするCI/CD pipelineを構築する」](https://qiita.com/Y_uuu/items/789c4c21ae1782f1ab13)でした。
re:Invent内のワークショップはこんな実践的なものがあるんですね。。すごく勉強になりそうです。
Laravelでの同じ機構も作ってみたいなと思いました！


---


昨日AWS認定試験の一つ、Alexa Skill Builderを受験してきました。
初のSpecialty試験だったので、どうなることやらと思っていましたが、
なんとか合格することができました。

今回はAlexa Skill Builder取得までに自分が取り組んだことをご紹介します。

少しでも次に受験する方への手助けになればよいかなと思います。



## 勉強前の知識


### 勉強前にやってたこと
- 普段の業務はLaravelやVueを書くことが多いです。
- 業務でAlexaスキルの作成に携わったことはありません。
- 学生のハンズオンでAlexaスキル作成の手伝いをしたり、会社の開発合宿で趣味レベルのAlexaスキルを作ったりしていました。
- AWSの資格は他にSolutions Architect - Associateだけ取得していたため、AWSのサービス全般に関する、基礎的な知識は持っていました。



### 勉強前に作ったスキル

[Alexaでポ○モン風ゲームをつくった話](https://tech.fusic.co.jp/posts/2019-12-06-alexa-monstar-game/)

セッションアトリビュートを使ってDynamoDBに値を保持して、VUI上でポ○モン風のゲームが遊べるスキルを作成しました。

Dialogやセッションアトリビュートを実際に手で使って覚えることができたのでよかったです。

公開まではしていません。


## 試験勉強としてやった内容

### 公式の試験ガイドを読み、出題範囲を確認

まずは、AWSの公式が出している試験ガイドを読んで、出題範囲を確認します。
[AWS 認定 Alexa スキルビルダー – スペシャリティ](https://aws.amazon.com/jp/certification/certified-alexa-skill-builder-specialty/)


### サンプル問題を解く

次に上記と同じリンク先にある、サンプル問題を解きます。
10題ほどの問題があります。
難易度は本番の問題とほぼ同じくらいのイメージです。


### AWS公式のデジタルトレーニングを受ける

公式が出している[デジタルトレーニング](https://www.aws.training/Details/eLearning?id=34489)を受けました。

動画がたくさんある上に、中身は英語ですので、苦労します。

自分の場合

- とにかく問題数を解きたかった
- 試験自体日本語で受けるので、日本語でinputしたかった

という理由で、動画は見ずに、Chrome拡張のGoogle翻訳を使って、文章と設問だけ答える形で進めました。



### 模擬試験を解く

4000円くらいで模擬試験を受けることができます。

自分の場合、前回ソリューションアーキテクトを取得した際のクーポンがあったので、無料で受けることができました。

20問くらいで受験自体はすぐ終わります。

模擬試験の結果は60%でした。

答えは表示されないので、どの問題が正解かはわかりませんが、どのような問題が出題されるかのイメージが湧いていいかと思います。



### AWSスキルトレーニングを受ける


[AWSスキルトレーニング](https://developer.amazon.com/en-US/alexa/alexa-skills-kit/resources/training-resources/)を受けることもできます。

試験の役に立ちそうなものを一部だけ選んで、やってみました。



### A CLOUD GURUのAlexa Skill Builderコースを受ける

有料ですが、かなりのボリュームのコースがあります。
またチャプターごとにテスト形式で確認もできるため、問題をとにかく解いておきたい場合は便利です。
1週間の無料体験ができるため、試験のために1週間だけ登録するのもありかと。
ただ、全て英語なのと、確認テストが若干バグっている感じもしたので、お気をつけを！
動画を2倍速再生などができるのは、とても便利でした。




## 試験を受けてみて

### 試験結果

正直試験中は、自信のない問題が多すぎて、合格できる気がしてませんでした。。

そのため試験後、合格の文字が出現した時はとても嬉しかったです。

当日の夜には、試験結果を見ることができました。


<img width="766" alt="Screen Shot 2019-12-19 at 21.23.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205370/5958f6a4-6914-0021-7ae7-5a6bf1f9224f.png">


思ってたよりは余裕があったみたいでよかったです。
勉強した甲斐があったなあと。


### ここをもっと勉強しておいた方がよかったと思う点

個人的にもっと勉強しておいたらよかったなーと思った点としては


#### カスタムスキル以外のスキル
スマートホームスキルやビデオスキルなどは、触ったことがなかったので、もう少し触る時間とれたらなーとは思いました。

あと、カスタムスキルの中でも画面付きのスキルについても、もう少し勉強しておけばよかったなーと思います。


#### ASK CLIを使ったスキルの開発
実はこれまで、コンソール上でしかAlexaスキルを作ったことがありませんでした。
そのためCLIでのスキルの作成の問題に手こずった印象があります。
コンソール画面だけではなく、CLIでのスキル開発もやっておくと、自信持てると思います。




## まとめ

以上、 Alexa Skill Builderを取得するまでにやったこと、でした。

最後まで読んでいただき、ありがとうございました。

明日はFusicエバンジェリストの @seike460 さんの記事ですね！
Goについての何かしらが書かれる模様です。お楽しみに！！
java コメントの書き方

今日はちょっと時間がないのでコメントの書き方だけ
さらっと書きます。

# コメントアウト1行のみ
1行だけのコメントは次のように書くことができる。

```java:一行のみ
// (コメント内容)
```

# コメントアウト複数行
/* ～ */で囲んだ部分がコメントとなる。
「/*」がコメントの開始で、「*/」がコメントの終了という意味です。

```java:複数行
/*
コメント内容
*/
```
IchigoJamでバーコード(JAN)作成

# 何をするのか

7桁または12桁の数字を入力してもらい、
チェックディジットを補って8桁または13桁のJANコード(商品の識別などによく使われるバーコード)を出力する。

# 実行結果

YouTube動画 (0分43秒)
[![実行結果(YouTube)](http://img.youtube.com/vi/UxvlzqI2Kxs/0.jpg)](http://www.youtube.com/watch?v=UxvlzqI2Kxs)

# ソースコード

```
10 'ﾊﾞｰｺｰﾄﾞ (JAN) ｻｸｾｲ
20 LET[0],13,25,19,61,35,49,47,59,55,11,39,51,27,33,29,57,5,17,9,23,114,102,108,66,92,78,80,68,72,116,0,11,13,14,19,25,28,21,22,26
30 FORI=0TO15:P=0:FORJ=0TO3:IF(I>>J)&1P=3<<J<<J|P
40 NEXT:P=~P&255:FORJ=0TO7:POKE(#E0+I)*8+J,P:NEXT:NEXT:CLS:?"7ｹﾀ ﾏﾀﾊ 12ｹﾀ ﾉ ｽｳｼﾞ ｦ ｲﾚﾃ Enter":?">":N=0
50 C=INKEY()
60 IFC=10ANDN=7P=0:L=40:C=44:R=47:GOTO110
70 IFC=10ANDN=12P=[30+[40]]:L=41:C=47:R=52:GOTO110
80 IFC=8ANDN>0N=N-1:POKE#921+N,0
90 IFN<12AND47<CANDC<58[40+N]=C-48:POKE#921+N,C:N=N+1
100 GOTO50
110 D=0:FOR I=40 TO R-1:D=D+[I]*(1+(I+(N=7))%2*2):NEXT:[R]=(10-D%10)%10:POKE#921+N,[R]+48:GOTO150
120 S=16-B%16:T=60+B/16:B=B+M:IFS<MGOTO140
130 [T]=V<<(S-M)|[T]:RETURN
140 [T]=V>>(M-S)|[T]:[T+1]=V<<(16-M+S):RETURN
150 B=16+(N=7)*14:FOR I=60TO67:[I]=0:NEXT
160 V=5:M=3:GOSUB120
170 FOR I=LTOC-1:Q=P>>(5-I+L)&1:V=[10*Q+[I]]:M=7:GOSUB120:NEXT
180 V=10:M=5:GOSUB120
190 FOR I=CTOR:V=[20+[I]]:M=7:GOSUB120:NEXT
200 V=5:M=3:GOSUB120
210 FORI=#940TO#BBF:POKEI,#E0+([60+I%32/4]>>(12-I%4*4)&15):NEXT
220 LOCATE0,22
```

# 解説

バーコードの作り方は、主に[JAN/EAN](http://www5d.biglobe.ne.jp/~bar/spec/explain2.html)を参考にした。

<dl>
<dt>10行目</dt>
<dd>
<code>FILES</code>コマンドで表示するプログラムの内容を指定する。
</dd>
<dt>20行目</dt>
<dd>
バーコードのパターン情報を配列に格納している。<br>
0～9に奇数パリティの左側の文字、10～19に偶数パリティの左側の文字、<br>
20～29に右側の文字、30～39に13桁の最初の文字のパターン情報を格納している。
</dd>
<dt>30～40行目</dt>
<dd>
キャラクターコード#E0～#EFの文字を、バーコードを出力するための縦縞模様に設定する。<br>
これらの模様はキャラクターコードの下位4ビットを反映しており、0を白、1を黒で表現している。
</dd>
<dt>50～100行目</dt>
<dd>
数字の入力を受け付ける。数字、Enter (LF)、Backspaceで操作できる。<br>
数字が7桁または12桁入力されている状態でEnterを押すと、出力用のパラメータを指定して次の処理に移る。
</dd>
<dt>110～130行目</dt>
<dd>
<code>V</code>の下位で指定される長さ<code>M</code>のビット列を、生成中のビット列に追加するサブルーチン。
</dd>
<dt>140行目</dt>
<dd>
チェックディジットを計算し、入力された数字列の後ろに追加する。
</dd>
<dt>150行目</dt>
<dd>
バーコードが真ん中に来るように出力の開始位置を設定し、出力先の配列を初期化する。
</dd>
<dt>160～200行目</dt>
<dd>
仕様に沿って、バーコードをビット列として配列に出力する。
</dd>
<dt>210行目</dt>
<dd>
配列のビット列を画面に出力する。
</dd>
<dt>220行目</dt>
<dd>
カーソルの位置を整え、プログラム終了時の<code>OK</code>の出力に備える。
</dd>
</dl>

# IchigoJamとは

2,000円前後で購入することができ、BASICによるプログラミングが可能なパソコン。

[こどもパソコン IchigoJam - はじめてのプログラミングパソコン(1500円)](https://ichigojam.net/)

また、プログラムをWebブラウザ上で実行できるサービスもある。

[IchigoJam web by WebAssembly](https://fukuno.jig.jp/app/IchigoJam/)

※「IchigoJam」はjig.jpの登録商標
Ariduino Nano 互換ボードのIDE書込みエラー

# Arduino Nano 互換ボード　書込みエラー対応

## 状況

Arudino Unoの構成を小型化したくて、Arudino Nanoの安価な互換ボードを入手。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554667/eecd84b7-c954-8a22-9356-d99fbcd1450a.png)

テストで空のスケッチを書き込むと、フラッシュの書き込み時にエラーになってしまう。


Arduino：1.8.10 (Windows 10), ボード："Arduino Nano, ATmega328P"

```txt:ErrorMessage
最大30720バイトのフラッシュメモリのうち、スケッチが444バイト（1%）を使っています。
最大2048バイトのRAMのうち、グローバル変数が9バイト（0%）を使っていて、ローカル変数で2039バイト使うことができます。
avrdude: stk500_getsync() attempt 1 of 10: not in sync: resp=0x7e
avrdude: stk500_getsync() attempt 2 of 10: not in sync: resp=0xe6
avrdude: stk500_getsync() attempt 3 of 10: not in sync: resp=0x9e
avrdude: stk500_getsync() attempt 4 of 10: not in sync: resp=0xfe
avrdude: stk500_getsync() attempt 5 of 10: not in sync: resp=0x9e
avrdude: stk500_getsync() attempt 6 of 10: not in sync: resp=0x60
avrdude: stk500_getsync() attempt 7 of 10: not in sync: resp=0xfe
スケッチの書き込み中にエラーが発生しました
avrdude: stk500_getsync() attempt 8 of 10: not in sync: resp=0xf8
avrdude: stk500_getsync() attempt 9 of 10: not in sync: resp=0x9e
avrdude: stk500_getsync() attempt 10 of 10: not in sync: resp=0x86

「ファイル」メニューの「環境設定」から
「より詳細な情報を表示する：コンパイル」を有効にすると
より詳しい情報が表示されます。
```

## 対処方法
メニューのツールから下記の設定を行う

ボード: Arduino Nano
プロセッサ: ATMega328P(OldBootStrap)
書込装置:ArduinoISP

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554667/37cc6331-e479-24f8-d540-2d9bf0076422.png)

おとなしく書込み終了するので、うまくいったのに気づきませんでした。
【Vue.js】Vuetifyのインストール方法と基本的な使い方

## はじめに
Vue.jsのUIコンポーネントライブラリである**Vuetify**のインストール方法と代表的な使い方をまとめました。

[公式サイトURL](https://vuetifyjs.com/ja/)
↑ 完全ではないですが日本語化も進んでいます。
解説やデモが各コンポーネント毎に掲載されていて、見始めたら止まりません。笑

## 環境
```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
vuetify: 2.1.0
```
## インストール
※Vue-CLIでVueの環境は構築済とします。

```shell
$ vue create my-app
```
↓

```shell
$ vue add vuetify
```
これだけで使える状態になっています。

※[CDN版](https://vuetifyjs.com/ja/getting-started/quick-start#cdn-%E3%81%AE%E4%BD%BF%E7%94%A8)もあります。

## 1.レスポンシブデザインの指定

**xs~xl**まで5段階用意されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483292/2429a08b-c09d-3c5e-dea8-bac66fb8c7b4.png)

クラスの末尾に`none`、`flex`で非表示、表示の指定が可能で、例えば

- 全ての大きさで非表示：`d-none`
- Small **以上**なら表示：`d-sm-flex`

となります。

これを組み合わせると、
**スマホでは非表示にしてPCなら表示したい**要素であれば、

```html
<div class="d-none d-sm-flex">
  ...
</div>
```

のようにすればOKです。

その他レスポンシブ関連の詳細はこちらへ。
[CSS Display helpers — Vuetify.js](https://vuetifyjs.com/ja/styles/display)


## 2.カラー

通常の`#FFEBEE`のようなカラーコード指定に加え、
`red lighten-5`のようにも書けます。

具体的な色合いは以下リンクから確認可能です。
[Material color palette — Vuetify.js](https://vuetifyjs.com/ja/styles/colors)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483292/45fadc2b-b66b-1702-88ae-a43d4bd2a172.png)

## 3.UI component 

### 使用例：ドロップダウンメニュー

各コンポーネントは`v-〇〇`で命名されており、それらを入れ子にして好きな形に組み上げていきます。

例えば、以下の`<v-menu>`内を書くことで、**CSS・JavaScriptを一切書かずに**ドロップダウンメニューを実装出来てしまいます。

**楽！**

↓公式のデモはこちら
[App-bar component — Vuetify.js](https://vuetifyjs.com/ja/components/app-bars)

```vue:sample.vue
<template>
<v-bar>
...
<v-menu
  left
  bottom
>
  <template v-slot:activator="{ on }">
    <v-btn icon v-on="on">
      <v-icon>mdi-dots-vertical</v-icon>
    </v-btn>
  </template>

  <v-list>
    <v-list-item
      v-for="n in 5"
      :key="n"
      @click="() => {}"
    >
      <v-list-item-title>Option {{ n }}</v-list-item-title>
    </v-list-item>
  </v-list>
</v-menu>
</v-bar>
...
</template>
```

## 4.Directives
### 使用例：Intersection observerも簡単に使える

`v-intersect`というディレクティブを使用することで、**スクロールして指定範囲に入ったらクラスを付与**とかも簡単に実装できます。

以下例では、`<v-card>`の要素が画面の範囲内に入ってきたら`<v-avatar>`の色が変わるようになっています。

**楽！**

↓公式のデモはこちら
[Intersection observer directive — Vuetify.js](https://vuetifyjs.com/ja/directives/intersect)

```vue:sample.vue
<template>
  <div>
    <div>
      <v-avatar
        :color="isIntersecting ? 'success' : 'error'"
      ></v-avatar>
    </div>
    <v-card
      v-intersect="onIntersect"
    >
      ...
    </v-card>
  </div>
</template>

<script>
  export default {
    data: () => ({
      isIntersecting: false,
    }),

    methods: {
      onIntersect (entries, observer) {
        this.isIntersecting = entries[0].isIntersecting
      },
    },
  }
</script>

```

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

その他、指定出来るスタイルや使えるUIコンポーネントが多数揃っていて不自由しなさそうです。
良いデザインが余りにも簡単に実装出来るのでビックリ:sweat_smile:

## 参考にさせて頂いたサイト（いつもありがとうございます）
[マテリアルデザインコンポーネントフレームワーク — Vuetify.js](https://vuetifyjs.com/ja/)
並列Rustコンパイラ(β)を試そう!

概要: Rustコンパイラはすでに部分的に並列に動作していますが、本命であるフロントエンドの並列化の実用化が進んでいます。エンドユーザーが気軽に試せる状況になったようなので紹介します。

12月7日のアドベントカレンダーの枠が空いていたので、かわりに書きました。(執筆日は12月21日です)

## 端的に言うと

[internalsのアナウンス記事](https://internals.rust-lang.org/t/help-test-parallel-rustc/11503)に全てがまとまっています。以下のようにして「並列化対応版」と「並列化未対応版」の両方でコンパイルして、その結果を比較することができます。

```
$ rustup update nightly-2019-12-18
$ rustup update nightly-2019-12-17
$ cargo +nightly-2019-12-18 build
$ cargo +nightly-2019-12-17 build
```

コンパイル結果がおかしくないか、またコンパイル時のパフォーマンスなどを調べてほしいようなので、上記のコマンドを実行したらスレッドに投稿すると大変な貢献になると思います。

## はじめに

Rustコンパイラは現在、**部分的に**並列に動作しています。具体的には以下のようになっています。

- パッケージマネージャ Cargo は、依存関係のないクレート (ライブラリ) を並列にコンパイルしようと試みます。
- Rustコンパイラ (Rustc) のフロントエンド (Rust特有の部分) は**シングルスレッドで動作します**。
- RustコンパイラのバックエンドであるLLVMは並列に動作します。

この真ん中のボトルネックを解消するため、[2017年12月にマージされたこのコミット](https://github.com/rust-lang/rust/pull/46709)を皮切りにRustコンパイラフロントエンドの並列化対応が進められてきました。

しかし、この並列化対応はまだ**通常配布されているRustコンパイラでは(nightlyも含め)利用できません**。この理由は以下の通りです:

- Rustはゼロコスト抽象のために、同じ機能を実現するために「シングルスレッド専用の仕組み」と「同期コストがかかるが、マルチスレッドで利用できる仕組み」を両方用意しています。
- Rustコンパイラも例に漏れず、シングルスレッド専用の仕組み (`Rc`, `RefCell` など) を使っていたため、これをマルチスレッドで使える仕組み (`Arc`, `RwLock` など) に置き換える必要がありました。
- とはいえ、まだ並列化が実験段階なのに、そのために全てのユーザーが同期コストを支払う決断はできません。そこで、コンパイラ自体のコンパイルフラグとして `parallel_compiler` (旧称: `parallel_queries`) を追加し、この有無によって内部実装が切り替わるラッパー型 (`Lrc`, `Lock`, `RwLock`, `LockCell`) を独自に用意することになりました。

## 並列コンパイラを試してもらうために

実験的な並列コンパイラの実用化が近づいてきたということで、以下のようにして並列コンパイラを一時的に提供することに[なりました](https://internals.rust-lang.org/t/plan-to-test-parallel-rustc/11487)。

1. [`parallel_compiler = true` にするパッチ](https://github.com/rust-lang/rust/pull/67362)をマージする。
2. 一日待ち、その日のnightlyがリリースされたのを確認する。
3. [`parallel_compiler = false` にするパッチ](https://github.com/rust-lang/rust/pull/67379)をマージする。

こうしてできたのが nightly-2019-12-18 で、その前のnightlyが nightly-2019-12-17 です。 (なお、ビルドパイプラインの都合上 `rustc --version` の表示はrustupが管理する日付より1日前になります。)

## まとめ

- Rustコンパイラは部分的に並列化されているが、肝心のコンパイラフロントエンドは並列化されていない。
- 並列化機能はあるが、まだコンパイラをビルドし直すことでしか入手できない状態にある。
- 一時的に並列化機能を有効にしたnightlyコンパイラが提供されたので、その前の日のnightlyと比較してみてほしい。
DE0-CVのUSB Blasterのドライバアップデート

USBつないでもドライバが無効でQuartusから認識できなかった。ドライバの更新すると認識されるようになった。ドライバ更新の詳細な手順は以下に記載あり。

http://www.terasic.com.tw/wiki/Altera_USB_Blaster_Driver_Installation_Instructions#For_Windows_10.2C_do_the_following:
flattenとravel

こんにちは。
昨日の記事はイマイチだったのでもっと分解して、理解を深めたいと思います。

今日はflatten関数とravel関数の違いです。
どっちも配列を一元化する為の関数です。
基本的にはflatten関数を使うようですが、ravel関数の方が処理が速い場合もあるようです。
では、それぞれ見ていきましょう。

# flattenについて

まず初めtにflattenのAPI
> numpy.ndarray.flatten(order = ‘C’)

パラメーターとしてorderを持つが、今回の内容にはあまり関係ないので詳細は伏せます。
もし、気になる人は[flatten](https://docs.scipy.org/doc/numpy/reference/generated/numpy.ndarray.flatten.html)を見てください。
例文を見て見ましょう。

```python
import numpy as np

a = np.array([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
a = np.reshape((2, 5))
b[4] = 251
b = a.flatten()
print('a : ', a)
print('b : ', b)
```

```
a :  [[ 1  2  3  4  5]
　　　 [ 6  7  8  9 10]]

b :  [   1    2    3    4 251    6    7    8    9   10]
```

表示する前にbのindex＝５の所に251という**素数**を入れても、オリジナルの**"a"は変わっていません。**
なぜ素数かって？美しいから。:eyes:笑

話を戻すと、a.flatten()の所で"a"は**コピー**されてbに渡されているわけですね。
では、ravelはどうでしょうか？


# ravelについて
まず初めにravelのAPI
> numpy.ravel(a, order=’C’)
> もしくは、
> numpy.ndarray.ravel(order=’C’)

まず一つ目の違いとして、ravelの場合は１次元配列にしたい配列をパラメータとして持つことができます。
もう一つ違いがあります。
一旦、以下のコードを見ていきましょう。

# サンプルコード
```python
import numpy as np

a = np.array([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]).reshape((2, 5))
# b = np.ravel(a)とも書ける。
b = a.ravel()
b[4] = 251
print('a : ', a, end='\n\n')
print('b : ', b)
```

```
a :  [[  1   2   3   4 251]
      [  6   7   8   9  10]]

b :  [  1   2   3   4 251   6   7   8   9  10]
```

なんと！！！！
違いが明確になりましたね。
ravelの場合はbにaの**参照**を渡しているわけですね。

# 結局違いは？
flatten() : コピーを渡す。
ravel() : 参照を渡す。そして書き方が二つある。

# どっちが良いの？
それは時と場合によります。
速い方はravel
けど、１次元配列に変える前のデータも使いたいならflattenという所でしょう。
どっちも知っておくことで、処理が何倍にも早くなるかもしれません。

ありがとうございました！


# 参考文献
[flatten１](https://deepage.net/features/numpy-flatten.html)
[flatten2](https://docs.scipy.org/doc/numpy/reference/generated/numpy.ndarray.flatten.html)
[ravel](https://deepage.net/features/numpy-ravel.html)
Laravel　初心者メモ

##PHP version確認コマンド
```
$php -v
```

##PHP version upコマンド
```
$sudo yum install -y --enablerepo=remi-php71 php
```

##Laravel version確認コマンド
```
$php artisan --version
```

##ModelとMigrationを同時に作成
```
php artisan make:model Models/Tweet -m
```

##Laravelの知らない、あるいは正確なシンタックスを覚えていないメソッドをテストしたい時,使用プロジェクトのterminalで
```
$php artisan tinker
```
例)config('const.USER_STATUS.REGISTER')
結果："1" //statusの値を取る

##PHPが用意している簡易ビルドインサーバーを使った時
そのローカル開発環境IPアドレスが必要なので
$ip aコマンドで調べる
そうすると
inetの後に　IPアドレスである「192.168.33.10」が出てくるのでこれを使う
ビルトインサーバーの立ち上げ方は
$php -S 192.168.33.10:8000　必要であればport-number:8000を追加でコマンドする
そうすると
http://192.168.33.10:8000にアクセスするとブラウザが表示されますよと出力される

##$php artisan migrate:fresh
>壊れているマイグレーションファイルをサラの状態にする

##tinkerを使って直接 名前、メールアドレス、パスワードを設定する
```
$ php artisan tinker
 
>App\Admin::create(['name' => 'test', 'email' => 'test@test.com', 'password' => bcrypt('適当に')]);
```
 
上記例ではadminテーブルに対してそれぞれ値を指定
 実行すると以下のように登録した内容が表示される

```
=> App\User {#2317
     name: "test",
     email: "test@test.com",
     updated_at: "2018-05-01 09:00:50",
     created_at: "2018-05-01 09:00:50",
     id: 1,
   }
```

##tinker使って管理者ログイン用のemailがあるかどうか確認
```
>php artisan tinker
```
>$user = Admin::where(['email' => 'test@test.com'])->first(); 
(結果)
[!] Aliasing 'Admin' to 'App\Admin' for this Tinker session.
=> App\Admin {#3038
     id: 1,
     name: "test",
     email: "test@test.com",
     email_verified_at: "2019-11-23 12:56:59",
     created_at: "2019-11-23 21:56:59",
     updated_at: "2019-11-23 21:56:59",
   }

 $user->idを実行した場合
=> 1

##新規プロジェクト作成時, MySQLにもデータベース作成
>mysql> create database lm;
これでlmというdatabaseができる

>mysql> grant all privileges on データベース名.* to 'ユーザー名';
.envでの設定は
DB_DATABASE=データベース名
DB_USERNAME=ユーザー名

これでもエラー起こる場合は
$php artisan config:clear
$php artisan cache:clear
などしてみる

## $npm run dev
Laravelに初めから梱されているビルドツールで、フロントを簡単に使えるようになっている。
Laravel Mixを使うためのコマンドである。

##$history
>ターミナルでの過去のコマンドみれる

##laravelのmemoryが足りない時　下記コマンドで大丈夫
sudo dd if=/dev/zero of=/swap bs=1M count=1024
sudo mkswap /swap
sudo swapon /swap
sudo chmod 600 /swap
この４行でメモリがいっぱいなのをファイルに移行し、メモリを開ける。

php artisan cache:clear
php artisan config:clear

##logを仕込んだ時
\Log::info('aaa');

###ターミナル上でlogを見る時、見たいディレクトリ上で
```
$ ps -ef | grep php

//kill -9 消したいログ番号を入力
$ kill -9 5978
```

何処で見るか？※cloud9の場合
プロジェクト/storage/logs/その日のログ　　　　下の方web.phpの下

##cssをscssに変換し方
<link rel="stylesheet" href="{{ mix('css/指定したいcssファイル名.css') }}"></script>
この辺のサイト使えます。
左側にcssを記入すると右側にscssとして変換されて使用できるようになります。
http://css2sass.herokuapp.com/
https://www.sassmeister.com/

##sassに指定したscssをコンパイルする方法
新規作成した新しいプロジェクト上で
$npm run watch

##画像を読み込むディレクトリの作成
Laravelの場合、画像を読み込むディレクトリはpublic/storageディレクトリです。
保存:storage/app/public
読込:public/storage
名前を変えてほしいですね。なので、public/storageから、storage/app/public内を読み込めるよう（シンボリックリンクを張る）にします。

```
$php artisan storage:link
```
これで、storage/app/public内を覗けるようになりました。

アップロードした画像名の取得

```
imageName1 = request->file('image_1')->getClientOriginalName(). '.' . $request->file('image_1')->getClientOriginalExtension();

$request->file('image_1')->getClientOriginalName()・・・ファイル名取得
getClientOriginalExtension()・・・ファイル拡張子取得
```
目にとまったコンピュータビジョンの研究事例を雑に紹介（まだ書きかけ）

# はじめに

できることなら無駄な手間は省きたいものです．「コレめんどくさいなぁ」というボヤキが発明を生み出すような気もします．

コンピュータビジョンの研究分野は Deep Learning の襲来ですっかり Read Ocean になってしまっています．arXivを眺めて最新の研究をキャッチアップするのも大変です．世界のトップランナー達のおかげで精度もどんどん上がっています（たとえば物体検出については[こちら](https://qiita.com/ymmtr6/items/c16cd67ce9be88820bd8)が参考になります）．

そんな中，コンピュータビジョンの技術を色んな分野に応用していきたいと思っているのですが，特に機械学習ベースの手法は手間がかかるというのが大きな問題になってきます．

# データ作りは大変だ

Deep Learning で精度を出すには学習データが重要です．もちろん，モデル自体もハイパーパラメータも重要なんでしょうが，やっぱり学習データが揃ってなければお話にならないと思います．Deep Learning の発展に ImageNet が果たした役割は大きいというのは良く言われる話ですし[1]．

とはいえ，いつでも大量かつ良質なデータを準備できるわけではないので，限られたデータでもうまくやる必要が生じてきます．これはコンピュータビジョンに限らない，機械学習一般での課題ともされていて転移学習や半教師付学習などとして古くから研究されています．転移学習については@icoxfog417
さんの記事[3]，神嶌先生のサーベイ論文[4]，松井孝太先生のスライド[5]などが参考になります．

コンピュータビジョン界隈でも，もちろん転移学習・ドメイン適合は良く扱われています．one-shot learning や few-shot learning[6] はネーミングがコンピュータビジョンぽくっていいですね．arXivには few-show learning のサーベイ[7]がありましたが，まだちゃんとと読めていません．

で，個人的にもこの分野は興味があるのですが，同時に，もっと直接的・実践的にデータ作りの手間を省ける方法はないのかなぁとも思っています．そのような観点から最近目にとまった論文を紹介します．

# 人の上に点を打つだけで人を囲むボックス領域をゲット

一般に「物体検出」のタスクでは，画像の中である物体が占める領域を特定するのが目標です．領域といっても，まずは物体を囲む最小の矩形（Bounding Box）を得ることがゴールになります（物体領域を正確に切り出すような問題設定もありますが）．機械学習でこれを行うためには，学習データとして画像と Bounding Box の対が必要になります．しかし，この Bounding Box の正解データを作るのがなかなか大変です，それは一度でもデータ作りをやったことがあれば痛感すると思います．

そんな苦い思い出を持った中で目にとまったのがCVPR2019で発表されていた「Point in, Box Out: Beyond Counting Persons in Crowds」[8]です．これは群衆の人数カウントを行うのですが，パッとみて「もし上手く動けばラクになりそう」と思いました．

![1-Figure1-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/138838/e0d3a7f0-d153-c2dc-c4a7-5f131fd8ccb2.png)

この図が全てを物語っているのですが，人間が与えるのは左上の「人物頭部を指す点」です．そこから Deep Learning がうまいこと頭部を囲む Bounding Box を求めて，人物頭部を検出してしまうということになっています．

いろいろ前提条件があるのだと思いますが，アノテーション一般の簡略化に応用できれば楽しそうです．

・・・と，もっと書きたいこと，書くべきことがあったのですが，とりあえず担当の日に公開するということで，とりあえずここまでで．せっかくなので近々追記したいと思います．

# おわりに

この記事を書くときに「Qiitaに投稿するならちゃんとソースコードと実行例を載せないと」と某氏から言われたのですが，残念ながら（予想どおり？）文章だけの記事になってしまいました．ま，投稿できただけ上出来ということで．

23:59 までには投稿するつもりが，操作に手間取って日をまたいでしまいました．ゴメンナサイ．

# 参考文献

1． [物体検出を軽〜く入門する](https://qiita.com/ymmtr6/items/c16cd67ce9be88820bd8)
2． [中山英樹， "画像解析関連コンペティションの潮流," 電子情報通信学会誌, vol.100, no.5, pp.373-380, 2017](http://www.nlab.ci.i.u-tokyo.ac.jp/pdf/ieice201705cvcomp.pdf)
3. [転移学習：機械学習の次のフロンティアへの招待](https://qiita.com/icoxfog417/items/48cbf087dd22f1f8c6f4)
4. [神嶌 敏弘, “転移学習," 人工知能学会誌, vol.25, no.4, pp.572-580, 2010](http://id.nii.ac.jp/1004/00007564/)
5. [Recent Advances on Transfer Learning and Related Topics Ver.2](https://www.slideshare.net/KotaMatsui/recent-advances-on-transfer-learning-and-related-topics-ver2)
6. [https://qiita.com/minux302/items/d596785a321eca72c9a1](https://qiita.com/minux302/items/d596785a321eca72c9a1)
7. [Generalizing from a Few Examples: A Survey on Few-Shot Learning](https://arxiv.org/abs/1904.05046)
8. [Yuting Liu, Miaojing Shi, Qijun Zhao, Xiaofang Wang, Point in, Box Out: Beyond Counting Persons in Crowds, CVPR2019]()
機械学習による深度推定で2Dの写真からオリジナルのランダムドットステレオグラム(RDS)を作成する

最高のランダムドットステレオグラム(RDS)を求めて、試行錯誤を続けてきた。

- [Pythonでオリジナルのランダムドットステレオグラム（RDS）を作る。](https://qiita.com/KR_bangkok/items/39d981d93c68fd360fa9)
- [最高のランダムドットステレオグラム(RDS)を求めて。](https://qiita.com/KR_bangkok/items/2f79c218f296f6aaf032)

とうとう機械学習を使う日が来た。これで理想のランダムドットステレオグラム(RDS)を手に入れられるはず。

最近、機械学習がブームということで、機械学習の調べ物をしていてこの記事に辿り着いてしまった不運な方のためにランダムドットステレオグラム(RDS)とは何かを説明しておく。

# What is RDS?

![1212_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329479/6afebc32-f05a-4d55-c607-ffd5132bf70a.png)


ランダムドットステレオグラム(RDS)とは、目の焦点を画面から遠ざけたり、近づけたりすることで立体視ができるパターンのことである。みんな一度は見たことはず。
上図はうまいこと目の焦点をずらすと `Hello, World!` の文字が浮かび上がるはずです。
PCから見てもらったほうがわかりやすいです。ちなみに私はスマホでも見えます:v:

このランダムドットステレオグラム(RDS)をオリジナルの2D写真から生成したい。

# 深度推定
ランダムドットステレオグラム(RDS)作成のために深度マップというものが必要である。
どうやら機械学習の技術を用いると2D写真から深度を推定できるようだ。
これで最高のランダムドットステレオグラム(RDS)を作れるぞ。

## Tensorflow
深度推定について調べていたら同じような試みをしている方のブログを見つけた。こちらはランダムドットではなく通常のステレオグラムでやっているようだ。

- [2D写真から立体視画像を作成してみた - めめんと](https://mementoo.info/archives/2790)

せっかくなので深度推定の部分については、こちらの方法を参考にさせてもらいます。ありがとうございます。

## 深度推定してみた
こちらの画像の深度を推定してみた。
![SAYA160312500I9A3721_TP_V4のコピー.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329479/d81fd831-ca31-a111-1003-8170217adb5e.jpeg)




結果がこちら。
![1220_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329479/0b2542fb-e42d-50bf-9da2-e8e7ededd445.png)



どうやらうまくいったようである（？！）。

# RDSにする

やってみた。
![122020.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329479/c699de1b-9d6b-aba7-188e-2fefc4a6c5a0.png)

ぜんぜん意味がわからない。失敗だ。

# おわり
おそらく深度マップに濃淡がそれほどなかったから失敗したと思われる。
難しい…
GoDaddyで管理しているドメインをNetlifyDNSへ移行する方法

# はじめに

##背景
GoDaddyでホスティングしていたWordPressサイトを、静的サイトに切り替えてNetlifyに引っ越ししました。

その際に、ドメインの移行作業が必要だったのでまとめます。

##参考
なにわともあれ公式ドキュメント。
これが一番わかると思います。

https://docs.netlify.com/domains-https/custom-domains/#assign-a-domain-to-a-site




#ドメイン移行の手順

##NetlifyDNSにドメイン登録
ドメインを設定したいプロジェクトの「Setting」から、ドメインを登録する。

###参考にしたい公式ドキュメント
https://docs.netlify.com/domains-https/netlify-dns/#add-a-domain-you-own


##ネームサーバーの確認
設定したドメインの詳細画面から、ネームサーバが確認できる。
これをのちに、現在管理しているドメインの管理サービス（ここではGoDaddy）に新規登録する。

###参考にしたい公式ドキュメント
https://docs.netlify.com/domains-https/netlify-dns/delegate-to-netlify/


##GoDaddyのドメイン管理画面から、ネームサーバの設定

GoDaddyのドメイン管理画面から、ネームサーバの設定へとすすみ、
先ほど確認したネームサーバに書き換える。


##しばらく待つ

変更が適用されるまでに１日〜２日かかる。
エリジョ(Elixir女子部)を始めてみて

この記事は、「fukuoka.ex Elixir／Phoenix Advent Calendar 2019」20日目の記事です。
きのうは @NeunKrain  さんの「ElixirをGitHubActionsを使ってCIしよう｡」でした。


#はじめに
Twitter名@HappyK514こと、武林と申します。

2019年は、動いた年でした。

振り返ってみると、今年は実現できたことがいくつかありました。
 ・前職は、事務やCADの仕事をしていましたが、web業界に飛び込みました。
 ・リモート勤務が可能になり、自宅で働けるようになりました。
 ・働き方や仕事の価値観がガラッと変わりました。


Elixirのコミュニティに参加するようになり、
**現在は、エリジョ(Elixir女子部)を運営させて頂いています。**
エリジョを始めてみて、感じたことを書いていこうと思います。 

##エリジョの雰囲気はこのような感じです✨

**2019/11/02（土）エリジョ第一回目 **
**環境構築とプログラミングElixirデモ**
![IMG_20191102_140800.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148205/c7241b64-8ff1-7bc2-5fb4-ec8094c975f0.jpeg)


**2019/11/23（土）エリジョ第二回目** 
**プログラミングElixir輪読会**
![IMG_20191123_143733.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148205/0fc724fa-9806-8144-84f0-f583cd54912e.jpeg)


![EKCJGI7UcAIKwes.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148205/9c9a9af6-b796-7462-cf4c-48a50d1f6831.jpeg)
 
リモートでもご参加頂いています✨
![EKCQgN0UcAIjGrh.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148205/ce3c103f-6915-a267-b273-54c1341d1012.jpeg)


前回のElixir輪読会にご参加くださいました、エリジョの皆さんです✨✨
徐々に、女子が集まってきています✨嬉しい✨✨
![IMG_20191123_125648.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148205/48c59879-a747-da7b-3140-bd773fe6bc6e.jpeg)

Elixiriコミュニティの方の応援・サポートのおかげで、
勉強会を開くことができています。

初めての勉強会の運営で、手がまわっていない部分もありますが、
参加者の方にとって良い場にできたらと思っています。

##勉強会の運営は、次のようなことをしています
(やり方や媒体は他にも沢山あると思います)

**勉強会準備**
・場所の確保
・日程と時間の調整
・イベントページの作成(connpass)
・イベント告知(Twitter・Facebook)

**当日**
・会場設営と買い出し
・リモート枠用にzoomURL配布
・SNSにてイベントの様子を発信
・司会進行
・参加者の方との連絡など


**リモートと現地の両方に目を行き届かせることは難しいなと感じました。**
一人運営されてる方は凄いです！！  


**今後、教えてくださる方、リモート枠側の運営など、
当日、お手伝いくださる方がいてくださると嬉しいなと思っています。**
(男女問いません)
 

##やってみてよかったこと
・場所があるということだけでも、喜んで頂けている
・参加者の方の熱意や姿勢に刺激を受けてモチベーションがアップ✨
・仕事以外の女性同士の繋がり
・主体的に考え動けるようになってきている 
・**エリジョから @gokkozemisei さん、アドベントカレンダーデビュー！🎉**
　[エリジョになってElixirでお天気情報を取得してみた](https://qiita.com/gokkozemisei/items/a9ec29804860c5697b3b)


##今後のエリジョ
来年も引き続き、定期的に開催予定です！
有識者の方のご登壇、ワークショップ、福岡以外での開催など、
少しずつ広がると良いなと思っています。


参加者の方の何か作りたいものを、
Elixirで作ることができるようになれたら、また良いのかなと思っています。
私は、webサービスを作りたいです🌈


##最後に
明日、2019/12/21(土)13:00から、今年最後のエリジョをします！
リモートでのご参加も可能です！
教えてくださる方、サポートいただける方は男女問いません。
ぜひお気軽にご参加ください！

[エリジョ「Elixir女子部」プログラミングElixir輪読会#3](https://elijo.connpass.com/event/159315/)
 
明日の「fukuoka.ex Elixir／Phoenix Advent Calendar 2019」21日目の記事は、@GKBR さんです
パスカルの三角形を計算するBashワンライナー

## 実行結果

```bash:パスカルの三角形を計算するワンライナー
eval echo "1" "| awk '{print \$0}END{printf \"1 \"; for (i=1; i<NF; i++) {printf \"%s \", \$i+\$(i+1)} print \"1\"}'"{,,,,,,,,,}
```

```text:実行結果
1
1 1
1 2 1
1 3 3 1
1 4 6 4 1
1 5 10 10 5 1
1 6 15 20 15 6 1
1 7 21 35 35 21 7 1
1 8 28 56 70 56 28 8 1
1 9 36 84 126 126 84 36 9 1
1 10 45 120 210 252 210 120 45 10 1
```

## 解説

このコードの肝となっているのが、**ブレース展開**というBashが持つ機能です。
ブレース展開とは、例えば次のようなものです。

```bash:ブレース展開の例
echo "test"{1..10}
#> test1 test2 test3 test4 test5 test6 test7 test8 test9 test10
echo {,k,s,t,n,h,m,y,r,w}a
#> a ka sa ta na ha ma ya ra wa
```

```{n..m}```(n,mは自然数)とすると、このブレースはコマンド実行時にnからmまでの自然数の数列に展開され、2つの目の例のようにコンマ区切りで要素を並べたものはそれら要素を半角スペースでつなげた文字列に展開されます。
さらにこのブレースの前後に文字列をくっつけると、数学の世界で$a(m+n)$が$a×m+a×n$になる分配法則のように、文字列が展開されます。

ところでコンマ区切りで並べた要素は二つ目の例で見たように、空の文字列でも構いません。例えば、

```bash
echo "yes"{,,,,,,}
#> yes yes yes yes yes yes yes
```

というようになります。

このことを利用すると同じ文字列をコンマの数+1ぶん作ることができます。

パスカルの三角形の計算方法はいくつかありますが、一番初歩的なのは隣接する項同士の和を頂点から順々に計算していくという方法でしょう。この計算をawkで書いたものが次のコードです。

```bash:各段の計算
awk '{
    printf "1 ";
    for (i=1; i<NF; i++) {
        printf "%s ", $i+$(i+1);
    }
    print "1"
}'


#例えば…

echo "1 2 1" | awk '{上に同じ}'
#> 1 3 3 1
echo "1 2 1" | awk '{上に同じ}' | awk '{上に同じ}'
#> 1 4 6 4 1
echo "1 2 1" | awk '{上に同じ}' | awk '{上に同じ}' | awk '{上に同じ}'
#> 1 5 10 10 5 1
```

すなわちこのawkのコードをm回適用するとパスカルの三角形のm段目の数値が計算できるというわけです。

ただ、何回も同じコードを書くのはあまりきれいじゃないですし、コピペするのも大変ですからここで先程お話ししたブレース展開を用います。

つまり、

```bash:(1)
echo "1 2 1" | awk '{上に同じ}' | awk '{上に同じ}' | awk '{上に同じ}' | awk '{上に同じ}'
```

と書いていたものを

```bash:(2)
echo "1 2 1" " | awk '{上に同じ}'"{,,,}
```

と書いて、```"コマンド"{,,,}```の部分をBashによって展開してもらおうという話です。

さて、この部分を展開する方法はいくつかあるのですが、いちばんスッキリと書けるのは```eval```コマンドを用いる方法です。evalもBashの機能の一つですが、このコマンドに文字列を食わせるとコマンドとして実行できる部分やブレース展開のように展開できる部分を展開してくれます。

たとえば、

```bash:(3)
eval echo "1 2 1" " | awk '{上に同じ}'"{,,,}
```

といったコードを実行すると、まず```eval```コマンドによりeval以降の文字列(すなわち$(2)$)が評価され、$(1)$のコードが返り、それがBashによって解釈され実行されます。

このようにブレース展開をうまく駆使すると、最初に掲げたようなワンライナーでパスカルの三角形をシェル上に表示させることができます。

Bash上で再帰的な計算や何回も同じ関数を適用するような計算を行ないたいときに、```eval "コマンド列"{,,,}```というイディオムを覚えておくといつか役に立つときがあるかもしれません(笑)。

## 関連記事・参考リンク
- [BashのTips](http://kodama.fubuki.info/wiki/wiki.cgi/bash/tips?lang=jp#68)
- [パスカルの三角形とフラクタル](https://qiita.com/YuukiToriyama/items/d5a3a4635640a860f0a7)

<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/s7u6SC4CWy">https://t.co/s7u6SC4CWy</a> <a href="https://t.co/RtWBIrRqh7">pic.twitter.com/RtWBIrRqh7</a></p>&mdash; シェル芸bot (@minyoruminyon) <a href="https://twitter.com/minyoruminyon/status/1143055443410862081?ref_src=twsrc%5Etfw">June 24, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
【ITインフラ基礎】学習メモ / サーバー用語編

参考書籍：
[イラスト図解でよくわかるITインフラの基礎知識](http://gihyo.jp/book/2018/978-4-7741-9600-8)
[IT用語辞典　e-words](http://e-words.jp/)
その他ウェブサイト

#サーバー
クライアントからの何かしらのリクエストに対し、レスポンスをする機器やシステム。例えばユーザーはウェブサイトにアクセスし、サーバーは情報をレスポンスとして返す。

###Webサーバー
WebサーバーにはHTMLファイルやCSSファイルといったwebページを表示するのに必要なものが収められている。

###メールサーバー
SMTPサーバー（送信サーバー）、POPサーバー、IMAPサーバー（受信サーバー）がある。

###データベースサーバー
データベース管理システムが働いているサーバー。
データベース内で整理されている情報を検索し、結果を返す。

#CPU/GPU
##CPU(Central Processing Unit)
中央演算処理装置。
コンピューターの頭脳。
各種装置を制御したり、データを処理する。
> ユーザーからの命令を受け取り（fetch)、それを理解し(decode)、実行して（execute)、実行結果を出力する(store)

処理には大量の電気信号が使われる為、冷却装置が必要。

##GPU(Graphics Processing Unit)
３Dグラフィックスの描画などの処理をする為に必要な演算をする装置。
タスクをコアごとに分担して行う並列処理が得意。

#記憶装置
###ストレージ（外部記憶装置）
データを保存する装置。
HDD（ハードディスクドライブ）とSDD(ソリッドステートドライブ）の二つがある。

###メモリ（主記憶装置）
データを一時的に記憶しておくための装置

###ストレージとメモリの違い
ストレージは物理的に保存ができ永続的にデータをやり取りできるというメリットがある。
メモリはPCが起動している間に一時的に保存され、アクセスが早いというメリットがある。

#BIOS
Basic Input / Output System
PCの電源を入れた時に最初に起動するプログラム。

#OS
オペレーティングシステム

OSの処理の流れ
>１、GUI(またはCUI）を経由してユーザから命令を受け取る
２、受け取った命令を機械が理解できる機械語に翻訳する
３、翻訳して命令を適切なソフトウェアやハードウェアに伝える
４、ソフトウェアやハードウェアが行なった処理の結果を受け取る
５、GUI（またはCUI）に結果を出力する

#ミドルウェア
OSとユーザーアプリケーションの中間に位置する。
ソフトウェアはOSとOS以外（アプリケーションサーバー）に分けられる。
この二つの間に立ち特別な機能を提供してくれるのがミドルウェア。

###データベース管理システム
SQL server, MySQL PostgreSQL, Oracle Database など

###Webサーバ(HTTPサーバー）
Apache, Nginxなど
linuxで画面出力を上下左右に反転させる

#はじめに
諸事情あってディスプレイへの出力を左右反転させる必要があった。（要は鏡に写した状態）
が、検索しても見つかるのは画面を回転させる方法ばかりで一向に反転する方法が見つからなかったのでメモ。

#この記事によってできること

- ディスプレイへの出力の上下、左右、または両方を反転させる
- ディスプレイへの出力の上下、左右を回転させる（オマケ）

調べても出てこないし、GUIで設定ができないので出力を反転する方法から先に書く。（こっちの方が圧倒的に困ってる人多そうだし）

#環境

```terminal
$ uname -a
Linux kali 4.18.0-kali2-amd64 #1 SMP Debian 4.18.10-2kali1 (2018-10-09) x86_64 GNU/Linux
```
debian系でしか検証していません。
それ以外で動かなかったらごめんなさい。

# 画面出力を反転
方法は簡単でターミナルで

```terminal
$ xrandr -x
```
と叩くだけ。

外部接続のディスプレイなら、

```terminal
$ xrandr
Screen 0: minimum 320 x 200, current 2166 x 768, maximum 16384 x 16384
eDP connected primary 1366x768+0+0 (normal left inverted right x axis y axis) 344mm x 194mm
   1366x768      60.00*+  48.00  
   1280x720      60.00  
   1024x768      60.00  
   800x600       60.00  
   640x480       60.00  
HDMI-A-0 connected 800x480+1366+0 inverted (normal left inverted right x axis y axis) 255mm x 255mm
   800x480       59.98*+
   640x480       75.00    72.81    60.00    59.94  
   720x400       70.08  
DisplayPort-0 disconnected (normal left inverted right x axis y axis)
```
でディスプレイの名前を調べてから（ここではeDPとHDMI-A-0の部分が名前に相当する）

```terminal
$ xrandr --output HDMI-A-0 --reflect x
```
とすればHDMI-A-0という名前のディスプレイのX（左右）を反転することができる。

##コマンドまとめ

メインのディスプレイなら

```terminal
#左右反転
$ xrandr -x
#上下反転
$ xrandr -y

#上下左右反転は上記二つを組み合わせる
$ xrandr -x
$ xrandr -y
```
外部のディスプレイ（ここではHDMI-A-0）に設定を適応させるなら、


```terminal
#左右反転
$ xrandr --output HDMI-A-0 --reflect x
#上下反転
$ xrandr --output HDMI-A-0 --reflect y
#上下左右反転
$ xrandr --output HDMI-A-0 --reflect xy
#元に戻す
$ xrandr --output HDMI-A-0 --reflect normal
```

# 画面出力を回転
一応回転の方も説明（こっちはGUIでもできるけど）


```terminal
#上下回転
$ xrandr -o inverted
#左を頂点とした縦向き
$ xrandr -o left
#右を頂点とした縦向き
$ xrandr -o right
#元に戻す
$ xrandr -o normal
```
外部のディスプレイに設定を適応させるなら、

```terminal
#上下回転
$ xrandr --output HDMI-A-0 --rotate inverted
#左を頂点とした縦向き
$ xrandr --output HDMI-A-0 --rotate left
#右を頂点とした縦向き
$ xrandr --output HDMI-A-0 --rotate right
#元に戻す
$ xrandr --output HDMI-A-0 --rotate normal
```
でディスプレイをソフトウェア的に回転させることができる。

# 結論
xrandrは神。
結構頑張って探したのに出てこなかったのでもうダメかと思ったが意外と簡単に解決できて満足。
多分同じことで悩んでいる人も多いはずなのでこの記事が役に立ってほしい。
BERTを使った文章要約 [身内向け]

# モデル概要
![ModelOverview](https://i.imgur.com/LHbBJ6M.png)

- エンコーダ：**BERT**
- デコーダ：**Transformer**

　典型的なencoder-decoderモデル（Seq2Seq）．Seq2Seqについては，ここら辺が参考になる．
 
 [PyTorchによるSeq2seqの実装](https://www.pytry3g.com/entry/pytorch-seq2seq)

エンコーダにはBERT，デコーダにはTransformerを使っている．BERTの事前学習モデルは京都大学 黒橋・河原研究室にて公開されているものを使用している．<font color='red'>**BERTは高性能なエンコーダになれるが，デコーダにはなれない**</font>．理由は，エンコーダの入力を受け取れないから．しかし，BERTは構造的にはTransformerの集合なので，ほぼ同じと考えてもいい．
 
# データセット
![Livedoor](https://i.imgur.com/g72yUkp.jpg)
　モデルの学習用のデータセットには**Livedoorニュース**を使用した．訓練データは約10万記事，検証データは約3万記事

> - データセット：Livedoorニュース
> - 訓練データ：100,000記事
> - 検証データ：30,000記事
> - 最大入力単語数：512単語
> - 最大出力単語数：128単語

![Dataset](https://i.imgur.com/TkBDvSr.png)

上の画像の右側，下の部分が**本文（入力文）**，上の赤い枠で囲まれた部分が**要約（出力）**．
本文は512単語を超えたら，それ以下の単語を切り捨てる．要約文の場合は128単語．
<font color='red'>**この手法は，文章要約タスクでよく使われるもので，「長い文章は初めの方に重要なことが書いてあることが多い」という考えに基づいている．**</font>

# 前処理
　今回の前処理は主に二種類ある．
 「単語分割」と「WordPiece」．
### 1. 単語分割
　単語分割には**MeCab＋NEologd**を使用している．
 → なぜ形態素解析を用いるのか？
 ![](https://i.imgur.com/RtWV5Qp.png)
 
 上の画像のように，英語などの言語は半角スペースで単語に分割することができるが，日本語はそういったことができない．そのため，形態素解析ツールで分割する．
 
### 2. WordPiece
　ところで，こういったモデルは語彙をあらかじめ記憶しておいて，その語彙の中にある単語をつなぎ合わせて文章を出力する．そのため，**語彙にない単語は基本的に"[UNK]"のような特殊な文字に置き換えられる**．
 しかし，文章要約においては固有名詞が大事だったりする．そのため**できるだけ語彙にない単語（以下，未知語）を減らしたい．**
 
 そこで，「**WordPiece**」という手法がよく用いられる．
 <font color='red'>**WordPieceとは，未知語（語彙にない単語）をさらに分割して，語彙にある単語の組み合わせで表現しよう，というものだ**</font>．具体的には，
 
 ![](https://i.imgur.com/Z6l3Cxi.png)
 
 上の画像のようになる．この場合は「GardenVillHotel」という単語が語彙のリストの中になかったため，「Garden」，「Villa」，「Hotel」という，語彙の中にある単語の組み合わせで表現している．
 
# 学習
![](https://i.imgur.com/xSTGqPu.png)

上の図のように，**エンコーダに入力文**（記事本文），**デコーダに出力文**（要約文）を設定して学習させる．

学習時のログは以下の通りとなっている．

![](https://i.imgur.com/AJ98BSM.png)

上の画像を見ると，左側の精度が徐々に上がっていき，右側の損失が徐々に下がっていっているのが見て取れる．

# BERTの補足
![](https://i.imgur.com/PJq3BoX.png)
以下BERTの論文なので，詳しいことはここ見てください．
https://arxiv.org/abs/1810.04805

BERTは普通のモデルと違って，学習には2つのプロセスがある．
1. **事前学習**（pre-training）
2. **転移学習**（fine-turning）

### 1. 事前学習
 事前学習とは，特定のタスクをBERTモデル単体で学習させることである．これによって，それぞれの単語の埋め込みベクトル（Embedding Layerのベクトル）を学習することができる．つまり，**単語単体での意味を学習できるということだ**．
 
### 2. 転移学習
　転移学習は，事前学習済みモデルをほかのレイヤーと結合させ，自分のタスクを学習させるというものだ．これは，一からそのタスクを学習させるのに比べて，**短時間で学習ができる**．
 また，BERTを用いたモデルは多数のSOTA（state-of-the-art）をたたき出しているので，一から学習するモデルより**高精度でもある**．
 
![](https://i.imgur.com/3huKvv2.png)
Excel VBAでファイル一覧取得

# 単調な作業はVBAにやらせよう

VBAで自動化するのって正直どうかと思うんですが、どこの部署に行ってもExcelが入っている＆下手に開発環境を導入しようとすると手続きがめんどくさいという理由でなかなか手放せずにいます。

別に自動化して褒められようとか残業を減らそうとか、そんな崇高な趣味はございません。本でも読みながらぼーっとする時間が増えたらそれで十分でございます。

まずは第一歩として、ファイル一覧を作るマクロを書いてみます。

## とりあえずVBA起動

Excel開いて`Alt-F11`。

マクロはSheet1に直接書いちゃってもいいし、標準モジュールを挿入してそこに書いてもいいです。動けばいいので。

## Scripting.FileSystemObjectを読み込む

ファイルシステムの読み書きを行うライブラリです。
詳しい説明は割愛。

Scripting.FileSystemObjectの用法としては、以下の書き方を多く見かけるような気がします。

```vb:よく見かけるコード
    Dim FS As Object
    Set FS = CreateObject("Scripting.FileSystemObject")
```

が、 `Ctrl-SPACE` でコード補完が使えなかったりめんどくさいので、参照設定を追加してしまった方が断然ラクです。

```vb:こっちの方がラク
    ' ツール(T) > 参照設定(R) > Microsoft Scripting Runtime
    Dim FS As New Scripting.FileSystemObject
```

## 指定されたフォルダにあるファイルを返すサブルーチンを書いてみる

検索結果は複数件返ってくるので、FileオブジェクトのCollectionにしてみます。
VBAは日本語で書くのがマイブーム。

```vb:Module1
Option Explicit

Private Sub ファイル検索(検索フォルダ As Scripting.Folder, 検索結果 As Collection)
    Dim ファイル As Scripting.File

    For Each ファイル In 検索フォルダ.Files
        検索結果.Add ファイル
    Next ファイル
End Sub
```

## サブルーチンを呼び出す処理を書いてみる

まあ、最初なので贅沢は言いません。
マクロ実行時に `Alt-F8` する必要があったり、検索フォルダのパスがソースにべた書きだったり、結果の出力先がデバッグ（イミディエイトウィンドウ）だったりしてもいいんです。気にしたら負けです。

前述のModule1に追記します。

```vb:Module1
Public Sub Main()
    Dim FS As New Scripting.FileSystemObject
    Dim 検索フォルダ As Scripting.Folder
    Dim 検索結果 As New Collection
    Dim ファイル As Scripting.File

    Set 検索フォルダ = FS.GetFolder("C:\Users\xxx\Documents")
    Call ファイル検索(検索フォルダ, 検索結果)

    For Each ファイル In 検索結果
        Debug.Print ファイル.Path
    Next ファイル
End Sub
```

フォルダの指定は、ファイルサーバーとかのネットワークパスでも大丈夫（どちらかというとそっちの用途の方が多いんじゃないかな？）。

イミディエイトウィンドウ（`Ctrl-G`）にファイルパスがずらーっと出てきましたかね？

## （ちょっと改良）サブフォルダにあるファイルも一覧化したい

ファイル検索を再帰呼び出ししちゃいましょう。

検索フォルダ配下にリバースポイント（ジャンクションポイント、シンボリックリンク）があった場合、そのサブフォルダを参照しようとすると `実行時エラー '70': 書き込みできません。` というエラーが発生するので除外しました。

```vb:Module1
Private Sub ファイル検索(検索フォルダ As Scripting.Folder, 検索結果 As Collection)
    Dim フォルダ As Scripting.Folder
    Dim ファイル As Scripting.File

    ' リバースポイントのサブフォルダを参照するとエラーになるので除外する
    If 検索フォルダ.Attributes And Alias Then Exit Sub

    For Each ファイル In 検索フォルダ.Files
        検索結果.Add ファイル
    Next ファイル

    For Each フォルダ In 検索フォルダ.SubFolders
        Call ファイル検索(フォルダ, 検索結果)
    Next フォルダ
End Sub
```

# まあ、ファイル一覧だけならVBA書くまでもないですが

コマンドプロンプト開いて `dir /s` で一発ですがね。

「複数のファイルをいっぺんに処理したい」という要件が大半なので、基本の基本として覚えておいても損はないと思いますね。
やっぱりこれが好き♪ Personality Insights とTwitterで性格分析


##私、こんな感じの人でしたっけ？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245231/c6078895-c1f4-2c36-b64b-8704420e89e9.png)

過去２年間のTwitterを分析して見たところこのような結果になっています。
実物を知っている方がどう評価するかはさておき、この分析について書きます。

＝デモサイトはこちら＝

https://personality-insights-demo.ng.bluemix.net/?source=myself

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245231/af1c6ff7-5824-7d6d-4f2f-b608dd9cdc2c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245231/fbe88033-d87a-7fae-b769-3556694e43aa.png)
UICollectionViewでCell以外のタップを検知する

# はじめに
`UICollectionView`を使っている際に、Cell以外の部分をタップした際に処理を動かしたい事があったので、その際に使用した方法を記載します。

# 環境
Xcode11
Swift4.2

# Cellのタップを検知する
`UICollectionView`でCellのタップを検知する際は、`UICollectionViewDelegate`プロトコルを使用する方法が一般的だと思います。

``` ViewController.swift
extension ViewController: UICollectionViewDelegate {
    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        print("Cellがタップされた！")
  }
}
```

# Cell以外のCollectionView内のタップを検知する
`UICollectionViewDelegate`プロトコルを使用することでCellのタップを検知する事ができましたが、今回のようにCell以外の`CollectionView`をタップした際に動かしたい処理がある場合は別の方法を取ります。

今回自分は、`UITapGestureRecognizer`を使用しました。

`UITapGestureRecognizer`は、`UIGestureRecognizer`の1つで、画面のタップを1度だけ認識してくれます。(連続して認知する場合は`UILongPressGestureRecognizer`を使用します)
~~名前が似ているのでわかりにくい…~~

まずは`UIGestureRecognizerDelegate`プロトコルを使用し、Viewにインスタンスを追加します。

``` ViewController.swift
class ViewController: UICollectionViewController, UIGestureRecognizerDelegate {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // UIGestureRecognizerのインスタンスを作成
        let tapGesture:UITapGestureRecognizer = UITapGestureRecognizer(
            target: self,
            action: #selector(ViewController.tapped(_:)))
        
        // デリゲートをセット
        tapGesture.delegate = self
        
        // Viewにインスタンスを追加
        self.collectionView?.addGestureRecognizer(tapGesture)
    } 
```

この際、インスタンスのアクションには、タップされたときに期待する動作を記述します。

``` ViewController.swift
@objc func tapped(_ sender: UITapGestureRecognizer){
    print("CollectionViewがタップされた!")
}
```


しかし、このままだとCellをタップした際にもイベントが発火し、メソッドが呼び出されてしまいます。
そのためメソッド内に、Cellがタップされたかどうかを判断する処理を追記します。


``` ViewController.swift
@objc func tapped(_ sender: UITapGestureRecognizer){
    // indexPathForItemメソッドを使い,cellのindexを取得できない場合はタップされた場所がcellでないと判断
    guard let index = self.collectionView?.indexPathForItem(at: sender.location(in: self.collectionView)) else {
        print("Cellではないところがタップされた!")
    }
}
```

以上です！

# 参考
- https://qiita.com/ishigaki_shun/items/4f24cf386ff1cba76346
- https://stackoverflow.com/questions/40365971/how-to-add-tap-gesture-to-uicollectionview-while-maintaining-cell-selection
バッチを呼び出し、処理結果をログに出力する

# はじめに
既存のバッチファイルを起動し、その実行結果から色々調査する業務がありました。しかし、ログの出力どころかpauseコマンドすら入っておらず、実行後に人知れずコマンドプロンプトが消えてしまう状態でした…
既存バッチには手を加えたくなかったので、既存バッチを呼び出して実行結果をログに出力する新しいバッチを作ろうとしました。その時に少しはまったので忘れないように投稿します。

# ログファイル名と保存先の設定
SETを使ってログファイル名と保存先を指定します。

```console
SET LOG=%dp0\hoge.log
```
今回は保存先をバッチファイルと同じディレクトリ（カレントディレクトリ）に、ファイル名をhoge.logとしました。カレントディレクトリの指定方法はググると色々出てくるので、そちらを参照してください。

# バッチの呼出しに使うのは call? start?
バッチを呼出すにはcallコマンドかstartコマンドが使えるみたいです。まずはcallコマンドを使ってみました。呼出し用バッチはこんな感じです。

```console
@ECHO OFF

SET LOG=%~dp0log\hoge.log
CALL HOGE.bat >> %LOG%

PAUSE
EXIT
```
hoge.batが実行結果を確認したい既存バッチファイルです。早速実行してみると…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/424362/e60178b0-9741-14fd-4daa-487fea6f5d39.png)
呼出した既存バッチの処理は表示されないんですね。次にstartコマンドを試すと別画面で既存バッチが起動されるため、処理内容は確認できるようになりました。しかし、ログ出力ができていませんでした。（別プロセスで起動されるのでログ出力できなかった？）

# 結果
とりあえず、今回はcallコマンドで行くことにしました。できれば呼出したバッチの処理内容を表示しておきたいので、何かいい方法ないかな～。
Webサイトってどうやって作るの？（具体的なことを全然知らない超初心者に読んでもらいたい。）

#新参者、よろしくお願いします。
　初めまして、今回記事を書かせていただく「じゅのす」です。
始めに僕のプログラミング経験について。
　ほぼ０に等しいです。笑
以前に少しだけ"Python"っていうプログラミング言語を学んでいたのですが、別にそれを使って何か出来るというわけでもなく、もうほとんど覚えていません。

　じゃあ今回記事に何を書くのって？
こんな知識を持たない僕がこれから2週間かけて"Webページ"づくりに挑戦します！（2019年12月20日にこの記事は投稿予定。今日は12月7日。間に合ってるかな・・・。）
　プログラミングに慣れている方からすればそんなの簡単だよって思うかもしれません。でも実際、今の僕にとっては高い壁なんです。以前にも自分の考えを外の世界に飛ばしたいなと思ったのですが、ハードルが高く感じて諦めちゃいました。きっと同じ思い、悩みを持つ人はたくさんいるはずです。
　そんなこんなでこれから毎日少しずつ調べ、勉強し、実行し、この記事とWebページを仕上げていきます！僕は有言実行する男です。きっといいWebページが出来上がり、みなさんが今読んでくださっている頃にはいいものができあがっているはずです！
　ちなみに今回作るWebページの内容は、「イベント用ホームページ」です。
　それではよろしくお願いします。

##さぁ、始めよう。
　とは思いながらも、何から始めればいいのか...。いろいろ調べてみたところ、Webページ作成において最も使われている（必要とされている）プログラミング言語は"HTML"と"CSS"ということが分かりました。
　初心者なりにこの2つの言語の特徴を調べてみました。簡単にまとめると、"HTML"は文字を、"CSS"はそこに色や配置のバリエーションを加えてくれるようです。

　う～んまだまだ分からないことが多い、、、とりあえず触れてみます！

##勉強開始。
　僕は HTML と CSS を学習するのに Progate のレッスンを使わせて頂くことにしました。周囲の子が使っていて、評判良かったので！（宣伝ではありませんよー。）Progate には様々な言語の学習プログラムがありますが、その中の HTML & CSS コースを進めていきます。

　ひとまず、基本的なHPの構成方法、色や配置の設定方法まで学んだところで実際に試作することにしました！

　んん？学んだコードはどこに書いたらいいの？

　せっかく学んだコードをどこに書けばページが生成されるのか分からん・・・。ここも色々と調べてみたところ、自分でプログラミングに取り組むには開発環境の設定（少しだけ装備を整えるだけです。難しくないよ。）が必要でした。
　その準備の1つであり、先ほどのコードの悩みを解消してくれるのが「テキストエディタ」です。
　簡単に言えば、テキストを編集するツールです。Webページってたくさーーーんの文字（テキスト）で構築されています。それらを書き記す媒体としてテキストエディタが存在します。
　数あるテキストエディタの中で、私は「Atom」を使うことにしました。口コミでもだいぶ評判の高いソフトです。（ここも宣伝じゃないですよー。）インストールも二手間ぐらいであっさり終わりました。

　それでは実際にHTMLとCSSのコードを書いていきます！
##実践
　どこまでこの記事に詳細を書こうか迷いましたが1個1個コードを記すのも量が膨大になるので、今回は大まかな作成手順と僕がつまづいた点を書いていきます。

　HPの大まかな構成を先に述べておくと、「head」と「body」があります。詳細は下でそれぞれ書きます！

　まずは「head」部分の作成。
　これはホームページの基本情報を設定する場所です。実際にHPを開いたときに見える要素はありませんが、ここを丁寧に書くことでHP内での文字化けの防止や、ネットで検索結果に引っかかるようになります。この辺の作業はHTMLだけで終わります。

　次に「body」部分の作成。
　ここがHPで実際に見る部分になります。今回作成するHPの「body」は「header」、「main」、「footer」の3部構成にすることにしました。

　「header」はページの1番上のスペースを構築してくれます。HPに飛ぶと上の方にページタイトルやログインボタン、色々と目次のようにメニューが設定されている印象がありませんか？それです！
　今回はそこにタイトルだけ設置しました。ここはHTMLで行います。そしてそこに色付けやサイズ変更をCSSで加えてアレンジします。

　「main」はページの大部分を占める主役の部分なので、1番アレンジしがいのある場所です。
　ここにはイベント情報、過去のイベント実績といった情報を盛り込みました。CSSを用いればこれらもただの箇条書きではなく、色付けしたり、グループ分けしたり、フォントを変えてみたりと自由にオシャレできます。文字で出来ているくせになんて素敵なビジュアルを作れるのだろう、と少し感動しました。笑

　だいぶHPらしくなってきました。

　最後に「footer」です。HPの1番下に行くと小さな文字で細かな情報がだぁーっと載っているイメージありません？それです！
　ここにはイベントの運営者情報やお問い合わせといったフォームを設けました。しかし、今回作成するHPの場合はそこまでここに盛り込む内容はありませんでした。

　改めてHPの構成を整理すると、
◯head
◯body
・header
・main
・footer
といった形です。
headとbodyが2本柱、その中にheader、main、footerがある感じです。

本当はここにそのHPを載せたかったのですが、Webサーバーの準備までは間に合わなかったので公開までは行きませんでした。泣

が、約2週間の学習でHPの作成はマスターできた気がします。つまづいた点もありましたが、色々と分かったことも多く、勉強になりました。意外とやる気になれば簡単に出来るものですね！

もっともっとプログラミングスキル高められるよう精進する予定です！良かったらこれを読んでくれているあなたも一緒に！それでは！

読んでくださりありがとうございました。
soracom-cli で Sandbox 環境の見積作成や出荷をワンライナーで実行する

# はじめに

出荷済みとなったSIMの情報をバッチでDB取り込みしたり、タグ付けを行うのをテストするのにSandbox環境を利用しました。
何度もテストしたかったのでその際に作成したコマンドラインです。

以下の資料を参考にしています。
https://www.slideshare.net/SORACOM/soracom-conference-discovery-2018-f1-soracom

## 前提

以下が必要です。
環境はmacOSです。

* soracom-cli がインストールされていること
* jq がインストールされていること
* SORACOM Sandboxでオペレーターが作成済であること

## 準備

### 発送先登録(初回のみ)

見積の作成に必要です。

以下のファイルを作成し、コマンドを実行する。

```bash
soracom operator get --profile sandbox | \
jq -r '.operatorId' | xargs -L 1 -I {} \
soracom shipping-addresses create \
--address-line1 "新宿" \
--address-line2 "6-27-30" \
--building "新宿イーストサイドスクエア" \
--city "新宿区" \
--company-name "テスト株式会社" \
--department "IT事業部" \
--full-name "山田太郎" \
--operator-id {} \
--phone-number "03-1234-5678" \
--state "東京都" \
--zip-code "1602222" \
--profile sandbox
```

## SIMの発注

### 見積の作成、注文確定

必要な分だけ注文を発行します。
`quentity` が多いとどこかでbadrequestになった記憶がある。。。

```bash
soracom shipping-addresses list --profile sandbox \
| jq -r '.shippingAddresses[] | .shippingAddressId' \
| xargs -I {} soracom orders create \
--shipping-address-id {} \
--body '{"orderItemList":[{"productCode":"4573326590013","quantity":5}]}' \
--profile sandbox \
| jq -r '.orderId' | xargs -I {} soracom orders confirm --order-id {} --profile sandbox
```

### 確定済注文を出荷済みへ変更

複数の注文を一括で変更します。

```bash
soracom --profile sandbox orders list | \
jq '.orderList | map(select(.orderStatus == "orderProcessing"))' | \
jq -r '.[].orderId' | \
xargs -L 1 -I {} soracom sandbox orders ship \
--operator-id `soracom operator get --profile sandbox | jq -r '.operatorId'` \
--order-id {} \
--profile sandbox
```

↑だと毎回オペレータIDを取得すると思うので

```bash
OPERATOR_ID=`soracom operator get --profile sandbox | jq -r '.operatorId'`

soracom --profile sandbox orders list | \
jq '.orderList | map(select(.orderStatus == "orderProcessing"))' | \
jq -r '.[].orderId' | \
xargs -L 1 -I {} soracom sandbox orders ship \
--operator-id $OPERATOR_ID \
--order-id {} \
--profile sandbox
```
poetry導入メモ(ubuntu18.04)

# poetry導入メモ(ubuntu18.04)
突然ですが、僕のノーパソが壊れました。
無事復旧したのですが、OSをふっ飛ばして入れ替えでした。

で、この記事が流行っていたので、これを機にpoetryを導入しました。
https://qiita.com/sk217/items/43c994640f4843a18dbe

世間ではまだいっぱい導入記事があるわけじゃないのと、
OSふっ飛ばした状態でpythonから入れていく記事は見つけてなかったので、ね？
**今回はpyenvから入れていきます。**
何故かって？poetryはpipenvと違ってpythonそのものは入れてくれないっぽいからです。

# poetry is 何？
pipenvっぽい何か。
pipenvのエラーやlockが遅すぎる事にイラッときてたので、poetryには興味あったんです。
lock関連が、いい感じなpipenv風のアレですね。

# ubuntuにpythonを入れよう
まずは、インストールのために

- python3
- git
- curl

を入れます。

```sh
sudo apt install python3 git curl
```

# ipythonとか動くようにしておく
このままpythonを入れるとipythonが動かないです。
なので、事前にsqlite3を入れます。
もしかすると、libsqlite3-devだけで良かったかも…

```sh
sudo apt install sqlite libsqlite3-dev
```

# 実際に使うpythonを入れよう

上記で入れたpythonは~~世を忍ぶ仮の~~systemのpythonなのであまり使わないです。
pipenvと違ってpython自体を入れてくれたりはしないです。
だから、pyenvを入れておきます。

```sh
git clone https://github.com/pyenv/pyenv.git ~/.pyenv
echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.bash_profile
echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.bash_profile
echo 'eval "$(pyenv init -)"' >> ~/.bash_profile
```

二行目以降でpyenvコマンドが使えるようになります。

では、とりあえず、pythonを入れましょう。
shellを再起動して下記でいいです。
versionは適当に読み替えてください。

```sh
pyenv install 3.8.1
```

# 何故かpipができない場合
pip再インスコ

```sh
curl -kL https://bootstrap.pypa.io/get-pip.py | python
```

# poetryを入れよう
黙って下記

```sh
curl -sSL https://raw.githubusercontent.com/python-poetry/poetry/master/get-poetry.py | python
poetry completions bash > /etc/bash_completion.d/poetry.bash-completion
```

二行目でpoetryの補完がキマるようになるらしいっす。


# poetryを使う
## projectを作る

```sh
mkdir hoge
cd hoge
poetry init
```

なんか、色々むずかしいこと聞かれます。
pythonのバージョンとかは上記でインストールしている奴を指定しましょう。
以降、勝手にpoetryが切り替えてくれます。

なんだか小難しいので、もっと自動的にやってもらいましょう。
上記とほぼ同じ(微妙に違う)のが下記です。

```sh
poetry new hoge
```

簡単ですね。

ここで、謎のミスで一つ詰まりました。
何故か僕のpoetryプロジェクトの中にはじめから.venvディレクトリが入ってて、
インストールが失敗しました。試行錯誤中に生じたらしい。変なゴミは無い方がいいですね。

## poetryプロジェクトを使う
pipenvとだいぶ違う感じですね。
pipenvが全部管理するのと違って、pythonのインストール自体はpyenvにやってもらって、
poetryがライブラリやインストール済みのpythonの切り替えをやってくれる感じ。

pipenvのinstallに当たるのはaddです。
runとかshellはそのままです。

```sh
poetry add ipython
poetry run ipython
```

こんな感じ。

# 感想
pipenvに比べて圧倒的にスムーズにlockが遂行されて、好感を持ちました。
僕は使おうと思います。