SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ComponentZine(ActiveReports)byメシウス(AD)

ActiveReportsJSやWijmoがデータを取得できるAPIを、PythonのDjango REST frameworkで作る

メシウスの「ActiveReportsJS」「Wijmo」と「React」「Django REST framework」を組み合わせた活用例 第1回

  • このエントリーをはてなブックマークに追加

Web API実装のポイントはシリアライザー、ビュー、ルーター

 ここまででプロジェクトの環境が整ったので、最初のWeb APIを実装していきます。Django REST frameworkでWeb APIを実装するには、「シリアライザー」「ビュー」「ルーター」の3つを実装します。

Web API戻り値に含めるデータ項目を決めるシリアライザー

 シリアライザーでは、プロジェクトが持っているデータベースから、APIで出力するテーブルとデータ項目を指定します。p001basicappフォルダー配下にserializers.pyファイルを作成して、リスト7の通り実装します。

[リスト7]Web APIのシリアライザー(p001basic/p001basicapp/serializers.py)
#Userテーブルの内容を出力するシリアライザー ...(1)
class UserSerializer(serializers.HyperlinkedModelSerializer):
    class Meta:
        model = User
        fields = ['url', 'username', 'email', 'groups']
#Groupテーブルの内容を出力するシリアライザー ...(2)
class GroupSerializer(serializers.HyperlinkedModelSerializer):
    class Meta:
        model = Group
        fields = ['url', 'name']

 (1)のUserSerializerでは、Userテーブルから「url」「username」「email」「groups」の項目を出力するよう指定します。「url」は、そのデータを返却するAPIのURLです。同様に(2)のGroupSerializerでは、Groupテーブルから「url」と「name」の項目を出力するよう指定します。なお、UserテーブルとGroupテーブルは、Djangoプロジェクトに最初から定義されるテーブルで、リスト6のマイグレーションで生成されます。

Web APIの設定を行うビュー

 ビューでは、Web APIの検索や表示に関する設定を記述します。p001basicapp/views.pyに、リスト8の通り実装します。

[リスト8]Web APIのビュー(p001basic/p001basicapp/views.py)
#User APIのビュー ...(1)
class UserViewSet(viewsets.ModelViewSet):
    queryset = User.objects.all() # ...(1a)
    serializer_class = UserSerializer # ...(1b)
#Group APIのビュー ....(2)
class GroupViewSet(viewsets.ModelViewSet):
    queryset = Group.objects.all()
    serializer_class = GroupSerializer

 (1)がUserのビュー定義です。(1a)のquerysetは検索条件を表し、ここではUser.objects.all()メソッドで全オブジェクトを表示するようにします。(1b)は使用するシリアライザーで、リスト7(1)で定義したUserSerializerを指定します。Groupについても(2)で同様に実装します。

Web APIのURLを設定するルーター

 最後にルーターの設定です。p001basic/urls.pyに、リスト9の通り実装します。

[リスト9]Web APIのルーター(p001basic/p001basic/urls.py)
#ルーターの定義 ...(1)
router = routers.DefaultRouter() #...(1a)
router.register('users', views.UserViewSet) #...(1b)
router.register('groups', views.GroupViewSet) #...(1c)
#URLパターンの設定 ...(2)
urlpatterns = [
    path('', include(router.urls)) #...(2a)
]

 ルーターの定義は(1)です。(1a)でルーターを生成し、(1b)で「users」というパスに対してリスト8(1)のUserViewSet、(1c)で「groups」というパスに対してリスト8(2)のGroupViewSetを割り当てます。(2)はURLパターンの設定で、(2a)で空文字(つまりすべてのURLパターン)に対してルーターのURLを利用するよう設定します。

Web APIを実行していろいろ試してみよう

 それではここまで実装したWeb APIを実行してみましょう。manage.pyを利用してリスト10の通りコマンドを実行します。

[リスト10]Djangoのプロジェクトを実行するコマンド
python manage.py runserver

 実行後、Webブラウザーでhttp://localhost:8000にアクセスすると、図4の通り表示されます。

図4 p001basicプロジェクトを実行した初期画面(p001basic)
図4 p001basicプロジェクトを実行した初期画面(p001basic)

 まずGroupのWeb APIへのリンク「http://localhost:8000/groups/」にアクセスしてみましょう。画面上部にはAPIが返却するグループの一覧(この段階ではまだ空)が、画面下部にはグループを追加するテキストボックスが表示されます。テキストボックスに適当な名前を入力して「POST」をクリックすると、POSTのREST APIが実行されて、グループが追加されます。

図5 Groupを追加する様子(p001basic)
図5 Groupを追加する様子(p001basic)

 同様に、UserのWeb API「http://localhost:8000/users/」にアクセスすると、画面上部にユーザーの一覧、下部にはユーザーを追加するためのフォームが表示されます。グループが追加されている場合、Groupsの欄に表示されて選択できます。

図6 Userを追加する様子(p001basic)
図6 Userを追加する様子(p001basic)

 追加されたUserは、「http://localhost:8000/users/」にアクセスすると一覧表示されます。

図7 Userを一覧表示する様子(p001basic)
図7 Userを一覧表示する様子(p001basic)

 このようにDjango REST frameworkでは、データの表示や追加といったWeb APIの処理を、Webページ上の対話的な操作で確認できます。

次のページ
ActiveReportsJS/Wijmo用のWeb APIを実装しよう

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
ComponentZine(ActiveReports)byメシウス連載記事一覧
この記事の著者

WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

提供:メシウス株式会社

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/18660 2023/11/22 12:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング