
## 動機

最近流行のChatGPT、最近GPT4が公開されてより一層流行の兆しをみせています。
GPT2のころは色々試していたのですが、重い腰をあげて最近公開されたOpenAIのAPIを利用する環境を作ろうと思いたちました。
その前段として、SlackのスラッシュコマンドからLambdaを叩いてOpenAI APIを叩く環境を作ろうとしました。


### Lambda関数URL

Lambdaで実装するにあたって、API呼び出しにはAPI Gatewayが必要なのかと覚悟していたのですが、知らぬ間にLambda単体でhttpsのエンドポイントを生やすことができるようになったようです。
機能は少なくシンプルなので用途にあった場合に利用を候補に入れるとよさそうです。

[Lambda 関数 URL](https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/lambda-urls.html)


### Slackのスラッシュコマンドの仕様

一通りLambda関数(Python)とSlackスラッシュコマンドの連携を行うところまで実装し、動作テストを行っている時に、スラッシュコマンドの以下の制限にようやく気付きました。

`サーバーからのリクエストに対して 3 秒以内に ack() メソッドで応答する必要があります。`

[Slack公式-Slackコマンド](https://slack.dev/java-slack-sdk/guides/ja/slash-commands)


OpenAIのAPIは3秒でレスポンスを返すのは難しく、非同期に直す必要性が出てきました。
Slackのスラッシュコマンドは、リクエスト時に`response_url`を付与してくれており、一定時間内であれば、このエンドポイントにPOSTすることで、Slackへの投稿を行うことができるようになっています。
通しのコードは既に実装済みだったので、これを**リクエスト受付関数**と**外部API呼び出し関数**に分離することにしました。

## 構成

以下の画像のような構成にしました。
1つ目の関数でリクエストを受け、必要な項目だけを2つ目の非同期実行Lambda関数に渡します。

![](https://moruorange-blog.s3.ap-northeast-1.amazonaws.com/undefined/20230320-lambda-endpoint-url/images/zentai.png)

## リクエスト受付関数

### セキュリティ

セキュリティの設定をNoneにしています。このままでは**何の検証もしないと危険**なので、きちんと検証をしましょう。今回はSlackAppのリクエスト検証の仕組みを利用しました。

### 関数設定

- タイムアウト: 3秒（Slackスラッシュコマンドタイムアウト）
- 送信先: 「外部API呼び出し関数」（正常時 / 非同期）
- 関数URL: ON（認証タイプ:None）

### コード

以下が大まかな流れ。
このLambda関数からLambdaを非同期で呼び出し、すぐにレスポンスを返して終了してしまいます。
今回はSlackに「処理中...」を表示するためにreturn文字列を指定しています。

![](https://moruorange-blog.s3.ap-northeast-1.amazonaws.com/undefined/20230320-lambda-endpoint-url/images/slack-syorityu.png)

![](https://moruorange-blog.s3.ap-northeast-1.amazonaws.com/undefined/20230320-lambda-endpoint-url/images/request-func-main.png)

次の外部API呼び出し関数を呼び出し、Payloadも渡します。
今回は処理種別、本文、`response_url`を入れています。

![](https://moruorange-blog.s3.ap-northeast-1.amazonaws.com/undefined/20230320-lambda-endpoint-url/images/invoke-lambda.png)

## 外部API呼び出し関数

### 関数設定

こちらは関数URLはOFFの普通のLambda関数で良い。

- タイムアウト: 2分（外部APIに合わせて最適な長さにする）

### コード

前のLambdaから受けた情報をeventから取得し、外部API（OpenAI API）を叩きます。

![](https://moruorange-blog.s3.ap-northeast-1.amazonaws.com/undefined/20230320-lambda-endpoint-url/images/excute-lambda-main.png)


最後に`response_url`に対してPOSTします。

![](https://moruorange-blog.s3.ap-northeast-1.amazonaws.com/undefined/20230320-lambda-endpoint-url/images/send-to-slack.png)

Slackに結果が表示されます。

![](https://moruorange-blog.s3.ap-northeast-1.amazonaws.com/undefined/20230320-lambda-endpoint-url/images/slack-response.png)



AWS Lambdaの関数URLを利用した時間のかかるOpenAI APIの非同期化


2023年となりました。今年もよろしくお願いします。
今年は久しぶりに年末年始と、コロナ前と同程度に飲みに行くことができました。
来年以降も、このような年末年始を迎えられればと思います。

今年も色々とやっていきたい所です。
とりあえず今、時々思い立ってはコードを書いている、プロジェクトを完成させるのが最初の目標です。
今年度中に終わるといいなぁ。

もう良い年齢になりつつあるので、心の残りが無いようにやりたいことはやっていきたい所存です。

![日本酒](https://moruorange-blog.s3.ap-northeast-1.amazonaws.com/undefined/20230110-new-year/images/jikon.jpg)



2023年の始まり


趣味でやっているYoutube動画をやっています。メインはサイクリング動画となっています。札幌に住んでいるので、札幌スタートの北海道サイクリング動画となっています。
それ以外の動画も色々やってみたいのですが、最近はあんまりですね。

[IwaKen Logs](https://www.youtube.com/@iwaken_logs)


## 今年の動画作り

### 動画構成

毎年なんとなく動画制作の方針みたいのを一応考えているのですが、今年はとりあえずナレーションなしにして、音楽も（これでも）控え目にしてみました。Youtube動画としては方向性間違えている気がしますが、雰囲気重視にしたかったのでした。あとはルートを地図で作成するようにしてみました。（ここはがんばった。）色づくりは去年からですが、少し青緑寄り？

### iPhone動画の導入

GoPro1台をロードバイクに完全固定で撮影しています。去年、左右に首を降ることができるマウントを買ったのですが、結構振動に弱く安定しなかったので、完全固定のマウントに戻してしまいました。
ただそれだと、少し絵的につまらないのでは・・。と思ったので今年は、ポイントポイントで安全なタイミングで、iPhoneのシネマティックモードでの動画撮影を行い、混ぜ込みました。

3年以上サイクリング動画を作成しているというのに、今更ながら今年から[けんたさん](https://www.youtube.com/@iamkentasan)の動画を見始めて、そこでスマホ縦動画であろうと、ライブ感重視で盛り込んでいっているのをみて、真似してみましたw

途中でやめればよかったのですが、HDRモードでずっと撮影していて、PCでの編集時にどう扱えばいいのかわからず（未だにわかっていない）、結構色味的におかしくなったものが多かったですね・・。それはそれで映えるか、としています。

### ショート動画への挑戦

ショート動画なるものが流行っているらしいということで、ショート動画を全く見ないおじさんのため、どういう動画が求められているのかわからず、作成した動画の宣伝として、ダイジェストのショートをアップしていました。ちょうどiPhoneで動画を撮り始めたので、Youtubeアプリから作成してアップ出来て手軽でした。良くできている。再生数は凄く伸びたり、ピクリともしなかったり。難しい。

## 今年の動画リスト

今年作成した動画はショートを含めて、**14本** でした。（実は半分がショート動画）。
新年一本目がたこ焼き動画となった以外は、すべてサイクリング動画ですね。

ショート動画以外の動画を以下、振り返りつつ貼ります。

### 動画勢が「たこ焼き」作りにチャレンジ

今年唯一作成したサイクリング以外の動画。初の料理動画でした。
一応このためにたこ焼き用の鉄板をゲットしました。うちのチャンネルはサイクリング以外の動画は全然伸びないのですが、色々遊びたいところ・・。

<iframe width="560" height="315" src="https://www.youtube.com/embed/PEl5xaeloKI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

### 灼熱の12号線 - 北海道サイクリング2022 -

今年初の遠出サイクリング。大体毎年、近所を軽く走って、少し調子が出てきたら遠出をします。とにかく暑くて汗だくだった記憶。まだ7月上旬でしたが、今年一番くらいに暑かったのでは？ルートとしては、毎年行ってる定番の軽め岩見沢。

<iframe width="560" height="315" src="https://www.youtube.com/embed/IV9bzPaecoc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

### 厚田からフクロウをみるか - 北海道サイクリング2022 -

今年一番地味なサムネになってしまった。当別のふくろう湖行き。岩見沢と同じくらいの距離で、こちらもウォーミングアップですね。こう振り返ると今年は結構フルメンバー（3人）で走れる回が多かった。

<iframe width="560" height="315" src="https://www.youtube.com/embed/c20rjnUwEII" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

### 140km夕張への旅 - 北海道サイクリング2022 -

ここからが、僕の未知のルート。まずは夕張。体力的に自信がないので120kmくらいまでに今までしてきたのですが、今年は珍しく距離を延ばすライドに参加。夕張でメロンを食べるぞと思ったのだけど、思ったよりコスパが良くないので日酔ってソフトクリームにしてしまうという。

<iframe width="560" height="315" src="https://www.youtube.com/embed/evFI6IDuUA8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

### みちのえき当別へのゆるぽた - 北海道サイクリング2022 -

確かスタート時刻が遅くて、距離走れないねって話して走り出した回。本当に全然距離を走るつもりがなかったのだけど、色々勘違いとかで長沼まで行ってしまって、帰り真っ暗になる回。意外とこういう地獄も楽しかったり・・。この動画から本格的にiPhoneのシネマティックモード動画を混ぜ始めてみました。

<iframe width="560" height="315" src="https://www.youtube.com/embed/LW59GPcY91s" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

### 新十津川へ275号線ヲカケル - 北海道サイクリング2022 -

夕張からさらに距離を伸ばした新十津川行き。僕は初参戦。動画は時系列でスラっと作ってしまったけど、後半の新十津川近辺の景色がすごくきれいなので、キレイなシーンを頭に持ってくればよかったとアップ後に思う。個人的に今年一番よかったかもなぁ。最後新十津川の小学生に警戒されたのか、元気にあいさつされました。

<iframe width="560" height="315" src="https://www.youtube.com/embed/iRxQzJvlbEk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

### むかわ道の駅ししゃも旅 - 北海道サイクリング -

こちらが今年最長距離。鵡川行き。今年はちょっとネジはずして長距離も走ってみたけど、さすがにきつい距離。風が強かったこともあるかなぁ。鵡川についたのが15時くらい？帰り真っ暗で19時過ぎていた・・。鵡川あたり結構鹿がいました。思ったより大きくてチャリでぶつかったら死ぬなって感じ。

<iframe width="560" height="315" src="https://www.youtube.com/embed/NRfvAV8eOjw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


## まとめ

我々のサイクリングは基本的に今後も札幌スタートのサイクリングがメインとなる予定です。そうなるともうルートのバリエーションは無いです。来年もまたモチベーションがあったら、同じルートで動画の作り方を変えて作っていこうかな。

（そういえば今年最後のサイクリング動画の素材だけあって、放置しちゃってる。気が向いたら冬の間にアップしよう）。


今年の北海道サイクリング動画振り返り


個人Blogをどう書いて、管理、運用するのか、というのを個人的な趣味で数回に分けて記事を書いてみたいと思います。
今このブログはNextJSのSSGを利用して、静的HTMLのビルド時にだけローカルで記事を取得するAPIを起動し、作成されたHTMLをAmazon S3にアップロードして公開、常時稼働のサーバ等は無くしてコストを抑えています。

## 個人ブログで記事（データ）をどう持つか

有名Blogサービスではなく、個人でブログを作成する場合、記事をどう管理するのかという問題があります。
古典的にHTMLで記事を書いていく（昔々やっていました）場合は良いでしょう。完成形をそのまま保管すると良いと思います。

このBlogの記事は少し前までは、HeadlessCMSの [Strapi](https://strapi.io/) というものを利用して管理していました。
HeadlessCMSとは、WordPressのようにサイトの表示内容は管理せず、記事の作成・管理する機能と、コンテンツ取得APIだけを提供する形式をとる、コンテンツ管理システムです。
中でもStrapiは珍しく、ローカルで動かすことができます。DBとStrapiを動かすdockerなどを用意すると、ローカルで記事を作成、管理することができます。

## Strapi

[Strapi](https://strapi.io/)

HeadlessCMSでは、以下のようなリッチな記事管理機能が提供されます。
画像はAWS S3にアップロードする設定もあったりと至れり尽くせり。
Authorの管理や指定、カテゴリーなどのカスタムタグによる管理も出来、それらをWebAPIで返すことができます。

これをローカルで動かすことでローカルのMySQLに記事データを持つことができ、ダンプなどを取っておけばバックアップにもなるでしょう。
SSGで静的なHTMLを生成してアップロードするだけなので、記事を更新するタイミングだけ起動していれば良いため、常時稼働の料金などもかかりません。

![スクリーンショット 2021-07-23 211739.png](https://moruorange-blog.s3.ap-northeast-1.amazonaws.com/undefined/20221217-how-to-manage-blog/images/2021_07_23_211739_b667b77569.png)

**記事を作成している様子**

![dockerfile](https://moruorange-blog.s3.ap-northeast-1.amazonaws.com/undefined/20221217-how-to-manage-blog/images/dockerfile.png)

**docker-compose.yml（イメージ）**


## strapiをやめた理由と今後

現在は個人でBlog記事を管理する簡易システムを作って動き始めたので、そちらで管理しています。
Strapiをやめて、個人システムに移行した理由は、HeadlessCMSくらいの簡易的なものですら、個人的には面倒でtoo muchに感じたためでした。
複数のAuthorがいることが想定されたログインの仕組みなど、個人的には不要なのです。
高いカスタマイズ性のために、WebAPIの設定などについても面倒で気になりました。

今後記事にしていくつもりですが、今回作成したBlog管理システムは、大分用途を絞った簡易的なものとしています。
記事はmarkdownで作成し、それらを単純なディレクトリ構成によって管理するものです。
世の中には既に同様なものがある気がするけど、半分趣味で作ることにしました。

次回へ続く・・。


個人ブログにStrapiというHeadlessCMSを使っていた話


![スクリーンショット 2022-01-23 012308.png](https://moruorange-blog-strapi.s3.ap-northeast-1.amazonaws.com/2022_01_23_012308_fc5f6f8774.png)

**初めてのムン（月）着陸を失敗している図**

皆さん宇宙は好きですか？
僕は好きです。史実系も、SFも好きです。
宇宙ロケットによる移動って具体的に想像したことありますか？僕はなかった。

## Kerbal Space Program とは

ロケットを研究、設計して、宇宙探査を進めるゲーム。
資金や人材を管理しつつ、ミッションをこなしていく。最初は固体燃料ロケットによる母星周回を目指す。研究を進めて、後々は別の天体を目指す。

[Kerbal Space Program - STEAM](https://store.steampowered.com/app/220200/Kerbal_Space_Program/?l=japanese)

## アップした動画

一応ここまでのチャレンジを動画にしたりしています。

<iframe width="100%" height="280" src="https://www.youtube.com/embed/0XFp8ArByCg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

**ロケットビジネス 周回軌道旅行編 - Kerbal Space Program**

<iframe width="100%" height="280" src="https://www.youtube.com/embed/yG1z7bwdd0Q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

**ムンへの飛行テスト - Kerbal Space Program**


<iframe width="100%" height="280" src="https://www.youtube.com/embed/ZR7hAn1EfNg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

**ムン着陸と帰還チャレンジ(2名) - Kerbal Space Program**

## 驚いたこと

軽い気持ちでこのゲームを購入して初めて見たのだが、驚いたことが何点かあった。どれも自分が今までいかに**テキトウに宇宙での移動について考えていた**ことに由来する。ほんと物理の授業とか、こう想像しながら受けていたら、何倍も面白かったことだろう。


### 周回軌道の向き

ロケットは発射台に設置していると、当然最初はまっすぐ立っているわけだ。打ち上げると基本的にはまっすぐ飛ぶわけだ。最初は何も考えず真上に打ち上げるだろう。なんかそれで母星の周回軌道に入れる、、わけはないのだ。
ロケットは地上に設置されているときは、地球の自転の系に乗っているのだ。真上に打ち上げると、その系の状態で上に上がる。つまり宇宙視点で見ると、自転方向にも移動していることになる。
周回軌道に乗るには回る必要があるが、そういう系から飛び立つのであるから、**宇宙に出たら自転方向に加速し、周回するのが自然**なのが体感できるだろう。

### 現在の軌道を維持しながら速度を変える

ちょうどよい周回軌道に乗れたとしよう。きれいな円だ。
その状態で進行方向に加速するとどうなるか。円が大きくなり縦長楕円になる。
次に、減速（進行方向の逆加速）をするとどうなるか。円が小さくなり横長楕円になる。
新円を描く場合は、速度によって半径が変わるのだ。同じサイズの新円の軌道を描いている2物体が接近しようと加減速すると、**同じ軌道からはずれる**ことになる。

### 宇宙速度

母星の衛星軌道から脱するには、母星との相対速度が一定以上になる必要がある。それを超えると、母星から脱して、母星と同じ惑星軌道をとることができる。惑星間の移動は、その状態から加減速することによって、内外側に移動することになるだろう。（まだやっていない）。
ただ衛星など比較的近隣の場合、母星の軌道に乗りながら加速して軌道を広げ、衛星にタッチすることができる。衛星に近づいたら減速し、衛星の衛星軌道のせるのである。
必要なエネルギー量を考えると、惑星間移動は大変なことだし、さらにインターステラーの旅などは、大変なことだと感じることができる。


### 衛星の着陸

アポロ11号は有名だが、大気のない天体にはどうやって着陸すればいいのか、あまり考えたことがなかった。ドキュメンタリーや、映画「ファーストマン」などを観ることでイメージをつかんだつもりだったが、まだ少し足りていなかった。
衛星軌道に乗った後、着陸するにはどうするのか。とりあえず**逆加速**することである。そうすると軌道が小さくなり、衛星との衝突軌道になる。そのまま放置していると、衛星に落下してしまうことになる。
落下しないために何をするべきかというと、当然減速である。どういう方向に減速するのか？衛星に向けるのか？実は基本的には進行方向とは反対の逆加速を常にすることになる。逆加速方向は速度があるときは真横、落ちてくると下へと変化する。そしてその速度が限りなく小さくなった時に何が起きるだろうか。そう、**衛星と相対速度があった状態になる**。地球での打ち上げ直後と同じような状態だ。そうなればあとは真下にゆっくり降りることになるのだ。

## おすすめ

このゲームをやることで、SF作品を読んでいるときにも、宇宙船の描写などで、納得感が得られてより楽しめたりしてとても楽しいのでお勧めします。セールの時などにぜひ買ってみてください。重力加速度とは何なのか、**地球にへばりついている人類**が宇宙の一般的な法則を理解するのになぜ時間がかかったのか、などを体感することができると思います。

[Kerbal Space Program - STEAM](https://store.steampowered.com/app/220200/Kerbal_Space_Program/?l=japanese)


Kerbal Space Programで宇宙航行を体感する

![IMG_0135.PNG](https://moruorange-blog.s3.ap-northeast-1.amazonaws.com/undefined/20210923-inragu/images/IMG_0135_2d27f4dbd3.png)

**インフィニットラグランジュ** [公式](https://www.infinitelagrange.com/jp/)

宇宙が好きだ。シミュレーションゲームが好きだ。某スマホゲーに最近飽きてきたが、iPhone13やiPadを買う理由を作るためにも、何か新しいスマホゲーを探してみようと探してみて、AppStoreで新着ゲームとして挙げられていたので試してみた。

オンライン戦略ゲームみたいなたぐいは、昔から噂は聞いていた。三国XXとか、そういう類のもののようだった。**何かと良い噂を耳にしなかった**ので、今まで触れていないジャンルだった。
ただ、今回は起動して、少し良さそうだったのでやってみることにした。

## ゲーム概要

宇宙がステージ。対人戦ありの多人数戦略シミュレーションゲーム。拠点基地周辺で資材を採集しながら、艦船の設計図をガチャで入手。基地拡張と艦隊の整備を進め、ユニオンに加入し、皆で攻略戦を繰り広げる。

![IMG_0138.PNG](https://moruorange-blog.s3.ap-northeast-1.amazonaws.com/undefined/20210923-inragu/images/IMG_0138_4f891a8e7f.png)

**資材集め**

## 良さそうだったところ

平面の宇宙盤面上で船の移動や行動を指示して進めていくゲームのようだった。引きの画面で移動先を指定して移動、シンプルで、グラフィック的にも簡略化された表示である。（実際の艦隊の編成が表示されているわけではない）。

ただチュートリアルの中で、その艦隊のグラフィックを確認することができた。盤面のアイコン的な戦艦をズームすると3Dグラフィックで編成した艦隊が見える。それは当然だろう。だが思ったより綺麗だ。そして近くに宇宙基地や小惑星があるエリアを飛行していたのだが、**その位置関係などもしっかり3Dグラフィックとして表現**されていた。思ったよりちゃんと作られていそうなゲームだなと思った。近くに艦隊があったら、それも表示されたりする。こういうところに手を抜かないのは好感が持てる。
この手のゲームよくあるのだが、チュートリアルなどで、キャラクターの謎の立ち絵みたいな謎の会話形式があったりする、あのクオリティには毎回がっかりして、そこでゲームを辞めてしまうこともある。このゲームはキャラクターが全く出てこない。個人的にはその方が好きだ。主人公は**艦隊司令をしているプレイヤー自身**なのだ。

![IMG_0140.PNG](https://moruorange-blog.s3.ap-northeast-1.amazonaws.com/undefined/20210923-inragu/images/IMG_0140_f9f68ee6fd.png)

**ガチャでかっこいい戦艦の設計図を引く**

## 規模感

次に気づくのは規模感。あと一応新しいゲームということでインストールだけしたプレイヤーも含めて、プレイヤーもある程度いるので、そのプレイヤーの拠点も各所にあるが、これが**結構広大**。でもスカスカにもならないというちょうどよい規模感。世界の一員という感じがする。

![IMG_0139.PNG](https://moruorange-blog.s3.ap-northeast-1.amazonaws.com/undefined/20210923-inragu/images/IMG_0139_e9ad2e3ff5.png)

**全体マップの一部（最大の引きで撮影）**

そして**移動に時間がかかる**。どのくらいかかるかというと、移動しうる必要のある距離の端から端までワープで**6時間**とかはかかる。ちょっと先に移動する場合でも何分かはかかる。これはこのゲームのもどかしい部分でもあるが、この制約もゲーム性ととらえることもできる。（移動周りは不便で混雑したり難もある）

## ユニオン加入から戦いの夏へ

何はともあれ、この手のゲームは**ユニオンに入らないと話が始まらない**。適当にリストに出てきたユニオンに加入。ゲームチャットであいさつなどをした。しばらくは静かだった。

しかしメンバーが増えてきたことから、**基地攻略戦**を行うことになった。まだゲームがスタートしたばかりのようで、誰にも占領されていないNPC保有の基地であふれている。それを攻撃するのだ。しかしこのゲームは移動に時間がかかる。X時にYを攻撃と指令してもなかなかうまくいかない。メンバーもずっとゲームに張り付いているわけでもないのだ。時間までにたどり着いた面子で攻撃を行うことになる。

![IMG_0131.PNG](https://moruorange-blog.s3.ap-northeast-1.amazonaws.com/undefined/20210923-inragu/images/IMG_0131_f1bfbfbbbd.png)

この基地攻略戦を体験して、ようやく多人数ゲームなのだなと感動したもの。

NPC基地攻略戦は各ユニオンがそれぞれ進めていく戦況となる。そうなると**NPC基地がすべて占拠されるのも時間の問題だった**。そうなると次に訪れるのは・・。

## 課金勢の台頭

当ユニオンが活動する領域のすべての基地がNPC所有から、各ユニオンの所有へと置き換わっていた。そして基地争奪戦の前に、それぞれの**各プレイヤー拠点への攻撃**が始まった。火ぶたを切ったのは有力ユニオンの**一部の課金勢**であった（アジアプレイヤー）。通常の艦隊5つで囲ってようやく撃退できるという見たことのない戦艦で固められている廃課金艦隊によって、次々とプレイヤー基地が落とされたという報告が続く。プレイヤー基地がやられると、マップの任意の地点へと基地が飛ばされてしまう。（完全にリセットされるわけではない）。だいたい周囲に資源がないので、引っ越し先を探すところからやり直しである。艦隊も再整備することになる。有力プレイヤーがユニオン内部のスパイなどを通じてもれた座標によって基地攻撃の被害にあう。**自分も寝ている間にやられて**へき地へ移動となった。全チャでは攻撃者である廃課金プレイヤーが楽しそうに自慢しているのである。

## 穏やかな秋へ

廃課金には勝てないゲーム仕様だと判明してしまい、**モチベーションがだいぶ下がってしまった**当ユニオンメンバーたち。しばらくへき地で資材を集め、基地を強化し、設計図を引いて、来るときに備えてまったりと過ごすことになった。こういうゲームはリリースされては消えてを繰り返すものである。このままフェードアウトしていくこともあるし、それを悲しむこともないのだろう。そういう特性上、**今回出たこのゲームに課金をどのくらいしていいものなのか**、見定める感じになってしまう。廃課金が相対的に強くなってしまう一因であろう。
自分はこういう類のゲームは初だったが、ユニオンメンバーはそうでもないようだった（それはそうか）。 **「結局こうなってしまった」** というあきらめが漂う穏やかな秋を迎えた。個人的には、たまたま有力ユニオンに入ることができ、序盤の攻勢を楽しめたので、だいぶ満足はしている。

## 雑感

ここまで数週間くらいの出来事である。もっと周囲のプレイヤーとのユニオンの関係のない小競り合いなどがあるのかと思ったが、結構ユニオンベースでゲームは進む。周囲にいる他の野良プレイヤーの基地などを突然攻撃するということは基本的にはない。ほとんどのプレイヤーは理性的であった。
ただしユニオン同士の戦いが苛烈になってくると、全チャでのやりとり（このゲームは翻訳機能があるので余計に）、スパイの存在、ユニオンチャットで飛び交う表に出たら問題のありそうな発言（本気ではないと思うが）など、結構暗い部分もある。まったり遊びたいという人にはあまり向かないジャンルなのだと、プレイ前から抱いていたイメージ通りの感想を抱いた。

続報があったら続きを書こうと思う。




インフィニットラグランジュ プレイ日記

もう来てしまいましたシンエヴァがAmazon Prime Videoに。本当に早いですね。今回はコロナ禍ということで、特別なのでしょうが、今後この流れが来ると面白いなぁと思います。

ここ2年くらい映画館は縮小して上映したり、延期したりと大変そうでした。映画と映画館は切り離せない関係で、歴史的経緯もあると思うので、いきなり配信ということは難しいのでしょう。１映画ファンとしては作品を早く見たいという気持ちと、映画館の大スクリーン＋大音量で観たいという気持ちがぶつかり合います。なんとか良い折衷案があると良いのですけどね～。今回シンエヴァの動きが何か影響を与える可能性はありそうでしょうか。

シンエヴァがAmazon Prime Videoに来た件

題の通り、このブログを作成してみました。

![スクリーンショット 2021-07-23 211739.png](https://moruorange-blog.s3.ap-northeast-1.amazonaws.com/undefined/20210723-new-blog/images/2021_07_23_211739_b667b77569.png)

Headless CMSをつかってブログデータはホスティングしつつ、基本は静的なコンテンツにしています。
それも普段は寝ていて、ブログを書いてデプロイするときだけ起きる感じです。
フロントエンドは勉強を兼ねて[NextJS](https://nextjs.org/)で作成しているのですが、実はmarkdownエディタがちゃんとしていれば、そもそもCMSも不要かもしれません。面倒になったら、いつかそちらにしちゃうかもです。
普段バックエンドやAWSなどの仕事をしているため、CSSなどが弱くて、徐々に改善させていきたいかなと思っています。
この辺の話は、後々記事化してみようかと思います。




BLOGを作ってみた

数年前にSwitfで書いたiOSアプリ「[TAISENカウンター](https://apps.apple.com/jp/app/taisen%E3%82%AB%E3%82%A6%E3%83%B3%E3%82%BF%E3%83%BC/id1023105923?uo=4&at=10l8JW&ct=hatenablog)」がメンテできない状態になってしまい、画面もiPhoneXサイズに最適化されていなかったため、ずっと書き直したいと思って直しました。ついでにAndroid版もデビューです。

[TAISENカウンター（AppStore）](https://apps.apple.com/jp/app/taisen%E3%82%AB%E3%82%A6%E3%83%B3%E3%82%BF%E3%83%BC/id1023105923?uo=4&at=10l8JW&ct=hatenablog)

[TAISENカウンター（Google Play）](https://play.google.com/store/apps/details?id=jp.moruorange.taisen_counter&hl=ja)


幸い？大した機能のないただのカウンターアプリであったこともあり、最近周囲で流行っていたFlutterで書き直してみました。SwiftUIも少しだけ触ってみたのですが、うまくいけばGoogle Play Storeにも出せるのではと思ったのでFlutterを選出しています。

今回は今回のリリースまでに感じたことを書いていきます。実装周りの詳細については後日追加で記事にしていきます。


## Flutterよさそう

Flutterで書き直してみての感想は、最初コツを掴むまではたくさんエラーを出しながら、悩んだりしていましたが、それを乗り越えたら結構サクサク実装を進めることができました。実質アプリのUI部分に関しては、3画面くらいなのでほぼ1日で仕上がりました。（その前に2日くらい試行錯誤でしたが・・）。

普段サーバサイドのバックエンドの仕事をしていてUIに不慣れということもあったからか、たくさんのネストが生まれるコードは大変でした。こことここの間に新しいScrollViewを入れようとなったときに、閉じかっこどこだとか悩んでいました。ただIDEの機能をちゃんと使いこなせばこれも大丈夫みたいです。（範囲選択やリファクタなど。）

iOSシミュレーターで動かす時のビルドは結構時間がかかります。しかしそれを補うホットリロードのありがたさ。素敵です。ホットリロードなかったら無理では・・。時々、初期画面から試したい時があって、そのときは毎回ビルドしていて辛いなとは思いました。




## Flutterの学び方

### Dart

あくまで趣味プロジェクトということで、基本的にDartは雰囲気で使いました。普段Javaを使っている自分からしたら結構馴染み深いような言語に感じました。これくらいのアプリだったら特に言語要因で悩むことはほとんどないと思います。むしろJava目線で見たら、いろいろ便利そうな機能が見えて楽しかったです。

開発環境はInteliJを選択しました。補完もしっかり聞いてFormatterも動くし、素晴らしかったと思います。普通はVSCodeでやるのかな？

### Flutter

基本的に公式のドキュメントのGet StartdとSamples & Tutorialsまでは一通り読み、それ以外は要点だけ目を通したくらいでした。ここから使えそうな各UIパーツを拾って行って実装を開始するという感じです。その段階に至ったときに試行錯誤期間に突入しました。

「childrenを期待していたのに、あれ？childか」とか、「TextFormFieldはPaddingとかの下に入れないといけないのか」とかとか。雰囲気でやろうとするとこういうところで躓きますね。頑張って乗り越えましょう。

[Flutter documentation (公式)](https://docs.flutter.dev/)

## このアプリ固有のポイント

このアプリはカウントアップ時に音がなるのですが、音を鳴らすパッケージでどれを使えばいいのか悩みました。。試しに一つ選んでみてもうまく動かなかったり、結構詰まっていました。

audioplayer、audioplayer2、audioplayersとか似た名前のがたくさんあるんすよね・・。辛み。

最終的に使ったのはこれ-> [https://pub.dev/packages/audioplayers]( https://pub.dev/packages/audioplayers)

あとアクティブユーザがそんなにいないアプリなので、お金になるとは考えていませんが、admobを入れてみています。ちゃんとパッケージがあって素敵でした。これもさくっと入りました。ただNativeより制限があるっぽい？

[https://pub.dev/packages/firebase_admob](https://pub.dev/packages/firebase_admob)

最初広告設定も全部終えたつもりでリリースしてしばらくしても広告配信されないなぁと思っていたのですが、支払設定を作らないとダメだったみたいです。ちなみにこれくらいの弱いアプリだと、いわゆる広告主？的なものは0件となっていて、Googleさんしか配信元になってくれていないっぽい。

## iOS版一回リジェクトされる・・

TAISENカウンターというアプリ自体は数年前からiOSのストアに出していたのですが、今回Flutterで書き直したとはいえ、機能そのままで審査に提出したところ、例の理由でリジェクトされました・・。

リジェクト理由は4.2、知る人ぞ知る、「機能が少なすぎる」というものでした。前は通ったのに・・。長期戦を覚悟して、前から実装予定だった機能を1つ2つを1日で実装して、再提出してみたところ、さくっと通りました。よかった。このとき結果のShare機能も追加しましたが、shareパッケージ簡単で素敵。

[https://pub.dev/packages/share](https://pub.dev/packages/share)

カウンターアプリなんてありふれていますからね〜。しょうがないとは思います。

## Android版の作成もスムーズ

問題のAndroid版です。まず自分は実機を持っていない。Developerアカウントもないという状態でした。Android Studioは以前入れていたので、シミュレーターを動かしてみたところ・・・。完璧に想定どおりに動きました。さすがFlutter！これは感動しますね。少しは手直しが必要かと思っていたのですが、コード自体はそのままで、Android向けのビルド向けの作業をしただけです。これも公式そのままなぞるだけ。簡単。

[Build and release an Android app - Flutter](https://docs.flutter.dev/deployment/android)

## 今後

またアプリを作るときにはFlutterでやってみたいと思うくらいには気に入りました。表示をFlutterに委ねることで、XCodeのGUIでのごにゃごにゃからも逃げられてよかったです。複雑な画面の場合はNativeの方が組みやすいとかはあるのかもしれない？


**（旧ブログから移行）**

Flutterでアプリを書き直してiOSとAndroid両方にリリースしてみた

## 買っちゃいました

先月ひっそりとルンバe5を購入しました。
![20190109205250.jpg](https://moruorange-blog.s3.ap-northeast-1.amazonaws.com/undefined/20190419-roomba-e5/images/20190109205250.jpg)

**充電ステーションで電気をむさぼるルンバさんの図**


こまめに掃除をする人、掃除が苦手ではない人、には理解されないかもしれませんが、面倒くさがり屋な僕は、気づいたら1、2週間掃除機をかけないで過ごしてしまうことが多々ありました。。

そのくせ、汚いのは好きではないので、ホコリなどが落ちているのを見かけると、「週末掃除機かけるから・・」と嫌だなと思いながらも放置したりしています。文字に起こしてみると酷いもんですね。




## ルンバ選定

いろんなメーカーからロボット掃除機が出ていますが、初めてのロボット掃除機はとりあえず業界トップのiRobot社のルンバ（Roomba）にしようと思いました。やっぱ憧れますよね。

公式サイト([ロボット掃除機 ルンバ | アイロボット公式サイト](https://www.irobot-jp.com/roomba/))をみてみると、大きく3種類あるようです。900シリーズ、600シリーズ、そしてe5です。今回購入したのはe5ですが、 「10.26 Debut」とある通り、現時点での最新機種みたいです。まぁこれ買っちゃいますよね。

スペックとしては900シリーズが最上位モデルで、掃除した部屋の地図データなんかも取得できちゃうみたいです。本当はそれも欲しかったのですが、流石に予算オーバーになってしまう・・。スケジュール機能もあるし、掃除機としての性能も600シリーズより改良されていそうでしたので、今回はe5を選ぶ事にしました。

[ルンバ e5 (Amazon)](https://www.amazon.co.jp/dp/B07K482T9R/ref=as_sl_pc_qf_sp_asin_til?tag=moruorange08-22&linkCode=w00&linkId=5d1086f9b59748488df6ccdae1744da9&creativeASIN=B07K482T9R)


## 到着時の感想 

「思ったより大きい・・。」スペックからサイズ感は把握していたつもりでしたが、それでも思ったより大きく感じました（部屋が狭いだけという説もある）。充電ステーションをどこに置くのか少し悩みました。購入予定の方は注意してください。

到着して少し充電して早速動かしてみると、可愛い・・。ルンバは可愛いです。ちょっとバカっぽい感じも応援したくなります。初回30分くらい、動いているのをずっと見守ってしまいました。結構ランダムで動いて、なんども同じところ掃除するんだな〜と思いました。

<iframe width="560" height="315" src="https://www.youtube.com/embed/mWM04tkznSk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

**ルンバe5掃除風景。結構大きめな糸くずを逃す。（※掃除機音注意）**




## 2週間くらい使った感想

### スケジュール機能は偉大

平日の月水金の正午にスケジュール機能設定をして、家にいない間に掃除をしてもらう事にしました。スケジュール機能や、掃除の履歴などはアプリから確認することができます。

![20190109210256.png](https://moruorange-blog.s3.ap-northeast-1.amazonaws.com/undefined/20190419-roomba-e5/images/20190109210256.png)
![20190109210259.png](https://moruorange-blog.s3.ap-northeast-1.amazonaws.com/undefined/20190419-roomba-e5/images/20190109210259.png)
![20190109210305.png](https://moruorange-blog.s3.ap-northeast-1.amazonaws.com/undefined/20190419-roomba-e5/images/20190109210305.png)


もちろん手動でも開始できますので、土日は手動で開始させています。しかもAmazon Echoとの連携も簡単にできるので、音声で「ルンバで掃除をして」と言うと掃除を開始することもできます。

### 少し頭良くなった？（多分そんなことはない）

掃除の動きも何パターンかあるようで、ランダムに動いたり、右優先で壁に沿って動いたりします（右側にほこり集める回転体が付いている）。親バカなだけかもしれませんが、少しだけ部屋の形を覚えてくれてるのでは？と思う動きを見えるときがあります。（壁もないのに部屋越えたところで右折したり）。どうなんでしょう。**（後日談：多分そんなことはない）**

### コード類は注意 

 ルンバは床に物を置いている家には向かないと言う話があると思います。うちは比較的少なめかと思っていましたが、細かいところに罠があります。以下に列挙します。

### VS 激弱ゴミ箱

動画にも少し映ってますが、リビングのゴミ箱が超軽量級なひ弱なやつで、ルンバにかかれば、イチコロです（タックルでゴミ箱の中身ぶちまけます）。テーブルにくくりつける事で勝利しました。 

### VS PS4コントローラの充電ケーブル

普段リビングのテーブルとPS4の間で宙づりになっています。これが少しでも垂れよう物なら、ルンバ得意のタックルでコントローラを地面に叩きつける攻撃を行ってきます。これには困ったものでしたが、掃除する予定の曜日は垂らさないという、泥臭い運用回避の道を選びました。たまに少し引っ張られています。

### VS 絶妙な幅のスペース

ベッドのサイドテーブルがちょうどルンバが収まるサイズになっています。普段はこれくらいギリギリの場所に攻め込んでくることはないのですが、先週末たまたまスィーっと入って行きました。ぶつかっては20度くらい回って直進、を繰り返して出ようとしますが、10分くらい出れなかったので、手動で解放してあげました。まだ対策はできていません。バーチャルウォールという仮想の禁止領域を指定できる装備がセットで付いてきているので、再度発生するようなら置いてしまおうか・・。


### VS 電動リクライニングソファ

残念ながら、うちのソファはルンバが下に潜れません・・。また電動リクライニング機能があるのでコードが生えています。本日ついにやらかしていました。右タイヤにコードを絡ませてしまって、そのままソファの下に突っ込んで、エラー終了してしまっていました。直接の原因はコードなので、コードを束ねたりして対処しようと思います。。

![20190109205257.jpg](https://moruorange-blog.s3.ap-northeast-1.amazonaws.com/undefined/20190419-roomba-e5/images/20190109205257.jpg)

**タイヤにコードが絡まってエラーになって、穴があったら入りたい赤面ルンバ氏**




## 感想

いろいろやらかしてはくれますが、帰宅すると掃除が終わっているという体験は素晴らしいです。あと一人暮らしだとあまり、誰かに気を使うということがありませんが、こいつがきてからは、家出るときに気を使いまくりです。人間的な気持ちを取り戻せます。ただ、ルンバが掃除してくれるから、自分で掃除をしなくていいのかというとそんなことはなくて、ルンバに任せられない領域（玄関など）や、ルンバがいけない場所などは定期的に自分で掃除する必要があります。どうせ掃除しなきゃいけないのなら、ダイソンV10を買って掃除を頻度をあげたほうがいいじゃん、と考える人も多いかもしれませんね。それでも個人的にはルンバでよかったと思っています。怠惰な人間をなめてはいけない。。ダイソン買っても2週間置きにしか掃除しない未来しか見えなかった。

これからも使い続けてみて、さらに感想が出たら続編書きたいと思います。

**（旧ブログから移行）**

ルンバe5を買いました

## Apple Watch対応しました！

以前記事にしましたが、iPhone向けのアプリとして、卓球の得点計算アプリ「卓球カウンター」をApp Storeにリリースしました。

[以前の記事](/posts/8)

卓球しながら得点をアプリでカウントするのは、2人しかメンツがいない場合などでは、とても面倒なものです。Apple Watchなら、得失点のたびにボタンを押すのもそこまで苦ではないかなと思い対応してみました。


<iframe width="560" height="315" src="https://www.youtube.com/embed/JmGVbP0RvGk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

**卓球カウンターアプリ Apple Watch動作デモ**





動画では、Apple Watchからの操作でiPhoneの画面が更新されていませんが、通信遅延のせいでした。もう少し待っていれば最新の状態に更新されます。スペックの問題か、Apple WatchからiPhoneへの通信が特に遅いです。逆は動画にある通り、比較的スムーズに反映されます。




## 実装について

iPhoneとApple Watch間のやりとりは、WCSessionを作成し、データの通信をしてお互いの情報を更新していきます。今回はすでに実装してあったiPhone側にデータ本体を保持し、Apple Watchは各イベントで最新の情報をiPhoneから取得するようにしています。Apple Watch側のイベント、例えば得点加算ボタンを押した時は、iPhoneにどちらのボタンを押したかという情報だけを送信し、iPhoneの得点ボタンを押した時に呼ばれる処理と同じ処理を呼び出します。iPhoneの得点ボタンでは、得点加算後に自身のViewとApple Watchに現在の最新情報を送信する処理が含まれているため、Apple Watch側に加算後の値が表示されるようになります。




iPhoneアプリはMVP（のような）実装の仕方をしたため、メインのPresenterに通信部分を実装しました。（PresenterはModel更新メソッドを読んで情報を更新した後、Viewの更新メソッド呼び出し更新する役割を持ちます）。Apple Watchからのイベントを受けた後にViewを更新することができる必要があります。




セッションを利用するには、WCSessionDelegateを継承する必要があります。

iPhoneの送受信するクラスと、Apple Watchの送受信クラスの両方で継承します。


```swift
class CounterViewControllerPresenter : NSObject, WCSessionDelegate, CounterViewControllerPresenterProtocol {
    private let counterView : CounterViewControllerProtocol
    private let speechModel : SpeechModelProtocol
    private let counterModel : CounterModelProtocol
    let wcSession = WCSession.default
```

 ## 送信部分

sendMessageでデータを送信します。以下はiPhoneがApple Watchに対して、表示に必要な3項目を送信している箇所です。（もう少し通信内容はしっかり設計したほうがよかった気がしますが・・）

```swift
func sendMessage(counterObj: CounterObj) {
        if WCSession.isSupported() {
            initWCSession()
            let message = [ "kind" : 3, "counterL" : counterObj.counterL, "counterR" : counterObj.counterR, "isServe" : counterObj.isServe] as [String : Any]
            wcSession.sendMessage(message, replyHandler: { replyDict in
            }, errorHandler: { error in
                print(error)
            })
        }
    }
```

## 受信部分

sessionにデータが渡ってきたら、以下の関数が呼ばれます。通信のプロトコルを自身で定義して実装していきます。こちらはApple Watch側の受信部分です。先ほどの送信部分のコードで送った値をこちらで受け取り、reloadDataで自身のViewを更新しています。

```swift
func session(_ session: WCSession, didReceiveMessage message: [String: Any], replyHandler: @escaping ([String: Any]) -> Void) {
        // iPhoneからのデータを受け取る
        guard let kind = message["kind"] as? Int else {
            return
        }

        switch kind {
        case 3:
            let counterL : Int? = message["counterL"] as? Int
            let counterR : Int? = message["counterR"] as? Int
            let isLeft : Bool? = message["isServe"] as? Bool
            reloadData(counterL: counterL!, counterR: counterR!, isServe: isLeft!)
        default:
            print("default")
        }
    }
```

また、以下はiPhone側の受信部分です。Apple Watchから加算イベントです（dataの中のbool値が左右どちらの加算かを意味しています）。incrementCounterL/RはiPhone側の加算ボタンを押した場合も呼ばれる共通処理です。同じイベントを呼ぶので共通化されていたほうがメンテナンスしやすいですね。fromWatchという引数は加算後のiPhone側の音声再生や勝利ダイアログ表示などをしないように制御するためにフラグです。

```swift
case 2:
            let isLeft : Bool? = message["data"] as? Bool
            if (isLeft!) {
                incrementCounterL(fromWatch: true)
            } else {
                incrementCounterR(fromWatch: true)
            }
            result["success"] = true
            return
```

## もう少し先へ

横画面にも対応し、一通りやりたいことはやってしまったので、このアプリの開発は一旦収束となると思います。ただちょっと加算処理をもっと別の先進的なやり方でできないかを検討中で、準備が出来次第実装してみたいと思っています。半分ネタですが、自動加算方面の話です。進捗があったらこちらに報告していきたいと思います。。。

[卓球カウンター（AppStore）](https://apps.apple.com/jp/app/%E5%8D%93%E7%90%83%E3%82%AB%E3%82%A6%E3%83%B3%E3%82%BF%E3%83%BC/id1447881847?ign-mpt=uo%3D4)

**（旧ブログから移行）**





卓球カウンターアプリをApple Watch対応しました


## アプリ作ってみました

とりあえずブログの一発目としてこのネタ。

久しぶりにiOSアプリを作成してApp Storeにリリースしましたので宣伝します。

レアな卓球の得点カウンターアプリです。卓球をやるというレアな人たち向けです。

[App Store - 卓球カウンター](https://apps.apple.com/us/app/%E5%8D%93%E7%90%83%E3%82%AB%E3%82%A6%E3%83%B3%E3%82%BF%E3%83%BC/id1447881847?ign-mpt=uo%3D4)

![20190107195339.png](https://moruorange-blog.s3.ap-northeast-1.amazonaws.com/undefined/20190107-takkyu-counter/images/20190107195339_2415e2e6b5.png)

**卓球カウンタースクショ**


冬の運動手段として最近久しぶりに卓球を始めました。体育館に頻繁に通うという何気に人生初の経験をしている最中です。若い人ばかりで元気だし、皆上手。

卓球で試合形式でやるとき、点数とかサーブ権とか忘れるんですよね・・。歳でしょうか？w すでにたくさんアプリは出回っていますので、その一つを利用させてもらっていたのですが、細かい部分とか自分たち好みにできると良いなと思ったというのと、ただの動機としてアプリの自作を行いました。独自機能として、音声によるサーブ権や得点などの読み上げ機能です。まだ使い物になるかわからないのですが、この音声がプレイヤーに聞こえれば、画面見なくてもわかっていいかな〜と思ってます。（どのくらい聞こえるだろうか・・）

<iframe width="560" height="315" src="https://www.youtube.com/embed/NllpqEbooO4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## アプリの目標

今後も勉強と自分たちのためにアプリをアップデートしていきたいと思っていますが、大きな課題としてはプレイヤー2名だけの時にはアプリは使いにくいというものがあります。これをどのような方法でクリアしていくか、アイディア出しの段階です。

以下羅列。

- 横画面対応
- Apple Watch対応（ボタン二つで加算とundo、リセットのみなど）
- ルールカスタマイズ機能
- 試合履歴の表示、Share機能

あまりいないと思いますが、卓球プレイヤーの方々がいましたら要望などレビューをいただければと思います。


## そういえば...

お前カウンターばっか作ってんじゃないか、ってなると思いますが、もう一つ以前作ったアプリのリンクも貼っておきますw

[TAISENカウンター](https://apps.apple.com/nz/app/taisen%E3%82%AB%E3%82%A6%E3%83%B3%E3%82%BF%E3%83%BC/id1023105923?ign-mpt=uo%3D4)

## ブログの方針

モチベーションを上げるためにも、2019年になったということで、ブログを始めてみようと思い立ちましたので、頑張ってみます。主に自分へ向けての記録用ですが、もしよかったら暇な時に読んでみてください。

アプリなどTech系、写真、ガジェットとか時事ネタ、いろいろジャンルをあまり絞らずにゆるくやっていきますです。

**（旧ブログより移行）**

卓球カウンターをリリースしました

<p>数年前にSwitfで書いたiOSアプリ「<a href="https://apps.apple.com/jp/app/taisen%E3%82%AB%E3%82%A6%E3%83%B3%E3%82%BF%E3%83%BC/id1023105923?uo=4&#x26;at=10l8JW&#x26;ct=hatenablog">TAISENカウンター</a>」がメンテできない状態になってしまい、画面もiPhoneXサイズに最適化されていなかったため、ずっと書き直したいと思って直しました。ついでにAndroid版もデビューです。</p>
<p><a href="https://apps.apple.com/jp/app/taisen%E3%82%AB%E3%82%A6%E3%83%B3%E3%82%BF%E3%83%BC/id1023105923?uo=4&#x26;at=10l8JW&#x26;ct=hatenablog">TAISENカウンター（AppStore）</a></p>
<p><a href="https://play.google.com/store/apps/details?id=jp.moruorange.taisen_counter&#x26;hl=ja">TAISENカウンター（Google Play）</a></p>
<p>幸い？大した機能のないただのカウンターアプリであったこともあり、最近周囲で流行っていたFlutterで書き直してみました。SwiftUIも少しだけ触ってみたのですが、うまくいけばGoogle Play Storeにも出せるのではと思ったのでFlutterを選出しています。</p>
<p>今回は今回のリリースまでに感じたことを書いていきます。実装周りの詳細については後日追加で記事にしていきます。</p>
<h2>Flutterよさそう</h2>
<p>Flutterで書き直してみての感想は、最初コツを掴むまではたくさんエラーを出しながら、悩んだりしていましたが、それを乗り越えたら結構サクサク実装を進めることができました。実質アプリのUI部分に関しては、3画面くらいなのでほぼ1日で仕上がりました。（その前に2日くらい試行錯誤でしたが・・）。</p>
<p>普段サーバサイドのバックエンドの仕事をしていてUIに不慣れということもあったからか、たくさんのネストが生まれるコードは大変でした。こことここの間に新しいScrollViewを入れようとなったときに、閉じかっこどこだとか悩んでいました。ただIDEの機能をちゃんと使いこなせばこれも大丈夫みたいです。（範囲選択やリファクタなど。）</p>
<p>iOSシミュレーターで動かす時のビルドは結構時間がかかります。しかしそれを補うホットリロードのありがたさ。素敵です。ホットリロードなかったら無理では・・。時々、初期画面から試したい時があって、そのときは毎回ビルドしていて辛いなとは思いました。</p>
<h2>Flutterの学び方</h2>
<h3>Dart</h3>
<p>あくまで趣味プロジェクトということで、基本的にDartは雰囲気で使いました。普段Javaを使っている自分からしたら結構馴染み深いような言語に感じました。これくらいのアプリだったら特に言語要因で悩むことはほとんどないと思います。むしろJava目線で見たら、いろいろ便利そうな機能が見えて楽しかったです。</p>
<p>開発環境はInteliJを選択しました。補完もしっかり聞いてFormatterも動くし、素晴らしかったと思います。普通はVSCodeでやるのかな？</p>
<h3>Flutter</h3>
<p>基本的に公式のドキュメントのGet StartdとSamples &#x26; Tutorialsまでは一通り読み、それ以外は要点だけ目を通したくらいでした。ここから使えそうな各UIパーツを拾って行って実装を開始するという感じです。その段階に至ったときに試行錯誤期間に突入しました。</p>
<p>「childrenを期待していたのに、あれ？childか」とか、「TextFormFieldはPaddingとかの下に入れないといけないのか」とかとか。雰囲気でやろうとするとこういうところで躓きますね。頑張って乗り越えましょう。</p>
<p><a href="https://docs.flutter.dev/">Flutter documentation (公式)</a></p>
<h2>このアプリ固有のポイント</h2>
<p>このアプリはカウントアップ時に音がなるのですが、音を鳴らすパッケージでどれを使えばいいのか悩みました。。試しに一つ選んでみてもうまく動かなかったり、結構詰まっていました。</p>
<p>audioplayer、audioplayer2、audioplayersとか似た名前のがたくさんあるんすよね・・。辛み。</p>
<p>最終的に使ったのはこれ-> <a href="https://pub.dev/packages/audioplayers">https://pub.dev/packages/audioplayers</a></p>
<p>あとアクティブユーザがそんなにいないアプリなので、お金になるとは考えていませんが、admobを入れてみています。ちゃんとパッケージがあって素敵でした。これもさくっと入りました。ただNativeより制限があるっぽい？</p>
<p><a href="https://pub.dev/packages/firebase_admob">https://pub.dev/packages/firebase_admob</a></p>
<p>最初広告設定も全部終えたつもりでリリースしてしばらくしても広告配信されないなぁと思っていたのですが、支払設定を作らないとダメだったみたいです。ちなみにこれくらいの弱いアプリだと、いわゆる広告主？的なものは0件となっていて、Googleさんしか配信元になってくれていないっぽい。</p>
<h2>iOS版一回リジェクトされる・・</h2>
<p>TAISENカウンターというアプリ自体は数年前からiOSのストアに出していたのですが、今回Flutterで書き直したとはいえ、機能そのままで審査に提出したところ、例の理由でリジェクトされました・・。</p>
<p>リジェクト理由は4.2、知る人ぞ知る、「機能が少なすぎる」というものでした。前は通ったのに・・。長期戦を覚悟して、前から実装予定だった機能を1つ2つを1日で実装して、再提出してみたところ、さくっと通りました。よかった。このとき結果のShare機能も追加しましたが、shareパッケージ簡単で素敵。</p>
<p><a href="https://pub.dev/packages/share">https://pub.dev/packages/share</a></p>
<p>カウンターアプリなんてありふれていますからね〜。しょうがないとは思います。</p>
<h2>Android版の作成もスムーズ</h2>
<p>問題のAndroid版です。まず自分は実機を持っていない。Developerアカウントもないという状態でした。Android Studioは以前入れていたので、シミュレーターを動かしてみたところ・・・。完璧に想定どおりに動きました。さすがFlutter！これは感動しますね。少しは手直しが必要かと思っていたのですが、コード自体はそのままで、Android向けのビルド向けの作業をしただけです。これも公式そのままなぞるだけ。簡単。</p>
<p><a href="https://docs.flutter.dev/deployment/android">Build and release an Android app - Flutter</a></p>
<h2>今後</h2>
<p>またアプリを作るときにはFlutterでやってみたいと思うくらいには気に入りました。表示をFlutterに委ねることで、XCodeのGUIでのごにゃごにゃからも逃げられてよかったです。複雑な画面の場合はNativeの方が組みやすいとかはあるのかもしれない？</p>
<p><strong>（旧ブログから移行）</strong></p>

<h2>Apple Watch対応しました！</h2>
<p>以前記事にしましたが、iPhone向けのアプリとして、卓球の得点計算アプリ「卓球カウンター」をApp Storeにリリースしました。</p>
<p><a href="/posts/8">以前の記事</a></p>
<p>卓球しながら得点をアプリでカウントするのは、2人しかメンツがいない場合などでは、とても面倒なものです。Apple Watchなら、得失点のたびにボタンを押すのもそこまで苦ではないかなと思い対応してみました。</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/JmGVbP0RvGk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p><strong>卓球カウンターアプリ Apple Watch動作デモ</strong></p>
<p>動画では、Apple Watchからの操作でiPhoneの画面が更新されていませんが、通信遅延のせいでした。もう少し待っていれば最新の状態に更新されます。スペックの問題か、Apple WatchからiPhoneへの通信が特に遅いです。逆は動画にある通り、比較的スムーズに反映されます。</p>
<h2>実装について</h2>
<p>iPhoneとApple Watch間のやりとりは、WCSessionを作成し、データの通信をしてお互いの情報を更新していきます。今回はすでに実装してあったiPhone側にデータ本体を保持し、Apple Watchは各イベントで最新の情報をiPhoneから取得するようにしています。Apple Watch側のイベント、例えば得点加算ボタンを押した時は、iPhoneにどちらのボタンを押したかという情報だけを送信し、iPhoneの得点ボタンを押した時に呼ばれる処理と同じ処理を呼び出します。iPhoneの得点ボタンでは、得点加算後に自身のViewとApple Watchに現在の最新情報を送信する処理が含まれているため、Apple Watch側に加算後の値が表示されるようになります。</p>
<p>iPhoneアプリはMVP（のような）実装の仕方をしたため、メインのPresenterに通信部分を実装しました。（PresenterはModel更新メソッドを読んで情報を更新した後、Viewの更新メソッド呼び出し更新する役割を持ちます）。Apple Watchからのイベントを受けた後にViewを更新することができる必要があります。</p>
<p>セッションを利用するには、WCSessionDelegateを継承する必要があります。</p>
<p>iPhoneの送受信するクラスと、Apple Watchの送受信クラスの両方で継承します。</p>
<pre><code class="language-swift">class CounterViewControllerPresenter : NSObject, WCSessionDelegate, CounterViewControllerPresenterProtocol {
    private let counterView : CounterViewControllerProtocol
    private let speechModel : SpeechModelProtocol
    private let counterModel : CounterModelProtocol
    let wcSession = WCSession.default
</code></pre>
<h2>送信部分</h2>
<p>sendMessageでデータを送信します。以下はiPhoneがApple Watchに対して、表示に必要な3項目を送信している箇所です。（もう少し通信内容はしっかり設計したほうがよかった気がしますが・・）</p>
<pre><code class="language-swift">func sendMessage(counterObj: CounterObj) {
        if WCSession.isSupported() {
            initWCSession()
            let message = [ "kind" : 3, "counterL" : counterObj.counterL, "counterR" : counterObj.counterR, "isServe" : counterObj.isServe] as [String : Any]
            wcSession.sendMessage(message, replyHandler: { replyDict in
            }, errorHandler: { error in
                print(error)
            })
        }
    }
</code></pre>
<h2>受信部分</h2>
<p>sessionにデータが渡ってきたら、以下の関数が呼ばれます。通信のプロトコルを自身で定義して実装していきます。こちらはApple Watch側の受信部分です。先ほどの送信部分のコードで送った値をこちらで受け取り、reloadDataで自身のViewを更新しています。</p>
<pre><code class="language-swift">func session(_ session: WCSession, didReceiveMessage message: [String: Any], replyHandler: @escaping ([String: Any]) -> Void) {
        // iPhoneからのデータを受け取る
        guard let kind = message["kind"] as? Int else {
            return
        }

        switch kind {
        case 3:
            let counterL : Int? = message["counterL"] as? Int
            let counterR : Int? = message["counterR"] as? Int
            let isLeft : Bool? = message["isServe"] as? Bool
            reloadData(counterL: counterL!, counterR: counterR!, isServe: isLeft!)
        default:
            print("default")
        }
    }
</code></pre>
<p>また、以下はiPhone側の受信部分です。Apple Watchから加算イベントです（dataの中のbool値が左右どちらの加算かを意味しています）。incrementCounterL/RはiPhone側の加算ボタンを押した場合も呼ばれる共通処理です。同じイベントを呼ぶので共通化されていたほうがメンテナンスしやすいですね。fromWatchという引数は加算後のiPhone側の音声再生や勝利ダイアログ表示などをしないように制御するためにフラグです。</p>
<pre><code class="language-swift">case 2:
            let isLeft : Bool? = message["data"] as? Bool
            if (isLeft!) {
                incrementCounterL(fromWatch: true)
            } else {
                incrementCounterR(fromWatch: true)
            }
            result["success"] = true
            return
</code></pre>
<h2>もう少し先へ</h2>
<p>横画面にも対応し、一通りやりたいことはやってしまったので、このアプリの開発は一旦収束となると思います。ただちょっと加算処理をもっと別の先進的なやり方でできないかを検討中で、準備が出来次第実装してみたいと思っています。半分ネタですが、自動加算方面の話です。進捗があったらこちらに報告していきたいと思います。。。</p>
<p><a href="https://apps.apple.com/jp/app/%E5%8D%93%E7%90%83%E3%82%AB%E3%82%A6%E3%83%B3%E3%82%BF%E3%83%BC/id1447881847?ign-mpt=uo%3D4">卓球カウンター（AppStore）</a></p>
<p><strong>（旧ブログから移行）</strong></p>

<h2>アプリ作ってみました</h2>
<p>とりあえずブログの一発目としてこのネタ。</p>
<p>久しぶりにiOSアプリを作成してApp Storeにリリースしましたので宣伝します。</p>
<p>レアな卓球の得点カウンターアプリです。卓球をやるというレアな人たち向けです。</p>
<p><a href="https://apps.apple.com/us/app/%E5%8D%93%E7%90%83%E3%82%AB%E3%82%A6%E3%83%B3%E3%82%BF%E3%83%BC/id1447881847?ign-mpt=uo%3D4">App Store - 卓球カウンター</a></p>
<p><img src="https://moruorange-blog.s3.ap-northeast-1.amazonaws.com/undefined/20190107-takkyu-counter/images/20190107195339_2415e2e6b5.png" alt="20190107195339.png"></p>
<p><strong>卓球カウンタースクショ</strong></p>
<p>冬の運動手段として最近久しぶりに卓球を始めました。体育館に頻繁に通うという何気に人生初の経験をしている最中です。若い人ばかりで元気だし、皆上手。</p>
<p>卓球で試合形式でやるとき、点数とかサーブ権とか忘れるんですよね・・。歳でしょうか？w すでにたくさんアプリは出回っていますので、その一つを利用させてもらっていたのですが、細かい部分とか自分たち好みにできると良いなと思ったというのと、ただの動機としてアプリの自作を行いました。独自機能として、音声によるサーブ権や得点などの読み上げ機能です。まだ使い物になるかわからないのですが、この音声がプレイヤーに聞こえれば、画面見なくてもわかっていいかな〜と思ってます。（どのくらい聞こえるだろうか・・）</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/NllpqEbooO4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<h2>アプリの目標</h2>
<p>今後も勉強と自分たちのためにアプリをアップデートしていきたいと思っていますが、大きな課題としてはプレイヤー2名だけの時にはアプリは使いにくいというものがあります。これをどのような方法でクリアしていくか、アイディア出しの段階です。</p>
<p>以下羅列。</p>
<ul>
<li>横画面対応</li>
<li>Apple Watch対応（ボタン二つで加算とundo、リセットのみなど）</li>
<li>ルールカスタマイズ機能</li>
<li>試合履歴の表示、Share機能</li>
</ul>
<p>あまりいないと思いますが、卓球プレイヤーの方々がいましたら要望などレビューをいただければと思います。</p>
<h2>そういえば...</h2>
<p>お前カウンターばっか作ってんじゃないか、ってなると思いますが、もう一つ以前作ったアプリのリンクも貼っておきますw</p>
<p><a href="https://apps.apple.com/nz/app/taisen%E3%82%AB%E3%82%A6%E3%83%B3%E3%82%BF%E3%83%BC/id1023105923?ign-mpt=uo%3D4">TAISENカウンター</a></p>
<h2>ブログの方針</h2>
<p>モチベーションを上げるためにも、2019年になったということで、ブログを始めてみようと思い立ちましたので、頑張ってみます。主に自分へ向けての記録用ですが、もしよかったら暇な時に読んでみてください。</p>
<p>アプリなどTech系、写真、ガジェットとか時事ネタ、いろいろジャンルをあまり絞らずにゆるくやっていきますです。</p>
<p><strong>（旧ブログより移行）</strong></p>

MORU'S ORANGE BLOG