複雑GUI本-20191116
2019/11/16 20:00
技術書典8について
日時 2020年2月29日(土) 11:00〜17:00 & 3月1日(日) 11:00〜17:00
場所 池袋サンシャインシティ 展示ホールD (文化会館ビル2F)
TODO:
申し込みhashrock.icon
GitLabのリポジトリ作るhashrock.icon
privateのscrapbox作るhashrock.icon - DONE
書名のアイデア出し(全体)
議題
内容をどうするか
複雑GUIとはなにか的な話
厳密に定義すれば、ブラウザ上での複雑なGUI
よく使われるGUIだが、ライブラリ使わずに実装すると複雑
複雑な世界に一歩踏み出すための本
沼だ subal.icon
バウンディングボックスたちが沼に手招きする subal.icon
複雑GUIを使うことでのメリット
どういうときに作りたくなるか
ライブラリの限界
コンポーネントライブラリは特に
コアの体験は自作したい
コア体験のレベルがすごく高いものを作ると必要になるんやで!!subal.icon
この本は誰向けなのか
コア体験で差別化したいプロダクトを作ってるが、その実装に困っているフロントエンドエンジニア
フォームで済まないようなレベルの何か
フロントエンド寄りのデザイナー
管理画面作っていて、ステート管理ばっちりで、飽きてきた人(次の沼へ)
input タグに飽きてきた人
input typeは現在22個
GUIとはユーザーを便利にするもの。なにも標準要素が無かったFlash時代や、input type="range"が無かった時代にはこういうものを自作していた。なぜなら入力が便利になるから
現状の標準inputでも多くのことが実現できるが、新しいUIを模索して実装できるようになると新たな利便性を提供できる
バウンディングボックスが必要
input type="boundingbox"
クリエイティブ関連のツールを作りたい人
Flash時代には作れていたものが現代だと作りづらい
「結構居ますね。話してるとよく言うんですよ。実は元Flasherで…みたいなこと。隠れキリシタンみたいに。」
https://gyazo.com/d96938142633e2553a75ee800f447114
ナビゲーションUIが逃げる。斬新!(2000年当時)
予定している内容
よく見るGUIをSVG + DIVでフルスクラッチしてみよう hashrock.icon
入門的な内容になる予定
いかにネイティブGUIの挙動に似せるか
DnD の基本
移動・拡大・回転
.oO(数式出てくる気がしてきた)
基本:四角形を動かしてみる
応用編で文字レイヤーのドラッグ
ふつうの画像/図形レイヤーと比較してリサイズとかの実装で難しいところ
(Web フォントまわり)
時刻データを扱うGUIについて daiiz.icon
試行錯誤しているものをドバっと放出したい
Nodeツリー要素のDnD miyaoka.icon
1次元、2次元、3次元のDnD
兄弟、親子、親子の兄弟へドロップ
STUDIOを支える技術
ズーミング平面
ピクセルへの挑戦
パフォーマンス
STUDIO Code
STUDIO Codeの説明
書名
駆け出しデザイナーが複雑GUIの部署に異動しました
グイグイ作ろうGUI本
Re:ゼロから始めるGUIコンポーネント自作生活
自作をおしていくのいいですね daiiz.icon
Canvasしか無い世界に転生したのでGUI自給自足生活はじめました
バウンディングボックスへの招待
おいでよ複雑GUIの森(仮)
ブラウザの限界に挑む
一歩進んだブラウザでの〇〇
GUIコンポーネント自作生活
1月中旬に書名を決めます
入稿先
早割10%を狙っていく
楽そうなのでpixiv factory経由で申し込んでみたいhashrock.icon
ただ、ねこのしっぽのfactory向けプランは png/psd のみの可能性があったかも subal.icon
すばるさんの言う通りみたいなので、今回は直接申し込みを想定
ちびねこCかな?
100部くらい作る
hashrock 8p + daiiz 8p + subal 6p + miyaoka xp = (22 + x)p + 表紙4p + 目次 + まえがき + あとがき + リンク集 + 奥付 = 32p ~36p くらい目安?
50p ~ 100p
スケジュール
2019/11中 申し込み
一日目(土曜)で申し込み
2019/12/15 (日) 当落
2019/12/22 (日) 出展料入金締め切り
2020/01 執筆メンバーの有志で進捗会議
2020/02/01 原稿締め切り予定
どこで下書きするか?
Notion
Scrapbox
プライベートプロジェクトをつくる
構成検討やメンバーの進捗を覗く用途で使ってみる
リポジトリ
denobook踏襲ならgitlab
hashrock.iconが作っておきます
表紙
できればmiyaokaさんかsubalさんお願いします(hashrock.iconはdenobookがありそうなため)
subalさん
サークル応募について
これに伴い、サークル応募時の選択肢に どちらか片日、1日目(土)、2日目(日)、両日 があります。
土曜に決定
タグ
Web
フロントエンド
JavaScript
SVG
UIデザイン
サークルカット下書き
執筆
個々に書いたRe:VIEWドキュメントを結合できる。いい感じに目次が作られる。完璧だ。 Re:VIEW は電子書籍向けにハイパーリンクが生成されるが、印刷所向けにはリンクを剥がすと良い