福野泰介の一日一創

福井県立高志中学校2年生、90名向けにミニITブートキャンプ！
IchigoJam webを使ってプログラミングの基本と、HTMLとウェブアプリへステップアップ。AI支援のアプリづくりを体験してもらいました！

3クラス90名！

プログラミングはじめはLED1！

エルチカ、かわくだりゲームを解説しながらみんなで体験。10分の休み時間中もみんな熱中！

つづいて、ウェブアプリ開発入門。作ったアプリをみんなで見せあい！
AI支援でエブリバディ一日一創！

高志中の生徒が考案したお米を使ったドリング！
企画力、実行力、スゴイ！ノンカフェインでおいしい、しかも、米農家支援！
（参考、ＪＡ福井県・ハイピース社と清涼飲料水「お米のしずく」を共同開発しました！！ | 福井県立高志高等学校 高志中学校、お米のしずく(米茶)＿福井県産　350ml×24本: 越前わかさ味浪漫|【ＪＡタウン】産地直送　通販　お取り寄せ、米の消費拡大へ、高志高生が導き出した答えとは…JAと共同で米茶開発販売　口当たりすっきり、香ばしく | 経済,学校・教育 | 福井のニュース | 福井新聞Ｄ刊）

つづいて、福井高専祭、4EIの露店！

福井高専放送メディア研究会のおにぎり屋さん！

お品書き

「おにぎり合計金額計算」 src on ss.sabae.cc
せっかくなので、AIにお願いして、計算アプリ！

最後は、40回目のサイバーフライデー！

3Dプリンターによる作品！
かわいい幾何学オブジェクトのプリント大成功！
使っているプリンター、最安29,800円で買える、ブラックフライデーセール中！
（参考、【史上最安‼最大44％OFF】Bambu Lab ブラックフライデーセール開催中 | Bambu Lab ストア）

発表、福井でeスポーツ事業部始動！

福井から未踏へチャレンジしよう！

Go言語でゲーム！

紫金山・アトラス彗星が見えた！

1000度のマグマ実験！？

福井で探求をつなぐポータルサイトの開発、ぜひ参加したい！

3Dディスプレイ、ルッキンググラス（LookingGlassGo）

スイーツに、ちありさんのチャーリーマーガレットにて

かわいい、次世代和菓子！

サイフラ、次回は福井市ヨリバにて開催！

久しく触って来なかったメール関係。システムから送信したくなったので、サービスやAPIなどを探したところ、比較的あっさりGmailで受信できるメールが送信できました！

まず、準備として送信元ドメインを振った、Ubuntuサーバーに「【入門】Postfixとは？メールサーバー構築方法と基本設定 - カゴヤのサーバー研究室」を参考にPostfixをインストールと設定します。割とあっさり5分ほどでできました。sasl2-binのSTART=yesは現在は不要になったようです。

これで sendmail コマンドでメールが送信できるようになります。

sudo echo -e 'Subject: test\n\ntest mail' | sendmail -f from@fromdomain to@todomain

-f を使って送信者を指定しないとGmail側で怪しいメールだと表示されてしまいます。

日本語でタイトルや本文を送る場合は一工夫必要なので、「シェルスクリプトでメール送信、「さようならnkf」編 #ShellScript - Qiita」を参考にDenoで日本語対応のコマンドを作りました。

「code4fukui/mail-sender」
コマンドラインから使えるコマンドと、サーバーサイドでimportして使えるAPIができました！Deno2に対応した、Deno.Commandとstdinを使った実装です。

やった、これでメール送り放題！

出力されたテキストデータなどをコピーして使ってほしいとき、JavaScriptでクリップボードの制御が可能です。（参考、Navigator: clipboard プロパティ - Web API | MDN）

「button-copy」
指定エレメントの値をコピーするボタンをJavaScriptを1行も書かずHTMLだけで実現することが、カスタム要素を使ってHTMLを拡張できます。ハイフン付きのタグ名は、カスタム要素用に予約されています。

「GitHub - code4fukui/button-copy」
実装も簡単なので、いろんなカスタム要素、HTML拡張タグを作ってみましょう！ export class ButtonCopy extends HTMLElement { constructor() { super(); const btn = document.createElement("button"); btn.textContent = this.textContent; this.textContent = ""; this.appendChild(btn); btn.onclick = async () => { const target = this.getAttribute("target"); const inp = document.getElementById(target); inp.select(); inp.setSelectionRange(0, 99999); // for mobile try { await navigator.clipboard.writeText(inp.value); } catch (e) { console.log(e); alert("コピーに失敗しました。" + e); } }; } }; customElements.define("button-copy", ButtonCopy); extends HTMLElement で、継承したクラスを作って、customElements.defineでハイフン付きの拡張HTMLタグ名とクラスを関連付けるのがポイントです。

サーバーが気軽に使えるとものづくりの幅がぐっと広がり楽しくなります！

こちら、Deno2.0対応のアクセス元のIPアドレスを記録するウェブサービスのJavaScriptプログラム。 import { fetchWeb } from "https://code4fukui.github.io/wsutil/fetchWeb.js"; import { DateTime } from "https://js.sabae.cc/DateTime.js"; export default fetchWeb(async (param, req, path, conninfo) => { const remoteAddr = conninfo.remoteAddr.hostname; console.log(remoteAddr); await Deno.writeTextFile("remoteAddr.txt", new DateTime().toString() + "," + remoteAddr + "\n", { append: true }); return { response: "OK", path, param, remoteAddr }; }); Deno2.0からの新設コマンド、マルチプロセッサ対応のウェブアプリケーションサービス、deno serveコマンドに対応した、staticフォルダにあるものを静的コンテンツとして扱い、apiフォルダをAPIとして処理する、fetchWebを使って、IPアドレスだけを表示し、日時と共に記録するサービスを実装しました。

deno serve コマンドで起動し、起動ホスト + /api/ にアクセスしてチェックできます。

自分のIPアドレス、確認してみたいときに使えます！

「code4fukui/ip-checker」

links
- 祝リリース、Deno2.0! ウェブサーバー記述の新スタイルに対応wsutil、windowとglobalとglobalThisのヒミツ