エンジニアとデザイナーに聞く、外部サービス連携の舞台裏
noteは幅広いクリエイターやユーザーが集まり、さまざまなコンテンツと出会える場所を目指しています。そのためには、テキスト、音声、動画、画像、他SNSの投稿などあらゆる表現を集約できる必要があります。そこでnoteではより豊かな表現ができるように、多種多様な外部サービスとの連携を行っているのです。2020年12月にはデザインツールCanvaと連携し、見出し画像をブラウザで簡単に作成できるようになりました。
ただし、すべての外部連携サービスをnote社内で開発することは現実的ではありません。外部連携だけにリソースを割くわけにはいきませんし、個別にすべてを対応していけばスケールすることもできません。
そこでnoteでは記事への埋め込みをサービスの運営元でも可能にするため、oEmbedの規格に沿ったembed機能を開発して2020年7月に公開しました。さまざまな企業と共同してnoteをつくっていくことで、よりクリエイターに使いやすいサービスになると考えています。
noteではそういった外部連携サービスがどのように提案され開発していくのでしょうか。デザインチームの佐賀野さん、カイゼンチームの井上さん、山形さんに連携サービスの開発や、noteでの機能追加がどのように意思決定されていくのかをお聞きしました。
noteは多種多様なサービスと連携を行っている
ー noteは色々なサービスが埋め込めるようになっていたり連携したりしていますね。主にどういった機能があるのでしょうか？
佐賀野さん：一番わかりやすいのは記事内にURLで埋め込みできる機能でしょうか。SNSで言えばTwitterやFacebook、音声ならSoundCloudやApple Music、ECならBASEやShopifyなど、さまざまなサービスに対応しています。
山形さん：少し前にリリースされたものだと記事の見出し画像をCanvaで作成できるようになりましたし、記事内にFacebookの投稿を埋め込めるようになりました。あとはクリエイタートップで言えば、YouTubeやAmazonのウィジェットを埋め込む機能（※noteプレミアム会員限定）や、ストア機能もそうですね。
📢オープン社内報更新！ アパレル業界で働くつもりだった人から、ハードウェア業界、元CTO、ロボット業界にいた人まで目 エンジニアの3人に、これまでの経歴やnote社に入るきっかけを聞きました！ https://note.jp/n/n5eb00b75a763
Posted by note株式会社 on Tuesday, February 23, 2021
エディタにURLを入力すると動画や音声、リンク先の内容などが表示される。※テキスト記事に埋め込みできるサービス一覧
プレミアム会員であればAmazonリンクやYouTubeを埋め込むことができる
ストア機能：BASEやSTORESなどの商品一覧をクリエイタートップのタブに表示することができる
Canva：ブラウザで簡単に名刺、ロゴ、プレゼンテーションなどをデザインすることができるデザインツール。noteでは記事の編集時に見出し画像を作成することができる。
ー Canva連携は社内外で評判が良い機能ですよね。どのように開発が始まったのでしょうか？
佐賀野さん：note社内でも、以前から「Canvaと連携できたらいいよね」という意見がよくあがっていました。直接的な開発のキッカケになったのはCanvaさんが「noteに合わせた見出しサイズ用のテンプレート」を作成してくれたことです。そのお知らせをCanva側から頂いて、note社内でも「noteのエディタからCanvaで画像を作れるようにできたら便利だよね」という要望がでるようになりました。
※実際に社内Slackでおこなわれていたやり取り
山形さん：そこから「Canvaとnoteでどういう連携ができるのか？」というヒアリングをしてもらい、それがnoteで本当に実現できるのかを調査していきました。
ー 外部サービスとの連携は独特な仕様もあって開発に苦労することもあると思います。Canvaとの連携はいかがだったでしょうか？
山形さん：もともとCanva自体が外部連携に力を入れていて、APIやドキュメントなどもしっかり用意されていました。そのため開発で苦労することは特にありませんでしたね。開発自体は調査を含めてもトータルでは一週間くらいで終わったかな。
noteではデザイナーがPMの役割もこなす
ー Canvaのように新機能の要望が社内ででたときに、noteではどのように開発が進めれられていくのでしょうか？
佐賀野さん：noteにはカイゼン会議というものがあり、そこでnoteの機能提案や意思決定が行われていきます。その会議で代表の加藤さんやCXOの深津さんからOKがでればエンジニアチームにタスクを振り分けていきます。Canvaの開発はSlackのやりとりがカイゼン会議で取り上げられて発展していき実装することになりました。
カイゼン会議：デザインチームが中心となりカイゼン施策の提案などが行われる。この会議によってnoteの新機能が決まっていくことも多い。クリエイターからの意見を募集する「カイゼン目安箱」やSNSの声、社員からSlackで寄せられる提案などを多く取り入れている。
カイゼンチーム：noteの開発チームは短期・中期・長期の施策ごとにわかれている。井上さんや山形さんが所属している「カイゼンチーム」では1週間以内で開発が完了するような短期施策をまわしてnoteが常にグロースするような体制を整えている。
井上 太志：2018年6月入社。カイゼンチーム リーダー
井上さん：カイゼン会議ででてきたタスクは1週間に1回のスプリントミーティングで各メンバーに割り当てています。基本的には、やりたいひとにタスクを振る形です。
山形さん：振られたタスクはいきなり開発をするのではなく、調査タスクという形で始まることが多いですね。そもそもnoteの仕様的に実現できない可能性もありますし。仕様を決めるときはデザイナーと一緒に詰めていくことが多いです。noteはデザイナーがPM的な立ち回りをすることが多いので。
佐賀野さん：もともとカイゼン会議はエンジニアとデザイナーが協力して施策を回していくというスタイルで進めていたこともあり、デザイナーが機能要望の取りまとめや仕様策定にも関わる機会が多くありました。結果的に、現在PMのような立場で動くメンバーが多くなったのかもしれません。
山形さん：デザインチームがあげる施策はビジネスだけでなく、UXの観点からも考えられているので納得感がありますね。
埋め込みサービスを見直した「embed機能」
embed機能：note記事内の埋め込みを他社が開発できるようにした機能。oEmbedの規定に沿って開発されている。
※embed機能 開発ガイドライン
ー 外部の企業がembed機能を使って開発をするときはどのような流れになりますか？
佐賀野さん：まずはGoogleフォームから申請していただき、担当チームがnoteの方向性とそのサービスにミスマッチがないかを確認します。その上でデザインがガイドラインに準拠しているか見て、問題なければ実装をお願いする形になります。
ー そもそもembed機能の開発がはじまった経緯は何だったのでしょうか？
佐賀野さん：2019年くらいから「note側でサービスごとに埋め込みを開発するには限界がある」という話がでていましたね。noteが今後もっとグローバルに展開して、クリエイター数が何十倍にもなっても耐えられるような設計を目指すべきだと。
井上さん：そうですね。embed機能が開発されるまでは埋め込み機能は一つずつ開発していたため、コードが共通化ができておらずスケールもしづらい状況でした。サービスの規模が広がっていくことを考えると、今のうちに設計を見直そうと。そのためにもサービスを運用している企業が、oEmbedの仕様に合わせて埋め込みを開発できるようにする必要がありました。
山形 孝造：2020年3月入社。カイゼンチーム所属
山形さん：共通化していないとそれぞれ個別に修正しないといけないですからね。たとえば過去にTwitterアカウントのリンクが記事内で表示されなくなるバグがあったのですが、これはTwitterのAPIの仕様が変わったことが原因でした。こういった細かい修正をサービスごとにしていかなければなりません。
佐賀野さん：利用している企業はだんだんと増えてきており、ヤングジャンプやYAMAPの埋め込みなどは公開したガイドラインをもとに開発していただきました。embed機能の利用は全部で13社ほどになります。（2021年2月現在）
ー 埋め込みに関する開発はすべてembed機能に集約できたのですね
井上さん：いえ、embed機能ができる前に連携していたサービスの埋め込みコードは一部残っています。以前からの連携サービス元にもembed機能の対応をしていただく必要があるため、まだ集約はできていません。
ー なるほど、あくまでこれからの新しい埋め込みはembed機能で開発されていくのですね
井上さん：そうですね。連携サービス元で表示内容のコントロールができるというメリットもあります。以前は動的に埋め込み表示内容を更新したいという要望がある場合、定期的に連携サービス元に最新情報を取りにいくようなことをしていました。これだと更新内容の反映が遅れたり、そもそも連携サービスの増加に対応できない懸念もありました。
佐賀野さん：embed機能を利用して外部で開発してもらえればnote側ではiframeで制御するだけでいいので、負荷もかかりませんしね。
ー embed開発の実装で苦労した部分はありますか？
井上さん：過去の個別埋め込み対応処理がまだ残っているため、出し分けの条件が複雑なところでしょうか。クラウドファンディングやショッピングなど埋め込みが想定されるサービスは種類が多くあるので。
佐賀野さん：埋め込みを表示するときのサイズ問題はありましたね。oEmbedの仕様がレスポンシブを考慮されていないので困りました。結果的にはある程度で妥協することにしたのですが。
井上さん：あー、ありましたね。embedの比率をどうしようかという点で悩みました。最終的には「widthが620px以上なのか」「widthが100%指定されているか」などによってサイズを変更するようにしました。
ー 設計するときに気をつかった部分はありますか？
井上さん：oEmbedの仕様に沿って設計することは意識しました。oEmbedというフォーマットから逸脱してnoteオリジナルにならないように。標準的な規格に沿っておけば、開発がしやすくドキュメントも理解しやすいものになります。また、各企業が開発したコードがnote以外でも利用できるようになるメリットもあります。
佐賀野さん：デザイン面も設計には気をつかいましたね。自由につくることができるため、デザインのコントロールが効かなくなってしまう可能性がありました。なので時間をかけてしっかりとガイドラインを作成しました。
ー 外部の企業に開発してもらう関係でなにかトラブルの発生が起きることはないのでしょうか？
佐賀野 宇宙：2017年12月入社。デザインチーム所属
佐賀野さん：embed機能がリリースされたばかりの頃は、実装方法がうまく伝わっておらず、ヘルプやガイドラインの見直しを適宜していました。ドキュメント類は今でもアップデートをつづけています。
井上さん：ある企業に開発をしてもらったあとにnoteで確認したら、なぜか表示されないパターンが発生することがありました。ガイドラインに沿って開発されていたため、はじめは原因がよくわからない状態で。よくよく調べてみるとその企業がnote.comからのアクセスしか認めていなかったことが原因でした。noteはnote proを利用している場合は独自ドメインのページになるため、そういったページからのアクセスでは弾かれてしまっていたんですね。考慮すべき事項が多いのも、特徴の1つです。
佐賀野さん：embed機能はもっと開発がしやすい形があるかもしれません。これで完成形というわけではないと思っています。ドキュメントのアップデートはこれからも行っていきますし、埋め込みに関係するものはやはり最終的にはすべて共通化していきたいですね。
すばやく実装するためには、まずは小さくスタートする
ー noteでは次々と新たな外部サービス連携を開発を追加していますね。noteのバリューのひとつに「すばやく試そう」という言葉がありますが、それを達成するために実践していることはありますか？
山形さん：最初から作りこみをあまりしないようにしています。まずは仕様を簡単なほうに倒せるなら倒す。つくりはじめてから大掛かりになってしまうと感じたら「もっと簡単にできますよ」ということをフィードバックするようにしています。
井上さん：そうですね、まずは小さく作るのは大事ですね。
カイゼン会議ででてくるタスクは、仕様ががっちりとは決まってないことが多くあります。そうなるとエンジニアとデザイナーで決めた仕様が効果的なのかどうかはリリースしてみないとわかりません。検証しつつ、うまくいったら機能を拡張させていくようなインクリメンタルな形の開発スタイルは心がけています。
ー 井上さんがチームのリーダーとして意識している部分はありますか？
井上さん：週1でスプリントミーティングをチームで行っているのですが、そこで今週のタスクについて1つずつ全員で議論するようにしています。まず内容を理解して次に仕様に漏れがないかの確認、そしてプランニングポーカーで工数見積もりを全員で把握するようにしています。全員で話すことによって誰か1人がタスクを抱えているわけではなく、全員で取り組んでいるようなイメージが持てるようになります。
山形さん：スプリントミーティングで仕様についてツッコむのは作業をする上で大切です。「クリエイターがnote proの状態ならこの機能はどうなる？」「サークルを運営しているひとが、やめて再開したらどうなる？」など様々な状態を考慮し、カイゼン施策の穴を突きまくって仕様を明確にしていきます。
ー デザイナーとエンジニアが作業を円滑にすばやくするために、佐賀野さんが意識していることはなにかありますか？
佐賀野さん：まずはタスクを実現可能なラインに落とし込むことを意識しています。デザインチーム内では私はコードが読める方なので、実装面で仕様がどうなるかを先読みしつつ考えます。あとはデザイナーで修正したほうが早そうであれば、自分でコードを修正するとか。
ー 最後の質問になりますが、noteや自分のチームに入ってきてほしいエンジニア像などはありますか？
井上さん：私のチームでいうと、コンセプトが「すばやく試そう」「クリエイター視点で考えよう」というバリューを重視することになるため、ユーザにすばやく価値をとどけることにモチベーションを持てるひとには合っていると思います。
山形さん：入ってみてから感じたのですが、カイゼンチームはイメージ的にタワレコの店員みたいな感じなんですよね。受け持ったフロアのオリジナルポップを作って改善したり、棚の整理をしてキレイにしたり、特定のジャンルの音楽にはものすごく詳しい……みたいな。
それと同じで、noteという店を毎日メンテして作品を見ているひとや作家が喜んでくれることにうれしさを感じたり、noteのいろんな機能を良くしていくことに楽しさを見いだせたりするひとは向いてるんじゃないかなと思います。
佐賀野さん：デザイナー視点で言えば、決まっていないことに挑んでいくことに抵抗感がないひとは向いていると思います。逆に「ワイヤーフレームに書かれた通りのデザインを作る」など決まったものをつくることが好きなひとは向いていないかもしれません。デザイナーなど他のポジションのメンバーと協力して仕様から一緒につくっていくことに楽しさを感じられるひとはnoteに合っているでしょう。
▼noteを一緒に作りませんか？
▼この記事で紹介した「noteへのサービス埋め込み」も募集中
Text by megaya