罢别肠丑贵别别诲というテクノロジーキュレーションサービスを作った话
?
23 likes?19,947 views
12/16に開催されたGoogle Developer Meetup #2 での資料です。
罢别肠丑贵别别诲というテクノロジーキュレーションサービスを作った话
- 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がunde?nedになるバグ?があるので 注意… ? ? 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プロパティが使えない ? ? テーブルレイアウトが現役のほか、 ?oatや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, ??nally, ?return, ?re?ectとか便便利利なメソッドがたくさんある ? ? 将来的には国際化?多?言語化を予定しているので今のうちから準備している（i18n2, ? タイムゾーンの設定などなど） ? ? テンプレートエンジンにECTを使ってる
- 26. techfeed.io 収集 評価 配信 インターネット HTMLメール ? SNS ? ? RSS ? ? クローリング ? クラスタリング ? ? スコアリング ? ? フィルタリング トピック ソーシャルスコア 信頼度度 ? ハイライト?生成 ? ? メール最適化
- 27. techfeed.io データ収集の話 ? インターネットはわかっていたけど、やっぱりゴミだらけ ? ? 当初Twitterのキーワード検索索をベースにしようと試してみたが、99%がス パムや重複で有?用なURLは1%に満たないぐらいだった ? ? githubのdi?ページで2.5MBぐらいあるページがある… ? ? ?文字コード不不明、Last-‐??Modi?edとかまったく信?用できないとか ? ? 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 ?にフィードバックを頂ければ幸いです！） ? ? このサービスを皆さんと?一緒に育てていければと思いますので、今後とも 応援よろしくお願いします！