HanamiでNuxt.jsのビルドしたファイルを配信したい

やりたいこと

  • HTML, CSS, JavaScriptはHanamiの app/web/views で書きたくない。
  • Nuxt.jsやcreate-react-appとかで作ったものを public 配下で配信したい
  • ただ Hanami.rb では public/index.html をおいても反映されなかった

やったこと

Hanami::Static#initializerindex オプションを付与する

require 'rack/static'

module Hanami
  class Static < ::Rack::Static
    def initialize(app, root: Hanami.public_directory, header_rules: HEADER_RULES)
      super(app, urls: _urls(root), root: root, header_rules: header_rules, index: 'index.html') # index: 'index.html' を追加
    end
  end
end

動作確認をしたリポジトリ

github.com

Nuxt.js側の設定(srcDir , generate dir を指定を変えたり、 @nuxt/proxy 入れたり)もあります(雑コミットでごめんなさい)

参考

Google Cloud Storageでダイレクトアップロードを有効にする on Heroku

やりたいこと

  • RailsでActive Storageを利用している
  • Google Cloud Storageを利用している Rails.application.configuration.active_storage.service = :google
  • Heroku Review Appsでも利用したい。

やったこと

  • CORSに対応したバケットをHeroku Review Apps作成時に実行する
  • Heroku Review Appsが削除されたときに、対象のバケットも消す

setup for Active Storage direct upload ( Google Cl ...

github.com にてドキュメントが追加されましたが、ダイレクトアップロードを実行する際はCORSの設定が必要なのでその参考になるといいなぁと思ったので。

外部キー制約を付与したデータにより Herokuで db:fixtures:load が落ちてしまう

TL;DR

ENV['FIXTURES'] = 'hoge,fuga,bar' と並び順を指定してから投入しているが、あまり良いやり方ではなさそうなので、なにか良い方法があれば教えてください 🙏

遭遇した問題

今作っているアプリケーションをHerokuで開発している。 Review Appsで動作を確認したいので、 db:fixtures:load を読みだしたところ下記のようなエラーが出た。

ActiveRecord::InvalidForeignKey: PG::ForeignKeyViolation: ERROR: insert or update on table "hoge" violates foreign key constraint "fk_rails_xxxxx"

Rails のバージョンは 5.2.3 。

原因

テーブル fuga が hoge に対して外部キー制約を持っていたが、 hoge より先に fuga のデータを作ろうとしてしまいエラーになっているようだった。

Use SET CONSTRAINTS for disable_referential_integrity without superuser privileges (take 2)Revertされており、現状解決策はなさそう?

やったこと

この辺を見てENV['FIXTURES'] = 'hoge,fuga,bar' と投入順を指定することで対処した。ただこれだと fixtures/*.yml の増減に引っ張られてしまうので、微妙だと思っている。

なにか他に良い方法があれば教えて下さい 🙏

参考

Heroku CI with rails fixtures - Stack Overflow

アバター画像のプレースホルダに avatars.dicebear.com を利用する

TL;DR

https://avatars.dicebear.com/v2/種類/値.svg みたいな感じで入力すればアバター画像のプレースホルダが手に入る。 他にもいろいろオプションがあるので便利かも。

やりたいこと

Webサービスでよくある、ログインユーザのアイコン画像を表示するときデフォルトをどうしようと思っていた。

GitHubのようなアイコン生成は identicons というらしく、似たような形で表現したいなーと思っていた。

やったこと

npmパッケージなどないか調べていたら、上掲の DiceBear/avatars を見つけたので導入した。 上掲のURLで利用することを推奨していたけど、npmパッケージで導入。

「Sprite Collections」を見ると identicons だけじゃなくていろんな種類がある。

READMEの通りに導入した。

Stimulus: A modest JavaScript framework for the HTML you already have.で使うときはこんな感じでconnect で呼び出す。

gist5e003daad409e4688ab04798acd94373

Pocketでお気に入りしたページをはてなブックマークに追加するWebアプリを書いた

TL;DR

はじめてGo言語(Echo)でコードを書いてみた。

github.com

やりたいこと

Pocket でお気に入りした記事をIFTTTのメール通知機能を使ってはてなブックマークに投稿していたが、メールでのブックマーク投稿機能の提供が終わってしまった。

bookmark.hatenastaff.com

なのでGo言語の勉強も兼ねて作ってみた。Go言語わからなすぎてだいぶハマってしまった… 😭

やってること

POSTが呼ばれたらパラメータにいるURLをはてなブックマークAPIを叩いて追加するだけ。

Pocketでお気に入りをしたらPOSTを呼ぶ部分は IFTTTの webhook serviceからやっている。

使ったもの

ハマったこと

参考にしたもの

特に hatena-go についてはめっちゃコード参考にしました。ありがとうございます。

github.com

nasust.hatenablog.com

Nuxt.js + Skyway ( WebRTC ) で簡易ベビーモニタを作った

TL;DR

github.com

やりたかったこと

  • iOSのカメラを使う
  • リアルタイムで送ってほしい
  • 音声も拾いたい

やったこと

  • iOSのカメラを使う
  • 音声も拾いたい

MediaDevices.getUserMedia() - Web API | MDN

を使った

  • リアルタイムで送ってほしい

webrtc.ecl.ntt.com

を使った

公開するまでの流れ

最初はリアルタイムで配信すること & 音声の取得は難しいと思っていたので、 ブラウザで撮影したカメラの画像をサーバに送信する方法 - NaCl非公式ブログ とを参考にして、 Rails 5.2 + Stimulusjsで作っていた。

お世話になっていた FJORD BOOT CAMP(フィヨルドブートキャンプ) のシステムでも似たような実装があったのを記憶していたのでそのコード部分の実装*1*2 も参考にした。(余談だけどこの機能は今は消えちゃってた

ただ取得時間が短かったせいかうまく画像を表示させることができなかったので断念。

上掲のSkywayを試したら思ったよりもすぐ出来、Railsじゃなくても良くなったので Nuxt.js(デザインはbootstrap-vue)を導入。 全公開されちゃうのはちょっとなーと思ったので、合言葉と合致したら閲覧と配信ができるよう vuex-persistedstate を使った。Basic認証っぽいことをしたかったんだけど、SPAモードでそれができるやり方がわからず。なんか良いやり方があったら教えてください。

ホスティング先は zeit.co を使った。 初めてだったけど、now だけでデプロイされるのはすごい。 URLが毎デプロイごとに変わったので、now && now alias を実行している。この辺もこのやり方でいいか気になっている。

感想

当たり前のことだけど、自分たちにとって「便利〜」というものを作るのはとてもいいなぁと思った。

HTMLから本文抽出するアプリケーションを作った

github.com

作ったといっても下記gistのコードを Cloud Functions用にちょこっと書き換えただけ。

mozilla/readability を使った本文抽出サンプル