Web & Programming

スポンサーリンク
JavaScript

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

概要 tesseract.jsはWebブラウザで動くOCRエンジンです。オフィシャルサイトからデモをみることができると思います。 フロントのjsで動かす場合、canvasと組み合わせると色々と都合が良いので、とりあえず組み合わせたシンプル...
JavaScript + canvasで画像変換処理をするときのスニペット HTML

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

概要 canvasはJSによって図形などを描画する際に使われます。 canvasに描画された画像はピクセルに対して参照・操作することが可能なので、 これを用いて画像変換処理を行うことができます。 デモ画像 この記事では自分がよく使うス...
CSS

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

概要 だいぶ前にJSで作ったルーレットを公開します。 特にフレームワークとか使っていません。 DEMO デモ | 別ウィンドウで開く 以上。 追記 2019/01/20 ↑これだと流石にお粗末すぎるので、回転するルーレットを作りました...
スポンサーリンク
【AtCoder】自分用のブラウザで動くテストコード環境を作る【JavaScript】 JavaScript

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

AtCoderとかで使いたいブラウザで動くJS用のエディタ + デバッグ環境を作りました。AceEditor とか使ってます。 来週からこれ使って頑張ります。 pic.twitter.com/xPXAV38YKk — s-yoshik...
【Apache】単一のIPに複数のVirtualHostを設定するときの記述の順番は非常に重要なようだ バックエンド

【Apache】単一のIPに複数のVirtualHostを設定するときの記述の順番は非常に重要だった

概要 完全https化とドメイン移行する為に、ApacheのVirtualHostにリダイレクトの設定を追加した。 記述自体は間違っていなかったものの、設定の記述の順番を間違ってたためか、正しく遷移しなくなっていた。 順番を入れ替えたら正し...
semantic uiでブログカードっぽいものをたくさん作ってみる。コピペでOK CSS

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

概要 最近UI周り触れる機会があったが、 今更Bootstarpに手をつけるのも嫌なのでsemantic uiを始めることにしました。 そこで、 今回はオシャレブログとかのindexページでよく見かけるカード型UIのデザインをseman...
AWS Lightsail + bitnami に自作アプリケーションを作って共存させる + ドメイン振り分け設定 Amazon Lightsail

AWS Lightsail + bitnami に自作アプリケーションを作って共存させる + ドメイン振り分け設定

はじめに AWS Lightsailでbitnami WordPressのイメージを選択してインスタンスを立てた場合、 デフォルトのアプリケーションとしてWordPressとphpmyadminが利用できるようになっています。 これに加え、...
フランスからWordPressに悪意のあるリクエストが大量に届くので解析 Amazon Lightsail

フランスからWordPressに悪意のあるリクエストが大量に届くので解析

AWS Lightsail + WordPressで立てたサーバにフランスから謎のアクセスが定期的に来るのでログを調べてみた。色々と謎な部分があるが結構不穏な文字列が含まれていそうなのでアクセス制限を検討中。 s-yoshiki | スクリ...
HTML

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

概要 HTMLの中からaタグ・imgタグのリンクを抽出するツールを作りました。 a href抽出 img src抽出 HTMLテキストをコピペするとaタグ・imgタグのリンクを抽出します。 pythonのスクレイピング関連ツール(bs4...
Amazon Lightsail

WordPress開設で、自分のサーバを持ちたいけど手間はかけたくないとき【AWS Lightsail】

概要 手っ取り早くWordPressでブログを開設するなら、bluehostなどのホスティングサービスを利用するのが一番早いかと思います。 (もちろんhatenaやアメブロの方がもっと早い) 一方で、複雑なカスタマイズや細かな設定、拡張な...
Pyhton

ナイーブベイズで文字化けの種別を判定する。

背景 古い構成のシステムとかだとソースコード、HTMLの雛形、DB、内部処理のエンコード形式など文字コードがバラバラなんて言うことがある。 euc-jpとshift-jisが混ざってる上にターミナルやvimのエンコードでぐちゃぐちゃ下文字...
【Python】3分でOCR環境を立ち上げ Google Colaboratory OpenCV

【Python】3分でOCR環境を立ち上げ Google Colaboratory

概要 3分くらいでOCRができる環境を立ち上ます。 Google Colaboratoryを使います。もちろんPyhton。 Google Colaboratory Jupyter Notebook環境を無償で利用できる上、Google D...
python Pyhton

【Python】任意のキーワードのニュース一覧を取得。Google検索を使って【スクレイピング】

概要 スクレイピングで任意のキーワードのニュース一覧を取得する方法を紹介します。 例えば「キーワード = apple」だとしたら、appleのニュースの一覧を取得します 例えばこんな感じで。 環境 Python3.6 urllib Be...
【Python】顔画像をPOST 、 顔検出 、 canvasで顔にお絵かき【JS】 JavaScript

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

概要 「顔検出をして、顔に絵を描く」というもの。 具体的には、 顔写真の画像をAPIサーバへアップロードし、顔検出を行う。 サーバは顔座標を返し、それを元にcanvasでお絵かきする。 環境 フロント html + JS + canvas...
HTML

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

概要 K-menasで画像を減色してみた。 JavaScript + canvasを使用。 OpenCVとかライブラリは使わず全てフルスクラッチ K-means クラスタリングなどを行う際の定番なアルゴリズムです。 Wikipedia...
JavaScript

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

概要 機械学習とかで用いられるK近傍法を JavaScriptで実装しCanvasで可視化してみた。 あらかじめクラスタ化されたデータが必要となるので、 以前作成した、K-menasを用いて元となるデータを作成する。 処理...
CSS

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

概要 前回に引き続き 凸包(グラハムスキャン)のスキャンする様子をアニメーションにして可視化してみた。 ライブラリとかは使わず、Canvasにそのまま描画する。 凸包 凸包 - WikiPedia 凸包を解くためのアルゴリズムは様々な...
HTML

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

概要 凸包(ギフト包装法)のスキャンする様子をアニメーションにして可視化してみた。 ライブラリとかは使わず、Canvasにそのまま描画する。 凸包 凸包 - WikiPedia 凸包を解くためのアルゴリズムは様々なものが存在し、 代表...
HTML

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

概要 「【JavaScript】K-meansを可視化したら蜘蛛みたいな動きをした|その2」に引き続き、JavaScriptでK-menasを可視化をしてみた。 デモ 重心から各ノードまでの距離のみを描画するとこんな感じ。 デモ1 Li...
JavaScript

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

概要 「【JavaScript】K-meansを描画・可視化したら蜘蛛みたいな動きをした」を弄ったら、思ったよりもたくさんのバリエーションを作れた。 K-meansについてはこちら デモ カラフルなウニみたいなやつ、バージョン デモ...
スポンサーリンク
タイトルとURLをコピーしました