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

Vue.js でとても便利な v-model ですが contenteditable な要素では使えません。 v-model は内部的には v-bind:value と v-on:input をまとめてやってくれているからです。つまり input 要素じゃない contenteditable では効かないという感じです。 そこで自前でイベントを使って雑に書くとこんな風に書いてしまいますが、これには問題があります。入力するたびにキャレットが文字列の先頭に飛んでしまいます。これは v-text が更新されるため自身も render が走ってしまうのが原因です。かといって v-once を付けてしまうと、今度は自身を変更するすべがなくなってしまいます。 <template> <div> <div contenteditable="true" v-text="content" @input="sy

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

雑にこの記事で目指すのをまとめると以下の状態です。 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

firebase JavaScript SDK v5.3.0 がリリースされた(July 19, 2018)。そしてこのバージョンでめでたく firestore で配列の検索 array-contains 、要素の追加 arrayUnion と要素の削除 arrayRemove がサポートされた。本当にめでたい。firestore を使っていない人からしたら配列の検索・追加・削除がそんなに嬉しいのか？と思うかも知れないが、本当に嬉しいのです。 例えば、firestore はドキュメント指向なので以下のようなデータを持つことができる。

Express3時代とは違い、Express4ではいろんな機能が外部モジュールに分割されています。なので、必要な物はrequireしなくてはならない。 Express3時代のBASIC認証

サーバサイドを 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

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

IT界隈でエンジニアしていると、よく出くわすのが障害対応です。できれば会いたくないという人が多いと思うんですが、僕はけっこう好きです。障害対応。どこに原因があるのか調査をして、バランス良くベターな対応をしたときの楽しさは、プログラミングとはまた違ったものがあります。探偵っぽい感じが面白いですよね。もちろん、障害が発生しない状況を作るのが一番です 弊社では数多くのWebサービス／アプリを運営しているので、過去様々な障害対応をしてきました。その際に、解決までどんな道筋を僕がたどるのかを振り返ってまとめてみました。これが大正解なんてことはなく、人や事象によって違うとは思いますが。 なお、障害検知手法とか、サーバのコマンドとか、コードのデバッグ手法とか、具体的なことは一切出てきません。手続きと思考プロセス的な話です。 障害対応フローチャート 一般的な感じだと思いますが、障害報告から対応完了までのフ

iOS9がリリースされ、iPhone6sも発売され、iOS9 Safari9で使える新機能をWebプログラマ目線で使ってみたいものをいくつか試してみました。iOSはアップデートの進捗がわりと良いので、新機能でもモバイルサイトであれば積極的に使える…はず。デスクトップ版の方は…お察しください。 ぶっちゃけ今回はそこまで目玉機能はなく、地味です。地味ですが、SafariでWebアプリを作れるようになりそうな気配がどことなくするようなしないような感じの内容です。残念ながらServiceWorkerには対応していないので、それに対応してくれたらもっとアレなんですが。 iOS Safari9の新機能（OSX版含む） CSS系 backdropフィルタ対応 新し目のiOSやOSXとかのメニューバーが半透過されるあれが作れます。要は背景要素に対してフィルタがかけられるプロパティです。綺麗で良いですね。

はじめに ECMAScript2015(第6版、通称ES6)が承認され、Babelも登場し、世はまさにES2015時代。なのだけど、JavaScript初級者としてはES5自体をちゃんと把握していなかったりするので、今さらながら調べてみることにした。 間違っている所があれば、ご指摘いただけると大変助かります。 ECMAScript5で追加されたもの ECMAScript5 compatibility tableにて、ES5で追加された機能がどのブラウザに対応しているかが分かる。また、es5-shimというライブラリが、古いブラウザでES5の一部の機能が実装可能になる。 基本的には、IE9以上／iOS7以上、それ以外はモダンなブラウザであれば大抵対応している。 use strict スクリプトの先頭、もしくは関数内の先頭に記載することでstrict modeで実行される。自分が書いているもの

やりすぎても無駄になることがあるので、必要十分なバランスを見極めて実施する。主に社内のプログラマ向けのまとめ資料。他にもあれば追記していく予定。 ページの状態を調べる まず対象のページが、どういった状態なのかを調べる。 Google PageSpeed Insights これを100点満点にする必要はないが、赤くなっている項目に関しては、なるべく対応したほうが良い。モバイルサイトにも対応しているので便利。 https://developers.google.com/speed/pagespeed/insights/?hl=ja pingdom 実際にページにアクセスしてスピードを計測できる。海外サーバなので、けっこう遅い…。最適化前と最適化後で比較するのに使うといい。 http://tools.pingdom.com/fpt/ Chromeデベロッパーツール コンテンツの読み込み順序／速度