ここ最近ずいぶんブログの更新が途絶えていましたが、実はWebサイトを作っていました。

発端になったのはこちらの記事↓

【2012超まとめ】確実にWEBサービスを作りたい人へ【前編】 

IT企業の端くれに務めている自分ではありますが、正直Webサイトとはちょっと遠い職種で働いてきたので、知識は素人レベル。

そんな自分が上の記事を読んで一念発起。
ブログだけでなく、サイトと呼ばれるものを作ってみたいと思い、始めてみました。

余談ですが、同じく素人である会社の後輩と2ヶ月の期間で、どちらがより良いサイトを作れるか勝負にしてみたり。

そんなこんなで出来上がったのがコチラ↓

逆転敷金
http://gyakuten-shikikin.com
 

前々から問題意識を持っていた賃貸住宅の退去時における敷金精算をめぐるトラブル。

借主側に知識という名の武器が殆ど無いことが問題と考え、無料で敷金精算に関するデータなどを提供できるサイトが作れれば、との思いから制作しました。

まだまだ生まれたばかりの手作りのサイトですが、少しずつ育てていきますので、暖かく見守ってください。


それはさておき、せっかくなのでこちらのブログではどのような流れ、どんなサイトを参考にしながら作っていったかを次なるプレイヤーのために書き記しておきたいと思います。


■Wordpressを使うことに決めてみた



まず、どうやってサイトを作っていくかですが、これは特に考えもせずWordpressを使うことに決めていました。

理由は、やはり最近話題なのとSEOにも強いとの噂を聞いたからです。

なので、まずはWordpressの何たるかも知らなかったので、最初は本を買って来ました。


WordPress 3.x スタートアップガイド
 

完全初心者向け、と言うよりはカスタマイズも今後検討する人向け、という感じでしたがまあCMSとしてのWordpressの基礎は理解できました。

こちらの本を読みながらWordpressをダウンロード、サーバーはこれもなんとなくですが、メジャーなさくらのレンタルサーバーを借りて、Wordpressをインストール。

とりあえず初期設定はこんな感じでできました。


■PHPやJavascriptを学ぶこと



続いて、サイトにどんなコンテンツを置きたいかを考えました。

まず最初に思いついたのが、自分の部屋の状態などを入力すると、おおよその精算金額を見積りできる機能。

どうやればいいか皆目検討もつかなかったのですが、WordPressと同じく、プログラムといえばPHPだろう、ということで以下のサイトをチラ見。

そふぃのPHP入門

が、どうやら簡単な計算をするくらいならJavascriptのほうが簡単だということに気づき、こちらのサイトにどっぷり。

JavaScript[JavaScriptのカテゴリー一覧] - TAG index 

ちょうど↑のサイトには計算フォームのソースが落ちていたので、ほぼそれをパクることでなんとか形になりました。

敷金精算シミュレーター~逆転敷金


■WordpressのカスタマイズにはやはりPHPが不可欠



次のコンテンツとして考えたのが、ユーザーの敷金精算に関する体験を集めるCGM的な機能。

SEO対策も兼ねて、放っておけばユーザーが勝手にページを増やしてくれる構造にできたらいいなあ、と考えました。

そこでWordPressのwp_insert_post ()関数というものの存在を知りました。

これをフォーム内のボタンに埋め込んでおいて、ユーザーがフォームに入力しておいた内容が、自動でサイトに投稿されるようにしようと。

ただ、この部分が一番苦労しました。
ネットで検索していても、自分のやりたいことにピッタリハマる記事がなかなか見つからず。

それでも、下記のページが一番参考になりました↓

Wordpressで会員サイトを作っています。 - 人力検索はてな

上のページのベストアンサーをちょっといじることでwp_insert_post()関数を用いた投稿部分は完成。

あとはフォームに入力してもらった内容が投稿のカスタムフィールドにセットされるように調整。

さらに、記事のカスタムフィールドはそのままだとmetaデータなので表示されません。

なので、下記のページを見ながら、投稿のテンプレートにカスタムフィールドを出力することにしました。

WordPress カスタムフィールドの使い方とその力

そんなこんなで長い時間をかけてできたのがこちらの機能↓

敷金精算事例投稿~逆転敷金

使い勝手については改善の余地ありまくりですが、なんか複雑っぽい機能を実装できたのでかなり満足しています。


■カスタム投稿タイプで読み物の準備



ここまでであんまり世の中にはまだないコンテンツはできた気がしたのですが、SEO的な観点ではもっとコンテンツを充実させる必要があります。

そこで、WordPressの基本であるブログ機能を使って、敷金精算に関する豆知識を書くことにしました。

が、ここで新たな問題が。

先ほどの事例投稿のところで、WordPressのデフォルトの投稿ではカスタムフィールドが出力されて表になるようにテンプレートをいじってしまったので、通常の文章を書くには向きません。

なので、WordPressの新機能(?)カスタム投稿タイプを使うことに。

WordPressのカスタム投稿(ポスト)タイプを作成するまでの手順リスト

カスタム投稿タイプ自体は上記のソースをコピペすることで簡単にできました。

それよりも問題なのはそのカスタム投稿タイプに適用するテンプレートの方。

いろんな記事を見ながらテンプレートをコピーして名前を変えて、などとやっていたのですがこれもかなり苦労しました。

何とか出来上がったのがこちら↓

敷金精算の基礎知識~逆転敷金

ここもまだまだ改善の余地ありですなあ。

カスタム投稿タイプにするとWordpressのデフォルトで投稿に対して適用される、カテゴリとかpingとかもろもろが別扱いで適用されなくなるのが一番むずかしいと感じた。


■仕上げはデザイン



最後は下記のサイトを見ながらCSSについての基礎知識を勉強。

CSS3-HTMLクイックリファレンス

あとはいろいろなサイトからデザインをパクってきたのでここは羅列で。

CSS Buttons Generator for your pleasure 




世の中にはいろいろ便利なサイト、機能があるんだなあと勉強になりました。


こんな感じでサイトが一応の完成。

2ヶ月と書きましたが、実際に作業できたのは週末だけなので、賞味40時間くらいだと思います。

自分が作ったサイトが良いものかどうかはさておき、サイト自体を作るのはちゃんとステップを踏めば難しくないということが実感できたのはよかった。

世の中のWeb制作を夢見る素人の方の励みになればこれ幸い。