今年も開催!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のフレッ…

Photoshopで綺麗なデザインデータを作ろう!:「CCライブラリ」を活用編

こんにちは、ハヤマです。 今回は、PhotoshopのAdobe Creative Cloudライブラリ(以下、CCライブラリ)を活用した、Webデザインのデータ作りについてご紹介します。 CCライブラリとは Adobe CCのアカウント全体で共有使用できるデザインエレメントの保存ツー…

【第一回】はじめてのDocker

はじめまして。ドイです。 アームズメンバーに加わりました。今後ともよろしくお願いします。 技術ブログを書いていくに当たり、私の目指す方向性が以下に挙げるものです。 「知らない」を、「少し知っている」に格上げする この業界に入りまして2年目ですが…

Vue.jsでドラッグ&ドロップのソートを実装する

こんにちは。コバヤシです。 今回はVue.jsでドラッグ&ドロップでソートする方法について書きたいと思います。 Vue.Draggableをインストールする Vueでドラッグ&ドロップをするならこれっていうくらい定番のライブラリです。 github.com まずこれをインスト…

レスポンシブページでのテキストの改行はどうする?

こんにちは、ナカムラです。 レスポンシブなページではユーザーの環境によって表示される幅が様々です。 スマホのような幅の狭い画面には縦並びに、PCのような幅が広い画面では横並びにするなど、ユーザーに最適なレイアウトに調整していきます。 レイアウト…

お問い合わせフォームを作ってみる -実装編④:入力内容送信後の自動返信メール機能実装-

こんにちは、ユアサです。 前回の記事では、エラー時の処理と値を保持する処理を実装しました。今回は、最後の機能である自動返信メール機能を実装します。 ↓前回の記事 tech.arms-soft.co.jp PHPMailerのインストール PHPMailerはComposerを使用してインス…

使う場合はココに注意!サイドバーのあるWebサイトデザイン

こんにちは、ハヤマです。 今回は、サイドバーのあるWebサイトデザインについて、メリット・デメリットや、コーディングを始める前にデザインの時点で考えておくべき点をまとめていきたいと思います。 サイドバーとは メインコンテンツの横(右・左)にある…

ミスを軽減!Chromeで文章校正ができるプラグイン

こんにちは、ナカムラです。 今回は使ってみて便利だったChromeの拡張機能をご紹介します。 ナカムラは文章校正というのがとても苦手です。 !などの記号や、()は全角に統一するようにしているのですが、 使用しているフォントだったり、文字詰めをしてい…