- 0.1. 【初心者向け】npmについてよく知らない人のための教科書 ~npm installは何をおこなっているのか~
- 0.2. Next.jsでcommit時にaddされているファイルにのみリントとフォーマットを実行する
- 0.3. RTAイベント向け簡易背景システムをつくったよ
- 0.4. 要素の内容をPicture in Pictureで表示する。
- 0.5. vue + ros 基本の通信
- 0.6. ノンプログラマーがSymbolブロックチェーンでゲームを作ってみた
- 0.7. p5.jsの関数まとめ part.4 preloadとloadImage()
- 0.8. スマホの加速度センサーを使ってWebでリアルタイム同期する歩数計を作る
- 0.9. Next2D NoCode ToolのBlendModeを利用する
- 0.10. crisp-game-lib でゲームをつくるための手順
- 0.11. vueがリアクティブにならない場合
- 0.12. エラー例
- 0.13. 【Vue.js 3】書籍等にはあまり載ってなかった（と思う）ことまとめ
- 0.14. 非プログラマーでも出来た！４STEPで、はじめてのブロックチェーンアプリ開発！！
- 0.15. Canvas APIで「ポケモン」を描いてみる
- 0.16. 英数字をドット文字に変換したい
- 0.17. Webの勉強はじめてみた その8 ～JavaScript編 オブジェクト～
- 1. 学んだこと
- 2. 気を付けたいこと
【初心者向け】npmについてよく知らない人のための教科書 ~npm installは何をおこなっているのか~
# はじめに
対象はnpmを学習し始めた人、npmへの理解が浅い人となります。
本記事は、npm(node package manager)に苦手意識があった筆者が克服するために勉強した備忘録です。# 開発環境
– Apple M1
– Big Sur 11.6
– Node.js
– 16.13.0
– npm
– 8.1.0# npmとは
こちらについては、[【初心者向け】NPMとpackage.jsonを概念的に理解する](https://qiita.com/righteous/items/e5448cb2e7e11ab7d477)をお読みください。
「パッケージとは何か」や「package.jsonとpackage-lock.jsonの違い」など、とても理解がしやすいようにまとめられております。
いつかこんな素敵な記事を書いてみたいです。# npm installとは
– パッケージをインストールするコマンドです。
– package.jsonのdependenciesとdevDependenciesに書かれているパッケージをインストールす
Next.jsでcommit時にaddされているファイルにのみリントとフォーマットを実行する
# 何をするのか
タイトル通りで、Next.jsで`commit`時にステージング（`git add`）されているファイルにのみ`next lint –fix`と`prettier –wright`を実行します。
ググれば日本語の記事でもやり方は沢山出てくるのですが、意外と落とし穴があるので今回はその詳細を書いていこうと思います。**※大前提として初めからeslintが導入されている11以降のバージョンを使用しましょう。**
# よくあるやり方
`husky`と`lint-staged`を入れて`.husky/_/pre-commit`と`package.json`で以下のように設定して、`commit`する。“`bash
#!/bin/sh
. “$(dirname “$0″)/_/husky.sh”yarn lint-staged
“`
“`json
{
“scripts”: {
“dev”: “next dev”,
“build”: “next build”,
“start”: “next start”,
“lint”: “nex
RTAイベント向け簡易背景システムをつくったよ
#今回のレギュレーション
– この記事で得られる知識
– そもそもRTAとは？
– 作ったものは？
– なぜ今回の形になったのか？
– 当日の運営について
– 完走した感想#この記事で得られる知識
– サーバがない中で構築する動的背景の作成
– NodeCGでやろう！と思える心
– レガシーできたないソースは読みづらいという見本。#そもそもRTAとは？
RTAとはReal Time Attackの略なのですが、
簡単に言うとゲームの早解きのことです。
どんな手を使ってもいいから何人かの人たちが自分の得意なゲームをいかに早くクリアするかを突き詰めるといったもので
世界では[Games Done Quick](https://gamesdonequick.com/)というアメリカで行われるイベントが一番有名だったりします。
日本でも[RTA in Japan](https://rtain.jp/)というイベントが年に２回開かれており、
今年も12月26日から6日間、24時間開催される予定となっています。
https://nlab.itmedia.co.jp/nl/articles/
この記事は、[ニフティグループ Advent Calendar 2021](https://qiita.com/advent-calendar/2021/nifty) 5日目の記事です。
昨日は @hajimete さんの「[Slackに追加されたカスタム絵文字を通知するBOTを作った](https://qiita.com/hajimete/items/226759d0abd5350fabde)」でした。
毎日のように絵文字が追加されているとこういうBOTもありがたいですね！# はじめに
Picture in Picture(PiP)は、[<video>要素](https://developer.mozilla.org/ja/docs/Web/HTML/Element/video)を常に最前面に表示されるウィンドウ上に表示できる機能です。
本記事では、[<canvas>要素](https://developer.mozilla.org/ja/docs/Web/HTML/Element/canvas)に描画された内容をPicture in Pictureで表
vue + ros 基本の通信
# はじめに
Vueとは何かというとJavaScriptのフレームワークでHTML,JavaScript,CSSのプログラムを1つのコンポーネントとして扱いそれを組み合わせWebアプリを作成することができます。
そのため1つ1つの機能のプログラムを小さく保つことができWebアプリ開発が楽になります。ロボットのWebアプリ開発でも規模が大きい場合は使うと良いかも知れません。
ここでは,Vueの最初のサンプルにrosと通信する部分を追加する方法について記載させていただきます。
また、Vueのインストール方法や立ち上げ方法などは以下など他の人の記事を参考にしてください。
https://qiita.com/erichama427/items/1b6e485ff733371a1582
# 環境
Ubuntu 20.04
ROS noetic
Vue 3.0# 準備
vueプロジェクトを作成したら,まずROSとの通信に使用するroslibをインストールします
“`
npm install roslib
“`あとはsrc/App.vueを以下に記載しているサンプルに変
ノンプログラマーがSymbolブロックチェーンでゲームを作ってみた
この記事は [nem Advent Calendar 2021](https://qiita.com/advent-calendar/2021/nem) 5日目の記事です。
#はじめに
プログラム経験ゼロでも、**Symbolというブロックチェーン**を利用すれば**、
Web環境とテキストメモだけ**で、ブロックチェーンゲームが作れます。**はじめてのプログラムはSymbolブロックチェーン**から、
冬休みの学びに、是非お楽しみください。#自己紹介
日常生活で**プログラムに一切触れない** 仕事をしつつ
[nembear(ねむぐま)](https://twitter.com/nembear)
という名前で、暗号通貨Symbol界隈で**開発以外**の活動をしております。
そんな私でも、**ほぼコピペ**でSymbolを利用した**独自のブロックチェーンゲーム**を作ることが出来たので、皆さんにも紹介します。
#本記事で作るブロックチェーンゲーム
ブロックチェーンを利用したスロットゲームを作ります。3つの数字が揃えば、**「symbol:xym」**というト
p5.jsの関数まとめ part.4 preloadとloadImage()
この記事は Qiita p5js アドベントカレンダー5日目の記事です。
## これはなに
書籍[『Generative Design with p5.js』P_1_2_2_01](https://editor.p5js.org/generative-design/sketches/P_1_2_2_01)に登場する関数について理解を深める記事です。
今回はpreload()とloadImage()。## preload()
setupやdrawと同じ、p5での描画を組み立てる関数(Structure)です。
setupよりも前に実行されるのが特徴。### リファレンスより
> Called directly before setup(), the preload() function is used to handle asynchronous loading of external files in a blocking way. If a preload function is defined, setup() will wait until any load call
スマホの加速度センサーを使ってWebでリアルタイム同期する歩数計を作る
スマートフォンには多くのセンサーが搭載されており、それらを活用した様々なアプリがあります。
今回は、加速度センサーを使って複数のスマートフォンで取得した歩数をリアルタイムにモニタリングできるようなWebアプリを作成しました。
**参考にさせていただいた記事**
– [3軸デジタル加速度センサーを使用したフル機能の歩数計の設計](https://www.analog.com/jp/analog-dialogue/articles/pedometer-design-3-axis-digital-acceler.html)
– [ビデオチャットアプリを作る（WebRTC+Node.js+Socket.IO）](https://www.hiramine.com/programming/videochat_webrtc/index.html)**使用した技術**
– node.js (express v.4.17.1)
– socket.io (v.4.3.2)
– chart.js (v.3.6.0)## つくったもの
ブレンドを使用していない通常の状態。
# layer(レイヤー)
DisplayObjectに関する透明度グループを強制的に作成します。
複数のレイヤーを持つDisplayObjectを半透明にすると、以下のように表示されます。
レイヤーごとに半透明が適用されるので、重なる部分が透けて表示されます。
※2021年12月現在、layer,alpha,eraseはプレビュー時にしか表示確認がで
crisp-game-lib でゲームをつくるための手順
# 概要
– crisp-game-lib は、ミニマムなゲームを作るのに向く魅力的なライブラリです。ブラウザゲームを手軽に作れます。
– [残りゲーム制作体力10%な人のためのずぼらゲームライブラリcrisp-game-lib](https://aba.hatenablog.com/entry/2021/04/02/204732)
– インストールからWeb公開までの手順は全て公式に書かれていますが、ある程度関連技術に慣れている人向けです。
– この記事では、慣れていない人向けに、より噛み砕いた手順を提供します。大部分は、git や GitHub や npm や VS Code の既知の手順です。# 前提
– ※記事中で、ある程度は説明します
– [公式](https://github.com/abagames/crisp-game-lib)や、[残りゲーム制作体力10%な人のためのずぼらゲームライブラリcrisp-game-lib](https://aba.hatenablog.com/entry/2021/04/02/204732)をある程度読んでいること
– Gi
vueがリアクティブにならない場合
これは結構ハマりやすそう
エラー例
配列の中身を表示するシンプルなプログラム
ボタンをクリックすると配列の２番目が「青→緑」に変更する“`javascript
{{data}}“`
が動かない。
コンソールを見ると配列は
“`
[‘赤’, ‘緑’, ‘黄’]
“`ちゃんと変わ
【Vue.js 3】書籍等にはあまり載ってなかった（と思う）ことまとめ
## はじめに
先日、とある EC サイトを Vue 3 を使って実装しリリースしました。機能の一部を Vue で書いた経験はあったのですが、アプリケーション全体を JS フレームワークで実装したのは初めてでした。Vue 2 の書籍は 1 冊読んだことがありましたが、Vue 3 は初めて使うので、念の為、Vue 3 対応のものを案件スタート前に 1 冊読みました。
ちなみに書籍はこちらです。
– [改訂2版 基礎から学ぶVue.js [2.x対応! ]](https://www.amazon.co.jp/dp/4863543239/ref=cm_sw_em_r_mt_dp_JKJ6ZK541SM3FWVPBEDE)
– [Vue.js3超入門](https://www.amazon.co.jp/dp/4798063738/ref=cm_sw_em_r_mt_dp_8DRJ9B0YG2H48WD4F7X0)しかし、いざ開発を初めてみると「あれ！？これってどうやればいいんだ？」と調べたり、試したりしたことがいくつかありましたので、そこから 5 つの Tips を [JavaScr
非プログラマーでも出来た！４STEPで、はじめてのブロックチェーンアプリ開発！！
この記事は「[nem Advent Calendar 2021](https://qiita.com/advent-calendar/2021/nem)」の12/4の記事として書かれています。
こんにちは。[キツツキさん](https://twitter.com/kitsutsukick)です。
わたくし、非プログラマーではありますが、今年（2021）は、ブロックチェーンアプリの公開実験を開催することが出来ました。
今回は、その体験（どんな感じで進めたのか？）を記事にして、これから始めてブロックチェーンアプリの開発をしたい方のための参考情報にできればと思います！
※ 使用するパブリックブロックチェーンはSymbol(NEM)となります。
Qiitaということもあり、対象読者としては、「ほぼ素人だけどプログラミングに触れたことがないわけではない」以上のプログラミング能力の方を対象としています。
そのくらいのプログラミング能力があれば、何かしら動くブロックチェーンアプリを作れるようになるまでの流れを４STEPにまとめてみました。
必ずしも、このSTEPどおりであ
Canvas APIで「ポケモン」を描いてみる
### Canvas API
HTMLのCanvasタグを用いて、Javascriptでお絵かきができます。
https://developer.mozilla.org/ja/docs/Web/API/Canvas_APIcanvasのDOM要素に対して、色を足したり、線を足すことで、絵として表現できます。
“`html
“`
単純な四角形を描画するだけであれば、mozillaの公式に紹介があるのですが、
もう少し込み入った、やや複雑な絵を描きたいと思ったときに、サンプルがまだまだ少ない感じました。
この記事がその一つになれれば幸いです。### Canvas で絵を描く
実際にポケモンのコダックをCanvas APIを使って描いてみました。
今回はReact上で表現しています。
on Webの勉強はじめてみた その8 ～JavaScript編 オブジェクト～N予備校の「プログラミング入門 Webアプリ」を受講しています。
今回は第一章12節「JavaScriptのオブジェクト」です。学んだこと
:::note
1. オブジェクト内のプロパティは「,」で区切る。
2. 配列みたいに参照できる
3. プロパティの値は省略できる。
:::配列みたいに参照できる
“`javascript
var student = {
name = ‘Jake’,
age = 16
}
student[‘name’];
“`プロパティの値は省略できる
“`javascript
var age = 13;
var student = {
name = ‘Jake’,
age
}
“`気を付けたいこと
:::note
1. メソッドの実行は必ず()をつける
2. 未実装の箇所はコメントで //TODO をつけること
:::
メソッドは`()`つけるとすぐに実行されるイメージでいいのかな？
下の練習問題では`stop`に`()`をつけないで
[Rails]DELETEリンクでpreventDefaultが効かない
### 環境
ruby 2.6.5
Rails 6.0.4.1
[sweetalert2](https://sweetalert2.github.io/#configuration)(CDN)### 実装したい機能
削除ボタンを押すと、ブラウザに警告アラートを出す。
OKを押すと削除され、Cancelを押すと、元の画面に戻る。イメージ↓
### 実装方法
削除リンク要素をgetElementByIdで取得。
クリックイベント内でpreventDefaultを使用し、削除イベントを中止。
sweetalert2を使用して、警告アラートを表示。
OKが押された場合のみ、削除処理を進める。### 生じた問題
Railsのヘルパーメソッドであるlink_toで削除リンクを実装した場合、
JavascriptのpreventDefaul
Vue.jsでVimeo動画のフレームを自作することができるのか？
# はじめに
はじめまして！株式会社オークンの向坂英希と申します！
前回のプロジェクトでVimeoのAPIを触ったので、情報を共有していきたいと思います。
# 結論Vue.jsでVimeo動画のフレームを自作することは**可能です**。
さらに、Vimeoが多くのAPIを提供しているので、動画の細かい設定や制御にも対応できます。# モジュールのインストール
“`
npm install @vimeo/player
“`# 動画の表示
表示する動画のプレイヤーインスタンスを作成し、動画を表示する。
## 手順１ 動画を表示する要素の指定
“`
“`
## 手順２ プレーヤーインスタンスの作成
インスタンスを作成する関数のパラメータに下記を指定する。
第１パラメータ: 動画を表示する要素のid
第２パラメータ: 動画の埋め込みオプション
*埋め込みオプションに関しては、下記を参考にする。
https://developer.vimeo.com/player/sdk/embedちなみに
2021.12 Swiperのナビゲーションの色を変える
## はじめに
ご存知Swiper。
スライダーを簡単に実装できるJavaScriptライブラリーですが
ナビゲーションの色を変えたいと思い、いろんな記事を試したのですが何故かうまくいかず。。。ちょっとやりかたが変わったかもということでまとめます。
## サンプルのスライド
今回はこちらを例に説明していきます。## 概要
2022年度に向けて、今年使って便利だったsaasのまとめ– [Sentry – エラー監視 -](#Sentry)
– [Agora – ライブ配信 -](#Agora)
– [Zendesk – ヘルプページ -](#Zendesk)
– [Sendgrid – メール -](#Sendgrid)
– [Mailtrip – メールテスト -](#Mailtrip)## Sentry
Sentryは、エラーを監視するのに役立つサービスです。
特にフロントエンドのエラーを監視するのに重宝しました。制限などはありますが、Developerライセンスなら無料で使用できます。
小さなアプリぐらいなら十分かとhttps://sentry.io/welcome/
## Agora
ライブ配信に必要な機能を提供してくれているサービスです。
少し痒いところに届かないと感じますが、簡単なライブ配信アプリを作るのには十分だと思います。
※WebSDKは3.xと4.xがありますが、これから使用する場合は4.xをお勧めします。**従量課金生なので注意**
https:
