Onsen UI＋Alpine.js を使ってみた
# はじめに
いわゆるウェブアプリを作るのに自分は Vue.js を使っています。
[Onsen UI＋Vue.js を使ってみた – Qiita](https://qiita.com/tinymouse/items/82cce234e4b6fc0f17c7)
友人に Alpine.js を紹介されました。よさそうなので使ってみることにします。
# Onsen UI とは
Onsen UI は、HTML5 モバイルアプリ開発用のオープンソースの UI フレームワークおよびコンポーネントです。独自の HTML タグを記述してモバイルアプリの画面を作ることができます。
[Onsen UI 2: HTML5モバイルアプリを速く、美しく – Onsen UI](https://ja.onsen.io/)
# Alpine.js とは
Alpine.js は、新しい、軽量の JavaScript フレームワークです。Vue.js と同様のディレクティブが用意されています。コンポーネントは作れませんが、そのために学習しやすくなっています。
[Alpine.js](https://
## はじめに
Reactで引っかかった箇所を深掘りしたら、JavaScriptの基礎知識のなさであることに気がつきました。調べて試したことをまとめます。
## 結論
お急ぎの方のために結論から書きます。
タイトル通り、ドット記法ではプロパティ名に変数を指定すると`undefined`になります。
ブラケット記法にすれば正しくプロパティの値を参照できます。
“`javascript
const person = {
firstname:’Taro’,
lastname:’Yamada’
};
const hoge = “firstname”;
console.log(person.hoge); // undefined
console.log(person[hoge]); // “Taro”
“`
## 問題
ここからは、今回直面した問題について書いておきます。Reactのコードになります。
[Reactチュートリアル](https://ja.react.dev/learn/conditional-rendering#challenges)のチャレンジ問題を
久々にPuppeteerを使おうとしてプログラムを動かそうとしたらWarningで怒られました。
> 
## こんな感じで解消できます。
Node.js 21.2.0です。`headless: ‘new’`をつけて起動します。
“`js
const puppeteer = require(‘puppeteer’);
// import puppeteer from ‘puppeteer’;
(async () => {
const browser = await puppeteer.launch({
headless: ‘new’,
});
const page =
# 自己紹介
はじめましての人は初めまして。お久しぶりの方はお久しぶりです。
…あれこれ昨日もやった？
# タグを紹介していこう
この記事を書いてるときはあまりにも眠すぎて早く寝たい精神で書いているので、ただただタグを羅列しておきます。
「こんなタグがあるんだな～」って覚えておけば将来役に立ちます…たぶん。
タグの中にはちょっとした種類分けがあります。
今回は私の勝手な区分で「区分けをするタグ」「本文じゃないタグ」「コンテンツタグ」「インラインタグ」に分けさせて頂きます。
# 区分けをするタグ
## ``
これは、この中の内容がHTMLだよ！っていうことを示すタグです。
確かにいらないといえばいらないのですが、これは暗黙の了解としてちゃんと書いておきましょう。
“`html
ここがHTMLだよ
“`
## `
`
これは、この中の内容は本文というよりかはそのページの情報だったりとかが書いてあるところであると示すタグです。
「本文じゃないタグ」の多くはこの`head`の中に書き
:::note info
※ [Qiita の完走賞をゲットするための条件は「複数カレンダーに投稿した記事が合計25」です](https://twitter.com/Qiita/status/1593441648796524545)
:::
この記事は、「[完走賞ゲットのため小ネタ 25記事を投稿しようとチャレンジ v2 Advent Calendar 2023](https://qiita.com/advent-calendar/2023/youtoy)」の 2日目の記事です。
## 今回の内容
今回の記事の内容は、2年前くらいに途中まで調べていた「色の距離」に関する話です。
以前、色の距離について調べていた時がありました。色の距離の話の中でも、特に「人の知覚特性を考慮した色の距離」についてです。
それに関して、当時、以下のようなポストをしていました。
当時、
Vercel といえば Next.js なので、 Node.js を動かすものというイメージがあります。
ですが、Vercel では Node.js 以外のアプリケーションもデプロイすることができます。
想像以上に簡単にデプロイできて、すごかったです :hushed:
## 公式が対応しているランタイム
Vercel は以下のランタイムに対応しています。
– Node.js
– Edge
– Go
– Python
– Ruby
## コミュニティ・ランタイム
公式がサポートしているランタイムとは別に、ユーザが作成したコミュニティ・ランタイムも存在します。コミュニティ・ランタイムには、以下のランタイムがあります。
– Bash
– Deno
– PHP
– Rust
– Bun
コミュニティ・ランタイムは、GitHub の [Vercel Community](https://github.com/vercel-community) リポジトリで管理されているようです。
## ランタイムの比較
基本的に、サーバレスなアプリケーションを構築をする場合には No
私はPCで作業しているとき、バックグラウンドで音楽を再生していることがよくある。このときに再生する曲は、アルバムCDからインポートしたオーディオメディアのときもあれば、YouTubeの動画だったりとさまざまだ。メディアの再生環境のバリエーションが多様なため、ローカルのオーディオソースを再生する場合はPCにインストールされているメディア・プレイヤーを使い、YouTubeの動画の場合はブラウザからアクセスしている。それはいたって一般的な方法ではあるのだが、PC上のメディアとお気に入りのYouTube動画を別々にしか取り扱えない不自由さには常々不満があった。
──両方のメディアを一元管理して、プレイヤーを切り替えることなく再生できればなぁ──
この要望を満たすソリューションは既に世の中にはいくつか存在している。それは例えば「CherryPlayer」とか「FreeTube」などだ。ただ、前者はWindowsでしか使えないうえ、私のPCでは挙動が安定せずエラーが頻発して使いものにならなかった。一方、後者はインストールしてみたもののUIが煩雑でとても使いづらく、これも継続的に使い続けるのに
今現在(2023-08-01)raspbian はbullseyeベースなのでaptでnodejsをインストールするとnodejs12が入ります。
ただ、zenn-cliがnodejs12以下はサポート切ってたりで、bullseyeのnpmからzenn-cliをインストールしようとすると怒られます。一応zenn-cliは入りますが、警告だが、非推奨だかのメッセージが出ます。
よってraspberry piからapt->npm->zenn-cliという感じに怒られずにええ感じにインストールできない。
単純にnodejs関連のパッケージだけstable bookwormのレポジトリを向くようにしてもいいですが、それでも最新のLTSでないし、どうせ最新のLTS使わないならまあせっかく?なんでビルドしましょうと思ってやってみました。
## 前提条件
github cliインストール済み
tmuxインストール済み。
sysstatインストール済み（統計取るのに必須。特に取るつもりがないなら不要）。
## ソースコードの準備
“`bash
# gh repo clone用のディレクトリ
– freecodecampのBasic JavaScriptを終えました。
progateやdotinstallなどで、JavaScriptを勉強していましたが、今回はfreecodecampで復習してみました。
freecodecampはyoutubeとウェブサイトで、無料でプログラミングを勉強することができます。次はJavaScriptでゲームを作る講座を観てみようと思っています。
– 現在は、学ぶ意欲さえあれば、無料で学べる教材があちこちに落ちています。
Learning is the process of change of behavior or an increase in knowledge.とITF Academyのウェブサイトにありました。
興味のあるものを次々学び、change of behaviorしたいと思います。
オススメの無料学習サイトfreecodecamp
# はじめに
初めまして！
私は現在Webエンジニアとして長期インターンをさせていただいています
この夏に長期インターンに４社ほど行かせて頂きました
そんな僕が参考にした、**これからフロントエンドを触る人にはぜひ受講してほしい講座をご紹介します！**
# おすすめUdemy講座
ここではReactを勉強するにあたって段階を踏んで理解をするための講座紹介をします！
### 講師：[じゃけぇ](https://www.udemy.com/user/huriransuziyakee/) さん
## Step.1 初めに受講するべき講座
https://www.udemy.com/course/modern_javascipt_react_beginner/
### Reactを初めて勉強する人の入門コース！
コース概要
を使っていたのを思い出したので少し自分でもやってみようと思い作ってみました。
# 2.環境
windows 10
VScode
plotly(グラフ描画)
# 3.プログラム
“`html:HTML
数式グラフ化
Elysia には Swaggerプラグインがあります。Swagger は、APIを設計・ドキュメント化するためのツールですが、Elysia なら簡単に実装できます。
昔は、API を作った上にその使い方をもくもくと泣きながらドキュメントに仕上げたものですが、今は Swagger 一発で書けるうえに、万が一(?) API の仕様などが変わっても簡単に書き換えられるわけです。有難いです。
で、Swaggerプラグインのサイトはここです。
https://elysiajs.com/plugins/swagger.html
では、ここの最初のサンプルを試してみましょう。
“`sh:Swaggerインストール
$ bun add @elysiajs/swagger
“`
“`js:Swagger用スクリプト swgr-1.js
import { Elysia } from ‘elysia’
import { swagger } from ‘@elysiajs/swagger’
new Elysia()
.use(swagger())
.get(‘/’, ()
# 0. はじめに
会社の e-learning が面倒だ。ブラウザで数十枚のスライドを見た後でテストがあるので，スライドを飛ばして見ると後で後悔する。以前は，自作のプログラムでブラウザ画面をキャプチャしていたのだが，Windows10 以降キャプチャできなくなった。FireFox の画面はキャプチャできるけど Edge の画面はできないので，Edge は GPU を使ってるとか何とかのせいだろう・・・
ところが世の中には WebDriver というものがあることを知った。おそらく一般的な用途としてはブラウザ操作の自動化だと思うが，その中にブラウザ画面のスクリーンショットを取る機能があることを知り，これは使えないかと思った次第である。
# 1. 基本方針
対象ブラウザは Edge（Chromium版）である。Edge 用の WebDriver（msedgedriver）はマイクロソフト社謹製なので会社でも使えるが，Selenium は使用不可。なので WebDriver を直接操作しなくてはならない。
WebDriver とのデータのやり取りは JSON 形式で行われるので，J
## １. イントロダクション
この記事は、最新の「OpenAI が提供する `GPT-4V API` で画像の解析評価」と「Cloudflare の Workers、KV、R2 でのサーバレス環境」について取り扱った記事になります。
`GPT-4V API` での開発事例の一つとして、参考にしていただければ幸いです。
## ２. どんな web アプリか
https://art-zessan.std9.jp/
1. **ユーザーが絵を描いて投稿する**
こんにちは、皆さんも相席食堂の **ちょっと待てぃ!!ボタンで動画を止めたい**って思うことありますよね？
こんな感じのものを作ってみました。動画みてね☆
vue3でとあるフォームを作成。
同意するボタンにチェックが入力された時に送信できる。
## やりたいこと
フォームを表示するときに、デフォルトで送信ボタンを非活性（グレーアウト）したい。
同意するにチェックを入れた時に送信ボタンを活性（グレーアウト解除）にする。
CSSで初期値として送信ボタンをグレーアウトするは、別の制御の関係で避けたい。
## まず思いついたこと。
vueのライフサイクルを考慮して、mountedで送信ボタンをグレーアウトするようにすればいいのでは？
“`vuejs
同意する
