こんにちは、ハヤマです。 今回は、少しずつ普及し始めている「バリアブルフォント」について学んでいきたいと思います。 バリアブルフォントとは？ Adobe・Apple・Google・Microsoftが共同で開発した新しいフォントの概念のことで、通常、フォントファイル…

こんにちはナカムラです。 今回はYoutubeの動画を使って、背景に動画を敷いてみたいと思います。 実装する機能としては以下の2点になります。 自動再生 ループ レスポンシブを想定して、スマホにも対応するように作ります。 その場合は、YouTubeの「埋め込み…

こんにちは！ドイです。 GWが終わり、身も心もスッキリしないような。。 ハイテンションな筋トレ動画を見つけたので、運動しつつ調子を戻したいと意気込むこの頃です。 さて、前回の記事ではEC2の立ち上げをしたかと思います。 こちらが前回の記事です。 tec…

こんにちは、コバヤシです。 今回は前回書いた記事「Laravel8でLivewireを試してみる：実践編」に続いてLivewireのライフサイクルについて書いていきます。 tech.arms-soft.co.jp ライフサイクルとは 簡単に言えば、ライブラリが読み込まれて、すべての処理…

こんにちは、ナカムラです。 今回は横スクロールが発生する状態で、pisition:fixed（もしくはabsolute）で位置を固定した要素を追従させるJavaScriptのご紹介をします。 レスポンシブ対応のサイトとはいえ、スマホのサイズから一般的なPCのサイズまで全ての…

こんにちは、ハヤマです。 デザインを行う上で、情報を直感的に表現したり、装飾のアクセントとして配置したりと活用頻度の高いアイコン。 今回は、汎用性のあるシンプルアイコンやフラットデザインアイコンのほか、ジェネレートタイプやドット絵といった変…

こんにちは、ユアサです。 今回は、最近やっと使い慣れてきたbackgroundプロパティ（以下backgorundと表記します）について、どのような値を指定できるのかまとめたいと思います。というのも、backgroundは色、画像、位置などを一括指定※できるプロパティな…

こんにちは！ドイです。 ここ１ヶ月でだいぶ暖かくなってきましたね。 普段はリモートで仕事をしているので、たまに外に出る際の服装の選択が難しいこの頃です。 さて、前回の記事では、IAMユーザーを作成しました。 こちらが前回の記事です。 tech.arms-sof…

こんにちはコバヤシです。 今回は以前書いた記事「Laravel8でLivewireを試してみる」の実践編を書いていきます。 （Laravel9がリリースされましたが、8で進めます。。） tech.arms-soft.co.jp 前回は、コンポーネントとviewで値を連動して表示するまでをやり…

こんにちは、ユアサです。 以前業務で要素同士の重なり方について、自分ではうまく思ったようにコーディングできなかったことがありました。z-indexプロパティを使ったはいいものの、なぜかそのスタイルが反映されず一体何が原因なのやら・・・・。 個人的に…

こんにちは、ハヤマです。 2022年1月23日に、フォントメーカーのフォントワークス株式会社が「MOJICITY（もじシティ）」というサイトを公開しました。 テーマは“「自分らしいフォントを自由に楽しめる世界をつくる」ために生まれた実験仮想都市”。こちらでは…

こんにちは、ナカムラです。 今回は、setTimeOutのクリアの仕方を紹介しようと思います。 setTimeOutは一定の時間が経ったら処理を開始するメソッドです。 ロード後に少し時間を置いてからアニメーションを実行するなどの使い方ができます。 さて、設定した…

こんにちは！ドイです。 コロナ禍でリモートワークが浸透し、外に出る機会もめっきり減りました。 気付けば花粉症の季節が到来し、季節の移ろいを身をもって感じた次第です；； さて、前回の記事ではAWS導入編と題して、AWSアカウントを作成し、IAMという概…

こんにちは、コバヤシです。 今回は簡単にブロックエディタを導入できるEditor.jsについて書きたいと思います。 ブロックエディタとは WordpressのGutenbergで使われている、コンテンツをブロック単位で管理して記事を作成していくタイプのエディタです。 Gu…

こんにちは、ユアサです。 CSSでホバーアクションを組む際、やりたい動作は決まっているのにうまく書けない、他のホームページとちょっと差をつけたいけど組み方が・・・と悩んでいた経験は一度はあるかと思います。僕も最近担当した案件でホバーアクション…

こんにちは、ハヤマです。 デザインデータをもとにコーディングを行った際、カラーコードなどの値はデータに忠実に作成しているのに、「デザインデータと色味が違う」となってしまったことはありませんか？ それ、デザインデータの共有時に大事な情報を共有…

こんにちは、中村です。 コーディングをしていて、どうも画像がぼけるなぁ、ということはないでしょうか。 単純に画像サイズが足らないのが原因なら書き出しサイズを直せば良いです。 問題は、適正サイズに書き出しているのにぼけてしまう時です。 スマホや…

こんにちは！ドイです。 先週まで、PHPの配列操作の関数について勉強していました。今回から少し趣向を変えまして、今後数回に渡ってある目標に向かって勉強していきたいと思います。PHPの配列操作の関数については、また頃合いをみて更新できればと思います…

こんにちは、コバヤシです。 今回はCKFinderでLaravelの認証を使う方法についてです。 以前も少し書いたのですが、最新のCKFinderでは少しコツが必要だったので改めて書きたいと思います。 素直にこちらを使っておけという話は無しで。。 github.com CKFinde…

新年明けましておめでとうございます！ユアサです。 今年もarms inc. Engineer's Blogをどうぞよろしくお願いします。 今回は今までを振り返って、コーディングで自分も最初の頃はよくつまづいていたCSSの基本や解決策の例などを改めて書きまとめてみようと…

こんにちは、ハヤマです。 今回は、Illustratorを使ってWebデザインを行う際のアプリケーション設定についてご紹介します。 はじめに 個人的に、IllustratorでWebデザインを行う方というのはDTP出身のデザイナーさんに多いのではないかなと思っています（か…

こんにちは、ナカムラです。 前回の記事で、少しだけスクロールの操作を行いました。 今回は、スクロールに関するプロパティとメソッドについて、より詳しく整理していきたいと思います。 tech.arms-soft.co.jp DEMO プロパティやメソッドを実際に動作させた…

こんにちは！ドイです。 PHP の配列操作の関数を勉強しよう、第二回目です。 ↓前回の記事 tech.arms-soft.co.jp 前回同様、こちらを参考に勉強していきます。 PHP: 配列 - Manual array_flip array_intersect_assoc array_intersect_key array_intersect_uas…

こんにちは、コバヤシです。 今回はLaravel8で非同期処理を試してみました。 テーブルを作成する Laravelで非同期処理をするには「queue（キュー）」を使用します。 このqueueで使うテーブルを作成します。 php artisan queue:table php artisan migrate job…

こんにちは、ユアサです。 アームズに入社してからCSSでのスタイル調整はだいぶ慣れてきました。ですが、以前CSSファイルを触っているときに、冒頭に「@」が付いている見慣れないものを発見し、見つけた当時は何のための記述なのか全然理解していませんでし…

こんにちは、ハヤマです。 今回は、個人的にとてつもなくテンションが上がってしまった「ヒグミン」というフォントについてご紹介します。 「ヒグミン」とは 「ヒグミン」とは、画家のヒグチユウコさんによる手書き文字を基に、アドビのプリンシパルデザイナ…

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

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

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

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