Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
busmap, design, and scripts
kotodu
October 25, 2020
Programming
0
95
busmap, design, and scripts
https://racda25-busmap-zoom.peatix.com/?lang=ja
kotodu
October 25, 2020
Tweet
Share
Other Decks in Programming
See All in Programming
Web Componentsを作れる デザインツールの開発
seanchas116
0
240
테라폼으로 ECR 관리하기 (How to Manage ECR with Terraform)
posquit0
0
530
Git操作編
smt7174
2
260
ESM移行は無理だけどおれもSindreのライブラリが使いたい!
sosukesuzuki
2
560
Git Rebase
bkuhlmann
7
1.1k
How to start contributing to Kubernetes Projects
ydfu
0
150
クラウド KMS の活用 / TOKYO BLOCKCHAIN TECH MEETUP 2022
odanado
PRO
0
200
YATA: collaborative documents and how to make them fast
horusiath
1
170
Atomic Design とテストの○○な話
takfjp
2
830
Amazon Lookout for Visionで 筆跡鑑定してみた
cmnakamurashogo
0
180
Untangling Coroutine Testing (Droidcon Berlin 2022)
zsmb
2
500
このタイミングで知っておきたい 開発生産性の高いエンジニア組織の特徴とは / dev-sumi-20220721-productivity-features
findyinc
7
2.7k
Featured
See All Featured
Designing for humans not robots
tammielis
242
24k
Atom: Resistance is Futile
akmur
255
21k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
100
6k
Building Your Own Lightsaber
phodgson
95
4.7k
Happy Clients
brianwarren
89
5.6k
Side Projects
sachag
450
37k
Visualization
eitanlees
125
12k
Faster Mobile Websites
deanohume
294
29k
Building Flexible Design Systems
yeseniaperezcruz
310
34k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
6
580
10 Git Anti Patterns You Should be Aware of
lemiorhan
638
53k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
980
Transcript
バスマップとデザインソフトとスクリプト 不破泰成 ( ことづ @kotodu ) RACDA25 周年記念 バスマップ zoom
会議 発表日 : 2020/10/25
「Illustrator スクリプト開発の苦労話」 「busmap.js の活用方法」 発表概要
不破泰成 ( ことづ ) ・システムエンジニア ( 見習い ) ・JavaScript /
TypeScript / Adobe Illustrator 他 ・Vue.js / React.js / Bootstrap 他 ・フロントエンド / スクリプト開発 ・大学時代にバスマップを制作 人の為に役立つものを はじめに - 自己紹介
・Illustrator でのバスマップ制作 ・バス系統図出力システムの試作 ・Web マップ × バスマップ ・Illustrator スクリプト開発 はじめに
- 取り組んできたこと
Illustrator-Line-Offset ・パスを指定数オフセットする ・半年前に制作したものを改良 ・内部構造の大幅修正 ・開発環境の刷新 はじめに - 直近の実績
busmap.js を活用して バスマップ制作を効率化したい!
・バスマップをプログラムで作成するシステム ・1つ前の発表の「豐多摩研究所」さん制作 ・バスマップの出力やその他有用な機能の提供 ・内部的には、複数の機能の集合体 busmap.js の活用 - busmap.js 概要
経路検索 路線図 デザイン設定 地図への描画 線のオフセット 線の結合 ネットからのデータ取得 停留所並べ替え 地理情報の変換 json
や geojson との変換 データ圧縮 / 展開 原子データ作成 shapes の調整 時刻表 ダイアグラム プログラム群 Web 画面 (busmap.js) busmap.js の活用 - 図解 ( 現在 )
部品 スクリプト 内部修正 Web アプリ 他システム busmap.js の活用 - 図解
( 理想 )
「車輪の再発明はやめて」 既に有用なものがあるのに、 それを使わずに最初から作るのは無駄である ( 画像は別件での discord キャプチャ ) ラクして良いものを作れる busmap.js
の活用 - メリット
busmap.js の部品を Illustrator へ活用したいが……
・高機能な月額制デザインソフト ・スクリプトによる機能のカスタマイズが可能 ・データの流し込みや単純作業の反復に強い ・ベクターデータや PDF データを扱いやすい Adobe Illustrator バスマップ制作に最適 立ちはだかるハードル
- Illustrator
スクリプト CEP 使用の拡張機能 スクリプト Illustrator との窓口 画面 (html,css,js...) 独自配布 /
公式マーケット提供 zxp スクリプトのみの提供 独自配布 jsx 実現できる機能が貧弱…… 立ちはだかるハードル - スクリプト提供の図解
・あまりにもレガシーな JavaScript ・テストやデバッグを行いにくい ・公式による情報が少なく、古く、全て英語 開発者泣かせの Illustrator 複雑な拡張機能の開発は非効率 立ちはだかるハードル - 複雑な開発手法
busmap.js の部品を活用すれば、 拡張機能開発はラクになる?
・コードが難解 ・コメントが乏しく、可読性が低い ・アルゴリズムの記載が乏しく、解読が困難 ・プログラムの分割が困難 ・部品の単体使用が全く想定されていない 立ちはだかるハードル - busmap.js の問題点
現状、busmap.js は活用しにくい
・線同士の結合アルゴリズムを使用 ・Illustrator-Path-Join( 開発中 ) ・Illustrator-Line-Offset ・busmap.js の活用は今後も行いたい おわりに - busmap.js
の小規模な活用例
おわりに •欲しいバスマップを利用者が自作、は理想の1つ? •GISをそのままバスマップに、は利用面で難しい? •ただし「ttrmap」は課題が非常に多い • レイヤーの絶対数、デザイン、機能、データ…… 利用面(+できれば制作面でも)で 、 WEBを活用したバスマップを •欲しいバスマップを利用者が自作、は理想の1つ?
おわりに - 昨年のスライドのおわりに
busmap.js は多方面へ活用可能 busmap.js の構造や難解なコードが、 活用への最大の難所 おわりに - まとめ
bootstrap icon in this slide : ©2020 bootstrap Welcome! ことづ
@kotodu https://kotodu.io ありがとうございました