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

Blocklyに基づきビジュアルプログラミングの入門級の実例を記載して見ます

#Blocklyとは
Googleのオープンソースの一つです。
普通なコーディングではなく、いろんなブロックを組み合わせてプログラミングをしに行きます。ビジュアルプログラミング言語というジャンルです。
日本では、今までBlocklyに基づいてビジュアルプログラミングを開発する記事がまだ少ない気がします。本章でカスタムBlockの作成から実装までの操作を例としてBlocklyの開発の流れを説明しておきます。

#カスタムBlockを作成
自分のブロックを利用する手順は、大まかに４つに分けられます。

– Blocklyの開発ツールで新しいBlockを作成
– Blockの作成と同時、Blockの定義コードとGeneratorが生成
– 新ブロックに機能に合わせGeneratorを編集
– 新ブロックを画面のtoolboxに追加

まず、プロックを作成しましょう。
[Blocklyの開発ツール](https://blockly-demo.appspot.com/static/demos/blockfactory/index.html)から、以下ようなブロックを作成してみましょう。ブロッ

glTF 2.0 対応 WebGL ライブラリを比較してみる（2019年版）

この記事は[WebGL Advent Calender 2019](http://qiita.com/advent-calendar/2019/webgl)の22日目の記事です。[glTF 2.0 対応 WebGL ライブラリを比較してみる（2017年版）](https://qiita.com/cx20/items/95127986f4b9fa91fe9b)の2019年版の記事になります。

## はじめに

みなさんは Khronos の [glTF](https://www.khronos.org/gltf/) というフォーマットについてご存じでしょうか？
glTF は GL Transmission Format の略でランタイム用途の 3D アセットの標準仕様を狙った比較的新しいフォーマットです。
glTF の名前を知らなくても[Wordの暴れる恐竜](https://nlab.itmedia.co.jp/nl/articles/1812/09/news021.html)や3Dアバターの[VRM](https://vrm.dev/)とい

Happy Merry Christmas!


JavaScriptを使ってアニメーションを作りました。
CanvasとかSVGとかでも良かったのですが、あえてここはDIVだけで作ってみました。
激重です！！

**デモページ**
[Happy Merry Christmas!](https://hiron712.github.io/xmas2019/)

# ソース

[ソースをダウンロードする](https://github.com/hiron712/xmas2019)

## HTML

外部JSを読み込んでいるだけです。

“`html




negaposi-analyzer-jaをブラウザで使う

もちろんNode.js無しで。
普通は素直にビルドしましょうね。

依存するkuromoji.jsの導入は前回の[kuromoji.jsをNode.jsなしでローカルブラウザで扱う – Qiita](https://qiita.com/khsk/items/7fb6c68d5560863aa97b)のやりかたで。

# negaposi–analyzer-ja とは

>[形態素解析したtokenからネガティブ/ポジティブを判定したスコアを返すJavaScriptライブラリ](https://github.com/azu/negaposi-analyzer-ja)

欲しかったものそのものがまさに用意されていた安定のazu氏製です。

テキストから感情を評価するウェブサービスなどは時折話題になるが、それが「APIとして無料で手軽に」となると、とたんに見つからず、RubyやPythonとかじゃなくブラウザで実現したい要望をかなえてくれる可能性があるJavaScript製。

これをブラウザで動かすため、形態素解析用のkuromoji.jsともども無理やり書き換える。

# ブラウザで読

ダークテーマとかに切り替える。

皆さんこんにちはルサカです。最近ダークテーマ流行してますよね！
今回は、ユーザーのテーマを取得したり、ユーザーがテーマを変更できるといったものを作って行きたいと思います。
## まぁ作っていこう！

“` CSS
@media (prefers-color-scheme: light) {
body {
background-color: white;
color: black;
}
}

@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}
“`
っていう方法でもダークテーマとかの切り替えはできますが、
テーマを変更する処理が結構めんどくさいので、今回は、以下のコードのように“` body “`タグに“` theme “`属性を作ってテーマの切り替えを容易にします。

“` html



ニコニ広告をコメント欄に表示させるChrome拡張機能作ってみた。

猫月あゆむです。よろしくおねがいします。

#対象
– 解説動画をみて深堀りしたいと思った人
– 解説動画はこちら https://nicovideo.jp/watch/sm36117230 (12/22 18:00公開予定)
– Chrome拡張機能/JavaScriptについて何かしら知りたい方
– ニコ厨

#何を作ったのか

タイトル通り。

こちらで配布中。

– 公式サイト
– https://site.nekozuki.me/nicoad-ex/
– Chromeウェ

正規表現にマッチした文字列を replace を使わずにハイライトさせる

# はじめに
この記事は [FORK Advent Calendar 2019](https://qiita.com/advent-calendar/2019/fork) の22日目の記事です。

表題のとおりに挙動をするブックマークレットを作成する機会があり、アドベントカレンダーの記事にしてみました。
至らない点多々あると思いますが、お手柔らかにお願いします。

# 作成したもの
下記ページにあるリンクをブックマークバーへ追加して様々なページでクリックしてみてください。
**クリスマス**、**Qiita**、**Advent Calendar** がハイライトされると思います。

https://yshrkn.github.io/highlight-string/

※Chrome のみ動作確認してます

#プログラムの概要
おおまかな挙動について記述しています。
コードの全文は下記からご確認ください。
https://github.com/yshrkn/highlight-string/blob/master/js/script.js

## 要件
今回作成したプログラムの要件は

Adobe XD Plugin 開発入門

こちらの記事はAdobe XD advent Calendar 2019年12月22日の記事です。
AdobeXDプラグイン開発の手順書のようなものを書いてみました。
ソースコードはコピペで大丈夫です。
プラグイン作ってみたい方の手助けになれば幸いです。

## 環境
– Mac 0S 10.15.1
– Adobe XD バージョン25.1.12.7
– VSCode バージョン1.40.2

## 参考
公式のドキュメント
https://adobexdplatform.com/plugin-docs/

## 準備
Adobe XD を起動
メニューバーから`プラグイン` > `開発版` > `開発フォルダーを表示`
表示された`develop`フォルダで開発するので、この場所を…
![開発

Original DOM vs. Shadow DOM vs. Virtual DOM

# Introduction
For people who works as a Web Developer might be familiar with the concept of `DOM` or more specifically `Original DOM`, huh ?

Have you ever wondered huge sites like Facebook, Twitter, GMail, etc with million lines of code, how they could manage DOM Tree ?

And of course, with DOM only, it is difficult for web developers to handle such million stuffs. From there, it came out the concept `Virtual DOM` and `Shadow DOM`.

So in this article, let’s learn more about the `Original DOM`

Vue-CLI 4を使用したJavaScript開発環境構築(プロトタイプ版とプロジェクト版)

#はじめに
この記事は [JavaScript Advent Calendar 2019](https://qiita.com/advent-calendar/2019/javascript)の22日目の記事になります。

こんばんは、きゅ〜ぶです。
少し前にVue CLI4がリリースされましたね。
Vue CLI4の特徴や3からの変更点などは以下が比較的分かりやすいと思います。
[Vue.js CLI 4 Released](https://www.infoq.com/news/2019/12/vue-cli-4-released/)

ローカル環境でJavaScriptを触りたかったのでせっかくなので新しくなったVue-CLI4で環境構築をしようと思います。
基本的には[公式リファレンス](https://cli.vuejs.org/guide/installation.html)に沿ってやっていきます。

↓Vue-CLI4のソースコード
https://github.com/vuejs/vue-cli/releases

2019年12月現在最新バージョンは、v.4.1.1です

React+Railsでモダン（）なTODOアプリを作ってみた 〜備忘録も兼ねて〜

[Opt Technologies Advent Calendar 2019](https://qiita.com/advent-calendar/2019/opt-technologies)の21日目の記事です。
# はじめに
2019年4月に株式会社オプトに入社したsh1okohと申します。
なんやかんやありまして、今はReact, Redux, Railsなどを使ったプロダクトで、日々奮闘しております。
今回は、お仕事中に出会った技術スタックを使ってモダン()なTODOアプリを作ってみたので、各種ライブラリの紹介をしつつ、Todoアプリの紹介をしていきたいと思います。（備忘録的な目的もあります）

ちなみに、今回のTODOアプリのソースコードは下記リンクにありますので、
興味のある方はみてみてください。

https://github.com/sh1okoh/adventcalendar

# 対象読者
今回は、テーマ的にも内容自体は広く浅くになっております。
各種ライブラリを使ったWEBアプリの全体像を把握したい方などを対象としており、各ライブラリを深く学びたいといった方は対象

kintoneを早くて変化に強いシステムにするために

この記事は「**[kintone Advent Calendar 2019](https://qiita.com/advent-calendar/2019/kintone2)**」の21日目の記事です！

株式会社AISICの久米です。
福岡でkintoneエバンジェリストしています。
年一のQiita投稿で恐縮ですが、今年も書いてみます＾＾

テーマ的には、[昨年の記事](https://qiita.com/j-kume/items/4b67f361d54259a11a1c)と似ていますが、より整理を進めてみました！

弊社のkintone開発の定石を、テンプレート的にまとめてみましたので、皆さんと共有して、よりイケてるkintone生活を送っていただきたく思います！

# kintoneは上手に作らなければ『早い』だけで、変化に『弱い』システムになる
「kintoneは、早い！簡単！」って言いすぎですよね。
いや、確かに「早い・簡単」ではあるんですよ。
会社への導入にしても、アプリを作るにしても、それほどの知識が無くてもできちゃう辺りは、「早い・簡単」以外の何物でもないとは思うわ

Javascriptメモ④

復習も兼ねて一日一投稿してます。
簡単なメモです。

###for文

繰り返しが決まっている時はfor文
繰り返しが決まってない場合はwhile文

for(初期値;条件式;増減式){
繰り返し処理
｝

“`js

for(i=0;i<100;i++){ documen.write(i); } const list=['toypoo','pome','siba']; for(const i=0;i

2019年フレームワークのトレンドが見れるサイトの紹介

# hotframeworks.com
URLはこちらになります。
http://hotframeworks.com/

Node.jsを使ったローカルHTTPSサーバーを走らせる

# 目的
OAuth2認可を使ってオンラインサービスと連携させることができるコマンドラインツールを作成中です。ユーザー認証後に認可コードをこのツールで受け取りたいと思っているので、`127.0.0.1`で走るHTTPSサーバーをリダイレクト先として用意したい。
その検証として、まずローカルHTTPSサーバーをNode.jsで走らせてみました。言語は実際の使う予定のTypeScriptとなっています。

## 何を使う?
* Node.js
* httpsモジュール
* TypeScript

# 準備
## まずはHTTPで地ならし
私はNode.jsローカル環境ではHTTPサーバーすらを立てた経験がないので、まずはHTTPから試してみる。

“`typescript:HTTPサーバーならばこれでOK。
import http from ‘http’;

const PORT = 9090;
const HOST = ‘127.0.0.1’;

function startHttpServer(portNumber: number, hostName: string): Promis

保守性や堅牢性を高める！モダンフロントエンド開発に必要な周辺技術をまとめてみました

## はじめに

前日もくもく会で一緒になったエンジニア初学者の方を見て、ポートフォリオとしてフロントエンド開発はちゃんとできてはいるものの、実務において必要な保守性や堅牢性の高いコードについての意識がどうしても不足しているなという印象を受けました。

もちろん初学者の方にそのようなことを求めるのは酷な話なので知らないからダメ、ということを言うつもりは毛頭ありません。
が、職業としてエンジニアを目指すためにフロントエンド開発をやっている場合、保守性や堅牢性を意識すると企業からの評価が段違いなのではないかと思うのです。

そこで今回の記事では単にフロントエンドが開発できるというスキルだけではなく、実務における保守性や堅牢性を意識したフロントエンドを開発するために有効になるであろう技術について説明してみたいと思います。

## 対象者

– プログラミング初学者の方で、モダンなJavaScriptフレームワークを使ってフロントエンド開発を行っている方
– これからモダンなJavaScriptによるフロントエンド技術をプロダクトに導入しようとしている企業のエンジニア
– ReactやVueを

年末まで毎日webサイトを作り続ける大学生 〜64日目 入力文字をランダムな位置にランダムなサイズで表示する〜

##はじめに
こんにちは！@70days_jsです。

文字を入力したら、ランダムな位置にランダムな大きさで表示されます。gif↓

64日目。(2019/12/21)
よろしくお願いします。

##サイトURL
https://sin2cos21.github.io/day64.html

##やったこと
キーダウンをイベントリスナーで捉えて、入力文字は一つずつオブジェクトを作っています。
50文字打ち込んだら全てのオブジェクトが消える仕組みになっています。

html↓

“`html

COUNT:

“`
css↓

`

【jRumble】国産OSSのプリザンターを震え上がらせてみた！

プリザンターを～

震えさ～す！！?

今日はjQueryのプラグインであるjRumbleを利用してプリザンターをガクガクブルブル震えあがらせてみようと思います。

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

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

ということで、早速このプリザンターを震え上がらせていこうと思います。

# jRumbleのダウンロード
jRumbleは以下のサイトよりダウンロードします。

[

Google のクライアントライブラリで認証するときにアカウントを切り替える方法

# はじめに

Google のクライアントライブラリ (https://apis.google.com/js/api.js) を使って OAuth 認証するサンプルは多くありますが、複数アカウントを切り替える方法の記事が少なかったので記載します。

# 実現方法

認証時にオプションを 1 つ設定するだけです。

“`javascript
const options = new gapi.auth2.SigninOptionsBuilder();
options.setPrompt(‘select_account’);
gapi.auth2.getAuthInstance().signIn(options);
“`

これを指定しないと、初回のログイン時はポップアップが表示されてアカウント選択できますが、アカウントを切り替えようと思ってログアウトして再ログインしても、前回認証したアカウントで自動ログインするため、ポップアップが表示されず、アカウントの切り替えができませんでした。

[ドキュメント](https://developers.google.com/identity/si

最新のWeb技術でIoTをする

この記事の内容は[JSConf JP](https://jsconf.jp/2019/)で話した内容です.
資料全体は[こちら](https://speakerdeck.com/9wick/zui-xin-falsewebji-shu-deiotwosuru)にあります。

# アジェンダ


# IoTのはじめかた

### とりあえずIoTをやりたい人へ

IoTとはインターネットとThingsがつながることです。
ざっくりと書くとこんな構成ですね。

この右側のアイコンは皆さんよく知ってるサ