OmniAICreator/Qiita-1.07M huggingface dataset:
PowerPointのスライドの右隅に総ページ数を挿入するVBScript


スライド番号は出せるのに・・・　という、ネタ自体はよくある話。
最初はPowerPointのVBAマクロで作り始めたけど、
それより外出ししてVBScriptにしたほうが扱いやすいかなと思い、軌道修正。
スライドのページを追加・削除したら、最後に自分でこのスクリプトを走らせる感じで使っています。
位置や文字色やサイズは自分の環境にあわせて適当に変えてください。

```vb
InsertTotalNumberOfPagesToSlideMaster

Sub InsertTotalNumberOfPagesToSlideMaster()
    Const TNOP= "TotalNumberOfPages" 
    Set PPAP = GetObject(, "PowerPoint.Application").ActivePresentation
    
    With PPAP.SlideMaster
        For Each shp In .Shapes
            If shp.Name = TNOP Then Exit For
        Next
        If IsEmpty(shp) Then Set shp = .Shapes.AddTextbox(1, 0, 0, 10, 10)
        shp.Name = TNOP
        shp.TextFrame.TextRange.Text = "/" & PPAP.Slides.Count - 1
    End With
    
    With shp.TextFrame
        .WordWrap = 0
        .AutoSize = 1
        .MarginRight = 0
        With .TextRange.Font
            .Size = 9
            .Name = "Meiryo UI"
        End With
    End With

    With shp
        .Left = .Parent.Width - .Width
        .Top = .Parent.Height - .Height
    End With

End Sub
```
firewalldとSELinux無効化

# LAN内なのでいらない
ローカルネットワークのみに接続しているLinuxマシン。OSはCentOS 7.6。
firewalldやSELinuxの学習は目的ではなく、物理的に外部から接続できない環境であるため無効化したい。

# 無効化する
```bash:console
[root@xxxxx ~]# systemctl stop firewalld && systemctl disable firewalld
Removed symlink /etc/systemd/system/multi-user.target.wants/firewalld.service.
Removed symlink /etc/systemd/system/dbus-org.fedoraproject.FirewallD1.service.
[root@xxxxx ~]# cp -p /etc/selinux/config /etc/selinux/config.org
[root@xxxxx ~]# vi /etc/selinux/config
[root@xxxxx ~]# diff /etc/selinux/config /etc/selinux/config.org
7c7
< SELINUX=disabled
---
> SELINUX=enforcing
[root@xxxxx ~]# reboot
```
The Elk Codeビルドの備忘録

## Elkの概要
[The Elk Code](http://elk.sourceforge.net/)
LAPW基底を使った固体の第一原理計算コード。

## GCC-4.8.5を使ったElk-4.3.6 のビルド(MPI, libxcのリンクは無し)
Elkは基本的にMakefileを使ったビルド。
elk-4.3.6.tgzを解凍する。

```bash
./setup
```
で、選択肢が表れるので適宜数字を入力。
すると、同じディレクトリにある`make.inc`に適切な設定が書き込まれる。
ここで、

```bash
make all
```
で、ひとまず実行可能なファイルが`${elk_HOME)/src/elk`として出来る。

この手続きでは、`$(elk_HOME)`以下にあるBLAS/LAPACKのコード群をビルドしてリンクしている。
従って、システムに入っているBLAS/LAPACKはリンクされていない。

適切なBLAS/LAPACKをリンクしたい場合は、`make.inc`を編集する必要がある。
MPIを使いたい場合や、libxcをリンクしたい場合も適宜`make.inc`を編集する必要がある。

## oneAPI-hpckit 2025.1.0を使ったElk-10.4.9のビルド(libxcのリンクは無し)
2025/5/6時点での最新版のElk-10.4.9を`wget`で落として`tar -zxvf`で展開して、GNU makeでビルドする方法をまとめる。前提として、oneAPI-hpckitが入っている状態を念頭に置く。(例えば [Intel oneAPIを一般ユーザー権限で入れる #oneAPI - Qiita](https://qiita.com/Yasushi-Shinohara/items/b9590fb385c50493dfbc)を確認)

まず、[Elk -  Browse Files at SourceForge.net](https://sourceforge.net/projects/elk/files/)から最新版ソースをダウンロードする。「Download Latest Version」の緑のボタンのURLを「リンクをコピー」でゲットして、
```bash
wget https://sourceforge.net/projects/elk/files/latest/download
```
とすると、その時点での最新版(2025/5/6現在ではElk-10.4.9)のtarballがダウンロードされる。このとき、<font color="red">ダウンロードされるファイル名が`download`になっているので要注意。</font>

拡張子もないが、これを
```bash
tar -zxvf ./download
```
をすると、きちんと`elk-10.4.9`なるフォルダが現れるので問題無し。
`$ELK_ROOT/src`内の`make.inc`がデフォルトでは、`Intel Fortran compiler classic (ifort) version 18 and later.`がアクティヴになっているので、それをコメントアウトして、`Intel Fortran LLVM-based compiler (ifx).`の項目がアクティブになるように変更:
```makefile:$ELK_ROOT/src/make.inc(抜粋)
#-------------------------------------------------------------------------------
# Intel Fortran LLVM-based compiler (ifx).
F90 = mpiifx
F90_OPTS = -O3 -xHost -ipo -qopenmp -qmkl=parallel
F90_LIB = -liomp5 -lpthread -lm -ldl
SRC_MKL =
AR = xiar
#-------------------------------------------------------------------------------

#-------------------------------------------------------------------------------
# Intel Fortran compiler classic (ifort) version 18 and later.
#F90 = mpiifort
#F90_OPTS = -O3 -xHost -ipo -qopenmp -mkl=parallel
#F90_LIB = -liomp5 -lpthread -lm -ldl
#SRC_MKL =
#AR = xiar
#-------------------------------------------------------------------------------
```

これで`Makefile`があるディレクトリで`make`でビルド完了。<font color="red">該当ファイルは`$ELK_ROOT/src/elk`。</font>
Async, TaskのExceptionに関する備忘録

Async, Taskの個人メモ(考え)
async awaitが入っているメソッドは、細かく言えばMainとWorkerで実行されるが、.netでは安全を期するためにそのメソッド全体を非同期メソッドのようなものと判断し、例外が出た場合は別スレッドででたExceptionとして、MainThread側のコールスタックを登らないようにしているのだと思われる.
だからTask.IsFaultedみたいなものを用意して、waitでmainに処理を戻したときにexceptionを受けとれるようにしている.

awaitする前に例外処理吐くコードがあるAsyncメソッドならばローカルメソッドで分離してやれる.
AWS Lambda RubyのLambda関数内で別のLambda関数を実行する

## はじめに

Lambda関数内で別のLambdaを実行したい時がたまにありますが、Rubyでの実行方法について記載しておきます。

## 環境

* AWS
* Lambda（東京リージョン）
* Ruby 2.5

> Lambdaの呼び出し元の関数と呼び出し先の関数は同一のリージョンで作成する必要があります。
> 今回は東京リージョンで作成することにします。なので、Clientインスタンスの作成時にap-northeast-1を指定します。

## 呼び出し元のLambdaを作成

まずは実行元となる`A-Lambda`という名前のLambda関数を作成します。
そして以下を入力

```ruby
require 'json'
require 'aws-sdk'

def lambda_handler(event:, context:)
    client = Aws::Lambda::Client.new(region: 'ap-northeast-1')
    payload = JSON.generate('hello world!')
    resp = client.invoke({
        function_name: 'myFunc',
        invocation_type: 'RequestResponse',
        log_type: 'None',
        payload: payload
    })
    
    { statusCode: 200, body: JSON.generate('Hello from Lambda!') }
end

```

payloadにJSONの形で値を含めることで、呼び出し先の`event`に値を渡すことが出来ます。

## 呼び出し先のLambdaを作成

呼び出し先となる`B-test`Lambda関数を作成

```ruby
require 'json'

def lambda_handler(event:, context:)
    # TODO implement
    puts event
    { statusCode: 200, body: JSON.generate('Hello from Lambda!') }
end
```

`A-test`関数が実行されると、payloadに代入した`hello world!`が`B-test`関数の`event`に代入されるので、`B-test`関数で`puts event`を実行すると、`hello world!`が表示されます。
sshで繋ごうとすると接続確立までが遅い時の対処法

# ssh接続がなんか遅い
ローカルネットワークのみに接続している実Linuxマシン。OSはCentOS 7.6。
手元のPCからssh接続すると接続が確立するまで長いウェイトが入る。
なんとかしたい。

# sshd_configを書き換える

```bash:console
[root@xxxxx ~]# cp -p /etc/ssh/sshd_config /etc/ssh/sshd_config.org
[root@xxxxx ~]# vi /etc/ssh/sshd_config
[root@xxxxx ~]# diff /etc/ssh/sshd_config /etc/ssh/sshd_config.org
18c18
< AddressFamily inet
---
> #AddressFamily any
79c79
< GSSAPIAuthentication no
---
> GSSAPIAuthentication yes
115c115
< UseDNS no
---
> #UseDNS yes
[root@xxxxx ~]# systemctl reload sshd
```

これで解決した。
laravel 検索条件 関連モデルを条件に

withに条件を書くには？
と聞いたらteratailで教えてくれた。

whereHasを使えばいいのね。

ありがとう。

```

        //デバッグ用ダミーデータ
        $request->sex = 1;

        $request->age = [
            'from' => 33,
            'to' => 50
        ];

        //use Carbon\Carbon;

//        写真、プロフィールを持っている
//        sex が 1 のユーザー
//        prefが14のユーザー
//        年齢でも検索
        $sql = User::whereHas('photos')
            ->whereHas('profiles', function ($query) use ($request){
                $query
                    ->where('sex', $request->sex)
                    ->where('pref',14)
                    ->where('price','>=',7950);


                if(!empty($request->age['from'])){
                    $latestBirthday = Carbon::now()->subYear($request->age['from'])->format('Y-m-d');
                    $query->where('birthday', '<=', $latestBirthday);
                }
                if(!empty($request->age['to'])){
                    $earliestBirthday = Carbon::now()->subYear($request->age['to'] + 1)->addDay()->format('Y-m-d');
                    $query->where('birthday', '>=', $earliestBirthday);
                }

            })
            ->with(
                [
                    'profiles',
                    'photos'
                ]
            );

        

        $res = $sql->paginate(5);

```
"Config does not conform to schema"で怒られたら確認してほしいところ

Circle CIを触ってて、`jobs`が複数ある場合、`workflows`は以下のような書き方になると思います。(一例)
<img width="350" alt="スクリーンショット 2019-03-22 13.52.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/252687/628757be-8d59-21d0-9f87-53586a44810d.png">

しかし、この書き方だと、Build Errorが起きてしまいます。

<img width="903" alt="スクリーンショット 2019-03-22 13.58.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/252687/5fc5d0d3-a22a-5f8b-979b-1668ebb83560.png">

でも大概、こういう時って凡ミスなんですよね。

そうここ。

<img width="350" alt="スクリーンショット_2019-03-22_13_52_46.png" src="https://qiita-image-store.s3.amazonaws.com/0/252687/9ac29586-affa-e671-437b-800748b5565c.png">

ここで定義する、`jobs`ですが、特段`requires`や`filters`がない場合は、<font color="red">つけてはいけません。</font>`key`ではなく、ただの呼び出し`value`だからだそうです。

いやはや、Circle Ci触り始めの方はお気をつけを:relaxed:

# 参考
https://discuss.circleci.com/t/config-does-not-conform-to-schema/28079
request spec 参考oss

# 概要
今後controller specではなくrequest specを書いた方が良いそうです（[参考](https://qiita.com/t2kojima/items/ad7a8ade9e7a99fb4384)）。

それはともかく、あまり仕事でrspecを書いた経験も少ない上、一から構築する予定なのでrequest spec の書き方について参考になるものはないかと思ってgithub上のソースを調べました。
minitestを使っているものはなんとなくintegrationテストが近そうなのでそちらを参考にしました。

# [gitlab](https://github.com/gitlabhq/gitlabhq)
こちら結構しっかり書いてありますね。
apiのrequest specも書いてあり参考になりそうです。

例

```ruby
describe API::Deployments do
  describe 'GET /projects/:id/deployments' do
    context 'as member of the project' do
      it 'returns projects deployments sorted by id asc' do
      describe 'ordering' do
        it 'returns the deployments ordered' do
```

gitlabはcontroller spec残ってますね。

## テストの構成
Controller名 -> HTTP Method + path -> 条件 -> 期待値 -> 条件 -> 期待値

# [discourse](https://github.com/discourse/discourse)
request spec書いてありますが、controller specを移植しただけな印象。
controller specはありません。

# [spree](https://github.com/spree/spree)
結構しっかり書いてあります。
`controller#method`と書いているあたりcontroller specのような？

```ruby
describe 'API V2 Storefront Checkout Spec', type: :request do
  describe 'checkout#next' do
    context 'without line items' do
      it 'cannot transition to address without a line item' do
```

### テストの構成
機能名 -> Controller名 + method名 -> 条件 -> 期待値

subjectではなく、以下のように定義してexampleの中で呼び出しているのが印象的

```ruby
let(:execute) { patch '/api/v2/storefront/checkout/advance', headers: headers }
```

# [redmine](https://github.com/redmine/redmine)
rspecじゃないですね。minitest使ってます。

```ruby
test "GET /users/current.xml should require authentication" do
  get '/users/current.xml'
  assert_response 401
end
test "GET /users/current.xml should return current user" do
  get '/users/current.xml', :headers => credentials('jsmith')
  assert_select 'user id', :text => '2'
end
```

シンプルですね。

### テストの構成
アクセス先 + 期待値

# [feedbin](https://github.com/feedbin/feedbin)
minitest
integrationテストはない

# 参考
今回参考にしたのはこちら
* http://post.simplie.jp/posts/19
* https://qiita.com/t2kojima/items/ad7a8ade9e7a99fb4384
MediaLiveを使う前にこれを見てくれ！

AWS Elemental MediaLiveとはフルマネージドなライブ配信サービスです。
https://aws.amazon.com/jp/medialive/

OBSなどの配信ソフトがあれば10分ほどの設定でライブ配信を始められる素晴らしいサービスです！
私はMediaLiveと自社開発のサービスを組み合わせて使っていますが、注意点がいくつかあるので書いていきます。
※これから書くのは2019/03/22時点でのMediaLiveの仕様です。

## ライブ配信までの流れ
![MediaLive.png](https://qiita-image-store.s3.amazonaws.com/0/145645/3384d0fc-35d5-c389-d23f-a3f415f0e476.png)


## ライブ開始まで時間かかるぞ！
ライブ配信のためにはチャンネルを作る必要があるがインスタンスが立ち上がるまでに1分弱くらいかかる。
アプリとMediaLiveを同期的に連携させるときは設計に考慮が必要だ。
よくあるパターンで考えてみよう。
![arch (1).png](https://qiita-image-store.s3.amazonaws.com/0/145645/fec5be99-5acd-35db-6a66-0870a528ef4a.png)
これを同期的にやろうとするとダメだ。
Apigatewayは29秒でタイムアウトするのでMediaLiveでチャンネルを作れない。
なのでアプリからSDKでMediaLiveと連携したほうがよい。
チャンネル作成で時間がかかるのでそもそも非同期でライブ開始させるような設計のほうが良さそうだ。

## Idle中もお金かかるぞ！
ライブ配信を終えてもチャンネルをIdle状態のまま放置してるとお金がかかるぞ！
ライブが終わったらこまめに削除しよう。
手動で作り直すのは壮絶に面倒なのでLambdaなどで自動化しておこう。

## 当たり前だがテストにもお金かかる！
テストでチャンネル作ったり配信したりしたらあっという間に250ドルかかっていた！！！
気を付けよう。

## ChannelとPushInputの作成数に上限がある！

Channelは5個
PushInputも5個までしか作れない。
(RTMPでLive配信アプリからMediaLiveにPushする場合はこちらに該当)

不特定多数のユーザーが任意のタイミングでLive配信するようなサービスの場合、
1人につきChannelを1個使うので同時に5人までしかLive配信できない。
上限緩和申請は可能。今回の案件ではChannelとInputを100個まで緩和してもらった。

## サムネイル画像に気をつけろ！

MediaLiveはライブ配信の開始と同時にサムネイル画像を作成できます。
![無題.png](https://qiita-image-store.s3.amazonaws.com/0/145645/7690c9f1-cd12-8486-f524-dd89e8c557c5.png)

### jpegしか対応していない
pngにしたい時とかはLambdaで変換したりしよう。
ETSとかはjpegとpngを選べますね。

### S3のバケット名に縛りがある
ライブ配信の出力先にS3やMediaStoreを指定できますが、S3のバケット名に . (ドット)が入ってるとエラーになります。実在するドメインならドットが入っててもOKです。

### インターバル設定
画像出力のインターバルを設定する必要があります。これは1～3600まで設定できますが、1にすると1秒に一枚画像を出力します。
最初の1枚だけ欲しいとかはできないが、3600秒にすると最小枚数にできる。
![無題1.png](https://qiita-image-store.s3.amazonaws.com/0/145645/2c0cb0d7-1beb-ef37-6e31-1f6edcfeb752.png)

### アーカイブ出力はtsファイル形式のみサポート
Archive OutputGroupでLive配信のアーカイブ保存ができるが、tsファイルしかサポートされていない。
mp4が欲しいよ。
CentOS7.6でyumが「Not using downloaded remi-safe/repomd.xml because it is older than what we have」というエラーを吐いた

# yumからエラーメールが来た
さくらVPS上で動作させているCentOS 7.6でyum-cronを組み、エラーをroot宛に送るようにしている。
するとある日、エラーメールが来ていた。
![001.png](https://qiita-image-store.s3.amazonaws.com/0/137451/60092bd1-0240-2ee6-65da-d459132e18ba.png)
内容はこちら。
> /etc/cron.hourly/0yum-hourly.cron:
> 
> Not using downloaded remi-safe/repomd.xml because it is older than what we have:
>   Current   : Tue Mar 19 20:27:21 2019
>   Downloaded: Mon Mar 18 19:09:31 2019

以前には来たことのないものだった。
「いまyumでダウンロードした remi-safe/repomd.xml は利用しないよ、だってこれキャッシュで持ってるものより古いよ」という意味だ。
なんで？レポジトリのXMLファイルが先祖還りをした？
反映の古いミラーを参照するようになった？

# yumのキャッシュを消す
とりあえずレポジトリと同期を取るにはyumのキャッシュを削除してやればいい。

```:console
[root@xxxxx ~]# cd /var/cache/yum
[root@xxxxx yum]# ls -l
total 0
drwxr-xr-x. 3 root root 14 Sep 14  2016 x86_64
[root@xxxxx yum]# rm -rf x86_64
[root@xxxxx yum]# ls -l
total 0
```

これでエラーは吐かなくなるはずだ。
プログラミングを始めて一か月の僕が、学習で大切だと思うこと4選

こんにちは。
未来電子テクノロジー(https://www.miraidenshi-tech.jp/intern-content/program/)
でインターンをしているodattiです。

僕は今、Progateというオンライン教材でプログラミングを学習しています。
HTMLとCSSを学んでいましたが、つい先日Pythonを学び始めました。

今回はプログラミングの学習方法について書こうと思います。
「学習方法がわからず、勉強に詰まっている」
という方もいらっしゃるのではないでしょうか？
この記事は、これからプログラミング学習を始める方に読んでいただきたい記事です。

プログラミング初心者ですので、間違っていることがあればどんどん指摘してください。すぐに訂正します。

#学習教材
学習環境は特に大切です。
僕はインターンがきっかけでプログラミングと出会い、オンラインサービスのProgateで学んでいます。
他にも、独学で勉強なさる方や、他のサービスを利用される方もいらっしゃるでしょう。
学習教材はたくさんありますから、教材を選ぶときは自分の目で見て確かめて、始めるのがよいかと思います。

#質問できる環境
勉強していてわからないことが出たとき、**気軽に質問できる環境**が整っていると安心できますよね。
最近はネットで検索すれば大体のことはわかってしまう時代です。
(Qiitaももちろんそのためのツールの一つでしょう)
いろんなツールを駆使して課題を解決する能力も、プログラミングで身につけられることの一つです。


勉強内容に限らず、勉強する言語選びに悩んでいる方にとっては、適切なアドバイスをくれる方の存在はとても心強いです。
僕もプログラミングを始めたばかりで、うまくいかないことがあった時は、インターン先の先輩に相談するようにしています。

#学習目標を立てる
学習目標を立てることのメリットは、責任感が芽生えることだと思っています。
目標が達成できなかった日が続くと、目標設定が高すぎたのだろうかと振り返りますし、どこで補填しようかと考えるので、学習が長続きします。
立てた目標に対してフィードバックをくれる人がいると、なおよいでしょう。

目標を立てるときのポイントは、**具体的な数値を入れて目標を設定する**ことです。
「～日までに～を～ページ進める」
忙しい人は、「～を～時間やる」といった具合に。

#ゴールは何か
プログラミングの勉強が受験勉強や資格試験とちがうのは、ゴールがイメージしにくいことだと思っています。
将来エンジニアになりたい、会社で必要など、学習の動機はさまざまかと思いますが、具体的なゴールは遠いという方も多いのではないでしょうか。

プログラミングに限らず、勉強のモチベーションを持続させるコツは**内的要因**(自分の中にある動機)ではないでしょうか？
勉強していて楽しいと思えたら、もっとやる気が出ますよね。

僕もまだまだプログラミング初心者で、分からないことだらけです。
それでも、プログラミングができるようになった自分や日々の新しい発見を通して楽しく勉強しています。

#まとめ
以上、プログラミングの勉強で大切だと思うことをまとめました。
この記事を書きながら、自分の今いる環境はとても充実しているなぁと改めて感じています。
プログラミングを通して新しい発見があったら、随時Qiitaでシェアしたいです。
typescript初心者がわからなかった型宣言

最近TypeScript（以下 TS）でフロント開発を初めた初心者です。
TSは静的型付け言語のようにJSを書くことができるのと、JSにはない様々な機能が存在したりして使っていて非常に楽しいです。
本記事ではそんな自分がどのように解釈していいかわからなかった型宣言の正式名称と簡単な解説を書き留めたいと思います。

本記事を書くにあたって、 [TypeScriptの型入門](https://qiita.com/uhyo/items/e2fdef2d3236b9bfe74a, こちらの記事)や[公式リファレンス](https://www.typescriptlang.org/docs/handbook/basic-types.html)を参考にさせていただきました。
より詳細な説明は上の記事をご覧ください。

## インデックスシグネチャ [key: S]: T
TSを解説した記事で以下のような宣言を見たことはないでしょうか。

```typescript
[key: S] : T
```
この宣言はインデックスシグネチャと呼ばれ、`S`型のプロパティ名に対して`T`型の値を持つという意味になります。

```typescript
interface MyInterface {
  [key: string] : boolean;
}

const obj: MyInterface = {
  'hoge': true,
  'fuga': false,
}
```
上にインデックスシグネチャを用いて、`string`型のプロパティ名と`boolean`型の値を持つ`interface`を宣言しました。
同時に、この`interface`を使用して`object`を作っています。
これは`[key: string] : boolean`が守られているのでコンパイルが通ります。

ただし、 以下のようなコードは条件を満たしていないのでコンパイルエラーになります。

```typescript
const obj: MyInterface = {
  3: true, // keyがstringではない
  'fuga': 5, // valueがbooleanではない
}
```
## Mapped Types+α
次はこのような型宣言です。

```typescript
{[K in keyof obj]: obj[K]}
```

自分は初めてこの宣言を見たとき、何を表しているかさっぱりわかりませんでした。

順に見ていきます。

 `[P in K]: T` は Mapped Types という宣言方法の1つです。例えば

```typescript
{[P in 'fuga' | 'hoge'] : number}
```

のように使われます。これは `{'fuga': number, 'hoge': number}` と同義です。

さらに`keyof obj`ですが、 これはobj型のプロパティ名全ての型を表します。つまり

```typescript
interface obj: MyInterface {
  'hoge': number;
  'fuga': string;
}
```

という`interface`に対して、 `[K in keyof MyInterface]: T` は `{'hoge': T, 'huga': T}` と同義になります。

最後に `obj[K]` の部分です。

これはプロパティアクセス型と呼ばれ、 オブジェクトのプロパティの`value`が持つ型と等しくなります。

`MyInterface`型の変数`obj`を例にとると 

```typescript
obj['hoge'] // number
obj['fuga'] // string
```

となります。

これを踏まえると `{[K in keyof obj]: obj[K]}` は `obj = {'hoge': number, 'fuga': string}`として

```typescript
{
  'hoge': number,
  'fuga': string,
}
```

と同義になります。

<hr>

駄文ですが、誰かのお役にたつことができれば嬉しいです。
何か間違いやアドバイスがあればコメントで指摘していただければ非常にありがたいです。
EgretEngineのプチフリーズを調べる

各フレームの処理をまるっと時間をはかり200msより遅くなったらログを出力してみる

# Updateのコストを測定してログ出力

https://github.com/liberapp-inc/h5g-qiita-jump-and-run/commit/8775997425fbc735153495178c11d7775eb915a4


`index.html`で 60FPSに設定しているので、秒に60回呼び出されるはずの `enterFrame`の処理コストを調べる

```ts:Main.ts

  this.addEventListener(egret.Event.ENTER_FRAME, this.enterFrame, this);

  private enterFrame(t: number): boolean {
    const start = performance.now();
    :
    const cost = performance.now() - start;
    if (200 < cost) {
      egret.log(`Cost over: ${cost}`);
    }
    return true;
  }
```

そんなコストがかかる処理は発生していませんでした


# Updateの外のコストを測定してログ出力

https://github.com/liberapp-inc/h5g-qiita-jump-and-run/commit/e2b179eadbf7b498c61c4bfb309b4b48ee2fae4a

```ts:Main.ts
 private enterFrame(t: number): boolean {
    const start = performance.now();
    if (this.lastCalled !== -1) {
      const otherCost = start - this.lastCalled;
      if (100 < otherCost) {
        egret.log(`Other cost over: ${otherCost}`);
      }
    }
    :
    const end = performance.now();
    const cost = end - start;
    if (100 < cost) {
      egret.log(`Cost over: ${cost}`);
    }
    this.lastCalled = end;
    return true;
  }
```

そうするとやはりこんな感じで

<img width="375" alt="IMG_2028.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/302078/9b0d3d72-a0ea-9d11-711e-65112e09a002.png">


# とおもったら！
50FPSだと20msですね、全部間違っているので修正したものはこちら
https://github.com/liberapp-inc/h5g-qiita-jump-and-run/commit/c1df90e2edd3128baec2f52dfd743fb679583fe0

こうやってみるとそもそも20msもギリギリな感じたまに処理落ちしてますね

<img width="375" alt="IMG_2029.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/302078/b90639a5-9af6-8ff5-9ec4-9b09bb953f76.png">

# 結論
原因はまだ突き止められていませんが、単純に Update内部の処理が重いという話ではなさそうです
Amazon Connect＋Salesforce＋LINEで自動車修理の自動受付＆応対サービスを作ってみる

## ◆一体何を作ったの？
* Amazon Connectが色々なシステムと連携できるようなので、SalesforceやLINE botと連携できないか触ってみました。
    * 何かしらのシナリオのあるほうがイメージしやすいので、試しに「自動車が壊れる→LINEで位置情報をポチポチ→修理業者から電話がかかってくる」というシナリオを考えてみます。
    * ひとまず頑張って修理業者へのつなぎを減らせないかチャレンジしてみました。

# ◆シナリオ
**†何もしていないのに車がこわれた！†**
### Before
![repair_1.png](https://qiita-image-store.s3.amazonaws.com/0/372054/6aae79b1-616f-0d23-3367-4049c8acdc1a.png)


* ①～⑤までの作業はオペレータによる手作業
    * ユーザーとの応対だけでなく、受付情報や位置情報の登録、修理業者への連絡を行う。やることが多い！

###After
![repair_2.png](https://qiita-image-store.s3.amazonaws.com/0/372054/c87da0a7-dc92-487a-f6ad-7f503ca46bd6.png)


1. Amazon Connect上のLexによる自動応答（IVR）を使用してオペレータの応対にかかる稼働を削減。
2. ユーザーの位置情報をLINEで送信していただくことにより、オペレータの稼働削減だけでなく正確な位置情報を迅速にデータベースに登録可能。
3. 応対履歴登録を自動化することにより、電話受付情報のデータベースへの登録作業にかかる稼働を削減。

## システムのフロー
### ①ユーザ対応 
* Amazon Connectを利用し、ユーザからのSOS電話に対してIVRで対応します。
  
### ②電話受付情報を登録
* Amazon Connectで受けたSOSの情報を応対履歴としてsalesforceに登録します。これもIVRが終了したタイミングで自動で行われるようにしています。

### ③LINEで位置情報送信
* LINEで位置情報を送信できるので、それを利用して現在位置を送信します。

### ④位置情報登録
* LINEで送信された位置情報をSalesforceに連携します。

### ⑤修理業者へ連絡
* ③の位置情報からLamda 関数が呼ばれ、自動的に修理業者へ電話をかけます。その電話にて修理業者が対応可能ならばユーザと修理業者の通話へと切り替えます。これを自動で行うためAmazon Connectを用いています。  

## ◆作成手順
長いので分けました。

### STEP1
* フローの①～②を作成していきます。
    * [Amazon Connect＋Salesforceで受付情報の登録をIVR（電話自動応答）だけで対応させる](https://qiita.com/azuki2ice/items/a60a2d2f58681c75c4ee)

### STEP2
* フローの③～④をLambdaで作成し、デプロイします。
    * [AWS Lambdaを使用したLINEbotの作成](https://qiita.com/azuki2ice/items/85f369d3bc70daf59dc1)

### STEP3
* STEP2で作成したものをAWS上にデプロイします。
    * [AWS Lambda関数からAmazon Connectコンタクトフローを呼び出し～電話の転送を行う](https://qiita.com/azuki2ice/items/0045fad908643ff73edb)
agora.ioでコラボレーション配信の実装

#概要
instagram等でコラボ配信（複数拠点からの配信）をよくみかけるようになりました。
agora.ioのSDKを用いたコラボ配信については実績が多数あります。

#コラボ配信の技術的問題点
- コラボ配信において、視聴者は遅延が発生しても問題ありませんが、コラボしている人同士は遅延が発生したら会話が成立しない
- コラボ配信による効果で視聴者が数千人に増えた場合、インフラの増強が必要になる

#agora.ioで出来る事
- コラボしている人同士の遅延：1s以内の遅延に抑えることができます。複雑なコードを書く必要はなく、配信者としての設定（APIをコール)をするだけです。
- 視聴者側は10万人まで対応している為、大規模な配信にも対応可能です。又、視聴者側の遅延は2s以内になっており、一般的なHLSよりも低遅延が可能です。


#サンプルコード
[SDK](https://docs.agora.io/en/Interactive%20Broadcast/downloads)と共にサンプルコードが含まれています。配信者側で入室、視聴者側で入室という機能が含まれています。

#ビルド方法(iOS)
##SDKのダウンロード
ダウンロードページからVideoSDK iOSをダウンロードします。
<img width="1453" alt="download.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/7ee0c4f1-325e-544c-51ff-2de36a9a8301.png">
(サンプルはSDKの参照も含まれた設定になっています。)

##プロジェクトのオープン
ダウンロードしたファイルを展開するとSDK本体、ビデオ通話のサンプル、ライブ配信のサンプルに分かれています。
今回はライブ配信のサンプルを利用する為、OpenLive-iOSのプロジェクトをオープンします。
<img width="882" alt="finder.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/4749f54a-e940-782b-7379-6fd121dd994b.png">

##APP IDの設定
KeyCenter.swiftにagora.ioのAPP IDを設定します。
(簡易に動作検証をする場合はTokenは空でも大丈夫です)
<img width="1552" alt="xcode.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/0f9be190-3e98-25fa-735a-c727249e5a7b.png">

##実機での動作確認
ChannelNameを任意で入力し、入室します。配信側はBroadcasterを選択します。
<img width="375" alt="IMG_1598.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/36de8559-125c-a0e5-00eb-e1943f362757.png">

・入室後画面
<img width="375" alt="IMG_1599.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/68fb6da1-19fd-65f8-b066-d1a6b670af70.png">

別の拠点も同じChannelNameを入力し、入室します。

・2拠点入室した場合の画面
<img width="375" alt="IMG_1600.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/f9a37c13-f9e7-7f7d-c5d8-5ce6ccc46ad4.png">

##実装の詳細(一部抜粋)
配信者か視聴者かを決めるAPIは以下になります。

```swift:LiveRoomViewController.swift
    rtcEngine.setClientRole(clientRole)
```

ローカル側の映像表示は以下のAPIをコールすることで描画できます。

```swift:LiveRoomViewController.swift
    rtcEngine.enableVideo()
    rtcEngine.startPreview()
    rtcEngine.setupLocalVideo(CANVAS)
```

リモート側の映像表示は以下のAPIをコールすることで描画できます。

```swift:LiveRoomViewController.swift
    func rtcEngine(_ engine: AgoraRtcEngineKit, didJoinedOfUid uid: UInt, elapsed: Int) {
        rtcEngine.setupRemoteVideo(CANVAS)
    }
```



#最後に
[**agora.ioに関するお問い合わせはこちらから**](https://jp.vcube.com/lp/agora?utm_campaign=Agora&utm_source=Qiita&arc_id=01a9dbd897d05e27914b)
[<img width="912" alt="スクリーンショット 0001-08-15 13.41.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/5d815376-9b89-08fa-9434-6fa7e8e67bcf.png">](https://jp.vcube.com/lp/agora?utm_campaign=Agora&utm_source=Qiita&arc_id=01a9dbd897d05e27914b)
supervisor note

# in Docker
supervisor @ docker means a single container/multi process. So if you want to use python3 on the main process, you think that want to run supervisor via python3 too. Unfortunately, supervisor only supports python2..
## via python:3.7-slim & deb's supervisor
use `python:3.7-slim` docker image and `apt install supervisor`.
 
- When you type `supervisor` system use /usr/bin/python (= python 2.7)
- when you type `python`, it means `/usr/local/bin/python` run as root (= python 3.7)

You must set `/usr/local/bin` in $PATH higher priority than `/usr/bin`.

## via multi-stage build (failed)
Create virtualenv via python:2.7 container & copy venv artifacts to python:3.7 container by docker's. But venv don't contain system shared library (such as libpython.so) although make virtualenv with `--always-copy` options.
### Solutions

- Omunibus. (But i will not consume my time for chef)
- pyenv. (So fat!)
heroku: command not found

##heroku: command not found



cloud9でコミットプッシュしようとして、以下のようなコマンドを打つとエラーが。

```
$ git commit -am "Add hello" 
```

```
$ git push
```
```
$ heroku create
```

###エラー内容

```
heroku: command not found
```

##解決方法

 ```
$ wget https://cli-assets.heroku.com/heroku-cli/channels/stable/heroku-cli-linux-x64.tar.gz -O heroku.tar.gz
$ sudo mkdir -p /usr/local/lib/heroku
$ sudo tar --strip-components 1 -zxvf heroku.tar.gz -C /usr/local/lib/heroku
$ sudo ln -s /usr/local/lib/heroku/bin/heroku /usr/local/bin/heroku
```

↑のコマンドを打つと、

```
$ heroku create
$ git push heroku master
```

コマンドがうまくいき、コミット＆herokuにプッシュができました！

##参考
https://qiita.com/shintarou-akao/items/a26ef8c9597267815895
phpの基本を学んでみよう（結合,変数展開,配列,連想配列,繰り返し,関数,引数,戻り値,フォームなど）

#近況報告

エンジニア転職成功しました。YouTubeもはじめました。

https://www.youtube.com/channel/UCcXQG8lu_EdyP2Cbhtz1bcA

phpの基本を学んでみようシリーズ1
今回は基本記法からフォーム送信までです。

#著者略歴
名前：[YUUKI](https://twitter.com/bitcoinjpnnet)
ポートフォリオサイト：[Pooks](https://pooks.herokuapp.com/)
現在：Webエンジニア見習い

##基本記法

```php
<? php

//構文を書く

?>
```
##ルール

;　　文末
//　 コメントアウト
echo 出力
'' "" 文字
$ 変数の宣言
const = 定数
namespace = 名前空間

##構文の意味

###結合記法
- ドットを使って文字列や変数を繋げる

###変数展開
- {$変数名}

###switch文
- case 引数にとった変数と一致したら処理を実施
- break ブロック脱出
- default それ以外の処理(else的なやつ)

###配列
- $ 配列宣言時に使用
- array(配列)
- $test[] = ''文字列' 配列末尾に値を追加

###連想配列
- キー =>  値でカンマで区切って値を格納（Rubyのハッシュ）
- キー 取り出し $test['name']; シングルクォーテーションを使用
- 末尾追加 $test['name'] = 'yuuki' nameキーに値を追加

###繰り返し処理
- for文（初期値,ループ条件,増分）
- while文(ループ条件){
繰り返し処理;
増分;
}

###continue

```php
for(初期値,ループ条件,増分){
  if(条件){
    continue;　（条件がtrue時のみスキップ）
}
}
```

###foreach 配列のキーと値を一個一個取り出して処理する

- 連想配列でも可
- キーは省略可


###関数

####組み込み関数

#####strlen関数

引数に取った文字列の文字数を返す。

```php
echo strlen('Progate');

=>7
```

strlenの引数には変数も対応可

```php
$language = 'PHP';
echo strlen($language);

=>3 
```

#####count関数

引数に取ったインデックス（配列の要素数）を返す

```php
$data = array('東京','大阪','京都');
echo count($data);

=>3
```

#####rand関数

第一引数と第二引数の値の間のランダムな整数を返す

```php
echo rand(1,4);

=>3
```

####関数の定義

functionを使って関数を定義する

```php

//関数の定義
function printCircleArea($radius){
  echo $radius * $radius * 3
}

//呼び出し
1 printCirleArea(3);
2 printCircleArea(5);

//出力結果
27
75
```

####関数の作り方

```php

//関数の定義
function hello(){
  echo 'Hello world';
}

//呼び出し
hello();

//出力結果
Hello world
```

####引数

関数では、引数を関数内で受け取るために「仮引数」を定義する

```php
//関数の定義（第一引数と第二引数に仮引数を定義）
function printSum($num1,$num2){
  echo $num1 + $num2;
}

//呼び出し
printSum(1,3);

//結果
4
```

####戻り値

returnを定義することで、呼び出し元にデータを返す
この返す値のことを「戻り値」と呼ぶ。


```php
//関数内で戻り値を定義
function getSum($num1,$num2){
  return $num1 + $num2;
}

//呼び出し
$sum = getSum(1,3);
echo $sum;

//結果
4
```

####フォームタグ

フォームを設置して、値を送信する。
action＝"送信先ファイル(url.php)"
method="メソッド属性(getかpost)"

```php
//フォームタグの設置
<form action="url" method="post">
  //フォームの内容を書く
</form>
```

#####フォームの種類

```php
//1行フォーム
<input type="text" name="email">

//複数行フォーム（閉じタグ必要あり）
<textarea name="content"></textarea>
```

#####送信ボタン

```php
//「送信」の文字が付いたボタンを設置
<input type="submit" value="送信">
```

####フォームのデータを受け取る

phpでデータを受け取るには、
$_POST（スーパーグローバル変数）
を使う。

$_POSTは定義済み変数。

なお、中身は連想配列になっている。

```php
//データの受け取り方

//name属性値が「name」のデータを受け取って出力
echo $_POST['name']; 

//email属性値が「email」のデータを受け取って出力
echo $_POST['email'];
```


####セレクトボックス

選べる（セレクト）フォームを作れる

```php
//fruitというname属性値を持ったりんご、バナナ、みかんが選べるセレクトボックスを作成
<select name="fruit">
  <option name="apple">りんご</option>
  <option name="banana">バナナ</option>
  <option name="ornage">みかん</option>
</select>
```
画像処理の基本的なアルゴリズムをGo言語で復習 ３（ニアレストネイバー）

ZOZOテクノロジーズの制御エンジニアをやっています池田です。
画像処理の代表的なアルゴリズムをGO言語で実装しながら復習するシリーズです。

#はじめに
画像の拡大縮小に用いられる、線形補間について振り返っていきたいと思います。
中でも今回は線形補間の中でも単純なニアレストネイバー（最近傍補間）について実装含め検証していきます。

# ニアレストネイバー（最近傍補間）
「Nearest neighbor」、直訳すると「最近隣」という意味です。その名の通り、注目画素周辺の画素を参照する補間方法です。
言ってしまえば画素のカサ増しみたいなものです。
以下図は、画像を横方向２倍にニアレストネイバーで拡大する時の簡単なイメージです。

![図１.png](https://qiita-image-store.s3.amazonaws.com/0/308887/87d0d789-2234-1348-ee25-18c78dce2aae.png)

##検証方法
以下手順で検証を行いました。

```
① 元画像をPhotoshopのバイキュービック法で1/2に縮小
② 縮小した元画像を今回実装したニアレストネイバーで2倍に拡大
③ 元画像とニアレストネイバーで2倍に拡大した画像を比較
```

##ソースコード
__NearestNeighbor.go__

```Go
package NearestNeighbor

import (
	"gocv.io/x/gocv"
)

// ニアレストネイバー法
func Execution(inputImg gocv.Mat, inputImageRows int, inputImageCols int, magnificationRows float64, magnificationCols float64) gocv.Mat {

	// リサイズ後画像サイズ
	resizeImageRows := int(float64(inputImageRows) * magnificationRows)
	resizeImageCols := int(float64(inputImageCols) * magnificationCols)

	// アウトプット画像を定義
	outputImg := gocv.NewMatWithSize(resizeImageRows, resizeImageCols, gocv.IMReadGrayScale)

	// 画像の左上から順に画素を読み込む
	for imgRows := 0; imgRows < resizeImageRows; imgRows++ {
		// 元画像の縦の座標
		nearRows := int(float64(imgRows) / magnificationRows)

		for imgCols := 0; imgCols < resizeImageCols; imgCols++ {
			// 元画像の横の座標
			nearCols := int(float64(imgCols) / magnificationCols)
			nearPixel := inputImg.GetUCharAt(nearRows, nearCols)
			outputImg.SetUCharAt(imgRows, imgCols, nearPixel)
		}
	}

	return outputImg
}
```

##実行結果
###元画像
![Lennagrey.png](https://qiita-image-store.s3.amazonaws.com/0/308887/f8829e3f-c6b8-daf7-848f-d769ac6c96b4.png)

###実行後画像
![NN1.png](https://qiita-image-store.s3.amazonaws.com/0/308887/d2a78ec5-3cc9-b51e-0621-a1042948450c.png)

元画像に比べると、全体的にぼやけている様に見えます。
また、エッジの部分がギザギザになって出力されています。

###元画像と実行後画像の差分
![NN_dis.png](https://qiita-image-store.s3.amazonaws.com/0/308887/cc221ab7-936b-73b1-66ad-6b5a0926979d.png)

元画像との差を見てみると、やはりエッジの部分に差が多く出ています。

###MSE/PSNR
```
[MSE] value :  +6.565691e+001 [PSNR] value :  +2.995800e+001
```
見た目は結構劣化している様に見えても、画素の差自体は大げさに出ていないみたいですね。

#まとめ
拡大縮小のアルゴリズムは評価手法によって結果も大きく変わってきますが、復習がてらの実装なので、単純にPSNRで違いを見てみました。

その他の線形補間についても今後追加で上げていきたいと思います。
こいつのエラー回避方法 : Unchecked runtime.lastError: The message port closed before a response was received.

## エラー発生タイミング
ページ表示時。。。

## 環境
macOS 10.13.6
Chrome v72 (他ブラウザは未チェック)

## 状況
browser-syncだけ使ってファイルを更新タイミングでブラウザも反映って環境を構築し、コンソールを覗いてみたらいました。
ちなみに該当htmlファイルを直でブラウザで開くとこのエラーはいませんでした。

```
Unchecked runtime.lastError: The message port closed before a response was received.
```

<img width="338" alt="スクリーンショット 2019-03-22 15.03.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/336910/e696d1fa-6eb2-07ac-059a-607abdddaf37.png">

なんでこんなとこにエラー？？

以前このエラーに会ったことあるのですが、javascript動くし仕事の環境じゃないからいいやーって放っておいたんですが、気になりが過ぎたので再調査。

## 調査

すると、こんな記事を発見。

[Unchecked runtime.lastError: The message port closed before a response was received](https://forum.vuejs.org/t/unchecked-runtime-lasterror-the-message-port-closed-before-a-response-was-received/56422)

これこれ！ まさにこれ！ と思いながら読んでいるもののなんだか自分と環境違いそう、、、
でも記事の最後にありました。
どうやら`chrome extension`が原因だったらしい。

## 結果
上記を踏まえ自身のchrome extensionのオンオフ切り替えながら犯人探しを行ったところ、私の場合はこいつが原因でした。

`カスペルスキー セキュリティ`

oh...

ということでこのエラーが出たら、まずは`chrome extension`を疑え、でよいのではないかなという結果でした。

--- 追記 ---
基本的にはローカル環境下での事象なので、 **気にならなければ放置** でよいと思われます。
Nuxt 2.5.0 にバージョンアップしたら core-js のエラーが出るようになった

## 事象

2019年3月21日、Nuxt.jsのv2.5.0がリリースされました 🎊🎊🎊

https://twitter.com/nuxt_js/status/1108728812945227776

うっきうきでバージョンアップしたら

```
 ERROR  in ./.nuxt/client.js                                                                                                                                  friendly-errors 12:09:02

Module build failed (from ./node_modules/@nuxt/webpack/node_modules/babel-loader/lib/index.js):                                                               friendly-errors 12:09:02
Error: [BABEL] /path/to/project/.nuxt/client.js: Invalid Option: corejs is not a valid top-level option.
        Maybe you meant to use 'targets'? (While processing: "/path/to/project/node_modules/@nuxt/babel-preset-app/src/index.js$0")
    at validateTopLevelOptions (/path/to/project/node_modules/@nuxt/babel-preset-app/node_modules/@babel/preset-env/lib/normalize-options.js:49:13)
    at normalizeOptions (/path/to/project/node_modules/@nuxt/babel-preset-app/node_modules/@babel/preset-env/lib/normalize-options.js:160:3)
    at _default (/path/to/project/node_modules/@nuxt/babel-preset-app/node_modules/@babel/preset-env/lib/index.js:168:37)
    at /path/to/project/node_modules/@babel/helper-plugin-utils/lib/index.js:19:12
    at loadDescriptor (/path/to/project/node_modules/@nuxt/webpack/node_modules/@babel/core/lib/config/full.js:165:14)
    at cachedFunction (/path/to/project/node_modules/@nuxt/webpack/node_modules/@babel/core/lib/config/caching.js:33:19)
    at loadPresetDescriptor (/path/to/project/node_modules/@nuxt/webpack/node_modules/@babel/core/lib/config/full.js:235:63)
    at config.presets.reduce (/path/to/project/node_modules/@nuxt/webpack/node_modules/@babel/core/lib/config/full.js:77:21)
    at Array.reduce (<anonymous>)
    at recurseDescriptors (/path/to/project/node_modules/@nuxt/webpack/node_modules/@babel/core/lib/config/full.js:74:38)
    at recurseDescriptors (/path/to/project/node_modules/@nuxt/webpack/node_modules/@babel/core/lib/config/full.js:94:27)
    at loadFullConfig (/path/to/project/node_modules/@nuxt/webpack/node_modules/@babel/core/lib/config/full.js:108:6)
    at process.nextTick (/path/to/project/node_modules/@nuxt/webpack/node_modules/@babel/core/lib/transform.js:28:33)
    at process._tickCallback (internal/process/next_tick.js:61:11)
                                                                                                                                                              friendly-errors 12:09:02
 @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js
                                                                                                                                                              friendly-errors 12:09:02
```

なんかすごい怒られた。

## 対処

公式では **`yarn.lock`, `package-lock.json`を削除してからバージョン上げてね** って書いてあったので諸々削除してやったけど効果なし。

どうも、`node_modules`を削除してほんとにクリーンインストールしないといけないっぽかった。

```sh
$ rm -r node_modules
$ npm install
```

全消し＆インストールできちんと起動するようになった。めでたし。

## メモ裏

Nuxtのバージョンが上がるごとにクリーンインストールはちょいとリスキーすぎでは...
コピペ時の改行と改段落の扱い

# 概要
Chatwork エバンジェリストの集まりで、Mac のメモアプリで作成した文章を Chatwork にコピペすると改行が反映されないんだけど、誰か助けて！という投稿がありました。忙しかったので、スルーしていたんですが、業務が一段落して見たら、誰も再現できないし、もう OS の入れ直しくらいしかないんじゃない？という感じだったので、調べてみたところ原因が分かったので、そのメモ。

## 現象
リッチテキスト（メモ、Word、Keynote など）とプレーンテキストまたは Web サービスの Form 内のテキスト（Chatwork、Facebook etc）とhtmlメールのテキスト（Gmail など）等をまたいでコピペをした際に改行が崩れてしまうことがある。

## 先に結論
リッチテキストからプレーンテキストに改行を反映させた状態でコピペしたい場合は、リッチテキスト側では改段落する必要がある。htmlメールエディタなどは、```<p>, <br>``` などと解釈される模様。どう見えるかはスタイル次第。

- 改行: Shift + Enter
- 改段落: Enter

## 検証
### 検証環境
macOS Mojave(10.14.3) で確認しました。他の OS は分からないです。たぶん一緒じゃないかと思います。

### ペースト設定
[Mac: メモ帳へのペースト時、スタイルを適用しない方法](http://www.sirochro.com/note/mac-memo-ignore-style/)
リッチテキストエディタやhtmlメールでコピー元のスタイルが引き継がれてしまうと鬱陶しいので、よくやる手ですが、ダメでした。

### 改行コード
改行崩れちゃうのは、プログラマーあるあるなので、真っ先に改行コードを疑いますよね。
適当な複数行のテキストを用意して、改行コードを CRLF、CR、LF にしてコピペ。普通に改行されてペーストできました。これも違いました。

### 改段落
リッチテキストで改行っぽく見えて、改行ではなくて、プレーンテキストにはないのが段落です。改段落はアプリのスタイルによって、改行よりも行間の幅が広くなったりインデントが下がったりします。Mac のメモアプリの場合、パッと見では見分けが付かないのですが、例えば MS Word などでは見て分かるようになっています。
![breakline_word.png](https://qiita-image-store.s3.amazonaws.com/0/245908/263d2982-370b-9ca4-9a5d-490e894a427d.png)
こんな感じ。改行・改段落を Chatwork にコピペするとこうなります。Facebook 等でも同じです。
![breakline_chatwork.png](https://qiita-image-store.s3.amazonaws.com/0/245908/99eea68d-5fe9-38a4-02be-97ab56fe2ee1.png)

Macでは、リッチテキストエディタでは、

- 改行: Shift + Enter
- 改段落: Enter

となるので（設定変更しなければ）、プレーンテキストにコピペして改行を反映させたい場合は、改段落でコピー元の文章を作成することで解決できます。
個人的には、改行は改行で、段落とは違うので気持ち悪いですが、メモを iPhone で書いた場合は、問答無用全部段落になってるし、まぁ良いかと受け入れました。

## 原因
Shift + Enter で改行が原因でしたが、この”Shift + Enter で改行”を無意識でやってるって割と特殊な気もしますし、誰も気づかないってのも特殊な集まりのような気がします。
今どきのビジネスコミュニケーションとして広く普及したチャットは、フォーム送信で改行なのか送信なのかを区別する必要があり、Chatwork では Enter で送信というオプションがあります。送信ボタン押す必要がないので、ハードに使う人はそう設定している人が多いんじゃないかと。特に Chatwork エバンジェリストに認定されているような人たちは、身体に染み込んじゃってるレベルじゃないかと笑
![shift_enter.png](https://qiita-image-store.s3.amazonaws.com/0/245908/026ec111-1f77-d3b1-ce2e-8c2de9363622.png)

## ビジネスが加速するクラウド会議室
エバンジェリストとして笑
[Chatwork](https://go.chatwork.com/ja/)
LIFULL では、2012年4月から Chatwork を利用しています。現在は日本国内外合わせ LIFULL Group 全体で使っています。よく比較される Slack に切り替える予定はありません。おそらく今後も。

今更私が言うまでもありませんが、とても便利です。無料でも使えますので是非使ってみてください。倉林の紹介と言っても安くなりません。
プライベートな CLI ツールを作って GitHub から配布する

Node.js で作成した CLI ツールの配布には [npmjs.com](https://npmjs.com) を使うのが便利です。ツールがオープンソースであれば、 `npm publish` コマンドを実行するだけで npm レジストリを経由して簡単に配布することができます。しかしながら、ツールがプライベートである場合はどうしたらいいでしょうか。
この記事では、GitHub のインフラのみを利用してツールを配布する方法を紹介します。

## 前提条件

以下のツール・サービスを使用します。

- Node.js
- npm
- GitHub のプライベートリポジトリ
- [GitHub hub](https://hub.github.com/) (オプション)

## プライベートなリポジトリを作成する

```shell
$ mkdir my-cli
$ cd my-cli
$ git init
$ git create -p # or hub create -p
$ npm init -y
```

GitHub hub は GitHub の CLI ツールです。 `hub create` コマンドを使うと、 コマンドラインから GitHub のリポジトリを作成することができます。 `-p` オプションはプライベートリポジトリにするオプションですね。

`git create` コマンドの代わりに GUI から操作してリポジトリを作成しても問題はありません。

正しく作成されていれば、 リモートリポジトリが参照できるはずです。 `username` はあなたのユーザー名に置き換えてください。

```shell
$ git remote -v
origin	git@github.com:username/my-cli.git (fetch)
origin	git@github.com:username/my-cli.git (push)
```

## CLI ツールを作成する

package.json のトップレベルに `bin` プロパティを追加し、CLI ツールのプログラムのパスを指定します。また、今回はプライベートであることが前提なので、誤 publish を防ぐための `private` プロパティも追加しておきます。

```json
{
  ...
  "bin": "cli.js",
  "private": true,
  ...
}
```

`cli.js` というファイルとして CLI ツールを作成します。

```javascript
#!/usr/bin/env node
process.stdout.write('Hello!')
process.exit(0)
```

```shell
$ chmod +x cli.js
```

正しく記述できていれば、 `Hello!` と出力する実行可能ファイルができているはずです。

```shell
$ ./cli.js
Hello!
```

## GitHub にプッシュしてホスティングする

```shell
$ git add .
$ git commit -m"<message>"
$ git push origin master
```

## GitHub から CLI ツールをインストールする

npm コマンドは、 npmjs.com のレジストリ以外からも npm 形式のパッケージをインストールすることができます。 GitHub から上記の自作ツールをインストールするには、以下のコマンドを実行します。`username` はあなたの GitHub のユーザー名に置き換えてください。

```shell
$ npm install github:username/my-cli --global
/Users/username/.nvm/versions/node/v11.12.0/bin/my-cli -> /Users/username/.nvm/versions/node/v11.12.0/lib/node_modules/my-cli/cli.js
+ my-cli@1.0.0
added 1 package in 15.252s
```

これで CLI ツールがインストールされました。

```shell
$ my-cli
Hello!
```

ちなみにアンインストールはこんな感じ。

```shell
$ npm uninstall my-cli --global
```

## ツールを配布する

上記の GitHub リポジトリはプライベート設定で、アクセス権限がないユーザーは `npm install` できません。リポジトリに招待するなどして、アクセス権限を付与することで、限られたユーザーにのみ、`npm install` を許可することができます。
アクセス権限の付与が終わったら、ツールをインストールして欲しいユーザーにインストールコマンドを教えましょう。

## 応用

ツールをビルドする必要があり、かつ、 `master` ブランチに自動生成ファイルをプッシュしたくない場合、 CI サービスなどを利用して CD(Continuous Delivery) を行う必要があります。ツールのビルドが必要になるのは例えば以下のような場合です。

- Babel や Polyfill を利用して Node.js の広いバージョンに対応したツールをつくりたい
- webpack などでバンドルして、実行ファイルが 1 つだけの持ち運びしやすい CLI ツールにしたい

CI サービスから、 `release` などの名前のブランチにビルド済みのファイルをプッシュするようにすれば、以下のようにツールをインストールすることができます。

```shell
npm install github:username/my-cli#release --global
```

ビルドせずに使う[^1]のでしたら、 Node.js のバージョンを package.json の記述で絞ると良いでしょう。

```json
{
  ...
  "engines": {
    "node": ">=8.6.0"
  }
  ...
}
```

[^1]: `async` `await` や スプレッド構文 `{...obj }` などを使いたいですよね？
Raspberry Pi で OpenCV 4


# Raspberry Pi に OpenCV 4.x をインストール

[元ネタ](https://www.pyimagesearch.com/2018/09/26/install-opencv-4-on-your-raspberry-pi/)には virtualenv で複数のPythonバージョンでの使い分けも記述あり
## 準備
```:インストールを始める前にファイルシステムを拡張
$ sudo raspi-config
```
`Advanced Options` から `Expand Filesystem` を実行してリブート
`df -h` コマンドでファイルシステムが拡張されているのを確認

```:OS環境を最新に
$ sudo apt-get update 
$ sudo apt-get upgrade
```
```:CMake環境をインストール
$ sudo apt-get install build-essential cmake unzip pkg-config
```
```:イメージファイル用ライブラリをインストール
$ sudo apt-get install libjpeg-dev libpng-dev libtiff-dev
```
```:ビデオストリーム用ライブラリをインストール
$ sudo apt-get install libavcodec-dev libavformat-dev libswscale-dev libv4l-dev 
$ sudo apt-get install libxvidcore-dev libx264-dev
```
```:画像表示用ライブラリをインストール
$ sudo apt-get install libgtk-3-dev 
$ sudo apt-get install libcanberra-gtk*
```
```:演算用ライブラリをインストール
$ sudo apt-get install libatlas-base-dev gfortran
```
```:Python3開発用ヘッダをインストール
$ sudo apt-get install python3-dev
```


## OpenCVのインストール
```:ソースの取得
$ cd ~
$ wget -O opencv.zip https://github.com/opencv/opencv/archive/4.0.1.zip
$ wget -O opencv_contrib.zip https://github.com/opencv/opencv_contrib/archive/4.0.1.zip
$ unzip opencv.zip
$ unzip opencv_contrib.zip
```
```:NumPyの準備
$ pip install numpy
```
```:cmakeでビルド準備
$ cd ~/opencv-4.0.1
$ mkdir build
$ cd build
$ cmake -D CMAKE_BUILD_TYPE=RELEASE \
    -D CMAKE_INSTALL_PREFIX=/usr/local \
    -D OPENCV_EXTRA_MODULES_PATH=~/opencv_contrib-4.0.1/modules \
    -D ENABLE_NEON=ON \
    -D ENABLE_VFPV3=ON \
    -D BUILD_TESTS=OFF \
    -D OPENCV_ENABLE_NONFREE=ON \
    -D INSTALL_PYTHON_EXAMPLES=OFF \
    -D BUILD_EXAMPLES=OFF ..
```
cmakeの結果に問題ないか確認  
  
ビルド時にスワップメモリが不足するのを避けるため、一時的にスワップファイルを拡張 
フラッシュメモリの劣化を防ぐため、ビルド後にもとのサイズに戻す  

```:/etc/dphys-swapfile
CONF_SWAPSIZE=2048
```

```:スワップサービスの再起動
$ sudo /etc/init.d/dphys-swapfile stop 
$ sudo /etc/init.d/dphys-swapfile start
$ swapon
```

```:ビルド
$ make -j4
```

```:インストール
$ sudo make install
$ sudo ldconfig
```

スワップファイルのサイズを100Mに戻してサービスを再起動
 
## インストールの確認
```python:
>>> import cv2
>>> cv2.__version__
'4.0.1'
>>> exit()
```

# おまけにmatplotlibをインストール
```
$ pip install matplotlib
```
最新RedisのUbuntuへのインストールとPythonで使うまで

今更ながら、初めてNoSQLを触りました。
最新RedisのUbuntuへのインストールとPythonでRedisを使うまでのメモです。aptで入れようとしたらReidsのバージョンが古かったので、[公式](https://redis.io/download)から最新の安定版をダウンロードしています。
Redisのデータ型とクエリについては別記事[「【初心者向け】Redisのデータ型とPythonでの使い方サンプル」](https://qiita.com/FukuharaYohei/items/48209d488bc7f412c3d7)を参照ください。

# 環境
前提としてCURLとpyenvが入っているくらいでしょうか。pyenvインストールと設定については記事[「UbuntuにpyenvとvenvでPython開発環境構築」](https://qiita.com/FukuharaYohei/items/2820f7bda6678ce26ea7)を参照ください。

|種類|バージョン|内容|
|:--|:--|:--|
|OS|Ubuntu18.04.01 LTS|仮想で動かしています|
|Redis|5.0.4|2019/3/22時点でStableの最新です|
|pyenv|1.2.9|複数Python環境を使うことがあるのでpyenv使っています|
|Python|3.7.2|pyenv上でpython3.7.2を使っています<br>パッケージはvenvを使って管理しています|

# 手順
[公式「Installation」](https://redis.io/download#installation)をほぼそのまま実行しています。

## 1. Redisダウンロード
Redisをダウンロードして解凍。

```bash
wget http://download.redis.io/releases/redis-5.0.4.tar.gz
tar xzf redis-5.0.4.tar.gz
```

## 2. Redisビルドとインストール
makeでビルド。

```bash
cd redis-5.0.4
make
```

インストール。

```bash
sudo make install
```

##3. Redis起動と確認

Redisの起動。デフォルトで/usr/local/bin/にインストールされていました。

```bash
/usr/local/bin/redis-server
```

CLIを使ってインストール確認

```bash
/usr/local/bin/redis-cli
127.0.0.1:6379> set foo bar
OK
127.0.0.1:6379> get foo
"bar"
127.0.0.1:6379> exit
```

##4. redis-pyインストール
venvの仮想環境py37でpipを使ってredis-pyをインストール。バージョン3.2.1がインストールされました。

```bash
source venv/py37/bin/activate
pip install redis
```

##5. redis-py確認
cliからパッケージをimportし、先程登録した"foo"に対する値を取得できるか確認します。

```python
python
Python 3.7.2 (default, Jan  6 2019, 18:40:05) 
[GCC 7.3.0] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> from redis import Redis
>>> r = Redis()
>>> r.get("foo")
b'bar'
>>> r.delete("foo")
1
>>> exit()
```
VSCodeでのPHPのデバッグをする際に、変数の要素が一部しか表示されない

今まではPHPの開発を行う時にはIDEを使用していなかったのですが、
Visual Studio Code を使ってみています。

デバッグ実行して変数の中身を確認してみたところ、この問題が発生しました。

#現象
VSCodeでのPHPのデバッグをする際に、変数の要素が一部しか表示されない。
(100個要素があるはずの配列が、30個の要素しか表示されていませんでした。)

#原因
Xdebug のデフォルト設定でした。

#修正方法
php.iniファイルを変更しましょう。

```ini:php.ini
[xdebug]

...省略...

xdebug.var_display_max_children = 128
xdebug.var_display_max_data = 1024
xdebug.var_display_max_depth = 10

...省略...
```

また、VSCode のデバッグの設定ファイル(launch.json)からも変更可能です。
(参考：[PHP Debug README](https://github.com/felixfbecker/vscode-php-debug) )

```json:launch.json
"xdebugSettings": {
    "max_children": 128,
    "max_data": 1024,
    "max_depth": 10
}
```
awkサンプル集

すぐ忘れてしまうので備忘録。

こういうファイルを

``` date.txt
20170102,5
20170209,1
20170315,9
```

こうしたい

```
2017-01-02,5
2017-02-09,1
2017-03-15,9
```

```
cat date.txt | awk -F"," '{
  year = substr($1, 0, 4)
  month = substr($1, 5, 2)
  day = substr($1, 7, 2)
  print year "-" month "-" day "," $2
}'
```
[個人メモ]Emacs環境改善

このところEmacsの環境を大きく変えたので、チラシの裏的に書き留めておく。

# GUI Emacsへ

いままでtmux上でEmacsを立ち上げていたがターミナル上のEmacsにはいくつか制約があった。

* [使用できないキーバインドがある](https://memo.sugyan.com/entry/20120224/1330051378)
* レイアウトが頻繁に崩れる
* [かわEmacs](https://qiita.com/Ladicle/items/feb5f9dce9adf89652cf)ができない

特にレイアウト崩れは深刻でmagitのコミットツリーが一定の条件でぐちゃぐちゃになってしまう等大変ストレスフルだったところに[かわEmacs](https://qiita.com/Ladicle/items/feb5f9dce9adf89652cf)がトドメを指した格好となった。

# パッケージ管理をel-getからstraight.el+use-packageへ

el-getについては以前[記事も書き](https://qiita.com/maueki/items/345003d94da98ed64fa5)気に入って使用していたが、パッケージのインストールと設定が別など細かい点では不満があった。

[straight.el](https://github.com/raxod502/straight.el)と[use-pacakge](https://jwiegley.github.io/use-package/)を合わせて使うことでパッケージのインストールから設定まで１つのS式で完結するという環境が手に入った。
もちろんel-getを採用したとき条件であった、

> * パッケージのリストを列挙しておくと
> * パッケージが無い場合は自動的にダウンロードしてインストールしてくれる
> * すでにインストールしてある場合は何もしない

はそのままである。


更にel-getの頃から懸案だったパッケージへのパッチ当てに対する不満もel-patchを導入することできれいに解決できた。
[[Emacs] el-patchでパッケージにパッチを当てる](https://qiita.com/maueki/items/01ddefc66295329ff9b0)

# init-loaderでよみこむ.elを再編成

init-loaderの構成も改善した。

従来はパッケージをいくつかのグループに分けて設定の.elを*.emacs.d/init*に置き、そこから必要に応じて*.emacs.d/init-loader*へシンボリックリンクを張り、そのシンボリックリンクをinit-loaderで読み込むということをしていた。

しかしグループ分けが面倒になってother.elが肥大化していくわ、シンボリックリンクなんにも意味ないわ、でどうしようかと思っているところで、

[init-loaderって必要なの? ほんとに?](https://qiita.com/tadsan/items/181a352edcda740582ec)

この記事を読んで一時はinit-loader廃止しようかとも思ったけど、最終的に読み込む.elの数を大幅に減らすことで落ち着いた。(シンボリックリンクはもちろん廃止)
元々１０以上あったファイルは主に以下の４つとなった。

* Emacs標準機能の設定
* use-package群
* 自作関数
* OS毎の設定

この構成ならどのファイルに何が書いてあるか迷うことはないし、逆にある設定をどこに書くべきか迷うこともほぼ無い。パッケージ一覧をみるのも簡単だ。

# 番外編: Conkyで時刻表示

[Conky](https://github.com/brndnmtthws/conky)自体はEmacsと何も関係ないもので、デスクトップ上に時刻やシステム情報を表示するアプリである。

なぜここで紹介するかというと、

1. Emacsを全画面(F11)で使いたい
2. 全画面だとGnomeのパネルが見えなくなって時刻がわからない
3. モードラインの時刻はしっくりこない

というわけでEmacsのウインドウを透過させてConkyの時刻を表示させることにした。
テーマは[Conky-Vision](https://github.com/zagortenay333/conky-Vision)。こんな感じ

![image.png](https://qiita-image-store.s3.amazonaws.com/0/39647/907c1fcc-4e37-9817-4e8b-71b609a7fccb.png)

透過処理は以下の通り

```elisp:$HOME/.emacs.d/init-loader/99-utils.el
;; transparency
(defun toggle-transparency ()
  (interactive)
  (let ((alpha (frame-parameter nil 'alpha)))
    (set-frame-parameter
     nil 'alpha
     (if (eql (cond ((numberp alpha) alpha)
                    ((numberp (cdr alpha)) (cdr alpha))
                    ;; Also handle undocumented (<active> <inactive>) form.
                    ((numberp (cadr alpha)) (cadr alpha)))
              100)
         '(100 . 100) '(90 . 90)))))
(global-set-key (kbd "C-c C-t") 'toggle-transparency)
(toggle-transparency)
```
もうreact-routerなんかやめろよ、hooks使っていこうぜ

# リンク

- [Forget React Router. Modern and clean routing with hooks][0]
- [Modern and clean routing with hooks][1]
- [Paratron/hookrouter - github][2]

# サンプル

```js:Paratron/hookrouterのREADME.md見れば分かる
import {useRoutes} from 'hookrouter';

const routes = {
    '/': () => <HomePage />,
    '/about': () => <AboutPage />,
    '/products': () => <ProductOverview />,
    '/products/:id': ({id}) => <ProductDetails id={id} />
};
	
const MyApp = () => {
    const routeResult = useRoutes(routes);
    
    return routeResult || <NotFoundPage />;
}
```


[0]: https://www.reddit.com/r/reactjs/comments/b3puok/forget_react_router_modern_and_clean_routing_with/?ref=readnext
[1]: https://parastudios.de/modern-and-clean-routing-with-hooks/
[2]: https://github.com/Paratron/hookrouter
VScodeとMarkdown PDFでファイル出力する時に便利な設定

この記事ではVisualStudioCodeでのアドインMarkdownPDF。
もしくはTyporaを使用しています。
# 概要
マークダウン記法で作成したファイルを他の人に配布する場合、PDFに変換をすることが多々あります。そんな時、画像が大きくて意図していない場所で改行されてしまい見にくくなってしまうことがあります。
そんな時は手動で改行させてしまうという記事です。

## PDFファイル出力時
### 改ページさせたい場合
とても簡単で、改行させたい場所に下記コードを追加するだけで改ページしてくれます。

```html

<div style="page-break-before:always"></div>
```

## htmlファイル出力時
### ページ内リンクさせたい時
```html
[ボタン①について](#ボタン①説明)

<a name="ボタン①説明"></a>
```
StaticFrameって何？　毎週面白すぎるPythonポッドキャスト

ポッドキャスト「Talk Python to Me」
…は毎回、様々な経歴のPython使いがゲストで、自分の作ったツールやサービスについて語るっていう貴重な情報源なんですが、今週のトピックはStaticFrame。
https://talkpython.fm/episodes/show/204/staticframe-like-pandas-but-safer

作ったのはクリストファー・アリザって人で、興味深いのは、元は音楽研究者だったってこと。2000年ごろ、ニューヨーク大学でAlgorithmic composition　コンピュータを用いた作曲で博士論文を書いていた時、教授からPythonのことを教えられて、Python道へ。

音楽の分野で大学教員として勤務した後、今は投資戦略の会社Research Affiliatesでソフトウェア開発チームを率いているんだそうです。このポッドキャストに登場する人たち、大学院で研究（生物、天文などなど）している課程でプログラミングにはまったという例がよくありますが、音楽は珍しいですね。

StaticFrameって何をするものなのか？
NumPy、Pandasと同じことができるけれど、すでに実行したcomputationを変えない、より安全というもの。なぜこれが必要なのか、どういういいことがあるのかについては、ポッドキャストをお聞きください。

Python V２はサポートしていない、現在のバージョンは３.５。PIP installできます。GITHUBにチュートリアルもあります。
https://github.com/InvestmentSystems/static-frame

このポッドキャストでは最後に、エディター・IDEは何を使ってるか、ゲストにたずねます。アリザ氏の場合はVS Codeだそうです。