この記事は ASP.NET Advent Calendar 2015 の 11 日目の記事です。 最近 JavaScript 系の技術に興味を持って、Angular を中心に調べています。 やっぱり MS クラスターとしては、生の JavaScript よりも TypeScript を書きたいじゃないですか。 今回は JavaScript（Node.js）と TypeScript のモジュール機構についてまとめてみました。 というわけでこれを読め Node.js のモジュール機構（JavaScript の場合） ディレクトリ構造 モジュールのインポート モジュールからのエクスポート TypeScript の場合 ディレクトリ構造 モジュールのインポート 拡張子を付けないこと 型定義ファイル 型定義ファイルを書く モジュールからのエクスポート 型定義ファイルの配布 いいわけ というわけでこれ

こんにちは、freeeでエンジニアをやってます @yo_waka です。 これは、freee Engineers Advent Calendar 2015の11日目の記事です。 これまでの弊社のAdvent Calendarでは、社内で革命と呼ばれるフロントエンドの改善ネタが多いと思いますが、その流れとして、RailsアプリケーションにおけるフロントエンドのビルドツールであるところのSprocketsをどのようにしたら外せるかという話を書きます。 Sprocketsがやってくれること まずはSprocketsが裏側でどういうことをやっているのか知る必要があります。 Advent Calendar4日目の記事で既に概要が書かれていますが、もう少し細かく内部動作に踏み込んで書いてみます。 尚、Sprocketsのコードは現状のRailsの最新版である4.2.5で利用されている、Sprocket

HTML5で作られた表計算ウィジェット。ソート、フィルタリング、条件付き書式、セル結合、罫線、タッチ対応などExcelライクな「SpreadJS 9J」発表。グレープシティ 多くの業務アプリケーションがWebブラウザから利用可能になりつつある現在、開発者はこれまでアプリケーションで実現されてきたさまざまな機能をHTML、CSS、JavaScriptなどのWebテクノロジーで再構築する必要に迫られています。 データを表形式で分かりやすく見せる表計算機能もその1つです。グレープシティは、Webブラウザ上でExcelライクなユーザーインターフェイスを実現するHTML5スプレッドシートウィジェット「SPreadJS 9J」を発表しました。 Webブラウザ上で、まるでExcelのように表計算、数式や関数による計算、ソート、特定のデータだけに絞り込むフィルタリング、条件付き書式などが利用できるだけでな

ブログなどで画像を一覧で表示したり、記事中に写真を埋め込んでいるのはよく見る光景です。そんな時、画像をクリックするとフローティングで拡大表示されます。また、次の写真に移動することもできるでしょう。 そんな見せ方はCSSとJavaScriptを使ってこそできるものだと思っていましたが、CSS Galleryは違います。スタイルシートだけで実現してしまうのです。 CSS Galleryの使い方 CSS Galleryのデモです。写真の並び方も格好良いです。 クリックでモーダル表示。これもスタイルシートのみです。 次の写真に切り替えもできます。 写真のリスト表示もサポートされています。 リスト表示でもモーダル表示できます。 実際に操作しているところです。 CSS Galleryが良いのはJavaScriptがオフになっていても使えるということです。JavaScriptを使えば力技で解決できますが

Go言語にはいろいろなWebフレームワークが存在して、はっきりとしたデファクトスタンダードが決まっていません。 しいて言えば標準パッケージの net/http がデファクトですが、世の中ではそこに機能不足を感じた人たちが多くのフレームワークを開発しています。 そこで、いくつかのフレームワークを取り上げて、簡単なベンチマークと、それぞれのフレームワークでのいわゆるHello Worldの書き方をまとめておきます。 これによって、フレームワーク選びの参考になればと思います。 対象 Bone Echo Gin Gocraft Goji Gorilla Kami Martini Revel、Beego、Kochaなど、見かけたが入れていないものがいくつかあります。コマンドでスケルトンを作るもの、net/http の Handler interface を満たさないものは除外しました。 追加してくれ

CakePHPのSQL負荷が気になったので、開発サーバにスロークエリ入れてみました。 私が個人でしょぼしょぼ動かしてるだけのサーバ設定しても検出できるのか？という疑問が今まであったのですが、 MySQL5.1にすると、マイクロ秒単位、0秒単位にすれば全クエリのスロークエリを検出できると聞いて、MySQLのバージョンアップ決意しました。 漢(オトコ)のコンピュータ道: MySQL 5.1のスロークエリログ http://ftp.ku.ac.th/pub/mirror/mysql/doc/refman/5.1/ja/log-tables.html http://ftp.ku.ac.th/pub/mirror/mysql/doc/refman/5.1/ja/slow-query-log.html しかも、mysqlを稼動したままスロークエリ設定変更できるので、オンラインで「今のクエリ負荷みたい」

CTOという役割について 〜 IVS CTO Night & Day 2015 Winter powered by AWSに行ってきた。 IVS CTO Night & Day 2015 Winter powered by AWSに行ってきました。 過去３回、全部参加してるんですが、個人的には一番良かった。 イベントクオリティも高かったけど、個人的に壁にぶつかっていたということなのかもしれない。自分の中での疑問や仮説を持った中での他のCTO職、管理職の人たちの意見はビシバシ心に刺さる。そんな３日間でした。 イベントの中でアンカンファレンスというコーナーがあって、そこではいくつかのアジェンダについて数人で議論するのですが、「経営者としてCTOがすべきこと」という議論が非常に面白かった。そもそも「経営チームにおけるCTOの存在意義って何？」という、そもそも論の部分が整理されたのが大きいw 事業

CakePHP3でREST APIをお手軽に作成してみました。 CRUD Pluginを利用して作成する方法になります。 2系とあまり変わらないかもしれませんがCakePHPでREST APIを作る方法として読んでいただけると嬉しいです。 参考記事 How to build a CakePHP 3 REST API in minutes CRUD Pluginの特徴 設置が簡単 設置するだけで、CRUDの処理が使用可能 独自処理を作成する場合はCRUD Plugin の Events機能を使用する。 REST API 作成手順 CRUD Pluginの追加 APIの有効化 CRUD Pluginの追加 まずはcomposerでPlugiinを追加してください。 // CakePHP3 composer require friendsofcake/crud:~4.0 // CakePHP2

コデアル株式会社ではリモートワークを推奨しています。 前提として、弊社ではスクラム開発の手法を採用しています。私の大学での専攻が技術経営（MOT）だったということもあり、トヨタのカンバン方式の手法などを学び、ソフトウェア開発の領域でも、その手法を多いに取り入れることができるのではないか？と考え、採用しているという背景もあります。 私たちは、週10時間。リモート。時給2500円以上の、自社サービス開発副業ができるコデアルというサービスを開発・運営しています。 www.codeal.work サービスの開発にあたって、私はプロダクトオーナーとして、開発に関わっています。コデアルの開発チームのスクラムマスターが書いてくれている開発の流れに関しても以下の記事にまとめています。開発チームにおけるスクラムマスターの役割を果たされている方は、こちらも合わせてぜひご覧下さい。 qiita.com 完全リモ

Ralph Jocham氏がInfoQとのインタビューで，スイス郵政公社の実施したスクラムのスケールアップ作業が，Nexusフレームワークを使用することにより，計画を３ヶ月前倒しで実現できた理由について説明した。インタビューの中で氏は，アジャイルチームが価値を提供する方法，スクラムマスタとプロダクトオーナにとって最も重要なスキル，提供するソフトウェアの品質を把握することの重要性，より多くの価値を提供するためにチームにできること，などについて語ってくれた。 InfoQ: アジャイルチームによる価値の提供について，ご意見を聞かせてください。価値(value)とは何なのでしょう？ Jocham: 価値というのは重要ですが，あいまいな言葉でもあります。最終的には，価値とはお金，つまり製品ないしサービスを販売することで得られる利益です。スクラムでは，価値の最大化はプロダクトオーナの役割です。管理者と

大石制作ブログblog.s004.com デザイナー大石真也が 知りたかったこと、見たかったことのメモと、仕事紹介。 自己紹介・サイト説明依頼・価格・お問合せタスク管理パートナーtwitterfacebookatom feed Atomエディタ、すっかり使いやすくなりましたね。 出始めのころは動作が重く、使い物にならないと感じてたけど、しばらく経って入れなおしてみると、凄まじい進化をして、当時Sublime Textを使っていた僕も乗り換え不可避でした(笑) そのAtomエディタのならではの標準プラグイン、Markdown Previewの表示のスタイルは、元々GitHub的スタイルなだけあって、そのままでも本当に美しいです。 だけど、これは完全にパソコンスクリーン表示向け、そして半角文字向けの見た目なので、それを印刷やPDF化したり、プロジェクタで映す場合、ちょっと見辛い上、日本語が主体

25歳以下の若手デザイナーのためのコミュニティ「UI Crunch Under25」がイベントを開催。DeNA会長・南場智子氏が「なぜ今デザインなのか？」と題して、基調講演を行いました。本パートでは、DeNAで取り入れられているPermissionlessの考え方とユーザー第一で考える、サービス設計のプロセスについて話しました。 サービスの作り方が変わってきた さて、これから本題の「なぜデザインか」「なぜクリエイティブなのか」という話に入っていこうと思います。 大きなトレンドとして、これから南場智子さんがとてもありがたい話をします。新しい事業やサービスの作り方が大きく変わってきたと思うことが3つあるんです。この3つを今日みんなと共有したいと思います。 1つ目。新しいサービスのつくり方って普通はこうです。 企画をして、その企画が良くできていたら経営会議に持ってきて、経営会議で吟味するんだな。

管理画面を作るのは大変なので、なるべく手間を省きたい。Bootstrapでもいいが、意外としょぼくなるのと、何よりメニュ周りの制御が今ひとつな感じがする。そこで、管理画面作成に特化したCSSフレームワークを使ってみる。 いくつか選択肢はあるが、ここではAdminLTEを利用してみる。 bootstrapベースとはなっているが、いろいろと独自の癖があり、「bootstrapだと動くのに・・・」みたいなことがままある。 最初に注意 まじめに、TOPメニューから作って見たが、Dropdown等、基本的な機能がうまく動作しないことがあった。どうやら、他の要素に依存しているので、header(class="main-header")だけでなく、サイドバー(class="main-sidebar")や、コンテンツ(class="content-wrapper")、フッター(class="main-fo

English

TL; DR ElectronのautoUpdaterモジュールを使うとMac/Windowsでアプリを自動アップデートさせられる Mac/Windowsそれぞれ違うアップデートのリリース方法が必要 Mac: アップデート情報を返すWeb APIを用意する Windows: grunt-electron-installer で作ったファイルをS3とかにアップロードする あとはautoUpdaterのAPIを呼び出すだけ はじめに Electronには autoUpdaterという、アプリの自動アップデート用モジュールが入っている。これを使うとMac/Windowsでアプリを自動アップデートさせることができる。 Wantedlyが開発しているメッセージングアプリのSyncデスクトップ版では、実際にautoUpdaterを使っているが、Mac/Windowsそれぞれで違うセットアップが必要であ

はじめに フロントエンドなエコシステムだと、AngularJS 使った開発だとテストランナーにKarmaとかを選択するかと思います。 （フロントエンドに詳しい人が他にいないという事情があって）Ruby/Railsなエコシステムの中でどうにかして、Rails＋AngularJSな構成下で、JavaScriptのテスト実行環境をうまいこと構築出来ないと模索する中で最近教えてもらったteaspoonを活用することで自分がイメージしたことが出来たのでその流れをまとめておこうと思います。 teaspoonとは？ Javascript test runner for Rails. Run tests in the browser or headless with PhantomJS, Selenium WebDriver or Capybara Webkit. teaspoon ということでRails

ApigeeやHerokuのドキュメントに従うのでもよかったんだけど、読んでいく中でやっぱり考えることは出てきたので、あくまで自分のための指針をまとめてます。 包括的なWeb API作成についての知見 HerokuのAPIデザイン | SOTA interagent/http-api-design · GitHub Web API 設計のベストプラクティス集 "Web API Design - Crafting Interfaces that Developers Love" - フリーフォーム フリークアウト Web API Design | Apigee NetFlixもWeb APIの設計についての知見をよく放出してくれてる印象。 設計の基本 基本は /コレクション/名詞 リソースの関係を表したい時に階層化する members/1234/friends 階層は浅く保つ できるだけ/c

少しずつ市民権を得てきた感のある interactive git rebase 時の autosquash オプションですが、いくら git commit で --fixup や --squash で自動生成できると言っても、そもそも対象となるコミットを選択するのがめんどくさいという問題があると思います。 参考: git rebase -i のための rebase.autosquash オプション 最近だと peco を使ってコミットを絞り込むなどの方法があるかも知れませんが、すでに tig を使っているならtigを使うのが楽です。 [tig "bind"] diff = F ?!git commit --fixup %(commit) diff = S ?!git commit --squash %(commit) main = F ?!git commit --fixup %(comm

はじめに ESLint の魅力の1つに、自分のプロダクトに合わせた独自ルールを作成することができるという点があります。 これから数回に分けて独自ルールの作り方・使い方を解析していきます。 この記事では、簡単なルールを作りながら、ESLint のルールの基本的な仕組みを解説します。 ここでは ESLint の基本的な使い方は扱いません。 ESLint の基本についてはESLint 最初の一歩等を御覧ください。 no-literal-call この記事では、最初の目標としてリテラルを関数呼び出ししている場合に警告するルールを作っていきます。 その過程で必要な知識を解説していくつもりです。 今回題材にするソースコードはこちら。 これは有効な JavaScript コードですが、実行すると必ず TypeError になります。 文字列を関数呼び出ししているので、当然ですね。 しかし ESLint

去年のアドベントカレンダーではMongoDBの話をしましたが、今年はPHPの話。 PHPの「現在位置」 PHPが5から7へのメジャーバージョンアップをついに果たしました。(6が欠番になった経緯などは割愛) そこで、いまだに5.2とか5.3あたり、またはそれ以前の印象で語ってる人も居そうなので、改めて「PHPの普通」を確認していきましょう。 そもそもあなたPHPの何を知っていると言うんですか 今年はPHP5.6でフルスクラッチの小物サービスをリリースしましたし、古いバージョン(具体的には言えない)のサービスの保守を今も慎ましやかに続けていたりしています。 それはさておき。 いつ PHP を書きましたか？バージョンは？ 各バージョンのリリース日は以下のとおり。 - 2012/03/01 Version 5.4.0 - 2013/06/20 Version 5.5.0 - 2014/08/28

＜この記事は「Money Forward Advent Calendar 2015」の10日目の記事です＞ エンジニアとして成長するために日々、新しいことや興味のあることを勉強している方が多いと思います。 今回は私が実践していてオススメだと思う学習方法を紹介させていただきます。 その1 Twitter ある言語や分野について学んでいくうちに自ずと、その界隈で有名な人を知るようになると思います。 それは、困った時にググると毎回出てくるブログの著者の方だったり、勉強会に参加した時に発表していた登壇者の方だったり。 そうやって知った方々を私はTwitterでフォローするようにしています。 理由として、そういった方々はアウトプットが素晴らしいため、Twitterでのツイートも有益な情報をつぶやかれていることが多いと感じているからです。 また、その方がフォローしている方やBotもとても有益な情報をも

IT業界就職ラボ「就ラボ」 IT業界就職ラボ「就ラボ」は、IT業界への就職を希望する学生の就職活動を支援するサイトです。IT業界や職種の正しい知識を得てより良い選択をするためにお役立てください。 本連載「まだ君は間に合う！ 現役エンジニアに聞く、学生のときにやっておくべきこと」では、IT企業の最前線で活躍するトップエンジニアに、学生時代に行った就職活動の内容や、これから就職活動を行う学生へのアドバイスを聞いていきます。 IT企業の最前線で活躍するトップエンジニアは学生時代にどのような就職活動を行っていたのだろうか。今回は、ミクシィ主催で11月15日に開催された学生向けイベント「git challenge」の会場にお邪魔し、同イベントの開催に向け中心的な役割を担った国分佑樹氏に、就活生に向けたメッセージを伺った。 チャレンジイベントへの参加が入社のきっかけに 編集部　本日のgit chall

注意 HTML5 からは 見た目は CSS に任せ、HTML は文書の構造（セマンティック）を表すことのみに重点を置かれるようになりました。例えば箇条書きリストを作るのに div と display: list-item; を使って構築するより、箇条書きリストを表す ul li を使ったほうがよりセマンティックです。このように目的にあった HTML 要素を使うようにしてください。 ボックスモデルとは CSS でレイアウトをする際には、 ボックスモデル を理解する必要があります。 CSS の定義するボックスモデルは以下の図のように 4つの領域で構成されています。 ボックスモデル解説図 content（コンテンツ） テキストや画像など、要素そのものの内容が表示される領域です。この領域のサイズは width（幅） と height（高さ）プロパティで指定することができます。 padding（パデ

今回のソリューション：【Scrutinizer/スクリューティナイザー】 〜コードの静的解析、スコアリング、そしてCI機能を併せ持つScrutinizerの導入で、プロダクト全体のコード品質の向上に成功した事例〜 特に少人数でスピーディーに開発を進めているチームほど、「コード品質の担保」に関しては後手に回ってしまうことも多い。とは言え、綺麗なコードを書きたくないエンジニアはいない。 効率的にコード品質が可視化され、結果としてプロダクト全体の品質を高めることができる仕組みを導入できれば、様々な課題を解決することができるだろう。 教育と異文化領域に特化したインキュベーション事業を展開する株式会社ヒトメディア。同社では、業務委託やオフショアを含め約40名のエンジニアが、それぞれ少人数のチームを組んでプロダクト開発に励んでいる。 その中で課題だったのは、各チームごとに使っているコードの世代も異なる

Photo by Tim Menzies こんにちは。テクニカル・ライターの可知(@y_catch)です。 IT業界には多重下請けが蔓延しています。私の身近なところでも多重下請け構造の中で働いている人も居ますが、実際に体験した人や聞いたことがある人も多いと思います。たしかに多重下請け構造は、企業側にとって不可欠な仕組みとなっていますが、階層の下のほうで悪戦苦闘しているITエンジニアや、これからIT業界に参加しようとしている人たちにとっては、切実な課題だと思います。 そこで今回は、IT業界の多重下請け構造について解説しながら、ITエンジニアのキャリアプランについて、どのような方向性があるか整理してみたいと思います。 [目次] IT業界の給与格差 給与格差の元になる、IT業界の多重下請け構造 IT業界は、どう人材を育成しているのか ITエンジニアにとってのメリットとデメリット ITエンジニアと

× You’ve unlocked unlimited downloads on SlideShare! Your download should start automatically, if not click here to download You also get free access to Scribd! Instant access to millions of ebooks, audiobooks, magazines, podcasts, and more. Read and listen offline with any device. Free access to premium services like TuneIn, Mubi, and more.

2015/12/4に開催された kintone devCamp 2015 で担当したkintoneとTwilioの連携ハンズオンの資料です。Read less

2015年12月11日に行われた「UXまとめ2015」における上野学のプレゼンテーションです。 A presentation given by Manabu Ueno in UX matome 2015, Dec 11th 2015. イベントの様子はこちらのイベントレポートから https://www.sociomedia.co.jp/6819Read less

シリコンバレーの有名大学であるスタンフォード大学にて、Andrew Ngの教える機械学習の講義が人気を集めているそうです。 Andrew Ngは相当な有名人で、よくニュースで名前が出てきます。有名な例では、グーグルが「Google Brain」という名のニューラルネットワークを構築し、YouTubeの動画から「猫」を教師なし学習で認識したといったニュースが流れましたが、このプロジェクトはAndrew Ngが主導したものです。 このAndrew NgがCourseraというオンラインコースで機械学習の授業を公開しています。このたび私も受講しまして、ようやく修了しました。 [Machine Learning by Stanford University] https://www.coursera.org/learn/machine-learning/ 内容的には、Deep Learning登場

【中級編】Riot.js + Typescript + karmaで今日から始めるElixir on Phoenixフロント開発入門 その１TypeScriptElixirkarmaPhoenixriot はじめに 皆さん、おはこんばんちは。 年の瀬です。 コミケの入稿割引が減っていきます。 第２回 企業対抗トーナメントも大晦日に、あります。ギルティです。 正直色々忙しいですね。分かります。だって師走だもの。 そんな時は肩の力をいったん抜いて、Elixir on Phoenix、入門していきましょう。 CentOS + Erlang + Elixir + PhoenixのDockerイメージで今日から始めるElixir on Phoenix入門 【中級編】drone.io + exrmで今日から始めるElixir on Phoenixホットデプロイ入門 前回、前々回に引き続き、Elixir

名前はダークソウルのフラムト(frampt)から。FLux Minimum なんたらかんたら。 なんかTwitterで色々言ってたら naoyaさんにまとめられたので、ここに僕の考えを詳しく書いておく。 mizchi の Redux 考 - Togetterまとめ やりたかったこと 基本的なアイデアは、stateをpushする方式(setStateみたいな)だと非同期間で参照したときの値がズレて非同期の終わる順番次第では状態の遷移ステップが壊れてしまう可能性があるんだけど、前のstateをとって次のstateを返す非同期をキューに並べて順に実行することで、トランザクションみたいなものを保証することができるだろう、というもの。 軽量(pubsubインターフェースはEventEmitterそのまま) 複数の状態更新関数の待ち合わせ reduxで感じた不満の解消 TypeScriptフレンドリー

会員事業部の有賀(id:chezou)です。 今年一年、社内では勝手に"Jupyterの伝道師"を標榜してJupyter notebookの普及活動を展開してきました。 先日、社内でハンズオンも行ったおかげもあり、かなり社内のマシンにPython環境が構築されてきました :) Jupyter notebookとは？ ひとことで言うとブラウザで動くすごい便利なREPL*1です。 百聞は一見にしかず、見てみましょう。 このように、Rubyの対話環境であるpryを触っているようにインタラクティブにコードを書くことができます。 以降で説明をしますが、Jupyter notebookは記録・共有・再現がとても得意です。特に図表があるときにその効果を発揮します。 Jupyter notebookの良い所 過去のコードを改変、再実行できる セルと呼ばれる入力部分にはMarkdownやコードが記述できます