楽して作るWebサービス！


Silicon Valley Super Ware

2020年4月20日

楽して作るWebサービス！

今年度はWebサービスを使ったビジネスをテーマに活動しています。 ブログでも、Webサービスに特化した記事を配信しています。

「楽にWebサービスを作る」ために、既存のサービスを利用しよう！

という話は既に紹介しています。
フリーランスの場合、時間が限られてきます。 会社などの組織で開発する場合と違い、全部を自分で作ると 時間がかかってしまいます。
いかにある物を利用して効率的にWebサービスを作っていくかという事は あなたのビジネスを成功させるためにはとても重要な事になります。

JavaScript　＋　α

Webサービスと言ってもいろいろな作り方があります。一番簡単なWebサービスは HTMLでページの基本的な構成を書いておいて、そこにJavaScriptのプログラムを埋め込む というスタイルの物です。
例としては、お問合せフォームのWebサービスで作った、フォームにお問合せ内容を入力して 入力された内容をFirebaseのデータベースに送るようなサービスです。

画面のデザインはHTMLとCSS、プログラミングはJavaScript

というように、上手く使いわけて作る事が可能になります。

お問合せフォームの管理ページは違う！

一方で管理ページをご覧になったかたはお分かりかと思いますが、 管理ページはページの構成の殆どをJavaScriptで操作しています。
つまり、決まったページの構成があるわけではなく、必要に応じて 画面を書き換えているというタイプのサービスになります。

HTML はJavaScriptの一部！

お問合せの管理ページの場合、大半のHTMLをJavaScriptで操作しています。 お問合せの管理ページのWebサービスは、データベースに格納されたお問合せ内容を 取り出して表示したり、選択したお問合せ内容は詳細まで表示したりしています。 これは、お問合せの数はデータベースからデータを読む前は分からないから HTMLで準備をすることができないからです。
複雑なWebサービスの多くは、ページを移動するのではなく、 同じページで必要な部分だけを書き換えて作る場合が多くなります。

JavaScriptだけでは意外に大変！

お問合せの管理ページのようなシンプルな場合、JavaScriptだけで 全部のプログラミングを作ってもそれほどは大変ではありません！
しかし、もっと複雑なWebサービスになると、JavaScriptだけで書くのは時間がかかります。

そこで利用するのが「フレームワーク」や「ライブラリ」です

「HTML」、「CSS」、「JavaScript」だけでは無かったのか！
話が違うぞ！と思われる方もいらっしゃるかもしれません。あくまで使う「言語」はJavaScirptです。

フレームワークやライブラリは大変な所を簡単に作る仕組みです！

「jQuery」、「Vue.js」、「React」、「Angular」などが フレームワークやライブラリの例です。どれか一つくらいは聞いた事があるかと思います。

楽して作って、楽して管理！

全部を使う必要はありません！既にどれかを勉強されている場合、 それを使えば良いかと思います。シリコンバレースーパーウエアでは、 主に「jQuery」と「React」を利用しています。
  • jQuery - 規模の小さいWebサービス
  • React - 複雑なWebサービス
という感じで使い分けています。殆どのサービスではReactを利用しています。
コードの中でHTMLの記述を書くと、開発中は良いのですが、 暫くして保守や、トラブル対応でコードを治すときに意外に苦労します。 こうしたフレームワークやライブラリを使うと、コードをより見通し良く 書くことも可能になるので、

保守や不具合対応も楽になります！

別に無理に使う必要はありませんが、一度試しにコードを書き比べてみると ありがたさが良くわかります。

道具はそろいました！

Webサービスを作る単に必要な物が見えてきましたね！
  • 基本：HTML/CSS/JavaScript
  • バックエンドサービス：Firebase
  • 既存のサービス
  • フレームワーク・ライブラリ
この4点を組み合わせてWebサービスを作ると、初心者でも 短期間で高機能かつ高品質のWebサービスを短期間で実現できます。

高機能・高品質ですので価値も高く、大きな収益も期待できます！

効率的に短期間で作って、高く売れるわけですからビジネスとしては申し分ありません！

勉強に時間をかけるな！

勉強は大切です！しかし、勉強するより、実際に作りながら覚えた方が、より実践的、効率的に Webサービスの作り方を身に着ける事ができます！
まずは、簡単なお問合せフォームのWebサービスを作ってみてください。いろいろな事が短期間で学べます！
シリコンバレースーパーウエアでは、Webサービスの作り方だけではなく、作ったWebサービスを利用した ビジネスの展開までを身に着ける事が可能です。

興味のある方は今すぐお問合せください！



またよろしければ、ニュースレターの登録をお願いします！大体週一回お届けしています。ブログよりは一歩踏み込んだもっと濃い内容を発信しています。



Copyright(c) 2020 by Silicon Valley Super Ware, all rights reserved.

コメント

コメントを投稿

このブログの人気の投稿

ユーザーインターフェースの設計

イメージ
ホーム ブログ Firebase情報 ユーザーインターフェースの設計 2022年10月12日 ユーザーインターフェースの設計 前回は、入力フォームを変更して四則演算をできるようにしました。利用しているフォームは数式の穴埋め形式になっています。計算をする場合、一般的な電卓のようなインターフェースの方が一般の方には使いやすい場合が多いと言えます。今回は、ユーザーインターフェースを変更して一般的な電卓のようにする方法について考えてみました。 HTML でデザイン これまでの、ユーザーインターフェースは、数式の穴埋め形式のフォームでした。 今回は、一般的な電卓のようなユーザーインターフェースを実現します。 この記事では、プログラムの部分は取り敢えず別にして、まずはユーザーインターフェースを作成することにします。 Web アプリの場合、ユーザーインターフェースは基本的に HTML で記述します。 今回の電卓形式のユーザーインターフェースは、電卓の数字を表示する部分（ディスプレイ部分）と数字や演算子を入力する部分（ボタン部分）に分けて考えることができます。 HTML では、「input」のタグでディスプレイ部分を、「button」のタグでボタン部分を記述できます。 <!DOCTYPE html> <html> <head> <title>Calculator</title> </head> <body> <div class="calc"> <div> <input class="display" type="text" /> </div> <div class="keypad"> <div> <button class="clea
続きを読む

足し算以外もできるようにする

イメージ
ホーム ブログ Firebase情報 足し算以外もできるようにする 2022年9月29日 足し算以外もできるようにする 穴埋め形式の数式のフォームを使って足し算をするプログラムを紹介しましたが、同じ要領で、引き算、掛け算、割り算もサポートできるとさらに便利です。この記事では、足し算のプログラムを拡張して、整数の子息演算をできるようにした例を紹介します。 演算子を選べるように変更する 足し算のアプリでは、計算できるのは足し算だけだったので、フォームには「＋」を固定で表示していました。 この部分に変更を加えて、必要な演算子を選択できるようにすれば、引き算、掛け算、割り算もサポートできるようにできます。 これには、HTML の記述を変更してフォームを変更する必要があります。 <label>+</label> を以下のように変更します。 <select onchange="operatorChanged(event)"> <option>+</option> <option>-</option> <option>*</option> <option>/</option> </select> HTML の「select」タグを使って、選択肢は、「option」タグで記述するだけです。 演算子の変更を反映する プログラム側でやることは三つです。 初期状態の演算子を設定する　（最初にフォーム上で表示されている演算子をセットする） 演算子の変更を検出して、現在選択されている選択肢を更新する 「Calcullate」ボタンがクリックされたら必要な処理を呼び出す 現在どの演算子が選択されているかを知る必要があります。実装方法は幾つかありますが、今回は選択が変更される度に現在選択されている演算子を更新する方法を採用した例を紹介します。 これには、現在選択されている演算子を保存する変数「operator」を用意して管理します。
続きを読む

改良版足し算プログラム

イメージ
ホーム ブログ Firebase情報 改良版足し算プログラム 2022年9月15日 改良版足し算プログラム 前回は、入力データのチェックを工夫することで、データを処理する前に想定外のデータの入力を制限するユーザーインターフェースの設計について紹介しました。この記事では、そのコンセプトを使って、実際に足し算をするプログラムにしてみました。今回のポイントは、ユーザーインターフェースとデータ処理を分けるという点に注目してみました。プログラムの設計の際には、この二つの境界をきちんと設定する事が大切です。 データの処理は？ このプログラムは、入力された二つの整数を足して結果を表示するというシンプルなプログラムです。 このプログラムのデータ処理部分は、実は二つの整数の足し算をするだけです。 つまり、プログラムのデータ処理部分は以下の関数「add(a, b)」だけです。 function add(a, b) { return a + b; } 処理自体は、二つの整数「a」と「b」を受け取って、この二つの整数を足し算した結果を返すというシンプルなものです。 残りのプログラムは？ このプログラムのデータ処理部分は、至ってシンプルです。 では、残りのプログラムは何かというと、これがユーザーインターフェースになります。 <!DOCTYPE html> <html> <head> <title>Add Program</title> </head> <body> <div> <input id="opeland0" type="text" placeholder="Please input integer" /> <label>+</label> <input id="opeland1" type="text&qu
続きを読む