アクトインディ開発者ブログ

https://tech.actindi.net/

子供とお出かけ情報「いこーよ」を運営する、アクトインディ株式会社の開発者ブログです

フィード

記事のアイキャッチ画像
ChromebookでのOS更新
アクトインディ開発者ブログ
(こんにちは|こんばんは)。情シス(PCおじさん)の kadota です。 弊社では、社員が利用するPCの種類が Windows、Mac、Chromebook の3種類あります。 Chromebook は管理が楽だったり、意外とできることも多かったりで、気に入っています。 そんなPCおじさん想いの Chromebook ですが、OSの更新もひたすら楽です。 今回はその更新の際のコツ(というほどでもない)をご紹介します。 ※Chrome Enterprise Upgrade を使っていればもっとラクなのでしょうが、今記事はそれが無い環境で試しています。 Chromebook の ログインアカウン…
2年前
記事のアイキャッチ画像
投稿100 本目! これまでの振り返り
アクトインディ開発者ブログ
morishitaです。 このエントリで私の 100 本目の投稿となります。 桁が増えてひと区切りということでこれまでの自分の投稿を振り返りたいと思います。 最初の投稿が 2017/08/14 の「いこレポ はじめました。」でした。 そこから今月まで 55 ヶ月、ということは月に約 1.8 本。 だいたい隔週に 1 本投稿してきたことになります。 実際には毎日のように投稿していた時期もあれば、数週間投稿しなかった時期もあるのでコンスタントに月 2 本弱というペースではありませんでした。 私のこれまでの投稿の一覧はこちらです。 tech.actindi.net 投稿記事の傾向 ざっとこれまでの投…
2年前
記事のアイキャッチ画像
Windows11 で WSL を触ってみた
アクトインディ開発者ブログ
morishitaです。 ここ 10 年ほどほとんど Windows OS を使っていません。 社会人になってしばらくは Windows を使ってました。 しかし、やがて仕事では Linux を使うようになり、その後 Mac に乗り換えてからはずっと Mac です。プライベートでも Mac です。 Windows 7 までは Mac 上の VirtualBox の仮想マシンにインストールして極稀に(IE で動作確認するためなどに)使っていたのですが Windows 10 では動作が遅すぎてそれもやらなくなりました。 ということで、Windows 7 より新しい Windows はほぼ使ったこと…
2年前
記事のアイキャッチ画像
docker-compose の depends_on と healthcheck について
アクトインディ開発者ブログ
morishitaです。 アクトインディでは開発環境で Docker Compose を利用しています。 Rails などで構築する一般的な Web アプリケーションは DB を必要とするとので最低でも次の2つのコンテナを含むと思います。 DB のコンテナ アプリケーションコンテナ アクトインディで実際に開発に使っているものでは nginx や webpack-dev-server のコンテナのあったりするので 3−4コンテナ動きます。 これらのコンテナは決まった順番に起動するしないとエラーになったりします。 例えば、Rails は DB に接続できないと起動に失敗します。 そんな起動順を制御…
2年前
記事のアイキャッチ画像
PlantUML
アクトインディ開発者ブログ
morishitaです。 開発の中でドキュメントを書くことがあると思います。 しっかりした仕様書を作成するところもあるでしょうし、重要な部分のみメモ程度ということもあると思います。 ドキュメントでは文章を書くことが多いとは思いますが、文章だけでは説明が難しい場合、図を書いたりすると思います。 システム開発での図というとクラス図やフローチャートなどかと思います。 独自の記法だと見せられる方が困るので、とりあえず厳密でなくても UML を利用しているのではないでしょうか。 今回は UML を描くときに便利な PlantUML について書きます。 UML とは? そして PlantUML とは? P…
2年前
記事のアイキャッチ画像
CDKv2 を触って既存のCDKv1プロジェクトをマイグレーションしてみた
アクトインディ開発者ブログ
morishitaです。 アクトインディのインフラの多くは AWS CDK を利用して構築しています。 それについていくつかのエントリで紹介してきました。 tech.actindi.net そして 2021 年 12 月に初のメジャーアップデートとなる v2.0.0 がリリースされました🎉。 github.com ちなみに 2022/02/04 現在の最新バージョンは v2.10.0 です。 今回は CDKv2 を触ってみて、既存プロジェクトをマイグレーションしてみたので紹介します。 なお、本エントリは Typescript 前提です。 まずは触ってみる とりあえず、CDKv2 を触る最初の一…
2年前
記事のアイキャッチ画像
RailsでActiveStorage使っていない場合の注意点
アクトインディ開発者ブログ
RailsでファイルアップロードをActiveStorage以外でやる場合のお話 アクトインディのSampo Kuokkanenです。 さて、皆さん、RailsでファイルのアップデートはActiveStorage使っていますか? 公式のファイルアップデートのやり方ですし、ほとんどの場合は使った方が無難かと思います。 なぜ使わない場合もある? ファイルの保存のフォルダー構成などを自由にやりたい場合は使えないですので、 使わないという選択肢もあり得ます。 今回は使っていない場合の注意点を書こうと思います。 # application.rb require 'rails/all' と書いている場合は…
2年前
記事のアイキャッチ画像
Elastic Beanstalk 応用編
アクトインディ開発者ブログ
morishitaです。 アクトインディではいこレポやいこーよとりっぷなどいくつかのサービスで稼働環境として AWS Elastic Beanstalkを利用しています。 前回は Elastic Beanstalk で極々簡単な Web アプリをデプロイするして公開するまでを紹介しました。 tech.actindi.net 今回は少し発展的な使い方を紹介します。 もっといろいろ設定したい 前回はほとんど何も設定せず、デフォルトのまま Web アプリをデプロイしました。 Elastic Beanstalk には色々と設定できる項目があり、一旦、「環境」を作ると AWS の Web コンソールから…
2年前
記事のアイキャッチ画像
Elastic Beanstalk 入門
アクトインディ開発者ブログ
morishitaです。 アクトインディではいこレポやいこーよとりっぷなどいくつかのサービスで稼働環境として AWS Elastic Beanstalkを利用しています。 本エントリでは Elastic Beanstalk を使ってみる例として Docker コンテナで極々簡単な Web アプリを公開する流れを紹介しようと思います。 AWS Elastic Beanstalk とは AWS Elastic Beanstalkは Web アプリケーションを稼働させるインフラをまるっと用意してくれるサービスです。 公式サイト「AWS Elastic Beanstalk(ウェブアプリの実行と管理)|…
2年前
記事のアイキャッチ画像
M1 mac 上で Lima の Intel on ARM を試してみる
アクトインディ開発者ブログ
morishitaです。 前回は M1 Mac 上の Docker Desktop でオーソドックスな構成の Rails アプリケーションであるいこレポの docker-compose の開発環境を動かしてみました。 思ったより少ない変更で動くことが確認できました。 tech.actindi.net ※ ↑前回のエントリを前提にしているところもあるので先に読むことをおすすめします。 今回は同じ docker-compose を Lima の Intel on ARM な仮想マシンで動かしてみたいと思います。 マシンスペック etc は次の通りです。 MacBook Pro(14 インチ、202…
2年前
記事のアイキャッチ画像
M1 Mac 上の Docker Desktop で Intel Mac で使ってきた Docker Compose を動かしてみる
アクトインディ開発者ブログ
morishitaです。 昨年、Macbook Pro が一新されて最新モデルは、Apple Silicon 搭載機、つまり M1 Mac のみとなりました。 2020 年に最初の M1 Mac が出たとき、 ARM 系 CPU に変わるということから私が思ったのは「開発環境で使っている Docker イメージが使えなくなるのでは?」ということでした。 実際、M1 上の Docker Desktop では x86_64 向けのイメージからコンテナを作成できます。 しかし、Intel CPU がエミュレートされるのでものによっては動かないものもあるようです。 アクトインディでは開発環境を Doc…
2年前
記事のアイキャッチ画像
Amazon ECR Public Gallery から Docker Official Images を利用する
アクトインディ開発者ブログ
morishitaです。 サーバーサイドの開発では Docker コンテナを利用することが一般的になりました。 本番環境はもちろん、開発環境も Docker Compose などコンテナで構築することが多いのではないでしょうか。 その際、Ruby や Node.js といったプログラミング言語や MySQL や Redis などのミドルウェアは Dockerhub で提供されている Docker Official Imagesをそのまま利用したり、自前のイメージをビルドする際のベースに使うことが多いと思います。 一方、2020 年 11 月から Dockerhub からイメージを Pull す…
2年前
記事のアイキャッチ画像
JSなしでRailsで簡単に遅延読み込みしたい!
アクトインディ開発者ブログ
いこーよとりっぷ 子連れで楽しめる地域の観光情報 JSなしで遅延読み込み - Render Async いこーよとりっぷという子育て中の家族向けの旅行メディアの開発をやっているSampo Kuokkanenです。 さて、いこーよとりっぷは遅延読み込みをしたい箇所があり、もともとはVueで実装されていました。 こちらをRailsのみにできると思っていて、使った経験もあったGemのrender_asyncで実装することにしました。 どちらがいいか?を考える時、以下のポイントがあるかと思います: 純粋にJSで実装 細かいクリックイベントの制御などができる JSONを扱うことになるので、モバイルアプリ…
2年前
記事のアイキャッチ画像
Argo CD を使ってテスト環境にデプロイした話
アクトインディ開発者ブログ
最近インフラの勉強を始めた komatsu です。 今回はEKSクラスター作成から ArgoCD を使ったいこーよのデプロイまでの手順とそこから学んだことを書きたいと思います。 現在、いこーよ の Rails アップデートを行っています。 その検証としてカナリアリリースを実施予定ですが、 これは本番のEKSクラスターに ArgoCD でアプリケーションを追加する作業で、ローカル環境でしたかクラスターを作ったことがない不慣れな私にはハードルが高い作業でした。 そこで、テスト用アカウント(本番とはAWS アカウントが異なる)でEKSクラスター作成から ArgoCD を使ったデプロイまでをやってみて…
2年前
記事のアイキャッチ画像
asdf で複数バージョンのCLI を使い分ける
アクトインディ開発者ブログ
morishitaです。 今回は asdf について書きます。 いこーよは EKS で運用しており、9 月まで kubenetes 1.17 を利用していました。 EKS を導入しようと移行作業をしていたときにはそれほどアップデートのペースは速くないと思ってのんびり構えていました。 しかし、最近、AWS が頑張ってアップデートのペースを上げ始め、今年の 11 月の初めに 1.17 は EOS というではないですか! 他に忙しいので、もうアップデートは少し先送りしたかったのですが EOS 前にアップデートしなくちゃということで 9 月末に 1.21(現時点の EKS での最新バージョン)にアップ…
2年前
記事のアイキャッチ画像
VSCode の Jupyter で Ruby を使う
アクトインディ開発者ブログ
morishitaです。 今回は小ネタを1つ。 VSCode の Jupyter 拡張は手軽に Jupyter Notebook が使えて便利です。 Python さえインストールされていれば、必要なライブラリがインストールされていなくても拡張子 .ipynb の Notebook ファイルを開いたときにダイアログが表示され、指示に従うとインストールしてくれます。 その後は Notebook ファイル内でコードを実行することが可能になります。 ローカルで Jupyter サーバを動かすよりも手軽に Notebook ファイルを利用できます。 Jupyter Notebook で Ruby を使…
2年前
記事のアイキャッチ画像
YJITでRailsを動かす in macOS
アクトインディ開発者ブログ
s4naです。 とうとうRuby 3.1にYJITが追加されましたね🎉🎉🎉 YJIT has been merged. https://t.co/EeSR7atzMr #ruby— Hiroshi SHIBATA (@hsbt) October 20, 2021 Shopifyさんのブログによると、既にRailsでも動作するという話がありました。 今回はmacOSでRailsを動かす方法について書いてみました。 shopify.engineering 作業するにあたって必要な環境 homebrew, ruby-build, rbenvインストール済み rbenvにて何らかのバージョンのRuby…
3年前
記事のアイキャッチ画像
Paperclip をアップデートした話
アクトインディ開発者ブログ
komatsu です。 いこーよでは Rails アップデートの前段階として gem のアップデートを行っています。 その中で Paperclip のアップデート時の不具合とその対処方法を発見するまでが大変だったので書きたいと思います。 周知のとおり paperclip の開発は終了してますが、kt-paperclip としてメンテナンスされており、今回切り替えることになりました。 これに伴い、aws-sdk gem も version 2 から Version 3 へアップデートする必要がありました。 下記の記事にもある通り、いこーよでは nginx の HttpImageFilterMod…
3年前
記事のアイキャッチ画像
GAS で Zip 圧縮された Excel を解凍しようとしてエラーが出た話
アクトインディ開発者ブログ
morishitaです。 いこーよは外部サービスとの連携をいくつかしています。 チケット販売もいくつかのサービスとの連携をしています。 その様な連携先の1つに毎日の実績データの Excel ファイルをメールに添付して送ってくるものがありました。 担当者に毎日メールされてくるので、それを Google Drive 上の共有ディレクトリに保存して共有するということをしていました。 日次実績ファイルを1つづつ開いて確認するのは面倒ですし、日次集計の数字を見ていても週間、月間でのトレンドを把握するのも難しいです。 それを解決しようと担当者が Data Studio で可視化する様にしてくれました。 た…
3年前
記事のアイキャッチ画像
Rails の入力フォームのエラー表示のカスタマイズ
アクトインディ開発者ブログ
morishitaです。 Web アプリケーションではユーザの入力を求めるために入力フォームを実装することがあります。 HTML の <form> や <input>、<select> タグなどを使ってテキストボックスやラジオボタン、セレクトボックスなどで構成する UI ですね。 入力フォームの例 Rails ではフォームを構成するためにフォームヘルパーと呼ばれる一連のヘルパーメソッドが提供されており、ビューテンプレートの中で利用できます。 それらを使って比較的簡単にモデルオブジェクトと連動した HTML フォームを実装できます。 rails generate を使えば動作するテンプレートの生…
3年前
記事のアイキャッチ画像
Railsで #update のできるFormObjectを作る
アクトインディ開発者ブログ
最近FormObjectを作ろうと思って調べてみたところ、ネット上の記事だと #update ができなかったり、Ruby 3.0 だとそのまま動かなかったりしたので、需要があるかと思い作成しました。 まだまだ色々改善点があるので、元のリポジトリの方でもう少し改善していこうと思っています。 また、FormObject自体に関する説明は、こちらのサイト(Railsのデザインパターン: Formオブジェクト)によくまとまっているので、ご参照ください。🙏 モデル フォーム コントローラー ビュー スキーマ 参考 モデル class Post < ApplicationRecord end フォーム c…
3年前
記事のアイキャッチ画像
textlint editor を使ってブラウザで textlint を使う
アクトインディ開発者ブログ
morishitaです。 久しぶりに文章校正ツール textlint について書きます。 textlint については過去に2回取り上げました。 tech.actindi.net tech.actindi.net 過去のエントリはテキストエディタから利用する方法を紹介したものですが、今回は textlint のブラウザ拡張について紹介します。 以前からブラウザ上で文章を書くときにも textlint を使いたいなぁと思っていました。 結構前からtextlint: 文章チェッカーという Chrome 拡張があるのですが、自由にルールを設定できないようだったので見送っていました1。 今回紹介するも…
3年前
記事のアイキャッチ画像
Android版いこーよの中身。Jetpack Navigation編
アクトインディ開発者ブログ
Androidアプリエンジニアのhondaです。 Android版いこーよではNavigation componentを導入しています。 今回はNavigation componentで画面遷移を実装している際のTIPSを紹介したいと思います。 このブログではNavigation componentについては深く説明しません。 Navigation componentについては下記の公式ページを御覧ください。 developer.android.com NavigationのstartDestinationを切り替える Android版いこーよでは今まで1画面1Activityという構成で作ら…
3年前
記事のアイキャッチ画像
VCR 設定 Tips
アクトインディ開発者ブログ
VCRのちょっと便利な設定を紹介します。
3年前
記事のアイキャッチ画像
私のAWSを勉強する道
アクトインディ開発者ブログ
こんにちは、クアンです。 今年からRubyコードを書くだけではなくAWSのサービスをやりたいので、勉強をはじめました。 この投稿の内容は私の勉強した方法です。 初めに困ったこと AWSは3つのパスがあります:アーキテクト、デベロッパーとシステムオーパーレーターのパスです。 ソリューションアーキテクト: AWS における分散システムの可用性、コスト効率、高耐障害性およびスケーラビリティの設計に関するスキルを認定する デベロッパー: AWS ベースのアプリケーションの開発や保守に関するスキルを認定する SysOps アドミニストレーター: AWS でのデプロイ、管理、運用に関するスキルを認定する …
3年前
記事のアイキャッチ画像
Google スプレッドシートで、複数シートの情報を自由にレイアウトしたシートを作る
アクトインディ開発者ブログ
こんにちは、kadotaです。 複数の社員にそれぞれの入力シートを持たせ、そのデータをひとまとめに閲覧できるものが欲しい、という簡単な社内ツール的なものをこしらえることがあったのでそのお話です。 Googleスプレッドシート と Google Apps Script (GAS) を使います。 入力側を作る これは単純で、テンプレートとなるスプレッドシートを用意し、それをコピーして対象社員に配ります。 編集権限を個別に与えて、それぞれの社員のみが各自のシートに入力できる形にしています。 (実際はGASで生成用シートを元に複製させてますが今回は細かい説明を割愛します) 閲覧側を作る 閲覧側では、複…
3年前
記事のアイキャッチ画像
CIで使っているMySQLのメモリ使用量を調整した話
アクトインディ開発者ブログ
最近CIが3回に1回くらいメモリ不足で落ちて辛かったのでメモリ使用量の見直しを行いました。 原因の特定 まずはエラーメッセージを確認します。 Codebuildのメッセージを見てみると、以下のように書かれていました。 # 〜中略〜 rails-test | /usr/local/bundle/gems/simplecov-0.21.0/lib/simplecov/source_file.rb:182:in `gets': Cannot allocate memory @ io_fillbuf - fd:9 /app/app/helpers/xxx_helper.rb (Errno::ENOME…
3年前
記事のアイキャッチ画像
目標を一つに絞ったらRuby Gemがリリースできた話
アクトインディ開発者ブログ
s4naです。 今回はKageuchiというWebサーバーのRuby gemをリリースした話を書いていきます。 作ろうと思ったきっかけ 2020/8/3にKaigi on Railsというイベントが行われました。 kaigionrails.org イベントの中でAaron Pattersonさんが行っていた発表は、「0から小さなWebサーバーを作り、それに少しづつ機能を追加していってRuby on Railsに近づけることで、Ruby on RailsでViewがレンダリングされるまでを解説する」といった内容のものでした。 www.youtube.com この発表を見てビビッ⚡️ときました。 …
3年前
記事のアイキャッチ画像
SvelteでWeb Componentsを作ってみた
アクトインディ開発者ブログ
morishitaです。 前回のエントリでフロントエンドフレームワーク Svelte を紹介しました。 tech.actindi.net 今回は Svelte で Web Components を作ってみようと思います。 Svelte 入門に書いた Typescript, Pug, Sass を使えるようにした状態を前提とします。 Web Components のための設定 Svelte コンポーネントを Web Components としてビルドするにはrollup.config.js の svelte の設定に追加が必要です。 以下に rollup.config.js の抜粋を示しますが、…
3年前
記事のアイキャッチ画像
Svelte 入門
アクトインディ開発者ブログ
morishitaです。 今回は JavaScript の UI フレームワーク Svelte を紹介します。 アクトインディでは今の所、フロントエンドフレームワークとしては Vue.js を使っていますが、これもなかなか良さそうだと思ったのでちょっと触ってみました。 プロジェクトの初期化から、次を使えるようにするまでを書きたいと思います。 typescript pug sass jest eslint Svelte とは Web フロントエンド開発のための UI フレームワークです。 2019 年にリリースされた Svelte3 で大幅にアップデートされたようです。Vue の SFC によく…
3年前