OmniAICreator/Qiita-1.07M huggingface dataset:
vue.jsの超初心者がやらかしたhtmlへの読み込みミス

### 作りたかったもの
[jQuery から Vue.js へのステップアップ]
(https://qiita.com/mio3io/items/e7b2596d06b8005e8e6f#%E6%96%87%E5%AD%97%E3%82%92%E5%85%A5%E3%82%8C%E6%9B%BF%E3%81%88%E3%82%8B)
これの最初のやつを作りたかった。クリックするとテキストが変わるやつ。

#まずvue.jsをダウンロードしておく
https://jp.vuejs.org/v2/guide/installation.html
その後、html,jsファイルをフォルダに入れておく。

## 読み込むときのポイント：jqueryと同じ要領で読み込まない

Vue.jsの場合、head内ではなく`</body>`の直前に

```js:test.js
<script src="〇〇.js"></script>
```

を入れる。jqueryを読み込ませる要領でhead内に入れてたら何も反映されなくて1時間くらい悩んだ。

### コード
```html:test.html
<head>
 <script src="vue.js"></script>
</head>

<body>

<h1>Vue.js</h1>
<div id="app">
  Hello {{ message }} !
  <button @click="update">change</button>
</div>

<script src="test.js"></script>
</body>
```

```js:test.js
new Vue({
  el: '#app',
  data: {
    message: 'World'
  },
  methods: {
    update() {
      this.message = 'Vue.js'
    }
  }
})
```
Gatsbyのブログで日本語記事の抜粋（excerpt）を正しく表示させる方法

## TL;DR

[GatsbyJS: Excerpts for non-latin languages](https://www.gatsbyjs.org/packages/gatsby-transformer-remark/#excerpts-for-non-latin-languages)

```graphql
{
  markdownRemark {
    excerpt(truncate: true)
  }
}
```

## きっかけ

[Gatsbyでブログを作成しました](https://n.k-kachi.net)が、３投稿目にして記事の抜粋が表示されない問題が発生しました。

![Screenshot.png](https://qiita-image-store.s3.amazonaws.com/0/122682/31a87c0b-71e6-b7cd-c0e8-679050abd66c.png)

いろいろ試してみたところ、どうやら抜粋は大文字英単語で終わることがわかってきました。
なので、多分日本語由来の問題ではないかと思い調べてたところ解決策を見つけました。

## 解決策

GatsbyでMarkdownを扱うgatsby-transformer-remarkは、デフォルトで`underscore.string/prune`を用いて抜粋をつくっているそうです。
しかし、これは非ラテン文字を扱えないため、日本語を用いる場合は変更する必要があります。

gatsby-starter-blogを使っている場合は、`src/pages/index.js`を次のように変更することで変更できます。

```diff
@@ -54,7 +54,7 @@ export const pageQuery = graphql`
     allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
       edges {
         node {
-          excerpt
+          excerpt(truncate: true)
           fields {
             slug
           }

```
Amazon Linux WorkSpaces に最新の Evolution をインストールする

Amazon Linux WorkSpaces (Amazon Linux 2) の標準イメージには GNOME Evolution がインストールされていますが、バージョンが古かったので、Flathub にあった最新版をインストールしてみました。やり方をメモしておきます。

## 標準パッケージのアンインストール

標準で入っているパッケージを削除します。アプリのデータは引き継がれないので、適宜バックアップしておきます。

```
sudo yum remove evolution
```

## Flathub 版をインストール

Flathub にあるパッケージをインストールするには、当然ですが Flatpak がシステムにインストールされていなければなりません。

参考: [Amazon Linux WorkSpaces で Flatpak をセットアップする](https://qiita.com/mosop/items/a1940e9a1bdf2b4a1c2e)

インストール自体は以下のコマンドを実行するだけです。

```
flatpak install flathub org.gnome.Evolution
```

## ファイルシステムの設定

Flatpak パッケージのアプリはサンドボックス内で実行されるため、既定ではサンドボックス外のディレクトリにアクセスできません。安全ではありますが、ファイルを添付するときに不便です。

override コマンドを使って、Evolution がホームディレクトリ配下のファイルにアクセスできるようにします。

```
sudo flatpak override --filesystem=home org.gnome.Evolution
```

## Evolution の起動

メインメニューの [Office] にあるランチャーを実行します。

![misc (1).png](https://qiita-image-store.s3.amazonaws.com/0/63688/e266a9e4-52e6-a9c5-b84a-af093ee0fda2.png)

Evolution が起動されました :tada:
JenkinsとBitbucketを連携する (Windows10)

# Bitbucketで対象リポジトリの設定画面を開く
![image.png](https://qiita-image-store.s3.amazonaws.com/0/281492/0597f1be-ea13-2452-571f-3325465e2c72.png)

# アクセスキーを選択→鍵を追加
![image.png](https://qiita-image-store.s3.amazonaws.com/0/281492/61139e20-bc5c-80af-29a8-872bd19494cb.png)

#SSH鍵を持っていないので、追加しよう
![image.png](https://qiita-image-store.s3.amazonaws.com/0/281492/5e507807-531d-5969-4061-e4a55d639836.png)

# sshキーを生成
* リポジトリと同期してる、ソリューションファイルがあるフォルダまで移動

```
PS C:\Users\xxxxxx\Documents\neotraining\C#sample\sample1\WindowsFormsApp1> ls
    ディレクトリ: C:\Users\xxxxxx\Documents\neotraining\C#sample\sample1\WindowsFormsApp1
Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----       2019/02/05     17:32                packages
d-----       2019/02/05     17:08                UnitTestProject1
d-----       2019/02/05     17:32                WindowsFormsApp1
-a----       2019/02/05     10:59           2581 .gitattributes
-a----       2019/02/05     10:59           4565 .gitignore
-a----       2019/02/07     11:30           2666 README.md
-a----       2019/02/05     15:58           1648 WindowsFormsApp1.sln
```

* コマンドプロンプトから、"ssh-keygen"を叩く

```
PS C:\Users\xxxxxx\Documents\neotraining\C#sample\sample1\WindowsFormsApp1> ssh-keygen
Generating public/private rsa key pair.
Enter file in which to save the key (C:\Users\xxxxxx/.ssh/id_rsa):
```

* 上記に続いて Enter 押下後、任意のパスワードを設定(2回入力)してEnter

```
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in C:\Users\xxxxxx/.ssh/id_rsa.
Your public key has been saved in C:\Users\xxxxxx/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:wrnGq5A3FhcyRZT2EhNEhe4YVLcQSVwlyAXiasGXrqM xxxxxx@XXXXXXXX
The key's randomart image is:
+---[RSA 2048]----+
|    .X&%*..      |
| . ..+@o o       |
|  o.*o.+.        |
|   =.+oo.        |
|  o o+=.S        |
| . o.+.o         |
|  = + +          |
| . = o .         |
|E   ...          |
+----[SHA256]-----+
```

* こんな感じでファイルが生成される
![image.png](https://qiita-image-store.s3.amazonaws.com/0/281492/f889e061-fbfa-629e-6961-fe540158a412.png)

# bitbucketに戻って、SSH鍵の追加
* 生成されたファイル"id_rsa.pub"を開き、中身をKeyにコピペ
* Labelは任意
![image.png](https://qiita-image-store.s3.amazonaws.com/0/281492/7edd71c2-b7c9-e6f8-4a9e-63669494f31b.png)

# アクセスキーが追加されたら、こんな感じになる
![image.png](https://qiita-image-store.s3.amazonaws.com/0/281492/bd6bf4b7-bf2e-056a-4f25-fd29538e9c25.png)

# Jenkinsのプロジェクトの設定画面にて
* ソースコード管理タブでGitを選択し、リポジトリURLを入力
![image.png](https://qiita-image-store.s3.amazonaws.com/0/281492/ad70a4b1-4e7e-e462-236f-8de7bb00348e.png)
* 認証情報欄の追加ボタンを押下して、下記画面にて認証情報を入力して追加ボタン押下
  * ユーザー名はSSHキー生成時に表示されるやつ
   ![image.png](https://qiita-image-store.s3.amazonaws.com/0/281492/0fdbc143-b8f6-17fb-a96a-a898918f5401.png)
  * パスフレーズはSSHキー生成時に入力した任意のパスワード
  * IDは任意の値
![image.png](https://qiita-image-store.s3.amazonaws.com/0/281492/4ae9cef2-e7fc-ceb7-d216-40e9e9e42e00.png)
* 保存押下

# Jenkinsでビルドが正常終了すれば、ひとまず連携OK
gitをCLIで使うためのコマンド集メモ(随時追加)

### メッセージ付きでcommitする

```terminal
git commit -m "This is a commit"
```

### origin/masterにプッシュする

```terminal
git push origin master
```

### commitを直前のHEADにリセットする

```terminal
git reset HEAD~
```

### コミットログで各コミットの1行目のみを表示する(ハッシュ値、コミットメッセージ)

```
git log --pretty=oneline --abbrev-commit
```

## Config系

### リポジトリ単位のユーザー名とメールアドレスを確認する

```terminal
git config --local user.name
git config --local user.email
```

### リポジトリ単位のユーザー名とメールアドレスを変更する

```terminal
git config --local user.name "wildmouse"
git config --local user.email "wildmouse@example.com"
```

`--local`を`--global`にするとOS全体での設定を確認できる
Install Docker on CentOS 7

![docker-logo.png](https://qiita-image-store.s3.amazonaws.com/0/348116/c120e083-edc3-19b3-e543-9a4b6c6e111a.png)

# 2020/10/23 追記

記事内容は、[Zenn.dev](https://zenn.dev/ymasaoka/articles/install-docker-centos-7) へ移すことにしました。
~~当面の間、内容はこちらにも記載しておきますが、そのうち削除するつもりです。~~

Qiita での記事内容は削除しました。
Zenn.dev 側で掲載していた内容と同じものを公開しているので、そちらをご確認ください。

- [Install Docker on CentOS 7](https://zenn.dev/ymasaoka/articles/install-docker-centos-7)
Remote Desktopのログ記録

Macintoshからwindows Remote Desktopを使い始めようとしたら
https://qiita.com/kaizen_nagoya/items/c305d508c7bac9ce5bea

ではまだRemote DesktopがあるMacOSから利用できてないことを記録。

他のMacOS, Windowsからは利用できている。

利用の記録をどう取るかを今日決めた。

この事業では、Gitlabを利用している。

issueで　「リモートで利用できるようにする。」
という項目があり、Remote Desktopを１台のVMWare上のWindows機材で利用できた状態でclose。

Macosのデスクトップとトート、ウィンドウズのノートでも確認。

何人かで交代で利用することと、今誰が使っているか。どの作業をどこまでやったかを記録するため次の取り決めをした。

使いはじめに、さきほどのissueをreopenして使い始めの時間を記録する。

作業内容または作業記録のURLを書いたうえcloseする。

他の人は利用しようとおもったらissueを確認する。
場合によっては利用者に交代をお願いする。

この運用方法でよいかどうか、しばらく使ってみる。

![remote.png](https://qiita-image-store.s3.amazonaws.com/0/51423/fed3843a-9335-ba3a-fc8e-a422dbde9815.png)

![remote2.png](https://qiita-image-store.s3.amazonaws.com/0/51423/72a06ea6-47c8-0e84-492d-5533587180ce.png)


#参考資料(reference)

Macintoshからwindows Remote Desktopを使い始めようとしたら
https://qiita.com/kaizen_nagoya/items/c305d508c7bac9ce5bea

#文書履歴(document history)
ver. 0.01 初稿 20190207
ver. 0.02 参考資料追記 20190221
CodeIgniterでPOSTが取れなくなった

CodeIgniterで突然POSTの値が取れなくなって困ったのでその解決メモ
print_r($_POST);でも空の配列しか入ってなくて困りましたが
結論としてはドキュメントルートのhtaccessから下記の記述が消えていたからでした
(正確にはhtaccessが消えていた)

```

RewriteEngine on
RewriteCond $1 !^(index\.php|images|css|image|img|js|robots\.txt)
RewriteRule ^(.*)$ /index.php/$1 [L]

```

htaccessを再作成して解決
내가 Qiita를 블로그 플랫폼으로 선택한 이유

# 서론

새해를 맞이하여 그간 미뤄왔던 블로그 재개를 위해 어떤 플랫폼을 써야할지 약 한 달간 고민한 결과 Qiita를 써 보기로 결정했습니다.
Qiita는 일본에서 만들어진 개발자를 위한 markdown 기반 블로그 플랫폼으로 지금부터 소개할 개발자에 특화된 다양한 기능들을 잘 갖추고 있어 일본의 개발자 중에는 모르는 사람이 없을정도로 많은 개발자들에게 사랑받는 서비스입니다. 코드 데코레이션이나 LaTeX지원이 매우 뛰어나고 관심 있는 분야의 인기글이나 최신 글을 손쉽게 찾아 볼 수 있는 기능도 제공하고 있어 최신 트랜드를 파악하는데에도 매우 편리합니다.
여담으로 Qiita라는 서비스명은 일본어 '来た'의 발음을 영어 그대로 옮긴것으로 추측되는데 사전적 의미로는 '왔다!'라고 해석될 수 있지만 2ch라는 온라인 커뮤니티에서는 '앗싸!'라는 의미로 많이 사용되는 일본의 온라인 신조어입니다.

# Qiita의 기능
Qitta의 주요 기능은 다음과 같습니다.

## Markdown 지원
Qiita는 기본적으로 [Github Flavored Markdown](https://guides.github.com/features/mastering-markdown/)을 지원하기 때문에 기존에 Github등에서 markdown에 익숙하신 분들은 손쉽게 적응할 수 있습니다.
Qiita는 자체적으로 확장한 Markdown 문법도 지니고 있는데 이에 대한 상세한 정보는 [Markdown 문법 치트시트](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)에서 찾아 볼 수 있습니다. 

## Syntax Highlighting 지원
일반적인 Github Flavored Markdown과 마찬가지로 코드를 \`\`\`(3중 백 쿼트)로 감싸는 것으로 Syntax Highliting이 적용됩니다. 예를들어 ruby의 경우 다음과 같이 적을 수 있습니다.

>\`\`\`ruby:helloworld.rb
puts 'Hello, world!'
\`\`\`

```ruby:helloworld.rb
puts 'Hello, world!'
```

언어 뿐만아니라 diff와 같은 포멧에 대해서도 github갬성돋는 Syntax Highliting을 지원합니다.

```diff
aaa
bbb
- ccc
+ ddd
```

Java나 Python을 비롯하여 무려 130여종이 넘는 언어와 포멧들에 대한 Syntax Highliting을 지원하는데 지원하는 언어의 목록은 아래 리스트에서 찾아 보실 수 있습니다(이 접이식 표시를 지원하는것도 매력중 하나입니다).

<details><summary>클릭하여 목록을 표시</summary>
- ABAP
- ActionScript
- Apache
- API Blueprint
- AppleScript
- Awk
- BIML
- 1C (BSL)
- C
- Ceylon
- CFScript
- Clojure
- CMake
- CoffeeScript
- Common Lisp
- Config File
- Console
- Coq
- C++
- C#
- CSS
- D
- Dart
- diff
- digdag
- Docker
- DOT
- Eiffel
- Elixir
- Elm
- ERB
- Erlang
- Factor
- Fortran
- FSharp
- Gherkin
- GLSL
- Go
- Gradle
- Graphql
- Groovy
- Hack
- Haml
- Handlebars
- Haskell
- HTML
- HTTP
- HyLang
- IDL
- IgorPro
- INI
- Io
- Irb
- Irb_output
- Java
- JavaScript
- Jinja
- JSON
- Json-doc
- Jsonnet
- JSX
- Julia
- Kotlin
- Lasso
- Liquid
- Literate CoffeeScript
- Literate Haskell
- LLVM
- Lua
- Make
- Markdown
- MATLAB
- MoonScript
- Mosel
- MXML
- Nasm
- nginx
- Nim
- Nix
- Objective-C
- OCaml
- Pascal
- Perl
- PHP
- Plain Text
- Plist
- Pony
- powershell
- Praat
- Prolog
- Prometheus
- .properties
- Protobuf
- Puppet
- Python
- Q
- QML
- R
- Racket
- Ruby
- Rust
- Sass
- Scala
- Scheme
- SCSS
- sed
- shell
- Sieve
- Slim
- Smalltalk
- Smarty
- SML
- SQL
- Swift
- TAP
- Tcl
- TeX
- TOML
- TypeScript
- Tulip
- Turtle/TriG
- Twig
- Vala
- Visual Basic
- Verilog and System Verilog
- VHDL 2008
- VimL
- Vue
- Wollok
- XML
- YAML
</details>

## LaTeX 지원
코드 블럭에 다음과 같이 math를 지정하면 LaTeX 문법을 사용하여 수학 수식을 표시할 수 있습니다.

> \`\`\`math
\lim_{x \to \infty} f(x) \\
\lim_{h \to 0} \frac{f(x+h)-f(x)}{h} \\
\lim_{\substack{x \to \infty \ y \to \infty}} f(x,y)
\`\`\`

```math
\lim_{x \to \infty} f(x) \\
\lim_{h \to 0} \frac{f(x+h)-f(x)}{h} \\
\lim_{\substack{x \to \infty \ y \to \infty}} f(x,y)
```
# 결론
이 밖에도 Qiita는 Google Analytics나 gist와 연동 시킬 수 있는 기능도 지니고 있어 개발과 관련된 글을 작성, 공유하고 관리하기위한 플랫폼으로서 기능적으로 손색이 없습니다.
일본사람들이 주로 쓰는 플랫폼이다 보니 아무래도 플랫폼 안에서의 바이럴을 기대하기는 힘들겠지만 혹시 위와 같은 기능들을 지원하는 무료 블로그 플랫폼을 찾고 계신다면 꼭 한번 Qiita도 검토해 보시길 권해드립니다.
CollectionのwhereBetween

Laravelのバージョンアップを行おうと思い[CHANGELOG](https://github.com/laravel/framework/blob/7b94ffa1c06fa064330fad0709f2046213aab350/CHANGELOG-5.7.md)を眺めていたら、
v5.7.19でこんな記述が

```
Added Illuminate\Support\Collection::whereBetween method (#26888)
```

以前からあった気がするなと思ったのですが、QueryBuilderではなくCollectionでした。

気になったので、ちょっと試す。

```php
>>> $c = collect([['v' => 1], ['v' => 2], ['v' => 3], ['v' => '3'], ['v' => 4]]);
=> Illuminate\Support\Collection {#3155
     all: [
       [
         "v" => 1,
       ],
       [
         "v" => 2,
       ],
       [
         "v" => 3,
       ],
       [
         "v" => "3",
       ],
       [
         "v" => 4,
       ],
     ],
   }
>>> $c->whereBetween('v', [2, 4])
=> Illuminate\Support\Collection {#3149
     all: [
       1 => [
         "v" => 2,
       ],
       2 => [
         "v" => 3,
       ],
       3 => [
         "v" => "3",
       ],
       4 => [
         "v" => 4,
       ],
     ],
   }
>>>
```

filterでcallback書くよりは簡単。
文字列の`"3"`が対象になっちゃうのは、いまいちな気がしますがphpっぽい。
Debug中にUIImageViewの画像を差し替える方法

## きっかけ
サーバーから取得した画像のサイズが可変である場合に、UIImageViewのサイズも可変となる。
可変なUIImageViewによって、レイアウト崩れなどないか確認したかった。

今までの方法だと、画像を差し替えてビルドし直しての繰り返し。
何度もビルドし直すのは効率が悪いし、他にいい方法があるはず。
**再ビルドなしで、画像を差し替える方法があるはず。**

## 環境
* Xcode10.0
* Swift4.2

## 方法
変更したい画像を持つ画面で、Xcodeの`Debug View Hierarchy`を実行。
<img width="1401" alt="スクリーンショット 2019-02-07 13.53.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/136954/dedaa4c8-323a-ac74-6624-f293641f2e9d.png">

Xcodeの左ペインから差し替えたいUIImageViewを選択。
<img width="1399" alt="スクリーンショット 2019-02-07 14.07.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/136954/39dbf604-a125-66a9-5267-e3d3752f3c7a.png">

右下のデバッグコンソールにて、`UIKit`をimportする。
<img width="1403" alt="スクリーンショット 2019-02-07 14.13.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/136954/89bd9221-56b4-2a0b-0868-7128c232f241.png">

```
(lldb) expr -l Swift -- import UIKit
```

さらに、右ペインに表示されているAddressを使って、UIImageViewを取得する。
<img width="1401" alt="スクリーンショット 2019-02-07 14.00.57_1.png" src="https://qiita-image-store.s3.amazonaws.com/0/136954/d3a5d329-e04e-4342-d79b-c1548e66226d.png">

```
(lldb) expr -l Swift -- let $imageView = unsafeBitCast(0x7df67c50, to: UIImageView.self)
```

最後に取得できたUIImageViewのimageプロパティに新しいUIImageを入れる。

```
(lldb) expr -l Swift -- $imageView.image = UIImage(named: "ic_warning")
```

## 参考
https://stackoverflow.com/a/42766226
客先常駐エンジニア（excel職人）がWEB系に転職したらどうなるか

# 前置き
年末年始にまとめようと思いつつ帰省でタイミングを逃し必死こいてカキカキしてる最中。
ただのポエムだったり、未経験からWEB系へ行った者の末路がわかったり、また未経験からWEB系目指す者の参考にでもなればとアウトプット。

# 結論から
厳しいけど目指すなら飛び込んで行け

# どんな感じになるのか
￼<img width="591" alt="スクリーンショット 2019-02-07 11.41.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/241708/3e95917a-4607-d390-84d8-5e12fed120b0.png">

←before after→
小さいベンチャーなのでエンジニア業だけというわけじゃないが、仕事になりますからね、草生えます。自力が足りずに土日とかもガリガリ書くようになります。裁量労働制なので毎日が滅茶苦茶遅いです。そんな日が毎日続くと土日は死んだように寝るようになります。
序盤苦しみ今も苦しんでるけど慣れて行くとアウトプット速度は上がる。
未経験から多少のフォローを貰いつつお仕事は出来るようになる模様。

# 自分について
https://qiita.com/lunalice/items/c0a614c2c358cadf80da
https://qiita.com/lunalice/items/c788b82ba52ad940ac9c
↑いろいろ苦しんだ末９月に転職。

以下ざっくり経歴
〜2010 地元では名が知れた情報系大学卒業
2011〜2014 役者目指してました。
2015〜201808 エンジニアになるつもりで入った企業がSESでCOBOL現場にVBA要員（？）として２年、JAVA現場にVBA要員として１年、COBOL現場に１年。上司と戦争を起こし転職。行動起こすのが遅かったので後悔。この間エンジニアに分類されるがVBAとACSESSとJAVA少しくらいしかやってなし。
2019 エンジニア（５ヶ月目）現在はエンジニア向けの事務作業だったり、機能改修とか。

# 何やってるの？
自社サービスのエンジニア（未経験枠）になりました。
LPの作成（ruby、html、css）
バナー作成（スケッチ）
スクレイピング（jq、q、pup、curl、wget）
記事作成（word-press）
新規ページ作成（ruby、html、css）
機能改修いろいろ（elasticsearch、vue、ruby）
自社特有の業務

# 時間ある時に追記する
osmdroid を使ってAndroid の OpenStreetMap 地図のマーカーの画像を変更する

[osmdroid を使って Android の OpenStreetMap に マーカーを表示する](https://qiita.com/ohwada/items/a85fadbd186abac9dff7)
の続きです

## マーカーの画像を変更する

OverlayItem には マーカーの画像を変更するをメソッドがある

```
OverlayItem#setMarker(Drawable marker) 
```

下記のように、マーカーのリストを生成する

```
drawable markerIcon = get.Resources().getDrawable(R.drawable.marker_new);

    List<OverlayItem> items = new ArrayList<>();

    OverlayItem item = new OverlayItem(タイトル, 説明, new GeoPoint(緯度, 経度));
        item.setMarker( markerIcon );

    items.add(item);
```

### スクリーンショット

マーカーごとに異なる画像を設定した例
![markers_custom_icon.png](https://qiita-image-store.s3.amazonaws.com/0/64075/04c75a2a-0ef2-7c81-4818-87bd9ebf1d47.png)


github にソースを公開した

https://github.com/ohwada/Android_Samples/tree/master/Osmdroid5
hooks使いたくて React のバージョン上げたものの useState の 関数が動かなかったり useEffect がエラー出したりする人は react-hot-loader のバージョンを上げると動くかも

バージョン追随ちゃんとやっていないことがバレバレな記事だが同じアナにハマっている方もいらっしゃるかもしれないので共有。

先日React hooksが stable になった v16.8 がリリースされたが、ウキウキでバージョン上げて開発サーバを立ち上げたところ次のような症状が出た。

- useState の set関数が動かない

```tsx
// 例: これの setCount が実行されてもエラーを出力することもなく、ただただ count が変わらない
const [count, setCount] = useState(0)
```

- useEffectが `Cannot read property 'expirationTime' of undefined` というエラーを出して死ぬ
- hooks使っているFunctionコンポーネントを classコンポーネントの中で使うと `Hooks can only be called inside the body of a function component` と怒られて死ぬ

原因としては react-hot-loader のバージョンが低いことだった。
READMEに書いてある通り v4.6.0 以上では特に何も設定せずとも hooks が動くみたい。

[[React Hooks] Incompatibility with react-hot-loader](https://github.com/gaearon/react-hot-loader/issues/1088)
https://github.com/gaearon/react-hot-loader#react-hooks


それ未満の場合は次のような設定を加える必要があるそうです。

```js
setConfig({ pureSFC: true });
```
WebPに普及してほしくて導入シミュレーターを作ったらやはりWebPすごいと思った話

Edge、Firefoxが相次いで対応し、残るはSafariのみとなったWebP。
このままメジャー制覇、今年はWebP元年になってほしい…！と密かに祈ってます。

そこで既存のWebページの画像をWebPに変換したらどうなるか、簡単にシミュレーションできるツールを作ってみました。

# WebP導入シミュレータ

https://sim.lightfile.net/webp/

URLを入力するとこんな感じでレポートページが生成されます。

どのくらいデータの軽量化にインパクトがあるか、そしてそれぞれの画像について画質がどうなるか調べることができます。

![simulator.png](https://qiita-image-store.s3.amazonaws.com/0/35178/ad1577dc-147f-27a5-d760-06c24fd5a37b.png)

実際のレポートはこちら
https://sim.lightfile.net/webp/reports/e1af4b66-4029-418e-acf2-ac9964b7cb05


# 画像データが半分以下になるサイトが多数

上では東京オリンピック・パラリンピックのページを例にしましたが、画像データ量が1/3くらいになりました。

JpegからWebPへの変換は、標準の`-q 75`としています。
確かによく見ると画質はちょっと悪くなってると言えます。
ただ、この程度の画質低下で-7.58MBも削減できるならそのくらいよくない？と、自分なんかは思ってしまいます。

PNGとGIFはロスレス変換しているので、画質の低下は一切ありません。

例えばトヨタ自動車さんのサイトもWebP導入の効果大です。

WebP導入レポート -60.1% | トヨタ自動車WEBサイト
https://sim.lightfile.net/webp/reports/9c86718a-3bc7-4966-b633-9dfe45bedd3d
![WebP導入レポート -60.1% | トヨタ自動車WEBサイト](https://sim.lightfile.net/_resources/9c86718a-3bc7-4966-b633-9dfe45bedd3d/summary.png)

このくらいの成果が現れるサイトはごろごろ見つかりました。

WebPすごい！

ということで、皆さんのサイトやお客さんのサイトでもぜひ試してみてもらえると嬉しいです。

# エクスキューズ

読み込み時間やギガ節約、クラウド料金の指標は「ん〜？」と感じるところがあると思いますが、プロモーションを兼ねたツールでもあるのでご勘弁を^^;

あとTwitterなどの外部参照の画像も合算でシミュレーションしているなど、アラも目立つのですが少しずつ改良していきます。

# どうやって作られているか

せっかくQiitaなので、使っている技術について紹介します。

利用者が多くなければほぼ無料で乗り切りたいと願って作った、クラウドネイティブアーキテクチャです。

## データストレージ

* S3
* DynamoDB
* SQS

シミュレーション結果はDynamoDB、スクリーンショットやWebP変換後の画像などはS3に保存します。
実際のシミュレーションは、クローズドな環境のワーカーで行っているので、そのタスクキューにSQSを使っています。

## ワーカー

* Puppeteer
* cwebpコマンド

Puppeteerで実際にダウンロードされる画像データをキャプチャしてWebPに変換するシミュレーションを実行します。
この辺一番重いところですが安く済ませたいのでオフィス内(!)でワーカーを走らせて、SQS経由でタスクを受け取ってシミュレーションを実行しています。

## フロントエンド

* Vue.js
* AWS SDK
* Chart.js

限定的なIAMユーザーでAWSのリソースに直接アクセスします。Vue.jsでそれらのレンダリングおよびインタラクションを実装します。

## Webホスティング/SSR

* S3
* CloudFront
* Lambda@Edge

できる限りシンプルにS3からの静的ファイル配信で済ませたかったのですが、シェア機能を実装したかったので、ちょっとしたSSRをLambda@Edgeでやっています。

といっても、ルーティング補助の簡単なURLリライトと、titleタグやOGPを置換するくらいでちゃちゃっと用意できました。

Vue.js + Lambda@Edgeはけっこう気に入りました。

## シェア画像

技術的に凝ったのがシェア画像の生成部分です。
Puppeteerで実際のレポート画面から、上部のサマリー部分を切り取ってOGP画像として再利用しています。
Qitta「書き方」まとめ

#見出し#
##見出し##
###見出し###

**強調**

[リンク](http://www.google.com/)

コード
```ruby:filename.rb
コード
```

- リスト 1
- リスト 2
 - リスト 2-1

1. 番号付きリスト 1
2. 番号付きリスト 2
3. 番号付きリスト 3

- [ ] チェックボックス 1
- [ ] チェックボックス 2
- [ ] チェックボックス 3
Go1.11でカスタムパッケージを追加する方法

Go1.11ではModulesという機構が追加され、go mod コマンドでmodulesを管理することができる。
もうGoPath直下にディレクトリを切らず、どこでも好きなところに置けます。

Modulesの使い方は様々な記事で紹介されていますが、
1．`export GO111MODULE=on`
2．`go mod init`

これだけです。
あとは、`go build`でコンパイルすればプログラム内のimportに記載されているパッケージが自動的にインストールされて、`go.mod`と`go.sum`に追記されます。

ちなみにバージョン等を指定したい場合は下記の場所を書き直せばいいぽい

```go.mod
require (
    //ここ？　
    github.com/XXXXX
)
```

んで、フォルダを切って新しいパッケージを宣言した場合、相対パスでimportできなかった

```
|-main.go    //package xxx
|-sub
   |-sub.go  //package sub
```
```sub.go
//パッケージ名
package sub

import (
  ...

```

このような場合、go.modにはmoduleにメインのパッケージ「XXX」と書き、そこからの相対パスをimportに使用する。

```go.mod
//mainのパッケージ名
module XXX
require (
    github.com/XXXXX
)
```

```main.go
package xxx

import (
  "xxx/sub"
)
```
当たり前のことだが、カスタムパッケージ？ってググってもあまりGo1.11で出てこなかったので覚書程度に記載しておきます。
macOS MojaveにてGmailが受信出来ない。

#Gmailの受信が出来ない
はい。突然Macのメールクライアントにて受信が出来なくなりました。

```
サーバ“imap.gmail.com”のデフォルトのポートへの接続がタイムアウトになりました。
```
アカウント名の横に「！」アイコンが表示。アカウントエラーから「やり直す」を選択しても変化なし。

##メールアカウント設定を削除
「メール」→「アカウント」から、現在登録しているアカウントを削除。
※「環境設定」→「アカウント」で状況を見るとオフラインになっている筈です。
再び「＋」アイコンから登録して接続されるか確認・・無事死亡。知ってました。

##メールアカウント設定から新規追加
会社のアドレスが2つあり、片方の登録は無事完了したものの、もう一つのアカウントが「メールを入力」項目を終えて遷移した画面で、白紙フリーズ。うーむ、素晴らしい。

##Gmail 受信設定を変更
エラーメッセージより見つけた[こちら](https://support.google.com/mail/answer/7104828?hl=ja&visit_id=636851099432016960-208453250&rd=1)から
「Gmail」→「設定」→「メール転送とPOP/IMAP」→「IMAPを有効にする」をチェック。
これで治った筈だと、macのメールを起動・・結果は見事「アカウントエラー」。また君か。

##再起動すりゃあいいんだよ
Windows XPでPCがフリーズしたら間髪挟まずに、強制終了して寿命縮んでも気にしねえ、復帰しろやああとmacを再起動。・・しかし「接続中」のまま状況は変わらず。

##接続状況を確認
「メール」→「ウィンドウ」→「接続診断」より状況を確認。
"Google : IMAP : 接続中"　より、接続アイコンがくるくる回っている模様。
「接続情報を表示」を押しても何も出てこず、「動作状況」を開いてもまっさらの画面です。
iPhone3GS時代にP**nhubを開いた時なんかも、読み込みが長いと萎えましたよね、今回は業務に支障が出ています。

##接続状況が遂に表示！！

```
INITIATING CONNECTION Feb 07 13:14:01.127 host:imap.gmail.com -- port:0 -- socket:0x0 -- thread:0x600001913880

INITIATING CONNECTION Feb 07 13:14:05.773 host:imap.gmail.com -- port:0 -- socket:0x0 -- thread:0x600001939d00

INITIATING CONNECTION Feb 07 13:14:06.465 host:imap.gmail.com -- port:0 -- socket:0x0 -- thread:0x60000165e740

INITIATING CONNECTION Feb 07 13:14:11.622 host:imap.gmail.com -- port:0 -- socket:0x0 -- thread:0x60000191e080

INITIATING CONNECTION Feb 07 13:14:17.174 host:imap.gmail.com -- port:0 -- socket:0x0 -- thread:0x600001652700

INITIATING CONNECTION Feb 07 13:14:17.337 host:imap.gmail.com -- port:0 -- socket:0x0 -- thread:0x600001916040

INITIATING CONNECTION Feb 07 13:14:17.577 host:imap.gmail.com -- port:0 -- socket:0x0 -- thread:0x60000165fec0

INITIATING CONNECTION Feb 07 13:14:51.352 host:imap.gmail.com -- port:0 -- socket:0x0 -- thread:0x600001913880

INITIATING CONNECTION Feb 07 13:18:10.417 host:imap.gmail.com -- port:0 -- socket:0x0 -- thread:0x600001913880

INITIATING CONNECTION Feb 07 13:23:25.877 host:imap.gmail.com -- port:0 -- socket:0x0 -- thread:0x60000191e3c0

INITIATING CONNECTION Feb 07 13:24:49.486 host:imap.gmail.com -- port:0 -- socket:0x0 -- thread:0x60000143de80

INITIATING CONNECTION Feb 07 13:26:40.918 host:imap.gmail.com -- port:0 -- socket:0x0 -- thread:0x600001686d80

INITIATING CONNECTION Feb 07 13:30:27.004 host:imap.gmail.com -- port:0 -- socket:0x0 -- thread:0x6000014fcfc0

INITIATING CONNECTION Feb 07 13:32:47.669 host:imap.gmail.com -- port:0 -- socket:0x0 -- thread:0x600000005c00

INITIATING CONNECTION Feb 07 13:35:02.553 host:imap.gmail.com -- port:0 -- socket:0x0 -- thread:0x6000000b8400

INITIATING CONNECTION Feb 07 13:36:04.242 host:imap.gmail.com -- port:0 -- socket:0x0 -- thread:0x600000005c00

```

このIMAPサーバーに接続出来ませんでしたbrabrabra...
[こちら](https://discussionsjapan.apple.com/thread/10164054)に記載のエラー表示になります。
いや、一回削除して再登録もこなしたし、むしろiPhone上でもブラウザ上でも受信が出来てるのにmacのメールでだけ、昼過ぎから急にバグり出しただけなんですがそれは・・。

##解決策と謳って
GIVE UP.　[I've given up](https://www.youtube.com/watch?v=0xyxtzD54rM).
Appleサポート（）を見ても載っているのは「対応」で「解決策」ではないので、OSのアップデートか、寝かせたら治ることに期待します。
[心を落ち着かせて](https://www.youtube.com/watch?v=jsDRLAQ0wWM)、業務に戻ります。
円マークとバックスラッシュの文字コード

円マークとバックスラッシュは環境によって文字コードが異なる。

# 各環境の文字コード

以下は各環境でのUTF8の文字コード。

### Windows Web
- 円マーク: 5C
- バックスラッシュ: 5C

※円マークとバックスラッシュに区別がなく同一文字

### Mac・iOS・Android Web
- 円マーク: A5
- バックスラッシュ: 5C

### iOS・Androidネイティブアプリ
- 円マーク: C2A5
- バックスラッシュ: 5C

# 問題

Windowsとその他で円マークの文字コードが異なるので、Windowsで円マークを含むログインパスワードを登録した人が、Macで同じパスワードを入力してもログインできないというようなことが起こる。

# 上手いことするには？

そもそもログインパスワードなどに円マークを使用させないのが手間がなくて良い。

それでも円マークを使いたい場合、パスワードの登録や一致確認をするにあたり、入力文字に変換をかけてやれば良い。
Windowsは5Cしか入力できないので、文字コード`A5`および`C2A5`を`5C`に変換してWindowsに寄せるのが良いと思われる。

また、円マークを画面に表示する場合も文字コードの差異を考慮する必要があるが、ここでは割愛。
Rails foreign_keyに利用されているIDカラムを Int:11 から Bigint:20 に変更する

個人的メモ

**注意: データ量の大きいテーブルに対して無闇に行うと`ALTER TABLE`が終わらず死ぬので注意**

Rails 5.1 より前に作成されたテーブルは`id`が`integer(INT:11)`、5.1以降は`bigint(BIGINT:20)`に変更されており、これが混在しているとややこしいので統一したい。

さらに、該当のテーブルの`ID`を利用した`foreign_key`(FK制約)がある場合はそれを一度解除してから、カラムのタイプに変更を加え、再度`foreign_key` を設定してあげる必要がある。

なので、migrate ファイルは下記のようになる。

```ruby:db/migrate/20190207040502_change_type_of_posts_id_from_integer_to_bigint.rb
class ChangeTypeOfPostsIdFromIntegerToBigint < ActiveRecord::Migration[5.2]
  def up
    remove_foreign_key :comments, column: :post_id
    change_column :posts, :id, :bigint, auto_increment: true
    change_column :comments, :post_id, :bigint
    add_foreign_key :comments, :posts, column: :post_id
  end

  def down
    remove_foreign_key :comments, column: :post_id
    change_column :comments, :post_id, :integer
    change_column :posts, :id, :integer, auto_increment: true
    add_foreign_key :comments, :posts, column: :post_id
  end
end
```

```diff：db/schema.rb
   create_table "comments", options: "ENGINE=InnoDB DEFAULT CHARSET=utf8", force: :cascade do |t|
-    t.integer "post_id"
+    t.bigint "post_id"

...

-  create_table "posts", id: :integer, options: "ENGINE=InnoDB DEFAULT CHARSET=utf8", force: :cascade do |t|
+  create_table "posts", options: "ENGINE=InnoDB DEFAULT CHARSET=utf8", force: :cascade do |t|
```

`schema.rb`の`diff`の通り、`create_table ~, id: :integer`とあるテーブルは`bigint`化されていないテーブルなので、該当のテーブルを洗い出して、一気に変更をかけると良い。
踏み台サーバー経由のOracle Database接続(SQL Developer)

# はじめに
踏み台サーバー経由のOracle Database(SQL Developer)の接続方法について備忘録として記載。バージョン新し目の情報も特に見つからなかったし丁度良いかな？
（SQL Developerはバージョン18.3.0.277を使用）

# 環境構成
以前の記事を確認してほしい。
[「Pageantを使用して踏み台サーバー経由でアクセスしてみた」の環境構成](https://qiita.com/untitle_23/items/7af5e6b1d29f95c13f36#%E7%92%B0%E5%A2%83%E3%81%AE%E5%89%8D%E6%8F%90)
注意が必要なのは、使用する時は、**踏み台サーバー => DBサーバーの1521ポートは開放する必要がある。**

# 前提
以下が設定されていること。

- SQL Developerがクライアント端末にインストールされていること
- 公開鍵/秘密鍵があり、公開鍵だけが各サーバーに配置されていること

# SQL Developer設定方法
設定はこれまた簡単だが、今までのPageantは使用できない。

## SSHトンネリングの設定
`表示` > `SSH` を押す
<img width="640" alt="001.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/278065/991f6d3f-5afa-34de-01c5-0476f59fe3f6.png">


`SSHホスト`で右クリックし、`新規SSHホスト`を押す
<img width="640" alt="002.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/278065/be72642a-6643-6040-e4dc-e948dfa6dc0c.png">


`名前`：任意（ここでは踏み台）
`ホスト`：踏み台サーバーの**Global IPアドレス**を記載
`ポート番号`：22（デフォルトから変更していない場合）
`ユーザー名`：sshで使用するユーザー名を記載
`鍵ファイルの使用`：チェックして、秘密鍵を選択する
`ローカルポート転送の追加`：チェックする
`名前`：任意（ここでは検証DB）
`ホスト`：DBサーバーの**Private IPアドレス**を記載
`ポート番号`：1521（デフォルトから変更していない場合）
`ローカルポートの自動割当て`：選択する
<img width="180" alt="003.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/278065/a833b3a2-de75-8395-42c3-7f67add0cbc9.png">

以上でSSHトンネリングの設定は完了。

## DB接続の設定
接続の＋（プラス）ボタン横の▼（下三角）を押して、`新規データベース接続`を押す
<img width="639" alt="004.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/278065/3658ac03-b5a2-a2a9-a282-9372122209a7.png">

`接続名`：任意（ここでは検証DB）
`ユーザー名`：任意（ここではsys）
`パスワード`：入力
`パスワードの保存`：チェックする（しなくても良い）
`接続タイプ`：SSH
`ロール`：デフォルト（特に変更していない）
`ポート転送`：先ほど作成した物を選択
`サービス名`：認識しているサービス名を記載
<img width="381" alt="005.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/278065/ea6a6b78-a0a0-0759-adad-b53f7c6d763f.png">

以上でDB接続の設定は完了。

## 接続
Oracle接続に作成した設定があるので、右クリックして`接続`を押す。
その際に、踏み台サーバー用の秘密鍵のパスフレーズを聞かれるのでそれを入力すれば接続ができる。
<img width="643" alt="006.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/278065/bbc269be-4eb6-6cad-b509-c5b321e71119.png">


# 注意事項
例えば、[以前の記事](https://qiita.com/untitle_23/items/af4e6b9fb00cf5981e32)のように、sshログを取得するように踏み台サーバーを構築している場合は、[ここ](https://qiita.com/untitle_23/items/af4e6b9fb00cf5981e32#aws%E3%81%AE%E6%89%8B%E9%A0%86%E3%81%A8%E9%81%95%E3%81%86%E7%AE%87%E6%89%80)にも記載の通り、AllowTcpForwardingはyesにしておく必要がある。
Macintoshからwindows Remote Desktopを使い始めようとしたら

Windows 10へ MicrosoftのRemoteDesktopを使ってmacOS10.13.6からアクセスしよう。

#Windows側の設定
Microsoft Windows - リモートデスクトップの使い方と設定
https://pc-karuma.net/windows-remote-desktop/

#Macintosh側の設定
Macintosh でアプリをダウンロード
https://itunes.apple.com/jp/app/microsoft-remote-desktop/id715768417?mt=12&ign-mpt=uo%3D4

導入にはApple IDが必要だった。

ダウンロードしたら

<img width="710" alt="RD00.png" src="https://qiita-image-store.s3.amazonaws.com/0/51423/701c19f1-21e7-d814-e319-63a90153e50b.png">

Microsoft Remote Desktopをダブルクリック

<img width="564" alt="RD01.png" src="https://qiita-image-store.s3.amazonaws.com/0/51423/41943fa5-63e7-7d3e-a635-0e3f8bec1eef.png">

左上の
「＋
　NEW」
をクリック

<img width="514" alt="RD02.png" src="https://qiita-image-store.s3.amazonaws.com/0/51423/aeb57294-c21d-9fe1-c33f-5ed94b7e6c23.png">

Connection Name
User name
Password

を入れる。

あれ、実行ボタンがない。

一つ前の画面の
「START」
を押すらしい。

```
connecting
```
と表示され、

```
Connection refused
```
の小さい窓が出た。

原因を調査。

さっき、別のMacOS機器から接続できたらしい。

誰か接続しているのか。
ちがった。

 Connection nameじゃなくてPC nameにIPアドレスにしなきゃだめだった。

<img width="514" alt="RD03.png" src="https://qiita-image-store.s3.amazonaws.com/0/51423/1ed4acb6-395b-53a3-f759-5e40e89c4209.png">

connection refused

がっくり。

IPアドレス入れて、PC nameを入れないと

<img width="514" alt="remotedesktops.png" src="https://qiita-image-store.s3.amazonaws.com/0/51423/1210ac04-74ff-47a9-b39d-a2b88f159ecd.png">

両方入れても

<img width="602" alt="desktop1.png" src="https://qiita-image-store.s3.amazonaws.com/0/51423/8933269d-de9e-0069-7e25-45e31217303a.png">

Windowsの機材で、ログインした状態、サインアウトにした状態など切り替えても同じ。

#参考資料(reference)

Remote Desktopのログ記録
https://qiita.com/kaizen_nagoya/items/7b8f49d0142e42afb4ce

#文書履歴(document history)
ver. 0.01 初稿 20190207 昼
ver. 0.02 pc name にip アドレスを入れる。 20190207 午後
ver. 0.03 参考資料追記 20190221
docker-composeを利用したMySQL起動の最小構成

ローカル開発環境の構築で、docker-composeを利用したMySQL起動を試したのでメモ。

## docker-compose.yml作成
以下のようにdocker:docker-compose.ymlを作成します。
`MYSQL_ALLOW_EMPTY_PASSWORD` パラメータで、rootユーザのパスワードが空を許容しています。

```docker:docker-compose.yml
version: '3'
services:
  db:
    image: mysql:5.7
    ports:
      - "3306:3306"
    environment:
      MYSQL_ALLOW_EMPTY_PASSWORD: "yes"
```

## Usage
起動

```bash
docker-compose up -d --build
```

接続

```bash
mysql -uroot --protocol=TCP
```

停止

```bash
docker-compose down -v
```

※GitHubにソースあります。
https://github.com/nesheep5/mysql_with_docker_compose
Windows10 頻繁にハングアップし始めたので対応したこと

会社PCを乗り換えて半年くらい経ち、最近頻繁にハングアップし始めたので、やったことの備忘録です。

# 1.SFCとDismコマンドをつかってWindowsを修復する
　・[参考にしたページ](https://windowsfaq.net/settings/system-repair/) 
　　依然ハングアップするが、大分マシになった感じ

# 2.msconfigで要らないスタートアップとサービスを停止
　・これも劇的に効果があるわけではないが、起動時のもっさりした感じがシャープになった。

# 3.デフラグ
　・定期的に行っているが、Cドライブのみを行っていたので、開発ソース等のあるDドライブに対しては
　　やっていなかった。Dドライブをデフラグしたことで、開発リソースへのアクセスは軽くなった
　　⇒やっぱり全てのパーティションで月1くらいでやった方が良い。

# 4.ディスクのクリーンアップ
　・結局これが一番効果が大きいことが判明した。
　　Win7のときもそうだが、システムファイルやWebのキャッシュ等のゴミは何等か悪さをする模様なので、
　　定期的に実行した方が良さそう。
　　実際Win10は半期に一度ドラスティックに動くし、その辺のゴミはやっぱり産廃だということですかね。
　　もし、不安なら、別ディスクにスナップショットを残すなりをすることで戻せますしね。
スマフォのセキュリティ対策はPCとIoTと違うか

スマフォのセキュリティ対策を考える。

PCのセキュリティ対策
スマフォのセキュリティ対策
IoT機器のセキュリティ対策
の３つを網羅的に調査する。

この手法は、サンドイッチ手法といいます。
あるものを、それより大きいもの、それより小さいものの両方を考えてあることにより、その対象に対する漏れがないことを確保しようという方法です。


#スマフォの物理的な大きさに依存した対策

持ち逃げ
SIMだけ持ち逃げ
SIMの差し替え
SDカードの持ち逃げ
破壊

#スマフォの価格に依存した対策

適用できる保険の種類
適用できる保険の保証金額の上限


#スマフォに保存した情報に依存した対策

暗号化の対応の種類：OSに依存


# スマフォのOSに依存した対策

## iOS


## android
androidは、スマフォに限らず、Padでも使われており、PCとして機能するLinuxを前提としている。

androidのセキュリティ対策は、例えば

スマホのセキュリティ対策6選 | なぜ必要？ウイルス対策アプリおすすめ【Android】
https://boxil.jp/beyond/a5269/
GCPでIAMメンバーに付与した役割を確認したい

## 背景
* GUIで取り急ぎIAMメンバーに追加した役割をTerraformにリバースしたい
* roleのところの記載名を知りたい（ex. roles/bigquery.user）
* 役割一覧に登場しない（ex. Dataproc サービス エージェント）
* そうだ、gcloudコマンドでrole一覧取得しよう

### 叩いたコマンド
```
gcloud projects get-iam-policy ${project_no}  \
--flatten="bindings[].members" \
--format='table(bindings.role)' \
--filter="bindings.members:${service_account}"
```

### ちなみに
* Dataproc サービス エージェントは、 `roles/dataproc.serviceAgent` でした
ubuntu ホームディレクトリの英語化

## ホームディレクトリ内の「ドキュメント」「ダウンロード」等を一括で「Documents」「Downloads」等に変更する


`$ LANG=C xdg-user-dirs-gtk-update`
※ sshからやって失敗したら、ubuntuデスクトップのターミナルから実行するとよさそう
Run Fargate task by StepFunctions

StepFunctionsからFargateが起動できるようになってました（2018年12月末くらい）

より簡単にFargateを利用しやすくて良いですね。

Fargateを使うための下準備は以下のようなもの。

- 接続対象のVPC、サブネット、ルートテーブル
- ECR
- ECS（クラスタ定義、タスク定義 ※並列で処理しないならサービス定義は不要）
- StepFunctionsにFargateタスク連携用のアクティビティを登録（※ポーリング処理でタスク実行しているなら必要）

下記のようにStepFunctionsのステートマシンを設定すれば、

1. StepFunctionsの1つ目のStepがFargateタスクを起動（起こすだけ）
1. 2つ目のStepで、アクティビティに紐づくFargateタスクを起動（処理本体はこちら）

といったことが可能です。

<pre>
{
    "Comment": "Run Fargate Task Statemacine",
    "StartAt": "Run Fargate Task",
    "TimeoutSeconds": 3600,
    "States": {
        "Run Fargate Task": {
            "Type": "Task",
            "Resource": "arn:aws:states:::ecs:runTask",
            "Parameters": {
                "LaunchType": "FARGATE",
                "Cluster": "sample-cluster",
                "TaskDefinition": "sample-task",
                "NetworkConfiguration": {
                    "AwsvpcConfiguration": {
                        "Subnets": [
                            "subnet-0123456789abcdefg"
                        ],
                        "AssignPublicIp": "ENABLED"
                    }
                }
            },
            "Next": "sayHello"
        },    
      "sayHello": {
      "Type": "Task",
      "Resource": "arn:aws:states:ap-northeast-1:9999999999999:activity:sample-activity",
      "End": true
    }
    }
}
</pre>

Fargateタスクを起こすと同時に任意処理を完了するまで待ちたい場合は、
”Resource”末尾に"sync"を添えるとStepは次に進まずに待機してくれます。

<pre>
"Resource": "arn:aws:states:::ecs:runTask",
</pre>
<pre>
"Resource": "arn:aws:states:::ecs:runTask.sync",
</pre>

以上です。

※公式ドキュメントの試せばわかるべ的な突き放し感はいつもとおり。
https://docs.aws.amazon.com/ja_jp/step-functions/latest/dg/connectors-ecs.html
Vueで日本語PDFの帳票をクライアント生成してダウンロードさせる方法canvas版

# 前置き
Reactのプロジェクトで日本語PDFを生成するプロジェクトがあったので、Vueでもやってみました
[Reactで日本語PDF](https://qiita.com/sakapun/items/d740445c610787e5b8e8)

なお、単一ファイルコンポーネントでの対応です。

## 使うもの
- [pdfmake](https://github.com/bpampuch/pdfmake)
- [html2canvas](https://html2canvas.hertzen.com/)
- [paper.css](https://github.com/cognitom/paper-css)

## どうするのか

Qiitaで「vue pdf」検索すると出てくるのがこの記事です。
https://qiita.com/komatzz/items/b71167a024444f463a6b

Reactでの先駆者の記事と同じくpdfmakeの素の文字機能を使っており、日本語でのPDF帳票ができるところまでなかなか難しい。
また、レイアウトなども難しそうです。

なので、DOMをcanvasにしてPDFに出力する方法を取ります。

### モジュール追加

```
npm install --save pdfmake html2canvas
```

### その他

logic.jsを作成し、サンプルコードを貼り付けます。
paper.cssを作成し、サンプルコードを貼り付けます。

そして、refsで参照したelementを、logic.jsの関数に食べさせればOKです。


参考のソースはCodesandboxに作ったのでこちらを見てください。
https://codesandbox.io/s/mqyzy8158x


~~もしも画面内プレビューがいらない場合は、印刷するコンテンツをこのようにすっ飛ばすと良いようです。~~
画面内に印刷するものを配置すると横幅が崩れてしまいました。
そのため、印刷するelementは画面外にすっ飛ばして、プレビューする同じコンテンツを配置しています
Laravelで曜日表記を日本語にする

`2018年8月20日(木)` って表示したいのに　`2018年8月20日(Thu)` と表示されて手元のThinkPadを窓から投げそうになったことはありませんか？

こういう場合は `format()` ではなく `formatLocalized()` を使います。

```php
Carbon::now()->formatLocalized('%Y年%m月%d日(%a)');
```
これで正しく表示されてめでたしめでたしですね！

# どうしても英字表記になってしまう場合は

## localeを日本にする
PHPのロケーション設定を日本にします。
もし、稼働中の環境にmbstring拡張モジュールが入っていない場合は入れましょう。日本語を扱う上でmbstringは必須のようなものです。

```
setlocale(LC_ALL, 'ja_JP.UTF-8')
```

## OSに日本語ロケールを入れる

これを知らなかったのでかなりの時間悩まされました。Homesteadの場合は `vagrant ssh` でSSHに入って次の記事にあるコマンドを叩けばOKです。

https://qiita.com/kei2100/items/a912ec733f646f8c3938
docker の image file を 移動する

SSDにinstallしていると、image fileみたいのをそこにおきたくないわけで、docker の image file を 移動する

```
$ sudo su
# systemctl stop docker
# cd /var/lib
# mv docker /mnt/hoge
# ln -s /mnt/hoge/docker /var/lib
# systemctl start docker
```

* [proxy環境下でdockerを使う](http://qiita.com/hidenorly/items/18e18741340debd6ea40)
* [ねころくぶろぐ/Dockerイメージ、コンテナの場所](https://www.neko6.info/archives/1979)
最低限の知識だけでchmodする（図解）

## 対象読者
- 私
- chmodで何ができるかはざっくり知っている方
- でも毎回ググって調べちゃう、今回もそうしてたどり着いた方
- そして今回も完璧に理解する気はないしとりあえずざっくり思い出せたらいい方

## 図解
<img width="834" alt="ファイル 2019-02-07 12 16 41.jpeg" src="https://qiita-image-store.s3.amazonaws.com/0/351891/8c284b1d-89f4-921b-2c15-5f174e5336e6.jpeg">

図解と銘打ってるくせに雑な図で本当にごめんなさい・・・
Windows10 の 辛みの解消へ

# Oveview

replaceの生活マシン (i5 8GB Win 10マシン)が、 3年前の生活マシン (i5 4GB Win 8.1)よりも遅くて仕方がなく、いろいろとやっているので、その辛み解消のメモ.

わかったサマリーとしては、

2 cores / 4 threads程度のCPUでは、以下は重すぎる。

* 圧縮スワップは、Idle threadで、圧縮処理をするため. foregroundからすれば無駄な処理. idleなのでschedulerの観点では大丈夫なはずだが、、cacheが荒れるので、foregroundに大きな影響がある
* Search Indexの処理は、同様に、Idle threadで、indexing処理 (word単位でtreeの構築のような)をする. 同じく、cacheが荒れるので、foregroundに大きな影響がある


# CPUのschedulerのpolicyの変更

* 電源のポリシーを、下限が小さく設定されていると、CPUのoperating point以上に、throttlingを強制的にかけて、パフォーマンスを下げる。結果、非常に重い。
* 故に、電源接続時は、100(min)/100(max)とかに設定し、バッテリーでも、85(min)/100(max)とかに設定しておかないと、遅くてたまらない。
* Windows 8.1でもそうだっが、Windows 10ではよりひどい印象


# 圧縮スワップの停止

PowerShellから

```
Disable-MMAgent -mc
```
して再起動

しかし、うまく行かないようなので、以下で解決

マイコンピューター→管理→サービス→SuperFetchを無効へ

# Cortanaの停止

1. 検索ボックスに「regedit」と入力してエンターを押す
2. ```HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Windows\Windows Search``` に移動
3. Windows Searchという名前のキーを右クリックしDWORD(32bit)値を追加
4. AllowCortanaという名前にする
5. ダブルクリックして値を0に設定する

加えて、マイコンピューター→管理→サービス→Windows Indexサービスを無効へ


# 「あ」「A」の根治

cmd.exeを管理者権限で起動し、

```
C:\Windows\system32>REG ADD HKU\.DEFAULT\Software\Microsoft\IME\15.0\IMEJP\MSIME /v ShowImeModeNotification /t REG_DWORD /d 0 /f
```

上は、REG...から末尾までを一行でコピー＆ペーストして実行(RETURN)すること

# WinSATの無効化

マイコンピューター→管理→システムツール→タスクスケジューラライブラリ→Microsoft→Windows→Maintenanceにある "WinSAT" を削除!

無効化のほうがよいかも...

# Storeの更新の停止

左下(start)からMicrosoft Storeをタイプして起動し、右上の設定のところから
全部offへ
VirtualBox の shared folder へのアクセス

memo.

```
$ cd /media
$ ls -la
..snip..
drwxrwx---   1 root vboxsf 4096 sf_xxxxx
..snip..
```

となっているので、

```
$ sudo adduser your_username vboxsf
$ sudo reboot
```

このあと、

```
$ cd /media/sf_xxxxx
```
できるはず。
mysql tiny snippets

インフラ業務を担当していたときに調べづらかったコマンドを備忘録的に記載。

## カラムを単語で検索

```
mysql> select * from INFORMATION_SCHEMA.COLUMNS where column_name like '%last%' order by TABLE_NAME\G
```

## 直近Nヶ月内のような日時範囲検索

```
mysql> select * from member where last_active_time >= DATE_ADD(NOW(), INTERVAL -6 MONTH) order by last_active_time \G
```
HTML基本動作～忘れた時に使えるHow to1を分かりやすく～

#　URLの埋め込み方

`<a href="">★</a>`
を使います。

この★の部分に文字を入れるとリンク先についての情報を加えることができます。

#画像の埋め込み方
`<img src=".jpg">`

最後に大体.jpgとかがつきます。
自分のPCで拡張子がいつでも確認できるように設定をしておくことをオススメします。
拡張子の設定方法は、ドットインストールの開発環境設定に関する
初回の動画でMac,Windows問わず確認できるので今のうちにやっておきます。

#リストの作り方

親要素の種類として
`<ul>`と`<ol>`があります。
前者はunorderd list
後者はorderd listを意味します。

数字を付けたければolを、
黒点で良ければulを使います。

また、子要素は`<li></li>`で表現していきます。

親要素で子要素を挟むようにして書きます。

この際、子要素をTabキーを使ってずらして書いていくことを推奨します。
Cloud9インストール中の「Error: Cannot find module 'optimist'」の解決

# これは何？
[この記事](https://qiita.com/naniwaKun/items/b7b45a6e6ed33ce81eb9)を参考にしてローカル環境へのCloud9インストール中に表題のエラーが発生した際の解決法メモ。

# 発生したエラー
```
$ node server.js
/mnt/c/Users/user_name/c9sdk/node_modules/c9/setup_paths.js:34
        throw e;
        ^

Error: Cannot find module 'optimist'
    at Module._resolveFilename (module.js:547:15)
    at Function.modules._resolveFilename (/mnt/c/Users/user_name/c9sdk/node_modules/c9/setup_paths.js:27:16)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at main (/mnt/c/Users/user_name/c9sdk/server.js:74:20)
    at Object.<anonymous> (/mnt/c/Users/user_name/c9sdk/server.js:55:5)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
```
'optimist'がインストールされてないっぽい。

# 解決時の実行コマンド
```
$ npm install
```
[npm入門](https://qiita.com/maitake9116/items/7825d90c09f3e2f87dea)によると、「パッケージの復元」の復元らしい。

# 解決しました
```
$ node server.js
Starting standalone
Connect server listening at http://127.0.0.1:8181
CDN: version standalone initialized /mnt/c/Users/user_name/c9sdk/build
Started '/mnt/c/Users/user_name/c9sdk/configs/standalone' with config 'standalone'!
Cloud9 is up and running
```
WordPressのContact Form 7で必要無いページにはJSとスタイルシートをロードさせない

# はじめに　

*文中において、Contact Form 7 をCF7と略して記述しています。*


チョイネタです。:kissing_heart:
WordPressでサイト構築した人であれば、一度は目にしたことがあると思われる、メジャープラグインのContact Form 7。このプラグインを使うことで問い合わせフォームが簡単に作成できます。
しかし、このプラグインをインストールすると、すべてのページでCF7が使うCSSとJSがロードされてしまいます。あまり気にされない人はそれでもいいよというかもしれませんが、どうも納得がいかず調べてみました。

# 公式サイトでは
公式サイトのFAQでは、[必要な場合だけ JavaScript とスタイルシートをロードさせるには](https://contactform7.com/ja/loading-javascript-and-stylesheet-only-when-it-is-necessary/)という記述があります。下のフィルターです。

``` function.php
add_filter('wpcf7_load_css', '__return_false');
add_filter('wpcf7_load_js', '__return_false');
```

# reCAPTCHAをセットアップすると
公式サイトの方法を`function.php`に記述したところ、見事にロードされなくなります。しかし、CF7のreCAPTCHAをセットアップにした時のJSまでアンロードできません。

# ロードさせないようにするには
プラグインのコードをざっとみてもfilterが見当たりませんでした。そこで、`deregister`してしまおうってことでコードを用意しました。フォームを設置するページが複数あってもいいように配列で定義できるようにしました。

``` function.php
function cf7_deregister()
{
    // フォームを設置するURLの最後の文字列を定義しておく
    $_formURL = [ 'form', 'frontpage' ];
    if (is_front_page()) {
        //フロントページの時はfrontpageとする
        $_accessURL = 'frontpage';
    } else {
        $_accessURL = basename(get_permalink());
    }
    if (!( in_array($_accessURL, $_formURL))) {
        wp_deregister_style('contact-form-7');
        wp_deregister_script('jquery');
        // recaptchaをONにした場合
        wp_deregister_script('google-recaptcha');
    }
};
add_action('wp_enqueue_scripts', 'cf7_deregister', 20);
```

環境によっては条件判断を変更しないといけないかもしれません。上手くいかない時は、`get_the_ID()`でIDを取得しましょう。ただし、環境依存になるのでおすすめしません。

# 関連URL
- [Contact Form 7](https://contactform7.com/ja/)
- https://wordpress.org/plugins/contact-form-7/
【Twitter】取得できないリプライツイート問題

# 経緯
ちょっとしたTwitterアプリでも作ろうかなと試行錯誤していたところ、
**特定のツイートに対するすべてリプライを取得したいのに、なぜか取得できないツイートがあり**かなりハマったので自分のためにもここに残します。

【環境】
　・C#.Net
　・CoreTweet


# 問題
特定のツイートへのリプライを取得する方法に、これといったスマートな方法はないらしいです。
中でも多くHitしたのが以下のような方法。

```c#:Search.cs
  // 対象ツイートの取得
  var status = tokens.Statuses.Show(id => ************/*対象のツイートのID*/));
  // 対象ツイート以降に投稿されたツイート主へのリプライを取得
  var replies = tokens.Search.Tweets(q=>"to:"+ status.User.ScreenName, 
                                     count=>100, since_id=>status.Id );
  // リプライの中でも、宛先が対象のツイートとなっているもののみを取得
  var targetReplies = replies.Where(w => w.InReplyToStatusId == status.Id);
```

この方法では [Standard search API](https://developer.twitter.com/en/docs/tweets/search/api-reference/get-search-tweets.html) を利用してリプライを取得しています。
もっといい方法があれば教えてください。

そして、この方法では**なぜか取得できないツイートが発生**します。
これが掲題の**取得できないリプライツイート問題**です。


# 原因
結果としては、**取得できないツイートの主が、Twitter社から良質なアカウントと認定されていないから**ということでした。
[Twitter公式ブログ - Serving healthy conversation]
(https://blog.twitter.com/official/en_us/topics/product/2018/Serving_Healthy_Conversation.html)

開設して間も無かったり、大量に同じようなツイートとしていたり…理由は様々ですが、そういったアカウントのツイートは検索できないようになっているようです。
こちらが参考になりました。
[Twitterで自分のツイートが検索表示されなくなったらまずここへ！](https://it.sorayori.com/twitter_spam/)



# 解決策
~~**どうしろと。**
ほんとにスパムアカウントとかならいいんですが、そうじゃない人もいるのでとても困りますね…。
こういったフィルタを掛けるかかけないかを検索オプションで指定できたらいいのですが。
もっといい方法があれば教えてください。（二回目）~~
デフォルトでONになっているセーフサーチを解除すれば解決するかも！
あとで調査します。
RTCM3とかを保存する

#後処理RTK
せっかくmy基地局を手に入れたら、リアルタイムRTKだけではなくて、後処理もしたくなりますよね？国土地理院の電子基準点データでもいいのだけれど、やっぱmy基地局使いたいじゃないですか。また、その他の評価のためにubxを保存したいとか。
そうなるとRTCM3とかを時間毎ぐらいのファイルサイズで保存しておく必要があります。

#そうだ、cronを使おう
折角なのでRaspberryPiで作ってみました。RTKLIBはインストール済みで、str2strは/home/pi/str2strに配置されてるものとします。

```bash
$ crontab -e
0 * * * * /home/pi/RTCM3.sh 
```

```"/home/pi/RTCM3.sh"

#!/bin/sh

timeout 3600s /home/pi/str2str -in serial://ttyACM0 -out file:///mnt/sda1/`date +%s`.rtcm3 > /home/pi/crontab-errors.log > /dev/null 2>&1
```

#ファイル名

```
`date +%s`
```
の部分は好みが分かれる所でしょうか。このままだとunixタイムとなります。
http://www.atmarkit.co.jp/flinux/rensai/linuxtips/240datefilename.html
box SDKでファイルをアップロードする（JWT編）

boxを使ったシステム構築で少しつまづいたので、忘備録も兼ねて投稿。

まずは、アプリケーションの作成。
以下の開発コンソール(※)から行う。
(※) app.box.com/developers/console/

認証方式は`OAuth2`と`OAuth2 with JWT`から選べる。
今回は後者を選択した。両者の説明、選択基準は公式サイトに分かりやすく纏まっている。
https://developer.box.com/docs/authentication-types-and-security

公開鍵は、手持ちのものをアップロードもできるが、今回は開発コンソールから作成した。

上記作業で、開発コンソールでの基本操作は完了。
設定ファイルを一番下にあるボタンからDLしておく（後述のサンプルで使用）。

ここで、
★つまづきポイント１
開発コンソール以外にも、管理コンソール(※)での操作も必要になる。
(※)https://app.box.com/master

自身のアカウントに権限がなければここでの操作はできないので、管理者に依頼する。
左側ペインの、「Enterprise Setting」の「Apps」タブで、上記で作成したアプリケーションを認証済みカスタムアプリケーションとして登録する。
https://app.box.com/master/settings/openbox

この登録をしておかないと、叩くAPIによって実行時エラーになる。

以上で、box側での設定は完了。

あとは、呼び出し側の作業となる。
boxアプリケーションの操作に、今回はpythonのSDKを使うことにした。
まずは、SDKのインストール。
pipで簡単に行えるが、ここで、

★つまづきポイント２
JWT形式にする場合は、`[jwt]`が必要になる。
一見、なくても動くように見えるが、認証以降の操作で実行次エラーになる。
ドキュメントをよく読むとわかるのだが、見落しがちと思う。
（実際、同様のところでつまずいていると思われる人々の投稿がいくつか見つかった。）

```
$ pip install boxsdk[jwt] -t .
```

アプリケーションのトップフォルダーの下に、「hogefuga」というフォルダを作るサンプルコード。
サンプルでは、コンソールでDLした設定ファイルを、「config.json」にリネームして使っている。

```py
from boxsdk import JWTAuth
from boxsdk import Client


auth = JWTAuth.from_settings_file('./config.json')
client = Client(auth)

root_folder = client.folder(folder_id='0')

base_dir = root_folder.create_subfolder('hogefuga')
print('base_dir: {0} {1} is named "{2}"'.format(base_dir.type.capitalize(), base_dir.id, base_dir.name))
```

つまづきポイントは両方とも、叩くAPIによって発生するのが厄介。。。
どちらも根本的なところなので、もう少し分かりやすくアウトプットして欲しかった。

box SDKは日本語情報も少ないので、誰かのお役に立てばこれ幸い。
[React]Storybook導入までの手順

## 概要

- ReactアプリでStorybookの環境を作るまでのメモ

## 手順

### アプリの雛形生成

- ここでは`create-react-app`を使う

```zsh
npx create-react-app react-storybook-sample
cd react-storybook-sample
```

### Storybookのインストール

- `sb init`するとpackage.jsonの中を見て自動でReactアプリだと判定してくれる

```zsh
npx -p @storybook/cli sb init
```

### addonの追加

- 趣味の範囲であるがここではknobsとinfoを入れる

```zsh
yarn add -D @storybook/addon-info @storybook/addon-knobs
```

### 設定ファイルの修正

- addの設定を追加

```js:.storybook/addons.js
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
import '@storybook/addon-knobs/register'; // <- これを追加
```

- configの修正

```js:.storybook/config.js
import { addDecorator, configure } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
import { withInfo } from '@storybook/addon-info';

addDecorator(withKnobs);
addDecorator(withInfo);

// src/components配下のxxx.stories.jsというファイルを対象とする
const req = require.context('../src/components/', true, /stories.js$/);

function loadStories() {
  req.keys().forEach(req);
}

configure(loadStories, module);
```

## 動作確認

### サンプルコンポーネントの作成

- 自動生成されたstoryを消す

```zsh
rm -rf src/stories
```

- コンポーネント作成

```zsh
mkdir -p src/components/Button
touch src/components/Button/index.js src/components/Button/index.stories.js
```

- コンポーネント本体

```js:src/components/Button/index.js
import React from 'react';
import propTypes from 'prop-types';

function Button({ text, onClick }) {
  return (
    <button onClick={onClick} type="button">
      {text}
    </button>
  );
}

Button.propTypes = {
  text: propTypes.string.isRequired,
  onClick: propTypes.func,
};

Button.defaultProps = {
  onClick: null,
};

export default Button;
```

- Storyの作成

```js:src/components/Button/index.stories.js
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { text } from '@storybook/addon-knobs';
import Button from '.';

const stories = storiesOf('Button', module);

stories.add('ボタンコンポーネント', () => (
  <Button text={text('ラベル', 'Click Me')} onClick={action('Click!')} />
));
```

### Storybookの起動

- 以下のコマンドでstorybookを起動

```zsh
yarn storybook
# open http://localhost:9009
```

### デモ

![demo.gif](https://qiita-image-store.s3.amazonaws.com/0/175213/44bf2eee-93ef-81a6-8bea-7eb5dc721376.gif)