画像をグレースケールに変換する 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.jswebpacknode.js
目次 概要 検証環境 vue@cliの導入 vueプロジェクトの作成 開発・本番ビルドの設定 各項目の設定 参考 概要 Vue.jsで作ったアプリをGitHub Pagesで公開する方法について。 検証環境 nodejs 11.10.0 npm 6.7.0 vue@cli 3.…
Read more →

Proxy環境下で快適に作業する設定メモ

2019-01-27
linuxcurlproxy%E3%83%97%E3%83%AD%E3%82%AD%E3%82%B7gitgnu%20bashzshwget
目次 概要 対象環境 Linux / Unix 環境 + WSL環境 bash / zsh curl wget apt Git 概要 社内Proxy…
Read more →

PHPで簡単ページング処理を実装する サンプルコード

2019-01-26
php%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%8D%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%B3%E3%82%B0
目次 概要 環境 作るもの ソース 概要 PHPで簡単なページング処理を書いてみました。 環境 PHP 7.1.19 Smarty 3.1.33 作るもの 簡単なページング処理を作ります。 具体的には、ある取得したデータ(サンプルソースでは51件)に対し1ページに1…
Read more →

PHPにSmartyをセットアップ

2019-01-26
phpsmarty%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%B3
目次 概要 試した環境 Smartyについて ダウンロード smartyの配置 Smarty呼び出し 概要 PHPにSmartyをセットアップをするメモ 試した環境 PHP 7.1.19 Smarty 3.1.33 Smartyについて https://www.smarty…
Read more →

PHP + Smartyで超簡単なページング処理とサンプルコード

2019-01-26
%E6%9C%AA%E5%88%86%E9%A1%9Ephpsmarty%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%8D%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%B3%E3%82%B0
目次 概要 環境 Smartyのセットアップ 作るもの ソース テンプレート 概要 PHPで簡単なページング処理を書いてみました。 環境 PHP 7.1.19 Smarty 3.1.33 Smartyのセットアップ GitHubから適当なバージョンの物を落としてきます。 PHP…
Read more →

S3 で静的サイトをホスティングする

2019-01-25
amazon%20awsamazon%20s3
目次 概要 バケットの作成と公開設定 静的ホスティングの設定 概要 S3でバケットに置いたHTMLなどを静的サイトとしてホスティングする方法を紹介します。 バケットの作成と公開設定 S3バケットの作成と公開設定はここを参考にしてください。 https://tech-blog.s…
Read more →

S3にパブリック公開バケットを作成する

2019-01-25
amazon%20awsamazon%20s3
目次 概要 S3バケットを作成する オプションの設定 アクセス許可の設定 S3アクセス権限の公開設定 アップロードを試す 概要 AWSのS3に公開用の設定をしたバケットを作成する方法について(ざっくり)紹介します。 なお、AWS…
Read more →

画像にモザイクをかける JavaScript canvas デモあり

2019-01-24
html5javascript%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86%E3%83%A2%E3%82%B6%E3%82%A4%E3%82%AF
目次 概要 デモ画像 デモ サンプルソース 概要 JavaScript + canvasでブラウザでアップロードした画像にモザイクをかけるデモを作成しました。 デモ画像 スライダーを動かし、モザイクの粒度を決めます。 例えば、10と選択した場合は 10ピクセル x 1…
Read more →

JavaScript canvasで扇型を描画するサンプル

2019-01-20
javascriptcanvas
目次 概要 解説 デモ 概要 canvasで扇型を描画するサンプルを紹介します。 解説 https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/arc 扇型はCanvas API…
Read more →

JPG画像を圧縮する OpenCV + Python

2019-01-20
python%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86opencv
目次 概要 環境 説明 ソース セットアップ 実験 概要 ブログなどにアップする画像を比較的簡単に圧縮する方法がないか探していたところ、 PythonとOpenCVで簡単に実装出来そうでした。 そこで、Python + OpenCV…
Read more →

回転ルーレットを作る JavaScript + canvas

2019-01-17
html5javascriptcanvas%E3%83%AB%E3%83%BC%E3%83%AC%E3%83%83%E3%83%88
目次 概要 デモ 簡単な解説 扇型の描画 減速 ソース 概要 JavaScriptとcanvasで回転するルーレットを作りました。 Runボタンを押すと回転開始。stop…
Read more →

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 →

画像の拡張子を一括置換する コマンド Linux Mac WSL

2019-01-09
linuxmacmime%20type
目次 概要 環境 前提条件 コマンド 概要 画像の拡張子を一括で置換するコマンドの紹介です。 ディレクトリ内で拡張子が大文字だったり小文字だったり統一されてない状態から全て同じ拡張子に統一することができます。 環境 Linux (Ubuntu18.04) Mac OS X…
Read more →

フラットファイルCMS「Grav」をドキュメントールート外にインストールする

2019-01-07
cmsgrav
目次 概要 Gravのインストール Gravのクローン 公開領域の設定 概要 https://tech-blog.s-yoshiki.com/2019/01/984/ フラットファイルCMS「Grav…
Read more →

フラットファイルCMS Grav に管理ページの追加と日本語化

2019-01-04
cmsgrav
目次 概要 検証環境 管理機能の導入 Gravのアップデート adminのインストール 日本語化 概要 https://tech-blog.s-yoshiki.com/2019/01/984/ ファイルベースで動くPHPのCMS「Grav…
Read more →

ファイルベースで動くPHPのCMS「Grav」の紹介とインストールとセットアップまで

2019-01-04
markdownphpcmsgrav
目次 概要 Gravについて 他のCMSの比較 環境 インストール Gitでのインストール PHPビルトインサーバで起動する Apache + Linuxで起動する Apache パーミッションの設定 トラブルシューティング 概要 Flat-File CMS(RDBMS…
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 →

Python + OpenCVで顕著性 (saliecy) マップを実装

2018-12-14
python%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86opencv
目次 概要 顕著性マップ OpenCVに用意されている3つの顕著性検出アルゴリズム Static saliency StaticSaliencySpectralResidual_create() StaticSaliencyFineGrained_create…
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 →

Macでターミナルからポートスキャンを行う方法。

2018-12-09
linuxmacapple
目次 概要 nmap nmapのインストール コマンドを叩く 概要 Macでターミナルからポートスキャンを行う方法を紹介します。 nmap ターミナルからポートスキャンを行うにはnmapコマンドを使います。 しかしながら、mac…
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 →

【AtCoder】ABCで初めてC問題が解けました。【ABC114】

2018-12-03
%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%B0
目次 はじめに AtCoderについて はじめてC問題が解けました C問題を解いた時のパフォーマンス おまけ:解いた問題 C - 755 問題 計算例 回答ソース JavaScript おまけ2 はじめに AtCoderについて http://osrehun…
Read more →
s-yoshiki
s-yoshiki
githubtwitterqiita
Web作ってますが、インタラクティブなプログラミングも好きです。
JavaScript / Vue / node.js / PHP / AWS / OpenCV

最新の投稿

[JS]ラジアンから度数に度数からラジアンに変換する
コード 度数からラジアンへ ラジアンから度数へ サンプル ラジアンから度数に度数からラジアンに変換する際のスニペット。 コード 度数からラジアンへ ラジアンから度数へ サンプル

CentOS8 に Python + OpenCV をインストール
インストール テスト CentOS8 で標準で提供されているパッケージで Python + OpenCV 環境を構築する方法です。 検証した環境は CentOS8.3 (Docker) です。 インストール まず opencv…

[Perl] CentOS8 に plenv をインストール
インストール Step1 事前準備 Step2 PATHを通す (README通りにインストール) Step2 PATHを通す ($HOME以外にplenvをインストール) Step3 Perlインストール Step4 cpanmインストール CentOS…

JS/TSのclassでclass名を取得する
コード JS/TSのconstructorを利用して自分自身のクラス名を取得する際のメモ。 コード このコードの結果は次のようになります。

CentOS6(Docker)でyum update できなくなった
エラー内容 対応 CentOS6.10 で yum update しようとしたところエラーが出てアップデートできなかったので対応した時の記録 エラー内容 以下のようなエラーが出ました。 対応 を以下のように変更したところ解決しました。

PostfixでメールリレーしてMailHogで受信する開発用Dockerコンテナの構築
環境 Dockerイメージ作成 コンテナの起動 telnetで送信テスト phpで送信テスト Postfixのリレーを介して送信されたメールをMailHog(開発用SMTPサーバ)でキャッチするDocker開発環境を構築した際のメモです。 環境 Docker…

GitLab.com のコンテナレジストリで1つのプロジェクトに複数のDockerイメージをpushする
手順 GitLab.com のコンテナレジストリで1つのプロジェクトに複数のDockerイメージをpushする方法についてのメモです。 手順 まず、gitlab.comにて適当なリポジトリを…

Python poetryでパッケージ開発 PyPIで公開 Pytestでテスト CIをGitHub Actionsで回す
Poetry でパッケージ開発 pytest でユニットテストを実施しカバレッジを算出する パッケージをビルドし PyPI で公開する 検証環境にデプロイする 本番環境にデプロイする GitHub Actions で CI を回す codecovの設定 GitHub…

Perlでconstant(定数)をhashのキーに使う
ハマった事象 解決方法 1 括弧をつける 2 & をつける 参考にしたサイト Perlでconstant(定数)をhash…

php-fpmのステータスページを表示 Apache & htaccess
試した環境 php-fpm の pm.status_path について php-fpmのconfの設定 .htaccess の設定 アクセスしてみる 参考にしたサイト Apache環境で php-fpm のステータスページを htaccess…

Tags

Dates

© 2021   404 motivation not found