OmniAICreator/Qiita-1.07M huggingface dataset:
SpreadSheetから該当するデータを抜き出してブラウザで表示する。


# 成果物
こんな感じのSpreadSheetのデータがあったとして。
![スクリーンショット 2020-08-23 20.37.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113504/bf4e2a7b-0de2-3180-4af2-60ea03097fec.png)

それをブラウザで以下のようにフィルターかけつつ表示する。

{URL}?group_id=1で検索 
↑をリクエストと呼ぶ

![スクリーンショット 2020-08-23 20.44.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113504/53db9b7d-fb7f-e6f6-52bf-4e3d53445c92.png)

# 前提
GASでdoGetを使ったAPIを作ったことがあること。
基礎的なjavascriptの知識
配列、多次元配列を使うことができる。
テンプレートリテラルが使える。

# 本記事によって得られる経験
- 複数のデータからフィルターして取得する
- GroupID等のデータの付け方
- 通信でHTMLを返す

# 実装方法

シート名はmonstersにしておく。

```.js:コード.gs
// ブラウザでリンクを入れたときに呼び出されるのはdoGetという名前の関数。
const doGet = (e) => {
  // リクエストから必要なパラメータを取得 ( 今回はgroup_id=1なのでtargetGroupIDには1が入る。)
  const targetGroupID = e.parameter.group_id;

  // 対象のスプレッドシートから全値を取得。
  const spreadsheet = SpreadsheetApp.getActive();
  const monstersSheet = spreadsheet.getSheetByName("monsters");
  const values = monstersSheet.getDataRange().getValues();
  
  let html = "";
  html += "<h1>モンスターズ</h1>";
  html += "<ul>";
  // values.lengthは行の数を示す。今回は7行なので7
  for ( let i = 0; i < values.length; i++ ){
    // 一行目、二行目はカラム名とコメントなのでスキップ
    if(i == 0 || i == 1){
   　 continue;       
    }
    // データを変数につっこむ
    const id = values[i][0];
    const group_id = values[i][1];
    const name = values[i][2];
    const hp = values[i][3];
    const attack = values[i][4];
    // フィルター用の値 targetGroupIDとSpreadSheetの値であるgroup_idを比較
    if(targetGroupID != undefined && targetGroupID != group_id) // フィルターがあって、一致しない場合はスキップ
    {
      continue;
    }

    html += `<li>id ${id} group_id ${group_id} ${name} hp ${hp} attack ${attack}</li>`;
  }
  html += "</ul>";

  return HtmlService.createHtmlOutput(html);
}
```

### ポイント　全値の取得

```.js
  // 対象のスプレッドシートから全値を取得。
  const spreadsheet = SpreadsheetApp.getActive();
  const monstersSheet = spreadsheet.getSheetByName("monsters");
  const values = monstersSheet.getDataRange().getValues();
```

[getDataRange](https://developers.google.com/apps-script/reference/spreadsheet/sheet#getDataRange())
valuesは二次元配列になっており、以下のような感じで入ってる。
![スクリーンショット 2020-08-23 20.37.07.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113504/2695c035-399e-7c5d-9356-49d0d8abaa65.jpeg)

つまりこういうこと

```.js
values[0][0] // => id
values[2][0] // => 1
values[2][2] // => スライム
```

### ポイント　htmlを返す。
[HtmlService.createHtmlOutput](https://developers.google.com/apps-script/reference/html/html-service)
という便利な関数がある。

基本的には`+=`で文字列を連結しているがデータの値は[テンプレートリテラル](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals)を使って短く書いている。

リストではなく、テーブル表示でも問題なかったが本記事では見た目は重要ではないため、シンプルなリストを使った。

# 練習問題
リスト表示ではなくテーブルで表示する。
[tableタグ](http://www.htmq.com/html/table.shtml)

別のフィルターを追加してみる (idがxx以上のものを表示等)

# 参考
https://tonari-it.com/gas-workflow-form-gmail-spreadsheet/
SQLのTRIMについて

仕事でSQLのTRIMを使用する機会があったので、自分用メモがてら書き留めておきます。

〇TRIM()

```ruby:SQL
SELECT TRIM('  abc  ');
```

もっとも基本的なTRIMです。指定した文字列の前後の空白を除去します。
結果として'abc'が出力されます。


〇LTRIM()

```ruby:SQL
SELECT LTRIM('  abc  ');
```

文字列の左側（前方）の空白を除去します。
結果として'abc　'が出力されます。


〇RTRIM()

```ruby:SQL
SELECT RTRIM('  abc  ');
```

文字列の右側（後方）の空白を除去します。
結果として'　abc'が出力されます。

あと、これは自分が仕事で使用した際にそういう使い方がされていたのですが、
あえてTRIM()を使用せずにLTRIM(RTRIM())で前後の空白を除去する場合があるようです。
少し調べてみたところ、どうやらTRIM()よりもLTRIM(RTRIM())の方が「強い」らしいのですが、細かいことはちょっと不明。
チーム内で話を聞いてみたところ、どうもSQLが複雑になってくるとTRIM()が上手く作用しないことがあるらしく、そういう場合はLTRIM(RTRIM())にするとなぜか利くようになるんだとか。
詳細は未確認なのですが、TRIM()が上手く作用しないときは試してみるといいかもしれません。
プログラミング学習記録　Day6

#今日の学習時間
1.25h (トータル 9.25h)

#今日の学習内容
##デイトラ初級編 DAY10 Bootstrapの基本を学ぼう①

**bootstrapでできること**
*文字色、背景色
*文字の大きさ
*文字の太さ
*文字の位置

```html:html
<h1 class="text-white bg-primary text-center font-weight-bold display-1">Hello, world!</h1>
```

![スクリーンショット 2020-08-23 21.16.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692520/7a0949a0-fa51-d2e5-46e4-14dda03b4367.png)

## DAY11 Bootstrapの基本を学ぼう②

width heightは25%区切り
margin paddingは0-5の六段階

**gridレイアウト**
必ず`<div class="container"></div>`の中にいれる
`<div class="row"></div>`が１行
`<div class="col"></div>`が一つのブロック
1行12分割した幅で操作できる

gridレイアウトはよく使われるそうなのできちんとマスターしたい！
一般SEがWebエンジニア勉強会inVRにスタッフ体験枠として参加してみた

本題の通り、以前から面白そうと感じていたWebエンジニア勉強会にスタッフ体験枠として思い切って参加してみました。

##そもそもWebエンジニア勉強会inVRとは何ぞや
clusterというVRプラットフォームで行われるWebエンジニア向けの勉強会です。Webエンジニア向けと書きましたが、そうでない方が参加しても楽しめるようなテーマが多く、HMDが持っていなくても参加ができるのが特徴で、参加に対するハードルはその他大勢のオンライン勉強会とそう変わりません。
また、youtubeでも配信を行っており、clusterが動かないよって方も配信を通じて参加できます。

##会議ツールでやる勉強会と何が違うの？
なんと言っても臨場感の一言に尽きます。
まるで現実のカンファレンスや勉強会に参加してるんじゃないかと錯覚するほどの臨場感は、受け身がちになるZoom等のオンライン会議ツールを使った勉強会とは一線を画します。

##そもそも何者？
20卒SEのKanjasと申します。B向けSaasの会社でサポートエンジニアみたいなことをしています。

##参加したきっかけ
「バーチャル空間勉強会を一般化する」というコンセプトが面白いと思い、一緒に盛り上げたいと思ったからです。

##運営として行ったこと
勉強会の告知や会場のアナウンス等を担当していました。

##感想
運営側として、何もかもが初体験でトラブルもありましたが楽しかったです。
一スタッフとして勉強会を一緒に作り上げる感覚は何物にも変えがたいです。
分からない事が多く焦りもありましたが、運営メンバーに助けられながらも無事に開催できました。
スタッフの皆様には本当に感謝しております。
これからもスタッフとしてお手伝いしたいと思いました。
個人的にはバーチャル勉強会の取り組みを続けて欲しいです。
また、当日に登壇しながら半分司会的な役割をこなしている果物リン氏は単純にすごいと思いました。

##最後に
Webエンジニア勉強会inVRはいいぞ
マークダウン記法でmermaidを使用してフローチャートを作成する



## 背景
VSCodeの拡張機能の中に、mermaidが存在する。
この機能を使用することでフロチャートなどを簡単に書くこができる。
おそらく現職の業務で使用することはないが、
面白い機能だと思ったので簡単にまとめる。

## "mermaid"とは
詳しくは以下参照。(英語サイトです)
https://mermaidjs.github.io/

mermaidはフローチャートやシーケンス図を直観的に書くことのできる
作図ツールとのこと

## マークダウン記法でフローチャートを書く
VScodeにここからここまではmermaidだよと認識させるために、
以下のブロックの中に記載する必要がある。

```ruby:qiita.rb
'```mermaid'    --記載する際は ' は抜く

'```'
```

### mermaidでの書き方
最初にどのチャートを書くか宣言する
・graph TD　(縦向きフロー)
・graph LR　(横向きフロー)

### 実際に記述すると、こんな感じ

・graph TD　(縦向きフロー)

```mermaid
graph TD
    a-->B 
```
・graph LR　(横向きフロー)

```mermaid
graph LR

    a-->B

```

### 次にオブジェクトを宣言する
a[XXXX]

a: オブジェクト名
XXXX: オブジェクトの表記名

### フローのつなぎ方
オブジェクト同士を以下でつなぐ
 --> 

実際に記述すると、こんな感じ

```mermaid
graph TD
a[XXXX] --> b[XXXX] 
```

とりあえず、基本的なとこまで記載した。
他にもいろいろ書きたいので、別途追記したい。
てか、Qiita上でのmermaidの記載方法がわからない・・・
Shopifyでフロント側をイジるときのLiquidの書き方

ShopifyのをLiquidイジったのでメモ

## Liquidとは
Liquidというのは、Shopifyで作成されたRubyで書かれたテンプレート言語で、Shopifyを動かすために必要な言語。

## 基本的な書き方
基本的な書き方は
・ifやforといった何かしらの処理がされる `{% ○○○ %}`
・サイトにhtmlなどで出力される `{{ ○○○ }}`


### コメント
```javascript:Liquid
{% comment %} ここがコメントアウトされます。 {% endcomment %}
```

### 画像の表示
```javascript:Liquid
{{ '○○○.png' | asset_url | img_tag }}
```
```html:出力結果
<img src="//cdn.○○○.com/○○○/○○○.png" alt="" />
```

### aタグでのリンク設定
```javascript:Liquid
{{ 'お支払い方法' | link_to: 'https://○○○.com/○○○/','お支払い方法について' }}
```
```html:出力結果
<a href="https://○○○.com/○○○/" title="お支払い方法について">お支払い方法</a>
```

### CSSの読み込み
```javascript:Liquid
{{ '○○○.css' | asset_url | stylesheet_tag }}
```
```html:出力結果
<link href="//cdn.○○○.com/○○○/○○○.css" rel="stylesheet" type="text/css" media="all" />
```

### JavaScriptの読み込み
```javascript:Liquid
{{ '○○○.js' | asset_url | script_tag }}
```
```html:出力結果
<script src="//cdn.○○○.com/○○○/○○○.js" type="text/javascript"></script>
```

### liquidファイルのインクルード

```javascript:Liquid
{% include '○○○' %}
```
sectionsフォルダ内にあるものは

```javascript:Liquid
{% section '○○○' %}
```




### 変数
JavaScriptで変数を定義するのは`const`や`let`ですが、Liquidでは`assign`で変数を定義

```javascript:Liquid
{% assign hoge = 123 %}
```

### if

```javascript:Liquid
{% if 5 > 3 %}
// 処理
{% endif %}
```
### for
```javascript:Liquid
{% for item in array %}
    {{ item }}
{% endfor %}
```
DHHのクロスプラットフォームアプリ・アーキテクチャ

DHH（Ruby on Rails作者）による「Basecamp」スマホアプリのアーキテクチャ解説記事について、所感をメモ。

## 記事

>Basecamp 3 for iOS: Hybrid Architecture
>https://m.signalvnoise.com/basecamp-3-for-ios-hybrid-architecture/

## 所感

ざっくりいえば「画面遷移はネイティブ / 画面の中身はHTML」というように役割分担したアーキテクチャになっている（実際はもっと細かいが）。HTMLを使ったスマホアプリはUXが問題になりやすいが、これによってうまく回避している。

確かに静的なテキストや図、ちょっとしたUIなどを表示するだけであれば、HTMLもネイティブもほぼ区別はつかない。むしろWebフロントエンドのための数々のフレームワークを活用でき、ネイティブより早くきれいにできる場合すらある。しかし、ネイティブのインタラクションや画面遷移をHTMLが模倣することは難しい（AndroidのバックキーやiOSのスワイプバックの扱いの問題もある）。そこで画面遷移周りをネイティブに任せることで問題を回避している。

基本的にReact NativeやFlutter等のフレームワークは使わない構成ではあるが、フレームワークの寿命に引っ張られないで済む。iOSとAndroidからWebViewがなくならない限り可能な構成である。

Webアプリともコードが共通化できる利点もある。

また、ほかのアプリへ画面を移植しなければならない場合もやりやすいと考えられる。たとえば、「Unity製ゲームへ画面を移植してほしい」と依頼された場合、React NativeやFlutterで書かれた画面であれば、プロジェクト構成を大きくいじることになる。かなりの時間がかかってデグレもあり得る。しかし、HTMLで書かれていればWebViewで表示してあげればよく、デグレも起こりにくい。
Rails開発でのviewごとに個別にcssを呼び出す方法について

##概要

Railsでwebアプリケーション作成時にフロント部分で
「Viewごとに読み込ませるScssを分けたら開発しやすくなるのにな」と思い、
いろいろ調べてうまくいったのでメモ程度ですが残します。

##1.app/assets/stylesheets/application.cssを修正します。

Railsアプリでは、デフォルトでアセットに含まれているＣＳＳとJavaScriptは全て読み込むようになっています。
今回はViewごとに読み込ませるcssを分けたいので、CSSを全て読み込ませる設定を無効にします。

「*= require_tree .」を削除

app/assets/stylesheets/application.css

```:修正前

 *= require_tree .  #ここの'='を削除します
 *= require_self
 */

```

```:修正後

 * require_tree .  
 *= require_self
 */

```

##2.config/initializers/assets.rbに読み込むcssを設定します。
次に読み込むcssの設定を行います。

```rb:config/initializers/assets.rb

# scss個別読み込み設定
Rails.application.config.assets.precompile += %w(
	style.css
	common/*
	partial/*
	posts/index.css
	posts/new.css
 )

```

Dockerを使って開発しているので
設定を行ったあとはコンテナを再起動します。

```:ターミナル

$docker-compose down
$docker-compose up -d

```


##3.html.erbに読み込むcssを記述する。

```erb:app/views/layouts/application.html.erb

<%= stylesheet_link_tag 'common/navbar', :media => "all" %>

```

これでapp/assets/stylesheets/common/navbar.scssを読み込むようになりました。



##おまけ　~viewごとにスタイルを変えたい時~

viewごとに適用するcssを分けて記述したい時ってどうすればいいのか？
view(index.html.erb)に
先ほどの`<%= stylesheet_link_tag 'common/navbar', :media => "all" %>`ようにすると
bodyタグ内でcssの読み込みを行うことになるので、出来ないのではないか？
と思ったので調べてみました。

どうやら「content_for」を使うと良いみたいです。

###1.application.html.erbに<%= yield :css %>を追加します。

application.html.erbのheadタグ内に`<%= yield :css %>`を追加します。

```erb:application.html.erb

  <head>
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
    <title>Favrip</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <script src="https://kit.fontawesome.com/ad0b153fee.js" crossorigin="anonymous"></script>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%# ここを追記します。 %>
    <%= yield :css %>

  </head>

```

###2.読み込ませたいビューにcontent_forを使ってcssを指定します。

html.erbの一番上に以下を記述します。

```erb:index.html.erb

<% content_for :css do %>
	<%= stylesheet_link_tag 'posts/index' %>
<% end %>

```


以上で、viewごとにcssを読み込ませることができます。
【Ruby on Rails】条件合致する時のみ機能するバリデーションの実装

Ruby on Railsにおいて、ある条件に合致する時のみ機能するバリデーションを記述したい場面があり、解決するまでに時間がかかったため、ある条件に合致する時のみ機能するバリデーションの記述方法を下記に示します。

#### 概要
登録したいレコードのカラムXの値がaの時のみ有効になるバリデーションの記述

#### 具体例
下記例は、products tableのカラムpublic_flag(型：integer)の値が１の場合、
products tableのカラム商品名(name)、商品説明(description)、商品価格（price）の値が空では登録できないという制約を付与している例である。

下記の場合、public_flagの値が0の場合、商品名(name)、商品説明(description)、商品価格（price）の値が空でもproducts tableへ登録が可能である。
　※public_flag 1: 公開情報、0: 非公開情報

model（product.rb）

```ruby
 with_options presence:true, if: :isProductPublicable?  do |v|
   v.validates :name
   v.validates :description
   v.validates :price
 end

 #public_flagが1の時 true
 def isProductPublicable?
  public_flag == 1
 end
```
 
　with_optionsは複数のバリデーションをまとめてかけることができるオプションである。
　isProductPublicable?はカラムpublic_flagの値が1の場合、trueを返却する。
ローカルでWordPressのサイト制作環境

私は、これまでにXAMPPをMacに構築して、WordPressのサイトやPHPのアプリ開発をしてきました。
でも、ローカルで開発環境を作ると、フォルダ管理をきちんとしないと、起動ドライブを汚してしまうため、不要なファイルの削除など整理整頓に大変なので、cloud9を使うなど工夫してきました。

今回、再びローカルでWordPressのサイト制作環境を作りたいと思い、ネット検索したら新しいものを見つけました。

Local by Flywheelという無料のソフトウェアを知りました。
[初心者でも簡単にWordPressのローカル環境を構築する方法](https://bazubu.com/how-to-create-local-environment-23801.html)

[超簡単にローカル環境が構築できるLocalbyFlywheelの使い方](https://bazubu.com/local-by-flywheel-33920.html)

複数のサイトを同時に起動できる機能や、制作しているWordPressの公開URLを共有できる機能があるので、人気だそうです。

##実際に上記の参考記事を読んで使ってみた感想
LocalbyFlywheelのインストールが終わったら、WordPressのログイン画面が表示されました。
LocalbyFlywheelの際に入力したメールアドレスとパスワードを使い、ログインしました。

WordPressのダッシュボードは英語の設定のため、サイトの言語設定を日本語に切り替えました。
また、タイムゾーンもUTC+9に切り替えました。

![スクリーンショット 2020-08-23 20.58.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20977/fac02917-a167-149f-4282-22bc37896fd0.png)

WordPress専用の開発環境なので、ウェブサイト制作を初めて間が無い人でも容易に使うことができると思います。
プログラミング学習記録 Day4〜5

#今日の学習時間
Day4 1.5h
Day5 1.5h (トータル 8.0h)

#今日の学習内容
##デイトラ初級編 DAY9 HTML/CSSコーディング復習②
前回作ったLPサイトを、レッスン動画を見ずに自力コーディングで制作しました。
![screencapture-127-0-0-1-5500-2020-08-22-18_12_32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692520/12a6e88c-86f5-f6e0-e037-56f76c664b4b.png)
スマホ版のレスポンシブ対応も完了！

**お手本コードと答え合わせして気づいた相違点**
1.ディスクリプションの記述のし忘れ

```html:html
<meta name="description" content="ディスクリプションです。">
```

2.ファビコン設定し忘れ

```html:html
<link rel="icon" href="favicon.ico">
```

3.buttonタグにtypeを設定し忘れ

```html:html
<button type="submit" class="btn btn-register">無料ではじめる</button>
```

4.ナビメニューの項目の左側の余白をPaddingでつけてしまっていた。正解はmargin

目標は４時間と書いてありましたがトータル３時間でレスポンシブまで仕上げることができました！
色は見た目で近い色を選択したので若干違いますが、その他はパーフェクトピクセルで仕上げることができました。
所々立ち止まりましたが基本的には悩まずサクサクできたのではないかと思います。
Rails RSpecメモ

テストコード作成時の自分用メモです。

## Gemのインストール
RSpec, FactoryBot, Fakerのインストール

```ruby
# Gemファイルに必要Gemを追記。追記箇所には以下の通り
group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  gem 'rspec-rails'
  gem 'factory_bot_rails'
  gem 'faker'
end

#インストール
bundle install

# 必要ファイルの生成
rails g rspec:install
```

## ターミナルでテスト結果を可視化する設定を追加
```ruby
# アプリ直下、.rspecファイルに以下を追記
--format documentation
```

## テスト用ファイルの作成方法
```ruby
#モデル単体テスト
rails g rspec:model モデル名

#コントローラー単体テスト
rails g rspec:request コントローラ名

#結合テスト
rails g rspec:system テスト名
```

## FactoryBot：テストデータの作成
spec配下にfactoriesディレクトリをつくり、まとめておくと良い。
ファイル名は、モデル名.rbなど。以下userデータ作成用の場合

```spec/factories/users.rb
FactoryBot.define do
  factory :user do
    nickname {"test kome"}
    email {"kome@test.com"}
    password {"yyyyyy"}
  end
end
```

## FactoryBot：インスタンスの作成
テストファイルにてFactoryBotを使ってインスタンスを生成する

```ruby
#　インスタンスの生成のみ（テーブルに保存されてない, model.new的な感じ）
@user = FactoryBot.build(:user)

# インスタンスの生成＆保存（テーブルに保存される）
@user = FactoryBot.create(:user)
```

## Supportモジュールについて
よく行う処理はSupportモジュールとしてまとめておく。
spec配下にsupportディレクトリを作成しその配下にまとめる。
例えばユーザサインインの流れを以下のようにまとめられる。

```spec/support/sign_in.rb
module SignInSupport
  
  def sign_in(user)
    visit new_user_session_path
    fill_in 'Email', with: user.email
    fill_in 'Password', with: user.password
    find('input[name="commit"]').click
    expect(current_path).to eq root_path  
  end
  
end
```

supportモジュールを読み込むためにrails_helper.rbを以下のように書き換える

```spec/rails_helper.rb
# 以下コメントアウトされているので、コメントアウトをはずす
Dir[Rails.root.join('spec', 'support', '**', '*.rb')].sort.each { |f| require f }

# RSpec.configure do |config| に、　config.include モジュール名 を追記
RSpec.configure do |config|
  config.include SignInSupport
  # Remove this line if you're not using ActiveRecord or ActiveRecord fixtures
  config.fixture_path = "#{::Rails.root}/spec/fixtures"
 ~省略〜
end
```

## その他、テストコードでよく使われるメソッド
これまでの学習でよく使ったメソッド

| メソッド名 | 説明 | 例 |
|---|---|---|
|fill_in | フォームへ指定した値を入力 | fill_in 'Email', with: user.email|
|find | 指定した要素を取得。clickなどと合わせられる| find(要素).click|
|click_on| valueの値（テキストやテキストリンク）をクリック | click_on('ログイン')
|fixture_file_upload| インスタンスに画像をセットする|＠image = fixure_file_upload('テスト画像のパス')
|attach_file|type=fileのinput要素＝アップロード用のinput要素で画像をセットする| attach_file('name属性', 画像パス)|
【Angular】コンポーネントをリロードしたい

# Angularでコンポーネントのリロードをしたい
そう思ったことのある人は多いはず。

この記事では備忘録としてコンポーネントリロードをするための3つの手段をまとめます。

# ngOninitの呼び出す方法
何かのボタンを押した際に画面の初期表示メソッドを呼ぶシンプルなやり方。

```TypeScript:test.ts
this.ngOninit();
```

# routerを使う方法

```TypeScript:test.ts
constructor(private router: Router){
     // route reuse strategyのオーバーライド
     this.router.routeReuseStrategy.shouldReuseRoute = function(){
        return false;
     }

     this.router.events.subscribe((evt) => {
        if (evt instanceof NavigationEnd) {
           this.router.navigated = false;
           // ウィンドウトップへのスクロール
           window.scrollTo(0, 0);
        }
    });
}
```

ただし、routerを使っている他のところに影響がないかをチェックした方がいいです。

# app.routing.tsを編集する方法
まずapp.routing.tsを編集

```TypeScript:app.routing.ts
@ngModule({
 // reloadに設定する
 imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],
 exports: [RouterModule],
 })

// 中略

export const routes: Routes = [
 {
   path: 'invites',
   component: InviteComponent,
   children: [
     {
       path: '',
       loadChildren: './pages/invites/invites.module#InvitesModule',
     },
   ],
   canActivate: [AuthenticationGuard],

  // この行を追加 
  runGuardsAndResolvers: 'always',
 }
]
```
次にリロードしたいコンポーネントを編集

```TypeScript:test.ts
 //追加
 navigationSubscription;     

 constructor(
   private router: Router
 ) {
   this.navigationSubscription = this.router.events.subscribe((e: any) => {
     // NavigationEnd eventが起こった時に初期化メソッドを呼んで、リロードっぽく見せる。
     if (e instanceof NavigationEnd) {
       this.initialiseInvites();
     }
   });
 }

 // 好きな初期化メソッド
 initialiseInvites() {
   
 }
```

# 参考文献
- Simon McClive, "Simon McClive", <https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2>

- "Force reload/refresh current route with RouteReuseStrategy", <https://github.com/angular/angular/issues/13831>
Ruby 数値参照プログラム

自分用です
簡単な数値参照プログラムを作りました。
下記コード

```ruby:qiita.rb
m = gets.chomp
n = gets.to_i


room = []

n.times do
  count = gets.chomp
  room.push(count)
end

a = 0
count = n

while n > 0

  if ! (room[a]).include?(m)
    puts room[a].to_i
  else
    count -= 1
    if count == 0
      puts "none"
    end
  end
  n = n - 1
  a = a + 1
end
```

最初に変数mに参照元となる数値を入力。（文字データになってますけど）
それをもとに数値入力して当てはまらない数値だけ出力しています。

全てあてはまらなかった場合"none"と返します。

今回のif文は”あてはまらない”場合なので　if !という形で作りました。
又、文字列の方がinclude?で簡単に参照できると思ったので
最初に文字列で参照し、出力時に数値に変換するフローで
作ってみました。
webpackerをdocker, docker-compose上で利用する

> この記事は、https://newsdict.blogから移設しました。

## Description
　　railsのwebpackerをdocker-compose, docker環境で動作させる。

## Requirements
- gem rails 済
- 最新のyarnインストール済み ([最新のyarn install方法](https://github.com/newsdict/docker_rails/blob/master/Dockerfile#L24 "最新のyarn install方法"))

## Step
1. webpackerの設定を行う 
2. Dockerfile (docker) で puma + webpacker どちらも待ち受けるように設定する
3. javascript_pack_tagに置き換える
4. cssをwebpacker上で動作するようにする

### 1. webpackerの設定を行う (はじめからrails6系の場合は不要です)
1. Install webpacker
```
$ rails webpacker:install
```

### 2. Dockerfile (docker) で puma + webpacker どちらも待ち受けるように設定する 
1. rails s と webpackerどちらも起動できるEntrypoint 用のシェルをつくる [sample1](https://github.com/newsdict/newsdict.io/blob/master/src/provisioning/startup/web/startup.sh) [sample2](https://github.com/newsdict/newsdict.io/blob/master/src/provisioning/startup/bootstrap.sh) 
```
$ mkdir -p src/provisioning/startup/web
$ wget https://raw.githubusercontent.com/newsdict/newsdict.io/master/src/provisioning/startup/web/startup.sh -O src/provisioning/startup/web/startup.sh
$ mkdir -p src/provisioning/startup/
$ wget https://raw.githubusercontent.com/newsdict/newsdict.io/master/src/provisioning/startup/bootstrap.sh -O src/provisioning/startup/bootstrap.sh
```

2. Docker越しに待ち受けるためのwebpacker用ポートの設定などを行う

  **.envにIPを設定する (ブラウザからwebpackerにアクセスできるようにする) ** ([sample](https://github.com/newsdict/newsdict.io/blob/master/.env-sample))
```
# webpack-dev-server
WEBPACK_DEV_SERVER_PUBLIC=http://a.b.c.d:3035
```
  **Gemfileにdotenvを入れる**
```
$ echo "gem 'dotenv-rails', require: 'dotenv/rails-now'" >> Gemfile
$ bundle install
```
  **開発環境でのアセットをwebpackerに向ける** ([sample](https://github.com/newsdict/newsdict.io/blob/cf9bddd5b06139912c5ad2422c9fbc69b72c4560/config/environments/development.rb#L62))
```
config/environments/development.rb:
  if ENV['WEBPACK_DEV_SERVER_PUBLIC'].present?
     config.action_controller.asset_host = ENV['WEBPACK_DEV_SERVER_PUBLIC']
  end
```

  **webpackerの待ち受けるfqdnを設定する** ([sample](https://github.com/newsdict/newsdict.io/blob/cf9bddd5b06139912c5ad2422c9fbc69b72c4560/config/webpack/development.js#L15))
```
config/webpack/development.js:
const merge = require('webpack-merge')
module.exports = merge(environment.toWebpackConfig(), {
    devServer: {
        public: process.env.WEBPACK_DEV_SERVER_PUBLIC
    }
})
```

### 3. jsをwebpacker用のタグjavascript_pack_tagに置き換える (はじめからrails6系の場合は不要です)
[sample](https://github.com/newsdict/newsdict.io/blob/cf9bddd5b06139912c5ad2422c9fbc69b72c4560/app/views/layouts/application.html.erb#L15)

### 4. cssをwebpacker上で動作するようにする
1. cssをapp/javascript/cssに移動する ([sample](https://github.com/newsdict/newsdict.io/blob/cf9bddd5b06139912c5ad2422c9fbc69b72c4560/app/javascript/css/application.scss))

2. cssをwebpackerからimportする ([sample](https://github.com/newsdict/newsdict.io/blob/cf9bddd5b06139912c5ad2422c9fbc69b72c4560/app/javascript/packs/application.js#L11))

3. CSSの読み込み方法をwebpacker用のタグstylesheet_pack_tagに書き換える ([sample](https://github.com/newsdict/newsdict.io/blob/cf9bddd5b06139912c5ad2422c9fbc69b72c4560/app/views/layouts/application.html.erb#L9))
[itemlink post_id="49"]
【Flutter】image_picker バージョン0.6.7以降を使って画像を選択する

Flutterで画像を選択するといえば**image_picker**と言うパッケージを使いますよね。

しかしバージョンが0.6.7以降からクラスが変更になり、Webでの実装が可能になったそうです。

よって、image_picker 0.6.7以降の使い方をサンプルをもとに説明します。

## サンプル

FloatingActionButtonをタップして画像を選択すると、表示されるようなサンプルを作成しました。

![image_picker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311390/3a95b8a6-b117-8106-24c8-e60d9b2b2534.gif)


```dart
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

class SampleImagePicker extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _SampleImagePicker();
}

class _SampleImagePicker extends State<SampleImagePicker> {
  File _image;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('image_picker'),
      ),
      body: Center(
        child: _image == null ? Text('画像を選択してください') : Image.file(_image),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.photo_album),
        onPressed: () {
          getImage();
        },
      ),
    );
  }

//画像を取得する
  getImage() async {
    PickedFile pickedFile = await ImagePicker().getImage(
      source: ImageSource.gallery,
    );
    if (pickedFile != null) {
      setState(() {
        _image = File(pickedFile.path);
      });
    }
  }
}
```


## 説明
**0.6.7以前**は
```File image = await ImagePicker.pickImage(source: ImageSource.gallery);```
というコードで、画像をデバイスの画像ライブラリから取得することができました。

しかし0.6.7以降は

```dart
PickedFile pickedFile = await ImagePicker().getImage(source: ImageSource.gallery);
```

となります。`File`から`PickedFile`というクラスに変更しています。

```dart
_image = File(pickedFile.path)
```
このように、`PickedFile`の`path`で`File`に変換できます。


また
`getImage`のなかで
- `imageQuality`：画像のサイズ
- `maxWidth`：横の最大値
- `maxHeight`：縦の最大値
も指定できます(これは0.6.2 + 2以降）


最後に

- ビデオ取得

```dart
PickedFile video = await ImagePicker().getVideo(source: ImageSource.gallery);
```
汎用的なバックアップスクリプトを作りました。


Bash v4.*で動作する汎用バックアップスクリプトを作りました。
<a href="http://backup.github.io/backup/v4/installation/">gem</a>での実装や<a href="http://bakthat.readthedocs.io/en/latest/#">python</a>での実装はいろいろとあると思いますが、backupだけのために他の言語インストールとかするの面倒だったので、bashで実装してみました。

作成した bash-backup
<a href="https://github.com/newsdict/bash-backup">https://github.com/newsdict/bash-backup</a>

大まかな流れとして
<ol>
 	<li>dataのアーカイブ(tar.gz or tar.bz2 or zip)</li>
 	<li>mysqlのdump(現状mysqlのみだがもっと増やす予定)</li>
 	<li>1と２のアーカイブ(tar.gz or tar.bz2 or zip)</li>
 	<li>s3へのアップロード（世代管理あり）（現状s3のみだがもっと増やす予定）</li>
</ol>
docker-composeでwordpressをすぐに構築！

ブログを作る簡単でみんなが使っているものといえばwordpressだろう。
そこでコマンド数行でワードプレスが作成可能なdocker-compose用ファイルを作った。

<a href="https://github.com/yubele/docker_templates/tree/master/wordpress">https://github.com/newsdict/docker_templates/tree/master/wordpress</a>

以下構築手順である
<ol>
 	<li>docker, docker-composeのインストールを行う
参照) <a href="https://docs.docker.com/engine/installation/linux/ubuntu/">https://docs.docker.com/engine/installation/linux/ubuntu/</a></li>
 	<li>クローン及び初期設定を行う

[code lang="js"]
$ git clone git@github.com:yubele/docker_templates.git
$ cd docker_templates/wordpress
$ cp env.example .env
[/code]

</li>
 	<li>.envファイルを開いて自分用に設定を行う
<table data-tab-size="8">
<tbody>
<tr>
<td id="LC1">mysql_data_dir=/home/ubuntu/datas/mysql</td>
<td id="LC2">mysql用のデータを格納するディレクトリパス</td>
</tr>
<tr>
<td id="L2" data-line-number="2">doc_root=/home/ubuntu/datas/html</td>
<td id="LC2">wordpress用のhtmlを格納するディレクトリパス</td>
</tr>
<tr>
<td id="L3" data-line-number="3">database=wordpress</td>
<td id="LC3">データベース名</td>
</tr>
<tr>
<td id="L4" data-line-number="4">user=user</td>
<td id="LC4">mysqlユーザ名</td>
</tr>
<tr>
<td id="L5" data-line-number="5">password=pass</td>
<td id="LC5">mysqlパス名</td>
</tr>
<tr>
<td id="L6" data-line-number="6">ssl_certificate=/etc/ssl/cert.pem</td>
<td id="LC6">ssl_certificateファイルパス</td>
</tr>
<tr>
<td id="L7" data-line-number="7">ssl_certificate_key=/etc/ssl/key.pem</td>
<td id="LC7">ssl_certificate_keyファイルパス</td>
</tr>
</tbody>
</table>
</li>
 	<li>wordpressの最新版ソースをwordpress用のhtmlを格納するディレクトリに展開する

[code lang="js"]
$ wget https://ja.wordpress.org/wordpress-latest-ja.tar.gz
$ tar zxf wordpress-latest-ja.tar.gz
$ cp -r wordpress/* /home/ubuntu/datas/html/&lt;/li&gt;


&lt;li&gt;docker-composeを起動
$ cd docker-template/wordpress/
$ sudo docker-compose up -d
[/code]

</li>
 	<li>サーバに紐づけてあるドメインまたは、IPアドレスにアクセスし、以下のようにDBホスト名, DB名, DBユーザ名とDBパスワードを設定する
DBホスト名: mysql
DB名: .envで設定したdatabase名 (デフォルト: wordpress)
DBユーザ名: .envで設定したユーザ名 (デフォルト: user)
DBパスワード名: .envで設定したパスワード名（デフォルト: pass)</li>
 	<li>以上で快適なwordpressライフが訪れます。</li>
</ol>
※デフォルトでは80ポートへのアクセスは443へリダイレクトされます。変更する場合はdocker-template/wordpress/wordpress.confを編集してください。
※ドメインが1つの場合の構築方法なので、実行したホストの80, 443へアクセスしてきたものすべてに対してwordpressが表示されます。
※マルチドメインのテンプレートは、同レポジトリのmultiple-wordpressというディレクトリにあります。

&nbsp;
Spark で無名関数を使って集約関数を書く (RDD)


Apache Spark を相変わらず使っています。 大量のデータを要約するには sum や count, max などの集約関数が有効です。 ここで、集約関数に任意の関数が書ければ、データ処理の自由度は飛躍的に高まります。 しかし、関数型プログラマにとっての集約関数は単なる fold ですが、Spark (as of 3.0.0) だと [Aggregator を実装しろ](https://spark.apache.org/docs/latest/sql-ref-functions-udf-aggregate.html)とあります。

しかしチマチマ spark-shell を叩いているだけの私には、**単純な二項演算**で済むような集約関数にいちいち Aggregator を作るのは面倒です。（Excel なんかもそうですが、λが使えないとプログラムの表現能力が著しく制限されてしまいますね…。）

そこで調べてみると、　Dataset の下のレイヤの RDD には二項演算に相当する `Function2` を取る [aggregate](https://spark.apache.org/docs/3.0.0/api/java/org/apache/spark/rdd/RDD.html#aggregate-U-scala.Function2-scala.Function2-scala.reflect.ClassTag-) というメソッドがある！

```scala
org.apache.spark.rdd
Class RDD<T>
...
public <U> U aggregate(U zeroValue,
                       scala.Function2<U,T,U> seqOp,
                       scala.Function2<U,U,U> combOp,
                       scala.reflect.ClassTag<U> evidence$31)
```

… というわけで、RDD を経由すればユーザ定義の集約関数を Scala の無名関数で書くことができます。
例えば次の例は 0列目の整数値をビットごとの論理和で畳み込む例です：

```scala
scala> val t = spark.read.parquet("pds_parquet")
scala> t.rdd.aggregate(0)((i,r) => i | r.get(0).asInstanceOf[Int], _ | _)
res23: Int = 251163503
```

第1引数は初期値 0 です。一つ目の無名関数では `rdd` から0列目を取り出しつつビット毎ORの `|` で畳み込みます。`t.rdd` は `RDD[org.apache.spark.sql.Row]` という型なので、`r` は `Row` 型です。 第二引数はそれぞれの二項演算の結果を結合するだけなので `_ | _` で済みます。第3引数はなんか省略できています。

気になるのは、 `r.get(0)` とかいうインデックスによるアクセスなのがかっこ悪いですが RDD よく分からない。 また実行してみるとなんか期待より遅いですが、これで Aggregator を実装せず済んだので、まずは良しとします。




----

過去には User defined aggregate function というのがあったものの deprecated になってしまったそうです。ぐぬぬ

https://stackoverflow.com/questions/32100973/how-to-define-and-use-a-user-defined-aggregate-function-in-spark-sql
FuelPHPでの変数の受け渡し（Input getで）

viewからcontrollerへ変数を受け渡したい場合の方法

```view.php
<a href="<?php echo \Uri::segment_replace('/*/?hensuu='.'example'); ?>">
```

$exampleを受け取りたいcontroller

```controller.php
$get = \Input::get();
$hensuu = $get['hensuu'];//'example'が入る
```
[SwiftUI]プレビューをDark Modeにする

SwiftUIのプレビューでDark Modeを試したい時のメモです。

## ソース

```swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.init("Background")
                .edgesIgnoringSafeArea(.all)
            Text("Hello, World!")
                .foregroundColor(Color("TextPrimary"))
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .environment(\.colorScheme, .dark)
    }
}
```

ポイントは`.environment(\.colorScheme, .dark)`で指定しているところです。
通常は`.light`でダークモードは`.dark`を指定します。
切り替えることですぐに確認ができます。

ソースで使っている色については

- Backgroundは通常：白、ダークモード：黒
- Textは通常；黒、ダークモード：白

## プレビュー

通常モード
<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297014/eb5f2748-aa2a-0328-d078-9b78322e32fd.png">

ダークモード
<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297014/8cd2a206-bb84-bce8-fb64-52962ca882d9.png">
Tecent Cloud 音声通話サービスをWebで試した

## Tencent Cloudのご紹介
- Tencent CloudにはIaaS、Paas、SaaSに別れて、プロダクト数は２００以上
- アカウントは下記２種類
  - [中国サイト](https://cloud.tencent.com/)のアカウント：中国法人向け
  - [国際サイト](https://www.tencentcloud.com/jp/?lang=jp&pg=)のアカウント：グローバル向けけ

## TRTCについて
TRTCはTencent Cloudより提供するリアルタム音声ビデオ通話サービスです。各プラットホームのSDK（iOS/Android/Windwos(Browser and desktop app)/Mac(Browser and desktop app) ）を提供しいるので、簡単にアプリを作成できる。本記事はWeb SDKに基づく、Webのtrtcビデオ通話アプリのデモを紹介します。

## 手順
### 1. コンソールでアプリケーションの作成 
TRTCの[コンソール](https://console.cloud.tencent.com/trtc/)で「Develop Assistance」の「Demo Quick Run」をクリックして、そこで好みのアプリの名前を入力してから「Create Application」を押下すると、コンソールでアプリケーションの作成が完了！！！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633185/fc2ea24d-0f47-524e-8342-8559e56d03fc.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633185/f10bd1fc-8678-6d2c-f290-a2744c24ea98.png)

### 2. ソースコードの設定

- TRTC WebのDemoのソースコードをDownloadする。
  [Web Demo download](https://github.com/tencentyun/TRTCSDK)

- 「Application Management」で手順```1```で作成したアプリケーションの```SDKAPPID```と```SECREKEY```を確認できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633185/c43219c0-2965-bde2-25f8-106f2ce17e2d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633185/f7021c27-e30e-7233-d739-8204d8ba3e20.png)

- 上記の```SDKAPPID```と```SECREKEY```を先downloadしたソースコードの```TRTCSDK/Web/js/debug/GenerateTestUserSig.js```ファイルに設定する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633185/6ac9c635-e84d-d25a-70c4-66fbdc668096.png)

### 3. ローカルでChromeブラウザでの動作確認
ここまではアプリの設定が完了です。動作確認の場合は、直接にChromeで```TRTCSDK/Web/js/index.js```を開ければ、動作確認できる。2人で通話を試したい場合は、もう一つのブラウズで同じルーム番号にログインすれば、2人の通話を体験できます。（今回は便利のために、jsのソースコードをローカルで確認しますが、もちろんjsのソースコードをサーバにデプロイして、そのIPアドレスを経由してアクセスもできる。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633185/707a67e0-c095-6456-132d-4baca3a25428.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633185/400c3cdf-1eb8-7fec-0b20-4777c1cb724c.png)


同じブラウズで同じルームにログインした画面：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633185/148be1b3-590f-b7b1-7a78-631795927e73.png)


## 通話の詳細の確認
TRTCのコンソールで[Usage Statistics]のクリックすると、通話の時間や通話の詳細イベントなどを確認もできる。これは問題の調査に非常に便利だと思う。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633185/9c230443-d480-466b-c92b-b0acf7056b81.png)

## まとめ
2行のソースコードを叩くだけで、Tencent CloudでTRTC Web Demoを試した。非常に便利を感じた！！！
Rubyのformatメソッドで名前付きのフォーマットを使う

Rubyには、いわゆるフォーマット指定と呼ばれるやつに従って文字列を整形するメソッドがいくつかあります。

※ これらの書き方をするとRuboCopに怒られてしまったので、経緯をまとめました。

```ruby
# どれも "hoge = 1 + 2" と評価される
sprintf('hoge = %s + %s', 1, 2)
format('hoge = %s + %s', 1, 2)
'hoge = %s + %s' % [1, 2]
```

`format`と`sprintf`はどちらもKernelのメソッドで、名前が違うだけのエイリアスです。
https://docs.ruby-lang.org/ja/latest/method/Kernel/m/format.html

三番目の`String#%`は少し毛色が違いますが、self側をフォーマット指定の文字列とみなして`format`を呼んでいるだけで、実質的には同じことができるようです。
https://docs.ruby-lang.org/ja/latest/method/String/i/=25.html

## 推奨される書き方（スタイル）は？
この記事の記述時点では、RuboCopのデフォルト動作は「formatメソッドのみを認める」です。矯正させられます。

```
hoge.rb:3:18: C: Style/FormatString: Favor format over String#%.
'hoge = %s + %s' % [1, 2]
                 ^
```

さらに、伝統的な`%s`のようなスタイルは推奨されないという怒られ方をします。

```
hoge.rb:1:16: C: Style/FormatStringToken: Prefer annotated tokens (like %<foo>s) over unannotated tokens (like %s).
format('hoge = %s + %s', 1, 2)
               ^^
```

## 結局どう書けばいいのか

フォーマットの指定にアノテーション _\<name\>_ を付け、はめ込みたい値はHashで渡すスタイルが推奨されるようです。

```ruby
format('hoge = %<x>d + %<y>d', x: 1, y: 2)
```

ちなみに似た記法で _%{name}_ もありますが、推奨されないようです。指定子は明記しろってことですね。

```
hoge.rb:4:16: C: Style/FormatStringToken: Prefer annotated tokens (like %<foo>s) over template tokens (like %{foo}).
format('hoge = %{x} + %{y}', x: 1, y: 2)
               ^^^^
```

## なぜそのスタイルが推奨されるのか
RuboCopはスタイルをどれかに統一することを意図しているようで、デフォルトが`format`です。
https://www.rubydoc.info/gems/rubocop/RuboCop/Cop/Style/FormatString

元になっているissueは↓のようですが、難解な議論の末に決まったというよりは「あるといいんじゃない？」「いいね！」みたいなラフな経緯に見えます。デフォルトは決めの問題という以上の話ではないのかもしれません？

> Cop idea: Enforce preferred style for format string sequences #3438
> https://github.com/rubocop-hq/rubocop/issues/3438

_%\<name\>_ は _%{name}_ よりも良い、という主張については、The Ruby Style Guideを根拠にしているように見えます。

> When using named format string tokens, favor %<name>s over %{name} because it encodes information about the type of the value.
> https://rubystyle.guide/#named-format-tokens

## まとめ
Rubyでは、いわゆるprintf的な文字列整形メソッドが、いくつかのスタイルで提供されています。

現代的な、特にチーム開発でRubyを使用する場合には、RuboCopを導入することも多いと思います。その際に指定されるスタイルはどんなもので、どういった根拠に従っているかを、簡単にですがまとめました。
GCP Cloud Logging で使える特殊フィールド

# 特殊フィールドとは

Cloud Logging で予約されている jsonPayload 内のフィールド名。
Cloud Logging の UI に反映され見やすくなったり、検索しやすくなったりする。
(クライアントライブラリを利用していないアプリケーションのログも一部のみでも対応することで便利になるかもしれない)
また逆に意図せず利用しないように気をつける必要がある。

構造化ログについては [GCP Cloud Logging で構造化ログを扱う](https://qiita.com/yamagen0915/items/f963ab7652c30fa3dad3) を参照。

# 一覧

全体については [公式ドキュメント](
https://cloud.google.com/logging/docs/agent/configuration?hl=ja#special-fields
) を参照。
便利そうなものをいくつか抜粋して紹介。

## `severity`

ログの重要度

ログフィールドエクスプローラから検索できるようになる。
何も設定していない場合は default 等になっているはずなので、
ログレベルに応じたアイコン等もつき見やすくなる。


利用できる重要度については [LogSeverity](https://cloud.google.com/logging/docs/reference/v2/rest/v2/LogEntry?hl=ja#LogSeverity) を参照。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41330/53cc6009-16da-2135-1643-4e9db7571958.png)

## `message`

ログのメッセージ

ログの一覧に表示されるメッセージとして利用される。
またここに例外スタックトレースが登録されていると検出された場合 ErrorReporting にエラーとして保存される。


## `httpRequest`

リクエストに関する情報

メソッド、レスポンスステータス、ユーザーエージェント等を登録でき、
ログの一覧画面でもタグのように表示されるようになる。
登録できる項目については [HttpRequest](https://cloud.google.com/logging/docs/reference/v2/rest/v2/LogEntry?hl=ja#HttpRequest) を参照。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41330/f5b11ed5-97b4-94e4-d436-51c1004f5159.png)
【Linux】初心者が知るべきLinuxコマンドのリスト

## はじめ
　最近、Linuxを勉強し始めました。
　CUIを操作できるように、まずコマンドを覚えなければなりません。
　下記のコマンドはよく使われますので、まとめました。
　初心者の勉強や復習などに役立つと思います。

##Linux コマンド
####　1. コマンドのレファレンスマニュアルを表示するコマンド
|コマンド|意　味|使用例|
|---|---|---|
|man|コマンドのレファレンスマニュアルを表示する|$ man コマンド名|
|info|コマンドのレファレンスマニュアルを表示する|$ info コマンド名|

* ↑、↓、PgDn、PgUpを押せば、説明文章を画面をスクロールする。
* 「q」を押せば、コマンドの説明を終了する。

####　2. ファイル/ディレクトリを操作するコマンド名
|コマンド|意　味|使用例|
|---|---|---|
|ls|ファイルやディレクトリの情報を表示する|$ ls|
|touch|内容の入っていないファイルを新規作成する|$ touch ファイル名|
|cp|ファイルやディレクトリをコピーする|$ cp コピー元　コピー先|
|mv|ファイル・ディレクトリを移動する|$ mv 元のファイル(ディレクトリ) 変更後のファイル(ディレクトリ)名|
|  |ファイル・ディレクトリの名称を変更する|$ mv 元のファイル(ディレクトリ) 移動するディレクトリ|
|rm|ファイルやディレクトリを削除する|$ rm ファイル名|
|cat|ファイルを閲覧する|$ cat ファイル名|
|more|テキストファイルを1画面ずつ表示する|$ more ファイル名|
|head|テキストファイルの最初の10行を表示する|$ head ファイル名|
|tail|最後の10行を表示する|$tail ファイル名|
|wc|テキストファイルの行数や単語数（word count）、文字数を数える|$ wc テキストファイル名|
|ln|ディレクトリやファイルへのリンクを登録する|$ ln リンク元 登録名|
|whereis|パスを検索する|$ whereis コマンド名|
|find|ファイルやディレクトリ（フォルダ）を検索する|$ find ファイル名|
|grep|ファイルに特定の文字列が存在するか検索する|$ grep 検索文字列 ファイル名|
|pwd|操作しているディレクトリを表示する|$ pwd|
|cd|カレントディレクトリ（現在 作業中のディレクトリ）を移動する|$ cd ディレクトリ|
|mkdir|ディレクトリを新規作成する|$ mkdir ディレクトリ名|
|rmdir|ディレクトリを削除する|$ rmdir ディレクトリ名|
|tree|ディレクトリやファイルをツリー状に表示する|$ tree|

####　3. 情報を表示するコマンド
|コマンド|意　味|使用例|
|---|---|---|
|stat|属性や日付などを表示する|$ stat ファイル名|
|who|システムに誰がログインしているかを表示する|$ who|
|w|システムに誰がログインしているかを表示する|$ w|
|whoami|現在の実効ユーザー、id、に対応するユーザー名を表示する|$ whoami|
|hostname|ホスト名を表示する|$ hostname|
|uname|システム情報を確認する|$ uname|
|dmesg|カーネルのリングバッファの内容を表示・制御する|$ dmesg|
|top|現在実行中のプロセスをCPU利用率が高い順に表示する|$ top|
|du|ディスクの使用量をディレクトリごとに集計して表示する|$ du|
|df|ディスクの空き領域（freeスペース）のサイズを集計して表示する|$ df|
|free|メモリの利用状況を調べる|$free|
|ifconfig|ネットワークの接続状況が確認する|$ ifconfig|
|ping|指定したホストとの間でネットワークが疎通（そつう）しているかどうかを調べる|$ ping 接続先IPアドレスまたはホスト名|
|netstat|ホストのネットワーク接続状態やソケット・インターフェイスごとのネットワーク統計などを表示する|$ netstat|
|locale|現在のロケールと使用可能なロケールの情報を表示する|$ locale|
|id|識別情報を表示する|$ id ユーザー名|

##終わり
　以上は、よく使われるLinuxコマンドです。
　ファイルの圧縮、解凍のコマンドを記入してないです。
Rails カスタムバリデーション(validator, EachValidator)


#はじめに
今回はカスタムバリデーションについて、まとめれればと思います。

# カスタムバリデーター
モデルとは別で、自分でバリデータやバリデーションメソッドを作成することができます。`app/`配下にvalidatorsディレクトリ(`app/validators`)を作成することで、自動で読み込んでくれます。

# validator
ActiveModel::Validatorを継承するクラス。このクラスでは、validateメソッドを実装する必要があります。
クラス名に`規定はなく`、validateメソッドを実装する必要があり、
引数としてrecordを受け取ることができます。
このrecordというのは、バリデーション対象のモデルのインスタンスが入ります。



```ruby

class UserValidator < ActiveModel::Validator
  def validate(record)
    if record.id.present? && !User.exists?(id: record.id)
      record.errors[:name] << '対象のユーザーはいません'
    end
  end
end
```

### 呼び出し方法
```ruby

class User
  include ActiveModel::Validations
  validates_with UserValidator
end
```

# EachValidator
一つの属性に対してのカスタムバリデータを定義できる。ActiveModel::EachValidatorを継承したクラス。

クラス名は`<検証名>Validator`の形式で命名。validate_eachメソッドを実装する必要があります。 
validate_eachメソッドは引数として（`record`、`attribute`、`value`)の3つを受け取ります。

この引数の3つは
・`record` モデルインスタンス
・`attribute` 属性名
・`value` 属性値

`app/validators/user_name_validator.rb`

```ruby

class UserNameValidator < ActiveModel::EachValidator
  def validate_each(record, attribute, value)
      if value.empty? || value.count < 2
          record.errors[:attribute] << (options[:message] || "2文字以上で入力してください")
      end
  end
end
```

### 呼び出し方法
```ruby

validates :name, user_name: true
```
prototypeと__proto__

Javaに慣れたからちょっと理解しづらかった

## プロトタイプ

JavaScriptでは、全てのものがオブジェクト(またはそのインスタンス)である

そして、全てのオブジェクトは`prototypeオブジェクト`および`__proto__プロパティ`を持っている

* `__proto__`: これはポインタみたいなプロパティである。どこかの`prototype`を指している

* `prototype`: 子オブジェクトに継承させたいものをこの中に記述する。(インスタンスはこれを持たない)

    `prototype`もオブジェクトなので、その中にも`__proto__`プロパティがある

## プロトタイプチェーン

あるインスタンスから、メソッドを呼び出す時の話。

もしインスタンス自身にメソッドが見つからない場合、

そのインスタンスの`__proto__`プロパティから、どこかの`prototype`に辿り、その中で探す。

それでもない場合、さらにその`prototype`内の`__proto__`より、新たな`prototype`に辿り着く。

こうやって繰り返して、最終的に`__proto__ === null`となり、`undefined`が返される。

## 具体的な関係

```javascript
Object.prototype.__proto__ === null

Object.__proto__ === Function.prototype

// 生成したインスタンスの__proto__
(new Object()).__proto__ === Object.prototype



Function.prototype.__proto__ === Object.prototype

Function.__proto__ === Function.prototype

// 生成したインスタンスの__proto__
(new Function()).__proto__ === Function.prototype



Array.prototype.__proto__ === Object.prototype

Array.__proto__ === Function.prototype

// 生成したインスタンスの__proto__
(new Array()).__proto__ === Array.prototype
```

### 自作コンストラクタで生成したインスタンス

例えば下のようなコンストラクタでインスタンスを生成したとする

```javascript
function Person(name){
    this.name = name;
}
const person = new Person("yuki");
```

関係性は以下のようになる

```javascript
person.__proto__ === Person.prototype
Person.prototype.constructor.__proto__ === Function.prototype
Person.prototype.constructor.prototype === Person.prototype
```

### `Object.create()`で生成したインスタンス

`Object.create()`を使ってもインスタンスを生成できる

```javascript
const anotherPerson = Object.create(person);
```

このとき、`anotherPerson.__proto__`が参照しているのは、`person`インスタンスとなる

つまり、`person`に何かを追加すれば、`anotherPerson`もそれを使える(`anotherPerson.__proto__`で探す)

`Person.prototype`に追加して、`anotherPerson`でも使える(`anotherPerson.__proto__.__proto__`で探す)

### `=`で生成したインスタンス

```javascript
const person01 = person
```

`Object.create()`と違って、`person01.__proto__ === person.__proto__ === Person.prototype`

## コンストラクタ

コンストラクタ関数の値は、`prototype`内の`constructor`プロパティに保存されている

インスタンスからは、`インスタンス.constructor`でアクセスできる(実際は`インスタンス.__proto__.constructor`)

こういうことを利用して、インスタンスからコンストラクタを入手し、それで新しいインスタンスを生成できる

```javascript
const person02 = new anotherPerson.constructor("abc");
person02.__proto__ === Person.prototype    // true
```

`anotherPerson.__proto__`が参照しているのは、`person`インスタンス

しかし、`constructor`というプロパティは`anotherPerson`にも`person`にもなく、

結局`Person.prototype`まで探しに行ったので、`person02.__proto__ === Person.prototype`がtrueとなる

### constructor.name

`インスタンス.constructor.name`で、コンストラクタ関数の関数名を取得できる

## プロトタイプの変更

コンストラクタ関数の`prototype`プロパティを変更すれば、

コンストラクタから作成されたすべてのオブジェクトインスタンスで使用可能になる

ただし、`prototype`に追加した関数内部で、メンバのプロパティを利用したいなら、

`this`キーワードを使う必要がある

## 参考記事
[Object のプロトタイプ](https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/Object_prototypes)
[図で理解するJavaScriptのプロトタイプチェーン](https://qiita.com/howdy39/items/35729490b024ca295d6c)
[JavaScriptのプロトタイプチェーンを深堀りする](https://qiita.com/nb_tomo/items/beb9203a3ba6a5ce05e1)
[JavaScript のプロトタイプを理解する](https://qiita.com/TsuyoshiUshio@github/items/4d37158c2f574b9c2de4)
[JavaScriptのプロトタイプからオブジェクト指向を学ぶ](https://qiita.com/takeharu/items/809114f943208aaf55b3)
deviseを使う際のメモ

Deviseの導入手順などの自分用メモです。

## インストール
``` Ruby
#以下をGemファイルに追記
gem devise

#Gemのインストール
bundle install

#devise設定関連ファイル生成
rails g devise:install
```

## モデル、マイグレーションファイルの生成
```ruby
# モデル、マイグレーションファイルの生成。必要であればカラムを追加する
rails g devise user

# マイグレーション
rails db:migrate
```

## コントローラー作成
```ruby
# コントローラーの作成(new, create等のアクションはdevise側で用意されているので、Editなど必要なアクションを追加
rails g controller users
```

## ルート設定
```app/config/routes.rb
#以下が自動で入っている
devise_for :users

#必要に応じてルートを設定
resources :users, only: [:edit, :update]
```
## テーブルにカラムを追加した際はストロングパラメターを使えるようにしておく
・before_actionでautenticate_user!を指定する。セットしておくだけでログイン状態を判断し、ログインしていないユーザはサインイン画面へ遷移されるようになる
・devise_parameter_sanitizerメソッドをprivate以下に定義し、before_actionに指定する

```app/controller/application_controller.rb
class ApplicationController < ActionController::Base
  # ユーザがログイン状態かどうか判断する
  before_action :authenticate_user!
　#private以降が最初に実行されるようにbefore_actionで指定する&ifオプションでdevise動作時のみを指定
  before_action :configure_permitted_parameters, if: :devise_controller?

  private

  def configure_permitted_parameters
　　 # devise parameter sanitizerメソッド。(:deviseアクション名, keys:[：キー名])
    devise_parameter_sanitizer.permit(:sign_up, keys: [:name])
  end
  
end
```

## 追加カラムのバリデーション設定
例えばnameカラムを追加した場合。。validatesを追加

```app/models/user.rb

class User < ApplicationRecord
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable

  #上記devise:~はモデルを作った時に自動で作成されている。カラムを追加した場合は、以下を追記。
  validates :name, presence: true
end
```

## deviseViewファイルのコピー
deviseのビューファイルをapp/viewsにコピーし編集できるようにする

```ruby
rails g devise:views
```

## その他メモ：deviseの処理名

|処理名 |説明 |
|---------|---------------------|
|:sign_in |サインイン（ログイン）の処理 |
|:sign_up |サインアップ（新規登録）の処理|
|:account_update|登録情報更新の処理|

## その他メモ： current_user、sign_inメソッド
・current_userメソッド：現在のユーザ情報を取得できる
・signed_inメソッド：ログインの状態を取得できる
[python]pdf からテキストを抽出して、Open-Jtalkで文字を読み上げる



PDFのテキストを抽出する
[PythonのpdfminerでPDFのテキストを抽出する方法を現役エンジニアが解説【初心者向け】](https://techacademy.jp/magazine/22374)

```
$pip install pdfminer.six
```

```.py
from pdfminer.pdfinterp import PDFResourceManager, PDFPageInterpreter
from pdfminer.converter import TextConverter
from pdfminer.layout import LAParams
from pdfminer.pdfpage import PDFPage

input_path = '抽出したPDFのパス'
output_path = 'result.txt'

manager = PDFResourceManager()

with open(output_path, "wb") as output:
    with open(input_path, 'rb') as input:
        with TextConverter(manager, output, codec='utf-8', laparams=LAParams()) as conv:
            interpreter = PDFPageInterpreter(manager, conv)
            for page in PDFPage.get_pages(input):
                interpreter.process_page(page)
```


Open JTalkのインストール
-

[Pythonで音声を操作する方法](https://se.miyabikno-jobs.com/python-audio/)
[Pythonでテキストを読み上げる方法](https://se.miyabikno-jobs.com/python-read-text/)
以上2つのサイトを参考にさせて頂きました（というかほぼそのままです...）ありがとうございます。

Open JTalkのversionを1.11に書き換えました。

より人間っぽく読み上げるには以下のような記事を参考にすると良さそうです。
[読み上げBotが感情を持ちました](https://qiita.com/Sashimimochi/items/aad6bcfa2d6096212d4c)
【onClick属性】個性のあるボタンをクリックして、イベント発生させる【JavaScript】


#要素をクリックしたら、関数を発生させる

```javascript

// 基本形
<input onClick="関数()">
```

###いくつかあるボタンの中でも、ナンバー1の確認ボタンを押した時の挙動を設定する

```html
<input type="button" onClick="kakunin(1)">
<input type="button" onClick="kakunin(2)">
<input type="button" onClick="kakunin(3)">
```

```javascript

function kakunin(number){
  if(number == 1){
    location.html = "/users"
  }
}
```

ナンバー1の確認ボタンをクリックした時だけ、/usersに飛ぶように設定できる



#DOM操作によって生まれた要素に、個性を与える

生み出されたボタンごとに、イベント内容を変えたいときに使える。

```javascript:jQuery

attr('onClick', 'openDialog(kakunin.id)')
```

openDialog()の引数が変わるので、それぞれ取得できる。
ファイルを実行しているshellの種類を正しく判定する

ドヤ記事にすれば、もっといい方法をドヤってくれるshell芸達者が現れるはず！というきたない根性で書き残します。

# やりたいこと
ubuntu(デフォルトがbash）で`sh test.sh`を実施した時に`sh`で実施された事を検知したい。
同様に、`zsh test.sh`と実施した場合は`zsh`を得たい。

# 結論
``` test.sh
#!/bin/sh
ps h -p $$ -o comm  # 期待する結果を得られる

# echo ${SHELL##*/}   # 検証用：何をやってもbashが返ってくる
```

実行時に

- `sh test.sh`  # sh
- `bash test.sh`  # bash
- `zsh test.sh`  # zsh

を取得できる。

# psコマンドのオプションについて
- `h`: ヘッダーを非表示
- `-p`: 対象をPIDで指定
- `$$`: sh実行中のPID
- `-o`: 抽出。COMMANDはcomm（ここの情報が見つからなかった）

# `$SHELL`について
$SHELLで得られる結果はターミナルでログイン中のシェル（親シェル）であるため、shファイル内に互換性のない書き方をしている場合は何らかのフォローを検討するのが親切。
`chsh $(which zsh)`などで親シェル自体を変えてしまう方法もあるが、一つのスクリプトを実行するためだけにいちいち変更するのも手間がかかる。

# 反省（後記）
最初から`man ps`を読めばこんなにハマらなかった。
`ps --help`が使えないので諦めていたが、helpがダメならmanがあるよ、という灯台下暗し。
CIImageをCVPixelBufferに

CIImageをCVPixelBufferにします。

１、CVPixelBufferをつくります。

```swift
var pixelBuffer: CVPixelBuffer?
let attrs = [kCVPixelBufferCGImageCompatibilityKey: kCFBooleanTrue,
             kCVPixelBufferCGBitmapContextCompatibilityKey: kCFBooleanTrue] as CFDictionary

let width:Int = 256
let height:Int = 256
//　欲しいサイズ

CVPixelBufferCreate(kCFAllocatorDefault,
                    width,
                    height,
                    kCVPixelFormatType_32BGRA,
                    attrs,
                    &pixelBuffer)
```

2,CVPixelBufferにCIImageをレンダリングします。　

```swift
let context = CIContext()
context.render(ciImage, to: pixelBuffer!)
```

extensionにしておくと、CIImage.pixelBuffer( )でかんたんにPixelBufferを取得できます。

```swift
extension CIImage {
    func pixelBuffer(cgSize size:CGSize) -> CVPixelBuffer? {
        var pixelBuffer: CVPixelBuffer?
        let attrs = [kCVPixelBufferCGImageCompatibilityKey: kCFBooleanTrue,
                     kCVPixelBufferCGBitmapContextCompatibilityKey: kCFBooleanTrue] as CFDictionary
        let width:Int = Int(size.width)
        let height:Int = Int(size.height)

        CVPixelBufferCreate(kCFAllocatorDefault,
                            width,
                            height,
                            kCVPixelFormatType_32BGRA,
                            attrs,
                            &pixelBuffer)

        // put bytes into pixelBuffer
        let context = CIContext()
        context.render(self, to: pixelBuffer!)
        return pixelBuffer
    }
}
```


****
Core MLを使ったアプリを作っています。
機械学習関連の情報を発信しています。

[Twitter](https://twitter.com/JackdeS11)
[MLBoysチャンネル]
(https://www.youtube.com/channel/UCbHff-wfjTnB3rtXIP6y0xg)
[Medium](https://medium.com/@rockyshikoku)

[相棒](https://twitter.com/oka_yuuji)
[note](https://note.com/oka_yuuji)