企業で研究・学術寄りの仕事をしている者です。
普段はC++やPythonを用いてロボットのシミュレーションをを行っています。

近頃、組込み寄り・研究寄りの人間でも簡単なサービスを作って社会と双方向的な仕事をする機会があるように感じ、
自分でちょっとしたWebサービスを作れるようになりたいと思っています。

典型的な例としては、以下のような機械学習のデータラベル付けを多くの人にやってもらうサイトです。
１．ユーザのウェブブラウザに画像を表示する
２．画像内に写っているものをユーザにドラッグで囲ってもらう
３．囲ったものの名前ないしカテゴリを選んでもらう
４．ユーザが「送信」を押してラベル付け完了

このようなサイトを作りたいとき、何を習得すればいいのでしょうか。
仕事として経験がある言語はC++, Pythonのみです。
CSSやJavascriptは触ったことがありません。Apacheなどもほぼ未経験の状態です。
HTMLは古いバージョンは多少いじったことがある程度です。完全にこの分野は初心者になります。

＃多少調べはしたものの、Web界隈のフレームワークや、重複した？技術がありすぎて何から手を付ければいいのか、、、
という状態です。Node.js, AltJS, AngularJS, React, Vue.js, PHP, Ruby on Rails, etc...

あまり王道的な構成にこだわるつもりはなく、とりあえず自分が好きな環境で手っ取り早く動くものが作れればいい考えです。
仮にPythonオンリーで作れるのならばそれもまたヨシと（個人的に、今のところは）思っています。

甘すぎる質問であれば恐縮ですが、よろしくお願い申し上げます。

行動規範の内容に同意します

回答3件

ベストアンサー

必要な順番でスキルセットを考えてみます

HTML5, CSS, JavaScript
Python (Webサーバー)
DataBase (MySQL等)
Apache or Nginx
Ajax and JSON
jQuery

以下解説

HTML5, CSS, JavaScript

ブラウザで画像を矩形選択してどうのこうのは、JavaScript、HTML、CSSのそれなりな知識が必要です。
これに逃げ場は無いので覚えましょう。

Webサーバー

Webサーバーというのは、マシンの80番ポートでユーザーからのリクエストを待ち構え、
ユーザーからのリクエストに従ってHTML・CSS・JS・画像ファイル等を返すサーバーをいいます。

ポートを開いてリクエストを待ち受ける仕組みさえあればどの言語を利用してもWebサーバーは構築できます。
「Python Webサーバー」で検索すると山ほど記事が出ますし、
1年程前にセッションで聞いた話では、ドワンゴはニコニコ動画という高トラフィックのサービスに備えて高速なC++言語をWebサーバーに選定したとか…

機械学習の世界ではPythonが有利なのでPythonのWebサーバーを構築すると良いかと思います。
リクエストを受け取ってそのままAPIやライブラリが叩けますからね。

データベース

基本的に何かの保存する仕組みを持ったWebサーバーならデータベースが必要になるでしょう。
画像ファイル以外の全てのデータはAPIに投げてしまう構造ならば必要ありません。
好きなのを選べば良いと思いますが、MySQLが記事が多く最初に触るDBとしておすすめとして挙げておきます。

Apache or Nginx

質問文に上がっているApacheは静的ファイルを返すことに特化したWebサーバーです。
論理的にはURL文字列とサーバー内の特定ディレクトリをイコールで紐付け、パスに相当するファイルを文字列として返してくれます。
ファイルをキャッシュしたり、インターネット上に流す前に圧縮をかけてファイルサイズを減らしたりと高速に動作させる専用の機能も盛り込まれています。

同じような事が出来るアプリにNginxがあり、こちらもApacheと同様の事が出来ます。
こちらはApacheより高速に動作することを目的として作られており、後発なので資料は少ないでしょう。

HTML5やCSS、JavaSript等のファイルは不変なのでこちらで実装し、
特定のパスに接続した場合、Pythonで実装した機械学習用のデータを受け取る仕組みのWebサーバーに受け流す仕組みを実装してあげると良いでしょう
（この別のWebサーバーにリクエストを受け流す仕組みをリバースプロキシと呼びます）

Ajax

AjaxはJavaScriptから非同期通信を行うための手法です。
画像の矩形選択情報をPythonに手渡す為にはこの手法以外にほぼ選択肢はありません。

元々はMSが「なんのために使うかわからんけどとりあえず実装しとこ」と用意したXMLHttpRequest機能を、
GoogleMapが採用したことでUIの素晴らしさと相まり一躍人気になり、後付でAjaxと名付けられました。

記述はアホみたいに難しく多数のエンジニアを地獄の底に突き落としてきました。
後述のjQueryライブラリで超簡単に記述出来るので利用しましょう。

JSON

JSON の紹介という記事があるのでぺたり。
Web関係ではポピュラーに扱われており、特に名前の通りJavaScriptが一番メリットを享受出来ます。
世のAPIサーバーの多数がこのファイルフォーマットでやり取りしているので、覚えておくと今後の活動も楽になるかと思います。

jQuery -> JSフレームワーク

jQueryはJavaScriptのグローバル変数$に超便利なあれこれの関数を実装したライブラリです。
素のJavaScriptでAjax通信を発行したり、HTMLの要素を掴んで操る事はとても困難ですが、
jQueryを利用すると直感的にスッキリとしたコードにしあがります。

ただし、jQueryはその性質から処理的な記述になってしまいます。
最新のフロントエンド界隈では、オブザーバーパターンを利用した形にシフトしつつあります。
HTML内の特定要素と変数を結びつけて置くと、特定要素は変数を逐次監視し続けて、変数の中身が変化すると勝手に画面が書き換わるという仕組みを構築します。

この仕組みを構築するのはとても困難ですが、
簡単にする利用するためにVue.js、React、AngularJSというJSフレームワークが台頭してきています。
これのメリット享受するにはそれなりの知識が必要なので、ある程度作りたいものが完成したら勉強会等に出席してみて覚えると良いかと思います。

投稿2017/01/02 03:56

miyabi-sun

総合スコア21158

sin_250

2017/01/08 11:29

素晴らしく的を得た、整理されたご回答をありがとうございます。また、お礼が遅くなり大変申し訳ありません。新年早々インフルエンザで完全にダウンしておりました。何から勉強し始めればいいのか、わかってきました。正直お金を払ってもいいくらいためになるご回答です。ありがとうございました。

行動規範の内容に同意します

申し訳ありませんが、回答ではなく、失礼ながら興味が有るのでチェック的なお話です。：

１．ユーザのウェブブラウザに画像を表示する

表示するだけなら、通常の` <img> `タグで良いでしょう。ただ、基本的には JavaScript, DOM Base, WEB API での運用は必須です。スクリプト・ベースの` <svg> `を利用する等の特定・固有条件が有れば、この表示も、下記対応も、別途考察が必要かと思います。

※想定される画像・形式が有るのならば、お知らせ下さい。

ライブラリやフレームワーク、CMS 等を利用する事で簡易化した、この画像管理に関するデータベースは必要でしょう。私は PHP で書くと思いますが、スクラッチで書いても、直接「バイナリー」をデータベース内に取り込まないのであれば（処理が増える）、工数は高くならないと思います。つまりは、単なる「画像名リスト DB 」（作るのなら、+ フォルダ名やサイズ等標準的な）になります。

勿論、画像表示自体にロジックが存在するのなら、そもそも要件が必要です。

２．画像内に写っているものをユーザにドラッグで囲ってもらう

矩形選択（ Rectangle ）ならば、

    カーソル移動・選択開始位置へ
    クリック or マウス・ダウン・JavaScript で位置取得可能
    矩形ベースで囲む・選択終了位置へ
    マウス・アップ・JavaScript で位置取得可能

で可能だと思います。

選択後は、このデータ（開始位置、終了位置）を保持するか、Temp もしくは DB への保存処理が必要です。これは、ユーザ操作を含めた、運用ベースの考察が必要でしょう。

そのコード・ベースは、「１」と同じ条件の方が好ましいでしょう。

また、データベースには「開始位置、終了位置」が画像データ・レコードにリンクしていれば良いとは思いますが、ユーザに対して囲んだ矩形を表示するには、新規に DOM オブジェクトを生成する必要が有ります。かつ、そのまま「編集・更新」が必要だとすると、詳細な要件と操作フローの必要性を感じます。

その内容によって、スクラッチ開発の選択・非選択に始まり、利用するライブラリ等も変って来るでしょう。

そして恐らく、ここに一番工数が必要だと思います。

※矩形範囲をクリップして、別画像として保存する事も出来ますが、更に工数は増えます。

３．囲ったものの名前ないしカテゴリを選んでもらう

これは単純に、既存項目のリスト選択に加えて、新規追加出来るインターフェースを`<form>`ベースで構築するだけです。勿論、利用している「１」と同じコード・ベース準拠で構いません。

ただ、Machine Learning 的な利用を想定すると、あくまで「コード・ベース」での「理解度の高い」名称・カテゴリ化と、「人間ベース」での名称・カテゴリのバインドは必要な気がします。主観としては、その選択には差分が存在すると感じます。

４．ユーザが「送信」を押してラベル付け完了

データ保存は、通常の DB ロジックで構わないでしょう。そこには、上記には入れ込んでいないユーザ情報とそのバインドが必要です。

更に、ユーザ間での「カテゴリによるリレーション」等、データ利用上のロジックやフローも詳細が無いと想定出来ません。

ただ、そもそも Machine Learning ベースでは、こちらが実データの運用歴を持ちませんので、その想定されるデータ量や、適した DB 自体が想定出来ません。これも、ライブラリ他を想定出来ない理由です。

また、保存されたデータの活用方法が全く見えていません。「漠然とデータを収集する」のもファクターとしては理解していますが、どうもそこから「要件」も引き出せないので、「回答」に至らないとも言えます。

以上、回答とは言えず恐縮ですが、逆にご指摘や追加的情報が有りましたら、拝見出来ればと思います。

また、この文面に回答が無くとも、情報が更新されれば、継続して拝見したいと思いますし、公開可能であれば、完成後に情報を掲載して頂ければ幸いです。コードではなく、開発環境・実環境や設計概要的な物でも構いません。

お邪魔致しました。

投稿2017/01/01 12:31

Webmans-JP

総合スコア51

sin_250

2017/01/08 12:29

詳細なご回答有難うございます。また、お礼が遅くなり恐縮です。例として挙げたデータのタグ付けについては、そこまで深く考えていたわけではないのですが、例えば監視カメラで動体検出まではしたけどもクラス分類ができなかった（不明クラスになった）ものが発生したときの画像などを集めておき、人間に上記のようなやり方でタグをつけてもらうようなイメージでした。クラスとしては、単なる人、車、、、というレベルでなく、男性中年、女性子供、女性自転車というレベルです。（念の為記載しておくと、これはあくまで自分個人のやれたらいいなという例であって、会社の仕事でこういうことを直近やるわけではないです）詳細なご回答有難うございました。

行動規範の内容に同意します

「これでできる！」
という回答では無いですが、Pythonを利用していらっしゃるということで、
「こんなフレームワークやライブラリがありますよ」
という紹介だけさせていただきます。