Reactで社内向けUIライブラリ開発・ビルド・公開・布教入門【2024年】
会社で複数の新規事業を立ち上げる機運が高まったことをきっかけに社内向けUIライブラリを開発し、限定公開して利用を始めました。 本記事ではReactで社内向けUIライブラリを開発・ビルド・公開・布教するためのアレコレを共有します。 以下のような話題について知りたい方に特に読んでほしいです。 Private Packageの作り方、配布の方法のイメージがつかない方 CommonJSとES Modules、今はどちらでビルドするのがいいのか知りたい方 ライブラリの作り方について網羅的に知りたい方 前提 利用側のアプリケーションはNext.js固定を前提とする Tailwind CSSを内部的には利用する 利用側のアプリケーションはパフォーマンス（Lighthouseスコア）重視することが多い 社内の様々なレベルのエンジニアがContributeする可能性がある 端的に言うと、社内のプライベートリ
音源分離ツールSpleeterと音源MIDI変換ツールBasic-PitchをM1 MacBook Air上のDockerで動作させる
はじめに 楽曲をアナライズしたいとき、ボーカルの旋律とか、伴奏の最低•最高音は聴音しやすいものです。 ですが、、たとえばテンションを含む密集した和音のボイシングまで分解するのは、途方もなくしんどいです。もちろん訓練された能力と、それなりの時間も必要になります。 手元に楽器がない環境の人にとっては、なおさら難しいことです。 そこで補助的に機械学習ライブラリの力を借りて、能力や時間がない人でも、より良い音楽学習ができるようにすることは、音楽の文化に良い影響があると思います。 SpleeterとBasic-Pitchという二つの最高なライブラリが提供するコマンドラインツールを使うことで、音源をパート別に分離して、それぞれのパートをMIDIノートとして出力することができます。 それによって、リファレンス楽曲の分析自体に時間をかけることなく、本当の目的である解析、そして解析した後にどう昇華させるか考
Macの「写真」で追加の写真ライブラリを作成する
写真ユーザガイド ようこそ はじめに 写真やビデオを読み込む 読み込みの概要 iCloud写真を使用する カメラまたは携帯電話から ストレージデバイスやDVDなどから 「メール」、Safari、およびその他のアプリから 別の写真ライブラリから 読み込んだ写真の場所 写真を表示する 写真をブラウズする 個々の写真を表示する ビデオクリップを再生する Live Photosを再生する メモリーを表示する メモリーを表示する メモリーをパーソナライズする バースト写真を表示する ほかの人から共有された写真を表示する テキスト認識表示を使用して写真の中のテキストを操作する 「画像を調べる」を使用して写真について調べる 写真の被写体を切り離してコピーする 写真を整理する/検索する タイトルやキャプションなどを追加する キーワードを追加する 写真をフィルタする/検索する 特定のタイプの項目を表示する
Utility First な CSS in JS フレームワークの導入と３ライブラリの比較 - JX通信社エンジニアブログ
JX 通信社のフロントエンドでは React TypeScript や Emotion のような CSS in JS を技術選定することが多いです。弊社 SaaS の FASTALERT、新型コロナ関連情報などでも同様の技術選定で、過去にもエンジニアブログで紹介してきました。 tech.jxpress.net tech.jxpress.net 今日は、Emotion の活用の極地「Utility First な CSS in JS フレームワーク」についてご紹介します。 Emotion で開発する悩み 素の Emotion や類似の CSS in JS ライブラリでは、 1 つの TS/JS ファイル内に CSS を書くような感じでスタイル設定を行っていきます*1。CSS in JS ライブラリに概ね共通しているのが、 styled.タグ名 でスタイリングすることです。 const Tit
Google Apps Scriptはライブラリを活用すべし【GAS】 🌴 officeの杜 🥥
Google Apps Scriptで開発をしていると、だんだん似たようなコードや同じ仕組みを同じプロジェクトに何度も書く事が出てきます。しかし、そのままでは他のプロジェクトで使い回しをしたり、コードを簡潔に書くにはちょっと不都合です。また、１つのスプレッドシートに複数のプロジェクトファイルを追加した場合、プロジェクトプロパティなどはそのプロジェクト内のものしか参照出来ないので、複数のプロジェクトで参照させたい場合、これでは困った事になります。 そこで活用したいのが、ライブラリ機能。なるべくなるべく小さな関数や決まった処理をするルーチンはライブラリにまとめて、足りない部分だけをコードで記述するようにすると、開発がとっても早くなります。但し、公式サイトにも掲載されていますが、ライブラリは使用するとプログラムの実行速度は遅くなりますので、注意が必要です。5分の壁問題が生じる場合には、あえて使わ
date-holidays という祝日ライブラリが良い意味で狂っていた - hnwの日記
世界には色々なマニアがいるなーという話を紹介します。 先日Node.jsで使える祝日ライブラリを探していたところ、複数の国や地域の祝日に対応しているライブラリ date-holidays を見つけました。 commenthol/date-holidays: worldwide holidays このライブラリは本稿執筆時点で143ヶ国379地域の祝日に対応しています。この時点で頭がおかしい（ほめ言葉）のがわかると思うんですが、さらに凄いのがこれらの祝日をすべてYAMLで定義しており、このYAMLが変態的だという点です。 YAMLによる祝日の定義例 どう凄いかは実際のYAMLを見た方が早いと思うので、例を紹介します。下記は日本の祝日の定義の一部です。 01-15: name: en: Coming of Age Day jp: 成人の日 active: - from: 1948-07-20
画像圧縮やオートコンプリートなどWeb開発を簡単にするJavaScriptライブラリ厳選まとめ！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、Webアプリやサービスなどを開発する際に簡単な記述でさまざまな機能を組み込めるJavaScriptライブラリをご紹介します。 画像、ファイル、音楽、オートコンプリート機能など、高度な技術をできるだけ簡単に実現してくれるJavaScriptライブラリを厳選し、その基本的な使い方も合わせて解説しているのでぜひ参考にしてみてください！ なお、JavaScriptはpaizaラーニングの「JavaScript入門編」で学ぶことができます。そちらも合わせてチェックしてみてください。 ■画像の圧縮機能を組み込めるライブラリ！ 【 Compressor.js 】 ブラウザに標準で提供されているtoBlob()を応用して、カスタマイズ可能な非可逆圧縮を手軽にWebページへ組み込めるJavaScriptライブラリです。 さまざまなフレームワークにも組み込
JavaScriptで電話番号のバリデーション＆自動フォーマット - Qiita
Google様のライブラリ使いましょう 電話番号のバリデーションを行う場合、 ググると（JSの場合は特に）正規表現で一生懸命頑張ってる記事ばかりヒットしますが、 天下のGoogle様がlibphonenumberなるライブラリを提供してくださっておいでです。 https://github.com/googlei18n/libphonenumber 自分で正規表現書いても辛いだけなので、大人しくこれ使いましょう。 どんだけすごいかはこのスライドが参考になります。 電話番号を扱う技術 by Shota Iguchi Closure Toolsが分からん・・・ 大人しくこれ使いましょうと言ったけど、実はとてもとっつきにくいです。 JS版はClosure Toolsを使ってコンパイルしなければ動かないから。 https://github.com/googlei18n/libphonenumber/
便利なのが登場！フォームのバリデーションをシンプルな記述で実装できる超軽量JavaScriptライブラリ -v8n | コリス
Webサイトやスマホアプリのどの部分にでもフォームに入力された値を検証するバリデーションを簡単に実装できる、わずか2.29kBの超軽量ライブラリを紹介します。 バリデーションでよく使用されるルールもデフォルトで30個以上用意されており、ルールをカスタマイズして利用するのも簡単です。 v8n -GitHub v8nの特徴 v8nのドキュメント v8nの使い方 v8nの特徴 v8nの名称は、「validation」の「v」と「n」の間に正確に8文字あるという意味です。 流暢でチェーン化可能なAPI チェーン化可能なAPIを使用して、フォームの検証を簡単に作成できます。 有用な標準検証ルール フォームの検証でよく使用される30個以上のルールが用意されています。 カスタマイズ性 フォームの検証用ルールは、簡単にカスタマイズできます。 非同期検証をサポート バックエンドでの検証のように時間のかかるル
Awesome JavaScript : 素晴らしい JavaScript のライブラリ・リソースの数々 - Qiita
元記事: Awesome JavaScript Awesome List in Qiita Awesome Ruby Awesome Java Awesome Node.js Awesome Python Awesome Go Awesome Selenium Awesome Appium パッケージマネージャ JavaScript ライブラリをホストし, それらを取得してパッケージ化するためのツールを提供します npm - npm は JavaScript のためのパッケージマネージャです. Bower - Web のためのパッケージマネージャ. component - より良い Web アプリケーションを構築するためのクライアントパッケージマネージャ. spm - 新しい静的パッケージマネージャ. jam - RequireJS のレポジトリと互換性があり, ブラウザーに焦点を当てたパ
2017年のフロントエンドエンジニアならこの程度は知ってて当然だよな？ - Qiita
って海の向こうの人が言ってました。 私はjQueryさえあれば概ね生きていけるので全然知らないけど、 あなたは全部知ってるフロントエンドエンジニアなんだね。すごーい！ 以下はFront-End Developer Handbook 2017の第三部、Front-end Developer Toolsからリンクされているツールと、その簡単な紹介です。 ドキュメントツール Dash 150以上のライブラリのAPIリファレンスを検索できる。有料、Mac専用。 DevDocs 200以上のライブラリをオンラインで検索できる。無料。 Velocity 中身はDashと同じ。 有料、Windows専用。 Zeal 200以上略 無料のオフラインドキュメント。 SEOツール Keyword Tool 検索ワードを入れると関連キーワードを教えてくれる。 Google Webmasters Search C
Index of /
Index of / NameLast modifiedSizeDescription ChangeLog2014-03-18 16:11 3.8K index.html.en2014-03-18 16:11 7.1K index.html.ja2014-03-18 16:11 14K kakasi.css2000-01-25 00:55 800 orz.gif2004-05-24 22:17 4.1K robots.txt2000-01-25 00:55 0 stable/2014-03-18 15:40 - Apache/2.4.56 (Debian) Server at kakasi.namazu.org Port 80
Lockr – localStorageを使いたくなる小さなJavaScriptライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTML5で提供される新しいAPIの一つにlocalStorageがあります。使ってみたいと思いつつも何となく面倒そうで避けてしまっている、なんて人もいるのではないでしょうか。利用するのに複雑な仕組みになっているとつい敬遠してしまうでしょう。 そこで紹介したいのがLockrです。ごく小さなlocalStorageラッパーで、高校のロッカーくらい簡単な仕組みだそうです。 使い方 Lockrは依存ライブラリもなく、JavaScriptファイルを読み込むだけで使えます。 <script src="/path/to/lockr.js" type="text/javascript"></script> これで準備完了です。 デモ APIはRedisを参考にしている層で、set/getでシンプ
ファイルのアップ、切り取り、リサイズ、ウェブカム利用、フィルタ等ができる超多機能JSライブラリ「FileAPI」:phpspot開発日誌
ファイルのアップ、切り取り、リサイズ、ウェブカム利用、フィルタ等ができる超多機能JSライブラリ「FileAPI」 2013年11月13日- FileAPI ? a set of javascript tools for working with files. ファイルのアップ、切り取り、リサイズ、ウェブカム利用、フィルタ等ができる超多機能JSライブラリ「FileAPI」。 ファイルのアップは複数アップやドラッグ＆ドロップアップ、ウェブカムからの取り込みも可能で、アップした画像にウォーターマークをつけたり、Instagram風にフィルタをつけたり、とにかくファイルアップして画像を扱うようなサイトを作る際に使えそうなJSライブラリです。 サーバサイド用にはphpクラスが用意されており、サーバサイドにも対応。 デモを見てみるだけでも何かできそうな気になります。 関連エントリ フラットで超カッコい
Yahooが作ったピュアCSSのUIライブラリ「Pure」:phpspot開発日誌
Pure Yahooが作ったピュアCSSのUIライブラリ「Pure」 グリッド、フォーム、ボタン、テーブル、メニュー等を実現するCSSモジュールです。 なんとなくBootstrapっぽい感じがしますが、JavaScriptレスというのが特徴なんでしょうか。 今時JavaScriptは普通に動くでしょ、という方もいるかもしれませんが、CSSのみなので5.7KBという軽量さがアドバンテージになるのかもしれませんね。 レスポンシブサイトをつくる際にも使えるということで、選択肢の１つとして評価検証してみてもよいのかも。 関連エントリ レスポンシブに使えるタブUI実装jQueryプラグイン「Easy-Responsive-Tabs-to-Accordion」 範囲指定が可能になるUI実装jQueryプラグイン「noUiSlider」 フラットで綺麗なUIライブラリFlatUIのモバイルテーマ「Fla
すぐれた PHP ライブラリとリソース
すぐれた PHP ライブラリとリソース Awesome PHP の記事をフォークして翻訳したものです (2013年4月25日)。おどろくほどすごい PHP ライブラリ、リソースやちょっとした情報のリストです。 【訳者コメント】 PHP 入門者のかたにはクィックリファレンスとして PHP: The Right Way 、セキュリティに関しては2011年3月に出版された 体系的に学ぶ 安全なWebアプリケーションの作り方 をおすすめします。 Composer Composer/Packagist - パッケージと依存マネージャー Composer Installers - マルチフレームワーク Composer ライブラリインストーラー。 Composer 関連 Satis - スタティック Composer リポジトリジェネレーター。 Composition - 実行時における Compos
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptユーティリティライブラリの紹介
【保存版】CSS3アニメーションを簡単に利用できるライブラリのまとめ
IDEA * IDEA
IDEA * IDEA
