目次
はじめに
第1章 開発環境について
第2章 初めての機械学習モデルを作る
第3章 JavaScriptと連携してみよう
第4章 スマホと連携してみよう
第5章 オブジェクト検出モデルを作る
第6章 学習済みモデルを使ってみよう
はじめに
どうも、まさとらん（@0310lan）です！
みなさんは 機械学習モデル を使ったことがあるでしょうか？
機械学習モデルを使うと、これまでになかったユニークなWebアプリを開発することができます。たとえば、画像を認識させて類似の写真だけ集めたアルバムを自動作成したり、顔を分析してだいたいの年齢をズバリ当ててみたり。
しかしながら、いくつか問題点もあります。機械学習の概念や構造の勉強から始まり、難しい言語も時間をかけて学習しなければいけませんし、膨大な量の画像やサンプルを用意したり、モデルをトレーニングさせたりする必要もあります。
しかし、これらの問題を 簡単に解消できたら？
実は、ブラウザーから誰でも手軽に機械学習モデルを作成できるWebサービスが、いくつか公開されています。しかも基本無料で。HTML/CSS/JavaScriptという基本的なプログラムだけで、高度な機械学習を活用したWebアプリを、誰でも作れる時代に突入しているわけです。
そこで、本書はWebサービスとJavaScriptを組み合わせた機械学習モデルの作成方法と、具体的なプログラミング手法について、ひとつずつ丁寧に解説します。前半は、Googleが提供する、誰でも簡単に機械学習モデルを作成できるサービスを活用したサンプルデモを作成します。ここで、基本的な機械学習モデルの概要や、JavaScriptを使ったプログラミング手法を学んでいきます。
後半では、2種類のWebサービスをそれぞれ活用しながら、学習モデルが画像に写っているものを認識・検出できるようにプログラムを組み立てていきます。本書のプログラムは誰でも簡単に始められるように、フロントエンドのJavaScriptだけを使った方法で解説しています。そのため、基本的にはHTMLファイルひとつだけあれば、すべてのサンプルデモを作成できます。
ぜひ、本書を参考に機械学習モデルを活用して、オリジナリティ溢れるWebアプリを開発してみてください！
※本書はHTML・CSS・JavaScriptの基本的なプログラムが書ける方を対象にしています。
※本書で利用するブラウザは「Google Chrome」を推奨しています。
※本書に掲載されているサンプルコードは、以下のサポートページで閲覧可能です。
【サポートページ｜GitHub】
https://github.com/webhacck/js-ai-book第1章 開発環境について
本書では基本的なJavaScriptしか使わないので、開発するサンプルデモは、いずれもHTMLファイルひとつあれば作れます。そのため、もうすでに開発環境を持っている人や、お気に入りのエディターがあるという方は、そのまま手持ちの環境で進めていただいても、まったく問題ありません。
ただし、「まだ開発環境が整ってないんだけど…」という人や、「手軽にちょこっと試してみたい…」という人は、本章を参考にしてみてください。ブラウザーからアクセスするだけで、誰でも簡単にJavaScriptの開発環境を整えることができるクラウドIDEや、プレイグラウンドをいくつかご紹介します。
1.1 Glitch
【 Glitch 】https://glitch.com/edit
HTML / CSS / JavaScriptを使ったフロントエンド開発や、Node.jsを利用したバックエンド開発まで、幅広く活用できるのが大きな特徴です。また、ターミナルも搭載しているので、Linuxコマンドを実行したりなど、コマンドラインからのCLI操作も可能です。
Glitchにはホスティング機能も提供されています。そのため、開発したWebサイトやアプリなどをそのままネット上に公開することで、シェアできるのも大きな魅力です。
その他、主な特徴を挙げると、次のようになります。
・npmパッケージを1クリックで導入
・コードの編集履歴を自動保存できるバージョン管理
・複数人で編集できるコラボ連携
・デバッグ機能
・GitHubアカウントの連携
・Firebaseへのデプロイ機能
・コードエディターの埋め込み機能
・ポートフォリオページの作成
・非公開データの作成
2020年4月時点で、Glitchはすべての機能を無償で利用できるように公開されています。ただし、以下の制限があるので、あらかじめ考慮しておきましょう。
・ユーザー登録をしないと5日間でプロジェクトが消滅する
（無料のユーザー登録をすれば、データを永続的に保存できます）
・プロジェクトを一切使用しない状態が続くと、スリープ状態になります
（アクセスがあれば数秒で復帰します）
・ディスク容量は200MB（Nodeモジュールについては１GB）
・1時間あたりのリクエスト数は最大で4,000です
1.2 Repl.it
【 Repl.it 】https://repl.it/
JavaScriptだけでなく、50以上のプログラミング言語も扱える、万能型のクラウドIDEになります。フロントエンドからバックエンドまで、幅広い開発ができるうえ、ホスティングも無料でしてくれます。なので、Webアプリやサービスをネット上に公開する際に、これひとつで完結できます。
基本的な機能はすべて無料で提供されています。クラウドIDEを高性能なサーバーで利用したい場合のみ、有料プランを選択すればいいでしょう。
また、特徴的なのは、エディター内に開発者同士でわからないことを助け合う仕組みが提供されていることです。さらに、講師＆生徒の関係性でクラスを作成して、授業に活用するようなプラットフォームも利用できるように、設計されています。
その他、主な特徴を挙げると、次のようになります。
・npmパッケージを1クリックで導入
・複数人で編集できるコラボ連携
・GitHubアカウントの連携
・リポジトリへプッシュ＆コミット
・コードエディターの埋め込み機能
・ポートフォリオページの作成
・.envによる環境変数の作成
・コードエディターのカスタマイズ
また、2020年4月時点における無料プランは、サーバー側のマシンスペックがディスク容量500MB・メモリー500MBとなっています（プライベートなプロジェクトは作成不可）。
1.3 その他、オススメの開発環境サービス
他にも、手軽に開発環境を無料で構築できるWebサービスがあるので、いくつか概要を簡単にご紹介しておきます。
【 Gitpod 】https://www.gitpod.io
GitHubのリポジトリに置いているソースコードを、そのままブラウザー上で編集したり、実行できるクラウドIDEです。JavaScript以外にも複数の言語に対応しており、ターミナルも搭載されています。無料で使う場合は、毎月50時間までの制限があります。
【CodeSandbox】https://codesandbox.io
React、Angular、VueなどのJavaScriptフレームワークを、誰でも簡単な操作で開発できるように、環境を整えてくれるサービスです。好きなフレームワークを1クリックですぐに立ち上げられるのが特徴で、開発したプロジェクトを公開することも可能です。
【CodePen】https://codepen.io
HTML / CSS / JavaScriptによるフロントエンド開発だけに特化していますが、手軽に試して実行できるサービスとして有名です。ポートフォリオやブログなどユニークな機能も提供されており、実験や学習用途にも最適です。
【JSFiddle】https://jsfiddle.net
こちらもCodePenとよく似た、フロントエンド開発に特化したサービスです。ユーザー登録をせずに、匿名でそのまますぐにコードを書いて、シェアできる手軽さがウリです。また、複数人で同時にコラボ連携もできるので、ペアプログラミングなどにも使えるでしょう。