  |
はてなキーワード: webサイトとは
まったくの素人がNginx＋Bootstrap＋WordPressでWebサービスを作成しました。
オシャレエロサイト「h300」をリリースして、10万PV/日を捌くためにやったこと
http://d.hatena.ne.jp/inouetakuya/20120410/1334058296
http://anond.hatelabo.jp/20120914214121
http://anond.hatelabo.jp/20120930171125
--------------------------------------------------------------------------------------------------------
35歳 今は事務系の仕事をしてます。たまに運転。限りなくパートに近い労働条件ですが、
仕事がないよりはマシですので、続けているわけです。
前（5年ぐらい前）からWebサービスみたいなものを自分自身で作ることができたら楽しいだろうなぁと。
TwitterとかFacebookとか数回利用したことはあるけど、詳しいことはさっぱり。
朝6：00から夜18:00まで車を走らせてゴミ回収をしていた者です。
パッカー車って知ってますか。街でよく見かけるゴミ収集車のことです。
ドラッグストアとか回るんですよ。休憩時間は15分ぐらいなんですよ。一日。馬車馬のように働いていました。
そのパッカー車で物損事故を起こしてしまい、会社に居続けることはできなくなり仕事をやめました。
エロはもともと好きだったのですが、車を運転する以外の技術は持っていません。
何か手に技術を身につけたいと考えるようになりました。ただ３０歳も過ぎたおっさんにあまり時間はないので、
資源の集中を意識し時代の流れはパソコンだということで、始めたわけです。
はじめはHTML,CSSの本で基本的なホームページ制作を学ぶ。
-----------------------------------------------------------
Bootstrap
-----------------------------------------------------------
Webサービスを作るにはプログラミングが必要なことは知っていたけど、初めてみて暗号のように思える。
プログラミングの中でもPHPは簡単なのでしょうか？最近の流れからすると、Rubyなのでしょうけど、
PHPは自分の実現したいサービスが組み立てやすい気がします。
http://www.amazon.co.jp/gp/product/toc/479733245X/
foreachやif,forなどの基本的な使い方を身につける。
プログラムは結局小さいプログラムの集まりだとどこかに書いてあった。ことを思い出す。
PHPはベタのプログラムだどセキュリティ的に弱いということでPEARを使うように。
ほかのプログラミング言語は知りませんが、PHPerというらしい。
プログラムに慣れてくるとPEARライブラリなどのクラスに抵抗がなくなってきた。
それでも、オブジェクト指向という考え方を体で理解するまで時間がかかる。
----------------------------------------------------------
http://php.xenophy.com/index.html
http://kumicyou.sakura.ne.jp/php/index.html
http://www.amazon.co.jp/gp/product/toc/479733245X/
http://www.amazon.co.jp/gp/product/toc/4797367571/
----------------------------------------------------------
----------------------------------------------------------
Simple HTML DOMParser メモリーオーバー？が発生するので頻繁には使えない。
正規表現って便利ですよね。（preg_match("/ab/", $string);など）
Webサイトのどんな情報でも切り取ったり、貼りつけることができるので。
Web上で特定の情報を好きなように集めてきて、加工することができるスクレイピングを発見。
PHPでスクレイピングするにはどうしたらいいか考えるようになり、かなり時間を使いました。
該当URLのサイトマップからリンクページ（aタグ）をすべて取得する。
ページの中にあるエロ動画URLやサムネイル画像などをファイルへ出力。
$fp = fopen("/var/www/html/sample.txt", "a"); fwrite($fp, $title."\n"); fclose($fp); }
出力したファイルの中で重複データなどないように一つにまとめて使えるように加工する。
あらかじめCronで時間を指定してファイルの情報をデータベースへ投入。
これから欲しい情報は、著作権に気をつけながらスクレイピングして集めてくると楽しいなぁと思ってます。
自分でホームページを公開するためにはサーバーが必要なことは以前から知っていたのですが、具体的には手探り状態からで
サーバはレンタルサーバとか専用サーバなどいろいろあるのですね。
全部自分で管理しないといけないため、めんどくさい気がした。結局VPSサーバに。
スピードアップのためにやったこと。データベースとアプリケーションサーバを分ける。
データベース最適化、query_cache_sizeを設定したりなど。
http://anond.hatelabo.jp/20101203150748
ウェブ開発者のための、1時間でできるLAMP環境構築術（CentOS編）
http://tanaka.sakura.ad.jp/2011/05/centos-linux-apache-php-perl-mysql-lamp.html
定番のPHP MYSQL Apacheから調べていくとNginxというWebサーバが高速だという
記事が多いので、使ってみることに。
NginxだけではPHPは動かない。php-fpmをインストール。
------------------------------------------------------------------------------------
http://d.hatena.ne.jp/yoshi-ken/20120205
http://kray.jp/blog/wordpress-tuning/
http://server-setting.info/centos/apache-nginx-2-php-fpm-install.html
http://hara19.jp/archives/5817
http://tech.aainc.co.jp/archives/3022
------------------------------------------------------------------------------------
以上の記事でNginxのproxyを設定することができ、とても参考になりました。
どうにか既存のサイトをWordPressで作れないかと考えていたら、
WordPressは固定ページとブログ用のページを分けるテンプレート構造だと知る。
WordPressはindex.phpファイル一枚あれば動くらしく、ページを表示する優先順位があるらしい。
メインページ front-page.php → home.php → index.php
そのため、fromt-page.phpに自分で作ったSmartyをそのままコピペして,なんとか既存のサイトとWordPressをミックスさせることに。
詳しくは以下の本が参考になりました。
http://www.amazon.co.jp/gp/product/toc/479736758X/
WordPress奥が深いです。
途方にくれていたところ、CSSフレームワークのTwitter Bootstrapを知る。
HTMLに少し手を加えるだけで今っぽいデザインにできる。その分、余った時間をweb構築に集中することができる。
http://panpanwatch.net/douga.php
http://panpanwatch.net/newdmm.php
DMM動画の当日配信が開始されたコンテンツをDMMのapiから収集。
http://panpanwatch.net/?page_id=5382
ネット上のエロ更新情報を収集して表示。メインはWordPressで構築。
--------------------------------------------------------------------
常日頃からネットのエロにはお世話になっていたので、なんか恩返しではないですけど、
Webサービス作るまで、ずっとパソコンの前ばかりにいたので、
こんにちは。みなさまからのブクマとコメントを多数いただき、ありがとうございます。
いろいろご意見あると思いますが、大げさな嘘などは書いていないです。
PHPを理解するのも、こちらの本を一冊やれば、それなりに理解できるようになりました。
http://www.amazon.co.jp/gp/product/toc/479733245X/
次のサービスを作成するときは本格的なアプリケーションやソーシャルゲームなどやりたいなぁと
野望だけは持っています。ですけど、ずっとこのサイトだけに集中してきたので、今はパソコンから少しだけ距離を置くつもりです。
※注：以下のキーワードはフィルタリングの対象となっております。
naver、cookpad、まとめ、レシピ、ランキング、コンビニ店長
May 9, 1998
夜、SIerのスコットとエリアス、MF屋のスティーブ社と仕様確認をやった。
スティーブの奴、やたらにやついてやがったがきっといかさまにちがいねェ。
俺たちをばかにしやがって。
生きたえさがいいってんで、パケットを投げこんだら、奴ら、データ部をもぎ取ったりブルスクを引き出したり
遊んだあげくやっと食いやがる。
今朝５時頃、宇宙服みてえなNDAを持ってきたスコットに突然たたき起こされて俺もNDAを
書せられた。なんでも、役職者で指摘があったらしい。
役職者の連中ときたら、夜も寝ないで組織再編ばかりやってるからこんな事になるんだ。
昨日からこのいまいましいNDAをつけたままなんで、背中がむれちまって妙にかゆい。
いらいらするんで、腹いせにあのベンダーどものQAを「Webサイトをご確認ください」にしてやった。
いい気味だ。
May 13, 1998
あまりに背中がかゆいんで医務室にいったら、背中にでっけえ仕様バグを貼られた。
おかげで今夜はよく眠れそうだぜ。
May 14, 1998
朝起きたら、背中だけでなく足にも腫物ができてやがった。
ベンダーの入札室がやけに静かなんで、足引きずって見に行ったら数が倍に増えてる。
仕様書を三日公告したくらいで増えやがって。
おえら方に見つかったら大変だ。
May 16, 1998
昨日、このプロジェくとから逃げ出そうとした役職しゃが一人、射さつされた、て はなしだ。
胸のはれ物 かきむしたら 肉がくさり落ちやがた。
いったいおれ どうな て
May 19, 1998
やと ねつ ひいた も とてもかゆい
May 21, 1998
ひどいかおなんで ですま
うまかっ です。
4
うま
DVの相談センターや女性センター等で相談できないかな。できれば人に相談して、そしてできるだけ早く、とにかく逃げて。DV被害者に向けて情報を発信しているWebサイトに[脱出の方法]や[家から持ち出すものリスト]等の情報があるので参考になれば。
増田も今住んでいる家にいなくてもいいし、給与を渡さなくてもいいし、いやな人間と顔をあわせる必要もない。ましてや暴力をふるわれることなんて、絶対にあってはならない。もしまた暴力をうけたら病院で医師の診察を受けて、警察へ診断書を添えて被害を相談、被害届をだして。
会社に現れたり付き纏ったりしはじめたときのことを考えても、早くに警察への相談はしておいた方がのちのち役に立つかも。相談してもその場では有意義な結果が得られないかもしれないけれど、相談があったという実績は記録されるだろうし。
給与の振込みは、会社に別の口座に替えたい旨を伝えて変更してもらえばいい。銀行に行って今の口座を解約して新しく口座を作り直す。通帳も印鑑も手元にない場合はどうすればいいのか、私にはわからないのだけれど、そういう場合の方法は銀行へ尋ねれば教えてくれるだろう。
あなたがいなくなってもあなたの母親は自力でなんとかできる筈だし、同居を強制する権利なんてない。もし助けたいとおもっても、まずはあなたが離れて、そして戦えるだけ回復してからでいい筈。
先日の「週6フリーターもWEBサービス作ってみました。」に触発されて、
IT系サラリーマン。別に仕事でWebとかプログラムとかはやってない。IT系企業に務めているというだけ。
でもそれだとこの先が無さそうなので自分でも何か作れないかと思ってるところに、１０００を作ってみた〜を読んで奮起。
会社のエンジニアさんに「どんなの作るのが勉強になりますか」と相談したところ
「とりあえずそれ（１０００Userアンテナ）と同じようなものを作ってみれば？」と投げやりに言われ、今に至る。
以前に「HTMLでWebサイトを作ろう！」みたいな本を読みながら、
何のプログラムも入っていないゲームの攻略サイトを作ったレベル。すぐ放置した模様。
上記の事を話したら、仕事で練習がてらに触らされる。四則演算ができる程度。
活かす場は無いが、情報収集は好きなのでそれをテーマにすることに。
カラダアンテナ
普段RSSを使っていて一番イライラする「違うタグなのに同じ記事をいくつも拾ってきやがる」を解消したいのが目的。
「なるべくAPIとかjQueryのプラグインとかを使うようにしてみたら？」という神（社内エンジニアGさん）の発言により、無駄に色々使って見ることに。
参考サイト
・Google AJAX Feed APIの使い方メモ →ぐぐって最初に出てきたサイト。お世話になりました。
ただこれだと複数のRSSを読み込んだ時に、例によって例のごとく同じURLの記事が別のタグのRSSからいくつも出てくる。
これを解消するにはRSSをマージして重複するのを消せばいいらしい。
解説：複数のRSSをまとめて、更に色々抜いたり加工したりしてくれるサービス
参考サイト
なんというかやりたいことが８割がた解決してしまった。
GoogleとYahooが手を組むとこんなに凄いのかと関心。本当はもっと色々出来るらしい。
参考サイト
記事のfaviconも出せないかな？と思ったらそれもはてブのAPIと同じようなサービスがあるらしい。
参考サイト
ソーシャルリンクのボタンが欲しかったので、1000Users超えさんのところでも紹介されていたのをそのまま使う事に。
参考サイト
最近はただでこんな動画が見れるサービスもあるんですね・・・エンジニアさんはほんとすごいです。
公開するにあたって色々用意したもの達。
解説：サーバー。
レンサバ探してたら何故かサーバーエンジニアのSさんからここを進められた。
安かったし評判もぼちぼちなのでこだわりもなく決定。
Webサービスって言ったら独自ドメインだろ！ということで４８０円セールをやっていたので取ってみる。
参考サイト
せっかくなので広告もつけたくなったので調べてみた。
GoogleAdsenseって結構簡単に設置できるんですね。
参考サイト
・AdSenseアカデミー →Google先生の公式ガイド
解説：iPhoneアプリのリンクを貼れる。楽天がやってるんですね。
解説：書籍のアフィリエイトはAmazonさん。思ったより簡単でした。
https://affiliate.amazon.co.jp/
あと、スクロールしたらついてくるってのをやってみた。カッコいい。
参考サイト
解説：作ったWebサービスを投稿できるサイト。アンテナサイト多いですな・・・。
解説：Webサービスをつぶやいて宣伝してくれるWebサービス？ありがたいです。
http://inajob.no-ip.org:10080/tsukutter/
参考サイト
正直全然面白いWebサービスではないのはわかってるのですが、
それでも非エンジニアでもそれっぽいものができるんだなあというのと、APIって凄いと思いました（小学生並みの感想）
色々調べながら「あ、こういうWebサービスがあったらいいかも」というアイデアはいくつか浮かんだので、
こんどはそれを実現できるようにもっと勉強してみたいと思います。
使い方は、テキストを打てるところがあるので、そこに「http://example.com」のように入力し、「Stats」ボタンをクリックしてください。
現在はメジャーな4つのソーシャルサービスだけですが、反響があれば他のソーシャルサービスのシェアなどの計測をする機能を付けたいです。
function get_facebook_stats($target_url) { $query = array( 'method' => 'links.getStats', 'urls' => urlencode($target_url) ); $api_url = 'http://api.facebook.com/restserver.php?'.http_build_query($query); $ch = curl_init($api_url); curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 60); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); $result = curl_exec($ch); curl_close($ch); $xml = simplexml_load_string($result); return $xml->link_stat; }
> は ＞ の半角です。
簡単にxmlのデータが取得できます。このコードに問題があればこっそり教えてください。。
恐らく、使い過ぎると怒られる気がしてます。。
技術的にはたいそうなことは全くしておりません。JavaScriptも使っていないです。
単純に、シェアされた回数を調べるだけのシンプルなサイトにしてみました。
もともとコンピュータ、電気、機械系が好きで小5あたりからプログラミングを始めた。その後コンピュータにも詳しくなり、小学校卒業する頃にはHTML書いて自分のwebサイトを作って公開したりしていた。中学の頃から二足歩行ロボットに興味を持ち始めて。マイコン(PIC)や電子回路などをネットや本で独学した、周りにロボットに詳しい人が居ないので独学には苦労した。
そして中学を卒業する頃には電子回路やマイコンをある程度理解してサーボモーターを制御するプログラムぐらいなら作れるようになっていた。アセンブラやC言語のポインタもこの頃には理解していた。
しかし機械設計の知識がなかったり、工作機械も手元になかったりしたので、この時点でロボットを作ることはできなかった。そこでロボットを作るノウハウや工作機械があるであろう高専を受験した。それとロボコンにも参加してみたかった。
結果はタイトルの通り。ショックだった。
マイコンも電子回路も理解しているのに、落ちたことを受け入れられなかった。
ちなみに自分は軽いコミュ障なので小学、中学と友達は多くはなかった、高専なら話しの合う人がたくさん居るだろうと思ったのだが残念ながら行くことはできなかった。 だが浪人する勇気もなかったので、仕方なく近くの進学校に通うことにした。
今思えば浪人してでも高専に行くべきだったと思う。
高校では普通科のせいもあって話の合う人は一人も見つからず、3年間ずっと一人だった。
高専に落ちたショックや友達ができなかったことなどが影響して、成績は最悪だった。中学での成績は上位だったが、高校では最下位。中学との成績の落差も精神的に落ち込む原因となった。学校行くのがいやになり、夜にこのまま寝て目が覚めずに死ねたらいいのにと思うようになった。
その現実から逃れるように、何か電子工作をしたりLinuxについて独学したりした。電子工作の作品についてはニコニコ動画に動画をアップした。Linuxについても詳しくなりちょっとしたWebアプリも作った。今のメインPCのOSはLinuxだ。
高校3年の時に一番レベルの低い工学系の大学の入試問題の過去問をやってみたが、ほとんど解くことができず大学受験も絶望的となった。その頃から学校を休みがちになり軽い鬱状態に。
なんとか卒業することはできたが、進路は決まらなかった。決まっていたとしても半鬱状態でまともに通えなかっただろう。
今高校を卒業して引きこもり1年目。高校卒業時よりは元気になってきた。
本当は大学でロボット関係の研究もしたかったし、プログラミングやロボットの話のできる友人もほしかった。
プログラミング苦手って言ってる人が理系の大学行ってたりするのを見ると、自分はなぜ行けなかったのだろうと思いつらくなる。勉強すればいいだけのことだが、もう高校のせいで勉強がトラウマになり、まともに勉強できなくなってしまった。
高専受かっていたらこんなことにはならなかった。
入試という仕組みを恨むよ、これのせいで高専も大学も行けなかった。
日常は思い通りにならないことばかりだけど、プログラムはそうじゃない。
思い通りにはならなくても、書いた通りには動く。
思ったとおりに書けば、思い通りにプログラムを動かすことができる。
それが鬱々とした日々に対する憂さ晴らしとか鬱憤晴らしになっているのかもしれません。
平日のプライベートな時間のほうがプログラミングがはかどるのかもしれません。
思えば、最近本当にうれしかったこととか興奮したこととかわくわくしたこととか、ほとんどプライベートのプログラミングに関してしか感じていません。
画期的なWebサイト見つけたときとか、ずっと悩んでた問題がようやく解決したときとか。
日頃の満たされないものをどうにかするために、休日はずっと寝たりダラダラしたりゴロゴロしてましたが、何も解決しませんでした。
そういったあざやかな喜怒哀楽の感情の起伏を感じることができていなかったからかもしれません。
もう30前ですが、はじめるのに、あるいは気づくのに遅すぎることはなかった。
40になってから気づくよりよかった。
前編はこちら
http://anond.hatelabo.jp/20120926165407
中編はこちら
http://anond.hatelabo.jp/20120926165533
基本的な機能とデザインが出来てきたら、細かな機能や説明ページなどの静的コンテンツも作っていきます。
８割程度出来たと思ったら、一度サーバーにアップロードして動作チェックしてみます。
たいていは上手く動作するはずですが、途中で一度チェックしておいた方が出来上がってから不具合を修正するよりは効率的です。
僕ははじめCORESERVERを使っていましたが、メールが送信できない不具合に遭遇して時間を取られました。
結局はCORESERVERとgmailの相性が悪いせい、という事で最後はさくらに移転しました。
あと、何となく動いているのが確認できたら、
このタイミングでGoogle AdsenseやAmazonアソシエイト、Ａ８やバリューコマースのアフィリエイトサイトに申し込みましょう。
特にアドセンスは申請してから使えるようになるまで１週間とかかかります。
２０１２年現在、アドセンスを含むアフィリエイトは期待するほど儲かりません。
でも、色んなWebサイトで見かけるこれらの広告の表示方法を学ぶことで、Webサービスに対する理解も深まりますし、
あと、全然儲からなくてもサイトにこれらの広告を表示しておくと、社会と繋がっている雰囲気が出て活況感が高まったり、
自分のサイトがちょっと立派に見えてテンションが上ったりします。
それぞれのプログラムの使用方法は検索すると出てきますが、敢えて本でおすすめはこの２冊。どちらも基礎です。
アフィリエイトで<得する>コレだけ!技 BEST100
サーバーに最新のファイル一式をアップロードして、入念に動作チェックをします。
core.phpのsession idをデフォルトの状態から違うものに変更したか、
全てのコントローラーのデバッグツールキットはOFFになっているか、
CakePHP本体は公開フォルダと別の階層にアップロードしているか、
htaccessの設定は間違っていないか、
などを確認します。
URLのwww付きとwwwなしはどちらかにリダイレクトさせて１つに統一できているか、
存在しないURLにアクセスされた時のエラーページに余分な情報が表示されていないか、
検索エンジン用のrobots.txtを用意、
ファビコンを設定する、
アクセス解析を設定する、Google Analyticsに登録しコードをサイトに埋め込む。
http://www.google.com/intl/ja/analytics/
Google先生に挨拶する。Google ウェブマスターツールに登録し、必要な情報を入力、Analyticsと紐付ける。
https://accounts.google.com/ServiceLogin?service=sitemaps
http://developers.facebook.com/docs/reference/plugins/like/
https://twitter.com/about/resources/buttons
その他、mixi、Google+などのボタン類も必要ならつけましょう。
全部出来たら、完成です。
Ｗｅｂサイトは作っただけでは（本当に）誰もアクセスしてくれません。
Webサービスを作ったそのあとに、「自分でもできる低コストなWeb PR方法」
http://blog.8bit.co.jp/?p=1944
こちらもチェック。
作ったwebサービスをPRできる！webサービスのリンク集サイトまとめ
http://smkn.xsrv.jp/blog/2011/11/web-service-linksite/
リリースした直後はGoogleのインデックス数も少なく、検索エンジンからのアクセスは期待できません。
検索エンジンからの流入は１ヶ月とか、時間が経つにつれ少しづつ増えてくるので気長に待ちます。
自サイトの情報のチェックはＳＥＯチェキ！とコメポンが便利。（作者のロプロスさん様様）
Ｋｏｍｅｐｏｎ！
それから、ステップ１１で紹介した本にも出ててますがフェレットも便利。
Ferret
５００円で客観的に評価してもらえるこちらも活用すると良いでしょう。
※2012年9月26日現在、このサイトは僕はまだ利用していませんが気になっています。
ホームページ評価.com
■最後に
ここまでやってみると、Ｗｅｂ開発の一連の流れが分かった気がしてきます。
初めて作ったサイトはしょぼくても、ひと通りやってみる事で
Ｗｅｂサービスの開発者としての入り口には立ったな、位には思えるはずです。
ここまでの知識をベースに、
ＳＥＯをがんばるもよし、
アドセンスやＡ８などのアフィリエイトで稼ぐしくみ作りをするもよし、です。
この記事を読んでアクションしたら、僕と同じようにアウトプットして、
そのリザルトをシェアしてトゥギャザーするオポテュニティをテラユビキタスｗ
１つ気をつけたいのは、
開発したサイトのサーバーの種類とか、CakePHPで作ってるとか、そのバージョンは1.3だとか、
そのサイトの詳細仕様は安易にこういう記事に書かないようにしましょう。
悪意のあるハッカーに攻撃の糸口をプレゼントする事になってしまいます。
この本も参考になります（まだやるか）
有益な情報をネット上に提供して下さっているWeb業界の皆さん、
それにいち早く辿り着けるはてなブックマーク、
皆さん、に感謝。
ツイッターはじめました
前編はこちら
http://anond.hatelabo.jp/20120926165407
会員情報や文章などのコンテンツを保存しておくデータべース、ＭｙＳＱＬを調べます。
データベースは他にもPostgreSQLやSQLiteなどが有名ですが、やはり王道を勉強します。
MySQLはCakePHPや、ステップ４のWordPress他、よく使いますので把握しておきましょう。
今はまだ関係ありませんが、余裕があればこれも読むといいです。
操作はコマンドラインを覚えていく方向で、始めはブラウザで操作できるphpMyAdminを使ってＯＫです。
技術調査はこの位にして、これからは実際にWebサイトを作っていきます。
ここまで来ると何となく、Webサイトがどんな仕組みで動いてるかが分かってくるので、
ステップ０でイメージした作りたいサイトがどんな技術で実現出来るか調べます。
TwitterやGoogle、Yahoo、AmazonなどのAPIを使ってサテライトサイトを作っても良いと思います。
が、高度な事をするとはまりやすいので、ある程度やって無理だったらあきらめて次回にまわしましょう。
まずは何か一つ完成させる事のほうが大切です。
それから開発効率ＵＰのため、Chromeにプラグインを入れましょう。
説明はそれぞれのリンク先を見て下さい。
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://www.sakura.ne.jp/domain/
定番の.com、.net、.orgは誰が見ても親しみがあるし安いので、できればこの３種類のどれかにしたい所ですが、
一般的な言葉はほぼ埋まっているので、その場合は.jp等にしても良いでしょう。
日本語ドメイン(www.日本語.netみたいな)は流行っていないですが、
自分のサイト名が「○○○.com」のような名前の場合は一緒に取得して、アルファベットのドメインにリダイレクトしましょう。
（ChromeユーザーがURL欄で検索する時、「○○○.com」のように後ろに.xxxが付いているとそのURLに直接アクセスしてしまい、
僕はバリュードメインで取得して、サーバーはさくらのレンタルサーバーにしました。
その際の親切な設定方法の解説はこちら。
VALUE DOMAIN で取得したドメインをさくらのレンタルサーバで使う
http://nekohacks.com/wordpress/domain/value-domain/
どんなサイトで、どんな機能があって、どんなページがあるかノートに書き出して行きます。
サイトの基本的なレイアウトをCSSで組みながら、デザインのイメージもしておきましょう。
ここではデザインはまだやりません。
先にデザインを作っても、プログラムを進めていく過程で変更がでたりする為です。
（でもあんまり後回しにしても、見た目がチープなせいでモチベーションが下がったりするので、次のステップでやります）
あと、ここで気をつけたいのは、あくまでメインとなる機能の開発を優先することです。
外堀から埋めていくとそこでモチベーションが尽きてしまったり、
メインの機能を実装してみたら外堀の修正が発生してしまったりするためです。
始めると分からない事がどんどん出てくると思うので、本を読み返したりGoogle先生で検索しながら進めて行きます。
なかなか進まなくて検索８割、コーディング２割くらいの進め方になると思いますが、それでＯＫです。
いじっているだけでモチベーションを使い切ってしまったりするので危険です。
ＣＧソフトは色々ありますが、おすすめはフォトショ(Photoshop)です。
WebサイトのデザインはFireworksなども有名ですが、学習コストがかかるので、
Webサイトにもそれ以外にも使えて一番つぶしが効くフォトショップでOKです。
今年からクラウド契約が始まり、今なら１ヶ月８０００円、年間契約なら１ヶ月５０００円で
http://www.adobe.com/jp/products/creativecloud.html
お勧めの本はこれ
一から全部自分で作らなくても、素材サイトからダウンロードして加工するなどして手間を省きます。
ＰＣ・スマホ・携帯(ガラケー)全部に対応するのは大変なので、
初めはそのサービスを最も使うだろうと思われるどれか１つに絞ります。
ＰＣ用サイトならスマホでも最低限アクセスはできるし、携帯は縮小傾向なので優先度低、
スマホは画面サイズがまちまちでタブレット端末が目下発展中、AndroidはブラウザがたくさんあるがChromeに統一されていくかも、
対応する際はＣＳＳを切り替えてレスポンシブレイアウトにするのがお勧めです。
その他、困ったらTwitter社が公開しているブートストラップを使うのもお勧めです。
ブートストラップはcssのフレームワークで、簡単にシャレ乙なデザインに仕上がります。
超便利！Twitter BootstrapでさくさくWeb開発
どうしても自分でイケてるデザインが出来ないと思ったら、友だちに頼んだり、ＳＮＳのコミュで募集したり、
デザイン系の大学や専門学校の掲示板にビラを貼らせてもらったりしましょう。制作費が出せればランサーズで募ってもいいかも。
Lancers - 仕事をフリーランスに発注できるクラウドソーシングサービス
僕はたまたまフォトショップの使用経験があったので、ここにかけた時間は30時間ではなく5時間程です(トータル275時間で開発)。
後編はこちら
（記事が長すぎたので前編・中編・後編に分けました）
僕ももう、リストラされそうなとあるおっさんなんですが、先日Webサービスを公開しました。
きっかけになったのはこの記事です。
http://anond.hatelabo.jp/20101203150748
こんな事できたら良いなぁと思っていると、他にもやっている方たちがいました。
http://matome.naver.jp/odai/2131952812556433001
http://anond.hatelabo.jp/20120318122617
Rails3 と jQuery で、真面目にオシャレなエロサイトをつくってみました - h300
http://d.hatena.ne.jp/inouetakuya/20120331/1333192327
http://anond.hatelabo.jp/20120914214121
http://blog.ropross.net/archives/99
これらを読んで自分もやってみたくなり、
先日の家入さんの折れずに挑戦を続ける姿を見てモチベーションも高まり、
７月２１日～８月１９日の３０日でWebサービスを作りました。
最後の一週間はお盆休みでしたが、それ以外は平日は仕事をしながら土日をフルに使っています。
と言っても、いきなり高度な事をするのは大変なので、
本当に自分が作りたいサイトをやる前に、一度シンプルなサイトを作ってみる、という所までです。
やってみて改めて分かったのは、「自分でWEBサービスを作りたいと思っている人へ」の中の人はかなりがんばったんだなぁ、と。
かなりの熱意とモチベーションをもって、効率良くやらないと、一から勉強してあの短期間であのサイトは作れません。
プロ顔負けの技術とおもしろいアイデア、情熱をもって短期間でそれをやってしまった中の人は凄いです。
だから、Webサービスに夢を見る人(僕)も、Web業界の人も、あとＨな人もブクマするのでしょう。（賞賛）
それでは、一般人が一般的ながんばりで確実にやれるだろう手堅いラインをお届けします。
偏差値40の僕が最低限ここまで出来たので、きっとあなたならもっと出来るはず。
ステップ７まではサクサク進めて、分からなくてもどんどん次に行きましょう。
今回ぼくが作ったサイトはこちら
■ステップ０：準備
・パソコンを用意
・ブラウザはChrome,IE,Firefox,Safariあたりをインストールしておく。Chrome便利。
・作りたいサイトのアイデアとデザインのイメージ、ドメイン名(○○○.comとか)のイメージ。
・作る理由とやる気
・はてブ便利、Web業界の皆さんの空気感を知るため、なるべくＰＣかスマホでチェック。
ブラウザを右クリックして「ソースを表示」すると出てくるアレです。
Yahoo!とかのソースを見るとかなり長いけど、全部書くわけじゃないから大丈夫。
ネットで調べても良いけど、やっぱり基礎知識は本が良いと思います。
メモ帳で書いてブラウザで表示して、メモ帳で直してブラウザF5で更新して確認、
何となく分かってきたら、より具体的に理解するためにこの本を読みます。
PHPについて調べる。
初めはこの本が勉強になりました。
書いてある通りロカールサーバー(XAMPPかMAMP)を入れて、自分のマシンでPHPが動くようにします。
データベースの使い方も一緒に書いてあるので入門に最適です。
次はこれを読みます。
普通に読んでいくと中盤のフレームワークを作る所で挫折するはずなので、一旦そこまででOK。
パーフェクトPHP
PHPの他の選択肢としてRubyやPythonもあるみたいですが、学習コストがかかりそうなのと、そのままでは動かないサーバーがあったりで、
最先端のプログラマーになる必要はないので、レガシー＆枯れたPHP一択です。
カッコつけずにモチベーションが持続するうちに勝負です。
VPS(専用サーバーを仮想的に分割して安くしたサーバー)が流行ってますが、
学習コストがかかるのと勉強する事が増えるので割りきって始めは普通のレンタルサーバーにします。
VPSを借りるとLinuxの知識やWebサーバー、メールサーバー、及びそれらの保守管理などの知識が必要になります。
レンタルサーバーならある程度マネージドで、作ったプログラムが動かない時の原因の切り分けもしやすいです。
おすすめは「さくらのレンタルサーバー」のスタンダードプランです。データベースの使えない「ライト」プランは止めましょう。
その他、ロリポップ、CORESERVERなどいろいろあるので最低限PHP,MySQLが使えるサーバーを選びます。
サーバーを契約したらアカウント情報を確認して、FTPでログインしてみましょう。
http://sourceforge.jp/projects/ffftp/
ログインできたら、ステップ１で練習したファイルをアップロードしてブラウザで表示してみたり、
ステップ２で作ったPHPファイルをアップロードしてブラウザで実行してみたりします。
慣れてきたらFileZilla FTP Clientが便利です。
Webサービスのしくみを理解するために、WordPressを借りたサーバーに入れてみます。
WordPressはPHPで出来たCMS（コンテンツ管理システム）で、ステップ１～３がどう組み合わさって動くのか理解できます。
ブログや会社案内のサイト程度は作れてしまうので触れておいて損はないです。
テーマをいじったり、プラグインで遊んでみると理解が深まります。
オススメはこの本。
プラグインのまとめはこの辺りが親切。
2011年版！絶対にインストールしたいWordPressプラグイン45個
http://vanilla-stone.com/blog/wordpress/2011-edition-45-wordpress-plugin-pieces-install-absolute/
TwitterやInstagramと連携するプラグイン入れたり、CRONで自動化したりすると楽しくなってきます。
ここまでで何となくWebサイトのしくみが理解できると思いますが、
自分の作りたいサイトを一から書いていくと思うと心が折れると思います。
そこで、CakePHP(ケーキピーエイチピー)というフレームワークを勉強します。
フレームワークというのはWebサイトの開発で必要になることが多い色んな機能をまとめてくれている枠組みソフトです。
PHPの文法で、フレームワークの書き方のルールに従うだけで、様々な便利機能を簡単に使用でき、
フレームワークは他にRubyのRuby on Rails、PHPだとSymfonyやYiiなどかなりの種類があります。
CakePHP 1.3によるWebアプリケーション開発―オープンソース徹底活用
あと、余裕があればこれも購入。
注意したいのは、現在CakePHPのバージョンは1.3系と2.0系がありますが、1.3を使うという事です。
2.0系は新しい機能が付いたりパフォーマンスが良くなったりしていますが、2012年9月現在、
バージョンアップが激しく、関連書籍は２～３冊程度、Webの検索でもヒットするのは1.3の情報が圧倒的に多いです。
ＭＶＣというデータ処理・表示処理・それらのコントロール処理を分離して記述するルールや、
ステップ２では踏み込んでいなかったクラスが出てきますので、慣れるまではかなりの心折設計です。
難しすぎて僕は理解できなかったので、ここで一旦CodeIgniterに浮気しました。
CodeIgniterはCakePHPと同じPHPで書かれたフレームワークで、インド方面で良く使われてるらしい。日本だとまだマイナー、かな。
ライセンス問題で下火になっていますが習得の容易さとパフォーマンスが良いのでフレームワークという概念の把握にはオススメです。
僕はこれを読んでCodeigniterだけじゃなくてCakePHPも理解できました。
CodeIgniter徹底入門
ただ、CodeIgniterは簡単・高速で習得しやすいけど、
その分シンプルで機能が少ないので、ちゃんとしたサイトを作ろうと思うほど自分で書く部分が増えていきます。
セキュリティやユーザー認証なども素人が自前で一から作るのは危険なので、やっぱりCakePHPお勧めです。
開発する時はgitHubに上がっているデバッグキットを入れると便利です。
cakephp / debug_kit
https://github.com/cakephp/debug_kit/tree/1.3
http://codezine.jp/article/detail/5105
NetBeansを使う時のCakePHP用の追加モジュールはここ
https://github.com/evilbloodydemon/cakephp-netbeans/tree/autocomplete
中編はこちら
studygiftの2人
スタディギフトで有名な二人がまたやらかしたというのでわくわくしています＾＾
ところで、そもそもオシャレハットさんがやってるリバティとかいうプロジェクト？が何なのかそもそもわからないのでWebサイトに行ってみました。
このうち…
色々あるとは思うんだけど、さすがに6月とか7月にリリース予定だったものを放置しておくのはやばくないでしょうか？
何か理由があるのだろうか…。
OREPONっていうのはサービス始まってるみたいだけど、ここは更新されていないみたいです。
顔面広告のやつ。
そーしゃるめでぃあで話題になってましたね。
覚えてます。
広告枠を公開しているので見てみた。
http://ganmen-kokoku.com/buy.php
一発ネタあるあるですね＾＾
ま、がんばってください＾＾
asahi.comと言ったら、日本におけるニュースサイトの草分けでもあったというのに、勿体無く思う。
というのは、MSNと提携して記事を無料配信している産経新聞などに比べると、
ネット上での言論の主導権を奪うことを、半ば放棄しているような気がするからだ。
もし無料ですべての記事が読めれば、無料になれたネットユーザーに対しても、
もちろん、アカヒだのなんだの揶揄されることも増えるだろうが、
それでも目に留まることは増えるだろう。
経営上は正しい判断かも知れないが、報道に携わる者の高貴な義務があるとすれば、
すべての記事とは言わないが、遍く自らの意見を広げる努力をしてもよいのではないか。
つまるところ、右派の産経だけではなく、リベラルな立場の報道機関にも、
http://www.kanzen21.com/という有名なサイトと似たサイトを作ってみました。
このサイトはプログラミング初心者のおっさんが四ヶ月で作ったWebサイトとして有名です。
http://anond.hatelabo.jp/20101203150748
なぜ似たサイトををわざわざ作ったのかなんですが、完全に一致は便利なんですが色々不満がありまして
・芸能人リストがしょぼすぎる。 - いちいち、芸能人のスリーサイズ調べてスライダー動かすのが面倒。
・年齢スライダーがない。- 若い子が好きな人もいれば熟女好きもいるはず。
・ベスト作品を除いてほしい。 - AV女優の単体作品だけが見たい。
・横三列じゃなく八列ぐらいにしてほしい。- もっと一瞬で好みのAV女優を見つけたい。
・年齢順とか作品順とかにソートしたい。ア行カ行とか指定できるとなおいい。
というわけで、プログラミングの勉強を兼ねて作ってみることにしました。
作成期間は2週間ぐらいです。
1、DMMからAV女優情報、作品情報などをmechanize(Rubyのクローラー)を使って取得。
2、Wikiからアイドル・モデルのスリーサイズなどをmechanizeで取得。
3、chickipediaから海外のセレブのスリーサイズなどをmechanizeで取得。
6、デザインを整える。
1、http://actress.dmm.co.jp/-/top/ DMMのAV女優情報から情報取得する。
完全に一致さんみたいにFace.comのAPIを使うのは面倒だったので、
作品のタイトルにAV女優の名前がある作品だけをピックアップすることにした。
そうすることで自動的にAV女優100名出演みたいなベスト作品とかは取り除かれる。
グラビアアイドル一覧から個別ページに行き、必要な情報を取得。
3、英語版のwikiにスリーサイズが載っていなかったのでhttp://www.mademan.com/chickipediaから必要な情報を取得。
バストサイズがブラのサイズしかのってなかったが大体合ってればいいかということで、そのままcmに変える。
身長がフィート表示なのでこれもcmに変えてデータベースに突っ込む。
外人のカップ数がバストに比べて小さいなと思っていたら、外国のAカップは日本のCカップぐらいあるというトリビアを知る。
5、JQueryを使ったことがなかったので、一番苦労した。
JQueryというよりも非同期通信をするためのAJaxという仕組みをRailsでどう実装するのかが分からなかった。
具体的にはスライダーの値をRailsのコントローラーに渡すにはどうすればいいのかが分からなかった。
色々検索しているとhttp://eddorre.com/posts/tutorial-filtering-results-with-jquery-ui-slider-and-rails-3-beta-3
というRails3でUI Sliderを使用するためのチュートリアルというドンピシャのサイトが見つかる。
英語で読み解くのに苦労したが、合わせてhttp://jqueryui.com/demos/slider/でスライダーの使い方を見ながら何とか実装していった。
非同期通信はかっこいいけど実装するのに手間がかかるなと思いました。
あとPHPにすら挫折した人間なのでjavascript書くのがきつかったです。
Rubyみたいに書けるらしいCoffeescriptを勉強したい。
6,デザインはBootstrap
7,サーバーは、とりあえず人が来るかわからないので、一番安いオスキニサーバーVPS月450円のプランにした。
アダルトOKなのは確認ずみ。http://support.saases.jp/index.php?action=artikel&cat=85&id=409&artlang=ja
何度かやったことがあるのでいつも通りセッティングする。かなり面倒な作業。
一応、アダルトということで,mod_evasive,KeepAliveなどの設定をする。
スリーサイズをスライダーで検索するので3SizeSearchです。
完全に一致さんとの一番の違いは有名人リストが充実していることです。
好きな芸能人と似たスタイルのAV女優さんがすぐにわかります。
例えば、西田麻衣に似たスタイルのAV女優は範田紗々だとすぐにわかります。
検索の幅を緩くすることもできます。+-1から+-2へボタンを押して切り替えると、さらに22名のAV女優名がでてきます。
http://3sizesearch.com/people/%E8%A5%BF%E7%94%B0%E9%BA%BB%E8%A1%A3
例えばアヴリル・ラヴィーンに似たスタイルのAV女優は、藤咲りさ、本田成美、優木ルナになります。
似たスタイルの芸能人も分かります。アヴリルの場合、浅香友紀 菅野美穂 木内美穂 黒坂真美 小橋めぐみ 佐藤ありさ さとう里香 西原亜希 平田薫 松永京子 蓮舫という感じです。
ですのでAV女優さんの個別ページに行けば似たスタイルの芸能人も分かります。
例えばRioに似たスタイルの芸能人は浅倉結希 立花麗美 吉井怜となります。
http://3sizesearch.com/people/rio
楽しみながら作れ、JQueryの勉強にもなったので良かったです。
アイドルよりAV女優の方が人数も多いし可愛くてスタイルのいい子が多いですね…。
小飼弾さんの「作品から商品へ - 書評 - 職業としてのAV女優」というエントリーが頭に浮かびました。
http://blog.livedoor.jp/dankogai/archives/51804435.html
よろしければ3SizeSearchを使ってみてください。http://3sizesearch.com
