CSSスタイルガイドをStorybook for HTMLに移行した話 - RAKSUL TechBlog
こんにちは。印刷のラクスルでフロントエンドを担当している菅野です。 2週連続の投稿となります。(前回の記事: Jestを実行した時に、同時にESlintを走らせてみる) 現在、印刷サービスのフロントエンドエンジニアとデザイナーでデザインシステムの構築・整備を行っています。 その一環として、運用中のCSSスタイルガイドをStorybookに移行しました。 今回は、移行を決めた動機や導入時に得られた知見、今後の運用についてご紹介したいと思います。 [caption id="attachment_4313" align="alignnone" width="1024"] 運用中のStorybookの画面[/caption] これまでのスタイルガイドにおける課題感 該当プロジェクト(印刷のラクスル)ではPostCSSを使用しており、社内でデザインのコンポーネント一覧を共有するために、postcss
デザイナーとエンジニアの協業を加速させる！スタイルガイド作成ツール「Storybook」の紹介 | クリエイターのための総合情報サイト CREATIVE VILLAGE
ReactやVue.jsなどのライブラリ/フレームワークが普及し、コンポーネント単位でUIを設計・実装するフロントエンド開発が一般的になってきました。しかし、コンポーネント単位での開発には様々な悩みポイントがあります。 コンポーネントには、単純に見た目の情報だけを持っているものもあれば、それぞれが状態を持っていてその状態によって見た目や振る舞いを変化させたりするものもあります。そういったコンポーネントは、他のコンポーネントと連携しても見た目や振る舞いが壊れないように（壊さないように）実装しなければいけません。 コンポーネント単位のフロントエンド開発において、コンポーネントを独立させて管理するスタイルガイドを作成することは必須と言っても過言ではありません。本記事では、スタイルガイドを作成するためのオープンソースツールであるStorybookを紹介します。 村上 玄徳氏 株式会社メンバーズ メ
デバッグに便利！ブラウザの HTTP 通信ログをアーカイブして共有・確認できる HTTP Archive File / Viewer の紹介
ブラウザと API サーバーの繋ぎこみや画面遷移を伴う他サービスとの連携をする時、予期せぬエラーが起きたり想定外の挙動をしてデバッグに苦労したという経験をお持ちの方は多いのではないでしょうか。 多くの Web アプリ開発で、API サーバーとの通信がどのように行われているかを把握することは不可欠です。上手く行かない場合、どのようなリクエストが送られたか、どのようなレスポンスが返されたかを確認するために、ブラウザのデベロッパーツール（開発者ツール）を利用したり、Fiddler などのツールを利用してデバックすることが多いと思います。 この記事では、こういった時に役立つ手法として、ブラウザのデベロッパーツールで HTTP 通信をキャプチャしてその内容をアーカイブとして保存する方法と、保存したアーカイブファイル（HARファイル）を閲覧するツールについて紹介します。 HAR ファイルとは？HTTP
HAR Analyzer
HAR キャプチャの取得方法 HAR（HTTP アーカイブ）は、複数の HTTP セッション ツールでキャプチャ済みデータのエクスポートに使用されるファイル形式です。 この形式は基本的に、特殊なフィールドで構成される JSON オブジェクトです。 HAR 形式のすべてのフィールドが必須なわけではなく、一部の情報がファイルに保存されない場合も多くあることに注意してください。 HAR ファイルにはセンシティブ データが含まれます。 記録中にダウンロードしたページのコンテンツ。 HAR ファイルを取得したユーザーによるアカウントのなりすましを可能にする Cookie。 記録中に送信したすべての情報（個人情報、パスワード、クレジット カード番号など）。 必要に応じてテキスト エディタで HAR ファイルを編集し、機密情報を削除できます。 詳しくは、Microsoft のウェブサイトで Micros
お客様の事象の切り分けのための参考情報 ~HARファイルを取得する~｜Engineers' Blog｜SBクラウド株式会社 - SBクラウド株式会社
はじめに 今回は、クラウド含めシステム環境に予期せぬ事象が発生した際のお客様ご自身の情報整理等のために役立つ方法の一参考とし、 「HARファイルの取得方法」を簡単にご紹介しようと思います。 この記事を読まれた方の参考となり、お客様の情報整理にお役立て頂けますと幸いです。 ※本記事の情報は、2020年3月31日（火）時点のものとなります。 HARファイルとは WebブラウザとWEBサイトの対話をログに記録するためのJSON形式のアーカイブファイルです。 ブラウザ内で発生したネットワーク要求が記録されます。 HARファイルの使い所 パブリッククラウドサービス等を使用し構築したWEBサービス等で予期せぬ事象が発生した場合、使用しているプロダクトに応じて、 各社のお問合せ窓口にお問合せを実施されるかと存じます。 お問合せの際に、ブラウザ内で発生したネットワーク要求に関して、追加の情報として、その事
静的サイトをホスティングしてみる - Qiita
はじめに この記事はLIFULL Advent Calendar 2019の20日目の記事です。 今更ながら、ふと静的サイトをホスティングしてみたくなったので、いくつかの方法で試してみました。 静的サイトホスティング 今回は以下のようなサンプルアプリケーションのホスティングを行っていきます。 詳しくはNuxt.jsの公式ドキュメントをご覧ください。 以下二つのサービスを試します。 GitHub Pages Netlify GitHub Pages ご存知の方も多いかと思いますが、GitHubにはGitHub Pagesという静的ホスティングサービスがあります。 簡単ホスティング まずはサンプルアプリケーションをホスティングする前に、簡単なファイルでホスティングを試してみましょう。公式ドキュメントにしたがって静的サイトの公開を行ってみます。 1. リポジトリを作成 <username>.gi
storybook をさらに有効活用するために chromatic を導入する
目次 開発に storybook を導入した chromatic で storybook をさらに有効活用できそう 実際に検証してみた 開発に storybook を導入した 混沌としていたコンポーネントを整理するために、Atomic Design を導入することにしました。その際に、storybook も作成していこうということになりました。 手順はおおよそ以下の通りでした。 デザイナーが Atomic Design に則ってコンポーネントを整理する。 エンジニアがコンポーネントと storybook を作成する。 PR ごとに Circle CI で storybook を build し、レビュー時にはコードと共に見た目や挙動も確認する。 エンジニアが相互レビューし合い、コーディングルールなどを整理していく。 新規画面の作成 / 既存の画面の置き換えを行う。 この時点で、storyb
ngrokの利用方法 - Qiita
業務でngrokを利用したので、忘れない為にも利用方法を記載します。 ngrokとは？ Public URLs for building webhook integrations. Spend more time programming. One command for an instant, secure URL to your localhost server through any NAT or firewall. webhookを利用する為のpublicURLを発行できます。 簡易的にセキュアなURLをローカルホストサーバーにNATやFirewallを通して構築することが可能です。 有料プランと無料プランがありますが、ちょっとした動作確認が目的の場合は無料プランで十分です。 ngrok説明図 画像参考：ngrok を使ったら Webhook のデバッグが非常に捗った話 ngrokの
source-han-code-jp/README-JP.md at master · adobe-fonts/source-han-code-jp
English / 日本語 2020-11-25 リリースノート macOS11上のシンタックスハイライト問題の為にSVGテーブルを削除しました。Issue #17. 2018-4-17 リリースノート Source Han Code JP（源ノ角ゴシック Code JP）を version2.010に更新しました。 このバージョンで、MS Office製品などで使われるスタイルリンクを機能するようにしました。これによりフォントのメニューバーにあるボールドやイタリックボタンがスタイルが変更できるようになりました。また、 Windows10のフォントフォルダやMS office製品などのフォントメニューで、フォント名が正しくソートされない問題を修正しました。 変更点： U+2423 OPEN BOX '␣'を、667unitsの文字幅にしました。#12 スタイルリンク機能を使えるようにしまし
ngrokが便利すぎる - Qiita
はじめに 先日利用したngrokというサービスが便利過ぎたので紹介します。 ngrokとは 簡単にいうと、ローカルPC上で稼働しているネットワーク（TCP）サービスを外部公開できるサービスです。例えば、ローカルPCのWebサーバを外部公開することができます。 ngrokの導入 ngrokにユーザ登録 ngrok公式サイトからユーザ登録します。Githubアカウント、Googleアカウントでも登録できるのでお好みで登録します。 ngrokコマンドをインストール ngrokのサービスを利用するには、公開されているngrokコマンドを使用します。ダウンロードサイトからOSに合ったファイルを取得します。ツールはzip圧縮されているだけなので、ファイルをダウンロードしたら任意の場所に解凍します。 ngrokコマンドをインストール ツールのインストールが完了したら、アカウント登録後に表示される「Wel
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UIT meetup vol.12『リニューアル戦略発表会』