みかづきブログ その3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。

👆

引越し先はこちらです!

JavaScript

Navigator.getUserMediaではなくMediaDevices.getUserMediaをつかう

時代に合わせて修正しました。 IEは未対応ですが、マイクロソフト自身がIEの使用を辞めるよう要請しているとのことなので問題ないでしょう。(?)japanese.engadget.com Navigator.getUserMedia(非推奨) const medias = { audio: false, video: true }; c…

node-sassをつかってscssをcssにコンパイルする

自分の関わった過去のプロジェクトを見返すと、grantを使っていたり、gulpをつかっていたり、webpackを使っていたりして、ウェブフロントエンドの開発環境の移り変わりの早さを感じます。正直最近は環境構築が面倒なので、JavaScriptもHTMLも生で書いてしま…

iOS11からmobile SafariのシークレットモードでもLocalStorageにアクセスできるようになった模様

昔は、iPhone、iPadのシークレットモードのmobile SafariでLocalStorageに値を書き込もうとすると、 The quota has been exceeded. というエラーが出たのですが、iOS11から、しれっとLocalStorageに値が書き込めるようになっていることに気づきました。 ただ…

JavaScriptで小数点以下の桁数を揃えたい

いままでは、小数点以下を、例えば2桁に揃えたいときは、 ((num * 100) | 0) / 100; という感じで、➊ 必要な桁数分小数点をずらす ➋ 0ビットシフトで小数点以下をカット ➌ ずらした小数点を戻すという処理をしていたのですが、他人が見たときに全然直感的で…

JavaScriptでのゼロパディングのイケてる書き方

developer.mozilla.org昔は、 let mm = ('0' + m).slice(-2); のような感じでゼロパディングしていたのですが、 let mm = String(m).padStart(2, 0); と、IEを無視すれば String.prototype.padStart() がつかえるよと教えて頂きました。 // https://github.c…

JavaScriptで和暦を出力する

developer.mozilla.org (new Date()).toLocaleDateString("ja-JP-u-ca-japanese"); // → "30/9/10" JavaScriptで和暦を出力できることを知りました。 試しに1年後の和暦を出力してみた所、 (new Date(Date.now() + 1000 * 60 * 60 * 24 * 365)).toLocaleDate…

Vueで論理属性(その属性が存在するかしないかだけで意味を持つ属性)をバインドする

まず、loopとかautoplayとかreadonlyとか値なしの存在だけでOKな属性のことを論理属性と呼ぶことを知らなかったので、調べるのに苦労しました。reference.hyper-text.orgしかし、答えは単純で、例えばloop属性の場合、 <audio src="https://kimizuka.fm/audio/top/bgm.mp3" v-bind:loop="isLoop"></audio> みたいな感じにしておいて、isLoopがf…

Search Console の Fetch as Google をつかって Googlebot の認識を確認する

「最近のGooglebotはJavaScriptも評価するから、ReactとかVueもSEOが弱くならない」的な噂をよく聞きますが、実際の所どうなんだろうなぁと思っていまいた。しかし、最近、Search Console の Fetch as Google をつかえば Googlebot がどのようにサイトを評価…

Apple Music Toolbox を試しはじめる

Apple Music Toolboxの案内が来たので試してみました。AppleMusic加入者はフルで、未加入者は30秒視聴ができるプレーヤーって書いてある気がするんですが、僕が未加入者なので視聴しかできてません。が。知り合いに試してもらったところ、AppleMusicに加入し…

Dateオブジェクトをつくるときの引数に負の値を入れてみる

kimizuka.hatenablog.comこちらの記事で、Dateオブジェクトをつくるときは、 new Date(dateString);ではなく、 new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);という感じでつくろうと決意したわけですが、monthIn…

Airbnb JavaScript Style Guide と Airbnb CSS / Sass Styleguide

これからしばらくの間は、おとなしくこれらに従って生きていこうと思いました。 JavaScript github.com CSS github.com JavaScriptの、 オブジェクトを1行で書くときはブレースとキー、バリューとブレースの間にスペースを開ける ダブルコートをシングルコー…

こりゃあどうしてもiframeの中からdevicemotionイベントを取得してもらおう

出来らぁっ!しかし、いつも「え!!iframe内から加速度の取得を!?」と思って、 jsdo.itにサンプルを書いている気がするので、今度こそ忘れないようにブログに書いておきます。下記サンプルをiOS12(β)でアクセスして確かめました。 http://jsrun.it/kimm…

JavaScriptでhttpにきたアクセスをhttpsにリダイレクトする

当然サーバサイドで対応するのが良いのですが、フロントエンドのしごとをしていると、「サーバ側の改修が不可能のでフロントでなんとかしてください」ということが稀にあります。もしも、そんな状況で、httpできたアクセスをhttpsにリダイレクトしたかったら…

MacをつかってElectronでアプリをWindows用に書き出すとき。

書き出すとき brew install wineで wine を導入し、 npm install electron-packagerで packaer をインストールして、 electron-packager . app --platform=win32 --arch=x64でアプリ化できます。 引数は順番に、 electron-packager #{パッケージ化するソース…

1年ぶりに己のウェブサイトを更新しようとして、もろもろアップデートしました。

kimizuka.fmGWをつかってひさしぶりに更新しようとしました。 が。もろもろ環境が古くなっていたので、軽い気持ちで更新の前に環境を更新しておくかと思い手を付けたところ案外大変だったので、色々メモを残しておきます。 Node.js 7.9.0 10.0.0先日、Node.…

AWS SDK for JavaScript にて AWS.DynamoDB.DocumentClient のタイムアウトを設定する

www.npmjs.com AWS SDK for JavaScriptを使ってLambdaからDynamoDBに読み書きを行なう際、タイムアウトの設定をしたいときがあると思います。そんな時は、 import AWS from "aws-sdk"; const client = new AWS.DynamoDB.DocumentClient({ httpOptions : { ti…

switch文でletをつかう

switch (txt) { case "hoge": let i = 0; break; case "fuga": let i = 1; break; case "piyo": let i = 2; break; } こんな感じで書いたら、 Uncaught SyntaxError: Identifier 'i' has already been declaredとエラーになりました。そう。なぜならブロック…

AWS SDKをつかってDynamoDBをつかう際にタイムアウトを設定する(Node.js)

github.com const AWS = require("aws-sdk"), TABLE_NAME = "HOGE", client = new AWS.DynamoDB.DocumentClient({ httpOptions : { timeout: 3000 }, maxRetries : 0 }); client.get({ TableName : TABLE_NAME, Key : { keyname : "FUGA" } }, (err, data) =…

Can not fetch: とか 言われて nodebrew で node のインストールが失敗する

nodebrew install-binary 8.9.4でインストールしようと思ったら、 Can not fetch: https://nodejs.org/dist/v8.9.4/node-v8.9.4-darwin-x64.tar.gzという感じで失敗しました。かつてnodebrewをインストールしたとき のように、 curl -L git.io/nodebrew | pe…

続・ランダムに数字を抽選しつつ、一巡するまでは同じ数字を抽選しない(非復元抽出)

kimizuka.hatenablog.com以前、一度つくった事があるんですが、Node.js用に書き換えました。 また、「ランダムに数字を抽選しつつ、一巡するまでは同じ数字を抽選しない」は「非復元抽出」ということも親切な方に教えていただきました。 Lottery.js "use str…

Google Apps Scriptで1週間に何回ブレストしたかカウントしてみる

下記スクリプトでカウントしてみました。 検索ワードを変えれば色々活用できそうです。 JavaScript var year = 2018; var month = 1; var weekStartDate = 22; var keyword = "ブレスト"; function main() { checkTitle(keyword); } function checkTitle(ttl…

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を採用してスマホファーストを心がけて…