スマホだけでWebアプリを開発する方法 – Python × Pydroid 3 Androidアプリ開発チュートリアル

こんにちは!私は18歳のバックエンド開発者で、機械学習エンジニアを目指して勉強中です。この記事では、スマートフォン1台とPythonだけを使ってWebアプリを構築する方法を解説します😁。それでは早速始めましょう!

必要なもの

まず必要なのは、Android 6.0以降を搭載したスマートフォンだけです。「それだけ?」と思われるかもしれませんが、本当にこれだけでOKです。

次に、スマホに「Pydroid 3」というモバイルアプリをインストールしましょう。

ご覧のとおり、Pydroid 3はスマートフォン上でPythonコードを書けるようにしてくれるアプリです。Google Playストアからインストールしてください。

続いてDjangoをインストールします。Djangoに馴染みのない方は、先に公式ドキュメントを確認しておくと良いでしょう。

Djangoをインストールするには、Pydroid 3のサイドメニュー(左上のハンバーガーアイコン)を開き、「Terminal」を選択します。

ターミナルを開くと、次のような画面が表示されます。

あとは以下のコマンドを入力するだけです。

pip install django

私の環境ではすでにインストール済みのため、「Requirement already satisfied(要件は既に満たされています)」というメッセージが表示されています。

インストールが完了したら、ターミナルで django-admin と入力してEnterキーを押し、正しくインストールされたか確認しましょう。

コマンドの一覧が表示されれば、正常にインストールできています。

プロジェクトの作成方法

それでは、プロジェクトを作成していきましょう。ターミナルを開いて以下のコマンドを実行します。

django-admin startproject myapp

これで、ルートフォルダに「myapp」という名前のDjangoプロジェクトが作成されます。

cd myapp でディレクトリを移動し、python manage.py runserver を実行すると、開発サーバーが起動します。

サーバーが起動したら、ブラウザで 127.0.0.1:8000 にアクセスして動作を確認してみましょう。

Djangoのロケット画面が表示されれば、セットアップ成功です!

次に、Djangoアプリを作成します。Djangoでは、プロジェクトフォルダが全体の土台となり、その中にあるアプリが実際の機能を担います。

myappディレクトリにいることを確認して、python manage.py startapp todo と入力します。これでToDoアプリ用のフォルダが作成されます。

todoフォルダの中には、以下のようなファイルが生成されているはずです。

各ファイルの役割は、実際に編集する際に順番に見ていきます。

アプリケーションの設定方法

次に、作成したtodoアプリをDjangoプロジェクトで使えるように設定します。まず、myappフォルダ内の settings.py を開き、INSTALLED_APPSに 'todo' を追加します。

続いて urls.py を開き、以下のコードを追記します。

from django.urls import path, include

path('', include('todo.urls'))

ここでは、import文に include を追加し、admin用のパスの下に、todoアプリの urls.py を読み込むための空のパスを定義しています。

さらに、todoフォルダ内に新しく urls.py というファイルを作成し、以下のコードを記述します。

from django.urls import path
from . import views

urlpatterns = [
	path('', views.index, name='home')
 ]

django.urls から path を、同じ階層から views をそれぞれインポートしています。views.index は、views.py 内のindex関数を指しています。仕組みはすぐ後で説明します。

次に views.py にコードを追加していきましょう。ファイルの先頭で、以下のように HttpResponse をインポートします。

from django.http import HttpResponse

def index(request):
	return HttpResponse('Hello')

urls.pyで呼び出したindex関数をここで定義し、requestを受け取ってHttpResponseを返しています。とてもシンプルですね。

動作確認のため、ターミナルでmyappに移動し、python manage.py runserver を実行してみましょう。

「Hello」と表示されれば成功です。次はHTMLテンプレートを読み込んでみましょう。

テンプレートを読み込むには、todoディレクトリ内に以下の構造でフォルダを作成します。

todo/templates/todo

todoディレクトリ直下に「templates」フォルダを作り、その中にさらに「todo」フォルダを作成します。これだけです。

そして、その中に index.html というファイルを作成し、以下の内容を書いてください。

<h1>Hello world</h1>

このテンプレートを読み込むには、views.py を以下のように書き換えます。

def index(request):
	return render(request, 'todo/index.html')

HttpResponseの代わりにrender関数を使うことで、HTMLテンプレートをレンダリングできるようになります。保存してサーバーを起動すると…

無事に表示されました!次のステップに進みましょう。

静的ファイル(CSS)の設定方法

静的ファイルを扱うため、todoディレクトリ内に「static」というフォルダを作成し、その中にさらに「todo」フォルダを作ります。

構造は /static/todo/ のようになります。

todoフォルダ内に main.css ファイルを作成し、簡単なスタイルを書いてみましょう。

body {
background-color: red;
}

保存したら、index.html を以下のように書き換えます。

{% load static %}
<!Doctype html>
<html>
<head>
<title>My page</title>
<link rel="stylesheet" href="{% static 'todo/main.css' %}" >
</head>
<body>
Hello
</body>
</html>

それでは実行して確認してみましょう。

手順どおりに進めていれば、背景が赤く変わっているはずです。

モデルと管理画面の設定方法

管理画面(admin)を使うには、スーパーユーザーを作成する必要があります。ターミナルでmyappフォルダに移動し、python manage.py createsuperuser を実行します。

まだマイグレーションを実行していないため、エラーが表示されます。まず python manage.py migrate を実行しましょう。

その後、もう一度 python manage.py createsuperuser を実行します。

ユーザー名やパスワードなどの情報を入力して、スーパーユーザーを作成してください。

次にサーバーを起動し、ブラウザで 127.0.0.1:8000/admin にアクセスします。

ログインすると、管理画面のダッシュボードが表示されます。

管理画面の準備ができたので、次はモデル(データベース)を作成していきます。投稿内容を保存するシンプルなモデルを定義しましょう。models.py を開いて、以下のコードを追加します。

class Post(models.Model):
	content = models.CharField(max_length=255, null=False)
    
    def __str__(self):
    	return self.content

models.Model を継承したPostクラスを作成し、テキストを保存する CharField 型のcontentフィールドを定義しています。最後の __str__ メソッドは、管理画面などでオブジェクト名ではなくコンテンツの内容を返すためのものです。

続いてマイグレーションを実行します。ターミナルでmyappに移動し、python manage.py makemigrations を実行します。

これでデータベースにPostテーブルが作成されました。続けて python manage.py migrate も実行します。

これで準備完了です。次に、このモデルを管理画面に登録します。admin.py を開いて以下のコードを記述してください。

from .models import *

admin.site.register(Post)

models.pyからすべてのモデルクラスをインポートし、Postモデルを管理画面に登録しました。管理画面を開くと、Postが表示されるようになっています。

todoアプリの項目として追加されていますね。

クリックすると、投稿の一覧画面が表示されます。

ここから自由に投稿データを作成できます。

データベースのデータを画面に表示する方法

最後に、データベースからデータを取得して画面に表示しましょう。views.py を以下のように更新します。

from .models import *

def index(request):
	content = Post.objects.all()
    context = {'content': content}
    return render(request, 'todo/index.html', context)

models.pyからすべてをインポートし、content変数にPostテーブルの全データを取得して格納します。それを辞書形式でテンプレートに渡しているのです。

次に index.html 側で、以下のコードを追加してデータを表示します。

{% for contents in content %}
{{content.content}}
{% endfor %}

テンプレートタグを使ったforループで、すべての投稿データを取り出して表示しています。サーバーを起動して確認してみましょう。

データが表示されました!念のため、管理画面側でも確認してみます。

ページを再読み込みすると…

ちゃんと反映されていますね!改行タグ(<br>)を追加すれば、さらに読みやすい表示にすることもできます。これで完成です!

最後までお読みいただきありがとうございました。より詳しいDjangoチュートリアルについては、YouTubeチャンネル「Devstack」のチャンネル登録もぜひご検討ください。

初心者向け Jetpack Compose チュートリアル – コンポーザブルと再構成（リコンポジション）の基本を理解しよう

ADB Android インストールガイド:ドライバーとコマンド

Androidスマホから友人のiPhoneを追跡する方法【初心者向け完全ガイド】
スマートフォンを紛失するのは、誰にとっても最悪の事態です。連絡先や大切な写真・動画といったデータだけでなく、銀行アプリやメールなど、生活に欠かせないサービスへのアクセスまで失ってしまう可能性があります。しかし幸いなことに、GPSや位置情報（ジオロケーション）技術の進化により、紛失したスマートフォンを追跡できる時代になりました。Google PlayストアやApp Storeには、AndroidとiPhoneの両方で動作する位置追跡アプリが数多く存在します。これらのアプリの基本的な仕組みはどちらのOSでもほぼ共通しており、違いはユーザーインターフェースの細部程度です。さらに嬉しいポイントは、
AndroidスマホでGoogleアプリがクラッシュし続ける問題の解決方法
Androidスマートフォンで「Googleアプリがクラッシュする」という現象が多発しています。 Android端末で動作する数あるアプリの中に、まさかGoogle純正アプリが含まれる日が来るとは思いもしませんでした。Android OSそのものを開発したのはGoogleでありながら、この不具合は特定メーカーのスマホに限らず、Samsung、Xiaomi、さらにはGoogle自社のPixelまで幅広い機種で報告されています。本記事では、AndroidスマホでGoogleアプリが繰り返しクラッシュする問題の解決方法を詳しく解説します。 Googleアプリがクラッシュする原因とは? 解決策に入る