2022-01-01から1年間の記事一覧

デザイン用語をおさらい!〜○○モーフィズム〜

こんにちは、ハヤマです。 突然ですが、Webデザインの記事などで「グラスモーフィズム」「クレイモーフィズム」「スキューモーフィズム」「ニューモーフィズム」といった「○○モーフィズム」系の名称がよく登場します。 もしくはエンジニアの方でしたら、デザ…

Phpstormの便利機能を使って作業効率化!!

こんにちは!ドイです。 今回はPhpstormのよく使う!という機能をまとめたいと思います。 ショートカットはmacでの操作を前提としています。 検索 ファイル内検索 一番よく使う検索です。ファイル内の検索を行います。 ショートカット:command + F ファイル…

CSSで作る片側だけ可変する背景

こんにちは、中村です。 今回はCSSの話です。 フロントエンドの作業はデザインを下にマークアップとスタイルを作っていくところから始まります。 そこで、最近よく作るレイアウトの組み方をご紹介したいと思います。 片側だけ可変する背景 記事のタイトルに…

まるでWordpress? Editor.jsを試してみる インラインツール作成編

こんにちは コバヤシです。 今回は以前ブログで記事にしたEditor.jsでインラインツールを作成してみました。 tech.arms-soft.co.jp インラインツールとは インラインツールとは、テキストのブロックで文字を選択した時に出るツールのことです。 標準で太字に…

入力値に合わせて即描画!canvasとJSを使ってレーダーチャートを作ってみよう -実践前編-

こんにちは、ユアサです。 先日、canvasとJSを使ってレーダーチャートを作成していく記事の準備編を公開していましたが、今回より実践編となります。 前回の記事はこちら↓ tech.arms-soft.co.jp レーダーチャートのベースとなる枠線を作成しよう 今回はまず…

Illustratorでのルビ振りに便利なスクリプト「illustrator-ruby」

こんにちは、ハヤマです。 今回は、Illustratorでルビ設定をする際に便利なスクリプトについて、備忘を兼ねて記事にしたいと思います。 illustrator-ruby 「illustrator-ruby」はルビのサイズや揃え位置、進入処理・アキ挿入を調整してくれるスクリプトで、…

GSAPのtimelineアニメーションをスキップする

こんにちは、ナカムラです。 今回もGSAPの使い方についてご紹介します。 前回の記事でtimelineの使い方をご説明しました。 tech.arms-soft.co.jp このtimelineを使うと、一連のアニメーションを作ることができます。 サイトのオープニングアニメーションなど…

【Laravel9】今すぐ業務に使えそうな新機能を試してみた!!

こんにちは!ドイです。 今回は、最近の案件でLaravel9をさわる機会があったので、新しく追加された機能についてまとめていきたいと思います。 Enum PHP 8.1から使えるようになったEnumをLaravel9でも使用できるようになりました。 Enumとは PHPのドキュメン…

フルスタックかつ軽量!CodeIgniterを試す-DB編

こんにちは、コバヤシです。 前回に引き続きCodeIgniterをさわっていきます。 今回はDBまわりについて書いていきたいと思います。 tech.arms-soft.co.jp マイグレーションを行う まずはマイグレーションから行っていきます。 sparkコマンドでマイグレーショ…

スタイルを使いこなせ!要素の特徴やブラウザのサポート制限をくぐり抜けて使い分けるグラデーションについて考える

こんにちは、ユアサです。 前回からJSとCanvasでレーダーチャートを作成する記事を作成しましたが、弊社で取り扱った案件でグラデーションを使うことがあり自分の備忘録という意味でもまとめておきたいと思ったので、今回は少し逸れてCSSでグラデーションを…

Adobeがデザインツール「Figma」を買収!今後はどうなる?

こんにちは、ハヤマです。 2022年9月、Adobeがデザインツール「Figma」を200億ドル(約2.9兆円)で買収することを発表しました。 blog.adobe.com 2023年内には買収を完了する予定とのこと。 Figmaは自社ツールをガッツリAdobeと比較して紹介していたりと、結…

GSAPのonイベントを使って、画面に表示されている時だけアニメーションさせる

こんにちは、ナカムラです。 今回はアニメーションの演出でよく使うプラグイン「GSAP」の紹介になります。 GSAPとは アニメーションの実装を助けてくれるjavascriptのプラグインです。 基本的なブラウザはほとんど対応されています。 GSAP | GSAP | Docs & L…

【Laravel】フリーワード検索でやりがちなミスを回避!!

こんにちは!ドイです。 前回の記事では、AWSについて学んできました。 今回は、少し話題を変えまして、Laravelでデータ取得時にやりがちなミスを紹介したいと思います。 テーブル構成は、以下の通りとします。 それでは検索機能を実装していきたいと思いま…

フルスタックかつ軽量!CodeIgniterを試す-View編

こんにちは、コバヤシです。 前回に引き続き、CodeIgniterを試していきます。今回はViewの設定を行います。 tech.arms-soft.co.jp View CodeIgniterのviewのレンダーは標準では、素のPHPで行われます。 'デモです']); } } <body> <p>テスト</p> <p> </p></body>

入力値に合わせて即描画!canvasとJSを使ってレーダーチャートを作ってみよう -準備編-

こんにちは、ユアサです。 今更な内容になってしまいますが、今回は図形やアニメーションを描画できるcanvas要素とJSを使ってテキストボックスに入力した値に応じて描画ができるレーダーチャートを作っていきたいと思います。この記事では五角形のレーダーチ…

来たる「DTPの2023年問題」!Adobeサポート終了フォントを要チェック

こんにちは、ハヤマです。 今回は、「DTPの2023年問題」と呼ばれる、フォントに関する注意点をご紹介したいと思います。 (2023年、気がつけば到来まで4ヶ月を切っていますね(汗)) 「DTPの2023年問題」とは? 2023年1月以降、Adobe製品でType 1 フォント…

JavaScriptとclip-pathを使って、カーソルの位置に合わせて写真をマスクする

こんにちは、ナカムラです。 今回はカーソルの位置に合わせて表示を制御するものを作ってみたいと思います。 カーソルの位置の取得や、表示の変更にはJavaScriptを、写真のマスクはclip-pathを使います。 とっても簡単です。 DEMO 画面内にカーソルを当てて…

【サービスを作ろう】はじめてのサーバ 〜SSH〜

こんにちは!ドイです。 さて、前回までの記事で、EC2の立ち上げについて学んできました。 こちらが前回の記事です。 tech.arms-soft.co.jp 今回は、EC2にSSHでアクセスしたいと思います。 SSH SSH(セキュアシェル)とは、ネットワークを経由して、他のサー…

フルスタックかつ軽量!CodeIgniterを試す-インストール編

こんにちは、コバヤシです。 今回はSlimに続きCodeIgniterを試していきたいと思います。 CodeIgniterとは 軽量で速度を重視したオープンソースのフルスタックフレームワークです。 ライセンス問題が発生していましたが、現在は落ち着いているようです。 特に…

【フロントエンド初心者向け】Node.jsとExpressでローカルサーバを起動してみよう - 実践編

こんにちは、ユアサです。 今回は前回紹介したNode.jsとExpressを使用して、実際に簡易サーバーを作成していきます。 ↓前回の記事はこちら tech.arms-soft.co.jp Node.jsとnpmの準備 まずはNode.jsをインストールします。Node.jsの公式ページから各OSのイン…

Photoshop初心者でも簡単!被写体の切り抜き方法

こんにちは、ハヤマです。 今回は、Photoshopでのスピーディーな被写体の切り抜き方法についてご紹介します。 切り抜きは作業頻度が何かと高いと思いますので、デザイナーの方以外でも、Photoshopをお持ちでしたら覚えておくと損はないかと思います! はじめ…

JavaScriptでクリップボードにテキストをコピーする

こんにちは、ナカムラです。 今回はJavaScriptを使って、特定のテキストをクリップボードへコピーする処理を書いていこうと思います。 クリップボードとは クリップボードとは、テキストや画像などを一時的に保存している場所です。 テキストを選択してcomma…

【サービスを作ろう】はじめてのサーバ 〜VPCについて3〜

こんにちは!ドイです。 暑くなったと思ったら、少し涼しくなり、ちょうどいい気温の日が続いています。 もう夏はずっとこのままでいいのに!!と思いますが、これから少しずつ暑くなるようで戦々恐々としています。 さて、前回の記事ではVPCの概念について…

軽量フレームワーク Slimを試す - コントローラー・DB編

こんにちは、コバヤシです。 今回は前回に引き続き、Slimを試していきます。 tech.arms-soft.co.jp 前回はSlimのインストールとTwigを使えるまでやったので、今回はコントローラーの使用とDB接続をやっていきたいと思います。 コントローラーを作成する 前回…

【フロントエンド初心者向け】Node.jsとExpressでサーバを起動してみよう - 紹介編

こんにちは、ユアサです。 今回からNode.jsとそのフレームワークのExpressを使って、ローカル環境で表示確認しながらコーディングしやすくなる簡易的なWebサーバを作成・起動してみようと思います。フロントエンドなら作業前にぜひ準備しておきたいですね。 …

文字組みの救世主!合成フォントの代用にもなる便利なIllustratorスクリプト

こんにちは、ハヤマです。 今回は、Illustratorで使用できる便利なスクリプトをご紹介します。 数字だけ大きくしたり、 英字だけ選択したりするスクリプト 例えばですが、タイトルやキャッチコピー、日付、金額表示などの文字組みを行う時のことをイメージし…

ユーザーの操作を制限するCSSプロパティ「user-select」と「pointer-events」

こんにちは、ナカムラです。 今回はCSSプロパティの中で、ユーザーの操作を制限するプロパティをご紹介します。 基本的にユーザーの操作をできなくする、というのは避けたいものですが、操作できることによって目的の動作の邪魔になってしまうケースもありま…

【サービスを作ろう】はじめてのサーバ 〜VPCについて2〜

こんにちは!ドイです。 激しい気温差の中にも夏の気配を感じ、ワクワクするこの頃です。 BBQにプールに花火と、夏は無条件に楽しい季節なので待ち遠しいです(´꒳`) さて、前回の記事ではVPCについて学びました。 こちらが前回の記事です。 tech.arms-soft.c…

軽量フレームワーク Slimを試す - インストール編

こんにちは、コバヤシです。 今回は軽量フレームワークのSlimを試していきたいと思います。 弊社で使用しているメインのフレームワークはLaravelですが、最新のLaravel9ではPHP8以上のバージョンを求められます。 しかし案件によっては、諸事情によりPHP8以…

背景の要素を自在に設定!backgroundプロパティで一括指定してみよう -後編-

こんにちは、ユアサです。 今回は前回紹介したbackgroundプロパティ(以下backgorundと表記します)で実際にコーディングしてみると同時に、スタイルが反映されなくなる例を書きまとめていきます。 ↓前回の記事はこちら tech.arms-soft.co.jp 背景に画像を設…