koda3のブックマーク / 2016年9月6日 - はてなブックマーク

Webディレクターが知らないとマズい！Googleの注目プロジェクトPWAって何？

今回は、グーグルより昨年リリースされ、今年5月に開催されたGoogle I/Oでも話題の中心だったPWA（Progressive Web Apps）についてまとめます。 PWAとは？ PWA（Progressive Web Apps）はグーグルがモバイルユーザーのユーザー体験向上を目的とし、今までのWebアプリ（サービス）にWebとアプリの両方の利点を兼ね備えた仕組みのことです。詳しい仕様は、グーグルのPWAのページやGithubにありますので、そちらを参照してください。 Progressive Web App Dev Summit | Google Developers Google Chrome/ioweb2016 | GitHub PWA対応でできること PWA対応することで、今までアプリでしかできなかった施策がWebサイトでも実現できます。下記ではPWA対応することによるメリットを

koda3 2016/09/06

リンク

Docker Swarm Mode でお手軽ブルーグリーンデプロイメント - Qiita

Dockerで1.12から追加されswarm modeを使うと別途オーケストレーションツールを使わずとも簡単にブルーグリーンデプロイメントを実現できて便利です。簡単にブルーグリーンデプロイメントする手順を紹介したいと思います。ブルーグリーンデプロイメントとは本番として使える環境を２環境用意して片方を待機系にしておき、待機系を更新してから環境を切り替えることでデプロイを行う方法です。環境をそれぞれブルーとグリーンと呼びます。 Dockerクラスタの構築とDockerイメージの用意の手順はほぼ説明しません。必要環境は以下のとおり Docker 1.12.1以上 Nginx erb ざっくり全体像 Dockerのサービスとしてblueとgreenの2環境を用意します。環境の更新はdocker service updateコマンドで行いますアクティブ環境の切り替えはNginxのupstre

koda3 2016/09/06

docker

リンク

cookpadで学ぶ自然言語処理＆機械学習/internship2016

I Don’t Have Time: Getting Over the Fear to Launch Your Podcast

koda3 2016/09/06

リンク

DBのCRUDでUとDは必要ないという話を聞きましたが具体的にどう実装するの？

"CRUD is Dead"なんて言われてる方もいらっしゃるようでCRUDのUとDを禁止する流れが存在するようです。以下のようなサイトでも言われているように、CRUDのUとDを利用せずデータをログのように扱う方法は関連するデータ（特に履歴）が失われないために好感が持てました。 http://tanakakoichi9230.hatena blog.com/entry/6715376804 http://qiita.com/Jxck_/it ems/156d0a231c6968f2a474 http://mike-neck.hatenadiary.com/entry/2015/03/24/231422 現在MySQLを利用してウェブサービスを作成しようと考えているのですが、実際にUとDを利用しないDB設計をするにはどうすれば良いのかというところでつまづいてしまいました。自分で考えたものは5つ

koda3 2016/09/06

DB

リンク

【D3.js】proxyを使ってデータセットが変更されたらチャートを再描画する。

D3.jsを使ってデータビジュアライゼーションを作成するときにありがちな処理として、入力フォームの値が変更されたらチャートを再描画するというのがあります。入力フォームのchangeイベントが発火したらフォームの値を取得してredrawするわけですが、入力項目の数が増えてきたりすると管理が面倒になってきます。できることなら、入力フォームのイベントとチャートの描画は疎結合にして、データセットが変更されたらチャートを描画するような処理にしたいところです。 ECMAScript 2015にて実装されたproxy機能を使うとオブジェクトの変更を簡単に監視することができるので、データセットの変更を監視して再描画処理を行うことができます。 ※ Proxy Objectは2016/9/6現在、一部のブラウザでしか使用することができません。 Can I use… Support tables for HT

koda3 2016/09/06

proxy

リンク

[JavaScript]HTML5 Form Validationの制御と注意事項

##概要 HTML5から支援しているForm Validation、皆さんご存知ですよね。非常に便利ですし、自分もHTML5に感謝しています。👏 サーバでは常にデータを検証するべきですが、追加のデータ検証をWebページ自身で行うことにも多くの利点があります。ユーザがフォームに入力している間にデータを検証することで、ユーザは何らかのミスをしたことを直ちに知ることができます。これはユーザが HTTP のレスポンスを待つ時間を減らし、またサーバで誤ったフォーム入力を扱うことがないようにします。詳しい内容は以下の記事をご参考してください。 🔗[JavaScript]HTML5 Form Validation しかし、ドンー (OA O; ) ブラウザー別にメッセージが統一されず、実際の案件には、デメリットになっちゃったんです。やっぱりHTML5 Form Validationに完全に依存

koda3 2016/09/06

html
form

リンク

Docpress - 読みやすい開発者向けドキュメントを生成

開発者向けのドキュメントシステムなんて何でも良いと思っていないでしょうか。開発者はオンラインドキュメントをよく読み、Googleで検索し、そこにあるコードをコピーして実行します。そのため、半端なドキュメントでは彼らの信頼を失ってしまうでしょう。そこで使ってみたいのがDocpressです。Markdownベースのドキュメント生成システムです。 Docpressの使い方デモです。左側に目次、右側にコンテンツが表示されます。ページの下に次のページへのリンクが表示されます。メニューは隠せます。 Docpressは文字が大きめ、デザインもすっきりしたドキュメントを生成します。使い方としても docpress s でプレビューができるなど、とても簡単に使い始められます。 Docpressはnode/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 docpr

koda3 2016/09/06

リンク

AWS Solutions Architect ブログ

SAの西谷（@Keisuke69）です。本日よりAWS LambdaでNode.js 4.3.2が利用可能になりました。利用にあたってはファンクションの作成時もしくは更新の際にランタイムの選択で「nodejs4.3」を選ぶだけです。なお、Node.js 0.10を利用したファンクションの作成もサポートされますが、2016年10月にNode.js 0.10がEOLとなるためこれ以降は新規作成はできなくなります。ここではNode.js 4.3.2が利用可能になったことに伴う変更点について簡単に御案内します。主な変更点 Node.jsのv4ではJavaScript界隈では非常に重要なアップデートであるES6（ECMAScript 2015、ES2015）のサポート範囲が拡大しています。もちろんPromiseも利用可能になっています。これまでNode.js 0.10だったためにPromise

koda3 2016/09/06

リンク

Mojik - 日本語文章の可読性を向上させるJavaScript

Webにおける日本語はちょっとした工夫が読みやすくなります。例えば日本語と英単語の間には半角スペースを空けた方が良いでしょう。また、全角括弧を使うと間が空きすぎてあまり良くないのですが、半角では詰まりすぎるといった具合です。そうした日本語の文章におけるちょっとした問題を解決してくれるのがMojikです。和文の文字組を上手にコントロールしてくれます。 Mojikの使い方適用前と適用後の文章です。括弧が連続した時に隙間を狭めています。別な例。英数字の前にスペースが空いているのが分かるでしょうか。小さな隙間を使うことで可読性がぐっと向上します。書籍や雑誌では文字組は微妙に調整しますが、Webの場合はデフォルトのまま使われがちです。Mojikを使えば改善できるでしょう。 MojikはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 Mojik terke

koda3 2016/09/06

リンク

target="_blank" で開くリンクには rel="noopener" をつける - Qiita

The performance benefits of rel=noopener - JakeArchibald.com より target="_blank" でリンクを開く場合は、rel="noopener"をつけておくのが良い。管理画面などでは rel="noopener noreferrer"というかたちでnoreferrerをつけるとさらに良いかもしれない（参考：http://qiita.com/wakaba@github/it ems/707d72f97f2862cd8000 ） target="_blank" で開いたWindowは、 window.opener を使って親のWindowを操作することができる。つまりtarget="_blank"で開いたサイトで任意の操作ができてしまうことになるけど、Same origin の仕組みが働く。ので、Same originではない場