f@ctor

JavaScript関連のことを調べてみた2019年12月15日

JavaScript関連のことを調べてみた2019年12月15日
目次

VisualStudioCodeを使い始めて変わったこと

#VisualStudioCodeを使い始めて変わったことを書いていきたいと思います。
##実は今回書いたのはVisualStudioCodeが出たての頃からのヘビーユーザです。
戸倉さん（@ayatokura）ごめんなさい。
自分はVisualStudioCodeが出たときからのヘビーユーザです。
なぜかと言うとEclipseが◯んこだったから。
1ヶ月に一回再インストールに飽き飽きしていた頃に出てきたのがAtomとVisualStudioCodeでした。
Atomはプラグインが少なかったのと重くて使いようになりませんでした。
そこで選んだのがVisualStudioCodeでした。
一番の特徴はTerminalが入っていてコマンドスクリプトも使えるんですよ。
実はLinux（Ubuntu・CentOS・RHESなどで使用可能）やMac・Windowsでも喜んでVisualStudioCodeを使っちゃうユーザでした。

依然ある職場でLinuxVimerにかなり妬まれました。
Vimが嫌になっておりしこたま困りました。
それはVisualStudi

元記事を表示

【NEM】アドレス・HASH・ブロック高を自動判別する検索ボックスを作る

[nemアドベントカレンダー](https://qiita.com/m1z0/items/c401a63ebc879a38cae4)の15日目の記事です。

## 概要
今回は、ブロックチェーンのエクスプローラー系サイトによくある検索ボックスのNEM版を作ってみます。
取得できるデータは下記の通り

– ウォレットアドレスからウォレット情報を取得する
– トランザクションハッシュからトランザクションの内容を取得する
– ブロック高からブロックの情報を取得する

あくまで検索結果を取得する機能を作成するのが目的なので、取ってきたデータの加工やデザインについては触れません。

## 完成形
まず、完成形から。これから先の手順で詰まったら参考にしてください。

“`html:sample.html





元記事を表示

Javascriptくんのエラーコレクション

lets go!

元記事を表示

【VSCode】自作の拡張機能でログを見やすくしたい

#はじめに
仕事中に少し困ったことがあったので何とかできないかなーと思い今回の記事を書きました。
### 背景
ある案件で調査依頼が来た際にアクセスログを追う機会がありました。
サーバーが複数あったのでアクセスログもそれだけ存在していました。。。。

その時は急ぎだったので複数のファイルからログを取り出して手作業で時系列順に並べて調査をしました。
もう二度とやりたくないので何とか楽にします。
かといって、大掛かりなことはやりたくなく、手軽に何とかできそうにないかなーと探してたところVSCodeの拡張機能が簡単に自作できそうなのでこれで何とかしてみます。

#やりたいこと
ゴールを決めます

– 時系列がごちゃごちゃでも順番に並べる
– 少しでもログを見やすく
– プライベートでパッケージ化

この辺をとりあえず実現させてみます
ちなみにtypescriptではなく、javascriptで作ります

#実際に作る
### ログのフォーマット
“` demo.log
123.456.789.10 test.com – [23/Jun/2019:17:17:24 +0900] 0 “GET

元記事を表示

Nuxtで現在地情報を取得して利用する

**ごめん、アドベントカレンダーはかけません。いま、HackDayにいます。この国をちょっと便利にするソリューションを作っています。……本当は、あの頃が恋しいけれど、でも今はもう少しだけ、知らないふりをします。私の作るこのアイデアも、きっといつか誰かの青春を乗せるから。**

# はじめに

と、言うわけで、現在、[HackDay2019](https://hackday.jp)の会場でこの記事を執筆しています。
限界開発ですでに心が折れそうなのですが、本日はYumemiアドベントカレンダーの自分の担当日なので頑張って書いています。

今、目の前のチームメンバーが発狂しました。

さて、今回のお題ですが。フレッシュな内容ということで、HackDayでちょうど詰まった内容を投稿します。

## やりたかったこと

Webページを使用しているユーザーの現在位置を取得して、APIに渡したかった。

## やったこと

[GeoLoacationAPI](https://developer.mozilla.org/ja/docs/Web/API/Geolocation/Using_geoloc

元記事を表示

GoogleAppsScript(GAS)でスプレッドシートの値を取得した時にハマったこと

作成していたプログラムはJavaScriptでスプレッドシートを読み込み
データの整理をして画面に描画するプログラム。

以下の様な図のイメージ
![picture_pc_1c7dfa9f8a76eb172afb67d62b89c0a0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90415/b1b539a5-ee31-cc3e-8ba9-0740ba9bde7c.png)

最終的に受け取るJSONPのデータは以下

“`JSON
apicallback(
[
[
[
“名前”,
“学園”,
“イメージカラー”,
“ブランド”
],
[
“星宮いちご”,

元記事を表示

JSの組み込みオブジェクトを復習する

# 組み込みオブジェクト（built-in Objects）とは
JavaScriptには、**組み込みで用意されているオブジェクト**がある。例えば**Arrayオブジェクト**や**Promiseオブジェクト**を`new Array`や`new Promise`の形で使ったり見たりしたことが一度ではあるのではないかと思う。これらも組み込みオブジェクトの中の一つであり、先に書いたように、基本的に`new`演算子を用いてインタンスを生成して使う。(クラスみたいなものだと思ってます。)

## 組み込みオブジェクトの抜粋
– String ~文字列の操作をする~
– Number ~数値の操作をする~
– Symbol ~シンボルを作成する~
– Math ~数学的演算をする~
– Array ~配列を操作する~
– Map ~連想配列を操作する~
– Set ~集合の操作をする~
– Date ~日付を操作する~
– Object ~全オブジェクトの雛形~
– Global ~jsの便利機能を提供する~
– Promise ~非同期処理をサポートする~

参考:[Standard b

元記事を表示

Slackで匿名で投稿できるチャンネルを作ろうとしたら少しだけ苦労した話

# はじめに
研究室でSlackを導入してから2年くらい経ちました。
話題でチャンネルを分けれるので非常に便利です。

雑談用のチャンネルもあるのですが、特定の人ばかり話していて盛り上がりに欠けます。
「匿名ならみんな発言してくれるかも」と思ったのがきっかけで、匿名用のチャンネルを作りました。

Googleで検索したら3年前のQiitaの以下の記事がヒットしました。
[「超簡単にSlackで匿名の意見を投稿できるようにする」 @shibukk](https://qiita.com/shibukk/items/8675e7684dba0476906c)

**「超簡単」**とありますが、記事通りにやっても上手くいかず、少しだけ苦労しました。
BotKitのバージョンが上がって中身が変わっていたのが原因でした。

修正した部分を自分の備忘録としてまとめておきます。

実行環境はUbuntu16.04。
node.js, javascriptが動けばどこでも大丈夫なはずです。

# SlackのBotの取得
ここは本家と一緒です。
[「Botを追加する」](https://qiita.c

元記事を表示

HTMLでGoogleマップを挿入する（２）

OpenStreetMapを表示し、地図上をクリックすると、その場所にマーカが設置されるようなプログラム。 また、その際に、マーカーに”1″, “2”, “3”とタイトルが設定される。
html

“`HTML



4




  • lat:
  • lng:


元記事を表示

「Google Maps API」改め「Google Maps Platform」を使った話

# はじめに
今更ながら最近、Google Maps Platform（旧Google Maps API）を使う機会があったので、備忘録がてらに書いていきたいと思います。

# Google Maps Platformとは
Google Maps Platformとは、Googleが提供するWeb地図サービスです。
Google Maps Platformを使うことで、Google Mapで利用できる様々な機能をウェブサイトやアプリに埋め込むことができます。

# 実際に使ってみた
今回はGoogleMap上にアイコンがあってクリックすると画像と説明文が表示されるお城の紹介マップを作っていきたいと思います。

## 必要な物
- クレジットカード登録しているGoogleアカウント
- APIキー
- HTML
- JavaScript

上記があれば基本のカスタマイズはできますが今回は下記も使います。

- Json　→　お城情報をJsonに格納したいので用意します。
- CSS → 無くても大丈夫ですが、見た目を良くするために用意します。
- アイコンに使う画像 → オリジナルアイコ

元記事を表示

jQueryでフッターをページの長さに合わせてページ下部に固定する方法

##1.はじめに
本記事は**フッターをページ長さに合わせてページ下部に固定する**方法について自分の勉強記録も兼ねて執筆します。

ちなみに**footerFixed.js**というライブラリを使えば簡単にできるみたいですが（笑）、本記事ではそれは使わずに実装していきます。

**footerFixed.js**の使い方は[こちら](https://www.webantena.net/javascriptjquery/fixed-footer-with-jquery/)

##2.目的
フッターをページ長さに合わせてページ下部に固定する

##3.コード
簡単ですが、下がコード例です。
今回は簡略下のためcss、JavaScriptをhtmlファイル内に書き込んでいます。（実際は別ファイルで管理する方が良いと思います）

```html:sample.html




Web Share API を使ったページ共有を試してみた

はじめまして! 2019年10月フロントエンドエンジニアとして入社した上垣です。
入社してから今まで、 [Toreta now](https://www.toretanow.app/)のブラウザ版開発に携わっています。

toC サービスを開発していく中でよくある要件として、SNSへのページ共有が挙げられると思います。ただ、実装したことがある方ならおわかりと思いますが、シェアさせたいサービスごとに script を埋め込むのは結構大変です。

##### 代表的なサービスの共有方法
- Twitter
- [Twitter Publish](https://publish.twitter.com/#)
- Facebook
- [シェアボタン - ソーシャルプラグイン - ドキュメンテーション - Facebook for Developers](https://developers.facebook.com/docs/plugins/share-button?locale=ja_JP)
- LINE
- [LINE Social Plugins](https://soc

元記事を表示

Canvasで作るお絵かきアプリ

この記事は[tomowarkar ひとりAdvent Calendar 2019](https://qiita.com/advent-calendar/2019/tomowarkar)の14日目の記事です。

# はじめに
昔に描いたコードを持ってきたので、コードが少し古く、初心者感丸出しですがご容赦を。

スマートフォンに対応させたのがポイントです。

# デモサイト
[デモサイト](https://tomowarkar.github.io/blog_content/animation/make_circle/mobile.html)
# コード全文
### index.html
- 描画エリア設定
- カラーパッド設定
- 削除ボタン設定

```html





元記事を表示

Svelte3 横並びのメニューを作る！

Svelteでこんな感じのよくある横並びメニューを作りたい！
そして画面からはみ出た分は横スクロールもできるようにしたい！
と思ったのでその際の実装をメモしておきます。

![スクリーンショット 2019-12-14 10.43.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206915/7a5de3f5-b753-2bd1-a22d-fe1b0deee23e.png "スクリーンショット 2019-12-14 10.43.41.png")

## リストタグを横並びにする＆スクロールもできるようにする
まずは横並びのメニューを作成＆横スクロール可能にする実装です。

スクロールバーも非表示にしています
~~Chrome/Safari以外のブラウザなどシラヌ~~

ちなみに`overflow-x: hidden;`を指定するとスクロールルバーは消えるけど横スクロールもできなくなるぞっ！！！！

こうすると

```html

    {#each m

元記事を表示

ChromeExtentionの開発で役に立った知識

　ChromeExtensionって、ネット上の情報が少ない気がします。そんな訳で、Javascript＆ChromeExtention歴２ヶ月ほどですが役に立った知識を羅列していこうと思います。間違いがあったら教えて下さい。そんなこと知ってるわ！みたいなことがあっても許してください。前提条件として下記のことが挙げられます。
・ECMAScript6環境です。
・JavaScriptの知識もあれば、Extension固有の知識もあります・
・[chrome.storage](https://developer.chrome.com/extensions/storage)を使ったデータベース風なclassを作っていて、そこで躓きまくったので、classに関する話がほどんどです。

##Background.jsではexport/importが使えない
　Background.jsは裏に見えないウインドウを展開して、その中でJavaScriptの処理を行うらしいので、基本的には普通のブラウザと同じようにプログラミングして問題ありません。故にasync/awaitとかも使えるんですが、exp

元記事を表示

JavaScriptで1を31ビット左シフトするとマイナスになる

JavaScript で `2^32` の値が必要になりました。そこで、`1 << 32` を計算したところ、`1` になってしまいました。試しに `1 << 31` を計算してみると、`-2147483648` と負の値が返ることがわかりました。 以下のコードを書いてみると、`1 << 30` までは期待通りの結果が得られているようですが、`1 << 30` より大きい値は変な結果になってしまいました。 ```javascript for (let i = 1; i <= 32; i++) { console.log(`1 << ${i}: ${1 << i}`); } console.log("1 << 32 << 32 << 32 << 32:", 1 << 32 << 32 << 32 << 32); ``` ``` 1 << 1: 2 1 << 2: 4 1 << 3: 8 1 << 4: 16 1 << 5: 32 1 << 6: 64 1 << 7: 128 1 << 8: 256 1 << 9: 512 1 << 10: 1024 1 << 11: 204

元記事を表示

2019年のWebGLデバッグツール状況

これは[Three.js Advent Calendar 2019](https://qiita.com/advent-calendar/2019/threejs)の14日目の記事です。

3年前に以下の記事を読んで[WebGL Inspector](http://benvanik.github.io/WebGL-Inspector/)を使い、デバッグ処理でWebGL Inspectorに凄くお世話になりました。

[WebGLの開発やデバッグに便利なブラウザ拡張機能をつかってみよう](https://qiita.com/rootx/items/4f7401d1a6d22cb589c9)

「Three.jsにBaylon.jsみたいなDebug modeある？」という議論を見つけて気になったので、現状のWebGLデバッグツール状況を調べてみました。

[Three.jsフォーラム - Does three.js has some “scene debug mode” or plugin? (like babylon.js DebugLayer)](https://discourse.

元記事を表示

プリザンターのカレンダーを水の中に入れてみた！

何か面白いプラグインでもないかな～と探していたら「jquery.ripples.js」という水たまりを表すプラグインを見つけました！

そこで！

プリザンターを水の中に入れてみた！的な感じになったので、そのご報告の記事を書こうと思いやーす。

#プリザンターとは？
プリザンターとは株式会社インプリムが開発しているオープンソースのWebデータベースです。
データ管理やら業務アプリがマウス操作だけ（ノンプログラミング）でサクッと作れてしまう超有能なプラットフォーム（**しかもOSSなので無料という！**）なのですな。

[オープンソースで脱エクセル！Pleasanter公式サイト](https://pleasanter.org/)

ということで、早速水の中に入れていきましょか！

# プリザンターを水の中に入れる

元記事を表示

フォームの表示非表示の切り替え【JavaScript】

```





表示非表示の切り替え

利用方法