サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
TGS2024
tech.basicinc.jp
こんにちは Rails と Ruby が好きな @zaru です。今回は Rails の代表的な機能の一つ ActiveRecord コールバックの罠について記事を書きます。誰もが…というより僕自身がはまった罠を中心に紹介します。この記事を読むことで ActiveRecord コールバックをゴリゴリに使って罠にはまる人を一人でも少なくなれば嬉しいです。 最初に 3 つの問題を出します。この問題がスッと答えられる人は、ほぼ完璧に ActiveRecord コールバックについて理解をしているので、この記事を読む必要はありませんし、ActiveRecord コールバックを存分に活用したコードを書いても問題ないです。 ちなみに僕はぜんぜん自信がない&正解できなかったので、ActiveRecord コールバックをなるべく使わないスタイルにしていこうと強く思いました。 ActiveRecord 理解度
こんにちは @zaru です。今回は昔からある CSRF (クロスサイト・リクエスト・フォージェリ) の今時の対策についてまとめてみました。もし、記事中に間違いがあれば @zaru まで DM もしくはメンションをください (セキュリティの細かい部分についての理解が乏しい…) 。 2022/08/29 : 徳丸さんからフィードバック頂いた内容を反映しました。徳丸さん、ありがとうございます! 認証あり・なしで対策方法が違う点 トークン確認方式のデメリットのクロスドメインについての言及を削除、代わりに Cookie 改変リスクを追記 Cookie 改ざん可能性について徳丸さんの動画リンクを追記 SameSite 属性で防げない具体的なケースを追記 nginx 説明が関係なかったので削除 そもそも CSRF ってなに? 昔からインターネットをやっている方であれば「ぼくはまちちゃん」 騒動と言えば
この手の記事が世界の至る所で書かれている気がしますが、シークレットキーを渡す方法を含めて最新の GitHub Actions 情報に対応したものを見つけることができなかったので書きます。 やりたいこと Rspec や Rubocop を GitHub Actions で動かしたい Rails の Environment Credentials を使っているので RAILS_MASTER_KEY を渡したい Dependabot が作成するプルリクにもシークレット RAILS_MASTER_KEY を渡したい 前提 Private repository YAML ファイル まずは GitHub Actions の設定 YAML ファイルです。PostgreSQL と Redis をサービスコンテナとして用意しています。Ruby の実行には ruby/setup-ruby を使っています。ここ
ベーシック アドベントカレンダー 5日目です。 Web Components でフォーム周りのカスタムパーツの作り方の解説をします。フォームのカスタムパーツは、プロジェクト内だけでなく汎用的なコンポーネントを自作して外部に配布する王道なコンポーネントな気がします。しかし、普通のコンポーネントと同じようなノリで作っているとハマってしまったところがいくつかあったので、それらを紹介します。 Shadow DOM 内部の入力フォームは autocomplete が効かない <my-login-form></my-login-form> <p>Normal DOM form</p> <form method="post" action="./"> Email: <input type="text" name="id" value=""><br> Password: <input type="pass
ドット絵が好きなので、あらゆるものをドット絵っぽくしたいな〜と思ったので、カメラの映像をリアルタイムにドット絵風に変換する Web アプリを作りました。これで Zoom などのウェブ会議もドット絵エフェクトで参加できますね。 デモ: https://pixelated-video.zaru.dev ( 表示に時間がかかります / スマホだと重いです ) ソースコード Web: https://github.com/zaru/pixelated-video ソースコード WASM: https://github.com/zaru/go-wasm-pixelate こんな感じになります。 技術的には、Web カメラを <video> に流して、それを <canvas> に渡して Go WebAssembly でドット絵風のエフェクト処理をかけている感じになります。 今回の記事で紹介するのは画像
Redis が好きで使いたい人、Redis が要件上必要な人(僕)向けに Rails で Redis とうまく付き合っていく上で抑えておくポイントを書いてみました。Redis サーバそのものをうまく扱う方法はこの記事では紹介しません。あくまで Rails で利用する部分に留めます。 Redis サーバが落ちた時・容量不足になった時、どうする? Redis だけに限った話ではないですが、Redis サーバが落ちたり、容量が不足してエラーになった時に、アプリケーションをどのように動かすのか、または落とすのかを事前に設計する必要があります。 例えば、キャッシュで利用している場合は、Redis サーバに接続できなかったとしても、アプリケーションは落とさずにそのまま動作させる方が良いでしょう。多少パフォーマンスは落ちますが。ただ、パフォーマンスへの影響が深刻でキャッシュがないことで雪崩式に他のシステ
何らかの画像や PDF / CSV ファイルなど Rails で生成したファイルを、そのまま Rails のプロセスで UserAgent に返すのではなく nginx などの Web サーバで返す仕組みがあります。nginx だと X-Accel-Redirect、lighttpd や Apache では X-Sendfile と呼ばれる機能です。これを利用することで UserAgent がファイルをダウンロードするまでの処理を Rails のようなアプリケーションサーバがリソースを使うことなく、Web サーバに肩代わりしてもらえます。 データフローを図にするとこんな感じです。 Rails + nginx の X-Accel-Redirect の設定方法 Rails 側の設定はいたって簡単です。 /config/environments/development.rb などの環境ファイルで
オンラインミーティングや勉強会が盛んになってきた昨今、自分が映っているカメラ映像の背景を透過させて、他のアプリケーションと良い感じに一緒に配信したいな〜と思ったので mewcam ( ミュウカム ) という mac アプリを作ってみました。 こんな感じです。 良いですね(表情が固い)。 ダウンロード GitHub にソースコードとアプリを公開しています。是非ダウンロードして使ってみてください。 https://github.com/zaru/mewcam Download : mewcam v1.1.0 for mac 今は mac のみの対応ですが、Windows 版もリリースする予定です。もしフィードバックがあれば @zaru までお願いします。 Windows 版もリリースしました! 最新版のダウンロードは GitHub からお願いします。 どうやって作るのか ここからは作り方です。
AWS SQS をキューサービスとして利用し、ワーカー処理は AWS ECS のコンテナで実行する際に、SQS のキューの数に応じてオートスケーリングさせたい場合の設定方法メモです。つまり、キューがいっぱい積まれたら ECS のタスクを増やすし、減って来たらタスクを終了させるということです。とても簡単に設定できます。 今回の設定方法は AWS サポートの方に親切にアドバイスいただきました。とても分かりやすいサポートで感謝しております。 ターゲット追跡スケーリングポリシーの設定 ECS のサービスではオートスケーリングの設定が可能ですが、今回利用するターゲット追跡スケーリングポリシーはコンソール画面からは設定ができません。aws CLI コマンドを利用します。 aws application-autoscaling put-scaling-policy ドキュメント aws applicat
menuffy という mac アプリを作ったので紹介します。 menuffy モチベーション 僕は LG が作っている 37 インチの 34WK95U-W というワイドディスプレイを使っています。大きいです。特に横に大きいです。すごく広くていい感じのディスプレイなんですが、1つ問題があります。 アプリのメニューが左端すぎて、つらい 首をものすごく曲げないと見えないし、メニューバーを使う場合はショートカットを覚えていなかったりするから、どこにあるのか、ウロウロと探して首が疲れてしんどい思いをするという問題です。 menuffy の使い方 menuffy ではショートカット(デフォルトだと command + control + m )で簡単に起動ができます。起動をすると画面の真ん中に、今使っているアプリケーションのメニューが表示されます。これなら、目線を真ん中に合わせながらメニューをじっく
Rails でファイルを返さず nginx で返す X-Accel-Redirect の設定と解説の記事で、ファイルをアプリケーションサーバで返さずに nginx などの Web サーバで返す方法を紹介しました。そこではファイルの場所はサーバ内のストレージでしたが、今回の記事では AWS S3 にストアしている非公開ファイルを nginx から返すようにする方法を紹介します。 これを使うことで、S3 で非公開にしているファイルを、アプリケーションの認証情報を使ってアクセスさせることができるようになります。S3 には PreSigned URL という一時的に公開するための仕組みがありますが、URL 自体がわかれば誰でもアクセスが可能になっているので、URL そのものを隠蔽したい場合には今回のやり方が使えると思います。 rails new してからの実装差分のコード全てはこちらです。 zar
z-index と聞いてヴェェー!!って思うみなさん、こんにちは。 ベーシック アドベントカレンダー 9日目(大遅刻)です。 今回は z-index と安全に付き合うおはなしをします。 z-index: 9999; というラノベ主人公みたいな値があまりよくないと感じつつも、予期せぬ要素同士で起こる z-index バトルをどう回避すればいいのか、もにょもにょしますよね これを解決していきます。 私の脳内で運用しているだけなので、提案として「ふーん」程度に受け止めていただければと思います。 結論は『 z-index を設定した親要素(近い先祖要素)に isolation: isolate; をする』です。 z-index の苦しみ 『この要素を前面に出したい』 .tuyoi { z-index: 1; } 『この要素を必ず最前面に出したい!』 .motto-tuyoi { z-index:
ベーシック アドベントカレンダー 6日目。 こんにちは。@rigani_c です。今日も寒いですね。それでは本題です。 ファイルパスで View と CSS を付け合わせて薄いスコープを作る設計、ファイルパススコープについての記事の続編です。 CSS on Rails に治安が訪れます。 本記事は Rails 6.0.1 + Sprockets 4 な環境で動作検証しています。 タイトルで『こうするといいよ』とか言ってるけど、まだ運用してないので破綻したらごめんなさい。 ファイルパススコープ ファイルパススコープとは、ベーシックで考案・運用している CSS のスコープ設計です。 運用が容易な単純なルールと、書き直しやすさを重視しています。 次の手順で、View ファイルと CSS ファイルを対の関係にします。 View ファイルごとのルート要素に、自身の app/views/ 以降のファイ
旧 ferret では DB に MongoDB を採用しており、EC2で自前で運用しておりました。 そのため、プライマリーで稼働している EC2 のリタイア通知に恐怖したり、Linux カーネルのアップデート当てるための再起動や MongoDB のアップデートどうやっていくか・・・など様々な保守運用まつわる課題に悩まされていました。 今回のリニューアルで Aurora に移行でき、保守周りを AWS に投げられる幸せや保守コストの削減を実感できております。 現在だったら Document DB がありますが、リニューアルを検討した時にはまだ発表されていなかったのと、mongoid が開発する上で ActiveRecord とは違う挙動をするので辛い部分が多く、 RDBMS を使いたかったという理由もあり結局採用されなかったんじゃないかなと思います。 前置きが長くなりましたが、 今日は E
ベーシック アドベントカレンダー 2日目です。 Shadow DOM でコンポーネントに閉じ込めた CSS を定義することができますが、CSS の定義がやりやすいということはないです。<style> タグを JS 内でベタで書く、もしくは JS で style API を直接修正する…。ちょっとしたコンポーネントであれば良いですが現実的ではありません。 通常の HTML / CSS と同様に外部ファイルで管理したくなります。現時点では3つの方法が提供されています。 今回のデモとソースコードはこちら <link rel="stylesheets"> 普通に <link rel="stylesheets"> で外部 CSS ファイルを読み込むことができます。以前はできなかったようですが現在は標準化されるようです。 class NormalLinkCss extends HTMLElement
こんにちは、ベーシックのDevOpsエンジニア 渡辺です。 主にインフラ保守運用や新しい技術の検証、データ解析周りなどをやっています。 今回はアクセスログなど時系列のデータを保存、集計するのに便利なデータウェアハウス ClickHouse をご紹介します。 https://clickhouse.yandex/ ClickHouseとは? ClickHouseとは、SQLクエリを使用してリアルタイムで分析データレポートを生成できるオープンソースの列指向データベース管理システムです。 時系列データの保存、集計に特化していてクエリ検索パフォーマンスがとても優れています。 データの更新(UPDATE)ができなかったり削除(DELETE)に制約があったりと通常のRDBMSでできることがClickHouseではできないこともありますが、ログを登録して集計することだけと考えればとてつもなく良いパフォーマ
こんにちは! プロダクトオーナー兼開発部マネージャーをしている長谷川(@roki1801)です。普段は山形県山形市にあるベーシックのサテライトオフィス「山形ラボ」にてリモートで働いております。 最近はプロダクトオーナー(PO)やプロダクトマネージャー(PM)といった職種が市民権を得てきている感覚がすごくあります。また、POやPMをエンジニアが兼務、あるいはエンジニア出身の人間がなっているというのもよく見たり聞いたりする気がします。 弊社開発部エンジニアにもエンジニア兼POが二人おります。私はそのうちの一人(もう一人はVPoE @mochizukikotaro)なのですが、今回このブログでは普段プロダクトに対して考えたり葛藤していることを書きたいと思います。本ブログを通して弊社におけるプロダクト運営まわりのことが少しでも伝われば幸いです。 ベーシックのプロダクトオーナー事情 弊社では2018
皆さん「在庫管理」ってどうしてます?itemsテーブルに、stockカラム作ってdecrementしてますか? まぁ正直、それでも良い感じしますよね。楽だし何やってるかわかりやすい。 しかし! 超人気商品に超アクセスが集中して購入処理がめちゃくちゃ行われたら...!? 大抵の人はトランザクション処理を挟み込むはずなので、itemsの対象商品レコードのロックが多発 してコネクション待ちが多発。 からのサーバーダウンが考えられますよね。辛い。対策せねば。 今回はそんな 超人気商品 ができちゃった or 生み出したいという場合に、システムが詰まって死なない実装を考えたので、その実装をまとめてみた。 そんな記事になります。 ↑の実態をもう少し詳しく説明 この記事では MySQL Ruby on Rails 4系 を使ったアプリケーションの、商品の在庫管理の一例を提示するものです。 MySQLの構成
巷で話題の kubernetes ですが、とってもとってもとっつきにくいですよね そんな kubernetes ですが手元で動かすことができたので解説してみます (情報が間違ってたらごめんなさい! ) 目標はこちら kubernetes の後述する基本的な概念を雰囲気理解すること ローカルのクラスタにデプロイして Ruby on Rails ( Rails ) の 「 Yay! 」のページを見ること コードはこちら https://github.com/tkhr0/hello-rails-on-k8s 早速行きましょう 今回構築する環境 図にするとこんな感じです kubernetes 要素を抜くとこんな Ngix + Rails + MySQL のよくある形です http サーバとして Nginx を立てて、 Rails (Puma) にリバースプロキシします DB には MySQL を用
開発中にプログラムが固まった時に kill プロセスID って打ったことがある方は多いかと思います 僕もそうで、 kill コマンドはプロセスを強制終了するためのコマンドだと思っていました ですが puma のログローテートを設定している時に kill -HUP って出てきてなんだこれ?ってなりました あれ?ログファイルを握り直すのに kill 使うの??プロセスを止めたいなんて思ってないよ???みたいな なのでちゃんと調べてみました TL;DR kill コマンドはプロセスに対して「シグナル」を送信するためのコマンド シグナルはプロセスがプロセス外でのイベントに対して対応するための機構 シグナルには定義があってそれごとにデフォルト動作がある シグナルの動作は上書きすることも可能 今回のシチュエーション logrotate で puma のログファイルをローテーションしたい、という状況でし
Hi. rigani_c です。 本記事では Rails における弊社 CSS チームの CSS 設計を、私の思想と併せて話します。 Sprockets を使うケースを想定しています。Sprockets は Rails 6 でもデフォルトのはず。。 また、これは未検証の設計です。 今後開発していくサービスにて導入予定の設計ですので、 大きな破綻がある可能性 があります。導入後に人柱報告しますね。 『壊れにくい CSS 設計』は全ての傷が致命傷となり得る CSS を壊れないように運用していくのは極めて困難です。 CSS は雑に書いても目的のスタイルを作れちゃいますから、設計を理解しているメンバーがプロジェクトから離れると CSS の壊死は始まり、着実に広がっていきます。 ???『なるほど完璧な設計っスねーっ 運用されないという点に目をつぶればよぉ~』 クラス名を繋ぎ合わせてプロジェクト全体に
はじめまして!きのぴーと申します! SEO対策って楽しいですよね meta tag、ページネーション、canonical、パンくず、サイトマップ、画像圧縮...などなど、対策しないといけないものは山程あります。 web制作が比較的楽だといわれている Ruby on Rails であっても全部一から導入するのはとても手間ですよね。しかし Rails には SEO対策に使える便利な gem たちが存在します。 今回は弊社サービスで実際に導入した meta-tags と sitemap_generator の2つを紹介したいと思います。 Title, Description, OGPの設定に meta-tags SNS からのシェアや流入が増え始めた今、 タイトルとディスクリプション、 OGP はしっかりと設定してSEO対策しておきたいところ。 そんなときに meta-tags という gem
こんにちは。@rigani_c です。 みなさん、SVG 吸ってますか? SVG 吐いてますか? Web ページ上で自前の SVG アイコンを使用するときの良さげな手法を持ってきました。 結論からいうと SVG スプライトを use タグ使って id 指定で呼んで CSS 変数でスタイルを変更する。更に currentColor 使うと WebFont っぽくなって最高 です。 環境は macOS Mojave の Chrome 70 です。 それではご査収ください。 本記事で SVG アイコンに求めたいこと 以下の通りです。 Web サイト内共通の CSS でパーツごとに色を変えられる ページの表示を阻害しない 修正や管理が楽にできる(@rigani_c 的に) これだけ満たしていれば御の字ですね! そもそも SVG ってそんなにええのん? めっちゃいいです。 PNG で 50KB とか
こんにちは、ベーシックのDevOpsエンジニア 奥山です。 普段は主に弊社が運営しているサービス ferret One の開発・保守の他、インフラ周りの保守運用をやっています。 今回は私がDevOps業務の一つとして行っているAWSのコスト監視についてご紹介します。 コストを監視する仕組みを導入した背景 AWSのコストは何らかの要因で急激に増加することがあります。それはサービスのインフラ周りの変更や、急激なアクセス増加が要因だったりします。 その時にできるだけ早く異変に気づける仕組みが必要だったのと、コストの無駄を詳細に分析できる体制が必要だったため、ベーシックではコストを監視する仕組みを導入しました。 コストを監視する流れ AWSにはもともと請求アラート機能やコストを分析できるコストエクスプローラーという機能がありますが、通知や分析を柔軟に行えるようにするためベーシックでは独自にコスト監
こんにちわformrunを開発している @kkyouhei です。 formrunでは先日ユーザが利用する管理画面をSPA化いたしました。 管理画面ではエンドユーザがフォームから入力してきたデータや、その後のやり取り、メモ、添付ファイルなどデータ同士がいくつも関連しています。 RailsにはActiveRecordという心強いライブラリがありますが、vuexにはState同士のリレーションを提供するような機能はありませんでしたのでvuejs ORMなどで検索したところVuexORMというライブラリがありました。 こちらをプロジェクトに導入して開発したところ開発効率が遥かに向上したのでご紹介させていただきます。 正直VuexORMがなかったら開発期間が1.3倍くらいには伸びていたのではないかという印象です。 Vuex-ORMとは? Stateにデータ同士のリレーションを提供し、基本的なCRU
Osaka RubyKaigi 01 で Rails の秘匿情報管理について LT してきました。大阪で LT するの初めてで、かつ地域 Ruby 会議で話すのも初めてだったので、どんな雰囲気なのかドキドキしましたが、終わってみると、とても楽しい時間を過ごせました。 誘ってくれた@510_fiveありがとうございます! こちらが話したスライドです。 もう「クレデンシャルください」なんて言わせない Rails に限らず秘匿情報や環境変数の管理方法をどうするのかという問題、Web アプリケーションなら必ずついて回るようなものなのですが、人やチームによってバラバラで毎回悩んでいるような気がしたので、僕が考えるベストな方法を話しました。 この方法で重要な役割を担っている yaml_vault の紹介を joker1007 さんの前でできたのが良かったです。スター数にも多少貢献できたようですw ht
説明しよう!tips集とは!? 弊社のslackチャンネルには、各々が感じた、技術的なtipsを誰に向けるわけでもなく放り投げるチャンネルがあります! ↑こんな感じです。 この記事は既出であろうがなかろうが、tipsをひたすらまとめていく記事である!! 内容にまとまりがないのはご愛嬌です!弊社の仕事の様子の鱗片が少しでも感じられれば幸いです 次回: Vol.5 前回: Vol.3 Ruby & Ruby on Rails編 scssファイルをview側に出力する方法 RailsアプリのAMP対応をSassで快適に | Qiita この技を使えばわざわざamp用にcssを書き直さなくても良くなる...かも? nil か false で論理和をとればtrue か false が返る nil | [] # => true nil | nil # => false boolean にするかなら !
どうも皆さん、現地から勉強会レポーターの私がお送り致します! 弊社には広いフリースペースが設けてあり、レクリエーションや勉強会などによく利用されています。 ベーシック開発部も、毎月の末に勉強会を開催しています!しかし今回はなんと、「フィードフォース様」と合同で勉強会を開催しました! 時々、合同で勉強会をやるのですが、毎回いい刺激をもらえるので今回も楽しみです。その刺激が少しでも伝われば ということで、まとめさせていただきます! ベーシックの月イチ勉強会はお寿司とお酒 もし弊社と お寿司を食べたい! 勉強会をしたい!!! という方がいましたらお気軽に連絡いただけると最高にハッピーでございます! ちなみにお寿司は こんな感じで、銀のさら を利用させていただいております。美味い。 お品書き ba = ベーシック / ff = フィードフォース LT1: ba 『React-Redux + JWT
説明しよう!tips集とは!? 弊社のslackチャンネルには、各々が感じた、技術的なtipsを誰に向けるわけでもなく放り投げるチャンネルがあります! ↑こんな感じです。 この記事は既出であろうがなかろうが、tipsをひたすらまとめていく記事である!! 内容にまとまりがないのはご愛嬌です!弊社の仕事の様子の鱗片が少しでも感じられれば幸いです 次回: Vol.2 Ruby & Ruby on Rails編 - refererは自由に書き換えられる request.env["HTTP_REFERER"] = "http://example.com" - Rails.root は Rails.application.config.root のエイリアス [11] pry(main)> $ Rails.root From: /usr/local/bundle/gems/railties-4.1.4
次のページ
このページを最初にブックマークしてみませんか?
『Basicinc Enjoy Hacking!』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く