【JavaScript】Safariでファイルを強制ダウンロードさせようとしてハマった

フロントエンドを生業としていると、クロスブラウザ対応という悪魔の作業がまっている。現在主に使われているブラウザは、Internet Explorer、MS Edge、Chrome、Firefox、Safariが挙げられる。（Opera? そんなブラウザは知らない）

これらのブラウザでファイルのダウンロードをさせようとすると、Safariでつまずく。IEですらできるのに、Safariだとできない。新しいタブにダウンロードするファイルの内容を表示して、ユーザにコピペさせるという最悪の動作しかできない。そのようにクライアントサイド（JavaScript）だけでファイルをダウンロードさせる方法を試しているうちにSafari沼にハマってしまった。


ということで、試した内容をまとめようと思う。

1. aタグにdownload属性を追加する
2. Content-Typeにapplication/octet-streamを指定する
3. Content-Dispositionを指定する（サーバサイドの実装が必要）

検証環境は以下のとおり。

• macOS Yosemite
• Safari 10.0.2

ソシャゲのガチャみたいなキラキラ星エフェクトをjsとcssで表現する

クリスマスも近いし、雰囲気だけでもとりあえずキラキラさせとけと思い、JavaScriptとCSSだけで星の煌めきみたいなエフェクトを実装した。ライブラリは何も使っておらず、IE11、MS Edge、Fireox、Chrome、Safariで動作確認済みだ。

タイトルにはソシャゲだのガチャだの書いてあるが、実際ソシャゲをやったこともないし、どんなものなのか見たこともない。ガチャなんて幼少期に100円のカードダスをやったくらいしか経験がない。

なので、自分が思うキラキラエフェクトをつくった。
イメージはこんな感じ。

vuex-router-syncを使ってgettersやactions,mutations内からroute情報を取得する

Vuexとvue-routerを共存させて、gettersやactions、mutations内でrouterの情報（パスやクエリパラメータなど）を使いたい場合がある。しかし、実現するにはViewModelからdispatchやcommitの引数にthis.$routeを渡さないとできない。gettersの場合は、そもそもパラメータを受け取ることができないので、route情報を使うことはできない。（グローバル変数でrouteを持つというバッドプラクティスもあるけど…。）

そんなときに便利なのが「vuex-router-sync」というライブラリ。
これを使うとstore.state.routeでroute情報にアクセスすることができる。

ということで、vuex-router-syncを使ったサンプルコードを書いてみた。
記事の最後に、vuex-router-syncの詳細仕様をまとめておく。

Vue.js+Vuex、Express4、Dockerなどを使ってさくらのクラウドのAPIクライアントを作った

この記事は「さくらインターネット Advent Calendar 2016」の6日目の記事です。

---

さくらのクラウドのAPIドキュメントはご存知だろうか？
ドキュメントにはAPIの一覧やパラメータの詳細などが載っている。curlコマンドのサンプルも載っているので、APIを実行することはできるのだが......。


なんかイケてない。


macOSやLinuxを使っている人は問題ないが、Windowsユーザに優しくない。curl？なにそれ？
もっとインタラクティブでダイナミックに動かせるドキュメントだったらいいのに…。


ということで、さくらのクラウドのAPIをブラウザから実行できる「sacloud-api-tester」をつくった。

APIキーを入力し、左のAPIリストから試したいリクエストを選択、実行するだけでリソース操作やレスポンスを確認できる。
※「SwaggerやPostmanを使え」はNGワード

【SVG】Raphael.jsとSnap.svgの比較と実装してみた感想（サンプルコードあり）

JavaScriptでSVGを扱いたくてググったら、Raphaël.jsとSnap.svgというライブラリに出会った。
両者ともDmitry Baranovskiy氏が作成したもので、Snap.svgの方が後発だ。順当にいけばSnap.svgを使うのが良さそうだが、せっかくなので両者を比較した。

まずは両者の特徴。

比較項目	Raphaël.js	Snap.svg
リリース	2009年12月	2013年 10月
最新バージョン	v2.2.7	v0.4.1
更新頻度	定期的に更新されている	2015年4月からほとんどなし
ブラウザサポート	IE6.0+, Firefox3.0+, Safari3.0+, Chrome5.0+, Opera9.5+	IE9.0+, 最新のブラウザ
特徴	レガシーブラウザをサポートしている（VMLが使える）	SVG仕様（マスキングやクリッピング、グラデーションなど）がフルで使える

※ 2016/11/30 現在

次に、実際にサンプルコードを書いて比較する。