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

Slackとgoogleカレンダーで勤怠記録をしよう

# はじめに
新型コロナウイルスの影響で自粛期間が長らく続いていましたが，6月あたりから感染対策を実施した上で各大学，企業でのが行われるようになりましたね．

僕の大学では研究室の入退室時間を管理することが義務付けられました．これは感染者が出た場合に，感染経路及び感染した可能性のある人を特定するためだと思われます．
他の大学や企業でもこのような感染対策を実施しているのではないでしょうか．

特に管理法についての指定はなかったので，googleカレンダーに記入することで入退室時間を記録することになったのですが，研究室全員で使用するアプリはできる限り少ない方が効率的であるため，指導教員の先生からSlackだけで入退室時間を管理できるようにうまいことやってくれないかと依頼されました．

そこでSlackに勤怠管理チャンネルを作り，「おはよう」や，「さようなら」と呟けばgoogleカレンダーに予定が追加されるプログラムを作成しました．

初投稿であることと，GAS経験が少ないことをご容赦ください．

ユーザーが行う操作のイメージ
![slack.PNG](https://qiita-im

【Rails】Google Mapに複数マーカーを表示し、クリックしたら吹き出しを出す方法

# 目標


# 開発環境

・Ruby: 2.5.7
・Rails: 5.2.4
・Vagrant: 2.2.7
・VirtualBox: 6.1
・OS: macOS Catalina

# 前提

下記実装済み。

・[Slim導入](https://qiita.com/matsubishi5/items/b639ffddecc626856039)
・[ログイン機能実装](https://qiita.com/matsubishi5/items/5bd8fdd45af955cf137d)
・[Google Map表示](https://qiita.com/matsubishi5/items/196fa1941da2152b6d5d)
・[Gocoding APIで緯度経度を算出](https://qiita.

JScriptからダイアログを出す（Powershell、Windows.Forms利用）

## 例としてログインダイアログ

“`login.js
var echo = function (str) {
WScript.Echo(str);
// console.log(str)
};

var quit = function () {
WScript.Quit();
};

var CredentialDialog = function () {
var code = ‘\
Add-Type -AssemblyName System.Windows.Forms\r\n\
Add-Type -AssemblyName System\r\n\
\r\n\
$form = New-Object Windows.Forms.Form\r\n\
$form.Size = New-Object Drawing.

jbuilderの扱い方

#前提条件
以下のブログを読んでから本記事をお読みください
[非同期通信の手始め](https://qiita.com/Nyanmaru-12/items/70ab49e7a4000085d72b)
[respond_toについて](https://qiita.com/Nyanmaru-12/items/7bc3daf59963c269cf36)

#jbuilder
結論、jbuilderを用いるとrender json 〇〇をしなくていいです。
jbuilderは、viewと同じように該当するアクションと同じ名前にする必要があります。
今回はコメント機能の非同期通信を実装するので
commentのcreateアクションに対応するjbuilderのファイルを作成します。
作成する場所はviews/comments/create.json.jbuilderになります。

“`javascript
json.text @comment.text
json.user_id @comment.user.id
json.user_name @comment.user.nic

プログラミング言語毎のコーディング規約チェッカー使用感 (C#(Unity) JavaScript(CocosCreator), PHP(FuelPHP))

#はじめに

コーディング規約を自動的にチェックしてくれるコーディング規約チェッカーは、
複数人で開発する際の可読性向上や各人の書き方の癖を平準化できる便利なものです。

コードレビュー等で生産性のない指摘をし合わないよう、
チェックはシステムにやってもらうというのはとても合理的。

一方で、規約に縛られた書き方を窮屈に感じたりすることもあると思います。
そこで、各開発環境における規約チェッカーを使ってみた所感を書き残します。

#C# (Visual Studio)

規約チェッカーであるStyleCopは、
・プロジェクトにNuGetパッケージとしてインストール
・Visual Studioの拡張機能としてインストール

という2種類の方法があります。
前者が適用できるならそちらのほうがベターなようです。

・プロジェクトにNuGetパッケージとしてインストール

NuGetでインストールするとプロジェクト内に管理される形となり、
自動でチェックが走るため扱いやすいです。

また、NuGetではStyleCopの後継であるStyleCop.Analyzersが使用できるため、
そ

Web初心者がobnizとWeb VRで遊んでみようと試みた話…。

#概要
　javascriptで制御できるマイコンボード「**obniz**」。

javascriptで書けるなら、A-Frameと連携して何かできそう！と思い試みた話です。

#試してみたこと

「A-Frameで表現したボタンを押すと、obnizのOLEDにメッセージが表示される」ということに試みました。
結果としては、obnizにつながらないような状況です。

　コードを見てコメントいただけると嬉しいです。

#できたこと
　A-Frameでボタンのようなものを作れました。（押したら戻ってこない）

あれから少し進化。押したら２度と使えんくなるタイプのボタンができた(笑)#protoout pic.twitter.com/Lur9AcA

初学者が躓くreturnの概念

#プログラミング初心者が躓くreturn(返り値)

なんとか理解することができたので
忘れないようにアウトプットも兼ねて投稿しておく

returnの意味は大きく２つ

・処理を終わらせる

・値を返す

値を返すという概念はなかなか理解しづらいですが
私は関数で処理して得た値を使いまわしたい時はretrunで返り値を持たせる！と覚えている

試しに２パターン関数を書いてみる

“`php:returnなし

$num = 10;
function a($i) {
$i * $i;
}

echo a($num);

//結果は出力なし

“`

“`php:returnあり
$num = 10;
function a($i) {
return $i * $i;
}

echo a($num);

//100

“`

結果returnをつけてやらないと、全く使いまわすことのできない関数となってしまう

“`php:

$num = 10;
function a($i) {
echo $i * $i;
}

a($num);

//100

[JavaScript] window.を省略してはいけない場面に注意しよう

## windowオブジェクト

ブラウザでJavaScriptを実行する場合、`window`がグローバルオブジェクトとして存在します。

みなさんご存知のとおり、windowオブジェクトのプロパティにアクセスする際の `window.` は省略できます。

“`javascript
// OK
window.alert(‘Hello world’)
// 省略してもOK
alert(‘Hello world’)
“`

しかし、省略してはいけない場面があります。

## 省略してはいけない場面

省略してはいけない場面、それはプロパティの存在チェック時です。

一部ブラウザにしか実装されていない実験的な機能を使う場面や、古いブラウザに対応させるために、windowオブジェクトにその実装が存在するかチェックするコードを書くことがあると思います。

このとき、`window.`を省略してしまうと思わぬエラーに遭遇します。

### 省略時に発生するエラー

windowオブジェクトにチェック対象のプロパティが存在しない場合、`ReferenceError`となってしまいます。

こ

【A-Frame】WebVRを自分のサイトに組み込んでみる

A-Frameを使用してWebVRを自分のサイトに組み込んでみました。短いコードでWebVRが作成できるのがすごいです。

実際の画面がこちらです。

#公開サイト
https://3dblock.jp

以下の「ブロックを作成」メニューから飛べます。

#今回追加した機能
– 視点を合わせてクリックをするとブロックを配置
– 置いたブロックをクリックするとランダムで色変更
– 十字キーで左右上下の移動
– テキスト表示(英語)

#今回追加しなかった機能
– 今後は置いたブロックをクリックしたら色を指定

Error: An AuthUI instance already exists for the key “[DEFAULT]”の対処法

**SPA**で**Firebase AuthUI**を扱う際に

`Error: An AuthUI instance already exists for the key “[DEFAULT]”`

と表示されることがある。問題のコードは↓である。

“`typescript:
const ui = new firebaseui.auth.AuthUI(firebase.auth())
ui.start(‘#firebaseui-auth-container’, uiConfig)
“`

すでにAuthUIが存在しているにもかかわらず、`ui.delete()`を呼ばず、再び`new`してしまっているのが問題のようだ。
かんたんな対処としては、↑のコードを

“`typescript
const ui = firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth())
ui.start(‘#firebaseui-auth-container’, uiConfig)
“`

PA-API v5でAmazonの商品情報を取得する

## PA-APIの利用
PA-API を使ってアマゾン商品情報をとってみよう。そこからアフィリエイトなどで収益化ができたら良いね。

　PA-APIはアマゾンで一ヶ月以内に売上が発生していないと使えません。なので、アマゾンの商品リンク作成ツールや、ブログのアフィリエイトツールなどで売上を得られるように頑張ろう。ここが一番難易度が高い気がする。

　アフィリエイトで売上が発生したら次に、ISBNやASINが必要となる。ただ、ASINを具体的にどのように取るかの選択が少ないので、アマゾンのサイトをクロールしている。

Amazonの検索結果からasinをスクレイピング
https://qiita.com/99nyorituryo/items/c5d53a3ca8a4967b5927

## ASINから商品情報のJSONを取得する

　ここでは、ISBNやASINという本の情報から、アマゾンの表紙画像や、タイトル著者名、出版社、価格、本の種類などの情報を取得してサイトとして出力する方法を書く。
　PAAPIでは、様々な言語用にツールが配布されているが、私はnode.jsが一番慣れているの

Kinx ライブラリ – Getopt

# Kinx ライブラリ – Getopt

## はじめに

**「見た目は JavaScript、頭脳(中身)は Ruby、（安定感は AC/DC）」** でお届けしているスクリプト言語 [Kinx](https://github.com/Kray-G/kinx)。言語はライブラリが命。ということでライブラリの使い方編。

今回は Getopt です。SpecTest で内部的に実装して使っていたのですが、標準ライブラリのほうに移動させました。

* 参考
* 最初の動機 … [スクリプト言語 KINX（ご紹介）](https://qiita.com/Kray-G/items/ca08b6fb40d15dd0ec76)
* 個別記事へのリンクは全てここに集約してあります。
* リポジトリ … [https://github.com/Kray-G/kinx](https://github.com/Kray-G/kinx)
* Pull Request 等お待ちしております。

ロングオプションにも対応しました(~~まだリリー

ブックマーク.htmlを初心者でもJavaScriptで整理整頓できるのか

iPhone3G-5sまでアップル漬け。
それ以降Android所有。
Googleを信用せずマイクロソフトを信じてる人。

古いiPhoneのバックアップデータ（10年前～4年くらい前）をiBackupbotで読み取り、SafariブックマークをHTMLに書き出す。
iPhoneを定期的に初期化し清潔を保っていたため毎度UUIDが変わるためバックアップもちらかっていた。
およそ20個ほどのUUIDから20個のHTMLを作成。この時点で奇人。

PC上のとっちらかってるエクスポートブックマーク.htmlをEverythingで30個ほど見つける。

Edge, Firefox, Chrome, Ironの最新ブックマークをHTMLに書き出す。

type *.html > merge.txt

で適当に連結。12万行になる。

テキストエディタで掃除、整理整頓、ソート、フォルダ削除。簡易的な重複削除。1万行。

JavascriptでURLが全く同じであれば重複削除。5000行まで圧縮。

10年間で5000ブックマーク。暇人すぎる。

閑話休題。

目標1は
・フォルダ構造をぶっ壊し

【お試し】クイック スタート:Visual Studio Code を使用して Azure で関数を作成する（JavaScript）

# 概要

[クイック スタート:Visual Studio Code を使用して Azure で関数を作成する](https://docs.microsoft.com/ja-jp/azure/azure-functions/functions-create-first-function-vs-code?pivots=programming-language-javascript)の内容を参考に、AzureFunctionsを触ってみます。

# 環境情報

**2020/6/3時点**

– MacOS 10.15.5
– Node.js v12.18.0 （最新は14.4.0でしたがLTSがおすすめらしいのでLTSのバージョンにしました。）
–

# 事前準備

– [Microsoft Azureアカウント（無料）](https://azure.microsoft.com/ja-jp/free/?ref=microsoft.com&utm_source=microsoft.com&utm_medium=docs&utm_campaign=visualstudio)を作成しておく

Javascriptで値が数値かどうかチェック→スペースかどうかも

[Wano株式会社](https://wano.co.jp/)で社内のもろもろを担当しているakibinです。

ヒゲ男ばかり聴いて、少しでも若返ったつもりでいる今日このごろです。でも好きだなーこのちょっと縦ノリっぽい楽曲と声。

#今回やってみたこと

Javascriptで値が数値かどうかチェックするのに[こちらの記事](https://uxmilk.jp/46961)を参照させてもらいました！（分かりやすかったです！!）

がしかし！

スペースを数字と認識してしまうので、スペースかどうかもチェックするようにしてみました。

#こんな感じ
正規表現の\S（空白文字以外の文字）と、！で論理値を反転させてif文で判定。当てはまった(true)場合はtry…catch文を使用して終了する。（JSにはexitが無いので）
※htmlは

JavaScriptでhtmlのTableをいじる

# 初めに
今回はjQueryをメインでDOM操作しながらTableをあれこれする方法を展開します。
## コード
### セルを押下できるようにする
セルを押下するとイベントが発火して処理される仕組み(今回はアラート表示)
まずはhtml側にTableをセットする(今回はタイトルなしです)

“`html:test.html

元記事を表示

難読化されたJavaScriptを解読するツールを作った

**Obfuscator.io**というJavaScriptコードを難読化できるツールがあります。

例えば以下のような感じ

Before

After

正直難読化されてても慣れればコードを読むのはそんなに苦じゃないのですが、自動ですべて解読するツールを作ったらおもしろそうだと思ってやってみました。

#難読化されたJavaScriptを半自動で解読するツール

Vue.js(サイト側)とCloud Functions(API側)で作ってみました。

公開URL: https://sigr.io/deobfuscator/

残念ながら完全自動化までは至りませんでしたが、最初にター

元記事を表示

google.script.run が Promise を返すようにする

#期待を返せ
google.script.run は withSuccessHandler や withFailureHandler でコールバックを登録する仕様となっており、 Promise を返してくれません。
async / await ですっきり書きたいですよね。

“`Javascript:理想
(async ()=> {
const data1 = await google.script.run.myFunction();
const data2 = await google.script.run.myFunction2(data1);
console.log(data1);
console.log(data2);
})();
“`

“`Javascript:現実
google.script.run
.withSuccessHandler( data1 => {
google.script.run
.withSuccessHandler( data2 => {
console.log(data1);
console.log(d

元記事を表示

webpack3からwebpack4へバージョンアップ

保守できていなかったwebpackのバージョンをあげた際の記録です。
メモレベルで恐縮ですが、よかったら参考にしてください。

## モチベーション

* 最新のTypeScriptを導入したい
* ビルドを速くしたい

## 移行手順
基本的にはこちらのマイグレーションガイド通りです。
https://webpack.js.org/migrate/4/

* package.jsonの修正
* modeの追加
* pluginの設定見直し
* loaderのバージョンアップ

## 移行手順詳細
### package.jsonの修正
https://github.com/webpack/webpack/releases
こちらを参考にwebpackの箇所のバージョンを修正しました。

“`package.json
“webpack”: “^4.42.0”
“`

“`bash
npm install
“`

yarnの方は`yarn install`してください。

### modeの追加
`production`と`development`の二つがありwebpack.c

元記事を表示

webpack1からwebpack3へバージョンアップ

保守できていなかったwebpackのバージョンをあげた際の記録です。
メモレベルで恐縮ですが、よかったら参考にしてください。

## モチベーション
* TypeScriptを導入したい(1だとts-loaderが対応していない)
* ブラウザでのjs実行を速くしたい

## なぜ2ではなく、3なの？
https://webpack.js.org/migrate/3/
公式で
> Note that there were far fewer changes between 2 and 3, so that migration shouldn’t be too bad. If you are running into issues, please see the changelog for details.

となっていて、移行ガイドも
`To v2 or v3 from v1`
となっているから。

また、
https://medium.com/webpack/webpack-3-official-release-15fd2dd8f07b

> Migrating from webpa

元記事を表示

OTHERカテゴリの最新記事

• 
  • 2024.09.19

  JavaScript関連のことを調べてみた

• 
  • 2024.09.19

  JAVA関連のことを調べてみた

• 
  • 2024.09.19

  iOS関連のことを調べてみた

• 
  • 2024.09.19

  Rails関連のことを調べてみた

• 
  • 2024.09.19

  Lambda関連のことを調べてみた

• 
  • 2024.09.19

  Python関連のことを調べてみた

Test1	Test2	Test3
Test4