20210725のHTMLに関する記事は14件です。

box-sizingはborder-boxにセットするのはおすすめ

box-sizingはborder-boxにセットするとデザインの設計はしやすいだと思います。 例えば下記の<div>要素で border-box <style> .border-box { background-color: yellow; width: 200px; height: 200px; border: solid 20px blue; box-sizing: border-box; } </style> border, content, padding 全部含めて、ボックスの幅は思った通り200pxになります。 同じ<div>要素でcontent-boxにすると、 実際のボックスの幅は200px以上になります。 なぜなら、paddingとborderのサイズは含まれないです。 content-box <style> .content-box { background-color: yellow; width: 200px; height: 200px; border: solid 20px blue; box-sizing: content-box; } </style> borderとpaddingのサイズが分からないと、 実際のボックスの幅も分からなくなってきます。 結論 私はデザインする時には頭の中でボックスとして計算したりするので、 paddingとborderはサイズに含まれないと、思ったよりサイズが大きくて、困ります。 残念ながらdefault値はcontent-sizeですので、いつも変更します
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

プログラミングを始めて1年間で読んだ書籍

概要 これまでexcelやAccessは使用してきましたが,プログラミングには一切触れてきませんでした。 ずっとスマホアプリを作りたいと思っていたので、26歳にしてプログラミングの学習を始めました。 学習の目的は第一にスマホアプリの作成とリリース、第二にアプリエンジニアに転職するためです。 そこで学習も1年経ちましたので、1年間で読んだ書籍を恐れ多くも紹介します。 ベテランの皆様、おすすめの書籍があったらご教授下さい!! 書籍一覧 ・HTML&CSSとWebデザインが 1冊できちんと身につく本 ・デザイン入門教室[特別講義] 確かな力を身に付けられる ~学び、考え、作る授業~ ・確かな力が身につくJavaScript「超」入門 第2版 ・詳細! SwiftUI iPhoneアプリ開発入門ノート[2020] iOS 14+Xcode 12対応 ・絶対に挫折しない iPhoneアプリ開発「超」入門 第8版 ・【Swift5/Xcode12】超入門クイズアプリ開発講座〜自分のアプリをリリースしてみよう〜 ・Swift実践入門 ── 直感的な文法と安全性を兼ね備えた言語 ・よくわかるAuto Layout iOSレスポンシブデザインをマスター ・App Development with Swift ・キタミ式イラストIT塾 基本情報技術者 HTML&CSSとWebデザインが 1冊できちんと身につく本 プログラミング知識ゼロで一番最初に読んだ本です。 いきなりアプリは作れないと思い、ネットでどの言語からスタートするのが良いか調べていたところ, HTMLが難易度が比較的低く始めやすいとのことでしたので近所の本屋でこの本を買いました。 結果としてHTMLから始めたのは正解でした。この本は事前知識ゼロを前提として書かれていると思います。 デザイン入門教室[特別講義] 確かな力を身に付けられる ~学び、考え、作る授業~ プログラミングの記事なのに2番目で早速プログラミングと関係ない本が出てきました。笑 1番目の本で学んだhtmlでページを書いているうちにどのようなデザインが見やすいのか、自身の勝手なセンスでデザインして良いのかと疑問が出てきました。この本はユーザーインターフェイス等のデザインだけでなく、 PowerPointやKeynoteでスライドを作る時に知識が大いに役立つ思います。 配色や文字サイズ、フォント、余白が読み手に与える印象をわかりやすく解説しています。 "人に見せる資料を作成する全ての社会人"はデザインの基本を身につけるべき!とさえ思いました。 確かな力が身につくJavaScript「超」入門 第2版 HTMLとCSSでページを作成できるようになりましたが、いまいちなんか古臭い、windowsXPを使用していた時代のようなページになってしまうことに気づきました。調べてみると現在のHPはほとんどがJavaScriptというものが使われているようです。この本でJavaScriptの基本やjQueryについて学び、ハンバーガーメニューの実装をしました。 詳細! SwiftUI iPhoneアプリ開発入門ノート[2020] iOS 14+Xcode 12対応 一通りHTMLついて学んだので、ここからアプリ作成にシフトしていきます。 iPhoneとiPadを持っていたので、言語はSwiftにしました。 私はSwiftとSwiftUIの違いもわからずSwiftUIから始めましたが、初心者はAutolayoutとswiftで始めた方が良いと感じます。理由はSwiftUIが比較的新しいものであり、ネットでの情報がSwiftUIよりSwiftの方が多いからです。実際現場での開発もSwiftUIはまだあまり使われていないようなQittaの記事をいくつか見ました。 絶対に挫折しない iPhoneアプリ開発「超」入門 第8版 kindle版で購入しました。 初めてkindleの電子書籍を購入したのですが、重い本を持ち歩かなくて良い(→出張へ持ち運びや電車で読むのに便利!)というメリットの反面、使い勝手が非常に悪く閲覧しにくいという大きなデメリットがありました。具体的には拡大・縮小が思ったように操作できない、拡大しても解像度は変わらない(つまり拡大するとぼやける)という点です。本自体も初心者には非常に良いのですが、内容が先程紹介した「詳細! SwiftUI iPhoneアプリ開発入門ノート」とかなり似通っているのでどちらかの購入でいいと思いました。 【Swift5/Xcode12】超入門クイズアプリ開発講座〜自分のアプリをリリースしてみよう〜 初心者向けにSwift/Xcodeのブログを書かれているsatorikuさんという方の本です。 電子書籍限定です。 ブログの説明が非常に丁寧でわかりやすかったので購入しました。 広告の実装(google AdMob)やリリース方法まで詳しく書かれていました。 Swift実践入門 ── 直感的な文法と安全性を兼ね備えた言語 初心者向けのアプリ開発の本は本の通りにコーディングすればアプリは完成するのですが、あまり応用が聞きませんでした。オリジナルのアプリの開発としての知識は不十分です。 "〇〇アプリの作り方!"ではなく"プログラミング言語"としてのswiftを学ぶために本書を購入しました。 内容は初心者向けではなく中級者以上と感じました。私のレベルでは理解できない部分も多いですが、内容が網羅されていると感じ、これから何を勉強すれば良いかがわかり非常に満足です。 よくわかるAuto Layout iOSレスポンシブデザインをマスター Amazonで新品が4980円からと高額なので中古で購入しました。(定価は2600円) アプリ開発をはじめていくつか壁がありましたがその一つはAutoLayoutでした。 詳細に書かれていますが、読むに当たって注意点があります。 2016年に出版された本ですのでios10くらいでしょうか。少し古い内容・今では使用されていないものがありますのでこの点を自身で調べて更新する必要があります。 App Development with Swift "App Development with Swift”はSwiftの基礎知識を証明する資格です。 こちらはその資格のApple公式ドキュメントです。電子書籍のAppleBooksのみ配信です。 無料ですが、総1015ページ全て英語の文書になります。 難しい英語は使われておりませんので、TOEIC630点程度の英語力でも概ね理解できました。 キタミ式イラストIT塾 基本情報技術者 転職について情報を調べると、ブラックな情報ばかり目についてしまいます。 Youtubeで転職について語っている方が、「ブラックだとかいう前に入社する前に基本情報技術者くらいは取りましょう。」とおっしゃっておりこの資格の存在を知り取ろうと思いました。 この本はイラストが多用されており、わかりやすい反面ページを食ってしまい内容の割に本が分厚いです。 どんぐり君ときのこ君がほぼ毎ページで親父ギャグを言っています。 今まで名前は聞いたことがあるが、詳しくは説明できないIT用語がたくさん出てきました。 ノート取りながら1周するのに1ヶ月以上かかりました。 まとめ 私はHTML→CSS→JavaScript→Swiftの順で学習をしました。 本の力は偉大ですが、実際何かアプリを作ろうとすると、書籍の知識だけでは絶対に不可能でした。 QiitaやStackOverflow等でネット上から求める情報を調べ出す力が重要ということも学びました。 これがいわゆる"Google力"というやつなのですね。 以上、これからプログラミングを始める方の参考になればと思い、Qitta初投稿でした。 購入総金額:22592円
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Webとは。理解したようで、理解しきれていない概念について。

webとは 英語ではクモの巣という意味です。 正式名称はWorld Wide Webです。 これは世界規模のクモの巣という意味で その名の通り世界規模でクモの巣のように張りめぐらせれてる状態(仕組み)のことです。 概念的には、 インターネットを使ってwebページをつなぎ合わせた仕組みのことをいいます。 ここで大切なのはwebというのは仕組みのことだとまず理解しておくことだと思います。 では、何が張り巡らされているのでしょうか? 答えはwebページです。 webページとは webページとは画像や文章などの情報が表示されている文章の最小単位のことです。 そしてwebページが集まってできたものがwebサイトとなります。 webサイトとはwebベージを置く敷地(site)のことです。 イメージとしては家(webサイト)の中にたくさんの家具(webページ)が置いてあるイメージです。 webページを繋ぐもの またwebページとwebページをつなぐ役割をしているのがハイパーリンクです。これも英語の語源(hyper link)である、超越したリンクという意味の通りリンクという通路によって自分の領域を超えるというイメージです。そしてハイパーリンクが含まれている文章のことをハイパーテキスト(超越した文章)と言います。 ハイパテキストが線だとしたら、ハイパーリンクはその中の導線のようなイメージです。 インターネット しかしハイパーリンクでwebページ同士を繋いでもwebページからwebページへは行き来することはできません。 ハイパーリンクで繋いだ線を行き来できるようにしたのがインターネットです。 ※インフラ系のエンジニアの方はインターネットをISP(インターネットプロバイダー)の集合体と考えていることが多いです。 +α webページはHTMLやCSS、JavaScriptなどの言語で構成されています。 これは家具でいうところの木材や鉄などのイメージです。 まとめ webページはこのようにしてさまざまな要素が組み合わさってできた仕組みなのです。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Webとは。

webとは 英語ではクモの巣という意味です。 正式名称はWorld Wide Webです。 これは世界規模のクモの巣という意味で その名の通り世界規模でクモの巣のように張りめぐらせれてる状態(仕組み)のことです。 概念的には、 インターネットを使ってwebページをつなぎ合わせた仕組みのことをいいます。 ここで大切なのはwebというのは仕組みのことだとまず理解しておくことだと思います。 では、何が張り巡らされているのでしょうか? 答えはwebページです。 webページとは webページとは画像や文章などの情報が表示されている文章の最小単位のことです。 そしてwebページが集まってできたものがwebサイトとなります。 webサイトとはwebベージを置く敷地(site)のことです。 イメージとしては家(webサイト)の中にたくさんの家具(webページ)が置いてあるイメージです。 webページを繋ぐもの またwebページとwebページをつなぐ役割をしているのがハイパーリンクです。これも英語の語源(hyper link)である、超越したリンクという意味の通りリンクという通路によって自分の領域を超えるというイメージです。そしてハイパーリンクが含まれている文章のことをハイパーテキスト(超越した文章)と言います。 ハイパテキストが線だとしたら、ハイパーリンクはその中の導線のようなイメージです。 インターネット しかしハイパーリンクでwebページ同士を繋いでもwebページからwebページへは行き来することはできません。 ハイパーリンクで繋いだ線を行き来できるようにしたのがインターネットです。 ※インフラ系のエンジニアの方はインターネットをISP(インターネットプロバイダー)の集合体と考えていることが多いです。 +α webページはHTMLやCSS、JavaScriptなどの言語で構成されています。 これは家具でいうところの木材や鉄などのイメージです。 まとめ webページはこのようにしてさまざまな要素が組み合わさってできた仕組みなのです。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

httpサーバを手っ取り早く立てる

概要 開発時 http サーバが欲しくなる以下のような状況について記載します。 静的htmlファイルなどを file:/// を使わずブラウザで開きたい。 CGI(php) をとりあえず動かしたい。 リバースプロキシサーバ(nginx)をとりあえず動かしたい。 ここ最近数ヶ月のうちに、2つ目と3つ目の方法が必要になり、調べてました。せっかくなので記事化しておく。 対象環境 Linux。メジャーな distribution なら大差ないはず。 手段 静的htmlファイルなどを開くためのhttpサーバを立てる python3 の http.server モジュールを使う。 $ python3 -m http.server 8000 Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ... http://localhost:8000/ に接続。 index.html が無ければディレクトリ一覧も出るので便利。 CGI(php) をとりあえず動かしたい。 php が使える。 $ php -S 0.0.0.0:8000 [Sun Jul 25 18:52:46 2021] PHP 7.4.3 Development Server (http://0.0.0.0:8000) started http://localhost:8000/ に接続。 ディレクトリ一覧は出せないので、一覧を自力で書くか、routerを定義する必要がある。 router の書き方については、以下の stackoverflow に書かれている回答が役に立ちました。 リバースプロキシサーバ(nginx)をとりあえず動かしたい リバースプロキシサーバが必要になりました。仕方ないですね。docker で nginx を立てましょう。 まずは、最も単純な、8000 番ポートに nginx サーバを立てる方法。python3 -m http.server 8000 と大体同じ。 docker run --name my-nice-nginx --rm \ -v $PWD:/usr/share/nginx/html:ro \ -d -p 8000:80 nginx 終了するには、docker kill my-nice-nginx だけでok。--rm 付けていますし。 設定ファイルを書き換えるには、以下のように設定ファイルをマウントする。 docker run --name my-nice-nginx --rm \ -v $PWD/nginx/html:/usr/share/nginx/html:ro \ -v $PWD/nginx/nginx.conf:/etc/nginx/nginx.conf:ro \ -v $PWD/nginx/conf.d:/etc/nginx/conf.d:ro \ -v $PWD/nginx/log:/var/log/nginx/:rw \ -d --net host nginx ポートフォワーディングで(80から8000に変更するような)ポート変更の対応をすると、リバースプロキシとしてnginxを使いたいときに、dockerの設定が大変になる。 ここは --net host してしまって、nginx 側の設定でlistenするポートを置き換えると手を抜ける。conf.d/default.conf の変更も忘れずに。 本番環境はちゃんとカプセル化しましょう。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【便利】コードネーム(和音)を判定するアプリを作った

構成音をポチポチ選択するだけで、コードネームが判定されるウェブアプリを作りました! ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ https://o-to.khufrudamonotes.com/o-to-modal-interchange もう似たようなアプリあるでしょ? …ぶっちゃけ、音の組み合わせからコードネームを検索するウェブアプリは他にもあります。 しかし、今回僕の作ったやつはひと味違います。 自ら「推しポイント」を語らせてください。     コードネームだけではなく… ・コードの読み方 ・詳細情報 ・コードの構成音を含む主なスケール まで同時に表示してくれます!!     ―――え?「だからどうした?」って? コードの読み方が分かるメリット 慣れないうちは、複雑なコードネームはまるで呪文です。 しかし、当たり前ですけど読み方が併記されていれば読めます。 コードに関する記事やアプリは、おそらく”コードネームが読める人”が 書いたり作ったりしていると思うので、意外と忘れがちな機能じゃないかと思います。 詳細情報が分かるメリット こういうコードネーム検索アプリを使ってくださる方って、 楽器を弾いていて… 「お!いい感じの響きのコードを見つけた!」 →「コードネームなんだろう?」 って流れで使われるんじゃないか…と思います。 でも、コードネームだけを見て 「へぇ〜」で終わってしまうのは「もったいない」と感じるんですよね。 せっかくなら、コードの仕組みや成り立ちまで理解して 応用できるところまでいければ良いのにな…と。 その点、コードの詳細情報を確認できると ”せっかく発見した素敵な響き”を応用する大きな助けになるはずです。 ↑"ドミナント機能を持つコード(不安定なコード)"の場合は、 "解決先のコード"の候補と、"手前にいそうなコード"の候補まで表示されます。 (※トライトーンの有無から判定しています。) コードの構成音を含む主なスケールが表示されるメリット 60種類を超える主なスケールの中から、 ”指定したコードの構成音を持つスケール”を自動で絞り込みます。 こちらもスケールの名前だけでなく、構成音、調号、親スケールの名前まで表示されます。 コードは前後の流れや、使われているキーに対しての立ち位置によって役割が変わります。 しかし、この機能を使えばそれらが一望できます。 また、複雑なコードを見たときの鉄板リアクションは、 「こんなコードいつ使うねん?」だと思います。 それに"答えられる"機能になっているはずです。 弱点 という感じで自画自賛の嵐でしたけど… 制作者が思う至らない部分についてもまとめておきます。 異名同音を厳密には判定していない ある程度の異名同音を区別する処理はしてあります。 しかし、異名同音を厳密に処理しようとすると色々面倒くさくなるのに加えて、 ダブルシャープやダブルフラットが出てきてビギナーには読みにくいかも… と思って躊躇しました。 UST(アッパー・ストラクチャー・トライアド)やハイブリッド・コードの解釈には対応していない。 操作の煩雑さを抑えつつ、同じUIで分かりやすく伝える方法が思い浮かばなかったので実装を見送りました。 ただ、有名なUSTやハイブリッド・コードと同じ構成音を持つコードに関しては詳細情報に表示されるようにしています。 使ってね というわけで、是非使ってみてください! できれば感想などもらえると嬉しいです!! ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Ajaxでフォームから自動計算をするプログラム

はじめに この記事では、 Ajaxでフォームから自動計算をするプログラム について解説していきます。 実用例 私が作っているレシピサイトで使用している技術です。 実装 環境構築 headタグにjQueryのCDNを書きます。 <head> ...省略 <script src="https://code.jquery.com/jquery-3.3.1.js"></script> </head> form formを書きます。 結果はreadonlyで編集できないようにします。 <body> <form> <input type="text" id="input01">×2 + <input type="text" id="input02">×3 + <input type="text" id="input03">×4 = <input type="text" id="result" readonly="readonly" > </form> 計算するプログラムをscriptタグに書きます。 if (isNaN...で空欄だった場合に0で計算するようにしています。 最後に全ての値をresultに代入して結果を反映させます。 <script> $('#input01, #input02, #input03').change(function() { var input01 = $('#input01').val(); var val01 = parseInt(input01) * 2 if (isNaN(val01)) { var val01 = 0 } var input02 = $('#input02').val(); var val02 = parseInt(input02) * 3 if (isNaN(val02)) { var val02 = 0 } var input03 = $('#input03').val(); var val03 = parseInt(input03) * 4 if (isNaN(val03)) { var val03 = 0 } var result = val01 + val02 + val03 $('#result').val(result) }); </script> </body> 全体像 <body> <form> <input type="text" id="input01">×2 + <input type="text" id="input02">×3 + <input type="text" id="input03">×4 = <input type="text" readonly id="result" readonly="readonly"> </form> <script> $('#input01, #input02, #input03').change(function() { var input01 = $('#input01').val(); var val01 = parseInt(input01) * 2 if (isNaN(val01)) { var val01 = 0 } var input02 = $('#input02').val(); var val02 = parseInt(input02) * 3 if (isNaN(val02)) { var val02 = 0 } var input03 = $('#input03').val(); var val03 = parseInt(input03) * 4 if (isNaN(val03)) { var val03 = 0 } var result = val01 + val02 + val03 $('#result').val(result) }); </script> </body> さいごに Ajaxでフォームから自動計算をするプログラム について解説しました。 参考になったら、LGTMしていただけると幸いです! 最後まで読んでいただきありがとうございました!
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

フォームから自動計算をするプログラム

はじめに この記事では、 フォームから自動計算をするプログラム について解説していきます。 実用例 私が作っているレシピサイトで使用している技術です。 実装 環境構築 headタグにjQueryのCDNを書きます。 <head> ...省略 <script src="https://code.jquery.com/jquery-3.3.1.js"></script> </head> form formを書きます。 結果はreadonlyで編集できないようにします。 <body> <form> <input type="text" id="input01">×2 + <input type="text" id="input02">×3 + <input type="text" id="input03">×4 = <input type="text" id="result" readonly="readonly" > </form> 計算するプログラムをscriptタグに書きます。 if (isNaN...で空欄だった場合に0で計算するようにしています。 最後に全ての値をresultに代入して結果を反映させます。 <script> $('#input01, #input02, #input03').change(function() { var input01 = $('#input01').val(); var val01 = parseInt(input01) * 2 if (isNaN(val01)) { var val01 = 0 } var input02 = $('#input02').val(); var val02 = parseInt(input02) * 3 if (isNaN(val02)) { var val02 = 0 } var input03 = $('#input03').val(); var val03 = parseInt(input03) * 4 if (isNaN(val03)) { var val03 = 0 } var result = val01 + val02 + val03 $('#result').val(result) }); </script> </body> 全体像 <body> <form> <input type="text" id="input01">×2 + <input type="text" id="input02">×3 + <input type="text" id="input03">×4 = <input type="text" readonly id="result" readonly="readonly"> </form> <script> $('#input01, #input02, #input03').change(function() { var input01 = $('#input01').val(); var val01 = parseInt(input01) * 2 if (isNaN(val01)) { var val01 = 0 } var input02 = $('#input02').val(); var val02 = parseInt(input02) * 3 if (isNaN(val02)) { var val02 = 0 } var input03 = $('#input03').val(); var val03 = parseInt(input03) * 4 if (isNaN(val03)) { var val03 = 0 } var result = val01 + val02 + val03 $('#result').val(result) }); </script> </body> さいごに フォームから自動計算をするプログラム について解説しました。 参考になったら、LGTMしていただけると幸いです! 最後まで読んでいただきありがとうございました!
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

htmlファイルのみでPDFを生成できるようなのでドラゴン桜計算プリントを作ってみた

はじめに  子供が算数のテストで単純な計算ミスをよくしているようなので、 計算力をつけたいと思い、簡単な四則演算のプリントを印刷するために、 Googleスプレッドシートを使って問題を生成して毎日5分で5人家族全員で解いていました。  これでも結構使えましたが、知り合いの子供もやりたいという声があり、共有を考えましたが、 閲覧権限だと問題のランダム生成ができないし、編集権限をつけると間違って触って式が壊れるかもしれないので、 シンプルにPDFを出力したほうがいいかと思い実現方法を調べてみました。 するとjavascriptのみでPDFを生成してフォントも埋め込めるライブラリがあったので、 それを使って作ってみた手順をまとめました。 必要なもの パソコン:今回は Windows10 の PC を使いましたが、Mac などでも同じようにできます。 ブラウザ(Chrome最新版, IE11 は pdf-lib が対応です。):動作確認用 テキストエディタ:html 編集用 埋め込み用フォント:Rounded Mgen+ (ラウンデッド ムゲンプラス) から rounded-mgenplus-1m-regular.ttf をダウンロードしました。 Webサーバー:ローカルで html を開くとフォントを読み込めないので、 OS 問わず使いやすい Chrome拡張の Web Server for Chrome を使います。 最小限のサンプル javascript で PDF を生成するライブラリはいくつかあるようですが、 今回は比較的新しそうな PDF-LIB を使います。 テキストエディタで以下の html ファイルを作成します。 html を保存した同じ場所(/dev/pdf)に rounded-mplus-1m-regular.ttf も配置します。 /dev/pdf/index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <script src="https://unpkg.com/pdf-lib"></script> <script src="https://unpkg.com/@pdf-lib/fontkit/dist/fontkit.umd.js"></script> </head> <body> 準備中... <script> (async function() {  //PDF生成 const pdf = await PDFLib.PDFDocument.create(); //埋込フォント使用 pdf.registerFontkit(fontkit); //日本語フォント読込 const font = await pdf.embedFont(await (await fetch('rounded-mgenplus-1m-regular.ttf')).arrayBuffer()); //ページ追加(単位はポイント、A4サイズにしています) const page = pdf.addPage([842, 595]); //文字描画(こちらも size, x, y の単位はポイント、原点は左下) page.drawText('JavaScript で PDF を生成したよ', { font: font, size: 14, x: 100, y: 300 }); //PDF表示 location.href = URL.createObjectURL(new Blob([await pdf.save()], { type: 'application/pdf' })); })(); </script> </body> </html> pdfフォルダは以下の内容になります。 Webサーバーの設定で、CHOOSE FOLER を押して、/dev/pdf フォルダをしています。 表示されている Web Server URL(s) をクリックしすれば以下のように PDF が表示されます。 pdf-lib ではフォントを指定しない場合、日本語が使えないようなので、これが最小のサンプルになると思います。 あとは描画する文字のサイズを計算する font.widthOfTextAtSize, font.heightAtSize, 矩形を描画する page.drawRectangle を使えば任意の位置に文字と枠線を表示できるので、四則計算100問のプリントPDFを作るプログラムを書きました。 完成版 完成版 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <script src="https://unpkg.com/pdf-lib"></script> <script src="https://unpkg.com/@pdf-lib/fontkit/dist/fontkit.umd.js"></script> </head> <body> 準備中... <script> (async function() { /* ランダムで計算100問のPDFを出力する pdf-libの単位はpt: 1pt = 0.353mm, 1mm = 2.835pt */ const PAGE_WIDTH = 842; //A4 210mm×297mm = 84pt×595pt const PAGE_HEIGHT = 595; const FONT_SIZE = 10.5; const MARGIN = FONT_SIZE * 2; //上下左右余白 const ROWS = 27; //1ページ行数 const COLUMNS = 4; //1ページ列数 const COLUMN_WIDTH = (PAGE_WIDTH - MARGIN * 2) / COLUMNS; const THICKNESS = 0.001; //線の太さ const PADDING = 0.5; //セルの余白(1で1文字のサイズ) const FONT_URL = 'rounded-mgenplus-1m-regular.ttf'; //http://jikasei.me/font/rounded-mgenplus/ const Y = y => PAGE_HEIGHT - y; //pdf-libのy座標は下から上方向なので上から下方向に変換 const range = (start/*:Number*/, count/*:Number*/) => Array.from(Array(count)).map((_, i) => i + start); const rand_int = max/*:Number*/ => Math.floor(Math.random() * max); const isNumber = x => typeof(x) == 'number'; const expand_text = text => isNumber(text) ? Array.from(Array(Number(text))).reduce((a, i) => a + ' ', '') : text; //問題、解答作成 const pairs = range(1, 10).flatMap(x => range(1, 10).map(y => [x, y])); const questions = range(1, 100).map(n => { const prefix = '[' + n + '] '; switch(rand_int(4)) { case 0://加算: 0~50 + 0~50 { const left = rand_int(51); const right = rand_int(51); return [prefix + left + '+' + right + '=', left + right]; } case 1://減算: 0~99 -0~99(答えは0以上) { const pair = [rand_int(100), rand_int(100)]; const left = pair[0] > pair[1] ? pair[0] : pair[1]; const right = pair[0] > pair[1] ? pair[1] : pair[0]; return [prefix + left + '-' + right + '=', left - right]; } case 2://乗算: 1~10 × 1~10 { const pair = pairs.splice(rand_int(pairs.length), 1)[0]; const left = pair[0]; const right = pair[1]; return [prefix + left + '×' + right + '=', left * right]; } case 3://除算: 1~100 ÷ 1~10(余りなし) { const pair = pairs.splice(rand_int(pairs.length), 1)[0]; const left = pair[0] * pair[1]; const right = pair[1]; return [prefix + left + '÷' + right + '=', left / right]; } } }); //PDF作成 const pdf = await PDFLib.PDFDocument.create(); const title = '計算' + questions.length + '問' pdf.setTitle(title); pdf.setAuthor('nakazawaken1'); //日本語フォント読込 pdf.registerFontkit(fontkit); const font = await pdf.embedFont(await (await fetch(FONT_URL)).arrayBuffer()); const unitFontWidth = font.widthOfTextAtSize('響', FONT_SIZE) const fontHeight = font.heightAtSize(FONT_SIZE); const lineHeight = (PAGE_HEIGHT - MARGIN * 2) / ROWS; const drawCell = (page, texts/*:String|Number|[String|Number]*/, x/*:Number|'left'|'right'|'center'*/, y/*:Number*/) => { if(!(texts instanceof Array)) texts = [texts]; const widths = texts.map(t => font.widthOfTextAtSize(expand_text(t), FONT_SIZE) + unitFontWidth * PADDING * 2); const totalWidth = widths.reduce((total, width) => total + width); if(x == 'left') x = MARGIN; else if(x == 'right') x = PAGE_WIDTH - MARGIN - totalWidth; else if(x == 'center') x = (PAGE_WIDTH - MARGIN * 2 - totalWidth) / 2; texts.forEach((text, i) => { text = expand_text(text); page.drawText(text, { font: font, size: FONT_SIZE, x: x, y: y - fontHeight / 3 }); page.drawRectangle({ x: x - unitFontWidth * PADDING, y: y - fontHeight * 1.2 / 3 - fontHeight * PADDING, width: font.widthOfTextAtSize(text, FONT_SIZE) + unitFontWidth * PADDING * 2, height: fontHeight * (2 / 3 + PADDING * 2), borderColor: PDFLib.rgb(0, 0, 0), borderWidth: THICKNESS }); x += widths[i]; }); }; //ページ作成 pages = Array.from(Array(Number(location.search.slice(1) || 1))).map(i => false); pages.push(true); pages.forEach(answer => { const page = pdf.addPage([PAGE_WIDTH, PAGE_HEIGHT]); let y = MARGIN + (lineHeight - fontHeight) / 2; //ヘッダ描画 drawCell(page, title + (answer ? '解答' : ''), 'left', Y(y)); drawCell(page, ['氏名', 6, '日時', 6, '試験時間', 6, '点数', 6], 'right', Y(y)); y += lineHeight * 2; //計算式描画 range(0, COLUMNS).forEach(column => { const rows = Math.ceil(questions.length / COLUMNS); range(0, rows).forEach(row => { const question = questions[column * rows + row]; page.drawText(answer ? question[0] + question[1] : question[0], { font: font, size: FONT_SIZE, x: MARGIN + column * COLUMN_WIDTH, y: Y(y + row * lineHeight + fontHeight / 3) }); }); }); }); //表示 location.href = URL.createObjectURL(new Blob([await pdf.save()], { type: 'application/pdf' })); })(); </script> </body> </html> 以下のように作成しました。 記入用ページと解答ページを出力します。記入用ページは ?5 のようにパラメータで数を指定するとページが増えるようにしています。これで例えば5人分印刷する際に印刷設定をかえなくてもそのまま印刷できます。 各問題はランダムで加算、減算、乗算、除算が出力されます。 加算は左辺 0~50、右辺 0~50 のランダムで式が生成されます。 減算は左辺 0~99、右辺 0~99 のランダムで答えは0以上になる式が生成されます。 乗算は左辺 1~10、右辺 1~10 のランダムで同じ式が出ないよう生成されます。 除算は左辺 1~100、右辺 1~10 のランダムで余りなしで同じ式が出ないよう生成されます。 さいごに デモページ 中1, 小5, 小2と父、母で最初は5分間でやって100点が取れれば1分ずつ短縮していく感じでやっています。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

悪徳ひきこもり支援業者一覧アプリケーション

悪徳ひきこもり支援業者一覧アプリケーションを開発しました 一覧表示部分 <!-- 悪徳ひきこもり業者一覧作成システム --> <!-- 新規作成 2021/07/22--> <!-- 作成者 乃木坂好きのITエンジニア--> <!DOCTYPE html> <html lang="ja"> <!-- ヘッダー部分--> <head> <meta charset="utf-8"> <link rel="stylesheet" href="ichiran.css"> <title>悪徳ひきこもり業者一覧作成</title> </head> <!-- ボディー部分--> <body> <h1>悪徳ひきこもり業者一覧</h1> <h2>結果リスト</h2> <?php $pdo = new PDO("mysql:host=127.0.0.1;dbname=jissyu;charset=utf8", "root", ""); // データベースからデータを取得する try{ $sql = "SELECT id,company,address,hiyou FROM hikikomori;"; $stmt = $pdo->prepare($sql); $stmt -> execute(); } catch(PDOException $e){ echo "例外処理が発生しました"; echo $e->getMessage(); } ?> <table> <tr> <th>id</th> <th>会社名</th> <th>住所</th> <th>月額費用</th> </tr> <?php // 取得したデータを表示する while ($row = $stmt -> fetch(PDO::FETCH_ASSOC)) { ?> <tr> <td><?= $row["id"] ?></td> <td><?= $row["company"] ?></td> <td><?= $row["address"] ?></td> <td><?= $row["hiyou"] ?></td> </tr> <?php } ?> </table> <a href="hikikomori.php" id="return">入力画面に戻る</a> </body> <footer> <p class="hattori"> by 乃木坂好きのITエンジニア</p> </footer> </html> 入力フォーム <!-- 引きこもり悪徳業者一覧管理システム --> <!-- 新規作成 2021/07/22--> <!-- 作成者 乃木坂好きのITエンジニア--> <!DOCTYPE html> <html lang="ja"> <!-- ヘッダー部分--> <head> <meta charset="utf-8"> <link rel="stylesheet" href="hikikomori.css"--> <title>ひきこもり支援悪徳業者一覧管理システム</title> <script type="text/javascript"> function check(){ //変数の定義 const company = document.getElementById('company'); const submit = document.getElementById('submit'); if(company.value.replace(/\s+/, '').length == 0 ){ alert('運営会社名が入力されていません。'); } else { if(window.confirm('送信してよろしいですか?')){ // 確認ダイアログを表示 return true; // 「OK」時は送信を実行 } else{ // 「キャンセル」時の処理 window.alert('キャンセルされました'); // 警告ダイアログを表示 return false; // 送信を中止 } } } // --> </script> </head> <!-- ボディー部分--> <body> <?php // データベースに接続する $pdo = new PDO("mysql:host=127.0.0.1;dbname=jissyu;charset=utf8", "root", ""); // print_r($_POST); // 受け取ったデータのレコードを削除する if (isset($_POST["delete_id"])) { $delete_id = $_POST["delete_id"]; $sql = "DELETE FROM hikikomori WHERE id = :delete_id;"; $stmt = $pdo->prepare($sql); $stmt -> bindValue(":delete_id", $delete_id, PDO::PARAM_INT); $stmt->execute(); } // 受け取ったデータを書き込む if ((isset($_POST["company"])) && (isset($_POST["address"])) && (isset($_POST["hiyou"]))) { try{ $company = $_POST["company"]; $address = $_POST["address"]; $hiyou = $_POST["hiyou"]; $regist = $pdo->prepare("INSERT INTO hikikomori(company,address,hiyou) VALUES(:company,:address,:hiyou)"); $regist ->bindValue(":company", $company); $regist ->bindValue(":address", $address); $regist ->bindValue(":hiyou", $hiyou); $regist->execute(); } catch(PDOException $e) { echo "例外処理が発生しました"; echo $e->getMessage(); } } ?> <h1>引きこもり悪徳業者一覧アプリケーション</h1> <h2>引きこもり悪徳業者一覧入力フォーム</h2> <form id = "entry" action="hikikomori.php" method="post" role="form" onSubmit= "return check()"> <div class="form-group"> <dd>ひきこもり悪徳業者名を入力してください <dt> <span class="must"> * </span></dt> <dd> <label>ひきこもり悪徳業者名</label></dd> <dd> <input type="text" name="company" id="company"></dd> </div> <div class="form-group"> <dd>住所を入力してください <dd> <label>住所</label></dd> <dd> <input type="text" name="address" id="address"></dd> </div> <div class="form-group"> <dd>月額の費用を入力してください <dd> <label>月額の費用</label></dd> <dd> <input type="text" name="hiyou"></dd> </div> <p></p> <button type="submit" id="submit" onMouseOver="changeColor()" onMouseOut="revertColor()">データ登録</button> <script> function changeColor(){ document.getElementById('submit').style.backgroundColor = 'yellow'; } function revertColor(){ document.getElementById('submit').style.backgroundColor = null; } </script> </form> <a href="hikikomori_ichiran.php" class="ichi">ひきこもり支援悪徳業者一覧</a> <h2>一覧リスト</h2> <?php // データベースからデータを取得する $sql = "SELECT id,company,address,hiyou FROM hikikomori ORDER BY id DESC;"; $stmt = $pdo->prepare($sql); $stmt -> execute(); ?> <table> <tr> <th>id</th> <th>ひきこもり支援悪徳業者名</th> <th>住所</th> <th>月額費用</th> </tr> <?php // 取得したデータを表示する while ($row = $stmt -> fetch(PDO::FETCH_ASSOC)) { ?> <tr> <td><?= $row["id"] ?></td> <td><?= $row["company"] ?></td> <td><?= $row["address"] ?></td> <td><?= $row["hiyou"] ?></td> <td> <form action="hikikomori.php" method="post"> <input type="hidden" name="delete_id" value=<?= $row["id"] ?>> <button class="delete" type="submit" onclick="deleted()">削除</button> </form> </td> </tr> <?php } ?> <script language="javascript" type="text/javascript"> function deleted(){ if(window.confirm('データを削除してよいですか?')){ // 確認ダイアログを表示 return true; // 「OK」時は送信を実行 } else{ // 「キャンセル」時の処理 window.alert('キャンセルされました'); // 警告ダイアログを表示 return false; // 送信を中止 } } </script> </table> <a href="../index.html" class="menu">メニュー画面に戻る</a> </body> <footer> <p class="hattori"> by 乃木坂好きのITエンジニア</p> </footer> </html>
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

サイト言語変換の表示

▪️ 今回はサイトに言語表記の変換機能を表示する方法を紹介 例 ] 日本の遺産を紹介している日本遺産ポータルのサイトを見ていただければわかりやすいと思います。右端の方に言語を日本語から英語、英語から日本語に変換できる場所が存在します。 ▪️ 言語変換機能の表示 JPと書かれているコードは日本語表記を表しています。 ↓ 英語表記の場合はどうしたら良いのか? 上記の例で挙げた日本遺産ポータルサイトでは英語表記に変える際、英語版のサイトと日本語版のサイトを紐付けしていました。 気になる方は日本遺産ポータルサイトで検証を行って見てください。 今日の投稿は以上です。 wagaでした!
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

アプリ作成②「じゃんけんゲーム」

【作成の過程】 次に取り組んだのは、昔ゲームセンターで遊んだ「じゃんけんポンっ」のゲーム作成。 目指すイメージは決まっているが、そこまでどういうプロセスをたどるかは、完全にオリジナル。 とりあえず、基本的なアプリ設計過程と同じように、要件定義→設計→実装→テストというウォーターフォール型の行程をたどってみた。 要件定義は、ただじゃんけんで勝敗を決めるゲームを作るというごくごく単純なものなので難しくない。 設計では、機能設計で実装したい機能を列挙して、データベース設計、画面設計とアプリのイメージを細分化・具体化していった。 そして、実装を始めると、この画面があった方がいいとか課題が出てきて、当初の設計の甘さを感じた(笑) 最終的にテストをして、最低限の形にはなったかなという感じ。 まだまだ、デザインがチープだったり、実装したい機能(ルーレット、対戦モード、コイン複数枚がけ…)はあるが、今後の課題ということで、 まずは、オリジナルのアプリを作り、それを形にできたことのうれしさを感じた。 【アプリの概要】 小さい頃にゲームセンターで、わずかなコインを握りしめて白熱した「じゃんけんゲーム」をプログラミングで再現した。 勝った時は歓喜し、負けた時は絶望に打ちひしがれて、帰路についた。なぜ、あの頃はあんなに夢中になれたんだろう。皆さんが童心に帰ることができればいいですね。 【主な機能】 ・ユーザー登録機能 ・ユーザーログイン機能 ・画像ファイルアップロード機能 ・ゲーム機能 ・ランキング表示機能 【画面一覧】 ・ユーザー登録画面 ・ユーザー登録確認画面 ・ユーザー登録完了画面 ・ログイン画面 ・ゲーム画面 ・ゲーム結果画面 ・コイン獲得画面 ・ランキング画面 【開発環境】 ・CSSフレームワーク:Bootstrap ・言語:PHP ・DB:MySQL 【苦労した点】 ・ゲストモードの実装(どのような方法をとればいいか試行錯誤し、結果的にguestをデータベースに登録し、ゲストボタンを押した際、guestのデータを取得しアプリを使えるようにした。※上書きは許容しない) ・コイン枚数の画面間引継ぎ方法(セッションの受け渡しをできるだけシンプルなコードで表現したかったが…) 【今後搭載したい機能】 ・対戦モード(人間二人で使用) ・コンピューターの出し手や、獲得するコインを、ルーレットで決定させる。 ・2枚の3枚betや、勝ったコインを元手にチャレンジができ、ハイリスクハイリターンが狙える。 【アプリURL】 ・じゃんけんゲーム ・ソースコード
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

アプリの作成①「メッセージ投稿アプリ」

【作成の過程】 今まで学習した基礎的な知識を基に、オリジナルアプリの作成を始めた。 まずは、PHPの章の学習で使ったUdemy教材をベースにデザインやゲストの実装等アレンジし、「メッセージ投稿アプリ」を作成した。 今までは、動画で提示される課題の通りのものを作っていたが、 少しでもオリジナル要素を加えようとすると、正解がないわけで、どうしたらいいのかいろいろと考え込んでしまったが、 ひとまず形にし、デモデータを搭載した。 【アプリの概要】 複数のユーザーがメッセージを投稿・共有できるアプリ 【主な機能】 ・ユーザー登録機能 ・ユーザーログイン機能 ・画像ファイルアップロード機能 ・メッセージ投稿機能 ・メッセージ返信機能 ・メッセージ一覧表示機能 ・メッセージ詳細表示機能 ・ページネーション機能 【画面一覧】 ・ユーザー登録画面 ・ユーザー登録確認画面 ・ユーザー登録完了画面 ・ログイン画面 ・メッセージ投稿・一覧表示画面 ・メッセージ詳細画面 【開発環境】 ・CSSフレームワーク:Bootstrap ・言語:PHP ・DB:MySQL 【今後搭載したい機能】 ・メッセージ修正機能 ・いいね機能 【アプリURL】 ・メッセージ投稿アプリ ・ソースコード
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Springboot+Tymeleaf+Mybatis+MySQLでのCRUD処理実装(基本)その2 画面周り

前回の続き(画面周りの実装) 前回記事→https://qiita.com/dende-h/items/31fc0af17e75cd713468 SpringbootでCRUD処理の実装  HTMLのコード top.html(最初に表示される画面) [html xmlns:th="http://www.thymeleaf.org" ]はTymeleafを使うためのお作法。忘れず付けること。 <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" > <head> <meta charset="UTF-8"> <title>新規登録ページ</title> </head> <body> <h1>S.O.N.G.所属シンフォギア奏者データベース</h1> <h3>新奏者登録</h3> <form th:action = "@{/user/add}" th:method = "post"> <div> <input type = "submit" value = "TO SING UP FORM" style = "width: 150px"/> </div> </form> <h3>奏者検索</h3> <form th:action = "@{/user/search}" th:method = "get"> <div> <input type = "submit" value = "TO SEARCH FORM" style = "width: 150px"/> </div> </form> <h3>全奏者リスト</h3> <form th:action = "@{/user/list}" th:method = "post"> <div> <input type = "submit" value = "PLAYER LIST" style = "width: 105px"/> </div> </form> </body> </html> player_search.html(ID検索画面) 検索結果は同じ画面で表示。[th:if="${user_info}"]を使って検索結果が入っているときだけ表示する 。 DELETEボタンとUPDATEボタンはそれぞれ、結果のIDがURLのパスに入るようにしている。 <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" > <head> <meta charset="UTF-8"> <title>ユーザー情報検索</title> </head> <body> <h1>S.O.N.G.所属シンフォギア奏者情報検索</h1> <h3>奏者検索</h3> <form th:action="@{/user/id_search}" th:object="${user_info}" th:method="post"> <div> 奏者No.入力:<input type="text" name="id" size="40"/> </div> <div> <input type="submit" value="SEARCH" style="width: 100px"/> </div> </form> <form th:action = "@{/user}" th:method = "get"> <div> <input type = "submit" value = "TO TOP" style = "width: 100px"/> </div> </form> <div th:if="${user_info}"> <table th:object="${user_info}"> <tr> <th class="cell_title">オーダー:</th> <td th:text="第 + *{id} + 奏者" ></td> </tr> <tr> <th class="cell_title">適合者:</th> <td th:text="*{name}"></td> </tr> <tr> <th class="cell_title">GEAR:</th> <td th:text="*{symphogear_name}"></td> </tr> </table> <table> <tr> <td> <form th:action = "@{/user/delete/id={id}(id=*{id})}" th:method = "delete" th:object = "${user_info}"> <input type = "submit" value = "DELETE" style = "width: 75px"/> </form> </td> <td> <form th:action = "@{/user/conf/id={id}(id=*{id})}" th:method = "put" th:object = "${user_info}"> <input type = "submit" value = "UPDATE" style = "width: 75px"/> </form> </td> </tr> </table> </div> </body> </html> list.html(全件表示) 基本的にはplayer_search.htmlとほぼ一緒。 <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" > <head> <meta charset="UTF-8"> <title>ユーザー情報検索</title> </head> <body> <h1>全奏者リスト表示</h1> <form th:action = "@{/user}" th:method = "get"> <div> <input type = "submit" value = "TO TOP" style = "width: 100px"/> </div> </form> <div th:if="${users_info}"> <table th:each="users_info:${users_info}" th:object="${users_info}"> <tr> <th class="cell_title">オーダー:</th> <td th:text="第+*{id}+奏者"></td> </tr> <tr> <th class="cell_title">適合者:</th> <td th:text="*{name}"></td> </tr> <tr> <th class="cell_title">GEAR:</th> <td th:text="*{symphogear_name}"></td> </tr> <table> <tr> <td> <form th:action = "@{/user/delete/id={id}(id=*{id})}" th:method = "delete"> <input type = "submit" value = "DELETE" style = "width: 75px"/> </form> </td> <td> <form th:action = "@{/user/conf/id={id}(id=*{id})}" th:method = "put"> <input type = "submit" value = "UPDATE" style = "width: 75px"/> </form> </td> </tr> </table> <br> </table> </div> </body> </html add_player.html(新規登録フォーム) <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" > <head> <meta charset="UTF-8"> <title>新奏者登録</title> </head> <body> <h2>新適合者登録画面</h2> <form th:action="@{/user/add_comp}" th:object="${user_add}" th:method="post"> <div> ID : <input type="text" name="id" size="40"/> </div> <br> <div> NAME:<input type="text" name="name" size="40"/> </div> <br> <div> GEAR:<input type="text" name="symphogear_name" size="40"/> </div> <div> <input type="submit" value="SING UP" style="width: 100px"/> </div> <br/> </form> </body> </html> add_comp.html(登録完了のメッセージ表示) 確認のため登録内容が表示されるようにしている。 トップ画面に戻るボタンも表示。 <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" > <head> <meta charset="UTF-8"> <title>登録完了</title> </head> <body> <h1>REGISTRATION COMPLETE!!</h1> <div th:if="${user_add}"> <h3>登録奏者情報</h3> <table th:object="${user_add}"> <tr> <th class="cell_title">オーダー:</th> <td th:text="第 + *{id} + 奏者"></td> </tr> <tr> <th class="cell_title">適合者:</th> <td th:text="*{name}"></td> </tr> <tr> <th class="cell_title">GEAR:</th> <td th:text="*{symphogear_name}"></td> </tr> </table> </div> <form th:action = "@{/user}" th:method = "get"> <div> <input type = "submit" value = "TO TOP" style = "width: 100px"/> </div> </form> </body> </html> conf_player.html(情報編集フォーム) フォーム内に編集前のデータが表示されるようにしている。 <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" > <head> <meta charset="UTF-8"> <title>ユーザー情報変更</title> </head> <body> <h1>奏者情報編集</h1> <table th:object = "${user_select}"> <tr> <th class="cell_title">オーダー:</th> <td th:text="第 + *{id} + 奏者" ></td> </tr> </table> <form th:action = "@{/user/edit/id={id}(id = *{id})}" th:object="${user_select}" th:method = "post"> <label>奏者名:<input type="text" th:field="*{name}"></label><br> <label>GEAR:<input type="text" th:field="*{symphogear_name}"></label><br> <button>EDIT</button> </form> </body> </html> edit.html(編集完了のメッセージ) メッセージとトップ画面へ戻るボタンのみ。 <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" > <head> <meta charset="UTF-8"> <title>ユーザー情報編集</title> </head> <body> <h1>UPDATE COMPLETE!</h1> <form th:action = "@{/user}" th:method = "get"> <div> <input type = "submit" value = "TO TOP" style = "width: 100px"/> </div> </form> </body> </html> delete.html(削除完了のメッセージのみ) メッセージとトップ画面へ戻るボタンのみ。 <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" > <head> <meta charset="UTF-8"> <title>削除完了</title> </head> <body> <h1>DELETE COMPLETE!</h1> <form th:action = "@{/user}" th:method = "get"> <div> <input type = "submit" value = "TO TOP" style = "width: 100px"/> </div> </form> </body> </html> 感想・気づいたこと とりあえず動くことだけ考えたので、細かいレイアウトとかは気にしていない。 余裕できてきたら画面周りの装飾もいろいろ試そうかと思う。 実装中のエラーがJavaより、htmlのコード間違いの方が多かった。スペル間違いなど見つけにくいので注意。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む