Shinjuku.LT#20に行ってきた

# Shinjuku.LTにいってきた
[Shinjuku.LT](http://www.shinjukult.tk/#/aboutus) に行ってきた
スライド、追加情報は随時追加していきます。

## Shinjuku.LT とは
Shinjuku.LTは世界で一番LTのハードルが低い勉強会を目的に開催している勉強会です。
https://speakerdeck.com/to4iki/shinjyuku-dot-lt

### アメニティ
* 今回は20回記念だったのでハンドタオルが配られた

# [デザインに関して(仮)](https://speakerdeck.com/to4iki/proposal-on-desing-from-engineers) @to4iki 

<img src="https://qiita-image-store.s3.amazonaws.com/0/103247/e15ce538-5d7d-ea0d-ca2b-611170782e69.png" alt="Drawing" width=60%/>

* [スライド](https://speakerdeck.com/to4iki/proposal-on-desing-from-engineers)丁寧なんでこちら見てもらったほうが早いかも

## デザイン
* デザインとは？
  * de-sign: 抽象(sign)を否定(de)すること、複雑な物事をはっきりさせること
  * 広義のデザイン：問題(目的)を達成するために設計すること
  * 狭義のデザイン：設計に基づき、具体的なカタチをつくること
* => **プロダクトの問題領域の解決 + プロダクトの見た目（UI/UX）の解決**
* 今回は狭義（見た目）の話

## デザインの実現方法
* ラフ、下書き < 厳密な定義 の順で以下がある
  * sketch < wireframe < mockup < prototype

## 手法別ツール紹介
* sketch
  * 手書き
  * 紙にとりあえず画面イメージを書く
* wireframe
  * [cacoo](https://cacoo.com/ja/)
  * パワポ
  * [draw.io](https://www.draw.io/) でもいいのかなって気がした
* mockup
  * イラレ
  * フォトショ
  * [sketch](https://sketchapp.com/)
* prototype
  * [prott](https://prottapp.com/ja/)
  * [inVision](https://www.invisionapp.com/home)
  * [Origami Studio](https://origami.design/)
  * [flinto](https://www.flinto.com/)
  * [ProtoPie](https://www.protopie.io/)
  * sketchもプロトタイプ機能できたって聞いた

## 実運用(一例)
1. モックアップツールから素材を書き出す
1. 指示書([zeplin](https://zeplin.io/)) を見て余白、色を調整
1. prottoで遷移、アニメーションを実装

## 使ってるツールの紹介
* sketch
  * 100% vector
  * 画像の書き出しが楽(x2, x3)
* zeplin
  * デザイン指示書（ビジュアル仕様書共有ツール)
  * 要素間のマージン値等を把握できる
  * sketchからデータを抽出してくれる
* sketch + zeplin の辛いケース
  * 変化が分かりづらい
  * 任意の時点のレイアウトを見たい際にさかのぼって探すのが大変

#### => **デザインの履歴（差分）を簡単に把握したい**

## そこで[Abstract](https://www.goabstract.com/)
* sketchファイルのversion管理ツール
* diffをuiで確認できる
* デザイナ向けのgit的な
* オーバーレイによる差分確認が最高にクールだった
* まだベータ版

## 嬉しい効果
* デザインデータが１つですむ
* 誰が作業したかわかる

## 考えないといけない点
* 開発者サイドとブランチ粒度を同期できるのか？

## まとめ
* sketh + zeplin は業界標準ぽい
  * でも差分確認が辛い
* => abstractだ！

## 宣伝枠
* [WEB+DB](https://twitter.com/to4iki/status/983652091708108802)書いたよー！
* [builderscon 2018](https://builderscon.io/tokyo/2018)やるよー！

# [INTRODUCTION TO BRAVE](https://blog.mnuma.com/) @mnuma 

<img src="https://qiita-image-store.s3.amazonaws.com/0/103247/ef563b2a-9cc6-e2e1-d3ab-f59360434a50.png" alt="Drawing" width=60%/>

* [ブログ](https://blog.mnuma.com/)を見ながらの斬新なLTだった
* ちょっと未来感ありすぎたのでリンクも見てほしい

## web3.0時代のwebブラウザ Brave
* web2.0
  * オライリーいわく,ツールの進化
  * 不特定多数の人を積極的に巻き込む云々
  * ブログとかいっぱいできたよね
* web3.0
  * delete facebook を代表するセキュリティに対するムーブメント
  * 中央集権的にデータを集積していくのってどうなの？

## Brave Browserについて
* 広告ブロックがデフォルトでついてる
* 仮想通貨のウォレットがついてる

## 感想
* 要約するとweb見るのにお金がかかる世界にするためのブラウザ、という印象だった。
  * 未来感強い
  * ダイヤルアップかよ
* まだまだ実験的なコンセプトではあるらしい
* 最近有料コンテンツ増えてきたからそのあたりから考え方的なのが普及するのかな〜って話も出てた
* 広告みたいな無駄な情報を省いて製作者に直接課金できるような世界
* あとはセキュリティ的に安心？

## 参考URL
* https://medium.com/@matteozago/why-the-web-3-0-matters-and-you-should-know-about-it-a5851d63c949
* http://www.glocom.ac.jp/column/2006/07/18adoc.html
* https://dapps.tokyo/why-the-web-3-0-matters-and-you-should-know-about-it/


# sketchに代わるツールを触ってみた件 [@dende6231](https://twitter.com/dende6231)

<img src="https://qiita-image-store.s3.amazonaws.com/0/103247/3fa1d8dc-b4d0-afd8-93ba-ae9709220223.png" alt="Drawing" width=60%/>

## UIのデザインツールについて
* photoshop
* illustrator
* sketch
* [Adobe XD](https://www.adobe.com/jp/products/xd.html)
* **[figma](https://www.figma.com/)**
* [Framer](https://framer.com/)
* [inVision studio](https://www.invisionapp.com/studio)
* [STUDIO](https://studio.design/ja)

## figmaを試した
* 使い方はsketchに似てるかも
  * ショートカットキーとか
* ブラウザで使える
* 複数人で同時作業ができる
* レスポンシブ対応設定ができる

## 価格
* figma
  * 無料版: 3プロジェクト、履歴保存30日
  * 有償版: $12/月
* sketch
  * 初期費用: $99
  * 更新料: $60
* Adobe XD: 1,180円/月

## できること
* コンポーネント
* プロトタイプ
* コードの書き出し
  * css, iOS, Androidのコード書き出しが可能、すごい感あった
* コメント機能

## 始める前に
* デフォルトでgoogle fontが入ってる
* 日本語フォントに対応させる必要がある

## まとめ
* ブラウザで使える！
* 共有が楽！
* 無料で十分な機能
* ディレクター、マーケターにもおすすめ

# ブロックチェーンとは @ftsan

<img src="https://qiita-image-store.s3.amazonaws.com/0/103247/aa37b692-365d-754a-1bc3-f434eb2b6f47.png" alt="Drawing" width=60%/>

## ざっくりいうと
* 仮想通貨の基盤技術
* 開始からの全取引履歴が保存されているデータベース

## 特徴
* 通常のクライアント・サーバーシステムの場合、サーバー管理者がデータを管理する
* 一方、ブロックチェーンは複数のサーバーによって分散して管理される
  * データが失われにくい
  * 中央集権的ではない
  * データの改竄が困難
  * 安全性が高い

## 用語
* トランザクション
  * 1回の取引の記録
* ブロック
  * 一定期間内のトランザクションの塊
  * ビットコインだと10分に1回発行される

## 送金時の処理について
* 取引内容を暗号化
* p2pネットワークに送信
* 妥当性の検証
* 問題なければブロックに追加

## データ構造について
* ブロックには以下の値が含まれる
  * ブロックの計算結果
  * ノンス

## 正当性を確認
**間違った情報を書き込んだ場合どうなる？**

* プルーフ・オブ・ワーク(PoW)
* みんなでハッシュ値を計算
* 調整用の文字列(ノンス)を探す
  * このとき特定の文字列のパターンになるやつが正解
  * 過半数の承認が取れたらブロックに追加できる
  * 最初に正解を出した人に報酬がある
  * この流れが俗に言うマイニング

## 改竄は難しい?
* 51%攻撃
  * ノードの計算量の51%を掌握してたら常に計算を承認させることが可能
  * ビットコインとかだと実質不可能に近い
* 51%攻撃を受けたことがバレると通貨自体の価値が下がるので骨折り損になる
  * だからやるだけ無駄感？


# what is kubernetes @HomMarkHunt 

<img src="https://qiita-image-store.s3.amazonaws.com/0/103247/c908e166-0dc9-1a56-b41c-75e09be5e173.png" alt="Drawing" width=60%/>

* 今の所理解できたkubernetesのまとめ

## 概要
* Googleが開発したコンテナオーケストレーションツール
* コンテナオーケストレーションツールってなんだよ
  * コンテナをなんかいい感じにやるやつだよ、位の認識で
* サポート
  * gcp
  * azure
  * aws(beta)

**kubernetersて何？ : コンテナオーケストレーションだよー（コンテナなんかいい感じにやるやつ）**

## コンテナオーケストレーション
* docker便利
  * コンテナいっぱい
    * コンテナごとの管理が辛い
      * コンテナのスケールは？
      * 死活監視とか？
* あー誰か一括で管理してくれないかなー
    * コンテナオーケストレーション
        * **[kubernetes](https://kubernetes.io/)**
        * [Docker Swarm](https://docs.docker.com/engine/swarm/)
        * [Marathon](http://mesosphere.github.io/marathon/)
        * [Nomad](https://www.nomadproject.io/)

## 使い方
1. yaml書く
1. 適用する
1. 完了
1. 死活監視とかバランシングとか勝手に見てくれる

## まとめ
**何が無駄で何が大切かやっぱこれが真の解決策**

* なんでもかんでもkubernetesって感じではない
* アプリをコンテナで云々しているなら一考してもいいんじゃないかな

# 'Q'.csvをいい感じに見たいときのお供 @8140i2865_3 

<img src="https://qiita-image-store.s3.amazonaws.com/0/103247/9ddaaea0-c0dd-a9f4-aff7-f774152c9bb6.png" alt="Drawing" width=60%/>

## そこそこのサイズのcsvを開いたり結合したりするのがつらかった
* [qコマンド](http://harelba.github.io/q/index.html)を入れよう
* sql的にcsvを検索できるよ
  * join, groupByとかもできる
  * ちょっと便利


# [SwitchBotがあればあなたの家電もIOTに](https://www.switch-bot.com/) [@maruyamahiakru](https://twitter.com/maruyamahiakru)

<img src="https://qiita-image-store.s3.amazonaws.com/0/103247/abbda137-31d2-3033-82af-968129d29267.png" alt="Drawing" width=60%/>

* [switchBot](https://www.switch-bot.com/)
* slack + ifttt + switchbot
  * ノンコーディングで作れる
* 簡単に作れる
  * スマート家電買うならSwitchBotで実装もありかも
  * switchbotもそこそこするので注意

## ブログ
* https://blog.val.co.jp/2018/05/iot.html