- 1. 全世界の夜更かしさんに送る、Google Home(mini) + Nature Remo + 鯖(Synology NAS) + Node.jsでつくる夜更かし防止装置のすヽめ(google-home-notifier未使用)
- 2. リバーシbitboard備忘録:全ての着手可能位置に対する処理を行うループ
- 3. JS実行ブロックブラウザが求められている
- 4. JSでおみくじ
- 5. 忘年会でリアルタイムなクイズ大会をFirebaseとVueで構築した話
- 6. Blocklyに基づきビジュアルプログラミングの入門級の実例（二、ブロック毎のステップ実行及びブロックのハイライト表示の方法）
- 7. 正規表現を使った処理で、いい感じの場所に区切り文字を入れる
- 8. 【GAS】GASとMessagingAPIで英単語帳LINEbotをつくってみた！
- 9. Edge,IE11だけFileListにevent.dataTransfer.filesが入らない
- 10. 【jQuery X Laravel 】 Marked.jsでマークダウン機能の実装
- 11. 年末まで毎日webサイトを作り続ける大学生 〜69日目 オブジェクト指向とマウスと円〜
- 12. php 連続 文字 一つに
- 13. LINE Payのオンライン決済を実装する前に知りたかったハマりどころ
- 14. 【Nuxt.js】props応用編：コンポーネントに自由にデータを渡そう
- 15. URL のクエリー文字列の操作？URLSearchParamsの使い方
- 16. Chrome拡張機能開発の公式チュートリアルを解説+補足 後編
- 17. WEBサイトの最終更新日を知る方法
- 18. Reactでeventの属性の取得
- 19. Redux複雑すぎて訳わからん！ので整理メモ
- 20. flatpickrで期間が指定範囲より大きいときにアラートを出したい
全世界の夜更かしさんに送る、Google Home(mini) + Nature Remo + 鯖(Synology NAS) + Node.jsでつくる夜更かし防止装置のすヽめ(google-home-notifier未使用)
# はじめに
ついつい夜更かしをしてしまうの方に向けにGoogle HomeとNature Remoを組み合わせて**「指定した時間以降、部屋が明るければGoogle Homeより早く寝るように警告を発する装置」**をNode.jsで実装する作例をご紹介します！！
市販品を組み合わせるだけなのでお手頃に作れます！！(たぶん)ちなみに似たような作例はよくありますが、多くの記事では**「google-home-notifier」**と呼ばれるGoole Homeに簡単にプッシュ発話をさせるライブラリが使われており、google-ttsの仕様に依存していたり、バグが多かったりして動かないことが多いのでなるべく根本ロジックから実装する方法でやっていきます。
### 構成
# 必要なもの
### Nature Remo
所謂スマートリ
リバーシbitboard備忘録:全ての着手可能位置に対する処理を行うループ
# 概要
リバーシのbitboardを操作する際に使った処理について、備忘録のつもりで書いていきます。
「コード」「コメント」のセットだけ書きます。
実装例はJavaScriptです。
今回は着手可能位置一つ一つに対して処理をしたい場合のループの書き方です。# コードとコメント
“`JavaScript:ex.js
var bit;
/* for文におけるiのようなもの, 32bitのうち1か所のみビットが立っている
ex:0b 00000000
00000000
00000010
00000000 */var pattern0, pattern1;
/* 32bit整数, 着手可能位置にビットが立っているものとする
64bit整数が利用できる環境の場合は変数一つで良い
ex:0b 00000001
00001000
00000010
00011000 */while (pattern0) {
bit = pattern0 & -pattern0;
/* 動作:pattern0の立ってい
JS実行ブロックブラウザが求められている
# 手短に
JS実行をブロックしたら某サイトの**読み込み速度が6倍**になり、**通信量が4分の1**になった。ただし、正常に動作しないサイトもある。**ボタン一つでJSブロックリストに登録することのできるブラウザ**があれば非常に便利。# 背景
ここ数年のオンライン広告の鬱陶しさには辟易している。見たくもない低俗な画像・動画を見せられるというだけでなく、その広い画面占有率は快適なブラウジングの大きな阻害要因だ。画面の2割を占有する下部固定広告を想像してみてほしい。ただでさえ小さなスマートフォンの画面の2割が本来のブラウジングの用途に使用できなくなる。無用な情報にどれだけユーザビリティを下げられているのだろう。
また、5年ほど前から、ブラウジングしている時間は変わっていないのに、ブラウザの通信量が大きく増えていることも気になっていた。これももしかして広告のせいなのではないか？
そこでふと思った。ブラウザの**JS実行をブロック**してみたらどうなるのだろう？そうすれば広告は出なくなりそうだし、広告の読み込みにかかる通信量も減るのではないか？
結果は劇的だった。当然、広告
JSでおみくじ
“`js
‘use strict’;
const btn = document.getElementById(‘btn’);
const kiroku = document.getElementById(‘kiroku’);let count = 0;
let list;const click = btn.addEventListener(‘click’,function omikuji(){
count++;
const number = Math.random();if(number < 0.3 ){ btn.textContent='唐揚げ'; btn.style.color = 'yellow'; alert('ぴよ！'); }else if(number < 0.7){ btn.textContent = 'チキン南蛮'; btn.style.color = 'blue'; }else{ btn.textContent = '西京焼き'; btn.style.color = 'green' } if
忘年会でリアルタイムなクイズ大会をFirebaseとVueで構築した話
# 新人､忘年会でなにかできる？
“`
やりたくないです､楽したいです
“`私､某社に入社したぴかぴかの新入社員です｡最近やっと配属されたところです｡
学生時代はネットワークの研究を主にしていたので､C､C++を主に使っており､JavaやPythonは授業でかじった程度､JavascriptはJavaと違う言語って認識でした｡あまり体育会系ではないので､趣味の延長でできるようなことなら楽できるのでは､と考えて提案｡
# スマホでできるクイズ大会みたいなん作らへん？
“`
え~､一発芸よりしんどくないけど大変そう~
“`
微妙な反応だったので､とりあえず案のひとつにとどめておきました｡
で､内容を確定するまでに実際に1ヶ月半後の忘年会に間に合うかもわからなかったのでとりあえ
Blocklyに基づきビジュアルプログラミングの入門級の実例（二、ブロック毎のステップ実行及びブロックのハイライト表示の方法）
#Interpreterとは
Blocklyのコードを実行する時、簡単なソースコードなら eval() を使えばいいんですけれど、ユーザーブロックを安全に走らせる必要がある場合、独自のJavaScriptインタープリタを組み込みます。
JavaScriptインタープリタは、Google Blockly本家が推奨しています。Blockごとのステップ実行・中断・再開が可能で、実行中のBlockをハイライトすることができるようになっています。
以下の実例は、信号機のライトの点滅を制御することを例として、Blocklyでプログラミングする時で、ブロック毎のステップの実行やブロックをハイライトに表示する方法などを説明して見ます。
#カスタムブロックの作成
[Blocklyの開発ツール](https://blockly-demo.appspot.com/static/demos/blockfactory/index.html)を利用して、以下のブロックを作成してみましょう。ブロックの名称は「stoplightswitch」となっております。
とか[split()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/split)を使って簡単に区切り文字を入れ替えたり、配列にしたりできます。
# まず思いついた方法
今回の場合、上記なような考え方ができないため他の方法をとる必要があ
【GAS】GASとMessagingAPIで英単語帳LINEbotをつくってみた！
# 目次
[1. 作成した背景](#1-作成した背景)
[2. LINEbotの機能](#2-linebotの機能)
[3. 参考記事](#3-参考記事)
[4. 難しかったところ](#4-難しかったところ)
[5. 終わりに](#5-終わりに)## 1. 作成した背景
「LINE DEV DAY 2019」２日目に行きまして、LINEbotのハンズオンに参加したので、何か早速作りたいと思い、作成しました。
アイデアがあまり浮かばないため、ググって「コレいいな。」と思ったアイデアをもとに実装させていただきました:smiley::point_up:
実際に使えるものがいいなと思ったので、気軽に英語を勉強できる英単語帳のようなシンプルなbotにしました:writing_hand:
## 2. LINEbotの機能
英単語帳LINEbotの機能は下記の通りです（^^）
**タイトル：**「Daily English Bot」
**github：** [daily-english-line-bot](https://github.com/kottyan/daily-eng
Edge,IE11だけFileListにevent.dataTransfer.filesが入らない
# 経緯
ドラッグ&ドロップ式 ファイルアップロード画面のIE対応でハマった話
モダンブラウザではきちんと動くのに、edgeとIE11だけドロップしても動かない。“`js
// input要素
const fileInput = document.getElementById(“fileInput”)
// ファイルをdropする要素
const dropTarget = document.getElementById(“dropTarget”)function hoge(event) {
event.preventDefault()
event.stopPropagation()
event.dataTransfer.dropEffect = ‘copy’
}function fuga(event) {
event.stopPropagation()
event.preventDefault()
fileInput.files = event.dataTransfer.files; //今回問題の部分
}dropTarget.addEven
【jQuery X Laravel 】 Marked.jsでマークダウン機能の実装
#Marked.jsでマークダウン機能の実装
2019年11月から、[Laravel歴数ヶ月の初心者が投稿型ナレッジベースのコミュニティサイトを作る](https://qiita.com/AkiYanagimoto/items/216ea9549e758342baab “投稿型ナレッジベースのコミュニティサイトを作る”)というチャレンジ中。作りたいアプリケーション→機能を因数分解→ググる→先人の轍をたどる（写経する）→ぬかるみにはまる→エラー解消の神を探す→解決を繰り返す日々( ·ㅂ·)و 。備忘録として、Qiitaに投稿しています。
今回はマークダウン機能を実装していきます！
## 副課題
今回は、マークダウン機能の実装に併せて、以下の副題をつけてみました。これまでは、バックエンド側だけでしたが、徐々にフロントエンドについても勉強をしていきたいと思います。– bladeとjsファイルを分けて書く方法を試す！！
– Webpack/Laravel Mixを使ってみたい！！## 参考図書
marked.jsの実装については、こちらの記事を参考にさせていただきました。
[マ
年末まで毎日webサイトを作り続ける大学生 〜69日目 オブジェクト指向とマウスと円〜
##はじめに
こんにちは！@70days_jsです。
昨日に引き続き円で遊びました。
昨日は自動でしたが、今日はマウスに合わせて円が作られます。(gif)↓
今日は69日目。(2019/12/26)
よろしくお願いします。##サイトURL
https://sin2cos21.github.io/day69.html##やったこと
マウスに合わせて円を作ります。
cssなし。html↓
“`html
“`JavaScript↓
“`javascript
let canvas = document.getElementById(“canvas”),
ctx = canvas.getContext(“2d”),
php 連続 文字 一つに
# やりたいこと
ABBCCCAAのような文字列をABCAにしたい
# これでおｋ
PHP
“`php
>>> preg_replace(‘/(.)\1+/’, ‘\1’, ‘ABBCCCAA’)
=> “ABCA”
“`JS
“`javascript
‘ABBCCCAA’.replace(/(.)\1+/g, ‘$1’)
=> “ABCA”
“`ruby
“`ruby
“ABBCCCAA”.gsub(/(.)\1+/, ‘\1′)
=> “ABCA”
“`python
“`python
import re
print(re.sub(r'(.)\1+’, ‘\\1’, ‘ABBCCCAA’))=> “ABCA”
“`おわり
類似記事
https://qiita.com/nena3/items/b5fec48c8eecb2353ab1
LINE Payのオンライン決済を実装する前に知りたかったハマりどころ
LINE Payのオンライン決済を実装する機会があったので主なハマりどころを共有します。
# Transaction IDが丸められる
決済要求のためにRequest APIを呼ぶ必要があるのですが、このAPIから返ってくるTransaction IDは19桁の数値で返ってきます。
> 決済要求の結果として受け取った取引番号(19桁)
> https://pay.line.me/documents/online_v3_ja.html#confirm-api19桁の巨大な数値なので、そのまま受け取ってしまうと丸められてしまう可能性があります。
その後のConfirm APIにTransaction IDを渡す必要があるのですが、丸められていると当然違う値なので「決済要求情報が存在しません。」となり決済が出来ません。
丸められていることに気づくまでかなりの時間を要しました。文字列で返すなどアップデートで対応してほしいところです。JavaScriptで書かれたLINE Payのライブラリがあるのですが、こちらではlossless-jsonを利用してこの問題に対応しているようです。
【Nuxt.js】props応用編：コンポーネントに自由にデータを渡そう
# 前置き
Vue.jsとNuxt.jsで便利なpropsを使ってみましょう！
今回は応用編です！
ご意見やご感想、いつでもお待ちしております！props応用編では
・オプション: validator(ちょっと複雑なため)
・cssの付け替え
をやる予定でしたが、・cssの付け替え
・props, $emit, eventBusの違い
に変更致しました！validatorは下記のため、あまり使う機会がなく今回は省きます。
・スペルミスのチェックは、エディターのプラグインで事足りる
・細かい条件指定は、VeeValidateなどライブラリ使う方が良さそう# propsを使おう！応用編
今回はpropsのStringを使って、cssを自由に付け替えましょう！
buttonの背景を親によって変えてみます。【表示結果】
URLSearchParams インターフェイスの append(
Chrome拡張機能開発の公式チュートリアルを解説+補足 後編
#はじめに
この記事は– [Chrome拡張機能開発の公式チュートリアルを解説+補足 前編](https://qiita.com/T-Kawashima/items/15af26bdb2b797534fad)
の続きです。
前編を読んでから、こちらを読むことをおすすめします。
前編では、チュートリアルの1. マニフェストを作成
2. アップロード
3. Backgroundファイルを作成の部分を解説しました。
後編では、
４. Popupファイルの作成
５. Contents Scriptへの反映
６. オプションの設定を行います。
#チュートリアル
前回の記事までのチュートリアルはうまくいったでしょうか？
今回はユーザからの見た目の部分を中心にやっていきます。##4. Popupファイルの作成
ポップアップとは、Chromeの右上あたりに追加されるChrome拡張のアイコンを押すことで表れるUIのことです。
下の画像では、「[YouTube™のための自分好み](https://chrome.google.com/webstore/detail/adb
WEBサイトの最終更新日を知る方法
今見ているWEBサイトがいつ更新されたか知りたいという時が、10年に1回くらいはあるかもしれません。ないかもしれません。
そんな時に使える魔法の呪文がこちらです。
“`
alert(document.lastModified);
“`ブラウザのデベロッパーツールを開いて、
Consoleに上記の呪文をコピペしてエンターキーを叩けば、そのページの最終更新日時（かもしれない）がアラートで表示されます。## lastModifiedとは
「lastModified」は和訳すると「最終更新日」。
上記の呪文は、
**ファイルがサーバにアップロードされた日時（タイムスタンプ）**を
返してくれているんですね。なので、WEBサイトの最終更新日が分かる、は
実は正しいようでちょっと間違っています。何も情報を更新していないのに、ファイルをアップロードし直している可能性だってあります。
さらにHTMLファイルが更新されていなくても、
CSSファイルや画像ファイルが更新されている可能性はあるのです。逆にいうと、ファイル毎で最終更新日時を知ることが出来ます。
例えばそのペー
Reactでeventの属性の取得
Select, Optionで各種属性を取得する方法に迷ったのでメモ。
見た目は下記のような最低限。
## valueの取得
まずはvalue。普通にe.target.valueで取れる。
“`diff
import React from ‘react’;const items = [
{ id: 1, name: “hoge”, address: “tokyo”, age: 11 },
{ id: 2, name: “foo”, address: “osaka”, age: 22 },
{ id: 3, name: “boo”, address: “fukuoka”, age: 33 },
]f
Redux複雑すぎて訳わからん！ので整理メモ
## 概要
Vuexと違って複雑すぎるReduxが中々自分の中で整理できなくて書きました
この記事はReduxの使い方の説明やReduxの概念を深く追求したりすることが目的ではなく、あくまで自分の中でReduxの仕組みなどを頭の中で整理し、
その整理したものを実装の仕方と結びつけることを目的として書いたただのメモです
あと冒頭の部分は自分の中でしっくりきた解釈なので間違っていたらご指摘頂けると幸いです。## Reduxの目的
Vuexを用いてvue開発をしていた時は `vuex = バケツリレー防止剤`的な用途で使っていて、Reduxも同じ感覚で使うと思っていたけど`バケツリレー防止剤`ではないらしい(vuexもそうかもしれん)
バケツリレーを防ぐだけなら[コンテクスト](https://ja.reactjs.org/docs/context.html)を使えば良いしじゃあ何のために使うのか？**Reduxはデータの流れを把握しやすくするためのツール**
っていう認識で今は思っています。
Reduxを使わない場合、様々なコンポーネント内でapiからデータをfetchして、p
flatpickrで期間が指定範囲より大きいときにアラートを出したい
便利なflatpickrでカレンダー表示する際にアラートなどを出してあげたいときにこのようにしたらできました。
※jQueryを使って書いています“`
/**
* カレンダーテスト
* @return なし
*/
// flatpickr実行 以下はクラス名
$(‘.inputDate’).flatpickr({
mode: ‘range’,
locale: ‘ja’,
maxDate: ‘today’,
dateFormat: ‘Y/m/d’,
defaultDate: [‘2019/12/01’, ‘2019/12/10’],
allowInput: true,
onClose: function(selectedDates, dateStr) {
// 値が変更された時の処理
if (!periodJudgment(selectedDates)) {
alert(‘指定範囲が長すぎます！！’);
}
},
});function periodJudgment(selectedDates) {
