WebAPI
- 便利ページ：Web Bluetooth APIでBLEデバイスに接続
- WebUSBを使ってブラウザのJavaScriptからArduinoを制御してみよう！
- Geolocation API
- Sensor API
- Videoタグ
- カメラキャプチャ
- WebRTCサンプル
- [WebRTC] Vue.jsとFirebaseでWebRTC簡単入門
Firebase
- Firebase Authentication 7つの落とし穴 - 脆弱性を生むIDaaSの不適切な利用
- Firebaseで1時間で簡単なWebチャットアプリが作れるハンズオン
- Firebase で hello world と表示するページを作る方法
- Firebase の web アプリにメールアドレスでユーザ登録をさせて確認メールを送る
- Firestore への書き込み、読み込みを最小限のコードと手順でやる
- Firebase Firestoreのエミュレーターを使ってローカルで開発する
- Firestore Security Rules の書き方と守るべき原則
firebase emulators の storage も使えるようになりました。下記のコードでいけます (firebase v8の場合）
.js
import firebase from 'firebase/app';
require("firebase/functions");
require("firebase/firestore");
require("firebase/storage");
// 以下に apiKey のコードを貼る
const firebaseConfig = {
apiKey: "xxxxxx",
authDomain: "yourproject.firebaseapp.com",
projectId: "yourproject",
storageBucket: "yourproject.appspot.com",
messagingSenderId: "xxxxxxxxxxxx",
appId: "1:yyyyyyyyy:web:xxxxxxxxxxx"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const isEmulating = window.location.hostname === "localhost";
if (isEmulating) {
firebase.auth().useEmulator("http://localhost:9099");
firebase.functions().useEmulator("localhost", 5001);
firebase.firestore().useEmulator("localhost", 8080);
firebase.storage().useEmulator('localhost', 9199);
}
storage エミュレータは windows で動かすと、400kb より大きいファイルを置こうとすると、落ちることがあるようです。どうしても落ちる場合は、storage と auth だけ emulator から外します。
vue2 / firebase v8
yarn install 時のバージョンは下記に揃えておけば、従来通りいけるようです。
.sh
$ npm -v
8.1.3
$ node -v
v14.18.1
(firebase ではv16 にしろと言われるかも）
$ yarn -v
1.22.11
$ firebase --version
10.2.1
$vue --version
@vue/cli 4.5.13
$ vue create myapp
(vue2)
$ cd myapp
$ vue add vuetify
(default)
$ yarn add firebase@^8.10.0
$ yarn add firebaseui@^5.0.0
$ yarn add vue-router@^3.2.0
$ yarn add @mdi/font
$ yarn dev
(動作テスト)
$ firebase init
$ yarn build
$ firebase init emulators
$ firebase emulators:start
gitbun からレポジトリを clone した場合
.sh
$ yarn install
$ firebase use myproject
# 必要に応じて
$ cd functions
$ npm i
$ cd ..
$ yarn build
$ firebase emulators:start
Vue 参考資料
- Vue.jsの タグには複数の役割がある
- Vue-routerで遷移時にパラメタを渡し方
- Vue.jsのslotの機能を初心者にわかるように解説してみた
- Vue.js+VueRouterでページの離脱、再読込、別ルートへの移動時に警告を表示する
- 【Vue.js】propsと$emitの基本の使い方を具体例を交えて解説
- Vue.js: v-forで項目インデックスをkey属性にしていいのか:v-for で key を index にしている場合に、配列の要素を部分削除、追加するとおかしくなることがある。
- 【Vue】単一ファイルコンポーネントの命名規則まとめ【ファイル名から記法まで】: props や component の名前の付け方のルール。絶対に知っておくべき。
Vuetify
- テーブル、カレンダー、ダイアログ
- Vuetifyのv-dialogを使う方法
- レイアウト微調整に便利な Spacing Helper Vuetify を使ってみる
- Vuetify.js 2.2のGridSystemについて
- Vuetify.js で余白を設定する
Vuetify でエラーがでないままレンダリングされない場合は、v-bind,.v-on, v-model, v-slot あたりに設定されている変数やメソッド名が、script 以下に定義されていないことが多い。
M5Stack
Javascript 関連
-
JavaScript Primer: ここを100回くらい読むべき
-- 関数とthis: アロー関数と匿名関数は等価ではない！
-- 暗黙的な型変換
-- 非同期処理:コールバック/Promise/Async Function -
厳格モード:
'use strict'
公開資料
- ミクシィの21新卒技術研修の資料と動画を公開します！：モバイルアプリ、Unity 関連
- 2021年のエンジニア新人研修の講義資料を公開しました：Webアプリ関連
- リテラシーレベルモデルカリキュラム対応教材：各大学の公開テキスト等