Webアプリケーション作ってみた
Webアプリケーション作ってみた:
実務経験が無いため、Webアプリケーション一個つくるためにどのようなプロセスがあり
素人がやるとどんなところで引っかかるかを知りたかったことが理由です。
また、Web業界に転職することを考えるとなにか成果物があると自分のレベルを伝えやすいかと思いました。
下記で利用できます。
独学でコード書いているのでセキュリティ的にやばいところあるかもしれませんが、
みんな悪いことをしない優しい人だと信じています。
URL : http://13.228.52.57
テスト用ログインメールアドレス：testuser@test.mail
パスワード：foobar
Git : https://github.com/kitsunecat/trapla
旅行に行くときのスケジュールを作成するアプリケーションです。
僕が旅行計画を立てるときは日帰りならそんな細かく考えないのですが、
複数人で行く３泊４日とかになると、「何にどれくらい費用がかかって持っていくものは何で・・」
などを整理するときにNumbersでスケジュールを作成していました。
そういった内容を一定のフォーマットで作成するとちょっとは便利かなーと思ったのです。
Ruby, Ruby on Railsで作成し、データベースは検索して出てくる情報が多いという理由でMySQLにしました。
シェアが大きいという理由でRuby選択しましたが、どうやら実際はそうではないようで、、、
PHPから始めたほうがよい説が飛び交っていることに気づいたときにはだいぶ勉強したあとでした。
なので「他の言語勉強するにしても一個つくってからにしよう」ということにしたのです。
どの言語から勉強したほうがいいとか言う話は個別の情報を信じているとキリがないですしね！
ユーザ管理についてどうやればいいか想像できていたなかったのですが、
Ruby on Rails Tutorialを読めばユーザ管理とリレーショナルデータベース管理システムについて書かれていたので意外とその部分で苦労することは多くありませんでした。（全くではない）
ていうか実際はユーザ登録しなくても使えるようにしたかったのですがひととおり思いつく機能実装してみたいな、ということから無駄にユーザ管理機能実装してしまった感があります。
最初はVagrantを使って仮想OS上で環境を作りごちゃごちゃしていたのですが、
「Dockerというナウでヤングなツールをつかってみたい」という想いからDockerでの環境構築を試みました。
Production環境ではWebサーバにはNginx、アプリケーションサーバにはUnicornを使っているのですが、
Webサーバからアプリケーションサーバにデータを渡すときのUnixドメインソケットというのがはっきりと
理解できず、各Dockerファイル（Rails用、Nginx用、MySQL用)とDocker-composeファイルを作るのに
１週間くらい使ってしまいました。多分ここの動きはかなり効率悪かったと思います。
HTML/CSSの記法自体はすんなり理解できたのですが、いろいろいじってもなかなか自分の思ったとおりのデザインにならない、
ということがよくありました。そんなときは
- 自分が求めるデザインに近いサイトのソースを見る
- 内容パクって同じ感じのデザインにする
- 書かれているCSSの、どの文がどのデザインに関与しているかを予想する
- 予想したことが正しいことをリファレンスとかで確認
みたいなことやっていました。
フロントエンドのスキルに関心はありましたが、自分のなかでは優先度は低く設定していたため
そこまでガッツリ納得するまで調べる、ということはしませんでした。
新しい予定を作成する部分にはJavaScriptを使っているのですが、
Railsに標準でついているMinitestではJavaScriptの動きまではテストできませんでした。
そこでRSpecとCapybaraというツールを利用して仮想ブラザを内部で立ち上げて
画面の動作を確認する、という方法にしました。
使うことだけはGemをインストールすればすぐに使えるのですが、
・ブラウザ立ち上げられないよ、というエラーがでてテストが実行できない
・テスト実行できてもブラウザが文字化けする
という想定外の事象に3,4日使ってしまいました。結局はPhantomJSという仮想ブラウザを使用して
日本語化することで対応したのですが、このPhantomJSというのが重い、、、
インストールだけで数十分かかる、、、
これプロジェクトでやってたらスケジュール遅延も甚だしい感じになっていたのではないかな、と想いました。
特に各旅行計画の中に持っていくものとか費用とかの項目があるのですが、これは各旅行計画がそれぞれ
複数持つものなので、ざっくりいうと旅行計画データベースの中に費用とか持ち物データベース作ろうとしたのです。
でもHTMLってFormタグの中にFormタグを作っちゃいけない仕様のようでこれが実現できませんでした。
かわりに擬似的なデータベースを二次元配列で作成し、その値をHiddenタグの値に入れて送信する
という方法を選びました。
画像の表示遅くないっすか？
'Docker-compose build'するときに長時間かかってしまいます。
仮想ブラウザにPhantomJSを使っており、そのインストールに時間がかかるからです。
となると仮想ブラウザをPhantomJSから他に移行すべきですが、
日本語化のナレッジがすくなく手を出すとひっどいことになりそうだな、と思い後回しにしています。
作ってみUI/UXの重要さを実感しました。
ぐぐって出てくるUI/UXのセオリーどおりやってればいいだろ、とか甘く考えていたのですが、
セオリーどおり実装することが難しかったり、セオリー通りやっても実際に使ってみると
「なんか知らんけど使いにくい」という正体不明のストレスが発生するのです。このへんは数こなして経験積むしか無いのかなと考えています。
Webアプリケーションを作ること自体は、少なくともRuby on Railsでは一通りできるものだな、、と思いました。
しかしユーザ視点で考えたときに最適な仕様なのか？ということを考えると改善点だらけだと思います。
また、やりたいことを実現するまでにかかる時間は自分でも遅いな、、と思いました。
コードを書くよりもエラーメッセージに対応している時間の方が圧倒的に長かったんじゃないかな・・・
おそらく経験者と未経験者で差が出てくるところは、エラー対応の時間の短さと、
ユーザビリティを上げるためにはどうすればよいか、の発想力にになるんですかね。
さぁ次は何を作ろう。
とりあえずなにか一個Webアプリケーションを作りたかった
実務経験が無いため、Webアプリケーション一個つくるためにどのようなプロセスがあり素人がやるとどんなところで引っかかるかを知りたかったことが理由です。
また、Web業界に転職することを考えるとなにか成果物があると自分のレベルを伝えやすいかと思いました。
下記で利用できます。
独学でコード書いているのでセキュリティ的にやばいところあるかもしれませんが、
みんな悪いことをしない優しい人だと信じています。
URL : http://13.228.52.57
テスト用ログインメールアドレス：testuser@test.mail
パスワード：foobar
Git : https://github.com/kitsunecat/trapla
| 開発環境などについて | 使用した技術 |
|---|---|
| 開発言語 | Ruby, HTML/CSS, JavaScript, jQuery |
| フレームワーク | Ruby on Rails |
| Webサーバ | Nginx |
| アプリケーションサーバ | Unicorn |
| DB | MySQL |
| 開発環境 | Atom、Docker、Vagrant、Git、Git flow |
| 本番環境 | AWS |
作成したWebアプリケーションについて
旅行に行くときのスケジュールを作成するアプリケーションです。僕が旅行計画を立てるときは日帰りならそんな細かく考えないのですが、
複数人で行く３泊４日とかになると、「何にどれくらい費用がかかって持っていくものは何で・・」
などを整理するときにNumbersでスケジュールを作成していました。
そういった内容を一定のフォーマットで作成するとちょっとは便利かなーと思ったのです。
言語選択
Ruby, Ruby on Railsで作成し、データベースは検索して出てくる情報が多いという理由でMySQLにしました。シェアが大きいという理由でRuby選択しましたが、どうやら実際はそうではないようで、、、
PHPから始めたほうがよい説が飛び交っていることに気づいたときにはだいぶ勉強したあとでした。
なので「他の言語勉強するにしても一個つくってからにしよう」ということにしたのです。
どの言語から勉強したほうがいいとか言う話は個別の情報を信じているとキリがないですしね！
苦労した部分
ユーザ管理については意外とすんなり理解できた
ユーザ管理についてどうやればいいか想像できていたなかったのですが、Ruby on Rails Tutorialを読めばユーザ管理とリレーショナルデータベース管理システムについて書かれていたので意外とその部分で苦労することは多くありませんでした。（全くではない）
ていうか実際はユーザ登録しなくても使えるようにしたかったのですがひととおり思いつく機能実装してみたいな、ということから無駄にユーザ管理機能実装してしまった感があります。
開発環境構築でつまづく
最初はVagrantを使って仮想OS上で環境を作りごちゃごちゃしていたのですが、「Dockerというナウでヤングなツールをつかってみたい」という想いからDockerでの環境構築を試みました。
Production環境ではWebサーバにはNginx、アプリケーションサーバにはUnicornを使っているのですが、
Webサーバからアプリケーションサーバにデータを渡すときのUnixドメインソケットというのがはっきりと
理解できず、各Dockerファイル（Rails用、Nginx用、MySQL用)とDocker-composeファイルを作るのに
１週間くらい使ってしまいました。多分ここの動きはかなり効率悪かったと思います。
HTML/CSSのデザインが思い通りにならない
HTML/CSSの記法自体はすんなり理解できたのですが、いろいろいじってもなかなか自分の思ったとおりのデザインにならない、ということがよくありました。そんなときは
- 自分が求めるデザインに近いサイトのソースを見る
- 内容パクって同じ感じのデザインにする
- 書かれているCSSの、どの文がどのデザインに関与しているかを予想する
- 予想したことが正しいことをリファレンスとかで確認
みたいなことやっていました。
フロントエンドのスキルに関心はありましたが、自分のなかでは優先度は低く設定していたため
そこまでガッツリ納得するまで調べる、ということはしませんでした。
テスト環境の作成
新しい予定を作成する部分にはJavaScriptを使っているのですが、Railsに標準でついているMinitestではJavaScriptの動きまではテストできませんでした。
そこでRSpecとCapybaraというツールを利用して仮想ブラザを内部で立ち上げて
画面の動作を確認する、という方法にしました。
使うことだけはGemをインストールすればすぐに使えるのですが、
・ブラウザ立ち上げられないよ、というエラーがでてテストが実行できない
・テスト実行できてもブラウザが文字化けする
という想定外の事象に3,4日使ってしまいました。結局はPhantomJSという仮想ブラウザを使用して
日本語化することで対応したのですが、このPhantomJSというのが重い、、、
インストールだけで数十分かかる、、、
HTMLやデータベースの仕様の理解不足による手戻り発生
これプロジェクトでやってたらスケジュール遅延も甚だしい感じになっていたのではないかな、と想いました。特に各旅行計画の中に持っていくものとか費用とかの項目があるのですが、これは各旅行計画がそれぞれ
複数持つものなので、ざっくりいうと旅行計画データベースの中に費用とか持ち物データベース作ろうとしたのです。
でもHTMLってFormタグの中にFormタグを作っちゃいけない仕様のようでこれが実現できませんでした。
かわりに擬似的なデータベースを二次元配列で作成し、その値をHiddenタグの値に入れて送信する
という方法を選びました。
課題
なんか重い
画像の表示遅くないっすか？
ビルドが遅い
'Docker-compose build'するときに長時間かかってしまいます。仮想ブラウザにPhantomJSを使っており、そのインストールに時間がかかるからです。
となると仮想ブラウザをPhantomJSから他に移行すべきですが、
日本語化のナレッジがすくなく手を出すとひっどいことになりそうだな、と思い後回しにしています。
単純に使いづらい
作ってみUI/UXの重要さを実感しました。ぐぐって出てくるUI/UXのセオリーどおりやってればいいだろ、とか甘く考えていたのですが、
セオリーどおり実装することが難しかったり、セオリー通りやっても実際に使ってみると
「なんか知らんけど使いにくい」という正体不明のストレスが発生するのです。このへんは数こなして経験積むしか無いのかなと考えています。
教訓
Webアプリケーションを作ること自体は、少なくともRuby on Railsでは一通りできるものだな、、と思いました。しかしユーザ視点で考えたときに最適な仕様なのか？ということを考えると改善点だらけだと思います。
また、やりたいことを実現するまでにかかる時間は自分でも遅いな、、と思いました。
コードを書くよりもエラーメッセージに対応している時間の方が圧倒的に長かったんじゃないかな・・・
おそらく経験者と未経験者で差が出てくるところは、エラー対応の時間の短さと、
ユーザビリティを上げるためにはどうすればよいか、の発想力にになるんですかね。
さぁ次は何を作ろう。
コメント
コメントを投稿