- 11◆jG/Re6aTC.23/04/23(日) 16:32:12
[概要]
タイトルの通りWebアプリを作ろうと四苦八苦するスレ主の様子を観察し意見やアドバイスまたは茶々をいれてくれると嬉しいスレです
一人でやってるとサボったりエタったりしそうなのでスレ立ててみました - 2二次元好きの匿名さん23/04/23(日) 16:33:20
ほーんよう分からんけどがんば
- 31◆jG/Re6aTC.23/04/23(日) 16:37:17
[概要補足]
- スレ主は一応IT企業に勤めるヒラ社員ですが知識に自信があるかと言われるとイマイチ
- なので「素人質問」大歓迎 スレ主を鍛えてください
- 原則無料のサービス/ライブラリを使おうと思います(使っても最小限を目指し従量課金などは避ける)
- なのでこれから就活に向けて何か作っておきたいなーみたいな学生さんの力にもなれればなお良いなと思ってます
- 法律順守！非営利目的の個人利用です！
- 気が向いたらGithubかGitlabでソース公開します - 4二次元好きの匿名さん23/04/23(日) 16:37:43
面白そうだけど創作カテのほうがいいんじゃね？
- 51◆jG/Re6aTC.23/04/23(日) 16:39:46
- 61◆jG/Re6aTC.23/04/23(日) 16:43:11
## 背景
以下の背景が重なりスレ立てのはこびとなりました
- 俺もスレ立てしてみたい
- 近々引っ越しを考えているので新生活が便利になるツールが欲しい
- IT系の職としてスキルアップしたい - 71◆jG/Re6aTC.23/04/23(日) 16:46:36
## 今ぼんやりと考えている作ってみたいものの
- 冷蔵庫の中身記録アプリ
- できれば中身からChatGpt的なサービスと連携してメニュー提案 - 8二次元好きの匿名さん23/04/23(日) 16:47:13
文芸的プログラミングみたいなのもあるし創作カテではダメということもないのでは
- 9二次元好きの匿名さん23/04/23(日) 16:49:16
カテ的には創作だと思うが創作は人間が少ないからな…
このカテでもいいと思う - 10二次元好きの匿名さん23/04/23(日) 16:50:37
どんな言語を使ってどういう意図で組むの？
- 111◆jG/Re6aTC.23/04/23(日) 16:56:43
## 活動開始
### WarmUp
基本的にシステム開発は以下の流れで進めるのが一般的です
(引用：https://cmc-japan.co.jp/blog/project-management-tool-software-development-life-cycle/)
1. 要件定義 (何を求めているのかを明らかにしよう)
2. 基本設計（↑を満た大まかな構成を決めよう)
3. 詳細設計（↑を満たす細かい構成を決めよう）
4. 開発（↑で決めたものを作ろう）
5. テスト (↑で作ったものがちゃんと動くか確認しよう)
6. リリース (↑でテストしたものを公開しよう)
7. 運用・保守 (↑で公開したものがちゃんと動き続けるようメンテしよう)
これを1サイクルだけ時間をかけてやるのが古くからある開発方式ですね
最近では1サイクルを短いスパンでくり返す所謂「アジャイル」がメジャーになりつつあるのでしょうか
正直自分もさっさと動くもの作ってモチベを上げたいので(なんちゃって)アジャイル式でやりたい
- 121◆jG/Re6aTC.23/04/23(日) 16:58:19
- 13二次元好きの匿名さん23/04/23(日) 17:01:11
- 141◆jG/Re6aTC.23/04/23(日) 17:02:16
### 要件定義_001
という訳でさっそく要件定義やりまーす
このフェーズでは「クライアントが求めていること」を明らかにします
言葉通りに受け取らずその裏にある隠れ真のニーズを引き出すのが優れたSEらしいです
とりあえず実現可能性を考えず「やりたいこと」を列挙してみます - 15二次元好きの匿名さん23/04/23(日) 17:05:35
今だとFlask + Reactになるんかな
作ろうとしてるのはそこまで大げさなものでもなさそうだけど - 16二次元好きの匿名さん23/04/23(日) 17:06:56
最終的に写真を撮ったら撮った物体の名称を自動登録してそれをリスト化するとかもありかもね
- 171◆jG/Re6aTC.23/04/23(日) 17:11:21
とりあえずこんなところかな？
- 冷蔵庫の中身を記録したい
- 商品を買うときに過去の値段と比較したい
- データの登録時にバーコードスキャンで入力を簡素化したい
- データ登録時に写真スキャンで物体検知して入力を簡素化したい(できれば)
- 冷蔵庫の中身から料理メニューを提案してほしい(出来れば)
- 外出先からも使いたい
- 無料で作りたい
- スマホ/PC問わず使えるようにしたい
- 賞味期限切れそうなときは通知してほしい - 18二次元好きの匿名さん23/04/23(日) 17:14:22
大分エグいことになってる…
- 191◆jG/Re6aTC.23/04/23(日) 17:16:32
パッと見実現可能性が低いのはなさそうです(できそうだからスレ立てしたというのもありますが)
- 201◆jG/Re6aTC.23/04/23(日) 17:17:54
というか冷蔵庫の中身からレシピ提案って前例ありか！
ChatGPT（チャットGPT）のGPT-4に冷蔵庫の中身の写真を撮って聞くとレシピを考えてくれる機能が凄すぎると話題に | カタチップ今回はChatGPT（チャットGPT）のGPT-4に冷蔵庫の中身の写真を撮って聞くとレシピを考えてくれる機能が凄すぎると話題になっていることについての記事になります。kata-tip.comこの例では冷蔵庫の中身の写真からレシピを提案してますね
とりあえず一安心
- 21二次元好きの匿名さん23/04/23(日) 17:17:59
- 冷蔵庫の中身から料理メニューを提案してほしい(出来れば)
- スマホ/PC問わず使えるようにしたい
この２つは現存アプリになかった気がするからそれ以外は作ろうと思えば作れるんだろうけど料理メニューの提案は自動鍋の分野な気がする… - 22二次元好きの匿名さん23/04/23(日) 17:18:26
- 231◆jG/Re6aTC.23/04/23(日) 17:20:19
- 24二次元好きの匿名さん23/04/23(日) 17:22:15
- 251◆jG/Re6aTC.23/04/23(日) 17:23:14
正直レシピは全てAIか外部APIに任せる気満々です
- 26二次元好きの匿名さん23/04/23(日) 17:23:50
自動更新視野に入れると機械学習も入ってくるかなぁ
- 271◆jG/Re6aTC.23/04/23(日) 17:26:03
アジャイル敵に進めるのであれば一度に全て実現するのではなく「とりあえずスモールスタートからはじめる」ことが大事だと思うので
- 冷蔵庫の中身を画面から確認する
部分を今回のフェーズの要件として進めたいと思います - 281◆jG/Re6aTC.23/04/23(日) 17:31:30
### 外部設計_001
という訳で外設いきまーす
イメージ沸きやすいように画面のモック(見た目だけのそれっぽい試作品)から考えていきます
使用するツールはみんな大好きVSCode + draw.io拡張です
どっちも無料！ - 29二次元好きの匿名さん23/04/23(日) 17:31:38
でもGPT4でも画像読み込み機能はまだ使えないんだろ？
- 301◆jG/Re6aTC.23/04/23(日) 17:35:00
- 311◆jG/Re6aTC.23/04/23(日) 17:42:12
とりあえず雑にこんな感じでいいのか...?
- 321◆jG/Re6aTC.23/04/23(日) 17:56:53
でもってこう、選択した時に詳細が出せるような感じに...?
- 33二次元好きの匿名さん23/04/23(日) 18:00:17
JANコードって規格化されてるんだっけ？どこまでデータ取れるか次第だけど自動化できないと入手元とか絶対冷蔵庫入れるたびに入力するのだるくなってやらなくなりそう
- 341◆jG/Re6aTC.23/04/23(日) 18:09:04
- 351◆jG/Re6aTC.23/04/23(日) 18:15:07
いったん休憩
一応再開予定 - 361◆jG/Re6aTC.23/04/23(日) 19:16:12
再開
うーん
とりあえず動かしてみないと他に欲しい機能との兼ね合いとかもわからんな
悩む時間がもったいないのでとりあえずこれを外設としよう - 37二次元好きの匿名さん23/04/23(日) 19:18:32
俺も転職に向けてHTML＋Javascript＋Ruby勉強やり始めたんだ
頑張ろうな - 381◆jG/Re6aTC.23/04/23(日) 19:20:09
### 内部設計_001
このフェーズでは外部設計で構想したものを実現するための構成を考えていきます
どんなものが必要でどんな製品を使うか、それらをどんな風に接続するのか...などですね - 391◆jG/Re6aTC.23/04/23(日) 19:21:00
- 401◆jG/Re6aTC.23/04/23(日) 19:36:10
とりあえず簡単にこんな感じかなあ
ngrokを使って自宅サーバを公開する方法もあるけれど無料といった手前サーバマシンを調達するのも避けたいからインターネット上で完結させたい
あとフロントエンドとバックエンドを分離してWebAPI経由で連携するようにしたいな
一応DB書いてるけどこのフェーズではベタ書きで動くまででも良いかもしれないな... - 411◆jG/Re6aTC.23/04/23(日) 19:38:54
となるとWeb(WebAPI)サービスをどこに構築するかを決めるのが次の課題
無料で使えるWebサービスやWebAPIサービスはいくつかあるが...
いずれもリソース(メモリやCPU)が厳しかったりレスポンスに難があったりして選択肢は少ないですね - 42二次元好きの匿名さん23/04/23(日) 19:49:45
面接で見せるポートフォリオってどんなの作ればいいんだろうな 未だに悩んで何も手付けれてないわ
まず作るものが明確な時点ですげぇと思うわ - 431◆jG/Re6aTC.23/04/23(日) 19:58:07
候補としては現状だと以下の2つ
他に良いの知ってたら教えて
- Oracle Cloud インスタンス
- メモリ6GB, ストレージ50GB のLinuxサーバが環境が恒久的に使える
- おお、これいいじゃん！と思ったら無料枠は椅子取りゲームらしく今は満席の模様...残念
- IBM Cloud
- メモリ4GB ストレージ無制限? のkubernetes(k8s)サービスが使える
- 恒久的ではなく30日経つと削除されてしまう模様
- 30日ごとにリソース建て直せば許容範囲か
- OracleCloudが空くまでの間に合わせとしては十分そう
- k8sの勉強にもなる
とりあえずIBM Cloudで行ってみよう - 441◆jG/Re6aTC.23/04/23(日) 20:00:02
- 45二次元好きの匿名さん23/04/23(日) 20:01:38
- 461◆jG/Re6aTC.23/04/23(日) 20:03:55
- 47二次元好きの匿名さん23/04/23(日) 20:04:01
- 48二次元好きの匿名さん23/04/23(日) 20:05:29
- 49二次元好きの匿名さん23/04/23(日) 20:06:09
なんか前に素人があにまん通知サイト作ってなかった？
HTMLとJavaScriptで
特にフレームワークもない、強いて言えばJQueryレベルのやつ - 501◆jG/Re6aTC.23/04/23(日) 20:16:44
不正に使われることが多いからやめます、って話みたいですね
今は代替としてRenderが有名みたいですね
これでもいいのかな...
Herokuが無料で使えなくなるのでRenderへ移行する（Renderのデプロイ） - QiitaはじめにHerokuユーザには衝撃的だった「Heroku無料やめるってさ！（heroku next chapter）」事変。。
僕も個人で作ったWebアプリはHerokuで稼働させてもらっていたので、かなりの衝撃でした。
ただ、無...qiita.com - 51二次元好きの匿名さん23/04/23(日) 20:25:54
素人質問(ガチ)ですまんけど
普通のアプリとWebアプリって何が違うん？ - 52二次元好きの匿名さん23/04/23(日) 20:36:01
サーバーソフトならApacheやnginx、DBならMySQLやPosgreとか環境構築で使うソフトにも色々あるけど
あれってどういう基準で選定すればええんやろか……（業界新人）
言語もそうだけど何が採用基準になるのかよくわからんぞい - 531◆jG/Re6aTC.23/04/23(日) 20:36:56
- 54二次元好きの匿名さん23/04/23(日) 20:39:18
- 55二次元好きの匿名さん23/04/23(日) 20:40:16
- 561◆jG/Re6aTC.23/04/23(日) 20:57:33
フロントエンドだけDMZに置くのがほとんどだと思うよ
- 571◆jG/Re6aTC.23/04/23(日) 20:58:11
- 58二次元好きの匿名さん23/04/23(日) 21:01:22
多分、それ、別の人
- 591◆jG/Re6aTC.23/04/23(日) 21:17:31
企業によるところが大きいですね
- 包括契約をしている製品群から選ぶ
- 企業用準で決まっている自社FWを使う
- 要求スペックを満たすものの中から選ぶ
- かかるコストの大きさで決める
- インターネット上にナレッジが沢山あるものにする
などなど、ケースバイケースですね
個人的には一番下は超重要ですね
企業独自のFWなんかはググってもロクな情報見つかりませんからね...
- 601◆jG/Re6aTC.23/04/23(日) 21:51:28
うーん
他のPaaSも魅力的ではあるけれどDBと接続する以上メモリの上限がやや気になるところ
ここはとりあえずIBM Cloud k8sを使うことにしよう
となるとこんな感じか - 611◆jG/Re6aTC.23/04/23(日) 22:51:11
おや？調べてみると「okteto」なるものの存在が
- 621◆jG/Re6aTC.23/04/23(日) 22:56:21
マジか1Pod3Giが10Podまで無料で使えるのか
- 631◆jG/Re6aTC.23/04/23(日) 23:00:28
ただフリープランだと24時間以内に新規/再デプロイされないと削除されるのか
...
これ、1つ常駐Pod作ってそいつに日時処理で再デプロイさせればいいのでは？ - 64二次元好きの匿名さん23/04/23(日) 23:07:55
このレスは削除されています
- 651◆jG/Re6aTC.23/04/23(日) 23:10:36
よし、使ったことないし面白そうだからk8s基盤はoketoを使ってみよう
よくわからない人向けに説明すると
コンテナ ... サーバを簡単に構築するための仕組み とりあえずサーバと読み替えても良い
kubernetes(k8s) ... コンテナを管理するための基盤 普通はクラウド上で使おうとすると有料
Okteto ... k8sを無料で使わせてくれる(らしい)サービス 24時間以内に操作がないと消える
という感じ - 661◆jG/Re6aTC.23/04/23(日) 23:26:37
とすると次はDB
SQL型にするかNoSQL型にするかだが...とりあえず慣れているSQL型で
Oktetoを使うなら5Giまでは無料で使えるっぽいけど他のPodとの兼ね合いや維持に失敗してデータが消えることは避けたい
となると別サービスだが...
お、Oracle CloudのDBは無料枠で20B使えるっぽい
これは7日間非アクティブだと停止、30日間非アクティブで削除らしい
Oktetoの日時処理と一緒に適当なSQL実行すれば回避出来そうだな...
インスタンスと同じで満席で作れないかも...と思ったがこちらはすんなり
よし これで行こう - 671◆jG/Re6aTC.23/04/23(日) 23:44:28
とりあえず現状こんな感じでいいはず...?
このトライアルではこの構成で行きましょう
何かまずかったら次のトライアルで解決すればいいのだ
停滞で得られるものよりとりあえず前進して得られるものを重視するのがアジャイル！(のはず) - 681◆jG/Re6aTC.23/04/23(日) 23:58:39
あとはWebとWebAPIのアーキテクチャだが...
これは実は目星を付けてある
Webix + FastAPIで行こうと思ってます - 691◆jG/Re6aTC.23/04/24(月) 00:08:02
Webixはクロスブラウザの（主要ウェブブラウザで動作する）JavaScript による UI ウィジェット（UI パーツ）のライブラリです
何故数あるWebフレームワークからこれを選んだかと言うと、過去の経験上これが一番WebAPとの連携が簡単だったからです
Javascriptでajaxなどを触ったことがある方はJavascriptとWebAPI連携がいかに面倒か共感して頂けるかと思います(げんなり)
Webixはモノにもよりますがリクエスト先のURLを行書くだけでその結果をテーブルに良い感じに出力してくれるとか簡単にできます
OSS版とPro版がありOSS版はGPLv3のもとで使用することができます
- 701◆jG/Re6aTC.23/04/24(月) 00:13:44
FastAPIはPythonで動作する高速かつ軽量のWebフレームワークです
2021年ベストOSSフレームワークの1つとしてノミネートされたらしいです
Pythonで簡単に書けて軽量かつ安定しているのが決め手です
(無料で使えるリソースに限りがある以上なるべく軽量に越したことはない)
WebサーバとしてもWebAPIサーバとしても利用できるので、上で紹介したWebixもこのFastAPIの上で動作させようと思います
OSSでありMIT licenseのもとで使用できます
FastAPIFastAPI framework, high performance, easy to learn, fast to code, ready for productionfastapi.tiangolo.com - 711◆jG/Re6aTC.23/04/24(月) 00:15:01
とりあえずキリがいいので今日はここまで
何か質問とかあれば保守がてら出来るだけ回答したいと思います - 72二次元好きの匿名さん23/04/24(月) 00:16:08
ドメイン取得はどうするの？
- 731◆jG/Re6aTC.23/04/24(月) 00:20:50
なんとOktetoはデフォルトで
*-<okteto-namespace>.<okteto-subdomain>
のルールでドメインを登録してくれるらしい(未検証)
Custom Domain Names for your Applications | Okteto DocumentationUse a custom domain name for your applicationswww.okteto.com何ならSSL対応もオプション1つでOKなんだとか(未検証)
Automatic SSL Endpoints | Okteto DocumentationAutomatically create an SSL endpoint for your deploymentswww.okteto.com - 741◆jG/Re6aTC.23/04/24(月) 09:11:31
ちゃんと投稿できるのが仕事終わりになりそうなので保守
今日中に画面写すとこくらいまで行きたいなぁ - 751◆jG/Re6aTC.23/04/24(月) 12:31:01
休憩中
超初歩的だと思う質問でも今回使ってる技術とは関係ない質問でも遠慮なく
皆もGWの暇な時にどう？ - 76二次元好きの匿名さん23/04/24(月) 12:32:52
早すぎる話だけどデザインどうする？
既存サイト（クックパッドとか）との差別化とかいる？ - 771◆jG/Re6aTC.23/04/24(月) 12:48:48
現時点では何も考えてないに等しい
そもそも完全に個人用アプリ、かつレシピがメインじゃなくて冷蔵庫の中身管理が目的だからね
差別化はあまり考えてないけどそもそも便利そうなサービスがあるならそっち使ったほうが速い気もする（勉強の側面を度外視するなら）
- 78二次元好きの匿名さん23/04/24(月) 13:13:54
素人質問で恐縮なのですが、最小構成と言いつつDBまで用意するのは不要ではないでしょうか？
要件定義と個人利用のweb APIとのことを換算するとTSV等のデータファイルとしてサーバーサイドで保持するだけで事足りるかと思いました
またDBに関しては過去の記録保持など拡張の方向性を別途定義した後に、データファイルから送信する形のapiを実装する方が依存性が下がって良いのでは？ - 791◆jG/Re6aTC.23/04/24(月) 13:20:26
- 80二次元好きの匿名さん23/04/24(月) 13:47:39
それなら無料サービス2つ使って相互生存確認APIでも作ったら？
VIPの死活監視のノリで定期的に適当なポートにアクセスしてログだけ出すようなやつ
片方止まったらメール飛ばすような仕組みにしておけばいいし - 811◆jG/Re6aTC.23/04/24(月) 13:53:48
- 82二次元好きの匿名さん23/04/24(月) 15:20:30
- 83二次元好きの匿名さん23/04/24(月) 15:51:00
ククク…俺はprototype.jsとjQueryでWeb知識が止まってる人間…
最近のマイクロサービスだのコンテナ化だのについていけないよう - 841◆jG/Re6aTC.23/04/24(月) 16:06:18
DBもコンテナで持ちたいのは山々なんですが前述の通り維持をミスってコンテナごと消滅する危険性があるので
確実に維持できれば良いですがはじめて使うサービスというのもあり予期しない事態でデータが飛ぶのは避けたいのでフェイルセーフ的に考えて出来れば分離しておきたいのが私の考えです
タスクの切り分けができてないのはまあその通りでしょうね
自覚はあります
ふんわりした感じで突き進んでどこまで行けるか体感するのも良い経験になるかなと思ってるのでとりあえずはこのままで
アドバイスありがとう！
- 851◆jG/Re6aTC.23/04/24(月) 16:08:28
- 861◆jG/Re6aTC.23/04/24(月) 16:12:50
環境維持がなー
ドキュメント見た感じただsshで接続しただけとかコマンド叩くだけじゃダメで再applyが必要になるっぽいんだよなー
バッチ走らせようにもそいつが維持できないから
1. メインpod
2. ↑を維持するためのバッチpod
3. ↑を維持するためのバッチpod
を作ってさらに2と3を相互に維持し合えば行けるのかな… - 871◆jG/Re6aTC.23/04/24(月) 18:25:52
仕事終わったので再開ー
- 881◆jG/Re6aTC.23/04/24(月) 18:30:12
### 開発_001
ここからは実際に動く画面を作っていく
まずはローカルで動くものを作ってそのあとOkutetoを使ってインターネット上に公開する流れを想定
そのためにまずはローカルでDocker起動して...と思ったが久しぶりに起動したのでアプデが溜まってたから終わるまで待機 - 891◆jG/Re6aTC.23/04/24(月) 18:42:57
大まかな概要としてこんな感じか
WebサービスはFastAPI使おうと思ってたけどPod分離できるだけのリソースがありそうだったのでnginx(あるいはその派生)を使う方針に変更 - 901◆jG/Re6aTC.23/04/24(月) 18:57:43
Webサービスはとりあえずnginxの派生「Openresty」を使う
nginxは言わずと知れたWebサービスのデファクトスタンダードだけどOpenrestyはそれに加えて内部処理にLuaスクリプトを噛ませることができたりする
現状では不要な機能だけどLuaで何かしたくなった時のために備えて使っておく
Openrestyのコンテナイメージは公式が出しているやつとBitnami社がリパッケージしているものがある
Bitnami社製の方がパッチが当たるスパンが短いためこちらを使う
Dockerhub.docker.com - 911◆jG/Re6aTC.23/04/24(月) 19:07:31
とりあえずちゃちゃっとdocker-compose.yamlを書いて起動する
docker-compose.yamlはコンテナの構成を記述するファイル
コンテナ自体はファイルを作らなくてもコマンドで起動できるけど繰り返し上げたり落としたりする時にはこれを活用したほうが便利
docker-compose自体はDocker Desktopを使ってない場合入ってないのでその場合別途インストールしよう - 92二次元好きの匿名さん23/04/24(月) 19:12:55
プログラム書く前にタスクの見える化しないのは悪い癖だから直した方がいい
DNS嚙まさないでip接続するにしても運用前にあれやってないこれやってないと慌てることになるぞ
見える化されてればアジャイルに有志がアサインすることも可能だし - 931◆jG/Re6aTC.23/04/24(月) 19:14:04
- 941◆jG/Re6aTC.23/04/24(月) 19:15:38
いざコンテナ起動...しようとしたら怒られた
そうかdocker-composeはMiは使えなかったな... - 951◆jG/Re6aTC.23/04/24(月) 19:22:07
500mに直して再度 docker-compose up -d を実行
docker-compose up で「docker-compose.yamlを参照してコンテナを起動するよ」
-d で「デーモン(バックグラウンド)で起動するよ」といった意味合いがある
無事イメージのPull(ダウンロード)が始まる
しばらく待つと終わりコンテナが起動した - 961◆jG/Re6aTC.23/04/24(月) 19:29:09
早速確認...といきたいところだが腹が減ってきたのでいったん夕食
- 97二次元好きの匿名さん23/04/24(月) 19:59:24
俺ならサービス選定は諦めてAWSに魂を売るところだな
サービス選定できて偉い！ - 981◆jG/Re6aTC.23/04/24(月) 20:42:48
飯食ってきたので再開
さっそくWebサービスが起動しているかを確認している
一般的にアプリケーションはネットワークを使う際に「ポート」という数字を指定する
ポートはそのアプリ専用の出入り口IDのようなもの
他が使うことが決まっているから使えない番号もあるし(重複覚悟で)自由に使っていい範囲もある
有名どころだとhttpは80、httpsは443
有名過ぎて省略されている(本当はURLドメインの末尾に:80 とか:443が付いている)
Openrestyはデフォルトで8080を使っているのでそれを使う
yaml側でコンテナ側の8080ポートとホスト(Windows)側の8080ポートをくっつけてるからlocalhost:8080でアクセスできる
(もし80番ポートとかを使いたかったら80:8080に変えよう)
- 991◆jG/Re6aTC.23/04/24(月) 20:43:20
- 1001◆jG/Re6aTC.23/04/24(月) 20:44:44
ヨシ！
無事Openrestyのウェルカムページが表示されました - 1011◆jG/Re6aTC.23/04/24(月) 20:50:53
つまり今こんな感じのことができたことになる
- 1021◆jG/Re6aTC.23/04/24(月) 20:54:14
あとはOpenrestyの上にWebix(UIフレームワーク)で作ったコンテンツを載せれば晴れて画面が出せるはず
とりあえず確認ができたのでOpenrestyは一回down(削除)する
docker-compose downで削除 - 1031◆jG/Re6aTC.23/04/24(月) 20:55:11
古戦場走りながらだと微妙に集中できんな...
- 1041◆jG/Re6aTC.23/04/24(月) 20:58:25
さあWebixにｲｸｿﾞｰ
なんとWebixはWeb UI デザイナーが用意されている
画面上でドラッグ＆ドロップするだけでデザインコードを吐いてくれるのだ
利用しない手はないな！
Webix UI Designer for UI prototypingWebix UI Designer is an efficient tool for UI prototyping. This product was created by the team of highly professional and experienced web developers.designer.webix.com - 105二次元好きの匿名さん23/04/24(月) 21:00:03
個人制作でOracle Cloudというチョイスが出てくるのなかなか渋い…（主観）
応援してます。 - 1061◆jG/Re6aTC.23/04/24(月) 21:04:30
- 1071◆jG/Re6aTC.23/04/24(月) 21:04:59
- メニューがあって
- タブがあって(今回は1タブのみ想定)
- テーブルがあって
- 詳細が見られる
こんな感じかな？ - 1081◆jG/Re6aTC.23/04/24(月) 21:07:12
Codeボタンを押すと現在のデザインコードを確認できる
- 1091◆jG/Re6aTC.23/04/24(月) 21:10:08
出来たと思ったらメニューのDownloadからAS HTMLでzipにまとめてDLできる
- 1101◆jG/Re6aTC.23/04/24(月) 21:18:09
ちなみにコード化されてもタブがネストされてなかったりするのでゆくゆくは調整が必要
あくまでデザイナーと割り切ろう - 1111◆jG/Re6aTC.23/04/24(月) 21:22:00
zipを解凍すると一式が入っているのでとりあえずこれをそのままOpenrestyに載せる
Openrestyの公式ドキュメントによるとコンテンツのルートディレクトリがコンテナの/appらしい
なのでyamlでwebix一式をそこにマウントさせる(ついでにわかりやすいようにディレクトリ名をappにリネーム)
volumes:
- ./app:/app
のように書くことでWindows側のファイルをコンテナ側と連携できる
(コピーではなく連携なことに注意。片方で消すともう片方でも消える) - 1121◆jG/Re6aTC.23/04/24(月) 21:24:51
あとはもう一度コンテナを起動して...
(docker-composeと入力するのが面倒なのでエイリアスを貼ってdcと省略できるようにした) - 1131◆jG/Re6aTC.23/04/24(月) 21:26:03
localhost:8080にアクセスすれば...あれ？
- 1141◆jG/Re6aTC.23/04/24(月) 21:29:27
こんな時は慌てずF12キーを押して開発者ツールのコンソールを確認
エラーの内容は...design.jsでnullを読み込もうとしてエラーになってるのか？
とりあえずdesign.jsを見てみよう - 1151◆jG/Re6aTC.23/04/24(月) 21:31:38
ここを実行しようとしてエラーになってるのかな？
- 1161◆jG/Re6aTC.23/04/24(月) 21:35:11
調べてみるとこの
webix.CustomScroll.init();
はPro版限定でOSS版では使えない模様
仕方がないのでコメントアウト - 1171◆jG/Re6aTC.23/04/24(月) 21:36:48
画面をF5でリロードすると...
ヨシ！
ちゃんと表示されました - 1181◆jG/Re6aTC.23/04/24(月) 21:42:47
このくらいまで行けたことになりますね
ワァオー *保存* - 1191◆jG/Re6aTC.23/04/24(月) 23:01:15
あとは画面を外設に近づけていきましょう
datasource.jsを編集します
ここは基本的に画面の固定値(メニューの中身やテーブルのヘッダーなど)を定義するところです
ここにテーブルヘッダーとデモデータを記述します
まずはいったんdatasource.jsを末尾の「webix.proxy.demo ... 」のあたりだけ残して全部消します - 1201◆jG/Re6aTC.23/04/24(月) 23:14:12
テーブルヘッダー用変数をjsonの配列で定義
idはapiと連携するときの変数名(こういうのいつも命名に悩む)
headerは実際に表示されるヘッダー名
sortはソートするときの基準 - 1211◆jG/Re6aTC.23/04/24(月) 23:28:48
design.jsの「view": "datatable",」が含まれるjson要素のcolumnsのvalueを先ほど定義したものに置き換える
また先ほどデモデータを一度消したのでこちら側で使用していた2個所(url": "demo->"の行)はコメントアウトしておく
(ついでに見やすいようにすこし整形)
- 1221◆jG/Re6aTC.23/04/24(月) 23:29:12
するとテーブルヘッダーに反映される
- 1231◆jG/Re6aTC.23/04/24(月) 23:30:46
テーブルの幅がズレたが賞味期限の定義に"fillspace": true を設定すると良い感じにしてくれる
- 124二次元好きの匿名さん23/04/24(月) 23:34:53
ここまでの流れを読んでいてふとおもったけども、工数管理表を作ってみたらどうか？
- 125二次元好きの匿名さん23/04/24(月) 23:36:10
基本的にデータ解析ばっかりやってるデータ屋だから、こういう開発を見るのは興味深い
- 1261◆jG/Re6aTC.23/04/24(月) 23:37:49
- 127二次元好きの匿名さん23/04/24(月) 23:40:26
- 1281◆jG/Re6aTC.23/04/24(月) 23:43:20
- 129二次元好きの匿名さん23/04/24(月) 23:46:34
- 1301◆jG/Re6aTC.23/04/24(月) 23:51:11
- 131二次元好きの匿名さん23/04/24(月) 23:53:48
ガチガチに対策しても失敗するときは失敗するし、やれることを全て注ぎ込んで失敗しないと言い訳が生じるから、やるなら全力でやって失敗した方がお得よ。
しかも、失敗してもノーダメージかつノウハウを溜めた痕跡があれば尚更良い。
- 1321◆jG/Re6aTC.23/04/24(月) 23:56:18
次は下の詳細部分を外部設計に近づけよう
さっきと同じように今度は詳細の要素を定義していく
ここでの注意点として、先ほど定義したtable_headerと同じ要素はidを同じにしておく必要がある
ここのidで値を連携するからですね - 1331◆jG/Re6aTC.23/04/25(火) 00:00:35
valueがnullなのはここは上で選択したアイテムの詳細が出てほしいので最初から値を表示する必要がないからですね
そしてdesign.jsでまた同じように対応するvalueに指定します
(+読みやすいように整形) - 1341◆jG/Re6aTC.23/04/25(火) 00:03:28
後はブラウザをリロードして ...
ヨシ！
ちゃんと反映されました
(名称フィールド入れ忘れていたの追加しました) - 1351◆jG/Re6aTC.23/04/25(火) 00:05:51
キリがいいので本日はここまで
次はデモデータの表示と、上のテーブルと下の詳細の連携部分をやりたいですねー
また、色々とアドバイスありがとうございます！
とっても参考になってます
でももっと簡単な質問でもいいのよ？
「コンテナって何？」みたいなレベルでも全然OK
GWにWebアプリ作ってお友達に自慢しよう！ - 1361◆jG/Re6aTC.23/04/25(火) 00:09:16
クラウド上で恒久的に20GBタダで使えるDBの利用方法とかタダで各Pod3GiB幾つも作れるk8s環境とか絶対知ってるとお得だと思うんだよなあ
- 137二次元好きの匿名さん23/04/25(火) 09:11:26
const警察だ！おとなしく手を上げろ！(保守)
- 1381◆jG/Re6aTC.23/04/25(火) 09:47:07
js書くの久しぶりだったから許して…
皆はちゃんと固定値はちゃんとconstで書こうね！ - 139二次元好きの匿名さん23/04/25(火) 13:08:09
- 1401◆jG/Re6aTC.23/04/25(火) 16:33:46
htmlの入門書は読んだことないな…
ひたすらやりたい表現に対してググっていくスタイルです
個人的にこのご時世技術の流行り廃れが早すぎて本じゃ内容古くてあまり参考にならんケース多かったからネットで調べる派
コピペもできんしな
- 141二次元好きの匿名さん23/04/25(火) 16:48:00
なんならHTMLって教えるの一番難しそうな技術まで行ってない…？
誠実な回答って多分Living Standard見ろになるし
読んだことないけどHTMLとかCSSの初心者向けの本って仕様すら読んだことない人が書いてそう(偏見) - 142二次元好きの匿名さん23/04/25(火) 17:50:00
- 1431◆jG/Re6aTC.23/04/25(火) 18:31:15
人がガリガリ書くことが少なくなったから「書き方」というより「作り方(任せ方？)」の方向性になりつつある気がしますね
- 1441◆jG/Re6aTC.23/04/25(火) 18:31:30
仕事終わったので再開スッゾコラー
- 1451◆jG/Re6aTC.23/04/25(火) 18:35:57
現状のおさらい！
こんな感じに画面作ったのでテーブルにデータを出したい！
- 1461◆jG/Re6aTC.23/04/25(火) 18:40:03
なので次はデモデータを作る
datasources.js にこんな感じで追記
(ついでにvarをconstになおす)
demodata001 のところは何でもいいけどjsonのkey値はtableやpropertyのidに対するvalueに紐づけること
(名称ならitem_name ... というように)
こいつを下のproxyオブジェクトから参照する...らしい - 147二次元好きの匿名さん23/04/25(火) 18:47:17
ダミー食わせないとエラーが分からないからかな
- 1481◆jG/Re6aTC.23/04/25(火) 18:52:19
それもあるけど動いているものが見たいじゃん！
- 1491◆jG/Re6aTC.23/04/25(火) 18:53:31
次にdesign.jsを編集
概要テーブル部品のコメントアウトしていたurlを解除しこんな感じでさっき作ったデモデータを参照させる
ゆくゆくはここはWebAPIのURLになる - 1501◆jG/Re6aTC.23/04/25(火) 18:55:13
ここまで書けたらブラウザをリロード!
ヨシ！
(上手く反映されないときはShift押しながらリロードでキャッシュ更新すると改善されるかも) - 1511◆jG/Re6aTC.23/04/25(火) 18:57:10
デモデータをこんな感じで増やすと
- 1521◆jG/Re6aTC.23/04/25(火) 18:57:46
画面でもちゃんと更新される
- 1531◆jG/Re6aTC.23/04/25(火) 18:59:55
次はアイテムがクリックされると下画面に反映させる処理を作る
- 1541◆jG/Re6aTC.23/04/25(火) 19:02:35
Webixはコンポーネント(部品)ごとに色々な機能やイベントが用意されているがここではdatatableのonItemClickイベントを使う
文字通りテーブルのアイテムがクリックされたときに発火するイベント
ui.datatable, API Reference Webix DocsWebix Documentation: API Reference. This page contains ui.datatable documentation to help in learning the library.docs.webix.com - 1551◆jG/Re6aTC.23/04/25(火) 19:10:15
こんな感じでイベントを使うよう定義
idにはクリックしたアイテムの(テーブルデータ上の)IDが入ってくる - 1561◆jG/Re6aTC.23/04/25(火) 19:14:33
あとは2行追記するだけ
1行目でIDからアイテムのデータオブジェクトを取得して2行目でそれを下画面の部品にセットする
$$("部品id") で部品のオブジェクトにアクセスできる
めっちゃ簡単 - 1571◆jG/Re6aTC.23/04/25(火) 19:16:18
ブラウザの画面を更新してアイテムをクリックすると...
ヨシ！
下画面に反映されました - 1581◆jG/Re6aTC.23/04/25(火) 19:28:07
onAfterSelect (アイテムを選択したとき)のほうがそれっぽいので変更
ついでに選択中のアイテムをgetSelectedItem()で取得してセットする処理を1行にまとめる
ついでについでにテーブル部品のパラメータ「select": "row",」を設定することで選択状態をわかりやすく - 1591◆jG/Re6aTC.23/04/25(火) 19:29:06
こんな感じでちょっと暗くなって選択状態がわかりやすくなった
- 1601◆jG/Re6aTC.23/04/25(火) 21:41:23
古戦場が接戦だぁ
- 1611◆jG/Re6aTC.23/04/25(火) 22:27:51
詳細に全て表示されてないのはデモデータの方でそもそも全ての要素を定義してなかったから
というわけで他の項目も追加する
(ついでにpropertyのelementsの重複していた部分を修正) - 1621◆jG/Re6aTC.23/04/25(火) 22:29:19
ちゃんと全項目表示されるようになった
- 1631◆jG/Re6aTC.23/04/26(水) 00:00:39
ここまで出来たらこのトライアルにおける画面側ほぼおしまい
後はDBとそこをつなぐWebAPI側が必要
なので次はWebAPI(FastAPI)に手を付けていく
これも本来であればインターネット上に構築する必要があるけれどまずはローカルのコンテナで検証する
https化はIngressでまとめて行うとしても認証をかけることを考えるとリバースプロキシを経由する方がいい気がしてきたな
- 1641◆jG/Re6aTC.23/04/26(水) 00:03:47
とりあえず今日はここまで
明日にはこんな形にできたらいいな - 1651◆jG/Re6aTC.23/04/26(水) 10:37:56
よく考えたらリバプロ使うならfastapi手前のは要らないか
- 166二次元好きの匿名さん23/04/26(水) 10:53:48
- 167二次元好きの匿名さん23/04/26(水) 11:13:19
- 1681◆jG/Re6aTC.23/04/26(水) 11:18:44
- 1691◆jG/Re6aTC.23/04/26(水) 11:22:05
ただ新入社員研修で配られたこれは分かりやすかったな
基礎的な概念から始まって簡単なゲームを作ることを経てオブジェクト指向を分かりやすく解説してた（と思う）
https://www.amazon.co.jp/スッキリわかるJava入門-第3版-スッキリシリーズ-中山清喬/dp/4295007803
- 17016623/04/26(水) 11:25:31
- 1711◆jG/Re6aTC.23/04/26(水) 17:49:33
今日はゼノブレやるからあんまり進まないかも
- 1721◆jG/Re6aTC.23/04/26(水) 21:36:50
個人的な経験から言って1日でもサボるとそのままズルズルいくのでちょっとでも進めます
- 173二次元好きの匿名さん23/04/26(水) 21:45:22
このレスは削除されています
- 1741◆jG/Re6aTC.23/04/26(水) 21:46:13
現時点での目標図を修正
こんな感じでいったんリバースプロキシを経由してパス振り分けする
リバースプロキシを採用する理由は前述のとおり認証機能の実装に備えるため
これによってWebUIやWebAPIそれぞれではなくリバースプロキシ1個所に認証を構えるだけで良くなる
インターネットに公開することを考えると認証を噛ませないとやっぱり不安 - 1751◆jG/Re6aTC.23/04/26(水) 21:54:11
という訳でdocker-compose.yamlを変更
今までopenrestyとしていたサービスをweb-appにリネーム
同階層に同名「web-app」でディレクトリを作成しそこにappディレクトリを移動
またreverse-proxyのサービスを新たに追加した - 1761◆jG/Re6aTC.23/04/26(水) 21:55:08
web-appじゃなくてweb-uiだった
- 1771◆jG/Re6aTC.23/04/26(水) 22:02:46
ここで注目したいのがweb-uiサービスではポートを公開していないところ
このままではweb-uiサービスを公開できない...と思いきやそうではない
docker-composeではデフォルト設定だと同じyaml内に記述したサービス間はポートが公開されていなくても内部通信で接続できる
これをリバースプロキシと組み合わせると外部公開するポートを1つに集約することができる
外部公開するポートの数が増えるほどセキュリティリスクは高まり、それぞれのサービスで考えなければならない対策も増える
こうするとリバースプロキシに集中して取り組めばいいため難しいことを考える部分を減らすことができるのだ - 1781◆jG/Re6aTC.23/04/26(水) 22:07:01
今さらだけれどリバースプロキシは他のサーバと連携してアクセスを仲介する役割をもったサーバのことですね
クライアントと目的サービスとの間に立ってやり取りをしてくれるので本命のサービスが矢面に立たなくて良くなります - 1791◆jG/Re6aTC.23/04/26(水) 22:20:27
公式ドキュメントにしたがってリバプロの設定ファイルを作ります
WebSocketなども考慮するともっと記述量は増えるけど単純なWebアクセスなのでこれで十分
proxy_passの部分に宛先のホスト名を記述するのですがdocker-composeを使っているためyamlで定義したサービス名で名前解決できます - 1801◆jG/Re6aTC.23/04/26(水) 22:23:13
公式ドキュメントいわく、こうして作成したファイルをコンテナ側の /opt/bitnami/openresty/nginx/conf/server_blocks に配置せよとのこと
なのでそうなるようにマウント記述を書きます
(ついでにコンテナ側8080番ポートをホスト側80番ポートにフォワードするように設定変更) - 1811◆jG/Re6aTC.23/04/26(水) 22:25:48
あとはコンテナを記述して localhost にアクセス
ポートフォワードを設定したので80番ポート(httpデフォルト)でアクセスできる
画面表示ヨシ！
- 1821◆jG/Re6aTC.23/04/26(水) 22:27:04
こんな感じにアクセスできたことになる
- 1831◆jG/Re6aTC.23/04/26(水) 22:31:10
ついでなのでFastAPI(web-api)用の設定も定義しておく
先ほどの設定ファイルに追記
FastAPIのデフォルトポートが8000番らしいので /api にアクセスがきたらそこに流すよう設定 - 1841◆jG/Re6aTC.23/04/26(水) 22:36:37
では肝心のWebAPIを作っていきましょう
の前にそもそもWebAPIとはなんぞや？という話
めちゃくちゃかみ砕いて言うと「URLに対してリクエストを送ると何かしらの結果が返ってくる仕組み」のこと
この掲示板も「URLにリクエストを送ると記事のWebコンテンツが返ってくるWebAPI」と考えることができる
最終的に「冷蔵庫の中身データを返すAPI」や「リクエスト内容に対応して冷蔵庫の中身データを操作するAPI」を作りたい - 1851◆jG/Re6aTC.23/04/26(水) 22:39:22
まずはFastAPIの公式に従ってHello Worldを作成
Pythonで記述する
推奨されているmain.pyという名前で作成
ルートパスに対してアクセスが来ると「{"Hello": "World"}」というJsonデータを返すAPIのようだ
記述はこれまためちゃくちゃ簡単 - 1861◆jG/Re6aTC.23/04/26(水) 22:51:24
docker-composeにこれを実行するコンテナサービスを記述する
コンテナイメージが公式から提供されているので有難く使わせてもらおう
コンテナを使うといちいち自分の環境にあれ入れてこれ入れてエラー起きて...みたいなことになりにくいからホント有難い
tiangolo/uvicorn-gunicorn-fastapi
というイメージ名で提供されておりデフォルトではコンテナ側の /app の中にあるmain.py を実行するらしいのでそれに合わせてさっき作ったpytonプログラムをマウントする
(:ro はreadOnlyの略 これを付けるとマウントしたものをコンテナ側から変更したり消したり出来なくなる)
このサービスもリバプロを経由するためポートは公開しない - 1871◆jG/Re6aTC.23/04/26(水) 22:53:55
さあ実行 ... の前にFastAPIのデフォルトは8000番ポートで起動するのは前述のとおりだがイメージの方では80番ポートを使用するよう指定されているらしいのでそれに合わせてリバプロ設定を変更
(80番ポートはhttpデフォルトポートなので省略してもいいがここでは明記)
- 1881◆jG/Re6aTC.23/04/26(水) 22:55:59
コンテナを再起動してブラウザで localhost/api/ を実行すれば ...
ヨシ！
無事に結果を受け取ることができました - 1891◆jG/Re6aTC.23/04/26(水) 23:04:16
次は同じ容量で画面開発の時に定義したデモデータを返すAPIを作ります
といったところで本日はここまで
引き続き質問感想アドバイス大歓迎です
「簡単すぎて馬鹿にされないかな？」と思っても大丈夫
少なくとも私はわからないことを質問しようとするその姿勢を称賛します - 190二次元好きの匿名さん23/04/26(水) 23:08:53
支援
ソース公開されたら使ってみたい - 191二次元好きの匿名さん23/04/27(木) 00:49:50
このレスは削除されています
- 1921◆jG/Re6aTC.23/04/27(木) 00:50:23
- 193二次元好きの匿名さん23/04/27(木) 07:31:10
インフラ周りわからんマンなのでAPI定義までにいろいろあってうへーってなってる
rails newしてherokuでデプロイしてた牧歌的な時代は終わったんやなって… - 1941◆jG/Re6aTC.23/04/27(木) 13:17:30
一般的にはアプリ開発者がインフラを意識しなくて良いようにするのが良いんだけどね
自分の場合はインフラも勉強したいので取り入れてるだけでHeroku代替サービスを使ってサラッとデプロイするのはまだまだメジャーだと思うよ
- 1951◆jG/Re6aTC.23/04/27(木) 19:18:19
続きをやっていこう...と思ったがそろそろ上限か
次スレを立ててきます - 1961◆jG/Re6aTC.23/04/27(木) 19:25:00
- 1971◆jG/Re6aTC.23/04/27(木) 19:31:24
とりあえずここまでお付き合いいただき感謝です！
次スレもよろしくお願いします