2013-12-28

Webプログラミング素人のおじさんが、Flat UIぷりんデーターベース

webサービスを作ったので、ここで発表させてもらいます

作ったサイトはこちら、

ぷりんデーターベース

http://prindb.net

レスポンシブデザインなので、ブラウザを縮めたり、スマートフォンから見てもそれなりのデザイン

見れると思います。(まだ、ところどころ表示が崩れるかも)

僕について

おじさんというタイトルですが、まだ30代前半の男です。RubyとかPythonとかをがっつりやっている世代よりたぶん上なので、

おじさんとしました。

普段は組み込みOSを販売している会社サポートエンジニアとして働いています

なので、C言語についてはある程度理解でき、ハードウェアCPU(ARM,Intel,PPC,SH4 etc)の仕組みについては

普通の人より詳しかったりします。また、昔勤めていた会社家電製品の中のプログラムC言語で3年間程書いた経験があるので、

プログラミングについては全くの素人ではありません。あくまでwebプログラミング(php,ruby,python)が、という話になります

作ろうと思ったきっか

他の「素人作りました」を匿名ダイアリーで見ていて、自分も何か作りたいな~って思っていました。

で、どうしようどうしようって考えってた時に、”あれ、オレは毎日コンビニぷりん買ってないか?”って事に気づき

おいしいプリン情報がどっかにまとめったらいいなって思い、ぷりんデーターベースを作ろうと思いました。

デザイン

一連の「素人作りました」でTwitterbootstrapを使っている方が多くみられたのですが、そのまま使うのはなんだかな~だったので、

Flat UI というTwitterbootstrapベースのモノを利用しました。

これはWindows phoneデザイン採用されているようなFlatデザインをBootstrap形式で作成できてしまものです。

プログラミング言語

PHP

はじめはRubyでやろうとしたけれども、windows上でテスト環境を作るのが難しく途中で断念し、次に候補にしていたpython

なんか情報が少なそうだなって思ってやっぱり途中で断念し。最終的にphpになりました。

それで、wordpress使って簡単に会員制のサイト作っちゃえって思ってたら、wordpress動かしたらよく分からないエラーが出て、

時間程格闘して解決したんだけど、この事に疲れて、やっぱり1から自分でつくらないとダメだなと思い、

wordpressは諦めて、ログイン機能ユーザ管理などもphp自作することにした。

サーバー

さくらvps 2GBプラン

なんか2chひろゆきさんが薦めてたから、ここにしました。

いいのか、悪いのか、安いのか、高いのか、よくわからない。

データベース

MySQL

ぷりんデーターベースを作る際に参考にした”ドットインストール”というサイトのレッスンが、

phpMySQLが必ずセットだったので、これにするしかなかった。ほかのDBはよくわからない。

参考にしたサイト

ドットインストール

ツイッターログインするWebサービスを作ろう

http://dotinstall.com/lessons/tw_connect_php_v2

PHPで作る投票システム

http://dotinstall.com/lessons/poll_php_v2

さくらVPS入門

http://dotinstall.com/lessons/basic_sakura_vps

JavaScriptで作る残り文字数チェッカー

http://dotinstall.com/lessons/char_checker_js_v2

PHPで作る「画像掲示板

http://dotinstall.com/lessons/upload_image_php

【旧版】Twitter Bootstrap 2.1入門

http://dotinstall.com/lessons/basic_twitter_bootstrap_v3

ユーザー管理をするWebサービスを作ろう

http://dotinstall.com/lessons/sns_php_v2

PHP入門(基本編)

http://dotinstall.com/lessons/basic_php_beginner

PHPで作る「ページン機能

http://dotinstall.com/lessons/paging_php_v2

【旧版】PHPで作る「簡易掲示版」

http://dotinstall.com/lessons/bbs_php

コメント機能をつける時に参考にしたサイト

ブログを作る

http://ponk.jp/php/basic/blog

PHPマニュアル

PHPAPIが調べられるサイト

http://www.php.net/manual/ja/manual.php

twitter bootstrap

twitterbootstrapの記述方法などを確認

http://getbootstrap.com/getting-started/

Flat UI

Flat UIはBootstrapの拡張ですが、マニュアルが容易されていないので、

実際に下記ページをソースコード表示させたり、cssファイルを見てどんな定義をしているのかを確認しました。

http://designmodo.github.io/Flat-UI/

スマホでのデザインの確認

Responsive Checker

http://html5-lab.jp/checker/

作った感想

全部合わせて3ヶ月程で作ったんですが、かなり大変だった。

phpプログラミング部分はよくわからないなりに、なんとかなるなっとは思ったのですが、

デザイン面は本当によく分からなかった。PC上ではちゃんと表示されているけど、ウィンドウサイズを縮めると

グチャグチャになったり、全然レスポンシブにならないじゃないかって事が多々あった。

あと、Flat-UIが個人が作成したものなので、たぶんまだ全然揉まれていないCSSなんだなとも思った。

今まで、デザイン仕事ってプログラマより楽なのかと思ってたけど、全然楽じゃないですね。。

ごめんなさい。

本当は気楽に作ったわけじゃなく、現状の単調な毎日を変えたいと思って作りました

これをきっかけにいろんなものを作ってフリー仕事が取れるといいな。。

このサービスを作っている時に、自分を励ますために聞いていた歌です。

Mr.Children横断歩道を渡る人たち」

http://www.youtube.com/watch?v=6yTYBGM1KEk

ギターケースを抱えて歩くそ少年は仲間と楽しげに話している

好きな音楽の話か それとも好きな女の子の話か?

そのギター未来を変えるつもりかい?それならいつか仲間に入れてくれ

だって何もかもをもの分かりよく 年老いたくはないんだ

では、おいしそうなプリンにいいねでも押していってね。感想も聞かせてもらえるとありがたしです。

http://prindb.net

記事への反応(ブックマークコメント)

ログイン ユーザー登録
ようこそ ゲスト さん