[JS] 9年前の診断テスト作成スクリプトを今風に書き直してみた

陰陽師のミコマラ中手持ち無沙汰だったので、9年前MooToolsを使ってこさえたやつ、

[MooTools] 診断テスト作成スクリプト Diagnosizm

これをライブラリ依存なしで書き直してみた。

“[JS] 9年前の診断テスト作成スクリプトを今風に書き直してみた” の続きを読む

[Vue] 続 Constraint Validation API パスワード強度ゲージの表示

[Vue] HTML5 Form Validation を利用するフォーム要素コンポーネント の続き。
脆弱なパスワードかどうか診断してその強さを表示するやつ、Wordpressにも備わってるあれをVueでやる。

“[Vue] 続 Constraint Validation API パスワード強度ゲージの表示” の続きを読む

[JS] Firebase Authentication を使ってみての覚書 ③ OAuth認証

Google, Twitter, Facebook等のOAuth系認証は使うProviderクラスが変わるだけでやることは同じ。なのでまとめました。
Facebook認証とTwitter認証はデベロッパーアカウントでのアプリ設定が必要なのでGoogle認証より手間がかかる。
“[JS] Firebase Authentication を使ってみての覚書 ③ OAuth認証” の続きを読む

[Vue] ファイルアップロード&バリデーション ( use bootstrap-vue )

See the Pen
vue.js(bootstrap-vue) File Upload
by Tenderfeel (@Tenderfeel)
on CodePen.

なんでか初回はonchangeが反応しない挙動があった。
プレビュー表示ならwatchでv-model監視する手もあるな🤔と思った。

draganddropの判別にmodernizr使おうとしたら存在しなかったんだけど消えたんですかね。
ないものは仕方ないからisMobileでPCだけドラッグドロップUIになるようにしてます。

“[Vue] ファイルアップロード&バリデーション ( use bootstrap-vue )” の続きを読む

[JS] Firebase Authentication を使ってみての覚書 ① メールアドレス認証

Firebaseの認証でメールアドレス&パスワード、メールリンク、Google、Twitter…と一通り実装してみたなかではメールアドレス&パスワード認証が一番面倒臭かった。
この記事はその面倒くさいメアド認証にまつわる各種手順を脳内整理がてらメモったものです。

殆どはFirebaseの公式ドキュメントに書いてあることなので、主要な関数名などにはドキュメントへのリンクを貼ってあります。

“[JS] Firebase Authentication を使ってみての覚書 ① メールアドレス認証” の続きを読む

[Vue] HTML5 Form Validation を利用するフォーム要素コンポーネント

2年前に書いた HTML5 Form Validationサンプル(jQuery + Bootstrap 4.0 + Constraint Validation API) の Vue版です。

HTML5のフォーム要素に備わっているValidation機能(Constraint Validation API)を利用するフォーム要素のコンポーネントと、それを利用したフォームのサンプルを作ってみた。

“[Vue] HTML5 Form Validation を利用するフォーム要素コンポーネント” の続きを読む

[JS] PHPのarray_combineをJavaScriptで

array_combine — 一方の配列をキーとして、もう一方の配列を値として、ひとつの配列を生成する

ピコ太郎のPPAPがまんまそのイメージ。

つまりこういうのがやりたい:

const key = ['green', 'red', 'yellow'];
const val = ['avocado', 'apple', 'banana'];
↓
{"green":"avocado","red":"apple","yellow":"banana"}

“[JS] PHPのarray_combineをJavaScriptで” の続きを読む

[Vue] ページング機能の作り方(弐)コンポーネントのテスト作成入門

[Vue] ページング機能の作り方とコンポーネント作成入門 からの続き。
続きなので前の記事で作ったやつがないとできません!

引き続きCodeSandboxでやります。
ローカルに環境作った方はそちらでどうぞ。

CodeSandboxのプレビューのところに、Testsっていうタブがあるのに気づきましたか?

これ、テストを実行して結果を表示してくれる便利機能です。
今回はこの機能を使えるようにします!

“[Vue] ページング機能の作り方(弐)コンポーネントのテスト作成入門” の続きを読む

[Vue] ページング機能の作り方とコンポーネント作成入門

[PHP] ページング機能の仕組みとか作り方とか が今年で10周年!

今はPHPを書くことはWordpressを魔改造するときくらいで、もっぱらJavasScriptを使う事が多いです。
2018年はずっとVueと戯れていたので、Vueのコンポーネントとしてページング機能を実装するにはどうするのかという視点でまとめてみます。

環境構築は面倒くさいのでCodeSandbox使います!
なのでローカルにインストールからやってみたい方はVueの公式ドキュメント片手にトライしてどうぞ。

“[Vue] ページング機能の作り方とコンポーネント作成入門” の続きを読む