アプリ作成ワークショップ
プログラミングなしの「アプリ」作り
主催：Code for Kashiwa
共催：UDCK(柏の葉アーバンデザインセンター)
質問は随時受け付けます
以下のURLから質問するか、会場にいる方であれば手を挙げて質問
をお願いします。
https://app.sli.do/event/w50pxbfn
アプリを作るとは？
※資料公開にあたって個人名を含むキャプチャは削除しました
チャットルーム名を画面上部に表示する
メッセージは送信者の写真、名前、投稿時刻と一緒に表示する
メッセージは下から上に向かって古い
メッセージを表示する
※資料公開にあたって個人名を含むキャプチャは削除しました
メッセージは下から上に向かって古いメッセージを表示する
アプリ
メッセージは下から上に向かって古いメッセージを表示する
function Messages(props) {
...
}
アプリ
プログラミング（コーディング）
コンパイル、ビルド
ソースコード（コード）
Code(コード)
専用の言語（語、構文）を使って処理を記述したものをコードと呼びます。
コードが最終的にはアプリへと変換され、コンピュータ（パソコンやスマホ）で動作します。
Swift, Objective-C, Java, Kotlin, JavaScript ,,,
No Code
Codeがない、つまり特定の言語を使ってコードを書かずにアプリを作ること、あるいはそのためのソフトウェアのことです。
万能ではありません
なんでもできるわけではないです。
できることに制約はあります。
でも、ちょっとアプリを作ってみたい、というハードルを大きく
下げてくれます。
Glide
無料で使えるNo Codeソフトウェアです。
ブラウザだけでアプリを作ることができます。
Google Spreadsheetのデータからアプリを作ることができます。
Code for Kashiwaで利用実績があるため、今回利用します。
Glide入門編
データを地図に表示する
避難所マップ
災害発生時にどこに避難すればよいか知っていますか？
私は知りません。
柏市は避難所の一覧を公開しています。
そのデータを使って、避難所を地図に表示するアプリを作ってみましょう。
デモ
5分でアプリを作成する
）
データ をコピーします。ブラウザで開いてください。
Googleアカウントにログインしてない方は、ログインしたうえで
開いてください。
Googleアカウントがない方は、今この場でお作りするか、初級編が終わるまでしばしお待ちください。
以降の資料では、画面キャプチャを多用しています。
赤字は指示を意味します。
青字は画面や処理の説明です。指示ではありません。
名前は
「柏避難所一覧」
保存してください。
https://www.glideapps.com/ を開いてください。
スプレッドシートと連携するのでこちらを選択します
プライバシーポリシーと利用規約は各自で確認お願いします。
皆さんのGoogleアカウントになっているはずです。
Project （アプリ）を新規で作成します。
スマホorタブレット向けのアプリを選択します。
アプリ名を設定します。
メインの利用をスマホにします。
データをスプレッドシートから取得します。
柏避難所一覧 と入力します。
NEXT を押してスキップ
レイアウト画面
色は人によって違うことがあります
“General” が選択されていなければ、クリックして選択してください。
マップに変更します。
スプレッドシートのデータが
表示対象になっています。
なぜか山形にピンがあります。
なぜでしょうか？
番号 | 名称 | 所在地 | full-address | 備蓄倉庫 | 防災用簡易井戸 | 耐震性井戸付貯水 | 耐震性貯水槽 | 広域避難場所 | latlng |
1 | 柏市立柏高等学校 | 船戸山高野325-1 | 千葉県柏市船戸山高野325-1 | FALSE | FALSE | FALSE | FALSE | FALSE | 35.9241554,139.9399288 |
2 | 田中北小学校 | 大青田1536-1 | 千葉県柏市大青田1536-1 | TRUE | FALSE | FALSE | FALSE | FALSE | 35.9142944,139.9408631 |
3 | 十余二小学校 | 柏の葉4-4-1 | 千葉県柏市柏の葉4-4-1 | FALSE | TRUE | FALSE | FALSE | FALSE | 35.8973193,139.9332659 |
住所(full-address)に設定されているデータからGlideが自動で緯度経度を計算してマップに表示しています。無料版だと自動計算できるデータ数に制限があるのと、今回はそもそも変換結果に誤りがあるようです。
前もって計算して入力してあるlatlng列の値を利用して地図に表示します。
地図表示に使われているデータの
設定を編集します。
住所に使われるデータを変更します。
変換済の緯度経度を利用します。
アプリとして公開します。
公開範囲を設定します。
誰でも使えるようにします。
アプリへのリンクを取得します。
誰でも触れる状態に変わっています
URLをコピーしてブラウザでアクセスします。
スマホをお持ちの方はQRコードリーダーで読み込んでみてください。
ウェブアプリとネイティブアプリ
ウェブ経由で機能が提供されるアプリで、通常ブラウザで操作します。ブラウザさえあれば利用可能です。
ネイティブアプリは、iPhoneやAndroidスマホなど特定のOSにインストールされるアプリです。
Glide中級編
画像と位置情報を登録する
マッピングアプリ
Part 1で、街中を歩いて気になる場所を見つけました。
Glideを使って、気になった場所をさっとスマホで写真付きで共有するアプリを作ってみましょう。
名前を「マッピングアプリ」にします
Glide上にデータを保存します
タイトル | 説明 | 登録日 | 写真 | latlng |
道路破損 | 道路がひび割れていてつまずきそう。 | 2021/10/04 | xxx.jpg | 35.9241554,139.9399288 |
冠水スポット | 雨の日に2cmほどの水たまりになっていました。 | 2021/11/15 | yyy.jpg | 35.9142944,139.9408631 |
データ編集画面に切り替えます
不要なテーブルなので右クリックで消します
初期状態で存在するデータです。今回は使いません。
データを定義します。
Descriptionを編集します。
Dateを編集します。
Ownerを編集します。
位置情報を追加します。
レイアウト編集に戻ります。
STYLEをMapにしてDATAを設定します。
アプリユーザーにデータの追加を許可します。
項目ごとの入力方法を設定します。
タイトルを編集します。
説明を編集します。
登録日を編集します。
Ownerは不要なので削除します。
Formを追加します。
位置情報のフォームを追加します。
データがないので何も表示されていません。
データを登録してみましょう。
アプリとしては未完成です
あくまで説明のために割り切っているアプリです。
Glideの制約により、月に10件しか位置情報の登録ができません。
本格的にデータを登録するためには、有償版への切り替えが必要です。
データの登録者情報がないため、自分が登録したデータを直したい、消したい、といったことができません。
詳細情報の詳細を閲覧するページで写真が見れません。（これはぜひやってみてください）
また、公開用のURLは誰でも閲覧できるので、自宅周辺などの情報を不用意に登録するのは控えてください。
休憩
アイデアを出す
どんなアプリを作ってみたいか考えてみましょう。
何人か指名するので、当てられた人は内容を共有しましょう。
まとめ
解決したいことは何か？
家の近くの避難所がどこか知りたい
どう解決するか？
地図上に現在地と避難所の位置を表示する
どんなデータが必要か？
避難上の名前、住所、位置情報（緯度経度）
Code for Kashiwaでお待ちしています
「実際にアプリを作ってみたので誰かに見てほしい」
「こんな課題を解決するアプリを作れないか」
といったネタで盛り上がりたい方は、ぜひ一度 Code for Kashiwa の集まりにご参加ください。
月に一度、オンラインで定例会を行っています。
詳しくはこちらのページをご覧ください。