注意：この記事は古いです。2016年06月06日に書いた記事です。 2017/04/14 追記： Chrome59から正式にヘッドレスモードが搭載されます。 ヘッドレスモードではPhantomJSなどのようにJavaScriptでヘッドレスブラウザを制御することも可能です。 https://chromium.googlesource.com/chromium/src/+/master/headless/ 2017/06/07 追記： NightmareJS風に操作できるライブラリをリリースしています。 ヘッドレスChromeをもっとも簡単に操作できると思われるNightmareJS風ライブラリ http://qiita.com/devneko/items/3689b46fc2bcdb8121a8 先日、Googleの人が「Headless Chrome is coming so soon」

はじめに 電力自由化にともない、スマートメーターの設置が進められています。 電力会社が設置したスマートメーターと、各社から販売されているHEMS見える化端末的なモノを導入すると消費電力などをリアルタイムに見ることができるようになります。 しかし！、HEMS見える化端末的なモノは住宅リフォーム業界的なプライス設定ですんごくお高いんです。 そこで、HEMS見える化端末的なモノを安価に自作しちゃおうというのがこの記事の趣旨です。 おことわり 東京電力供給区域での話を前提としていますが、他社供給区域にお住まいの場合は電力会社名を読み替えてください m(_ _)m なお、通信の物理レイヤは各社で決められるのですが、フタを開けてみたら全国Wi-SUN(後述)で統一されてました。購入すべきハードウェアは全国どこでも変わりません。 ハードウェア スマートメーターを設置してもらう 今となっては特別な事情が無

概要 社内の備品（主にスマホやパソコンなどの端末）をアプリで「ピッ」とスキャンするだけで、簡単に貸出/返却処理ができるTSUTAYAのレジ風システムを作りました。 その名も「ネコレジ」 OSSなテスト支援ツール「Chibineko」に続く、ねこシリーズ第2弾です。 ネコレジのシステム構成 備品を識別する仕組み 備品の識別にはQRコードを使用します。 各備品にはそれぞれ一意のIDを埋め込んだQRコードを貼り、リーダー側（クライアントアプリ）で識別できるようにします。 QRコードの印刷にはテプラPRO SR5900Pを使用。 このテプラはLAN接続対応なので、iPhoneからも直接印刷ができるスグレモノです。 ちなみにうちの部署にはスマホやガラケーなどが1,000台以上ありますが、気合いですべてに貼りました。 会員カード（通称ネコカ） ユーザーの識別も同様にQRコードで行います。 できるだけお

Help us understand the problem. What is going on with this article? 18日午前（日本時間で19日深夜）に行われたGoogle I/O 2016のKeynoteでは、Google社から新しいメッセージングアプリ「Allo」が夏にリリース予定であることが発表されました。実際にAlloが動作しているデモがKeynote内で行われていましたので、どんなアプリになっているのか、そのデモを見ることで理解することができるでしょう。 AlloのAndroidアプリは、すでに事前登録を開始しています。 このデモを見たときに、他社と比べてアプローチの仕方が大きく違うことに気がつきました。Alloの登場によって役者が出そろった感があるので、僕の知っている範囲で少し整理をしてみたいと思います。 主力メッセージングアプリ 基本的に、メッセージングア

経緯 casyというインターネットを使って手軽に家事代行を頼むことができるサービスのプログラマをしています。 Webだけでなく、スマホアプリも出すことにあたり、Webアプリサーバ(Rails)から機能を切り出し、APIサーバ(Rails)を別途作成し、Webアプリの場合はWebアプリサーバからAPIサーバを呼び出し、アプリからは直接APIサーバを呼び出すような仕組みにしました。 ただ、全部の機能をAPIサーバに移すのは容易なことではなかったため、いくつかの機能はまだWebアプリサーバに残っていて、アプリよりもWebのほうが機能が多い状態となっています。 今回残りの機能をAPIサーバに持ってくるにあたり、下記２つのアプローチがありました。 1. 既存のソースコードからViewを切り離してほぼそのまま持ってくる 2. 設計を見直し、大幅にリファクタする チーム内で議論した結果、スタートアップと

Rのフロントエンドということで話題になっている、Exploratoryの対話的なデータ分析環境で「ヨーロッパはほんとに女性が活躍しやすい社会か」どうか分析してみたRデータ分析DataVisualizationデータ可視化Exploratory ぱっと見て、このデータがなんのデータかとかってわかりますか？　これだけ見ただけだとなんのデータかわからないですよね〜。 これは実は、フォーブズ誌からダウンロードしてきた世界の億万長者についてのデータなんですね。 そもそも億万長者ってどの国に多いんですかね。また、億万長者ってどうやってなってるんですかね。はたまた、億万長者って男性と女性どちらのほうが多いのでしょうか？ また、最近読んだ記事↓によると、ヨーロッパは女性が活躍しやすい社会だったりするそうです。だとすると、今、ヨーロッパには、女性の億万長者も多かったりするのでしょうか？ こんな疑問を、データ

※このお話はたぶんフィクションです。実在の人物や団体とはあんまり関係ありません。 序 planetter.comをバージョンアップすることにした。数年前にリリースしてからずっと放置していたけど、そろそろ手を付けないとやばいと思った。 しかしウェブの世界はドッグイヤーだ。3年も経てば何もかもが変わっている。しばらく開発から遠ざかっていた僕には、最近の技術トレンドなんてさっぱりわからない。 まずは自分自身をアップデートするところから始めよう。 Atom 最初はIDEだ。以前はEclipseを使っていたけど、いまはもうウェブ系言語の進化速度に追いつけていないようだった。ウェブ開発用のIDEならいまはWebStormが人気のようだ。有料だけど、最新の技術に対応しているし、使い勝手もいい。 でも最終的にはAtomを選んだ。IDE(統合開発環境)ではなくエディタなので、これ自体は単機能だけど、不足分は

県や市の公式ホームページ制作の経験から、気をつけておきたい点をメモに残しておきたいと思います。 納品前 納期が３月に集中する 行政サイトの場合、お金は年間予算や国からの特別補助金などから支払われます。つまり基本的に年度を跨ぐことが出来ません。（保守にかかる費用は別です）その為、行政の案件に頼っている制作会社は納期が重なり３月が滅茶苦茶忙しくなります。 年度末は余裕を持ったスケジュールを組んでおきましょう。 見積もりは２割増しで ここで言う見積とは入札時の見積もりではありません。行政の案件をいくつかこなして担当者と仲良くなってくると、コンペの上限金額を決めるために事前に見積を頼まれる事があります。「もし○○みたいな案件だったらいくら位でできそう？期間と見積もり貰えると助かるんだけど。」みたいな感じです。サラリーマン金太郎の東北編で出てきたアレです。大事なのはここで割引など一切考えずに、むしろ

古典的な構成のサービスを AWS Lambda + S3 で動作するサーバーレスアーキテクチャで再構築し、そのフロントエンドに Riot を採用しました。 プロジェクトは WWD JAPAN.com として公開しています。 React や Angular などに代表される JavaScript の UI ライブラリのうち、Riot はミニマルな API と HTML 標準に近い文法を採用しているのが特徴です。 Riot はコンポーネントベースの UI 開発から複雑さを取り除き、楽しさを与えます。 TL;DR Riot はこれまでの UI ライブラリと比べて以下の点で異なります。 必要最小限の API 少ないボイラープレート Web Components ( HTML Template ) に似た文法 React のコードと比較してみます。 ToDo アプリケーションを React で書くと

WEBプログラマがサイトデザインを整えるにとても便利なBootstrap。 しかし、Bootstrapを利用してサイトを作ると、やっぱりBootstrap臭がしてしまう。(私の技術力やデザイン力が低いのが原因かもしれませんが。。。) そこで、Bootstrapを利用してデザインをしているRailsのサイトをデザイナーの人にレビューしてもらい、実践した Bootstrapの依存を減らしていくために工夫したこと & デザインの指摘を受けた部分 について書いていきます。 実装したサイトの説明 まず作っていたサイトについて説明しておきますと、 企業がイベントを開催した際にフィードバックを受けるためのアンケートをWEB上で回答してもらい、その集計結果が見えるというサービス です。機能としては少なく、企業管理側のイベントページの作成と詳細ページを見ることができるだけです。 Before and Aft

はじめに サーバ管理をしている身としては、 セキュリティ は常に付きまとう悪魔みたいなもので、このセキュリティに関しては何をどこまで頑張ればいいのか不透明な部分が多い。 脆弱性に関しては、CVEなど、毎日情報は入ってくるが、それがどのサーバの何に関連したものなのかなんていちいち調べてられないし、どの脆弱性がすぐに対応しなければいけないもので、どの脆弱性があとあと対応すればいいものなのかなんてわからない。 実際のところ、大きな話題になった脆弱性くらいしか緊急で対応してないという人は多いのではないかと思う。 そんな中、満を持して登場したのが vuls !! 各サーバの脆弱性情報を取得して、個々のサーバそれぞれでどんな脆弱性があり、どのくらいやばい脆弱性なのかを検知できるようになった！ 今回はこのvulsを紹介します。 Vulsとは 公式でロゴが発表されたので、差し替えました 公式ドキュメント:

はじめに 去年ぐらいからCookieに関する議論が活発に行なわれているように感じます。そこでCookie関連の最新動向について仕様の観点から幾つか列挙します。 Deprecate modification of 'secure' cookies from non-secure origins Cookie Prefixes Same-site Cookies A Retention Priority Attribute for HTTP Cookies Content Security Policy: Cookie Controls GoogleのMike West氏による提案がほとんどです。議論はIETFのHTTPbis WGやW3Cで行なわれており将来的には正式に標準化されるものもあるでしょう。 また、幾つかはChromeへの実装が進められています。 (間違いなどありましたらご指摘下さ

知らなかったこと驚いたこと面白かったことを太字にしておきます。 流し見するのにはいいかもしれません。 Android N対応の知見が少し貯めることができました。 またAndroid StudioのところではGradleで設定しているバージョンなどに気を使ってみようかなという気になりました。 Googleの目的としてはAndroid Nの情報を出していくことで、フィードバックをもらい、改善につなげていきたいというところのようです。 間違いなどがございましたらコメントでご指摘いただくか、編集リクエストしていただけるとうれしいです。 Android Studio 一番伝えたいこと 複数のAndroidStudioのバージョンを共存できる アプリケーションディレクトリにAndroid Studio.appからAndroid Studio Canary.appなどに変えて、ファイル名を変えて、二つ入

最近めっきり再生工場的な役割を担い始めているjQuery Foundationということで、そこの傘下に入るとなると、なんとなく嫌な予感がしなくもないですが…。 From: http://mae.chab.in/archives/2874#post2874-4 ESLint が jQuery Foundation に参加することについて不安に思っているという意見をいくつか見ましたので、ESLint が jQuery Foundation に参加する理由を記した公式記事を抄訳することにしました。私の英語力はかなり低いので、編集リクエストをお待ちしています (最後のフレーズよくわからなかった...)。 最後のところ @shuhei さんが訳してくれました! ありがとう! 結論だけ言うと、ESLint の存続をより確実にするためということになります。 私たち開発チームは、将来、法的なトラブルがあ

ヴォイニッチ手稿ハッカソンという謎のイベントが開催されるので主催でもなんでもないけど勝手にそれ向けの資料をまとめていく。 計算言語学の論文を書いた時に、ネタでVoynich manuscriptとRongorongoも一緒に計算対象にしたりして、サーベイをしたのでその時の知見をまとめて行く。書いた論文は別に未解決文字にフォーカスした論文ではなく面白いかどうかはわからないけどかなり真面目な内容の奴なのであしからず。 voynich maniscriptとは 謎の文字と気持ち悪い絵がいっぱい書かれた変な本。何らかの未知言語で書かれているかもしれないし、適当にそれっぽく作って詐欺に使われた道具かもしれない。個人的には、アラビア語系の言語で書かれたなんらかの文書をもとに適当に作ってそれっぽい絵を付けた美術品だと思ってる。 以下のページが、これまでの歴史的経緯について詳しい http://www.v

英語を使って海外のエンジニア職に転職しようとする際に避けては通れないのが技術面談。もし海外のエンジニア職への挑戦をお考えの方でそれが初めての場合、この技術面談の対策は十分にとっておいた方がいい。 きっと思っているよりも実際にやるとその難しさを実感するパターンがこの技術面談。たまにYouTubeに技術面談をシミュレーションしている様子のビデオが上がっているが、なんか嘘くさいし、そんなビデオを横から見ても一体ナニをどうすればいいのか対策の立てようがない。 だいたいこの技術面談でその応募者の相手をするのは現役バリバリのエンジニアだ。日本のように転職面接に人事の人が出てくることはまずない。エンジニアの技術レベルを測れるのはエンジニアだけ、という当たり前な理由なんだけど。とにかく現役のエンジニアがこれでもか、というぐらいにあなたの真の実力を読み取ろうとしてくる。 技術面談で出される問題は大きく分けて

この記事はGoCon 2016 springで話す内容を圧縮するためのものです。 WebサービスのAPI仕様を記述したりするためのそれなりに有名な仕様について、筆者(@vvakame)の私見を述べていく。 なお、Google Trendの結果を見ると…。 仕様を調べてSwaggerを選択する事にしたのは1年弱程度前のはずなので、もし "今はそれもうできるよ！" とかあったらコメントなどで教えてください。 RAML RESTful API Modeling Language なので、手書きを前提にしている。 YAMLで頑張って仕様を書く。 Spec APIs Explorerっぽいものもあるっぽい。 総評 比較的広く使われているようでパワを感じる。 まず仕様が先というスタイルなのがめんどくさそう。 YAMLなのがちょっとイヤ。 RAMLからGoとJavaScript(TypeScript)向

俺も昔はお前のような jQueryスパゲッティジェネレーターだったのだが、膝にReactを受けてしまってな… 基本的な方針 とくにライブラリ設計者において、小さなモジュールを単機能で分割する以上、ライブラリ設計者は可能な限り依存を減らすことを求められます。node環境ならdependency hellの回避のため、フロントエンド環境ならファイルサイズを減らすためです。 ライブラリ設計者ならずともコードのポータビリティを維持するため、できるだけライブラリに依存しないコードを書くのが望ましいです。 Githubみてる限り、最近書かれるJSのライブラリの多くはjQuery非依存です。ユーザーから見る限りは、jQueryElement渡すかHTMLElement使うかぐらいの違いですけどね。 また、Angular, React等のSPAをスクラッチで設計する場合、気づいたらjQueryを使っていな

MarkDownDiagram Markdown風のテキストで、ER図やブロックダイアグラムのようなチャートを描けるツールです。 こちらにインスパイアされて、もうちょっと汎用的にダイアグラムを描けるツールを作りました。 もう保守されない画面遷移図は嫌なので、UI Flow図を簡単にマークダウンぽく書くエディタ作った 特徴としては Webブラウザのみでローカルで動作 配置はマウスでドラッグして編集できる CSSで色や装飾を制御可能 といったあたりです。 githubからclone/ダウンロードして使えます。 オンラインで試すのはこちらでどうぞ。 ローカルでブラウザのみで動作します。index.htmlをブラウザで開いてください。 Chrome推奨ですが、Safari,Firefoxでも動作します。タッチIFは未対応。 機能 テキストでブロックを記述し、ブロック間を線で繋ぐ描画 ブロックをマウ

あいさつ 流行りにはしっかり乗らさせて頂きたい！ line botちょこちょこ遊んでいた中で出来た成果物をAPIのruby言語ラッパーとしてgem化しときました^^ Github Rubygems 即時性や並列性を考えるとガチBotには向いてないかもですがまあサクッと遊ぶときに使ってくださいな^^ ちなみにこのライブラリとheroku+Fixieで作ったbotをひけらかすとこんな感じ 参考: LINE BOT をとりあえずタダで Heroku で動かす 情報のフェッチだけじゃなくて予約とか何か副作用の持つアクションと絡めたり、グループチャットにbot入れてスケージュリングとかは夢が広がる〜！ 使い方 Installation require 'line/bot/client' client = Line::Bot::Client.new do |config| config.channel