はじめに プログラミング初学者のため、自分の理解できている範囲内で言語化しています。 何か間違っている情報や改善点などありましたら、コメントいただけますと幸いです。?‍♂️ これについて書こうと思ったきっかけ 簡単なお問い合わせ機能を作成しようとしたときに、 form_withのmodel:でモデルのインスタンスを指定したら、 pathが違うというエラーが出たので、url:で指定したら、成功した。 が、、、データベースに情報を保存したかったため、model:でどうしてもやりたかったが エラーがなかなか倒せなかったので、form_withをまとめてみようと思った? 最終的な解決策 今回は、url:も指定してみました html.erb <%= form_with model: @information, url: informations_path, class: 'form' do |f| %> model:を使うと、作ってもいないpathを使おうとしていたので、url:も指定して解決することができた。 モデルだけ指定して、変なpathや、うまくいかない人はこれを試すと良い ちなみにモデルの名前を複数形にしたりすると、このようなエラーになるみたい、、、 私はいろんなとこを確認しても、原因がわからなかったので力技みたいですがこれで解決 url: model:　の違い 大まかな違いは、データベースに情報を保存するかしないかである 保存する　→　model: 保存しない　→ url: を使う。 これによってコントローラーのストロングパラメーターの記述も変わる url: →　params.permit(:name, :email) model: → params.require(:user).permit(:name, :email) まとめ 今回は、エラーの原因がわからなかったが、とりあえず完成を優先したかったので解決してよしとしたが、原因を知らないのは悔しい、、、 また、仮にurl:のままでお問い合わせ機能を作ったとして、うまく投稿できなかったときのバリデーションのエラーメッセージの表示はどうするのか気になった。 本来であれば、if model.errors.any? を使うから、modelの部分はどうなる？ 疑問がさらに疑問を産んだため、いったんここで打ち切り? また次の機会で投稿してみようと思う腕

はじめに プログラミング初学者のため、自分の理解できている範囲内で言語化しています。 何か間違っている情報や改善点などありましたら、コメントいただけますと幸いです。?‍♂️ 何が起きたのか html.erb <%= form_with model: @information, class: 'form' do |f| %> 簡単なお問い合わせ機能を作成しようとしたときに、 form_withのmodel:でモデルのインスタンスを指定したら、 pathが違うというエラーが出たので、url:で指定したら、成功した。 が、、、データベースに情報を保存したかったため、model:でどうしてもやりたかったが エラーがなかなか倒せなかったので、調べようと思った? このエラーのよくある原因 1.『@モデル名』 の部分が記述ミス 2. コントローラーでインスタンス変数がうまく設定できていない 3. モデル自体を複数形で作ってしまっている まずはそこをチェック。** それ以外の人はこの方法で行けるかも?‍♂️ 最終的な解決策 url:も指定して、正しいpathを記述する html.erb <%= form_with model: @information, url: informations_path, class: 'form' do |f| %> model:を使うと、作ってもいないpathを使おうとしていたので、url:も指定して解決することができた。 モデルだけ指定して、変なpathや、うまくいかない人はこれを試すと良い ちなみにモデルの名前を複数形にしたりすると、このようなエラーになるみたい、、、 私はいろんなとこを確認しても、原因がわからなかったので力技みたいですがこれで解決 url: model:　の違い 大まかな違いは、データベースに情報を保存するかしないかである 保存する　→　model: 保存しない　→ url: を使う。 これによってコントローラーのストロングパラメーターの記述も変わる url: →　params.permit(:name, :email) model: → params.require(:user).permit(:name, :email) まとめ 今回は、エラーの原因がわからなかったが、とりあえず完成を優先したかったので解決してよしとしたが、原因を知らないのは悔しい、、、 また、仮にurl:のままでお問い合わせ機能を作ったとして、うまく投稿できなかったときのバリデーションのエラーメッセージの表示はどうするのか気になった。 本来であれば、if model.errors.any? を使うから、modelの部分はどうなる？ 疑問がさらに疑問を産んだため、いったんここで打ち切り? また次の機会で投稿してみようと思う腕

どうも7noteです。HTMLのコメントアウトをコメントアウトする方法 HTMLでのコメントアウトの方法は以下の通りです。 前後に<!--と-->を書くことでコメントアウトできます。 <!-- ここにメモ書き --> ではこれを使って複数のコメントアウトをまとめてコメントアウトしようとすると・・・うまくいきません。 失敗.html <!-- <!-- 複数行をコメントアウト --> <!-- したいけどうまくいかない --> --> この方法では、一番最後の-->はコメントとして認識されません。 Qiitaでも文字が白くなっているのがわかると思います。白い文字の箇所は表示されてしまうところになります。 コメントアウトをコメントアウトする裏技 ・ <style>タグを使う方法 成功.html <!-- この方法なら複数行コメントアウトできます↓ --> <style> /* <!-- 複数行をコメントアウト --> <!-- できる方法 --> */ </style> ・ <script>タグを使う方法 成功.html <!-- この方法でも複数行コメントアウトできます↓ --> <script> /* <!-- 複数行をコメントアウト --> <!-- できる方法② --> */ </script> 解説 <!-- -->この表記のままではコメントアウトで入れ子構造を組むことはできません。 なので<!-- -->をHTMLとして認識させないようにすることで、HTMLのコメントアウトをstyleやscriptタグ内でコメントアウトすることができます。 phpが使えるファイルであれば、phpでもコメントアウトが可能です。 index.php <?php /* <!-- phpでもコメントアウトをコメントアウトできます。 --> */ ?> まとめ コメントアウトをコメントアウトできるとはいえ、あまり乱用するとソースがめちゃくちゃになってしまうので、 一時的にまるごとコメントアウトしておきたい、というようなケースでの使用のみにとどめて置くほうがよいと思います。 もし消し忘れてしまっていたらぐちゃぐちゃのソースが公開されてしまいますし、なにより他の人が見たときに見にくいソースになってしまうので、乱用は避けましょう。 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ

どうも7noteです。HTMLのコメントをコメントアウトする方法 HTMLでのコメントの方法は以下の通りです。 前後に<!--と-->を書くことでコメントにできます。 <!-- ここにメモ書き --> ではこれを使って複数のコメントをまとめてコメントアウトしようとすると・・・うまくいきません。 失敗.html <!-- <!-- 複数行をコメントアウト --> <!-- したいけどうまくいかない --> --> この方法では、一番最後の-->はコメントとして認識されません。 Qiitaでも文字が白くなっているのがわかると思います。白い文字の箇所は表示されてしまうところになります。 コメントをコメントアウトする裏技 ・ <style>タグを使う方法 成功.html <!-- この方法なら複数行コメントアウトできます↓ --> <style> /* <!-- 複数行をコメントアウト --> <!-- できる方法 --> */ </style> ・ <script>タグを使う方法 成功.html <!-- この方法でも複数行コメントアウトできます↓ --> <script> /* <!-- 複数行をコメントアウト --> <!-- できる方法② --> */ </script> 解説 <!-- -->この表記のままではコメントで入れ子構造を組むことはできません。 なので<!-- -->をHTMLとして認識させないようにすることで、HTMLのコメントをstyleやscriptタグ内でコメントアウトすることができます。 phpが使えるファイルであれば、phpでもコメントアウトが可能です。 index.php <?php /* <!-- phpでもコメントをコメントアウトできます。 --> */ ?> まとめ コメントをコメントアウトできるとはいえ、あまり乱用するとソースがめちゃくちゃになってしまうので、 一時的にまるごとコメントアウトしておきたい、というようなケースでの使用のみにとどめて置くほうがよいと思います。 もし消し忘れてしまっていたらぐちゃぐちゃのソースが公開されてしまいますし、なにより他の人が見たときに見にくいソースになってしまうので、乱用は避けましょう。 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ

やりたいこと ブログやホームページなどに掲載しているPDFファイルをブラウザで表示しようとした。 すると、ブラウザでのタブに、そのPDFのファイル名やPDFのプロパティで設定されているタイトルが表示されてしまっている。 PDFファイルの数が少ないなら、それらを更新すれば済む。 しかし、その数が多いのであれば、タイトルを他のページで設定しているHTMLの<title>タグと統一した内容にしたり、適切なものにしたりできるプログラムを組む必要が生じる。 そのように、意図したタイトルを設定すればSEO効果も期待できるそうだ。 よって、PDFファイルをブラウザで表示する際に、タブに意図したタイトルタグの内容を表示できるプログラムを作成していく。 ブラウザでPDFを開く時、ファイル名ではなく「タイトル」を表示させたい！＜その方法と嬉しい効果＞ | 株式会社Ｅプレゼンス【Webマーケティング＆ブランドコンサルティング】 失敗した方法 考案内容: PDFファイルを表示するPHPプログラムを作成して、それに<title>タグを設定する ブラウザのタブで表示される値は、一般的にHTMLの<title>タグで設定する。 HTMLは他のページと同じような<title>を記入。 PHPではTCPDFやFPDIといったライブラリは使用せず、header()関数とreadfile()関数を使用する。 view_pdf.php <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>PDFを表示する方法｜PDFを表示したいサイト</title> </head> </html> <?php ob_clean(); header('Content-Type: application/pdf'); header('Content-Disposition: inline; filename=sample.pdf'); header('Content-Length:'.filesize('./sample.pdf')); readfile('./sample.pdf'); ?> 結果: 失敗 失敗要因予想 PHPでob_clean()関数使用しているから<html>の内容が削除されてる? ob_clean()関数をコメントアウトしてもPDFは表示されませんでしたが。 HTML部を削除したらPDFは問題なく表示された。タブではPDFのファイル名かプロパティにおけるタイトルが表示されている状態。 HTMLで<head>を指定してもPHPでContent-Type設定しているから共存できないというか、このやり方じゃダメ。 失敗を踏まえて header関数とreadfile()関数を使用しないPDFファイルの読み込み方法を考える必要がある。 TCPDFとFPDIを使えばできるかも? HTMLの<title>タグを使う必要があるのか? PDFのプロパティにおけるタイトルがブラウザのタブに表示されているのだから、PDFのプロパティを更新すれば良いのでは? 解決した方法 改善点 PDFの読み込みと出力にはTCPDFとFPDIライブラリを使用する。 HTMLの<title>タグは使用しない。 PDFのプロパティにおけるタイトルを更新する。 コード PHPでPDFファイルを編集する – SAT Staff Blogを参考に作成。 TCPDFとFPDIの導入方法もここを参考に。 view_pdf.php <?php // TCPDFとFPDIライブラリ読み込み require_once './TCPDF/tcpdf.php'; require_once './FPDI/src/autoload.php'; // 新規PDFを作成 $pdf = new setasign\Fpdi\Tcpdf\Fpdi(); // 新規PDFのプロパティにおけるタイトルを設定 $title = 'PDFを表示する方法｜PDFを表示したいサイト'; $pdf->SetTitle($title); // 新規PDFのページ設定 $pdf->setPrintHeader(false); $pdf->setPrintFooter(false); $pdf->SetMargins(0, 0, 0); $pdf->SetCellPadding(0); // 表示したいPDFの総ページ数取得 $pages = $pdf->setSourceFile('./sample.pdf'); // 表示したいPDFを読み込み $pdf->setSourceFile('./sample.pdf'); // 新規PDFに表示したいPDFを反映 for($i=1; $i<$pages+1; $i++){ $pdf->AddPage(); $tpl = $pdf->importPage($i); $pdf->useTemplate($tpl,['adjustPageSize' => true]); } // ブラウザに出力 ob_clean(); $pdf->Output('sample.pdf', 'I'); ?> コード解説 処理の流れとしては、新規のPDFを作成し、新規PDFのプロパティにおけるタイトルを設定、新規PDFのページを設定、新規作成されたPDFに対して表示させたいPDFの内容をコピーして、ブラウザに出力というもの。 TCPDFとFPDIを使用すれば $pdf->SetTitle('ブラウザに表示させたいタイトル') で簡単にPDFのプロパティにおけるタイトルを更新できる。 タイトルを設定する - TCPDFの部屋 この解決法における一番の問題点は、新規のPDFファイルを作成しているため、既存のPDFで設定されているサイズ設定などを反映する 必要がある事。 この問題を解決しているのが $pdf->useTemplate($tpl,['adjustPageSize' => true]) の['adjustPageSize' => true]。 これを有効化していることで、表示したいPDFのページサイズ設定を新規作成したPDFにそのまま反映して、出力できるようになっている。 PHPでPDFファイルを出力する | IT底辺脱却ブログ EC-CUBE: クラス FPDI 参考資料 ブラウザでPDFを開く時、ファイル名ではなく「タイトル」を表示させたい！＜その方法と嬉しい効果＞ | 株式会社Ｅプレゼンス【Webマーケティング＆ブランドコンサルティング】 PHPでPDFファイルを編集する – SAT Staff Blog PHPでPDFファイルを出力する方法 │ ゆたブログ タイトルを設定する - TCPDFの部屋 PHPでPDFファイルを出力する | IT底辺脱却ブログ EC-CUBE: クラス FPDI

javascriptやCSSのチェックだけしたいけど、とりあえずHMTL一式ほしい場合の超簡易型テンプレートです。 (余計なものは極力省いています) index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="main.js"></script> </head> <body> ここに内容 </body> </html> style.css @charset "utf-8"; /* CSS Document */ body{ font: 14px/1.6 "Hiragino Kaku Gothic Pro",Osaka,"メイリオ","ＭＳ Ｐゴシック","MS PGothic",Verdana,Arial,sans-serif; margin:0; color:#111111; } main.js $(function(){ console.log(window.location.href); });

何かしら使いたいときにスグ調べちゃうので、ここに残しておきます。 とりあえず、これだけあれば表示はできます。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>タイトル</title> <meta name="description" content="ディスクリプション"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="main.js"></script> </head> <body> <header>ヘッダー</header> <nav>ナビ</nav> <section> <article> ここに内容 </article> </section> <footer>フッター</footer> </body> </html> style.css @charset "utf-8"; /* CSS Document */ body{ font: 14px/1.6 "Hiragino Kaku Gothic Pro",Osaka,"メイリオ","ＭＳ Ｐゴシック","MS PGothic",Verdana,Arial,sans-serif; margin:0; color:#111111; } img{ outline:none; border-style:none; } header{ display: block; color:#FFFFFF; background-color: #7952b3; width:100%; } nav{ width: 100%; border-top: 1px solid #000000; border-bottom: 1px solid #000000; margin-bottom: 5px; } section{ display: block; width: 100%; margin: 20px auto; padding: 1%; background-color: #d9ffe4; } article{ width: calc(50% - 15px); padding: 2%; background-color: #94e07f; } footer{ font-size:.8em; width: 100%; text-align: center; padding-top: 10px; padding-bottom: 10px; background-color: #6f6f6f; color:#111111; } main.js $(function(){ console.log(window); console.log(window.location.href); });

HTML meta要素 metaタグはその文書に関する情報（メタデータ）を指定して、 ブラウザや検索ロボットに知らせるためのタグである メタデータとは、“情報に関する情報”のことだが、HTMLの仕様では“その文書に関する様々な情報”を意味する head ページのタイトルや説明文、使用する外部のファイルのリンクなど、ページの情報を記述する ブラウザーには表示されない mailto: メールアドレスへリンクをはる時はhref属性に「mailto:」と記述し、続けて送り先のメールアドレスを入れる

概要 JavaScriptの役割とJSの主なアウトプットについての記事です。 JSできること JSでできることは以下になります。 ①ユーザーが入力した情報を含むWebページ上の情報を読み取る。 ②ユーザーからのアクションによって処理を呼び出す。 ③Webページを書き換える。 ③Webページに動きを与える。 ④情報をもとにブラウザのストレージに記録する。*ストレージとはデータを保存する場所のことです。 JS出力までの流れ インプットからアウトプットまで ①イベントの発生(ユーザがクリックしたとき、もしくはスライドしたときなど) ②インプット(HTML/CSSから情報を読み取る) ③加工(イベントに伴う処理、情報からの計算など) ④アウトプット(HTML/CSSを書き換える、処理に伴う結果を出力する) 大事なポイント JSを書くときに最低限必要になるのは3つです。このポイントを押さえながら、コードを書いていくことをおすすめします。 ①HTML/CSSの情報を読み取る ②その情報をもとに加工 ③HTML/CSSを書き換える 具体的な書き換え ①タグに書き込まれたテキストの書き換え ②要素の追加、削除 ③タグ属性を書き換える （例） index.html <img src="image.png" > srcが属性値、image.pngが属性値になります。 ③CSSの値の変更 （例）テキストの色、背景画像の変更 具体的な情報の読み取り ①郵便番号の読み取り ②入力文字数の読み取り ③ブラウザの開かれた時間 アウトプットの場所 JSの主なアウトプットは以下のようになります。 ①コンソールにアウトプット ②ダイアログボックス ③HTML/CSSへのアウトプット 出力してみよう では、早速出力していきましょう。 index.js console.log('HELLO!'); ブラウザのコンソールタブにHELLOと出力されました！ このconsoleからオブジェクトが始まっています。 オブジェクト <<誰々は何何をどうしなさい>> ①console　▶オブジェクト (history,document,location,windowなど) オブジェクトはJSが指示を出す相手になります.つまり誰にの部分になります。 ②('HELLO!') ▶パラメータ 指示に必要な情報になります。何々をに当たります。 ちなみに'',""どちらでも良いです。 index.js console.log("It's OK"); しかし、このように文章中に'シングルクォーテーションが入る場合などはダブルクオーテーションにしないとエラーの原因になります。 使い分けましょう。 カッコ内にも種類があります。 index.js console.log('あいうえお'); //文字列　あいうえお console.log('3+2');　　//文字列3+2 console.log(3+2); //数式5 と表示されます。 ③log('HELLO!')　▶メソッド オブジェクトにさせたいことです。どうしなさいに当たります。 ()内のテキスト、数式の計算をさせます。 文字と文字列 あ▶文字 あいうえお▶文字列 文字列結合といいます index.js console.log('チョコ' + 2 + '枚'); // チョコ2枚

JQueryでページスクロールしたら、要素がふわっとフェードインするJQueryを実装した。 HTML <div class="fadeIn">test</div> <div class="fadeIn">test</div> scroll.js $(window).on('load scroll', function (){ var box = $('.fadeIn'); var animated = 'animated'; box.each(function(){ var boxOffset = $(this).offset().top; var scrollPos = $(window).scrollTop(); var wh = $(window).height(); //画面内のどの位置で処理を実行するかで「100」の値を変更 if(scrollPos > boxOffset - wh + 100 ){ $(this).addClass(animated); } }); }); CSS .fadeIn { transition: 1.5s; opacity: 0; transform:translatey(100px); } .fadeIn.animated { opacity: 1; transform:translatey(0px); } これで、HTMLでfadeInのクラスが付与された「test」という文字が スクロールするとふわっと下からフェードインするようになります。 JQueryでスクロールするとfadeInというクラスにanimatedというクラスが追加されるようにしてあるので、 CSSで指定している●pxの部分が、フェードインする動きの幅になるイメージです。 transformを使った方が良い transform:translatey(●px）;ですが、 最初はmargin-topにしていました。 CSS .fadeIn { transition: 1.5s; opacity: 0; margin-top: 100px; } .fadeIn.animated { opacity: 1; margin-top: 0px; } こんな感じで。 そしたら、ページ内リンクの位置がズレる・・・！ margin-topであった100pxがスクロールすることでanimatedクラスが追加されて、なくなってしまうからですね。。 transformはあまり使ったことありませんでしたが 勉強になりました◎

thymeleaf内で使う演算子について htmlでthymeleafを使えば変数の指定ができると知り、「htmlに渡したリストのn番目のメッセージ内容を取得する」といった使い方をしていたところの問題が発生。 具体的には20人毎に１ページのスライダーを使用していた時の話で 1ページ目　1～20人目 2ページ目　21～40人目　といったもの。 上記のリストの情報を取得するために「n番目」の指定が必要だったのでnを変数として扱った。 例 <div th:text="${list.get( ${stat.index} + (20 * ${i}) ).getMSG()" class="message"></div> 上記のような書き方を行った際、whiteLabelエラーが表示された。 ${i}の指定が間違っているのはないか？と思い html <div th:text="${list.get( ${stat.index} + (20 * 1) ).getMSG()" class="message"></div> このように直接数字を書いてみたがエラーは解消されず・・・何故？？ いろんな記事を検索してみるも同じような現象に出会えず。 他にも()を増やしたり減らしたり、{}を増やしたり減らしたり、演算子を別のものに変えたり・・・と、途方もなくガチャガチャ弄っていたが一向に改善なし。 力技で動作させてみる方法に切り替えた。 無理くり改善させたコード <div type="hidden" th:with="msgNum = ${stat.index} + 20 * ${i}"> <div th:text="${list.get(msgNum)" class="message"></div> </div> このように計算を変数に入れてしまえば想定通りの動きになった。 ただ書き方が気に入らない・・・なんかヤダなという思いが消えず・・・ 推測として thタグ内で使える変数の数に指定がある？ {}内で使える演算子の数に指定がある？ 等が原因なのでは？と考えている。 今後原因がわかれば追記なりで詳しく説明していきたいと思う。