iOSDC Japan 2021 に登壇していた


※ 参加したのは昨年度(2021年9月)だったのですが、書き忘れていたので一年越しに備忘録。

iOSDC Japan とは

iosdc.jp

iOSDC Japan 2021はiOS関連技術をコアのテーマとしたソフトウェア技術者のためのオンラインカンファレンスです。

iOSアプリ開発者が一堂に会する恒例の "お祭り" 的テックイベント(※個人の解釈)です。

初参加 & トーク初応募 & 初採択

iOSDC は発表内容のプロポーザルを応募し、運営によるレビューを経た後採択可否が決定します。
技術者個人が発表したいテーマを考え、発表詳細(CfP: Call for Proposals)を提出するのですが、このCfPリストが個性豊かで眺めているだけでも面白いのです。

以下、maricaが採択されたトーク
fortee.jp

xR面白いな〜と思っていた時期だったので、LiDARネタで書きました。
調子に乗って40分枠で応募したら採択されてしまって、なんとか帳尻を合わせた思い出。
良い技術者のみなさんは真似しないように。

社内メンバーの魅力的なCfP & 発表内容はこちら


iOSDC 2021 は情勢を鑑みて、ニコ生配信 + Discord でのオンライン開催でした。
2022はオフラインとのハイブリッド開催の模様。
自分は初参加 & トーク初応募 & 初採択という初めてだらけ状態で大変でしたが、良い経験になったと思います。

良かったところメモ

  • 共通の興味領域を持ったiOSアプリエンジニアと直接話せる
  • Discordで登壇後に質問できる時間があった
  • オフライン開催ではなかったのがとても残念
  • CfPを眺めるだけでも面白い
  • ネタを考えたり発表資料作成を通じて技術力が磨かれる(気がする)
  • ノベルティがすごい
  • 公式ノベルティのTシャツ、パーカー、タンブラーは今も自宅で活躍中
  • スポンサー各社力を入れているみたいで、ワイヤレス充電器とかグラスとか入っていました
  • 採択されて登壇者になると参加チケットが無料なのでお得感が増す


自分は今年(2022)のiOSDCは参加しないのですが、きっと楽しいイベントになることでしょう!

ソフトウェアエンジニア、3Dプリンターに入門する

3Dプリンターに入門したので日記 & 製作過程ログ。


作ったもの↓


酒ピアスです。
これでさりげなく日本酒好きをアピールできますね!
製作過程は以下の通りです。


目次

1. 3Dプリンターの使い方を知る


Q. 3DプリンターもCADも何もわかりません。どうやって入門すれば良いですか?
A. とりあえず動かす。
(※諸説あります)

契約していたコワーキングスペースにたまたま3Dプリンターがあったため、拝借してテスト出力してみました。
(FABスペース等でレンタルするのが一般的かと思います)

利用機材: cheero 3d pro
cheero3d.com

造形方式: FDM
FDM方式とは - 3DプリンターならアルテックFDM方式とは - 3Dプリンターならアルテックwww.3d-printer.jp

フィラメントを溶かして積み重ねていくような造形方式らしいです。


フリーのstlファイルをUltimaker Curaでスライスしたものを出力してみます。
1.5時間程度でこんな感じの仕上がりになりました。


表面のざらつきや形状の変形が気になりますが、待っているだけで「手で触れる」「目に見える」「物理的な(?)」モノが出来上がるのはすごいですね。
ものづくりへの心理的なハードルが下がり、期待が高まります!

2. モデリングしてみる

さて、使い方は完全に理解した(※)はずなので、次はモデリングしてみます。

3DCADは、ググって一番上に出てきた AutoDesk Fusion 360 を使いました。
適当にモデリングして、再度出力してみます。

自分のアイデアが爆速で具現化している......!!!
これはテンション上がります。

3. 表面処理

具現化はすぐできるけれど、表面がざらざらしているので、このままアクセサリーにするには少し不恰好です。
ここで、「表面をきれいにする」処理が必要になります。
個人的にこのプロセスが一番難関で、いろいろ試行錯誤しました。


1. ダイヤモンドヤスリ

まず、ダイソーのダイヤモンドやすりで表面研磨を試してみたのですが、自分のヤスリテクニックが未熟 & FDM方式の造形物をきれいに仕上げるのは至難のわざだったため、挫折しました......。

2. アセトンベイパー

次にアセトンベイパー処理を試します。

さすがにネイルリムーバーでは濃度が足りなかったようで、表面がベタッとする程度でツルピカ状態まではいかず。
(ちゃんとしたアセトンならうまくいくかもしれないので、再度試したいですね)

3. 光造形方式 + 紙やすり

結局、造形方式を光造形方式に変更しました。
www.3d-printer.jp

レーザー光でレジンを固めて造形するらしいです。

利用機材: ELEGOO Mars 2 Pro
【Clearance Sales】ELEGOO Mars 2 Pro Mono LCD MSLA Resin 3D Printerwww.elegoo.com


ブラックレジンで出力し、400番の紙やすりで表面研磨したものがこちら。

ブラックというかブルーっぽいですが、綺麗に出てますねー。
FDM方式は側面もギザギザになるのですが、こちらは滑らかで、この部分のヤスリがけは不要そうです。

ただやはり底面バリ取り・天面研磨のヤスリがけが難しく、力加減をミスって斜めに削れてしましました。(これはこれでグラデーションになって綺麗なので、今後デザインに取り入れたいですね)

4. 完成

最終的にクリアレジンで出力し、ヤスリを頑張り、ダイソーの金具を取り付けて、上掲の酒ピアスver.1.0を完成としました。

ちなみにヤスリですが、シンクなどで流水に晒しながら平面上でやすると良い、と有識者からアドバイスをいただいたため、試してみたら思い通りの綺麗な表面になりました!
スモークがかかっているような雰囲気のある表面に出来て気に入っています。
さらに目の細かいヤスリで研磨すればツルピカにできるらしいので、これも試してみたいですね。

5. 最後に

自分は電子工作も未経験、トンカチもまともに使ったこともない人間なので、「手で触れる」「目に見える」 「物理的な(?)」ものづくりはほぼ人生初でした。
ソフトウェアとはまた違ったエンジニアリング技術とものづくりが楽しめて良いですね。

次はロボットアームみたいな可動部のあるものを作ろうかなあと考えています。


*** 補足1 - 作った理由

Twitterで見かけたこちらのアイテムに一目惚れし、自分も作れるんじゃね?という甘い考えを抱いたから
(ものづくりをなめてました。今回めちゃくちゃ学びになった。)


*** 補足2 - 日常生活で使える3Dプリンタースキル

HoloLens2で音楽ゲームを作った

諸事情で3週間ほど暇になったのでこちらのハッカソンに参加してHoloManiaという音ゲーを作ってみました。
osaka-driven-dev.connpass.com

成果物はこちら


当日の様子はTwitterで "#HoloHack" ハッシュタグで検索すると感じ取っていただけるかと!

空間に花を咲かせた数を競うス○ラトゥーンみたいなゲーム、ソードや銃を出して遊べるUI機能など、面白い作品ぞろいで、HoloLensってこんな遊び方ができるんだ......!とワクワクしながら発表をきいておりました。

実装について

Unity + MRTKプロジェクトのHelloWorldは以下の記事を参考にしました。
qiita.com


Unityのプロジェクト容量が大きすぎてgithubにアップロードできなかったので、かいつまんで説明すると、

  • 一定の周期でGameObjectを生成する
  • 生成したGameObjectをプレイヤーの方に移動させる
  • MRTKでハンドトラッキングしてGameObjectとの衝突を判定する
  • 得点を更新する
  • 一定以上の得点を獲得すればゲームクリア

としました。
リズムに合わせてノーツを生成する、判定ポイントの作成などは実装期間の短さなどから省略した、とてもシンプルなゲームです。

ハッカソン初参加だった

実はハッカソン未経験でした。周囲に迷惑をかけたくないなと思い「ボッチソン」での参加表明をしました。(後から一般的にはハッカソンはチーム戦で得意なところだけ実装してもいいんだよと教えてもらいました......)

初日:アイデア出し
2~8日目:ひたすら実装
9日目:実機にデプロイして動画撮影

のようなスケジュールで実装しました。圧倒的に人手が足りないのがボッチソンのつらいところですね。

HoloLens2は一度だけ触らせてもらったことがある程度で、具体的に何ができるのかほぼ知らない状態、Unity, 3Dプログラミングの経験なし、ということでかなり苦戦しましたが、スタッフの方のヘルプもあり、なんとか9日間の開催期間内で動くものを作ることができました。

今後について

楽曲の著作権などあるのでこちらにパッケージを載せられないのが残念ですが、大阪某所のコミュニティ内でにてひっそりと遊んでいただこうと思っています。

今後もコンテンツをアップデートしていきたいですね。
例えば

  • ランキング機能
  • リズムとノーツのタイミングを合わせる機能

などあるともっと楽しそうです。

賞をいただきました

出場チームが7チームに対して賞が7つあったのですが!うれしいものですね!
ちなみに「ホログラム賞」という賞をいただきました。
反射神経を競うより、シニア向けのゲームにすると面白そう、というコメントも。
自分の作った作品を企業の方にその場で品評していただける機会ってそうそうないと思いますので、もうそれだけでめちゃくちゃ嬉しいですし、頂いたコメントを参考にしてアップデートを重ねていきたいと思います。

スタッフのみなさま、参加者のみなさま、お疲れさまでした。

次のハッカソンはチーム戦で参加したいな......。

MediaPipeとOpenCVで指先から炎エフェクトを出してみる

SNOWのハロウィンスタンプでこんなものを見つけました。

f:id:tama_Ud:20201028210554j:plain:h300

指先からロウソクの炎がゆらゆら......面白いですね!

ということで自分も作ってみました。



いかにも合成!って感じですけど、炎の魔道士っぽいエフェクトができました!

実装

0. 環境

macOS Catalina
OpenCV 4.x.x

1. ファイルを作る

今回はdesktop版のmulti_hand_trackingで作りました。
mediapipe/example/desktop/multi_hand_tracking 直下に新しく.ccファイルを作成します。

また、炎画像の素材を用意します。
自分はUnityの無料アセットから炎エフェクトのtiffを見つけて、
透過pngに切り出して保存し、連番ファイル名を付けました。


f:id:tama_Ud:20201028221654g:plain:h300

2. MediaPipeで指先認識 + OpenCVで炎画像を貼り付ける

全実装は以下。



MediaPipe + OpenCVで指先から炎エフェクトを出す


内容をかいつまんで説明すると、
getCurrentFireImage() で炎画像 (今回は50枚用意しました) を一枚ずつ取り出して、lightFire() 内で指先を判定して1フレームごとに貼り付けています。

実行して上記のデモのように動けば成功です。
おもちゃレベルですが、簡単に実装できますし、遊んでみると結構楽しいものですね。

【MediaPipe + OpenCV】ジェスチャ入力方式のソフトウェアキーボードを作る (2) -ジェスチャ基本入力編-

前回の記事はこちら

ログを出力するところまで出来ている状態です。

今回は「ジェスチャ基本入力編」ということで、
ここからキーボード作成/ジェスチャ入力まで一気に実装していきます。

現状の暫定版demo


実装

全実装は以下。
(制作途中のものです)

各指に対するキーマップは以下の通りです。

・左手
 小指... Q,A,Z
 薬指... W,S,X
 中指... E,D,C
 人差し指... R,F,V,T,G,B


・右手
 人差し指... Y,H,N,U,J,M
 中指.. .I,K
 薬指... O,L
 小指... P

各指と親指が触れるジェスチャをした場合に対応キーマップが選択され、
さらに複数回親指と触れさせることで特定のキーを選択します。
(demoをみていただくのが早いと思います)

左手人差し指、右手人差し指に関しては、今後何かしらのジェスチャで左右のキーを選択できるようにしていきたいと思います。

簡単にコードの解説をすると、
createKeyboardでキーボードを作成/表示し、
judgePressKeyで各指が親指に触れたかどうかを判定し、
lightOnKeysで指のキーマップに対抗したキーを選択しています。
コードとしては「とりあえず動く」レベルのもので、まだまだ改良の余地ありですね。

最後に、以下のコマンドで実行します。

bazel build -c opt --define MEDIAPIPE_DISABLE_GPU=1 \
mediapipe/examples/desktop/multi_hand_tracking:multi_hand_tracking_cpu 
export GLOG_logtostderr=1 
bazel-bin/mediapipe/examples/desktop/multi_hand_tracking/multi_hand_tracking_cpu

demoのように動けば成功です。

次回

今後は、左手人差し指、右手人差し指に関して、ジェスチャで左右のキーを選択できるよう改良していきます。
また、精度の改善も行っていく予定です。

【MediaPipe + OpenCV】ジェスチャ入力方式のソフトウェアキーボードを作る (1) -ログ出力編-

何やら巷では自作キーボードなるものが流行っている (?) ようですね。

キー配置や打鍵感など、自分好みにカスタマイズできる自由度の高さが醍醐味の模様。

ここで私も作ってみたいと思い立つものの、ちょうどREALFORCEを購入した直後だったため、「実物」を作ることは断念。代わりにジェスチャ入力で動くソフトウェアキーボードを作ることにしました。


今回は第一弾

ログ出力編」です。

***

1. 現状の暫定版demo


 
精度はまだまだ悪いですが、ジェスチャによるキー選択を実現しています。
(精度改良・未対応キーマップの追加等が出来たらまた記事にする予定です。)
今回はログ出力のみの解説ですので、キーボードの処理などは次回お楽しみに。

 

2. さっそく作る

0. 開発環境

macOS Catalina

VSCode

1. MediaPipeをクローン

こちらからMediaPipeをクローンし、公式サイトの手順通りセットアップを済ませます。

以下のコマンドでdesktop版Hands (multi_hand_tracking)をビルド/実行します。

bazel build -c opt --define MEDIAPIPE_DISABLE_GPU=1 \
mediapipe/examples/desktop/multi_hand_tracking:multi_hand_tracking_cpu 
export GLOG_logtostderr=1 
bazel-bin/mediapipe/examples/desktop/multi_hand_tracking/multi_hand_tracking_cpu \ 
 -calculator_graph_config_file=mediapipe/graphs/hand_tracking/multi_hand_tracking_desktop_live.pbtx

カメラが起動し、両手を認識していればOKです。

2. ログを出す

mediapipe/examples/desktop/multi_hand_tracking以下のBULDファイルを書き換えます。

この部分を、

 cc_binary(
    name = "multi_hand_tracking_cpu",
    deps = [
        "//mediapipe/examples/desktop:demo_run_graph_main",
        "//mediapipe/graphs/hand_tracking:multi_hand_desktop_tflite_calculators",
    ],
)

以下のように変えます。

 cc_binary(
    name = "multi_hand_tracking_cpu",
    srcs = ["multi_hand_tracking_run_graph_cpu_main.cc"],
    deps = [
        "//mediapipe/framework:calculator_framework",
        "//mediapipe/framework/formats:image_frame",
        "//mediapipe/framework/formats:image_frame_opencv",
        "//mediapipe/framework/port:commandlineflags",
        "//mediapipe/framework/port:file_helpers",
        "//mediapipe/framework/port:opencv_highgui",
        "//mediapipe/framework/port:opencv_imgproc",
        "//mediapipe/framework/port:opencv_video",
        "//mediapipe/framework/port:parse_text_proto",
        "//mediapipe/framework/port:status",
        "//mediapipe/graphs/hand_tracking:multi_hand_desktop_tflite_calculators",
    ],
)

さらに、同じディレクトリに新しくmulti_hand_tracking_run_graph_cpu_main.ccを作り、
一つ上の階層 mediapipe/examples/desktop/ の demo_run_graph_main.ccの内容を全てコピーして貼り付けます。

以下のように書いてあるところに、

// Get the packet containing multi_hand_landmarks.
    ::mediapipe::Packet multi_hand_landmarks_packet;
    if (!multi_hand_landmarks_poller.Next(&multi_hand_landmarks_packet)) break;
    const auto& multi_hand_landmarks =
        multi_hand_landmarks_packet.Get<
            std::vector<::mediapipe::NormalizedLandmarkList>>();

以下を追記します。

  LOG(INFO) << "#Multi Hand landmarks: " << multi_hand_landmarks.size();
     int hand_id = 0;
     for (const auto& single_hand_landmarks: multi_hand_landmarks) {
       ++hand_id;
       LOG(INFO) << "Hand [" << hand_id << "]:";
       for (int i = 0; i < single_hand_landmarks.landmark_size(); ++i) {
         const auto& landmark = single_hand_landmarks.landmark(i);
         LOG(INFO) << "\tLandmark [" << i << "]: ("
                   << landmark.x() << ", "
                   << landmark.y() << ", "
                   << landmark.z() << ")";
       }
     }

最後に、以下のコマンドで実行します。

bazel build -c opt --define MEDIAPIPE_DISABLE_GPU=1 \
mediapipe/examples/desktop/multi_hand_tracking:multi_hand_tracking_cpu 
export GLOG_logtostderr=1 
bazel-bin/mediapipe/examples/desktop/multi_hand_tracking/multi_hand_tracking_cpu 

ターミナルにログが出力されていれば成功です。

3. 次回

今回はログを出すところまでなので、記事としてはちょっとしょぼいんですが...。
次回からは実際にキーボード作りや、指のタッチ判定処理などを作っていきますので、ご期待ください。