JavaScript
いままで2DのものをつくるときはCanvasのAPIを直接叩いていたんですが、 ふと、ライブラリをつかってみようとおもいPixi.jsを試してみることにしました。 ドキュメント に目を通しながら探り探り書いたコードをメモしておきます。 JavaScript // tickerをつ…
結論 (2本目以降をミュートにすれば)できる! kimizuka.hatenablog.com昨日の検証 で、iOS10であればYouTubeをインライン再生することが難しくないことがわかりました。kimizuka.hatenablog.com以前、PC向けにYouTubeの動画を2本同時に再生するサイト をつ…
結論 できる! kimizuka.hatenablog.com以前、iOS10のビデオタグの挙動を調べました が、 videoタグを直接使う機会よりも、YouTubeをつかう機会の方が圧倒的に多いため、YouTubeの挙動を調べてみました。iOS10のビデオに関しての仕様を整理すると、 playsinl…
最近、iOS11のSafari向けにコンテンツをつくって試してみることが多いのですが、 ウェブカメラをつかうコンテンツを試しているので実機で確認する必要があり、 ライトニングケーブルでMacと繋いでデバッグ しながら開発を進めたいのですが、 通常のSafariで…
はじめに こちらのツイートがとても話題になってますね。そんなこんなで、ブームにのって、「彼女とデイトなう」を実装してみたいと思います。 仕様 まあ、ネーミング先行で中身をなにも考えてなかったので考えます。 Date.now();を実行すると、コンソールに…
追記:(2017/06/09 00:16) 本記事内に掲載している動画キャプチャが、 Apple.Incの開発者利用規約(APPLE BETA SOFTWARE PROGRAM AGREEMENT APPLE INC.)に抵触しているというご指摘をいただきました。 掲載内容を不適切と判断し、該当箇所を削除させてい…
ことのはじまり きっかけはこの警告でした。 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080 touchmoveが発火する度になん…
developer.mozilla.orgJSON.stringifyの第3引数でスペーシングの調整をすることができます。 preタグに出力したり、white-space: pre-wrapと組み合わせてつかうことで、 JSONを読みやすく出力することができます。下記のDEMOではどちらもスペーシングとして…
kimizuka.hatenablog.com JavaScript <p className="txt">{ this.props.txt }</p> みたいな感じで、this.props.txtに、 ふるいけや\nかわずとびこむ\nみずのおとという感じで改行コード入りのテキストを渡したい時、 CSS .txt { white-space: pre-wrap; } とCSS側を工夫することで一…
春ですね。^ ^なにか新しいことをはじめたくなりますね。^ ^前回はExpressの導入を行いました。 今回は、webpackを導入します。kimizuka.hatenablog.comkimizuka.hatenablog.comkimizuka.hatenablog.comkimizuka.hatenablog.comkimizuka.hatenablog.com …
春ですね。^ ^なにか新しいことをはじめたくなりますね。^ ^前回はwebpackをつかってJavaScriptでimportをつかえるようにしました。 今回は、webpackでPostCSSをつかえるようにします。kimizuka.hatenablog.comkimizuka.hatenablog.comkimizuka.hatenabl…
春ですね。^ ^なにか新しいことをはじめたくなりますね。^ ^前回はExpressの導入を行いました。 今回は、webpackを導入します。kimizuka.hatenablog.comkimizuka.hatenablog.comkimizuka.hatenablog.com ゴールまでの道のり VPSサーバ借りる Ubuntu入れ…
春ですね。^ ^なにか新しいことをはじめたくなりますね。^ ^前回はnodebrew、Node.js、npmのインストールを行いました。 今回は、Express か Koa を選んで導入していきましょう。kimizuka.hatenablog.comkimizuka.hatenablog.com と、思いましたが。決め…
kimizuka.hatenablog.comいままではExpressをつかっていましたが、 もう2017年なので、これからは積極的にKoaをつかっていこうと思いました。 Koaとは Koaとは next generation web framework for node.js です。 よくわからないけど、Node.js向けの次世代の…
例えば配列をもとにDOMをたくさんつくりたいとき、 なにも考えないバージョン let $body = $(document.body), arr = [ {index: "66", name : "岡田"}, {index: "00", name : "高濱"}, {index: "1", name : "清田"}, {index: "54", name : "デスパイネ"}, {in…
jQuery2.Xで開発していたものを3に切り替えたら挙動が変わって、なんでだろうと思ったていたら、 width()、hight()の挙動が変わったことが原因でした。github.com #box { width: 100px; height: 100px; transform: scale(.5); } というDOMに対して、いままで…
lodash の uniq をつかえばOK!https://lodash.com/docs/4.17.4#uniq var arr = [0, 1, 2, 3, 3]; みたいな配列を、 var arr = [0, 1, 2, 3, 3]; _.uniq(arr); // => [0, 1, 2, 3] としてくれます。(破壊的) 完。 しかし、自分、lodashのようなハイカラな…
CanvasのdrawImageで画像の縮小を行なう際に、一気にサイズを小さくするとジャギーがひどいことになってしまうことがあったので、段階的に小さくしていくためのClassをつくりました。インターフェイスとしては、 var obj = SmoothResize.resize(img, zoom); …
最近、家に時計がないことに気づきました。時計機能のついたものはたくさんあるので、時間がわからなくて困ることは無いんですが、 世の中から時計という装置がどんどん減ってきてるのではないかと思いました。反面、ありとあらゆるものに時計機能が付随して…
var arr = [0, 1, 2, 3, 4]; console.log("1"); // => 1; console.log(arr[true]); // => undefined console.log(arr[false]); // => undefined console.log(arr[[1]]); // => 1 console.log(arr[[[2]]]); // => 2 console.log(arr[0, 1]); // => 1 console.…
先日、 var sum = (a, b) => { var total = a + b; return total; }; sum(1, 2); // => 3 的な関数の引数を可変にしようとしまして、 var sum = () => { var total = 0; for (let i = 0, length = arguments.length; i < length; ++i) { total += arguments[…
仕様かバグかは調べてないのですが、iOS10.2では発火することがありました。詳しい発生条件はわかりませんが、挙動を見るに、少なくとも、 touchstart => touchend の間に touchmove を挟まない touchstart => touchend の間隔を0.1秒程度以下にする の2つが…
JSONをつくる際に、 { index : 3, // 背番号 name : "サブロー" } という感じでコメントを入れてしまうとエラーになります。 なので、いつも泣く泣く、 { index : "COMMENT: 背番号", index : 3, name : "サブロー" } という感じで、 key名を重複させてコメ…
overflow: scroll をつかってiTunesのようにスクロールできるUIをつくってみました。 本当のiTunesにはスクロールバーがついているのですが、なんとなく無い方がかっこいい気がして消しています。 基本的にはCSSのみでつくっているのですが、左右に薄くはい…
本日無性にSin曲線を描きたくなりまして。 最速で描くとしたらどうするかな。と考えたところ。JavaScriptをつかってCanvasにレンダリングすることにしました。 JavaScript var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"…
愚直にパスを左上から時計回りに一周描くことで角丸の四角形を描く関数をつくりました。 JavaScript var canvas = document.getElementById("canvas"); drawRect({ ctx : canvas.getContext("2d"), x : 10, y : 10, width: 120, height: 120, radius: 26, co…
JavaScript window.open("http://kimizuka.fm"); 最小限のコードで検証しました。 ページ読み込み時にwindow.open();を叩いても、デフォルトだと効きません 特にエラーも出ないです。 DEMO http://jsrun.it/kimmy/Mxk7 原因 ポップアップブロックがONになっ…
いつもは、 nodebrew install stable nodebrew use stableと、installをつかっていたのですが、 nodebrew install-binary stable nodebrew use stableと、install-binaryに乗り換えました。 どうせちょっと早くなるだけ、「ハイパーミニがハイパーダッシュに…
英語を訳しただけなのですが、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でし…
cheerio-httpcliをつかいましょう。www.npmjs.com詳しいつかいかたは上記ページに載っているのですが、 例えばブログの最新のタイトルを取得するときは、 var client = require("cheerio-httpcli"); client.fetch("http://kimizuka.hatenablog.com/", {}, (e…