DEV Community: Shoichi Okaniwa

Executing Git Commands from Unity's C#

Shoichi Okaniwa — Wed, 22 Apr 2026 15:23:13 +0000

Executing Git Commands from Unity's C

I recently had the opportunity to execute Git commands from a C# editor extension script in Unity. Here, I'll summarize the process so I won't forget.

Sample Command

As an example, let's execute the following command from Unity's C#:

git config core.autocrlf

This command checks if the feature to automatically convert line endings is enabled.

Sample Code

Below is the sample code. By calling GetAutocrlf externally, the command will be executed.

using System;
using System.Diagnostics;
using System.IO;
using UnityEditor;
using UnityEngine;
using Debug = UnityEngine.Debug;

public class GitCommandPractice
{
    /// <summary>
    /// Check Git's autocrlf setting.
    /// </summary>
    public void GetAutocrlf()
    {
        // Retrieve the git path.
        string gitPath = GetGitPath();

        // Set the git command.
        string gitCommand = "config core.autocrlf";

        // Execute the command and get standard output.
        string autocrlf = GetStandardOutputFromProcess(gitPath, gitCommand).Trim();

        Debug.Log(autocrlf);
    }

    /// <summary>
    /// Retrieve the git executable path.
    /// </summary>
    /// <returns>Path of Git</returns>
    private string GetGitPath()
    {
        // For Mac
        if (Application.platform == RuntimePlatform.OSXEditor)
        {
            // Possible paths
            string[] exePaths =
            {
                "/usr/local/bin/git",
                "/usr/bin/git"
            };

            // First found existing path
            return exePaths.FirstOrDefault(exePath => File.Exists(exePath));
        }

        // For Windows, this is sufficient
        return "git";
    }

    /// <summary>
    /// Execute a command and get the standard output.
    /// </summary>
    /// <param name="exePath">Path to executable</param>
    /// <param name="arguments">Command line arguments</param>
    /// <returns>Standard output</returns>
    private string GetStandardOutputFromProcess(string exePath, string arguments)
    {
        // Set process start conditions.
        ProcessStartInfo startInfo = new ProcessStartInfo()
        {
            FileName = exePath,
            Arguments = arguments,
            WindowStyle = ProcessWindowStyle.Hidden,
            UseShellExecute = false,
            RedirectStandardOutput = true,
        };

        // Start the process.
        using (Process process = Process.Start(startInfo))
        {
            // Get the standard output.
            string output = process.StandardOutput.ReadToEnd();

            // Wait for the process to exit or time out.
            process.WaitForExit(TimeoutPeriod);

            return output;
        }
    }
}

Explanation

This process uses C#'s Process to execute Git commands and read their standard output.

In GetGitPath(), the path to the Git executable is retrieved. Generally, it should be sufficient to simply specify git since the path to the Git executable is typically registered in the environment variable 'Path'. However, in my Mac environment, this was not enough, so I explicitly hard-coded two options: /usr/local/bin/git and /usr/bin/git, using whichever is found.

Conclusion

In creating this article, I referred to the following resource. Thank you.

Method to Capture the Standard Output of a Child Process

Trying Async Entry Listing and Creation with contentful-management

Shoichi Okaniwa — Tue, 21 Apr 2026 15:19:45 +0000

Using async with contentful-management to List and Create Entries

I recently experimented with the JavaScript SDK for contentful-management and wanted to jot down my findings before I forget.

Preparation

Create a Contentful account and space. This article helped me understand the process clearly.

Install the necessary packages for your Node.js project:

npm install dotenv
npm install contentful-management

Create a .env file in the same directory as your package.json and add the following:

personal_access_token=your_personal_access_token
space_id=your_space_id
environment_id=your_environment_id_or_master

You need to create a Personal Access Token specifically for the Contentful Management API, separate from the Delivery and Preview API keys. For details, check the official page.

Retrieving a List of Entries from Contentful

In Contentful, each piece of data is called an entry, similar to a record in a relational database.

Here's the source code to obtain a list of entries:

require('dotenv').config()
const env = process.env

process.on('unhandledRejection', console.dir);

const contentful = require('contentful-management')
const client = contentful.createClient({
    accessToken: env.personal_access_token
});

(async () => {
    const space = await client.getSpace(env.space_id);
    const environment = await space.getEnvironment(env.environment_id);
    const entries = await environment.getEntries();
    entries.items.forEach(item => console.log(item));
})();

Registering an Entry in Contentful

A content model in Contentful is akin to a table in a database. We will create a new entry in this model. First, create it as a draft, and then publish it.

Here's the source code:

The fields section varies depending on your content model, so adjust as necessary. If you've changed Contentful's Settings > Locales to ja, replace en-US with ja.

require('dotenv').config()
const env = process.env

process.on('unhandledRejection', console.dir);

const contentful = require('contentful-management')
const client = contentful.createClient({
    accessToken: env.personal_access_token
});

(async () => {
    const space = await client.getSpace(env.space_id);
    const environment = await space.getEnvironment(env.environment_id);

    const draftEntry = await environment.createEntry('hoge_content_type', {
        fields: {
            id: {
                'en-US': 'hoge_id'
            },
            name: {
                'en-US': 'hoge_name'
            }
        }
    });

    try {
        const publishedEntry = await draftEntry.publish();
        console.log(`Published entry ID: ${publishedEntry.sys.id}`);
    } catch (err) {
        console.error(err);
    }
})();

Remember to change 'hoge_content_type' to your content model's ID as needed.

In Conclusion

I referred to the following pages when creating this article. Many thanks for the clear information.

Using UdonSharp to Force Things Through Since Timeline Doesn’t Work in VRChat

Shoichi Okaniwa — Mon, 20 Apr 2026 15:21:14 +0000

Introduction

I created a workaround for the absence of Timeline in VRChat by using UdonSharp to manually control when objects appear and disappear based on time.

Here's what I ended up creating:

// Detect dark theme var iframe = document.getElementById('tweet-1256957066393968640-628'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1256957066393968640&theme=dark" }

Unity2018 and the Loss of Timeline in VRChat

In the VRChat days of Unity2017, you could use Timeline effectively for creating worlds where object visibility aligned with music, like a particle live show. However, Timeline became unavailable in VRChat after the transition to Unity2018.

// Detect dark theme var iframe = document.getElementById('tweet-1256620569065185280-228'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1256620569065185280&theme=dark" }

Attempting with UdonSharp

I decided to create my own implementation of Timeline functionality. While learning UdonSharp (U#), I attempted this using U#.

A handy guide for setting up the UdonSharp development environment was U# Intro ①.

Implementing with Udon

Here is the completed code:

using UdonSharp;
using UnityEngine;
using UnityEngine.UI;
using VRC.SDKBase;
using VRC.Udon;

public class PseudoTimeline : UdonSharpBehaviour
{
    // Button label
    public Text buttonLabel;

    // List of game objects to control
    public GameObject[] cylinder;

    // List of start times
    public float[] startTime;

    // List of durations
    public float[] duration;

    // Elapsed time
    [UdonSynced(UdonSyncMode.None)]
    private float currentTime;

    // Playing flag
    [UdonSynced(UdonSyncMode.None)]
    private bool isPlaying;

    void Start()
    {
        // Start as stopped
        isPlaying = false;
    }

    public override void Interact()
    {
        // Change owner for the button
        if (!Networking.IsOwner(Networking.LocalPlayer, this.gameObject))
        {
            Networking.SetOwner(Networking.LocalPlayer, this.gameObject);
        }

        // Initialize elapsed time
        currentTime = 0.0f;

        // Toggle between play and stop
        isPlaying = !isPlaying;
    }

    private void Update()
    {
        if (isPlaying)
        {
            // Change button label
            buttonLabel.text = "■";

            // Count up elapsed time
            currentTime += Time.deltaTime;

            for (int i = 0; i < cylinder.Length; i++)
            {
                // Start showing
                if (currentTime > startTime[i])
                {
                    cylinder[i].SetActive(true);
                }

                // Stop showing
                if (currentTime > startTime[i] + duration[i])
                {
                    cylinder[i].SetActive(false);
                }
            }
        }
        else
        {
            // Change button label
            buttonLabel.text = "▶";

            // Hide everything
            for (int i = 0; i < cylinder.Length; i++)
            {
                cylinder[i].SetActive(false);
            }
        }
    }
}

Attach Udon Behaviour to a suitable Cube and set the Source Script to the above code.

Setting Public Variables

Set the Public Variables as shown below:

Create and assign an appropriate Text to Button Label. It changes to ■ when playing and ▶ when stopped.

For Cylinder, set the GameObjects you wish to toggle visibility for. I prepared five cylinder objects.

Start Time specifies the show start time for each GameObject. You need the same amount as Cylinder.

Duration is the play time for each GameObject. You need the same number as Cylinder. The hide end time is the start time plus this duration.

Results

A simple particle live presentation can be created as shown below:

// Detect dark theme var iframe = document.getElementById('tweet-1256957066393968640-901'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1256957066393968640&theme=dark" }

About UdonSynced

The attributes [UdonSynced(UdonSyncMode.None)] are attached to isPlaying and currentTime. This allows multiple users to view the particle live simultaneously.

Conclusion

In writing this article, I referred to the following articles. Thank you.

Writing Python Code to Convert Quaternions to Z-Y-X Euler Angles

Shoichi Okaniwa — Sun, 19 Apr 2026 14:48:07 +0000

Writing Code to Convert Quaternions to Z-Y-X Euler Angles in Python

I needed to calculate Z-Y-X Euler angles from quaternions.

Moreover, the task required me to write the code in Python 2.7, so I couldn't use handy tools like scipy.spatial.transform.Rotation.

When I did some research, I found a sample code in C++ on Wikipedia.

Wikipedia / Quaternion to Euler Angles Conversion

Writing in Python

Based on the Wikipedia sample code, I created a code in Python 2.7.

import math
import numpy as np
from pyquaternion import Quaternion

def quaternion_to_euler_zyx(q):
    """
    Convert quaternion to Z-Y-X Euler angles.

    Parameters
    ----------
    q : Quaternion
        Quaternion (in pyquaternion format)

    Returns
    -------
    np.array
        Z-Y-X Euler angles
    """

    # roll : rotation around x-axis
    sinr_cosp = 2 * (q[0] * q[1] + q[2] * q[3])
    cosr_cosp = 1 - 2 * (q[1] * q[1] + q[2] * q[2])
    roll = math.atan2(sinr_cosp, cosr_cosp)

    # pitch : rotation around y-axis
    sinp = 2 * (q[0] * q[2] - q[3] * q[1])
    if math.fabs(sinp) >= 1:
        pitch = math.copysign(math.pi / 2, sinp)
    else:
        pitch = math.asin(sinp)

    # yaw : rotation around z-axis
    siny_cosp = 2 * (q[0] * q[3] + q[1] * q[2])
    cosy_cosp = 1 - 2 * (q[2] * q[2] + q[3] * q[3])
    yaw = math.atan2(siny_cosp, cosy_cosp)

    # Euler angles
    return np.array([
        math.degrees(roll), 
        math.degrees(pitch), 
        math.degrees(yaw)
    ])

Dependencies

NumPy 1.16.6

Used for vector calculations. Version 1.16.6 seems to be the latest one supporting Python 2.7.

PyQuaternion 0.9.5

PyQuaternion is used for quaternion calculations.

While numpy-quaternion might work better with NumPy, it could not be installed in the Python 2.7 environment.

Easier with SciPy in Python 3

Using scipy.spatial.transform.Rotation makes it simpler if you're using Python 3 or later.

import numpy as np
from pyquaternion import Quaternion
from scipy.spatial.transform import Rotation as R

def quaternion_to_euler_zyx(q):
    r = R.from_quat([q[0], q[1], q[2], q[3]])
    return r.as_euler('zyx', degrees=True)

Unfortunately, scipy.spatial.transform.Rotation does not support Python 2.7.

Conclusion

I'm mostly accustomed to dealing with Unity's Z-X-Y Euler angles, so working with Z-Y-X was quite confusing. I referred to the following articles while creating this post. Thank you for the detailed insights!

12 Quiz Questions to Truly Understand Semantic Versioning

Shoichi Okaniwa — Sat, 18 Apr 2026 14:47:49 +0000

Introduction

I organized a seminar on semantic versioning for beginners using package management tools. The quiz format we used was well-received, so I am sharing the materials from that session.

By answering these questions, you will gain a good understanding of how semantic versioning works!

Give it a try!

What is Semantic Versioning?

This is one way to assign version numbers, often abbreviated as SemVer.

npm, a package management tool for Node.js, is a well-known example of using semantic versioning.
Learn more here.

For detailed specifications of semantic versioning, please refer to the following page:
https://semver.org/lang/en/

In this article, we will refer to the page mentioned above as the "specifications."

Semantic Versioning Quiz

Question 1: Which of the following version formats is correct according to semantic versioning?

[ ] 0.01.0
[ ] 0.1.3.1
[ ] 1-1-0
[ ] 1.2.a
[ ] 3,9,2
[ ] 2.-1.3
[ ] 0.11.0

Answer and Explanation
Correct answer: 0.11.0

According to the specifications:

> A normal version number MUST take the form X.Y.Z where X, Y, and Z are non-negative integers and MUST NOT contain leading zeroes. X is the major version, Y is the minor version, and Z is the patch version. Each element MUST increase numerically. For example: 1.9.0 -> 1.10.0 -> 1.11.0.

Explanation for each choice:

[ ] 0.01.0: Incorrect because leading zeroes are not allowed.
[ ] 0.1.3.1: Incorrect because the format must be X.Y.Z.
[ ] 1-1-0: Incorrect because the format must be X.Y.Z.
[ ] 1.2.a: Incorrect because X, Y, and Z must be non-negative integers.
[ ] 3,9,2: Incorrect because the format must be X.Y.Z.
[ ] 2.-1.3: Incorrect because X, Y, and Z must be non-negative integers.
[x] 0.11.0: Correct.

Question 2: A bug was found in version 1.1.9! After fixing the bug, what will the version number be?

[ ] 1.1.9.1
[ ] 1.1.10
[ ] 1.2.0

Answer and Explanation
Correct answer: 1.1.10

According to the specifications:

> Patch version Z (x.y.Z | x > 0) MUST be incremented if only backward-compatible bug fixes are introduced. A bug fix is defined as an internal change that fixes incorrect behavior.

Explanation for each choice:

[ ] 1.1.9.1: Incorrect because the format must be X.Y.Z.
[x] 1.1.10: Correct as the patch is incremented for a bug fix.
[ ] 1.2.0: Incorrect since no new functionality was added.

Question 3: A new path (new feature) was added to the Web API in version 1.2.5! The existing features have not changed. What will the version number be?

[ ] 1.2.5.1
[ ] 1.2.6
[ ] 1.3.0
[ ] 1.3.5
[ ] 2.0.0

Answer and Explanation
Correct answer: 1.3.0

According to the specifications:

> Minor version Y (x.Y.z | x > 0) MUST be incremented if new, backward-compatible functionality is introduced to the public API. It MAY include patch level changes. Patch version MUST be reset to 0 when minor version is incremented.

Explanation for each choice:

[ ] 1.2.5.1: Incorrect because the format must be X.Y.Z.
[ ] 1.2.6: Incorrect because a new feature was added, not a bug fix.
[x] 1.3.0: Correct as new functionality means incrementing the minor version.
[ ] 1.3.5: Incorrect because patch version must be reset when the minor is incremented.
[ ] 2.0.0: Incorrect as the change is backward-compatible.

Question 4: At the early stage of development, what is the safest initial version number? (It's also a matter of convention)

[ ] 0.0.0
[ ] 0.0.1
[ ] 0.1.0
[ ] 1.0.0

Answer and Explanation
Correct answer: 0.1.0

According to the specifications:

> In the early stages of development, version numbers can safely start at 0.1.0 and increment minor version for each subsequent release.

Explanation for each choice:

[ ] 0.0.0: There's no harm here, but the specifications suggest starting at 0.1.0.
[ ] 0.0.1: There's no harm here, but the specifications suggest starting at 0.1.0.
[x] 0.1.0: Correct as per the specifications.
[ ] 1.0.0: Incorrect since the software is not yet public.

Question 5: After refactoring version 1.2.7, the processing speed doubled! The API specification hasn't changed. What will the version number be?

[ ] Remain 1.2.7
[ ] 1.2.7.1
[ ] 1.2.8
[ ] 1.3.0
[ ] 2.0.0

Answer and Explanation
Correct answer: 1.2.7 or 1.3.0

According to the specifications:

> Minor version Y (x.Y.z | x > 0) MAY be incremented if significant new functionality or improvements are added internally, even with compatible API.

Explanation for each choice:

[x] Remain 1.2.7: Correct; no external change.
[ ] 1.2.7.1: Incorrect because the format must be X.Y.Z.
[ ] 1.2.8: Incorrect as there's no bug fix.
[x] 1.3.0: Correct if internal changes warrant a version increment.
[ ] 2.0.0: Incorrect since backward compatibility is maintained.

Question 6: You're developing both a mobile app and a Web API. The Web API, version 0.3.5, is only used by the mobile app. The mobile app is now released on the App Store! What will the Web API version be?

[ ] Remain 0.3.5
[ ] 0.3.6
[ ] 0.4.0
[ ] 1.0.0

Answer and Explanation
Correct answer: 0.3.5 or 1.0.0

According to the specifications:

> Version 1.0.0 defines a public API. It should be released if the software is used in production or if significant dependencies exist.

Explanation for each choice:

[x] Remain 0.3.5: Correct if no public use.
[ ] 0.3.6: Incorrect as no bug fix.
[ ] 0.4.0: Incorrect as no change in functionality.
[x] 1.0.0: Correct if the API is now public via the App Store.

Question 7: You changed a feature specification in version 1.12.6! It's no longer backward-compatible. What will the version number be?

[ ] 1.12.7
[ ] 1.13.0
[ ] 2.0.0
[ ] 2.1.0
[ ] 2.12.0

Answer and Explanation
Correct answer: 2.0.0

According to the specifications:

> Major version X (X.y.z | X > 0) MUST be incremented if any backward-incompatible changes are introduced to the public API. Minor and patch versions MUST be reset to 0.

Explanation for each choice:

[ ] 1.12.7: Incorrect as major version must increase with incompatibility.
[ ] 1.13.0: Incorrect as major version must increase with incompatibility.
[x] 2.0.0: Correct for backward incompatibility.
[ ] 2.1.0: Incorrect; minor and patch reset with major change.
[ ] 2.12.0: Incorrect; minor and patch reset with major change.

Question 8: You changed a feature in version 0.3.6! It's no longer backward-compatible, but we are still in early development where frequent changes are expected. What's a prudent version number?

[ ] 0.4.0
[ ] 1.0.0

Answer and Explanation
Correct answer: 0.4.0

According to the specifications:

> Major version zero (0.y.z) indicates development. Changes can occur at any time. Do not assume stability.

> 1.0.0 should be released if the software is used in production or is stable and relied upon.

Explanation for each choice:

[x] 0.4.0: Correct for early development, using a minor increment.
[ ] 1.0.0: Incorrect as it's still in early development.

Question 9: A bug was found in 1.5.2! You've fixed it and added a new feature without changing existing specifications. What's the version number now?

[ ] 1.5.3
[ ] 1.6.0
[ ] 1.6.1
[ ] 2.0.0

Answer and Explanation
Correct answer: 1.6.0

According to the specifications:

> Minor version Y (x.Y.z | x > 0) MUST be incremented if backward-compatible functionality is added. Patch version should be reset.

Explanation for each choice:

[ ] 1.5.3: Incorrect as minor must increase with functionality.
[x] 1.6.0: Correct for adding functionality.
[ ] 1.6.1: Incorrect as patch resets with a minor increment.
[ ] 2.0.0: Incorrect since changes are backward-compatible.

Question 10: After releasing version 2.6.3, a bug was immediately found and fixed in 30 seconds! What's the new version?

[ ] Remain 2.6.3
[ ] 2.6.4

Answer and Explanation
Correct answer: 2.6.4

According to the specifications:

> Once a versioned package is released, the contents must not be modified. Any errors must be corrected in a new version.

Therefore, even if quickly adjusted, the version should be 2.6.4.

Question 11: You deprecated an API in version 1.14.3. What's the new version?

[ ] 1.14.4
[ ] 1.15.0
[ ] 2.0.0

Answer and Explanation
Correct answer: 2.0.0

According to the specifications:

> If any public API is deprecated, the major version must increase due to loss of backward compatibility.

Explanation for each choice:

[ ] 1.14.4: Incorrect since backward compatibility is lost.
[ ] 1.15.0: Incorrect since backward compatibility is lost.
[x] 2.0.0: Correct as major version increases with deprecation.

Question 12: You plan to deprecate an API in version 1.11.1 but haven't done so yet. Documentation will mention this upcoming change. What's the version number?

[ ] Remain 1.11.1
[ ] 1.11.2
[ ] 1.12.0
[ ] 2.0.0

Answer and Explanation
Correct answer: 1.12.0

According to the specifications:

> If a public API is scheduled to be deprecated, you must increase the minor version.

Explanation for each choice:

[ ] Remain 1.11.1: Incorrect since deprecation is planned, warranting a version change.
[ ] 1.11.2: Incorrect since the minor version must increase with deprecation plans.
[x] 1.12.0: Correct, as planned deprecation means bumping the minor version.
[ ] 2.0.0: Incorrect since changes are still backward-compatible.

Conclusion

The quiz format sparked quite an excitement at my workplace. Feel free to challenge your colleagues too.

If there's any mistake in this quiz, please let me know.

Thank you for participating.

Trying a C++ Hello World with the Official GCC Docker Image

Shoichi Okaniwa — Fri, 17 Apr 2026 15:04:02 +0000

Introduction to Handling C++ Code

In our ongoing web service project, we need to work with C++ source code. Our goal is to ensure that this code compiles and runs in a Linux environment using GCC inside a Docker container. We are not using make or focusing on minimizing the environment size for now.

You can find the sample code created for this purpose here.

Searching for a Docker Image

Searching for GCC on Docker Hub revealed an official image available here.

We'll use this image (although there might be a lighter one available).

Creating the C++ Source Code

Let's create a simple Hello World! program in C++.

#include <iostream>

int main()
{
    std::cout << "Hello world!" << std::endl;
}

Creating a Script for Compiling and Executing

Here's a script to compile the C++ file. Place it in the same directory as your .cpp file.

#!/bin/bash

# Compile
g++ hello.cpp -o hello

# Execute
./hello

Creating `docker-compose.yml`

After pulling the official Docker image, we'll use it to execute build.sh.

version: '3'
services:
  gcc-cpp-sample:
    image: 'gcc:9.2'
    volumes:
      - ./cpp:/src/cpp
    working_dir: /src/cpp
    command: ./build.sh

Ensure the cpp folder is at the same level as docker-compose.yml, and place hello.cpp and build.sh inside it.

Execution!

By executing the command:

docker-compose up

the message Hello World! was successfully displayed!

Sample Code

You can find the sample code here. In addition to what's covered in this article, it also includes compiling and executing C language programs.

Conclusion

Returning to GCC after about 10 years was a great mental exercise.

This article was created with reference to the following resources. Thank you for the clear and informative articles.

Additionally, if you're concerned about the size of the official Docker image, you may want to consider Alpine Linux for a lighter environment. Here's a comprehensive guide:

Docker + C Language Environment: Lightweight Alpine Linux is Good

Debugging Web Pages Viewed on iPhone

Shoichi Okaniwa — Thu, 16 Apr 2026 15:44:57 +0000

Debugging Web Pages Viewed on iPhone

While accessing the website under development with Safari on iPhone, I noticed it wasn't functioning correctly. Web browsers on Windows and Mac displayed it correctly, indicating an issue specific to iPhone.

Upon researching, I found using Mac's Safari the simplest method for iPhone debugging and decided to give it a try successfully. To avoid forgetting, I've outlined it here.

Steps for iPhone

First, open the Settings app. Navigate to Safari → Advanced → and toggle Web Inspector ON.

Then, open the page you wish to debug in Safari on your iPhone.

Connecting iPhone and Mac

Connect your iPhone and Mac via USB.

If prompted with "Trust This Computer?" on the iPhone, tap Trust and input your passcode.

Source: https://support.apple.com/ja-jp/HT202778

Steps for Mac

First, launch Safari.

Hover over the Develop menu in the menu bar.

If Develop is not visible, go to the menu bar's Safari → Preferences → Advanced and enable Show Develop menu in menu bar.

Hover over the Develop menu, and you’ll see the iPhone device name listed. Hover over it to display the URLs of the pages open in Safari on your iPhone. Select the page you wish to debug.

This will open the Web Inspector window.

You can now proceed with debugging.

Conclusion

I'm glad this could be done easily.

Handling 403 Errors When Uploading to S3 Signed URLs with Node.js

Shoichi Okaniwa — Wed, 15 Apr 2026 15:11:23 +0000

Handling 403 Errors When Uploading to S3 Signed URLs with Node.js

I encountered challenges uploading files to Amazon S3 using signed URLs with Node.js. So, here’s a rundown to avoid the same issues in the future.

I referred to this article on generating signed URLs with Node.js:
{AWS(CloudFront+S3)+Node.js} Delivering Private Content Using Signed URLs

Successfully Generated Download Signed URLs

Generating signed URLs for downloading worked smoothly with the following code:

import AWS from 'aws-sdk';

// AWS authentication details

// Create S3 instance
const s3 = new AWS.S3();

// Generate download URL
const downloadUrl = await s3.getSignedUrl('getObject', {
  Bucket: 'your-bucket-name',
  Key: 'your-object-name',
  Expires: 60,
});

Encountering Issues with Upload Signed URLs

Using a similar approach, I generated upload signed URLs, which were created successfully.

import AWS from 'aws-sdk';

// AWS authentication details

// Create S3 instance
const s3 = new AWS.S3();

// Generate upload URL
const uploadUrl = await s3.getSignedUrl('putObject', {
  Bucket: 'your-bucket-name',
  Key: 'your-object-name',
  Expires: 60,
});

However, when attempting to upload a file using the generated URL, I received a 403 status code. The response body looked like this:

<?xml version="1.0" encoding="UTF-8"?>
<Error>
    <Code>SignatureDoesNotMatch</Code>
    <Message>The request signature we calculated does not match the signature you provided. Check your key and signing method.</Message>
    <AWSAccessKeyId>hoge</AWSAccessKeyId>
    <StringToSign>hoge</StringToSign>
    <SignatureProvided>hoge</SignatureProvided>
    <StringToSignBytes>hoge</StringToSignBytes>
    <RequestId>hoge</RequestId>
    <HostId>hoge</HostId>
</Error>

In short, it indicated an issue with the signing method.

Utilizing Signature Version 4

After further investigation, I discovered an issue:
Node.js pre-signed URL for PUT response is 'signature does not match'

As per this issue, use signature version 4 when generating the URL.

// Create S3 instance
const s3 = new AWS.S3({
  signatureVersion: 'v4',
});

// Generate upload URL
const uploadUrl = await s3.getSignedUrl('putObject', {
  Bucket: 'your-bucket-name',
  Key: 'your-object-name',
  Expires: 60,
});

By testing uploads with the above code, I successfully uploaded files!

Conclusion

I'm relieved to have resolved this issue. Special thanks to the following articles for their clear explanations:

Removing Only the First Line of a Multi-Line String in JavaScript

Shoichi Okaniwa — Tue, 14 Apr 2026 15:18:22 +0000

Encountering a CSV File with an Unusual First Line

I came across a CSV file like the one below. (This is not actual business data.)

hogehoge
name,value,count
りんご,100,2
バナナ,150,4

In this scenario, there's an unwanted string in the first line that isn't in CSV format. I needed to remove it before processing the CSV data. Let's assume the line breaks are LF.

Removing Only the First Line of a Multi-Line String

Surprisingly, I couldn't find many articles on this topic, so I'm documenting it before I forget.

This can be achieved with a combination of indexOf and substr.

// Define a multi-line string (In reality, this would be read from a file)
const inputString = `hogehoge
name,value,count
りんご,100,2
バナナ,150,4`;

// Find the position of the first line break
const firstRowEndPos = inputString.indexOf('\n', 0);

// Extract the string starting from the position after the first line break
const outputString = inputString.substr(firstRowEndPos + 1);

// Display the result
console.log(outputString);

In Conclusion

It was relatively simple to implement. If you also need to consider CR, it might become a bit more complex.

Copy Firebase Environment Variables to Bash

Shoichi Okaniwa — Mon, 13 Apr 2026 15:21:07 +0000

Introduction

Firebase functions allow you to set environment variables. For an easy-to-understand guide on setting them, please refer to this article: How to Set Environment Variables in Firebase.

I wanted to use these environment variables in Bash as well, so I devised a command to copy them.

Example of Environment Variables

Assume the following environment variables are registered in Firebase functions:

{
  "hoge": {
    "client_id": "fuga"
    "client_secret": "piyo",
  }
}

The goal here is to copy the client_id and client_secret into Bash.

Installing jq

To parse JSON, we need the command-line tool jq.

# Mac
brew install jq

# Windows
choco install jq

# Ubuntu
apt-get install jq

# CentOS
yum install jq

Registering in Bash Environment Variables

You can register them with the following command:

export $(firebase functions:config:get | jq -r '.hoge' | jq -r 'keys[] as $k | "export \($k)=\(.[$k])"')

Replace hoge with the appropriate value as needed.

This method was inspired by the article Export JSON key:value to environment variables.

Verifying Bash Environment Variables

$ echo ${client_id}
fuga

$ echo ${client_secret}
piyo

The variables were successfully copied.

Conclusion

The following articles were invaluable references. Thank you for the clear guidance.

IoT Setup in My Home

Shoichi Okaniwa — Sun, 12 Apr 2026 14:46:55 +0000

IoT Setup in My Home

I often get asked about the configuration of IoT devices in my home, so I've created a diagram to illustrate it.

The diagram shows two instances of Wi-Fi, though they represent the same device. I structured it this way to depict the flow of data from left to right.

Nature Remo

Thanks to Nature Remo, I can control devices like projectors and air conditioners that are not IoT-compatible via infrared. I highly recommend it!

IFTTT

Most IoT products come with their own smartphone apps for precise control. However, to manage multiple IoT products collectively, I've consolidated all controls using IFTTT.

By setting up scenarios like leaving home, returning home, or bedtime within IFTTT, and registering the control actions for various IoT products there, it becomes incredibly convenient.

Voice Chat on Discord with VOICEROID Transformed Speech

Shoichi Okaniwa — Sat, 11 Apr 2026 14:41:16 +0000

Introduction

I experimented with converting my voice using VOICEROID while chatting on Discord. Initially, I couldn't hear the transformed voice myself, so I researched how to enable this. I hope this is helpful for those starting as machine-voiced VTubers.

Setup Overview

The setup process involves the following steps:

Record your voice via a microphone
Convert the voice to text using Yukari-net
Use VOICEROID to generate audio from the text
Input the audio into VB-AUDIO
Set this as the input device on Discord

Preparations

It's assumed that you have set up the flow from Microphone to Yukari-net to VOICEROID.

This article was extremely helpful:

https://ariemonn.net/entry/2018/01/22/131410

Installing Virtual Audio Device

Install the virtual audio device VB-CABLE from:

https://www.vb-audio.com/Cable/

This guide was beneficial:

https://arutora.com/archives/20180516223000/

Configuring Virtual Audio Device

Next, in VOICEROID, go to Options → Others → Audio Device and select CABLE Input (VB-Audio Virtual Cable).

Then, in Discord, click the gear icon → App Settings → Voice & Video → Input Device and choose CABLE Output (VB-Audio Virtual Cable).

This allows you to converse with the VOICEROID voice on Discord. However, you still can't hear the transformed voice yourself yet.

Listening to Your Transformed Voice

On Windows 10, right-click the speaker icon 🔈 in the notification area (task tray) → Sound → Recording tab → right-click on CABLE Output → Properties → Listen tab → check Listen to this device.

Now, you can hear the transformed voice.

Conclusion

By substituting the Discord setting with VRChat, you can also converse in VR worlds!

DEV Community: Shoichi Okaniwa

Executing Git Commands from Unity's C#

Executing Git Commands from Unity's C

Sample Command

Sample Code

Explanation

Conclusion

Trying Async Entry Listing and Creation with contentful-management

Using async with contentful-management to List and Create Entries

Preparation

Retrieving a List of Entries from Contentful

Registering an Entry in Contentful

In Conclusion

Using UdonSharp to Force Things Through Since Timeline Doesn’t Work in VRChat

Introduction

Unity2018 and the Loss of Timeline in VRChat

Attempting with UdonSharp

Implementing with Udon

Setting Public Variables

Results

About UdonSynced

Conclusion

Writing Python Code to Convert Quaternions to Z-Y-X Euler Angles

Writing Code to Convert Quaternions to Z-Y-X Euler Angles in Python

Writing in Python

Dependencies

NumPy 1.16.6

PyQuaternion 0.9.5

Easier with SciPy in Python 3

Conclusion

12 Quiz Questions to Truly Understand Semantic Versioning

Introduction

What is Semantic Versioning?

Semantic Versioning Quiz

Question 1: Which of the following version formats is correct according to semantic versioning?

Question 2: A bug was found in version 1.1.9! After fixing the bug, what will the version number be?

Question 3: A new path (new feature) was added to the Web API in version 1.2.5! The existing features have not changed. What will the version number be?

Question 4: At the early stage of development, what is the safest initial version number? (It's also a matter of convention)

Question 5: After refactoring version 1.2.7, the processing speed doubled! The API specification hasn't changed. What will the version number be?

Question 6: You're developing both a mobile app and a Web API. The Web API, version 0.3.5, is only used by the mobile app. The mobile app is now released on the App Store! What will the Web API version be?

Question 7: You changed a feature specification in version 1.12.6! It's no longer backward-compatible. What will the version number be?

Question 8: You changed a feature in version 0.3.6! It's no longer backward-compatible, but we are still in early development where frequent changes are expected. What's a prudent version number?

Question 9: A bug was found in 1.5.2! You've fixed it and added a new feature without changing existing specifications. What's the version number now?

Question 10: After releasing version 2.6.3, a bug was immediately found and fixed in 30 seconds! What's the new version?

Question 11: You deprecated an API in version 1.14.3. What's the new version?

Question 12: You plan to deprecate an API in version 1.11.1 but haven't done so yet. Documentation will mention this upcoming change. What's the version number?

Conclusion

Trying a C++ Hello World with the Official GCC Docker Image

Introduction to Handling C++ Code

Searching for a Docker Image

Creating the C++ Source Code

Creating a Script for Compiling and Executing

Creating docker-compose.yml

Execution!

Sample Code

Conclusion

Debugging Web Pages Viewed on iPhone

Debugging Web Pages Viewed on iPhone

Steps for iPhone

Connecting iPhone and Mac

Steps for Mac

Conclusion

Handling 403 Errors When Uploading to S3 Signed URLs with Node.js

Handling 403 Errors When Uploading to S3 Signed URLs with Node.js

Successfully Generated Download Signed URLs

Encountering Issues with Upload Signed URLs

Utilizing Signature Version 4

Conclusion

Removing Only the First Line of a Multi-Line String in JavaScript

Encountering a CSV File with an Unusual First Line

Removing Only the First Line of a Multi-Line String

In Conclusion

Copy Firebase Environment Variables to Bash

Introduction

Example of Environment Variables

Installing jq

Registering in Bash Environment Variables

Verifying Bash Environment Variables

Conclusion

IoT Setup in My Home

Creating `docker-compose.yml`