読者です 読者をやめる 読者になる 読者になる

みかづきブログ その3

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

ウェブフロントエンドエンジニアであればElectronをつかって6分でデスクトップアプリがつくれるぞ。

ぼくがMacユーザーなんで、Mac用のアプリをつくってみようと思います。 昔はMacGapをつかっていたんですが、これを機に最近流行りのElectronに乗り換えますね。github.comelectron.atom.io今話題の Atom とか Slack とかは Electron でつくられているようで…

はじめてのthree.js その2

kimizuka.hatenablog.com以前、はじめてのthree.jsを書いてから、全然three.jsを触る機会がなかったのですが、このままでは昨今の3Dブームに置いて行かれてしまうと思い、再び触り始めました。今回は、前回までの知識をフル活用して、自分のアイコンをつくっ…

JavaScriptで変数の中身が配列かどうかチェックしたいときの記法まとめ

ES5に対応しているブラウザ var hoge = []; hoge instanceof Array; // => true その他のブラウザ var hoge = []; ({}).toString.call(hoge) === "[object Array]"; // => true jQuery var hoge = []; $.isArray(hoge); // => true iframeなどを考慮せずwind…

@cc_on ステートメントをつかってIEでのみJScriptを実行する

@cc_on ステートメントJavaScriptのコメントを /*@cc_on @*/ という感じで書くと、コメントの中身がIEでのみJScriptとして評価されることを知りました。なので、 var ieVersion = 0, jscriptVersion = 0; /*@cc_on jscriptVersion = @_jscript_version; @*/ …

JavaScriptでつかえるローマ字都道府県リスト(配列)

ローマ字の都道府県の配列をつくる必要がありまして、がんばってつくりました。 同じものをつくりたい人がたどり着いたときにコピペでつかえるように貼り付けておきます。 先頭だけ大文字 ["Hokkaido", "Aomori", "Iwate", "Miyagi", "Akita", "Yamagata", "…

ブックマークレットをつくるのであればGitHub Pagesが良いのではないかという想い

kimizuka.hatenablog.comkimizuka.hatenablog.comkimizuka.hatenablog.comこれまでブックマークレットのつくりかたをあれこれ模索してきましたが、 javascript: void((function() { var script = document.createElement('script'); script.setAttribute('ty…

iPhoneのSafari(mobile Safari) にて localStrageにアクセスできないときに疑うべきこと

プライベートブラウズになっている Safariには履歴を残さないモード(プライベートブラウズ)という機能が備わっており、プライベートブラウズモードの状態でlocalStrageに書き込みを行おうとするとエラーを吐きます。 有名ドコロだと、少年ジャンプ+にアッ…

モダンブラウザでバイナリを解析して画像の形式を識別する

FileReader の readAsArrayBuffer を引数にとって DataView のインスタンスをつくると、バイナリデータを解析するためのインスタンスをつくれることを知りました。 JPG、PNG、GIFはバイナリデータの先頭の文字列が決まっているようなので、アップされたファ…

imageタグのsrcset属性をつかって複数の画像のソースを切り替える

ひょんなことから 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タグに複数のソースを…

FirefoxのObject.prototype.watch()にはまりました。

developer.mozilla.org本日はまりました。 ものすごく端的に書くと、 var obj = {}; if (!obj.watch) { // FF以外はfalseになる obj.watch = []; } else { obj.watch.push("hoge"); } という感じでobjectにwatchを持っていなければ配列をつくり、持っていれ…

text-strokeをアニメーションさせる

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

JavaScriptでカンマ区切りの文字列を配列に変換したり、配列をカンマ区切りの文字列に変換したりする

文字列 => 配列 "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

JavaScriptのオブジェクトをJSONに変換する

とにかく将棋に例える森さん に教えていただきました。twitter.comJavaScriptのオブジェクトをJSONに変換したいときは JSON.stringify で実現できるようです。 JSON.stringify({key : 0}); // => "{"key":0}" JSON.stringify([0, 1, 2]); // => "[0,1,2]" 逆…

canvasでbase64を生成し動的にfavicon差し替える

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…

document.fonts.ready で webフォントの読み込み完了を検知する

すべてのブラウザに実装されているわけではないですが、Chromeでは document.fonts.ready で webフォントの読み込み完了を検知できるようです。 プロミスになってるっぽいので、 document.fonts.ready.then(function (evt) { // ... }); という感じでコール…

Gulp作業メモ

少し前に本格的にGruntから乗り換えました。 デフォルトタスクで_srcをルートにサーバを立ててファイルを監視 takeoutタスクでpublic以下に圧縮したソースをコピー というものになっています。 ES6用 github.com gulpfile.babel.js var ASSETS_PATH = "data/…

EaselJS(CreateJS)のフィルターを試す

準備 こちらのページ からソースコードをダウンロードしておくか、CDNから読み込んでおきましょう。www.createjs.comまた、ドキュメントは こちら にまとまっているので確認しておくと良いと思います。www.createjs.com JavaScript ステージのインスタンスを…

EaselJS(CreateJS)をつかって連番画像をコマアニメーション

kimizuka.hatenablog.com kimizuka.hatenablog.com前回 につづき 前々回 のコードをCreateJS化していこうと思います。 準備 こちらのページ からソースコードをダウンロードしておくか、CDNから読み込んでおきましょう。www.createjs.comまた、ドキュメント…

PreloadJS(CreateJS)をつかって画像をプリロードする

kimizuka.hatenablog.com前回 自前でつくった画像のロードの部分をCreateJSのPreloadJSをつかって書き換えてみました。 準備 こちらのページ からソースコードをダウンロードしておくか、CDNから読み込んでおきましょう。www.createjs.comまた、ドキュメント…

Canvasで連番画像をコマアニメーション

kimizuka.hatenablog.com以前の記事 では、 imgタグ backgroundImage をつかって連番画像をコマアニメーションにしたことがありましたが、今回はCanvasをつかって連番アニメを実行してみようと思います。

iOS版Chromeのページスクロール中のJSの動きを調べました(48.0.2564.87)

kimizuka.hatenablog.com先日、iOS版のChromeがアップデートされたということで再度調べました。こちらの記事 とあわせてご確認ください。 検証方法 スクロール中にsetIntervalが動くか確認 こちらのコード をブラウザで開く ページをスクロールしながら観察…

押されたシェアボタンによってOGPを切り替えるページをつくる

前回の記事 の応用編です。kimizuka.hatenablog.com マークアップをしていると、「シェアボタンによってOGPを切り替えて欲しい」と頼まれる瞬間がやってくると思います。 そんな時こそ Feed Dialog(フィードダイアログ) の出番だと思われます。 DEMO http:…

fixedの要素も横方向にはスクロールして欲しいという想い

マークアップをしていると、「縦方向にはfixedにしたいけど、横方向にはfixedしたくない」と思う瞬間がやってくると思います。 そんな時はJavaScriptでウィンドウのスクロールを監視し、fixedした要素のleftを設定するだけで実装できます。 HTML <div id="header"></div> CSS body {…

ページスクロール中のJSの動きを調べてまとめました(iPhone6 iOS 9.2.1 にて確認)

一昔前はページスクロール中はJSが止まってしまうことがあたりまえだったiOSのブラウザ。 なのでスクロール連動のサイトとかを実装するときはいろいろ大変でした。(自前でスクロールを実装したりしてました) しかし、最近のSafariはスクロール中にもJSが動…

昨今どんどん巨大化するスマートフォンの為のUIを考えた結果、ななめにスクロールするUIもいいんじゃないかと思いました

きっかけは この記事 を読んだことにあります。 (もう1年以上前の記事なんですね)gigazine.netいろいろと参考になることが書いてあるのですが、なかでも一番気になったポイントは右手でスマートフォンを操作する人の指の届く範囲を表したこの図でした。 ht…

GulpをつかってHTML, JS, CSS, 画像を圧縮するタスクをつくる

最近、ひさしぶりタスクランナーなしでコーディングをしました。タスクランナーなしで作業するときは、JSHint, a JavaScript Code Quality Tool や The W3C Markup Validation Service でバリデートをかけたり、jshint.comvalidator.w3.org/packer/ 、 CSS M…

iframeを読み込んでいる親ページのURLを取得する

同一ドメインのとき parent.location.href で親のURLを取得できます。iframeが入れ子になっている場合も親のURLになります。 入れ子になったiframeの大本の親のURLが知りたい場合は、 top.location.href で取得できますが、すべてのiframeが同一ドメインであ…

JavaScriptとCSSの力をつかってEメールアドレスを途中まで入力したらドメイン以下をサジェストするフォームをつくる

See the Pen Form for Email by kimmy (@kimmy) on CodePen.タイトルのとおりです。 @以下の一文字をタイプしたときに、 @gmail.com, @yahoo.co.jp, @hotmail.co.jp, @docomo.ne.jp, @ezweb.ne.jp, @softbank.ne.jp をサジェストします。 ソースコード HTML <div class="input-box"></div>…

windowにaddEventListenerしたイベントをjQueryでtriggerしようとすると発火しないときがある

kimizuka.hatenablog.com window.addEventListener("resize", _handleResize, false); function _handleResize() { // ... } でリサイズイベントを張って、 window.dispatchEvent(new Event("resize")); と、初期化のタイミングでイベントを発火させていたの…

オンガクスリを作業用BGMとしてフル活用するためのブックマークレットをつくりました

qiita.comこの記事は 作業用BGM(個人or社内) Advent Calendar 2015 の18日目の記事です。 今回は作業用BGMから人生の悩みを解決するような音楽まで見つかるかもしれない、オンガクスリ というウェブサービスについて紹介したいと思います。 オンガクスリとは…

スマートフォン向けサイトに設置するフォームを設置するときの小技まとめ

最近フォームをコーディングすることがとても多いのでまとめておこうと思います。 スマートフォンでデフォルトにあたっているスタイルをリセットする webkit系のブラウザはフォームにいい感じのスタイルを当ててくれています。 いい感じではあるんですが、自…

JavaScriptで真偽値(Boolean)を数値(Number)にキャストする

kimizuka.hatenablog.com数値(Number)を真偽値(Boolean)にすることはよくあるのですが、逆を考えたときに一瞬むむむと思ったのでメモしておきます。 JavaScript Number(true); // => 1 Number(false); // => 0 true - 0; // => 1 false - 0; // => 0 tru…

最近JavaScriptを書くときに心がけていること

そろそろ、飛び込み営業からフロントエンジニアに転職してから5年が経ちます。つい最近、2年前ぐらいに書いたコードを読み返し、そのごちゃごちゃしていてびっくりしました。 0からのスタートだったので、毎年毎年コードの書き方が微妙に変化していることも…

JavaScriptで配列の指定した要素を最後尾にまわす

必要だったのでつくりました。2度と使う機会は無いかもしれません。 JavaScript function goToTailEnd(array, val) { var index = array.indexOf(val), target; if (index > -1) { target = array.splice(index, 1); array.push(target[0]); } return array;…

Switch文でfalsyな値をチェックしようとした際の注意

最近Switchでnullをチェックする機会があって、他のfalsyな値もチェックできるかを確かめたのですがNaNだけが失敗しました。 checkFalsyValue(false); checkFalsyValue(null); checkFalsyValue(({}).val); checkFalsyValue("hoge" - 0); // MISS!! checkFals…

ページ上のimg要素をすべて非表示にするスクリプト

ワンライナーだとこんな感じでしょうか。(Chromeでしか動作を確認していません) JavaScript ([].slice.call(document.querySelectorAll("img"))).forEach(function(elm) {elm.style.display = "none"});

JavaScriptの予約語を調べる

developer.mozilla.orgJavaScriptで継承を行う際に、 function SubKlass() { SuperKlass.apply(this, arguments); } SubKlass.prototype = Object.create(SuperKlass.prototype); SubKlass.prototype.constructor = SubKlass; を、 function SubKlass() { th…

Object.createをつくろう

引数で渡したオブジェクトをprototpeに持ったobjectを生成してくれるObject.create。 便利なのですが、IE8以下ではつかうことができません。 そういう場合は自分で作ってしまいましょう。 JavaScript if (!window.Object.create) { window.Object.create = f…

CSSアニメーションでランダムっぽい動きを実装する

DEMO SCSS @import "compass/reset"; body { background: #311B92; } .circles { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 300px; height: 300px; -x-animation: rotate 10s linear infinite; .circle { float: lef…

QUnitで非同期な処理のテストを行う

いまさらながらQUnitでテストを書いてます。 テストの書き方はまた別の機会にまとめるとして、取り急ぎ非同期の処理をテストする方法がまとめておきます。 JavaScript QUnit.test("API - TEST", function(assert) { stop(); $.get("#{URL}").done(function(e…

はじめてのWeb Worker

はじめてなので、workerを別ファイルに分けるという最もシンプルな方法でWeb Workerをつかってみました。 これだけであればすこぶるシンプルです。 JavaScript main.js (function(win, doc) { "use strict"; var worker = new Worker("http://jsrun.it/kimmy…

Canvasをつかって画像をぼかす習作 #4

kimizuka.hatenablog.com 前回 からの改修点 実装をクラス風に改良しました。 imageDataのコピーを取りました。(以前のものは右下ほどぼけてました) JavaScript (function(win, doc) { "use Strict"; function Blur(elm) { var that = this; _init(); func…

Number.prototype.toLocaleString の挙動を正規表現で実装する

職場の先輩に言われて考えてみました。もうちょっとシンプルにできそうです。 "1000000".replace(/(\d)(?=(?:\d{3})+$)/g, "$1,"); // => "1,000,000"

Canvasをつかって画像をぼかす習作 #3

kimizuka.hatenablog.com前回 までのコードでは、 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24とピクセルがあったとき、自分の周りのピクセルの平均をとっていました。 例えば12番の値を出す際は 06 07 08 11 12 13 16 17 …

Canvasをつかって画像をぼかす習作 #2

http://kimizuka.hatenablog.com/entry/2015/10/10/185955kimizuka.hatenablog.com前回canvasで画像をぼかす習作をつくりました が、今回はDOMを渡すとbackground-imageに設定されている画像をぼかしてbackground-imageを差し替えるという習作をつくってみま…

Canvasをつかって画像をぼかす習作

いつもはCSSのfilterをつかってぼかすのですが、 Android4.3以前も対応させようとするとそうもいきません 。developer.mozilla.org Can I use... Support tables for HTML5, CSS3, etcというわけでCanvasをつかって画像をぼかす習作をつくってみました。 自…

jsdo.it用QRコードメーカーをつくりました

jsdo.itコードの検証を行う際、jsdo.it をつかうことが多いのですが、そのURLをスマートフォンに渡す際はいつも手打ちしていました。 流石にめんどうなので、URLをQRコードに変換しようと思ったのですが、 jsdo.it には、 コード編集は jsdo.it で行われるが…