SEMTechnologyExtraInformationRecommend週間ブックマークカテゴリーなしMaterial201201/10たった一人でwebサービスを作るための、6つの技術と4つの知識この記事の読了時間:約13分42秒ツイートふとワクワクするようなアイディアが浮かんだ時、もし自分でwebサービスを作れたらなーって思う方も多いんじゃないでしょーか。実際、twitterやfacebookを徘徊してても、結構頻繁に「webサービス作ってみたい☆」みたいな投稿をみかけますが、中には「何から手を付け始めれば良いか分からない!」的な迷える子羊達もちらほら。そんなワケで、ささやかながら今まで当ブログでもいくつかの自作webサービスを公開してきて、企画からデザイン・コーディング・プログラミング・宣伝に至るまで、若輩ながら全て一人で担ってきた私の知見をご紹介したいと思います。技術に関する最大のポイントは「全てを知る必要はあるが、全てに精通する必要は無い」、つまり「広く浅く」で良いというコト。その中でどこかに自分の強みが持てると尚良しですが、手始めであればまずはまんべんなく触れていった方が、一人で制作するには合ってると思います。CSS切っても切り離せないので併記しましたが、webサービスを作る上でこの2つのスキルは絶対必要不可欠です。常に100%varidなHTMLを書かなきゃいけない訳では無いけど、100%varidなHTMLを「書けるけど書かないのか、ただ書けないのか」はかなり違うし、余りにアレなHTMLだとJavaScriptを使った時とかに挙動がおかしくなったりするので、「正しいHTML」は書けるようになっといて損は無いです。Service」を使って間違いを正すように心がけていけば、そんなに難しくも無いと思います。CSSに関しても、各種ブラウザでしっかり確認しながら作業するようにして、問題が生じたら面倒くさがらずgoogle先生にお伺いを立てれば、きっと先人が答えを導き出してくれてるはず。あとはもう「書き慣れ」に限ります!最初は自分用のホームページとかを題材にしたり、なんならフリーのテンプレートpsdファイルをHTML+CSSに書き換えてみたりして、いろんなコードを書いては構文チェックして、ってのが結果的には近道だったりします。結局のところ、よく使うタグなんて限られてるし、よく使うレイアウトも限られてるし、よく遭遇するIEのCSSレンダリングバグも限られてるし。それを身に染み込ませる最良の方法は、とにかく書くべし!書くべし!Photoshop第一線級の写真加工が出来るとか、超ハイクオリティーな合成画像が作れるとか、そういった飛び抜けた何かを持っている必要は無くて、むしろ大抵のコトがまんべんなく及第点で出来るって感じの方がwebサービスの作成には向いていると思います。webサービスを作る際に必要となってくるデザインスキルとしては、ボタンやロゴをはじめとした各種デザインパーツの作成や、全体的なページレイアウトと配色設計、各コンテンツの枠線や背景デザインなどが主軸ですので、どちらかといえばIllustratorよりもPhotoshopの方が重要かなと。自分の場合、Illustratorは文字の加工(例えばロゴとか)が必要な場合くらいでしか使わず、ほとんどPhotoshopかCSSでデザインしちゃいます。webサービスのジャンルや想定ターゲット次第では、Illustratorを駆使してデザインにかける労力を大幅に増やすべきケースもあるので一概に「Photoshopだけで良い!」とは言えませんが、一人でwebサービスを作る場合、デザインだけにリソースを割く訳にはいかないので、力を抜いても何とか格好が付くようなトコは敢えて深入りしないようにして、よりスピーディに完成形まで持って行くコトを心がけた方が良いと思います。どこかで線引きしとかないと、「透明度を31%にするか33%にするか」「#fcfcfcにするか#fafafaにするか」みたいなトコを延々と行ったり来たりし始めちゃって、継続のモチベーションやリリースのタイミングを逸しちゃうので。ゆーのはちゃんと全部作りきった後だったり、運用を始めてからでも遅くないと言い聞かせて、前に進む勇気も大事。jQuery(JavaScript)非同期な画面遷移や動きのあるエフェクトなど、最近のwebサービスにおいてJavaScriptは「必須」といっても良いんじゃないでしょーか。webサービスでJavaScriptが必要となる場合、その大概のコトは「jQuery」で出来ます。なんかで、動きのあるエフェクトなら各種プラグインを駆使するなど、使い方に関しては様々なチュートリアルや使用例がweb上のアチコチにありますので、調べてみて実際に手を動かして、使ってみるのが一番しっくり来ると思います。これらはどれもweb上での情報が豊富なので、どの言語を選ぶかはホントに人それぞれですが、もし初めてプログラミングを学ぶなら「近くに教えてくれる人がいる言語」を選ぶのが最良です!そーゆーのに詳しい友人が少ないとか、そもそも友人が少ないってゆー私みたいな方は、使ってみたいCMSで使われてる言語だったり、良く読んでるブログで取り扱われている言語を選んでも良いかと。その言語の基本的な構文や関数の使い方などのお作法を学び終えたら、そっから先は作りたいWEBサービスに必要なモノをつまみ食いしていくのが良いのかな、と。一つ気をつけなきゃいけないのは、おおよそ全てのwebサービスでは、何かしらの「ユーザーからの入力を受け付けるフォーム」が必要になってくると思うので、そこでのセキュリティ施策はしっかり身に付けておくこと。悪意あるユーザーにイタズラされないように、「入力値をそのまま出力しない」「数値入力欄に文字を入力されるコト(またはその逆)を考慮する」「バリデートをJavaScriptだけに頼らない」などといった対処をしっかり施さないと、せっかく使ってくれる善良なユーザーにまで迷惑をかけてしまいます。アプリケーションのセキュリティについてのメモ」とか「ockeghem(徳丸浩)の日記」などを熟読して身に付けましょー。サーバサイド言語とほとんど同時進行で学んでいくコトになると思うので、サーバサイドプログラミングの永字八法とも言われる「BBS(掲示板)」を作ってみるのが激しくオススメ。Delete[削除])は必須になるし、ページネーション機能や画像アップロード機能を搭載させたりしちゃえば、かなり総合的・実践的に学べます。一人で作る以上、どれだけ有効にリソースを裂くかが要になってきます。下記の知識は、これらを知っているコトで、より効果的な宣伝や効率的な作業を行うことが出来るというモノです。各種ライセンス画像やイラストはもちろん、スニペットやモジュールやプラグインやライブラリなど、世の中にはたくさんのフリー素材が溢れていますが、中には「著作者名の表記が絶対に必要」とか「商用利用はダメ」みたいな感じで、素材の使用条件を課したモノもあります。ゆーライセンス周りを把握して、自分のwebサービスがどのライセンスであれば問題なく使えるか、ちゃんと理解してから使用しないと、あとでアクシデントに繋がる可能性があります。お願いしたいトコですが、いちおー以前「GPLやMITやCCなど主要ライセンスの内容と意味のまとめ」という記事を書いていますので、そちらをご参考にしていただければ。ちなみに私の場合、「GPL系とCC系はハナっから使わない!」とゆー大雑把な方針です。フリー素材の見つけ方もし具現化する技術と潤沢な時間があるなら、自分のイメージどおりの画像を自力で作成していく方がいいのかもですが、使えるようならフリー素材を使った方が圧倒的に早くて効率的です。いえ、どんなトコに行けば欲しいモノが見つかるかを知らないと、素材探し自体に時間がかかってしょーがない。9searchどはー、ちかれた☆jQueryプラグインの見つけ方こちらも前述の通り、使い回せそうなら使っちゃった方が早いし正確だったりします。magazine、DesignFloatなどの記事をRSS購読しといて、気になるプラグインが紹介されてたら、すかさずブックマーク!自分なりのカテゴリに分けて保管しとけば、いざって時にそれを見返して使えます。ちなみに私のjQueryブックマークフォルダには、総計17カテゴリー270記事が火を噴いておりますw使えそうなwebサービス最近ではクチコミ用にtwitterやfacebookといった外部webサービスに即時投稿できるような施策はほぼ必須ですが、その他にも、公開前にプレスリリースを送ったりするならValuePress!なんかを使ってみるのもいいし、サイトデザインに自信があるなら各種ウェブデザインギャラリー系のサイトに投稿してみるのも一興。無事サービスを公開したらツクログに投稿したり、キャンペーンページやランディングページの用意があるならランディングページ集めました。登録申請を出してみたり。ゆーのを上手に利用させてもらうことで、認知度の向上や外部リンクの獲得といった嬉しい効果が期待できます。関数くらいしか使ってません。今ならもっとスマート且つエレガント且つスピーディに、当時以上のクオリティで作ることが出来ますが、大事なのは「それでもwebサービスは作れた」という事実。作っていくうちに必ず不明点や壁にぶち当たりますし、それを乗り越えていく過程で半自動的に、新たな知識を得るコトが出来ます。AMraijsとherokuでええやん。AMwebサービス作る参考になった。いつ作るかは未定だけど。PMPHPはこれから始める人に対して勧められる言語ではありません。余計な記法ばかりが存在していて言語自体へのバグも多く、エコシステムが機能していません。誰かの周囲にいる友人のほとんどはPHPのバッドノウハウしか蓄積しておらず、良いデザインパターンとは何かを考えていません。AM「WEBサービス」が何を指しているのか分かりませんが、印象としては、書かれているのは、弁当箱をつくる技術であって、弁当の中身の存在がないですよね。平たく言うと、「弁当の作り方」ではなく、「弁当箱の作り方」と感じました。AM書いてある内容は間違ってないと思うんですけど、タイトルが内容に則していないような。これだけでwebサービスは成立しないのでは?ある種釣り的な感が。PHPはこれから始める人に対して勧められる言語ではありません。ありますが、PHPはwebアプリケーションを作るサーバー側言語として現在は主流となっています。文法がシンプルなので何から始めれば良いかわからない初心者にはとりあえずPHPから、とお勧めできます。いって貧弱かといえば、そうでもなく、オブジェクト指向的な書き方もできるし、本格的なwebアプリケーションを作るのに何ら支障はありません。「弁当の作り方」ではなく、「弁当箱の作り方」と感じました。ついてですが、確かにその通りです。2chを代表する掲示板サイトやtwitter、facebookなどのSNS、googleなんかはまさに弁当箱作りを徹底的に極めたおかげで成功した例だと言えます。linksDropboxデバイスを選ばないオンラインストレージ。tenpu無広告のおしゃれなファイル転送サービス。ギガファイル便大容量ファイル(25GB)にも対応の転送サービス。aguse.jpURLからサーバやドメイン管理者などを取得。SimilarWeb競合サイト解析ツール。Fontsの全フォントを任意の文字で一覧化。Insightsサイトの読み込み時間と問題箇所をスコア化。LookupHTML特殊文字を類似文字から逆引き出来るサービス。Regexpreg_matchのマッチング結果を出力。Mail時間延長可能なワンタイムメールサービス。ご利用環境チェックツール自分のIP/HOST、OS、ブラウザ、解像度などを表示。Akinator頭に浮かべた人物を当てる超能力サービス。thisこのブログはウェブデザインやプログラミングなどをはじめ、web制作者向けの様々な技術や情報を掲載しています。現・フリーランスwebクリエイター。verb」として、フルスタックフリーランスやってます。