NO MORE! 車輪の再発明

OpenCode + Ollamaを使ってローカルLLMを使った開発環境を構築する

Wed, 06 May 2026 00:00:00 GMT

そういえばコーディングエージェントでローカルLLMを使ったことないなと思ったので使ってみよう、と思ったのでそのための環境を構築してみます。

環境

今回はMac上に環境を構築していきます。

OS : macOS Sequoia
CPU : Apple M4
メモリ : 32GB

環境構築の手順

Ollamaのインストール

まずはローカルLLMを動かすためにOllamaをインストールします。

下記の公式ページを参照すると、curlでインストールする方法とdmgファイルをダウンロードしてからインストールする方法の2つが記載されています。

Download Ollama on macOS

今回はdmgファイルをダウンロードしてからインストールしました。

$ ollama --version
ollama version is 0.23.0

2026年5月5日現在だと、0.23.0がインストールされました。

インストール後、Ollamaが正常に起動することを確認します。

ローカルLLMのモデルをダウンロード

利用するローカルLLMのモデルをダウンロードします。

最近だとGemma 4の評判が良さそうなので、今回はこちらを利用してみます。

Gemma 4にもいくつか種類があるみたいですがが、Macにはメモリを32GB積んでいるのでGemma 4 26Bが使い勝手が良さそうです。

なのでこのモデルをダウンロードしてきます。

$ ollama pull gemma4:26b

OpenCodeのインストール

ローカルLLMに対応したコーディングエージェントをインストールします。

今回は仕事でも使っていて個人的にお気に入りなOpenCodeをインストールします。

homebrewを利用しているならコマンド一発でインストール可能です。

$ brew install anomalyco/tap/opencode

無事にインストールできていそうです。2026年5月5日現在では1.14.33がインストールされました。

$ opencode --version
1.14.33

OpenCodeでローカルLLMを利用するように設定する

必要なものはインストールできたので、OpenCodeでGemma 4を利用するための設定を作っていきます。

~/.config/opencode/opencode.jsoncに設定を記述していきます。

OpenCodeの公式にOllamaを利用する際の設定ファイルの例があるので、これをベースにモデルのみ変更します。

プロバイダー | OpenCode

{
  "$schema": "https://opencode.ai/config.json",
  "provider": {
    "ollama": {
      "npm": "@ai-sdk/openai-compatible",
      "name": "Ollama (local)",
      "options": {
        "baseURL": "http://localhost:11434/v1"
      },
      "models": {
        "gemma4:26b": { // ダウンロードしたモデルを指定
          "name": "gemma4:26b"
        }
      }
    }
  }
}

これで準備は完了したので、次は実際にOpenCodeでGemma 4を動かしてみます。

動作確認

OpenCodeの起動

AIにコーディングさせたいプロジェクトのディレクトリに移動して、OpenCodeを起動します。

$ cd <プロジェクトのディレクトリ>
$ opencode

すると以下のようにCLI (TUI) 上でOpenCodeが起動します。

/modelsと入力してEnterを押すとモデルを選択できるため、そこでgemma4:26bを選択します。

これで、ローカルLLMのGemma 4を使ってOpenCodeを利用できるようになりました。

参考：

OllamaとOpenCodeでローカルAIコーディング環境を構築してみた

[Dart] mockitoを使ってユニットテストを実装する

Sat, 08 Mar 2025 00:00:00 GMT

flutterで開発中のアプリのユニットテストを書いていると、DBを利用しているようなクラスはモック化したくなりました。

mockitoを使うと気軽にモックを作ることができるので、使い方のメモです。

mockitoの導入

まずはpubspec.ymlに必要なライブラリを追加していきます。

モックを自動生成するにはmockitoの他にbuild_runnerも必要になるので、この2つを追加します。

下記のようにdev_dependenciesに記述します。

dev_dependencies:
  flutter_test:
    sdk: flutter
  mockito: ^5.4.5 # 追加
  build_runner: ^2.4.14 # 追加

モックを作成する

今回は、Hello!と返すだけの↓のシンプルなクラスのモックを作成してみます。

class Sample {
  String getMessage() {
    return "Hello!";
  }
}

test/sample_test.dartというテストクラスを作成して、以下のように記述します。

import 'package:flutter_sample/sample.dart';
import 'package:mockito/annotations.dart';

@GenerateNiceMocks([MockSpec<Sample>()])
void main() {
}

ポイントは@GenerateNiceMocksの行で、これを書くことでSampleクラスのモックを自動生成できるようになります。

次に、下記のコマンドを実行します。

$ dart run build_runner build

するとtest/sample_test.mocks.dartというファイルが生成されます。これがSampleクラスのモッククラスです。

これでモッククラスを自動生成することができました。

モックを利用したユニットテストを作成する

モッククラスの生成ができたので、モックを使ったユニットテストを作成します。

先ほど作成したtest/sample_test.dartにテストを書いていきます。

import 'package:flutter_sample/sample.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:mockito/annotations.dart';
import 'package:mockito/mockito.dart';

import 'sample_test.mocks.dart';

@GenerateNiceMocks([MockSpec<Sample>()])
void main() {
  test('test', () {
    Sample sample = MockSample(); // モックを作成
    when(sample.getMessage()).thenReturn('Hi!'); // getMessage()を呼ぶと"Hi!"と返ってくるように設定

    expect(sample.getMessage(), 'Hi!');
  });
}

本来、SampleクラスのgetMessage()を呼ぶと"Hello!"という文字列が返ってきますが、上記テストではモックを利用して"Hi!"という文字列が返るようにしています。

このようにメソッドの返り値をモック化することで、DBやAPIなど利用しているメソッドの振る舞いを固定することができ、外部環境に依存しないユニットテストを作成することができます。

参考：

mise(旧rtx)を利用して言語のバージョンを管理する

Sat, 08 Feb 2025 00:00:00 GMT

もともとはjenvとかnodevとかを利用して、プログラミング言語のバージョンを切り替えていたのですが、PCを新調したのに合わせてmiseに一本化したので利用方法のメモです。

miseとは

jenvとかnodenvとかgoenvとか言語ごとにバージョン管理ツールが存在しますが、言語の数だけツールのインストール/設定が必要だったりで少々面倒でした。

それを解決してくれるのがmiseです。miseは複数の言語のバージョンをまとめて管理してくれる素敵ツールです。

環境

OS：macOS Sequoia
Shell：zsh
Homebrewのバージョン：4.4.20

インストール

今回はMacで環境構築しているので、homebrewで導入可能です。

$ brew install mise

.zshrcにアクティベート用の処理を書き込みます。

$ echo 'eval "$(mise activate zsh)"' >> ~/.zshrc

これで準備は完了です。

ターミナルを再起動 or $ source ~/.zshrcコマンドなので.zshrcを再読み込みすれば反映されます。

使い方

例えばmiseでインストールできるJavaの一覧を取得したい場合は、下記コマンドで取得できます。

$ mise ls-remote java

カレントディレクトリでJava17を利用するには次のコマンドを実行します

$ mise use java@17

このとき、miseでJava17をインストールしていなかった場合はインストールも実行されます。

グローバルでJava17を利用する場合には次のコマンドを実行します。

$ mise use --global java@17

他にも色々と便利なことができそうな雰囲気ですが、取り急ぎ以上を知っていれば各言語のバージョンをいい感じに管理できます。

参考：

[flutter] テストカバレッジを確認する

Sat, 01 Feb 2025 00:00:00 GMT

やりたいこと

flutterでユニットテストを書いていて、どのくらい網羅できたかの確認のためにテストカバレッジを確認したいことがあります。

毎回どうやって確認するか忘れるので、確認方法のメモです。

事前準備

lcovをインストールします。環境はMacなのでhomebrewを使ってインストールします。

$ brew install lcov

テストカバレッジの確認方法

--coverageオプションをつけてユニットテストを実行します。

$ flutter test --coverage

するとユニットテスト実行完了後、coverage/lcov.infoというファイルが作成されています。

このファイルにテストカバレッジの情報が記述されていますが、このままだと見にくいので、次のコマンドでhtml形式に変換してやります。

$ genhtml coverage/lcov.info -o coverage/html

するとcoverage/html/index.htmlというファイルが生成されるので、これをブラウザで開くとテストカバレッジを確認できます。

参考：

【Flutter】テストカバレッジを効率よく出力する環境を整える

MacBook Air(Early 2015)にインストールしたLubuntu 24.04.1をネット接続する

Sat, 11 Jan 2025 00:00:00 GMT

import LinkCard from "@components/misc/LinkCard.astro"

目的

以前、古いMacBook AirにLubuntu 24.04.1をインストールしました。

しかし、ただインストールしただけではWi-Fiに接続できずに流石にできることが限られてしまうので、今回はWi-Fiに接続してネット接続をするところまでをやってみます。

用意するもの

ネット接続に必要なドライバをインストールするためには、どうにかしてネットに接続しなければいけないというジレンマが発生します。

そのため、USB→有線LANの変換アダプタを利用するか、USB接続の無線LANの子機を用意してネット接続する必要があります。

いずれの場合でも、接続しただけでLubuntu上で正常に認識してくれるものを用意する必要があるので注意です。

今回は、家に転がっていた無線LAN子機のBUFFALO WLI-UC-G301Nを利用します。

手順

一時的に無線LAN子機を使ってWi-Fiに接続する

必要なドライバをインストールするため、用意した無線LANの子機をMacBook Airに接続します。

今回用意した子機は接続するとLinuxでも自動で認識してくれるので、接続して画像のここの部分をクリックすると接続するWi-Fiを選択できるようになります。

あとは接続したいWi-Fiを選択して、パスワードを入力すると無事Wi-Fiにつながります。

接続が成功すると、↓画像のようなアイコンになります。

MacBook内臓の無線LANモジュールでWi-Fiに接続する

さて、無事にネット接続はできましたが無線LAN子機を接続しっぱなしなのも使い勝手が悪いので、MacBook内臓の無線LANモジュールでWi-Fiに接続できるようにしていきます。

まず、アプリケーションメニューから「システムツール → QTerminal」を選択して、ターミナルソフトを立ち上げます。

そして、下記コマンドを実行してドライバをインストールします。

$ sudo apt update
$ sudo apt install bcmwl-kernel-source

インストールが完了したら、無線LANの子機を抜いて一旦PCを再起動します。

再起動後、無線LAN子機を外したのでWi-Fiの接続が切れていますが、ドライバをインストールしたため内臓の無線LANモジュールを利用してWi-Fiに接続できるようになっています。

そのため、デスクトップ右下の画像部分をクリックすると接続するWi-Fiをできるようになっているので、接続したいWi-Fiを選択して、パスワードを入力すると無線LAN子機なしでも無事Wi-Fiに接続できます。

参考：

networking - Macbook Air 2015 wifi adapter not found issue - Ask Ubuntu

[SpringBoot] ユニットテスト時にapplication.ymlの値を部分的に上書きする

Mon, 06 Jan 2025 00:00:00 GMT

仕事でSpringBootをよく使ってて、設定値をapplication.ymlから読み込んでいます。

この設定値の一部のみをユニットテストのときのみ変えたいことがちょくちょくあるのですが、方法をいつも忘れるのでその方法のメモです。

特定のユニットテストのみで設定値を変える方法と、ユニットテスト全体で設定値を変える方法の2つを紹介します。

やりたいこと

↓のような設定値を書いたapplication.ymlがあります。

setting:
  value1: hoge # ← ユニットテストのときのみこの値を変更したい
  value2: fuga # ← この値は変更したくない

これらの設定値を読み込んだ下記クラスもあります。

import lombok.Getter;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;

@Component
public class SettingProperties {
    @Getter
    @Value("${setting.value1}")
    private String value1;

    @Getter
    @Value("${setting.value2}")
    private String value2;
}

↓のようなユニットテストを作成して、このユニットテスト内ではvalue1の値を変えたいです。

@SpringBootTest
class DemoApplicationTests {
	@Autowired
	SettingProperties properties;

	@Test
	void test() {
		Assertions.assertEquals("piyo", properties.getValue1()); // ← これが通るようにしたい
		Assertions.assertEquals("fuga", properties.getValue2());
	}
}

特定のユニットテストのみで設定値を上書きする方法

特定のユニットテストのときの設定値の一部を上書きするには、@ActiveProfilesというアノテーションを利用します。

まず、src/test/resources/application-test.ymlというファイルを作成して、上書きしたい設定値の値のみを記載します。

setting:
  value1: piyo

次に、上書きした値を利用したいユニットテストで、@ActiveProfilesアノテーションを追加します。アノテーションの引数にはapplication-<任意の値>.ymlで指定した<任意の値>部分の文字列を指定します。（今回の場合はtest）

@SpringBootTest
@ActiveProfiles("test") // ← この行を追加
class DemoApplicationTests {
	@Autowired
	SettingProperties properties;

	@Test
	void test() {
		Assertions.assertEquals("piyo", properties.getValue1());
		Assertions.assertEquals("fuga", properties.getValue2());
	}
}

すると、このユニットテストは問題なく通るようになります。

参考：

テスト用の設定を分ける – @ActiveProfiles – 諦めなければできる – Anveloper

ユニットテスト全体で設定値を上書きする方法

上述のように@ActiveProfilesを利用すればユニットテストのときのみ特定の設定値を上書きすることができます。
しかし、ユニットテスト全体で特定の設定値を上書きした場合、ユニットテストの数が多いと全てに@ActiveProfilesを記載するのは少々大変です。

そこで、ユニットテスト全体で特定の設定値を上書きする方法も紹介します。

まず、src/test/resources/config/application.ymlというファイルを作成して、上書きしたい設定値の値のみを記載します。

setting:
  value1: piyo

configという名前のディレクトリ直下にapplication.ymlを配置するのがポイントです。

必要な修正はこれだけです。これだけで、ユニットテスト内ではSettingProperties::getValue1()を呼び出すとpiyoという文字列が返ってくるようになります。

SpringBootではベースとなるapplication.ymlを読み込んだ後に、configディレクトリ内にapplication.ymlがあればそれを追加で読み込むため、このような挙動になります。

そのため、src/test/resources/config/application.ymlにユニットテスト用に上書きしたい設定を書けば、テスト全体でその値が利用されるようになります。

参考：

Externalized Configuration :: Spring Boot

[Dart] 現在の年齢を計算する

Fri, 03 Jan 2025 00:00:00 GMT

やりたいこと

現在開発中のflutterアプリで、生年月日から現在の年齢を計算する必要がありました。

dartのDateTimeクラスにはdifferenceメソッドがありますが、これだと差分の日数は取得できますが、年数は取得できません。

difference method - DateTime class - dart:core library - Dart API

差分日数を365で割れば年齢計算できるかなと思ったものの、閏年を考えるとうまくいかないパターンもあるので、どうにかして閏年を踏まえてシンプルに年齢を計算したいです。

実装

現在の日時から年齢を計算するメソッドを作成しました。これで閏年の場合も年齢を計算できます。

int getNowAge(DateTime birthday) {
  DateTime now = DateTime.now();

  int age = now.year - birthday.year; // 1
  if (now.month * 100 + now.day < birthday.month * 100 + birthday.day) { // 2
    age--;
  }
  return age;
}

解説

まず1では単純に現在の西暦から生年月日の西暦を引いています。

この場合、今年の誕生日をまだ迎えていない場合は1歳余分に足された値になっているため、今年の誕生日を迎えたかどうかを2のif文で行なって、迎えていない場合は年齢を1引いています。

今年の誕生日を迎えたかどうか、月を比較してから日を比較して・・・みたいなことをするのは面倒なので、MMDDの整数値の形にして比較することでロジックをシンプルにしています。

参考：

生年月日から年齢を簡易計算する数式 #Python - Qiita

古いMacBook AirにLubuntuをインストールする

Thu, 19 Dec 2024 00:00:00 GMT

import LinkCard from "@components/misc/LinkCard.astro"

目的

こちらで書いたように、現在サポートの切れたMacBook Airを所持しています。

使えないMacBookを持っていても仕方ないので、Ubuntuの派生で軽量なディストリビューションであるLubuntuをこのMacBook Airに入れてみようと思います。

完全にmacOSを消すわけではなくて、macOSとLubuntuのデュアルブートを目指します。

対象のMacBook Air

持っているのはMacBook Air Early 2015で、次のようなスペックになっています。

スペック名	スペック
OS	macOS Monterey
CPU	Intel Core i5
メモリ	8GB
ストレージ	256GB

ISOイメージを書き込んだUSBメモリの作成

ISOファイルのダウンロード

以下リンクから、LubuntuのISOイメージをダウンロードします。
2024年12月現在だと、24.04.1が最新のLTS版なので、これをダウンロードします。

Downloads – Lubuntu

念のため、ダウンロードしたISOファイルのハッシュ値が公式のものと一致するか確認します。

$ shasum -a 256 ~/Downloads/lubuntu-24.04.1-desktop-amd64.iso
cba3737f2ec5e1432e86d0f95fb09e1e4febeca97cc7d2d2c56c788a6903b345  /Users/user/Downloads/lubuntu-24.04.1-desktop-amd64.iso

ISOファイルを書き込んだUSBメモリを作成

マウントしてるディスクの一覧を取得して、USBメモリを特定します。

$ diskutil list
/dev/disk0 (internal, physical):
   #:                       TYPE NAME                    SIZE       IDENTIFIER
   0:      GUID_partition_scheme                        *251.0 GB   disk0
   1:                        EFI EFI                     209.7 MB   disk0s1
   2:                 Apple_APFS Container disk1         250.8 GB   disk0s2

/dev/disk1 (synthesized):
   #:                       TYPE NAME                    SIZE       IDENTIFIER
   0:      APFS Container Scheme - +250.8 GB   disk1
                                 Physical Store disk0s2
   1:                APFS Volume System - Data           130.7 GB   disk1s1
   2:                APFS Volume Preboot                 814.8 MB   disk1s2
   3:                APFS Volume Recovery                1.1 GB     disk1s3
   4:                APFS Volume VM                      2.1 GB     disk1s4
   5:                APFS Volume System                  15.4 GB    disk1s5
   6:              APFS Snapshot com.apple.os.update-... 15.4 GB    disk1s5s1

/dev/disk2 (external, physical):
   #:                       TYPE NAME                    SIZE       IDENTIFIER
   0:                            USB4G                  *4.0 GB     disk2

USBメモリは/dev/disk2ですね。

次にUSBメモリを初期化します。

$ diskutil eraseDisk MS-DOS USB4GB /dev/disk2
Started erase on disk2 (USB4G)
Unmounting disk
Creating the partition map
Waiting for partitions to activate
Formatting disk2s2 as MS-DOS (FAT) with name USB4GB
512 bytes per physical sector
/dev/rdisk2s2: 7403360 sectors in 925420 FAT32 clusters (4096 bytes/cluster)
bps=512 spc=8 res=32 nft=2 mid=0xf8 spt=32 hds=255 hid=411648 drv=0x80 bsec=7417856 bspf=7230 rdcl=2 infs=1 bkbs=6
Mounting disk
Finished erase on disk2

初期化完了後にアンマウントします。

$ diskutil unmountDisk /dev/disk2
Unmount of all volumes on disk2 was successful

ISOファイルをUSBメモリに書き込みます。

# ISOファイルのパスは相対パスだとNo such file or directoryになったのでフルパスで指定
$ sudo dd if=/Users/user/Downloads/lubuntu-24.04.1-desktop-amd64.iso of=/dev/disk2 bs=16m status=progress
  3305111552 bytes (3305 MB, 3152 MiB) transferred 7118.291s, 464 kB/s
197+1 records in
197+1 records out
3309283328 bytes transferred in 7124.972452 secs (464463 bytes/sec)

ブロックサイズの設定が悪かったのか、低速のUSBメモリを使ったからなのか、思いのほか時間がかかった・・・

完了したらUSBを取り外します。

$ diskutil eject /dev/disk2

これでLubuntuブート用のUSBメモリの完成です。

参考：

MacでLinuxのISOファイルをUSBフラッシュメモリに書き込む - もちゅろぐ

Lubuntu用のボリュームの作成

MacBookのローカルディスクのパーティションを分割して、Lubuntuインストール用のパーティションを作成します。

Macにプリインストールされているディスクユーティリティを開いて、Partitionを選択します。

「+」ボタンを押します。

Add Partitionを選択します。

新規パーティションの情報を入力します。

各項目はそれぞれ次のように入力します。

項目	入力する値
Name	適当なパーティション名
Format	MS-DOS (FAT)
Size	パーティションのサイズ円グラフの分割の線をドラッグすることで変更する

Applyボタンを押すと確認モーダルが表示されるので、内容が問題なければPartitionを押します。

ボリュームのリサイズ中は電源落とすなよ的なモーダルが出るので、Continueを押すとパーティションの作成が始まります。

しばらく待つとパーティションの作成が完了しました。
（最後にアンマウントが失敗した的なエラーが出ましたが、気にせず進めます。）

参考：

macOS CatalinaとUbuntuのデュアルブートにした話

Lubuntuのインストール

(ここからはスクショ取れてないので画像なしです・・・)

MacBookを一度シャットダウンして、ISOイメージを書き込んだUSBメモリを挿します。

optionキーを押しながらMacBookを再度起動するといつもと違う画面が表示されるので、「EFI Boot」を選択します。

すると真っ黒い画面が表示されるので、矢印キーで「Try or Install Lubuntu」を選択してEnterを押します。

Lubuntuの起動画面が表示されるので、Select Your Languageで日本語を選択して、「Install Lubuntu」をクリックします。

Lubuntuのインストーラが起動するので、あとは流れに沿ってインストールするだけです。

注意するべき点として、流れに沿って進めていくとインストールするパーティションを選択する画面が出てきます。
ここでは「パーティションの置換」を選択して、先ほど作成したパーティションを選択します。
ここの選択をミスるとmacOSが消えたりします。

インストールが完了すると再起動を促されます。

今すぐ再起動を選択すると「Please remove the installation medium, then press ENTER:」と表示された画面になるので、USBメモリを取り除いてEnterを押します。

するとLubuntuが起動するようになります。

Lubuntuインストール完了後はデフォルトでLubuntuが起動するようになります。macOSを起動したい場合は、optionを押しながら起動して、「System」を選択するとmacOSが起動します。

とりあえずLubuntuのインストールまでは完了しました。ネットにはまだ繋がってなかったり、実用のためにはまだ諸々設定が必要ですが、その辺りは次回やっていきます。

ネットに接続したときの記事はこちら：
<LinkCard url="/2025/01/11/post-3346/" />

参考：

macOS MojaveとUbuntu 18.04をデュアルブート(新しいMac等は非対応)

MacBookのCTO(カスタマイズ)モデルを安く買う方法調査メモ

Mon, 16 Dec 2024 00:00:00 GMT

import LinkCard from "@components/misc/LinkCard.astro"

目的

この間、いろいろと限界がきている開発環境をMacBookに一本化することを決めました。

さて、そう決めたのはいいもののMacBookはお値段がお高い。

カスタマイズしない吊るしのモデルであれば売っているお店も多く、たまにセールで安くなってたりしそうですが、カスタマイズモデルとなるとそもそも購入できるところが限られており、安く買う難易度は高そうです。

そして用途的にはカスタマイズしたMacBookが欲しいので、どうやったら安く買えるかを調査しました。

購入したいMacbook

自分の用途を考えて、次のスペックのMacbook Proを狙うことにしました。

スペック名	スペック
機種	MacBook Pro
CPU	M4 10コアCPU 10コアGPU
メモリ	32GB
ストレージ	1TB

吊るしのMacBook Proのメモリだけ32GBに増やしたモデルです。

これをApple公式で買うと338,800円するので、これをベースにどこまでお得にできるか調べます。

安く買う方法の調査

Apple公式とAmazon、主要な家電量販店の通販サイトだとどの程度ポイント/割引があるかを調べました。

Yahoo!ショッピングや楽天はCTOモデルの扱いがそもそもなさそうだったので除外しています。

購入場所	価格	ポイントや割引
Apple公式	338,800円	-
Amazon	該当モデルなし	Amazonポイント：1%
ビックカメラ.com	338,800円	家電量販店のポイント：5% モッピー経由で購入：3% PayPayクーポン：2000円分
ソフマップ	338,800円	家電量販店のポイント：5% ハピタス経由で購入：1.8%
ヤマダウェブコム	該当モデルなし	家電量販店のポイント：5% モッピー経由で購入：1.2%
エディオン	該当モデルなし	家電量販店のポイント：5% モッピー経由で購入：1.5%
Joshin web	該当モデルなし	家電量販店のポイント：5% モッピー経由で購入：1.1%
ノジマオンライン	該当モデルなし	家電量販店のポイント：5% モッピー経由で購入：1.2%
コジマネット	該当モデルなし	家電量販店のポイント：5% モッピー経由で購入：2.5%
ケーズデンキオンラインショップ	該当モデルなし	Rakuten Rebates経由：1.5%

こうしてまとめてみると、家電量販店の通販サイトで購入すると、5%はポイントバックされそうです。

さらに、ポイントサイトを経由して購入すれば、ポイントサイトのポイントが数%分ゲットできそうです。

今回調査した限りでは、ビックカメラの通販サイトで購入するのが最も還元率が高そうです。
ちょうど狙ってたモデルをビックカメラであれば販売していたので、ちょうどよいです。
ついでに期間限定のPayPayクーポン2000円分も出ていて、さらにお得に買えそうです。

※ ポイントサイト経由の還元率は割と頻繁に変動していて、どのポイントサイト経由が一番お得かは日々変動しているので、購入前に確認した方が良いです。

実際に買ってみた

お高い買い物でしたが、ビックカメラ.comで狙ったスペックのMacBook Proを購入しました。

お値段としては338,800円で、以下のポイントを獲得しました。

ポイント	獲得ポイント数
PayPayクーポン利用分	2,000ポイント
ビックカメラ	16,940ポイント
モッピー ※ 実際に買おうとしたら還元率が3.5%にアップしてました	10,780ポイント

PayPayクレジットカードで支払ったので、実際はクレカポイント1%分がここに上乗せされるのですが、このポイントはApple公式で購入しても付与されるポイントなので省略しています。

ということで、29,720円相当のポイント分、約8.8%ほどお得に購入することができました。

歴代MacBook Pro/AirのOSのサポート期間の調査

Sat, 14 Dec 2024 00:00:00 GMT

import LinkCard from "@components/misc/LinkCard.astro"

2026/5/24追記
思ったよりもこの記事が読まれているみたいなので、2026年5月24日時点の最新情報に更新しました

背景

前回、いろいろと限界がきている開発環境をMacBookに一本化することを決めました。

次に考えるべきは、MacBook ProとMacBook Airのどちらを購入するかです。

購入したらなるべく長く使いたいと考えているのですが、ふとProとAirだとどっちの方がOSのサポート期間が長いのか気になったので調べてみました。

なるべくApple公式情報を参照していますが、サイレントリリースされたモデルなどもあり、一部それ以外の情報源が混じっています。

バージョン	リリース日
macOS 26 (Tahoe)	2025/9/15
macOS 15 (Sequoia)	2024/9/16
macOS 14 (Sonoma)	2023/9/26
macOS 13 (Ventura)	2022/10/24
macOS 12 (Monterey)	2021/10/25
macOS 11 (Big Sur)	2020/11/12
macOS 10.15 (Catalina)	2019/10/7
macOS 10.14 (Mojave)	2018/9/24
macOS 10.13 (High Sierra)	2017/9/25
macOS 10.12 (Sierra)	2016/9/20

世代	発売日	最終OS	最新OS提供期間
2025, M5	2025/10/22	-	最新OS提供中
2024, M4	2024/11/8	-	最新OS提供中
2023, M3	2023/11/7	-	最新OS提供中
2022, M2	2023/2/3	-	最新OS提供中
2021, M1	2021/10/26	-	最新OS提供中
2020, M1	2020/11/17	-	最新OS提供中
2020	2020/5/4	macOS 15 (Sequoia) /macOS 26 (Tahoe)	1959日 ※ macOS 15 (Sequoia)が最終OSとして計算
2019	2019/11/14	-	最新OS提供中
2019	2019/7/9	macOS 15 (Sequoia)	2259日
2019	2019/5/21	macOS 15 (Sequoia)	2308日
2018	2018/7/12	macOS 15 (Sequoia)	2621日
2017	2017/6/7	macOS 13 (Ventura)	2301日
2016	2016/10/28	macOS 12 (Monterey)	2186日
Mid 2015	2015/5/9	macOS 12 (Monterey)	2724日
Early 2015	2015/3/10	macOS 12 (Monterey)	2784日
Mid 2014	2014/7/29	macOS 11 (Big Sur)	2644日
Late 2013	2013/10/23	macOS 11 (Big Sur)	2923日
Early 2013	2013/2/13	macOS 10.15 (Catalina)	2828日
Late 2012	2012/10/24	macOS 10.15 (Catalina)	2940日
Mid 2012	2012/6/12	macOS 10.15 (Catalina)	3074日
Late 2011	2011/10/24	macOS 10.13 (High Sierra)	2526日
Early 2011	2011/2/24	macOS 10.13 (High Sierra)	2768日

世代	発売日	最終OS	最新OS提供期間
2026, M5	2026/3/11	-	最新OS提供中
2025, M4	2025/3/12	-	最新OS提供中
2024, M3	2024/3/4	-	最新OS提供中
2023, M2	2023/6/13	-	最新OS提供中
2022, M2	2022/7/15	-	最新OS提供中
2020, M1	2020/11/10	-	最新OS提供中
2020	2020/3/18	macOS 15 (Sequoia)	2006日
2019	2019/7/9	macOS 14 (Sonoma)	1895日
2018	2018/10/30	macOS 14 (Sonoma)	2147日
2017	2017/6/5	macOS 12 (Monterey)	1966日
Early 2015	2015/3/10	macOS 12 (Monterey)	2784日
Early 2014	2014/4/29	macOS 11 (Big Sur)	2735日
Mid 2013	2013/6/11	macOS 11 (Big Sur)	3057日
Mid 2012	2012/6/12	macOS 10.15 (Catalina)	3074日
Mid 2011	2011/7/20	macOS 10.13 (High Sierra)	2622日

【2024年】開発環境の刷新を考える

Sun, 08 Dec 2024 00:00:00 GMT

目的

現在開発に利用しているPCが結構古く、いろいろと限界が見えているので、PCの買い替えを検討しています。

いくつかパターンが考えられるので、各パターンを整理してどのパターンを採用するのか決めたいです。

現在の開発環境

現在はメインとサブのPCの2台があるのですが、どちらも結構古めの構成です。

メインPC

メインの開発ではWindowsのデスクトップPCを利用しています。

2017年頃に購入したBTOパソコンで、スペックは次の通りです。

スペック名	スペック
OS	Windows 10
CPU	Ryzen 7 1700
メモリ	32GB
ストレージ	Cドライブ：SSD 1TB その以外：SSD 合計436GB、HDD 2TB

サブPC

サブのPCとして、MacBook Airを利用しています。

世代的にはEarly 2015なので、2015年頃のモデルです。

開発したiOSアプリの動作確認や、実家に帰省するときの作業用PCとして利用しています。

スペック名	スペック
OS	macOS Monterey
CPU	Intel Core i5
メモリ	8GB
ストレージ	256GB

現在の開発環境の問題点

OSのサポートがそろそろやばい

Windows

Windows 10のセキュリティサポートは2025年10月に終了するので、サポート終了まであと1年を切っています。

なのでWindows 11にアップデートしたいのですが、残念ながらRyzen 7 1700はWindows 11に対応しておらず、正攻法ではアップデートできません。

参考：

Windows プロセッサ要件 - Windows 11 バージョン 22H2 および 23H2 でサポートされている AMD プロセッサ | Microsoft Learn

Mac

現在の最新OSはmacOS Sequoiaですが、Early 2015世代のMacBook AirではSequoiaどころかMontereyまでしかアップデートできません。

バージョニングでいうと、SequoiaがmacOS 15でMontereyがmacOS 12なので、3世代前ですね。

macOSは最新世代+2世代前までのOSはセキュリティアップデートをしてくれているので、アウトですね。

実際Montereyは2024年7月が最後のセキュリティアップデートとなっています。

なので最近はもうMacBook Airは利用していません。

参考：

Apple Storeで公開しているアプリを更新できない

macOS Montereyでは最新のXcodeを入れることができません。

その影響で公開しているアプリの更新しようとしても、Xcodeのバージョンが古いと怒られて更新できず、Apple Storeで公開しているアプリの更新が実質止まってしまっています。

iOSの動作確認が重すぎる

MacBook Air最大の役割が、iOSアプリをビルドして動作確認することなのですが、これが重すぎてぶっちゃけもう使えないレベルです。

刷新パターン

WindowsデスクトップとMacbookの両方を買い替える

持ってる2台のPCを両方買い替えて、Windowsデスクトップ + MacBook環境の新環境を作る案です。

メリット

WindowsとMacの両方の環境を維持できる

デメリット

お金がいっぱいかかる
サブPCの稼働率は低くなるのでコスパ的には微妙？

WindowsノートとMac miniに買い替える

現在はデスクトップはWindows、ノートはMacという構成ですが、逆にデスクトップはMac、ノートはWindowsの環境に刷新する案です。

メリット

WindowsとMacの両方の環境を維持できる

デメリット

お金がいっぱいかかる
サブPCの稼働率は低くなるのでコスパ的には微妙？ただWindowノートはお手頃なのも多いのでMacBookを遊ばせておくよりはコスパよさそう

Macのみ買い替えてMac1台に集約する

MacBookを購入してWindowsは引退させて、すべての作業をMacに集約する案です。

メリット

全作業を1台に集約できて効率的
デスクトップを引退させられるので省スペースになる

デメリット

1台に集約するとなるとそれなりのスペックが必要になるので、お金もそれなりにかかる
Windowsを気軽に触れなくなる（Parallel Desktopとかを利用すれば仮想環境上にWindowsを維持することはできそう）

メインPCの延命 + AWSのMacインスタンスの利用

メインPCでWindows 10を脱却して寿命を延ばして、Macを利用したいときはAWSのMacインスタンスを利用する案です。

メインPCの延命策としては以下が考えられそうです。

Linux化する
非正攻法でWindows 11にアップデートする
CPUだけWindows 11対応のものに交換して、正攻法でWindows 11にアップデートする

メリット

初期コスト的な面だと金はあまりかからない

デメリット

Mac環境が必要になるたびに課金が必要
Mac環境を使い終わったときにちゃんと手順踏まないとうっかり高額請求されそう
MacBookは引退させるので持ち運びできるPCがなくなる（Linux化してモバイルノートとして使うのはありかも）

結論

「MacBookに一本化」案を採用することにしました。

なので今使ってるのWindowsデスクトップとMacBook Airを引退させて、新しくMacBookに一本化していくことにします。

WindowsとMacの両方使える自分でいたかったので「Windowsノート + Mac mini」案も悩んだんですが、どんなときでもMacBook1台あれば完結する魅力が上回りました。

Windows環境はMacBook上の仮想環境を作ろうと思います。

[Ghostscript] PDFを圧縮する

Tue, 24 Sep 2024 00:00:00 GMT

やりたいこと

昨今、PDFのファイルサイズを小さくする様々なオンラインサービスがあります。

しかし、個人情報の含まれるPDFだったりを小さくしたい場合、オンライン上にファイルをアップロードするのには抵抗があります。

なので、オフラインでPDFファイルサイズを縮小できる方法を探すと、Ghostscriptを使うとできそうなことが分かったので試してみました。

環境

以下の環境で実施しました。

Windows 10
WSL2 Ubuntu-20.04

手順

Ghostscriptをインストール

WSL2上のUbuntuにGhostscriptをインストールします。

$ sudo apt install ghostscript

Ghostscript 9.50がインストールされました。

$ gs --version
9.50

PDFのファイルサイズを小さくする

いよいよファイルサイズを縮小します。以下のコマンドでファイルサイズを小さくできます。

$ gs -sDEVICE=pdfwrite -dCompatibilityLevel=1.4 -dPDFSETTINGS=/ebook -dNOPAUSE -dQUIET -dBATCH -sOutputFile=<出力先のファイルパス> <小さくしたいPDFのファイルパス>

試しにこちらの3.9Mあるinput.pdfというPDFのファイルサイズの縮小を試みてみます。

$ ls -lh input.pdf 
-rwxr-xr-x 1 user user 3.9M Sep 17 02:15 input.pdf

縮小実行

$ gs -sDEVICE=pdfwrite -dCompatibilityLevel=1.4 -dPDFSETTINGS=/ebook -dNOPAUSE -dQUIET -dBATCH -sOutputFile=output.pdf input.pdf

2.5kまでファイルサイズを圧縮できました。

$ ls -lh output.pdf 
-rw-r--r-- 1 user user 2.5K Sep 17 02:20 output.pdf

コマンドの解説

オプション	説明
-sDEVICE=pdfwrite	PDF形式で出力します。
-dCompatibilityLevel=1.4	PDFのバージョンを指定します。
-dPDFSETTINGS=/ebook	PDFの解像度を指定します。以下4つの値を指定できて、下に行くほど品質が高くなります。・/screen ・/ebook ・/printer ・/prepress 指定しない場合は次の値を指定したときと同じ挙動になります。・/default なお、入力したPDFから品質をなるべく落としたくない場合は、/prepressではなく/defaultを使用するべきらしいです。
-dNOPAUSE	各ファイルを処理するたびに一時停止しないようになります。
-dQUIET	標準出力への出力を抑制します。
-dBATCH	対話形式に入るのではなく、コマンド実行完了後に処理を終了します。
-sOutputFile=<出力先のファイルパス>	縮小後のPDFの出力先のファイルパスを指定します。

参考：

[flutter] TextFormFieldを利用して「 'initialValue == null || controller == null': is not true.」というエラーになった時の対応

Sat, 20 Jul 2024 00:00:00 GMT

flutterでアプリ開発してたらエラーではまったのでその対応メモです。
なお開発環境は次の通りです。

Windows 10
flutter 3.22.2

事象

TextFormFieldを利用すると、次のようなエラーが表示されました。

'package:flutter/src/material/text_form_field.dart': Failed assertion: line 177 pos 15: 'initialValue == null || controller == null': is not true.

このエラーが発生する最小のコードは次の通りです。

TextFormField(
  controller: TextEditingController(),
  initialValue: 'init',
),

原因

TextFormFieldではcontrollerとinitialValueを同時に利用することはできません。

initialValueに値を設定すると内部的にcontrollerを生成するため、同時に利用できないものと思われます。

対応方法

controllerとinitialValueのどちらかのみを利用することでエラーを回避できます。

TextEditingControllerには初期値を設定することができるため、基本的にはcontrollerを利用するで問題ないと思います。

修正前

TextFormField(
  controller: TextEditingController(),
  initialValue: 'init',
),

修正後

TextFormField(
  controller: TextEditingController(text: 'init'),
),

参考：

[flutter] TextFieldのsuffixを常時表示させる

Sun, 14 Jul 2024 00:00:00 GMT

やりたいこと

TextFieldのsuffixやsuffixTextを使ってsuffixを設定すると、TextFieldがフォーカスされたときにしか設定したsuffixが表示されません。

TextFieldがfocusされた状態

</figcaption>

</figure>

TextFieldがunfocusされた状態

</figcaption>

</figure>

これを、フォーカスされているかどうかに関わらず、常にsuffixが表示された状態にしたいです。

実装

suffixIconは常時表示されるWidgetなので、suffixやsuffixTextの代わりにこれを使います。なお、環境は次の通りです。

Dart 3.4.0
Flutter 3.22.0

before：フォーカスを外すとsuffixが消える状態

TextField(
  decoration: InputDecoration(
    suffix: const Text('円'),
  ),
),

after：フォーカスを外してもsuffixが消えない

TextField(
  decoration: InputDecoration(
    suffixIcon: const Text('円'),
    suffixIconConstraints: BoxConstraints(minHeight: 0, minWidth: 0),
  ),
),

参考：

Is there a way to create a text field with a prefix that is always visible in flutter - Stack Overflow

[flutter] BottomNavigationBarのlabelを非表示にする

Sun, 02 Jun 2024 00:00:00 GMT

やりたいこと

BottomNavigationBarを利用して画面下にタブを実装したいです。タブにはアイコンのみ表示したいです。

つまりこれのラベルを消して

こうしたいです。

実装

ScaffoldのbottomNavigationBarを使ってラベルなしの下タブを実装します。なお、環境は次の通りです。

Dart 3.4.0
Flutter 3.22.0

before : ラベル表示

      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'ほーむ'),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'せってぃんぐ'),
        ],
      ),

after : ラベル非表示

      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'ほーむ'),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'せってぃんぐ'),
        ],
        showSelectedLabels: false,   // <- 追加
        showUnselectedLabels: false, // <- 追加
      ),

2行追加しただけです。具体的に何をやっているかは次の通りです。

showSelectedLabels: false：選択されているタブのラベルを非表示
showUnselectedLabels: false：選択されていないタブのラベルを非表示

これですべてのタブのラベルが非表示になるため、アイコンのみ表示することができます。

参考：

flutter - BottomNavigationBar without Text - Stack Overflow

[flutter] Error: The class 'FileSystemEvent' can't be extended, implemented, or mixed in outside of its library because it's a sealed class. の対処メモ

Sun, 19 May 2024 00:00:00 GMT

flutterでアプリ開発してたらエラーではまったのでその対応メモです。

なお開発環境は次の通りです。

Windows 10
flutter 3.22.0

事象

mockを更新しようと次のコマンドを実行すると

$ dart run build_runner build

以下のようなエラーが出て失敗しました。

Resolving dependencies in `E:\sample_project`...
Downloading packages...
Got dependencies in `E:\sample_project`.
Building package executable... (1.0s)
Failed to build build_runner:build_runner:
/C:/Users/User/AppData/Local/Pub/Cache/hosted/pub.dev/watcher-1.0.2/lib/src/constructable_file_system_event.dart:7:57: Error: The class 'FileSystemEvent' can't be extended, implemented, or mixed in outside of its library because it's a sealed class.
abstract class _ConstructableFileSystemEvent implements FileSystemEvent {
                                                        ^
Failed to build build_runner:build_runner:
/C:/Users/User/AppData/Local/Pub/Cache/hosted/pub.dev/watcher-1.0.2/lib/src/constructable_file_system_event.dart:7:57: Error: The class 'FileSystemEvent' can't be extended, implemented, or mixed in outside of its library because it's a sealed class.
abstract class _ConstructableFileSystemEvent implements FileSystemEvent {

原因

watcher 1.0.2を利用しているのが原因です。現時点の最新バージョンであるwatcher 1.1.0にバージョンを上げると解決しました。

対応方法

pubspec.lockで指定されているwatcherのバージョンを1.1.0に上げられればいいわけです。

pubspec.ymlでバージョンを固定していないなら、次のコマンドで手っ取り早くwatcherのバージョンだけ更新できます。

$ flutter pub upgrade watcher

更新後のpubspec.lockを確認すると、watcher 1.1.0に上がって問題のエラーが出なくなっていると思います。

参考

Watcher fails with class 'FileSystemEvent' can't be extended, for dart, not for flutter. · Issue #52570 · dart-lang/sdk

[flutter] TextFieldでよく使う機能/デザインメモ

Tue, 12 Dec 2023 00:00:00 GMT

よく使うのに毎回忘れるのでメモ

複数行入力する

3行まで表示

TextField(
  keyboardType: TextInputType.multiline,
  maxLines: 3,

)

行数制限なしで表示

TextField(
  keyboardType: TextInputType.multiline,
  maxLines: null,
)

下線を表示しない

TextField(
  decoration: InputDecoration(
     border: InputBorder.none,
  ),
)

プレースホルダーを表示する

TextField(
  decoration: InputDecoration(
    hintText: 'プレースホルダー', // プレースホルダーに表示した文字列
    hintStyle: TextStyle(
      color: Colors.grey, // プレースホルダーの文字列の色
    )
  ),
),

参考：

MacにVespaをインストールして動作確認するまで

Thu, 05 Jan 2023 00:00:00 GMT

import LinkCard from "@components/misc/LinkCard.astro"

最近検索周りの勉強を初めました。今回はOSSの検索エンジンであるVespaの環境をMac上に構築して動かしてみたいと思います。

Vespaのインストール

以下のQuick Startに従ってインストールを進めます。

Deploy an application locally | Vespa. Big data. Real time. Open source.

必要なスペックを満たしているか確認

Dockerに割り当てられているメモリを確認します。Vespaを動かすには最低4GBのメモリが必要らしいです。

$ docker info | grep "Total Memory"
 Total Memory: 3.842GiB

3.842GiB...。GB単位に直すとギリギリ4GB超えてるので大丈夫なはず。

vespa-cliのインストール

Vespaのコマンドラインツールをインストールします。Macではhomebrewで簡単にインストールできます。

$ brew install vespa-cli

Vespaの初期設定

今回はローカル上に環境を構築するためtargetをローカルに設定します。ヘルプを見た感じデフォルトでlocalに設定されてそうでしたが、公式のQuick Startに書いてあったので一応実行しておきます。

$ vespa config set target local

VespaのDockerコンテナを起動

VespaのDockerコンテナを起動させます。

$ docker run --detach --name vespa --hostname vespa-container \
  --publish 8080:8080 --publish 19071:19071 \
  vespaengine/vespa

これでVespaを使う下準備ができました。Vespaが正常に起動できているか確認します。以下のように表示されたらOKです。

$ vespa status deploy --wait 300
Waiting up to 5m0s for deploy service to become available ...
Deploy API at http://127.0.0.1:19071 is ready

サンプルアプリケーションを動かしてみる

Vespaのサンプルアプリケーションを動かしてみます。

サンプルアプリのクローン

サンプルアプリケーションはGitHubの以下のリポジトリで管理されています。

vespa cloneコマンドを使えば上記リポジトリの特定のサンプルアプリをローカルにクローンすることができます。

$ vespa clone <サンプルアプリのパス> <ローカルのクローン先のパス>

今回はQuick Startに従ってalbum-recommendationというサンプルアプリをクローンします。

$ vespa clone album-recommendation myapp

myappというディレクトリに無事クローンされました。

$ ls myapp/
README.md	ext		schemas		services.xml	tests

サンプリアプリのデプロイ

クローンしてきたalbum-recommendationをVespaにデプロイします。コマンドを実行して以下のような表示になれば成功です。

$ cd myapp
$ vespa deploy --wait 300
Uploading application package ... done

Success: Deployed .

Waiting up to 5m0s for query service to become available ...

デプロイが成功すると、Vespaに以下のスキーマが反映されます。

sample-apps/album-recommendation/app/schemas/music.sd at master · vespa-engine/sample-apps · GitHub

サンプルデータのフィード

サンプルデータをフィードします。成功すると以下のようにSuccessと表示されます。

$ vespa document ext/A-Head-Full-of-Dreams.json && \
  vespa document ext/Love-Is-Here-To-Stay.json && \
  vespa document ext/Hardwired...To-Self-Destruct.json
Success: put id:mynamespace:music::a-head-full-of-dreams
Success: put id:mynamespace:music::love-id-here-to-stay
Success: put id:mynamespace:music::hardwired-to-self-destruct

これでVespaに実際にデータを入れるところまで完了しました。

検索してみる

いよいよ検索してみます。

今回は、musicというスキーマのalbumというフィールドに、headという文言が含まれているデータを検索してみます。

$ vespa query "select * from music where album contains 'head'" language=en-US
{
    "root": {
        "id": "toplevel",
        "relevance": 1.0,
        "fields": {
            "totalCount": 1
        },
        "coverage": {
            "coverage": 100,
            "documents": 3,
            "full": true,
            "nodes": 1,
            "results": 1,
            "resultsFull": 1
        },
        "children": [
            {
                "id": "id:mynamespace:music::a-head-full-of-dreams",
                "relevance": 0.16343879032006284,
                "source": "music",
                "fields": {
                    "sddocname": "music",
                    "documentid": "id:mynamespace:music::a-head-full-of-dreams",
                    "artist": "Coldplay",
                    "album": "A Head Full of Dreams",
                    "year": 2015,
                    "category_scores": {
                        "type": "tensor<float>(cat{})",
                        "cells": {
                            "pop": 1.0,
                            "rock": 0.20000000298023224,
                            "jazz": 0.0
                        }
                    }
                }
            }
        ]
    }
}

はい、無事検索結果が取得できました。
（albumは正規化されているため、大文字/小文字を区別せず検索されます。）

参考：

Dockerコンテナ上でJavaで書いたコードを動かすまで

Tue, 03 Jan 2023 00:00:00 GMT

import LinkCard from "@components/misc/LinkCard.astro"

前回、Dockerを最低限動かす準備をしました。今回は、Docker上でJavaで書いたコードを動かすまでをやってみます。

Javaのコードを用意

まずはDocker上で動かすためのJavaのコードを用意します。今回は単純にHello Worldを出力するだけの以下のコードを使います。

public class HelloWorld {
    public static void main(String args[]) {
        System.out.println("Hello World!!");
    }
}

このJavaファイルを、Dockerfileを作成予定のディレクトリと同じディレクトリに置いておきます。

Dockerfileの作成

ベースイメージの選択

ベースイメージには無難にopenjdkあたりを選べばいいかと思ってましたが、以下を見るとopenjdkのイメージはdeprecatedになっているようでした。

openjdk - Official Image | Docker Hub

なので今回は、openjdkのイメージからの移行先の1つとして紹介されていた以下のeclipse-temurinを利用します。

eclipse-temurin - Official Image | Docker Hub

Dockerfileの記述

Dockerfileを記述します。Dockerfileにはjavaのコンパイルや実行に関する情報も記述します。

# ベースイメージにはeclipse-temurinを利用
FROM eclipse-temurin:17.0.5_8-jdk

# 作業用のディレクトリを作成
WORKDIR /work

# ローカルのHelloWorld.javaというファイルをDockerコンテナ上の作業用ディレクトリにコピー
COPY ./HelloWorld.java /work

# コンパイル
RUN javac HelloWorld.java

# 実行
CMD java HelloWorld

これで、「ローカルのHelloWorld.javaというファイルをDocker上にコピーして、コンパイルして実行する」という処理を記述したDockerfileが完成しました。

Dockerイメージの作成 & 実行

Dockerfileからjava17_helloworldという名前のDockerイメージを作成します。

$ docker build -t java17_helloworld .

作成したDockerイメージを実行します。

$ docker run java17_helloworld
Hello World!!

無事にJavaのコードがコンパイル、実行され、Hello World!!という文字が出力されました。

参考：

MacでDockerでHello Worldするまで

Mon, 02 Jan 2023 00:00:00 GMT

今更ながらDockerを使う機会が出てきたので、Hello World的なDokerfileを作って実行するまでの備忘録です。

環境

メイン機はWindowsで、MacはサブPCとして使っているので古めのスペックです。

PC : MacBook Air (13-inch, Early 2015)
OS : macOS Monterey 12.6.2
CPU : Intel Core i5 (x86)

Docker Desktopのインストール

MacにDocker Desktopをインストールしていきます。homebrewでもインストールできるようですが、とりあえずは公式ドキュメントに従ってインストールしていきます。（今回はDocker DesktopのGUIは使いませんが、一緒にDockerの実行環境もインストールできるので）

私の使っているMacはIntelのCPU搭載のものなので、以下公式ドキュメントの「Mac with Intel chip」ボタンからDocker.dmgをダウンロード、インストールするだけです。

Install Docker Desktop on Mac | Docker Docs

インストールしたDockerアプリを起動すると利用条件的なことが書いた画面が表示されますが、今回は個人利用が目的で無償利用できる範囲内なので「accept」ボタンを押します。

これでインストールは完了です。

Dokerfileの作成

Dockerfileというファイル名のテキストファイルを作成します。とりあえず最小限の以下の内容を記述します。

# 必須項目。ベースとなるイメージ。今回はubuntuの20.04を選択
FROM ubuntu:20.04

# コンテナ起動後に実行するコマンド
CMD echo "Hello World!!"

今回はベースのイメージにはubuntuを利用します。

ubuntu - Official Image | Docker Hub

イメージの作成

作成したDokerfileを以下のコマンドでビルドします。

# カレントディレクトリのDockerfileからhelloworldという名前のイメージを作成する
$ docker build -t helloworld .

イメージ一覧を表示して、イメージが作成されていることを確認します。

$ docker images
REPOSITORY          TAG       IMAGE ID       CREATED        SIZE
helloworld          latest    bdc0073740d3   3 weeks ago    72.8MB

コンテナの作成

作成したイメージからコンテナを作成します。

# helloworldというイメージからecho_helloworldというコンテナを作成する
$ docker create --name echo_helloworld helloworld

コンテナ一覧を表示して、コンテナが作成されていることを確認します。

# -aオプションをつけることで、実行中のコンテナだけでなくすべてのコンテナを表示できる
$ docker container ls -a
CONTAINER ID   IMAGE        COMMAND                   CREATED         STATUS    PORTS     NAMES
7eaa2f8e2ec5   helloworld   "/bin/sh -c 'echo \"H…"   8 seconds ago   Created             echo_helloworld

コンテナの実行

作成したコンテナを実行します。

$ docker start -a echo_helloworld
Hello World!!

参考：

Chromeのクロスドメイン制約を一時的に無効にする方法

Tue, 21 Dec 2021 00:00:00 GMT

ローカルでWebサービスとかを開発していると、フロントエンド(FE)とバックエンド(BE)で別々のポートを使いたいことが結構あります。

ただ、単純に別々のポートを使ってしまうと、クロスドメイン制約に引っかかってしまうため、FEからBEへのAPIコールがブロックされてCORSエラーが出てしまいます。

Proxyサーバをローカルに立てれば回避できますが、ローカル環境での開発でそこまで面倒なことしたくなかったので、Chromeのクロスドメイン制約を無効化することにしました。

Chrome全体のクロスドメイン制約を無効化してしまうのはセキュリティ的に流石にあれなので、一時的に無効化した状態でChromeを立ち上げる方法を備忘録として残しておきます。

なお、動作確認をした環境はWindows10とChromeのバージョン96.0.4664.110になります。

発生した問題

フロントエンドで4200ポート、バックエンドで8080ポートを利用して何も考えずにChromeで動作させようとすると、developer toolのconsole上にこんな感じでCORSエラーが表示されて、アクセスがブロックされてしまいます。

Access to XMLHttpRequest at 'http://localhost:8080/' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

解決方法

クロスドメイン制約を一時的に無効にした状態でChromeを立ち上げます。

コマンドプロンプトを起動して、以下のように叩けばクロスドメイン制約を無効化したChromeのウィンドウを起動できます。

<chrome.exeのパス> --disable-web-security --user-data-dir=<適当なディレクトリ>

例えば、自分の環境だとこんな感じでコマンドを叩けば無効化したウィンドウを起動できます。

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:\chromeTemp"

なお当然ですが、セキュリティ的な観点で、クロスドメイン制約を無効化したChromeウィンドウでは開発してるWebサービス以外は開かないようにしましょう。

参考：

Run Chrome browser without CORS

JavaCVを使って開発したアプリのJARファイルサイズを小さくする

Sun, 07 Nov 2021 00:00:00 GMT

import LinkCard from "@components/misc/LinkCard.astro"

JavaCVを使って画像処理のコードを書きました。作成したアプリをPaaSで動かしたかったので依存関係全部入りのfat JARを作ったのですが、大したアプリではないのにJARのファイルサイズがとても大きくなってしまったので、ファイルサイズの削減を試みます。

fat JARの作成方法から知りたい場合は↓の記事をご参照ください。

もともとのJARファイルサイズ

もともとのbuild.gradleには、JavaCVのREADMEにしたがって↓のように依存関係を記述していました。

GitHub - bytedeco/javacv: Java interface to OpenCV, FFmpeg, and more · GitHub

dependencies {
    implementation group: 'org.bytedeco', name: 'javacv-platform', version: '1.5.6'
}

すると生成されたJARファイルのサイズは779Mとなり、とても大きいものになりました。

$ ls -lh build/libs/javacv_url_image_loader-1.0-SNAPSHOT-all.jar
-rw-r--r-- 1 user  staff   779M Nov  7 07:17 build/libs/javacv_url_image_loader-1.0-SNAPSHOT-all.jar

こんなに大きいとPaaSへのデプロイに無駄に時間がかかってあれなので、JARファイルのサイズ削減してみました。

JARファイルのサイズ削減

今回はOpenCVをJavaで使いたくてJavaCVを利用しました。

JavaCVはOpenCV以外のライブラリも色々とラップしているので、方針としては使っていないライブラリは極力依存関係に含めないようにしたいと思います。

結論だけ先に書いておくと、おすすめは方法3です。

方法1：不要なライブラリを依存関係から除外するパターン

依存関係にjavacv-platformを単純に指定しただけではOpenCV以外の諸々のライブラリも含まれてしまうので、↓のように使っていないライブラリを明示的に指定して、依存関係に追加しないようにしてしまいます。

dependencies {
    implementation group: 'org.bytedeco', name: 'javacv-platform', version: '1.5.6', {
        exclude module: 'ffmpeg-platform'
        exclude module: 'flycapture-platform'
        exclude module: 'libdc1394-platform'
    }
}

とりあえず↑の3つだけ除外してJARファイルを作ってみると、ファイルサイズは606Mまで削減できました。

$ ls -lh build/libs/javacv_url_image_loader-1.0-SNAPSHOT-all.jar
-rw-r--r-- 1 user  staff   606M Nov  7 07:35 build/libs/javacv_url_image_loader-1.0-SNAPSHOT-all.jar

方法2：必要なライブラリのみ依存関係に追加するパターン

頑張って使ってないもの全部除外するのは面倒なので、はじめからOpenCV部分だけ依存関係に追加すればいいんじゃない？と思ってやったのがこれになります。

dependencies {
    implementation group: 'org.bytedeco', name: 'opencv-platform', version: '4.5.3-1.5.6'
}

↓のpom.xmlを見てjavacv-platformの依存関係を調べて、opencv-platformだけあれば大丈夫そうだなと思ってこの方法試してみて、実際動作的には問題ありませんでした。

javacv/platform/pom.xml at release · bytedeco/javacv · GitHub

結果としてはJARファイルのサイズを464Mまで削減することができました。

$ ls -lh build/libs/javacv_url_image_loader-1.0-SNAPSHOT-all.jar
-rw-r--r-- 1 user  staff   464M Nov  7 07:40 build/libs/javacv_url_image_loader-1.0-SNAPSHOT-all.jar

方法3：必要なライブラリのみ依存関係に追加するパターンその2

方法2でOpenCV以外の依存関係は除外することに成功しました。

ただ、方法2で依存関係に追加したopencv-platformはWindows、macOS、Linux、Android、iOSといったあらゆる環境で動作するように、各環境向けのライブラリファイルも含まれています。

今回作ったアプリは

開発環境はMacまたはWindows、本番環境はLinux
開発環境も本番環境も64ビット版OSで動作

といった前提なので、AndroidやiOS、armやx86環境向けの諸々は依存関係に含めなくても良さそうです。

なので必要な環境向けの依存関係のみ記述してやります。

dependencies {
    implementation group: 'org.bytedeco', name: 'opencv', version: '4.5.3-1.5.6'
    implementation group: 'org.bytedeco', name: 'opencv', version: '4.5.3-1.5.6', classifier: 'linux-x86_64'
   implementation group: 'org.bytedeco', name: 'opencv', version: '4.5.3-1.5.6', classifier: 'macosx-x86_64'
    implementation group: 'org.bytedeco', name: 'opencv', version: '4.5.3-1.5.6', classifier: 'windows-x86_64'
    implementation group: 'org.bytedeco', name: 'openblas-platform', version: '0.3.17-1.5.6'
}

これはopencv-platformのpom.xmlの依存関係を見て、必要な環境向けの依存関係だけ抜き出してきたものになります。

javacpp-presets/opencv/platform/pom.xml at release · bytedeco/javacpp-presets · GitHub

上記pom.xmlではclassifierの部分は変数化されていますが、大本はここに定義してあります。

javacpp-presets/pom.xml at release · bytedeco/javacpp-presets · GitHub

この状態でJARを作ると、204Mまでサイズダウンできました。

$ ls -lh build/libs/javacv_url_image_loader-1.0-SNAPSHOT-all.jar
-rw-r--r-- 1 user  staff   204M Nov  7 08:52 build/libs/javacv_url_image_loader-1.0-SNAPSHOT-all.jar

これでもともとのファイルサイズの1/4強までサイズを削減することに成功しました。

方法4：必要なライブラリのみ依存関係に追加するパターン番外編

基本は方法3と同じで真新しいものはないので番外編としています。

更に依存関係を細かく整理して、さらなるサイズ削減を目指してみます。あまり細かくすると新しい環境に対応したい場合の保守コストが上がるので、個人的には方法3くらいまでで妥協できるならしておくのがいいと思います。

さて、方法3で依存関係にopenblas-platformを含めていましたが、実はこれも各環境向けのライブラリファイルが含まれています。openblas-platformの依存に入っているjavacpp-platformも各環境向けのライブラリが存在します。

といったように、依存関係を下れるだけ下って必要最低限のものだけ追加するようにしてみたら、↓のような感じになりました。

dependencies {
    implementation group: 'org.bytedeco', name: 'opencv', version: '4.5.3-1.5.6'
    implementation group: 'org.bytedeco', name: 'opencv', version: '4.5.3-1.5.6', classifier: 'linux-x86_64'
    implementation group: 'org.bytedeco', name: 'opencv', version: '4.5.3-1.5.6', classifier: 'macosx-x86_64'
    implementation group: 'org.bytedeco', name: 'opencv', version: '4.5.3-1.5.6', classifier: 'windows-x86_64'
    implementation group: 'org.bytedeco', name: 'openblas', version: '0.3.17-1.5.6'
    implementation group: 'org.bytedeco', name: 'openblas', version: '0.3.17-1.5.6', classifier: 'linux-x86_64'
    implementation group: 'org.bytedeco', name: 'openblas', version: '0.3.17-1.5.6', classifier: 'macosx-x86_64'
    implementation group: 'org.bytedeco', name: 'openblas', version: '0.3.17-1.5.6', classifier: 'windows-x86_64'
    implementation group: 'org.bytedeco', name: 'javacpp', version: '1.5.6'
    implementation group: 'org.bytedeco', name: 'javacpp', version: '1.5.6', classifier: 'linux-x86_64'
    implementation group: 'org.bytedeco', name: 'javacpp', version: '1.5.6', classifier: 'macosx-x86_64'
    implementation group: 'org.bytedeco', name: 'javacpp', version: '1.5.6', classifier: 'windows-x86_64'
}

これでJARファイルを作成すると136Mまでファイルサイズが減りました。

$ ls -lh build/libs/javacv_url_image_loader-1.0-SNAPSHOT-all.jar
-rw-r--r-- 1 user  staff   136M Nov  7 09:22 build/libs/javacv_url_image_loader-1.0-SNAPSHOT-all.jar

最終的に当初のJARのファイルサイズの1/5以下までファイルサイズを削減することができました。これでJARファイルの生成とかデプロイがかなり高速化できました。

蛇足ですが、今回はmacOS、Windows、Linuxの3種類のOSで動作するようにしましたが、これをさらに例えばmacOSだけで動けばいいように依存関係を絞ると40M程度までサイズダウンできます。

参考：

Huge APK file size on Android · Issue #654 · bytedeco/javacv

【Gradle】依存ライブラリをすべて含めたJAR(fat JAR)を作成する

Sun, 07 Nov 2021 00:00:00 GMT

Javaで開発したコードをPaaSとかにデプロイするためには、依存しているライブラリをすべてJARの中に含めたJAR (=far JAR)を作ってそれをデプロイしないと動きません。

新規にJavaでサービスを作ったのですが、fat JARという概念を知らずにローカルでは動くのにデプロイしたら動かないなーとなってハマってしまったので、fat JARの作り方をメモしておきます。

fat JARの作り方

build.gradleの修正

まずはbuild.gradleを修正します。build.gradleのもともとのpluginsの設定がこうなっているところに1行追加して

plugins {
    id 'java'
}

↓のようにします。build.gradleの修正はこれだけです。

plugins {
    id 'java'
    id 'com.github.johnrengelman.shadow' version '7.+'
}

追加したのはshadowというプラグインで、fat JARを簡単に作成するためのGradleプラグインです。

Shadow Gradle Plugin

なお、使用しているGradleのバージョンによってpluginsに指定するshadowのバージョンを使い分ける必要があります。

Gradleのそれぞれのバージョンに対応しているshadowのバージョンは次の通りです。自分はGradle 7.1を利用しているので、7系の最新バージョンが入るように7.+と記述しています。

Gradleのバージョン	shadowのバージョン
5.x	5.2.0 - 6.0.0
6.x	5.2.0 - 6.1.0
7.x	7.0.0以上

最新のバージョンの対応表は下記のshadowのGithubのREADMEを参照してください。

GitHub - GradleUp/shadow

fat JARを作る

さて、あとはfat JARファイルを作成するだけです。

IntelliJを使っている場合は次の画像のようにGradleのタスクの中にshadowJarというタスクが現れているはずなので、それを実行すれば依存関係全部入りのfat JARファイルを作成できます。build/libs以下にJARファイルが生成されているはずです。

IDEでなくコマンドで実行したい場合は以下のコマンドで作成できます。

$ ./gradlew shadowJar

確認

最後に、本当に依存関係が含まれたJARができたのか確認してみます。

まずは生成されたJARファイルの確認です。ファイルサイズが大きいので色々含まれていそうです。

$ ls -lh build/libs/javacv_url_image_loader-1.0-SNAPSHOT-all.jar
-rw-r--r-- 1 user  staff   779M Nov  7 03:49 build/libs/javacv_url_image_loader-1.0-SNAPSHOT-all.jar

なお今回はJavaCVというどでかいライブラリを使ったのでこんなに大きなJARになりましたが、大体はもっと小さいと思います。

もうちょっとちゃんと確認したいので、JARファイルの中身を確認してみます。

$ jar tf build/libs/javacv_url_image_loader-1.0-SNAPSHOT-all.jar
META-INF/
...
org/bytedeco/javacv/
...

無事依存ライブラリの情報が作成したJARに含まれていました。

これでローカル環境以外でも動く依存関係全部入りのfat JARファイルを作成できるようになりました。

参考：

Gradle: 依存ライブラリ入りのjarを作る #gradle - Qiita

URL上の画像をJavaCV (OpenCV)で読み込む

Sat, 06 Nov 2021 00:00:00 GMT

JavaでOpenCVを使う必要があったので、JavaのラッパーライブラリであるJavaCVを利用してみました。

GitHub - bytedeco/javacv: Java interface to OpenCV, FFmpeg, and more · GitHub

その際に、URL上の画像を読み込んで加工するのに少々ハマったので、その対応メモです。

やりたいこと

URL上の画像パスから画像をMat型で読み込んで、OpenCVで加工したいのです。

ハマったポイント

URLから画像を読み込む機能はOpenCVにはなさそうだったので、JavaのImageIOクラスを使ってURLから画像を読み込んで、それをOpenCVのMatに変換してやろうと思いました。

当初はImageIOクラスで読み込んだ画像データはint配列として取り出せるので、それをバイト配列に変換してからOpenCVのMatで読み込めばいけるだろうと思ったんですが、こんな感じでなんだか色味がおかしくなってしまいました。

ちなみに元画像は↓のOpenCVのサンプル画像を利用させてもらってます。

https://raw.githubusercontent.com/opencv/opencv/4.x/samples/data/fruits.jpg

どうせBGRとして読み込むべきところをRGBとして読み込んじゃってるとかそんなんだろうと思ってcvtColorで変換かけてみましたが、赤っぽくなるだけで元画像と同じ色味にはなりませんでした。

原因

原因は、ImageIOクラスから取り出したint配列はARGBの順で並んでいるため、その順のままMatに変換してしまうとおかしな色になってしまうことにあります。

なので、この問題を解決するためには、ARGBの並び順をMatで読みこめるBGRAの順に並び変えないといけないです。

そういった変換にはcvtColorを使いたいところですが、残念ながらOpenCVにはARGBをBGRAなどに変換する処理は実装されていません。

そのため、ARGBからBGRAに変換する部分は自前で実装する必要があります。

実装

上記のARGBからBGRAに変換する部分を自前実装して、URLから画像を読み込んでMat型に格納するサンプルコードがこちらになります。

public class Sample {
    public static void main(String[] args) throws IOException {
        // URLから画像を取得
        URL url = new URL("https://raw.githubusercontent.com/opencv/opencv/4.x/samples/data/fruits.jpg");
        BufferedImage bufferedImage = ImageIO.read(url);

        // 各画素のARGB色情報を抽出
        // intは4byteなので、各byteがそれぞれARGBの各要素に対応している
        int[] argbArray = bufferedImage.getRGB(0, 0, bufferedImage.getWidth(), bufferedImage.getHeight(), null, 0, bufferedImage.getWidth());

        // int配列をbyte配列に変換する
        // その際、Mat型で読み込めるようにARGBの並びをBGRAに変換する
        byte[] bgraArray = new byte[argbArray.length * 4];
        for (int i = 0; i < argbArray.length; i++) {
            bgraArray[i * 4 + 0] = (byte) ((argbArray[i] >> 0) & 0xFF); // B
            bgraArray[i * 4 + 1] = (byte) ((argbArray[i] >> 8) & 0xFF); // G
            bgraArray[i * 4 + 2] = (byte) ((argbArray[i] >> 16) & 0xFF); // R
            bgraArray[i * 4 + 3] = (byte) ((argbArray[i] >> 24) & 0xFF); // A
        }

        // Mat型として読み込み
        Mat image = new Mat(bufferedImage.getHeight(), bufferedImage.getWidth(), CV_8UC4, new BytePointer(bgraArray));
        imwrite("result.jpg", image);
    }
}

上記コードを実行すると、無事元画像と同じものがresult.jpgとして保存されます。

参考

How to convert between Mat and byte[] · Issue #888 · bytedeco/javacv

Android/iOSアプリ「英語多読記録簿」をリリースしました

Tue, 08 Jun 2021 00:00:00 GMT

import img1 from "./Screenshot_20210605-070216-513x1024.png" import img2 from "./Screenshot_20210605-070257-513x1024.png" import img3 from "./Screenshot_20210522-225326-512x1024.png" import img4 from "Screenshot_20210609-024204-1-513x1024.png"

最近アプリ開発周りの勉強をしていて、先日「英語多読記録簿」というアプリをリリースしたためその紹介です。

作ったアプリ

英語多読記録簿というアプリを作りました。多読の記録を管理するためのアプリです。

<div style="display: flex; align-items: center; gap: 16px; margin-bottom: 12px;"> <img src="/images/english_icon.png" alt="英語多読記録簿" style="width: 140px; height: auto; border-radius: 18px;" /> <div> <div style="font-size: 1.2rem; font-weight: bold; line-height: 1.2;">英語多読記録簿</div> <div style="font-size: 0.85rem; margin-top: 4px; color: #555;">Naoyuki Maeda</div> <div style="display: flex; gap: 12px; align-items: center;"> <a href="https://play.google.com/store/apps/details?id=com.memarchive.readingrecorder" target="_blank" style="display: inline-block;"> <img src="/images/GetItOnGooglePlay_Badge_Print_color_Japanese.svg" alt="Google Playで手に入れよう" style="height: 34px; width: auto; pointer-events: none; vertical-align: middle;" /> </a> <a href="https://apps.apple.com/jp/app/%E8%8B%B1%E8%AA%9E%E5%A4%9A%E8%AA%AD%E8%A8%98%E9%8C%B2%E7%B0%BF/id1570141184?itscg=30200&itsct=apps_box_badge&mttnsubad=1570141184" target="_blank" style="display: inline-block;"> <img src="https://toolbox.marketingtools.apple.com/api/v2/badges/download-on-the-app-store/black/ja-jp?releaseDate=1622937600" alt="App Storeでダウンロード" style="height: 34px; width: auto; pointer-events: none; vertical-align: middle;" /> </a> </div> </div> </div>

作ろうと思った背景

端的に言うと、多読の記録をするためにちょうどいい手軽なアプリが見つからなかったからです。

いろいろあって英語をちゃんと勉強しようと思い立って、前々から興味のあった多読をやってみようと思いました。

ただ、累計でどのくらいの語数を読んだのかを記録するちょうどいいアプリがPlay StoreにもApple Storeにも見つかりませんでした。

流石にExcelで記録していくのは嫌だったので、まずはアプリを作るところから始めよう、という考えになりました。アプリ開発にも前から興味ありましたし、やってみるかーと一念発起しました。

英語多読記録簿の機能紹介

読んだ本の記録

はい、当然ですが読んだ本とその語数を記録することができます。

入力項目は本のタイトルと語数、読み終わった日です。

ただ、都度自分で本のタイトルとか語数を入力するのは面倒です。なので、多読の定番の本はリストから選択できるようにしています。

今まで読んだ本の累計語数と目標達成率の可視化

今までに読んだ本の語数の累計をホーム画面で確認できます。

また、目標の語数を設定しておくと、今までの累計語数が目標の何パーセントに達しているかを一目で確認できます。

過去に読んだ語数をグラフで確認

過去にどれくらいの語数を読んだのかを、時系列グラフで直感的に確認できます。

多読を続けていくと徐々に読める語数が増えるので、グラフが右肩上がりになるとテンション上がりますね。

今後の開発予定

途中で飽きて開発を投げ出しちゃわないように、現在は最低限の機能に絞って開発してリリースした状態です。

無事リリースする段階まではこぎつけたので、これからどんどん機能拡張していく予定です。

今後リリース予定の機能を紹介します。

データの引継ぎ機能

英語多読記録簿にはデータの引継ぎがないので、今のままだと機種変更時にデータの移行ができません。

多読は長期間続けることに意味があって、その期間に機種変更することもあると思うので、機種変更時にデータの移行ができる機能を開発予定です。

定番の本の拡充

定番の本では今のところ「ラダーシリーズ」と「ステップラダーシリーズ」の本しか選択できないため、リストから選べる本をさらに追加する予定です。

SNSへの共有機能

Twitterとかに自分の多読状況を投稿できた方がモチベーションが上がりそうなので、共有機能を開発予定です。

→ バージョン1.3.0で実装しました

最後に

自分のために作ったアプリですが、多読をやってる方、今からやろうとしている方、ぜひ英語多読記録簿アプリを使ってみてください。

フィードバックを頂けると泣いて喜びます。フィードバックは以下3つのどれかで頂けると見落とす可能性が低いです。

Play Store / App Storeでのレビュー
本ブログ記事のコメント
TwitterのメンションとかDM

個人開発が楽しくて肝心の多読の進捗がいまいちなので、多読も頑張るぞ。

【Golang】GitHub上のprivateリポジトリをimportする

Fri, 01 Jan 2021 00:00:00 GMT

import LinkCard from "@components/misc/LinkCard.astro"

Go言語で書いたコードをprivateリポジトリに置いてて、そのコードを他のリポジトリから呼び出すためのメモです。

やりたいこと

GitHubのprivateリポジトリにGo言語で書いたライブラリを置いていました。

このライブラリのリポジトリを、publicに変えることなくprivateのままimportして使いたいのです。

単純にimportしようとしたらエラーになる

こんな感じでprivateリポジトリのライブラリをimportしようとしたら

package main

import (
	"github.com/<ユーザ名>/golang-lib"
)

...

こんなエラーが表示されてビルドに失敗しました。

$ go build ../src/main.go                                                                                                                                                                                                                                  [master] 
go: finding module for package github.com/<ユーザ名>/golang-lib
../src/main.go:7:2: cannot find module providing package github.com/<ユーザ名>/golang-lib: module github.com/<ユーザ名>/golang-lib: git ls-remote -q origin in /home/user/go/pkg/mod/cache/vcs/588e0f756a53aa1a73372233db9fe1a5389215117dfbe15996c0de76f955b419: exit status 128:
        fatal: could not read Username for 'https://github.com': terminal prompts disabled
Confirm the import path was entered correctly.
If this is a private repository, see https://golang.org/doc/faq#git_https for additional information.

解決方法

エラーメッセージの「privateリポジトリの場合はここを見な！」みたいなメッセージとともに表示された以下のリンクを覗いてみます。

ここでは解決方法として、

~/.netrcにGitHubのアカウント名とAPIのアクセストークンを書いて認証を突破する方法
GitHubに登録してるsshの鍵を利用して認証を突破する方法

の2つが紹介されていました。

今回は後者の方法を試してみます。
なお、当然ながらこの方法の場合、事前にGitHubに鍵を登録しておく必要があります。

~/.gitconfigに以下の設定を追加します。

[url "ssh://git@github.com/"]
	insteadOf = https://github.com/

これで再度ビルドしてみます。

$ go build ../src/main.go
go: downloading github.com/<ユーザ名>/golang-lib v0.0.0-20201229201758-0ee219d61b2f
../src/main.go:7:2: github.com/<ユーザ名>/golang-lib@v0.0.0-20201229201758-0ee219d61b2f: verifying module: github.com/<ユーザ名>/golang-lib@v0.0.0-20201229201758-0ee219d61b2f: reading https://sum.golang.org/lookup/github.com/<ユーザ名>/golang-lib@v0.0.0-20201229201758-0ee219d61b2f: 410 Gone
        server response:
        not found: github.com/<ユーザ名>/golang-lib@v0.0.0-20201229201758-0ee219d61b2f: invalid version: git fetch -f origin refs/heads/*:refs/heads/* refs/tags/*:refs/tags/* in /tmp/gopath/pkg/mod/cache/vcs/588e0f756a53aa1a73372233db9fe1a5389215117dfbe15996c0de76f955b419: exit status 128:
                fatal: could not read Username for 'https://github.com': terminal prompts disabled

何やらさっきとは違うエラーが表示されてまたビルドがコケました。

エラーメッセージでいろいろと調べてみると、どうやらGo言語のバージョン1.3以降はGOPRIVATEという環境変数を設定する必要がありそうです。

なので、↓のような感じで、参照したいprivateリポジトリのパスを設定してやります。

export GOPRIVATE="github.com/<ユーザ名>/golang-lib"

これで無事にビルドが成功しました。

参考：

git - How to fix "invalid version" and "could not read Username" in "go get" of a private repository? - Stack Overflow

Visual StudioのMSB8036エラーの解決方法

Sat, 12 Dec 2020 00:00:00 GMT

Juliusという音声認識ライブラリをビルドしたかったのですが、ビルドしてみたらMSB8036エラーが出てちょっとはまったので、対応方法を記録として残しておきます。

環境

Windows 10
Visual Studio 2019

Visual Studio 2019でビルドしたらMSB8036エラーが出た

msvc > Julius.slnがVisual Studio用のソリューションファイルなので、こいつを開いてビルドすれば完了！といけばよかったのですが、以下のエラーがいっぱい出てきました。

MSB8036	Windows SDK バージョン 10.0.17134.0 が見つかりませんでした。必要なバージョンの Windows SDK をインストールするか、プロジェクト プロパティ ページで SDK バージョンを変更するか、ソリューションを右クリックして [ソリューションの再ターゲット] を選択してください。

解決方法

必要なWindows SDKのバージョンが足りないよ！！って言われてるみたいなので、インストールしてやればうまく動きそうです。なのでインストールを進めていきます。

Visual Studioインストール用のexeファイルを実行します。大抵はC:\Program Files (x86)\Microsoft Visual Studio\Installer\setup.exeにあると思います。

実行すると以下のような画面が出てくると思うので、「変更」ボタンをクリックします。

個別コンポーネントタブで各種Windows SDKのバージョンを選ぶことができるので、見つからないよ！と怒られてる10.0.17134.0のバージョンを選択してインストールします。

インストール後に再度ビルドを行うとMSB8036エラーは無事解消されました。

Google TestのASSERT_EQとEXPECT_EQの違い

Sun, 14 Jun 2020 00:00:00 GMT

普段C++のユニットテストはGoogle Testを使って書くことが多いのですが、ちょっと時間が空くと諸々仕様忘れて同じこと何回も調べなおしてる気がするので、自分がちょいちょいハマる仕様を順次残していこうかと思います。

ASSERT_とEXPECT_の違い

Google Testでは2つの値を比較する方法に、ASSERT_*を使う方法とEXPECT_*を使う方法の2種類あります。この2つの違いをまとめていきます。

ASSERT_*

ASSERT_*は比較結果が意図しないものの場合、そのテストはそこで強制終了してしまいます。

文章で説明するより、コメント付きのコードを示した方がわかりやすいので、以下にサンプルコードを貼っておきます。

#include <gtest/gtest.h>

TEST(SampleTest, assertTest) {
	// ASSERT_*はこけたらそこで強制終了する
	ASSERT_FALSE(true);  // この比較でこけるのでここでこのテストを強制終了する
	ASSERT_TRUE(true);   // ↑で強制終了されるのでこの比較は実行されない
}

つまり、ASSERT_*を利用してテストが途中でこけると、最後までテスト内容を実行しません。

EXPECT_*

EXPECT_*は比較結果が意図しないものでも、強制終了させずに最後までテストを実行します。

以下、サンプルコードです。

#include <gtest/gtest.h>

TEST(SampleTest, expectTest) {
	// EXPECT_*はこけても最後まで処理は走る
	EXPECT_FALSE(true);  // この比較はこけるけど強制終了はしない
	EXPECT_TRUE(true);   // ↑で強制終了されないのでこの比較も実行される
}

つまり、EXPECT_*を使うと基本的には最後までテストを実行します。

使い分け

2つの違いはわかったものの、ではASSERT_*とEXPECT_*のどちらを使うべきなのでしょうか。

公式ドキュメント的には、通常はEXPECT_*を使うことが推奨されています。一度のテスト実行で複数のバグを見つけることが可能だからです。

一方で、ある比較が失敗したときに、後続の処理を行っても意味のないようなときは、ASSERT_*を使う方が良いようです。

結局のメリデメを知った上で状況によって使い分けましょうということですね。

参考：

lsyncd 2.1で特定のファイルのみを同期させる

Mon, 09 Mar 2020 00:00:00 GMT

import LinkCard from "@components/misc/LinkCard.astro"

lsyncdで特定のファイルだけを同期したかったのですが、lsyncdはバージョン2.1未満と2.1以上で使い方が違ってはまったのでその対応メモです。

lsyncdの導入方法はこちら。

バージョン2.1ではrsyncOpsが廃止された

lsyncd 2.0系では、rsyncOpsオプションの--exclude-fromを上手く使うことで、ディレクトリ単位ではなく、特定のファイルのみを同期させることができました。

しかし、このrsyncOpsオプションはlsyncd 2.1で廃止され、代わりにrsyncオプションに名前を変えました。

そのため、従来のrsyncOpsを設定するとlsyncdを起動できず、systemctlのstatusを確認すると以下のようなエラーが表示されます。

$ sudo systemctl status lsyncd
...
 3月 09 03:44:11 Virtual-Machine systemd[1]: Starting LSB: lsyncd daemon init script... 
 3月 09 03:44:11 Virtual-Machine lsyncd[12476]:  * Starting synchronization daemon lsyncd
 3月 09 03:44:11 Virtual-Machine lsyncd[12476]: Error: error preparing /etc/lsyncd/lsyncd.conf.lua: Parameter "rsyncOps" unknown. (if this is not a typo add it to checkgauge)
 3月 09 03:44:11 Virtual-Machine lsyncd[12476]:    ...fail!

参考：

lsyncd/ChangeLog at master · lsyncd/lsyncd · GitHub

バージョン2.1では代わりに_extraオプションを使う

lsyncd 2.1系ではrsyncオプション内の_extraオプションを使って特定のファイルのみを同期させることができます。

この_extraオプション内に--includeと--excludeを指定してやることで、同期対象のファイル、同期対象外のファイルを設定することができます。

ですので、以下のように書くとhoge.txtのみが同期され、その他のファイルは同期されなくなり、特定のファイルのみの同期を実現できます。

$ cat /etc/lsyncd/lsyncd.conf.lua
settings {
        logfile    = "/tmp/lsyncd.log",
        statusFile = "/tmp/lsyncd.status"
}
sync {
        default.rsync,
        source    = "/home/user/lsyncd_test/src/",
        target    = "/home/user/lsyncd_test/dst/",
        rsync     = {
          _extra    = {
            "--include=hoge.txt",
            "--exclude=*"
          }
        }
}

参考：

macos - Is it possible to sync just ONE file with lsyncd? - Stack Overflow

Ubuntuにlsyncdを導入する

Sun, 08 Mar 2020 00:00:00 GMT

ディレクトリのリアルタイム同期をしたかったのでUbuntu 18.04 LTSにlsyncdを導入しました。その時の手順メモです。

lsyncdのインストール

まずはlsyncdをインストールします。これはaptコマンド一発で入ります。

$ sudo apt install lsyncd

設定ファイルを作成

同期周りの設定ファイルを作成します。デフォルトだと設定ファイルのパスはは/etc/lsyncd/lsyncd.conf.luaになっているため、この名前のファイルを作成します。

もし設定ファイル名やファイルパスを変えたい場合は、/etc/init.d/lsyncdの以下の部分を修正すればファイル名、ファイルパスを変えることができます多分(やったことはないです)。

CONFIG=/etc/lsyncd/lsyncd.conf.lua

設定ファイルはとりあえず最低限の項目のみを作成します。

$ sudo mkdir /etc/lsyncd

$ sudo vim /etc/lsyncd/lsyncd.conf.lua
settings {
        logfile    = "/tmp/lsyncd.log",
        statusFile = "/tmp/lsyncd.status"
}
sync {
        default.rsync,
        source    = "/home/user/lsyncd_test/src/",
        target    = "/home/user/lsyncd_test/dst/"
}

lsyncdの起動

lsyncdのプロセスを起動します。

$ sudo systemctl start lsyncd

ログの確認

lsyncdのログを確認してみます。以下のようなログが出ていれば同期に成功しています。

$ cat /tmp/lsyncd.log
Sun Mar  8 05:57:38 2020 Normal: recursive startup rsync: /home/user/lsyncd_test/src/ -> /home/user/lsyncd_test/dst/
Sun Mar  8 05:57:38 2020 Normal: Startup of "/home/user/lsyncd_test/src/" finished.

psコマンドでプロセスが起動してるかも確認してみます。以下のようなプロセスがあれば無事起動しています。

$ ps aux | grep lsyncd | grep -v grep
root     12600  0.0  0.0  12932  2072 ?        SNs  03:53   0:00 /usr/bin/lsyncd -pidfile /var/run/lsyncd.pid /etc/lsyncd/lsyncd.conf.lua

もし起動してない場合は

$ sudo systemctl status lsyncd

でlsyncdのステータスを確認してみましょう。

参考：

Ubuntu 18.04 : Lsync の設定 : Server World

【MySQL】新規DBを作成してデータを登録するまで

Tue, 25 Feb 2020 00:00:00 GMT

普段MySQLをあまり弄らないので、たまに弄ろうとすると毎回各種コマンド忘れて無駄に時間取られるので、新規DBを作成してそこにデータを挿入するまでの手順をメモしておきます。

MySQLへ接続

何はともあれまずはMySQLに接続します。これでrootユーザとして接続できます。

$ mysql -u root -p

新規DBの作成

DB作成前の状態

DB作成前の状態を確認しておきます。

mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| sys                |
+--------------------+
4 rows in set (0.01 sec)

4つのDBが存在しているようです。

DBの新規作成

新規DBを作成します。以下のコマンドで任意の名前のDBを作成することができます。

mysql> create database <DB名>;
Query OK, 1 row affected (0.00 sec)

DB一覧の確認

ちゃんとDBが作成されているかどうか確認してみます。DB一覧を表示して、先ほど作成したDBの名前が表示されたら問題なく作成されています。

mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| <DB名>             | <- 作成したDBが存在することを確認
| sys                |
+--------------------+
5 rows in set (0.00 sec)

新規Tableの作成

作成したDBに新しいTableを追加してみます。

Table作成前の状態

まずは作成前にDBのTableを確認しておきます。当然ながら、DBを作成したばかりなのでまだTableは存在しません。

mysql> show tables from <DB名>;
Empty set (0.00 sec)

新規Table作成

新規Tableを作成します。作成は以下のコマンドで行えます。

mysql> create table <DB名>.<Table名> (<カラム名1> <型>, <カラム名2> <型>, ... );
Query OK, 0 rows affected (0.01 sec)

Table一覧の確認

もう一度Table一覧を確認してみます。作成したTable名が表示されると思います。

mysql> show tables from <DB名>;
+----------------------+
| Tables_in_<DB名>     |
+----------------------+
| <Table名>            | <- 作成したTableが存在することを確認
+----------------------+
1 row in set (0.00 sec)

カラムの確認

作成したTableのカラム名も意図したものになっているかどうか確認してみます。確認は以下のコマンドで行います。

mysql> show columns from <DB名>.<Table名>;
+--------------+--------------+------+-----+---------+-------+
| Field        | Type         | Null | Key | Default | Extra |
+--------------+--------------+------+-----+---------+-------+
| <カラム名1>  | <型1>        | YES  |     | NULL    |       |
| <カラム名2>  | <型2>        | YES  |     | NULL    |       |
+--------------+--------------+------+-----+---------+-------+
2 rows in set (0.01 sec)

データのinsert

それでは、作成したTableにデータを挿入してみます。挿入は、以下のコマンドで行うことができます。

mysql> insert into <Table名> (<カラム名1>, <カラム名2>, ... ) values ( <値1>, <値2>, ...)
Query OK, 1 row affected (0.00 sec)

なお、すべてのカラムにデータ入れる場合は、カラム名を省略することができます。その場合、カラム名を省略したこのコマンドでも同じ意味になります。

mysql> insert into <Table名> values (<値1>, <値2>, ...)
Query OK, 1 row affected (0.01 sec)

insertしたデータの確認は以下のコマンドで行います。

mysql> select * from <DB名>.<Table名>;
+-----------+--------------+
|<カラム名1>| <カラム名2>  |
+-----------+--------------+
| <値1>     | <値2>        |
+-----------+--------------+
1 rows in set (0.00 sec)

無事にデータが挿入できていることを確認できたと思います。

【Golang】Echo v4をインストールする

Mon, 24 Feb 2020 00:00:00 GMT

Go言語のWebフレームワーク、Echoを使ってみようと思ったのですが、導入に少しはまってしまったので対応メモです。なお環境は

Ubuntu 18.04 LTS (WLS)
Golang 1.13.4

となっています。

問題

Echoをインストールします。このGithubのREADMEのInstallationに従ってインストールしようとしてみます。

GitHub - labstack/echo: High performance, minimalist Go web framework · GitHub

go getしようとするとこんなエラーが表示されてしまいました。

$ go get github.com/labstack/echo/v4
package github.com/labstack/echo/v4: cannot find package "github.com/labstack/echo/v4" in any of:
        /usr/local/go/src/github.com/labstack/echo/v4 (from $GOROOT)
        /home/username/go/src/github.com/labstack/echo/v4 (from $GOPATH)

READMEじゃなくてこちらのQuick Startに従って、

Quickstart | Echo

以下のように実行すると問題なく動きましたが、この書き方だと最新のv4じゃなくてv3がインストールされるみたいです。

$ go get -u github.com/labstack/echo/...

解決策

$GOPATHじゃなくてGo Modulesの仕組みを使用するとうまくv4をインストールできるようです。Go ModulesはGo言語 1.11から導入されたみたいなので、このバージョン以上のGo言語が必要になるっぽいです。

なので、まずは$GOPATHじゃなくてGo Modulesを使用するように設定します。

$ export GO111MODULE=on

そしてgo mod initのコマンドを叩きます。example.comとgolang_echo_sampleの部分は好きなように変えてください。golang_echo_sampleの部分がビルドしたときの実行ファイルのデフォルトの名前になります。

$ go mod init example.com/golang_echo_sample

あとはEchoをimportしたソースコードを置いて、go buildを叩けば自動的にEchoのversion 4をダウンロードして使用してくれます。今回はREADMEにあるHelloWorldのサンプルコードを使用します。

package main

import (
  "net/http"
  "github.com/labstack/echo/v4" // <- Echo v4をimportしている
  "github.com/labstack/echo/v4/middleware"
)

func main() {
  // Echo instance
  e := echo.New()

  // Middleware
  e.Use(middleware.Logger())
  e.Use(middleware.Recover())

  // Routes
  e.GET("/", hello)

  // Start server
  e.Logger.Fatal(e.Start(":1323"))
}

// Handler
func hello(c echo.Context) error {
  return c.String(http.StatusOK, "Hello, World!")
}

これでbuildすると、自動的に必要な依存関係をダウンロードしてくれます。

$ go build

実行してみます。

$ ./golang_echo_sample

もう一つターミナルを起動させて、curlで動作確認してみます。

$ curl "http://localhost:1323"
Hello, World!

無事動きました。初めてGo Modules使ってみたけど楽ですねこれ。

参考：

Unable to install echo · Issue #1374 · labstack/echo

Linuxのデフォルトシェルを確認する

Wed, 19 Feb 2020 00:00:00 GMT

import LinkCard from "@components/misc/LinkCard.astro"

久しぶりにログインしたLinuxサーバで、デフォルトで使用しているシェル何だっけ？となった上に確認方法を忘れていたのでメモです。

確認方法

これで確認できます。

$ echo $SHELL
/bin/bash

参考：

現在使用されているシェルが知りたい - ITmedia エンタープライズ

デフォルトシェルの変更方法

デフォルトのシェルを変更したい場合はこちらをご覧ください。自分のおすすめはzshです。

【シェルスクリプト】$' ': command not foundと表示される原因と対処法

Sun, 09 Feb 2020 00:00:00 GMT

import LinkCard from "@components/misc/LinkCard.astro"

定期的に同じトラップにはまるので、いい加減忘れないよう備忘録です。

現象

こんな感じで絶対に動きそうなシェルスクリプトがあります。

#!/bin/bash

echo "hogehoge"

でも実際に実行してみると以下のようなよくわからないエラーが表示されます。

$ bash hoge.sh
hoge.sh: line 2: $'\r': command not found
hogehoge

2行目が原因のエラーらしいですが、そもそも2行目は空行なんですが・・・

原因

改行コードがLinuxの\nではなく、Windowsの\r\nになっていることが原因です。

Linuxだと\n単体で改行コード認定されてしまうので、\rはコマンドとみなされちゃってエラーになるみたいです。

対処法

改行コードを\r\nから\nに変換すれば無事実行できるようになります。変換はこのコマンドで実行できます。

$ dos2unix hoge.sh

このコマンドのインストール方法やそもそもの改行コードの確認法は以下の記事を参考にしてください。

変更後はエラーなくシェルスクリプトの実行できました。

$ bash hoge.sh 
hogehoge

WindowsとMacの開発者が混在しているような環境だとこういう現象稀によくあって、しかも目に見えるコードは問題ないので対処法知らないと地味に時間かかったりして地味に困る。。。

なお、シェルスクリプトだけでなくシェルスクリプトで読み込むファイルとかも改行コードが違うと動かないことがあるので気をつけましょう。

vimでファイル末尾の改行コードを保存しないようにする

Sun, 19 Jan 2020 00:00:00 GMT

vimで保存すると末尾に改行コードが入る

Linuxのvimだと、デフォルトでファイル末尾に改行コードが挿入されるようになってます。

なので、catで見たら1行しかないように見えるようなファイルでも、

$ cat hoge.txt 
hogehoge

実際には末尾に改行コードの\nが入っています。

$ od -c hoge.txt 
0000000   h   o   g   e   h   o   g   e  \n
0000011

改行コードが入らないように設定する

vimにこの設定を入れれば、ファイル末尾の改行コードが入らないようになります。

:set binary
:set noeol

この設定を入れてファイルを保存すると、ファイル末尾の改行コードが入らないようになります。

$ od -c hoge.txt
0000000   h   o   g   e   h   o   g   e
0000010

rsyncのappendオプションのせいでファイルが壊れたり転送されない件について

Sat, 18 Jan 2020 00:00:00 GMT

データのバックアップにrsyncを使ってみたのですが、appendオプションをつけたせいでファイルが壊れたり転送されなかったりしてはまったので、もうはまらないように備忘録を残しておきます。

現象

rsyncでファイルの同期をとろうと思ったのですが、一部ファイルが転送されなかったり壊れたりしました。

差分があるのにファイルが更新されないパターン

まずは差分があるのにファイルが更新されないパターンです。以下のようなファイルがあって、src/以下のファイルをdst/に転送したいです。

$ cat src/hoge.txt 
hogehoge

$ cat dst/hoge.txt 
fugafuga

この場合、append付きのrsyncのコマンドは以下のようになります。期待としては、src/hoge.txtとdst/hoge.txtが同じ内容になっていてほしいです。

$ rsync -a --append src/ dst/

実行してみました。dst/hoge.txtの内容は更新されませんでした。

$ cat dst/hoge.txt 
fugafuga

いろいろ試したところ転送前の状態が、src/hoge.txtのファイルサイズ≦dst/hoge.txtのファイルサイズの場合、差分があっても更新されないみたいです。

そもそもファイルが転送されないパターン

差分バックアップをしたかったので、上のコマンドにlink-destオプションも追加してみました。ファイルは以下のようになっています。link-destにはdst/を指定します。

$ cat src/hoge.txt 
hogehoge

$ cat dst/hoge.txt 
fugafuga

// 何も表示されない
$ ls dst2/

この場合、rsyncのコマンドは以下のようになります。期待としては、新しくdst2/hoge.txtが作成されていてほしいです。

$ rsync -a --append --link-dest=`pwd`/dst/ src/ dst2/

実行してみました。dst2/以下には何も転送されていません。

// 何も表示されない
$ ls dst2/

先ほど同様、転送前の状態がsrc/hoge.txtのファイルサイズ≦dst/hoge.txtのファイルサイズの場合、差分があっても更新されないみたいです。

ファイルが壊れるパターン

次はappendオプションをつけてファイルが壊れるパターンです。以下のようなファイルがあります。これをappendオプションをつけてrsyncで転送してみます。

$ cat src/hoge.txt
hogeeeeeee

$ cat dst/hoge.txt 
fugafuga

rsyncコマンドは以下です。src/hoge.txtの内容がdst/hoge.txtに反映されていてほしいです。

$ rsync -a --append src/ dst/

実行してみました。dst/hoge.txtが2つのファイルが混ざったようなおかしなことになりました。

$ cat dst/hoge.txt 
fugafugaee

諸々試してみた感じ、転送前の状態で次の2つの条件を満たすとこの事象は発生しました。

src/hoge.txtのファイルサイズ<dst/hoge.txtのファイルサイズ
src/hoge.txtとdst/hoge.txtの先頭数バイトの内容が異なる

原因

rsyncについて調べたときに、途中で中断・再開するためにはappendオプションをつけておけ、みたいな記事を見かけたので何も考えずにつけたのですが、このappendオプションが悪さをしていたみたいです。

manコマンドでappendオプションの意味を調べてみます。

$ man rsync
...
     --append                append data onto shorter files
...

今まで試したrsyncの挙動と一緒に考えると、どうやら転送先ファイルの方がサイズが小さい場合に、サイズの違い分の差分のみを転送先ファイルに追加しようとするようです。

つまり今回のファイルが壊れるケースだと、ファイルサイズの差分分の末尾のeeだけ転送しようとしたようです。しかし、実際には末尾ee以外にも差分があったため、実行結果が2種類のファイルの内容が混ざったようなおかしなことになったようです。

なので、

転送元ファイルよりも転送先ファイルの方がサイズが小さい場合 → ファイルを転送しない
転送元ファイルと転送先ファイルにサイズの違い分以上の差分がある場合 → 転送元と転送先ファイル内容が混ざる

といった状態になるみたいです。

Create React Appを使ったChrome拡張開発

Tue, 31 Dec 2019 00:00:00 GMT

import LinkCard from "@components/misc/LinkCard.astro"

最近趣味でChrome拡張を開発してるのですが、JQueryで大きなhtmlをDOMに挿入するのが辛くなってきました。Reactを使えばそのへん上手く切り分けられて幸せになれるんじゃない？って思ったので、ReactでChrome拡張の作成を試してみました。

Create React Appのインストール

Create React Appというツールを使うと簡単に新規Reactアプリの開発を始めることができるので、今回はこれを使います。

Create React Appをまだ導入していない方は次の記事を参考にインストールをしてください。

Reactアプリの作成

とりあえずデフォルトのReactアプリを作成します。

$ npx create-react-app my-app

manifest.jsonの書き換え

public/manifest.jsonをChrome拡張用に書き換えます。書き換えというか、ほぼ書き直しになります。

今回はお試しなので、とりあえずミニマムなmanifest.jsonを用意してやります。public/manifest.jsonの中身を一旦全消しして、以下の内容を書き込んでやります。

{
  "name": "Create React App Sample",
  "version": "1.0",
  "manifest_version": 2,
  "browser_action": {
    "default_popup": "index.html"
  }
}

各項目が何を意味してるかは下記の公式ドキュメントを御覧ください。

Manifest file format | Chrome for Developers

inline scriptを使用しない設定に修正

このままビルドするとJavaScriptのコードがインラインスクリプトとして展開されてしまいます。

Chrome拡張はインラインスクリプトを使っているとエラーを吐いて正常に動作しないため、htmlファイルからscriptタグでJavaScriptのファイルを読み込むよう設定を入れてやる必要があります。

この方法は次の記事にまとめていますので、この記事の通りにインラインスクリプトを使わないよう設定してください。

ちなみにこの設定を入れずにChrome拡張を動作させようとすると、以下のようなエラーが出力され、拡張が正常に機能しません。

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem:". Either the 'unsafe-inline' keyword, a hash ('sha256-xxx/yyy'), or a nonce ('nonce-...') is required to enable inline execution.

manifest.jsonに設定を書けばこのエラーは回避できるみたいですが、そもそもセキュリティ的によろしくない、みたいな理由でデフォルトではインラインスクリプトの実行が禁止されてるようなので、インラインスクリプトは使用しないのが無難だと思われます。

Chromeに拡張を読み込ませる

あとはビルドしてできたファイルをChromeに読み込ませれば、完了です。

$ cd my-app
$ npm run build

これでできたbuildディレクトリをChrome拡張として読み込み、アイコンをクリックするとポップアップにReactの画面が表示されます。

参考：

create-react-appでChrome拡張機能開発 #JavaScript - Qiita

Create React Appでinline scriptを使用しないようにビルドする

Tue, 31 Dec 2019 00:00:00 GMT

やりたいこと

Create React Appで開発したアプリを何も考えずビルドすると、JavaScriptのコードはbuild/index.htmlにインラインスクリプトとして埋め込まれます。

これをbuild/index.htmlから外部スクリプトとして、各種JavaScriptファイルを読み込むようにしたいです。

やり方

以下のようにmy-appという名前でアプリを作成したとします。

$ npx create-react-app my-app

my-appディレクトリ直下に**.env**という名前のファイルを作成します。

そして.envに以下を記述します。

INLINE_RUNTIME_CHUNK=false

これでnpm run buildを叩くと、JavaScriptのコードはインラインスクリプトではなく外部スクリプトとして読み込まれるようになります。実際にbuild/index.htmlを開いてみると、インラインスクリプトがなくなったことがわかると思います。

【Chrome拡張】SPAやSSRのWebページでページ遷移を検知する

Mon, 09 Dec 2019 00:00:00 GMT

GitHub上で動作するChrome拡張を作成したかったのですが、目的のページへ遷移しても動作しなくてはまったので対応メモです。

やりたいこと

GitHub上の特定のページへ遷移すると発火するChrome拡張を作りたいです。

現象

manifest.jsonのcontent_scriptsのmatchesに当てはまるURLにアクセスしても、content_scriptsに書いたJavaScriptが動作しませんでした。

原因

SPAなのかSSRなのかはわかりませんが、GitHubはページ遷移時、ページ全体を読み込むのではなく差分のみを読み込んでレンダリングしているみたいです。

content scriptだとこの差分更新を上手く検知できないようです。ページの読み込みが発生しない&非同期で差分更新をしてるので当然っちゃ当然なんですが。

対策

以下の手順を踏むと、SPAとかでもページの遷移を検知できます。

イベントページを使う

content_scriptsではなく、イベントページ/バックグラウンドページを使います。

イベントページ/バックグラウンドページを使う場合、manifest.jsonに以下のように記述すると、イベントページ/バックグラウンドページとしてbackground.jsが起動します。

  "background": {
    "scripts": [
      "background.js"
    ],
    "persistent": false
  },

persistentはtrueに設定するとバックグラウンドページとして、falseに設定するとイベントページとして動作します。

バックグラウンドページは常にバックグラウンドで常駐するため、メモリを常に占有してしまいます。イベントページは必要な時のみ立ち上がって、処理が完了したら閉じます。

現在はイベントページが推奨されているようなので、特別理由がない限りはpersistentはfalseで良さそうです。

参考：

Chrome拡張の開発方法まとめ　その1：概念編 #JavaScript - Qiita

イベントページでのページ遷移の検知

chrome.tabs.onUpdated.addListenerを使うと、うまいことタブの更新を検知できます。

具体的には以下のような感じで使います。

chrome.tabs.onUpdated.addListener(function(tabId, info, tab) {
  if (info.status === 'complete' && tab.url.indexOf('https://github.com/') !== -1) {
    // いい感じの処理
  }
});

chrome.tabsを使うときはmanifest.jsonのpermissionsにtabsを追加する必要があります。

  "permissions": [
    "tabs",
  ],

このchrome.tabs.onUpdated.addListenerですが、読み込み時と読み込み完了時の2回走ります。

読み込み時はinfo.statusがloadingになり、読み込み完了時はinfo.statusがcompleteとなります。

今回は読み込み完了時だけ処理が走ればよく、またGitHub上でのみ動けばいい拡張機能を作りたかったので、上記のようにif分で条件を絞っています。

参考：

Chrome 拡張機能メモ

イベントページでDOMにアクセスする

Chrome拡張ではcontent_scriptsだとDOMに普通にアクセスできるのですが、イベントページやポップアップからDOMへのアクセスしようとすると一工夫必要です。

具体的には以下のような感じで、chrome.tabs.executeScriptを使用します。executeScriptを使えば、content_scriptsをイベントページに挿入できます。

chrome.tabs.onUpdated.addListener(function(tabId, info, tab) {
  if (info.status === 'complete' && tab.url.indexOf('https://github.com/') !== -1) {
    chrome.tabs.executeScript(null, { file: './contentScript.js' }, () => {});
  }
});

この例では./contentScript.jsが実行されます。この./contentScripts.jsはcontent_scriptsとして扱われるので普通にDOMにアクセスすることが可能です。

なお、content_scriptsとして扱われるためmanifest.jsonにURLを登録する必要があります。以下のようにpermissionsに./contentScripts.jsが走る可能性のあるURLを追加しましょう。

  "permissions": [
    "tabs",
    "https://github.com/*"
  ],

ここに追加されていないURL上で./contentScripts.jsが発火しようとすると、イベントページのデベロッパーツール上でエラーが発生します。

これでSPAとかのWebページでも意図したタイミングで発火するChrome拡張を作れそうです。

参考：

【Linux】mvとcp+rmの違い

Sun, 27 Oct 2019 00:00:00 GMT

ファイルをmvするのと、cpしてから元ファイルをrmで消すのは一見して同じ挙動のように見えます。自分もそう思っていたのですが、微妙に挙動が異なることに気づいたので、違いをまとめます。

結論

先に結論から書いておくと、mvとcp+rmの違いは、

mvはinode番号が変わらない
cp+rmはinode番号が変わる

です。

検証

それではinode番号について、mvの場合とcp+rmの場合とで検証してみます。

mvの場合

ファイルを用意してinode番号を確認します。 inode番号は、lsコマンドのiオプション使えば確認することができます。

# ファイルを作成
$ touch hoge.txt

# inode番号を確認
$ ls -i hoge.txt 
1085901 hoge.txt

mvでファイルを移動して、移動後のファイルのinode番号を確認します。

$ mv hoge.txt fuga.txt
$ ls -i fuga.txt
1085901 fuga.txt

inode番号が変わっていないことが確認できました。

cp + rmの場合

inode番号を確認します。

# コピー前のinode番号を確認
$ ls -i fuga.txt
1085901 fuga.txt

cpでファイルをコピーして、rmでコピー前のファイルを削除します。その後、コピー後のファイルのinode番号を確認します。

$ cp fuga.txt piyo.txt
$ rm fuga.txt

$ ls -i piyo.txt 
1084259 piyo.txt

inode番号が変わったことを確認できました。

<script type="text/javascript"> (function(b,c,f,g,a,d,e){b.MoshimoAffiliateObject=a; b[a]=b[a]||function(){arguments.currentScript=c.currentScript ||c.scripts[c.scripts.length-2];(b[a].q=b[a].q||[]).push(arguments)}; c.getElementById(a)||(d=c.createElement(f),d.src=g, d.id=a,e=c.getElementsByTagName("body")[0],e.appendChild(d))}) (window,document,"script","//dn.msmstatic.com/site/cardlink/bundle.js?20220329","msmaflink"); msmaflink({"n":"新しいLinuxの教科書","b":"","t":"","d":"https://m.media-amazon.com","c_p":"","p":["/images/I/51h3XbUE5EL.SL500.jpg"],"u":{"u":"https://www.amazon.co.jp/dp/B072K1NH76","t":"amazon","r_v":""},"v":"2.1","b_l":[{"id":1,"u_tx":"Amazonで見る","u_bc":"#f79256","u_url":"https://www.amazon.co.jp/dp/B072K1NH76","a_id":1183162,"p_id":170,"pl_id":27060,"pc_id":185,"s_n":"amazon","u_so":1},{"id":2,"u_tx":"楽天市場で見る","u_bc":"#f76956","u_url":"https://search.rakuten.co.jp/search/mall/%E6%96%B0%E3%81%97%E3%81%84Linux%E3%81%AE%E6%95%99%E7%A7%91%E6%9B%B8/","a_id":1183160,"p_id":54,"pl_id":27059,"pc_id":54,"s_n":"rakuten","u_so":2},{"id":3,"u_tx":"Yahoo!ショッピングで見る","u_bc":"#66a7ff","u_url":"https://shopping.yahoo.co.jp/search?first=1\u0026p=%E6%96%B0%E3%81%97%E3%81%84Linux%E3%81%AE%E6%95%99%E7%A7%91%E6%9B%B8","a_id":1187811,"p_id":1225,"pl_id":27061,"pc_id":1925,"s_n":"yahoo","u_so":3}],"eid":"3QRe7","s":"s"}); </script> <div id="msmaflink-3QRe7">リンク</div>

zcatで未圧縮のファイルの中身も表示する

Sun, 20 Oct 2019 00:00:00 GMT

たまにgzファイルと未圧縮のテキストファイルをまとめて表示したい時があるのですが、毎回オプションを忘れるのでメモです。

やりたいこと

以下のようにgzファイルとテキストファイルをまとめて表示したいです。

gzファイルを表示したいときはzcatコマンドを使うものですが、普通に使うと未圧縮のテキストファイルは表示できません。

$ zcat hoge.txt.gz fuga.txt
hogehoge

gzip: fuga.txt: not in gzip format

実現方法

zcatにfオプションをつけると、gzファイルもテキストファイルもまとめて表示できます。

$ zcat -f hoge.txt.gz fuga.txt
hogehoge
fugafuga

fオプションを付与すれば、gzip形式でもcompress形式でもないファイルに関してはcatと同等の動作をします。なので、gzファイルもテキストファイルもまとめて表示することができます。

homebrewでgccをインストールする

Sat, 17 Aug 2019 00:00:00 GMT

Xcode付属のclangがいまいち使えなかったので、homebrewでgccをインストールすることにしました。その導入手順のメモです。

gccのインストール

はい、brewコマンド一発でインストール自体は完了します。

$ brew install gcc

ただ、Xcode付属のclangが既にインストールされていた場合、gccコマンドを叩いてもclangが呼ばれてしまいます。

# Xcode付属のclangが呼ばれる
$ gcc -v
Configured with: --prefix=/Applications/Xcode.app/Contents/Developer/usr --with-gxx-include-dir=/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.14.sdk/usr/include/c++/4.2.1
Apple LLVM version 10.0.1 (clang-1001.0.46.4)
Target: x86_64-apple-darwin18.7.0
Thread model: posix
InstalledDir: /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin

なので、gccコマンドを叩いたときにhomebrewでインストールしたgccが呼ばれるように設定してやる必要があります。

homebrewでインストールしたgccが呼ばれるようにする

2019年8月現在、homebrewでインストールされるgccはバージョン9系が入るので、gcc/g++という名前でシンボリックリンクを貼ってやります。

$ ln -s /usr/local/bin/gcc-9 /usr/local/bin/gcc
$ ln -s /usr/local/bin/g++-9 /usr/local/bin/g++

これで、gcc/g++コマンドへのパスが通ります。が、Xcode付属のclangが入っていると、gccという名前の実質clangコンパイラが優先して探索されてしまいます。

# 環境変数のディレクトリ内からgccという名前のコマンドをすべて見つけ出す
$ which -a gcc
/usr/local/bin/gcc <-こっちがhomebrewでインストールしたgcc
/usr/bin/gcc <-こっちはXcode付属のgcc(実質clang)

# gccコマンドを叩いた場合に実行されるコマンド
$ which gcc
/usr/bin/gcc

$ which -a g++
/usr/local/bin/g++
/usr/bin/g++

$ which g++
/usr/bin/g++

なので、.bash_profileあたりに以下の設定を追加します。

export PATH="/usr/local/bin:$PATH"

最後に.bash_profileを再読み込みすると、homebrewで導入したgcc/g++が優先して使われるようになります。

$ source ~/.bash_profile
$ which gcc
/usr/local/bin/gcc

$ which g++
/usr/local/bin/g++

$ gcc -v
Using built-in specs.
COLLECT_GCC=gcc
COLLECT_LTO_WRAPPER=/usr/local/Cellar/gcc/9.2.0/libexec/gcc/x86_64-apple-darwin18/9.2.0/lto-wrapper
Target: x86_64-apple-darwin18
Configured with: ../configure --build=x86_64-apple-darwin18 --prefix=/usr/local/Cellar/gcc/9.2.0 --libdir=/usr/local/Cellar/gcc/9.2.0/lib/gcc/9 --disable-nls --enable-checking=release --enable-languages=c,c++,objc,obj-c++,fortran --program-suffix=-9 --with-gmp=/usr/local/opt/gmp --with-mpfr=/usr/local/opt/mpfr --with-mpc=/usr/local/opt/libmpc --with-isl=/usr/local/opt/isl --with-system-zlib --with-pkgversion='Homebrew GCC 9.2.0' --with-bugurl=https://github.com/Homebrew/homebrew-core/issues --disable-multilib --with-native-system-header-dir=/usr/include --with-sysroot=/Library/Developer/CommandLineTools/SDKs/MacOSX.sdk
Thread model: posix
gcc version 9.2.0 (Homebrew GCC 9.2.0)

注意点として、環境変数のパスの優先順位を変えたので、/usr/binと/usr/local/bin内に同じ実行ファイルがあった場合、今まで/usr/bin内の実行ファイルが使われていたのが、/usr/local/bin内の実行ファイルが使われるようになりますので気をつけましょう。

/usr/local/bin内のコマンドは基本的にユーザが意図して入れたもののはずなので、困ったらアンインストールしてしまってもいいんじゃないかなと思います。

Xcode付属のclangだとC++のfilesystemは動かなかった話

Sat, 17 Aug 2019 00:00:00 GMT

import LinkCard from "@components/misc/LinkCard.astro"

以前Windowsで書いたC++のコードをMacで動かそうとしたら「filesystemなんてないよ！！」ってclangコンパイラに怒られてちょっと調査したので、その調査メモです。

先に結論を書いておくと、Xcode付属のclangだとどうやってもfilesystemは使えそうにありませんでした。

環境

OSはmacOS Mojaveを使用しています。

clangのバージョンは以下の通りです。Xcode付属のデフォルトのものを使用しています。

$ clang++ -v
Apple LLVM version 10.0.1 (clang-1001.0.46.4)
Target: x86_64-apple-darwin18.7.0
Thread model: posix
InstalledDir: /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin

余談ですが、Appleはclangのバージョンを独自に振るの、ややこしいからやめてもらえませんかね。どのC++のバージョンに対応しているのかわからない・・・。

現象

このなんの変哲もない、filesystemをincludeしただけのコードをコンパイルしてみます。

#include <filesystem>

int main() {
  return 0;
}

$ clang++ main.cpp -std=c++17
main.cpp:1:10: fatal error: 'filesystem' file not found
#include <filesystem>
         ^~~~~~~~~~~~
1 error generated.

「filesystemなんかないよ！！」って怒られました。

原因

単純に、Xcode付属のclangではまだfilesystemが導入されていない模様です。

自分の使ってるclang 10.0.1ではC++17のコンパイルオプションは存在するものの、C++17のすべての機能に対応しているわけではないようです。

実際にinclude用のファイルがあるディレクトリを探してみましたが、filesystemはなさそうです。

$ ls /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include/c++/v1/filesystem
ls: /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include/c++/v1/filesystem: No such file or directory

C++17で標準入りする前は、filesystemはstd::experimentalというnamespaceにいたためexperimentalディレクトリ以下にいないかなーと思いましたが、残念ながらいませんでした。

$ ls /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include/c++/v1/experimental/filesystem
ls: /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include/c++/v1/experimental/filesystem: No such file or directory

というわけで、現状Xcode付属のclangを使っている限り、**std::filesystem**は使えません。
(もしどうにかして使えるようにする方法をご存知の方は教えてください)

どうしてもfilesystemを使いたい場合は次のセクションのいずれかの方法をとる必要がありそうです。

参考：

対策

その１：Xcode付属のclang以外のコンパイラを導入する

Xcode付属のclangを使うのを諦めて、別途clangとかgccとかのコンパイラを用意する方法です。

homebrewでインストールできるgccの方が導入が簡単なので、こだわりのない人にはgccをおすすめします。gccのインストール方法は以下の記事で解説しています。

その2：boostを使用する

boostライブラリの中にstd::filesystemと同等の機能のboost::filesystemがあるので、これを使えば解決できるはずです。
(自分は試したことないです。)

ExifからPixel単位の焦点距離を計算する

Sun, 28 Jul 2019 00:00:00 GMT

import LinkCard from "@components/misc/LinkCard.astro"

3次元復元系の論文を読んでいると、よく「初期値にはExifから取得した焦点距離を使用する」的なことが書いてあります。しかし、カメラ内部パラメータとかの焦点距離はピクセル単位なのに、Exifに記録されてる焦点距離はmm単位です。

このExifの情報を使ってmm単位の焦点距離をピクセル単位に直すことについて言及した日本語ドキュメントってそういえば見たことがないなと思ったので、変換方法を解説しようと思います。

使用する情報

ピクセル単位の焦点距離導出に使用するExifの情報は以下です。

Exifのタグ名	説明
focalLength	mm単位の焦点距離
focalPlaneXResolution	単位長あたりのピクセル数（X軸方向）
focalPlaneYResolution	単位長あたりのピクセル数（Y軸方向）
focalPlaneResolutionUnit	単位長の種類を示した番号 2: inch 3: cm 4: mm

なぜ単位長あたりのピクセル数がX軸とY軸で分かれているかというと、フォトダイオードは完全な正方形ではないからです。詳しくはこちらの記事で解説してます。

ピクセル単位の焦点距離の計算方法

focalPlaneResolutionUnit=2、すなわち単位長がインチの場合を考えてみると、X軸方向のピクセル単位の焦点距離は以下のように計算できます。

同様にY軸方向のピクセル単位の焦点距離も計算できます。

なお、focalPlaneXResolutionやfocalPlaneYResolutionがわからない場合でも、Exifに焦点距離（mm単位）と35mmフィルム換算焦点距離（mm単位）の情報があれば、そこからピクセル単位の焦点距離を求めることができます。
（経験則ですが、focalPlaneXResolutionとかがある場合はそっちを使って計算する方が一般的だと思われます。）

参考：

Exiv2 - Image metadata library and tools

権限があるはずなのにfindコマンドでPermission deniedが表示される場合の対処法

Sun, 28 Jul 2019 00:00:00 GMT

findコマンドを使ったときに、対象ディレクトリの権限があるはずなのにPermission deniedと表示されて原因究明に時間がかかったため原因と対応メモです。

現象

以下のように、findコマンドを叩くとfind: Failed to restore initial working directory: /home/user/hoge: Permission deniedといったエラーが表示されてしまいます。

$ sudo -u nobody find ../fuga
../fuga
../fuga/piyo
find: Failed to restore initial working directory: /home/user/hoge: Permission denied

一応ちゃんとファイル一覧が表示されはしたので、findコマンド自体は正しく動作してそうです。

../fugaの権限を確認してみても、ちゃんとread権限はありそうです。

$ ls -l ../ | grep fuga
drwxrwxrwx 1 user user       512 Jul 28 03:29 fuga

一応ファイル一覧自体は取得できているので問題ないといえばないのですが、気持ち悪いので原因の調査を行いました。

原因

原因としては、findコマンドの実行ユーザはカレントディレクトリの実行権限も持っている必要がある、ということのようです。

確かに、findコマンドを叩いたディレクトリの権限を見てみると、findコマンドの実行ユーザは実行権限を持っていませんでした。

$ ls -l ../ | grep hoge
drwx------ 1 user user       512 Jul 28 03:03 hoge

read権限を与えてみます。

# 実行ユーザ(nobodyユーザ)でもreadできるようにする
$ sudo chmod 701 ../hoge
$ ls -l ../ | grep hoge
drwx-----x 1 user user       512 Jul 28 03:03 hoge

# 再度nobodyユーザでfindを叩く
$ sudo -u nobody find ../fuga
../fuga
../fuga/piyo

エラーなく実行できるようになりました。

参考：

find コマンドはカレントディレクトリへのアクセス権限が必要 | 歩くような速さで・・・

対策

カレントディレクトリにfindコマンド実行ユーザに実行権限を与えるか、権限を持っているディレクトリでfindコマンドを叩くようにしましょう。

それか、気にならないなら無視してもまぁいいんじゃないかなと思います。

yaml-cpp 0.6.2をVisual Studio 2017以降でビルドする

Sun, 14 Jul 2019 00:00:00 GMT

ちょっとyaml形式でログを吐きたくてyaml-cppを使ってみようと思ったものの、ビルドではまったので対応メモです。

まずは普通にビルド

yaml-cppはCMakeLists.txtを持っているため、CMakeを使えば簡単にVisual Studioのソリューションファイルを作ることができます。

ここは特に設定を何も変更せず、デフォルトのままで問題ないです。

ただ、できたソリューションファイルをそのままビルドしてもコンパイルエラーが大量に発生してしまうので、そいつらに対処してやる必要があります。

「 C3646 '_NOEXCEPT': 不明なオーバーライド指定子です」のエラーの対応

さて、ビルドしたらエラーがたくさん出ます。その中で、まずは以下のエラーの対応を行います。

src/exceptions.cppとinclude/yaml-cpp/exceptions.hに

// This is here for compatibility with older versions of Visual Studio
// which don't support noexcept
#ifdef _MSC_VER
    #define YAML_CPP_NOEXCEPT _NOEXCEPT
#else
    #define YAML_CPP_NOEXCEPT noexcept
#endif

というような記述があります。これを、

// This is here for compatibility with older versions of Visual Studio
// which don't support noexcept
//#ifdef _MSC_VER
//    #define YAML_CPP_NOEXCEPT _NOEXCEPT
//#else
    #define YAML_CPP_NOEXCEPT noexcept
//#endif

こうしてしまいましょう。すなわち、1行だけ残してコメントアウトしてやります。

ちなみにこのエラーですが、_NOEXCEPTがVisual Studio 2017 version 15.8で削除されたことが原因です。なので、Visual Studio 2017でもこれより古いバージョンであればこのエラーは出ないと思われます。

参考：STL Features and Fixes in VS 2017 15.8 - C++ Team Blog

なお、最新のmasterリポジトリではこの問題は修正されているので、次期バージョンではこの問題は解決されるものと思われます。

「C2220 警告をエラーとして扱いました。'object' ファイルは生成されません。」の対応

ここまでくればエラーがかなり減っていて、あとはこのエラーだけかと思います。

構成プロパティ → C/C++ → 全般の、警告をエラーとして扱うをいいえ (/WX-)に設定します。

対象は以下のプロジェクトファイルです。

gmock
gmock_main
gtest
gtest_main

これで、無事yaml-cpp 0.6.2がVisual Studio 2017でビルドが成功すると思います。

【Windows】Portを占有しているプロセスを見つけて強制終了する

Sat, 18 May 2019 00:00:00 GMT

最近vue.js使ったWebサービス開発の勉強をしてたのですが、ある時npm run serveを叩いてもlocalhostに繋がらなくなったので、その対応メモです。

ポートを占有しているプロセスを見つける

まずは、ポートを占有しているプロセスを見つけます。今回は8080番ポートに繋がらなくなったので、このポートを占有しているプロセスを特定します。

c:\>netstat -ano | find ":8080"
  TCP         0.0.0.0:8080           0.0.0.0:0              LISTENING       2272

今回の場合ですと、PIDが2272のプロセスが8080番ポートを占有しているようです。

なお、netstatで使用しているオプションの意味合いはこんな感じです。

オプション	説明
a	すべてのポートを表示
n	名前解決をせずに表示(IPアドレスのまま表示)
o	プロセスID(PID)を表示

プロセスを確認＆強制終了する

PIDからプロセス名の特定は、タスクマネージャーを使えば簡単にできます。

タスクマネージャーを開いて、詳細タブを開きPIDからプロセス名を特定します。この場合ですと、PID 2272のプロセスはnodeであることがわかります。

あとは、nodeを選択してタスクの終了をクリックすると、8080番ポートを占有していたプロセスを強制終了できます。

番外編～コマンドでプロセスを確認&強制終了する～

タスクマネージャーを使わなくても、コマンドを使用しても同様のことができます。

PIDからプロセス名を確認する

Windowsにはpsコマンドはありませんが、似たようなコマンドとして、tasklistコマンドというものがあります。

このコマンドを使用しても、PIDからプロセス名を特定できます。

c:\>tasklist | find "2272"
node                          2272 Console                    1    266,048 K

ポート占有しているプロセスを強制終了する

Windowsにもkillコマンドっぽいコマンドとしてtaskkillコマンドがあるので、コマンドからもプロセスを強制終了できます。

c:\>taskkill /F /PID 2272

ただ、管理者権限のコマンドプロンプトでこのコマンドを叩いても、こんな感じでエラーが表示されて終了できない場合があったので、タスクマネージャーから強制終了するのが間違いないと思います。

c:\>taskkill /F /PID 2272
エラー: PID 2272 のプロセスを強制終了できませんでした。
理由: アクセスが拒否されました。

アクセスが拒否される原因をご存知の方は教えてください・・・

参考：

CSSのgrid layoutを使って画面を縦に分割する

Thu, 02 May 2019 00:00:00 GMT

自分は基本的にはバックエンドエンジニアなんですが、GWだし時間あるしフロントエンドも触ってみようかなと思って触ってみました。

CSSとかほぼ初めて触ったので、初心者が躓くところすべてに躓いてる感あるので、もう躓かないように備忘録がてら記事にしておきます。（なので、初心者丸出しの記事になります）

やりたいこと

こんな感じで、画面の領域を上下に分割したいのです。

実現方法

基本方針

表題の通りgrid layoutを使用します。grid layoutは2次元のレイアウトをするための機能で、$n$行$m$列に画面を分割できます。

なので、この機能を使って画面を2行1列に分割してやります。

まずは、下記のようなhtmlファイルを用意します。

<!DOCTYPE html>
<html lang="ja"> 
  <head>
    <meta charset="utf8">
    <link rel="stylesheet" type="text/css" href="sample.css"> 
    <title>sample html</title>
  </head> 
  <body>
    <div class="grid-area">
      <div class="top-area">
        Top
      </div>
      <div class="bottom-area">
        Bottom
      </div>
    </div>
  </body>
</html>

そして、このようなCSSを用意してやると、上側と下側が8:2の割合で分割されると思います。

.grid-area {
  display: grid;
  height: 100vh;                /* grid全体の高さを設定 */
  grid-template-rows: 80% 20%;  /* gridの割合が8:2になるよう2行用意 */
  grid-template-columns: 100%;  /* 横幅いっぱいに1列用意 */
}

.top-area {
  grid-row: 1;
  grid-column: 1;
}

.bottom-area {
  grid-row: 2;
  grid-column: 1;
}

こんな感じで8:2で領域が分割されます。

上側部分だけスクロールさせたい場合

さて、上記が基本となるのですが、このままですと上側部分に表示すべきコンテンツが増えてきた場合、このように下側部分まではみ出してきてしまいます。

これを解決するために、コンテンツがはみ出した場合、上側部分のみスクロールするようにしてみます。先ほどのCSSにoverflow-y: scrollを追加してやるだけです。

.grid-area {
  display: grid;
  height: 100vh;
  grid-template-rows: 80% 20%;
  grid-template-columns: 100%;
}

.top-area {
  grid-row: 1;
  grid-column: 1;
  overflow-y: scroll; /* これを追加。縦方向にコンテンツがあふれた場合スクロール可能として処理する */
}

.bottom-area {
  grid-row: 2;
  grid-column: 1;
}

すると、下記のように下側にはみ出した場合は自動で上側部分のみスクロールするようになります。

参考： CSS Grid Layout を極める！（基礎編） #CSS3 - Qiita

【OpenCV】decomposeProjectionMatrixを使って透視投影変換行列を分解する～完全版～

Sun, 21 Apr 2019 00:00:00 GMT

import LinkCard from "@components/misc/LinkCard.astro" import img1 from "./decomposeProjection3.jpg"

以前こんな記事を書きましたが、OpenCVの透視投影変換行列を分解するdecomposeProjectionMatrixには他にもいろいろと罠があったので、decomposeProjectionMatrixを利用して透視投影変換行列を内部パラメータと外部パラメータに分解するための完全版の使い方をまとめていきます。

まずは単純に分解

さて、まずは単純にdecomposeProjectionMatrixで透視投影変換行列を分解していきます。

ただ、decomposeProjectionMatrixは内部的にはQR分解を使用して行列分解しているだけなので、これだけではいろいろと問題が残ります。

内部パラメータをスケーリング

単純に分解しただけでは、正確な内部パラメータは得られるとは限りません。なぜなら、QR分解で得られるのは、”上三角行列”と”正規直行行列”で、上三角行列の右下要素が1になるという制約は入っていないからです。

そのため、入力に使用した透視投影変換行列は定数倍されていたものの場合、上三角行列の右下要素が1ではない値になります。

なので、decomposeProjectionMatrixで得られた内部パラメータの右下の要素で内部パラメータ全体を割ってやる必要があります。そうすることで右下要素が1の内部パラメータを得ることができます。

内部パラメータの焦点距離が負の数になった場合

前述のとおり、QR分解で得られるのは”上三角行列”と”正規直行行列”でした。すなわち、decomposeProjectionMatrixで得られた内部パラメータの焦点距離の要素が、正の数になるとは限りません。
ですので、焦点距離が正の数になるよう補正する必要があります。

先ほどまでに求めた内部パラメータを$\boldsymbol{K}$、回転行列を$\boldsymbol{R}$とおきます。さらに透視投影変換行列の1～3列目の部分を$\boldsymbol{P}_{3\times3}$とおきます。すると、これらの関係は下のように表すことができます。

焦点距離が負の数になる場合は、下のように焦点距離が正になるようにできるように、内部パラメータと回転行列を補正します。このようにすると、回転行列を正規直行行列の状態に保ったまま、焦点距離の符号を変えることができます。

この$\boldsymbol{K}'$を最終的な内部パラメータ、$\boldsymbol{R}'$を最終的な回転行列とします。

なお、$\boldsymbol{K}$の1行1列目、2行2列目それぞれの焦点距離の符号が別の場合、そもそも透視投影変換行列の導出が何かおかしい可能性が高いので、そちらを見直した方がいいです。

並進ベクトルの導出

最後に、$\boldsymbol{R}'$を使って下記で説明している方法で外部パラメータの並進ベクトルを導出すれば、内部パラメータ、外部パラメータの導出完了です。

OpenCVは大変便利に使わせてもらっていますが、正直公式のドキュメントの充実度がいまいちな感じなので、この辺の情報も充実してくれたら嬉しいですね。

参考： openMVS/libs/MVS/Camera.cpp at 063e5cd7f1139aceaf882f9f6ae3f0de26c59138 · cdcseacave/openMVS · GitHub

透視投影変換行列は定数倍しても問題なかった話

Sat, 06 Apr 2019 00:00:00 GMT

import LinkCard from "@components/misc/LinkCard.astro" import img1 from "./perspective8.jpg" import img2 from "./perspective9.jpg" import img3 from "./perspective10.jpg"

考えてみれば当たり前だったのですが、透視投影変換行列はスケール不定性的なものを持っていることに気づいたので、まとめてみます。

そもそも透視投影変換について復習したい場合はこちらをご覧ください。

透視投影変換の定数倍

透視投影変換行列とは、世界座標点を画像座標点に投影する行列のことでした。

この行列を$n$倍するとこうなります。

さて、ここで$s'=s/n$とおくと、この式は

こうなって、結局最初の透視投影変換の式と同じ形になります。

下記記事のような手法で2次元点、3次元点の組み合わせから透視投影変換行列を求めた場合、求まった透視投影変換行列は定数倍されたものになります。

【OpenCV】decomposeProjectionMatrixを使った外部パラメータの導出

Thu, 21 Mar 2019 00:00:00 GMT

import LinkCard from "@components/misc/LinkCard.astro" import img1 from "./perspective6.jpg" import img2 from "./perspective7.jpg"

透視投影変換行列を内部パラメータと外部パラメータに分解するため、OpenCVのdecomposeProjectionMatrixを使用したのですが、ちょっと使い方にはまったので使い方メモです。

公式ドキュメントを見てみる

decomposeProjectionMatrixの使い方はここに書いてます。

Camera Calibration and 3D Reconstruction — OpenCV 3.0.0-dev documentation

この関数の引数や返り値は以下の通りです。

void decomposeProjectionMatrix(InputArray projMatrix, OutputArray cameraMatrix, OutputArray rotMatrix, OutputArray transVect, OutputArray rotMatrixX=noArray(), OutputArray rotMatrixY=noArray(), OutputArray rotMatrixZ=noArray(), OutputArray eulerAngles=noArray() )

各パラメータの役割はこんな感じです。（rotMatrixXとかは今回触れないので省略してます。）

	引数	役割
入力	projMatrix	透視投影変換行列
出力	cameraMatrix	内部パラメータ
	rotMatrix	外部パラメータの回転行列
	transVect	カメラ位置の示したベクトル

はまったところ

この関数の出力であるtransVect、すなわちカメラ位置を示したベクトルがどの座標系で表現されているのかを確認せずに使ったので、見事にバグを生み出してしまいました。

カメラ位置は世界座標系で求まる

はい、結論から言うと、transVectは世界座標系でのカメラ位置です。なので、外部パラメータで使用するような並進ベクトル$\boldsymbol{t}$を求めるにはtransVectから導出してやる必要があります。

なお、この変換には外部パラメータへの理解が必要となりますので、わからない人はこの記事をご覧ください。

変換するにはまず、transVectは4次元ベクトルとして返ってきて扱いづらいため、3次元ベクトルにしてやります。これは、1～3番目の要素を4番目の要素で割ればいいです。
この3次元ベクトルを$\boldsymbol{X}_w=[X_w, Y_w, Z_w]^T$と置きます。

ついでに求まった回転行列rotMatrixを$\boldsymbol{R}$と置いておきます。

さらに、この世界座標系で表現されたカメラ位置$\boldsymbol{X_w}$は外部パラメータによって変換されるとカメラ座標系の原点の座標$\boldsymbol{X}_c=[0, 0, 0]$になるはずです。
すなわちこうなります。

つまり、並進ベクトル$\boldsymbol{t}$はこのように求めることができます。

なお、decomposeProjectionMatrixには他にもハマりどころが何箇所かあるので、それはこちらにまとめています。

2次元点-3次元点の対応付けからカメラパラメータを導出する

Sat, 16 Mar 2019 00:00:00 GMT

import LinkCard from "@components/misc/LinkCard.astro" import MoshimoAffiliate from "@components/misc/MoshimoAffiliate.astro"

SfMやSLAMでは、2次元点と3次元点の対応付けから、カメラパラメータ(透視投影変換行列)を求める必要があります。今回は、DLT (Direct Linear Transformation)を使った透視投影変換行列の導出法について書いてみます。

DLTの考え方はこの本に書いてあります（英語です）。

やりたいこと

ある画像の特徴点の2次元座標と、その特徴点の世界座標（3次元座標）がわかっているものとします。このとき、この世界座標点は透視投影変換を経て画像上に投影されているはずです。

この透視投影変換行列を導出したいのです。

透視投影変換とはそもそも何者かわからない人は、こちらを参照ください。

DLTを使った透視投影変換行列の導出

さて、上の透視投影変換の式を展開するとこのようになります。

さらに、この式を$(u,v)$についてまとめると、このように$s$を削除した形式にできます。

ここで、$\boldsymbol{A,x}$を次のように置いてみます。

すると、(1)の式は

という風に書き換えることができます。実際に式を展開してまとめると(1)と同じになるので、不安な人は試してみてください。

2次元点、3次元点の対応付けが複数わかっていれば、行列$\boldsymbol{A}$はこう書くことができるので、

先ほどの式はこうなります。

あとは、特異値分解とかを使ってこれを解いて$\boldsymbol{x}$を求めてやれば、透視投影変換行列を求めることができます。

なお、透視投影変換行列の自由度は12で、2次元点と3次元点の対応付け1つで2つの方程式を作ることができるので、透視投影変換行列をこの方法で導出するには、最低6つの2次元点、3次元点の対応付けが既知である必要があります。

【Chrome拡張開発】ポップアップに表示したリンクが開けない場合の対処

Sat, 23 Feb 2019 00:00:00 GMT

import LinkCard from "@components/misc/LinkCard.astro"

前回、Chrome拡張機能のポップアップの表示について書きました。このポップアップにhrefでリンクを追加したのですが、リンクをうまく開けなかったので、その対応メモです。

やりたいこと

ポップアップにリンクを追加して、リンククリック時に新しいタブで開きたいです。

こんな感じでポップアップのhtmlにリンクを追加するだけでいけるかなと思ったのですが、リンクは出現するもののクリックしても何も起こりません。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="popup.css">
  </head>

  <body>
    <h3>Chrome Extension Template</h3>
    <a href="https://google.com">https://google.com</a>
  </body>
</html>

実現方法

ポップアップのリンクを新しいタブで開くには、chrome.tabs.createを使用します。下記のようなjavascriptを用意します。

// popup.js
$(function () {
  $('#link').on('click', (e) => {
    chrome.tabs.create({url: $(e.target).attr('href')});
  });
});

このjsファイルをポップアップのhtmlで読み込めば、ポップアップのリンクをクリック時に、新しいタブで開くようになります。JQueryを使っているのでJQueryも読み込んでいます。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="popup.css">
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="popup.js"></script>
  </head>

  <body>
    <h3>Chrome Extension Template</h3>
    <a id="link" href="https://google.com">https://google.com</a>
  </body>
</html>

参考：

https://teratail.com/questions/93432

【Chrome拡張開発】拡張機能アイコンのクリック時にポップアップを表示する

Sun, 17 Feb 2019 00:00:00 GMT

最近Chrome拡張を開発してみてるので、その開発メモです。基本的には以下のGoogleの公式リファレンスを参考にしてます。

参考：chrome.browserAction | Reference | Chrome for Developers

やりたいこと

こんな感じで、Chromeのツールバーにある拡張機能のアイコンをクリックしたら、設定画面的なものを表示させたいです。

実現方法

manifest.jsonに以下を追記します。

"browser_action": {
  "default_icon": "icon.png",                // ツールバーに表示される拡張機能のアイコン。無くても可（デフォルトアイコンになる）。
  "default_title": "Hide Unnecessary Site",  // ツールバーの拡張機能アイコンにマウスオーバーしたときに表示されるテキスト。無くても可。
  "default_popup": "popup.html"              // 拡張機能アイコンをクリックしたときに表示されるHTML
},

最低限必要なのは"default_popup"になります。ここに設定したpopup.htmlをこんな感じで作ってみます。

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h3>Chrome Extension Template</h3>
  </body>
</html>

Chromeにこの拡張機能を読み込ませて、ツールバーの拡張機能アイコンをクリックしてみます。

無事popup.htmlの内容が表示されました。でも、なんだかポップアップが小さいような。。。

調べてみると、cssでwidthを設定すればうまい具合の大きさにできそうです。

参考：google chrome extension - popup.html - change width? - Stack Overflow

上記を参考にcssでmin-widthを指定してみます。

/* popup.css */
body {
  min-width: 300px;
}

そしてこのcssをpopup.htmlで読み込みます。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="popup.css">
  </head>
  <body>
    <h3>Chrome Extension Template</h3>
  </body>
</html>

無事いい感じの大きさでポップアップを表示できました。

Pythonのopenで改行コードが変わった話 in Windows

Sun, 17 Feb 2019 00:00:00 GMT

Pythonでちょっとしたスクリプトを書いていたのですが、どうにも入力ファイルと出力ファイルの改行コードが変わってしまってちょっとはまったので、対応メモです。

環境はWindows 10 + Python3.5になります。

そもそも改行コードの確認方法がわからない人は、こちらを参考にしてください。

https://mem-archive.com/2018/12/23/post-1308/

現象

このようにファイルを1行ずつ読み込んで出力するだけのプログラムを作ります。

with open("./input.txt") as f:
  for line in f:
    print(line, end='')

input.txtの改行コードは\r\nです。

$ od -c input.txt
0000000   h   o   g   e  \r  \n   f   u   g   a  \r  \n   p   i   y   o
0000020

実行して結果をファイルに出力します。

$ python3 main.py > output.txt

output.txtの改行コードは\nになってしまいます。ついでにファイルの最後にも改行コードが付与されています。

$ od -c output.txt
0000000   h   o   g   e  \n   f   u   g   a  \n   p   i   y   o  \n
0000017

解決策

先ほどのプログラムをこのように修正します。openにnewline引数を追加してやりました。

with open("./input.txt", newline='') as f:
  for line in f:
    print(line, end='')

このプログラムで出力されたファイルの改行コードは、変換されずにそのままになります。

$ od -c output.txt
0000000   h   o   g   e  \r  \n   f   u   g   a  \r  \n   p   i   y   o
0000020

newlineを指定しない場合、デフォルトではNoneになります。このときの動作は、\r、\n、\r\nを改行コードとしてみなして、勝手に全部\nとして扱います。
newline=''とすると、改行コードを変換せずそのまま扱います。

試してはいませんが、newlineに\r\nとかを指定すれば、\r\nだけを改行コードとして扱えたりもするらしいです。

勝手に改行コード変えられると思わぬところで躓くことがあると思うのですが、なぜデフォルトで変換するような挙動になってるんでしょうね。

参考：

https://docs.python.jp/3/library/functions.html

【JQuery】Uncaught TypeError: xxx.find is not a function at yyyy.jsの原因と解決法

Sun, 03 Feb 2019 00:00:00 GMT

フロントエンド開発に慣れてなくて、JQueryの初歩的な部分ではまったのでメモです。

エラー

エラーを吐いたコードはこれです。

let elements = $('.g');

for(let i = 0; i < elements.length; i++) {
  console.log(elements[i].find('.LC20lb'));
}

実行すると、下記のようなエラーが出力されました。

Uncaught TypeError: elements[i].find is not a function
    at main.js:4

原因と解決法

変数elementsはJQueryのオブジェクトではなく、JavaScriptのオブジェクトであることが、このエラーの原因です。

なので、問題のこの部分を

  console.log(elements[i].find('.LC20lb'));

こうやってJQueryのオブジェクトに変換してやると、動くようになります。

  console.log($(elements[i]).find('.LC20lb'));

参考：javascript - jQuery throws an error that element.find() is not a function - Stack Overflow

Hyperのデフォルトショートカットキー(Windows)

Thu, 31 Jan 2019 00:00:00 GMT

import LinkCard from "@components/misc/LinkCard.astro"

WindowsのターミナルソフトはHyperを使ってます。なかなかいい感じの使い勝手なのですが、まだ慣れてなくてショートカットキーを頻繁に忘れるので、ショートカットキーをメモしておきます。

ショートカットキー一覧

デフォルトショートカットキーを定義したファイルはこれです。

hyper/app/keymaps/win32.json at canary · vercel/hyper · GitHub

しかし、自分の環境だと一部ショートカットキーが微妙に異なったり、動作しないのがあったので、動作確認できたショートカットをまとめてみました。

ショートカット	説明
Ctrl + Shift + i	デベロッパーツールの起動
Ctrl + Shift + r	ウィンドウのクリア同ウィンドウ内のタブとかの表示すべてクリアされる
Ctrl + Shift + F5	ウィンドウのクリア同ウィンドウ内のタブとかをすべて閉じ、起動したての状態と同じになる
Ctrl + ,	設定ファイル(.hyper.js)を開く
Ctrl + 0	フォントサイズをデフォルトにく
Ctrl + ;	フォントサイズを大きく
Ctrl + -	フォントサイズを小さく
Ctrl + Shift + n	新規ウィンドウの起動
Ctrl + Shift + m	ウィンドウの最小化
F11	ウィンドウのフルスクリーン化
Ctrl + Shift + q Alt + F4	ウィンドウを閉じる
Ctrl + Shift + ] Ctrl + Shift + → Ctrl + Alt + → Ctrl + Tab	右のタブへ移動
Ctrl + Shift + [ Ctrl + Shift + ← Ctrl + Alt + ← Ctrl + Shift + Tab	左のタブへ移動
Ctrl + 数字	数字番目のタブへ移動
Ctrl + PageUp	次のPaneへ移動
Ctrl + PageDown	前のPaneへ移動
Ctrl + Shift + d	Paneを縦に分割
Ctrl + Shift + e	Paneを横に分割
Ctrl + Shift + w	Paneを閉じる
Ctrl + Shift + c	コピー
Ctrl + Shift + v	ペースト
Ctrl + Shift + a	全選択
Ctrl + ←	前の単語へカーソルを移動
Ctrl + →	次の単語へカーソルを移動
Home	先頭へカーソルを移動
End	末尾へカーソルを移動
Ctrl + BackSpace	前の単語を削除
Ctrl + Del	次の単語を削除
Ctrl + Shift + k	バッファの削除
Ctrl + Shift + u	プラグインの更新

Vegetaを使ったサーバの負荷テスト

Mon, 21 Jan 2019 00:00:00 GMT

import LinkCard from "@components/misc/LinkCard.astro"

仕事でサーバの負荷テストをすることになったので、Vegetaという負荷ツールを使ってみようと思いました。githubの画像がとても素敵ですね。

Vegetaのインストール

まずはVegetaをインストールします。インストールにはGo言語の開発環境が必要なので、環境を作ってない人はこちらを参考に構築してください。

VegetaはGo言語製のツールなので、go getコマンドでインストールします。

$ go get -u github.com/tsenart/vegeta

Vegetaの使い方

負荷テストはvegeta attackというコマンドを使用します。このコマンド名個人的に大好きです。

GETリクエストで1つのURLへの負荷テスト

1つの特定のURLへのGETリクエストでのサーバの負荷テストはこうやります。duration=5s、rate=10は、5秒間の間、10 req/secで指定したURLにアクセスすることを示しています。

結果はresult.binというファイルに書き出しています。

$ echo "GET http://192.168.3.2:8080" | vegeta attack -duration=5s -rate=10 > result.bin

サーバのアクセス履歴を見ると、ちゃんとアクセスが来ていることがわかります。なお、サーバにはNginxを使っています。

$ sudo tail /var/log/nginx/access.log
10.0.2.2 - - [20/Jan/2019:21:13:39 +0900] "GET / HTTP/1.1" 200 612 "-" "Go-http-client/1.1" "-"
10.0.2.2 - - [20/Jan/2019:21:13:39 +0900] "GET / HTTP/1.1" 200 612 "-" "Go-http-client/1.1" "-"
...

結果は下記のように見ます。なお、-type=jsonオプションを付与することで、JSON形式でも出力可能です。

$ cat result.bin | vegeta report
Requests      [total, rate]            50, 10.20
Duration      [total, attack, wait]    4.9028774s, 4.9006794s, 2.198ms
Latencies     [mean, 50, 95, 99, max]  2.07302ms, 2.0215ms, 2.919ms, 3.765ms, 3.765ms
Bytes In      [total, mean]            30600, 612.00
Bytes Out     [total, mean]            0, 0.00
Success       [ratio]                  100.00%
Status Codes  [code:count]             200:50
Error Set:

複数のURLへの負荷テスト

複数のURLへのアクセスで負荷テストをする場合は、まずアクセスしたいURLを書いたファイルを用意します。

$ cat request_url.txt
GET http://192.168.3.2:8080
GET http://192.168.3.2:8080/hoge
GET http://192.168.3.2:8080/fuga

-targetsオプションにこのファイルを指定してやることで、複数のURLへアクセスする負荷テストを行うことができます。

$ vegeta attack -duration=5s -rate=10 -targets=request_url.txt > result.bin

アクセスログを確認すると、ちゃんと指定した3つのURLへ均等にアクセスできていることを確認できます。

$ sudo tail /var/log/nginx/access.log
...
10.0.2.2 - - [21/Jan/2019:01:54:25 +0900] "GET / HTTP/1.1" 200 612 "-" "Go-http-client/1.1" "-"10.0.2.2 - - [21/Jan/2019:01:54:25 +0900] "GET /hoge HTTP/1.1" 200 8 "-" "Go-http-client/1.1" "-"10.0.2.2 - - [21/Jan/2019:01:54:25 +0900] "GET /fuga HTTP/1.1" 200 11 "-" "Go-http-client/1.1" "-"
...

POSTリクエストでの負荷テスト

POSTリクエストを用いる場合も-targetsオプションを使用します。まずは送りたいbodyを書いたファイルを用意します。JSONファイルを使った例を用いたサイトが多いようですが、別にJSONでなくても問題ありません。

$ cat parameter.txt
hoge=1&fuga=2&piyo=3

さらに、URL、必要ならheader、bodyを書いたファイルを用意します。なお、bodyを書いたファイルパスを指定する場合は先頭に@を付与します。

$ cat request_url.txt
POST http://192.168.3.2:8080/piyo
Content-Type: application/x-www-form-urlencoded
@parameter.txt

これで、-targetsオプションにURLやbodyを記したファイルを指定することで、POSTリクエストの負荷テストを実現できます。

$ vegeta attack -duration=5s -rate=10 -targets=request_url.txt > result.bin

ログでもちゃんとPOST判定されてます。

$ sudo tail /var/log/nginx/access.log
...
10.0.2.2 - - [21/Jan/2019:01:47:47 +0900] "POST /piyo HTTP/1.1" 200 86 "-" "Go-http-client/1.1" "-"10.0.2.2 - - [21/Jan/2019:01:47:47 +0900] "POST /piyo HTTP/1.1" 200 86 "-" "Go-http-client/1.1" "-"
...

Create React Appで作成したアプリを任意のサブディレクトリに配置する

Mon, 14 Jan 2019 00:00:00 GMT

import LinkCard from "@components/misc/LinkCard.astro"

Create React Appで作成したサービスをサーバのサブディレクトリ直下に配置したら上手く動かなかったので、その対応メモです。

現象

Create React Appを使ってみました。

それで、ローカルでは動作確認できたものの、作成したサービス用のサブディレクトリを作成してサービスを配置しようとしたら、真っ白い画面が表示されました。

デベロッパーツールを開いて確認したところ、JavaScriptとCSSの読み込みに軒並み失敗している模様。

原因

スクショからわかるようにhttp://192.168.3.2:8080/reactapp/ というURLに作成したサービスを割り当てました。

サーバにはNginxを使用しているので、サーバの/usr/share/nginx/html/reactapp/にCreate React Appのbuild以下のファイルとディレクトリをそのまま配置しています。

なので、JavaScriptとかCSSのURLは正しくは

http://192.168.3.2:8080/reactapp/static/js/ファイル名

となるべきなのですが、index.htmlではURLからreactappが抜けた

http://192.168.3.2:8080/static/js/ファイル名

でアクセスしようとしていたので、404エラーになっていました。

対応

まずはcross-envをインストールします。

$ npm install --save-dev cross-env

そしてpackage.jsonのこの部分を

"scripts": {
  ...
  "build": "react-scripts build",
  ...
},

こう変えます。

"scripts": {
  ...
  "build": "cross-env PUBLIC_URL=/reactapp/ react-scripts build",
  ...
},

これで以下でビルドして

$ npm run build

http://192.168.3.2:8080/reactapp/に配置すると、正常に動くようになります。

Create React Appを使ったサービス開発

Tue, 08 Jan 2019 00:00:00 GMT

import LinkCard from "@components/misc/LinkCard.astro"

最近いい加減フロントエンド開発の知識もないとまずいなと思い始めたので、Reactを触ってみることにしました。どうにもCreate React Appというツールを使うと簡単にReactを使ったサービスを作り始めることができるみたいなので、今回はこのツールを使ってみます。

基本的に公式のGetting Startedに従って導入を進めます。なお環境はWindows 10のWSL (Windows Subsystem for Linux)を使用します。つまりはLinuxです。

後日Macでも試しましたが、同じ手順で導入できました。

:::warning Create React Appをnpm install -g create-react-appで自分のローカル環境にインストールすることは非推奨となりました。
npxを使えばローカル環境にインストールせずともCreate React Appを使えるので、以前ローカル環境に入れちゃった人はnpm uninstall -g create-react-appで消しておきましょう。 :::

Reactアプリの作成

Reactアプリの雛型を作ります。

$ npx create-react-app my-app

Create React Appを使うとこのコマンドだけで雛型を作れるのは素晴らしいですね。

作成したアプリの実行

ひとまず雛型のままの状態で実行してみます。

$ cd my-app
$ npm start

これでアプリが実行されましたので、http://localhost:3000/ にアクセスするとReactの画面が表示されると思います。これが表示されたら成功です。

本番環境用のファイルを作成

実際にWebサービスとして公開する場合は、公開用のファイルを作成します。

$ npm run build

これでbuildディレクトリの中に公開用ファイルができるので、buildディレクトリの中身をサーバに転送して配置すれば公開完了です。

なお、任意のサブディレクトリでサービスを公開する場合は、package.jsonを少しだけ書き換えてやる必要がありますので、こちらを参考にしてください。

また、作成されたbuild/index.htmlを直接開くとCSSとかJavaScriptを上手く読めこめなくて真っ白い画面が表示されるので、慌てないようにしましょう。

Hyper + WSLでWindows上に快適なターミナル環境の構築

Sun, 06 Jan 2019 00:00:00 GMT

import LinkCard from "@components/misc/LinkCard.astro"

以前Windows上で快適なターミナル環境を整えるため、cmderを導入しましたが、不満が出てきたので、Hyperというターミナルを試してみましたので、その環境構築メモです。

Hyperのインストール

まずはこちらからHyperをダウンロード&インストールします。基本的にダウンロードしたexeファイルを実行するだけでインストールされます。

Hyperのデフォルトシェルをbashにする

Hyperインストール後のデフォルトはまだbashになってないので、設定を変更して起動時にbashが起動するようにします。

メニューからEdit → Preferencesを開きます。すると設定ファイルがメモ帳で開かれるので、これを編集してbashが起動するようにします。

実際のファイルは(特に変更してなければ)、C:\Users\ユーザ名\.hyper.jsなので、メモ帳以外のテキストエディタで設定ファイルを開きたい場合は、このファイルを直接開きましょう。

編集するのはこう書いてある行です。この行を

shell: '',

こう編集します。

shell: 'C:\\Windows\\System32\\wsl.exe',

さらにこの行を

shellArgs: ['--login'],

こう編集します。

shellArgs: ['~'],

--loginを残したままだと起動に失敗するようになるので気をつけましょう。

~で起動時のカレントディレクトリを指定しているので、好きなパスに変えても問題ありません。ここに何も書かなければ/mnt/c/Users/ユーザ名がデフォルト値となるようです。

これで、次回起動時からbashがデフォルトで起動するようになります。

デフォルトシェルをzshなどに変えたい場合は、こちらを参考にデフォルトシェルを変更してください。

また、Hyperのショートカットキーについてはこちらを参考にしてください。

参考：WSL / Ubuntu / ZSH and Hyper Terminal | fcbrossard.net

Linuxで改行コードを確認/変更する

Sun, 23 Dec 2018 00:00:00 GMT

同僚からもらったテキストファイルの改行コードがWindowsの\r\nだったせいで、解析用のシェルスクリプトが上手く回らなかったので、改行コードの確認と変更方法のメモです。

OS毎の改行コード

WindowsとLinux、OS Xの改行コードは

OS	改行コード
Windows	`\r\n`
Linux (Unix)	`\n`
OS X	`\n`

となっています。

改行コードの確認

まずは改行コードの確認をします。確認にはodコマンドを使用します。デフォルトではodは8進数でファイル内容をダンプしますが、cオプションを付けることでASCIIコードとしてダンプされるので、改行コードが目に見えるようになります。

# 実際のファイルの中身
$ cat hoge.txt
hoge
fuga
piyo

# ASCIIコードでダンプ
$ od -c hoge.txt
0000000   h   o   g   e  \r  \n   f   u   g   a  \r  \n   p   i   y   o
0000020  \r  \n  \r  \n
0000024

はい、改行コードが\r\nなのが確認できました。これを\nに変換します。

改行コードの変更

改行コードの変換にはdos2unixコマンドを使用します。コマンドが見つからない場合はaptやyumでインストールしてください。

# Debian/Ubuntu系のLinuxの場合
$ sudo apt install dos2unix

# CentOS系のLinuxの場合
$ sudo yum install dos2unix

いよいよdos2unixコマンドで改行コードを変換します。使い方は簡単で、変換したいファイル名を指定するだけです。ファイルは上書きされるので注意してください。

# Windowsの改行コードをLinuxの改行コードへ変換。元のファイルに上書きされる
$ dos2unix hoge.txt

# 改行コードを確認。\nになっていることが確認できる
$ od -c hoge.txt
0000000   h   o   g   e  \n   f   u   g   a  \n   p   i   y   o  \n  \n
0000020

これでWindowsの改行コードをLinuxの改行コードに変換することができました。

ちなみに、反対にLinuxの改行コードからWindowsの改行コードへの変換はunix2dosコマンドを使えばできます。

# Linuxの改行コードをWindowsの改行コードへ変換
$ unix2dos hoge.txt

# 改行コードを確認。\r\nになっていることを確認できる
$ od -c hoge.txt
0000000   h   o   g   e  \r  \n   f   u   g   a  \r  \n   p   i   y   o
0000020  \r  \n  \r  \n
0000024

<script type="text/javascript"> (function(b,c,f,g,a,d,e){b.MoshimoAffiliateObject=a; b[a]=b[a]||function(){arguments.currentScript=c.currentScript ||c.scripts[c.scripts.length-2];(b[a].q=b[a].q||[]).push(arguments)}; c.getElementById(a)||(d=c.createElement(f),d.src=g, d.id=a,e=c.getElementsByTagName("body")[0],e.appendChild(d))}) (window,document,"script","//dn.msmstatic.com/site/cardlink/bundle.js?20220329","msmaflink"); msmaflink({"n":"Efficient Linuxコマンドライン ―開発と自分に磨きをかけるLinuxのテクノロジー","b":"オーム社","t":"","d":"https://m.media-amazon.com","c_p":"","p":["/images/I/41Mvx10W-wL.SL500.jpg"],"u":{"u":"https://www.amazon.co.jp/dp/4814400489","t":"amazon","r_v":""},"v":"2.1","b_l":[{"id":1,"u_tx":"Amazonで見る","u_bc":"#f79256","u_url":"https://www.amazon.co.jp/dp/4814400489","a_id":1183162,"p_id":170,"pl_id":27060,"pc_id":185,"s_n":"amazon","u_so":1},{"id":2,"u_tx":"楽天市場で見る","u_bc":"#f76956","u_url":"https://search.rakuten.co.jp/search/mall/Efficient%20Linux%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%83%A9%E3%82%A4%E3%83%B3%20%E2%80%95%E9%96%8B%E7%99%BA%E3%81%A8%E8%87%AA%E5%88%86%E3%81%AB%E7%A3%A8%E3%81%8D%E3%82%92%E3%81%8B%E3%81%91%E3%82%8BLinux%E3%81%AE%E3%83%86%E3%82%AF%E3%83%8E%E3%83%AD%E3%82%B8%E3%83%BC/","a_id":1183160,"p_id":54,"pl_id":27059,"pc_id":54,"s_n":"rakuten","u_so":2},{"id":3,"u_tx":"Yahoo!ショッピングで見る","u_bc":"#66a7ff","u_url":"https://shopping.yahoo.co.jp/search?first=1\u0026p=Efficient%20Linux%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%83%A9%E3%82%A4%E3%83%B3%20%E2%80%95%E9%96%8B%E7%99%BA%E3%81%A8%E8%87%AA%E5%88%86%E3%81%AB%E7%A3%A8%E3%81%8D%E3%82%92%E3%81%8B%E3%81%91%E3%82%8BLinux%E3%81%AE%E3%83%86%E3%82%AF%E3%83%8E%E3%83%AD%E3%82%B8%E3%83%BC","a_id":1187811,"p_id":1225,"pl_id":27061,"pc_id":1925,"s_n":"yahoo","u_so":3}],"eid":"EtS0x","s":"s"}); </script> <div id="msmaflink-EtS0x">リンク</div>

Nginx + GolangでWebアプリケーション開発～http編～

Mon, 17 Dec 2018 00:00:00 GMT

import LinkCard from "@components/misc/LinkCard.astro"

NginxとGo言語でWebアプリケーションの開発環境を整えたので、構築メモです。

環境はVirtualBox上で動いているCentOS 7になります。Nginxでアクセスを受けて、httpでGoに渡してGoで処理をさせたいと思います。

FastCGI編はこちら

Nginxの設定ファイルを修正

まだNginxをインストールしていない方はこちら

何があっても大丈夫なように、まず設定ファイルのバックアップを取っておきます。

$ sudo cp /etc/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf.backup2

/etc/nginx/conf.d/default.confを次のように修正します。

server {
    listen       80;
    server_name  localhost;

    location /fuga {
        proxy_pass      http://127.0.0.1:9000;
    }
}

confファイルに間違いがないか確認します。下記のように表示されたら問題ありません。

$ sudo nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

設定ファイルを再読み込みさせるために、Nginxを再起動させます。

$ sudo systemctl restart nginx

Goのプログラムを作成

Goの開発環境を作っていない方はこちら

先ほど設定した9000番ポートへアクセスしたら、Hello World!!!と出力するプログラムを作成します。

package main

import (
        "fmt"
        "net/http"
)

func main() {
        http.HandleFunc("/fuga", handler)
        http.ListenAndServe(":9000", nil)
}

func handler(w http.ResponseWriter, r *http.Request) {
        fmt.Fprint(w, "Hello World!!!")
}

あとはこいつを実行して、http://localhsot/fugaにアクセスすると、Hello World!!!が返ってきます。

# サーバ上から動作確認
$ curl http://localhost/fuga
Hello World!!!

ブラウザ経由でアクセスしてもHello World!!!が表示されることが確認できるかと思います。
(VirutualBoxのポートフォワーディング機能を使用しているため、8080ポートのアクセスがCentOSの80ポートへ転送される設定になっています。)

参考：nginxでgoを動かす - 冷やしブログはじめました

Nginx + GolangでWebアプリケーション開発～FastCGI編～

Sun, 16 Dec 2018 00:00:00 GMT

import LinkCard from "@components/misc/LinkCard.astro"

NginxとGo言語でWebアプリケーションの開発環境を整えたので、構築メモです。

環境はVirtualBox上で動いているCentOS 7になります。Fast CGIを使ってアクセスをNginxで受け取ってGoで処理をさせたいと思います。

http編はこちら

Nginxの設定ファイルを修正

まだNginxをインストールしていない場合はこちらを参考にNginxを導入してください。

まずはNginxを壊しても元に戻せるよう、設定ファイルのバックアップを取っておきます。

$ sudo cp /etc/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf.backup

これでconfがおかしくなっても元に戻せるので、やりたい放題できるようになりました。

/etc/nginx/conf.d/default.confを次のように修正してやります。

server {
    listen       80;
    server_name  localhost;

    location /hoge {
        fastcgi_pass    127.0.0.1:9000;
        include         /etc/nginx/fastcgi_params;
    }
}

この設定で、http://localhost/hoge以下へリクエストを送ると、127.0.0.1:9000へアクセスされるようになります。

confファイルが正しいかを確認します。下記のように表示されたら問題ありません。

$ sudo nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

ちなみに、正しくないconfだとこんな感じのエラーが表示されます。confのセミコロンを抜いてみました。

$ sudo nginx -t
nginx: [emerg] unexpected "}" in /etc/nginx/conf.d/default.conf:8
nginx: configuration file /etc/nginx/nginx.conf test failed

設定ファイルを再読み込みさせるために、Nginxを再起動します。

$ sudo systemctl restart nginx

Goのプログラムを作成

まだGoの開発環境を整えていない場合は、こちらを参考に環境構築をしてください。

先ほど設定した9000番ポートへのアクセスしたら、Hello World!!と出力するプログラムを作成します。

package main

import (
        "fmt"
        "net"
        "net/http"
        "net/http/fcgi"
)

func handler(w http.ResponseWriter, r *http.Request) {
        fmt.Fprintf(w, "Hello World!!")
}

func main() {
        l, _ := net.Listen("tcp", "127.0.0.1:9000")
        http.HandleFunc("/", handler)
        fcgi.Serve(l, nil)
}

あとはこいつを実行して、http://localhost/hoge以下にアクセスすると、Hello World!!が返ってきます。

# サーバ上で動作確認
$ curl http://localhost/hoge
Hello World!!

ブラウザ経由でアクセスしても、Hello World!!が表示されることが確認できるかと思います。
(VirutualBoxのポートフォワーディング機能を使用しているため、8080ポートのアクセスがCentOSの80ポートへ転送される設定になっています。)

参考：Nginx + Golang でWebアプリケーション開発を試してみた - umegusa's blog

Linux(CentOS, Ubuntu)にGo言語の開発環境を構築する

Sun, 02 Dec 2018 00:00:00 GMT

Go言語の開発環境を整えたので、その時のメモです。基本的には以下の公式サイトのGetting Startedに沿って環境を構築しました。

Download and install - The Go Programming Language

CentOS 7とUbuntu 18.04 LTSの2つのLinuxに開発環境を構築しましたが、同じ手順で構築できました。

Goの入手

まずはGoのバイナリを入手します。今回はCLIのみのCentOSを使用しているため、wgetで取得します。2019年11月現在は1.13.4が最新バージョンのようなので、これをダウンロードしてきます。

$ wget https://dl.google.com/go/go1.13.4.linux-amd64.tar.gz

/usr/local以下に展開します。公式サイトのコマンドほぼそのままですが、/usr/localはスーパーユーザーしか書き込み権限がないので、sudoをつけています。

$ sudo tar -C /usr/local -xzf go1.13.4.linux-amd64.tar.gz

Pathの設定

Goの実行ファイルにパスを通します。今回は自分だけgoコマンドが使えればいいので、~/.bash_profileの最後の行に環境変数の設定を追加します。
(zshを使っている場合は~/.zprofileの最後の行に追加してください。)

export PATH=$PATH:/usr/local/go/bin

これで一度ログアウトして再度ログインすると、goコマンドが使えるようになります。ログアウトしたくない場合は、sourceコマンドで.bash_profileを再読み込みしてやります。

$ source ~/.bash_profile

goコマンドが使えるようになったことを確認します。下記コマンドでgoのバージョンが表示されたら無事Pathが通ってます。

$ go version
go version go1.13.4 linux/amd64

動作確認

さて、これでGo言語の開発ができるようになったので、HelloWorldを動かしてみます。hello.goというファイルを作成し、以下のコードを書きます。

package main

import "fmt"

func main() {
	fmt.Printf("hello, world\n")
}

ビルドして、エラーが出ないことを確認します。

$ go build hello.go

実行します。hello, worldと表示されるのが確認できるかと思います。

$ ./hello
hello, world

これで、LinuxでGoの開発ができるようになりました。

$GOPATHの設定

:::caution 最近は$GOPATHじゃなくてGo Modulesを使用する流れが主流なので、こちらは設定する必要はないかもしれません。 :::

Go言語ではgo getコマンドを使用して簡単に外部ライブラリを導入することができますが、そのためにはGOPATHという環境変数を設定する必要があります。今回は以下を参考にgo getのデフォルトパスらしい$HOME/goをGOPATHとして指定します。

SettingGOPATH · golang/go Wiki · GitHub

~/.bash_profileの末尾に下記を追記してください。

export GOPATH=$HOME/go
export PATH=$PATH:$GOPATH/bin

最後に.bash_profileを再読み込みして完了です。

$ source ~/.bash_profile

Gitで秘密鍵を指定してリモートリポジトリを操作する

Sat, 24 Nov 2018 00:00:00 GMT

githubとbitbucketを併用している場合などは、~/.ssh/configにドメインごとにどの鍵を使用するか指定するのが一般的だと思います。
しかし、githubをマルチアカウントで運用するような場合は、ドメインが同じなのでこの方法は使えません。

前々から不便だなーと思っていたのですが、設定ファイルに頼らずに、リモートリポジトリを操作するときにどの鍵を使用するか指定できることを知ったので、その方法のメモです。

gitのバージョン確認

今回の方法は、gitのバージョン2.3から使用できるようなので、まずはgitのバージョン確認をします。

$ git --version
git version 2.7.4

どうやら対応しているようです。ちなみに環境はWSLなのでUbuntu 16.04です。

リモートリポジトリ操作時に鍵を指定する

リモートリポジトリを操作するときに鍵を指定するコマンドはこれです。GIT_SSH_COMMANDという環境変数を使います。

$ GIT_SSH_COMMAND='ssh -i 秘密鍵のパス' gitコマンド

例えば、git clone時に鍵を指定する場合はこんな感じになり、

$ GIT_SSH_COMMAND='ssh -i ~/.ssh/id_rsa' git clone リモートリポジトリ

git pushの場合はこんな感じになります。

$ GIT_SSH_COMMAND='ssh -i ~/.ssh/id_rsa' git push origin master

タイプ数は増えるものの自由に鍵を指定できるので、githubとかbitbucketのマルチアカウントの運用もストレスなく使えるようになりました。

参考サイト：git clone 時に秘密鍵を指定する #Git - Qiita

CentOSにnginxを導入する

Sun, 18 Nov 2018 00:00:00 GMT

勉強がてらCentOS 7.5にnginxを導入したのでそのメモです。

nginxをインストール

各種ディストリビューションへの導入方法は(英語ですが)以下の公式サイトに書いてあるので、それに従ってnginxを導入します。

nginx: Linux packages

nginxのリポジトリを追加

yumコマンドでnginxをインストールできるように、nginxのリポジトリをCentOSに追加します。

/etc/yum.repos.d/nginx.repoというファイルを作り、下記を記述します。CentOS 6系を使用している人はbaseurlの7の部分を6にしましょう。

[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/centos/7/$basearch/
gpgcheck=0
enabled=1

nginxのインストール

これでyumコマンドでnginxをインストールできるようになります。

$ sudo yum install nginx

無事インストールされたことを確認できました。

$ nginx -v
nginx version: nginx/1.14.1

nginxの起動と動作確認

nginxの起動

$ sudo systemctl start nginx

ちゃんと起動しました。

$ ps aux | grep nginx
root      2696  0.0  0.0  46404   968 ?        Ss   20:09   0:00 nginx: master process /usr/sbin/nginx -c /etc/nginx/nginx.conf
nginx     2697  0.0  0.1  46804  1924 ?        S    20:09   0:00 nginx: worker process

curlコマンドでの動作確認

まずはcurlコマンドで動作確認をします。CentOSから下記コマンドを実行します。

$ curl localhost

こんなhtmlのレスポンスが返ってきたら成功です。

<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<style>
    body {
        width: 35em;
        margin: 0 auto;
        font-family: Tahoma, Verdana, Arial, sans-serif;
    }
</style>
</head>
<body>
<h1>Welcome to nginx!</h1>
<p>If you see this page, the nginx web server is successfully installed and
working. Further configuration is required.</p>

<p>For online documentation and support please refer to
<a href="http://nginx.org/">nginx.org</a>.<br/>
Commercial support is available at
<a href="http://nginx.com/">nginx.com</a>.</p>

<p><em>Thank you for using nginx.</em></p>
</body>
</html>

ブラウザから動作確認

CentOS以外の外部のPCのブラウザから動作確認する場合は、http://CentOSサーバのIPアドレスでnginxの初期ページを表示できたら成功です。

表示できない場合は、CentOSでhttpアクセスを許可していない場合があります。下記コマンドの実行してみて、httpが出力されなかったら許可されていません。

$ sudo firewall-cmd --list-services --zone=public --permanent
ssh dhcpv6-client http

もしhttpがない場合は、httpアクセスを許可してやります。

# httpアクセスを許可
$ sudo firewall-cmd --add-service=http --zone=public --permanent

# 再読み込みして反映
$ sudo systemctl reload firewalld

これで、うまく表示できるようになると思います。

Linuxのデフォルトshellをzshに変更する

Sun, 18 Nov 2018 00:00:00 GMT

import LinkCard from "@components/misc/LinkCard.astro" import MoshimoAffiliate from "@components/misc/MoshimoAffiliate.astro"

基本的にbashよりzsh派なのですが、毎回デフォルトのshellを変更する方法を忘れるので設定方法を記録に残しておきます。

今回は、CentOS 7.5を使用します。

zshがインストール済みか確認

まずはzshがインストール済みかどうか確認です。インストール済みの場合はこのように表示されます。

$ which zsh
/bin/zsh

インストールされていない場合はこのように表示されます。

$ which zsh
/usr/bin/which: no zsh in (/usr/local/bin:/bin/:usr/bin:/usr/local/sbin:/usr/sbin)

インストールされていない場合はyumコマンドでインストールします。Debian系のLinuxを使用している場合はaptコマンドを使ってください。

$ sudo yum install zsh

デフォルトshellの変更

まずは、zshが使用できるかどうか確認します。

# -lオプションで使用できるshell一覧を表示。zshが含まれていることを確認
$ chsh -l
/bin/sh
/bin/bash
/sbin/nologin
/usr/bin/sh
/usr/bin/bash
/usr/sbin/nologin
/bin/zsh # <- これ

Ubuntuとかだと-lオプションがないと怒られる場合があります。その場合、以下で同様のことを確認できます。

$ cat /etc/shells # /etc/shells: valid login shells/bin/sh/bin/bash/bin/rbash/bin/dash/usr/bin/tmux/bin/zsh/usr/bin/zsh

デフォルトのshellをzshに変更します。

# -sオプションでデフォルトshellの種類を変更
$ chsh -s /bin/zsh

これで、次回ログイン時からはzshがデフォルトで起動するようになります。

現在のデフォルトシェルに何が設定されているかは、こちらをご覧ください。

VirtualBoxのホストキーを変更する

Sun, 18 Nov 2018 00:00:00 GMT

家ではErgodoxというキーボードを使用しているのですが、VirtualBoxのデフォルトホストキーである右Ctrlキーが存在しなくてハマったので、ホストキーの変更方法のメモです。環境は以下です。

Windows 10
VirtualBox 5.2.22

ちなみに、ホストキーが存在せず仮想マシンから脱出できなくなった場合、WindowsだったらShiftキーを5回連打して固定キー機能を呼び出せば脱出できました。

ホストキーの変更

VirtualBoxでファイル → 環境設定を選択して、設定画面を開きます。

そして、入力 -> 仮想マシンを選択します。ここでホストキーの設定を行います。

ホストキーの組み合わせのRight Controlと書いてある部分をクリックして任意のキーを押すと、ホストキーが変更されるので、あとはOKを押せばホストキーの変更は完了です。

今回は、左Windowsキーにホストキーを割り当てました。

これで、ホストキーが存在しなくて仮想マシンから脱出できない問題が解決されました。

OpenCVのcv::viz::writeCloudがis_block_type_valid(header->_block_use)とか_CrtlsValidHeapPointer(block)で落ちる

Sun, 11 Nov 2018 00:00:00 GMT

Visual Studio 2017でC++を書いて実行したら何やらエラーで落ちてしまいました。どうにもOpenCVの関数であるcv::viz::writeCloudを呼び出したときに落ちてるらしいことはわかったものの、解決するまでちょっと時間がかかったのでメモしておきます。

現象

ずっとDebugモードで動かしていたプログラムをReleaseモードで実行すると、このようなエラーが表示されました。

# エラー内容
File: minkernel\crts\ucrt\src\appcrt\heap\debug_heap.cpp
Line: 908

Expression: is_block_type_valid(header->_block_use)

むむむ。。。

偶発的に起こるエラーなのか定常的に出るエラーなのか調査するために何度か実行していると、違うエラーメッセージも表示されました。

# エラー内容
File: minkernel\crts\ucrt\src\appcrt\heap\debug_heap.cpp
Line: 904

Expression: _CrtIsValidHeapPointer(block)

ふむむ。。。なんかヒープが破壊されているのか？なんかメモリ周りのエラーっぽいです。

エラーメッセージでググってみると、異なるバージョンのVisual Studioでビルドしたライブラリを使用したり、古いVCで作ったプロジェクトを新しいVCにアップグレードした場合、このエラーが発生することがあるようです。

参考: _CrtIsValidHeapPointer(block) exception on load | Microsoft Learn

ただ、このPCはVC 2017以外入れたことないので、VCのバージョンの違いが原因ではなさそうです。

あとはアドレスの位置ずれが原因でも発生するようですが、基本スマートポインタとvectorくらいしか使っていなかったので、その可能性も薄そうです。

参考: クラス | C++ プログラミング解説

原因を切り分けていくとどうにもOpenCVのcv::viz::writeCloudを呼び出しているときに落ちている模様。
原因特定を進めていき、cv::viz::writeCloudに入力している引数たちの中身やサイズは問題なさそうなので、cv::viz::writeCloudの中で良からぬことが起きていそうだという可能性が浮上しました。

解決策

結論から言うと、OpenCVとVTKのバージョンを最新にすると解決しました。

今まで使用していたのは

OpenCV 3.4.0
VTK 8.1.1

だったのですが、これを最新安定版の

OpenCV 3.4.3
VTK 8.1.2

を使うようにしたら、上記のエラーは起こらなくなりました。

結局根本的な原因まではわからなかったのですが、ひとまず動くようになったためよしとしました。もしVTKとかOpenCVの不具合だったとしても、issueを立てるくらいしかできそうにないので・・・

【OpenCV 3.4】SIFTを使おうとするとError: The function/feature is not implementedと出力された

Sat, 10 Nov 2018 00:00:00 GMT

今までOpenCV 3.4.0を使用していたのですが、最近OpenCV 3.4.3にバージョンアップしました。バージョンアップ後にSIFTを使おうとするとちょっとハマったのでメモです。

現象

SIFTを使いたかったので、OpenCVのopencv_contribも一緒にビルドしました。しかし、いざSIFTを使ったプログラムを動かそうとすると、こんなエラーが表示され、SIFTを使えませんでした。

OpenCV: terminate handler is called! The last OpenCV error is:
OpenCV(3.4.3) Error: The function/feature is not implemented (This algorithm is patented and is excluded in this configuration; Set OPENCV_ENABLE_NONFREE CMake option and rebuild the library) in cv::xfeatures2d::SIFT::create, file D:\library\opencv-3.4.3\opencv_contrib-3.4.3\modules\xfeatures2d\src\sift.cpp, line 1207

特許で保護された機能を使うには、それ専用のオプションをつけてビルドしてね。ということらしいです。

SIFTは特許で保護されているので使えなかったわけですね。

対策

出力されたエラーを見るに、CMakeでOPENCV_ENABLE_NONFREEというオプションをつけて再度OpenCVをビルドすればいけそうな雰囲気です。CMakeのオプションを探せば確かにありましたこのオプション。

このオプションにチェックをつけてOpenCVをビルドし直します。そして再度SIFTを使ったプログラムをビルド&実行すると、無事にSIFTが動きました！！

Visual C++でM_PI(円周率)を使う

Sun, 04 Nov 2018 00:00:00 GMT

Visual C++で円周率の定義M_PIなどを使う場合、gccなどと同じ風に使おうとするとM_PIが見つからないと怒られてしまいます。

毎回Visual C++の場合どうやって書くんだっけなーとググって解決しているので、対応方法をまとめておこうかと思います。環境はVisual Studio 2017になります。

現象

Visual C++でM_PIを使いたい場合、gccなどと同じようにcmathをincludeしただけでは下記のようなエラーが出てコンパイルが通りません。

 error C2065: 'M_PI': 定義されていない識別子です。

対策

基本的にはcmathをincludeする前に、_USE_MATH_DEFINESをdefineしてやればコンパイルが通るようになります。

#define _USE_MATH_DEFINES  
#include <cmath>

参考： Math Constants | Microsoft Learn

注意点としては、他のヘッダファイルのincludeよりも前に_USE_MATH_DEFINESの定義を書きましょう。そうでないと、他のヘッダファイルが間接的にcmathをinluceしていた場合、エラーが解決しないので・・・。

この辺の詳しい原因はこちらのブログで詳しく解説してあり、非常に参考になりました。

定数M_PIが使えない - 需要のないページ

C++を独自に拡張するのは別にいいのですが、まずは標準のC++の仕様を満たした上で拡張してほしいものですね。頼むぞMicrosoft。

多視点三角測量(Multi view triangulation)のアルゴリズム

Sat, 03 Nov 2018 00:00:00 GMT

import MoshimoAffiliate from "@components/misc/MoshimoAffiliate.astro" import img1 from "./perspective_projection.jpg" import img2 from "./perspective_projection6.jpg" import img3 from "./perspective_projection2.jpg" import img4 from "./perspective_projection3-1.jpg" import img5 from "./perspective_projection4-1.jpg" import img6 from "./perspective_projection5.jpg" import img7 from "./perspective_projection7.jpg" import img8 from "./perspective_projection8.jpg" import img9 from "./perspective_projection9-1.jpg"

最近知ったのですが、OpenCVにもいつの間にか多視点三角測量(Multi view triangulation)が実装されていたんですね。

3D vision functionality — OpenCV Tutorials

ということで今回は、OpenCVのcv::sfm::triangulatePointsでも使われている、古典的なMulti view triangulationのアルゴリズムについて解説してみます。

triangulatePointsはこの書籍のアルゴリズムを実装してます。この本は昔ながらの有用な3次元系のアルゴリズムを網羅しているため、英語が苦にならない人にはお勧めです。

Multi view triangulationとは

複数の画像の特徴点の対応付けと透視投影変換行列から、その特徴点の3次元座標を求めるのがMulti view triangulationです。すなわち、下記の式を満たす世界座標点 $\boldsymbol{X}_w=[X_w, Y_w, Z_w, 1]^T$ を見つけるわけです。

実際には諸々誤差の影響ですべての画像でこの式をぴったり満たす世界座標点は見つからないので、なるべく満たしそうな世界座標点を線形的に見つけてやります。

基本的な考え方としては下図のように、再投影誤差(画像座標点と世界座標点を画像に投影した点の距離)が最小になるような世界座標点が、求めたい3次元点だろうという考えです。

Multi view triangulationのアルゴリズム

では実際に世界座標点の導出法について説明していきます。まず、上の透視投影変換の式を展開するとこのようになります。

表記を簡単にするために、透視投影変換行列の各行を$\boldsymbol{p}_1^T, \boldsymbol{p}_2^T, \boldsymbol{p}_3^T$とおきます。

すると先ほどの式はこうなりますね。

ここで、(3)'を(1)'と(2)'に代入して $s$ を消して整理してやります。

特徴点の対応付けは複数枚の画像でわかっているはずですので、実際にはこの式は画像数分成り立ちます。

これを行列式で表すと

という風になります。実際は $[X_w, Y_w, Z_w, 1]^T$ を定数倍してもこの式は成り立つため、スケールの要素を加味して、

とおいてやります。 $S[X_w, Y_w, Z_w, 1]^T = [X'_w, Y'_w, Z'_w, S]^T$ とおいたわけですね。

さて、あとはこの行列の最小特異値に対応する特異値ベクトルを求めることで、一番それらしい $[X'_w, Y'_w, Z'_w, S]^T$ が求まります。

最後に、スケール要素を削除して $[X_w, Y_w, Z_w] = [X'_w/S, Y'_w/S, Z'_w/S]^T$ としてやります。これで、特徴点の対応付けから世界座標点を求めることができました。

pip install --upgrade pipでpipのバージョンを上げるとImportError: cannot import name mainで動かなくなった話

Sun, 28 Oct 2018 00:00:00 GMT

aptでpipをインストールした後にpipのバージョンアップを試みると、pipが動かなくなってしまったのでその対策をまとめます。

現象

WSL (Windows Subsysmte for Linux)、つまりUbuntu 16.04でpipのバージョン9以上を使いたかったのです。でもaptでインストールされたのはpip 8.1.1だったのでpipをアップグレードをしたら、pipが壊れて動かなくなりました。

やったこと

# pipのインストール
$ sudo apt install python-pip

# バージョン確認
$ pip --version
pip 8.1.1 from /usr/lib/python2.7/dist-packages (python 2.7)

# pip 9以上を使いたかったのでのバージョンアップ
$ pip install --upgrade pip

起きたエラー

pipコマンドが壊れて、pipで何かやろうとするとこのエラーが出るようになってしまいました。

$ pip
Traceback (most recent call last):
  File "/usr/bin/pip", line 9, in <module>
    from pip import main
ImportError: cannot import name main

なぜこのエラーが起きるかの原因については、こちらのサイトがわかりやすかったです。どうにもpip 10からディレクトリ構造など諸々変わってしまったのが原因みたい・・・。

pip install --upgrade pip (10.0.0) 後の奇妙な挙動について - 雑記

対策

pipのアンインストール

とりあえずpipを一旦アンインストールします。

# pipのアンインストール
$ sudo apt --purge remove python-pip

このままもう1回aptでpipをインストールしても動かなくなってしまっているので、pipを完全にアンインストールしてやります。

$ python -m pip uninstall pip

これでpipインストール前の綺麗な状態に戻りました。

aptを使わずにpipをインストール

aptのpipパッケージが新しくなればこのアップデートで動かなくなる問題も解決するかもしれませんが、今回はaptを使ったpipのインストールは諦めて、使わない方法に切り替えます。

# aptを使わずpipのインストール
$ curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py
$ sudo python get-pip.py

これでpipがインストールされました。バージョンを確認すると、目的のpip 9以上がインストールされているのが確認できます。

$ pip --version
pip 18.1 from /usr/local/lib/python2.7/dist-packages/pip (python 2.7)

カメラ座標系から世界座標系への変換～外部パラメータの逆変換～

Sat, 27 Oct 2018 00:00:00 GMT

import LinkCard from "@components/misc/LinkCard.astro" import img1 from "./CV-1.jpg" import img2 from "./スライド3-1.jpg" import img3 from "./extrinsic.jpg" import img4 from "./extrinsic3.jpg" import img5 from "./extrinsic5.jpg" import img6 from "./extrinsic4.jpg" import img7 from "./extrinsic6-1.jpg"

外部パラメータは、世界座標系からカメラ座標系へ変換する行列でした。今回は、この外部パラメータの逆変換、すなわちカメラ座標系から世界座標系への変換を考えてみます。

世界座標系からカメラ座標系への変換

そもそも外部パラメータについて知りたい人は以下で解説しています。

まずは復習ですが、外部パラメータを使って世界座標系からカメラ座標系へ変換はこのように行いました。

そして、この変換は同次座標系で表された変換でした。同次座標系を使わない場合の変換はこちらになります。

ちょっとこのままでは使いにくいので、回転行列を$\boldsymbol{R}$、並進ベクトルを$\boldsymbol{t}$とおきます。

この同次座標を使わない形を覚えておいてください。

カメラ座標系から世界座標系への変換

さて、ではいよいよ外部パラメータの逆変換を求めてみましょう。まずはカメラ座標系の原点を世界座標系原点と一致させるように移動させてやります。

式で表すとこうなります。

さらに、カメラ座標系の各座標軸を世界座標系と合うように回転させてやります。

つまり式で表すとこうですね。

これでカメラ座標点から世界座標点へ変換する式を導出できました。これで任意の3次元点をカメラ座標系から世界座標系へ変換することができますね。

個人的にはこの変換は、世界座標系でみたカメラ位置の導出によく使います。すなわち$[X_c, Y_c, Z_c]^T=[0, 0, 0]^T$の場合です。

scrapbox-converterの使い方～EvernoteからScrapboxへの移行～

Sun, 14 Oct 2018 00:00:00 GMT

EvernoteからScrapboxに移行するときに、scrapbox-converterというツールを使えば簡単に移行できるので、その使い方をまとめておきます。

今回は、Windows10のWindows Subsystem for Linux (WSL)、すなわちBash on Windows上でscrapbox-converterを動かします。

※ 記事の最後にも書いてありますが、ありがたいツールではあるものの、現状まだまだな雰囲気を感じるツールです。うまく変換できたらラッキーくらいで試してみるのがいいと思います。
※ どうやらもう少ししたらEvernote XMLからの変換精度がよくなる模様(参考：僕の作ったScrapbox関連ツールの紹介)

npmのインストール

まずはBashを開いてにnpmコマンドをインストールします。すでにインストール済みの場合はこの手順は飛ばしてください。

# nodejsとnpmをインストール
$ sudo apt update 
$ sudo apt install nodejs npm

# aptコマンドでインストールされるnodejsとnpmはバージョンが古いので、念のため最新版をインストール
$ npm --version
3.5.2 # バージョンが古いことを確認
$ sudo npm cache clean 
$ sudo npm install n -g
$ npm --version
6.4.1 # バージョンが新しくなったことを確認

参考：Ubuntuに最新のNode.jsを難なくインストールする

scrapbox-converterのインストール

npmをインストールしたら、scrapbox-converterをインストールします。

sudo npm install -g scrapbox-converter

GyazoのAPIトークンを取得

Evernote XML (.exml)からjsonへ変換する場合、画像はGyazoにアップロードされるようなので、Gyazoのアカウントを持っていないなら作成しましょう。さらにscrapbox-converterで変換する場合、GyazoのアクセスIトークンが必要になるので、こちらから取得しましょう。

Gyazo

APIトークンを作成する場合、こんな画面に行き着くと思いますが、Nameに任意の文字列、Callback URLの任意のURLを入力します。どうやらCallback URLはURLの形をしてたら存在しないアドレスでも大丈夫っぽいです。(今回は適当にhttp://piyopiyo.comにしましたw)

トークンを作成したら、トークンの詳細からAccess TokenをGenerateできると思うので、Generateしてやります。すると、Your access tokenという部分に文字列が表示されるので、この文字列を控えておきましょう。

Evernote XML (.exml)からjsonファイルへ変換

さて、いよいよscrapbox-converterを動かしましょう。まずは、環境変数にトークンを設定します。

# アクセストークンを見つけられるようにする
$ export GYAZO_ACCESS_TOKEN="アクセストークンの文字列"

そして、exmlファイルをjsonへ変換します。

# exmlからjsonへ変換。WSLのBashでは/mnt以下にCドライブとかDドライブがマウントされてる風になってる
$ scrapbox-converter /mnt/c/tmp/hogehoge.enex > /mnt/c/tmp/import.json

これでScrapboxでインポートできる形式になりました。

参考：GitHub - pastak/scrapbox-converter: import scrapbox from markdown|html|enex files · GitHub

Scrapboxでインポート

作成したjsonファイルを、ScrapboxのSetting -> Page Data -> Import Pagesから読み込みます。

するとScrapboxにjsonに含まれるページがインポートされます。

感想

このscrapbox-converter、Evernote XMLを一気にjsonに変換できて便利なんですけど、レイアウトの精度はいまいちな気がします。あとは、エラーが出力されて変換できないこともあったので、今後に期待ですかね。

きれいに移行したいなら、1件1件手作業で移行させるのが今のところ一番なんですかね。

<script type="text/javascript"> (function(b,c,f,g,a,d,e){b.MoshimoAffiliateObject=a; b[a]=b[a]||function(){arguments.currentScript=c.currentScript ||c.scripts[c.scripts.length-2];(b[a].q=b[a].q||[]).push(arguments)}; c.getElementById(a)||(d=c.createElement(f),d.src=g, d.id=a,e=c.getElementsByTagName("body")[0],e.appendChild(d))}) (window,document,"script","//dn.msmstatic.com/site/cardlink/bundle.js?20220329","msmaflink"); msmaflink({"n":"Scrapbox情報整理術","b":"","t":"","d":"https://m.media-amazon.com","c_p":"","p":["/images/I/51yMZ+QU40L.SL500.jpg"],"u":{"u":"https://www.amazon.co.jp/dp/B07GJFBWWZ","t":"amazon","r_v":""},"v":"2.1","b_l":[{"id":1,"u_tx":"Amazonで見る","u_bc":"#f79256","u_url":"https://www.amazon.co.jp/dp/B07GJFBWWZ","a_id":1183162,"p_id":170,"pl_id":27060,"pc_id":185,"s_n":"amazon","u_so":1},{"id":2,"u_tx":"楽天市場で見る","u_bc":"#f76956","u_url":"https://search.rakuten.co.jp/search/mall/Scrapbox%E6%83%85%E5%A0%B1%E6%95%B4%E7%90%86%E8%A1%93/","a_id":1183160,"p_id":54,"pl_id":27059,"pc_id":54,"s_n":"rakuten","u_so":2},{"id":3,"u_tx":"Yahoo!ショッピングで見る","u_bc":"#66a7ff","u_url":"https://shopping.yahoo.co.jp/search?first=1\u0026p=Scrapbox%E6%83%85%E5%A0%B1%E6%95%B4%E7%90%86%E8%A1%93","a_id":1187811,"p_id":1225,"pl_id":27061,"pc_id":1925,"s_n":"yahoo","u_so":3}],"eid":"3cuY5","s":"s"}); </script> <div id="msmaflink-3cuY5">リンク</div>

画像座標系からカメラ座標系への変換

Sat, 13 Oct 2018 00:00:00 GMT

import LinkCard from "@components/misc/LinkCard.astro" import img1 from "./image2camera-1.jpg" import img2 from "./キャプチャ2.png" import img3 from "./image2camera2.jpg" import img4 from "./image2camera3-1.jpg"

画像座標点をカメラ座標点に変換することを考えてみます。

タイトル詐欺で申し訳ないですが、結論から言うと画像座標点をカメラ座標点への変換はできません。できるのはカメラ座標系原点からカメラ座標点方向へのベクトルを計算することだけです。

まぁ、2次元から3次元への変換なんて、明らかに奥行きの情報が足りてないから当然ですよね。なので今回は、このベクトル変換方法についてまとめてみます。

画像座標点からカメラ座標ベクトルへの変換

内部パラメータが既知の場合、カメラ座標系原点からカメラ座標点方向を計算できます。

これを説明しやすくするためカメラ座標ベクトルと呼ぶことにします。下の図の赤のベクトルのことですね。

このカメラ座標ベクトルの求め方を今回はまとめてみます。

カメラ座標ベクトルとか画像座標点に内部パラメータの逆行列を掛ければいいんでしょ？とか思ってるそこのあなた！！逆行列の計算コストはそれなりに高いです。

そんなことしなくてもカメラ座標ベクトルは求められます。この辺の話は、内部パラメータの意味を理解してればわかると思います。

内部パラメータの意味を知らない人はまずはこちらを理解しましょう。

それでは、カメラ座標ベクトルの求め方を順を追って説明します。

なお、内部パラメータは例によってこれで表記します。

1. 画像座標系原点を移動させる

まずは考えやすくするため、カメラ座標系のZ軸上に画像座標系原点があると考えます。

すなわち、光学中心の$(u,v)$分画像座標系原点を移動させるので、画像座標系$(u,v)$は移動後$(u-c_x,v-c_y)$となります。

2. カメラ座標ベクトルを求める

さて、ここで内部パラメータの意味を思い出してほしいのですが、カメラ座標点を焦点距離$f$の位置に集めたものが画像座標系でした。

なので、画像座標点の奥行は$f$ということになるので、$(u-c_x, v-c_y,f)$となります。

ですので、カメラ座標ベクトルは$(u-c_x, v-c_y,f)$となります。

$f_x$と$f_y$の値が異なる場合は、$(\frac{u-c_x}{f_x},\frac{v-c_y}{f_y},1)$とした方が考えやすいかもです。

Linuxで再帰的に特定の拡張子のファイルのみ削除

Sat, 13 Oct 2018 00:00:00 GMT

特定のディレクトリ内の、指定した拡張子のファイルを再帰的に削除するコマンドをメモとして残しておきます。

基本コマンド

# 例としてディレクトリ内のテキストファイルを再帰的に削除するコマンド
$ find ディレクトリパス -name "*.txt" | xargs rm

意味としてはコマンドのまんまなのですが、一応コマンドの内容を解説しておきます。このコマンドは以下の手順で再帰的に特定の拡張子のファイルを削除しています。

findコマンドでディレクトリ内の特定の拡張子のファイルパスを再帰的に探索
探索したファイルパスをrmコマンドに渡して削除

ディレクトリ名に拡張子が含まれている場合

上記のコマンドだと(滅多にないと思いますが)、hoge.txtみたいな名前のディレクトリが存在してた場合はファイルの削除は成功するものの、下記のようなエラーが表示されます。

# hoge.txtはディレクトリのため、オプションなしのrmコマンドでは削除に失敗する
$ find hoge -name "*.txt" | xargs rm
rm: cannot remove 'hoge/hoge.txt': Is a directory

この場合はちょっとタイプ数は増えますが、下記コマンドを使いましょう(エラーが気にならないなら別に使わなくてもいいです)。

$ find ディレクトリパス -name "*.txt" -type f | xargs rm

findコマンドのtype -fオプションは、探索するのをファイルのみに制限します。

このオプションをつけないとファイルだろうがディレクトリだろうが、一致する名前のものをすべて探索しちゃうので、ディレクトリも削除しようとしてしまい、エラーが出力されるわけです。

<script type="text/javascript"> (function(b,c,f,g,a,d,e){b.MoshimoAffiliateObject=a; b[a]=b[a]||function(){arguments.currentScript=c.currentScript ||c.scripts[c.scripts.length-2];(b[a].q=b[a].q||[]).push(arguments)}; c.getElementById(a)||(d=c.createElement(f),d.src=g, d.id=a,e=c.getElementsByTagName("body")[0],e.appendChild(d))}) (window,document,"script","//dn.msmstatic.com/site/cardlink/bundle.js?20220329","msmaflink"); msmaflink({"n":"ITエンジニア1年生のためのまんがでわかるLinux コマンド＆シェルスクリプト基礎編","b":"","t":"","d":"https://m.media-amazon.com","c_p":"","p":["/images/I/51jflVQho1L.SL500.jpg"],"u":{"u":"https://www.amazon.co.jp/dp/B09XM7PL4P","t":"amazon","r_v":""},"v":"2.1","b_l":[{"id":1,"u_tx":"Amazonで見る","u_bc":"#f79256","u_url":"https://www.amazon.co.jp/dp/B09XM7PL4P","a_id":1183162,"p_id":170,"pl_id":27060,"pc_id":185,"s_n":"amazon","u_so":1},{"id":2,"u_tx":"楽天市場で見る","u_bc":"#f76956","u_url":"https://search.rakuten.co.jp/search/mall/IT%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A21%E5%B9%B4%E7%94%9F%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE%20%E3%81%BE%E3%82%93%E3%81%8C%E3%81%A7%E3%82%8F%E3%81%8B%E3%82%8BLinux%20%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%EF%BC%86%E3%82%B7%E3%82%A7%E3%83%AB%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88%E5%9F%BA%E7%A4%8E%E7%B7%A8/","a_id":1183160,"p_id":54,"pl_id":27059,"pc_id":54,"s_n":"rakuten","u_so":2},{"id":3,"u_tx":"Yahoo!ショッピングで見る","u_bc":"#66a7ff","u_url":"https://shopping.yahoo.co.jp/search?first=1\u0026p=IT%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A21%E5%B9%B4%E7%94%9F%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE%20%E3%81%BE%E3%82%93%E3%81%8C%E3%81%A7%E3%82%8F%E3%81%8B%E3%82%8BLinux%20%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%EF%BC%86%E3%82%B7%E3%82%A7%E3%83%AB%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88%E5%9F%BA%E7%A4%8E%E7%B7%A8","a_id":1187811,"p_id":1225,"pl_id":27061,"pc_id":1925,"s_n":"yahoo","u_so":3}],"eid":"7YXPr","s":"s"}); </script> <div id="msmaflink-7YXPr">リンク</div>

The Android Gradle plugin supports only Kotlin Gradle plugin version 1.2.51 and higher ～Kotlin Gradle pluginのバージョンが古いと怒られた話～

Mon, 08 Oct 2018 00:00:00 GMT

エラー

久しぶりにAndroid Studioを起動して、促されるままに諸々バージョンアップしたら、↓↓のように怒られて作ってたアプリのbuildが失敗するようになってしまいました。

The Android Gradle plugin supports only Kotlin Gradle plugin version 1.2.51 and higher. Project 'hogehoge' is using version 1.1.51.

そのうちまた出会いそうな予感がするので、対応メモを残しておこうと思います。

対策

これが作ってるアプリのbuild.gradleです。

buildscript {
    ext.kotlin_version = '1.1.51' // ここを修正
    repositories {
        jcenter()

        maven {
            url 'https://maven.google.com'
        }
        google()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.2.0'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        jcenter()
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

2行目のext.kotlin_version = '1.1.51'のバージョン部分を1.2.51に変更するだけです。簡単ですね。

Ceres Solverのビルド on Windows10 + Visual Studio 2017

Sun, 30 Sep 2018 00:00:00 GMT

Ceres SolverはGoogle謹製の非線形最小二乗問題のソルバーライブラリです。
とても便利に使わせてもらってるのですが、毎回ビルドに躓くので、ビルド手順をメモっておきます。
今回はCXSparseもSuiteSparseもすべて使った、盛り盛りの状態でビルドしてみようと思います。

開発環境

私の開発環境はこんな感じです。

Windows 10
CMake 3.10.0
Visual Studio 2017

依存ライブラリの入手 & ビルド

Ceres Solverは色々と依存ライブラリがあるので、まずは各種依存ライブラリを入手&ビルドします。

Eigen
公式サイトから最新安定版(現時点Eigen 3.3.5)をダウンロードします。Eigenはテンプレートライブラリなので、ビルドは不要です。
gflags
GitHubのリポジトリから最新安定版(現時点gflags 2.2.1)をダウンロードして展開 & CMakeでVisual Studio用のプロジェクトファイルを作ってビルドします。特に問題なくビルドできると思います。 CMAKE_INSTALL_PREFIXは適時適当な場所に設定してください。
glog
GitHubのリポジトリから最新安定版(現時点glog 0.3.5)をダウンロードして展開 & CMakeとVSでビルドします。
CMAKE_INSTALL_PREFIXは適時適当な場所に設定してください。
CMakeのビルドオプションにgflags_DIRがあるので、せっかくなのでgflagsのビルドディレクトリを指定しましょう。
SuiteSparse
公式のSuiteSparseはWindowsをサポートしていません。
公式サイトにはWindows使ってる人はsuitesparse-metis-for-windows使ってみてねと書いてあったので、これの最新安定版(現時 v1.4.0)をダウンロードします。CMakeは初期状態のままで問題なくビルドできると思います。
SUITESPARSE_INSTALL_PREFIXは適時適当な場所に設定してください。
intel TBB
公式サイトから最新安定版(現時点Threading Building Blocks 2019)をダウンロードします。ビルド済みのバイナリが配られているので、今回はそれを使います。

Ceres Solverのビルド

最新安定版のCeres Solver(現時点1.14.0)を下記サイトの「latest stable release」といういうリンクから入手します。
git cloneで入手してもよいですが、手に入るのは最新の開発版で安定していない可能性があるので、特にこだわりがなければ最新安定板の方を入手しましょう。

Installation — Ceres Solver

まずはそのままCMakeのConfigureを実行してみます。CMakeのAdvancedにチェックを入れておいてください。EIGEN_INCLUDE_DIRが設定されてないよ！と怒られるので、EIGEN_INCLUDE_DIRにEIGEN_ROOTを設定してもう一回実行します。EIGEN_ROOTはEigenのルートディレクトリです。
一応CMakeの実行でエラーが出なくなると思います。もしglog_DIRがないと怒られたらglogのビルドディレクトリを、gflags_DIRがないと怒られたらgflagsのビルドディレクトリを指定してCMakeを実行してください。
blasの設定をします。便宜上CMakeのSUITESPARSE_INSTALL_PREFIXで設定したディレクトリをSuiteSparse_INSTALLと表しています。下記を設定してConfigureを実行します。
1. BLAS_blas_LIBRARY : SuiteSparse_INSTALL/lib64/lapack_blas_windows/libblas.lib
lapackを設定します。下記を設定してConfigureを実行します。
1. LAPACK_lapack_LIBRARY : SuiteSparse_INSTALL/lib64/lapack_blas_windows/liblapack.lib
2. LAPACKにチェックを入れる
SuiteSparse周りのCMakeオプションを設定します。下記を設定してConfigureを実行します。
1. AMD_INCLUDE_DIR : SuiteSparse_INSTALL/include/suitesparse
2. AMD_LIBRARY : SuiteSparse_INSTALL/lib/libamd.lib
3. CAMD_INCLUDE_DIR : SuiteSparse_INSTALL/include/suitesparse
4. CAMD_LIBRARY : SuiteSparse_INSTALL/lib/libcamd.lib
5. CCOLAMD_INCLUDE_DIR: SuiteSparse_INSTALL/include/suitesparse
6. CCOLAMD_LIBRARY : SuiteSparse_INSTALL/lib/libccolamd.lib
7. CHOLMOD_INCLUDE_DIR: SuiteSparse_INSTALL/include/suitesparse
8. CHOLMOD_LIBRARY : SuiteSparse_INSTALL/lib/libcholmod.lib
9. COLAMD_INCLUDE_DIR: SuiteSparse_INSTALL/include/suitesparse
10. COLAMD_LIBRARY : SuiteSparse_INSTALL/lib/libcolamd.lib
11. SUITESPARSEQR_INCLUDE_DIR : SuiteSparse_INSTALL/include/suitesparse
12. SUITESPARSEQR_LIBRARY : SuiteSparse_INSTALL/lib/libspqr.lib
13. SUITESPARSE_CONFIG_INCLUDE_DIR : SuiteSparse_INSTALL/include/suitesparse
14. SUITESPARSE_CONFIG_LIBRARY : SuiteSparse_INSTALL/lib/suitesparseconfig.lib
15. METIS_LIBRARY : SuiteSparse_INSTALL/lib/metis.lib
16. SUITESPARSE にチェックを入れる
CXSparse周りのCMakeオプションを設定します。
1. CXSparse_INCLUDE_DIR : SuiteSparse_INSTALL/include/suitesparseを設定してConfigure
2. CXSparseにチェックを入れる
3. CXSPARSE_INCLUDE_DIR : SuiteSparse_INSTALL/lib/libcxsparse.libを設定してConfigure
intel TBB周りのCMakeオプションを設定します。便宜上TBBのダウンロードディレクトリをTBB_DIRと表記します。下記を設定してConfigureを実行します。
1. TBB_INCLUDE_DIRS : TBB_DIR/include
2. TBB_tbb_LIBRARY_DEBUG : TBB_DIR/lib/intel64/vc14_uwp/tbb_debug.lib
3. TBB_tbb_LIBRARY_RELEASE : TBB_DIR/lib/intel64/vc14_uwp/tbb.lib
4. TBB_tbb_preview_LIBRARY_DEBUG : TBB_DIR/lib/intel64/vc14_uwp/tbb_preview_debug.lib
5. TBB_tbb_preview_LIBRARY_RELEASE : TBB_DIR/lib/intel64/vc14_uwp/tbb_preview.lib
6. TBB_tbbmalloc_LIBRARY_DEBUG : TBB_DIR/lib/intel64/vc14_uwp/tbbmalloc_debug.lib
7. TBB_tbbmalloc_LIBRARY_RELEASE : TBB_DIR/lib/intel64/vc14_uwp/tbbmalloc.lib
CMakeのGenerateを実行。これでようやくVisual Studio 2017のプロジェクトファイルが出来上がります。
最後にVisual Studio 2017でビルドしてやればCeres Solverのビルド完了です！！

OpenCVのfindEssentialMatでの内部パラメータの用途

Mon, 17 Sep 2018 00:00:00 GMT

5-point algorithm (5点アルゴリズム)を使いたくて、OpenCVに確か実装されてたよなーって思って調べてみると、なぜか関数の入力に内部パラメータが必要とされていました。

OpenCVの5-point algorithmは以下の論文を実装してるはずなので、軽く読んでみたけどやっぱり焦点距離は必要ない気がしたので、OpenCVのコードを見てみました。

Nistér, D. An efficient solution to the five-point relative pose problem, CVPR 2003.

findEssentialMat

OpenCVで5-point algorithmを扱っているのはfindEssentialMatという関数で、中身はこんな感じになっています。

// Input should be a vector of n 2D points or a Nx2 matrix
cv::Mat cv::findEssentialMat( InputArray _points1, InputArray _points2, InputArray _cameraMatrix,
                              int method, double prob, double threshold, OutputArray _mask)
{
    CV_INSTRUMENT_REGION();

    Mat points1, points2, cameraMatrix;
    _points1.getMat().convertTo(points1, CV_64F);
    _points2.getMat().convertTo(points2, CV_64F);
    _cameraMatrix.getMat().convertTo(cameraMatrix, CV_64F);

    int npoints = points1.checkVector(2);
    CV_Assert( npoints >= 0 && points2.checkVector(2) == npoints &&
                              points1.type() == points2.type());

    CV_Assert(cameraMatrix.rows == 3 && cameraMatrix.cols == 3 && cameraMatrix.channels() == 1);

    if (points1.channels() > 1)
    {
        points1 = points1.reshape(1, npoints);
        points2 = points2.reshape(1, npoints);
    }

    double fx = cameraMatrix.at<double>(0,0);
    double fy = cameraMatrix.at<double>(1,1);
    double cx = cameraMatrix.at<double>(0,2);
    double cy = cameraMatrix.at<double>(1,2);

    points1.col(0) = (points1.col(0) - cx) / fx;
    points2.col(0) = (points2.col(0) - cx) / fx;
    points1.col(1) = (points1.col(1) - cy) / fy;
    points2.col(1) = (points2.col(1) - cy) / fy;

    // Reshape data to fit opencv ransac function
    points1 = points1.reshape(2, npoints);
    points2 = points2.reshape(2, npoints);

    threshold /= (fx+fy)/2;

    Mat E;
    if( method == RANSAC )
        createRANSACPointSetRegistrator(makePtr<EMEstimatorCallback>(), 5, threshold, prob)->run(points1, points2, E, _mask);
    else
        createLMeDSPointSetRegistrator(makePtr<EMEstimatorCallback>(), 5, prob)->run(points1, points2, E, _mask);

    return E;
}

29行目から32行目のこの部分で内部パラメータを使っています。どうにも画像座標をカメラ座標へ変換するのに使っているようです。

points1.col(0) = (points1.col(0) - cx) / fx;
points2.col(0) = (points2.col(0) - cx) / fx;
points1.col(1) = (points1.col(1) - cy) / fy;
points2.col(1) = (points2.col(1) - cy) / fy;

また、38行目で焦点距離でRANSACで使う閾値を除算しています。これは29~32行目で焦点距離で除算してるのに合わせてるだけっぽいです。

threshold /= (fx+fy)/2;

なのでおそらく、ここでは焦点距離の値は何でもよくて、画像座標系の原点を画像の左上から画像の中心(光学中心)に移動させるっていう意味合いが強いのだと思います。

ですので、あらかじめ各特徴点を光学中心を原点にしたものに変換してから_points1, _points2に与えてやれば、内部パラメータは焦点距離=1.0, 光学中心=(0.0, 0.0)としても多分問題ないです。

だからこんな感じでデフォルトパラメータの焦点距離が1.0で光学中心が(0.0, 0.0)になっているのでしょうね。

CV_EXPORTS_W Mat findEssentialMat( InputArray points1, InputArray points2,
                                 double focal = 1.0, Point2d pp = Point2d(0, 0),
                                 int method = RANSAC, double prob = 0.999,
                                 double threshold = 1.0, OutputArray mask = noArray() );

findEssentialMatは2枚の画像で同じ内部パラメータを使う前提なのですが、あらかじめカメラ座標系に変換してやって_points1, _points2に渡してやることで、2枚の画像で別々の内部パラメータを使うことができるはずです。

※ 論文もコードも深追いしたわけではないので、間違えがあれば教えてください。

<script type="text/javascript"> (function(b,c,f,g,a,d,e){b.MoshimoAffiliateObject=a; b[a]=b[a]||function(){arguments.currentScript=c.currentScript ||c.scripts[c.scripts.length-2];(b[a].q=b[a].q||[]).push(arguments)}; c.getElementById(a)||(d=c.createElement(f),d.src=g, d.id=a,e=c.getElementsByTagName("body")[0],e.appendChild(d))}) (window,document,"script","//dn.msmstatic.com/site/cardlink/bundle.js?20220329","msmaflink"); msmaflink({"n":"詳解 OpenCV 3 ―コンピュータビジョンライブラリを使った画像処理・認識","b":"オライリージャパン","t":"","d":"https://m.media-amazon.com","c_p":"","p":["/images/I/51PnbcCkunL.SL500.jpg"],"u":{"u":"https://www.amazon.co.jp/dp/4873118379","t":"amazon","r_v":""},"v":"2.1","b_l":[{"id":1,"u_tx":"Amazonで見る","u_bc":"#f79256","u_url":"https://www.amazon.co.jp/dp/4873118379","a_id":1183162,"p_id":170,"pl_id":27060,"pc_id":185,"s_n":"amazon","u_so":1},{"id":2,"u_tx":"楽天市場で見る","u_bc":"#f76956","u_url":"https://search.rakuten.co.jp/search/mall/%E8%A9%B3%E8%A7%A3%20OpenCV%203%20%E2%80%95%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%82%BF%E3%83%93%E3%82%B8%E3%83%A7%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86%E3%83%BB%E8%AA%8D%E8%AD%98/","a_id":1183160,"p_id":54,"pl_id":27059,"pc_id":54,"s_n":"rakuten","u_so":2},{"id":3,"u_tx":"Yahoo!ショッピングで見る","u_bc":"#66a7ff","u_url":"https://shopping.yahoo.co.jp/search?first=1\u0026p=%E8%A9%B3%E8%A7%A3%20OpenCV%203%20%E2%80%95%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%82%BF%E3%83%93%E3%82%B8%E3%83%A7%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86%E3%83%BB%E8%AA%8D%E8%AD%98","a_id":1187811,"p_id":1225,"pl_id":27061,"pc_id":1925,"s_n":"yahoo","u_so":3}],"eid":"se79w","s":"s"}); </script> <div id="msmaflink-se79w">リンク</div>

SfMのOSS：Bundlerを動かしてみる in Windows 10 (動きませんでした)

Sun, 09 Sep 2018 00:00:00 GMT

最初に結論を述べておくと、Windows 10でBundlerは動きませんでした。ごめんなさい。

動かないまま力尽きたものの、結構頑張って動かそうとしたので、その軌跡をまとめました。

SfMのOSSであるBundlerは、Linuxで動かすことを前提としています。

なので、Windowsで動かすには昔はCygwin等が必要だったのですが、Windows 10のBash on Windows（BoW）を使えば簡単に動かせるんじゃないかと思ったので、挑戦してみます。
(一応Visual Studio用のプロジェクトファイルもあるのですが、VS上で動かすのは果てしなく手間がかかりそうなので、今回は見送ります)

最新バージョンのv0.4でさえ2010年4月にリリースされたものなので今更感は否めませんが、大規模なSfMの礎となった偉大なOSSなので、動かしてみる価値はあるでしょう。

Bundlerの入手

何はともあれ、まずはBundlerのソースコードを持ってきます。せっかくなので、公式サイトのv0.4ではなくGitHubから最新のコードを持ってきましょう。

これからの処理は全部Bash on Windows上で行っています。

$ git clone https://github.com/snavely/bundler_sfm.git # Bundlerのソースコードを入手

Bundlerには特徴点検出器は含まれていないので、検出器のOSSもダウンロードします。今回はREADMEにしたがって、以下のサイトのSIFT検出器を使います。

Demo Software: SIFT Keypoint Detector

$ wget http://www.cs.ubc.ca/~lowe/keypoints/siftDemoV4.zip # SIFT検出器をダウンロード
$ unzip siftDemoV4.zip # zipを展開
$ cp siftDemoV4/sift bundler_sfm/bin/ # 必要なファイルをBundlerにコピー

ちなみに、このSIFT検出器の出力フォーマットに合わせて特徴点を記述してやれば、SIFT検出器以外も使えるみたいです。

Bundlerのビルド

このままでは色々と足りなくてビルドできないので、必要なパッケージをインストールしてやります。

JPEG画像のメタ情報、EXIFを扱うために、jheadというコマンドもインストールします。
Bundlerでは焦点距離をEXIFからとってきたりしているので、そのために使用するツールです。

またプログラム内から画像の操作をするためにImageMagicもインストールします。

$ sudo apt install jhead # jheadのインストール
$ sudo apt install imagemagick # ImageMagicのインストール

最後に、makeするときに必要な実行ファイルを見つけられるように、パスを通してやります。

$ export LD_LIBRARY_PATH=$LD_LIBRARY_PATH:Bundlerのパス/bin # 環境変数を設定

これでREADMEに書いてある準備は一通り行ったはずなのですが、実はこれではビルドに失敗してしてしまします。

BoWはデフォルトでインストールされてるパッケージが少ないせいですかね。。。
なので、その他必要な諸々をインストールしてやります。

$ sudo apt install gfortran       # 実はFortranのコンパイラが必要みたいなのでインストール
$ sudo apt install zlib1g-dev     # 圧縮ファイルを扱うライブラリ
$ sudo apt install libjpeg-dev    # JPEG画像を扱うライブラリ
$ sudo apt install liblapacke-dev # 数値計算ライブラリ

これで準備が整ったので、ビルドしてやりましょう！

$ make # ビルド実行！

Errorが出なければ、ビルド成功です！！(warningはたくさん出ますが無視してください。)

Bundlerの実行

ビルドが成功したら、Bundlerを実行してみましょう！！今回はリポジトリ内にあるサンプル画像を使って動かしてみます。

まずは、画像のあるディレクトリに移動してやります。

$ mkdir image
$ cp examples/ET/*.jpg image/ # 既存のファイル構造を汚したくないので、サンプル画像を新しいディレクトリにコピー
$ ls image/
et000.jpg  et001.jpg  et002.jpg  et003.jpg  et004.jpg  et005.jpg  et006.jpg  et007.jpg  et008.jpg

あとは、スクリプトを起動するだけ！！なはずなのですが・・・

$ ../RunBundler.sh
Using default config options
[extract_focal] Error: jhead not found.  Please install jhead to ../bin

怒られました。。。

jheadはさっきインストールしましたが、どうやらbin以下に置かないといけないみたいなので、シンボリックを貼ってやります。

$ cd .. # Bundler直下のディレクトリに移動
$ ln -s `which jhead` bin/ # binの下にシンボリックリンクを貼る
$ cd image # 画像のあるディレクトリに戻る

そして、再度実行

$ ../RunBundler.sh
Using default config options
0
Image list is list_tmp.txt
[Extracting exif tags from image ./et000.jpg]
  [Focal length = 5.400mm]
[Couldn't find CCD width for camera Canon Canon PowerShot A10]
[Found in EXIF tags]
  [CCD width = 5.230mm]
  [Resolution = 640 x 480]
  [Focal length (pixels) = 660.803

...

[- Extracting keypoints -]
../bin/sift: 1: ../bin/sift: Syntax error: "(" unexpected

...

[- Matching keypoints (this can take a while) -]
../bin/KeyMatchFull list_keys.txt matches.init.txt -1
Invalid keypoint file.

...

[KeyMatchFull] Reading keys took 0.016s
[- Running Bundler -]
bundler: BaseApp.h:271: std::vector<KeypointMatch>& MatchTable::GetMatchList(MatchIndex): Assertion `p.first != p.second' failed.
../RunBundler.sh: line 148: 24563 Aborted                 (core dumped) $BUNDLER $IMAGE_LIST --options_file options.txt > bundle/bundle.log
[- Done -]

うーむ、今度は画像は読み込めてるけど特徴点検出に失敗しまくってます。。。
はい、ここで挫折してBundlerを実行することはできませんでした。

結論

Syntax error: "(" unexpected というエラーメッセージ的に、どうにもSIFT検出器のバイナリが32bitしか対応していないっぽいです。
今回使用したこのSIFT検出器は、2005年が最終更新でソースコードもすべては公開されておらず自分の環境用にビルドできないため、64bit環境で動かないのはもうどうしようもありません。

Demo Software: SIFT Keypoint Detector

調べた感じBoWも64bitしかサポートしてないないようなので、違う特徴点検出器を使うしかないみたいですね。OpenCVとかを使えばできないことはないんでしょうけど、今回はここで力尽きたので見送りたいと思います。

個人的おすすめVisual Studio拡張機能

Sun, 09 Sep 2018 00:00:00 GMT

WindowsでC/C++の開発をするときはVisual Studio 2017を使っているのですが、OS再インストールしたりPC新調するたびにどんな拡張機能入れてたか忘れて地味に困るので、記事に残しておくことにしました。

ログの出力に色をつける - VSColorOutput -

こんな感じでVisual Studioのログ出力に色をつけてくれます。Warningなら黄色、Errorなら赤色をつけてくれます。
ビルド中でも一目で問題があるかどうか判断できるため、大きなプログラムを開発するときには必須です。

公式：VSColorOutput - Visual Studio Marketplace

Vimキーバインドを設定する - VsVim -

全Vimmerに必須のプラグインです。Visual StudioのキーバインドをVimに近づけてくれます。
ある程度自由にカスタマイズできるため、私のようなにわかVimmerには十分です。

公式：VsVim - Visual Studio Marketplace

C言語のフレキシブル配列メンバ（flexible array member）、通称struct hack

Fri, 10 Aug 2018 00:00:00 GMT

PHPの内部実装がC言語なのは周知の事実かと思いますが、最近仕事でPHP7の内部実装をみる機会がありました。
そこで学んだC言語のflexible array member、通称struct hackというテクニックがなかなか面白かったので、忘れないようメモです。

ちなみに、このサイトの説明がわかりやすいです。

structハック (struct hack) - Flexible array member - ぼく用あれこれまとめ - atwiki（アットウィキ）

struct hack

struct hackはどんなテクニックかというと、こんな風に構造体の最後を要素数を定義しない配列にしてもコンパイル通りますよ！っていうテクニックです。

別に構造体の中なら最後じゃなくてもコンパイルは通ると思うんですが、たぶん最後以外はうまい使い方はないです。

struct Struct{
  char hoge;  
  char fuga[];
};

ちなみに要素数を指定しない配列は構造体内でしか宣言できなくて、それ以外の場所で使おうとするとコンパイルエラーになります。

#include <iostream>

int main(){   
  char piyo[];
  return 0;   
}

% g++ structHack.cc             
structHack.cc: In function ‘int main()’:
structHack.cc:10:13: error: storage size of ‘piyo’ isn’t known
   char piyo[];
             ^

ちなみにサイズは0バイト、つまり要素数0の配列と認識されるようです。

#include <iostream>                         
                                            
struct Struct{                              
  char hoge;                                
  char fuga[];                              
};                                          
                                            
int main(){                                 
  std::cout << sizeof(Struct) << std::endl; // 1と出力
  return 0;                                 
}

struct hackの使いどころ

で、コンパイル通るのわかったけど、こんなん何に使うのよ？っていう話なんですが、こんな感じで使います。

#include <iostream>                                                  
#include <stdlib.h>                                                  
                                                                     
struct Struct{                                                       
  char hoge;                                                         
  char fuga[];                                                       
};                                                                   
                                                                     
int main(){                                                          
  Struct* piyo = (Struct*)malloc(sizeof(Struct) + sizeof(char)*10); // 無理やりメモリ領域を確保
  piyo->fuga[8] = 100; // 要素数を定義してないのに安全にアクセスできる！！
  
  free(piyo);                                                                   
  return 0;                                                          
}

この時のメモリの領域はこんな感じに確保されるので、メモリを解放するまで安全にアクセスできます。しかも、malloc時にはじめてfugaの要素数を決められるので、構造体毎に異なる要素数を指定できます。

余談：PHP7でのstruct hackの使われ方

PHP7ではstruct hackはこんな感じで使われています。
properties_table[]ではなくproperties_table[1]と書いてるのは、おそらくC99より前のバージョンのC言語ではサイズ0の配列の宣言ができなかったらしいので、その辺の名残りでしょう。

struct _zend_object {
	zend_refcounted_h gc;
	uint32_t          handle; // TODO: may be removed ???
	zend_class_entry *ce;
	const zend_object_handlers *handlers;
	HashTable        *properties;
	zval              properties_table[1];　// <- struct hack!!
};

さらに余談ですが、PHP5とPHP7ではこのzend_objectの構造が変わっているため、PHP7ではzend_objectを使って構造体を定義するときは、こんな風にzend_objectを最後に持ってくるようにする必要があります。

struct Struct2 {
   void  *hogehoge;
   zend_object std; // 絶対に最後じゃなきゃいけない。PHP5では最初に書くのが一般的だった(らしい)
};

参考

JavaのListIteratorのnext()とprevious()が同じ値を指す話

Sat, 12 May 2018 00:00:00 GMT

import MoshimoAffiliate from "@components/misc/MoshimoAffiliate.astro" import img1 from "./キャプチャ.jpg" import img2 from "./キャプチャ2.jpg" import img3 from "./キャプチャ3.jpg" import img4 from "./キャプチャ4.jpg"

最近ListIteratorでハマったのでちょっと忘れないようメモです。

ハマったのはこんなシチュエーションです。

import java.util.LinkedList;
import java.util.ListIterator;

public class Main {
        public static void main(String[] args) {
            LinkedList<Integer> list = new LinkedList<Integer>();
            ListIterator<Integer> listItr;

            list.add(1);
            list.add(2);
            list.add(3);
            listItr = list.listIterator();

            System.out.println(listItr.next());         // 1が出力
            System.out.println(listItr.next());         // 2が出力
            System.out.println(listItr.previous());     // 1が出力されると思ったけど2が出力
            System.out.println(listItr.previous());     // 1が出力
            System.out.println(listItr.next());         // 2が出力されると思ったけど1が出力
            System.out.println(listItr.next());         // 2が出力
        }
}

next()の次にprevious()、previous()の次にnext()を呼ぶと予想と反して同じ値を返してきます。
Javaの公式ドキュメントを調べたらどうにもこれが正常な動作らしいので、なんでこうなるかもう少し調べてみました。

ListIterator初期状態はこんな感じになっています。

ここで1回next()を呼ぶとイテレータが指してる右側の値の1が返ってきて、イテレータが1つ進みます。

さらにもう1回next()を呼ぶと、イテレータの右側の2が返ってきて、イテレータが進んでこの状態になります。

ここでprevious()を呼ぶと、イテレータの左側の2が返ってきて、イテレータは1つ戻ります。

「イテレータを進める前の右側の値と、進めた後の左側の値は同じ状態」、これがnext()とprevious()を交互に呼んだ時のからくりです。

Bundlerのアルゴリズムを追ってみる特徴点マッチング編その3

Sat, 31 Mar 2018 00:00:00 GMT

前回や前々回は、2枚の画像ペアから特徴点の誤対応を除去する方法について説明しました。

この記事では、2枚といわずすべての画像を使って誤対応を除去する方法について説明します。

特徴点追跡による誤対応の除去

まず、各画像間の各特徴点マッチング結果をつなぎ合わせ、複数枚の画像に渡って特徴点を追跡してやります。ほとんどの特徴点の追跡結果はこんな感じになります。

しかし、一部の特徴点結果はこんな感じ追跡結果が出てきます。

この場合、どれが正しい追跡結果かわかりません。なのでBundlerでは、この特徴点追跡に使われた特徴点マッチングはすべて除去してやります。

余談ですが、この特徴点追跡の誤対応除去、理屈はわかるんですが上手い実装方法がわかりません。単純に実装したら結構な計算量になる気がします。

ここまで3回に渡って、Bundlerの特徴点マッチングについて説明しました。次回からは、最初の画像ペアの3次元復元について解説していきます。

Bundlerについての解説記事一覧はこちら:

Bundlerのアルゴリズムを追ってみる特徴点マッチング編その2

Sat, 24 Mar 2018 00:00:00 GMT

import img1 from "./キャプチャ29.png"

前回は、Bundlerで使われている特徴点マッチングと、特徴点空間上の距離を使った誤対応の除去について説明しました。

この記事では、特徴点空間上の距離を使った誤対応除去の次に行う、エピポーラ幾何を使った誤対応の除去について説明します。

エピポーラ幾何を使った誤対応の除去

説明といっても、ここではRANSACを使って基礎行列(Fundamental Matrix)を推定するという、一般的な手法を行っているだけです。

すなわち、エピポーラ線から大きく外れる特徴点ペアは外れ値として削除してやろうよ、っていう考え方ですね。

ちなみにBundlerでは、ランダムに８点選んで8-point algorithmで基礎行列を導出しています。

基礎行列のエピポーラ拘束式といえばこれですね。

$$ \boldsymbol{x}_2^T\boldsymbol{F}\boldsymbol{x}_1=0 $$

間違った特徴点ペアは、0から大きく外れるため誤対応とみなすことができます。
問題は、正しい特徴点ペアもノイズの影響でぴったりと0にはならないため、閾値をどこに引くかです。

Bundlerでは、画像の縦のサイズと横のサイズの大きな方に、0.006を掛けた値を閾値としています。
例えば、1024ピクセル×768ピクセルの画像だったら、1024×0.006=6.144ピクセルが閾値になります。

この閾値よりもエピポーラ線から離れている特徴点ペアは、誤対応として除去してやります。

次回は、特徴点追跡による誤対応の除去について説明します。

Bundlerについての解説記事一覧はこちら:

Bundlerのアルゴリズムを追ってみる特徴点マッチング編その1

Mon, 12 Mar 2018 00:00:00 GMT

import img1 from "./キャプチャ23.png" import img2 from "./キャプチャ24.png" import img3 from "./キャプチャ25.png" import img4 from "./キャプチャ26.png"

Structure from Motion(SfM)のオープンソース、Bundlerのアルゴリズムを追ってみます。

今回は、特徴点マッチングと、特徴点空間上の距離を使った誤対応の除去について解説してみます。

特徴点マッチング

Bundlerでは、SIFT使って特徴点検出をしています。
で、各画像間で特徴点マッチングをするわけですが、後の処理のため各特徴点に対して最も距離の小さい(似ている)特徴点だけでなく、2番目に距離の小さい特徴点も計算してやります。

ここでいう距離とは、特徴点空間上の距離のことです。
SIFTの特徴量は128次元ベクトルなので、この場合128次元空間の2点間の距離のことです。

ただ、各画像数百とか数千の特徴点があるはずなので、各画像間ですべての特徴点に対して似ている特徴点を全探索してやると、とんでもない計算量になってしまいます。

そこで、Bundlerでは最近傍探索(Nearest neighbor search: NNS)で全探索してやるのではなく、近似最近傍探索(Approximate nearest neighbor: ANN)を使って計算量を減らしています。

ANNは最も距離が小さいと思われる特徴点を高速に見つけ出す手法です。
NNSでは全探索で確実に最も距離の小さい特徴点を見つけますが、ANNではおそらく最も距離の小さいであろう特徴点を見つけます。
そのため、実は距離が最も小さくないこともありますが、その代わりにNNSに比べて非常に高速化されています。

ちなみに、OpenCVではcv::FlannBasedMatcherという関数でANNを使った特徴点マッチングができます。

余談ですが、Bundlerのソースコード読んだ感じ、特徴点のクロスチェックしていないっぽいです。。。
論文を読んだ感じ、Bundlerは特徴点の誤対応除去にめちゃくちゃ神経を使っているイメージだったので、ちょっと意外です。なにか理由があるんでしょうか？ (知っている人がいたら教えてください。)

特徴点空間上の距離を使った誤対応の除去

さて、ただ特徴点マッチングしただけでは、どうしても誤った特徴点の対応付けが残ってしまいます。
そこでBundlerでは、最も距離の小さい特徴点と2番目に距離の小さい特徴点を使って、誤対応を除去してやります。

まずはこちらの図をご覧ください。

この場合、最も似ている特徴点は明らかですね。

ではこちらはどうでしょう？

どっちの方が距離が小さいか、ぱっと見わからなくないですか？
そりゃ、距離を計算してみれば明らかになるわけですが、極論距離が1.00000と1.00001だと、本当に1.00000の方が正しい対応点かどうか自信がなくなってしまいますよね。

そこでBundlerでは、前者の図のように、最も似ている特徴点が明らかな点以外は削除してやります。
具体的には、この式を満たす特徴点マッチング以外は削除してやります。

$$ \frac{最も似ている特徴点との距離}{２番目に似ている特徴点との距離}<0.6 $$

0.6は閾値ですね。後者の図のような距離の差が少ないようなケースだと、左辺が1.0に近づくためその特徴点マッチングは削除されます。

次回は、エピポーラ幾何を使ってさらに誤対応を削除する方法について解説します。

Bundlerについての解説記事一覧はこちら:

Bash on Windows + cmderで快適なCUI環境の構築

Sat, 10 Mar 2018 00:00:00 GMT

Windows 10でBash on Windows（BoW）が導入されてから、なんだかんだでターミナル上で開発することが増えてきました。
なので、自分流快適なCUIの開発環境構築をメモします。

今回は、cmderというWindows用のターミナルソフトを導入します。

cmderのインストール

まずはcmderをダウンロードします。cmderはWindows用のターミナルソフトです。デフォルトのBoWターミナルはタブ機能とかなくて不便ですからね！

ダウンロードはこちらから

cmder | Console Emulator

MiniとFullの2種類ありますが、変なトラブルに巻き込まれたくないので今回はFullをダウンロードします。 cmderはzip展開するだけで使えるので展開して好きなディレクトリに保存しましょう。

で、起動してみるとこんな感じのターミナルが開きます。

起動時にBash (Zsh)が起動するように設定

デフォルトでBashが起動するように設定しましょう。

メニュー → Setting → Startup → Tasks → +ボタンでBashを起動する設定を追加してやります。
(ちなみに、Task parametersにはこの設定を起動したときのタスクバーのアイコンを設定するらしいです。私はここに間違ってBashのパスを書いてしまって、cmderに怒られまくりましたw)

私はBashよりもZshの方が個のみなので、以下の設定でデフォルトでZshが起動するようにしました。

C:\Windows\System32\bash.exe ~ -c "export SHELL=`which zsh` && exec `which zsh` -l"

Bash使いの人はこっちを設定しましょう。

C:\Windows\System32\bash.exe ~

最後に、新しく作った設定がデフォルトで起動するようにすると、cmder起動時にZshもしくはBashが起動するようになります。

ターミナルの透過率を設定

メニュー → Setting → Features → Transparencyで背景の透過率を設定してやります。

cmderの設定はこの辺のサイトを参考にさせていただきました。

Bundlerのアルゴリズムを追ってみる概要編

Tue, 06 Mar 2018 00:00:00 GMT

Structure from Motionで多分一番有名なOSSである、Bundlerの処理を追ってみます。
何回かに記事を分けて解説していくつもりなので、途中で力尽きたらごめんなさい。。。

Bundlerの公式サイトはこちらです。

Bundler: Structure from Motion (SfM) for Unordered Image Collections

最新版はv0.4になっていますが、Githubのコミット履歴を見た感じ、今でも細々と有志による更新が行われているみたいですね。 v1.0が出ることは永遠になさそう・・・

公式サイトによるとBundlerの基になった論文は２本あるみたいです。
SIGGRAPH 2006とIJCV2007の論文なので、おそらくSIGGRAPH で発表した内容をIJCVで詳細にジャーナル論文にまとめた感じだと思います。
IJCVの論文はこちらです。

Snavely, Noah, Steven M. Seitz, and Richard Szeliski. "Modeling the world from internet photo collections." International journal of computer vision 80.2 (2008): 189-210.

この論文をベースに、論文に乗っていない細かなところはコードを見ながら、Bundlerの流れを追っていきたいと思います。

Bundlerの大まかな流れ

Bundlerの大まかな流れは一般的なSfMと変わりません。というか、Bundlerの論文に技術的な新規性はほとんどありません。

この論文のすごいところは既存の技術を組み合わせて、時系列順でもない大規模な画像に対してSfMを成功させたところだと僕は思っています。

１．各画像間の特徴点マッチング

まずは何はともあれ各画像間で特徴点をします。BundlerではSIFTを使って対応点を求めています。
ただ、如何に精度の良い特徴量でも、単純な特徴点マッチングではどうしても誤対応が含まれてしまいます。

Bundlerでは、この誤対応を

特徴点空間上の距離を使った除去
エピポーラ幾何を使った除去
特徴点追跡による除去

の3つの方法を使って排除しています。

２．１組の画像間で３次元復元

Bundlerは初めに２枚の画像で３次元復元を行い、徐々に画像を追加して復元結果を大きくしていく、といった手法をとっています。

この手の手法の最終的な復元精度は、最初の２枚の復元精度によって決まるといっても過言ではないので、最初の２枚の選び方がものすごく重要です。これがすべてといってもいいほどです。

Bundlerでは最初の２画像の理想的な関係として、

２画像間の対応点が多い
２枚の画像の撮影位置が離れている

の２つを挙げ、モホグラフィ変換を利用してこの２つの条件を満たす２画像を探す方法を説明しています。

その後、5-point algorithmとTriangulationとかを使って、選ばれた最初の２画像の３次元復元をしています。

３．画像を１枚追加して３次元復元

最初の２画像で３次元復元ができたら、新しく画像を１枚ずつ追加して、復元結果を大きくしていきます。

順番としては、

３次元座標が既知の特徴点が多い画像

から追加していきます。

追加する画像は特徴点とその３次元座標がわかっているので、DLT法を使って内部パラメータ、外部パラメータを求めているみたいです。
そして、Triangulationでまだ３次元座標が求まっていなかった特徴点の３次元座標を計算しています。

最後に、バンドル調整で各画像のパラメータと３次元点を最適化してやってます。

これを、追加する画像がなくなるまで続けてるみたいです。

以上が、Bundlerのおおよその流れになります。記事にしてみると意外と実装できちゃいそうな気がしますが、実際は精度を高めるためのテクニックが至る所に使われてるっぽくて、なかなか骨が折れそうです。

次回から頑張って詳細な流れを解読していきたいと思います。

Bundlerについての解説記事一覧はこちら:

バンドル調整とは

Sun, 04 Mar 2018 00:00:00 GMT

import LinkCard from "@components/misc/LinkCard.astro" import img1 from "./キャプチャ6.png" import img2 from "./キャプチャ7.png" import img3 from "./キャプチャ13-1.png" import img4 from "./キャプチャ8.png"

SfMとかSLAMの3D系の研究を始めると、必ず出てくるのがバンドル調整(Bundle Adjustment)です。
っちゃけただの非線形の最小二乗法なんですけど、今回はこのバンドル調整について解説します。

バンドル調整、またはバンドル調整法とはずばり「内部パラメータ、外部パラメータ、世界座標点群を最適化する非線形最小二乗法」です。

まぁ、この説明で理解できる人はそもそもこの記事なんか見ないと思いますので、もう少し説明してみます。

バンドル調整の考え方

まず、SIFTとかSURFとかを使って、画像から検出した特徴点があるとします。

そして、内部パラメータと外部パラメータ、抽出した特徴点の世界座標点が推定できているとします。

この推定したパラメータを使って、世界座標点を画像座標点へ透視投影変換をしてみましょう。

この変換した画像座標点、理想的には画像から抽出した特徴点とピッタリ合わないといけないんですが、様々なノイズの影響でそう上手くはいかないんですよね。。。

ちなみに、この２つの点の距離のことを「再投影誤差」といいます。
(もしピッタリ合っちゃったら、バンドル調整は不必要になりますw)

すなわち！ピッタリと合うようなパラメータ、世界座標点を見つけることができれば、それが正しい推定結果だろう、という考え方がバンドル調整です。
バンドル調整では、内部、外部パラメータと世界座標点をちょっとずつちょっとずつ微調整してやって、ピッタリと合うように調整してやります。

数式で表すとこうなりますね

$\boldsymbol{A}$は内部パラメータ、$\boldsymbol{R}$は回転行列、$\boldsymbol{t}$は並進ベクトル、そして$\boldsymbol{X_w}$(ベクトル)は世界座標点です。こいつらを微調整していくわけですね。

なぜこの式になるかわからない人は、こちらの記事を一度読んでみてください。

実際には特徴点は複数あって、ついでに画像も複数枚あるのが普通なので、すべてをピッタリ合わせるのは現実的には不可能です。

そこで、特徴点と透視投影変換した画像座標点の距離の和が、全体で最小になるように内部、外部パラメータと世界座標点の座標を調整します。

数式で表すとこうなります。

$n$が画像の枚数、$m$は世界座標点数です。
$I_{ij}$は$i$番目の世界座標点が$j$番目の画像に写っていれば1、写っていなければ0になる関数です。全部の世界座標点が全部の画像に移るわけじゃないですからね！

この式を頑張って偏微分して、レーベンマーク・マーカート法とか使って最小化してやれば、再投影誤差の和が一番小さい、一番それっぽい内部、外部パラメータと世界座標点を得ることができちゃうわけです。
(この記事で紹介した式は理解しやすさを第一に置いているので、この式が実際の研究で使われることはほぼないです。なのでこの式を頑張って偏微分しちゃわないようにしましょうw)

バンドル調整は内部パラメータも最適化すべきなのか

バンドル調整において、外部パラメータと世界座標点群は必ずと言っていいほど最適化するのですが、内部パラメータは最適化したりしなかったりします。

SLAMとかだとあらかじめ内部パラメータをキャリブレーションしておくことがほとんどなので、内部パラメータは最適化するパラメータには含めません。
bundlerやVisualSfMのようなネットから集めた画像を対象にしたSfMだと含めることが多いです。

最適化するパラメータは多いほど意図しない局所解に落ちやすくなるので、それなりの精度で内部パラメータがわかっているならば、含めない方が個人的には無難だと思います。
(昔私が実装したSfMでは、見事に局所解にハマって一部の実験データで焦点距離がマイナスになったことがありますw)

より詳しく知りたいなら

より深くバンドル調整を理解したい人は、こちらの論文がおすすめです。内容は少々難しめな気がしますが、日本語でバンドル調整を解説した論文としては一番しっかりしていると思います。

岩元祐輝, 菅谷保之, 金谷健一. "3 次元復元のためのバンドル調整の実装と評価." コンピュータビジョンとイメージメディア (CVIM) 2011.19 (2011): 1-8.

早くバンドル調整を使いたいなら

いやいや、この記事に書いてることは理解できたから、とにかく使いたい！！っていうせっかちな人は、以下のライブラリがおすすめです。

Ceres Solver

非線形最小二乗問題を扱うときに非常に面倒な評価関数の微分を内部で自動でやってくれるので、実質評価関数を突っ込むだけで最適化問題を解いてくれます。

バンドル調整のサンプルコードもあるので、お手軽に試せます。かなり複雑な評価関数でも扱えてしまうので、バンドル調整に限らずいろんな場面で役に立ってくれるはず！

WindowsでのこのCeres Solverのビルド方法を記事にしてまとめてあるので、よければ参考にしてください。

Ceres Solverの注意事項としては、ライブラリ内部でやってるのはあくまで数値微分ということです。なので、どうしても本来の微分結果とは誤差があると思います。

ですので、ライブラリに頼らず手動で頑張って微分した方が、もしかすると精度は上がるかもしれません。
(個人的には十分な精度のライブラリだと思いますが、0.01%でも精度を追い求めたい人は頭の隅に置いておきましょう)

透視投影変換を展開してみる

Sun, 04 Mar 2018 00:00:00 GMT

import LinkCard from "@components/misc/LinkCard.astro" import img1 from "./キャプチャ4.png" import img2 from "./キャプチャ9.png" import img3 from "./キャプチャ10.png" import img4 from "./キャプチャ11.png" import img5 from "./キャプチャ12.png"

以前、透視投影変換について解説しました。

変換式はこんなのでしたよね。

で、この式の$s$って邪魔じゃないですか？こいつがあるせいで、上の式の右辺を計算した後、最後に$s$で割るっていう、２段階手順が必要になっちゃうんですよね。

そこで、なんの役に立つかはわかりませんが、画像座標を一発で出す式を導出してみます。

まずは、世界座標点をカメラ座標点へ変換します。

次は画像座標に変換しましょう。

で、両辺を$s(=Z_c)$で割ってやれば、一発で画像座標に変換できる式の完成です。

これを$[X_c,Y_c,Z_c]^t$を使わずに表すと、こんな感じになります。

結構ごちゃごちゃした式になっちゃいましたねw

この式が何の役に立つかは正直思いつかないんですが、過去に何回か導出の必要に迫られたので、メモとして残しておきます。なぜ導出の必要があったかは思い出せないw

透視投影変換とは

Mon, 26 Feb 2018 00:00:00 GMT

import LinkCard from "@components/misc/LinkCard.astro" import img1 from "./キャプチャ4.png"

3次元系の画像処理の勉強では、透視投影カメラモデルの理解は必須です。

そんなわけで今回は透視投影カメラモデルについて解説してみたいと思います。
(といっても、過去の記事でほぼ解説してしまった気がするので、この記事は簡単にまとめたものなります。)

OpenCVでも紹介されている、言わずと知れた透視投影の式といえばこれですよね。

各行列を文字に置き換えるとこうなりますね。
$$ s\boldsymbol{x}=\boldsymbol{A[R|t]X}_w $$

さて、そもそも内部パラメータと外部パラメータとはなんぞや？についてですが、

外部パラメータ：世界座標系からカメラ座標系への変換
内部パラメータ：カメラ座標系から画像座標系への変換

を表しています。つまり透視投影変換は世界座標→カメラ座標→画像座標という変換を表していることになります。

それぞれ詳しく解説していきます。

外部パラメータ　～世界座標からカメラ座標への変換～

外部パラメータの持つ意味は、こちらの記事で解説しています。

内部パラメータ　～カメラ座標から画像座標への変換～

内部パラメータの持つ意味は、こちらの記事で解説しています。

ほぼ過去の記事を紹介するだけで終わってしまいましたw

ぶっちゃけ、式さえわかっていれば透視投影変換はできるんですけど、内部パラメータと外部パラメータの幾何学的な意味を理解しているのとしていないのは応用力が段違いなので、完璧に身につけましょう。

内部パラメータ(焦点距離)の単位の話～pixelとmmの変換～

Sat, 24 Feb 2018 00:00:00 GMT

import LinkCard from "@components/misc/LinkCard.astro" import img1 from "./キャプチャ.png" import img2 from "./キャプチャ2.png" import img3 from "./キャプチャ3.png"

さて、今回は内部パラメータの単位について解説してみたいと思います。

皆さんご存知の通り、透視投影変換は

世界座標
↓
カメラ座標
↓
画像座標

</div>

の順で、世界座標を画像座標に変換していて、現実世界の3次元物体が画像上のどこに投影されるのかを示したものでした。

ただ、ちょっと考えてみてください。
世界座標系やカメラ座標系、すなわち現実世界では物体の大きさはメートルとかセンチメートルとかミリメートルで表しますよね。

一方で、画像座標系では投影された物体の大きさはピクセル単位。。。
あれ、いつの間にか単位が変わっちゃってますね！びっくりです。

どこで変わっちゃったんでしょう。
ずばり、カメラ座標から画像座標に変換されるときです。

内部パラメータに秘密があるんです。内部パラメータは覚えていますか？
覚えていない人はまずはこちらで思い出しましょう。

内部パラメータ行列はこんな形をしていましたね。
$(f_{x}, f_{y})$は焦点距離、$(c_{x}, c_{y})$が光学中心です。

で、実はこの焦点距離と光学中心、全部ピクセル単位なんですよ！
焦点距離の単位は一般的には$mm$なんですが、透視投影変換の式の焦点距離はピクセルなのです。

ちょっと待て、$mm$とピクセルってどうやって変換するんだよ
とか
ピクセル単位なのは分かったけど、なんで$f_{x}$と$f_{y}$の2種類も焦点距離があるんだよ
っていう声が聞こえてきそうなので、順に説明していきます。

まずは、イメージセンサについて説明します。

そもそも、カメラはイメージセンサというセンサに光を通すことで、現実の風景を画像に変換しています。
で、このセンサは画素数分の受光素子(フォトダイオード)を設置したセンサなんです。

例えば、下のような14×8ピクセルの画像を撮影できるカメラには、縦14個、横8個の受光素子が設置されています。

つまり、 $$ 1ピクセルのmm単位の大きさ=\frac{イメージセンサの１辺の長さ}{１辺の受光素子数} $$ が成り立つんです。

これがわかれば、焦点距離の$mm$⇔ピクセルの変換は余裕ですね！

さて、理想的には $$ \frac{イメージセンサの縦の長さ}{縦の受光素子数}=\frac{イメージセンサの横の長さ}{横の受光素子数} $$ が成り立つはずなんですが、悲しいかな人間の作った工業製品、微妙に成り立たないんだなこれが。。。

しょうがないから横軸$x$軸の焦点距離と縦軸$y$軸の焦点距離を別々に考えようってなったのが、$f_x$と$f_y$です。すなわち、 $$ f_x=\frac{横の受光素子数}{イメージセンサの横の長さ}\times mm単位の焦点距離 $$ $$ f_y=\frac{縦の受光素子数}{イメージセンサの縦の長さ}\times mm単位の焦点距離 $$ ということですね。

まあ、ぶっちゃけ最近のイメージセンサは精度がいいので、$f_x=f_y$と考えてもほとんど支障ありません。(精度を求める研究をしている人はちゃんと気にしましょう)

余談ですが、バンドル調整とかで内部パラメータを非線形最適化するときは、$f_x=f_y$として扱った方が未知数が減ってむしろ精度が安定する気がします。(検証はしていません)

技術書でもこの辺の話題は触れられなかったり軽く流されたりで、初学者の学生さんなんかは勘違いしている人結構いるんじゃないでしょうか？
(私は学生時代勘違いしていましたw)

この記事では主にmmとpixel単位の変換の考え方について書きましたが、実際にJPEGのメタデータであるExifから、ピクセル単位の焦点距離を導出する方法を以下の記事にまとめました。

カメラ内部パラメータとは

Wed, 21 Feb 2018 00:00:00 GMT

import LinkCard from "@components/misc/LinkCard.astro" import img1 from "./スライド1.jpg" import img2 from "./スライド2-2.jpg" import img3 from "./スライド3-4.jpg" import img4 from "./スライド4-1.jpg" import img5 from "./スライド5-3.jpg" import img6 from "./スライド2-3.jpg"

前回は外部パラメータの意味を解説しました。
なので今回は、外部パラメータと双璧をなす？内部パラメータの意味を解説してみたいと思います。

内部パラメータとは

内部パラメータとは、一言でいうと
「カメラ座標を画像座標へ変換する行列」のことです。

式で表すとこうなります。

例によって詳しく解説していきます。

内部パラメータの意味

ちょっと説明を簡単にするために、$f=f_x=f_y$と仮定して話を進めます。
なぜこのように仮定していいかは、こっちの記事を参考にしてください。

下の図のように、カメラ座標系上に複数の3次元点があるとします。
この点たちを、どうにかして青で示した画像平面に持って行ってやりたいわけです。

ちなみに、画像平面はカメラ座標系原点から$Z_c$方向に$f$離れた位置にあります。

いきなり画像平面に持っていくのは少し難しいので、まずは各カメラ座標点を正規化してやって、$Z_{c}=1$の平面に持ってきてやりましょう。

あとは簡単ですね！正規化したカメラ座標点たちを焦点距離$f$倍すれば画像平面に点を集められます！

この画像平面上に集めた3次元点の$x_c$軸と$y_c$軸の値が、画像座標になるわけです。

ただ、このままだと画像平面と$z_c$軸の交点、画像の中央が画像座標系の原点になってしまいます。
別に問題ないといえばないんですが、普通は画像の左上を原点にしますよね？
だからこのままじゃちょっと扱いにくい。。。

そこで、最後に左上が画像座標$(0, 0)$になるように、原点をずらしてあげましょう。

これで一般的な画像の座標系上に、カメラ座標点を投影することができました！

この流れを数式にまとめるとこうなります。

あれ？なんか最初に紹介した式と違いますね…
安心してください。式を展開すればわかりますが、実は$s=Z_c$なので、両方の式を展開すると同じ形になります。

きっと最初の方の式の形にした方が、透視投影変換で世界座標 → カメラ座標 → 画像座標の変換を1つの式で、しかも掛け算だけで表すことができるのでいろいろと楽なのでしょう。

これで内部パラメータの持つ意味はばっちりですね！！

ちなみに反対に、内部パラメータを使った画像座標系からカメラ座標系の情報の取り出し方については、こちらの記事で解説しています。

カメラ外部パラメータとは

Sat, 17 Feb 2018 00:00:00 GMT

import LinkCard from "@components/misc/LinkCard.astro" import img1 from "./CV-1.jpg" import img2 from "./スライド4.jpg" import img3 from "./スライド5-1.jpg" import img4 from "./スライド6-1.jpg" import img5 from "./スライド9.jpg" import img6 from "./スライド10.jpg" import img7 from "./スライド5-2.jpg" import img8 from "./スライド3.jpg"

外部パラメータとはなんぞや？という話ですが、一言でいうと

「世界座標をカメラ座標に変換する行列」のことです。

式で表すとこうですね。

待て待て、それだけ言われてもわからない。
という人の為に、もう少し詳しく解説してみたいと思います。

外部パラメータの意味

世界座標系は、下の図のようにすべての基準となる1つしかない座標系で、「すべての3次元点の絶対的な位置」を表しています。
現実世界の緯度経度と高度と思ってもらえれば大丈夫だと思います。

カメラ座標系は下の図のような座標系で「このカメラから見て3次元点がどの位置にあるか」を表しています。
したがって画像の枚数だけカメラ座標系も存在します。

さて、ではどうやって世界座標系で表現された点をカメラ座標系に変換しましょうか？
実はこれ、カメラの姿勢(回転行列)と位置(並進ベクトル)がわかれば、変換できちゃうんです。

まず、世界座標点に回転行列を掛けて回転させてやります。

で、実は世界座標点を回転させるのって、世界座標系自体を逆回転させるのと、便宜的には同じなんです。

さらに、世界座標系を回転行列分逆回転させると、なんとカメラ座標系と同じ方向を向くんです！← 重要

つまり、世界座標点に回転行列を掛けることによって、【カメラ座標系の姿勢から見た、3次元点の見える方向】を求めることができるのです！！

しかし、同じ方向を向いたとはいえ、世界座標系の原点とカメラ座標系の原点は違うので、まだカメラ座標にはなってません。なので、並進ベクトルを使って原点をそろえてあげましょう。

さあ、これで世界座標系で見た3次元点をカメラ座標に変換することができました。
これを数式にまとめると以下のようになります。

これで外部パラメータの持つ意味は完璧ですね！

最後に、同次座標というテクニックを使って式を変形してやれば、記事のはじめの式と同じ形になります。
(同次座標がわからない人も、両方の式を展開してみると同じ式であることが確認できるかと思います。)

反対に、外部パラメータを使ったカメラ座標系から世界座標系への変換したい場合の手順は、こちらの記事で解説しています。

NO MORE! 車輪の再発明

OpenCode + Ollamaを使ってローカルLLMを使った開発環境を構築する

環境

環境構築の手順

Ollamaのインストール

ローカルLLMのモデルをダウンロード

OpenCodeのインストール

OpenCodeでローカルLLMを利用するように設定する

動作確認

OpenCodeの起動

[Dart] mockitoを使ってユニットテストを実装する

mockitoの導入

モックを作成する

モックを利用したユニットテストを作成する

mise(旧rtx)を利用して言語のバージョンを管理する

miseとは

環境

インストール

使い方

[flutter] テストカバレッジを確認する

やりたいこと

事前準備

テストカバレッジの確認方法

MacBook Air(Early 2015)にインストールしたLubuntu 24.04.1をネット接続する

目的

用意するもの

手順

一時的に無線LAN子機を使ってWi-Fiに接続する

MacBook内臓の無線LANモジュールでWi-Fiに接続する

[SpringBoot] ユニットテスト時にapplication.ymlの値を部分的に上書きする

やりたいこと

特定のユニットテストのみで設定値を上書きする方法

ユニットテスト全体で設定値を上書きする方法

[Dart] 現在の年齢を計算する

やりたいこと

実装

解説

古いMacBook AirにLubuntuをインストールする

目的

対象のMacBook Air

ISOイメージを書き込んだUSBメモリの作成

ISOファイルのダウンロード

ISOファイルを書き込んだUSBメモリを作成

Lubuntu用のボリュームの作成

Lubuntuのインストール

MacBookのCTO(カスタマイズ)モデルを安く買う方法調査メモ

目的

購入したいMacbook

安く買う方法の調査

実際に買ってみた

歴代MacBook Pro/AirのOSのサポート期間の調査

背景

最新OS提供期間まとめ

macOSのリリース日

MacBook Pro

MacBook Air

最新OS提供期間の比較

【2024年】開発環境の刷新を考える

目的

現在の開発環境

メインPC

サブPC

現在の開発環境の問題点

OSのサポートがそろそろやばい

Windows

Mac

Apple Storeで公開しているアプリを更新できない

iOSの動作確認が重すぎる

刷新パターン

WindowsデスクトップとMacbookの両方を買い替える

メリット

デメリット

WindowsノートとMac miniに買い替える

メリット

デメリット

Macのみ買い替えてMac1台に集約する

メリット

デメリット

メインPCの延命 + AWSのMacインスタンスの利用

メリット

方法3：必要なライブラリのみ依存関係に追加するパターンその2

方法4：必要なライブラリのみ依存関係に追加するパターン番外編