16 |
17 |
18 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/frontend/htmlcssjs/lesson/javascript/lesson_media/7/lesson.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
JavaScript レッスン
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/backend/firebase-training/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "defaultSeverity": "warning",
3 | "extends": [
4 | "tslint:recommended"
5 | ],
6 | "linterOptions": {
7 | "exclude": [
8 | "node_modules/**"
9 | ]
10 | },
11 | "rules": {
12 | "variable-name": [
13 | true,
14 | "ban-keywords",
15 | "check-format",
16 | "allow-leading-underscore"
17 | ],
18 | "max-line-length": [
19 | false,
20 | 120
21 | ],
22 | "member-access": false,
23 | "no-console": false,
24 | "quotemark": [true, "single"],
25 | "semicolon": [false, "always"],
26 | "indent": [true, "spaces", 2],
27 | "interface-name": false,
28 | "ordered-imports": false,
29 | "object-literal-sort-keys": false,
30 | "no-consecutive-blank-lines": false
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/frontend/htmlcssjs/lesson/javascript/lesson_animation/1/lesson.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
JavaScript レッスン
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
22 |
ログ表示エリア
23 |
25 |
26 |
--------------------------------------------------------------------------------
/frontend/htmlcssjs/lesson/javascript/lesson_media/6/main.js:
--------------------------------------------------------------------------------
1 | let stream;
2 |
3 | async function loadAndPlay() {
4 | const video = document.getElementById('myVideo');
5 | stream = await getDeviceStream({
6 | video: { width: 640, height: 320 },
7 | auto: false
8 | });
9 | video.srcObject = stream;
10 | }
11 |
12 | function stop() {
13 | const video = document.getElementById('myVideo');
14 | const tracks = stream.getTracks();
15 | tracks.forEach((track) => {
16 | track.stop();
17 | });
18 | video.srcObject = null;
19 | }
20 |
21 | function getDeviceStream(option) {
22 | if ('getUserMedia' in navigator.mediaDevices) {
23 | return navigator.mediaDevices.getUserMedia(option);
24 | } else {
25 | return new Promise(function(resolve, reject) {
26 | navigator.getUserMedia(option, resolve, reject);
27 | });
28 | }
29 | }
--------------------------------------------------------------------------------
/frontend/htmlcssjs/lesson/javascript/lesson_media/4/lesson.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
JavaScript レッスン
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
コントロールあり
18 |
19 |
プリロードなし
20 |
21 |
ループ再生
22 |
23 |
25 |
26 |
--------------------------------------------------------------------------------
/vuets/src/registerServiceWorker.ts:
--------------------------------------------------------------------------------
1 | /* tslint:disable:no-console */
2 |
3 | import { register } from 'register-service-worker';
4 |
5 | if (process.env.NODE_ENV === 'production') {
6 | register(`${process.env.BASE_URL}service-worker.js`, {
7 | ready() {
8 | console.log(
9 | 'App is being served from cache by a service worker.\n' +
10 | 'For more details, visit https://goo.gl/AFskqB',
11 | );
12 | },
13 | cached() {
14 | console.log('Content has been cached for offline use.');
15 | },
16 | updated() {
17 | console.log('New content is available; please refresh.');
18 | },
19 | offline() {
20 | console.log('No internet connection found. App is running in offline mode.');
21 | },
22 | error(error) {
23 | console.error('Error during service worker registration:', error);
24 | },
25 | });
26 | }
27 |
--------------------------------------------------------------------------------
/backend/firebase-training/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "module": "esnext",
5 | "strict": true,
6 | "jsx": "preserve",
7 | "importHelpers": true,
8 | "moduleResolution": "node",
9 | "experimentalDecorators": true,
10 | "esModuleInterop": true,
11 | "allowSyntheticDefaultImports": true,
12 | "sourceMap": true,
13 | "baseUrl": ".",
14 | "types": [
15 | "webpack-env"
16 | ],
17 | "paths": {
18 | "@/*": [
19 | "src/*"
20 | ]
21 | },
22 | "lib": [
23 | "esnext",
24 | "dom",
25 | "dom.iterable",
26 | "scripthost"
27 | ]
28 | },
29 | "include": [
30 | "src/**/*.ts",
31 | "src/**/*.tsx",
32 | "src/**/*.vue",
33 | "tests/**/*.ts",
34 | "tests/**/*.tsx"
35 | ],
36 | "exclude": [
37 | "node_modules"
38 | ]
39 | }
40 |
--------------------------------------------------------------------------------
/frontend/vue-library-training/src/main.ts:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | import router from './router'
4 | import store from './store'
5 | import Vuetify from 'vuetify'
6 | import colors from 'vuetify/es5/util/colors'
7 | import 'vuetify/dist/vuetify.min.css'
8 |
9 | // themeはお好みでどうぞ。
10 | /**
11 | * バグ？なぜか色が効かない。
12 | */
13 | Vue.use(Vuetify, {
14 | theme: {
15 | original: colors.purple.base,
16 | theme: '#5982EE',
17 | background: '#ffffff',
18 | twitter: '#00aced',
19 | facebook: '#305097',
20 | line: '#5ae628',
21 | red: '#F26964',
22 | error: '#F26964',
23 | succcess: '#698FF0',
24 | },
25 | options: {
26 | themeVariations: ['original', 'secondary'],
27 | },
28 | })
29 |
30 | Vue.config.productionTip = false
31 |
32 | new Vue({
33 | router,
34 | store,
35 | render: (h) => h(App),
36 | }).$mount('#app')
37 |
--------------------------------------------------------------------------------
/frontend/htmlcssjs/lesson/javascript/lesson_animation/3/main.js:
--------------------------------------------------------------------------------
1 | document.querySelector('#checkbox').addEventListener('change', (event) => {
2 | const element = document.querySelector('.rect');
3 | if (event.target.checked === true) {
4 | element.animate(
5 | {
6 | transform: [
7 | 'scale(1)', // 開始値
8 | 'scale(5)' // 終了値
9 | ]
10 | },
11 | {
12 | duration: 500, // ミリ秒指定
13 | fill: 'forwards', // 終了時にプロパティーを保つ
14 | easing: 'ease' // 加減速種類
15 | }
16 | );
17 | } else {
18 | element.animate(
19 | {
20 | transform: [
21 | 'scale(5)', // 開始値
22 | 'scale(1)' // 終了値
23 | ]
24 | },
25 | {
26 | duration: 500, // ミリ秒指定
27 | fill: 'forwards', // 終了時にプロパティーを保つ
28 | easing: 'ease' // 加減速種類
29 | }
30 | );
31 | }
32 | });
33 |
--------------------------------------------------------------------------------
/frontend/vue-library-training/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "module": "esnext",
5 | "strict": true,
6 | "jsx": "preserve",
7 | "importHelpers": true,
8 | "moduleResolution": "node",
9 | "experimentalDecorators": true,
10 | "esModuleInterop": true,
11 | "allowSyntheticDefaultImports": true,
12 | "sourceMap": true,
13 | "baseUrl": ".",
14 | "types": [
15 | "webpack-env"
16 | ],
17 | "paths": {
18 | "@/*": [
19 | "src/*"
20 | ]
21 | },
22 | "lib": [
23 | "esnext",
24 | "dom",
25 | "dom.iterable",
26 | "scripthost"
27 | ]
28 | },
29 | "include": [
30 | "src/**/*.ts",
31 | "src/**/*.tsx",
32 | "src/**/*.vue",
33 | "tests/**/*.ts",
34 | "tests/**/*.tsx"
35 | ],
36 | "exclude": [
37 | "node_modules"
38 | ]
39 | }
40 |
--------------------------------------------------------------------------------
/vuets/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "esnext",
4 | "module": "esnext",
5 | "strict": true,
6 | "jsx": "preserve",
7 | "importHelpers": true,
8 | "moduleResolution": "node",
9 | "experimentalDecorators": true,
10 | "esModuleInterop": true,
11 | "allowSyntheticDefaultImports": true,
12 | "sourceMap": true,
13 | "baseUrl": ".",
14 | "types": [
15 | "webpack-env",
16 | "mocha",
17 | "chai"
18 | ],
19 | "paths": {
20 | "@/*": [
21 | "src/*"
22 | ]
23 | },
24 | "lib": [
25 | "esnext",
26 | "dom",
27 | "dom.iterable",
28 | "scripthost"
29 | ]
30 | },
31 | "include": [
32 | "src/**/*.ts",
33 | "src/**/*.tsx",
34 | "src/**/*.vue",
35 | "tests/**/*.ts",
36 | "tests/**/*.tsx"
37 | ],
38 | "exclude": [
39 | "node_modules"
40 | ]
41 | }
42 |
--------------------------------------------------------------------------------
/backend/firebase-training/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
firebase-training
11 |
12 |
13 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/frontend/vue-library-training/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-library-training",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "serve": "vue-cli-service serve",
7 | "build": "vue-cli-service build",
8 | "lint": "vue-cli-service lint"
9 | },
10 | "dependencies": {
11 | "axios": "^0.18.0",
12 | "date-fns": "^1.30.1",
13 | "dotenv-webpack": "^1.7.0",
14 | "localforage": "^1.7.3",
15 | "vue": "^2.5.22",
16 | "vue-class-component": "^6.0.0",
17 | "vue-property-decorator": "^7.0.0",
18 | "vue-router": "^3.0.1",
19 | "vuetify": "^1.4.4",
20 | "vuex": "^3.0.1"
21 | },
22 | "devDependencies": {
23 | "@vue/cli-plugin-typescript": "^3.4.0",
24 | "@vue/cli-service": "^3.4.0",
25 | "stylus": "^0.54.5",
26 | "stylus-loader": "^3.0.2",
27 | "typescript": "^3.0.0",
28 | "vue-template-compiler": "^2.5.21"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/frontend/vue-library-training/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
vue-library-training
11 |
12 |
13 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/backend/firebase-training/functions/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "functions",
3 | "scripts": {
4 | "lint": "tslint --project tsconfig.json",
5 | "build": "tsc",
6 | "serve": "npm run build && firebase serve --only functions",
7 | "shell": "npm run build && firebase functions:shell",
8 | "start": "npm run shell",
9 | "deploy": "firebase deploy --only functions",
10 | "logs": "firebase functions:log"
11 | },
12 | "engines": {
13 | "node": "10"
14 | },
15 | "main": "lib/index.js",
16 | "dependencies": {
17 | "cors": "^2.8.5",
18 | "express": "^4.16.4",
19 | "firebase-admin": "~7.0.0",
20 | "firebase-functions": "^2.3.0"
21 | },
22 | "devDependencies": {
23 | "@types/cors": "^2.8.5",
24 | "@types/express": "^4.16.1",
25 | "firebase-functions-test": "^0.1.6",
26 | "tslint": "^5.12.0",
27 | "typescript": "^3.2.2"
28 | },
29 | "private": true
30 | }
31 |
--------------------------------------------------------------------------------
/frontend/htmlcssjs/lesson/javascript/lesson_media/9/lesson.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
JavaScript レッスン
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | ▲ 元の画像
19 |
20 |
21 |
22 | ▲変換後の画像
23 |
24 |
25 |
27 |
28 |
--------------------------------------------------------------------------------
/frontend/htmlcssjs/lesson/jquery/js/main.js:
--------------------------------------------------------------------------------
1 | $(function() {
2 | $("#ticker01").liScroll();
3 | $("#ticker01").off("mouseenter mouseleave");
4 | });
5 |
6 | const $link = $("#link__continue--middle, #link__continue--lower");
7 | $link.attr("href", "https://github.com/hukusuke1007");
8 |
9 | $(function () {
10 | const sokujiMessage = '即時関数だよ jQuery';
11 | console.log(sokujiMessage);
12 | });
13 |
14 | (function () {
15 | const sokujiMessage = '即時関数だよ JavaScript';
16 | console.log(sokujiMessage);
17 | }());
18 | // console.log(sokujiMessage); // sokujiMessage is not defined
19 |
20 |
21 | // $.func.call("", true, 'input[type="search"]')
22 | (function ($) {
23 | var call = function (value, selector) {
24 | console.log("call", value, selector);
25 | if (value === true) {
26 | $(selector).focus();
27 | } else {
28 | $(selector).blur();
29 | }
30 | }
31 | call(true, 'input[type="search"]');
32 | $.func = call;
33 | })(jQuery);
--------------------------------------------------------------------------------
/vuets/tests/e2e/support/commands.js:
--------------------------------------------------------------------------------
1 | // ***********************************************
2 | // This example commands.js shows you how to
3 | // create various custom commands and overwrite
4 | // existing commands.
5 | //
6 | // For more comprehensive examples of custom
7 | // commands please read more here:
8 | // https://on.cypress.io/custom-commands
9 | // ***********************************************
10 | //
11 | //
12 | // -- This is a parent command --
13 | // Cypress.Commands.add("login", (email, password) => { ... })
14 | //
15 | //
16 | // -- This is a child command --
17 | // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
18 | //
19 | //
20 | // -- This is a dual command --
21 | // Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
22 | //
23 | //
24 | // -- This is will overwrite an existing command --
25 | // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
26 |
--------------------------------------------------------------------------------
/frontend/htmlcssjs/lesson/javascript/lesson_media/7/main.js:
--------------------------------------------------------------------------------
1 | // 保存するの選択したときの処理
2 | document.querySelector('#btnSave').addEventListener('click', saveFile);
3 |
4 | function saveFile() {
5 | const fileName = 'mySvg.svg';
6 | const content = document.querySelector('#mySvg').outerHTML;
7 |
8 | // 画像データ
9 | const dataUrl = 'data:image/svg+xml\n' + encodeURIComponent(content);
10 |
11 | // 文字化け対策
12 | const bom = new Uint8Array([0xef, 0xbb, 0xbf]);
13 | const blob = new Blob([bom, content], {type: 'text/plain'});
14 |
15 | if (window.navigator.msSaveBlob) {
16 | window.navigator.msSaveBlob(blob, fileName);
17 | } else if (window.URL && window.URL.createObjectURL) {
18 | const a = document.createElement('a');
19 | a.download = fileName;
20 | a.href = window.URL.createObjectURL(blob);
21 | document.body.appendChild(a);
22 | a.click();
23 | document.body.removeChild(a);
24 | } else {
25 | window.open(dataUrl, '_blank');
26 | }
27 | }
--------------------------------------------------------------------------------
/frontend/htmlcssjs/lesson/javascript/lesson_media/2/lesson.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
JavaScript レッスン
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
21 | ![]()
24 | ![]()
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/backend/firebase-training/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "firebase-training",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "serve": "vue-cli-service serve",
7 | "build": "vue-cli-service build",
8 | "lint": "vue-cli-service lint",
9 | "firestore-rules": "firebase deploy --only firestore:rules",
10 | "deploy": "firebase deploy --only hosting"
11 | },
12 | "dependencies": {
13 | "axios": "^0.18.0",
14 | "date-fns": "^1.30.1",
15 | "firebase": "^5.8.1",
16 | "reflect-metadata": "^0.1.13",
17 | "vue": "^2.5.21",
18 | "vue-class-component": "^6.0.0",
19 | "vue-property-decorator": "^7.0.0",
20 | "vue-router": "^3.0.1",
21 | "vuetify": "^1.4.4",
22 | "vuex": "^3.0.1"
23 | },
24 | "devDependencies": {
25 | "@vue/cli-plugin-typescript": "^3.1.1",
26 | "@vue/cli-service": "^3.1.1",
27 | "stylus": "^0.54.5",
28 | "stylus-loader": "^3.0.2",
29 | "typescript": "^3.0.0",
30 | "vue-template-compiler": "^2.5.21"
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/frontend/frontendkadai2/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "frontendkadai2",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "serve": "vue-cli-service serve",
7 | "build": "vue-cli-service build",
8 | "lint": "vue-cli-service lint"
9 | },
10 | "dependencies": {
11 | "vue": "^2.5.17"
12 | },
13 | "devDependencies": {
14 | "@vue/cli-plugin-babel": "^3.0.1",
15 | "@vue/cli-plugin-eslint": "^3.0.1",
16 | "@vue/cli-service": "^3.0.1",
17 | "vue-template-compiler": "^2.5.17"
18 | },
19 | "eslintConfig": {
20 | "root": true,
21 | "env": {
22 | "node": true
23 | },
24 | "extends": [
25 | "plugin:vue/essential",
26 | "eslint:recommended"
27 | ],
28 | "rules": {},
29 | "parserOptions": {
30 | "parser": "babel-eslint"
31 | }
32 | },
33 | "postcss": {
34 | "plugins": {
35 | "autoprefixer": {}
36 | }
37 | },
38 | "browserslist": [
39 | "> 1%",
40 | "last 2 versions",
41 | "not ie <= 8"
42 | ]
43 | }
44 |
--------------------------------------------------------------------------------
/frontend/htmlcssjs/lesson/javascript/task/6/main.js:
--------------------------------------------------------------------------------
1 | function func1(type) {
2 | const text1 = document.getElementById('text1');
3 | const text2 = document.getElementById('text2');
4 | const value1 = Number(text1.value);
5 | const value2 = Number(text2.value);
6 | let result = 0
7 | switch (type) {
8 | case 0:
9 | result = value1 + value2;
10 | break;
11 | case 1:
12 | result = value1 - value2;
13 | break;
14 | case 2:
15 | result = value1 * value2;
16 | break;
17 | case 3:
18 | result = value1 / value2;
19 | break;
20 | }
21 | document.querySelector('#result').innerHTML = result;
22 | }
23 |
24 | document.querySelector('#btn1').addEventListener('click', () => {
25 | func1(0);
26 | });
27 | document.querySelector('#btn2').addEventListener('click', () => {
28 | func1(1);
29 | });
30 | document.querySelector('#btn3').addEventListener('click', () => {
31 | func1(2);
32 | });
33 | document.querySelector('#btn4').addEventListener('click', () => {
34 | func1(3);
35 | });
36 |
--------------------------------------------------------------------------------
/frontend/htmlcssjs/lesson/jquery/vender/liscroll/li-scroller.css:
--------------------------------------------------------------------------------
1 | /* liScroll styles */
2 |
3 | .tickercontainer { /* the outer div with the black border */
4 | border: 1px solid #000;
5 | background: #fff;
6 | width: 738px;
7 | height: 27px;
8 | margin: 0;
9 | padding: 0;
10 | overflow: hidden;
11 | }
12 | .tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */
13 | position: relative;
14 | left: 10px;
15 | top: 8px;
16 | width: 718px;
17 | overflow: hidden;
18 | }
19 | ul.newsticker { /* that's your list */
20 | position: relative;
21 | left: 750px;
22 | font: bold 10px Verdana;
23 | list-style-type: none;
24 | margin: 0;
25 | padding: 0;
26 |
27 | }
28 | ul.newsticker li {
29 | float: left; /* important: display inline gives incorrect results when you check for elem's width */
30 | margin: 0;
31 | padding: 0;
32 | background: #fff;
33 | }
34 | ul.newsticker a {
35 | white-space: nowrap;
36 | padding: 0;
37 | color: #ff0000;
38 | font: bold 10px Verdana;
39 | margin: 0 50px 0 0;
40 | }
41 | ul.newsticker span {
42 | margin: 0 10px 0 0;
43 | }
--------------------------------------------------------------------------------
/frontend/htmlcssjs/lesson/javascript/lesson_animation/1/main.js:
--------------------------------------------------------------------------------
1 | document.querySelector('#checkbox').addEventListener('change', (event) => {
2 | const element = document.querySelector('.rect');
3 | if (element.classList.contains('state-show') === true) {
4 | element.classList.remove('state-show');
5 | } else {
6 | element.classList.add('state-show');
7 | }
8 | });
9 |
10 | const targetEl = document.querySelector('.rect');
11 | targetEl.addEventListener('animationstart', (event) => {
12 | // アニメーションが開始したときのイベント
13 | document.querySelector('.log').innerHTML = 'animationstart 発生 : ' + new Date().toLocaleTimeString();
14 | });
15 |
16 | targetEl.addEventListener('animationiteration', (event) => {
17 | // アニメーションで繰り返しが発生した時のイベント
18 | // （繰り返しが未指定の場合は発生しない）
19 | document.querySelector('.log').innerHTML = 'animationiteration 発生 : ' + new Date().toLocaleTimeString();
20 | });
21 |
22 | targetEl.addEventListener('animationend', (event) => {
23 | // アニメーションが完了したときのイベント
24 | // （繰り返しを指定した場合は発生しない）
25 | document.querySelector('.log').innerHTML = 'animationend 発生 : ' + new Date().toLocaleTimeString();
26 | });
--------------------------------------------------------------------------------
/frontend/htmlcssjs/lesson/javascript/task/common/style.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | width: 100%;
4 | height: 100%;
5 | }
6 |
7 | body {
8 | display: flex;
9 | justify-content: center;
10 | align-items: center;
11 | flex-direction: row;
12 | background: #000;
13 | }
14 |
15 | body:before {
16 | width: 100%;
17 | height: 100%;
18 | content: '';
19 | display: block;
20 | position: absolute;
21 | left: 0;
22 | top: 0;
23 | background-size: cover;
24 | z-index: 0;
25 | }
26 |
27 | body > * {
28 | position: relative;
29 | z-index: 1;
30 | }
31 |
32 | main {
33 | background-color: rgba(0, 0, 0, 0.58);
34 | border-radius: 10px;
35 | width: 100%;
36 | max-width: 900px;
37 | height: 480px;
38 | padding: 20px;
39 | box-sizing: border-box;
40 | }
41 |
42 | main.centering {
43 | display: flex;
44 | justify-content: center;
45 | align-items: center;
46 | flex-direction: column;
47 | }
48 |
49 | p {
50 | color: #fff;
51 | }
52 |
53 | button {
54 | background-color: rgba(0, 0, 0, 0.1);
55 | padding: 10px;
56 | color: #fff;
57 | cursor: pointer;
58 | }
59 |
60 | li {
61 | color: #fff;
62 | }
--------------------------------------------------------------------------------
/frontend/vue-library-training/src/views/vuerouter/VueRouterSecondPage.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | VueRouter params指定
7 | ページ {{ id }}
8 |
9 |
10 |
11 |
13 |
14 |
44 |
--------------------------------------------------------------------------------
/frontend/htmlcssjs/lesson/javascript/confirm/confirm.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
JavaScript 確認用
6 |
17 |
18 |
19 |
22 |
23 |
40 |
--------------------------------------------------------------------------------
/vuets/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vuets",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "serve": "vue-cli-service serve",
7 | "build": "vue-cli-service build",
8 | "lint": "vue-cli-service lint",
9 | "test:unit": "vue-cli-service test:unit",
10 | "test:e2e": "vue-cli-service test:e2e"
11 | },
12 | "dependencies": {
13 | "register-service-worker": "^1.0.0",
14 | "vue": "^2.5.17",
15 | "vue-class-component": "^6.0.0",
16 | "vue-property-decorator": "^7.0.0",
17 | "vue-router": "^3.0.1",
18 | "vuex": "^3.0.1"
19 | },
20 | "devDependencies": {
21 | "@cypress/webpack-preprocessor": "^3.0.0",
22 | "@types/chai": "^4.1.0",
23 | "@types/mocha": "^5.2.4",
24 | "@vue/cli-plugin-babel": "^3.0.1",
25 | "@vue/cli-plugin-e2e-cypress": "^3.0.1",
26 | "@vue/cli-plugin-pwa": "^3.0.1",
27 | "@vue/cli-plugin-typescript": "^3.0.1",
28 | "@vue/cli-plugin-unit-mocha": "^3.0.1",
29 | "@vue/cli-service": "^3.0.1",
30 | "@vue/test-utils": "^1.0.0-beta.20",
31 | "chai": "^4.1.2",
32 | "stylus": "^0.54.5",
33 | "stylus-loader": "^3.0.2",
34 | "typescript": "^3.0.0",
35 | "vue-template-compiler": "^2.5.17"
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/frontend/htmlcssjs/lesson/htmlcss/lesson/common.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
XXXX（HTML/CSS レッスン）
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
28 |
29 |
30 |
35 |
36 |
37 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/backend/firebase-training/src/main.ts:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | import router from './router'
4 | import store from './store'
5 |
6 | // Firebase
7 | import { firebaseConfig } from '@/repository/firebaseConfig'
8 | import firebase from 'firebase/app'
9 | import 'firebase/firestore'
10 |
11 | // Vuetify
12 | import Vuetify from 'vuetify'
13 | import colors from 'vuetify/es5/util/colors'
14 | import 'vuetify/dist/vuetify.min.css'
15 |
16 | // Firebase
17 | firebase.initializeApp(firebaseConfig)
18 | firebase.firestore.FieldValue.serverTimestamp()
19 |
20 | // Vuetify
21 | Vue.use(Vuetify, {
22 | theme: {
23 | original: colors.purple.base,
24 | theme: '#5982EE',
25 | background: '#ffffff',
26 | whiteCloud: '#F8F9FB',
27 | grayTheme: '#79838C',
28 | blueTheme: '#5982EE',
29 | sky: '#A2DCED',
30 | sea: '#698FF0',
31 | blackFlat: '#202223',
32 | twitter: '#00aced',
33 | facebook: '#305097',
34 | line: '#5ae628',
35 | gold: '#FFD700',
36 | goldenrod: '#DAA520',
37 | red: '#F26964',
38 | error: '#F26964',
39 | succcess: '#698FF0',
40 | },
41 | options: {
42 | themeVariations: ['original', 'secondary'],
43 | },
44 | })
45 |
46 | Vue.config.productionTip = false
47 |
48 | new Vue({
49 | router,
50 | store,
51 | render: (h) => h(App),
52 | }).$mount('#app')
53 |
--------------------------------------------------------------------------------
/backend/firebase-training/storage.rules:
--------------------------------------------------------------------------------
1 | service firebase.storage {
2 | match /b/{bucket}/o {
3 | match /version/{versionId} {
4 | function isAuthenticated() {
5 | return request.auth != null;
6 | }
7 | function isUserAuthenticated(id) {
8 | return request.auth.uid == id;
9 | }
10 | function limitSize() {
11 | // ファイルサイズが3Mbyte以下であること
12 | return request.resource.size <= 3 * 1024 * 1024;
13 | }
14 | function isImageType() {
15 | // contentTypeがimageである
16 | return request.resource.contentType.matches('image/.*');
17 | }
18 | match /user/{userId} {
19 | // 認証有り、規定のファイルサイズとファイル形式で操作可
20 | match /{fileId} {
21 | allow read, delete: if isAuthenticated() && isUserAuthenticated(userId);
22 | allow create, update: if isAuthenticated() && isUserAuthenticated(userId) && limitSize() && isImageType();
23 | }
24 | }
25 | match /folder/{fileId} {
26 | // 認証無しで操作可
27 | allow read, write: if true;
28 | }
29 | match /userpractice/{userpracticeId} {
30 | // 認証無しで操作可
31 | match /{fileId} {
32 | allow read, write: if true;
33 | }
34 | }
35 | match /userstorage/{userstorageId} {
36 | match /{fileId} {
37 | allow read, write: if true;
38 | }
39 | }
40 | }
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/frontend/spa/README.md:
--------------------------------------------------------------------------------
1 | # SPAの作成
2 |
3 | ## 概要
4 | Vue.jsでここまで学んだ技術を用いてSPA（シングルページアプリケーション）を作成しましょう。
5 |
6 | SPAとは単一のWebページで構成されるWebアプリケーションです。
7 | 本レッスンではフロントエンドはVue.jsで開発を行い、外部公開されているWebAPIを用いてオリジナルのアプリケーションを作りGithub Pagesにデプロイして公開しましょう。
8 |
9 | ### SPAの例
10 | Vue.jsとNEM APIを用いて作ったNEMウォレットです。
11 | [ブロックチェーンNEMウォレット](https://hukusuke1007.github.io/nem-wallet/)
12 |
13 | 作り方は[こちら](https://qiita.com/hukusuke1007/items/132a4d3d3736c98125e8)
14 |
15 | ### SPAのアイデア案
16 |
17 | - Qiita記事検索アプリ
18 | - GitHubリポジトリ検索アプリ
19 | - ブロックチェーンウォレットアプリ
20 | - 動画検索アプリ
21 | など
22 |
23 | ### 利用できる外部API
24 |
25 | | サービス名 | ドキュメント | 備考 |
26 | | :------- | :--- | :-- |
27 | | Qiita | [公式ドキュメント](https://qiita.com/api/v2/docs) | |
28 | | GitHub | [公式ドキュメント](https://developer.github.com/v3/) | |
29 | | Twitter | [公式ドキュメント](https://developer.twitter.com/en/docs.html)
[日本語訳（※古い可能性がある）](http://westplain.sakuraweb.com/translate/twitter/Documentation/REST-APIs/Public-API/REST-APIs.cgi) | Developer登録が必要
[Twitter API 登録 (アカウント申請方法) から承認されるまでの手順まとめ](https://qiita.com/kngsym2018/items/2524d21455aac111cdee) |
30 | | Facebook | [公式ドキュメント](https://developers.facebook.com/docs/apis-and-sdks?locale=ja_JP) | Developer登録が必要 |
31 | | NEMブロックチェーン | [公式ドキュメント](https://nemproject.github.io/)
[日本語訳](http://i-yusuke.com/entry/nem-nis-api-document-japanese/)| |
32 | | Avgle | [公式ドキュメント](https://avgle.github.io/doc/) | 18禁 |
33 |
34 |
35 | 他にも利用できるAPIはありますので探してみてください。
--------------------------------------------------------------------------------
/frontend/htmlcssjs/lesson/javascript/task/8/main.js:
--------------------------------------------------------------------------------
1 | let number = 0;
2 |
3 | /** 追加 */
4 | function create() {
5 | const text = document.getElementById('text');
6 | if (text.value !== '') {
7 | // ul取得
8 | const ul = document.getElementById('result');
9 |
10 | // 要素を作成
11 | const li = document.createElement('li');
12 | li.setAttribute('id', number);
13 |
14 | const input = document.createElement('input');
15 | input.setAttribute('type', 'checkbox');
16 | input.setAttribute('name', 'item');
17 | li.appendChild(input);
18 |
19 | const span = document.createElement('span');
20 | span.innerHTML = text.value;
21 | li.appendChild(span);
22 | ul.appendChild(li);
23 |
24 | number += 1;
25 | } else {
26 | console.log('textareaは空です。');
27 | }
28 | }
29 |
30 | /** 削除 */
31 | function remove() {
32 | const items = document.getElementsByName('item');
33 |
34 | // 削除するelementを配列へ入れる
35 | const deleteItems = []
36 | for (let i = 0; i < items.length; i++){
37 | if (items[i].checked) {
38 | let id = items[i].parentNode.id;
39 | let element = document.getElementById(id);
40 | deleteItems.push(element)
41 | }
42 | }
43 |
44 | // 削除.
45 | for (let i = 0; i < deleteItems.length; i++){
46 | deleteItems[i].parentNode.removeChild(deleteItems[i]);
47 | }
48 | }
49 |
50 | document.querySelector('#btn1').addEventListener('click', create);
51 | document.querySelector('#btn2').addEventListener('click', remove);
--------------------------------------------------------------------------------
/frontend/frontendkadai2/src/components/InputForm.vue:
--------------------------------------------------------------------------------
1 |
2 |
21 |
22 |
60 |
66 |
--------------------------------------------------------------------------------
/frontend/frontendkadai2/src/components/ToDoForm.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
TODO
9 |
10 |
11 | {{ item.memo }}
12 |
13 |
14 |
15 |
17 |
44 |
63 |
--------------------------------------------------------------------------------
/frontend/htmlcssjs/lesson/htmlcss/lesson/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
トップページ（HTML/CSS レッスン）
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
30 |
31 |
32 |
33 |
34 |
Life is beautiful, Snap!Snap!
35 |
このWebサイトは ... コメント コメント コメント コメント コメント コメント コメント コメント コメント コメント
36 | コメント コメント コメント コメント コメント コメント
もうコメントはここまでにします。
37 |
My Portfolio
38 |
39 |
40 |
41 |
42 |
45 |
46 |
47 |
--------------------------------------------------------------------------------
/frontend/vue-library-training/src/views/vuerouter/VueRouterAgendaPage.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | VueRouterトレーニング
7 |
8 | ページ遷移
9 |
10 |
11 |
12 | ページ
13 |
14 |
15 |
16 |
17 | ページ遷移 params指定
18 |
19 |
21 | ページ 1
22 |
23 |
25 | ページ 2
26 |
27 |
28 |
29 |
30 |
31 |
32 |
34 |
35 |
44 |
--------------------------------------------------------------------------------
/frontend/htmlcssjs/lesson/javascript/lesson_animation/1/image/loading.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
23 |
--------------------------------------------------------------------------------
/frontend/htmlcssjs/lesson/javascript/lesson_media/2/images/loading.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
23 |
--------------------------------------------------------------------------------
/frontend/htmlcssjs/lesson/javascript/lesson_normal/1/image/loading.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
23 |
--------------------------------------------------------------------------------
/frontend/htmlcssjs/lesson/jquery/lesson.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
jQuery レッスン
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
24 |
25 |
26 |
27 |
28 |
33 |
38 |
39 |
40 |
41 |
42 |
ボタン
43 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/frontend/vue-library-training/src/views/TopPage.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 必須ライブラリトレーニング
7 |
8 |
9 | ページ遷移（VueRouter）
10 |
11 |
12 |
13 |
14 | 状態管理（VueStore）
15 |
16 |
17 |
18 |
19 | ナビゲーショントップページ作成（Vuetify）
20 |
21 |
22 |
23 |
24 | ローカルストレージに保存（localforage）
25 |
26 |
27 |
28 |
29 | Qiitaリスト表示ページ作成（axios）
30 |
31 |
32 |
33 |
34 | 環境変数を設定（dotenv）
35 |
36 |
37 |
38 |
39 |
40 |
42 |
43 |
48 |
--------------------------------------------------------------------------------
/frontend/htmlcssjs/lesson/jquery/vender/liscroll/jquery.li-scroller.1.0.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * liScroll 1.0
3 | * Examples and documentation at:
4 | * http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html
5 | * 2007-2010 Gian Carlo Mingati
6 | * Version: 1.0.2.1 (22-APRIL-2011)
7 | * Dual licensed under the MIT and GPL licenses:
8 | * http://www.opensource.org/licenses/mit-license.php
9 | * http://www.gnu.org/licenses/gpl.html
10 | * Requires:
11 | * jQuery v1.2.x or later
12 | *
13 | */
14 |
15 |
16 | jQuery.fn.liScroll = function(settings) {
17 | settings = jQuery.extend({
18 | travelocity: 0.07
19 | }, settings);
20 | return this.each(function(){
21 | var $strip = jQuery(this);
22 | $strip.addClass("newsticker")
23 | var stripWidth = 1;
24 | $strip.find("li").each(function(i){
25 | stripWidth += jQuery(this, i).outerWidth(true); // thanks to Michael Haszprunar and Fabien Volpi
26 | });
27 | var $mask = $strip.wrap("
");
28 | var $tickercontainer = $strip.parent().wrap("
");
29 | var containerWidth = $strip.parent().parent().width(); //a.k.a. 'mask' width
30 | $strip.width(stripWidth);
31 | var totalTravel = stripWidth+containerWidth;
32 | var defTiming = totalTravel/settings.travelocity; // thanks to Scott Waye
33 | function scrollnews(spazio, tempo){
34 | $strip.animate({left: '-='+ spazio}, tempo, "linear", function(){$strip.css("left", containerWidth); scrollnews(totalTravel, defTiming);});
35 | }
36 | scrollnews(totalTravel, defTiming);
37 | $strip.hover(function(){
38 | jQuery(this).stop(); /* こいつをコメントアウトすると止まらない */
39 | },
40 | function(){
41 | var offset = jQuery(this).offset();
42 | var residualSpace = offset.left + stripWidth;
43 | var residualTime = residualSpace/settings.travelocity;
44 | scrollnews(residualSpace, residualTime);
45 | });
46 | });
47 | };
--------------------------------------------------------------------------------
/frontend/htmlcssjs/lesson/jquery/vender/jquery-ui-1.12.1.custom/LICENSE.txt:
--------------------------------------------------------------------------------
1 | Copyright jQuery Foundation and other contributors, https://jquery.org/
2 |
3 | This software consists of voluntary contributions made by many
4 | individuals. For exact contribution history, see the revision history
5 | available at https://github.com/jquery/jquery-ui
6 |
7 | The following license applies to all parts of this software except as
8 | documented below:
9 |
10 | ====
11 |
12 | Permission is hereby granted, free of charge, to any person obtaining
13 | a copy of this software and associated documentation files (the
14 | "Software"), to deal in the Software without restriction, including
15 | without limitation the rights to use, copy, modify, merge, publish,
16 | distribute, sublicense, and/or sell copies of the Software, and to
17 | permit persons to whom the Software is furnished to do so, subject to
18 | the following conditions:
19 |
20 | The above copyright notice and this permission notice shall be
21 | included in all copies or substantial portions of the Software.
22 |
23 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
24 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
25 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
26 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
27 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
28 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
29 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
30 |
31 | ====
32 |
33 | Copyright and related rights for sample code are waived via CC0. Sample
34 | code is defined as all source code contained within the demos directory.
35 |
36 | CC0: http://creativecommons.org/publicdomain/zero/1.0/
37 |
38 | ====
39 |
40 | All files located in the node_modules and external directories are
41 | externally maintained libraries used by this software which have their
42 | own licenses; we recommend you read them, as their terms may differ from
43 | the terms above.
44 |
--------------------------------------------------------------------------------
/frontend/vue-library-training/src/store.ts:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Vuex from 'vuex'
3 |
4 | Vue.use(Vuex)
5 | /**
6 | * storeでアプリ全体の状態管理を行う。
7 | * 定義されたデータはアプリが消えるまで保持する（シングルトンのようなもの）
8 | */
9 | export default new Vuex.Store({
10 | /**
11 | * stateで管理するデータを定義
12 | */
13 | state: {
14 | title: 'VueStoreTopPage',
15 | isLoading: false,
16 | successMessages: [] as string[],
17 | errorMessages: [] as string[],
18 | },
19 | /**
20 | * getters内でstateのデータを取得できるようにする。
21 | */
22 | getters: {
23 | title: (state) => state.title,
24 | isLoading: (state) => state.isLoading,
25 | successMessages: (state) => state.successMessages,
26 | errorMessages: (state) => state.errorMessages,
27 | },
28 | /**
29 | * mutationsで実行処理を行う。データの変更を行う。
30 | */
31 | mutations: {
32 | setTitle(state, title) {
33 | document.title = title
34 | state.title = title
35 | },
36 | startLoading(state) {
37 | state.isLoading = true
38 | },
39 | stopLoading(state) {
40 | state.isLoading = false
41 | },
42 | success(state, message) {
43 | if (!Array.isArray(message)) {
44 | state.successMessages = [message]
45 | return
46 | }
47 | state.successMessages = message
48 | },
49 | error(state, message) {
50 | if (!Array.isArray(message)) {
51 | state.errorMessages = [message]
52 | return
53 | }
54 | state.errorMessages = message
55 | },
56 | },
57 | /**
58 | * actionsでmutationsをラップして実行。
59 | */
60 | actions: {
61 | doTitle({ commit }, value: string) {
62 | commit('setTitle', value)
63 | },
64 | doLoading({ commit }, value: boolean) {
65 | if (value === true) {
66 | commit('startLoading')
67 | } else {
68 | commit('stopLoading')
69 | }
70 | },
71 | doSuccessMessages({ commit }, value: string) {
72 | commit('success', value)
73 | },
74 | doErrorMessages({ commit }, value: string) {
75 | commit('error', value)
76 | },
77 | },
78 | })
79 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # FrontendTraining
2 |
3 | > Vue.jsでWebアプリケーション開発の基礎と実務スキルを身につけるためのカリキュラム
4 |
5 | # カリキュラム
6 | ## 基礎
7 | 1. [HTML/CSS/JavaScript](./frontend/htmlcssjs/README.md)
8 |
9 | ## Frontend
10 | 1. [環境構築](./frontend/environment/README.md)
11 | 2. [Vue.jsの基礎](./frontend/vuejs/README.md)
12 | 3. [TypeScriptの基礎](https://github.com/Programmable-school/TypeScript-Training)
13 | 4. CSS（Stylus）の基礎
14 | 簡単なプロフィール画面作成
15 | 5. [Vue.js 実践](./frontend/vue-library-training/README.md)
16 | ・[環境構築](./frontend/vue-library-training/README.md#環境構築)
17 | ・[VueRouter](./frontend/vue-library-training/README.md#VueRouter)
18 | ・[Vuex](./frontend/vue-library-training/README.md#Vuex)
19 | ・[Vuetify](./frontend/vue-library-training/README.md#Vuetify)
20 | ・[localforage](./frontend/vue-library-training/README.md#localforage)
21 | ・[axios](./frontend/vue-library-training/README.md#axios)
22 | ・[dotenv](./frontend/vue-library-training/README.md#dotenv)
23 | 6. [SPAの作成](./frontend/spa/README.md)
24 |
25 | ## Backend
26 | 1. [Firebase](./backend/firebase-training/README.md)
27 | [Cloud Firestore](./backend/firebase-training/README_1.md)
28 | [Firebase Authantication](./backend/firebase-training/README_2.md)
29 | [Cloud Storage](./backend/firebase-training/README_3.md)
30 | [Cloud Functions](./backend/firebase-training/README_4.md)
31 | [Firebase Hosting](./backend/firebase-training/README_5.md)
32 |
33 | ## Blockchain
34 | 1. NEM
35 | [ウォレット作成](https://qiita.com/hukusuke1007/items/132a4d3d3736c98125e8)
36 |
37 | # その他
38 | 1. GitHubPagesへ公開
39 |
40 | ## 環境
41 | 以下のバージョン以上を推奨
42 | - Vue CLI 3.0
43 | - TypeScript 3.0
44 | - yarn 1.9.4
45 | - npm 5.6.0
46 | - Chrome 69.0
47 | - FireFox 62.0
48 |
49 |
50 | ## 概要
51 | 簡単にWebアプリケーションを作れるカリキュラムです。
52 | ・フロントエンド
53 | フレームワークVue.jsを採用、合わせて以下の言語を学習します。
54 | - HTML
55 | - JavaScript(TypeScript)
56 | - CSS(Stylus)
57 |
58 |
59 | ・バックエンド
60 | Firebaseを採用、以下の技術を学習します。
61 | - Cloud Firestore
62 | - Firebase Authentication
63 | - Cloud Storage
64 | - Cloud Functions
65 | - Firebase Hosting
66 |
67 |
68 | ・ブロックチェーン
69 | NEMプロトコルを採用。
70 | NEMの基本機能や独自トークンの送受信方法を学習します。
71 |
--------------------------------------------------------------------------------
/frontend/htmlcssjs/lesson/jquery/vender/jquery-ui-1.12.1.custom/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "jquery-ui",
3 | "title": "jQuery UI",
4 | "description": "A curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.",
5 | "version": "1.12.1",
6 | "homepage": "http://jqueryui.com",
7 | "author": {
8 | "name": "jQuery Foundation and other contributors",
9 | "url": "https://github.com/jquery/jquery-ui/blob/1.12.1/AUTHORS.txt"
10 | },
11 | "main": "ui/widget.js",
12 | "maintainers": [
13 | {
14 | "name": "Scott González",
15 | "email": "scott.gonzalez@gmail.com",
16 | "url": "http://scottgonzalez.com"
17 | },
18 | {
19 | "name": "Jörn Zaefferer",
20 | "email": "joern.zaefferer@gmail.com",
21 | "url": "http://bassistance.de"
22 | },
23 | {
24 | "name": "Mike Sherov",
25 | "email": "mike.sherov@gmail.com",
26 | "url": "http://mike.sherov.com"
27 | },
28 | {
29 | "name": "TJ VanToll",
30 | "email": "tj.vantoll@gmail.com",
31 | "url": "http://tjvantoll.com"
32 | },
33 | {
34 | "name": "Felix Nagel",
35 | "email": "info@felixnagel.com",
36 | "url": "http://www.felixnagel.com"
37 | },
38 | {
39 | "name": "Alex Schmitz",
40 | "email": "arschmitz@gmail.com",
41 | "url": "https://github.com/arschmitz"
42 | }
43 | ],
44 | "repository": {
45 | "type": "git",
46 | "url": "git://github.com/jquery/jquery-ui.git"
47 | },
48 | "bugs": "https://bugs.jqueryui.com/",
49 | "license": "MIT",
50 | "scripts": {
51 | "test": "grunt"
52 | },
53 | "dependencies": {},
54 | "devDependencies": {
55 | "commitplease": "2.3.0",
56 | "grunt": "0.4.5",
57 | "grunt-bowercopy": "1.2.4",
58 | "grunt-cli": "0.1.13",
59 | "grunt-compare-size": "0.4.0",
60 | "grunt-contrib-concat": "0.5.1",
61 | "grunt-contrib-csslint": "0.5.0",
62 | "grunt-contrib-jshint": "0.12.0",
63 | "grunt-contrib-qunit": "1.0.1",
64 | "grunt-contrib-requirejs": "0.4.4",
65 | "grunt-contrib-uglify": "0.11.1",
66 | "grunt-git-authors": "3.1.0",
67 | "grunt-html": "6.0.0",
68 | "grunt-jscs": "2.1.0",
69 | "load-grunt-tasks": "3.4.0",
70 | "rimraf": "2.5.1",
71 | "testswarm": "1.1.0"
72 | },
73 | "keywords": []
74 | }
75 |
--------------------------------------------------------------------------------
/frontend/htmlcssjs/lesson/htmlcss/lesson/video.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
Video（/CSS レッスン）
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
28 |
29 |
30 |
31 |
32 |
33 |
Photograph
34 |
コメント コメント コメント コメント コメント コメント コメント コメント コメント
35 |
36 | Movie
37 |
38 |
39 |
40 |
57 |
58 |
59 |
60 |
61 |
64 |
65 |
66 |
--------------------------------------------------------------------------------
/backend/firebase-training/functions/src/router.ts:
--------------------------------------------------------------------------------
1 | import * as functions from 'firebase-functions'
2 | import * as express from 'express'
3 | import * as corsLib from 'cors'
4 | import UserController from './controller/UserController'
5 | import Result from './Result'
6 |
7 | const app = express()
8 | const cors = corsLib()
9 | const router = express.Router()
10 | router.use((request, response, next) => {
11 | return cors(request, response, () => {
12 | /**
13 | * middleware
14 | * ここでクロスドメイン制約や認証処理を行う
15 | * */
16 | console.log('request', request.body)
17 | next()
18 | })
19 | })
20 |
21 | /** /v1/helloWorld を指定して利用できる */
22 | router.use('/helloWorld', (request, response) => {
23 | console.log(request.method)
24 | response.status(200).send('HelloWorld')
25 | })
26 |
27 | /** /v1/item を指定して利用できる */
28 | router.use('/item', (request, response) => {
29 | const item: { id: number, message: string, postData: any } = {
30 | id: 0, message: 'item', postData: undefined
31 | }
32 | if (request.method === 'POST') {
33 | item.postData = request.body !== undefined && 'data' in request.body ? request.body['data'] : undefined
34 | }
35 | response.status(200).send(item)
36 | })
37 |
38 | /** /v1/page/1 を指定して利用できる */
39 | router.use('/page/:id', (request, response) => {
40 | const item: { id: number | undefined, message: string } = {
41 | id: undefined, message: 'page'
42 | }
43 | if (request.method === 'GET') {
44 | item.id = Number(request.params.id)
45 | }
46 | response.status(200).send(item)
47 | })
48 |
49 | /** /v1/user を指定して利用できる */
50 | router.use('/user', async (request, response) => {
51 | let result: Result = { code: 200, message: '' }
52 | try {
53 | if (request.method === 'GET') {
54 | result = await new UserController().getUsers()
55 | } else if (request.method === 'POST') {
56 | result = await new UserController().createUser(request.body)
57 | } else if (request.method === 'PUT') {
58 | result = await new UserController().updateUser(request.body)
59 | } else if (request.method === 'DELETE') {
60 | result = await new UserController().deleteUser(request.body)
61 | }
62 | } catch (error) {
63 | result = { code: 400, message: error.message, error: error }
64 | }
65 | response.status(result.code).send(result)
66 | })
67 |
68 | app.use('/v1', router)
69 |
70 | const api = functions.https.onRequest(app)
71 |
72 | export { api }
--------------------------------------------------------------------------------
/frontend/htmlcssjs/lesson/javascript/task/9/main.js:
--------------------------------------------------------------------------------
1 |
2 | /** 定義 */
3 | const intervalTime = 10;
4 |
5 | let startTime; // start選択時の時間
6 | let elapsedTime = 0; // 経過時刻を更新するための変数
7 | let timeToadd = 0; // タイマーをスタートさせてからストップした間の時間
8 | let timerId = null; // TimerID
9 |
10 | const result = document.getElementById('result');
11 | result.innerHTML = `00:00:000`;
12 |
13 | const startBtn = document.querySelector('#btn1');
14 | const stopBtn = document.querySelector('#btn2');
15 | const resetBtn = document.querySelector('#btn3');
16 | startBtn.addEventListener('click', timeStart);
17 | stopBtn.addEventListener('click', timeStop);
18 | resetBtn.addEventListener('click', timeReset);
19 | buttonControl('neutral');
20 |
21 | /** buttonの押下制御 */
22 | function buttonControl(type) {
23 | switch (type) {
24 | case 'start':
25 | startBtn.setAttribute('disabled', 'true');
26 | stopBtn.removeAttribute('disabled');
27 | resetBtn.setAttribute('disabled', 'true');
28 | break;
29 | case 'stop':
30 | startBtn.removeAttribute('disabled');
31 | stopBtn.setAttribute('disabled', 'true');
32 | resetBtn.removeAttribute('disabled');
33 | break;
34 | case 'reset':
35 | startBtn.removeAttribute('disabled');
36 | stopBtn.setAttribute('disabled', 'true');
37 | resetBtn.setAttribute('disabled', 'true');
38 | break;
39 | case 'neutral':
40 | startBtn.removeAttribute('disabled');
41 | stopBtn.setAttribute('disabled', 'true');
42 | resetBtn.setAttribute('disabled', 'true');
43 | break
44 | default:
45 | break
46 | }
47 | }
48 |
49 | /** スタート */
50 | function timeStart() {
51 | buttonControl('start');
52 | startTime = Date.now();
53 | timerId = setInterval(() => {
54 | elapsedTime = Date.now() - startTime + timeToadd;
55 | updateTime();
56 | }, intervalTime);
57 | }
58 |
59 | function updateTime(){
60 | let m = Math.floor(elapsedTime / 60000);
61 | let s = Math.floor(elapsedTime % 60000 / 1000);
62 | let ms = elapsedTime % 1000;
63 | m = ('0' + m).slice(-2);
64 | s = ('0' + s).slice(-2);
65 | ms = ('0' + ms).slice(-3);
66 | result.innerHTML = m + ':' + s + ':' + ms;
67 | }
68 |
69 | /** ストップ */
70 | function timeStop() {
71 | if (timerId != null) {
72 | buttonControl('stop');
73 | clearInterval(timerId);
74 | timeToadd += Date.now() - startTime;
75 | }
76 | }
77 |
78 | /** リセット */
79 | function timeReset() {
80 | if (timerId != null) {
81 | buttonControl('reset');
82 | elapsedTime = 0;
83 | timeToadd = 0;
84 | updateTime();
85 | }
86 | }
87 |
88 |
--------------------------------------------------------------------------------
/frontend/htmlcssjs/lesson/javascript/lesson_media/9/main.js:
--------------------------------------------------------------------------------
1 | // キャンバス要素の参照を取得
2 | const canvas1 = document.querySelector('#canvas-original');
3 | // コンテキストを取得
4 | const context1 = canvas1.getContext('2d');
5 | // Imageインスタンスを作成
6 | const img = new Image();
7 | // 画像読み込み後の処理
8 | img.onload = () => {
9 | // コンテキストを通してcanvasに描く
10 | context1.drawImage(img, 0, 0);
11 |
12 | // 画素情報を得る
13 | const imageData = context1.getImageData(0, 0, 150, 150);
14 | const data = imageData.data;
15 |
16 | const monoImageData = new ImageData(150, 150);
17 |
18 | const monoArr = monoImageData.data;
19 | for (let i = 0; i < data.length / 4; i += 1) {
20 | // 画素情報を取得
21 | const r = data[i * 4 + 0];
22 | const g = data[i * 4 + 1];
23 | const b = data[i * 4 + 2];
24 | const a = data[i * 4 + 3];
25 |
26 | // 平均値を求める（簡易的な計算のため）
27 | const color = (r + g + b) / 3;
28 |
29 | // 新しい配列に色を指定
30 | monoArr[i * 4 + 0] = color;
31 | monoArr[i * 4 + 1] = color;
32 | monoArr[i * 4 + 2] = color;
33 | monoArr[i * 4 + 3] = a;
34 | }
35 |
36 | // キャンバス要素の参照を取得
37 | const canvas2 = document.querySelector('#canvas-effected');
38 | // コンテキストを取得
39 | const context2 = canvas2.getContext('2d');
40 | // コンテキストに新しい画素情報を割り当てる
41 | context2.putImageData(monoImageData, 0, 0);
42 | };
43 | // 画像を読み込みを開始する
44 | img.src = 'sample.jpg';
45 |
46 | const btnDownload = document.querySelector('#btnDownload');
47 | btnDownload.addEventListener('click', () => {
48 | // キャンバス要素の参照を取得
49 | const canvas2 = document.querySelector('#canvas-effected');
50 |
51 | // ファイルの種類とファイル名を指定
52 | const mimeType = 'image/png';
53 | const fileName = 'download.png';
54 |
55 | // Base64文字列を取得
56 | const base64 = canvas2.toDataURL(mimeType);
57 |
58 | // Base64文字列からUint8Arrayに変換
59 | const bin = atob(base64.replace(/^.*,/, ''));
60 | const buffer = new Uint8Array(bin.length);
61 | for (let i = 0; i < bin.length; i++) {
62 | buffer[i] = bin.charCodeAt(i);
63 | }
64 |
65 | // Blobを作成
66 | const blob = new Blob([buffer.buffer], {
67 | type: mimeType
68 | });
69 |
70 | // 画像をダウンロードする
71 | if (window.navigator.msSaveBlob) {
72 | // for IE
73 | window.navigator.msSaveBlob(blob, fileName);
74 | } else if (window.URL && window.URL.createObjectURL) {
75 | // for Firefox, Chrome, Safari
76 | const a = document.createElement('a');
77 | a.download = fileName;
78 | a.href = window.URL.createObjectURL(blob);
79 | document.body.appendChild(a);
80 | a.click();
81 | document.body.removeChild(a);
82 | } else {
83 | // for Other
84 | window.open(base64, '_blank');
85 | }
86 | });
87 |
--------------------------------------------------------------------------------
/vuets/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
{{ msg }}
4 |
5 | For guide and recipes on how to configure / customize this project,
6 | check out the
7 | vue-cli documentation.
8 |
9 |
Installed CLI Plugins
10 |
17 |
Essential Links
18 |
25 |
Ecosystem
26 |
33 |
35 |
36 |
44 |
45 |
46 |
61 |
--------------------------------------------------------------------------------
/frontend/htmlcssjs/lesson/javascript/task/10/main.js:
--------------------------------------------------------------------------------
1 |
2 | /** 定義 */
3 | const defaultTime = 10000; // 10秒
4 | const intervalTime = 10;
5 |
6 | let countDownTime = defaultTime;
7 | let startTime; // start選択時の時間
8 | let elapsedTime = 0; // 経過時刻を更新するための変数
9 | let timeToadd = 0; // タイマーをスタートさせてからストップした間の時間
10 | let timerId = null; // TimerID
11 |
12 | const result = document.getElementById('result');
13 | updateTime(countDownTime);
14 |
15 | const startBtn = document.querySelector('#btn1');
16 | const stopBtn = document.querySelector('#btn2');
17 | const resetBtn = document.querySelector('#btn3');
18 | startBtn.addEventListener('click', timeStart);
19 | stopBtn.addEventListener('click', timeStop);
20 | resetBtn.addEventListener('click', timeReset);
21 | buttonControl('neutral');
22 |
23 | /** buttonの押下制御 */
24 | function buttonControl(type) {
25 | switch (type) {
26 | case 'start':
27 | startBtn.setAttribute('disabled', 'true');
28 | stopBtn.removeAttribute('disabled');
29 | resetBtn.setAttribute('disabled', 'true');
30 | break;
31 | case 'stop':
32 | startBtn.removeAttribute('disabled');
33 | stopBtn.setAttribute('disabled', 'true');
34 | resetBtn.removeAttribute('disabled');
35 | break;
36 | case 'reset':
37 | startBtn.removeAttribute('disabled');
38 | stopBtn.setAttribute('disabled', 'true');
39 | resetBtn.setAttribute('disabled', 'true');
40 | break;
41 | case 'neutral':
42 | startBtn.removeAttribute('disabled');
43 | stopBtn.setAttribute('disabled', 'true');
44 | resetBtn.setAttribute('disabled', 'true');
45 | break
46 | default:
47 | break
48 | }
49 | }
50 |
51 | /** スタート */
52 | function timeStart() {
53 | buttonControl('start');
54 | startTime = Date.now();
55 | timerId = setInterval(() => {
56 | elapsedTime = countDownTime - (Date.now() - startTime + timeToadd);
57 | updateTime(elapsedTime);
58 | if (elapsedTime < 0) {
59 | timeStop();
60 | timeReset();
61 | }
62 | }, intervalTime);
63 | }
64 |
65 | function updateTime(time) {
66 | let m = Math.floor(time / 60000);
67 | let s = Math.floor(time % 60000 / 1000);
68 | let ms = time % 1000;
69 | m = ('0' + m).slice(-2);
70 | s = ('0' + s).slice(-2);
71 | ms = ('0' + ms).slice(-3);
72 | result.innerHTML = m + ':' + s + ':' + ms;
73 | }
74 |
75 | /** ストップ */
76 | function timeStop() {
77 | if (timerId != null) {
78 | buttonControl('stop');
79 | clearInterval(timerId);
80 | timeToadd += Date.now() - startTime;
81 | }
82 | }
83 |
84 | /** リセット */
85 | function timeReset() {
86 | if (timerId != null) {
87 | buttonControl('reset');
88 | elapsedTime = 0;
89 | timeToadd = 0;
90 | countDownTime = defaultTime;
91 | updateTime(countDownTime);
92 | }
93 | }
94 |
95 |
--------------------------------------------------------------------------------
/backend/firebase-training/functions/src/auth_router.ts:
--------------------------------------------------------------------------------
1 | import * as functions from 'firebase-functions'
2 | import * as express from 'express'
3 | import * as corsLib from 'cors'
4 | import UserController from './controller/UserController'
5 | import Result from './Result'
6 | import * as admin from 'firebase-admin'
7 |
8 | const app = express()
9 | const cors = corsLib()
10 | const router = express.Router()
11 | router.use(async (request, response, next) => {
12 | return await cors(request, response, async () => {
13 | /**
14 | * クライアントから送られてきたアクセストークンとFirebase Authorizationのアクセストークンを比較する
15 | * 誤ったアクセストークンであればエラーで返す。
16 | * */
17 | try {
18 | const verify = await admin.auth().verifyIdToken(request.headers.authorization!)
19 | console.log('auth ok', verify.uid)
20 | next()
21 | } catch (error) {
22 | const result: Result = { code: 400, message: 'Bad authorization', error: error }
23 | response.status(result.code).send(result)
24 | }
25 | })
26 | })
27 |
28 | /** /v1/helloWorld を指定して利用できる */
29 | router.use('/helloWorld', (request, response) => {
30 | console.log(request.method)
31 | response.status(200).send('HelloWorld')
32 | })
33 |
34 | /** /v1/item を指定して利用できる */
35 | router.use('/item', (request, response) => {
36 | const item: { id: number, message: string, postData: any } = {
37 | id: 0, message: 'item', postData: undefined
38 | }
39 | if (request.method === 'POST') {
40 | item.postData = request.body !== undefined && 'data' in request.body ? request.body['data'] : undefined
41 | }
42 | response.status(200).send(item)
43 | })
44 |
45 | /** /v1/page/1 を指定して利用できる */
46 | router.use('/page/:id', (request, response) => {
47 | const item: { id: number | undefined, message: string } = {
48 | id: undefined, message: 'page'
49 | }
50 | if (request.method === 'GET') {
51 | item.id = Number(request.params.id)
52 | }
53 | response.status(200).send(item)
54 | })
55 |
56 | /** /v1/user を指定して利用できる */
57 | router.use('/user', async (request, response) => {
58 | let result: Result = { code: 200, message: '' }
59 | try {
60 | if (request.method === 'GET') {
61 | result = await new UserController().getUsers()
62 | } else if (request.method === 'POST') {
63 | result = await new UserController().createUser(request.body)
64 | } else if (request.method === 'PUT') {
65 | result = await new UserController().updateUser(request.body)
66 | } else if (request.method === 'DELETE') {
67 | result = await new UserController().deleteUser(request.body)
68 | }
69 | } catch (error) {
70 | result = { code: 400, message: error.message, error: error }
71 | }
72 | response.status(result.code).send(result)
73 | })
74 |
75 | app.use('/v1', router)
76 |
77 | const authApi = functions.https.onRequest(app)
78 |
79 | export { authApi }
--------------------------------------------------------------------------------
/frontend/vue-library-training/src/views/vuetify/VuetifyChildPage1.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
11 |
12 |
13 |
14 | {{ title }}
15 |
16 |
17 |
18 |
19 |
20 |
21 | v-cardのタイトル
22 | コメント コメント コメント コメント コメント コメント コメント コメント
23 |
24 |
25 |
26 | ダイアログ表示
27 |
28 |
29 | {{ dialogResult }}
30 |
31 |
32 |
33 |
34 |
35 |
38 |
39 |
40 | ダイアログ
41 |
42 |
43 | はい・いいえの選択肢ダイアログを表示します。
44 |
45 |
46 |
47 |
51 | はい
52 |
53 |
57 | いいえ
58 |
59 |
60 |
61 |
62 |
64 |
65 |
88 |
--------------------------------------------------------------------------------
/backend/firebase-training/firestore.rules:
--------------------------------------------------------------------------------
1 | service cloud.firestore {
2 | match /databases/{database}/documents {
3 | // match /{document=**} {
4 | // allow read, write;
5 | // }
6 | match /version/{versionId} {
7 |
8 | // ユーザーデータ
9 | match /user/{userId} {
10 | // 「ログイン状態」であれば、誰でも読み込みを許容する。
11 | allow read: if request.auth != null;
12 |
13 | // 「ログイン状態」且つ「ログインしたユーザーがFirestoreのドキュメントIDと同じ」であれば、書き込みを許容する。
14 | allow write: if request.auth != null && request.auth.uid == userId;
15 |
16 | // シークレットデータ
17 | match /secret/{secretId} {
18 | // 「ログイン状態」且つ「ログインしたユーザーがFirestoreのドキュメントIDと同じ」であれば、読み込み＆書き込みを許容する。
19 | allow read, write: if isAuthenticated() && isUserAuthenticated(userId);
20 | }
21 | }
22 |
23 | // 関数にまとめることができる。
24 | function isAuthenticated() {
25 | return request.auth != null;
26 | }
27 |
28 | function isUserAuthenticated(id) {
29 | return request.auth.uid == id;
30 | }
31 |
32 |
33 |
34 |
35 |
36 |
37 | // --- Lesson9ではこれ以降のセキュリティールールは使わない ---
38 | match /memo/{memoId} {
39 | allow read, write: if true;
40 | }
41 |
42 | match /shopitem/{shopitemId} {
43 | allow read, write: if true;
44 | }
45 |
46 | match /userpractice/{userpracticeId} {
47 | allow read, write: if true;
48 | match /health/{healthId} {
49 | allow read, write: if true;
50 | }
51 | }
52 |
53 | match /userstorage/{userstorageId} {
54 | allow read, write: if true;
55 | }
56 |
57 | // 他のドキュメントの情報を取得できる
58 | function getUserAccount(userID) {
59 | return get(/databases/$(database)/documents/version/$(versionId)/user/$(userID));
60 | }
61 |
62 | // グループデータ
63 | match /group/{groupId} {
64 | allow read: if isAuthenticated();
65 |
66 | // 「ログイン状態」且つ「userコレクションにログイン状態のユーザーデータ」があれば、作成と更新を許容する。
67 | allow create, update: if isAuthenticated() &&
68 | isUserAuthenticated(getUserAccount(request.auth.uid).data.uid);
69 |
70 | // 削除は許容しない。
71 | allow delete: if false;
72 | }
73 |
74 | // バリデーションの確認は一応できる
75 | function articleValidation() {
76 | return request.resource.data.text != '';
77 | }
78 |
79 | // 記事データ
80 | match /article/{articleId} {
81 | allow read: if isAuthenticated();
82 |
83 | // 「ログイン状態」且つ「userコレクションにログイン状態のユーザーデータが存在」且つ「バリデーションがOK」であれば、作成と更新を許容する。
84 | allow create, update: if isAuthenticated() &&
85 | isUserAuthenticated(getUserAccount(request.auth.uid).data.uid) &&
86 | articleValidation();
87 |
88 | allow delete: if isAuthenticated() &&
89 | isUserAuthenticated(getUserAccount(request.auth.uid).data.uid);
90 | }
91 | }
92 | }
93 | }
--------------------------------------------------------------------------------
/frontend/htmlcssjs/lesson/htmlcss/lesson/about.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
About（HTML/CSS レッスン）
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
28 |
29 |
30 |
31 |
32 |
33 |
About
34 |
SNAPPERS代表、山田太郎のプロフィールや経歴の紹介ページです。
35 |
36 |
37 |
38 |
Profile
39 |
やまだたろう
プロフィール プロフィール プロフィール プロフィール プロフィール プロフィール プロフィール プロフィール プロフィール
40 | プロフィール プロフィール プロフィール プロフィール プロフィール プロフィール プロフィール プロフィール
41 | プロフィール プロフィール プロフィール プロフィール プロフィール プロフィール プロフィール プロフィール
42 | プロフィール プロフィール プロフィール プロフィール プロフィール プロフィール プロフィール プロフィール
43 | プロフィール プロフィール プロフィール プロフィール プロフィール プロフィール プロフィール プロフィール
44 | プロフィール プロフィール プロフィール プロフィール プロフィール プロフィール プロフィール プロフィール
45 | プロフィール プロフィール プロフィール プロフィール プロフィール プロフィール プロフィール プロフィール
46 | プロフィール プロフィール プロフィール プロフィール プロフィール プロフィール プロフィール プロフィール
47 | プロフィール プロフィール プロフィール プロフィール プロフィール プロフィール プロフィール プロフィール
48 |
49 |
51 |
52 |
53 |
54 | Career and Job history
55 |
56 |
57 | | 2008年3月 |
58 | AAAA高専 卒業 |
59 |
60 |
61 | | 2010年3月 |
62 | BBBB大学 卒業 |
63 |
64 |
65 | | 2012年3月 |
66 | CCCC大学院 卒業 |
67 |
68 |
69 | | 2012年4月 |
70 | DDDD会社 入社 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
83 |
84 |
85 |
--------------------------------------------------------------------------------
/frontend/htmlcssjs/lesson/htmlcss/lesson/portfolio.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
Portfolio（HTML/CSS レッスン）
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
Portfolio
36 |
コメント コメント コメント コメント コメント コメント コメント コメント コメント コメント コメント コメント
37 |
38 |
39 | 
40 | コメント コメント コメント コメント コメント コメント コメント コメント コメント コメント コメント コメント
41 | コメント コメント コメント コメント コメント コメント コメント コメント コメント コメント コメント コメント
42 | コメント コメント コメント コメント コメント コメント コメント コメント コメント コメント コメント コメント
43 | コメント コメント コメント コメント コメント コメント コメント コメント コメント コメント コメント コメント
44 |
45 |
46 |
47 | 
48 | コメント コメント コメント コメント コメント コメント コメント コメント コメント コメント コメント コメント
49 | コメント コメント コメント コメント コメント コメント コメント コメント コメント コメント コメント コメント
50 | コメント コメント コメント コメント コメント コメント コメント コメント コメント コメント コメント コメント
51 | コメント コメント コメント コメント コメント コメント コメント コメント コメント コメント コメント コメント
52 |
53 |
54 |
55 |
72 |
73 |
74 |
75 |
76 |
79 |
80 |
81 |
--------------------------------------------------------------------------------
/backend/firebase-training/functions/src/index.ts:
--------------------------------------------------------------------------------
1 | import * as functions from 'firebase-functions'
2 | import * as admin from 'firebase-admin'
3 | import * as router from './router'
4 | import * as authRouter from './auth_router'
5 | import UserController from './controller/UserController'
6 | import Result from './Result'
7 |
8 | admin.initializeApp()
9 |
10 | export const helloWorld = functions.https.onRequest((request, response) => {
11 | response.send('Hello World')
12 | })
13 |
14 | export const requestTest = functions.https.onRequest((request, response) => {
15 | console.log('method', request.method, 'content-type', request.headers['content-type'])
16 | const resultParam: any = { message: '' }
17 | let responseCode: number = 200
18 | try {
19 | const data = request.body
20 | const id: string = data !== undefined && 'id' in data ? data.id : undefined
21 | if (request.method === 'GET') {
22 | resultParam.message = 'Request method is GET'
23 | } else if (request.method === 'POST') {
24 | resultParam.message = `Request method is POST. body is ${id}`
25 | } else if (request.method === 'PUT') {
26 | resultParam.message = 'Request method is PUT'
27 | } else if (request.method === 'DELETE') {
28 | resultParam.message = 'Request method is DELETE'
29 | }
30 | } catch (error) {
31 | responseCode = 500
32 | resultParam.message = error.message
33 | }
34 | response.status(responseCode).send({ code: responseCode, result: resultParam })
35 | })
36 |
37 | /**
38 | * express API
39 | * */
40 | export const api = router.api
41 |
42 |
43 | /**
44 | * trigger API
45 | * */
46 | /** ドキュメント作成時に発火 */
47 | export const createUser = functions.region('asia-northeast1').firestore
48 | .document(UserController.wildPath)
49 | .onCreate((snapshot: FirebaseFirestore.DocumentSnapshot, context: functions.EventContext) => {
50 | console.log('onCreate context', context)
51 | console.log('snapshot', snapshot)
52 | return true
53 | })
54 |
55 | /** ドキュメント更新時に発火 */
56 | export const updateUser = functions.region('asia-northeast1').firestore
57 | .document(UserController.wildPath)
58 | .onUpdate((change: functions.Change
, context: functions.EventContext) => {
59 | console.log('onUpdate context', context)
60 | console.log('change before', change.before)
61 | console.log('change after', change.after)
62 | return true
63 | })
64 |
65 | /** ドキュメント削除時に発火 */
66 | export const deleteUser = functions.region('asia-northeast1').firestore
67 | .document(UserController.wildPath)
68 | .onDelete((snapshot: FirebaseFirestore.DocumentSnapshot, context: functions.EventContext) => {
69 | console.log('onDelete context', context)
70 | console.log('snapshot', snapshot)
71 | return true
72 | })
73 |
74 | /**
75 | * secure API
76 | * */
77 | export const authHelloWorld = functions.https.onCall((data: any, context: functions.https.CallableContext) => {
78 | console.log('context')
79 | const response: Result = {
80 | code: 200,
81 | message: 'Hello World',
82 | data: {
83 | data: data,
84 | context: context
85 | }
86 | }
87 | return response
88 | })
89 |
90 | export const authApi = authRouter.authApi
--------------------------------------------------------------------------------
/backend/firebase-training/src/ts/firebase/model/Base.ts:
--------------------------------------------------------------------------------
1 | import firebase from 'firebase/app'
2 | import 'firebase/storage'
3 |
4 | export class Base {
5 | /** ドキュメントフィールド */
6 | uid: string // ドキュメントID
7 | createdAt?: firebase.firestore.Timestamp // 作成日
8 | updatedAt?: firebase.firestore.Timestamp // 更新日
9 |
10 | /** property */
11 | isSaved: boolean = false
12 |
13 | /** Firestore */
14 | path: string
15 | collectionName: string
16 | version: string = '4'
17 | db: firebase.firestore.Firestore
18 | collectionRef: firebase.firestore.CollectionReference
19 | documentRef: firebase.firestore.DocumentReference
20 | storage: firebase.storage.Storage
21 |
22 | constructor(collectionName: string, id: string | null = null) {
23 | this.db = firebase.firestore()
24 | this.collectionName = collectionName
25 | this.path = `version/${this.version}/${this.collectionName}`
26 | this.collectionRef = this.db.collection(this.path)
27 | this.storage = firebase.storage()
28 | if (id !== null) {
29 | this.uid = id
30 | } else {
31 | this.uid = this.collectionRef.doc().id
32 | }
33 | console.log(this.uid)
34 | this.documentRef = this.collectionRef.doc(this.uid)
35 | }
36 |
37 | /** Firestore 取得 */
38 | async get() {
39 | try {
40 | const snapshot: firebase.firestore.DocumentSnapshot = await this.documentRef.get()
41 | this.setProperty(snapshot)
42 | } catch (error) {
43 | throw error
44 | }
45 | }
46 |
47 | /** Firestore 削除 */
48 | async delete() {
49 | try {
50 | const batch: firebase.firestore.WriteBatch = this.db.batch()
51 | batch.delete(this.documentRef)
52 | await batch.commit()
53 | this.clear()
54 | } catch (error) {
55 | throw error
56 | }
57 | }
58 |
59 | /** モデルクラスの内部プロパティへセットする */
60 | protected setProperty(snapshot: firebase.firestore.DocumentSnapshot) {
61 | this.uid = snapshot.id
62 | if (snapshot.exists) {
63 | const data = snapshot.data()
64 | if (data !== undefined) {
65 | this.createdAt = 'createdAt' in data ? data.createdAt : undefined
66 | this.updatedAt = 'updatedAt' in data ? data.updatedAt : undefined
67 | this.isSaved = true
68 | }
69 | }
70 | }
71 |
72 | /** 保存するデータをまとめる */
73 | protected pack(isUpdate: boolean = false): any {
74 | const item: any = {}
75 | // 作成日と更新日
76 | const date = firebase.firestore.Timestamp.fromDate(new Date())
77 | if (isUpdate) {
78 | this.updatedAt = date
79 | if (this.updatedAt !== undefined) {
80 | item.updatedAt = date
81 | }
82 | } else {
83 | this.createdAt = date
84 | this.updatedAt = date
85 | if (this.isSaved !== true) {
86 | if (this.createdAt !== undefined) {
87 | item.createdAt = date
88 | }
89 | }
90 | if (this.updatedAt !== undefined) {
91 | item.updatedAt = date
92 | }
93 | }
94 | return item
95 | }
96 |
97 | /** モデルクラスの内部プロパティを初期化する */
98 | protected clear() {
99 | this.isSaved = false
100 | this.createdAt = undefined
101 | this.updatedAt = undefined
102 | }
103 | }
104 |
--------------------------------------------------------------------------------
/frontend/vue-library-training/src/views/vuetify/VuetifyTopPage.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
12 |
16 |
17 |
18 |
19 |
21 |
22 |
23 | {{ menu.icon }}
24 |
25 |
26 | {{ menu.label }}
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
43 |
44 | {{ toolberTitle }}
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
59 | © {{ footerTitle }}
60 |
61 |
62 |
63 |
64 |
65 |
66 |
100 |
--------------------------------------------------------------------------------
/backend/firebase-training/src/views/authentication/AnonymouslyPage.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 匿名認証
5 |
6 |
7 |
8 | {{ loginStatusText }}
9 |
10 |
11 |
17 | ログインする
18 |
19 |
25 | ログアウトする
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
119 |
--------------------------------------------------------------------------------
/backend/firebase-training/functions/src/controller/UserController.ts:
--------------------------------------------------------------------------------
1 | import Result from '../Result'
2 | import { firestore } from 'firebase-admin'
3 |
4 | export default class UserController {
5 |
6 | static path: string = 'version/5/user'
7 | static wildPath: string = `${UserController.path}/{userId}`
8 |
9 | async getUsers(): Promise {
10 | console.log('getUsers')
11 | const result: Result = { code: 200, message: 'Success' }
12 | try {
13 | const collection = firestore().collection(UserController.path)
14 | const snapshot = await collection.get()
15 | result.data = snapshot.docs.map((doc: any) => {
16 | const data = doc.data()
17 | if ('createdAt' in data) {
18 | data.createdAt = (data.createdAt as firestore.Timestamp).toDate()
19 | }
20 | if ('updatedAt' in data) {
21 | data.updatedAt = (data.updatedAt as firestore.Timestamp).toDate()
22 | }
23 | return data
24 | })
25 | } catch (error) {
26 | throw error
27 | }
28 | return result
29 | }
30 |
31 | async createUser(body: any): Promise {
32 | console.log('createUser')
33 | const result: Result = { code: 200, message: 'Success' }
34 | try {
35 | /** バリデーション */
36 | if (!('name' in body)) {
37 | throw new Error('Bad request body parameters.')
38 | }
39 | const name = body.name
40 |
41 | /** Firestore */
42 | const collection = firestore().collection(UserController.path)
43 | const id = collection.doc().id
44 | const document = collection.doc(id)
45 | const batch = firestore().batch()
46 | const dateAt = firestore.Timestamp.fromDate(new Date())
47 | const data = {
48 | uid: id,
49 | name: name,
50 | createdAt: dateAt,
51 | updatedAt: dateAt
52 | }
53 | batch.set(document, data, { merge: true })
54 | await batch.commit()
55 | result.data = data
56 | } catch (error) {
57 | throw error
58 | }
59 | return result
60 | }
61 |
62 | async updateUser(body: any): Promise {
63 | console.log('updateUser')
64 | const result: Result = { code: 200, message: 'Success' }
65 | try {
66 | /** バリデーション */
67 | if (!('name' in body && 'id' in body)) {
68 | throw new Error('Bad request body parameters.')
69 | }
70 | const name = body.name
71 | const id = body.id
72 |
73 | /** Firestore */
74 | const collection = firestore().collection(UserController.path)
75 | const document = collection.doc(id)
76 | const batch = firestore().batch()
77 | const dateAt = firestore.Timestamp.fromDate(new Date())
78 | const data = {
79 | name: name,
80 | updatedAt: dateAt
81 | }
82 | batch.update(document, data)
83 | await batch.commit()
84 | result.data = data
85 | } catch (error) {
86 | throw error
87 | }
88 | return result
89 | }
90 |
91 | async deleteUser(body: any): Promise {
92 | console.log('updateUser')
93 | const result: Result = { code: 200, message: 'Success' }
94 | try {
95 | /** バリデーション */
96 | if (!('id' in body)) {
97 | throw new Error('Bad request body parameters.')
98 | }
99 | const id = body.id
100 |
101 | /** Firestore */
102 | const collection = firestore().collection(UserController.path)
103 | const document = collection.doc(id)
104 | const batch = firestore().batch()
105 | batch.delete(document)
106 | await batch.commit()
107 | result.data = { uid: id }
108 | } catch (error) {
109 | throw error
110 | }
111 | return result
112 | }
113 | }
--------------------------------------------------------------------------------
/frontend/htmlcssjs/README.md:
--------------------------------------------------------------------------------
1 | # 【T.B.D 作成中】HTML/CSS/JavaScript
2 |
3 | > HTML/CSS/JavaScriptのトレーニングです。
4 |
5 | # 目次
6 | - [HTML/CSS](#HTML/CSS)
7 | - [JavaScript](#JavaScript)
8 |
9 | ## レッスン
10 | 本プロジェクトをcloneして以下のレッスンのサンプルコードを写経してください。
11 |
12 | ## HTML/CSS
13 | HTML/CSSのトレーニングです。こちらの[技術書](https://www.amazon.co.jp/dp/B0746F9XKD/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)をベースに必要な機能をピックアップしています。
14 |
15 | ### 素材
16 | 以下のサービスからフリーで使える素材をダウンロードできます。
17 |
18 | - [O-DAN](http://o-dan.net/ja/)
19 |
20 | ### 実装
21 | [こちらのコード](./lesson/htmlcss/)を写経してページを作成してください。
22 |
23 | ### 課題
24 |
25 | ## JavaScript
26 | JavaScriptのトレーニングです。こちらの[技術書](https://www.amazon.co.jp/JavaScript-%E3%82%B3%E3%83%BC%E3%83%89%E3%83%AC%E3%82%B7%E3%83%94%E9%9B%86-%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BEICS-%E6%B1%A0%E7%94%B0%E6%B3%B0%E5%BB%B6-ebook/dp/B07N8YVCRQ)をベースに必要な機能をピックアップしています。
27 |
28 | ### 実装
29 | [こちらのコード](./lesson/javascript/)を写経してページを作成してください。
30 |
31 | ### 課題
32 | #### 課題 1
33 | 画面上に「こんにちは」と表示する画面を実装してください。
34 |
35 | JSから要素のinnerHTMLへ「こんにちは」を設定して表示してください。
36 |
37 | 実行結果
38 |
39 | [index.html](https://programmable-school.github.io/Frontend-Training/frontend/htmlcssjs/lesson/javascript/task/1/index.html)
40 |
41 | #### 課題 2
42 | 時間によって挨拶を表示する画面を実装してください。
43 |
44 | JSでDate関数を使ってください。
45 |
46 | - 5時 - 11時： おはようございます
47 | - 12時 - 18時： こんにちは
48 | - 19時 - 0時： こんばんは
49 | - 1時 - 4時： 夜更かしさん
50 |
51 | 実行結果
52 |
53 | [index.html](https://programmable-school.github.io/Frontend-Training/frontend/htmlcssjs/lesson/javascript/task/2/index.html)
54 |
55 | #### 課題 3
56 | JSでfor文またはwhile文を使って、0から100までの数字を表示する画面を実装してください。
57 |
58 | 数字と数字の間は空白を入れるようにしてください。
59 |
60 | 実行結果
61 |
62 | [index.html](https://programmable-school.github.io/Frontend-Training/frontend/htmlcssjs/lesson/javascript/task/3/index.html)
63 |
64 | #### 課題 4
65 | 数字を0から100まで表示する画面を実装してください。
66 |
67 | 但し、5の倍数ごとに改行してください。
68 |
69 | 実行結果
70 |
71 | [index.html](https://programmable-school.github.io/Frontend-Training/frontend/htmlcssjs/lesson/javascript/task/4/index.html)
72 |
73 | #### 課題 5
74 | 3つのinputに入力された文字列を連結してが表示する画面を実装してください。
75 |
76 | 実行結果
77 |
78 | [index.html](https://programmable-school.github.io/Frontend-Training/frontend/htmlcssjs/lesson/javascript/task/5/index.html)
79 |
80 | #### 課題 6
81 | 足し算、引き算、掛け算、割り算する関数を実装してください。
82 |
83 | 実行結果
84 |
85 | [index.html](https://programmable-school.github.io/Frontend-Training/frontend/htmlcssjs/lesson/javascript/task/6/index.html)
86 |
87 | #### 課題 7
88 | textareaとbuttonを使って入力した項目を列挙して表示する画面を実装してください。
89 |
90 | 実行結果
91 |
92 | [index.html](https://programmable-school.github.io/Frontend-Training/frontend/htmlcssjs/lesson/javascript/task/7/index.html)
93 |
94 | #### 課題 8
95 | 課題 7にチェックボックスを設け、チェックされた項目を削除できる機能を実装してください。
96 |
97 |
98 | 実行結果
99 |
100 | [index.html](https://programmable-school.github.io/Frontend-Training/frontend/htmlcssjs/lesson/javascript/task/8/index.html)
101 |
102 | #### 課題 9
103 | ストップウォッチを実装してください。
104 |
105 | [参考サイト](https://qiita.com/ryomaDsakamoto/items/c49a9d4cd2017405af1b)
106 |
107 |
108 | 実行結果
109 |
110 | [index.html](https://programmable-school.github.io/Frontend-Training/frontend/htmlcssjs/lesson/javascript/task/9/index.html)
111 |
112 | #### 課題 10
113 | 課題 9をベースにカウントダウンタイマーを実装してください。
114 |
115 | 実行結果
116 |
117 | [index.html](https://programmable-school.github.io/Frontend-Training/frontend/htmlcssjs/lesson/javascript/task/10/index.html)
118 |
119 |
120 | [答え](./lesson/javascript/task/)
121 |
122 |
123 | ## 参考
124 | - [HTML＆CSSとWebデザインが 1冊できちんと身につく本](https://www.amazon.co.jp/dp/B0746F9XKD/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)
125 | - [JavaScript コードレシピ集](https://www.amazon.co.jp/JavaScript-%E3%82%B3%E3%83%BC%E3%83%89%E3%83%AC%E3%82%B7%E3%83%94%E9%9B%86-%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BEICS-%E6%B1%A0%E7%94%B0%E6%B3%B0%E5%BB%B6-ebook/dp/B07N8YVCRQ)
126 |
127 |
--------------------------------------------------------------------------------
/frontend/vue-library-training/src/router.ts:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Router from 'vue-router'
3 | import TopPage from './views/TopPage.vue'
4 | import VueRouterTopPage from '@/views/vuerouter/VueRouterTopPage.vue'
5 | import VueRouterAgendaPage from '@/views/vuerouter/VueRouterAgendaPage.vue'
6 | import VueRouterFirstPage from '@/views/vuerouter/VueRouterFirstPage.vue'
7 | import VueRouterSecondPage from '@/views/vuerouter/VueRouterSecondPage.vue'
8 | import VueStoreTopPage from '@/views/vuestore/VueStoreTopPage.vue'
9 | import VuetifyTopPage from '@/views/vuetify/VuetifyTopPage.vue'
10 | import VuetifyChildPage1 from '@/views/vuetify/VuetifyChildPage1.vue'
11 | import VuetifyChildPage2 from '@/views/vuetify/VuetifyChildPage2.vue'
12 | import VuetifyChildPage3 from '@/views/vuetify/VuetifyChildPage3.vue'
13 | import LocalForageRosterListPage from '@/views/localforage/LocalForageRosterListPage.vue'
14 | import AxiosLesson from '@/views/axios/AxiosLesson.vue'
15 | import DotenvLesson from '@/views/dotenv/DotenvLesson.vue'
16 | import NotFoundPage from '@/views/vuerouter/NotFoundPage.vue'
17 |
18 | Vue.use(Router)
19 |
20 | export default new Router({
21 | mode: 'history',
22 | base: process.env.BASE_URL,
23 | routes: [
24 | /**
25 | * Topページ
26 | */
27 | {
28 | path: '/',
29 | component: TopPage,
30 | },
31 | /**
32 | * VueRouterトレーニング用ページ
33 | * VueRouterTopPage.vueをrouter-viewでエントリーポイントのページとして設定し、
34 | * その配下にそれぞれのページを設定する。
35 | * childrenに設定されたページのURLは http:localhost:8080/vue_router_top_page/ から始まる。
36 | */
37 | {
38 | path: '/vue_router_top_page',
39 | name: 'vue_router_top_page',
40 | component: VueRouterTopPage,
41 | children: [
42 | {
43 | path: '/',
44 | name: 'vue_router_agenda_page',
45 | component: VueRouterAgendaPage,
46 | },
47 | {
48 | path: 'vue_router_first_page',
49 | name: 'vue_router_first_page',
50 | component: VueRouterFirstPage,
51 | },
52 | /**
53 | * pathに:idを指定するとURLにidが表示される。
54 | */
55 | {
56 | path: 'vue_router_second_page/:id',
57 | name: 'vue_router_second_page',
58 | component: VueRouterSecondPage,
59 | },
60 | ],
61 | },
62 | {
63 | path: '/vue_store_top_page',
64 | name: 'vue_store_top_page',
65 | component: VueStoreTopPage,
66 | },
67 | {
68 | path: '/vuetify_top_page',
69 | name: 'vuetify_top_page',
70 | component: VuetifyTopPage,
71 | children: [
72 | {
73 | path: '/',
74 | name: 'vuetify_child_page_1',
75 | component: VuetifyChildPage1,
76 | },
77 | {
78 | path: 'vuetify_child_page_2',
79 | name: 'vuetify_child_page_2',
80 | component: VuetifyChildPage2,
81 | },
82 | {
83 | path: 'vuetify_child_page_3',
84 | name: 'vuetify_child_page_3',
85 | component: VuetifyChildPage3,
86 | },
87 | ],
88 | },
89 | {
90 | path: '/local_forage_roster_list_page',
91 | name: 'local_forage_roster_list_page',
92 | component: LocalForageRosterListPage,
93 | },
94 | {
95 | path: '/axios_lesson',
96 | name: 'axios_lesson',
97 | component: AxiosLesson,
98 | },
99 | {
100 | path: '/dotenv_lesson',
101 | name: 'dotenv_lesson',
102 | component: DotenvLesson,
103 | },
104 | /**
105 | * NotFoundページ
106 | */
107 | {
108 | path: 'not_found_page',
109 | name: 'not_found_page',
110 | component: NotFoundPage,
111 | },
112 | /**
113 | * 該当しないパスは全てnot_found_pageにリダイレクトする。
114 | */
115 | {
116 | path: '*',
117 | redirect: { name: 'not_found_page' },
118 | },
119 | ],
120 | })
121 |
--------------------------------------------------------------------------------
/frontend/htmlcssjs/lesson/htmlcss/lesson/photograph.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Photograph（/CSS レッスン）
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
28 |
29 |
30 |
88 |
89 |
90 |
93 |
94 |
95 |
--------------------------------------------------------------------------------
/frontend/vue-library-training/src/views/dotenv/DotenvLesson.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | {{ title }} {{ version }}
10 |
11 |
12 |
13 |
14 |
15 |
18 | お問い合わせ先: {{ item.header }}
19 |
20 |
21 |
25 |
26 |
31 |
32 |
33 | ![]()
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
31 |
32 |
33 |
Contact
34 |
コメント コメント コメント コメント コメント コメント コメント コメント コメント コメント コメント コメント
35 |
36 | Access
37 |
38 |
39 | | 所在地住所 |
40 | 〒123-4567
徳島県徳島市 XXXX XXXX |
41 |
42 |
43 | | 電話番号 |
44 | 090-XXXX-XXXX |
45 |
46 |
47 | | 電車でのアクセス |
48 | 徳島駅より徒歩1分 |
49 |
50 |
51 | | お車でのアクセス |
52 | 徳島道ICより国道11号線経由で5分 |
53 |
54 |
55 |
56 |
57 |
58 | Contact form
59 |
91 |
92 |
93 |
94 |
4 | 
24 | 
27 | 
18 |
19 | 
