はてなブックマーク

先日のApple Eventでも Mac Studio や iPad Air(第5世代) が発表され、いよいよ Apple M1チップ がデファクトスタンダードになったなあと感じています。自分もこれまで、業務用PCとしてMacBook Pro 2017を使っていたのですが、悪名高いバタフライキーボードの破損をきっかけに MacBook Air(M1) を購入してもらいました。 さっそく業務で使用していくためにセットアップをしたのですが、やはりIntelチップとの違いに戸惑ったので備忘録としてまとめます。この記事は元々社内のナレッジに書く予定だったのですが、自分自身QiitaやZennの記事にかなり助けられました。この記事も今後M1 Macをセットアップする人の役に立てばと思っています。 MacOSの基本的な設定を使いやすく変更する 購入したばかりのMacはDockに大量のアプリが登録されて

組み込みシステム向けの軽量なRuby言語処理系である「mruby」を使って、スマートプラグ(TP-Link HS105)をON/OFF制御しました。 mrubyでスマートプラグを制御する様子 #fukuokarb pic.twitter.com/TcnZ2jXi0e — YuheiOkazaki (@Y_uuu) March 17, 2021 軽い気持ちで始めたのですが、mrubyやソケットプログラミングのよい勉強になりました。 これらの技術に興味がある人にぜひ読んでいただきたいです。 背景 当初、センサの値に応じて、HS105のON/OFFを制御するシステムを作りたいと考えていました。 HS105はKasaというモバイルアプリを使ってON/OFF制御ができ、これとIFTTTを接続することでクラウドからのフィードバック制御を想定していました。しかし、センサが検知をしてからHS105のON/

2年ほど前にNuxt.jsを使ってポートフォリオサイトを作成しました。 今回、このサイトをNext.js + Railsでリニューアルしたので、経緯を記事にまとめます。 リニューアル後のページ https://portfolio.y-uuu.net/ デザインは前回のものを踏襲していて、ほとんど変わっていません。 リポジトリ フロントエンド: https://github.com/yuuu/portfolio_v2_ui バックエンド: https://github.com/yuuu/portfolio_v2_api リニューアルの目的 Next.jsを使って何か作りたい 昨年からReactやNext.jsを触ってノウハウを蓄積するようにしています。私自身普段はRailsを使った開発をしているので、Next.jsを採用するとしたらRailsと組み合わせて使う可能性が高いです。 昨今のフロン

本記事では、APIモードのRailsに対してCrossOriginなSPAからSession(Cookie)認証する方法を解説します。 モダンなフロントエンド開発だと、Auth0やFirebaseを使った認証例が多く見られますが、バックエンドにRailsを使った認証例はまだまだ少ないと感じています。 JWT認証ではなくCookie認証となると、その数はさらに少ないようです。 実際にやってみるといろいろな障壁があることがわかったので、やるべきことをまとめることにしました。 背景 Next.jsアプリをVercelに、データ永続化とユーザ認証を目的としたAPIモードのRailsアプリをHerokuにデプロイしています。 この状況でNext.jsアプリからRailsに対して認証を試みると、CrossOriginなリクエストであるが故に様々な障壁があります。 本記事に記載する内容はバックエンド側が

本記事ではNext.js+TypeScript+AWS Amplify+Recoilを使って、モダンなToDoリストを作る方法を紹介します。 Githubリポジトリを公開しますので、不具合や不適切な実装を見つけた場合はドシドシIssueかPull-Requestいただけると幸いです。 背景 私自身普段はRuby on Railsを使って開発しています。JavaScriptは正直まだ苦手です。 Railsは爆速でアプリを開発出来る点が魅力的ですが、一方でモバイルアプリとの連携やリッチなUIが求められる案件では、フロントエンドとバックエンドを分離した構成にせざるをえないケースがあります。 そのような構成だと、かえってRailsがリッチ過ぎるとも感じており、AWS Amplifyのようにバックエンドをスピーディーに構築してくれるサービスを一度使ってみたいと思っていました。 そのため、Next.j

本記事は Fusic Advent Calendar 2020 の1日目の記事です。 今年もいよいよはじまりました！Fusic社員が「個性をかき集めて、驚きの角度から世の中をアップデートしつづける」記事を書いていきますので、クリスマスまでどうぞよろしくお願いします。 というわけで、1日目は「AWS Amplify」に関する記事を書こうと思います。 はじめに 個人的に今年は「Amplify元年」といっても過言ではない年でした。Amplify SNS Workshop との出会いをきっかけに、AmplifyとNext.jsを組み合わせてモダンかつスピーディな開発ができないか模索するようになりました。 Amplifyを触るうちにさまざまなTipsを蓄積できたので、1年分まとめた逆引きTips集として公開することにしました。 ※普段使用しているJavaScriptフレームワークがReact/Nex

version: 1 backend: phases: build: commands: # ここから追記 >>> - export BASE_PATH=$(pwd) - yum install -y gcc openssl-devel bzip2-devel libffi-devel python3.8-pip - cd /opt && wget https://www.python.org/ftp/python/3.8.2/Python-3.8.2.tgz - cd /opt && tar xzf Python-3.8.2.tgz - cd /opt/Python-3.8.2 && ./configure --enable-optimizations - cd /opt/Python-3.8.2 && make altinstall - pip3.8 install --user pi

この記事では、フロントエンドにNext.js、バックエンドにGo言語(gqlgen)を用いて、フロントエンドとバックエンド間のAPIにGraphQLを使ったアプリケーションを構築する方法をまとめます。 作成したのは以下のような簡易ブクマアプリです。 フロントエンドはほぼNext.jsのexamplesのままで、本記事ではバックエンドの実装をメインに解説します。 背景 個人的に、「フロントエンドフレームワークとGo言語の組み合わせで何か開発をしてみたい」と以前から思っていました。 そんな中、ReactのフレームワークであるNext.jsの使い勝手が良さそうという噂を耳にしました。 加えて、Next.jsのexamplesが充実していて、Apolloを使ったアプリケーションのひな形が簡単に作れることを知ったので、今回Go言語のバックエンドと組み合わせて動かしてみることにしました。 構成要素 図

この記事はmockmockアドベントカレンダー24日目の記事です。 クリスマスイブの今日はmockmockを使って簡単なIoTシステムを開発します。 ただし、mockmockのアドバンスドオプションの一つである「DataRecorder」を使って、 デバイスから送信されたデータの確認・クラウドへの再送を行い、スマートに開発していく点に注目です。 開発するシステム システム名 システム名は**「Suwarin」**とします。 某子供向け番組のキャラクターをリスペクトして名付けました。 仕様 自分自身の着席状況をSlackへ通知するIoTシステムです。 自分が着席したら「着席しました」、離席したら「離席しました」とメッセージを送信します。 システム構成 今回、デバイスにはM5StickCを使用します。クラウドはAWSでIoT Core, DynamoDB(Stream), Lambdaを使用し

こんにちは、mockmockチームエンジニアの岡嵜です。 本記事は mockmockアドベントカレンダー 4日目の記事です。 昨日は「mockmockでAWS IoT Coreにデータを送るプロジェクトを作成する」でした。 今回は、mockmock から Google Cloud IoT Core にデータを送るプロジェクトを作成する方法をまとめます。 今回やること Google Cloud IoT Coreにmockmockからデータを送るプロジェクトを作成します。 構成としては以下の通りです。 Google Cloud Platformの準備 Pub/Subのトピックを作成する Pub/Subのトピックを作成するため、コンソールを開きます。 Google Cloud Platformのコンソールにアクセスし、「画面左上のハンバーガーアイコン」→「Pub/Sub」の順でクリックしてくださ

こんにちは、mockmockチームエンジニアの岡嵜です。 本記事は mockmockアドベントカレンダー 3日目の記事です。 昨日は「mockmockでサーバー(Nginx)にデータを送るプロジェクトを作成する」でした。 今回は、mockmock から AWS IoT Core にデータを送るプロジェクトを作成する方法をまとめます。 今回やること AWS IoT Coreにmockmockからデータを送るプロジェクトを作成します。 構成としては以下の通りです。 送信するデータはJSON形式で以下の内容とします。 AWSの準備 S3のバケットを作成する mockmockが送信したJSONをファイルとして保存するためのS3バケットを作成します。 S3のコンソール画面へアクセスし、「バケットを作成する」をクリックしてください。 「バケット名」を入力します。既にAWS上に存在しているバケット名は使

AWS Storage Gatewayはオンプレ環境とクラウドストレージを接続して、オンプレ環境からクラウドストレージへアクセスできるようにするサービスです。 今回、オンプレ環境に保存していたバックアップファイルをクラウド移行したいという相談があったため、ローカルPCからS3へファイル転送する手順を検証してみました。 ※本検証によりAWS利用料が発生する可能性がありますのでご注意ください 接続先のS3バケットを作成する S3へアクセスし、「バケットを作成する」をクリックします 「バケット名」を入力して「次へ」をクリックします。 そのまま「次へ」をクリックします。 バケットをパブリックに公開する必要は無いのでそのまま「次へ」をクリックします。 「バケットを作成」をクリックします。 Storage Gatewayの設定 はじめてStorage Gatewayを利用する場合はこちらをクリックしま

Railsでグラフを扱う方法として chart-js-rails を使った方法を こちらの記事で解説しました。 一方、シンプルなグラフを埋め込む場合においては chartkick を使ったほうが簡単なことがわかったので本記事で解説します。 chartkickとは chart.jsをいい感じにラッピングして、ワンラインでグラフを埋め込めるようにするプロジェクトです。 Rubyに限らず様々な言語で実装されています。 https://chartkick.com/ また、chart.jsだけでなくGoogle ChartsやHighchartsもサポートしています。 chartkickを使ったほうが良い理由 RubyとJavascript間のデータの受け渡しを意識しなくて良い こちらの記事の方法だと、Ruby側で扱う数値を何らかの方法でJavascriptで受け渡す必要がありました。 chartk

一般的にAWS LambdaとRDS(RDB)は相性が悪いと言われています。 その理由の一つは「Lambdaのスケールアウトに伴いRDSへのコネクションが増加し、最悪の場合コネクション枯渇するため 」です。 この問題はLambdaを多用するRuby on Jetsでも同じだと思っていましたが、 Ruby on JetsのDocumentには以下のような記載があります。 On AWS Lambda, there’s something called the Lambda Execution Context. The Lambda Execution Context gets reused between lambda function runs. Jets establishes the DB connection within the Lambda Execution Context ou

はじめに Ruby on JetsとはRubyでサーバレスアプリケーションを構築するためのフレームワークです。 CLIを利用して簡単に、AWS上へサーバレスなアプリケーションを構築できます。 CLIやディレクトリ構成や設定ファイルの記述方法など、Ruby on Railsと共通する点も多いので これまでRailsでの開発経験があれば学習コストも低く済みそうです。 今回、サンプルアプリケーションを作成して、デプロイするところまで試してみたので手順をまとめます。 尚、諸々の事情により、フルサーバレスではなく、RDS(PostgreSQL)も存在していますのでご留意ください。 サンプルアプリケーションを作成 Jetsの Quick Start を参考にサンプルアプリケーションを作成しました。 RDS(PostgreSQL)を使うので --database=postgresql を追加しています。

動機 私自身、普段はRuby on Railsでシステムを開発していることもあって、なかなかフロントエンドのモダンなフレームワークに触る機会がありません。 そんな中、ちょうど弊社の開発合宿の時期が来たので Nuxt.jsを使って練習がてら自分のポートフォリオサイトを作ることにしました。 予定していたページを全て完成させることはできませんでしたが、取り組んだ内容をまとめます。 作ったページ リポジトリ プロジェクト作成 create-nuxt-app を使ってnuxtプロジェクトを作る $ npx create-nuxt-app yuuu_portfolio [~/Documents/develop] npx: 379個のパッケージを29.271秒でインストールしました。 > Generating Nuxt.js project in /Users/yokazaki/Documents/de

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?