作ろう!ウェブアプリ開発コンテストPart1
【参加資格】Windowsパソコンを所有していること。このスレにアクセスできること。メールアドレスを所有していること。開発したウェブページを公開できること。 【実施期間】2020.11.13から3週間 【競技内容】 http://www.ysk.nilim.go.jp/cals/NETIS_DownLoad/Netis/NE_Prg_DownLoad.htm からNewTechKW7800.exeをダウンロードしてWindowsパソコンにインストールして下さい。 NewTechKW7800.exeの動作を参考に、このアプリの動作をマネしてマルチユーザのWebアプリにして下さい。 【開発フレームワークおよび仕様】Vue.jsを使用するものとします。識別子は日本語とします。マルチユーザ対応の実装は自由です。よく目立つ場所に「暫定版」と表示し、検索避けをして下さい。 【評価基準】仕様を満たし、実務に供すること。 【優勝商品】優勝者がメールアドレスを公開したら、もれなく蟻人間のスペシャル画像をメールで送信いたします。 さあて、今年も始まりました。作ろうコンテスト。私は司会者の蟻人間です。 皆さんに作って頂くのはVue.jsによるウェブアプリです。このアプリは必要事項を入力・記録・印刷するという基本的な機能があります。 一部、表計算のようなコンポーネントがありますので、多少ハードルが高いと思われますが、優秀な参加者には比較的簡単ではないでしょうか。 マルチユーザというのも難しい点です。ユーザ名とかアカウントとかをどう組み合わせるのかという問題があります。 各項目には文字数制限があります。これをどのように操作系にスマートに取り込むのかというのも、腕の見せどころです。 画像のアップロードもできないといけない。果たして画像ファイルをどう管理するのか。 優勝した人には蟻人間のスペシャル画像が渡されます。 それでは参加希望者は名乗り出て下さい!!! ライブラリやコンポーネントを使用しても構いません。ライブラリやコンポーネントの識別子は英語でも構いません。 >>5 おやおや、最初の参加希望者が現れました! どこから来ましたか? ふむふむ、鹿児島からですか。Go to トラベルキャンペーンで来たのですか。はい。 このコロナかの状況で、こういう大きなイベントを開催するのは大変です。オンラインという形になってしまいましたが、参加者がいらっしゃってありがたいことです。 早速、最初の課題に入りましょう。だっだーん♪ 課題1. Vue.jsで文字数制限のあるテキストボックスを実装せよ。 さあ、エントリーナンバー一番さん、回答して下さい。 回答するのは、(a)単一行のテキストボックスと、(b)複数行のテキストボックスの2通りです。 入力内容がn文字で、最大文字数がNの場合は、「n / N」のように表示して下さい。 熊次郎さん、正解です! 次の課題に進みましょう。 課題2. ローカルストレージを使用して、テキストボックスに記入したデータを保存・保持するようにして下さい。 ブラウザを閉じて開き直しても記入したテキストが復元されるようにして下さい。 >>11 素晴らしい。よくできました。次の課題です。 課題3. まず、NewTechKW7800.exeをインストールし、「スタート」メニューの「プログラム」→「新技術情報入力システム(港湾版)」→「新技術情報入力システム」を起動して下さい。最初の画面が表示されます。 さらに「新規作成」ボタンを押すと、画面「名称・分類等」が表示されます。画面「名称・分類等」のモックアップをVue.jsで作って下さい。ただし、右上の保存ボタンを押すと入力内容を保存するようにして下さい。識別子は日本語とします。 「分類・区分」については、付属の「分類」プログラムを参考にして下さい。 >>12-13 まず「分類」データをJSONデータにする。 正規表現による文字列置換により、単純に4個の文字列の配列の配列にする。 https://katahiromz.web.fc2.com/vue-sandbox/classify.json JSON lintでチェックしたところ、正当なJSONデータになったことを確認した。 Ruby on Rails では、Bootstrap, jQuery, React が多い システムに、何かをインストールするのが嫌だから、 単に、1つのフォルダに解凍するだけで済む、パッケージ版もあった方が良い >>16 著作権の関係でそれを配布することはできません。 「Vue.jsで階層カテゴリを作りたい」 https://teratail.com/questions/304428 #teratail #HTML5 やっぱりVue.jsよりもjQueryが簡単かな? 特別ルール! フレームワークはVue.jsじゃなくてjQueryに変更します。 パフパフ! 課題3の途中ですが、ハードルが高すぎるので次の課題に進みます。 課題4.レベル1〜4のセレクトボックスをまとめたWebコンポーネントを作成して下さい。 4個のセレクトボックスで選択するのは、レベル1からレベル4までの分類です。 分類方法は https://katahiromz.github.io/vue/%E6%B8%AF%E6%B9%BE%E5%88%86%E9%A1%9E.json で示されています。 >>24 熊次郎さん、2ポイント獲得。合計4ポイントです。 >>23 蟻人間はひとりではありません。生物学的なのが3人、デジタルなのが2人居ます。 次の課題です。 課題5. jTableとiQuery UIダイアログを使ってテーブルデータを編集できるようにして下さい。 「追加」ボタンでレコード1つ追加。 「編集」ボタンで選択レコード1つ編集。 「削除」ボタンで選択レコード削除して下さい。 1レコードに適当な名前の3つのフィールドがあるものとします。 >>25-26 ダイアログはやったぞ。 https://katahiromz.github.io/netis/dialog.html やったけど、jTableってサーバーが必要じゃん。 もっといいグリッド系のコンポーネントがあると思うぜ。 他のコンポーネントを使ってもいいかあ? その用途だと、jsGridがいいと思うぞ。 無料でライセンスはMIT。 CDNからも利用できるし。 https://katahiromz.github.io/netis/table.html >>27-28 jsGridの使用を許可します。課題3の続きをやって下さい。 これはままごとではありません。期限内に解決できない場合は人事に影響します。 時間が足りないので、課題を気にせずどんどん作って下さい。 local storageはセキュリティどうなん? >>33 今回は技術情報システムで、公開される情報だから、問題ないんとちゃうん? 複数チェックボックスどう復元すんねん。 ラジオボタン、どう復元すんねん。 画像アップロード、どうやるねん。 JSONファイルダウンロード、アップロード、どうやるねん。 local storageの容量は大丈夫かえ? 33 蟻人間 ◆T6xkBnTXz7B0 sage 2020/11/18(水) 22:50:58.32 ID:??? local storageはセキュリティどうなん? 34 蟻人間 ◆T6xkBnTXz7B0 sage 2020/11/18(水) 22:55:28.97 ID:??? >>33 今回は技術情報システムで、公開される情報だから、問題ないんとちゃうん? 36 Name_Not_Found sage 2020/11/18(水) 23:20:35.82 ID:??? トリップそのままとか斬新な自演ですね(笑) 一人ママゴト楽しい? 印刷が時間取りそうだなあ。 どうやって印刷を実装するんだろう。 CSSで@media print指定してごにょごにょするんかいな? スマホ対応はまだ? スマホで見るとデザインがボコボコなんだけど。 テーブルの罫線が薄すぎるんですけど。 何とかなりませんか? >>44-45 こんどは とりっぴ…じゃなくて とりっぷ きりかえて きちんと じえん できたね! もう とりっぷ きりかえわすれて じえんばれしちゃ だめだよ? しまじろう との やくそくだよ! いくつかバグを報告しますね。 (半角入 力) とかは、途中で改行されない方がいいですね。 「二段組」の横幅が狭いとき、一列にした方がいいですね。 「活用の効果」のデザイン、スマホでもPCでもかっこよく作れませんか? 「比較のポイント」がはみ出てます。 「施工実績」のボタンが未実装です。 「実用新案」がはみ出てますね。 「第三者評価」のボタンが未実装ですね。 「コストタイプの選択」が未実装ですね。 「写真」のアップロードが未実装ですね。 「印刷プレビュー」が未実装ですね。 ここまでよろしくお願いします。 >>46 しまじろうさん、こんにちは。 コンテストに参加しますか? 33 蟻人間 ◆T6xkBnTXz7B0 sage 2020/11/18(水) 22:50:58.32 ID:??? local storageはセキュリティどうなん? 34 蟻人間 ◆T6xkBnTXz7B0 sage 2020/11/18(水) 22:55:28.97 ID:??? >>33 今回は技術情報システムで、公開される情報だから、問題ないんとちゃうん? 36 Name_Not_Found sage 2020/11/18(水) 23:20:35.82 ID:??? トリップそのままとか斬新な自演ですね(笑) 一人ママゴト楽しい? https://katahiromz.github.io/netis/sample6.html >途中で改行されない方がいいですね。 修正しました。 >一列にした方がいいですね。 修正しました。 >「比較のポイント」がはみ出てます。 修正しました。 >「施工実績」のボタンが未実装です。 修正しました。 >「実用新案」がはみ出てますね。 修正しました。 >「第三者評価」のボタンが未実装ですね。 修正しました。 >「コストタイプの選択」が未実装ですね。 >「写真」のアップロードが未実装ですね。 >「印刷プレビュー」が未実装ですね。 まだです。 >>53 熊次郎さん、お見事! 6ポイント獲得です。 開発は後半戦に突入しました。なんとしても納期2020.12.04までに完成させて下さい。この連休中が最大のチャンスです。 蟻=熊 33 蟻人間 ◆T6xkBnTXz7B0 sage 2020/11/18(水) 22:50:58.32 ID:??? local storageはセキュリティどうなん? 34 蟻人間 ◆T6xkBnTXz7B0 sage 2020/11/18(水) 22:55:28.97 ID:??? >>33 今回は技術情報システムで、公開される情報だから、問題ないんとちゃうん? 36 Name_Not_Found sage 2020/11/18(水) 23:20:35.82 ID:??? トリップそのままとか斬新な自演ですね(笑) 一人ママゴト楽しい? >>56 名称・分類等はほとんど完成ですね。JSONのダウンロードとアップロードができてますね。保存ボタンも素晴らしい。 概要は、表計算と画像ファイルのアップロードができてませんね。 従来技術との比較は、活用の効果の根拠と、変化%と、コストタイプと、画像ファイルのアップロードと、表計算ができてませんね。 施工実績等は、画像ファイルのアップロードと、表計算ができてませんね。 印刷プレビューは、画像表示と、動的表出力と、印刷画面の切り替えができてませんね。 もう少し頑張りましょう。 蟻=熊 33 蟻人間 ◆T6xkBnTXz7B0 sage 2020/11/18(水) 22:50:58.32 ID:??? local storageはセキュリティどうなん? 34 蟻人間 ◆T6xkBnTXz7B0 sage 2020/11/18(水) 22:55:28.97 ID:??? >>33 今回は技術情報システムで、公開される情報だから、問題ないんとちゃうん? 36 Name_Not_Found sage 2020/11/18(水) 23:20:35.82 ID:??? トリップそのままとか斬新な自演ですね(笑) 一人ママゴト楽しい? https://katahiromz.github.io/netis/sample8.html 読み込み画面を追加。 表の読み込みと保存を実装。 コストタイプをほとんど実装。 画像アップロードと画像表示と表出力と計算の根拠はまだできてない。 熊次郎がいいように使われててうけるw この蟻ってやつ仕事受けたはいいけどスキルがないから他人に作らせてそれ納品するんじゃねえのw 蟻=熊 33 蟻人間 ◆T6xkBnTXz7B0 sage 2020/11/18(水) 22:50:58.32 ID:??? local storageはセキュリティどうなん? 34 蟻人間 ◆T6xkBnTXz7B0 sage 2020/11/18(水) 22:55:28.97 ID:??? >>33 今回は技術情報システムで、公開される情報だから、問題ないんとちゃうん? 36 Name_Not_Found sage 2020/11/18(水) 23:20:35.82 ID:??? トリップそのままとか斬新な自演ですね(笑) 一人ママゴト楽しい? >>63 アップロードファイル名がおかしい。 動的にDOM生成は少なくしてほしい。 蟻=熊 33 蟻人間 ◆T6xkBnTXz7B0 sage 2020/11/18(水) 22:50:58.32 ID:??? local storageはセキュリティどうなん? 34 蟻人間 ◆T6xkBnTXz7B0 sage 2020/11/18(水) 22:55:28.97 ID:??? >>33 今回は技術情報システムで、公開される情報だから、問題ないんとちゃうん? 36 Name_Not_Found sage 2020/11/18(水) 23:20:35.82 ID:??? トリップそのままとか斬新な自演ですね(笑) 一人ママゴト楽しい? >>65 正確なファイル名の取得はセキュリティの関係で無理らしいです。 ファイルドロップもサポートした方がいいですね。 蟻=熊 33 蟻人間 ◆T6xkBnTXz7B0 sage 2020/11/18(水) 22:50:58.32 ID:??? local storageはセキュリティどうなん? 34 蟻人間 ◆T6xkBnTXz7B0 sage 2020/11/18(水) 22:55:28.97 ID:??? >>33 今回は技術情報システムで、公開される情報だから、問題ないんとちゃうん? 36 Name_Not_Found sage 2020/11/18(水) 23:20:35.82 ID:??? トリップそのままとか斬新な自演ですね(笑) 一人ママゴト楽しい? 蟻=熊 33 蟻人間 ◆T6xkBnTXz7B0 sage 2020/11/18(水) 22:50:58.32 ID:??? local storageはセキュリティどうなん? 34 蟻人間 ◆T6xkBnTXz7B0 sage 2020/11/18(水) 22:55:28.97 ID:??? >>33 今回は技術情報システムで、公開される情報だから、問題ないんとちゃうん? 36 Name_Not_Found sage 2020/11/18(水) 23:20:35.82 ID:??? トリップそのままとか斬新な自演ですね(笑) 一人ママゴト楽しい? >>69 すっご〜い、画像をドロップ・アップロードできるじゃん。表示もカンペキ。すごい。 でも、画像のクリアボタンも付けて下さいね。 他には、コストタイプ、計算の根拠、印刷ボタンの実装が必要ですね。 JSONファイルのドロップ機能も欲しいですね。 頑張れば納期に間に合うと思いますよ。頑張りましょう。 蟻=熊 33 蟻人間 ◆T6xkBnTXz7B0 sage 2020/11/18(水) 22:50:58.32 ID:??? local storageはセキュリティどうなん? 34 蟻人間 ◆T6xkBnTXz7B0 sage 2020/11/18(水) 22:55:28.97 ID:??? >>33 今回は技術情報システムで、公開される情報だから、問題ないんとちゃうん? 36 Name_Not_Found sage 2020/11/18(水) 23:20:35.82 ID:??? トリップそのままとか斬新な自演ですね(笑) 一人ママゴト楽しい? スマホで、画像データの保存・読み込みに失敗しているようですね。妙ですね。 パソコンではできるはずなのに。 もう少し調べてみましょう。 >>73 すまない。少しコード間違えてたので修正した。 蟻=熊 33 蟻人間 ◆T6xkBnTXz7B0 sage 2020/11/18(水) 22:50:58.32 ID:??? local storageはセキュリティどうなん? 34 蟻人間 ◆T6xkBnTXz7B0 sage 2020/11/18(水) 22:55:28.97 ID:??? >>33 今回は技術情報システムで、公開される情報だから、問題ないんとちゃうん? 36 Name_Not_Found sage 2020/11/18(水) 23:20:35.82 ID:??? トリップそのままとか斬新な自演ですね(笑) 一人ママゴト楽しい? https://katahiromz.github.io/netis/sample11.html 画像の削除ボタンを付けた。 コストタイプを実装した。 印刷ボタンを実装した。 JSONファイルのドロップ機能を実装した。 残るは、計算の根拠。完成が近い。 蟻=熊 33 蟻人間 ◆T6xkBnTXz7B0 sage 2020/11/18(水) 22:50:58.32 ID:??? local storageはセキュリティどうなん? 34 蟻人間 ◆T6xkBnTXz7B0 sage 2020/11/18(水) 22:55:28.97 ID:??? >>33 今回は技術情報システムで、公開される情報だから、問題ないんとちゃうん? 36 Name_Not_Found sage 2020/11/18(水) 23:20:35.82 ID:??? トリップそのままとか斬新な自演ですね(笑) 一人ママゴト楽しい? >>76 順調だね。あんまり順調すぎるから、ボーナスステージを用意したよ。 ★ボーナスステージ★ 港湾版の他に建設版を制作できたら、得点を2倍にします! さあ、できるかな?! 熊次郎さん以外の人もがんばって下さい。 >>76 横ヤリですみませんが、ブラウザのIE11をサポートする気はありますか? お役所って、大多数が古いパソコンを使っていて、IE11で使えないとマズいらしいですよ。 蟻=熊 33 蟻人間 ◆T6xkBnTXz7B0 sage 2020/11/18(水) 22:50:58.32 ID:??? local storageはセキュリティどうなん? 34 蟻人間 ◆T6xkBnTXz7B0 sage 2020/11/18(水) 22:55:28.97 ID:??? >>33 今回は技術情報システムで、公開される情報だから、問題ないんとちゃうん? 36 Name_Not_Found sage 2020/11/18(水) 23:20:35.82 ID:??? トリップそのままとか斬新な自演ですね(笑) 一人ママゴト楽しい? >>79 時間が余ったら、IEサポートに挑戦してみるぜ。ありがとう。 IE11サポートなら、Webコンポーネントは使えない。代わりにjQueryで書き直し。 他にもIE11の不具合あるかもしれない。 蟻=熊 33 蟻人間 ◆T6xkBnTXz7B0 sage 2020/11/18(水) 22:50:58.32 ID:??? local storageはセキュリティどうなん? 34 蟻人間 ◆T6xkBnTXz7B0 sage 2020/11/18(水) 22:55:28.97 ID:??? >>33 今回は技術情報システムで、公開される情報だから、問題ないんとちゃうん? 36 Name_Not_Found sage 2020/11/18(水) 23:20:35.82 ID:??? トリップそのままとか斬新な自演ですね(笑) 一人ママゴト楽しい? \\\ じゃああーーーん /// https://katahiromz.github.io/netis/kouwan/ 完成しました!! IE11でも動きます!! 明日提出します。 ※なお、熊次郎と蟻人間は同一人物です。 >>84 おめでとうございます! コンテスト優勝者は、、、 熊次郎さんです!!!! ※なお、熊次郎と蟻人間は同一人物です。 以下、当局との交渉内容を記します。。。 問い合わせ窓口を発見。 http://www.ysk.nilim.go.jp/cals/ kowan-cals@ipc.ysk.nilim.go.jp 「メ−ルを送信する場合は、所属(会社名、機関名)、部署名、役職、氏名、住所をご記入ください。」と書いてある。 さて、問合せ内容を用意しないといけない。 作っても活用されなければ意味がない。 交渉が大事だ。しかしあんまり難しいことを書いても理解されるかどうか。 お金の話はどうすればいいだろうか。んん。 契約交渉は初めてだ。果たして相手は理解してくれるだろうか。 苦労話でも混ぜた方がいいか? 「開発期間は三週間で、開発は私一人個人で行いました。わからないことを1つ1つネットで調べて解決していきました。このシステムがその成果物です。」 他には? 旧製品との比較をするとポイントが高いだろう。 「従来の製品では、ウィンドウズのパソコンにインストールして使わなければいけませんでしたが、ウェブ技術により、 ウィンドウズ以外のパソコンや、スマートフォンでも場所を問わずに、使えるようになりました。」 「このシステムを採用するかどうかは、貴方様方の自由です。しかし、私達のソフトウェアを採用頂ければ、利用者の利用可能性が向上することを確信しております。」 kowan-cals@ipc.ysk.nilim.go.jpにメール送信しました。 (ここから) 【会社名】なし(個人) 【部署名】なし(個人) 【役職】なし(個人) 【氏名】片山 博文 (かたやま ひろふみ) 【住所】...秘密... 【メールアドレス】katayama.hirofumi.mz@gmail.com 【問合せ内容】 港湾CALS様、初めまして。私は、コンピューター研究家の片山博文MZとい う者です。趣味であれこれパソコンのソフトウェア開発を行っております。 今回、私は、技術情報入力システムを開発しました。下記の通りです。 システムのホームページ:https://katahiromz.github.io/netis/kouwan/ ソースコード:http://github.com/katahiromz/katahiromz.github.io 開発期間は三週間で、開発は私一人個人で行いました。わからないことを 1つ1つネットで調べて解決していきました。このシステムがその成果物 です。 スマホや古いブラウザも考慮した作りになっております。実用になるかど うか、ウェブ技術のわかる人に判断して頂きたく存じます。 従来の製品では、ウィンドウズのパソコンにインストールして使わなけれ ばいけませんでしたが、ウェブ技術により、ウィンドウズ以外のパソコン や、スマートフォンでも場所を問わずに、使えるようになりました。 ご検討のほど、よろしくお願い致します。 (ここまで) 返事がなかったので、反省会を開きます。。。 (反省会) もしかしてプロジェクトが未完成なんじゃねーの? えー、UIはほとんど完成してるはずだよ。 判定・変換系のロジックができてないだろうが? でも、ロジックを全部観測と憶測で書けなんて無理だし、無駄じゃね? いや、天才プログラマーならロジックを全部観測と憶測で書けるはずだよ。 そもそも、なんかメールの文章に失礼があったんじゃねーの? 勝手にシステムを提案するこっちの態度が気に食わないんじゃね? (反省会の続き) そもそも当局は個人を相手にしてないんじゃないか? 会社を設立するのが先か? 電子メールよりも電話やFAXの方がいいのではないか? 電話でどうやってURLを伝える? 長いアルファベットの羅列を口頭で言うのか? そもそも東京の人とは言葉が通じないのかも? (反省会の続き2) そもそも問い合わせ窓口を間違えてる可能性。 彼らは問い合わせを機械的に事務的に処理しているから、お門違いは無視している恐れがある。 それとも問い合わせに「恐れ入ります」「誠に恐縮ですが」などの秘密の合言葉が必要なのでは? 頭が高いのでは? (反省会の続き3) もしかして時間外にメールで問い合わせしたら、いけないのではないか? たしか、この時代の日本ではメールの問い合わせにも受付時間があったはず。 もしかして公務員が慢性的な人手不足でメールの対応に遅れが生じてるかも。 やはり、旧民主党に政権を渡したのが不味かったのか? わけわからん。 よし、次の方針はこうだ。 1. 判定系のロジックを勝手に想像して追加する。 2. 次の問い合わせでは、「恐縮ですが」「誠に恐れ入りますが」などの秘密の合言葉を追加する。 3. 相手が見えなくても頭を低くする。 4. とりあえずこちらを認知してもらえるように電話してみる。 5. メールの受付時間を守る。 6. 「偉い人」にも直談判してみる。 P D C A Plan, Do, Check, Actを回していきましょ。 この番組は、殺伐とした5ちゃんねるにネタとうるおいをお届けする蟻人間とご覧のスポンサーの提供でお送り致します。 ___提_供___ __蟻_人_間__ ∧∧ ミ _ ドスッ ( ,,)┌─┴┴─┐ / つ おわり. | 〜′ /´ └─┬┬─┘ ∪ ∪ ││ _ε3 ☆★☆テナント募集中☆★☆ スレッド終了のため、一緒にスレッドを盛り上げてくれる イベント企画が出来る方を募集しています。 まずはご連絡下さい。 株式会社突撃商会 TEL 03-XXXX-XXXX 次のテーマ。 「○○ジェネレーターを作ろうコンテスト」 SNSのネタになるジェネレーターをみんなで作りましょう。使用フレームワークはjQuery。期限は2020.12.31まで。 参加条件: とにかく面白いこと。前例のない新作であること。jQueryで作成すること。 ほとんどのブラウザで正常に動作すること。作品のライセンスはMIT。 どんどんお気軽に参加して下さい。参加したい人はこのスレッドに名乗り出て下さい。 read.cgi ver 07.4.6 2024/03/23 Walang Kapalit ★ | Donguri System Team 5ちゃんねる