はじめに こんにちは！アプリ開発グループ iOSチームのソンチャンです。 2023年にAppleがVision Proを発表したとき、visionOSには現実世界と自然に溶け込む半透明なグラスUIが搭載されていました。私は「綺麗だけど、VRヘッドセットの話だから今すぐは関係ないな」と思っていました。 ところがWWDC25で状況が変わりました。AppleがそのグラスUIを「Liquid Glass」という名前でiOS、iPadOS、macOS、watchOS全体に適用すると発表したのです。Vision Proから始まったデザイン言語が、すべてのAppleプラットフォームの標準になる瞬間

この記事は、 NTT docomo Business Advent Calendar 2025 の16日目の記事です。 社内サークルのメンバーでハッカソンに参加した結果、気が付いたら競馬の冠レースを開催していたという活動報告です。 はじめに AIロボット部の紹介 参加したハッカソンの概要 アイデアの背景とコンセプト 「でっかい」縛り 100均アイテム縛り 「スマホのみ」縛り 「お腹」に関連した機能 制約と創造性 結果はオーディエンス賞！そして風変わりな賞品を頂く 船橋競馬場にて「みかかロボット杯」開催！ おわりに はじめに こんにちは、AIロボット部のサークルメンバーの宮岸( @daiking1756 )です。 普段は5G&IoTサービス部で映像系サービスの企画やプリセールス的なお仕事をしています。 この記事では、AIロボット部のメンバー2名で参加した風変わりなハッカソンの模様と、風変わりな賞品をご紹介します。 AIロボット部の紹介 AIロボット部はものづくり系の社内サークルです。 普段はSlackで情報交換しながらメンバーが個人で作りたいものを作っています。 昨年のアドベントカレンダーの記事でもAIロボット部の活動を書いています！ engineers.ntt.com 参加したハッカソンの概要 2025年3月、私たちは「創発遊戯 2025」という社会人向けのハッカソンに参加しました。 同ハッカソンが2024年に開催されたときの様子を、私がSNS上で見ていて、ユニークなハッカソンだなーと思っていました。 そんな時に、2025年開催の情報を聞いてAIロボット部のメンバーに声を掛けたのが、参加のきっかけでした。 このハッカソンはチーム毎に異なる「縛り」が適用されるという特徴があります。 縛りは「テーマ」「技術・素材」「その他　環境・条件」のカテゴリに分かれており、各カテゴリに約10個の縛りが用意されています。 各チームで選べるのはカテゴリと縛りの個数（最大4つ）までで、どの縛りが選ばれるかはランダムです。 今回我々は各カテゴリから1つずつ縛りを選びました。 選ばれた縛りは下記です。 縛りカテゴリ 縛り内容 テーマ 「でっかい」 技術・素材 100円均一ショップで買った素材を3つ以上取り入れる その他　環境・条件 「スマホのみで」どこまでできるか、チャレンジする 他の参加チームでは「本業に関するなにか」や「シラフ禁止」などを引いており、どのチームも頭を悩ませながらも楽しそうに開発していた印象です。 うちのチームは「スマホのみ」縛りがかなり重いですが、やれるところまで挑んでみることにしました。 その他ハッカソンの詳細は下記に記載されています。 https://mashupawards.connpass.com/event/344340 mashupawards.connpass.com アイデアの背景とコンセプト 簡単にどんな作品を作ったのか紹介します。 我々は SMART HARAMAKI という腹巻き型のウェアラブルデバイスを開発しました。 「でっかい」縛り 「でっかい」という縛りに対し、普段小さいものを大きくするという逆転の発想から、スマートウォッチの巨大版を作ることにしました。アイデアが生まれました。 大きさ的に手首ではなくお腹に巻くようなものになりそうだったので、腹巻き型デバイスにしました。 100均アイテム縛り 100均アイテムの縛りに対しては、振動モーターは100均の電装ハンディプッシャーから分解して調達したり、スマホに拡大鏡を取り付けることで画面を巨大化させて「でっかい」に結びつけるなどの試みを行いました。 ハッカソン期間中、近所の100均をハシゴした回数は片手で収まりません。（たまたま3種の100均が徒歩圏内にあった） 「スマホのみ」縛り 一番大変だったのが「スマホのみ」縛りです。 序盤はWebアプリ側のベース実装はスマホからVibe Codingするなどで、スマホでの開発の新鮮さを楽しんでいました。 しかし、マイコン(ESP32)にプログラムを書き込む工程で苦戦してしまいます。 1 次第にスマホの画面サイズでの開発や、マイコンとの接続不調に心が折れてしまい、PCでの開発に泣く泣く切り替えました。 スマホの画面内での開発はさすがにキツくなってきた😇 #創発遊戯 pic.twitter.com/pl58tmG2wX — みやぎdaiking⊿🌗 (@daiking1756) 2025年3月14日 x.com 「お腹」に関連した機能 腹巻き型デバイスを作っていく中で、「お腹」に関連した機能として下記の機能を実装しました。 満腹時計: お腹の膨らみを圧力センサーで検出して食事中の満腹度を可視化する。 食べ物レーダー: 4カ所に設置したモーターの振動によって近くの飲食店の位置を伝える。「お腹が震える方向に歩けばご飯に辿り着く」体験を 実現。 私はウェブアプリ側の開発を担当したのですが、デバイス側を担当したメンバーからは「腹巻きに基盤を縫い付けるのが大変だった」という予想外の視点からのコメントがありました。 また、今回のハッカソンはリモート開催だったのですが、デバイスが中心となるプロダクトであっため、期間中に1度だけ出社してオフラインで作戦会議をしました。 モーターをLEDに変えたデバッグ用の回路を相方から受け取ったことで、その後の開発をスムーズに進めることができました。 デバイスの制作過程や作品の詳細は下記のページに記載しています。 protopedia.net 制約と創造性 「スマホだけで作れ」という縛りを引いた瞬間、正直『詰んだかも』と思いました。 でも、 創造的制約の力 の動画でも語られているように、制約って不思議で、逆にアイデアがどんどん湧いてきたんです。 知識としては知っていたものの、制約が新たな創造のきっかけになることを今回のハッカソン中に肌で感じました。 この記事を読んだ方が創発遊戯に参加することがあれば、縛りはMAXの個数を選ぶことをオススメします！ 少し話はズレますが、生成AIに入力するプロンプトも出力結果への制約を課しているとみることができます。 制約が少ない・抽象的だと、欲しい出力が得られないということは、AIに置き換えてみると私たちは実体験としてよく知っているかと思います。 結果はオーディエンス賞！そして風変わりな賞品を頂く 参加者による相互投票の結果、SMART HARAMAKIはオーディエンス賞を受賞しました🙌 そしてオーディエンス賞の賞品として贈られたのが、なんと 地方競馬の賞レース冠権 でした。 （下記の通り賞品は三択から選べたのですが、一番楽しそうなやつにしました） オーディエンス賞の賞品！！ A~Cのどれかを選べる！ #創発遊戯 pic.twitter.com/EB1aIBAznl — ひげだるま (@masaya3) 2025年3月13日 x.com 船橋競馬場にて「みかかロボット杯」開催！ 全国に15か所ある地方競馬場の中から、運営さんとも相談し、メンバーの家からも近い船橋競馬場で開催して頂くことにしました。 そして、2025年11月7日、ついに船橋競馬場にて、我々の冠レースが開催されました。 レース名は「みかかロボット杯」です！ ハッカソン参加時のチーム名「みかかロボット部」が由来です。 レース当日の様子は下記でも投稿していますが、来賓室から見るレースは一味違う体験でした。 （と言っても、メンバー2人とも競馬場に行くのはほぼ初めてでしたが） 個室の来賓室から見るレースは最高でした🙌 予想も的中させることができ、みかかロボット部初のサークル遠足は大成功でした🏇 今回作成頂いた横断幕は今後サークル内で大切に使わせて頂きます。 pic.twitter.com/nmht7UXWtw — みやぎdaiking⊿🌗 (@daiking1756) 2025年11月7日 x.com おわりに 簡単ですが、創発遊戯への参加報告および船橋競馬場での冠レース「みかかロボット杯」の開催報告でした。 社内サークルでの活動でまさか競馬場に行くとは思っていませんでした。 次のサークル遠足はどこに行くのか、楽しみです。 また、ハッカソンは毎回何か新しい発見や学びがあるので、今後も継続的に参加していきます。 今回参加した2名ともハッカソン期間中に確定申告に追われながらの開発となってしまったことが反省点でした。 3月中旬のハッカソンに参加する際は、事前に確定申告を終わらせておくことをオススメします。 今後も、AIロボット部では遊び心と技術力を融合させたチャレンジを続けていきます。 次回の活動報告も乞うご期待ください！ それでは明日の記事もお楽しみに〜👋 ArduinoやESP32系マイコンにSketchを書き込める ArduinoDroid というAndroid向けアプリがあるようですが、私の手元の端末では動作しませんでした。 ↩

こんにちは。 エンタープライズ 第一本部 戦略ソリューション 1 部の英です。 普段はWebアプリや スマホ アプリの案件などを担当しています。あと、趣味でAIを勉強しています。 2025年1月の組織改編で部の名前がカッコよくなりました。戦略って言葉、好きです。 ITソリューション部(旧)より、戦略ソリューション部(新)のほうが頭良さそうですよね。 気のせいか、名刺もなんだかカッコよくなった気がします。 前置きはここまでにして、今日はFlutterFlowのAI機能の検証をします。 私は普段から軽いデモであればFlutterFlowを愛用しています。爆速で開発できて便利です。 そんな、ただでさえ便利なFlutterFlowになんとAI機能が追加されたので、その実力を試してみようと思います。 ※ 2024年10月のアップデート 追加された機能は以下の4つ。 New Page Creation： 自然言語 や ソースコード からページを生成できる機能 New Component Creation： 自然言語 や ソースコード から コンポーネント を生成できる機能 Sketch To Component：手書きやスクショから コンポーネント を自動生成できる機能 Page Autocomplete：部分的に構築されたページをAIが自動的に補間してくれる機能 さっそく試してみましょう。 1：New Page Creation(自然言語ver) 2：New Page Creation(ローコードver) 3：New Component Creation 4：Sketch To Component 5：Page Autocomplete さいごに 1：New Page Creation( 自然言語 ver) まずはスタンダードな使い方として、 自然言語 による画面生成を試してみます。 適当なプロンプトをChatGPT(4o)に作成してもらい、それを貼り付けます。 では、これらの文章をコピペしてFlutterFlowのNew Page Creationに貼り付けてみます。 PreviewPageを押下すると次の画面が表示されました。 要素としては足りていますが、レイアウトがイマイチだと感じます。 この結果をChatGPTに投げつけて、プロンプトを修正してみましょう。 修正されたプロンプトで再度生成を行ったら、こんな画面が出力されました。 まあ、ほぼ完璧といって良いんじゃないでしょうか。 色合いやフォントを調整すれば十分に使える品質だと思います。 作成された各 コンポーネント は、いつも通りレフトバーから操作することが可能です。 白紙から作成するよりよっぽど効率的ですね。素晴らしい。 2：New Page Creation(ローコードver) New Page CreationはFlutterの ソースコード から作成することもできます。 いや、Flutterの ソースコード があるならそれでええやん！というツッコミは無視します。 というか、FlutterFlowの醍醐味は GUI によるUI/UX設計&ノーコード開発です。論点が違います。 仕上げをFlutterFlowに任せたい という思いが強いです。なるべくコーディングはしたくないのです。 とはいえ、 ソースコード が手元にないと話になりません。v0を使いましょう。 v0については本記事では解説しませんが、 自然言語 でコーディングおよびUIのプレビューまでできちゃう優れものです。 v0に貼り付けましょう。 プレビューは良さそうですね。ただ、Flutterで書いてほしいという命令を忘れていました。Flutter FlowのAIToolsはFlutterで渡した方が精度が高いです。修正してもらいます。 . dart での リファクタリング が始まりました。少し待ちましょう。 こういったダイナミックな変更にも素直に対応してくれるのがAIの良いところです。 もし、これが仕事で相手が人間なら、変更依頼と信頼関係を天秤にかけなければなりません。 複数ファイルに分かれているので、フォルダ構成を伝えつつ、 ソースコード をコピペしてみます。 生成が完了しました。 先ほどのv0のプレビューとソックリ ですね。 テキスト送信のブロックが下に張り付いていないのが惜しいです。 仮ですが、containerをstackでwrapして画面下部に引っ張ってきました。 こうやって手軽に調整が効くのが良いですよね。FlutterFlowを使う意味があります。 3：New Component Creation 先ほどのチャット画面に画像投稿用の コンポーネント を作成することを目指しましょう。 進め方は先ほどと同じように、プロンプトをChatGPTに考えていただき、FlutterFlowに貼り付けます。 長くなるのでChatGPTとのやり取りは省略します。 で、自動生成された コンポーネント がコレです。良いですね。 プレビュー領域もあって使いやすそうです。 4：Sketch To Component この機能を使うには 手書きのイメージが必要 になります。 電通 総研の画伯として一筆描くとしましょう。 うおぉぉぉおぉぉぉぉ！！！ ｻｻｻｻｻｯ..ｻｻ..!!シュッ！！ ｶﾘｶﾘｶﾘ...ツー...ﾄﾝﾄﾝｯ！ 描けました。なかなかの出来栄えです。 この画像から コンポーネント を作成してみましょう。 完璧すぎて草。 用途としては、会議室のホワイトボードに殴り書きしたイメージを具現化するなどでしょうか。 5：Page Autocomplete さて、最後です。作りかけの画面に 自然言語 で修正を加えられる機能です。 先ほどのチャット画面を作りかけとして定義し、作りこみをしてみます。 チャット送信で添付ファイルを追加できるようにしてみましょう。 Page Autocompleteを押下すると、 現在の画面構成を 自然言語 (英語)に起こしたもの が表示されます。 その内容をChatGPTに伝えて、修正命令を考えてもらいます。 ChatGPTが考えた修正命令を張り付けて、Page Autocompleteを開始しました。 ファイル添付のアイコンが追加されました。 これは修正の提案であり、その内容をどれくらい受け入れるのか を選択できます。(Less←→More) 今回はMoreに振り切って受け入れてみます。 反映後の画面がこちらです。 ファイル添付が出来そうなUIに修正されていることが分かります。 このように、修正箇所を細かく指示しながら、少しずつ画面を作りこんでいくことができます。 さいごに さて、今回はFlutterFlowのAI機能について記事を書きました。 *1 個人的な感想を言うとイマイチな性能でした。全体的にpaddingに気を遣えていないのが残念。 これは私の命令の内容が悪かったのか、AI側の性能が悪かったのか。 時間があるときにもっと検証してみようと思います。 これからも AWS やAI関連の検証記事をたくさん書いていきます。 ↓ のスターを押していただけると嬉しいです。励みになります。 最後まで読んでいただき、ありがとうございました。 エンタープライズ 第一本部では一緒に働いてくださる仲間を募集中です。以下のリンクからお願いします。 私たちは一緒に働いてくれる仲間を募集しています！ 中途採用-エンタープライズ第一本部 新卒採用-エンタープライズ第一本部 執筆： 英 良治 (@hanabusa.ryoji) 、レビュー： @yamashita.tsuyoshi （ Shodo で執筆されました ） *1 : ※本記事に使用されている画像は、AI画像生成ツール「DALL·E」を使用して作成されています