JavaScript
kimizuka.hatenablog.com kimizuka.hatenablog.com kimizuka.hatenablog.com kimizuka.hatenablog.com 前回 のつづきです。 予告通り、遠隔でシャッターを切れるように編集します。まずディレクトリ構成を前回から大きく変更しました。まず、前回の index.ht…
kimizuka.hatenablog.com kimizuka.hatenablog.com kimizuka.hatenablog.com前回 はカメラを起動するところまでのアプリをつくったので、 今回は実際に写真をとってローカルに保存するところまでつくってみましょう。前回 までのコードを編集していきます。 …
kimizuka.hatenablog.com kimizuka.hatenablog.com前々回 、 前回 とElectronをつかってきましたが、今回も引き続きつかっていきます。今回はカメラを立ち上げてそれをプレビューするアプリを制作しました。 ブラウザだとhttpsでないとgetUserMediaを叩けな…
http://kimizuka.hatenablog.com/entry/2016/06/07/104520
ぼくがMacユーザーなんで、Mac用のアプリをつくってみようと思います。 昔はMacGapをつかっていたんですが、これを機に最近流行りのElectronに乗り換えますね。github.comelectron.atom.io今話題の Atom とか Slack とかは Electron でつくられているようで…
kimizuka.hatenablog.com以前、はじめてのthree.jsを書いてから、全然three.jsを触る機会がなかったのですが、このままでは昨今の3Dブームに置いて行かれてしまうと思い、再び触り始めました。今回は、前回までの知識をフル活用して、自分のアイコンをつくっ…
ES5に対応しているブラウザ var hoge = []; hoge instanceof Array; // => true その他のブラウザ var hoge = []; ({}).toString.call(hoge) === "[object Array]"; // => true jQuery var hoge = []; $.isArray(hoge); // => true iframeなどを考慮せずwind…
https://msdn.microsoft.com/ja-jp/library/eb0w91wa(v=vs.90).aspxJavaScriptのコメントを /*@cc_on @*/ という感じで書くと、コメントの中身がIEでのみJScriptとして評価されることを知りました。なので、 var ieVersion = 0, jscriptVersion = 0; /*@cc_o…
ローマ字の都道府県の配列をつくる必要がありまして、がんばってつくりました。 同じものをつくりたい人がたどり着いたときにコピペでつかえるように貼り付けておきます。 先頭だけ大文字 ["Hokkaido", "Aomori", "Iwate", "Miyagi", "Akita", "Yamagata", "…
kimizuka.hatenablog.comkimizuka.hatenablog.comkimizuka.hatenablog.comこれまでブックマークレットのつくりかたをあれこれ模索してきましたが、 javascript: void((function() { var script = document.createElement('script'); script.setAttribute('ty…
プライベートブラウズになっている Safariには履歴を残さないモード（プライベートブラウズ）という機能が備わっており、プライベートブラウズモードの状態でlocalStrageに書き込みを行おうとするとエラーを吐きます。 有名ドコロだと、少年ジャンプ＋にアッ…
FileReader の readAsArrayBuffer を引数にとって DataView のインスタンスをつくると、バイナリデータを解析するためのインスタンスをつくれることを知りました。 JPG、PNG、GIFはバイナリデータの先頭の文字列が決まっているようなので、アップされたファ…
ひょんなことから Apple の Safari HTML Reference を読んでみて知りました。developer.apple.comimage要素のシンタックスのところに、 <img src="img.jpg" srcset="img_HD.jpg 2x, img_sm.jpg 100w, img_smHD.jpg 100w 2x"> と書いてあって、srcset属性ってなんだろうと調べ始めたのがきっかけです。 srcset属性とは imageタグに複数のソースを…
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/watchdeveloper.mozilla.org本日はまりました。 ものすごく端的に書くと、 var obj = {}; if (!obj.watch) { // FF以外はfalseになる obj.watch = []; } else { obj.…
DEMO See the Pen TOMATO #1 by kimmy (@kimmy) on CodePen. HTML <p id="txt">冷やしトマト</p> CSS @charset "UTF-8"; #txt { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 800px; height: 80px; color: #000; font: 80px helvetica, …
文字列 => 配列 "0,1,2,3,4".split(","); //=> ["0", "1", "2", "3", "4"] 配列 => 文字列 [0, 1, 2, 3, 4].toString(); // => "0,1,2,3,4" ただしオブジェクトが入っていると、 [{key: 0}, {key: 1}].toString(); // => "[object Object],[object Object]" …
developer.mozilla.orgテキスト入力可能な alert 。それが prompt です。 JavaScript var txt = prompt("へへへい。", ""); // promptを表示、ユーザーの入力した文字が変数に入る、第2引数はデフォルトの値 if (txt) { alert(txt); } DEMO
とにかく将棋に例える森さん に教えていただきました。twitter.comJavaScriptのオブジェクトをJSONに変換したいときは JSON.stringify で実現できるようです。 JSON.stringify({key : 0}); // => "{"key":0}" JSON.stringify([0, 1, 2]); // => "[0,1,2]" 逆…
kimizuka.hatenablog.com以前base64でfaviconを設定してみました が、今回は動的に差し替えてアニメーションするfaviconをつくってみたいと思います。 方針として、画像をたくさん用意するのがめんどうなのでcanvasをつかってbase64を動的に生成しまくって都…
今流行のインフルエンザにかかってました。やっぱり流行の最先端は抑えておかないといけないですよね。さてさて、そんなこんなで 2年前につくったこちらのブックマークレット ですが、httpsのページでも動作するように改良してみました。2年前はChrome、Safa…
ずっと無理だと思ってました。 いちかばちか SpeechRecognition をつかったら、 Nexus 5X （Android6.0） Nexus 5 （Android5.1） で動きました。ためしてみるもんですね。developer.mozilla.org ソースコード JavaScript (function(win, doc) { "use strict…
すべてのブラウザに実装されているわけではないですが、Chromeでは document.fonts.ready で webフォントの読み込み完了を検知できるようです。 プロミスになってるっぽいので、 document.fonts.ready.then(function (evt) { // ... }); という感じでコール…
少し前に本格的にGruntから乗り換えました。 デフォルトタスクで_srcをルートにサーバを立ててファイルを監視 takeoutタスクでpublic以下に圧縮したソースをコピー というものになっています。 ES6用 https://github.com/kimizuka/GulpES6github.com gulpfil…
準備 こちらのページ からソースコードをダウンロードしておくか、CDNから読み込んでおきましょう。www.createjs.comまた、ドキュメントは こちら にまとまっているので確認しておくと良いと思います。www.createjs.com JavaScript ステージのインスタンスを…
kimizuka.hatenablog.com kimizuka.hatenablog.com前回 につづき 前々回 のコードをCreateJS化していこうと思います。 準備 こちらのページ からソースコードをダウンロードしておくか、CDNから読み込んでおきましょう。www.createjs.comまた、ドキュメント…
kimizuka.hatenablog.com前回 自前でつくった画像のロードの部分をCreateJSのPreloadJSをつかって書き換えてみました。 準備 こちらのページ からソースコードをダウンロードしておくか、CDNから読み込んでおきましょう。www.createjs.comまた、ドキュメント…
kimizuka.hatenablog.com以前の記事 では、 imgタグ backgroundImage をつかって連番画像をコマアニメーションにしたことがありましたが、今回はCanvasをつかって連番アニメを実行してみようと思います。
kimizuka.hatenablog.com先日、iOS版のChromeがアップデートされたということで再度調べました。こちらの記事 とあわせてご確認ください。 検証方法 スクロール中にsetIntervalが動くか確認 こちらのコード をブラウザで開く ページをスクロールしながら観察…
前回の記事 の応用編です。kimizuka.hatenablog.com マークアップをしていると、「シェアボタンによってOGPを切り替えて欲しい」と頼まれる瞬間がやってくると思います。 そんな時こそ Feed Dialog（フィードダイアログ） の出番だと思われます。 DEMO http:…
マークアップをしていると、「縦方向にはfixedにしたいけど、横方向にはfixedしたくない」と思う瞬間がやってくると思います。 そんな時はJavaScriptでウィンドウのスクロールを監視し、fixedした要素のleftを設定するだけで実装できます。 HTML <div id="header"></div> CSS body {…
