JavaScriptで書く、要素のサイズ取得とスクロール

こんにちは、ナカムラです。 新人研修用に要素のサイズ取得について書きたいと思います。 今回は要素の高さを取得し、その要素の半分の高さにスクロールするボタンを作りました。 50%の位置がわかりやすいように、CSSで背景の色を変えています。 アンカーリ…

【PHP】第一回 配列操作の関数を勉強しよう

こんにちは!ドイです。 「こんな関数あったけど、なんだっけ」と調べることが多く、 全てを覚えられないにしろ、引き出しの数を多くしたいなあと思うこの頃です。 本日は、コードを書く上で不可避である、PHPの配列操作の関数について、学んでいきたいと思…

WordPressで独自の管理画面を作成してみる

こんちは、コバヤシです。 普段はWordPressをガリガリ作成することはないのですが、とある案件でプラグインを作成して 独自の管理画面を作る機会があったので、簡単に手順をまとめてみたいと思います。 プラグインのベースを作成する wp-content/pluginsディ…

JSで動作する簡単なカルーセルを作ってみる

こんにちは、ユアサです。 前回はJSのclassListプロパティについて紹介し、クリックしてONとOFFの表示を切り替えるボタンを作りました。予告していた通り、今回はこのプロパティを使って簡単なカルーセルのようなものを作成します。 前回の記事はこちらです…

Adobe XDで「パスのアウトライン化」を使ってみよう!

こんにちは、ハヤマです。 普段はPhotoshopでWebデザインを行うことが多いですが、 履修を兼ね、気になった情報を随時記事にまとめていきたいと思います。 はじめに さて今回は、Adobe XDでパスのアウトラインを取る方法についてご紹介します。 2021年6月、…

JavaScriptでbodyのスクロールを禁止するハンバーガーメニューを作る

こんにちは、ナカムラです。 だいぶ前に階層の深いハンバーガーメニューの作り方をご紹介しました。 tech.arms-soft.co.jp こちらの記事では開閉の処理について書きました。 今回は、メニューを開いた時のスクロールの制御について書きたいと思います。 今回…

【Laravel】Too Many Requestsについて調べてみた

こんにちは!ドイです!! 先日、友人に「Laravelについて、自分の知らないことを知りたい」 と無理難題を言ったとろ 「Too Many Requestsについて知っている?」と見事、私の知らないことについて教えてくれました。 Laravelについて、少しだけ詳しくなった…

今年も開催!PHPカンファレンス2021が楽しみ!!

PHP

こんにちは、小林です。 PHPカンファレンス2021に参加申込をしたので、カンファレンスについて書きたいと思います。 PHPカンファレンスとは PHPカンファレンスは日本で行われるPHPの最大のイベントです。毎年、大田区産業プラザPiOにて行われていましたが コ…

イベントに応じてclass属性を切り替え!JavaScriptのclassListを使ってみる

こんにちは、ユアサです。 前回まではCSSの内容の記事が多かったですが、社内での勉強会でもJSの内容に入ってきたので、今回は勉強会でも習ったclassListについて復習の意味も込めて書きまとめていきます。 classListについて classListは、特定の要素のクラ…

【Google Fonts】2021年8月末、日本語フォントが新たに追加!

こんにちは、ハヤマです。 8月26日、Google Fontsに8つのフォントが加わりました。 Google Fonts News! New fontsGlory, Azeret Mono, Alumni Sans, Urbanist, Allison, Besley, Klee, Kaisei. Upgraded fontsIBM Plex, Kumbh Sans, Work Sans, Mulish, Rut…

SVGの画像の切り抜きとsnap.svgを使ったアニメーション

こんにちは、中村です。 SVGについて、あまり勉強してこなかったので、 今回は気になっていた写真の切り抜きとアニメーションを試したいと思います。 DEMO 作ったのはこちら。 See the Pen SVGの画像の切り抜きとsnap.svgを使ったアニメーション/a> by Nakam…

IEには対応していないけれど、ゆくゆくは使っていきたいCSSプロパティ

こんにちは、中村です。 みなさん、IEはまだ標準対応をしているでしょうか。 オプション対応にされているところも増えてきたと思いますが、なかなか切り離せないのが現状です。 使いたいのに、IEのことを考えるとまだ使えない。でも、使いたい! そんなCSSプ…

FormRequestでバリデーションを行う前に値を操作する

こんにちは、コバヤシです。 今回はLaravelのFormRequestでバリデーションを行う前に、値を操作する方法について書きたいと思います。 FormRequestとは FormRequestはリクエストの処理でバリデーションを行うLaravelの仕組みです。 リクエストの段階でバリデ…

【Lalavel】マイグレーションファイルまとめ

こんにちは!ドイです!! 先日、初めてDB設計をやったのですが、 後からどんどん出てくる型の間違えや、カラム追加… マイグレーションファイルを使って修正しましたので、まとめていきたいと思います。 テーブル作成 upに作成するテーブルについて、 downは…

スクロール時に特定位置でピタッと停止!scroll-snapプロパティについてまとめてみた

こんにちは、ユアサです。 The State of CSS 2020で比較的認知度が低かったCSSのscroll-snapプロパティについて気になったので、今回はこの内容について書きまとめていこうと思います。 scroll-snapって? scroll-snapプロパティは、画面をスクロールさせた…

Adobe XDの作業をスピードアップ!〜後編(スタックについて)〜

こんにちは、ハヤマです。 本日は、前回の記事の続きとして、Adobe XDの機能「スタック」についてご紹介したいと思います。 前回の記事はこちら tech.arms-soft.co.jp スタックとは スタックを使うと、以下の操作を簡単に行うことができます。 要素の横並び…

YouTube IFrame Player APIの使い方 2021

こんにちは、ナカムラです。 今回はYouTubeのIFrame Player APIの使い方のご紹介です。 ご紹介といっても基本機能の使い方なので、リファレンスを読めばわかる程度のものです。 普段あまり使っていないので、いざ使うときにリファレンスを読むのがしんどくて…

【第四回】はじめてのDocker - 番外編

こんにちは。ドイです。 前回はイメージを作成するためのCompose fileについて学びました。 ↓前回の記事 tech.arms-soft.co.jp この業界に入って実は二年目の私です。 コツコツ基本情報技術者試験(FE)の勉強をしております。 仕事の中で、自然と技術に関す…

Composer updateのメモリ不足に対応する

こんにちは、小林です。 今回はLaravelのComposer updateでメモリ不足になった時の対応を書きたいと思います。 発端 いつも通りComposer updateを行ったところ、下記のエラーが出て更新が出来ませんでした。 PHP Fatal error: Allowed memory size of 161061…

画像を引き伸ばさずに表示!object-fitプロパティについてまとめてみた

こんにちは、ユアサです。 少し前の話になりますが、The State of CSS 2020でCSSプロパティがいくつか話題になっていました。 その中でも、今回はobject-fitプロパティについて紹介していこうと思います。 object-fitプロパティの認知度について The State o…

Adobe XDの作業をスピードアップ!〜前編〜

こんにちは、ハヤマです。 今回は、Adobe XDで作業をする際スピーディーに作業するためのポイントをご紹介していきたいと思います。 プラグインを活用しよう プラグインは、用途に合ったものが見つかると作業効率が格段にアップするのでどんどん活用していき…

Intersection Observer APIを使って、ページの最下部までスクロールしたかを判定する

こんにちは、ナカムラです。 前回はスクロール量を計測して、ページの最下部までスクロールしたかを判定する処理をご紹介しました。今回は方法を変えて、Intersection Observer APIを使った場合の処理について書いていきたいと思います。 前回の記事はこちら…

【第三回】はじめてのDocker - Compose fileについて

こんにちは。ドイです。 前回はイメージを作成するためのDocker fileについて学びました。 今回は、Compose fileについて触れていきたいと思います。 ↓前回の記事 tech.arms-soft.co.jp YAMLファイル 「Compose file」よりも「Docker-compose.yml」の方が耳…

Laravel8でLivewireを試してみる

こんにちは コバヤシです。 今回はLaravel8でLivewireを試してみたいと思います。 Livewireとは vue.jsやReactと同じように、ページをリロードすることなくページの更新を可能にするLaravelのパッケージです。 jsを記述することなくリアルタイムな処理を行う…

これから流行るかも?CSSの新しいデザイン手法「ニューモーフィズム」でボタンを作成してみる

こんにちは、ユアサです。 いよいよ梅雨入りしてジメジメした日が続きますね。 さて今回は、昨年にCSSのトレンドになるのではと話題になっていた「ニューモーフィズム」について紹介していきます。 ニューモーフィズムについて ニューモーフィズムは、「New…

Photoshopデザイン効率化の道 〜ショートカットの活用〜

こんにちは、ハヤマです。 突然ですが、皆さんは操作をするときにどれだけショートカットを活用されていますか? 本記事では、“たかがショートカット、されどショートカット”として、 Photoshopでデザインを行う際に活用すべきショートカットについて、おす…

【第二回】はじめてのDocker - Docker fileについて

こんにちは。ドイです。 前回はDockerの概要について触れました。 今回は、Docker イメージを作成するための、Docker fileについて触れていきたいと思います。 ↓前回の記事 tech.arms-soft.co.jp なぜDocker fileは必要か Dockerはコンテナと呼ばれる仮想環…

脱jQuery!ページの最下部までスクロールしたかを判定するjavaScript

こんにちは、ナカムラです。 今回はネイティブのjavaScriptでページ最下部に到達したかどうかを判定する処理を書いていこうと思います。 この処理はボタンを固定表示したページや、記事の終わりにメッセージを表示したいなど、ユーザーの操作に合わせて表示…

LaravelでログインのThrottle機能をカスタマイズする

こんにちは、コバヤシです。 今回は、Laravel(6.x)でログインのThrottle機能をカスタマイズしてみました。 Throttle機能とは Throttle機能とは、ログイン失敗時に失敗した回数を超えた場合にログインロックを掛けて、一定の時間を経過したらロックを解除す…

すぐに使える!フレックスボックスを使って作れるパーツを紹介

こんにちは、ユアサです。 アームズでフロントエンドの見習いとして活動し始めて1ヶ月ほどが経ちます。まだまだ勉強することは多いですが、一つひとつを焦らず段階を踏んで学んでいけたらと思っています。 今回は、自分が勉強していく中で知ったCSSのフレッ…