【アプリ制作未経験が、液状化アプリを作ったら?】
第4弾 アプリの画面作成の基礎を見てみよう!

こんにちは、DobokuLab 1期生の水谷です。
【アプリ制作未経験が、液状化アプリを作ったら?】
をしばらく定期にお届けします!今回はその第4弾!

液状化アプリというものがこちら!!

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

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

記事バックナンバー
連載記事【アプリ制作未経験が、液状化アプリを作ったら?】
バックエンド担当のはたはたさん、そしてフロントエンド担当の水谷でリレー形式で書いていくので、記事がそれぞれの担当の制作順につながっていることもあるので、こちらで整理してありますのでご覧ください。

第2弾(フロントエンド①)をまだ読んでない!というかたはこちらから読んでいただけると、第4弾の内容がスムーズかと思います。

さて、フロントエンド編②では①に引き続いてWord、Excell、Powerpointならある程度使ったことがある人が、いざ世間で言われているプログラミングへはステップが大きいと感じている人が多いなかで、そのステップをどうやって踏んでいければよいのか、あるいは私がフロントエンド担当だったのでフロントエンドのことについて書きますから、画面作成をまだやったことない人向けの記事になります。フロントエンドの基礎となるhtml,cssは厳密にはプログラミングではないものの、プログラミングをやりたかったらまずは画面が作れるようになりましょう。

画面が作れるようになるフロントエンドの知識

フロントエンドでできること

画面が作れる!

端的に言えば、これにつきます。ある人は、「え、難しそう」あるいは「python,R言語などできるから大丈夫」とおっしゃられるかもしれません。そういった方々に向けてまずはマインドセットです。

1からのスタートはできるのか? プログラミングは理系にしかできないのか!?

まず「プログラミング=理系」という考え、捨てましょう。確かに日本の大学でこういったプログラミングをやっている学科は大体理系ですよね。ですが、本当に理系にしか扱えないことばかりかというとそうではありません。誰でも1から学べば難しい公式も計算もなく、プログラミングを学ぶことができます。
私は実のところを言うとアプリ制作こそ初めてですが、データを入れても何も起きない見た目だけの画面作成まではご縁があり、ノースキルだった自分は今年の1月から1から学んでアルバイトとして勤務してました。今回のアプリの見た目までは容易くこなすことができました。この約半年を振り返った時に理系要素があったかというと、全くといっていいほどなかったです。

pythonなどができていればそれでいいのか?

pythonやR言語、C言語を学んできた、使ってきた人にとっては、プログラミング経験者といってよいですが、果たしてそうでしょうか。特に大学生は計算結果をこういったプログラミングで行うのに表現の最後はwordに頼りきりではありませんか?大学で理系が学ぶのはむしろこのバックエンド側にあたる方だけだといって過言ではありません。世に何かを提供できるようなサイトやアプリ、ソフトウェアというのはフロントエンドに入ったデータをバックエンド側に組み込んで、再度フロントエンドに戻るというのが一般的です。当然、フロントエンドの知識がまるでないとバックエンドができたということにどうしてもならないわけです。最低限のフロントエンドの知識は必要です。

フロントエンド(画面作成)をやってみよう

フロントエンド概論

フロントエンド、3種の神器について勉強します。ここでは導入にあたる概論までに留めます。

  1. html :画面の骨組みを作る
  2. css :画面のスタイルを調整する
  3. Java script :画面に動きを持たせる、データの送受信関係を行うなどする

骨組みとは何なのか、Doboku Labの記事頁を例に見てみます。

htmlで骨組みというのは文字通りで、あくまで文字の順番だったり構造部分を作ります。そのうえでcssを使って、写真のサイズだったりこの文字の大きさはこれくらいだったりなどの指定を行っていくのです。
ではJava scriptはというと、例としてホンダのホームページですが、
画面にたどり着くとすぐ車の写真がスライド形式で表示されますね。あるいはログインフォームに書かれた名前などの個人情報をサーバーへ送受信関係を行うのもJavascriptの役目となります。(本来Javascriptでやることをcssでやる裏技もあります、面白いですよ)

html,cssだけで見た目を作ることができますから、まずはこの2つの最低限までをマスターしてしまいましょう。プログラミングはあれもこれもとやると、頭がごちゃごちゃになります。

フロントエンドを勉強してみる(html、css編)

勉強の仕方は人それぞれですが、私が始めてのころにやった方法を書いてみます。

Step.1 本とオンライン教材を使って、基礎学習

どんなサイトにも絶対使われる基本的なものは下記に示す本やオンライン教材を使って勉強します。

  • オンライン教材

    こちらはdotinstallという、プログラマー初心者は一度はお世話になるであろうオンライン教材提供サイトです。一部無料で、詳細なものになると有料になります。こちらの2つは無料になります。環境設定から文字をただ表示させるという本当に簡単な基礎の基礎まで教えています。これをベースにはじめは勉強しました。


  • 1冊ですべて身につくHTML & CSSとWebデザイン入門講座
    created by Rinker
    この本の評価
    html,cssの導入のふさわしさ
    (5.0)
    デザインに興味持ち始めちゃう
    (5.0)
    ドボクオタク度
    (3.0)

    上記のdotinstallでよくわからない部分や、不足部分をこちらの本で補いました。本の中身のデザインもおしゃれで、ただ読むだけでも楽しかったです。カフェサイトを試しに作るページではページ作成に必要な要素が全て詰め込まれています。

Step.2 ページをまねして作ってみる。ググりまくる

どんなページを作りたいかによって必要なコードが変わってきますし、やっていけばわかるのですが正解が1つではないのです。ごくごく微妙な違いがあります。
例えば興味のあるサイトに行って、キーボードの”F12″を押してみてください。

このようにhtmlとcssが全て見ることができます。step.1で学んだことの復習にもなりますね。これを見ないで試しに作ってみて、わからなければ「画像 3枚 横並び」といった具合にググります。ググったら最初のうちは出てくることが多いです。それでも難しいと感じたら答え合わせに”F12″を押してみてください!

JavaScriptも同様にして勉強することができます。html、cssを勉強した人にはある程度どうやって進めていけばいいか見えてくるはずですよ。

【番外編】いつも当たり前と思っていたものは

例えば見慣れているボタン。どちらとも押してみてください。ページの少し上に行くと思います。

押してみてどうでしたか?確かにページの上のほうに行くので機能としては満足しています。しかし、ボタン1の方は非常に使いづらかったのが良く分かったかと思います。ボタン1の方には何も指定を加えてません。ボタンにカーソルが近づくと☝になってくれるのも当然ではないということになるのです。同じ機能でもボタン1と2があったとき、より、”直観的だ”、”使ってみたい”、”押してみたい”と思えるのはどちらでしょうか。

もちろん機能を満たす、とにかくアプリとして出すことが第一前提にはありますが、その先一般的にウェブデザインというのはこういった点にも考える、いわゆるユーザビリティを考慮するとよりよいアプリやサイトになります。
画面作成初心者がここまでのことをする必要はないですが、世の中のウェブサイトやアプリがいかにして考えられて作られているかを知っておくのは大事かもしれませんね。

フロントエンドができるようになったら

前章ではブログというのもあるのでざっくりとフロントエンドについて、またフロントエンド学習について書いてきました。今回で伝えたいのは、まさにここなんです。

表現方法の手段が増える!

Word,Excell,Power Pointは確かに”誰が作っても使いやすい”ようにできている非常に有能なツールです。しかし”誰でも使える”ということはそれだけ”制約”が生まれるのです。
一方で所謂バックエンド、フロントエンドでやることは、”誰もが使えない”が”自由”なのです。バックエンド、フロントエンド関わらずはじめは不便さを感じるかもしれませんが、やればやるだけなんでも自由にできることに面白さや喜びをきっと感じられるはずです!

最後に、土木学生で特に専門知識があまりない2回生までの人へ、今のうちに画面作れるようにして研究をした時やそれの発表の手段として将来への投資に、3回生以上の方も表現の幅増やしてみませんか??
ぜひ、私たちと一緒にプログラミングを勉強しましょう!
ご興味ありましたら、ぜひ私のTwitterのDMよりぜひご連絡ください!

次回は大学ではあまりやらない”チーム開発について”どのように進めていくのか、チーム開発の面白さをお話していきます。
それではまた。

コメントを残す

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