モダンDjango入門

Djangoでの環境変数と、Angularを用いたフロントエンドの実装

モダンDjango入門　第4回

2019/02/04 11:00

ポスト

カンバンボードのUI実装

　さっそくカンバンボードのUI実装に取り掛かりましょう。

　Angular MaterialのDragDropModuleを使って、簡単にドラッグ・アンド・ドロップを実現できます。ちなみにこのDragDropModuleは、2018年10月にリリースされたversion 7より提供された新しい機能です。

　Angular Materialを利用するには、以下のようにstatic/src/app/app.module.tsにインポートを追加します。

import { BrowserModule } from '@angular/platform-browser';
import { DragDropModule } from '@angular/cdk/drag-drop'; // 追加
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    DragDropModule // 追加
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

　次にstatic/src/app/app.component.tsを以下のように編集します。カンバンボードに掲載されるチケットデータはDjangoアプリケーションから取得する予定ですが、ここでは仮のデータを文字列の配列で定義しています。

import { Component } from '@angular/core';
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  todo = [
    'キャプチャ画像',
    'レビュー依頼'
  ];
  inprogress = [
    'サンプルコード実装',
    '推敲'
  ];
  done = [
    '原稿執筆'
  ];

  drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      transferArrayItem(event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex);
    }
  }
}

　drop()メソッドで、ユーザーがチケットを移動させた時に発火させるイベントハンドラを実装しています。移動前と移動後のリストが同じかどうかを判定して、リスト内での並び替え（moveItemInArray）かリスト間での転送（transferArrayItem）を実行するようになっています。

　ここで実装したdrop()メソッドを使って、static/src/app/app.component.htmlを以下のように実装しましょう。

<div class="kanban-container">
  <h2>To do</h2>
  <div
    cdkDropList
    #todoList="cdkDropList"
    [cdkDropListData]="todo"
    [cdkDropListConnectedTo]="[inprogressList, doneList]"
    class="kanban-list"
    (cdkDropListDropped)="drop($event)">
    <div class="kanban-box" *ngFor="let item of todo" cdkDrag>{{item}}</div>
  </div>
</div>

<div class="kanban-container">
  <h2>In progress</h2>
  <div
    cdkDropList
    #inprogressList="cdkDropList"
    [cdkDropListData]="inprogress"
    [cdkDropListConnectedTo]="[todoList, doneList]"
    class="kanban-list"
    (cdkDropListDropped)="drop($event)">
    <div class="kanban-box" *ngFor="let item of inprogress" cdkDrag>{{item}}</div>
  </div>
</div>

<div class="kanban-container">
  <h2>Done</h2>
  <div
    cdkDropList
    #doneList="cdkDropList"
    [cdkDropListData]="done"
    [cdkDropListConnectedTo]="[todoList, inprogressList]"
    class="kanban-list"
    (cdkDropListDropped)="drop($event)">
    <div class="kanban-box" *ngFor="let item of done" cdkDrag>{{item}}</div>
  </div>
</div>

　Angularのテンプレートに慣れていないと少し難しいと思うので、ここで行っていることを簡単に説明します。To do、In progress、Doneの3つのリストで行っていることは基本的には同じなので、To doリストの部分を取り上げて見ていきます。

cdkDropList: コンポーネントをドラッグ・アンド・ドロップを受けとめる対象とする
#todoList="cdkDropList": このcdkDropListへの参照をテンプレート変数として定義する
[cdkDropListData]="todo": static/src/app/app.component.tsで定義したtodoデータを紐付ける
[[cdkDropListConnectedTo]="[inprogressList, doneList]": 移動先としてつなぎたいcdkDropListの参照を指定する
(cdkDropListDropped)="drop($event)": static/src/app/app.component.tsで定義したdrop()メソッドをドロップ完了後に発火させるようにする
<div class="kanban-box" *ngFor="let item of todo" cdkDrag>{{item}}</div>: cdkDragをセットすることでドラッグ対象になったtodo各データをリスト表示している

　最後にstatic/src/app/app.component.cssを編集して、スタイルを整えておきましょう。実装したcssファイルは、以下のリンクから確認できます。

https://github.com/massa142/modern-django/blob/volume4/static/src/app/app.component.css

　ここまで実装できたら、http://localhost:4200/に再度アクセスしてみてください。以下のようなカンバンボードが表示されていればOKです。チケットのステータスをドラッグ・アンド・ドロップで移動させて、UIを確認しましょう。

　ただデータの永続化処理を実装していないので、現状だとブラウザをリロードするとチケットの状態は戻ってしまいます。次回の連載では、DjangoアプリケーションとAngularアプリケーションをつなぎこんで、データの取得や保存処理などを紹介します。

　以上、Angularについて紹介しました。インストールからセットアップ、実装まで高速にできることが実感できたかと思います。Angularの設計思想・フルスタックさはDjangoに通じるものがあると筆者は感じています。ぜひみなさんにも試していただきたいと思っています。

　ここまで解説したソースコードは以下から見ることができます。

massa142/modern-django at volume4

Djangoに関するトークが豊富だったPyCon JP 2018

　最後に、2018/9/15～18に開催されたPyCon JP 2018について紹介させてください。PyCon JPは2011年から毎年開催されている日本最大のPythonカンファレンスです。

PyCon JP 2018 概要
項目	内容
会場	大田区産業プラザ PiO
参加人数	1000
トーク数	58

　CodeZineではPyCon JP 2018レポート記事が掲載されているので、ぜひ併せて読んでみてください。

　2018年のPyCon JPは、DjangoやWebについてのトークが多かったのが印象的でした。筆者も参加していたのですが、PythonでのWeb開発・Djangoの盛り上がりを肌で感じる時間となりました。

　以下にDjango関連のトークをリストアップしたので、興味のある内容をチェックしてみてください。特にDjangoとVueで作るカンバンアプリケーションは、本連載と同じくカンバンボードを実装するという内容になっています。これまで紹介してきたアーキテクチャとは異なり、Django Channelsというライブラリを使ってWebSocketでのリアルタイム通信を実装しており、とても興味深いものとなっています。

終わりに

　今回は、環境変数とAngularを使ったフロントエンド開発について解説しました。また、昨年開催されたPyCon JP 2018とそこで発表されたDjango関連のトークを紹介しました。

　次回はフロントエンドとDjangoアプリケーションとのつなぎ込みと、Pythonのサードパーティパッケージ管理方法などをお伝えする予定です。

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

連載通知を行うには会員登録(無料)が必要です。
既に会員の方はを行ってください。

印刷用を表示

ポスト

モダンDjango入門連載記事一覧: Djangoでの環境変数と、Angularを用いたフロントエンドの実装

Djangoのテストの書き方とCircleCIを活用した継続的インテグレーション

Django 2.0リリース！最新のDjangoで作るカンバンボードアプリ～モデルの...

もっと読む

この記事の著者: 新井正貴（アライマサタカ）

　東京大学文学部卒業、アライドアーキテクツ株式会社にて勤務。2016年4月、株式会社SQUEEZEに入社。コミュニティ活動として、PyCon JP 2015〜スタッフ、Pythonもくもく会の主催を行う。趣味はラクロスとPerfume。 Site：http://massa142.github.io/ Twitter：@massa142 Facebook：新井正貴

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

この著者の最近の執筆記事