15
Slack の ののののののの ののの ( ののの )

Slackのおもちゃ

Embed Size (px)

Citation preview

Page 1: Slackのおもちゃ

Slack のおもちゃを作るお話を ( 五七五 )

Page 2: Slackのおもちゃ

だれ 瀧ヶ平 充 Twitter: @MysticDoll GitHub: MysticDoll MysticDoll を略してみすど 来年度で卒業したい学部 3 年 (3 回生 ) 自称美人大学生 右のはアイコン

Page 3: Slackのおもちゃ

チャットができる!すごい! 絵文字を自由に作って使える :ok_woman: =>

Slack

Page 4: Slackのおもちゃ

楽しい Slack 絵文字 最近入った最悪な Slack チームでの一例

Page 5: Slackのおもちゃ

絵文字アートを実現する技術 なんかいい感じに 128x128 で分割したのがあったりする 空白を :blank: で用意しているらしい 一応こんなこともできる とにかく地獄

Page 6: Slackのおもちゃ

これ作るの面倒じゃね?

職人芸は技術で何とかできる…はず

Page 7: Slackのおもちゃ

絵文字リスト拾うぞ

Slack の API を見ると Token だけでカスタム絵文字のリストが拾えるらしい ドキュメント : https://api.slack.com/methods/emoji.list https://slack.com/api/emoji.list?token=<token> カスタム絵文字とその URL とエイリアスが拾ってこれる エイリアスはパースするの面倒なので捨てる。 URL あるやつだけ使おう。 Fetch API でシュッ

Page 8: Slackのおもちゃ

実現するための技術 React.js すごそうな Facebook の ライブラリ VirtualDOM とか使ってて速い 個人的には Vue.js とかの方がすき 個人的には JSX シンタックスが気に食わない Vim で環境整えたら我慢できた 初めてだったのでデザインパターンとか知らん状態です

Page 9: Slackのおもちゃ

いい感じに環境を作る

WebPack 、そしてバベる JavaScript 最近は大体これ 今回無駄に Babel の Preset の ECMAScript2016 とか入れたけど使ってなかった

Page 10: Slackのおもちゃ

コード書いてビルド

https://github.com/MysticDoll/SlackPallete をみて テストするときは webpack-dev-server が便利です

Page 11: Slackのおもちゃ

デモ

http://mysticdoll.com/SlackPallete

Page 12: Slackのおもちゃ

ご提案

だるやなぎレールを Slack 絵文字に? 4 方向を向いた頭、胴体縦横、 T 時の胴体 4 種、十字の胴体でだるやなぎれーるを実現できるのでは? 空白の絵文字も忘れずに

Page 13: Slackのおもちゃ

宣伝

Page 14: Slackのおもちゃ

【 3/4 開催】 第 2 回 クソサイト開発バトル

こういうクソみたいなサイトを作ってワイワイする回です。 https://kusodevbattle.connpass.com/event/47887/ 私の Twitter の固定ツイートからもイベントページ見れるので是非 ドリコムさんのカフェスペースでやります。エンジニアスペシャリストの大仲さんも参加してくれます ( って言ってたはず ) ドリコムさんのビルとアマゾンの入ってるビルと間違えやすいので注意してください。

Page 15: Slackのおもちゃ

ありがとうございました