みかづきブログ その3

3ヶ月つづけてみました。

JavaScript

nodebrew install-binary の早さに感動

いつもは、 nodebrew install stable nodebrew use stableと、installをつかっていたのですが、 nodebrew install-binary stable nodebrew use stableと、install-binaryに乗り換えました。 どうせちょっと早くなるだけ、「ハイパーミニがハイパーダッシュに…

Node.jsでletをつかったときに SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode とシンタックスエラーが出るとき

英語を訳しただけなのですが、strictモードじゃないと使えない模様です。(v5.4.1で確認) main.js for (let i = 0; i < 10; i++) { console.log(i); } ではなく、 main.js "use strict"; for (let i = 0; i < 10; i++) { console.log(i); } とすればOKでし…

Node.jsでスクレイピング

cheerio-httpcliをつかいましょう。www.npmjs.com詳しいつかいかたは上記ページに載っているのですが、 例えばブログの最新のタイトルを取得するときは、 var client = require("cheerio-httpcli"); client.fetch("http://kimizuka.hatenablog.com/", {}, (e…

npm start で Expressをつかったスタティックなサーバをたてて、ブラウザを起動する

kimizuka.hatenablog.com以前、Expressをつかってスタティックなサーバをたてました が、今回はサーバを立てつつ、ブラウザも起動してみます。 ディレクトリ構成 以前とまったく同じものです。 app.js 以前とまったくもって同じものです。 var express = req…

iOS10のiPhoneのmobile Safariではビデオ要素(videoタグ)をインラインで再生できるようになったし、無音のビデオなら自動で再生できるようになった模様

iOS10でビデオをインライン再生する kimizuka.hatenablog.comこれまで、iPhoneのmobile Safariでビデオをインラインするためには、 videoのplayを叩かずに、currentTimeを操作してCanvasにレンダリングするという涙ぐましい努力 をしてたりしたのですが、 iO…

続・JavaScriptをつかってブラウザでカメラからQRコードをデコードする

kimizuka.hatenablog.com以前 とは 別のライブラリ をつかって実装してみました。github.com DEMO https://kimizuka.github.io/qr-web-2/※ PCのモダンブラウザでアクセスしてください。カメラにQRコードを近づけるとデコード結果がアラートで表示されます。 …

pdf.jsをつかってPDFの内容をcanvasにレンダリングする

github.comすごいライブラリですね。さすがMozilla。 つかいかた 1. ライブラリをダウンロードして解凍 https://mozilla.github.io/pdf.js/getting_started/#download からライブラリをダウンロード 2. ソースを編集 viewer.htmlにアクセスした際、デフォル…

JavaScriptの力をつかってテキストをコピーするボタンをつくる

kimizuka.hatenablog.com以前は Flashをつかってコピーボタンをつくりました が、今回はJavaScriptの力でコピーボタンをつくります。 JavsScript document.getElementById("btn").addEventListener("click", function() { var address = document.getElement…

Canvasでスポットライト的なものをつくる

kimizuka.hatenablog.comSee the Pen Transition like the ending by kimmy (@kimmy) on CodePen.以前、CSSでアニメのエンディングのようなトランジションをつくったことがありましたが、今回はこれをCanvasでつくります。 DEMO クリックすると開いたり閉じ…

iPhoneのカメラで撮影した画像の回転を補正してSafariにプレビューをし、リサイズ・トリミングをフロントエンドで行いたいという想い

iOS6でファイルアップロードが可能になってから、「iPhoneのカメラで撮影した画像のリサイズ、トリミングをフロントエンドで行いたい」という想いは持ち続けていました。しかし、それを実現するためには、 iOS画像リソース制限問題 Exifで回転して表示してし…

Electronとシリアル通信を両立する

Electronアプリでserialportをrequireして使おうとすると、 Uncaught Exception: Error: Module version mismatch. Expected 49, got 47. at Error (native)的なエラーが発生します。そんな時は、アプリケーションのルートにて、 cd node_modules/serialport…

GitHub と Heroku を連携させる

kimizuka.hatenablog.com前回 は Heroku Toolbelt をつかってデプロイしましたが、GitHubと連携するとpushするだけでデプロイできるということだったのでやってみました。 1. Herokuのダッシュボードにアクセス heroku.com 2. 新しいアプリケーションを作成 …

Express と socket.io をつかったサーバを Heroku にデプロイする

Herokuとは heroku.com条件付きですが無料でWebアプリケーションを公開できるプラットフォームと理解しております。kimizuka.hatenablog.com今回は、以前つくった こちらのソース をherokuにデプロイしてみましょう。 まず、ソースを若干修正します。 ソース…

npmでglobalにいれたモジュールの一覧を確認する

npm ls -g --depth=0これでOKです。

Node.jsでシリアル通信する際にArduinoがつながっているポートを自動的に探し、繋ぎ、繋いだ際のコールバックを設定する

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…

JSXをつかってPhotoShopを自動化する

以前からJavaScriptをつかってPhotoShopを自動化できることは知っていましたが、実際にやってみたことはありませんでした。 が。本日突如発生した「すべてのレイヤーの大きさの違う画像に対して上だけトリミングしたい」という作業がめんどくさ過ぎたため、J…

JavaScriptをつかってブラウザでカメラからQRコードをデコードする

以前、 URLをQRコードにするモック はつくったのですが、今回はその逆です。kimizuka.hatenablog.comこちらのライブラリ を使用させていただきました。github.com DEMO https://kimizuka.github.io/qr-web/ ※ PCのモダンブラウザでアクセスしてください。カ…

iPhoneのSafariでダブルタップを無効にする(iOS10でもどうしてもuser-scalable=noを有効にしたい場合とか)

iPhoneのSafariで表示されているページをダブルタップをするとページが拡大します。 metaタグでページの拡大を止めている場合はページがスクロールします。http://jsrun.it/kimmy/AJce ※ iPhoneで見てくださいダブルタップによるページの拡大を止めつつ、ペ…

iPhone の mobile Safari で video を再生し終わった後にビデオプレーヤを閉じ、mobile Safari に戻す方法

iPhoneでは videoタグのplayを叩くと、ビデオプレイヤーが立ち上がりビデオが再生されます。昔の僕は、なんとかSafari内で再生できないものかと インラインで再生する方法 を探りましたが、最近は考え方が変わり、ビデオを再生し終わった後にSafariに戻って…

Express と socket.io でローカルにリアルタイム通信をするサーバをたてる

最小限だとこんな感じじゃないでしょうか。 ディレクトリ構成 package.json { "name": "app", "version": "1.0.0", "description": "", "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author"…

Node.js + Arduino でサーボモータを制御する

kimizuka.hatenablog.com以前 は duino というパッケージをつかっていましたが、サーボモータを制御しようとしたら何故かうまくいかなかったので、 johnny-five というパッケージに切り替えました。github.comgithub.com JavaScript var five = require("joh…

Expressをつかってスタティックなサーバをたてる

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なサ…

ElectronをつかってWebサーバをたてる際は絶対パスで指定しないとアプリ化したときに動かなくなる

kimizuka.hatenablog.com以前つくったアプリ ですが、コマンドラインから実行する分には問題なかったのですが、アプリ化すると動かなくなってしまい困ってました。結果として、パスを絶対パスにすることによって動くようになり、 アドレスを追加することによ…

Web Audio API の基本の基 その6 (filterをつかって音をフィルタリングする)

今回はfilterをつかってオーディオをフィルタリングしてみました。 前回のビジュアライズのコードを残しておいたので、比較してみるとわかりやすいです。 ローパスフィルタをかけてみたので低音が強調されています。 JavaScript (function(win, doc) { "use …

Web Audio API の基本の基 その5 (analyserをつかってオーディオを解析しビジュアライズする)

今回はanalyserをつかってオーディオを解析し、Canvasにビジュアライズしてみました。 JavaScript (function(win, doc) { "use strict"; var canvas = doc.getElementById("canvas"), ctx = canvas.getContext("2d"), request = new XMLHttpRequest(), audio…

いまさらながらArray.prototype.mapの引数を調べる

var arr = [0, 1, 2].map(function(num) { return num * 2; }); console.log(arr); // => [0, 2, 4] 的な感じで、配列の要素にループでアクセスして、 結果を新たな配列として返すmap関数の引数について調べました。いまさらですが。 mapに渡す引数 第一引数…

Web Audio API の基本の基 その4 (ChannelSplitterNodeをつかってチャンネルを分ける)

今回は ChannelSplitterNode をつかって入力を分けてみます。 具体的にはLとRに分解し、左右を入れ替えて再生してみましょう。この音( http://jsrun.it/assets/a/0/D/c/a0Dco.mp3 )をLRで分解し、左右を入れ替えて再度くっつけます。 JavaScript "use stri…

Web Audio API の基本の基 その3 (ChannelMergerをつかってL・Rから別の音を再生する)

今回は 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…

Web Audio API の基本の基 その2 (gainをつかって音量を変更する)

kimizuka.hatenablog.com前回 は単純に source と destination を繋いだだけでしたが、 今回は途中にgainを挟んでボリュームを変更してみます。 JavaScript var request = new XMLHttpRequest(), audioCtx = new AudioContext(), gain = audioCtx.createGain…

Web Audio API の基本の基

いままでもいくつかWeb Audio APIの記事を描いてきましたが、kimizuka.hatenablog.com kimizuka.hatenablog.com kimizuka.hatenablog.com基本的なところがわかっていなかったため、Web Audio API (日本語訳)こちら を読みなおしてみました。結果、最終的に d…