はてなブックマーク

ブラウザで動くエディタを開発していると避けては通れない contenteditable な caret の位置（座標）。いろいろなアプローチがありますが、一部のケース（縦書き）でうまく動かないことがあったので回避策をメモしておきます。 ダミーの DOM を挿入する わりと古典的でよく使われている方法です。caret のある位置にダミーの DOM を挿入して getBoundingClientRect で位置を取得するというもの。どんな場面でもほぼ確実に caret の位置が取得できます。ただ、大きな弱点があり DOM を挿入するので対象 DOM の TextNode が分割されてしまいます。contenteditable を使ってゴリゴリ開発をする場合、むやみに Node が変わるとつらすぎるので、あまり使うメリットはありません。 <p contenteditable="true">cli

this.$router.resolve({ name: 'ExmaplePage', params: { id: id } }).href

ImageMagick の convert コマンドは何十回やっても覚えられないので、動作を確認しながらコマンドオプションを生成するシミュレータを作ってみました。なるべく楽をしたかったのでブラウザで動くように ImageMagick を WASM ( WebAssembly ) で動かしました。 https://convert-web-simulator.firebaseapp.com/ 仕組み WebAssembly というブラウザ上でバイナリ実行できる仕組みがあるのでそれを利用しています。すでに ImageMagick を WebAssembly 対応にしてくれている素晴らしいものがあるので、今回はそちらを利用しました。 https://github.com/KnicKnic/WASM-ImageMagick import { call } from 'wasm-imagemagick

Lambda@Edge でできること Lambda@Edge は CloudFront のエッジサーバ上で実行できる Lambda です。様々なことが可能ですが、よく使われるユースケースは以下のようなものがあります。工夫次第で色んな活用方法があると思います。 URL リクエストパラメータに応じた動的な画像リサイズ キャッシュキーの正規化などによるキャッシュヒット率の向上 AWS WAF / DynamoDB と組み合わせてリアルタイム性の高い不正アクセス防止 簡易な動的 Web アプリケーション proxy サーバ SPA を SEO のためにダイナミックレンダリングをする 今回は具体的なユースケースの実装方法などは紹介しません。おおまかな Lambda@Edge の開発をするための導入記事です。 Lambda@Edge の流れ 大きく2つの組み合わせで、4つの流れがあります。 Viewe

Firebase Authentication は手軽に認証の仕組みが使えてとても良いです。今回は Vue.js を使って SSR (ServerSideRendering) と SPA (SinglePageApplication) 両方に対応した使い方をまとめておきます。 というのも普通の SPA であれば特になんの問題もなく使えるのが SSR にも対応した形にしようとすると、とても苦労したというのがあり自分でまとめておかないと忘れてしまいそうになるからです。 使うもの Vue.js Vue Router Vuex Firebase SPA で普通に認証をしてみる Vue.js + Vue Router を使って認証が必要なページを用意し、Firebase Authentication で認証が通っている場合は閲覧できるようにしてみます。ここではサンプルとして Google ログインを

service: cloudfront-edge package: individually: true exclude: - node_modules/** - lambda_modules/** provider: name: aws runtime: nodejs8.10 region: us-east-1 memorySize: 128 timeout: 5 role: LambdaEdgeRole logRetentionInDays: 30 stage: ${opt:stage, 'development'} profile: ${self:custom.profiles.${self:provider.stage}} plugins: - serverless-plugin-embedded-env-in-code custom: profiles: development:

雑にこの記事で目指すのをまとめると以下の状態です。 JavaScript（ブラウザ）だけで対応 Exif Orientation のパースをライブラリ使わずやる background-image でも使いたいので CSS transform は使わない 手法だけ知りたい方は下の方にコードがあるのでそれを見てみてください。 前段 iPhone などのスマホのカメラで撮った写真を無邪気にファイルアップロードして表示すると、逆さまになっている…という体験をしたことありますか？　世に出回っているソフトウェアはそんなことないのですが、雑に作ったシステムだとありえます。 例えば以下のようなコード。これはブラウザでファイルを選択した時に画像のプレビューを表示する JavaScript です。よくある実装です。これはたいていの条件下のときには上手くいっているように見えますが、失敗することもあります。 <i

ブラウザ内の操作をビデオに録画したくなったので調べていたら getDisplayMedia という面白そうなものを見つけたので試しに使ってみました。 Chrome Canary M70 でScreen Capture API 利用できるようになった MediaStream.getDisplayMedia() 2018/10/23時点の Chrome 70.0.3538.67 ではまだ使えないみたいです。使うためには Canary で試してください。他のブラウザの対応としては Firefox / Edge が対応しているようです。ただし Firefox は呼び出し方が違いました。 参考: WebRTC API コトハジメ なおヘッドレスブラウザで録画する方法はこちら ヘッドレスブラウザ Chrome + Chromy で操作した内容を録画する サンプルコード Canary の DevTool

Chromeのブラウザ内（もしくはデスクトップ）操作をJavaScriptで録画するに続いて、今度はヘッドレスブラウザ (Chrome) で操作した内容をビデオ録画する方法を紹介します。今回は Chromy というライブラリを利用します。 機能的には Chrome DevTool に用意されている startScreencast を利用します。Chrome ヘッドレスブラウザのライブラリといえば puppeteer という感じがあるのですが、 Chromy は startScreencast のラッパーを用意してくれているので、サクッと使えるのが良いところです。 サンプルコード 指定のページを開いて startScreencast をした後、なんらかの操作をします。その後、 stopScreencast で処理を終了すると startScreencast コールバックで受け取ったキャプチャ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

algolia という強力な検索サービスがあり、firebase と組み合わせることで簡単に全文検索やタグ検索などを実装することができます。今回は Instagram や Twitter にあるようなハッシュタグ検索を実装してみます。すぐできます。 aloglia のインデックス作成 aloglia にログイン後、インデックスを作成します。今回は適当に books にします。インデックス作成自体はこれだけです。データを登録すると勝手にフィールドなどを作ってくれます。 作成後、API Key を取得します。フロントページで利用する検索用 API Key とインデックス登録などをする管理用の Admin API Key があります。検索用は Vue.js 側で、管理用は Firebase functions で使用します。 algolia のインデックス登録 firestore にデータが登録

SPA で構築すると気になるのは SEO と OGP です。SEO に関しては Google のクローラは JS を解釈してくれるようになったので fetch as Google で確認する限りインデックスされるようです（順位に影響があるかどうかは不明）。OGP に関しては現状、 facebook / twitter のクローラは JS を解釈してくれないので、サーバから返却される HTML に <meta property="og:title" content="title"> のようなタグを埋め込んでおく必要があります。 SPA OGP 対策として一番最初に語られるのが SSR (サーバサイドレンダリング) だと思いますが、OGP のためだけに SSR するのは面倒なので、Firebase Hosting + Functions を使ってなんとかして見る方法を試してみました。そのメモで

Go でコードを書いていて「おや、これは…？」と頭の中がハテナで一杯になる現象に出くわして、@nobonoboさんや@mattnさんに教えてもらったのでまとめておきます。ありがとうございます！　もし間違いがあればご指摘ください。 問題のコード これは goquery というライブラリを使って <title> タグのテキストを抜き出そうとしているコードです。が、これは正しくテキストが抜き出せません。（説明のために色んな処理を省いたり、変なコードの書き方になっています…） res, err := http.Get("http://example.com/") if err != nil { fmt.Printf("err: %v\n", err) } defer res.Body.Close() br := bufio.NewReader(res.Body) _, _ := br.Peek(1

みなさん Go な WebAPI のテスト＆ドキュメントどうしてますか。僕はまだ数ヶ月程度の Go 経験しかなく模索しながら、まだまだ彷徨っている状態です。そこで現時点での自分なりのやり方をまとめておこうと思います。こうやったほうが良いよ！というアドバイスがあればぜひお願いします サンプルコードはこちらのリポジトリに雑においてあります。 https://github.com/zaru/go-api-documents-demo ツール類 今記事では echo + sqlx な構成を例にしています。 使っているもの Go 1.9.x labstack/echo jmoiron/sqlx stretchr/testify/assert API Blueprint aglio dredd drakov テストライブラリは stretchr/testify/assert だけ使っています。モックな

サーバサイドを Go で WebAPI として独立して作り、フロントは Vue.js で SPA チックに作り、Static な成果物（HTML/CSS/JS）を Go バイナリに内包して Heroku で動かすメモです。 サンプルのソースコードはこちらです。 https://github.com/zaru/go-vuejs-heroku 前提条件 Go 1.9+ パッケージ管理: dep DBマイグレーション: pressly/goose Vue.js 2.5+ vue-cli ビルドツール: webpack Heroku PostgreSQL Redis デプロイの動作フロー git push heroku master で Heroku にデプロイ デプロイ dep で必要パッケージをインストール npm で必要パッケージをインストール Vue.js を webpack でビルド G

最近GCP・GKEにハマっております。とても楽しいです。AWSをさわり始めたときと同じようなワクワク感があります。今回はGCPのコンテナビルドサービスGoogle Cloud Container Builderを使ってGCP上でDockerコンテナをビルドして、そのままGKEにデプロイする手順をまとめてみました。 Google Cloud Container Builder Google Cloud Container Builder（以下GCB）は、Cloud Storage上にあるソースコードをDockerビルドしてContainer Registryに登録してくれるサービスです。つまり、手元のパソコンにDockerがなくてもビルドしてくれるのです（実際コード書いて開発するとなると手元にDockerはないと面倒くさいけど…）。 Railsアプリをビルドしてデプロイする 今回はRails

オートスケールの設計 GKE + k8sにおいて、オートスケールには2種類存在する。 Horizontal Pod Autoscaling（水平Podオートスケール） Cluster Autoscaler 前者がPodをスケールさせ、後者がクラスタをスケールさせる。スケール速度はPodであれば一瞬、クラスタノードは起動までに30秒前後かかる。また、k8sの再起動がはいる。 CPUリソースなどの使用状況をk8sが監視し（デフォルト30秒）、設定されたオートスケール閾値を超えたら新しくPodをたてたり、クラスタを増やしたりする。当然、負荷が下がったら自動で減る。 戦略 基本は2つのオートスケールを組み合わせ使う感じが良いだろうと思う。 Horizontal Pod Autoscaling・Cluster Autoscalerを設定 最小起動数は予測できるトラフィックに合わせる ノード数について

これだけで2つのworkerが立ち上がり、それぞれで spec/models と spec/requests のテストを実行してくれます。やったね🎉 でも実際これは上手くいきません。なぜなら最も実行時間のかかるリクエストテストが1つのworkerに集中してしまっているからです。片方はすぐ終わるのに、結局全体の実行時間はあまり改善されません（CircleCIなら勝手にランダムにしてくれるんだけどな…）。 テストコードファイルを分散する というわけで、テストコードのファイルを分散するようにします。雑に書いたスクリプト例です。 require 'fileutils' require 'pathname' class RandomDistSpec def initialize FileUtils.rm_rf("matrix_specs") @worker_num = 4 end def copy

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

戦略 開発環境はDockerComposeでRails + MySQL + Redisな構成 ファイル同期にはDockerSyncを使う 本番環境はECS + RDS + ElastiCache ALBを使って動的ポートマッピング nginxは使わず、pumaでリクエストを受ける assetsはDockerコンテナに含めてビルド CDN（CloudFront）を経由して配布 CircleCIでRailsコンテナをビルド＆デプロイ ECRにイメージをpush db:migrateなどはECS RunTaskAPIを叩く デプロイはecs-deployツールを利用 決めてないこと cronの運用方法 CloudWatch + LambdaでRunTaskAPI叩く kuroko2やsidekiq-cronなどのお手軽ジョブスケジューラを入れる 現時点の感触 DockerComposeな環境で開

Punditというgemを使ってRailsに認可の仕組みを作ってみます。認可というとcancancanが有名です。 cancancanはユーザに対して、どんなアクションが許可するかを定義するのに対して、Punditではリソースに対して誰が許可されるのかを定義します。反対からの目線ですね。cancancanがコントローラ寄りならば、Punditはモデル寄りの責務です。また、cancancanがDSLなのに対し、PunditはピュアRubyな書き方になっています。 個人的には複雑で大量の認可設定を書いていくと、ユーザ目線かつDSLで記述していくのは大変だなぁ＆Abilityクラスが肥大化しがちで見通しが悪いと感じたので、Punditに移行しました。Punditのソースコード自体も読みやすく、どのように動いているのかが把握しやすいのもメリットです。ここらへんはDeviseよりもAuthLogic

サーバ負荷自体も特になく、ジョブ内容も変な処理などはないし、タイムアウトにすらならないという…。根本原因を探って直すのが良いのですが、再現性もなく突発的に起きるため、まずはサービス提供が継続できるようにSidekiqの状態を監視して、ワーカーが停止していたら強制再起動させて復帰させるというアプローチを取りました。 Sidekiqの状態取得 Sidekiqのワーカーを取得するにはSidekiq::Workers.newを呼びます。この中でワーカーがいつ実行開始されたのかがwork["run_at"]に記録されています。 workers = Sidekiq::Workers.new workers.each do |process_id, thread_id, work| p "at: #{Time.at(work["run_at"])}" end

趣味でも業務でも日々Webサービスを開発しているzaruです。こんにちは。ついにアドベントカレンダーも最終日です。まだサンタとしての仕事が残っています。さて今回は仕事としてWebサービスを開発するときに気をつけたいポイントを紹介します。まぁ仕事に限った話じゃないですが…参考になれば幸いです。特に新卒プログラマあたりに読んでもらえればと思います😀 なお僕の業務上インフラ周りはAWSが多いです。 RASISという指標 RASISという指標があります。コンピュータシステムの評価指標5つの頭文字を取ったものです。 Reliability（信頼性） Availability（可用性） Serviceability（保守性） Integrity（保全性） Security（機密性） 今回はこの5つの指標に沿ってポイントを紹介していきます。RASIS自体については色々なところで解説されていると思うので

レスポンシブデザインでページを作っていると、表組みの <table> タグがスマホの小さい画面だと、ちょっと見にくかったりします。じゃあ <table> やめるかーと思っても意味合い的に表だから <table> 使いたいよというわけでCSSでどうにかしてみました。 PCだと、こういう見た目です。HTMLとCSSはこちら。まぁ、なんてことないただの表です。 <table> <thead> <tr> <th>商品名</th> <th>価格</th> <th>個数</th> <th>小計</th> </tr> </thead> <tbody> <tr> <td>ねこねこニャンニャン丸 限定プレミアムわんこエディション</td> <td>980円</td> <td>2個</td> <td>1,960円</td> </tr> <tr> <td>あたまおっぱいおへそ飛んでチーングッズ</td> <td

Webアプリを作っていてよく出くわすのがファイルアップロードですね。単純にアップロードするだけなら実装自体はたいしたことないものですが、より良くしようと思うと想像以上に奥が深く…悩ましい沼感があります🤔 今回は今までファイルアップロードを実装していく中で手に入れた改善ポイントを紹介していきます。これで最速・最高のファイルアップロードに1歩でも近づけられればと思います。 なお、僕が普段開発をしているアーキテクチャの都合上、 nginx Rails の話が出てきますが一部を除きWebアプリなら普遍的に使える話だと思います。 2つの側面から紹介します。 UI編 と パフォーマンス編 です。 UI編は、HTML5を中心に使い勝手を向上させるためのポイントを紹介します。パフォーマンス編ではRailsのファイルアップロードを約10倍高速化⚡️した事例を紹介します。それでは長いですが、よろしくお願いし

まずはこちらをご覧ください。 URLをコピーすると自動でQRコードに自動変換して表示してくれてますね。動作としてはURLと思われるテキストをコピーした後、Cmd + Ctrl + CのショートカットでQRコードを表示するようにしています。つまり Cmd + C → Cmd + Ctrl + C のキーボード操作だけでいけます。便利ですね。 名前は LightningQR⚡️ です。ライトニングさんは関係ありません。 今回はこのMacのステータスバーに常駐するアプリをSwift3で作ったので、簡単に作り方を解説しようと思います。似たようなアプリを作ろうと思っている誰かのお役に立てれば幸いです。 なお実際に使ってみたい人は、下記からダウンロードしてください😀 またソースコードもGitHubで公開しているので見てみてください。Macアプリ初心者が作ったのでハッキリ言って雑コードです。ごめんなさ