OmniAICreator/Qiita-1.07M huggingface dataset:
React Native で Android のエミュレータを更新

iOS のシミュレーターは、 `⌘ - R` で更新できるが、 Android はできない。

が、 `R, R` （ `R` を素早く2回押す）ことで、更新できる。隠しコマンドである。

https://stackoverflow.com/questions/38039736/how-to-reload-in-the-default-android-emulator-for-react-native-app
ポートフォリオサイト（練習用）を作ってみる　１

### 現在の状況
Progate
html&CSS講座一周目終了
JavaScript講座一周目終了

### ポートフォリオサイトを作る理由
学んできたことをアウトプットするため

### 作成のために用意したもの
PC（OS:Linux）

書籍
[1冊ですべて身につくHTML & CSSとWebデザイン入門講座](https://www.amazon.co.jp/1%E5%86%8A%E3%81%A7%E3%81%99%E3%81%B9%E3%81%A6%E8%BA%AB%E3%81%AB%E3%81%A4%E3%81%8FHTML-CSS%E3%81%A8Web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%85%A5%E9%96%80%E8%AC%9B%E5%BA%A7-Mana/dp/4797398892)

デザインカンプソフト
探索中....
候補：Figma

無料写真素材

### ワイヤーフレーム
手書きでノートに作成

少しでも進んだら、Qiitaに記録をしていく
新人プログラマが入っておくといいSlack/Discordサーバー


はじめまして！筆者はプログラミングを始めて2年半ほど経つのですが、プログラミングで強くなるのに必要なことは

- 強いプログラマの近くにいる
- できるだけ長い時間プログラミングに関することをする

だと思っています。ですが、筆者をはじめ周りに強い人がいない場合、どういった方向性に進んでいったら強くなれるのか、さっぱりわからないと思います。個人的には、まずは

- スクール的なサービスを利用して、自分に必要なことを伸ばす

のがいいと思っていますが、最近では

- Twitterなどで強いプログラマの言っていることを、ふんふんと読んで自分なりに考える 

のも良かったなと思っています。

そこで、強い人がたくさんいる場所を今回はまとめたいと思いました。私が現在、Pythonを使って機械学習をしているので、その方向によったサーバーが多いので、他にもこんなのがあるよ！というのも教えてほしいです！🤗
## [インフラ勉強会](https://wp.infra-workshop.tech/how-to-join-a-session/)

言わずと知れた日本最大規模のオンライン勉強会です！インフラを中心にしてIT技術に関する情報が集まっています。

[インフラ勉強会のご紹介](https://qiita.com/yutakakn/items/86a32f2a3798f31a5471)

## [python jp](https://www.python.jp/pages/pythonjp_discord.html)

> 日本のPythonコミュニティ

Pythonでできることや、やったことをわいわい話したりしています！

## [kaggler-ja](http://yutori-datascience.hatenablog.com/entry/2017/08/23/143146)
kaggleを中心として、機械学習に関する様々な知見や、質問が集まっています。



## [colab-jp](https://qiita.com/tomo_makes/items/b3c60b10f7b25a0a5935)
Google Colaboratoryの使い方や知見などがまとまっています。

## [chainer 公式](http://anythingcanhappen.hatenablog.com/entry/2016/03/20/190656)

- 日本語　https://bit.ly/chainer-jp-slack
- English https://bit.ly/chainer-slack

chainerの公式slackです。

> 具体的には決めていないですが、以下のことをやりたいなーと思っています。
> >- Chainerのdocumentの翻訳
- Meetup等のイベントの開催
- Sampleや事例のまとめサイト作成

## [mohikan Slack](https://qiita.com/kotakanbe@github/items/32cf4eb3de1741af26fb)

> - コンピュータ系の情報収集用のSlack公開グループ（モヒカンSlack）を作ってみたよ。
- 皆さんで協力して育てていく共同RSSリーダーみたいなものだよ。
- このSlackグループの情報を追っていればオッケーなので、情報取集が格段に楽になったよ。

## おわりに
みなさんの情報源を知りたい！と思っているので、どしどしコメントしてください！🤗
「head要素」と「body要素」

## HTMLには大きく分けて「head要素」と「body要素」の２つの要素があります。

HTML文書は「head要素」と「body要素」で構成されています:relaxed:
２つの大きな違いは情報が視覚化されるかどうかです。


~~~HTML
<head>訪問者には直接見えないタグを入れます</head>

<body>訪問者に見える部分を書きます</body>
~~~


###   <u>WEBページの基本情報が記述される「head要素」</u>

head要素に入るのはコンピューターが読み取る情報なので、わたしたちはhead内に書かれるコードの情報は調べない限り見えることはありません。headタグ内には主にmetaタグとlinkタグを入れます。

ただし、1つだけ視覚化される「title（タイトル）要素」があります。
webブラウザのタイトルバーやタブ部分に表示されるページタイトルのことです。 

~~~HTML
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Vogue(ヴォーグ)は大阪市にある配膳・コンパニオン派遣会社です。大阪のノリと明るさで皆さまの宴席を盛り上げます！">
  <title>Vogue|配膳・コンパニオン派遣スタッフ</title>
  <link rel="stylesheet" href="style.css">
</head>
~~~



### <u>webページのコンテンツが記述される「body要素」</u>

body要素の中に書かれるコードはwebブラウザ内に表示されます。
コンテンツは全てbody要素の中に記述します。
見出しを表わすh1~h6の要素・段落を表すp要素、リストを表すul要素・ol要素・dl要素などがありますが、これらはbody要素の中にしか記述できません。

#### <u>「子要素」とは？</u>

開始タグから終了タグまでの一連の要素は入れ子にして記述します。
ある要素がある要素を含み、さらにその要素が別の要素を含む、というように階層的な構造で表します。
自身の要素からみてすぐ内側の要素が「子要素」となります。
なので、HTMLの子要素は「head要素」と「body要素」です。HTMLでは何重にも要素が入れ子となります。
IPとIPアドレスについて

# IPとIPアドレスについて解説していきます。

*IP=インターネット プロトコルの略です。


IPアドレスとは、IPプロトコルがデータを送る先のコンピュータや機器を特定するためのもので、よく住所と例えられますね。

###IPアドレスの管理団体とIPv4/IPv6

[ICANN](https://www.nic.ad.jp/ja/basics/terms/icann.html)という団体が管理しており、この団体が必要に応じて配下の団体(地域や国、プロバイダ)に、IPアドレスを配布します。


主に使用されているPIアドレスは、IPv4と、IPv6の2種類があり、IPアドレスの書式が異なります。

ICANNが所有するIPv4は2011年2月3日に枯渇してしまいました。。。
IPv4は32bit(2^32の42億個)、IPv6は128bit(2^128の340澗個)となっており、新しくIPアドレスを使用する場合はIPv6形式のIPアドレスを使用することになりそうですね。


###IPアドレスの構成

一つのIPアドレスは、「ネットワークアドレス」と「ホストアドレス」の部分で分かれています。
ネットワークアドレスは、LANなどのひとつのネットワークに対して付与され、ホストアドレスはそのネットワークに属するコンピュータなどの機器に対して付与されます。

**176.16.1.1**
というIPアドレスがあった場合、

**176.16** がネットワーク部(ネットワークアドレス)

**1.1** がホスト部(ホストアドレス)です。


#####グローバルIPアドレスとプライベートIPアドレス

「プライベートIPアドレス」はLANに接続されているコンピュータや機器に対して付与される特殊なIPアドレスです。
インターネットなどでは、使用されません。また、ひとつのLANで同じプライベートIPアドレスが使用されることはありませんが、　別のLAN内では同じIPアドレスが使用されることもあります。

「グローバルIPアドレス」はインターネットで使用されているIPアドレスです。
上記のICANNが管理しているIPアドレスはグローバルIPアドレスのことを指しています。

日本ではICANNから付与されたIPアドレスを、JPNICとうい団体が管理しているみたいですね。


※参照
http://www.picfun.com/lan06a.html
「Rによる機械学習」の勉強履歴（1）

# Rによる機械学習
（ソフトウェア品質技術者のための）データ分析勉強会で、書籍『Rによる機械学習 （Machine Learning with R）』を使用して機械学習を学ぶ。
https://www.amazon.co.jp/dp/4798145114/
名古屋工業大学の知能情報システム学科にいたとき、以下の論文執筆に関わったいたことを思い出した。
 - サッカー・エージェントの行動体系化と帰納学習の応用
 - 自律エージェントの反復帰納学習におけるルール削除の一手法

# インストール
RとRtoolsとRStudioをインストール。
https://k-metrics.github.io/cabinet/env_overall.html

パッケージはRのメニュー「パッケージのインストール」では、ダイアログが表示されずインストールできなかったので、コマンド `install.packages("Rcmdr")` でインストール。

R-3.6.0 for Windows はいろいろ問題あるらしい。パッチもインストール。
https://cran.r-project.org/bin/windows/base/rpatched.html

RWekaとは、Wekaを呼び出す機能をもったパッケージ。
Wekaは、javaベースで作られている。機械学習に関連するAPI？をもっている。

RWekaのロードに失敗してしまった。

     > library(RWeka)
      エラー: package or namespace load failed for ‘RWeka’:
      .onLoad は loadNamespace()（'rJava' に対する）の中で失敗しました、詳細は: 
       call: fun(libname, pkgname) 
       error: JAVA_HOME cannot be determined from the Registry 
パッケージrJavaとjavaをインストールしたらエラー解消・・・。

# 第1章	機械学習入門
抽象化と汎化を区別しているのが理解できていない。
「汎化は、将来のアクションで使えるように、理論の集合を少数の扱いやすい発見にまとめる。」というような説明があるが、これが理解できない。
過剰適合（=過学習）とは、過去データにぴったり当てはまる式を作っても、新たな実データが来たら式から大きく外れてしまうような状態か？
ステップワイズ法は汎化をしているということか？


# 第2章　データの管理と把握
RStudioのConsolでの入力は非常に楽。

Rにおける配列は、多次元の行列のこと。

RもExcelも不変分散。
https://stats.biopapyrus.jp/stats/var.html

Rの詳しい説明は以下にある。@sampoさんが、まとめてくれている。
https://k-metrics.bitbucket.io/mlwr_c02.html
39日目、Railsのデータベースが超絶簡単でびっくりしました！

39日目の今日はProgateのRailsその２。データベースの作り方でした。
コマンド１つで作れるのにびっくりしました！

###復習
Ruby on RailsⅠ(11分)

###データベースは自動生成！
SQLとかいらないんですね。便利！

idカラム・・・自動で番号がどんどん入る
created_atカラム・・・データを作った日時
updated_atカラム・・・データを変更した日時

※なんでデータの事をカラムと言うんだろう？

データの作り方

```
rails console
＜コンソールが起動する＞
post = Post.new(content: "Rails勉強中！")
post.save
```

→データベースにレコードが追加されている！

###データの取得
find_byメソッドを使う

```
post = Post.find_by(id: 3)
post.content
post.created_at
```

Post表のid=3のレコードをいったん変数postに入れて
表.列でデータを表示するみたいです。

###通し番号のページを自動生成する
番号を`:id`で置き換えると、ページが自動生成される。


```.../config/routes.rb
Rails.application.routes.draw do
  get "posts/index" => "posts#index"
  # ここに投稿詳細ページへのルーティングを追加してください
  get "localhost:3000/posts/:id" => "posts#show"
  
  get "/" => "home#top"
  get "about" => "home#about"
end
```

忘れずにビューとコントローラーも作る

```.../controllers/posts_controller.rb
class PostsController < ApplicationController
  def index
    @posts = Post.all
  end
  
  # showアクションを追加してください
  def show
  end
end

```


```show.html.erb
<div class="main posts-show">
  <div class="container">
    <div class="posts-show-item">
      <p>投稿詳細画面です</p>
    </div>
  </div>
</div>
```

###paramsで「:id」の値を取得する
```
@def show
    # 変数paramsから「:id」の値を取得し、変数@idに代入してください
    @id = params[:id]
end
```

###詳細ページを作る
showアクションで変数@postを定義し、idカラムの値がparams[:id]と等しい投稿をデータベースから取得して代入します。

@post = Post.find_by(id: params[:id])

###リンクを作る

link_to(リンクテキスト, リンク先URL)
link_to(post.content, "/posts/#{post.id}")

#完成！
（所要時間45分）
みんなの経済新聞のニュース収集slackをつくった

#はじめに
みんなの経済新聞記者のみなさまへ

みんなの経済新聞ってどう書けばいいか困りますよね…(´・ω・｀)
そこで参考となる類似記事を探しやすくするため、ニュース収集用のslackを作成しました。



#参加方法

①以下のリンクにアクセスしてください
https://join.slack.com/t/minnanokeizai/shared_invite/enQtNjM0NTI4Njc0NTY3LTcyZWE3OGMwNGQ4NTMxNzBiYThkZTE0NGE2NmIwZTI5NzRlYmEwYzM4YmQ5NGY4NWViYTM0M2Y1NjUwMWMyYzc

②この画面に遷移するので、メールアドレスを入力してください


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172695/53208cfa-3730-28c7-673c-aa12834641cd.png)

③こんな画面になったら、slackからメールが届いています。メール文中のリンクにアクセスしてください。 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172695/ff55b2f2-5ed3-4b62-b5db-c2dada850902.png)

④するとチャットに参加できます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172695/de5523ca-6e28-9d37-127d-a1ed662eb997.png)


#特徴、注意点

- 全経済新聞に最初から入っています。もし興味ないものがあれば抜けてください。方法は[こちらをクリック](https://get.slack.help/hc/ja/articles/201375146-%E3%83%81%E3%83%A3%E3%83%B3%E3%83%8D%E3%83%AB%E3%82%92%E6%8A%9C%E3%81%91%E3%82%8B)
- 通知がポンポンくるので、以下の通知回避方法を選択してください


###通知回避方法
①以下をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172695/0b242d33-b0c7-9dcd-d39e-a40a1b6d21cc.png)

②カスタムを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172695/a5a9aa9e-d092-631d-405c-fe7c553e12a7.png)

③最大限引き伸ばし
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172695/59599277-2a1b-5d7b-1a19-23f4e87a76b8.png)


#検索方法
①画面右上の検索のところに、検索したい言葉を入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172695/9abec387-9433-8c31-2fd9-6a9e2d4ee897.png)

②こんな風に検索結果が出ます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172695/14414b52-588e-3793-00e6-e5063b43b514.png)
MAXIMOのLaunch in ContextにCognosのレポートURLを埋め込んだ際の注意点


##はじめに
**Launch in Contextに埋め込むCognosのレポートURLはゲートウェイ経由のURLではなく、ディスパッチャーのURLで指定する必要がある**

Launch in Contextの本来の使い方ではないのですが、URLを埋め込めるという点からCognosのレポートURLを埋め込み、レポート実行をさせることは技術として可能です。
製品はサポートしない使い方のはずなので自己責任で使用をお願いします。

##注意点
本来レポートのプロパティから取得できるレポート呼び出し用URLは、Cognos ConfigurationのGateway URIで設定したゲートウェイ経由のURLになっています。

```URL:ゲートウェイ経由のURL
http://<hostname>/ServletGateway/servlet/Gateway&b_action･･･
```

このURLをそのままLaunch in Contextに埋め込むと、レポート呼出した際、初回は必ずCognosのエラー画面が返されてしまうことになります。
その後、複数回実行したり別タブでCognosへのセッションを確立するとエラーになっていたレポート呼出も問題なく実行されるようにはなるのですが。

##回避策
URLをDispatcher URIs for gatewayで設定している値に変更することで、このエラーを回避することができます。


```URL:ディスパチャーを指定したURL
http://<hostname>/p2pd/servlet/dispatch/ext&b_action･･･
```

あくまで回避策であり正式な設定内容ではないので、使用する際はよく検証・テストを実施して採用ください。

##事象に遭遇した環境情報
今回の事象に遭遇した環境の情報です。

- WAS上で稼動するCognos BI 10.2.1 と MAXIMO 7.6が存在
- OSはLinux
- Cognosの認証はMAXIMOが提供するMXCSPではなく、ADサーバに対するLDAP認証を構成
- Client-AD-MAXIMO-Cognos間でSPNEGOを利用したSSOを実装



MXSCPを使用した環境ではどうなるのか知見をお持ちの方がいらしたら是非共有いただければと思います。


以上、Qiitaでは珍しいMAXIMO関連の記事でした。
buefy関連のメモ

# buefy
開発にあたって`buefy`を使って画面を構築していくことにしたため
画面の構築や必要なものなどメモしていく


# buefyでscssを扱えるようにする
sassをインストールする

```shell
npm i -D sass-loader node-sass
```

# 基本設定のカスタマイズ

```client/assets/scss/style.scss
// Import Bulma's core
@import "~bulma/sass/utilities/_all";

// Set your colors
$primary: #23748B;
$primary-invert: findColorInvert($primary);
$twitter: #4099FF;
$twitter-invert: findColorInvert($twitter);

// Setup $colors to use as bulma classes (e.g. 'is-twitter')
$colors: (
  "white": ($white, $black),
  "black": ($black, $white),
  "light": ($light, $light-invert),
  "dark": ($dark, $dark-invert),
  "primary": ($primary, $primary-invert),
  "info": ($info, $info-invert),
  "success": ($success, $success-invert),
  "warning": ($warning, $warning-invert),
  "danger": ($danger, $danger-invert),
  "twitter": ($twitter, $twitter-invert)
);

// Links
$link: $primary;
$link-invert: $primary-invert;
$link-focus-border: $primary;

// Import Bulma and Buefy styles
@import "~bulma";
@import "~buefy/src/scss/buefy";

```

scssを読み込めるように定義する

```nuxt.config.js

/*
 ** Global CSS
 */
css: [
  '@/assets/scss/style.scss', // buefyのベース定義のファイルを読み込む
],

/*
 ** Nuxt.js modules
 */
modules: [
  // Doc: https://axios.nuxtjs.org/usage
  "@nuxtjs/axios",

  // github: https://github.com/chimurai/http-proxy-middleware
  "@nuxtjs/proxy",

  // Doc: https://buefy.github.io/#/documentation
  ['nuxt-buefy', { css: false, materialDesignIcons: false }],
],

```

# FontAwesomeをインストール

```
npm install @fortawesome/fontawesome-free-webfonts
```


```nuxt.config.js
css: [
  '@/assets/scss/style.scss', // buefyのベース定義のファイルを読み込む
  '@fortawesome/fontawesome-free-webfonts',
  '@fortawesome/fontawesome-free-webfonts/css/fa-brands.css',
  '@fortawesome/fontawesome-free-webfonts/css/fa-regular.css',
  '@fortawesome/fontawesome-free-webfonts/css/fa-solid.css',
],
```

# 実際に触ってみて
業務システムや管理系画面デザインに要求がない場合などはCSSフレームワークは良さそう
色などの変更レベルではいいけど、デザインなどの変え方が複雑っぽいので
グリッドシステムなどのレイアウト定義や使えそうな部品を採用するって感じが良さそうかも
Go言語でgoqueryとChromeDriver(Headless)を使ってスクレイピング

##概要
Go言語でHeadlessChromeを使ってスクレイピングすることを目的にします。
Go言語でスクレイピングとなると、goqueryが有名ですが、もちろんgoqueryだけでも可能です。
では、なぜChromeDriverを使うのかというと、javascriptを利用した動的ページの取得をするためです。
たとえば、curlコマンドでQiitaのトップページを取得したソースと、実際にブラウザで確認したソースを見てみると結果が違う。

そのため、この記事では、動的ページのスクレイピングをする方法を記述します。

##実行環境
CentOS Linux release 7.6.1810 (Core)

##スクレイピング

####ライブラリ
今回利用するライブラリは以下の2つです。go getコマンドで取得してください。

- ChromeDriver
 - github.com/sclevine/agouti

- goquery
 - github.com/PuerkitoBio/goquery

####ソース

まずドライバーの設定です。
"--headless"オプションを付与し、ヘッドレスモードで利用します。

```
   driver := agouti.ChromeDriver(
      agouti.ChromeOptions("args", []string{
         "--headless",
         "--window-size=1280,800",
      }),
      agouti.Debug,
   )
```

次はドライバの起動から対象URLの設定までになります。
page.Navigateに取得したいページのURLを設定します。

```
   if err := driver.Start(); err != nil {
      log.Fatal(err)
   }
   defer driver.Stop()
   page, err := driver.NewPage()
   if err != nil {
      log.Fatal(err)
   }

   // URL Setting
   page.Navigate(" 取得したいURL ")
```

次はいよいよHTML取得です。

```
getSource, err := page.HTML()
```
これですでにString型のDOMが取得できているのでparserなどで自力で必要な部分を取得してもよいのですが、jqueryのようにセレクタを利用して楽に対象箇所を取得できるようにgoqueryを使います。
先ほど取得した"getSource"にStringのDOMが入っているので、StringからReaderに変換し、goqueryで読み込める型にします。

```
   r := strings.NewReader(getSource)
   doc, err := goquery.NewDocumentFromReader(r)
```

あとは doc.Find で取得したい箇所のタグやクラスを書いていくだけです。
以下は例ですが対象のアンカータグのテキストとリンクの取得です。このように書きます。（もちろん中身は対象ページに合わせてください）

```
   doc.Find("div.classname > div > div > a.item").Each(func(i int, s *\
  goquery.Selection){
     title := s.Text()
     url, exists := s.Attr("href")
     if exists == true{
       fmt.Printf("Title: %s\n", title)
       fmt.Printf("URL: %s\n", url)
     }
   })
```

##終わりに
スクレイピングは相手のサイトにも負荷をかける可能性があるので、適度にアクセス数を気にするようにしてください。
意外とクローリングを禁止にしているサイトもあるので、使う場合は気をつけましょう。
Atom+Hydrogenの設定方法

# AtomにHydrogenを設定する方法をまとめる

　まずAtomをインストール
　次にAtomのパッケージにHydrogenをインストール
　https://atom.io/packages/hydrogen
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247538/0fc468eb-a13f-29bb-7ed7-928c88129c21.png)

　パッケージのSettingからHydrogenの設定画面に移動し、「Kernel Gateways」の下の欄にjupyterの設定を入れる。
　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247538/b55f53a4-6f93-240a-cf3a-972f930426b6.png)
　
　よくあるのは「jupyter kernelspec list --json」を実行した結果で返されるJsonを張り付けること。

　私の場合はremoteでの接続の方が楽なので

```aaa.bat
[{
  "name": "Remote server",
  "options": {
    "baseUrl": "http://localhost:8888/",
    "token": "my_secret_token"
  }
}]

```

　あとはこんな感じ
https://qiita.com/dimorportheca47/items/053c98ed47637c995de1

# 右側に出力を表示したい場合は「Toggle Output Area」
　`Ctrl+Shift+p`
　`Hydrogen: Toggle Output Area`
　 下記を参照
　https://ensekitt.hatenablog.com/entry/2018/05/24/200000
ReactNativeのAsyncStorageインストール方法とエラー対応：`React/RCTBridgeModule.h` file not found

#AsyncStorageについて
[[React Native] データ永続化についてAsyncStorageとRealmを調べてみた](https://qiita.com/ariiyu/items/0eeb96888c76512cb703)
>AsyncStorageは、シンプルな、暗号化されていない、非同期の、永続的な、key-valueストアです。

[ReactNative - AsyncStorage](https://facebook.github.io/react-native/docs/asyncstorage)
>On iOS, AsyncStorage is backed by native code that stores small values in a serialized dictionary and larger values in separate files. On Android, AsyncStorage will use either RocksDB or SQLite based on what is available.

iOSでは、ネイティブのコードで書かれており、比較的小さな値は連想配列に、大きな値はファイルに保存している。
Androidでは、RocksDBとSQLiteのどちらか使用可能な方を利用してデータベースに保存している。


#AsyncStorageのインストール
####1. npmで管理している場合、npmでライブラリのインストールをする
（yarnを利用している人は別途調べてください。）

```zsh
npm i --save @react-native-community/async-storage
```

####2. 上述しているようにネイティブコードを利用しているので、リンクする

```zsh
react-native link @react-native-community/async-storage
```
####3. podでiOSのライブラリの依存関係を管理している場合、依存関係を解決する

```zsh
# /iosフォルダに移動して
pod install
```

####4. ビルドする

```zsh
# ルートフォルダに戻り
react-native run-ios
```

####5. エラーが発生する

```zsh
error Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65. To debug build logs further, consider building your app with Xcode.app, by opening sync.xcworkspace
```

#エラー対応：`React/RCTBridgeModule.h` file not found
##成功したエラー対応（手動でリンクする場合）
参考にした公式リファレンス
[React Native - Linking Libraries](https://facebook.github.io/react-native/docs/linking-libraries-ios.html)

ライブラリがネイティブコードを使用している場合、リンクを行う必要があるので、リンクを手動で行います。

```
/node_modules/@react-native-community/async-storage/ios/RNCAsyncStorage.xcodeproj
```
をXcodeのプロジェクトナビゲーターのLibrariesへドラッグアンドドロップします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132961/0a95840e-4776-eb88-27b4-c9bead41c126.png)

ドラッグアンドドロップしたRNCAsyncStorage.xcodeprojの中のProductsの中のlibRNCAsyncStorage.aをプロジェクトのBuild PhasesのLink Binary With Librariesへドラッグアンドドロップします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132961/4d2dfcdd-8809-5c04-7cb6-0f74c946ef61.png)


##失敗したエラー対応（CocoaPodsを使用してリンクする場合）
XCodeとCocoaPodsについて正しく理解できていないので、下記の方法ではうまくいきませんでしたが、一応載せておきます。

参考にしたスタックオーバーフロー
https://stackoverflow.com/questions/41663002/react-rctbridgemodule-h-file-not-found

###1. サーチパスへの追加
**私の場合この設定を行うことでビルドがエラーが消えました。**
1. プロジェクトのBuild Settings -> Header Search Paths
2. 「$(SRCROOT)/../node_modules/react-native/React」をRecursiveで追加する

###2. Parallelize Build（依存性の無いソースを並列にビルド）のオフ
**私の場合この設定は元から設定されてたので特に何もしていませんが、Goodが多いため載せています。**

1. Xcodeメニュー -> Product -> Scheme -> Manage Shemes...
2. プロジェクトと同じ名前のSchemeをダブルクリック
3. Build -> Parallelize Buildをオフにする

###追記
公式のリファレンスがありましたので、これを参考にすると良いかもですね。
https://github.com/react-native-community/react-native-async-storage/blob/master/docs/Linking.md

#まとめ
CocoaPodsを使わずに手動でリンクするほうが良いのかな？と思いました。
scratch.vim を試す

## はじめに

Vim を使って作業をしていると、一時的にメモをとっておけるようなスクラッチな領域があると便利だなと思っていました。そこで見つけたのが [mtth/scratch.vim](https://github.com/mtth/scratch.vim) というプラグインです。

## scratch.vim とは

[mtth/scratch.vim](https://github.com/mtth/scratch.vim) とは、Vim のバッファを使って一時的なスクラッチ領域を作成できるプラグインです。


## 利用方法

### インストール

まずプラグインをインストールします。

```vim
call dein#add('mtth/scratch.vim')
```

### 利用方法

Vim 上で `:Scratch` とコマンドを実行すると、エディタ上部にスクラッチ領域が表示されます。

ここに備忘メモなどを残しておくことができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222030/10834134-30c9-49a6-28fd-441ba8fee9a7.png)

## カスタマイズ

カスタマイズ方法は、`:help Scratch` コマンドを実行すると様々な方法が載っています。最低限僕が設定したのは以下です。

```vim

" マークダウンのシンタックスハイライトが適用されるように
let g:scratch_filetype = 'markdown'

" スクラッチ領域の高さを調整
let g:scratch_height = 10

" 自動でバッファが閉じないように
let g:scratch_autohide = 0
```

## 終わりに

スクラッチ領域は、手を動かしている途中でメモやアイデアを残しておけるのに便利だなと思いました。少しずつ使っていきたいと思います。
ECSのDockerコンテナにコマンド実行メモ

```bash
# クラスタ名からEC2インスタンスIDを取得
CLS=sample-cluster
instanceID=$(aws ecs describe-container-instances --cluster $CLS --container-instances "$(aws ecs list-container-instances --cluster $CLS --query containerInstanceArns)" --query "containerInstances[].ec2InstanceId" --output text)

# インスタンスIDからパブリックIP取得
publicIp=$(aws ec2 describe-instances --instance-ids $instanceID --query "Reservations[].Instances[].NetworkInterfaces[].PrivateIpAddresses[].Association.PublicIp" --output text)

# ECSのコンテナに対してdocker exec経由でコマンドを実行
ssh ec2-user@$publicIp docker exec \$\(docker ps --filter ancestor=999999999999.dkr.ecr.ap-northeast-1.amazonaws.com/sample:latest --format "{{.ID}}"\) ls
```
Amazon ECS のコンテナ最新化 


タスク定義でlatestのDockerイメージを取得している場合、タスクを停止することで簡単にコンテナの最新化ができるので
単純な１タスク動作時のコマンドメモ

```bash
aws ecs stop-task --cluster sample-cluster --task $(aws ecs list-tasks --cluster sample-cluster --query "taskArns" --output text)
```
Docker for Windowsで未使用ポート（DB2デフォルトポート50000）が使えない

丸一日ハマったので記録に残しておきます。(2019/5/11現在)
DB2コンテナを使いたかっただけなんです。 https://hub.docker.com/r/ibmcom/db2express-c
サイトに記載のある初期コマンドを打鍵すると。

```
>docker run -it -p 50000:50000 -e DB2INST1_PASSWORD=db2inst1-pwd -e LICENSE=accept ibmcom/db2express-c:latest bash
docker: Error response from daemon: driver failed programming external connectivity on endpoint gifted_galileo (a33121d9f04b58b0884794b75536a601576bbe329bfa6229bd7f9336c3f06a28): Error starting userland proxy: Bind for 0.0.0.0:50000: unexpected error Permission denied.
```

Permission deniedだと言われる。（ポートを8080とかにすると使える）
netstat等を使って調べても明らかに50000ポートは使ってない。

色々ググって結論はコレ。の末尾。
https://stackoverflow.com/questions/54181219/windows-cant-bind-to-port-above-49690
>It turned out the real problem was Docker.

真の問題はDockerだと。

除外ポートを追加しろとの事なので私は下記の通り設定＆確認。（管理者権限のコマンドプロンプトで実施）

```
>netsh int ip add excludedportrange protocol=tcp startport=50000 numberofports=10
OK 
>netsh int ip show excludedportrange protocol=tcp
プロトコル tcp ポート除外範囲
開始ポート    終了ポート
----------    --------
      5357        5357
     50000       50009     *
     50570       50669
     50670       50769
     50770       50869
     50970       51069
     51070       51169
     51202       51301
     51563       51662
* - 管理されている除外ポート。
```
「プロセスはファイルにアクセスできません。別のプロセスが使用中です。」と出るときは再起動して実施。
設定後も念の為再起動。
無事起動できるようになりました♪

```
C:\Users\hide>docker run -it -p 50000:50000 -e DB2INST1_PASSWORD=db2inst1-pwd -e LICENSE=accept ibmcom/db2express-c:latest bash
Changing password for user db2inst1.
New password: BAD PASSWORD: The password contains the user name in some form
Retype new password: passwd: all authentication tokens updated successfully.
[root@6b4852df5790 /]#
```

49152より大きいポートで同様の事象に遭遇した場合は、使いたいポートを除外登録すれば良さそうです。
[php,python]for/foreachループする際の値渡し/参照渡しの違いについて

## 概要
pythonとphpにおける、オブジェクトをループする際の挙動の違いに関する忘備録です。
pythonのforの際に渡される変数は**参照渡し**で、phpのforeachは**値渡し**になります。

## 環境
python anaconda3-5.1.0
php 7.2.10

## 本文
二次元配列の各配列の末尾に値を追加するという処理を行って確認します。

#### pythonの挙動

```python
# -*- coding: utf-8 -*-
# 二次元配列
array = [
    [0, 1, 2, 3],
    [4, 5, 6, 7],
    [8, 9, 10, 11],
]

# 各配列に要素100を追加する
for row in array:
    row += [100]
    print(row)

print(array)

```

出力結果

```python
# for文の中で出力した結果
[0, 1, 2, 3, 100]
[4, 5, 6, 7, 100]
[8, 9, 10, 11, 100]

# for文の外で出力した結果
[[0, 1, 2, 3, 100], [4, 5, 6, 7, 100], [8, 9, 10, 11, 100]]
```

for文の中と外で出力した結果が同じであることがわかります。
変数rowは、**参照渡し**で渡されていることが確認できました。

#### phpの挙動

```php
<?php
// 二次元配列
$array = array(
    array(0, 1, 2, 3),
    array(4, 5, 6, 7),
    array(8, 9, 10, 11),
);

// 各配列に要素100を追加する
foreach ($array as $l) {
    $l[] = 100;
    print_r($l);
}

print_r($array);
```

出力結果

```php
// for文の中で出力した結果
Array
(
    [0] => 0
    [1] => 1
    [2] => 2
    [3] => 3
    [4] => 100
)
Array
(
    [0] => 4
    [1] => 5
    [2] => 6
    [3] => 7
    [4] => 100
)
Array
(
    [0] => 8
    [1] => 9
    [2] => 10
    [3] => 11
    [4] => 100
)

// for文の外で出力した結果
Array
(
    [0] => Array
        (
            [0] => 0
            [1] => 1
            [2] => 2
            [3] => 3
        )

    [1] => Array
        (
            [0] => 4
            [1] => 5
            [2] => 6
            [3] => 7
        )

    [2] => Array
        (
            [0] => 8
            [1] => 9
            [2] => 10
            [3] => 11
        )

)
```

foreach文の中と外で結果が違うことがわかります。
変数$rowは、**値渡し**で渡されていることが確認できました。
そのため、配列の中身を変更したつもりなのに反映されてない・・・という事態が起こり得ます。

#### phpの挙動 補足

しかし、**phpで参照渡し**にする方法があります。
[PHP: foreach - Manual](https://www.php.net/manual/ja/control-structures.foreach.php)

> ループの中で配列の要素を直接変更したい場合は、 $value の前に & をつけます。こうすると、変数には リファレンス が代入されることになります。

知らなかった・・・😱（私だけ？）
というわけで確認します。
foreachの値を渡す際、変数に&をつけて**&$row**として渡します。

```php
<?php
// 二次元配列
$array = array(
    array(0, 1, 2, 3),
    array(4, 5, 6, 7),
    array(8, 9, 10, 11),
);

// 各配列に要素100を追加する
foreach ($array as &$row) {
    $row[] = 100;
    print_r($row);
}

print_r($array);
```

出力結果

```php
// for文の中で出力した結果
Array
(
    [0] => 0
    [1] => 1
    [2] => 2
    [3] => 3
    [4] => 100
)
Array
(
    [0] => 4
    [1] => 5
    [2] => 6
    [3] => 7
    [4] => 100
)
Array
(
    [0] => 8
    [1] => 9
    [2] => 10
    [3] => 11
    [4] => 100
)

// for文の外で出力した結果
Array
(
    [0] => Array
        (
            [0] => 0
            [1] => 1
            [2] => 2
            [3] => 3
            [4] => 100
        )

    [1] => Array
        (
            [0] => 4
            [1] => 5
            [2] => 6
            [3] => 7
            [4] => 100
        )

    [2] => Array
        (
            [0] => 8
            [1] => 9
            [2] => 10
            [3] => 11
            [4] => 100
        )

)
```

同じ結果になりました。

## 最後に
久々にphpを触ったので結構戸惑いました。。
各言語によって結構仕様が違ったりするので(特に型周り)気をつけていきたいと思います。
記事に間違いや不明な点があれば遠慮なくご指摘ください。
1つのDockerfileだけでGoの開発環境(ホットリロード)と本番環境(マルチステージビルド)を記述する

こんにちは。po3rinです。今回は[Docker Meetup Tokyo #29 (Docker Bday #6)](https://dockerjp.connpass.com/event/122084/)で少し話題になった小ネタです。タイトル通りDockerfile1つでGoの開発環境(ホットリロード)と本番環境(マルチステージビルド)を記述する方法を紹介します。今回は「この方法をおすすめします！」というよりかは「こういう方法もあるよー」という紹介なので、開発の状況に合わせて方法を選んでいくと良いでしょう。

## イントロ

開発環境用と本番環境でイメージビルド過程を分けるモチベーションとしては、開発環境用はホットリロードしたいけど、本番はビルドしたバイナリだけを使いたいという思いなどがあります。

これらを２つのDockerfileに分ける場合、同じディレクトリ階層に「Dockerfile」という名前のファイルを２つ置けません。これに関して、下記の記事のように```docker build```の```-f```フラッグで任意の名前のDockerfileを指定してビルドするという対処法があります。
https://www.kabegiwablog.com/entry/2018/08/01/120000

当然これでも対処できますが、これだといつも使っているエディターでシンタックスハイライトの恩恵を受けれないなどの様々なストレスポイントが発生します。Dockerfileの階層を分ける方法もありますが、Dockerfileの数だけディレクトリがどんどん分割されていくのも開発の状況によっては見通しが悪くなりそうです。

実はこれらを１つのDockerfileで記述する方法があります。今回はそれを紹介します。

## Goを例にDockerfile1つで開発環境と本番環境を記述する

ポイントは```docker build```がサポートする```--target```フラグです。これでビルド対象のステージ名を指定して、ビルドするステージを分岐できます。Goの例を見てみましょう。ディレクトリ構成も含めた具体的な例は僕のリポジトリをみてください。
https://github.com/po3rin/go_playground/tree/master/try-docker-target

```Dockerfile
// 本番用の中間ステージ
FROM golang:1.12 as builder
WORKDIR /go/api
COPY . .
ENV GO111MODULE=on
RUN CGO_ENABLED=0 GOOS=linux go build -a -installsuffix cgo .

// 本番用ステージ
FROM alpine:latest as prod
EXPOSE 8080
RUN apk --no-cache add ca-certificates
WORKDIR /api
COPY --from=builder /go/api/ .
RUN pwd
CMD ["./try-docker-target"]

// 開発環境用ホットリロード
FROM golang:1.12 as dev
EXPOSE 8080
WORKDIR /go/api
ENV GO111MODULE=on
COPY . .
RUN go get github.com/pilu/fresh
CMD ["fresh"]
```

上２つが本番用のマルチステージビルド用のステージで、一番下のが開発用ホットリロード環境のステージです。このように記載すると下記のように```--target```でビルドしたいステージを指定できます。

```bash
// 開発環境用ビルド
$ docker build -t api-dev --target dev .
// 本番環境用ビルド
$ docker build -t api-prod --target prod .
```

素晴らしいのは最終的に欲しいステージを指定すれば、ステージ間の依存を解決してビルドしてくれる点です。```--target prod```は依存する```builder stage```を解決してビルドしてくれています。

target指定がめんどくさい&チームで運用する場合はMekefileに記載しておくと良いでしょう。

```Makefile
all: dev prod

dev:
	docker build -t api-dev --target dev .

prod:
	docker build -t api-prod --target prod .
```

この方法のデメリットとしてはDokcerfileが長くなることです。しかし、今回のように開発&本番の2パターンであれば1つにまとめてのそこまで可読性が下がることはないでしょう。このやり方で厳しさがある場合はイントロで紹介した```docker build```の```-f```フラッグで任意の名前のDockerfileを指定してビルドする方法か、そもそもDockerfileのディレクトリ階層を分ける方法を検討ください。

以上ですー
5/11 本日の勉強記録　Ruby　モジュール

**モジュール**
クラスようにメソッドや定数をまとめられるもの。

**クラスとの違い**
・インスタンスを作ることができない。
・クラスの継承ができない。

**モジュールの定義**

```
module モジュール名
　#モジュールの定義（メソッドや定数など）
end
```

**モジュールの用途**
関連するメソッドや定数などをまとめてグループ化したいだけの時に手軽に使えて便利。


```rb
module Driver
 def self.run #←インスタンス化できないのでselfをつける。
  puts 'Run'
 end
 
 def self.stop
  puts 'Stop'
 end
end

Driver.run
Driver.stop
```
これを実行すると、
`
Run
Stop
`
が出力される。

---

調べたら、モジュールでは多重継承ができるらしい。（Mix-inなら複数のモジュールをインクルードできる)

これがメリットなのか！？

例

```rb
module M1
  def foo
    'method foo'
  end
end

module M2
  def bar
    'method bar'
  end
end

class C
  include M1
  include M2
end

puts C.new.foo
puts C.new.bar
#=> method foo
#=> method bar
```
クラスではできないことだから使う時が来るのだろうが、どんな時に使うんだろう。多重継承をした方が効率が良さそうってのはなんとなくイメージはできるけど、、、。
頭の隅に入れておこう。
Leetcode #28: Implement strStr()

```swift
func strStr(_ haystack: String, _ needle: String) -> Int {
    if needle.count > haystack.count {
        return -1
    }
    var haystackArr = Array(haystack)
    var needleArr = Array(needle)
    for i in 0...haystack.count-needle.count {
        var possible = true
        for j in 0..<needle.count {
            if haystackArr[i+j] != needleArr[j] {
                possible = false
                break
            }
        }
        if possible {
            return i
        }
    }
    return -1
}
```
【GAS】GASのスクリプトの初めての実行【初心者】

実はGASのスクリプト実行時には権限承認についての操作が必要なんです。
今回は、そんなちょっと手間な権限承認の操作についての紹介です★★★

####1.スクリプト実行ボタンを押下
<img width="402" alt="手順1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411120/2b2477a3-d95d-0257-2190-144513438c88.png">
まずは、スクリプトを実行します。
今回はあらかじめ用意したスクリプト実行ボタンを使用します！

####2.承認続行ボタン押下
<img width="545" alt="手順2" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411120/59ee4c27-ba9b-de50-4de7-7c88c97fa858.png">
ボタンを押すとこのような画面が表示されるので、続行ボタンを押してください。

####3.Googleアカウントを選択
<img width="599" alt="手順3" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411120/52055258-8b0f-6034-255b-d64fd013fb47.png">
アカウント選択画面が表示されますので、使用するGoogleアカウントを選択してください。

####4.安全ではないページへ移動
<img width="599" alt="手順4の1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411120/2e76f972-a807-4232-8068-893d56a0fbc4.png">
<img width="600" alt="手順4の2" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411120/dff8d89a-d482-ebf2-b0d4-3cd5632c3d31.png">
「このアプリは確認されていません」というアラートが表示されますが問題ありません！
詳細を表示してから「安全ではないページ）に移動」のリンクをクリックしてください。

####5.アカウントへのアクセスを許可
<img width="600" alt="skitch (12).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411120/682007ac-a389-142f-da54-fe9d39e7598c.png">
アカウントへのアクセス許可を求められますので、許可ボタンをクリックしていください。

---
これでスクリプトの実行が出来ます！
ちなみにこの操作は初回のみ入力する必要があり、2回目以降は権限承認の必要はありません。
毎回入力するのは手間ですよね笑笑
Pattern

```

class Pattern extends RzObject {
    describeDiagram() {
        Promise.all([new Promise((f, g) => {    this.receive(Event("introduce")); while(!this.getEl("introduce").isSettled()) {}; f();    }]).then((v) {
            return new Png(v);
        });
    }
}


let introduce = (e) => {
    return "〔header on body on footer〕";
};

    \pattern                     \ = Pattern();
    |                            | >>= setLoRole({header, body, footer});
    |                            | >>= setListener("introduce", introduce);
c_> |contains("introduce"): true;|

```
scpでリモートホスト間でファイル（ディレクトリ）をコピーする

# 目的
異なるリモートホスト間でファイルを転送したい場合、片方のホストに入りもう一方のホストに直接`scp`コマンドを叩くことができますが、必ずしもリモートホスト間でsshが接続できるとは限りません。
<img width="300" alt="File transferring between two remote hosts" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65198/58d4838d-8a37-c368-d435-44fcdbf4fef4.png">

その場合クライアントから以下のような`scp`コマンドを叩くことを考えますが
`scp hoge@example1.com:~/fuga hoge@example2.com:~/fuga`
実際に実行してみると`example2.com`の名前解決に失敗します。

# 解決策
デフォルトではホスト間でファイル転送することができません。
一旦クライアントにファイルを転送しても良いですが、ファイルサイズが大きい場合は`scp -3`コマンドを使うことでリモートホスト間のファイル転送ができます
## -3オプション
先ほどのコマンドに-3オプションをつけるだけで二つのホスト間でファイルを転送できます
`scp -3 hoge@example1.com:~/fuga hoge@example2.com:~/fuga`

scpコマンドのmanを開くと
「Copies between two remote hosts are transferred through the local host. Without this option the data is copied directly between the two remote hosts. Note that this option disables the progress meter.」
`scp -3 hoge@example1.com:~/fuga hoge@example2.com:~/fuga`

手元のホストを通してscpコマンドを実行することができるので大きいファイルでも不必要に認証情報を渡して転送する必要がありません
【Unity】テキスト(UI Text)のフォントサイズを大きくすると消える時の対処法

環境メモ
⭐️Mac OS Mojave バージョン10.14
⭐️Unity 2018.2.15f1


1.テキストを作る
「Create」-「UI」-「Text」
<img width="457" alt="スクリーンショット 2019-05-11 11.15.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/73aab87f-b09a-e61a-f4d9-b7cbe503a716.png">

2.フォントサイズを大きする
<img width="1145" alt="スクリーンショット 2019-05-11 11.19.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/5007b2c8-f639-f5e7-6729-1e8a52fb6bba.png">

3.フォントサイズを大きすると、消えた　＞＜
<img width="1142" alt="スクリーンショット 2019-05-11 11.20.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/a4268ec2-d010-c10c-f830-4f22a326c3ee.png">

4.解決策として
「Horizontal Overflow」と「Vertical Overflow」の両方を
「Overflow」にすると、フォントが消えずに表示される。解決！
<img width="1126" alt="スクリーンショット 2019-05-11 11.21.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/509a150b-3dcf-5c64-09e5-363b5e6efa92.png">

<br>
<br>
↓↓Google Play 無料Free
CherryCocktailGlassチェリーカクテルグラス〜無料簡単ミニゲームFree games
[![googleStoreLink.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/0687ddf4-3146-65bd-7ca5-45b6f70fb153.png)](https://play.google.com/store/apps/details?id=com.non.CherryCocktailGrass)

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">⭐️Androidアプリ⭐️リリース<br>🍒CherryCocktailGlass🍒<br>Blenderで絵を描いてUnityで作成したミニゲームリリースしました😍<br>🍷カクテル🍷グラス🍷に<br>🍒チェリー🍒をのせるシンプルなゲームです。<br>✨（●＾o＾●）✨<br>【Android】<br>Google Play 無料Free<a href="https://t.co/I70R9QEDuq">https://t.co/I70R9QEDuq</a><a href="https://twitter.com/hashtag/CherryCocktailGlass?src=hash&amp;ref_src=twsrc%5Etfw">#CherryCocktailGlass</a> <a href="https://t.co/g8kCM9QVhL">pic.twitter.com/g8kCM9QVhL</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1121818121323433984?ref_src=twsrc%5Etfw">April 26, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
とあるマッチングサービスで、自動スワイプさせるChrome拡張機能をOpenしたよ

## きっかけ
基本的にストライクゾーンが広いのか、僕の場合は基本的に全員右スワイプ。
手動でやるのが面倒だったので自動化した。

## 実現手順
1. 開発者ツールで自前のJSを実行する
2. 1のスクリプトを実行させるChrome拡張機能を開発

## 1. 開発者ツールで自前のJSを実行する
ソースコードはこちら

```js
( () => {
    setInterval( () => document.querySelector("[aria-label = 'いいね！']").click(), 100);
} ).call(this);
```
実際これを、Web版Tinder（ https://tinder.com/app/recs ）にアクセス=>開発者ツールを開く=>Consoleタブへ移動=>上記ソースコードをコピペ=>Enterすることで0.1秒ごとに勝手に右スワイプされます。

簡単に説明すると、以下でいいねボタン要素を取得し、`click()`によりクリックさせる。

```js
document.querySelector("[aria-label = 'いいね！']").click()
```

さらに、これを`setInterval()`により、第二引数にて0.1秒（100ミリ秒）ごとに実行されるように設定。

さらに、それを無名関数を`call()`で呼び出し、実行させる。

## 2. 1のスクリプトを実行させるChrome拡張機能を開発

必要なのは以下2ファイルのみ。

- manifest.json
    - 拡張機能の設定ファイル
- swipe.js
    - 1のソースコードをただ貼り付けただけ

```json:manifest.json
{
  "manifest_version": 2, // マニフェストのバージョン
  "name": "Swipe you only", // 拡張機能の名前
  "description": "This extension swipe everyone to RIGHT.", // 拡張機能の説明
  "version": "1.2", // 拡張機能のバージョン => Updateするたびに書き換える必要あり
  "content_scripts": [
    {
      "matches": ["https://tinder.com/app/recs"], // URLにマッチする時だけswipe.jsを実行
      "js": ["swipe.js"] // 1のソースコードを貼り付けたファイル
    }
  ],
  "permissions": [
    "tabs",
    "https://tinder.com/app/recs"
  ]
}
```

[ドキュメントはこちら](https://developer.chrome.com/apps/manifest)

## 成果物
[chrome:extensions](https://chrome.google.com/webstore/category/extensions?hl=ja&gl=CZ)にアクセス
Swipe you onlyと検索

夏に向けてマッチしまくるどー！
RailsでのAPI開発基礎のメモ

##はじめに
RailsでAPIを作成する機会があったので忘れないように
簡単にまとめようかと思います。

### １、ルーティングの記述

```ruby:routes.rb
post 'api/sampleApi' => 'api#sampleApi'
```
POSTでapiのアクションを叩くルーティングを設定。

### 2、コントローラの記述

各処理で行っていることをコメントで以下に記述しました。

```ruby:api_controller.rb
class ApiController < ApplicationController
  # JSONの読み込み
  require 'json'
  
  # CSRFチェックで引っかからないよう記述
  protect_from_forgery except: [:sampleApi]
  
  def sampleApi
    # 正常処理時のステータス200をセット
    rs = {:code => 200}

    begin
      # JSONのパース
      json_request = JSON.parse(request.body.read)
      
      # 要素へのアクセス（今回はkeyがparamsの値が必要だとする）
      parameters = json_request["params"]
      
      # 以下にAPIで行う処理を書く
      sample_user = User.new(parameters)
      sample_user.save!

    rescue => e
      # エラーが発生した場合はステータス500とエラーメッセージをセット
      rs = {:code => 500, :error => e.message}
    end
    
    # JSONでレスポンスを返す
    render json: rs
  end
  
end
```

### ３、補足：CSRF(クロスサイトリクエストフォージェリ)とは
Webアプリケーションの脆弱性、または脆弱性を狙った攻撃の一種。
本来拒否すべき他のサイトからのリクエストを受信・処理してしまう。
参考：https://www.trendmicro.com/ja_jp/security-intelligence/research-reports/threat-solution/csrf.html

RailsはCSRFをdefaultでチェックしてくれるのでここでは外す必要があります。

以上です。
#Linux の uniq コマンドが効かない？ sort と組み合わせないとだめだよ！

# ABA をユニークにしてくれない

```
[root@7c3532dbdfc1 /]# echo -e "A\nB\nA" | uniq
A
B
A
```

# ABB はユニークにしてくれる

```
[root@7c3532dbdfc1 /]# echo -e "A\nA\nB" | uniq
A
B
```

# sort してから uniq しよう

```
[root@7c3532dbdfc1 /]# echo -e "A\nB\nA" | sort | uniq
A
B
```

# こんな仕様ある？

罠すぎるでしょ。

# また Mac というか BSD版 てめーの仕業か！

と最初は思ったけど違ったよ。

# Ref

[uniqコマンドについて詳しくまとめました 【Linuxコマンド集】](https://eng-entrance.com/linux-command-uniq)

![image](https://user-images.githubusercontent.com/13635059/57562350-d4aad980-73cc-11e9-9c30-812812d7f17c.png)


# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/1779








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
[Mac]スクリーンショットの保存先を任意の場所に変更する

## 手順
1. スクリーンショットを起動
2. オプションから保存先を選択

## スクリーンショットを起動

spotlightから検索、もしくはLaunchpadの「その他」フォルダの中にある「スクリーンショット」を選択する。

![screenshot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234559/609581d9-52c7-986b-c82b-920e2ee4f364.png)

## オプションから保存先を選択

画面下部にある「オプション」から「その他の場所…」を選択し、スクリーンショットを保存したいフォルダを選択して完了

![スクリーンショット_2019-05-10_12_40_41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234559/36cca360-2a6e-8eb0-96a0-71f34c3eac58.png)
rubyでボーナスドリンクシステムを作ってみた

おはようございます。

本日は[こちらのページ](https://github.com/JunichiIto/bonus-drink)の問題を解いてみました。

```rb
# ドリンク3本買うごとに1本貰えるシステムです。
# 例 3本購入→4本,11本購入→16本,100本購入→149本

class BonusDrink
 def initialize(buy_number)
    @buy_number = buy_number
  end

  def get_drink
    sum_number = [@buy_number]
    while sum_number[-1] > 2
      sum_number << sum_number[-1] / 3
      sum_number << sum_number[-2].divmod(3).sum
    end

    sum = 0
    sum_number.select.with_index { |drink, i| i.odd? }
              .each { |n| sum += n }
    sum * 3 + sum_number[-1]
  end
end
```
<b>振り返り</b>
処理の流れとしては以下のようにしました。
1.while文
→3で割り、今回貰える本数と2巡目で飲む本数を配列に格納する。
2.selectメソッド
→配列には貰った本数と次に飲む本数が入っているので貰った本数のみにする。
3.eachメソッド
→合計何本貰ったかを返す。
ドリンクは3本につき1本貰えるので貰った本数に3をかけ、そこに最後に飲んだ本数を足して合計数を返す。

こちらは小学三年生の問題がベースらしいのですが、それすらも難しくコードに落とし込むのに手間取りました笑
Laravel5.8　環境構築

##事前準備
- パソコン（初期化したwindows10）
- 何があっても自分を疑う心

色々と導入していると全く違うところで問題が発生することが多々あるため
出来る限りクリーンな状態で設定したい
（初期化 and 最新パッチで2時間かかった）

##パソコンのスペック
- OS windows10 Home 64bit
- CPU i5-2467M
- メモリ 4GB
- SSD 55GB(Cドライブ)
- HDD 465GB（Dドライブ）※使わない

##参考サイト
[Laravel公式](https://laravel.com/docs/5.8/)
[ReaDouble](https://readouble.com/laravel/5.8/ja/)

##必要なソフトウェア
|       | ソフトウェア    |バージョン                                           |用途                      |
|------:|:---------------|---------------------------------------------------:|:------------------------ |
|:one:  | VirtualBox     | [6.0.6](https://www.virtualbox.org/wiki/Downloads) |仮想マシン                 |
|:two:  | Vagrant        |[2.2.4](https://www.vagrantup.com/)                 |仮想マシンの設定自動化      |
|:three:| git            |[2.21.0](https://git-scm.com/)                      |バージョン管理             |
|:four: | Chrome         |[最新](https://www.google.com/intl/ja/chrome/)       | ブラウザ                 |

#ソフトウェアのインストール
- VirtualBox
    1. [公式](https://www.virtualbox.org/)からダウンロード画面へ
    2. windows hostsを選択してダウンロード
    3. exeファイルを実行
- Vagrant
    1. [公式](https://www.vagrantup.com/)からダウンロード画面へ
    2. windows 64bitを選択してダウンロード
    3. msiファイルを実行
    4. パソコンの再起動
    5. cmdにて`vagrant -v`でバージョン表記されることの確認

- git
    1. [公式](https://git-scm.com/)からダウンロード 
    2. exeファイルを実行
    3. 全てデフォルトでインストール

- Chrome
    1. [公式](https://www.google.com/intl/ja/chrome/)からダウンロードしてインストール

#Homestead設定
- VagrantにHomestead Vagrant Boxを追加(7.2.1)
    1. cmdにて`vagrant box add laravel/homestead` 
    2. virtualboxの数字を入力
- Homestead
    1. cmdにて`cd c:\laravel`に移動（ユーザー配下に置きたくなかったので）
    2. `git clone https://github.com/laravel/homestead.git Homestead`
    3. `cd Homestead`
    4. `git checkout v8.4.0` [最新はここで確認](https://github.com/laravel/homestead/releases)
    5. `init.bat`

#設定ファイルの修正

```/Homestead/Homestead.yaml
folders:
    - map: C:\laravel                            #修正
      to: /home/vagrant/code

sites:
    - map: homestead.test
      to: /home/vagrant/code/devproject/public   #修正
      schedule: true                             #追加（cronに自動で追加してくれる）

###別PCから接続もできるよう以下を追加###
networks:
    - type: "public_network"
      ip: "192.168.11.115"
      bridge: "Wi-Fi"
```
※ipとbridgeは各環境に合わしてください

```/Homestead/after.sh
sudo timedatectl set-timezone Asia/Tokyo         #追加
```
- after.shとは
    - Homestead.yamlで環境構築された後に実行するファイル

#起動
- パソコン側のsshキーを生成 `ssh-keygen`
    - 既にある人はスルー
- hostsファイルの追記

```C:\Windows\System32\drivers\etc\hosts
192.168.10.10  homestead.test
```
- cmdにてhomesteadフォルダに移動 `cd c:\laravel\Homestead`
- `vagrant up`

#Laravelプロジェクトのインストール

- `vagrant ssh`

vagrant側

- `cd code`
- `laravel new devproject`

バージョン確認

- `cd devproject`
- `php artisan -V`

```
Laravel Framework 5.8.16
```

#動作確認
[http://homestead.test](http://homestead.test)
同一ネットワーク内の別のパソコンから表示する場合、192.168.11.115で表示できます。
また、別のパソコンのhostsファイルを以下のように修正すると便利かもしれません。

```C:\Windows\System32\drivers\etc\hosts
192.168.11.115  homestead.test
```

##最後に
edgeは使うな！絶対にだ。（半日ほど謎の現象に悩まされました）
自分を疑い過ぎた結果、かなりの遠回りをしました。
トップ画面のコントローラーの作成

route.rbにindexアクションを記載

<img width="606" alt="スクリーンショット 2019-05-11 10.53.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386223/a2a8b7ed-ed43-a703-319e-14156f88c879.png">


rails g messagesの実行
<img width="577" alt="スクリーンショット 2019-05-11 10.54.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386223/b62b685a-ab44-1f61-4983-be43a32acbfa.png">

不要なファイル（ヘルパーなどの削除）に取り掛かりたい。
https://qiita.com/tanakayo/items/5de57f4b89d1ef9c70ba　を参考に、
app > config > applicatiom.rbを確認

<img width="513" alt="スクリーンショット 2019-05-11 10.56.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386223/8e177251-5c23-21dd-fd29-5948e9019746.png">


すでに、記載されている。
再度、ターミナルを確認。

invoke　 coffe
invoke scss

となっており、coffeeを発動しない、とある。command + pで調べても、cofffeeも見つからない。
成功？したようだ。
ExcelVBAの保護を解除する方法

# Excel VBA の保護とは？
MS-OfficeではVBA (Visual Basic for Applications) によるプログラミングが可能です。これによりさまざまな機能拡張ができるわけですが、その際 VBA にパスワードを設定可能です。パスワード設定された VBA のプログラムコードは、閲覧したり変更したりする事ができなくなります。これは VBE (Visual Basic Edtor) を起動し、「ツール(T) > VBAProject のプロパティ(E) > 保護」で表示される、以下のダイアログボックスで設定します。

![パスワード設定用ダイアログボックス.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347126/a648f854-3ecf-500e-6684-b7fd9d9dba13.png)

このパスワードを解除する方法について色々調べたので、メモとして記事を残しておきます。

# Excel VBA のパスワードは解除できるのか？
結論として可能です。また保護すべきプログラムコードやリテラルは暗号化されていないので解除できなくてもなんとなく内容を読めてしまいます。VBA のパスワードは利用者が誤って内容を改変したりできないようにするフールプルーフ(安全対策) 程度の役割しかもっていないと考えるべきです。

# なぜ解除したいのか？

人それぞれ色々な動機があるようです。

## 社内に古くからあるアプリケーションで、誰もパスワードが分からない
多くの人がこれで困っているようです。

## VBS 等、外部のスクリプトから操作したい
VBAにパスワードが設定されていると、CreateObject() して外部からアクセスしたい場合にも制限が掛かります。これが弊害になっているケースもあるようです。


# 解除方法一覧
当初、特定のオブジェクトにパスワードを設定する VBA の標準的なメソッドがあるのでは無いかと思ってましたが、それは見つかりませんでした。その反面、色々な方法があるようです。

## バイナリファイルを書き換えてパスワードを無効にする

エクセルファイル内には ```"DPB="``` という文字列が存在しており、この後に続く文字列が暗号化されたパスワードです。これを書き換えてパスワードを無効にする。あるいは、新しいパスワードを設定するという方法です。

 * http://d.hatena.ne.jp/cojicoji0228/20100209/1265717104
 * https://codeday.me/jp/qa/20190127/169259.html

## SendKeys を利用してパスワードを自動入力する方法

キーボードの動作を API でエミュレートし、パスワードを自動入力しています。あらかじめパスワードを知っている事が前提です。

 * https://language-and-engineering.hatenablog.jp/entry/20100526/p1

## パスワード評価関数の戻り値を変更する

VBA ではパスワード保護されているスクリプト等にアクセスがあった時、パスワード入力用のダイアログボックスを表示します。その関数の戻り値を強引に書き換えて通過させるという技です。

 * https://www.saka-en.com/office/excel-vba-password-unlock/
 * https://stackoverflow.com/questions/1026483/is-there-a-way-to-crack-the-password-on-an-excel-vba-project/27508116#27508116

# まとめ

Excel VBA のパスワード解除は可能です。しかし VBA 自体がメソッドを提供しているわけではないため、色々な工夫が必要です。

今回、私は最終納品物がパスワード保護されたエクセルファイルであるプロジェクトにおいて、どのようにバージョン管理し、いつパスワードを設定するかという問題を解決する過程で解除方法について調査しました。パスワードの自動設定についても調べたので、またそのうち記事にしたいと思います。
Flutter 個人的Tips #1 【Scaffoldの背景をWidgetにしたい】

# これは何？
Flutterを使っていて，個人的にメモしといたほうがいいと思ったテクニック的なものです．今後増えるかもしれないのでナンバリングしました．

# 今回の話題
## アプリの背景をアニメーションにしたい
ある時ふと，背景をFlareで作ったアニメーションにしようと考えました．この時アプリの構成は， `flutter create` した時の状態と同じで `Scaffold` がルートにあります． 
`Scaffold` は Material Design Component なので，コンストラクタに背景色を指定する `backgroundColor` があります． Material Designでは，基本的にアプリの背景は一色の無地になります． ここで背景をアニメーションにしたいというのは Material Designの原則としては外れるかと思いますが，目を瞑って行くことにします．

## やり方
最終的には以下のようになりました．発想は実にシンプルで， `Widget` を重ねる事できる `Stack` を使って，背景の上に `Scaffold` を重ねるという形です．
今回使った `Scaffold` には `AppBar` もあり，これを完全になくしてしまえば全画面使えるかもしれませんが，レイアウト的にタイトルが欲しく，自前で `AppBar` の位置にタイトルを置くのはつらくなってしまうので残したまま考えました．更に `AppBar` の中にメニューとか置けるので拡張性を確保する意味もあります．

```main.dart
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: themeData,
      // Material AppのhomeをStackに
      home: Stack(
        children: <Widget>[
          // 背景になるアニメーション
          FlareActor(
            "assets/hoge.flr",
            animation: "animation",
            alignment: Alignment.center,
            fit: BoxFit.fitHeight,
          ),
          // 本来のScaffold
          Scaffold(
            appBar: AppBar(
              // AppBarの色を透過に，elevationも0に（影をなくすため）
              backgroundColor: Colors.transparent,
              elevation: 0.0,
              title: Text("TITLE"),
            ),
            body: MainPage(),
            // Scaffold自体の背景色も透過に
            backgroundColor: Colors.transparent,
            floatingActionButton: FloatingActionButton(
              child: Icon(Icons.add),
              onPressed: () {},
            ),
          ),
        ],
      ),
    );
  }
}
```

## 結果
![star.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154601/cfb033f0-ac45-532e-687a-9e735230651f.gif)

# 応用
`Scaffold` の背景を変えた，というより，単にアニメーションを重ねたという感じなので， いろいろ応用が効きます．
`FlareActor` の部分を `Container` とかにすることで，例えばグラデーションを背景にしたり，
更に `Stack` を重ねることで画像+グラデーションオーバーレイにしたり， `GestureDetector` を使ってインタラクティブに動く背景にしたり… 夢が膨らみますね．
配列を仮想DBとした掲示板APIサーバの作成（1/5）:はじめに・環境構築・DB、コメントモデルの作成

# はじめに

メンターさんに与えられた課題として、配列を仮想DBとし、それに対してCRUD処理を行うようにするAPIサーバーを実装します。
各CRUD処理1つに1記事という形にします。

# GitHub

https://github.com/atlansien/js_excercise_for_backend_7

# この記事のまとめ
- 最初の環境構築をした
- DB、コメントモデルを作成した

# 最初の環境

- [Node.js](https://nodejs.org/ja/)
  - [Express](https://expressjs.com/ja/):Node.jsの代表的なWebフレームワーク
  - [ESlint](https://eslint.org/):JSの検証ツール、エラーやタイポなどを見つけ、修正します。
  - [Prettier](https://prettier.io/):コードフォーマッタです、Eslintより綺麗に整形してくれるため、併用します。

他に必要なライブラリがあれば都度インストールします。

# 仕様

## 用意するDB

- comment（Model）
  - **ID**:数値、新しいコメントを作成するたびに自動で数値が1増える（オートインクリメント）、他のIDの値と重複してはならない
  - **username**:文字列、ユーザーが手動で書き込む
  - **body**:文字列、ユーザーが手動で書き込む
  - **createdAt**:Date、コメントを作成した時点の日付をセットする
  - **updateAt**:Date、コメントを作成した時点の日付をセットするが、新しくusernameとbodyを更新した場合、更新した時点の日付をセットする。

このDBを、配列`Comments`にセットする。

## 機能一覧

1. `「GET/api/comments」`リクエストを送ると、`コメント一覧`がレスポンス値として返ってくる
2. `「POST/api/comments」`リクエストを送ると、`新規にComment1件を作成し、作成されたComment`がレスポンス値として返ってくる
3. `「PUT/api/comments/:id」`リクエストを送ると、`id値に紐づいたComment1件を更新して、更新したComment1件`がレスポンス値として返ってくる
4. `「DELETE/api/comment/:id」`リクエストを送ると、`id値に紐づいたComment1件を削除して、削除したComment1件`がレスポンス値として返ってくる




# ダミーDB、コメントモデルの作成

```js:./models/Comment.js
const dayjs = require("dayjs");

const comments = [];

let nextId = 1;

class Comment {
  constructor({ username, body }) {
    this.id = nextId++;
    this.username = username;
    this.body = body;
    this.createdAt = dayjs().format("YYYY年MM月DD日 HH:mm:ss");
    this.updatedAt = dayjs().format("YYYY年MM月DD日 HH:mm:ss");
  }
}
```

[Day.js](https://github.com/iamkun/dayjs):JSの標準機能には`new Date()`がありますが、今回は簡単に日時の出力の設定ができ、軽量なDays.jsを使用することにしました。


## commentsとComment
グローバル空間に今回の仮想DBである配列`comments`と`nextID（CommentのID値）`をセットします。
その後`Comment`クラスを作成、各情報を書き込んでいきます。
これでダミーDB、コメントモデルの作成は終了です。


## テスト用データを作成
その後、後々テストで使用していくため、先にいくつかの`Comment`データを配列に入れておきます

```js:./models/Comment.js
// テスト、確認用に配列に挿入するDBの作成
for (let i = 0; i < 5; i++) {
  const comment = new Comment({
    username: 'username' + i,
    body: 'body' + i,
  });
  comments.push(comment);
}
```

次に、「`「GET/api/comments」`リクエストを送ると、`コメント一覧`がレスポンス値として返ってくる」機能を作っていきます

[配列を仮想DBとした掲示板の作成（2/5）:GETリクエスト・サーバ起動編
](https://qiita.com/atlansien/items/7ee78f6d89c6ae3fbeae)
Leetcode #26: Remove Duplicates from Sorted Array

```swift
func removeDuplicates(_ nums: inout [Int]) -> Int {
    if nums.count == 0 {
        return 0
    }
    var index = 0
    for i in 1..<nums.count {
        if nums[i] != nums[index] {
            index+=1
            nums[index] = nums[i]
        }
    }
    return index+1
}
```