OmniAICreator/Qiita-1.07M huggingface dataset:
railsでログイン機能の実装

##ユーザ登録機能の作成##

####Model作成####

```
$ rails g model User name email password_digest
```

- `password_digest` => パスワードを暗号化


```rb
class User < ApplicationRecord
  has_secure_password
end
```
(app/model/user.rb)

- `has_secure_password` => 有効にする
- バリデーション追加

```rb
gem 'bcrypt','~>3.1.7'
```
(Gemfile)

- `bcrypt`インストール(コメントアウト外す)


```
$ bundle install
```

####ルーティング設定####

```rb
resources :users, only: [:index, :show, :new, :create]
```
- `only`で必要なアクションを指定

####Controller作成####

```
rails g controller users index show new create
```
`index show new create`を指定するとこで必要なControllerとViewファイルを自動生成

####ユーザ登録ページ作成####

**Controller**
 
 ```rb
def new
 @user = User.new
end
 ```
 **View**
 
 ```erb
 <%= form_with(model: @user, local: true) do |f| %>
   <%= f.label :name, "名前" %>
   <%= f.text_field :name, class: "form-control" %>
 ```
- その他のカラムも同様に作成する


##ログイン機能の作成##

####ルーティング設定####

```rb
get "login", to: "sessions#new"
post "login", to: "sessions#create"
delete "logout", to: "sessions#destroy"
```

####Controller作成####


```
$ rails g controller sessions new create destroy
```
```rb
def new
end

def create
  email = [:session][:email].downcase
  password = [:session][:password]
  if login(emial, password)
    flash[:success] = ""
    redirect_to root_path
  else
    flash.now[:danger] = ""
    render "new"
  end 

def destroy  
end
```
- `params[:session][:email].downcase`でフォームデータを取得できる
- `loginメソッド` => trueかfalseを返す

```rb
private
  def login(email, password)
    @user = User.find_by(email: email)
    if @user && @user.authenticate(password)
      session[:user_id] = @user.id
      return true
    else
      return false
    end 
  end
```
- 入力フォームと同じ`email`を持つユーザを検索し`@user`に代入する。見つからなければ`nil`を代入する。

- ユーザの情報があり、そのユーザの持つパスワードと入力パスワードが一致した場合`true`扱い

####ログインView作成####

```erb
<%= form_with(url: login_path, scope: :session, local: true) do |f| %>
  <%= f.label :email, "email" %>
  <%= f.email_field :email, class: "form-control" %>
<% end %>
```


- Modelがない場合、`url:`を使う
- `scope: :session` => フォームデータが:sessionに入る
[Java] Wingdings を表示する方法

## はじめに

* 個人的なメモです（忘れても大丈夫なように）
* Windows の Java での話です。それ以外の環境ではチェックしていません。
* フォント名は Wingding ではなく Wingdings なので注意（最後に s がつく）
  * Java では不正なフォント名を指定してもエラーにならず Dialog にフォールバックされるため、間違いに気が付きにくい
* 参考: wikipedia - [Wingdings](https://ja.wikipedia.org/wiki/Wingdings)

## 結論

* 一般的に Wingdings というフォントでは 0x21～0xfe (or 0xff) のあたりにグリフがあることになっているけれど、Windows の Java で Wingdings を表示するには U+f021～U+f0fe(or U+f0ff) を使う必要がある

## 経緯

古い Java アプリを使っていたら、Wingdings でうまく表示できなかった。
具体的には様々なサイトでは `!` (0x21) が鉛筆マークになると記載されているのに、うまく表示ができていなかった（そのアプリでは四角で表示された。変換できない文字扱い）。

古いアプリのせいなのかと思って（Swing ベースのアプリだったので、おそらく Java7 以前のもの）調べてみましたが、どうやら Java8 or Java11 でも JavaFX でもシンボルがうまく表示できないのは同様な様子。

## 調査結果

awt の Font クラスを使って、該当のフォントで表示できる範囲をチェックしてみました。

```java:WingdingsTest.java
import java.awt.Font;
import java.util.stream.Collectors;
import java.util.stream.IntStream;

public class WingdingsTest {

	public static void main(String[] args) {
		final Font font = new Font("wingdings", Font.PLAIN, 32);
		final String codes = IntStream.range(0, 0x10000)
				.filter(font::canDisplay)
				.mapToObj(Integer::toHexString)
				.collect(Collectors.joining(","));
		System.out.println(codes);
	}
}
```

結果を見ると、U+0009(TAB), U+000a(LF), U+000d(CR) と U+20xx あたりと、U+f0xx あたりが表示可能になっているみたい。

実際に試してみると、U+f021～U+f0ff あたりが Wingdings の記号になっていました。つまり、0x21 の鉛筆マークを表示したい場合には U+f021 のコードポイントを表示すればよいらしい。

この辺りはUnicode のいわゆる外字エリア（私用領域; Private Use Area）のようです。

* wikipedia - [外字](https://ja.wikipedia.org/wiki/%E5%A4%96%E5%AD%97)

この wikipedia の「外字」の「JIS X 0221 (Unicode）における外字」の説明を見たら、以下のように書いてありますね。

> WingdingsなどのシンボルフォントのグリフはUnicodeではU+F020〜U+F0FFの一部に対応付けられている

試したところ、Wingdings だけじゃなく、Webdings や Symbol のフォントも似た感じでした。
コマンドラインからネットワークアダプタを停止して、起動する

# コマンドラインからネットワークアダプタを停止して、起動する

論よりコード.

```
wmic PATH Win32_NetworkAdapter where "index = 4" call disable
wmic PATH Win32_NetworkAdapter where "index = 4" call enable
```

index は事前に `wmic PATH Win32_NetworkAdapter` を叩いて、対象のネットワークアダプタの InterfaceIndex の値をチェックしておく.
言うまでもなく管理者権限でコマンドプロンプトを起動してないと動かないので注意.
OpenVR Driver開発メモ

#はじめに
ドライバ開発を試行している最中のメモ
随時更新。

参考サイト
https://github.com/ValveSoftware/openvr
https://github.com/terminal29/Simple-OpenVR-Driver-Tutorial/wiki
https://github.com/ValveSoftware/driver_hydra

途中経過
https://github.com/gpsnmeajp/SegsVRControllerDriverSample

#トラブル1
https://github.com/terminal29/Simple-OpenVR-Driver-Tutorial/wiki
にそって進めていたところ、WatchdogDriver.cppを追加したところでWebConsoleの挙動がおかしくなった。
関連コンポーネントからのログが出なくなり、ドライバに関するメッセージが出なくなる。

WatchdogDriverかServerDriverの領域確保を止めると治ることから、コンストラクタかそれ以前のどこかからおかしくなることがわかった。
しかしながらコード上なんら処理はしておらず、呼び出しすべてを止めても問題は解決しなかった。

結果として、Visual Stuido Community 2017でビルドするのではなく、Visual Stuido Community 2013でビルドすると治った。
原因は、CRTのバージョン不整合ではないかと思われる。

Potential Errors Passing CRT Objects Across DLL Boundaries
https://docs.microsoft.com/ja-jp/cpp/c-runtime-library/potential-errors-passing-crt-objects-across-dll-boundaries?view=vs-2019

というのも、もともと使用しているOpenVRのプロジェクトバージョンではVS2013ベースだったが、それをアップグレードして使用していたため。
やはり開発環境のバージョンアップは下手に行うとハマるようだ。

→2020年6月追記: プロジェクト設定を注意深くやったところ、普通にVS2019で動いている

#トラブル2
https://github.com/terminal29/Simple-OpenVR-Driver-Tutorial/wiki
仮想コントローラの実装あたりで古くて使えなくなるようだ...
SteamVR側でコントローラ関係の実装に大きな変更が入っているので、その影響かと思われる。

#メモ
binの方もチェックしないといろいろファイルが足りないぞ気をつけろ
https://github.com/ValveSoftware/openvr/tree/60eb187801956ad277f1cae6680e3a410ee0873b/samples/bin/drivers/sample

Renderモデルについて
https://github.com/ValveSoftware/openvr/issues/150

#動作
適当にコントローラ動かすのは、ここの流れがわかりやすい。
TrackedDevicePoseUpdatedが必要。
https://github.com/terminal29/Simple-OpenVR-Driver-Tutorial/wiki/3---Adding-Tracked-Controllers

# サンプルドライバを動かすときの注意
・TrackedDevicePoseUpdatedが必要。
　nullドライバにはこれがないのでデバイスの位置は一生動かない

・アイコンがうまく読み込めていないことがある。
　コントローラロールのままだと、HMDのコントローラと見分けがつかなくて悩むので注意。
　さっさとトラッカーロールに変えてしまうか、HMDを引っこ抜くとわかる。

・マルチスレッド　MT, MTdである点に注意。何を言ってるのかわからない人はVCのリンカ画面を開く。
　DLLではない。作ってるのはDLLだけど

#新Inputのドライバ版について
https://github.com/ValveSoftware/openvr/wiki/IVRDriverInput-Overview
プロファイルの書き方
https://github.com/ValveSoftware/openvr/wiki/Input-Profiles

どうやら、ViveのBinding jsonをそのままつかい、ドライバ内でも同じ名前で割り当ててやれば、Viveコントローラと同じ割当でいい感じにやってくれるようだ。

#参考
すでに動いている公開されたドライバは参考になる
https://github.com/HipsterSloth/PSMoveSteamVRBridge/blob/master/src/main/cpp/driver/ps_move_controller.cpp

#座標が合わない
https://github.com/ValveSoftware/driver_hydra/blob/master/drivers/driver_hydra/driver_hydra.cpp
ドライバの原点は、通常どちらかのベースステーションになる。(bに設定した方？)
これはアプリケーション側で取得できるTrackingUniverseRawAndUncalibratedなドライバ座標系の原点と同じ。

通常取得するルーム座標系や座位座標系は、ここからシャペロンシステムによりルーム中心かつフロア高さが適用された状態で補正されたもの。
https://github.com/ValveSoftware/openvr/wiki/IVRSystem::GetDeviceToAbsoluteTrackingPose


#共有メモリ
直接は関係ないが使うことにはなる
http://chokuto.ifdef.jp/urawaza/commonmem1.html
https://www.wabiapp.com/WabiSampleSource/windows/shared_memory.html
https://kagasu.hatenablog.com/entry/2017/05/03/003922

https://docs.microsoft.com/en-us/windows/desktop/api/winbase/nf-winbase-createfilemappinga
https://docs.microsoft.com/en-us/windows/desktop/api/memoryapi/nf-memoryapi-mapviewoffile
https://docs.microsoft.com/en-us/windows/desktop/api/memoryapi/nf-memoryapi-unmapviewoffile
https://docs.microsoft.com/en-us/windows/desktop/api/handleapi/nf-handleapi-closehandle
【備忘録】Office365でメールアドレスを変えたい

メールアドレスのセットについて調べることがあったので、まとめてみた。構成としては、レガシーのADからAAD Connectで同期をかけている環境。



#メールアドレスが1つだけの場合

オンプレミスのADと連携させている場合、以下の項目が連携してる。

|AD|Office365|
|:--|:--|
|UserPrincipalName|[ユーザー]に設定される|
|Email|[メール]に設定される<br><br>[エイリアス]（受信専用）には、xxx.onmicrosoft.comが自動設定|

後述のProxyAddressessは空白でもOK。




#メールアドレスを複数使う

受信用のアドレスは複数持てるが、送信用のアドレスは常に1つになる。

|AD|Office365|
|:--|:--|
|UserPrincipalName|ユーザー|
|Email|エイリアスにセットされる。<br>またエイリアスにxxx.onmicrosoft.comが自動セット|
|ProxyAddresses<br>[SMTP:xxx@xxxx.com]<br>[smtp:xxx@xxx.jp]|メールにSMTPの値<br>エイリアスにsmtpの値がセットされる|

複数の受信用アドレスをセットする場合は、ProxyAddressesにSMTP:で明示的に設定する必要がある。
Email属性に設定入れてても、365の[メール]には、SMTP:で設定されている項目が優先される。


smtpは複数個設定できる。ドメインを複数持っていてもいいし、エイリアスが別でも構わない。


#メールアドレスを変えたい場合

これを応用すると、メールアドレスだけ変更でき、古いアドレス宛てのメールも受信できるようになる。

古いアドレスをxxx@xxx.com
新しいアドレスをyyy@xxx.comとする。

|AD|設定内容|Office365|設定値　　　　　　　　　　　　|
|:--|:--|:--|:--|
|UserPrincipalName|xxx@xxx.com|ユーザー|xxx@xxx.com|
|Email|yyy@xxx.com|(受信用アドレス）|yyy@xxx.com|
|ProxyAddresses|[SMTP:yyy@xxxx.com]<br><br>[smtp:xxx@xxx.jp]|メール<br><br>エイリアス|yyy@xxx.com<br><br>xxx@xxx.com|


この場合、今後の送信は、yyy@xxx.comで行う。
ただし、受信はxxx@xxx.comでもyyy@xxx.comでも可能。

UPNを変更すると結構面倒なのでUPNを変更しないで、メールだけ変える。


#UPNを変えたら・・・？

UPNを変えたら、結構影響が出る。過去に影響でただけでもこれぐらい。(今は違うかもしれないけど）

・予定表の共有が消える。
・発行済みskype会議のURLが使えなくなる
・Skypeの連絡先に登録してもらっている場合、「プレゼンス不明」と表示され、連絡先からIMできなくなる（連絡先を削除して再登録する必要あり）
・OneDriveのアドレスが変わる
・OneDriveで共有していたファイルに、アクセスできなくなる

なので、UPN変更はできればしたくない。このあたり覚悟の上で変更するか、それとも変更しないかは、管理ポリシー次第だとおもう。


#まとめ

メールアドレスを変更するだけなら簡単だけど、アカウントを変えるのは結構ハードル高い。
新たにアカウントを作成して、猶予期間の間にデータを移行してもらう。そのうえで旧アカウントを削除するのが無難かな…。
スマホでfont-size 10px以下の文字を表示する

ラベルやアイコンで10px以下の小さな文字を使いたい。そんな場合画像で対応していませんか。

Google Chrome では10px、Safari では9pxが最小表示単位となっています。
10px以下の文字が表示できないChromeでもCSSで対応できる方法です。

#解決コード
こちらが解決コードです。続いて解説をしていきますね🙂

``` CSS:CSS
.hoge{
display:block;
font-size: 10px;
transform: scale(0.8);
transform-origin:0 0;
}
```

#1.transformで縮小する
font-sizeを10pxで指定し、
transform80%表示＝font-size8px相当で表示します。
10pxを指定すると計算が楽です。

``` CSS:CSS
font-size: 10px;
transform: scale(0.8);
```

#2.display: blockを指定する
縮小する要素がインライン要素の場合は display: block; を忘れずに。
インライン要素にはtransformが効きません。

``` CSS:CSS
display:block;
```

#3.transform-originを指定する

transformで縮小指定すると、縮小した分が中央に表示されてしまいます。
transform-origin:0 0; で位置指定をしておきます。

```css:CSS
transform-origin:0 0;
```

これで小さい文字もテキストで表示できます。
単純な方法で対応できる方法を考えた人…スーパー頭いい！！

#参考サイト

以下のサイトを参考にさせていただきました。
いつもお世話になっております🙆🏻‍♀️

Google Chromeでfont-sizeが10px以下にならない時の対処法
https://kotori-blog.com/soft/chromefontsize/

font-sizeを10px以下に指定したい！そんな時に使えるCSSの書き方｜それゆけ！アラサー乙女 | それゆけ！アラサー乙女
https://chasoko-log.com/fontsize-lesstah10px-css/
Oculus Goで外部マイクを使う

# はじめに

Oculus Goはマイクが内蔵されているのですがマイク端子がないので外部マイクを使えないように見えます。
そこにUSBオーディオ変換アダプタを使うと外部マイクを使うことができたので構成を紹介します。

# 用意するもの

* USB OTGケーブル
* マイク端子があるUSBオーディオ変換アダプタ
* 3.5mmプラグのヘッドホン
* 3.5mmプラグのマイク

動作確認できたケーブルとアダプタは以下の製品です。

* https://www.amazon.co.jp/dp/B00NF8MF3E/
* https://www.amazon.co.jp/dp/B074WZC6B4/

# つなぎ方

説明するまでもないと思いますが次のようにつなぎます。
USBオーディオが認識されると組み込みスピーカーから音が出なくなりUSBオーディオ変換アダプタかヘッドホンジャックにつないだヘッドホンから音が出ます。

Oculus GoのUSB端子
↓
USB OTGケーブル
↓
USBオーディオ変換アダプタ
↓
マイク

ヘッドホンはUSBオーディオ変換アダプタとOculus Goのヘッドホンジャックのどちらからも音が出ました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8995/f90b9668-4999-daf7-8d0f-674513b35223.png)

# 応用

外部マイクを使えるという事はPCのサウンド出力とマイク端子をつないでボイスチェンジできます。実際にやってみるとケーブルだらけで動きにくかったりUSBオーディオのせいでバッテリー消費が早くなったりするので事前準備が大事です。

外部マイクを使う時は[HTML 5 Microphone Visualizer](https://static.yige.ch/html5-mic/)が音量チェックしやすそうです。
RaspberryPi3に入れたUbuntuMateの初期設定

#Ubuntuのゲストセッションを無効にする

ゲストセッションは他人が使えるようになっているので個人的に嫌い。
よって消してしまいましょう。
実行するコマンドとしてはこんな感じ。

```bash:mkdir.sh
sudo mkdir /etc/lightdm/lightdm.conf.d
cd /etc/lightdm/lightdm.conf.d
sudo vi 50-no-guest.conf
reboot
```

`50-no-guest.conf`の内容はこんな感じ

```50-no-guest.conf
[SeatDefaults]
allow-guest=false
```

lightdmの設定ファイルを書き換えてゲストを無効にした。
1行目の`[SeatDefaults]`はなくても行けるんじゃないかと思ったけれど行けなかった。

#アップデートする

`apt-get update`コマンドを用いてまずはインストールパッケージの一覧をアップデートする。
次に`apt-get upgrade`コマンドを用いてアップデートする。
実行するコマンドとしてはこんな感じ。

```bash:upgrade.sh
sudo apt-get update
sudo apt-get upgrade
reboot
```

かなり時間がかかるのでしばらく放置する。

![Screenshot at 2019-05-01 23_17_16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408603/d3e9831b-3f54-ba5f-d8ad-91bcfaf590ce.png)

なんか出てきた。キーボードを切り替える方法を指定しろと。
他のキーボードなんて使う予定がないので`No toggle`を選択。
なぜか2回出てきたけれど何度聞かれても使いませんから......

![Screenshot at 2019-05-02 12_44_16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408603/5c140285-af68-0b8f-b6db-3bc4c53bc5ed.png)

次は設定ファイルが書き換わってるけれど、最新のに置き換えてもよいか聞かれた。
動かなくなった時嫌なので`Z`を選択して元ファイルをバックアップしておく。
コマンド的にはこんな感じ。


```bash:cpfile.sh
cd /etc/gnome/
sudo cp defaults.list defaults.list.old
exit
```

しばらくすると完了する。

#Firefoxが動かなくなった

完全に予想外だが、アップグレードしてからFirefoxが動かなくなってしまった。
起動直後にクラッシュしてクラッシュレポートの送信画面になってしまう。
設定ファイルが壊れているときにこのような現象が起こるらしいので、`~/.mozilla/`を削除してみた。
しかし治らない。
さらに調べると[このサイト](https://www.raspberrypi.org/forums/viewtopic.php?t=190945)をみつけた。
つまるところ最新版のFirefoxは対応していないらしい。
旧バージョンを入れるのも面倒ですしサクッと消してクロームを入れましょう。

```bash:installchrome.sh
sudo apt-get purge firfox
rm -rf ~/.mozilla/
sudo apt-get install chromium-browser
```

解決はしていないけれど、ブラウジングができるようになったのでこれでよいかな？

#言語サポートのインストールを完了する

System>Preferences>Personal>Language Support を起動する。
インストールが完了していません的なメッセージが表示されるので、インストールを完了する。

#日本語入力できるようにする

初期のままでは日本語入力に対応していないのでiBus+Mozcで実現する。

```bash:installmozc.sh
sudo apt-get install ibus-mozc
```

System>Preferences>Personal>Language Support を起動する。
Language>Keyboard input method systemにiBusを設定する。

再起動

#パーティションを切りなおす

今回用意したメモリは16GBだが、今は8GBちょっとになっている。
なのでメモリをフルに使えるようにパーティションを切りなおす。

```bash:fdisk.sh
sudo fdisk /dev/mmcblk0
reboot
```

とりあえずpコマンドでパーティションを覗いてみる。

![fdisk.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408603/fcf0c5b9-000a-4e58-c951-d4d7226e5a8d.png)

ubuntuは2に入ってるようだ。1はマスターブートレコードかな？
dコマンドで2を削除。nコマンドでパーティション(p)を作成。
パーティションの頭とおしりを指定する。
(筆者はサイズと勘違いして512Bのパーティション作ったよ！気を付けてね)
wコマンドで変更を確定。
再起動したら

![fdisk2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408603/ef5b9708-8fc5-001e-fd23-1e8361a8036f.png)


フルサイズ使えるようになった

#まとめ？

これで何となく使えそうになってきた。
次回はあったら便利的なものを入れていきたい。
パスワード変更システムの製作（Java)その１

早くプログラマーになりたいのに、全然覚えられへん！ＰＤＣＡ回せへん！
ということで表題につき最初から書く！！

まず、プロダクトアーキテクチャ概要についてである。

そもそもプロダクト・アーキテクチャとはなんぞやって話なんだが、
これは役割に応じてプログラム（クラス）を作り分けてそれらを組み合わせた設計図ってところだ。

これから作るやつの構成要素として、
・ＵＩ（ユーザーインターフェース、データの受け渡し窓口）
・DataTransferObject（DTOって訳す、データの貯金箱）
・BussinessLogic（BLと訳す、データを操作する人みたいな存在）
・DataAccessObject(DAOと訳す、こいつは例えばこう、危険な薬品を触る仕事で使う
　ドラフト・チャンバーみたいば装置で、ゴム手袋がついてるやつだ、ＢＬはこれを
　使って後述するＤＢＭＳをいじる）
・ＤＢＭＳ（データベース本体のことだ！）
・Entity(エンティティと読む、データベース本体のコピーだ。
　ＤＢＭＳとエンティティは惣菜工場とコンビニの関係に似ている。
　ＪＡＶＡに取り込むデータベースは一旦、エンティティの形にするのだ。）

今日のところは以上である。

理想>>>現実をどう埋めていくか、生きていくって難しい。。。
メディアクエリをsassで設定するmixin

#今まで　〜どんどんmixin作る

今まで、数値を変数にしたりしつつ、こんな感じのメディアクエリを作って使いまわしてましたが、

```scss
@mixin for-phone-only {
  @media (max-width: 599px) { @content; }
}
@mixin for-tablet-portrait-up {
  @media (min-width: 600px) { @content; }
}
@mixin for-tablet-landscape-up {
  @media (min-width: 900px) { @content; }
}
@mixin for-desktop-up {
  @media (min-width: 1200px) { @content; }
}
@mixin for-big-desktop-up {
  @media (min-width: 1800px) { @content; }
}
```

mixin増えていくし、~~なんかかっこいい系に~~引数つけてちょっとまとめてみようかと。

とはいえ、bootstrapに使われているのをはじめ、色々同じこと書いてらっしゃるblogとかあるんですけどね。

#改善？しよう。　〜mixinおまとめ

まずbreakpointを変数に設定

```scss
$bp-smartphone-portrait: 520px;
$bp-tablet-portrait: 768px;
$bp-laptop_s: 1000px;
$bp-tablet-landscape: 1024px;
$bp-laptop_m: 1366px;
$bp-laptop_l: 1920px;
```

で、連想配列にする
（↑で作った変数を全て入れてはないのは、6バージョンも実際にはごにゃごにゃしないだろうな〜　というところで、捨てました。必要に応じて入れ替えればいいさ。）

```scss
$breakpoints:(
  xs: $bp-smartphone-portrait,
  sm: $bp-tablet-portrait,
  md: $bp-tablet-landscape,
  lg: $bp-laptop_m,
  xl: $bp-laptop_l
) !default;
```

まずは小さいスクリーン優先のmixin。
呼び出しかたは`@include mediaQuery-up(sm)`で、引数に指定したサイズ以上のスクリーンサイズ用のメディアクエリに。

```scss
@mixin mediaQuery-up($breakpoint) {
  @media ( min-width: #{map-get($breakpoints, $breakpoint)} ) {
    @content;
  }
}
```



大きいスクリーン優先のmixin。
呼び出しかたは`@include mediaQuery-down(sm)`で、引数に指定したサイズ以下のスクリーンサイズ用のメディアクエリに。

```scss
@mixin mediaQuery-down($breakpoint) {
  @media ( max-width: #{map-get($breakpoints, $breakpoint)} ) {
    @content;
  }
}
```

で、間。
配布するわけじゃないから、引数が１つしか入ってこなかった時とか、いいや〜　ってなってます。
`@include mediaQuery-down(sm, lg)`で呼び出し。大きい方と小さい方、逆になってても大丈夫。

```scss
@mixin mediaQuery-between($breakpoint1, $breakpoint2) {
  $size1: null;
  $size2: null;
  @each $bp, $size in $breakpoints{
    @if ( $bp == $breakpoint1 ){
      $size1: $size;
    }
    @if ( $bp == $breakpoint2 ){
      $size2: $size;
    }
  }

  @if ( $size1 <= $size2 ) {
    @media ( min-width: #{map-get($breakpoints, $breakpoint1)} ) and ( max-width: #{map-get($breakpoints, $breakpoint2)} ) {
      @content;
    }
  } @else {
    @media ( min-width: #{map-get($breakpoints, $breakpoint2)} ) and ( max-width: #{map-get($breakpoints, $breakpoint1)} ) {
      @content;
    }
  }

}
```


landscapeとか、printとか、必要に応じて組み合わせてくとどんどん~~複雑に~~使い勝手がよくなりますな。
R、Julia、Pythonの前回の実行結果変数

REPL (Read-Eval-Print Loop)では、前回の実行結果を利用したい場合があります。
その時は用意されている変数を使いましょう。
言語によっては違いますけど、面白いところでもあると思います。

Julia：
>ans

Python：※(アンダースコア)
> _ 

R: 
>.Last.value
 

#Julia: ans
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346425/a5f63312-4a4a-5ff9-3e5a-50f151818a8d.png)


#Python: _ (アンダースコア)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346425/d11d6cd2-371d-0a2c-ff1b-65275d34e93f.png)

Juliaと若干違いますが、変数定義の結果は出力しないため、「_」ではエラーになる場合があります。

#R: .Last.value
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346425/cfbf5b1c-ed03-a096-63cd-af63ee12cd5e.png)


以上
Get started with Blazorをやってみた

YouTube でBlazorの紹介動画眺めてたら自分でもできそうな気になった
自分で手を動かしてみた軌跡を残す

###Blazor紹介
---
Blazor, a new framework for browser-based .NET apps- Steve Sanderson
https://www.youtube.com/watch?v=0RfUPr0KrSM

Introducing Razor Components in ASP.NET Core 3.0 - Daniel Roth
https://www.youtube.com/watch?v=SnQ1Vb4fFsk

###導入
---
以下の「Get started with Blazor」の手順通りやるとサンプルプログラムの実行までできた。
https://docs.microsoft.com/ja-jp/aspnet/core/blazor/get-started?view=aspnetcore-3.0&tabs=visual-studio

###機能修正・追加
---
「最初の Blazor アプリを構築する」で、動画で示された変更の手順を試すことができる
https://docs.microsoft.com/ja-jp/aspnet/core/tutorials/build-your-first-blazor-app?view=aspnetcore-3.0

（例）
インクリメント数変更
Indexページにカウントアップ追加
インクリメント数を呼び出し元で定義可能に
Todoリスト構築

（続きは後日
ｰｰｰ
Libraries & Extensions　など楽しそうなネタがたくさん
https://github.com/AdrienTorris/awesome-blazor

コントロールデモ
https://demos.telerik.com/blazor-ui

https://code.msdn.microsoft.com/vstudio/ASPNET-Core-Blazor-122b108a#content
Blazor CRUD app tutorial - SPA Framework for .NET developers (Part - 2)
https://youtu.be/TMiFNM_1oZI

https://youtu.be/KA7eDViKiJE


https://github.com/conficient/BlazorDynamicList


http://lightswitchhelpwebsite.com/Blog/tabid/61/EntryId/4328/Migrating-Blazing-Pizza-server-side-Blazor-and-client-side-Blazor.aspx

step by step tutorial
https://docs.microsoft.com/en-us/azure/functions/tutorial-static-website-serverless-api-with-database
atomでindentを可視化する

エディターの一つであるatomを使っている時に、
『indentが可視化できれば綺麗なコードを書くのに役立つな！』
と思いその機能を実装しました。
その過程を備忘録として残します。

1. atomをインストールする
2. Atom > Preferences をクリック(以下の画像はHelpで「preference」と調べて位置を確認している)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397180/1c640fc7-e903-de39-538c-ab82f84b16fe.png)
3. Settingsが開く
4. <img width="713" alt="スクリーンショット 2019-05-02 19.03.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397180/72f62ddd-d551-7f9d-5a41-3bdb4c4aa29e.png">
5. 画像の中で上から二つ目にある「Editor」をクリック

<img width="562" alt="スクリーンショット 2019-05-02 19.04.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397180/15e1eb75-934a-5332-63cf-dfca56befe8c.png">

6. 下にスクロールすると現れるShow Invisiblesにチェックを入れる(画像は入れた後)
7. その上のShow Indent Guideにチェックを入れると縦に線が入る(個人邸に邪魔なので入れてない)
8. 「・」の色が薄いのでstyles.lessを開いて以下の情報を加える

```ruby:styles.less
@invisible-color: rgba(197, 200, 198, 0.4);

atom-text-editor::shadow {

.indent-guide {
color: @invisible-color;
}

.invisible-character {
color: @invisible-color;
}

}
```
上記の設定はgithub上?で設定してある@invisible-colorを上書きしているのかな（開発しているコードには関係ないので深くは調べてないです。気分が乗った時に追記します。)
好みによってrgbaの4つ目の値を変えて色の濃さを変えれる。(rgbaを調べると何色にでも変えれますよ）
1が上限で1に近づくほど濃くなる、参考までに私は0.6に設定しています^ ^

以下参考にしたqiitaです。
[https://qiita.com/shibukk/items/e62931a7a3b6dc617623]
coc.nvimをWSLにインストールする手順メモ

# 概要

PC（Windows10）上のWSL（Ubuntu 18.04）にcoc.nvimを入れたときのインストール手順を書き留めておく。

# 参考にしたwebページ
[Vimの補完プラグインであるcoc.nvimが強すぎる｡](https://drumato.hatenablog.com/entry/2019/04/01/121139)
[coc.nvim公式](https://github.com/neoclide/coc.nvim)のwiki

# 環境
| 環境 | バージョン等 |
|:-----------------:|:------------------:|
| OS | Ubuntu 18.04 @ Windows 10 64bit (Pro)|
| shell | zsh 5.4.2 (x86_64-ubuntu-linux-gnu) |

# coc.nvimに必要なソフトウエアの一覧

| ソフトウエア名 | バージョン |
|:----:|:-----:|
| vim | >= 8.1 |
| nodejs | >= 8.0 |
| yarn | 指定なし<br>（vimプラグインでcocのextentionを<br>管理する場合は不要） |
**vimではなくneovim(>=0.3.1)でも動作するが、今回はvimで試したので、
その手順のみ記載する**

# インストール手順

**apt-getでvimを取得すると、バージョン8.0が降ってくるため、ソースからビルドする必要がある。**基本的には[ここ](https://www.vim.org/git.php)の手順に従えばいい。

```bash:vimのインストール
$ git clone https://github.com/vim/vim.git
$ cd vim/src
$ make
$ sudo make install
```

nodejsをインストールする際、[coc.nvimトップ](https://github.com/neoclide/coc.nvim)に記載されているコマンド（パイプの後がsh）を実行するとスクリプトエラーが出たため、bashで実行したらうまくいった。また、bashのみだとPermissionエラーが出るため、sudoで実行。

```bash:nodejsのインストール
curl -sL install-node.now.sh/lts | sudo bash
```

yarnのインストールはsudoいらなかった（~/にインストールされるため？）

```bash:yarnのインストール
curl --compressed -o- -L https://yarnpkg.com/install.sh | bash
```

筆者はdein.vimでプラグインの管理をしているので、.vimrcに以下の記述を追加して、:call dein#install()すると、coc.nvimが入ってくる。

```vim:coc.nvimのインストール
:call dein#add('neoclide/coc.nvim', {'merge':0, 'build': './install.sh nightly'})
```

## extensionのインストール（任意）
必要ならばextenionをインストールする。coc.nvimが正しくインストールされていれば、以下のコマンドを実行するだけでよい。extentionは[coc.nvimトップ](https://github.com/neoclide/coc.nvim)の下のほうに記載がある。pythonなどの言語補完以外にも、highlightなどもあるとのこと。

```vim:extensionのインストール
:CocInstall <extentionの名前>
```

# おわりに
試しにインストールして触ってみた感じ、かなり使いやすい感触。dein.vimと組み合わせれば、プラグイン管理には困らないと思うなぁ。。。
筆者は以下のように分けていこうと考えています。

- vim全体の環境（Unite, Filerなど）の管理はdein.vim
- プログラミング関連の管理（snippet，補完機能など）はcoc.nvim
Google Geocordingは優秀だが高価なので、YOLPのサービスに利口に乗り換える方法

#はじめに

　Google提供の地名からその緯度経度を返してくれるサービス、Geocordingはとても優秀でまず期待に裏切ることのない結果を返してくれます。ところが、便利さの裏返しか、高価なのも事実。５ドル／1000回つまり１回あたり0.55円くらい徴収されます。１ヶ月あたり200ドルまでは無料とありますが、Geocordingだけ利用しているということはまず無く、Google MapsやDirectionを兼用しているとあっという間に無料枠は使い切り、知らない間にカードから利用料がバンバン落とされるという自体にもなりかねません。Google Cloud Platformというところで、各サービス毎に日ごとの使用上限を事前に設定できるので、それによって貧乏になることは防げますが、上限を超えるとエラーが返ってくるので、せっかく使ってくれた人に不快な思いをさせてしまうことになってしまいます。

　そこでYOLP（Yahoo! Open Local Platform）のAPIを使ってGeocordingの代わりをさせようと考えるのは当然です。だって、YOLPは無料なのです。（ただし1日50,000回まで。そこまでは使いません）

#Yahoo!ジオコーダAPIを使ってみる

　ご他聞にもれず、YOLPでも登録によるアプリケーションIDの取得は必須です。

[YOLP登録ページ](https://developer.yahoo.co.jp/start/)

　さて、GoogleのGeocordingに似ているサービスというと、Yahoo!ジオコーダAPIになります。

https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/geocoder.html

　名前が似ているので、まさにぴったりと言いたいところですが、本サービスには欠点があって、例えば
```東京都新宿区新宿１－１```
とか
```渋谷区原宿１```
みたいに町名＋丁目くらいまでの指定をしてあげればその近くの緯度経度を返してくれるのですが、
```東京タワー```
とか
```大阪城```
は受け付けてくれません（泣）
（ちなみにGoogleのGeocordingは正しく返してくれます）

つまり住所からの検索サービスなので、実は使い勝手が悪いのです・・・。

#ではということで、Yahoo!ローカルサーチAPIを使ってみる

これは逆に住所からというのではなく、地域・拠点情報の名称からその拠点の情報（緯度経度も）を返してくれるサービスです。
例えば、
```東京タワー```
で検索すると、東京タワーや東京タワーの名称を使った店(例えば●●商事東京タワー支店とか）が出てきます。東京タワーならまだしも、東京駅とか大阪城とかですと、希望の東京「駅」や大阪「城」でなく、その近くのお店とかがまずヒットするので、うまくいくと希望通り出ますが、うーん近いけどここじゃないなぁーというデメリットも生じます。
検索結果は複数（指定可）なので、何個か検索してその中から、文字数の一番少ないものを選ぶとかいろいろ頭を使えば上手く絞り込めるかもしれませんが・・・（どなたか私のコードにそれを付け加えていただくこと希望ｗ）

#結局、どうすればいいのか

つまり、コストを度外視すれば、正確性等から言うと
①Google　Geocording
②Yahoo!ジオコーダAPI
③Yahoo!ローカルサーチAPI
の順番になります。

そこで、予めGoogle Cloud Platformで、Geocordingの日ごとの使用上限を事前に設定した上で、それを超えてエラーが出たら、②Yahoo!ジオコーダAPIを使って検索、それでもエラーが出たら③Yahoo!ローカルサーチAPIで検索したら、出費もコントロールできるし、検索結果がゼロという最悪の事態も回避できるのではないかと考えたわけです。

#作ったコード


```js
function showAddress(address) {
    var  geocoder = new google.maps.Geocoder();
    if (geocoder) {
	geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            } else {
	    var geocoder = new Y.GeoCoder();
	    geocoder.execute({query:address}, function(result){
   	    if (result.features.length > 0){
        	map.setCenter(new google.maps.LatLng(result.features[0].latlng.lat(), result.features[0].latlng.lng() ));
    		}else{
		var local = new Y.LocalSearch();
       		var cid = '個々のヤフーIDを入れてください';
		local.search(address, cid, {}, function (ydf) {
          	    if (ydf.features.length > 0) {
		    	map.setCenter(new google.maps.LatLng(ydf.features[0].latlng.lat(), ydf.features[0].latlng.lng() ));
	           	} else {
        	   	alert('Not Found');
           	   	}
		    });
     		}
     	    });
	    }
	});
    }
}
```
addressに検索ワードを入れてfunction showAddress(address)を呼び出せばそこを中心とした場所にGoogleMapが移動します。
(利用にはGoogleのID等は別途取る必要があります）

#結び

地図を使ったサービスを提供していると、意外にもGeocordingのサービスを使う人が多いことを、奇しくもGoogleのサービスが有料化されてよく分かりました。今回はGeocording系の移管でしたが、標高API等は簡単に移行できるので、Google貧乏で悩んでいる方は他社のサービスを検討されるといいと思います。
その二段階認証、困ります

# 携帯電話が壊れました

連休初日に帰省しました。

特急電車の到着時刻を実家に連絡（駅から車で山ひとつ越えないといけない）しようとしたところ、まさかの携帯電話故障。
駅前に公衆電話があったが、こちらも故障中の１台しかなく使い物にならず。

# 電車内にも公衆電話はない

昔はデッキにあったんですよ。
![特急りょうもう](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147207/6f1f8f82-b41d-f1c2-ef55-7b41b7d4b0e6.jpeg)

# ドコモメールはブラウザからアクセスできるが……

ボロ車両だが無料Wi-Fiが利用できる。速度はたかが知れているが、まあ仕方ない。

[ブラウザでのドコモメールアクセス](https://www.nttdocomo.co.jp/service/docomo_mail/browser/index.html)

> ドコモメール ブラウザ版（本サイト）をより安心してご利用いただくため、ログイン時、2段階認証が必須となります。

ログインしようとすると、メールアドレスに紐付いた携帯電話へSMSでセキュリティコードが送られてくるので、それを入力しろとのこと。

詰んだ……

同社サービスであるドコモアカウントのログインは指紋認証で一発。普通逆じゃないの？

# どうにもならないまま目的地へ

仕方ないので着いてから電話することに。
![赤城駅](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147207/48679d73-6f9d-82e3-0e32-0595c9feecfc.jpeg)
２台ありました。まさかの冗長構成。

別に携帯電話の普及率が低いとかではない。どうしてこんなことに……

公衆電話は災害時でも繋がりやすく、2011年東日本大地震でもその重要性が再認識されたものと思っていましたが、いつの間にか忘れられてしまったんですかね。
unity3dでvrcsdk入れたら無限ローディングするやつ解決方

#解決法
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/258501/2210506d-ac63-f51d-4846-c7d65b9af651.png)
**[**説明（unity3d 2017.4x基準、ともかくProject Settingsをクリック、開ける）**]**
１．上の[Edit]クリック
２．[Project Settings]クリック
３．[右のinspectorショットからplayer setting見る]
４．net4.6じゃなく下げる

なんども上げたり下げたりしたので、間違いないかと。

もしくは、無限ロディング一つの原因の一つかと
##予想
これは予想ですが、何度もためして上げて、net4.xにした場合、無限ローディングだったから
多分、vrchatはnet4.xは使えない

ちなみに、低いバージョンのVRCSDKは赤い文字でサーバーと繋がらないとか、色んなLOGが出ますが無視しよ。
ワルードをアップする時apiなんちゃらローディングバーはめちゃ遅いから5~10分くらい待とう
node-webhooksを使ってみる

# はじめに

サーバーにWebhookな機能を実装しようと思ってなんかないかなと探してみたら[node-webhooks](https://www.npmjs.com/package/node-webhooks)というのを見つけたのでちょっと簡単に試してみようと思う。

# つかってみる

まずはインストールする

```shell
npm i -S node-webhooks
```

POSTする先のサーバーを立ち上げるために[json-server](https://www.npmjs.com/package/json-server)をインストールする

```shell
npm i -D jsonserver
```

json-server用の設定ファイルを作成する

```db.json
{
  "posts":[
    {"id":1,"title":"this is a test server"}
  ]
}
```

サンプルコードを作成する

```index.js
var WebHooks = require('node-webhooks');

webHooks = new WebHooks({
  db: {"addPost": ["http://localhost:3000/posts"]}
});

webHooks.add('shortname1', 'http://localhost:3000/posts')
  .then(() => {
    console.log('triggerd shortname1');
  }).catch((err) => {
    console.log(err)
  });

webHooks.trigger('shortname1', {title: 'posted from node-webhooks'});
```

json-serverを起動する

```shell
npx json-server --watch db.json

npx: 248個のパッケージを6.449秒でインストールしました。

  \{^_^}/ hi!

  Loading db.json
  Done

  Resources
  http://localhost:3000/posts

  Home
  http://localhost:3000

  Type s + enter at any time to create a snapshot of the database
  Watching...
```

別タブでサンプルコードを実行する

```shell
node index.js

triggerd shortname1
```

json-serverのコンソールにPOSTされたログが出力されている

```shell
POST /posts 201 26.041 ms - 53
```

`db.json`を確認してみる。サンプルコードから投稿されたデータが追加されている

```shell
cat db.json | jq .

{
  "posts": [
    {
      "id": 1,
      "title": "this is a test server"
    },
    {
      "title": "posted from node-webhooks",
      "id": 2
    }
  ]
}
```

# 感想

コンパクトにまとまっているので使いやすい。自前で実装するのもいいがこれを使ったほうが楽なケースはあるんじゃないだろうか。
nginx php ubuntu備忘録

# php7.2インストール
```
ninja@localhost:~$ sudo apt-get update
ninja@localhost:~$ sudo apt-get upgrade
ninja@localhost:~$ sudo apt-get install software-properties-common
ninja@localhost:~$ sudo add-apt-repository ppa:ondrej/php
ninja@localhost:~$ sudo apt-get update
ninja@localhost:~$ sudo apt-get install php7.2
ninja@localhost:~$ sudo apt-get install php7.2-mbstring php7.2-mysql 
ninja@localhost:~$ sudo apt-get install php7.2-curl
ninja@localhost:~$ sudo apt-get install php7.2-xml php7.2-gd php7.2-zip php7.2-fpm
ninja@localhost:~$ sudo apt-get install php7.2-curl
```

# apache削除
```
ninja@localhost:~$ sudo apt-get purge apache2 apache2-utils apache2-bin apache2-data
ninja@localhost:~$ sudo apt-get autoremove
/* apache2のフォルダの場所を探す。 */
ninja@localhost:~$ whereis apache2
ninja@localhost:~$ sudo rm -rf /etc/apache2
```
# nginxインストール
```
ninja@localhost:~$ sudo apt-get install nginx
```
# php7.2設定
```
ninja@localhost:~$ sudo vi /etc/php/7.2/cli/php.ini
post_max_size = 10M
cgi.fix_pathinfo=0
upload_max_filesize = 10M


ninja@localhost:~$ sudo vi /etc/php/7.2/fpm/php.ini
post_max_size = 10M
cgi.fix_pathinfo=0
upload_max_filesize = 10M
```

# nginx設定

``` /etc/nginx/sites-available/default.
ninja@localhost:~$ sudo vi /etc/nginx/sites-available/default

/* 全て消して書き換える*/
server {
        listen 80 default_server;
        listen [::]:80 default_server ipv6only=on;
        root /var/www/html;
        index index.php index.html index.htm;
        #server_name XXX.net;

        location / {
                try_files $uri $uri/ /index.php?$query_string;
        }
        location ~ \.php$ {
                try_files $uri =404;
                fastcgi_split_path_info ^(.+\.php)(/.+)$;
                fastcgi_pass unix:/var/run/php/php7.2-fpm.sock;
                fastcgi_index index.php;
                fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
                include fastcgi_params;
        }
}
```
```/etc/nginx/nginx.conf
ninja@localhost:~$ sudo vi /etc/nginx/nginx.conf
# httpの中に追加以下を追加
client_max_body_size 10m; # defaule 1m
```

# nginxの動作確認
```
ninja@localhost:~$ sudo nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

ninja@localhost:~$ sudo service php7.2-fpm restart
ninja@localhost:~$ sudo service nginx restart

ninja@localhost:~$ sudo ufw app list
Available applications:
  Nginx Full
  Nginx HTTP
  Nginx HTTPS
ninja@localhost:~$ sudo ufw allow 'Nginx Full'

```
ブラウザから動作確認
XXX.XXX.XXX.XXX/info.phpにアクセスして表示されればOK
UnityのAnimation Eventで関数定義と関数選択が分かりにくかった

# はじめに

[アニメーションイベントの使用 - Unity マニュアル](https://docs.unity3d.com/ja/current/Manual/animeditor-AnimationEvents.html)と[[Unity] Animation Eventを使いこなそう！](https://qiita.com/yun_T/items/58e77d3396ded286affc)を参考に自作アニメーションにAnimation Eventをつけようとしたのですがインスペクターの挙動が分かりにくいのでまとめました。

# Animation Eventの関数定義

1. プロジェクトタブでAnimationファイルを選択します。
1. アニメーションタブでAnimation Eventを選択します。
1. インスペクターに関数定義が出てきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8995/73857190-3582-b61a-f6b8-a9b9d6cde3ee.png)

# Animation Eventの関数選択

1. ヒエラルキーで上記Animationを含むAnimation Controllerを関連付けたゲームオブジェクトを選択します。
1. アニメーションタブでAnimation Eventを選択します。
1. インスペクターに関数選択が出てきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8995/f14b251f-0941-76fe-be73-1e3876aa775b.png)

# まとめ

何でこんな挙動なのか考えてみると分かったのですが、関数定義はAnimation Eventの定義はAnimation自体にあるのでファイルを選択してから、関数選択は同じゲームオブジェクトにアタッチしたスクリプトから選ぶのでヒエラルキーのゲームオブジェクトを選択してからなので納得できます。とは言え直前に選択したもので挙動が変わるのは分かりづらい…

# 参考リンク

* [アニメーションイベントの使用 - Unity マニュアル](https://docs.unity3d.com/ja/current/Manual/animeditor-AnimationEvents.html)
* [[Unity] Animation Eventを使いこなそう！](https://qiita.com/yun_T/items/58e77d3396ded286affc)
ユーザー認証でTwitter APIを使うアプリ(Vue.js)をつくるの諦めた話 ~ ツイートをタブごとにメモできるアプリ ~

# 作りたかったもの
Twitter APIを使って、自分のTwitterのいいねリストから、ツイートを選んでメモすることができるアプリ。

FirebaseでTwitter認証し、そのユーザーのアクセストークンを使って、いいねAPIを叩く（ユーザー認証方式でTwitter APIを使う）、というもの。
これをVue.jsでやろうとしてました。

# 早速ですが、諦めました
いいねリストからツイートを選んで保存できるという **簡単そうな**アプリ を作りたかったのですが、予想以上に壁にぶつかりました。

### Twitter APIはバックエンドからじゃないと叩けない

Vue.jsで作ってたので、Twitter APIを叩くと、CORSエラーになってしまっていました。
ググってみると、そうか、バックエンドからでないとリクエストが叩けないのかとわかった。
なので、バックエンドをつくれば良かったのだけど、どうせやるならバックエンドもフロントものってるNuxt.jsにしちゃえと思いたち、Nuxt.jsに書き換えました。

参考:
- [クロスオリジンリソース共有（CORS)とAccess-Controll-Allow-Originの関係性](https://qiita.com/KeyG/items/3341749e5dadcdf0e6ec)
- [CORS issue in Twitter OAuth API [duplicate]
](https://stackoverflow.com/questions/51134025/cors-issue-in-twitter-oauth-api)

### アクセストークンをバックエンドにどう渡したらいいの？

で、Nuxt.jsに書き換えた後に、"いいねAPIをリクエストするAPI"を作ってみたのだけど、そういえばユーザーのアクセストークンをどうやってバックエンドに渡そうか・・・となってしまった。

バックエンドのAPIを叩く際に、FirebaseのTwitter認証後に取得できるcredentialをリクエストヘッダに付与する？ httpsだし大丈夫なの？と悩んだりしたけど、あまり良い方法が思いつかず、ここらへんで活力を失い、結局Twitter APIを使うのを諦めてしまいました。（何か良い方法はあるのでしょうか？）

Twitter認証したユーザーのトークンでAPIを叩きたかったのだけど、Twitterアプリのトークンを使うなら、ここまで悩まなくて良かったのでしょう。

# 結局、私がつくったもの
メモしたいツイートをタブで管理できるメモアプリ。
[メモツイート - ツイートをタブで管理してメモする](https://memo-tweet.com/)

![sample2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408609/ab42df7c-d4f7-018a-1050-15fa5519e84d.png)

ホーム画面に追加すると、アプリっぽく動きます。

# 機能
ツイートのURLを貼り付けることで、そのツイートをメモできる。

「Twitter APIで、いいねリストを取得し、そこからメモするツイートを選ぶ」というのをなくしただけ。

# 構成は、こんな感じの簡単なもの
- Nuxt.js
- Firebase
    - Auth: Twitter認証
    - Firestore: メモしたいツイートのデータを保存
    - Hosting
- UIは、Vuetify

## 似たサービスや機能はあるじゃん？
私は、おもしろいツイートやタメになるツイートを、Twitterアプリのブックマークをつかって保存しまくる人。

メモしまくったツイートを、後で見返す時って、
消していいツイートと残しておきたいツイートがある。

それがTwitterのブックマークにずっと混在しているのが気持ち悪いし、昔にブックマークしたツイートを見返すのが辛かったりしました。

だから、「ツイートをパッとメモできて、そのメモしたツイートをタブ（カテゴリ）で管理できたらいいんじゃない」と思った。

##### 似た機能やサービスを挙げるとこんな感じ？

- Twitterのモーメント
    - 非公開にできない
    - モーメントを作成完了にするには、画像がついてるツイートが必要でめんどくさい
- Twitterのブックマーク
    - ブックマークしたツイートが並んでるだけで見にくい。
    - ツイートを種類ごとに分けて、後で読みたいけどできない
- togetter
    - つくり方がめんどくさい（慣れてないから？）

# 使ったライブラリ

- `vue-tweet-embed`
    - ツイートのIDを付与するだけで、埋め込み型ツイートを表示できる
- `vuedraggable`
    - リストの中身を、ドラッグして入れ替えることができる
- `vuex-persistedstate`
    - Vuexのストアをローカルストレージに保存して永続化してくれる

### Vuetify
今までBulmaしか使ったことがなかったけど、今回はVuetifyにしてみた。
BulmaはUIが綺麗だけどくgithu
、少し複雑でとっつきにくい。慣れたら綺麗な見た目が簡単につくれます。
だけど、[Bottom Navigation](https://vuetifyjs.com/ja/components/bottom-navigation) を使いたかったから、今回はBulmaからVuetifyに乗り換え。
Vuetifyにしてから、やりたいUIを作るのに困らないし、時間もかからないから、とても良かった。

# Firebase Hosting
めちゃくちゃ簡単にリリースできました！
独自ドメインも簡単に接続できるし、勝手にhttpsにしてくれる。

# 総じて作ってみてよかった
Nuxt.jsを触ってみることができたし、新しいライブラリに出会えたし、Firebase Hostingの手軽さに感動できた。
UIがBulmaではなく、Vuetifyを使う選択肢もできた。
失敗したけど、Twitterアプリをつくる知見ができたのが一番良かったのではないかと思います。
EC-CUBE 3でコードを編集してページを作成する

# はじめに

EC-CUBEで固定ページを作成するときに、管理画面経由で作成すると、`user_data`というURLが付いちゃうのと、データベースの値に左右されてしまう点が気になったので、そもそもコントローラとか追加したらページ作成できるのではないかと思って試してみました。
（あと地味にURLの最後をスラッシュで終われない点も気になりました）

こちらでのメリットとしては、プログラム側に記述されているので、データベースの値を併せなくてもページ自体は表示できるので、Gitなどでファイルを共有すればページも閲覧できるようになる点かと思います。


# 注意点

下記の流れは**EC-CUBE3のコアファイルを編集しています。**「とりあえずページ追加したい」という方以外は**下記の流れで作らない方が良い**と思います。


# ルーティング

ルーティングは、`src/Eccube/ControllerProvider/FrontControllerProvicer.php`で操作しているようです。
中身は[Silex](https://silex.symfony.com/)のルーティングの記述ですね。

例えば、

* `/foo/` でアクセスできるページを
* `src/Eccube/Controller/StaticPageController` の
* `foo` メソッドから呼び出して
* `foo` という名前で`url`関数から呼び出せる

様にする場合下記のような記述になります。

```php
$c->match('/foo/', '\Eccube\Controller\StaticPageController::foo')->bind('foo');
```

特にこの記述がコアファイルに直接記入してしまっているのが問題です。他にいい方法がアレば…。

プラグインでも良いんですけど、結局インストールと有効化することでDBに依存してしまうのが気になる。

# コントローラ

次に`StaticPageController`を作ってみます。

今回は単純に静的なページを追加するイメージで考えていますので、単純にビューを呼び出すだけの記述になりますが、特定カテゴリーの商品の一覧とかを表示させたい場合は、ここから必要なRepositoryを呼べばよいはずです。

```php
<?php
namespace Eccube\Controller;

use Eccube\Application;

class StaticPageController extends AbstractController
{
    public function foo(Application $app)
    {
        return $app->render('Static/foo.twig');
    }
}
```

これで、`Static/foo.twig`が読み込まれるようになりました。

ちなみに、上記はコアファイル配下に設置していますが、`composer.json`にautoloadされるディレクトリを追加して、別の場所にコントローラを追加してしまえば、コアファイルとの切り離しも可能だと思います。

# ビュー

ビューファイルはコアファイルに含める必要はありません。
`app/template/default/Static/foo.twig`を作成すれば、`src`配下のファイルよりも優先されて読み込まれます。

なお、管理画面上から追加していないので、titleやmeta情報などは少し強引に設定する必要があります。

```twig
{# titleに値を入れれば<title>追加される #}
{% set title = 'ページタイトル' %}

{# レイアウトテンプレートを指定 #}
{% extends 'default_frame.twig' %}

{# メタ情報を挿入する #}
{% block meta_tags %}
<meta name="description" content="ページの説明ほげほげ">
{# OGP情報とか、canonicalとか #}
{% endblock %}

{# CSSを読み込む #}
{% block stylesheet %}
<link rel="stylesheet" href="{{ app.config.front_urlpath }}/path/to/foo.css" type="text/css" media="all">
{% endblock %}

{# JavaScriptを読み込む #}
{% block javascript %}
<script src="{{ app.config.front_urlpath }}/path/to/foo.js"></script>
{% endblock %}

{% block main %}
{# メインコンテンツエリア、ここに色々記述する #}
{% endblock %}
```

これで`/foo/`にアクセスるとページが表示されるようになっているはずです。


# 終わりに

とりあえずは思ったとおりにページが作れて満足です。（他にもっといい方法がありそうですけども）
EC-CUBE4ではこういった要望も満たされてると良いんですが~~調べていません~~、どうなんでしょうね？
Monero 系のトランザクションを wallet cli で取得する

# 背景

* Monero 系の仮想通貨をマイニングしている
* ローカルウォレットにマイニングした通貨を保管している
* 課税計算のために, ウォレットに入金のあった日付と通貨量を知りたい.
* 自身のアドレスだけわかればよい

Monero 系の通貨では, 匿名送金できるためか, insight などの block explorer などでアドレスを指定して, トランザクションを確認というのはできなさそうです(zcash は transparent であれば確認できる).
また, Haven などマイナー通貨系では, insight などが動いていない場合もあります. 

GUI ウォレットで History を確認できますが, これをテキストや csv などにエクスポートする方法がありません.

## wallet cli で取得する 

すでに GUI ウォレット経由などで, デーモンを動かしてブロックチェーンデータを取得しているものとしいます.

`--wallet-file=/path/to/file.keys` でウォレットファイルを指定して cli を起動します.

cli コマンドの `show_transfers` で確認できます.

```
[wallet ...] show_transfers in
```

で入金のヒストリを確認できます. `out` ですと出金のヒストリがわかります.
トランザクション量はそれほどなければ, ターミナルの出力をコピペして python あたりでぺろぺろテキスト処理して完了です.

## ウォレットが複数の場合

ウォレットを複数持っているばあい, ウォレットファイルをマージ or import するといけるかも?

## TODO

* トランザクションが多い場合, 出力をファイルに出力する方法を探す
* RPC で取得する方法を試す
  * https://www.getmonero.org/resources/developer-guides/wallet-rpc.html
  * (Haven では RPC コマンドが違うっぽい(or 対応していないコマンド名がある?))
* 日時表示の時差補正を行う(UTC+0 表示なのかしら?)
ChromeでTLS1.3の0-RTTを試す

TLS1.3では0-RTTハンドシェイクという、1度通信を行い鍵が共有できている相手とはハンドシェイク中にアプリケーションデータ(Early Data)を送信する手順があります。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32425/de231674-a795-7172-510f-105bb7143dd0.png" width="360">


"[先日のコミット](https://chromium.googlesource.com/chromium/src/+/89a44ea96635730d5f79c24d72a193752a0a7bed)"によって、Chromeでも使用できるようになったので試す。なお再送攻撃に対して脆弱なため、GETリクエストのときのみ使用されます。

## Chrome
まだChrome Canaryまでしかこの機能が降ってきてないので、Canary で試す。

`chrome://flags` より、「TLS 1.3 Early Data」を有効にする
![flags.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32425/bca54be0-ad1c-707f-5a97-2f4eb35c1758.png)


## サーバ側
「[NginxでTLS1.3の0-RTTハンドシェイク (ssl_early_data)を試す](https://asnokaze.hatenablog.com/entry/2018/08/08/012239)」の通り。0-RTT対応サーバを用意する。
現在はOpenSSLでビルドしても、`ssl_early_data on;`にすれば動作する。

今回はHTTP/2は無効にしておく

## 動作確認
今回は簡単にWiresharkで、通信を復号しその様子を確認する。

基本的には、一度通信を行ったあとサイトを離れコネクションがクローズされたことを確認する。その後、再度サイトにアクセスする。

2度目のハンドシェイク中にEarly Dataを送信している様子
![0-rtt.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32425/f5567fe7-1534-077a-ebe6-07871715353a.png)

Early DataとしてHTTPリクエストを送信し、その応答としてHTTPレスポンスを受け取ってる様子がわかる。

（クライアント側でパケットキャプチャしているが、ServerHelloを受信してからEarly Dataを送信しているるように見えるが。。。要確認）
[OutSystems]List型やRecord型の引数に値を簡単に設定する方法

# この記事を書くことになったきっかけ
仕事上、OutSystems11の新機能を[New in OutSystems 11](https://success.outsystems.com/Documentation/11/New_in_OutSystems_11)などでチェックしていたら、この機能を発見したので紹介します。

# 利用したOutSystemsのバージョン
サーバー：Version 11.0.118.0
Service Studio：11.0.207.0

# どういった機能か？
Actionの引数がList型やRecord型の場合に、簡単に値を設定できるようになりました。Gifイメージを見て頂くのがわかりやすいかと思います。

![InputRecordAndListEasily.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/337041/041eed19-ddb8-871b-5432-6d6a53e36468.gif)

List型の場合、左側の+ボタンのAdd List Itemをクリックすると次の添え字のデータが入力できるようになります。Record型の場合、左側の+ボタンのExpand XxxをクリックするとそのRecordのAttributeを入力できるようになります。

# 何が嬉しいのか？
これまで（OutSystems10以前）は引数がList型の場合はList型の変数を定義し、そこに値を設定し（ListAppendなどを使って）、その後その変数を引数に設定する必要がありました。Record型も同様です。その用途だけに変数を定義する必要がありますし、作業も面倒でした。その面倒な作業が不要になったので、これは嬉しいです。しかもList Record型の場合も対応してくれている点が助かります。

# 最後に
OutSystemsの新しい情報を手に入れるには[YoutubeのOutSystemsチャネル]( https://www.youtube.com/user/outsystems)もおすすめです。一応英語字幕も出せますし、Service Studioの操作方法が映っているため、それほど英語が得意でなくても概要は理解できるかと思います。
ABC - 028 - A&B&C

#AtCoder ABC 028 A&B&C
[AtCoder - 028](https://atcoder.jp/contests/abc028)

微妙にA-Cが簡単な回が続いている。。。

**2019/05/03 追記**
　B問題のコード修正

#A問題

```java
	private void solveA() {
		int numN = nextInt();
		if (numN <= 59) {
			out.println("Bad");
		} else if (numN <= 89) {
			out.println("Good");
		} else if (numN <= 99) {
			out.println("Great");
		} else {
			out.println("Perfect");
		}
	}
```

#B問題
 **2019/05/03コード修正**

 - Collectors調べないと

```java
	private void solveB() {
		String wk = next();

		Map<String, Long> tmp = Arrays.stream(wk.split(""))
				.collect(Collectors.groupingBy(s -> s, Collectors.counting()));

		String[] ref = { "A", "B", "C", "D", "E", "F" };

		String res = Arrays.stream(ref).map(i -> tmp.getOrDefault(i, 0L)
				.toString()).collect(Collectors.joining(" "));

		/*
		 * この問題は、空白が最後についているとWAになってしまうのでtrim
		 */
		out.println(res.trim());

	}
```

#C問題：総当たりした解法

 - 全部足すのを試す
    - 重複を省くためにsetを使う
        - sortしておいてほしいのでtreeset
    - 最後から三番目の要素を取り出して出力

```java
	private void solveC2() {
		int[] wk = IntStream.range(0, 5).map(i -> nextInt()).toArray();

		Set<Integer> set = new TreeSet<Integer>();
		for (int i = 0; i < wk.length; i++) {
			for (int j = i + 1; j < wk.length; j++) {
				for (int k = j + 1; k < wk.length; k++) {
					set.add(wk[i] + wk[j] + wk[k]);
				}
			}
		}

		List<Integer> list = new ArrayList<Integer>(set);

		out.println(list.get(list.size() - 3));
	}
```

#C問題：editorialの解法

 - [editorialのP.9から解説](https://www.slideshare.net/chokudai/abc028)

 - $a<b<c<d<e$であるならば
    - 最大の値は
        - $C+D+E$
    - 次に大きいのは 
        - $B+D+E$
    - その次に大きいのは次のどちらか
        - $A+D+E$
        - $B+C+E$

```java
	private void solveC() {
		int[] wk = IntStream.range(0, 5).map(i -> nextInt()).toArray();

		int res = Integer.max(wk[4] + wk[3]+ wk[0], wk[4] + wk[2]+ wk[1]);
		out.println(res);
	}
```
Pandocのdocx出力する際、任意の位置でセクション区切りを入れる

### 方法

**markdown** のコードブロックを使用して

> \`\`\`{=openxml}
> \<w:p>\<w:pPr>\<w:sectPr>\<w:type w:val="nextPage" />\</w:sectPr>\</w:pPr>\</w:p>
> \`\`\`

(上のないよう

を本文に挿入すると、その箇所にセクション区切りが挿入されます。

<img width="297" alt="pandoc2docx.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11233/a512d1df-db0c-4cba-a052-afd6d3cd4dc9.png">

### え？そんなことしたらdocx以外の出力できなくなるじゃねーか！だって？

妥協案として、

```json
{"t":"RawBlock","c":["openxml","<w:p><w:pPr><w:sectPr><w:type w:val=\"nextPage\" /></w:sectPr>\</w:pPr></w:p>"]}
```

な要素を挿入する **Pandoc filter** 用意すればいいんじゃないのかなぁ。
なんとなく~~（未実践）~~。

### 追記(2021/5/24)

`lua filter`を使用することで、動的にセクション区切りを埋め込むことはできた。

例えば、以下のような入力ソースがあったとして

```markdown
# Header1

Test1

# Header2 {.newsection type="nextPage"}

Test2
```

`newsection`クラスと、セクション区切りのタイプを示す`type`属性あると仮定する。
以下のような`lua filter`を用意することで、

```lua
return {
  {
    Header = function(el)
      if not el.classes:includes('newsection') then
        return el
      else
        local section_break = string.format('<w:p><w:pPr><w:sectPr><w:type w:val="%s" /></w:sectPr></w:pPr></w:p>', el.attr.attributes['type'])
        local cb = pandoc.RawBlock("openxml", section_break)
        
        return pandoc.List:new({cb, el})
      end
    end,
  }
}
```

セクション区切りを埋め込むことができる。

![スクリーンショット 2021-05-24 161836.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11233/c232af33-5b09-9ad8-faba-58690fe0f78d.png)

しかしページ番号を埋め込む方法は見つけられていない。

[仕様上](http://officeopenxml.com/WPsection.php)、`sectPR`の子要素として、`pageNumType`を持たせればよいとあり試してみたが、出力には反映されなかった。

### 参照元
https://github.com/jgm/pandoc/issues/5094
Chrome 最も重要なshortcutキー 継続更新中


+ Ctrl+Shift+N シークレットモードを開く
+ Ctrl+Shift+T　最後に閉じたタプを再度開く
+ Ctrl+Shift+I  検証ページを開く
+ Ctrl+Shift+Delete　閲覧履歴データの削除ツールを開く

+ Ctrl+H　閲覧履歴を開く
+ Ctrl+J　ダウンロードページを開く
+ Ctrl+U ソースコードを開く
+ Ctrl+R　ページをリロードする
+ Ctrl+L　カーソルをアドレスバーに移動させる

+ Shift+Esc　Chromeのタスクマネージャーを開く
VSCodeVimで行表示値の切り替えをショートカット化したい時のTips

## TL;DR
* 行表示切替の設定をショートカット登録(VSCodeVim)
* 「[Settings Cycler](https://marketplace.visualstudio.com/items?itemName=hoovercj.vscode-settings-cycler)」を使用して、拡張機能内の設定を切り替える

## 行表示の設定とは
### vimの場合
```vim:vimの場合
set number         " 行頭からの絶対値で表示
set relativenumber " 現在行からみた相対値で表示
```

### VSCodeの場合
設定 > Editor: Line Numbers を切り替え

* on / off ... 行番号の表示 / 非表示(絶対値)
* relative ... カーソル位置までの相対値
* interval ... 10行ごとに表示(絶対値)

## 表示切替の方法
ショートカットで設定を切り替えたいんだけどどうすれば...:weary:

1. 拡張機能から「[Settings Cycler](https://marketplace.visualstudio.com/items?itemName=hoovercj.vscode-settings-cycler)」をインストール
2. keybindings.jsonに以下の設定を追加

```json:keybindings.json
// number/relativenumberの切り替え
{
    "key": "f3",
    "command": "settings.cycle",
    "when": "editorTextFocus",
    "args": {
        "id": "relativeLineNumbers",
        "values": [
            {
                "editor.lineNumbers": "on"
            },
            {
                "editor.lineNumbers": "relative"
            }
        ]
    }
}
```
これでF3キーで切り替えができるようになります:laughing:
【Android Studio】Android Studio古いバージョンが見つからない場合の対処法

以下のサイトから、Android Studioの古いバージョンをダウンロードできる

Android Studio　古いバージョンをダウンロードする
https://developer.android.com/studio/archive.html

日本語にすると、表示が崩れて、Android Studioの古いバージョンが見つからない。
なので、ご利用規約の時に、言語を「英語」にすると、表示が崩れないので
Android Studioの古いバージョンが表示されるようになる

<img width="968" alt="スクリーンショット 2019-05-02 17.42.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/d4b21c9f-399c-339f-bae8-583e7de40b52.png">

<img width="1006" alt="スクリーンショット 2019-05-02 17.43.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/63d6b706-877b-4cdc-0d71-bc4a8e923074.png">

<img width="1019" alt="スクリーンショット 2019-05-02 17.44.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/20a59d2b-d7bf-d9fd-e1a5-c616cc31c4f6.png">

<br>
<br>

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

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">⭐️Androidアプリ⭐️リリース<br>🍒CherryCocktailGlass🍒<br>Blenderで絵を描いてUnityで作成したミニゲームリリースしました😍<br>🍷カクテル🍷グラス🍷に<br>🍒チェリー🍒をのせるシンプルなゲームです。<br>✨（●＾o＾●）✨<br>【Android】<br>Google Play 無料Free<a href="https://t.co/I70R9QEDuq">https://t.co/I70R9QEDuq</a><a href="https://twitter.com/hashtag/CherryCocktailGlass?src=hash&amp;ref_src=twsrc%5Etfw">#CherryCocktailGlass</a> <a href="https://t.co/g8kCM9QVhL">pic.twitter.com/g8kCM9QVhL</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1121818121323433984?ref_src=twsrc%5Etfw">April 26, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
【GooglePlay】AdMob広告を入れた場合の設定「コンテンツの不適切なレーティング」

AdMob側の設定で、「デリケートなカテゴリ」で広告の種類が設定できる。
Google Playの「コンテンツのレーディング」とAdMobの「デリケートなカテゴリ」を、矛盾なく設定する必要がある。

コンテンツのレーディングを「３歳以上」の場合は、AdMobの「デリケートなカテゴリ」を
許可→ブロック
に設定する。

↓AdMob側
<img width="1172" alt="スクリーンショット 2019-05-02 17.55.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/7486e35c-c641-4ae8-6b62-83f35265ed99.png">

<img width="1204" alt="スクリーンショット 2019-05-02 17.56.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/2f0e084a-5c41-3f11-2643-034926fec22d.png">

↓Google　Play側
<img width="250" alt="スクリーンショット 2019-05-02 18.04.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/045989a3-2585-ec60-a8d9-f1d6dc1b912d.png">


<br>
<br>

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

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

#メニューバーからログの設定
・[設定]-[その他の設定]-ログ
標準ログファイル名：
%Y%m%d_%H%M%S_&h.log

・以下のチェックボックスをチェックする。
タイムスタンプを追加
自動的にログを採取を開始する。

.設定の保存
[設定]-[設定の保存]