OmniAICreator/Qiita-1.07M huggingface dataset:
Anti Windows - JIS配列とUS配列が共存出来ない -

ーーーーーー あまり強い言葉を使うなよ。弱く見えるぞ。

本記事は、なんか布教したいエンジニア Advent Calendar 2019 の6日目の記事です。
軽い気持ちで始めたアドベントカレンダーですが、なんだかんだ書いてくれる人が居てとても嬉しいです。

## 概要
私は開発においてUS配列を好んで利用しています。
今日も、目の前にJIS配列のノートパソコンが出現したので、お気に入りのUS配列のキーボードをぶっ刺しました。
そして悲劇が始まる。

## 背景
現在、私の前には同じチームのメンバーが複数利用するJIS配列のノートパソコンが置いてあります。
何故かWindowsってやつは、個別のユーザーごとにキーボード配列を設定できないみたいなので、少しググって見る。
（この時点で Why??? って感じ)

調べてみると、どうやら皆はレジストリキーを弄って、接続したキーボードだけUS配列にしているらしい。
早速自分も試してみる。

……出来た！！！！

ちゃんとUS配列でキーボードが認識されている。
参考にした記事には、ノートパソコン側のJIS配列キーボードはJIS配列で認識されるとのことだったので、
早速＠を入力してみたりする。が、どう見てもUS配列の入力になっている。
は？？？

Twitterでちょっと調べてみる。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Windows10のノートでUS配列とJIS配列が共存できなくなってるっぽいけど誰か解決策知りませんか？</p>&mdash; Kashiwa no Totoro (@ossyaritoori) <a href="https://twitter.com/ossyaritoori/status/1196019339612213248?ref_src=twsrc%5Etfw">November 17, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ノートPCでJISとUS配列を共存させそうと設定するがうまく行かず、最終的にどこかのWindowsUpdateでレジストリ設定でが効かなくなったそうだ。<br>MAJIでこの2時間MUDAやった。仕方ないのでJISに耐えるしかなくなった。<a href="https://t.co/qffDW5xfzC">https://t.co/qffDW5xfzC</a></p>&mdash; chaji (@thestrokes77) <a href="https://twitter.com/thestrokes77/status/1186677970137575425?ref_src=twsrc%5Etfw">October 22, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


どうやら、レジストリキーを利用したJIS配列とUS配列の共存は出来なくなってしまったらしい。

この瞬間、私はウィンドウズアンチになった。

## 環境
OS : Windows10 Home
Ver: 1909

## 対策
### 対策1
脳がバグるけど、特別な事をしない方法。
> もしも日本語配列キーボードと英語配列キーボードを併用する環境の場合は、別途「英語言語」を追加し、キーボードの入力方式を切り替えて使用するのがおすすめです。
USキーボードと日本語キーボードの切り替えは、【Windowsキー+Spaceキー】で行えます。

https://enjoypclife.net/2016/10/17/windows-10-us-keyboard-layout-japan-tips/

### 対策2
悩み続けた結果閃いた。
「レジストリを書き換えたらキーボード配列を変えられるなら、シェルで処理したらいいんじゃね？」

早速レジストリエディタを書き換えるシェルの作成に取り掛かろうとしたところ、
既に同じことを思ってプログラムを書いている人が居た！！！
https://github.com/Takeru-chan/chgkbd/blob/master/README.md

この製作者の方には深い感謝を贈ります。

ちなみに、実行するのにいちいち
1. 管理者権限でPower Shellを立ち上げる
2. Power Shellでスクリプトを実行出来るように権限を変更する
3. スクリプトを実行する
4. 実行権限を戻す

みたいなことをやるのは結構面倒くさいと思います。
※ 実行権限付与したままだとしても、いちいちPower Shellを立ち上げてプログラムを実行するのは面倒くさい
ですので、まずはお借りしたスクリプトをどこかに設置して、ショートカットを下記の2つのパスで作成します。

```Shell
C:\Windows\System32\WindowsPowerShell\v1.0\powershell.exe -ExecutionPolicy RemoteSigned -File "スクリプトのパス" jp
C:\Windows\System32\WindowsPowerShell\v1.0\powershell.exe -ExecutionPolicy RemoteSigned -File "スクリプトのパス" en
```

作成したショートカットを任意の場所に置いて、必要な時に管理者権限で実行。
後は、Windowsを再起動すれば完了です！(※ ログオフでも良いという説もある)
便利！！！！！！

## まとめ
でも、もう面倒くさいのでErgodoxを買うしかないのかなって思った。
https://qiita.com/moutend/items/dd3ac2b8cffd69809928

みんなも買おうErgodox！
axiosを使ってKibanaにAPIでログインする

# 概要
xpack Securityを使っていると、Kibanaで提供されるDashboardのShare機能でログイン画面が表示される。
なのでAPIでログインしたあとにiframeを表示する、的なことをやりたかった

## 前提
* オンプレならcors関連のconfigが有効になっていること
    * https://www.elastic.co/guide/en/kibana/current/settings.html#server-cors
* Elastic Cloudはcorsが有効にできないっぽいので
    * https://qiita.com/earshttp/items/44d1400f67b9e4e77d35
    * のようにリバースプロキシする（JSからだとpreflight関連で引っかかるため）

# コード

``` javascript

loginKibana: function(kibanaInfo, callback, error){
  const config = {	headers: {'Content-Type': 'application/json','Cache-Control' : 'no-cache', 'kbn-xsrf' : 'kibana'}};

  const data = {
    username: kibanaInfo.username,
    password: kibanaInfo.password
  }

  axios.post(`${kibanaInfo.host}/api/security/v1/login`, data, config).then(callback).catch(error);
}
```

callbackでiframeの表示処理を書いてあげるとログイン済みになる
G Suite（Google Apps Script）とVue.jsとSpreadsheetで作る、フォームからの入力をSpreadsheetに保存するツール

| SpreadsheetID | SheetName |
|:-----------------|:-----------------|
| 123456789012345678901234567890123456789012345 | HistName |


```ruby:コード.gs
function doGet() {
  var html = HtmlService.createTemplateFromFile("index").evaluate();
  return html;
}


function appendData(inputData){
  
  var spreadSheetID_write = "123456789012345678901234567890123456789012345";
  var sheetName_write = 'HistName';    
  var sheet = SpreadsheetApp.openById(spreadSheetID_write).getSheetByName(sheetName_write);

  var dataList = [];
  
  for (i in inputData){
    var approvedSet = inputData[i];
    dataList.push(approvedSet);
  }
  
  sheet.appendRow(dataList);
}
```
```ruby:vue.js
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>

<script>  
  var app = new Vue({
    el: '#app',
    data: {
      showTemplate: 'App',
      inputName: '',
      rndNum: '',
      setAppData:[],
    },
    methods:{
      checkApp: function(){
        this.showTemplate = 'Confirm';
      },
      
      checkConfirm: function(){
        this.showTemplate = 'Thanks';
        this.setData();
                
        google.script.run
          .withSuccessHandler(function(arg){
            alert("データの登録に成功しました。");
          })
          .withFailureHandler(function(arg){
            console.log(arg);
            alert("データの登録に失敗しました。");
          }).appendData(this.setAppData);
      },
      
      setData: function(){
        this.setAppData = [];
        this.rndNum = this.createRndNum();
        
        // inputするデータ配列の作成
        this.setAppData.push(this.rndNum);
        this.setAppData.push(this.inputName);
      },      
            
      createRndNum: function (){
        var l = 12;

        // 生成する文字列に含める文字セット
        var c = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        var cl = c.length;
        var r = "";
        for(var i=0; i<l; i++){
          r += c[Math.floor(Math.random()*cl)];
        }
        return r;
      },
    },
  })
</script>
```
```ruby:index.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  <div id="app">

  <template v-if="showTemplate === 'App'">
 
    <input type="text" id="inputName" name="inputName" v-model="inputName"></input>
    <button type="submit" v-on:click="checkApp">確認画面に進む</button>

  </template>


  <template v-if="showTemplate === 'Confirm'">
 
    <input type="text" id="inputName" name="inputName" v-model="inputName" disabled=""></input>
    <button type="submit" v-on:click="checkConfirm">登録</button>

  </template>


  <template v-if="showTemplate === 'Thanks'">
　  <p>Thanks！</p>
    <p>{{  setAppData  }}</p>
  </template>


  </div>
  </body>
  <?!= HtmlService.createHtmlOutputFromFile('vue').getContent(); ?>
</html>
```
レンタルサーバーとNuxt.jsで何も考えずに始める意識低い系のPWA

PWA Advent Calendar 2019 5日目の記事です。
タイトルどおりレンタルサーバーとNuxt.jsで何も考えずにPWA(Nuxt PWA)を始める意識低い系のエンジニア記事です。

## 環境

- macOS Mojave
- Node.js 8.11.2
- npm 6.4.0
- SSL設定済のレンタルサーバー (XREA)

意識低い系ですので、Docker使わずローカル環境直書きです。
意識低い系ですので、NetlifyでGitデプロイとかせずFTPで直接アップロードします。

## 事前準備

npx @vue/cliをインストールする

```console
$ npm i -g npx @vue/cli
```

## Nuxtアプリケーションを作成

```console
$ npx create-nuxt-app rental-pwa
```

**PWAモジュールは入れるようにして選択してください**

## Nuxtアプリケーションディレクトリに移動し静的ページのBuild

```console
$ cd rental-pwa
$ npm run generate
```

## 出力されたdist配下のファイル群をFTPでレンタルサーバーのドキュメントルートに設置する

「https://${domain}/」にアクセスすると

![スクリーンショット 2019-12-05 12.05.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133718/c2951e54-bb54-b4da-83f2-c344424e4761.png)

PWAアプリが一瞬でできます！
やったね！ 

## 最後に

何も考えずにできる意識低い系のPWAですが、前回の記事[レンタルサーバーで無理くりLaravel + Nuxt + PWAをやってみた](https://qiita.com/ProjectEuropa/items/d9dcf6d67cc0201f8218)よりかは遥かに手っ取り早く、簡単お手軽にPWAを試せます。

レンタルサーバー内にWordPressを置いてRestAPIを使えば、技術的にイケてる風サービスも作れるかも。。。？
WordPressはセキュリティ的にガバガバなので、個人的にあまりオススメしたいものではないですが。

明日は[@masanori_msl](https://qiita.com/masanori_msl)さんの記事です！
Elastic CloudのKibanaをnginxでリバースプロキシする

# 概要
自ドメインとして扱いたかったため

## Tips
* kibana_alias_domainに自分のドメイン
* kibana_hostにElastic Cloudのエンドポイント

# コード

``` nginx
server {
    listen 80;
    server_name {{ kibana_alias_domain }};

    location / {
        if ($request_method = 'OPTIONS') {
            add_header Access-Control-Allow-Origin '*';
            add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE';
            add_header Access-Control-Allow-Headers 'Origin, Authorization, Accept, Content-Type, cache-control, X-CSRF-TOKEN, kbn-xsrf';
            add_header Access-Control-Allow-Credentials 'true';
            return 204;
         }
        proxy_pass {{ kibana_host }};
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        add_header Access-Control-Allow-Origin '*';
        add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE';
        add_header Access-Control-Allow-Headers 'Origin, Authorization, Accept, Content-Type, cache-control, X-CSRF-TOKEN, kbn-xsrf';
        add_header Access-Control-Allow-Credentials 'true';
        rewrite /(.*)$ /$1 break;
    }

    error_page 500 502 503 504 /500.html;
    client_max_body_size 4G;
    keepalive_timeout 10;
}

```

CORS関連のヘッダは用途により要調整
ホットリロードができるBrainfuck環境

# はじめに

Brainfuckの開発を行うにあたって、ホットリロード機能が欲しいと思ったことはないですか？
むしろ、思い通りに動くほうが珍しい難解言語なので必須機能とも言えるでしょう。
そこで、自分でホットリロードができるBrainfuck環境を構築することにしました。

# Brainfuck

## Brainfuckとは

コンパイラがなるべく小さくなるように設計された簡潔な言語です[^1]。
以下に簡単なプログラムの例を示します。

```:src/hello.bf
>+++++++++[<++++++++>-]<.>+++++++[<++++>-]<+.+++++++..+++.[-]>++++++++[<++
++>-]<.>+++++++++++[<+++++>-]<.>++++++++[<+++>-]<.+++.------.--------.[-]>
++++++++[<++++>-]<+.[-]++++++++++.
```

```:出力
Hello World!
```

```:src/abc.bf
++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++.+.+.>++++++++++.
```

```:出力
ABC
```

## 導入

今回はBrainfuckのコンパイル環境としてjsbrainfuck[^2]を使います。

```
$ yarn add jsbrainfuck
```

`jsbrainfuck.interpret()`の引数にBrainfuckの文字列を渡すと、コードを実行することができます。
適当に実行用のスクリプトを作成しました。

```js:run.js
const { readFileSync } = require("fs");
const { interpret } = require("jsbrainfuck");
// 引数から対象ファイル名を取得して各ファイルを実行する
process.argv.slice(2).forEach((name) => {
  const source = readFileSync(name, "utf-8");
  console.log(`Executing ${name} =>`);
  const { print } = interpret(source); // Brainfuckコードを実行
  print(); // 実行結果を表示
});
```

以下のように複数のファイルを実行することもできます。

```
$ node run.js src/hello.bf src/abc.bf
Executing src/hello.bf =>
Hello World!
Executing src/abc.bf =>
ABC
```

`jsbrainfuck.compile()`の引数にBrainfuckの文字列を渡すとJSコードに変換された文字列が返ってきます。
適当にコンパイル用のスクリプトを作成しました。

```js:compile.js
const { readFileSync, writeFileSync } = require("fs");
const { compile } = require("jsbrainfuck");

const name = process.argv[2]; // 入力ファイル名を引数から取得
const source = readFileSync(name, "utf-8");
const { code } = compile(source); // BrainfuckからJSコード生成
const out = process.argv[3]; // 出力ファイル名を引数から取得
writeFileSync(out, code);
```

```
$ node compile.js src/hello.bf hello.js
$ node hello.js
Hello World!
```

# ホットリロード

## ホットリロードとは

ファイルを変更したとき自動でコンパイルや実行を行うことを言います。
変更するたびに手動でコンパイルして実行する手間を省けます。

## 導入

Nodemon[^3]というソース監視ツールを導入します。

```
$ yarn add nodemon
```

`package.json`に以下のような設定を追加して、`./src`の中の`.bf`ファイルを監視して、変更があったら`node ./run.js ./src/*.bf`を実行するようにします。

```json:package.json
{
  "nodemonConfig": {
    "watch": [
      "./src"
    ],
    "ext": "bf",
    "exec": "node ./run.js ./src/*.bf"
  }
}
```

Nodemonを起動すると監視が始まって、変更があるとリロードされていることがわかります。

```
$ yarn run nodemon
[nodemon] 2.0.1
[nodemon] to restart at any time, enter `rs`
[nodemon] watching dir(s): src/**/*
[nodemon] watching extensions: bf
[nodemon] starting `node ./run.js ./src/*.bf`
Executing ./src/abc.bf =>
ABC
Executing ./src/hello.bf =>
Hello World!
[nodemon] clean exit - waiting for changes before restart
[nodemon] restarting due to changes...
[nodemon] starting `node ./run.js ./src/*.bf`
Executing ./src/abc.bf =>
DEF
Executing ./src/hello.bf =>
Hello World!
[nodemon] clean exit - waiting for changes before restart
```

## 最後に

仕上げに`package.json`に以下のようなスクリプトを追加すると、`yarn start`でホットリロードができるBrainfuck環境が動くようになります。

```json:package.json
{
  "scripts": {
    "start": "nodemon",
    "build": "node compile.js"
  }
}
```

これでBrainfuckのコーディングを快適に嗜むことができます。

[^1]: [Brainfuck - Wikipedia](https://ja.wikipedia.org/wiki/Brainfuck)
[^2]: [jsbrainfuck](https://github.com/the-hive-mind/brainfuckjs)
[^3]: [Nodemon](https://nodemon.io/)
Pythonで辞書のメモリサイズを確認する方法

こんにちは、株式会社LIFULLの二宮です。[去年のAdvent Calendarの埋め残し](https://qiita.com/advent-calendar/2018/lifull3)が心残りなので、小ネタですが投稿しておきます。

とある実装中に、変数のメモリの使用量を大まかに見積もる必要がありました。[こちらの記事](https://qiita.com/takahiro_itazuri/items/5013818ff2e3fb2367f9)でも紹介されている通り、 `sys.getsizeof` で変数のメモリ上のサイズを表示できるのですが、

```python
import sys

print(sys.getsizeof({"key": "a"}))
# => 248

# 文字サイズが明らかに大きいのに同じ値が出てしまう
print(sys.getsizeof({"key": "a" * 10000}))
# => 248
```

というのも、Pythonの辞書の実体は「ハッシュテーブルにオブジェクトへの参照を保存したもの」で、中の文字列のメモリ上のサイズは考慮されません。このあたりの話は、こちらの記事が参考になると思います。

* [Python: Create List of Object References - Stack Overflow](https://stackoverflow.com/questions/28196463/python-create-list-of-object-references)
* [[ruby] ポインタと参照とか知らなくても ruby は書ける、なんてことはない。](https://libkazz.hatenadiary.org/entry/20100430/1272612297)

（日本語でいい記事がRubyのものしか見つけられませんでした。ただこのあたりの話はRubyもPythonも共通しています。）

中のオブジェクトのサイズまで考慮するには、[公式ドキュメント](https://docs.python.org/ja/3/library/sys.html#sys.getsizeof)のこちらのリンク先の記事を参考に実装する必要があります。

> `getsizeof()` を再帰的に使い、コンテナとその中身のサイズを割り出す例は、 [再帰的な `sizeof` のレシピ](https://code.activestate.com/recipes/577504/) を参照してください。

ただ、私の場合は文字列のみが入った辞書（jsonにシリアライズ可能）で、概算値を知りたかっただけなので、[こちらのStackOverflow](https://stackoverflow.com/questions/6579757/memory-usage-of-dictionary-in-python)の書き込みに従って、 `json.dumps` の結果で済ませてしまいました。


```python
>>> first = 'abc'*1000
>>> second = 'def'*1000
>>> my_dictionary = {'first': first, 'second': second}
>>> getsizeof(first)
3049
>>> getsizeof(second)
3049
>>> getsizeof(my_dictionary)
288
>>> getsizeof(json.dumps(my_dictionary))
6076
>>> size = getsizeof(my_dictionary)
>>> size += sum(map(getsizeof, my_dictionary.values())) + sum(map(getsizeof, my_dictionary.keys()))
>>> size
6495
```

# 参考記事

* [sys --- システムパラメータと関数](https://docs.python.org/ja/3/library/sys.html#sys.getsizeof)
* [Memory-usage of dictionary in Python?](https://stackoverflow.com/questions/6579757/memory-usage-of-dictionary-in-python)
* [In-memory size of a Python structure](https://stackoverflow.com/questions/1331471/in-memory-size-of-a-python-structure)
Djangoでの非同期処理実装（Celery,Redis）

#本記事について
Djangoでwebアプリを作っているときに非同期処理必須だなと思い、その導入について例を交えながら紹介しようかと思います。使うソフトは[Celery](http://docs.celeryproject.org/en/master/index.html)（セロリ）、
・[django+Celeryによる非同期処理について](https://qiita.com/sivukai/items/fd9a3093cf688426dc5f)
・[Djangoで非同期処理を実装する方法](https://dot-blog.jp/news/django-async-celery-redis-mac/)
この辺の記事を参考にさせて頂き実装しました。

## 異動（20220204）
いくつか修正もあったので下記に移動しました。
[Djangoによる非同期処理実装(Cerery,Redis)](https://zats-firm.com/2022/02/05/django_cerery_redis%e3%81%ab%e3%82%88%e3%82%8b%e9%9d%9e%e5%90%8c%e6%9c%9f%e5%87%a6%e7%90%86%e3%81%ae%e5%ae%9f%e8%a3%85/)
UEFIに32bit/64bitの違いがあるのを知らなかった。

UEFIそのものについてはgoogle先生にでも聞いてください。
BIOSなアレです。

結論から言うと、UEFI32のマシンへのインストールにUSBを使うには容量の小さなUSBメモリを使う必要があったというお話。
最初に使った16GBのものはNGで、4GBのものでWindows 10 Pro 32bit版をインストールできました。

原因は容量の問題ではなく、フォーマット時のアロケーションユニットサイズかもしれません。
インストールする目的が果たせ、仕事ではないのでこれ以上調べてません。


イオシスさんで、リース落ちだと思われる「Arrows Tab Q584/H」のC級品が１万円以下で売ってるとのネット記事を見て、週末、早稲田に用事があった帰りに買ってきました。

液晶にスペック全振りしたような面白いスペックです。
家族、特に子供用にと思って買ったので、ネットがソコソコ見れればそれで十分でしょう。

これがWindows 8.1 Pro 32bit だったので、いつものようにUSBからWindows 10 Pro 64bit をインストールしようとして小一時間ハマったというお話です。

---
**「Arrows Tab Q584/H」への導入手順は以下の通り。**
1. Microsoft公式から「メディア作成ツール」をダウンロード
2. 「メディア作成ツール」でWindows 10 Pro 32bitのisoイメージを作る
3. Windows 10のPCでUSBメモリをフォーマット（サイズの小さなものか、アロケーションユニットサイズを小さくが条件？）
4. isoイメージを開いて、中身を全てUSBメモリにコピー（隠しファイルの表示が必要かも？）
5. TabletにUSBメモリを差して、電源入れた後に、左側面下のオプションボタンを連打
6. ブートメニューでUSBメモリを選択
7. Windows 10のインストール
8. 富士通のサイトから必要なドライバ（Windows 10 32bit用）をダウンロードしてインストール
9. 富士通のサイトからサウンドデバイスのドライバ（Windows 3.1 32bit用）をダウンロードしてインストール
10. Windows 10インストール時に自動認識されたサウンドデバイスを削除

---
過去、これより古いThinkpad X61には何の問題もなくWindows 10 Pro 64bitを入れられたのでちょっと油断していました。
でも32bit版ではメモリが1GB無駄になっているのがちょっとモヤっとします。。。

レスポンスはちょっとモッサリですが、安価なので壊れてもいいやと割り切った使い方が出来るのがいいですね。
解像度高くて液晶キレイなのは良いのでそれを生かした用途ならお買い得かもしれません。
sidekiqのジョブステータスをチェックする

# 概要
Sidekiqにキューされていたらperformしたくないときに使った

# コード

``` ruby
class User < ApplicationRecord
  def scheduled?
    Sidekiq::ScheduledSet.new.select{|q| q.args.first['queue_name'] == "hogehoge"}.select{|q| q.args.first['arguments'].first == self.id}.any?
  end

  def queued?
    Sidekiq::Queue.new('hogehoge').select{|q| q.args.first['arguments'].first == self.id}.any?
  end

  def running?
    Sidekiq::Workers.new.select{|process_id, thread_id, job|
      JSON.parse(job['payload'])['args'].first['queue_name'] == "hogehoge"
    }.select{|process_id, thread_id, job|
      JSON.parse(job['payload'])['args'].first['arguments'].first == self.id
    }.any?
  end
end
```

## Tips
* queue_nameと引数で判定している
* Jobの第一引数にモデルのidを指定しているので、それで判別
* 同じようにdeadやretryのものも取得できるはず
銭湯が大好きで、コワーキングもまとめてやっちゃいたいエンジニアにおすすめの銭湯3選

[ユアマイスターアドベントカレンダー2019](https://qiita.com/advent-calendar/2019/yourmystar) の5日目の記事です。

2019年もあっという間に12月ですね。
皆さまいかがお過ごしでしょうか。

ちょうど去年の同じ日、僕は銭湯に関する投稿([東京在住のエンジニアが日頃の疲れを癒すのに最適だと思うスーパー銭湯3選](https://qiita.com/masyus/items/5eb9baadc1fe074a39d7))をしておりまして、奇しくも1年後の同日にまたアドベントカレンダーでこうして1本記事を書いている今日この頃です。

![391E8BB3-E9EA-4358-9891-DE804727FE44.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1906/a0a6b452-344f-290f-e397-d7052bddf7e2.jpeg)

![15CAB9F0-8AD8-43FA-B91F-DBAB258D37CD.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1906/3737adfd-c76b-79f4-3e98-08e583aec45e.jpeg)

![F3AE7EF7-2FBB-4046-A873-AB8F53415C61.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1906/37b34e0f-07ef-0cae-1b2d-f35484f5754d.jpeg)

あれから1年、、、僕は新しい銭湯を開拓する日々が続きました。お気に入りの銭湯にも足繁く通う中、20店舗近く新規開拓したのではないでしょうか。おかげさまで社内でも「masyusさんといえば銭湯！」という共通認知を獲得することができ、公私共に一定のポジションを獲得できたことを大変喜ばしく思っております。

前置きはこの辺にして、今回は今まで通った銭湯の中でも

**「銭湯が大好きなんだけど、銭湯に行った時にコワーキングも一緒にやれたら最高だなぁ」**

と思うエンジニアの方に向けて、My銭湯コレクションの中から3つほどご紹介しようと思います。それぞれ甲乙は付け難かったため、今回はその1~その3としてご紹介しますね。

# その1: らくスパ1010神田
![942E156F-9303-4657-8585-865E4266ECDB.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1906/27964081-b8d3-00c9-5159-12ba2ff7a008.jpeg)

2019年3月に御茶ノ水駅徒歩3分以内の場所にオープン、銭湯+充実した休憩スペースがある。館内全施設&サウナ利用の10時間で1,500円前後、リーズナブル。銭湯のみのプランもあるみたい。

## 実際行ってみて思ったこと
- 休憩スペースが広々としていて充実(コワーキングエリアがあって電源もある)
- 湯船はスーパー銭湯ほど大きくはない(混雑していると洗い場が何人か待ち状態になることもある)

ここのウリはなんといっても休憩スペースの充実っぷり。ハンモックがあったりマンガが沢山読めたりするし、その上さらにコワーキングできるスペースもあって10時間1,500円は大変Gooood。普通コワーキングスペースの料金ってそこそこするので、1,500円でコワーキングすることができて疲れたら湯船に入れて、且つ居心地良い休憩スペースまであるのは控えめに言って最高。

ちなみに僕はコワーキングしようと思って来たけど、うっかりキングダムを読み漁りまくって結局コワーキングしなかったという苦い思い出があります。

https://rakuspa.com/kanda/

# その2: テルマー湯

(sorry!! no photo)

いわずと知れたスーパー銭湯。岩盤浴もあるし、身も心もリラックスさせるにはもってこいの場所。以前は4Fに休憩スペースがあってそこのテーブル席でたまにPC開いてたんだけど、最近は休憩スペースがB2Fに移動してラウンジとなり、テーブル席も増えた。テーブル席の近くにソファースペースがあってそこにコンセントがあるので、疲れたらソファーへ移動して寝てる最中にPC充電するという技が使える。

## 実際行ってみて思ったこと
- 日々の疲れを取ってリラックスするのにこれほど素晴らしい場所はない(と再認識した)
- いつの間にか24時間営業になってた
- テルマー湯も日々進化している

余談ですがB1Fに入ってる飲食店の1つ、callan column(からんころん)のトム･ヤム･ヌードルが個人的に非常に好き。トムヤムヌードルにトッピングの唐辛子入れて食べると結構辛くなるのですが、あの辛さがたまらん。ああ、こうして文章書いている今この瞬間にも食べたくなってきた。

http://thermae-yu.jp/

# その3: skyspa YOKOHAMA
![3CA27709-AB8F-44F8-B1EE-D38595C4E6C6.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1906/fc126455-ae6c-e576-5cf4-0cc0865d19fb.jpeg)

横浜駅すぐ近くのスカイビル14Fに入っている銭湯というか、スパ。休憩スペース内にコワーキングできるスペース(KOOWORK)が設けられており、4人くらいでMTGできる席(要予約)もあるので1day合宿する時などには最適な場所。

# 実際行ってみて思ったこと
- 単純に居心地良し
- 高層階なので、湯船から横浜の景色が眺められる
- MTG席に大型ディスプレイとホワイトボードがあってGooood
- 土日祝は5時間で2,450円なので、そこそこ値段する

![60E07E77-427F-4ECA-B081-278CBCFB1CA3.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1906/513b806d-f12c-7f04-0bec-84261a8571f3.jpeg)

オシャレだし、銭湯&コワーキングを実践するには安全安心でうってつけの場所だと思う。ちなみに平日にプチ合宿で活用するのであれば8：00～22：00で2,450円なので良心的。

https://www.skyspa.co.jp/

# 終わりに…
いかがでしたか？銭湯も日々進化しているのだなと感じざるをえませんね。これから先も新しい銭湯ができると聞いたら飛び込んでいきたいと思う所存でございます。もし銭湯に興味ある方いましたらぜひ一緒に行きましょう(^^)

## 銭湯はマナーをしっかり守って使いましょう
銭湯はパブリックスペースのため、マナーを守ることは大事です。銭湯側が禁止している行為はもちろん、周囲の人が嫌だな〜とか不快に思うこともしないよう、利用者全員が快適に過ごせるよう意識しましょう。
JSONパース最適化

現在使ってるJsonライブラリの処理を早く出来ないかどうか検討しました。

# 目的
・現在サーバーAPIのレスポンスをパースするJSONライブラリが遅いと感じてるのでなんか出来ないかどうか検討したい
・もっと早いライブラリがあると思うけどライブラリを差し替えるとけっこうな作業になるので今のままでやってみたい
・本来であればJSONを無くしてgRPCみたいなものを使いたいけどこれも差し替える作業が大きいので現在のものを改善できれば良い


## stringアロケーションを少なくしましょう
最初にクラスを開いてみるとstringのアロケーションが多いなーと思いました。stringがコンストラクタに渡されてパースしながらstring.substring()を利用してガンガン再帰呼び出しがされてしまいます。

```csharp
list.Add(new JSONObject(str.Substring(start, end)));
```
jsonが深くなるほどこれの呼ぶ回数が多くなるのでもともとのstringよりメモリが結構膨らむよね。パースが遅いだけじゃなくてGCも多く走らせてしまいます。

もし次のオブジェクトがstringじゃなければstring化しなくていいのではないか？
1個ずつのcharをチェックして次のデータが true、false、null、数字などだったらsubstringのコールを飛ばしてみよう。

擬似コード：

```csharp

private static readonly char[]	ms_digits = new char[] { '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '-', 'e', 'E' };

private JSONObject parseSubString(string str, int start, int length){

	//true, false, nullなどのタイプをチェック
	if(length == 4 && (str[start]=='t' || str[start]=='T')){
		//true
		return new JSONObject(true);
	}
	if(length == 5 && (str[start]=='f' || str[start+1]=='F')){
		//false
		return new JSONObject(false);
	}
	if(length == 4 && (str[start]=='n' || str[start+1]=='N')){
		//null
		return new JSONObject(Type.NULL);
	}

	bool isNumber = false;
	for(int i=0;i<length;i++){
		
		//ms_digitsに入ったらindex返す
		int numIdx = GetNumberFromChar(nextChar);

		//数字じゃないならやめる
		if(numIdx < 0){ isNumber = false; break;}

		// hogehoge
		//１個ずつの数字を追加していく
		//num = (num*10)+numIdx 的な感じ
		// マイナス、少点数などの対応も忘れずに
	}

	//数字を返す
	if(isNumber)
		return new JSONObject(number);

	//結局stringかオブジェクトだったらsubstringしちゃうかー
	return new JSONObject(str.Substring(start, length));
}
```
これを実装したらsubstringを呼ぶ回数が減るはずです！

ちなみに同じロジックを使ってStringBuilderでも拡張できます！
Gavin Pughさんが作ってくれた  http://www.gavpugh.com/source/StringBuilderExtNumeric.cs を参考してください


## さらに減らせるでしょうか

上記だとある程度stringアロケーション減らせたけどまだjsonオブジェクトや配列などがsubstringに入ってくる。最終的なstringオブジェクトのみアロケートするように出来るでしょうか？

現在のライブラリだとstringが受け取るconstructorしかないけど、これMemoryStreamだったらどうかな？
もともとの

```csharp
public JSONObject(string str)
```
コンストラクタじゃなくて新しく

```csharp
public JSONObject(Stream stream)
```
を作ってみました。もともとのパース処理を真似しながら

```csharp
stream.Read(buffer,0,1)
```
１個ずつのcharをチェックしながらjsonパースしていく。　こうするとアロケーションが発生する時はjsonの中のstringタイプのオブジェクトがある時だけになります。

では、このMemoryStreamがどこから来るでしょうか？ stringをMemoryStreamに変換するだけだと意味がなくなります。HTTP通信周りのシステムを見てみると内部にMemoryStreamを使ってます！　今までは通信が終わったらこのMemoryStreamがbyte[]に変換されてたけどそれを飛ばして直接にJsonに渡したらさらに快適。けっこう大きい通信もあるのでこのbyte[]変換が必要ないならGCなども改善されます。


## 結果
こっちのテスト環境で試してみたけどもともと1.25秒かかったものが0.25秒になりました！　5倍じゃん！
やっぱり無駄なものを削りましょう:military_medal::relaxed:
String(describing:) で Any と Enum case を文字列へ

マッピンやデバッグやテストで使えそうなので、どんな状況使えそうかメモしときます。

## ドキュメント

- String(describing:)
  - https://developer.apple.com/documentation/swift/string/2427941-init

### 環境

この記事のコードは

- Xcode 11.2.1

で実行できます

## id のタイプが揺れてる時

id のタイプが雑で取り扱われて、 String か Int になってりすることありますよね。
そしてそれに対してモバイルがわなんとかしたい時使えます

``` swift
let id1: Any = "1" // String
let id2: Any = 1 // Int
```

String(describing:) を使えば中身間違えなく String 型に

``` swift
let stringId1 = String(describing: id1) // "1"
let stringId2 = String(describing: id2) // "1"
```

で、こういうような書き方はいらなくなるでしょう

``` swift
// value のタイプは Any 
if let value = value as? String {
    return value
} else if let value = value as? Int {
    return String(value)
} else {
    // ry
}
```

## enum の名前をプリントアウトする

携わってるプロジェクトにこういうようなテストヘルパがあります。

``` swift
// 定義された enum
enum FruitType: Int {
    // Just put some random numbers over here
    case dragonFruit = 777
    case apple = 988
}
```

``` swift
//　テストヘルバ
func createActivity(type: FruitType, raw: Int) {
    XCTContext.runActivity(named: "") { _ in
        XCTAssertEqual(raw, type.rawValue)
    }
}
```

```swift
// テストケース
import XCTest
@testable import YourTargetName

class FruitTypeTests: XCTestCase {
    func testDefinitions() {
        XCTContext.runActivity(named: "test definitions of FruitType's cases") { _ in
            createActivity(type: .dragonFruit, raw: 777)
            createActivity(type: .apple, raw: 988)
        }
    }
}
```

テストヘルパのところ、 name は定義されてないから、テスト結果はこうなってよくわからないレポートになってしまいます：

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41979/7f40d830-9872-cafc-6425-fa8ff662d3a6.png)

rawValue をその name の引数に入れるのも可能なのですが、これはさすがにわかり辛いなのでは。という気持ちはありました。

### どうしてもケース名表示したい!

改善したいためヘルパーをこうやって改造してみたら

``` swift
func createActivity(type: FruitType, raw: Int) {
    let typeName = String(describing: type)
    XCTContext.runActivity(named: "test the raw value of .\(typeName) is \(raw)") { _ in
        XCTAssertEqual(raw, type.rawValue)
    }
}
```

テストレポートもこうなりました

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41979/913a6bac-9597-a46e-8ff4-8a428917f998.png)

## 締め

とりあえず二つを書いてみました！以上です。

おかしいところ、間違えたところありましたぜひコメント欄へよろしくお願いします。

## 最後

台湾産のドラゴンフルーツはめっちゃうまいよ！
🌴【SourceTree】リモートのアイコンに出てくる「！」（感嘆符）を消す

## 環境

windows 10
SourceTree 3.3.4

## 内容

SourceTreeのリモートに「！」ビックリマークが付いて消えない
リモートのアイコンをクリックすると正しくGitHubには飛べる

![remote.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/188242/11ada4da-bae2-49d8-642e-708a2bd0de74.png)

## やったこと

1. 設定アイコンを押下
2. リモートタブからリモートリポジトリを選択して編集を押下
 1. 必要な情報の URL/パス: の内容が正しいか確認
 2. 外部サービスとの拡張統合オプションの Remote Account: を「Generic Account」から自分に変更

## 結果

消えました

その後、「Generic Account」に切り替えても出なくなった

## 追記

PC再起動したらまた出ててアカウント確認したら「Generic Account」になっていた
再度やったことと同じ対応で消せたがアカウントを固定にする設定が必要かも
Chewyを使用している際、Elasticsearchが落ちるとエラーになる対応

# 概要
RailsでElasticsearchを使いたくてChewyを入れたが、Elasticsearchが落ちているとupdate_indexができなくなるので対応した

## 前提
ActiveJob（Sidekiq）が動いていること

## Tips
* リクエスト側はデフォルトストラテジがatomicになっている
    * ここらへんを見た
        * https://github.com/toptal/chewy/blob/master/lib/chewy/railtie.rb#L18
        * https://github.com/toptal/chewy/blob/f9c02dddbcc4fc836f73330d8db331145c1ff012/lib/chewy/config.rb#L65

# 対応

##### config/application.rb
```
    Chewy.request_strategy = :active_job
```

##### config/sidekiq.yml
```
:queues:
  - default
  - chewy
```

queuesにchewyを追加する

## 結果
ActiveJob側で接続が失敗するのでとりあえず動くようにはなる
Elasticsearchへの同期は失敗しているが、復帰すればActiveJobがリトライしてくれるはず
FreeBSDのsyslogでfacilityがdaemonのログを出力する方法

FreeBSD12.1でとあるプログラムのログの出力がsyslogのdaemon.infoになっており、
デフォルトではファイルに出力されない設定のようなので、
syslogに設定を追加してfacilityがdaemonのログを出力するようにしてみます

```/etc/syslog.conf
# $FreeBSD: releng/12.1/usr.sbin/syslogd/syslog.conf 338146 2018-08-21 17:01:47Z brd $
#
#	Spaces ARE valid field separators in this file. However,
#	other *nix-like systems still insist on using tabs as field
#	separators. If you are sharing this file between systems, you
#	may want to use only tabs as field separators here.
#	Consult the syslog.conf(5) manpage.
*.err;kern.warning;auth.notice;mail.crit		/dev/console
*.notice;authpriv.none;kern.debug;lpr.info;mail.crit;news.err	/var/log/messages
security.*					/var/log/security
auth.info;authpriv.info				/var/log/auth.log
mail.info					/var/log/maillog
cron.*						/var/log/cron
!-devd
*.=debug					/var/log/debug.log
*.emerg						*
# uncomment this to log all writes to /dev/console to /var/log/console.log
# touch /var/log/console.log and chmod it to mode 600 before it will work
#console.info					/var/log/console.log
# uncomment this to enable logging of all log messages to /var/log/all.log
# touch /var/log/all.log and chmod it to mode 600 before it will work
#*.*						/var/log/all.log
# uncomment this to enable logging to a remote loghost named loghost
#*.*						@loghost
# uncomment these if you're running inn
# news.crit					/var/log/news/news.crit
# news.err					/var/log/news/news.err
# news.notice					/var/log/news/news.notice
# Uncomment this if you wish to see messages produced by devd
# !devd
# *.>=notice					/var/log/devd.log
!*
include						/etc/syslog.d
include						/usr/local/etc/syslog.d
```

# 1. syslogの設定追加
/etc/syslog.confを直接編集しても良いですが
別ファイルでincludeされるように出来ているので別ファイルを作成します

```/etc/syslog.d/daemon.conf
daemon.*                                          /var/log/daemon.log
```

# 2. ログのローテート用のnewsyslogの設定追加
syslogの設定だけで放置しておくとログが無限に溜まり容量を圧迫するため
ログのローテートの設定も行います

```/etc/newsyslog.conf.d/daemon.conf
## logfilename          [owner:group]   mode count size when  flags [/pid_file]            [sig_num]
/var/log/daemon.log                     644  7     *    @T00  JBC
```

# 3. ファイル作成＆syslogdの再起動
syslogdはファイルの作成はしてくれないようなのでファイルを作成したのち再起動します

```
# touch /var/log/daemon.log
# /etc/rc.d/syslogd restart
```

# 4. 確認

```
# logger -p daemon.info test
# grep test /var/log/daemon.log
Dec  5 10:01:24 hostname root[23146]: test
```
[Rspec][初心者向け] factorybot,binding.pry,エラーの日本語表記を使えるようにする

# Rspecを書く際にinstallするもの
Rspecでテストを書く際にGemfileに追加するものを挙げてみます。

1. binding.pry
2. factory-bot
3. エラーの日本語表記

です。

早速Gemfileに追加していきます。

## 1.binding.pry

```ruby
group :development, :test do
  gem "pry-rails"
end
```
binding.pryは`binding.pry`と書いた行の部分で処理をストップさせ、コンソールでparamsや変数に入っているものを確認することができます。
テスト以外でも本当によく使っております。助かってます。
使い方の詳細は以下の記事が参考になると思います。
[【Rails】Pryについて徹底解説！](https://www.pikawaka.com/rails/pry)

自分は`Rails 5.1.７`を使用しているのですがデフォルトで`byebug`が入っているようなので
こちらを使っても同じようにデバッグできるかと思います。

コンソールでbundleをインストールして使用します。

```
bundle install
```

## 2.factory-bot

１つ１つのテストごとにuserを生成するとコードも長くなり見にくくなってしまいます。
factory-botはテスト用にuserであったりそれに紐づく情報などを保存しておき、テストを書く際に呼び出すことができます。

Gemfileに追加します。

```ruby
gem "factory_bot_rails"
```
`bundle install`するとspecディレクトリ内にfactoriesというファイルが新たにできているかと思います。
こちらにuserなど生成していきます。
everyday-rspecでの例は以下のようになります。

```ruby
FactoryBot.define do
  factory :user, aliases: [:owner] do
    first_name "Aaron"
    last_name  "Sumner"
    sequence(:email) { |n| "tester#{n}@example.com" }
    password "dottle-nouveau-pavilion-tights-furze"
  end
end
```
このように書くとテスト内で`FactoryBot.create(:user)`と書くことでユーザーの生成ができるようになります。

## 3. エラーの日本語表記

例えばログインする際にパスワードを入力していない時、
「パスワードを入力してください」などの表示をさせたいと思います。
デフォルトのままでは

```
 - if @user.errors.any?
        .form-error
          ul
            - @user.errors.full_messages.each do |msg|
              li= msg
```
このような感じで書いても、英語のエラー文が出てしまうのではないかと思います。
日本語表記させるにはまず、Gemfileに

```ruby
gem "rails-i18n"
```
`bundle install`します。

このあと、config/localesのディレクトリ下に、
`ja.yml`というファイルを作成し、

```
ja:
  models:
  attributes:
    full_name: フルネーム
    user_name: ユーザーネーム
    email: メールアドレス
    password: パスワード

```

このような感じで書いていきます。

次に、config/apprication.jsに

```
config.i18n.default_locale = :ja
```

これを書くことで、Viewではエラーを日本語で表示することができます。

以上です。
抜け漏れありましたらぜひ教えてください！
LravelのLogLevelを環境変数で変更したい (6.0LTS)

タイトルの通り Laravel6.0LTS にて、ログレベルを環境変数で変更するための手順です。
チャンネルやその他の項目も含めてログに関するいろいろな設定については他に詳しい記事がありますのでそちらをご参照ください。
[Laravel5.6 での ログ設定について](
https://qiita.com/hrdaya/items/b01d5621937a0710ca64#%E7%89%B9%E5%AE%9A%E3%81%AE%E3%83%81%E3%83%A3%E3%83%B3%E3%83%8D%E3%83%AB%E3%81%AE-monolog-%E3%82%A4%E3%83%B3%E3%82%B9%E3%82%BF%E3%83%B3%E3%82%B9%E3%81%B8%E3%81%AE%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9)

ここでは、そこまで複雑なことがしたいわけではなく、シンプルに、開発環境ではDEBUGまで、ステージ、本番環境ではINFO以上でログを出力するのを、環境変数で調整したい、というやり方です。

# .env に変数を追加
適当な値でいいですが、  `project_root/.env` ファイルにLEVELを指定するための変数を追加します。
ここでは `LOG_LEVEL` としました。

~~~
LOG_LEVEL=info
~~~

# `config/logging.php` を修正
ファイルの中身を見ると以下のようになっているかと思います。
（コメント部分と後半は省略）

~~~
    'default' => env('LOG_CHANNEL', 'stack'),
    'channels' => [
        'stack' => [
            'driver' => 'stack',
            'channels' => ['daily'],
            'ignore_exceptions' => false,
        ],

        'single' => [
            'driver' => 'single',
            'path' => storage_path('logs/laravel.log'),
            'level' => 'debug',
        ],

        'daily' => [
            'driver' => 'daily',
            'path' => storage_path('logs/laravel.log'),
            'level' => 'debug',
            'days' => 14,
        ],
...
~~~

上の例では、`default=>stack`が指定されており、stackの中で`channels=>daily`が指定されています。
そしてdailyの`level=>debug`になっているため、DEBUG以上のログが出力されることになります。

そこで、この daily=>levelの部分を以下のように書き換えます。

~~~
            'level' => env('LOG_LEVEL','debug'),
~~~

あとは環境に合わせて、先程 `.env` に追加した `LOG_LEVEL` の値を変更してやれば、環境ごとに合わせたログレベルでログが出力されます。

ログレベルの一覧は [PSR-3でこのように定義されていて](https://github.com/php-fig/fig-standards/blob/master/accepted/PSR-3-logger-interface.md#5-psrlogloglevel) 記載されている順番の並びで、指定したレベルより上に書かれている内容が出力されることになります。

Laravelのバージョンいくつから使えるのかまでは調査していません（4.2と5.1のあと6.0に飛んだだめ…）が、`config/logging.php` の中身が同じような状態であれば使える方法かと思います。

---

なにか他にもっと簡単な切り替え方があるような気はするんですが、 `.env` にはじめから設定されている値は`LOG_CHANNEL` だけで、別にチャンネル切り替えるつもりは無いんだけど、レベルだけ切り替えるやり方というのが見当たらなかったのでやってみました。
「本来はこうするべき」というやり方がありましたら教えていただけると嬉しいです。
【画像あり】 Visual Studio Code をターミナルから開く初期設定まとめ( Mac )

備忘録です。

# ターミナルから Visual Studio Code を起動するための流れ
(以下、Visual Studio Code => VScode と表記)

1. まず ***VScode*** を開き、
「 shift 」 + 「 command 」 + 「 p 」 からコマンドパレットを起動
　

2. コマンドパレットに「shell」 と入力し、「 Shell Command: Install 'code' command in PATH 」
を選択するとインストールされる
![スクリーンショット 2019-12-05 11.20.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434223/7db913cf-4dd7-3ea6-efa5-c4e290964b68.png)
![スクリーンショット 2019-12-05 11.20.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434223/0c83beee-6aa0-cd0e-144f-e3ce88b4f891.png)

　
3. ***VScode*** を閉じて ***ターミナル*** を開き、下記コマンドを打つと起動

```
$ code . 
```
【覚書】LINEメッセージングAPIのアカウントを作る

メインコンテンツじゃないので、ざっくり書きます

　

### ①メッセージングAPIの作成にはdevelopersのアカウントが必要です。ない方は作りましょう。
https://developers.line.biz/ja/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/b50538c6-6898-39b6-43e9-4780faede594.png)



### ②プロダクトからメッセージングAPIを選択して、『今すぐはじめよう』から作成できます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/60679a45-e2b7-9939-d911-65b470e8a1d2.png)


### ③プロバイダーを指定して、プロバイダーの配下にAPI作成します
※プロバイダーがないからは作りましょう（手順は割愛）
API名とアイコンを設定します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/64f9de05-0408-250d-310f-5080c66f36cd.png)


### ④完成すると以下のようになります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/811986b9-3757-425a-1077-cd0f5a67354e.png)


### ⑤大事な設定と大事なメモをざっくり書きます

＜チャネル基本設定＞
あとで使います。控えましょう。
チャネルシークレット
あなたのユーザーID
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/9ae657c1-c435-2d16-e2c8-392dfb1d6013.png)



＜Messaging API設定＞
QRコード
　友達登録に必要です。　控えましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/f9c3ab72-0948-d804-6b87-74a4726f615a.png)

応答メッセージ
　└ 応答設定から、応答メッセージ：オフ　Webhook：オンに変更します

チャネルトークン
　└　発行ボタンを押して発行します。　発行されたトークンはあとで使うので控えましょう

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/b5127eca-7745-a382-81e9-8cee802183a1.png)


Webhook設定
　└ BOTのWebhookのURLを設定する必要があります

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/524081/8b4e002a-2428-88d8-3ac2-d053672e9053.png)
続・Goland使いこなせてない人向け tips 5選

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

去年のアドベントカレンダーで
[Goland使いこなせてない人向け tips 5選](https://qiita.com/mtoyoshi/items/b04d76939619f32a1b18)
というのを書いたのですが、その続編として今年も追加で5つほど選んでみたいと思います。

ネタ元は[こちら](https://pleiades.io/go/whatsnew/)。

とりあえず困ったら `Option + Enter` しておけば大体いい感じになります。

# tips1: 書式文字列引数を追加する
`%s` とか `%d` とか使う際に 「あれ、Booleanってなんだったっけ？」となる場合に便利な機能。
`Option + Enter`で「Add string format argument」を選んで入力するだけ！
![goland1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159/ad5ed131-a1b1-5099-e662-da32f97151da.gif)

# tips2: Method-Like Function Completion
`.`を入力すると通常のメソッド補完が起動しますが、そこで`Ctrl + Space + Space` とすると、その型を引数に取る関数を表示することが出来ます!
![goland2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159/b3488a7f-e581-cb0e-9c54-169a212be17f.gif)
ただし、Macの場合、キーボードショートカットがあてられているのでこっちをOFFにしないと使えないので注意。
<img width="668" alt="スクリーンショット 2019-12-05 11.09.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159/3c01c60e-26c9-33a0-e7f7-e3fde161a45e.png">

# tips3: コンストラクタ生成
構造体の宣言部で `Option + Enter` で「Generate constructor」を選ぶだけ!
![goland3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159/86344f3b-751d-5c6a-5378-7eeed7b1c53f.gif)

# tips4: 関数の自動生成
これは関数名だけ書いている状態なので当然エラーなわけですが、ここで `Option + Enter` して「Create function」を選ぶだけ!
![goland4.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159/5ad73bf9-e213-e778-919f-9e8e9f2e68f7.gif)

# tips5: forのPostfix completionで展開される変数名が賢く
Postfix completionのfor文を生成する `forr` で展開される変数名が賢くなった模様。
`lines` は `line` に、 `people` は `person` になっていますね!
![goland5.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159/dde11fcf-c421-2038-6835-77b4d07e12ba.gif)

# 番外編: Goのバージョンのインストールと切り替え
特定バージョンのインストールや切り替えは `Preferences > Go > GOROOT` から行うことが可能です。
![goland7.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159/6b332eca-ca05-011a-22fe-2e27b1e8e5fd.gif)
java Beans 備忘録

#はじめに
投稿練習を兼ねてjavaBeansについて勉強したことを書いてみる。

#javaBeansとは
Webアプリで操作を行うための"仕様"である。

javaで書かれた"再利用可能な"ソフトウェアコンポーネントらしい。
コンポーネントとは「部品」という意味がある。

#記述のルール
仕様なので記述には下記ルールがある。

* クラスをpublicで記述する。
* クラスの[メンバ変数](https://www.javadrive.jp/start/member/index1.html)(以下プロパティ)はprivateで記述する。
* publicで引数なしの[コンストラクター](https://www.sejuku.net/blog/24681)を定義する
* プロパティにアクセスするためにsetter,getterメソッドを用意する。
* java.io.Serializableを実装する。（必須ではない）
* [パッケージ化](https://www.sejuku.net/blog/63008)する
* クラス名の最後はBeanをつける(わかりやすくするため)


```java:QiitaBean.java
//パッケージ化
package pac1;
//クラス定義の最後にimplementsで実装
import java.io.Serializable;
//クラス名の最後にBeanをつける
public class QiitaBean implements Serializable{
  //メンバ変数(プロパティ)
  private int memberVariable = 0;
  
  //引数なしのコンストラクター
  public QiitaBean(){
  }

  //setterメソッド　set+プロパティでメソッドを作成すれば良い
  public void setMemberVariable(int hoge){
    this.memberVariable = hoge;
  }

  //getterメソッド　get+プロパティでメソッドを作成すれば良い
  public int getMemberVariable(){
    return this.memberVariable;
  }
}
```

#参考文献
[Samurai Blog](https://www.sejuku.net/blog/)
[Let'sプログラミング](https://www.javadrive.jp/)
【勉強メモ】JavaScriptのメモみたいな落書き

#JavaScriptを基本から見つめ直すことにした
reactとかvueとか今までに触ってきたが、やはり根本から理解することは大事なのでは？と思い立った。

#やったこと
シンプルにTODOリスト作成をやった。（まだできてない）

#参考サイト
■todoリスト参考サイト
https://qiita.com/__init__/items/d1c59c87808fc180c871
TODOリストのほぼ、答えを書いてくれている。3段階にわけて勉強。
1.写経
2.コードの読み解き
3.自力
解説をかなり詳しく入れてくれているわけではなかったので、それはそれで
自分で調べて学ぶいい機会になった。


■今どきのJSの書き方
https://qiita.com/shibukawa/items/19ab5c381bbb2e09d0d9
文章に勢いあるし、わかりやすい。

#以下、落書き
###querySelector(.a)
html側にあるform中のclass = a の要素を取得する。（オブジェクト型？）
このままだとオブジェクトのままなので、必要な値は取り出す必要がある。
変数 = [オブジェクト変数].[inputのname属性の名前].value;
で取得できる。

この関数の引数側に検索文字列を入力するが、なぜか前に.を入れないとうまくいかない。

###イベントリスナ
ナウいやつは以下。アロー関数型が流行りらしい
[要素を取得した変数].addEventListener('[メソッド]', e => {
    e.preventDefault();
});
大体こんな関数作ればいける。

###関数の作り方
const [変数名1] = 引数 => {
    const 変数名2 =`htmlの書式`;
    変数名1.innerHTML += 変数名2;
}

最近の書き方では、この形が一般的らしい。
functionで記述する時代は終わった？
htmlテンプレを生成して埋め込む準備をするのに使うと思う。
その際、バッククォートで囲むことに注意。
3行目みたいにするとこの変数を呼び出すだけで埋め込むことができる。
この中に入力された文字列を埋め込みたい場合、${引数}で表示可能。

###e.target
イベントターゲット。クリックの場合クリックされた対象のこと。

###classList
上のやつと合わせて使える。対象の要素をリストで取得する。

###contains
キーワード検索。includesとか

これから忙しくなるかもしれないので、現状までできている部分をここに記す。更新はできたらしたい。
vue.jsでデータをツリー構造・階層構造で表示する方法

Display a set of data with hierarchies.

■vuejsexamples
https://vuejsexamples.com/tag/tree/


■iview
https://www.iviewui.com/components/tree

■vue-beauty
https://fe-driver.github.io/vue-beauty/#/components/tree

■element-ui
https://element.eleme.cn/2.0/#/zh-CN/component/tree
Spring SecurityのPreAuthorizeで独自メソッドを呼び出す

Spring Securityのメソッド認可でちょっと複雑なロジックで認可したい場合、任意のbeanのメソッドを呼び出すことが出来ます。

ちなみにカスタム認証を正しく追加したい場合は PermissionEvaluator を実装するのが恐らく正当なアプローチです。
PermissionEvaluatorの実装についてはこちらの記事が分かりやすく詳しかったです。
拡張フレームワーク開発などで汎用的なEvaluatorを追加したい場合はこちらがよいでしょう。
https://www.codeflow.site/ja/article/spring-security-create-new-custom-security-expression

今回はもうちょっとお手軽な方法でも書けるよという手順です。

## Controller側のPreAuthorize定義

```Controller.java
    @PreAuthorize("@customPreAuthorizer.belongGroup(#groupId, authentication.principal)")
    @RequestMapping("/group/{groupId}/list")
    public String list(Model model, @PathVariable("groupId") Long groupId) {
    }
```

## Bean定義

```CustomPreAuthorizer.java
@Component
public class CustomPreAuthorizer {
    public boolean belongGroup(Long groupId, UserDetails userDetails) {
         // ここで独自認可を実装。実行を許可する場合にtrueを返す。
        return true;
    }
}
```

## 解説

PreAuthorizeのexpression内でBean名の先頭に@をつけることで、コンポーネント登録されたBeanを参照出来ます。
`@customPreAuthorizer`

認証ユーザのユーザ情報は`authentication.principal`で引数に渡すことが出来ます。

PreAuthorizeで引数に渡すのが記述として冗長であれば、メソッド内でSecurityContextを呼んでも同じものが取得できるので、メソッド内で取り出すことも可能です。

```CustomPreAuthorizer.java
@Component
public class CustomPreAuthorizer {
    public boolean belongGroup(Long groupId) {
        var userDetails = (UserDetails)SecurityContextHolder.getContext().getAuthentication().getPrincipal();
        return true;
    }
}
```

あとはUserDetailsを拡張して必要な情報をログイン時に持たせておけば、拡張した独自認可を実装して提供できます。
JavaScriptだけでTODOリストを作ってみた2



```HTML
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>todoリスト</title>
</head>
<body>
  <h1>TODO LIST</h1>
  <main>
    <form id="todo-form">
      <input type="text">
      <button id="btn" type='submit'>追加</button>
    </form>
    <!--ここにリストを形成!-->
    <ul id="todo-list"></ul>
  </main>
  <script>
(function(){
    'use strict';

    var todoForm = document.getElementById('todo-form');
    var todoList = document.getElementById('todo-list');
    var todoInput = document.querySelector('#todo-form input'); 

    var addItem = function(event){
         event.preventDefault(); 

        if(!todoInput.value){
            return;
        }

        var checkBox = document.createElement('input');
            checkBox.type = 'checkbox';

        var span = document.createElement('span');
            span.textContent = todoInput.value; 

        var label = document.createElement('label');
            label.appendChild(checkBox);
            label.appendChild(span);

        var del = function(e){
            var del_parent = e.target.parentElement; 
            todoList.removeChild(del_parent);
            };

        var delbtn = document.createElement('button');
            delbtn.textContent = "削除";
            delbtn.addEventListener('click',del);

        var list = document.createElement('li');
            list.appendChild(label);
            list.appendChild(delbtn);  

        todoList.appendChild(list);

        todoInput.value ='';
    };

    todoForm.addEventListener('submit',addItem);

})();
  </script>

</body>
</html>
```
未経験からＩＴ企業に就職した勉強メモ

2019.12.25更新

29歳IT業界未経験で
某無料プログラミングスクールで1.5か月学んで就職しました
年明け入場予定。（某企業本社）


勉強前のスペック
・文系私大卒
・macユーザ　winいじれるけど苦手
・HTMLは分かる
・ワードプレスでホームページ公開したがことある（ロリポップ使って）
・プログラミングは一切触ったことがない。
・エクセルとワードMOS2003エキスパート所持
　でもマクロとか全然忘れてる

#自分的勉強まとめ（Java）


■就職するまでの勉強
・スクールの勉強　基礎構文→SQL→バグ改修→個人開発
・ドットインストール有料登録
　寝る前とかに15分くらいドットインストールを見ていた。
・個人開発では、在庫管理システムを作る
　mySQLで登録、削除、追加、更新、画像の登録削除更新、キーワード検索、ソート機能など
[→自習が苦手ですぐ人を頼る自分の打開策](https://qiita.com/nekomaru991/items/23431f091f8bf3b47971)

■SES会社に入ってからjavaに関してやった勉強一覧（現在も）
（資格を取ったわけではない）

・Java基礎構文の総復習
　基本的なifとかforとか。スクールで忘れている部分を復習
　会社がWinを使っていて、Macユーザだったので、とにかくwinPCになれるところから始まるｗ

・プロゲート有料登録　→　java,javascript,CSS,コマンドプロンプト（少し）
・PAIZAラーニング開始　最初はEとかDランク
　全然解けない、慣れない、　制限時間が終わる（涙）
　タイムアップしたPAIZAをゆっくりと解く。（Dランク）

・サーティファイ3級、2級　無料問題

☆PAIZA　Cランク到達

・PAIZA有料登録
　HashMapの使い方の動画が役に立つ！


・オラクルsilver　アプリ問題集インストール（有料：2500円くらい）
　オラクルのアプリは電車のなかでもちょこちょこできるしボリュームがすごいので2500円の価値ある。
　内容一緒で本買うと4000円以上するからお得感ある。
　インクリメントとかスコープの範囲とか勉強になる

・レスポンシブ対応のホームページ公開
　一週間くらい掛けて制作。プロゲートのＣＳＳ講座（上級）がかなり役に立つ

・Cランク問題を10問くらい解く

・開発経験10年以上の先輩にアルゴリズムを教わる。

☆PAIZA Bランク到達
　制限時間2時間あったので少し余裕をもって取り組めた

・サーティファイ模擬試験　3級問題　80点以上確認（2回受験）

・PAIZAラーニング　Linux、シェルコマンド受講
　平行してprogate コマンドプロンプト受講
感じたこと、PAIZA、Progateの動画＆課題のみの受講だと
わけがわからない面もある。
どちらも平行して行うと説明不足な面が補えていい。

コマンドプロンプトについては個人的にプロゲートのほうが分かりやすかった。

---
随時更新。
最近名前をよく見かけるsvelte/sapperを試してみた ~その1 導入編~

# はじめに
最近フロントエンド界隈で「svelte」、「sapper」というワードをよく聞くようになりました。
どんな代物なんだろ？と少し気になり、触ってみましたので、覚書を兼ねて記事を書かせていただきます。

# svelteとは
<img width="350" alt="svelte.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/66330/61e224f7-0b57-29c6-b033-712013f970a0.png">

* 「すらりとした」という意味を持つ名の通り軽量で高速  
ベンチマーク上でReactの35倍、Vue.jsの50倍の速度らしい。
* 標準ではTypescript/SCSSといったメタ言語には未対応。  
* コンパイルすると svelteファイルをhtml/Javascript/cssに変換してくれる。

# sapperとは
* svelte を使ってwebアプリを作るためのフレームワーク。
* vue.jsでいうところの Nuxt.jsみたいなもの？
* SSR（サーバーサイドレンダリング）を提供してくれる。

# チュートリアル/リポジトリ
チュートリアルやリポジトリに関しては下記にあります。
## svelte
* [公式サイト](https://svelte.dev/)
* [チュートリアル](https://svelte.dev/tutorial/)
* [Gitリポジトリ](https://github.com/sveltejs/svelte)

チュートリアルポチポチやっていくだけでも大分面白いです！

## sapper
* [公式サイト](https://sapper.svelte.dev/)
* [Gitリポジトリ](https://github.com/sveltejs/sapper)


## インストール

### サンプルプロジェクトの作成
sapperのreadmeに記載があるように、 `npx` を用いてインストールを行います。
(npxの設定方法はここでは触れません。)
ここでは `sapper_sample` という名前で作成しています。


```zsh
% npx degit "sveltejs/sapper-template#rollup" sapper_sample
npx: 32個のパッケージを4.152秒でインストールしました。
> cloned sveltejs/sapper-template#rollup to sapper_sample
```

上記コマンドを実行すると、サンプルプロジェクトとして下記ディレクトリ群が作成されます。

```zsh
% tree .
.
├── README.md
├── cypress
│   ├── fixtures
│   │   └── example.json
│   ├── integration
│   │   └── spec.js
│   ├── plugins
│   │   └── index.js
│   └── support
│       ├── commands.js
│       └── index.js
├── cypress.json
├── package.json
├── rollup.config.js
├── src
│   ├── client.js
│   ├── components
│   │   └── Nav.svelte
│   ├── routes
│   │   ├── _error.svelte
│   │   ├── _layout.svelte
│   │   ├── about.svelte
│   │   ├── blog
│   │   │   ├── [slug].json.js
│   │   │   ├── [slug].svelte
│   │   │   ├── _posts.js
│   │   │   ├── index.json.js
│   │   │   └── index.svelte
│   │   └── index.svelte
│   ├── server.js
│   ├── service-worker.js
│   └── template.html
└── static
    ├── favicon.png
    ├── global.css
    ├── great-success.png
    ├── logo-192.png
    ├── logo-512.png
    └── manifest.json

10 directories, 29 files
```

### 依存関係のダウンロード
公式の `readme` にあるように、下記コマンドで依存関係のダウンロードを行います。

```zsh
cd sapper_sample
npm install 
```

### 開発サーバーの起動
```zsh
% npm run dev

> sapper dev

✔ server (995ms)
✔ client (1.0s)
✔ service worker (21ms)
> Listening on http://localhost:3000
```

### ページの表示
`http://localhost:3000` にアクセスすると、ダンディなおじさまが
爽やかな笑顔でお出迎えしてくれます。
![sapper_sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/66330/58750f9f-78e9-bcfd-506c-d0e964e7074d.png)

# 最後に
第一弾として、svelte/sapperのインストール/環境設定までを行いました。
(ほぼほぼreadmeを見ればわかることばかりになってしまいましたが・・・。)
次回からは実際にサンプルプロジェクトをいじって、挙動/構文等々の確認を行なっていきたいと思います。
サンプルプロジェクトまでの起動は本当に簡単なので、ご興味ある方はぜひお試しください！

# 共に働くWebエンジニアを募集しています!
不動産SHOPナカジツでは自社サービスを作っていく仲間を募集しています。
詳しくは[Wantedly](https://www.wantedly.com/projects/134741)からお問い合わせください。
お待ちしております！