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

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? 背景 僕が本格的にWebのエンジニアになったのは2014年頃からで、早いものでもう丸2年ほど経ってしまうことになります。 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

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Reactがもっと広まって欲しいと思っている今日このごろ。React EuropeでJoseph Savona氏の講演でRelayについての「モヤっと」がいっきにかなり解消された気がするので、要点を本編を翻訳しながら自分なりにまとめておきます。 私の理解が誤っている可能性は十二分にありえるので、ご指摘いただければ幸いです。 はじめに ReactとFluxって組み合わせと共によく目にするのが↓の図。 矢印は一方向にしか進まないのが特徴で、わかりやすいってのがいろんなところで書かれているんですけど、 **結局データをサーバからとってくるとこ

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

var app = require('app'); var BrowserWindow = require('browser-window'); var mainWindow = null; app.on('window-all-closed', function() { app.quit(); }); app.on('ready', function() { mainWindow = new BrowserWindow({width: 800, height: 600}); mainWindow.loadUrl('file://' + __dirname + '/app.html'); mainWindow.on('closed', function() { mainWindow = null; }); }); 上記のように基本的にはメインプロセスはjsで あとはレンダラープロセスで描画

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

{-# 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) <- sampleNow (b esA) loop cbA esB return evE where loop cbA esB = do eys <- sampleNow (nextAll

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

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? 先日は瞬殺で作るMesos + Chronos + Marathon + Dockerクラスタ環境で書いた通り、Mesosの環境を作ったのですが、今回はマイクロソフトが発表したService Fabricを触ってみました。実際触ってみるとかなり面白い感じなので、皆さんにも共有してみたいと思います。 Service Fabricとは Azure Service Fabricはマイクロサービスベースのアプリケーションを素早く開発するためのPaaSです。 マイクロサービスとは その前にそもそもマイクロサービスとは何でしょうか？マイクロサービス

##Signalのカタログ http://giisyu.github.io/elm-signalCatalog/ Signalの性質がひと目で分かる、かもしれないSignalのデモを作った。 Signalによっては画面をクリックしたり、キーボードを押したり、押しっぱなしにする必要があります。 ソースコード Signalがどんな挙動をするのか、関数を通すとSignalの型がどうなるのか、どのSignalが優先されるのかとか、カタログで確認してみてください。 ##表示の見方 関数の型 Signal a になるコード タイムライン、右から左に時間が流れている。シグナルが出る（発火する）と、その時の型が出る。（少しズレます。） Signal を　Element.show した値です。つまりSignalの__現在の__型です。さらに言い換えれば画面に表示した時（View関数に持ってきた時のタイミング

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な状態だと思

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 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を組み合わせたものがマ

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