sammyppr

View on GitHub

メディア表現 VI 12.ノーコード開発I

メディア表現 VI TOP に戻る

目次

本日の内容

python人気ないので、

をやっていきましょう。

前回のおさらい

Git, GitHubについてやってみました。 初期設定が多少めんどくさかったですが、一度設定すれば便利に使えます。

ノーコード開発が早く終わるようであれば、14回目に追加でやってみようと思います。

ターミナルの操作の表記がわかりづらかったので、資料修正してあります。

ノーコード開発

ノーコードという言葉も何回か使ってきました。 5回目にAirTableを使ってみました。

ノーコード・ローコードとは？

コーディングによるプログラミング開発を行わないで、ホームページを作成したり、Webアプリケーションを開発したりと、従来ではエンジニアが担当していた部分を、非エンジニアでも開発できるよう作られた開発プラットフォームです。

コードを書かずなくて良いため、皆さんのようにコーディングが得意でない人にはうってつけです。

ノーコードで開発ができれば、社会人になった時にひょっとしたら非常に便利になるかもしれません。

ノーコードのデメリット

コーディングによるプログラミングに対して、できることが開発プラットフォームによって限定される、という点が挙げられます。 プラットフォームを選ぶときには、何ができて何ができないかを調査する必要があります。

ノーコードでも設計は必要

コーディングしないから簡単と謳われるノーコードツールですが、

やりたいことを形にする(設計)

はどうしても必要です。

これらをできる思考力を高めましょう。

日本語対応のノーコードツール

日本語対応のノーコードツールも多数リリースされています。 日本語対応のノーコードツール5選！！プロダクト開発から業務改善まで対応！！

ちょっと覗いてみましょう。

Bubbleで作ろう！SNSアプリ

今回利用するノーコードツール Bubble

今回は、現在最強、一番汎用性が高いと言われているノーコードツールです。 英語ベースですが、こちらを採用したいと思います。

作るアプリ

twitterのようなアプリを開発してみようと思います。

ここを参考にしています。 -ノーコード ラボ twitter clone

必要な機能

twitterのようなアプリを作るのにどんな機能が必要でしょうか？

とりあえずこの辺が必要ですね

ウォーターフォール開発とアジャイル開発

従来、しっかりとした設計をして、仕様書を策定し、それから実際にコードに落とし込むとう開発方法をとっていました。これはウォーターフォール開発と呼ばれ、変更が起きづらいシステムの開発に適していますが、変更が起こるたびに作り直しとなり、時間がかかることが問題でした。工程としては以下のようになります。

要件定義 > 設計 > 製造 > テスト > リリース

最近では素早い仕様変更が求められるようになり、アジャイル開発、とりあえず作ってみて、おかしなところがあればどんどん変更しようが普及しています。

皆さんがXDで作業してきたのはプロトタイピングで、実際に画面遷移などを確認しながら仕様を決めよう、というものでしたが、アジャイルでは実際に動くものを作っちゃえ、という発想になります。

プロトタイピングを一歩進めたのがアジャイル開発とも言えます。

大規模な開発にはウォーターフォールが必須ですが、比較的小規模な場合にはアジャイルが向いています。

綿密な仕様を決めずに開発し、ユーザのフィードバックを得ながらさらに開発を進めていきます。

今回はアジャイル開発手法をとっていきましょう。

ノーコードはアジャイルに向いています。

セキュリティについて

実際にリリースするアプリではセキュリティ対策は必須となりますが、今回はそんなに気にしません。

Bubbleへの登録・ログイン

  1. .bubbleにアクセス
  2. 右上のGet startedをクリック
  3. Googleアカウントか、メールアドレスにて登録します。自分はGoogleアカウントにしました。
  4. Sign Inします
  5. アンケートがいくつかあります
  6. 「Hi there, what’s your goal today?」Build
  7. 「Which of the following describes your experience? Select all that apply.」1番下にチェック
  8. 「Which of the following describes your background? Select all that apply.」1番下にチェック
  9. 「Where did you hear about Bubble?」Friends or colleagues

新規アプリを作る

初期設定

  1. 「Create a new app」で、TwitterTestとでもしておきましょう。
  2. 他の人と異なる名前でないと登録できないため、数字や記号を後ろにつけましょう。
  3. 「Create app」をクリック
  4. 有料の案内が出るので左下の「Start with basic features」
  5. 少し時間かかります
  6. Stepが5つありますね。
  7. Step1 そのまま
  8. Step2 Japanese(ja_jp)
  9. Step3 そのまま
  10. Step4 そのまま
  11. Step5 そのまま、Get started building
  12. ComponentLibraryにバルーンがついてるので、Get Started
  13. 「Step1:Set your page to column layout」 Set to column
  14. 「Nice! Page layout has been updated」Next
  15. 「Step 2: Drag and drop components」Got it

デザイン ヘッダーとTweet部分

  1. Headerの一番上をドラッグアンドドロップ
  2. Headerをダブルクリックして、AppearanceタブのBackgroundをDDDDDDに
  3. 右上のPreviewを押すと、現在の状況が見えます
  4. 左のGroupをHeaderの下にドラッグ&ドロップします。
  5. GroupBをダブルクリックでContents Groupに。LayoutタブのContainer LayoutをColumn, Make this element fixed-width のチェックを外す。StyleをRemoveStyleしてからBackgroundをFlatColor,BBBBBBに。中に要素を入れづらいので、Min.Hiehgtを1000pxに。

データベースの作成

  1. Tweetのデータベースを作成しましょう。
  2. 左のDataタブをクリック
  3. NewTypeのところに「Tweet」でCreate
  4. Create a new fieldを押してFieldName：Message, FieldType:textでCreate
  5. デザインしやすいようにデータを挿入しておきましょう。
  6. 上のAppDatamをクリック。All Tweetsが青くなっているのを確認して、NewEntry
  7. Messageに「初めてのBubbleデータベース」、Slugは空欄で、Create
  8. All Tweetsにデータが入ってるのを確認しましょう。
  9. もう一つ「2回目のメッセージ」を入力しておきましょう。
  10. もう一つ、4,50文字のメッセージを入力しておきましょう。

データベースの反映

  1. データベースの中身をデザインに反映させましょう。
  2. Designタブをクリック
  3. Contents Groupの中にRepeating Groupをドラッグ&ドロップ
  4. AppearanceタブでType of ContentsでTweet。Data sourceでDo a search forにしてtypeをTweet。Close
  5. LayoutタブでCell’s Container layoutをColumn, Make this element fixed-width のチェックを外す。Sort byをcreated Date, DescendingをYes
  6. これでTweetテーブルと連携されました。
  7. RepeatingGroupの一番上にGroupをドラッグ&ドロップして名前をGroupTweetに。LayoutタブのContainer LayoutをColumn, Make this element fixed-width のチェックを外す。StyleをRemoveStyleしてからBackgroundをFlatColor,FFFFFFに。Min-heightを100pxに。LayoutタブでMarginを全て10に
  8. GroupTweetのAppearanceタブで、Type of contentをTweetに。
  9. Data source は「CurrentCell’s Tweet」
  10. GroupTweetにTextをドラッグ&ドロップ
  11. Appearanceタブの…edit…meをクリックしてInsert Dynamic Data, parent group’s Tweet, ‘s Messageと順にクリックしましょう。
  12. Previewを見ると、これでデータが反映されたことがわかります。
  13. LayoutタブでMake this element fixed-width のチェックを外す。Min Heightを0にしましょう。RepeatingGroup TweetもMin Heightを0にしておきましょう。

Tweetする画面を作ろう

  1. Loginの左にButtonを追加。…edit me…「+」にして、widthを60にしておこう
  2. Popupをドラッグ&ドロップ
  3. Popupの中にMulti Input, Buttonをドラッグし、適当に配置して、Buttonの名前をTweetにしておきましょう。
  4. Popupは、範囲外をクリックすると消えてしまいます。その時は、Page：indexの右のindex(ここ、Element Treeと言います)の三角からPopupAを選択しましょう。
  5. ＋ボタンをクリック。Start/Edit Workflowをクリック。
  6. Click here to add actionでElement Action, Show, Element:PopupA
  7. Previewで確認してみましょう。+で表示であればOK
  8. Element TreeからPopupAを選択。TweetボタンをクリックしてStart/Edit Workflowをクリック。
  9. Click here to add actionでData(Things), Create New Thing…
  10. Type: Tweet, Set Another Field, Message =MultiInput A’s value
  11. クリアするために次のClick here to add actionでSearchからreset relevant inputs
  12. Popupを閉じるために次のClick here to add actionでElement Action, Hide Element: PopupA
  13. Tweetが現在4つまでしか表示されないので、Repeating Group TweetのSet fixed number of rowsを10くらいにしておきましょう。(チェック外してもいいですけど)

今日のまとめ

やばくないっすか？ コード一行も書いてません。

もちろん、margin, padding等基礎は知っておいた方が良いし、デザインのところ少し頭使うかもしれません(今日はそんなにデザインしてない…)

でも、処理のところはボタン配置して、クリックしてるだけです。

来週引き続き、機能していないLogin, SignUp(ユーザ管理)あたりからやっていこうと思います。