はじめに gulpとBrowserifyを組み合わせてフロントエンドJSをビルドする機会があったので、一通りやってみたことをまとめてみた。 gulpについて Node.jsのstreamを活用したビルドシステム、ということらしい。 Streamのおかげでビルドフローをとても直感的に記述できると感じた。 他のWebフロントエンドのビルドシステムは使ったことがないので比較はできないけど…。 Browserifyについて node.jsと同じように (npm、requireなどを使って) モジュール化されたフロントエンドJSが書けるツール。便利。 JSのモジュール化というと、最近はwebpackというのもあるらしい。 基本 gulp = require 'gulp' source = require 'vinyl-source-stream' browserify = require 'brow

「エンジニア35歳定年説」が許されるのは小学生までだよねーとか思っていたら、実際にはそんな感じになってしまったあるエンジニアの半生を振り返ります。ご参考まで。 第一期 サービスリリース前 自分でサービスをガリガリ作っている というかサービスを作ることしかしていない １日１６時間くらい仕事をしても、プログラミングしかしていないので疲れない 仕様の検討をしながら作るので、基本全ての時間は開発をしているという認識 フルスタックエンジニアというある種の全能感を満喫する 第二期 サービスリリース後 運用（ユーザーサポートなども含む）が入ってくるのでサービス開発のスピードが落ちる エンジニアを採用（業務委託含む）する 仕様の調整やコードレビューなど、開発以外の仕事が少しずつ増えてくる でもまだまだ自分が圧倒的にメイン開発者 コードレビューやマージ、リリースは自分が全てやる システムの全体からディテール

AWS のクレデンシャルを GitHub に載せてしまう事故 相変わらず続いてますが、以下秘密情報の公開を防ぐ方法。 （ AWS の Glacier とか GCP の BigQuery とか 課金の仕組み系も気をつけないとですね・・） AWS が公開しているツール。パスワードなどの秘密情報を 誤って git リポジトリに commit する ことを防いでくれます。 https://github.com/awslabs/git-secrets 設定手順 1. インストール ツールを置いておくためのフォルダを作り、 あとはそこにソースを落としてきて make install するだけ。

背景 僕が本格的にWebのエンジニアになったのは2014年頃からで、早いものでもう丸2年ほど経ってしまうことになります。 Webに転向してからは主にフロントエンドエンジニアとして勤務してきました。 よく言われることですが、最近のフロントエンドの趨勢は本当に早いです。 最初はキャッチアップに苦労したことを覚えています。 しかし段々と新しい何かを覚えることは苦でなくなり、今はこの流れに身を置くことが楽しいと思えるようになってきました。 激動の趨勢の中で、Webのフロントエンドエンジニアが口にするパラダイムは日ごとに変化しています。 この記事は元々社内向けに書いたものです。 色々なバックグラウンドを持つエンジニアと一緒にフロントの設計を考える場面で、共通言語を持つきっかけになればいいなー、という思いから書いたものですが、いい機会なので外向けに修正して公開してみます。 Webのフロントエンドを新し

（この記事はGoogle Cloud Platform Advent Calendar 2015の12月3日分の記事です） Cloud Vision APIと私 Googleに入ってからまもなく5年、Google Cloud Platformのデベロッパーアドボケイト（エバンジェリストみたいな役割）の仕事に就いてから1年が経ちました。仕事の半分はアジア地域向けの開発者コミュニティ支援で、残り半分はGCPの新製品ローンチの支援をグローバル向けに行っています。 特にここ半年は、TensorFlowをはじめ、GCPの機械学習系プロダクトのローンチ支援にフォーカスしています。TensorFlowはその序章で、公開前からAlphaカスタマー向けのスライドを作ったり説明やデモしたりしていました。 そうしたGCPの新しい機械学習系サービスのひとつが、Cloud Vision APIです。これはGoogl

Reactがもっと広まって欲しいと思っている今日このごろ。React EuropeでJoseph Savona氏の講演でRelayについての「モヤっと」がいっきにかなり解消された気がするので、要点を本編を翻訳しながら自分なりにまとめておきます。 私の理解が誤っている可能性は十二分にありえるので、ご指摘いただければ幸いです。 はじめに ReactとFluxって組み合わせと共によく目にするのが↓の図。 矢印は一方向にしか進まないのが特徴で、わかりやすいってのがいろんなところで書かれているんですけど、 結局データをサーバからとってくるところってどうなってるの？ってのが疑問として残ります。つまり、図で表現すると↓の部分の仕組みがどうなっているかってところです。 その部分を、Instagramのようなサービスを例に説明しています。 クライアントはどのようにしてサーバからデータを取得すべきか まず、I

追記 この記事は古いです。過去のものです。忘れましょう 対象読者 Elmを勉強しようと思って公式のドキュメント読んででelm-architecture-tutorialを見てどういう仕組みだよこれってなった人（つまり私） コードとかは上記チュートリアルとライブラリからの引用。内容としてはライブラリのコードを追っかけて理解できたことをまとめている。javascriptまでは踏み込んでない こんなバージョン。0.15.1 "dependencies": { "elm-lang/core": "2.1.0 <= v < 3.0.0", "evancz/start-app": "2.0.1 <= v < 3.0.0" }, "elm-version": "0.15.1 <= v < 0.16.0" import Html exposing (div, button, text) import Ht

インタラクティブなトイアプリを作る必要があったので electronとFRPが前提のHaskell風味AltJSであるelmを使って作ってみた。 さらにNativeなAPIを使う方法についても調査し、 今回調査した知見をもとに elmtrnというボイラープレートを作った Quickstart git clone git@github.com:yasuyuky/elmtrn.git cd elmtrn npm install elm make -y gulp 上記のようにすれば公式のclockサンプルを 謎の時計ウィジェットにしたものが立ち上がる。 elm + electron elmで書いたものをelectronで動かすのは想像していたより簡単で electronのhello worldに含まれるような 以下のような標準的なapp.jsで指定してるhtmlの部分を elmで生成されるhtm

追記2016/09/06 この記事は古くなっています。 公式からブラウザルーティングのライブラリが出ているので、こちらを検討してみてください。 elm-lang/navigation: Routing for SPAs, the Elm way Elmでブラウザルーティングっぽいデモをつくる。 アドレスの後ろにハッシュ(#)が付いたリンクは、アドレスの特定の部分(同id名)にリンクするハッシュリンクになる。 history apiという、ブラウザの戻る進むを操作するapiがある。 ブラウザルーティングとは上記のような技術とかいろいろ組み合わせて、ルーティングっぽいインターフェイスで、リンクごとにページをモジュールのように使えるようにしたもの。 Elmにもそういった機能と見た目を提供するライブラリ（elm-history,elm-router）があるので簡単に作ってみる。 ブラウザデモhtt

ICFP2015に論文が出るのだそうで、局所的に話題になっているFRPNowというライブラリ。 ちょっと触ってみたので、感触などレポート。 とりあえずFizzBuzz {-# LANGUAGE MultiWayIf #-} module Main where import Control.FRPNow import Data.Functor ((<$), (<$>)) import Control.Monad (join) streaming :: (EvStream a -> Behavior (EvStream b, Event ())) -> IO a -> ([b] -> IO ()) -> IO () streaming b ioA ioB = runNowMaster $ do (esA, cbA) <- callbackStream (esB, evE) <- sampleN

node.jsおよびnpmはインストールしてあるものとします。 下準備 1 npmでtwitterとdate-utilsを導入します。twitterは名前の通りnode.jsでTwitterAPIを叩くためのライブラリ、date-utilsは時間を扱いやすくするライブラリです。 //モジュール読み込み var twitter = require('twitter'), dateUtils = require('date-utils'); //認証 var api = new twitter({ consumer_key: '', //ここに取得したコンシューマーキーを入れる(以下3行も同様にそれぞれ入れる) consumer_secret: '', access_token_key: '', access_token_secret: '' }); var date = new Date()

はじめに タイトルは半分釣りですが、半分本気で考えてもいます。 近い将来、Webアプリが今のネイティブアプリの市場を超えてくる、と仮説を立てています。 ぜひ、先人のみなさんのご意見やお考えを教えてください。 SPAについて SPAとはなにか（What） 歴史 佐川夫美雄さんのイベントレポートの一部が、非常にまとまっていてわかりやすい部分でしたので、まず引用させていただくこととします。 RIAはアプリケーション利用者に対し高い評価を得ましたが、2010年のAppleショックにより衰退の方向へ向かいます。具体的には2010年にSteve JobsがFlashを激しく批判したことに端を発します。プロプライエタリ(Proprietary Software)なFlashよりオープン性のあるHTML5を推進するようになりました。2011年にはMicrosoftがWeb開発者に対してSilverligh

[2015/11/10 追記] Web Components周りはだいぶ情勢が変わったのでこの記事の内容は真に受けないでください。 (コメント欄が有益なので記事は残します) Polymerというより現状のWebComponents全体がふらふらしてるので口車に乗せられると将来痛い目を見そうだと思った 半年くらい経ってブラウザベンダー間での議論がけっこう進展したので、Web Components自体は割と安泰かと思います。 Shadow DOMの仕様を満たしてない Polymerが使っているShady DOMはCustom ElementsのStylingを容易にするためにShadow DOM仕様を満たさない状態で使われています。 https://www.polymer-project.org/1.0/docs/devguide/styling.html#background the Pol

import { foo, bar } from './foobar'; console.log(foo); bar.changeFoo(); console.log(foo); babel-node index.js と実行すると Foo Bar と 出力されます。Foo Foo ではありません。Node.js で CommonJS を書いていた人からすると、？？？となる挙動ですね。index.jsでの foo はただの変数ではないのです。 CommonJS なら・・・ CommonJS で素直に同じようなモジュールを書こうとすると、以下のようになると思います。これだと当然 Foo Foo と出力されますね。bar.changeFoo() を呼んでも foobar.js の module.exports.foo も更新されませんし、index.js の foo も更新されません。

先日は瞬殺で作るMesos + Chronos + Marathon + Dockerクラスタ環境で書いた通り、Mesosの環境を作ったのですが、今回はマイクロソフトが発表したService Fabricを触ってみました。実際触ってみるとかなり面白い感じなので、皆さんにも共有してみたいと思います。 Service Fabricとは Azure Service Fabricはマイクロサービスベースのアプリケーションを素早く開発するためのPaaSです。 マイクロサービスとは その前にそもそもマイクロサービスとは何でしょうか？マイクロサービスはマーチンファウラー氏が提唱した用語です。具体的なイメージはこの記事がわかりやすいです。モノリシックなRubyからGoによるマイクロサービスへ 上記マーチンファウラー氏のMicroservicesのページより 今までのアプリケーションは例えば私も大好きなRu

http://giisyu.github.io/elm-signalCatalog/ Signalの性質がひと目で分かる、かもしれないSignalのデモを作った。 Signalによっては画面をクリックしたり、キーボードを押したり、押しっぱなしにする必要があります。 ソースコード Signalがどんな挙動をするのか、関数を通すとSignalの型がどうなるのか、どのSignalが優先されるのかとか、カタログで確認してみてください。 表示の見方 1 map : (a -> result) -> Signal a -> Signal result () ------------------------()----------- Mouse.clicks 4 3 2 関数の型 Signal a になるコード タイムライン、右から左に時間が流れている。シグナルが出る（発火する）と、その時の型が出る。（

Help us understand the problem. What is going on with this article? こんにちは、@armorik83です。私のAngularJS歴は2年弱で、これまでAngularJSに関する記事はQiitaにたくさん書いてきました。例えば次のような記事です。 AngularJSアンチパターン集 2014.9 ここらでDirective Scopeの@=&をまとめておきたいと思う 2014.9 TypeScriptで書くAngularJSのMVC 2014.2 AngularJS Directiveの処理順を網羅してみた 2014.12 他にもニッチなものやイマイチだったものも含めてけっこうな数となってきました。また、こういった記事の縁で勉強会でも登壇させて頂きました。 モダンAngularJS 2014.12 GDG中国 TypeScr

個人的にはそこまでReactNativeに興味ないのだけど、今日なんとなくReactCanvasを試していたらなんとなくReactNativeを察した。 Flipboard/react-canvas https://github.com/Flipboard/react-canvas 作者はCanvasのネイティブ向け変換を作っていたEjectaの人。なるほど感ある。 参考: React Nativeがスマホアプリのフロント開発を変えるのか - ワザノバ | wazanova http://wazanova.jp/items/1676 試してみる SurfaceがReactCanvasのトップノードでそれ以下はcanvasでレンダリングされる 各ノードはleft, top, width, height が必須の絶対座標配置。CSSが分かる人は position: absoluteな状態だと思

Lau Taarnskovさんの2015年4月19日付のブログ記事、Elixir - The next big language for the webの翻訳です。 ElixirはErlangのVM上で走る、Rubyにちょっと似た(というのも作者(José Valim)がRuby on Railsのcoreチームメンバーなので)関数型言語です。 2012年に登場していてQiitaでもAdvent Calendarなどが既にあるようですがまだあまり知られていないですね。ElixirとPhoenix Frameworkを組み合わせたものがマイクロ秒のオーダーで反応が帰る爆速だそう(ホントかな～)で興味を持ちました。 しかしほんの10年前ぐらいの話がもう遥かな昔話に聞こえますね…。 (追記：実際にプログラムを書いてみました →　Elixirで試しに何か書いてみる(その1) Elixirで試しに何

Elmとjavascriptのやりとりには、どちらかと言えば高レベルなportを使用するものの他に、 低レベルで、PureScript等で言うffiに相当する、Nativeモジュールという機能が有ります。 Elmのcoreモジュールやelm-htmlなど他のjavascriptライブラリとのやりとりにはこれを使っています。 Elmはまだ発展途上でcoreモジュールに足りない機能も多々有るので、Nativeモジュールは書ける方が良いでしょう。 本稿では現時点でcoreモジュールに無い、takeWhileの実装を通じてNativeモジュールの書きかたを解説します。 開発開始 なにはともあれelm-makeコマンドを使ってプロジェクトの雛形を作りましょう。 $ elm-make Some new packages are needed. Here is the upgrade plan. Ins