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