サイト内検索

2017/04/25(火)#Apitore WebAPIハンズオン Vol.2 @渋谷(前編)

Apitore.png

私が懇意にさせてもらってるコミュニティさんです。
実際、めっちゃ便利で使いやすいです。

本日の議題

対象者

  • APItore
  • WebAPIデベロッパー
  • WebAPI運用者
  • WebAPIで開発入門をしたい方
今日は太字枠の方にこそ入ってほしい。
WebAPIを作ろう、というのをプログラムベースで出来るハンズオン会は珍しいですよ!

本日の勉強会

Apitore WebAPIハンズオン Vol.2 @渋谷

本日のお話

やることってぶっちゃけ第一回と同じなんですよ。
分かってる人がほとんどだった事もあり、非常にすんなりと実現しました。
以下はその流れです。

詳細な内容は前回の記事があるのでそちらを見てもらえればと。
やってる内容は同じですが、別のサービスを活用しました、という例です。
Apitore WebAPIハンズオン Vol.1 @大手町 #apitore

APItore2_01.PNG


APItore2_02.PNG


APItore2_03.PNG


APItore2_04.PNG


APItore2_05.PNG


APItore2_06.PNG


APItore2_07.PNG


APItore2_08.PNG


APItore2_09.PNG


APItore2_10.PNG


APItore2_11.PNG


Apitore2_12.PNG


Apitore2_13.PNG


Apitore2_14.PNG


APItore2_15.PNG

本番は後編!

今度はプログラマーちっくな開発者向けハンズオンです。

が、私の環境でeclipseがツンツンして一向にデレる気配がなかったので、後からやってみましょう、というところでいったん落ち着かせました。
たぶん環境が大分汚染されてるんでレジストリ辺りから綺麗にしないとダメなんじゃないかな……
JDK辺りはどうにも苦手です。

(後編はまだ書いてますです……)

2017/04/22(土)次世代データAPIのGraphQLとJavaScript実装のApollo 勉強会(終了後に懇親会) 2017年大ブレイクのGraphQLについて勉強しよう #

graphQL.png

長めのLTをいっぱい、というお話でした。
とはいえ、結構レベル高かったです。graphQL(Apollo)の魅力はたくさん伝わりました。

WebAPIデベロッパーの野村屋ごろう(@official_nomura)です。
本日2つめの勉強会は渋谷からおとなり恵比寿のギークオフィスさん。
実はReact.jsの勉強会でお世話になったMeteorFanさん主催です。
しばらく離れていましたが、この度ご縁があって再びお世話になりました。

いつもの

一発書き、無編集です。

本日の議題

対象者

  • GraphQLとはなにか
  • Apolloとはなにか
  • WebAPIの開発で思うところがある
  • フロントエンジニア

勉強会ページ

次世代データAPIのGraphQLとJavaScript実装のApollo 勉強会(終了後に懇親会)2017年大ブレイクのGraphQLについて勉強しよう

イントロダクション

主催さん(@dai_shi氏)のお話
MeteorFanのお話

GraphQLとは

GraphQL | A query language for your API
Facebook製、RESTの問題点を解消するためのもの
Query Language(クエリ仕様)。言語に依存しない。

APOLLOとは

Tools & products for GraphQL | Apollo Data
クライアント指向・サーバー指向で分かれている?
Reactっぽいやつかな。
apollo-serverGraphql-serverとも。

「GraphQLで出来ることをより詳しく探る」@Teymmt

Node-Reactでやっている方

APOLLOとは

  • GraphQLを使うためのツール・スタック
  • Meteorの開発元(MDG)製
  • Meteor:JSのFW/Node+MongoDB+(Angular or React or Blaze...etc)
  • Publish / Subscribe
  • Obtaining data at local as 【mini-mongo】
mongoDBに依存している問題があり、これを解決するものである。

アーキテクト

バックエンド側のデータレイヤー側に対応
SQL/NoSQL/RESTの前段で処理する(QL)

目的

  • エンドポイントを1つに集約してしまおう!
  • フロントエンド側はバックエンドの変更に影響を受けずにクエリーを書ける

使い方

Query
{
  geek {
    name
    age
  }
}

>|?|

JSON
{
  geek {
    name: "request"
    age: "30"
  }
}

queryとJSONでvalueがあるかないかぐらいの差。

**デモ
スターウォーズAPIを叩いてみる
[filter:https://github.com/
[filter:graphql.org/swapi-graphql/]

引数をつけてみる
>|?|
query{
  film(id: "hoge==") {
    title
  }
  allFilms{
    edges{
      ...
    }
  }
}
プログラマブルにやらなくても、欲しい(引数で指定した内容に合致した)データだけ拾って返します。

この辺は直接さわってもらえれば分かるかなと。
デモを記事書きながら手元で実施しながら確認できるぐらい簡単です、ヤバい!
更に勉強したい!
ハンズオンの方がいいんじゃないかと思ったぐらい!
starwars-(server)APIをgithubからcloneすればすぐできる!

値の編集もJSON(扱う変数がenum型)で出来るのはいいですね!
[(filter unkown) dev.apollodata.com]
  • ドキュメント可視化
  • テスト
  • モック
でトータルの開発効率を上げる事ができる!(はず)

「GraphQLチュートリアル」@dai_shi

3/8にハンズオンでやった通り。
そして、上記発表とほとんど同じだということで大分端折ります。

環境構築

Node.js(v6)
npm install -- save express body-parser graphql graphql-tools graphql-server-express

type objectについて

スキーマを設定する前に定義しておくと、GraphQLで呼べる
type objectで設定するプロパティにオブジェクトを設定できる
(別途type objectを作成する)

非常に直感的!

他、ハンズオン形式でどうやって実習しているのか、Vanilla.jsでWebページを作るまで。
Slack見てね!

「データ変更情報を受け取るsubscriptionでできること」@SilkAndTikit

スライドがすごくGhaphQLフレンズだった!
すごーい たのしー

更新!変化情報をclientにpushする

  • live queries
  • subscriptions
  • その他

LiveQuery

query
{
...
  likeCount @live
...
}

SubScriptions

ドキュメントあるよ!
実演
Graphcoolで使ってみる。
Instagram風アプリ

Schema
type Post{
  id: ID!
  imageUrl: String!
  description: String!
}

subscription
subscription {
  Post {
    mutation 【変化。おまじない】
    node { 【変化後のデータ】
      id
      imageUrl
      description
    }
--追加
  previousValues { 【変化前のデータ】
    ...
  }
--
  }
}
Apollo + react(イメージ)
this.subscription = newProps.data.subscribeToMove(){
...
`,
variables: null,
updateQuery: (previousState, {subscriptionData} => {
  const newEntry = subscriptionData.data.Post.node;(おまじない)
  return xxx{
    ...
  }
}

デモ

Graphcool consoleとブラウザを使って同じデータ(最新の状態)を表示させる。

課題

  • サーバー側の実装・負荷
  • ネットワークコネクションが切断された時

「GraphQLとReact」@brn0227

Reactを使った時のGraphQLの話

GraphQLについて

  • フロントエンド主導でAPIの設計が出来る
  • 複雑化していくSPA設計に向いている

Reactである理由(復習)

  • Viewを宣言的に書ける
  • Viewと状態を切り離せる

フレームワーク選定

Relay
Facebook製
npm install react-relay --save
...
  todos:()=>Relay.QL `(query)`
}
あとはReactDOM.renderで描画をしてあげる

問題が!

  • Relay.QLはBABELで作られている。
  • Schema.json
→人間が作るものじゃない(自動生成を前提にしてる)
  • APIが複雑すぎ
  • Documentがないし、Exampleが複雑
  • Babel前提
  • Reduxとも組み合わせにくい
  • relay-modernがあるらしいけど疑問

決定!

react-apolloにします!
npm install react-apollo --save

諸々作ってあげる

  • Client
  • Component
  • graphql(Query)...
→ここで色々便利に渡せる。
  • App
この辺はReactっぽい。
Reduxを合わせるとインターフェース面の問題もあるが、出来なくはない。

設定

  • エンドポイント
  • クライアント
  • サーバーサイドレンダリング(Reactへの要求)

「GraphQL + Vue.js でアプリを作ってみた(仮)」@nobutakaoshiro

元々PHPerさん。
GraphQLとApolloの話はダブるので割愛

Early Access(githubで試せる環境。申請制)

[(filter unkown) https//developer.github.com/early-access]

Vue.js

UI構築のためのprogressiveJavaScriptフレームワーク
HTMLファイルに対してJavaScriptを書くようなイメージ。
サーバー側JavaScriptなどには干渉しない。良さそう!

実例・デモ

vue-apollo(React-apolloのVue.js版)
あとはReact-apolloとだいたい一緒
Ajaxでも出来るよ版
curl -s -XPOST -H 'Content-Type application/json' -d 'query{(GraphQL queries...)}' (EndPoint)
めっちゃ簡単。queryの後にmutationとすると編集もできる。
注意
express-graphqlとApollo:graphql-serverの違いがある。
前者はexpressのみ、後者はConnect,Hapo,Koa等でも使用できる
Chrome拡張機能「Apollo Client Developer Tools」がある

私も入れてみたけど、結構重いみたいですね。

GraphQLを理解するためのコツ

  • エンドポイントは1つ
  • POSTリクエストのみ
    • RESTではない
  • CQRS(コマンドクエリ責務分離)
  • レスポンススピードはqueryの遅いものに引きずられる
    • 早く欲しいものと遅いものを分ける

LT

idobataで学ぶGraphQL(@mtsmfm氏)

  • 西日暮里.rb主催さん
  • Electron
出来ちゃった
Idobata
あとで共有しますね。

hyperapp – 1kbのビューライブラリ

hyperapp – 1kbのビューライブラリ(Qiita)

主催にごあいさつ、すばらし!

LT聞いてみて、これとんでもなくすごい!
これ以上分かりやすくて使いやすいのはない!
今日一日、どころかJS知らない人でも技術者なら1日で300行ぐらい理解できるんじゃないか?
Exampleもあるので使ってみよう。

リフレクション・懇親会準備へ

2017/04/22(土)AI x WebAPI もくもく会 Vol.1 @渋谷 #apitore

Apitore.png

今日は珍しくもくもく会です。
が、もくもく会だけど有意義な意見交換会になったので考えていた楽しさとは違うものになりました。
もくもく会だから、と固定観念を持たずに参加していれば、これでアリですね!

WebAPIデベロッパーの野村屋ごろう(@official_nomura)です。
私のブログでは珍しく、勉強会というよりは自主学習のような場所です。
ここで大事なのは、人が学んでいる事を自分の馬力に出来ちゃうことですよね。
他人のレバレッジを利かせる、と私は言ってるんですが、共感してくれる方いますかねぇ?

いつもの

相変わらず一発書きの無編集です。

本日の議題

本日の対象者

  • WebAPI自体を学びたい人
  • WebAPIを使って何が出来るのか、勉強している人
    • (もくもく会なので、興味があるだけだと厳しいです)
  • WebAPI運用者
  • WebAPI開発者
  • APItoreのUserGroup

本日の勉強会

AI x WebAPI もくもく会 Vol.1 @渋谷

体系的なもくもく会でした

私のもくもく会のイメージは、同志がいい感じに集まってアレコレしたりする、という印象だったんですが、こちらはもくもくやるっちゃやるんですが、シェアがメイン。
ネットワーキングじゃないけど、つながりを意識したような形ですね。
参加者一人一人にフォーカスして、その方が何をやっているのか、という面をメインに捉えてお話されているような印象を受けました。

LT枠(登壇スピーカー)

自己紹介的なお話をちょいちょい挟みつつ。
先に言っておきますね。
今回はたまたま特殊なケースだった、という事です。

機械学習のためのツール選定・評価

公開できるスライドではないらしく、こちらでも控えます……

機械学習ツール自体の評価

APItore02.jpg

  • パフォーマンス
  • 結果精度
  • 最新アルゴリズム
  • 他社の学習データを使える
  • 流行り
    • 知見の共有
    • ノウハウの蓄積
    • 世間体

TensorFlowの話

そもそも機械学習というものについて、人間的・歴史的背景があって使えるんじゃないの?
→やりたいことが不明瞭。
多くの機械学習LTの登壇者が意図的に避けているように感じる。
出来たらどうなるの?という話をもっと交わされるべき。
実例:darknet
Daraknetに関する投稿:Qiita
機械学習を学ぶ手法
機械学習は画像検索(動画)で知るべき。
SlideShareとかSpeakerDeckの資料は色々とアレな面もある
→分かる。私も気をつけよう……
  • 日本語
  • 英語
のニュアンス

そもそも機械学習って何なの?

やっぱりここに戻ってきますよね~、という気がしてる。
それぐらい、機械学習って目的が不明瞭なまま手法だけ勉強している、という実態がある。

筆者注

恐らく、この分野は運用が明確に定義されない限り、あれもこれもそれも、というところに勉強をしていく時のコスト感が合わないなと思って手を付けようと思ってない分野です。
とはいえ、いずれは必要になる分野です。

機械学習で全部やらせる、という考え方は危険で、人がやらなければならない事をアシストする方法を考えるものがシステムであるべきでしょう。
機械学習を正しく理解していない人が機械学習を誤解して機械学習を進めている
これも私の主観ですが……
エンジニアの仕事を機械学習でやらせればよいとか、業務に合わせて機会がソースコードを自動生成すればいいとか、適当な事を言ってくれますね。
そういう人は得てして「誰がその評価をするんですか?」というところを語られないんですよね。そういうものだと知らないので。
まさか機械に機械の学習をさせる、と言うとは思ってないですけど、機械が設定した評価値を機械で評価させたら人間の考える業務とはかけ離れたところに行くでしょう!
評価ロジックを一定にしても同じです。その時はいいかも知れませんが……

エンジニアをなくす方向に進めると、競争力が低下します。
とても危険だと、私は思うんですがね……。

サンプルコードもブラウザで実行できる

超強力ですねコレ!
ブラウザでプログラミング・実行ができる「オンライン実行環境」| paiza.IO
オンラインでプログラミングして実行できるサイト

資料

[(access failed) https://speakerdeck.com/keigohtr/ai-x-webapi-mokumokuhui-vol-dot-1-intorodakusiyon]

参考

support vector machineを使うと機械学習(Deep Learning)より環境構築がしやすい(かも?)
SVMを使うとなにが嬉しいの?

学習の様子がGUIで見えるツール
A Neural Network Playground

機械学習入門はAnaconda(Python)かRから入るのが良いかなと。
色々な本がありますが、手引き書はこちらが良いそうです。(主催さん)


OK キャンセル 確認 その他