JavaScript
kimizuka.hatenablog.com以前、Expressをつかってスタティックなサーバをたてました が、今回はサーバを立てつつ、ブラウザも起動してみます。 ディレクトリ構成 以前とまったく同じものです。 app.js 以前とまったくもって同じものです。 var express = req…
iOS10でビデオをインライン再生する kimizuka.hatenablog.comこれまで、iPhoneのmobile Safariでビデオをインラインするためには、 videoのplayを叩かずに、currentTimeを操作してCanvasにレンダリングするという涙ぐましい努力 をしてたりしたのですが、 iO…
kimizuka.hatenablog.com以前 とは 別のライブラリ をつかって実装してみました。github.com DEMO https://kimizuka.github.io/qr-web-2/※ PCのモダンブラウザでアクセスしてください。カメラにQRコードを近づけるとデコード結果がアラートで表示されます。 …
github.comすごいライブラリですね。さすがMozilla。 つかいかた 1. ライブラリをダウンロードして解凍 https://mozilla.github.io/pdf.js/getting_started/#download からライブラリをダウンロード 2. ソースを編集 viewer.htmlにアクセスした際、デフォル…
kimizuka.hatenablog.com以前は Flashをつかってコピーボタンをつくりました が、今回はJavaScriptの力でコピーボタンをつくります。 JavsScript document.getElementById("btn").addEventListener("click", function() { var address = document.getElement…
kimizuka.hatenablog.comSee the Pen Transition like the ending by kimmy (@kimmy) on CodePen.以前、CSSでアニメのエンディングのようなトランジションをつくったことがありましたが、今回はこれをCanvasでつくります。 DEMO クリックすると開いたり閉じ…
iOS6でファイルアップロードが可能になってから、「iPhoneのカメラで撮影した画像のリサイズ、トリミングをフロントエンドで行いたい」という想いは持ち続けていました。しかし、それを実現するためには、 iOS画像リソース制限問題 Exifで回転して表示してし…
Electronアプリでserialportをrequireして使おうとすると、 Uncaught Exception: Error: Module version mismatch. Expected 49, got 47. at Error (native)的なエラーが発生します。そんな時は、アプリケーションのルートにて、 cd node_modules/serialport…
kimizuka.hatenablog.com前回 は Heroku Toolbelt をつかってデプロイしましたが、GitHubと連携するとpushするだけでデプロイできるということだったのでやってみました。 1. Herokuのダッシュボードにアクセス heroku.com 2. 新しいアプリケーションを作成 …
Herokuとは heroku.com条件付きですが無料でWebアプリケーションを公開できるプラットフォームと理解しております。kimizuka.hatenablog.com今回は、以前つくった こちらのソース をherokuにデプロイしてみましょう。 まず、ソースを若干修正します。 ソース…
npm ls -g --depth=0これでOKです。
www.npmjs.com Node.js var SerialPort = require("serialport"), serialPort; SerialPort.list(function(err, ports) { ports.forEach(function(port) { if (port.manufacturer && /arduino/.test(port.manufacturer.toLowerCase())) { serialPort = new Se…
以前からJavaScriptをつかってPhotoShopを自動化できることは知っていましたが、実際にやってみたことはありませんでした。 が。本日突如発生した「すべてのレイヤーの大きさの違う画像に対して上だけトリミングしたい」という作業がめんどくさ過ぎたため、J…
以前、 URLをQRコードにするモック はつくったのですが、今回はその逆です。kimizuka.hatenablog.comこちらのライブラリ を使用させていただきました。github.com DEMO https://kimizuka.github.io/qr-web/ ※ PCのモダンブラウザでアクセスしてください。カ…
iPhoneのSafariで表示されているページをダブルタップをするとページが拡大します。 metaタグでページの拡大を止めている場合はページがスクロールします。http://jsrun.it/kimmy/AJce ※ iPhoneで見てくださいダブルタップによるページの拡大を止めつつ、ペ…
iPhoneでは videoタグのplayを叩くと、ビデオプレイヤーが立ち上がりビデオが再生されます。昔の僕は、なんとかSafari内で再生できないものかと インラインで再生する方法 を探りましたが、最近は考え方が変わり、ビデオを再生し終わった後にSafariに戻って…
最小限だとこんな感じじゃないでしょうか。 ディレクトリ構成 package.json { "name": "app", "version": "1.0.0", "description": "", "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author"…
kimizuka.hatenablog.com以前 は duino というパッケージをつかっていましたが、サーボモータを制御しようとしたら何故かうまくいかなかったので、 johnny-five というパッケージに切り替えました。github.comgithub.com JavaScript var five = require("joh…
JavaScript var express = require("express"), app = require("express")(), http = require("http").Server(app); app.use("/", express.static(__dirname + "/public")); http.listen(3000, "0.0.0.0"); とりあえずこれでpublicをルートとしたstaticなサ…
kimizuka.hatenablog.com以前つくったアプリ ですが、コマンドラインから実行する分には問題なかったのですが、アプリ化すると動かなくなってしまい困ってました。結果として、パスを絶対パスにすることによって動くようになり、 アドレスを追加することによ…
今回はfilterをつかってオーディオをフィルタリングしてみました。 前回のビジュアライズのコードを残しておいたので、比較してみるとわかりやすいです。 ローパスフィルタをかけてみたので低音が強調されています。 JavaScript (function(win, doc) { "use …
今回はanalyserをつかってオーディオを解析し、Canvasにビジュアライズしてみました。 JavaScript (function(win, doc) { "use strict"; var canvas = doc.getElementById("canvas"), ctx = canvas.getContext("2d"), request = new XMLHttpRequest(), audio…
var arr = [0, 1, 2].map(function(num) { return num * 2; }); console.log(arr); // => [0, 2, 4] 的な感じで、配列の要素にループでアクセスして、 結果を新たな配列として返すmap関数の引数について調べました。いまさらですが。 mapに渡す引数 第一引数…
今回は ChannelSplitterNode をつかって入力を分けてみます。 具体的にはLとRに分解し、左右を入れ替えて再生してみましょう。この音（ http://jsrun.it/assets/a/0/D/c/a0Dco.mp3 ）をLRで分解し、左右を入れ替えて再度くっつけます。 JavaScript "use stri…
今回は ChannelMerger をつかってL・Rから別の音を再生します。 この音（ http://jsrun.it/assets/G/9/D/7/G9D75.mp3 ）とこの音（ http://jsrun.it/assets/W/Z/8/F/WZ8Fo.mp3 ） をLRから出力してみましょう。 JavaScript "use strict"; var audioCtx = new…
kimizuka.hatenablog.com前回 は単純に source と destination を繋いだだけでしたが、 今回は途中にgainを挟んでボリュームを変更してみます。 JavaScript var request = new XMLHttpRequest(), audioCtx = new AudioContext(), gain = audioCtx.createGain…
いままでもいくつかWeb Audio APIの記事を描いてきましたが、kimizuka.hatenablog.com kimizuka.hatenablog.com kimizuka.hatenablog.com基本的なところがわかっていなかったため、Web Audio APIこちら を読みなおしてみました。結果、最終的に destination …
ファイル > 変換 の中に移動したようです。support.apple.com
書き出すとき npm install electron-packagerで packaer をインストールして、 electron-packager . app --platform=darwin --arch=x64でアプリ化できます。（ストア用のアプリではなく、Mac用のアプリです） 引数は順番に、 electron-packager #{パッケージ…
支障がなければ、 nodeIntegration を false にして nodeモジュールをつかわない設定にしてしまうのが手っ取り早いです。 main.js "use strict"; var electron = require("electron"), app = electron.app, BrowserWindow = electron.BrowserWindow, mainWin…
