OmniAICreator/Qiita-1.07M huggingface dataset:
VSCode　デバッグの設定等で使用する定義済み変数のリスト

# 変数リファレンス

Visual Studio Codeは、デバッグおよびタスク構成ファイルの変数置換と、いくつかの選択設定をサポートしています。
変数置換は、$ {variableName}構文を使用して、launch.jsonファイルとtasks.jsonファイルのキー文字列と値文字列内でサポートされています。

## 定義済み変数のリスト

変数名|説明
---|---
${workspaceFolder} | the path of the folder opened in VS Code
${workspaceFolderBasename} | the name of the folder opened in VS Code without any slashes (/)
${file} | the current opened file
${relativeFile} | the current opened file relative to workspaceFolder
${relativeFileDirname} | the current opened file's dirname relative to workspaceFolder
${fileBasename} | the current opened file's basename
${fileBasenameNoExtension} | the current opened file's basename with no file extension
${fileDirname} | the current opened file's dirname
${fileExtname} | the current opened file's extension
${cwd} | the task runner's current working directory on startup
${lineNumber} | the current selected line number in the active file
${selectedText} | the current selected text in the active file
${execPath} | the path to the running VS Code executable
${defaultBuildTask} | the name of the default build task

## 例

変数名|例
---|---
${workspaceFolder} | /home/your-username/your-project
${workspaceFolderBasename} | your-project
${file} | /home/your-username/your-project/folder/file.ext
${relativeFile} | folder/file.ext
${relativeFileDirname} | folder
${fileBasename} | file.ext
${fileBasenameNoExtension} | file
${fileDirname} | /home/your-username/your-project/folder
${fileExtname} | .ext
${lineNumber} | line number of the cursor
${selectedText} | text selected in your code editor
${execPath} | location of Code.exe

## 参考

[Visual Studio Code Variables Reference](https://code.visualstudio.com/docs/editor/variables-reference)
開始点、終了点を指定してラインを分割する

[指定した緯度経度から最も距離の短い線分上の緯度経度を返す](https://qiita.com/amay077/items/af5d375bf1b60a9da4af) では、「ライン上の点」を描画しましたが、マウス座標に最も近い「ライン上のライン」を描くにはどうしたらよいでしょうか。

こんなやつです。

![cap.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8227/7e72f41b-d8a6-62e3-d345-42ebc9b13957.gif)

最も距離の短い線分上の座標を求めて、その点でラインを分割する？
いえ turf.js なら ``lineSlice`` で一撃です。

- [Draw Line on LineString - JSFiddle - Code Playground](https://jsfiddle.net/amay077/p8s6zn14/)

```javascript
const routeSource = {
  'type': 'geojson',
  'data': {
    'type': 'Feature',
    'properties': {},
    'geometry': {
      'type': 'LineString',
      'coordinates': [
        [-122.48369693756104, 37.83381888486939],
        [-122.48356819152832, 37.82954808664175],
        [-122.48751640319824, 37.83168351665737],
        [-122.49223709106445, 37.83337825839438],
        [-122.49378204345702, 37.83368330777276]
      ]
    }
  }
};

const lineFeature = {
  type: 'FeatureCollection',
  features: [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type":"LineString",
        "coordinates": []
      }
    }
  ]
};

const map = new mapboxgl.Map({
  container: 'map',
  center: [-122.486052, 37.830348],
  zoom: 15,
  style: {
    version: 8,
    sources: {
      OSM: {
        type: "raster",
        tiles: [
          "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
        ],
        tileSize: 256,
        attribution:
        "OpenStreetMap",
      },
    },
    layers: [{
      id: "BASEMAP",
      type: "raster",
      source: "OSM",
      minzoom: 0,
      maxzoom: 18,
    }],
  },      
});

map.once('load', () => {

  map.addSource('route', routeSource);
  
  map.addLayer({
    'id': 'route',
    'type': 'line',
    'source': 'route',
    'layout': {
      'line-join': 'round',
      'line-cap': 'round'
    },
    'paint': {
      'line-color': '#888',
      'line-width': 8
    }
  });


  map.addSource('lineOnLine', {
    'type': 'geojson',
    'data': lineFeature
  });
  lineSource = map.getSource('lineOnLine');
  
  map.addLayer({
    'id': 'lineOnLine',
    'type': 'line',
    'source': 'lineOnLine',
    'layout': {
      'line-join': 'round',
      'line-cap': 'round'
    },
    'paint': {
      'line-color': 'red',
      'line-width': 12
    }
  });
  
  map.on('mousemove', e => {
  
    const start = routeSource.data.geometry.coordinates[0];
    const end = e.lngLat;
    const slicedLine = turf.lineSlice([start[0], start[1]], end.toArray(), routeSource.data);
  
    lineSource.setData(slicedLine);
  });

});
```

使い方は ``turf.lineSlice(開始座標, 終了座標, ライン)`` です。
開始座標, 終了座標 はライン上の点である必要はなく、離れた点を指定すると「最も近いライン上の点」が使用されます。
この例では、開始座標はラインの始点に固定し、終了座標をマウス位置の緯度経度とすることで、マウスに追従してラインが伸び縮みさせています。

## 参考

- [lineSlice - Turf.js | Advanced geospatial analysis](https://turfjs.org/docs/#lineSlice)
Google Analytics4でカスタムレポートは何処に行った！？新たな機能「テンプレートギャラリー」

## Google Analytics4でカスタムレポートが消えてしまった！？！？
2020年の10月末にリリースされたGoogle Analytics4とても凄い機能です。有料版のみだったBigQuery連携や、AIでのコンバージョン予測といった物が無料で使えちゃう！これは使うっきゃない！

とは言え、そんな物はなかなか活用予定はない！BigQuery難しすぎる(個人的には大好物です)！?

とりあえず、今までどおり、ちょっと手の混み合ったクロス集計等が必要な時は、カスタムレポートをガリガリ作りたいですよね？

そんな皆さんに悲報、Google Analytics4ではカスタムレポートが消えてしまいました。
そこで、カスタムレポートに変わる「分析→テンプレートギャラリー」を使ってみました。

## テンプレートギャラリーの場所

サイドバーのココをクリックしてみて下さい。
![Screenshot from 2020-12-02 17-17-33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293892/7253847a-229b-e144-f3e8-badc4df3ac45.png)


## 今までのエクスプローラーやフラットテーブルに該当しそうなテンプレート

**2020年12月時点で、エクスプローラーのレポートテンプレートはありません。**フラットテーブルならほぼ同じものが作成できます。
全く同じものは作れませんが、複数のディメンションでクロスして集計するようなケースはテンプレートの**「探索」**を使って可能です。

![Screenshot from 2020-12-02 17-20-20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293892/96691a42-6e9f-9843-16ef-12838b947318.png)

## とりあえず作ってみる！

今までのフラットテーブル等と違い、縦軸と横軸の両方にディメンションを指定できる、エクセルのピボット的な直感的なクロス集計が可能に成りました。
![Screenshot from 2020-12-02 17-27-45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293892/64446f26-76be-c8ae-77ee-cdd98220e21c.png)

例えば、ページ階層(今までで言うURLに該当と思われる)とデバイスカテゴリでクロスして利用ユーザー(今までで言うユーザーに該当)を見ると、こんなレポートが出てきます。
![Screenshot from 2020-12-02 19-04-44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293892/95101e6e-2485-ef86-33ff-27a89f3f0996.png)

もちろん、セグメントの重ね合わせも可能です。
![Screenshot from 2020-12-02 19-49-25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293892/fe3547d2-ef29-1286-05c2-6d0c4e49a053.png)
とりあえずPVが2以上のセッションのフィルタを作ってみる。


## 使えるディメンションも指標も少ない？

デフォルトだとたったコレだけ。え？しょぼくなった？と思った貴方、安心して下さい。**＋ボタンを押すことで追加出来ます**。が、「スクリーン」系のアプリだけでWebには対応していないディメンションや指標等も数多く含まれており、まだまだ整理やドキュメントが不十分なのかな、という印象を受けます。今後のアップデートに期待。
![Screenshot from 2020-12-02 19-47-25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293892/fbf91780-5950-1281-2fdc-95c79d2c002d.png)

## 指標からPV、ページ別訪問数が消えている！？

さて、ココで気がついた方、指標からページビュー数が消えています。更にページ別訪問数も消えてしまっています。
いろいろ調べた結果、ページ別訪問数を出す方法は私にはわかりませんでした。偉い人教えてくれると助かります。

PVを見たい場合は、指標にイベント数、フィルタに「イベント名　次と完全一致　page_view」を追加することで擬似的に見ることが出来ます。
もっと良い方法があればコメント下さい。
![Screenshot from 2020-12-02 17-28-08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293892/0fe6647d-b5e2-b56d-c95b-d446dae408bd.png)


## Google Analytics4を使ってみて
ユニバーサルアナリティクスから大きな思想の変更が有り、戸惑う人も多いと思います。実際私も戸惑っています。確かに昨今、JSフレームワークやライブラリが充実したことにより、Webアプリケーションがリッチになり、ページビュー単位で物事を見る様な時代ではなくなってきました。
しかし、実際の所、そんなリッチなWebアプリケーションをガッツリ解析し、PDCAを回すような事を出来るのは、数多のWebサイトでもほんのひと握りだと思います。WordpressでBlog運営や自社ページを運営している側からすれば、クリックとかイベントの数とか割とどうでもよく、どの記事がどれだけPVやUUがあったか先ずは知りたいわけです。エンゲージメントの時間も大事ですが、1セッションで何ページ位を回遊してくれているか知りたかったりします。

なので、せめて指標としてのPV(event名がpage_viewとなるもの)を独自指標として出して欲しいなと思った次第でした。

ページURLやPVみたいに、ディメンションの名前や配置がUniversal Analytics時代から変わっているものもあるので、暇を見つけてまとめてみようと思います。
スクリプトでOffice365の二段階ログインを自動化してみた

## 背景
リモート制度に切り替えに伴って Microsoft Teams のシフト機能を使うようになりました。
が、記録するのは面倒くさく、忘れた場合も多かったです。
そこで、スクリプトで自動化してみました。

## これで実現します！

### `pass`
`pass` というコマンドを使います。
`pass` は、コマンドラインベースの[パスワードマネージャー](https://www.passwordstore.org/)。
UNIX 哲学に従え、シンプルかつ拡張しやすいアプリです。

### `pass-otp`
`pass` はただパスワードを保存するアプリなので、TOTP（ログインする際に必要な6桁数字）を生成する機能がついていません。
そこで、`pass-otp` という[拡張機能](https://github.com/tadfisher/pass-otp)を使います。

### GnuPG

`pass`がパスワードデータを暗号化するために使う[プログラム](https://gnupg.org/)です。
SSHの秘密鍵の似ていて、秘密鍵と公開鍵があります。

### Puppeteer

Node.js ベースのブラウザ操作を自動化するライブラリー。
ただの好みで、ブラウザ操作とシェルコマンドを実行可能のであれば他の言語のブラウザ自動化ライブラリーを使っても大丈夫です。

## 手順

### 1. `pass`、`pass-otp`、`gpupg` をインストール・設定

MacOS の場合は、`homebrew` を使うと便利です。

```bash
$ brew install pass pass-otp gnupg
```

### 2. GnuPG 鍵を作る

```bash
$ gpg --gen-key
```

本名、メールアドレス、パスフレーズを入力します。

### 3. `pass` のストアを初期化

```bash
$ pass init "[指定したメールアドレス]"
```

### 4. TOTP の QR コードを取得

MSの2段階認証設定[画面](https://mysignins.microsoft.com/security-info)からAuthenticatorアプリ用のQRコードを取得します。このQRコードに `otpauth://` というURIが入っているので、`zbar`というコマンドラインアプリでQRから解読できます。

```bash
$ zbarimg -q -—raw [path/to/qrcode.png] 
```


### 5. TOTP 情報を `pass` に登録

```bash
$ pass otp insert [任意の名前]
Enter otpauth:// for [任意の名前]:
Retype otpauth:// for [任意の名前]:
```

### 6. TOTP を動いているか確認

MSの設定画面に戻り、`pass-otp` で生成した6桁コードを入力。

```bash
$ pass otp [登録した名前]
XXXXXX
```

パスフレーズを聞かれた場合はGnuPG鍵のパスフレーズを入力すれば良いです。

### 7. スクリプトで利用

スクリプト言語のシェルコマンド実行機能を使い、OTPコードを取得してブラウザに入力します。Node.js + Puppeteer の場合はこんな感じです。

```js
// TOTPコードを取得
import util from ‘util’
import childProcess from ‘child_process’

const exec   = util.promisify(childProcess.exec)
const result = await exec(‘pass otp [登録した名前]’)
const totp   = result.stdout

// ブラウザフォームに入力
import puppeteer from ‘puppeteer’

const browser = await puppeteer.launch()
const page    = await browser.newPage()
// URL にアクセス、メールアドレス・パスワード入力を省略
const input = await page.$(‘input[name=otc]’)
await input.type(totp)
await input.press(‘Enter’)
```

### GnuPG鍵のパスフレーズが毎回聞かれてうざい！

と思っている方も思うので、MacOSの場合は [GPGTools](https://gpgtools.org) でパスフレーズをMacOSキーチェンに保存され、解消できます。

## Microsoft Teams 自動出勤・退勤スクリプト

これをベースにしたスクリプトを作りました。
興味があれば[Githubリポ](https://github.com/adwinying/autoclock)を見てみてください！
[CSS] <a>タグをボタンのように表示するには（インラインブロック要素の指定）

#ブロックレベル要素とインライン要素

ブロックレベル要素とは文字通り、ブロックであることを意味しています。
つまり、高さや幅などを持っています。（高さや幅などを指定することができます。）
また、ブロックレベル要素の性質をもったタグは改行されます。

インライン要素とは、その文章の中の一部分という意味です。インライン要素の性質をもったタグは改行されません。

（ちなみに、HTML5ではブロックレベル要素、インライン要素という考え方はなくなっているそうです。）

###\<a>タグをボタンのように表示

HTML5でブロックレベル要素、インライン要素という考え方はなくなっていますが、それぞれのタグは、どちらかの性質を持っています。

\<a>タグはインライン要素の性質を持っているため、高さや幅などを指定できません。
高さや幅などを指定するにはCSSでインラインブロック要素として指定します。

（display: inline-block; と指定します。）

以下の例では、paddingを指定しています。

```html:index.html
<p>ボタン1とボタン2</p>
<a href="#">ボタン1</a>
<a href="#">ボタン2</a>
<p>ボタン3とボタン4</p>
<a href="#" class="btn">ボタン3</a>
<a href="#" class="btn">ボタン4</a>
<p>ボタン5とボタン6</p>
<a href="#" class="btn">ボタン5</a>
<a href="#" class="btn">ボタン6</a>
```

```css:stylesheet.css
a {
  color: white;
  background-color: red;
  text-decoration: none;
}
.btn {
  padding: 10px 25px;
  color: white;
  background-color: red;
  display: inline-block;
}
```

この例は、以下のように表示されます。
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/897250/eec66dee-634f-0358-0045-c9c28280d912.png">
VSCode　言語ごとの設定するための識別子の一覧

# 言語ごとの設定するための識別子の一覧

見つけるのに時間がかかったので、こちらに一覧をメモしておきます。

Language | Identifier
---|---
ABAP | abap
Windows Bat | bat
BibTeX | bibtex
Clojure | clojure
Coffeescript | coffeescript
C | c
C++ | cpp
C# | csharp
CSS | css
Diff | diff
Dockerfile | dockerfile
F# | fsharp
Git | git-commit and git-rebase
Go | go
Groovy | groovy
Handlebars | handlebars
Haml | haml
HTML | html
Ini | ini
Java | java
JavaScript | javascript
JavaScript React | javascriptreact, jsx
JSON | json
JSON with Comments | jsonc
LaTeX | latex
Less | less
Lua | lua
Makefile | makefile
Markdown | markdown
Objective-C | objective-c
Objective-C++ | objective-cpp
Perl | perl and perl6
PHP | php
Plain Text | plaintext
PowerShell | powershell
Pug | jade, pug
Python | python
R | r
Razor (cshtml) | razor
Ruby | ruby
Rust | rust
SCSS | scss (syntax using curly brackets), sass (indented syntax)
ShaderLab | shaderlab
Shell Script (Bash) | shellscript
Slim | slim
SQL | sql
Stylus | stylus
Swift | swift
TypeScript | typescript
TypeScript React | typescriptreact
TeX | tex
Visual Basic | vb
Vue | vue
Vue HTML | vue-html
XML | xml
XSL | xsl
YAML | yaml

## 参考

[Visual Studio Code language identifiers](https://code.visualstudio.com/docs/languages/identifiers)
[BUG] Segmentation fault at 0x0000000000000b88

# エラー文

awsでDBをマイグレーションしようとしたらエラーが発生しました。
**[BUG] Segmentation**なるものが発生していて、セグフォと呼ばれているそうです。

```console
/usr/local/bundle/ruby/2.6.0/gems/activerecord-5.2.3/lib/active_record/connection_adapters/mysql/database_statements.rb:19: [BUG] Segmentation fault at 0x0000000000000b88
```

# 原因
調べてみたら、MySQLが古かったようでした！

# 対策
MySQLを5.2にアップデートします！

```ruby
gem "mysql2", "~> 0.5.2"
```

# 参考
https://kanamaru.hateblo.jp/entry/2019/05/18/222232
railsで特定のマイグレーションファイルをロールバックする

migrationファイルをロールバックしたいが、ただロールバックするだけでは一つ前の物しか適用されないため、IDを指定して任意のファイルをロールバックする方法。あくまで備忘録です。ご指摘などあればご鞭撻のほどよろしくお願いします。

まずは、マイグレーションファイルの状態を確認する。

```
% bundle exec rake db:migrate:status
```
`db:migration:status`で状態を確認できる。

```
Status   Migration ID    Migration Name
--------------------------------------------------
   up     20201120034343  Devise create users
   up     20201343220111  Create snscredentials
   up     20201699490534  Create houses
   up     20201202100051  Create addresses
```

upはファイルがマイグレーションされている状態。
これをdownにすることで再編集ができる。

```
bundle exec rake db:migrate:down VERSION='マイグレーショID'
```

上記のaddressesファイルでやってみる。

```
bundle exec rake db:migrate:down VERSION=20201202100051
```

再度`bundle exec rake db:migration:status`で確認

```
Status   Migration ID    Migration Name
--------------------------------------------------
   up     20201120034232  Devise create users
   up     20201120070111  Create sns credentials
   up     20201201090534  Create houses
  down    20201202100051  Create addresses
```

downになったので編集して

```
bundle exec rake db:migrate:up VERSION=20201202100051
```

再度migrateして完了。
C、C++学習メモ 1_#include

#includeに関して


・#の付いた予約語はpre-processor directive　(プリプロセサ指令)
・includeは「includeが書かれた場所にまずはそいつを読みこめ」
・Cのコンパイルは2段階。
まず#ついたプロプロセサ指令を全て処理→プリプロセサによる処理が済んだソースコードをコンパイル。
・Cは関数を予め宣言しなければならない。
・Cの初期状態では関数が定義されていないので関数が定義されたファイルstdio.hを読み込む必要がある(標準Cライブラリ)
・ライブラリはコンパイラにある。
・stdioは「standard input/output（標準入出力）」の略
モバイル新OSリリース前後の試験を考察する （Android編）

iOS、AndroidのOSはほぼ毎年、メジャーバージョンアップが行われる。2020年を振り返るとAndroid11が9月8日に、iOS14が9月16日（日本時間9月17日）にリリースされたのだが、モバイルアプリ開発に携わっている者として、新OSへの対応は非常に頭の痛い課題である。
公開中のアプリの画面のレイアウトがおかしくなる、特定の機能が使えなくなる、最悪のケースではアプリが全く起動しない…といった事態も起こり得るため、事前の動作検証は必要不可欠である。

iOS14については以下の記事で書かせていただいたので、こちらはAndroid11に関して。
https://qiita.com/wataru_kojima/items/78eb906a8689d0283511

## AndroidのOSアップデートに関するユーザー動向

以下はとあるアプリのAndroidのプラットフォームごとのユーザー比率である。
（GooglePlayConsole インストール済みユーザー を集計）

![Android11share.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531375/e46a020e-cfc0-2101-ba7f-02df8552ad14.png)

- Android11公開の翌日は0.2%
- Android11公開の1週間後で0.4%
- Android11公開の1ヶ月後で2.4%
- 11月末時点では3.6%

となっていた。仮に10万ユーザーが利用するアプリだとすると、翌日で200人、1週間後に400人。これくらいの人数であったら、万が一致命的な不具合が出てしまっても、なんとか謝れば許してくれそうな感がある。とはいえ、1ヶ月後だと2400人…さすがにこれくらいの人数になってくると、無視はできなさそうだ。

iOS14.0の割合が、公開の1週間後には20.0%だったことと比較すると、だいぶ対応はゆっくりでも良さそうである。しかし、なぜiOSと比較すると、これほどまでにゆっくりした増加率なのか？ それは、Android11が公開されたからと言って、全てのAndroidユーザーがAndroid11に移行できるわけではないからである。

実のところ、2020年11月30日時点でAndroid11をインストールできるのは、開発者向けベータ版を除くとGoogle製の端末しか存在しない。ちなみに、このアプリの11月30日時点のGoogle製端末のシェア率を調べたところ 4.23% であった。これを考慮するとAndroid11に移行できるユーザーのうち85.7%はAndroid11に移行していたことになる。

11月末時点でiOS14ユーザーが86.8%であったことを踏まえると、iOSもAndroidも、バージョンアップが可能なユーザーの移行傾向は、以下のようにほぼ同様であることがわかる。

- Android11公開の翌日は0.2%　→　移行可能ユーザーのうち4.7%がバージョンアップ完了
- Android11公開の1週間後で0.4%　→　移行可能ユーザーのうち9.5%がバージョンアップ完了
- Android11公開の1ヶ月後で2.4%　→　移行可能ユーザーのうち57.1%がバージョンアップ完了
- 11月末時点では3.6% →　移行可能ユーザーのうち85.7%がバージョンアップ完了

## いつテストをすべきか？

Android11の正式リリース版を待ってテストを実施する…という方針だと、さすがに後手に回ってしまっている感は否めないので、やはりベータ版でアタリをつけることになるだろう。
Android11ベータ版のファイナル（ベータ3）の公開は2020年8月6日…すなわち正式版の約1ヶ月前だった。また、このベータ3の公開時には <a href="https://android-developers.googleblog.com/2020/08/android-11-final-beta-update.html">Android 11 final Beta update, official release coming soon!</a> とGoogleからのアナウンスもあったので、これでテストをすればだいたいOKなのでは？ という判断もできた。

## これまでのAndroidアップデートを振り返ると・・・

しかし、過去のAndroid beta版 (Final) の配信と、正式版のリリース日は以下の通りであった。

- Android11　Final 2019/8/6　→　正式版 2020/9/8（約1ヶ月）
- Android10　Final 2019/8/7　→　正式版 2019/9/3（約1ヶ月）
- Android9　Final 2018/7/25　→　正式版 2018/8/6（12日後…!?）
- Android8　Final 2017/7/24　→　正式版 2017/8/21（約1ヶ月）
- Android7　Final 2016/7/18　→　正式版 2016/8/23（約1ヶ月）

概ね1ヶ月の猶予があるのだが、Android9は正式版リリースまでの期間がかなり短かった。では、どうするのが最善か？ こればかりはなんとも言えない。Finalだというアナウンスを待つべきか、先行して検証すべきか…アプリの規模や、万が一不具合が出てしまった場合の影響度と検証にかかる労力やコストを総合的に考えて判断するしかなさそうだ。

Android12ではどうなるかは未知数・・・1ヶ月程度の猶予があることを祈りたいが、油断もできなさそうである。

## Android11での不具合との戦いはこれからだ！

Google製のAndroid11は既にリリースされているが、他メーカー製の端末では、ようやく2020年12月からAndroid11へのアップデートが提供され始める。Android端末では「機種依存」「メーカー依存」といった不具合も出ることがある。Google製のAndroid11で動いたからと言って、他のメーカーのAndroid11端末で正常動作する保証はない。そう・・・Android11での不具合との戦いはこれからなのだ！

平和に2020年が終わるよう・・・ただただ、祈るばかりである。
JS 関数　前編　(JSアウトプット)

##あいさつ
初めての人は初めまして！知っている人はこんにちは！
中学生バックエンドPGのAtieです！
今回はJSの「関数」について学習してきたのでアウトプットしていきます！

##関数とは？
ではまず関数とは何か？

関数とは料理を手伝ってくれる”子供”と考えてください
例えば長男は具材を切るのが得意で次男は食材を洗うのが得意三男は食材を取り出すのが得意
などとイメージしてください

##関数の定義
関数を使うときは**定義**する必要があります

定義の方法

```main.js
function 関数名(仮引数1,仮引数2) {
    //処理
    return returnするもの　//returnは書かなくてもいい
};
```

関数名は変数と同じルールです
「引数」というのは”具材”です引数は1個でも2個でも3個でもいいです
returnとは戻り値を返すときに使います
引数という”具材”をいれると”戻り値”という結果が返ってきます

例えばこのような関数があったとします

```mian.js
function add($add1,$add2) {
    return $add1 + $add2;
};
```
この関数は二つの値を引数として受け取り戻り値にこの二つの引数を足した値をいれています

##今までの学習とのつながり

**メソッド　＝　関数**

オブジェクトで学んだメソッド
メソッドも処理をまとめたものですよね？
実はメソッドと関数は**同じ**なんです！
名前は違いますが一緒と考えていいです

たとえばalertというメソッド
これはalert関数と言い換えることもできます

なのでメソッドと関数は同じものと考えていいです

###メソッドの短縮記法
メソッドは短縮して書くことができます

短縮しないで書くと

```main.js
const obj = {
    call: function () {
        //処理
    }
};
```
このように書きます
しかし短縮記法を使うことで以下のようにすっきり書くことができます

```main.js
const obj = {
    call() {
        //処理
    }
};
```
このようにすっきりと書くことができメソッドとプロパティの違いが分かりやすくなりコードも読みやすくなります

##関数を使う
関数を使って処理をさせた後戻り値を変数に保存することやif分などの条件にも使えます

```main.js
const add_numbeer = add(5,9);

if (add(5,9,) <= 14) {
    console.log(True);
};
```
このように書くことができます
JSは関数も「オブジェクト」なので関数を条件にしたりといろいろな使い方ができます
もちろん関数の引数にすることもできます

```main.js
console.log(add(5,9));
```

##Twitterで実践的な関数を書く
ではTwitterの機能のような実践向けの関数を書いていきましょう

Twitterには160文字しかツイートできませんよね？
なので文章が160文字以上かどうかを調べる関数を作ります

まずは引数に分を受け取って戻り値に160文字未満だったらTrue、160よりも上だったらFalseを返す関数です

```check.js
function isTweetable(text) {
    return text.length <= 1;
};
```
実験のために160文字ではなく1文字にしています
では動かしてみましょう

```check.js
const text = "hello";

function isTweetAble(text) {
    return text.length <= 1;
};

console.log(isTwettAble(text));
```


```shell
False //結果
```
このようになりました！
正常に動いていますね！！

##さいごに
最後まで読んでいただきありがとうございました！
次回は「JS関数　後編」です
ではまた！次回で！
Twitterもしています→[AtieのTwitter](https://twitter.com/Atie_BackendPG)

##学習、参考教材
[【JavaScript入門 #6】初心者がつまづきがちな「関数」を分かりやすく解説しました【ヤフー出身エンジニアの入門プログラミング講座】](https://www.youtube.com/watch?v=FDqbbLCT4yM&list=PLwM1-TnN_NN7-zdRV8YsGUB82VVhfYiWW&index=6)
会社が大規模だと逆に改善し易かったりする世界線の車窓から

# 大規模ですよねー(ですよねー)

　世界の連結従業員数**約14万人**くらいらしいです。
で、社内の特定認証部分(一部？)が以下プレスの通りActiveDirectory(実体はAzure AD？詳細は知らん)で動いてます。

[デジタルグローバルコミュニケーションサービス](https://www.fujitsu.com/jp/services/application-services/application-development-integration/global-communication/digital-global-communication-service/)
[大規模向けコミュニケーション基盤の導入技術](https://www.fujitsu.com/jp/group/fst/imagesgig5/fst_tech_collaborative_1.pdf)

　これにある程度の社員情報が格納されているようで認証だけに使うのでは非常に勿体ない基盤です。**認可の観点でこんなの作れそうだよ！**と改善提案のモックを組んだ時のアウトプットをお披露目したいと思います。

#### 肝心のソースコード載せはLDAPのスキーマ機密でOKでないだろーなー、残念。。

　LDAP利用の最初は単に認証に使ってました。Goで書くとするとこんなかんじ。

```
  BASEDN := "dc=【秘密】,dc=【秘密】,dc=【秘密】"
  tlsConfig := &tls.Config{InsecureSkipVerify: true}
  l, err := ldap.DialTLS("tcp", "【ADサーバーの情報なので見せられないよ！】", tlsConfig)
  if err != nil {
    fmt.Println(err)
    return "error","connection error","",false
  }
  
  err = l.Bind(【ADユーザー名】, 【ADの認証方法】)
  if err != nil {
    fmt.Println(err)
    return "error","authentication error","",false
  }
```

　その後LDAPなんで認証後はディレクトリ検索拾えることがわかりました**（当たり前だ！）**

```
  FILTERA := "(SAMAccountName=" + 【ユーザー名】 + ")"
  searchRequestMyself := ldap.NewSearchRequest(
      BASEDN,
      ldap.ScopeWholeSubtree,
      ldap.NeverDerefAliases,
      0,
      0,
      false,
      FILTERA,
      []string{"【秘密】","【秘密】", "【秘密】","【秘密】","【秘密】"},
      nil,
  )

  sr, err := l.Search(searchRequestMyself)
  if err != nil {
    fmt.Println(err)
    return "error","search error","",false
  }
```

　というわけでちょっとした要アカウントツール作るにも**思考停止してAD任せ**で良いんです！

以下、例。
#### 社員情報の統制できてるからこそ、これが出来るんですよ！

## ①工数入力
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189193/1aec627a-1e60-0992-28d5-1c006e8789d6.png)
　工数管理面倒ですよねーあと手入力で間違えたり・・ADから引っ張ってくるとアカウント情報管理が要らないのでべんりー

## ②製番管理
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189193/8a2a96a1-5a59-7720-8ce8-beae338ab020.png)
 工数がどうにかなっても今度は製番だ！（製番って富士通用語だったりする？）管理職がメンテするけどこれも手作業は・・もちLDAPでロール（役職）管理できるので簡単に可視化だね！

## ③承認フロー
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189193/bea3a7cb-1a6d-603e-63f9-65e55179f2c8.png)
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189193/147e0933-429a-6b36-7ddd-7f8547d07942.png)
　①，②をミックスしてTrelloぽい承認フローを考えてみた。ドラッグで承認できるし差戻もとってもUX！ロールで操作のバリデーション出来るから誤承認も無いね！

# みたいな
たしかな統制がとれているからこそ、ドッグフーディング的に
無理くり内製して身の回りを改善していけるんだと思います。
**けっこうつよいぞ！富士通基盤！！**
真理値表から論理式を求める。

# 概要

sympyで真理値表から論理式を求める。


# 全加算器の真理値表

0　キャリー入力
1　入力
2　入力
7　出力
6　キャリー

![image](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/c87c1b08-602c-ccde-f8a6-810c542a891e.png)

# サンプルコード


```
import sympy as sym


print (sym.SOPform(['a', 'b', 'c'], [[0, 1, 1], [1, 0, 1], [1, 1, 0], [1, 1, 1]]))
print (sym.SOPform(['a', 'b', 'c'], [[0, 0, 1], [0, 1, 0], [1, 0, 0], [1, 1, 1]]))

print (sym.POSform(['a', 'b', 'c'], [[0, 1, 1], [1, 0, 1], [1, 1, 0], [1, 1, 1]]))
print (sym.POSform(['a', 'b', 'c'], [[0, 0, 1], [0, 1, 0], [1, 0, 0], [1, 1, 1]]))

```

# 実行結果


```

Or(And(a, b), And(a, c), And(b, c))
Or(And(Not(a), Not(b), c), And(Not(a), Not(c), b), And(Not(b), Not(c), a), And(a, b, c))
And(Or(a, b), Or(a, c), Or(b, c))
And(Or(Not(a), Not(b), c), Or(Not(a), Not(c), b), Or(Not(b), Not(c), a), Or(a, b, c))


```

# 成果物

https://paiza.io/projects/Z9VHOU8PZlTlJh8VPpLDsw


以上。
LngLatBounds は正しく「南西」→「北東」の順に渡しましょう

Mapbox で「地図の範囲」を示すのに ``LngLatBounds`` というクラスがあります。

- [Geography and geometry | Mapbox GL JS | Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/geography/#lnglatbounds)

このクラスには「指定した緯度経度が含まれるように範囲を拡張する」``extend(lnglat)`` というメソッドがあり、検索結果のPOI群がちょうど収まる範囲を計算するのに大変便利です。

が、この extend が機能しない場合に遭遇したので気を付けましょうという記事です。

正しい結果を返すのは以下のコードです。

```javascript
const bounds1 = new LngLatBounds([130, 35], [132, 37]);
bounds1.extend([133, 38]);
console.log(bounds1.toArray()); // OK - 130, 35, 133, 38
```

南西:[130, 35] ～ 北東[132, 37] の範囲があり、位置[133, 38] を含むように拡張したら、南西:[130, 35] ～ 北東[133, 38] になる、という例です。

次に、正しく動作しない場合は次のコードです。

```javascript
const bounds2 = new LngLatBounds([132, 37], [130, 35]);
bounds2.extend([133, 38]);
console.log(bounds2.toArray()); // NG - 132, 37, 133, 38
```

このコードの不具合は、``new LngLatBounds()`` で 北東,南西 の順で緯度経度を渡してしまった事です。
LngLatBounds は指定された値の正規化は行わずそのまま使用してしまうため、[132, 37] が南西であると誤認したまま各機能が動いてしまいます。

## どうしてこうなった

この不具合に気づくのに小一時間かかったわけですが、そもそもこうなったのは、「データベースに格納されている値が (北東)-(南西) だった」のが原因でした。

そしてそのDBは PostgreSQL。
地図範囲を格納するのに box 型を使っていたのですが、この仕様は、

> 頂点は **右上の頂点を最初** に、左下の頂点をその後に格納するよう必要に応じて並べ替えられます。
> 
> via [幾何データ型 - PostgreSQL 10.5文書](https://www.postgresql.jp/document/10/html/datatype-geometric.html)

とのことで、上記の「南西:[130, 35] ～ 北東[132, 37]」は、DB には ``((132,37),(130,35))`` と格納されており、それをそのまま読み出して LngLatBounds にパースする処理で ((南西),(北東)) と勘違いしていました。

しかもこの仕様はご丁寧に INSERT する値が ``((130,35),(132,37))`` の場合は正規化(逆転)して ``((132,37),(130,35))`` を格納してくれちゃうのですね。

データベースとプログラミングとの境界付近では不具合が起きやすいので、特に注意する必要がありました。

## おまけ

この記事では 範囲の最小＝南西、最大＝北東 という前提（つまり北半球）で書きましたが、南半球では・・・あっ、緯度がマイナス(赤道が0)になるだけだからよいのか。
管理者機能の実装【Rails】

#はじめに

現在ポートフォリオ作成のため、補助金の記事検索・閲覧ができるアプリケーションの作成をしています。記事の投稿は全てのユーザーができるものではないため、今回、管理者ユーザーを設定することで閲覧するユーザーとの差別化を図りました。アウトプットのため本記事を投稿しています。

[【初心者向け】管理者ユーザーと管理者用controllerの追加方法[Ruby, Rails]](https://qiita.com/tanutanu/items/7ce8826615f1af605164)

今回は上記の記事を参考にさせていただきました。ありがとうございました。

環境：Rails 6.0.0

#1.前提
既にユーザーの管理機能はdeviseというGemを使用して、実装できていることを前提としております。

```ruby:Gemfile
gem 'devise'
```

#2.既に実装済みのUserテーブルへAdmin（管理者）を追加する

```ruby:ターミナル
rails g migration AddAdminToUsers
```

こちらのコマンドを実行すると、、

```ruby:○○○○○○○○○○_add_admin_to_user.rb
class AddAdminToUsers < ActiveRecord::Migration[6.0]
  def change
    add_column :users, :admin, :boolean, default: false
  end
end
```

マイグレーションファイルが生成されるため、usersテーブルにadminカラムをboolean型のdefault: falseで追加します。

※boolean型とはtrueまたはfalseのどちらかのデータが必ず入ることが決まっている型みたいです。閲覧ユーザーの方が多いのでdefaltをfalseにしました。。。

この状態で

```ruby:ターミナル
rails db:migrate
```

をすると、Userテーブルの中にadminカラムが追加されていました！！！

#3.管理者データの追加

続きまして、管理者となるユーザーのデータを入力しました。今回はseeds.rbを使用しました。

そもそもこれまで、db/seeds.rb←これは何に使うのだろうと思っていましたが、、

```ruby:db/seeds.rb
User.create!(
  first_name: '管理者',
  last_name: '太郎',
  first_name_kana: 'カンリシャ',
  last_name_kana: 'タロウ',
  email: 'admin@example.com',
  password: 'admin',
  password_confirmation: 'admin',
  state_id: 45,
  phone_number: '09012345678',
  birth_day: '2000-01-01',
  admin: true
)
```

このように記述して

```ruby:ターミナル
rails db:seed
```

を行うことで、勝手にデータベース内にデータが入力されていました！！新たな発見で嬉しかったです！！！（初心者ですいません・・・）

ちなみに、first_nameやphone_numberなどは新たに追加したカラムなので、ご自身で設定したユーザー登録に必要な情報を記述するといいと思います。

このように管理者権限を追加することで、current_user.admin?などのメソッドが使用できるみたいです。

私自身の実装では、current_user.admin?を使用して、管理者にしか表示させたくないview（記事投稿画面など、、）を他のユーザーには表示させないように実装したりと、重宝させていただきました。。。。

この後の実装についても、後々投稿したいと思います。

間違っている点などありましたら、ご指摘ください！！！
SwiftのサーバーサイドフレームワークVaporでのルーティング

## これは何？

SwiftのサーバーサイドフレームワークVaporのAPIのルーティング方法をまとめたものです。

## ルーティングをどこに記述をするのか

Vapor のプロジェクトを作成すると App 直下に `routes.swift` ファイルが自動で生成されているため、
ルーティングの設定はこちらに追記していく形になります。

## 書き方

ざっくり2種類の書き方があります。

```swift
func routes(_ app: Application) throws {
    app.get("foo") { req in
        return "foo"
    }
    app.on(.GET, "bar") { req in
        return "bar"
    }
}
```

`app.xxx` 形式では以下のメソッドが用意されています

- get
- post
- patch
- put
- delete

その他のHTTP Methodを使いたい場合は `on` を使う必要があります

```swift
app.on(.OPTIONS, "options") { req in
}
app.on(.HEAD, "head") { req in
}
```

### ネストしたURLの扱い

2種類の書き方があるので用途に合わせて使い分けて下さい

```swift

let hello = app.grouped("hello")
// GET /hello
hello.get { req in
}
// GET /hello/:name
hello.get(":name") { req in
    let name = req.parameters.get("name")!
}
```

```swift
app.group("hello") { hello in
    // GET /hello
    hello.get { req in
    }
    // GET /hello/:name
    hello.get(":name") { req in
        let name = req.parameters.get("name")!
    }
}
```

## パラメータの渡し方

### URL

URLのパスパラメータは `:xxx` 形式で渡すことができます

```swift
app.get("hello", ":name") { req -> String in
    let name = req.parameters.get("name")!
    return "Hello, \(name)!" // URL: /hello/example -> print: Hello, example!
}
```

クエリーパラメータの場合は以下のように渡すことができます

```swift
app.get("hello") { req -> String in
    let name = req.query["name"]!
    return "Hello, \(name)!"  // URL: /hello?name=example -> print: Hello, example!
}
```

### リクエストボディ

Vaporが用意した protocol の Content を使い中身を取得することができます

```swift
struct PostContent: Content {
    var name: String
}

app.post("hello") { req -> String in
    let content = try req.content.decode(PostContent.self)
    return "Hello, \(content.name)!"
}
```

```bash
curl -X POST -H "Content-Type: application/json" -d '{"name":"world"}' localhost:8080/hello
```

## 終わりに

Vaporのルーティング方法をまとめました
普段iOS開発でSwiftに馴染みのある人だったら理解しやすいと思うので、この記事で興味を持ったら使ってみてると良いと思います
ブログをTypeScriptで書き直してみた

M2のmarutakuです。今年もあっという間にアドベントカレンダーの時期になってしまいました。去年は優秀な同期・後輩たちの協力でなんとかアドベントカレンダーを完走することができたので、今年も頑張りたいと思います。

## 何をやったか
自分で[クソザコエンジニア奮闘記](https://marutaku.info)というブログを作っていました。
[![Image from Gyazo](https://i.gyazo.com/c98c47a77a88fb9de9e6b97f2c4e022a.png)](https://gyazo.com/c98c47a77a88fb9de9e6b97f2c4e022a)
技術的な話は[過去の自分の記事](https://marutaku.info/post/gatsbyjs-contentful-netlify)をみていただければある程度はわかってもらえると思います。静的サイトジェネレータにGatsby.jsを使用していたのですが、自分でコードを書く箇所は通常のJavaScriptでReactを書いている状態でした。　
これまで何も問題はなかったのですが、　漠然とTypeScriptで書き直したいなーとは思ってしました。そんな時に、TAをやっている授業内でTypeScriptを使用することがあったので、勉強を兼ねてこの機会にブログをTypeScriptで書き直すことにしました。

## TypeScriptのお勉強
自分はTypeScriptをほとんど触って来なかったので、まずはTypeScriptの勉強から始めることにしました。とりあえずはTypeScriptの公式サイトにある、[The TypeScript Handbook](https://www.typescriptlang.org/docs/handbook/intro.html)を一周しました。
Gatsby.jsはテンプレートなどをReactで書く必要があるので、[Reactのチュートリアル](https://ja.reactjs.org/tutorial/tutorial.html)をTypeScriptで書き直して勉強しました。

## 実際に書き出す
お勉強が終わったところで実際にコードを書き出して行きます。
Gatsby.jsにはスターターライブラリと呼ばれるテンプレートが存在しています。今までは[gatsby-starter-lumen](https://www.gatsbyjs.com/starters/alxshelepenok/gatsby-starter-lumen/)というスターターを使っっていたのですが、TypeScriptに対応していなかったので今回は[gatsby-starter-typescript-contentful](https://www.gatsbyjs.com/starters/wataruoguchi/gatsby-starter-typescript-contentful/)を使用しました。
Gatsby.jsの中ではデータをGraphQLを用いてデータを扱うのですが、 [gatsby-plugin-graphql-codegen](https://www.gatsbyjs.com/plugins/gatsby-plugin-graphql-codegen/)を用いることでTypeScriptのなかで使う型定義を自動生成することができます。自分は起動時に自動生成が実行されてほしいので、`npm start`で開発サーバを立ち上げる前にコマンドを実行するようにしました。

```json
// package.jsonのscripts一部
"start": " graphql-codegen --config codegen.yml && npm run develop"
```

## 終わりに
思ったより書くことがなかったので、これで終わりです。作ったブログにはいくつか問題はありますが、比較的簡単にTypeScriptに移行することができました。　まだまだ勉強中なので、間違っている箇所があれば教えていただきたいです。
roundcube

## 経緯

* [RainLoop](https://qiita.com/tukiyo3/items/39f65e9802a6041e36cb) を使ってみたが、受信トレイでメール一覧の取得ができず、そのたびにページャーの1,2,3,4をクリックする必要があり使えたものではなかったため、別のものを探すこととした。
* roundcube を使ってみたところ、特に問題なく動いた。

## 起動

* https://hub.docker.com/r/roundcube/roundcubemail


```sh:Apache版
docker run \
 -it --rm \
 -e ROUNDCUBEMAIL_DEFAULT_HOST=example.com \
 -e ROUNDCUBEMAIL_SMTP_SERVER=example.com \
 -e ROUNDCUBEMAIL_DB_TYPE=sqlite \
 -e ROUNDCUBEMAIL_UPLOAD_MAX_FILESIZE=50M \
 -p 8888:80 \
 roundcube/roundcubemail
```

* http://localhost:8888

にアクセスし、メールアカウントの`ユーザー名`、`パスワード`を入力しログイン。
Rails ユーザー認証方法

#はじめに
オリジナルアプリにユーザー認証機能を実装しました。忘れないように書き記します。

#目次
1.ユーザー認証(Basic認証)とは
2.コントローラーへの記述
3.環境変数の設定

#1.ユーザー認証とは
Webアプリケーションへのアクセスに対するパスワード設定のこと。一致したユーザーのみがアプリケーションを利用できる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703987/c3634006-9651-1102-4f6f-6aa4282c08e4.png)
 

2.コントローラーへの記述
コントローラーは最上位となるアプリケーションコントローラーに記述する。「username」及び「password」は環境変数で設定したものを読み込む。

```ruby:app/controllers/application_controller.rb
 before_action :basic_auth

  private

  def basic_auth
    authenticate_or_request_with_http_basic do |username, password|
      username == ENV["BASIC_AUTH_USER"] && password == ENV["BASIC_AUTH_PASSWORD"]
    end
  end
end
```

3.環境変数の設定
ターミナル上で環境変数を設定する。

```bash:ターミナル
vim ~/.zshrc
```
その後「i」を押し、インサートモードにして下記を書き込む。ここではusernameをadmin、パスワードを2222とした。

```bash:ターミナル
export BASIC_AUTH_USER='admin'
export BASIC_AUTH_PASSWORD='2222'
# 記述を追加したら、escキーを押してインサートモードを抜け、 「:wq」と入力して保存して終了する
```
その後下記コマンドを実行し、定義した環境変数を有効にする。

```bash:ターミナル
% source ~/.zshrc
```

以上
ターミナルでファイルの変更部分を確認する方法について

<h3>今回はターミナルでファイルの変更部分を確認する方法について書いていきます。</h3>
<h4>indexやcssの記述を付け加えたり、変更した後にターミナルでgit statusコマンドを入力すると、変更したファイル名がターミナルに出力されます。</h4>

<h4>これを用いると自分がどのファイルを変更したのかがわかるので、便利です。</h4>
Elasticsearch > Filebeat > 標準のModuleにフィールドを追加する方法



# apacheモジュールの場合

`module/apache/access/ingest/pipeline.yml`を編集する


![スクリーンショット 2020-12-02 19.03.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49910/360ea48b-dedc-47a4-39b2-63db9c4e4f63.png "スクリーンショット 2020-12-02 19.03.25.png")


## 例


```:pipeline.yml

- set:
    field: event.addfield
    value: custom
    
- script:
    lang: painless
    ignore_failure: true
    source: >-
      def parts = ctx.url.original?.splitOnToken("?");
      if (parts.length != 2) {
        ctx.url.endpoint = ctx.url.original;
        return;
      }

      ctx.url.endpoint = parts[0];
      ctx.url.param = parts[1];
```




## 変更の反映

ここがドキュメントの深くにしか書いてなかったが、
https://www.elastic.co/guide/en/beats/devguide/7.10/filebeat-modules-devguide.html#_metafields_yml_2

`pipeline.yml`を変更しただけでは`filebeat`のパイプラインに反映されない。
以下のコマンドで変更をfilebeatの`fields.yml`に反映する

```
./filebeat setup --pipelines
```


## 実行する

```
./filebeat -e -c filebeat.yml
```
「unbound.int.conf？ HAHAHA そんなのあるわけ無いじゃんｗｗｗｗｗ」

# はじめに
FreeBSD Advent Calendar 2020 の3日目の記事です。
Q:「どんな記事があるの」
A:「↑のリンクを踏んでみるといいよ！」

# 概要
みなさんは /etc/default/rc.conf や rc.d の中にあるスクリプトをざっくり読んで『ほほう、こういう設定の書き方もできるかー』と思って /etc/rc.conf に書いたことありませんか？ きっと**おすすめはしない**でしょうけどこんなこと書いた自分はやりました、ハイ。
今回は local_unbound の FreeBSD 的設定を**ちょっと変えよう**と思って踏んづけてしまったネタです。~~ｷﾞｬﾌﾝ~~

## つまるところどういうことだってばよ？
* 『あなたこういう設定の書き方もできるのね！』(CV:坂本千夏さん)
* よし、local_unbound の /etc/rc.conf に書ける設定をちょっと変えてみよう
* 『unbound.int.conf？ HAHAHA そんなのあるわけ無いじゃんｗｗｗｗｗ』←ｲﾏｺｺ

# きっかけ
「unbound と local_unbound は(設定次第で)共存できるよ」とどこかで見かけた[^dokokade]ので今日までやってきてましたが「設定ファイルも出来る限り同じ場所のものを読めるようにしたい」と思ってやってみることにしました。
~~普通だったら「ここまでやらんでも・・・ｗ」と思うところですがいつものように中の人の「面白そうだったので」精神が~~

```console
[root@localhost ~]# vi /etc/rc.conf

…
local_unbound_enable="YES"
local_unbound_config="/etc/unbound/unbound.int.conf"
unbound_enable="YES"
unbound_config="/etc/unbound/unbound.ext.conf"
…

[root@localhost ~]# mv /etc/unbound/unbound.conf /etc/unbound/unbound.int.conf
```
上のように「ファイル名を置き換えて rc.conf にも設定ファイルの場所を指し示したしさぁ動かしてみよう」としたら

```console
[root@localhost ~]# service local_unbound restart
Stopping local_unbound.
Waiting for PIDS: 61070.
Starting local_unbound.
Waiting for nameserver to start...[1605954873] unbound-control[61124:0] error: Could not open /var/unbound/unbound.conf: No such file or directory
[1605954873] unbound-control[61124:0] fatal error: could not read config file
.[1605954874] unbound-control[61127:0] error: Could not open /var/unbound/unbound.conf: No such file or directory
[1605954874] unbound-control[61127:0] fatal error: could not read config file
.[1605954875] unbound-control[61130:0] error: Could not open /var/unbound/unbound.conf: No such file or directory
[1605954875] unbound-control[61130:0] fatal error: could not read config file
.[1605954876] unbound-control[61133:0] error: Could not open /var/unbound/unbound.conf: No such file or directory
[1605954876] unbound-control[61133:0] fatal error: could not read config file
.[1605954877] unbound-control[61136:0] error: Could not open /var/unbound/unbound.conf: No such file or directory
[1605954877] unbound-control[61136:0] fatal error: could not read config file
 giving up
[root@localhost ~]# 
```
このように設定ファイルが見つからないと怒られました。

# どうにかしてみた
```console
[root@localhost rc.d]# diff local_unbound local_unbound.bak
103c103
< 	until "${command}-control" ${local_unbound_flags} status | grep -q "is running" ; do
---
> 	until "${command}-control" status | grep -q "is running" ; do
```
スクリプトを見ながら「なんであっちには flags が宣言されているのにこっちは記載がないんだろう・・・」と思って追記しました。

# 結果
```console
[root@localhost ~]# service local_unbound restart
Stopping local_unbound.
Waiting for PIDS: 61465.
Starting local_unbound.
Waiting for nameserver to start... good
[root@localhost ~]# 
```
ヨシ！[^genbaneko] 

# ぼやき
ちなみに FreeBSD のバージョンを上げるとまた元のファイルに戻ると思うのでどなたか英語でプレゼンして本家のリポジトリにマージくれたりしないですかねー（他力本願

[^genbaneko]: [現場猫 - ニコ百](https://dic.nicovideo.jp/id/5539221)
[^dokokade]: そのどこかのサイトのことが遠い記憶になって行方不明になって出てきませんでした。
RainLoop 

## 起動

```yml:docker-compose.yml
rainloop:
  image: hardware/rainloop
  container_name: rainloop
  volumes:
    - ./data/:/rainloop/data
  ports:
    - 8888:8888
```

```sh
docker-compose up
```

### 管理画面にログイン

* http://localhost:8888/?admin
* ユーザー
    * admin / 12345

![r1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25728/c45436ba-610a-93de-3b68-ebd5a2f62261.png)

### 管理画面にログイン成功

![r2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25728/460a6fc4-3e01-d285-f4d9-480028e2800b.png)

### メールサーバーの設定

* `短いログイン名を使う`にチェックを入れないとログインが成功しないかも。

![スクリーンショット_2020-12-02_19-05-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25728/89c70874-d667-e1e6-6e8d-c2f75ff78cd3.png)


### メールアカウントにログイン

* http://localhost:8888/
Python スライス指定で変数を使う際の注意点

#python: エラー 「slice indices must be integers or None or have an \_\_index__ method」が出た時の解決法
pythonにて以下のエラーが出たので、その際の対応記録です。

```
TypeError: slice indices must be integers or None or have an __index__ method
```

##エラーコード
観測データの解析でfftを使うときに以下のようなコードでエラーが出ました。

```fft.py
freq = [0,1,2,3,4,5,6]    #リスト
fft_sampling = 7
a = fft_sampling/2    #スライス用
out = freq[1:a]
```

リストをスライスする際は整数か`__index__ method`で指定をしないとだめらしい。
##解決策
思いついたところでは以下の3種類です。

- `fft_sampling/2`を`fft_sampling//2`と指定することで、`fft_sampling`がいくつでもスライスを整数で指定ができる。：「//」⇒余りを切り捨て、商のみ

```fft.py
freq = [0,1,2,3,4,5,6]    #リスト
fft_sampling = 7   
a = fft_sampling//2    #スライス用
out = freq[1:a]
#out = [1,2]
print(a)
#3
```

- mathモジュールの`floor()`関数か`ceil()`関数を使う。：`floor()`⇒小数点切り下げ, `ceil()`⇒小数点切り上げ

```fft.py
import math

freq = [0,1,2,3,4,5,6]    #リスト
fft_sampling = 7
a = math.floor(fft_sampling/2)    #切り捨て
b = math.ceil(fft_sampling/2)    #切り上げ
out = freq[1:a]
#out = [1,2]
out = freq[1:b]
#out = [1,2,3]
print(a)
#3
print(b)
#4
```

- `int()`で小数点以下を切り捨てる。

```fft.py
freq = [0,1,2,3,4,5,6]    #リスト
fft_sampling = 7   
a = int(fft_sampling/2)    #スライス用
out = freq[1:a]
#out = [1,2]
print(a)
#3
```

↓`round()`関数では丸め方が少し面倒になるので使わないほうがわかりやすそうです。

>注釈 浮動小数点数に対する round() の振る舞いは意外なものかもしれません: 例えば、 round(2.675, 2) は予想通りの 2.68 ではなく 2.67 を与えます。これはバグではありません: これはほとんどの小数が浮動小数点数で正確に表せないことの結果です。詳しくは 浮動小数点演算、その問題と制限 を参照してください。
[公式ドキュメントから引用](https://docs.python.org/ja/3/library/functions.html#round)

##リストの指定の際も同様
単にリストの指定の際にも同様のことが起こるので注意

```list.py
list = [0,1,2,3,4,5,6]    #リスト
num = 7   
a = num/2    #スライス用
out = freq[a]
#TypeError: slice indices must be integers or None or have an __index__ method
print(a)
#3.5

b = num//2 
out = freq[b]
#out = [1,2]
print(b)
#3
```

[参考にさせていただいた記事](https://qiita.com/yuta-38/items/2bf7bd9f0f5f83c0a93e)
TypeScript OrganizeImports script

```sh
$  yarn add --dev ts-morph
```

* create `organize_imports.js` 

```ts
// organize_imports.js
const path = require('path');
const tsm = require('ts-morph');

const rootAbsolutePath = path.resolve(__dirname, '../');

const targetDirectories = ['scripts', 'src'];

function organizeImports() {
  const project = new tsm.Project();

  targetDirectories.forEach(dir => {
    project.addSourceFilesAtPaths(`${rootAbsolutePath}/${dir}/**/*.ts`);
  });

  const sourceFiles = project.getSourceFiles(); // you can filter files by project.getSourceFiles(<glob-pattern>);

  sourceFiles.forEach(sourceFile => {
    sourceFile.organizeImports();
  });
  project.saveSync();
}

organizeImports();

```

```json
// package.json
{
  ...
  "scripts": {
    ...
    "organize-imports": "node organize_imports.js",
    "postorganize-imports": "prettier --write './**/*.ts'",
    ...
  },
  ...
}
```

```sh
$  yarn organize-imports
```
Functions Samples Authorized HTTPS Endpoint TypeScript版

FirebaseはいくつかのサンプルをJavaScriptで公開してくれています🙏
そのサンプルの中のAuthorized HTTPS EndpointをTypeScriptで使いたかったので書き直してみました。

参考URL:
https://github.com/firebase/functions-samples/tree/master/authorized-https-endpoint
https://stackoverflow.com/questions/44383387/typescript-error-property-user-does-not-exist-on-type-request

```typescript
/**
 * Copyright 2016 Google Inc. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License")
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import * as admin from 'firebase-admin'
import * as express from 'express'
import * as cookieParser from 'cookie-parser'
import * as cors from 'cors'

const app = express()

admin.initializeApp()

export interface AuthRequest extends express.Request {
  user?: admin.auth.DecodedIdToken
}

const validateFirebaseIdToken = async (req: AuthRequest, res: express.Response, next: express.NextFunction) => {
  console.log('Check if request is authorized with Firebase ID token')

  if ((!req.headers.authorization || !req.headers.authorization.startsWith('Bearer ')) &&
      !(req.cookies && req.cookies.__session)) {
    console.error('No Firebase ID token was passed as a Bearer token in the Authorization header.',
        'Make sure you authorize your request by providing the following HTTP header:',
        'Authorization: Bearer <Firebase ID Token>',
        'or by passing a "__session" cookie.')
    res.status(403).send('Unauthorized')
    return
  }

  let idToken
  if (req.headers.authorization && req.headers.authorization.startsWith('Bearer ')) {
    console.log('Found "Authorization" header')
    idToken = req.headers.authorization.split('Bearer ')[1]
  } else if(req.cookies) {
    console.log('Found "__session" cookie')
    idToken = req.cookies.__session
  } else {
    res.status(403).send('Unauthorized')
    return
  }

  try {
    const decodedIdToken = await admin.auth().verifyIdToken(idToken)
    console.log('ID Token correctly decoded', decodedIdToken)
    req.user = decodedIdToken
    next()
    return
  } catch (error) {
    console.error('Error while verifying Firebase ID token:', error)
    res.status(403).send('Unauthorized')
    return
  }
}

app.use(cors({origin: true}))
app.use(cookieParser())
app.use(validateFirebaseIdToken)
app.get('/hello', (req: AuthRequest, res: express.Response) => {
  res.send(`Hello ${req.user?.name}`)
})


// This HTTPS endpoint can only be accessed by your Firebase Users.
// Requests need to be authorized by providing an `Authorization` HTTP header
// with value `Bearer <Firebase ID Token>`.
exports.app = functions.https.onRequest(app)
```
初老がstrapiを使い始めた時に思った事

こんにちは、株式会社dottの石井です。

初めての投稿となる今回は、僕と同じ様に全くプログラミングやITサービス音痴の方もいるのではと思い、そんな方々と一緒にstrapiについて学んでいきたいと思います。（間違っていたら教えてもらえるんじゃないか？って狙いもあります。）

なので、読者は以下のような人を想定しています。
・開発者ではないが、strapiって何？って位は知っておきたい。

[前提となる方]
・プログラミングは超初心者ってか、全く分からないし、githubの使い方も良くわからない。それこそフロント、バックエンドのカタカナも良くわかっていない。
・パソコンはいじっても爆発しないけれど、プログラム関係の何かをいじったら迷惑かけると思ってる
・ドットインストールやプロゲートでhtml,cssをやったけれど、それがプログラミングのマップの中でどう位置付けているのか分からない？

#strapiとの出会い
僕が関わっているプロジェクトの一貫で、strapiをちょっと触ってみてもらっていいですか？という開発の方からの言葉で、つい「おっ、おう」と答えてしまったのが初めての出会いです。もちろん、何の事かも分からないし、美味しいお菓子なのか？ってレベルです。

#最初の壁
リンクにある画面を見てまずぶつかるのが英語表記に加え、それぞれメニューバーの目的が何かという事や構成です。なので、僕が始めた理解の流れをまずは書いておきます。

strapiとは何だ？⇨HeadlessCMSって何？⇨APIって良く分からない⇨CMSって何？

ここまで調べているとぼんやりと全体像が見えてきます。慣れるより慣れろですが、道に迷ってしまっては元も子もないので、僕が読んだページのリンクを貼っておきます。

[strapiとは何だ？](https://qiita.com/mtoyopet/items/46d3f6edbaaed4f0065c"strapiとは何だ？")
[HeadlessCMSって何？](https://microcms.io/blog/what-is-headlesscms/"HeadlessCMSって何？")
[APIって良く分からない](https://data.wingarc.com/what-is-api-16084"APIって良く分からない")
[CMSって何？](https://www.hitachi-solutions.co.jp/digitalmarketing/sp/column/cms_vol01/
https://www.asobou.co.jp/blog/web/about-cms"CMSって何？")
#strapiを触ってみる
全体像が朧げでも見えてきたら、早速開発チームが用意してくれたstrapiのステージング環境画面を見ていきました。（ちなみに、ステージング環境の意味も知らなかった）

ここから先はまた次回にw
python学習中に中カッコ{}と大カッコ[]の違いで時間を溶かした話【初学者が参考書片手にpython学習】

## はじめに
[大高隆・著「動かして学ぶ！Python Django開発入門」](https://www.amazon.co.jp/dp/B07YY5RDPC/ref=cm_sw_r_tw_dp_U_x_TCsYEbRH6SF0V)を使用して
python・Djangoの学習を始めた初学者です。
ド級の素人なので、補足・ご指摘等コメントいただけると大変助かります。

## { }と[ ]の違い
**{ }**　　・・・中カッコ
と
**[ ]**　　・・・大カッコ
の違い。初学者の皆さんは果たして何がどう違うのかわかりますでしょうか。

僕はこれまで、なんとなーく配列は[]、辞書型で持つときは{}を
それぞれ使うのかー、くらいの認識でした。

大した違いはないでしょう、別に気に留めることもないでしょうと。
ですが、そんな考えをしていたら大変痛い目を見ました。

## 概要
前任者より作りかけのソースコードを引継ぎとあるアプリを開発中。
ある程度完成も見え、特に目立った深刻なエラーもなし。
さあテスト、というところで期待していたものとは違う挙動が。

どこがダメなんだ...な、なぜだ....
バカみたいに時間をかけてしまったが、結局{}と[]の違いが原因でした。
実際はもう少し複雑な処理ですが、ポイントになったのは下記でした。


```terminal
list = {'G', 'B', 'C', 'L', 'Y'}
for i in list:
　　print(i)
```

期待していた挙動↓

```terminal
G
B
C
L
Y
```


実際にでた挙動

```
B
C
G
L
Y
```

並び変わっている！こいつのせいか！
ということで、

```
list = {'G', 'B', 'C', 'L', 'Y'}
↓
list = ['G', 'B', 'C', 'L', 'Y']
```

で解決。自分で記述をしたわけではなかったので、
流し見で確認するだけだとスルーされるくらいの差。
だがしかしとっても重要な差。

## コードって動けばいいよね、じゃないことを感じた瞬間
自分自身まだ経験も浅く、いわゆる**"**コピペエンジニア**"**を脱却できていない。
偉大な先輩方がネットにたくさん情報を置いてくれているので、
とりあえずコピペして動かして、ワーイ完成。とどうしてもなりがち。

だけれども、確かにエラーもなく動いてはいるけれど、
果たしてそれは求めた動きなのか、とか、他のところへの影響はとか、
コードの意味や働きを理解しようとしないと自分は成長できないし、
他の人に迷惑をかけてしまうということが良くも悪くも実感できた一件でした。
ソーシャルゲームのバックエンドをRuby on Railsで作るメリット

# はじめに

Happy Elements Advent Calendar 2020 4日目の記事です。

# Happy Elements株式会社はRuby on Railsを使っています

Happy Elements株式会社（HEKK）のソーシャルゲームのバックエンドはRuby on Rails（Rails）を使って開発しています。

これは会社が設立されたときから変わらずなのですが、全社統一でRailsを長らく使ってみて感じたメリットについてまとめてみたいと思います。

## 開発方針

本題に入る前にHEKKの開発方針について。
HEKKでは開発方針として**良いゲームを作ること**を最優先に考えています。
そのため、「新しい技術だから……」とか「エンジニアのモチベーションを上げるために流行っていることを……」みたいなことをそこまで重要視しておらず、どちらかというと「枯れた技術の水平思考」のような考え方を大切にしています。

## Railsを利用することのメリット

### 作りたいものを素早く作ることができる

Railsの良いところは、オールインワンのフレームワークで、作りたいものを素早く作ることができることだと思います。
O/Rマッパー、Routing、Test、Migrationの仕組みなど、Railsにはソーシャルゲームのバックエンドを開発するのに必要な機能が揃っています。

Rubyは静的な型付けがない言語であるため、一般的には大規模プロジェクトには合いづらいとされていますが、ソーシャルゲーム規模の開発には比較的マッチしやすいように考えています。

### デファクトスタンダードなフレームワークである

RubyといえばRuby on Railsということで、デファクトスタンダードなフレームワークの存在は非常に大きいと思っています。
ソーシャルゲーム開発は基本的にゲームごとに0からの開発になるため、これがもしRuby以外の言語であれば、ゲームごとにフレームワーク（または言語）が違うという状況が頻出することが想像できます。
ゲームごとに新しい言語、フレームワークのキャッチアップなどが必要になることは、スタッフの流動性などにも関わってきますが、HEKKの開発方針からも避けたいところです。

### 利用者が多い

利用者が多いため、ウェブ上に事例や関連情報が多いこともRailsのメリットの一つです。
また、gemなどもGitHubなどに数多く公開されているため、利用することも参考にすることもできます。

Rubyは日本発のプログラミング言語ということもあり、日本語の情報が多いのも良いポイントです。

###  ウェブ画面が作りやすい

管理者やCS担当者向けの機能は、全アプリ共通で一つのプロジェクトとして独立させられると理想的に思えますが、実際は各アプリで管理画面を作る方がデータ連携の面でも機能追加のスピードなどを考慮してもメリットが多いです。

その場合、アプリのバックエンドと同じフレームワークで管理画面を作ることになるため、APIだけではなく素早くウェブ画面を作れることが大きなメリットになります。

# まとめ

HEKKの開発方針とソーシャルゲームを作る際のRailsのメリットについて書きました。
“フレームワークから言語を選んだ”みたいなところもありますが、結果的には良い選択であったように思っています。

ただ、Rails自体に強くこだわっているわけではないため、今後変更するのも良いと思っています。
例えば、GoやElixirで作るのも楽しそうですし機能もそのまま作れるとは思うのですが、開発方針や上述のようなメリットを考慮すると気軽に変更できるものでもないため、今後慎重に考えていきたいと思っています。

# メンバー募集
Happy Elements株式会社 カカリアスタジオでは、
いっしょに【熱狂的に愛されるコンテンツ】をつくっていただけるメンバーを大募集中です！
もし弊社にご興味持っていただけましたら、是非一度
下記採用サイトをご覧ください。
[Happy Elements株式会社 採用特設サイト](https://recruit.happyelements.co.jp/)
emacs org-mode

\![Mac OS X-10.15.7](<https://img.shields.io/badge/MacOSX-10.15.7-brightgreen>) \![ruby-2.7.1p83](<https://img.shields.io/badge/ruby-2.7.1p83-brightgreen>) 


# org-modeの使い方


## 開始

-   emacs xxxxx.org


## orgの機能


### 見出し，リスト

```
* 見出し
** 子見出し
*** 孫見出し
** head付き項目
 - 項目1
   - 子項目1
   - 子項目2
 - 項目2
** 数字付き項目
 1. 最初の項目
 2. 二番目の項目
** 名前付き項目リスト
   - 名前1 :: 内容1
   - 名前2 :: 内容2
** チェックリスト [/]
   - [ ] チェック項目1
   - [ ] チェック項目2
```


### 文字修飾

前後に半角スペースが必要

| `*ここに書く*`| **太字** |
|:------------|:---------|
| `/ここに書く/`| *斜体*   |
| `~_ここに書く_~`| `_下線_` |
| `~=ここに書く=~`| `=固定幅=`|
| `+ここに書く+`| ~~打ち消し~~|
| `#ここに書く`| #コメント|


## 確認

1.  C-c C-e
2.  h
3.  o

正常にHTMLを開くことができればエラー無し


## リンク

```
[[link][name]]
[[link]]
```


## source

-   \#+#+BEGIN\_ブロックの種類 &#x2013;  #+END\_ブロックの種類で囲うことで，囲った部分がひとまとまりとして扱われる．
-   \#+BEGIN\_EXAMPLE&#x2026;#+END\_EXAMPLE

    EXAMPLEを使うとこうなる   

-   \#+BEGIN\_QUOTE &#x2013; #+END\_QUOTE

> QUOTEを使うとこうなる

-   \#+BEGIN\_SRC &#x2013; #+END\_SRC

```
ソースコードを引用するのに使う
```

**小文字でもOK**


# 参考

-   [ORG MODE教室その３](https://www.mhatta.org/wp/2018/08/23/org-mode-101-3/)



------
 - **source** ~/Desktop/grad_members_20f/members/mm-cell/post_org/org_mode.org