はてなブックマーク

はじめに 先日PrismaのCloudflare D1サポートが発表されたので早速使ってみます。 ただ動かすだけではつまらないので、実践的にHonoと組み合わせて簡単なAPIを作っていきます。 Together, Cloudflare and Prisma make it easier than ever to deploy globally available apps with a focus on developer experience. To further that goal, Prisma ORM now natively supports Cloudflare Workers and D1 in Preview 環境 Node.js v20.12.0 pnpm v8.15.6 Hono v4.2.3 Prisma v5.12.1 Honoのプロジェクト作成 まずはHonoの

はじめに Rails7になってからjsbundling-rails が使われるようになり、esbuild/rollup/wepackなどJavaScriptをバンドルしてRailsアプリで配信する方法の選択肢は増えました。 これらを使うのも良いですが、より強力なフロントエンドツールであるViteを使うことで効率的なフロントエンド開発を行うことができます。 さらにvite_railsというgemを導入することで以前のwebpackerのようなTag HelperによるJSファイルの読み込みや、Rakeタスクassets:precompile でのViteアプリのビルドを行ってくれるようになります。 今回はvite_railsを使って、Vite + React(TypeScript)環境の構築を目指します。 Railsアプリを作成 まずは rails new でRailsアプリを作成します。

🌱 はじめに こんにちは。 自社プロダクト「360（さんろくまる）」を手掛けている技術開発第一部門の みやがわ です。 今日は、昨年2021年からフロントエンド界隈を盛り上げている 高速ビルドツール「Vite」を非SPAな従来のWebアプリに導入してみる、という内容をご紹介します。 タイトル通りバックエンドフレームワークにCakePHPを題材としてあげていますが、 対応方針はどのフレームワークでも変わらないのでLaravelやRailsを使ってる方にも参考になるかと思います。 🌱 内容まとめ MPAでもHMRとホットリロードの恩恵を受けられる✨ CakePHPに導入するためのヘルパーを作ろう✨ フロントエンドの世界はViteに、バックエンドの世界はvite-plugin-live-reloadに頼る✨ 🌱 環境 CakePHP: 4.3 Vite: 2.8.4 vite-plugin

はじめに こんにちは、最近は TypeScript を触ることが多くなってきた夛田です。 今回は、Node.js16 からサポートされた Sleep 機能について書いてみようと思います。 Node.js16 は 2021/10/26 より LTS となりますので、そろそろ新機能をしっかり追っておきたいところですね。 参考： https://nodejs.org/ja/about/releases/ えっ、まだ setTimeout で消耗してるの！？ これまで Node.js でいわゆる「待ち」の処理を行うには setTimeout を利用することが多かったかと思われます。 また、この関数を async function で利用するためには次のように Promise でラップする必要がありました。 // いい感じにPromiseでラップする const sleepFunc = (m) =>

筆者の技術スタック AWSに出会う前 筆者の技術スタックは以下のとおりです。 Webに関するフルスタックエンジニアエンジニアというのがわかりやすいのかもしれません。 フロントエンドからバックエンドまでいっしょくたに提供してた時代からのエンジニア その名残で今もフロントエンド、バックエンド、インフラ構築までおしなべて行ういわゆるフルスタックエンジニア 前職にて社内のインフラ整備だったりお客様の環境構築を任されることが多かった 現在の会社からAWSを学び始める とりあえずやってみよう！という精神を生かして 何でも手を出してた事から、アプリケーションを構築する会社で絶対数が少なくなりがちな インフラ部分を任されることが多かったと思います。 さくらのVPSなどに対して すべてのアプリケーションが整うお手製のシェルをメンテナンスしながら、 一発で環境を整えることに快感を覚えておりました。 Ansib

岡嵜です。 8月にISUCON11の予選が開催されましたね。私は例年通り実装言語:Rubyで参加し、今年も予選で敗退しました。反省会で毎年のように挙がる話の1つに「Rubyのプロファイラである StackProf の導入に手間取る」という話があります。 日常的に使っていれば手間取ることはないのですが、年に数回しかもISUCONのようなプレッシャーのかかる場面で使おうとすると、たいてい引数の仕様がわからなかったり渡す引数を間違えたりといった、本筋とは関係のないトラブルに見舞われます。 そこで、StackProfをラップして引数の仕様をできるだけシンプルにした Estackprof というGemを作ったのでご紹介します。 使い方 インストール Bundlerを使う場合 Gemfile gem 'estackprof' bundle install します。 $ bundle install B

こんにちは、山下です。 今回はVSCodeの拡張機能の一つにある「Draw.io Integration」についての解説記事を書きたいと思います。 この記事を参照して、様々なプロジェクトで必要になる図の管理が、もっと便利になったらいいなと思います。 Draw.ioとは そもそもDraw.ioとは何かというと、無料で利用できる高機能作図ツールです。 特徴としては、ブラウザ上で利用でき、様々な種類のテンプレートを参考にしながら、 マウス操作などで簡単に作図ができるというのが最大の特徴になっています。 また、GoogleDriveやGitHub、ローカルなど保存先を選ぶことができ、 シェア用のURLを発行したり、画像を出力したりして関係者に共有することもできます。 VSCode Draw.io Integration 「VSCode Draw.io Integration」は、エディタであるVS

弊社では社内システムが多く運用されています。そのうちの一つに私が開発・運用している「Nicole」というシステムがあります。 これは、いわゆるニコカレ(ニコニコカレンダー)をWebベースで入力・閲覧できるシステムで、今では社内SNS的な位置付けにもなりつつあります。 今回、このシステムをNext.jsとRuby on Rails(以降、Railsと表記)でリニューアルしました。リニューアルによりフロントエンドとバックエンドの分離に成功し、より速く・安全に開発が進められるようになり、UI/UXも洗練されたものになりました。今回はリニューアルの裏側を解説します。 目次 背景 システム構成 フロントエンドとバックエンドを分離 Dockerコンテナも分離 フレームワーク フロントエンド: Next.js バックエンド: Ruby on Rails API OpenAPIのスキーマ記述にStopli

Railsアプリを作るときの認証周りはすっかりdevise頼みとなってしまった今日このごろ。 最近、Azureを使ったシステムを開発しています。他のクラウドサービスでもそうですが、Azureが提供するサービスとの連携が強くなればなるほど、認証周りをAzure ADと連携する必要性が出てきます。 GitHubやTwitter, Facebookと連携したOAuth2認証の方法は調べるとすぐに見つかるのですが、Azure ADとのOAuth2認証の方法はなかなか見つからなかったので本記事にまとめます。 やりたいこと 認証画面で「Azure ADで認証」を選択できるようにします。 通常のID/PASS認証を実装 まずはdeviseを使って普通にID/PASS認証を実装します。 既にご存知の方は読み飛ばしても大丈夫です。 rails new まずはrains newします。 DBはPostgreS

この記事はFusic Advent Calenderの19日目の記事です。 -- Next.jsをデプロイするぞ！ いま、Next.jsを使って開発を行なっています。 Next.jsのデプロイ先としては、開発元のVercelが提供するプラットフォームVercel Platformがあります。 公式が言うにはVercel Platformが推奨ということにはなっていますが、今回はバックエンド側もAWS上にあるので、フロントエンドもAWSにあったほうが何かと便利！ということでAWS上にデプロイすることにしました。 Serverless Next.js Componentを使うぞ！ デプロイにはServerless Next.js Componentを使います。 Serverless Componentsは、Serverless Frameworkを介してサーバーレスなアプリケーションのよくある

目次 インストール APIドキュメント作成 まとめ インストール ※ PHP 7 and Laravel 5.5 以上。今回はLumenで動作確認しました。 composer require mpociot/laravel-apidoc-generator Laravel php artisan vendor:publish --provider="Mpociot\ApiDoc\ApiDocGeneratorServiceProvider" --tag=apidoc-config これで、configフォルダの中にapidoc.phpが作成されます。 Lumen bootstrap/app.php で 以下のコードを登録します。 /* |-------------------------------------------------------------------------- |

Fusicエンジニアによる技術ブログ

【論文読み】A Survey on Deep Learning for Localization and Mapping - 自律ロボット × Deep Learning の研究動向 本記事は、Fusic Advent Calendar 2020の11日目の記事です。 昨日は、@funassyさんで、まじめ・実用】会議の効率を爆上げさせる３つの習慣という動画を投稿されました。会議苦手なので参考になります。 さて、最近、iphone12 proにLIDARが取り付けられたことで、三次元再構成を行った以下の映像が話題になっていました。 iPhone 12 LIDAR scanning 3d demo - Instant Scans! この、3次元を認識する技術は、長年の自律ロボットの分野の研究成果の影響が大きいと思います。数年前までの、自律ロボットの研究は、LIDARやカメラ情報を、幾何学的に

本記事はGo Advent Calendar 2020の2日目の記事 およびFusic Advent Calendar 2020の2日目の記事です。 以前GoでRDBのテストを書く時 テスト用のDBを用意しておく テスト実行時CreateTableをする データを挿入する テストを実行する テスト終了時DropTableをする ということをしてました。 DBの振る舞いをテストするだけならここまでする必要はないなと思っており、実行速度も気になっていました。 そこで今回は普段使っているORMであるGormに対してgo-sqlmockを用いて GormDBをmockする方法をご紹介します。 mockを作成 sql-mockはsqlmock.New()という関数を持っており、 そちらを利用するとテスト関数に渡すDBと振る舞いを定義出来るmockを返してくれます。 さらに今回Gormを使用したいので

ついにPHP8がリリースされましたね 早速速度検証してみたくてささっと試してみました。 configure README はこちら あまり検証結果ブレさせたくないので、可能な限りconfigureオプションは何も設定せずMakeしていきます。 $ ./configure … 省略 … configure: error: Please specify the install prefix of iconv with --with-iconv=<DIR> とりあえずiconvは求められたので指定します。 $ brew --prefix libiconv /usr/local/opt/libiconv $ ./configure --with-iconv=/usr/local/opt/libiconv … 省略 … +---------------------------------------

背景削除とは 背景削除とはその名の通り、画像から対象物を検出し背景を削除するタスクです。 背景削除の有名なサービスとしては「remove.bg」というものがあります。下の画像はremove.bgを使って背景削除した例です。 右の男性に注目すると髪の毛の部分まできちんと背景削除されていることが確認できます。。　　 今回はこれを目標にしていきたいと思います。 ※本実験で使用する画像はPAKUTASO様より取得したものとなります。 使う技術 Image Matting 機械学習のタスクの１つ 画像を「前景」「背景」「そのどちらか」に粗く分割し、それぞれの領域における画像特徴を見て境界を決定する 今回はImage MattingのうちIndexNet Mattingというモデルを利用します Semantic Segmentation Image Mattingを行うための前処理として利用する tr

The reference docs for M5Stack products. Quick start, get the detailed information or instructions such as IDE,UIFLOW,Arduino. The tutorials for M5Burner, Firmware, Burning, programming. ESP32,M5StickC,StickV, StickT,M5ATOM. ところどころ M5StickV との記述がありますが、UnitV自体M5StickVのセンサー無し版なので、この手順であっているようです。 ただ、この手順通りに進めても上手くいかない点があったのと、物体検知までの道のりが遠かったという点を踏まえて、もう少し簡単に動かす手順を以降に記載します。 ファームウェアの書き込み ファームウェアのダウンロード

岡嵜です。 M5StickCを使っていて、見つけた問題と解決方法をまとめます。 問題 macOS CatalinaのArduino IDEでM5StickCに書き込みができない問題が発生しました。 Arduino IDEで「マイコンボードに書き込む」を実行すると、以下のようなエラーが発生します。 esptool.py v2.8-dev Serial port /dev/cu.usbserial-xxxxxxx Connecting........_____....._____....._____....._____....._____....._____....._____ A fatal error occurred: Failed to connect to ESP32: Timed out waiting for packet header macOS Mojaveのときは問題が発生

Amazon SNS + AWS Chatbotを使ってコーディングなしでCodePipelineのデプロイステータスをSlackへ通知する CodePipeline Notification Ruleの設定 CodepiplineのDeveloper Tools画面を開き、 「Pipepeline」→ 「Pipelines」→「Settings」をクリックします。 次に「Create notification rule」をクリックします。 そしてNotification rule作成に必要な情報を入力していきます。 Detail typeについては今回はデプロイ状況だけわかればいいのでBasicにしました。 通知のトリガーについては、各Stage(Source, Build, Deploy)実行時にState(Started, Succeeded, Failed) の通知が来ればいいので

こんにちは、嶋生です。 この記事はFusic Advent Calendar 2018の14日目の記事になります。 昨日は吉野のNuxt + Laravelのプロジェクトのi18n対応でした。フロントエンドとサーバサイドのハイブリッドなi18n対応、面白いですよねー！ さて、以下本題です。 ちなみに自然言語系の領域はまだまだ勉強不足でして、間違っている説明等があるかもしれません🙇 その場合はご指摘いただけると大変助かります。 やったこと 公式のBERTを動かしてみる 日本語の分類タスクでファインチューニングしてみた 本記事のターゲット BERTに興味がある人、日本語タスクでどんな精度が出るのか知りたい人 自然言語系の研究に興味がある人 実験とか好きな人 BERTって？ 少し前にディープラーニング界隈・自然言語界隈で大変話題になった新しいモデルです。 ざっくりいうと、BERTっていうすごい

Ruby on JetsとはAWS上にサーバレスアプリケーションを構築するためのフレームワークです。 その名の通りRubyでプログラムを書くことができ、アーキテクチャがRuby on Railsに非常に似ているので、これまでRailsでの開発経験があれば少ない学習コストでサーバレスアプリケーションを開発することができます。 今回、Ruby on JetsとAurora Serverlessを組み合わせることで、一定の制約はあるもののスケールアウト可能なシステムを構築できることがわかったので記事にまとめます。 Ruby on Jetsと組み合わせるデータベースをどうするか問題 Ruby on JetsはRDSまたはDynamoDBをデータベースとして使うことができます。しかし、どちらも一長一短です。 DynamoDBを使う場合 メリット スケールアウトできる 読み書きが速い アクセス制限しや

TimeTree for Slack. Contribute to 7nohe/slack-bolt-timetree-app development by creating an account on GitHub. ソースコード解説 (Bolt - Slackコマンドのリスニングと応答) メインのコードだけ載せます。 index.js const { getCalendarListMessage, createEvent } = require("./timetree"); // timetreeコマンドのリスニング app.command("/timetree", async ({ command, ack, say }) => { // コマンドリクエストを確認 ack(); const [ commandName, calendarName, title, startAt, en

チュートリアル記事を書いた動機 私自信、普段はRuby on Railsで受託開発をしていますが、リッチなUIが必要なケースや大規模システムの開発、モバイルアプリへのAPI対応など、「フロントエンド」や「フロントエンドといい感じに連携する技術」が求められるケースが増えてきていると感じています。 同じように感じている人は多いはず、ということでフロントエンドもGraphQLもほとんど触ったことがない私のような人に向けたチュートリアル記事を書きました。 動作環境 RubyもRailsも現時点での最新バージョンを使用します。 Railsはリリースされたばかりの 6.0.0 です。 $ ruby -v ruby 2.6.3p62 (2019-04-16 revision 67580) [x86_64-darwin18] $ rails -v Rails 6.0.0 Rails newする Rails

デモで使いたい時などに、簡単なGraphQLでモックサーバーを用意したいことがあります。 そんなときはApollo Serverをローカルで立てたり、GraphQLのBaaSであるGraphcoolなどを使うことがあるかもしれません。 しかし、それだとローカルにCLIやモジュールのインストールなどの何かしらの環境構築が発生したり、スキーマファイルを作成して、エディタを開いて…など面倒です。 そういったことをせずに簡単にモックサーバーを立てる方法を書きたいと思います。 CodeSandboxでApollo Serverプロジェクトを作成 オンラインコードエディタであるCodeSandoboxを開きます。 「Create Sandbox」をクリックすると、テンプレートを選択する画面が開きます。 そして、「SERVER TEMPLATES」>「Apollo」を選択します。 するとテンプレートを元