ムカデノワラジ

ムカデノワラジ

ガジェット・Webサービス・プログラミング・エンタメについて書く雑記ブログ

MENU

Webサービスを独学で開発するときに役に立つWebサイト・フレームワークまとめ

この記事では、プログラミングをしてWebサービスを個人&独学で開発するときに役に立つ&役に立ったWebサービス、Webサイトを紹介します。

関西ブライダル無料相談・資料請求

全般

質問サイト

Qiitastackoverflow(英語版)を使えばプログラミング初心者が頻繁に陥りがちなバグやエラーの解決法を見つけることができます。

Qiitaは最近は記事の質が下がっているようにも感じますが、初歩的な情報はまとめられているので問題ないでしょう。

より理論に踏み込んだ知識を得たいなら専門書を読み込むことが必要です。しかしウェブサービスを開発する目的を果たすだけなら「どのように?(HOW)」がわかれば「なぜ?(WHY)」は後からでもいいと思います。

また「〇〇してみた」という記事を参考に自分で手を動かして作ってみるとより理解が深まります。後から紹介する「firebase」を使ってみたかったら、以下の記事がおすすめです。

qiita.com

※侍エンジニア塾もそれなりに役に立ちますが、SEO対策のためか、一記事一記事に不必要な情報がもりもりの盛り込まれているので正直言って使いづらいです。(前置きが長すぎます。あとプログラミングスクールの広告がうっとおしいですね。)

 

qiita.com

Stackoverflowを使うなら英語版にしましょう。日本語版は情報の量が少ないです。英語ができない人もこれを機に英語を学習してみましょう。なんたってエラーメッセージもだいたい英語ですし。。。

stackoverflow.com

 

チュートリアル

Rails

Railsを使っているならまずはRails チュートリアル、つぎにこのサイトをやると大体の知識を身につけられます。とくに独学の人におすすめです。

www.sendai-freelance.com

サーバー・データベース

サーバー・データベースに関しては皆さん大好きHerokufirebaseを使いましょう。Herokuもfirebaseもホスティング・データベース機能を基本無料で使えます。初めての方にはHerokuがおすすめです。

firebaseは新しい機能をたくさん盛り込んでありますが(NoSQLなど)使いこなそうと思うと新たに覚えないといけないことが増えます。

※firebaseを使いこなせればSPAやシンプルなnode.jsアプリケーション、androidiosアプリケーションを爆速で作れます。

 

クラウド・アプリケーション・プラットフォーム | Heroku

Firebase

 

開発環境 

cloud9

cloud9は有名なクラウド開発環境です。

cloud9をつかえば、面倒で煩雑な開発環境構築をスキップできます。特にWindowsRailsの愛称は最悪なのでcloud9を使わないにしてもdockerをつかうか、Hyper-Vなどの仮想環境でLinuxを使うかしたほうがいいです。

cloud9はクラウド上で動作するので、パソコンだけでなくスマホタブレットからもアクセスできます。

 

API

Webアプリケーションに何らかの機能を盛り込む場合、外部APIを使うと簡単にできる場合があります。最近はAPIが充実しているので地図から機械学習までよりどりみどりです。

書籍検索ならgoogle books APIがおすすめです。書籍名からISBN、ISBNから書籍名など、柔軟な実装が可能です。

AmazonAPIも使ってみたのですが、本の種類が豊富とはいえ、利用制限が厳しいのであまりおススメできないです。

APIに関してはgoogleamazon様様です。

 代表的なAPIや使い道も書いておきます。

Google API

地図・表計算youtube動画利用・機械学習(文字抽出や画像認識)

※画像系の機械学習APIMicrosoftdocomoも提供しています。

BOT制作

Twitter API ※最近は制限が厳しい

Line API

飲食店検索

ホットペッパーAPI

ぐるなびAPI

政府統計

e-Stat API

決済

payjp 手数料約3%でウェブサイトにクレジット決済を導入できます。formがiframeで隔離されているので安全性も高いです。

stripe payjpと同様のサービス。本家はフランスの会社。

BASE ※BASEはオンラインストア作成サービスを運営しています。

フロントエンド・デザイン

以下のサイトはデザインの優れたサイトがまとめられたサイトです。

sankoudesign.com

配色

配色はウェブサイトの印象を左右する重要な要素です。名だたるサービスの配色は非常に優れています。これなんて一目でグーグルっぽいとわかりますよね。

f:id:xhateblo:20190303192858p:plain

詳細はこのサイトでみれます。このサイトはウェブサイトの配色を見たり調べたりできるサイトです。

webcolourdata.com

 color hunt

このサイトは日々あたらしい配色が投稿されています。このサイトのいいところは色の組み合わせだけでなく色の量の比率も一目でわかる点です。メインの色と他のさし色の組み合わせに注目してみるといいでしょう。

 

colorhunt.co

このサイトはweb開発だけでなく、デザイナーにもうれしいですね。

ちょっと話はそれますが、好きなクリエイターの一人で「しらこ」という人なんですが、その人も配色をもとにイラストを制作してらっしゃいます。とても素敵なのでHPをいちどぜひごらんください。イラストのメイキングも公開しているのでデザイナー的な視点を身に着けたいエンジニアのかたにおすすめです。

rakoshirako.com

配色に興味がある人には以下の「フランスの配色」という書籍がおすすめです。

フランスの配色

フランスの配色

 

この書籍は日本では見られないような大胆な配色が載っています。配色における色の面積比も確認できるのでメインカラーとサブカラーのバランスの良い使い方を辞書の様に調べるのに使えます。

 

HTMLをHAMLに変換

HTMLでページを作っているとどうしてもコードが冗長になります。修正するときも目が疲れますし、入力するときも手を動かす量が増えますしいいことはありません。HAMLに変換してしまいましょう。以下のサイトで、HTMLをHAMLに変換できます。

 

html2haml.herokuapp.com

 

フレームワーク

フロントエンドのフレームワークというとbootstrapが有名ですね。bootstrapを使えば、クラスを指定するだけでレイアウトを整えられます。レスポンシブにも対応しているので、

いちいち@media (max-width:xxx)のようなメディアクエリを書く必要がなくなります。

同様のCSSフレームワークでおススメなのはBulmaです。基本CSSのみで作られたシンプルで軽量なフレームワークです。flexboxをつかってレスポンシブに対応しています。

CDN経由で読み込むか、CSSファイルをダウンロードすれば使えます。

bulma.io

 

CSSジェネレーター

以下のサイトでは基本的なCSSから、複数カラムのレイアウトにつかうCSSまでさまざまなCSSを簡単に作成できます。

CSS3 Generator

実際に使ってみた画像です。

f:id:xhateblo:20190303193614p:plain

 

以下のサイトを使えばぱっとコードを書きづらい三角形を描画するためのCSSを生成できます。

apps.eky.hk

背景

背景に何らかの工夫を施したいならこのページがおすすめです。簡単に導入できる背景描画ライブラリをいくつも紹介しています。

スライドショーやパーティクルのように目を引く効果をウェブサイトに実装したい人は必見です。

背景にひと手間加えたい時に便利なスクリプト 10+ | NxWorld

ちなみにこのサイトで紹介されているようなパーティクルを自力で実装するならeaselJSというjavascriptライブラリをつかうのがおすすめです。参考サイトはこちら。

chocolu.net

上のサイトにあるような自然な動きを表現するには乱数を活用する必要があります。乱数の使い方については以下のサイトを見るといいでしょう。

ics.media

 

Canva

無料で使えるデザインツールです。商用利用可!大がかりなデザインでなければこのサービスをつかえばかんたんにつくれます。

サイトのロゴ、ファーストビュー画像のほか、モックアップツールとしても利用できます。

このようにたくさんのテンプレートからデザインを選んだり、

f:id:xhateblo:20190303183558p:plain

写真やパーツを組み合わせてデザインができます。

f:id:xhateblo:20190303183715p:plain

 

画像はベクターデータとして保存できるので拡大縮小にも強いです。

リンクは英語表記ですが、サイト自体はちゃんと日本語に対応しています。

www.canva.com

 WebサービスではなくiOSアプリですがvectornatorというアプリは無料にもかかわらずイラストレーターとほぼ同じことができます。

Vectornator

Vectornator

  • Linearity GmbH
  • 仕事効率化
  • 無料

 

 ロゴ

本気でロゴをつくるなら、下手な無料サービスよりも有料サービスのほうがコスパがいいです。このページではおしゃれなロゴをつくれるサイトを紹介しています。

 

peraichi.com

 

そのほかの記事

xhateblo.hatenablog.com

xhateblo.hatenablog.com

xhateblo.hatenablog.com