マガジンのカバー画像

NoCode 入門講座

12
本
運営しているクリエイター
濱口 まさみつ
濱口 まさみつ

濱口 まさみつ

Bubbleの基本的な使い方（その8）ードロップダウンボックスの作成と選択データの表示

Bubbleの基本的な使い方（その8）ードロップダウンボックスの作成と選択データの表示

今回はノーコードツールBubbleを使って、ドロップダウンメニューを作成します。
ドロップダウンボックスで選択した項目に応じて、「Repeating Group」で表示しているデータを変化させます。
Bubbleの基本的な使い方（その4）ー「Floating Group」 と「Repeating Group」を使ってみる　で簡単な人員リストを作成しました。
これに「性別」を追加して、ドロップダウン

もっとみる
濱口 まさみつ

濱口 まさみつ

Bubbleの基本的な使い方（その7）ープロフィール画面の作成

Bubbleの基本的な使い方（その7）ープロフィール画面の作成

今回はノーコードツールBubbleを使って、プロフィールの登録・編集画面を作成します。
indexページにプロフィール画像をアイコン風に表示し、画像をクリックしたらプロフィールの各項目を編集できるようにします。

プロフィール画面を作成する手順は下記のようになります。

①データベースにプロフィールの各項目を追加
（プロフィール画像・ニックネーム・自己紹介欄を追加）
②プロフィール編集画面の作成

もっとみる
濱口 まさみつ

濱口 まさみつ

Bubbleの基本的な使い方（その6）ーパスワードリセット画面の作成

Bubbleの基本的な使い方（その6）ーパスワードリセット画面の作成

今回はノーコードツールBubbleを使って、パスワードリセット画面を作成します。
パスワードを忘れた方向けに、パスワードを１度リセットして再設定します。新しいパスワードを設定してログインできるまでをゴールとします。

パスワードをリセットする手順は下記のようになります。

①ログイン画面の「パスワードを忘れた方はこちら＞」をクリック。
②「パスワードのリセット画面」が表示されるので、メアドを入力す

もっとみる
濱口 まさみつ

濱口 まさみつ

Bubbleの基本的な使い方（その5）ーサインアップとログイン画面の作成

Bubbleの基本的な使い方（その5）ーサインアップとログイン画面の作成

今回はノーコードツールBubbleを使って、サインアップ画面とログイン画面を作成します。
サインアップ画面でメールでのユーザー仮登録の後、登録されたメアドでログイン画面からログインできるまでをゴールとします。

サインアップしてログインするまでの手順は下記のようになります。

①サインアップ画面（ユーザー仮登録画面）からメアド、ニックネーム、パスワードを入力してもらい、「仮登録メールを送信」ボタン

もっとみる
濱口 まさみつ

濱口 まさみつ

デザイナー必見！ノーコードでWebサイトが作れる「STUDIO」を使ってみた！#1

デザイナー必見！ノーコードでWebサイトが作れる「STUDIO」を使ってみた！#1

これまで、いくつかのノーコードツールを紹介してきましたが、今回はデザインとの親和性が高いと評判の「STUDIO（スタジオ）」を使ってみたいと思います。

STUDIOとはSTUDIOは、コーディングなしでオリジナルデザインのサイトを作成・公開できる次世代WEBデザインツールです。海外製のノーコードツールが多い中、STUDIOは日本企業が作っているので、メニューやツールが日本語で使いやすく、動画チュ

もっとみる
濱口 まさみつ

濱口 まさみつ

Bubbleの基本的な使い方（その4）ー「Floating Group」 と「Repeating Group」を使ってみる

Bubbleの基本的な使い方（その4）ー「Floating Group」 と「Repeating Group」を使ってみる

今回はノーコードツールBubbleの「Floating Group」と「Repeating Group」について解説します。

「Floating Group」と「Repeating Group」とは？■「Floating Group」は画面を縦にスクロールした時にエレメントの位置を固定したい時に使用します。
■「Repeating Group」はデータベースやオプションセットに登録したエレメント

もっとみる
濱口 まさみつ

濱口 まさみつ

Bubbleの基本的な使い方（その3）ードロップダウンメニューとページ遷移

Bubbleの基本的な使い方（その3）ードロップダウンメニューとページ遷移

前回の記事ではテキスト・ボタンなどのエレメントをデザイン画面に配置しました。
今回はこれらのパーツを使って、ドロップダウンメニューを作ってみようと思います！

完成したページは下記のような動きをします。
indexページの「MENU」ボタンをクリックするとドロップダウンメニューが表示され、ドロップダウンメニュー内の「ページ2へ」ボタンをクリックするとリンク先のページが表示されます。
また、inde

もっとみる
濱口 まさみつ

濱口 まさみつ

Bubbleの基本的な使い方（その２）ーエレメント配置（テキスト・ボタン）

Bubbleの基本的な使い方（その２）ーエレメント配置（テキスト・ボタン）

前回の記事ではBubbleでよく使う画面の内容を説明しました。
今回はデザイン画面でのテキスト・ボタンなどのエレメントの配置方法などを解説します。

グリッドの表示エレメントを配置する前に、デザイン画面にグリッドを表示しておきましょう。上部メニューバーの「Grid & Borders」から「Show grid」にチェックを入れます。

基本的なエレメントの配置方法
Designタブの「UI Bui

もっとみる
濱口 まさみつ

濱口 まさみつ

Bubbleの基本的な使い方を徹底解説！（その1）

Bubbleの基本的な使い方を徹底解説！（その1）

みなさん、ノーコードツール使ってますか？
今回はノーコードツール「Bubble」の画面説明と基本的な使い方を解説します。Bubbleの画面は日本語化されておらず全編英語ですが、くじけず頑張りましょう！

BubbleのログインあらかじめBubbleにログインしておいてください。
サインアップの方法は「ノーコードでWebアプリ作成 ～Bubble編～」を参照してください。

ログイン後のホーム画面が

もっとみる
濱口 まさみつ

濱口 まさみつ

ノーコードでWebアプリ作成 ～glide編～

ノーコードでWebアプリ作成 ～glide編～



みなさんはプログラミングの知識不要でWebアプリが制作できる「ノーコードツール」はご存知でしょうか？
ノーコードツールを提供しているサービスはたくさんありますが、今回は「Glide（グライド）」というサービスを使って、簡単な社員管理Webアプリを作成しようと思います！

Glideとは

Glideは2018年にスタートしたノーコードツールのサービスです。
Googleスプレッドシートをデータ

もっとみる
濱口 まさみつ

濱口 まさみつ

ノーコードでWebアプリ作成 ～Bubble編～

ノーコードでWebアプリ作成 ～Bubble編～

Bubbleの概要NoCodeツールの中で最も有名で、利用者数が多いのがBubbleです。2015年にアメリカのBubble社よりリリースされ、2017年にはユーザー数は25万人を超え、今なお増え続けているようです。

一番の強みは、その自由度の高さにあります。パーツ配置、イベントアクション設定などのフロントエンドはもちろん、DB設計やAPI連携などバックエンドの構築も可能となっており、細かいとこ

もっとみる
濱口 まさみつ

濱口 まさみつ

プログラミング不要のノーコード（NoCode）について徹底解説！

プログラミング不要のノーコード（NoCode）について徹底解説！



ノーコード（NoCode）とは？

プログラミング言語の知識がなくても、Webサイトやアプリの作成ができるノーコード（NoCode）ツールが注目されています。
ノーコードは直感的な操作でさまざまなサービスを短期間で作成できるのが強みです。
できることが限られる一面もありますが、誰でもエンジニアになれる時代が来そうです！

なぜ今、ノーコードが注目されてるの？

近年日本ではIT人材が不足してお

もっとみる