iOSアプリを作るには、macで、デバイスを有線接続するのがわかりやすいこと

iOSアプリを作る、のは楽しそうだし、やってみたいことでもある。 しかし、iPhone持ってるから、ではなく、「mac持ってるから」というのが 自然だろうと思っていた。

しかし、まー無謀というか考えが浅いのか、 見通しが甘いというか見通してないのか、 「iPhone持ってるからiOSアプリ作る」みたいな 展開があって、もーよう言わんわ。

理論上は、クロス開発ということで、 電子工作するときのマイコンプログラミングと 同じようなもん、ではある。

パソコンでコードを書き、実行ファイルを生成して、 マイコンのROMに書き込んで実行。

しかし、マイコンiPhoneでは、規模が何桁も違うと思うが 想像が及ばないんだろうなぁ。

可能だとしても、実機を接続してビルドした方が、 不安材料が少ないと思うんだが。

まぁ実際の問題は、、USBハブかLightning-TypeCケーブルが 無かったため実機を接続できなかっただけ、なんだけれども。

物事はシンプルに。 そして「スムーズは速い」を 実践することだろうね。

とりあえず。

flutterで、ALOHA!(一般的には、"Hello, world!")

iOSアプリにせよ、Androidにせよ、 とりあえず環境を構築して、最初のプログラムを動作させてみる。

しかし、開発記事を色々見ると、細かいことがあれこれ違って 結構面倒。

最初に困るのは、「プロジェクトを作りましょう」みたいなところ。 "Visual Studio Code" を使うのか、"Android Studio" を使うのか。

記事によって、それぞれ「使え」と書いてある。 いいけど、多分どちらでもできるんだろうけど、 言ってしまえば、テキストエディタでもできるんだろうけど、 わかりにくい。

誰かがレビューして、わかりやすく使いやすい記事に、 なったらいいのに。

ということで、わかりやすいサイトを選んで、 シンプルなコードを選んで、 実行。

docs.flutter.dev

伝統的な「Hello, world!」をやってみる。

classの形でアプリを作っていく。 JSON形式みたいに、表示する内容を書いていく。

なるほど。 まぁこうなるよね、という形の一つで、 納得感はある。

納得して、しっかり受け止めたところで、 少しずつ複雑なコードに進む。

そうすれば分かるし、 そうしないと全然理解できん。

しっかり分かるところを足場として、 上に構築していく。

最も簡単な、シンプルな基本から 順番に積み上げていくことを標準として 取り組む習慣がないと、まぁ新しいことは 学べない。

とりあえず。

flutterの開発環境を整える

iOS/androidアプリを開発するために、flutterを利用。 開発環境を整える。自宅のmac(macbookpro; intel

当然?ひょいとはできなかったので、メモ。

  1. flutter sdkをインストールする

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

  1. 次に、Android Studioをインストールする

  2. flutter doctorを実行して環境を確認する  ここで、issue、3個か4個発生。上から片付ける。

  3. cmdline-tools component is missingエラー 無いものは入れるしかない。

https://zenn.dev/imasaka0909/articles/00ebfaf74f9cea

  1. Android license status unknown flutter doctor --android-licensesで複数(7個くらい)のライセンスに「同意」操作

  2. xcodeをインストール

  3. xcodeコマンドラインツールをインストール xcode-select --install

  4. しかしまだエラーが出るので、対応 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer sudo xcodebuild -runFirstLaunch

  5. cocoapodsをインストール brew install cocoapods  (もっと面倒な方法もどこかに書いてあったが、うまくいかず。結局これ←)

ここまで終えると、flutter doctor してもエラーはなく、さらりと "No issues found!" になる。

うまくいったところだけ書くと簡単だが、実際はweb記事一つでは片付かず。 なんでそうなるかなぁ。誰かが全部ちゃんと書けばいいだけのような気がするが。

なんにせよ、flutterを始める準備ができたっぽい。 実際のコードはまだ書いていないので、書いた段階でエラーに直面、もありうるが。

まぁ多分大丈夫だろう、と言うことで。 とりあえず。

vscodeをインストールする

自宅macに flutter 開発環境を作らねば。 しかしその前に、避けている vscode ( visual studio code )をインストールしよう。

IDEは好まないが、知らないわけにもいかないので、勢いで入れる。 (冷静に考えると、入れたくない気持ちに負けるので)

学生たち、かっこよくVSCodeでコードを書くのは良いが、 ライブラリを使ったり、フレームワークを使ったりすると 途端にコケる。

どんな仕組みで動いているか知らずに、IDEで楽ちんな思いを していると、まぁそうなる。

だから2年しかない学校では、テキストエディタCLIでやるのが良いと 常々言うておるのだが、安易に使うケースが多くて面倒。

憶えやすいURLのサイトからダウンロードして、インストール。

code.visualstudio.com

のんびりVSCodeであれこれ書いてから次にいきたいが、 時間が無いのでそうもいかない。

しかし今日はくたびれてそろそろ限界のため、 とりあえず起動確認まで。

別のmacでも、Stream Deck & OBS

自宅のMacBook Proで操作できるのはいいとして、職場のマシンでもできないと困る。 というわけで、インストール&テスト。

また、マルチデスクトップでどの程度キャプチャできるかも要確認。

OBSでシーンを2つ用意して、Stream Deckで切り替えしてみる。

シーンに名前をつけて、 00_FaceTime 01_NDI としてみる。

要するに、 シーン00は、内蔵カメラをキャプチャ。 シーン01は、NDIで他のパソコンのデスクトップ映像をキャプチャ。

シーンを作り、Stream Deckアプリを起動して、ボタンを作成。 、、と、ここでトラブル。

Stream Deckのメニューから、OBSの「シーン」をボタンにセットすると、 「OBSを待っています」みたいな表示になったまま、進展しない。

くるくる回ってはいるが、待ってもシーンの設定ができない。

Stream Deckでシーンを操作するには、当然同じパソコンで動作している OBSと通信して、作成済みのシーンを読み取る。

だからOBSを待って通信しようとするのは理解できるが、、なぜ通信できない。

待機中にOBSを起動してもダメ。 OBSを起動した後でシーンボタンを追加してもダメ。

何でだろう、、と思っていたら、ふとOSの更新がまだなのを思い出した。 先々週のイベントが終わってからにしよう、と思っていたら忘れてしまい、 まだ更新してなかった(最新は Ventura だが、Monterey のままだった)。

そこで、関係あるかはともかく、OSを更新。 ダウンロードして、インストール。

すると今度は接続できた。 OSのせいか、マシンを再起動したためかは不明。

シーン00を呼び出すボタンと、 シーン01を呼び出すボタンを作成。

OBSのVirtual Camを起動して、Google Meetに接続してみる。 Windows PCでも会議に入ってモニタしながら、シーンを切り替える。

OBSがアクティブになっていない状況でも、切り替えできると確認。 やれやれ。

他にも確認したいことはあり、 オーディオをフェードIN /OUTできるか、 画像などの素材のON /OFFはどうか、 試しておきたい。

次回の学校行事は12月16日(金)。 それまでにシナリオを書いて、 素材を用意して、 シーンにまとめてテストしておこう。

今日のところは、この辺で。 とりあえず。

Stream Deckで、OBSもコントロールする

Stream Deckというくらいで、もちろんOBS Studio(配信アプリ)もコントロールできる。 元々アプリにプロファイルが入っているので、使いたい操作をボタンに登録すればOK。

Stream Deckにアプリを登録
何でも入って便利すぎ

シーンを登録すればシーン切り替えができるし、 マイクとか画像とかソースを登録すればON /OFFできる。

他にも操作いろいろワンタッチで可能になって、 まー便利なことこの上ない。

特に、ATEM Miniのコントロールと比べると、 間にCompanionを挟まなくていいので、準備も楽々。

というわけで、手に馴染ませるためにも、毎日使うことにしよう。 とりあえず。

Stream Deck with Companionで、ATEM Mini Pro をコントロールする

「左手デバイス」には色々あるらしく、画像の編集や配信オペレーションで 活躍しているとのこと。

そんなデバイスのひとつ、Stream Deckを活用すべく練習を開始。

ビデオスイッチャ(ATEM Mini Pro)を操作するにあたり、 複数のキー操作をまとめてワンタッチでできれば助かる。

ミスが減るのもあるが、映像がスッキリする。

最もよくある問題は、2カメに切り替えてPinPにする操作。

入力を「2」にして、PinPの位置を選択(4すみのどれか)してからON。 これでボタンを3回操作することになる。準備よく位置を事前に決めておいた としても、2回の操作は必要。

操作が面倒なだけでなく、映像が切り替わった「後で」PinPになるので、

見ていて明らかに2つの操作に見える。

これをボタン1回操作で実現すべく、Stream DeckアプリとCompanionを インストールしてテストしてみた。

Stream Deckアプリからは様々なプロファイルを選択してインストールできる。 今回は Companion をインストール。

続いて、Companionはwebインタフェイスなので、ブラウザで操作。 あらかじめ ATEM を LAN に接続してIPを取得(DHCP)させておき、 CompanionをIP指定で接続。

そこまで来ると、CompanionのUIでボタンを登録すると、Stream Deckアプリでも 「Companionボタンをドラッグ」するだけで、登録した位置に登録した内容のボタンが 表示される。

まずはシンプルに「CAM1」や「CAM2」ボタンを作る。 ATEMには、「CAM1」にビデオカメラ、「CAM2」にiPadを接続しておいた。

当然、Stream Deckのボタンを押すと、ATEMが操作されて、映像が切り替わる。 「CAM1」ボタンでビデオカメラ映像、「CAM2」ボタンでiPadの映像が表示される。

ここまでだけでも、web記事で見た通りにはいかず、ちょっと悩みながら準備。 大した手間では無いので、大丈夫だけれども。

これで準備が整ったので、「CAM2」ボタンの下に、「CAM2に切り替えて、CAM1をPinPで入れる」 ボタンを作る。

Companionの画面で「KEY1」を選択して新しいボタンに登録すると、PinPができる。 ただし、PinPの位置を決めるボタンは無いので、ATEMであらかじめボタンを押して 選択しておく(これはちょっと残念)。

少なくとも「KEY1」ボタンでPinPはできるが、事前に「CAM2」にしてからでないと 意図した表示にならない。(PinPをONにするだけだから、当然だ)

そこで次に、「KEY1」ボタンをクリックして操作を追加。 入力を「CAM2」に切り替える操作を加える。

すると、「KEY1」ボタンだけの操作で、「入力をCAM2にする」のと 「PinPをONにする」のが同時にできる。

これで、2アクションが1アクションに短縮! これはひと手間かける価値あり!!

あとは、CAM1の映像をキーフレームアニメーションで 縮小させてPinPにするとか、さらに表現を加えていけばよい。

しかし週末、Stream DeckとATEMを両方持ち帰るのは大変なので、 Stream Deckだけにして、土日は「OBSのコントロール」を試すことにする。

とりあえず、実験はOK。