OmniAICreator/Qiita-1.07M huggingface dataset:
androidのAPKを解析する。デコンパイル＆デバッグ

とあることからアプリを解析することになった。
以下はその手順。

参考）
https://coky-t.gitbook.io/owasp-mstg-ja/android-tesutogaido/0x05c-reverse-engineering-and-tampering


##### アプリを準備
当たり前なので割愛。
（~~ipaは取り出しにくい~~）

## apktoolのダウンロード
apk形式はzipなので、apk→zipと拡張子を変えても展開はできる。
ただ、apktoolのほうがリソースをデコードしてくれたり、dexを変換してくれたりと便利
macなら`brew install apktool`で可能。

コマンド入ったら、`apktool d hoge.apk`で展開される。

ちなみにアプリのファイル形式がapkxという場合もあるみたい。
これは複数のapkをまとめた形式なので`unzip`などで一度解体してからでも可。

## 解体した内容
resにリソースなどが含まれる。
javaの内容は`classes*.dex`というファイルにまとまっている。
`d2j-dex2jar`とかでjarに展開可能。
apktoolだと全部展開してくれてるはず。
（ただし全部元に戻せるわけではない）

#### リソースが一部展開されない
後にも触れるが、一部リソースは展開できないことがある。
decodeしたあとにファイルを改変して再度apkにしてもこのせいで動かないことがある。
その場合は、当該リソースを読み込んでる`layout/activity_******.xml`からそのリソースを読み込んでいる部分をすべて消す。
（大方imageviewとかなのでまぁ消しても問題なし。imageがほしいなら別だが）
こんな名前が見つかるはず→`APKTOOL_DUMMY_***`
`res/values/drawables.xml`に参照が見つかるのでこれをまとめて変えてもいいかも。

## android:debuggable="true"
デバッグを有効にするため、`AndroidManifest.xml`の`application`エレメントに設定する。
それで再度apkに変換して、adbでinstall、実機で実行して、android studioからデバッグをアタッチする。

## 再度apkに
`apktool b -f`
でapkファイルにパック
`zipalign -v 4 dist/hoge.apk ../hoge.apk`
zipalignで処理（このへんよくわかってません。アプリ作ったことほぼないもので…）
`apksigner sign --ks ~/.android/debug.keystore --ks-key-alias signkey hoge.apk`
デッバグ用キーで再度署名（このへんはandroidのドキュメントを見ればOK）
`adb install -r hoge.apk`
で実機にインストール
これでひとまず動くはず。動かなければAndroid StudioのLogcatなどでエラーを確認する。

## AndroidStudioからプロセスをアタッチ
アンドロイド本体にて「デバッガを待機」などの設定をしておく。（開発者モードももちろん）
また、AndroidStudioにて新規プロジェクトを作成し、解体したソース一式をそのまま新規プロジェクトに入れてしまう。
（参考URLとやりかた同じ）
そうすることでブレークポイントが使える。
完全にブレークポイントが有効になるわけではない（バイトコードとの対応ができない部分があるみたい）
が、なんとなくあたりを付けていけば実行が追えるはず。
あとは気になる処理を根気よく探していこう。
便利な関数の作り方(入力値)

####前置き
あ～、競プロ(競技プログラミング)でいっつも同じような入力書くの面倒だなあ～。('Д')

よし、自動化してやれ！自作ライブラリの使用OKって書いてるしな！自作ライブラリが何かしらないけど。(＾◇＾)

####ここから本編
```C#:function.cs

static public void Main()
{
	//aに一つの文字列を入力
	string a = onestring(); 
	//bに複数の文字列を入力
	string[] b = arraystring();
	//cに一つの数字を入力
	int c = oneint();
	//dに複数の数字を入力
	int[] d = arrayint();
}

//一つの文字列を受け渡す
static string onestring()
{
	return Console.ReadLine();
}

//複数の文字列を配列で受け渡す
//文字列と文字列の間は" "で区切る
static string[] arraystring()
{
	return Console.ReadLine().Split(' ');
}

//一つの数字を受け渡す
static int oneint()
{
	return int.Parse(Console.ReadLine());
}

//複数の数字を配列で受け渡す
//数字と数字の間は" "で区切る
static int[] arrayint()
{
	String[] input_line = Console.ReadLine().Split(' ');
	int[] input_num = new int[input_line.Length];
	for(int i = 0; i < input_line.Length; i++)
	{
		input_num[i] = int.Parse(input_line[i]);
	}
	return input_num;
}
```

staticがないとエラー吐いてくるので注意
どんな型を返り値にしたいかは、staticの後に書けばいいみたい。
配列の文字を配列の数字に短い行でする方法わかんなかった(´；ω；`)


入力値はMainで受け取ってる。
数字を配列に直すのだけ関数の中が長くなっちゃったなあ。
もっと短くなる方法は知らなかったのさ。

しかし、ほとんどのケースで結局数文字しか短くならなかった……。
面倒くさがらずに書けという神からのお告げなのだろうか(+o+)
#VsCode + RestClient 拡張で #ruby の API リクエストのコードを自動生成生する ( curl コマンドも )

# 手順

- RestClient 拡張をインストールしておく
- VsCode でテキストエディタに以下のように書いて、コマンドパレットで Generate Code Snippet を選ぶ


```
POST https://httpbin.org/post HTTP/1.1
Content-Type: application/json

{
    "foo": "bar",
    "wow": "yeah"
}
```

![image](https://user-images.githubusercontent.com/13635059/78118494-0c39ce80-7442-11ea-8269-e2dbb718eb21.png)

# 生成の例

```rb
require 'uri'
require 'net/http'
require 'openssl'

url = URI("https://httpbin.org/post")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true
http.verify_mode = OpenSSL::SSL::VERIFY_NONE

request = Net::HTTP::Post.new(url)
request["content-type"] = 'application/json'
request.body = "{\"foo\": \"bar\",\"wow\": \"yeah\"}"

response = http.request(request)
puts response.read_body
```

# curl のコマンドを生成する

こちらもコマンドで可能。
クリップボードにコピーされるので、ペーストすればコマンドになる。

![image](https://user-images.githubusercontent.com/13635059/78118947-a8fc6c00-7442-11ea-85de-8c37fe3d3ca1.png)

```
curl --request POST \
  --url https://httpbin.org/post \
  --header 'content-type: application/json' \
  --data '{"foo": "bar","wow": "yeah"}'
```

# 参考

[VS Code上でHTTPリクエストを送信し、VS Code上でレスポンスを確認できる「REST Client」拡張の紹介 - Qiita](https://qiita.com/toshi0607/items/c4440d3fbfa72eac840c)


# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/3059








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
C言語の現場で使うイロイロなまとめ

#C言語

**型の一覧**
void   　戻り値なし

```c
void test(void){
   //テストコード 
   printf("\n");
   return;
}
```

char   　文字型

```c
#include <stdio.h>

// 関数プロトタイプ宣言
void test(char);

int main(void){
test('a');
    
}

void test(char moji){
   //テストコード 
   printf("%c\n",moji);
   return;
}
```

int    　　整数型

```c
#include <stdio.h>

// 関数プロトタイプ宣言
void test(int);

int main(void){
test(10);     
}

void test(int num){
   //テストコード 
   printf("%d\n",num);
   return;
}
```

float  　小数点

```c
#include <stdio.h>

// 関数プロトタイプ宣言
void test(float);

int main(void){
test(10.1);     
}

void test(float fl){
   //テストコード 
   printf("%f\n",fl);
   return;
}
```

double 小数点(大きい)

```c
#include <stdio.h>

// 関数プロトタイプ宣言
void test(double);

int main(void){
test(10.1234567);     
}

void test(double db){
   //テストコード 
   printf("%lf\n",db);
   return;
}
```

struct	構造体
┗後でかく
union	共用体
┗後でかく
enum	列挙型
┗後でかく


ランダム
6を法とする合同(さいころ)

```c
rand() % 6 + 1;
```
例

```c

int roll_dice(void) {
	int roll_dice;
	srand((unsigned)time(NULL));
	roll_dice = rand() % 6 + 1;
	return roll_dice;
```
#小技 エンターで次の処理に移る方法
```
  //エンターキーを押すと次の処理へ移る

        void enter(void) {
            char dummy;
            printf("エンターキーを押してください\n");
            scanf("%c", &dummy);
        }

```

呼び出す場合

```c
enter();

```
と処理の途中で入力



例


```c


#include<stdio.h>
#include<stdlib.h>
#include<time.h>
// プロトタイプ宣言

int roll_dice(void);
void enter(void);

int main(void)
{
    int cp, cp1;
    int my, my1;


    //コンピュータ
    cp = roll_dice();
    printf("%d\n", cp);
        cp1 = roll_dice();
    printf("%d\n", cp1);

        printf("あなたの番です\n");
  

    //自分2回さいころを振る
    enter();
    my = roll_dice();
    printf("さいころの数は%d:\n", roll_dice());
    enter();
    my1 = roll_dice();
    printf("さいころの数は%d:\n", roll_dice());

}


    //6を法とする合同
    //さいころの数をランダムで出す
    int roll_dice(void){

        int roll_dice;
        srand((unsigned)time(NULL));
        roll_dice = rand() % 6 + 1;
        return roll_dice;
    }

        //エンターキーを押すと次の処理へ移る

        void enter(void) {
            char dummy;
            printf("エンターキーを押してください\n");
            scanf("%c", &dummy);
        }

```

#Linux系

・コマンド

移動

```
cd　  　　　　・・・　ホームディレクトリに移動
cd .. 　　　  ・・・ 1つ上のディレクトリに移動
cd ファイル名 ・・・ 指定したのファイル名のディレクトリに移動
```

ディレクトリ表示

```
ls　  　・・・　ディレクトリのファイル/フォルダを一覧表示
ls -1  ・・・ ディレクトリのファイル/フォルダを縦に一覧表示
ls -l　・・・ ディレクトリのファイル/フォルダの詳細を一覧表示
```

画面クリア

```
clear
```

vim

```
vim　編集するファイル名


```
MT4/MT5でEAプログラムを利用した自動売買を行う方法

為替（FX）の自動売買を行うには**EA**というプログラムを使用します。

**EA**とは、自動売買プログラムのことで「Expert Advisor：エキスパートアドバイザー」の略称です。

#EAによる自動売買を行う方法とは
![chart-1905225_640.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/612781/364a5710-9f92-93e0-7b69-723cdde890be.jpeg)

現在、国内のFX業者ではFXトレードを行うためにそれぞれ独自のトレードツールが用意されています。

この独自ツールではEA自動売買は行えません。
よって国内のFX業者ではEA自動売買は行えないということです。

そこでメタトレーダー（MT4/MT5）が使える**[海外FX業者](https://fuku6.com/archives/9011)**を利用します。

##海外FX業者を利用するメリット
国内FX業者を利用するよりも海外FX業者を利用するメリットはたくさんあります。

###追証がない（ゼロカットシステム）
国内FX業者は追証があるので、急激な相場変動が起こったときに証拠金以上の損失がでます。そのため一気に数百万の借金がでるトレーダーが続出します。
しかし、**海外FX業者は追証がない**ので証拠金以上の損失はありません。

###レバレッジが高い
国内FX業者はレバレッジ25倍です。今後10倍程度まで下がる可能性もあります。
レバレッジが低いと証拠金を多く用意しないといけません。
その分損失がでたときの痛手は大きいのです。

**海外FX業者は888倍から1000倍とレバレッジを効かせることができる**ので少ない証拠金で大きなリターンを狙えます。もちろん追証がないので思いっきりトレードすることが可能です。

###クリーンな取引環境
国内FX業者はNDD方式といって、トレーダーの注文を通すどうかディーラーが決めます。要は、トレーダーが損すると業者が儲かります。

これが最悪です。

ストップ狩りなどが横行する理由がこれです。そのため不正な取引は行えないクリーンな取引ができるというわけです。

しかし、海外FX業者はDD方式。
トレーダーが出した注文は直接インターバンクに通します。

**海外FX業者の利益はトレーダーが取引した手数料のみ。**
だからトレーダーが長くFX業者を長く利用するほど利益になるのです。

ということは、海外FX業者はトレーダーに儲けてもらうと業者も儲かるということ。
クリーンな運営がされているということです。

##メタトレーダー
<img width="424" alt="xmn007.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/612781/c051ca5c-bba7-6132-66f9-0e42cbc3311d.png">

[海外FX業者](https://fuku6.com/archives/9011)では、ほぼ100%メタトレーダーという超優秀な無料のトレードツールが利用されています。スマホアプリもありとても機能が充実しています。

**全世界共通で利用されているツール**なので、証券会社を移ってもそのままメタトレーダーを利用できるので、新たに取引ツールの使い方を覚える必要がありません。

現在あるメタトレーダーは「MT4」と上位版の「MT5」があります。

いまだにMT4が根強い人気がありますが、開発も終了しているのでMT5への移行が少しづつ進んでいる状態です。

##MT4/MT5が無料で利用できるおすすめ海外FX業者
海外FX業者は詐欺的な業者やまだ運営期間が短くて使い物にならない業者もあるので慎重に選ぶ必要があります。

一番のおすすめは「[XMTrading](https://fuku6.com/archives/4869)」です。
理由は日本人トレーダーが一番使っている海外FX業者だから。

安心感が違います。
10年以上の老舗FX業者で、何か不明点があっても検索すれば日本語のページですべての情報が出てきますし、何より一番使いやすいです。

##自動売買EAを入手
自分の取引手法が確立されていて、EAを作成できるプログラミング知識があってその手法を検証することもできたら一番良いのですが、恐らくそこまで到達するのに何年も掛かります。

そのため、EAを配布しているサイトを利用しましょう。

世の中には「[無料EA](https://fuku6.com/archives/4960)」を配布しているブログやサイトがあります。

正直なところ、無料EAを配布しているところはFX業者の手数料摂取が目的のみの詐欺的なところがほとんどで勝てないEA…。

何度もロスカットを食らいました…。
ものすごく稼いでいる風の過去の取引履歴を公開していますが、ほとんどが加工されています。

##トラリピ系EA
そこで一番おすすめのEAはレンジやポジション数など**すべて自分で設定できるトラリピ系のEAが一番おすすめ**です。

トラリピ系EAはガツンとは稼げませんが、コツコツとそして長期的に稼ぐことができるシステムになっています。

コツコツ確実型といっても複利で仕掛けを作っていけば月に数百万も夢ではありません。

【無料配布されているトラリピ系EA一覧】
-  [オリジナルトラリピEA](https://fuku6.com/archives/6232)
- [ハーフ＆ハーフEA](https://fuku6.com/archives/8562)

当然ですが、資金とポジションの管理ができなければ稼げないので、きちんとした戦略が必要になってきます。

その分、トラリピ系EAの運用は楽しいです！


[海外FXの教科書「フクログ」](https://fuku6.com/)
【Dialogflow】1つのIntentでどんな質問にも答えられるスーパーエージェントを作った話

# はじめに
簡単な質疑応答システムを作るためにDialogflowを使うことはよくあると思います。
通常は各質問ごとに各Intentを定義してあげるのですが、今回はそれを1つのIntentで対応してしまおう！（以下、スーパーエージェント）
という話になります。

# 通常の方法のデメリット
質疑応答システムは膨大な質問数を扱う事がある、つまり膨大なIntentを扱うことになるため、メンテナンスが大変です。

```
Q1Intent
Q2Intent
...
QXIntent
```

# スーパーエージェントのメリット
質問数が増えてもIntentは増えることがないため、Entityの管理だけになります。

```
QIntent
```

# 具体的な実装方法
方針としては **会話を分解する** ことになります。
例えば、「チョコレートはいくらですか」「チョコレートは何個ですか」という２つの質問があるとします。
両者共にチョコレートを題材として扱っていますが、前者は値段を問う質問で、後者は個数を問う質問なので、当然**答えは変わってきます**。これを通常の方法でIntent定義すると、
「{sweet}はいくらですか」と「{sweet}は何個ですか」（sweetはEntity）という学習フレーズを持った二つのIntentになると思います。スーパーエージェントでは「何個ありますか」「いくらですか」という部分もEntity管理してしまおう！というのが本質になります。なので次の様に分解してみます。
「チョコレート」を **noun** Entity 
「いくらですか」「何個ありますか」を **verb** Entity
として**名詞**と**動詞**に分解します。
そうすると先ほどのIntentの学習フレーズは次の様にあらわせると思います。

```
{noun}は{verb}
```

Intentが1つになりましたね。あとは名詞だけや動詞だけ、名詞と動詞が繋がったり、逆になったり、名詞だけが含まれる文章、動詞だけが含まれる文章パターンを考えます。
最終的には次の様な学習フレーズになると思います。

```
{noun}
{verb}
{noun}{verb}
{noun}は{verb}
{verb}{noun}
{verb}は{noun}
{noun}をしたい ※verbにパターンが存在しない、名詞だけ含まれる文章パターン
ものを{verb} ※nounにパターンが存在しない、動詞だけ含まれる文章パターン
```

最後にnounとverb（場合によってはID）でデータベースから質問に対する答えを検索するだけです。

<img width="870" alt="スクリーンショット 2020-04-02 18.40.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/115823/5b59d04b-0864-6ad5-20bc-d1a435569e7a.png">


#まとめ
分解して考えることで、やたらとIntentを増やさなくても様々なケースに対応できます。
文章が長く、名詞や動詞が複数含まれる場合でも、塊として名詞か動詞に寄せてしまえばそれっぽく動きました。
私のケースですと、今回のスーパーエージェントを作っておく事で、要件を満たす事ができました。
Ubuntu18.04 の phpmyadmin のエラーを直す

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/cbc9e825-48a5-8334-c71a-0f8baaab567d.png)


```

Warning in ./libraries/sql.lib.php#613
 count(): Parameter must be an array or an object that implements Countable

Backtrace

./libraries/sql.lib.php#2128: PMA_isRememberSortingOrder(array)
./libraries/sql.lib.php#2079: PMA_executeQueryAndGetQueryResponse(
array,
・・・・・・
```
# 環境 
- Ubuntu 18.04
- phpMyAdmin 4.6.6 documentation
- MariaDB mysql  Ver 15.1 Distrib 10.1.44-MariaDB,
- PHP 7.2

上記全てディストリビューションの標準パッケージでインストールしています。


# 解決方法の選択

この問題は、4.7.4の phpmyadmin で対応できているらしいです。
https://www.phpmyadmin.net/news/2017/8/24/phpmyadmin-474-released/

最新の公式パッケージをインストールするなどの方法もありますが、
今回は、インストールされている php スクリプトを書き換えることで対応します。


# 書き換え方法

以下を元にして対応しました。

https://stackoverflow.com/questions/48001569/phpmyadmin-count-parameter-must-be-an-array-or-an-object-that-implements-co

```

vim /usr/share/phpmyadmin/libraries/sql.lib.php
```

613行目近辺

```

function PMA_isRememberSortingOrder($analyzed_sql_results)
{
    return $GLOBALS['cfg']['RememberSorting']
        && ! ($analyzed_sql_results['is_count']
            || $analyzed_sql_results['is_export']
            || $analyzed_sql_results['is_func']
            || $analyzed_sql_results['is_analyse'])
        && $analyzed_sql_results['select_from']
        && ((empty($analyzed_sql_results['select_expr']))
            || (count($analyzed_sql_results['select_expr'] == 1)
                && ($analyzed_sql_results['select_expr'][0] == '*')))
        && count($analyzed_sql_results['select_tables']) == 1;
}
```

の、

```

            || (count($analyzed_sql_results['select_expr'] == 1)
```

を

```
            || ((count($analyzed_sql_results['select_expr']) == 1)

```
に直して解決します。

ここの count 関数が括弧で閉じてないのが原因だそうです。
ハンバーガーメニューの作成

![スクリーンショット 2020-04-02 18.30.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517237/3260709d-e9db-9f3c-3403-88f8bacd92e1.png)
![スクリーンショット 2020-04-02 18.30.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517237/6d838459-1cd6-8cbe-f0cb-ed7a87013c03.png)

###HTML5
```html

<body>
    <!-- ハンバーガーボタン -->
    <div class="ham" id="ham">
    <!-- ハンバーガーボタンのライン -->
        <span class="ham_line ham_line1"></span>
        <span class="ham_line ham_line2"></span>
        <span class="ham_line ham_line3"></span>
    </div>
    <!-- メニューの中身 -->
    <div class="menu_wrapper" id="menu_wrapper">
        <div class="menu">
            <ul>
                <li><a href="#1" style="color: #FFF;">メニュー１</a></li>
                <li><a href="#2" style="color: #FFF;">メニュー２</a></li>
                <li><a href="#3" style="color: #FFF;">メニュー３</a></li>
            </ul>
        </div>
    </div>
```

### CSS
```css

.ham{
    position: relative;
    width: 40px;
    height: 40px;
    cursor: pointer;
    background-color: rgba(0, 0, 255, 0.911);
}
/* ハンバーガボタンのライン */
.ham_line {
    transition: all 0.3s;
	position: absolute;
	left: 10px;
	width: 20px;
	height: 2px;
    background-color: #FFF;
}
.ham_line1 {
    top: 10px;
}
.ham_line2 {
	top: 18px;
}
.ham_line3 {
	top: 26px;
}

/* Javascriptでクリックイベントが発火した後の処理 ハンバーガボタンのライン */
.clicked .ham_line1{
    transform: rotate(45deg);
    top: 20px;
}

.clicked .ham_line2{
    width: 0px;
}

.clicked .ham_line3{
    transform: rotate(-45deg);
    top: 20px;
}
/* メニューの表示 */
.menu {
    position: fixed;
    left: -400px;
    width: 300px;
	height: 300px;
    background-color: rgba(0, 0, 255, 0.849);
    transition: all 0.5s;
    color: #FFF;
}

.clicked .menu {
	left: 8px;
}
```

### JavaScript
```javascript

  const ham = document.querySelector('#ham');
  const menu_wrapper = document.querySelector('#menu_wrapper')

// addEventListener さまざまなイベント処理を実行することができるメソッド
  ham.addEventListener('click', function(){ 
// classListとは、対象要素に設定しているクラスを配列のように扱えるオブジェクト
    ham.classList.toggle('clicked');
    menu_wrapper.classList.toggle('clicked')
  });

```
**addEventListener**
>https://www.sejuku.net/blog/57625

**classListとは**
>https://techacademy.jp/magazine/22308
Lよ、このコミットログから私を断定できるか。

## 概要
右も左もわからない状態ではありましたが、
１年間テックベンチャーでがむしゃらにやったので
１年に一回くらいはネタというか自己満記事を。（寒くてすみません。。）

## デスノートにて
｢デスノート」面白いですよね。
アニメの中で、Ｌがキラを学生と断定したシーンありますよね？

人が不審死をした事例をプロットして一週間ごとに区切って重ね合わせると、
特定時間には一切事件が起きていない。
起きていない時間は平日の特定時間だが、
曜日によって途中に細切れの時間がある。

よって、大学生の時間割と考えるとあてはまる、
つまり、キラは大学生に違いない！というシーンです。

で、今回は別に直接は関係ないんですが４月になったので
自分のGitで１年間のコミットを振り返ってみたところ、
これ、なんかデスノートで見たプロットに似てるなと思ったので投稿に至りました。笑



## 今年１年間のコミットログ

<img width="952" alt="Screen Shot 2020-04-02 at 18.01.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519792/f375e46d-cbe4-7525-c465-9afbad2b97bd.png">

このログに特に意味はないですし、人それぞれなので比べるつもりはありませんが、
自分の中ではまあ頑張った勲章なのかなと。

みなさんもリモートワークなどで大変かとは思いますが、
昨年度の振り返りもしつつ、また新年度を心機一転頑張りましょう！！


というわけで、

おわり。
ReactNativeでカスタムBuild Configurationを使うときの注意

Debugコンフィギュレーションを複製にしたカスタム Build Configuration を作る時、`No bundle URL present.`というエラーがでてクラッシュすることがある。

原因は、CocoaPodsのPodfileで下記の記述を入れていないためだった。

```ruby
project 'Project名',
  'Debug' => :debug,
  'Release' => :release,
  'CustomDebugConfiguration' => :debug # カスタムBuild Configurationを作った時は忘れずに書く
```

参考

- [After upgrading to react-native 0.60.x schemes other than production (default) do not work. · Issue #76 · thekevinbrown/react-native-schemes-manager · GitHub](https://github.com/thekevinbrown/react-native-schemes-manager/issues/76#issuecomment-522016998)
- [CocoaPods Guides - Podfile Syntax Reference](https://guides.cocoapods.org/syntax/podfile.html#project)

### 余談

Releaseベースのカスタム Build Configuration だと上記の記述がなくても問題なく動いてしまう模様。Debugベースのモノを追加する時は気をつけましょう。
aws-sam-cliを使いローカル環境でLambda Functionの動作確認

SAMについては以下のドキュメント等読んでください

[AWS サーバーレスアプリケーションモデル - アマゾン ウェブ サービス](https://aws.amazon.com/jp/serverless/sam/)

インストール

```sh
$ brew tap aws/tap
$ brew install aws-sam-cli
```

なお、すでに環境ができているものとします。
parcelを使ったTypeScript+AWS Lambdaについては以下の記事を見てください。

[parcel v2を使ってTypeScriptで書いたAWS Lambdaをビルドする - Qiita](https://qiita.com/akameco/items/6c623adc6d7f7fee42be)

SAMのtemplateを用意します。
基本的には、`AWS CloudFormation` 構文なので詰まったらこのキーワードで調べるといいでしょう。

template.yml

```yml
AWSTemplateFormatVersion: '2010-09-09'
Transform: AWS::Serverless-2016-10-31
Description: Run AWS Lambda
Resources:
  Main:
    Type: AWS::Serverless::Function
    Properties:
      Handler: dest/bundle.handler
      Runtime: nodejs12.x
      Environment:
        Variables:
          GITHUB_TOKEN:
            Type: String
```

環境変数は、template.ymlに直接書かずに別に定義するといいでしょう。その場合も、テンプレートにどのキーを使うかについては記述が必要になります。

env.json

```json
{
  "Main": {
    "GITHUB_TOKEN": "1234567890...."
  }
}
```

イベントをjsonで用意します。

events.json

```json
{
  "body": "hello"
}
```

`-n`で環境変数、`-e`でイベントを与えてやればローカル環境でLambda関数がテストできます。

```sh
sam local invoke Main -n env.json -e events.json
```
写真の右上に三角形のラベルをつける

# １ 写真の方にラベルをつける方法

今回は、下の写真のような、imageの肩に斜めの装飾をつける方法を学んだので共有したいと思います。


<img width="400" alt="代替テキスト" src="https://i.gyazo.com/6b7734e1b7b595d7007e1f5f85701307.png">
>



# ２ 必要な記述
今回は簡単なサンプルとして要素を書いています。

\<hamlの記述>

```
.image-box
 = image_tag @image.image
 .triangle-box
  sold              /*sold outの意味*/
```

hamlの記述は以上です。
ポイントは装飾したい写真を表示させる記述のしたに、ボックスを追加することです。
細かいことは、cssでいじっていきます。

\<scssの記述>

```
.image-box {
 width: 100px; 　　　           　　　　　　　　/*適当にセットしてください*/
 height: 100px;　　　           　　　　　　　　/*適当にセットしてください*/
 position: relative;
 overflow-x: hidden;　　　　　　　←ポイント①
 = image_tag @image.image
 .triangle-box{
　　position: absolute;          　　　　　　　 /* 必須(絶対配置にするため) */
　　top: -15px;                  　　　　　　　 /* 掲載位置の調整(座標) */
　　left: -130px;                　　　　　　　 /* 掲載位置の調整(座標) */
　　background-color: rgba(255,0,0,0.4); 　　　/* 背景色の調整(透けるように調整) */
　　padding: 80px 40px 0 40px;   　　　　　　　 /* サイズ調整：配置 */
　　width: 140px;                 　　　　　　　/* サイズ調整：横幅 */ 
　　height: 120px;                　　　　　　　/* サイズ調整：高さ */
　　font-size: 1em;               　　　　　　　/* サイズ調整：文字 */
　　font-weight: bold;
　　font-size: 50px;             　　　　 　　　/* サイズ調整：行高 */
　　transform: rotate(-45deg);   ←ポイント②　　 /* 傾きの度合い */　
　　transform-origin:top;   　　　 
　　text-align: center;
 }
}
```

ポイントは二つ
①　はみ出した部分が表示されないようにする
②　写真の肩に乗せたい要素を斜めにする

```
overflow-x: hidden;
```

これがないと、要素が表示されます。
（今回はうまく表示させることができませんでした。検証ツールで[overflow-x: hidden;]を非適用にしても効きませんでした。）

移動させる要素(.triangle-box)の親要素(.image-box)に記述してください。
<img width="500" alt="代替テキスト" src="https://i.gyazo.com/69e69102d75c63047dba258a2d4d3574.png">
>





あとはきれいに見えるように微調整を繰り返してください。

見栄えがよくできる割りに作業は簡単なのでぜひぜひ試してみてください。


最後まで見てださり、ありがとうございました。



参考記事
>https://www.nishishi.com/css/round-caption-img.html
>https://haniwaman.com/background-skew/
JavaScript : 一定範囲のスクロールを検知するしてクラスを付与・除去する

* 指定した要素がブラウザ表示範囲の頂上に来たらクラスを付与する
* 指定した要素がブラウザの表示範囲からでたらクラスを除去する

という仕様でビジュアルコントロールをするスクリプトです。
言葉だけでは分かりづらいので以下サンプル画面をスクロールしてみてください。

<p class="codepen" data-height="400" data-theme-id="5973" data-default-tab="result" data-user="KazuyoshiGoto" data-slug-hash="xmqGjB" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="range activate script">
  <span>See the Pen <a href="https://codepen.io/KazuyoshiGoto/pen/xmqGjB">
  range activate script</a> by Kazuyoshi Goto (<a href="https://codepen.io/KazuyoshiGoto">@KazuyoshiGoto</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

「Dummy Text Section 1」のブロックが表示範囲最上部に来たらナビゲーションが出てきます。
「Dummy Text Section 1」が画面外に消えるまでスクロールするとナビゲーションが引っ込みます。

ナビゲーションのレイヤーを「show」というクラスの付与・除去でコントロールしています。
「**一定範囲だけである要素を表示させる**」という、よくある感じのUIです。

こういう細かいネタって案外明文化されていないのでメモしておこうと思います。

## JavaScript

```javascript
window.onscroll = function () {
  scrollToggleClass(".section1", ".fixed-nav", "show");
}
function scrollToggleClass(rangeTarget, addTarget, classname) {
  if($(rangeTarget).length){
    scroll = $(window).scrollTop();
    startPos = $(rangeTarget).offset().top;
    endPos = startPos + $(rangeTarget).outerHeight();
    if (scroll > startPos && scroll < endPos) {
        $(addTarget).addClass(classname);
    } else {
        $(addTarget).removeClass(classname)
    }
  }
}
```

スクロールを検知したら `scrollToggleClass()` を動かす処理です。

`scrollToggleClass()` には範囲対象となる `rangeTarget`、クラスの取り外しをする `addTarget`、付与するクラス名 `classname` を指定します。

`rangeTarget`の開始位置と終了位置を取得し、あとはウィンドウのスクロール位置に応じてクラスを付けたり外したりしています。
AWS キーペア削除方法

# 前置き
AWSのキーペア削除方法についてメモ
# 本題
EC2 Management Consoleの左側のメニューバーから「ネットワーク&セキュリティ」→「キーペア」を押下する。
<img width="186" alt="スクリーンショット 2020-04-02 14.07.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267287/7552d92b-f359-ccbf-9ad2-3617b44f704d.png">
削除したいキーペアを選択した状態で「アクション」→「削除」を押下する。
<img width="807" alt="スクリーンショット 2020-04-02 14.08.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267287/49054746-c793-ea5d-0d78-9573b7c3afc2.png">
テキストボックスに「削除」と入力し削除ボタンを押下する。
文面には"delete"と入力せよと書かれているが、日本語で「削除」と入力するのが正。
<img width="539" alt="スクリーンショット 2020-04-02 14.08.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267287/92ab29c7-ce46-2835-a848-a3220f2f469a.png">
ディレクトリ配下のすべての画像を変換する方法



https://superuser.com/questions/662544/batch-run-mogrify-including-subdirectories

現在のディレクトリ配下のsvgファイルをすべてpngにする。

```
find . -name '*.svg' -exec mogrify -resize 100x -density 300 -format png -monitor {} +
```

find に続けて -exec なんて可能なのか。知らんかった。

途中でフリーズするときがあった。timeoutで強制終了して次へ。
```
find . -name '*.svg' -exec timeout 5 mogrify -resize 100x -density 300 -format png -monitor {} \;
```
moment.jsでミリ秒を取得する方法

moment.js 便利だお。

```javascript
// 現在日時の場合
const millisecond = moment().valueOf()
```

```javascript
// 日付を指定する場合
const millisecond = moment(new Date('2020-04-02')).valueOf()
```

ちなみに、momentオブジェクトが正しい日付形式になっていないと`.valueOf()`で取得した値はNaNになります(ハマりました)。
最新の気温情報をアメダスから取得し、Zabbixに取り込んで、Grafanaで可視化する

この記事は<a href="https://arkey22.com/?p=1472">https://arkey22.com/?p=1472</a>のQiita用書き出しです。
(本当はこのような使い方は良くないと思うのですが、Qiita記事に比べてblogが埋もれてしまうため、記載してみてます。ちょっとしたチャレンジです。

## 概要
<img src="https://arkey22.com/jsnwp/wp-content/uploads/2020/03/SnapCrab_NoName_2020-3-2_23-50-32_No-00.jpg">

1. 気象庁が発表しているアメダスの情報から最新の気温を抽出する
2. 抽出した気温データをZabbixで収集する
3. Zabbixで収集したデータを可視化する(上記画像の緑の数値がアメダスから取得した外気温です)

## 取得対象

<img src="https://arkey22.com/jsnwp/wp-content/uploads/2020/03/SnapCrab_NoName_2020-3-2_23-59-7_No-00.jpg">
気象庁が発表している<a href="https://www.jma.go.jp/jp/amedas_h/today-43056.html?areaCode=000&groupCode=29">アメダス(表形式)</a>の気温のうち、最新のものを対象とします。
なお、この情報は1時間ごとに自動更新されると公式サイトに記載されていますが、実際はn時ピッタシに更新されるわけではないようで、熊谷市の場合は10分程度のタイムラグがあります。

## スクレイピング行為について
今回は上記の通りタイムラグがあるため、1分に1回のアクセスで最新の気温データを取得します。過去にLibrahack事件などもありましたが、この程度のアクセスは問題無いはず。
ちなみに、気象庁がこの「表形式」のデータをWebで公開してから10年以上経ちますが、テーブルの構造が全く変わっていません。あくまで推測ですが、気象庁が暗に自動収集している人や団体を認めているのではないかと思っています。構造を変えるとスクレイピング出来なくなってしまうので。もちろん、現状の表形式で十分だからという理由もあるとは思いますが。推測です、推測。

## 気象庁が発表しているアメダスの情報から気温のみ抽出する

```
[arkey22@zabbix4]$ cat outside_temp.sh
#!/bin/bash

temperature_c=`curl -s 'https://www.jma.go.jp/jp/amedas_h/today-43056.html?areaCode=000&groupCode=29' | grep 'block middle' | tail -n +2 | tr -d '\t' | grep -oP "^<td class=\"block middle\">\-?[0-9]?[0-9]\.[0-9]" | grep -oP "\-?[0-9]?[0-9]\.[0-9]" | tail -n 1`

/usr/bin/echo ${temperature_c} > /tmp/outside_temp
[arkey22@zabbix4]$
[arkey22@zabbix4]$ cat /tmp/outside_temp
7.4
[arkey22@zabbix4]$
[arkey22@zabbix4]$ crontab -l | grep outside_temp.sh
*/1 * * * * /usr/local/src/outside_temp.sh > /dev/null 2>&1
[arkey22@zabbix4]$
```
さて、対象と頻度を決めたところで、データを取得していきます。いつものごとくbashです。肝心の気温が掲載されている表のHTMLを見ると、読みにくいです。パイプをつなぎまくって最新の気温を取得してみましたが、可読性がクソを極めています。ここに時間をあまりかけたくなかったので今回はこれで良しとしますが、もっとうまく書けないもんかと、ちょっと落ち込みました。
取得間隔はcronで設定し、1分ごとにスクリプトを実行して取得します。
さて、上記スクリプトですが、気温の出力先として/tmp/outside_tempに上書きしています。/tmp/outside_tempに吐き出された値をzabbixの <b>vfs.file.contents</b> を使って数値を収集します。

## 抽出した気温データをZabbixで取得する
<img src="https://arkey22.com/jsnwp/wp-content/uploads/2020/03/SnapCrab_NoName_2020-3-3_1-11-13_No-00.jpg">
スクリプトを作成したサーバ(Zabbix的にはホスト)で新しくアイテムを作成します。キーがポイントで、以下の値を設定しています。
vfs.file.contents[/tmp/outside_temp]
zabbix-agentが動いている必要があるので、要注意です。
データ型は、小数点以下も取得しているので「数値(浮動小数)」に設定します。
監視感覚はcronと合わせて1分にしています。
アプリケーションでilo4を選んでるのは特に意図ありません…新しくtemperatureとでも名付けてアプリケーションを作っても問題ありません。

<img src="https://arkey22.com/jsnwp/wp-content/uploads/2020/03/SnapCrab_NoName_2020-3-2_23-52-10_No-00.jpg">

値が正常に取得出来ると、このような感じに1時間ごとの気温がZabbixで収集されます。

## Zabbixで取得したデータを可視化する
いつものごとくGrafanaを使います。
<img src="https://arkey22.com/jsnwp/wp-content/uploads/2020/03/SnapCrab_NoName_2020-3-3_0-56-31_No-00.jpg">

<img src="https://arkey22.com/jsnwp/wp-content/uploads/2020/03/SnapCrab_NoName_2020-3-3_0-57-34_No-00-1024x491.jpg">
Grafanaの導入方法とかGrafana-Zabbix間の連携方法は省略します。
今回は最新の値のみを表示したかったのでこんな感じで設定しています。

<img src="https://arkey22.com/jsnwp/wp-content/uploads/2020/03/SnapCrab_NoName_2020-3-2_23-50-32_No-00-1.jpg">
あとは適当にダッシュボードに配置して、完了です。
余談ですが、横の2つは室温とサーバ周辺の気温を表示させてます。室温はRaspberry piのTemperを使って取得しています。その話はまた今度。

お疲れさまでした。
laravel5.5で画像アップロード方法

表題の通りです。
画像ファイルをアップロードして、アプリ内で表示させたいと思います。
初心者なりに頑張ってみました。

##やりたいこと
プロフィール用の画像をアップロードして、表示させたい。

##画像ファイル用DB
今回は既存のusersテーブルにカラムを追加して、ファイルのパスを保存します。

```
php artisan make:migration add_image_column_users_table --table=image
```

##ルーティング
マイページ内で画像投稿用のフォームに移動したいので、そちらにまとめます。

```web.php
Route::group(['middleware' => ['auth']],function() {
    //画像投稿フォーム表示
    Route::get('userimage', 'UserEditController@index')->name('image.index');
    //画像保存
    Route::post('userimage', 'UserEditController@upload')->name('image.upload');
```

##コントローラー
アップロード用のコントローラーを作成したいと思います。

```UserEditController.php
//画像アップロード画面を表示
    public function index()
    {
        return view('edit.user_image');
    }
```


```UserEditController.php
//画像アップロードされた画像を保存
    public function upload(Request $request)
    {
        //バリデーション
        $this->validate($request,[
            'userimage' => 'required|image'
            ]);
        
        if($request->isMethod('POST'))
        {
            $path = $request->file('userimage')->store('public/img');
            $image = User::find(\Auth::id());
            $image->image = basename($path); //imageカラムに保存
            $image->save();
            
            return back()->with(['success' => 'ファイルを保存しました']);
        }
    }
```
上のコードでは```storage/app/public/img/```内にアップロードした画像が保存されます。


メソッドをすぐ忘れるのでメモ。
```store()```は一意のファイル名を自動で生成してくれる。
```isMethd```は公式サイト様より
>リクエストメソッドの取得
>また、isMethodメソッドを使えば、指定した文字列とHTTP動詞が一致するかを調べることができます。

これでなくても、

```
if ($request->hasFile('image'))  //hasFile()内はinput type の name属性
```
でも良さそう。
```basename```はファイルパスを除いてファイル名のみを取り出してくれる。

##ビュー
アップロードされた画像の保存場所と読み出し場所が違うそうです。
保存場所は```storage/app/public/```
読み出し場所は```public/storage/```
なのでシンボリックリンクを設定します。ショートカットみたいな物らしい。

```
php artisan storage:link
```
これだけで良いとのこと。
これで読み出し場所から保存場所を参照出来るようになるそうです。というかなりました。
<img width="152" alt="スクリーンショット 2020-04-02 17.25.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596140/cd1461e9-68c2-a546-51ed-511c27d45c38.png">
AWSのcloud９上では、こんなのができてました。
ちなみに、上のコードでは```storage/app/public/img/```内にアップロードした画像が保存されます。

画像の読み出しは、

```
<img src="{{ asset('/storage/img/' . \Auth::user()->image) }}">
```


はこんな感じで読み出し。ってかこのやり方で良いのか...?
```asset()```はファイルまでのフルパスを生成してくれるそうです。
これはhttps通信する時にややこしいみたい。一旦勉強はまた別の機会に。

##困ったこと
最初コードを組んで、なんでも良いから画像を、とのことでスクリーンショットをアップロードしようとしたところ、エラーが。

```
The userimage failed to upload.
```
めっちゃアバウトなエラーで困る。
```dd($request->file('userimage'));```
ってしてもfalseってなる。何しても分からなくて困ってたのですが、
```phpinfo();```して確認したら、PHPの__ファイル制限が２MBまで__なんですね。知らなかった。
画像サイズ確認したら案の定超えてました。
覚えておきます。

非常に勉強になりました。
ここまで読んで頂いてありがとうございました。


こちらのサイト様を参考にさせていただきました。
[Laravelで画像ファイルをアップロードするサンプル](https://promidea.co.jp/archives/2377)
[画像アップロード（基本）](https://laraweb.net/tutorial/2707/)
[Laravelで画像をアップロードする方法](https://php-junkie.net/framework/laravel/upload_image/)
[[Laravel] ユーザーのアイコン画像を投稿、表示させる機能の実装したのでメモ（画像の保存場所は？シンボリックリンクって？）](https://qiita.com/u-dai/items/8a904cc7fd2795c0e70d)
[Laravelで画像ファイルを保存したい](https://qiita.com/maejima_f/items/7691aa9385970ba7e3ed)
[【Laravel5.6】画像ファイルアップロードについてのポイントまとめ](https://weblion303.net/1028/)
本当にありがとうございます。
Jest で Nuxt.js の Vue コンポーネントをテストする

環境
---
- Nuxt v2.9.2
- Node v10.15.2
- yarn 1.21.1
- TypeScript
- vue-property-decorator

テストに必要なもの
----
- 単体テストライブラリ
  - [vue-test-utils](https://github.com/vuejs/vue-test-utils)
  - [公式ドキュメント(日本語)](https://vue-test-utils.vuejs.org/ja/)
- テストランナー
  - [jest](https://github.com/facebook/jest)
  - [公式ドキュメント(日本語)](https://jestjs.io/docs/ja/getting-started)

セットアップ
---
- TODO: あとでかく。


input のテスト
----

### コンポーネント

```html
<label>
  <input type="text" :value="name" @input="$emit('input', $event.target.value)">
</label>
```
```js
import { Component, Prop, Vue } from 'vue-property-decorator'
@Component()
export default class MyInput extends Vue {
  @Prop({ default: '' }) name: string
}
```

### テストファイル

今回は以下の内容をテストします。

- props の確認
- emit の確認

```typescript
import MyInput from '@/components/MyInput.vue'
import { shallowMount } from '@vue/test-utils'

describe('MyInput.vue', () => {
  it('props の確認', () => {
    const wrapper = shallowMount(MyInput, {
      propsData: {
        name: 'shts'
      },
    })
    expect(wrapper.props().name).toMatch('shts')
  })
  it('emit の確認', () => {
    const w = shallowMount(MyInput)
    w.find('input').setValue('shts')
    expect(w.emitted().input).toBeTruthy()
    expect(w.emitted().input[0]).toEqual(['shts'])
  })
})
```
【MS ACCESS】VBAでDAOを用いたトランザクション

メモとして残します。


#■やり方
```vb
Sub InitLocalData()
On Error GoTo ErrorHandler
    Dim wrkCurrent As DAO.Workspace
    Set wrkCurrent = DBEngine.Workspaces(0)
    wrkCurrent.BeginTrans'ビギン
    'トランザクション処理（dao関係）

    wrkCurrent.CommitTrans'コミット
    Exit Sub
ErrorHandler:
   wrkCurrent.Rollback'ロールバック
End Sub

```
#■さいごに
あくまでDAO関係のトランザクションなのでADOはおそらく別のはずです。
あと、風のうわさで聞いたのですが、トランザクション処理にMysqlやsqlserverといった特殊なリンクテーブルを参照する場合は、うまくいかないことがあるみたいなので、この方法でのトランザクションはやめたほうが良いでしょう。
GitHub Pagesを利用して簡単にポートフォリオを作ってみた

##はじめに

VScodeでプログラミングしているっぽいポートフォリオを作ってみました。
作成したポートフォリオは[こちら](https://ryota-shimajiri.github.io/portfolio/)です。


このポートフォリオの公開でも使用しているのが、
GitHub Pagesという静的サイトのホスティングサービスです。
めちゃくちゃ簡単に静的サイト公開することが出来ます。

今回はGitHubの登録から、簡単なポートフォリオの公開までの手順を説明していきたいと思います。

##GitHubに登録

こちらのページから登録します。
https://github.com/join

ユーザ名、Eメールアドレス、パスワードを入力して、
プランは無料枠を登録します。

その後、入力したEメールアドレス宛に認証メールが飛んでくるはずなので、
確認したら登録完了です。

##リポジトリの作成

＋をクリックして、New repositoryを選択します。

<img width="1010" alt="スクリーンショット 2020-04-02 11.33.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392337/138e1240-e5e2-9426-50ce-4a0736af5491.png">


「Create a new repository」というページに移動するので、
Repository nameを入力します。
ここで入力した名前でこんな感じのURLになります。

https://{Owner}.github.io/{Repository name}/

リポジトリ名は後からでも変更できるので、
とりあえずアカウント名か、portfolioとかで良いと思います。

その他の項目は特に触らずに
「Create repository」ボタンをクリックして完了です。

## ファイルの作成
リポジトリが作成できたら、作成したリポジトリのページでファイルを作成します。

※cloneしてからファイルを作成してpushしても良いですが、今回はGitHubのGUI上でファイルを作成してみます。

<img width="708" alt="スクリーンショット 2020-04-02 12.08.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392337/fd411c77-a4c6-59ab-b134-77ab91f78137.png">


「Create new file」ボタンをクリックするとファイル作成のページに移動します。

ファイル名はindex.htmlと入力しておきます。

次に「Edit new file」内に以下のhtmlを書き入れていきます。

```haml

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <p>Hello world</p>
  </body>
</html>
```

書き混んだら「Commit new file」ボタンで保存します。

##ページを公開する

今度は右上端にある「Settings」をクリックします。
そうするとSettingsページが開かれるので、ページ内を下にスクロールしていくと、
「GitHub Pages」という項目が出てきます。

<img width="1015" alt="スクリーンショット 2020-04-02 16.25.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/392337/ae37df48-1f9c-427e-419b-eac4499d2295.png">


そこの「Source」の「None」を「master branch」に切り替えます。

ページが更新されたら
「GitHub Pages」の項目が緑色になっていると思いますので、
そこのURLをクリックすると先ほど書いたHTMLの内容、
Hello worldとだけ表示されるページに飛べると思います。

これで無事にポートフォリオを公開することが出来ました。

##まとめ

非常に簡単でしたね。

ここからはHTMLやCSS、JavaScriptを追加して
思い思いにカスタマイズしていくと良いと思います。

##参考
https://pages.github.com/

http://yoshiko.hatenablog.jp/entry/2014/06/06/%E7%B0%A1%E5%8D%98%EF%BC%81%E3%83%91%E3%83%A9%E3%83%A9%E3%83%83%E3%82%AF%E3%82%B9%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9

https://www.tam-tam.co.jp/tipsnote/html_css/post11245.html
楽譜をランダム生成するコード

楽譜をランダムで生成するコードを作りました。機械学習の楽譜のデータセット作成用として使ってください。

#こんな感じの画像ができます


![0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592903/cb1d7a1d-7aed-6235-44fc-77aa1f12c808.png)
=====================================================================================
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592903/a6b14fad-7c0c-e5e7-ff9a-0520bceda487.png)
=====================================================================================
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592903/e05f2bae-bdbc-0c10-eba9-f7db5a09be04.png)
=====================================================================================
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592903/55f1ef12-6c35-eeeb-32f2-1a50ddc371c5.png)


#環境

- chromebookのdebian9 (stretch)
- numpy (1.16.6)
- music21 (5.7.2)
- lilypond (2.18.2)
- python3 (3.5.3)

#必要なライブラリーやソフト

pythonのライブラリー：

- numpy
- music21

ソフト：

- lilypond

#コード

```python:randomScore.py
import music21 as m21
from numpy.random import choice

def makeScore(symbleNum=200, scoreNum=20, noteRange=[3, 4, 5, 6, 7],
              noteRangeProbs=[0.05, 0.4, 0.4, 0.1, 0.05], sharpProb=0.1, 
              restProb=0.2, exportDir='/home'):

    '''
    symbleNum:楽譜一枚あたり何個の音符と休符があるか
    scoreNum:楽譜を何枚生成するか
    noteRange:何オクターブ目から何オクターブ目の音符があるか（デフォルトはC3からB#7まで）
    noteRangeProbs:それぞれの音符がオクターブ別にどのくらい出てくるかの確率のリスト
    sharpProb:音符にシャープがつく確率
    restProb:休符が出る確率
    exportDir:出力ファイルの保存先
    ===========================
    デフォルトではファイル名は1, 2, 3, ... となっております。
    .pngファイルの他に色々なファイルが出ますが、消していいです。
    '''
    
    quarterLengths = [4, 2.5, 2, 1.5, 1, 0.75, 0.5, 0.25]
    notes = ['C', 'D', 'E', 'F', 'G', 'A', 'B']
    noteRange = list(map(lambda x: str(x), noteRange))
    typeProbs = [1 - restProb, restProb]
    sharpProbs = [sharpProb, 1 - sharpProb]
    chooseThese = [True, False]

    for i in range(scoreNum):
        noteList = []
        measure = m21.stream.Measure()

        for j in range(symbleNum):
            if choice(a=chooseThese, p=typeProbs):
                if choice(a=chooseThese, p=sharpProbs):
                    pitchName = choice(notes) + '#' + choice(a=noteRange, p=noteRangeProbs)

                else:
                    pitchName = choice(notes) + choice(a=noteRange, p=noteRangeProbs)

                n = m21.note.Note(pitchName, quarterLength=choice(quarterLengths))
                noteList.append(n)

            else:
                n = m21.note.Rest(quarterLength = choice(quarterLengths))
                noteList.append(n)

        measure.append(noteList)
        fileName = exportDir + str(i)
        measure.write('lily.png', fileName)

if __name__ == "__main__":
    makeScore()
```

#悪いところ

- 四拍子だけ
- 一小節内の音符の数がおかしい
- 音楽的に（旋律）おかしい
- フラットがない
- 題名がない
- ダイナミクス、アーティキュレーションがない

などなど
CentOSにMavenをインストールする方法

- 環境
    - CentOS Linux release 7.6.1810 (Core)
    - tar (GNU tar) 1.26
    - GNU Wget 1.14 built on linux-gnu.

# アーカイブをダウンロードする

```bash
# 1. rootユーザーに切り替える
$ sudo su -
[sudo] password for ponsuke: 

# 2. ダウンロードする
# wget https://www.apache.org/dist/maven/maven-3/3.2.5/binaries/apache-maven-3.2.5-bin.tar.gz
--2020-04-02 16:32:40--  https://www.apache.org/dist/maven/maven-3/3.2.5/binaries/apache-maven-3.2.5-bin.tar.gz
Resolving www.apache.org (www.apache.org)... 40.79.78.1, 95.216.24.32, 2a01:4f9:2a:185f::2
...省略...
100%[=========================================================================================================================================================================>] 7,956,528   2.58MB/s   in 2.9s   

2020-04-02 16:33:48 (2.58 MB/s) - ‘apache-maven-3.2.5-bin.tar.gz’ saved [7956528/7956528]
```

# 解凍して配置する
```bash
# tar xzvf apache-maven-3.2.5-bin.tar.gz -C /opt/
apache-maven-3.2.5/README.txt
...省略...
apache-maven-3.2.5/lib/slf4j-simple-1.7.5.jar
```

# パスを通す
```bash
# 1. rootユーザーから自分に切り替える
# exit
logout

# 2. .bash_profileにパスを設定する
$ vi ~/.bash_profile
↓これを追記する
PATH=$PATH:/opt/apache-maven-3.2.5/bin/
↓これより前に↑これを書く
export PATH

# 3. .bash_profileを反映する
$ source ~/.bash_profile 
[1]+  Done                    exec ibus-daemon -dx

# 4. PATHを確認する
$ printenv PATH
/sbin:/bin:...省略...:/opt/apache-maven-3.2.5/bin/
```

# Mavenが使えるか確認するためにバージョンを見てみる
```bash
# 注意 : コマンドはmavenではない
$ maven --version
bash: maven: command not found

# mvnが正しい
$ mvn --version
Apache Maven 3.2.5 (12a6b3acb947671f09b81f49094c53f426d8cea1; 2014-12-15T02:29:23+09:00)
Maven home: /opt/apache-maven-3.2.5
Java version: 1.8.0_212, vendor: Oracle Corporation
Java home: /usr/lib/jvm/java-1.8.0-openjdk-1.8.0.212.b04-0.el7_6.x86_64/jre
Default locale: ja_JP, platform encoding: UTF-8
OS name: "linux", version: "3.10.0-957.12.2.el7.x86_64", arch: "amd64", family: "unix"
```
【GCP】GAEを停止する

チュートリアルにあった以下の方法で試してみた。
＝＝＝
プロジェクトを無効にする
[設定] ページに移動します。

[アプリケーションを無効にする] をクリックします。

このアプリからの課金を停止するにはこれで十分です。アプリとプロジェクトの関係と、それぞれの管理方法について詳しくは、こちらをご覧ください。

プロジェクトを削除する
アプリを完全に削除する場合は、[リソースの管理] ページでプロジェクトを削除する必要があります。この操作は元に戻せず、プロジェクト内の他のリソースもすべて破棄されます。

コンソールの左上にあるナビゲーション メニューで [IAM と管理] に移動します。

IAM と管理者


[リソースの管理] をクリックします。

[削除] をクリックします。
【Vue.js】算出プロパティによる四則演算のサンプル

#はじめに
- Vue.jsにおいては通常プロパティだけでなく、算出プロパティ(computed)も使用できます。
- 大した内容ではありませんが、四則演算のサンプルを作成しましたので、ソースコードを公開します。

#算出プロパティ―
- 通常プロパティはmessageをjsで定義すると html中で{{message}}と参照できます。

```js
var app= new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
})
```

- 算出プロパティは、computed内で関数で計算した結果をプロパティで定義できます。以下の場合、html中で{{add1}}と参照できます。

```js
var app = new Vue({
    el: '#app',
    data: {
        input1_1:0,
        input1_2:0,
    },
    computed:{
        add1: function() {return this.input1_1 + this.input1_2},
    },
})
```

#四則演算のサンプル
- 上記を踏まえて、四則演算の算出プログラムを作成しましたので、ソースを提示します。

##はまった点
- 一点はまった点としては、入力フォームを以下定義していたのですが、入力した数値を文字列と判定してしまいました。
- 例えば 「10 + 20」の計算結果が「1020」 となってしまいました


```html
<!-- うまくいかない例(文字列結合となってしまった) -->
<input type="number" v-model="input1_1">
```

- [公式サイト](https://jp.vuejs.org/v2/guide/forms.html#number)にも記載が有りますが、以下のようにv-model.numberと定義しなくてはいけませんでした。

```html
<!-- うまくいった例 -->
<input type="number" v-model.number="input1_1">
```
##サンプル

- 見栄えの為、bootstrap を入れています。

```html
<html lang='ja'>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    </head>
    
    <body>
        <div id="app">
            <div class="col-sm12">
                <label>足し算:</label><input type="number" v-model.number="input1_1"> + <input type="number" v-model.number="input1_2"> = <span>{{ add1 }}</span>
            </div>
            <div class="col-sm12">
                <label>引き算:</label><input type="number" v-model.number="input2_1"> - <input type="number" v-model.number="input2_2"> = <span>{{ min1 }}</span>
            </div>
            <div class="col-sm12">
                <label>掛け算:</label><input type="number" v-model.number="input3_1"> × <input type="number" v-model.number="input3_2"> = <span>{{ multi1 }}</span>
            </div>
            <div class="col-sm12">
                <label>割り算:</label><input type="number" v-model.number="input4_1"> × <input type="number" v-model.number="input4_2"> = <span>{{ divis1 }}</span>
            </div>
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    input1_1:0,
                    input1_2:0,
                    input2_1:0,
                    input2_2:0,
                    input3_1:0,
                    input3_2:0,
                    input4_1:0,
                    input4_2:0,
                },
                computed:{
                    add1: function() {return this.input1_1 + this.input1_2},
                    min1: function() {return this.input2_1 - this.input2_2},
                    multi1: function() {return this.input3_1 * this.input3_2},
                    divis1: function() {return this.input4_1 / this.input4_2},
                },
            })
        </script>
    </body>
</html>
```

##出力結果

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235774/a0517115-900c-a69b-c687-9b17b2a71b61.png)
WordPressの管理画面に再利用ブロックへのリンクを追加する


執筆時のバージョン WordPress 5.4 “Adderley”

#再利用ブロックの一覧ページがあるのはご存知？

再利用ブロック便利ですよね。

ひとつ書き換えるだけで全部変更できますし。


知らなかった方は自分のWordPressサイトにログインした状態でこのURLを編集してアクセスしてみてください。

`https://あなたのどめいん/wp-admin/edit.php?post_type=wp_block`

間違って消してしまった再利用ブロックもこのページのゴミ箱から復活させることもできます。安心設計。

でも……
#再利用ブロックの一覧ページに行くのが面倒くさい

WordPressで再利用ブロックを編集したいときと思った時
**投稿の編集を開いて⊕(ブロックの追加)から再利用可能→すべての再利用ブロックを管理**
って作業を毎回してませんか？

~~僕はしていました~~

そんな方は
・テーマ・子テーマの`functions.php`に
・プラグインでカスタマイズしている方はプラグインに
以下のコードを追加すると幸せになれるかもしれません(\*´ω`*)

`functions.php`の編集はお気をつけて！
**必ずバックアップをとってから編集してください。**
くれぐれもご注意ください。



```php:functions.php

/**
 *再利用ブロックへのリンクを追加
 */
function add_reuse() {
  add_menu_page( '再利用ブロック', '再利用ブロック', 'manage_options','edit.php?post_type=wp_block' , '', 'dashicons-controls-repeat', '98.9');
}
add_action('admin_menu', 'add_reuse');

```
*コードの利用の結果生じた損害に関するいかなる責任も負いません。*

![再利用ブロック.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217361/d65cb7de-9c9c-e1ee-1da9-df6845180ffb.png)

こんな感じになるはずです、お試しあれ！
Unity+ARFoundationでiOS用ARサンプルを動かす

#Unity+ARFoundationでiOS用ARサンプルを動かす

## 1. 開発環境
- MacBook Pro (macOS Catalina 10.15.4)
    - Unity 2019.3.7f1
    - XCode 11.4
- iPad Pro 11 inch 第２世代 Wi-Fi+Cellular **LiDARも搭載！**

## 2. ARFoundationの導入
[arfoundation-samples (GitHub)](https://github.com/Unity-Technologies/arfoundation-samples)よりクローンを取得します。
ここで紹介する内容は、[Update to ARFoundation 4.0.0-preview.1](https://github.com/Unity-Technologies/arfoundation-samples/commit/d0a0eecc6c59713819286bf521035baff7e2bb91)以降あたりのコミット分のクローンとしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406597/8128bd37-b1a4-1573-ecbb-90daffe93d27.png)
これをMacのローカルドライブに展開します。ここでは、`~/Documents/Unity/arfoundation-samples-master`に展開しました。

## 3. Unity Project を開きビルド
上で展開した `~/Documents/Unity/arfoundation-samples-master`を Unityで開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406597/2118bf84-d801-695c-b434-bfecd159fe1b.png)
### AR関係パッケージの確認
まず念の為、ARFoundationで必要なパッケージが導入されているか確認します。[Window]-[Package Manager]を開きます。
赤色で囲んだ、AR関係の`preview.1 - 4.0.0`があればOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406597/b619e0a2-606c-6644-5640-62ba64c8662b.png)
### Bundle Indentifierを変更
`[Edit]-[Project Settings...]`でプロジェクト設定を開き、その中の`Player`タブを選択します。
`Bundle Identifier`がそのままでは、このあとのXCodeでのビルドが通らないので、ユニークな識別コードに変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406597/e2999247-33b1-ece4-0e4e-c6345b6c9d75.png)
###ビルド
`[File]-[Build Settings...]`で`Build Settings`ウインドウを開きます。
`Scenes In Build`でビルド対象のシーンを１つ選択します。ここではまず`Scenes/SimpleAR/SimpleAR`を選択します。
`Platform`には、もちろん`iOS`を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406597/5e312811-32d5-57ac-7535-cc535e242f3d.png)
`Build`ボタンを押し、XCode用のプロジェクトを書き出すフォルダを指定します。ここでは、このプロジェクトのフォルダの下に `iOS`という名前のフォルダを作成して指定します。

## 4. XCodeでビルドとiPadへ転送
上で保存したプロジェクトフォルダ`iOS`の下に`ARFoundation`というフォルダがあり、その中のXCodeプロジェクトファイル`Unity-iPhone.xcodeproj`をXCodeで開きます。
そして、iPadをMacBookに接続しておきます。
`Signing`で次の設定を行います。
- `Automatically manage signing`をチェック
- `Team` には、自分のApple Developper Accountを指定する
デプロイ先のiPadを右上のリストで選んで再生ボタンを押すと、iPadにプログラムが転送されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406597/19305dd2-cf8d-f09e-1b1f-5cf0853b3c11.png)

## 5. iPadでの実行結果
iPadにプログラムが転送されると、しばらくして "Made with Unity"のロゴが表示されてプログラムが起動します。
机と壁にiPadを向けると、なにやら平面を認識した結果がAR表示されました。画面上をタップすると、キューブも表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406597/2d4fcb22-586c-7618-c3ee-973fb49d5d87.png)

## 6. 今後やってみたいこと
Unityのサンプルプロジェクトには、今回試した"SimpleAR"というシーン以外にもたくさんのサンプルシーンがあります。それらも順次試したいのですが、たくさんあるシーンを「UnityのBuild Settingsで選んではビルド→XCodeでもビルド→iPadへ転送」と繰り返さなければならないので面倒です。シーン選択用のメニューをUnity上で作ってやろうかと思います。

とりあえず3次元情報を取得して認識していそうなサンプルプログラムは動きました。あとはやっぱり、生の３次元点群を取得して、iPadを完全な3Dスキャナとしていろいろ活用したいところです。特にこの新型iPad Pro には LiDARが搭載されているのですから！ソースをこれから詳しく追っていきます。

##参考文献
大変参考になりました。ありがとうございます。
- [UnityでiOS向けのARアプリを開発する方法 ( AR Foundation + ARKit-XR-Plugin 導入編 )](https://qiita.com/Futo_Horio/items/63d21f0e3db55052899d)
今日のスクリプト(gVim):ウィンドウの位置と幅(2)

## Windowの位置と幅，高さを任意に変更します．

### ◆やりたいこと
Windowの位置と幅，高さを変更するスクリプト(前回アップしたのはこちら → [「今日のスクリプト: \(Vim\) Windowサイズと位置の調整」](https://qiita.com/uryaryadumpty/items/bd5f8314c500a917e6fc))の拡張です．

前のバージョンは決め打ちでした．
• SetLines()でフル行数か直前か
• SetWidth()で幅いっぱいか直前のトグル

これはこれでシンプルでいいです．
が，固定の位置，幅，高さに戻したいことがあります．

それで，それぞれの関数に引数をもたせました．
ただ，引数がない時のエラーがうざかったので，
**「引数 に '0'を入れるとトグル」**になるようにしました．

### ◆まずは高さ：SetLines(N)　関数

```
""" (Toggle)Set win lines Full <-> previous
"""
map <Leader>j :call SetLines(0)
map ,wj :call SetLines(0)
""
""" SetLines(N) -- N=0 --> Toggle, N: line num
function! SetLines(nlin)
if a:nlin == 0
if !exists("g:oline")
let g:oline = &lines
let &lines=999
else
let &lines = g:oline
unlet g:oline
endif
else
let &lines = a:nlin
endif
endfunction
```

### ◆幅: SetWidth(N)　関数

```
"
"""""" (Toggle)Set win width Full <-> previous
"
map <Leader>@ :call SetWidth(0)
map ,w@ :call SetWidth(0)
map ,wl :call SetWidth(0)
""
"""""" SetWidth(N) function. N=0 --> Toggle / N --> width number
"" command! -nargs=+ SetWidth call SetWidth()
function! SetWidth(nwide)
if a:nwide == 0
if !exists("g:owide")
let g:owide = &columns
let &columns=999
else
let &columns = g:owide
unlet g:owide
endif
else
let &columns = a:nwide
endif
endfunction
```

### ◆3つの関数をcall → ひとつのキーバインドに割付け: ",w1"

```
""
"" Set winpos to Initial pos
""
""  初期値を入れておく．
let iniposx = 160
let iniposy = 20
let iniwide = 90
let inilines = 35
map <Leader>1 :call SetWinpos(iniposx,iniposy)
map ,w1 :call SetWinpos(iniposx,iniposy):call SetWidth(iniwide):call SetLines(inilines)
""
"" iniposx.... はunletしたほうが行儀が良い？そんなことしらん．
""
```

### ◆ポジション関数は変更なし： SetWinpos(x,y)

```
""
"" set winpos to 2nd Display
let newposx = -1180
let newposy = -980
map <Leader>w :call SetWinpos(newposx, newposy)
map ,ww :call SetWinpos(newposx, newposy)
""
"""""" (Toggle)Set win Position to x,y <-> previous
command! -nargs=+ SetWinpos call SetWinpos()
function! SetWinpos(posx, posy)
if !exists("g:oposx")
let g:oposx = getwinposx()
let g:oposy = getwinposy()
echo "winpos "a:posx . " " . a:posy
execute "winpos " a:posx . " " . a:posy
else
echo "winpos "g:oposx . "\  " . g:oposy
execute "winpos " g:oposx . " " . g:oposy
unlet g:oposx g:oposy
endif
endfunction
```

スクリプトは以上です．

### ◆呼び出し方をまとめると，
* 全幅トグル: ,wl
* 全高トグル: ,wj
* 別ポジション: ,ww
* 初期ポジション: ,w1

ま，キーバインドはご自由に．