masahosono blog

「Flutter」というマルチプラットフォーム開発で採用されることの多くなった印象のフレームワークを使ってみた。 導入にあたり環境構築で躓くポイントがあったため、忘備録として解消方法等を記載する。


「[Flutter](https://flutter.dev/)」というマルチプラットフォーム開発で採用されることの多くなった印象のフレームワークを使ってみた。

導入にあたり環境構築で躓くポイントがあったため、忘備録として解消方法等を記載する。

## 環境
- MacBook Pro (15-inch, 2018)
- macOS Ventura 13.0.1

## 環境構築

### SDKインストール
https://docs.flutter.dev/get-started/install

https://docs.flutter.dev/get-started/install/macos

リファレンス通りにダウンロードしたSDKをローカル配置してパスを通してやれば良い。

```shell
$ flutter --version
Flutter 3.3.10 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 135454af32 (4 weeks ago) • 2022-12-15 07:36:55 -0800
Engine • revision 3316dd8728
Tools • Dart 2.18.6 • DevTools 2.15.0
```

### インストールの必要がある依存関係を確認

`flutter doctor`コマンドで各種依存ツールやライブラリの状態を確認することができる。

```shell
$ flutter doctor

Running "flutter pub get" in flutter_tools...                       9.6s
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.3.10, on macOS 13.0.1 22A400 darwin-x64, locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
   ✗ cmdline-tools component is missing
     Run `path/to/sdkmanager --install "cmdline-tools;latest"`
     See https://developer.android.com/studio/command-line for more details.
   ✗ Android license status unknown.
     Run `flutter doctor --android-licenses` to accept the SDK licenses.
     See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.

[✗] Xcode - develop for iOS and macOS
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
        sudo xcodebuild -runFirstLaunch
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.3)
[✓] IntelliJ IDEA Ultimate Edition (version 2022.1.4)
[✓] VS Code (version 1.74.3)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

! Doctor found issues in 3 categories.
```

私の環境では、Android SDKとXcode周りで各種ツールのインストール状態や認証が不完全であるとのこと。

```shell
[!] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
   ✗ cmdline-tools component is missing
     Run `path/to/sdkmanager --install "cmdline-tools;latest"`
     See https://developer.android.com/studio/command-line for more details.
   ✗ Android license status unknown.
     Run `flutter doctor --android-licenses` to accept the SDK licenses.
     See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.

[✗] Xcode - develop for iOS and macOS
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
        sudo xcodebuild -runFirstLaunch
    ✗ CocoaPods not installed.
```

### Android toolchain関連のissue解消

最新のコマンドラインツールが見つからないとのことなので、最新のコマンドラインツールを導入する。

Android StudioのPreferencesから、[Appearance & Behavior > System Settings > Android SDK > SDK Tools]と選択し、`Android SDK Command-line Tools(latest)`にチェックを入れてOKでインストールを行う。

![img.png](img.png)

コマンドラインツールのインストールが完了したら、Android SDKの各種ライセンスの確認と承認をする必要があるため、`flutter doctor --android-licenses`のコマンドを実行する。

```
 $ flutter doctor --android-licenses
[=======================================] 100% Computing updates...             
6 of 7 SDK package licenses not accepted.
Review licenses that have not been accepted (y/N)? y
```

再度、`flutter doctor`を実行してissueが解消されていることを確認する。

### Xcode関連のissue対応

Xcode自体は事前にインストール済みであったが、パッケージのインストールやライセンスの承認ができていないとのこと。

そのため、次のコマンドを順番に実行する。

```shell
$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
$ sudo xcodebuild -runFirstLaunch
$ sudo xcodebuild -license
```

また、CocoaPodsというiOSアプリの依存管理システムライブラリが必要なためインストールする。

```shell
$ sudo gem install cocoapods
```

再度、`flutter doctor`を実行してissueが解消されていることを確認する。

### 導入確認

全てのissueの解消ができていれば、`No issues found!`と表示される。

```shell
$ flutter doctor                   
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.3.10, on macOS 13.0.1 22A400 darwin-x64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.3)
[✓] IntelliJ IDEA Ultimate Edition (version 2022.1.4)
[✓] VS Code (version 1.74.3)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

• No issues found!
```

## さいごに
Flutterの環境構築は、マルチプラットフォームに対応してるが故に若干複雑という印象を受けた。

ただし、実際には開発対象のプラットフォーム次第だと思うので、無理に全てのissueを解消する必要は無さそう。

環境構築も無事に終えたので、次回は、サンプルアプリケーションなどを眺めつつ実機やエミュレータで動かしてみようと思う。

Flutter ハンズオン｜開発環境構築

Vercelの外部ロギングサービスにSematext Logsを導入してみた。Vercelでは、出力したログを各プロジェクトのFunctions画面でリアルタイム表示させることができるが、保存まではされない。そのため、ログを永続的に保持しておくためには、外部のロギングサービスと連携する必要がある。


Vercelでは、出力したログを各プロジェクトのFunctions画面でリアルタイム表示させることができるが、保存まではされない。

ログを永続的に保持しておくためには、外部のロギングサービスと連携する必要がある。

今回は、テスト用に作成したNext.jsアプリケーションにおいて直近のアクセスを記録させてみた。

## ロギングサービスの選定

現在、Vercelと連携が可能なロギングサービスは次の7つが提供されている。

- GraphJSON
- Axiom
- Logtail
- Logalert
- Sematext Logs
- Logflare
- Datadog
 
https://vercel.com/integrations

前述の通り、テスト用のアプリケーションに対してアクセスを記録したいだけなので、低コストで運用できるもので選定した。

[Sematext](https://sematext.com/)は、Basicプラン（無料）にも関わらず、ログを1日あたり500MBまでかつ最長7日間まで保持することができるので、こちらを選択した。

## sematext

事前にSematextのアカウントを作成しておく。
https://apps.sematext.com/ui/registration

データセンタは、北米かヨーロッパが選択可能なので、居住区に合わせた地域を選択すると良い。（今回は北米を選択した。）

![img_3.png](img_3.png)

また、GoogleアカウントやGitHubの登録情報を利用しての登録も可能。

## 導入

### Sematext-logsの追加（Vercel側）

Vercelの[Sematext-logs](https://vercel.com/integrations/sematext-logs)ページの「Add integration」ボタンを押下。

ポップアップが表示されるので、画面の手順に従い操作していく。

![img_1.png](img_1.png)

### 対象のログアプリを選択する

対象のVercelプロジェクトとログを集計するアプリを選択する。

各種項目を選択して「Create Log Drains」ボタンを押下で、初期導入は完了となる。

![img_4.png](img_4.png)

また、Sematext側にVercelのログアプリが作成されていない場合は作成しておく。

![img_5.png](img_5.png)

## 使い方

ログアプリの一覧から、予め作成したアプリを選択する。
https://apps.sematext.com/ui/logs

最初に表示されるサマリページには、各種統計情報が表示される。
![img_9.png](img_9.png)

Exploreページでは、保存したログメッセージや記録日時などの情報を閲覧することができる。

### Vercelにデプロイするアプリケーションの実装

サーバーサイド（Node.js）側で出力したログに対して、Sematextはログの収集ができるので、アプリケーションは以下のような実装とした。

getServerSideProps内で接続元のIPアドレス、ホスト名、UserAgentをログとして吐き出す。

```javascript:index.tsx
export const getServerSideProps: GetServerSideProps = async(context) => {
    const { req } = context;

    const ipAddress = req.headers["x-forwarded-for"]
        ? String(req.headers["x-forwarded-for"]).split(',')[0]
        : req.connection.remoteAddress
            ? req.connection.remoteAddress
            : "";
            
    const userAgent = req.headers["user-agent"];


    const getHostName = (ipAddress: string): Promise<string> => {
        return new Promise(function(resolve, reject) {
            dns.lookupService(ipAddress, 22, function (err, hostname, service) {
                if (err) {
                    return reject(err);
                }
                resolve(hostname);
            });
        });
    };
    const hostName = await getHostName(ipAddress);

    console.log(`IP Address: ${ipAddress}, Host Name: ${hostName}, User Agent: ${userAgent}`);

    return {
        props: {}
    }
}
```



Vercelの外部ロギングサービスにSematext Logsを導入した

Oracle DatabaseのGROUP BY句内では、SELECT句で指定した別名は参照できないため、ORA－00904のエラーが発生する。エラーを回避するには、エイリアス参照せずに同じ値を指定してあげれば良い。その場合、GROUB BY句内の指定が冗長となってしまうが仕様上仕方がない。


次のようなユーザテーブルから更新日時（登録日）ごとのユーザ数を取得したい場面があるとする。

```sql
select * from user_table;

  USER_ID                     UPDATE_DATE
_________ _______________________________
a         01-SEP-22 07.40.30.000000000 PM
b         31-OCT-22 04.50.30.000000000 PM
c         31-OCT-22 06.20.30.000000000 PM
d         31-OCT-22 09.30.30.000000000 PM
e         01-NOV-22 04.10.30.000000000 PM
```

登録日でグルーピングする必要があるため、to_char関数を使って日付を文字列（YYYY/MM/DD）に変換する。

また、カラムの別名をregister_dateとして、group by で参照するカラム名に指定した。

```sql
select count(*) as count, to_char(update_date, 'YYYY/MM/DD') as register_date from table group by register_date;

Error at Command Line : 1 Column : 163
Error report - 
SQL Error: ORA-00904: "REGISTER_DATE": invalid identifier
00904. 00000 - "%s: invalid identifier"
```

このSQLを実行すると、`ORA－00904`のエラーが発生する。

## 解決方法
ORA-00904は、無効あるいは存在しない列名を指定した際に発生する。

今回のケースだと、`group by register_date`の部分がエラーとなる。

Oracle Databaseでは、SELECT句で定義した別名はGROUP BY句で参照することができない。

そのため、次のように記載する必要がある。

```sql
select count(*) as count, to_char(update_date, 'YYYY/MM/DD') as register_date from table group by to_char(update_date, 'YYYY/MM/DD') order by update_date desc;

   COUNT   REGISTER_DATE
________ _______________
1        2022/09/01
3        2022/10/31
1        2022/11/01
```

`to_char(update_date, 'YYYY/MM/DD')`の指定が冗長となるがDBMSの仕様上仕方がない。

ちなみに、MySQLではSELECT句で付けた別名をGROUP BY句やORDER BY句で参照できるらしい。

Oracle DatabaseのGROUP BY句はエイリアスが参照できない

macOSのPagesアプリは、表をページを跨いで表示することができないが、ある手順により解決できたので方法について本記事にて解説する。


ドキュメントをPagesで編集したときに表がページを跨いで表示できなかったのでやり方を解説する。

## 環境
- macOS Ventura 13.0
- Pages v12.1（7034.0.86）

## 問題点とやりたかったこと
表の行がページ内に収まりきらない場合、該当の行は次のページから表示されてしまう。
![img.png](img.png)

これを次のように行の途中でページを跨いで分割して表示したい。
![img_1.png](img_1.png)

Microsoft Wordであれば、特に何もせずにページを跨いでくれる

## やり方

移動してしまった行の下に一行追加する。
![img_2.png](img_2.png)

追加した行とひとつ上の行を結合する。
![img_3.png](img_3.png)

表の列が複数あればすべての列に対して結合させる。
![img_4.png](img_4.png)

すると、ページを跨いで行表示することができる。

macOSのPagesで表をページ跨ぎして表示する方法

Google Pixel 7 Proが届いて1週間程度使用したので、良かった点・微妙だった点についてレビューする


Google Pixel 7 Proが届いてから1週間程度使用したので、良かった点・微妙だった点についてレビューする。
https://store.google.com/jp/product/pixel_7_pro?hl=ja

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">my new gear... <a href="https://t.co/Icn7qObgSO">pic.twitter.com/Icn7qObgSO</a></p>&mdash; Masahiro Hosono (@masahosono) <a href="https://twitter.com/masahosono/status/1582706665350082560?ref_src=twsrc%5Etfw">October 19, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Pixel 6 Pro 購入時のレビューはこちら
https://masahosono.dev/posts/gadget-google-pixel-6-pro

# 背景

前フラッグシップモデルのPixel 6 Proを使っていて特に不満が無かったため、買い換えるつもりも無かったが、各種キャンペーンによる割引が魅力的だったので気づいたときには購入していた。

- 対象端末の下取り価格が最大61,500円
- 35,000円分のストアクレジットのプレゼント（Pixel 7 Proのみ）
- Googleストア配布の購入時に使える10%OFFプロモーションコード

計算したところ実質負担額がたったの7,504円だったので、この金額で最新のフラグシップに乗り換えられるならオトクでしょう。

Pixel 7 Pro：124,300円
プロモーションコード：-12,430円
ストアクレジット利用：-7,866円
下取り（Pixel 6 Pro）：-61,500円
ストアクレジット付与：-35,000円

実質負担額：7,504円

# 感想

Pixel 6 Pro から乗り換えて感じた点について書いていく。

## 良かったところ

### ・カメラ性能が非常に良い
（前回も同じことを書いたが）前機種から順当にカメラ性能と画質の向上を感じた。

望遠は光学4倍から5倍に進化し、デジタルズームが30倍までに対応したことで、より遠くの景色を綺麗に撮れるようになった。

また、1.0倍〜5.0倍のズーム倍率に対して超解像ズームが使えるようになったことで、前機種に比べて画質が劇的に向上したことが一番良かった。

マクロ撮影が可能になったのも地味に助かる。（近距離のQRコードが読み込めないことがなくなったので）

### ・全ての解像度とフレームレートの組み合わせで望遠レンズが使用できるようになった。

前機種では、4k30fpsの設定でしか望遠レンズを使用することができなかったが、本機種ではすべての画質設定で望遠レンズが使えるようになった。

この点はかなり不満があったので改善されて本当に良かった。

また、動画撮影中にシームレスに0.5倍から20倍まで切り替えられるようになって使い勝手が向上したのも良かった。

### ・バッテリー持ちが良い
TensorからTensor G2に進化したためか、バッテリー持ちが劇的に向上したと感じる。

朝に満充電の状態で外出して夜帰宅した時点でバッテリー残量は70%程度残っていた。（Pixel 6 Proなら、同じ条件で30%程度しか残らなかった。）

## 微妙なところ

今のところは特になし。

強いて言うなら、前機種に比べてカメラ以外の点で進化したところがあまり見受けられないことぐらい。

## まとめ

初の自社製SoCであるTensorを搭載した前機種は不安定な部分も多かったが、Tensor G2になって機種も最適化されたためか安定して動作していると感じる。

また、前機種で感じていたデメリットもほぼほぼ解消されていたので良かった。


【レビュー】Google Pixel 7 Pro｜1週間使用して感じた良かった点・微妙だった点について

Googleのオープンソースのrobots.txtライブラリを使ってクローラーがアクセス可能なURLをテストする。Search Consoleのrobots.txtテスターと違って、本ライブラリは、ローカルでテストすることができるため環境を限定せずに手軽に利用することができる。


Googleのオープンソースの[robots.txtライブラリ](https://github.com/google/robotstxt)を使ってrobots.txtのマークアップをテストしてみた。

GoogleBotクローラーによるrobots.txtのテストには、Search Consoleのrobots.txtテスターを使う方法が一般的だが、利用にはネットワーク接続およびGoogleアカウントでのログインが必要となる。

本ライブラリは、ローカルでテストすることができるため環境を限定せずに手軽に利用することができる。

https://developers.google.com/search/docs/crawling-indexing/robots/create-robots-txt?hl=ja

## 環境
- [robotstxt](https://github.com/google/robotstxt)
- macOS Ventura 13.0

## 導入

robots.txtライブラリをGitHubよりダウンロードする。
https://github.com/google/robotstxt

## ビルド

ライブラリは、C++で提供されているため、実行およびビルドにビルダーが必要となる。

READMEにBazelかCMakeを利用した手順の説明がされているので、環境にあったものを選択すると良い。

今回はBazelを導入してビルドしてみた。

### Bazelインストール

インストーラーかHomebrewでの導入が可能。
https://bazel.build/install/os-x#install-on-mac-os-x-homebrew

```shell
$ brew install bazel
```

### Bazelビルド

`bazel build`コマンドでビルドを実行する。

```shell
$ bazel build --cxxopt='-std=c++14' :robots_main
Starting local Bazel server and connecting to it...
// 省略                                                                                                                                                                                                                                                             
INFO: Analyzed target //:robots_main (47 packages loaded, 408 targets configured).
INFO: Found 1 target...
Target //:robots_main up-to-date:
  bazel-bin/robots_main
INFO: Elapsed time: 24.558s, Critical Path: 3.36s
INFO: 53 processes: 13 internal, 40 darwin-sandbox.
INFO: Build completed successfully, 53 total actions
```

READMEにも記載されているが、本ライブラリはC++14未満ではビルドすることができない。
macにインストールしていたgccではデフォルトで有効なのは、C++11であったため、言語規格（std値）を変更する必要がある。
そのため、`--cxxopt='-std=c++14'` のオプションを指定した。

https://bazel.build/reference/command-line-reference

## 実行

`bazel run`コマンドでビルド済みのライブラリを実行する。

`https://masahosono.dev`というターゲットURLに対して、GoogleBotクローラーを用いてrobots.txtファイル（~/robotstxt/robots.txt）でテストを実行する。

```shell
$ bazel run --cxxopt='-std=c++14' robots_main -- ~/robotstxt/robots.txt GoogleBot https://masahosono.dev
INFO: Analyzed target //:robots_main (0 packages loaded, 0 targets configured).
// 省略
user-agent 'GoogleBot' with URI 'https://masahosono.dev': ALLOWED
```

```:robots.txt
User-agent: *
Disallow:
```

robots.txtに対してクローラーがアクセスできないURLである場合は、結果は、DISALLOWEDとなる。

```shell
$ bazel run --cxxopt='-std=c++14' robots_main -- ~/Code/robotstxt/robots.txt  GoogleBot https://masahosono.dev
// 省略
user-agent 'GoogleBot' with URI 'https://masahosono.dev': DISALLOWED
```

```:robots.txt
User-agent: *
Disallow: /
```

Googleのrobots.txtライブラリを使ってクローラーがアクセス可能なURLをテストする

jackson-dataformat-xmlを2.11.3から2.12.7にアップデートしたところ、XMLの空エレメントに対するデシリアライズの挙動に違いがあった。


jackson-dataformat-xmlを2.11.3から2.12.7にアップデートしたところ、XMLの空エレメントに対するデシリアライズの挙動に違いがあった。

## 概要
2.12のリリースで、XMLのハンドリングが各種改良され、空エレメントに対してのデシリアライズ処理も改良された。

[Jackson Release 2.12](https://github.com/FasterXML/jackson/wiki/Jackson-Release-2.12)

[Jackson 2.12: improved XML module](https://cowtowncoder.medium.com/jackson-2-12-improved-xml-b9487889a23f)

[Change default setting of FromXmlParser.Feature.EMPTY_ELEMENT_AS_NULL from true to false](https://github.com/FasterXML/jackson-dataformat-xml/issues/411)

> XML module
> 
> Default for FromXmlParser.Feature.EMPTY_ELEMENT_AS_NULL changed from true (2.9 - 2.11) to false, 
> 
> so that no automatic coercion done from empty elements like <empty/> into null

`EMPTY_ELEMENT_AS_NULL`機能が恒久的に無効となったため、空エレメントがnullにマッピングされなくなった。

> which is usually more logical setting for most users.
> You can still enable FromXmlParser.EMPTY_ELEMENT_AS_NULLto keep earlier logic if you want,
> but the default was changed and handling should in general be more robust.

説明には、ほとんどのユーザにとって一般的な設定となり、有効にすることも可能だが、無効のほうが堅牢性が良いと記載されている。

## 環境
- Java15
- jackson-dataformat-xml 2.12.7

## EMPTY_ELEMENT_AS_NULLを有効にして利用する

有効にさせることで堅牢性が損なわれるといったニュアンスの説明があったが、現状扱っているXMLの構造的に、空エレメントは空文字では無く未存在（NULL）を表現するのに適切であるので、以前の挙動と同様となるようNULLにデシリアライズさせる。

```java:Student.java
import com.fasterxml.jackson.annotation.JsonProperty;

public class Student {

    @JsonProperty("name")
    private String name;

    @JsonProperty("age")
    private int age;

    @JsonProperty("address")
    private Address address;

    public String toString() {
        return "Student(name=" + this.name + ", age=" + this.age + ", address=" + this.address + ")";
    }

    static class Address {
        @JsonProperty("prefecture")
        private String prefecture;

        @JsonProperty("city")
        private String city;

        public String toString() {
            return "Student.Address(prefecture=" + this.prefecture + ", city=" + this.city + ")";
        }
    }
}
```

```java:Main.java
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.dataformat.xml.XmlMapper;
import jackson_accept_empty_string_as_null_object.Student;

import static com.fasterxml.jackson.dataformat.xml.deser.FromXmlParser.Feature.EMPTY_ELEMENT_AS_NULL;

public class Main {

    public static void main(String[] args) throws JsonProcessingException {
        XmlMapper xmlMapper = new XmlMapper();
        xmlMapper.configure(EMPTY_ELEMENT_AS_NULL, true); // 明示的に機能を有効にする。

        String xmlString = """
                <root>
                    <name>taro</name>
                    <age>30</age>
                    <address>
                        <prefecture>東京都</prefecture>
                        <city>江東区</city>
                    </address>
                </root>
                """;
        System.out.println(xmlMapper.readValue(xmlString, Student.class));

        String xmlString2 = """
                <root>
                    <name></name>
                    <age></age>
                    <address></address>
                </root>
                """;
        System.out.println(xmlMapper.readValue(xmlString2, Student.class));

        String xmlString3 = """
                <root>
                    <name />
                    <age />
                    <address />
                </root>
                """;
        System.out.println(xmlMapper.readValue(xmlString3, Student.class));
    }
}
```

```:実行結果
Student(name=taro, age=30, address=Student.Address(prefecture=東京都, city=江東区))
Student(name=, age=0, address=Student.Address(prefecture=null, city=null))
Student(name=null, age=0, address=null)
```

住所自体の設定が無いケース（xmlString3）を想定した場合、Address自体のインスタンスがnullで初期化されるため、
null判定などオブジェクトの取り扱いがし易いと感じた。
