Downloaded 13 times
Uploaded byMasaki Ito
超高速！実践MaaSアプリ開発講座
2019年6月22日に国交省若手有志と開催した「ファイルからデータへ：国土交通IT実践ワークショップ」における実習の資料です。
More Related Content
![[DL輪読会]Model soups: averaging weights of multiple fine-tuned models improves ...](https://cdn.slidesharecdn.com/ss_thumbnails/dl0401-220405031053-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DL輪読会]NVAE: A Deep Hierarchical Variational Autoencoder](https://cdn.slidesharecdn.com/ss_thumbnails/nvaeadeephierarchicalvariationalautoencoder-201113004930-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DL輪読会]data2vec: A General Framework for Self-supervised Learning in Speech,...](https://cdn.slidesharecdn.com/ss_thumbnails/220204nonakadl1-220204025334-thumbnail.jpg?width=640&height=640&fit=bounds)
超高速！実践MaaSアプリ開発講座
- 1.
- 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.
- 9. • Node.js: Webサーバ+JavaScriptの実行環境 •Express: Web開発を容易にするフレームワーク – 共通に使われる機能を提供 – プログラムの書き方を規定し知識やソースコードの流用を支援 • コマンドプロンプトを使用 – Mac: アプリケーション→ユーティリティ→ターミナル – Windows: コマンドプロンプト または Windows Power Shell Node.js + Expressを用いてWebサーバを立てよう
- 10.
- 11.
- 12. Visual Studio Codeでフォルダごと開く
- 13.
- 14.
- 15. • 自分のIPアドレスを確認 – Windowsならipconfig コマンド – http://自分のIPアドレス:3000 でアクセスできることを確認 • 他の受講生にIPアドレスを知らせよう • 教室内のPCそれぞれがWebサーバとして機能し、それぞれに 接続できる状態はまさに「小さなインターネット」と言える 他のWebサーバにアクセスしよう
- 16. • public に置いたファイルはブラウザでどのように見えるか？ •画像は？ZIPファイルは？ JSファイルは？ • Webサーバの基本的な仕組みとして、サーバに配置されたファ イルを、そのままの構造、内容で配信していることを確認 • Webブラウザがファイルを受け取り、うまく表示している 中の仕組みを丁寧に確認しよう: 静的ページ編
- 17. • index.ejs とブラウザでの見え方の違いは？ •Webサーバにおいてプログラムが動作し、その結果でWebペー ジが作られていることを確認 • 現在の多くのWebページはそのように作られる – パーソナライズ、広告配信、リアルタイム情報 • Webブラウザにとっては、動的ページも静的ページも区別が付 かない点も重要 中の仕組みを丁寧に確認しよう: 動的ページ編
- 18.
- 19.
- 20. • 入力に対して処理するためのデータは、普通はプログラムの中 には書き切れない • 入力内容をキーワードとしてデータベースを検索し、その結果 を利用してWebページを出力するように構成するのが一般的 利用者からの入力に応じてデータベースを検索しよう 利用者向けの画面 や操作性を提供 httpプロトコルでの要求に 対応したデータを作成して提 供 データを格納 データベースWebサーバ(node.js) Webブラウザ リクエストに基づき適切に応答する プログラムを開発する（JavaScript） URLでサーバを指定し接 続、パラメータを渡す htmlや画像などのデータ を得る SQL（問い合わせ言語） でデータを要求 要求された条件に合った データを返す
- 21. • これまでのところでは、「利用者の名前」をアクセスする度に サーバに伝えていた • 世の中にあるWebサービスでは、ログインは1回だけ、または 一度もログインしなくても、パーソナライズされたページが出 てくることが多い •Webブラウザには、 cookie という、一度送信した値を覚え、 次回からも見えないところで送信する仕組みがある 一度のログインで「自分向け」の動的ページが 出続けるようにしよう
- 22. • このプログラムいわば未来予測 • AIやビッグデータを用いるとは、 このロジックを重厚にすること –雑な言い方ですが･･･ – 今回はその方法には踏み込みません • 乱数でもAIでも「未来予測」とい う形式は変わらないことが大事 – 「インタフェース」という考え方 AI・ビックデータ･･･
- 23.
- 24.
- 25.
- 26. • JSON: キーワードと値という構造を持ったテキストファイル –実はJavaScriptのプログラムそのもの – 配列なども表現可能 • 機械可読性が高い（プログラムから読み込みやすい） ブラウザでアクセス→JSONを取得 http://localhost:3000/fortune?user_name=MasakiIto
- 27. • index.ejs 内にJavaScriptを記述。ブラウザ上でAPI呼び出しを 行う クライアント側：Webページを全て取得した後 に、APIを呼び出しデータを得て表示する
- 28.
- 29. • 新世紀エヴァンゲリオンに登場するコンピュータ • 「メルキオール(MELCHIOR)」「バルタザール (BALTHASAR)」「カスパー (CASPER)」 という3つの独立し たシステムによる合議制をとり、通常のコンピューターには不 可能な人間の持つジレンマを再現した第七世代有機スーパーコ ンピュータ・システム ここまでの成果をまとめてMAGIシステムを作りたい！
- 30. • API: ApplicationPrograming 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.
- 35. • Git: 分散型バージョン管理システム –文書の改変を追跡、管理出来るシステム – プログラミングの際にはほぼ必須 – 複数人での協調作業が可能 • GitHub: バージョン管理された文書（プログラム）を保存、 公開できるWebデータベース – 多くのオープンソースソフトウェアがGitHubで公開されている – IT企業内部からも多く利用されている – 国土地理院も公式アカウントあり（なお国交省からはアクセスできない模様） GitとGitHub
- 36. • 主にソースコードをホスティン グするWebサービス – 2008年設立 –2018年 マイクロソフトが買収 • オープンソース向けに無料でソ フトウェアリポジトリやコミュ ニケーションの場を提供 • 商用サービスとして個人・企業 向けにクローズドなソフトウェ アリポジトリを提供 GitHub
- 37.
- 38. • ユーザ名、メールアドレスの設定が必要（おそらくWindows のみ） – gitconfig --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を使い始める前に
- 39.
- 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したリポジトリを gitclone • ライブラリをインストール（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.
- 49. • 大容量高速回線、非常用電源設備などを備えたサーバの管理に 特化した施設 • 世界中でサーバを集約する「データセンター」と呼ばれる施設 が建築されている –日本データセンター協会の一覧には251箇所掲載 • ハウジング（コロケーション）：企業が持つサーバを預かった り、複数拠点に多重化する支援など • ホスティング：データセンターが設置したサーバを賃料を払っ て利用 データセンター http://www.jdcc.or.jp/index.html
- 50.
- 51. • データセンターの場合、「サーバを使う」という意識は残っている • クラウドでは、提供者が事実上無限のサーバ、ストレージ、ネット ワークなどを事前に用意し、必要なときに必要なだけの資源を利用 し、使っただけ支払えばよい •コンピュータの管理が高度化され、Web操作で高度で柔軟な構成が 可能 • メリット – 急激にアクセスが殺到しても自動的に多重化 – 災害があっても自動的にバックアップへ切り替え – 一時的に必要になる計算処理のためのコンピュータ調達が容易 – スタートアップ企業でも、驚異的に安価な初期費用で必要なコンピュータを揃えられる クラウドコンピューティング： 所有から利用へ
- 52.
- 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/
- 55.
- 56. • AWS ElasticBeanstalkを利用し、node.js PostgreSQLのサー バ環境を用意 – EC2のインスタンスが動作していることを確認（IaaS） – http://simple-maas-ito.ap-northeast-1.elasticbeanstalk.com • 手元で動いているプログラムをデプロイ、インターネットから のアクセスを確認 – AWSの無料枠があるので確認後は止めた方が良いかも このあとのステップ