OmniAICreator/Qiita-1.07M huggingface dataset:
【Docker】Arukas アプリ作成時にハマったこと（イメージの Tag 名編）

#はじめに

さくらインターネットの Docker ホスティングサービスである [Arukas](https://arukas.io/) でアプリを作成しているときにハマったのでメモ。

#顛末

まず、Arukas で アプリ（＝ Docker コンテナ）を起動するためには、Docker Hub に登録されているイメージを利用する必要があります。

ローカルでビルドしたイメージを`docker push XXXXXX/hoge-repo:Fuga-Image`で Docker Hub に登録。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/258416/a25a6aff-59fd-c54e-6979-b9e4e1dfbe4b.png)

次に Arukas のアプリ追加コンソールを開いて、先程のイメージ`XXXXXX/hoge-repo:Fuga-Image`を指定してアプリ作成ボタンをクリックすると、「指定されている形式で入力してください。」とエラーが出て作成できない。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/258416/0c419246-e2b7-57a3-a7f0-da398e304d8c.png)

なんだろうと思いいろいろ試していると、`XXXXXX/hoge-repo:fuga-image`と、イメージのタグ名をすべて小文字にすると作成できた。[OK]でいざ起動。（実際の試行ではXXXXXXを実在の Docker Hub アカウント名としています）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/258416/8494d994-8a99-277e-ba34-256351fd8d54.png)

するとアプリのステータスが数秒間だけ「アプリはデプロイ中です」となったのち...「アプリの起動に失敗しました」となった。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/258416/3e1115c8-48dc-3d73-7546-320047f1c9cf.png)

アプリ画面の下の方に、`Error response from daemon: manifest for XXXXXX/hoge-repo:fuga-image not found`というエラーが表示されている。なんのこっちゃと調べてもよく分からない。
![スクリーンショット 2019-03-22 22.19.25.png](https://qiita-image-store.s3.amazonaws.com/0/258416/8cb447ad-ae92-1e0c-95b1-6f0932934a61.png)

そこでもしやと思い、イメージのタグを`docker tag 1234abcd5678 XXXXXX/hoge-repo:fuga-image`で小文字に改名して、`docker push XXXXXX/hoge-repo:fuga-image`で再度 Docker Hub に登録してみると...できた。Docker Hub においては大文字と小文字は区別されるらしい。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/258416/cc592981-32c5-8328-547f-4b689d2cdfa4.png)

Arukas のコンソールに戻り、先程エラーとなったアプリを再度起動。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/258416/a52daf4d-eb26-e3c6-4073-1aeed4c12fb5.png)

アプリのステータスがしばらくの間「アプリはデプロイ中です」となったのち、「アプリは起動状態です」となり起動できた。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/258416/57eb3488-c880-71fb-e208-1c33db21348f.png)

#結論

「Arukas ではタグ名が大文字のイメージを利用してアプリを作成することができない」仕様のようです。

よって、そのようなイメージを利用したい場合は、そのイメージを一度別環境に*pull*して、*tag*で改名して、自身の管理する Docker Hub に*push*して登録し直す、という対処が必要となります。

そして「Docker の Tag 名は大文字と小文字が区別される」という基本的なことが分かっていませんでした。

#おわりに

Arukas の仕様と自身の未熟さに振り回された１時間でした。
PowerPointのスライドを画像ファイルとしてExportするVBScript

##使い方
vbsファイルのアイコンにPowerPointファイルを Drag & Dropすると
PowerPointの各スライドを画像ファイルとして出力します。


##コード
```vb
'[PowerPointExport.vbs]'

Option Explicit
Dim p, f, s
With CreateObject("PowerPoint.Application")
    Set p = .Presentations.Open(WScript.Arguments(0), -1, 0, 0)
    With CreateObject("Scripting.FileSystemObject")
        f = .BuildPath(.GetParentFolderName(WScript.ScriptFullName), p.Name)
        If Not .FolderExists(f) Then .CreateFolder f
        For Each s In p.Slides
            s.Export .BuildPath(f, s.SlideNumber & ".png"), "png"
        Next
    End With
    .Quit
End With
```
【メモ】CentOS 7.5 テンプレート作成 (vSphere)

TerraformのプロバイダーでVMware vSphereが用意されている。
仮想マシンをテンプレートから新規に作成することができるが、ホスト名、固定IPなどをTerraformから設定するには少し準備が必要だったのでメモ。注意点としてはテンプレートを作成する前に一度「open-vm-tools」を実行させないと自動デプロイに失敗すること。

# Ansible 用 SSH 鍵の配置
テンプレートから仮想マシンを作成後にすぐにAnsibleを実行させたいのでssh鍵の設定を行う。

```
ssh root@10.8.95.14 mkdir -m 700 ~/.ssh
scp ~/.ssh/id_rsa.pub root@10.8.95.14:~/.ssh/authorized_keys
```

## 自動デプロイ必要な設定
以下パッケージをインストール

 - yum-utils
 - open-vm-tools
 - open-vm-tools-devel

open-vm-toolsのインストール後一度実行

```
service vmtoolsd start
```

ホストマシンからVMware Toolsが実行中になっていることを確認

![image.png](https://qiita-image-store.s3.amazonaws.com/0/65683/4814de29-56a3-d400-5964-03ae0f2b995e.png)

こうしないと以下エラーが発生する。

>*ゲスト OS「centos7_64Guest」のカスタマイズは、この設定ではサポートされていません。論理ボ リューム マネージャを持つ Microsoft Vista (TM) と Linux ゲストは、最新の ESX ホストおよび VMware Tools バージョンでのみサポートされています。サポート対象の設定については、vCenter Server のドキュメントを参照してください。*

## テンプレートの作成手順
以下、サイトを参考にテンプレートを作成する
[How to: Create a RHEL/CentOS 6/7 Template for VMware vSphere](https://community.spiceworks.com/how_to/151558-create-a-rhel-centos-6-7-template-for-vmware-vsphere)

## おまけ：テンプレート作成用スクリプト

上記サイトを参考にスクリプトを作成してみた。

```bash
ssh root@10.8.0.14 <<EOS
date
uname -n
uname -a
yum update --skip-broken -y
yum install -y perl yum-utils open-vm-tools open-vm-tools-devel
/sbin/service vmtoolsd start
/bin/sleep 20
/sbin/service rsyslog stop
/sbin/service auditd stop
package-cleanup --oldkernels --count=1 -y
yum clean all
/usr/sbin/logrotate -f /etc/logrotate.conf
/bin/rm -f /var/log/*-???????? /var/log/*.gz
/bin/rm -f /var/log/dmesg.old
/bin/rm -rf /var/log/anaconda
/bin/cat /dev/null > /var/log/audit/audit.log
/bin/cat /dev/null > /var/log/wtmp
/bin/cat /dev/null > /var/log/lastlog
/bin/cat /dev/null > /var/log/grubby
/bin/rm -f /etc/udev/rules.d/70*
/bin/sed -i '/^(HWADDR|UUID)=/d' /etc/sysconfig/network-scripts/ifcfg-e*
/bin/rm -rf /tmp/*
/bin/rm -rf /var/tmp/*
/bin/rm -f /etc/ssh/*key*
/bin/rm -f ~root/.bash_history
unset HISTFILE
/bin/rm -f ~root/anaconda-ks.cfg
history -c
uname -n
date
sys-unconfig
EOS
```
PowerPointの図形の位置や大きさを揃えるVBScript

##これは
PowerPointのスライド上に配置した複数の図形について、
位置や大きさを揃えたい場合に使用するVBScriptです。

##作成の経緯
これまでは資料作成といえばExcelだったのですが、
（それはそれでどうなんだというはなしはさておき）
最近なぜかPowerPointの資料を作る機会が増えてきました。

操作に不慣れな分をマクロ化で補おうと思ったのですが、
Excelの個人用マクロブックみたいなものがPowerPointに見当たらず、
俺メニュー的なものをどう作っていいのか悩んだ末に、
とりあえず、VBScriptでPowerPointを操作するという手段を採用することにしました。


##使い方
まず基準とする図形を一番最初に選択し、
Shiftを押しながら他の図形をクリックして選択していきます。
その状態でこのスクリプトを実行すると・・・ という感じです。


##コード
以下のコードは幅・高さ・左端を揃えるようになっています。

```vb
'[ShapeAlign.vbs]'

ShapeAlign

Sub ShapeAlign()
    Const W = True
    Const H = True
    Const L = True
    Const T = False
    Dim f, s
    With GetObject(, "PowerPoint.Application").ActiveWindow.Selection
        If Not .Type = 2 Then Exit Sub
        Set f = .ShapeRange(1)
        For Each s In .ShapeRange
            If W Then s.Width = f.Width
            If H Then s.Height = f.Height
            If L Then s.Left = f.Left
            If T Then s.Top = f.Top
        Next
    End With
End Sub
```
Elmでページ内ジャンプをしたメモ

## 結論

* Navigation.load id

検索ワードが思い浮かばなくて、なかなか上記の結論にたどり着けませんでした。

```elm:view
 a [ onClick (PageAnchor "#some_id") ] [ text "ジャンプ！" ]

-- 省略

  div [ id "some_id"][]

```

```elm:update
type Msg
    = PageAnchor String

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        PageAnchor id ->
            ( model, Navigation.load id )
```

## きっかけ

縦に長いページを作っていて、目次を作って飛べるようにしたかった。
ただ、Browser.applicationを使っていると、aタグのhrefに#idのように指定しても、
URLが変わるだけでページ内遷移しない。

## 失敗したパターン

https://package.elm-lang.org/packages/elm/browser/latest/Browser-Dom#setViewportOf
「Change the x and y offset of a DOM node’s viewport by ID. 」って書いてあって、
DOMの位置までスクロールしてくれるのかな、と思ったけれどそんなことはなかった。
そもそも、上のリンク先にあるサンプルコードをいれると以下のエラーがでた。

```

 Dom.getViewportOf id
|> Task.andThen (\info -> Dom.setViewportOf id 0 info.scene.height)
|> Task.perform (\_ -> NoOp)
 ^^^^^^^^^^^^^^^^^^^^^^^^
| The argument is:
|     Task Dom.Error ()
| But (|>) is piping it a function that expects:
|     Task Never ()
```

以下のように、Task.attemptに変えたら動いたけれど、なんで動かないコードが載ってるんだろう。
performが指定してあるということは、以前は失敗しなかったのかしら？

```elm
import Browser.Dom as Dom
import Task

type Msg = NoOp

jumpToBottom : String -> Cmd Msg
jumpToBottom id =
  Dom.getViewportOf id
    |> Task.andThen (\info -> Dom.setViewportOf id 0 info.scene.height)
    |> Task.attempt (\_ -> NoOp)
```

### 中途半端な成功

さて、失敗したときに、何も起こらなかったら完全にelmが動いていないのだなと思うのだけれど、
jumpToBottom id を使ったときには、新しく開いたタブに直接http://hoge/fuga#some_id と打てば、
その場所まで遷移するという動きをしていた。

### 助言

discordのbeginnersスレッドで困っていたら、ヤギの方が助言をくださった。

「setViewPortOf は、IDで指定した スクロール可能な 要素を任意の位置にスクロールするものであって、スクロール可能な要素に 含まれる要素 をIDで指定してその要素のところまでスクロールさせるものではないです。」

「新しいタブにURLを入れてアクセスした時は、ブラウザがハッシュ値を見てブラウザの機能でそのハッシュ値のIDを持つ要素のところまでスクロールしてるからですね！」

え、ブラウザの機能より前にelm動いてるの。意外。
もしかしたら暗黙的にNavigation.load idが呼ばれてるかもだけど。

## 解決

「Navigation.load "#id" を実行したら、実はページリロード無しで id 要素までスクロールしてくれたりしないでしょうか？」

Navigationってこれかー。
https://package.elm-lang.org/packages/elm/browser/latest/Browser-Navigation

すんなりうまくいきました。

## 補足

内部的には普通にwindow.location呼んでるんですね。
jsでどうやるかは知ってても、elmでどうやるかに応用がうまくできないなぁと。
とりあえず、このあたりの機能は Browser モジュールにないか探してみようと思いました。



https://github.com/elm/browser/blob/1.0.1/src/Elm/Kernel/Browser.js#L451
https://developer.mozilla.org/ja/docs/Web/API/Window/location
anacondaをubuntuにインストール・pythonのversionお手軽変更

自分のミスでubuntuを入れ直したので次に設定する際により早く復旧できるように記録．

# anacondaのイントール

[このリンク](https://www.anaconda.com/distribution/#linux)から目的のパッケージをインストール．自分の場合は64bit(x86)用のものを取得．

[注意]
なぜかデフォルトがMacOSのものになっているため，何も考えずにポチポチ押すとMacOSのものがインストールされる．

# 実行

以下を実行して環境を入れる．

```
bash ~/Downloads/Anaconda3-2018.12-Linux-x86_64.sh
```

# ポチポチ
適当にポチポチしているとインストール終了．以下のコマンドを打つ，もしくはterminalを再起動することでcondaにpathが通って以下のinstallができる．

```terminal
source ~/.bashrc
```

# パッケージ

好みに合わせてパッケージをインストール．

```terminal
pip install seaborn
pip install tqdm
pip install simplejson
pip install requests
pip install selenium
```

ついでにpytorchも入れる．

```terminal
$ conda install pytorch torchvision cudatoolkit=9.2 -c pytorch

# verification
$ ipython
Python 3.7.2 (default, Dec 29 2018, 06:19:36) 
Type 'copyright', 'credits' or 'license' for more information
IPython 6.5.0 -- An enhanced Interactive Python. Type '?' for help.

In [1]: import torch

In [2]: x = torch.rand(5,3)

In [3]: print(x)
tensor([[0.9174, 0.4211, 0.9548],
        [0.0416, 0.2002, 0.7877],
        [0.1526, 0.1630, 0.2964],
        [0.7688, 0.2745, 0.9678],
        [0.5461, 0.8683, 0.6205]])


```

# 余談(pythonのversion変更)

```terminal
conda create -n 環境名 python=x.x
conda activate 環境名
```

.bashrcに`conda activate 環境名`を加えておけば，defaultのpythonのversionも変えることができる．

```
conda env list
```

上記のコマンドで今までに作成した環境一覧を閲覧可能．
ubuntuでsublime textをterminalから開く

ubuntuでsublime textをterminalから開きたい．

# Download

[このリンク](https://www.sublimetext.com/3)からまずは圧縮ファイルをダウンロードする．

# 解凍

sublime_text_3_build_3200_x64.tar.bz2を解凍

```terminal
tar -jxvf sublime_text_3_build_3200_x64.tar.bz2
```

# ディレクトリを移動

好きな場所に移動させる．自分の場合はHomeの直下にapplicationsというディレクトリを作成．

```terminal
mv ~/Downloads/sublime_text_3 ~/applications
```

# シンボリックリンクを貼る

sublという名前のシンボリックリンクをディレクトリ内の目的のexeファイルに貼る．

```terminal
gedit ~/.bashrc
```

以上で，.bashrcを開き，末尾に下のものを貼り付け．

```terminal
alias subl=~/applications/sublime_text_3/sublime_text
```

terminalからどこにいてもsublime textを呼び出せるようになりました．
めでたし．
【Ruby on Rails】Railsの日本語化対応

Railsで日本語でenumを使うところまでのメモ。

#まずは基本的な設定から
config\initializersにlocale.rbを作成し、以下を記述。

```config\initializers\locale.rb
Rails.application.config.i18n.default_locale = :ja
```
下記URLから日本語化用のja.ymlをダウンロードし、config\localesに置く。
https://github.com/svenfuchs/rails-i18n/blob/master/rails/locale/ja.yml

deviseを使う場合はこちらもダウンロードして、config\localesに置いておくと便利。
http://qiita.com/MasatoYoshioka@github/items/8d910e793e7c485403bb

これで基本的なフォームのラベルやエラーメッセージは日本語に対応することができる。

#ja.ymlの編集
日本語に対応する部分を編集する。

```config\locales\ja.yml
---
ja:
  activerecord:
    errors:
      messages:
        record_invalid: 'バリデーションに失敗しました: %{errors}'
        restrict_dependent_destroy:
          has_one: "%{record}が存在しているので削除できません"
          has_many: "%{record}が存在しているので削除できません"
    attributes:
      user:
        name: 名前
        email: メールアドレス
        birth_date: 年齢
        sex: 性別
        school: 学校名
        admin: 管理者権限
        password: パスワード
        password_confirmation: パスワード（確認）
        created_at: 登録日時
        updated_at: 更新日時
        remember_me: ログインを記憶する
```
attributeの後に日本語に対応した部分を記述する。ここではUserモデルに対して追加した。

こうすることで以下のように使える。(コンソールで実行)

```bash
irb(main):001:0> User.human_attribute_name(:name)
=> "名前"
irb(main):002:0> User.human_attribute_name(:email)
=> "メールアドレス"
```
こんな使い方もできる。

```bash
irb(main):003:0> Time.now.to_s(:ja)
=> "2019年03月22日 19時13分"
```
#enumの日本語化対応
まずenumの設定

今回は性別をenumで管理する場合を考える。
以下のマイグレーションを実行。

```bash
class AddColumnUsers < ActiveRecord::Migration[5.1]
  def change
    add_column :users, :sex, :integer
  end
end
```

性別をenumで管理するための設定を追加する。

```Ruby:User.rb
class User < ApplicationRecord
  enum sex: { woman: 0, man: 1 }
end
```
enumを簡単に日本語化できるgemがあるのでGemfileに以下を追加してbundle。

```
gem 'enum_help'
```

これで以下のように日本語でenumから値を取り出せる。

```bash
irb(main):004:0> User.last.sex_i18n
  User Load (1.0ms)  SELECT  "users".* FROM "users" ORDER BY "users"."id" DESC LIMIT $1  [["LIMIT", 1]]
=> "女性"
```
enumで扱う値はselectboxを使うことが多いため、formでは以下のようにmapを使うと簡単に実装できる。(sexesのように複数形になることに注意)

```edit.html.slim
    = f.select :sex, User.sexes_i18n.keys.map {|k| [User.sexes_i18n[k], k]}, {}, autofocus: true
    = f.label :school
```
![enum_select.png](https://qiita-image-store.s3.amazonaws.com/0/300925/64447592-cb56-2e13-7724-e1da52a65f40.png)

#最後に
多言語化対応しない場合でも、ラベルも日本語で直接書くよりも常にhuman_attribute_name等を使った方が後々ja.ymlだけを編集すればよくなるので楽かも。
私はスシローのUXに猛烈に感動している。

こんにちは。寿司といえばもっぱら回る方のエンジニアです。

皆様、スシローをご存知ですか？
[株式会社あきんどスシロー](https://www.akindo-sushiro.co.jp/company/profile.php)様が運営する、回転寿司チェーンです。
驚くべきコスパで提供される寿司、サイドメニューの豊富さ、数多くの強みを持つお寿司屋さんですが、その中で私が最高に良いと思うのは、座席に取り付けられた注文用のタッチパネルのUXが素晴らしいのです。

※私自身は月３くらいでスシローに行く以外、株式会社あきんどスシロー様とはなんの関係もありません。

本ページでは、スシロータッチパネルのUIの良さを私なりに文章化してみます。

# 感動ポイント１：繰り返し行う作業は手数を短くする。
スシローのUIの基本構成はこうなっています。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/25176/c8800f13-d0f9-04be-8064-3a4790621eef.png)

そして、この画面で「注文する」を押すと、注文が完了します。
このあとに「確認画面」を配置し、顧客の確認を取りたくなりますが、我らがスシローはそれをしません。
注文は、寿司屋さんで何度も繰り返し行う作業です。
何度も行うことは、少ない手番で完了させる。その意志を感じます。
他の回転寿司チェーンだと確認画面を配置しているところがありますが、スシローのUIを体験したあとだと、なんともストレスになります。
我らがスシローUIでも、呼び出し/会計では、確認画面（「はい」で実行、「いいえ」で取り消しできる画面）を設けています。つまりは「注文する」では、意図的に「確認画面」を設けていないのです。構築時には激しい検討があったものと推察しますが、この気持ちいいUIを決定できる構築チームに私は感動しています。

# 感動ポイント２：すぐに次の作業に移れる。
「注文する」ボタンを押すと、即座に注文され、
![image.png](https://qiita-image-store.s3.amazonaws.com/0/25176/1325dd2a-c7c2-6416-9124-299080545a22.png)

という画面に行きます。この画面、どこを押してもすぐに直前の注文選択画面に戻ることができるのです。言わずもがな、直前に操作していたページに戻ります。
これが、「一旦ここまでを区切りとして注文しておこ。」というときに相当気持ちいい動きになります。他の回転寿司チェーンだと、きっと通信しているのでしょう。「注文中です。。。。」でしばらく待たされます。できるだけ注文を纏めて行いたくなりますし、更には、もう注文したくありません。これは店舗側にとっては寿司料理負荷の時間帯集中にも繋がりますし、注文減にもなるでしょう。
スシロー端末も通信時間はあるはずなのですが、それを見せないようにする技術陣に私は感動しています。

# 感動ポイント３：気の利いた誤操作防止
注文したお寿司はレーンを流れてやってきます。近くまで寿司が来たときに、音声とともにタッチパネルが、
![image.png](https://qiita-image-store.s3.amazonaws.com/0/25176/9f7e21da-1b97-8f6a-3b89-0af4032c0497.png)

「お寿司きましたよ画面」になるのですが、この画面、しばらく操作できないようになっています。
席に座っている間、気持ち良いUIをガシガシ触っていることが多いので、操作中にお寿司きましたよ画面になることがあります。
もし、この画面が操作によって消えてしまうと、来たのがどのお寿司かわからなくなってしまうところ。これは実際に使ってみないとなかなか気づけないUXだと考えます。こういう誤操作防止をきっちりと組み込んで来るUXを検討・実装できることに感動しています。

# 感動ポイント４：ユーザシナリオを練り上げている。
お寿司が並ぶ注文画面はタブで分類された構成になっていますが、画面最下部に配置されている「次へ」ボタンは、タブをまたぐことができます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/25176/e919862d-835c-dbc1-7caf-aaf8bfb1fec9.png)

すなわち、タブに入ったメニューの最後のページまで行っても「次へ」ボタンは有効になっており、ボタンを押すと、次のタブの一番最初のページが表示されます。
これは、2つのユーザーシナリオに対応したUIであると想像します。
1. 食べたいものが決まっていて、それを探すための、タブ分類によるUI
2. 食べたいものを探すために、メニューを流し読みするための、次へによるUI
両方のユーザシナリオを両立させるためのうまく考えられたUIです。この両立に私は感動しています。

あと、（私の知識の及ばないところで練られに練られたのかもしれませんが、）タブのデザインやボタンのデザイン、配色がなんともダサいところが、なんとも愛着がわきます。
スシローのUXには、他にも私が言語化できていないポイントが沢山あると考えています。全国の回転寿司エンジニアの皆さんも、感動ポイントを教えていただけると嬉しいです。
ubuntuのかな切り替えをctrl + spaceに変更

ubuntuのキーボードをctrl spaceで切り替えたい．

### 0．ubuntuで言語に日本語を選択しても日本語で入力できない問題

```terminal
#ibus-mozcを入れる
$ sudo apt-get install ibus-mozc

#ibusを再起動
$ killall ibus-daemon
$ ibus-daemon -d -x &
```

---

### 1．下図のToolsからpropertiesを選択．

![image.png](https://qiita-image-store.s3.amazonaws.com/0/355593/a420ee92-09b7-8de6-87fc-d454f212931b.png)

---

### 2．Keymap styleのcustomizeを選択．

![image.png](https://qiita-image-store.s3.amazonaws.com/0/355593/a9efba0d-9c4b-2b68-d783-e1ca50641f76.png)

---

### 3．commandのコメントがdeactivate IME, activate IMEとなっているものに関して，Keyをctrl spaceに変更し，適応．

![image.png](https://qiita-image-store.s3.amazonaws.com/0/355593/2914cc5c-a91d-8586-072c-d952eee3143e.png)

---

### 4．terminalからsudo rebootで再起動．

```terminal
sudo reboot
```

無事設定できました．
【MEL】 キーフレームが無いアトリビュートにキーを打つ MEL スクリプト

<p><img class="float" src="https://dl.dropbox.com/s/9iob51hzuh29ljw/_icon_Mel_2012.png" /></p>


レンダリングするためにアニメーションカーブを書き出すのは良くある話。

コントローラーの全アトリビュートをベイクする仕様なら問題も無いんだけれど、使いまわしが出来るようにアニメーション作業で作ったデータをそのまま書き出さなきゃならない時もある。



<!--more-->



単純にコントローラー全部にキーを打つと、既存のアニメーションカーブのタンジェントの向きが変わってしまう。
で、キーが打たれていないアトリビュートにのみキーを打つ MEL スクリプトが必要。



## VerifyKeyframesOnKeyableAttributes.mel

選択しているオブジェクトの Keyable 属性で、キーフレームもコネクションも無いアトリビュートすべてにキーが打たれる。


```mel
{
  string $objList[] = `ls -sl -objectsOnly`;
  for($obj in $objList)
  {
    string $attrList[] = `listAttr -keyable $obj`;
    for($attr in $attrList)
    {
      if(0 == size(`listConnections -s 1 -d 0 ($obj+"."+$attr)`) )
      {
        evalEcho setKeyframe -insertBlend false ($obj+"."+$attr);
      }
    }
  }
}
```



----
※ 旧ブログから移転した投稿です。
> [【MEL】 キーフレームが無いアトリビュートにキーを打つ MEL スクリプト](https://www.sator-imaging.com/2012/07/mel.html)
<iframe
    class="embed-card embed-webcard"
    scrolling="no"  frameborder="0"
    style="
        display: block;  border: none;
        margin: 10px 0px;
        width: 100%; height: 155px;
        max-width: 500px;
    "
    src="https://hatenablog-parts.com/embed?url=https://www.sator-imaging.com/2012/07/mel.html">
</iframe>
Javaの制御構文

# **今日学習したこと**

## 命令実行文

```ruby:java
System.out.println(); 
#引数に取った値を改行して表示する。

System.out.print(); 
#引数に取った値を改行せず表示する。

int 変数名 = Math.max( a , b ); 
#引数を比較し大きい方の数値を代入する。

int 変数名 = Integer.parseInt(文字列もしくはString型の変数); 
#文字列を数字に変換する。例えば、"100"とか、、、

int 変数名 = new java.util.Random().nextInt(上限値);
#nextInt();で引数に数字を取るとその数値未満の数がランダムで生成される。(0~上限未満)

String 変数名 = new java.util.Scanner(System.in).nextLine();
#キーボードから１行の文字列の入力を受け付ける。

int 変数名 = new java.util.Scanner(System.in).nextInt();
#キーボードから１つの整数の入力を受け付ける。
```



## 代表的な制御構文

- **if文(条件分岐)**

```ruby:java
if (条件式) {
  条件がtrueの場合ここのブロックの処理が動く。
} else {
  条件がfalseの場合ここのブロックの処理が動く。
}


#またif文はネスト(入れ子)することができる。
if (条件１) {
  trueの場合の処理 #falseであれば条件２に移る。
} else if (条件２) {
  trueの場合の処理 #falseであれば条件３に移る。
} else if (条件３) {
  trueの場合の処理 #falseであればelseの処理に移る。
} else {
  全てfalseの場合の処理
}
```

- **switch文**

```ruby:java
switch (変数名) {
  case 〇〇:
    変数の中身が〇〇だった場合の処理
    break;

  case △△:
    変数の中身が△△だった場合の処理
    break;

  case ××:
    変数の中身が××だった場合の処理
    break;

  default:
    caseのどれにも当てはまらなかった場合の処理(いらないなら省略可)
}
```
・switch文は右辺と左辺が一致するかの比較する式しか使用できない。(<,>,!=,などは使用できない)

・比較する値が整数、文字列、または文字でのみ使用可(少数や真偽値は使用できない)

・switch文は当てはまるcaseにジャンプするだけなのでbreakを記述しないと特定のcaseまで飛んだ後そこからまた順次プログラムを読み込んでしまう。
※break文とは: 処理を中断し終了させるメソッド。

- **while文(繰り返し)**

```ruby:java
while (条件式) {
  trueの場合の処理 #trueになるまで永遠にループする。
}
```

- **for文(指定回数繰り返す)**

```ruby:java
for (初期化処理, 繰り返し条件, 繰り返し時処理) {
  繰り返す処理
}

#例えば
for (int i = 0, i < 10, i++) {
  System.out.println(i); 
}
#変数iを初期化して0を代入している。iが10より大きくなるまでブロック内の処理を行う。
#処理を行うたびにi++(変数iに1を足す)という処理を行う。
```

※continue文とは: 指定した周回を中断し、次の週に移る。

※スコープとは: 変数の使用できる範囲のこと。ブロック内の変数はそのブロック内でしか使用できない。(そのブロック内が変数のスコープとなる)
[Nuxt.js 2.5.0] 既存のNuxtプロジェクトをTypeScript対応にする 

Nuxt.jsの2.5.1がリリースされました。
今回のリリースでTypeScript対応がさらに強化され、nuxt-tsに依存せず、
NuxtだけでTypeScriptが簡単に使えるようになりました。
早速、既存プロジェクトにTypeScriptを導入してみたので、備忘録としてまとめます。

![スクリーンショット 2019-03-22 20.13.18.png](https://qiita-image-store.s3.amazonaws.com/0/114396/1b0cc162-3fec-dae8-b6ce-6c0281096161.png)

# 1. Nuxtのアップデート

Nuxtを最新版にします
さらに依存モジュールもすべてアップデートしたいので、node_moduleを全削除し再インストールします。
この時、packageのインストールバージョンを管理しているyarn.lockも一緒に削除してください。

```bash
// packageの削除
$ rm -rf node_modules/
// yarn.lockの削除
$ rm yarn.lock
// 再インストール
$ yarn
```

インストール完了後、yarn.lockを確認し、nuxtのバージョンが2.5.0以上になっていればOKです。

```yarn.lock
"@nuxt/babel-preset-app@2.5.1":
  version "2.5.1"
```

# 2. typescript対応モジュールの追加
nuxtをTypeScriptに対応させるため、モジュールを追加します。
vue-property-decoratorは@Propや@EmitなどVue対応の便利なデコレータを使用するためのものです。

```bash
$ yarn add -D @nuxt/typescript
$ yarn add vue-property-decorator 
```


# 3. tsconfig.jsonの追加
typescriptのコンパイル時の設定ファイルとなるtsconfig.jsonを追加します。
2.4.0以前は、こちらも自分で追記しなくてはならなかったのですが、2.5.0以降では初回起動時に自動で追記されます。
親切すぎる！

```bash
$ echo "{}" > tsconfig.json
```

# 4. ESLintのTypeScript対応
私の環境だとESLintがTypeScriptのデコレータに対応せず、落ちてしまいました。
なのでESlintをTypeScript対応に修正します。

まず、moduleの追加

```bash
$ yarn add -D @typescript-eslint/parser
```

続いてeslint.jsの修正

```js:.eslint.js
module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  // ここから追加
  parserOptions: {
    ecmaVersion: true,
    parser: "@typescript-eslint/parser",
    ecmaFeatures: {
      legacyDecorators: true
    }
  },
  // ここまで
  "extends": ['vue', 'plugin:vue/recommended'],
  plugins: [
    'vue',
    'pug'
  ],
  // add your custom rules here
  rules: {}
}

```

# 5. TypeScrupt化

ここまでで準備完了です。
あとは既存の.Vueファイルをlang="ts"で記述してみましょう。

変更前のファイル

```vue:AppH1.vue
<template lang="pug">
  h1.mincho {{ headText }}
    span {{ headSubText }}
</template>

<script>
export default {
  name: 'AppH1',
  props: {
    headText: { type: String, require: true, default: '' },
    headSubText: { type: String, require: true, default: '' }
  }
}
</script>
```

TS化

```vue:AppH1.vue
<template lang="pug">
  h1.mincho {{ headText }}
    span {{ headSubText }}
</template>

<script lang="ts">
import { Vue, Prop, Component } from 'vue-property-decorator'

@Component
export default class AppH1 extends Vue {
  @Prop({
    default: ''
  })
  headText!: string;

  @Prop({
    default: ''
  })
  headSubText!: string
}

</script>
```

早速起動してみましょう。
ちなみにnuxt 2.5.0以降 -o オプションをつけると起動画面でカッコいいLoadingが走ります。

```bash
$ yarn run dev -o
```

![スクリーンショット 2019-03-22 21.05.53.png](https://qiita-image-store.s3.amazonaws.com/0/114396/f5c24b07-fa8f-4936-e6e8-0b005ab8aa8c.png)





これで完了です！！
あとはひたすら既存.vueファイルをlang="ts"に変更するのみ！
ix2015のFWをアップテートする方法

似たような記事は結構あるけど、tftpサーバを用意する方法が省略されていることが多くて不便だったので、自分用のメモを兼ねて。

また、今回は`ix2010-ms-7.3.21.ldc`から`ix2010-ms-8.3.8.ldc`にしたので、それを例にします。

## まずはバックアップ
まずは、元々入っているFWをバックアップします。

### 空ファイルを用意
ix2015からtftpコマンドを打つときに、送信先に指定したファイルがないと送れないようなので、空ファイルを作っておきます。また、docker周りの実行ユーザー権限が面倒なので、雑にファイルに全権限つけます。(時間があったらちゃんと調べるけど、多分しない。)

```sh:手元のマシン
touch ix2010-ms-7.3.21.ldc
chmod 777 ix2010-ms-7.3.21.ldc
```

### tftpサーバーの準備
(ちょっと不安だけど)野良Dockerイメージを使って起動します。

```sh:手元のマシン
docker run --net host -v $(pwd):/var/tftpboot -i -t pghalliday/tftp
```

### ix2015をLANに参加させる
ix2015を手元のマシンとIPで繋がるようにします。

```:ix2015
Router# enable-config
Router(config)# interface FastEthernet0/0.0
Router(config-FastEthernet0/0.0)# ip address dhcp receive-default
Router(config-FastEthernet0/0.0)# no shutdown
Router(config-FastEthernet0/0.0)# exit
Router(config)# exit
```

### FWの送信
ix2015のファイルをtftpサーバーに送信します。

手元のマシンのIPは`192.168.100.10`だと仮定します。

```:ix2015
Router# enable-config
Router(config)# tftp put ix2010-ms-7.3.21.ldc 192.168.100.10:ix2010-ms-7.3.21.ldc
Router(config)# exit
```

## FWの置き換え

### FWの受信
同じ手順で別のix2015から新しいFWなどを取得するなどして、新しいFWをix2015に受信させます。

```:ix2015
Router# enable-config
Router(config)# tftp get 192.168.100.10:ix2010-ms-8.3.8.ldc ix2010-ms-8.3.8.ldc
Router(config)# exit
```

### 古いFWの削除
もういらないので、記憶領域を確保するために古いFWを削除します。

```:ix2015
Router# enable-config
Router(config)# erase ix2010-ms-7.3.21.ldc
Router(config)# exit
```

### FWの確認
一応、FWの状況を確認しておきます。

```:ix2015
Router# enable-config
Router(config)# show flash
Codes: R - Runnable, A - Active-file
Length     Name                          Status
3638055    ix2010-ms-8.3.8.ldc           RA

[3665088 bytes used, 3403186 available, 7068274 total]
6912 Kbytes of processor board System flash (Read/Write)
Router(config)# exit
```

### FWファイルの権限を戻しとく
一応、バックアップしたファイルを戻しておきます。


```sh:手元のマシン
chmod 644 *.ldc
```




以上です。
ローンチチェックリスト： 考慮漏れが多そうな部分編

ローンチチェックリストは皆さん作成されていると思いますが、
その中でも考慮が足りてなさそうな部分です。

### リリース直近のマーケティングイベントは把握していますか？

- [ ]  プレスリリース
- [ ]  SNS
- [ ]  広告
- [ ]  TV等の露出
- [ ]  特にないはず

### リリース手順書

- [ ]  リリース手順書がある
- [ ]  巻き戻し計画がある
- [ ]  リハーサルをした
- [ ]  巻き戻しのリハーサルをした
- [ ]  巻き戻し、中止の判断基準がある
- [ ]  中止時の影響を理解している

### 打鍵

- [ ]  特殊なデバイスでの検証がスムーズにできる
- [ ]  特殊な環境での検証がスムーズにできる

### サードパーティ、チーム外といった依存関係のあるサービス、システム、インフラへのリクエストについて、疎通確認はできていますか？

- [ ]  まだしていない
- [ ]  確認していないが、仮に失敗してもスケジュール上リカバリがまだ効く
- [ ]  疎通だけ確認した
- [ ]  リリースするアプリケーションを打鍵し、結果を確認した



### 緊急時の対応

- [ ]  war roomがあり、意思決定者が集まっている
- [ ]  適切な道具を準備している
- [ ]  遠隔地とビデオ会議をつなげている
- [ ]  別の階や部屋レベルでもビデオ会議をつなげている
- [ ]  食料を確保している
- [ ]  休む場所がある
- [ ]  終電越えても大丈夫
- [ ]  ユーザーの声を拾う仕組みがある
- [ ]  緊急自体が長引いたときのハンドオフの仕組みがある

### リリースサイズ

- [ ]  スモールスタートになっている
- [ ]  やりきるしかない

### 気合
- [ ]  自信を持ってリリースできる
- [ ]  各メンバーの不安が解消されている
- [ ]  各メンバー、関係者にこっそり聞くと不安がでてくる
- [ ]  仮に障害が起きるとしたらどこに起きそうか確認している


ローンチチェックリスト全体はいつか公開したい...

関連記事
[大規模データ移行の失敗を防ぎたい。計画やプログラム、インフラの注意点と、ありがちなこと - Qiita](https://qiita.com/yoshi-taka/items/35d3ed126f4d45e9662d)
UnityプロジェクトをGitHubで管理するためのシンプルな初期設定

UnityプロジェクトをGitHubで管理します。
書いてみるとどうということはないですが、少しひっかかったのでまとめました。


# Unityでプロジェクトを作成
まずはふつうにUnityでプロジェクトを作成します。
UnityHubから[新規]で適当なプロジェクト名を入力して作成。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/372677/0cb52f46-be3f-a0b8-a8ba-71bcfa174f45.png)

しばらくするとUnityが立ち上がるので
[Edit]->[ProjectSettings]で
Version Controlが`Visible Meta Files`、
Asset Serializationが`Force Text`になっているのを確認。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/372677/5f7c099e-1da8-64aa-25a9-a4f6a10a8410.png)

Unityの操作はこれだけです。

# GitHubでリモートリポジトリを作成
GitHubのサイトへいき、リポジトリ新規作成ページから、リポジトリを作ります。
**この際、[Add .gitignore]のプルダウンで[Unity]を選択してください。(重要)**
[Initialize this repository with a README]のチェックはしなくてかまいません。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/372677/444d2871-3e12-3314-b435-b4dd8927cd1d.png)


# ローカルリポジトリを作る
次に、ローカルリポジトリを作るため、コマンドラインツールで先程つくったUnityプロジェクトのフォルダ階層に移動し

```terminal
git init
git remote add origin [リモートリポジトリのURL]
```

で、ローカルリポジトリとリモートリポジトリをリンクします。

# .gitignoreをローカルに追加する

通常であれば、ここから`add`→`commit`→`push`して完了ですが、
このままだとUnityプロジェクト内の不必要なファイルまでコミットしてしまうため、
リモートリポジトリで自動生成された`.gitignore`をローカルリポジトリに追加します。

```terminal
git pull origin master
```

そのまま通常通り、`add`→`commit`→`push`します。

```terminal
git add .
git commit -m "first commit."
git push origin master
```

作成したUnityプロジェクトがリモートリポジトリに反映されていたら完了です。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/372677/ba8b8b94-5877-2073-c81c-3cec61254546.png)
CSSのみでモーダルを作る

#背景
`css`のみでモーダルを作れることを知り、簡単なものを作ってみました。
#HTML
まずは`HTML`から。

```html:modal.html
<input type="checkbox" id="toggle">
<label for="toggle">open modal</label>

<dialog>
  <p>This is a Modal</p>

  <label for="toggle">close Modal</label>
</dialog>
```

`input`のところが注目ポイントですね。`type="checkbox"`にしてそれを`css`で`checked`で判別します。
また`dialog`の部分がモーダルになります。

#CSS
次に`CSS`です。

```scss:modal.scss
#toggle {
  visibility: hidden;
  opacity: 0;
  z-index: -1;
}

#toggle:checked ~ dialog {
  display: block;
}

//ここからは見た目の調整

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

label {
  border: 5px solid gray;
  background-color: gray;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

dialog {
  border-radius: 5px;
  
  p {
    color: black;
  }
}
```

以上でいけているはずです。

#完成
![image.png](https://qiita-image-store.s3.amazonaws.com/0/286470/e071ecc9-9ea9-9035-8863-a3dd78da36c7.png)

クリックすると

![image.png](https://qiita-image-store.s3.amazonaws.com/0/286470/668fd76f-63f0-04b0-e93b-e237192fc877.png)

#まとめ
とても簡単なものでしたが、`CSS`のみでモーダルを作ってみました。
参考になれば幸いです。
railsチュートリアル　第三章


##はじめに
railsチュートリアルで理解しにくいところや、詰まったところを書いていく記事になります。
なので、手順を示す記事とはなっていません。

##Gitリポジトリの追加

```
$ git init
```
このコマンドは**Gitのリポジトリを新たに作成するため**のもの。
また、**既にあるリポジトリを再初期化するため**のもの。
ディレクトリを指定しなければ、コマンドを実行したワーキング・ディレクトリの直下にリポジトリのための「.git」というサブディレクトリが作成される。

```
$ git add -A
```
**git add は、作業ディレクトリ内の変更をステージングエリアに追加するコマンド。**
このコマンドは、個々のファイルのアップデート内容を次回コミット対象とするよう、Git に指示する。
ただし、実際には git add コマンドだけではリポジトリに何も影響しない。
**git commit コマンドを実行するまで、変更が実際に記録されることはない。**

```
$ git commit -m "Initialize repository"
```
**git commitを利用すればファイルの変更をgitレポジトリに保存することができる。**
-m はコミットにメッセージをつけるオプションとなる。
また他にも　-a は「全てを変更する」を意味するオプションとなる。

###herokuへのデプロイ

```
$ git remote add origin git@bitbucket.org:ユーザー名/sample_app.git
$ git push -u origin --all 
```
一つ目のコマンドで、リモートリポジトリを追加し、
二つ目のコマンドで**ローカルのmasterブランチをリモートリポジトリherokuへpush**する

##ブランチの切り替え
Gitを使う場合は、**masterブランチでずっと作業するのではなく、その都度トピックブランチを作成して作業するのがよい習慣**、とのこと。

```
$ git checkout -b static-pages
```
コマンドを打つことによって、トピックブランチをチェックアウトすることができる。

また「-b」オプションを指定することで、ブランチの作成とチェックアウトを同時に行うことができる。

##コントローラの作成と削除
作成は以下のようなコマンドとなる。

```
 $ rails generate controller StaticPages(controller) home(action) help(action)
```

作ったが名前を消したい、作り直したいということであれば、
以下のコマンドで、コントローラを消すことができる。


```
 $ rails destroy  controller StaticPages home help
```

**generateの部分をdestroyに変更**すればいい。

##テスト

**何らかの変更を行う際には、常に「自動化テスト」を作成して、機能が正しく実装されたことを確認する習慣をぜひ身に付けましょう。**とのこと。
個人的にrailsチュートリアルではテストを理解する（自分で書くこと）に苦労しそう、、

テストファイルは```rails generate contoroller```コマンドを打った時点で作成されているので、それを使用する。
例：

```static_pages_controller_test.rb
test "should get home" do
  get static_pages_home_url
  assert_response :success
end
```

これをわかりやすくすると、

**「Homeページのテスト。GETリクエストをhomeアクションに対して発行 (=送信) せよ。そうすれば、リクエストに対するレスポンスは[成功]になるはず」**

となる。

また、**assert_selectメソッドでは、特定のHTMLタグが存在するかどうかをテスト**する。
例：

```
assert_select "title", "Home | Ruby on Rails Tutorial Sample App"
```

上のセレクタは、<title>タグ内に「Home | Ruby on Rails Tutorial Sample App」という文字列があるかどうかをチェックする。


###終わり

次↓
https://qiita.com/jonnyjonnyj1397/items/922b64ec6fa95f370586
プログラミング学習記録34〜Herokuでデプロイ〜

##今日やったこと
- Progate Rails11
- 以前Railsで作ったtodoアプリをHerokuでデプロイ

今日でやっとProgateのRailsのレッスンを一通り終えました。（道場コース以外）

Railsのレッスン１１ではパスワードの暗号化機能をつけました。
暗号化しないとデータベースのセキュリティがガバガバすぎるので、安全のためにも暗号化する必要があるそうです。

あと、以前Udemyの講座で作ったtodoアプリをデプロイしてみました。

当初の予定としては、Progateのレッスンが一通り終わったので、Progateで作ったアプリをCloud9で再現して、Herokuでデプロイするつもりでした。

ですが、とりあえずHerokuの使い方を確認してみるという意味で、すでに以前Cloud9で作ったアプリをデプロイしてみることにしました↓
https://todo-prototype-12345.herokuapp.com/

思ったよりも簡単にできてよかったです。

これが無料で利用できるのはすごいですね。

次はProgateで作った簡単なSNSとオリジナルアプリをデプロイしたいと思います。

ということで、明日からも引き続きプログラミング学習頑張ります。

おわり
pythonでexcel操作（導入編）

python使ってExcel操作するための忘備録です。
## openpyxlのインストール
以下のコマンドをたたいて、いざインストール！

```
> pip install openpyxl
・・・（省略）・・・
You are using pip version 18.1, however version 19.0.3 is available.
You should consider upgrading via the 'python -m pip install --upgrade pip' command.
```

pipが古いだと、、、
というわけで、アップデートします。

```
> python -m pip install --upgrade pip
```

無事アップデート完了！
というわけで、以下の環境がそろいました。

```
> python --version
Python 3.7.2
> pip list
Package    Version
---------- -------
openpyxl   2.6.1
pip        19.0.3
```

## pythonでExcel操作
何も編集していないExcelを出力してみる。

```python:createExcel.py
#coding: utf-8
import openpyxl

def main():
	# Excel作成
	wb = openpyxl.Workbook()
	wb.save("example.xlsx")

if __name__ == "__main__":
	main()
```
実行後に、ファイルができたか確認する。

```
> python createExcel.py
> dir /b /a-d
createExcel.py
example.xlsx
```

無事にExcelファイルが作られたようです。
とりあえずここまで。
Laravel5.5環境でBootstrap4を使ってみる

## 概要
Laravel5.5をそのまま使うとBootstrap3のようなので、Boostrap4が使えないか調べてみた内容を残しておく。

## Boostrap4インストール
package.jsonの内容を変更する。

```json:package.json
...省略...

     "devDependencies": {
         "axios": "^0.17",
-        "bootstrap-sass": "^3.3.7",      <- 削除
+        "bootstrap": "^4.0.0",           <- 追加
+        "popper.js": "^1.14.7",          <- 追加
         "cross-env": "^5.1",
         "jquery": "^3.2",
         "laravel-mix": "^1.0",

...省略...
```

## Bootstrapを切り替える (js)
`Boostrap-sass`から今回インストールした`Boostrap4`へ切り替える。

```js:resources/assets/js/bootstrap.js
...省略...

try {
    window.$ = window.jQuery = require('jquery');

    // require('bootstrap-sass');   // <- コメントアウト
    require('bootstrap');           // <- 追加
} catch (e) {}

...省略...
```

## Boostrapを切り替える(css)
読み込むスタイルをBoostrap4のものに差し替える。

```scss:resources/assets/sass/app.scss
...省略...

@import "variables";

// Bootstrap
// @import "~bootstrap-sass/assets/stylesheets/bootstrap"; // <- コメントアウト
@import "~bootstrap/scss/bootstrap";                       // <- 追加
```

```scss:resources/assets/sass/_variables.scss
// Typography
$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
$font-family-sans-serif: "Raleway", sans-serif;
// $font-size-base: 14px;  // <- コメントアウト
$font-size-base: 1rem;     // <- 追加
$line-height-base: 1.6;
$text-color: #636b6f;
```

## app.jsとapp.css生成

下記コマンドにて`Boostrap4`と依存関係のある`popper.js`をインストールし、下記ファイルを生成する。

```bash:ターミナル
$ yarn install && yarn production
```

生成されるファイル

- yarn.lock
- public/mix-manifest.json
- public/js/app.js
- public/css/app.css

## テスト
viewファイルをBoostrap4のHTMLに修正する。
https://getbootstrap.com/docs/4.3/getting-started/introduction/#starter-template

```php:resources/views/welcome.blade.php
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    {{-- CSS --}}
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    {{-- JavaScript --}}
    <script src="{{ asset('js/app.js') }}"></script>
  </body>
</html>
```

## 動作確認
ちょっとわかりにくいですが、とりあえず問題なさそうです。

![test.png](https://qiita-image-store.s3.amazonaws.com/0/142279/c41f8564-1ec8-3e91-5a22-dd878d379808.png)


## 参考サイト
- [Bootstrap - Introduction](https://getbootstrap.com/docs/4.3/getting-started/introduction/)
TFコマンド早見表

# 概要
プロジェクトでTFVCを使う機会がありました。
その時に意外とコマンドが探しても見つからないということがありましたので早見表を作成しました。
基本的に作業ベースでコマンドを調べたので随時更新します。
作業OS：Redhat7.6

# 早見表
- ワークスペースの作成

```
tf workspace -new [ワークスペース名] -collection:[TFVCサーバのコレクションURL]
```

- ワークスペースの削除

```
tf workspace -delete [ワークスペース名] -collection:[TFVCサーバのコレクションURL]
```

- ワークスペース一覧確認

```
tf workspaces
```

- ワークスペースとリポジトリ、ローカルとのマッピング

```
tf workfold -map [TFVCのフォルダ] -workspace:[ワークスペース名] [開発環境フォルダ]
```

※マッピングする開発フォルダは事前に作成済であること
※マッピング済のワークスペースに対しては上書きされる

- ワークスペースのマッピング確認

```
tf workfold -workspace:[ワークスペース名]
```

- チェックアウト

```
tf get
```

- 変更セット履歴確認

履歴の一番古い1行のみ表示

```
tf history [開発環境フォルダ]
```

履歴の最新1行のみ表示

```
tf history [開発環境フォルダ] -stopafter:1
```

変更セット履歴全てを表示

```
tf history [開発環境フォルダ] -recursive
```

変更セットで編集されたファイル名まで表示

```
tf history [開発環境フォルダ] -format:detailed
```
はじめてのプログラミング　〜if（条件分岐）とは〜

##if文とは
もし晴れ予報なら洗濯をして出かけよう
もし雨予報なら傘を持って出かけよう

みたいな、ある条件によって行動を決めることってよくありますよね？

if文はこのように、「もし〜だったら〜」と条件を指定して、
その条件を満たすときに設定した動作をするプログラムを書くときに使う文法です。


書き方は

```
if　条件
　　処理
end
```

という形になります。

▼例

```sake.rb
age = 18
if age < 20
  puts "未成年の飲酒は禁止されています。"
end
```

↓出力結果

```
未成年の飲酒は禁止されています。
```

「もし20（歳）未満だったら"未成年の飲酒は禁止されています。"と表示してね」というプログラムで、ageが18なので正しく処理されていますね。

##if~else、if~elsif

「もし〜だったら」と指定してその条件を満たす場合は処理が正しく行われるのでいいのですが、「もし〜じゃなかったら」どうなるのでしょうか？

「もし20（歳）未満だったら"未成年の飲酒は禁止されています。"と表示して、もし20（歳）未満じゃなかったら・・・」

このように「もし〜だったら」に追加して「もし〜じゃなかったら」というときの処理を書く場合は【else】を使います。

```
if 条件
  条件を満たす場合の処理
else
  条件を満たさない場合の処理
end
```

▼例

```sake2.rb
age=21
if age < 20
　puts "未成年の飲酒は禁止されています。"
else
　puts "酒は飲んでも飲まれるな。"
end
```

↓出力結果

```
酒は飲んでも飲まれるな。
```
「もし20（歳）未満だったら"未成年の飲酒は禁止されています。"と表示して、もし20（歳）未満じゃなかったら"酒は飲んでも飲まれるな。"と表示してね。」というプログラムで、ageが21なので正しく処理されていますね。


では、条件が３こ以上の場合はどうなるでしょうか。

もしAだったらA'する
もしBだったらB'する
もしCだったらC'する

このような場合は【elsif】を使って新しい条件を追加していきます。
※「elseif」ではなく【elsif】ですので注意してください。

```
if 条件A
  条件Aを満たす場合の処理（A'）
elsif 条件B
  条件Bを満たす場合の処理（B'）
else
  条件A,Bを満たさない場合の処理
end
```

▼例

```sake3.rb
age=20
if age < 20
  puts "未成年の飲酒は禁止されています。"
elsif age==20
  puts "お酒が飲める年齢です。"
else
  puts "酒は飲んでも飲まれるな。"
end
```

↓出力結果

```
お酒が飲める年齢です。
```


▼例

```sake4.rb
age=30
if age < 20
  puts "未成年の飲酒は禁止されています。"
elsif age==20
  puts "お酒が飲める年齢です。"
else
  puts "酒は飲んでも飲まれるな。"
end
```

↓出力結果

```
酒は飲んでも飲まれるな。
```

このように条件によって処理内容が分岐するプログラムを「条件分岐」と言います。


##if文でよく使う演算子

上の例で「age==20」というのがありましたが、これは「=（イコール）」の意です。
「＝」だと変数に代入するときの「=」と紛らわしいので「==」とすることになっています。

この他にもよく使うものとして
「>=」（例：A >= B　：AがB以上の場合）
「<=」（例：A <= B　：AがB以下の場合）
といった演算子もよく使います。


##１行で書く方法もある

たとえば、
▼例

```sake5.rb
age=20
if age == 20
  puts "お酒が飲める年齢です。"
end
```

↓出力結果

```
お酒が飲める年齢です。
```

となりますが、これだけの処理に3行も使うのはもったいない。ということで、
▼例

```sake6.rb
age=20
puts "お酒が飲める年齢です。" if age == 20
```

↓出力結果

```
お酒が飲める年齢です。
```

という風に1行でシンプルに書くことも出来るので、覚えておくと便利です。


##unless「〜ではない場合」

最後に補足ですが、「〜ではない場合」というときは「if」の代わりに「unless」を使うことで条件をつけることができます。

▼例

```sake7.rb
age=19
unless age > 20
  puts "未成年の飲酒は禁止されています。"
end
```

↓出力結果

```
未成年の飲酒は禁止されています。
```

この例では条件が 19 > 20となり、正しくない（false）ので処理が実行されています。
このようにunlessは、後ろの条件が正しくない（false）場合に処理が行われます。

▼例

```sake8.rb
age=30
unless age > 20
  puts "未成年の飲酒は禁止されています。"
end
```

↓出力結果

```
(何も表示されない)
```

この例の場合 30 > 20 となるので正しい（true）ですよね。
このようにunlessの後ろが正しい（true）場合は処理が行われません。
何も表示されてませんが、これはエラーではなく「処理が行われない」という処理が正しく行われています。

また、このunless文もif文と同様に1行で書くことができます。

▼例

```sake9.rb
age=19
puts "未成年の飲酒は禁止されています。" unless age > 20
```

↓出力結果

```
未成年の飲酒は禁止されています。
```

もし条件を満たさない時の処理だけを記述したい場合にはこのようにunless文を使うと良くて、1行で書けるというのも覚えておくと良いですね。

##まとめ
・if文は、「もし〜だったら〜」と条件を指定して、その条件を満たすときに設定した動作をするプログラムを書くときに使う文法のこと
・「もし〜だったら」に追加して「もし〜じゃなかったら」というときの処理を書く場合は「else」を使う
・条件が３こ以上の場合は「elsif」を使って新しい条件を追加していく
・処理の後に条件を後置して１行で書く方法もある
・「〜ではない場合」という風に、条件を満たさない時の処理だけを記述したい場合にはunless文を使うと良くて、1行で書ける
vue.js element ui raidobutton 初期値

jsonから読み込んだ場合
radioボタンの初期値が選択されない・・・。

解決法。

```profile.json

    "sex":[
        {"key":"0","value":"男性"},
        {"key":"1","value":"女性"}
    ]

```


ラジオボタン

```main.vue

<el-form-item label="性別" prop="sex">
    <el-radio v-for="v in configJson.sex" v-model="form.sex" :key="v.key" :label="v.key">{{v.value}}</el-radio>
</el-form-item>

---略

data() {
return {

    form: {
        sex:'0'// ' で囲って文字列化しておく // ときには                     this.form.sex = String(e.data.profiles[0].sex);

    },
}
}

```

こんな感じでOK!


チェックボックス

```

<el-form-item label="性別" prop="sex">
    <el-checkbox-group v-model="form.sex">
        <el-checkbox v-for="v in configJson.sex" :label="v.key" :key="v.key">{{v.value}}</el-checkbox>
    </el-checkbox-group>
</el-form-item>

//初期値選択は

form: {
    sex:['1']
},


```


つづいて、セレクトボックス

```

<el-select v-model="sentaku" value-key="code" placeholder="選択して下さい">
    <el-option v-for="v in options" :label="v.name" :key="v.code" :value="v"></el-option>
</el-select>



---略

data() {
return {
    options: [{
        code: '1',
        name: 'ラーメン'
    }, {
        code: '2',
        name: 'つけ麺'
    }, {
        code: '3',
        name: 'そば'
    }, {
        code: '4',
        name: 'うどん'
    }, {
        code: '5',
        name: '焼きそば'
    }],
    sentaku:'そば',


---

mounted() {


//初期値を変更する場合は、キーをこうやって入れ直す必要がある。
this.form.pref = 2;

},


```
Pythonで英単語（English）をカタカナ語（イングリッシュ）に変換する方法

<font color="Red">※2019年3月時点の情報です</font>

Pythonで
English→イングリッシュ
のように英単語をカタカナ語に変換する方法のまとめです。

他に見つけたら追記していきます。
もっと良い方法がありましたら教えて下さい。

# 1. 辞書をダウンロードして使う

- [bep-eng.dic（NVDA 日本語版の辞書）](https://fastapi.metacpan.org/source/MASH/Lingua-JA-Yomi-0.01/lib/Lingua/JA)
- [GoogleIME用カタカナ語辞書](https://github.com/KEINOS/google-ime-user-dictionary-ja-en)

調べた限りだと、この2つが英単語に対応したカタカナ語が載っている辞書で利用できそうなものでした。
どちらも4万5千語以上載っていて、簡単にファイルオープンして利用できます。

```python
# bep-eng.dicから辞書作成
dic_file = 'bep-eng.dic'
dict = {}
with open(dic_file, mode='r', encoding='utf-8') as f:
    lines = f.readlines()
    for i, line in enumerate(lines):
        if i >= 6:
            line_list = line.replace('\n', '').split(' ')
            dict[line_list[0]] = line_list[1]
```

ipadicや[mecab-ipadic-NEologd](https://github.com/neologd/mecab-ipadic-neologd/blob/master/README.ja.md)といった形態素解析向け辞書の英単語の読みとして、カタカナ語が入っている場合もあります（大半は英単語そのものが入っています）。

# 2. Webスクレイピングで取得

- [英語→カタカナ変換機](https://www.sljfaq.org/cgi/e2k_ja.cgi)
- [英辞郎 on the WEB](https://eow.alc.co.jp)

1.の方で満足できない場合はこの辺りから取得してくるという手もあります。

```python
# 英語→カタカナ変換機(https://www.sljfaq.org/cgi/e2k_ja.cgi)からスクレイピング
import urllib
from bs4 import BeautifulSoup

def english_to_katakana(word):
    url = 'https://www.sljfaq.org/cgi/e2k_ja.cgi'
    url_q = url + '?word=' + word
    headers = {'User-Agent': 'Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:47.0) Gecko/20100101 Firefox/47.0'}
    
    request = urllib.request.Request(url_q, headers=headers)
    html = urllib.request.urlopen(request)
    soup = BeautifulSoup(html, 'html.parser')
    katakana_string = soup.find_all(class_='katakana-string')[0].string.replace('\n', '')
    
    return katakana_string

word = 'English'

katakana_string = english_to_katakana(word)
print(katakana_string)
```

英語→カタカナ変換機がどのようなロジックで変換しているのか気になります。
一例は[こちら](https://www.sljfaq.org/afaq/english-in-japanese.html)のような感じのようです。

# その他

英語をカタカナ語に変換してくれるようなライブラリ等はないです。
その他としては

- [カーネギーメロン大学配布](http://svn.code.sf.net/p/cmusphinx/code/trunk/cmudict/)の発音（ARPABET）辞書[CMU Pronouncing Dictionary](http://svn.code.sf.net/p/cmusphinx/code/trunk/cmudict/cmudict-0.7b)のARPABETをIPAに変換、IPAからカタカナ語予測
- 上に挙げたような辞書データ等をもとに機械学習

といった方法も考えられます。
AVCapturePhotoOutputの使い方

# メモ
カメラからの入力をViewに表示

```swift:ViewController.swift
//
//  ViewController.swift
//
//  Created by Utree on 2019/03/22.
//

import UIKit
import AVFoundation

class ViewController: UIViewController {
    // カメラからの入出力データをまとめるセッション
    var session: AVCaptureSession!
    // プレビューレイヤ
    var videoPreviewLayer: AVCaptureVideoPreviewLayer!
    
    override func viewWillAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        
        // カメラを初期化
        self.initCamera()
    }
    
    override func viewDidDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        
        // Viewが閉じられたとき、セッションを終了
        self.session.stopRunning()
        // メモリ解放
        for output in self.session.outputs {
            self.session.removeOutput(output as AVCaptureOutput)
        }
        for input in self.session.inputs {
            self.session.removeInput(input as AVCaptureInput)
        }
        self.session = nil
    }
    
    private func initCamera() {
        // バックカメラを取得
        guard let caputureDevice = AVCaptureDevice.default(for: AVMediaType.video)
            else {
                print("バックカメラにアクセスできません")
                return
        }
        
        // FPSの設定
        caputureDevice.activeVideoMinFrameDuration = CMTimeMake(value: 1, timescale: 30)
        
        
        do {
            // 入力設定
            let input = try AVCaptureDeviceInput(device: caputureDevice)
            // 出力設定
            let output: AVCapturePhotoOutput = AVCapturePhotoOutput()
            
            // セッションの作成
            self.session = AVCaptureSession()
            // 解像度を設定
            self.session.sessionPreset = .medium
            
            // セッションに追加.
            if self.session.canAddInput(input) && self.session.canAddOutput(output) {
                self.session.addInput(input)
                self.session.addOutput(output)
                
                // プレビュー開始
                self.startPreview()
            }
        }
        catch _ {
            print("error occurd")
        }
    }
    
    private func startPreview() {
        // 画像を表示するレイヤーを生成
        self.videoPreviewLayer = AVCaptureVideoPreviewLayer(session: self.session)
        // カメラ入力の縦横比を維持したまま、レイヤーいっぱいに表示
        self.videoPreviewLayer.videoGravity = AVLayerVideoGravity.resizeAspectFill
        // 縦向きで固定
        self.videoPreviewLayer.connection?.videoOrientation = .portrait
        
        // previewViewに追加
        self.view.layer.addSublayer(videoPreviewLayer)
        
        // startRunningメソッドはブロッキングメソッドなので、非同期に並列処理を行う
        // qos引数は処理の優先順位
        DispatchQueue.global(qos: .userInitiated).async {
            // セッション開始
            self.session.startRunning()
            // 上記処理の終了後、下記処理をメインスレッドで実行
            DispatchQueue.main.async {
                // 'previewView'の大きさに'videoPreviewLayer'をリサイズ
                self.videoPreviewLayer.frame = self.view.bounds
            }
        }
    }
}
```
tensorflow.jsでsetWeights

#概要

tensorflow.jsでsetWeightsしてみた。

#サンプルコード


```
const model = tf.sequential();
model.add(tf.layers.dense({
    units: 1, 
    inputShape: [1] 
}));
model.compile({ 
    loss: "meanSquaredError",
    optimizer: "sgd"
});
const xs = tf.tensor2d([1, 2, 3, 4], [4, 1]);
const ys = tf.tensor2d([1, 3, 5, 7], [4, 1]);
model.fit(xs, ys, {
    epochs: 10
}).then(() => {
    alert(model.layers.length);
    for (let i = 0; i < model.layers.length; i++)
    {
        model.layers[i].setWeights(model.layers[i].getWeights());
    }
    model.predict(tf.tensor2d([5], [1, 1])).print();
    alert("ok");
});

```

#成果物

http://jsdo.it/ohisama1/cYdV

以上。
OpenPoseをコンテナ実行するDockerfile

# TL;DR

* 姿勢解析システム[Openpose]( https://github.com/CMU-Perceptual-Computing-Lab/openpose )を，コンテナ実行するDockerfileを作成します
    * [作成済みのDockerfile](https://github.com/myoshimi/openpose-docker) をGithubで公開しています
    * nvidiaのGPUを持っていないので，Amazon AWSのg3インスタンスを使って動作検証を行いました

# 準備

* nvidiaのGPUを搭載したDockerホスト（Dockerを動かすマシン）
* nvidia-docker2がインストールされたDocker環境
    * [docker-ce](https://qiita.com/myyasuda/items/cb8e076f4dba5c41afbc)と[nvidia-docker2](https://github.com/NVIDIA/nvidia-docker#quickstart)をインストールしておく
    * AWS EC2 g3s.xlargeで動作テストをしています

# 使い方

## Dockerイメージのビルド

```bash
git clone https://github.com/myoshimi/openpose-docker
cd openpose-docker
sudo docker build -t openpose .
```
## Openposeで動画処理コマンド

openpose.binのオプションは以下の通り [OpenPose - コマンド一覧(Qiita)](https://qiita.com/wada-n/items/e9e6653effc1e3d0c566)が詳しいので，参照してください．

```bash
docker run --rm --runtime=nvidia \
    -v ${PWD}:/tmp/ openpose:latest \
    --face --hand --part_candidates \
    --display 0 \
    --model_folder /usr/local/openpose/models \
    --video       /tmp/input.avi \
    --write_json  /tmp/outputJSON \
    --write_video /tmp/output.avi
```

* `--write_json` : 時刻ごとの姿勢情報(JSON形式)が出力されるディレクトリ
* `--display 0` : 姿勢推定結果を表示しない( AWSのVMなので途中結果の表示は不要 )
* `--model_folder` : 使用する学習モデルも格納位置の指定
* `--video` : 解析対象となる動画ファイル
* `--write_video` : 解析結果を含んだ動画のファイル

## 静止画処理コマンド

動画と同様に，静止画も解析対象にできます．下記のように，動画ファイルを
指定する代わりに，画像ファイルを格納したディレクトリを指定するだけです．
ディレクトリ内の全ての画像が解析対象になります．

```bash
docker run --rm --runtime=nvidia \
    -v ${PWD}:/tmp/ openpose:latest \
    --face --hand --part_candidates \
    --display 0 \
    --model_folder /usr/local/openpose/models \
    --image_dir    ./image \
    --write_json   ./outputJSON \
    --write_images ./output_image \
```

Dockerにまとめてしまえば，アプリケーションインストールでホストPCの環境を汚さないので，とても便利です．

# 参考

* [https://github.com/myoshimi/openpose-docker](https://github.com/myoshimi/openpose-docker)
* [OpenPoseで姿勢解析環境のセットアップ Ubuntu18.04LTS](https://qiita.com/myoshimi/items/cf64c91cd22c516bb49b)
VSCodeの統合ターミナルにおいてシェルのキーバインドを設定する

VSCodeの統合ターミナルはシェル本来のキーバインドとVSCode側のキーバイドが衝突してシェル側でいくつか使えないキーバインドがある。
それだと辛いので設定し直してあげる。
使えないのは`Ctrl+f`, `Ctrl+e`, `Ctrl+p`の3つ。
以下を`keybindings.json`に追記。

```json:keybindings.json
[
    // 統合terminalではCtrl+fをshellのキーバインドにする
    {"key": "ctrl+f",    "command": "cursorRight",
                            "when": "terminalFocus"},

    // 統合terminalではCtrl+eをshellのキーバインドにする
    {"key": "ctrl+e",    "command": "workbench.action.quickOpen",
                            "when": "!terminalFocus"},
    {"key": "ctrl+e",    "command": "-workbench.action.quickOpen"},

    // 統合terminalではCtrl+pをshellのキーバインドにする
    {"key": "ctrl+p",    "command": "workbench.action.quickOpen",
                            "when": "!terminalFocus"},
    {"key": "ctrl+p",    "command": "-workbench.action.quickOpen"},
]
```

これで統合ターミナルが幸せになる。
世界の教育市場における ゲーミフィケーション（Gamification）は2桁のCAGRで成長する

世界の教育市場における全体的なゲーミフィケーションは、予測期間中に2桁のCAGRで成長すると見込まれており、2017年のUS $ 130.0から上昇しています。ゲーミフィケーションは、ビジネスプロセスの強化のために従業員だけでなく顧客にも関わるための有望な方法として、さまざまな業界の分野で非常に重要になっています。時間が経つにつれて、ゲーミフィケーションは、学校、大学、大学にわたる教育システムにおける強力な指導方法として浮上してきました。ゲーミフィケーションプラットフォームは、言語、数学、科学など、さまざまな分野で利用できます。教育におけるゲーミフィケーションの主な目的は、学生が自主的に学び、スキルを向上させ、前向きな学生 - 教師関係を築くことを奨励することです。それはまた、学生間のしつけを維持し、彼らを楽しく有益なゲームで社会的に活発に保つのを助けます。

レポート全体を閲覧する https://www.credenceresearch.com/report/gamification-in-education-market

この方法によって提供される例外的な運用上の改善により、ゲーミフィケーションの需要は過去数年間にわたって大幅な成長を遂げました。その後、教育機関も効果的な学習プロセスを確実にするために積極的にゲーミフィケーション製品を採用しました。市場は、従来の学習方法よりもゲーミング教育の優れた利点によって大きく動かされています。ゲーミフィケーションを使用すると、教師は生徒のエンゲージメントレベルを上げることができます。さらに、それは高い汎用性とアクセシビリティを提供し、それによって単なる教室を超えて学習プロセスを増やします。これとは別に、教育におけるゲーミフィケーションは、障害のある学生（例えば自閉症）にとって学習を容易にし、それによって彼らのパフォーマンスおよび自信を向上させる。
![Gamification in Education Market.jpg](https://qiita-image-store.s3.amazonaws.com/0/382715/74c22aaa-b3e0-62fb-e415-cde55af3fcd2.jpeg)
地理学に基づくと、教育部門のゲーミフィケーション市場は北米が主導しており、全世界で生み出された総市場収益の40％以上を占めています。米国は、さまざまな分野でゲーミフィケーションを採用した先駆者です。カリフォルニア州ニューヨークなど、さまざまな学校がすでに学習プロセスを強化するためにゲーミフィケーションソリューションを採用しています。さらに、国内に多数の企業が存在することが、市場の成長をさらに後押ししています。次の年に、アジア太平洋地域は市場で最も速い成長を示すように設定されています。

レポート全体を閲覧する https://www.credenceresearch.com/report/gamification-in-education-market