業務アプリのノーコード開発は 誰でもできる？ Non-ITの方向けに開発プロセス と基礎知識を解説 2023/ 9 / 27 NCDC株式会社

Business 事業領域の推進 Design ユーザ視点での設計 Technology 技術による課題解決 Innovation • コンサルティング • 新規サービス企画 • PoC⽀援 • デザイン思考 • UX/UIデザイン • モバイル・Web先端技術 • IoT / AI / AR • クラウドインテグレーション 2 NCDCのサービス体系

私たちにできること① l デジタルビジネスに必要な要素にフォーカスし、⼀元的に提供しています。 l スモールスタートでの検証から、本開発・継続的な改善までサポートします。 3 ワークショップを中⼼とし た合理的なプロセスで、ビ ジネスモデルの検討からUX デザインまで、迅速に⾏い ます。 関係者が多数いる場合の組 織横断、会社横断のファシ リテーションも得意です。 新規性の⾼いプロジェクト ではMVP（Minimum Viable Product）を⽤いた検証を⾏ うなど、⽬的に応じて段階 的な開発を企画します。 早い段階でモックやプロト タイプを⽤意してユーザの 評価を確認します。 ユーザとのタッチポイントとなる各種デバ イスのフロントエンドデザインから、クラ ウドサービスを駆使したバックエンドの開 発まで。多様なテクノロジーをインテグ レーションします。 l AI / IoT / AR l モバイル・ウェブ アプリ開発 l クラウドインテグレーション l システムアーキテクチャコンサルティング など ビジネスモデルのデザイン スモールスタート・PoC システム・インテグレーション ユーザ視点を⼤切にした 課題抽出・企画 モックやプロトタイプ の開発・検証 開発 継続的な改善

私たちにできること② l 社内に最適な組織がない場合の組織づくりや⼈材育成から、⾼度な技術をもったエンジニ アによる技術移管まで、幅広くお客様をサポートします。 4 ビジネスモデルのデザイン スモールスタート・PoC システム・インテグレーション ユーザ視点を⼤切にした 課題抽出・企画 モックやプロトタイプ の開発・検証 開発 継続的な改善 企業のDXやデジタルビジネスの創出に必要なこうしたプロセスを多⾯的にサポート DX戦略⽴案 ⼈材育成 技術移管 DX組織構築⽀援 アジャイル導⼊⽀援 ⼿法や技術の選定 ブランディング 内製化⽀援

自己紹介 5 局 芳暁 （つぼね よしあき） NCDCではコンサルタント l 入社5年目 l アジャイル開発や新規事業開発の支援 l ノーコードの調査、研究をしている 担当業務

今日のセッション l ノーコードとは何かを理解する l NonITの方でもおさえておくべき、ITの構造 l 開発の工程を理解する l ノーコードを使って、開発の工程を追ってみる l NCDCのサポートについて 6

ノーコードとは何かを理解する

ポイント l ノーコードとはコードを書くことなく開発をすることを指します。 l ノーコード開発をするには専用のツールを用います。 ノーコードとは？ 8 ノーコード No-code プログラミングをすることなく Webサイトやアプリケーション を開発すること プログラミングの必要なくGUI ツールでアプリケーションを作 る → 非エンジニアでも可能 開発工数は少ないが、実現でき る機能に制約が有り、ツールに 依存する 特徴 定義 ローコード Low-code 必要最小限のプログラミングで Webサイトやアプリケーション を開発すること 少ないソースコードで開発する ことが可能 → 開発者向け 一部のプログラミングを行うこ とでノーコード開発より拡張性 がある プロコード(スクラッチ) プログラミング（コードの記 述）を用いてWebサイトやアプ リケーションを開発すること ゼロからソースコードを書いて 開発すること → 開発者向け 自由に機能を実現できるが、 ノーコード・ローコード開発に 比べて開発工数は多い 少・低 多・高 開発工数・拡張性

ノーコードツールの市場 9 一般社団法人NoCoders Japan協会（ノーコーダーズ・ジャパン協会） 制作

今日のセミナータイトルに対しての結論1つ目 l 業務アプリのノーコード開発は誰でもできる？ l できます l 私も非IT出身です l ただ、複雑な業務アプリはノーコードには不向きです l また、基礎知識はおさえていただいた方が、より分かって進めら れるので、これからノーコードツールを使って解説いたします 10

NonITの方でもおさえておくべき、ITの構造

アプリとアーキテクチャ：家の構造との比較 l インフラとは、その上に建てるアプリの許容量を決めるものです。 l アプリの許容量とは、最大ユーザー数や反応速度、入れられるデータ量などに影響しま す。 l 身近なところでいうと、スマートフォンもインフラの1つ l 昔買ったスマホを使い続けていると、アプリを操作するのにとても時間がかかることが ある l ノーコード開発の場合はインフラのことはほぼ考えなくていい 12 バックエンド （サーバーサイド） インフラ 家具やインテリア等、家の骨格に関わらず改修できる部分 間取りや水回り、配電等、大規模な工事を伴う骨格部分 土地：建物の大きさの許容率、日当たりなど引っ越しを伴わなければ変えられない部分 家 アプリ フロントエンド

アプリとアーキテクチャ：家の構造との比較 l バックエンドとは、「後部（の）」という意味で、裏方の役割を指す l サーバーサイドというのは、「ビールサーバー」といった言葉もあるように、 「サーブ（Serve）する存在」、つまりは「何かを提供する存在」という意味 l 水道の蛇口をひねるという行動をしたら、水道管が貯水槽から水を取ってきて、 蛇口に出してあげるという処理に似ている l アプリでは、配線の仕組みをAPI（Applica2on Programming Interface）とも言う l 貯水槽のような、データを保存する領域（データベース）からのデータの出し入 れを行う役目 13 バックエンド （サーバーサイド） インフラ 家具やインテリア等、家の骨格に関わらず改修できる部分 間取りや水回り、配電等、大規模な工事を伴う骨格部分 土地：建物の大きさの許容率、日当たりなど引っ越しを伴わなければ変えられない部分 家 アプリ フロントエンド

アプリとアーキテクチャ：家の構造との比較 l フロントエンドとは、「前部（の）」という意味で、表方の役割を指す l 先程の例でいう、水道の蛇口で、私達の手で触れる部分 l 家の骨格に関わらず変えられる部分となり、アプリではUI（ユーザーインター フェース）とも呼ばれる 14 バックエンド （サーバーサイド） インフラ 家具やインテリア等、家の骨格に関わらず改修できる部分 間取りや水回り、配電等、大規模な工事を伴う骨格部分 土地：建物の大きさの許容率、日当たりなど引っ越しを伴わなければ変えられない部分 家 アプリ フロントエンド

ノーコードツールで開発する上で抑えるべきポイント l アプリの構造と役目を抑えておく必要がある l フロントエンド：見た目や手に触れる部分 → 水道の蛇口 l バックエンド：データの出し入れをする部分 → 家の水道管や貯水槽 l インフラ：アプリのパフォーマンスや許容量を決める部分 → 土地 l どこを開発しているかは分かって対応できると好ましい l 詳細な技術、例えば、施工方法は分からなくても大丈夫だが、どこに 配管を繋げれば求めている水が出てくるかなどはわかる必要がある 15

開発の工程を理解する

今日のセミナータイトルに対しての結論２つ目 17 l 開発と一言で言っても、5つのフェーズに分かれます l どういったアプリを作るかを「要件定義」といいます l どのようにそのアプリを作るかを「設計（デザイン）」といいます l 実際に作る作業を「実装」といいます l 作ったアプリが正常に動くか確かめることを「テスト」といいます l 参考：テストは大きく3つに分けられます l 単体テスト：1つの機能単体で動くかを確かめること。実装の中で行われることが 多いです。 l 結合テスト：機能すべてを合わせたときに要件定義通りに動くかを確かめること l 総合テスト：実際の業務の流れや、生活の中で使ってみて想定していた通りに動 くかどうか確かめること l テストが終わったアプリを一般公開することを「リリース」といいま す

ノーコードを使って、開発の工程を追ってみる

要件定義：どういったアプリを作るか l チームでのToDoリストアプリを作る 1. タイトルとアサインとプロジェクト、締切日を入力し、登録ボタン を押すとタスクを登録できる 2. 登録日は自動で入る 3. 登録したタスクはリストで表示される 4. 完了・未完了がわかる 5. スマートフォンで見られる 19

設計：どのように作るか l どのように作る？ l 上記の要望を実現するのに必要なパーツやデータを描いてみる l まずはフロントエンドの画面上に自由にパーツ（家具やインテリア）を置 いてみる ex アプリのタイトルや入力ボックス等 l 次にバックエンドに、登録した際に何が保存されるかを書いてみる l バックエンドから、フロントエンドに表示されるデータを線でつないでみ る 20

設計：どのように作るか 21 バックエンド （サーバーサイド） フロントエンド インフラ

設計：どのように作るか_フロントエンド 22 バックエンド （サーバーサイド） フロントエンド インフラ ToDooooooN!! タイトルを入力 アサインを入力 プロジェクトを選択 締切日を入力 タスクリスト タイトル/アサイ ン/カテゴリ/締切 日/登録日 ☑ 登録

設計：どのように作るか_バックエンド 23 バックエンド （サーバーサイド） フロントエンド インフラ ToDooooooN!! タイトルを入力 アサインを入力 プロジェクトを選択 締切日を入力 タスクリスト タイトル/アサイ ン/カテゴリ/締切 日/登録日 ☑ 登録 タイトル ユーザー（ア サイン） プロジェクト 締切日 登録日 ステータス 完了 未完了

Excel形式にしたデータベースのイメージ 24

設計：どのように作るか 25 バックエンド （サーバーサイド） フロントエンド インフラ ToDooooooN!! タイトルを入力 アサインを入力 プロジェクトを選択 締切日を入力 タスクリスト タイトル/アサイ ン/カテゴリ/締切 日/登録日 ☑ 登録 タイトル ユーザー（ア サイン） プロジェクト 締切日 登録日 データを登録する配線(API) データを表示させる配線(API) ステータス 完了 未完了 データを削除させる配線(API)

実装：ノーコードツールでインフラを作ってみる l 家を建てる土地を作ります l 実は、ノーコードツールでアプリを作る場合、アカウントを立ち 上げるだけで、インフラも付いてきます l ノーコードツールでない場合、AWS(AmazonWebService)や GCP(GoogleCloudPla=orm)や自社サーバー(自分の会社にパソコンを 置く)などを考えて、ハードディスクの容量やメモリの容量と維持 費を比較しながら検討を進めます l インフラもインフラエンジニアという専門職があるくらい奥が深い分 野なので、今回はこのあたりで割愛します l ではノーコードツールを立ち上げてみましょう 26

実装：ノーコードツールでフロントエンドを作ってみる l 「どのようにアプリを作るか」のセッションで考えたワイヤーフ レームを、ノーコードツールで再現していきます 27

実装：ノーコードツールでバックエンドを作ってみる l 「どのようにアプリを作るか」のセッションで考えたデータベー スを、ノーコードツールで再現していきます 28

実装：フロントエンドとバックエンドをつなげてみる l 「どのようにアプリを作るか」のセッションで考えたフロントエ ンドとデータベースとの配線を、ノーコードツールで再現してい きます 29

実装：フロントエンドとバックエンドをつなげてみる l 「どのようにアプリを作るか」のセッションで考えたフロントエ ンドとデータベースとの配線を、ノーコードツールで再現してい きます 30

テスト：作ったアプリを動かしてみる l フロントエンドとデータベースを繋げたアプリをプレビューモー ドで動かしてみます 31

リリース：作ったアプリを公開してみる l 動かしてみて問題がなければ公開してみます 32

今日のセミナータイトルに対しての結論２つ目の復習 33 l 開発と一言で言っても、5つのフェーズに分かれる l どういったアプリを作るかを「要件定義」といいます l 今回の例でいう「TODOリストアプリを作る」と、その詳細の要望 l どのようにそのアプリを作るかを「設計（デザイン）」といいます l 今回の例でいうフロントエンドにどういったパーツを配置して、バックエンド にどの情報を置くか l 実際に作る作業を「実装」といいます l インフラを作ること l 今回の例でいう実際にパーツを配置したり、データベースを作ったりすること l 作ったアプリが正常に動くか確かめることを「テスト」といいます l 今回でいうプレビューして機能を確かめることです」 l テストが終わったアプリを一般公開することを「リリース」といいます l 今回でいるSHAREを押してURLを共有することです

今日のセミナーで持って帰っていただきたいこと 34 l ノーコードツールによっても使い方は違うが、アーキテクチャの 何かに置き換えているはず l 変換してもらえれば、非ITでも悩まずできるはず l 業務アプリでも、できるもの、できないものはある l 複雑なものを作るのには向いていない

NCDCのサポート

ノーコードによる新規サービス支援パッケージ l アイデア創出のワークショップからノーコードツールでのMVPの開発を行います l PoCの実施を支援して、結果をレポートし事業化に向けたアドバイスを行います l 市場投入に向けた追加開発は内製で行えるようコーチングや技術移管資料をご提供します l サービス一式500万円が基本価格で提供 アイデア創出 事業化 検討 事業化 の判断 ノーコード ツールでの PoC ノーコードツールでの PoCでできた部分 追加 機能 追加 機能 追加 機能 限定市 場への 本番リ リース 2ヶ月 4回のワークショップ を行います。検討サービスのUI をNCDCが作成します NCDCがノー コードツール でMVPを開発 し、PoC計画を 立案し、PoCを 実施します PoC結果 をレポー トして、 事業化判 断を議論 します 追加機能は貴社が自ら開発 できるように技術移管と コーチングを行います

No content