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

【JavaScript】XDファイルをSwiftへと書き換えるプラグインを作ってみた

残業はしたくないけど、残業代だけは欲しい、TOSHです。
久しぶりのQiitaになりました。そして、Qiitaの記事としては、初めてのJavaSctiptです。動的型付け言語ってやばいですねぇ〜、魔言語ですねぇ〜

# TDLR
XDファイルから色の項目を抜き取ってをSwiftファイルのUIColorのExtensionへと書き換えるプラグインをJavaScriptで作りました。こちらのGitHubのリンクを参照してください。
https://github.com/tosh7/SwiftColorConverter

#初めに
先日デザイナーさんから、XDのファイルをもらいました。イメージはしたの画像のような、様々な色を定義した、ファイルになります。
ここから、全部の色を確認して、UIColorのExtensionを作成しても良いのですが、何せ、手作業は面倒なので、自動化する方法はないのかというところから、このプロジェクトが始まりました。Cloudflare関連リンク集(2020年版)

こんにちわ　クラウドフレア[@makoto_nis](https://twitter.com/makoto_nis)です。
先日、[IBM Cloud関連リンク集の記事](https://qiita.com/ayatokura/items/4a813bb1f1ad32aab799)を拝見して、クラウドフレアの関連リンク集をまとめてみました。

– Cloudflare公式サイト・リソース
– Cloudflare設定画面・API
– Cloudflare技術向け資料・ツール
– メディア

#Cloudflareオフィシャルウェブサイト

##Cloudflare公式サイト
https://www.cloudflare.com/ja-jp/
Cloudflareの製品情報(DDoS, WAF, CDN, DNS, Workers等）、ソリューション、問い合わせ、ダッシュボードのアカウント作成、最新のアップデートなど確認出来ます。
色々なマップライブラリでMapTilerを表示してみた




![leaflet.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/60444/209a8188-1818-ab1b-65da-2e31b737b7

元記事を表示

【Javascript】即時関数でグローバルオブジェクトを定義する。

メモとして残します。

レガシーではありますが、トランスパイル抜きにした場合で、IEにも対応するグローバルオブジェクトの定義をメモ。

#■やり方
“`javascript
(function (global) {
var HogeObject = (function () {
function HogeObject() {
//コンストラクタ
}

HogeObject.prototype.setHoge = function (value){
this.hoge = value
}
HogeObject.prototype.getHoge = function (){
return this.hoge
}

return HogeObject;
})();

global.HogeObject = HogeObject;
}(this));

“`
上記のコード読み込み後は任意の場所で下記のよ

CodePen – やっつけな方法で7セグ数字認識（ライブラリレス）

思いついたら作らざるをえなかった。。
行列で重みづけして、教師替わりの7セグ配列データとの比較をして、符号とのハミング距離が最短なものを結果として採用する。
解説もやっつけな件・・・

See the Pen
Guess A Digit<

【Rails】いいね機能の実装について

# 経緯
プログラミング歴３ケ月の初心者です。
個人的なアプリを作成した際、**非同期通信を用いたいいね機能**を導入したのですが、ググったものをそのまま使って実装してしまったので、頭の中を整理する（理解を深める）ために記事を投稿しようと思いました。

また本記事は、当機能の実装にあたり、Deviseというgemをインストールしている想定で書いていきます。
# 実装
今回は、Userモデル、Postsモデル、Likesモデルを使用します。
## マイグレーション
Likeモデルのマイグレーションを作成します。

“`ruby:db/migrate/○○_create_likes.rb
class CreateLikes < ActiveRecord::Migration[5.0] def change create_table :likes do |t| t.references :post, foreign_key: true t.references :user, foreign_key: true t.timestamps

JavaScriptでクッキーをとってくる関数

`{key:value, key:value, …}`という形でクッキーを返します。

“`js
(function getCookies() {
return !!document.cookie
? document.cookie
.split(‘; ‘)
.map(items => items.split(‘=’))
.map(([key , value]) => Object.assign({}, { [key]: value }))
.reduce((accum, pair) => Object.assign(accum, pair))
: {};
})();

“`

LINE Bot開発 簡単な会話ができるようになるまで(前編)

# 概要
LINE Botを開発する方法を記載しています。今回は簡単な会話botを作成します。BotはNode.jsで作ります。

# 必要なスキルと環境
・Node.js/Javascriptの基本的な知識
・Githubを使ったことがある

#開発の流れ
+ LINE DevelopersでLINEアカウント(以下チャンネル)を作成
+ Bot本体のプログラムを開発し、デプロイ
+ Bot本体のプログラムをカスタマイズしてデプロイするという作業を繰り返してBotを拡張していく。

#開発
まずは、送信したメッセージをおうむ返ししてくれるBotを作ります。
##1.Channelを作成する
LINE Bot用のチャンネル（LINEアカウント)を作成します。無料で作成できます。
[作成方法はこちらを参考にしてください]
(https://developers.line.biz/ja/docs/messaging-api/getting-started/#%E3%83%81%E3%83%A3%E3%83%8D%E3%83%AB%E3%81%AE%E4%BD%9C

【Rails】ajaxでチャットを投稿したい（テキスト複数行、画像複数枚）

# はじめに
ポートフォリオとして作っていたグループチャットアプリで、画像を複数投稿できるようにしました。
その投稿をajaxで表示する方法を本記事で書いていきます！

投稿機能はできていることを前提にしてますので、できていない方は
前回記事：[【Rails】画像を複数投稿したい](https://qiita.com/miyyuk/items/cacdc5abb009d3307c5d)
を見ていただければと思います！

#目指すゴール
目指すの動作は前回同様です！これをAjaxでいきます。
#前提
1. 投稿機能は実装済み（テキスト複数行&画像複数枚が投稿できる）
2. jQueryを導入の上、turbolinksは今回使用しないので、コメントアウトしている。
3. テーブル同士の関係は以下の通り。(実際

Kintoneで全レコードを空更新する

自動計算のフィールドなどを後から追加した場合に自動で計算フィールドが埋まらないので全件更新したいときに使います。
一覧画面のヘッダーにボタンを配置して任意のタイミングでできるようにしたかったのでまとめました。
ボタンをクリックして全件取得して何かしたい、と思った時にはこちらを改造すればいいと思います。
公式にあるサンプルプログラムを組み合わせていきます。

## サンプルプログラム
– [第2回 レコード一覧画面にボタンを置いてみよう！](https://developer.cybozu.io/hc/ja/articles/201767270)
– [全レコードの取得方法](https://developer.cybozu.io/hc/ja/articles/203702800-%E5%85%A8%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E5%8F%96%E5%BE%97%E6%96%B9%E6%B3%95)
– [後で追加した計算フィールドに一括で値を反映する方法](https://developer.cybozu.io/hc/ja/

【javascript】ページのスクロールで画像を入れ替えたい。

ポートフォリオサイトの制作中に使った画像の入れ替えについて
ざっくりまとめたのでご紹介。
( 今回はhamlではなくhtmlそのまま使用しています)
# やりたい事
以下のように、スクロール用によって画像をじんわり入れ替えたい。
[](https://gyazo.com/ac0dc2743f39474c48e42ebb483700aa)

# 1. 使う画像を準備する
今回は二枚の画像を入れ替えます。
クラスとかwidthはなんでも構いません。

“`html:sample.html
~ 省略 ~

⬅️写真二枚いれる箱

~ 省略

Cognos Analytics カスタムビジュアライゼーション 基本の操作

#カスタムビジュアライゼーション 基本の操作
カスタムビジュアライゼーションでの、Cognosが提供しているサンプルを用いての基本の操作を学びます。
今回は、サンプルのダウンロードから、サンプルの動作確認、サンプルをパッケージ化してのCognos Analyticsへのアップロード方法を学びます。

#サンプルのダウンロード
以下のURLにアクセスします。
https://github.com/IBM/ca_customvis

「code-samples/11.1.x」を選択し「Clone or download」でZIPダウンロードします。

ダウンロードしたzipファイルを任意のディレクトリに解凍します。
javascript超入門(2020/06/16)

###主な演算子

| 演算子 | 意味 |
|:—-|———:|
|a + b| a+b|
|a – b|a-b|
|a * b|a×b|
|a / b|a÷b|
|a % b|a÷bの余り|
|a ** b|aのb乗|
|a++ または ++a|a+1してaに代入|
|a– または –a|a-1してaに代入|
|a += b|a+bしてaに代入|
|a -= b|a-bしてaに代入|
|a *= b|a×bしてaに代入|
|a /= b|a÷bしてaに代入|
|a %= b|a÷bの余りをaに代入|

###配列

配列は複数のデータを１つにまとめて管理するのに使われる。

###配列の作成

“`JavaScript:sample.js
let 変数名　＝　[データ0,データ1,データ2,…,データX];
“`

###配列の読み取り
“`JavaScript:sample.js
変数名[インデックス番号];
“`

配列に登録されているでーたには0,1,2,…と番号が付く。この番号のことをイン

P5.js 日本語リファレンス(updatePixels)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の updatePixels関数を説明します。

## updatePixels()

### 説明文

表示ウィンドウを pixels配列のデータで更新します。 loadPixels() と組み合わせて使用​​します。配列からピクセルを読み取るだけの場合、updatePixels() を呼び出す必要はありません。更新は変更を適用するためにのみ必要です。pixels配列が操作されたとき、または set() が呼び出されたときは常に updatePixels() を呼び出す必要があります。

### 構文

updatePixels([x], [y], [w], [h])

### パラメタ

– x
Number：更新する領域の左上隅のx座標(オプション)

– y
Number：更新する領域の左上隅のy座標(オプション)

– w
Number：更新する領域の幅(オプション)

– h
Number：更新する領域の高さ(

P5.js 日本語リファレンス(set)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の set関数を説明します。

## set()

### 説明文

任意のピクセルの色を変更するか、画像をキャンバスに直接書き込みます。

xパラメータとyパラメータは変更するピクセル座標を指定し、cパラメータはカラー値を指定します。これは p5.Color オブジェクトまたは [R, G, B, A] 配列です。単一のグレースケール値にすることもできます。画像を設定するとき xおよびyパラメータは現在のimageMode() に関係なく, 画像の左上隅の座標を定義します。

set() を使用した後、変更を表示するには updatePixels() を呼び出す必要があります。これは、すべてのピクセルが設定された後に呼び出す必要があり .get() を呼び出す前、または画像を描画する前に呼び出す必要があります。

set(x, y) を使用して単一のピクセルの色を設定することは簡単ですが、データを直接pixels配列に入

P5.js 日本語リファレンス(loadPixels)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の loadPixels関数を説明します。

## loadPixels()

### 説明文

表示ウィンドウのピクセルデータをpixels配列に読み込みます。この関数は pixels配列の読み取りまたは書き込みの前に必ず呼び出す必要があります。 pixels配列が操作されたとき、または set() が呼び出されたときは常に loadPixels() を呼び出す必要があります。

### 構文

loadPixels()

### 例1

“`javascript
let img;
function preload(){
img = loadImage(‘assets/mountain.jpg’);
}

function setup(){
createCanvas(300, 200);

image(img, 0, 0, width, height);

let d = pixelDensit

P5.js 日本語リファレンス(get)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の get関数を説明します。

## get()

### 説明文

キャンバスからピクセルの領域または単一のピクセルを取得します。

任意のピクセルの [R, G, B, A] 値の配列を返すか、画像の領域を取得します。パラメータが指定されていない場合は画像全体が返されます。 1つのピクセルの値を取得するには、xパラメータとyパラメータを使用します。追加のwおよびhパラメータを指定して画像の領域を取得します。画像を取得するとき、xおよびyパラメータは現在の imageMode() に関係なく、画像の左上隅の座標を定義します。

get(x, y)を使用して単一のピクセルの色を取得することは簡単ですが、pixels配列から直接データを取得するほど高速ではありません。画素密度dのpixels配列を使用する get(x, y) と同等のステートメントは次のとおりです。

“`javascript
let x, y, d; /

P5.js 日本語リファレンス(filter)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の filter関数を説明します。

## filter()

### 説明文

フィルターをキャンバスに適用します。

プリセットオプションは次のとおりです。

– THRESHOLD
levelパラメータで定義されたしきい値を超えるか下回るかに応じて、画像を白黒ピクセルに変換します。パラメータは0.0(黒)から1.0(白)の間でなければなりません。レベルを指定しない場合0.5が使用されます。

– GRAY
画像内の色を同等のグレースケールに変換します。パラメータは使用されません。

– OPAQUE
アルファチャネルを完全に不透明に設定します。パラメータは使用されません。

– INVERT
各ピクセルをその逆の値に設定します。パラメータは使用されません。

– POSTERIZE
画像の各チャネルをパラメータとして指定された色の数に制限します。パラメータは2〜255の値に設定できますが, 結果は低い範囲で最も顕著

P5.js 日本語リファレンス(copy)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の copy関数を説明します。

## copy()

### 説明文

キャンバスの領域の一部をキャンバスの別の領域にコピーします。または、srcImage パラメータで指定したコピー元画像からキャンバスにコピーします。コピー元領域とコピー先領域が同じサイズでない場合、指定されたコピー先領域に合わせてコピー元ピクセルのサイズが自動的に変更されます。

### 構文

copy(srcImage, sx, sy, sw, sh, dx, dy, dw, dh)

copy(sx, sy, sw, sh, dx, dy, dw, dh)

### パラメタ

– srcImage
p5.Image|p5.Element：コピー元画像

– sx
Number：コピー元画像の左上隅のX座標

– sy
Number：コピー元画像の左上隅のY座標

– sw
Number：コピー元画像の幅

– sh
Number：コピー元画像

現代のフロントエンド開発シリーズ（4）- Event Loop

イベントループとは何ですか？
`JavaScript`はスレッド上で実行され、一度に1つの処理しか実行できません。
他のプログラミング言語と違って、スレッドを自由に開くことができません。（WebWorkerやnode.jsのthread workerを除く）

これはJavaScriptの歴史とその設計目的に関係しており、最初JavaScriptはブラウザ上で動作し、ユーザーにイントラックションするスクリプト言語でした

JavaScriptはDOMを操作する必要があり、ブラウザでDOMを正しく描画する必要があるためです。

仮に、2つのスレッドがDOMを同時に変更するとどうなるのかを考えてみましょう。
デッドロックの問題をどうするか？複数のスレッドが存在する場合、異なるスレッドが同時に同じ変数にアクセスする状況を考慮する必要があります。状況がさらに複雑になります

`iOS`または`Android`などモバイルアプリケーション開発の場合、コンパイラーは必ずメインスレッドで描画アクションを実行する必要があることがわかります。そうでない場合、予期しない結果が生まれます

いくつかの観点か