Python – DataFrameを表示する際、行と列を省略させない方法

始めに

デバッグ時にDataFrameをPrintで確認することが多いのですが、デフォルトでは行と列が省略されてしまいます。
特に列が省略されてしまうのは不便です。
毎回検索するのですが、無制限についてはパッと出てこないので備忘録として記事にします。

ソース

import pandas as pd
# None=無制限
pd.set_option('display.max_columns', None)
pd.set_option('display.max_rows', None)

参考

https://pandas.pydata.org/pandas-docs/stable/user_guide/options.html
display.max_columns / display.max_rows : ‘None’ value means unlimited.

Golang : 動的なjsonを扱う方法

はじめに

JavaScriptphpなどの型のゆるい言語を使い慣れると、Goのオブジェクトの扱い方に戸惑います。たまにGoを使うのですが、そのたびにはまるので、備忘録として当記事を残します。

サンプルコード

  • 扱うjson
{
    "count": 2,
    "hits": [
        {
            "code": "123-4567",
            "address": "XXX県YYY市ZZZ町"
        },
        {
            "code": "987-6543",
            "address": "aaa県bbb市ccc町"
        }
    ]
}
  • json → interface{}
package main

import (
    "encoding/json"
    "log"
)

func main() {
    var jsonBlob = []byte(`{
        "count": 2,
        "hits": [{"code": "123-4567", "address": "XXX県YYY市ZZZ町"}, {"code":"987-6543", "address":"aaa県bbb市ccc町"}]
    }`)
    var data interface{}
    err := json.Unmarshal(jsonBlob, &data)
    if err != nil {
        log.Panic(err)
    }
    log.Printf("%#v", data)
    //→ map[string]interface {}{"count":2, "hits":[]interface {}{map[string]interface {}{"address":"XXX県YYY市ZZZ町", "code":"123-4567"}, map[string]interface {}{"address":"aaa県bbb市ccc町", "code":"987-6543"}}}

    log.Println(data.(map[string]interface{})["count"].(float64))
    log.Println(data.(map[string]interface{})["hits"].([]interface{})[0].(map[string]interface{})["address"].(string))
    log.Println(data.(map[string]interface{})["hits"].([]interface{})[1].(map[string]interface{})["address"].(string))
    // → 2
    //    XXX県YYY市ZZZ町
    //    aaa県bbb市ccc町
}
  • map → json
package main

import (
    "encoding/json"
    "log"
)

func main() {
    var hits []map[string]interface{}
    hit := map[string]interface{}{"code": "123-4567", "address": "XXX県YYY市ZZZ町"}
    hits = append(hits, hit)
    hit = map[string]interface{}{"code":"987-6543", "address":"aaa県bbb市ccc町"}
    hits = append(hits, hit)

    var data map[string]interface{}
    count := 2
    data = map[string]interface{}{"count": count, "hits": hits}

    log.Printf("%#v", data)
    // → map[string]interface {}{"count":2, "hits":[]map[string]interface {}{map[string]interface {}{"address":"XXX県YYY市ZZZ町", "code":"123-4567"}, map[string]interface {}{"address":"aaa県bbb市ccc町", "code":"987-6543"}}}
    bytes, err := json.Marshal(&data)
    if err != nil {
        log.Panic(err)
    }
    log.Println(string(bytes))
    // → {"count":2,"hits":[{"address":"XXX県YYY市ZZZ町","code":"123-4567"},{"address":"aaa県bbb市ccc町","code":"987-6543"}]}
}

参考

https://www.kaoriya.net/blog/2016/06/25/

JavaScript – スニペット:一番単純なAjaxのGETリクエスト

はじめに

JavaScriptからWebAPIを呼び出す機会が増えました。
いつも同じようなことを調べるので、個人的な備忘録として記録しておきます。

JvaScript-Ajaxスニペット

const url = "https://xxx/yyy";
let response = await fetch(url);
if (response.ok) {
  let json = await response.json();
  console.log(json);
} else {
  console.log("NG");
}

※WebAPIサーバはCORS対応されていることが前提です。

サンプルソース

<html>

<script>
  async function ajaxTest() {
    const url = "https://api.github.com/users/<githubユーザID>";
    let response = await fetch(url);
    console.log(response);
    if (response.ok) {
      const json = await response.json();
      document.getElementById("jsonStr").innerText = JSON.stringify(json);
    } else {
      console.log("NG");
    }
  }
  ajaxTest();
</script>

<body>
  <div id="jsonStr"></div>
</body>

</html>

参考

https://ja.javascript.info/fetch

p5.jsをWebページの背景にする

p5.jsをwebの背景にする方法

サンプル

クリックすると円を描きます

やり方

JavaScript

function setup() {
  let canvas = createCanvas(300, 300);
  // canvasの位置を指定
  canvas.position(0, 0);
  // canvasを背面に移動
  canvas.style('z-index','-1');
・・・
}

ソース

sketch.js

'use strict';

let obj = [];

function setup() {
  let canvas = createCanvas(300, 300);
  // canvasの位置を指定
  canvas.position(0, 0);
  // canvasを背面に移動
  canvas.style('z-index','-1');
  background(0);
  noFill();
  strokeWeight(5);
  colorMode(HSB);
}

function draw() {
  background(0);
  for(let i = 0; i < obj.length; i++) {
    obj[i].draw();
    if(obj[i].size > width * 2.5) {
      obj.splice(i, 1);
    }
  }
}

function mouseClicked() {
  obj.push(new Shape(mouseX, mouseY));
}

class Shape {
  x;
  y;
  size;
  color;
  speed;

  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = 10;
    this.color = color(random(0,360), 100, 100);
    this.speed = parseInt(random(1, 10));
  }

  draw() {
    stroke(this.color);
    ellipse(this.x, this.y, this.size, this.size);
    this.size += this.speed;
  }
}

main.html

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>p5.jsを背景にする</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <script src="../../../../lib/p5.js"></script>
  <script src="./sketch.js"></script>
</head>
<body>
  <button onclick="alert('ボタンクリック');">ボタンサンプル</button>
  <input type='test' value='あいうえお'/>
</body>
</html>

参考

https://freyjasrm.com/2020/01/06/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E8%83%8C%E6%99%AF%E7%94%BB%E5%83%8F%E3%81%ABp5-js%E3%82%92%E4%BD%BF%E3%81%86%E6%96%B9%E6%B3%95/

p5.js – マトリックスレイン公開

マトリックスのあれ、いったん完成ということにして、自作ツールの方に公開しました。
https://www.fukakuutsukushikiasia.com/%e8%87%aa%e4%bd%9c%e3%83%84%e3%83%bc%e3%83%ab

前回からの変更点は以下の通りです。
・先頭の文字を白に
・文字を半角カナ、数字、小文字のアルファベットをランダムで表示

ソースはこちら

'use strict';

let cols = [];
const MIN_FRAME = 1;
const MAX_FRAME = 10;
let frameIdx = MIN_FRAME;
let chars;

function setup() {
  createCanvas(windowWidth * 0.9, windowHeight * 0.9);
  background(0);
  noStroke();
  textAlign(LEFT);
  frameRate(13);
  init();

  const kana = "ヲァィゥェォャュョッアイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワン";
  const alphabet = "abcdefghijklmnopqrstuvwxyz"; //"ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  const number = "012345679";
  chars = (kana + alphabet + number).split("");
}

function init() {
  noLoop();
  cols = [];
  let x = 0;
  while( x < width ) {
    const size = parseInt(random(5, 25));
    cols.push(new Colmun(x, size));
    x += size;
  }
  background(0);
  loop();
}

function mouseClicked() {
  init();
}

function draw() {
  if( ++frameIdx > MAX_FRAME ) {
    frameIdx = MIN_FRAME;
  }

  cols.forEach(col => {
    col.draw();
  });
}

class Colmun {
  posX;
  posY;
  posYPre;
  char;
  charSize;
  speed = parseInt(random(1, 5));

  constructor(x, size) {
    this.posX = x;
    this.charSize = size;
    this.posY = 0;
    this.posYPre = -1 * size;
  }

  draw() {
    if(frameIdx % this.speed !== 0) {
      return;
    }
    if(this.posY >= height + this.charSize) {
      this.posY = 0;
    }
    // 半透明の黒い四角で文字を徐々に消す
    fill(0, 0, 0, 20);
    const adjustment = 0; //this.charSize / 2; 文字をCENTERにしたときは左にずらす
    rect(this.posX - adjustment, 0, this.charSize, height);

    /* 文字を描画 */
    textSize(this.charSize);

    // 前回の文字色をlimeで上書き
    fill('lime');
    text(this.char, this.posX, this.posYPre);
    // 先頭の文字は白
    this.char = chars[parseInt(random(0, chars.length - 1))];
    fill('white');
    text(this.char, this.posX, this.posY);

    this.posYPre = this.posY;
    this.posY += this.charSize;
  }
}

p5.js – マトリックスレイン習作02

マトリックスレイン習作01に修正を加えました。
・文字を半角に
・横幅いっぱいに文字を表示
・各列の文字のサイズと落ちるスピードをランダムに変更
・クリックで再描画

ソースはこちら

'use strict';

let cols = [];
const MIN_FRAME = 1;
const MAX_FRAME = 10;
let frameIdx = MIN_FRAME;

function setup() {
  createCanvas(300, 300);
  background(0);
  noStroke();
  textAlign(LEFT);
  frameRate(15);
  init();
}

function init() {
  noLoop();
  cols = [];
  let x = 0;
  while( x < width ) {
    const size = parseInt(random(5, 25));
    cols.push(new Colmun(x, size));
    x += size;
  }
  background(0);
  loop();
}

function mouseClicked() {
  init();
}

function draw() {
  if( ++frameIdx > MAX_FRAME ) {
    frameIdx = MIN_FRAME;
  }

  cols.forEach(col => {
    col.draw();
  });
}

class Colmun {
  posX;
  posY = 0;
  charSize = 15;
  chars = ['ナ', 'マ', 'ス', 'テ'];
  charIdx = 0;
  speed = parseInt(random(1, 5));

  constructor(x, size) {
    this.posX = x;
    this.charSize = size;
  }

  draw() {
    if(frameIdx % this.speed !== 0) {
      return;
    }
    if(this.posY >= height + this.charSize) {
      this.posY = 0;
    }
    // 半透明の黒い四角で文字のフェードアウトを実現
    fill(0, 0, 0, 50);
    rect(this.posX, 0, this.charSize, height);
    // 文字を描画
    fill('lime');
    textSize(this.charSize);
    text(this.chars[this.charIdx], this.posX, this.posY);
    this.posY += this.charSize;
    if(++this.charIdx >= this.chars.length) {
      this.charIdx = 0;
    }
  }
}

p5.js – マトリックスレイン習作01

マトリックスのオープニングみたいなもの(マトリックレインというらしい)を作ってみようと思います。まずは落ちていく文字から。
徐々にバージョンアップしていく予定です。

ソースはこちら

'use strict';

let posY = 0; // 文字の位置
let posX;
let fontSize = 15; // フォントサイズ/移動距離
let strings = ['ナ', 'マ', 'ス', 'テ'];
let stringIdx = 0;

function setup() {
  createCanvas(300, 300);
  background(0);
  noStroke();
  textSize(fontSize);
  textAlign(CENTER);
  frameRate(10);
  posX = width / 2;
}

function draw() {
  fill(0, 50);
  rect(0, 0, width, height);

  if(posY >= height + fontSize) {
    posY = 0;
  }
  fill('lime');
  text(strings[stringIdx], posX, posY);
  posY += fontSize;
  if(++stringIdx >= strings.length) {
    stringIdx = 0;
  }
}

Node.js – コマンドライン引数(パラメータ)について

引数の数

const argc = process.argv.length;

引数へのアクセス

1つ目の引数はインデックス2に格納される

console.log(process.argv[2]);

argv0

コマンドで実行されたときのnode.exeの値がそのまま入るようです。
何を言っているのか分かりにくいので、以下の例を見てください。

index.js

console.log("process.argv0   = " + process.argv0);
console.log("process.argv[0] = " + process.argv[0]);

実行と結果

>node index.js
process.argv0   = node
process.argv[0] = C:\Program Files\nodejs\node.exe

>node.exe index.js
process.argv0   = node.exe
process.argv[0] = C:\Program Files\nodejs\node.exe

>"C:\Program Files\nodejs\node.exe" index.js
process.argv0   = C:\Program Files\nodejs\node.exe
process.argv[0] = C:\Program Files\nodejs\node.exe

参考資料

ワンライナーでWebサーバ

はじめに

ちょっとしたプログラムの動作確認で、Webサーバを起動したいときってありますよね。
そんな時、私はワンライナーで実行できるWebサーバを利用しています。


  • 環境:Windows10
  • 公開したいディレクトリに移動し、以下のコマンドを実行します。

Node.js

npx http-server -p 8080

参考資料
https://www.npmjs.com/package/http-serve

Golang

  • goexecインストール

    go get -u github.com/shurcooL/goexec
  • webサーバ実行

    goexec http.ListenAndServe(\":8080\",http.FileServer(http.Dir(\".\")))

参考資料
https://github.com/golang/go/wiki/WebAssembly

Python 3.x

python -m http.server 8081

参考資料
https://docs.python.org/ja/3/library/http.server.html

PHP

php -S localhost:8081

参考資料
https://www.php.net/manual/ja/features.commandline.webserver.php

Electron – アプリ環境構築のひな型

はじめに

Electronのアプリ環境構築のひな型です。
環境はWindows10です。

前提

Node.jsがインストール済みであること。

アプリ構築手順

プロジェクトを作成しElectronインストール

mkdir <プロジェクトフォルダ>
cd <プロジェクトフォルダ>
npm init -y
npm install --save-dev electron

アプリ作成

プロジェクトフォルダ直下に index.js という名前のファイルを作成

"use strict";

// Electronのモジュール
const electron = require("electron");

// アプリケーションをコントロールするモジュール
const app = electron.app;

// ウィンドウを作成するモジュール
const BrowserWindow = electron.BrowserWindow;

// メインウィンドウはGCされないようにグローバル宣言
let mainWindow;

// 全てのウィンドウが閉じたら終了
app.on('window-all-closed', function() {
  if (process.platform != 'darwin') {
    app.quit();
  }
});

// Electronの初期化完了後に実行
app.on('ready', function() {
  // メイン画面の表示
  mainWindow = new BrowserWindow({width: 800, height: 600});
  mainWindow.loadURL('file://' + __dirname + '/index.html');

  // ウィンドウが閉じられたらアプリも終了
  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});

プロジェクトフォルダ直下に index.html というファイルを作成

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Sample</title>
</head>
<body>
  <p>Hello World</p>
</body>
</html>

動作確認

cd <プロジェクトフォルダ>
npx electron .

コンパイル

electron-packagerインストール

npm install --save-dev electron-packager

EXEファイル作成

--electronVersionpackage.json から判定するので不要

cd <プロジェクトフォルダ>
node_modules\.bin\electron-packager . <アプリ名> --platform=win32 --arch=x64

EXE実行

cd <アプリ名>-win32-x64
<アプリ名>.exe