僕が見た作ってみた系の記事は、Feedやスクレイピングとかを使ったwebサービスが多かったのでほとんど知識のない僕は同じ様なものを作ってみただけだけど、自分用にコード書き換えるときとか実用的な勉強ができ、最初から一人で一から作ろうとしてた時より、結果成長できた。最初はコピペでもいいからとにかく作るべきな気がする。

作品というには程遠いがひとつのものを完成させたことによってモチベーションが上がった。

自分が使いたいものを作るってゆうのは大前提なんだろうけどその上で他の人が使いやすいってゆう客観的な対極の目線も必要なんだなと実感。

はてぶ数でのタブ切替をページ内でやったり各月間ランキングとか後々勉強しながら追加して行こうと思ってます。

まだ全然最終型ではないですが、とりあえず見れるようにはなったので公開しました。

初心者で色々突っ込みどころも多々あると思いますが、やさしくこっそり教えて頂ければ嬉しいです。

Permalink | 記事への反応(3) | 19:17

2012-09-26

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

前編はこちら

http://anond.hatelabo.jp/20120926165407

■ステップ６：ＭｙＳＱＬ(10 時間)

会員情報や文章などのコンテンツを保存しておくデータべース、ＭｙＳＱＬを調べます。

データベースは他にもPostgreSQLやSQLiteなどが有名ですが、やはり王道を勉強します。

MySQLはCakePHPや、ステップ４のWordPress他、よく使いますので把握しておきましょう。

基礎からのＭｙＳＱＬ

http://www.amazon.co.jp/%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E3%81%AEMySQL-%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E3%81%AE%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9E%E3%81%AE%E7%A8%AE%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-%E8%A5%BF%E6%B2%A2-%E5%A4%A2%E8%B7%AF/dp/4797344385/ref=sr_1_1?s=books&ie=UTF8&qid=1348063628&sr=1-1

今はまだ関係ありませんが、余裕があればこれも読むといいです。

MySQLによるタフなサイトの作り方

http://www.amazon.co.jp/MySQL%E3%81%AB%E3%82%88%E3%82%8B%E3%82%BF%E3%83%95%E3%81%AA%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9-%E4%BD%90%E8%97%A4-%E7%9C%9F%E4%BA%BA/dp/4797353937/ref=sr_1_1?s=books&ie=UTF8&qid=1348063787&sr=1-1

操作はコマンドラインを覚えていく方向で、始めはブラウザで操作できるphpMyAdminを使ってＯＫです。

ストレージエンジンはとりあえずInnoDBで。

■ステップ７：休憩(10 時間)

技術調査はこの位にして、これからは実際にWebサイトを作っていきます。

ここまで来ると何となく、Webサイトがどんな仕組みで動いてるかが分かってくるので、

ステップ０でイメージした作りたいサイトがどんな技術で実現出来るか調べます。

冒頭の「完全に一致」の中の人のようにスクレイピングしたり、

TwitterやGoogle、Yahoo、AmazonなどのAPIを使ってサテライトサイトを作っても良いと思います。

が、高度な事をするとはまりやすいので、ある程度やって無理だったらあきらめて次回にまわしましょう。

まずは何か一つ完成させる事のほうが大切です。

それから開発効率ＵＰのため、Chromeにプラグインを入れましょう。

説明はそれぞれのリンク先を見て下さい。

CSS Viewer

https://chrome.google.com/webstore/detail/ggfgijbpiheegefliciemofobhmofgce

Firebug Lite for Google Chrome

https://chrome.google.com/webstore/detail/bmagokdooijbeehmkpknfglimnifench

View Selection Source

https://chrome.google.com/webstore/detail/fbhgckgfljgjkkfngcoeajbgndkeoaaj

Pendule

https://chrome.google.com/webstore/detail/gbkffbkamcejhkcaocmkdeiiccpmjfdi

BuiltWith Technology Profiler

https://chrome.google.com/webstore/detail/dapjbgnjinbpoindlpdmhochffioedbn

iPSim

https://chrome.google.com/webstore/detail/gcligifbhamdimemnemmlkffkpmflehh

Color Picker

https://chrome.google.com/webstore/detail/ohcpnigalekghcmgcdcenkpelffpdolg

CSS Tester

https://chrome.google.com/webstore/detail/pjncppaiejjkcjlcgegcbmhgkflhenfp

MeasureIt

https://chrome.google.com/webstore/detail/pokhcahijjfkdccinalifdifljglhclm

あとはFireFoxにはFireBug。デバッグの定番らしいです。

https://addons.mozilla.org/ja/firefox/addon/firebug/

それから、空いた時間に無料のプログラミング動画サイト「ドットインストール」を見ておくと

ここまでの知識が定着すると思います。

ドットインストール

http://dotinstall.com/

■ステップ８：ドメインを取る(10 時間)

ステップ７で作りたいサイトがイメージ出来てきたら、ドメインを取りましょう。

サーバーがさくらの場合はドメインもさくらで取得すると楽ですが、もっと安いところもあります。

希望するドメインが空いているか調べて取得、空いていなければ他のドメインを考えます。

さくらのドメイン取得

http://www.sakura.ne.jp/domain/

ムームードメイン

http://muumuu-domain.com/

バリュードメイン

http://www.value-domain.com/

定番の.com、.net、.orgは誰が見ても親しみがあるし安いので、できればこの３種類のどれかにしたい所ですが、

一般的な言葉はほぼ埋まっているので、その場合は.jp等にしても良いでしょう。

日本語ドメイン(www .日本語.netみたいな)は流行っていないですが、

自分のサイト名が「○○○.com」のような名前の場合は一緒に取得して、アルファベットのドメインにリダイレクトしましょう。

（Chrome ユーザーがURL欄で検索する時、「○○○.com」のように後ろに.xxxが付いているとそのURLに直接アクセスしてしまい、

　検索にならないので、アクセスの機会損失を防ぐため。）

僕はバリュードメインで取得して、サーバーはさくらのレンタルサーバーにしました。

その際の親切な設定方法の解説はこちら。

VALUE DOMAIN で取得したドメインをさくらのレンタルサーバで使う

http://nekohacks.com/wordpress/domain/value-domain/

■ステップ９：サイトの基礎部分の開発(100時間)

実際にサイトを開発していきます。

どんなサイトで、どんな機能があって、どんなページがあるかノートに書き出して行きます。

初めにデータベースのテーブルやレコードの構造を考えて、

次にメインとなる機能をプログラムして行きます。

サイトの基本的なレイアウトをCSSで組みながら、デザインのイメージもしておきましょう。

ここではデザインはまだやりません。

先にデザインを作っても、プログラムを進めていく過程で変更がでたりする為です。

（でもあんまり後回しにしても、見た目がチープなせいでモチベーションが下がったりするので、次のステップでやります）

あと、ここで気をつけたいのは、あくまでメインとなる機能の開発を優先することです。

「あったほうが良いな」程度の機能は後回しにします。

外堀から埋めていくとそこでモチベーションが尽きてしまったり、

メインの機能を実装してみたら外堀の修正が発生してしまったりするためです。

始めると分からない事がどんどん出てくると思うので、本を読み返したりGoogle先生で検索しながら進めて行きます。

なかなか進まなくて検索８割、コーディング２割くらいの進め方になると思いますが、それでＯＫです。

長い暗闇を抜けると、少しづつ視界が開けてきます。

メインの機能がなんとなく出来たら次に進みます。

■ステップ１０：サイトのデザイン(30時間)

メインの機能が何となくできたら、デザインをやります。

鉛筆殴り書きで良いので紙に描いてみます。

いきなり慣れないＣＧソフト上でデザインすると、

いじっているだけでモチベーションを使い切ってしまったりするので危険です。

ＣＧソフトは色々ありますが、おすすめはフォトショ(Photoshop)です。

WebサイトのデザインはFireworksなども有名ですが、学習コストがかかるので、

Webサイトにもそれ以外にも使えて一番つぶしが効くフォトショップでOKです。

今年からクラウド契約が始まり、今なら１ヶ月８０００円、年間契約なら１ヶ月５０００円で

Adobeのソフトが全部使い放題です。

Adobe Creative Cloud

http://www.adobe.com/jp/products/creativecloud.html

お勧めの本はこれ

10日でおぼえるPhotoshop入門教室

http://www.amazon.co.jp/10%E6%97%A5%E3%81%A7%E3%81%8A%E3%81%BC%E3%81%88%E3%82%8BPhotoshop%E5%85%A5%E9%96%80%E6%95%99%E5%AE%A4-CS2-CS%E5%AF%BE%E5%BF%9C-%E4%BA%95%E4%B8%8A-%E3%81%AE%E3%81%8D%E3%81%82/dp/4798111953/ref=sr_1_1?s=books&ie=UTF8&qid=1348498454&sr=1-1

基本操作を覚えたらWebで情報を収集します。

PHOTOSHOP VIPさんが親切です

http://photoshopvip.net/

一から全部自分で作らなくても、素材サイトからダウンロードして加工するなどして手間を省きます。

ＰＣ・スマホ・携帯(ガラケー)全部に対応するのは大変なので、

初めはそのサービスを最も使うだろうと思われるどれか１つに絞ります。

初めに作る際のお勧めはＰＣ用サイトです。

ＰＣ用サイトならスマホでも最低限アクセスはできるし、携帯は縮小傾向なので優先度低、

スマホは画面サイズがまちまちでタブレット端末が目下発展中、AndroidはブラウザがたくさんあるがChromeに統一されていくかも、

な混沌とした状況なのでお勧めしません。

複数デバイスへの対応はリリース後でも遅くありませんが、

対応する際はＣＳＳを切り替えてレスポンシブレイアウトにするのがお勧めです。

その他、困ったらTwitter社が公開しているブートストラップを使うのもお勧めです。

ブートストラップはcssのフレームワークで、簡単にシャレ乙なデザインに仕上がります。

超便利！Twitter BootstrapでさくさくWeb開発

http://blog.asial.co.jp/887

どうしても自分でイケてるデザインが出来ないと思ったら、友だちに頼んだり、ＳＮＳのコミュで募集したり、

デザイン系の大学や専門学校の掲示板にビラを貼らせてもらったりしましょう。制作費が出せればランサーズで募ってもいいかも。

Lancers - 仕事をフリーランスに発注できるクラウドソーシングサービス

http://www.lancers.jp/

僕はたまたまフォトショップの使用経験があったので、ここにかけた時間は30時間ではなく5時間程です(トータル275時間で開発)。

後編はこちら

http://anond.hatelabo.jp/20120926165920

Permalink | 記事への反応(3) | 16:55

2012-05-20

■家入さんとペパポの関わりって今もあるの？

家入さんがペパポ創業者なのは知っているけれど、その後、株を手放さなかったっけ？

今も顧問とかでお金入っているのかな、この辺が分からず。

もし、関わりがある場合、

家入さんを非難する人が、ロリポップやムームードメインを使っていたらウケるよね。

【追記】関わりはないとのことです

http://twitter.com/#!/hbkr/status/204120972629000193

創業者ではありますが、今は取締役や顧問、株主と言った関係は一切無いですよ

Permalink | 記事への反応(4) | 11:17

2012-05-16

■ムームードメインの解約で誤爆した人いるんじゃねーか、という話

先日、初めてムームードメインで取得しているドメインの解約を行ったんだけれど、クソ不親切だった。

コントロールパネル→ドメイン詳細→ドメイン情報内の契約更新をクリック。

ここで取得しているドメインの一覧が出てくる。んで、解約ボタンを押せばいいんだけれど、

この解約ボタンが結構小さくて押しにくい（笑）。

解約したいドメインが継続したいドメインに挟まれているときとか、すっげー緊張するぐらい押しにくい。

ボタンにカーソルを合わせたら色が変わるとか、そういうのを導入するか、あるいは解約ボタンを押したら

「本当に〇〇.com」を解約するのですか？」など、確認の文言を入れて欲しい。

一応、「解約するんですか？」の文言は出てくるんだけれど、本当にそのドメインを自分は選択したのかの確認がないと意味ないっしょ。

Permalink | 記事への反応(0) | 16:00

2011-07-01

■さくらインターネットにサブドメインを指定

さくらインターネットにサブドメイン指定をチャレンジ！

何回かやっているけど、いつもやり方とかで迷ってしまうんだよね。困ったもんだ。

まずはドメインをどこで管理しているのか忘れてしまったので、それを探すと。
- 恐らくムームードメイン https://muumuu-domain.com/
- やはりムームードメインだ。

次はムームードメインから、さくらインターネットのサービスにどうやってつなげるかだ。
- ネームサーバをみると、すでに弊社サービス以外のネームサーバってなってるな。
- これは恐らくさくらのやつなんだろうな。

次はさくら側の設定かもな－。
- ムームードメインで取得したドメインをさくらインターネットでサブドメインとして... - Yahoo!知恵袋 http://bit.ly/mq2QdS
- こんな質問を発見。これにのっとってみよう。

まずはさくらのほうにいってみるか。
- ドメイン側じゃなくて、サーバ設定側のメニューの下の方にある、ドメイン設定をクリックしてみる。
- 新しいドメインの追加ボタンを押してみると。
- そうすると、意外と選択肢が多い。。。
  - 1. 独自ドメインを新規取得する
  - 2. さくらインターネットで取得したドメインを使う
  - 3. さくらインターネットの60種類のサブドメインを使う
  - 4. 他社で取得したドメインを移管して使う
  - 5. 他社で取得したドメインを移管せずに使う・属性型JP ドメインを使う（さくら管理も含む）
- 恐らく5だ！！ということで、次に進む。