Mawa Town

Mawaという人が作る小さな町でMawaTownです。技術と音楽が好き。

Firebaseでプロジェクトをコード書いて=>WebAPIサーバーに仕立てるときのコマンドのメモ

memo

Firebaseを使い始めるときのコマンドのメモ

環境
MacOS
・npm
・FirebaseCLIでログイン済み

1:プロジェクトを作る

Webコンソールにログインして、プロジェクトを作っておく

2:コマンドを作業ディレクトリをつくって打つ

$ firebase init hosting

     🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥     🔥🔥🔥     🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥
     🔥🔥        🔥🔥  🔥🔥     🔥🔥 🔥🔥       🔥🔥     🔥🔥  🔥🔥   🔥🔥  🔥🔥       🔥🔥
     🔥🔥🔥🔥🔥🔥    🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥   🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥
     🔥🔥        🔥🔥  🔥🔥    🔥🔥  🔥🔥       🔥🔥     🔥🔥 🔥🔥     🔥🔥       🔥🔥 🔥🔥
     🔥🔥       🔥🔥🔥🔥 🔥🔥     🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥 🔥🔥🔥🔥🔥🔥🔥🔥  🔥🔥     🔥🔥  🔥🔥🔥🔥🔥🔥  🔥🔥🔥🔥🔥🔥🔥🔥

//なんかFirebaseぽいロゴが・・・笑

You're about to initialize a Firebase project in this directory:

  /自分が/設定した/ディレクトリ

=== Project Setup

? Select a default Firebase project for this directory: [create a new project]

// 手順1で作っておいたプロジェクトを選ぶ

=== Hosting Setup
? What do you want to use as your public directory? public

//public

? Configure as a single-page app (rewrite all urls to /index.html)? No

//N

✔  Firebase initialization complete!

Project creation is only available from the Firebase Console
Please visit https://console.firebase.google.com to create a new project, then run firebase use --add

//多分成功したっぽい

これでホスティングの準備ができた模様

3:functionsを初期化

functions/index.jsというのができるので、そこにWebAPIを書くとWebAPIサーバーの準備はできる

$ firebase init functions

//中略

=== Functions Setup

A functions directory will be created in your project with a Node.js
package pre-configured. Functions can be deployed with firebase deploy.

? What language would you like to use to write Cloud Functions? JavaScript
? Do you want to use ESLint to catch probable bugs and enforce style? No
✔  Wrote functions/package.json
✔  Wrote functions/index.js
? Do you want to install dependencies with npm now? Yes

4: functions/index.jsにコードを書く

ここは個々人の目的にあったAPIを書く

5: デプロイ

WebAPIの関数部分だけのデプロイはこのようにやるっぽい

(firebase.jsonがあるディレクトリで実行)
$ firebase deploy --only functions

//デプロイ先が出てくる。curlなどで試すとよい

//Error: Not in a Firebase app directory (could not locate firebase.json)

curlテストもうまくいき、とりあえずWebAPIの簡易サーバーはできた

参考になった書籍

React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発

React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発

Firebaseを使い始めるときのコマンドのメモ

memo

Firebaseを使い始めるときのコマンドのメモ

環境
MacOS
・npm

$ npm i -g firebase-tools@3.18.0

//わーっとたくさん出てくるWARNINGとか
//出ても気にしなくてOK

$ firebase login
? Allow Firebase to collect anonymous CLI usage and error reporting information? Y
// Yにとりあえずしといた

//ブラウザが開いて、グーグルアカウントでの認証を行う

✔  Success! Logged in as xxxxxxxxxx@gmail.com

//ログイン成功

これで使えるみたいです。

vue.jsとvuexの実装と挙動のメモ

f:id:k_mawa:20180617021558p:plain

memo

vueのざっくりとした流れのメモです。

vueの処理の流れ

componentxxx任意xxx.jsmethods,computeの部分

componentxxx任意xxx.js
data returnの部分で<template>に向けてデータバインディング

UI表示

vuex

state(簡易NoSQLみたいにメモリをつかっているのかな?後日検証。)

mutation(stateを更新)

action(mutationにcommit)

参考書籍

React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発

React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発

調性ついて弾いたことある曲、楽譜だけ持ってる曲との照合表についてのメモ

メモ

調性について勉強しました。課題曲や自分が好きな曲について調性ごとに個性があるように感じていたので、「やっぱそういう分類があるんだ〜」と嬉しくなりました。 一方でカラオケでキーを変える(調性を変更する)というのもあるし、その辺の兼ね合いが気になったのですが今回の調べによってよくわかりました。

作者の決めた調性はジャンルによって重んじられたりしなかったりする

  • クラシックは、原則作者の決めた調性によって演奏される(編曲などで変更されることがあるらしい)

  • JPOPとかは特に調性にこだわりないものが多い(ようだ。声の音域が当てはまるドレミファの範囲に移動するための基準にしかすぎない)

調性とイメージ

これはヴァイオリン弾いていて、なんか個人的に感じる(#2個のニ長調は、天真爛漫でかわいい感じ。#1個のト長調は厳かな気品のある感じという・・・)ので、色々な人の感想を見て楽しめました。

blog.goo.ne.jp

序盤の調性ごとの楽譜を持っている曲とイメージ

メモしてみました。途中で転調しているものもたくさんあります。あくまで序盤のキー(主調)だけかきました。

ト長調ホ短調ト短調が好きな曲が多いかな〜^^ ドラマチックで切ないけど美しい曲が多いイメージ

この本面白そう・・・買おうかな^^

vue.js開発過程記録vol.x:各コードの分析メモそのx:Djangoとの比較イメージメモ

f:id:k_mawa:20180617021558p:plain

経緯など

ちょっと既存のWebアプリ(Django/Python)に非同期処理をアプリにかけたいのでvue.jsを特訓することになったので、メモを残していきます。目標はWebAPIを叩けるようにするアプリです。

Djangoとの比較

今回はVue.jsとPythonフレームワークDjangoとの比較をしてみました。

自分がDjangoを日常的に使うので、理解を深めるためです。Webアプリのフレームワークの側面がともにあるため類似部分も見つかったのでDjangoユーザーの方にはもしかしたら役立つ資料になるかもしれないです。

比較イメージなので、完全に1対1対応してないのであいまいです。ざっくりイメージをつかむためなので厳密ではないです。

番号 Vue.js Django 備考
1 src/router/index.js projルート(settings.pyがある場所)/urls.py + settings.pyのINSTALLED_APP部分 URLまわりとアプリ適用設定
2 src/components/ app
3 src/components/hoge.vueの<script>部分 app/views.py
4 src/components/hoge.vueの<template>部分 template.html
5 src/components/hoge.vueの<style> template.html+staticファイルディレクトリからのインポート
6 src/assets staticファイルディレクト
7 src/main.js projルート(settings.pyがある場所)/settings.py(予想。検証中)
8 src/App.vue projルート(settings.pyがある場所)/settings.py(予想。検証中)
9 (用語)データバインディング render関数とテンプレートタグ HTMLへの出力

引用・参考書籍

React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発

React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発

この書籍のVue.jsの実装例を引用して仕組みを理解していきたいと思います。

vue.js開発過程記録2:hello worldアプリの構築コマンドの記録

f:id:k_mawa:20180617021558p:plain

経緯など

ちょっと既存のWebアプリ(Django/Python)に非同期処理をアプリにかけたいのでvue.jsを特訓することになったので、メモを残していきます。目標はWebAPIを叩けるようにするアプリです。

手順

環境構築のあたり、node.js&npmセットアップは以下に情報まとめています。

k-mawa.hateblo.jp

$ vue -V
2.9.6
// ちゃんと動きますね

$ vue init webpack newproj
//初期設定の質問がはじまります。

? Project name newproj //適当です
? Project description apitestapp //適当です
? Author mawa //自分の名前
? Vue build standalone //適当です
? Install vue-router? Yes //いるっぽい
? Use ESLint to lint your code? No //テストなので適当です
? Set up unit tests No //テストなので適当です
? Setup e2e tests with Nightwatch? No //テストなので適当です
? Should we run `npm install` for you after the project has been created? (recommended) npm //npmで開発アプリシミュレーターなど制御できる
   vue-cli · Generated "newproj".


# Installing project dependencies ...
# ========================

//ごちゃごちゃプロセスが始まります


# Project initialization finished!
# ========================

To get started:

  cd newproj
  npm run dev
  
Documentation can be found at https://vuejs-templates.github.io/webpack

//できた模様

$ ls
newproj

//できてますね

$ cd newproj/
$ ls
README.md       config          node_modules        package.json        static
build           index.html      package-lock.json   src

$ npm run dev

//しばし待ちます・・・mac miniで、1〜3分以内くらいでした・・・多分。

//http://localhost:8081で確認できましたね。
//画像は記事トップの画像です。

続き

次は、生成されたファイルのコア部分をチェックしていく予定です。

参考になった書籍

React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発

React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発

ベートーベンの三大ソナタとスプリング・ソナタについてのメモ

ベートーベン ピアノソナタ 「月光」 第1楽章

ベートーベン ピアノソナタ 「月光」 第1楽章

メモ

ベートーベンは、まだ自分が弾いたことないので、正月の第九とか運命とかの有名な曲とかしか知らない状態です。そこで、自分の習っている先生にちょっと教えてもらったので忘れないようにメモします。

ベートベンの3大ピアノソナタ

・『熱情』
・『月光』
・『悲愴』

悲愴の参考演奏はこちら。ホロヴィッツという名手の模様です。第2楽章が特に有名らしいです。ちょっとどこかで聴いたことあるような気はします・・・

ベートベンで有名なヴァイオリン曲

『スプリングソナタ

軽やかな感じですね^^ 難しそ〜^^;