OmniAICreator/Qiita-1.07M huggingface dataset:
ドコモスピードテスト の サーバー はどこ？

ドコモ（もしくはNTT）のサーバーと思ったけど違うらしいので調べてみた

> 通信速度測定には**社外クラウド**を使用し、各通信キャリアの実力を平等に測定します。
> 接続先の測定サーバは、複数拠点で日本国内に設置されています。
> ![alt](https://www.nttdocomo.co.jp/support/area/speed_test/measure/images/img03.gif)
> 
> [測定に関する詳細情報 | エリア | NTTドコモ](https://www.nttdocomo.co.jp/support/area/speed_test/measure/index.html)


##Androidアプリで調べる
Androidなら[パケットキャプチャー](https://play.google.com/store/apps/details?id=app.greyshirts.sslcapture)や[tPacketCapture](https://play.google.com/store/apps/details?id=jp.co.taosoftware.android.packetcapture)を使うことで通信を解析できます。簡単だね♪

・・・と思ったら

![alt](https://qiita-image.cloudremix.net/DOCOMO-Speedtest-App.jpg)

Why?

##Wireshark？・・・いやいやFiddler
アプリだけじゃ無理そうなので、コンピューターからパケットキャプチャすることにします。ただ、Wiresharkは~~解析が面倒~~セットアップしていないので、[Fiddler](https://www.telerik.com/fiddler)を使います。

手順はこのあたりを参照

 - [Android端末上のHTTP／HTTPS(SSL)通信内容を傍受・解析する方法 ](https://amimilab.com/2016/08/14/post-183/)
 - [FiddlerでAndroidのHTTPS通信の中身を確認する方法メモ](http://did2memo.net/2017/08/31/android-chrome-fiddler-proxy-https/)

##結果

```:
（重複排除済み）
http://clients4.google.com:443
http://ai-api.docomo-speedtest.com:443
http://ai-log.docomo-speedtest.com:443
http://ai-rank-api.docomo-speedtest.com:443
http://csi.gstatic.com:443
http://android.clients.google.com:443
http://areainfo-throughput.s3-ap-northeast-1.amazonaws.com:443
http://cryptauthenrollment.googleapis.com:443
http://areainfo-throughput-upload.s3-ap-northeast-1.amazonaws.com:443
```

ということで
アップロードは`areainfo-throughput.s3-ap-northeast-1.amazonaws.com`でAWSのS3
ダウンロードも`areainfo-throughput-upload.s3-ap-northeast-1.amazonaws.com`でAWSのS3でした。

・・・S3って100Mbpsぐらいが上限だったような？モバイル限定だから問題ないのかな？
docker edgeでkubernetesお試し

# docker edge for macでkubernetesお試し

- docker edge for macインストール
https://store.docker.com/editions/community/docker-ce-desktop-mac
起動して設定からkubernetes有効にする

- kubernetes dashboard起動

``` sh
$ wget https://raw.githubusercontent.com/kubernetes/dashboard/master/src/deploy/recommended/kubernetes-dashboard.yaml
$ kubectl apply -f kubernetes-dashboard.yaml --record
$ kubectl proxy --address 0.0.0.0 --accept-hosts '.*' &
$ open http://localhost:8001/
```

- komposeインストール

``` sh
$ brew install kompose
```

- docker-compose.yml変換

``` sh
$ cat docker-compose.yml
version: '3'
services:
  app:
    image: nginx
    ports:
     - 8000:80

$ kompose convert
INFO Kubernetes file "app-service.yaml" created
INFO Kubernetes file "app-deployment.yaml" created
```

- service.yamlのspecにtype追加
  - Ingress通すならNodePortになるのかも

``` sh
$ vim 
+  type: LoadBalancer
```

- kubernetesにデプロイ

``` sh
$ kompose up
```

- service起動

``` sh
$ kubectl apply -f app-service.yaml --record
```

- 疎通確認

```
$ kubectl describe svc app
$ open localhost:31874
```
dockerで立てたnginxの設定ファイルの文法チェック

syntaxエラーがないかのチェックを行うコマンド
includeされたファイルの中身のチェックも行ってくれる

```console
$ nginx -t -c /etc/nginx/nginx.conf
```

dockerでnginxを使っていた場合、ローカル(ホストOS側)のターミナルから以下コマンドで実行できる

```console
$ docker-compose run --rm --no-deps nginx nginx -t -c /etc/nginx/nginx.conf
```
「macOSのインストールを完了できませんでした」→再起動、の無限ループに陥った時の対処法

今日コワーキングスペースから帰って来てMacを起動するといきなり「macOSのインストールを完了できませんでした」のエラーに直面してビビった。
「これ15万もしたのに！まだ半年しか使ってないのに！」と思ってテンパったけども意外とあっさり直ったのでメモ。
(焦っててエラーのキャプチャを撮り忘れた)

## ひとまずは再起動してみる

「再起動したらインストールをやり直せるよ」みたいなメッセージがあったので何回かやってみた。
これでうまくいけば問題なかったんだが案の定同じ状態に戻って来た。

「ユーティリティメニューから起動する方法もあるよ」というのが書いてあったのでそっちもやってみることにした。

## ユーティリティメニューからOSを再インストールする

[macOS 復元について](https://support.apple.com/ja-jp/HT201314)

>電源ボタンを押して Mac の電源を入れた直後、または Mac が再起動を始めた直後に、キーボードの「command + R」キーまたは macOS 復元のほかのキーの組み合わせを押して、Apple ロゴまたは回転する地球儀が表示されるまでそのまま押し続けます。ユーティリティウインドウが表示されたら起動は終了です。

自分もこのエラーにあたって初めて知ったんだけど、このルートからOSの再インストールをすることで、なんとか復旧できた。
所要時間は１時間半ぐらいかかった。
Wordpress環境構築

# 前提条件

|OS/ミドルウェア等     |    バージョン         |
|----------------|------------------|
| CentOS           |        6.9         |
| Apache           |       2.2.15       |
| PHP              |        5.6.36      |
| MySQL            |         5.6.40     |
| Wordpress        |       4.9.6        |
| aligned          |      aligned       |

VagrantでCentOS環境を構築して、
`vagrant ssh`でログイン可能な状態とする

# 作業

## ミドルウェアのインストール

yumを用いてインストールしていく
yumコマンドのオプション-yは、質問に対して全て肯定的に回答する、という意味
基本はこれをつけておいて問題はない
頭にsudoをつけることで管理者権限で実行できる
vagrant環境ではsudoをつけておくのが無難

### 圧縮解凍モジュールのインストール

` sudo yum install zip unzip `

### Apacehのインストール

` sudo yum install -y httpd `

### PHPと関連モジュールのインストール

` sudo yum install -y --enablerepo=remi,remi-php56 php php-devel php-mbstring php-pdo php-gd php-mysql`

### MySQLのインストール

` sudo yum install -y --enablerepo=remi,remi-php56 php-mysql  `

### wgetのインストール

` sudo yum install -y wget `

## ミドルウェアの各種設定

### Apache

#### Apacheのコンフィグ設定

viを利用して該当部分を編集する
viの操作方法に関しては自身で調べて行ってください

` sudo vi /etc/httpd/conf/httpd.conf `

【変更前】
DocumentRoot "/var/www/html" 
AllowOverride None
\<Directory "/var/www/html"\>
【変更後】
DocumentRoot "/var/www/html/wordpress" 
AllowOverride All
\<Directory "/var/www/html/wordpress"\>

### MySQLの設定

#### rootユーザーのパスワード設定

##### ログイン

` mysql -u root `

##### パスワードを変更

` update mysql.user set password=password('root用のパスワード') where user = 'root'; `

##### 変更を反映

` flush privileges; `

#### データベースの作成

##### データベースを作成

` create database データベース名; `

##### 権限の設定

` grant all privileges on wp.* to wp@localhost identified by 'ユーザー wp のパスワード'; `

## Wordpressのインストール

#### ディレクトリの移動

`cd /var/www/html`

#### ダウンロード

` wget https://ja.wordpress.org/wordpress-4.9.6-ja.zip `

#### 解凍

` unzip wordpress-4.9.6-ja.zip `

#### Apachenの再起動

` sudo service httpd restart `

## Wordpressの設定

ブラウザでサーバーにアクセスする
IPアドレス等は自身で設定したものにアクセスする
アクセスすると管理画面が表示され手順通りに進めると完了する
さくっとDockerでMongoDB起動ついでに永続化

`Docker`で`MongoDB`コンテナを起動するメモ。
ついでにlocalストレージに永続化する。
参照は、[Docker公式](https://hub.docker.com/_/mongo/)

##Dockerイメージのpull
###mongodbのイメージpull
MongoDB本体

```shell
$ docker pull mongo
```

###mongo-expressのイメージpull
phpMyAdminみたいなやつ。
MongoDBのデータ操作がブラウザでできる有り難いツール。

```shell
$ docker pull mongo-express
```

###確認
`mongo`と`mongo-express`のイメージが、TAG:**latest**で取得されていることが確認できる。(pull時にTAG指定しなかったため、defaultでlatest)

```shell
$ docker images -f reference='mongo*'
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
mongo-express       latest              6a1d1feed622        3 days ago          205MB
mongo               latest              87f1a6e84e00        4 days ago          368MB
```

##docker-composeを利用する準備
docker-composeにてコンテナ起動を行う。
ファイル構成は下記のように。

```shell
$ tree
.
├── docker-compose.yml  // docker-compose設定ファイル
└── mongo_db            // MongoDBのデータを格納するフォルダ
```

##docker-compose.yml
こんなかんじ

```yml:docker-compose.yml
version: '2'
services:
  mongo:
    image: mongo
    restart: always
    environment:
      MONGO_INITDB_ROOT_USERNAME: root
      MONGO_INITDB_ROOT_PASSWORD: root
    volumes:
      - ./mongo_db:/data/db
  mongo-express:
    image: mongo-express
    restart: always
    ports:
      - 8081:8081
    environment:
      ME_CONFIG_MONGODB_ADMINUSERNAME: root
      ME_CONFIG_MONGODB_ADMINPASSWORD: root

```

##コンテナ起動
`docker-compose.yml`がある階層にて。

```shell
$ docker-compose up
```

##接続確認
ブラウザにて、`http://localhost:8081/`にアクセス。

![スクリーンショット 2018-06-10 20.13.15.png](https://qiita-image-store.s3.amazonaws.com/0/143089/20b343cd-57ab-810a-a8c5-2c21cfe4bbd6.png)
Laravel5.6のDB作成

マイグレーションファイルを作成

```
php artisan make:migration create_article_table
```

適宜修正

```php:\database\migrations\2018_06_10_183909_create_article_table.php

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateArticleTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('article', function (Blueprint $table) {
            $table->increments('id');
            $table->integer('user_id');
            $table->string('title');
            $table->string('body');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('article');
    }
}

```

マイグレーション実行

```
php artisan migrate
```
RailsでRedisを使う

## Redisとは

インメモリデータベースの一種。
特徴としてメチャクチャ速い。
電源が切れるとデータが吹っ飛ぶので永続化
（定期的にディスクに書き出す）する必要がある。

Railsで使うにはGemをインストールする必要がある。
https://github.com/redis/redis-rb

##　基本的な使い方

もっとも基本的な使い方は以下の様にインスタンスを作成して使う。

```irb
#　　新規インスタンスを作成
redis = Redis.new
# setで保存
redis.set "profession", "engineer" 
=> "OK"
# getで取り出す
redis.get "profession"
=> "engineer"
```

ハッシュを保存することも出来る

```rb
redis.set 'Australia',{ NewSouthWales: 'Sydney'}
redis.get 'Australia'
```

## データベースを選択

以下の様に**select 数字**と打つと、データを保存するデータベースを切り替えられる。（デフォフトは0）

```rb
# 以後、1番目のデータベースで保存、閲覧を行うことになる。
select 1
```

## 保存されているキーをすべて見る

```
keys *
```

## データの削除

以下のコマンドで選択しているデータベースの中身が空になる。

```
flushdb
```

## 参考

[ruby から redis にアクセスする（1） - ようへいの日々精進XP](http://inokara.hateblo.jp/entry/2013/06/30/144815)
[RedisをRubyから触ってみた - ごろねこ日記](http://d.hatena.ne.jp/hiroe_orz17/20111006/1317890657)

*間違いがあれば、ご指摘くださると幸いです。
【FireBase備忘録】サーバーレスSPA作成①

## 第１回 FireBaseの準備


### はじめに

アプリケーションは以下の構成で実装する。

React.js (UI)
Redux (データフロー)
Firease (ホスティング + データベース)

### プロジェクトを作成
https://console.firebase.google.com にアクセスして「プロジェクトの追加」(初回は新規プロジェクトを作成)を押下する。

<img src="https://qiita-image-store.s3.amazonaws.com/0/180939/266058a8-ab69-d3e0-b8de-02d98e893546.png" width=80%>


プロジェクト名の入力と国の設定が完了したら「プロジェクトの作成」を押下する。

<img src="https://qiita-image-store.s3.amazonaws.com/0/180939/dd0e9b1a-d3d4-3559-8d2a-dc50aa6e709a.png" width=80%>


プロジェクトの作成が成功すると、以下のような画面が表示される。

<img src="https://qiita-image-store.s3.amazonaws.com/0/180939/f9881801-866d-50b3-1fe3-29aa8f754b64.png" width=80%>

「次へ」を押下すると、ダッシュボード画面に遷移するので左端の「Hosting」タブをクリックする。
ステップがあるのでそれに従う。

<img src="https://qiita-image-store.s3.amazonaws.com/0/180939/45b89d3b-b80b-e730-15f8-853bdefc3a45.png" width=80%>


コマンドラインからFireBaseを操作するためのツールをインストールする。(Nodejsをインストールしていない場合はここでインストールしておくこと)

```sh
$ npm install -g firebase-tools
```

次回はプロジェクトのデプロイとデータベースとの連携を行う。
Alibaba Cloud GPUを利用したDeep Learningについて～Elastic GPU Service on Data Deep Learning～

#Alibaba CloudのGPUについて
Alibaba CloudでもElastic GPU Service(EGS)というGPUが利用できるサービスが提供されています。
GPUは並列処理を行うことにより高速に演算を行います。
その性能を深層学習(Deep Learning)で利用することに注目が集まっています。
EGSはNvidia Tesla P100 GPU 上に構築されており、機械学習(深層学習)や大規模な並行計算を行うことが出来ます。
2018/06/06に東京リージョンでもGPUインスタンスが利用出来る様になりました。
[Alibaba Cloud 東京リージョンGPU インスタンス追加のお知らせ](https://jp.alibabacloud.com/notice/gpu-notice-20180606)

#Alibaba CloudでのGPUの利用方法
GPUを利用するためにGN5インスタンスを作成する必要があります。
今回は東京リージョンで、以下の手順で作成しました。
インスタンスタイプ：ecs.gn5-c4g1.xlarge
CPU:4
メモリ：30
##インスタンスの作成とGPUドライバのインストール
[こちら](https://jp.alibabacloud.com/product/gpu#getting-started)のページを参考にインスタンスを作成しました。
インスタンスを選択する場合は「ecs.gn5-c4g1.xlarge」で検索するとすぐに見つかります。
<img width="1047" alt="5.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/254932/e8d9d857-141b-8638-da87-a79ab7919a83.png">

GPUのドライバはインスタンス作成時に自動インストールの設定項目があります。
<img width="633" alt="15.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/254932/1cac8338-560a-920a-a81a-0342af2f5c22.png">
自分でGPUドライバをインストールしようとすると、Kernelのバージョン問題など色々と問題が発生し、解決に手間がかかるので自動インストールをおすすめします。

構成はこの様にしました。
<img width="1044" alt="16.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/254932/b8a7080a-6a53-3b17-5fca-a0390cbca858.png">
GPUのドライバを自動インストールする際はインスタンスの生成に通常より時間がかかると表示されますが、実際には大きな差はほとんどなく数分でインスタンスを生成することが出来ました。

インスタンスにSSHでログインし、GPUの情報を確認します。
`# nvidia-smi`
<img width="497" alt="18.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/254932/7d9ba161-7a97-943e-4bdf-d59eca104897.png">
GPUが設定されていることが確認できました。

#GPUを利用したDeep Learningについて
##Deep Learningの利用方法
TensorFlowで[MNIST for Beginners](https://www.tensorflow.org/versions/r1.0/get_started/mnist/beginners)を試したいと思います。
環境としてAnacondaとTensorFlow、Gitを追加インストールします。
手順としては、[こちら](https://qiita.com/iamdaisuke/items/43cd583547e709e907cc)と[こちら](https://techblog.sbcloud.co.jp/2017/12/06/gpu_tensorflow/)を参考に進めました。
実行結果はこちら。
<img width="383" alt="17.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/254932/133e81fb-2c0d-2246-15a3-a02bd940e51d.png">
まずまずの結果が出ました。

この様に、GPUを利用してDeep Learningを行うことが出来ました。
データ数が少ないビギナー向けの内容でしたのでGPUの性能を存分に利用出来ませんでしたが、複雑な処理や大規模なデータ数のDeep Learningで真価を発揮出来ると思います。

#まとめ
GPUを利用したDeep Learningを動作させる環境の構築は、比較的簡単に出来ました。
また、料金を確認しながら設定出来るので従量課金の場合にも計算しながらインスタンスを作成出来るのは大変便利です。
今回紹介した方法でもDeep Learningの環境は構築出来ますが、[Containerクラスターを利用したDeep Learningの環境構築](https://www.alibabacloud.com/help/doc-detail/52694.htm)もありますので、試してみてください。
###参照
[Alibaba Cloud Elastic GPU Service](https://jp.alibabacloud.com/product/gpu)
https://www.usahealthmarket.info/ketogen-pure/

<a href="https://www.usahealthmarket.info/ketogen-pure/">KetoGen Pure</a> The equation has been created to stifle hunger and increment digestion. The most wellknown explanation behind a fizzled eating routine is having the capacity to control craving and keep up an adjusted digestion. Craving control is critical for shedding pounds over the long haul. You ought not preclude nourishment but rather you ought to have great control over it. Avoiding a dinner causes awkward nature in metabolic conduct and makes it hard to consume fat. Weight reduction happens or happens when the body needs calories that the body does not have. 
https://www.usahealthmarket.info/ketogen-pure/
Jersey で見えない例外をログに流す

## はじめに

Jersey で内部エラーが起こると，ステータス 500 でエラーメッセージとともにレスポンスが返ってきますよね．ところが，ときどき困ったことに，

* レスポンスに詳細なエラーメッセージがない！
* サーバログにも何も情報が出ていない！

みたいな挙動で 500 が返ってくることがあり，どう対処しようか困ることがあります（筆者自身も困った）．

![jersey-500-internal-error.png](https://qiita-image-store.s3.amazonaws.com/0/81643/866b25e3-06b5-15f8-02a0-89a9daedece5.png)

こんなときの対処法として，Jersey で発生した例外を拾ってログに情報を流してあげる方法を紹介します．

## コード

イベントリスナを設置して，リクエスト/レスポンス処理中に発生した例外の情報をログに出力するようにします．

具体的には，以下のような ``MyApplicationEventListener`` と ``MyRequestEventListener`` を用意し，このうち ``MyApplicationEventListener`` をアプリケーションに登録します．

```java
import org.glassfish.jersey.server.monitoring.ApplicationEvent;
import org.glassfish.jersey.server.monitoring.ApplicationEventListener;
import org.glassfish.jersey.server.monitoring.RequestEvent;
import org.glassfish.jersey.server.monitoring.RequestEventListener;

public class MyApplicationEventListener implements ApplicationEventListener {

    @Override
    public void onEvent(ApplicationEvent event) {
    }

    @Override
    public RequestEventListener onRequest(RequestEvent event) {
        return new MyRequestEventListener();
    }
}
```

```java
import java.util.logging.Logger;

import org.glassfish.jersey.server.monitoring.RequestEvent;
import org.glassfish.jersey.server.monitoring.RequestEventListener;

public class MyRequestEventListener implements RequestEventListener {
    
    private static final Logger LOGGER = Logger.getLogger(MyRequestEventListener.class.getName());

    @Override
    public void onEvent(RequestEvent event) {
        switch (event.getType()) {
        case ON_EXCEPTION:
            LOGGER.severe(event.getException().toString());
        }
    }
}
```

これで，発生した例外の情報とスタックトレースがログに出るはず．

## 参考資料
* [Event Listeners - Jersey User Guide](https://jersey.github.io/documentation/latest/monitoring_tracing.html#d0e16007)
* [Jersey 2.0 and Moxy Internal Server Error But No Server Log - Stack Overflow](https://stackoverflow.com/questions/17667442/jersey-2-0-and-moxy-internal-server-error-but-no-server-log)
rawディスクイメージをMacで扱う

#概要
Macでddのイメージをマウントして扱うにはどうすればいいかなぁと。

#環境
Mac OS 10.12 Sierra
#rawでやってみた(Mac)

```console:空ディスクイメージの作成
mkfile 1G test
```

```console:空ディスクイメージのマウント
hdiutil attach -imagekey diskimage-class=CRawDiskImage -nomount test

返り値例：/dev/disk3   
```

```console:フォーマット
diskutil partitionDisk /dev/ディスク名 1 MBRFormat "MS-DOS FAT32" FOO 100%

cd /Volumes/FOO
```

```console:再びマウント
hdiutil attach -imagekey diskimage-class=CRawDiskImage test
```

2、3回しました。問題なし。

#qcow2でテスト

~~```shell:はじめに
 brew install qemu
brew cask install osxfuse
brew install rust
cargo install qcow2-fuse 
```~~

~~```shell:イメージ作成、外部ディスクで
qemu-img create -f qcow2 test.qcow2 1G
```~~


#レファレンス
http://takuya-1st.hatenablog.jp/entry/2016/11/16/164850
https://serverfault.com/questions/174909/mount-block-file-on-osx
https://lowreal.net/2014/01/28/2
react native  ios sumilator コピペできない.....

# 問題

react naitve で起動しているios sumilatorにコピペするときに最初のペーストは成功するがなぜかそれ以降どんなものをペーストしても以前ペーストした奴がペーストされる現象が起きる.......

#解決法

https://stackoverflow.com/questions/4604478/copy-from-mac-os-x-does-not-copy-to-iphone-simulator

こちらの記事を参考にした

どうやらmac os と sumilatorで参照されるクリップボードが異なるらしい

sumilatorでダブルクリックしてペーストを選択する前にcommnand v することによって mac os のクリップボードから　sumilatorのclipboardに移すことができた
Google Apps ScriptでGoogleカレンダーのイベントのURLを手に入れる

# はじめに
Google Apps ScriptでGoogleカレンダーのイベントのURLを手に入れたいと思ったが、なかなか良いやり方が見つからなかった。`https://www.google.com/calendar/event?eid=`の`eid`に何を入れるべきなのかというところで私は詰まった。他の方も大概ここで詰まっているようにみえる。今回Stack Overflowで正解を見つけたが、見つけにくかったのでシェアしようと思う。
# やっていること
イベントIDとカレンダーIDを取得してBASE64エンコードを行っている。
非常にシンプルである。

サンプルコード

```javascript
var splitEventId = event.getId().split('@');
var eventURL = "https://www.google.com/calendar/event?eid=" + Utilities.base64Encode(splitEventId[0] + " " + calendarId);
```
# 参考文献
https://stackoverflow.com/questions/10553846/get-link-url-to-an-calendar-event-in-google-apps-script
デザイン自動化メモ（InDesignのスウォッチカラーを追加する）

#スウォッチカラーを追加する
すで同名のスウォッチカラーが登録されている場合は、スウォッチを削除してから追加する。

```js
   C = 0;
   M = 0;
   Y = 100;
   K = 0;
   
   for (i=0;i<app.activeDocument.colors.length;i++) {
        if (app.activeDocument.colors[i].name=="Y100") {
            app.activeDocument.colors[i].remove();
        }
   }
   colorOption = {colorValue:[C,M,Y,K],model:ColorModel.process,space:ColorSpace.cmyk,name:"Y100"}
   colorObj = app.activeDocument.colors.add(colorOption);    
```
JavaでLinuxパーミッション

#概要
私の作っているソフトウェアで、Javaでパーミッション変更をコーディングしないといけなくなったので、書いた。

permission.listの各行に書いてある、ファイルの権限を変更する。

#コード
```java
    static ArrayList<String> permpaths;

    public static void readPermissionList(){
        permpaths = new ArrayList<>();
        Path p = Paths.get("permission.list");
        if(Files.exists(p)){
            try {
            FileReader fileReader = new FileReader(p.toFile());
            BufferedReader bufferedReader = new BufferedReader(fileReader);
            String data;
            while ((data = bufferedReader.readLine()) != null) {
                System.out.println(data);
                permpaths.add(data);
            }
                fileReader.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }else{
            permpaths.add("pocketmine.yml");
            permpaths.add("server.properties");
            permpaths.add("plugins/ChatPermitter.phar");
        }

    }

    public static void setPermission(){
        for(String filepath :permpaths) {
            try {
                Files.setPosixFilePermissions(Paths.get(filepath),
                        EnumSet.of(PosixFilePermission.OWNER_READ,
                                PosixFilePermission.OWNER_WRITE,
                                PosixFilePermission.OWNER_EXECUTE
                        ));
            } catch (IOException e) {
                System.out.println("error");
            }
```

#レファレンス
https://stackoverflow.com/questions/48945147/how-to-change-permissions-to-incoming-file-in-linux-using-java
http://kojiumeda.blogspot.com/2016/10/fileattribute.html
http://kagamihoge.hatenablog.com/entry/20130110/1357810886


#おすすめ文献

https://stackoverflow.com/questions/664432/how-do-i-programmatically-change-file-permissions
Excelマクロの処理時間を記録するためのマクロ



## これは
Excelマクロの処理時間を記録するために作った、ちょっとしたクラスモジュールです。

## やりたかったことは
ちょっと処理時間が長めのExcelマクロを開始したあと、いつ終わるか分からないので放置しておくと、いつの間にか終わっていて、結局どれだけ掛かったのかが分からず、次に流すときにまたやきもきするので、処理時間をログに出すようにしたかったのです。
（それだけのためにパワーかけすぎたという反省を込めて投稿します。）

## 実行結果イメージ
```
macroSample.xlsm      Start.       2018/06/10 17:49:37 
macroSample.xlsm      End.         3.00s

```
こんな感じで、開始時刻と実行時間がイミディエイトウィンドウに出力されます。

## 使い方
とりあえずこんなふうに処理の先頭に１行書くだけ、って感じにしたかった。

```vb

Sub Test1()
    Dim Lap As New Lap: Lap.Start  'この１行を書く

   '以降、通常の処理
    Dim T: T = Timer: Do: DoEvents: Loop Until Timer > T + 3
   '
   '

End Sub
```
## クラスモジュール
用意したのがこちら。
（作成当初に比べ、いくつかおまけの機能が増えている。）

```vb
'----Lap.cls----

Option Explicit
Dim mName As String
Dim n As Single, l As Single
Dim mCount As Long, mLapTime As Single, mCollection As New Collection

Sub Start(Optional nm = Null)
    mName = IIf(IsNull(nm), ThisWorkbook.Name, nm)
    Debug.Print mName, "Start.", Now()
    n = Timer
    l = n
End Sub

Private Sub Class_Terminate()
    Debug.Print mName, "End.", Elapsed
    Status
End Sub

Property Get Elapsed(Optional fmt As String = "0.00s") As String
    Elapsed = f(Timer - n, fmt)
End Property

Private Function f(n As Single, fmt As String) As String
    f = Format(n, fmt)
End Function

Function Status(ParamArray str())
    DoEvents
    Status = IIf(UBound(str) = -1, False, Join(str, vbTab))
    Application.StatusBar = Status
End Function

Sub Click()
    mCount = mCount + 1
    mLapTime = Timer - l
    mCollection.Add mLapTime
    Debug.Print vbTab, mCount, LapTime, Elapsed
    l = Timer
End Sub

Property Get Count() As Long
    Count = mCount
End Property

Property Get LapTime(Optional fmt As String = "0.00s") As String
    If mCount > 0 Then LapTime = f(mCollection.Item(mCollection.Count), fmt)
End Property
```




#### 使い方（おまけ機能）
```vb
Sub Test2()
    Dim Lap As New Lap: Lap.Start "test2"   'モジュール名の指定
    With ActiveCell
        .CurrentRegion.ClearContents
        Dim i
        For i = 1 To 500
            If i Mod 100 = 0 Then
                Lap.Click                'ラップタイムの計測
                .Offset(Lap.Count, 0).Value = Lap.Count
                .Offset(Lap.Count, 1).Value = Lap.LapTime
            End If
            Lap.Status i, Lap.Elapsed("0.000")  'ステータスバーに経過を表示
        Next
        .Offset(, 1).Value = Lap.Elapsed
    End With
    MsgBox Lap.Elapsed, , "End"    '処理終了ダイアログで処理時間を表示
End Sub
```

#### 実行結果（イミディエイトウィンドウ）

```

test2      Start.        2018/06/10 17:51:31 
             1   1.89s      1.89s
             2   1.70s      3.59s
             3   1.74s      5.33s
             4   1.73s      7.06s
             5   1.70s      8.76s
test2      End.         10.70s


```
ヘッダーに記述するいろいろのまとめ | OGPとか

## 概要

ヘッダーに記述するいろいろのまとめをPugとhtml両方メモ:writing_hand:

```index.pug

meta(charset='utf-8')
meta(name='viewport', content='width=device-width,initial-scale=1.0')

title ヘッダーに記述するいろいろのまとめ
meta(name="description" content="いろいろかきます")

meta(property="og:title" content="ヘッダーに記述するいろいろのまとめ")
meta(property="og:description" content="いろいろかきます")
meta(property="og:image" content="http://example.com/asset/share.png")
meta(property="og:url" content="http://example.com/")
meta(property="og:type" content="website")
meta(name="twitter:card" content="summary_large_image")

link(rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous")
link(rel="shortcut icon" href="http://example.com/asset/favicon.ico")
script(src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js")
```

```index.html
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />

<title>ヘッダーに記述するいろいろのまとめ</title>
<meta name="description" content="いろいろかきます" />

<meta property="og:title" content="ヘッダーに記述するいろいろのまとめ" />
<meta property="og:description" content="いろいろかきます" />
<meta property="og:image" content="http://example.com/asset/share.png" />
<meta property="og:url" content="http://example.com/" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous" />
<link rel="shortcut icon" href="http://example.com/asset/favicon.ico" />
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
```
Vagrant 共有フォルダ設定

## Vagrantの共有フォルダの設定を行う

vagrantを使用した開発環境で、毎回ローカルで編集したコードやファイルを、FTPクライアントソフトを使用してvagrantにアップしていたが、共有フォルダの設定を行えば、そんな面倒なことはいらないと知って唖然、、、勉強が足りない、、、

####**Vagrantの共有フォルダの設定手順のメモ**

###**Vagrantfileの編集**
----
vagrantの設定を反映させるためにVagrantfileを編集する。
特にこだわりなし、自分で確認するだけなのであれば、記載する場所は一番下とかでいい気がします。

```Vagrantfile
  # setting shared folder

    config.vm.synced_folder "../sharedfolder", "/home/vagrant/folder", owner: "vagrant", group: "vagrant"
```


- "../sharedfolder"　に自身のローカルで触っているフォルダの階層を記載
- "/home/vagrant/folder"　にvagrant上で共有させたいフォルダの指定

###**Vagrantの再起動**
---
上記の内容を反映させるさせるために以下のコマンドを実行する。

```
vagrant reload
```
ハッシュと配列について

<h2 id="Rubyの開発者を目指し基礎を学んでいる:relaxed:">Rubyの開発者を目指し基礎を学んでいる:relaxed:初心者の私が知識をまとめてみました。</h2>

<h3><strong>トピックス：</strong></p>
<ul>
<li>ハッシュと配列を例文から考察をしてみた。</li>
</ul>


<h2>
<span id="code---コードの挿入" class="fragment"></span><i class="fa fa-link"></i>ところでハッシュと配列の違いは？:thinking:</a>
</h2>
<p><strong>ハ</strong>ッシュと配列の記述、いつも迷っていしまいます。ここではハッシュ用の変数を"hash",配列用変数を"array"とします。</p>

<ul>
<li>ハッシュ：hash = { key: :value }</li>
→keyとvalueは任意に指定する。(亜シンボルでの記述)
<li>配列：array = [ value,value,value ]</li>
→valueのみ指定、keyは自動で配置される。valueのみ指定すればあとはよしなに番号を振ってくれる。
</ul>

<h3>
<span id="code---コードの挿入" class="fragment"></span><i class="fa fa-link"></i>因みにハッシュの記述はいくつかパターンがあるようで、:slight_frown:
</h3>

ハッシュロケットを使用した場合(部分テンプレートを例に)

```bash:index.html.haml
//

= render partial => "groups/sidegroup"

//

```

シンボルで記述した場合

```bash:index.html.haml
//

= render partial: "groups/sidegroup"

//

```

どうやらハッシュロケットは古いようで、（しばらくハッシュロケットを使っていた。。）*シンボル*を使用するのが一般的なようです。今回の例は後シンボルという記述みたいです。


<h2>
<span id="code---コードの挿入" class="fragment"></span><i class="fa fa-link"></i>どう使い分ける？:rolling_eyes:</a>
</h2>
<p><strong>ま</strong>とめますと、</p>

<ul>
<li>ハッシュはkeyもvalueも変化する値を使いたい</li>
<li>配列は規則的に複数の値を使いたい</li>
</ul>
<p>といった使い分けでしょうか。</p>
<p>配列やハッシュはRailsにも欠かせない要素で、挙動を理解した上で活用していきたいです。:hugging:</p>
デザイン自動化メモ（InDesignのレイヤーを追加する）

#レイヤーを新規追加する
レイヤーを新規追加します。
何度もデバッグできるように、同じ名前のレイヤーがあったら削除するコードと対にコーディングします。

```js
    for (i=0;i<app.activeDocument.layers.length;i++){
        if (app.activeDocument.layers[i].name == "test") {
            app.activeDocument.layers[i].remove()
        }
    }

    layerObj = app.activeDocument.layers.add();
    layerObj.move(LocationOptions.atBeginning);
    layerObj.name="test";
```


#レイヤーを新規追加する(改善版)
コメントで指摘いただいた方法のメモ。こっちの方がステップ数が少なくなります。

```js
var l = app.activeDocument.layers.itemByName("test");
if (l.isValid){
l.remove();
} else {
app.activeDocument.layers.add({name: "test"}).move(LocationOptions.atBeginning);
}
```
開発環境構築～Hello,World!

# Node.js（Javascriptの実行環境）のインストール
まず、以下のサイトからダウンロードできるインストーラでNode.jsをインストールします。
https://nodejs.org/ja/

# create-react-app（開発ツール）のインストール
~~~bash
npm install -g create-react-app
~~~~
※npm installの-gオプションは指定されたパッケージ（create-react-app）をグローバルな領域にインストールすることを指定しています。

# サンプルアプリケーションの作成
~~~bash
create-react-app react-sample
~~~~
指定したプロジェクト名（react-sample）のディレクトリが作成され、その配下にサンプルアプリケーションが作成されます。

# サンプルアプリケーションの起動
~~~bash
cd react-sample
npm start
~~~~
ブラウザが表示され、作成したアプリケーションの内容が表示されます。

# サンプルアプリケーションの修正
以下のファイルを更新する等で、アプリケーションに修正をかけることができます。
react-sample\src\App.js

~~~JSX
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;
~~~~

[Reduxの簡単な実装例](https://qiita.com/k-murayama/items/bce00aaaf4f9050ac143)
一泊二日でワークショップをした話

# 現状
 - 生年月を正しく入力してアカ停止されたり、twitterAPIの仕様が変わってsteam使えなくなったりと問題が出ましてメンテしてないので動きません。。。

# 作ったもの
 - [商品価格調査bot (twitter)](https://twitter.com/searchpricebot)
   - カレーで検索させると `ハウス シチュー屋シチュー クリーム 190g 105円` を返してくる程度の愛嬌はあるらしい

# 目的
 - とにかく仲間でアウトプットをしたかったので、一泊二日で出来る程度のアイデアを出して実装する
 - アウトプットが目的なので、どんな状態であれリリースする
 - 言語はある程度全員が触れそうなtypescript

# 要件
 - 画面を作らなくて良いようにインターフェイスをtwitterアカウント
 - 商品の型番などをメンション付けて呟くと、そのつぶやきを元にamazon, google shoppingなどのショッピングサイトの最安値リンクを返してくれる
 - 文字数制限があるのでURLは短くする

# 最初に書いた今回作りたいものの図
![dPBFYjDG6CNtUOeiPnQ-G14PmKrtle5K38CmCu7sbe8hl_iLP1nbhCuVhSNOMXjDfIr4aRQXUPZJ9FKj_79Zf7HPoEBcvjpVTyx9FMgeMbqrJqyirNggb5D_r6muTVlEFRjyV-mgksAlL_tqSmHwbNbVeL-2F50x7VQodmFm51o1pw7VWllW4Fets9V5UlaUr06D_dpv29g1FbZRM9coSo0RB3R1Qz51Nq0FpQVOqA-X_Nn7.png](https://qiita-image-store.s3.amazonaws.com/0/147882/bc10756a-67fa-a3df-29af-fd87bae7eb1f.png)

# 結果的に作ったものの図
![fPBVIW9158VlVOfvWLv08kookzuWDbeMmTs5tP6WAsScAAEB3Ab4oKppZuGA5bbA-p2_dTtjBPfsMp0fYBgR0tE-xtTcJiwbcaEBPY53z_EKwivEqTKTihP1qdhNfYHB_DTMSBC0EmsRT-0dO4smmw3J21zk8SOG2uWo-3b42s8A_WJHKmT_VWLM0Uk-jUjW4x1QPXcxQaahub97ryoyPP3DxIs5bSU3iDe7krGeEPj9NbiH.png](https://qiita-image-store.s3.amazonaws.com/0/147882/4d350b19-71a9-ea4e-000c-77482b2cbbed.png)

# サーバー
 - GCEのVMインスタンス（一番安いやつ)

# 言語など
 - typescript 2.9
 - node 10.4
 - npm 6.1

# 実装に使った時間
 - 1日目:　12-20
 - 2日目:　10-19
   - 休憩: 1h
   - 反省会(qiita記事記入時間含む): 1.5h　

# 困ったこと・辛かったこと
## amazonの価格調査
 - amazon apiを利用したかったが、amazonアソシエイトの登録が面倒だったので、スクレイピングすることにした

## google shoppingの価格調査
 - google apiを探したが見つからず。スクレイピングすることにした
 - スクレイピングを実際にやってみると、最安値・商品名までは取得できるが、最安値のリンクが取得できずに試行錯誤した

## twitter api
 - npmから入れたtwitterのtd.sがインチキで使いものにならなかった。

## bitly api
 - サイトの作り的な事だがtoken取得が面倒だった。

## typescript
 - await/async/Promiseは値を返す時に試行錯誤する事が多い。
 - 育てればいいけど、結構anyに頼ってる。

## インフラ
 - インフラエンジニアのありがたみがわかった。
 - setInterval()を使ったindex.jsをpm2でデーモン化しようとしたがうまくいかず、時間がないのでforeverに妥協した。

# 今回やれなかったこと
 - `最初に書いた今回作りたいものの図` に書いたように、インターフェイスに多様性を持たせられるようにAPIサーバーを立てる
 - もうちょっと価格を引っ張ってくるサイトを増やしたかった
 - 同じつぶやきが投稿できないので、エラーになっていたりすると返信返ってこないし、リトライができない
   - 検索ワードの末尾に `_` 付けたりすれば、結果はほぼ同じのが返ってくるけども。
 - 正常系しか作れてないので、エラー落ち多い
 - SlackからAPIの呼び出しまで作りたかった。

# 最後に
 - とりあえずリリースまでちゃんとできてよかった
 - このようなワークショップを今後も継続してやりたいし、出来そうだなって思った
 - ちゃんと終われそうなお題は重要
 - 想定しているより、解決する問題は多い
 - 次の機会でもまたqiitaにはログを残していこう
Cordova環境構築に向けたAndroid Studioのインストール

先日アップした「[Cordova向けにJDKを再インストール](https://qiita.com/yokokouji/items/f68e74b1788984084af4)」からの続きです。
Android StudioをインストールしてAndroid開発環境を整えます。
# 環境
- macOS High Sierra 10.13.4 (MacBook Pro (13-inch, 2016, Four Thundervolt 3 Ports)
- node.js 10.4.0
- nodebrew 8.9.4
- npm 6.1.0


# Android Studioのインストール
記事執筆時点(2018年6月10日)では3.1.3です。
下記を実行します。


```ruby:AndroidStudioのインストール
$ brew cask install android-studio
```

# Android Studioを起動
ウィザードが立ち上がりますので、設定を続けます。
追加コンポーネントのダウンロードが始まりますので、しばらく待ちます。

コンポーネントのダウンロード中に「Running Intel HAXM Installer」という表示が出ます。
macOSの場合セキュリティーにひっかかりますので、環境設定の「セキュリティとプライバシー」で、実行を許可します。

# Android Studioの環境設定
## サンプルプロジェクトを作成
`Start a new Android Studio project`を選択します。
![Start a new Android Studio project](https://qiita-image-store.s3.amazonaws.com/0/236049/53fb12f1-f616-af6e-ee0f-aa33cb1859d9.png)

プロジェクト情報を記述します。
![プロジェクト情報を記述](https://qiita-image-store.s3.amazonaws.com/0/236049/1cbc0dc7-a3b5-21d7-29d6-560c9f89d14d.png)
![プロジェクト情報を記述](https://qiita-image-store.s3.amazonaws.com/0/236049/15964efb-ceed-95f8-cfd3-f7eac73a8fce.png)
結構長く時間がかかります。

![プロジェクト作成完了](https://qiita-image-store.s3.amazonaws.com/0/236049/6b348843-07e1-7d6e-818e-3351e81e9ea9.png)

サンプルプロジェクトのビルドが完了しました。
![ビルドが完了](https://qiita-image-store.s3.amazonaws.com/0/236049/54558af1-201c-1f7f-79b3-21788eac03e3.png)



## AVD(Android Virtual Device)を設定
今回はPixel 2をエミュレータとして登録設定します。

メニュー → Tools → AVD Managerを選択します。
![AVD Manager](https://qiita-image-store.s3.amazonaws.com/0/236049/97a2b062-897f-1d41-5f83-9240d3678d47.png)
`Create Virtual Device`をクリックします。

![AVD Manager](https://qiita-image-store.s3.amazonaws.com/0/236049/5ef9c192-461b-afc2-2991-5a99a4718409.png)

Android8.0とAndroid8.1のデバイスプロフィールのダウンロードをクリック、それぞれのデバイスイメージがダウンロードされAVDが作成されます。
![AVD Manager](https://qiita-image-store.s3.amazonaws.com/0/236049/15bb157b-3439-0d69-bb1e-41bf136c4025.png)
![AVD Manager](https://qiita-image-store.s3.amazonaws.com/0/236049/5f4ebeed-3833-a820-bdf7-425593c92264.png)
![AVD Manager](https://qiita-image-store.s3.amazonaws.com/0/236049/ba99a0ad-5c38-9a7e-d3ae-731a904c62bb.png)

## サンプルプロジェクトをAVD上で動かす
メニュー → Run → Run 'app'を選択します。
下記のような画面になり「Hello World!」と表示されたら設定完了です。
![Hello World](https://qiita-image-store.s3.amazonaws.com/0/236049/8502b53b-a1f4-9f2e-98f2-3eadddbb0165.png)

# まとめ
手順そのものはそれほど難しくなく、エミュレータ起動からサンプルアプリの動作確認が行えました。
Android Studioを用いて本格的なアプリを開発する場合は、もっと設定が必要になるかと思われます。
Cordovaでエミュレータ確認ができるようにすることが目的ですので、ここまでで一先ずは十分ですね。

## AVDにXperiaを追加できるのか？
https://developer.sony.com/develop/open-devices/guides/aosp-build-instructions/build-aosp-nougat-8-1-oreo-4-4/
こちらのページを見る限りですが、できるっぽい・・・
Xperiaで実機確認をしますが、エミュレータもXperiaにできるとなんとなく気分良いかも。

追々、挑戦してみたいと思います。

# 感想 - 開発環境について
iOSにしてもAndroidにしても、開発環境が凝り過ぎてて超難しいです。
「使いこなせる自信はない」と自信を持って言えます。
Cordovaでできることを試していって、必要な部分を使えるようにしていきます。
Androidアプリ作成するのにKotlin導入してみた。

#Kotlin導入の経緯
　***Web小説読むのにアプリ欲しいな***
　C#かAndroid StudioとKitkat使って・・・
　そういえば、今何流行ってんだろ？？
## とりあえずKitkat調べてみた
・[kitkatはもう古い](https://www.gizmodo.jp/2014/11/android_lollipopkitkat16.html)
・[lolipopが色々できるらしい](https://www.android.com/intl/ja_jp/versions/lollipop-5-0/)
ふむ、KitkaよりAndroid Lollipopかぁ
なんて調べているうちに飛び込んでくるニュース
###Kotlin が Android の公式言語になることが Goole I/O 2017 で発表
　 2017/05/17
   なんと天下のGoogle様から、ワイらKotlin推しで行くからとの発表、[→ソース](https://jp.techcrunch.com/2017/05/18/20170517google-makes-kotlin-a-first-class-language-for-writing-android-apps/
)
###えぇっ！一年ぐらいAndroid開発から離れてたらもう取り残されてる！
***なんとKotlinは今年のうちにはJavaを超える開発シェア率になる勢いらしい***
  [Kotlinの勢いが凄すぎて辛い](https://realm.io/realm-report/)
Googleの発表から***Kotlinやらないやつは恐竜の化石並に取り残される***とか
***Kotlin開発者の年収は1500万超え***とか言いたい放題一体なんなんだKotlin・・・・・・　

##じゃぁKotlin 導入しよか
なんてことはない、webで実行環境がある
https://try.kotlinlang.org/#/Kotlin%20in%20Action/Chapter%201/1.1/1.1_ATasteOfKotlin.kt

#AndroidStudioでは初期インストールできる
導入になんか書こうと思ったけど難しいことは何一つなかった
![image.png](https://qiita-image-store.s3.amazonaws.com/0/128358/5dd9a8cb-bd52-f7f7-eed5-41ef77c7b6a5.png)

皆さんも気軽にKotlin 導入して下さい
![image.png](https://qiita-image-store.s3.amazonaws.com/0/128358/c297984f-09d5-32be-2067-297108429c21.png)
WSL環境でWindowsコマンドの文字コード変換

WSLのコンソールからWindowsのコマンドを起動することが出来ますが、
その出力がShift-JISの為に日本語が化けます。
その対策です、

~/.bashrc に以下を追加
``` alias sjis='iconv -f sjis' ```

Windowsコマンド使用時
``` wincommand.exe | sjis ```

これでLinuxのutf-8に変換されて正常に出力されます。
備忘録：Raspberry PiでNode-REDのノードを追加

Raspberry PiにはNode-REDがプリインストールされてますが、古いバージョンのためノードの追加ができませんでした。
なのでその手順メモ。

##Node.jsとnpmをインストール
下記手順を参考に
[Raspberry PiにNode.jsとnpmの最新版をインストールする - Qiita]
(https://qiita.com/mascii/items/77c685df65c4cbca9315)

##ノード追加
画面からはノード追加できませんでした。
コマンドラインから追加します。

```
cd $HOME/.node-red
npm install [追加したいノード名]
```


##起動
```
node-red-start
```

http://raspberrypi.local:1880/
にアクセス。
rails5.2 + --webpack=vue で hello_vue を表示する 

うまくいかなかったのでメモ

## 動作環境

mac 10.13.5
ruby 2.5.1 (rbenv)
rail 5.2.0

## セットアップ

### Rails アプリ作成

`--webpack=vue` オプションを追加

```
rails new <アプリ名> -d postgresql -B --webpack=vue
```

### CSPの設定

vue を使う場合は　unsafe_eval を設定してね、というため開発環境用に追加。

```
cd <アプリ名>
vi config/initializers/content_security_policy.rb 
---
Rails.application.config.content_security_policy do |policy|
    if Rails.env.development?
      policy.script_src :self, :https, :unsafe_eval
    else
      policy.script_src :self, :https
    end
end
---
```

### bundleしてサーバ起動してみる

```
bundle
bin/rails db:create
bin/rails s
```

welcomeが表示される

### コントローラ作成

```
bin/rails g controller Home index
vi config/routes.rb
---
Rails.application.routes.draw do
  root to: 'home#index'
end
---
vi app/views/home/index.html.slim 
---
= javascript_pack_tag 'hello_vue'
---
```

### webpackでビルドしてみる

```
bin/webpack-dev-server
---
ERROR in ./app/javascript/app.vue
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
---
```

エラーがでる

vue-loader v15 から VueLoaderPlugin を読み込むようになったもよう。

https://vue-loader.vuejs.org/migrating.html#a-plugin-is-now-required

VuewLoaderPluginを取り込むようにする

http://www.erikminkel.com/2018/05/21/rails-5-2-webpacker-and-vue-loader-v15/

```
vi config/webpack/environment.js
---
const { environment } = require('@rails/webpacker')
const VueLoaderPlugin = require('vue-loader/lib/plugin')  <- ★
const vue =  require('./loaders/vue')

environment.loaders.append('vue', vue)
environment.plugins.append('VueLoaderPlugin', new VueLoaderPlugin()) <- ★
module.exports = environment
---
```

### 再度実行！

```
bin/webpack-dev-server

bin/rails s
```

おわり
「@types/」から始まる名前のパッケージとは

TypeScriptを使って開発してるプロジェクトに参加した時、@types/ から始まる名前のパッケージがたくさんあって、なんだろこれ？ってなったので調べてみました。

# `@types/`から始まる名前のパッケージとは
JavaScriptのライブラリに型定義を付与する、型定義ファイルが入ったパッケージです。

TypeScriptで開発中、JavaScriptのライブラリを使いたい時が多々あります。
しかし、JavaScriptは動的型付け言語なのに対し、TypeScriptは静的型付け言語です。
そのままimportしても型定義が存在しないため（暗黙的にany型として扱われる）、エラーの検出ができなかったり、エディタの補完が非力になってしまいと、TypeScriptのメリットが薄れてしまいます。
この問題を解消させるため、JavaScriptのライブラリ本体に加えて、型定義ファイルが入った @types/ から始まる名前のパッケージを入れます。

あくまでも型定義をできるようにする事が目的のパッケージなので、JavaScriptのライブラリ本体は入っていません。（例えば、@types/reactをインストールしてもreact本体はインストールされない）

どんなパッケージが公開されているかどうか調べるときは[TypeSearch](https://microsoft.github.io/TypeSearch/)から調べることができます。

# `@types/`から始まる名前のパッケージの中身
基本的にindex.d.tsというファイルが入っています。
.d.tsは型定義ファイルの拡張子で、ここに型定義が宣言されています。

たとえば、ReactやAngularの型定義はこんな感じです。

* [@types/react の index.d.ts]
(https://github.com/DefinitelyTyped/DefinitelyTyped/blob/6ddc57f14d431f54aa17a5c92427c62b08cb3fe6/types/react/index.d.ts)
* [@types/angular の index.d.ts](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/2689160921392c46cfd8b461116d0dff2b753a26/types/angular/index.d.ts)

見ての通り、ひたすら型定義が書かれているファイルになっています。

# インストールについて
@types/ から始まる名前のパッケージをインストールするだけで、すぐ型定義が使えるようになります。

型定義は開発中のみ使う情報なので、インストールする時はdevDependenciesに入れます。

例えば、Reactのライブラリを型定義付きで使いたい場合は次のようにインストールします。

```bash
$ npm install --save-dev @types/react
```

これでライブラリを型定義付きで使えるようになりました！
備忘録：Raspberry Pi Zero Wの簡単セットアップ

Raspberry Piは、わざわざUSBキーボードやHDMIディスプレイを用意しなくてもセットアップできます。

## 必要なもの
- Raspberry Pi Zero W
- microSD
- microUSBケーブル（Raspberry Piの電源ケーブル）
- PC


## SSHの自動起動
下記手順を参考に、sshのファイルをmicroSDに作成しておくとSSHが自動起動します。
[Raspberry Pi をディスプレイ/キーボードなしで初期設定する](https://qiita.com/eup42/items/58bf6c336d325eba3ee2)

## 無線LAN設定
無線LAN設定も下記を参考にmicroSDにファイルを作成しておけばOKです。
[Raspberry Piの無線LANをmicroSDで設定する](https://qiita.com/mascii/items/0d1a280ac58ed8f6f999)

## ターミナル接続
SSHで接続
ssh pi@raspberrypi.local
PW:raspberry
[CSS]headerにposition: fixed;を使った際に、その下の要素が潜り込んでしまう場合の対処法

headerにposition: fixed;を使った際に、その次に来る要素がheaderに潜り込んでしまい、レイアウトが崩れてしまうことがあると思います。
そんな時は、



```
"hedderの親要素"::after{
  content: "";
  display: block;
  height: "headerの高さ";
}
```

という風に擬似要素を使うと解決します。
VBAでExcuteExcel4Macroを使った"="のコピペではまった

#概要
・ブックBからブックAのシートに"="がついた文字列をコピーしようとしたらエラー1004が出た
・文字列をシングルクォーテーションでエスケープしても同じエラーが表示された
・VBAで値を代入する際にシングルクォーテーションをつけてあげることでコピペできた

#環境
・本番環境：Excel2016
・Qiita掲載のためのテスト環境：Excel2007

#エラーについて
##やりたいこと
・Sheet1のB2にある文章をSheet2のA1にコピーすること  
![無題.png](https://qiita-image-store.s3.amazonaws.com/0/146880/bfea16c4-c7fe-e106-029b-6e34b65ec2a2.png)

複数のシートから値をループでコピーしてファイル出力するマクロを作っていた。順調に動いていたがどうしても上図のようなエラーが出てしまった。
一個ずつ分析していたところ、下図のように"="から始まる文章の時に停止することがわかった。

![無.png](https://qiita-image-store.s3.amazonaws.com/0/146880/c67dd109-9a90-9f45-5e28-0eda0f84c558.png)
#エラーが出たソース
```test.xlsm
Sheets(2).Cells(1, 1) = ExecuteExcel4Macro("Bpath[Book1.xlsx]sheet1'!R2C2")
```
通常のコピーであれば問題は無いと思われる内容で、事実これ以外の数値や文字列ではすんなりコピペできていた。

#原因
色々と検証した結果、ペースト「される側」の表示形式に依存することがわかった。
##エクセルでのコピペの場合
![1.png](https://qiita-image-store.s3.amazonaws.com/0/146880/60fdf7a0-5280-fc10-5a06-fc9a64b7fb78.png)![2.png](https://qiita-image-store.s3.amazonaws.com/0/146880/2e315460-671f-2697-d63c-6fc69eebf758.png)
左側が抽出元、右側が抽出先

エクセルでコピペすると抽出元のセルに入力した文字そのものがコピペされる。
ゆえに抽出先がどのような表示形式でも抽出元の表示形式でペーストされる。

##標準だと関数をそのまま使える、文字列だと文字になる
![3.png](https://qiita-image-store.s3.amazonaws.com/0/146880/b081118d-a2ed-6a28-58ee-98c273c06bf3.png)![4.png](https://qiita-image-store.s3.amazonaws.com/0/146880/4eccebec-b4ac-f736-bfe0-64d8e0aae563.png)
次にExcuteExcel4Macroを使って抽出先の表示形式を標準と文字列にしたものでどうなるか検証した（A2が対象）。
抽出元は文字列の" '=1+1 "だが、抽出先が標準になっていると関数の返り値で出力される。

以上からExcuteExcel4Macroを使うと抽出元の表示形式が文字列でも抽出先の表示形式に依存するということである。

#つまり"="をコピペしたければマクロ側で文字列にする⇒エスケープしてあげれば良い
```test.xlsm
Sheets(2).Cells(1, 1) ="'" & ExecuteExcel4Macro("Bpath[Book1.xlsx]sheet1'!R2C2")
```
ということで"="をマクロで文字列扱いするには上記のように" ' "をExcuteExcel4Macroの前につけてあげると
結果として文字列がペーストされる。

#そもそもなんでこんなことになったのか
実はファイル自体は短いコードが書かれたファイルで、条件に応じてコードに行を追加したり
値を変更したりする必要があるが手作業だと面倒だった。 
そこで効率よく出力するためにマクロで各シートに正規のコードを貼り、それに対してマクロで処理するものだったのだが
この正規のコードに"="から始まるものがあった。
それまでの処理は正常終了していたのに最後の最後のコードがこれでハマってしまった。
ただ、調べてもよく出てこなかったので備忘録や似たような状況の人の助けになればと思い書いた。
Kotlin CLI の使い方: kotlin, kotlinc, kotlinc-js, kotlin-dce-js

Kotlin 1.2.41 を前提に、 Kotlin CLI の使い方をまとめました。

## スクリプトを実行する場合

拡張子 `kts` のファイルを作って実行します。 拡張子が `kts` でない場合は、中身の如何にかかわらず実行してくれません (`error: source entry is not a Kotlin file` とエラーが出ます)。

```shell
kotlinc -script sample.kts
```

このとき、 `sample.kts` は `main` がなくても実行できます。

### コード例

```kotlin:sample.kts
println("Hello World!")
```

## ファイルをコンパイルする

### JVM コンパイル

```shell
kotlinc Sample.kt
```

この場合、 `SampleKt.class` が生成されます。

```shell
kotlinc Sample.kt -include-runtime -d Sample.jar
``` 

このようにすると JAR が作成されます。 出力された `Sample.jar` を次のようにして実行します。

```shell
kotlin Sample.jar
```

または

```shell
java -jar Sample.jar
```

### JS コンパイル

```shell
kotlinc-js Sample.kt -output sample.js
```

javascript ファイル `sample.js` が出力されます。 map, meta はオプションを付けることで出力可能です。

#### Kotlin DCE JS

DCE とは dead code elimination のことで、 使われていないコードは javascript のファイルをでっかくするだけなので消しましょうというものです。 (参考: https://kotlinlang.org/docs/reference/javascript-dce.html)

例えば次のように `Hello.kt` を作成します。

```kotlin:Hello.kt
fun main(vararg args: String) {
    println("Kotlin")
}

fun a() {
    println(1)
}
```

見ての通り 関数 `a` は使われていません。 これを次のように JS Compile をします。

```shell
kotlinc-js Hello.kt -output hello.js
```

すると次のような `hello.js` が作成されます。

```javascript:hello.js
if (typeof kotlin === 'undefined') {
  throw new Error("Error loading module 'hello'. Its dependency 'kotlin' was not found. Please, check whether 'kotlin' is loaded prior to 'hello'.");
}
var hello = function (_, Kotlin) {
  'use strict';
  var println = Kotlin.kotlin.io.println_s8jyv4$;
  function main(args) {
    println('Kotlin');
  }
  function a() {
    println(9);
  }
  _.main_vqirvp$ = main;
  _.a = a;
  main([]);
  Kotlin.defineModule('hello', _);
  return _;
}(typeof hello === 'undefined' ? {} : hello, kotlin);
```

ここで `kotlin-dce-js` を実行します。

```shell
kotlin-dce-js hello.js
```

オプション `-d` で出力ディレクトリを指定できますが、ここでは指定していません。 デフォルトの `min` ディレクトリに次の `hello.js` が出力されます。

```javascript:hello.js
if (typeof kotlin === 'undefined') {
  throw new Error("Error loading module 'hello'. Its dependency 'kotlin' was not found. Please, check whether 'kotlin' is loaded prior to 'hello'.");
}
var hello = function (_, Kotlin) {
  'use strict';
  var println = Kotlin.kotlin.io.println_s8jyv4$;
  function main(args) {
    println('Kotlin');
  }
  _.main_vqirvp$ = main;
  main([]);
  return _;
}(typeof hello === 'undefined' ? {} : hello, kotlin);

//# sourceMappingURL=hello.js.map
```

使用されていなかった 関数 `a` は除去されています。

## REPL (Read Eval Print Loop)

次のコマンドで、 REPL が実行できます。

```
kotlinc
```

`:quit` を入力することで終了できます。 私はよく `Ctrl+D` で終了しています。
そのほかに、次のコマンドが使用できます。



* `:help` : ヘルプを表示 
* `:dump bytecode` : クラスのバイトコードをターミナルに出力するそうです。 使い方がよくわかっていません。
* `:load <file>` : スクリプトを読み込みます。

## その他

`kotlin`, `kotlinc`, `kotlinc-js`, `kotlin-dce-js` のコマンドを紹介しました。 各コマンドに `-h` オプション を付けて実行するとそれぞれのコマンドのヘルプが表示されます。
amazon linux2にoracle java8をインストールする

###既存のjavaを削除
```$ sudo yum remove -y java```

###oracleからjavaをインストール
```
$ wget --no-check-certificate --no-cookies --header "Cookie: oraclelicense=accept-securebackup-cookie" http://download.oracle.com/otn-pub/java/jdk/8u181-b13/96a7b8442fe848ef90c96a2fad6ed6d1/jdk-8u181-linux-x64.tar.gz
```

###解凍
```$ tar -xzvf jdk-8u181-linux-x64.tar.gz```

###~/.bashrcを編集
```sudo vim ~/.bashrc```
###~/.bashrcに以下を追記
```
alias cls='clear'
export JAVA_HOME=~/jdk1.8.0_181
export JRE_HOME=~/jdk1.8.0_181/jre
export PATH=$PATH:~/jdk1.8.0_181/bin:/~/jdk1.8.0_181/jre/bin
```

###設定反映
```source ~/.bashrc```

###確認
```java -version```
Netlify + Netlify CMS + GatsbyでCMSを構築してみたメモ

## 背景

CMSといえばWordpressという時代が長きにわたって続いていますが、

* コードがプログラマーフレンドリーではなく開発が辛い
* スケールを考慮して複数サーバーやCMSで環境構築しようとすると設定が面倒
* 脆弱性が多くメンテナンスコストが高い
* Wordpressで実現してる要件のほとんどは静的サイトで代替できるものが多い

このあたりに積年のフラストレーションがあり、
そろそろ脱WordpressのためNetlify CMSを試してみました。

## 料金

https://www.netlify.com/pricing/

* CDNとして静的サイトをホスティングするだけならいつまでも無料
* その他機能（認証・ユーザー・チーム利用・フォーム）にはフリーミアムな料金設定がある

## Getting Started

https://www.netlifycms.org/docs/start-with-a-template/

[Hugo](https://gohugo.io/) (Golang)
[GatsbyJS](https://www.gatsbyjs.org/) (React)
の２つのStatic Site Generatorがありますが、今回はGatsbyJSを選択しました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/52847/dc0879ac-0351-07cd-cf3f-cc2a2fed83e2.png)

"Deploy to Nelify" > GithubのOauth認証を許可 > リポジトリ作成 & Netlifyにデプロイ

まで行えます。

デプロイされると、自動的にエンドポイントが生成され、
サイトを閲覧できるようになっています。

https://brave-visvesvaraya-e427cc.netlify.com/

## CMSログインユーザーの追加

![image.png](https://qiita-image-store.s3.amazonaws.com/0/52847/f62d4ab0-11a6-1fba-ac8f-ff3cf8516349.png)

Settingタブ > Identity　から

* Registration preferences → Invite Only
* External providers → Githubを追加

![image.png](https://qiita-image-store.s3.amazonaws.com/0/52847/83fe9416-eb3a-d885-c02b-598c86e9d33c.png)

Indentityタブから

Invite Usersでログイン可能にするアカウント(Github)を招待します。

これで

{サイトURL}/admin

でアクセスするとログインできるようになります。

## サイトの編集

![netlify_cms.gif](https://qiita-image-store.s3.amazonaws.com/0/52847/c993d8f3-e777-1f05-3fbd-404f04525db4.gif)

WYSIWYGエディタで編集後、"Publish" でサイトへ反映されます。
（CDNへのデプロイのため、反映までは2〜3分かかります）

## その他の機能

実際の現場で必要になりそうな機能を調べてみました。

### カスタムドメインの割り当て

だいたいここに書いてあります

https://www.netlify.com/docs/custom-domains/

1. サブドメイン(xxxx.hogehoge.com)を割り当てたい場合
所有ドメインのDNSレコードのCNAMEに自動で割り振られたエンドポイントを設定する


2. ルートドメイン(hogehoge.com)を割り当てたい場合

> Recommended: Use a DNS provider that supports CNAME flattening, ANAME or ALIAS records for root domains, and alias your root domain to [your-site-name].netlify.com. We recommend using NS1, or Netlify’s built-in DNS for this purpose.
Alternative: Create an A record pointing your root domain to our load balancer’s IP address 104.198.14.52.

おすすめ: 
ANAMEレコードの仕様に対応するDNSプロバイダを利用するか
NetlifyへのALIASレコード設定をサポートする
[NS1](https://ns1.com/) [Netlify’s built-in DNS](https://www.netlify.com/docs/custom-domains/#automatic) を使う

他の方法:
`104.198.14.52`をAレコードに設定してもらえればNetlifyの方のロードバランサでマッピングしますがパフォーマンスは落ちます


### Basic認証

https://www.netlify.com/docs/headers-and-basic-auth/#basic-auth

### 環境変数

NODE_ENVなど環境変数を設定できます。
https://www.netlify.com/docs/build-settings/#build-environment-variables

### Webhook

https://www.netlify.com/docs/webhooks/

ビルドのタイミングでWebhookを実行できるようです（未検証）

## 所感と課題

* UIはシンプルでわかりやすい
* デプロイにタイムラグがある、と言う点だけ利用者に納得してもらえれば普通にCMSとしての利用は十分なレベル
* Wordpressだとプラグインで行っていた動的処理（PVランキングやコメント機能など）をWebhookや外のAPIに切り出して実装できればWordpressを駆逐できるかもしれない。
vue.jsでローカルファイルを読み込んでtextareaに表示してみるメモ

他により良い方法があれば教えて頂きたいです。

### やりたい事

ローカルのファイルを読み込んでtextareaに表示する。

### デモ

<p data-height="265" data-theme-id="0" data-slug-hash="YvqVye" data-default-tab="js,result" data-user="tsnb4649" data-embed-version="2" data-pen-title="vuejs-fileload" class="codepen">See the Pen <a href="https://codepen.io/tsnb4649/pen/YvqVye/">vuejs-fileload</a> by tsnb4649 (<a href="https://codepen.io/tsnb4649">@tsnb4649</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 参考

http://chibinowa.net/note/vuejs/vue-4.html
https://jp.vuejs.org/v2/guide/instance.html
cloud functionsのimagemagickで使えるフォント

cloud functionsで画像に文字入れ込もうと思った際にフォントって何が使えるのかなーと思って調べてみた.

## やり方

cloud functionsで以下のような処理入れてフォント一覧取得.

```js
    const result = spawnSync('convert', ['-list', 'font']);
    res.send(result.stdout);
```

## 結果

```
Path: System Fonts
  Font: DejaVu-Sans
    family: DejaVu Sans
    style: Normal
    stretch: Normal
    weight: 400
    glyphs: /usr/share/fonts/truetype/dejavu/DejaVuSans.ttf
  Font: DejaVu-Sans-Bold
    family: DejaVu Sans
    style: Normal
    stretch: Normal
    weight: 700
    glyphs: /usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf
  Font: DejaVu-Sans-Mono
    family: DejaVu Sans Mono
    style: Normal
    stretch: Normal
    weight: 400
    glyphs: /usr/share/fonts/truetype/dejavu/DejaVuSansMono.ttf
  Font: DejaVu-Sans-Mono-Bold
    family: DejaVu Sans Mono
    style: Normal
    stretch: Normal
    weight: 700
    glyphs: /usr/share/fonts/truetype/dejavu/DejaVuSansMono-Bold.ttf
  Font: DejaVu-Serif
    family: DejaVu Serif
    style: Normal
    stretch: Normal
    weight: 400
    glyphs: /usr/share/fonts/truetype/dejavu/DejaVuSerif.ttf
  Font: DejaVu-Serif-Bold
    family: DejaVu Serif
    style: Normal
    stretch: Normal
    weight: 700
    glyphs: /usr/share/fonts/truetype/dejavu/DejaVuSerif-Bold.ttf
```

## 結論

cloud functions自体が持っているフォントはそんな種類多くないので使いたいフォントがあれば別途用意する必要がありそう.