- 1. ? Microsoft Teams 開発の初心者向けガイド その3: メッセージ・エクステンション
- 2. Node-RED から obniz ノードをつかってクリスマスソング＆キラキラ＆顔文字ダンスさせる！
- 3. Node-RED から obniz ノードをつかって Grove Water Level Sensor をつなげてみる
- 4. javascript ~map使い方~
- 5. 1分で学ぶJSON入門
- 6. JS 知識をつなげる (JSアウトプット)
- 7. Flash Advent Calendar 3日目 – JavaScriptバイナリ入門 –
- 8. 642日前に日本中を震撼させた闇の魔術に対する防衛術
- 9. JavaScriptによるオーディオプログラミング例
- 10. 最近やったことのメモ（MVVM, asyncとdefer）
- 11. Vue.jsでオセロ盤を作ってみる
- 12. 中規模Discordに便利！ロールを自動付与できるDiscordBotを作ってみた
- 13. Node.jsについて調べたことまとめ
- 14. 開発環境と複雑さの歴史
- 15. いまさらながらHTML/JavaScriptでマウス、タッチ、ペン入力を扱うためにPointer Eventsを使う
- 16. JavascriptでRange関数を書いてみた
- 17. Shopifyのカートに「利用規約への同意」チェックボックスをつける
- 18. 変数に再代入しないだけでも良いことがあるかもしれないとう話
- 19. モーダルウィンドウの後ろがスクロールされてしまう時の対策方法（jQuery）
- 20. Vuetify図鑑 v-tabsの勘所
? Microsoft Teams 開発の初心者向けガイド その3: メッセージ・エクステンション
みなさんこんにちは〜。この記事は、Microsoft Teams 開発の初心者向けガイド第３弾になります。前回の2つのチュートリアル ( [タブの開発](https://dev.to/azure/beginners-guide-to-ms-teams-development-1-tabs-4e9k/?WT.mc_id=m365-9174-timura) と [Bot 開発](https://dev.to/azure/beginners-guide-to-ms-teams-development-2-bots-590m/?WT.mc_id=m365-9174-timura)）も楽しんでもらえていたらうれしいです。
今回は、Teams UI からのユーザからのアクションで検索結果やメッセージを書き出す方法について説明します。
 4日目の記事です。
Node-RED から obniz ノードをつかってクリスマスソング＆キラキラ＆顔文字ダンスさせてみます。
こんな風に動きます
やった！Node-RED で #obniz ノードから直接ジングルベルのメロディ流せたぞー！1音符ごと配列に手打ちして頑張った！Node-RED で完結できる obniz 素敵すぎる。#nodered Node-RED から obniz ノードをつかって Grove Water Level Sensor をつなげてみる
この記事は [obniz Advent Calendar 2020](https://qiita.com/advent-calendar/2020/obniz) 4日目の記事です。
[obniz に Grove Water Level Sensor をつなげるメモ](https://www.1ft-seabass.jp/memo/2020/09/04/grove-connect-grove-water-level-sensor/) をベースにNode-RED から obniz ノードをつかって Grove Water Level Sensor をつなげてみます。
裏テーマとしては、 I2C に関する複雑なコードでも obniz ノードで行けるのかどうかを試してみたいのです！
## 元のソース
もともと obniz クラウドで動いていたソースはこちらです。
“`js
var obniz = new Obniz(“Obniz_ID”);
obniz.onconnect = async function() {obniz.disp
javascript ~map使い方~
#mapの使い方
配列内の数字を文字列から数値にまとめて変えたいとき
“`javascript
let yoso = [ ‘0’, ‘0’, ‘1’, ‘2’ ]
yoso = yoso.map(Number);
console.log(yoso) // [ 0, 0, 1, 2 ]
“`map() メソッドは、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。
参考：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map“`javascript
const array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(x => x * 2);console.log(map1);
// expected output: Array [2, 8, 18, 32]“`
便利だなm
1分で学ぶJSON入門
JSONってなんですか？という質問に口頭で答えられるようになればいいなーと思い改めてJSONについて超初歩的な解説の記事を作成しました。
## JSONとは?
[wiki](https://ja.wikipedia.org/wiki/JavaScript_Object_Notation)によると下記の通り。>JavaScript Object Notation（JSON、ジェイソン）は**データ記述言語**の1つである。
軽量なテキストベースの**データ交換用フォーマット**でありプログラミング言語を問わず利用できる。この２行がJSONの説明になるのですが難しいワードが出てきたので噛み砕いて説明します。
## データ記述言語とは？
ざっくり説明するとデータの記録に使うフォーマット。
ここでいうフォーマットは書き方のルールである。
JSONの場合は下記のようなフォーマットとなっている“`javascript
[
{“name” : “太郎”, “age” : 26},
{“name” : “花子”, “age” : 23}
]
“`## データ交換用フ
JS 知識をつなげる (JSアウトプット)
##あいさつ
初めての人は初めまして！知っている人はこんにちは！
中学生バックエンドPGのAtieです！
今回は今まで学んできたJSで一つの作品を作っていきます！
ここまで来たらとりあえず基礎は自分なりにできたと思います！
では！##作品の設計
今回はボタンを押すとユーザーのリストが増えていくものを作っていきます！ユーザーは前回の記事の[これ](http://jsonplaceholder.typicode.com/users)を使っていきます！
必要な機能
– webApiを叩いてくる
– リストを追加
– リストを表示
大まかな処理がこのようになると思います##準備
まずは作っていくための準備をします“`index.html
“`まずはhtmlです
構造は簡単でスク
Flash Advent Calendar 3日目 – JavaScriptバイナリ入門 –
開発環境は整ったので、いざSWFファイルのバイナリデータを分解していこうと思います。
とはいえ、バイナリに関して全く知識がないので、必要そうな知識を頭に入れておきます。# 目次
* TypedArray
* Bit演算# TypedArray
バイナリデータを扱う上でTypedArrayの知識は必須です。
型と扱える範囲を覚えておきます。参考サイト
[TypedArray – MDN – Mozilla](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/TypedArray)|型|範囲|
|:—————–|:——————|
|Int8Array|-128 ～ 127|
|Uint8Array|0 ～ 255|
|Int16Array|-32768 ～ 32767|
|Uint16Array|0 ～ 65535|
|Int32Array|-2147483648 ～ 2147483647|
|Uint32Array|0 ～
642日前に日本中を震撼させた闇の魔術に対する防衛術
**[闇の魔術に対する防衛術 Advent Calendar 2020](https://qiita.com/advent-calendar/2020/yaminomajutu)** を完走するため、深夜のテンションで書き殴ったポエムです。(4日目)
明日(5日目)は、**@taptappun** さんによる **Github Hacking ~Githubを容量無制限のクラウドストレージとして使用する試み~** です。
—
先生「本日は日本中を震撼させた闇の魔術に対する防衛術を教えます。皆さんは、642日前に、日本中を震撼させた、あの呪いを知っていますか？」
先生「あの呪いの恐ろしいところは、ほんとうに何気もない、日常生活で気にもとめないほど、ありふれた魔法が、あの日を境に呪いとして発現したことです。」
先生「当時、その呪いを解くために多くの人が戦いました。自ら呪いにかかるリスクを負ってでもも、その呪いを解こうと戦ったものたち。偉大な魔法使いも戦いに加わりました。」
先生「それでも、呪いを完全に解くことはできませんでした。呪いの効力は弱まったといわれていますが、また、
JavaScriptによるオーディオプログラミング例
JavaScript
===[オーディオプログラミング言語 Advent Calendar 2020](https://qiita.com/advent-calendar/2020/audiolang)
# 概要
https://www.w3.org/TR/webaudio/
Web Audio APIはWebブラウザのJavaScriptで使用できるオーディオAPI。W3Cが仕様を策定して各ブラウザのデベロッパーが実装している。2011年にGoogle Chromeの機能として公開されたものが最初の実装事例。現在はスマートフォン用も含め主要なWebブラウザが対応している。
# 実装例
JavaScriptでオーディオプログラミングをするにはWeb Audio APIを直接使用することもありますが、最近はTone.jsを使うことが多いようです。また、Processing言語のJavaScript版であるp5.jsのオーディオ機能も利用しやすいのでこちらの実装例も紹介します。Tone.jsもp5.jsもWeb Audio APIをラップして使っています。
## Web A
最近やったことのメモ（MVVM, asyncとdefer）
#MVVM
Webサービスの設計思想（ソフトウェアアーキテクチャ）
MはModel、VはView、VMはViewModelのことView -> View Model -> Model の順
役割でいうと、
表示 → 表示するために値の取得と加工 → 値 こんな感じ？View Modelが値と表示の間を取り持ってくれます。超優秀ですね☆
#asyncとdefer
JavaScriptファイルの非同期での読み込み
“`
“`asyncとdeferどちらもドキュメントのパース中にスクリプトをダウンロード実行。
async・・・パースが完了前に実行。asyncスクリプトの実行は必ずしも順番通りではない。
defer・・・パース完了後に実行。deferスクリプトの実行は順番に行われる。スクリプトが独立 → async
スクリプトが依存 → defer#今日の名言
Perfection is
Vue.jsでオセロ盤を作ってみる
##はじめに
本日は12月4日❗️
チノちゃん誕生日おめでとう???##本題
オセロ盤はビットボードというデータ構造で実装するのが良いらしい⚪️⚫️✨
Vue.jsで石を並べるところまでやるぞ❗️?[ビットボード(Wikipedia)](https://ja.wikipedia.org/wiki/%E3%83%93%E3%83%83%E3%83%88%E3%83%9C%E3%83%BC%E3%83%89)
※この記事では、ビットボードの難しい説明を省略します?
ビットボードで石を返す処理はサーバー側で行い、その結果の石情報が渡ってくるところからやります✊?❗️あらかじめ仕込んでおく3分クッキングスタイルですね??✨
## 早速実装
残念ながらJavaScriptの数値は32bitなので、1つの変数で64マス表すことができません❗️?
ゆるせねぇ…というわけで、サーバー側で1次元配列に変換してフロント側に渡ってくるってことにしました✊?❗️
### 最初に思い付いたやつ
“` Board.vue
中規模Discordに便利！ロールを自動付与できるDiscordBotを作ってみたこの記事は [プロトアウトスタジオのアドベントカレンダー2020](https://qiita.com/advent-calendar/2020/protoout) の3日目の記事です！
（[去年](https://qiita.com/tkyko13/items/0e5d5db8477a64209635) も3日目だった…）どうも、プロトアウトスタジオ1期生で、同スクールで講師も務めるようになったおの([@tkyk](https://twitter.com/tkyko13))です！
## はじめに
大学の授業でもDiscordを使いたい### Slackと違ったDiscordの良さ
カテゴリーがあるのがよい！
授業を複数受け持っているのでNode.jsについて調べたことまとめ
#Node.jsとは
**サーバーサイドのJavascript実行環境である。**
PHP、Ruby、Python、Java等の言語と同様に、サーバー側で動作するJavaScript。
Google Chromeに搭載されたJSエンジンV8をサーバーで実行できるようにしたというイメージ。
V8の処理は、他のPHP/Perl/Ruby/Pythonなどのスクリプト言語の処理エンジンよりも速い。
# Node.jsでできること
– サーバーサイドアプリケーション
– Webアプリ
– Node.js + Express– クライアントサイドアプリケーション
– Visual Studio Code
– GitHub Decktop
– Slackなどが利用例である。
Node.js + Electron– IoT
– Node.js + Raspberry Pi# Node.jsの特徴
– シングルスレッド– ノンブロッキングI/O（非同期処理）
– イベントループ###シングルスレッド
プロ開発環境と複雑さの歴史
# 歴史を振り返る
まだパソコン（パーソナルコンピュータ）ではなく、**”マイコン”**と呼ばれていた時代から現代に至るまでの開発環境（本文中はツールと表記）の変遷と複雑さについて書いていきます。
# マイコン時代
* **複雑度**：★
* **ツール**：BASIC
やっとコンピューターが家庭に入ってくるようになった この時代は、開発環境として BASIC を採用しているマイコンがほとんどでした。
この当時の [**BASIC**](https://ja.wikipedia.org/wiki/BASIC) はプログラミング言語でもあり、OS でもあったので、電源を入れると BASIC が起動しました。
BASIC では FILES コマンドを使ってファイルの一覧を出し、LOAD コマンドで読み込み、LISTいまさらながらHTML/JavaScriptでマウス、タッチ、ペン入力を扱うためにPointer Eventsを使う
この記事は [Web グラフィックス Advent Calendar 2020](https://qiita.com/advent-calendar/2020/webgraphics) の3日目の記事です。
# はじめに
グラフィックス技術の情報ではないのですが、Webでグラフィックス系の開発をしているときにマウスやタッチの入力はよく使いますよね。
いまさらながらマウス、タッチ、ペン入力を扱うことのできるPointer Eventsを使ってみました。恥ずかしながら、つい最近までこのイベントの存在を知らず、マウスとタッチを統合して扱う処理を頑張って実装していました。
しかし調べてみると若干調べづらいといいますか、検索するとcssのpointer-eventsの情報が出てきたり、まさにPointer Eventsのことを扱った記事が上位に出てこなかったり（MDNがあるけど量がすごいし…）、かなり前の記事だったりしてけっこう迷いました。
そこで簡単なサンプルを作ってみました。マウス、タッチ、ペン（筆圧あり）でcanvasに線を描画します。ついでにpointer-eventsによるイ
JavascriptでRange関数を書いてみた
Javascriptの組み込み関数には連番入った配列を返すような「Range関数」がない。
もしあれば、for-of文などと組み合わせて簡潔に書ける処理が増えるだろう。“`Javascript:使用イメージ
for ( const value of Range( 10, 20 ) ) {
//value = 10, 11, 12, … 19
}
“`#実際に書いてみる
パフォーマンスなどは無視して、単純に書くと配列を返す処理になるだろう。
しかし、何万何十万という巨大な連番を振る場合には不都合が大きい。
要は iteratable を返せば良いのでジェネレーター関数とすれば良いだろう。“`Javascript:Range( [start,] end [, step] )
function* Range( …args ) {let start, end, step;
switch ( args.length ) {
case 0: throw new TypeError( “argumShopifyのカートに「利用規約への同意」チェックボックスをつける
## 目的
現在のShopifyでは利用規約やプライバシーポリシーにユーザーが同意した上でカートの先に進む機能は実装されていません。その場合、「みなし同意」と判断される場合があり、マーチャントとして慎重な対応を実施するにはカート時点でのユーザの同意のチェックボックスの実装を行う必要があります。参考：利用規約・プライバシーポリシーの適切な同意の取り方を弁護士が解説
## 実装
今回は「Debut」のテーマをカスタマイズして利用規約へのチェックボックスを実装していきます。
### ファイルを開く
まずは管理画面「オンラインストア」>「テーマ」から、既存のテーマの「アクション」> 「コードを編集する」をクリックします。
、Scalaで体感してからはScalaに限らず積極的に再代入しないような実装を心がけるようになりました
今回は再代入しないことの良さについて説明することで今後この記事を読んで「ちょっと試してみようかな…」と言う人が出てくると嬉しいです
もちろん「いやいやめちゃくちゃ書きづらい」「意識しなくて絶対良い！」と言う人もいるかと思います、この辺りの考え方は人によるとは思いますので「こういう理由で自分はやらない」と言う結論を持つだけでも意味はあるかと思いますので知見の一つとして学んでいただければと思います
筆者が考えている「再代入しない」と言う意味と「不変(immutable)」と言う言葉では意味が違います、詳しくは後述しますが「不変」を追求すると難しく考えてしまう傾向があるため、筆者がまず試し
モーダルウィンドウの後ろがスクロールされてしまう時の対策方法（jQuery）
# どうも7noteです。背景がスクロールされてしまう問題の解決方法
モーダル処理に対策を入れていなければモーダルが開いている間でも背景（本文）がスクロールされてしまいます。
さっそくソースの方へ。
## ソース
jQueryを使用しています。jQueryって何？という方は[こちら](https://qiita.com/7note/items/45bd8efbedd557667218)
“`index.html
みなはその間どうもその享有地としてののためを打ちでまし。もし当時で尊重方はもっともその意見なけれうなどに加えるがいらっしゃるたらには懊悩なれですうて、どうには組み立てうありんん。金力にしましのは単に元来でもうましませで。
〜〜〜〜省略〜〜〜〜〜〜〜〜〜〜〜
無論大森さんを公言兄ちょっと意味がありあり敵その縁私か満足
Vuetify図鑑 v-tabsの勘所
公式リファレンス。
https://vuetifyjs.com/ja/components/tabs/API
https://vuetifyjs.com/ja/api/v-tabs/# 基本的な使い方
“`html
One
Two
Three 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関連のことを調べてみた
