【アプリ制作未経験が、液状化アプリを作ったら?】
第2弾 アプリがめざしたものと制作過程

こんにちは、DobokuLab 1期生の水谷です。投稿は初めてになるので少し緊張してます。文字の上だと緊張伝わらないですよね、、、、

出来上がった液状化アプリというものがこちら!!

無料で、サンプルデータが既に入っているのでぜひ使ってみてください!!

またフロントエンド側のソースコードも公開いたします。興味あるという方、コードレビューしていただける方見ていただけたらと思います!!gitの使い方知らないけど見たいという方いらっしゃいましたら、私のTwitterのDMにお越しください!

早速本題になるのですが、表題の通り今回から共同制作者であるはたはたさんとリレー連載形式で
【アプリ制作未経験が、液状化アプリを作ったら?】
をしばらく定期的にお届けします!

水谷回の初回は皆さんもよくお使いのアプリの画面というものが一体どのようにして作られていくのか、そしてプログラミングに興味があるけど踏み出せない人向けに書いていこうと思います!

アプリ作成にあたって

この液状化アプリ制作は顧問として㈱ささこうの笹澤さん、バックエンドをDobokuLab1期生のはたはたさん、そしてフロントエンドを水谷の3人で行いました。

フロントエンド:アプリケーションで直接ユーザーの目に触れる部分のことです。WebサイトやWebアプリケーションなどでユーザーが文字を入力したり、ボタンをクリックしたりする部分や、バックエンドのソフトウエアと直接やり取りをする部分のことを指す。

バックエンド:ユーザーが入力した内容などのデータ処理やデータベースへの保存、検索結果の出力といったことを行います。ユーザーからは見えない後方の部分の処理を担っていることが、バックエンドと呼ばれている理由です。
(web staff “「フロントエンド」と「バックエンド」とは?意味の違いとエンジニアの仕事”より引用)

要するに役割分担ですね。

液状化アプリの計算の仕組み、そもそも液状化とは何なのかについてはDobokuLab 1期生のはたはたさん作成の記事をぜひご覧ください。1回目はアプリの使い方ガイドです。

液状化について
バックエンド側を行ったはたはたさんによる液状化アプリ解説!

ということでこちらの記事では、フロントエンド周りの制作の話がメインとなります。プログラミング未経験の方にもわかる話までに留めますので、ぜひフラットに見ていただけたらと思います。

はじめは真っ白から

皆さんはアプリと聞いてまずなにからスタートするか想像がわかない人も多いのではないでしょうか。
当然表示画面現在、、≪真っ白≫です。開発フローとしては

  1. どんな画面が必要かを検討
  2. デザインを考える(どんなアプリならみなさんは使ってみたいって思えますか?)
  3. そのデザインをプログラミングによって画面に表現する

このアプリが目指したもの

興味本位に思わず使いたくなるアプリ

真っ白な状態であるから、何を書いてもデザインしてもいいのです。人によっては動けばよい、使えればよいというかもしれません。既存の土木系のアプリやソフトウェアはある値を導くまでのプロセスがブラックボックスだったり、業務上使うけれど何より”使ってみたい”と思わせられるようなものではなかったりしたのです。魅力的ではない。
私は、自分が作ったものを土木の知識がない人が見たときに「なんかよくわかんない」だけにとどめたくない、「理解できない部分もあるけれど使ってみたいな」、「どんなものか興味本位で触ってみよう!」そんな風に思わせられることかと思ってます。そして土木をあまり知らない人、まだ知識の浅い自分のような1回生、2回生が、土木面白いじゃん!となればそれだけで利益のあることだと思います。(仮にこれが仕事としてやるならそれだけ開発コストがかかるのでケースバイケースなわけですが。。。)
自分の持てうる技術の最大を生かして、一般向けアプリ(B to C向けアプリ)により近づけられるように努めました。

実現のためには

画面表現がやはり一番大変でした。

1例としてアプリの中に波形データを示す箇所があるのですが、こういったグラフデータをある程度の処理までもっていってくれるありがたい方法がありそれをそのまま持ってきたのですが、

ご覧の通り、「加速度を示す背景がピンク」、「プロットがそのまま」、「線が太い」などとても見づらいですし魅力的でないですよね。ヘッダー部もないので、まだまだアプリと呼ぶには程遠いです。またこの画面のままだと他の画面へ飛ぶこともできません。魅力的以前に使えないわけですからね。

ここから改良&チャレンジの連続で画面を作っていくわけです。

これは確か開発3日目のことだったと思います。

製作途中の様子

アプリを作るって何となく、難しい画面をひたすらにらめっこして一人で黙々とやるだけというイメージを持たれている場合が多いのではないでしょうか。場合によってはそういう風になることもあるかもしれませんが、私たちの場合は和気あいあいとやれて、かなりたのしかったですね!

Doboku Labの浅野さんと西川さんがオフィスにいらしたときには一緒にアプリをいじったり、相談したりなどしてまたさらにアプリがパワーアップしました。プログラミングは独学でだれにも頼れない状況だとかなりきついですし、枠にはまったことしか知ることができません。こういった仲間の存在は非常に大きいもののように思えます。

遂に完成へ

改善を繰り返してようやく完成となるわけですが、ここまでできたら完成というわけではありません。
アプリを作ったら検証作業が残っています。当然アプリが間違いなく動くかということもありますが、PC版とスマホ版で見た目を直しているのでそれがうまく作用するかなど、今までのレポートの「て、に、を、は」があってるかといった簡単な作業ではなくなるのです。

これを「レスポンシブ対応」といいます。世にあるたいていのホームページやPC対応のアプリなどはこのレスポンシブ対応というのがなされています。PCでは見れるけどスマホでは見えない、Google Chromeでは動くけれどけど他のでは動かないといったことだってあるのです。プログラミンマー、特にフロントエンドエンジニアをなさっている方々はこういったことも考えて作られているのです。

このような右往左往があってようやく、

完成!

制作期間約2週間でここまでものになるとは、自分でもかなり驚いております。達成感はかなりのものでした。制作チームの笹澤さんやはたはたさんにもかなり手伝っていただいた部分もあります。本当にありがとうございました!!これからもこのアプリをさらに機能を増やしたり、使いやすいものにしていけるよう精進してまいります!!

まだこのアプリ触ってないよという方はこちらから↓

プログラミングをはじめたいけど踏み出せないあなたに


これを見たあなたは何と思うでしょうか?学生目線でいうとおそらく三択あるかと思います。

  1. 大したこと書いてないじゃん
  2. プログラミングやったことあるけど、右側のfor文の部分しかわからない
  3. すごそうだけど、何書いてあるのかわからない

このアプリはAngularというアプリ制作用のプラットホームを使用している関係で一般的にも少し見慣れないかもしれませんが、少しでもこういったことをやったことある人には「1の大したこと書いてないじゃん」になろうかと思います。土木学生が大学で習うのは主にpythonやC言語などバックエンドに近くて計算処理メインの部分です。それが2番を選んだ人かと思います。3番を選んだ人も多くいるかと思います。
しかし3番を選んだ人はプログラミングを本当にやったことがないのでしょうか?


Excelである処理を行っています。言わずもがな足し算です。これもsum関数という関数を使った立派な「プログラミング」です。先ほど3番を選んだ方も大学生以上なら一度はやったことがあるでしょう。そしてみなさん「大したこと書いてないじゃん」といえるはずです。
この感覚に近いかもしれません。プログラミングのハードル、一気に下がった気がしませんか?先ほどのプログラミングが書いてある画面(エディタ)は、置き換えると左側の内容がWordやPowerpoint、右側の内容がExcellに近いですね。そういった使い慣れているWord、Excell、Powerpointならある程度使ったことがある人が、いざ世間で言われているプログラミングへはステップが大きいと感じている人が多いと思われます。
このステップの過程については次回の記事で書きたいと思います。

それではまた。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です