busmap, design, and scripts

バスマップとデザインソフトとスクリプト不破泰成 ( ことづ @kotodu ) RACDA25 周年記念バスマップ zoom
会議発表日 : 2020/10/25

「Illustrator スクリプト開発の苦労話」「busmap.js の活用方法」発表概要

不破泰成 ( ことづ ) ・システムエンジニア ( 見習い ) ・JavaScript /
TypeScript / Adobe Illustrator 他・Vue.js / React.js / Bootstrap 他・フロントエンド / スクリプト開発・大学時代にバスマップを制作人の為に役立つものをはじめに - 自己紹介

・Illustrator でのバスマップ制作・バス系統図出力システムの試作・Web マップ × バスマップ・Illustrator スクリプト開発はじめに
- 取り組んできたこと

Illustrator-Line-Oﬀset ・パスを指定数オフセットする・半年前に制作したものを改良・内部構造の大幅修正・開発環境の刷新はじめに - 直近の実績

busmap.js を活用してバスマップ制作を効率化したい！

・バスマップをプログラムで作成するシステム・１つ前の発表の「豐多摩研究所」さん制作・バスマップの出力やその他有用な機能の提供・内部的には、複数の機能の集合体 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-Oﬀset ・busmap.js の活用は今後も行いたいおわりに - busmap.js
の小規模な活用例

おわりに •欲しいバスマップを利用者が自作、は理想の１つ？ •GISをそのままバスマップに、は利用面で難しい？ •ただし「ttrmap」は課題が非常に多い • レイヤーの絶対数、デザイン、機能、データ…… 利用面（＋できれば制作面でも）で、 WEBを活用したバスマップを •欲しいバスマップを利用者が自作、は理想の１つ？
おわりに - 昨年のスライドのおわりに

busmap.js は多方面へ活用可能 busmap.js の構造や難解なコードが、活用への最大の難所おわりに - まとめ

busmap, design, and scripts

busmap, design, and scripts

kotodu

Other Decks in Programming

Featured

Transcript

バスマップとデザインソフトとスクリプト不破泰成 ( ことづ @kotodu ) RACDA25 周年記念バスマップ zoom

「Illustrator スクリプト開発の苦労話」「busmap.js の活用方法」発表概要

不破泰成 ( ことづ ) ・システムエンジニア ( 見習い ) ・JavaScript /

・Illustrator でのバスマップ制作・バス系統図出力システムの試作・Web マップ × バスマップ・Illustrator スクリプト開発はじめに

Illustrator-Line-Oﬀset ・パスを指定数オフセットする・半年前に制作したものを改良・内部構造の大幅修正・開発環境の刷新はじめに - 直近の実績

busmap.js を活用してバスマップ制作を効率化したい！

・バスマップをプログラムで作成するシステム・１つ前の発表の「豐多摩研究所」さん制作・バスマップの出力やその他有用な機能の提供・内部的には、複数の機能の集合体 busmap.js の活用 - busmap.js 概要

経路検索路線図デザイン設定地図への描画線のオフセット線の結合ネットからのデータ取得停留所並べ替え地理情報の変換 json

部品スクリプト内部修正 Web アプリ他システム busmap.js の活用 - 図解

「車輪の再発明はやめて」既に有用なものがあるのに、それを使わずに最初から作るのは無駄である ( 画像は別件での discord キャプチャ ) ラクして良いものを作れる busmap.js

busmap.js の部品を Illustrator へ活用したいが……

スクリプト CEP 使用の拡張機能スクリプト Illustrator との窓口画面 (html,css,js...) 独自配布 /

・あまりにもレガシーな JavaScript ・テストやデバッグを行いにくい・公式による情報が少なく、古く、全て英語開発者泣かせの Illustrator 複雑な拡張機能の開発は非効率立ちはだかるハードル - 複雑な開発手法

busmap.js の部品を活用すれば、拡張機能開発はラクになる？

・コードが難解・コメントが乏しく、可読性が低い・アルゴリズムの記載が乏しく、解読が困難・プログラムの分割が困難・部品の単体使用が全く想定されていない立ちはだかるハードル - busmap.js の問題点

現状、busmap.js は活用しにくい

・線同士の結合アルゴリズムを使用・Illustrator-Path-Join( 開発中 ) ・Illustrator-Line-Oﬀset ・busmap.js の活用は今後も行いたいおわりに - busmap.js

busmap.js は多方面へ活用可能 busmap.js の構造や難解なコードが、活用への最大の難所おわりに - まとめ

bootstrap icon in this slide : ©2020 bootstrap Welcome! ことづ