WEBデザイナー"Zoe"の「サービスぶち上げ奮闘記」

WEBデザイナー"Zoe"の「サービスぶち上げ奮闘記」

プログラミング初心者のWEBデザイナーが、WEBサービスを立ち上げるまでの奮闘記です。勉強する中で調べたことや、PHP,SQL,フレームワーク,セキュリティ等分かり易く説明したサイトがあればまとめてます。

もう5年になりますか。

このブログを初めて、色々試行錯誤しながら

最終的に出来上がったのが下記のサービス。

 

アパレルショップガイド

 

結局Cakephpやら何やら勉強したものの、1から作り上げることは叶わず・・

Wordpressのユーザー検索機能を使って無理くり作り上げました。


この頃はとにかく何か作りたいってので、

ろくに仕事もせずに没頭してて、

結局貧乏して最終的には工場勤務したりしてました。

 

そんで今ボクは何をしているかというと、

小さなウェブ制作会社を立ち上げてもう1年。

ようやく軌道に乗ってきました。

 

福岡のホームページ制作会社 アダプター

 

僕は作るのも好きだけど、経営とかマーケの方が向いてるみたいです。

 

それでもやっぱり思う。

いつか面白いサービス作ってみたいなー・・と。

こんにちはZoeです。

よくCMSの管理画面で、このアメブロのエディターみたいなのが使われてますが、
あれってどうするんだろ~と思って調べたら、TinyMCEというjavascriptのエディターがよく使われてるらしいのでメモ。

TinyMCEというと、WordPressのプラグインとして何度かクライアントワークで使った記憶があります。これってJavascriptで出来てたんですねぇ・・。
意味もわからず使ってましたが、確かにWORD見たいな感じで使えるので便利なんですよねぇこれヽ(=´▽`=)ノ

TinyMCEの使い方は下記の記事が凄くわかり易かったです。
初心者がWEB開発に挑戦 PHP基礎_TinyMCEを使うには

こんな簡単にできるとは!凄い・・。

ただ実際のクライアントワークで使うと、デザインセンスのないお客さんが文字サイズや文字色を自分の好き勝手に変えちゃって、カオスなサイトになる可能性があるので注意が必要です。笑
どうもZoeです。

今回は前回に引き続き、サイトの仕様を決めて行きたいと思います。
前回あらかた機能を考えたので、次はDB設計行います。
ちなみに、前回と今回でかなり期間が開いてますが、何回も失敗を繰り返してやっと記事に出来そうな感じに纏まったので投稿しました。笑

ここを間違うと、後々ものすごーく苦労するらしいので、WordPressがどうなってるかとか色々見て、結構慎重に考えました。もちろん、データベースとCakePHPについてもかなり勉強しました・・・。
CakePHPを使う予定なので、それに準拠したDBにしなければ・・(;´д`)ということで結構難しかったです・・。
DB設計は以前紹介したECサイト作成の記事を参考にして、まずエクセルで纏めました。

その後、wwwsqldesignerというDB設計用のソフトを落として設計してみました。
参照:ブラウザ上でさくさくデータベースの設計ができる『WWW SQL Designer』がすごすぎる | IDEA*IDEA
これ普通にローカル環境のhtdocsに置いてアクセスするだけで使えるので、そういったソフトの少ないMAC環境でもちゃんと動いてくれて重宝します。Windows環境だと他にも沢山のフリーソフトがあると思いますのでぐぐってみてください。

んで出来たのが下記。。。
$WEBデザイナー"Zoe"の「サービスぶち上げ奮闘記」-DB_tbl

なんか多くねぇええ・・!?と思うかもしれませんが・・
はい、超多いです。ごめんなさい。実は、訳あって色々追加してます。

最初は下記のような構成で作成してました。
 ■users(ユーザー情報)
 ■shops(ショップ情報)
 ■news(新着記事)

しかし、設計していく中で
 ・CakePHPの命名規則無視してんじゃん俺(CakePHP使用予定)
 ・CakePHPのACL使うと実装楽そう(必要分のテーブル追加)
 ・やっぱこの機能欲しい、あの機能も欲しい(機能追加多数・・)
と・・CakePHPの命名規則やDB設計を学んでいく内にこんな感じになりました。

追加予定の機能は主にユーザー管理周りで、こんな感じになってます。
 ・ACLなるものを使う(ユーザーに権限を持たせて、アクセスできるアクションを制御)
 ・一般ユーザーも登録可能にして、membersとして各種処理系追加
 ・一般ユーザーにもマイページを持たせて、閲覧履歴とかお気に入り店舗とか見れるようにする
 ・店舗ユーザーは管理画面から新着情報の登録と、イベント情報の登録が行えるようにする
 ・管理者ユーザーをadminsとして追加して、管理画面を追加
 ・管理者ユーザーはユーザー情報の閲覧と追加削除を行えるようにする(phpMyAdminからDBを弄れるので無くてもいいかも)

画面遷移の流れとして、全てのユーザーはログイン処理を必ず行う為、
ログイン・ログアウト関係はusersに全て纏める事にしました。

画面遷移の流れとしては、
ログイン画面→ユーザー権限識別→各管理画面にリダイレクト
のような感じでおkかなと。

これだとコントローラーの都合上、ログイン・ログアウト処理系のURLが、全部/users/◯◯/になってしまうんですが、なんかrotesを弄るとURLは自由自在っぽいので、後で対応します。(最悪htaccessでもどうにかなる気がします・・多分)

という事で、いよいよ実装に入っていこうかなぁー・・と。

今後の予定としては
 ・テストデータをINSERT INTO
 ・とりあえずBakeしてCRUD必要そうな所作る
 ・モックアップ作る
 ・検索機能系作る(searchプラグインでなんか行けそう)
 ・ログイン、ログアウト処理系作る
 ・各種管理画面作る
 ・エラー表示をcakephpっぽくなくする
 ・店舗を登録しまくる(地味に大変そう・・)
 ・余裕があればajax対応とかする
こんな感じでしょうか・・・?(´Д`)ハァ…

全部やってたら1年ぐらいかかりそうですなぁ。笑
がんばりまっしょ!


追記--------------------
取り急ぎWordpressで構築しました。
服屋・アパレルショップ・雑貨屋の検索ポータルサイト
こんにちは、Zoeです。
このブログってSEOとかなんも出来てないけど、アメブロのSEO効果ってどんなもんなんや!
ということで、SEOチェキを使って、検索順位を調べてみました。

■結果
キーワードGoogleYahoo!
WEBデザイナー Zoe1位1位
WEBサービス ぶち上げ1位1位
サービス 立ち上げ 奮闘記1位1位
WEBサービス 奮闘記4位4位
サービス 立ち上げ デザイナー9位9位
WEBサービス 立ち上げ デザイナー4位4位
サービス 立ち上げ WEBデザイナー16位16位



なんかすごい。
ぶち上げとか言うワードで検索する人いないでしょうが・・・。
(人来ないのに)1位になってることに感動しましたヽ(=´▽`=)ノ
どうも。Zoeです。
なんと最近のアメブロはCSSが使えるらしく・・・(´・ω・`)すごい
面白そうだったのでWEBデザイナーらしく軽くいじってみました!
勿論オリジナルテーマです!とあるサイトの配色をちとパクりましたが・・笑

と・・軽くのつもりがハマってしまい、
何気に2時間ぐらいいじくり回してました・・。

最初のクラシックテーマと比べたら結構見やすくなって、
"今っぽい"デザイン(笑)になったのではないでしょうか\(^o^)/

今後アメブロでブログを立ち上げる時はこのテーマを使いまわそうと思います。笑
こんにちは、Zoe(ぞえ)です。

以前の記事でも軽く触れてるんですが、僕のWEBデザーナ―という仕事上、クライアントワークでWordPressを使うことが結構多いです。
WordPressのテーマファイルは、基本的にforeachとwhileのループとかecho文で出来てるんですが、正直テーマファイルいじると直ぐエラーになってしまうので、殆ど意味も分からずコピペしてたんですよね・・(;´д`)

しかし最近PHPばかりいじってるせいか、WordPressのコードの意味とかがなんとなく分かるようになってきて、「おぉ、ここはそういう意味だったのか!」とか「こうすればいいんじゃね?出来た!」等など、実務で活かせるようになってきましたヽ(=´▽`=)ノ
データベース周りも、以前は怖くて開きすらしなかったphpmyadminを弄ってバックアップを取ったりして、勉強の成果がじわじわと出てきてるのを実感しております。笑

特に自信作なのが、「今から2週間分のスタッフの出勤予定を入力してもらって、吐き出す」というプログラム。
管理画面側は、カスタムフィールドテンプレートなんかの拡張プラグインでは流石にそこまで特殊なフィールドは作れなかったので、WPAlchemyという管理画面のテンプレを作成出来るライブラリを使った(DB周りは勝手にやってくれる)んですが、それでも「今から2週間分」という部分は自作する他無く、四苦八苦しながら作りましたが、なんとか動いてくれました!

■管理画面
$WEBデザイナー"Zoe"の「サービスぶち上げ奮闘記」

■表示画面
$WEBデザイナー"Zoe"の「サービスぶち上げ奮闘記」

その他にも「今日出勤するスタッフのページ」や「今から2週間分の出勤表に、その日出勤予定のスタッフを出力するページ」等あったので、表示部分が結構めんどくさかったです。

まだまだWEBサービスを構築するには時間がかかりそうですが、
この調子で頑張ろうと思います(^^)
どうもZoeです。
今日は服屋の検索サイトの内容を、もうちょっと詳細に企画してまとめてみました。

サイトの基本機能


管理者画面


  ・ユーザーの登録削除が出来る★
  ・サイトの新着情報が投稿できる★

ユーザー管理画面


  ・店舗の登録ができる(店舗ユーザーとしての登録)★
  ・一般ユーザの登録ができる(一般ユーザーとしての登録)
  ・ユーザー管理画面へID&PWを使いログイン出来る★
  ・管理画面では店舗か一般ユーザーかに応じて表示内容が変わる
  ・店舗ユーザーは新着情報や店舗情報を更新できるようにする★

表示画面


  ・店舗の複合検索ができる★
  ・店舗の詳細画面で詳細情報を見ることが出来る★

その他の機能


  ・店舗は無料、シルバー、ゴールド会員で使える機能を分ける(シルバーならトップにランダム表示、ゴールドなら広告バナー掲載等)

※ ★は絶対欲しい機能。それ以外は無くても良いかなという機能です。

サイトマップ


トップページ【動的】
 ┣ショップ検索【動的】
 ┣ショップ検索結果【動的】
 ┣ショップ詳細 ✕ ショップ数【動的】
 ┣新規ユーザー登録【動的】
 ┣新規店舗登録【動的】
 ┣サイトマップ【静的】
 ┣プライバシーポリシー【静的】
 ┣お問い合わせ【動的】
 ┗運営事業者【静的】


こんな所でしょうか。
店舗の権限と一般ユーザーについては、まぁ無くてもいいんですが、今後の展開を考えてDB設計したほうがいいかと思いいれてます。

次回はDB設計していこうと思います。
こんにちは、Zoe(ゾエ)です。

このブログの目的は一応「プログラミング初心者のWEBデザイナーだけど、頑張ってWEBサービスをぶち上げようぜ!」って所なんですが、なかなかプログラミングの勉強に追われて先へ進みません・・orz

このままでは、完全な企画倒れになってしまいそうなので、まず仕様をあらかた決めておいて、モチベを下げないようにしたいなぁと。
ということで、当初は服屋の検索サイトを作るつもりだったので、その仕様をまとめていきます。

まず勝手にライバル視しているZOZONAVIなんですが、まぁ流石に機能が多くて、綺麗なサイトです憎たらしい!(#・∀・)

しかし機能面で、ZOZONAVIには無いものを作らないと意味が無いので、どうしようかと・・。

僕が服屋を探すんだったらまず洋服のジャンルとか価格とかで探したいので、それを検索項目に追加。ZOZONAVIの検索機能にあるもの(地域、ブランド等)は大抵揃えていきます。
そんでもって、ZOZONAVIが扱ってる店舗は凄く洗礼された綺麗なお店が多いので、ここには載らないような小さな店舗も検索対象として欲しい所です。

店舗データに関しては僕が前店舗分更新してたら大変なので、店舗が登録できるよう会員制にしたいですね。最初は僕が基本データを集めて登録 → 店舗が登録申請したら編集権限を譲渡
という流れでいきたいです。登録申請時に電話番号を入力してもらうようにして電話確認すれば、手間は増えますが確実に実店舗の登録ができますかねぇ。

出来れば会員に権限を持たせて、無料・有料会員と分けたらそれっぽく収益も出せますね(ごくわずかでしょうけど・・)。有料会員はトップに出したりして露出度が上がるような設計にしましょう。

うん、まぁとりあえずやりたいことはコノぐらいでいいでしょう。
使用言語は勿論さんざん勉強しているPHP+Mysqlで
WEBアプリケーションフレームワークとしてCakePHPを使って行きたいと思います。

ちなみに仕様とかコードは公開出来るだけ全部公開していきたいと思ってます。
こんなパッと出のアイディアパクられたところで、アパレル検索サイト最強のZOZOさんがおりますし、金にはならないと思うので別にいいです。笑
それに、どういう仕組で動いてるのかこのブログを読んでる人が分かったほうが、デザイナーさんとしては分かり易いでしょうし、プログラマーさんとしては指摘もしやすいでしょうし。

一言でも苦情でもいいからコメントが欲しいですねぇ。
なかなかコメントしづらいブログに仕上がっちゃってるんですかねぇヽ(=´▽`=)ノ笑

まっがんばっていきまっしょい!
前回挫折しかけたCakePHPですが、調べにしらべまくってサンプルプログラムとか構築しまくってたら、何となく仕組みが分かってきました。(とりあえずCakePHP公式のブログチュートリアルとかも何回か作ってみてます)
んで、今後CakePHPで色々作る時に最初にやっとくノウハウとしてちょっとまとめとこうと思います。

1.データベースを作成しておく!


色々する前に命名規則に従ってテーブルを作成しておく。
■主な命名規則は下記
・テーブル名は複数形で書いて、長いのは_(アンダースコア)で区切る。
 例:users , shops , news , shop_categories こんな感じ。単数形・複数形に関してはかなり柔軟に対応してくれる。
・テーブルのプライマリキーはid一択でauto_increment(自動連番)つけとく。users_idとかにしちゃうと後で面倒。
・カラムにcreatedとmodified(両方DATETIME型)を作っとくと、CakePHP側で勝手に作成日時と更新日時を書いてくれるので便利。
・他のテーブルを引っ張ってくる(アソシエーションする)場合は、◯◯(単数形)_idで引っ張れるから後で便利。
 例:ユーザーごとのお気に入り店舗テーブルとかだと、favoritesテーブルのカラムにuser_idを入れとく、とか。

2.bakeでとりあえず焼く!


とりあえずコマンドプロンプトとかコンソールとかで、
¥ cd /●cake落としたフォルダ●/まで行って(cd はフォルダ移動出来るコマンド)、
./app/Console/cake bakeと実行。
bakeで[D]etabaseの設定。
■ベイクに関して
・Q&Aみたいで楽しい。
・覚えると作成・読込・更新・削除(Creat,Read,Update,Delete略してCRUD)の機能が5秒ぐらいで作れる
・その他CRUDが必要なアプリケーション部分はひと通り焼いておく
・bake allで全部焼ける(めんどくさい人はとりあえずbake allしとくと5秒でジューッ!その代わり要らない所もジュー・・)
・bake view allとかcontroller allとかmodel allとかで各MVCだけ全部焼くとかいう小技もある

3.トップページの赤や黄色のエラーを消す!(ついでにデバッガー入れる)


bakeしたらデータベース設定の所は解消してるはずなので、(してない場合はもう一回ベイクするか、直接app/config/database.php弄る)セキュリティソルトとかの設定と、DebugKitのインストールをしとく。
■セキュリティソルトとかの設定変える
/app/Config/に入ってる core.php 開いて、
 Configure::write('Security.salt', '●適当な文字列を並べ立てる●');
 Configure::write('Security.cipherSeed', '●適当な数字を並べ立てる●');
●~●を変更。
■デバッグキット入れる
①ダウンロードしたdebugkit_masterみたいな名前のフォルダを、app/plugins/に入れてDebugKitに名前変更。
②/app/Config/bootstrap.phpを開いて、
 CakePlugin::loadAll(); // Loads all plugins at once
 CakePlugin::load('DebugKit'); //Loads a single plugin named DebugKit
のコメント外す。
③/app/Controller/AppController.phpを開いて、コンポーネンツ部分を追加。
class AppController extends Controller {
// デバッグキット読み込み
var $components = array('DebugKit.Toolbar');
}
とりあえずこれで全部緑色になる。


4.必要に応じてプラグインを入れる!


一からロジックを組んでいくと、ものすごい時間を要するので、使えるプラグインはなるべく使うようにする。特にCakeDC系のプラグインは便利なものが多い(usersプラグインとかイイネ!)。その他CakePlusとかはバリデーションの時に便利そう。


なんというか・・
完全に自分用のメモなので、ちょっと意味分かんない記事になってますがあしからず\(^o^)/
こんにちはZoeです。
大分期間があいてしまいましたが、勉強はちょこちょこやっております。
その中で素晴らしい連載記事を見つけたのでメモ。

プログラミング未経験から始めるPHP入門

この記事最初から読んでみて下さい。凄いです(´Д`)
最初の方はPHP入門ちっくな、変数や関数の話が出てきますが、
テーブル設計の基本や、PEARライブラリの使い方を経て、
フォームからデータベースへの値の受け渡しを行い、
最終的に簡素な作りのECサイトまでを作成する最強マニュアルになってます。

勿論僕も全部読んで作成してみたわけですが、なんかワクワクが止まりません!
ホントにそれっぽいサイトが出来ました!!!!ヽ(=´▽`=)ノ

↓実際に作るサイト
$WEBデザイナー"Zoe"の「サービスぶち上げ奮闘記」-ec

なんとなくですが、全体の構築の流れが分かるのでオススメです!