SSTエンジニアブログ

SSTのエンジニアによるWebセキュリティの技術を中心としたエンジニアブログです。

新卒研修記~Webアプリの開発~

はじめに

こんにちは。SST研究開発部の小野里です。喉の入り口付近に口内炎ができてしまって辛いです。

さて、私の新卒研修ではここ2ヶ月ほど、社内向けのWebアプリ開発を行っていました。

目的は大きく分けて2つあり、

  • 検証や調査で必要となる基礎スキル(プログラミング、開発環境構築など)を身につける
  • 開発を通じて「自ら課題を発見・定義し、課題を解決するための道筋を描いて、必要なタスクに取り組むプロセス」を実践的に体験する

ことを目指しています。

初めてのWebアプリ開発で慣れないこともたくさんありましたが、どのような流れで製作を行ったかご紹介させていただければと思います。

背景

今回私が作ったのは、社内向けの蔵書管理システムです。

SSTには書籍購入支援制度という制度があり、業務に関係のある本ならSlackで申請するだけでかなり自由に経費購入することができます。出社していた頃は購入した本は会社の本棚にしまっていたのですが、完全在宅勤務となった現在では個々人が購入して経費精算という形になっています。 これはこれで「出社しなくてもいつでも本が読める」という大きな利点はあるのですが、出社時と比較して、自分が購入した以外の本に出合う機会が大幅に減ってしまいました。

また、私の個人的な困りごととして自宅の本が多すぎて管理できず、時々同じ本を複数買ってしまうという問題があり、これの解決のためにも書籍を管理するシステムを作りたいと考えていました。

以上のニーズが合致した為に、社内向け蔵書管理システムを研修課題とすることに決めました。

学習

研修課題は決まりましたが初めてのWebアプリ開発のため、いきなり作りはじめようとしてもどこに手を付ければいいかが分かりません。まずは基礎的な技術の学習から入りました。

今回はPythonとDjangoで開発を進めることになったため、まずは入門書でサンプルアプリを1つ作ってみます。

今回はこちらの『動かして学ぶ! Python Django開発入門』を使いました。ハンズオン形式できちんと動くWebアプリが作れるので、開発の流れを理解するのにとても役立ちました。 2点ほど本を読んでいて詰まった点を補足しておくと、

  • Chapter11-01:リスト11.3 2行目
 - from django.contrib.staticfiles.urls import static
 + from django.conf.urls.static import static
  • Chapter11-13:リスト11.33
 - self.selenium.get('http://localhost:8000' + str(reverse_lazy('account_login')))
 + self.selenium.get(self.live_server_url + str(reverse_lazy("accounts:login")))

上記2点を修正する必要がありました。 SeleniumでLiveServerTestCaseを利用したテストを行う場合、先にrunserverしておくか、ホストのURL指定をself.live_server_urlにしないと正しくテスト用サーバに接続できないため、注意してください。

また、上記の本は開発手順を知る・開発に慣れる上では非常に役立ちましたが、Djangoの仕様についての解説は3章部分のみで、実際に自分の開発に応用するには少し使いづらいため、実際の開発中には以下の本を参照することが多かったです。

こちらの『現場で使えるDjangoの教科書《基礎編》』はDjangoの仕様部分の解説に加え、開発に役立つベストプラクティスの紹介など実践的な内容でとても役立ちました。一方でこちらには「どのような流れで開発を進めればよいのか?」といった情報はほぼ無いため、初めての方はこの本だけ読んでも途方に暮れてしまうと思います。初めてのDjango学習は上記の2冊を併読して進めるのがお勧めです。

ヒアリング

一通りの学習が済んだ後、現状のニーズを確認するために数名の社員にご協力いただきヒアリングを行いました。 思い返すとこの手順が非常に重要で、自分が必要だと考えていた機能と求められている機能には結構違いがあるという事が分かりました。 元々の構想を練っていた段階では求められる要件として

  • 本の「管理」の機能がメイン
  • そのために登録できる項目を充実させる

と考えていたのですが、実際にヒアリングを行ってみると

  • 他の人がどんな本を読んでいるのか知ることで、「本を介したコミュニケーション」を促進したい
  • システムとして入力させる項目は最低限にして、詳細の充実は個々に任せる

というように考えている人が多いことが分かりました。 特にこの「本を介したコミュニケーション」という部分は全く盲点でした。元々は私一人で使う想定だったものを社内向けに拡張して作る形になったので、こういった機能は最初から発想に無かったのです。

ヒアリングをしっかりと行うことで、求められる要件と実装したい機能の認識をすり合わせることができました。

成果物紹介

それでは、完成した社内向け蔵書管理システム「Montag」をご紹介いたします。アプリ名のMontagはレイ・ブラッドベリの小説『華氏451度』の主人公、ガイ・モンターグから名付けました。理由はかっこいい英語の名前が欲しかったからです。

という話を社内向けにしたところ、PRの方から提案があり、アプリのロゴを作って頂きました!とてもカッコいいロゴをデザインしていただき、私のモチベーションもバリバリ上がってます!

f:id:cococig:20211015182412p:plain
Montagロゴ

最高にカッコいいロゴを紹介できたところで、各機能についての紹介です。 メインの機能である書籍の管理情報は以下のような表示になっています。 工夫した点として、ISBNコード(JANコード)が登録されていればそのままAmazonの販売ページに飛べるようにし、気になった本を読むためのハードルを下げています。

f:id:cococig:20210907175311p:plain
書籍詳細画面

また、ヒアリングの結果多数の要望を頂いた「本を介したコミュニケーション」を実現するための第一歩として、本に対してコメントをつけられる機能を実装しました。

f:id:cococig:20210908145856p:plain
コメント機能

今のところ、コメント機能には簡単な投稿・編集・削除の機能があるだけで、まだメンション等の複雑な機能は実装していません。今後そういった機能が必要かも含めて検討していくつもりですが、当面は利用者の自由にコメントをつけてもらう予定です。本の感想を書いてみるもよし、まだ読んでない人が読んだ人に質問してみるもよし、色々な使い方がされるのを期待しています。

書籍の登録機能は最低限必要な情報に絞り、以下のような画面構成にしました。

f:id:cococig:20210908150616p:plain
書籍情報登録画面

ISBN番号を入力して「書籍情報取得」ボタンを押すことで、OpenBDとGoogleBooksのAPIから自動で情報を取得することができます。既に会社にある大量の本を登録する手間を省くため、CSVによる一括登録にも対応しました。

まとめ

「1つのWebアプリを一から実用段階までもっていく」という経験は初めてだったので、Webアプリの構造を実践的に知ることができたと共に、ある程度の自信もつけることが出来ました。 一方で社内でのテスト公開時には、SSTの新人研修では伝統芸となっている(?)洗礼として多数の攻撃脆弱性検査を受け、アプリに脆弱性があることが発覚したのもまた事実です。 これから研修のテーマはセキュリティに関したものに移っていくそうなので、自分がWeb技術についてどこまで知っていて、何が分かっていないのかをしっかりと見定めた上で、今後の研修に臨んで技術を身につけていきたいと思いました。