OmniAICreator/Qiita-1.07M huggingface dataset:
PHPⅢを終えて


[未来電子テクノロジー](https://www.miraidenshi-tech.jp/intern-content/program/)でインターンをしているtsuyoshi514です。

#クラスプロパティについて
個々のインスタンスのデータのことをプロパティと言いましたが、クラスがもつデータのことをクラスプロパティと呼びます。正直まだどういう場面で使っていくのかは理解していませんが、このprogateではインスタンスの数を管理するときに使っています。このクラスプロパティはstaticを使って定義します。クラスプロパティは「クラス名::$クラスプロパティ名」でアクセスします。このときの注意点としてはコロンを二つ入力をすることを覚えておきましょう。

#コンストラクトの活用とself
はい、PHPⅢでは前回も使ったconstructを活用していきます。ここでは生成されたインスタンスの数、つまりメニューの数に応じて$countの値が自動で変わるようにしていきます。コンストラクトを使うことでコンストラクト内でクラスプロパティ変数countの値に1足すことでインスタンスの数を数えることができます。そしてクラス内でクラスプロパティにアクセスするためにはselfという変数を使います。

#クラスメソッドと継承について
ここのインスタンスのデータに関係ない処理を行いたいときはクラスメソッドを用いて処理します。クラスメソッドは「static」を用いて定義していきます。そして既に定義されていクラスのプロパティやメソッドをほかのクラスに引き継ぐことを継承といい、継承した新しいクラスのことを子クラスといいます。そしてこの子クラスでは継承した親クラスのプロパティやメソッドに加えて新しいきのうをくわえることをかのうでとても便利な機能です。継承はextendsを用いて書いていきます。

#メソッドの上書きとアクセス権
同じ名前のメソッドを子クラスで定義するとメソッドの中身を上書きすることができ、このようにメソッドを上書きすることをオーバーライドいいます。そしてこのオーバーライドの際に親クラスで定義したメソッドを呼び出したいときには「parent」を用いて呼び出すことが可能です。子クラスから親クラスで定義したプロパティにアクセスしたいときにはそのプロパティのアクセス権を「protected」にすることで継承している子クラスからのみアクセスが可能になります。
Mac でよく使うアプリとツール

いいものを見つけ次第追記していく

## アプリ
### Google Chrome
https://www.google.com/intl/ja_ALL/chrome/

### Clipy
https://clipy-app.com/

### iTerm2
https://www.iterm2.com/

### VisualStudio Code
https://code.visualstudio.com/

### GitHub Desktop
https://desktop.github.com/

## ツール
### Homebrew
```shell
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

### z.sh
ディレクトリ移動の補完

```shell
brew install z
```

```
echo ". `brew --prefix`/etc/profile.d/z.sh" >> ~/.zshrc`
source ~/.zshrc
```
UnityでStreamingAssetsにあるXMLを読み込む方法（UnityEditor, iOS, Androidでの各方法）

# Unityバージョン
この記事ではnity2018.3.5.f1を使用しています。

# StreamingAssetsとは
Unity Editorで `Assets/StreamingAssets` に配置したアセットのことです。
StreamingAssetsはビルド先のプラットフォームの、特定のフォルダーにそのまま何も変換されない状態で保持されます。
実機でXMLファイルを読み込んでXmlSerializerなどでデシリアライズする場合は、XMLファイルを `Assets/StreamingAssets` に配置してビルドする必要があります。

# 各プラットフォームでのStreamingAssetsのパス
`Application.streamingAssetsPath` をそのまま使用すればOK

# ファイルを開いてXMLをデシリアライズする方法
Unity EditorとiOSは通常のファイルアクセスでファイルを取得できますが、Androidはファイルは圧縮された .jar ファイルになっているためUnityのWWWクラスを使う必要があります。
Android以外の場合に通常のファイルアクセスを行っていますが、`File.OpenRead` を使用しているのがポイントです。
`var fs = new System.IO.FileStream(streamingPath, System.IO.FileMode.Open)`を使用するとiOSでは`UnauthorizedAccessException`が発生してしまいます。このメソッドではReadだけではなくWrite権限も要求してしまっているためです。
ただし、これはアクセスモードを指定することで回避ができるので `File.OpenRead` の代わりに以下を用いることもできます。
`var fs = new System.IO.FileStream(streamingPath, System.IO.FileMode.Open, FileAccess.Read)`

```C#
  private HogeXmlData GetSerializedXmlHoge(string path)
    {
        var streamingPath= System.IO.Path.Combine(Application.streamingAssetsPath, path)
        HogeXmlData hoge = null;

#if UNITY_ANDROID && !UNITY_EDITOR
        //wwwを使用する方法
        WWW www = new WWW(streamingPath);
        while (!www.isDone) { }
        using (var sr = new StringReader(www.text))
        {
            hoge = (HogeXmlData) serializer.Deserialize(sr);
        }       
#else 
        //通常のファイルアクセス
        using (var fs = File.OpenRead(streamingPath))
        {
            hoge = (HogeXmlData) serializer.Deserialize(fs);
        }
#endif
        return hoge ;
    }
```

#その他
WWWでファイルのパスを間違えた場合、www.textが空文字列となり、`XmlException: Document element did not appear.  Line 1, position 1.` のエラーが出ますので、そのときはパスが間違っていないか確認すると良いです。
上記のようにStreamingAssetsは少なくともiOSではWrite権限を使用できないため、書き込む場合はApplication.persistentDataPathを使用しましょう。

#参考にさせていただいたURL
https://qiita.com/tetsujp84/items/37a44da7d5b9c890fc1d
https://forum.unity.com/threads/accessing-files-in-streamingassets-on-ios-access-denied.261994/
laravel routingやってみた

# routes/web.php を修正していく

### プロジェクト作成直後のweb.php。
welcomeページが表示されるようになってる。
`return view('welcome')`で`resources/views/welcome.blade.php`のテンプレートを使ってhtmlをレンダリングしてクライアントに返す。

```web.php
<?php
Route::get('/', function () {
    return view('welcome');
});

```

###簡単なhtmlを返すrouteをweb.phpに書いてみる。

```web.php
Route::get('hellow-world}', function() {
    return '<html><body><h1>Hello,world!</h1></body></html>';
});
```

### http://127.0.0.1:8000/hellow-world　にアクセスする
![スクリーンショット 2019-02-16 1.06.11.png](https://qiita-image-store.s3.amazonaws.com/0/278474/4651011c-88e4-dbcf-7a0d-a3bd966d0590.png)

### ローカルサーバーを立て忘れていたので立てる。

```
$ php artisan serve
```

### 404ページが綺麗。
![スクリーンショット 2019-02-16 1.08.28.png](https://qiita-image-store.s3.amazonaws.com/0/278474/9fe0e726-b346-7512-18fe-4aeac4bf382e.png)


### よくみるとweb.phpに追加したrouteが間違っていた。

```web.php
Route::get('hellow-world', function() {
    return '<html><body><h1>Hello,world!</h1></body></html>';
});
```

### http://127.0.0.1:8000/hellow-world に再度アクセス。
正常に動作した。
![スクリーンショット 2019-02-16 1.10.16.png](https://qiita-image-store.s3.amazonaws.com/0/278474/1e7d08db-127d-ca76-15cd-822866519405.png)


## ルートパラメータを使ってみる

### web.phpにroute追加
urlに含まれるパラメータをそのままhtmlとして表示するように。

```web.php
Route::get('hellow-world/{message}', function($message) {
    return $message;
});
```


### http://127.0.0.1:8000/hellow-world/aaaa すると
正常に表示された。
![スクリーンショット 2019-02-16 1.15.06.png](https://qiita-image-store.s3.amazonaws.com/0/278474/06007327-fee0-a17d-ed71-bf76a27ba3a6.png)

## ルートパラメータを2つ使ってみる

```web.php
Route::get('hellow-world/{message1}/{message2}', function($message1, $message2) {
    return $message1 . ' - ' . $message2;
});
```

### http://127.0.0.1:8000/hellow-world/aaaa/bbbb
正常に表示された。
![スクリーンショット 2019-02-16 1.15.09.png](https://qiita-image-store.s3.amazonaws.com/0/278474/b27525d5-0174-23e4-59b7-4bebe40973e8.png)


## 必須パラメータとオプション(選択式)パラメータを使ってみる
必須パラメータ -> ないとエラーが発生
オプションパラメータ -> ないとnull
{message}だと必須パラメータ。
{message?}だとオプションパラメータ。

```web.php
Route::get('option/{messsage?}', function($message = 'hoge') {
    return $message . 'です';
});
```

### http://127.0.0.1:8000/option/
パラメータがないのでhogeが表示された。
![スクリーンショット 2019-02-16 1.21.27.png](https://qiita-image-store.s3.amazonaws.com/0/278474/8646c97a-eb51-c6f4-a872-a6438bf89f7b.png)

### http://127.0.0.1:8000/option/aaaa
パラメータを指定したのでaaaaが表示された
![スクリーンショット 2019-02-16 1.21.49.png](https://qiita-image-store.s3.amazonaws.com/0/278474/fcb610a3-43e2-07a6-17c6-e08a5df60bab.png)
ROCｍのバージョンをチェックしたくなったときの為のコマンド

ROCmのバージョンチェックをするときはこうするとよいみたいです

```
$ apt show rocm-libs -a
````
まあそんな大したことではないですが・・・

hipccやhccなど各種コンパイラ郡も

```
$ hcc --version
$ hipcc --version
```

で見れます

わざわざ記事にするほどのことでもありませんが・・・
CROSS JOINを使って連番を生成する

1~10,000の連番をSQLだけで作る方法です。

# クエリ
SQLServerでやるとこうなります。

```sql
CREATE TABLE #nums (
    num int
)
;

-- 元になる数値を用意
INSERT INTO #nums
VALUES
    (0),(1),(2),(3),(4),(5),(6),(7),(8),(9)
;

-- 必要な桁数分 cross join する
SELECT
    digit1.num + digit2.num * 10 + digit3.num * 100 + digit4.num * 1000 + 1 AS result
FROM
    #nums digit1 CROSS JOIN #nums digit2 CROSS JOIN #nums digit3 CROSS JOIN #nums digit4
ORDER BY result
;
```

# 解説
CROSS JOINは行数x行数が最終的に結合された結果の行数になります。そのため今回は
10x10x10x10=10000件の0~9までの数字の組み合わせになります。

**結合イメージ**
<img width="631" alt="スクリーンショット 2019-02-16 0.47.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/13766/fbb2a3a1-976a-2f71-eaa6-7dcdc8963606.png">

上記画像は9を起点にした矢印以外は省略していますが、このように全てのレコード同士が結びつきます。結果出来上がるレコードは下図のような形式です。
<img width="285" alt="スクリーンショット 2019-02-16 0.53.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/13766/ac0eef98-52e2-becc-8d87-59cdc56e2dd1.png">

このままではただの独立した4つの数字が存在してるだけであり、桁数ごとに適切に計算する必要があります。ここで

```
1桁目+2桁目x10+3桁目x100+4桁目x1000+1
```
という計算式を当てはめることで漏れなく連番が求まります。
c++の基本を備忘録的にまとめていく Part2 (Makefile)

最近無性にc++を触りたい

### やったこと
makefileを頑張って書いた。
↓↓↓今回書いたMakefile↓↓↓


```make:makefile
 COMPILER  = g++
 CPP_FLAGS = -g -Wall
 OBJ_DIR   = ./objs/
 SOURCES   = $(wildcard ./src/*.cpp)
 OBJECTS   = $(SOURCES: .cpp=.o)
 INCLUDE   = -I ./include
 TARGET    = {target_name}

 #PHONY: clean run
 
 $(OBJ_DIR)%.o: $(SOURCES)
     $(COMPILER) $(CPP_FLAGS) $(INCLUDE) -o $@ -c $^
 
 $(TARGET): $(OBJECTS)
     $(COMPILER) $(CPP_FLAGS) $(OBJECTS) -o $(TARGET)
 
 clean:
   rm -f $(TARGET)
```


Directory構造としては以下のような感じ

```
├── README.md
├── include
│   ├── module.hpp
│   └── test.hpp
├── src
│   ├── main.cpp
│   └── test.cpp
│
├── makefile
└── test
```

コンパイルする時、srcに入っている*.cppを読み込み、.hppを参照している

単純に書いただけなのでもっとsrc以下も階層化したものに対応していきたい

あと当面の目標としては、c++使って眼球運動を追いかけたいと思いました。

gitにあげました
https://github.com/shKomic/cpp_template

こんなコードあるよとか返信されると、とても喜びます

Part3(libcurl) => https://qiita.com/komi9977/items/71350e863e759a83f81d
[Flutter] InkWellは意外に強い


InkWellを最近愛用してる、

たとえは、Widgetにタッチインターフェースを使いたい時に使用する。

## 実際に使ったコード例１。

```dart:main.dart
InkWell(
                    onTap: (){
                      Navigator.of(context).pushReplacement(
                        MaterialPageRoute(builder:
                        (context) => InputRedPage(
                          origCurrency: widget.currencyone,
                          convCurrency: widget.currencytwo,
                        ))
                      );

                    },
                    child: Text(widget.currencyVal.toString(),
                      style: TextStyle(color: Colors.white,
                        fontSize: 100.0,),),
                  ),


```

onTapで、画面移動に便利。
TextやContainerによく使う。

GestureDetectorもありますが、これよりには
InkWellに最近ハマった。

## 実際に使ったコード例２。
```dart:main.dart
 InkWell(
          onTap: () {
            Fluttertoast.showToast(
                msg: "button check",
                toastLength: Toast.LENGTH_SHORT,
                gravity: ToastGravity.CENTER,
                timeInSecForIos: 1,
                backgroundColor: Colors.red,
                textColor: Colors.white,
                fontSize: 16.0);

          },
          borderRadius: BorderRadius.circular(30.0),
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(30.0),
                  color: Colors.white,
                  border: Border.all(color: Colors.cyan)),
              height: 35.0,
              width: 150.0,
              child: Center(
                child: Text(
                  "Button Text 1",
                  style: TextStyle(
                    color: Colors.black,
                  ),
                ),
              ),
            ),
          ),
        ),

```

これを使うべきとかのは決まっていない。
自分の好みで大丈夫。
Laravelプロジェクト作成してみた

まずはcomposerでlaravel installerをinstall

```
$ composer global require "laravel/installer"
```

バージョンを確認

```
$ laravel -v
Laravel Installer 2.0.1
```

laravelプロジェクト作成。3分くらい待って完了した

```
$ laravel new laravelapp
Crafting application...
Loading composer repositories with package information
Installing dependencies (including require-dev) from lock file
Package operations: 86 installs, 0 updates, 0 removals
  - Installing doctrine/inflector (v1.3.0): Downloading (100%)         
  - Installing doctrine/lexer (v1.0.1): Downloading (100%)         
  - Installing dragonmantank/cron-expression (v2.2.0): Downloading (100%)         
  - Installing erusev/parsedown (1.7.1): Downloading (100%)         

省略~~~

Application key set successfully.
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi
Discovered Package: beyondcode/laravel-dump-server
Discovered Package: fideloper/proxy
Discovered Package: laravel/nexmo-notification-channel
Discovered Package: laravel/slack-notification-channel
Discovered Package: laravel/tinker
Discovered Package: nesbot/carbon
Discovered Package: nunomaduro/collision
Package manifest generated successfully.
Application ready! Build something amazing.
```

確認する。laravelappフォルダが作成されてる

```
$ ll
total 0
drwxr-xr-x   3 Syy  staff   96  2 16 00:34 .
drwxr-xr-x   7 Syy  staff  224  2 16 00:34 ..
drwxr-xr-x  25 Syy  staff  800  2 16 00:37 laravelapp
```

ローカルサーバーを立ち上げる

```
$ cd ./laravelapp
$ php artisan serve
Laravel development server started: <http://127.0.0.1:8000>
```

http://127.0.0.1:8000 にアクセスする。laravelページが表示された。
![スクリーンショット 2019-02-16 0.43.36.png](https://qiita-image-store.s3.amazonaws.com/0/278474/99125895-28dd-f7ed-a6c6-e6c17b4bc437.png)
Rspecで使うletメモ

参照：https://qiita.com/jnchito/items/42193d066bd61c740612
スーパーわかりやすいでごわす

#letの基本
変数っぽく使えるのが便利


````
feature 'hogee' do
  let(:user) { create(:user) }

  scenario 'hogehoge' do
    # ~省略~
  end

end
`````

今回の場合であれば、`feature 'hogee' do`から`end`まで`user`を`create(:user)`として使える

よって、


````
feature 'tweet', type: :feature do
  let(:user) { create(:user) }

  scenario 'post tweet' do
    # ログイン処理
    visit new_user_session_path
    fill_in 'user_email', with: user.email
    fill_in 'user_password', with: user.password
    find('input[name="commit"]').click
    expect(current_path).to eq root_path
    expect(page).to have_content('投稿する')
  end
end
`````

こんなこともできる
c++の基本を備忘録的にまとめていく Part1(名前空間)

最近無性にC++を使いたくなったが、もうほとんど忘れていたので、基本をまとめていきたい。

### やったこと
名前空間について少しやった。


```cpp:main.cpp
#include <iostream>

namespace Sub {
    void sub () {
         std::cout << "HELLO WORLD !!" << std::endl;
    }
}
```

```cpp:sub.hpp
namespace Sub {
   void sub();
}
```

```cpp:main.cpp
#include <iostream>
#include "sub.hpp"

int main () {
    sub::Sub();
    return 0;
}
```

=> 'HELLO WORLD !!'が出力される

みたいな感じ

### ちょっと感想

Classを使う意味ってなんだろう？って昔から思う
小さいものとか構造体チックに使う時以外使う必要あるのかな？と思う


こんなコードあるよとか返信されると、とても喜びます

Part2 (Makefile) => https://qiita.com/komi9977/items/c1eb08f32adabc85158d
Netlifyでsubmoduleのcloneに失敗する時

```sh
12:04:27 AM: Error checking out submodules: Submodule 'src/lib/project' (git@github.com:owner/project.git) registered for path 'src/lib/project'
Cloning into '/opt/build/repo/src/lib/project'...
Host key verification failed.

fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
fatal: clone of 'git@github.com:owner/project.git' into submodule path '/opt/build/repo/src/lib/project' failed
Failed to clone 'src/lib/project'. Retry scheduled
Cloning into '/opt/build/repo/src/lib/project'...
Host key verification failed.
```

git submoduleを使っていて、Netlify上でこんなエラーが出た時は、下記の様にするとうまくいく。

```diff:.gitmodules
[submodule "src/lib/project"]
 	path = src/lib/project
-	url = git@github.com:owner/project.git
+	url = git://github.com/owner/project.git
```

以前にも遭遇して、そのときに何かを参考にして解決したんだと思うけど、忘れちゃいました。公式ドキュメントだったかな？次回すぐに当たれるようにメモ。
Composerでglobalにインストールしたパッケージをupdateする

Composerでglobalにインストールしたパッケージをupdateする

```
$ composer global update
```


globalに入っているパッケージversionを確認する

```
$ composer global show
Changed current directory to /Users/Syy/.composer
guzzlehttp/guzzle         6.3.3   Guzzle is a PHP HTTP client library
guzzlehttp/promises       v1.3.1  Guzzle promises library
guzzlehttp/psr7           1.5.2   PSR-7 message implementation that also provides common utility methods
laravel/installer         v1.5.0  Laravel application installer.
psr/http-message          1.0.1   Common interface for HTTP messages
ralouphie/getallheaders   2.0.5   A polyfill for getallheaders.
symfony/console           v4.2.3  Symfony Console Component
symfony/contracts         v1.0.2  A set of abstractions extracted out of the Symfony components
symfony/filesystem        v4.2.3  Symfony Filesystem Component
symfony/polyfill-ctype    v1.10.0 Symfony polyfill for ctype functions
symfony/polyfill-mbstring v1.10.0 Symfony polyfill for the Mbstring extension
symfony/process           v4.2.3  Symfony Process Component
```
go-wkhtmltopdfでcssファイルを読み込ませる方法

HTMLファイルを元にPDFファイルを生成してくれるコマンドラインツールであるwkhtmltopdf。
そのwkhtmltopdfのGolangラッパーである[go-wkhtmltopdf](https://github.com/SebastiaanKlippert/go-wkhtmltopdf)を使う中で、cssファイルを読み込む時に少し手間取ったので備忘録として投稿します。
# 前置き
最初はhtmlファイルにstyleタグでスタイルを記述していたのですが、複数フォーマットを作成する中でやはりcssファイルで管理したくなりました。
しかし通常のhtmlと同じ感覚でlinkタグで書いても読み込まれません。
# 手順
wkhtmltopdfでは--user-style-sheetというオプションでcssファイルの読み込みをサポートしてくれます。
そのため、生成するPageに対して以下のプロパティを設定するだけで、読み込まれるようになります。

```golang
	page := wkhtmltopdf.NewPageReader(w)
    // または page := wkhtmltopdf.NewPage()など
	page.UserStyleSheet.Set("./export/formats/formats.css")
	pdfg.AddPage(page)
	if err := pdfg.Create(); err != nil {
		return err
	}
```

# まとめ
投稿内容に誤った内容・気になった点などございましたら、ご指摘いただけますと幸いです。
閲覧いただき、ありがとうございました。
【備忘録:python】matplotlibで日本語表示させたい


# はじめに

`matplotlib`で日本語を利用しようとすると、「豆腐」が表示されてうまく行かないことがあった。

## フォントリストを探す

手始めに以下のコードを実行して、`matplotlib`のフォントリストがどこにあるか見つけます。

```
import matplotlib as mpl
mpl.get_cachedir()
```

`ubuntu`の場合は`/home/[user_name]/.cache/matplotlib/fontlist-v300.json`とかになっていると思うので適当なエディタで開きます。

この中から、適当な`Gothic`フォントを指定すれば、日本語表記自体はされます。
今回は`Ubuntu`だったので`TakaoPGothic`というものを利用しました。

## 設定方法

```
import matplotlib.pyplot as plt
plt.rcParams['font.family'] = 'TakaoPGothic'
```


また、自分でダウンロードしてきたフォントを利用したい場合は、[ここ](https://qiita.com/hatunina/items/a77128c7f50b19ad2c51)とかを参考に追加してみてください。
quicklinkを試してみる

## 概要

- quicklinkというライブラリを試してみます
- https://github.com/GoogleChromeLabs/quicklink

## quicklinkとは？

- 公式サイトには以下のように書いてあります

> Faster subsequent page-loads by prefetching in-viewport links during idle time

- 表示しているページ上にあるaタグのリンク先を事前に取得しておくことで、ページ遷移を高速化するというものです

## 検証

- 試してみました
- 再現手順は以下のとおりです

### 雛形生成

- 今回はexpressを使います

```zsh
mkdir quicklink-sample
cd quicklink-sample
yarn init -y
yarn add express
```

- 必要なファイルを作成していきます

```js:app.js
var express = require('express');
var app = express();

app.get('/hello', (req, res) => {
  res.sendFile('hello.html', { root: `${__dirname}/public/` });
});

app.get('/world', async (req, res) => {
  await new Promise(resolve => setTimeout(() => resolve(), 3000));
  res.sendFile('world.html', { root: `${__dirname}/public/` });
});

app.listen(8080, () => console.log('app start'));
```

```html:public/hello.html
<h1>Hello</h1>
<a href="./world">next</a>
```

```html:world.html
<h1>World</h1>
<a href="./hello">next</a>
```

## ファイルの説明

- `/hello`にアクセスすると`public/hello.html`が返されて画面にHelloと表示されます
- `/world`にアクセスすると`public/world.html`が返されて画面にWorldと表示されます
    - ただし3000msのスリープを入れているのでレスポンスは3秒待たされることになります
    - quicklinkによってキャッシュされる場合の効果をわかりやすくするためにスリープを入れています

## 動作確認

- 以下のコマンドで起動

```zsh
node app.js
```

- `http://localhost:8080/hello`にアクセスしてみる
- `next`をクリックするとおよそ3秒後に次のページに遷移しています

![before.gif](https://qiita-image-store.s3.amazonaws.com/0/175213/12d6e3b1-eab6-3431-1f24-2069519e11c6.gif)

## quicklinkを適用する

- `hello.html`にquicklinkを適用します

```html:public/hello.html
<h1>Hello</h1>
<a href="./world">next</a>
<script src="https://unpkg.com/quicklink@1.0.0/dist/quicklink.umd.js"></script>
<script>
  quicklink();
</script>
```

## 動作確認

- アプリを再起動して`http://localhost:8080/hello`にアクセスしてみる

![after.gif](https://qiita-image-store.s3.amazonaws.com/0/175213/45bcaafd-3125-39eb-d837-e990766c2bb7.gif)

- `/hello`にアクセスすると裏側で`/world`へアクセスしていることが分かります
- そしてリンクをクリックすると3秒待つことなく即時に遷移できいます
- このようにして事前にキャッシュしておくことで高速な遷移を実現できています

## まとめ

- quicklinkを使うと簡単にページ遷移の高速化を実現することができる
rails g で Traceback (most recent call last): が出た時

```comandline.tools
Traceback (most recent call last):
	16: from bin/rails:3:in `<main>'
	15: from bin/rails:3:in `load'
	14: from /Users/mu/Development/rails-vue-todo/bin/spring:15:in `<top (required)>'
	13: from /Users/mu/.rbenv/versions/2.5.1/lib/ruby/2.5.0/rubygems/core_ext/kernel_require.rb:70:in `require'
	12: from /Users/mu/.rbenv/versions/2.5.1/lib/ruby/2.5.0/rubygems/core_ext/kernel_require.rb:70:in `require'
	11: from /Users/mu/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/spring-2.0.2/lib/spring/binstub.rb:31:in `<top (required)>'
	10: from /Users/mu/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/spring-2.0.2/lib/spring/binstub.rb:31:in `load'
	 9: from /Users/mu/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/spring-2.0.2/bin/spring:49:in `<top (required)>'
	 8: from /Users/mu/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/spring-2.0.2/lib/spring/client.rb:30:in `run'
	 7: from /Users/mu/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/spring-2.0.2/lib/spring/client/command.rb:7:in `call'
	 6: from /Users/mu/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/spring-2.0.2/lib/spring/client/rails.rb:24:in `call'
	 5: from /Users/mu/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/spring-2.0.2/lib/spring/client/command.rb:7:in `call'
	 4: from /Users/mu/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/spring-2.0.2/lib/spring/client/run.rb:35:in `call'
	 3: from /Users/mu/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/spring-2.0.2/lib/spring/client/run.rb:42:in `warm_run'
	 2: from /Users/mu/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/spring-2.0.2/lib/spring/client/run.rb:62:in `run'
	 1: from /Users/mu/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/spring-2.0.2/lib/spring/client/run.rb:117:in `verify_server_version'
/Users/mu/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/spring-2.0.2/lib/spring/client/run.rb:117:in `gets': Interrupt
```

```
＄ bundle exec spring stop
```
これで直りました。
Jestでnode-fetchをmockする

Jestでnode-fetchをmockする方法についてまとめます。

Jestのmock機能を利用する方法は、[「Node.jsのテストでJestを使ってfetchをモックするのは意外に大変」](https://qiita.com/yousan/items/e8f778ac64c2dad9a0c7)を参照してください。ここでは、mock-fetchおよびjest-fetch-mockを利用する方法について説明します。

mock-fetchやjest-fetch-mockを利用することで、node-fetchを簡単にmockでき、呼び出しの確認も容易になります。

mock-fetchおよびjest-fetch-mockはfetchおよびnode-fetch (isomorphic-fetchも) をmockできますが、ブラウザ上のfetchをmockすることを想定しているため、node-fetchをmockするにはひと手間必要となっています。

##mock-fetchを利用する方法

mock-fetchを利用する方法は、[Using with jest](http://www.wheresrhys.co.uk/fetch-mock/#usageusage-with-jest)に説明があります。

node-fetchをmockするため、以下のファイルを追加してください。これにより、node-fetchをrequiresするとfetch-mockが返るようになります。

```javascript:__mocks__/node-fetch.js
const nodeFetch = jest.requireActual('node-fetch');
const fetchMock = require('fetch-mock').sandbox();
Object.assign(fetchMock.config, nodeFetch, {
  fetch: nodeFetch
});
module.exports = fetchMock;
```

以下はテスト対象のコードです。

```javascript:index.js
const fetch = require('node-fetch');

const makeRequest = async () => {
    const res = await fetch("http://httpbin.org/get");
    const resJson = await res.json();
    return resJson;
};

module.exports = makeRequest;
```

以下、テストコードです。node-fetchをrequireするとfetch-mockが返ります。これを使ってmockの呼び出しを定義し、呼び出し結果を確認できます。

```javascript:__tests__/index.test.js
const fetchMock = require('fetch-mock');
const makeRequest = require('../index');

describe('fetch-mock test', () => {
    it('check fetch mock test', async () => {
        fetchMock.get('http://httpbin.org/get', {test: 'example'})

        const data = await makeRequest();
        expect(data).toEqual({test: 'example'});
        expect(fetchMock.calls().length).toBe(1);
        expect(fetchMock.lastCall('http://httpbin.org/get')).toBeTruthy();
    });
});
```

##jest-fetch-mockを利用する方法

jest-fetch-mockを利用するときは、setupFiles.jsを以下のように作成します。これによりnode-fetchをrequireするとjest-fetch-mockが返るようになります。

```javascript:setupFiles.js
global.fetch = require('jest-fetch-mock');
jest.mock('node-fetch', () => (global.fetch));
```

作成したsetupfiles.jsは、package.jsonで設定します。

```javascript:package.json
  "jest": {
    "testEnvironment": "node",
    "setupFiles": ["./setupFiles.js"]
  }
```

テスト対象のコードは同じものを使うので省略します。

テストコードは以下です。setupFiles.jsによりglobal.fetchが設定されているため、ここではnode-fetchをrequireする必要はありません。

```javascript:__tests__/index.test.js
const makeRequest = require('../index');

describe('fetch-mock test', () => {
    it('check fetch mock test', async () => {
        fetch.mockResponseOnce(JSON.stringify({ test: 'example' }));

        const data = await makeRequest();
        expect(data).toEqual({test: 'example'});
        expect(fetch.mock.calls.length).toBe(1);
        expect(fetch.mock.calls[0][0]).toEqual('http://httpbin.org/get');
    });
});
```

##まとめ

ひと手間かかりますが、最初に設定してしまえば、後は楽に使えるようになると思います。
omniauth-backlogでredirect_uri_mismatchエラーへの対応

# 発生した問題

Railsで[omniauth-backlog](https://github.com/attakei/omniauth-backlog) を使って、Nulab BacklogでのOAuth2認証を行いたいが、下記のようなエラーが出て認証が通らない。

```
OAuth2::Error (invalid_request: redirect_uri_mismatch
{"error":"invalid_request","error_description":"redirect_uri_mismatch"}):
```

# 原因

リダイレクト時のURLが `http://<RAILS_HOST>/auth/backlog/callback?code=xxx&state=yyy` と、codeとstateパラメータが付いており、URLがマッチしないのが原因。

# 対応方法

config/initializers/omniauth.tb の **先頭** に以下のようなパッチをあてる。

```
OmniAuth::Strategies::Backlog.class_eval do
  def callback_url
    full_host + script_name + callback_path
  end
end
```

# 一番良い対応方法

現状 2015/08 から更新されてないので、本来このgemを使わず、自分で実装するのが一番良い解決策。(でも楽したいですよね)
ActiveRecord で auto increment な ID を特定の数値の時にスキップする

成果はこちら [oieioi/ketsuban](https://github.com/oieioi/ketsuban)

# 使い方

```ruby
class User < ApplicationRecord
  include Ketsuban
  ketsuban [4, 5]
end

5.times.map { User.create.id }
# => [1,2,3,6,7]
```

lambda も渡せる

```ruby
class Book < ApplicationRecord
  include Ketsuban
  ketsuban -> next_id { next_id.odd? }
end

5.times.map { Book.create.id }
# => [2,4,6,8,10]
```

# 実装

1. `before_create` フックで
2. 次に振られそうなIDを調べ
3. それが設定値にマッチする場合はそのIDをスキップし
4. 採番テーブルをインクリメントする

これだけだけど、 自動採番なカラムは PostgreSQL でも MySQL でも気軽にさわれない感じになっていて不安だった。

## PostgreSQL

### ドキュメント

- [CREATE SEQUENCE - PostgreSQL 10.5文書](https://www.postgresql.jp/document/10/html/sql-createsequence.html)
- [シーケンス操作関数 - PostgreSQL 10.5文書](https://www.postgresql.jp/document/10/html/functions-sequence.html)


### 次のシーケンスを取得する

以下の方法を検討したが、一番実装が簡単だった `last_value` を使う方法で実装した。ID重複を起こす可能性があるけど、その場合はあきらめる。

```sql:max(id)
select max(id) from users;
```

- `max(id)` はレコードが削除されていたとき正しくなくなる。
- ちゃんとシーケンスを見たほうがいい。


```sql:currval
select currval('users_id_seq');
```

- 現在のセッション中に該当のシーケンスに対して操作を行っていないときエラーになる。


```sql:last_value
select last_value, is_called from users_id_seq;
```

- シーケンスを直接調べる方法。
- `last_value` は一度も使用されていなくても1を返すが、使われていない値の場合は `is_called` が偽になるので判別可能。


### シーケンスを進める

手動でシーケンスを使ったら、進める必要がある。 ActiveRecord がメソッドを用意しているのでそれを使った。
[ActiveRecord::ConnectionAdapters::PostgreSQL::SchemaStatements#set_pk_sequence!](https://github.com/rails/rails/blob/5a8f0c7226b2b16c9cf1b6ef5478fe5603348e17/activerecord/lib/active_record/connection_adapters/postgresql/schema_statements.rb#L259) 

## MySQL

### ドキュメント

- [AUTO_INCREMENT の使用 - MySQL 5.6 リファレンスマニュアル](https://dev.mysql.com/doc/refman/5.6/ja/example-auto-increment.html)

### 次の `auto_incremant` な値を取得する

```sql
select auto_increment from information_schema.tables where table_name = users;
```

- `auto_increment` なカラムの次に振られる値を取得できる。
- 直前に `auto_increment` の値を指定して `insert` していた場合、この値は更新されていない。
    - 1を欠番にし、2を指定して `insert` した直後のとき、このSQLの返り値は1になる。

```sql:
select max(id) from users;
```

- 上記のため、 `max(id)` を併用して現在のDBの最高値と、 `auto_increment` な値を調べるようにした。
    - この状態の時に末尾レコードを削除すると、詰め番が発生してしまう。直したい。
        - 1を欠番にし、2を指定して `User.create` し、 2を `destroy` すると、次に `create` された `User` の id は 2 になる。

### auto_incremant な値を更新する

```sql
alter table users auto_increment = 42;
```

- `before_created` が属するトランザクションの中で `alter table` は無理では？
- `auto_increment` のカラムの値を指定せずにいつも通りの `User.create` を行うと自動で一番でかい採番をしてくれるので結果的に不要だった。

## SQLite

### 次の `auto_incremant` な値を取得する

```sql
select seq from sqlite_sequence where name = 'users';
```

で現在の最高値を取得できる。対象のテーブルにまだ `insert` が行われていない時はレコード自体が存在しない。また、対象のテーブルのシーケンスに特定の値を指定して `insert` した場合、こちらの値は自動でインクリメントされる。

### auto_incremant な値を更新する

上記の通りなので、更新する必要がない。
React製WebアプリのAWSへのdeploy scriptを作った試行錯誤の過程

## システム構成図

![AWS Design.png](https://qiita-image-store.s3.amazonaws.com/0/39362/62ea0278-bdfa-3b02-583a-7408ff35d727.png)

---

## システム構成

- ReactのソースコードはS3 Backetにアップロード
- BacketはCloudFrontを経由して公開する
- ステージング環境と本番環境がある

---

## やりたいこと

残念ながらCIは導入されていないので、手動でデプロイする必要がある
ステージング環境と本番環境へのデプロイをできるだけ簡素化したい

---

## これまで手動でやってたこと

- APIの向き先を変更して `npm run build`
- 該当S3バケットにbuildしたファイルをアップロード
- CloudFrontのキャッシュを無効化
- これをproductionとstaging で実施

---

## ひとつずつスクリプト化していく！

---

## これまで手動でやってたこと

- **APIの向き先を変更して `npm run build`**
- 該当S3バケットにbuildしたファイルをアップロード
- CloudFrontのキャッシュを無効化
- これをproductionとstaging で実施

---

## Reactのbuild時に.envファイルを切り替える

- npm-scriptsにprebuildを定義して、そこで.envファイルを差し替え
- で、postbuildで元に戻す

まぁ 動いた

---

## env-cmd

あとで公式ドキュメント見てたら、そのものズバリの記載があった

> [Deployment · Create React App](https://facebook.github.io/create-react-app/docs/deployment#customizing-environment-variables-for-arbitrary-build-environments)
Customizing Environment Variables for Arbitrary Build Environments
(任意のビルド環境用の環境変数のカスタマイズ)
>
For example, to create a build environment for a staging environment:

---

## どう使う？

```json:package.json
{
  "scripts": {
    "build": "react-scripts build",
    "build:staging": "env-cmd .env.staging npm run build"
  }
}
```

---

## これまで手動でやってたこと

- APIの向き先を変更して `npm run build`
- **該当S3バケットにbuildしたファイルをアップロード**
- CloudFrontのキャッシュを無効化
- これをproductionとstaging で実施

---

## Amazon S3へのファイルのアップロード

- AWS SDKでアップロード

```js
async function putFile(sourceFile) {
  // S3にputするファイル名
  const dir = process.env.DIRECTORY ? `${process.env.DIRECTORY}/` : '';
  const key = sourceFile.replace('build/', dir);
  // ファイルの内容を取得
  const data = await fs.readFile(sourceFile);

  const params = {
    Bucket: process.env.BUCKET,
    Key: key,
    Body: data,
    ContentType: mime.lookup(sourceFile),
  };
  await s3.putObject(params).promise();

  debug(`putObject: ${key}`);
}
```

---

## これまで手動でやってたこと

- APIの向き先を変更して `npm run build`
- 該当S3バケットにbuildしたファイルをアップロード
- **CloudFrontのキャッシュを無効化**
- これをproductionとstaging で実施

---

## CloudFrontのキャッシュ無効化

```js:deploy.js
const cloudFront = new aws.CloudFront();

await cloudFront.createInvalidation({
  DistributionId: process.env.DistributionId,
  InvalidationBatch: {
    CallerReference: uuid(),
    Paths: {
      Quantity: 1,
      Items: ['/*'],
    }
  }
}).promise();
```

---

## これまで手動でやってたこと

- APIの向き先を変更して `npm run build`
- 該当S3バケットにbuildしたファイルをアップロード
- CloudFrontのキャッシュを無効化
- **これをproductionとstaging で実施**

---

## 環境変数をいい感じに切り替える

> [dotenv](https://www.npmjs.com/package/dotenv)
> Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env. 

`.env.production` と `.env.staging` をnpm-scriptsで呼び分ける

---

## どう使う？

```js:deploy.js
// 環境変数TARGETを元に読み込むファイルを切り替え
const target = process.env.TARGET || 'production';
require('dotenv').config({
  path: `${process.cwd()}/.env.${target}`,
});
```

```json:package.json
{
  "scripts": {
    "deploy": "node scripts/deploy.js",
    "deploy:staging": "TARGET=staging npm run deploy"
  }
}
```

---

## まとめ

ec2のWebAPI更新が手動なので、これもnpm-scriptsから更新がキックできたらいいな
picoCTF 2018 hertz - Points: 150

#問題

https://2018game.picoctf.com/problems

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/31505653-b36f-1cf4-45e1-bf9aaf2e8006.png)

#解いてみた

暗号問題です。
指定された接続先に接続してみます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/79c6ee75-7f11-1856-aed6-8eb5b940ac46.png)

こんな感じの長いやつが出てきました。
2回目アクセスすると違うのが出てきた。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/f056bf94-7f63-efd0-7b7d-67c7b7a3dd7e.png)

変換方法は同じなんだと思う。

CyberChefを使ってROT1～26までやってみたけどどれも違いました。
特に種的なものが渡されてない以上、ROT13みたいにN文字ずらすという規則的に変換しないにしても、それぞれaはkにbはxに、みたいに規則的に変換するんだと思う。
そういうことをやってくれるサイトを探したところ、ありました。
[quipqiup](https://www.quipqiup.com/)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/52aa8e60-8778-259c-e269-8b0a6dfb56fc.png)

できました。
後から名前空間を切ったらPG::UndefinedTable with namespaced Modelが発生した

## API作ったが、後から名前空間を別に切り出すことになった
API完成したものの、各モジュールの名前が煩雑になりすぎたので後から名前空間を切り出すことになった。

## 一通り変えたけどDBでエラー吐いてる
一通り変えて、念のためテストを走らす。
ちゃんとモデル名も変更してるし、DBと合ってるな。

。。。

```
PG::UndefinedTable with namespaced Model
```

DBがエラー吐いてるやん！

## 原因
prefixを定義してなかったのが原因でした。
例えば以下の様に名前空間をHogeで切っていて、その中にUserというモデルを定義しており、テーブル名はhoge_usersで定義されていた場合。

```
module Hoge
  class User < ApplicationRecord
  end
end
```

DBに問い合わせるには`table_name_prefix`というメソッドを定義してやると、ちゃんと頭にhogeを付けてDBに問い合わせてくれるので、テーブルが見つからないと言われなくなります。

```
module Hoge
  def self.table_name_prefix
    'hoge_'
  end
end
```
puppeteerで言語を日本語に設定する方法

スクレイピングをする時に、ブラウザを日本語対応で立ち上げたいとがあると思うのでその方法を解説します。
## puppeteerで言語を日本語に設定する方法
次のようにすることで日本語にすることができます。

```javascript
const puppeteer = require('puppeteer');
(async () => {
  const browser = puppeteer.launch({
    args: ['--lang=ja'] // デフォルトでは言語設定が英語なので日本語に変更
  });
  const page = await browser.newPage();
  await page.setExtraHTTPHeaders({
    'Accept-Language': 'ja-JP'
  });
})()
```

以上です。
## 終わりに
私は現在、Web3のサービスの開発をしています。詳しくはこちらの記事をご覧下さい。
        [無料でイーサリアムが当たる、Web3時代の寄付サイトを作った話](https://note.com/kenroda/n/n814347fbdcd7)
【Unity】 重力を変更する

#1.ゲーム全体の重力を変更する方法

ゲーム全体の重力を変更するには、
Edit→Project Settings→Physicsを開いて、

<img width="552" alt="スクリーンショット 2019-02-15 23.30.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/360619/f4ec8cd6-c41f-7171-d375-93cc8300ad4a.png">

InspectorのPhysicsManagerのGravityのVector3の値を変更するだけです！
デフォルトではy軸に-9.81 m/s^2 の力がかかっていますね。地球と同じです。

<img width="266" alt="スクリーンショット 2019-02-15 23.33.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/360619/d4defdc9-4940-437c-fd21-08f517f86c70.png">

コードから変更する場合は、

```
Physics.gravity = new Vector3(0,10,0);
```

こんな感じでできます。


#2.特定のオブジェクトのみ重力を変更する方法

特定のオブジェクトに違う重力をかけたい場合は、
以下のコード（ChangeGravity.cs）をオブジェクトにアタッチして、

```C#
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class ChangeGravity : MonoBehaviour 
{
	[SerializeField] private Vector3 localGravity;
    private Rigidbody rBody;

    // Use this for initialization
    private void Start () 
	{
        rBody = this.GetComponent<Rigidbody>();
        rBody.useGravity = false; //最初にrigidBodyの重力を使わなくする
    }

    private void FixedUpdate () 
	{
        SetLocalGravity (); //重力をAddForceでかけるメソッドを呼ぶ。FixedUpdateが好ましい。
    }

    private void SetLocalGravity()
    {
        rBody.AddForce (localGravity, ForceMode.Acceleration);
    }
}
```


Inspectorから好きなVector3を入力してあげればOKです。
<img width="264" alt="スクリーンショット 2019-02-15 23.39.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/360619/8f057c7f-5559-96ec-abed-7b8d0069c6a2.png">

以上、重力を変更する方法でした。
picoCTF 2018 environ - Points: 150

#問題

https://2018game.picoctf.com/problems

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/ead56c34-9dc0-fef2-e549-ec85820a27c3.png)

#解いてみた

サーバの環境変数にフラグが隠れているとのこと。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/238306ae-148f-8d73-a148-67a7513593ce.png)


これですね。
jQueryでname=submitを含むフォームがsubmitできなくなる問題をサラッと回避する

# なにがしたい？

```html
<form>
  <input type="submit" id="submit" />
</form>

<script>
  $(function() {
    $("body").click(function() {
      $("form").submit(); // 効かない
    });
  });
</script>
```

jQueryでは、`submit` を `id` や `name` に含むフォームは `submit()` できない！らしいです。

なので、**`submit` を `id` や `name` に使うのはやめましょう。**

解決！

# 結論

いやいやいや、そんなはずはない。

そうだ。

 `id` や `name` が `submit` っていうボタンがあるってことなんだから、クリックしたら良いんじゃない？

```Javascript
$('form #submit').click();
```

あ、できた。

＃もう少し一般的に適用するならこのような感じ。
「name=submitがあるなら、それをクリックすればいいじゃない」

```javascript
var $form = $(e.target).closest('form');
if ($form.find('*[name="submit"]').length > 0) {
    $form.find('*[name="submit"]').click()
} else {
    $form.submit();
}
```

jQueryプラグインにできるともっとカッコいいですね。


# 解説

jQueryが登場して久しく、もう既に時代遅れだと言われてからも久しいくらいの時が流れていますが、この「`submit`があるフォームは`submit()`できない」という問題はわりと通説らしく、**Google先生に聞くと、1ページ目のすべての記事から「そんなの使うな」と言われてしまい、心が折れます**。

```html:form.html
<!-- Form -->
<form action="submit.php" method="post">
  <input type="hidden" name="sample" value="value" />
  <input type="button" id="pseudo_submit" value="pseudo" />
  <input type="submit" id="submit" /> <!-- これが邪魔 -->
</form>

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<!-- Javascript to submit -->
<script>
  $(function() {
    $("#pseudo_submit").click(function() {
      $("form").submit(); // 効かない
    });
  });
</script>
```

```html:form.html
<form action="submit.php" method="post">
  <input type="hidden" name="sample" value="value" />
  <input type="button" id="pseudo_submit" value="pseudo" />
  <input type="submit" id="submit1" name="submit" value="submit1" />
  <input type="submit" id="submit2" name="submit" value="submit2" />
  <input type="submit" id="submit3" name="submit" value="submit3" />
</form>
```

いやいや、使うな！って言われても、使いたいときもあります。たとえばどのボタンが押されたかによって実行条件を変えたい場合、submitという変数にそのボタン名をいれてフォーム送信するとわかりやすい、とか。
もちろん「submitname」とか変数名を変えれば良いんですが、「submit」っていう名前のほうが断然わかりやすいじゃないですか！使わせてくださいよ。

というわけで試行錯誤してみたら、できた、というお話です。

Google先生。どうかこの記事を検索上位に滑り込ませていただき、同じように困っている人をお救いくださいませ……。

```html:完成したform.html
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<!-- Javascript to submit -->
<script>
  $(function() {
    $("#pseudo_submit").click(function() {
      $("form #submit3").click();
    });
  });
</script>

<!-- Form -->
<form action="submit.php" method="post">
  <input type="hidden" name="sample" value="value" />
  <input type="button" id="pseudo_submit" value="pseudo" />
  <input type="submit" id="submit1" name="submit" value="submit1" />
  <input type="submit" id="submit2" name="submit" value="submit2" />
  <input type="submit" id="submit3" name="submit" value="submit3" />
</form>
```

# 免責

- ボタンをクリックしているので、クリックできないエレメントだと動かないかもしれません。
- ていうか他にも回避法はあると思います。たしかあった。
- この記事はそういう細かな技術的カンペキさを追求する記事ではなく、Google先生が言っていることがいつも正しいとは限らないよ、案外あっさりカンタンな方法でより良い解決策が見つかることはあるよ！と言うのが目的の記事です。マサカリご容赦ください。
picoCTF 2018 caesar cipher 1 - Points: 150

#問題

https://2018game.picoctf.com/problems

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/affd1421-5ae9-4275-f41d-b8978635a919.png)

#解いてみた

暗号を解いてねということ。
ファイルをダウンロードして開いてみます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/1005491c-1696-9232-cea9-f1ab99a21870.png)

問題文にシーザー暗号って書いてあるのでROT13みたいなことをやれば答えは出るはず。
CyberChef使って1から26まで順番に見ていきます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/d633e9f9-fba5-0162-6a77-c7035f3fcba0.png)

これですかね？
just a good old caesar cipher fwacbovv
最後の単語が分かりませんが、あってました。
競技プログラミングで Python を使う時は関数にしよう

すごいシンプルなんですが競技プログラミングで Python を使う時は関数を定義してその中で問題を解こうという話です。

# Global 変数はアクセスに時間がかかる

理由はすごいシンプルで関数内の変数は実行時(解釈された時)に固定の配列に格納され、インデックスでアクセスされます。一方で Global 変数は実行時にはインデックスでアクセスされない（実行時に数が固定できないから）ため、ローカル変数と比べてアクセスに時間がかかります。

## どのくらい違うの？

問題とコード、もちろん実行環境にもよりますが、AtCoder の問題を解いていた時に、全く同じコードで、
・グローバル変数を定義して解いた時にはTLE
・関数内にローカル変数として解いた時にはAC

というケースがありました（見てみたら400-500msec違うテストケースも）。

というわけで競技プログラミングで Python を使う時は関数内に解法を書く習慣をつけるとよさそうです。

# 参考
https://stackoverflow.com/questions/11241523/why-does-python-code-run-faster-in-a-function
ReduxなしでReduxっぽいことをやるのを快適にするためのライブラリを作った

## 概要

mizchiさんの[実践:React Hooks](https://mizchi.hatenablog.com/entry/2019/02/08/154010)などにあるように`useReducer`と`useContext`をつかうことでReduxなしでReduxみたいなことができます。

小さな個人開発ではよく使えそうなテクニックだと思ったので、快適にそれを行うためのライブラリ、reducer-context-hookを勉強がてら作ってみました。

APIは[facebookincubator/redux-react-hook](https://github.com/facebookincubator/redux-react-hook)を~~パクり~~参考にしました。

リポジトリ: https://github.com/sosukesuzuki/reducer-context-hook

## API

### create()

exportされているのは`create`という関数だけです。`StoreContextProvidr`、`useDispatch`、`useMappedState`を持つオブジェクトを返す関数です。引数はありませんが、型引数としてStateとActionの型を渡します（デフォルトだとany）。返り値のオブジェクトに含まれる３つをそのままexportせずに`create`をexportさせたのは単純に型引数を渡したかったという理由です。

```tsx
import create from "reducer-context-hook";

const { StoreContextProvider, useDispatch, useMappedState } = create<
  State,
  Action
>();
```

### StoreContextProvider

`create`の返り値のうちの１つです。propsとしてreducerと初期ステートを受け取ります。内部的にはそのままContextオブジェクトのProviderになっているのでコンポーネントツリーのルートあたりで囲んであげましょう。

```tsx
function reducer(state: State, action: Action): State {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    case "reset":
      return { count: 0 };
    default:
      throw new Error();
  }
}

const initialState: State = {
  count: 0
};

function App() {
  return (
    <StoreContextProvider reducer={reducer} initialState={initialState}>
      <App />
    </StoreContextProvider>
  );
}
```

### useDispatch()

とてもシンプルなHookで、`dispatch`を返します。Actionを作って使いましょう。あと、Reduxを使わないといいましたが、ReduxのbindActionCreatorsはここで使えますね。（同様にcombineReducersもreducer定義で使えそう）

```tsx
function Increment() {
  const dispatch = useDispatch();
  const increment = React.useCallback(
    () => dispatch({ type: "increment" }),
    []
  );
  return <button onClick={increment}>+</button>;
}
```

### useMappedState(mapState, memoizationArray)

react-reduxで言うところのconnect(State限定)にあたります。Stateを引数にとってほしい値を返す関数(mapState関数)と、メモ化のためのキーを配列として引数にとります。内部では`useCallback`を使ってメモ化しています。

```tsx
function Counter() {
  const { count } = useMappedState(
    state => ({
      count: state.count
    }),
    []
  );
  return <p>{count}</p>;
}
```

## 感想

あ、まだnpmにpublishしてません。テスト書き終わったらpublishします。

Custom Hooksを書くのってとても楽しいです。これからも色々書いていきたいと思います。
北大・日立新概念コンピューティングコンテスト2018で正の点数が取りたい

現在、コンテスト中です。

問題はこれ
https://atcoder.jp/contests/hokudai-hitachi2018

とりあえず正の点数が取りたい人向け。
ご自由にご利用ください。

続きの記事　→ https://qiita.com/nekomimimi/items/94c85a2d263734ea2f19

```c++
#include <iostream>
#include <vector>
#include <cmath>
// 北大・日立新概念コンピューティングコンテスト2018

// 目標
// なんでもいいからA,B,Cで正の得点が取りたい
//
// 方針
// 次数が1か2であれば、そのまま入力の項を出力すればいい。
// よって、次数が3次以上を考えればいい。
// 入力f以上の値で、出力gをできるだけ小さくしたい。
// 1. 係数cが0以下の項はとりあえず無視する。
// 2. cが1以上の時は、足して定数として出力。

using namespace std;
int main() {
	int N;
	int K;

	// input
	cin >> N >> K;

	vector< vector<int> > v;
	vector<int> c;

	int c_d0 = 0;

	for (int i = 0; i < K; i++) {
		int d;
		int ct;

		cin >> d >> ct;
		c.push_back(ct);
		vector<int> v_row;

		for (int j = 0; j < d; j++) {
			int cur;
			cin >> cur;
			v_row.push_back(cur);
		}

		v.push_back(v_row);
	}

	// 計算
	vector< vector<int> > v_ret;
	vector<int> c_ret;

	int total_c = 0;

	for (int i = 0; i < K; i++) {
		if (v[i].size() > 0 && v[i].size() <= 2) {
			v_ret.push_back(v[i]);
			c_ret.push_back(c[i]);
		} else {
			total_c += max(0, c[i]);
		}
	}

	// output
	cout << N << " " <<  v_ret.size() + 1  << endl;

	cout << "0 " << max(1,total_c) <<  endl;
	for (int i = 0; i < v_ret.size(); i++) {
		cout << v_ret[i].size() << " " << c_ret[i];
		for (int cur : v_ret[i]) {
			cout << " "  << cur;
		}
		cout << endl;
	}

	return 0;
}

```
UNIXコマンド 勉強

#　

##　ドンべ
- どん

```shell
\\\\
ls :フォルダの中を見る  
cd :フォルダ間の移動
cd..:上のフォルダへ移動
rm file：削除
copy . file：フォルダをつくる
mkdir：同上
pwd：現在のpass(今いるフォルダのアドレス)を表示
mv：move
gcc:コンパイル
history：コマンド入力の履歴
```


```c

#include <stdio.h>

int main(void) {

    printf("こんにちは\n");

    return (0);

}
  Id CommandLine
  -- -----------
   1 ls
   2 copy . jiji.c
   3 ls
   4 ls
   5 cc .\gh.c\
   6 cd .\gh.c\
   7 ls
   8 cc .\donkoni.c
   9 gcc .\donkoni.c
  10 gcc .\donkoni.c
  11 ls
  12 .\a.exe
```
Selenium ChromeDriver & PythonをMacで動かせた。

Selenium関連の記事はググったらたくさん出てくるが、seleniumとwebdriverはバージョンの縛りが非常に厳しいらしく、インストールしても全く動かない。

苦戦すること2時間、やっと動かせるようになったので、失敗した時のパターンと成功パターンを書いておきます。これからseleniumでChromeを操作しようとする人の参考になれば幸いです。

#失敗パターン
pythonを動かす時はGoogle colaboratoryやjupyter notebookを使っていたので、seleniumも同じように動かせるだろうと思っていた。

こんな感じで、seleniumのインストールやimportは特に問題なくできる。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/321960/a9f2fc62-b8f8-02f6-8663-54e1eb95945a.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/321960/b0491270-1ec2-e0eb-e7d7-6fdb64c4269e.png)
しかしながら、webdriverを動かそうとしたら、エラーが出てしまう。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/321960/72e52216-4987-cc88-381f-0307893b9c74.png)

いろいろと試行錯誤して、以下のような手順を踏んだところ、うまくChromeを立ち上げることができたので、備忘録としてメモしておく。

## Chromeに合ったバージョンのwebdriverをインストールしよう。

choromeのバージョンは、リンゴマークの隣[Chrome]の「Google Chromeについて」をクリックすれば、別ウィンドウが開きバージョンを表示してくれる。
私の場合は、バージョン71であったが開いた途端に自動更新が始まり、バージョン72になった。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/321960/0ccf7c96-f794-0d46-5dab-bff63cdebaaf.png)

バージョンを確認したら、以下のページからダウンロードする。バージョン72だったので、上から二つ目のやつです。
https://sites.google.com/a/chromium.org/chromedriver/downloads
![image.png](https://qiita-image-store.s3.amazonaws.com/0/321960/bca6cbea-3618-0394-eec8-b6f7078e8684.png)

ダウンロードできたら、解凍してダブルクリックすると、ターミナルが開いて、こんな画面が表示される。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/321960/5bae23d8-33eb-92d8-3b15-4d486f86bfa4.png)

## seleniumをインストールしよう。
ターミナルを新しく開き、pip使ってインストールできる。

```
$ pip install selenium
```

※pipを使ったインストールは、jupyter notebook上でもできたっぽい。
※何やらpipのバージョンが古いみたいな表示が出たので、素直にpipをアップデートした（これが成功の理由であったかは不明。まあ新しいに越したことはないだろう）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/321960/28f7f7c2-ff74-c58d-4457-7881b0a577b0.png)

##Chromedriverをインストールしよう
たぶん、chromedriverがインストールできてなかったことが、エラーの原因かと思われる。

参考にしたページだとbrewを使ってchromedriverをインストールする、とあったので、これに従ってchromedriverをインストールしようとした。

```
$ brew install chromedriver
```

ただ、これだとErrorが表示される。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/321960/b08730ca-c9c1-1cb1-3e51-b88ac4c6faa4.png)

エラー内容を読むと、「brew tap homebrew/cask」と「brew cask install chromedriver」を入力したら良いっぽい（意味はわかりません）

なので、まずは

```
$ brew tap homebrew/cask
```
を入力。すると、以下のプロセスが進行する。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/321960/17e946e1-2ada-2895-33b2-dbdf9880722d.png)

次に

```
brew cask install chromedriver
```

を入力。
するとこんな感じで、うまくインストールされたっぽい。かんぱーい
![image.png](https://qiita-image-store.s3.amazonaws.com/0/321960/deee2ecc-a246-6265-2704-3340a7585095.png)

で、もう一回jupyter notebook上でseleniumのインポートとwebdriverを実行すると、Chromeが立ち上がりました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/321960/8499d8d9-8263-cf4f-a42a-7e06187bce58.png)
GetComponentの基本を理解する

###はじめに
１から勉強すると必ず出るメソッドです。写経を行いテキストの指示通りにやればほぼうまくいきます。しかしこれらを繰り返していくといざ説明する時に、何も理解をしていない事に気が付きました。テストを繰り返していくうちに理解できるようになったので、記事にします。

###Componentとは
Inspectorに表示されているTransform以下の各々の情報。AddComponentでGameObjectで使うコンポーネントを追加します。GetComponentはこれらの情報を変数に割り当てることで、自由に設定できます。
![component2.png](https://qiita-image-store.s3.amazonaws.com/0/307841/bf25e929-f496-c705-29d3-5bba0ce26aaa.png)

###スクリプト

~~~C#
public class CylinderRotate : MonoBehaviour
{
    float time;  
    
    void Update()
    {
        time += Time.deltaTime;                   //timeを加算し続ける
        var ren = GetComponent<Renderer>();       //コンポーネントRendererを取得
        var col = GetComponent<Collider>();       //コンポーネントColliderを取得
        var tra = GetComponent<Transform>();      //コンポーネントTransformを取得

        tra.Rotate(10f, 0, 0);    //GameObjectoを回転させる。

        if(time >= 0)             //timeが0秒経過
        {
            col.enabled = true;   //Colliderを真
            ren.enabled = true;   //Rendererを真
        }

        if(time >=2)               //timeが2秒経過
        {
            col.enabled = false;   //Colliderを偽
            ren.enabled = false;   //Rendererを偽

            if (time >=4)          //timeが4秒経過
            {
                time = 0;          //timeを0にする。
            }
        }
    }
}
~~~
上のスクリプトを打ちこんで、3Dオブジェクトにアタッチする。
###結果


![movie.gif](https://qiita-image-store.s3.amazonaws.com/0/307841/3790771e-fe18-dceb-a2d9-2de6fd59343c.gif)

###感想
今までコンポーネントの使い方は理解をほとんどしていなかったが、ロックマンのような足場を消す・現れるの繰り返しを作ってみたことで、理解が大分進んだと思う。
XcodeでBuildTargetを切り替える

#環境
Mac 
システムのバージョン:macOS 10.13.6 (17G5019)
Xcode Version :10.1


C++をMacで勉強してる時に参考にしていた書籍にスクリプトのビルド対象を変更するとコードを消さずに新しいコードを試せると書いてあったのに見つからずに手間取ったのでメモ程度に

<img width="1440" alt="スクリーンショット 2019-02-09 22.06.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/316758/b26a50fc-b65b-947b-907f-9e8cefb70435.png">
rails sできない時の対処法


Ruby on Railsで Rails serverコマンドをした時にサーバーが立ち上がらなかった時に対処したことをメモ。

##エラー内容

`rails s`としてローカル(http://192.168.33.10:3000/ )にアクセスすると,

**ActiveRecord::ConnectionNotEstablished**
**No connection pool with 'primary' found.**

といったようなメッセージが出て上手く動いていない。

ActiveRecordとはRuby on Railsにおいてデータベースとのやりとりに使われているフレームワーク？です。
なのでこのエラーはデータベース関連のエラーであると推測されます。

##Rails db:migrateで確認

ターミナルを見返すとそもそもdb:migrateが上手くいってません

`rails db:migrate `
とすると
**Gem::LoadError: can't activate sqlite3 (~> 1.3.6), already activated sqlite3-1.4.0. Make sure all dependencies are added to Gemfile.**
というエラー。

内容はGemのロードエラー。具体的にはsqlite3 (~> 1.3.6)がアクティベートできないけどsqlite3 (1.4.0)はアクティベートされてるよ、というもの。

おそらくRailsが最新版のsqlite3(1.4.0)を受け付けてないと推測。
ちなみに(~>1.3.6)とは　'1.3.6以上1.4.0未満'という意味。

##対処法：Gemfileの更新

Rails new　したフォルダにあるGemfileの内容を変えましょう。
（初学者の私にとっては「？？？」状態でしたが。。。）

`Gemfile`
の中にある
`gem 'sqlite3'`
という部分を
`gem 'sqlite3', '~> 1.3.6'`
に変更しましょう。

これで
`bundle update`
`bundle install`
というコマンドをターミナル上で実行し、
`rails s`

晴れてRuby on Railsのデフォルト画面が現れるはず。

初学者でいきなり詰まったところだったのでメモを残します。
chmod チートシート

# 1 概要

chmodコマンドはファイルやディレクトリの編集権限を変更するときに使用するコマンドである。


# 2 編集権限
## 2.1 権限の意味

　ファイルやディレクトリは所有者、グループやその他のユーザーに応じて権限を設定することができる。これはファイルを作成したユーザーが第三者(グループやその他のユーザーなど)によって勝手にファイルを書き換えられるのを防ぐためである。
　設定できる権限は主に以下の３つである。


- 読み込み権限
- 書き込み権限
- 実行権限

例えば、自分以外のユーザーの権限をファイルの読み込みと実行権限のみ有効にした場合は、ファイルの中身を表示や実行は可能になるが、ファイルの中身を編集することはできない。


## 2.2 編集権限の確認

　ターミナルで

    $ ls -l

と打つと次のような結果が表示される。

    -rw-r--r-- 1 yourname yourgroup  12M Jan 11 16:18 hogehoge.txt

この表示の前半部分

    -rw-r--r--

が編集権限を意味する。ただし、一文字目はファイルとディレクトリの識別子である。
例ではtxtファイルなので

    -

となっているが、仮にディレクトリだった場合は

    d

と表示される。
　残りの９文字は次のように分けられる。

    rw- r-- r--

これは、それぞれ所有者、グループ、その他のユーザーの編集権限を意味する。
　rやwは設定できる権限の頭文字であり、


- 読み込み権限 → r
- 書き込み権限 → w
- 実行権限 → x

と対応している。仮に、すべてのユーザーが３つの権限を持つ場合、次のようになる。

    rwx rwx rwx


## 2.3 権限の編集方法

　権限の編集はchmodコマンドによって行われる。

例

    chmod 755 hogehoge.txt

コマンドオプションの数値は各ユーザーの権限設定であり、2進数で記述する。

| 0 | 000 | --- |
|:-:|:---:|:---:|
| 1 | 001 | —x  |
| 2 | 010 | -w- |
| 3 | 011 | -wx |
| 4 | 100 | r-- |
| 5 | 101 | r-x |
| 6 | 110 | rw- |
| 7 | 111 | rwx |

755の場合は

    rwx r-x r-x

を設定したことになる。