YouTuberはじめてみました

## YouTuberはじめてみました

先日、岸川さん、松舘さん達iOSデベロッパーとの飲み会で、どういう経緯でそうなったか思い出せませんが、「吉川さんなんか動画やってよ」みたいな話が出てきて、そういえば以前から YouTuberやるなら是非やってみたいと思った企画があったのを思い出しました。

それは、アプリをゼロから開発制作する過程を動画化してみる事です。なんか浦沢直樹の「漫勉」みたいですね。自分は浦沢直樹ほどの大御所ではありませんが、iOS開発者界隈では、まぁまぁのプレゼンスはあるかなと自負しております。

で、ここ何日かほぼ毎日XcodeとSwiftでのアプリ開発過程を深夜、ぶつぶつ独り言をつぶやきながら、アプリの開発を録画してきました。動画時間が長いので、実時間以上の時間を掛けて編集している余裕はないのと、セミライブ感を出すために、ほぼそのままYouTubeに公開していますが、ストックができるまでステルスでアップロードしていました。

ある程度ストックが貯まってきた事から、今回Qiitaの記事として発表する事にしました。動画のプレイリストは以下の通りです。

https://www.youtube.com/playlist?list=PLaJh_-Jb_LvKueZyF-IbScwUezl517RGn

## どんなアプリを公開開発するの？

今回公開開発するアプリは漫画制作アプリです。実は、iPad上での日本仕様の絵コンテ制作アプリ「e-Conte board」を開発以前からチャレンジしてみたいと思っていましたが、ずっと思っているだけでした。

https://cgworld.jp/article/202305-actf01.html

で、「e-Conte board」リリース後に漫画制作アプリのプロトタイプみたいなのをこっそり開発していたのは事実ですが、とある機能が永遠に完成しないので、昨年一旦開発を中断する事にしました。

しかし、やっぱり諦められないという思いがあり、完成しなくてもいいから再度チャレンジしてみようと思いそれなら、開発過程を公開してみてはと思い、動画収録を始めました。そんな訳でゼロからと言いながら、デスしてセーブポイントに戻った感じで完全にゼロからではない事はご了承ください。

初級、中級場合によっては上級エンジニアでも参考になる部分があると思っています。なにしろ細かい仕様を決めて開発している訳ではなく、行き当たりばったりなので、この部分を見ると実際の案件で真似をしてはいけないと思います。ただ、こういった開発方法の利点は、実際の案件でもよくある無茶な仕様変更を自分で作り出す点にあります。

よって、適当に実装している部分でも「将来こんな機能が入ってくるかも」と考えながら実装すると、仕様変更に強い設計、無茶な仕様変更に対処する経験値稼ぎとなるかもしれません。繰り返しますが、実際の案件では難しいと思うので、プロトタイプ制作とか場面を選ぶと思います。

もう一つ、「e-Conte board」では、リアルの現場のアニメーターの方がPMをやってくれたので、方向性はその人に任せればよかったのですが、漫画の場合は、ほぼ知り合いの漫画家がいないので、開発者の独りよがりの仕上がりになりかねないので、公開開発する事で、使う側のフィードバックなども期待できればと企んでおります。

## やってみた感想

勉強会などの動画で自分の声を聞く機会がないわけではありませんが、やっぱ小っ恥ずかしいです。YouTuber養成系の動画を見ても、「最初の３０回程度は練習だと思え」みたいな感じで、これは慣れるしかないかなと思いつつ、永遠にこなれて来ないのではと不安にもなります。

そして思ったより大作業。ただ、録画して、いらないところカットして公開するだけと考えていたのですが、「やっぱ簡単でも台本作った方がいいな」とか「コード見て考えてるように見えるけど、この時頭真っ白だったな」とか「いらない部分カットって言っても２時間とかの動画からそれを探すのはやっぱ無理」とか「動画のExportそんなに時間かかるの？」とか「アップロードした動画ってリプレースできないの？」とかやってみると、不測の事態頻発で、YouTuberみんなこんな面倒くさい作業やってるんだーという尊敬の念すら覚えます。

## 準備したこと

### 画面録画ソフトの選定
QuickTime Playerは、やや力不足と感じて Screen Flowを買いました。

### 録音マイクの選定
iPhone内蔵マイク、WebCamなど手元のマイクを色々試しましたが、どれもイマイチでした。そこそこのオーバーイヤーヘッドセットのマイクのBluetoothだとイマイチ、有線だとマイクが使えない事が発覚。

色々調べて、最初は「BOYA M1 Pro II」の Pin マイクを購入。しかし、服などのかすれる音などが気になり、ダイナミックマイクやコンデンサマイクなどかなり時間けけてリサーチ指定たら奥さんに「時給換算で考えて、そんなに何日もリサーチしているなら多少高くても買った方が良くない？」と言われ「Shure MV7」をかいました。ただ、アームをケチって店のブランドのアームを買ったら、マイクが重すぎて下がってきちゃうので、別のアームを検討中です。あと、パピポぺポのポップノイズも気にあるので、ポップフィルターを買うかどうか検討中です。

* BOYA by-M1 Pro II Lavalier Microphone
* Shure MV7 USB Microphone

### 発声練習

機材の話ばかりしていましたが、そもそも発話者の問題もあります。そもそも、台本っぽい事を用意していても、録画中に突然余計な事を話し出して墓穴を掘ったり、マイクと口元の距離を管理していないとレベルの調整ができていなかったり、口先だけで話す話し方ではなく、横隔膜を共鳴させて声を出す発生練習、やナニヌネノマミムメモなど鼻に抜ける音の発生練習などなど、発話者に起因する問題もたくさんあります。

別に、YouTuberで生計を立てようなんて思ってもいませんが、自分やアプリなどを売り込むとか、コミュニティを作りたいとか、そもそも新しい事を体験してみよう的な動機で始めて見たので、あまり辛いようなら逃げてしまいそうですが、とりあえず、アプリがもう少し形になるまでは、辛くても頑張って続けてみたいと思います。

## これまでの動画

https://www.youtube.com/watch?v=8U2dcE7t-Jk

動画シリーズを公開する趣旨の説明や、Xcodeでゼロからプロジェクトを作るところから

https://www.youtube.com/watch?v=pvBPm5oCmhk

UIDocumentController から始まり、Documentの生成、ページ一覧画面の作成、ページ編集プレースホルダー画面の作成まで

https://youtu.be/2RbU3q4qE1s

ページ一覧画面からページの追加、削除、順序入れ替えなど基本機能を実装

https://youtu.be/yahzhmPV9PY

自家製2D Metal ライブラリ「Metallic」の簡素な説明、プロジェクトへの組み込み、漫画編集画面で意味がないけどMetalで動いている事が確認できる３角形の表示

https://youtu.be/sqyNFyEdTJc

Metallicに用意されているbuilt-inシェーダーの紹介。SceneとCanvasというレンダリングモデルの違いの説明。タッチで鉛筆風の線が描けるまで

https://youtu.be/Xm0s_mnmDUE

レイヤー機能の実装、レイヤーの編集機能の実装

https://youtu.be/ue4eDM5nd8Q

レイヤー機能の簡易仕上げ、レイヤーの保存機能の実装、結構苦労して実装しこれまで最長３時間半

https://youtu.be/ZKgkWHfVnTU

ペン・ブラシの色の指定、ブラシの大きさ、ブラシエッジのソフトハードネスの設定の実装

## Slack 用意しました

Manga Loftの開発またはアプリそのものに興味のある方はSlackを用意したので、りくえすとを送ってください。

https://join.slack.com/t/newworkspace-8f06808/shared_invite/zt-276h9y9ra-X21gof724pbd5Eq8AeIDRA


## 最後に

やっぱり小っ恥ずかしてみてほしくないと思いつつも、世間の風にさらされないと成長できないと思い、今回こんな動画をやってますという報告をしました。当分、新規動画の紹介とはここではやらないと思いますが、叱咤激励をいただけるとありがたいです。

動画は超ながいので、見る場合は飛ばし飛ばし見ることをおすすめします。言い間違いや考えているふりして実は頭の中は真っ白な状態もそのまま録画されているので、ご了承ください。

最後に、この記事や動画がiOS開発者に役に立ったとか、反面教師としてでも、何らかしら参考になったなら幸いです。では。

```console
% swift --version
swift-driver version: 1.87.1 Apple Swift version 5.9 (swiftlang-5.9.0.128.108 clang-1500.0.40.1)
Target: arm64-apple-macosx14.0

Xcode: Version 15.0.1 (15A507)
iOS: Version 17.0.1
```