はてなブックマーク

はじめに デザイントークンとは、デザインシステムにおいて最小単位のスタイルを定義するものです。 その目的としては「デザイナーとエンジニアの共有言語として、一貫性がありつつも柔軟なデザインを可能」とすることで、デザインシステムを今後しっかりやっていきたいという方が抑えておくべき概念です。 今回は、そんなデザイントークンとは何か、そのメリット、使い方についてご紹介します。 デザイントークンとは？ デザイントークンの定義 デザイントークンとはデザインシステムにおいて信頼できる最も基礎的な情報 (Single source of truth)です。 当時Salesforceでデザインシステムを担当していたJina Aneeが提唱したコンセプトです。 デザイントークンの中には最小単位のスタイルの情報が保存されます。 プロダクトの中でよく使われるデザインの要素をパッケージ化し、複数のプラットフォームに

はじめに この記事は新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay15の記事です！ 昨日は「話題のノーコードツールを使ってみた」でした。 話題のノーコードツールを使ってみた 今回は、Chakra UIについてご紹介いたします。 Chakra UIとは、UIコンポーネントフレームワークの一つです。Reactのライブラリなので、エンジニアの方にとっては馴染み深い名前かもしれません。 スピード重視で0からデザインを作成する必要がある時に役立つと思います！一緒に学んでいきましょう！ Chakra UIの概要 Chakra UIは、コンポーネントの一貫性を保つ原理に基づいて作られたものであり、シンプルで実際に起こるUIデザインの問題に貢献する構成可能なコンポーネントを目指すものです。 "Chakra UI is established on principles that ke

はじめに フォームの実装のライブラリはFormik、React Hook Form、React Final Formのどれにしよう…と悩むことは多いと思うのですが、バリデーションを何で行おうというのは考える機会が少ないと思います。 というのも、React Hook FormもFormikもYupを推しているので、あまり調査せずにYupを使う方が多いのではないでしょうか。そもそもReact Hook FormはデフォルトではHTML標準のバリデーション機能を使用しているので、バリデーションライブラリを意識したことないという方もいるかもしれません。 実は非常に多くのバリデーションライブラリがあるので、今回は色々紹介して比較していきます！ バリデーションライブラリの種類 ざっと挙げるだけでもこれくらいあります。 ・Joi ・Yup ・zod ・io-ts ・Superstruct ・Vest ま

はじめに この記事は 新しい技術にチャレンジし続けるpalanのアドベントカレンダー 22日目の記事です。 昨日は「デザイン制作・コーディングツール「Hadron」を使ってみた」という記事でした。 デザイン制作・コーディングツール「Hadron」を使ってみた 今回はAR.jsのLocation Based ARを作ってみたので、その作り方や特徴を紹介します。 Location Based ARとは Location Based AR（ロケーションベース型AR）とはGPSなどの位置情報に基づいて、特定の位置にARコンテンツを表示させるARです。例えば地図アプリのナビゲーションで目的地の方向や位置を示すのに使われてたりします。 地図アプリのナビゲーションでLocation Based ARを使っている例 AR.jsのLocation Based AR AR.jsのバージョン3以降ではLocat

はじめに この記事は新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay4といつもお世話になっているデザイン女子部さんのデザイン女子部Advent Calendar 2020の４日目の記事です！ 昨日は「【Figma】Auto Layout がアップデートされました！」についての記事でした。 【Figma】Auto Layout がアップデートされました！ 本記事ではFigmaが2020年の11月に新しく発表した Variantsについての使用メリットや使い方をご紹介します！ Variantsは発表された当初から非常に注目されていた機能ですが、今回の記事ではFigmaのVariantsを使うメリットそしてVariantsの作り方や既存のコンポーネントをVariant化する方法を合わせてご説明します。 variantsとは？variantsのメリット Variantsとはコン

はじめに 2005年からリリースされているGoogle社の無料アクセス解析ツール「Google Analytics（GA)）」が、2020年10月に新バージョンの「Google Analytics 4（以下「GA4」）」をリリースしました。 リリースに伴いアナリティクスのページや考え方も変わったので、Google Analytics Data APIでのデータ取得方法も変わったようです。 この記事ではRubyを使用してGA4のレポートデータの取得方法を紹介していきます！ 導入 GA4で何が変わった？ GA4は次世代のGoogle Analyticsと呼ばれています。 今までのGAは「ページ」単位という考え方から「滞在率」、「直帰率」というよう分析を行うことができました。 しかし、アプリのようなページの概念のないものから、SPAのようなページ遷移を行わずコンテンツを切り替えるようなサイトが現

はじめに この記事は新しい技術にチャレンジし続けるpalanのアドベントカレンダー 3日目の記事です。 昨日は 『figmaがもっと便利になるプラグイン5選とその使い方』 という記事をご紹介しました。 figmaがもっと便利になるプラグイン5選とその使い方 本記事では2020年11月19日にアップデートされたFigmaのAuto Layout機能についてご紹介します。 新しくなったAuto Layoutで何ができようになったのか、Auto Layoutを使いこなしたい方に向けた記事になります。 なお、Figmaの公式ブログの記事「Behind the feature: the making of the new Auto Layout」でも、Auto Layoutのアップデート内容について解説されているので、ぜひご覧ください。 Auto Layout機能とは 複数のオブジェクトが隣り合わせ

はじめに 新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay「15」です！ 昨日は「SendGridのEvent Webhookについて調査してみた」のお話でした。 SendGridのEvent Webhookについて調査してみた 本日はiOS14.3のアプリ内ブラウザ（WKWebView）に関してのお話です。 iOSの14.3が12月14日（日本時間12月15日）リリースされました🎉 目立つリリースとしてはApple Healthのリリースなどとなりますが、実はアプリ内ブラウザなどで使用されているWKWebViewというブラウザでウェブカメラが使用できるようになっています。 詳細は後ほど解説しますが、今までSafari以外をサポートしていなかったウェブカメラが他のブラウザやアプリから使用することができるようになっています。 ※Twitter内ブラウザで自社サービスTO

ゆるっぷるでのRealtime Databaseのチャットイメージ firebase-rubyからデータを操作してみる 先程、「Realtime Databaseによってサーバレスのシステム構築が可能！」とご紹介しましたが、敢えてアプリケーションサーバ側でRealtime Databaseを使ってみます。 というのも、システムの全てをRealtime Databaseで集約できるわけがなく、RDB（Relational Database）と上手く使い分ける必要がある為です。 その名の通りRelational、つまり関連性をもたせた複雑なテーブル構成の場合にはRDBを使用するほうが良いでしょう。 今回、アプリ側のDBはRealtime Database、サーバ上でのシステムについてはRuby（Ruby on Rails）を使用しRelational Databaseを使用していきます。 fi

新しい技術にチャレンジし続けるeishisのアドベントカレンダーDay12です！ 前回はFirebaseのRealtime DatabaseのデータをRubyから、firebase-rubyというGemで操作を行うという記事でした。 Rubyからfirebase-rubyでRealtime Databaseにアクセスする 今回は静的ホスティングサービスである「Netlify」についてご紹介します！ Netlifyとは？ Netlifyは、静的サイトをホスティングすることができるWebサービスです。 WordPress等の動的な処理のいらないLPなどの静的なWebサイトであればNetlifyを通じて公開することができます。 公開手順も非常に簡単で、公式サイトでも「Deploy your site in seconds.」とうたっているだけのことはあり、 ３ステップほどで公開することができます

はじめに この記事は GraphQL Advent Calendar 2019 20日目および bagelee Advent Calendar 2019 21日目の記事になります。（投稿遅くなって順番前後してしまいました） bagelee では昨日は Adobe のデザインシステム spectrum のコンポーネントについてご紹介いたしました。 Adobeのデザインシステム、spectrumから学べるデザインの基礎 ~コンポーネント編~ 今日は bagelee の運営会社 palan のエンジニア進木 (@konoki_nannoki) が、 Twitter のタイムラインを見ていると頻繁に流れてくる以下のプロモーションについて調べてみました。 私は確かに普段 JavaScript を使って開発していますし、そのための情報源として Twitter も活用していますので非常に正しいターゲティ

2018年6月11日 ゲスト bagelee npmのpackage.jsonと依存関係を理解しよう！

はじめに 新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay14です！ 昨日は「WebARの本質的な価値について考えてみる」のお話でした。 WebARの本質的価値を考えてみる 本記事ではAdobeのデザインシステム、spectrumから学べるデザインの基礎についてご紹介します。 今年の10月後半にAdobeのデザインシステム、Spectrumの公式サイトが発表され、話題を呼びました。 spectrumに関する記事はAdobeのブログでも発表されていますが、細かい内容を日本語で解説している記事がないため、今回は私が読んで使えると思った部分を抜粋しご紹介いたします。 注意点としては、今回の記事はあくまで私の解釈で書かせていただいております。 元のspectrumの内容を忠実に再現というよりかは、自分が読んで解釈した結果、こういうところで実践的に使えそうだと思った、というところ

実際にどんなアニメーションを作ることができるのか、figmaの公式サイトで紹介しているので、そちらの動画をご覧ください。 「Create Advanced Animations with Smart Animate」より 使用できるプロパティ figmaのSmart Animate機能でサポートされているプロパティのご紹介です。 スケール レイヤーやオブジェクトの大きさが変わった場合、smart animateでそのオブジェクトが拡大したり縮小したりするよう見せることが可能です。 この例では、再生ボタンをタップ/ホバーするとボタンが大きくなるようにしています。 ポジション frame間でオブジェクトの位置に変更があった場合、オブジェクトの間の動きをsmart animateが自動で補完してくれます。 この例では、再生位置を終了位置までドラッグで変更することができるようになっています。 透明

今回は、 create-react-app で作った React (TypeScript) のプロジェクトに AWS Amplify をセットアップし、 GraphQL 通信を行う3つの方法をそれぞれ見ていきます。 React + AWS Amplify プロジェクトのセットアップ React プロジェクト作成 まずは create-react-app を使ってプロジェクトを作成します。 $ npm install -g create-react-app $ create-react-app amplify-react-graphql-example --typescript $ cd amplify-react-graphql-example $ yarn start これで localhost:3000 にローカルサーバーが立ち上がります。 --typescript オプションで Ty

はじめに 本記事ではフローチャートと図が簡単に作れるwhimsicalというツールをご紹介します！ whimsicalは簡単に素早くフローチャートが作れるツールです。 Product Huntで2月15日に「Product of the Day」として紹介されています。 Whimsical on Product Hunt 今回の記事では、そんなwhimsicalを少し深掘りし、どういったことが出来るのか、また、実際にwhimsicalを試してみた感想などをご紹介します。 whimsicalとは whimsicalは簡単にフローチャートと図が作れるツールです。 ポストイット風のノートやワイヤーフレーム、マインドマップなども作れるようになる予定ですが、現在はフローチャートと図を作る機能がサポートされています。 ワイヤーフレームに関しては、こちらの記事でも軽くご紹介しているので、ご興味ある方はぜ

はじめに 新しい技術にチャレンジし続けるeishisのアドベントカレンダーDay16です！ 昨日はRuby on Railsのバージョン6以降に取り組まれることが発表された、Action Mailboxについての記事でした。 Rails6で導入されるAction Mailboxを試してみた 今日は、私がマテリアルデザインの基礎（Material Foundation）を読み学んだ、実践で使えるデザインテクニックをご紹介します。 今年の5月後半にGoogle I/O 2018 collectionのアップデートが発表され、話題を呼んだマテリアルデザイン。 マテリアルデザインに関する記事はたくさんありますが、その多くは概念的な説明で、深くまで説明している日本語の記事はほとんどない気がします。 マテリアルデザインのガイドラインを少し読んでみたけど、長すぎて途中で挫折した… 英語が苦痛で最後まで読

はじめに 本記事では、画像に簡単にアニメーションをつけることができるcurtain.jsをご紹介します。 普通の画像がまるでカーテンのようにふりふりと風になびくアニメーションをつけたり、画像を水面に見立て、ブヨブヨとマウスカーソルに合わせて動いたり…。curtain.jsを使うと簡単に画像に対して様々な目新しいアニメーションをつけることができます。 curtain.jsとは curtain.jsは小さいvanilla WebGL JavaScriptのライブラリです。3Dのインタラクションやアニメーションを作ることができます。 HTMLの画像を含んだ要素を3DのWebGLテクスチャーplaneに変換し、shadersを使い、アニメーションを加えることができるようにしています。それぞれのplaneの大きさやpositionはCSSで変更することができるので、楽に配置変更サイズ変更をすることが

はじめに 前回の記事ではチームとプロジェクトという複数人でFigmaで作業するために重要なコンセプトをご紹介しました！ もう一度復習されたい方はこちらからご覧ください！ チームとプロジェクト【これからはじめるFigma】 今回の記事では、Figmaで「フレーム」と「グループ」に焦点をあてた機能をご紹介します。また、Figmaで作業をするにあたって重要な選択したいオブジェクトを選択する方法などもご紹介します。 それでは、実際に作業をしながら、記事を読まれる方はFigmaを開き、前回の記事で作ったサンプルファイルを開いてください。私の場合はbagelee sample というファイルです。 ファイルを消してしまった方、ファイルをまだ作ってないという方は「New File」からお好きな名前をつけてファイルを作ってください。 フレームを作る 前回の簡単な復習ですが、ファイルの中に入っている時は、左

NetlifyCMSは、Netlifyが提供しているCMS(コンテンツ・マネジメント・システム)になります。GatsbyJS単体ではマークダウン形式を記述するため、エディタが必要になります。NetlifyCMSを導入することでWebサイト上で記事を書いて投稿までできるようになるため、WordPressと同じような使用感で記事を書くことができます。 Netlifyについては前回の記事でご紹介したので、あわせてご覧ください。 Netlifyとは？ 〜概要から導入まで〜 導入手順 それでは早速導入手順についてご説明していきます。NetlifyCMSのWebサイトでスターターテンプレートを配布していくのでこちらを利用します。サイトにアクセスするとどの静的サイトジェネレータを利用するか選択ができるのでGatsbyJSを選択します。 Netlifyの画面に遷移するので、Githubと連携してスターター

はじめに 新しい技術にチャレンジし続けるeishisのアドベントカレンダーDay23です！ 昨日はReact 360で360度動画を背景として使う方法についての記事でした。 360度動画を背景にする【これからはじめるReact 360】 今日は、前回に引き続き私がマテリアルデザインの基礎（Material Foundation）を読み学んだ、実践で使えるデザインテクニックをご紹介します。 前回の記事はこちらですので、読んでない方はこちらを先に読むことをオススメします！ マテリアルデザインを読んで学んだ、実践で使えるデザインテクニック第一弾 今回の記事も前回と同様、あくまで私がマテリアルデザインを読んだ解釈です。 元のマテリアルデザインを忠実にというよりかは、自分が読んで解釈した結果、こういうところで実践的に使えそうだと思った、というところを抜粋しています。ご注意ください。 また、マテリアル

既存のAction Mailerはメールの送信に関しての機能を持ちますが、Action Mailboxメールの受信に関してのフレームワークです。 メールの受信をRails側でキャッチし、DBに格納することができます。 まだバージョンも0.1.0ですが、少しだけその使い方などを先行してお伝えします。 実際に使ってみる Ruby on Railsのバージョン6以降で正式に取り込まれますが、現在もGemとしてバージョン5.2以降で試すことができます。 リポジトリ に従って実際に試してみましょう。 まずはRails5のアプリケーションを作っていきます。 rails new _5.2.2_ action_mailbox_test -d mysql Gemfileにactionmailboxを追加し、installしていきます。 gem "actionmailbox", github: "rails/

はじめに 新しい技術にチャレンジし続けるeishisのアドベントカレンダーDay10です！ 昨日は「【CSS】3D transformsでコロッとなるエフェクトを作る」という記事でした。 【CSS】3D transformsでコロッとなるエフェクトを作る 本日は自社サービスのリブランディングに向けた第一弾「Sketchのシンボル管理を使ってLP制作！」という記事を書いてみたいと思います。 自社サービス「ゆるっぷる」について bageleeの運営会社であるエイシスではbageleeの他に自社サービスとして「ゆるっぷる」というパートナーと一緒に痩せられるダイエットアプリを制作しています。 リブランディングを行う前に ゆるっぷるのLPのリデザインを行いました まずはゆるっぷるのリブランディングに向けて、一枚絵の画像として公開していたLPを検索のしやすさやスマホでも見やすいようにレスポンシブデザイ

はじめに 新しい技術にチャレンジし続けるeishisのアドベントカレンダーDay6です！ 昨日は、RucksackというCSSライブラリを使ってレスポンシブタイポグラフィーを実装する方法についての記事でした。 Rucksackでレスポンシブタイポグラフィーを実装する 今回は、React Nativeで TextInput コンポーネントにフォーカスされたとき、ソフトウェアキーボードで画面が隠れてしまうのを防ぐ方法をご紹介します。 サンプルコードのReact Nativeのバージョンは 0.57.7です。 画面がキーボードで隠れてしまう状態とは まずは下記のgif画像をご覧ください。 今回は、このように画面の中央に TextInput があり、画面下部に決定ボタンがあるレイアウトで説明していきたいと思います。 こちらの画面のコードは以下になります。 （キーボードの表示部分に関わらないスタイル

はじめに npmパッケージを利用する際、バージョンの違いなどで動かなかったり、少しだけカスタマイズしたいといったような場面に遭遇することはないでしょうか？そんなときに使える patch-package というツールをご紹介します。 npmパッケージを修正するには npm install によって追加されたパッケージはプロジェクトのnode_modulesというディレクトリ内に保存されます。 このnode_modules内のファイルを変更してしまえばnpmパッケージを修正できるのですが、いくつか方法があります。 node_modules内を直接修正する方法 node_modules内のファイルは一般的にはJavaScriptですので、そのファイルを直接変更してしまうことが可能です。 しかし、node_modules内のファイルは npm install 時などに上書きされる可能性がありますし