質問: 企業で研究・学術寄りの仕事をしている者です。 普段はC++やPythonを用いてロボットのシミュレーションをを行っています。 近頃、組込み寄り・研究寄りの人間でも簡単なサービスを作って社会と双方向的な仕事をする機会があるように感じ、 自分でちょっとしたWebサービスを作れるようになりたいと思っています。 典型的な例としては、以下のような機械学習のデータラベル付けを多くの人にやってもらうサイトです。 1.ユーザのウェブブラウザに画像を表示する 2.画像内に写っているものをユーザにドラッグで囲ってもらう 3.囲ったものの名前ないしカテゴリを選んでもらう 4.ユーザが「送信」を押してラベル付け完了 このようなサイトを作りたいとき、何を習得すればいいのでしょうか。 仕事として経験がある言語はC++, Pythonのみです。 CSSやJavascriptは触ったことがありません。Apacheなどもほぼ未経験の状態です。 HTMLは古いバージョンは多少いじったことがある程度です。完全にこの分野は初心者になります。 # 多少調べはしたものの、Web界隈のフレームワークや、重複した?技術がありすぎて何から手を付ければいいのか、、、 という状態です。Node.js, AltJS, AngularJS, React, Vue.js, PHP, Ruby on Rails, etc... あまり王道的な構成にこだわるつもりはなく、とりあえず自分が好きな環境で手っ取り早く動くものが作れればいい考えです。 仮にPythonオンリーで作れるのならばそれもまたヨシと(個人的に、今のところは)思っています。 甘すぎる質問であれば恐縮ですが、よろしくお願い申し上げます。
回答: 必要な順番でスキルセットを考えてみます * 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フレームワークが台頭してきています。 これのメリット享受するにはそれなりの知識が必要なので、ある程度作りたいものが完成したら勉強会等に出席してみて覚えると良いかと思います。