※写真と記事は全く関係ありません。あえて言うなら作り終わってばたんきゅー
…ごほんっ。さて、完成までに結構な時間がかかってしまいましたが、
一区切りということでオンラインアルバムサービス「Pic-sent」制作の経緯をまとめてみました。
1.まずPHPから勉強してみた
上記に書いてあるような制作意図が固まったところで、まずはPHPの勉強から初めてみました。
PHPを選んだ理由は、WordPressを触ったことがあって、なんとなく馴染みやすいかなと思ったからです。
PHPに関してはWeb上にたくさん参考になるサイトもありましたが、最初は体系だってやった方が良いかと思い入門書を買いました。
とりあえずこれに書いてあることを一通りやってみて、
サービスに必要な画像のアップロード、DBへの登録や取り出しの基本的なことを覚えました。
本はWin向けの内容だったのでMacでのやり方や、phpmyadminの使い方、他にも細々とした部分は結構検索に頼りながら進みましたが、とりあえず動くサンプルを試せるのは良かったです!
基本的な書き方がわかってからは、検索しつつ色々試してみました。
2.デザインを考えた
基本的なプログラムが動かせるようになったところで、サイトのデザインをすることにしました。
htmlやcss,javascriptはもともとかじっていたので、あとはPhotoshopでデザインを作っていきました。
デザイン時に考慮したのは以下の点です。
・スマホでの利用をメインにしたいので、レスポンシブに対応出来る。
・やっぱりスマホなので、軽いシンプルなサイトにする。装飾も少なめに。
・サーモンピンクっぽいメインカラーにしたのは、プレゼントならピンク系かな!って単純な発想。
それらを念頭に置きながらデザインを進めました。
そして出来たデザインをもとにコーディング。
3.jQueryで動きをつけた
デザインと仕組みを合わせたところで、写真を表示するためのライトボックスやレスポンシブへの対応、フォームへの入力判定などの動きの実装を行いました。
フォーム関係の部分は、はじめPHPで判定しようかとも思いましたが、JSの方が書き慣れていたのもありJSで行いました。
・写真の表示は“Colorbox”を使用
・ナビゲーションには“HorizontalNav”を使用
・ブラウザ判定に“IE Alert”も使用
・スクロールに“scrollTo”を。
・その他の部分は書いてみました(でもライブラリ使った方が早いし確実だったかも…)
ちなみにjavascriptや下記の書籍で勉強しました!
4.機能やデザインの追加調整
必要最低限の機能を実現させたところでデザインを始めたので、コーディングをしてサーバにアップした段階で色々試してみたところ、細かい修正が必要な部分がたくさん出てきました。
たくさんあるのですが、特に苦労したのをいくつか挙げておきます。
・iPhoneで縦長に撮った写真が横になる問題を解決
EXIFタグの情報のせいらしく、それについてのif文を追加して解決。
・大きな画像をphpで回転させて保存出来なかった
imagerotateで扱う画像サイズには限界(?)があるらしく大きな画像をその大きさのまま
回転上書きが出来なかった。しかもエラーも吐き出さないで静かに止まるので
気付くのにとても時間がかかった。
・アルバムを見る際のライトボックスをスワイプ仕様にするのを諦めた
当初はスワイプ出来る画像ギャラリーを使っていたのだけど、それだとiPhoneの長押しで
画像を保存出来ない(Z-indexで上にリンクが被さってしまっている)ので、
現在の形に落ち着く。
こんな風に、主に画像周りでつまづきました…。後述しますが、いくつかの問題はちゃんとフレームワークを使えば楽だったんだろうなぁと反省しています。
(勉強に飽きてとりあえず何か新しく作りたくて突っ走った)
そして、ほとんど独学なのでいくつか不安要素もあります。
・素人が画像系サービスなんか作って、サーバー負荷とか大丈夫なの?捕らぬ狸の皮算用かもですが
・セキュリティが不安。素人でも出来そうな対策は講じましたがやっぱり不安はある。
・スマホの実機テストをiPhoneでしかしていない。
などなど…
5.とりあえず完成!と、思ったこと。
前述した不安はありますが、1人で内省しててもわからない事も多いだろうと思って公開してみる事にしました!
この先は、折りをみて機能の追加や強化(もしくはリニューアル)をしていこうと思います。
完成させるまで、たくさんの方のブログやサイトにお世話になりました。僕もそんな皆さんに続けるように、精進して身につけた技術や考え方をネットに還元していこうと思います。
さて、今回自分で作ってみて思った事は、サービスを1人で作るって本当に大変だということ。
サーバーや、プログラム、デザイン、コーディングやテキスト、テストなどetc…。会社なんかでは分業されている各種領域を1人でやるっていうのは、とても持久力のいる作業でした。
しかもWeb業界のトレンドはとても早いので勉強しているうちに色々変わってしまって、完成するころには全然面白くないサービスになってるんじゃないかって焦りも常にありました。「素人だけど作ってみた」系記事のサービスなんかを作った人は、本当に凄いと思います。そういう人達は制作は素人でもきっと努力の天才です。
僕はもともと学校でHTMLやCSS,Javascriptはかじっていたので、そこの学習コストはかからなかったけれど、それでも全部1人でやるには時間がかかるし、モチベーションの維持が大変でした。
周囲の友人に公言することで、なんとか完成させなくてはとここまで来ましたが、ずっと土日は引き蘢るとか無理なので普通に友達と遊んだし、途中で別の事をしたくなって一ヶ月ほど放置したこともありました。そのかわり平日の夜は30分でもコードを書こうと出来るだけ意識してきましたが、時間は半年ほどかかっています。数週間とか1ヶ月とか言えたらかっこよかったんですけど…。
そうやって長い時間をかけた結果として、phpやMySQLへの苦手意識や抵抗はなくなり、今はフレームワークを勉強したいと思っているし、他の言語(Ruby)なんかもやってみたいと思っています。
Webサービスを作っていく過程での「アップロード出来た!」とか「サムネイル作れた!」「ちゃんと表示された!」なんていう小さな成功体験の連続が今のやる気の源泉です。もっと、もっと出来るようになりたい。
そんな気持ちが得られただけでも自分で作ってみてよかったなって思っています。
あー、楽しかった!