shizuiku iconしずいくマップ- 静岡市の子育て施設

リリース: 2015年12月24日

アプリ 開発秘話

自問自答インタビュー

2016/06/19更新

一般編 開発編 受賞編
最初に一言どうぞ!
静岡市限定Webアプリですが、子育て支援のお役に立てれば嬉しいです!
開発メンバーは?
1人での個人開発です。旧清水市生まれ、静岡市在住です。
シズオカアプリコンテストの開催はどこで知ったの?
しずおかアプリ部の第10回(2014/10/24開催)にて、情報展開して頂きました!
開発期間は?
およそ1ヶ月と3週間で、2015/11/2~2015/12/24です。使用するオープンデータ決定後、実際に開発着手した期間です。
開発に要した時間は?
約80時間です。オープンデータの変換や公的機関サイトの調査からアプリ登録作業まで、また開発技術の学習・調査を含む全工程の時間です。
時間を費やした作業は?
①オープンデータをアプリ内で使えるデータ形式に加工する作業、そのための変換ツールの開発作業。
②各施設の公式サイトURLが正しいか全てアクセスしての確認。またオープンデータと公的機関サイトとの誤情報の確認。
③初めて導入した技術の学習と試行錯誤。
一番大変だった作業は?
交通ヒヤリハットの位置と情報は、すべて手作業でマップ座標を入力し、ストリートビューを設定した単純作業のところです。
しずいくマップというタイトルの由来は?
しずおかの育児に関するマップだから!また、Google検索で被るサイトがなかったから。
※2016/01/09に「しず育マップ」から「しずいくマップ」に改名しました。検索のしやすさから、ひらがなに統一です。
他にもアプリの候補はあったの?
「しずママ」などの候補があり、産婦人科と口コミ機能付きも企画しましたが、シンプルな地図機能に絞りました。断念理由は、開発量が厳しい、産婦人科一覧がない、しずママはGoogle検索で色々でてくるので…。
なぜ子育てアプリにしたの?
1歳の娘を持つ身として、児童館や子育て支援センターを利用しています。また、第一子が保育園や小学校に入る前に転校しなくていいように賃貸やマイホームの場所を決めるという方も少なくないと思うため、義務教育までの施設を見れると便利だからです!
使ってもらえそう?
マップ上で場所から詳細情報まで一度に知りたい人にはオススメです!各公式リンクも設定してあるため、最新情報もすぐに確認できます!
なお、ちゃむしずおか -静岡市子育て応援サイト-という立派なサイトがあります。地区別の表形式一覧で確認した場合は、とても見やすいと思います。
失敗したところは?
静岡市内のアイコンを一度に全部表示するため、旧世代のスマホでは処理が重くなるところです。発生ケースと開発量の観点から許容としました。
工夫したところは?
URLをコピーするだけで、同じマップ表示になるところです。共有も保存もしやすいと思います!
もっとやろうと思ったことは?
学校の生徒数、通学区域なども表示しようとしました。付加情報であるという事と、オープンデータの加工作業が大変なため断念しました。
開発中の裏話は?
最初はスマホゲームを作ろうと思っていた中で、しずいくをスマホアプリとして開発を始めました。しかしその後、WebアプリはPCでもスマホでもURL1つで見れるので便利であり、スマホアプリ開発よりも手軽という理由で、2015/11/10よりWebアプリで作り直しました。
無駄なこだわりは?
画面下端のメニューから施設ボタンをタップしたときに、ポップアップされたメニューを自動で閉じないようにしました。一度に表示を切り替えるのを楽にしたかったからです。
辛かったことは?
正常動作していたアプリが動かなくなり、原因不明で何日も足止め喰らったところです…。
嬉しかったことは?
子育てアプリということで、妻の受けも良かったことです。
公開した直後の気持ちは?
「早く開発しなくちゃ!」です。12月14日の公開初日には完成している予定でした。一番目に公開したら、公式Twitterアカウントでしっかりツイートしてくれたのも嬉しいです。
最後に一言どうぞ!
しずいくマップを見に来てくれて、ありがとう。大好きな静岡とアプリ作りによって、しずいくマップを1人でも使ってくれれば満足です!
最初に一言どうぞ!
Webアプリは得意分野ではないですが、どのデバイスでもすぐに動くのは本当にメリットですね!
開発環境は?
Visual Studio Community 2015です。TypeScriptでマップ機能を開発し、WebサイトはPython 3系Djangoです。
テスト環境は?
Chromeメインです。TypeScriptのデバッグ実行がIEしか対応していないため、IE11は確認済みです。iOSはSafari、Chrome。AndroidはChromeで確認しました。なおjs出力後のデバッグは、IEではなくChromeのデベロッパーツールでやりました。
処理負荷テストは?
iPod touch 5で全種アイコンを表示で問題なく動きます。アイコン表示の瞬間はタイムラグがあります。iPhone 5以上想定で、iPhone 6なら快適という見込みです。
負荷対策は?
一度表示した施設情報とマーカーのインスタンスはキャッシュしています。しかし、インスタンス生成よりマップ上に表示する処理が重いようで、大きな改善はありません。計測もしていないため直感な実装です。
バージョン管理は?
GitSourceTreeを使用しています。既存のDjangoサイトのリポジトリに加え、しずいくマップ開発のTypeScript専用リポジトリを作成しました。TypeScriptリリースビルドで、Django側のフォルダにjsを出力させています。
初めての技術は?
TypeScriptです。JavaScriptも熟知していないので、思い出しながら学習しました。
TypeScriptどう?
静的型付けグッドです!ビルド設定でコメント出力なしや、複数のtsを1つのjsに出力できるのも便利です。
やりにくかったことは?
TypeScript側とDjango側のHTMLとCSSを手作業で同一状態にしたことです。jsはビルド出力ですが、HTMLとCSSは最小限の部分だけ移行しました。
Google Maps JavaScript APIは初めて?
半年前に引き継いだ業務で少し使ったことがあります。今回しっかりとゼロから作った形になります。ちなみにその時に、PHPとJavaScriptを初めてまともに触りました。慣れるまで動的型付けキツかったです。
オープンデータはどう加工したの?
Googleスプレッドシートに全て入力して統一させた後に、TypeScriptのソースコードを直接生成させました。連想配列として出力して、MySQLなどのDBは使っていません。
オープンデータの変換ツールはどう作ったの?
WindowsデスクトップアプリをWPFで簡易的に作りました。オープンデータ内の無意味な改行や空白削除をさせつつ、Googleスプレッド用のテキストに変換させました。基本的にGoogleスプレッドシートだけメンテすれば、オープンデータを更新できるようになっています。
オープンデータ以外に参照した外部サイトは?
ちゃむしずおか -静岡市子育て応援サイト-
→乳幼児の施設を参照。
静岡市教育委員会事務局教育部学校教育課
→小学校、中学校を参照。
静岡県の子育て情報満載!ふじさんっこ子育てナビ
→既存のマップ表示のサイトとして参照。
データ自体を参照したのは、ちゃむしずおかと教育委員会のサイトです。
外部サイトのデータをどう参照したの?
対象サイトのHTMLソースから該当タグ内の必要なデータを抽出して、Googleスプレッドに貼り付けられるテキストに変換させました。その抽出結果とオープンデータを見比べるという逆の手順になります。オープンデータの加工が大変過ぎるので、かなり助かりました。
アイコンはどうしたの?
ホームページフリー素材~School Icons CLUB(Web制作用アイコン・イラスト・壁紙素材)です。すぐに見つかり規約も使いやすく、感謝です。必要最小限の編集はGIMPでしました。
シズオカアプリコンテストをどう思う?
静岡市が開催したことに驚きました。必要とされているならばと、すぐに参加の検討をはじめました。また静岡はITが盛んではないように感じていたため、市での開催は嬉しいです。(各企業内でIT技術は使われていますが、IT勉強会やベンチャー企業など開発者としての活性度)。
シズオカアプリコンテストに参加する余裕あったの?
ちょうど仕掛中のアプリが無かったです!10月は出張していて、11月からUnityでアプリを作ろうとしていたところでした。
シズオカアプリコンテストに参加して良かったことは?
AWSハンズオンに参加できたことです。シズオカアプリコンテストをサポートしている株式会社しずおかオンラインを知り、Webエンジニアの方々の声を初めて聞ける機会の懇親会(2次会?)があったので新鮮で良かったです。
シズオカアプリコンテストにどうして参加したの?
静岡にも少なからず需要があって、こんな個人開発者もいるよ!と知ってもらうためです!静岡が好きなので、静岡でやり抜いてやろうと思っていますが、私は普段表に出るような活動も立場でもありません。そして時間をかけて参加する分には、賞金の存在は重要ですね!安かろうと貰えなかろうとも!
最後に一言どうぞ!
ここまで読んでくれて、ありがとう。静岡にも表にでない優秀なエンジニアは絶対にいると思うので、少しずつ盛り上がると良いです!
最初に一言どうぞ!
最優秀賞とれました!2016/02/26から4ヶ月近く経ってしまいましたが、受賞編お願いします。
受賞して一番影響が大きかったことは?
静岡新聞に掲載されたことです。中でも「この人」というコーナーに紹介されたことが一番大きいと思います。
親戚から連絡が来たり、社内の人に気付かれたり、県外に出ている幼馴染の友人にも伝わっていました。静岡新聞アットエスの記事に気付いた元同僚もいました。
最終選考会のプレゼン準備で大変だったことは?
プレゼン準備時間が夜中1~4時くらいしか確保できなかったことが大変でした。
タイミング悪く仕事が忙しくなり、とにかく眠くても期限があるので、気合でなんとか乗り越えた感じです。プレゼン資料は完成しましたが、もう少し練習できれば良かったです。
公開されているプレゼンの旧資料は?
最初に作ったお蔵入りの資料が(おまけ)作成途中の旧資料です。
しずおかアプリ部(第16回 2月20日)でプレゼンの予行練習させていただくためにギリギリで作りましたが、手抜き感が拭えません。結果的に大幅に作りなおして、本番に挑みました。
最優秀賞を目指していたの?
時間をかけて頑張って参加するのなら、最優秀賞を目指そうと思っていました。
一番最初にアプリも公開して、プレゼン資料も事前に公開して、露出を増やすようにしました。しかし、応募締め切り近くには、色々すごいアプリが出てきて圧倒されそうでした。それでも、しずいくマップの実用性は間違いないので、自身を持ってプレゼンを頑張るしかないと思いました。
受賞するためのズバリ戦略は?
ズバリ子育てアプリにしたことです。市民が使えて、すぐ役立つということも前提にしました。
審査員と審査基準の内容、「10年後の人口70万人の維持」というキーワードからも子育てが評価されやすいと予想しました。何より、私が1歳の娘を持つ身なので、開発者でありながら利用者であるという立場は有利な点です。
また後日知りましたが、静岡市が子育てに力を入れているのは間違いなかったようです!
静岡市が、子育てしやすいまち<第1位>になりました!:静岡市
アプリで重要視したことは?
  • シンプルで便利!(スゴイ技術より市民に役立つアプリ。すぐ分かる、すぐ使える。)
  • 実用性が確実!(現状必要とされているアプリ。既存アプリがなかったり、不便な点の改善。)
  • 付加価値がある!(子育て以外のデータとブレンド。交通ヒヤリハット導入や、URL共有機能の追加。)
プレゼンで重要視したことは?
  • 共感を得る!(なぜ必要なのか、誰が使い、いつ使うのか、問いかけを交えて同じ視点で見てもらう。)
  • 機能が掴める!(既存のマップと何が違うのか、実演と画像で見て理解してもらう。)
  • 具体性が見える!(件数は数字で示す、公開後のサポート提示、開発内容のオープン化。)
プレゼンで失敗したことは?
簡潔に伝えられずに、時間が延びたことです。
持ち時間は超過していたと思われるので、司会の方の配慮で最後までプレゼンさせてくれて、救われました。他の開発者の方も時間が足りない中、うまくまとめていたので凄いと思います。
結果的に良かったことは?
とにかくシンプルなアプリにしたことです。
いろいろ実装したくなって機能を詰め込んでしまい、使いにくくならないようにシンプルを大事にしました。1つの問題解決に集中できて、一目でアプリの内容も伝わり、完成度も高く見えたんだと思います。
最終選考会まで参加できて良かったことは?
静岡の方たちと交流できたことです。仕事の時より名刺が増えていきました。
コンテスト期間中のAWSハンズオン、後日開催のJAWS-UG静岡 春の陣にも参加させていただき、Webエンジニアの方を中心に対談できました。コンテスト当日の解散後も声を掛けていただき、一緒に夕食もできて嬉しい限りです。
心に残っていることは?
プレゼンを見に来ていた方に「すごいですね。」と言われたことです。
しずいくマップは、便利だと自負していましたが、技術的には一般的なGoogle Mapsを実装しただけです。しかし、そうではなく、「最後まで形にしたことがすごい。」ということだったのです。オープンデータをマップに分かりやすく落としこむことが開発の主な作業であり、アプリとしての目的です。課題やアイディアを既存の技術を使用して、コストを抑えた容易な方法で目的を達成することが重要と思いました。
賞金は使った?
開発費に当てる予定ですが、生活費の肥やし状態です。
Apple Developer Program(年間11,800円)、ReSharper(年間10,800円)、サーバー/ドメイン(年間8,000円)などの維持費に使います。PCパーツも、モバイルPCも購入直後でしたが、もっとハイスペックにしとけば良かったです。LINQPad、ゲーミングマウス(開発用途)、UnityのAssetなど必要になったら買おうかなという感じです。
今だから言えることは?
実はバグがありました。プレゼン間近で気付いたのですが、プレゼン終わるまで「触らぬソース(プログラム)に祟りなし」ということで、修正しませんでした。内容は、静岡学園幼稚園のみ電話番号が2つあり、Telリンクが正しくなかったです。
プレゼンの裏話は?
プレゼン資料のアイコンは「しずいくまっぷ」と書きましたが、アプリ登録名は「しずいくマップ」です。
「マップ」はカタカナが正式名ですが、アイコンは優しくひらがなにしちゃいました。その結果、当日のプログラムや紹介文などに「しずいくまっぷ」と書かれていました。
最後に一言どうぞ!
私も妻も日常でしずいくマップを使うことがあり、子育て施設の場所を調べる用途ではシンプルで便利です。公的機関サイトが充実するまでは更新サポートしようと思っているので、1人でも役に立てば嬉しいです。