メインコンテンツまでスキップ

アイコン (.ico) の作り方

· 約1分
ひかり
ひかり
Main bloger

  1. アイコンを作成します。

    icon の作り方

  2. 16、24、32、48、64、128、256 の7種類の大きさの PNG 画像を用意します。 icon の作り方

  3. convert アイコンでアイコンを作成します。 icon の作り方

convert *.png favicon.ico

Electron アプリ作成

· 約1分
ひかり
ひかり
Main bloger

作業ディレクトリーの作成​

mkdir test-electron-app
cd test-electron-app

package.json の作成​

npm init -y

electron のインストール​

npm i --save-dev electron

index.js の作成​

const { app, BrowserWindow } = require("electron")
const path = require("path")

function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, "preload.js")
        }
    })

    win.loadFile("index.html")
}

app.whenReady().then(() => {
    createWindow()

    app.on("activate", () => {
        if (BrowserWindow.getAllWindows().length === 0) {
            createWindow()
        }
    })
})

app.on("window-all-closed", () => {
    if (process.platform !== "darwin") {
        app.quit()
    }
})

index.html の作成​

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body style="background: white;">
    <h1>Hello World!</h1>
    <p>
        We are using Node.js <span id="node-version"></span>,
        Chromium <span id="chrome-version"></span>,
        and Electron <span id="electron-version"></span>.
    </p>
</body>
</html>

package.json の修正

scripts の部分を書き換える。

"scripts": {
    "start": "electron ."
}

アプリの実行

npm start

Chart.js の使い方メモ

· 約1分
ひかり
ひかり
Main bloger

Chart.js で線をプロットする

let x = nj.arange(-50, 50).divide(10)
let ctx = document.getElementById('chart').getContext('2d');
ctx.canvas.parentNode.style.height = "240px";
ctx.canvas.parentNode.style.width = "320px";
new Chart(ctx, {
    type: 'line',
    data: {
        labels: x.selection.data,
        datasets: [
            {
                label: "sin(x)",
                data: nj.sin(x).selection.data,
                fill: false,
                borderColor: "#2196F3",
                radius: 0,
            },
            {
                label: "cos(x)",
                data: nj.cos(x).selection.data,
                fill: false,
                borderColor: "#FF9800",
                radius: 0,
            }
        ]
    },
    options: {
        responsive: true,
    }
});

Ruby の作り方

· 約1分
ひかり
ひかり
Main bloger

例として3を返すプログラムを作る。

まず、C でソースコードを書く。

// three.c
#include <ruby.h>

static VALUE int_three(void){
    return INT2NUM(3);
}

void Init_three(void){
    rb_define_singleton_method(rb_cInteger, "three", int_three, 0);
}

Makefile を作成するための スクリプトを作成。

# extconf.rb
require 'mkmf'
create_makefile "three"

Make

$ make

作成したプログラムを呼び出す Ruby スクリプトを書く。

# main.rb
require "./three"
p Integer.three

実行

$ ruby main.rb
3

DLL の作成と C のコンパイル

· 約1分
ひかり
ひかり
Main bloger

DLL の作成と C のコンパイルのメモ

ライブラリー​

ソースファイル​

// gcd.c
int gcd(int a, int b){
    return !b ? a : gcd(b, a % b);
}

ヘッダーファイル​

// gcd.h
#ifndef TEST_H
#define TEST_H

int gcd(int a, int b);

#endif

プログラム​

#include <stdio.h>
#include "gcd.h"

int main(void){
    printf("%d\n", gcd(24, 36));
}

コンパイル​

DLL の作成​

gcc gcd.c -shared -o gcd.dll

コンパイル​

gcc main.c -lgcd -L.

Unity でリアルな地形を生成

· 約1分
ひかり
ひかり
Main bloger

Unity でリアルな地形を作ってみた。

国土地理院の衛星写真と標高データーをもとに作成。

Unity 島原半島

次は九州を作りたいところ。

アセトン転写でプリント基板づくり

· 約2分
ひかり
ひかり
Main bloger

自作計測器開発用にプリント基板を作ってみました。

アセトン転写​

普通紙にレーザープリンターで印刷して、 印刷物を銅基板に合わせ水をつけて紙を密着させる。 次に、アセトンを少しかけて クリアファイルの上から トナーを銅基板に押し付けるように爪でこすり、アセトン転写。 1回目はアセトンが多すぎて失敗。 全体に染みるくらいが丁度いい。 アセトンはアセトン100%の除光液を使用。

プリント基板 アセトン転写

水で洗いながらこすって紙を落とす。

エッジング​

適当な容器にエッジング液を入れ、 お湯を入れたフリーザーパックで 人肌程度に液が温まるようにして エッジング。 40から45℃ 程度が良いみたいだが、 温度計を入れたら錆びるので適当。 目視で塗ってないところの銅が溶けているのを確認し、エッジング終了。

プリント基板 エッジング

塗った部分を溶かす​

トナーやマジックペンでマスクした部分をアセトンで溶かす。 すると、マスクした部分だけの銅が残り回路ができる。

プリント基板 エッジング

少しだけ回路づくり​

ドリルで穴を開け、 はんだ付けして、少しだけ回路を作った。 銅に乗せるような感じではんだ付けをすると 作りやすかった。

プリント基板 エッジング