Creative ContentFor BETTER DEVELOPER EXPERIENCE

Tomomi Imura (@girlie_mac)

日本語版！

@ girlie_mac

● Slack の DevRel チーム所属

● api.slack.com の中の人

● オープン web & テック アドボケイト

● JavaScript & Node.js コーダー

● くだらない Hack 大好き

● Code Chrysalis のアドバイザー

● サンフランシスコの住人

tomomi imura

@ 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

@ girlie_mac

I Write Articles on:

テクニカルエディターもしています

Awareness & Acquisition

開発者への

認識と獲得

検索Tweets や

ニュースレタークチコミ、

Slack など

API, Platform, Framework, Tools, etc.

How Do Developers Find Your...

@ girlie_mac

Awareness - どうやって開発者からの認識を得るか

開発者が新しい技術の情報を Tech Crunch や、その他のテックニュースから受動的に知った場合

ええ感じやん！

@ girlie_mac

Awareness & Acquisition - 認識から獲得に

開発者が新しい技術を実際のユースケースやチュートリアルで詳しく使い方を知った場合

ええ感じやん！ 使ってみよう〜！

@ girlie_mac

Get Devs Hands Dirty! - 開発者に試してもらう

● ワークショップ ● ハッカソン

● ブログ & チュートリアル○ Docs○ ビデオ & スクリーンキャスト

○ Webinars

@ girlie_mac

Get Devs Hands Dirty!

● ワークショップ ● ハッカソン

● ブログ & チュートリアル○ Docs○ ビデオ & スクリーンキャスト

○ Webinars My focus!

Make It Practical!

実践的に！

@ 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] ベストプラクティス

@ girlie_mac

@ girlie_mac

@ girlie_mac

Make It Interesting!

興味を引くように！

@ girlie_mac

Interesting Projects

クリエイティブな内容にしてみよう

● Slackbot ダンボールロボット

● D3.js で Twitter のビジュアリゼーション ● Raspberry Pi でスパイカメラを作る

● “Alexa, Call My Mom”● Pokémon Go リアルタイムマップ

@ girlie_macBrainstorming ideas

@ 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

@ girlie_mac

@ girlie_mac

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

@ girlie_mac

アイデアを提供してあとは開発者に任せよう

「ポケモン？こんなんで会社の API が金になると思ってんの！？」

「勘違いしないで。自分はアイデアを提供しているだけ。」

@ girlie_mac

アイデアから実際のビジネスへの採用

{

id: 'pikachu-012',

lat: 37.7234,

lon: -122.472

}

{

id: 'taxi-012',

lat: 37.7234,

lon: -122.472

}

Go Social

@ girlie_mac

Get Carded on Social Media

3

1

1

2

@ 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

@ girlie_mac

Developer-Focused Social Space

Newsletters

Code Samples & Demo

Adoption & RetentionImproving Developer Experiences

採用と維持

@ 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

“

@ 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

“

@ 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

“

@ girlie_machttps://twitter.com/wheelyweb/status/849969689388134400

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

@ girlie_machttps://twitter.com/ryo_sasaki/status/560229808362102784

7-Eleven の大失敗

かっこだけよくてユーザビリティがゼロ

@ girlie_mac

Bad UX: User Reactions

1. わかりにくいインターフェースに混乱

2. とりあえず適当に試して失敗

3. イライラ

4. 2 - 3 繰り返し

5. 超ムカつく

@ girlie_mac

Bad DX: Developer Reactions

1. わかりにくい Docs や API に混乱

2. とりあえず適当にコードを試して失敗

3. イライラ

4. 2 - 3 繰り返し

5. 超ムカつく

@ girlie_mac

Poor Docs & Tuts DX Examples

● ドキュメンテーションがひどい。と言うかそれすらない。

● 初心者に優しくない

● リンクがなかったりでナビゲートしづらい

● スクリーンショットや図がない

● とにかく難しい

● スーツ姿の偉そうなオッサンの写真素材がなんかイヤ

● 全部 PDF (Docs != Whitepaper)

@ girlie_mac

Open Source Survey by GitHub

http://opensourcesurvey.org/2017/

#1 problem!

@ girlie_mac

Docs & Tuts Should be

● ナビゲートしやすい ● 実践的かつ興味ふかい

● 初心者に親切 ○ “Hello, world” オンボーディング

○ 必須条件やセットアップの仕方が明確

○ ハンズオン・ステップバイステップで学べる

● コードサンプル

● 的確な情報でツールなどのDL先もわかりやすい

@ girlie_mac

User-Friendliness

https://twitter.com/kaz/status/757733261938298881

同じ内容なのに書き方が違うと、使ってみたさ感に違いが出てくるな

エラー。クライアントがこのリソースにアクセスするには認証が必要です。

このページを見るにはサインインをしてね。

@ girlie_mac

Developer-Friendliness

@ girlie_mac

Slack API Doc (Even More) Kawaii-fy Project (j/k!)

@ girlie_mac

TL;DR

● デベロッパーが使ってみたくなるように書こう○ わかりやすくて使いやすい docs やチュートリアル

● コンテントをシンジケート

● ソーシャルメディアの活用 ○ social media meta tags○ デベロッパー・フォーカスなメディアに

● dev experience を常に心がけてデベロッパーを引き込も

う

@ girlie_mac

Developer Experience Matters!really

@ girlie_mac

Thank you!

@girlie_mac

girliemac.com

github.com/girliemac

slideshare.net/tomomi

BY-SA

@ girlie_mac

Attribution:Open Emoji by Emoji-One (CC-BY 4.0)