SE_BOKUのまとめノート的ブログ

SE_BOKUが知ってること・勉強したこと・考えたことetc

PG:JavaScript

HTMLのテーブルでチェック行の情報だけ処理するサンプル/PHP・JavaScript

目次 HTMLのテーブルでチェック行の情報だけ処理するサンプル/PHP・JavaScript サンプルの概要 ソース全文です ポイント1:JavaScriptでチェックボックスの選択状態取得 ポイント2:PHPでのチェックボックスのついた行の処理 まとめ HTMLのテーブルでチェ…

ブラウザで動くシンプルな万年カレンダーを作る/素のJavaScript(Vanilla JS)だけ

素のJavaScript(Vanilla JS)だけで、ライブラリとかを使わずに作るシンプルな月間カレンダー。

JavaScriptでリアルタイムに顔認識して顔にモザイク風マスクをかぶせる/pico.js(3)

JavaScriptのみで高速に顔認識できる「pico.js」の応用として、WEBカメラに映った自分の顔を認識してモザイク風のマスクをかぶせるってのをやってみます。

JavaScriptで顔認識した顔を囲む形の変更/任意の画像でマスクする/pico.js(2)

JavaScriptのみで高速に顔認識ができる「pico.js」の応用をやってみます。囲む枠を変更してみたり、パンダのイラストを重ねてみたり。

JavaScriptで高速顔認識ができる「pico.js」の使い方(1)

JavaScriptのみで高速に顔認識ができる「pico.js」の使い方です。まずは、静止画(写真)を使って基本的なところから。

パソコン付属のWEBカメラでブラウザに映像を映すJavaScriptサンプル(最近版)

久しぶりにWEBカメラを使おうとしたら、ちょっとエラーがでたので。

CanvasAPIチュートリアル(3)/HTML5&JavaScript

Html5のCanvasAPIのよくできたチュートリアルを見つけたので、参考にして、いくつかやってみました・・・の3回目です。

CanvasAPIチュートリアル(2)/HTML5&JavaScriptだけで動く丸時計とか

Html5のCanvasAPIのチュートリアルを参考にやってみた・・の2回目です。

CanvasAPIチュートリアル(1)/HTML5&JavaScript

Html5のCanvasAPIだけを使って、ゴリゴリとグラフィックを描いてみるってのはやったことがないなと思ってたら、とてもよくできたチュートリアルを見つけたので、やってみました。

JavaScriptでグラフを描けるChart.jsで縦横同じサイズの散布図を描く

簡単にできると思ってたら、意外に情報がなくて苦労したので、備忘を兼ねて書いておきます。

素のJavaScript(Vanilla JS)でファイルのドラッグ&ドロップ処理を実装する

以前はjQueryで実装していたものを、ライブラリを使用しないよう書き換えました。

ドラッグ&ドロップした画像ファイルをBase64変換する/javascript(jQuery)サンプル

WEB画面にドラッグ&ドロップした画像ファイルを、Base64形式に変換してtextareaにセットするのと、画像を表示するのを両方やってみます。

ブラウザで手描きした画像をBase64テキストにエンコードする/プレーンJavaScript+Fabric.js

もともとjQueryで実装していましたが、巣のJavaScriptにリライトしました。

画像ファイルをドラッグ&ドロップで受け取り一覧表示する/Nuxt.js+Buefy

Nuxt.jsで画像ファイルをドラッグ&ドロップで受け取り、Base64に変換してから、IMGタグで表示する・・というのをやってみます。ついでに、Fileオブジェクトの情報(名前。タイプ・サイズ)を加えて複数ファイルをうけつけた時に一覧表っぽく表示します。

Nuxtでライブラリ「Vuex」で状態を管理し、vue.jsの「v-if」で状態を参照して分岐する

今回は、 「Vue.js アプリケーションのための 状態管理パターン + ライブラリです」などと紹介されているVuexとヘルパの基本的な使い方を確認しつつ、画面遷移しても状態を表すデータを保持できていることを確認するデモを作ってみます。いちおう、自己流チ…

JavaScriptのテストフレームワーク「ava」の基本的な使い方をまとめてみる。

JavaScriptのテストフレームワークの「ava」の使い方を簡単に整理してみます。

Nxut+CSSフレームワーク「Buefy」でアイコンセット「Font Awesome」を使う方法

UIフレームワークの「Buefy」を使うと、モダンなアイコンセット「Font Awesome」を簡単に使えるようになります。

Nuxtアプリの体裁を整える「Bulma」ベースのUIフレームワーク「Buefy」をざっくり

今回は画面にUIフレームワーク「Buefy」を適用して、画面の体裁を整えます。ちょっとだけ「マシに見える」程度にはしたいなと思います。

NuxtでavaScript プラグインを定義して作る/thisで参照とコンテキストで参照の2パターン

今回は、Nuxt.jsで「プラグイン」を2種類作って、asycData()とmethodsの各ブロックの中で使ってみます。

Nuxtアプリケーションで使うVue.js/Select選択値の変数バインドと@changeイベントハンドリング

今回は、Selectの選択値の変数へのバインドです。あわせて2つのSelectを並べて、片方の選択内容にあわせて、もうひとつのSelectの内容を更新するのをやってみます。

Nuxtアプリケーションで使うVue.js機能の確認/input入力内容の変数へのバインドと@clickイベントハンドリング

今回は、テキストボックス(Input)への入力バインドと、@clickを使ったイベントハンドリングとメソッドの呼び出しと画面の部分更新などをやってみます。

Nuxtアプリ開発で使うVue.jsのディレクティブ・テンプレート構文/API-KEYが必要なWeb-Apiの利用など

今回は条件付きレンダリング(v-if)やリストレンダリング(v-for)および変数参照方法などのVue.jsベースの基本的なところを確認していきます。

Nuxtアプリケーションの基本/各フォルダの役割・画面遷移・静的アクセス・WEB-APIからデータを取得

NUXT.JSの基本的な機能や利用方法を整理したチュートリアルをまとめてみます。しばらく「NUXT自己流チュートリアル」というテーマで、続き物を書いていく予定で、今回は、その1回目です。

Windows10でNuxt.js(Vue.js)を開発・実行確認できる環境を構築/Nvm・Node.js・Nuxt.js(Vue.js)

Nuxt.js(Vue.js)を、Windows10にインストールして使える環境を作ります。実は、Nuxt.jsを理解するのに七転八倒した経験を踏まえて、こんなんがあったら助かったのにな・・を「自己流流チュートリアル」にまとめようと思ってたりします。なので、今回は、そ…

JavaScript:ノートPCのカメラで自作のAR(拡張現実)を動かす/AR.js+A-Frame

ひょんな事からAR(拡張現実)なるものを試してみることになったので、やり方を一通りまとめてみました。AR.jsとA-Frameです。

forループの中の「on」ブロック内のfunction()が正しく動かない/JavaScript(備忘)

forループの中のonブロックに書いた処理が意図した通りに動かないという「よくある問題」のケース紹介と対処法を備忘のために書いておきます。

表示するページのHeghtにあわせて<iframe>のHeightを自動的に変更するJavaScript

iframe内にコンテンツを表示する際にハマりやすい・・というか自分がハマった・・問題について解決策をメモっておきます。

JavaScriptでLaTex並みの数式表示能力を持つ「MathJax.js」で表示できないギリシャ文字チェック

MathJaxで表示できないギリシャ文字があって解決できてません。なので、とりあえず、切り分けだけしてみました。

JavaScriptでLATEX 並みの数式表示能力を実現する「MathJax.js」をはてなブログで使えるようにする

前回、はてなブログの見たままモードで、数式を書く仕組みである「MathJax.js」について、基本的な使い方と数式例を整理してみました。