Webサービスに挑戦してみた。その結果はページの最後に！

おすすめ記事ピックアップ

Webサービスにあこがれて

2013年8月ごろ、ゆーすけべー日記（Webサービス、最初の宣伝）を読んで、私もWebサービスを作って発表してみたいとあこがれました。でもプログラムの知識はまったくありません。

仕事で勉強する時間もないし、Web屋の凄い人たちが、ガシガシWebサイトを作っている中、素人が何をつくれるだろうか。ゴミみたいなプログラムを作っても意味がないだろうと、くじけそうになりました。

でも誰もがはじめは初心者だし、やってみなければわからないんだと、挑戦してみることにしました。それから2ヶ月後、初めてのWebサービスが完成しました。Why not the best ？なぜベストを尽くさないのか。という名言を残した第39代アメリカ合衆国大統領ジミー・カーターに感謝してやみません。

フォームデータをPHPで受け取り、if文やSwitch文で選択した計算を行い、各種変数にして、結果として表示するサイトです。データベースを使わない単純な仕組みです。Webサービスというには恥ずかしいぐらいですけども、なんとなく形になりました。これを作るまでのメモを整理して、掲載したいと思います。

まずPHPの勉強

最初にJavaかPHPどちらの勉強をするか悩みました。AmazonやWordPressはPHPで動いていることと、初心者が始めやすいプログラミングなので、PHPを勉強することにしました。プログラミングの勉強も兼ねて、AmazonやWordPressのカスタマイズにも役に立つと考えたからです。

PHPの勉強は本とスクールで勉強しました。本は「いきなり始めるPHP」です。この本は不要なことがほとんど書かれていません。しかも実践的で、初心者にもわかりやすく書かれています。ざっとPHPどんなものか理解を深めてくれて、さらにスクールで小難しく勉強する部分の理解を大きく助けてくれます。これだけだと、知識に穴が出来て、つまずきが発生しそうですが、それだけ簡単に実践的にまとまっている素晴らしい本です。

PHPのことはさっぱり分からなかったので、本で勉強しつつ学校に通うことにしました。秋葉原周辺で安く学べるところを探しました。見つけたのが神田ITスクール（http://www.kanda-it-school.com/）です。よくある大手スクールと比較すると5割から3割ぐらい授業料が安いのです。（※今みたらPHPの授業が値上がりしているような。。）

なんかちょっと怪しい感じですが、実際に行ってみると運営者が熱心にやっている感じでした。加えて安いのでここにしました。ちなみに授業内容はとても易しいです。某大手のような自分で考えさせるための、難しいひっかけや変化球はほとんどありません。たんたんと基礎を教えてくれて、私にとっては最適でした。

申し込んだコースは、「PHP・Webアプリ開発入門・基礎総合コースforショート」で大体40時間のコースでした。毎週土曜日に5時間勉強して約2ヵ月終わりました。そこで勉強した項目は下記です。赤字の部分が特に役立ちました。

• WEBやPHPとは
• 開発環境の準備
• PHPプログラムの基本
• PHPソースの記述
• プログラムで計算
• 定数と変数
• 条件分岐文
• 繰り返し処理
• 配列
• フォームデータ
• 関数
• デバック
• 動的な処理
• ファイル操作
• クッキーとセッション
• PHPとデータベース

PHPの開発環境については、「WebサーバApache」や「データベースMySQL」や「PHP」が必要です。それらがワンパッケージなった便利なXAMPPというのがあります。その準備と使い方を教えてくれます。これがとてもためになりました。1人では勉強できない類です。

加えて、「プログラム制作の統合開発環境Eclipse」でPHPのエラーやチェックが簡単にできます。はじめテキストエディタのようなものという認識だったのですが、今はPHPを書く上で必要なソフトだと思います。

この辺は記事にしました。参考にしてください。

・名前がカッコイイEclipse（イクスプリス）、統合開発環境を導入しよう
http://www.furimuke.com/2013/08/phpwebapachemysqlphpxampp.html

・PHP勉強に必要な「WebサーバApache」や「データベースMySQL」や「PHP」の準備不要なワンパッケージXAMPPの導入
http://www.furimuke.com/2013/08/phpwebapachemysqlphpxampp.html

PHPの記述方法も、PHP内にHTMLを書く場合と、HTML内にPHPを書く場合の違いや、HTML内にPHPを飛び飛びに記述できることなど、とてもためになりました。自分で考えたPHPを書く上で、””で囲むべきもの、変数や$_POSTした値の違いや、echoのあとドット[.]等での変数をくっつけたり、その辺の知識が役にたちました。

・PHP初歩のクォーテーションの「"や'」、波括弧「{}」、ドット「.」の使い方と整理
http://www.furimuke.com/2013/08/php.html

・PHP参考サイトでコードが気になったので、考えてみました。
http://www.furimuke.com/2013/08/php_21.html

ある程度コードができたあとは、Eclipse（イクスプリス）のデバックが地味に役立ちました。コードが動くけど、なんか地味に数値が異なる時、ひとつひとつの動作を検証できるからです。

プログラム開始

1通り勉強したあと、AmazonFBAの手数料を計算するサイトを作ろうと思いました。初めに書いた―コードはとっても簡単なものでした。変数に入れて、単純な計算を行うプログラムでした。

switch文やif文の中にswitch文を入れたりすることで、フォームから取得した情報に合わせて複雑な処理ができるようになってきました。10バージョンぐらい思考錯誤を繰り返しました。2週間ぐらいで全体のプログラムができました。

どうしてもうまく数字が処理されない現象が出ました。そんなときEclipse（イクスプリス）のデバックがとても役にたちました。条件分岐がうまく機能しておらず、同じ処理がすべてに行われていることがわかりました。修正して問題を解決できました。

HTMLデザイン

コード部分が大凡完成してから、今度はHTMLデザインを行いました。初めはHTML KickStart（http://www.99lime.com/elements/）を使ってデザインしました。HTML KickStartは、CSSのファイルをダウンロードして、CSSをちょいちょいと設定すれば全体のデザインができてします便利なサービスです。デスクトップでの表示はうまくできたのですが、スマートフォンでの表示がどうしてもうまくコントロールできませんでした。絶望しました。

モバイルサイトの制作をほとんど勉強していなかったので、自己解決は不可能だと判断して、海外のスマートフォンに対応したHTMLテンプレートを購入することにしました。フォーム部分がおまけで付いているテンプレートにしました。

11＄となかなか安くて高品質なんです。すべて英語なので日本語化する必要があります。ENをJPにして、fontをゴシックにすれば良いだけですから、10分ぐらいでできます。マニュアルも英語ですが、英語が苦手でもhtmlをある程度理解していればなんとかあります。

これがなかなか大成功でした。Bootstrapやレスポンシブルがたっぷりと使われていて、とても心地の良いサイトになりました。フォームの制御やツールチップも充実です。いっきに高品質な感じになりました。

サーバ準備

こうしてデザインも完成しました。次はサーバーの準備です。しょうもないサイトなので、お金を出したくないなぁと思いつつ、ロリポップの一番安い（月額100円）のサーバでもPHPが使えることがわかり、さっそく申し込みしました。1年契約で2000円ぐらいでした。独自ドメインを取ろうかと考えたのですが、pya.jpドメイン（ロリポップのドメイン）で、いいことにしました。

phpプログラムをサーバにアップしたところ、まったく動きません。.htaccessというファイルで設定が必要でした。まずphpファイルをhtmlとして動かす設定です。php自体もhtmlに変更が必要でした。index.html表示なしで動くように設定しました。

AddHandler php5.3-script .htm .html

RewriteEngine On

# index.html無しのURLに統一
RewriteCond %{THE_REQUEST} ^.*/index.html
RewriteRule ^(.*)index.html$ http://amazonfba.pya.jp/$1 [R=301,L]

.htaccessはテキストで作り、サーバにアップしたあと、テキストの拡張子を消して[.]ドットを先頭につけて完成です。こうしてサーバの設定は完了です。もちろんFTPの設定などもしました。そこは省略します。

機能追加と調整

ソーシャルボタンを付けようと思いました。忍者おまとめを入れれば良いと思いました。これが大失敗です。モバイルで見た時、勝手にページ上部にナビゲーションを表示してくれます。駄目だと絶望しました。

しかたないので、ただのリンクで設定しました。

Twitter、Facebook、google+、hatena、tumblrは下記で、ソーシャルにURLを投稿する簡単なリンクが作れます。これを入れました。

<a href="http://twitter.com/home?status=----URL---"></a>
<a href="http://www.facebook.com/share.php?u=----URL---"></a>
<a href="https://plus.google.com/share?url=----URL---"></a>
<a href="http://b.hatena.ne.jp/append?----URL---"></a>
<a href="http://www.tumblr.com/share?----URL---"></a>

スマートフォンでの見え方のチェックを繰り返し行いました。最近はスマフォ利用が高いので、重要なポイントだと感じます。例えば、スマフォでリンクをうまく押せるかや、テキストフィールドの入力やカーソル等がうまく動くかなど調べました。<ul><li>を使ったリンクがうまく押せないので<ul><li>ごとリンクしたり、数字だけを入力させたいのにテキストフィールドを使っていると、モバイルでは入力切り替えが必要だったりします。type="number" を使うと数字入力に最適化できました。

<input id="text2" type="number" required name="price" value"" placeholder="税込で入力" />

AmazonFBAサイトなので、アソシエイトも組み込みました。フォームの入力に合わせてAmazonランキングのURLを紹介させました。

ロゴはlogasterを使ってつくりました。小さいロゴならフリーで使えるのがとても便利です

・Logasterの記事参考はこちらです。
http://www.furimuke.com/2013/09/logaster.html

リリース作成

特徴と画像を取り、リリースを作成しました。リリースの作り方はいろいろなサイトがありますので、時間をかければ誰でも作成できると思います。下記がリリースの作り方です。

・STEP3.プレスリリース作成
http://www.furimuke.com/2013/02/blog-post_7496.html

リリースが完成したので、個人でリリースを送付してみました。下記がリリースページです。

・AmazonFBAの利益を簡単に確認できるWebサービス「AmazonFBA Calculator」
http://www.furimuke.com/2013/10/webamazonfba-calculator.html

結果

誰も何にも、反応が、まったくありませんでした。ズコー！！フゴゴ！
こうして今日も貴重な時間を無駄に使ったのでした。