JavaScript関連のことを調べてみた2020年08月06日

「お父さん、アルゴリズムってなぁに？」

※この記事は無職やめ太郎（@Yametaro）氏の「ワイ口調」記法をパクり…リスペクトしました。
※また、ネットミームを含みます。苦手な方は頑張って読んでください
#前書き
8歳娘「なんか、学校のプログラミングの授業で中村君がアルゴリズムはいいぞとかいうけど、意味が分からない」

父「ほ～ん。で、中村君、何言ってたん？」

娘「なんかアルゴリズムを使ったら、__めんどくさい計算がすぐにできる！__とか、__クソコードを撲滅できる！__って言ってた」

父「ほ～ん、じゃアルゴリズムについて素数表示を例に教えるわ」

娘「わ〜い！」
ワイ「ワ〜イ！」
父「誰だこいつ」

#分かりやすい例を出してみる～素数表示

父「娘ちゃん、素数ってわかるやろ？」

娘「うん、2,3,5…とかの1と自分自身以外に約数を持たない数でしょ」

父「そうそう。それじゃ、素数の条件ってわかるか？」

娘「えーと、偶数の素数は2のみであることと、、、」

ワイ「あとは、__3以上では奇数であることやな__」

父「（だからこいつ誰だよ）そうやな、じゃあ2~100までの素数をだしてみてみ」

娘「えーと、2,

Cognos Analytics 11.1.7 新機能紹介

#Cognos Analytics 11.1.7 新機能紹介
Cognos Analytics 11.1.7が2020/7/30にリリースされました。

このバージョンは、長期サポートバージョン(LTSR)となりますので、他のバージョンと違い、基本2年、延長1年のサポートが受けられるバージョンとなります。
**Cognos Release 11.1.7 is a Long-Term Support Release**
https://community.ibm.com/community/user/businessanalytics/blogs/nickolus-plowden/2020/07/30/ltsr

11.1.7に追加された新機能を紹介します。

#全般
**新しい開発者向けAPI**
Cognosでの開発者向けAPIと言えば、Cognos SDKというJavaベースのものでしたが、JavaScriptベースで動作するREST APIが追加されたようです。
・レポート/ダッシュボード/フォルダ、などの各種コンテンツの一覧や情報取得
・各種コンテンツのプロパティの変更
・各種

Google Functions & Node.js: bunyanで高レベルなロギングをする方法

本稿では、Google Could Platform(GCP)のGoogle Cloud Functions(GCF)で、Node.jsのロギングライブラリ[bunyan]を使ったログの記録方法を説明します。

[bunyan]: https://github.com/trentm/node-bunyan

## この投稿で学べること

1. bunyanをGoogle Cloud Functionsの関数に組み込む方法
1. bunyanのメソッドの呼び出し方
1. bunyanでオブジェクトの値をロギングする方法
1. bunyanで記録したログの読み方

__この投稿では説明しないこと__

* bunyanを使ってStackDriverにロギングする方法
* bunyanを使ってStackDriverに「重要度」をつけながらロギングする方法

bunyanとStackDriverを組み合わせると、より自由度が高く分析しやすい構造でロギングすることが可能なりますが、この投稿ではそれについては説明しません。bunyanを単純にCloud Functionsで使うだけでも高レベルなロ

typing_gameを作成しました。

#what
シンプルなタイピングゲームを作成。

#why
HTML,CSS,JavaScriptの学習、理解を深めるため

#issue
・半角英数小文字のみ対応なので、全角日本語入力への対応。
・ミスタイプした際ライフポイントゲージが減り、０になるとゲームオーバーの機能。

“`index.html

Typing Game

Google Functions & Node.js: winstonで高レベルなロギングをする方法

本稿では、Google Could Platform(GCP)のGoogle Cloud Functions(GCF)で、Node.jsのロギングライブラリ[winston]を使ったログの記録方法を説明します。

[winston]: https://github.com/winstonjs/winston

## この投稿で学べること

1. winstonをGoogle Cloud Functionsの関数に組み込む方法
1. winstonのメソッドの呼び出し方
1. winstonでオブジェクトの値をロギングする方法
1. winstonで記録したログの読み方

__この投稿では説明しないこと__

* winstonを使ってStackDriverにロギングする方法
* winstonを使ってStackDriverに「重要度」をつけながらロギングする方法

winstonとStackDriverを組み合わせると、より自由度が高く分析しやすい構造でロギングすることが可能なりますが、この投稿ではそれについては説明しません。winstonを単純にCloud Functionsで使うだ

VisualforceでQRコード作成してみた

　LWCでQRコードリーダのコンポーネントを作成できること(Beta版)を知りました。
そちらを試す前にVisualforce上でQRコードを作成する機能を作ってみました。

[LWCの開発者ガイド(Scan Barcodes)](https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.use_barcodescanner)

# 成果物

※表示しているレコードはDevEditionに初期保存されている取引先責任者のレコードです。

オブジェクトのアクションをVisualforceページで作成しております。
Visualforce内のJavaScriptで現在のURLのQRコードを生成しています。
(オブジェクト固有のLigh

JS 配列の一番最後以外の要素を返す

## lodashのinitial関数を作ってみた

[lodashのinitial関数](https://lodash.com/docs/4.17.15#initial)

~~~javascript
const initial = (array) => {
const initialArray = []
for (let i = 0; i < array.length - 1; i++) { initialArray.push(array[i]) } return initialArray } console.log(initial([1, 2, 3, 4])) // => [ 1, 2, 3, 4, 5 ]
~~~

###▼POPメゾッドを使うともっと簡潔に書けるみたいだった

~~~javascript
const initial = (array) => {
const copedArray = […array]

//popメゾッドは末尾の要素を取り除く
copedArray.pop()
return copedArray
}

HTML MediaElement で NightCore する?

# TL;DR
“`cs
(function()
{
const media = document.getElementsByTagName(“video”)[0];
media.mozPreservesPitch = false;
media.playbackRate = 1.2;
})()
“`

# 動機

昨今は、Youtubeなど大抵の動画サイトでは再生速度を調節する機能がついています。
しかしながら、これらの再生速度を変更すると、ピッチが自動で修正（見かけ上?…聴きかけ上?変わらないように）されてしまいます。
普通の動画であれば、この挙動の方がありがたいのですが、聞き慣れた音楽をピッチを維持って聞きたい時があります。
そうです`NightCore`です。

# 対応ブラウザについて

Firefoxで検証しました。
MDNのドキュメントを見る限りSafari（Webkit）でもサポートされているようです。この場合、Prefixが`moz`ではなく`webkit`になります。
ChromeではPrefixのつかないプロパティが実装されている的なことが書いてあっ

JavaScriptで現在のURLを取得 条件分岐

### URL全体の取得

“`javascript
var url = location.href ;
console.log(url);
// http://hogehoge.com/fuga.html
“`

“`javascript
var URL = document.URL;
console.log(URL);
// http://hogehoge.com/fuga.html
“`

### プロトコルのみの取得

“`javascript
var protocol = location.protocol ;
console.log(protocol);
// http:
“`

### ドメインのみの取得

“`javascript
var host = location.hostname ;
console.log(host);
// hogehoge.com
“`

### パスのみの取得
“`javascript
var path = location.pathname ;
console.log(path);
// /fuga.html
“

【JavaScript】Blackjack – ブラックジャック

#はじめに

JavaScriptの勉強としてブラックジャックを制作してみました。
今までは基礎としてはES6以前のコードで記述していましたが、最近ES6以降のコードを学んだのでそれらを意識しながら記述してみました。
まだまだのコードだとは思いますが、ブラックジャックのコードが他にあまりなかったので後学者の参考になればと思います。

#キャプチャ


#ソースコード

##html

“`html:html

ディーラー

ブラウザの戻るボタンを押せなくする（ブラウザバック禁止）

既出だとおもいますが、勉強になったのでメモがてら。

表題通り、ブラウザバックさせないようにするためには、履歴を残さないようにすればOK。
`Location.replace()` を使えば、ページを移動した履歴が残らないとのこと。

html 内に書くなら、onclickを使って下記通り。

“`html

ページをすすむ

“`

jsで書くなら下記通り。

“`js
$(‘.class’).on(‘click’, function () {
window.location.replace(指定のURL);
});

“`

##■参照
http://www.htmq.com/js/location_replace.shtml
https://syncer.jp/javascript-reference/location/replace

inkscapeで画像を作って、jsで操作してみた。

## はじめに
「webサイト上で画像を動かせるようになりたい！」
この記事を読むことで上記の望みを達成できるかと思います。
事前にinkscapeをPCにインストールしてください。インストール方法については他の記事を参照してください。

## inkscapeで画像を作成
inkscapeで適当なSVG画像を作成して下さい。
今回は、以下のSVGを作成しました。

## プログラム
inkspaceでSVGファイルを作成したら、htmlとjavascriptで画像を操作するプログラムを作成します。

ファイル構造↓

index.html

“`index.html




<

無料の天気予報APIでWEBアプリを作ってみた

#初めに

vue.jsを初めて使用してアプリを作ってみました。ボタンをクリックすると各地域のリアルタイム天気が表示される予定でした。

#作ったもの
長野県のボタンのみ実装された長野地域限定のWEBアプリが完成？しました。長野県の現在の様子を画像と共に教えてくれます。

##使用したフレームワーク・ライブラリ
Vue.js
axios
bootstrap
OpenWeatherMap API

##デモ
https://happy-fermat-76197f.netlify.app/

無料の天気予報APIでWEBアプリを作りました。リアルタイムで長野の天気がわかります。#protoouthttps://t.co/PkSGddeAyU

コピペで使える＋－トグルアイコン

自分用チートシートです。
※JQuery必須

#HTML
“`html

“`
これだけ。

#CSS
“`scss
.icon {
display:block;
position:relative;
width:30px; //正方形推奨
height:30px; //正方形推奨
}
.icon:before,
.icon:after{
content:”;
display:block;
position:absolute;
top:50%;
transform:translate(0,-50%);
width:100%;
height:3px; //線の太さ
background-color:pink; //線の色
}
.icon:after {
transform:translate(0,-50%) rotate(90deg);
}

.icon.minus:before {
opacity: 0;
}
.icon.minus {
transform:rotate(90deg);

Laravel+Vue.jsで作成したSPAサイトでOGP対応

#はじめに
個人開発でLaravel5.5とVue.jsを使用して作成したSPAサイトがあり、長らく放置していたのですが、最近勉強を兼ねて少しリファクタリングをしようかなと思いました。

[ラブライブ専用掲示板](https://lovelivebbs.jp)

上記が作成したサイト（掲示板）になります。
治すべき部分はたくさんあるのですが、まず気になったのがTwitterカードの表示です。
特に、掲示板のスレッドURLをツイートした際に、デフォルトの情報が表示されてしまうのが見た目の部分で致命的でした。

## まずやったこと
最初にapiでスレッドの情報を読み込んだ後のタイミングで`querySelector`を使用して動的にmetaタグを変更しました。

“`javascript
//APIでデータ取得後
document.title =

【Vue.js】さ迷うハロオタがお誕生日カレンダーを作った

#はじめに

_アンジュルム元メンバー・室田瑞希_

私はハロープロジェクト所属(筆頭はモーニング娘。’20ですね)のアンジュルムというグループとメンバーの室田瑞希さんという方のファンで、ここ４年くらい足繁くライブやイベントに参加していました。
昨年の誕生日イベントや地元・千葉公演など良き思い出がたくさんあります。
[アンジュルム｜ハロー！プロジェクト オフィシャルサイト](http://www.helloproject.com/angerme/)
#悲劇は起きた
[アンジュルム室田瑞希が卒業を発表](https://natalie.mu/music/news/364220)

２０２０年1月、突然の卒業発表。
当時の職場でのシビアな話合いの直後に入ってきたニュースだったので
余計にダメージを喰らいました。
その後の卒業

【JavaScript】条件(三項)演算子（if文の省略形）の使い方

#【JavaScript】三項演算子（if文の省略形）の使い方

if文を省略した形で記述できる三項演算子の使い方。
名称は条件演算子、三項演算子、条件参考演算子など呼び方はまちまち。

①条件式、②trueの処理、③falseの処理の３つの値を必要とするのが名前の由来。

＜構文＞
・`条件式 ? trueの処理 : falseの処理`

##if文との比較
“`js:三項演算子(数値)
10 > 0 ? ‘Yes’ : ‘No’
“`

“`js:if文
if(10 > 0){
‘Yes’
}else{
‘No’
}
“`

if文よりもシンプルに記述できる。

##使い方の例

**条件式は変数も使える**

“`js:三項演算子(数値)
ok = true
ok ? ‘Yes’ : ‘No’
“`

###真偽値を切り替える
“`js:三項演算子(数値)
isLargeToggle: function(){
this.isLarge == true ? this.isLarge = false :

Unchecked runtime.lastError: The message port closed before a response was received. を回避した一例

#初めに
自作chrome拡張機能の制作中、とある処理をすると必ずこのエラーが出て気になっていたのですが、一行追加したら出なくなったので記念に残しておきます。

どんな処理かざっくり言いますと、
アクティブページで得た情報を、ポップアップメニューを介して拡張機能専用ウィンドウへ送信するものです。
完了したタイミングで、ポップアップ側にてエラーが出てました。

#エラーを出していたコード
アクティブページ側は省略。

“`javascript:popup.js
const sendMessage = (id, msg) => new Promise( r => chrome.tabs.sendMessage( id, msg, s => r(s) ) );
//アクティブページの情報を取得
const res = await sendMessage( tab_id, { … } );
//受け取ったデータを専用ウィンドウへ送信
sendMessage( window_tab_id, res );
“`

送信後に行う処理も無いので投げっぱなし

“`javascript:ap

【時短テク】再生速度を指定できない動画を倍速で見るためのワンライナー

## ブラウザのデベロッパーツールでこれを実行すれば動画が倍速で再生される

“`js
document.getElementsByTagName(‘video’)[0].playbackRate = 2
“`

### 注釈

* 倍速だと早すぎる場合は、最後の `= 2` を1.5に変えると1.5倍速にできます。1にすれば元に戻ります。
* 動画（videoタグ）がページ内に一つだけの場合に使えます。　※複数ある場合は `[0]` を指定したい動画にあわせればOK！

## Have a nice time!

現在、多くのセミナーやカンファレンスなどのイベントが、Webinar形式＆動画公開になっています。動画のインターフェースによっては、再生速度を指定できない場合も多いのですが、そんなときにこのワンライナーを使うことで、いろんなセッションを効率よく視聴することができ、さらに捗ってます！

[GAS][JS] 配列Aにあって配列Bにない値を取り出したい

配列Aには存在していて、配列Bに存在しないものを取り出したい。という事がありました。

ケースとしては **すでに記録されているデータがあって(existData)、新たにもらったデータ(newData) のうち、existData にあるものは無視して新しいものだけを取り出したい** というものでした。

教えてもらったコードが下記。きっと後でも使うのでメモ。

下記の例では `[4,5]` を取り出したい。

“`js:javascript/GAS
function pickupNewData(){
const newData = [3,4,5];
const existData = [1,2,3];

const filtered = newData.filter( newVal => {
const hasValue = existData.some( existVal => existVal === newVal );
return !hasValue;
});
console.log(filtered); // => [ 4, 5