< http://anond.hatelabo.jp/20120... | ■ >

2012-09-14

■週6フリーターもWEBサービス作ってみました。

こんにちは。週6フリーターです。WEB業界で働く為に勉強中です。

ちゃんと働いてカーチャン温泉につれてくんだ。。。

下記の記事に触発されて自分もWEBサービスを作ってみました。

・『自分でWEBサービスを作りたいと思っている人へ』

　http://anond.hatelabo.jp/20101203150748

・『Rails3 と jQuery で、真面目にオシャレなエロサイトをつくってみました』

　http://d.hatena.ne.jp/inouetakuya/20120331/1333192327

あ、でも今回作ったものはエロ関係ありません（笑）

下記が今回の製作物になります。

------------

★今回の製作物

　『はてブ1000users超え記事アンテナ(´・ω・)』

　http://hatebu-1000users-over.com/

　・このサイトについて

　はてなブックマークにて1000users以上取得した記事をジャンルごとに自動取得しているアンテナサイトです。

　カテゴリ（タグ）は適当。はてブ上位の記事に共通しているタグを適当に集めました。

　カテゴリ

　・政治 : http://hatebu-1000users-over.com/seiji.html

　・仕事 : http://hatebu-1000users-over.com/work.html

　・就活 : http://hatebu-1000users-over.com/syukatsu.html

　・起業 : http://hatebu-1000users-over.com/kigyou.html

　・レシピ : http://hatebu-1000users-over.com/recipe.html ※全国の奥様にオススメ!!

　・ライフハック : http://hatebu-1000users-over.com/lifehack.html

　・勉強 : http://hatebu-1000users-over.com/study.html

　・英語学習 : http://hatebu-1000users-over.com/english.html

　・健康 : http://hatebu-1000users-over.com/kenkou.html

　・WEBサービス : http://hatebu-1000users-over.com/webservice.html

　・WEB製作 : http://hatebu-1000users-over.com/webseisaku.html

　・デザイン : http://hatebu-1000users-over.com/design.html

　・スマートフォン : http://hatebu-1000users-over.com/smartphone.html

　・プログラミング : http://hatebu-1000users-over.com/programming.html

　・2ch : http://hatebu-1000users-over.com/2ch.html

　・NAVER : http://hatebu-1000users-over.com/naver.html

　・Twitter : http://hatebu-1000users-over.com/twitter.html

　・Togetter : http://hatebu-1000users-over.com/togetter.html

------------

★インスパイア元

・『はてなブックマークで「１０００users」越えの超優良エントリーだけを抽出する方法』

　http://blog.livedoor.jp/tkfire85/archives/55471814.html

・『はてブの定番！１０００ブクマ連発の「NAVER まとめ」のまとめ。』

　http://blog.livedoor.jp/tkfire85/archives/55513151.html

「自動抽出したら便利かも？」と思った次第です。

------------

★使用した技術

①Google Feed API

　・解説：RSS情報の取得と出力に使用。

　「"仕事"というタグで1000users以上取得」という条件をフィード出力など。

　・参考サイト様

　　『Google Feed API』 ： https://developers.google.com/feed/?hl=ja

　　→公式サイト

　　『Google AJAX Feed API入門』 ： http://www.ajaxtower.jp/googleajaxfeed/

　　→スクリプトまんまお借りしています。この場を借りて感謝。

②twitterbootstrap

　・解説：Twitter社が提供するCSSフレームワーク。サイトデザイン（外見）に使用。

　　自動でレスポンシブ、適当に組んでもそれなりの今風サイトになるので便利。

　・参考サイト様

　　『Twitter Bootstrap』 : http://twitter.github.com/bootstrap/

　　→公式サイト

　　『Twitter Bootstrap (v2.0)の基礎』: http://dotinstall.com/lessons/basic_twitter_bootstrap_v3

　　→超有名な初心者向けプログラミング学習サイトのドットインストール様。

　　　HTML,CSS,PHPの基礎習得もこちらで。上記のサービスくらいは十分に作れます。

　　『Bootswatch』 ： http://bootswatch.com/

　　→Twitterbootstrapの外見を一発で変えることが可能です。

③はてなブックマーク数を画像で取得

　・解説：どれだけはてなブックマークにてブックマークされたか。

　　ブックマーク数を画像で取得することで説得力を持たせてみました。

　　1000を超える数字が並んでいるとなかなかに壮観。

　・参考サイト様

　　『指定したサイトのはてなブックマークの人気エントリを表示』：http://www.ajaxtower.jp/googleajaxfeed/sample/index1.html

　　→まんまです。こちらもスクリプトまんまお借りしています。この場を借りて感謝。

④忍者ツールズ

　・解説：ソーシャルブックマークボタンのセットが欲しかったので使わせて頂きました。

　・参考サイト様

　　『忍者ツールズ』 ： http://www.ninja.co.jp/

　　→今回使用させていただいたサービスの他にも便利なツールが盛り沢山です。

⑤Favicon

　・解説：お気に入りとかの横に出る画像のあれですね。

　・参考サイト様

　　『Favicon Japan!!』：http://www.favicon.jp/favicon_auto_create/ :

　　→任意の画像を自動でFaviconに変更してくれます。便利。

⑥その他

　・使用サーバー

　『エックスサーバー』 ： http://www.xserver.ne.jp/

　→堅牢。信頼出来るレンタルサーバー様です。

　・基礎学習

　『ドットインストール』 ： http://dotinstall.com/

　→上でも触れましたが有名な初心者向けプログラミング学習サイト様。

　　こちらの講座をだら見しているだけでも勉強になります。

　・副産物

　『2chまとめサイトアンテナ』 ： http://2ch-matome-site-antena.com/

　→せっかくなのでなんか別のも抽出してみようかと。。。

　・副産物内のAmazonベストセラー素敵リンクのHTMLとCSS

　『Amazonのランキング情報(RSSフィード)を表示するブログパーツ。アフィリエイトで使えます』

　： http://blog.livedoor.jp/jimuguri/archives/51958798.html

　→こちらもスクリプトまんまお借りしています。この場を借りて感謝。

------------

以上です。もし良かったら一度見てあげてくれると嬉しいです。

はてブとかいいねとかツイートとかしてくれるともっと嬉しいです（笑）

改めて見ると他所様の借り物ばかりでなんか勉強になっているのかいないのかあれですが。。。

Permalink | トラックバック(2) | 21:41

トラックバック - http://anond.hatelabo.jp/20120914214121