みかづきブログ その3

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

JavaScript

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

はじめてのPixiJS 😇

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

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

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