ボクココ

個人開発に関するテックブログ

JavaScript

Rails でシンプルな無限スクロール実装

ども、@kimihom です。 久々に無限スクロールを実装する機会が 詠みラボで発生しました。そこで、振り返りがてら、こんな感じで実装するのが個人的に一番シンプルだったコードをご紹介します。 サーバー側実装 俳句(Haiku) をそれぞれ20句ごとに毎回取得し、…

Twilio Voice JavaScript 2.0 以降での複数着信の受け取り方

ども、@kimihom です。 Twilio コミュニティの中で、「1本目の着信が来た後、続けて2本目の着信が来たときに、1本目の着信を出られるようにしたい」というケースで質問をいただいた。まさにそのケースの対応を自分も実装したので、コードを含めて説明してい…

Rails7 で jQuery をセットアップ

ども、@kimihom です。 Rails 7 がリリースされてから暫く経つが、基本的な部分がまだシェアされてないことが多い。本記事では Rails 7 注目のフロントエンドのセットアップについて記す。 追記 jQuery 自体はこれでインポートできたが、jQueryプラグインな…

Heroku での npm バージョンの違いによるデプロイ失敗メモ

ども、@kimihom です。 急に Heroku での Node.js アプリのデプロイが失敗したので、その原因と(一次)対応について記しておく。 問題 いつも通り、git push heroku master でデプロイしたところ、以下のようなエラーが発生するようになった。 remote: ----->…

面談、ウェビナー用途の Web ビデオシステム wellcast 技術

ども、@kimihom です。 先日、Web ビデオシステム wellcast をリリースした。wellcast における技術面の工夫に関して、本記事で紹介していく。 www.wellcast.in ビデオ通話の品質 今では色々なビデオ通話のサービスが登場してきて、読者の皆さんも一度は誰か…

ActionText を使う場合の ライブラリロード

ども、@kimihom です。 ActionText の実装をしていて、実際の利用でハマった点をまとめておく。今まで ActionText の記事として2つ書いてあるので、興味があれば読んでみていただけたらと思う。 www.bokukoko.info www.bokukoko.info Webpacker の利用が前提…

Audio 関連の API を用いた音声文字化の自動再生

ども、@kimihom です。 Amazon Transcribe や Google Cloud Speech-to-Text などを使って、音声を文字化することがもはや当たり前になってきている。そこで本記事では、文字化したテキストと、再生する audio のタイミングを合わせて、より効果的に音声と文…

Action Text での Amazon S3 アップロード

ども、@kimihom です。 前回に引き続き Action Text に関して調査を続けている。今回は Amazon S3 へアップロードしたものをテキストエリアの中に表示させてみよう。 Active Storage の設定 Action Text のファイルアップロードは、Active Storage の設定に…

Rails 6 における Webpacker デフォルト動作

ども、@kimihom です。 Rails 6 が公開されてしばらく経つ。私としては Rails 6 の中でもとりわけ Action Text でクールなテキストエリアを実現したいと思っていので、Rails 6 をゼロから学び始めている。 でも今回は Action Text とは全然関係なく、Rails 6…

Rails における Chrome80 の SameSite 対応

ども、@kimihom です。 明日、2020/02/04 に Chrome 80 のリリースが予定されている。そこで巷で話題になっている SameSite の部分で対応が必要になるケースがでてくる。 ウェブ上で調べても全然その対応方法が出てなかったので、記録として残しておこう。 …

SaaS におけるカスタムダッシュボードの実装

ども、@kimihom です。 SaaS を開発していると、指標管理をしたいニーズが多く出てくるかと思う。そんな中で、どんな指標を掲示するかって部分は、企業の文化や目標によって違うため、企業ごとに最適な指標を掲示できるようにしたいという流れになることが多…

Cache API を利用したフロントエンドキャッシュ

ども、@kimihom です。 今回は Cache API を使う機会があったので、調査結果と利用のユースケースと共に紹介しよう。サーバーサイドをどんなに高速化するよりも、フロントエンドで そもそもリクエストをさせない 仕組みにすれば、それが最も速いというのを改…

React チュートリアルで学んだことと解答例

ども、@kimihom です。 いよいよ React を学ぶ機会が出てきたので、その経緯と Hello React のログを残しておく。 利用のきっかけ まず、自前の Web アプリケーションを React で書くってのは今でも too much だと思っている。この点に関しては以前の記事に…

HTML で半円や扇形のゲージを描画する方法

ども、@kimihom です。 今回は扇形のゲージを実装したので、その記録を記す。 完成イメージ 先日、応答率シミュレーターというのを公開した。人数や通話時間から、どのくらいの電話対応ができるのかを計算してくれるツールだ。 www.callconnect.jp この計算…

Heroku ログと Webhook を使った応用例

ども、@kimihom です。 先日の Heroku Meetup で、Heroku ログ処理について語ってきた。今回はそれについて語らせてもらう。 speakerdeck.com Heroku ログ処理の便利さ 実際に自前でサーバー運用していると、当然複数のサーバーがあるわけで、ログはそれら全…

Chrome WebRTC でスクリーンシェアする方法まとめ

ども、@kimihom です。 WebRTC なサービス開発をしていると、デスクトップのスクリーンシェアをしたくなる時がある。その方法について一括でまとめてみる。 2018/8/28 追記 Chrome Inline Install が廃止されるらしい。そのため、以下のインラインインストー…

rails-ujs と form_with の使い方

ども、@kimihom です。 Rails 5.0 までは jquery-rails を使ってフォームやリンクの Ajax 通信を可能にしていたけど、Rails 5.1 からは rails-ujs として切り出され、晴れて jQuery からの脱却を可能にした。 そこで、本記事ではこの rails-ujs と関連深い f…

Rails 5.1 のフロントエンド周りの所感

ども、@kimihom です。 常に話題に上がってくる Rails のフロントエンド事情だけども、今回 Rails5.1 を色々みた中で自分が感じたことについて書いていく。予め断っておくと、自分もまだそこまでフロントエンドをマスターしている身ではないので間違った考え…

ContentEditable のハマりどころと対処法

ども、@kimihom です。 前回の記事で、ContentEditable についての概要をざっと書いた。ContentEditable の持つ魔力については以下の記事を参照いただきたい。 www.bokukoko.info さて、本記事では実際に ContentEditable を使って実装しようと思った際に気…

拡張テキストエリアを ContentEditable で実現しよう

ども、@kimihom です。 今回は ContentEditable という知る人ぞ知る HTML5 で導入された HTML 属性についてご紹介する。 まず始めに、 大いなる力には大いなる責任が伴うということを伝えておこう。ContentEditable を本気でやろうとすると確実にどハマりし…

Node.js Express で非同期処理を next で対応する方法

ども、@kimihom です。 今回は Node.js の Express を使った場合の非同期処理のスマートな対応方法をご紹介する。 Node.js の非同期処理の重要性 簡単な比較をすると、Ruby では非同期処理をほとんどしない代わりに、それぞれのリクエストの一連の処理がが終…

Heroku の Papertrail でログからコードを実行する方法

ども、@kimihom です。 今回は Heroku アドオンの Papertrail の活用方法についてご紹介。 このアドオンが単なるブラウザ上で綺麗にログを見れるだけのアドオンかと思っていたら、それは Papertrail の 3分の1の魅力しか知っていないことになる。Papertrail …

WebRTC の Media, Stream, Track について

ども、@kimihom です。 最近の週末は Twilio Video を使ってビデオ通話アプリケーションを作成している。Twilio Video は今どんどん進化していて、単なる2,3 人でのビデオ通話をするにとどまらず、面白いことができるようになっている。特にスクリーンシェア…

Rails assets 内の JavaScript のメソッドを View 内から呼び出す方法

ども、@kimihom です。 Rails で開発していると、assets/javascripts 内で定義したメソッドを View 内に書かれた <script>タグから呼び出したい時がある。Rails は基本的に assets/javascript 内のコードを全てひとまとめにして一つのapplication.jsってのを作るから…

独学での Web プログラミング学習まとめ

ども、@kimihom です。 自分で何かサービスを出したいという方は多いかと思う。今回はそんな方へ最低限知らなければならないリストを上げようと思う。ターゲットとしては Web アプリケーションということにしたい。 UNIX コマンド 最初は黒い画面に慣れる必…

Cookie とログインと remember_me のカラクリ

ども、@kimihom です。 Cookie のすごい基本的なところなんだけど、どハマりしたのでメモ。何時間もかけて原因を探って解決した先に、成長ってのはあるものだな。いい経験をした。 デスクトップアプリで発覚した問題 んでどういう話なのかっていうと、運営し…

クラウドを活用した WebRTC コールセンターの最前線

ども、@kimihom です。 掲題のタイトルで Open Cloud Innovation Festa 2016 で発表してきた。資料は以下。補足的な資料も含めたらめちゃ多くなってしまったw speakerdeck.com 発表の裏話的な 今回は参加者がエンジニアだけじゃなくて一般の方も来るってこと…

Rails の render で部分的に動的な HTML を生成する

ども、@kimihom です。 Rails で CSS フレームワークとかを使っていると、例えばモーダルウィンドウを出すためにヘッダやフッタで共通の HTML を使うことになるだろう。これらは大抵の場合、共通の UI となる。それでも当然、モーダル内の body の部分はそれ…

Service Worker でスマホ Web 通知を実現する

ども、@kimihom です。 Service Worker といえば、最近出てきたバックグラウドでごにょごにょできて通知できるアレでしょ?程度にしか思ってなかったが、思いもよらず使う場面が出てきたのでメモ。本記事はおそらく Service Worker の中でも最もシンプルなサ…

JavaScript SPA 周りの議論で出た私なりの答え

ども、@kimihom です。 ここ最近、ずっと React.js か jQuery かみたいな話題が定期的に持ち上がってきている。事実、私も最近の JS ライブラリの人気に疑問を呈した人物の一人である。この記事を書いたのも1年前か。 なんだかんだで SPA から jQuery に戻っ…