├── .babelrc
├── .editorconfig
├── .firebaserc
├── .gitignore
├── README.md
├── dist
    └── index.html
├── docs
    ├── cdn.png
    ├── project.png
    └── support.png
├── firebase.json
├── package-lock.json
├── package.json
├── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   ├── Editor.vue
    │   └── Home.vue
    ├── main.js
    ├── router.js
    ├── scss
    │   ├── github-markdown.css
    │   └── style.scss
    └── views
    │   ├── Terms.vue
    │   └── Top.vue
└── webpack.config.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     ["env", { "modules": false }],
4 |     "stage-3"
5 |   ]
6 | }
7 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.firebaserc:
--------------------------------------------------------------------------------
1 | {
2 |   "projects": {
3 |     "default": "mymarkdown"
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | dist/*
 4 | !dist/index.html
 5 | npm-debug.log
 6 | yarn-error.log
 7 | 
 8 | # Editor directories and files
 9 | .idea
10 | *.suo
11 | *.ntvs*
12 | *.njsproj
13 | *.sln
14 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Vue.js と Firebase で作るミニ Web サービス サポートリポジトリ
  2 | 
  3 | こちらのリポジトリは **Vue.js と Firebase で作るミニ Web サービス ~ 初めてのサーバーレスシングルページアプリケーション ~** のサポートリポジトリです。
  4 | 
  5 | 書籍を進める上で、実際のコードがどうなっているかの参考にしていただければと思います。
  6 | 
  7 | コードの状態は書籍を写経して進めた場合に、書籍完了時の状態になっております。
  8 | 
  9 | # サンプルサイトについて
 10 | 
 11 | 最終的にどんな Web サービスが作れるか、というサンプルを公開しています。
 12 | 
 13 | サンプルサービスは本書の内容に加えて、見た目や使いやすさを向上させるために多少手を加えていますが、機能面ではあまり差はありません。
 14 | 
 15 | ## MyMarkdown
 16 | 
 17 | https://mymarkdown.firebaseapp.com
 18 | 
 19 | サンプルサイトのコードについてはブランチを別にしており、[こちらの Add-design ブランチ](https://github.com/nabettu/mymarkdown/tree/feature/add-design)となっております。
 20 | 
 21 | # Firebase v6 からの変更点
 22 | 
 23 | Firebase SDK の version 6 (2019 年 5 月ごろから変更)からは書籍 P19 で html にコピーするコードの内容が変更されています。これまでは必要のなかった変更点が増えていますので、以下の対応をお願いします。
 24 | 
 25 | ※バージョン番号は都度変更があるため、管理画面やドキュメントで表示されているものを利用してください。
 26 | 
 27 | ## SDK の分割読み込み対応
 28 | 
 29 | 次が Firebase の管理画面で貼り付けるように指示されているコードです。
 30 | 
 31 | ```
 32 | <!-- The core Firebase JS SDK is always required and must be listed first -->
 33 | <script src="/__/firebase/6.1.0/firebase-app.js"></script>
 34 | 
 35 | <!-- TODO: Add SDKs for Firebase products that you want to use
 36 |      https://firebase.google.com/docs/web/setup#reserved-urls -->
 37 | 
 38 | <!-- Initialize Firebase -->
 39 | <script src="/__/firebase/init.js"></script>
 40 | ```
 41 | 
 42 | こちらのコードは以前と比べて認証やデータベースを利用するための SDK を別々に読み込む形式と変更されており、そのほうがファイルを読み込む容量が減るため公式では推奨されています。また、firebase-app.js 自体もサイトに配置し、プロジェクトの初期化も別途 init.js というファイルを自分で作成して実行する形式となっています。
 43 | 
 44 | しかし今回は入門として手間の少ない CDN から読み込み、かつ初期化もまとめて行う方式に変更します。
 45 | 
 46 | 手順としてまず管理画面で今回用のプロジェクトを選択後にプロジェクトの設定をクリックします。
 47 | 
 48 | ![プロジェクトの設定](./docs/project.png)
 49 | 
 50 | その後、スクロールし下部のマイアプリの部分で「Firebase SDK snippet」のチェックボックスで「CDN」を選択します。
 51 | 
 52 | ![CDNの選択](./docs/cdn.png)
 53 | 
 54 | すると下記のようなコードが表示されますので、コピーし index.html で **はじめに指示されていたコードを消して差し替えます。**
 55 | 
 56 | ```
 57 | <!-- The core Firebase JS SDK is always required and must be listed first -->
 58 | <script src="https://www.gstatic.com/firebasejs/6.1.0/firebase-app.js"></script>
 59 | 
 60 | <!-- TODO: Add SDKs for Firebase products that you want to use
 61 |      https://firebase.google.com/docs/web/setup#config-web-app -->
 62 | 
 63 | <script>
 64 |   // Your web app's Firebase configuration
 65 |   var firebaseConfig = {
 66 |     apiKey: "AIzaSyBAfdUWsyvv_h216knnWlA_Tfk4dzEFa5g",
 67 |     authDomain: "mymarkdown2-68e37.firebaseapp.com",
 68 |     databaseURL: "https://mymarkdown2-68e37.firebaseio.com",
 69 |     projectId: "mymarkdown2-68e37",
 70 |     storageBucket: "mymarkdown2-68e37.appspot.com",
 71 |     messagingSenderId: "199213394357",
 72 |     appId: "1:199213394357:web:039c52f5ee2e30cb"
 73 |   };
 74 |   // Initialize Firebase
 75 |   firebase.initializeApp(firebaseConfig);
 76 | </script>
 77 | ```
 78 | 
 79 | こちらのコードを利用すると、Firebase プロジェクトの初期化をはじめに行うようになっています。ただ、これだけだと認証や DB へのアクセスを行う SDK の読み込みが足りません。
 80 | 
 81 | そこで、次の公式ドキュメントのページの中程から必要なスニペットをコピーしてきます。
 82 | 
 83 | https://firebase.google.com/docs/web/setup
 84 | 
 85 | > CDN から、必要な個々のコンポーネントをインクルードします
 86 | 
 87 | の次の行から始まるコードから、以下のコードをコピーします。
 88 | 
 89 | ```
 90 | <script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-auth.js"></script>
 91 | <script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-database.js"></script>
 92 | ```
 93 | 
 94 | Firestore を利用する場合には次のコードもコピーし、それぞれ index.html に追加します。
 95 | [こちらのリポジトリで、書籍完了後に Firestore へ移行するための PDF を無料配布しています](https://github.com/nabettu/firestore-manual)
 96 | 
 97 | ```
 98 | <script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-firestore.js"></script>
 99 | ```
100 | 
101 | 追加する場所は firebase-app.js を読み込んだあと、初期化をする前の部分で、最終的な index.html は以下のようになります。
102 | 
103 | ```
104 | <!DOCTYPE html>
105 | <html lang="en">
106 |   <head>
107 |     <meta charset="utf-8" />
108 |     <title>mymarkdown</title>
109 |   </head>
110 |   <body>
111 |     <div id="app"></div>
112 |     <script src="https://www.gstatic.com/firebasejs/6.1.0/firebase-app.js"></script>
113 | 
114 |     <script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-auth.js"></script>
115 |     <script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-database.js"></script>
116 |     <script src="https://www.gstatic.com/firebasejs/5.9.1/firebase-firestore.js"></script>
117 |     <script>
118 |       // ご自身のFirebaseプロジェクトの設定値
119 |       var firebaseConfig = {
120 |         apiKey: "AIzaSyBAfdUWsyvv_h216knnWlA_Tfk4dzEFa5g",
121 |         authDomain: "mymarkdown2-68e37.firebaseapp.com",
122 |         databaseURL: "https://mymarkdown2-68e37.firebaseio.com",
123 |         projectId: "mymarkdown2-68e37",
124 |         storageBucket: "mymarkdown2-68e37.appspot.com",
125 |         messagingSenderId: "199213394357",
126 |         appId: "1:199213394357:web:039c52f5ee2e30cb"
127 |       };
128 |       // Initialize Firebase
129 |       firebase.initializeApp(firebaseConfig);
130 |     </script>
131 |     <script src="./build.js"></script>
132 |   </body>
133 | </html>
134 | ```
135 | 
136 | こちらをご参照になって引き続き開発を進めていただければと思います。
137 | 
138 | ## 認証の際に、サポートメールの設定が必要
139 | 
140 | ログイン機能の実装の際に、認証画面でエラーが発生した場合にはサポートメールの設定がされていないからかもしれません。
141 | 
142 | 書籍執筆時のバージョンでは Google ログイン設定画面で設定できましたが、バージョンが変わってからはプロジェクト設定画面に移行したようです。
143 | 
144 | ![サポートメールの設定](./docs/support.png)
145 | 
146 | こちらでメールアドレスの設定を行ってください。
147 | 
148 | ご自身のログインしているメールアドレス以外を設定したい場合は、ユーザーと権限タブで追加したいメールアドレスをメンバーとして追加すれば、選択出来るようになります。
149 | 
150 | # 正誤表及び改訂版での変更点
151 | 
152 | - P.26〜 App.vue のパスが間違っている
153 | 
154 |   - 正しいパスは /src/App.vue になります。
155 | 
156 | - P38 記述ミス
157 | 
158 |   - ６行目の div に class="editorWrapper" を追加
159 | 
160 |   - Style 部分の記述追加及び変更(同じクラスのものは変更してください。)
161 | 
162 | ````
163 | 
164 | .editorWrapper {
165 | display: flex;
166 | }
167 | .memoListWrapper {
168 | width: 20%;
169 | border-top: 1px solid #000;
170 | }
171 | .markdown {
172 | width: 40%;
173 | height: 500px;
174 | }
175 | .preview {
176 | width: 40%;
177 | text-align: left;
178 | }
179 | 
180 | ```
181 | 
182 | - P38 および P40 非推奨な書き方の修正
183 | 
184 |   - v-for を利用する際には表示する要素に固有の key を設定することが推奨されているため次のように修正します。
185 | 
186 | ```
187 | 
188 | <div class="memoList" v-for="(memo, index) in memos" :key="index" @click="selectMemo(index)" :data-selected="index == selectedIndex">
189 | ```
190 | 
191 | - P46 リスト 5.11 誤字
192 | 
193 |   - deleteMemoBtn → .deleteMemoBtn (書籍では.が抜けています。)
194 | 
195 | - P.47,48 「Control + s キー」とあるが、動作は「Command + s(Mac OS)、Windows キー + s(Windows)」となっている。
196 | 
197 |   - 「Control + s キー」と「Command + s(Mac OS)、Windows キー + s(Windows)」の双方で保存の操作に変更します。
198 |   - リスト 5.13：３行目を `if (e.key == "s" && (e.metaKey || e.ctrlKey)) {` に変更します。
199 | 
200 | - p.49 shitajicss のインストールコマンドが無く、不親切。
201 | 
202 |   - 以下の記述を追加
203 | 
204 | ```
205 | $ npm install shitajicss
206 | ```
207 | 
208 | こちらのコマンドで npm をインストールします。
209 | 
210 | - P.57 1 行目の記述変数名がソースと差異がある
211 | 
212 |   - Vue.use(Router) → Vue.use(VueRouter) に変更します。
213 | 
214 | - P.58 リスト 7.4 で components との相対パス変更について記述が抜けている
215 | 
216 |   - 以下の記述を追加 ("./" → "../"に変更します。)
217 | 
218 | ```
219 | import Home from "../components/Home.vue";
220 | import Editor from "../components/Editor.vue";
221 | ```
222 | 
223 | # Firestore の移行マニュアルを作成しました。
224 | 
225 | [こちらのリポジトリで PDF を無料配布しています](https://github.com/nabettu/firestore-manual)
226 | 
227 | また、本リポジトリの[firestore 対応ブランチはこちらになっております](https://github.com/nabettu/mymarkdown/tree/firestore)。
228 | ````
229 | 


--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>mymarkdown</title>
 6 |   </head>
 7 |   <body>
 8 |     <div id="app"></div>
 9 |     <script src="https://www.gstatic.com/firebasejs/4.8.2/firebase.js"></script>
10 |     <script>
11 |       // Initialize Firebase
12 |       var config = {
13 |         apiKey: "AIzaSyCiaxL8JBwL8deaJaOVLfAwF1yRWiiawJM",
14 |         authDomain: "mymarkdown.firebaseapp.com",
15 |         databaseURL: "https://mymarkdown.firebaseio.com",
16 |         projectId: "mymarkdown",
17 |         storageBucket: "mymarkdown.appspot.com",
18 |         messagingSenderId: "619528626812"
19 |       };
20 |       firebase.initializeApp(config);
21 |     </script>
22 |     <script src="/build.js"></script>
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/docs/cdn.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nabettu/mymarkdown/39a9bbb0ebe4803c8160e8263c76f458e06933b8/docs/cdn.png


--------------------------------------------------------------------------------
/docs/project.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nabettu/mymarkdown/39a9bbb0ebe4803c8160e8263c76f458e06933b8/docs/project.png


--------------------------------------------------------------------------------
/docs/support.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nabettu/mymarkdown/39a9bbb0ebe4803c8160e8263c76f458e06933b8/docs/support.png


--------------------------------------------------------------------------------
/firebase.json:
--------------------------------------------------------------------------------
1 | {
2 |   "hosting": {
3 |     "public": "dist"
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "mymarkdown",
 3 |   "description": "A Vue.js project",
 4 |   "version": "1.0.0",
 5 |   "author": "nabettu <tatsuaki.w@gmail.com>",
 6 |   "license": "MIT",
 7 |   "private": true,
 8 |   "scripts": {
 9 |     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
10 |     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
11 |   },
12 |   "dependencies": {
13 |     "shitajicss": "^4.6.0",
14 |     "vue": "^2.5.16",
15 |     "vue-router": "^3.0.1"
16 |   },
17 |   "browserslist": [
18 |     "> 1%",
19 |     "last 2 versions",
20 |     "not ie <= 8"
21 |   ],
22 |   "devDependencies": {
23 |     "babel-core": "^6.26.3",
24 |     "babel-loader": "^7.1.5",
25 |     "babel-preset-env": "^1.7.0",
26 |     "babel-preset-stage-3": "^6.24.1",
27 |     "cross-env": "^5.2.0",
28 |     "css-loader": "^1.0.0",
29 |     "file-loader": "^2.0.0",
30 |     "marked": "^0.6.2",
31 |     "node-sass": "^4.12.0",
32 |     "sass-loader": "^7.1.0",
33 |     "vue-loader": "14.2.2",
34 |     "vue-template-compiler": "^2.5.16",
35 |     "webpack": "^4.17.2",
36 |     "webpack-cli": "^3.1.0",
37 |     "webpack-dev-server": "^3.3.1"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div id="app">
 3 |   <router-view></router-view>
 4 | </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: "app"
10 | };
11 | </script>
12 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nabettu/mymarkdown/39a9bbb0ebe4803c8160e8263c76f458e06933b8/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/Editor.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div id="editor">
  3 |   <h1>エディター画面</h1>
  4 |   <span>{{ user.displayName }}</span>
  5 |   <button @click="logout">ログアウト</button>
  6 |   <div class="editorWrapper">
  7 |     <div class="memoListWrapper">
  8 |       <div class="memoList" v-for="(memo, index) in memos" :key="index" @click="selectMemo(index)" :data-selected="index == selectedIndex">
  9 |         <p class="memoTitle">{{ displayTitle(memo.markdown) }}</p>
 10 |       </div>
 11 |       <button class="addMemoBtn" @click="addMemo">メモの追加</button>
 12 |       <button class="deleteMemoBtn" v-if="memos.length > 1" @click="deleteMemo">選択中のメモの削除</button>
 13 |       <button class="saveMemosBtn" @click="saveMemos">メモの保存</button>
 14 |     </div>
 15 |     <textarea class="markdown" v-model="memos[selectedIndex].markdown"></textarea>
 16 |     <div class="preview markdown-body" v-html="preview()"></div>
 17 |   </div>
 18 | </div>
 19 | </template>
 20 | 
 21 | <script>
 22 | import marked from "marked";
 23 | 
 24 | export default {
 25 |   name: "editor",
 26 |   props: ["user"],
 27 |   data() {
 28 |     return {
 29 |       memos: [
 30 |         {
 31 |           markdown: ""
 32 |         }
 33 |       ],
 34 |       selectedIndex: 0
 35 |     };
 36 |   },
 37 |   created: function() {
 38 |     firebase
 39 |       .database()
 40 |       .ref("memos/" + this.user.uid)
 41 |       .once("value")
 42 |       .then(result => {
 43 |         if (result.val()) {
 44 |           this.memos = result.val();
 45 |         }
 46 |       });
 47 |   },
 48 |   mounted: function() {
 49 |     document.onkeydown = e => {
 50 |       if (e.key == "s" && (e.metaKey || e.ctrlKey)) {
 51 |         this.saveMemos();
 52 |         return false;
 53 |       }
 54 |     };
 55 |   },
 56 |   beforeDestroy: function() {
 57 |     document.onkeydown = null;
 58 |   },
 59 |   methods: {
 60 |     logout: function() {
 61 |       firebase.auth().signOut();
 62 |     },
 63 |     addMemo: function() {
 64 |       this.memos.push({
 65 |         markdown: "無題のメモ"
 66 |       });
 67 |     },
 68 |     deleteMemo: function() {
 69 |       this.memos.splice(this.selectedIndex, 1);
 70 |       if (this.selectedIndex > 0) {
 71 |         this.selectedIndex--;
 72 |       }
 73 |     },
 74 |     saveMemos: function() {
 75 |       firebase
 76 |         .database()
 77 |         .ref("memos/" + this.user.uid)
 78 |         .set(this.memos);
 79 |     },
 80 |     selectMemo: function(index) {
 81 |       this.selectedIndex = index;
 82 |     },
 83 |     preview: function() {
 84 |       return marked(this.memos[this.selectedIndex].markdown);
 85 |     },
 86 |     displayTitle: function(text) {
 87 |       return text.split(/\n/)[0].replace(/#\s/, "");
 88 |     }
 89 |   }
 90 | };
 91 | </script>
 92 | 
 93 | <style lang="scss" scoped>
 94 | .editorWrapper {
 95 |   display: flex;
 96 | }
 97 | .memoListWrapper {
 98 |   width: 20%;
 99 |   border-top: 1px solid #000;
100 | }
101 | .memoList {
102 |   padding: 10px;
103 |   box-sizing: border-box;
104 |   text-align: left;
105 |   border-bottom: 1px solid #000;
106 |   &:nth-child(even) {
107 |     background-color: #ccc;
108 |   }
109 |   &[data-selected="true"] {
110 |     background-color: #ccf;
111 |   }
112 | }
113 | .memoTitle {
114 |   height: 1.5em;
115 |   margin: 0;
116 |   white-space: nowrap;
117 |   overflow: hidden;
118 | }
119 | .addMemoBtn {
120 |   margin-top: 20px;
121 | }
122 | .deleteMemoBtn {
123 |   margin: 10px;
124 | }
125 | .markdown {
126 |   width: 40%;
127 |   height: 500px;
128 | }
129 | .preview {
130 |   width: 40%;
131 |   text-align: left;
132 | }
133 | </style>
134 | 


--------------------------------------------------------------------------------
/src/components/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="home">
 3 |   <h1><img alt="MyMarkdown" src="../assets/logo.png"></h1>
 4 |   <button @click="googleLogin">Googleアカウントでログイン</button>
 5 | </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   name: 'home',
11 |   data() {
12 |     return {
13 |       msg: 'Welcome to MyMarkdown'
14 |     }
15 |   },
16 |   methods: {
17 |     googleLogin: function() {
18 |       firebase.auth().signInWithRedirect(new firebase.auth.GoogleAuthProvider());
19 |     }
20 |   }
21 | }
22 | </script>
23 | 
24 | <style lang="scss">
25 | .home {
26 |     margin-top: 60px;
27 | }
28 | </style>
29 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import "shitajicss/docs/css/shitaji.min.css";
 2 | import "./scss/style.scss";
 3 | import Vue from "vue";
 4 | import App from "./App.vue";
 5 | import router from "./router";
 6 | 
 7 | new Vue({
 8 |   el: "#app",
 9 |   router: router,
10 |   render: h => h(App)
11 | });
12 | 


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import VueRouter from "vue-router";
 3 | import Top from "./views/Top";
 4 | import Terms from "./views/Terms";
 5 | 
 6 | Vue.use(VueRouter);
 7 | const routes = [
 8 |   {
 9 |     path: "/",
10 |     name: "top",
11 |     component: Top
12 |   },
13 |   {
14 |     path: "/terms",
15 |     name: "terms",
16 |     component: Terms
17 |   }
18 | ];
19 | 
20 | export default new VueRouter({
21 |   routes: routes
22 | });
23 | 


--------------------------------------------------------------------------------
/src/scss/github-markdown.css:
--------------------------------------------------------------------------------
  1 | @font-face {
  2 |   font-family: octicons-link;
  3 |   src: url(data:font/woff;charset=utf-8;base64,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) format('woff');
  4 | }
  5 | 
  6 | .markdown-body {
  7 |   -ms-text-size-adjust: 100%;
  8 |   -webkit-text-size-adjust: 100%;
  9 |   line-height: 1.5;
 10 |   color: #24292e;
 11 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 12 |   font-size: 16px;
 13 |   line-height: 1.5;
 14 |   word-wrap: break-word;
 15 | }
 16 | 
 17 | .markdown-body .pl-c {
 18 |   color: #6a737d;
 19 | }
 20 | 
 21 | .markdown-body .pl-c1,
 22 | .markdown-body .pl-s .pl-v {
 23 |   color: #005cc5;
 24 | }
 25 | 
 26 | .markdown-body .pl-e,
 27 | .markdown-body .pl-en {
 28 |   color: #6f42c1;
 29 | }
 30 | 
 31 | .markdown-body .pl-smi,
 32 | .markdown-body .pl-s .pl-s1 {
 33 |   color: #24292e;
 34 | }
 35 | 
 36 | .markdown-body .pl-ent {
 37 |   color: #22863a;
 38 | }
 39 | 
 40 | .markdown-body .pl-k {
 41 |   color: #d73a49;
 42 | }
 43 | 
 44 | .markdown-body .pl-s,
 45 | .markdown-body .pl-pds,
 46 | .markdown-body .pl-s .pl-pse .pl-s1,
 47 | .markdown-body .pl-sr,
 48 | .markdown-body .pl-sr .pl-cce,
 49 | .markdown-body .pl-sr .pl-sre,
 50 | .markdown-body .pl-sr .pl-sra {
 51 |   color: #032f62;
 52 | }
 53 | 
 54 | .markdown-body .pl-v,
 55 | .markdown-body .pl-smw {
 56 |   color: #e36209;
 57 | }
 58 | 
 59 | .markdown-body .pl-bu {
 60 |   color: #b31d28;
 61 | }
 62 | 
 63 | .markdown-body .pl-ii {
 64 |   color: #fafbfc;
 65 |   background-color: #b31d28;
 66 | }
 67 | 
 68 | .markdown-body .pl-c2 {
 69 |   color: #fafbfc;
 70 |   background-color: #d73a49;
 71 | }
 72 | 
 73 | .markdown-body .pl-c2::before {
 74 |   content: "^M";
 75 | }
 76 | 
 77 | .markdown-body .pl-sr .pl-cce {
 78 |   font-weight: bold;
 79 |   color: #22863a;
 80 | }
 81 | 
 82 | .markdown-body .pl-ml {
 83 |   color: #735c0f;
 84 | }
 85 | 
 86 | .markdown-body .pl-mh,
 87 | .markdown-body .pl-mh .pl-en,
 88 | .markdown-body .pl-ms {
 89 |   font-weight: bold;
 90 |   color: #005cc5;
 91 | }
 92 | 
 93 | .markdown-body .pl-mi {
 94 |   font-style: italic;
 95 |   color: #24292e;
 96 | }
 97 | 
 98 | .markdown-body .pl-mb {
 99 |   font-weight: bold;
100 |   color: #24292e;
101 | }
102 | 
103 | .markdown-body .pl-md {
104 |   color: #b31d28;
105 |   background-color: #ffeef0;
106 | }
107 | 
108 | .markdown-body .pl-mi1 {
109 |   color: #22863a;
110 |   background-color: #f0fff4;
111 | }
112 | 
113 | .markdown-body .pl-mc {
114 |   color: #e36209;
115 |   background-color: #ffebda;
116 | }
117 | 
118 | .markdown-body .pl-mi2 {
119 |   color: #f6f8fa;
120 |   background-color: #005cc5;
121 | }
122 | 
123 | .markdown-body .pl-mdr {
124 |   font-weight: bold;
125 |   color: #6f42c1;
126 | }
127 | 
128 | .markdown-body .pl-ba {
129 |   color: #586069;
130 | }
131 | 
132 | .markdown-body .pl-sg {
133 |   color: #959da5;
134 | }
135 | 
136 | .markdown-body .pl-corl {
137 |   text-decoration: underline;
138 |   color: #032f62;
139 | }
140 | 
141 | .markdown-body .octicon {
142 |   display: inline-block;
143 |   vertical-align: text-top;
144 |   fill: currentColor;
145 | }
146 | 
147 | .markdown-body a {
148 |   background-color: transparent;
149 | }
150 | 
151 | .markdown-body a:active,
152 | .markdown-body a:hover {
153 |   outline-width: 0;
154 | }
155 | 
156 | .markdown-body strong {
157 |   font-weight: inherit;
158 | }
159 | 
160 | .markdown-body strong {
161 |   font-weight: bolder;
162 | }
163 | 
164 | .markdown-body h1 {
165 |   font-size: 2em;
166 |   margin: 0.67em 0;
167 | }
168 | 
169 | .markdown-body img {
170 |   border-style: none;
171 | }
172 | 
173 | .markdown-body code,
174 | .markdown-body kbd,
175 | .markdown-body pre {
176 |   font-family: monospace, monospace;
177 |   font-size: 1em;
178 | }
179 | 
180 | .markdown-body hr {
181 |   box-sizing: content-box;
182 |   height: 0;
183 |   overflow: visible;
184 | }
185 | 
186 | .markdown-body input {
187 |   font: inherit;
188 |   margin: 0;
189 | }
190 | 
191 | .markdown-body input {
192 |   overflow: visible;
193 | }
194 | 
195 | .markdown-body [type="checkbox"] {
196 |   box-sizing: border-box;
197 |   padding: 0;
198 | }
199 | 
200 | .markdown-body * {
201 |   box-sizing: border-box;
202 | }
203 | 
204 | .markdown-body input {
205 |   font-family: inherit;
206 |   font-size: inherit;
207 |   line-height: inherit;
208 | }
209 | 
210 | .markdown-body a {
211 |   color: #0366d6;
212 |   text-decoration: none;
213 | }
214 | 
215 | .markdown-body a:hover {
216 |   text-decoration: underline;
217 | }
218 | 
219 | .markdown-body strong {
220 |   font-weight: 600;
221 | }
222 | 
223 | .markdown-body hr {
224 |   height: 0;
225 |   margin: 15px 0;
226 |   overflow: hidden;
227 |   background: transparent;
228 |   border: 0;
229 |   border-bottom: 1px solid #dfe2e5;
230 | }
231 | 
232 | .markdown-body hr::before {
233 |   display: table;
234 |   content: "";
235 | }
236 | 
237 | .markdown-body hr::after {
238 |   display: table;
239 |   clear: both;
240 |   content: "";
241 | }
242 | 
243 | .markdown-body table {
244 |   border-spacing: 0;
245 |   border-collapse: collapse;
246 | }
247 | 
248 | .markdown-body td,
249 | .markdown-body th {
250 |   padding: 0;
251 | }
252 | 
253 | .markdown-body h1,
254 | .markdown-body h2,
255 | .markdown-body h3,
256 | .markdown-body h4,
257 | .markdown-body h5,
258 | .markdown-body h6 {
259 |   margin-top: 0;
260 |   margin-bottom: 0;
261 | }
262 | 
263 | .markdown-body h1 {
264 |   font-size: 32px;
265 |   font-weight: 600;
266 | }
267 | 
268 | .markdown-body h2 {
269 |   font-size: 24px;
270 |   font-weight: 600;
271 | }
272 | 
273 | .markdown-body h3 {
274 |   font-size: 20px;
275 |   font-weight: 600;
276 | }
277 | 
278 | .markdown-body h4 {
279 |   font-size: 16px;
280 |   font-weight: 600;
281 | }
282 | 
283 | .markdown-body h5 {
284 |   font-size: 14px;
285 |   font-weight: 600;
286 | }
287 | 
288 | .markdown-body h6 {
289 |   font-size: 12px;
290 |   font-weight: 600;
291 | }
292 | 
293 | .markdown-body p {
294 |   margin-top: 0;
295 |   margin-bottom: 10px;
296 | }
297 | 
298 | .markdown-body blockquote {
299 |   margin: 0;
300 | }
301 | 
302 | .markdown-body ul,
303 | .markdown-body ol {
304 |   padding-left: 0;
305 |   margin-top: 0;
306 |   margin-bottom: 0;
307 | }
308 | 
309 | .markdown-body ol ol,
310 | .markdown-body ul ol {
311 |   list-style-type: lower-roman;
312 | }
313 | 
314 | .markdown-body ul ul ol,
315 | .markdown-body ul ol ol,
316 | .markdown-body ol ul ol,
317 | .markdown-body ol ol ol {
318 |   list-style-type: lower-alpha;
319 | }
320 | 
321 | .markdown-body dd {
322 |   margin-left: 0;
323 | }
324 | 
325 | .markdown-body code {
326 |   font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
327 |   font-size: 12px;
328 | }
329 | 
330 | .markdown-body pre {
331 |   margin-top: 0;
332 |   margin-bottom: 0;
333 |   font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
334 |   font-size: 12px;
335 | }
336 | 
337 | .markdown-body .octicon {
338 |   vertical-align: text-bottom;
339 | }
340 | 
341 | .markdown-body .pl-0 {
342 |   padding-left: 0 !important;
343 | }
344 | 
345 | .markdown-body .pl-1 {
346 |   padding-left: 4px !important;
347 | }
348 | 
349 | .markdown-body .pl-2 {
350 |   padding-left: 8px !important;
351 | }
352 | 
353 | .markdown-body .pl-3 {
354 |   padding-left: 16px !important;
355 | }
356 | 
357 | .markdown-body .pl-4 {
358 |   padding-left: 24px !important;
359 | }
360 | 
361 | .markdown-body .pl-5 {
362 |   padding-left: 32px !important;
363 | }
364 | 
365 | .markdown-body .pl-6 {
366 |   padding-left: 40px !important;
367 | }
368 | 
369 | .markdown-body::before {
370 |   display: table;
371 |   content: "";
372 | }
373 | 
374 | .markdown-body::after {
375 |   display: table;
376 |   clear: both;
377 |   content: "";
378 | }
379 | 
380 | .markdown-body>*:first-child {
381 |   margin-top: 0 !important;
382 | }
383 | 
384 | .markdown-body>*:last-child {
385 |   margin-bottom: 0 !important;
386 | }
387 | 
388 | .markdown-body a:not([href]) {
389 |   color: inherit;
390 |   text-decoration: none;
391 | }
392 | 
393 | .markdown-body .anchor {
394 |   float: left;
395 |   padding-right: 4px;
396 |   margin-left: -20px;
397 |   line-height: 1;
398 | }
399 | 
400 | .markdown-body .anchor:focus {
401 |   outline: none;
402 | }
403 | 
404 | .markdown-body p,
405 | .markdown-body blockquote,
406 | .markdown-body ul,
407 | .markdown-body ol,
408 | .markdown-body dl,
409 | .markdown-body table,
410 | .markdown-body pre {
411 |   margin-top: 0;
412 |   margin-bottom: 16px;
413 | }
414 | 
415 | .markdown-body hr {
416 |   height: 0.25em;
417 |   padding: 0;
418 |   margin: 24px 0;
419 |   background-color: #e1e4e8;
420 |   border: 0;
421 | }
422 | 
423 | .markdown-body blockquote {
424 |   padding: 0 1em;
425 |   color: #6a737d;
426 |   border-left: 0.25em solid #dfe2e5;
427 | }
428 | 
429 | .markdown-body blockquote>:first-child {
430 |   margin-top: 0;
431 | }
432 | 
433 | .markdown-body blockquote>:last-child {
434 |   margin-bottom: 0;
435 | }
436 | 
437 | .markdown-body kbd {
438 |   display: inline-block;
439 |   padding: 3px 5px;
440 |   font-size: 11px;
441 |   line-height: 10px;
442 |   color: #444d56;
443 |   vertical-align: middle;
444 |   background-color: #fafbfc;
445 |   border: solid 1px #c6cbd1;
446 |   border-bottom-color: #959da5;
447 |   border-radius: 3px;
448 |   box-shadow: inset 0 -1px 0 #959da5;
449 | }
450 | 
451 | .markdown-body h1,
452 | .markdown-body h2,
453 | .markdown-body h3,
454 | .markdown-body h4,
455 | .markdown-body h5,
456 | .markdown-body h6 {
457 |   margin-top: 24px;
458 |   margin-bottom: 16px;
459 |   font-weight: 600;
460 |   line-height: 1.25;
461 | }
462 | 
463 | .markdown-body h1 .octicon-link,
464 | .markdown-body h2 .octicon-link,
465 | .markdown-body h3 .octicon-link,
466 | .markdown-body h4 .octicon-link,
467 | .markdown-body h5 .octicon-link,
468 | .markdown-body h6 .octicon-link {
469 |   color: #1b1f23;
470 |   vertical-align: middle;
471 |   visibility: hidden;
472 | }
473 | 
474 | .markdown-body h1:hover .anchor,
475 | .markdown-body h2:hover .anchor,
476 | .markdown-body h3:hover .anchor,
477 | .markdown-body h4:hover .anchor,
478 | .markdown-body h5:hover .anchor,
479 | .markdown-body h6:hover .anchor {
480 |   text-decoration: none;
481 | }
482 | 
483 | .markdown-body h1:hover .anchor .octicon-link,
484 | .markdown-body h2:hover .anchor .octicon-link,
485 | .markdown-body h3:hover .anchor .octicon-link,
486 | .markdown-body h4:hover .anchor .octicon-link,
487 | .markdown-body h5:hover .anchor .octicon-link,
488 | .markdown-body h6:hover .anchor .octicon-link {
489 |   visibility: visible;
490 | }
491 | 
492 | .markdown-body h1 {
493 |   padding-bottom: 0.3em;
494 |   font-size: 2em;
495 |   border-bottom: 1px solid #eaecef;
496 | }
497 | 
498 | .markdown-body h2 {
499 |   padding-bottom: 0.3em;
500 |   font-size: 1.5em;
501 |   border-bottom: 1px solid #eaecef;
502 | }
503 | 
504 | .markdown-body h3 {
505 |   font-size: 1.25em;
506 | }
507 | 
508 | .markdown-body h4 {
509 |   font-size: 1em;
510 | }
511 | 
512 | .markdown-body h5 {
513 |   font-size: 0.875em;
514 | }
515 | 
516 | .markdown-body h6 {
517 |   font-size: 0.85em;
518 |   color: #6a737d;
519 | }
520 | 
521 | .markdown-body ul,
522 | .markdown-body ol {
523 |   padding-left: 2em;
524 | }
525 | 
526 | .markdown-body ul ul,
527 | .markdown-body ul ol,
528 | .markdown-body ol ol,
529 | .markdown-body ol ul {
530 |   margin-top: 0;
531 |   margin-bottom: 0;
532 | }
533 | 
534 | .markdown-body li {
535 |   word-wrap: break-all;
536 | }
537 | 
538 | .markdown-body li>p {
539 |   margin-top: 16px;
540 | }
541 | 
542 | .markdown-body li+li {
543 |   margin-top: 0.25em;
544 | }
545 | 
546 | .markdown-body dl {
547 |   padding: 0;
548 | }
549 | 
550 | .markdown-body dl dt {
551 |   padding: 0;
552 |   margin-top: 16px;
553 |   font-size: 1em;
554 |   font-style: italic;
555 |   font-weight: 600;
556 | }
557 | 
558 | .markdown-body dl dd {
559 |   padding: 0 16px;
560 |   margin-bottom: 16px;
561 | }
562 | 
563 | .markdown-body table {
564 |   display: block;
565 |   width: 100%;
566 |   overflow: auto;
567 | }
568 | 
569 | .markdown-body table th {
570 |   font-weight: 600;
571 | }
572 | 
573 | .markdown-body table th,
574 | .markdown-body table td {
575 |   padding: 6px 13px;
576 |   border: 1px solid #dfe2e5;
577 | }
578 | 
579 | .markdown-body table tr {
580 |   background-color: #fff;
581 |   border-top: 1px solid #c6cbd1;
582 | }
583 | 
584 | .markdown-body table tr:nth-child(2n) {
585 |   background-color: #f6f8fa;
586 | }
587 | 
588 | .markdown-body img {
589 |   max-width: 100%;
590 |   box-sizing: content-box;
591 |   background-color: #fff;
592 | }
593 | 
594 | .markdown-body img[align=right] {
595 |   padding-left: 20px;
596 | }
597 | 
598 | .markdown-body img[align=left] {
599 |   padding-right: 20px;
600 | }
601 | 
602 | .markdown-body code {
603 |   padding: 0.2em 0.4em;
604 |   margin: 0;
605 |   font-size: 85%;
606 |   background-color: rgba(27,31,35,0.05);
607 |   border-radius: 3px;
608 | }
609 | 
610 | .markdown-body pre {
611 |   word-wrap: normal;
612 | }
613 | 
614 | .markdown-body pre>code {
615 |   padding: 0;
616 |   margin: 0;
617 |   font-size: 100%;
618 |   word-break: normal;
619 |   white-space: pre;
620 |   background: transparent;
621 |   border: 0;
622 | }
623 | 
624 | .markdown-body .highlight {
625 |   margin-bottom: 16px;
626 | }
627 | 
628 | .markdown-body .highlight pre {
629 |   margin-bottom: 0;
630 |   word-break: normal;
631 | }
632 | 
633 | .markdown-body .highlight pre,
634 | .markdown-body pre {
635 |   padding: 16px;
636 |   overflow: auto;
637 |   font-size: 85%;
638 |   line-height: 1.45;
639 |   background-color: #f6f8fa;
640 |   border-radius: 3px;
641 | }
642 | 
643 | .markdown-body pre code {
644 |   display: inline;
645 |   max-width: auto;
646 |   padding: 0;
647 |   margin: 0;
648 |   overflow: visible;
649 |   line-height: inherit;
650 |   word-wrap: normal;
651 |   background-color: transparent;
652 |   border: 0;
653 | }
654 | 
655 | .markdown-body .full-commit .btn-outline:not(:disabled):hover {
656 |   color: #005cc5;
657 |   border-color: #005cc5;
658 | }
659 | 
660 | .markdown-body kbd {
661 |   display: inline-block;
662 |   padding: 3px 5px;
663 |   font: 11px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
664 |   line-height: 10px;
665 |   color: #444d56;
666 |   vertical-align: middle;
667 |   background-color: #fafbfc;
668 |   border: solid 1px #d1d5da;
669 |   border-bottom-color: #c6cbd1;
670 |   border-radius: 3px;
671 |   box-shadow: inset 0 -1px 0 #c6cbd1;
672 | }
673 | 
674 | .markdown-body :checked+.radio-label {
675 |   position: relative;
676 |   z-index: 1;
677 |   border-color: #0366d6;
678 | }
679 | 
680 | .markdown-body .task-list-item {
681 |   list-style-type: none;
682 | }
683 | 
684 | .markdown-body .task-list-item+.task-list-item {
685 |   margin-top: 3px;
686 | }
687 | 
688 | .markdown-body .task-list-item input {
689 |   margin: 0 0.2em 0.25em -1.6em;
690 |   vertical-align: middle;
691 | }
692 | 
693 | .markdown-body hr {
694 |   border-bottom-color: #eee;
695 | }
696 | 


--------------------------------------------------------------------------------
/src/scss/style.scss:
--------------------------------------------------------------------------------
1 | @import 'github-markdown.css';
2 | 


--------------------------------------------------------------------------------
/src/views/Terms.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div id="terms">
 3 |   <h1>利用規約</h1>
 4 |   <p>ここに利用規約の文章が入ります。</p>
 5 |   <router-link :to="{ name: 'top' }">TOPに戻る</router-link>
 6 | </div>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |   name: "terms"
12 | };
13 | </script>
14 | 


--------------------------------------------------------------------------------
/src/views/Top.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div id="top">
 3 |   <Home v-if="!isLogin"></Home>
 4 |   <Editor v-if="isLogin" :user="userData"></Editor>
 5 |   <router-link :to="{ name: 'terms' }">利用規約</router-link>
 6 | </div>
 7 | </template>
 8 | 
 9 | <script>
10 | import Home from "../components/Home.vue";
11 | import Editor from "../components/Editor.vue";
12 | 
13 | export default {
14 |   name: "top",
15 |   data() {
16 |     return {
17 |       isLogin: false,
18 |       userData: null
19 |     };
20 |   },
21 |   created: function() {
22 |     firebase.auth().onAuthStateChanged(user => {
23 |       console.log(user);
24 |       if (user) {
25 |         this.isLogin = true;
26 |         this.userData = user;
27 |       } else {
28 |         this.isLogin = false;
29 |         this.userData = null;
30 |       }
31 |     });
32 |   },
33 |   components: {
34 |     Home: Home,
35 |     Editor: Editor
36 |   }
37 | };
38 | </script>
39 | 
40 | <style lang="scss">
41 | #top {
42 |   font-family: "Avenir", Helvetica, Arial, sans-serif;
43 |   -webkit-font-smoothing: antialiased;
44 |   -moz-osx-font-smoothing: grayscale;
45 |   text-align: center;
46 |   color: #2c3e50;
47 | }
48 | 
49 | h1,
50 | h2 {
51 |   font-weight: normal;
52 | }
53 | 
54 | ul {
55 |   list-style-type: none;
56 |   padding: 0;
57 | }
58 | 
59 | li {
60 |   display: inline-block;
61 |   margin: 0 10px;
62 | }
63 | 
64 | a {
65 |   color: #42b983;
66 | }
67 | </style>
68 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
  1 | var path = require('path')
  2 | var webpack = require('webpack')
  3 | 
  4 | module.exports = {
  5 |   entry: './src/main.js',
  6 |   output: {
  7 |     path: path.resolve(__dirname, './dist'),
  8 |     publicPath: '/',
  9 |     filename: 'build.js'
 10 |   },
 11 |   module: {
 12 |     rules: [
 13 |       {
 14 |         test: /\.css$/,
 15 |         use: [
 16 |           'vue-style-loader',
 17 |           'css-loader'
 18 |         ],
 19 |       },
 20 |       {
 21 |         test: /\.scss$/,
 22 |         use: [
 23 |           'vue-style-loader',
 24 |           'css-loader',
 25 |           'sass-loader'
 26 |         ],
 27 |       },
 28 |       {
 29 |         test: /\.sass$/,
 30 |         use: [
 31 |           'vue-style-loader',
 32 |           'css-loader',
 33 |           'sass-loader?indentedSyntax'
 34 |         ],
 35 |       },
 36 |       {
 37 |         test: /\.vue$/,
 38 |         loader: 'vue-loader',
 39 |         options: {
 40 |           loaders: {
 41 |             // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
 42 |             // the "scss" and "sass" values for the lang attribute to the right configs here.
 43 |             // other preprocessors should work out of the box, no loader config like this necessary.
 44 |             'scss': [
 45 |               'vue-style-loader',
 46 |               'css-loader',
 47 |               'sass-loader'
 48 |             ],
 49 |             'sass': [
 50 |               'vue-style-loader',
 51 |               'css-loader',
 52 |               'sass-loader?indentedSyntax'
 53 |             ]
 54 |           }
 55 |           // other vue-loader options go here
 56 |         }
 57 |       },
 58 |       {
 59 |         test: /\.js$/,
 60 |         loader: 'babel-loader',
 61 |         exclude: /node_modules/
 62 |       },
 63 |       {
 64 |         test: /\.(png|jpg|gif|svg)$/,
 65 |         loader: 'file-loader',
 66 |         options: {
 67 |           name: '[name].[ext]?[hash]'
 68 |         }
 69 |       }
 70 |     ]
 71 |   },
 72 |   resolve: {
 73 |     alias: {
 74 |       'vue$': 'vue/dist/vue.esm.js'
 75 |     },
 76 |     extensions: ['*', '.js', '.vue', '.json']
 77 |   },
 78 |   devServer: {
 79 |     contentBase: 'dist',
 80 |     historyApiFallback: true,
 81 |     noInfo: true,
 82 |     overlay: true
 83 |   },
 84 |   performance: {
 85 |     hints: false
 86 |   },
 87 |   devtool: '#eval-source-map'
 88 | }
 89 | 
 90 | if (process.env.NODE_ENV === 'production') {
 91 |   module.exports.devtool = '#source-map'
 92 |   // http://vue-loader.vuejs.org/en/workflow/production.html
 93 |   module.exports.plugins = (module.exports.plugins || []).concat([
 94 |     new webpack.DefinePlugin({
 95 |       'process.env': {
 96 |         NODE_ENV: '"production"'
 97 |       }
 98 |     }),
 99 |     new webpack.optimize.UglifyJsPlugin({
100 |       sourceMap: false,
101 |       compress: {
102 |         warnings: false
103 |       }
104 |     }),
105 |     new webpack.LoaderOptionsPlugin({
106 |       minimize: true
107 |     })
108 |   ])
109 | }
110 | 


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