未踏 最終成果発表

" ! 筑波大学 2年 大渕 雄生

開発したアプリ グループ グループ 1 ! 3メンバー なめたけ 3メンバー ! Title ! obuchi yuki らっぷびと ! 3メンバー ! Suzuki masaru グループ 1 ! 3メンバー ! Kakapo ! obuchi yuki ! ! ! ! マイクを押して投稿 • ボイスメッセージを交換できるSNS • 部屋を作ってボイスメッセージでチャット

開発したアプリ !

デザインからコードを自動生成するソフトウェア 大渕 雄生

20分でアプリを開発 デザイン10分+ロジック10分 = 20分！

アプリ開発の難しさ

なぜAxStudioを作ったか 大量のアプリ開発の依頼

なぜAxStudioを作ったか アプリ開発の流れ アイディア デザイン プロトタイプ コード

なぜAxStudioを作ったか アプリ開発の流れ 重労働 + 単調作業 アイディア デザイン プロトタイプ コード

なぜAxStudioを作ったか テキストのリストを表示するだけでこれだけのコード + StoryBoardが必要 import UIKit class Cell: UITableViewCell { var title: String = "" { didSet { self.textLabel?.text = title } } } class ViewController: UIViewController { @IBOutlet let tableView = UITableView() let content = ["Hello", "World", "Swift"] override func viewDidLoad() { self.tableView.delegate = self self.tableView.dataSource = self } } extension ViewController: UITableViewDelegate { func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) { print("indexPath", indexPath) } } extension ViewController: UITableViewDataSource { func numberOfSections(in tableView: UITableView) -> Int { 1 } func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { content.count } func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "__cell", for: indexPath) as! Cell let title = content[indexPath.row] cell.text

なぜAxStudioを作ったか Storyboardやコードでレイアウト処理をやろうとすると 大量の制約と戦う必要がある

なぜAxStudioを作ったか プロトタイプに変更があるたびにコードの書き換えが必要

なぜAxStudioを作ったか デザインとコードは強く関連している

AxStudioのアプローチ 全部自動化しよう！ ＿人人人人人人＿ ＞ 自動化 🌟 ＜ ￣Y^Y^Y^Y^Y^￣ アイディア デザイン プロトタイプ コード

AxStudioの目標 アイディアを思いついた時に 誰にでもそれを高速に形にできる

最初の構想 デザインからデザインのコードを出力するだけ

最初の構想 仕組みのあるアプリを作れない

データベースとの同期という構想 テーブルとの紐付けでデータを作成

データベースとの同期という構想 作れるアプリが限られすぎる

スクリプト言語を用いる構想 専用の言語からトランスパイル

スクリプト言語を用いる構想 誰でもアプリを作れるという目標を達成できない

ノードによるロジック開発 ノードのグラフでロジックを作成

ノードグラフの特徴 1. 一目でロジックがわかる 2. コードが理解できずとも作成可能 3. あらゆるロジックを作成可能

ノードグラフの特徴 1. 一目でロジックがわかる 2. コードが理解できずとも作成可能 3. あらゆるロジックを作成可能 アイディアを思いついた時に 誰にでもそれを高速に形にできる

TODOアプリを作ってみる

タイトル

書き出された大量のコード

書き出された大量のコード

Sketchからの取り込み

もっといろんなアプリ

カメラを撮影するアプリ

カメラを撮影するアプリ

天気アプリ

複雑なアプリ 9:41 ホーム ! 何をお探しですか？ ¥1,200 ¥990 ¥1998 ¥12,51 0 ¥998 ¥1,300 ¥998 ¥1,640 ¥1,640 ¥1,640 ¥1,640 ¥1,640 ¥1,640 ¥1,640 # ホーム " 出品 ¥1,640 ! マイページ

サンプルアプリ サンプルアプリとして用意

AxStudioの2つの強み

AxStudioの強み 1 強いデザイン性能

強いデザイン性能 このスライドもAxStudioでできている

強いデザイン性能 Metal2を用いた独自のレンダリングエンジン 3次ベジェパスの論理演算

AxStudioの強み 2 プログラマに読みやすいコード

読みやすいコード 普通のノンコードツール func funcI2jHV2B8() { let v_23cV923 = AKHv1View() let v_2nb9csR = u_ashjkv12 asAJub1287GC() let v_127tmn9 = KJB83jView() } v_127tmn9.addSubview(v_23cV923) v_127tmn9.i8ymnas7 = v_2nb9csR v_127tmn9.v2bIgib1 = false 書き出されたコードは読むことを想定していない

読みやすいコード AxStudioによって書き出されたコード import UIKit // MARK: - TodoListViewController class TodoListViewController: UIViewController { // ================================================================== // // MARK: - IBOutlet @IBOutlet var todoTextField: UITextField! @IBOutlet var submitButton: UIButton! @IBOutlet var todoTableView: UITableView! // ================================================================== // // MARK: - Properties var state: [String] = [] { didSet { self.stateDidSet(self.state) } } var listElements = [String]() // ================================================================== // // MARK: - IBAction @IBAction func didTapSubmit() { if !(self.todoTextField.text ?? "").isEmpty { self.state.append(self.todoTextField.text ?? "") } } AxStudioのコードはプログラマのものと非常に近い

コード生成の手法 IIR IIR 生の中間表現 正規中間表現 Nib Swift AST Swift

コード生成の手法 IIR IIR 生の中間表現 正規中間表現 Nib 表現と構造の変換 デザインから構造の変換 グラフ構造からコード構造へ変換 リソースの書き出し Swift AST Swift

コード生成の手法 IIR IIR 生の中間表現 正規中間表現 Nib プログラムとしての変換 識別子の唯一化 型のチェック 不必要な情報の削除 Swift AST Swift

コード生成の手法 IIR IIR 生の中間表現 正規中間表現 Nib Swift AST 各フォーマットへの適応 Swift

コード生成の手法 ASTから適切に フォマットされた コードの書き出し IIR IIR 生の中間表現 正規中間表現 Nib Swift AST Swift ASTからコードの生成

ユーザーの反応と改良

プレビュー版のリリース 700人ほどに使っていただき反応を計測

体験者 AxStudioへの感想

体験者 プレビュー版からのフィードバック 「Xcodeのインストールが必要なのが面倒くさい」 「チュートリアル的なものが欲しい」 「UIが日本語だと嬉しい」

プレビュー版からのフィードバック 「Xcodeのインストールが必要なのが面倒くさい」 シミュレーターを実装→ワンクリックで実行可能

プレビュー版からのフィードバック 開発後にアプリの実行まで行った率 シミュレータなし シミュレータあり 100% 82% 75% 50% 25% 0% 36%

プレビュー版からのフィードバック 「チュートリアルが欲しい」 https://axstudio.dev 上にチュートリアルを作成 チュートリアルに従えばAxStudioの機能を理解できるように

プレビュー版からのフィードバック 「UIが日本語だと嬉しい」

今後の展望

「アイディアを思いついた時に誰にでもそれを高速に形にできる」

「アイディアを思いついた時に誰にでもそれを高速に形にできる」

ご静聴ありがとうございました https://axstudio.dev からダウンロード可能！

プロジェクト生成の手法 Nib Nib Xcode Project Swift Swift

プロジェクト生成の手法 Nib Nib Xcode Project Swift Swift 差分のみを適応

プロジェクト生成の手法 Nib Nib Xcode Project Swift Swift プロジェクトファイルの書き出し

ゲーミング財団 CC3. scp-jp.wikidot.com

今後の予定 Preview版 2021/1月 2021/3月 β版 マスター版 2021/10月 CC3. scp-jp.wikidot.com

今後の予定 Preview版 2021/1月 2021/3月 β版 マスター版 2021/10月 CC3. scp-jp.wikidot.com

今後の予定 ここまで無料｜ここから有料 Preview版 2021/1月 2021/3月 β版 マスター版 2021/10月 CC3. scp-jp.wikidot.com

画面遷移

UIコンポーネントを置く

関数とか フィボナッチ数列のn番目を計算する関数

コンポーネント

コンポーネントの上書き

自動じゃないレイアウト

なんでも自動レイアウト

デザイン

シミュレーター