みかづきブログ その3

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

JavaScript

Airbnb JavaScript Style Guide と Airbnb CSS / Sass Styleguide

これからしばらくこれらに従って生きていこうと思いました。 JavaScript github.com CSS github.com JavaScriptの、 ダブルコートをシングルコートにする オブジェクトの最後の値にカンマを付ける の2点に慣れるまでに時間がかかりそうです。

こりゃあどうしても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本同時に再生するサイト をつ…

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 …