Slide 1

Slide 1 text

APIドキュメントにまつわる 試行錯誤 2016/09/02 Gotanda.JS #5 @mizuki_r

Slide 2

Slide 2 text

@mizuki_r (株)モバイルファクトリー フロントエンドエンジニア JS, Perl Angular, Vue, Riot “HTMLは情報設計言語です!” 2

Slide 3

Slide 3 text

本日のお題 3

Slide 4

Slide 4 text

APIドキュメントにまつわる 試行錯誤

Slide 5

Slide 5 text

――を妄想している、 という話をします。

Slide 6

Slide 6 text

背景

Slide 7

Slide 7 text

最近の開発スタイル ʘUIϑΝʔετʗ ཁ݅ UI API ϞοΫ API αʔ ό ʔ ·ͣ͸UI ৘ใΛ੔ཧ͠ αʔόΛ ࡞Γ UIʹ൓ө͢Δ

Slide 8

Slide 8 text

最近の開発スタイル • ϑϩϯτerͰAPIϞοΫΛ࡞Δ • αʔόer͸ϞοΫΛݩʹAPIΛ࡞Δ ʘAPIϞοΫͱ͍͏ίϛϡχέʔγϣϯπʔϧʗ

Slide 9

Slide 9 text

ユーザに対して どういう価値を提供するか? を土台に作れる! (๑•̀Ŷ•́๑)✧

Slide 10

Slide 10 text

悩み

Slide 11

Slide 11 text

モックの例 (&5BQJVTFSVTFS@OBNF ݸਓ৘ใΛͱͬͯ͘Δ \ OBNFʠVTFS@OBNFʡ BHF ^ ʘJSON5ʗ

Slide 12

Slide 12 text

よくあること • APIϞοΫͱαʔόͷϨεϙϯε͕ζϨΔ • POSTͷϦΫΤετύϥϝʔλ͕Θ͔Βͳ͍ • Ωʔ͕ԿΛ͍ࣔͯ͠Δͷ͔Θ͔Βͳ͍ • ফ͑ͨ͸ͣͷ࢓༷͕ίϝϯτʹ࢒͍ͬͯΔ ʘυΩϡϝϯςʔγϣϯෆ଍ʂʗ

Slide 13

Slide 13 text

問題… • ࡞੒ऀʹ࢓༷Λ֬ೝ͢Δ • ίʔυΛಡΉ • ࣏͢… ʘ͜ɺίϛϡχέʔγϣϯπʔϧʂʗ

Slide 14

Slide 14 text

ツールで解決

Slide 15

Slide 15 text

API-Blueprint • MarkdownϕʔεͰυΩϡϝϯτΛهड़Ͱ͖ Δ • ύʔαʔΛఏڙ͠ɺ༷ʑͳ֦ு͕͋Δ

Slide 16

Slide 16 text

API-Blueprint • https://apiblueprint.org/ • MarkdownϕʔεͰυΩϡϝϯτΛهड़Ͱ͖ Δ • ύʔαʔΛఏڙ͠ɺ༷ʑͳ֦ு͕͋Δ

Slide 17

Slide 17 text

API-Blueprint

Slide 18

Slide 18 text

with Tools • aglio - HTMLʹυΩϡϝϯτΛ੔ܗ͢Δ • hariko - ϞοΫαʔόΛ্ཱͪ͛Δ

Slide 19

Slide 19 text

with Tools ཁ݅ UI API Blueprint API αʔ ό ʔ UIΛઃܭ ৘ใΛ੔ཧ αʔόͷߏங UIʹ൓ө API υΩϡϝϯτ API ϞοΫ ࣗಈੜ੒

Slide 20

Slide 20 text

解決できそう • ࢓༷Λ໌จԽͰ͖Δ • ॻ͍ͨ΋ͷ͕ͦͷ··ಈ࡞͢Δ • ٙ໰͕͋ͬͨΒ௥ه͢Ε͹͍͍ʂ ʘίϛϡχέʔγϣϯπʔϧʂʗ

Slide 21

Slide 21 text

でも…

Slide 22

Slide 22 text

問題は残る… • αʔόͱϞοΫͷ࣮૷ࠩ෼ • API-Blueprintͷ๲େͳ࢓༷ • ֶशίετɺϝϯςίετ ʘӡ༻͕ΊΜͲͦ͘͞͏ʗ

Slide 23

Slide 23 text

妄想 • ΋͏Ұ੠ཉ͍͠ • αʔόͱͷ࣮૷ࠩ෼Λิ׬Ͱ͖Δ • ֶशίετʹݟ߹͏ޮ཰Խ͕Ͱ͖Δ

Slide 24

Slide 24 text

あっ (゚∀゚)!

Slide 25

Slide 25 text

API-Blueprintのデータで Controllerくらいなら 作れんじゃね? (゚∀゚)!!

Slide 26

Slide 26 text

人類はどこまで 自動化できるのか〜?

Slide 27

Slide 27 text

API-Blueprintから取れるもの • ز͔ͭͷσʔλͷωετߏ଄ • category, resource, action,transaction,httpTransaction,httpRequest,ht tpResponse,etc…

Slide 28

Slide 28 text

Controllerが要求するもの • ϦΫΤετͷ൑அ • Method, URL, Parameters • ॲཧͷ൑அ • Modelͱ͔Serviceͷ໊લۭؒ • Ϩεϙϯεߏ଄ • HttpStatus, Body, Header

Slide 29

Slide 29 text

use Amon2::Lite; use JSON::Types; get '/api/user/:user_name' => sub { my ($c, $args) = @_; my $params = $c->req->parametes; my %args = map { $_ => $params->{$_} or $args->{$_} } qw(user_name); my $entity = $c->factory('User')->get(%args); return $c->render_json(+{ name => string($entity->name), age => number($entity->age), }); }; __PACKAGE__->to_app;

Slide 30

Slide 30 text

(SPVQ6TFS (&5BQJVTFS\VTFS@OBNF^ 1BSBNFUFST VTFS@OBNF TUSJOH ʜϢʔβͷࣝผࢠ 3FTQPOTF BQQMJDBUJPOKTPO #PEZ OBNF TUSJOH Ϣʔβͷࣝผࢠ BHF OVNCFS ೥ྸ #PEZ \ OBNFʠNJ[VLJʡ BHF ^

Slide 31

Slide 31 text

ͳΜ͔ɺ Πέͦ͏ͳؾ͕͢Δʜ

Slide 32

Slide 32 text

DEMO https://gist.github.com/rymizuki/ab99a288dfafa841983182eddc0408c9

Slide 33

Slide 33 text

まとめ

Slide 34

Slide 34 text

まとめ • API-Blueprint with aglio x hariko x ??? • API-BlueprintΛ༻͍ͨίʔυͷࣗಈੜ੒

Slide 35

Slide 35 text

所感 • υΩϡϝϯτͱϞοΫͱίʔυ͕࿈ಈ • ཧ࿦্࠷ڧ • ΍Ζ͏ͱࢥ͑͹ߦ͚Δ • Ͱ΋ͦͷ೤ྔʹνʔϜ͸͍ͭͯ͜ΕΔ͔…? • ߟྀ͢Δ͜ͱ͕૊߹ͤരൃͯ͠ࢮʹͦ͏…

Slide 36

Slide 36 text

やるなら 有効そう な無茶をしましょう!

Slide 37

Slide 37 text

ご清聴ありがとうございまし た