NoCode（ノーコード）でサービス開発する

# OSS 開発（しない）合宿
毎年開催される夏の風物詩 OSS 開発合宿で「開発しない合宿」をしてきました。

OSS 開発合宿とは、野村総合研究所の OpenStandia チームが中心となって、2009年から毎年開催されているオープンソースハッカソンです。毎年夏になると三崎や伊東、房総の海と漁港が近い宿を借りて開発合宿をします。このハッカソンは、夏祭りです。

[エンジニアたちの楽園！第6回OSS開発合宿 レポート](https://thinkit.co.jp/story/2014/07/11/5102)
[大人になってまで合宿にいくなんて......。寝ずのOSS開発合宿レポート！](https://www.wantedly.com/companies/kitchhike/post_articles/74545)

今年はリモートでの開催となりましたが、いつものように好きなものを好きなだけ作る時間を楽しんできました。

本記事は、OSS開発合宿当日の発表用の資料です。

--- 
# 何を作ったか、いや作らなかったのか

NoCode（ノーコード）の情報をまとめた Webサイト・アプリをノーコードで立ち上げました。

開発合宿中、プログラムを１行も書いていません。

さて、システム開発の民主化はどこまで進んでいるのでしょうか。

---

# NoCode（ノーコード） とは
ノーコードとは、システム開発のためにプログラムを書く必要がないシステム開発手法です。

語源は Product Hunt の創業者 Ryan Hoover 氏による [The Rise of “No Code”](https://medium.com/@rrhoover/the-rise-of-no-code-e733d7c0944d) の記事に端を発するようです。

Google が [Appsheet](https://www.appsheet.com/) を買収し、Amazon が [Honeycode](https://www.honeycode.aws/) を公開、Microsoft が [Power Apps](https://powerapps.microsoft.com/ja-jp/) を展開するなど盛り上がりを見せています。

ノーコードはなんと言っても「すぐに動くものが作れる」のでプロトタイプ・MVP（Minimum Viable Product）を構築するのに適しています。

その反面、ツールごとに出来ることと出来ないことがはっきりしています。選んだツールで出来ないことは、どうやっても出来ないことに注意してください。

---
# 代表的な NoCode（ノーコード）

- Bubble : Web アプリ開発が可能な汎用的なノーコードサービスです
- Webflow : デザインが優れた Web サイト（CMS）を構築できるノーコードサービスです
- Adalo : スマホネイティブアプリ（PWA）を構築できるノーコードサービスです
- Airtable : データベースに特化した業務システムのノーコードサービスです
- Zapier : タスク自動化・アプリ連携に特化した業務システムのノーコードサービスです

各々について ユースケース / 特徴 / メリット / 課題 をまとめていきます。

---
## Bubble
https://bubble.io/

![スクリーンショット 2020-09-05 22.54.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127260/e42a9972-df67-d372-6b2e-5ab573dc5a47.png)

### デモサイト
https://nocodenews.bubbleapps.io/

### ユースケース
ある程度複雑な処理を行う Web アプリ

### 特徴
- 基本操作はドラッグ＆ドロップ
- 汎用性が高いノーコードツール
- 予め準備されているコンポーネント部品を利用可能
- コンポーネント部品を画面に配置してデザイン可能
- コンポーネント部品に処理・機能を設定し、データを保存可能
- 他ツールとAPIで連携可能、プラグインも充実

### メリット
- 汎用性が高く、操作はドラッグ＆ドロップ
- 複雑なこともできるのでプロトタイプレベルを超えて利用できる（かも）
- 現時点のノーコードの中では最も幅広く対応できるものの一つ

### 課題
- レスポンシブデザインを作り込む必要がある
- 何でもできるツールゆえに、システムの設計力が必要
- 何でもできるゆえに、習得までにある程度の時間がかかる（かも）

---
## Webflow
https://webflow.com/

![スクリーンショット 2020-09-05 23.01.36（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127260/1142d8be-cf3b-4e6b-990a-b2a92e657e78.png)


### デモサイト
https://nocodenews.webflow.io/

### ユースケース
CMS を持つ Web サイト

### 特徴
- 基本操作はドラッグ＆ドロップ
- クオリティの高い CMS サイトを構築可能
- デザインテンプレートが充実
- 自動的にレスポンシブデザインになってくれる

### メリット
- CMS サイトを作成可能
- ブラウザでコーディングする感覚で作れる
- 画面でデザインして作ったものを HTML/CSS/JS でエクスポート可能

### 課題
- HTML や CSS の知識がないと操作ができない（理解できなさそう）

---

## Adalo
https://www.adalo.com/

![スクリーンショット 2020-09-05 23.26.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127260/f3521200-f452-bc23-09d4-d2c2b44ff38a.png)

### デモサイト
https://previewer.adalo.com/6dea30cd-344c-4f94-ac79-3b661eaa6d31

### ユースケース
スマホのネイティブアプリ（PWA）

### 特徴
- スマホの画面遷移図にコンポーネント部品をドラッグ＆ドロップ
- スマホアプリのテンプレートから作成できる
- リレーショナルデータベースを作ることができる
 - 今回は紹介していない [Glide](https://www.glideapps.com/) のスプレッドシートとの違いはここ

### メリット
- スマホ向けのサービスを作りやすい
- Glide よりはできることが多い
- Bubble よりもかんたんに使うことができる

### 課題
- 自由度はある程度制限されている
- 出来ることはまだ少ない（かな）

---

## Airtable
https://airtable.com/

### ユースケース
- 業務システム

### 特徴
- Google スプレッドシートと RDB を混ぜたようなサービス
- 企業内ツールとして使える
 - Salesforce / kintone / Google スプレッドシートが類似サービス
- 「同じデータ」をいろいろな形式でみることができる
 - 表形式/カンバン/カレンダー/フォーム/ギャラリー

#### 表形式
![スクリーンショット 2020-09-05 23.03.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127260/5a898a80-e608-790c-7e88-7327e416504d.png)

#### カンバン
![スクリーンショット 2020-09-05 23.19.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127260/a6aaab93-f3da-8bfe-9547-4a8feff3e389.png)

#### カレンダー
![スクリーンショット 2020-09-05 23.15.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127260/63e45564-fb52-4ee0-0349-ddcec6a9603e.png)

#### フォーム
![スクリーンショット 2020-09-05 23.15.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127260/4e3c73b7-24d0-13c0-d837-824a4bae1703.png)

#### ギャラリー
![スクリーンショット 2020-09-05 23.15.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127260/3543c905-b0a3-7ce6-7b28-7f7066e3d80d.png)

繰り返しになりますが、これらは「同じデータ」を別の見せ方にしています

### メリット
- 豊富なデータ型がある
- データをいろいろな形式で見ることができる
- 入力チェック（単項目バリデーション）
- レコード同士の整合性チェック

### 課題
- フィールドごとの権限管理ができない

---

## Zapier
https://zapier.com/

![スクリーンショット 2020-09-06 0.35.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127260/cfabcc7e-cb0e-3611-bb7e-ed8194d22035.png)

### ユースケース
- システム間のデータの連携

### 特徴
- 手作業のルーチン作業を自動化できる
- アプリ・ツールを組み合わせることができる
 - 例） Airtable のフォームにデータが入力されたら Slack に通知メッセージが飛ぶ

### メリット
- 連携サービス数が1,500以上
- AWS, GCP, Azure と連携可能
- IFTTT よりも細かな設定が可能

### 課題
- 無料では回数制限がある
- 日本のサービスに対応していないものがある

---

## 他、気になるサービスたち
- [STUDIO](https://studio.design/ja) : 日本製ノーコードツール
- [microCMS](https://microcms.io/) : 日本製ヘッドレスCMS

## 参考情報
[NoCode School](https://www.youtube.com/channel/UCa3cFggd3BrJ6qq5lw8P_9w)
[NoCode Ninja](https://note.com/nocodeninja)

---

# まとめ

- システム開発の民主化は確実に進んでいます
- 企画・マーケティング・営業の人だけでサービスを作るのは可能（かも）
- しかし、まだまだ出来ないことは多いし、プログラミングした方が柔軟で早いです
- 今後はより一層アーキテクチャ設計のスキルが重要になると思います