Posts with tag: #html5

Firebase + Nuxt で認証付きページを作るときに参考にしたいところ

2020-03-23
html5javascriptvue.jsnuxt.js
目次 Webアプリケーションのセッション管理にJWT導入を検討する際の考え方 Service Worker によるセッション管理 ユーザー セッションの管理 Nuxt.jsとFirebaseでSPA×SSR×PWA×サーバーレスを実現する CookieとセッションとJWT SSR…
Read more →

MonacoEditor + Vue を使ってエディタを実装

2019-06-23
html5javascriptmonaco%20editorvue.js
目次 概要 紹介 セットアップ Vue vue-monaco Usage サンプルコード ポイント テーマカラーについて エディタのリサイズ エディタの変更の検知 概要 Vue + MonacoEditorでJS…
Read more →

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

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

画像のヒストグラムを表示する 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 →

画像のプーリング処理 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 →

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

2019-05-06
html5javascript
目次 概要 サンプルコード デモ 参考 概要 JSで画像をまとめて読み込む方法(プリロード)の紹介 JSのImageAPIのonloadを使って、複数の画像の読み込み完了時にイベントを発火させる方法です。 async…
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-17
html5javascriptcanvas%E3%83%AB%E3%83%BC%E3%83%AC%E3%83%83%E3%83%88
目次 概要 デモ 簡単な解説 扇型の描画 減速 ソース 概要 JavaScriptとcanvasで回転するルーレットを作りました。 Runボタンを押すと回転開始。stop…
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 →

全角かな 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 →

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 →

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

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

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

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

semantic uiでブログカードっぽいものをたくさん作ってみる。コピペでOK

2018-08-22
html5css3semantic%20ui
目次 概要 デモ 感想 概要 最近UI周り触れる機会があったが、 今更Bootstarpに手をつけるのも嫌なのでsemantic uiを始めることにしました。 そこで、 今回はオシャレブログとかのindexページでよく見かけるカード型UIのデザインをsemantic ui…
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 →

【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】凸包(グラハムスキャン)を可視化・アニメーション【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 →

【JavaScript】K-meansをアニメーション・可視化したら蜘蛛みたいな動きをした|その3

2018-06-11
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
目次 概要 デモ 他 概要 「【JavaScript】K-meansを可視化したら蜘蛛みたいな動きをした|その2」に引き続き、JavaScriptでK-menas…
Read more →

【JavaScript】K-meansをアニメーション・可視化したら蜘蛛みたいな動きをした|その1

2018-06-10
html5css3javascriptcanvas%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%20means
目次 概要 デモ 他 概要 canavsの勉強も兼ねて、機械学習とかで使われるk-meansによるクラスタリングを可視化してみた。 そしたら、ちょっと気持ち悪い蜘蛛みたいな動きをするようになった。 環境は、 JavaScript Canvas API…
Read more →

【Python】Apache + WSGI + Flask でWebアプリケーション構築

2018-05-13
html5pythonflaskapache
目次 概要 環境 mod_wsgiの導入 apacheの設定 構成 ソース 概要 Apache + WSGI + Flask の構成でWebサーバを構築した時のメモ 環境 Ubuntu 16.04 Apache 2.4* Python 3.4 mod_wsgiの導入 Flask…
Read more →

地球上の2地点間の距離を取得するアルゴリズム(ヒュベニ or 球面三角法)比較【JavaScript】

2018-05-06
html5javascript%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0GeoLocationAPI
目次 概要 ヒュベニの公式 球面三角法 ソース GeoLocationAPIとの組み合わせ 結果 東京-川崎 東京-名古屋 東京-ギニア湾 まとめ 参考 概要 以前、地球上の…
Read more →

highlightJS + markedJS でMarkdownエディタを作ってみました

2018-03-11
html5javascriptmarkedjshighlight.js
目次 概要 アプリケーション ソース highlight.js marked.js 概要 highlightJS + markedJS でマークダウンエディタを作りました。 アプリケーション リンク ソース highlight.js 軽量で動くエディタ。 https…
Read more →

タブとカンマの相互変換ツールを作成してみた

2018-01-22
html5javascriptcsvtsv
タブとカンマの相互変換ツールを作りました。 (Tsv ←→ Csv) 以下、リンク http://s-yoshiki.com/products/tsv_csv/index.html 環境 HTML JS
Read more →

FileAPIで画像を読み込み canvasに描画

2018-01-22
html5css3javascriptcanvas
目次 概要 流れ Image.onloadを使う方法 追記 概要 「FileAPIを使って画像を読み込み、イベント終了と同時に自動的にcanvasに描画したい!」 FileAPIを使って読み込んだ画像を、imgタグを使って画像を表示をすることは容易であったが、 canvas…
Read more →
s-yoshiki
s-yoshiki
githubtwitterqiita
Web作ってますが、インタラクティブなプログラミングも好きです。
JavaScript / Vue / node.js / PHP / AWS / OpenCV

最新の投稿

PHP-FPM(php7.4) Apache2.4 on Ubutnu20.04 Webサーバ構築
環境 パッケージの更新 Apache と PHP のインストール Apache のサービスを開始する PHPファイルを作成 参考にしたサイト Ubuntu20.04 に PHP7.4 + Apache2.4 をインストールしてWeb…

PHP-FPM(php7.4) Apache2.4 でWebサーバ構築 on CentOS8
環境 php7.4 のインストール apacheのインストール php-fpmの設定を変更する php-fpm の起動 apacheの起動 確認 おまけ: エラーと解決方法 "System has not been booted with systemd as…

CentOS8 に PHP7.4 インストール
環境 普通にインストールしようとするとphp7.2がインストールされる modularityについて php7.4 インストール CentOS8 に modularity を利用して PHP7.4をインストールした際のメモです。 環境 CentOS8.…

UNIXドメインソケット通信 vs INETドメインソケット通信 php-fpmで動作させる場合の違いについて
結論 ソケット通信について ソケットについて ソケット通信の種類 UNIXドメインソケット通信を行う場合のメリット 参考にしたサイト php-fpm の設定方法で調べた際にIPとポートで設定するパターンとUNIX…

Amplify CLI のインストール
Amplify CLI のインストール Amplify CLI の設定 バックエンド環境作成 Amplify CLI のインストールから設定まで Amplify CLI をインストール 設定 Amplify アプリを初期化 Amplify CLI…

AWS Amplify に Next.js (SSG) で作ったアプリをデプロイする
はじめに 操作 Next.js (React) アプリの作成、Gitへのプッシュ AWS Amplifyでプロジェクト作成 参考にしたサイト この記事では、React / Next.js アプリケーションを作成し、AWS Amplify…

Typescriptに入門した
初期作業 とりあえずHello World 初期作業 typescript環境を作っていきます。 とりあえずHello World まず、次のサンプルコードを作成します。 typescriptファイルをビルドします。

Vue/Nuxt.js 触ってた人が Next.js に入門する
はじめに 実施環境 学習ガイド Create a Next.js App Navigate Between Pages ページの作成 リンク Assets, Metadata, and CSS Assets メタデータ CSS…

PHP-Parser で PHP5からPHP7で動くコードに自動修正するツールが作る夢をみた
ツールが備える機能条件 PHP-Parser について PHP-Parser の簡単なサンプル ASTオブジェクトの置換・変更 PHP5からPHP7への変更内容を実装する ex1 includeパスを変更する ex2 例外クラスを Exception…

PHP5からPHP7への移行ツールを作るための解析・自動修正ツールを調べる
PHP5からPHP7への下位互換のない機能 使えそうなツールの洗い出し PHPStan phan php7cc php7mar php-to-7-aid Rector php-ast PHP-Parser まとめ 追記 (2021/01/0…

Tags

Dates

© 2021   404 motivation not found