投稿

3月, 2021の投稿を表示しています

Perl (Mojolicious) を使って web アプリ開発に挑戦 (第3回)

イメージ
 第3章 仕様案を参考に実装 ここでは実際に手を動かしながら具体的な実装方法を説明してゆきます。各項目ごとに完成形のサンプルコード github に存在しますので完成形のコードはそちらを参照ください。 3.1 最低限度の画面を作成 前回までで環境構築と開発用のアプリケーションサーバーの立ち上げまで進みました、今回は bulletin.pl ファイルに実際にコードを書き込みながら画面を作ってゆきます。 順番は「トップ画面」 -> 「一覧画面」 -> 「書き込み入力画面」で作業します。全体のイメージやURLについては「第1章やることを整理しておく」を参照ください。 実際のソースコードはこちらの github からみれます。 https://github.com/Becom-Developer/beginning-mojo/blob/master/chapter3/section1/bulletin.pl 3.1.1 掲示板の紹介画面 実装をするまえに画面のイメージ画像をのせておきますので参考にしてみてください。 掲示板の紹介画面 今回は Mojolicious::Lite で作成なのですが、Lite の場合は__DATA__配下がテンプレートとして読み込まれており、共通テンプレートは layouts/default.html.ep 記載の部分にあたります。下記のように修正してみましょう。 ... @@ layouts/default.html.ep <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title><%= title %></title> </head> <body><%= content %></body> </html> ... 次に「掲

Perl (Mojolicious) を使って web アプリ開発に挑戦 (第2回)

イメージ
 第2章 開発環境を構築 2.1 開発環境のイメージをつかむ 前回はざっくりと開発内容について考えてみました今回は具体的な環境構築の手順をみていきます。 アプリ開発の経験の浅い人にとってはどのような開発環境を用意すれば良いのかの判断は大変難しいと思います。 アプリ開発の途中で作ろうとしているものの仕様が変更になったり、技術的に現在の環境では困難になったり、何が起こるかはわかりませんから、こればかりは場数を多くふんでゆくしかないのかもしれません。 間違いなく言えることがあるとすれば再現がしやすい開発環境を構築するのが良いとお思います。今回は docker の仕組みは拝借することにしました。 下記が開発システム全体のイメージです。 +----------------------------------------+ | bulletin (application) <-- Make here!! | +--------------------------------------------+ | Mojo (Web Framework) | +-----------------------------------------------+ | Perl (Programming language) | +---------------------------------------------------+ | docker (Virtual space) | +-------------------------------------------------------+ | OS (MacOS or Linux) | +-------------------------------------------------------+ 2.2 開発環境ついて参考になる資料 ネットを検索するとさまざまな資料ができてきますが、一

Perl (Mojolicious) を使って web アプリ開発に挑戦 (第1回)

イメージ
 第1章 やることを整理しておく 1.1 web アプリ開発に挑戦 インターネット黎明期とよばれているころ、webアプリケーションの開発にはプログラミング言語 Perl が活用されることが多く CGI と呼ばれる手法でほとんどの web アプリケーションが開発されていました。 最近(2021年現在)では CGI という手法で開発されることは少なくなり、web アプリケーション自体も複雑化し、 web アプリの作り方を説明、指導する方もなにから説明するべきなのか大変難しくなりました。言語の選択肢として Perl 以外の選択肢も沢山用意されており Perl を活用した事例の紹介も少なくなったような気がします。この資料では言語自体の特性より、web アプリを開発する場合の進め方に着眼点を置き解説とサンプルコードを紹介しています。 1.1.2 この記事の対象者 基本的な web アプリケーションの仕組みは理解できている ある程度のプログラミングの素養がある PC の環境が Mac である 1.1.3 目次 第1回目: やることを整理しておく 第2回目: 開発環境を構築 第3回目: 仕様案を参考に実装 第4回目: 完成品に対しての課題をまとめる 第5回目: 完成品に対してテストコードを実装 第6回目: テストコードと機能追加実装を同時にすすめる 第7回目: 保守と拡張性が高い構造体に変更する準備 第8回目: Mojolicious ベースにリファクタリングをする 第9回目: 新しい機能を追加する 1.2 やることを整理しておく ソフトウェアの開発を始める時に「要件定義をする」という言葉がでてきます。この要件定義というものがくせものでどういう要件定義が良いのかという話をはじめるとそれだけで一冊の本ができてしまいます。要件定義のやり方もさまざまで作ろうとしているものから具体的な作り方、必要な端末の種類まで事細かに指示があ

[Docker 初心者向け] Docker を活用して開発環境を整えよう (第10回)

イメージ
第10章: 代表的なコマンド事例 docker を活用する場合 docker ... とコマンドを実行する場合と docker-compose ... と二つのパターンがあります。 docker のよいところは docker 環境が使える状態であれば、 docker-compose up コマンド一発で環境が再現できるというところでしょうから、 docker-compose.yml にしっかりと再現したい環境を作り込んで compose コマンド一発実行というのが理想敵なんだと思います。 そうはいっても compose.yml を作り込む際にいろいろ試したことがあったりするので、この記事で紹介したよく使うであろうコマンドをまとめておきました。 10.1 コマンドリファレンスについて 公式ページにはコマンドリファレンスがありますのでその他のコマンド詳細については公式ページを参考にされるのがよいとおもいます。 https://docs.docker.com/reference/ 10.2 hello-world を題材にしたコマンド例 docker hub 公式イメージ - https://hub.docker.com/_/hello-world (image を取得する) docker image pull hello-world (image から container を新しく作る) docker container run hello-world (image から container を新しく作るときに h-container という名前をつける) docker container run --name h-container hello-world (コンテナを削除) docker container rm hello-container (イメージを削除) docker image rm hello-world 10.3 ubuntu を題材にしたコマンド例

[Docker 初心者向け] Docker を活用して開発環境を整えよう (第9回)

イメージ
第9章: docker-compose の活用例 (Nuxt.js) Vue.js といえば Nuxt.js 。ドキュメントの豊富さなどからいくと、これからフロントエンド開発を始める人は Nuxt.js からはじめるのが間違いはないでしょう。 9.1 作成する docker 環境について Vue.js 同様 Nuxt.js のサイトも日本語訳が充実しているのでまずは公式サイトを参考にすると良いでしょう。 今回の設定で注意するところは docker-compose.yml ファイルで environment での設定です。 PORT: 3000 に加え HOST: 0.0.0.0 を指定しています。なぜ、localhost 127.0.0.1 ではないのか。詳細は説明はここでは省きますが、公式サイトにもそれに該当する資料が存在するのでそちらの資料を参考すると良いと思います。 Nuxt.js 公式 - https://ja.nuxtjs.org/ Nuxt.js 公式 設定について - https://ja.nuxtjs.org/docs/2.x/features/configuration/ 9.2 準備する各ファイルの説明 下記のようなファイル構成を目指してゆきます。 (任意のディレクリを作成 今回は ~/tmp/docker_sample/node_nuxt) % mkdir -p ~/tmp/docker_sample/node_nuxt && cd ~/tmp/docker_sample/node_nuxt % touch Dockerfile docker-compose.yml compose_cmd.bash && \ chmod +x compose_cmd.bash Dockerfile (イメージを作成するためのファイル) FROM node:14.15.4 RUN mkdir -p /usr/src/app WORKDIR /usr/src/app docker-compose.yml (compose コマンドで実行するファイル) version: '3.8&#