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

1. Creative Content
For BETTER DEVELOPER EXPERIENCE
Tomomi Imura (@girlie_mac)
日本語版！

2. @ girlie_mac
● Slack の DevRel チーム所属
● api.slack.com の中の人
● オープン web & テック アドボケイト
● JavaScript & Node.js コーダー
● くだらない Hack 大好き
● Code Chrysalis のアドバイザー
● サンフランシスコの住人
tomomi imura

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. @ girlie_mac
I Write Articles on:
テクニカルエディターもしています

5. Awareness & Acquisition
開発者への
認識と獲得

6. 検索
Tweets や
ニュースレター
クチコミ、
Slack など
API, Platform, Framework, Tools, etc.
How Do Developers Find Your...

7. @ girlie_mac
Awareness - どうやって開発者からの認識を得るか
開発者が新しい技術の情報を Tech Crunch や、その他の
テックニュースから受動的に知った場合
ええ感じやん！

8. @ girlie_mac
Awareness & Acquisition - 認識から獲得に
開発者が新しい技術を実際のユースケースや
チュートリアルで詳しく使い方を知った場合
ええ感じやん！ 使ってみよう〜！

9. @ girlie_mac
Get Devs Hands Dirty! - 開発者に試してもらう
● ワークショップ
● ハッカソン
● ブログ & チュートリアル
○ Docs
○ ビデオ & スクリーンキャスト
○ Webinars

10. @ girlie_mac
Get Devs Hands Dirty!
● ワークショップ
● ハッカソン
● ブログ & チュートリアル
○ Docs
○ ビデオ & スクリーンキャスト
○ Webinars My focus!

11. Make It Practical!
実践的に！

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. @ girlie_mac

14. @ girlie_mac

15. @ girlie_mac

16. Make It Interesting!
興味を引くように！

17. @ girlie_mac
Interesting Projects
クリエイティブな内容にしてみよう
● Slackbot ダンボールロボット
● D3.js で Twitter のビジュアリゼーション
● Raspberry Pi でスパイカメラを作る
● “Alexa, Call My Mom”
● Pokémon Go リアルタイムマップ

18. @ girlie_mac
Brainstorming ideas

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. @ girlie_mac

21. @ girlie_mac

22. @ girlie_mac
https://medium.com/slack-developer-blog/building-a-sentiment-analysis-
bot-with-ibm-watson-and-raspberry-pi-eeb399bb8803

23. @ girlie_mac
アイデアを提供してあとは開発者に任せよう
「ポケモン？こんなんで会社の API が金になると
思ってんの！？」
「勘違いしないで。自分はアイデアを提
供しているだけ。」

24. @ girlie_mac
アイデアから実際のビジネスへの採用
{
id: 'pikachu-012',
lat: 37.7234,
lon: -122.472
}
{
id: 'taxi-012',
lat: 37.7234,
lon: -122.472
}

25. Go Social

26. @ girlie_mac
Get Carded on Social Media
3
1
1
2

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. @ girlie_mac
Developer-Focused Social Space
Newsletters
Code Samples & Demo

29. Adoption & Retention
Improving Developer Experiences
採用と維持

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. @ 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. @ 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. @ girlie_macs://twitter.com/wheelyweb/status/849969689388134400

34. @ girlie_macBy Jared Spool https://flic.kr/p/5ckBZq CC-BY-SA

35. @ girlie_mac
https://twitter.com/ryo_sasaki/status/560229808362102784
7-Eleven の大失敗
かっこだけよくて
ユーザビリティがゼロ

36. @ girlie_mac
Bad UX: User Reactions
1. わかりにくいインターフェースに混乱
2. とりあえず適当に試して失敗
3. イライラ
4. 2 - 3 繰り返し
5. 超ムカつく

37. @ girlie_mac
Bad DX: Developer Reactions
1. わかりにくい Docs や API に混乱
2. とりあえず適当にコードを試して失敗
3. イライラ
4. 2 - 3 繰り返し
5. 超ムカつく

38. @ girlie_mac
Poor Docs & Tuts DX Examples
● ドキュメンテーションがひどい。と言うかそれすらない。
● 初心者に優しくない
● リンクがなかったりでナビゲートしづらい
● スクリーンショットや図がない
● とにかく難しい
● スーツ姿の偉そうなオッサンの写真素材がなんかイヤ
● 全部 PDF (Docs != Whitepaper)

39. @ girlie_mac
Open Source Survey by GitHub
http://opensourcesurvey.org/2017/
#1 problem!

40. @ girlie_mac
Docs & Tuts Should be
● ナビゲートしやすい
● 実践的かつ興味ふかい
● 初心者に親切
○ “Hello, world” オンボーディング
○ 必須条件やセットアップの仕方が明確。
● コードサンプル
● 的確な情報でツールなどのDL先もわかりやすい

41. @ girlie_mac
User-Friendliness
https://twitter.com/kaz/status/757733261938298881
同じ内容なのに書き方が違う
と、使ってみたさ感に違いが出
てくるな
エラー。クライアントがこのリ
ソースにアクセスするには認証
が必要です。
このページを見るには
サインインをしてね。

42. @ girlie_mac
Developer-Friendliness

43. @ girlie_mac
Slack API Doc (Even More) Kawaii-fy Project (j/k!)

44. @ girlie_mac
TL;DR
● デベロッパーが使ってみたくなるように書こう
○ わかりやすくて使いやすい docs やチュートリアル
● コンテントをシンジケート
● ソーシャルメディアの活用
○ social media meta tags
○ デベロッパー・フォーカスなメディアに
● dev experience を常に心がけてデベロッパーを引き込も
う

45. @ girlie_mac
Developer Experience Matters!
really

46. @ girlie_mac
Thank you!
@girlie_mac
girliemac.com
github.com/girliemac
slideshare.net/tomomi
BY-SA

47. @ girlie_mac
Attribution:
Open Emoji by Emoji-One (CC-BY 4.0)