超高速！実践MaaSアプリ開発講座
•
2 likes•1,253 views
2019年6月22日に国交省若手有志と開催した「ファイルからデータへ：国土交通IT実践ワークショップ」における実習の資料です。
Recommended
More Related Content
What's hot
What's hot (20)
Similar to 超高速！実践MaaSアプリ開発講座
Similar to 超高速！実践MaaSアプリ開発講座 (20)
More from Masaki Ito
More from Masaki Ito (20)
Recently uploaded
Recently uploaded (9)
超高速！実践MaaSアプリ開発講座
- 2. 伊藤 昌毅 (Twitter @niyalist) • 東京大学 生産技術研究所 特任講師 – ユビキタスコンピューティング – 地理情報システム技術 – ヒューマン・コンピュータ・インタラクション • 経歴 – 静岡県掛川市出身 – 2008-2010 慶應義塾大学大学院 政策・メディア研究科 特別研究助教 – 2010-2013 鳥取大学 大学院工学研究科 助教 – 2013-2019 東京大学 生産技術研究所 助教 – 2019- 現職 • 委員など – くらしの足をみんなで考える全国フォーラム 実行委員 – 国土交通省 バス情報の効率的な収集・共有に向けた検討会 座長 – 国土交通省 公共交通分野におけるオープンデータ推進に関 する検討会 委員 – 経済産業省 官民データの相互運用性実現に向けた検討会 座長
- 3. • 標準フォーマット関連 – バス情報の効率的な収集・共有に向けた検討会 座長(H28年度) – 標準的なバス情報フォーマット利活用検討会 座長(H29年度) – バス情報の静的・動的データ利活用検討会 座長（H30年度） • オープンデータ関連 – 公共交通分野におけるオープンデータ推進に関する検討会 委員（H29年度-R1年度） • MaaS関連 – 都市と地方における新たなモビリティサービスのあり方懇談会 委員（H30年度） – 新モビリティサービス推進事業有識者委員会 委員（R1年度） 伊藤×国土交通省
- 4. • オープンデータ関連 – 官民データの相互運用性実現に向けた検討会 座長(H29年度) – 情報共有基盤 利用促進ワーキンググループ 委員（H30年度） 伊藤×経済産業省
- 5. • 沖縄観光2次交通の利便性向上に向けた検討委員会 座長（H30 年度-R1年度） • 群馬県バスロケーションシステム実証実験 アドバイザー（R1 年度） • その他自治体主催のイベントでの講演多数 – 静岡県掛川市、石川県能美市、群馬県、島根県安来市、沖縄県、富山県、岐阜県 など 伊藤×地方自治体
- 6. • 最先端のIT開発で使われるツールや考え方などをなるべく沢山 体験し、そこにオープンデータ、データ連携、APIなどがどの ように関わっているかの理解を深めます • プログラミングなど、時間を掛けて学ぶ部分にはあまり踏み込 まず、全体を体験することを重視します • 利用するツールは実際のアプリやWeb開発で使われているもの そのものです 今日の目的「最先端IT技術の体験」
- 7. • モダンWeb基礎 – 自分のPCでWebサーバを動かす – 他人のPCにアクセスしてみる – APIサーバの構築とアクセス • Git基礎 – Gitを利用したコラボレーション • クラウド基礎 – Amazon AWSとは – PaaSを使ってみる • オープンデータ利用基礎 アウトライン
- 8. モダンWeb基礎
- 9. • Node.js: Webサーバ+JavaScriptの実行環境 • Express: Web開発を容易にするフレームワーク – 共通に使われる機能を提供 – プログラムの書き方を規定し知識やソースコードの流用を支援 • コマンドプロンプトを使用 – Mac: アプリケーション→ユーティリティ→ターミナル – Windows: コマンドプロンプト または Windows Power Shell Node.js + Expressを用いてWebサーバを立てよう
- 12. Visual Studio Code でフォルダごと開く
- 15. • 自分のIPアドレスを確認 – Windowsなら ipconfig コマンド – http://自分のIPアドレス:3000 でアクセスできることを確認 • 他の受講生にIPアドレスを知らせよう • 教室内のPCそれぞれがWebサーバとして機能し、それぞれに 接続できる状態はまさに「小さなインターネット」と言える 他のWebサーバにアクセスしよう
- 16. • public に置いたファイルはブラウザでどのように見えるか？ • 画像は？ZIPファイルは？ JSファイルは？ • Webサーバの基本的な仕組みとして、サーバに配置されたファ イルを、そのままの構造、内容で配信していることを確認 • Webブラウザがファイルを受け取り、うまく表示している 中の仕組みを丁寧に確認しよう: 静的ページ編
- 17. • index.ejs とブラウザでの見え方の違いは？ • Webサーバにおいてプログラムが動作し、その結果でWebペー ジが作られていることを確認 • 現在の多くのWebページはそのように作られる – パーソナライズ、広告配信、リアルタイム情報 • Webブラウザにとっては、動的ページも静的ページも区別が付 かない点も重要 中の仕組みを丁寧に確認しよう: 動的ページ編
- 20. • 入力に対して処理するためのデータは、普通はプログラムの中 には書き切れない • 入力内容をキーワードとしてデータベースを検索し、その結果 を利用してWebページを出力するように構成するのが一般的 利用者からの入力に応じてデータベースを検索しよう 利用者向けの画面 や操作性を提供 httpプロトコルでの要求に 対応したデータを作成して提 供 データを格納 データベース Webサーバ(node.js) Webブラウザ リクエストに基づき適切に応答する プログラムを開発する（JavaScript） URLでサーバを指定し接 続、パラメータを渡す htmlや画像などのデータ を得る SQL（問い合わせ言語） でデータを要求 要求された条件に合った データを返す
- 21. • これまでのところでは、「利用者の名前」をアクセスする度に サーバに伝えていた • 世の中にあるWebサービスでは、ログインは1回だけ、または 一度もログインしなくても、パーソナライズされたページが出 てくることが多い • Webブラウザには、 cookie という、一度送信した値を覚え、 次回からも見えないところで送信する仕組みがある 一度のログインで「自分向け」の動的ページが 出続けるようにしよう
- 22. • このプログラムいわば未来予測 • AIやビッグデータを用いるとは、 このロジックを重厚にすること – 雑な言い方ですが･･･ – 今回はその方法には踏み込みません • 乱数でもAIでも「未来予測」とい う形式は変わらないことが大事 – 「インタフェース」という考え方 AI・ビックデータ･･･
- 26. • JSON: キーワードと値という構造を持ったテキストファイル – 実はJavaScriptのプログラムそのもの – 配列なども表現可能 • 機械可読性が高い（プログラムから読み込みやすい） ブラウザでアクセス→JSONを取得 http://localhost:3000/fortune?user_name=MasakiIto
- 27. • index.ejs 内にJavaScriptを記述。ブラウザ上でAPI呼び出しを 行う クライアント側： Webページを全て取得した後 に、APIを呼び出しデータを得て表示する
- 29. • 新世紀エヴァンゲリオンに登場するコンピュータ • 「メルキオール (MELCHIOR)」「バルタザール (BALTHASAR)」「カスパー (CASPER)」 という3つの独立し たシステムによる合議制をとり、通常のコンピューターには不 可能な人間の持つジレンマを再現した第七世代有機スーパーコ ンピュータ・システム ここまでの成果をまとめてMAGIシステムを作りたい！
- 30. • API: Application Programing Interface – 入出力仕様のみ決まっており、背後のロジックは隠蔽されている • 仕様が統一されている方がプログラムは書きやすい – とはいえ、望ましいAPIはプログラミング言語などの流行などで変わるため、永 続的な標準化には向いていない • 生データの方がデータを活かしやすい – 「大吉」より「0.93」のような数字で貰いたい Webブラウザ（アプリ）から3つの APIサーバへアクセス Webブラウ ザ/スマホア プリ MELCHIOR BALTHASAR CASPER
- 31. • APIサーバからの応答にヘッダを追加 JSONにクロスドメインでアクセスするために res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
- 32. • SOA、 • SOAP, XML-RPC • Restful API Web APIのトレンドは頻繁に変わるから 標準に向かない https://www.slideshare.net/tmasao/web-api-49080729/75 高久雅生 (筑波大学図書館情報メディア系）氏発表資料より
- 33. データの寿命は長い（例） JPEG形式 1992年にITU-T勧告 T.81 CSV形式 1972年のIBM Fortran がサ ポート（Wikipedia） 2005年にRFC4180として成 文化 ASCIIコード 1963年にAmerican Standards Association（ASA、 後のANSI）によって制定
- 34. GitHub基礎
- 35. • Git: 分散型バージョン管理システム – 文書の改変を追跡、管理出来るシステム – プログラミングの際にはほぼ必須 – 複数人での協調作業が可能 • GitHub: バージョン管理された文書（プログラム）を保存、 公開できるWebデータベース – 多くのオープンソースソフトウェアがGitHubで公開されている – IT企業内部からも多く利用されている – 国土地理院も公式アカウントあり（なお国交省からはアクセスできない模様） GitとGitHub
- 36. • 主にソースコードをホスティン グするWebサービス – 2008年設立 – 2018年 マイクロソフトが買収 • オープンソース向けに無料でソ フトウェアリポジトリやコミュ ニケーションの場を提供 • 商用サービスとして個人・企業 向けにクローズドなソフトウェ アリポジトリを提供 GitHub
- 38. • ユーザ名、メールアドレスの設定が必要（おそらくWindows のみ） – git config --global user.name “Masaki Ito” – git config --global user.email “mito@iis.u-tokyo.ac.jp” • SSH鍵の作成とGitHubへの登録 – ssh-keygen を実行（1回だけ） – 作成された .ssh/id_rsa.pub をGitHubに登録 (id_rsa は秘密鍵) Gitを使い始める前に
- 40. • gtfs-saga を作成 • Extensions にPostGISを追加 データベースの準備
- 41. • 本来はオープンデータのGTFSファイルを ダウンロードしてデータベースに読み込 む – http://opendata.sagabus.info • 手順が複雑なため、一度読み込んだ時の バックアップデータを読み込ませる – データベース名 gtfs-saga を右クリック、 Restore を選択 – FilenameとしてGoogle Driveに置いたバックアッ プファイルを指定 – https://drive.google.com/file/d/1xIXFUKz5JPx Uny2k519iRIk7QUCMdS5E/view?usp=sharing – エラーが出るようだが問題なく完了する データの読み込み
- 42. • 複数GTFSのマージ： onebusaway- gtfs-merge-cli – 佐賀のデータは2社が最初から統合されているため、 統合処理は不要 • GTFSをPostgreSQL+PostGISに投入： GTFSDB – CSVの単純な投入だけでなく、位置情報の処理、カ レンダーの処理、インデックス作成などを行う • 詳細はQiita記事参照 – https://qiita.com/niyalist/items/22b743d973e 4a6aeef86 データベースへの投入を自分で行う場合
- 43. • 自分がForkしたリポジトリを git clone • ライブラリをインストール（npm install） • 起動用スクリプトをコピーして編集 – データベース名などのパラメータを環境変数として渡すように設定してある – 拡張子からsampleを除く – 適切なパラメータに変更 Webアプリを手元で動作させる
- 44. • 地図（OpenStreetMapをleaflet.jsで レンダリングしたもの）に、バス停を 重畳 • バス停のクリックでそのバス停の時刻 表を、便のクリックで、便の地図形状 を表示 – パラメータに応じてSQLを呼び出し、JSON （可能な場合はGeoJSON）に整形してWebア プリに返す • 経路検索なども呼び出せるようにした い – OpenTripPlannerの利用 アプリの動作例
- 45. クラウド基礎
- 46. • 原理的には開発用PCのままでもインターネットにおける一般公 開は可能だが、実用上は、公開専用のPC（サーバ）を用意 – 独自ドメイン名を付ける場合はDNSも用意 • 今回のサービス公開のためには、node.js が動作するアプリ ケーションサーバ、PostgreSQLのためのデータベースサーバ が必要 – 2台用意してもいいが、規模が小さければ1台にまとめて構わない • 負荷分散や配信の高速化、バックアップや耐故障性の向上など のため、大規模なサービスにおいてはより複雑な構成になる インターネットに公開→外部にサーバを調達
- 47. • ネットワークを通じてサービスを提供することに特化して設計 されたコンピュータ – 基本的な機能は個人用コンピュータ（PC）と同じ • サーバ用のプログラムも開発時はPCで開発されることが多い – より高性能、より高い信頼性、保守性 – ディスプレイ不要、密な設置のため規格化された独自の形態を取る ハードウェアとしてのサーバ DELL PowerEdge R740 HPE ProLiant DL20 Gen10 Server 19インチラックの例
- 48. – 東京・大阪・北海道（石狩）に設置 データセンター: さくらインターネットの場合 https://www.sakura.ad.jp/corporate/corp/datacenter.html
- 49. • 大容量高速回線、非常用電源設備などを備えたサーバの管理に 特化した施設 • 世界中でサーバを集約する「データセンター」と呼ばれる施設 が建築されている – 日本データセンター協会の一覧には251箇所掲載 • ハウジング（コロケーション）：企業が持つサーバを預かった り、複数拠点に多重化する支援など • ホスティング：データセンターが設置したサーバを賃料を払っ て利用 データセンター http://www.jdcc.or.jp/index.html
- 51. • データセンターの場合、「サーバを使う」という意識は残っている • クラウドでは、提供者が事実上無限のサーバ、ストレージ、ネット ワークなどを事前に用意し、必要なときに必要なだけの資源を利用 し、使っただけ支払えばよい • コンピュータの管理が高度化され、Web操作で高度で柔軟な構成が 可能 • メリット – 急激にアクセスが殺到しても自動的に多重化 – 災害があっても自動的にバックアップへ切り替え – 一時的に必要になる計算処理のためのコンピュータ調達が容易 – スタートアップ企業でも、驚異的に安価な初期費用で必要なコンピュータを揃えられる クラウドコンピューティング： 所有から利用へ
- 53. • Amazon 社内のビジネス課題を解決するた めに生まれた IT インフラストラクチャのノ ウハウをもとに、2006 年、ウェブサービ スという形態で、企業を対象に IT インフラ ストラクチャサービスの提供を開始 • 必要な時に、必要なだけ、低価格で IT リ ソースを提供。企業はもはや数週間・数ヵ 月も前から、サーバーや他の IT インフラス トラクチャを計画・調達する必要がなくな ります。即座に何百・何千ものサーバーを 数分で起動し、迅速に結果を出す AWS (Amazon Web Service)
- 54. • 世界中の 21 の地理的リージョンにある 66 のアベイラビリ ティーゾーンで運用 Amazon AWSのマップ https://aws.amazon.com/jp/about-aws/global-infrastructure/
- 56. • AWS Elastic Beanstalkを利用し、node.js PostgreSQLのサー バ環境を用意 – EC2のインスタンスが動作していることを確認（IaaS） – http://simple-maas-ito.ap-northeast-1.elasticbeanstalk.com • 手元で動いているプログラムをデプロイ、インターネットから のアクセスを確認 – AWSの無料枠があるので確認後は止めた方が良いかも このあとのステップ