小さなエンドウ豆

まだまだいろいろ勉強中

ActiveRecord でテーブルをダウンタイムなしで洗い替えする方法

ActiveRecord でテーブルをダウンタイムなしで洗い替えする方法 小ネタです。 こんな要件がありました。 「月一でこのテーブルをあるデータで洗い替えてほしい」 ActiveRecord を使うと delete_all してから insert すれば簡単なのですが、その間にデータへ…

ElasticSearch と Kibana で位置情報(geo_point)を扱う

ElasticSearch と Kibana で位置情報(geo_point)を扱う 前に MySQL 8 で GIS 関数を使ってみたが機能によってはインデックスが無効になってしまうものがあるためパフォーマンスの面で懸念をしました。 h-piiice16.hatenablog.com これらを解消すべく僕の中…

appium で Android の E2E テストを書く

appium で Android の E2E テストを書く 最近 Android 開発をちょこちょこしているのですが、フロントエンドの E2E テストみたいに自動でテストしてくれるものが Android にも無いかなー と探していたところ appium というツールを見つけたので使ってみたと…

MySQL8 の GIS 関数を使ってみる

MySQL8 の GIS 関数を使ってみる MySQL では geometry 型という緯度経度をテーブルで扱うことができます。 これと組み合わせて MySQL8 から本格導入となった GIS 関数を使うと何ができるのか調べていきたいと思います。 GIS 関数とは GIS とは地理情報システ…

GTFS を Deck.gl のデータ形式に変換する

GTFS を Deck.gl のデータ形式に変換する 先日「Geospatial Hackers Program 沖縄」というハッカソンに出た際に GTFS という形式のデータを使った。 このデータ形式はバスなどの公共交通機関の時間表をオープンデータにする際の一般的なフォーマットらしい。…

AWS SQS + Lambda + SES でメール送信システムを作る

AWS SQS + Lambda + SES でメール送信システムを作る Web サービスを運営しているとメールを送信したいタイミングが山程あります。 例えば、ユーザーの新規登録時、定期的に送信するメルマガ用途は多岐に渡ります。 メール送信の仕組みをモノリシックにサー…

スタートアップのための AWS Fargate 入門

スタートアップのための AWS Fargate 入門 本記事は以下の内容を読んでより具体的な方法について書いたものです。 aws.amazon.com そもそもコンテナが解決しているもの アプリケーションを動かすにはコードだけでなく関連するコンポーネントが揃っている必要…

Slack(Bolt)から Github Actions を実行

Github Actions を Slack から実行 背景 先日 Github Actions を使って Nuxt アプリケーションを S3 にアップロードし CloudFront で配信するワークフローを作りました。 h-piiice16.hatenablog.com ただ、このワークフローではブランチが固定になっており、…

Vuex の型定義全部書いてみた

Vuex の型定義全部書いてみた Vuex + TypeScript での問題点 getters の型定義が any mutations / actions の payload が any 型 payload とは以下のような mutation があったとすると、第一引数が state オブジェクトでそれ以外の引数のことを言います。 mu…

Rails アプリケーションから gRPC サーバー に接続するまで

Rails アプリケーションから gRPC サーバーに接続するまで そもそも RPC とは あるコンピュータで動作するソフトウェアから、通信回線やコンピュータネットワークを通じて別のコンピュータ上で動作するソフトウェアへ処理を依頼したり、結果を返したりするた…

Github Actions と S3 + CloudFront を使って Nuxt アプリケーションを配信

Github Actions と S3 + CloudFront を使って Nuxt アプリケーションを配信 Nuxt.js を CloudFront で配信する方法が手軽で便利そうなのでやってみました。 Github Actions を組み合わせることによって master への push を検知して S3 へのアップロードを自…

nuxt-property-decorator を使って Vue コンポネントをクラス構文に対応させる

nuxt-property-decorator を使って Vue コンポネントをクラス構文に対応させる Nuxt + TypeScript のプロジェクトを考える際にあると便利な nuxt-property-decorator について調べたのでまとめる。 とりあえず使ってみた感想はクラス構文にすることによって…

複数 docker-compose 間でネットワークを共有する方法

複数 docker-compose 間でネットワークを共有する方法 方法としては世の中に出回っているがちょっとつまずいたのでメモ程度にまとめる。 用途としてはサーバーとフロントエンドの環境をそれぞれ docker-compose で組み立てたがその動作確認がしたいときなど…

Grape + Grape Entity で作る API

Grape + Grape Entity で作る API Grape をよく使うので基本的な使い方から開発方法などを記す。 あと思いの外 Grape Entity が便利なので小技などをまとめておきたい。 Grape とは github.com Rails で RESTful な API を開発するためのフレームワーク。 Ra…

Active Storage で複数枚画像を削除する方法

ActiveStorage で画像を複数枚削除する方法 Rails 5.2 で Active Storage が gem 使わずとも添付ファイルが実装できるため使用している。 Rails ガイド を見ると1つのオブジェクトに対して複数の画像を添付することができる has_many_attached という機能が…

NativeScript-Vue でログが見たい

NativeScript-Vue で console.log の内容を見る方法 NativeScript を使って開発していて不便に思ったので記す。 外部 API にリクエストを送る際、レスポンスが返ってきているか普段の JS での開発では console.log などにはいて確認すると思われるが、Native…

Javascript (Webpackプロジェクト) で .env

JS で環境変数を管理する dotenv による環境変数の管理 先日環境変数周りで失敗をしてしまったため .env を使った環境変数の管理について学んでいく。 Rails プロジェクトだと dotenv という gem があって、それを使って .env ファイルに書いた変数の値を読…

docker-compose run で bundle install を動かす

docker-compose run で bundle install 地味に忘れてしまうのでここで記録。 docker-compose.yml を以下のように記述するととりあえず動いた。 version: '3' services: web: build: . command: bundle exec rails s -p 3000 -b '0.0.0.0' volumes: - .:/rese…

Native Script + Vue.js + Mapbox で地図アプリを作ってみた

Native Script + Vue.js + Mapbox で地図アプリ Native Script とは Javascript もしくは Angular もしくは Vue を使って Web アプリとAndroidやiOSアプリを同時に作れる統合開発環境 ↑らしいw これなら Web 屋さんの自分でも触れると思い使ってみることにし…

1 つのモデル(テーブル)に複数の外部キーをもたせる

テーブルの同じモデルの外部キーを複数もたせる バージョン rails: 5.1.4 Rails のマイグレーションで外部キーを持たせるために必要な記述として以下のように reference を使った方法がある def change create_table :records do |t| t.references :users, i…

Safari で SVG の画像が表示されない

Safari で SVG の画像が表示されない 表題のまんま。 D3.js でこねこねした SVG 要素の中に image タグを用いて画像を扱う際になぜか Safari だけ表示されなかった。 D3.js のコードは以下のようなもの svg.append('image') .attr("id", icon.name) .attr("h…

WordPress の記事に D3 で作ったグラフを挿入する

WordPress に D3 で作ったグラフを挿入する wp-d3 というプラグインを使って d3 で作ったグラフを載せてみました。 使い方などをここに示しておきます。 プラグインをインストール WPのダッシュボード > プラグイン > 新規追加 > 「wp-d3」で検索 > インスト…

Docker compose を使って WordPress ローカル環境を作った話

Docker を使ってWordPressのローカル環境を構築 現在 WordPress 公開されているページに対して新たに機能を追加する案件が降ってきました。仕事ではないですが… まずローカルに本番同様の環境を作りたいが、今までだと仮想環境を作って、Webサーバどうしよう…

【Rails】Javascript で使う変数等を環境変数にまとめる

Rails プロジェクトの環境変数を JS で使用する Rails アプリケーションで外出したくない環境変数は .env に書き込んで dotenv-rails を使って呼び出すのが一般的らしいので設定してみました。 ただ、今回は mapbox という Javascript のライブラリの API to…

Kaggle に初挑戦

Kaggle とは 簡単に言うにまとめると データ持ってる人がデータ投稿する 投稿者がコンペを開く 世界中のデータサイエンティストたちが分析を行う 分析結果を Kaggle に提出してスコアが算出される 算出されたスコアをもとに競う 細かくいうとこんな感じです…

Railsでdb:seedを用いたデータの用意

db:seed とは Rails アプリに予め必要なデータをデータベースに一括で投入することができる機能。今回はアプリ内でenumっぽく使いたいデータをどんどん投入していきます。 手順 まずはモデルとmigrateファイルを作り、db:migrateを実行します。 $ rails gene…

leaflet.jsの地図に駅をプロットする

leaflet.jsの地図に駅のレイヤーをオーバーレイする 前回作ったtopojsonをleaflet.jsを使って描画した日本地図に載せていきます。 方法としてはD3.jsでjsonを読み込んでレイヤーを作り、日本地図にオーバーレイする。 では始めます。 (鉄道データ引用元) …

topojsonへの変換と鉄道データの描画

geojson から topojson への変換 geojsonからtopojsonへの変換はググったらたくさん出てきてどれもnodejsのパッケージのtopojsonを使ったものが多かった。今回もそれを使います。 $ npm i -g topojson $ geo2topo -q 1e6 railroad=N02-15_RailroadSection.js…

国土数値情報の鉄道データ(shp)をgeojsonへ変換

手順 データ のダウンロード QGISのインストール .shp -> .json の変換 それぞれ説明します。 データのダウンロード データはこちらです。 このページの下の方からダウンロードしてきます。 データが年度で分かれているのですが、27年をダウンロードしまし…

React-Dropzoneが便利

ドラックアンドドロップでファイルをアップロードしたい 最近?のWEBサービスではよくファイルをアップロードする際ドラックアンドドロップで行う場合が多い。 今回はそれを自分のサービスの中にも使いたいと思い実装してみました。 Reactにはそんな願いを叶…