├── .gitignore
├── README.md
├── database.rules.json
├── docs
    ├── basic
    │   ├── for-basic-tutorial.md
    │   └── index.html
    ├── delete-project
    │   ├── delete-project.md
    │   └── index.html
    ├── firebase-tutorial.md
    ├── index.html
    ├── js_firebase_tutorial_for_github.pdf
    └── vscode_setup.pdf
├── firebase.json
├── firestore.indexes.json
├── firestore.rules
└── public
    ├── basic.html
    ├── sample.html
    └── src
        ├── basic.css
        ├── basic.js
        ├── main.js
        └── styles.css


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | firebase-debug.log*
 8 | firebase-debug.*.log*
 9 | 
10 | # Firebase cache
11 | .firebase/
12 | 
13 | # Firebase config
14 | 
15 | # Uncomment this if you'd like others to create their own Firebase project.
16 | # For a team working on the same Firebase project(s), it is recommended to leave
17 | # it commented so all members can deploy to the same project(s) in .firebaserc.
18 | # .firebaserc
19 | 
20 | # Runtime data
21 | pids
22 | *.pid
23 | *.seed
24 | *.pid.lock
25 | 
26 | # Directory for instrumented libs generated by jscoverage/JSCover
27 | lib-cov
28 | 
29 | # Coverage directory used by tools like istanbul
30 | coverage
31 | 
32 | # nyc test coverage
33 | .nyc_output
34 | 
35 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
36 | .grunt
37 | 
38 | # Bower dependency directory (https://bower.io/)
39 | bower_components
40 | 
41 | # node-waf configuration
42 | .lock-wscript
43 | 
44 | # Compiled binary addons (http://nodejs.org/api/addons.html)
45 | build/Release
46 | 
47 | # Dependency directories
48 | node_modules/
49 | 
50 | # Optional npm cache directory
51 | .npm
52 | 
53 | # Optional eslint cache
54 | .eslintcache
55 | 
56 | # Optional REPL history
57 | .node_repl_history
58 | 
59 | # Output of 'npm pack'
60 | *.tgz
61 | 
62 | # Yarn Integrity file
63 | .yarn-integrity
64 | 
65 | # dotenv environment variables file
66 | .env
67 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # firebase_tutorial
 2 | 
 3 | このレポジトリには Web技術（HTML,CSS,JavaScript）で実現された ToDo アプリが配置されており、Firebase の機能を用いてデプロイ（インターネット上に公開）する事ができます。
 4 | 
 5 | Firebase とは何かを知りたい方は [イベント開催時の資料](docs/js_firebase_tutorial_for_github.pdf) も併せてご確認ください。
 6 | 
 7 | ## チュートリアル
 8 | チュートリアルは下記のリンクをクリックして始めましょう
 9 | 
10 | **チュートリアル開始**：https://hackujp.github.io/firebase_tutorial/
11 | 
12 | <a href="https://hackujp.github.io/firebase_tutorial/"><img src="https://imgur.com/WWrMo12.png" width="300px"></a>
13 | 
14 | - Markdown形式：[docs/firebase-tutorial.md](docs/firebase-tutorial.md)
15 | 
16 | ## 初学者向け資料
17 | チュートリアルは終わったが、
18 | HTMLやJSをほとんどさわったことがない方向けの資料
19 | 
20 | **資料スライドはこちら**：https://hackujp.github.io/firebase_tutorial/basic/index.html
21 | 
22 | ## 利用し終わったFirebaseプロジェクトについて
23 | 本チュートリアルで扱ったプロジェクトはそのままだと公開されたままになってしまいます。
24 | 不要になったタイミングで削除することを忘れないようにしましょう。
25 | 
26 | **資料スライドはこちら**：https://hackujp.github.io/firebase_tutorial/delete-project/index.html
27 | 


--------------------------------------------------------------------------------
/database.rules.json:
--------------------------------------------------------------------------------
1 | {
2 |   /* Visit https://firebase.google.com/docs/database/security to learn more about security rules. */
3 |   "rules": {
4 |     ".read": false,
5 |     ".write": false
6 |   }
7 | }


--------------------------------------------------------------------------------
/docs/basic/for-basic-tutorial.md:
--------------------------------------------------------------------------------
  1 | class: center,middle
  2 | # HTMLとJSをさわってみよう！
  3 | 
  4 | スライド表示の場合、キーボードの**左右**で操作できます
  5 | 
  6 | ---
  7 | ## この資料について
  8 | 
  9 | * この資料はHTMLやJavaScriptをさわったことがない方向けの内容になっています
 10 | * この資料の前段階として、firebaseでサンプルのTodoアプリをデプロイまでできていることを前提としています。
 11 | 
 12 | この資料で扱うファイルは以下の３つのファイルになります。
 13 | `docs`フォルダの中にありますので、確認しましょう。
 14 | （他にもファイルはあります。今回は使わないですが、削除などはせず無視してください）
 15 | 
 16 | ```bash
 17 | public
 18 | ├── basic.html（HTMLファイル。ページ内の配置を決めるファイル）
 19 | └── src
 20 |     ├── basic.css（CSSファイル。色やレイアウトなど、ページの見た目を調整するファイル）
 21 |     └── basic.js（JavaScriptファイル。ページに動きをつけたい時に使う）
 22 | ```
 23 | 
 24 | ---
 25 | ## まずはじめに
 26 | 「basic.html」ファイルの名前を「index.html」に変更します。
 27 | 
 28 | （すでにindex.htmlファイルがある場合は別の名前に変更するか、削除しましょう）
 29 | 
 30 | そして、firebase serveコマンドを実行し、http://localhost:5000 にアクセスしてみましょう。
 31 | ```shell
 32 | $ firebase serve
 33 | ```
 34 | ↓のようなシンプルなTodoリストが表示されるはずです。これで準備完了です。
 35 | 
 36 | ![](https://imgur.com/yA5jbKh.png)
 37 | 
 38 | ---
 39 | ## HTMLファイルとJSファイルとCSSファイル
 40 | 今回扱うファイルを改めて確認しておきましょう。
 41 | ```bash
 42 | public
 43 | ├── index.html（元々basic.htmlだったもの。HTMLファイル。ページ内の配置を決めるファイル）
 44 | └── src
 45 |     ├── basic.css（CSSファイル。色やレイアウトなど、ページの見た目を調整するファイル）
 46 |     └── basic.js（JavaScriptファイル。ページに動きをつけたい時に使う）
 47 | ```
 48 | 次のページから、それぞれのファイルを少しづつ変えながら変化を確かめるための方法を紹介します
 49 | 
 50 | ---
 51 | ## 変えてみること一覧
 52 | ##### HTMLファイルを変えてみる
 53 | * h1やh2タグを使ってみる
 54 | * ボタンを追加してみる
 55 | * tableタグを使ってみる
 56 | * 画像を追加してみる
 57 | * inputタグを変化させてみる
 58 | 
 59 | ##### CSSファイルを変えてみる
 60 | * 文字の色を変えてみる
 61 | * 文字の大きさを変えてみる
 62 | * 文字のフォントを変えてみる
 63 | 
 64 | ##### JSファイルを変えてみる
 65 | * ボタンを押すとアラートが出るようにしてみる
 66 | 
 67 | ---
 68 | ## h1やh2タグを使ってみる
 69 | HTMLファイルの下記の場所(20行目あたり)に行を追加して h1 タグを使ってページのタイトルを作ってみましょう。
 70 | 
 71 | h1 タグにはタグの始まりと終わりがあり、`<h1>`で始まり、`</h1>`で終わります
 72 | 
 73 | タイトルの部分は自分の好きな文章にすると良いです
 74 | ```bash
 75 | <body>
 76 |   <h1>タイトル</h1>
 77 |   <input type="text" placeholder="Task Name" id='taskNameForAdd'>
 78 | ```
 79 | ページに反映されたら、今度は h2 タグも使ってみましょう。使い方は h1 の時と同じです。
 80 | 
 81 | 先ほどの行の下に新たに行を追加して書きましょう。
 82 | ```bash
 83 | <h1>タイトル</h1>
 84 | <h2>サブタイトル</h2>
 85 | ```
 86 | ▶︎ 変更はページに反映されましたか？h1とh2では何が変わりましたか？
 87 | 
 88 | ---
 89 | ## ボタンを追加してみる
 90 | ボタンを追加してみましょう。buttonタグを使います。
 91 | 先ほどの行の下に新たに行を足して、下記のように書いてください
 92 | 
 93 | 「ボタンの名前」の部分は自由に変更しましょう。
 94 | ```bash
 95 | <button>ボタンの名前</button>
 96 | ```
 97 | ▶︎ ボタンは表示されましたか？ボタンの名前を変えると何が変わりましたか？
 98 | 
 99 | #### 補足事項
100 | 
101 | 今回紹介するhtmlタグは、`<body>`タグの内側（`<body>`から`</body>`までの間）に書きましょう。<br>
102 | bodyタグの内側に書かれたタグがページ内に表示されます。
103 | 
104 | ---
105 | ## tableタグを使ってみる
106 | tableタグを使ってみましょう。先ほどと同じく新たに行を足して、下記のように書いてください
107 | ```bash
108 | <table border="1">
109 |   <tr>
110 |     <th>果物</th>
111 |     <th>値段</th>
112 |   </tr>
113 |   <tr>
114 |     <td>みかん</td>
115 |     <td>100円</td>
116 |   </tr>
117 | </table>
118 | ```
119 | ページに表が表示されたと思います。
120 | `<tr>`は表の行、`<th>,<td>`は表の列を示しています。
121 | `<th>`は表の見出しに使い、`<td>`は表のデータに使います。
122 | 
123 | ▶︎ 表に手を加え、カレンダーや時間割表などを作ってみましょう。
124 | 
125 | ---
126 | ## 画像を追加してみる
127 | 画像を埋め込みたい場合はimgタグを使います。
128 | 画像ファイルは、インターネット上の画像を読み込むやり方と、PC上のファイルを読み込むやり方があります。
129 | 
130 | 今回はPC上のファイルを読み込む形でやってみます。
131 | srcフォルダの中に画像ファイルを配置してください。JPGやPNG形式が使えます。
132 | 
133 | ※画像は自由ですが、著作権に気をつけましょう。
134 | 数枚程度画像を使う場合は[いらすとや](https://www.irasutoya.com/)などが便利ですね。
135 | 
136 | ```bash
137 | public
138 | └── src
139 |     └── sample.jpg
140 | ```
141 | 
142 | ファイルを配置できたら、HTMLにimgタグを追加しましょう。ファイル名は実際のファイル名と合わせてください。
143 | ```bash
144 | <img src="src/sample.jpg">
145 | ```
146 | 
147 | ▶︎ うまく表示されましたか？画像の大きさも調整できます。調べてみましょう。
148 | 
149 | （背景画像を変更することもできます。興味があれば調べてみましょう。）
150 | ---
151 | ## inputタグを変化させてみる
152 | inputタグはユーザーからの入力を受け取るためのタグです。
153 | 様々な使い方があるので試してみましょう。
154 | 
155 | Todoアプリの入力欄として、下記のようにinputタグが使われていると思います。確認してください。
156 | 
157 | ```bash
158 |   <input type="text" placeholder="Task Name" id='taskNameForAdd'>
159 | ```
160 | このタグの中の `type="text"` となっている部分を `type="date"` と変えてみましょう。
161 | 
162 | 入力が日付を入力するタイプに変更になると思います。
163 | 
164 | この状態でもTodoアプリとして機能します。Addボタンから追加してみましょう。
165 | 
166 | ▶︎ typeをcolorやtimeに変えてみましょう。どのようなデータとして保存されていますか？
167 | 
168 | 
169 | 他にもいろいろなinputの種類があります。興味があればこちらのリンクを見てください。
170 | 
171 | [inputタグについてのドキュメント](https://developer.mozilla.org/ja/docs/Web/HTML/Element/input)
172 | 
173 | ---
174 | ## 文字の色を変えてみる
175 | 今度はCSSファイルを変更してみましょう。
176 | srcフォルダ内のbasic.cssを開いてください。
177 | 初めは何も書かれていないファイルだと思います。
178 | 
179 | 下記のように入力してください。
180 | ```bash
181 | body {
182 |   color: blue;
183 | }
184 | ```
185 | 入力やボタン以外の部分の文字の色が変わると思います。
186 | 
187 | ▶︎ blueの部分を他の色に変えてみましょう。
188 | 
189 | 文字の色は英語の名前で指定できるほか、カラーコードと呼ばれる形式で指定もできます。調べてみましょう。
190 | 
191 | ---
192 | ## 文字の大きさを変えてみる
193 | 文字の大きさも変えてみましょう。h1やh2などでも文字の大きさを変えられますが、
194 | CSSを使うと、より細かく調整できます。
195 | 
196 | 先ほどのbody{}の中にfont-sizeの指定を入れてみましょう。colorは変更しなくて構いません。
197 | ```bash
198 | body {
199 |   color: blue;
200 |   font-size: 80%;
201 | }
202 | ```
203 | フォントの大きさが変わりましたか？
204 | 次は下記の表記をCSSファイルの一番下に追加してみましょう。
205 | ```bash
206 | h1 {
207 |   font-size: 200%;
208 | }
209 | ```
210 | ▶︎ どの部分の文字の大きさが変わりましたか？他の場所の文字の大きさも変えてみましょう。
211 | 
212 | ---
213 | ## 文字のフォントを変えてみる
214 | フォントを変えてみましょう。
215 | 
216 | CSSファイル内のbodyの指定の中にfont-familyを追加しましょう。
217 | 
218 | ```bash
219 | body {
220 |   color: blue;
221 |   font-size: 80%;
222 |   font-family: serif;
223 | }
224 | ```
225 | フォントは変わりましたか？
226 | 
227 | ▶︎ 他にも指定できるフォントがあります。調べてみましょう。
228 | 
229 | サンセリフ体とセリフ体の違いはなんでしょうか？
230 | 
231 | ---
232 | ## ボタンを押すとアラートが出るようにしてみる
233 | 最後にJSファイルも少し触ってみましょう。
234 | 
235 | basic.jsファイルの一番下の行に下記のように追加してください。
236 | ```bash
237 | function sayHello() {
238 |   alert("こんにちは！");
239 | }
240 | ```
241 | 
242 | また、htmlファイルには下記のようにボタンを追加してください。
243 | ```bash
244 | <button onclick="sayHello()">こんにちは</button>
245 | ```
246 | 追加したボタンを押してみましょう。画面に何が表示されましたか？
247 | 
248 | ▶︎ 文章などを自分で変えてみましょう。また、新たな関数を追加し、別のメッセージが出るようにしてみましょう。
249 | 
250 | ---
251 | 
252 | layout:false
253 | 
254 | # おわりに
255 | 
256 | 資料は以上です。おつかれさまでした。
257 | 
258 | 本資料ではHTML、CSS、JavaScriptの基本的な部分を体験しました。
259 | 
260 | 今回のシンプルなページはとりあえず動くページで試してみたいという場合に最適だと思いますので、
261 | 
262 | 興味があれば、どんどん調べて、試してみてください。
263 | 


--------------------------------------------------------------------------------
/docs/basic/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <title>HTMLやJSをさわってみるチュートリアル</title>
 6 |   <meta charset="utf-8">
 7 |   <style>
 8 |     @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
 9 |     
10 |     body {font-family: 'Noto Sans JP', sans-serif;}
11 | 
12 |     .remark-code,
13 |     .remark-inline-code {font-family: 'Ubuntu Mono';}
14 | 
15 |     /* Two-column layouts */
16 |     .left-column {width: 49%;float: left;}
17 |     .right-column {width: 49%;float: right;}
18 |     .left-column-33 {width: 33%;float: left;}
19 |     .right-column-66 {width: 66%;float: right;}
20 |     .left-column-66 {width: 66%;float: left;}
21 |     .right-column-33 {width: 33%;float: right;}
22 |     .right-column~p {clear: both;}
23 |     .right-column~ul {clear: both;}
24 |   </style>
25 | </head>
26 | 
27 | <body>
28 |   <textarea id="source">
29 |     </textarea>
30 |   <script src="https://remarkjs.com/downloads/remark-latest.min.js">
31 |   </script>
32 |   <script>
33 |     remark.macros.scale = function (percentage) {
34 |       var url = this;
35 |       return '<img src="' + url + '" style="width: ' + percentage + '" />';
36 |       // Usage:
37 |       //   ![:scale 50%](image.jpg)
38 |       // Outputs:
39 |       //   <img src="image.jpg" style="width: 50%" />
40 |     };
41 |     var slideshow = remark.create({
42 |       sourceUrl: 'for-basic-tutorial.md',
43 |       ratio: "16:9"
44 |     });
45 |   </script>
46 | </body>
47 | 
48 | </html>
49 | 


--------------------------------------------------------------------------------
/docs/delete-project/delete-project.md:
--------------------------------------------------------------------------------
 1 | class: center,middle
 2 | # Firebaseプロジェクトの削除の仕方
 3 | 
 4 | スライド表示の場合、キーボードの**左右**で操作できます
 5 | 
 6 | ---
 7 | ## この資料について
 8 | 
 9 | * この資料では、Firebaseチュートリアルを使ってWebサイトを作成した方向けの資料です。
10 | * 公開されたWebサイトはそのまま放置するとリンクが有効のままになるため、不要になったタイミングで非公開する必要があります。
11 | 
12 | ---
13 | ## アプリの非公開、削除
14 | 
15 | ```shell
16 | $ firebase hosting:disable
17 | ```
18 | 
19 | こちらを実行後、URLを叩いてNot Foundが表示されていれば成功です。
20 | しばらく使わない際は忘れずに実行しておきましょう。
21 | 
22 | ---
23 | ## DBの削除方法
24 | 
25 | ```shell
26 | $ firebase firestore:delete
27 | ```
28 | 
29 | こちらのコマンドを実行するとDB（firestore）のデータを削除できます。
30 | 
31 | ---
32 | ## プロジェクトの削除
33 | 
34 | [FirebaseのWeb](https://console.firebase.google.com/)上で削除を行います。
35 | 1. 削除するプロジェクトを選択
36 | 2. プロジェクト概要の横にある歯車マークを選択
37 | 3. プロジェクトの設定を選択
38 | 4. ページ下部にあるプロジェクトを削除を選択
39 | 5. チェックボックスを選択後、プロジェクトを削除を選択
40 | 
41 | こちらの手順でプロジェクトの完全削除が行えます。
42 | ---
43 | 
44 | ### 以上です
45 | 
46 | これでプロジェクトの削除が完了しました。お疲れさまでした。
47 | 


--------------------------------------------------------------------------------
/docs/delete-project/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <title>Firebaseプロジェクトの削除の仕方</title>
 6 |   <meta charset="utf-8">
 7 |   <style>
 8 |     @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
 9 |     
10 |     body {font-family: 'Noto Sans JP', sans-serif;}
11 | 
12 |     .remark-code,
13 |     .remark-inline-code {font-family: 'Ubuntu Mono';}
14 | 
15 |     /* Two-column layouts */
16 |     .left-column {width: 49%;float: left;}
17 |     .right-column {width: 49%;float: right;}
18 |     .left-column-33 {width: 33%;float: left;}
19 |     .right-column-66 {width: 66%;float: right;}
20 |     .left-column-66 {width: 66%;float: left;}
21 |     .right-column-33 {width: 33%;float: right;}
22 |     .right-column~p {clear: both;}
23 |     .right-column~ul {clear: both;}
24 |   </style>
25 | </head>
26 | 
27 | <body>
28 |   <textarea id="source">
29 |     </textarea>
30 |   <script src="https://remarkjs.com/downloads/remark-latest.min.js">
31 |   </script>
32 |   <script>
33 |     remark.macros.scale = function (percentage) {
34 |       var url = this;
35 |       return '<img src="' + url + '" style="width: ' + percentage + '" />';
36 |       // Usage:
37 |       //   ![:scale 50%](image.jpg)
38 |       // Outputs:
39 |       //   <img src="image.jpg" style="width: 50%" />
40 |     };
41 |     var slideshow = remark.create({
42 |       sourceUrl: 'delete-project.md',
43 |       ratio: "16:9"
44 |     });
45 |   </script>
46 | </body>
47 | 
48 | </html>
49 | 


--------------------------------------------------------------------------------
/docs/firebase-tutorial.md:
--------------------------------------------------------------------------------
  1 | class: center,middle
  2 | # Firebase を用いて ToDo アプリ を動かそう！
  3 | 
  4 | スライド表示の場合、キーボードの**左右**で操作できます
  5 | 
  6 | ---
  7 | 
  8 | ## アプリ画面イメージ
  9 | 
 10 | .left-column[PC]
 11 | 
 12 | .right-column[スマホ]
 13 | 
 14 | .left-column[![:scale 90%](https://i.imgur.com/rULzRnp.png)]
 15 | 
 16 | .right-column[![:scale 40%](https://i.imgur.com/JRmyXfI.png)]
 17 | ---
 18 | ## ファイル構成
 19 | 
 20 | ```bash
 21 | firebase-tutorial
 22 | ├── README.md
 23 | ├── database.rules.json
 24 | ├── firebase.json
 25 | ├── firestore.indexes.json
 26 | ├── firestore.rules
 27 | └── public
 28 |     └── sample.html
 29 | ```
 30 | ---
 31 | ## 注意事項
 32 | 
 33 | * ブラウザからソースコードをコピペされると他の人からも操作できる状態になっているので、自由にデータベースを更新できてしまいます。そのまま公開（他人にリンクを教えるなど）はしないで下さい
 34 | * 公開したい場合は Firebase Authentication の機能を利用して、別途ユーザー作成、権限管理をするなどの認証機能を導入しましょう。
 35 | * Firebase はクレジットカードを登録せずに利用できます。無料枠を使い切った場合はサーバなどの稼働が止まってしまうので注意しましょう。
 36 | * ただし、本格的にサービスを公開する場合など、上位のプランを選択した場合には **課金が発生します**。詳しくは [こちら](https://firebase.google.com/pricing/) をご確認下さい。
 37 | * （HackU 関連イベント開催期間中のみ）このレポジトリに関する不明点や疑問があれば、イベント開催時のSlack等でサポーターに質問してください。
 38 | ---
 39 | ## 前提
 40 | 
 41 | * ここでは、Firebase の初期設定の仕方と、サンプルコードを動かします。エディタ（テキスト編集ソフト）や Git に関する説明は行いません、また、コードを編集することも行いません。
 42 | * 使用するエディターは自由ですが、質問対応等の場合に環境があっていることが望ましいため、特別こだわりがなければ**VSCode**を推奨します。
 43 | * Macでの操作を前提としております。Firebaseの操作等は基本的にはどのOSでも変わらないため、Windowsでも開発可能ですがここでの説明ではカバーしておりません。 [こちら](./vscode_setup.pdf) を参考に環境構築 の設定をした上で、Mac と同じ手順で進めましょう
 44 | * 2021/09/14 現在の情報です。Firebase に関する最新の情報は [公式ページ](https://firebase.google.com/) をご確認下さい
 45 | ---
 46 | ## 主な利用技術/ツール
 47 | 
 48 | * Firebase CLI:
 49 |  * ターミナルからFirebaseの設定や操作を行うためのコマンドラインツール
 50 | * Firebase Hosting:
 51 |  * Webサイトを提供できる機能
 52 | * Firebase Cloud Firestore:
 53 |  * データベース(NoSQL)
 54 | ---
 55 | ## このチュートリアル完了までの目安時間
 56 | 
 57 | * 1時間程度
 58 | 
 59 | ## 検証済みの環境
 60 | 
 61 | * OSX Catalina 10.15.5
 62 | * Firebase CLI 8.6.0
 63 | * jQuery 3.5.1
 64 | * firebasejs 6.2.0
 65 | ---
 66 | layout:true
 67 | ## Firebaseにログインし、プロジェクトを作る
 68 | ---
 69 | 
 70 |  https://firebase.google.com/?hl=ja へアクセスし、「コンソールへ移動」を選択します。
 71 | 
 72 | ![:scale 60%](https://i.imgur.com/Zu9TB70.png)
 73 | ---
 74 | 
 75 | Googleアカウントでログインします。
 76 | 
 77 | ※学校等の発行したGoogleアカウントの場合、<br>Firebaseを利用できない場合があります。
 78 | その場合は個人のアカウントでログインし直してください。
 79 | 
 80 | ![:scale 60%](https://i.imgur.com/NWhMIMa.png)
 81 | ---
 82 | 
 83 | 再度、「コンソールへ移動」を選択します。
 84 | 
 85 | ![:scale 60%](https://i.imgur.com/Zu9TB70.png)
 86 | ---
 87 | 
 88 | プロジェクトを作成します。
 89 | 
 90 | ![:scale 70%](https://i.imgur.com/fZSohD6.png)
 91 | ---
 92 | 
 93 | プロジェクト名を入力し、Firebaseの規約に同意します。
 94 | 
 95 | プロジェクト名は任意の文字列(英数字)でOKです。図の例：test-myapplication
 96 | 
 97 | ![:scale 80%](https://i.imgur.com/3rma457.png)
 98 | ---
 99 | 
100 | Google アナリティクスを有効化します。（必須ではありません）
101 | 
102 | アナリティクス用のアカウントを求められた場合はDefaultのアカウントを選びましょう。
103 | 
104 | .left-column[![:scale 110%](https://i.imgur.com/o5Gy6Ql.png)]
105 | 
106 | .right-column[![:scale 110%](https://i.imgur.com/boGZvYI.png)]
107 | 
108 | ---
109 | 
110 | これでプロジェクトの準備は完了です
111 | 
112 | ![:scale 40%](https://i.imgur.com/SRuQ83p.png)
113 | 
114 | ---
115 | layout:true
116 | ## データベース（Firestore）の作成
117 | ---
118 | 
119 | 次に、Firestore の機能を使ってデータベースを作成します。
120 | 
121 | まずは、[こちら](https://console.firebase.google.com/u/0/) から作成したプロジェクトを選択します。
122 | 
123 | ![:scale 50%](https://i.imgur.com/OEYNshc.png)
124 | ---
125 | 
126 | 左のメニューから「Firestore Database」（Cloud Firestore）を選択して下さい。
127 | 
128 | ![:scale 70%](https://i.imgur.com/G0rI1CC.png)
129 | ---
130 | 
131 | このような画面になったら「データベースの作成」を行います。
132 | 
133 | ![:scale 50%](https://i.imgur.com/jMRDDjJ.png)
134 | ---
135 | 
136 | 「本番環境モードで開始」を選択します。
137 | 
138 | ![:scale 60%](https://i.imgur.com/eL7xc6K.png)
139 | ---
140 | 
141 | ロケーションを選択します。（`asia-northeast1`(東京) がオススメ）
142 | 
143 | ![:scale 45%](https://i.imgur.com/ga03igC.png)
144 | 
145 | 「有効にする」を押した後、数十秒ほど待って、画面が移行すればここの作業は完了です。
146 | 
147 | [Cloud Firestore](https://firebase.google.com/docs/firestore/quickstart?authuser=1) についての説明はこちらから確認できます。
148 | 
149 | ---
150 | layout:true
151 | ## Firebase CLI を利用した Deploy
152 | ---
153 | 
154 | 左のメニューの「プロジェクトの概要」をクリックし、
155 | 
156 | 「開始するにはアプリを追加してください」と書かれた箇所のウェブアイコン 「`</>`」 をクリックしてください。
157 | ![:scale 65%](https://i.imgur.com/10KzHVS.png)
158 | 
159 | ---
160 | 
161 | アプリのニックネームを入力し、Firebase Hostingの設定をします。
162 | その後、「アプリの登録」をクリック
163 | 
164 | ![:scale 70%](https://i.imgur.com/4gXKQJT.png)
165 | 
166 | ---
167 | 
168 | 「次へ」を選択します。
169 | 
170 | 「Firebase SDKの追加」の作業は今回は不要です。
171 | 
172 | （用意されているコードに既にSDKが追加されているため）
173 | 
174 | ![:scale 60%](https://i.imgur.com/oAyZQYN.png)
175 | 
176 | ---
177 | 
178 | 「次へ」を選択します。
179 | 
180 | ※Firebase CLIのインストールはこの後行います。
181 | 
182 | ![:scale 70%](https://i.imgur.com/vv6uNDV.png)
183 | 
184 | ---
185 | 
186 | ※先ほどまでのfirebaseの画面はそのままにしておき、別のタブやウインドウで作業してください。
187 | 
188 | [GitHubのページ](https://github.com/hackujp/firebase_tutorial)から
189 | `[Code]`メニューの中の「Download ZIP」でダウンロードをし、zipファイルの展開をしましょう。
190 | 
191 | ![:scale 60%](https://imgur.com/iGIvRx3.png)
192 | 
193 | ---
194 | 
195 | Firebase CLI をインストールします。
196 | 
197 | https://firebase.google.com/docs/cli?hl=ja にアクセスしてください。
198 | 
199 | ご自分の環境に合わせてページの指示に従ってインストールしてください。
200 | 
201 | 基本的に、下記の選択をお勧めします
202 | - Windowsの場合は「スタンドアロンバイナリ」
203 | - Macの場合は「自動インストールスクリプト」
204 | 
205 | firebase login は後のスライドで行うのでここではしなくてOKです
206 | 
207 | ※npmを使える方はnpmでインストールする形でも大丈夫です。
208 | 
209 | ※Windowsの場合、ダウンロードに使うブラウザはChromeなど、Edge以外を推奨します
210 | 
211 | ※Windowsの場合、exeファイル起動時に「WindowsによってPCが保護されました」という画面が出る場合があります。この表示が出たら「詳細情報」をクリックした後「実行」をクリックするとFirebaseCLIが起動できます
212 | ---
213 | 
214 | ここからは画面上の指示に従って、デプロイ（Web上へのアップロード）を実施します。
215 | 
216 | ![:scale 70%](https://i.imgur.com/cRoAjA2.png)
217 | 
218 | ---
219 | 
220 | Firebase CLI でログインを実施します。下記のコマンドを入力して実行してください。
221 | 
222 | その後自動で開かれるブラウザでFirebaseのGoogleアカウントへのアクセスを許可してください。
223 | 
224 | ```shell
225 | $ firebase login
226 | ```
227 | 
228 | ![:scale 85%](https://i.imgur.com/Au8iv8V.png)
229 | 
230 | ※Windows の場合FirebaseCLIを起動したタイミングでログインが実施される場合があります。
231 | その場合は上記のコマンドはスキップし、ブラウザでの操作に進んでください。
232 | 
233 | ※Windowsの場合、セキュリティファイアウォールの画面が開く場合があります。その場合は許可して次に進んでください。
234 | 
235 | ---
236 | 
237 | 先ほどGitHubからzipファイルをダウンロードし、展開したフォルダにターミナル上で移動します。
238 | 
239 | 展開される場所は人によって違うので、自分の場合に合わせて調整してください
240 | 
241 | Windowsの場合の例
242 | ```bash
243 | cd C:¥Users¥ユーザー名¥Downloads¥firebase_tutorial-master¥firebase_tutorial-master
244 | ```
245 | Macの場合
246 | ```bash
247 | cd /Users/ユーザー名/Downloads/firebase_tutorial-master
248 | ```
249 | 
250 | `ls`あるいは`dir`コマンドで下のようなファイルが表示されていればOKです
251 | ```bash
252 | ❯ ls
253 | README.md               firebase.json           public/
254 | database.rules.json     firestore.indexes.json
255 | docs/                   firestore.rules
256 | ```
257 | ---
258 | 
259 | `firebase init` コマンドを実行して、いくつか質問をされるので space で回答します。
260 | 
261 | ```shell
262 | $ firebase init
263 | ```
264 | 「Are you ready to proceed?」はそのままEnter
265 | 
266 | キーボードの上下でカーソルを移動させ、
267 | *Firestore: Configure security rules and indexes files for Firestore* と
268 | *Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys*
269 | の **2つ** を space で選択して、Enter を押下します。
270 | 
271 | ![:scale 50%](https://imgur.com/Rz5tisf.png)
272 | 
273 | ---
274 | 
275 | ![:scale 90%](https://i.imgur.com/4gh1FRo.png)
276 | 
277 | 次の質問 `Please select an option:` には `Use an existing project` を Enter で選択します。
278 | 
279 | ![](https://i.imgur.com/qXP3LOp.png)
280 | ---
281 | 
282 | `Select a default Firebase project for this directory: ` には、先程作成したプロジェクト名を上下キーで合わせ Enter で選択しましょう。（以前に Firebase を別の用途で使用したことがある人は複数提示されます）
283 | 
284 | ![](https://i.imgur.com/ItQqmno.png)
285 | ---
286 | 
287 | Firestore Setup と出てくる
288 | 
289 | `What file should be used for Firestore Rules? ` には何も選択せず Enter
290 | 
291 | ![](https://i.imgur.com/2bcRbi9.png)
292 | 
293 | `File firestore.rules already exists. Do you want to overwrite it with the Firestore Rules from the Firebase Console?` は `N` を入力して Enter
294 | 
295 | ![](https://i.imgur.com/B7qTwM9.png)
296 |  
297 | `What file should be used for Firestore indexes?` は何も選択せず Enter
298 | 
299 | ![](https://i.imgur.com/KfOh26o.png)
300 | 
301 | ---
302 | 
303 | `File firestore.indexes.json already exists. Do you want to overwrite it with the Firestore Indexes from the Firebase Console?` は `N` を入力して Enter
304 | 
305 | ![](https://i.imgur.com/nXTAzOV.png)
306 | 
307 | `? What do you want to use as your public directory?` は何も選択せず Enter
308 | 
309 | ![](https://i.imgur.com/jzibUS5.png)
310 | 
311 | `Configure as a single-page app (rewrite all urls to /index.html)? (y/N) ` は `y` を入力して Enter
312 | 
313 | ![](https://i.imgur.com/9GZGqjV.png)
314 | 
315 | `Set up automatic builds and deploys with GitHub` は何も選択せず Enter
316 | 
317 | ---
318 | 
319 | ここまで実施できたら、`firebase serve` で このレポジトリのプログラムを動かしてみましょう。
320 | 
321 | ```shell
322 | $ firebase serve
323 | ```
324 | 
325 | 下記のようなコマンドの実行結果となるので、表示された http://localhost:5000 をブラウザで開いてみましょう。
326 | 
327 | ![](https://i.imgur.com/Xo7o2iu.png)
328 | 
329 | ---
330 | 
331 | 下記のように表示されれば成功です。(Firebaseを初期化した際に作成されるテストページ)
332 | 
333 | このページは実行しているパソコンでしか見ることができないページなので、まだ自分しか見られない状態です。
334 | 
335 | ![:scale 70%](https://i.imgur.com/G9JK7Ot.png)
336 | 
337 | ---
338 | 
339 | `firebase serve`はターミナルを選択した状態で、`Control + C` (Windowsの場合は `Ctrl + C`) で停止します。
340 | 
341 | 動作が確認できたら、Firebase Hosting の機能を利用して、クラウド（インターネット）上に Deploy します。
342 | 
343 | ```shell
344 | $ firebase deploy
345 | ```
346 | 
347 | Deploy 後、ターミナルに表示された「Hosting URL: 」のURLか、
348 | ブラウザの下記で表示されるリンクからアクセスします。
349 | 
350 | ![](https://i.imgur.com/QyLuqWO.png)
351 | 
352 | ---
353 | 
354 | 先ほどと同じように下記のように表示されれば成功です。
355 | 
356 | これで、このページはインターネット上に公開され、他の人からも閲覧できる状態になりました。
357 | 
358 | ![:scale 50%](https://i.imgur.com/G9JK7Ot.png)
359 | 
360 | `firebase serve` ではローカル上（自分のPC上）でプログラムを実行させているのに対し、`firebase deploy` ではクラウド上に Deploy してインターネット上に公開させているということに注意しましょう。
361 | 
362 | ---
363 | layout:true
364 | ## HTML の編集が反映されることを確認する
365 | ---
366 | 
367 | 次に、自分のプロジェクトで `public/index.html` をエディタ（テキスト編集ソフト）などで開き、下記箇所を変更します。
368 | 
369 | `public/index.html`
370 | 
371 | 変更前
372 | ```htmlembedded=34
373 | <div id="message">
374 |   <h2>Welcome</h2>
375 |   <h1>Firebase Hosting Setup Complete</h1> <!-- この行を編集 -->
376 |   <p>You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!</p>
377 |   <a target="_blank" href="https://firebase.google.com/docs/hosting/">Open Hosting Documentation</a>
378 | </div>
379 | <p id="load">Firebase SDK Loading&hellip;</p>
380 | ```
381 | ---
382 | 
383 | 変更後
384 | 
385 | ```htmlembedded=34
386 | <div id="message">
387 |   <h2>Welcome</h2>
388 |   <h1>テスト</h1><!-- テストという文章に変えた。 -->
389 |   <p>You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!</p>
390 |   <a target="_blank" href="https://firebase.google.com/docs/hosting/">Open Hosting Documentation</a>
391 | </div>
392 | <p id="load">Firebase SDK Loading&hellip;</p>
393 | ```
394 | 
395 | 変更が完了したら、firebase serveで確認をします
396 | 
397 | ```shell
398 | $ firebase serve
399 | ```
400 | ---
401 | 
402 | #### ※変更の反映のさせ方について、
403 | firebase serveコマンドは実行したままでファイルの変更を行って構いません。<br>
404 | 
405 | ファイルの変更ができたらページをリロードします。
406 | このとき、前回のページの情報（キャッシュ）が残っていると、うまく反映されない場合があります。
407 | 
408 | 画面の更新を行うときはキャッシュを削除したリロード（スーパーリロード）を行うようにしましょう。
409 | 
410 | Mac
411 | ```bash
412 | Command + Shift +R
413 | ```
414 | Windows
415 | ```bash
416 | Ctrl + Shift +R
417 | ```
418 | ---
419 | 
420 | 下記のようにWelcomeの文字列がテストに変更されていれば完了です。
421 | 
422 | （自分の好きな文章に変えて試してもOKです）
423 | 
424 | ![:scale 70%](https://i.imgur.com/1C4bh8m.png)
425 | 
426 | ---
427 | layout:true
428 | ## ToDo アプリ を動かしてみる
429 | ---
430 | 
431 | いよいよTodoアプリを動かしてみましょう。
432 | 
433 | 既存の index.html をバックアップしたうえで、sample.htmlを index.html に置き換えます。
434 | 
435 | ```shell
436 | $ mv public/index.html public/_index.html 
437 | $ cp public/sample.html public/index.html
438 | ```
439 | ※コマンドでの変更でなくとも、publicフォルダの中のファイル名が、「index.html」→「_index.html」に、「sample.html」→「index.html」に変更できていればOKです。
440 | 
441 | ![:scale 20%](https://imgur.com/5VAAAuN.png)
442 | 
443 | ---
444 | 
445 | ローカルで確認します。
446 | 
447 | ```shell
448 | $ firebase serve
449 | ```
450 | 
451 | `firebase serve`ができたら、先ほどと同じ URL をブラウザから開き、下図のような表示になるかを確認します。[こちら](https://www.atmarkit.co.jp/ait/articles/1403/20/news050.html) の方法を用いて、PC上でもスマホでの挙動をエミュレートして確認する事ができます。
452 | 
453 | 
454 | .left-column[PC]
455 | 
456 | .right-column[スマホ]
457 | 
458 | .left-column[![:scale 90%](https://i.imgur.com/rULzRnp.png)]
459 | 
460 | .right-column[![:scale 45%](https://i.imgur.com/JRmyXfI.png)]
461 | 
462 | ---
463 | 
464 | うまく動くことを確認できたら、deployをして公開しましょう
465 | ```shell
466 | $ firebase deploy
467 | ```
468 | 
469 | ### これでFirebaseチュートリアルは終了です！お疲れさまでした
470 | 
471 | *実際にどう動いているか、という点についてはソースコードにコメントをつけて簡単に説明を加えています。[Firebase のドキュメント](https://firebase.google.com/docs/) と合わせてご確認下さい。*
472 | 
473 | 余力があれば、`firebase serve`で確認しながら、少しずつ自分でコードにアレンジを加えてみてみると良い学習になると思います！
474 | 
475 | ---
476 | layout:false
477 | ## その他、Firebase の機能例
478 | 
479 | * [Firebaseの各機能を3行で説明する](https://qiita.com/shibukk/items/4a015c5b3296563ac19d)
480 | 
481 | ## 参考リンク　
482 | 
483 | * [Google の Firebase サンプル](https://firebase.google.com/docs/samples?authuser=1#web)
484 | * [Firebase入門 フリマアプリを作りながら、認証・Firestore・Cloud Functionsの使い方を学ぼう！](https://employment.en-japan.com/engineerhub/entry/2019/06/07/103000)
485 | 


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <title>Firebaseチュートリアル</title>
 6 |   <meta charset="utf-8">
 7 |   <style>
 8 |     @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
 9 |     
10 |     body {font-family: 'Noto Sans JP', sans-serif;}
11 | 
12 |     .remark-code,
13 |     .remark-inline-code {font-family: 'Ubuntu Mono';}
14 | 
15 |     /* Two-column layouts */
16 |     .left-column {width: 49%;float: left;}
17 |     .right-column {width: 49%;float: right;}
18 |     .left-column-33 {width: 33%;float: left;}
19 |     .right-column-66 {width: 66%;float: right;}
20 |     .left-column-66 {width: 66%;float: left;}
21 |     .right-column-33 {width: 33%;float: right;}
22 |     .right-column~p {clear: both;}
23 |     .right-column~ul {clear: both;}
24 |   </style>
25 | </head>
26 | 
27 | <body>
28 |   <textarea id="source">
29 |     </textarea>
30 |   <script src="https://remarkjs.com/downloads/remark-latest.min.js">
31 |   </script>
32 |   <script>
33 |     remark.macros.scale = function (percentage) {
34 |       var url = this;
35 |       return '<img src="' + url + '" style="width: ' + percentage + '" />';
36 |       // Usage:
37 |       //   ![:scale 50%](image.jpg)
38 |       // Outputs:
39 |       //   <img src="image.jpg" style="width: 50%" />
40 |     };
41 |     var slideshow = remark.create({
42 |       sourceUrl: 'firebase-tutorial.md',
43 |       ratio: "16:9"
44 |     });
45 |   </script>
46 | </body>
47 | 
48 | </html>
49 | 


--------------------------------------------------------------------------------
/docs/js_firebase_tutorial_for_github.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hackujp/firebase_tutorial/def77ab54b0f8c69611b6ed0003111fee9cdb1c4/docs/js_firebase_tutorial_for_github.pdf


--------------------------------------------------------------------------------
/docs/vscode_setup.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hackujp/firebase_tutorial/def77ab54b0f8c69611b6ed0003111fee9cdb1c4/docs/vscode_setup.pdf


--------------------------------------------------------------------------------
/firebase.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "hosting": {
 3 |     "public": "public",
 4 |     "ignore": [
 5 |       "firebase.json",
 6 |       "**/.*",
 7 |       "**/node_modules/**"
 8 |     ]
 9 |   },
10 |   "firestore": {
11 |     "rules": "firestore.rules",
12 |     "indexes": "firestore.indexes.json"
13 |   },
14 |   "emulators": {
15 |     "firestore": {
16 |       "port": 8080
17 |     },
18 |     "hosting": {
19 |       "port": 5000
20 |     },
21 |     "ui": {
22 |       "enabled": true
23 |     }
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/firestore.indexes.json:
--------------------------------------------------------------------------------
1 | {
2 |   "indexes": [],
3 |   "fieldOverrides": []
4 | }
5 | 


--------------------------------------------------------------------------------
/firestore.rules:
--------------------------------------------------------------------------------
1 | rules_version = '2';
2 | service cloud.firestore {
3 |   match /databases/{database}/documents {
4 |     match /{document=**} {
5 |       allow read, write: if true;
6 |     }
7 |   }
8 | }


--------------------------------------------------------------------------------
/public/basic.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <!--  -->
 6 |   <script src="/__/firebase/6.2.0/firebase-app.js"></script>
 7 |   <script src="/__/firebase/6.2.0/firebase-firestore.js"></script>
 8 |   <script src="/__/firebase/init.js"></script>
 9 | 
10 |   <!-- Bootstrap の css をインポートする。参考 -->
11 |   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
12 |   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
13 | 
14 |   <script defer src="src/basic.js"></script>
15 |   <link rel="stylesheet" type="text/css" href="src/basic.css">
16 | 
17 |   <title>Todoリスト</title>
18 | </head>
19 | 
20 | <body>
21 |   <input type="text" placeholder="Task Name" id='taskNameForAdd'>
22 |   <button id="addBtn" onclick="add()">Add</button>
23 |   <!-- タスクをリスト表示するための場所 -->
24 |   <div id="list"></div>
25 |   <p id="sample">ここから下に要素を追加してみてください。</p>
26 | </body>
27 | 
28 | </html>
29 | 


--------------------------------------------------------------------------------
/public/sample.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |   <!-- モバイルブラウザでのレイアウトを制御する。参考 https://qiita.com/ryounagaoka/items/045b2808a5ed43f96607 -->
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
 7 | 
 8 |   <!-- 検索エンジンに引っかからないようにする。参考 https://ameblo.jp/masa30201/entry-11564231810.html -->
 9 |   <meta name="Keywords" content="norobot">
10 | 
11 |   <!--  -->
12 |   <script src="/__/firebase/6.2.0/firebase-app.js"></script>
13 |   <script src="/__/firebase/6.2.0/firebase-firestore.js"></script>
14 |   <script src="/__/firebase/init.js"></script>
15 | 
16 |   <!-- Bootstrap の css をインポートする。参考 https://getbootstrap.jp/docs/4.5/getting-started/introduction/　-->
17 |   <!-- CSS only -->
18 |   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
19 |   <!-- jQuery, Bootstrap の JSライブラリ をロードする。参考 https://getbootstrap.jp/docs/4.5/getting-started/introduction/ -->
20 |   <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
21 |   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
22 |   <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
23 | 
24 |   <script src="src/main.js"></script>
25 |   <link rel="stylesheet" type="text/css" href="src/styles.css">
26 | 
27 |   <!-- android のブラウザを全画面表示にさせる -->
28 |   <meta name="mobile-web-app-capable" content="yes">
29 | 
30 |   <!-- iOS のブラウザを全画面表示にさせる -->
31 |   <meta name="apple-mobile-web-app-capable" content="yes">
32 | 
33 |   <title>Snippet Tool</title>
34 | 
35 | </head>
36 | 
37 | <body>
38 |   <!-- ナビゲーションバーの配置。参考 https://getbootstrap.jp/docs/4.5/components/navbar/ -->
39 |   <nav class="navbar navbar-dark bg-primary">
40 |     <span class="navbar-brand mb-0 h1">ToDo App</span>
41 |   </nav>
42 |   <!-- container はグリッドシステムを活用するために必要な定義。参考 https://getbootstrap.jp/docs/4.5/layout/overview/#containers -->
43 |   <div class="container">
44 |     <div class="row mx-auto">
45 |       <div class="col">
46 |         <form class="form-inline">
47 |           <!-- グリッドシステムを利用した幅の定義。参考 https://getbootstrap.jp/docs/4.5/layout/grid/ -->
48 |           <div class="form-group md-6 sm-5 mt-4 mb-4 mr-2 col-xs-10">
49 |             <input type="text" class="form-control" placeholder="Task Name" id='taskNameForAdd'>
50 |           </div>
51 |           <div class="form-group md-6 sm-5 mt-4 mb-4 mr-2">
52 |             <button type="button" class="btn btn-primary" id="addBtn" onclick="add()">Add</button>
53 |           </div>
54 |         </form>
55 |       </div>
56 |     </div>
57 | 
58 |     <!-- タスクをリスト表示するための場所 -->
59 |     <div id="list"></div>
60 | 
61 |     <!-- Modalの作成。参考 https://getbootstrap.jp/docs/4.5/components/modal/ -->
62 |     <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
63 |       <div class="modal-dialog" role="document">
64 |         <div class="modal-content">
65 |           <div class="modal-header">
66 |             <h5 class="modal-title" id="modalTitleLabel">Edit</h5>
67 |             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
68 |               <span aria-hidden="true">&times;</span>
69 |             </button>
70 |           </div>
71 |           <div class="modal-body">
72 |             <div class="form-group mx-sm-3 mb-2">
73 |               <input type="hidden" id="docId"> <!-- 選択したタスクIDを管理するための部分。画面上では非表示になる。 -->
74 |               <input type="text" id="taskNameForEdit" placeholder="Task Name">
75 |               <p id='warningMsg'>本当に削除してもよろしいですか？</p>
76 |             </div>
77 |           </div>
78 |           <div class="modal-footer">
79 |             <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
80 |             <button type="button" id="updateBtn" class="btn btn-success" onclick="update()">Update</button>
81 |             <button type="button" id="deleteBtn" class="btn btn-danger" onclick="del()">Delete</button>
82 |           </div>
83 |         </div>
84 |       </div>
85 |     </div>
86 |   </div>
87 | </body>
88 | 
89 | </html>
90 | 


--------------------------------------------------------------------------------
/public/src/basic.css:
--------------------------------------------------------------------------------
1 | #sample{
2 |     color: orange
3 | }


--------------------------------------------------------------------------------
/public/src/basic.js:
--------------------------------------------------------------------------------
 1 | let db = firebase.firestore(); // データベースに関する機能の取得
 2 | 
 3 | // 保持されている全てのタスクデータを取得し、表示する
 4 | function getAll() {
 5 |   let collection = db.collection("tasks").orderBy('create_at', 'asc'); // 作成された順にデータを並べてタスクデータをデータベースから取得する
 6 |   collection.get().then((querySnapshot) => { // 取得したデータを読み取る
 7 |     document.getElementById("list").innerHTML = ""
 8 |     num = 0;
 9 |     querySnapshot.forEach((doc) => { // 取得したデータそれぞれ1つづつのデータに対して
10 |       // リスト表示するための箇所（ <div id="list"></div> ）にタスクを最下端に追加
11 |       document.getElementById("list").innerHTML += `
12 |       <div>${doc.data()['name']}<button onclick="del('${doc.id}')">削除</button></div>
13 |       `
14 |       num++;
15 |     });
16 |   });
17 | }
18 | getAll(); // 保持されている全てのタスクデータ取得の初期実行（これがないと、画面を開いたときに何も表示されない）
19 | 
20 | // タスクを追加する
21 | function add() {
22 |   let taskNameForAdd = document.getElementById("taskNameForAdd").value; // inputbox に入力された値を取得する
23 |   if (taskNameForAdd == "") return; // もし、inputbox が空だった場合は関数を終了する
24 | 
25 |   db.collection("tasks").add({ // データベースにタスクを追加する
26 |       name: taskNameForAdd, // 入力されたタスク名
27 |       create_at: new Date() // 現在時刻
28 |     }).then(function (docRef) { // 成功した場合に実行される箇所
29 |       getAll(); // 保持されている全てのタスクデータを取得し、表示する
30 |       document.getElementById("taskNameForAdd").value = ""; // inputbox に入力された値を空にする
31 |       console.log("Document written with ID: ", docRef.id);
32 |     })
33 |     .catch(function (error) { // 失敗した場合に実行される箇所
34 |       console.error("Error adding document: ", error);
35 |     });
36 | }
37 | 
38 | // タスクを削除する
39 | function del(docId) {
40 |   console.log(docId)
41 |   db.collection("tasks").doc(docId).delete() // $('#docId').val() で削除する対象データのIDを取得し、そのデータに対して削除を行う
42 |     .then(function () { // 成功した場合に実行される箇所
43 |       console.log("Document successfully deleted!");
44 |       getAll(); // 保持されている全てのタスクデータを取得し、表示する
45 |     }).catch(function (error) { // 失敗した場合に実行される箇所
46 |       console.error("Error removing document: ", error);
47 |     });
48 | }
49 | 


--------------------------------------------------------------------------------
/public/src/main.js:
--------------------------------------------------------------------------------
  1 | let db = firebase.firestore(); // データベースに関する機能の取得
  2 | 
  3 | // 保持されている全てのタスクデータを取得し、表示する
  4 | function getAll() {
  5 |   let collection = db.collection("tasks").orderBy('create_at', 'asc'); // 作成された順にデータを並べてタスクデータをデータベースから取得する
  6 |   collection.get().then((querySnapshot) => { // 取得したデータを読み取る
  7 |     $('#list').text('') // タスクをリスト表示するための箇所（<div id="list"></div>）を空文字に設定（初期化）
  8 | 
  9 |     // 変数の初期化
 10 |     outputAll = [];
 11 |     num = 0;
 12 | 
 13 |     querySnapshot.forEach((doc) => { // 取得したデータそれぞれ1つづつのデータに対して
 14 |       let status = "";
 15 |       if (doc.data()['done']) {
 16 |         status = "checked"
 17 |       } // タスクが完了の状態になっているかの判定
 18 |       // リスト表示するための箇所（ <div id="list"></div> ）にタスクを最下端に追加
 19 |       $('#list').append(' \
 20 |   <div class="row mx-auto"> \
 21 |     <div class="col-sm"> \
 22 |       <form class="form-inline"> \
 23 |         <div class="custom-control custom-checkbox"> \
 24 |           <input value="' + doc.id + '" type="checkbox" class="custom-control-input" id="customCheck' + num +
 25 |         '" ' + status + ' onclick="check(this);"> \
 26 |           <label class="custom-control-label" for="customCheck' + num + '"> \
 27 |             <p>' + doc.data()['name'] + '\
 28 |               [<a value="' + doc.id + '" data-toggle="modal" data-target="#editModal" onclick="showEditModal(this)"> <span class="fontBlue">edit</span> </a>] \
 29 |               [<a value="' + doc.id + '" data-toggle="modal" data-target="#editModal" onclick="showDeleteModal(this)"> <span class="fontRed">x</span> </a>] \
 30 |             </p> \
 31 |           </label> \
 32 |         </div> \
 33 |       </form> \
 34 |     </div> \
 35 |   </div>');
 36 |       num++;
 37 |     });
 38 |   });
 39 | }
 40 | getAll(); // 保持されている全てのタスクデータ取得の初期実行（これがないと、画面を開いたときに何も表示されない）
 41 | 
 42 | // タスクを追加する
 43 | function add() {
 44 |   let taskNameForAdd = $("#taskNameForAdd").val(); // inputbox に入力された値を取得する
 45 |   if (taskNameForAdd == "") return; // もし、inputbox が空だった場合は関数を終了する
 46 | 
 47 |   db.collection("tasks").add({ // データベースにタスクを追加する
 48 |       name: taskNameForAdd, // 入力されたタスク名
 49 |       done: false, // タスクの完了状態は最初は未の状態のため false を指定
 50 |       create_at: new Date() // 現在時刻
 51 |     }).then(function (docRef) { // 成功した場合に実行される箇所
 52 |       getAll(); // 保持されている全てのタスクデータを取得し、表示する
 53 |       $("#taskNameForAdd").val(''); // inputbox に入力された値を空にする
 54 |       console.log("Document written with ID: ", docRef.id);
 55 |     })
 56 |     .catch(function (error) { // 失敗した場合に実行される箇所
 57 |       console.error("Error adding document: ", error);
 58 |     });
 59 | }
 60 | 
 61 | // タスクを削除する
 62 | function del() {
 63 |   db.collection("tasks").doc($('#docId').val()).delete() // $('#docId').val() で削除する対象データのIDを取得し、そのデータに対して削除を行う
 64 |     .then(function () { // 成功した場合に実行される箇所
 65 |       console.log("Document successfully deleted!");
 66 |       $('#list').text = "" // タスクをリスト表示するための箇所（<div id="list"></div>）を空文字に設定（初期化）
 67 |       $("#editModal").modal('toggle'); // Modal の表示を OFF にする
 68 |       getAll(); // 保持されている全てのタスクデータを取得し、表示する
 69 |     }).catch(function (error) { // 失敗した場合に実行される箇所
 70 |       console.error("Error removing document: ", error);
 71 |     });
 72 | }
 73 | 
 74 | // タスクを更新する
 75 | function update() {
 76 |   let taskNameForEdit = $("#taskNameForEdit").val(); // inputbox に入力された値を取得する
 77 |   if (taskNameForEdit == "") return; //　もし、inputbox が空だった場合は関数を終了する
 78 | 
 79 |   collection = db.collection("tasks").doc($('#docId').val())
 80 |     .update({ // $('#docId').val() で削除する対象データのIDを取得し、そのデータに対して更新を行う
 81 |       name: taskNameForEdit, // 入力されたタスク名
 82 |     }).then(function () { // 成功した場合に実行される箇所
 83 |       console.log("Document successfully updated!");
 84 |       $('#list').text = "" // タスクをリスト表示するための箇所（<div id="list"></div>）を空文字に設定（初期化）
 85 |       $("#editModal").modal('toggle'); // Modal の表示を OFF にする
 86 |       getAll(); // 保持されている全てのタスクデータを取得し、表示する
 87 |       $("#taskNameForEdit").val(''); // inputbox に入力された値を空にする
 88 |     }).catch(function (error) { // 失敗した場合に実行される箇所
 89 |       console.error("Error removing document: ", error);
 90 |     });
 91 | }
 92 | 
 93 | // タスクの完了、未完了を制御する
 94 | function check(elm) {
 95 |   db.collection("tasks").doc(elm.getAttribute('value'))
 96 |     .update({ // elm.getAttribute('value') で削除する対象データのIDを取得し、そのデータに対して更新を行う
 97 |       done: elm.checked, // 対象要素のチェック状態
 98 |     }).then(function () { // 成功した場合に実行される箇所
 99 |       console.log("Document successfully updated!");
100 |     }).catch(function (error) { // 失敗した場合に実行される箇所
101 |       console.error("Error removing document: ", error);
102 |     });
103 | }
104 | 
105 | // タスク更新のためのモーダルを表示する
106 | function showEditModal(elm) {
107 |   $('#docId').val(elm.getAttribute('value')); // 選択したタスクデータのID を <input type="hidden" id="docId"> に設定
108 |   $('#updateBtn').css("display", "inline"); // 更新用のボタンを表示する
109 |   $('#deleteBtn').css("display", "none"); // 削除用のボタンを非表示にする
110 |   $('#taskNameForEdit').css("display", "inline"); // タスク名を入力するための inputbox を表示する
111 |   $('#warningMsg').css("display", "none"); // 削除用の警告メッセージを非表示にする
112 | }
113 | 
114 | // タスク削除のためのモーダルを表示する
115 | function showDeleteModal(elm) {
116 |   $('#docId').val(elm.getAttribute('value')); // 選択したタスクデータのID を <input type="hidden" id="docId"> に設定
117 |   $('#updateBtn').css("display", "none"); // 更新用のボタンを非表示にする
118 |   $('#deleteBtn').css("display", "inline"); // 削除用のボタンを表示する
119 |   $('#taskNameForEdit').css("display", "none"); // タスク名を入力するための inputbox を非表示にする
120 |   $('#warningMsg').css("display", "inline"); // 削除用の警告メッセージを表示する
121 | }
122 | 


--------------------------------------------------------------------------------
/public/src/styles.css:
--------------------------------------------------------------------------------
1 |  /*  文字の色を指定 */
2 |  .fontBlue {
3 |    color: blue;
4 |  }
5 | 
6 |  .fontRed {
7 |    color: red;
8 |  }
9 | 


--------------------------------------------------------------------------------