Upgrade to Pro — share decks privately, control downloads, hide ads and more …

busmap, design, and scripts

kotodu
October 25, 2020

busmap, design, and scripts

kotodu

October 25, 2020
Tweet

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  8. 経路検索
    路線図
    デザイン設定
    地図への描画
    線のオフセット
    線の結合
    ネットからのデータ取得
    停留所並べ替え
    地理情報の変換
    json や geojson との変換
    データ圧縮 / 展開
    原子データ作成
    shapes の調整
    時刻表
    ダイアグラム
    プログラム群
    Web 画面 (busmap.js)
    busmap.js の活用 - 図解 ( 現在 )

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  12. ・高機能な月額制デザインソフト
    ・スクリプトによる機能のカスタマイズが可能
    ・データの流し込みや単純作業の反復に強い
    ・ベクターデータや PDF データを扱いやすい
    Adobe Illustrator
    バスマップ制作に最適
    立ちはだかるハードル - Illustrator

    View Slide

  13. スクリプト
    CEP 使用の拡張機能
    スクリプト
    Illustrator との窓口
    画面 (html,css,js...)
    独自配布 / 公式マーケット提供
    zxp
    スクリプトのみの提供
    独自配布
    jsx
    実現できる機能が貧弱……
    立ちはだかるハードル - スクリプト提供の図解

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  21. bootstrap icon in this slide : ©2020 bootstrap
    Welcome!
    ことづ @kotodu
    https://kotodu.io
    ありがとうございました

    View Slide