「建設業向け業務管理システム-β版」を作りました。｜DAD UNION – エンジニア同盟
「建設会社向けの業務管理システム-β版」のデモシステムを作りましたのでご紹介します。 現在、随時機能開発・追加・改修中ですが既にご利用の企業様もおります。 建設業向けに特化した「建設業業務管理システムデモ-β版」をご紹介します。 ※デモシステムは機能や表示の確認のために用意しました。それ以外の用途でのご利用はおやめ下さい。こちらの判断でデモシステムを停止させることがあります。 デモシステムは一部機能を利用出来ない様に制限、非表示にしてます。 登録済みのデータはダミーデータとなります。定期的にリセット致します。 デフォルトの登録済みデータは2023年1月のデータしかありません。デフォルトデータで集計を表示する場合は2023年1月の期間を選択して下さい。 個人情報や機密情報は登録しない様にしてください。 予告なくデモシステムを停止させることがあります。 デモシステムは機能や表示の確認のために用
LaravelでのページURL設定、ログイン認証ルーティング、および命名規則の完全ガイド｜DAD UNION – エンジニア同盟
Laravelを使ってWebアプリケーションを構築する際の基本的な要素について説明します。特に、ページURLの設定方法、ログイン認証前後のルーティングルール、ファイル命名規則、およびフォルダ構成に焦点を当てて説明します。 ページURLの設定方法 Laravelではルーティングを使ってページURLを設定します。routes/web.php ファイルでこれを管理します。基本的なルーティングは以下のようになります。 Route::get('/page', 'PageController@index'); この例では、/page URLにアクセスすると、PageControllerのindexメソッドが呼び出されます。 ログイン認証前後のルーティングルール Laravelでは、ミドルウェアを使用して認証を管理します。認証済みユーザーのみがアクセスできるルートを作成するには、authミドルウェアを使
フォームの「input type=”month”」からMySQLで特定月のデータを抽出する方法｜DAD UNION – エンジニア同盟
Web開発では、ユーザーから特定の年月を受け取り、その月に該当するデータをデータベースから抽出することがよくあります。 例えば、HTMLフォームを介してユーザーが年月（例：2023-01）を選択し、この情報を基にMySQLデータベースからその月のデータ（例：2023-01-02、2023-01-28など）を抽出したい場合が考えられます。 この記事では、HTMLフォームのinput type=”month”を使用して送信された年月データをMySQLで処理し、特定の月のデータを抽出する方法について解説します。 SQLクエリの例 HTMLフォームからinput type=”month”を使用してPOSTされる年月のデータ（例：2023-01）を基に、MySQLで特定の月のデータを抽出するためのSQLクエリは次のようになります。この例では、POSTされた年月を変数として使用し、その月の初日から最終
Web開発ガイド:JavaScript vs PHP – エンコード/デコードの最適な選択と実践テクニック｜DAD UNION – エンジニア同盟
ウェブ開発においてエンコードとデコードは、データの安全な送受信や表示に不可欠な要素です。これらのプロセスは、特にセキュリティやユーザーエクスペリエンスに直接的な影響を与えるため、適切な技術の選択が重要です。多くのウェブアプリケーションでは、JavaScriptとPHPのいずれか、あるいは両方でエンコードとデコードを行うことが一般的ですが、これらの言語はそれぞれ独自の特性と利点を持っています。 この記事では、JavaScriptとPHPを使ったエンコード/デコードの選択肢について、それぞれの言語のメリット、デメリット、適用シナリオ、そして実装上の注意点を詳細に検討します。この比較を通じて、ウェブ開発者が自身のプロジェクトに最適な技術を選択するための洞察を提供することを目指します。 エンコードとデコードのプロセスが、どのようにしてウェブアプリケーションのセキュリティと効率を向上させるか、そして
ITエンジニアの矛盾：未来の「楽」のために今を「楽」しむ：エンジニア同盟：エンジニアライフ
ある日、私はコーヒーを飲みながら今までのITエンジニア人生を振り返っていました。初めてパソコンを触った日、当時は、今のように高速インターネットやスマートフォンは想像もできない未来の話でした。 私たちエンジニアは常に「ユーザーが楽になれる」という大義名分のもと、キーボードを叩いています。だけど、面白いことに、私たち自身がその「楽」を実感する暇はないんですよね。なぜなら、次のプロジェクトが待っているから。これはエンジニアの永遠の宿命かもしれません。 考えてみれば、私たちの仕事は「未来の便利さ」を作ること。でも、その未来が来る頃には、また新たな「未来の便利さ」を追い求めている。まるでタイムトラベラーのように、私たちは常に次のステップへと向かっているんです。これはもう、SFの世界だけの話ではありません。実際、我々の手がけた技術は日々の生活を変え、人類の進化に大きく寄与しています。 でも、待ってくだ
SQLデータマスクの秘訣：セキュリティとプライバシーを守るための実践ガイド｜DAD UNION – エンジニア同盟
データのセキュリティとプライバシーは今日のデジタル時代において重要な課題です。特に、膨大なデータベースを扱うエンジニアやデータベース管理者にとって、データを保護することは極めて重要です。 本記事では、SQLを使用した効果的なデータのマスク処理方法について解説します。 データマスクとは？ データマスクとは、元のデータを隠し、読み取りが難しい別の形式に変換するプロセスです。これにより、データの機密性が保たれると同時に、データの実用性は維持されます。たとえば、顧客の個人情報や企業の機密データなど、特定の情報を保護する必要がある場合に使用されます。 基本的なマスク処理 以下は、SQLでの基本的なデータマスク処理の例です。 UPDATE company_tbl SET company_name = 'Confidential'; この単純な例では、company_tblテーブルのすべてのcompan
Web開発を加速！JavaScript、HTML、CSSの圧縮・難読化完全ガイド｜DAD UNION – エンジニア同盟
今回はJavaScript、HTML、CSSのコードをより効率的に扱う方法について紹介します。特に初心者の方々に向けて、コードの難読化と圧縮化の必要性から、それらを実現する具体的な手順、さらには元のコードに戻す方法までをわかりやすく説明します。 ウェブ開発において、コードの難読化や圧縮化は単なるオプションではなく、セキュリティ強化、パフォーマンス改善、そして最終的にはユーザーエクスペリエンスの向上に直結する重要なプロセスです。しかし、これらの技術を適切に適用するには、その背景理解と正しい手法が必要です。 この記事では、まず難読化と圧縮化がウェブ開発においてどのような役割を果たすのかを説明し、それぞれのメリットとデメリットを解説します。 この記事を通じて、初心者の方々がウェブ開発の基本的なスキルを身につけ、より複雑なプロジェクトにも自信を持って取り組めるようになることを願っています。 難読化
RxJS入門ガイド：非同期プログラミングの効率化を実現する方法と実践例【カウントダウンタイマー】｜DAD UNION – エンジニア同盟
RxJSとは RxJS（Reactive Extensions for JavaScript）は、非同期やイベントベースのプログラミングを簡単に行うためのライブラリです。データのストリームを作成し、それに対して様々な操作を適用することで、複雑な非同期処理を扱います。 RxJS RxJSのライセンスと無料利用 RxJSはMITライセンスの下で提供されており、無料で利用できます。これにより、個人や商用のプロジェクトで自由に使用、変更、配布することが可能です。 RxJSのメリットと使いどころ 非同期処理の簡素化: 複雑なタイミングやイベントの処理を簡単に記述できます。 統一されたAPI: プロミス、コールバック、イベントなど様々な非同期パターンを統一的に扱えます。 高い表現力: 豊富なオペレーターを用いて、データの変換や集計、フィルタリングなどが行えます。 注意点とデメリット 学習曲線: RxJ
querySelectorでWeb開発スキルを向上させる！初心者向けインタラクティブなデモ付き｜DAD UNION – エンジニア同盟
querySelectorとは querySelectorは、JavaScriptにおける強力なDOM（Document Object Model）操作機能の一つです。このメソッドは、CSSセレクターを使ってHTML文書から特定の要素を選択するために使用されます。例えば、特定のクラスやID、属性に一致する要素を見つけたい場合、querySelectorを用いて簡単にアクセスできます。 このメソッドは、Webページの特定の部分に動的な変更を加えたり、ユーザーのアクションに応じてページの内容を更新するために広く使われています。例えば、ボタンがクリックされたときにテキストを変更する、特定の条件下でスタイルを変更するなどの操作が可能です。 querySelectorの使用法は非常に簡単で、以下のような形式で記述されます： const element = document.querySelector
年末の静寂、ITエンジニアの哀愁：深夜のモニター越しに見る新年：エンジニア同盟：エンジニアライフ
年の瀬、多くの人がテレビの特別番組を楽しんだり、新年の準備に忙しい中、私たちエンジニアはパソコンに向かい、システムの切替やトラブル対応に追われます。外は華やかなイルミネーション、家族や友人は笑い声を分かち合いながら、私たちはモニターの青白い光の中で新年を迎えるのです。 この時期、ITエンジニアには特別な責任感が生じます。私たちの仕事は、多くの企業や個人がスムーズに年を越せるよう、システムを安定稼働させることにあります。例えば、オンラインショッピングのサイトがこの時期にダウンしたら、どれだけ多くの人に影響を及ぼすことか。そんな重圧の中、私たちは深夜まで働き続けるのです。 しかし、全てが無事に終わった時の安堵感は計り知れません。システムがスムーズに切り替わり、トラブルもなく年を越せた時、それはもう何とも言えない達成感を感じます。そして、少し遅ればせながらのお正月気分を味わいます。年始早々、家族
JavaScript開発でのエラー対処法：初心者向け完全ガイド｜DAD UNION – エンジニア同盟
JavaScriptはウェブ開発における不可欠な言語です。しかし、開発中にエラーに直面するのは避けられません。この記事では、初心者が効果的にデバッグする方法、バグを見つける技術、そして効率的な開発手法を紹介します。 デバッグの基本 デバッグはプログラミングの基本です。エラーを特定し、解決するためには、以下のステップを踏むことが重要です。 コンソールログの使用 console.log()を使用して、変数や計算の結果を確認します。これにより、プログラムのどの部分が期待通りに機能していないかが分かります。 ブレークポイントの設定 ブラウザの開発者ツールを使用して、コードの特定の行にブレークポイントを設定します。これにより、その行が実行される際にプログラムの実行が一時停止し、変数の状態を確認できます。 ブレークポイントはデバッグの中核をなす要素で、プログラムを特定の地点で停止させ、その時点での状態
初心者必見！パソコン＆スマホでJavaScriptを有効・無効にする方法｜DAD UNION – エンジニア同盟
今回はパソコンやスマホのブラウザでJavaScriptを有効または無効にする方法をわかりやすく説明します。JavaScriptとは、ウェブサイトをもっと便利で動的にするためのプログラミング言語です。これを使うと、ウェブサイトはよりインタラクティブになりますが、無効にするとセキュリティが高まることもあります。 それでは、各ブラウザでの設定方法を見ていきましょう。 Windowsパソコンでの設定 Chrome（クローム） 右上の三つの点（メニューボタン）をクリックし、「設定」を選択。 「プライバシーとセキュリティ」をクリックし、「サイトの設定」を選ぶ。 「JavaScript」を見つけて、オンまたはオフに切り替えます。 Microsoft Edge（エッジ） 右上の三つの点をクリックし、「設定」を選択。 「Cookiesとサイトの許可」をクリックし、「JavaScript」を選んで設定。 Fi
IntersectionObserver入門：初心者向けガイド｜DAD UNION – エンジニア同盟
IntersectionObserverとは？ IntersectionObserverは、ウェブページの特定の要素がビューポート（ユーザーの画面）に入るかどうかを非同期で監視するJavaScript APIです。 これにより、スクロール位置に基づいて動的なビジュアルエフェクトを実装できます。 IntersectionObserverを使う場面 遅延読み込み（Lazy Loading）：画像や動画などのコンテンツを、ユーザーがそれらを必要とする時まで読み込まないようにします。 スクロールアニメーション：ユーザーがページをスクロールするときに要素をアニメーションさせる。 インフィニットスクロール：ユーザーがページの最下部に達したときに追加コンテンツを読み込む。 メリットとデメリット メリット パフォーマンスの向上：不要なJavaScriptの実行を減らすことができます。 ユーザーエクスペリエ
初心者社内SEのためのバックアップ戦略：Googleドライブ「共有ドライブ」の活用法｜DAD UNION – エンジニア同盟
今回は、Google WorkspaceのGoogleドライブの「共有ドライブ」を社内ファイルサーバーとして利用する際の、データバックアップの必要性についてご紹介します。 データバックアップはなぜ重要？ 「誤削除」や「システム障害」に備える: 皆さんが作成した大切なデータは、意図せず削除されたり、システムの問題で失われる可能性があります。このような状況に備えるためには、バックアップが必要です。 「法規制」の遵守: 一部の業界では、特定のデータを定期的にバックアップすることが法律で定められています。これを怠ると、法的な問題に直面する可能性があります。 「災害発生時」のデータ復旧: 自然災害や大規模な障害が発生した場合、バックアップがあれば迅速にデータを復旧できます。 では、どのようにバックアップすればいいの？ サードパーティのバックアップツールを使う: 定期的に全てのデータを別の場所に保存し
エンジニア流「簡単にできるよね？」へのカレイドスコープな回答術：エンジニア同盟：エンジニアライフ
システム開発の世界では、私のようなITエンジニアにとって、「この改修って簡単にできるよね？」や「ちゃちゃっとやれるよね？」といった質問は、日常茶飯事です。表面上は単純に見えるこれらの問いかけの背後には、多くの考慮すべき要素が隠れています。言葉の「簡単」がどの程度を指しているのか、それがなかなか掴めないんですよね。 さて、難易度が高そうな開発案件についても、たまに「この開発案件、うちでできるよね？」や「前に似たシステム作ったし、流用すれば簡単でしょ？」なんて聞かれます。こう聞かれると、心の中では「似てるだけで全然違うんですけど...」とつぶやいています。見た目が似ていても、仕様やターゲットが全く異なると、流用はそう簡単ではありません。 でも、質問者はたいてい単純明快な答えを期待していますよね。私としては、その場で何とか答えを出したいところですが、実際には「簡単かどうかは調査しないと...」「
React Nativeでスマホアプリ開発の第一歩を踏み出そう！｜DAD UNION – エンジニア同盟
React NativeはFacebookによって開発された、JavaScriptを使用してネイティブモバイルアプリを構築するためのフレームワークです。この記事では、React Nativeでアプリ開発を始めるために必要な知識、準備、および基本的なサンプルコードを紹介します。 前提とする技術レベルと習得するべきプログラミング言語 技術レベル: プログラミングの初歩的な知識があると良いですが、完全な初心者でもスタート可能です。 習得言語: JavaScriptが中心です。HTMLやCSSの知識も役立ちますが、必須ではありません。 準備すること 基礎知識: JavaScriptの基本的な構文とHTML/CSSの概念を理解しておくとスムーズです。 アイデア: どのようなアプリを作りたいか、簡単なアイデアを持っておくことが重要です。 開発環境のセットアップ OS: Windows, MacOS,
Excelマスターガイド：複数シートでセルの高さを一括調整する方法｜DAD UNION – エンジニア同盟
Excelは、データの整理や分析に非常に便利なツールです。特に、複数のシートにわたるデータを一貫して扱う場合、視覚的に整理された情報は非常に重要です。一貫したセルの高さは、情報の読みやすさを保ち、プロフェッショナルな印象を与えます。 複数シートの選択 複数のシートに同時に変更を加えるには、まずこれらのシートを選択する必要があります。 シートの選択 最初に変更を加えたいシートをクリックします。 次に、Ctrlキーを押しながら、他の変更したいシートのタブをクリックします。 これで、選択したすべてのシートがグループ化され、同時に変更を加えることができます。 セルの高さを調整 次に、セルの高さを調整します。 行の選択 高さを変更したい行を選択します。行番号をクリックすることで、その行全体を選択できます。 行の高さの調整 「ホーム」タブの「セル」グループにある「書式」から「行の高さ」オプションをクリ
初心者向け！Webページにカラフルなコードハイライトを追加するHighlight.js入門｜DAD UNION – エンジニア同盟
Highlight.jsは、Webページ上でソースコードにシンタックスハイライト（色分け表示）を行うためのJavaScriptライブラリです。初心者向けに、その使用方法を簡単に説明します。 Highlight.jsをダウンロード Highlight.jsの公式サイト（Highlight.js）にアクセスします。 「Download」セクションで、必要なプログラミング言語を選択します。選択しなくてもダウンロードできます。 「Download」ボタンをクリックすると、選択した言語のHighlight.jsファイルがダウンロードできます。 HTMLファイルにHighlight.jsを組み込む ダウンロードしたファイル一式内にあるhighlight.jsとdefault.cssファイルをHTMLファイルに組み込みます。headセクションにCSSファイルを、bodyタグの終わり近くにJavaScri
初心者のためのPrism.jsガイド：コードを美しくハイライトする簡単ステップ｜DAD UNION – エンジニア同盟
このサイト内でも使用してますが、Prism.jsを使用する方法を初心者向けに説明します。 Prism.jsは、Webページにプログラミングコードのシンタックスハイライトを提供する軽量で簡単に使用できるJavaScriptライブラリです。以下は、Prism.jsを使う基本的なステップです。 Prism.jsをダウンロード Prism.jsの公式サイト（Prism.js）にアクセスします。 必要な言語、テーマ、プラグインを選択します。 今回は行数を表示するため「Line Numbers」にチェックを入れました。 「Download」ボタンをクリックして、カスタマイズされたPrism.jsとCSSファイルをダウンロードします。 HTMLファイルにPrism.jsを組み込む ダウンロードしたprism.jsとprism.cssファイルをHTMLファイルに組み込みます。これは通常、headタグ内にC
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
初心者必見！簡単コピペで学ぶHTML・URL・Unicodeエンコード/デコード完全ガイド【JavaScript】｜DAD UNION – エンジニア同盟
