超高速！実践惭补补厂アプリ开発讲座
2 likes1,258 views
2019年6月22日に国交省若手有志と开催した「ファイルからデータへ：国土交通滨罢実践ワークショップ」における実习の资料です。
![[AWSマイスターシリーズ] Instance Store & Elastic Block Store](https://cdn.slidesharecdn.com/ss_thumbnails/20140129aws-meister-reloaded-ephemeral-ebs-public-140130055222-phpapp02-thumbnail.jpg?width=560&fit=bounds)
More Related Content
What's hot (20)
Similar to 超高速！実践惭补补厂アプリ开発讲座 (20)
More from Masaki Ito (20)
Recently uploaded (11)
超高速！実践惭补补厂アプリ开発讲座
- 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. ? モダン奥别产基础 – 自分の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サーバを立てよう
- 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のトレンドは頻繁に変わるから 標準に向かない /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
- 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の無料枠があるので確認後は止めた方が良いかも このあとのステップ