2022-01-01から1年間の記事一覧
こんにちは、ハヤマです。 突然ですが、Webデザインの記事などで「グラスモーフィズム」「クレイモーフィズム」「スキューモーフィズム」「ニューモーフィズム」といった「○○モーフィズム」系の名称がよく登場します。 もしくはエンジニアの方でしたら、デザ…
こんにちは！ドイです。 今回はPhpstormのよく使う！という機能をまとめたいと思います。 ショートカットはmacでの操作を前提としています。 検索 ファイル内検索 一番よく使う検索です。ファイル内の検索を行います。 ショートカット：command + F ファイル…
こんにちは、中村です。 今回はCSSの話です。 フロントエンドの作業はデザインを下にマークアップとスタイルを作っていくところから始まります。 そこで、最近よく作るレイアウトの組み方をご紹介したいと思います。 片側だけ可変する背景 記事のタイトルに…
こんにちは コバヤシです。 今回は以前ブログで記事にしたEditor.jsでインラインツールを作成してみました。 tech.arms-soft.co.jp インラインツールとは インラインツールとは、テキストのブロックで文字を選択した時に出るツールのことです。 標準で太字に…
こんにちは、ユアサです。 先日、canvasとJSを使ってレーダーチャートを作成していく記事の準備編を公開していましたが、今回より実践編となります。 前回の記事はこちら↓ tech.arms-soft.co.jp レーダーチャートのベースとなる枠線を作成しよう 今回はまず…
こんにちは、ハヤマです。 今回は、Illustratorでルビ設定をする際に便利なスクリプトについて、備忘を兼ねて記事にしたいと思います。 illustrator-ruby 「illustrator-ruby」はルビのサイズや揃え位置、進入処理・アキ挿入を調整してくれるスクリプトで、…
こんにちは、ナカムラです。 今回もGSAPの使い方についてご紹介します。 前回の記事でtimelineの使い方をご説明しました。 tech.arms-soft.co.jp このtimelineを使うと、一連のアニメーションを作ることができます。 サイトのオープニングアニメーションなど…
こんにちは！ドイです。 今回は、最近の案件でLaravel9をさわる機会があったので、新しく追加された機能についてまとめていきたいと思います。 Enum PHP 8.1から使えるようになったEnumをLaravel9でも使用できるようになりました。 Enumとは PHPのドキュメン…
こんにちは、コバヤシです。 前回に引き続きCodeIgniterをさわっていきます。 今回はDBまわりについて書いていきたいと思います。 tech.arms-soft.co.jp マイグレーションを行う まずはマイグレーションから行っていきます。 sparkコマンドでマイグレーショ…
こんにちは、ユアサです。 前回からJSとCanvasでレーダーチャートを作成する記事を作成しましたが、弊社で取り扱った案件でグラデーションを使うことがあり自分の備忘録という意味でもまとめておきたいと思ったので、今回は少し逸れてCSSでグラデーションを…
こんにちは、ハヤマです。 2022年9月、Adobeがデザインツール「Figma」を200億ドル（約2.9兆円）で買収することを発表しました。 blog.adobe.com 2023年内には買収を完了する予定とのこと。 Figmaは自社ツールをガッツリAdobeと比較して紹介していたりと、結…
こんにちは、ナカムラです。 今回はアニメーションの演出でよく使うプラグイン「GSAP」の紹介になります。 GSAPとは アニメーションの実装を助けてくれるjavascriptのプラグインです。 基本的なブラウザはほとんど対応されています。 GSAP | GSAP | Docs & L…
こんにちは！ドイです。 前回の記事では、AWSについて学んできました。 今回は、少し話題を変えまして、Laravelでデータ取得時にやりがちなミスを紹介したいと思います。 テーブル構成は、以下の通りとします。 それでは検索機能を実装していきたいと思いま…
こんにちは、コバヤシです。 前回に引き続き、CodeIgniterを試していきます。今回はViewの設定を行います。 tech.arms-soft.co.jp View CodeIgniterのviewのレンダーは標準では、素のPHPで行われます。 'デモです']); } } <body> <p>テスト</p> <p> </p></body>
こんにちは、ユアサです。 今更な内容になってしまいますが、今回は図形やアニメーションを描画できるcanvas要素とJSを使ってテキストボックスに入力した値に応じて描画ができるレーダーチャートを作っていきたいと思います。この記事では五角形のレーダーチ…
こんにちは、ハヤマです。 今回は、「DTPの2023年問題」と呼ばれる、フォントに関する注意点をご紹介したいと思います。 （2023年、気がつけば到来まで4ヶ月を切っていますね（汗）） 「DTPの2023年問題」とは？ 2023年1月以降、Adobe製品でType 1 フォント…
こんにちは、ナカムラです。 今回はカーソルの位置に合わせて表示を制御するものを作ってみたいと思います。 カーソルの位置の取得や、表示の変更にはJavaScriptを、写真のマスクはclip-pathを使います。 とっても簡単です。 DEMO 画面内にカーソルを当てて…
こんにちは！ドイです。 さて、前回までの記事で、EC2の立ち上げについて学んできました。 こちらが前回の記事です。 tech.arms-soft.co.jp 今回は、EC2にSSHでアクセスしたいと思います。 SSH SSH（セキュアシェル）とは、ネットワークを経由して、他のサー…
こんにちは、コバヤシです。 今回はSlimに続きCodeIgniterを試していきたいと思います。 CodeIgniterとは 軽量で速度を重視したオープンソースのフルスタックフレームワークです。 ライセンス問題が発生していましたが、現在は落ち着いているようです。 特に…
こんにちは、ユアサです。 今回は前回紹介したNode.jsとExpressを使用して、実際に簡易サーバーを作成していきます。 ↓前回の記事はこちら tech.arms-soft.co.jp Node.jsとnpmの準備 まずはNode.jsをインストールします。Node.jsの公式ページから各OSのイン…
こんにちは、ハヤマです。 今回は、Photoshopでのスピーディーな被写体の切り抜き方法についてご紹介します。 切り抜きは作業頻度が何かと高いと思いますので、デザイナーの方以外でも、Photoshopをお持ちでしたら覚えておくと損はないかと思います！ はじめ…
こんにちは、ナカムラです。 今回はJavaScriptを使って、特定のテキストをクリップボードへコピーする処理を書いていこうと思います。 クリップボードとは クリップボードとは、テキストや画像などを一時的に保存している場所です。 テキストを選択してcomma…
こんにちは！ドイです。 暑くなったと思ったら、少し涼しくなり、ちょうどいい気温の日が続いています。 もう夏はずっとこのままでいいのに！！と思いますが、これから少しずつ暑くなるようで戦々恐々としています。 さて、前回の記事ではVPCの概念について…
こんにちは、コバヤシです。 今回は前回に引き続き、Slimを試していきます。 tech.arms-soft.co.jp 前回はSlimのインストールとTwigを使えるまでやったので、今回はコントローラーの使用とDB接続をやっていきたいと思います。 コントローラーを作成する 前回…
こんにちは、ユアサです。 今回からNode.jsとそのフレームワークのExpressを使って、ローカル環境で表示確認しながらコーディングしやすくなる簡易的なWebサーバを作成・起動してみようと思います。フロントエンドなら作業前にぜひ準備しておきたいですね。 …
こんにちは、ハヤマです。 今回は、Illustratorで使用できる便利なスクリプトをご紹介します。 数字だけ大きくしたり、 英字だけ選択したりするスクリプト 例えばですが、タイトルやキャッチコピー、日付、金額表示などの文字組みを行う時のことをイメージし…
こんにちは、ナカムラです。 今回はCSSプロパティの中で、ユーザーの操作を制限するプロパティをご紹介します。 基本的にユーザーの操作をできなくする、というのは避けたいものですが、操作できることによって目的の動作の邪魔になってしまうケースもありま…
こんにちは！ドイです。 激しい気温差の中にも夏の気配を感じ、ワクワクするこの頃です。 BBQにプールに花火と、夏は無条件に楽しい季節なので待ち遠しいです(´꒳`) さて、前回の記事ではVPCについて学びました。 こちらが前回の記事です。 tech.arms-soft.c…
こんにちは、コバヤシです。 今回は軽量フレームワークのSlimを試していきたいと思います。 弊社で使用しているメインのフレームワークはLaravelですが、最新のLaravel9ではPHP8以上のバージョンを求められます。 しかし案件によっては、諸事情によりPHP8以…
こんにちは、ユアサです。 今回は前回紹介したbackgroundプロパティ（以下backgorundと表記します）で実際にコーディングしてみると同時に、スタイルが反映されなくなる例を書きまとめていきます。 ↓前回の記事はこちら tech.arms-soft.co.jp 背景に画像を設…
