- ウェブアプリとモバイルアプリの違いについて学ぶ
- ウェブアプリケーションのコーディングと構築のさまざまなオプションについて学ぶ
- ウェブアプリを構築するために必要なソフトウェアをインストールする
このレッスンのアクティビティ：
ウェブアプリ
テクノベーション・プロジェクトでは、以下のオプションをお選びいただけます。 モバイルアプリ または ウェブアプリ.
以前Technovationに参加したことがあり、新たなチャレンジを探している参加者や、コーディングの経験がある新規参加者は、TechnovationのプロジェクトでWebアプリを作ることを検討してみてはいかがでしょうか。
多くの参加者は、App InventorまたはThunkableを使用してモバイルアプリを作成します。コーディングが初めての方や、App InventorやThunkableを使用してアプリをコーディングしたい方は、このレッスンをスキップすることができます！
ウェブアプリを作るには、テキストベースのコーディングが必要で、App InventorやThunkableを使ったブロックベースのコーディングよりも高度です。
まず、モバイルアプリ、ウェブアプリ、プログレッシブ・ウェブアプリの違いからおさらいしよう。
モバイルアプリ
- 携帯電話上でネイティブに動作するプログラム
- ダウンロードしてデバイスにインストール
- GPSやカメラなど、携帯電話の機能にアクセスできる
- 特定のプラットフォーム（iOSまたはAndroid）
- オペレーティングシステムに合わせて特定の言語でコーディングされている
ウェブアプリ
- モバイルアプリによく似ている
- インターネットブラウザで動作
- ネイティブではない特定のデバイス（iOSまたはAndroid）
- 一般的に、HTML、CSS、Javascript、Pythonでコーディングされている
- オフラインでは実行できない
プログレッシブ・ウェブ・アプリケーション
- モバイルアプリとウェブアプリのハイブリッドである特殊なタイプのウェブアプリ
- ブラウザで動作
- 通常のモバイルアプリのようにモバイルデバイスにインストールすることもできる
- ユーザーがオフラインの場合でも実行可能
ウェブアプリはウェブサイトとは異なることに注意してほしい。ウェブサイトは静的で、HTMLとCSSを使ってコーディングされる。Webアプリは、ユーザーの入力やその他の外部とのインタラクションに基づいて、ダイナミックに変化します。 テクノベーション・プロジェクトでは、ウェブサイトは認められません。
ウェブアプリケーションを作成するための初心者向けのオプションをいくつか紹介する。
モバイルアプリで取り上げたアプリ構築プラットフォームとの大きな違いは、ブロックベースの言語ではなく、テキストベースのプログラミング言語を使ってウェブアプリを作成することです。
ウェブアプリの作成には、主に2つの言語が使われる。
ジャヴァスクリプト
ジャバスクリプトまたは JSはスクリプト言語である。つまり、コードはモバイルアプリのようにコンパイルされるのではなく、実行時に実行される。これは、俳優がショーのたびに台本を読み進めるようなものだ。
Javascriptは、HTMLやCSSと組み合わせてウェブサイトを作ることが多い。HTMLとCSSは静的なウェブサイトを作るために使われ、情報を表示することはできるが、変化することはない。Javascriptは、インタラクティブ性と、外部要因に基づいてウェブサイトを変更・更新する機能を追加します。そして、ダイナミックでインタラクティブなウェブサイトは、基本的にウェブアプリです。
ピトン
パイソンは非常に人気のある汎用プログラミング言語である。Pythonはプログラミング言語であると同時に でありスクリプト言語でもあるので、コンパイルして実行することもできるが、実行時に実行することもできる。
新米コーダーにもわかりやすく、汎用性の高い言語と考えられている。ソフトウェア開発のさまざまな場面で使われている。そのひとつがウェブ開発だ。もうひとつは機械学習だ。つまりPythonは、より高度なAIウェブアプリを学習・開発するのに最適な選択肢なのだ。
このカリキュラムでは、Pythonを使ってWebアプリを作ることに焦点を当てます。Pythonを使って簡単にWebアプリを作るには、以下のフレームワークを使います。 Streamlit. Streamlitを使えば、少ないコードでパワフルでインタラクティブなWebアプリを作ることができます。 Streamlitはデータを扱うアプリに特化しており、Pythonの機械学習ライブラリを使ってアプリにAIを簡単に組み込むことができます。
主な特徴は以下の通り。
- ブロックベースのコーディング経験が豊富で、新たなチャレンジを探している人には良い選択肢だ。
- テキストベースのコーディングをしたことがある人に向いている
- 広く使われている非常に汎用性の高い言語
- コンピュータにソフトウェアをインストールする必要があります。
- Pythonと関連ライブラリ
- コードエディター
- Streamlitには、Githubを使ってブラウザで実行するオプションがある。
- このカリキュラムでは、このオプションは取り上げない
- AIを使うことができる
- 機械学習モデルを構築し使用するための最も一般的な言語
- このカリキュラムでは、モデル構築にJupyter Notebooksを使用する。
はじめよう
Technovationプロジェクトでウェブアプリケーションをコーディングするには、以下のものが必要です：
- コンピュータまたはラップトップ
- インターネットアクセス
MacやLinuxではターミナル・ウィンドウを、Windowsではターミナルかコマンド・プロンプトを使うことにある程度慣れているはずです。もし経験がなかったり、ターミナルウィンドウが何なのかさえ知らない場合は、アクティビティに進む前にこれらの初心者向けビデオをチェックしてください。
お使いのオペレーティングシステムに適したビデオをご覧ください。
ターミナルの使用
17:03
14:50
12:40
ここでは、ウェブアプリを開発するための2つの選択肢を取り上げる。コンピュータやラップトップでコーディングするか、クラウドですべてをコーディングするかです。どちらを選んでも構いませんが、Technovationのプロジェクトではどちらかを選び、それを貫くことをお勧めします。上記のターミナルコマンドの使い方を知っておくと、どちらの方法でも便利です。
それぞれの長所と短所を紹介しよう。
あなたのコンピュータで
長所：
- ファイルはコンピュータに保存される
- 人気のIDE、Visual Studio Codeの使い方を学ぶ
- ターミナル・ウィンドウの使い方やパッケージのインストールなど、多くのことを学べるだろう。
- 使用するソフトウェアの完全なコントロールと選択
- 常にインターネットに接続しなくてもコーディングできる
CONS：
- チーム内でファイルやコードを共有するのが容易ではない
- パッケージのインストールに非常にイライラし、セットアップに時間がかかることがある。
- コンピュータがクラッシュした場合、ファイルを失う可能性
雲の中
長所：
- ファイルはクラウドに保存される
- コンピュータに何もインストールする必要がない
- ポートフォリオ用のGithubへの自動リンク
- チームでの共有とコーディングが容易
CONS：
- 現地でソフトウェアを使った経験がない
- インターネット接続への依存
アクティビティAまたはアクティビティBのいずれかを選択し、コンピュータ上でローカルにコーディングするか、クラウド上でコーディングするかを選択します。
アクティビティA：コンピュータでPYTHONを始める
ソフトウェアとスターターアプリのコードをインストールする
- ステップ1：Pythonをインストールする。Window、Mac、Linuxのための良いインストラクションセット です。
- ステップ2：コードエディターとStreamlitをインストールする。このビデオでは、Visual Studio Codeをインストールし、コードエディターから実行するためにStreamlitをインストールする方法を紹介します。
- ステップ3 : このビデオに従って、VS Code環境で非常にシンプルなStreamlitウェブアプリを実行します。
- 最初のウェブアプリのスクリーンショットを撮って、メンターにメモと一緒に送ってお祝いしましょう！
アクティビティB：クラウドでPYTHONを始めよう
アカウントの作成とアプリのコーディング
主な用語のおさらい
- ウェブアプリ- モバイルアプリのように見えるが、インターネットブラウザ上で動作し、HTML、CSS、JavascriptまたはPythonを使用してコーディングされたアプリケーション。
振り返り
テキストベースのコーディングに挑戦して、おめでとうございます！以下は、チームやメンターと一緒に考えるための振り返りの質問です。
追加リソース
PythonとStreamlitを使うには、ドキュメントやサポートを参照する必要があります。以下は手始めとして良い場所です。
- Python.orgの初心者ガイドには、Pythonをもっと学ぶための良いリンクがいくつかあります。
- Streamlitのアプリギャラリー
- ナイルグ・プロダクションのStreamlitコース全プレイリスト
