webど素人が一つのwebサービスを公開するまでに感じた7つのこと。

ノンプログラマの@takasugiuraです。

1年前にはHTMLすら意味不明だった私ですが、日々の鍛錬で一つのwebサービスをリリースすることができました。いきなりですが、今回リリースしたのはこれです。

Yasapp(ヤサップ)-野菜直売所マッピングプロジェクト

これは野菜の直売所をマッピングするwebサービスです。
「地元の野菜を食卓に」をテーマに作りました。
あっ、別にJAの回し者でもなんでもありませんよ(笑)

ただ、こんなんあったらいいのになぁ、と思いついたものをカタチにしました。

地元の農家さんがつくる野菜って以外と安くてモノが良いのが多いんですよ。
遠くの街から石油を使って輸送してこなくても、地元に良いものっていっぱいあると思うんです。
そんな地産地消を加速させられたらいいなと思ったのがきっかけです。

前置きが長くなりましたが、ゼロからこのwebサービスをリリースするまでに感じたこと、気づいたことを、7つのポイントに絞って書いていきたいと思います。
 

感じた7つのこと

・作りたいwebサービスを徹底的に妄想→徹底的に調べる(リスト化)
・作業環境を整える
・書籍はやっぱり必要。その選び方
・参考になるwebサービスを徹底的にチェックする
・TTPの精神でやる
・毎日やれるだけやる(リリース日設定なんて無意味)
・個人がやるお金を掛けないマーケティング

では順番にいきたいと思います。
 

作りたいwebサービスを徹底的に妄想→徹底的に調べる(リスト化)

webサービスを作りたいと思った時に一番問題になるのが、「いったどうやて作ればいいのか」という入り口の部分だと思うんです。この入り口が見えないからいったいどこから手を付けたらいいのか分からない、だから結局作るのを諦めてしまう。書籍等をいくつか購入するけど、なんかよく分からない、やめたーってなってしまう。私もはじめはそうでした。

右も左も分からない、htmlすら分からない。何から手を付ければいいんだろうと。
分からないからとにかく調べました。調べまくりました。google先生様々です。

そうするとどうやら、webサイトには静的ページと動的ページがあるらしいというのが分かりました。静的ページというのはhtmlのみで構成されていて、基本的にそのサイトは作られればそれで終わりというwebページです。

動的ページというのは、ユーザーの行動や状況に応じてページ内の要素が変わるというものです。私はこの動的なサイトを作りたかったので、この動的サイトについてさらに調べました。

そして、動的なサイトにはサーバーサイドプログラムとデータベースが使われているということが分かりました。そんな中、PHPというプログラミング言語を見つけました。これは比較的簡単に使えて、データベースとの相性も良いとどっかのサイトで解説されていたので、じゃあとにかくphpを学ぼうと思い、書籍やグーグル先生に聞きながら勉強しました。

他にもRubyやらなんやらとありますが、初めは色々手を出さずに一つの言語で一点突破するのが最短と思い、PHPでいきました。あの、フェイスブックもPHPがベースで作られてますし、掲示板等のwebサービスはまさにこのPHPが使われていることが多いですからね。

そしてPHPのデータベースとしてはMysqlが定番ということもこのタイミングで知りました。

あとは、それを公開する場所と住所が必要です。
ネット上の土地であるサーバーと、住所であるドメインが必要です。
これも取得方法は分からなかったので「レンタルサーバー 借りる」とか「ドメイン取得方法」とか思いつくキーワードで調べまくりなんとかゲットすることができました。

ちなみに私は比較的安価でスペックも良さげだった、
「ファイアーバード」というレンタルサーバーを利用しています。
ドメインも同じ系列が運営している「スタードメイン」で取得しました。

スタードメイン – お申し込み数10万件突破記念キャンペーン中!ドメイン取得 年間580円~ PHP+MySQLサーバー付き!

ここまでで必要なものをまとめると、
・HTML,CSS
・PHP,Mysql
・レンタルサーバー
・ドメイン

これらをある程度理解して用意すれば、とりあえずサービスはリリースできることが分かりました。
次は、これらを作る作業環境についてです。
 

作業環境を整える

まず、ローカル(自PC内)で開発、動作確認ができる環境を作ります。
私はmacを使っていますので主にmacでの環境構築についてです。
 

ローカルサーバーを設置

PHPはサーバーサイドの言語なのでローカルでも使えるようにローカルサーバーを設置します。
って言っても、「MAMP」というソフトをインストールするだけです。

MAMP: Mac, Apache, MySQL, PHP

windowsの場合は「XAMPP」という同等のソフトがあります。

apache friends – xampp for windows

これらをインストールするだけで、ローカルサーバーを設置できます。
そしてPHPも動作確認ができます。sqlも付いてるのでデータベースもすぐに使うことができます。
 

エディタ

ローカルサーバーが設置できれば次はエディタです。
実際にコードを書くツールですね。

これも色々あって、シンプルなエディタから統合開発環境ソフトまで様々です。

シンプルエディタ mi
mi – テキストエディタ

mac定番コーディングソフト coda
パニック – Coda 2

統合開発環境ソフト(IDE) netbeans
NetBeans NetBeans 日本語サイト

ちなみに私が使っているのは最初に紹介した「mi」です。
特にこれといった機能はありませんが、シンプルで動作が軽いんで使ってます。
他のツールが良く分からなかったというのもありますが…。

この「mi」だけでHTML,CSS,PHPを書いてます。
ブラウザで表示を確認しながら、コード修正しながらみたいな感じです。

最近はエラーチェック(デバック)機能があるイケテルツールが無いかなと色々物色してます。
誰かいいの教えてください。素人には見分けが付かないんですよね…。

FTPソフト

これはレンタルサーバーにファイルをアップする為のソフトです。
私は「cyber duck」を愛用しております。

Cyberduck | FTP、SFTP、WebDAV、Cloud Files、Google Drive、S3用ブラウザ、MacとWindowsに対応 | Cyberduckについて

フリーソフトですけど、非常にシンプルで使いやすいのが特徴です。
ど定番みたいです。ていうか逆に他のFTPソフトを知りません…。

windowsなら「FFFTP」というのが定番のようです。

FFFTP

これで最低限の環境は整いました。
次は参考資料についてです。

書籍はやっぱり必要。その選び方

ネット上にも素晴らく参考になる情報は無数にあるのですが、やっぱり初めは書籍で一から学んだほうがいいと思い、参考になりそうな書籍を物色していました。

初めはアマゾンのレビュー等を参考にしていくつか購入するも、
かなり読みにくいモノ、理解しずらいもの等、中々良い書籍に出会えませんでした。

「これは実際に中身を見て買うしかない」と決意し、大型書店に殴り込みにいきました。
近所の本屋レベルではPHPとかの書籍ってあんまりないんですよね〜。

延べ数時間による立ち読みの末(どんだけ立ち読みしてんねん!)、いくつかフィットする書籍を見つけることができました。
それがこれです。

よくわかるPHPの教科書
毎日コミュニケーションズ 2010-09-14
売り上げランキング: 10708

 

 

3日で作るPHPアプリケーション
アスキー 2008-01-30
売り上げランキング: 325138

上記書籍はPHPの書籍ですが、HTMLはこれで軽く勉強しました。

ホームページ作成マスターブック HTML&スタイルシート基本編 改訂第2版
毎日コミュニケーションズ 2007-06-16
売り上げランキング: 585622

 

こういう学習系の書籍はやっぱり中身を自身で確認してから購入しないといけないと感じました。レビューだけでは分からないものです。しかもだいたいこういう書籍ってけっこう良い値段するんです。だから失敗は極力したくないのが本音です。

そして、あまり浮気せずにこの本で学ぶ!って1つ軸を決めてとにかくそれ1冊やりきるくらいの勢いが大事ですね。
私も、「よくわかるPHPの教科書」は前から順に一通り実践しました。
 

参考になるwebサービスを徹底的にチェックする

気になるwebサービス、話題のwebサービスはとにかく使ってみる、この姿勢大事だと思います。こんなデザインがトレンドなんだとか、あぁ、こうやって誘導してくるかぁ、とか色々勉強になります。

また、ブラウザのそのサイトのHTMLのソースを見たり、CSSを確認したりすることで、学ぶこともできます。ボタンや効果のCSSは本当に参考になります。ソースコードのチェックは必須ですね。
 

TTPの精神でやる

TTPの精神とは「(T)徹底(T)的に(P)パクる」精神というものです。
「学ぶ」という言葉の語源は「真似る」から来ているそうです。ということは学ぶことは真似ることから始まるということです。

そう、だから始めはパクれるものは徹底的にパクればいいと思います。
ただパクるのでは無く、リスペクトしてパクる。全部をパクるのでは無く、良い所を真似させて頂くということ。

全部パクってしまうと単なるコピペサイトです。良い所は徹底的にパクって学びましょうということです。

例えば上記のCSSのデザインのソースコードも参考にして、自サイトに取り込んでいけばいいんです。レイアウトも良いのであれば参考にして取り込んでいけばいいと思うんです。

ただ、コピーライトの関係もあるのであまりおっぴらげにパクるのも問題かもしれません。
ご利用は計画的にかつ自己責任で…。
 

毎日やれるだけやる(リリース日設定なんて無意味)

よく、期限を設定して逆算思考で行動するのが最短だ!という話を聞くと思います。
一見正論の様に見えますが、素人からするとどの作業がどれくらい時間が掛かるなんて分からない訳です。
そこは完全に未知の世界ですから。先の見えない暗いトンネルのようなものだと思うんです。だから逆算とかそんなことを考えずに、とにかく前に進む、1歩でも0.5歩でもいいから前に進む。

毎日1行でもいいからコードを書く。それを繰り返していくことでゴールは確実に近づいてきます。

大きな枠で期限を設定することはモチベーションに繋がるかもしれませんが、
大事なのはとにかく前に進む事、日々できるだけ前に進むこと。

未来なんて誰も分からないんですから、やってみるしか無いんです。
あまり遠くを見すぎず、目先のことに集中することがポイントだと思います。
 

個人がやるお金を掛けないマーケティング

やっと出来上がったwebサービスも結局人の目に触れなければ、存在しないのと同じです。せっかく作ったんだから、でくるだけ多くの人に使ってもらいたい、誰だってそう思うと思います。私もそう思います。

そこで大事になってくるのが「マーケティング」です。簡単に言うといかに多くの方に知ってもらうか、という戦略の部分ですね。

私もマーケティングの書籍やweb上の記事を読み漁り、勉強してますが、ここがやはりある意味最大の山場だと思います。

個人レベルでは大した広告も出せないでしょうし、知名度も無いに等しいと。
そんな状況でいかに知ってもらうか、を考えていかないといけません。

コストを掛けずに知ってもらうにはソーシャルメディアを使わない手はありません。
最近ではtwitterやfacebookですね。特にtwitterはかなりオープンな世界なので、
サービスを知ってもらうきっかけ作りには最適なSNSかなと思います。

webサービス用のアカウントを作成し、その属性に関連のある人をフォローしていくと。
フォローだけでは意味が無いのでしっかりコミュニケーションも取っていく。
地道な道のりですが、お金を掛けるか、時間を掛けるか、みたいな部分でもあります。

「いいね」ボタンや「ツイート」ボタンを設置して、ソーシャル内での波及もちょっと狙ったりもしてます。
個人でお金を掛けずにできるのはそんなところですかね〜。

あとはフェイスブックページの開設も一つの手段ですね。運用が大変そうですけど…。

私も勉強中の素人なので、まだまだ分からないことだらけですが、とにかくwebサービスは作って終わりじゃないということです。
その先のマーケティングであったり、運用という部分も重要になってくるということですね〜。
 

最後に

なんだかんだ、かなり長文になってしまいました。まだまだ伝えきれていない所はありますが、
大枠は書けたのかなと思います。

最後に伝えたいのは、
不完全でもいいから、とにかくリリースすることが大事やと思うんです。
後から修正なんていくらでもできますし、どうなるかなんて誰も分かりません。
カタチにしてリリースしないと存在しないのと同じです。

そして完璧を目指しすぎないことだと思います。
作っているとあれもしたい、これもしたいという欲がどんどん出てきます。
完全を目指すことは大事ですが、やり過ぎると、終わりのないループにハマります。
そうするとリリースすることができず、ズルズルいってしまうんです。
そこには割り切りも必要ということです。

これからwebサービスを作ってみたい!何か作ってみたいという方への参考に少しでもなれば幸いです。
長文におつきあい頂きありがとうございました。

あっ、yasappヨロシクです。

Yasapp(ヤサップ)-野菜直売所マッピングプロジェクト

ではまた。

 

よくわかるPHPの教科書
毎日コミュニケーションズ 2010-09-14
売り上げランキング: 10708


3日で作るPHPアプリケーション
アスキー 2008-01-30
売り上げランキング: 325138

ホームページ作成マスターブック HTML&スタイルシート基本編 改訂第2版
毎日コミュニケーションズ 2007-06-16
売り上げランキング: 585622

<hr>
タイトルとURLをコピーしました