- 1. UMD版Hexabase JavaScript SDKを使って認証を行う
- 2. Job Interview Questions JavaScript 3
- 3. Job Interview Questions JavaScript 2
- 4. Job Interview Questions JavaScript 1
- 5. 毎日画像をOCRしてスマホに通知するサービスを作ったので簡単なアーキテクチャを紹介
- 6. Promiseでサブテーブルの特定行を非表示にする
- 7. 【L1、L2】ブラウザでWorkerを動かしてみる（番外編）
- 8. スクラムをマーメイドにしてみた
- 9. 2023年版キャンドルナイトプロダクト開発のあゆみ(Candle Night @ Shinjuku)
- 10. 【L1、L2】ブラウザでWorkerを動かしてみる（基本編）
- 11. frontendな会のレポート
- 12. JUCEとCHOCを組み合わせてオーディオプラグインのGUIをWeb技術で作ろう -補足情報-
- 13. 小中高生向けロボコンWROの得点集計システムを決勝大会まで持ち込んだお話【WRO Scoring System】
- 14. p5.jsで作る動くテキストアニメーション
- 15. WebStorm はもっと流行っていいと思う
- 16. Next.jsで実現するオニオンアーキテクチャ (5) – Presentation
- 17. タスクシステムで始めるカジュアルゲーム開発
- 18. 実際に使った「ライブ配信サイトでも作ってみない？」3日目
- 19. 実際に使った「ライブ配信サイトでも作ってみない？」2日目
- 20. 実際に使った「ライブ配信サイトでも作ってみない？」1日目
UMD版Hexabase JavaScript SDKを使って認証を行う
[Hexabase（ヘキサベース）](https://www.hexabase.com/)は企業においても安心して利用できるBaaS（Backend as a Service）を提供しています。多くのBaaSがそうであるように、主にフロントエンド開発者に利用してもらいたいと考えています。そこで現在、TypeScript SDKの開発が進められています。
元々TypeScriptで作られていることもあって、Next.jsやVue.jsなどでimportして利用することができます。しかし、もっと普通のWebアプリケーションなどで使う際には、CDN経由で利用したいと考える方もいるでしょう。そこで、UMD版Hexabase JavaScript SDKを作成しました。
今回は、そのUMD版Hexabase JavaScript SDKを使って認証を行うデモを紹介します。
## デモ
デモは以下で体験できます。
[
participant PlanetScaleDB as PlanetScaleDB
participant PlayWriteNodeJS as PlayWrite
participant TesseractJS as Tesseract.js
participant QiitaAPI as QiitaAPI
participant NtfySH as ntfy.sh
participant Smartphone as スマホRaspberryPi ->> NodeJS: Foreverでデーモン化
NodeJS ->> PlanetScaleDB: 各種データはオンライン保存
PlanetScaleDB –>> NodeJS: DB確認して処理済みなら再実行
Promiseでサブテーブルの特定行を非表示にする
はじめに
—
当方、kintoneを最近利用し始めまたばかりの初心者です。kintoneは、ノーコードで色々な業務ツールをクラウド上で作れて非常に優れモノだと感心していましたが、一般機能では実現できないことをJavaScriptでカスタマイズできることを知り、JavaScriptを碌に知りもしないくせに更に興味を持ち始めています。今回やりたかったことは、あるアプリ内に配置したサブテーブルに非表示チェックボックス列を置き、これをチェックすることでその行を非表示にしたいということです。
以下の**cybozu developer Community**のご解答を参考にさせていただき、解決に至るまでに得た知識を簡単にまとめてみました。https://community.cybozu.dev/t/topic/7729
解答反映前のコード
—
上記解答を反映させる前の動作しないコードは以下のとおりです。
今回対象のコントロールのフィールドコードは、サブテーブルが`documentInfo`、非表示チェックボックスが`isHidden`となります。デバッグ用の`console.l
【L1、L2】ブラウザでWorkerを動かしてみる（番外編）
## はじめに
2023年12月17日分のアドベントカレンダーの記事になります。
以下記事の続きになります。
【L1、L2】ブラウザでWorkerを動かしてみる（基本編）
https://qiita.com/k-kawashima/items/0bc4b862c0a91c2fdf99前回は、短いコードでWorkerを動作させてみました。
今回はこのワーカーを更に便利に動作させる為のモジュールであるworkerpoolを利用してみます。workerpool
https://www.npmjs.com/package/workerpoolworkerpoolってどんなモジュール？（ChatGPTに聞いてみた）
>Node.js のワーカープールを簡単に作成できるパッケージです。ワーカー内で実行する関数を指定し、非同期にタスクを実行できます。## この記事で分かること
* 専用ワーカーを使いやすくするwokerpoolモジュールの利用方法。（こちら番外編として別記事にして記載します）
## 準備
確認環境は前回の「【L1、L2】ブラウザでWorkerを動かしてみる（
スクラムをマーメイドにしてみた
# スクラムイベントをmermaid.js使って表現してみる
mermaid.js、たまに書いているけど全然慣れないのでそれっぽい図を作って供養しておくだけの投稿
## mermaid.js
Markdown上で図表を作成するツール。いわゆるUML関連でPlantUMLと同じ部類だという理解でよい気がします。
https://mermaid.js.org/intro/
GitHubでも63.8K付いているので人気ライブラリですね。
https://github.com/mermaid-js/mermaid
## 結果
なんかわかりにくくなった。
たぶんこういうのにはチャートは向いてないみたい。。。書き方かなあ。。。いい感じにかける人いたら教えてほしい。
“`
graph TD
2023年版キャンドルナイトプロダクト開発のあゆみ(Candle Night @ Shinjuku)
こんにちは！GxPのすぎもんです。
この記事は[グロースエクスパートナーズ Advent Calendar 2023](https://qiita.com/advent-calendar/2023/gxp) の25日目(最終日)の記事です。毎年恒例！Candle Night＠Shinjukuイベントのオンラインプロダクトチームが今年もAdvent Calendar 2023のトリを務めさせていただきます。
今年のプロダクトは、2023年版への画面デザイン刷新と新たに機能開発を行いました。
本記事では、
今年開発のプロダクト機能についての紹介や開発メンバーからの苦労話などをお伝えできればと思います。## **【チームメンバーと役割】**
– すぎもん：プロマネ(内外関係者との各種調整協議、仕様調整、プロダクト全体の検証/FB)
– ヨネ：デザイン担当(画面デザイン＋イベントチラシデザイン＋鑑賞モニターPOP装飾)
– オノ：デザイン担当(画面デザイン＋イベントチラシデザイン＋鑑賞モニターPOP装飾)
– とみー：開発メンバー（開発チームリーダー）
– オクガワ：開発メンバー（企
【L1、L2】ブラウザでWorkerを動かしてみる（基本編）
## はじめに
2023年12月14日分のアドベントカレンダーの記事になります。
こんにちは、マーズフラッグの川嶋です。
今更で恐縮ではありますが、Web Workerを動かしてみようと思います。
Web WorkerはJSの処理をメインスレッドとは別のスレッドでコードを実行できます。
IOバウンドの問題を解決するのにはasync/awaitの利用して非同期処理で実現することで解決してきましたが、CPUバウンドの問題はWeb Workerを利用しマルチスレッド処理を実現することで対応できるとのこと。弊社のフロントエンド開発でVue.jsを利用していおりますが、workerに処理を委譲したほうがよいようなシーンはまだありません。しかし、今後利用する機会もあるかもしれませんのでためしてみましょう！
最近はもっぱらバックエンドなんですけどね笑。Mozillaのドキュメントに記載のある通りworkerには３種類あり、今回は一番確認しやすい専用ワーカー (dedicated worker) を取り上げようと思います。
https://developer.mozilla.org/j
frontendな会のレポート
静岡某所にて、フロントエンドのコーダー５人が集まり、最近気になっていることなどを話してみました。
# `@container` を使っていきたいよね
https://developer.mozilla.org/en-US/docs/Web/CSS/@container
これ使っていきたいですね！！
ポイントで効くからコードの可読性も上がります。# hoverが可能か？をCSSだけで判定する
https://developer.mozilla.org/en-US/docs/Web/CSS/@media#media_features
これもですね。
pointer:fine と判定を組み合わせるハックも共有していただきました。https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer
~~こんな感じのmixin作って利用してるよ、とのこと。便利〜！~~ 週明けに再度検証して、記事を書いてくださいました。
https://qiita.com/ksk1015/items/9c67d6e0c7ec8742
JUCEとCHOCを組み合わせてオーディオプラグインのGUIをWeb技術で作ろう -補足情報-
本記事は[JUCE Advent Calendar 2023](https://qiita.com/advent-calendar/2023/juce) の12月25日向けに投稿した記事です。
本記事は、12月16日に投稿した記事 [“JUCEとCHOCを組み合わせてオーディオプラグインのGUIをWeb技術で作ろう”](https://qiita.com/COx2/items/430086a1a6f87fddbfb5) で伝えきれなかった情報を補足する記事になります。
—
# 前回の振り返り# 要約
https://github.com/COx2/audio-plugin-web-ui
JUCEとCHOCを組み合わせることで、オーディオプラグインのGUIをWeb技術で制作することができます。このアプローチは、複数の技術要素を組み合わせながらも、柔軟で効果的なGUIプロトタイピングを可能にします。
本記事では、筆者が作成した WebGain と DenoGain での実践を通じて、C++によるネイティブ向けのオーディオプラグイン、オーディオアプリケーションの開発にWeb
小中高生向けロボコンWROの得点集計システムを決勝大会まで持ち込んだお話【WRO Scoring System】
# 目次
| 章 | タイトル | 内容 |
|:-:|:-:|:-:|
| 1 | [はじめに](#1-はじめに) | 自己紹介および本記事について |
| 2 | [WROとは?](#2-wroとは) | WROについての説明 |
| 3 | [昨年のシステム](#3-昨年のシステム) | 昨年のシステムのおさらいとメリット・デメリット |
| 4 | [システム要件](#4-システム要件) | システムに必要な事項のまとめ |
| 5 | [完成したシステム](#5-完成したシステム) | スクショを交えながらシステムを紹介 |
| 6 | [今年の開発過程](#6-今年の開発過程) | 時系列に沿ってシステムの開発過程を記します |
| 7 | [ハマったところ](#7-ハマったところ) | 開発中に躓いた点のまとめ |
| 8 | [今後の方針](#8-今後の方針) | 来年以降の方針について |:::note warn
本記事は長編記事ですので、是非**いいね・ストック**等して頂き、時間のあるときにゆっくりお読みください!!
:::# 1. はじめに
改めまし
p5.jsで作る動くテキストアニメーション
# はじめに
みなさんこんにちは。
突然ですが、テキストアニメーションってよく使いませんか？
でも、よく使う割にはフェードさせたり、上から下に動かすパターンしかなく似たり寄ったりのテキストアニメーションになってしまう。。こんな風に思ったこと、ありませんか？
私もそう思って色々と調べていたらp5.jsを使用したリッチなアニメーションがあったので自分なりにアレンジしてご紹介したいと思います。
# p5.jsとは
p5.jsはProcessingというクリエイティブ表現のためのプログラミング言語（と開発環境）をJavaScriptに移植したライブラリーです。
特にクリエイティブ・コーディングや視覚芸術の分野で非常に人気があり、初学者からプロまで幅広いユーザー層に利用されています。
公式サイトは[こちら](https://p5js.org/)# サンプル
WebStorm はもっと流行っていいと思う
この記事は、[Progate Path コミュニティ Advent Calendar 2023](https://qiita.com/advent-calendar/2023/progate-path) の 25 日目の記事です。
はじめまして。
普段は AI 機能を搭載した WEB アプリの開発をしています。# WebStormとは
主に WEB アプリケーションを開発する際に使う IDE (統合開発環境)です。
一般的に、 WEB アプリを開発する際に使用するツールは VSCode かと思います。
WebStorm は平たく言うと、 VSCode に機能をもりもり搭載したやつです。公式では以下のように紹介されています。
> 最もスマートな JavaScript IDE
WebStorm は JavaScript と関連テクノロジー向けの統合開発環境です。ほかの JetBrains IDE と同様に、日常業務を自動化して複雑なタスクを簡単に処理できるようにするため、より楽しい開発エクスペリエンスを得ることができます。引用: [JetBrains による最もスマートな
Next.jsで実現するオニオンアーキテクチャ (5) – Presentation
:::note warn
記事におけるNext.jsは、v13以降のApp Router （Server Components）を用いる前提での説明となります。
Pages Routerを用いている場合は、適宜Pages Routerでの書き方として読み替えてください。
:::## この記事は何
最近Next.jsでウェブアプリケーションを作ることが多いのですが、
その時にオニオンアーキテクチャを採用してアプリケーションを作ることが多く、型も固まってきたので数回の記事にわたり紹介をしていきたいと思っています。前回は
https://qiita.com/getty104/items/968434a5a37f03975735
でInfrastructureについて紹介しました。
今回は`app`ディレクトリ内で実装していくPresentaionについて説明をしていきます。
## Presentationとは
Presentationとは、レイヤーとしては 最も外側に位置し、ユーザーとのインテラクションをとるレイヤーになります。
このレイヤーでは、以下のようなことを行なってい
タスクシステムで始めるカジュアルゲーム開発
こんにちわ。ジークスで開発をしている酒井といいます。
ゲームを作るのが好きで、たまに初心者の人を集めて一緒にゲームを作る活動をしています。
みんな最初はモチベーション高いんですが、環境構築やツールの設定とか、準備が色々必要だと、その間に疲れてきちゃうので、始めてすぐにゲームの動きをいじれるようなライブラリを作って試しています。
# 開発環境
今日はCodePenに環境を用意しました。
ここをいじって、だんだんゲームっぽくしていきます。# 実際に配信をしてみよう
配信を行うには`me`に対して`publish()`というメソッドを実行する必要があります。
これを実行することで、ルーム内の自分のユーザーが配信を始めます。“`js
document.getElementById(“stream”).onclick = async () => {…
const me = await room.join();
userIdDisplay.innerText = me.id;await me.publish(video); // 映像を配信
await me.publish(audio); // 音声を配信
}
“`何とこの2行だけで映像と音声を配信できてしまいます。
最後に、この`init`関数をページが読み込まれた時に実行するようにしておきましょう。
jsファイルの最後の方に以下のように書いておきます。“`js
const init = async () => { … };window.onload = init;
“`何とこれだけで
実際に使った「ライブ配信サイトでも作ってみない？」2日目
# まずは簡単なページを作成
“`html:stream.html
ライブ配信
UserID:
ルームID:
