OmniAICreator/Qiita-1.07M huggingface dataset:
【個人開発】Vue.jsとFirebase、Yahoo YOLP(地図)を使うとあっという間にサービス作れるんだなぁ...

タイトルままですが...

私は非喫煙者なんですが、ネットニュースで禁煙な店舗を探せるという某サービスが紹介されてました。

ほ〜と思ってサイトに行ってみると登録店舗が600ちょいしかありませんでした...

なんじゃこりゃ？と...なら自分で作ってみようかと金曜日の夜からこの週末を使って空き時間で禁煙なお店を検索できるサービスを作ってみました、実質8時間くらいかな？

こんな短時間でサービス作れちゃうご時世なんですね、ほんとに驚きです。

## 利用したサービスやフレームワーク

簡単にリストアップします。どれも有名ですので個別には紹介しませんが。

1. [Vue.js](https://jp.vuejs.org/) : 言わずとしれたＵＩフレームワークです。シンプルで好きです。
2. [Firebase](https://firebase.google.com/?hl=ja) : 今のところHostingのみ利用させていただいてます。
3. [Bootstrap](https://getbootstrap.com/) : 非デザイナでもそれっぽいサイトができていいですね。
4. [Yahoo YOLP](https://developer.yahoo.co.jp/webapi/map) : 地図と施設検索に利用させていただいてます。Yahoo!ローカルサーチAPIの検索パラメータに禁煙度がついていたのがこのサービスを自作しようとおもったきっかけにもなってます。
5. [Font Awesome](https://fontawesome.com/) : アイコンで利用させていただいてます。
6. [Flaticon](https://www.flaticon.com/) : アイコン画像で利用させていただいてます。
7. [Google Chart API](https://developers.google.com/chart/image/docs/gallery/dynamic_icons) : 地図のピンで利用させていただいてます。

## 禁煙店が探せるサービス「No Smoke !」

サイトのURLはつぎのようになります、Firebaseでありがちなプロジェクト名つけるとproject-xxxxとランダムな文字列がついちゃうんですが、「no-smoke」は空いててラッキーでした。

**[http://no-smoke.web.app/](http://no-smoke.web.app/)**

また、Firebaseのホスティングは.firebaseapp.comでしたが、先月末から.web.appというのも使えるようになりました、シンプルでいい感じですよね？

### メイン画面（検索）

検索画面になります、【現在地】ボタンをタップすると（座標が取れたら）その場所が地図の中心になります。

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51116/f0c63ddc-7d6e-94ac-9d23-9b5a61cdc2df.png)

一覧の【★】ボタンをタップするとお気に入りに登録できます。

### メニュー画面

ハンバーガーメニューをタップするとドロワー形式でメニューを出すようにしました。

ジャンル指定と、分煙でもいいかを選びます。

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51116/a7c50380-c6f0-bf69-371d-e5ff99bf6a01.png)

### お気に入り画面

お気に入りに登録してある施設一覧を表示します。

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51116/915b4f70-4cd4-c238-3ff3-6d0c414685ad.png)

Mapボタンをタップするとその場所が地図の中心になります。

## 技術的ポイント

う〜む、ツール類が良すぎてほとんど悩むこともなかったんですが、設定オプションやお気に入りの施設のデータを[Vuex](https://vuex.vuejs.org/ja/)で管理しつつ[localStrage](https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage)にも保存・読み込みすることでブラウザをリロードした時でも設定が保存されるようにしたことくらいですかねぇ〜

また、Yahoo!ローカルサーチAPIの結果ですがCORS制限に引っかかってしまうためどうしようかとおもいましたが、[vue-jsonp](https://www.npmjs.com/package/vue-jsonp)というまさに今回のためにあるようなモジュールがありましたのでそれを利用させていただきました。

また、[YahooのAPIには１日の利用制限がある](https://developer.yahoo.co.jp/appendix/rate.html)んですがそれを超過した時にエラーを判定してごめんね画面を出るようにしてあります。

ただそこそこ利用してもらわないと、この画面の確認ができないんですよね。😉

それにしても（繰り返しになりますが...）こんな簡単にWebサービス作れちゃうんですよね、恐るべしです。
久々、働き方改革!!Windows/Macbook Air → iPad Pro 3rd

# 現状の整理
自宅には、Windows 2台と、Macbook Airがある。
Windowsは、昔のLet's noteと、Dynabook satelliteがある。
Let's noteは軽量で良いのだが、性能を高くすると値段が上がるため、スペックはそこそこ。
その代わり、DynabookがCPU i7の、メモリ１６GB、ハードディスクがSSD 256GBとしていた。
が、ガタイがでかく持ち運ぶ、、、という代物ではなかった。

主に使っているPCはWindowsで、なんやかんやとWindowsでやっていた。EAの開発やら、ネットサーフィンなど。
Macbook Airは何に使っていたかと言うと、年一でiPadアプリのライセンス更新があり、その為だけに維持をしている感じ。というのもディスク容量が６４GBしかなく、あれこれ入れておけない、、、と言う事実。

# 働き方改革
と言うことで、現状の整理からなにか働き方改革ができないかと検討していた。

## やりたいこと
パソコンを持ち歩いて外でも気軽にプログラミングなどをしたい。ただし、予算はなるべく抑えた形で実現する。

## 考えたこと
とりあえず、最初に考えたのが持ち歩いて作業する。ということで以下の選択肢を思いついた
- Microsoft Surface
- iPad Pro
- Macbook
こんなイメージです。
ただ、Macbookは予算を15万以下としたいのと、タブレット型を希望していたため、対象外。
（そろそろ次のMacbookで画面タッチとかできるようになるのかなー）

## それぞれでやれること、やれないことの整理
ということで、端末選定するために、なにがやれて、何がやれない。。。と言うところから最終的な端末選定をしたいと思った。

### やりたいこと
- プログラミングをしたい
- ネットサーフィンをしたい
うーん。出してみたものの普通すぎる。。。
じゃあ、消去法で行こう！！

### 端末毎の自分が思う消去方
#### Surface
- Xcodeが使えない
- Surfaceの標準的なキーボードではUS版がない
- 大きさがちょっと(iPad Pro 11inchぐらいがちょうど良い)

#### iPad Pro
- こっちもXcodeは使えない
- ベースがWindowsや、Macと違い、アプリが前提となる
- iPadだとWindows/Macと比べ性能差が分かりづらい

# 結果
「iPad Pro 11inch」と、「Smart Keyboard Folio」にした。

## 今後
何かあったときのために、念のためにWindowsと、Macは1台ずつ残しておく、、、が基本的に大きいものはなくす。ということで、Dynabookは買い取りに出しました。

## このあとの課題
さて、端末は決まったわけですが、これからが大変です。できないと思っていることをなんとが代替案を講じて対応しなければならない。（普通は、先にそれを考えてから判断すると思いますが）
そこは次回に続きます
Azure ArtifactsでnpmのPrivateレジストリを作成して、さらにPublicレジストリも使う方法

# はじめに
Azure DevOpsシリーズの一つ、Azure Artifactsではプライベートなnpmレジストリを作成することができ、企業など組織内でインターナルに使用したいパッケージをホストすることができます。しかし特に設定を行わないと作成したプライベートレジストリにホストされたパッケージしかインストールすることができなくなります。（以下引用参照）
そこでAzure ArtifactsにはUpstream sourceと呼ばれる設定があり、それを使用するとパブリックなレジストリ(e.g. npmjs)とプライベートレジストリをマージしてプライベート/パブリックどちらのレジストリも使用することができます。


>npmクライアントは単一の優先レジストリ(Azure Artifactsではfeedと呼ばれる)で動作するように設計されています。また、セカンダリスコープのレジストリもサポートされています。スコープレジストリは、名前がスコーププレフィックスで始まるパッケージのインストールにしか使用できないため、使用方法はより制限されています。作成したプライベートパッケージとnpmjs.comのパブリックパッケージの両方を使用したい場合は、アップストリームソースを使用することをお勧めします。

[MS Doc- Azure Artifacts](https://docs.microsoft.com/ja-jp/azure/devops/artifacts/npm/upstream-sources?view=azure-devops)から抜粋

# 方法
[Azure Artifactsのドキュメント](https://docs.microsoft.com/ja-jp/azure/devops/artifacts/npm/upstream-sources?view=azure-devops)の通りに設定します。

## 新規でfeedを作成する場合
1. 新しいfeedを作成します。その際"Use packages from public sources through this feed" のラジオボタンを選択します。

## 既存feedにアップストリームソースを設定する方法
1. 右上にあるfeed設定を開いて歯車アイコンを選択してfeedの編集を行います。
2. Upstream sourcesを選択します。
3. CommandBarでAdd upstream sourceを選択します。
4. Select a feed URLでnpmjs.com ( https://registry.npmjs.org )を選択します。お好みで名前をカスタマイズできます。
5. Addを選択します。
塩を一振り(HashとSalt)

# はじめに

同じハッシュアルゴリズムを採用してる場合、同じデータは必ず同じハッシュ値になります。
これはもちろん一方向ハッシュのメリットなのですが、ログインが必要なサイトでパスワードをハッシュして保存してる場合など、そのままだとよろしくない。

# なぜよろしくないか

- aさんとbさんがたまたまXというパスワードを用いた場合に同じハッシュとなる。
- aさんのパスワードが判明したら自動的にbさんのパスワードが判明する。
- もしくはXというパスワードとYというパスワードが同じハッシュ値を得る場合でも片方がわかればもう片方のパスワードが判明したことと同じになる

# 対策

そこで、ハッシュしたいデータにランダムなデータを追加した物をハッシュし、ランダムなデータはハッシュ値の頭にでも追加するようにしておきます。

以下、PHPによるサンプルです。

```php:hash-test.php
<?php

$hash = makeHash();
var_dump("hash: {$hash}");
var_dump('verify: '.(verify($hash) ? 'true' : 'false'));

function makeHash()
{
    $salt = random_int(0, 65535);
    $hash = sprintf("%04x", $salt).md5($salt.date('Y-m-d'));
    return $hash;
}

function verify($hash)
{
    $salt = substr($hash, 0, 4);
    $salt = hexdec($salt);
    $hash = substr($hash, 4);
    return $hash === md5($salt.date('Y-m-d'));
}
```

これを実行すると以下のようになり、同一日付で実行している限り、同じデータでもハッシュ値は異なり、さらに照合は正しく行われることが確認できました。

```
$ php hash-test.php 
string(42) "hash: a90af0b9e2bbd0816ef8770ddf23867be8e2"
string(12) "verify: true"
$ php hash-test.php
string(42) "hash: b03c7eab59127e732f142d0d0abf5093a64d"
string(12) "verify: true"
$ php hash-test.php
string(42) "hash: 61cca0c2296cc8492214b5c8275d43060bd2"
string(12) "verify: true"
$ php hash-test.php
string(42) "hash: 116dda65929e79f330d3149e4773ec85b1e2"
string(12) "verify: true"
```

# 実は

PHPの場合は[password_hash](https://php.net/manual/ja/function.password-hash.php)という便利な関数がありますので、それを利用しましょう。
[PowerApps Tip's]アプリからTwitter投稿画面を起動する

PowerApps 、Microsoft Flow には標準でTwitterへ接続可能なコネクターが準備されています。それを利用すればアプリやFlowから任意のメッセージをツイートすることが可能です。

[PowerApps から Twitter に接続する](https://docs.microsoft.com/ja-jp/powerapps/maker/canvas-apps/connections/connection-twitter)
[Microsoft Flow Twitter](https://flow.microsoft.com/ja-jp/connectors/shared_twitter/twitter/)

この仕組みではなくて、このQiitaにもあるような「Tweet Button」みたいな動作を PowerApps にも組み込みたいコトありませんか？今回は、そんな場合の対象方法です。

#完成イメージ
<blockquote class="twitter-tweet" data-lang="ja"><p lang="fr" dir="ltr"><a href="https://twitter.com/hashtag/PowerApps?src=hash&amp;ref_src=twsrc%5Etfw">#PowerApps</a> Tweet Icon <a href="https://t.co/HPH9yztPoc">pic.twitter.com/HPH9yztPoc</a></p>&mdash; やま (@yamad365) <a href="https://twitter.com/yamad365/status/1135133687861825536?ref_src=twsrc%5Etfw">2019年6月2日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Twitterアイコンの向きが微妙なのは、ご愛敬ですｗ

#PowerAppsでTweet画面を起動する方法
「Launch」関数を利用します。公式情報は下記を参照ください。

[キャンバス アプリでの download、Launch、および Param 関数](https://docs.microsoft.com/ja-jp/powerapps/maker/canvas-apps/functions/function-param)

ボタンや画像など、好きなコントロールを配置します。そのコントロールの[OnSelect]イベントへ下記のようにツイート用URLを記入します。

```
Launch("https://twitter.com/intent/tweet")
```

これで、PCのブラウザーで操作した場合は新規投稿画面がブランクで起動します。なお、上記のパラメーターにしているURLを直接ブラウザーのURL欄へ入力すると同じ動作をするはずです。

#ハッシュタグなどをパラメーターで渡す
特定のハッシュタグなどを付与したり、デフォルトの文字列を渡したい場合は、PowerAppsのLaunch関数ではなくてTwitter側の仕様に従ってURLを指定すればOKです。冒頭で紹介した動画だと、こんな感じ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215892/e4d6f2c1-67e8-6833-789d-415eec8b59ea.png)

```
Launch("https://twitter.com/intent/tweet?text=%E3%81%BB%E3%81%92%E3%81%BB%E3%81%92&hashtags=PBIJP%2CJPAUG%2CJPSPS")
```

つまり、PowerAppsではLaunchしてるだけで、あとは全部Twitterの仕様なんですｗｗｗ
なお、スマートフォンの場合はTweet投稿用のデフォルトアプリが起動します。

###Tweet Button 公式情報
https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/guides/web-intent.html

文字列はエンコードしてないとダメなどのルールがあります。アプリ内で動的に生成する場合は色々と処理を作る必要がありますが、単純に文字列やハッシュタグだけ指定したい場合は生成ツールを利用すると便利です。

[ツイートリンク生成ツール](https://tools.ikunaga0.com/tweet-link/)

#おまけ
Twitterの公式リソースからアイコンなどが入手できますよ。

https://about.twitter.com/ja/company/brand-resources.html

#まとめ
- Launch 関数で PowerApps 以外のアプリも起動できるし、URLも投げられる
- Tweet Button の仕組みを丸ごとLaunch関数に指定することが可能
- 初期Textや、ハッシュタグなども簡単に初期指定できる
- 同じ仕組みのWebサービスなら、同様のテクニックが利用可能（なハズ）

PowerApps ってよりも、Webハックみたいな気もしなくも無いけど・・・
それでは、皆さま。素晴らしい Power Platform Life を！
xdg-open で開くアプリを変更する

# はじめに

コマンドから `xdg-open` で開くアプリを切り替える。


# 環境

- Manjaro Linux 18.0.4 illyria
- kernel: 4.19.45-1-MANJARO
- i3wm


# 手順

## mime タイプの取得

`photo.png` の mime タイプを取得する。

```
xdg-mime query filetype photo.jpg
```

## デフォルトのアプリケーションを取得

`image/jpeg` mime タイプのデフォルトで起動する `.desktop` ファイルを取得する。

```
xdg-mime query default image/jpeg
```

## デフォルトのアプリケーションを設定

pdf viewer を xpdf に変更する場合、 `application/pdf` mime タイプのデフォルトで起動する `.desktop` ファイルを `xpdf.desktop` に変更。

```
xdg-mime default xpdf.desktop application/pdf
```

以後、pdf を `xdg-open` で開くときは、xpdf が使われるようになる。

## .desktop ファイルの一覧

`/usr/share/application` に `.desktop` ファイルがある。

```
ls /usr/share/applications
```

# 参考

- [xdg-open - ArchWiki](https://wiki.archlinux.jp/index.php/Xdg-open)
- [How to properly and easy configure \`xdg-open\` without any environment? - StackExchange](https://unix.stackexchange.com/questions/36380/how-to-properly-and-easy-configure-xdg-open-without-any-environment)
Embulkでliquidテンプレート内でincludeするときの注意点

Embulkの設定ファイルは[liquid](https://github.com/Shopify/liquid)というテンプレートエンジンがデフォルトで使えます。

liquidの構文の中に `include`というものがあり、liquidファイルから別のliquidファイルを読み込ませることができます。
部分的にパラメータ化できるので便利です。

liquidでincludeで指定したファイルに日本語が含まれているとエラーになったので、その経緯をまとめます。

# 調査方法
[embulk-input-jdbc](https://github.com/embulk/embulk-input-jdbc)プラグインを使ってデータを取得する際は下記のような記述をします。

```yaml:sample.yml.liquid
in:
  type: jdbc
  url: your_url
  user: your_user
  password: your_password
  driver_path: /yourdriver.jar
  driver_class: org.your.Driver
{% include 'query_template' %}

out:
  type: stdout
```

```yaml:query_template.yml.liquid
  query: |
    SELECT id, name FROM Items WHERE name like '%好きなもの%'
```

これをembulk runを実行するとエラーになります。

```
org.embulk.exec.PartialExecutionException: org.embulk.config.ConfigException: 'table' or 'query' parameter is required
	at org.embulk.exec.BulkLoader$LoaderState.buildPartialExecuteException(BulkLoader.java:340)...
```

queryのパラメータが指定されてないというエラーです。
includeのパスは正しいので、includeの処理が何かおかしいです。

embulk guessで設定ファイルがどうなっているか見てみます。

```
in:
  type: jdbc
  url: your_url
  user: your_user
  password: your_password
  driver_path: /yourdriver.jar
  driver_class: org.your.Driver
Liquid error: internal

out:
  type: stdout
```

internal エラーと表示されました。これは確かにqueryというパラメータは指定されてないですね。
しかしこの情報では原因は良くわからない。

queryの中身を変えて試した結果 **日本語の有無** によってエラーが発生することがわかりました。
ちょっと調べにくいですね。

そもそもEmblukの設定ファイルに日本語が含まれていると文字化けしてしまうので、うまく扱うことができません。たまたまincludeの中で使ってしまったために原因が掴みにくく詰まってしまいました。

# 回避策
苦肉の策ですがViewを使ってクエリの中身を隠蔽し、日本語を記述しないことで回避できます。そもそも日本語を適切に扱う方法があれば一番いいのですが、何か方法があれば知りたいです。

# 2019-06-16 14:52 追記
@hiroysato さんにコメントいただき原因と対策が分かりましたので追記します。調査していただきありがとうございました。

問題の再現や、解決方法のサンプルスクリプトは下記に置いてあります。
https://github.com/tyubo/embulk-jp-test

## 原因
この記事で紹介したEmbulkの処理はdockerを使って実現していました。
そこにjavaの公式imageを使っていましたが、デフォルトの状態ではlocaleの設定が不十分で下記のような警告が出ていました。

```
locale: Cannot set LC_CTYPE to default locale: No such file or directory
locale: Cannot set LC_MESSAGES to default locale: No such file or directory
locale: Cannot set LC_ALL to default locale: No such file or directory
```
この状態でEmbulkを実行すると `file.encoding = ANSI_X3.4-1968` で動作することになり、UTF-8で記述された日本語を使うことができないようです。

そこでEmbulkを動作させるDockerfileを下記のように記述することで解消できました。(@hiroysato さんに助言いただきました）
https://github.com/tyubo/embulk-jp-test/blob/master/with_digdag_mod/Dockerfile

```dockerfile
FROM java:8-jre

RUN apt-get update && \
    apt-get -y install openssh-client

RUN sed -i '/jessie-updates/d' /etc/apt/sources.list &&\
    rm -f /etc/apt/sources.list.d/jessie-backports.list &&\
    cat /etc/apt/sources.list &&\
    apt-get update -qq &&\
    apt-get install -y locales

RUN localedef -f UTF-8 -i ja_JP ja_JP.UTF-8
ENV LANG="ja_JP.UTF-8" \
    LANGUAGE="ja_JP:ja" \
    LC_ALL="ja_JP.UTF-8"

RUN curl -o /bin/embulk -L "https://dl.bintray.com/embulk/maven/embulk-0.9.5.jar" && \
    chmod +x /bin/embulk

RUN mkdir -p /var/lib/embulk
WORKDIR /var/lib/embulk

COPY Gemfile .
COPY Gemfile.lock .

RUN embulk bundle install --path vendor/bundle
```
AWS configを無効化する。

# あぁああああああああああああああああああああああ
AWS configってどうやって無効化するんだよぉおおおおおおおおおおお
~~(取り乱してすみませんでした。)~~

# 解決方法
AWS CLIを使って無効化しましょう。

# 前提条件
・AWS CLIが使用できること
・AWS CLIでconfigが有効化されているリージョンが設定されていること
・jqコマンドが使用できること

# 忙しい人向けワンライナーコマンド
```console
# for a in `aws configservice describe-delivery-channels | jq -r '.DeliveryChannels[].name'`; do aws configservice delete-configuration-recorder --configuration-recorder-name ${a}; aws configservice delete-delivery-channel --delivery-channel-name ${a}; done
```

# その他
ルールを全て削除する際には[こちら](https://qiita.com/tsumita7/items/0fb0ce25d6b95ca5f44d)の記事を参考にしてください。

# 終わりに
AWSは偉大である。

皆さま良いAWSライフを！
【視聴メモ】Building Successful Websites: Case Studies for Mature and Emerging Markets (Google I/O ’19)

この記事は Google I/O '19 のセッションの視聴メモです。
想定読者は自分なので正確性や網羅率には問題があるかもしれません。

---

## References

https://www.youtube.com/watch?v=3As9NibdIjk
Speaker(s): Aanchal Bahadur, Matt Doyle, Jesar Shah, Charlie Croom, Rudra Kasturi

## Abstract

> Investing in the web has led to broader reach, meaningful engagement, and business impact for companies around the world. Come hear directly from them on how they are building successful websites for users in different network conditions, on a wide range of device-types, platforms and operating systems.

訳

> Webに投資することは幅広い層へのアピールと意味あるエンゲージメント、また世界中の企業へのビジネスインパクトをもたらします。ここではどのようにして様々なネットワーク状況・デバイスタイプ・OSとプラットフォームのユーザーに意味あるWebサイトを提供するかということをお話します。

## Contents

* Case Studies

**Twitter**

* Build once, ship to everyone
    * 一つのコードベースでDesktop,Mobile,FeaturePhoneすべてに対応した
* ツイート数が3倍に
* インストール数は500万以上
* Desktopとの違いは？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3387/56ff89e1-43f2-bde4-521c-92d506f0483f.png)

* フィーチャーフォンの場合は？
    * スマートフォンと違い、フローティングボタンはでかすぎて配置できないのでバーにリンクを出すだけにしている

**Times Internet**

* インドのインターネット企業
* ネットワーク強度の弱い村に住むユーザーが多い
* ニュースサイトでPWAを導入したが、パフォーマンスやエンゲージメントの点で最高だった
* 基本的な3つの要素(Code Splitting / Resource Optimization / Offline Caching)をきちっとやった
* Lighthouse満点
* PWAにしてユーザーの増加数が72%増加したしセッション時間が31%増加したよ
* **広告収入が59%増加した**
* 次は？
    * TWAでPWAをネイティブ化する
    * 普通のアプリに比べて8倍小さく、5倍速い

**Hulu**

* PWA Desktop
* ネイティブ版のレビューがひどすぎた
* Web版の方が良いぐらいだというレビューがあったのでWeb版だけにすることにした
* PWAにするために2つのことから始めた
    * Web App Manifestを書いてSWを導入した
    * 最低限のことをするのには開発者一人が2週間書けるだけでよかった
    * リサーチ、開発、QA、リリースすべてのステージでそれだけ
    * 1スプリントあればPWA化可能！

## Memo

* PWA! PWA!
* このセッションで話されたことはすべて web.dev で学習可能なコースとして整備されています
AWS config ruleをAWS CLIで一括削除する

# 初めに

AWS configのルールを削除しようと思ったのですが、
コンソール上からポチポチやるのはアレだったのでCLIでやることに。
~~べ、別に削除し忘れてお金請求されたわけじゃないですから。から。。。~~

# 前提条件
・AWS CLIが使用できること
・AWS CLIでconfigが有効化されているリージョンが設定されていること
・jqコマンドが使用できること


# はまったポイント
初めにruleの確認コマンドを打ったのですが、
なぜかruleが表示されない。。

```console
[root@ip-10-0-0-161 centos]# aws configservice describe-config-rules
{
    "ConfigRules": []
}
```

###### 解決策

[リージョン](https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/using-regions-availability-zones.html)を変えましょう。
私の場合オレゴンを使っていたのでus-west-2にしました。

```console
[root@ip-10-0-0-161 centos]# aws configure
AWS Access Key ID [****************XXXX]:
AWS Secret Access Key [****************/XXX]:
Default region name [ap-northeast-1]: us-west-2
Default output format [json]:
```

# 削除コマンド

***jqコマンドを使用しますので、***
インストールしていない方はyumなりを使って適当にインストールしてください()

```console
# for a in `aws configservice describe-config-rules | jq -r '.ConfigRules[].ConfigRuleName'`; do aws configservice delete-config-rule --config-rule-name ${a}; done
```

もし一覧を確認したい場合は下記コマンドで。

```console
# aws configservice describe-config-rules 
```

# AWS configを無効化する場合
[こちら](https://qiita.com/tsumita7/items/fb443e43b3aeb9e35f7a)の記事を参考にしてください。

# 終わりに
AWS便利ですけど、
たまに操作しづらいですよね。

皆さん良いAWSライフを！！
【画像生成】AutoencoderでDLの記憶について遊んでみた♬

DLの記憶について、Autoencoderでいろいろ遊んでみました。

###・DLの記憶に挑戦
ここまでで一応、DLの記憶に挑戦する準備ができました。
それは、どうしてもLatent空間の大きさを変化させてその様子を見たいと考えているためです。
まず、z_meanを二次元とします。
最初に７を100epoch学習します。
以下のようにいろいろな種類の７が並びます。
![autodetect_100_7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233744/be64a242-b209-53ad-105f-715c6a2a03b7.jpeg)
そして、その７を学習したweightを使って、８を100epoch学習します。
以下のようにいろいろな８が並びました。
![autodetect_epoch100.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233744/fba43039-a1ba-b031-e90b-6917a5eaf681.jpeg)
つまり、７を学習したのに８を100epoch学習したら、すっかり７を忘れてしまいました。

ということで、これは学習しすぎということで、epoch数を減少していきます。
5epoch
![autodetect_epoch5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233744/fdc02490-e03c-89b1-32dc-6883f9195f5c.jpeg)
上記のとおり、たかだか5epochで、もう８しか覚えていません。

2epoch
![autodetect_epoch2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233744/aa63fbe6-0527-0711-c7cd-ef66e0b43998.jpeg)
どうにか2epoch以下なら７の記憶があるようです。
そして、次に4を学習します。なんと1epochの学習で記憶がすべて4になってしまいました。
![autodetect_epoch1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233744/35c04795-3262-c821-794c-9accfb6bbe30.jpeg)
やんぬるかなw

###ここで、方針転換します。
Latent空間が小さいので記憶喪失に陥っていると仮定します。
つまり、Latent空間を大きくしていきます。
z_mean=3次元として、７を100epoch学習し、その後８を2epoch学習すると以下のようにまだ７を覚えています。
![autodetect_epoch2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233744/2bb52254-2344-f19f-3b56-c412bce81779.jpeg)
しかし、８を10epoch学習すると、またまたすべて８になってしまいました。
![autodetect_epoch10.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233744/2c74ff73-a540-5cbb-c112-6e1ac2ecccc2.jpeg)
###z_meanの次元が上がると。。。
そして、さてということで、z_mean=10次元として100epoch学習すると以下の絵が得られました。
![autodetect_epoch100L10.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233744/3b68d3e6-62d4-b3b6-d763-cf03eb9b4fc8.jpeg)
この絵を見ると、なんとなく７以外の数字も覚えているように見えます。
ということで、Latent空間の次元を徐々に増やして、２，３，５，１０，２０，１００、そして１０００次元で７を学習してみました。
その結果が以下のとおりになりました。
![autodetect_epoch100_Latent-dim.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233744/c0406748-a1eb-a139-f165-237a8e77c459.gif)
つまり、学習していないはずの数字までAutoencoderで再現できてしまいました。
最後のz_mean=1000の時の画像を貼っておきます。
![autodetect_epoch100L1000.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/233744/db54bfac-0852-c076-5e4b-ae7e33b34727.jpeg)
###まとめ
・潜在空間の次元が小さいとDLはすぐ忘れる
・潜在空間の次元が大きいと、明示的に学習していないことも覚える

・このとき何が起きているかを次回の記事にしたいと思います
未経験からIT業界へ入り、基本情報技術者を取得した感想

##自己紹介
・調理師として働いていましたが、興味のあったIT業界へ何も知らない状態から転職。
・IT業界へ入って１年程、現在は運用要員として客先常駐で働いています。
・将来的にはインフラエンジニアとして、構築・設計もできるようになりたいと思っています。
（開発方面にも興味があり、自分が何をしたいのか明確に決めかねているところでもあります。）

###基本情報技術者を受けようと思った理由
・IT業界へ入って間もなく、基本的な知識が欠如していると思ったので総合的に基礎知識を身につけたいと思っていました。

###取得日時
・平成30年度秋試験（10月実施）を受験。何とか1回目で合格することができました。
・点数は午前約81点　午後約71点でした。（正確な記録取るの忘れました；）

###勉強期間
・約2か月程。本当に未経験の人はもっと長い期間を見積もって、知識をつけるという意味でもコツコツ勉強した方がいいかなと個人的には思います。

###

###勉強方法
・IT業界未経験という事もあり、最初のうちは圧倒的に知識が足りない状態でした。なのでまずは参考書などを読み、わからない事は逐一調べて知識をインプットすることに専念しました。参考書を3周ほどやりました。

・ある程度インプットが進んだら今度は問題演習を中心に取り組みました。おそらく情報処理技術者試験を受験している人の大多数は使用している思われる、[基本情報技術者試験ドットコム](https://www.fe-siken.com/)の過去問道場を利用しました。午前対策はこのサイトだけで十分だと思います。

・午前試験は半分程度が、過去問から同じ問題がそのまま流用されます。なのでできるだけ沢山問題を解くことが大事です。自分は過去15回分（1200問くらい）解きました。このくらい解くと午前試験は問題なく突破できると思います。午前試験の過去問を解いていく過程で、わからないことは調べ、知識に肉付けをしていった感じです。

・分からない事が出て来たらそのままにせず、すぐ調べるようにしていました。情報系の参考書で共通して言える事が、解説が分かりにくい事が多々あります。ネットで調べていくと色々情報が出てくるので、ちゃんと理解できるようになるまで補完する事が大切だと思います。聞ける人が周囲にいるなら聞くのも大事です。Google力も同時につくので、調べることは大事です。

・午前試験の過去問がある程度スラスラ解けるようになってきたら、午後対策に入りました。午後対策用の参考書を用いて、過去問演習を繰り返しました。自分が利用した午後用の参考書はiTECの「基本情報技術者午後試験対策書」です。午後試験は単純な知識だけでなく、考えて答えを導き出す問題が多いため、単純知識だけでは難しい所があります。そのためにも午前試験の過去問で得た知識をちゃんと理解するということが大事だと思います。

###午後試験
・回答必須の問１のセキュリティに関しては比較的解きやすいと個人的には思っています。暗号化（公開鍵、秘密鍵、証明書等）の知識を正確に理解しておくことが大事だと思います。セキュリティの知識は実務でも重要です。

・午後試験のことについてもできるだけ詳しく書こうと思いましたが、最近基本情報技術者の午後問題が見直されるという話を聞きました。[IPAのサイト](https://www.jitec.ipa.go.jp/1_04hanni_sukiru/_index_hanni_skill.html)を見ると自分が受けた時よりプログラミングの能力重視になり、出題構成も配点も変更されるようです。なので、下手に古い情報は載せないようにしようと思います。

###取得してみた感想
・基本情報技術者試験の取得はあくまで始まりだと思っています。

・基本情報技術者を取得する過程で、基本的な用語などはわかるようになったと思います。もちろん取得して終わりではないので勉強は必要ですが、ITに関する知識が何もない人が体系的に知識を身に着けられるメリットはあると思います。

###未経験からIT業界を目指す方へ
・まずこの業界の事をよく調べておくべきです。（客先常駐という働き方、一言でITエンジニアと言っても色々な種類があること等）入ってから後悔しないように、事前の調査、情報収集は怠らないようにした方がいいです。

・IT業界は本当に日々勉強が必要な業界です。自分は割と楽しく働いていますが、常に勉強する事、プライベートでまで勉強する事が苦痛であればやめておいた方がいいと思います。

・調べる力・Google力が非常に大事です。分からない事を分からないままにせず、きちんと調べる。最も重要な要素の一つだと思っています。仕事上だけでなく、日頃から分からないことが出てきたら調べる癖をつけるようにするといいと思います。

・コミュニケーション能力は普通の仕事以上に必要です。ITというイメージ柄、コミュニケーション能力はあまり必要ないのでは、一人で黙々とPCに向かっているというイメージを持つ人もいるかもしれませんが、そのイメージは捨てた方がいいです。もちろん職場・現場によると思いますが、技術・スキルと同じくらいかそれ以上重要な要素だと思います。仕事を円滑に進める為にも相手に確認をとり、認識を共通させる等コミュニケーションをとる場面は多々あります。

・分からない事は正直に分からないと言うのが大事です。下手に知っているフリをするのはいい事がありません。分からない事は悪い事ではないと思っています。ただ、分からないことをそのままにするのは良くないです。

・自分はIT業界へ来て1年程ですが、割と満足しています。よく調べた上で、IT業界へ入ってくれる方が増えてくれればいいなと思っています。
windowsでiverilog その3

#概要

windowsでiverilogやってみた。
全加算器やってみた。

#サンプルコード

```
module FA(output sum, cout, input a, b, cin);
   wire w0, w1, w2;
   xor(w0, a, b);
   xor(sum, w0, cin);
   and(w1, w0, cin);
   and(w2, a, b);
   or(cout, w1, w2);
endmodule

module test;
   reg a, b, c;
   wire o, s;
   integer i, j, k;
   FA adder(s, o, a, b, c);
   initial begin
      $display("a b c o s");
      $monitor("%b %b %b %b %b", a, b, c, o, s);
      for(i = 0; i < 2; i = i + 1) begin
         for(j = 0; j < 2; j = j + 1) begin
            for(k = 0; k < 2; k = k + 1) begin
               a = i;
               b = j;
               c = k;
               #1;
            end
         end
      end
      $finish;
   end
endmodule
```

#結果


```

vvp a.out
a b c o s
0 0 0 0 0
0 0 1 0 1
0 1 0 0 1
0 1 1 1 0
1 0 0 0 1
1 0 1 1 0
1 1 0 1 0
1 1 1 1 1


```

以上。
windowsでiverilog その２

#概要

windowsでiverilogやってみた。
半加算器やってみた。

#サンプルコード

```
module HA(output sum, cout, input a, b);
   xor(sum, a, b);
   and(cout, a, b);
endmodule

module test;
   reg a, b;
   wire c, s;
   integer i, j;
   HA adder(s, c, a, b);
   initial begin
      $display("a b c s");
      $monitor("%b %b %b %b", a, b, c, s);
      for(i = 0; i < 2; i = i + 1) begin
         for(j = 0; j < 2; j = j + 1) begin
            a = i;
            b = j;
            #1;
         end
      end
      $finish;
   end
endmodule

```

#結果

```

vvp a.out
a b c s
0 0 0 0
0 1 0 1
1 0 0 1
1 1 1 0


```

以上。
新規登録のストロングパラメーターに新たなキーを追加する方法について

#1ストロングパラメーターとは？

ストロングパラメータとは、
ユーザーがビューで入力した特定の情報が、コントローラーへ送られて、それがパラメータとして安全に受け取らせるための仕組みをいう。

これは、ストロングパラメータにおいて、予め設定された情報以外は、コントローラーに受け取らせないという**セキュリティ的役割**を担っている。(MassAsignmentの脆弱性を突く攻撃に対処するための仕組みをいう。これは、
フォームが送信するparamsの内容を改ざんするなどして、開発者が意図していないデータをDBに保存させる攻撃のこと。)

#ストロングパラメーターの編集する意味

これは、deviseというgemをインストールすることで、設定することができる。
その場合、ストロングパラメータの初期設定としては、**メールアドレス**と**パスワード**のみを受け取るようにストロングパラメーターが設定してある。
そのため、新しいキーをコントローラに受け取らせるためには、ストロングパラメーターを編集しなければならない。

#2ストロングパラメーターの編集方法

ストロングパラメーターを編集方法としては、Railsのcontroller/application_controllerにおいて、**before_action**に**configure_permitted_parametersメソッド**を設定する。

```Ruby
class ApplicationController < ActionController::Base
    
    protect_from_forgery with: :exception
    before_action :configure_permitted_parameters, if: :devise_controller?

    def configure_permitted_parameters
      devise_parameter_sanitizer.permit(:ストロングパラメーターを追加したいアクション名, keys: [:追加するキー])
    end
end
```

たとえば、**名前**というキーをパラメーターを追加したい場合は、以下のように記述する。

```Ruby
class ApplicationController < ActionController::Base
    
    protect_from_forgery with: :exception
    before_action :configure_permitted_parameters, if: :devise_controller?

    def configure_permitted_parameters
      devise_parameter_sanitizer.permit(:sign_up, keys: [:name])
    end
end
```
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　以上
push.js のサンプル

[Push.js](https://pushjs.org/) のサンプルです。

jquery-3.4.1.min.js
push.min.js
なダウンロードしてサーバーに置いてあります。

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="/js/jquery-3.4.1.min.js"></script>
<script src="push.min.js"></script>
<title>Push.js Tutorial</title>
</head>
<body>
<div id="navbar"><span>Push.js Tutorial</span></div>
<p />
<div id="wrapper">
<button id="notify-button">Notify Me!!</button>
<button id="clear-button">Clear All!</button>
<button id="check-button">Check Permission</button>
</div>
      
<script src="example01.js"></script>
<p />
Jun/02/2019<p />
</body>
</html>
```

```js:example01.js
// ----------------------------------------------------------------------
// ----------------------------------------------------------------------
Push.config({
    serviceWorker: './customServiceWorker.js',
    fallback: function(payload) {
        // Code that executes on browsers with no notification support
        // "payload" is an object containing the 
        // title, body, tag, and icon of the notification 
    }
})

jQuery("#notify-button").click(function(){
	const message_aa = "皆さん こんにちは。 "
	Push.create(message_aa + "Hello world!",{
		body: "This is example of Push.js Tutorial",
		icon: 'sabe-notification-icon.png',
		timeout: 5000,
		onClick: function () {
			window.focus()
			this.close()
			}
		})
	})

jQuery("#clear-button").click(function(){ 
		Push.clear()
	})

jQuery("#check-button").click(function(){ 
	console.log(Push.Permission.has())
	console.log("*** check permission ***")
	})
// ----------------------------------------------------------------------
```

以上は、ネットでよく見かける push.js の使用例です。

まだ未解決の課題
サーバーサイドのプログラミング
> customServiceWorker.js を使うようです。
[python] 時系列データの補間

## 目的
pythonで時系列データの補間処理をしたい。下の図はサンプルプログラムの実行結果。1時間間隔のデータを30分間隔に補間している。
![Figure_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260124/e76f0b33-2e1b-aa89-e4d7-a910ce2e9416.png)

## サンプルコード
numpyとscipyのそれぞれの補間関数を使ったサンプルコード。

```interp_sample.py
import numpy
from scipy.interpolate import interp1d
from datetime import datetime, timedelta
import math
import matplotlib.pyplot as plt
import matplotlib.dates as mdates


def plot_data(x1, y1, x2, y2, x3, y3):
    f, (ax1, ax2, ax3) = plt.subplots(3)
    ax1.plot(x1, y1, "o-")
    ax2.plot(x2, y2, "o-")
    ax3.plot(x3, y3, "o-")

    ax1.legend(['original data'])
    ax2.legend(['interp data (linear) : numpy'])
    ax3.legend(['interp data (cubic) : scipy'])

    format = '%H:%M'
    ax1.xaxis.set_major_formatter(mdates.DateFormatter(format))
    ax2.xaxis.set_major_formatter(mdates.DateFormatter(format))
    ax3.xaxis.set_major_formatter(mdates.DateFormatter(format))
    # グラフの表示
    plt.show()


if __name__ == "__main__":
    # サンプル用の元データ作成。ここでは1時間間隔のデータを作る。
    t0 = datetime(2019, 6, 1, 12, 0)  # 初期時刻
    dt = timedelta(minutes=60)  # 時間間隔
    num = 6  # 要素数
    t = [t0 + dt * x for x in range(num)]
    x = [math.sin(2 * math.pi * x/(num-1)) for x in range(num)]

    # 補間用の時刻列作成。
    # ここでは元の時間間隔の半分の時刻列を作る
    dt_new = dt/2
    num_new = 2*len(t)-1
    t_new = [t[0] + x * dt_new for x in range(num_new)]

    # interp関数はdatetime型を受け付けない
    # 時刻をdatetime型からunix時間（float）に変換する
    t_unix = [x.timestamp() for x in t]
    t_new_unix = [x.timestamp() for x in t_new]

    # 方法1: numpy で補間
    x_numpy = numpy.interp(t_new_unix, t_unix, x)

    # 方法2: scipy で補間
    # 補間方法選択
    # kind = "linear", "nearest", "zero", "slinear", "quadratic", "cubic", "previous", "next"
    kind = "cubic"
    f = interp1d(t_unix, x, kind=kind)
    x_scipy = f(t_new_unix)

    # データ表示
    plot_data(t, x, t_new, x_numpy, t_new, x_scipy)
```

## 実行方法
```
python interp_sample.py
```
とすると，冒頭の図が出てくる。Python 3.7.3 で動作確認済み。パッケージが足りない場合は，以下のpipで入るはず。

```sh
# scipyのインストール（numpyも同時にインストールされるはず）
pip install scipy

# 可視化に使用するmatplotlibをインストール
pip install matplotlib
```

## 解説というか自分用メモ
- 補間処理ができるpythonパッケージとして，numpyとscipyが存在した。
  - [numpy.interp](https://docs.scipy.org/doc/numpy/reference/generated/numpy.interp.html)
  - [scipy.interpolate.interp1d](https://docs.scipy.org/doc/scipy/reference/generated/scipy.interpolate.interp1d.html#scipy.interpolate.interp1d)
- numpyは線形補間ぐらいしかできなさそうだが，scipyのほうは，線形補間以外にも`previous`，`cubic`など補間方法が豊富でこっちを使うほうがよさそう。
- scipyの`interp1d`関数はいわゆる高階関数で，戻り値が関数になっている。この実装は面白いと思った。確かにこっちのほうが使いやすい。
- どっちの補間関数も，横軸（x軸，時間軸）の変数が`datetime`型だとエラーが起きた。本サンプルでは`timestamp`によって，いったん[unixタイム](https://ja.wikipedia.org/wiki/UNIX%E6%99%82%E9%96%93)に変換している。

## 参考リンク
- [SciPy.org : Interpolation (scipy.interpolate)](https://docs.scipy.org/doc/scipy/reference/tutorial/interpolate.html)
- [SciPy.org : numpy.interp](https://docs.scipy.org/doc/numpy/reference/generated/numpy.interp.html)
- [SciPy.org : scipy.interpolate.interp1d](https://docs.scipy.org/doc/scipy/reference/generated/scipy.interpolate.interp1d.html#scipy.interpolate.interp1d)
docker-composeのインストール及びバージョンの選択 (Linux)

# 内容

Linux上で、docker-composeを任意のバージョンをインストールする。
Ubuntu上で`apt-get`だとかなり古いバージョンしか入らず、ドキュメントに書いてある通りやったらちゃんと意図したバージョンを入れられたのでメモ。


# インストール手順

[Install Docker Compose | docker docs](https://docs.docker.com/compose/install/) に書いてある通り。
執筆時点安定版最新の1.24を入れる。

```
$ sudo curl -L "https://github.com/docker/compose/releases/download/1.24.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
$ sudo chmod +x /usr/local/bin/docker-compose
$ sudo ln -s /usr/local/bin/docker-compose /usr/bin/docker-compose
```

```
$ docker-compose -v
```

# バージョンの選択


各バージョンに応じた方法はGitHubに載っているので参照。最新バーションが変わったり、古いバージョンを使いたい場合は参照する。curlするURL部分も丁寧に載っている。

https://github.com/docker/compose/releases
A-Frame を使ってみた

#はじめに
お手軽にVR表現ができるとのことで使ってみました。
何か動きがあるものを表示してみようと思います。


#準備
"aframe.min.js" を読み込む。

```sample_AFrame.html
<html>
  <head>
    <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-cylinder position="0 0.5 -3" radius="0.5" height="1.0" color="#88005D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#000000"></a-sky>
    </a-scene>
  </body>
</html>
```
![sample_VR.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282219/b2a803a1-2237-da5f-c952-5851435cbc06.jpeg)
マウスでぐりぐり動かせます。

他にもboxやsphereなどが使えます。
```<a-box></a-box>
<a-sphere></a-sphere>```

#動きがあるもの
"aframe-particle-system-component" を読み込むと、
particleを降らす事が出来ます。

```<a-entity position="6 2.5 6" particle-system="preset:star; color: #919130,#916100"></a-entity>```
preset:starに設定して、Cylinderから噴出している様に設置し、加えて雰囲気を出すためTextureを設定しました。


```sample_AFrame2.html
<html>
  <head>
    <meta charset="utf-8">
    <title>beer</title>
    <meta name="description" content="Hello, WebVR! • A-Frame">
    <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-particle-system-component@1.0.x/dist/aframe-particle-system-component.min.js"></script> 
  </head>
  <body>
    <a-scene>
      <a-assets>
      <img id="beer" src="https://cdn.glitch.com/f4cd694e-d69b-416b-ad55-05079f83a879%2Fbeer.jpg">
      <img id="skyTexture" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
      </a-assets>
      
      <a-entity position="6 2.5 6" particle-system="preset:star; color: #919130,#916100"></a-entity>
      <a-cylinder src="#beer" position="6 2.5 6" rotation="0 0 0" radius="0.5" height="1.5"></a-cylinder>
      <a-sky src="#skyTexture"></a-sky>
      <a-entity position="2 0 1">
        <a-camera></a-camera>
      </a-entity>
    </a-scene>
  </body>
</html>
```

![sample_VR2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282219/64bad22d-3c65-a60a-2d7c-2483f23c7359.gif)


あふれ出るビールが夜空に映えています。


#リンク 
以下参考にさせて頂きました。
ありがとうございました。

・A-Frameでいろいろ降らせる
https://qiita.com/idontwannawork/items/1ef2e1470d27ed522e11

・A FRAMEの使い方
https://github.com/katsube/neec2017A/wiki/A-FRAME%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9#%E3%83%86%E3%82%AF%E3%82%B9%E3%83%81%E3%83%A3

・HTMLを書くだけで誰でも簡単！A-FrameではじめるWeb AR/VR
https://www.slideshare.net/ssuserc0d7fb/htmlaframeweb-arvr

・Glitch
https://glitch.com/
【Kotlin】ガウス＝ルジャンドルのアルゴリズムを実装した

# ガウス＝ルジャンドルのアルゴリズムとは
円周率を計算するアルゴリズムです。

- [ガウス＝ルジャンドルのアルゴリズム \- Wikipedia](https://ja.wikipedia.org/wiki/%E3%82%AC%E3%82%A6%E3%82%B9%EF%BC%9D%E3%83%AB%E3%82%B8%E3%83%A3%E3%83%B3%E3%83%89%E3%83%AB%E3%81%AE%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0)

# ソースコード
今回はすばやく実装することを目指したので、`Double`で実装しています。故に精度は有りません。
計算はアルゴリズムそのままな書き方をしているので解説しません。

```kotlin
/**
 * 計算用の入れ物
 */
private data class CalcData(
    val a: Double,
    val b: Double,
    val t: Double,
    val p: Int
)

/**
 * 2乗
 */
private fun sqr(d: Double) = d * d

/**
 * 二乗根
 */
private fun sqrt(d: Double) = Math.pow(d, 0.5)

/**
 * 計算の本体
 */
fun gaussLegendre(n: Int) = generateSequence(
    // 初期値
    CalcData(1.0, 1.0 / sqrt(2.0), 0.25, 1),
    // 更新関数
    {(a, b, t, p) ->
        val aNext = (a + b) / 2.0
        val bNext = sqrt(a * b)
        val tNext = t - sqr(a - aNext) * p.toDouble()
        val pNext = p.shl(1)
        CalcData(aNext, bNext, tNext, pNext)
    }
).take(n).last().let { sqr(it.a + it.b) / (it.t * 4.0) }
```

## 実行結果
大体`n=4`で`Double`の精度の限界に達します。

```kotlin:テストコード
import org.junit.jupiter.api.Test

class TestGaussLegendle {
    @Test
    fun testGaussLegendle() {
        println(gaussLegendre(3)) // 3.141592646213543
        println(gaussLegendre(4)) // 3.141592653589794
        println(gaussLegendre(5)) // 3.141592653589794
        println(Math.PI)          // 3.141592653589793
    }
}
```
【pylint】 出力結果の警告についての備忘録

# pylintというPythonのファイル整形モジュールを使うと、いろんな警告がでがちですが、それを  ~/.pylintrc を編集して消す方法の備忘録
警告が出ても別にファイル自体の実行はできるけど鬱陶しいので消したい...

## モジュール(module)とは
Python インタプリタを終了させ、再び起動すると、これまでに行ってきた定義 (関数や変数) は失われてしまうため、より長いプログラムを書きたい場合、Python では定義をファイルに書いておき、スクリプトの中やインタプリタの対話インスタンス上で使う方法があります。このファイルを モジュール (module) と呼び、APIドキュメントの生成にも利用可能です。

## 警告と回避法をいくつか紹介
### Missing module docstring pylint(missing-docstring)
moduleに関する記述がないと言われています。
上記のエラーが出たら、```disabled = missing-docstring```を追加
この警告は、関数においても同様に出てしまうので、鬱陶しい。

因みに、下記のように説明文を加えて、警告を消すこともできます。

```python:sample.py 
def function():
    """functionの説明文
    説明文2行目
    説明文3行目
    説明文4行目
    """
```
### Import "from sklearn.svm import [module名]" should be placed at the top of the module pylint(wrong-import-position)
importはファイルの先頭にまとめて書きましょうと言われています。
関数の中でimportすると、関数を呼ぶたびにimport処理が実行されます。
モジュールは結局1度だけしかオブジェクト生成されませんが、無駄な処理です。
moduleを変な位置でimportしていると、出る警告。
```disabled = wrong-import-position```を追加すると消える。

### Variable name "[変数名]" doesn't conform to snake_case naming style pylint(invalid-name)
グローバル変数に、"_"を付けないと出る警告。
### Constant name "learn_data" doesn't conform to UPPER_CASE naming style pylint(invalid-name)
変数が大文字でないと出る警告。
```disabled = invalid-name```を追加すると消える。
Constant name "learn_data" doesn't conform to UPPER_CASE naming style pylint(invalid-name)

## 結論
どうやら警告の最後の()内を~/.pylintrcのdisabledに追加すれば、その警告は消えてくれるらしい。
## 参照
[pylint ドキュメント]
https://buildmedia.readthedocs.org/media/pdf/pylint/latest/pylint.pdf

https://docs.python.org/ja/3/tutorial/modules.html
fatal: Unable to write new index fileでcommitができない

# 結論
公式のgit.exeでリポジトリをクローンすればよい。

#どうしてこうなったか
Windows環境でnuxtを動かそうとしてハマりにハマった。
hyperを使うことで簡単にfish-shellの環境は作れたもののそのままリポジトリをクローンしたらコミットができなくなった。
【WSL】【fish】WSLでssh-agentを使う (fish版)

WSLでssh-agentを自動起動したい時、.bashrcに以下のような感じで記述すると思います。

```bash
SSH_AGENT_FILE=$HOME/.ssh/ssh-agent
test -f $SSH_AGENT_FILE && source $SSH_AGENT_FILE
if ! ssh-add -l > /dev/null 2>&1; then
  ssh-agent > $SSH_AGENT_FILE
  source $SSH_AGENT_FILE
  ssh-add $HOME/.ssh/id_rsa
fi
```

これをfishでも動くように改変しました。使いたい人もいるかもしれないので（僕とか）、ここに記載しておきます。

```bash
set -x SSH_AGENT_FILE $HOME/.ssh/ssh-agent
if test -f $SSH_AGENT_FILE
   source $SSH_AGENT_FILE
end
# 先にコマンドを実行して $status をif文で評価
ssh-add -l > /dev/null ^&1
if test $status -ne 0
  # ssh-agent に -c オプションを追加 (csh-style)
  ssh-agent -c > $SSH_AGENT_FILE
  source $SSH_AGENT_FILE
  ssh-add $HOME/.ssh/id_rsa
end
```
これで今のところ動いています。ご参考に。

【参考】
https://qiita.com/wing-tail/items/66ddcfe352664a182ba1
https://alpaca0984.github.io/2018/01/14/Using-ssh-agent-in-fish-shell/
fontawesomeのアイコンをリンク化するhamlの書き方

# Fontawesomeのアイコンのリンク化をhamlで実践

```
悪い例
= link_to "削除する", 〇〇_path ,method: :delete,class:"hidden"
  %i.fa.fa-trash-o{"aria-hidden": "true",href: 〇〇_path,method: :delete}
```
```
良い例
= link_to 〇〇_path ,method: :delete do
  %i.fa.fa-trash-o{"aria-hidden": "true"}
```

ポイント
①link_toのdoをつける　→　これが無いとa要素に入れ子できない
②link_toに”削除する”などの文字列を残しておくとエラー
Unity2019は追加モジュールのAndroid SDKでsdkmanagerを実行するのが面倒

# はじめに

Unity2019から追加モジュールとしてAndroid SDK/NDKをインストールできるようになりました。このAndroid SDKは`platforms;android-28`しか入っていないので他のAPIレベルを使いたい時はAndroid SDKにパッケージを追加インストールが必要になります。
ですが、Windowsの場合は以下の理由によりとても分かりにくくなっています。

* インストールパスが深い
    * Unity2019.1.4f1の場合: `C:\Program Files\Unity\Hub\Editor\2019.1.4f1\Editor\Data\PlaybackEngines\AndroidPlayer\SDK`
* デフォルトの`C:\Program Files`にインストールすると管理者権限が必要

そこで`sdkmanager.bat`があるフォルダを管理者権限のコマンドプロンプトを開くエディタ拡張を作りました。

# Android SDKのフォルダを管理者権限で開くエディタ拡張

※追記

Unity2018から追加されたPackage Manager対応版も用意しました。

- [Unityから組込みAndroid SDKとlogcatをサッと開くエディタ拡張](https://qiita.com/shiena/items/8ec1e821702a213fa32f)

---

以下のスクリプトを`Assets/Editor`フォルダに保存してください。
メニューに追加された`Tools/Open android sdk folder as administrator`を実行すると`sdkmanager.bat`があるフォルダを管理者権限のコマンドプロンプトで開きます。
その後は`sdkmanager "platforms;android-25"`のように必要なパッケージをインストールしてください。


```cs:Assets/Editor/AndroidSDKHelper.cs
#if UNITY_2019_1_OR_NEWER && UNITY_ANDROID && (UNITY_EDITOR_WIN || UNITY_EDITOR_OSX)
using System;
using System.Diagnostics;
using System.IO;
using UnityEditor;

public static class AndroidSDKHelper
{
#if UNITY_EDITOR_WIN
	[MenuItem("Tools/Open android sdk folder as administrator", false, 100)]
	private static void OpenAndroidSdkFolderOnWindows()
	{
		var androidPlaybackEngineDirectory =
			BuildPipeline.GetPlaybackEngineDirectory(BuildTarget.Android, BuildOptions.None);
		var androidSdkTools = Path.Combine(androidPlaybackEngineDirectory, "SDK", "tools", "bin");
		var jdkPath = Path.Combine(androidPlaybackEngineDirectory, "Tools", "OpenJDK", "Windows");
		var cmd = Environment.GetEnvironmentVariable("ComSpec");

		if (!Directory.Exists(androidSdkTools) || !Directory.Exists(jdkPath) || !File.Exists(cmd))
		{
			return;
		}

		var process = new Process
		{
			StartInfo = new ProcessStartInfo
			{
				FileName = cmd,
				Verb = "runas",
				UseShellExecute = true,
				Arguments = $"/K cd {androidSdkTools} & set \"JAVA_HOME={jdkPath}\""
			}
		};
		process.Start();
	}
#endif

#if UNITY_EDITOR_OSX
	[MenuItem("Tools/Open android sdk folder", false, 100)]
	private static void OpenAndroidSdkFolderOnMac()
	{
		var androidPlaybackEngineDirectory =
			BuildPipeline.GetPlaybackEngineDirectory(BuildTarget.Android, BuildOptions.None);
		var androidSdkTools = Path.Combine(androidPlaybackEngineDirectory, "SDK", "tools", "bin");

		if (!Directory.Exists(androidSdkTools))
		{
			return;
		}

		var process = new Process
		{
			StartInfo = new ProcessStartInfo
			{
				FileName = "open",
				Arguments = $"-a Terminal {androidSdkTools}"
			}
		};
		process.Start();
	}
#endif
}
#endif
```

# 所感

Unityをバージョンアップする度にAndroid SDKのパッケージも追加インストールが必要になるのでUnity2018以前のように個別にAndroid SDKをインストールする方が楽なのでは？

Unity2018以前のAndroid SDKのセットアップについて -> [Unity - Manual:  Android environment setup](https://docs.unity3d.com/2018.4/Documentation/Manual/android-sdksetup.html)
SQLでMax値を含む行を抽出する方法

#Max値を含む行を抽出する方法

###やりたいこと
例えば、次のようなケースを想定する。
社員名簿には、社員名・社員の所属部署・社員の給料のデータが含まれる。
所属部署ごとに、給料が最大の社員の行を抽出したい。

下記のテーブル(employee)を想定する。

| id               | Name             | Department       | Salary           |
|:-----------------|:-----------------|:-----------------|:-----------------|
| 1                | Tanaka           | Sales            | 500              |
| 2                | Suzuki           | Sales            | 600              |
| 3                | Yamada           | Sales            | 1000             |
| 4                | Nakano           | Accounting       | 650              |
| 5                | Inoue            | Accounting       | 550              |
| 6                | Nomura           | Accounting       | 450              |
| 7                | Nakajima         | Research         | 900              |
| 8                | Sugiyama         | Research         | 700              |
| 9                | Hayashi          | Research         | 1100             |

###実行環境
PostgreSQL
pgAdmin4

###Max行取得の実現方法
1.Max値を特定する-集約関数/分析関数の利用
2.特定したMax値を含む行を抽出する-JOINの利用

1.Max値を特定する-集約関数/分析関数の利用
まずは、各部署ごとの給料の最大値を特定する。
集約関数を利用する場合、group byで所属ごとに集約し、Maxの給料を表示する。

```sql:MaxSalayVal_group.sql
select Department, Max(salary) as MaxSalary
    from Employee
    group by Department 
```

表示結果

|Department|MaxSalary|
|---|---|
|Accounting|650|
|Research|1100|
|Sales|1000|



分析関数(window関数)を利用しても、partition byで所属ごとのmaxの給料を表示できる。

```sql:MaxSalayVal_window.sql
select id, Name, Department, Max(salary) over(partition by department) as MaxSalary
    from Employee
```

表示結果

|id|Name|Department|MaxSalary|
|---|---|---|---|
|4|Nakano|Accounting|650|
|6|Nomura|Accounting|650|
|5|Inoue|Accounting|650|
|9|Hayashi|Research|1100|
|7|Nakajima|Research|1100|
|8|Sugiyama|Research|1100|
|1|Tanaka|Sales|1000|
|3|Yamada|Sales|1000|
|2|Suzuki|Sales|1000|

2.特定したMax値を含む行を抽出する-JOINの利用
employeeテーブルと、1で作成したテーブルをjoinで結合する。
集約関数を利用した場合。

```sql:MaxSalayRow_group.sql
select emp_1.id, emp_1.Name, emp_1.Department, emp_1.Salary
    from employee as emp_1
    inner join
        (select Department, Max(salary) as MaxSalary
            from Employee
            group by Department )
        as emp_2
        on emp_1.Department = emp_2.Department and emp_1.Salary = emp_2.MaxSalary
```

表示結果

|id|Name|Department|Salary|
|---|---|---|---|
|3|Yamada|Sales|1000|
|4|Nakano|Accounting|650|
|9|Hayashi|Research|1100|


分析関数を利用した場合。

```sql:MaxSalayRow_window.sql
select emp_1.id, emp_1.Name, emp_1.Department, emp_1.Salary
    from employee as emp_1
    inner join
        (select id, Max(salary) over(partition by department) as MaxSalary
            from Employee)
        as emp_2
        on emp_1.id = emp_2.id and emp_1.Salary = emp_2.MaxSalary
```

表示結果

|id|Name|Department|Salary|
|---|---|---|---|
|4|Nakano|Accounting|650|
|9|Hayashi|Research|1100|
|3|Yamada|Sales|1000|

分析関数を用いると、on句でidが同じことも結合条件に加えられるので、分析関数を用いた方が良いですね。
(今回は問題ないけど、idで結合条件を書けない集約関数を用いた場合、うまくいかないことがある。)
【Python】範囲指定した中から、複数の異なる素数を取得する

# はじめに
この記事では100から1000を指定して、2つの異なる素数(3桁の素数)を取得するプログラムを記述してあります。
考え方は100から1000の数の中から、余りが0になる数がその数しかない場合を配列に格納していき、その配列をシャッフルしたのちに、0番目と1番目の要素を出力するといったものです。

# 完成したプログラム
こちらが完成したプログラムになります。

```互いに素.py
import random as rd

MinNum = 100
MaxNum = 1000
PrimeNum_list = []

CheckNum = 0
for i in range(MinNum,MaxNum):
	for j in range(2,i+1):
		if i%j==0: CheckNum+=1
		if CheckNum == 2: break

	if CheckNum == 1:
		PrimeNum_list.append(i)
	CheckNum = 0

#print(PrimeNum_list)
rd.shuffle(PrimeNum_list)
print(PrimeNum_list[0])
print(PrimeNum_list[1])
```

MinNumとMaxNumの数値を変えれば好きな範囲で出力できます。


また、random.sampleを使うと便利というコメントをいただいたので、その方法で少しプログラムを書き換えてみました。

```互いに素2.py
import random as rd

MinNum = 100
MaxNum = 1000
PrimeNum_list = []

CheckNum = 0
for i in range(MinNum,MaxNum):
	for j in range(2,i+1):
		if i%j==0: CheckNum+=1
		if CheckNum == 2: break

	if CheckNum == 1:
		PrimeNum_list.append(i)
	CheckNum = 0

print(rd.sample(PrimeNum_list,2))
```
random.sampleを使うと重複なしでリストからランダムで複数の要素を取得できます！



# 出力結果

- 互いに素.pyの実行例

```
389
953
```
上記は一例ですが、2つの異なる素数が出力されたら、成功です。

- 互いに素2.pyの実行例

```
[271, 547]
```



ちなみに3桁の素数は以下のようになります。

>101, 103, 107, 109, 113, 127, 131, 137, 139, 149, 151, 157, 163, 167, 173, 179, 181, 191, 193, 197, 199, 211, 223, 227, 229, 233, 239, 241, 251, 257, 263, 269, 271, 277, 281, 283, 293, 307, 311, 313, 317, 331, 337, 347, 349, 353, 359, 367, 373, 379, 383, 389, 397, 401, 409, 419, 421, 431, 433, 439, 443, 449, 457, 461, 463, 467, 479, 487, 491, 499, 503, 509, 521, 523, 541, 547, 557, 563, 569, 571, 577, 587, 593, 599, 601, 607, 613, 617, 619, 631, 641, 643, 647, 653, 659, 661, 673, 677, 683, 691, 701, 709, 719, 727, 733, 739, 743, 751, 757, 761, 769, 773, 787, 797, 809, 811, 821, 823, 827, 829, 839, 853, 857, 859, 863, 877, 881, 883, 887, 907, 911, 919, 929, 937, 941, 947, 953, 967, 971, 977, 983, 991, 997
javascriptのAOP

# AOPとは
Aspect Oriented Programming(アスペクト指向プログラミング）アスペクトの略称、プログラムの様々なうまく分離できなところを、アスペクトとしてを共通処理を横断的抜き出して統一的に記述することができるような手法です。
![Java--768x508.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255229/dbb9ac2f-d56a-c4f9-c37a-45fcc153c9b0.jpeg)
インメージ図引用元：[Spring AOP Tutorial – AOP for Beginners with Examples](https://www.edureka.co/blog/spring-aop-tutorial/)

## javascriptのAOP
色々な手法がありますが、今回はFunction.prototypeを例として紹介させていただきます。

```js
// before関数を定義する
Function.prototype.before = function( functionBefore ) {
  var _this = this;
  // 元々の関数とfunctionBeforeをそれぞれを返すようにする
  return function() {
    functionBefore.apply(this, arguments);
    return _this.apply(this, arguments);
  }
};
// after関数を定義する
Function.prototype.after = function( functionAfter ) {
  var _this = this;
  return function() {
    var result = _this.apply(this, arguments);
    functionAfter.apply(this, arguments);
    return result;
  }
};
// テスト用関数を用意する
var fn = function() {
  console.log('fn is running');
};
// before()とafter()をテスト用関数に「追加」する
fn = fn.before(function(){
  console.log('start!');
}).after(function(){
  console.log('end!');
});

fn();
```
結果は以下となります：
![console.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255229/d5f24b7d-c98f-fed5-2988-acf428613550.png)

'start!'、'fn is running'、'end!'が順次表示されることが分かりました。
# AOPの用途
- 上記のようなロギング処理
- トランザクション処理
- エラー処理

などの共通的な仕組み。
ブロック要素を縦方向に並べる方法

#ブロック要素を縦方向に並べる方法
vertical-alignプロパティではブロック要素に適用できない。ブロック要素中のテキストを縦方向の中央揃えにする方法を調べました。
[参考にしたサイト](https://qiita.com/Shinji-m/items/69a392685699f3ba95fb)

~~~HTML
<div class="box">text</div>
~~~

~~~CSS
.box {
    width: 100px;
    height: 100px;
    }
~~~

下記のCSSを追加すれば実現できる。
##line-height テキストが一行のみ

~~~CSS
.box-align {
    line-height: 100px;
}
~~~

##table-cell

~~~CSS
.box-align {
    display: table-cell;
    vertical-align: middle;
}
~~~

##Flexible box

~~~CSS
.box-align {
    display: flex;
    align-items: center;
    justify-content: center;
}
【tsuquyomi】TsuGeterrコマンドで出力されるエラーメッセージを日本語化する



vimrcに以下を記述する。

```vim
let g:tsuquyomi_locale = 'ja'
```

以下のように日本語化される。

![tsu_geterr.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240412/c3dc5a7f-13d7-a6e6-340b-68f06d347cc4.png)

## 参考
https://github.com/Quramy/tsuquyomi
https://github.com/microsoft/TypeScript/wiki/Standalone-Server-%28tsserver%29
Facebookの友人に、誕生日になったら自動でメッセージを送信（投稿）するには？

こんにちは。初めて投稿させていただきます。

表記に御座います通り、Facebookの友人に、誕生日になったら自動でメッセージを投稿（もしくはメッセンジャーでメッセージを送信）するには、どのようにすればよいでしょうか？

友人から頂戴しましたアドバイスでは、GCPをたてて、そこでLinuxのOSの元pythonを用いてコードをかく、との事でした。
一旦GCPをたてて、progateレベルのpythonを勉強致しましたが、そこからどのようにコードを書けばよいのかまったくわかりません。

どなたか、お力添えいただけませんでしょうか？