そもそもnpmからわからない
はじめに やっぱりwebpackがわからない（エピソード1）、エピソード2を公開しているのですが、そもそもnpmからわからない、という人もいると思いますので、今回はnpmに関して説明します。 なお、やっぱりwebpackがわからないではViteに関して触れていますが、Node.jsもDenoという新しいランタイム環境が登場しています。ですが、やはりまだ開発現場で使用するには難しいと思いますので、Node.jsを使用するうえでnpmはちゃんと理解しておいた方がいいです。 npmとは npm とはNode.jsのパッケージを管理するシステム、所謂パッケージ管理システムです。アプリケーションを作成する際、便利なパッケージをそのプロジェクトにインストールして、使用することができます。 ところで、パッケージとは一体何なのでしょうか？ パッケージとは システム開発ではモジュール、パッケージ 、ライブラ
AIでコードを生成！ テキストを入力すると、UI要素やコンポーネントを実装するHTMLとCSSを生成してくれる -AI CODE
AIは、Web制作にもすごい速さで浸透しそうですね。今までも似たツールがいくつかあったのですが、かなり出来がよいので紹介したいと思います。 テキストを入力、たとえば「シンプルでモダンなナビゲーション アイテムは日本語」と入力すると、そのUI要素を実装するHTMLとCSSを生成してくれるAIツールを紹介します。 AI CODE 実際に試してみましたが、ナビゲーション、ボタン、カード、フォームなど、UI要素やUIコンポーネントやレイアウトが数秒で簡単に実装されました。 また、次のバージョンではJavaScriptにも対応して、UIライブラリも追加する予定とのことです。 AI CODEの使い方 AI CODEの使い方は簡単、登録など面倒なことは一切不要です。 サイトにアクセスし、テキストを入力して「Generate」ボタンを押すだけです。 テキストは英語だけでなく、日本語でも大丈夫です。たとえば
ChatGPTのVSCodeプラグインが神すぎる件について
(追記) 自動ログイン機能が利用規約に抵触していたらしく、マーケットプレイスより削除されました。 GitHubにAPIを使ったものは残っているので、知識があれば動作させられるかと思います。（自己責任） これを使った再配布等の行動はトラブルの元なので控えた方がよいでしょう。 ChatGPT いいよね 最近一番メッセージやりとりしてるのChatGPTだし、なんなら1日にしゃべる量よりChatGPTと話してることの方が多い可能性まであります ChatGPTのチャットツール自体はこちらから参加して試せるわけですが、プログラムを書くときに使ったことのない言語やライブラリを開拓する際ここまで有難い存在はありません． このようにネット上を探し回ると地味に時間のかかる情報もチャット形式で手に入ります． さて、今回の話題ですが、我が愛しのテキストエディタ「Visual Studio Code」のChatGP
【解説】フレームワークとライブラリの違い
はじめに 今回の記事では、プログラマー間で見解が分かれるライブラリとフレームワークの違いを徹底解説する。我々プログラマーはアプリケーション等を開発する際にフレームワークやライブラリを駆使する。その中でも、「フレームワークとライブラリの違いがわからない」と考える人も少なくないだろう。中には混同して使う人がいるかもしれない。両者は厳密に言えば異なる意味を示す。 フレームワークとは フレームワーク(framework)はアプリケーションを開発するのに必要な機能がデフォルトで揃っているものを示す。アプリケーションとして動く骨組みが用意されているので、別途プログラムを書かなくても最低限のアプリケーションとして動作する。フレームワークがあれば、我々プログラマーはゼロからアプリケーションを開発する必要はない。フレームワークには、タスクを実行するために書かれた再利用可能なコードやプログラムが含まれていて、
時短してますか？Web制作が変わる最新オンラインツール38個まとめ
日頃の忙しい業務を少しでも楽にしたい、効率化したいと考えている人にぴったりな、Web制作で使える最新オンラインツールをまとめてご紹介します。 コピペで利用できるお手軽CSSツールやSVGツール、コード知識不要のノーコードツール、色に困ったときに便利な配色ツールなど、クリエイティブな案件で活用したい新しいツールを揃えています。 カテゴリごとに整理しているので、制作フローに新しく追加してみてはいかがでしょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. プロトタイプ、アイコンツール 5. コラボ、リモートワークツール 6. 面白、クリエイティブツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ Web制作便利ツール クリックで一発コピペできる、120種類以上のCSSボタンを集めたライブラリ。3Dやグラデーション、レトロな
カルーセルUIを実現するJSライブラリまとめ(2024年版) - 導入手間や機能の比較紹介 - ICS MEDIA
いずれもMITライセンスで公開されていますので、個人・商用問わず利用可能です。 Slick.js Slickスリック.jsは簡潔なコードで実装できるのが特徴のモバイルフレンドリーなカルーセルライブラリです。機能は少なめですが、ナビゲーションや表示するスライド数を変更するといった基本的な機能は備わっています。jQueryプラグインのため実装にはjQueryを読み込む必要があります。タッチ・スワイプ操作にも対応しています。ReactやVue向けのモジュール、TypeScriptのサポートは公式で提供されていませんがOSSで存在します。 このJSライブラリの基本的な実装と、アニメーションをフェードに変えた作例を用意しました。 基本の作例 サンプルを別ウインドウで開く コードを確認する <div class="slick carousel"> <div>1</div> <div>2</div> <
フロントエンドから取り組むデザインシステムの改善 #UI
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、フロントエンドエンジニアの近藤です。Yahoo! JAPANのスマートフォンのウェブトップページのフロントエンド開発業務と、社内で利用されているデザインシステムの開発に携わっています。 近年、デジタルプロダクトを持つ多くの企業で、デザインシステムが活用されています。デザインシステムには、ビジュアルとしてのデザインの規定だけでなく、実際のプロダクトに利用できるUIライブラリやコンポーネントライブラリなどが含まれます。そのため、デザインシステムの構築にはデザインとエンジニアリングの両方の力が不可欠です。 本記事では、私が開発に携わっているデザインシステム「Riff」の紹介とともに、フロントエンド部分におけるデザインシステム
地理空間情報を扱うなら知っておきたいPythonライブラリ、GeoPandas入門~基礎編~ | 宙畑
さまざまなデータを地理空間情報として重畳する上で有用なPythonのライブラリであるGeoPandas。前編ではGeoPandasを用いたデータの描画方法など基礎的な扱い方を紹介し、後編では衛星データと組み合わせて解析結果を可視化する方法を紹介します。 Pythonで地理空間情報を行う場合、GeoPandasの使い方を覚えておくととても便利です。 例えば、都道府県別の気象データを持っていたとします。そのテーブルデータ(csv)には地理情報と言えば、都道府県の名称くらいしかありません。このような場合、これを日本地図の上に重畳して可視化することはできません。 しかし、このデータに地図上に描画できる情報を与えることさえできれば、好きなデータを地図の上に重ねることができます。このようなことをしたい場合に、GeoPandasの使い方を知っておけば助けになります。 今回は、簡単な例を通じて、GeoPa
IT(?)に立ち向かうための心構えとか考え方
anond:20201130214610 いろいろ面白かったので、適当に回答する。 ＞ 1.具体的な事が分からないプログラミングで主にやる事は下記の2つ。 ①IFでAかBを選択させてどっちかの設定を実行 ②Whileで決められた回数分繰り返す これでやりたいことは分かる。分かるけれどこれでどうやって動画や音楽のエンコードをしたり 画像処理をしたりするソフトウェアになるのかというのがよく分からない。 とてつもなく複雑で冗長な処理によって実行されている。 複雑すぎて人間の直感で理解することは不可能だ。 わかりやすいので画像処理でいうと、数十万から数百万の画素（RGBAの24bitで表される数値）を小さなブロックに分解し、数学的に周波数の重なりとして計算して変換、含まれる頻出パターンをテーブルにして圧縮伸張を行なう。みたいなことが瞬間的に行われている。 「まさかそんな事できるわけないだろ」という
全部、完全に商用利用無料！さまざまなUIデザインに適した1,064種類のSVGアイコン素材 -Emblemicons
企業サイトやプロダクトをはじめ、オンラインショップ、アプリ、プレゼン、学術プロジェクトなど、さまざまなUIデザインに適したSVGアイコンが無料で利用できるEmblemiconsを紹介します。 先日ローンチしたばかりで、アイコンの種類はなんと1,064種類！ SVGだけでなく、各サイズのPNGも揃っており、すべてオープンソースです。 Emblemicons Emblemicons -GitHub Emblemiconsの特徴 Emblemiconsのダウンロード Emblemiconsの使い方 Emblemiconsの特徴 Emblemiconsは、デザイン・デベロッパー・プレゼン・学術プロジェクトなどで一般的かつ、頻繁に使用されるアイコンのオープンソースライブラリです。 MITライセンスで、個人および商用のプロジェクトで、アイコンは完全に自由に使用およびダウンロードできます。
PyTorch／TensorFlow／Keras／scikit-learnライブラリ内蔵のデータセット一覧
PyTorch／TensorFlow／Keras／scikit-learnライブラリ内蔵のデータセット一覧：AI・機械学習のデータセット辞典 機械学習やディープラーニング用の主要ライブラリが提供する「画像／音声／テキストなどのデータセット」の名前とリンクを表にまとめ、典型的な使い方を簡単に紹介する。 連載目次 本連載「AI・機械学習のデータセット辞典」では、ここまで主に、scikit-learnやKeras／TensorFlow（tf.keras）、TensorFlow Datasets、PyTorchといった主要なPythonライブラリに共通的に含まれる代表的なデータセットを紹介し、各ライブラリでの典型的な実装コード例を示してきた。しかし、これらの全ライブラリに共通的に含まれているデータセットはまれで非常に少ない。よってこれからは、個々のライブラリに1つしか含まれていないようなこまごまと
Atomic Designを実現するコンポーネント指向開発のいま - Qiita
イベント概要 https://base.connpass.com/event/122517/ 2019/03/20(水) 20:00 〜 21:30 会場：hoops link tokyo（東京都渋谷区宇田川町28-4 三井住友銀行 渋谷西ビル6階） ハッシュタグ：#atomic_shibuya 次の5年を支えるVue.js製UIコンポーネントライブラリを育てる スライド：https://speakerdeck.com/simezi9/build-up-vue-dot-js-component-library-for-next-five-years なぜコンポーネントライブラリを作ったのか ミッション：価値の交換をよりシンプルにし、世界中の人々が最適な経済活動を行えるようにする ネットショップ作成サービス・ショッピングアプリ「BASE」 裏側の実装 サービスインから継ぎ足し続けられたコード
個人でWebアプリを開発する時に便利な高機能JavaScriptライブラリ6選！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、Webアプリやサービス作りなどで便利に使える高機能なJavaScriptライブラリを厳選してご紹介してみようと思います。 ライブラリ単体でそのままWebアプリとしてリリースできそうなレベルのものから、ちょっとした機能を追加できるものまでピックアップしてみたのでご興味がある方はぜひ参考にしてみてください！ なお、JavaScriptはpaizaラーニングの「JavaScript入門編」で学ぶことができます。そちらも合わせてチェックしてみてください。 オーディオファイルを柔軟に制御できるライブラリ！ 【 howler.js 】 MP3 / WAV / AAC / OGG…など多彩なコーデックに対応しているうえ、オーディオスプライトによる制御も可能なライブラリが「howler.js」です。 音楽プレイヤーはもちろん、オーディオ制作アプリやゲー
[JS]便利なのが登場！実装はかなり簡単なのに、さまざまなチャートやグラフを実装できるスクリプト -ApexCharts
チャートやグラフを実装するのは面倒、と思われがちですが、そんな人にはこのスクリプトをお勧めします。 div要素一つと外部ファイルを一つ、あとはグラフのデータを設定するだけで、さまざまなチャートやグラフが簡単に実装できてしまう単体のJavaScriptライブラリを紹介します。 レスポンシブ対応で、アニメーションにも対応、カラー変更やグラデーションやパターンにも対応している優れものです。 ApexCharts ApexCharts -GitHub ApexChartsの特徴 ApexChartsのデモ ApexChartsの使い方 ApexChartsの特徴 ApexChartsはシンプルなAPIを使用して、インタラクティブなチャートやビジュアライゼーションを作成するためのモダンJavaScriptのチャート作成ライブラリです。 MITライセンスで、個人でも商用でも無料で利用できます。 レスポ
![[JS]便利なのが登場！実装はかなり簡単なのに、さまざまなチャートやグラフを実装できるスクリプト -ApexCharts](https://cdn-ak-scissors.b.st-hatena.com/image/square/b793c623eb3187e192351b9611f75aea908bbf46/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018080101-02.png)
面倒な作業不要で、Webアプリ開発が劇的にはかどる！至高のJavaScriptライブラリ6選 - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、Webサービスやアプリ開発などにとても便利なJavaScriptライブラリを厳選してご紹介しようと思います！ 強力な独自機能を簡単に追加できるものやトレンドに合わせたWebデザインを構築できるもの、そのままWebサービスとして利用できるものまで、ピックアップしてみました。 これからWeb開発を始めようという人はもちろんですが、開発ネタに困っている人も何か良いアイデアが発見できるかもしれないので、ぜひ参考にしてみてください！ ■波形表示やプレイヤーも作れる高機能な音楽ライブラリ！ 【 wavesurfer.js 】 音声ファイルを読み込むだけでグラフィカルな波形表示が可能で、多彩なオプションを利用することで自在に音声を制御できるJavaScriptライブラリです。 音声の再生・早送り・巻き戻し・ミュートなどの基本機能はもちろん、音声の書き
人気上昇中のJavaScriptライブラリを調べてみた【2016年版】
新しいWeb開発フレームワークも登場！ 2015年中に人気が急上昇してきており、「2016年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表する。 ← 前回 連載 INDEX 2016年が始まり、心機一転で「今年こそはWeb開発を頑張ろう」と思っている人も少なくないだろう。そんな方々に向けて本稿では、2015年中に人気が急上昇してきており、「2016年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表する（※昨年の2015年版はこちら）。 なお、本稿のランキング決定では、検索キーワードの流行を調査可能な「Googleトレンド」（「すべての国」「過去 12 か月間」「コンピュータ、電化製品」「ウェブ検索」という条件で絞り込み）を使って、ライブラリの人気をジャンルごとに比較した（※ライブラリ名が一般的な英単語の場合、Web検索時に、
Budou - 機械学習を用いた日本語改行問題へのソリューション - ウェブ雑記
こんにちは！ 日本語のウェブサイトを作っていると、日本語特有の問題にぶちあたることがありますよね。 その中でも今回着目したいのは、日本語改行問題。最近、この問題を解決するためのライブラリを公開したので、紹介します。 github.com そもそも日本語改行問題とは何か ウェブブラウザで日本語で書かれたウェブサイトを見ていると、ときどき文章が変なところで改行されているのを目にすることがありますよね。 たとえば、こんなかんじ。 「ソリューション」が「ソリューショ」と「ン」に分かれてしまっています。読みにくいですね。 英語では単語がスペースによって区切られますが、日本語や中国語などのアジア圏の言語では単語がスペースで区切られないことが多いです。 そのため、英語では単語の途中で改行されることは通常ありませんが、日本語では単語の途中で改行されることがよくあります。 本文ならともかく、見出しやキャッチ
【CSS】Googleが公開したUI/UXライブラリ「Material Design Lite」を試してみた | unitopi - ユニトピ -
Androidをはじめ、Googleサービスで導入されているMaterial Design（マテリアルデザイン）のUI/UXを簡単に使うことができるライブラリが公開されました。 配布元はGoogleで、Material Design Liteと呼ばれるライブラリです。 CSS font Javascript のライブラリです。 早速使い方と使用例を見て行きたいと思います。 ダウンロード Material Design Lite 上記URLからどうぞ。 DLが済んだら配置し、以下のように指定してあげます。 <link rel="stylesheet" href="./material.min.css"> <script src="./material.min.js"></script> <link rel="stylesheet" href="//fonts.googleapis.com/i
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TURNBOX.js - NOHT CO.,LTD.
UIってPhotoshopでどう作るの？チュートリアルで解説
