この記事は、 Recruit Engineers Advent Calendar 2017 の2日目です。 リクルートテクノロジーズで パートナーとして働いてる mizchi です。ここでの仕事は、 yosuke_furukawa が忙しくて調べられないことを、勝手に調べてくることです。 今までリクルートでやったことは Next.js, AMP, PWA, Puppeteer って感じ。今回は Puppeteer を使ったE2Eテストの自動化やパフォーマンス評価の話をします。 puppeteer とは リポジトリ名でわかりますが、GoogleChrome チームが公式に提供する Chrome の Headless Driver です。 スペルがとにかく覚えづらい クロスブラウザテスト以外にはかなり万能なツールです。E2Eテスト、スクレイピング、日々の作業の自動化、なんでもござれ。 他のブラ

Elm2 アドベントカレンダー 2017 の４日目です。 elm-test に搭載されている機能 Fuzzer を紹介します。 Fuzzer とは Fuzzer とは elm-test に標準で付いてくるテストデータの自動生成機能です。 Fuzz モジュールによってこの機能が提供されています。 公式の例を引用します。これは「任意の文字列に対して２回 String.reverse を適用すると元の文字列に戻る」というテストです。 import Expect import Test exposing (Test) import Fuzz exposing (..) suite : Test suite = describe "The String module" [ describe "String.reverse" -- fuzz runs the test 100 times with r

（場合によっては多少待ちます） チェック事項 以下の項目をチェックします。 CoreArrayUsage Elm 0.18 の Array にはバグがあるので、今は Skinney/elm-array-exploration を使った方がいい（0.19 でコアにマージされます）。 DebugCrash Debug.crash が使われている。 DebugLog Debug.log が使われている。 DropConcatOfLists リストを無駄な結合 [1,2,3] ++ [4,5] は [1,2,3,4,5] のようにまとめた方が良い。 DropConsOfItemAndList リストを無駄な結合 1::[2,3,4] は [1,2,3,4] のようにまとめた方が良い。 DuplicateImport 同じモジュールを２回インポートしている。

こうすることによって、生の文字列よりもプログラムで扱うことが簡単になります。 しかし、どうすればこの構造を得ることができるのでしょうか？少し考えてみましょう。 split と trim で頑張る 正規表現で頑張る ループで頑張る 全部つらそうですね。 Elm の構文解析器（パーサー） elm-tools/parser は、そんな構文解析を超シンプルな記述で実現してしまうライブラリです。Elm の作者である Evan 氏自身によって書かれています。 例として公式のサンプルを引用してみます。ここでは ( 3, 4 ) のような文字列を２次元の座標として解釈するパーサー point を定義しています。 import Parser exposing (Parser, (|.), (|=), succeed, symbol, float, ignore, zeroOrMore) type alias

<|ってなんだよ魚の頭かよキメぇなとか思いながらドキュメント読んで気づきました。 あれ、func1 <| func2 argってfunc1 (func2 arg)だったんすかと。 <|ってなんだよ ドキュメントによると<|は後方関数適用（なんだそれ？）する関数で、こういうことなんだそうです。 (<|) : (a -> b) -> a -> b Elmの型の見方を簡単に説明すると、 Intは「Intを返す関数」 Int -> Stringは「Intを引数にとりStringを返す関数」 Bool -> Int -> Stringは「BoolとIntを引数にとりStringを返す関数」 (Bool -> Int) -> Stringは「「Boolを引数にとりIntを返す関数」を引数にとりStringを返す関数」 と読めばいいみたい。また、型のとこをaみたいに小文字で書くと型変数になってジェネリッ

はじめに この記事は、Life is Tech ! アドベントカレンダー2016 18日目の記事です。 はじめまして！iPhoneメンターのにっしーです。 「時間があるときに勉強しよう」と人工知能／機械学習／Deep Learning／認識技術といったトピックの記事の見つけてはストックしてきたものの、結局2016年は何一つやらずに終わろうとしているので、とにかく一歩でも足を踏み出すべく、 本質的な理解等はさておき、とにかく試してみる ということで画像認識技術に触れてみることにしました。 画像認識とは? 画像認識とは、画像データの画像内容を分析して、その形状を認識する技術のことである。 -- Weblio辞書 画像認識では、画像データから対象物となる輪郭を抽出して、背景から分離し、その対象物が何であるかを分析するのが基本になります。 しかし、人間なら無意識化に行われていることですが、コンピュ

この記事はLisp Advent Calendar 2016の1日目の記事です。 Lisperの皆さん、どうもこんにちは、こんばんは、おはようございます。 Lisp Advent Calendar初日ということで、この場を借りて僕のCL生活1年目を振り返らせていただきます。 これからCommon Lispを始める方の道標になれば幸いです。 始めたワケ 僕がCommon Lispを始めようと思った理由です。 ブログの最初の記事にも書きましたが、やはり深町さんの影響が大きく、特に刺激を受けたのが以下の記事です。シビレますね B-) Common LispがWeb業界を駆逐するとき – Revenge of Lisp in Web | ありえるえりあ この記事のポストからおよそ6年が経ちましたが、今とこの当時を比べるとかなり状況が変わったように感じられます。 Lisp自体への注目は多くありません

はじめに 僕の本業は酪農で、ヤギのさくらちゃんをお世話するのが仕事ですが、それだけでは食っていけないのが世の中の悲しさなので、副業でフリーランスのITコンサル(兼プログラマ)や株式会社UZUZっていう会社のひきこもり系最高技術責任者としてHaskellやElmを業務で使っています。 あと、個人的な趣味で株式会社ARoWっていう社員数2名のちっちゃいWeb系の会社を実験的に経営していて、そこでもメインにHaskellを使っています。 Haskellを実際に小規模な会社やフリーランスで使っている人って、実は世の中にほとんどいないみたいです。 そこで、実際のところ「Haskellって資金力のない会社や個人が業務で使えるのん？」っていう疑問に対して率直にお答えします。 日本Haskell界の現状 まず、Haskell界隈の日本における現状についてお話します。 知ってる方も多いと思いますが、日本でH

GAE/GoのWebアプリをCircleCIで自動テスト&自動デプロイするを見かけたので、OSSなら無料で使えるTravisCI版を書いておきます。 .travis.yml全体 ※2015/01/28追記 GAE/GoでAppStoreのレビューをSlackに通知してくれるやつ作ったで紹介しているほうが少し新しくなっていますので、そちらも参照してください。 せっかちな人向けに先に設定結果を置いておきます。 こっちのリポジトリにも置いてあります。 https://github.com/yosukesuzuki/go-malt language: go before_install: - pushd $HOME - wget -q https://storage.googleapis.com/appengine-sdks/featured/go_appengine_sdk_linux_amd6

起きている問題 WebAudioAPI が HTML Audio に比べて便利な点の１つに、 iPhoneのマナーモード時にちゃんと消音してくれる、というのがあります。 しかし、最近の iOS Safari もしくは WebAudioAPI の仕様変更により、 WebAudioAPIを使っていても、状況によってはマナーモードでも 音が鳴ってしまう事態が起きているようです。 SoundJS, boombox.js, howler.jsといったWebAudioAPIをサポートしている 有名ドコロのライブラリは、現状全てiPhoneのマナーモード時でも 音が鳴ってしまうようになっています。 これではユーザーフレンドリーな実装ができません。 原因究明・解決 ライブラリを使わずに生の WebAudioAPI を普通に再生する分には、マナーモード時に正しく消音されることを確認できたので、 ライブラリの

動かないモックアップ及びワイヤフレームを描く際に今までは「紙とペン」もしくはBalsamiq Mockupsを使っていましたが、「どうせなら描いたモックがHTMLになればいいのに」と欲を出して、Bootstrapテンプレートをベースにモックアップを作れるツールを探してみました。 手軽な物からリッチな物順にまとめてみています。 Bootsnipp ざっくり言うと、Bootstrapで作っているサイトのパーツ・レイアウト作る用のサービスです Bootstrapのパーツをドラッグアンドドロップでレイアウトし、HTMLとして出力することが可能です。 Form Builder, Button Builderなど、いろいろな種類のパーツビルダーからレイアウトが作れます。 また、他のユーザが作成したレイアウト(スニペット)を閲覧、HTMLやCSSを取得することが出来ます。 サービス全体のデザイン用ではな

こんにちは、 株式会社ミクシィ で 家族アルバム みてね というアプリの開発に携わっている @_sobataro です。この記事では絵文字の標準とその扱いについてまとめます。 なお、この記事は mixiグループ Advent Calendar 2016 18日目の記事です。昨日は @radioboo さんの IGListKitでフィードUIをリファクタする でした。明日は @yusuke_tashiro さんの担当です。 TL; DR Part I. Unicode 絵文字の標準について。 暇人向け。読まなくてよい。 Part II. 実際にプログラムで絵文字を扱う上で問題となりうる点について。 Unicode 絵文字の文字数 (書記素クラスタの個数) を 厳密に正しく カウントするには、最新の Unicode (現時点では Unicode 9.0) 以降に対応したパーサが必要。 Acti

はじめに この記事は、第5回スタートアップiOS勉強会 - connpassでの同名の発表を文章形式でリライトしたものです。 スライド版(Speaker Deck)はこちら。 String と NSString 「文字列の特定の単語に色をつけて、textViewに表示したい」 …という、ヒトなら誰しもが持つ欲望をさらけ出してください。 そう言われたあなたは、以下のようなコードを書くかもしれません。 func coloredText(from str: String, target: String) -> NSAttributedString { // 対象単語の出現範囲( Range<String.Index> )を取得 let range: Range<String.Index> = str.range(of: target)! // Range<String.Index> を NSRa

# free total used free shared buffers cached Mem: 1026876 974072 52804 0 202656 348008 -/+ buffers/cache: 423408 603468 Swap: 2048276 92 2048184 ここで注意なのは、Linuxは空きメモリをbufferとcacheとして使用するので、 一見freeは少ない(上記の場合52M)と思われがちだが、実際にはbuffer+cacheとして確保されている(上記の場合600M確保されている) ディスクの空き容量が知りたい。 dfで確認可能。基本ですね。 [root@localhost /]# df /dev/mapper/VolGroup-lv_root 12941636 1851304 10432924 16% / Filesystem 1K-blocks U

HTML5 Advent Calendar 2015 10日目の記事になります。 Web MIDI API は、MIDI (Musical Instrument Digital Interface) とよばれるプロトコルを用いて Web ブラウザと MIDI 機器との間で通信を行うための API です。 この Web MIDI API は、Web ブラウザからハードウェア MIDI 音源を鳴らしたり、MIDI コントローラで Web ブラウザをコントロールしたりといった用途で使われています。Web MIDI API は Web Audio API とセットで使われることも多いです。また、音楽関連の用途以外にも、Arduino などのデバイスと PC を連携させたりする場合に Web MIDI API が活用されることもあります（参考: HTML5 Advent Calendar 2015

WebAssemblyが動くブラウザが来た 2016/03/16 とうとうWebAssemblyが動くブラウザが出てきました。 今回はChrome Canary版で、実際にCで書いたコードをWebAssemblyに変換して実行して見るところまでやってみます。 なお環境はChromebookでビルド諸々をして、Windows上のChromeで動作確認しました。 実行に関してはブラウザを入れれば良いとして、ビルドに関してはLinuxやMac系のOSでだいたい同じ手順でできるはずです。 準備 コンパイルの手順 次のような流れでコンパイルします。 Cのコードをclangを用いてLLVM IRにコンパイル LLVM IRをアセンブリを経由してWebAssemblyのテキスト形式までコンパイル テキスト形式のWebAssemblyをバイナリにコンパイル この3つでそれぞれ使うものを順番に導入していきま

昨年アメリカのベイエリアに引っ越し・転職して入った会社が、ちょうどElmを本格的に本番運用し始めようとしているところでした。それから1年半弱たった今、フロントエンドで新規に書くコードはほぼすべてElm、総行数はテストを含め5万行に達し、その過程で運用がスムーズにいかない場面も経験しました。そこで、 Elm、よさそうだけど実戦で使うためのツールは揃ってるの？ 実戦で使い始めたけど他の人はこの辺どうしてるのか知りたい という読者を想定して、自動テスト・デプロイ・チーム内コミュニケーションに使っているツールややってることを簡単に紹介します。 目次 前提条件や環境など コーディングスタイルの統一 テスト 依存パッケージの管理 アセット管理 CIビルドの高速化のための小技 コード分析 人事採用 前提条件や環境など 自社プロダクトを作っている会社です 1つのページもしくは機能ごとに1つのElmアプリと

Elm Advent Calendar の 19 日目です。 Effect Manager とは Effect Manager はElm 0.17から導入された新しい仕組みで、Cmd/Sub に関連する複雑な状態を管理することが出来ます。とはいえ、Effect Manager はかなり上級者向けの仕様になっており、導入から半年以上経った今でもドキュメントすらありません。また、Effect Manager を使ったパッケージは現時点では公開できないことになっています。 というわけで、あまり一般ピープルが使うことは想定していないようですが、せっかくなのでどういう仕組みで動いているのかを調べてみました。（以下、非公式の解説なので鵜呑みにしないでください。） Effect Manager モジュール一覧 Effect Manager は、Effectモジュールという特別なモジュールのみ使うことが出

ElmとJavaScript(以下JS)がやり取りする方法には、PortとNativeモジュールとprogramWithFlagsの３つがあります。（違いについては最後に。） Portの構文はよく忘れてコピペするので、Qiitaに書いておこうかなと思いました。 PortはElmに用意されているJSとやり取りする仕組みです。 Elmで以下のように名前と型だけの関数を用意し、Cmd/Subとして実行します。 const elm = document.getElementById('elm'); const app = Elm.Test.embed(elm); //Elmアプリケーションを起動 //ElmからJSへはsubscribe app.ports.hello.subscribe(function(fromElm) { console.log(fromElm); //JSからElmへはse

Elm Advent Calendar 2016 の10日目の記事です。 今回は、Html.Lazy モジュールについて。 Html.Lazy とは Virtual DOM のパフォーマンスがいくら良いとは言え、無駄な Virtual DOM を際限なく作り続けるとコストになります。そこで、Html.Lazy モジュールはこのコストを抑え、パフォーマンスを最適化する方法を提供します。 仕組み 一言で言うと「モデルが変わらなければビューも変わらない」という性質を利用します。Elm の関数はすべて純粋であることが保証されているため、引数が変わらなければ返す結果はいつも同じです。そこで、Elm ランタイムはHtmlを生成する関数の引数が前回と同じであるかを見て、同じであればロジックを丸ごとスキップして前回の値を使いまわします。 使い方 使い方は簡単です。ビューを生成する関数の頭にlazyとつける