皆さんこんにちは。奥谷です。 去る 2024 年 8 月 22 日に Deno 1.46 がリリースされました。 このリリースでは、短縮されたパーミッションのフラグやCLIの改善、マルチスレッドWebサーバー、deno fmt がHTML、CSS、YAML他のサポートを追加など、多くの新機能が追加されました。 気になるところを中心に紹介します。 Deno 1.46 Deno 1.46 での変更事項をDeno 1.46 リリースノートを元に確認します。 もっとシンプルなCLI 短い呼び出し このリリースで、deno run [ファイル名] を deno [ファイル名] に短縮できるようになりました。 $ deno init $ ls deno.json main.ts main_test.ts $ deno run main.ts Add 2 + 3 = 5 $ deno main.ts A

皆様、夏をいかがお過ごしでしょうか？ 奥谷です。 本記事は虎の穴ラボ2024年夏の連載ブログ 13日目の記事です。 前回は、godanさんによる「刺繍ミシンで日本語を刺繍しよう」でした。 次回は、m.mさんによる「画像ファイルをまとめてWebPに変換しよう！」が投稿予定です。 今回は、Babylon.js と Hono と Fresh とDeno を使って、3D モデリングツールを作ってみました。 https://pile-up.deno.dev/ にアクセスして、遊べます。 pile-up.deno.dev とりあえずソースコードを全部見たい！という方は、こちらからどうぞ。 github.com 3D モデリングツール 『Pile-Up』 今回の3Dモデリングツールは、Babylon.jsが提供するCSG（Constructive Solid Geometry）を3Dモデルを構築します。

皆さんこんにちは、ブラックフライデーにちょっといいまくらを買いました。おっくんです。 本記事は 虎の穴ラボ Advent Calendar 2023 とDenoのカレンダー | Advent Calendar 2023 - Qiitaの 6日目の記事です。 次回は H.Hさんの「『Whisperを使用した音声ファイルの文字起こしの検証してみた」です。 ご期待ください！ Deno向けWebフレームワークFreshには、プラグイン機能があります。 プラグインを使うことで、アプリケーション本体への煩雑な改修を避けつつ、ミドルウェアやルートを機能拡張する事ができます。 今回は、Freshに認証機能を一旦は直接組み込み、後にプラグインに切り出す一連の流れを紹介します。 参考 Fresh https://fresh.deno.dev/ Lucia https://lucia-auth.com/ luc

みなさんこんにちは、Deno Fest 運営です。 10月20日 Deno のお祭り 『 Deno Fest(ディノフェス) 』を開催することになりました。 今回はこのイベントについてご紹介をさせていただきます。 Deno Fest(ディノフェス) どんなイベント ? 主催者メッセージとして以下のメッセージを掲げさせていただきました。 Deno Festは、JavaScript、TypeScript、および WebAssembly ランタイム Deno のお祭りです。 Deno.land inc CEO の Ryan Dahl さんを筆頭に、有名スピーカーの登壇を多数予定しています。 ぜひ Deno の今を楽しんでください。 虎の穴ラボでは、2021年8月から、「Deno にまつわることであれば特に縛りがないLT会」として『toranoana.deno』を開催してきました。 yumenos

皆さん夏をいかがお過ごしですか？、おっくんです。 本記事は2023 夏のブログ連載企画16日目の記事になります。 7月14日は、y.fさんの「【ChatGPT】フレームワークの移行を試してみた！〜コード変換の実践〜」でした。 toranoana-lab.hatenablog.com 明日は、後藤さんの「画像から取得したImageData オブジェクトで花火を描画してみた」になります。ご期待ください！ 最近「レンガの積み方」について調べていたのですが、レンガには「フランス積み」や「イギリス積み」など名前が付いた様々な積み方がある事を知りました。 こうなると興味が湧いてくるのはそれぞれの積み方による強度です。 いくつか見比べたウェブサイト中で、イギリス積みの強度が高いという記述を見つけました。 が、書いてあると試してみたくなるのが人の性。 しかし、別にリアルでレンガを積みたいわけでもないので、

皆さん、こんにちは。おっくんです。 今回は、「Deno で掲示板サイトを作ろう！ with upstash & supabase」企画の 6 回目として、Twitter 連携機能を組み立てます。 (記事作成の途上でTwitter連携機能に関する状況が変わってきていますが、OAuth連携およびログインを使うアプリの実装方針としてご参考ください。2023年4月10日時点で動作確認済みです。) 前回記事はこちら toranoana-lab.hatenablog.com 実装方針 Twitter 連携機能は、Twitter Developer Platform のドキュメントにある、OAuth 1.0a に対応し、3-legged OAuth flow を使用し導入します。 developer.twitter.com こう書くとピンと来ないかもしれませんが、いわゆる「Twitterで認証」ボタンを

皆さん、こんにちは。 冷蔵庫を買い換えました。以前より容量を倍にしたら部屋での存在感がすごいです。おっくんです。 今回は、「Deno で掲示板サイトを作ろう！ with upstash & supabase」企画の 5回目として、upstash QStash を使用したスケジュール実行処理を組み立てます。 前回記事はこちら toranoana-lab.hatenablog.com upstash QStash の導入 前回記事では、upstash redis を導入しました。 こちらは upstash.inc が展開している「サーバーレスで」「お安く」「上限有り(MAX160$)の従量課金」で使える Redis でした。 upstash では、Redis 以外にサーバーレスおよびエッジランタイム向けのメッセージング/スケジューリングソリューションのQStash も展開しています。 この Q

皆さん、こんにちは。 年末最後の大きなお買い物は布団乾燥機でした。おっくんです。 今回は、「Deno で掲示板サイトを作ろう！ with upstash & supabase」企画の 3 回目として、前回に引き続き掲示板への投稿の登録本体の実装を行うとともに、バリデーションとサニタイズを導入します。 前回記事はこちら toranoana-lab.hatenablog.com 実装 掲示板の詳細を作る ダイナミックルーティング導入 現在、掲示板のトピックの登録と一覧の表示ができています。 このページからのリンク先として、投稿一覧を作成します。 Fresh は、routes 以下にファイルを作っていくことでルーティングが作成されます。 また、[pageId].tsx のような名前でファイルを作っていくことでダイナミックルーティングが使用できます。 これから作るのは、掲示板のトピックに紐づいたペ

本記事は虎の穴ラボAdvent Calendar 2022-Qiita、Deno Advent Calendar 2022の15日目の記事です。 14日目は虎の穴ラボ デザインチーム による「デザインチームが自ら企画＆開発に挑戦？！クリエイター向け新サービス「デジタルサインカード」をつくってみた」が投稿されました。 皆さん、こんにちは。 先日一目惚れしたので、約15年ぶりに箱でLEGOを買いました。おっくんです。 今回は、Deno 向け Web フレームワーク Freshを基盤に、Cloudflare Images と 虎の穴ラボから公開している画像ビューア― のOSS Tora Viewer を使って簡単な画像投稿サイトを作ります。 動いているものは次のようになります。 この記事で取り扱うのは、大きくは3つの機能です。 Fresh で画像アップロードする 画像一覧表示と、Tora Vie

本記事は「WebAssembly連載」の第2回目の記事です。 皆さんこんにちは。虎の穴ラボのY.Fです。 結構昔の記事ですが、以下のような記事を出していました。 toranoana-lab.hatenablog.com この記事では、WebAssemblyでブロック崩しを作ることを主眼に、各ツールの紹介や、実装の紹介をしてきました。 一方で、具体的によりWeb周りのAPIをWebAssemblyからどのように扱うかについては紹介していなかったと思うので、今回の記事では、改めてまとめてみようと思います。 利用技術 Rust 1.65.0 wasm-bindgen 最新版 JavaScriptとRust(WebAssembly)とのデータ等のやり取りを簡単にしてくれるクレート(ライブラリ) web-sys最新版 RustからDOM APIを呼び出すためのライブラリ wasm-pack 最新版

皆さん、こんにちは。 自宅では、トラドラオニタイジン極がご本尊みたいになっています。おっくんです。 今回は、「Deno で掲示板サイトを作ろう！ with upstash & supabase」企画の2回目として、掲示板の登録と参照の実装を進めていきます。 今回の実装で、次のように、掲示板の登録ができるようになります。 前回記事はこちら toranoana-lab.hatenablog.com 訂正 始めに、第1回で取り扱った環境変数の取り扱いについて、一部訂正をさせていただきます。 第1回に紹介した、以下のdotenvの実装がありました。 [anonymous-board/util/config.ts] import { config } from "dotenv/mod.ts"; export const envConfig = await config({ safe: true })

こんにちは。虎の穴ラボのはっとりです。 ブラウザ用漫画ビューアーライブラリ 「 ToraViewer 」 を公開したので紹介したいと思います。 www.npmjs.com github.com はじめに この記事では、ToraViewerの利用方法とToraViewerが利用している技術についてを紹介していきます。 ToraViewerで何ができるのか ToraViewerは漫画や写真集などの画像一覧を電子書籍のような形式で閲覧できるライブラリです。 デモページから実際の動作を確認することができます。 Tora Viewer デモ ToraViewerデモ 画面サイズにより自動的に1ページ表示と見開き表示が切り替わります。 また、利用ユーザーが歯車ボタンから任意のスタイルに変更できます。 ToraViewerの使い方 まずはインストールします。 npm i @toralab/tora-vi

皆さんこんにちは、「ぼっち・ざ・ろっく」の PV にやられました。期待しか有りません。 おっくんです。 今回の投稿から、「Deno で掲示板サイトを作ろう！ with upstash & supabase」 と題して、数回に分けて必要な要素を分解しながら、実際に匿名掲示板のリリースを進めていきます。 最初に計画 この連載では、次のような副題を掲げて段階を踏みながら、最後は匿名掲示板を実際にデプロイすることを目標にします。 環境構築と、簡単なアプリケーション(☆ 今回 ☆) 機能の実装とテスト デプロイと自動化 Upstash の導入 調整と公開 作成するもの タイトルで出していますが、この連載では Deno で匿名掲示板を作ります。 紹介したいサービスを使うことと、なるべくメンテナンスフリーにすることを目的として以下の機能を盛り込んでいく予定です。 いわゆる匿名掲示板を作ります 閲覧は自由

虎の穴ラボおっくんです。暑い夏、いかがお過ごしでしょうか？ この記事は、虎の穴ラボ 夏のアドベントカレンダーの14日目の記事です。 今回のアドベントカレンダーも引き続き「見た目でわかるビジュアルネタ5連発」の第4弾となります。 13日目は、A.M.さんによる「【Go言語】アスキーアートでダンジョンから脱出するゲームを作ってみた」が投稿されました。 15日目は、Mさんによるビジュアルネタ「🔴サーバーにエラーが起きた時にVSCodeを真っ赤にしよう🔴」が公開されますこちらも御覧ください。 発端 去る 2022 年 5 月 11 日 Google I/O で、Geospatial API という位置情報を使用した AR に利用する API が公開されました。 しかしながら ARcore 向けの API なので Chrome で扱えるものではないわけです。 悔しい実に悔しいので、ブラウザででき

こんにちは。虎の穴ラボのはっとりです。 この記事は「虎の穴ラボ夏のアドベントカレンダー」12日目の記事です。 11日目は大場さんによる「babylon.js でスイカ割れないゲームを作った」が投稿されました。 13日目はA.M.さんによる「【Go言語】アスキーアートでダンジョンから脱出するゲームを作ってみた」が投稿されます。こちらもぜひご覧ください。 はじめに 今回はブラウザで使えるWeb APIの中からObserverと名前が付くAPIを紹介します。 ※タイトルではObserver APIと言いましたが特にそういう括りの名称があるわけではありません。 Observerは、観察者、観測者、監視者といった意味があります。 紹介するAPIは名前の通り、ブラウザ内の何らかの変化を検出することができるAPIです。 紹介するAPI IntersectionObserver ResizeObserve

こんにちは。虎の穴ラボの大場です。 この記事は「虎の穴ラボ夏のアドベントカレンダー」11日目の記事です。 10日目は磯江さんによる「アジャイルで生活習慣をカイゼンする」が投稿されました。 12日目ははっとりさんによる「いろいろなObserver APIの紹介」が投稿されます。こちらもぜひご覧ください。 はじめに babylon.js は、Microsoftが開発したJavaScriptで3D表現ができるライブラリです。 www.babylonjs.com 今回は、ブラウザで3D表現ができる babylon.js を使い遊んでいたところ、スイカ割れないゲームが爆誕してしまったので、babylon.js の紹介と実装を解説致します。 触ろうと思ったきっかけ connpassで日本コミュニティが開催しているイベントを偶然お見かけし、そこで babylon.js の存在を知り興味を持ちました。ba

こんにちは！ 虎の穴ラボのS.Sです。 2022年4月にLambdaに新しくLambda関数URLの機能がリリースされました。 早速試したいと思い、この新機能であるLambda関数URL を使ってSlackアプリを開発してみました。 目次 目次 はじめに Slack アプリの新規作成 Lambdaの関数を作成 Lambdaの関数URLの作成 SlackアプリからLambda関数URLにアクセスする Slackのチャンネルに書き込みがあった際のイベント設定 Webhook URLの取得 Slackの発言内容に応じてLambdaで自動返答させる おわりに P.S. はじめに まずはじめに今回作成するSlackアプリの内容ですが、特定のチャンネルにて「退勤します」と発言したら、それを検知して「お疲れ様でした」と自動で返答してくれるアプリを作成します。 特定のチャンネルにて発言があったらSlack

皆様こんにちは、ゆっくり不動産でお部屋を眺めながら引っ越しを検討しています。おっくんです。 虎の穴ラボ Advent Calendar 2021 - Qiitaの18日目の記事です。 qiita.com 17日目は、H.HさんによるGithubActionsでLambdaのテストからデプロイまでを自動化した話でした。 こちらもぜひご覧ください。 今回は、Deno 環境で動作する Web アプリケーションフレームワーク Ultra を紹介します。 github.com Ultra は、開発者が特に設定を行うことなく React のサーバーサイドレンダリングが動作するフレームワークです。 examples に用意されたものがあるので導入として触り、Web APIとの連携方法まで紹介します。 実行環境 Deno 1.16.3 examples から紹介 導入方法が紹介されているので、この通り実行

この記事は虎の穴ラボ Advent Calendar 2021の15日目の記事です。 14日目：磯江さんの「Deno環境のTypeScriptでRubyプログラミング問題を解く」の記事はこちら。 toranoana-lab.hatenablog.com 16日目はM.Mさんのデザインフォントの記事を予定しています。 みなさんこんにちは。虎の穴ラボのNSSです。 先日「Next.js + TypeScript + AWS Amplify でアプリケーション開発」という記事を出したところ、 おかげさまでたくさんの方に読んでいただけました。 ありがとうございます。 toranoana-lab.hatenablog.com AWS Amplify関連のニュースとして、 先日AWS re:Invent 2021にて「AWS Amplify Studio」が発表されました。 早速新機能を使ってみたので

皆さんこんにちは、急に寒くなりましたね。おっくんです。 虎の穴ラボ Advent Calendar 2021 - Qiitaと Deno | Advent Calendar 2021 - Qiitaの8日目の記事です。 qiita.com qiita.com 7日目は、はっとりさんによるコンテナ開発に必須！ VSCode拡張機能 Remote - Containers、 @access3151fq さんによる【Deno】標準ライブラリを使ってテスタブルなサーバーを書くでした。 こちらもぜひご覧ください。 Deno の本番運用に向けて、最近はいろいろ試しています。 今回は、AWS Lambda 関数 で Deno を動かし、簡単な基本的なデータの CRUD 処理が動作する REST API を作成します。 併せて、データベースのマイグレーションなどの操作もすべて Deno で行い、Githu