jClocksGMT.jsを使ってグリニッジ標準時から各国の時間を時計で表示する方法｜DAD UNION – エンジニア同盟
jClocksGMT.jsを使ってグリニッジ標準時から各国の時間を時計で表示するCSS記述 ※時間を時計で表示するエリア（.jcgmt-container）のCSS記述です。必要に応じて変更して下さい。 <style> body { font-size: 16px; text-align: center; } h1{ text-align: center; font-size: 20px; line-height: 1.6em; padding: 20px 0; } p{ padding-bottom: 20px; } .clockarea{ width: 230px; margin: 0 auto; } .jcgmt-container { float:left; padding: 3px; } .jcgmt-container .jcgmt-lbl { font-size:10px;
【更新画面テキストボックス編】LaravelでリレーションDBの1対多のデータに対して更新する方法（多のデータは増減有り）｜DAD UNION – エンジニア同盟
親と子のテーブルデータ用のModelを用意 ※Departmentモデル、Employeeモデルを用意します。 departmentsテーブル（親）のテーブルデータ用Modelの記述 ※Department.phpファイルを用意します。 <?php namespace App; use Illuminate\Database\Eloquent\Model; class Department extends Model { } employeesテーブル（親）のテーブルデータ用Modelの記述 ※Employee.phpファイルを用意します。 <?php namespace App; use Illuminate\Database\Eloquent\Model; class Employee extends Model { } 部署、所属社員の更新フォーム（更新ページ）のviewの記述 ※d
jquery.gridster.jsを使ってドラッグ＆ドロップ可能なグリッドエリアを表示する方法｜DAD UNION – エンジニア同盟
jquery.gridster.jsを使ってドラッグ＆ドロップ可能な複数のグリッドエリアを表示する方法をご紹介します。 jquery.gridster.jsを使ってドラッグ＆ドロップ可能なグリッドエリアを表示するCSS記述 ※jquery.gridster.min.cssファイルを読み込みます。複数のグリッドエリア（.gridster）のCSS記述です。必要に応じて変更して下さい。 <link rel="stylesheet" type="text/css" href="jquery.gridster.min.css"> <style> body { font-size: 16px; text-align: center; } h1{ text-align: center; font-size: 20px; line-height: 1.6em; padding: 20px 0; } p{
jquery.bookblock.jsを使って複数画像を本をめくる様な切替りで表示する方法｜DAD UNION – エンジニア同盟
jquery.bookblock.jsを使って複数画像を本をめくる様な切替りで表示する方法をご紹介します。 過去にページめくり系プラグイン、 「FullscreenBookBlock：ページめくりを導入する方法」 「pageflip.js：本の様にページめくりを導入する方法」 「JavaScriptを使って本の様にページめくりを導入する方法【FlipboardPageLayout】」 をご紹介しましたが、今回は別パターンのページめくりを導入する方法をご紹介します。 jquery.bookblock.jsを使って複数画像を本をめくる様な切替りで表示するCSS記述 ※bookblock.cssファイルを読み込みます。画像切替りエリア（.bb-bookblock）とナビゲーションリンク（.bb-custom-wrapper nav a）等のCSS記述です。必要に応じて変更して下さい。 <link
最適化されたWebページデザイン: Laravel Bladeで個別ページのJavaScriptとCSSファイルを効果的に追記・管理する詳細ガイド｜DAD UNION – エンジニア同盟
以下の記事では、Laravelのビュー管理において、特定のページにカスタムJavaScriptやCSSファイルを適用する方法について解説します。 Laravelは、PHPで書かれた強力でアクセスしやすいウェブアプリケーションフレームワークであり、開発者が使用すると、一般的なWeb開発タスクをより簡単かつ、効率的に実行することができます。 Bladeテンプレートエンジンとは BladeはLaravelに含まれている軽量ながら強力なテンプレートエンジンです。Bladeはテンプレート継承とセクションを強力にサポートしています。 また、BladeビューはPHPコードを直接含めることができ、そのためデータをビューに渡して表示することも可能です。 Bladeファイルの基本 Bladeテンプレートは .blade.php という拡張子を持ちます。 通常、リソースビュー内に格納され、ビューをロードすること
modaal.jsを使って複数のYouTube動画をモーダル表示する方法｜DAD UNION – エンジニア同盟
modaal.jsを使って複数のYouTube動画をモーダル表示する方法をご紹介します。 リンククリックでYouTubeの埋め込み動画（iframe）をモーダル表示します。 modaal.jsを使って複数のYouTube動画をモーダル表示するCSS記述 ※modaal.min.cssファイルを読み込みます。モーダルエリア（#modalarea）とモーダル表示時（.modaal-container）幅やcloseボタン（.modaal-close）のCSS記述です。必要に応じて変更して下さい。 <link rel="stylesheet" type="text/css" href="modaal.min.css"> <style> body { font-size: 16px; text-align: center; } h1{ text-align: center; font-size:
candlestick.jsとbootstrapを使ってチェックボックスをスイッチ風にデザイン表示する方法｜DAD UNION – エンジニア同盟
candlestick.jsとbootstrapを使ってチェックボックスをスイッチ風にデザイン表示する方法をご紹介します。 candlestick.jsとbootstrapを使ってチェックボックスをスイッチ風にデザイン表示するCSS記述 ※bootstrap.min.css、font-awesome.min.css、candlestick.cssファイルを読み込みます。その他は必要に応じて変更して下さい。 <link href="bootstrap.min.css" rel="stylesheet"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"> <link href="candlestick.css" rel="style
Laravel更新画面：oldヘルパーでの配列の効果的な取り扱い｜DAD UNION – エンジニア同盟
Laravelの開発者は日々、多くのユーザーからのフィードバックやデータ入力を扱うことが増えてきています。この中で、特にフォームに関するデータの編集や再表示は重要なトピックとなっています。そんな中、Laravelのoldヘルパーに関する実践的な使い方を以前の記事「【Laravel】oldヘルパーで配列を扱う方法（input、checkbox）」でご紹介しましたが、今回は、さらに更新画面での配列の使用方法にフォーカスして解説していきます。 Laravelのoldヘルパーとは？ Laravelにおけるoldヘルパーは、前回のリクエストでユーザーから受け取った入力値を再表示する際に非常に役立ちます。特に、バリデーションエラーなどでフォーム画面に戻るとき、ユーザーが入力したデータを失うことなく表示できるため、ユーザビリティの向上に寄与します。 更新画面での配列の取り扱い 更新画面で配列をうまく取
turntable.jsを使ってスクロールまたはXY軸カーソル移動で複数画像を切替え表示する方法｜DAD UNION – エンジニア同盟
turntable.jsを使ってスクロールまたはXY軸カーソル移動で複数画像を切替え表示する方法をご紹介します。 複数枚のコマ送り画像を用意して切替表示するとアニメーションみたいに出来ます。回転する3D画像を用意しても良いですね。 turntable.jsを使ってスクロールまたはXY軸カーソル移動で複数画像を切替え表示するCSS記述 ※複数画像を切替表示するエリア（.turntable、.turntable ul、.turntable ul li）のCSS記述です。必要に応じて変更して下さい。 <style> body{ padding: 0; margin: 0; text-align: center; font-size: 16px; } h1{ font-size:20px; line-height:1.6em; text-align:center; padding: 15px 0
clipboard.jsを使ってクリップボードにテキストをコピーする方法｜DAD UNION – エンジニア同盟
clipboard.jsを使ってクリップボードにテキストをコピーするCSS記述 ※クリックするボタン（button）とコピーするテキストエリア（#dvtxt、input）のCSS記述です。必要に応じて変更して下さい。 <style> body{ padding: 0; margin: 0; text-align: center; font-size: 16px; } h1{ font-size:20px; line-height:1.6em; text-align:center; padding: 15px 0 25px 0; } #dvtxt{ font-size: 18px; } input{ padding: 8px; margin: 0 0 10px 0; width: 250px; margin: 0 auto; } button{ margin: 15px; padding:
JavaScript:テキスト値の変更後にon(‘change’)イベントを自動的に起動する実践ガイド｜DAD UNION – エンジニア同盟
現代のWeb開発において、JavaScriptは中心的な役割を果たしています。 この記事では、特定のテキストエリアの値をJavaScriptを使用して変更した後、on(‘change’)イベントを自動的にトリガする方法を詳しく解説します。 具体的には、テキスト入力エリアとボタンを用意し、ボタンをクリックすることでテキストが変更された時にアラートメッセージを表示する方法を学びます。 CSSのセットアップ まずは、ユーザーインターフェースを整えるための基本的なCSSスタイリングを行います。以下はそのための基本的なCSSコードです。 <style> body { margin: 0; padding: 0; font-size: 18px; text-align: center; width:100%; margin:0px; padding:0px; } h1{ text-align: cen
iframe先のページ内文字要素をクリックで呼び出し元のvalueにコピーする方法｜DAD UNION – エンジニア同盟
モーダル表示したiframe先のページ内文字要素をクリックで呼び出し元のvalueにコピーする方法をご紹介します。 過去記事「Bootstrapを使って簡単にモーダル画面を表示する方法」のBootstrapを使ってiframeページをモーダル表示させ、iframe先のページ内文字要素をクリックで呼び出し元のvalueにコピーします。 以下の手順で、クリックした要素の値を呼び出し元の value にコピーする方法を説明します。 呼び出し元のページで、iframe を作成します。iframe の id や src は適切な値に設定してください。 <iframe id="myIframe" src="iframe.html" width="100%" height="200"></iframe> 呼び出し元ページmodal表示箇所（全体）の記述 bootstrap.min.css、bootstr
Laravelでのold関数活用術: inputとcheckboxを使った配列の最適な扱い方｜DAD UNION – エンジニア同盟
LaravelはPHPの人気のあるフレームワークの1つで、効率的にWebアプリケーションを構築するための多くの便利なヘルパー関数を提供しています。 今回の記事では、フォームの入力データを保持するためのoldヘルパー関数を中心に、その使用方法を具体的に解説します。 なぜoldヘルパー関数が必要か？ Webアプリケーションのフォームでは、ユーザーが入力した情報が間違っていた場合やバリデーションエラーが発生した場合に、再度フォームに戻って正しい情報を入力する必要があります。この際、一度入力されたデータが保持されていると、ユーザーは再入力の手間が省けるため、UXの向上に寄与します。 Laravelでは、このような場面でoldヘルパー関数を使用することで、前回の入力値を簡単に取得・表示することができます。 old関数を用いた入力値の保持方法 inputタグの例：複数の住所入力 通常、複数の入力フィー
【Laravel】非同期通信でテーブルデータを検索し取得表示する方法【ajax、response()->json】｜DAD UNION – エンジニア同盟
usersテーブルのテーブルデータ用Modelの記述 ※User.phpファイルを用意します。 <?php namespace App; use Illuminate\Database\Eloquent\Model; class User extends Model { } ?> 非同期通信でテーブルデータを検索し取得表示するID検索ページのviewの記述 ※users.blade.phpファイルを用意します。IDを検索し検索結果として名前を出力表示するページです。 入力フォーム箇所の記述 ※ID検索テキストボックス（user_id）と検索結果（名前）テキストボックス（user_name）を用意します。 <div> <label for="user_id">ID検索</label> <input type="text" id="user_id" name="user_id" value="
【Laravel】リレーションしてる複数テーブルに同時にデータを登録する方法（for、save）｜DAD UNION – エンジニア同盟
親と子のテーブルデータ用のModelを用意 ※Departmentモデル、Employeeモデルを用意します。 departmentsテーブル（親）のテーブルデータ用Modelの記述 ※Department.phpファイルを用意します。 <?php namespace App; use Illuminate\Database\Eloquent\Model; class Department extends Model { } employeesテーブル（親）のテーブルデータ用Modelの記述 ※Employee.phpファイルを用意します。 <?php namespace App; use Illuminate\Database\Eloquent\Model; class Employee extends Model { } 部署、所属社員の登録フォーム（登録ページ）のviewの記述 ※d
Slidebars.jsを使ってサイドバーやプッシュメニューエリアを表示する方法｜DAD UNION – エンジニア同盟
Slidebars.jsを使ってサイドバーやプッシュメニューエリアを表示するCSS記述 ※slidebars.cssファイルを読み込みます。サイドバー以外のエリア（canvas=container）とサイドバーのエリア（off-canvas）のCSS記述です。必要に応じて変更して下さい。 <link rel="stylesheet" href="slidebars.css"> <style> html, body { margin: 0; } h1{ text-align: center; font-size: 20px; padding: 20px 0; width: 100%; line-height: 1.4em; } h4{ padding-top: 15px; } [canvas=container], [off-canvas] { padding: 10px 20px; } [
simpleParallax.jsでのパララックス実装！初心者でも分かるステップバイステップガイド｜DAD UNION – エンジニア同盟
パララックスとは、背景と前景が異なる速度でスクロールされることにより、立体的な動きや深みを感じることができる効果のことを言います。特にWebデザインで人気があり、動きがあることでサイト訪問者の注目を引くことができます。 simpleParallax.jsは、このパララックス効果を簡単に実装することができるJavaScriptのライブラリです。この記事では、simpleParallax.jsを使ってシンプルにパララックスを実装し表示する方法をステップバイステップでご紹介します。 CSS記述の準備 まず、bodyタグの高さを指定してスクロールできるようにします。こちらの例では「height: 1500px」としていますが、内容に応じて適宜変更してください。 <style> body { padding: 0; height: 1500px; text-align: center; } h1{
ScrollMagic.jsを使ってパララックスとページスクロール連動アニメーションを表示する方法｜DAD UNION – エンジニア同盟
ScrollMagic.jsを使ってパララックスとページスクロールと連動したアニメーションを表示する方法をご紹介します。 ScrollMagic.jsを使ってパララックスとページスクロール連動アニメーションを表示するCSS記述 ※normalize.cssファイルを読み込みます。パララックスとスクロールアニメーションエリア（.box1）のCSS記述です。必要に応じて変更して下さい。 <link rel="stylesheet" href="normalize.css" type="text/css"> <style> body { padding: 0; height: 2000px; width: 2200px; } h1{ text-align: left; font-size: 20px; line-height: 1.8em; padding: 15px 50px; } .box1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
tableexport.jsを使ってWebページの表（table）をxlsx、csv、txtファイルでダウンロードする方法｜DAD UNION – エンジニア同盟
Uncaught SyntaxError: “[object Object]” is not valid JSONエラーの回避と解決のアプローチ｜DAD UNION – エンジニア同盟![Uncaught SyntaxError: “[object Object]” is not valid JSONエラーの回避と解決のアプローチ｜DAD UNION – エンジニア同盟](https://cdn-ak-scissors.b.st-hatena.com/image/square/a7256844e21209a2e87bc29ed1cf1d54b69ab444/height=288;version=1;width=512/https%3A%2F%2Fdad-union.com%2Fwp-content%2Fuploads%2F2023%2F06%2Fpic20230629.jpg)
