Webサービスを独学で開発するときに役に立つWebサイト・フレームワークまとめこの広告は、90日以上更新していないブログに表示しています。webサービスこの記事では、プログラミングをしてWebサービスを個人&独学で開発するときに役に立つ&役に立ったWebサービス、Webサイトを紹介します。質問サイトQiita、stackoverflow(英語版)を使えばプログラミング初心者が頻繁に陥りがちなバグやエラーの解決法を見つけることができます。Qiitaは最近は記事の質が下がっているようにも感じますが、初歩的な情報はまとめられているので問題ないでしょう。理論に踏み込んだ知識を得たいなら専門書を読み込むことが必要です。ウェブサービスを開発する目的を果たすだけなら「どのように?(HOW)」がわかれば「なぜ?(WHY)」は後からでもいいと思います。「〇〇してみた」という記事を参考に自分で手を動かして作ってみるとより理解が深まります。後から紹介する「firebase」を使ってみたかったら、以下の記事がおすすめです。qiita.com※侍エンジニア塾もそれなりに役に立ちますが、SEO対策のためか、一記事一記事に不必要な情報がもりもりの盛り込まれているので正直言って使いづらいです。(前置きが長すぎます。あとプログラミングスクールの広告がうっとおしいですね。)qiita.comStackoverflowを使うなら英語版にしましょう。日本語版は情報の量が少ないです。英語ができない人もこれを機に英語を学習してみましょう。なんたってエラーメッセージもだいたい英語ですし。チュートリアル、つぎにこのサイトをやると大体の知識を身につけられます。独学の人におすすめです。www.sendai-freelance.comサーバー・データベースサーバー・データベースに関しては皆さん大好きHerokuやfirebaseを使いましょう。Herokuもfirebaseもホスティング・データベース機能を基本無料で使えます。方にはHerokuがおすすめです。firebaseは新しい機能をたくさん盛り込んでありますが(NoSQLなど)使いこなそうと思うと新たに覚えないといけないことが増えます。※firebaseを使いこなせればSPAやシンプルなnode.jsアプリケーション、androidやiosアプリケーションを爆速で作れます。HerokuFirebase開発環境cloud9cloud9は有名なクラウド開発環境です。cloud9をつかえば、面倒で煩雑な開発環境構築をスキップできます。WindowsとRailsの愛称は最悪なのでcloud9を使わないにしてもdockerをつかうか、Hyper-Vなどの仮想環境でLinuxを使うかしたほうがいいです。cloud9はクラウド上で動作するので、パソコンだけでなくスマホやタブレットからもアクセスできます。APIWebアプリケーションに何らかの機能を盛り込む場合、外部APIを使うと簡単にできる場合があります。最近はAPIが充実しているので地図から機械学習までよりどりみどりです。APIがおすすめです。書籍名からISBN、ISBNから書籍名など、柔軟な実装が可能です。AmazonのAPIも使ってみたのですが、本の種類が豊富とはいえ、利用制限が厳しいのであまりおススメできないです。APIに関してはgoogle、amazon様様です。代表的なAPIや使い道も書いておきます。(文字抽出や画像認識)※画像系の機械学習APIはMicrosoftやdocomoも提供しています。手数料約3%でウェブサイトにクレジット決済を導入できます。formがiframeで隔離されているので安全性も高いです。payjpと同様のサービス。本家はフランスの会社。※BASEはオンラインストア作成サービスを運営しています。フロントエンド・デザイン以下のサイトはデザインの優れたサイトがまとめられたサイトです。配色はウェブサイトの印象を左右する重要な要素です。名だたるサービスの配色は非常に優れています。これなんて一目でグーグルっぽいとわかりますよね。詳細はこのサイトでみれます。このサイトはウェブサイトの配色を見たり調べたりできるサイトです。huntこのサイトは日々あたらしい配色が投稿されています。このサイトのいいところは色の組み合わせだけでなく色の量の比率も一目でわかる点です。メインの色と他のさし色の組み合わせに注目してみるといいでしょう。colorhunt.coこのサイトはweb開発だけでなく、デザイナーにもうれしいですね。話はそれますが、好きなクリエイターの一人で「しらこ」という人なんですが、その人も配色をもとにイラストを制作してらっしゃいます。素敵なのでHPをいちどぜひごらんください。イラストのメイキングも公開しているのでデザイナー的な視点を身に着けたいエンジニアのかたにおすすめです。rakoshirako.com配色に興味がある人には以下の「フランスの配色」という書籍がおすすめです。見るこの書籍は日本では見られないような大胆な配色が載っています。配色における色の面積比も確認できるのでメインカラーとサブカラーのバランスの良い使い方を辞書の様に調べるのに使えます。HTMLをHAMLに変換HTMLでページを作っているとどうしてもコードが冗長になります。修正するときも目が疲れますし、入力するときも手を動かす量が増えますしいいことはありません。HAMLに変換してしまいましょう。以下のサイトで、HTMLをHAMLに変換できます。html2haml.herokuapp.comフレームワークフロントエンドのフレームワークというとbootstrapが有名ですね。bootstrapを使えば、クラスを指定するだけでレイアウトを整えられます。(max-width:xxx)のようなメディアクエリを書く必要がなくなります。同様のCSSフレームワークでおススメなのはBulmaです。基本CSSのみで作られたシンプルで軽量なフレームワークです。flexboxをつかってレスポンシブに対応しています。CDN経由で読み込むか、CSSファイルをダウンロードすれば使えます。以下のサイトでは基本的なCSSから、複数カラムのレイアウトにつかうCSSまでさまざまなCSSを簡単に作成できます。Generator実際に使ってみた画像です。以下のサイトを使えばぱっとコードを書きづらい三角形を描画するためのCSSを生成できます。背景に何らかの工夫を施したいならこのページがおすすめです。簡単に導入できる背景描画ライブラリをいくつも紹介しています。スライドショーやパーティクルのように目を引く効果をウェブサイトに実装したい人は必見です。NxWorldちなみにこのサイトで紹介されているようなパーティクルを自力で実装するならeaselJSというjavascriptライブラリをつかうのがおすすめです。chocolu.net上のサイトにあるような自然な動きを表現するには乱数を活用する必要があります。乱数の使い方については以下のサイトを見るといいでしょう。ics.mediaCanva無料で使えるデザインツールです。商用利用可!大がかりなデザインでなければこのサービスをつかえばかんたんにつくれます。サイトのロゴ、ファーストビュー画像のほか、モックアップツールとしても利用できます。写真やパーツを組み合わせてデザインができます。画像はベクターデータとして保存できるので拡大縮小にも強いです。リンクは英語表記ですが、サイト自体はちゃんと日本語に対応しています。www.canva.comWebサービスではなくiOSアプリですがvectornatorというアプリは無料にもかかわらずイラストレーターとほぼ同じことができます。無料ロゴ本気でロゴをつくるなら、下手な無料サービスよりも有料サービスのほうがコスパがいいです。このページではおしゃれなロゴをつくれるサイトを紹介しています。流行っていた(今も流行っているかもしれないが。ゴミのような自己啓発本を100冊読む前に読むべき本10選Rubyのclassでなぜattr_accessor使うのか:使い道について考えてみる。(1)検索はてなブログをはじめよう!xhatebloさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。