質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.45%

  • JavaScript

    21080questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Python

    12401questions

    Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

  • Webサイト

    1313questions

    一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

  • Webサーバー

    505questions

    Webサーバーとは、HTTPリクエストに応じて、クライアントに情報を提供するシステムです。

  • サービス

    49questions

    サービスとはバックグラウンド上に常駐し、長時間稼動し続ける実行可能ファイルを指します。

Webプログラミングの第一歩

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 1,184

sin_250

score 68

企業で研究・学術寄りの仕事をしている者です。
普段は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オンリーで作れるのならばそれもまたヨシと(個人的に、今のところは)思っています。

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+5

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

  • 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/08 20:29

    素晴らしく的を得た、整理されたご回答をありがとうございます。
    また、お礼が遅くなり大変申し訳ありません。
    新年早々インフルエンザで完全にダウンしておりました。

    何から勉強し始めればいいのか、わかってきました。
    正直お金を払ってもいいくらいためになるご回答です。ありがとうございました。

    キャンセル

+2

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

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

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

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

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

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

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

矩形選択( Rectangle )ならば、

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

で可能だと思います。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

お邪魔致しました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/08 21:29

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

    キャンセル

+1

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

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

ということですので、まずは軽量WebフレームワークのBottleFlaskを利用してサーバーサイドは作れると思います。

ただ。上記は軽量フレームワークなので、拡張すると逆にメンテナンスしづらくなる恐れがあるため、規模が大きくなりそうになったらdjangoPyramidに切り替えたほうが良いかもしれません。

また、HTTPサーバーに関しては、OSはお好みのもので構いませんが、Gunicorn単体でHTTP+WSGIサーバーを立てるかnginx+uWSGIの組み合わせが良いのかなと思います。

DBシステムの選定やフロントエンドのフレームワークの選定なのですが、これはどれくらいのデータを捌くかによるのかなと思います。

要件定義から使うライブラリやシステムの選定というのは本当に悩ましいです。正直答えはプロジェクトの数だけあると行っても過言ではないかと。

ぼやっとした回答しかできず申し訳ありません。
ですが、なんらかのヒントになれば幸いです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/08 20:32

    Flask,およびdjangoのチュートリアルをそれぞれ見てみました。
    なかなか丁寧に、概念的なところから説明が作られていて作った方の仕事に感謝です。
    とりあえずWebサーバーの構築はPythonメインで考えたいと思います。
    ご回答有難うございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.45%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    21080questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Python

    12401questions

    Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

  • Webサイト

    1313questions

    一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

  • Webサーバー

    505questions

    Webサーバーとは、HTTPリクエストに応じて、クライアントに情報を提供するシステムです。

  • サービス

    49questions

    サービスとはバックグラウンド上に常駐し、長時間稼動し続ける実行可能ファイルを指します。