タグ

ブックマーク / medium.com (175)

  • Anatomy of a large Angular application

    How to design the architecture of an Angular application and not go insane in the process Do I really need a strategy?Yes. A fresh application always starts out as that one application that’s going to be designed for easy maintenance and development. Unfortunately, it’s just a matter of time until that application becomes non-trivial and needs reorganisation and/or a rewrite. In those moments, it

    Anatomy of a large Angular application
  • Apple の新フォント San Francisco の秘密

    iOS 9 が一般公開されました。気づきにくいところですが、実はこの iOS 9 から、システムフォントが Helvetica Neue から、Apple が新たに開発した San Francisco フォントに変更されています。 San Francisco は Apple Watch のシステムフォントとして既に採用されていましたが、Apple Watch にとどまらず、iOS 9 や次期 Mac OS X “El Capitan” のシステムフォントとしても使われるようになります。 Apple WatchApple は、初代 iPhone からずっと、iOS のシステムフォントとしては Helvetica を採用してきました。また、Mac OS X でも 10.10 Yosemite からは、それまで使用していた Lucida Grande から Helvetica へと変更しています

    Apple の新フォント San Francisco の秘密
  • Hello! Amazon Elasticsearch Service

    自前で構築してきたElasticsearchをAmazon ESに移行できるかという視点で、その特徴や機能的な制限などまとめてみました。 2015年10月1日にAmazon Elasticsearch Service(略称:Amazon ES)がリリースされました。AWSの全文検索サービスにはすでに、CloudSearchがありますが、Elasticsearchはそのリアルタイム性や柔軟性、強力な集計機能(Aggregations)、データの視覚化(Kibana)などCloudSearchにない様々な特徴があります。そのため、一般的な検索エンジンよりもその利用範囲は広く、サイト内検索、ログ分析、状態検知など検索エンジンの利用範囲を広げてきました。 Amazon ESの使い方は、他のブログですでにいろいろ公開されいますので、ここでは、EC2などで、自前で構築してきたElasticsearch

    Hello! Amazon Elasticsearch Service
  • Elasticsearch 分類予測 More Like This編

    これまで、機械学習を使った分類予測とPercolatorを使った分類予測を紹介してきました。今回は Elasticsearch の More Like This Query を使ってもっと簡単に分類予測する方法について紹介したいと思います。 More Like This Queryとは?More Like This Query とは、Elasticsearchが提供するいわゆる類似文書検索です。基的な考え方は、単語の順序は気にせず、同じ語を多く含む文書は類似文書であるというものです。Bag of words によるベクトル空間モデルを基的な考え方としているそうです。 ElasticsearchのMore Like This Queryは以下の3つの方法で類似する文書を検索することができます。 任意のテキストに対する類似文書検索任意のドキュメントに対する類似文書検索インデックス済みの任意

    Elasticsearch 分類予測 More Like This編
  • その目標、チームでやる意味ありますか

    まだ無意味なチームで消耗してるの? チームで足を引っ張るタイプの人っていますよね。 一匹狼タイプはいいんですよ。個人で仕事が完成されているならば。悪いのは「チームで取り組むほうが無条件でいいと思っていて、でもチームのメリットを活かせない人」ですね。 チームだからベテラン新人が混成のこともありますけど、仕事を覚えていない若手が悪いって話しでもないんですよ。始末が悪いのは、間違った努力・考えで足を引っ張る人です。ベテランでも「チーム」に対する考察が甘ければあっという間に地雷を踏むでしょうね。自戒を込めて。 チーム活動に投下しているリソースチームをつくる、動かすには結構なリソース投下が必要です。まずはリソースに思いを馳せてほしいですね。 ではチームを動かすために投下するリソースとはなんでしょうか。調達と製造の人の思惑がぶつかることがあったりしますので、それを調整するためのコミュニケーションコスト

    その目標、チームでやる意味ありますか
  • 本当は教えたくないイケてるアイコン素材集サイト「FLAT ICON DESIGN」がすごい

    パワーポイント等で資料を作ることがあるのですが、自分でも「もうちょっといけてる感じにならないかな」と思うことがあります。 そんなときに頼りになるのがアイコン素材集サイト。今回はその中でも、当は誰にも教えたくないイケてるサイトをご紹介します。 FLAT ICON DESIGN FLAT ICON DESIGNのなにがイケてるかって、 アイコンのデザインの質が高いアイコンの数・種類が多いタグで探せるサイズや拡張子を選択できる背景有無など1つのアイコンに複数のバリエーションがあるアイコンにしっかりした説明文が書いてある商用利用無料という感じ。すごいです。 ここのアイコンを資料に少し入れるだけで、それっぽくすることができます。 最近ちょこちょこ使うアイコンをご紹介します。 imac風のデスクトップPCimac風のデスクトップPCイラストアイコン素材です。最近ではWEBページはレスポンシブルデザ

    本当は教えたくないイケてるアイコン素材集サイト「FLAT ICON DESIGN」がすごい
  • TEDxKyotoのデザイナーが伝える スライドデザインの方法

    スライドをデザインする時、デザイナーは何をしているのか? デザインと聞くと、体裁を整えたり見映えを良くするといった事をイメージするかもしれない。 しかしプレゼンテーションのスライドをデザインするにあたっては、見た目を整えるプロセスは最後の一部分だけだ。 今回、米澤由香理さんの素晴らしいコーチングのレシピを伝えるための、スライドデザインを担当した。 この、『「印象的なストーリをつくるには?」TEDxKyotoのコーチが伝える、スピーカーの魅力の引き出し方』スライド制作の過程を公開し、スライド制作におけるデザイナーの役割についてお話したい。 ・1・ 構造を見つけるデザインに携わる人にとっては自然に行う事だと思うが、論理的な思考による情報の整理は、スライドをまとめる時にも強い味方となる。 与えられた目次や内容を吟味し、情報を整理しながら論理的な破綻が無いか、また分類や階層が一貫しているかを見て行

    TEDxKyotoのデザイナーが伝える スライドデザインの方法
  • WebRTC サーバが動いた日

    クライアント側を社員に作って貰って、動作確認していて、あと少しで動く … というのがわかってドキドキしながら確認してたら、あれ、動いてる。みたいな感じで動いた。 時雨堂の WebRTC サーバは配信と閲覧に分かれるカンファレンスタイプがメインになる。簡単に言うとニコニコ生放送みたいなものだ。リアルタイムな動画をサーバ経由で配信する仕組み。 WebRTC 対応のブラウザとネット回線さえあれば気軽に動画を配信できるようになる。 まず手元にはとりあえず動いた WebRTC サーバがある。これは大きい。今後は安定した動作を目指す。 丁度 7 ヶ月、結構時間はかかった。市場も動き始めている。safari や Edge が WebRTC(ORTC) に対応を始めた。年内にも動くモノは出てくるかも知れない。 WebRTC はブラウザで閉じる規格ではなく「ブラウザで拡張なしで動画音声を扱える規格」という認

  • プログラマだからこそプログラマであることを辞めた話

    好きなプログラミングを辞めて経営をするのって大きな決断でしたね?と言われるし、なぜプログラミングを辞められたんですか?と言われることもある。 それは、そんなに難しいことではなくて、論理的に考えると、それがベストな選択だと思ったからでしかない。 社内ベンチャーを始めたときも、MBOして独立したときも、その時々の選択をしてきたが、あまり感傷的でも感情的でも、まして運命的でもなく、その時点での最も筋が通って、合理的な選択をしたまでだ。 私が経営者をしているのも、それが今、最も合理的だからだ。 プログラマの良いところは、自分の気持ちはさておき、ロジカルに判断することができるところだと思う。私も、そういう気質がある。 経営をする上でも、論理的であることを大事にしている。社長が言い出したことも、筋が通らないことは会社で実行されることはない。 フラットな組織でいられるのは、そういうところもあるだろう。思

  • Elasticsearch Top Hits Aggregationの活用とデモ

    脱単なる一覧表示!俯瞰できる検索結果を利用者へ提供することで、効率のよい情報収集と今まで知らなかった情報を気づかせる。 もしかしたら、クエリー関連の記事を書くのははじめてかも。基は飛ばして、いきなりAggregationです。そのうち基も書きます。 Aggregationと言うとファセット検索で使用したり、集計したりどちらかと言うと分析関連で使われることが多そうな気がしますが、今回はいわゆるブログや企業サイト等で利用されているサイト内検索をAggregationを使ってもっと便利にしたいと思います。それと query DSLの説明も。 と言うわけでいきなりデモです。 Demo Top hits aggregation . デモアプリのあまりの殺風景さに戸惑わないでください。。例えば「日語で全文検索」などElasticsearchに関連する質問を入力すると検索結果が表示されます。このデ

    Elasticsearch Top Hits Aggregationの活用とデモ
  • Elasticsearch パーコレータ

    Percolator とは?ろ過器。 その名の通り、雑多な情報の中から欲しい情報だけを拾い(あれば)通知する、といったことができるElasticsearchの機能です。ちょっと変わっているのが、「ドキュメントをさがす」のではなく、「条件(クエリ)をさがす」ところです。 このElasticsearchのPercolatorに関する公式ガイドは何度読んでもなかなか理解できなかったので(私だけかもしれませんが)、概要をまとめてみたいと思います。 〜 MEMO 〜 Elasticsearch 0.9 と1.0以降とでPercolatorの設計が変わったようです。 0.9では、”_percolator”という1つのINDEXの位置づけでしたが、1.0以降は、INDEXの中のTYPEの位置づけになりました。 仕組み標準的な検索では、ドキュメントをINDEXし、条件を指定したクエリを発行して検索しますが

    Elasticsearch パーコレータ
  • Elasticsearch Image Plugin — メタデータ

    Elasticsearch Image Plugin — インストールから検索までの手順では、Image Pluginを使いマッピング、インデックス、検索まで一通り行いましたが、検索結果を眺めているとmetadataが返ってきていないことに気付きました。metadataはアプリケーション側で使いたいシーンもあるため、ここではmetadata関連の設定についてメモしておきます。 マッピング定義metadataのマッピング方法はガイドにも記載されている通り、内部ではmetadata-extractorが使われています。出力サンプルを見ると分かりやすいと思いますが、画像の高さ、幅からカメラや写真の詳細情報まで取得できるようです。(元画像にその情報が含まれていればです) Image Pluginを使いElasticsearchにmetadataをインデックスしたい場合は、mapping定義にDir

    Elasticsearch Image Plugin — メタデータ
  • Elasticsearch テンプレートエンジンを使ったQuery DSLプログラミングのすすめ

    ElasticsearchのQuery DSLはJSONフォーマットで、複雑なクエリも書けて便利なのですが、その反面プログラム内に記述してしまうと、全体像が把握しづらく、メンテナンスしづらいことがあります。 ElasticsearchのSearch Templateを使っても良いのですが、使用するにはElasticsearchへの事前の登録が必要だったり、Elasticsearchに関する検索クエリー以外の学習も必要なってきます。 そこでフロントエンド開発者がElasticsearchをバックエンドに検索アプリケーションを開発する際のQuery DSLプログラミング方法についてご紹介します。 その方法はタイトルにもあるようにHTMLやXMLを描画するために使用するテンプレートエンジンを使う方法です。 最近のテンプレートエンジンはHTMLやXML以外のフォーマットも出力できたり、もともとロジ

    Elasticsearch テンプレートエンジンを使ったQuery DSLプログラミングのすすめ
  • ビジネスをデザインする6つの方法

    私はいま、スタンフォード大学「d.school」でビジネスデザインのクラスを教えている。あるとき学生たちに、自分ならIKEAのビジネスをどうイノベーションするか、と質問してみた。 すると教室のエンジニア、科学者たちから、すぐにいくつもの手が挙がった。 「インテリアデザインのサービスを始めます!」 「高級ブランドを立ち上げます!」 「古い家具を下取りして、新しい家具をディスカウントします!」 いいアイデアばかりでよね? そこで、そのアイデアを実現するためにどんなビジネスモデルを組み立てるのかと聞いてみた。すると今度はひとつも手が挙がらない。みんな下を向き、床を見つめるばかり……。 IDEOには、ピクセルやスチールでプロダクトをデザインする人もいれば、私のように、そうしたイノベーションをサポートするシステムやキャッシュ・フロー、ストラクチャーをデザインする人もいる。 ビジネスをデザインするのは

    ビジネスをデザインする6つの方法
  • 社内なら謝らなくて良いカルチャー

    社内で仕事をしているとき、指摘や指導をすることがあるが、まだうちのカルチャーに慣れていない人は、すぐに「すいません」と謝る。でも、それは良くないよ、と言っている。 仕事の仕方や成果物に対しての指摘というのは、別に悪いことをしたからな訳ではないのだから、謝る必要などない。私に謝って欲しくて指摘している訳ではないのだ。 謝るってことは、私を向いて仕事をしていることになる。それは良くない。仕事はあくまでユーザやお客さまを向いてするものだ。社内の人に向いて仕事をするのではない。 だから指摘に対して謝る必要はない。良い仕事をしてもらいたい、成長してもらいたいから指摘をしているのだ。社長の顔色なんて見なくていい。良い仕事をすればいい。 同じチームにいて、良い仕事をして、成長していきたいというベクトルがあっているなら、謝ることなんてないのだ。そういうカルチャーの会社であり続けたいと思っている。 もちろん

  • 建築史に隠されたウェブデザインの未来

    ウェブデザインの進化の過程を考えるとき、西洋建築史はとても参考になります。美術の形として、両者は同じ項目で定義することができます。 人が集まる場所として機能する実用的に作られている技術の進歩に大きく左右される実用的だが、間違いなくアートでもあるこのような制約があるなかで、両者の進化の過程はとても似ています。どちらも同じように過去の作品をもとに、その上に新しいものを築いています。もしウェブデザインの未来が知りたければ、建築家が辿った道を見てみればいいのです。

    建築史に隠されたウェブデザインの未来
  • Elasticsearch ウェブクローラー PDF編

    前回の記事では、Elasticsearch River Webを使用したサイト (HTML) のインデックス、クローリング設定〜検索確認までの基的な手順を紹介しました。今回は、多くのコーポレートサイトに存在する「PDF」をクローリング対象とし検索するための手順をまとめたいと思います。 必要なPluginのインストールMapper Attachments Type for Elasticsearch PDFデータは、Elasticsearch標準のstringなどのフィールドtypeではなく、 ”attachment”というtypeを定義してインデックスします。 また、”attachment”は、PDFだけでなくMicrosoft OfficeやOpen Documentなどのフォーマットもbace64エンコードしてインデックスできます。(詳細はサポートしているドキュメントリストで確認でき

    Elasticsearch ウェブクローラー PDF編
  • Easily testing React components with react-test-tree

    While I love React, testing React components leaves a lot to be desired. The TestUtils are useful but don’t have a particularly intuitive API and lead to verbose tests, e.g. We’ve been working on a library at Qubit (We’re hiring) called react-test-tree which removes a lot of the pain with testing React components. It does this by creating an object that represents the given component with an API d

  • Elasticsearch ウェブクローラー 基本編

    Elasticsearch River Web とは通常Elasticsearchは、用意されている様々なAPIを使いデータのインデックスを行います。そのためたとえば、企業サイトのサイト内検索をElasticsearchを使用して実現する場合は、Webサイトの全コンテンツをElasticsearchにインデックス可能なフォーマットにデータ化し、API経由でインデックするという方法が一般的と思われます。もともとDBなどでコンテンツ内容を管理していればその方法でも対応できるかもしれませんが実際対応するとなると結構面倒です。しかし、このRiver Webを使うとWebサイトをクローリングできるため、サイトの各ページを検索対象にしたい場合は大変便利です。 今回は、このElasticsearch向けWeb Crawlerプラグイン「elasticsearch-river-web」の基的な使い方につ

    Elasticsearch ウェブクローラー 基本編
  • Rails 5: what’s new

    We’ve moved! Check out this post — and other posts by fellow martians — on our new blog, Martian Chronicles! I’ve found a great post regarding the upcoming changes in Rails 5 by Jeroen van Baarsen, and you should check it out if you’re interested in Rails Edge developments. However, I felt like this post is just not enough since there are so many interesting things in the upcoming Rails 5 release.

    Rails 5: what’s new