async awaitで画像を読み込み canvasに描画 JavaScript

2019-06-23
html5javascriptcanvasasyncawaitpromise
目次 概要 async サンプルコード 概要 async await Promise を使ってブラウザにアップロードした画像をcanvasに非同期で描画するサンプルの紹介です。 onloadメソッド縛りで実装すると非同期地獄になりますが、async await…
Read more →

OpenCV.jsを動かしてみる + デモ

2019-06-22
javascript%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86opencvwasmopencv.js
目次 概要 環境 OpenCV.jsのセットアップ サンプルソース グレースケール 2値化 Cannyエッジ 輪郭抽出 ガウシアン デモ 概要 OpenCV.jsを試してみました。 環境 OpenCV.js v4.1.0 OpenCV.jsのセットアップ OpenCVをWasm…
Read more →

GitHub の CONTRIBUTING には何を書けばいいのか?

2019-06-21
git
目次 はじめに サンプル js-primer 参考 はじめに GitHubのOSSプロジェクトを見ているとリポジトリのルート直下に存在する CONTRIBUTING.md というファイルをよく目にします。 これは、OSS…
Read more →

AWS S3のオブジェクト一覧をPHPで表示させる

2019-06-19
amazon%20awsphps3iamaws%20sdk
目次 概要 S3アカウント サンプル 概要 AWS S3のオブジェクト一覧をPHPで表示させるサンプルコードの紹介. S3アカウント S3バケット参照用のユーザの作成方法は以下を参照してください。 https://tech-blog.s-yoshiki.com/2019/0…
Read more →

Cyberduck で AWS S3に接続する

2019-06-12
amazon%20awsmacs3%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83iamcyberduck
目次 概要 Cyberduck で S3に接続 検証環境 接続手順 S3接続ユーザの作成 ユーザ作成ページまでの遷移 アカウント詳細設定 アカウント権限の設定 アクセスキーIDとシークレットアクセスキー S3バケットを作成する オプションの設定 アクセス許可の設定 S…
Read more →

AWS S3のアクセスキーIDとシークレットアクセスキーの取得 作業用ユーザを作成

2019-06-12
amazon%20awslinuxs3%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83iam
目次 概要 ユーザの作成 ユーザ作成ページまでの遷移 アカウント詳細設定 アカウント権限の設定 アクセスキーIDとシークレットアクセスキー ユーザの削除 概要 AWS S3 接続用のアカウントを作成する方法の紹介。 ここで作成するユーザはS…
Read more →

JavaScriptで画像のヒストグラムの正規化

2019-06-10
html5javascriptcanvas%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86100%E6%9C%AC%E3%83%8E%E3%83%83%E3%82%AF
目次 概要 サンプルソース 概要 画像のヒストグラムを正規化するコードの紹介 サンプルソース
Read more →

docker コンテナとホストでディレクトリをマウントしてファイル共有

2019-06-10
linux%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83dockerdocker%20ce
目次 概要 コマンド 概要 dockerのコンテナとホストマシンの間でディレクトリをマウントしてファイル共有する方法 コマンド 例
Read more →

bit全探索で動的計画法を実装する JavaScript

2019-06-10
%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%E5%8B%95%E7%9A%84%E8%A8%88%E7%94%BB%E6%B3%95dp%E3%83%93%E3%83%83%E3%83%88%E6%BC%94%E7%AE%97javascript
目次 概要 サンプル1 サンプル2 参考 概要 AtCoderとかをやっていると、 動的計画法(DP)、部分和といった問題とかに遭遇したりしますが、…
Read more →

dockerでオリジナルのイメージを作成 外部出力まで

2019-06-09
linuxdockerdocker%20cecentos%E3%82%B3%E3%83%B3%E3%83%86%E3%83%8A
目次 概要 docker の 導入 ベースのdockerイメージの導入 イメージの検索 イメージのpull…
Read more →

Macにdockerをインストール

2019-06-09
linuxmacdockerdocker%20cedocker%20composehomebrew
目次 概要 インストール 概要 Macにdockerをインストールします。 インストール homebrewを使ってインストールします。 https://brew.sh/index_ja ターミナルから以下のコマンドで実行します。 hellow world…
Read more →

gitbookで使えそうなプラグインを集めて見た

2019-06-05
node.jsgitgitbookgraphvizplantumluml
目次 概要 目次の折りたたみ - expand-active-chapter インストール 設定 参考 コードハイライト - gitbook-plugin-prism インストール 参考 ツリービュー インストール 設定 参考 UML - gitbook-plugin-uml…
Read more →

gitbookを使ってドキュメントを生成する

2019-06-05
macgitgitbook
目次 概要 どんなものができるのか 検証した環境 gitbookのインストール プロジェクトの作成 ディレクトリ構成について ドキュメントの記述 日本語化 ビルドインサーバの起動 ビルドとHTMLの生成 PDFの生成 参考 概要 GitBook…
Read more →

画像のヒストグラムを表示する Chart.js JavaScript canvas

2019-05-26
html5javascript%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86100%E6%9C%AC%E3%83%8E%E3%83%83%E3%82%AFchart.js
目次 概要 ヒストグラム算出のサンプルコード インストール ヒストグラム表示クラス ヒストグラム算出 デモ 出力結果 参考 概要 画像のヒストグラムをJavaScriptで算出してグラフとして表示してみます。 ヒストグラム算出のサンプルコード ヒストグラムの表示にChart.js…
Read more →

VIEWの作成 ORACLE MySQL

2019-05-19
%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9mysqloraclesqlview
目次 概要 VIEWの作成 構文 VIEWから抽出する 参考 概要 VIEWの作成の基本文法。 SQLで毎回結合したクエリを生成するのが面倒だった場合VIEWを使います。 VIEWの作成 OracelもMySQLも同じようです。 構文 VIEWから抽出する VIEW…
Read more →

SQLを分けると DML DDL DCL の3種類

2019-05-19
%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9mysqloraclesqldmlddldcl
目次 SQLとは DML DDL DCL SQLとは データベースの問い合わせ言語です。 大きく分けると3種類あります。 DML レコードの操作 (追加、検索、更新、削除) などを行います。 SELECT INSERT UPDATE DELETE など DDL…
Read more →

WSL領域のファイルをエクスプローラで操作する。mountコマンド

2019-05-19
linuxubuntuwindowswslmount
目次 はじめに 環境 mountコマンドでディレクトリをマウントする 参考 はじめに タイトルだけを見ると誤解されそうなので正しく説明します。 WSL上では /mnt/c/ にWindowsのCドライブがマウントされています。 例) /mnt/c/Users, /mnt/c…
Read more →

画像のプーリング処理 canvas + JavaScript

2019-05-19
html5javascript%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86vue.js%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86100%E6%9C%AC%E3%83%8E%E3%83%83%E3%82%AF%E3%83%97%E3%83%BC%E3%83%AA%E3%83%B3%E3%82%B0cnn
目次 概要 プーリング処理について サンプルソース デモ 参考文献 概要 JavaScriptで画像のプーリング処理を行ってみました。 プーリング処理について プーリングは畳み込みに似た処理で、CNN…
Read more →

Ubuntuにnパッケージでnode.js環境をセットアップする

2019-05-06
ubuntunode.jsnpmnnvm
目次 概要 検証環境 nodejs npm のインストール TLSエラーの回避 参考 概要 Ubuntuにnode.js環境をセットアップする方法です。 aptで入れようとするとバージョンが古かったり、コマンドがnodejsだったり色々と面倒なので、 n…
Read more →

VSCodeからSSHでリモートサーバ上のファイルを編集する

2019-05-06
linuxubuntusshnode.jsmac%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83vscode
目次 概要 SSHによるリモート開発について 機能の概要 機能要件 ローカル環境 リモート環境 Macから試したてみた 環境 VS Code Insider build SSH:Remoteのインストール ssh_configの設定 VSCode…
Read more →

JSで画像をまとめて読み込む(プリロードする)

2019-05-06
html5javascript
目次 概要 サンプルコード デモ 参考 概要 JSで画像をまとめて読み込む方法(プリロード)の紹介 JSのImageAPIのonloadを使って、複数の画像の読み込み完了時にイベントを発火させる方法です。 async…
Read more →

JavaScriptで多次元配列の初期化を行う

2019-05-05
javascript
目次 概要 1次元配列 2次元配列 3次元配列 参考 概要 JavaScript(ES2015)で多次元配列を任意の値で初期化する方法について。 1次元配列 例えば、 と宣言した場合 となります。 ここでfillメソッドを使うことで初期化することができます。…
Read more →

ブラウザで動くAtCoder用のデバッガを作ってみた (JSのみ)

2019-05-02
javascript%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%B0atcodermonaco%20editorvue.jsbootstrap
目次 概要 AtCoder-JsDebugger 説明 フレームワーク、ライブラリなど 概要 ブラウザで完結するAtCoder用のデバッガを作ってみました。 対応言語は(JS)のみになっています。 というのも、書いたコードをブラウザ上でeval…
Read more →

画像の減色処理 サンプルコードとデモ JavaScript + canvas

2019-04-10
javascriptcanvas%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86100%E6%9C%AC%E3%83%8E%E3%83%83%E3%82%AF
目次 概要 減色処理について デモ ソース 概要 画像の減色処理を行ってみた。 サンプルコードとデモの紹介。 環境は JavaScript + Canvas。 減色処理について 通常、Canvas上での画像のRGBそれぞれの値は0〜255までの256^…
Read more →

画像のHSV変換 JavaScript + canvas

2019-04-08
javascriptcanvas%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86100%E6%9C%AC%E3%83%8E%E3%83%83%E3%82%AFhsv
目次 概要 デモ ソース 参考 概要 画像のHSV変換を行うサンプルコードとデモの紹介 デモ 以下のリンクでデモを動かしています。 https://s-yoshiki.github.io/Gasyori100knockJS/#/questions/ans5 デモの内容はRGB…
Read more →

大津の二値化で画像を2値化 JavaScript + canvas 【画像処理】

2019-04-07
javascriptcanvas%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86100%E6%9C%AC%E3%83%8E%E3%83%83%E3%82%AF
目次 概要 デモ サンプルソース 大津の2値化 概要 大津の二値化で画像を2値化するサンプルコード https://tech-blog.s-yoshiki.com/2019/04/1115/ ↑のサンプルコードでは閾値を128として決め打ちで…
Read more →

画像を2値化する JavaScript + canvas 【画像処理】

2019-04-07
javascriptcanvas%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86100%E6%9C%AC%E3%83%8E%E3%83%83%E3%82%AF
目次 概要 デモ サンプルソース 概要 JavaScriptで画像を2値化するサンプルコードの紹介。 デモ https://s-yoshiki.github.io/Gasyori100knockJS/#/questions/ans…
Read more →

画像をグレースケールに変換する JavaScript + canvas 【画像処理】

2019-04-07
javascriptcanvas%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86100%E6%9C%AC%E3%83%8E%E3%83%83%E3%82%AF
目次 概要 グレースケール変換式 デモ サンプルソース 概要 JavaScriptで画像をグレースケールに変換するサンプルコードの紹介。 グレースケール変換式 ここではグレースケール画像変換式は次のように定義しています。 デモ ここからデモを試すことができます。 https…
Read more →

画像のチャンネル(RGB)を入れ替えるJavaScript + canvas【画像処理】

2019-04-07
javascriptcanvas%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86100%E6%9C%AC%E3%83%8E%E3%83%83%E3%82%AF
目次 概要 実行イメージ デモ ソース 概要 JavaScriptで画像のチャンネルを入れ替えるコードについての紹介。 やりたいことは、通常、RGBで並んでいる画像の配列をBGRに変換するというもの。 変換すると以下のような画像になります。 環境はJavaScript…
Read more →

ブラウザ上でWindowsXPが動く??

2019-03-28
javascript%E5%B0%8F%E3%83%8D%E3%82%BFreactwindows
目次 紹介 エミュレータでもVMでもなく Reactによって作られたものだそうです。 完成度高ぃ demohttps://t.co/mjBg4pkgNa pic.twitter.com/s0bkHFyKHO — s-yoshiki…
Read more →

JavaScriptで画像処理100本ノックに挑戦してみた

2019-03-27
javascriptcanvas%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86vue.js%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86100%E6%9C%AC%E3%83%8E%E3%83%83%E3%82%AF
目次 画像処理100本ノックについて JavaScriptで挑戦してみる デモサイト GitHub フロントの実装について 問題の解説 JSで挑戦するメリット・デメリット 関連 画像処理100本ノックをJavaScriptで挑戦してみました。 Qiita…
Read more →

vue-cli3のセットアップと開発サーバ起動からバンドルファイル生成まで

2019-02-24
javascriptvue.jswebpack
目次 概要 検証環境 vue@cliの導入 vueプロジェクトの作成 開発・本番ビルドの設定 各項目の設定 参考 概要 Vue.jsで作ったアプリをGitHub Pagesで公開する方法について。 検証環境 nodejs 11.10.0 npm 6.7.0 vue@cli 3.…
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