みかづきブログ その3

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

JavaScript

Google Apps ScriptでDateオブジェクトをつくろうとしたときのメモ

new Date("2017-12-12 10:00"); // => Thu Jan 01 09:00:00 GMT+09:00 1970 という感じで「あれー?」と思っていたんですが、 new Date(2017, 11, 12, 10, 0, 0); // => Tue Dec 12 2017 10:00:00 GMT+0900 (JST) としたら解決しました。mozillaのサイトのda…

JavaScriptのappendとappendChildの違い

すごく昔に、jQueryで書いたコードをjQuery無しで書き直す作業を行っていたのですが、 $body.append($wrapper); 的なコードを、 document.body.appendChild(wrapper); という感じに書き換えようとして、 document.body.append(wrapper); としてしまいました…

IEでもCanvasに紙吹雪を舞い散らせてみました。

kimizuka.hatenablog.com昔書いたコードをIE用にトランスコンパイルしてみました。 これで、IE10、IE11でも動くようになったと思います。 DEMO JavaScript "use strict"; var _createClass = function () { function defineProperties(target, props) { for …

iOS11のSafariからカメラとマイクにアクセスするシンプルでサンプルなコードを書きました。

iOS11がリリース(9月20日)されてから、はや1ヶ月半弱、 iPhone8が発売(9月22日)されてからも、はや1ヶ月半弱、 iPhoneXが発売(11月3日)されてしてから、はや3日が立ち、32ビットアプリが動かなくなるという情報からか、リリース直後は若干苦戦していた…

delegateを仕上げよう 2017

ライブラリは、jQuery、Vue、React、PixiJSなどなど、 タスクランナーは、Grunt、Gulp、webpackなどなど、 これまで、いろんなものをつかってウェブフロントの開発を行ってきましたが、最近Noライブラリ、Noタスクランナーで、 普通にJavaScriptを書くことが…

JavaScriptでクラス定数を継承したいという想い

いままでクラス定数は static と get をつかって書いていました。 class Klass { static get CONST() { return { HOGE : 1, FUGA : 2, PIYO : 3 }; } } console.log(Klass.CONST.HOGE); // => 1 なんとなくCONSTというオブジェクトの中に定数を入れるという…

Canvasに紙吹雪を舞い散らせてみました。

DEMO See the Pen Confetti by kimmy (@kimmy) on CodePen. JavaScript class Progress { constructor(param = {}) { this.timestamp = null; this.duration = param.duration || Progress.CONST.DURATION; this.progress = 0; this.delta = 0; this.progres…

GoogleMapにスクロールを吸収されるのは嫌だ(スマホでは2本指で操作したい)

kimizuka.hatenablog.com以前、PC版についてはこんな記事を書きましたが、スマホ版はどうしたもんかと思っていました。 (上に透明なDIVとかを置いてクリックすると消えるようにとかしてました)しかし、最近スマホでGoogleMapを見ると、2本指での操作が必要…

個人的にはまったReactでHTMLと違う書き方をしなければならない箇所まとめ(class属性、style属性、scriptタグ、chrset) 👍

ドメインを取ってから3年間、ずーっと工事中だったポートフォリオサイトですが、 ついに本日公開できる状態になりました。Nginx + Express + React + Redux + PostCSSでポートフォリオサイトをつくりました。実験的なUIを採用してスマホファーストを心がけて…

はじめてのPixiJS 😇

いままで2DのものをつくるときはCanvasのAPIを直接叩いていたんですが、 ふと、ライブラリをつかってみようとおもいPixi.jsを試してみることにしました。 ドキュメント に目を通しながら探り探り書いたコードをメモしておきます。 JavaScript // tickerをつ…

iOS10でYouTubeをインライン再生&複数同時に再生するサイトをつくれるか検証する 📱

結論 (2本目以降をミュートにすれば)できる! kimizuka.hatenablog.com昨日の検証 で、iOS10であればYouTubeをインライン再生することが難しくないことがわかりました。kimizuka.hatenablog.com以前、PC向けにYouTubeの動画を2本同時に再生するサイト をつ…

iOS10でYouTubeをインライン再生&自動再生&ループ再生を試してページの背景がムービーのサイトをつくれるか検証する 📱

結論 できる! kimizuka.hatenablog.com以前、iOS10のビデオタグの挙動を調べました が、 videoタグを直接使う機会よりも、YouTubeをつかう機会の方が圧倒的に多いため、YouTubeの挙動を調べてみました。iOS10のビデオに関しての仕様を整理すると、 playsinl…

iOS11ベータ版向けにつくったウェブコンテンツのデバックはSafari Technology Previewの手を借りると楽々 😀

最近、iOS11のSafari向けにコンテンツをつくって試してみることが多いのですが、 ウェブカメラをつかうコンテンツを試しているので実機で確認する必要があり、 ライトニングケーブルでMacと繋いでデバッグ しながら開発を進めたいのですが、 通常のSafariで…

「彼女とデイトなう」につかえるスクリプトを書きました。 😆

はじめに こちらのツイートがとても話題になってますね。そんなこんなで、ブームにのって、「彼女とデイトなう」を実装してみたいと思います。 仕様 まあ、ネーミング先行で中身をなにも考えてなかったので考えます。 Date.now();を実行すると、コンソールに…

iOS11向けにウェブARコンテンツをつくってみました。(マーカーレスの超簡易版) 🏃

追記:(2017/06/09 00:16) 本記事内に掲載している動画キャプチャが、 Apple.Incの開発者利用規約(APPLE BETA SOFTWARE PROGRAM AGREEMENT APPLE INC.)に抵触しているというご指摘をいただきました。 掲載内容を不適切と判断し、該当箇所を削除させてい…

いつの間にかaddEventListenerの第3引数にuseCaptureではなくAddEventListenerOptionsを渡せるようになっている。 😮

ことのはじまり きっかけはこの警告でした。 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080 touchmoveが発火する度になん…

JSON.stringifyに第3引数を渡して整形し出力する 😎

developer.mozilla.orgJSON.stringifyの第3引数でスペーシングの調整をすることができます。 preタグに出力したり、white-space: pre-wrapと組み合わせてつかうことで、 JSONを読みやすく出力することができます。下記のDEMOではどちらもスペーシングとして…

pタグ内の改行コードを改行する(Reactで改行を反映したいときなど) 😎

kimizuka.hatenablog.com JavaScript <p className="txt">{this.props.txt}</p> みたいな感じで、this.props.txtに、 ふるいけや\nかわずとびこむ\nみずのおとという感じで改行コード入りのテキストを渡したい時、 CSS .txt { white-space: pre-wrap; } とCSS側を工夫することで一応…

フロントエンドエンジニアがさくらVPS で Ubuntu + Nginx + Node.js + Express + webpackの環境を整えるまでの道のり - その6 Expressのディレクトリ調整とpm2の導入 😎

春ですね。^ ^なにか新しいことをはじめたくなりますね。^ ^前回はExpressの導入を行いました。 今回は、webpackを導入します。kimizuka.hatenablog.comkimizuka.hatenablog.comkimizuka.hatenablog.comkimizuka.hatenablog.comkimizuka.hatenablog.com …

webpackを導入してPostCSSをCSSに変換してCSSファイルを書き出せるようにする。 😎 (フロントエンドエンジニアがさくらVPS で Ubuntu + Nginx + Node.js + Express + webpackの環境を整えるまでの道のり - その5)

春ですね。^ ^なにか新しいことをはじめたくなりますね。^ ^前回はwebpackをつかってJavaScriptでimportをつかえるようにしました。 今回は、webpackでPostCSSをつかえるようにします。kimizuka.hatenablog.comkimizuka.hatenablog.comkimizuka.hatenabl…

webpackを導入してフロントのJavaScriptでimportをつかえるようにする。 😎 (フロントエンドエンジニアがさくらVPS で Ubuntu + Nginx + Node.js + Express + webpackの環境を整えるまでの道のり - その4)

春ですね。^ ^なにか新しいことをはじめたくなりますね。^ ^前回はExpressの導入を行いました。 今回は、webpackを導入します。kimizuka.hatenablog.comkimizuka.hatenablog.comkimizuka.hatenablog.com ゴールまでの道のり VPSサーバ借りる Ubuntu入れ…

フロントエンドエンジニアがさくらVPS で Ubuntu + Nginx + Node.js + Express + webpackの環境を整えるまでの道のり - その3 - Expressの導入とwebpackを入れる決意を固めるまで 😎

春ですね。^ ^なにか新しいことをはじめたくなりますね。^ ^前回はnodebrew、Node.js、npmのインストールを行いました。 今回は、Express か Koa を選んで導入していきましょう。kimizuka.hatenablog.comkimizuka.hatenablog.com と、思いましたが。決め…

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

kimizuka.hatenablog.comいままではExpressをつかっていましたが、 もう2017年なので、これからは積極的にKoaをつかっていこうと思いました。 Koaとは Koaとは next generation web framework for node.js です。 よくわからないけど、Node.js向けの次世代の…

jQueryのノードリストみたいなやつをつくりたいときはadd()をつかうと良いかも 😎

例えば配列をもとにDOMをたくさんつくりたいとき、 なにも考えないバージョン let $body = $(document.body), arr = [ {index: "66", name : "岡田"}, {index: "00", name : "高濱"}, {index: "1", name : "清田"}, {index: "54", name : "デスパイネ"}, {in…

jQuery3からwidth()、hight()の挙動が変わっとる! 😲

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をつくりました。 😎

CanvasのdrawImageで画像の縮小を行なう際に、一気にサイズを小さくするとジャギーがひどいことになってしまうことがあったので、段階的に小さくしていくためのClassをつくりました。インターフェイスとしては、 var obj = SmoothResize.resize(img, zoom); …

CSSでロングシャドウをつくってその影で影時計をつくりました。 😎

最近、家に時計がないことに気づきました。時計機能のついたものはたくさんあるので、時間がわからなくて困ることは無いんですが、 世の中から時計という装置がどんどん減ってきてるのではないかと思いました。反面、ありとあらゆるものに時計機能が付随して…

配列のIndexにいろいろ入れてみた 😎

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.…

JavaScriptのアローファンクション(アロー関数)ではargumentsがつかえないんですね 😳

先日、 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[…