Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
TechFeedというテクノロジーキュ
レーションサービスを作った話
2015/12/16  
Google  Developer  Meetup  #2  
Toru  Yoshikawa  (@yoshikawa_̲t)
techfeed.io
Who?
• OpenWeb  Technology

取締役  CXO  
• html5j  代表

-‐‑‒  毎⽉月の「HTML5とか勉強会」や年年1回の
「HTML5  Conference」を主催しています ...
techfeed.io
TechFeed
techfeed.io
What  is  TechFeed?
興味のあるトピックを選択すると、毎⽇日そのトピックに関連するニュースをハイライトでお届けします。  
(現在のトピック数は約150個。随時追加中!)
techfeed.io
開発者紹介
⽩白⽯石  俊平  (CEO)  
html5j  ファウンダー、Microsoft  
MVP  (IE)。TechFeedのプロダクト
オーナー。何でも屋、主にプロジェク
トマネジメントを⾏行行う。
⾼高...
techfeed.io
なぜ  TechFeed  を作ったのか?
• ⼀一般向けメディアにはさまざまなイノベーションが
起こっている。SmartNews,  NewsPicks,  
BuzzFeed,  etc…  
• ハッカドールのよう...
techfeed.io
そもそもの背景
2011年年〜~2013年年にかけて、htmljのMLに
「HTML5とか最新情報スレ」と題して、
700回近くに渡ってキュレーション&コ
ミュニティ投稿を⾏行行っていました。
2013年年から、NTTコ...
techfeed.io
そこからの想い
• 発信源が世界中でかつ、情報が多すぎる。適切切な絞り込みが必要だが、
⼈人⼒力力では限界がある。  
• 最初に⼊入ってくる情報が英語で、翻訳されるのはごく⼀一部、海外で話題
になっても⽇日本に⼊入って...
techfeed.io
ここからはTechFeed
の中⾝身を⾒見見ていきます
techfeed.io
TechFeedの全体構成
App  
LoopBack
Backend
Log  
Elasticsearch
LB
DB  
MongoDB
Mail  
SES
エントリーデータ
ユーザーアクセス
メール配信
techfeed.io
フロントエンド編
techfeed.io
クライアントの構成
• CSS  -‐‑‒>  Sass  /  JavaScript  -‐‑‒>  Babel  (ECMAScript  2015)  
• CSSは、最近BEMで書き始めてみました。  
• 最新...
techfeed.io
Progressive  Web  Appsに⼀一部対応
(ホーム画⾯面に追加のみ)
techfeed.io
Progressive  Web  Appsに⼀一部対応
(ホーム画⾯面に追加のみ)
• 既存のWepサイトにmanifest.jsonを追加するだけ
なので簡単  
• Androidの場合はネイティブと遜⾊色ない印象...
techfeed.io
HTMLメール
• 昔からWebサイト/アプリの重要
なリエンゲージメントの⼿手段  
• 最近ではよりリッチにHTMLメー
ルが使われるようになってきた  
• しかしながら、ブラウザの
HTML5のような新しいムーブ...
techfeed.io
レガシーなHTMLメール
• PC、モバイルで多くのメーラーがあ
り、基本はすべてのメーラーに対応す
るCSSプロパティのみが使える  
• シェアが⾼高く、対応度度が低いメーラー
にOutlookやGmail  app...
techfeed.io
⼀一部のメーラーにおける制限
• Gmailでは約100KB以上の
メールは⾃自動的に省省略略される  
• Gmail  appでは、コンテンツ
の幅が⼤大きかったり、フォン
トサイズが⼩小さかったりする
と⾃自動的に...
techfeed.io
HTMLメールは⽤用法・容量量を守って
正しく開発してください
• HTMLメールでリッチなUIを作り込もうと思うと本当に⾟辛いので、覚悟
して取り組もう(⼯工数的に)  
• 個⼈人的な感想ではIE6より⾟辛い!  
...
techfeed.io
サーバーサイド編
techfeed.io
サーバーサイドの構成
• Node.js  (v4)  
• const/let,  arrow  function,  template  literalなどES2015のJSが書けるのは便便
利利!  
• defa...
techfeed.io
LoopBack
• Expressベースの最強のアプリケーションフレームワーク(StrongLoop談)-‐‑‒
>  http://loopback.io  
• データモデルから⾃自動的にREST  APIなどを⽣...
techfeed.io
LoopBack
API  Explorer  
https://docs.strongloop.com/display/public/LB/Use+API+Explorer
Compare  Table  
http:...
techfeed.io
Swaggerとは?
• SwaggerはREST  APIを記述するための仕様  
• MicrosoftやGoogle、IBMが、REST  APIの記述に
ついて標準化を⽬目指した「Open  API  Initi...
techfeed.io
その他
• Promiseを拡張するBluebirdがすごく便便利利  
• Promiseの並列列実⾏行行の制御  
• callbackとの相互変換  
• エラータイプでcatch  
• spread,  fina...
techfeed.io
アルゴリズム編  
〜~ちょっとだけお話します〜~
techfeed.io
収集
評価
配信
インターネット
HTMLメール
• SNS  
• RSS  
• クローリング
• クラスタリング  
• スコアリング  
• フィルタリング
トピック
ソーシャルスコア
信頼度度
• ハイライト⽣...
techfeed.io
データ収集の話
• インターネットはわかっていたけど、やっぱりゴミだらけ  
• 当初Twitterのキーワード検索索をベースにしようと試してみたが、99%がス
パムや重複で有⽤用なURLは1%に満たないぐらいだった  ...
techfeed.io
評価の話
• 内部で独⾃自のスコアリングをしているが、最初に試し
てみたときに、いきなり53万とかついてドラゴン○ー
ルかと  
• 最初は、Polymerのトピックで、ポリマー製のバケツ
の記事が引っかかったりとか

...
techfeed.io
評価の話
• 虚構新聞の記事が引っかかって怒怒られました…  
• 他にも嘘ニュースサイトはたくさんあるようなのでご注意
techfeed.io
まとめ
techfeed.io
TechFeedの現在の開発ポリシー
• 完璧を⽬目指すといつまでたってもリリースできないので、不不完
全でも触って使えるものを早くリリースする  
• 技術的負債をたくさん負うことになるが、スタートアップは、
それをレ...
techfeed.io
今後の予定(実装時期は未定)
• ピン留留め(あとで読む)機能  
• モバイルアプリ  
• などなど、テクノロジー業界に特化したいろんなア
イデアを実現予定です!
techfeed.io
まとめ
• TechFeedは、まだまだ未成熟なサービスです(もちろんこれからどんど
んアップデートしていきます)  
• まずは皆さんに使って貰い、フィードバックを頂けることが⼀一番の楽しみ
です(是⾮非、@techf...
techfeed.io
Thank  you!!
(@yoshikawa_̲t)
Nächste SlideShare
Wird geladen in …5
×

TechFeedというテクノロジーキュレーションサービスを作った話

12/16に開催されたGoogle Developer Meetup #2 での資料です。

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

TechFeedというテクノロジーキュレーションサービスを作った話

  1. 1. TechFeedというテクノロジーキュ レーションサービスを作った話 2015/12/16   Google  Developer  Meetup  #2   Toru  Yoshikawa  (@yoshikawa_̲t)
  2. 2. techfeed.io Who? • OpenWeb  Technology
 取締役  CXO   • html5j  代表
 -‐‑‒  毎⽉月の「HTML5とか勉強会」や年年1回の 「HTML5  Conference」を主催しています   • Google  Developer  Experts  (HTML5,  Chrome)   • HTML5  Experts.jp  副編集⻑⾧長  兼  Expert 吉川  徹  /  Toru  Yoshikawa   @yoshikawa_̲t
  3. 3. techfeed.io TechFeed
  4. 4. techfeed.io What  is  TechFeed? 興味のあるトピックを選択すると、毎⽇日そのトピックに関連するニュースをハイライトでお届けします。   (現在のトピック数は約150個。随時追加中!)
  5. 5. techfeed.io 開発者紹介 ⽩白⽯石  俊平  (CEO)   html5j  ファウンダー、Microsoft   MVP  (IE)。TechFeedのプロダクト オーナー。何でも屋、主にプロジェク トマネジメントを⾏行行う。 ⾼高岡  ⼤大介  (CTO)   AITC運営委員(エバンジェリス ト)、HTML5Experts.jp  エキスパー ト、Build  Insider  オピニオンコラム 執筆など。何でも屋、主にインフラ、 サーバーサイド周りを担当。 ++
  6. 6. techfeed.io なぜ  TechFeed  を作ったのか? • ⼀一般向けメディアにはさまざまなイノベーションが 起こっている。SmartNews,  NewsPicks,   BuzzFeed,  etc…   • ハッカドールのような専⾨門性のあるキュレーション サービスも出始めた   • テクノロジーメディアには?
 ないなら作ってみよう!
  7. 7. techfeed.io そもそもの背景 2011年年〜~2013年年にかけて、htmljのMLに 「HTML5とか最新情報スレ」と題して、 700回近くに渡ってキュレーション&コ ミュニティ投稿を⾏行行っていました。 2013年年から、NTTコムと共同でHTML5   Experts.jpという技術者向けメディアを運 営しています。
  8. 8. techfeed.io そこからの想い • 発信源が世界中でかつ、情報が多すぎる。適切切な絞り込みが必要だが、 ⼈人⼒力力では限界がある。   • 最初に⼊入ってくる情報が英語で、翻訳されるのはごく⼀一部、海外で話題 になっても⽇日本に⼊入ってこないことも。   • 双⽅方向コミュニティ、⼀一⽅方向のメディアのどちらも運営した経験から、 ⾃自発的、対話型のコミュニケーションとユーザー同⼠士の情報共有が重要   • 必要な情報を、世界中から集めて、素早く⾒見見れるように。そして、それ によって、皆さんの情報収集の⼿手間が軽減され、かつそれが業界全体の 技術⼒力力の底上げになることを⽬目指しています。
  9. 9. techfeed.io ここからはTechFeed の中⾝身を⾒見見ていきます
  10. 10. techfeed.io TechFeedの全体構成 App   LoopBack Backend Log   Elasticsearch LB DB   MongoDB Mail   SES エントリーデータ ユーザーアクセス メール配信
  11. 11. techfeed.io フロントエンド編
  12. 12. techfeed.io クライアントの構成 • CSS  -‐‑‒>  Sass  /  JavaScript  -‐‑‒>  Babel  (ECMAScript  2015)   • CSSは、最近BEMで書き始めてみました。   • 最新のJSでバリバリ開発!   • jQueryのイベントハンドラにarrow  functionを使うとthisがundefinedになるバグ?があるので 注意…   • Library  -‐‑‒>  jQuery,  Bootstrap,  (⼀一部画⾯面で)  Bacon.js,  Material  Icons   • ReactやAngularJSも考慮したが、現時点では開発スピードを優先して、よく使われていて枯れ たライブラリを選択   • Progressive  Web  Apps  に⼀一部対応(ホーム画⾯面に追加のみ)   • HTMLメール   • 苦⾏行行
  13. 13. techfeed.io Progressive  Web  Appsに⼀一部対応 (ホーム画⾯面に追加のみ)
  14. 14. techfeed.io Progressive  Web  Appsに⼀一部対応 (ホーム画⾯面に追加のみ) • 既存のWepサイトにmanifest.jsonを追加するだけ なので簡単   • Androidの場合はネイティブと遜⾊色ない印象   • iOS(apple-‐‑‒touch-‐‑‒icon)は、動きがちょっと残念念   • 表⽰示するたびに必ず画⾯面がリフレッシュするとか (あきらかにわかる形で)
  15. 15. techfeed.io HTMLメール • 昔からWebサイト/アプリの重要 なリエンゲージメントの⼿手段   • 最近ではよりリッチにHTMLメー ルが使われるようになってきた   • しかしながら、ブラウザの HTML5のような新しいムーブメ ントもなく今だにレガシーのまま   • ⾟辛い
  16. 16. techfeed.io レガシーなHTMLメール • PC、モバイルで多くのメーラーがあ り、基本はすべてのメーラーに対応す るCSSプロパティのみが使える   • シェアが⾼高く、対応度度が低いメーラー にOutlookやGmail  appがあり、事実上 ほとんどのCSSプロパティが使えない   • テーブルレイアウトが現役のほか、 floatやpositionも利利⽤用できない   • style要素がなく、style属性でインライ ンで記述する必要がある https://www.campaignmonitor.com/css/
  17. 17. techfeed.io ⼀一部のメーラーにおける制限 • Gmailでは約100KB以上の メールは⾃自動的に省省略略される   • Gmail  appでは、コンテンツ の幅が⼤大きかったり、フォン トサイズが⼩小さかったりする と⾃自動的に縮⼩小表⽰示される   • 同じ画像を何度度も使うとスパ ム判定にひっかかる可能性が ある Gmailのクリップ(メールの省省略略)
  18. 18. techfeed.io HTMLメールは⽤用法・容量量を守って 正しく開発してください • HTMLメールでリッチなUIを作り込もうと思うと本当に⾟辛いので、覚悟 して取り組もう(⼯工数的に)   • 個⼈人的な感想ではIE6より⾟辛い!   • style要素のインライン化はinline-‐‑‒cssモジュールで可能   • 100KB制限があるため、HTMLのminifyは必須。TechFeedでは、さら に不不要な属性やスタイルを削除する処理理を⼊入れている。   • コンテンツ・機能が増えれば、その分の容量量を確保しなければならず 乾いた雑⼱巾を無理理やり絞るイメージ!
  19. 19. techfeed.io サーバーサイド編
  20. 20. techfeed.io サーバーサイドの構成 • Node.js  (v4)   • const/let,  arrow  function,  template  literalなどES2015のJSが書けるのは便便 利利!   • default  parameterが待ち遠しい   • v4にした次の⽇日に、v5が出ました…   • LoopBack   • Expressを作っているStrongLoopが開発したアプリケーションフレームワーク   • MongoDB
  21. 21. techfeed.io LoopBack • Expressベースの最強のアプリケーションフレームワーク(StrongLoop談)-‐‑‒ >  http://loopback.io   • データモデルから⾃自動的にREST  APIなどを⽣生成する(Swaggerに準拠)   • LoopBackで抽象化されたデータモデルを記述すれば⾃自動でDBを作成し、かつ クライアンドサイドでも利利⽤用できる(AngularJS⽤用のファイルなども出⼒力力でき る)   • 最近IBMに買収されました…   • 便便利利だが、まだ情報が少なく⼗十分ではないのでハマりどころがそれなりにある (node_̲modulesの下を漁るのに抵抗がなくなりました!)
  22. 22. techfeed.io LoopBack API  Explorer   https://docs.strongloop.com/display/public/LB/Use+API+Explorer Compare  Table   http://loopback.io/resources/
  23. 23. techfeed.io Swaggerとは? • SwaggerはREST  APIを記述するための仕様   • MicrosoftやGoogle、IBMが、REST  APIの記述に ついて標準化を⽬目指した「Open  API  Initiative」 という団体を⽴立立ち上げ、そのベースをSwaggerに すると宣⾔言   • Swagger  UI、Swagger  Editorなどのツールが 揃っていてIDEから簡単にAPIを⽣生成できるらしい   • 「Swaggerとは何か?」  ̶—http:// blog.takuros.net/entry/2015/12/02/082248 http://swagger.io/
  24. 24. techfeed.io その他 • Promiseを拡張するBluebirdがすごく便便利利   • Promiseの並列列実⾏行行の制御   • callbackとの相互変換   • エラータイプでcatch   • spread,  finally,  return,  reflectとか便便利利なメソッドがたくさんある   • 将来的には国際化・多⾔言語化を予定しているので今のうちから準備している(i18n2,   タイムゾーンの設定などなど)   • テンプレートエンジンにECTを使ってる
  25. 25. techfeed.io アルゴリズム編   〜~ちょっとだけお話します〜~
  26. 26. techfeed.io 収集 評価 配信 インターネット HTMLメール • SNS   • RSS   • クローリング • クラスタリング   • スコアリング   • フィルタリング トピック ソーシャルスコア 信頼度度 • ハイライト⽣生成   • メール最適化
  27. 27. techfeed.io データ収集の話 • インターネットはわかっていたけど、やっぱりゴミだらけ   • 当初Twitterのキーワード検索索をベースにしようと試してみたが、99%がス パムや重複で有⽤用なURLは1%に満たないぐらいだった   • githubのdiffページで2.5MBぐらいあるページがある…   • ⽂文字コード不不明、Last-‐‑‒Modifiedとかまったく信⽤用できないとか   • title、descriptionが超適当   • スパム、広告が多い   • 現在は信頼できるリソースをいくつか組み合わせて取得している
  28. 28. techfeed.io 評価の話 • 内部で独⾃自のスコアリングをしているが、最初に試し てみたときに、いきなり53万とかついてドラゴン○ー ルかと   • 最初は、Polymerのトピックで、ポリマー製のバケツ の記事が引っかかったりとか
 -‐‑‒>  トピックに対する記事の信頼度度を算出して、ある閾 値を超えたら出すように。地味なパラメータ調整地獄
  29. 29. techfeed.io 評価の話 • 虚構新聞の記事が引っかかって怒怒られました…   • 他にも嘘ニュースサイトはたくさんあるようなのでご注意
  30. 30. techfeed.io まとめ
  31. 31. techfeed.io TechFeedの現在の開発ポリシー • 完璧を⽬目指すといつまでたってもリリースできないので、不不完 全でも触って使えるものを早くリリースする   • 技術的負債をたくさん負うことになるが、スタートアップは、 それをレバレッジにしてグロースするべき(ご利利⽤用、ご返済は 計画的に)   • 新しい技術も積極的に取り⼊入れる。ダメなら捨てる。切切り替え を早く。
  32. 32. techfeed.io 今後の予定(実装時期は未定) • ピン留留め(あとで読む)機能   • モバイルアプリ   • などなど、テクノロジー業界に特化したいろんなア イデアを実現予定です!
  33. 33. techfeed.io まとめ • TechFeedは、まだまだ未成熟なサービスです(もちろんこれからどんど んアップデートしていきます)   • まずは皆さんに使って貰い、フィードバックを頂けることが⼀一番の楽しみ です(是⾮非、@techfeedapp  にフィードバックを頂ければ幸いです!)   • このサービスを皆さんと⼀一緒に育てていければと思いますので、今後とも 応援よろしくお願いします!
  34. 34. techfeed.io Thank  you!! (@yoshikawa_̲t)

×