1週間ほどで作ったシンプルなWebサービスを公開しました

f:id:aotree423:20180302213213p:plain

(この記事は2018年3月2日に書かれた記事です)

昨年の12月末に会社を退職しました。

前職では、GeneXusという日本では少々マイナーな自動開発ツールを用いて開発を行っており、広く一般的に使われているプログラミング言語を直接書く(プログラミング)ことが少なかったため、次の仕事に就く前に一通り基礎を学び直しておこうとDotinstallを利用してプログラミングやプログラムを動かすための環境の作り方を勉強していました。

今回、その総まとめとして自動開発ツール、フレームワークを使用しないで0からWebサービスを作って立ち上げてみました。(jQueryやSweet alertなどライブラリは使わせてもらいました!)

 

URL: https://wall.aotree.blue 

 

使用した技術

今回使用した技術をまとめました。

マークアップ言語

  • HTML5
  • CSS3

プログラミング言語

プログラミング手法

ライブラリ/オープンソースディレクト

  • Google Fonts (デザイン)
  • Font Awesome (デザイン)
  • SweetAlert (アクション)
  • jQuery (アクション)

データベース

インフラ

開発スケジュール

思い立ったのが10日前で、実際に手を動かした日数は7日程度です。

1日目: ログイン/サインアップ画面の実装 (元々作っていたログイン機能を流用)

2日目: 付箋貼り付け機能の実装 (元々作っていたTo-do listのロジックを流用)

3日目: デザインの実装

4日目: AWSにてWebサーバー、DBサーバーを作成

5日目: データベース、テーブルの作成

6日目: AWSでのHTTPS化に手こずる

7日目: how to use? ページの作成、デザイン最終調整

wallのUI

f:id:aotree423:20180302212853p:plain

壁に付箋を貼れます。

無料版では1つのウォールに100枚までの付箋を貼れます。

(有料版の実装は、落ち着いたらチャレンジしたいと思っています)

wallの使い方の提案

どのように使っていただくかは自由です。

物理的に離れた場所で仕事をするプロジェクトチームの掲示板、家族の伝言板、個人のアイディアメモ、To-doリスト、好きなものリストなどなど・・

例えばこんな使い方を想定しています。

1.開発プロジェクト

f:id:aotree423:20180302232306p:plain

f:id:aotree423:20180302232302p:plain

2.アイディアメモ

f:id:aotree423:20180302232259p:plain

良い使い方が見つかったら、是非「評価とレビュー」のウォールに書き込んでください。

評価とレビュー

wall name: wall@review-1

password:wallopen

wallの登録手順

1. サインアップ画面にて登録

f:id:aotree423:20180302233309p:plain

  • 全て入力必須です
  • wall nameはログインに使用するユーザーidのようなものです。ウォールはいくつでも作れるので、「他のsnsで使っているid@ウォールのテーマ」などはいかがでしょう。(例: aotree423@hougaku-list, aotree423@to-do-list)
  • wall display nameはウォールの左上に表示されるタイトルです。日本語、英語ともに使えます。
  • emailはパスワードを忘れた際、パスワード初期化を行うために使う予定です。(現時点で未実装ですので、パスワードを忘れないようにしてください!)

終わりに

最初から最後まで自分で作ってみることで、専門外であった環境構築なども経験できて勉強になりました。

今後の展望としては、Webサービスのマネタイズについて経験したいので、色々と落ち着いたら有料会員版の追加機能を実装してみたいと思ってます。

読んでいただきありがとうございます。

広告を非表示にする