O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

[日本語・Japanese] Creative Technical Content for Better Developer Experience

DevRelCon Tokyo 用のスライドの日本語版。(カンファレンスは英語)
Developer Relation の仕事の一つ、ドキュメンテーションやチュートリアルなどのデベロッパー向けの文書に焦点を当てています。

  • Entre para ver os comentários

[日本語・Japanese] Creative Technical Content for Better Developer Experience

  1. 1. Creative Content For BETTER DEVELOPER EXPERIENCE Tomomi Imura (@girlie_mac) 日本語版!
  2. 2. @ girlie_mac ● Slack の DevRel チーム所属 ● api.slack.com の中の人 ● オープン web & テック アドボケイト ● JavaScript & Node.js コーダー ● くだらない Hack 大好き ● Code Chrysalis のアドバイザー ● サンフランシスコの住人 tomomi imura
  3. 3. @ girlie_mac Where I Have Been Doing DevRel at: Slack API Nexmo SMS, Voice, 2FA API HTML5 (W3C) & Windows Phone webOS Apps PubNub Realtime API
  4. 4. @ girlie_mac I Write Articles on: テクニカルエディターもしています
  5. 5. Awareness & Acquisition 開発者への 認識と獲得
  6. 6. 検索 Tweets や ニュースレター クチコミ、 Slack など API, Platform, Framework, Tools, etc. How Do Developers Find Your...
  7. 7. @ girlie_mac Awareness - どうやって開発者からの認識を得るか 開発者が新しい技術の情報を Tech Crunch や、その他の テックニュースから受動的に知った場合 ええ感じやん!
  8. 8. @ girlie_mac Awareness & Acquisition - 認識から獲得に 開発者が新しい技術を実際のユースケースや チュートリアルで詳しく使い方を知った場合 ええ感じやん! 使ってみよう〜!
  9. 9. @ girlie_mac Get Devs Hands Dirty! - 開発者に試してもらう ● ワークショップ ● ハッカソン ● ブログ & チュートリアル ○ Docs ○ ビデオ & スクリーンキャスト ○ Webinars
  10. 10. @ girlie_mac Get Devs Hands Dirty! ● ワークショップ ● ハッカソン ● ブログ & チュートリアル ○ Docs ○ ビデオ & スクリーンキャスト ○ Webinars My focus!
  11. 11. Make It Practical! 実践的に!
  12. 12. @ girlie_mac Practical & Fundamental チュートリアルの例 ● [Awesome API] はじめの一歩 ● Beginner Guide of [Awesome API] ● [Node SDK] で [Awesome API] を使ってみよう ● [Awesome.JS Framework] で To-Do アプリを作る ● [Awesome API] Tips & Tricks ● [Awesome API] ベストプラクティス
  13. 13. @ girlie_mac
  14. 14. @ girlie_mac
  15. 15. @ girlie_mac
  16. 16. Make It Interesting! 興味を引くように!
  17. 17. @ girlie_mac Interesting Projects クリエイティブな内容にしてみよう ● Slackbot ダンボールロボット ● D3.js で Twitter のビジュアリゼーション ● Raspberry Pi でスパイカメラを作る ● “Alexa, Call My Mom” ● Pokémon Go リアルタイムマップ
  18. 18. @ girlie_mac Brainstorming ideas
  19. 19. @ girlie_mac Project Types ● ただ楽しいプロジェクト ○ Pokémon ○ IoT - cat camera ● コミュニティ・エコシステムに標的を絞ったもの ○ JavaScript - e.g. React, Angular, D3 ○ MCU - e.g. Arduino, Raspberry Pi ○ Web standards - HTML5 ○ Amazon Alexa
  20. 20. @ girlie_mac
  21. 21. @ girlie_mac
  22. 22. @ girlie_mac https://medium.com/slack-developer-blog/building-a-sentiment-analysis- bot-with-ibm-watson-and-raspberry-pi-eeb399bb8803
  23. 23. @ girlie_mac アイデアを提供してあとは開発者に任せよう 「ポケモン?こんなんで会社の API が金になると 思ってんの!?」 「勘違いしないで。自分はアイデアを提 供しているだけ。」
  24. 24. @ girlie_mac アイデアから実際のビジネスへの採用 { id: 'pikachu-012', lat: 37.7234, lon: -122.472 } { id: 'taxi-012', lat: 37.7234, lon: -122.472 }
  25. 25. Go Social
  26. 26. @ girlie_mac Get Carded on Social Media 3 1 1 2
  27. 27. @ girlie_mac It’s So META! <!-- Twitter Card data (with a large image) --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Title Here"> <meta name="twitter:description" content="Page description"> <meta name="twitter:image" content="http://example.com/image.jpg"> <!-- FB Open Graph data --> <meta property="og:title" content="Title Here"> <meta property="og:type" content="article"> <meta property="og:url" content="http://www.example.com/"> <meta property="og:image" content="http://example.com/image.jpg"> <meta property="og:description" content="Page description"> 3 1 2
  28. 28. @ girlie_mac Developer-Focused Social Space Newsletters Code Samples & Demo
  29. 29. Adoption & Retention Improving Developer Experiences 採用と維持
  30. 30. @ girlie_mac User-Experience User-Experience (UX) focuses on having a deep understanding of users, what they need, what they value, their abilities, and also their limitations.” Source: usability.gov “
  31. 31. @ girlie_mac User-Experience User-Experience (UX) focuses on having a deep understanding of users, what they need, what they value, their abilities, and also their limitations.” Source: usability.gov “
  32. 32. @ girlie_mac Developer-Experience Developer-Experience (DX) focuses on having a deep understanding of developers, what they need, what they value, their abilities, and also their limitations.” Source: usability.gov “
  33. 33. @ girlie_macs://twitter.com/wheelyweb/status/849969689388134400
  34. 34. @ girlie_macBy Jared Spool https://flic.kr/p/5ckBZq CC-BY-SA
  35. 35. @ girlie_mac https://twitter.com/ryo_sasaki/status/560229808362102784 7-Eleven の大失敗 かっこだけよくて ユーザビリティがゼロ
  36. 36. @ girlie_mac Bad UX: User Reactions 1. わかりにくいインターフェースに混乱 2. とりあえず適当に試して失敗 3. イライラ 4. 2 - 3 繰り返し 5. 超ムカつく
  37. 37. @ girlie_mac Bad DX: Developer Reactions 1. わかりにくい Docs や API に混乱 2. とりあえず適当にコードを試して失敗 3. イライラ 4. 2 - 3 繰り返し 5. 超ムカつく
  38. 38. @ girlie_mac Poor Docs & Tuts DX Examples ● ドキュメンテーションがひどい。と言うかそれすらない。 ● 初心者に優しくない ● リンクがなかったりでナビゲートしづらい ● スクリーンショットや図がない ● とにかく難しい ● スーツ姿の偉そうなオッサンの写真素材がなんかイヤ ● 全部 PDF (Docs != Whitepaper)
  39. 39. @ girlie_mac Open Source Survey by GitHub http://opensourcesurvey.org/2017/ #1 problem!
  40. 40. @ girlie_mac Docs & Tuts Should be ● ナビゲートしやすい ● 実践的かつ興味ふかい ● 初心者に親切 ○ “Hello, world” オンボーディング ○ 必須条件やセットアップの仕方が明確 ○ ハンズオン・ステップバイステップで学べる ● コードサンプル ● 的確な情報でツールなどのDL先もわかりやすい
  41. 41. @ girlie_mac User-Friendliness https://twitter.com/kaz/status/757733261938298881 同じ内容なのに書き方が違う と、使ってみたさ感に違いが出 てくるな エラー。クライアントがこのリ ソースにアクセスするには認証 が必要です。 このページを見るには サインインをしてね。
  42. 42. @ girlie_mac Developer-Friendliness
  43. 43. @ girlie_mac Slack API Doc (Even More) Kawaii-fy Project (j/k!)
  44. 44. @ girlie_mac TL;DR ● デベロッパーが使ってみたくなるように書こう ○ わかりやすくて使いやすい docs やチュートリアル ● コンテントをシンジケート ● ソーシャルメディアの活用 ○ social media meta tags ○ デベロッパー・フォーカスなメディアに ● dev experience を常に心がけてデベロッパーを引き込も う
  45. 45. @ girlie_mac Developer Experience Matters! really
  46. 46. @ girlie_mac Thank you! @girlie_mac girliemac.com github.com/girliemac slideshare.net/tomomi BY-SA
  47. 47. @ girlie_mac Attribution: Open Emoji by Emoji-One (CC-BY 4.0)

×