はてなブックマーク

はじめに 先日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

使い方 インストール Bundlerを使う場合 Gemfile gem 'estackprof' bundle install します。 $ bundle install Bundlerを使わない場合 $ gem install estackprof プロファイリングを有効化 StackProf同様、RackMiddlewareとしてアプリケーションに組み込むことができます。StackProfと同様のオプションをサポートしていますが、オプションを省略した場合にもデフォルト設定でいい感じに動作するようにしています。 以下、アプリケーションのソースコードへの記述例です。 app.rb require 'estackprof' use Estackprof::Middleware # ...your rack application レポーティング アプリケーションを動作させたあと、以下のコマン

Draw.ioとは そもそもDraw.ioとは何かというと、無料で利用できる高機能作図ツールです。 特徴としては、ブラウザ上で利用でき、様々な種類のテンプレートを参考にしながら、 マウス操作などで簡単に作図ができるというのが最大の特徴になっています。 また、GoogleDriveやGitHub、ローカルなど保存先を選ぶことができ、 シェア用のURLを発行したり、画像を出力したりして関係者に共有することもできます。 VSCode Draw.io Integration 「VSCode Draw.io Integration」は、エディタであるVSCode上でDraw.ioを使用できるようする拡張機能です。 VSCode上に、Draw.io Integrationをインストールすることにより、ブラウザ上でのDraw.ioと同じような形で作図をすることができます。 インストールはこちらから。 何

目次 背景 システム構成 フロントエンドとバックエンドを分離 Dockerコンテナも分離 フレームワーク フロントエンド: Next.js バックエンド: Ruby on Rails API OpenAPIのスキーマ記述にStoplight Studioを使用 OpenAPIによるスキーマベースのテスト OpenAPIによるクライアントの自動生成 余談: GraphQLは採用せず 認証 リリース直後は従来の認証方式を維持 Slack OAuth2認証に変更 UI/UX Tailwind CSSでコンポーネントにデザインをまとめる React/JavaScriptのエコシステムを活用 開発効率化 SWRで効率的にデータフェッチ Recoilで必要最低限のステート管理 React Hook Formでフォームの状態管理 既存システムからの移行 開発期間 感想 まとめ 背景 Nicoleは201

やりたいこと 認証画面で「Azure ADで認証」を選択できるようにします。 通常のID/PASS認証を実装 まずはdeviseを使って普通にID/PASS認証を実装します。 既にご存知の方は読み飛ばしても大丈夫です。 rails new まずはrains newします。 DBはPostgreSQLとしていますが、他のDBでも問題ありません。 # Railsアプリを作成 $ rails new devise_omniauth_azure_ad -d postgresql $ cd devise_omniauth_azure_ad # DB接続を確認 $ vi config/database.yml # 適宜編集 $ bin/rails db:create rails db:migrate Deviseの導入 以下コマンドを実行してdeviseをインストールします。 $ bundle add

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を介してサーバーレスなアプリケーションのよくある構成を設定ファイルだけでいい感じにデプロイしてくれる便利なヤツです。 Server

目次 インストール 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 の研究動向 Localization, Mappingとは? 人間は、知覚機能を用いて、自分が何歩動いたかなどの自己の動作や、周辺の環境を認識します。そして、その認識を頼りにして、複雑な3D空間の中で自分の位置を特定します。 この自己動作の認識や、特定した自己位置を用いて、目的地へ移動したり、体の運動制御が可能になります。 自動運転車やドローンなどの自律ロボットも、同様に、センサー情報を用いて、環境を認識し、自己位置を推定することで、次の動作などの決定を行うことができます。 自律ロボットが、高度な自律性を実現するためには、正確でロバストな自己位置の獲得と、様々な状況に適応するための世界モデルの段階的な構築と維持が必要にな

mockを作成 sql-mockはsqlmock.New()という関数を持っており、 そちらを利用するとテスト関数に渡すDBと振る舞いを定義出来るmockを返してくれます。 さらに今回Gormを使用したいので、そのDBに対してgorm用のコネクションを作成しておきます。 僕はPostgreSQLを利用していたので、PostgreSQL用のコネクションを生成します。 func GetNewDbMock() (*gorm.DB, sqlmock.Sqlmock, error) { db, mock, err := sqlmock.New() if err != nil { return nil, mock, err } gormDB, err := gorm.Open( postgres.New( postgres.Config{ Conn: db, }), &gorm.Config{}) i

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 … 省略 … +--------------------------------------------------------------------+ | License: |

背景削除とは 背景削除とはその名の通り、画像から対象物を検出し背景を削除するタスクです。 背景削除の有名なサービスとしては「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のセンサー無し版なので、この手順であっているようです。 ただ、この手順通りに進めても上手くいかない点があったのと、物体検知までの道のりが遠かったという点を踏まえて、もう少し簡単に動かす手順を以降に記載します。 ファームウェアの書き込み ファームウェアのダウンロード

問題 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のときは問題が発生しておらず、昨年秋にCatalinaにアップデートしたタイミングで発生するように

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) の通知が来ればいいので

セットアップ 1. インストール $ composer require nuwave/lighthouse 2.デフォルトスキーマ生成 $ php artisan vendor:publish --provider="Nuwave\Lighthouse\LighthouseServiceProvider" --tag=schema デフォルトで生成されるスキーマは以下のようになりました。 # graphql/schema.graphql "A datetime string with format `Y-m-d H:i:s`, e.g. `2018-01-01 13:00:00`." scalar DateTime @scalar(class: "Nuwave\\Lighthouse\\Schema\\Types\\Scalars\\DateTime") "A date string wi

やったこと 公式のBERTを動かしてみる 日本語の分類タスクでファインチューニングしてみた 本記事のターゲット BERTに興味がある人、日本語タスクでどんな精度が出るのか知りたい人 自然言語系の研究に興味がある人 実験とか好きな人 BERTって？ 少し前にディープラーニング界隈・自然言語界隈で大変話題になった新しいモデルです。 ざっくりいうと、BERTっていうすごい（学習済の）モデルを使えば、色々な自然言語系のタスクを少ない時間で、高い精度が出せるかも！ってことで話題になりました。 2018年10月11日にGoogleから公開されたもので、双方向Transformerで言語モデルを事前学習することで汎用性を獲得し、転移学習させると8個のベンチマークタスクでSOTA(最先端の結果)を達成したそうです。 ちなみに8個のタスクは下図のような感じです。 引用元: https://twitter.c

Ruby on Jetsと組み合わせるデータベースをどうするか問題 Ruby on JetsはRDSまたはDynamoDBをデータベースとして使うことができます。しかし、どちらも一長一短です。 DynamoDBを使う場合 メリット スケールアウトできる 読み書きが速い アクセス制限しやすい デメリット 使い慣れていない テーブル設計が難しい スケールアウトしたとき、料金が高額となる恐れがある インターネット経由もしくはVPCエンドポイント経由でしかアクセスできない RDSを使う場合 一般的にRDSとLambdaは非常に相性が悪いと言われています。ただ、もちろんメリットもあります。 メリット これまで使い慣れている テーブルの結合や検索を簡単に実現できる LambdaをVPCに配置する場合、インターネットを経由せずにアクセスできる デメリット Lambdaがスケールアウトしたとき、Lambd

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

CodeSandboxでApollo Serverプロジェクトを作成 オンラインコードエディタであるCodeSandoboxを開きます。 「Create Sandbox」をクリックすると、テンプレートを選択する画面が開きます。 そして、「SERVER TEMPLATES」>「Apollo」を選択します。 するとテンプレートを元にApollo Serverプロジェクトを作成されます。 作成されたプロジェクトは、すでにクエリを投げると「Hello World!」と返すようスキーマが定義されています。 プレビュー画面ではエクスプローラーツールであるGraphQL Playgroundが表示されており、実際にクエリを投げてどのようなデータが返ってくるか試すことができます。 Query: { hello } Result: { "data": { "hello": "Hello world!" }