marker.js - Web上の画像に注釈を追加 MOONGIFT
写真にマーカーを付けたり、注釈を入れたいと思うことがあるでしょう。通常は画像編集ソフトウェアを使って行います。Webブラウザからであれば一度画像をダウンロードした後、編集しなければならず面倒です。 そこで使ってみたいのがmarker.jsです。Webブラウザ上から手軽に画像への注釈追加が可能です。 marker.jsの使い方 画像の上部をクリックするとツールが表示されます。 そしてマーカを追加。 できあがった画像です。文字や矢印なども追加できます。 marker.jsは単純にJavaScriptでコンテンツを載せているだけでなく、Canvas上に描画することによって編集した画像をそのままダウンロードできます。簡易的な画像編集としても利用できそうです。 marker.jsはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 marke
photoEditor - Webブラウザ上で画像編集
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webアプリケーションでできることの幅が広がっていますが、最近ではさらにWebブラウザ上だけでできることも広がっています。Webブラウザ上のJavaScript、ワーカー、WebAssemblyと機能が拡充しています。 今回はphotoEditorを紹介します。クリック一つで画像を加工できる、そんなWebアプリケーションです。サーバサイドは使っていません。 photoEditorの使い方 写真を開きました。元写真は友情 楽しい バックライト · Pixabayの無料写真より。 回転したり。 アスキーアート化も。 photoEditorは画像をCanvas上に読み込んで、それを加工しています。一部の加工はできず、画像全体に反映されます。ボタン一つで加工できるというのが手軽で使いやすい
要チェックな10個の Node.js フレームワーク - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 本記事は、10 Node.js Frameworks Worth Checking Out: Express, Loopback, Hapi, and Beyond の日本語訳です。 要チェックな10個のNode.js フレームワーク テクノロジーは急速に変化しているので、開発者たちは新しいテクノロジーを使用し、Web開発のニーズに合わせて、より便利なフレームワークを採用しています。Node.js は、アプリ開発にJavaScriptを使うのが好きな開発者達から、大いに注目されています。 開発者であるあなたは、クライアントサイドとサーバ
Dashboards - 自由度の高いダッシュボードライブラリ
Webサービスや業務システムを通じて集められたデータを表示するのに必要なのがダッシュボードです。ダッシュボードは常に固定表示よりも、各自の使い方に合わせて情報の並び替えが求められます。 そんなUIを作成できるのがDashboardsです。ユーザが自由に画面要素を変更できます。 Dashboardsの使い方 最初の表示です。ダッシュボードを作成します。 色々なウィジェットを配置した例。 ドラッグ&ドロップで配置は変更できます。 変更しているところ。 ウィジェットは右側に並んでいます。 色の変更もできます。 全体の大きさも変更できます。 Dashboardsはウィジェット同士を重ねて表示することができ、多くのダッシュボードライブラリに比べて自由度が高くなっています。開発者としてはウィジェットさえ作成すれば、後は利用者が自由に配置を決めてくれるはずです。 DashboardsはJavaScrip
LeaderLine - 情報に関連性を持たせる線を描画
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 情報はただ並べただけではその関連性が分かりづらいものです。線を使って表現すると情報同士の関連性が分かるようになり、理解度が増します。多くの場合、そうした内容はプレゼンテーション用のソフトウェアで作ったり画像編集ソフトウェアを使います。 しかしそれではメンテナンスが面倒になります。そこで使ってみたいのがLeaderLineです。 LeaderLineの使い方 使い方です。とても簡単ですね。 応用するとこんな複雑な線も描けます。マウスオーバーによるアニメーションもサポートしています。 DOMにラインを付けることもできます。 写真に説明を追加するなんて使い方も。 さらに範囲を設けたりもできます。 グラフをインタラクティブにするデモです。 LeaderLineは実に多彩な表現が可能です。情
BotUI - Web上で作るボット対話UI
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ボット系サービスにおいて大事なのはボットとの対話インタフェースです。何かこちらが疑問を投げかけると、それに対してボットが答えます。最近の質はAIによって急激に向上していますが、対話インタフェースはずっと昔から変わりません。 今回紹介するBotUIはそんなボットとの対話インタフェースをWeb上で手軽に実装できるライブラリです。 BotUIの使い方 例です。選択肢が表示されています。 選択すると入力が促されます。 さらに選択が続き、完了となります。 別なデモの流れです。 数値の入力なども行えます。 BotUIでは単純な選択肢であったり、入力を促すと言った手順を経てボットと対話しながら処理を実行できます。デモはもちろん決まった処理しかできませんが、実際にはWeb APIを通じて細かい情報
Service Workerってなんなのよ (Service Workerのえほん) - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 私 「ねぇ、Service Workerってあなた何者？」 Service Worker 「プログラム可能なネットワークプロキシです」 私 「.....(´Α｀lll)o0(ｲﾐﾌ)」 (この記事は元々英語で投稿した記事の翻訳版です。挿絵に入っているテキストが英語のままなのはご了承ください🙏) Service Workerってなんかカッコ良さそうだけど、実際問題なんなのかよくわからない ２０１５年７月、私はテキサス州オースティンで開催されたJavaScriptのカンファレンスに参加していた。ステージに立っていたのはJake Archi
Mojik - 日本語文章の可読性を向上させるJavaScript
Webにおける日本語はちょっとした工夫が読みやすくなります。例えば日本語と英単語の間には半角スペースを空けた方が良いでしょう。また、全角括弧を使うと間が空きすぎてあまり良くないのですが、半角では詰まりすぎるといった具合です。 そうした日本語の文章におけるちょっとした問題を解決してくれるのがMojikです。和文の文字組を上手にコントロールしてくれます。 Mojikの使い方 適用前と適用後の文章です。括弧が連続した時に隙間を狭めています。 別な例。英数字の前にスペースが空いているのが分かるでしょうか。 小さな隙間を使うことで可読性がぐっと向上します。書籍や雑誌では文字組は微妙に調整しますが、Webの場合はデフォルトのまま使われがちです。Mojikを使えば改善できるでしょう。 MojikはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 Mojik terke
JavaScriptでマルチスレッド処理をするWebWorkerAPIの基本 - Qiita
Web Worker API Web Workerを用いて作成したサンプル Web Worker APIの基本 定義 JavaScriptで処理をユーザーインターフェース(jQueryでDOMを扱ったりレンダリングしたりする UIスレッド)とは独立したバックグラウンドのスレッドで実行するためのAPI 今まで 通信では「非同期」という意味ではAjaxが活躍してきた setTimeoutなども「非同期」処理を一見実現しているように見えるが、単純に時間差をつけてプロセスを 実行するqueに入れているだけ Ajaxと何が違うのか Ajaxはネットワークにおける非同期通信を実現するための処理。サーバとのやりとり。 Web Worker APIはHTML5で定義されているプロトコル。どんな処理でもマルチスレッド化。 「できること」や「処理をずらす」という意味で見たら似ているかもしれないが 技術の発展し
Sukiyaki - Webブラウザでも動く。JavaScript製ディープラーニング MOONGIFT
ディープラーニングが盛り上がっています。大量のデータを分析する際に画一的なアルゴリズムではなく、学習しながらエンジンを磨いていくことで、これまでにない精度で分析ができるようになっています。 今回紹介するSukiyakiもそんなディープラーニングエンジンの一つですが、特徴としてJavaScriptで作られ、Webブラウザ上で動くという点があげられます。 Sukiyakiの使い方 分析の一例です。画像の数字を見極めます。最初は精度が高くありません。 学習を繰り返す内に徐々に精度があがってきました。 最後はだいたい2%に落ち着きました。 SukiyakiはGPGPUとマルチコアCPUををサポートしています。nodeでももちろん動作します。ディープラーニングをさくっと体験するにはWebブラウザで動くという利点は大きいと思われます。 Sukiyakiはnode/JavaScript製のオープンソース
Web Audio APIを恐ろしく簡単にする「Tone.js」で音楽プログラミングを試してみた！ : うえぶはっく
「Web Audio API」を使うと音声の「再生」だけでなく、音の「生成」や「加工」などもJavaScriptだけで手軽にプログラミングすることが出来るようになります。 ただ、ちょっとクセがあるので「扱いにくい…」と感じる人も少なくないでしょう。 そこで、誰でも簡単に「Web Audio API」を活用できるJavaScriptライブラリ「Tone.js」について、今回は簡単なサンプルと共にご紹介しようと思います！ ファイルを準備しよう！ まずは、「Tone.js」を使ったサンプルを作るのに必要な「index.html」と「app.js」を用意しましょう。 「Tone.js」自体は、GitHubからダウンロードするか、以下のURLから利用可能です。 https://tonejs.github.io/build/Tone.min.js ひとまず、「index.html」はこんな感じでOKで
Web上に表示された画像をそのまま編集できるJSライブラリ「DarkroomJS」を使ってみた！ : うえぶはっく
画像編集系のJavaScriptライブラリはいくつか存在しますが、その中でも非常にシンプルで扱いやすく、直感的な操作が人気の「DarkroomJS」をご紹介しようと思います！ 任意の「imgタグ」を指定することで、専用の「画像編集ツールバー」が表示されるので、そのままWeb上で加工をすることが出来るようになります。 必要なファイルを揃えよう！ 「DarkroomJS」は、Canvas APIを効率よく扱える「fabric.js」をベースに開発されていることを踏まえて、事前に必要なファイルは以下の3つになります。 darkroom.css darkroom.js fabric.js これらのファイルは、GitHubからダウンロードして使うか、公式サイトのリンクを利用すると簡単です。 【darkroom.css】 http://mattketmo.github.io/darkroomjs/bu
フロントエンドコーディングのみで簡単にセキュアなお問い合わせフォームが作れるようになりました | Milkcocoa Engineers' Blog
Webページへのコード貼り付け ※追記(2016-02-18)：CDNから読み込むJavaScriptのコードを修正しました（ファイル名も変えています、contactform.min.js→milkform.min.js）。具体的にはsubmit()関数を使って送信するタイミングを自分で決められるようにしました。 milkcocoa.jsとmilkform.jsをCDNから読み込んで、formタグにmilkform属性を含ませ、JavaScript内でvar milkform = new MilkForm('あなたのapp_id');と書けば利用開始できます。milkform.submit()でデータの送信が出来て、ロード時、送信成功時、失敗時のコールバックも設定できます。 <form milkform> <input type="text" name="e-mail"> <input t
302 - JS.ORG
Dedicated to JavaScript and its awesome community since 2015
XSound - Web Audio API Library for Synthesizer, Effects, Visualization, Recording ... -
XSound - Web Audio API Library for Synthesizer, Effects, Visualization, Recording ... - NEW !! XSound 2.0 がリリースされました. 以下の変更が加えられています. ES5 から ES2015 ~ へコードの書き換え const, let アロー関数式 class 構文 ES Modules ... etc ESLint によるコード検証 webpack によるビルド環境 つまり, 内部が変わっただけで, 外部, すなわち, API は 1.x と同じです. コードリーディングしやすくなったことで, issue をたてたり PR を送ったりする敷居を低くしました. XSound とは ? Web Audio API のライブラリの1つで, サウンドの生成 ワンショットオーディオの再生 楽曲
WoTはここからはじめる！？JavaScriptで開発できる3つのJS Boardデバイス
EspruinoのJavaScriptには、ハードウェアを制御するための専用APIが、搭載されています。上記のコードでは setWatch というsetIntervalに似た関数で、センサーの状態を取得するループ処理を行っています。 筆者はこのプログラムをもうちょっと作りこんで、ウチの猫のトイレに設置しています。猫ちゃんがトイレに入ったり出たりするのを検知して、クラウドにデータを送信し、スマートフォンにプッシュ通知するような仕組みをつくりました。猫のトイレがすぐに掃除できるようになったので、猫ちゃんのストレスが減りました（減ったにちがいないｗ）。この事例は日経テクノロジーオンラインで取り上げていただきました。 Espruinoに関する日本語の情報はあまり多くないですが、いまのところEspruino Advent Calendar 2014がよくまとまっていると思います。個人的にはJS Bo
ECharts - 多種多様な表現に対応したグラフ/チャートライブラリ MOONGIFT
Webは表現力がそれほど高くないのが常に問題視されています。特に業務系システムではグラフ/チャートを使ってデータを可視化する必要があります。最近ではビッグデータが話題にあがっており、大量のデータを効率的に描画しなければならなくなっています。 そこでEChartsを紹介します。ビッグデータモードまで用意された多種多様なパターンの用意されたチャートライブラリです。 EChartsの使い方 今回はその多様なグラフ、チャートを紹介します。 曲線のグラフ。 積み上げグラフ。 棒グラフ。 エリアグラフ。 曲線。かなり複雑です。 こちらもユニークです。途中で途切れています。 棒グラフですが、範囲が指定できています。 左右の比較グラフ。 複数グループの棒グラフ。 散布図。 こちらも散布図。 画像も合わせた表示。 散布図と色の組み合わせ。 ローソクチャート。 円グラフ。 より描画にこだわった円グラフ。 レー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Service Worker Deep Dive
http://plus.appgiga.jp/masatolan/2015/07/29/56567/
skitjs.com