会社で「AMPページ内でこういう操作したときにこういうDOMを差し込むことってできるんですか？」って質問されて、「それworker-domがAMP使えるようになったらできそうですね」ってなったのでworker-domを触ってみました。 ※この記事でやってることはamp-bindとか既存のAMPコンポーネントでも実装可能ですが、worker-domの素振りログなのでご了承ください。 今回出てくるコードはgistに置いています。 worker-domとは GitHub - ampproject/worker-dom: The same DOM API and Frameworks you know, but in a Web Worker. AMPプロジェクトが開発しているWorker内でDOM操作をするライブラリです。現時点(2018年12月)ではalpha版です。 Workerっていうのは

この記事では私が2年以上PostCSSを実務で利用してきた、CSS Level 4の状況を振り返ります。 CSS4を使うための環境について まず、PostCSSが出てからcssnextを使ってCSS Level 4を使えるようにという記事が世に多く出回り、（ぼくの中で）実質的にpostcss-cssnextを使うことがPostCSSにおけるデファクトのようになっていました。 PostCSSとcssnextで最新CSS仕様を先取り！ | HTML5Experts.jpにも以下のようにアツいメッセージが書かれています。 cssnextでFuture CSS syntaxを先取る！ これには非常に心を掴まれました。 また、cssnextが発信しているコピーも簡潔に心を捉えています。 Use tomorrow’s CSS syntax, today. これには「トゥモローズシーエスエスをわれもトゥ

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

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

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? rails5からは標準のWebサーバがPumaになって、Unicornの代わりにPumaを使う人が増えてきました。 ただせっかくPumaを使うのであれば、Unicornとの違いを意識して使いたい というわけで、ありがちではありますが、PumaとUnicornの比較をしてみたいと思います。 マルチプロセスとマルチスレッド Unicornはマルチプロセス Pumaはマルチスレッドで動きます Unicornはプロセスごとに通信処理をおこなうので、重たい通信があった場合そこでブロックされて全体が重くなってしまいます。 これをさばけるようにするに

はじめに Gaiax Group Advent Calendar 2018の11日目の記事です。 マイクロサービスにおけるBFFを、いろいろな事情からRailsサーバーで実装しています。その際に取り組んだRepositoryパターンについて紹介したいと思います。 BFFの概要 BFF(Backend For Frontend)は、その名の通りフロントエンドのためのバックエンドという役割です。 BFFを導入することで、APIリクエスト/リソース取得処理やフロントエンド側で必要な形式へリソースを整形といった責務をBFFに持たせることができるので、Clientは本来の責務であるUI層の処理に専念できます。 今回の記事の前提 Railsは DB接続を前提としたActiveRecordパターンです。そのため、RailsでBFFを実装する場合は、API経由のリソース取得をActiveRecordパター

今回Kotlinで，router + MVCのようなアーキテクチャによってAPIサーバを書いた時の話のうち，技術的なトピックのみをピックアップしてここに書くことにします．//TODO ポエムにならないようにする 目指す(していた)もの Ruby on Railsのようなアーキテクチャ．といってもRailsにあんまり詳しくないのでいわゆるMVCのように層を分離した上で，アクセスをroutingすることができるもの．可能な限り100%Kotlinを目指します． 使用ライブラリ 知ってる人は読み飛ばしてください． Ktor Ktorは，JetBrains社主導で開発されるKotlin向けのサーバサイドフレームワークです．coroutines basedなフレームワークということもあり，最近やっとバージョン1.0.0を迎えました．このフレームワークの特徴をいくつか挙げるとすると， micro we

Retty Advent Calendar 2018 6日目の記事です。 昨日は @tkngue で CircleCI as a Resource でした。 CircleCIをビルド環境以外にも使い倒していこうという内容でしたが、今日はそれをフロントエンドで実践してみた事例紹介になります。 TL;DR PRごとにStorybookビルドするの、CircleCIで完結して簡単だからやるといいよ ほんでデザイナーもPRのフローに乗ってもらうと実装された細かい動作も確認できていいよ はじめに Rettyではお店会員様が 店舗情報の編集 検索結果にどう広告を出すかの設定 Retty予約にまつわる在庫登録・確認などの設定 アクセス解析 など多種多様な設定・確認を行える管理画面があります。 そちらを通常の開発とは別でフロントエンドのリニューアルを小さなプロジェクトチームで目下進行中です。 古き良きサー

TL;DR justInCase で使われている Sketch ファイル管理手法を紹介します この管理手法は github で公開されています 非エンジニアでも使えるように工夫していますが、まだ改善余地があります 前口上 BitBucket にはリポジトリの許容容量が 2GB という制限があり、それを超えるとリモートへの操作が激しく制限されます。 バージョン管理システムの性質上、「ファイルの削除」しても履歴から消えるわけではなく、削除の操作が即リポジトリサイズの減少に繋がらない（むしろ増える）というのもあって、サイズリミットに達してしまうと管理が難しくなります。 バージョン管理システムで一般的に管理されるソースコード類は基本テキストファイルで、差分だけ保存していれば、それだけで 2GB を超えるのには相当な期間が必要です。 ところが、 Sketch ファイルを始めとするバイナリファイルをバ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? まえがき 本記事は進化を続けるフロントエンド界隈の思想を大まかに紹介するものです。 「自分で問題を作って自分で解決する自作自演を繰り返している」というような批判をたまにうけるフロントエンド界隈ですが、 それぞれの技術はもちろん何らかの課題を解決するために生まれてきたものであり、 それらの課題と解決策を知り、フロントエンドがどのような方向に進もうとしているのかを認識しておくことは 流行のReactやVue.jsを活用していく上でも地味ながらも確かに役に立つことだと思います。 対象読者 ReactやVue.jsなどを使って現在流行のフロント

2020-08-13 追記 この記事はRails 5を対象としていますが、Rails 6でもだいたい同じです。 ただ、Rails 6からautoloadの仕組みとして採用されたzeitwerkモードの仕様によって、 Base::API クラスを正しく読み込めないようです。 Rails 6をお使いの場合は、記事内の Base::API を Base::Api と読替えるか、 ActiveSupport::Infector の設定を上書きして "api".camelize の結果が "API" となるようにしてやってください。（参考: Zeitwerkの壊し方 の config/initializers/zeitwerk.rb ） はじめに Rails 5のAPIモードと、Grape、Grape::Entityを用いてWeb APIを開発する手順についてここにまとめておく。 既存のRailsア

強力かつ柔軟なクライアントサイドキャッシュを適用できるService Workerですが、ブラウザ内で動くJavaScriptである以上、クロスドメインによる制約がかかってきます。 クロスドメインなソースからWorkerの登録 Service Workerはnavigator.serviceWorker.register(pathToJs)で登録しますが、このpathToJsにはクロスドメインなURLは渡せません。 ただ、アセットだけ別サーバに置いているような場合など、クロスドメインで登録したくなることがあるかもしれません。このような場合、 同じドメインあるいはBlobの形で、「importScripts()するだけのService Worker」を登録する importScripts()はクロスドメインでも問題なし という2段階を踏むことで、クロスドメインに置いたJavaScriptのコ

まえがき 先週末、仕事で東京から岡山まで行く機会があり、新幹線の中で一人でハッカソンしてみたら、意外と０から作ってサービスを公開するところぐらいまではできました。当日の経過のログが誰かの助けになればと思い、投稿。TsuyoshiNumano/emojishare にコードは公開してます&要所要所で Pull Request を分けました。　サービスづくりの雰囲気だけでも感じ取ってもらえれば幸いです。 サービス自体は流行らないと思うので、そのうち消すと思います（ドメイン代とかもかかるし汗） 当日の twitter 実況。 対象読者 さくっと web サービスを作って公開してみたい方 割とフロントエンドよりの技術スタックなので、そのへんに興味ある方 *細かい技術的なところはお話しません。 使った技術スタック create-react-app React でサクッとアプリ作るならオススメ Goo

railsで検索機能をつけるには 便利なgemがあります。おそらく検索して上位に出てくるのはransakではないでしょうか？しかし、railsで検索機能のついたapiを提供するにあたって、どうしても独自の実装が必要になることもあります。ここではrails wayにのった検索の実装の仕方について説明します。 こちらのサイトを大変参考にさせていただきました。 完成形 urlで次のようにたたくと条件を満たすeventが返ってくる. この場合、最大人数10人以上で。場所が梅田、ジャンルが「1人でもOK」もしくは「おしゃれなカフェ」、人気順に表示、最初から3番目のデータで、全部で3件取得という意味になる。 説明 capacity イベントの最大人数を指定。例えばこの値が10なら最大人数が10人以上のものが返ってくる。 location 開催場所。0:梅田 1:なんば　2:神戸 genre イベントの

ウェブ技術でデスクトップアプリを開発するとなると、一番メジャーなのはやはりelectron/electronでしょう。ところがElectronは割と面倒です。配布ファイルのサイズ、セキュリティなど。 それとバンドラとして有名なWebpackですが、こっちも仰々しいです。 そこで今回はライトウェイトでゼロコンフィグな、carloとparcelの組み合わせについて書きます。 carlo GoogleChromeLabs/carloは先日登場したばかりの headful Node app framework です。headlessならぬheadfulです。 中身はぶっちゃけると puppeteer-core の薄いラッパーです。 普通のPuppeteerはオープンソースのChromiumをダウンロードしてきて動作しますが、puppeteer-coreは既にローカルにインストールされているChro

結果はどうなったでしょうか。 自分が今使っているGoogle Chromeだとこうなりました。 結果は{a: 10}というオブジェクトです。まあ、これは当然ですね。3 + 5と入力すれば実行されて8が返ってくるのですから、{a: 10}というオブジェクトリテラルを書けば{a: 10}というオブジェクトが作られるのは当然です。 ……。 ここで、一部の人は「おいふざけんなよ」と思っているかもしれません。というのも、この例は環境によっては違う結果になるのです。具体的には、Chrome以外2のブラウザのREPL（FirefoxやEdgeなど）が該当します。あと、ts-nodeのREPLも該当するらしいです。これらの環境では、結果は{a: 10}ではなく次のようになります。 オブジェクトを作ったはずなのに結果が10とか意味不明ですね。そもそも、こんな簡単なプログラムで結果が全然違うとか、JavaSc

あまり良いタイトルではないですが 2つの使い方があるよ、という話です。 this についてここ(JavaScriptのthis(コンテキスト)とは？)で書いたのですが、 そういえば this の話なのに new にあまり触れてなかったなと気づいた流れで、 new といえばそういえば2通りの使い方があるなということで書いてみました。 new の2通りの使い方。 var a = new function(){ // 使い方：1つ目 this.x = 'x1'; this.y = 'y1'; }; var b = new function(){ // 使い方：2つ目 var that = {}; that.x = 'x2'; that.y = 'y2'; return that; }; console.log( a.x, a.y ); // x1,y1 console.log( b.x, b.y

はじめに Google cloudでcronサービスがあるといいなーと思っていたらGoogle cloud schedulerのbetaが公開されたので早速試してみました。この記事のポイントは次の二点です。 POSTするときはgcloudコマンドを使ってheaderのContent-Typeを明示して下さい ケースによってはGoogle apps scriptで十分な気もする 前準備 Schedulerのテスト用にFirebase FunctionsでAPIサーバーを立てて、Google Apps Scriptで動作確認しました。この辺りの詳しい方法はここでは書きませんので、ググって下さい。 APIサーバーの用意 Firebase Functionsで次のようなプログラムをdeployしました。単純にパスワードを確認して、合っていればFirestoreのechoTestにドキュメントを追加

Contentful is not a CMS, Contentful is content infrastructure. Webサイトがシンプルで見やすい。 ものは言いような気もするけれど、CMSではなくContent Infrastructureらしい。 ドキュメントも見やすくて素敵。 https://www.contentful.com 無料で使える範囲と制限 https://www.contentful.com/pricing/ アカウントの作成時に、MICRO SPACEというものをひとつ割り当ててもらえます。個人で使う分にはMICRO SPACEで事足りそうなので、かなり気前がいい印象です。 24個のコンテンツタイプ 5000個のレコード 10人のユーザー 1つのロール（ユーザー権限） 2つの環境（master/stagingとか） 2つのロケール（多言語対応） ※ 2018