はじめてのうぇっぶあぷり

学校の課題でWebアプリケーションを作った。スクショはこんな感じ。

f:id:voTov:20150720023559p:plain f:id:voTov:20150720023601p:plain

f:id:voTov:20150720023605p:plain f:id:voTov:20150720023607p:plain

簡単なお絵かき共有アプリケーションみたいな感じのつもり。

1枚目:全絵を表示するページ。

2枚目:絵を描くページ。1枚目の右下のボタンから遷移できる。

3枚目:投稿ウィンドウ。2枚目の右下のボタンから表示できる。

4枚目:投稿後の1枚目のページ。

後は絵を描く時の色変更したり、絵を選択時に拡大表示出来るようにしたかったけど、時間的に諦めた。

 

~以下開発日記~

・1日目

時間がないから作りたいもの決まってないけど取り敢えずUIを作り出す。

AndroidのUIを参考にして作ればぱぱっと終わるでしょ~って思ってたけど、positionの概念がよく分かっていなかったりそもそもどんなプロパティがあるのか知らなかったりと割りと時間掛かってしまった。

(余談 エディタはBrackets使ってるんだけど、色の編集するときにクイック編集でカラーパレットをエディタ内で使えるの物凄く便利。)

 

この辺で、おえかきの森の話を聞いてアプリ概要が決まる。

 

その後絵を描くページ作って、今度はCanvasに嵌る。

最初Canvasの縦横をcssで%使って指定してたんだけど、それやると座標かなんかがおかしくなるらしく、線を引いた時にマウスの位置とずれてしまう。canvasタグでwidthとか指定すればいいなんて素人なんかがそう簡単にわかるわけない💢

あと、canvasに対してtoDataURLすればbase64エンコードされた絵が取得できるのはとても便利だと思った。

 

1日目最後は投稿ウィンドウ。

投稿ウィンドウ自体は簡単に作れたんだけど、textarea(?)で悩んだ。最終的にはこれを使った。 

Google Material Design Input Boxes in CSS3 | Scotch

 

・2日目

まず最初に投稿したものを保存するためにSQLite3に触れる。

Androidのデータベースは触れたことあるけど、純正(?)のSQLiteに触れるのは初めてだった。SQLite使うためにここでようやくphpのファイル作ったんだけど、Dropboxってphp実行できないのね。js実行できるしphpも実行できるでしょって思い込んでたから、実行できない原因が分からず、ずっとコード側の問題だと思って試行錯誤した。これまでDropboxにファイル投げてたけど、仕方ないからxamppインストール。実行環境をxamppに移行したら一発で動作して、今までの苦労は何だったんだって思った。phpのコードはあまり多くないからそんなに困ることはなかったけど、変数の前に$を付け忘れて何度も怒られた。phpの文字列、ダブルクォーテーションで囲うとその中の変数が置換されるってのは割りと便利だと思う。

 

最後はメイン画面のGirdLayout。

最初GridViewで調べてて、全然目当ての物が見つからなかった。これに丸投げ。

Masonry

丸投げしたはいいけど、グリッドに並べてくれるときと何もしてくれないときがあって、ついに原因不明。私のコードの問題だろうから、時間があるときに改善したい。

 

と、そんなこんなでなんとか休日全部費やしてそれっぽいの完成。Webアプリケーション初めて作ったにしてはまともなものができたのではないだろうか。JSLintに物凄く怒られたり、どうでもいい不具合に悩まされたけど、割りと楽しい開発だった。