OmniAICreator/Qiita-1.07M huggingface dataset:
【注文機能】rails 注文機能実装　確認画面も作成します〜

##【ゴール】
モデルの情報を検索できる検索窓の作成

##【メリット】
■　UXの向上
■　MVC理解度向上


##【開発環境】
■ Mac OS catalina
■ Ruby on Rails (5.2.4.2)
■ Virtual Box:6.1
■ Vagrant: 2.2.7

##【実装】

####アプリケーション作成
※前回の「form_with」の反復練習も込めて「scaffold」封印。
※モデル、コントローラーは指定して作成しておく

```mac.terminal
$ rails new search
$ rails g model Item name:string text:text price:integer
$ rails g controller items
$ rails g model Order quantity:integer amount:integer item:references
$ rails g conrtroller orders show confirm 
$ rails db:migrate
```

#### モデルを編集
※ item : order = 1 : 多
※oredrに関してはデータ型**「references」**を使用しているのでアソシエーションを自動作成

```models/items.rb
has_many :orders
```

#### ルートを編集
※ネストさせます
※itemの中にorderを入れることによりitem_idの取得を簡単に!!
※確認画面**「confirm」**はHTTPメソッドは**「POST」**で!!

```config/routes.rb
root 'items#index'
  resources :items do 
    get 'order' => 'orders#show'
    post 'order/confirm' => 'orders#confirm'
    post 'order' => 'orders#create'
  end
```

####ビューを追記

```items/index.html.erb
<h2>アイテム一覧</h2>

<% @items.each do |item| %>
  <%= item.name %>
  <%= item.text %>
  <%= item.price %>
<% end %>

<h2>アイテム作成</h2>

<%= form_with modle: @item do |f| %>
  <%= f.text_field :name %>
  <%= f.text_area :text %>
  <%= f.text_field :price%>
  <%= f.submit %>
<% end %>
```

```order/show.html.erb
<h2>注文画面</h2>

<p>アイテム情報</p>
  <%= @item.name %>
  <%= @item.price %>

<%= form_with ([model: @item, @order],local: true url: item_order_confirm_path) do |f| %>
  <%= f.text_field :quantity %> <br>
  <%= f.text_field :amount %> <br>
  <%= f.submit "送信" %> <br>
<% end %>
```

※**「hidden_field」**で情報を隠してDBへ送信

```order/confirm.html.erb
<h2>注文確認画面</h2>
  <%= @order.amount %>
  <%= @order.quantity %>
  <%= @item.name %>
  <%= @item.price %>
<%= form_with model:[@item, @order], url:(item_order_path) do |f| %>
  <%= f.hidden_field :amount %>
  <%= f.hidden_field :quantity %>
  <%= f.submit %>
<% end %>
```

##コントローラーを編集
※itemの情報をネストしているので、**「params[:itm_id]」**で取得可能

```orders_controller.rb
  def show
    @item = Item.find(params[:item_id])
    @order = @item.order.new
  end

  def confirm
    @item = Item.find(params[:item_id])
    @order = @item.order.new(order_params)
  end

  def create
    @item = Item.find(params[:item_id])
    @order = @item.order.new(order_params)
    @order.save
    redirect_to items_path
  end

  private
  def order_params
    params.require(:order)
    .permit(:amount,
            :quantity,
            :item_id)
  end
```

以上です。

##【合わせて読みたい】
■form_withに関して
https://qiita.com/tanaka-yu3/items/50f54f5d4f4b8dfe19f3

■確認画面表示に関して
https://qiita.com/tomoharutt/items/7959d28764912c64562f
EC2 MySQL5.7 コマンド一覧

# ◯MySQLにログイン
```
mysql -u root -p
```
# ◯MySQLにログイン後、よく使う操作

```
#データベースの確認
mysql> show databases;

#ユーザーの確認
mysql> SELECT host, user FROM mysql.user;

#ユーザーの権限確認（データベースに現在接続しているユーザの権限が表示される）
mysql> SHOW GRANTS;

```
# ◯my.cnfの設定

- 編集
-  
```
sudo vi /etc/my.cnf
```
- 閲覧
-
```
sudo cat /etc/my.cnf
```

# ◯EC2（本番環境）でのMySQLの起動、停止、ステータス

- 起動
-
```
sudo service mysqld start
```
- 停止
-
```
sudo service mysqld stop
```
- ステータス
-
```
sudo service mysqld status
```

#◯エラーログの確認
```
sudo cat /var/log/mysqld.log
```
- 警告レベル分け

```
[Error]・・・エラー
[Warning]・・・警告
[Note]・・・注意
```
- その他ログの確認
https://qiita.com/toshihirock/items/a97d174be68f485fbbf2

#◯database.ymlの設定

```
cd 自分のアプリケーションのディレクトリに移動
vi config/database.yml
```
Vue.jsのディレクトリ構成を考える

## この内容について
この記事の内容は、Vue.jsを使っていくにあたって、
ディレクトリ構成に悩んでいる方の参考になればと思い書いています。

## 初期のディレクトリ構成
vue createでカスタムせずインストールすると、
下記のようなディレクトリ構成となると思います。

```
- VueApp
    - node_modules
    - public
        - favicon.ico
        - index.html
    - src
        - assets
        - components
            - HelloWorld.vue
        - App.vue
        - main.js
    - babel.config.js
    - package-lock.json
    - package.json
    - README.md
```

こんな感じですが、URLによって画面遷移したりしたいので、Vue Routerを使います。

## Vue Routerを使ったディレクトリ構成

Vue Routerのインストールはしてください。

```terminal:ターミナル
npm install vue-router
```

そして、色々再編成した、ディレクトリ構成がこちらです。

```
- VueApp
    - node_modules
    - public
        - js
        - styles
        - favicon.ico
        - index.html
    - src
        - assets
            - images
        - components
        - pages
        - App.vue
        - main.js
        - router.js
    - babel.config.js
    - package-lock.json
    - package.json
    - README.md
```

- public以下にjsフォルダとstylesフォルダを追加しました。
    - ここにjsファイルとcssファイルをおきます。
- src/assets以下にimagesフォルダを追加しました。
    - ここに画像をおきます。フォントや動画を使う場合は、fontフォルダとvideoフォルダを追加する。
- src以下にpagesフォルダを追加しました。
    - ここにそれぞれのページで使うvueファイルをおきます。
- src以下にrouter.jsを追加しました。
    - ここにVue Routerでページの割り振りをします。

## まとめ
この記事が良いと思った方は、LGTMをしていただければ嬉しいです！
フォローも是非お願い致します(^^)
RailsAdmin設定ファイル変更後に自動再読み込み　

## 概要
`rails_admin` の設定ファイル `rails_admin.rb` を編集すると自動で `rails_admin.rb` を再読み込みし、変更を反映させる。

## 環境
- `Rails (5.1.5)`
- `rails_admin (1.3.0)`


## 方法
`config/initializers/rails_admin_reload.rb` ファイルを追加

```ruby
# See also: https://github.com/sferik/rails_admin/wiki/How-to:-Reloading-RailsAdmin-Config-Automatically#alternative-method-for-the-railsadmin-versions-that-does-not-extend-applicationcontroller
Rails.application.config.to_prepare do
  RailsAdmin::ApplicationController.class_eval do
    before_action :reload_rails_admin, if: :reload_rails_admin? # Reloading RailsAdmin Config Automatically

    RAILS_ADMIN_FILE_PATH = "#{Rails.root}/config/initializers/rails_admin.rb" unless defined?(RAILS_ADMIN_FILE_PATH)

    class << self
      def fetch_rails_admin_file_updated_time
        File::Stat.new(RAILS_ADMIN_FILE_PATH).mtime
      end
      attr_accessor :__file_timestamp
    end
    @__file_timestamp = fetch_rails_admin_file_updated_time

    def reload_rails_admin
      RailsAdmin::Config.reset

      load(RAILS_ADMIN_FILE_PATH)
    end

    def reload_rails_admin?
      return false unless Rails.env.development?
      begin
        file_updated_at = RailsAdmin::ApplicationController.fetch_rails_admin_file_updated_time
        has_changed = file_updated_at != self.class.__file_timestamp
        return has_changed
      ensure
        self.class.__file_timestamp = file_updated_at
      end
    end
  end
end

```
PyAutoGUIのFAILSAFEモードはTrue、Falseどちらにすべきか

#本稿の投稿経緯
1年ほど、pyautoguiを利用した自動化ツールを運用した結果、FAILSAFEモードについて思うところがあったので、投稿。

#PyAutoGUIとは
マウス操作、クリック操作、キーボード操作などを自動化するpythonライブラリです。(pyautogui自体の説明は他にたくさんの記事が投稿されているので省きます)

```ruby:例
import pyautogui as gui

gui.vscroll(-100)
gui.click(100,100)
gui.hotkey("ENTER")
```

[処理の内容]
モニターの左上を基準x=0,y=0として、100ピクセル分下にスクロールする。
x=100、y=100の位置をクリックする。
ENTERを押下する。

といった動きが自動で実行されます。

#FAILSAFEモードとは
pyautoguiは自動化を実現しますが、あくまできめられた操作を実行するだけであって、実際の画面上の動作との兼ね合いは、実装者側で検討しなければなりません。

たとえば、何かのexeを実行したが、exeが開くのに時間がかかってしまっている間に次の処理が実行されてしまい、予期していない箇所をクリックされ、想定とまったく違う動作のまま処理が進んでしまう、といったことが往々にしてあります。

そのような時に、緊急停止用に用意されているのがFAILSAFEモードになります。画面の左上にマウスを移動させるとFAILSAFEモードが起動し、プログラムが停止します。なお、pyautoguiでは、FAILSAFEモードはTrueにしておくのを推奨しています。

```ruby:設定値
#緊急停止ON　デフォルトでは、ONなので、記述しなくてもよい
gui.FAILSAFE=True 
#緊急停止OFF
gui.FAILSAFE=False
```

じゃあTrueにしておくのがいいんじゃないのか？という考えもありますが、場合によって設定すべき項目があると、自動化ツールを運用して感じたので、その内容を記載していきます。

なお、そもそも自動化したい内容に画面の左上にマウスポインタがを移動させる必要があるというのであれば、Falseにせざるを得ないので、そういった場合を除いたケースで検討します。

#設定すべき値
###【開発～テスト期】
推奨設定：**True**
理由：開発・テスト時はプログラム自体が誤っており、想定外の処理をしてしまう可能性が高いので、いつでも停止できるようにTrueにしておくべきです。

###【運用期～自動化専用端末の場合～】　
推奨設定：**True**
理由：運用期であれば、自動化動作が安定しているので、Falseでもいいのですが、マウスポインタが左上に行ってしまったということは、想定外の動作がすでに起きているので、Trueで後続の処理を停止させ、想定外動作の内容を確認するべきです。

###【運用期～自動化以外の用途でも使う端末の場合～】
推奨設定：**False**
理由：例えば、自作業→閉め処理(自動)といったような順番で作業をしている時、自作業の終了時にマウスポインタの位置を確認するということはしないと思います。たまたま左上にマウスポインタがあって終わってしまった場合、閉め処理(自動)が、実行時点でFAILSAFEモードが発動してしまうということが起きてしまいます。これを防ぐためにFalseにすべきです。

では、Falseの時に、予期せぬ動きが発生してしまった場合はどうするかというと、try ~ exceptで停止処理等を仕込むしかありません。まぁTrueにしていてもtry～excpet処理は、入れておくべきなので、さほど気にすることはないと思います。

#最後に
本検討は、あくまで投稿者が考える設定値なので、他にご意見があれば参考にさせて頂きたいです。
IBOutletのwillSetで他のIBOutletを参照してはいけない(Swift)

名前と名字のラベルからフルネームのラベルのテキストをセットする処理を考えます。
（わかりやすさのために `.text` を強制アンラップしています）

```swift:×
import UIKit

final class FooViewController: UIViewController {
    @IBOutlet private weak var firstNameLabel: UILabel!
    @IBOutlet private weak var familyNameLabel: UILabel!
    @IBOutlet private weak var fullNameLabel: UILabel! {
        willSet {
            newValue.text = "\(firstNameLabel.text!) \(fullNameLabel.text!)"
        }
    }
}
```

このように記述した場合、以下のエラーが発生することがあります。

```
Fatal error: Unexpectedly found nil while implicitly unwrapping an Optional value: file /.../FooViewController.swift, line 8
```

`firstNameLabel` または `familyNameLabel` の初期化前に、 `fullNameLabel` の `willSet` 内の処理が実行されたのが原因です。

`IBOutlet` の初期化順は、変数名または内部的に持っているIDで決まります。
（変数をリネームしたら初期化順が変わったので間違いないです）
そのため、 `IBOutlet` の `willSet` 内で、他の `IBOutlet` を参照する処理を実行するのはやめましょう。
私が試したときは `didSet` だと実行時エラーにならなかったのですが、同様に避けるべきだと思います。

他の `IBOutlet` を参照したい場合、素直に `viewDidLoad()` で実行するのがベターです。

```swift:○
import UIKit

final class FooViewController: UIViewController {
    @IBOutlet private weak var firstNameLabel: UILabel!
    @IBOutlet private weak var familyNameLabel: UILabel!
    @IBOutlet private weak var fullNameLabel: UILabel!
    
    override func viewDidLoad() {
        configureFullNameLabel()
    }
    
    private func configureFullNameLabel() {
        fullNameLabel.text = "\(firstNameLabel.text!) \(fullNameLabel.text!)"
    }
}
```

私は `delegate` や `dataSource` を `willSet` 内で紐付けがちですが、それもこれからはやめようと思います。

最後に、もし `IBOutlet` の初期化順を決める方法があれば教えてほしいです笑
11.2 アカウント有効化のメール送信: Railsチュートリアル備忘録 - 第11章

## 11.2 アカウント有効化のメール送信

### 11.2.1 送信メールのテンプレート

`rails generate`でメイラーを生成可能
(`password_reset`はあとで使う）

```
$ rails generate mailer UserMailer account_activation password_reset 
```

生成物が以下

```
      create  app/mailers/user_mailer.rb # ここにアクションのようなものを定義する
      invoke  erb
      create    app/views/user_mailer
      create    app/views/user_mailer/account_activation.text.erb # メールのレイアウト（テキスト）
      create    app/views/user_mailer/account_activation.html.erb # メールのレイアウト（html）
```

レイアウトにはERBが使える
*つまり**インスタンス変数**や**urlヘルパー**`edit_account_activation_url`が呼べる*

```ruby
edit_account_activation_url(@user.activation_token, email: @user.email)
```

と2つ引数を取ると
以下のようなパスを返す

```
/account_activations/(第1引数)/edit?(第2引数)
```

?以下は**クエリパラメータ**と呼ばれ
`?email=...`とキーと値のペアで記述される
*このときURL表記に使えない記号は自動的にエスケープしてくれる*

ビューファイルは上記urlヘルパーが埋め込まれるようにする

ビューファイルで使用する**インスタンス変数**や**送信先**、**タイトル**は
app/mailers/user_mailer.rb`に定義する

```
  def account_activation(user)
    @user = user
    mail to: user.email, subject: "Account activation"
  end
```



### 11.2.2 送信メールのプレビュー

手順どおりすすむと
ブラウザでプレビューできるようになる



### 11.2.3 送信メールのテスト

以下にすでにテストが記述されているのが
`$ rails test` > (RED)の原因

```
test/mailers/user_mailer_test.rb
```

```ruby
require 'test_helper'

class UserMailerTest < ActionMailer::TestCase
  test "account_activation" do
    mail = UserMailer.account_activation
    assert_equal "Account activation", mail.subject
    assert_equal ["to@example.org"], mail.to
    assert_equal ["from@example.com"], mail.from
    assert_match "Hi", mail.body.encoded
  end
.
.
.
end
```

*正しくテストが行われるために
テスト環境のドメインホストを設定する必要がある*

```ruby:config/environments/test.rb
Rails.application.configure do
  .
  .
  .
  config.action_mailer.delivery_method = :test
  config.action_mailer.default_url_options = { host: 'example.com' } #テスト環境のホストを設定
  .
  .
  .
end
```

`$ rails test` > (GREEN)となるはずですが
*`password_reset`のほうがfailureのまま*

```ruby
    assert_equal ["noreply@example.com"], mail.from
```

を修正したら

`$ rails test` > (GREEN)となりました



### 11.2.4 ユーザーのcreateアクションを更新

`create`アクションを変更

- `UserMailer.account_activation(@user)`でメールを送信
- flashメッセージを変更
- この時点でログインしないようにする
- リダイレクト先を変更

```ruby
	def create
    @user = User.new(user_params)
    if @user.save
      UserMailer.account_activation(@user).deliver_now
      flash[:info] = "Please check your email to activate your account."
      redirect_to root_url
    else
      render 'new'
    end
  end
```

挙動が変わるので`$ rails test` > (RED)となる
任意の出力を取り出すラッパー関数 [#matlab]

# 概要

MATLABでは関数の複数出力をインラインで取り出す方法がありません。
複数出力を取り出す際は1行使って次のように書くのが通例です。

```matlab 
>> [A, B] = func(x)
```

しかし、この方法だと`arrayfun`や`cellfun`とすこぶる
相性が悪いです。`cellfun`を利用することを考えましょう。
`cell`に格納した変数（データ）を端から関数`func`に渡します。

```matlab
>> cellfun(@func, data)
```

しかし、`cellfun`は`func`の第1出力しか取れません。
非常に厄介です。`{func(data{1})}`で全ての出力を取れると良いのですが、そんなことはできません。

そこで、第N出力だけを取り出すwrapperが必要となります。
以下に実装を書いていきます。

# 実装

最初すごい適当に書いたものが1つ目の実装です。
第1出力も念の為取り出すことができます。しかしパッと見分かりづらいです。

```matlab:outN.m
function out = outN(fun, N, varargin)
    assert(N>=1, "indicate 1st~ output");
    eval(['[' repmat('~,', 1, N-1) 'out] = fun(varargin{:});']);
end
```

2つ目の実装は、少し読みやすい風に作ってありますが1つ目と同じです。
また、`cell`の初期値設定などが使用してあり少し教育的ですね。

```matlab:outN.m
function out = outN(fun, N, varargin)
    assert(N>=2,"indicate after 1st output");
    omit    = cell(1, N-1);
    omit(:) = {'~'};
    ignore  = join(omit, ',');
    eval(['[' ignore{1} ',out] = fun(varargin{:});']);
end
```

実際にコンソールで実行してみたのが次の例です。
`ismember`メソッドの第2出力が取れていることが分かります。

```matlab 
>> [A,B]=ismember(1,[0,1,2,3,4,5])

A =

  logical

   1

B =

     2

>> outN(@ismember,2,1,[0,1,2,3,4,5]) % get the second output

ans =

     2
```

私自身が実現したかったのは予測モデルを`cell`に保存しておいて、モデルをデータ`Xtest`に適用するという点でした。
すなわち、`models{1}.predict(Xtest)`, ..., `models{end}.predict(Xtest)`を一括適用したかったのです。必要なのは第2出力でした。

上記のいづれかの`outN`を使うと、任意の出力を取り出せます。組み合わせると次のように書けます。

```matlab
>> cellfun(@(m)outN(@m.predict, 2, Xtest), models)
   % models{1}.predict(Xtest)の第2出力だけを取り出す
```

もし`outN`が使えなければ次のようなコードを書いていたことでしょう。
複数行使わなくてはいけませんし、見通しが悪く、不要な変数も増えます。
これは避けたいところでした。

```matlab
outputs = cell(1, length(models));
for iModel = 1 : length(models)
    [~, out] = models{iModel}.predict(Xtest);
    outputs{iModel} = out;
end
```

# まとめ

任意の出力を取り出すためのwrapper関数を調べ作りました。
複数行書く必要があったところを`cellfun`と組み合わせ1行で書くことができました。
MATLABのFile Exchangeにも公開しているのでご利用ください。
[outN - File Exchange](https://jp.mathworks.com/matlabcentral/fileexchange/77028-outn)

# 参考文献
- [インスタンスメソッド​の第2出力をcell​funで取得する方法](https://jp.mathworks.com/matlabcentral/answers/549651-2-cellfun)
- [outN - File Exchange](https://jp.mathworks.com/matlabcentral/fileexchange/77028-outn)
- [Elegantly refer to the second output from a function](https://jp.mathworks.com/matlabcentral/answers/381820-elegantly-refer-to-the-second-output-from-a-function#answer_414129)
11.1 AccountActivationsリソース: Railsチュートリアル備忘録 - 第11章



## 11.1 AccountActivationsリソース

### 11.1.1 AccountActivationsコントローラ



ルーティングで使用する`resouces`は`only`で限定的に使用できる

```ruby
  resources :account_activations, only: [:edit]
```

演習

> 表 11.2の名前付きルートでは、_pathではなく_urlを使うように記してあります。なぜでしょうか? 考えてみましょう。ヒント: 私達はこれからメールで名前付きルートを使います。

サーバーの外からアクセスできるパス（URL）でないと行けないのでフルパスである必要がある
`_path`が返すルート相対パスや、相対パスでは駄目

[pathヘルパー(_path)が返すのは相対パス？絶対パス？: Railsチュートリアル備忘録 - Qiita](https://qiita.com/daddy_hacker/items/81bf2fdc36158c9ca1c5)



### 11.1.2 AccountActivationのデータモデル

3つの属性をUserモデルに追加

```
$ rails generate migration add_activation_to_users \
> activation_digest:string activated:boolean activated_at:datetime
```

`activated`は初期値で`false`付与

```ruby
class AddActivationToUsers < ActiveRecord::Migration[6.0]
  def change
    add_column :users, :activation_digest, :string
    add_column :users, :activated, :boolean, default: false # 初期値false
    add_column :users, :activated_at, :datetime
  end
end
```

`before_create`で事前に`activation_token`と`activation_digest`属性を付与するメソッドを呼び出す

```ruby
before_create :create_activation_digest
```

```ruby
		def create_activation_digest
      self.activation_token  = User.new_token
      self.activation_digest = User.digest(activation_token)
    end
```

`activation_token`はモデルにない属性なので
`attr_accessor`が必要

```
attr_accessor :remember_token, :activation_token # 一行で書ける
```

[attr_accessorが必要な理由と、不要な理由（Railsさんありがとう）: Railsチュートリアル備忘録 - 9章 - Qiita](https://qiita.com/daddy_hacker/items/32bc4f440de965b796d0)



サンプルユーザとfixtureを有効化しておく

`$ rails test` > (GREEN)
【LeetCode Daily Challenge 2020-6-18】H-Index II

LeetcodeのDaily Challengeはこの数ヶ月の間にやっていますが、
Qiitaで解答説明を投稿するのは初めてなんです。
もし役に立っていれば、ぜひ「いいね」やコメントをお願い致します。

今日の問題は：

>**H-Index II**

>Given an array of citations sorted in ascending order (each citation is a non-negative integer) of a researcher, write a function to compute the researcher's h-index.

>According to the definition of h-index on Wikipedia: "A scientist has index h if h of his/her N papers have at least h citations each, and the other N − h papers have no more than h citations each."

>Example:
Input: citations = [0,1,3,5,6]
Output: 3 
Explanation: [0,1,3,5,6] means the researcher has 5 papers in total and each of them had 
             received 0, 1, 3, 5, 6 citations respectively. 
             Since the researcher has 3 papers with at least 3 citations each and the remaining 
             two with no more than 3 citations each, her h-index is 3.

一応英語のままコピペしましたけど、意味分かりますよね。

まず、H-Indexを求めたいですね
H-Indexって何？一配列があって、中にX以上の数字の数がちょうどXになったとしたら、この配列のH-IndexはXと言いますね

目的が分かったら、次、どう解決しましょうね。
ヒントがあります。配列がすでにソートされていますね、気づきましたか？
ソートした配列に対して、まず「二分探索」を頭に思いつけてください

あと、ここに貼り付けていないですが、Follow Upのところにこう書いてあります：

>•Could you solve it in logarithmic time complexity?

「対数の時間複雑度で解けますか？」言い換えれば、「二分探索」を使ってくださいという意味ですね。。

正直言って「二分探索」は難しいテーマですね、でもテンプレートあります：

```Java
int n = citations.length;
//まず、２ポインターを左右に配置
int left = 0;
int right = n - 1;
        
while(left <= right) {
    int mid = left + (right - left) / 2;//　中点を取得
    if(n - mid == citations[mid]) {//　見つけたら終わり
        return n - mid;
    } else if(n - mid > citations[mid]) {//　目標より小さいなら、左から絞る
        left = mid + 1;
    } else {//　目標より大きいなら、右から絞る
        right = mid - 1;
    }
}
        
 return n - left;
```

二分探索はだいたいこんな感じですので、覚えてきたほうがいいです。
毎回問題によって変わったのはIF条件のところですね

今回の条件は、**X**と**X以上の数字の数**と合っているかどうか
**X以上の数字の数**って何だろう？ソートされたので、X右側の数字全部Xより大きくて、その数はXを含めて右にある要素数、いわゆる総数n - **Xのインデックス**ですね
だから、条件は`n - mid == citations[mid]) `のように書けばいいです

最後迷うかもしれないことというと、`left <= right`ここにイコールをつけるかつけないかとの問題ですね
簡単に言うと、答えは配列以外にありえるか次第です、今回の場合、全部0だとしたら、H-Indexは0になってしまいます。だが、`n - left`は0に届けないです！配列を超えてしまうので、イコールをつけないとエラー出ます。

解答と説明は以上となります。
初めてやったので、もし分からないこととか、間違っていたことがあったら、気軽に声をおかけください！
iosでtextarea・input・selectタグ選択時に拡大するのを防ぐ方法

iosでtextarea・input・selectタグなどの入力フォームを選択すると拡大してしまうことがあります。
デザインによっては拡大をさせたくない時もあると思いますので、その時の対策です。

## font-sizeを16px以上にする
textarea・input・selectタグのfont-sizeを16px以上にすればiosでも拡大しなくなります。

```scss
input,textarea,select {
  font-size: 16px
}
```

## デザイン的に小さくしたい場合はtransformも合わせて指定

```scss
input,textarea,select {
  font-size: 16px
  transform: scale(0.8);
}
```
デザイン的に小さくしたい場合は、transformも合わせて指定することで、font-sizeが16pxのまま小さくすることができます。
しかし、小さい状態で拡大もされなくなる点には注意が必要です。
e-taxをChromium版Edgeからie-modeで起動する。

最近僕はChromium版Edgeを使っています。
仕事ではIEで作ったサイトをChromium版Edge/Chromeでも動く対応を行っています。（すんげえ苦労した~）
＝画面崩れの調整、標準フォント、ファイルアップロードのボタンサイズなどに苦労しました。
Chromium版Edgeは閲覧データをクリアする機能が標準でついていたり、コレクション機能などChromeよりはビジネスよりだと思っています。
ActiveXコントロールを使用しているパッケージサイトなどはIEで動かさざるを得ないものにはIE-MODEは有効です。
ChromeではieTabがGoogleストアで入手できますが、信頼性という点でお客様にはお勧めできません。
e-taxもIE11なので、自宅ＰＣからアクセスする場合、e-taxだけIE-MODEで動かせばよいと思い、設定した内容を以下記載します。
#【１】必要なものをダウンロード＆インストール
１）グループポリシー用テンプレートをダウンロード
https://www.microsoft.com/ja-jp/edge/business/download
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/433305/36db01c6-f8de-3a71-11ed-7609553c7cdc.png)
ポリシーファイルを取得をクリックしてダウンロードします。
２）サイトリストマネージャーをダウンロードし、インストールします。
https://www.microsoft.com/en-us/download/details.aspx?id=49974
#【２】ローカルグループポリシーの設定準備
企業だったらＡＤで設定するもんですね。自宅ＰＣなのでローカル設定します。
１）C:\Users\user\Downloads\MicrosoftEdgePolicyTemplates.zip\windows\admx　の
 msedge.admx msedgeupdate.admx　を　c:\Windows\PolicyDefinitions　にコピー
２）C:\Users\user\Downloads\MicrosoftEdgePolicyTemplates.zip\windows\admx\ja-JP　の
 msedge.adml  msedgeupdate.adml を　C:\Windows\PolicyDefinitions\ja-JP　にコピー
#【３】サイトリストマネージャーでのＩＥ起動サイトＸＭＬの作成
１）Addボタンを押下してＵＲＬにe-taxサイトを指定してSave
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/433305/ec015226-4444-339e-1e46-25d158b1aa34.png)
Standalone IE:にチェックをいれるとサイトが別ウインドウで表示されます。
２）メニューの　File から Save to XML で適当なフォルダに格納
これも企業で使用する場合はサーバに配置して共有するものですね。
#【４】グループポリシーエデイターの起動
１）ウインドウズキー＋Rで起動し gpedit.msc を入力しOKボタンで起動
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/433305/1f7a20db-5cd5-0ab2-22bd-81a172b194fc.png)
#【５】Interner Explorer 統合を構成する
１）Interner Explorer 統合を構成するを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/433305/46ebf2d6-f662-3d39-bf36-52e54ca4d4a7.png)
２）有効、Interner Explorerﾓｰﾄﾞを選択し、OKボタンを押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/433305/9eeb5ace-139d-ee6a-0d6a-d7153654ebde.png)
#【６】エンタープライズモードサイト一覧を構成する
１）エンタープライズモードサイト一覧を構成するを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/433305/19c8d6e8-6c54-3890-0455-5e0a10465b32.png)
２）有効とし、【３】2)で格納したxmlを指定し、OKボタンを押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/433305/d24ac539-c54a-77bd-d65d-8c68883a3a0b.png)
これで設定完了！！
#【７】サイトの確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/433305/337d3c3f-646f-124e-8de3-f7ea3a58d55d.png)
ＵＲＬの左にＩＥのマークが表示されたらＯＫ。
#【８】その他
urlに　edge://policy/　とたたくとポリシーが表示され、
edge://compat とたたくとエンタープライズ モード サイト一覧が表示されます。
以上
[rails×Docker]rails 再起動したいだけなのに、exited with code 1にハマった話。


rails sの再起動をしたく、Dockerを起動し直していた際に
また「exited with code 1」にハマってしまった。

```
web_1  | bundler: failed to load command: rails (/usr/local/bundle/bin/rails)
docker_byt_web_1 exited with code 1
^CGracefully stopping... (press Ctrl+C again to force)
Stopping docker_byt_db_1  ... done
```

railsも起動していないので、エラー内容もわからず。
今回は、コンテナ内に入って、rails sをしてみることに。

```
#コンテナに入ります
$ docker-compose exec web bash
```

コンテナ内では「docker-compose run web」は不要のため
まずはrails s。

すると、、、

```
rbenv: version `ruby-2.5.8' is not installed (set by /Users/y-kikuchi/projects/docker_byt/.ruby-version)
```

インストール系が怪しい？

そこで、再度コンテナ外からインストールを試みて
無事、起動に成功しました！

```
docker-compose build --no-cache
```

よかった〜、、、
【css】clip-pathに影をつける(出来た)

# はじめに
clip-pathで作った六角形に、六角形の影(外側)をつけたかった。
~~けど出来なかった話。~~出来た。

参考
[box-shadowだけじゃない！CSSでできる色々な影の表現と意外に知らない落とし穴](https://ics.media/entry/200406/)
[Hexi-Flexi](https://vmcreative.github.io/Hexi-Flexi-Grid/)

# 結論
`box-shadow`、`drop-shadow`、`擬似要素を使った影`
~~これらではダメだった。~~
`drop-shadow`で出来ました。

# box-shadow

```html:html
<div class="hex shadow"></div>
```

```css:css
.hex {
    background-color: cornflowerblue;
    position: relative;
    height: 400px;
    width: 347.23416px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.shadow {
    box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
}
```

![スクリーンショット 2020-06-18 16.59.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/446130/ae756253-9e26-eac7-7804-1eb3643efe62.png)

そもそも影が出ない。

# drop-shadow
~~同じく影が出ない。~~

```html:html
<div class="shadow">
    <div class="hex"></div>
</div>
```

```css:css
.shadow {
    filter: drop-shadow(30px 10px 4px #000000);
}
```

`filter`の使い方を間違えていた。
親要素にdrop-shadowをつけたら出来ました。

![スクリーンショット 2020-06-23 15.26.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/446130/1fcd3057-bf62-053b-20a6-5c43d8048457.png)



# 擬似要素

```css:css
.shadow::after {
    content: '';
    z-index: -1;
    background-color: #000000;
    position: absolute;
    width: 100%;
    height: 100%;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); 
    filter: blur(150px);
    transform: translate(10%, 10%) scale(1.05);
}
```

![スクリーンショット 2020-06-18 17.23.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/446130/25adee73-464b-e287-5d05-e14d3cf19faa.png)

clip-pathに切り取られて外に出れない。
`z-index`も仕事していない。

# ~~結局~~ 出来たから結局ではない
影を外付けにした。
`z-index`を効かせるためだけに。

```html:html
<div class="hex"></div>
<div class="shadow"></div>
```

```css:css
.shadow {
    content: '';
    z-index: -1;
    background-color: #000000;
    display: block;
    position: absolute;
    top: 0px;
    left:0px;
    height: 400px;
    width: 347.23416px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); 
    filter: blur(150px);
    transform: translate(10%, 10%) scale(1.05);
}
```

![スクリーンショット 2020-06-18 17.57.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/446130/6b222cb2-9798-2690-2cdc-32d10e709fab.png)

* 親子じゃないからたくさん直打ち設定しないといけない
    * `top`、`left`、`height`、`width`、六角形にするための`clip-path`
* clip-pathに切り取られてブラーもほぼ仕事してない

影はついたが望まぬ形だったため使えなかった、諦め。 

# おわり
正六角形の 長い方(今回は高さ):短い方(今回は幅)は2:√3。
なので2:√3の長方形を用意してそれをclip-pathで切り取ると綺麗な正六角形ができる。
Vagrant+VirtualBox+Ubuntu18にSSH接続

# UbuntuにSSHでパスワード　アクセスするまでの流れ

備忘録につき手順検証していないので、あしからず。

## 環境、バージョン

* 作業OS：Windows10 Pro 64bit
* Vagrant Ver 2.0.1 (結構古い）
* VirutalBox 5.0 (これもちょっと古い）
* Ubuntu18.04.4 LTS

## 前提

VagrantとVirtualBoxはインストールしておく

## Ubuntuのイメージをインストール

以下Vagrantファイルを作成

~~~Text
Vagrant.configure("2") do |config|
    config.vm.box = "ubuntu/bionic64"
end
~~~

コマンドラインで以下を実行

~~~
# vagrant init bento/ubuntu-18.04
# vagrant up
~~~

## VirtualBoxのネットワーク設定を編集

ネットワーク＞アダプター１　
割り当て：NAT
＞高度
　ポートフォワーディング
　プロトコル：TCP
　ホストIP：
  ホストポート：2222 (接続する際に使用するポート：2222じゃなくても可）
  ゲストIP：UbuntuのIPアドレスを指定（1ホストしかUPしないなら空でもOK)
　ゲストポート：22
　
## SSHでアクセス

Vagrantが公開しているUbuntuイメージには、Vagrantユーザーが作成されていて
VirtualBoxの表示で画面を表示すれば、vangrantユーザーでログインできる。
ただ、この状態で、RLoginやTeraTermでsshアクセスしようとしても
Keyファイルを指定しないとアクセスできない。

### sshd

セキュリティ的には、Keyファイルでアクセスしたほうが安全だが、ローカル環境にいちいちKeyファイルで
ログインするのも面倒なので、パスワードでログインできるようにsshd.configを編集する。

~~~
vagrant@ubuntu-bionic:~$sudo vim /etc/ssh/sshd_config
~~~

ファイル内の以下をyesに変更

~~~
PasswordAuthentication yes
~~~

一応sshdを再起動

~~~
vagrant@ubuntu-bionic:~$sudo systemctl restart sshd
~~~

これでRLoginやTeraTermでパスワードログインできるようになる。
Vue.jsのdeep: trueのwatchでoldValueとnewValueが常に同じ問題の解決

時間がある時にもう少し加筆します。

## 結論

computedで非参照のコピーを作って、そのcomputedをwatchする。

```vue
<script>
let vm = new Vue({
  data: {
    human: {
      name: null,
      age: null,
      height: null,
      weight: null
    }
  },
  computed: {
    computedHuman () {
      // 何らかの方法で非参照のコピーを作る
      return JSON.parse(JSON.stringify(this.human))
      
      // ↓その他
      // return Object.assign({}, this.human)
      // return lodash.cloneDeep(this.human)
    }
  },
  watch: {
    computedHuman: {
      deep: true,
      handler(newValue, oldValue) {
        // ちゃんと中身が異なる
        console.log(newValue)
        console.log(oldValue)
      }
    }
  }
})
</script>
```

## 問題: Vue.jsの`deep: true`のwatchではoldValueとnewValueが同じらしい

オブジェクト全体を監視する必要があり、
かつ`human.name`のように個別に監視することができない状態だったので`deep: true`を試して見ました。

すると、oldValueとnewValueが常に同じでどの値が変更されたのかが分からない状態でした。

```vue
<script>
let vm = new Vue({
  data: {
    human: {
      name: null,
      age: null,
      height: null,
      weight: null
    }
  },
  watch: {
    human: {
      deep: true,
      handler(newValue, oldValue) {
        // 中身が同じ！?
        console.log(newValue)
        console.log(oldValue)
      }
    }
  }
})
</script>
```

## 参考
[newValue and oldValue parameters are the same when deep watching an object - Git Hub](https://github.com/vuejs/vue/issues/2164)
RailsのDBマイグレーションの細々したメモ

## railsのマイグレーションのファイルに`execute "生SQl"`を生SQLを入れられる

```
    execute 'UPDATE posts SET start_at = created_at WHERE start_at IS NULL'
    change_column_null :posts, :start_at, false
```

## NOT NULL制約をマイグレーションで加える際は

```rb
    change_column_null :customer_news, :name, false, '既存のnullを置き換える値', default: 'デフォルトさん'
```

## MySQL5.6ではtext型、blob型のカラムのNOT NULL制約のデフォルト値を設定できない
- ''(空文字)がデフォルトになりそう??
Xcodeで使っていない画像を一覧表示するライブラリを使うと便利

# 前提

Xcodeで未使用、不使用、使っていない画像リソースを削除するライブラリないかなーと探していたら以下の記事を発見。

Unused images and resources clean up in Xcode - SwiftLee
https://www.avanderlee.com/optimization/unused-images-clean-up/

- FengNiao  
- LSUnusedResources  

の2つのライブラリがあって、それぞれ試してみたけど`FengNiao`のほうが良さげだったらしい。
なので、今回は`FengNiao`を使って使っていない画像ファイルのあぶり出しを行うことに。



# FengNiao使い方

> onevcat/FengNiao: A command line tool for cleaning unused resources in Xcode.
https://github.com/onevcat/FengNiao

```
git clone https://github.com/onevcat/FengNiao.git
cd FengNiao
./install.sh
```
あとは調査したいプロジェクトのディレクトリに入って`fengniao`コマンドを実行するだけ。
かんたん。

# 実際にやってみた

以下のコマンドを実行すると

```
fengniao --project . --exclude Carthage Pods fastlane
```

<img width="894" alt="スクリーンショット 2020-06-18 17.42.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70276/a57872cc-d742-d9db-0d67-40f83545dc74.png">

使ってなさそうなファイル一覧が出てくるので、念の為プロジェクト側で検索して使っていないか確認しつつ消していく

# おまけ

SwiftGenを使っているとすべての画像ファイルが自動で参照されてしまうので、SwiftGenによってGenerateされたファイルを消してから`fengniao`コマンドを実行するとそれっぽいファイルが出てくる。ただし、コードから参照している可能性があるので、1つ1つ使っていないかの確認が必要😇
windows store系のアプリ（LINE）をコマンドラインから実行

line とかのwindows store系のアプリは実行時のパスをタスクマネージャーから拾って
"C:\Program Files\WindowsApps\NAVER.LINEwin8_6.0.3.0_x86__8ptj331gd3tyt\LINEAPP.exe"
とかをコマンドラインで実行しても起動できない。その乗り越え方。

結論からいうと　LINEなら

start shell:AppsFolder\NAVER.LINEwin8_8ptj331gd3tyt!LINE

でできる。（少なくとも私のPCでは）
この
NAVER.LINEwin8_8ptj331gd3tyt
と
LINE
の２個の文字列をどうみつけるか？がこの話のポイント

これについて調べると
https://www.tenforums.com/software-apps/57000-method-open-any-windows-10-apps-command-line.html
の記事が引っかかる。

コピペすると
NAVER.LINEwin8_8ptj331gd3tyt
は
get-appxpackage > 123.txt
で123.txtを作ってそれを適当なエディタで開くとそのなかにLINEの記述がある

Name              : NAVER.LINEwin8
Publisher         : CN=C0415FFB-91CC-437B-A96F-855211BF77AD
Architecture      : X86
ResourceId        : 
Version           : 6.0.3.0
PackageFullName   : NAVER.LINEwin8_6.0.3.0_x86__8ptj331gd3tyt
InstallLocation   : C:\Program Files\WindowsApps\NAVER.LINEwin8_6.0.3.0_x86__8ptj331gd3tyt
IsFramework       : False
PackageFamilyName : NAVER.LINEwin8_8ptj331gd3tyt
PublisherId       : 8ptj331gd3tyt
IsResourcePackage : False
IsBundle          : False
IsDevelopmentMode : False
NonRemovable      : False
IsPartiallyStaged : False
SignatureKind     : Store
Status            : Ok

このPackageFamilyName : NAVER.LINEwin8_8ptj331gd3tytがずばりそれ

最後のLINEの文字列は
InstallLocation   : C:\Program Files\WindowsApps\NAVER.LINEwin8_6.0.3.0_x86__8ptj331gd3tyt
の場所を開き、その中にある　AppxManifest.xml　を開く
でその中から　
Executable=
の文字列で検索　すると
    Application EntryPoint="Windows.FullTrustApplication" Executable="lineapp.exe" Id="LINE"
が引っかかる。そのIDの続きがそれ。この場合LINE
この２文字列
NAVER.LINEwin8_8ptj331gd3tyt、LINE　を合体させて
shell:AppsFolder\NAVER.LINEwin8_8ptj331gd3tyt!LINE
になる。
[FileMaker ]パソコン上に保存されたIMPORT不可能なテキストデータ（JSONファイル等）をスクリプトから取り込む方法

#初めに
ファイルメーカは様々なインポートに対応していますが、リスト化されたデータ（CSVやXLSX）をテーブルにインポートすることが基本です。本記事では、JSONファイルやXMLファイル等の通常のインポートが不可能なテキストデータをスクリプトから取り込む方法について説明します。

この記事では、デスクトップに保存したALLDATA.JSONというJSONファイルをファイルメーカに取り込む実例を紹介したいと思います。

##確認環境：
FILEMAKERバージョン：FileMaker Pro 17 Advanced 
OS：WINDOWS10、MACOS 10.14（MOJAVE）

FileMaker Pro 12以降（URLから挿入が使用できるVer）であれば使えると思いますが
動作確認はしていません。

##準備

###フィールド
ファイルを格納するためのフィールドを追加してください。
本稿では、「JSONデータ」というテキストフィールドを用意しました。

![2020-06-17_18h13_25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300537/453acf57-bfa5-fc28-f922-b179bd4a9821.png)


###スクリプト
取り込み用のスクリプトを１つ用意してください。
本稿では、「JSONデータ取り込み」というスクリプトを用意しました。


###スクリプトの作成

スクリプトステップで「URLから挿入」の処理を追加してください。
####設定項目
・フィールドに準備で作成した「JSONデータ」フィールドを割り当てる。
・URLを指定の項目に、fileスキームを使用したURLを指定してください。
※今回の例では、
MACの場合「file:///User/****/Desktop/ALLDATA.JSON」
WINの場合「"file:/" & Get(デスクトップパス) &"ALLDATA.JSON"」
と指定します。

****はユーザ名で読み替えてください。
ちなみにMACではなぜGet(デスクトップパス) を未使用かというと
取得したパス情報にドライブ情報も含まれてしまいfileスキームの指定先として余計な情報が入ってしまうからです。
下画像はWINDOWSの例です。

![2020-06-17_18h29_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300537/d92c1197-b31b-182f-6ff2-a64c9f374974.png)



###スクリプトの実行
上で作成したスクリプトを保存し、実行してください。
「JSONデータ」フィールドにALLDATA.JSONのテキスト内容が反映されているかと思います。
あとは、セットされた値を解析して、別のフィールドに値をセットする等の処理を実行すればOKです。

今回の例のようにJSONデータであれば、JSONGetElement（FILEMAKER16以降で使用可能）などを使用して格納したデータから簡易に情報取得することができます。

https://fmhelp.filemaker.com/help/16/fmp/ja/index.html#page/FMP_Help/json-functions.html



###最後に
ネット上でローカルテキストファイルの取り込みについては記事が発見できませんでしたので記事化してみました。参考になれば幸いです。
なおファイルメーカ１８からは、ファイル操作関数が追加されていますので以降のバージョンはそちらを使ってもいいかもしれません。
Vue,Nuxtで使えるグラフライブラリ調べてみた

# はじめに
この記事はこの記事に載っているライブラリを機能的観点から調べてまとめただけです。
https://madewithvuejs.com/blog/top-vue-js-chart-components
調べが甘いこともあると思うので、「これできるよ！」とか、「これもいいよ！」とか、「これできなくね？」みたいなのあったらコメントお願いします。

# 調査結果

## [JSCharting](https://madewithvuejs.com/go/jscharting-vue-charts)
・カチカチのグラフ（株価や資産チャートなどに使われてそう）
・かなりいろんなことができる
・Vue用のラッパーライブラリは4ヶ月前にできたばかりで全然使われておらず、メンテナンスが継続されるか怪しい上に、まだWEB上に情報があまりない
　https://github.com/jscharting/jscharting-vue

## [VueTrend](https://madewithvuejs.com/go/vue-trend)
・とてもシンプル
・名前の通り時間が絡むデータを見る専用
・シンプルすぎて表示以外おそらくなんの機能もない

## [HighCharts](https://madewithvuejs.com/go/highcharts-vue)
・商用利用だと有償
 ・Nuxtで使っている日本語記事が２件ほどある。
・複数グラフも可能
・複数y軸も可能
・公式のVueラッパーの他にNuxt対応方法も書いてある非公式ラッパーがあるが、記事で普通に公式ラッパーでnuxt対応していたのでどちらでもよさそう
公式：https://github.com/highcharts/highcharts-vue?ref=madewithvuejs.com
非公式：https://github.com/superman66/vue-highcharts#readme
・tooltipはできる
・ズームもできるがこんな感じなので説明を書かないと気づかなそう↓
　https://www.highcharts.com/demo/line-time-series

## [ZingChart](https://madewithvuejs.com/go/zingchart-vue)
・Vueに特化している、多機能、デモ、テンプレが豊富
・デザインが良い
・Nuxtで使われた記事が見当たらない
・日本語記事はない
・複数グラフも可能
・複数y軸も可能
・ズームはhighchartと同じ仕様

## [VueEChart](https://madewithvuejs.com/go/vue-echarts)
・Nuxtの対応方法がgithubに書いてある
・英語のドキュメントすら少ない（Echart自体がBaidu製なので）
・公式は英語なので公式だけを頼るしかない
・複数グラフも可能
・複数y軸も可能
・ズームはいい感じ↓
　https://echarts.apache.org/examples/en/editor.html?c=area-simple

## [Vue-chartjs](https://madewithvuejs.com/go/vue-chartjs)
・Nuxtでも使えている
・ネットに情報がたくさんある
・複数グラフも可能
・複数y軸も可能
・ズームは直感的にできる↓
　https://nagix.github.io/chartjs-plugin-streaming/samples/zoom.html

## [Vue Morris](https://madewithvuejs.com/go/vue-morris)
・シンプルなグラフ
・Nuxtだとエラーが出るというissueが上がっているが、できている記事が３つほどある
・日本語記事なし
・複数y軸なさそう

## [ApexCharts](https://madewithvuejs.com/go/vue-apexcharts)
・サーバーサイドにも統合用ライブラリを提供している（なんだそれ！？）
・デザインが良い
・他よりも多機能、拡張的な機能が揃っている
・複数グラフも可能
・複数y軸も可能
・ズームはhighchartと同じ仕様だけどInteractivityがあって良い↓
　https://apexcharts.com/docs/interactivity/
・client modeにすればnuxtで動きそう

# 所感
個人的にはApexChartsが良い感じでした。
Interactivityもあり、デザインもよく、最近のライブラリという感じがします。
データ数が25000のデモもあって、ハイパフォーマンスなのも良いですね。
逆にVueEChart,JSChartingはネット上の情報の量的に不安があります。
HighChartは商用だと有償です
Vue-chartjsはネット上の情報が結構豊富で安心です。
こんなにいっぱいあると悩んじゃいますね。
Laravel 5.5 → 5.8 →  6.1.8 →  7.16.1にアップグレードする時の注意

5.5のサポートが2020年8月30日で終了するので、アップグレードしておくことに。

数字だけ見ると大きくアップグレードしているように見えるがlaravel6移行は[セマンティックバージョニング](https://qiita.com/soyanchu/items/72095a7c9fdb7f71b2c3)が採用されたようで、実際はそれほど大きな変更ではないようです。
ここではセマンティックバージョニングについては触りませんが、qiitaにわかりやすく解説してくださっている記事があったのでリンク貼っておきます。


## Laravel 5.5 → 5.8

以下の記事を参考にした。
[Laravel6に備えて5.5から5.8へアップグレード](https://tech.arms-soft.co.jp/entry/2019/08/28/090000)

特に問題なし。
以下ファイルを追加しておくのを忘れないように。

logging.php
hashing.php

## Laravel 5.8 → 6.1.8
以下公式の記事を参考
[Laravel 6.x アップグレードガイド](https://readouble.com/laravel/6.x/ja/upgrade.html)

特に問題なし。
composer updateをして終わり。
直接関係はないが、deployerでデプロイする際に以下エラーを出力するようになった。

```shell
The command "cd /var/www/comdesk-api-staging/releases/5 && /usr/bin/php /usr/bin/composer install --verbose --prefer-dist --no-progress --no-interaction --no-dev --optimize-autoloader --no-suggest" failed.
```

devのパッケージが必要。
deploy.phpにcomposer実行時のオプションを上書きする。

```deploy.php
set('composer_options', 'install --verbose --prefer-dist --no-progress --no-interaction --optimize-autoloader');
```

## Laravel 6.1.8 → 7.16.1
[Laravel 7.x アップグレードガイド](https://readouble.com/laravel/7.x/ja/upgrade.html#date-serialization)

### session.phpとcache.phpで使われている「str_slug」を静的にメソッドで呼び出すように変更
composer updateを行う前にこちらの対応をしないとcomposer installでエラーになるので気をつけよう。

```session.php
'cookie' => env('SESSION_COOKIE',str_slug(env('APP_NAME', 'laravel'), '_').'_session'
),


'cookie' => env('SESSION_COOKIE', Str::slug(env('APP_NAME', 'laravel'), '_').'_session'),
```

サードパーティのライブラリがないため、比較的スムーズに移行することが出来た！
Gatsby.jsとNext.jsはどちらが優秀か比較してみた。

## きっかけ
先日、会社の人にこの動画が面白いかもねと教えてもらいました。

- [Gatsby vs Next.js: Which does SSG Better?](https://www.youtube.com/watch?v=imeAhvbA968)

こちらの動画はタイトルの通り、Gatsby.jsとNext.jsのどちらがより良いSSG(=Static Site Generation)ができるのか？要するに静的サイトをいい感じに作れるのか？という話がされています。
この中で動画の主は最後に僕だったらNext.js使うね。という感じの発言をされており（多分）、全体的にNext.jsの方が使いやすいよ〜という感じで話されていました。（英語力的に多分）
というわけで本当にそうなのかブログレベルですが試してみたので、そのときに感じた点などを共有したいと思います。

##設計思想の違い
まずは、両者の根本的な設計思想の違いについて触れたいと思います。
### Gatsby.js
Gatsby.jsは機能拡張に対してプラグインを用いたアプローチをとっています。例えばマークダウンファイルを読み込む、外部からデータをとってくる。など、様々な用途に対応したプラグインが用意されています。これは自身の用途に合致していれば、簡単にやりたいことができる反面、少しでもそのプラグインが提供している機能以外のことをしようとした場合や、そもそもプラグインでは対応できないようなことをしようとすると、今までブラックボックスだった部分を読み解かなければならなくなるので途端に面倒になりがちです。
また、個人的にはGatsby.jsで少し変わったことをしようとすると何かにつけて必要なGraphQLにnodeを作るためにGatsby-node.jsに書かなければならないコードはドキュメントを読んでも読み解きづらいなと感じますし、ES6の構文が使えないので面倒だなと思います。

### Next.js
対してNext.jsは最低限必要な機能だけを提供します。必要な機能は自分で作ろう！というBarebones Approachをとって作られています。これはGatsby.jsと比べ、自由度が高くコードが書けるかつ、自分で書く分何をやっているのか把握できるのでやりたいことに対して柔軟に対応できると言えると思います。しかしそれは個人のスキルに依存する要素が大きいと言い換えることもできるでしょう。

## コードはNext.jsの方が書きやすい
個人的にはNext.jsの方がコードは書きやすいなという印象です。Gatsby.jsでは最初はGraphQLのクエリ文が書かれているのも慣れないでしょうし、エラーが出てもブラックボックス部分が大きくいったいどこに問題があるのかわかりづらいという印象があります。Next.jsは上で述べたように自分で書く必要がある分、何が行われているのかjsの知識(React+ α)だけで追いやすく、エラーに対しても素早く対応できることが多いです。
## 画像の最適化周りはGatsby.jsの方がやりやすい
Gatsby.jsではGatsby-imageというプラグインが画像をとてもいい感じにマネジメントしてくれます。具体的には

- placeholderとして荒い画像を最初に読み込んでおく。
- スマホサイズ、デスクトップサイズなどの数種類の画像を自動的に生成し、デバイスによって適切なサイズの画像を自動的に読み込んでくれる。
- intersection Observer APIを用いてその画像が画面に入ったとき、などのイベントをとって、グッドなタイミングで読み込みを開始してくれる
- そしてそれらをブラーエフェクトなどをかけていい感じに表示してくれる。

などです。これがなかなか強力な機能なので、Next.jsでも実装しようとしました。
しかし、Next.jsには画像のパスをもとに、荒い画像を返してくれるnpm moduleなどはあるものの、Gatsby.jsレベルの機能を実装しようと思うと、かなり手間がかかりそうでした。それだったらGatsby.jsで少し面倒でもクエリ文を書き〜とする方が簡単だと思いました。
## パフォーマンス（スピード）はGatsby.jsの方が簡単に出せるような気がする
これに関しては全く同じサイトを作ったわけではないのでやっていることの違いや、僕のコードの問題もあるかもなので一概に「Gatsby.jsの方がパフォーマンスが出る」とは言えないですが、何も考えないでコードを書いてもパフォーマンスがいいのはgatsby.jsという印象です。Gatsby.jsでは、`import`しておいて使っていなかったり定義しておいて使っていない変数、定数があったりした場合、エラーが出るので、そういった面でコードの質がある程度担保されているからかな？と思っています。
## まとめ
まとめるとNext.jsの方がコード書きやすいけどGatsby.jsの方がパフォーマンスは出しやすい。みたいな感じになると思います。
しかし、そもそもNext.jsは静的サイトジェネレーターではないので、サービスを作るならNext.js、静的なサイトでいいならGatsby.jsを使うのがベストだと思います。
Githubからの 'security advisory' もちろんちゃんと対応してますよね？

# 前書き
個人開発においても、みなさんGithub使ってますよね。僕も使ってます。
使っていればいつか、ある日Githubからこんなメールがくることもあるかもしれません。

![Spark_-_個人.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317515/412a26ae-6360-ab29-0bf6-2e8470f3317a.png)

**タイトルを読めば、要注意だな。とすぐわかりますね！**

便利なことに、Githubは利用している技術のSecurityAdvisoryを検知してバージョンUPをするPRを作ってくれます。
初期設定では、登録時のメールアドレスにも送付されてきますので、確認したら早急に対応しましょう。

仮に眠らせてるrepositoryだとしでも、対応しないと気持ち悪いですよね...

# やったこと

## 1. Githubにログインし、Notificationを確認
![GitHub.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317515/5f045cda-c1b6-ab8b-13d7-d61037383067.png)

## 2. 内容を確認
![Notifications.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317515/7838181b-75ad-56ed-0c77-12b2f64be2d5.png)

## 3. 作られたPRの内容を確認
![Bump_websocket-extensions_from_0_1_3_to_0_1_4_by_dependabot_·_Pull_Request__1_·_wataboru_nuxt-initial-setting-completed.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317515/4c2e5ef1-5a6a-f779-50ba-7ff032b3a78d.png)

## 4. File Changedも確認
![Bump_websocket-extensions_from_0_1_3_to_0_1_4_by_dependabot_·_Pull_Request__1_·_wataboru_nuxt-initial-setting-completed_と_「Githubからの__security_advisory__ちゃんと対応してますよね？」を編集_-_Qiita.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317515/35364097-6d41-c8c5-1d31-17b7de5fb286.png)


## 5. マージ完了!

![bump](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317515/f28c9dca-2be3-cef4-fd3a-891a20574212.png)

## 6. 必要に応じてテストや再デプロイなど
本番稼働させているなら、ちゃんと適応しましょう！
MacOS Catalina (10.15) でRPGツクールMV作品 (Mac用)が開かない場合の対処法

<h2>RPGツクールMVが開ない……！</h2>

　RPGツクールMVの作品をダウンロードしたのに開けないという現象に出くわしたので情報を共有します。
    　　　　　　 <img width="418" alt="スクリーンショット 2020-06-18 16.33.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/658146/9a364f76-a66c-bece-9af8-8d4012a87c1d.png">
　　　　　　　　　　　　（初めて見たよこんなwindow）

　色々なサイトを見て対処法を探したり、再起動をしたり、インストールし直したり、色々試してみたのですが、どれも解決には至りませんでした。そこで、私が見つけた解決方法を共有したいと思います。


<h2>開く方法</h2>

**1. インストールした作品のファイル(zip)を右クリックすると、こんなwindowが出てきます。**
　　　　　　　　　　<img width="284" alt="スクリーンショット 2020-06-18 16.56.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/658146/eec86b9b-8cfb-be73-5db5-668539554ec5.png">


**2. 「このアプリケーションで開く」にカーソルを合わせると、こんな感じのwindowが出てきます。**
　　　　　　　　　<img width="333" alt="スクリーンショット 2020-06-18 16.57.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/658146/f9e64cb5-537f-c676-8895-803982373eba.png">
　デフォルトだとアーカイブユーティリティ.appを使用するようになっていると思うのですが、このアプリでzipファイルを解凍すると、なぜか最初に載せたように「アプリケーション"Game.app"を開けません。」と出てきます。そう、こいつが元凶だったのです！　そこで、2番目のThe Unarchiver.appを使います。


**3. 最初は、毎度お馴染みのこのwindowが出てきますが、windowを閉じた後に、システム環境設定＞セキュリティとプライバシー＞ダウンロードしたアプリケーションの実行許可で許可します。（詳しいやり方は他の方が既に記事にしているので割愛します。）**
<img width="419" alt="スクリーンショット 2020-06-18 16.48.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/658146/2f0b3bac-9a49-4c0a-e731-dd91ba8ff180.png">


**4. 開けるよ！**
（写真は編集に失敗したので載せません）


<h2>ちなみに</h2>
<h3>The Unarchiver</h3>
　"The Unarchiver"はApp Storeでダウンロードできます。
<img width="956" alt="スクリーンショット 2020-06-18 17.14.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/658146/fd3df474-8a10-bce3-aae6-8a1c5f35172a.png">

　他にも解凍ソフトはありますが、試してないです（ごめんなさい）。このアプリ自体はApp Storeで配信されているものなので、簡単にインストールできるはずです。


**MV作品が開かない時は、ぜひ試してみてください！**


<h3>その他</h3>
　古い作品（といっても2017くらいのもの）は開かないこともあるみたいです。ゲームのwindowが一瞬出てエラーレポートの画面に移行します。こちらの対処方法は不明ですが、今後色々と試していきます。


<h2>最後に</h2>
　私のMacの環境はCatalina 10.15.5です。それ以前の環境でも問題起きてたんですかね。しかし、Wine使えなくなるならCatalinaにアップデートしなければよかった……。でもSierraに戻すのも大量の容量がある外付けハードドライブが必要だし、いっそのことWindows買おうかなって考えてます。（実際はCatalinaでもWineを使用する方法はあるみたいです）。

　（最終的にBoot CampでWindows入れました。学生さんは無料で入れられる場合があるのでMicrosoft AzureとGitHubをのぞいてみてください！）
Nuxt.jsのSSR時のVeeValidate2系のエラーについて

# バージョン
VeeValidate 2系
Nuxt 2系


# エラー
VeeValidateを使用しているページにて次のエラーがでる。

```
Cannot read property 'name' of undefined
```

# 原因

```nuxt.config.js
  plugins: [
    { src: '~/plugins/vee-validate.js', mode: 'client' },

```

modeをクライアントにしていると起きるらしい
issueのこちら参照
https://github.com/logaretm/vee-validate/issues/1148#issuecomment-365988770

# 改善策

```nuxt.config.js
  plugins: [
    { src: '~/plugins/vee-validate.js'},

```

mode: 'client'をやめれば解決。

# 最後に
veeValidateは3系が出てるっぽいのでバージョンあげたほうが良いかも。
Vue.jsでfilterを使って連想配列の重複削除を行いつつ、特定の値のときは重複させる処理

## 配列の値の重複を消す
このような配列があったとします。

```javascript
data () {
  return {
    items: [
      { id: 1, title: '漫画' },
      { id: 2, title: '小説' },
      { id: 3, title: '漫画' },
      { id: 4, title: '漫画' },
      { id: 5, title: '雑誌' }
    ]
  }
}
```

HTML側

```html
<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>
```

![スクリーンショット 2020-06-18 16.07.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/518141/3310280b-1ee8-a52b-f5b2-f4ce30bbcb46.png)

こんな感じで表示されてます。
この配列のtitleの重複を排除していきたいと思います。

```javascript
created () {
  this.duplicate ()
},
methods: {
  duplicate () {
    this.items = this.items.filter((v1, i1, a1) => {
      return a1.findIndex(v => v1.title === v.title) === i1
    })
  }
}
```
![スクリーンショット 2020-06-18 16.24.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/518141/ea340149-a23e-516b-f8a7-5cd55e2a3e96.png)

重複が削除されました！
filterには3つ引数を取ることができます。v1は指定している配列のvalueになります。i1は指定している配列のindexです。a1は現在している配列そのものです。

## 特定の値だけは重複を許可する

次にこんな配列を用意しました。

```javascript
items: [
  { id: 1, title: '漫画' },
  { id: 2, title: '小説' },
  { id: 3, title: '漫画' },
  { id: 4, title: '漫画' },
  { id: 5, title: '雑誌' },
  { id: 6, title: '小説' },
  { id: 7, title: '小説' }
]
```
先程の重複処理が走っているので表示される結果は先程と一緒です。そこでtitleが小説のときは重複させても良いことにしましょう。

```javascript
methods: {
  duplicate () {
    this.items = this.items.filter((v1, i1, a1) => {
      if (v1.title === '小説') return true
      return a1.findIndex(v => v1.title === v.title) === i1
    })
  }
}
```
もしitemsのtitleが小説だったら処理から抜けるというコードです。これをすることによって特定の文字列の場合は重複ができるようになり、それ以外は重複させないといった処理を実現できます。

![スクリーンショット 2020-06-18 16.58.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/518141/dc32cfe7-1cd9-5384-3ff4-8cff64a4b00f.png)

小説だけは重複できてますね。
参考になれば幸いです。
Kubernetes, GKEで使うコマンドまとめ

# Configmap
## Configmapの作成

```console
$ kubectl create configmap configmapname --from-env-file=.env
```

## Configmapの削除（と再ロード）
読み直しをさせる場合には一度削除して作成、Podの再生成

```console
$ kubectl delete configmap configmapname
$ kubectl create configmap configmapname --from-env-file=.env
$ kubectl apply -f deployment.yaml
```

# Pod

## 確認など

```console
$ kubectl get pod
NAME                            READY   STATUS    RESTARTS   AGE
oh-my-pod-111111-abcdef  1/1     Running   0          13m
```
vue の v-if でDOMが生成されるまでほんの少しタイムラグがあるよ


例えば、「開く」ボタンを押して open() が呼ばれて isVisible が false から true になったとき、以下のコードで querySelector() がうまく動かないで null が帰ってしまうというケース。

```vuejs

<template>
    <div v-if="isVisible">
        <div class="target"></div>
    </div>
    <div @click="open">開く</div>    
</template>

<script>
  export default {
    data() {
      return {
        isVisible: false,
      };
    },
    watch: {
      isVisible: function(val) {
        if (val === true) {
          // この時点ではまだ isVisible が true になった瞬間なので DOM が書き換わっていないので
          const element = this.$el.querySelector('.target');
          console.log(element); // null になる
        }
      },
    },
    methods: {
      open: function() {
        this.isVisible = true;
      },
    }
  };
</script>

```
なぜこの上のコードでうまくいかないか？ というと、`isVisible`の変更が検知されて`v-if`が評価されるのですが、このタイミングが"即時"ではないので、直後に生成されるはずのDOMを触ろうとしても触れません。


ではいつ`v-if`が評価されてDOMが生成されるかというと"ごくごくすぐ後"です（公式ドキュメントだと次のイベントループという表現でした）。
vue にはそれを表現する方法が良いされていて`Vue.nextTick(callback)`または`vm.$nextTick()`を使います。

例えば以下のようにコードを書き換えます。


```vuejs

<template>
    <section v-if="isVisible">
        <div class="target"></div>
    </section>
    <div @click="open">開く</div>
</template>

<script>
  export default {
    data() {
      return {
        isVisible: false,
      };
    },
    watch: {
      isVisible: function(val) {
        if (val === true) {
          this.$nextTick(() => {
            const element = this.$el.querySelector('.target');
            console.log(element);
          });
        }
      },
    },
    methods: {
      open: function() {
        this.isVisible = true;
      },
    }
  };
</script>

```

これをすると、DOMが生成された後に `querySelector()`を実行することになるのできちんとDOMを取得することができます。


### 蛇足
callback で処理を渡す方法の他に、nextTickはpromiseを返すのでawaitを使って待つこともできるという方法が紹介されていました。こちらもなかなか使いやすそうです。

```vuejs

methods: {
  updateMessage: async function () {
    this.message = 'updated'
    console.log(this.$el.textContent) // => 'not updated'
    await this.$nextTick()
    console.log(this.$el.textContent) // => 'updated'
  }
}
```

### 参考
公式ドキュメント： https://jp.vuejs.org/v2/guide/reactivity.html