お問い合わせフォームを作ってみる -実装編①:入力・確認・完了画面の作成-

こんにちは、ユアサです。 前回までの記事では、お問い合わせフォームを作成していく上で実装したい入力項目やライブラリを紹介しました。今回はそれらを使って、土台の部分となってくる入力画面、確認画面、完了画面を作成していきたいと思います。 ↓前回の…

Webデザインの色を忠実に!カラーマネジメントを理解しよう

こんにちは、ハヤマです。 ストックフォトサービスを提供する「Shutterstock」から、2021年のカラートレンドが発表されました。 選ばれた3色ですが、上品だけれども生命力を感じるナチュラルカラーで、個人的にも好きな配色です。 詳しくはこちら。(英語サ…

JavaScriptで階層の深いハンバーガーメニューを作る

こんにちは、ナカムラです。 今回はスマホサイトではお馴染みのハンバーガーメニューの作り方をご紹介します。 タイトルに「階層の深い」と書きました。 ページ数の多いサイトでは、第2階層、第3階層とメニューが深くなっていきます。 階層が深くなるとメニ…

LaravelでDBからマイグレーションファイルを作成する方法

こんにちは、コバヤシです。 今回はLaravel5.5以降でデータベースからマイグレーションファイルを作成する方法について書きます。 DB->マイグレーションファイル 以前はXethron /migrations-generator があって便利に使っていたのですが、これってLaravel5.4…

お問い合わせフォームを作ってみる -ライブラリ編-

こんにちは、ユアサです。 前回の記事でも記述していた通りフォーム作成をしていこうと思っていましたが、それより以前の記事で紹介したComposerを使用して(どうせなら勉強したことの実践も兼ねて)既存のライブラリを活用していく方向にしようかな?と考え…

[Adobe MAX 2020]Adobe XDに興味があるPhotoshop使いのWebデザイナーにおすすめ!なセッション

こんにちは、ハヤマです。 先週、「Adobe MAX 2020」が開催されましたね。 今年はコロナ禍もありオンラインでの開催となりました。 今回はこのイベントのコンテンツについてお話ししていきたいと思います。 「Adobe MAX」とは? 「Adobe MAX」は、アドビシス…

簡単!Vue.jsでCKEditorを使う方法

こんにちは、コバヤシです。 今回はVue.jsでCKEditorを使う方法を書いていきたいと思います。 CKEditorとは テキストエリアをWYSIWYG形式のエディタに変更するライブラリになります。 ckeditor.com CKEditor4とCKEditor5がありますが、今回はCKEditor4を導入…

脱jQuery!文字量によって表示を制限するJavaScript

こんにちは、ナカムラです。 今回は文字数などのコンテンツ量によって表示を制限するJavaScriptを解説していきます。 jQueryを使わないネイティブでの書き方になります。 ※IEにも対応したい場合は注意点があります。詳しくは解説の中で記載しています。 作り…

お問い合わせフォームを作ってみる -要素・機能編-

こんにちは、ユアサです。 今回は、簡易的ではありますがお問い合わせを想定したフォームの作成をしていきます。 フォーム作成のお手伝いはしたことがありますが、一人で作成したことがなかったので一つひとつ順を追って作成していきたいと思います。 まずは…

Adobe XDでデザイン!プラグインを活用しよう

こんにちは、ハヤマです。 最近、弊社もワイヤーフレーム以外にデザイン制作においてもAdobe XDを用いるようになりました。 Adobe XDのメリットはなんといってもデータの軽さではないでしょうか。 配置画像をどんなに拡大・縮小しても画像自体に劣化が発生し…

脱jQuery!「Shuffle.js」で絞り込み・ソートを実装する

こんにちは、ナカムラです。 今回はjavaScriptのプラグイン「Shuffle.js」を使って絞り込みとソートの実装をしてみたいと思います。jQueryは使用しません。 オプションがいろいろありすぎて読み解くのがなかなか辛かったので 一番シンプルな絞り込みとソート…

Laravelでフォームリクエストバリデーションを使う

こんにちは。コバヤシです。 今回は、Laravelでフォームリクエストを使ったバリデーションについて書きたいと思います。 フォームリクエストバリデーションとは バリデーションロジックを含んだカスタムリクエストクラスです。コントローラーの処理に入る前…

Composerを触ってみる -実践編-

こんにちは、ユアサです。 前回の記事ではComposerのインストールについて書きました。 前回↓ tech.arms-soft.co.jp 今回は基本的なコマンドやその使い所についてまとめます。僕も実際に使っていきたいと思います。 composer require ターミナル等を使用して…

サイト品質に欠かせない!ブラウザチェック

こんにちは、ハヤマです。 今回は、ブラウザチェックについて書いていきたいと思います。 はじめに ブラウザチェックとは、コーディングしたページがブラウザ上で正常に表示されているかを確認する作業のことを指します。 より良いサイトを作るには、サイト…

rel=“noopener”とは?

こんにちは、中村です。 今回はこちらの記事で紹介されている「rel="noopener”」という属性について確認していきたいと思います。 「Firefox 79」が正式リリース ~Windowsで新レンダラー「WebRender」の適用を拡大 - 窓の杜 記事の内容はFirefox79の仕様でr…

PhpStormでCodeSnifferを使う方法

こんにちは、コバヤシです。 今回はPhpStormでPHP_CodeSnifferを使ってPSR12でチェックする方法について書きたいと思います。 PHP_CodeSnifferとは コード規約をチェックするツールです。 Composerでインストール出来ます。 github.com PHP_CodeSnifferをイ…

Laravel 7.x環境でVueを触ってみる 〜情報取得と表示編〜

加藤です。 前回で、Laravel 7.x環境でvue.jsを導入してみました。 tech.arms-soft.co.jp 以降は勉強のため、Vueを使ってタスク管理Webアプリケーションを作成してみようと思います。 環境 PHP 7.3 Laravel 7.0 Node.js v8.12.0 目標・やりたいこと ログイン…

Composerを触ってみる -インストール編-

初めまして、ユアサです。 ちょうど一ヶ月前くらいに入社しました。バックエンド側になりますが、実務でのプログラミングや動作テスト等まだまだ経験不足の初心者です。 色々勉強しながら、初心者目線で書いていけたらと思います。よろしくお願いします! Co…

文字化けPDFをIllustrator上でアウトライン化する方法を試してみた

こんにちは、ハヤマです。 購読している「Adobe Blog」にて、Illustratorの操作で参考になった記事(動画)を見つけたので紹介したいと思います。 記事について 記事はこちら。 blogs.adobe.com ゲストである博報堂プロダクツの河和田将宏さんが、Illustrato…

Edgeのスクロールのがたつきが解消されました!

こんにちは、中村です。 少し前の話になりますが、Edgeがchromiumベースに更新されましたね。 以前のEdgeで固定表示した要素がスクロールした時にがたつく現象がありました。 javascriptを使ってブラウザのスムーススクロール機能をオフにし、 スクロールの…

ビューのロジックを分離!Laravelでview composerを使う方法

こんにちは。コバヤシです。 今回はLaravelでview composerを使って、ビューのロジックを分離する方法を書いていきます。 view composerとは view composerとは、ビューを表示するビジネスロジックをコントローラから分離して記述するための仕組みです。 各…

Laravel 7.x環境でVueを触ってみる 〜導入編〜

加藤です。 前回と前々回で、Laravel 7.xの認証機能を使ってログイン画面を作成してきました。 tech.arms-soft.co.jp tech.arms-soft.co.jp 以降は勉強のため、Vueを触っていきたいと思います。 まずは導入からです。 環境 PHP 7.3 Laravel 7.0 Node.js v8.1…

Photoshopでウェブデザイン!データ作成のポイント

こんにちは、ハヤマです。 今回は、ウェブデザインのデータをAdobe Photoshopで作成する際、データの作りとして気をつけていることをまとめていきたいと思います。 その1:レイヤー名はわかりやすく ページボリュームが多くなると、モジュールやセクション、…

動的サイトで意外と便利!擬似クラス「:only-child」

こんにちは、中村です。 今回はCSSの擬似クラス「:only-child」についてご紹介しようと思います。 擬似クラスとは? セレクタ要素の特定の状態に対してスタイルを当てるためのクラスです。 ユーザーの操作に反応したり、要素の状態によって見た目を変えるこ…

PHPでExcelならこれ!PhpSpreadsheetを使ってみる〜出力編〜

こんにちは。コバヤシです。 前回に引き続き、PhpSpreadsheetについて書いていきます。 今回はExcelファイルの作成です。 前回の記事はこちら。 tech.arms-soft.co.jp まずは作成してみる

Laravel 7.xでマルチ認証機能を作成してみた 2 〜ユーザ登録・パスワード再設定〜

tech.arms-soft.co.jp 加藤です。前回Laravel 7.xでマルチ認証機能を作成し、一般ユーザ用と管理者用とでログイン画面を分けることに成功しました。 今回は登録とパスワードリセット機能をそれぞれに追加していこうと思います。 環境 目標・やりたいこと ユ…

入力フォームをデザインする時に気をつけること

こんにちは、ハヤマです。 最近、お問い合わせなどのフォームのデザインを行う機会が多かったので、制作時に気をつけるべきことや、気づいたことについてまとめていきたいと思います。 入力内容に合わせて幅を設定する 全てを領域の幅いっぱいまで広げる必要…

PHPでExcelならこれ!PhpSpreadsheetを使ってみる〜読み込み編〜

こんにちは、コバヤシです。 今回はとある案件でPHPでExcelファイルを扱う必要が出てきてたので「PhpSpreadsheet」を調査してまとめてみました。 PhpSpreadsheetとは PHPでExcelを操作するライブラリです。Excelファイルの読み込み・作成が出来ます。 以前は…

vue.jsでレコメンドを作ってみた

こんにちは、中村です。 今日はvue.jsを使って簡単なレコメンドを行うコンテンツを作ってみました。 概要 質問の答えに対して、おすすめしたい情報を表示します。 今回はシンプルに質問は2つ用意しました。 2つの答えの組み合わせにより、表示結果が変わりま…

Laravel 7.xでマルチ認証機能を作成してみた

加藤です。弊社にもリモートワークが導入されてからというもの、元々の出不精に一層の拍車がかかった気がしてなりません。(汗) Laravel 7.xでマルチ認証機能を作成してみたので、備忘のために今回はそのことを記事にしようと思います。 環境 PHP 7.3 Larav…