Posts with tag: #javascript

JavaScriptによる画像処理と便利なライブラリ

2019-01-14
javascriptcanvas%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86opencvwebassemblyfabric.jsclmtrackrpico.js
目次 概要 Canvas APIについて ImageDataについて 基本的な画像変換 物体検出 顔検出 顔検出 + フィッティング OpenCV と WebAssembly fabric.js 概要 JavaScript + canvas…
Read more →

文字列のAAを自動生成 デモ + サンプルコード JavaScript

2019-01-03
html5javascript%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
目次 概要 サンプル画像 デモ デモ解説 ソース HTML JavaScript 解説 概要 文字列から文字列のAA…
Read more →

3次元の回転行列(オイラー角)で画像を回転させる (roll pitch yaw)【JS】

2019-01-02
javascript%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
目次 概要 3次元の回転行列 回転行列のサンプルコード 画像を回転させるデモ 結果 参考 概要 JavaScriptを用いて、3次元の回転行列で画像を回転させるサンプルを紹介します。…
Read more →

全角かな or カナを半角カナに変換する【JS】

2018-12-28
html5javascript
目次 概要 デモ サンプルコード HTML JS 概要 全角かなもしくは全角カナを半角カナに変換するサンプルコードとデモを紹介します。 デモ サンプルコード HTML JS
Read more →

canvas上のマウス座標を取得する。【JS】

2018-12-26
html5javascript
目次 概要 考え方 サンプルコード デモ ソース 参考 概要 HTMLのcanvasの上でマウスを動かした時の座標の取得方法を紹介します。 考え方 ** canvas上のマウス座標 = window上のマウス座標 - canvas…
Read more →

深さ優先探索アルゴリズムを実装 部分和問題を解く

2018-12-25
javascript%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0%E7%AB%B6%E6%8A%80%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0atcoder
目次 深さ優先探索について 部分和問題を解いてみる 問題 サンプルコード デバッグ 例題: AtCoder ABC015 C 解説 ソースコード おまけ : 2進数を利用して 深さ優先探索について 深さ優先探索(depth-first search)は探索手法の一つです。 DFS…
Read more →

素因数分解を行うプログラム サンプルコード JS/PHP

2018-12-24
javascriptphp%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0atcoder
目次 概要 サンプルコード JavaScript PHP 概要 ある任意の正の整数の素因数を配列で返すサンプルコードを紹介します。 サンプルコード JavaScript パターン1 : 純粋な素因数分解 デバッグ パターン2 : 指数部と仮数部に分ける デバッグ PHP
Read more →

【JS】画像のリアルタイム物体検出 数行で実装 デモ有 TensorFlow.js coco-ssd

2018-12-18
javascript%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86TensorFlow
目次 概要 オブジェクト検出 試す サンプルコードと解説 scriptタグで始める coco-ssd API デモ デモのサンプルコード 参考 概要 TensorFlow.js+coco-ssdを用いて、…
Read more →

JavaScript + canvasで砂嵐を描画する サンプルコード

2018-12-12
html5javascript%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86
目次 概要 動作環境 デモ サンプルコード canvasの各ピクセルへの参照方法 おまけ 概要 JSとcanvasで砂嵐を描画するサンプルコード紹介します。 動作環境 chrome 61~ デモ 外部ウィンドウで開く サンプルコード ちょっとだけ解説。 canvas…
Read more →

10進数からN進数に変換するプログラム

2018-12-06
javascript%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0
目次 概要 N進数を求めるプログラム ソース 実行すると... 参考 概要 ある任意の10進数からN進数に変換するプログラム(JavaScript)を紹介します。 N進数を求めるプログラム ソース ある任意の10進数xをn…
Read more →

iOSかAndroidかの判定 UserAgentを利用する 【JavaScript】

2018-11-18
javascript
目次 概要 サンプルソース UAのサンプル 参考 概要 JSでiOSかAndroidかの判定を行う方法。 サンプルソース やっていることは、UAに特定の文字列が含まれているかどうかという方法で端末を判断しています。 で返り値が1以上であれば、iPhone…
Read more →

csvをmarkdownのテーブル & HTMLに変換するスクリプト

2018-11-18
html5javascript
目次 概要 デモ ソース 概要 VueJSとmarkedJSでcsv形式のデータをmarkdownのテーブルもしくはHTMLのテーブルに変換するスクリプトを作りました。 デモ 新しいタブで開く ソース
Read more →

複数キーでソートするサンプルコード JavaScript

2018-11-05
javascript%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0%E7%AB%B6%E6%8A%80%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0node.js
目次 概要 サンプルソースとソートのパターン 2列目と3列目で昇順ソートする 概要 JavaScriptでの複数キーでソートするサンプルソースの例。 サンプルソースとソートのパターン 以下のような配列があるとする。 2列目と3列目で昇順ソートする ソース 結果
Read more →

mavonEditor と Vue.js で作るMarkdownエディタのデモ + APIの紹介

2018-10-14
html5css3javascript
目次 概要 mavonEditor セットアップ カスタマイズ デモ コード APIの紹介 プロパティ ツールバー イベントメソッド おまけ : mavonEditorのサイズの固定 概要 mavonEditor https://github.com/hinesboy…
Read more →

3つ以上の整数の最大公約数・最小公倍数を求める JavaScript

2018-10-14
javascript%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0
目次 概要 最大公約数 2つの整数の最大公約数を求める 3つ以上の整数の最大公約数を求める 最小公倍数 2つの整数の最小公倍数を求める 3つ以上の整数の最小公倍数を求める 概要 JavaScriptで…
Read more →

NodeJSでsitemapをパースしてURLを抽出する。

2018-09-25
javascript%E3%82%B9%E3%82%AF%E3%83%AC%E3%82%A4%E3%83%94%E3%83%B3%E3%82%B0node.jssitemap
目次 概要 環境 + 利用したもの 実装 実装で気をつけたポイント シンプルに配列を返すパターン 非同期実行にする場合 出力 概要 NodeJSでsitemap.xmlからURLを抽出する方法のメモ。 ちょっとググるとsitemap-stream-parser…
Read more →

Monaco Editorを使ってブラウザ上で動くAtCoder用のデバッグアプリを作る【JS】

2018-09-23
javascriptatcodermonaco%20editor
目次 概要 デモ 他のJavaScript製エディタと比べて 追記 2019/05/04 参考 概要 https://tech-blog.s-yoshiki.com/2018/08/435/ 以前書いた「【JavaScript】AtCoder…
Read more →

WebAssemblyのデモ。特に注目すべきデモを集めてみた。

2018-09-21
javascriptwasmwebassembly
目次 概要 SLコマンド Qt Vim OpenCV + knn matchデモ Unity 概要 WebAssemblyのデモ。特に注目すべきデモを集めてみました。 基本的にはChromeかFireFox、safariでしか動かないものだと思います。 SLコマンド http…
Read more →

OpenCVをEmscriptenでwasmにビルドする!Webブラウザから呼び出す。OpenCV.js

2018-09-16
javascript%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86opencvwasm
目次 概要 環境 使用するもの OpenCV4.0.0(pre) Emscripten LLVM OpenCV.jsの紹介 About LLVMとEmscripten チュートリアル OpenCV.jsのビルド 環境のセットアップ Emscripten OpenCV…
Read more →

JS + Canvasで画像をプルプルふるわせる。

2018-09-13
javascript
目次 概要 デモ ソース その他 概要 canvas + JSで画像をプルプル震わせる。 デモ ソース その他 setTimeout使ってるあたりがダサいですね。Promiseが使えるよう勉強します。
Read more →

【JavaScript】角度を16方位に変換するソースコード

2018-09-11
javascript%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A016%E6%96%B9%E4%BD%8D
目次 概要 ソース 概要 与えられたある角度を16方位に変換する。 よくありがちな処理としてこんなものがあります。 JSの場合、 IEEE75…
Read more →

tesseract.js + canvasを組み合わせてOCRを行う

2018-09-09
javascript
目次 概要 実装 imageDataオブジェクト DEMO 概要 tesseract.jsはWebブラウザで動くOCRエンジンです。オフィシャルサイトからデモをみることができると思います。 フロントのjsで動かす場合、canvas…
Read more →

JavaScript + canvasで画像変換処理をするときのスニペット

2018-09-03
html5javascript
目次 概要 ソース グレイスケール 2値化 ネガポジ変換 ガンマ補正 デモ サンプルコード 関連 概要 canvasはJSによって図形などを描画する際に使われます。 canvas…
Read more →

JSでルーレットを作った。

2018-09-02
html5css3javascript
目次 概要 DEMO 追記 2019/01/20 概要 だいぶ前にJSで作ったルーレットを公開します。 特にフレームワークとか使っていません。 DEMO デモ | 別ウィンドウで開く 以上。 追記 2019/01/2…
Read more →

【JavaScript】AtCoderとかでも利用したい、ブラウザで動くエディタ + デバッグ環境を作る

2018-08-29
javascriptsemantic%20ui%E7%AB%B6%E6%8A%80%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0atcoderaceeditor
目次 概要 デモ ソース 解説 AceEditor Semantic UI 追記 2019/05/04 背景 AtCoderとかで使いたいブラウザで動くJS用のエディタ + デバッグ環境を作りました。AceEditor とか使ってます。 来週からこれ使って頑張ります。https…
Read more →

HTMLの中からaタグ・imgタグのリンクだけを抽出するツールを作った【JS】

2018-08-04
html5javascriptdomparser
目次 概要 デモ DomParserの紹介 DOMParser の生成 aタグLinkの取得 ソース HTML JS 参考 概要 HTMLの中からaタグ・imgタグのリンクを抽出するツールを作りました。 a href抽出 img src抽出 HTMLテキストをコピペするとa…
Read more →

【Python】顔画像をPOST 、 顔検出 、 canvasで顔にお絵かき【JS】

2018-07-11
javascriptcanvaspython%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86opencv
目次 概要 環境 フロント サーバ アプリケーション フロント サーバ 参考 概要 「顔検出をして、顔に絵を描く」というもの。 具体的には、 顔写真の画像をAPIサーバへアップロードし、顔検出を行う。 サーバは顔座標を返し、それを元にcanvas…
Read more →

【JavaScript】K-meansを使って画像を減色する。全てフルスクラッチ【canvas】

2018-07-01
html5javascript%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92%E5%8F%AF%E8%A6%96%E5%8C%96
目次 概要 K-means 結果 処理のフロー デモ 参考 概要 K-menasで画像を減色してみた。 JavaScript + canvasを使用。 OpenCVとかライブラリは使わず全てフルスクラッチ K-means…
Read more →

【JavaScript】K近傍法を可視化してみた【canvas】

2018-06-24
javascriptcanvas%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92%E5%8F%AF%E8%A6%96%E5%8C%96k%20meansk%E8%BF%91%E5%82%8D%E6%B3%95knn
目次 概要 処理のフロー デモ 入力フィールド 概要 機械学習とかで用いられるK近傍法を JavaScriptで実装しCanvasで可視化してみた。 あらかじめクラスタ化されたデータが必要となるので、 以前作成した、K-menas…
Read more →

【JavaScript】凸包(グラハムスキャン)を可視化・アニメーション【Canvas】

2018-06-21
html5css3javascriptcanvas%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0%E5%8F%AF%E8%A6%96%E5%8C%96%E5%87%B8%E5%8C%85
目次 概要 凸包 DEMO 参考 概要 前回に引き続き 凸包(グラハムスキャン)のスキャンする様子をアニメーションにして可視化してみた。 ライブラリとかは使わず、Canvasにそのまま描画する。 凸包 凸包 - WikiPedia…
Read more →

【JavaScript】凸包(ギフト包装法)を可視化・アニメーション【Canvas】

2018-06-16
html5javascriptcanvas%E5%8F%AF%E8%A6%96%E5%8C%96%E5%87%B8%E5%8C%85
目次 概要 凸包 DEMO 参考 概要 凸包(ギフト包装法)のスキャンする様子をアニメーションにして可視化してみた。 ライブラリとかは使わず、Canvasにそのまま描画する。 凸包 凸包 - WikiPedia…
Read more →
s-yoshiki
s-yoshiki
githubtwitterqiita
Web作ってますが、インタラクティブなプログラミングも好きです。
JavaScript / Vue / node.js / PHP / AWS / OpenCV

最新の投稿

SQL整形ツールを作成した
特徴 使い方 FW/ライブラリ等 nuxt sql-formatter-plus Monaco Editor おまけ ソース SQL整形ツールを作成しました。 URLはこちらです。 SQL…

ファイルの1行目を表示 Linuxコマンド head
head コマンド例 headコマンドでファイルの 1行目もしくは指定した行数だけ表示する方法。 head 利用できるオプション コマンド例 の 1行目だけを表示 の 5行目までを表示 カレントディレクトリ以下の全てのtxtファイルの1行目を表示

Amazon S3 と ローカルファイルのチェックサムの比較
s3apiでEtagを取得 検証 マルチアップロード時の注意点 Amazon S3 の Etagを使ってファイルの整合性チェックをする。 s3apiでEtagを取得 S3 APIを利用するとEtagを取得します。この値はmd5のハッシュ値になります。 検証 MD…

github.io / gitlab.ioで公開されている質の高い技術ドキュメント
AWSによるクラウド入門 Pythonプログラミング入門 普通の人が資産運用で99点をとる方法とその考え方 2018年の段階で私が知らないこと github.io / gitlab.io で無料で公開されている興味深いドキュメントのmemo AWS…

10進数から2進数 2進数から10進数への変換 JavaScript
10進数から2進数 2進数から10進数 テスト 10進数から2進数、2進数から10進数への変換を行うJavaScriptのコードの紹介。 JSの場合、10進数から2進数への変換はメソッド。2進数から1…

JavaScriptの配列ショートハンド (AtCoder用)

JavaScriptでワーシャルフロイド法を実装
AtCoder ABC012 D問題 D - バスと避けられない運命 解説 実装 AtCoder ABC012 の D問題でワーシャルフロイド法が利用できる問題が出てきたので、 JavaScriptで実装しました。 AtCoder ABC012 D問題 D…

GitHub Actions で Gatsby をビルドし Amazon S3 にデプロイする
GitHub Actions について あらかじめ準備しておくもの AWS IAM ユーザを環境変数にセットする workflowの記述 ビルド バッジを利用する 終わりに 参考にしたところ Gatsbyで作った静的サイトを、GitHub Actions…

cloudinaryによる画像ファイルの管理 はじめてみる
目的 cloudinary について 他のサービスとの比較 料金プラン アカウントの登録 利用してみる ダッシュボード 画像の編集 APIベースでのアクセス 感想 参考 画像の管理や配信、さらには加工といった事ができるsaas型のcloud…

JavaScriptによる2分探索(バイナリサーチ) のサンプルコード
2分探索について ソース 参考 JavaScriptで2分探索(バイナリサーチ)を実装してみました。…

Tags

Dates

© 2020   404 motivation not found