HanamiでNuxt.jsのビルドしたファイルを配信したい
やりたいこと
- HTML, CSS, JavaScriptはHanamiの
app/web/viewsで書きたくない。 - Nuxt.jsやcreate-react-appとかで作ったものを public 配下で配信したい
- ただ Hanami.rb では
public/index.htmlをおいても反映されなかった
やったこと
Hanami::Static#initializer に index オプションを付与する
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
動作確認をしたリポジトリ
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でも利用したい。
やったこと
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 の増減に引っ張られてしまうので、微妙だと思っている。
なにか他に良い方法があれば教えて下さい 🙏
参考
アバター画像のプレースホルダに 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 で呼び出す。
Pocketでお気に入りしたページをはてなブックマークに追加するWebアプリを書いた
TL;DR
はじめてGo言語（Echo）でコードを書いてみた。
やりたいこと
Pocket でお気に入りした記事をIFTTTのメール通知機能を使ってはてなブックマークに投稿していたが、メールでのブックマーク投稿機能の提供が終わってしまった。
なのでGo言語の勉強も兼ねて作ってみた。Go言語わからなすぎてだいぶハマってしまった… 😭
やってること
POSTが呼ばれたらパラメータにいるURLをはてなブックマークAPIを叩いて追加するだけ。
Pocketでお気に入りをしたらPOSTを呼ぶ部分は IFTTTの webhook serviceからやっている。
使ったもの
- Golang 1.11.5 （ Go modulesを利用 ）
- echo
- Heroku
- IFTTT webhooks
- ngrok （ローカルでの動作確認）
ハマったこと
リクエストトークンの取得 部分がうまく書けず、結局 はてなブログ API 用の gem を書いた - blog.kymmt.com に入っているトークンを取得するRubyコードを呼び出して取得した。
書いてはみたけどまだGo言語に慣れていない…
参考にしたもの
特に hatena-go についてはめっちゃコード参考にしました。ありがとうございます。
Nuxt.js + Skyway ( WebRTC ) で簡易ベビーモニタを作った
TL;DR
やりたかったこと
- iOSのカメラを使う
- リアルタイムで送ってほしい
- 音声も拾いたい
やったこと
- iOSのカメラを使う
- 音声も拾いたい
MediaDevices.getUserMedia() - Web API | MDN
を使った
- リアルタイムで送ってほしい
を使った
公開するまでの流れ
最初はリアルタイムで配信すること & 音声の取得は難しいと思っていたので、 ブラウザで撮影したカメラの画像をサーバに送信する方法 - 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 を実行している。この辺もこのやり方でいいか気になっている。
感想
Nuxt.js + Skywayで簡易ベビーモニターを作って今日から使ってみてるけど、いちいち様子を見に行かずに済んで便利だ…
— 妬み、嫉み、僻み。 (@kimihito_) February 18, 2019
当たり前のことだけど、自分たちにとって「便利〜」というものを作るのはとてもいいなぁと思った。
