VS COVID-19」リリース後、「コロナ対策で政府がオープンデータに本腰 民間の支援情報をGoogleスプレッドシートで公開 - ITmedia NEWS」として採り上げられ、地域版展開で声を上げていただいたりと、反応上々。

新型コロナウイルス対策で注目集めるシビックテック、高専生が初心者向けの貢献の仕方をとっても丁寧な記事にしてくれ、うれしい限り!

春休み、新しいことを始めるいいチャンス。「VS COVID-19」をセルフフォークして、JavaScriptでwebアプリをつくるフレームワーク、Angular版を作りかけてみました。

VS COVID-19 Angular ver.」(src on GitHub)

初めてのAngular、バージョンによっていろいろ変わるので、公式「Angular 日本語ドキュメンテーション」の「セットアップ」からスタート!

サーバーとの通信方法は、fetchとasync/awaitを使って書きたいけど、ちょっとややこしい。「Angular 日本語ドキュメンテーション - HttpClient」を参考に実装(list.component.ts)。

シンプルに実装するため、Google SpreadSheetからJSONで取得する部分はAPI化したので、表示コンポーネント部分はすっきり!(おまけに、表示順をランダム順にするシャッフルを追加しています)
https://app.sabae.cc/api/googlespreadsheet.json?key=2PACX-1vSFMNp5HcRNOF5MrAujEUWR1dIoX2mncMEWTbPlVAaJqKWiq831-6gnCyI7n_G8YfPqNQXrfwyVjyHL
(APIで、民間支援情報をJSONで取得するURL)

静的ファイル群にビルドして、ひとまずGitHub pagesで公開

ng build

注意点、aタグのhref属性をダブルクォートなどで囲わない横着スタイルは怒られました。きちんと書くようにしたいと思います。

気になる新技術で、いろいろ創ってみましょう!

links
- 立ち上がろう高専生、今すぐできる技術貢献、日本政府xシビックテック、民間支援情報ナビプロジェクト「VS COVID19」経産省&総務省から発表!ウイルス対策サイト福井版も

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / RSS