Carrierwave + carrierwave-vips 利用時、webp の変換に対応する

carrierwave-vips を利用し、画像を変換する場合、libvips が対応しているフォーマットであっても、 class ImageUploader < CarrierWave::Uploader::Base process convert: "webp" end 例えばこのように、jpg, jpeg, png 以外の、webp を指定してしまうと、A…

libvips で heic フォーマットの変換に対応する

apt-get install libvipsで install した libvips は、heic フォーマットに対応していない。例えば ruby-vips で使うような場合は、以下のようにソースコードからコンパイルする必要があります。 FROM ruby:3.2.2-slim as base # ==========================…

vuetify v-tabs 利用時、アニメーションを変更、停止する方法

ドキュメントには書いてないので、どうやってv3で切り替えアニメーションをオフにするのか調べたが、https://vuetifyjs.com/en/api/v-tabs/#props`transition="none"` `reverse-transition="none" `の2つを指定する。 v2では、`transition="false"` だけでよ…

AWS copilot のバージョンを上げた後デプロイエラーが発生する

install されている copilot を、既存のプロジェクトで途中からアップデートした場合、 copilot deploy の実行時エラーが発生することがある。 ✘ execute svc deploy: upload deploy resources for service app: put addons artifact to bucket stackset-hog…

AWS Elemental MediaConvert で、hls を 生成時、iOS で再生されない

動画をStreaming再生させたい時、AWS Elemental MediaConvert で hls に変換を行った。特徴 - AWS Elemental MediaConvert | AWS変換後の動画情報や変換状態は、EventBridge から取得出来るが、COMPLETE event に含まれる、変換後のURLが2種類ある。これのど…

React で Swiper を使うため、react-id-swiper を利用したが動かない

react-id-swiper@4.0.0 を利用したときに、不具合があったり、使いづらかったりした点がありました。 スタイルが反映されない swiper@6.8.4 であれば以下のように書けば、スタイルが反映されますが、 swiper@7.0.6 では、 @import "swiper/swiper-bundle.css…

Deep Link / App Links / Universal Link / Firebase Dynamic Links 使い分け

アプリを作るとき、URLをクリックしたときに、アプリがインストールされていれば、アプリを立ち上げたい。 このとき最も良い方法をまとめます。 Deep Link 用途 特定の技術を説明した言葉ではなく、アプリの特定のページを開くことが出来るリンクを表す。 実…

Flutter で Facebook login を実装時にエラー

Flutter で flutter_login_facebook を使い、Facebook login の実装時にエラーが発生した。M1 Macならではの問題かと疑いながら調べていたが、関係はなく、解決できた。このような感じのエラーが発生した。 `Error output from Xcode build: ↳ objc[88641]: …

Aws::S3::Client.copy_object の copy_source は、URL encode されていなければならない

例えば、バケットからバケットへオブジェクトをコピーするときに、 `The specified key does not exist.` とエラーが出る場合がありました。 client = Aws::S3::Client.new client.copy_object( bucket: out_bucket_name, copy_source: src_bucket_name + '/…

vue-scrollto などの smooth scroll を利用する対象に、 nuxt-link を指定すると正しくスクロールしない

nuxt 利用時、URLに hash ( #hoge ) を設定すると同時に、スムーズにするロールするを行いたい場合、一般の方が書いた記事には、to をカラにすればいいと書いてありますが、正しく動作しない条件が存在します。 <div id="note"></div> <nuxt-link to v-scroll-to="'#note'">noteクリック</nuxt-link> <div id="memo"></div> <nuxt-link to v-scroll-to="'#memo'">memoクリック</nuxt-link> このように記載…

serverless framework で 日本語のPOSTされたデータを文字化けせず受け取る

serverless framework を使い、AWS Lambda や API Gateway を用いたシステムで、multipart/form-data 形式のデータを受け取る場合、日本語データのとき、文字化けが発生する。元々AWS Lambda は、input / output に text を扱うようになっているので、バイナ…

Vue3 を利用するときに、どうやって this.$scrollmagic を取得するのか

Vue2 から Vue3 になり、出来ることは変わりませんが、 以前では root context にアクセスするためには、this という書き方でよかったものが、composition-api に変わった今後、どのように書けばよいのかを書きます。例えば、this.$scrollmagic と書けていた…

AWS copilot でサーバー構築

AWS copilot は、webサーバー、バックグラウンドで常時起動するサーバー、定期ジョブ(Cronのような)が、かなり簡単なymlとコマンドだけでセットアップでき、オートスケールにも対応できます。GCPのKubernetesに近いです。 コンテナ内でコマンドを実行し、D…

CircleCI や Github Actions などで、 firebase deploy を行う

firebase deploy には、 token を利用した方法と、サービスアカウントを利用した方法がある。token を利用する記事は多くあるが、問題点があり、特定ユーザーの権限が全て circleci に渡ってしまうため、別プロジェクトも操作できてしまう事と、ユーザーをプ…

vue.js や react を使用したとき、formrun のバリデーションが機能しない

オリジナルデザインのformを作るときに利用するサービスに formrun というサービスがありますが、 React や Vue.js を使うと、ビルドをすれば動くが、npm start した local 実行の時や、ページ遷移後に、form の validation が動かない問題があります。動か…

NTT Com の Cloudn がサービス終了と言うことなので、CloudObjectのデータを移行する。S3互換APIの場合、Amazon S3のAWS署名バーション2を利用しているサービスが多いようだ。 awscli を使いたい場合、古いバージョンをインストールする必要がある。 awscli …

create-react-app で始めたプロジェクトで、pug を使う

create-react-app をして作ったプロジェクトで、pug を使う方法。 基本的なことなのだが、日本の記事があまりないようなので書くことにする。 pug の書き方 pugという関数でタグ付けされたテンプレートリテラルを使う書き方になる。テンプレート文字列 - Jav…

Paker で Chef を利用時、ライセンスエラー

Packer で type に chef-solo を指定時、コマンドが失敗するようになった。 これは、ライセンスの承諾が必要になったことが原因。 Chef Infra Client cannot execute without accepting the license Chef never successfully completed! Any errors should b…

Kubernetes を利用時、大きいデータサイズの画像を複数回POSTするとエラーが出る

Rails を用いて、画像アップロードをするシステムを作っていた時、画像を連続3回アップロードすると502エラーが出る場合があった。これは、メモリの使用量が大きくなり、pod 内のプロセスがkill されていたことが原因だった。 Ruby on Rails のメモリ消費が…

Android で スタティックライブラリを利用する

Android の開発時に、C++などで作られた 静的ライブラリ〜.a や、共有ライブラリ〜.so を利用したい時。まず、ビルド設定方法は1つではない。CMakeLists.txt を使う方法、Android.mk を使う方法と、やり方が選べる。また、 so ファイルは、アプリケーション…

Google Cloud Storage 静的ウェブサイトのホスティング 時、 index.html へリダイレクトされる

静的ウェブサイトのホスティング | Cloud Storage | Google Cloudgcs を利用し、 website をホスティングした時に、 スラッシュ無しのパスへアクセスしたとき、/index.html が存在する場合、/index.html が付加されたURLへリダイレクトしてしまう。 しかも、…

CloudFront の Origin に API Gateway を入れた場合に リダイレクトが発生する

API Gateway で API を作った場合など、そのURLをCloudFrontのOriginに指定したい時がある。その時に、Origin Protocol Policy を、HTTP Only にしていると、リダイレクトが発生する。HTTPS Onlyにする必要がある。

Vue のファイル出力先を変更する

Vue の デフォルトの出力フォルダは、dist フォルダになっているが、他のフレームワークと共に使うような時、出力先を変えたい場合がある。 さらに出力先を公開ディレクトリ(/public)のサブディレクトリ(/public/webview)にしたい場合の vue.config.js の設…

GKE Kubernetes で 、無料で https を利用する

GCPでは、https にて通信するための、マネージドな証明書を発行する仕組みがあるため、とても簡単に利用できます。 GKEで利用するためには、 Ingress に annotations を追加するだけです。 まずマネージドな 証明書を作成 $ gcloud beta compute ssl-certifi…

GKE Kubernetes で Redis を利用する

GCP で フルマネージドのインメモリ データストア を使いたい場合、Memorystore for Redis を利用することになる。Redis インスタンスに接続するためには、同じリージョンに配置され、同じネットワークを使用するGoogle Kubernetes Engine クラスタである必…

GKE Kubernetes で Ingress が 503 を返す

GKE を利用時に、GKE Ingress を利用した時に、どう考えても設定が正しいのに 503 が帰る場合があった。 注意しなければいけないポイントは、 ヘルスチェックのURLは200を返さなければいけない (当然BASIC認証もかかっていてはいけない) ヘルスチェックのURL…

GKE Kubernetes で CloudSQL を利用する

Cloud SQL を利用するためには、直接接続するのではなく、 Cloud SQL Proxy を利用します。 Cloud SQL Proxy は Docker image として公開されているため、こちらを使います。 Googleのドキュメント通りに設定すれば通信出来ます。 Pod 内に Proxy の Contain…

Mysql8.0 で パスワードを無しに設定したい場合

パスワードを空に設定しようにも、バリデーションが働き、空に設定できません。 バリデーション機能を無効化することで、自由なパスワードを設定できるようにします。 無効化 UNINSTALL COMPONENT 'file://component_validate_password'; 有効化 INSTALL COM…

ActiveJob で active_elastic_job を利用時、設定が反映されない

active_slastic_job を利用しているとき、Rails のバージョンを変更したところ、 I, [2018-10-12T16:21:11.029048 #653] INFO -- : [d8e52f46-4c12-40b5-ab99-f593f6306a95] Started POST "/" for 127.0.0.1 at 2018-10-12 16:21:11 +0000 F, [2018-10-12T16…

ActiveAdmin の update url に対して、ajax通信すると302リダイレクトし続ける

例えば 管理画面上の action ボタンで、データを更新できるようにした場合ですが、 ActiveAdmin.register Message do index do script do raw <<-'EOS' function censor(id, url){ var elem = document.querySelector('#message_'+id+' > .col-text > span')…