液体ガラス ProtectPax をPre-Orderで注文してみた

ProtectPax
 


ProtectPax - The invisible protection for all glass surfaces on Indiegogo

スマホのスクリーンに液体を塗って、10分乾かすだけで、Rubyサファイアレベルの硬さになるという
にわかに信じられない液体をPre-orderで注文してみました。
一番安いやつで、本来$39.99が$14とのこと。(あと4日キャンペーンやっているようです。)
ちなみに送料は$7。
f:id:rochefort:20170316003727p:plain

 
これまでに2度iPhoneを落としてガラスを割ってしまったことがあります。
強化ガラスシールをつけていても全然ダメだったし、現在はケースつけるのが見た目的に嫌なので、ダメ元で購入してみました。
無事届きますように。
でも、iPhoneが強化ガラスを採用してくれるのが一番良いんですけどね。

参考

もう割らない!スマホは「液体ガラス」で強くする | TABI LABO
こちらで知りましたが、現在はindie gogoにはページはないようです。spotifyで売られています。

「シリコンバレーのエンジニアが語る、誰にも悪気はなかった話」が面白いという話

シリコンバレーのエンジニアが語る、誰にも悪気はなかった話 | 上杉周作

Hackernews、Rebuildfm、日本のテレビなどでも活躍されている Shu Uesugi さんの記事。
とても面白いです。6万字と長いですが、ニューヨークタイムズのベストセラーとなった「The Prize」という本を日本人が理解できるように丁寧に解説し、日本の状況、彼の体験について書かれています。
 
直訳型ではないので読みやすいですし、とにかく読み物として面白いので、日本やアメリカの教育に興味がある人は是非読むと良いと思います。
もちろんそうでない人も色々楽しめる内容です。お金とっても良いレベルなんじゃないかと思います。

知れてよかったこと

この記事に書かれていることは大体知らなかったのですが、 このイースト・パロアルトやレッドラインの話は全く知りませんでした。

イースト・パロアルト

パロアルトといえば、スタンフォードやインターネットを発明したゼロックスパロアルト研究所があるくらいしか知りませんでした。しかし、その目と鼻の先にあるイースト・パロアルトという場所は、かつて「レッドライン」と呼ばれる金融恐慌時に作成された黒人の多い地域を赤色で色分けされたエリアの一つでした。
この色分けによる政策のせいで、地域の衰退、貧困という負の連鎖により黒人と白人の資産格差が広がったと説明されています。(記事内ではもう少し詳しく書かれています。)

ギャング抗争のせいで、イースト・パロアルトは1992年に市内での殺人率が全米最高を記録した。
人口10万人あたりの殺人発生率は同時期の日本の「175倍」というとんでもない数字である。

そして、この土地の近くにFacebookの本社が移転し、マーク・ザッカーバーグがここで行った地域貢献(貧しい学区へ1億2000万ドルの寄付、学校の設立、インターンなど)について書かれています。
 
この話について掘り下げるのかと思ったら、ここまでが前振りで、ザッカーバーグが最初に行ったニューアークの教育機関への1億ドルの寄付がどのように行われ、そしてその取り組みがいかにして失敗したのかという話がここから始まります。

レッドライン(レッドライニング)

レッドライニング - Wikipedia

金融機関が低所得階層の黒人が居住する地域を、融資リスクが高いとして赤線で囲み、
融資対象から除外するなどして差別したとされる問題

アメリカの教育と政治イデオロギー

「再分配を大事にし、大きな政府を求める民主党」と、「競争を大事にし、小さな政府を求める共和党」

民主党も共和党も、「初等・中等教育においては、良い教育を無償で受けられるべき」と考えているのだ。

奨学金の話

学費が高いこと以上に、日本では諸外国に比べ、返済不要な「給付型」の奨学金が、
アメリカと比較どころか世界的に見ても圧倒的に少ない。
最近やっと、給付金奨学金が2018年から制度化することが決まったばかりだ。

地に足のついた日本での取り組み

記事では刺激的ではなく地に足のついた取り組みが大事であると説いています。
その中で彼が訪れた4つの団体が紹介されています。
無料の学習塾もすごいですし、モリウミアスも素敵な場所です。

WEB+DB PRESS Vol.90 SVG特集も良い

昔の号を今更読んでますが、この号濃いです。
 
ドラクエとGitの話は日記に書きましたが、
他にもマテリアルデザイン、Electron(今見るとsampleが少し古いですが、何ができるかが分かる良い記事です。Erectronに未来があるのかはよくわかりませんが。)、react-rails、MatzのEmacsRubyの話などすごく充実しています。

WEB+DB PRESS Vol.90

WEB+DB PRESS Vol.90

See Also

SVGの話

【第9回】SVG マルチデバイスに強く,アニメーションもできる画像フォーマット
に色々まとまっていて良いです。
(でも、IEのことを考えるとスッキリしません。)

  • IE9未満、Android3未満を除けば使える(※IEは要注意。後述。)
  • XMLなのでgzipするのおすすめ
  • アクセシビリティ向上のためにtitle, desc要素が使える
  • JS/CSSでも操作できる
  • アニメーションも可(SMIL/JS/CSS
  • 便利ツール
name description
svgo 最適化
svg-sprite スプライトマップの自動生成
svg2png フォールバック用のpng画像生成
svg4everbody IE用に外部SVGを呼び出せるやつ
Snap.svg SVG操作とアニメーション
d3.js SVG出力便利

Can I Use

現状こんな感じ。
Can I use… Support tables for HTML5, CSS3, etc
f:id:rochefort:20170312195857p:plain f:id:rochefort:20170312195242p:plain
まぁ、使っていいよねという雰囲気ですね。
よく見ると注釈がついています。
 

IEについて

Can I Useの注釈について

IEはforeignObject(SVG以外の要素を埋め込むやつ)が利用できないのと、IEとEdgeはfilterが利用できないようです。
また、IEは拡大ができないようで、workaroundとしてheight/width/viewBoxとCSSを追加することと記載されています。
こちらのリンクが紹介されており、(imgタグにwidthの指定を解決方法の一つとして提示。max-widthはダメとあります。)
Test Scaling Of SVG Images In Fluid Layouts
 
さらに、こちらのリンクが記載されており
Fix SVGs not scaling in IE9, IE10, and IE11
SVGからheight/width削除して、cssで制御する方法が案内されています。
 

しかし、これをやると

IE9-11で背景画像のSVGの表示が崩れる問題と対処法 - 週刊SVG
という問題が出てくるようです。
 

これの原因は

こちらで述べられている
asamuzaK.jp : ♪Vector Vector, please. Oh, the mess I’m in © UFO

IEの固有サイズ表示で高さが150pxに固定されるのは、
「バグ」というわけではなく、単にSVG1.1の仕様をIEがまだ実装していないだけであり、
実は、IEはCSS2.1の仕様に沿ってフォールバックを適切に(?)働かせている

というところな気がします。
 

結局

Can I Use に記載の通り、全部入り(height, width, viewbox, css)が良いのかな(best practiceどれ?)。
 
他にも、「改ページ付近でsvgでスプライトしていたりすると、あるページでは大丈夫なのにあるページではクラッシュする」なんてのもあるようです。(回避策あり)
IE11でsvgを含むページを印刷するとクラッシュする件の対応 - Qiita
 

感想

IE大変ですね。
IEによって失われた人類の時間はとんでもない気がします。