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

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

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

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

2021年-PHPフレームワーク トレンド比較

こんにちは。コバヤシです。 今回は、2016にやったPHPフレームワークのトレンド比較を改めてやってみたいと思います。 あれから5年どのように変わったでしょうか? tech.arms-soft.co.jp 比較するCMSも前回と同じ以下のフレームワークにしてやってみます。 …

お問い合わせフォームを作ってみる -実装編③:エラー時の処理と値を保持する処理の実装-

こんにちは、ユアサです。 前回までの記事ではValitronを使用した入力内容のバリデーションを実装しました。今回は、前回予告した通りバリデーションでエラーが発生した際に入力画面に戻り、エラー内容が表示される処理を実装していきます。 また、バリデー…

[GoogleFonts]分析データ結果から新たなフォントを開拓:7選

こんにちは、ハヤマです。 前回はGoogleFontsの年間ランキングについて記事を書きました。 tech.arms-soft.co.jp 今回もGoogleFontsのフォントについて調べてみたいことがあったので書いていきたいと思います。 はじめに 前回の記事では、上位5位のフォント…

SNSシェアボタンをオリジナルスタイルで設置する方法2021

こんにちは、ナカムラです。 今回はSNSシェアボタンの設置方法について書こうと思います。 (この記事は2021年1月27日時点での情報になります) よく設置するTwitter、Facebook、LINEについてです。 オリジナルのスタイルで設置する方法と、 シェアの際に本…

とても簡単!Googleスプレッドシートにデータを追加する方法

こんにちは、コバヤシです。 今回はGoogleスプレッドシートにデータを追加する方法について書きたいと思います。 Google Sheet APIを有効にする まずは、Google Sheet APIを使えるようにします。 Google Cloud Platformから新たにプロジェクトを作成し、作成…

お問い合わせフォームを作ってみる -実装編②:入力内容のバリデーション-

こんにちは、ユアサです。 前回までの記事では、入力画面・確認画面・完了画面を作成しました。今回は、このシリーズで紹介したライブラリであるValitronを使ってバリデーション機能を実装していきます。 ↓前回の記事 tech.arms-soft.co.jp ↓前々回の記事(…

分析データから見る、2020年の人気Google Fontsはこれだ!

こんにちは、ハヤマです。 唐突ですが、もう年末。今年は色々とありましたね。 色々とありすぎて、季節感すら追えていません、、。 そんな状態ですが、せめてブログでは時期に合ったネタ?を紹介したいと思います。 はじめに Webサイトデザイン制作において…

vue.jsでHTMLの流し込みを簡単に!コンポーネント化でパターン違いも簡単!

こんにちは、ナカムラです。 スタティックのHTMLページを作成している中で、商品情報など、 同じレイアウトを繰り返すコンテンツがあります。 数が少なければ手作業で書き込めば良いですが、10件、20件ともなるとなかなか大変な作業になります。 そこで今回…

Amazon EC2 Mac Instancesを試してみた

こんにちは、コバヤシです。 11/30(米国時間)、EC2上でmacOSが利用できる「Amazon EC2 Mac Instances」の一般提供が発表されました。 今回は、Mac Instanceを起動して、リモートデスクトップで接続するまでをやってみたいと思います。 今回はこちらを参考…

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

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

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…