---
title: 小学生でも作れる「子どもSOS」管理アプリ
tags: まちのデータ研究室
slideOptions:
theme: white
slideNumber: 'c/t'
center: false
transition: 'none'
keyboard: true
width: '93%'
height: '100%'
---

<style>
/* basic design */
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6,
.reveal section, .reveal table, .reveal li, .reveal blockquote, .reveal th, .reveal td, .reveal p {
font-family: 'Meiryo UI', 'Source Sans Pro', Helvetica, sans-serif, 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Sans', 'ヒラギノ角ゴシック', YuGothic, 'Yu Gothic';
text-align: left;
line-height: 1.8;
letter-spacing: normal;
text-shadow: none;
word-wrap: break-word;
color: #444;
}
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {font-weight: bold;}
.reveal h1, .reveal h2, .reveal h3 {color: #2980b9;}
.reveal th {background: #DDD;}
.reveal section img {background:none; border:none; box-shadow:none; max-width: 95%; max-height: 95%;}
.reveal blockquote {width: 90%; padding: 0.5vw 3.0vw;}
.reveal table {margin: 1.0vw auto;}
.reveal code {line-height: 1.2;}
.reveal p, .reveal li {padding: 0vw; margin: 0vw;}
.reveal .box {margin: -0.5vw 1.5vw 2.0vw -1.5vw; padding: 0.5vw 1.5vw 0.5vw 1.5vw; background: #EEE; border-radius: 1.5vw;}
/* table design */
.reveal table {background: #f5f5f5;}
.reveal th {background: #444; color: #fff;}
.reveal td {position: relative; transition: all 300ms;}
.reveal tbody:hover td { color: transparent; text-shadow: 0 0 3px #aaa;}
.reveal tbody:hover tr:hover td {color: #444; text-shadow: 0 1px 0 #fff;}
/* blockquote design */
.reveal blockquote {
width: 90%;
padding: 0.5vw 0 0.5vw 6.0vw;
font-style: italic;
background: #f5f5f5;
}
.reveal blockquote:before{
position: absolute;
top: 0.1vw;
left: 1vw;
content: "\f10d";
font-family: FontAwesome;
color: #2980b9;
font-size: 3.0vw;
}
/* font size */
.reveal h1 {font-size: 5.0vw;}
.reveal h2 {font-size: 4.0vw;}
.reveal h3 {font-size: 2.8vw;}
.reveal h4 {font-size: 2.6vw;}
.reveal h5 {font-size: 2.4vw;}
.reveal h6 {font-size: 2.2vw;}
.reveal section, .reveal table, .reveal li, .reveal blockquote, .reveal th, .reveal td, .reveal p {font-size: 2.2vw;}
.reveal code {font-size: 1.6vw;}
/* new color */
.red {color: #EE6557;}
.blue {color: #16A6B6;}
/* split slide */
#right {left: -18.33%; text-align: left; float: left; width: 50%; z-index: -10;}
#left {left: 31.25%; text-align: left; float: left; width: 50%; z-index: -10;}
</style>

<style>
/* specific design */
.reveal h1 {
margin: 0% -100%;
padding: 2% 100% 4% 100%;
color: #fff;
background: #c2e59c; /* fallback for old browsers */
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 200% 200%;
animation: Gradient 60s ease infinite;
}
@keyframes Gradient {
0% {background-position: 0% 50%}
50% {background-position: 100% 50%}
100% {background-position: 0% 50%}
}
.reveal h2 {
text-align: center;
margin: -5% -50% 2% -50%;
padding: 4% 10% 1% 10%;
color: #fff;
background: #c2e59c; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #64b3f4, #c2e59c); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #64b3f4, #c2e59c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
</style>

<!-- --------------------------------------------------------------------------------------- -->

# 小学生でも作れる「子どもSOS」情報管理アプリ
#### 2022年2月7日改訂

## このレシピはこんな方におすすめします
- コミュニティ推進協議会の運営メンバー
- 自治会の民生委員
- 小中学校の先生（校長先生、教頭先生など）

## 他のおすすめしたいレシピ
- 本レシピに関連するレシピは随時こちらに追加していきます。

---

## 目次
1. 課題の確認
1. 子どもSOS設置箇所の管理に関する課題

2. 地域課題解決のデザイン〜どんなアプリができるの？〜
1. 子どもSOS設置箇所を地域コミュニティ推進協議会や自治会関係者でシェアできるアプリを開発

3. 地域運営アプリを実現する
1. Google Appsheetにログインしよう
2. Google SpreadSheetを開こう
3. Google SpreadSheetにSOS設置場所の情報を格納するシートを作ろう
4. 作成したシートをAppSheetで読み込み、アプリを作成しよう
5. データのColumnを修正し、地図表示機能を有効にしよう
6. 試しにデータを入力してみよう
7. ユーザーを招待しよう
8. アプリをデプロイしてより多くの地域の方に使ってもらおう（有料版のみ可）

---

## 1.課題の確認
### 1.1 子どもSOS設置箇所の管理に関する課題
基礎自治体職員や地域コミュニティセンターの職員が、広範囲に渡るまちの情報である「子どもSOS設置箇所」を管理することは物理的・時間的に困難である。そのため、地域の民生委員に業務を分担したいが、情報の取りまとめや、設置箇所の更新の確認など、民生委員のボランティアに頼るには業務分担や管理にかかる負担が大きい。

---

## 2. 地域課題解決のデザイン〜どんなアプリができるの？〜
### 2.1 子どもSOS設置箇所を地域コミュニティ推進協議会や自治会関係者でシェアできるアプリを開発
上記の課題に対して、子どもSOS設置箇所を地域コミュニティや自治会で容易に共有できるアプリを開発し、アプリを用いた情報管理に移行することで負荷分散をおこなうだけでなく、情報を地図上で見ることで子どもSOS設置箇所の検討にデータを利用しやすくする。

---

## 3.地域運営アプリを実現する
### 3.1 Google AppSheetにログインしてみよう
#### ※ ビデオ再生画面を最大化してご覧ください。
<iframe width="560" height="315" src="https://www.youtube.com/embed/36TS610jjCw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

---

### 3.2 Google SpreadSheetを開こう
#### ※ ビデオ再生画面を最大化してご覧ください。
<iframe width="560" height="315" src="https://www.youtube.com/embed/rqxBjrNHNCU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

---

### 3.3 Google SpreadSheetにSOS設置場所の情報を格納するシートを作ろう
#### ※ ビデオ再生画面を最大化してご覧ください。
<iframe width="560" height="315" src="https://www.youtube.com/embed/TqxyEINAk84" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

---

### 3.4 作成したシートをAppSheetで読み込み、アプリを作成しよう
#### ※ ビデオ再生画面を最大化してご覧ください。
<iframe width="560" height="315" src="https://www.youtube.com/embed/H4hCAnOxVg4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

---

### 3.5 データのColumnを修正し、地図表示機能を有効にしよう
#### ※ ビデオ再生画面を最大化してご覧ください。
<iframe width="560" height="315" src="https://www.youtube.com/embed/6qze4T8LnSY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

---

### 3.6 試しにデータを入力してみよう
<iframe width="560" height="315" src="https://www.youtube.com/embed/TKPuKaVUp1Q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

---

### 3.7 試しにデータを入力してみよう
<iframe width="560" height="315" src="https://www.youtube.com/embed/bHZo4EmFjx0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

---

### 3.8 ユーザーを招待しよう
<iframe width="560" height="315" src="https://www.youtube.com/embed/aWCvE7K98l8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

---

## 3.9 より多くの地域の方に使ってもらおう
有料版にすると、不特定多数の方にアプリを公開したり、
いわゆる会員制のアプリとして公開することができます。
この方法については、機運が高まってきてからコンテンツとして公開します。