この記事では、Webデザインやグラフィックデザインの制作スピードを短縮し、生産性をアップする、便利な最新オンラインツールをまとめてご紹介します。 「もっと早く知りたかった」と思わせる、面倒な作業をサクサクこなす時短ツールが勢揃いです。カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. デザインコレクション 3. イラスト系ライブラリ 4. 配色ツール 5. プロトタイプツール 6. コラボ、リモートワークツール 7. 面白、クリエイティブツール Web制作の常識が変わる、便利な最新オンラインツールまとめ Web制作便利ツール The Hero Generator ウェブサイトの魅力的なヒーローイメージを作成できるオンラインツール。グラデーションオーバーレイやボタンスタイル、見出しタイトルの余白など細かい部分も手
「VS Code Meetup」は、強力かつ軽量なオープンソースのコードエディター「Visual Studio Code」のミートアップです。今年もVS Code Meetup 主催の年次カンファレンス、「VS Code Conference Japan 2021」が開催されました。招待講演では、SF作家の藤井太洋氏が登壇。VS Codeで執筆を支援する機能拡張「novel-writer」の制作について発表しました。 『Hello, World!』で吉川英治文学新人賞を受賞したSF作家 藤井：お時間いただきまして、ありがとうございます。本日、「Visual Studio Codeで小説を書く」というセッションを持たせていただく、SF作家の藤井太洋です。それでは、プレゼンテーションを進めます。 まず簡単な自己紹介から。私は、2012年に『Gene Mapper』というサイバーパンク小説をセル
Webページやスマホアプリでよく見かけるレイアウト、ナビゲーション、UIコンポーネントなど、それだけを実装するHTMLとCSSのシンプルなコードをまとめたCSS Layoutを紹介します。 それだけを実装するため、HTMLとCSSのコードは非常にシンプル、カスタマイズも簡単だと思います。スニペットに登録しておくと、便利ですね。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 レイアウトやUIコンポーネントだけを実装するコード CSS Layoutの特徴 CSS Layoutは、よく使用されるレイアウトやUIコンポーネントだけを実装するためのHTMLとCSSのコードがまとめられたコレクションです。 MITライセンスで、商用プロジェクトでも無料で利用できます。 CSS Layout 依存関係は一切無し フレームワークは必要無し ピュアCSSで実装、CSS
企業サイトやプロダクトをはじめ、オンラインショップ、アプリ、プレゼン、学術プロジェクトなど、さまざまなUIデザインに適したSVGアイコンが無料で利用できるEmblemiconsを紹介します。 先日ローンチしたばかりで、アイコンの種類はなんと1,064種類！ SVGだけでなく、各サイズのPNGも揃っており、すべてオープンソースです。 Emblemicons Emblemicons -GitHub Emblemiconsの特徴 Emblemiconsのダウンロード Emblemiconsの使い方 Emblemiconsの特徴 Emblemiconsは、デザイン・デベロッパー・プレゼン・学術プロジェクトなどで一般的かつ、頻繁に使用されるアイコンのオープンソースライブラリです。 MITライセンスで、個人および商用のプロジェクトで、アイコンは完全に自由に使用およびダウンロードできます。
まえがき開発中のソフトウェアのライセンスを策定するため、現時点でのベストプラクティスについて探っていたところ、ここ数年の OSS ライセンスの動向が面白かったので復習も兼ねてまとめました。 特に、Umbrel が採用したという PolyForm という新しいライセンス形態が面白かったので、これについて詳しく述べます。 なぜ今ライセンスについてまとめるのか私はソフトウェアやサービスをマネタイズする方法について興味があり、特にビットコインの応用について調べたりしています。 ビットコイン (Lightning Network) を HTTP で利用することで、Web API の課金方法の可能性は大きく広がることは間違いないのですが、これはあくまで単なる支払いの手法であって、広く使われる事を前提としたソフトウェアの開発を支える手法にすることは(それだけでは)難しいという問題があります。 ソフトウェ
ソースコードを公開したソフトウェアで収益を得ている会社をまとめる。いわゆる「オープンソースソフトウェア（OSS）」という有名な言葉を使わなかったのは、OSS の定義に当てはまらない、またはその可能性があるものが含まれているため。 この記事では "OSS" の定義に当てはまらないものも含め、主要な事業を構成するソフトウェアを一定のライセンスの下で公開している会社をまとめていく。このようにソースコードを公開して利用者やフィードバックを集めるビジネスモデルは open core とか COSS: Commercial Open Source Software と呼ばれているようだ。 企業が「ソースコードが公開されているソフトウェア」を利用するメリットとしては、主に以下の2つがあると考えられる。 コア機能の開発に集中できる 自社のビジネスの核となるソフトウェアの開発に集中し、それ以外の機能的・非機
HTMLのtableにクラスを加えるだけで、グラフやチャートを簡単に実装できるCSSのフレームワーク -Charts.css
棒グラフや折れ線グラフ、どうやって実装していますか？ Charts.cssなら簡単です。データをtableタグで実装し、CSSのクラスをtableに加えるだけで横棒グラフ、棒線グラフ、折れ線グラフ、エリアグラフなどを簡単に実装できるCSSのフレームワークを紹介します。 HTMLは普通の表組みなのでアクセシブル、グラフやチャートはレスポンシブにも完全対応した優れものです。 Charts.css Charts.css -GitHub Charts.cssの特徴 Charts.cssのデモ Charts.cssの使い方 Charts.cssの特徴 Charts.cssはtableで実装した表組みにシンプルなCSSのクラスを加えるだけで、さまざまなグラフやチャートを実装できるフレームワークです。カスタマイズも簡単で、ユーティリティのクラスも豊富に用意されています。 HTMLとCSSだけで実装 セマ
JavaScript Plugin Architecture この書籍はJavaScriptのライブラリやツールにおけるプラグインアーキテクチャについて見ていくことを目的としたものです。 次の形式で読むことができます。 Web版 PDF形式 ePub形式 Mobi形式 この書籍のソースコードは、次のGitHubリポジトリに公開されています。 azu/JavaScript-Plugin-Architecture: JavaScriptプラグインアーキテクチャの本 Twitterのハッシュタグは#js_plugin_book 更新情報はRSSやリリースノートから見ることができます。 はじめに JavaScriptの世界では1つの大きなライブラリよりも小さなライブラリを組み合わせていくようなスタイルが多く見られます。小さなものを組み合わせて作るためには、プラグインと呼ばれる拡張の仕組みが必要とな
本書では、小さなOSをゼロから少しずつ作っていきます。 OSと聞くと腰が引けるかもしれませんが、OS (特にカーネル) の基本機能は案外単純です。巨大なオープンソースソフトウェアとしてよく挙げられるLinuxでさえ、バージョン0.01はたった8413行でした。様々な要求に応えるために次第に肥大化していっただけで、当初は大変素朴な実装になっていました。 本書では素朴なコンテキストスイッチ、ページング、ユーザーモード、コマンドラインシェル、ディスクデバイスドライバ、ファイルの読み書きをC言語で実装します。これだけ様々な機能が詰め込まれているのに、コードは合計でたった1000行未満です。 「1000行なら1日でできそう」と思うかもしれませんが、初学者には少なくとも3日はかかるでしょう。OS自作のハマりポイントは「デバッグ」です。アプリケーション開発とは違うデバッグ手法・能力を習得する必要がありま
Web制作者必見！ VS Codeのおすすめ機能拡張のまとめ、HTMLやCSSやJavaScriptのコードを書く時に便利
Visual Studio Code（以下、VS Code）が素晴らしいエディタである理由の一つは、デベロッパーの生産性を向上させるVS Codeの機能拡張の巨大なライブラリがあることです。 その中から、HTMLやCSSやJavaScriptのコードを書く時に便利なVS Codeの機能拡張を紹介します。 My 12 Favorite VSCode Extensions by Katherine Peterson 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 VS Codeとは VS Codeの機能拡張 VS Codeのおすすめ機能拡張 VS Codeとは VS Code(Visual Studio Code)は、Microsoftが提供する統合ツールを備えた強力で軽量なコードエディタです。MITライセンスで、商用でも完全に無料
商用のプロジェクトでも無料で利用できる、管理画面・ダッシュボードのレイアウトやUIコンポーネントが揃ったテンプレートを紹介します。 このテンプレートを使用すると、管理画面・ダッシュボードで必要なコンテンツを簡単に作成できます。 Stisla 管理画面・ダッシュボードに特化されたUIコンポーネントがほとんどすべて揃ったテンプレート。 30以上のサードパーティのライブラリと統合、多くのコンポーネントを簡単に利用できます。 HTML5とCSS3で記述されており、すべてのモダンブラウザでサポートされています。 Bootstrap 4をベースに、Flexboxでレイアウトされています。 一部のコンポーネントにはより簡単にやり取りするために、JavaScript APIを使用。 MITライセンスで、商用プロジェクトでも無料で利用できます。
リングバッファのイメージ図 1. リングバッファとは何か 機能的にはFirst In First Out (FIFO)とも呼ばれるキューの一種であるが、リング状にバッファを置いてそれの中でReadとWriteのインデックスがグルグルと回る構造をとる事によって容量に上限ができることと引き換えに高速な読み書き速度を得たものである。キューを単に実装するだけなら山ほど方法があって線形リストを使ってもいいしスタックを2つ使っても原理的には可能だ。その中でもリングバッファを用いた方法の利点はひとえに性能の高さでありメモリ確保などを行わないお陰でシステム系の様々な場所で使われている。 これの実装自体は情報系の大学生の演習レベルの難度であるが少し奥が深い。まずリングバッファのスタンダードなインタフェースと実装は以下のようなものである。 class RingBuffer { public: explicit
2020年版Pythonを学習するためのオススメ本10冊と学んだことのQiitaへのメモ - karaage. [からあげ]
Pythonの勉強をしています 今年の2月29日「PyCon Mini Shizuoka」というイベントでキーノートスピーカーとして登壇予定です（詳細は以下参照下さい）。 キーノートスピーカーを引き受けたものの。よく考えると、私はPythonがあんまり分かっていません。「これは、幾ら何でもまずいのでは？」というお気持ちになりました。そこで、今年の年末年始を中心にPythonの本をいくつか読んで、PyConの議論についていけるように、少しでもPythonへの理解を深めておくことにしました。 学んだことは、折角なので以下のQiita記事にまとめていきます（随時追加中）。 この記事では、学習に使用した本と、簡単な感想を書いてみます。興味ある方は参考にしてみて下さい。 私のブログから買うのが嫌だ！という人は、タイトルをコピーしてAmazonで検索してもらえば大丈夫ですし、もちろん買わなくても大丈夫
![2020年版Pythonを学習するためのオススメ本10冊と学んだことのQiitaへのメモ - karaage. [からあげ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/86dec44b8c5acae148f7ed1102b0fef87e1bec10/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fk%2Fkaraage%2F20200104%2F20200104124809.png)
この記事では、日常行っているWebデザインやグラフィックデザインの制作が格段スピードアップする、便利な最新オンラインツールをまとめてご紹介しています。 カテゴリ分けされたこれらのツールやサービスを利用することで、面倒な作業を自動化し、生産性をアップすることができるでしょう。一度使いはじめると「これなしじゃ考えられない。」、そんな便利ツールが揃います。 コンテンツ目次 1. デザインコレクション 2. イラスト系ライブラリ 3. モックアップツール 4. デザインからコードへの変換ツール 5. プロトタイプツール 6. 生産性アップツール ウェブ制作がすご楽！便利な最新オンラインツールまとめ デザインコレクション SVG Arista このツールはCSSコードを使って、アップロードしたSVGファイルのstrokeとfillプロパティのアニメーションを作成するAnimistaのスピンオフ・プロ
新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました アニメーションを作る時に、「思いついた演出をすぐに実装したい」「頭の中ではできているのに、コーディングするのが面倒」と思ったことはありませんか？アニメーション作成にはライブラリを使用することが多いと思いますが、使い方を調べて覚えて、ドキュメントからコピペしたり、ひたすらタイピングをして… 私はこれらの問題を解決するために、「Tween24」というライブラリを作りました。Tween24はメソッドチェーンで記述するのが特徴で、たった1行でアニメーションが実装できます。依存ライブラリもなく、単体で動作します。アニメーションライブラリの多くはオブジェクト型でプロパティを指定するためタイピングが多くなりがちですが、メソッドチェーンであればエディターのコード補完機能でスラスラと記述できます。 その他にも、メソ
Webサイトやスマホアプリでよく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのコードがまとめられたコレクションを紹介します。 フレームワークなども便利ですが、それだけを実装するためのコードなので、非常にシンプルでカスタマイズも簡単だと思います。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 CSSで実装するレイアウト・UIコンポーネント CSS Layoutの特徴 CSS Layoutはよく使われるレイアウトやUIコンポーネントだけを実装するためのHTMLとCSSのコードがまとめられたコレクションです。 MITライセンスで、商用プロジェクトでも無料で利用できます。
シンプルなHTMLのみを使用して、モダンなWebページを簡単に作成できるclassレスの超軽量CSSフレームワークを紹介します。 シンプルなブログや自己紹介ページなどをさくっと作成したい時に便利で、CSSリセットとして利用するのもありかもしれません。 new.css new.css -GitHub new.cssの特徴 new.cssのデモ new.cssの使い方 new.cssの特徴 new.cssは、HTMLのみを使用してモダンなWebサイトを作成するためのclassレスのフレームワークです。HTMLの実用的なデフォルトのスタイルを活かし、美しく見えるようにスタイルされています。 超軽量4.8KbのCSSフレームワーク。 用意するのは、HTMLファイルのみ。 マークダウンで生成されたHTMLのレンダリング。 シンプルなブログや自己紹介ページに最適。 MITライセンスで、商用プロジェクト
Webページのレスポンシブの確認が簡単にできる、新しい無料アプリがリリースされました！ iPhone, Android, Pixelのスマホをはじめ、タブレット、ラップトップ、ワイドスクリーンなどのサイズでWebページを表示して確認ができます。 Windows, macOS, Linux対応のアプリで、しかもオープンソースです！ Responsivize Responsivize -GitHub Responsivizeの特徴 Responsivizeのダウンロード Responsivizeの使い方 Responsivizeの特徴 Responsivizeは、レスポンシブ対応のWebページをさまざまなデバイスのサイズで確認できる便利ツールです！ 当方の日本語環境（M1 Mac, Windows10）で問題なく動作しました。 Responsivize レスポンシブWebサイトの確認が簡単にで
よく使用されるWebページのレイアウトやUI要素91種類をシンプルなCSSで実装するコードのまとめ -CSS Layout
最近のWebサイトで見かける、ページのレイアウトをはじめ、ナビゲーション、フォームのさまざまな入力要素、インタラクション要素、UI要素などのCSSでの実装コードをまとめたCSS Layoutを紹介します。 すべてシンプルなコードで実装されており、外部ファイルやフレームワークは一切必要ないので、簡単に利用できます。 ブックマークや、スニペットに登録しておくと便利ですね。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 CSS Layoutの使い方 CSS LayoutのレイアウトやUI要素91種類 CSS Layoutの特徴 CSS Layoutは、CSSで作成された一般的なレイアウトとパターンのコレクションです。 依存は一切なし フレームワークも必要なし CSSハックもなし すべて実際の使用例 MITライセンスで、商用プロジェクトでも無料で利用できま
pdfmeとは Website: https://pdfme.com/ TypeScriptで書かれたオープンソースの無料の帳票エンジン。 テンプレートを使って宣言的にPDFを作成でき、サーバー、ブラウザどちらでも動作する。 2022年2月にbeta版としてリリースしてから現在 Version3で GitHubではStartが1500、npmではバラツキはあるが週間1万件くらいのダウンロードがある。 自分が把握しているだけで、世界中で採用事例があり、電子カルテ作成、工場の手順書作成、ECのカスタムパッケージ制作ソフトなど、すでにいろんなサービスに組み込まれている。 この記事ではどのようなモチベーションでpdfmeを開発しているのかということを説明したいと思います。 なんで帳票エンジンを新規開発するのか PDFファイルを作成・編集するという観点ではpdfkitという素晴らしいライブラリが20
企業サイトやプロダクトページをはじめ、オンラインショップ、アプリなど、WebのUIデザインに適したSVGアイコンが無料で利用できるGlyphsを紹介します。 アイコンの種類はなんと1,130種類！ アイコンのバリエーションも豊富で、ソリッドやベタ塗りだけでなく、フルカラーも揃っています。もちろん、SVGなのでカラーやサイズなどを簡単に変更できます。 各アイコンは5種類のバリエーションがある Figmaでデザインされた1,000種類を超える編集可能なアイコン。 任意のアプリケーションで使用するためのWebコンポーネント。 FigmaからSVGをダウンロードするためのCLIユーティリティ。 目的のアイコンはフォルダやタグで簡単に検索可能。 ドキュメントとガイドを完備。 ダークモード対応 MITライセンスで、商用プロジェクトでも無料で利用できます。 アイコンの編集も簡単、サイズやカラーの変更だけ
シンプルなHTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリを紹介します。 デスクトップではホバー時のエフェクトとして、スマホではフォーカス時のエフェクトとして適用されるので、どちらでも楽しめます。 Izmir Izmir -GitHub Izmirの特徴 Izmirのデモ Izmirの使い方 Izmirの特徴 画像をホバーすると多彩なアニメーションを適用します。 エフェクトを組み合わせることで、2000通り以上のエフェクトを使用可能。 20種類のボーダーエフェクト、9種類の画像エフェクト、12種類のテキストエフェクト。 オーバーレイのスタイル、アニメーションの遅延、テキストのレイアウトなど、classも豊富。 アクセシブル（デスクトップはホバー、スマホはフォーカス）。 2Kbの超軽量ライブラリ。 実装・カスタマイズ用のドキュメント完備
個人でも商用プロジェクトでも無料で利用できる、小さいスペースにも配置できる極小サイズ対応のSVGアイコンを紹介します。SVGアイコンなので、もちろん通常のサイズ、大きいサイズでも美しく表示されます。 UIデザイン用のアイコンはアウトライン・ソリッドの2種類計1,130アイテムが揃っています。しかもオープンソースなのは、嬉しいですね。 Teenyicons Teenyicons -GitHub Teenyiconsの特徴 Teenyiconsのダウンロード Teenyiconsの使い方 Teenyiconsの特徴 Teenyiconsは非常に小さいスペースにも配置できるようデザインされたSVGアイコンで、極小サイズ（15x15）でも鮮明に見えるよう設計されています。 MITライセンスで、商用プロジェクトでも無料で利用できます。
アメリカ合衆国のとある政府機関への抗議のため、Chef関連のGemやGitHub上のソースコードを作者が削除した。 雇用期間に業務にてGemが作成されていたため、Chef SoftwareがGemの所有権を主張してGemを復活させた。 最終的には抗議行動に対してChef Softwareが折れることで決着が付いた。 現在Chef界隈が混乱している。 どうやら政治的問題のためにRuby Gemsに登録されたGemやGitHub上のソースコードが消されたらしい。 なかなか興味深い出来事で、なおかつ日本語圏に情報が出ていないので適当に記録しておく。 用語 Ruby：プログラミング言語の１種。日本においては超広範囲で使用されている超メジャーな言語。 RubyGems：Rubyにおけるパッケージシステム。他人のRubyプログラムやライブラリを簡単に取り込むことができる。 Chef: 構成管理ツールの
Elastic社のブログをきっかけに、最近見かける新しいライセンスについて個人的に調べてみた。私は専門家ではないので要注意。公開情報も隅々まで追えているわけではないし。 なお一部ライセンスはOpen Source Initiative (OSI)による承認を受けていないので、ここではオープンソースライセンスではなく単に「ライセンス」と書くことにする。 新しいライセンスが誕生している背景 従来のオープンソースライセンスが再頒布以外の利用をあまり想定していなかった。 Open-core modelないし完全オープンソース戦略を採る企業が自衛策を必要とした。 既存のライセンスが難解なため、理解しやすいライセンスが求められた。 OSS活動を収入に繋げるためのモデルが試行錯誤されている。 新しいライセンスを導入しているプロジェクト（一例） プロジェクト ライセンス Elastic SSPLと独自ライ
シンプルなHTMLで、モダンなWebサイトをすばやく簡単に作成できるクラスレスの超軽量CSSフレームワーク -Simple.css
その名の通り、シンプルなHTMLで、Webサイトをすばやく簡単に作成できるクラスレスの超軽量（4kB）CSSフレームワークを紹介します。 シンプルなWebページ、ポートフォリオやブログなどをすばやく作成したい時に便利で、レスポンシブにもダークモードにも対応しています。また、CSSリセットとして利用するのもありかもしれません。 Simple.css Simple.css -GitHub Simple.cssとは Simple.cssのデモ Simple.cssの使い方 Simple.cssとは Simple.cssは、セマンティックHTMLをすばやく簡単に見栄え良くするクラスレスのCSSフレームワークです。「クラスレス」とは、CSSまたはHTMLのどこにもCSSのclassがないことを意味します。 MITライセンスで、商用プロジェクトでも無料で利用できます。 classのないプレーンなHTM
1,500種類以上のアイコンが揃った、Webサイトやスマホアプリにぴったりなシンプルにデザインされた無料アイコンを紹介します。 オープンソースで個人でも商用でも無料で利用できます。また、SVGアイコンとアイコンフォントで利用できるので、サイズやカラーの変更はCSSでできます。アイコンはリスト、固定幅、アニメーションにも対応しており、かなり便利だと思います。 Boxicons Boxicons -GitHub Boxiconsの特徴 Boxiconsの使い方 Boxiconsを実際に使ってみた Boxiconsの特徴 Boxiconsはオープンソースのプロジェクトで、1,500+種類のSVGアイコン・アイコンフォントが簡単に利用できます。シンプルなデザインは、さまざまなWebサイトやスマホアプリにぴったりです。 けっこう前にも紹介しましたが、アップデートされ続け、アイコンの種類や機能がだいぶ
スマートニュースは7月1日、国会の過去20年分以上の議案データ約1万8000件を収集・整理し、オープンデータ化した国会議案のデータベースを、GitHubで無償公開（衆議院、参議院）した。GitHubを利用しない人向けに、閲覧用のWebページ（衆議院、参議院）も公開した。 国会で審議された法案や予算案、条約、決議案といった議案は、衆参両議院のWebサイトに掲載されている。提出者や審議された委員会、賛成・反対した政党（衆院のみ）などの情報も確認できるが、国会の回次ごと、また議案ごとにページが分かれているため、集計や検索、一覧が難しかった。 今回、同社の「メディア研究所」が、各議案のページに掲載されている情報を収集、整理し、CSVファイルとJSONファイル形式で公開。MITライセンスに準拠し、商用・非商用を問わずオープンデータとして誰でも無償で使えるようした。 主に報道機関や研究者に、選挙報道や
Container Security Book ⚠️この文書は製作中のものです About これから Linux コンテナのセキュリティを学びたい人のための文書です。 普段からコンテナを扱っているが、コンテナの基礎技術やセキュリティについては分からないという人が、それらを理解できる足がかりになるように書かれています。 誤字脱字や間違いなどあれば https://github.com/mrtc0/container-security-book に Issue もしくは Pull Request を立ててください。 ご意見、ご感想等は Twitter ハッシュタグ #container_security でツイートをお願いします。 License この書籍に記述されているすべてのソースコードは MIT ライセンスとします。 また、文章は Creative Commons Attribution
ウェブのフロントエンド開発に役立つライブラリとして、VueとReact、Angularがよく取り上げられます。これらのライブラリは、SPA（シングルページアプリケーション）の開発に役立つ多くの機能を持っています。 フレームワークを選定するには、「人気だから使う」という短絡的な理由で選択をするのは望ましくありません。設計思想や機能の種類、学習コストなどの観点で、プロダクト・プロジェクトチームへの適性を検討するのがセオリーです。幸いにも、それぞれを比較した記事がウェブに数多くあり、選定のヒントを簡単に得ることができます。 一方、機能面の比較ばかりが取り上げられ、性能面で紹介されている記事が少ないように見受けられます。記事『サービスにおいて速さこそが神である｜深津 貴之』でも紹介されているように、昨今のウェブはスピードが求められる時代でもあり、ライブラリの性能評価の記事があってもよいのではないで
ChatGPTにコーディング能力でも敗北しました この前、ChatGPTに文章能力で敗北したというブログ記事を書きました。 今回は、文章に続いてコーディング能力でも完全敗北したという話です。 きっかけは、以下の妻の「複数ページのPDFを1つずつ別ファイルで保存する作業を自動化するプログラム」のお願いです。 単純作業が辛いから、アレをあーしてこーしてくれるプログラム書いて😥と思いついちゃったので、いつもなら @karaage0703 先生に言うんだけど、絶賛社畜中で毎日遅くて可哀想なので、仕事増やしても良いかしらと一応気を遣っています。でも私も(確定申告しんどすぎて)発狂しそう笑。— ねこじすた (@necogista) March 9, 2023 いつもなら、妻に尊敬してもらうために頑張ってプログラム作るのですが、その日は仕事のトラブルで帰宅が11時過ぎ。ご飯食べてお風呂入ったら深夜1時
![ChatGPTとペアプログラミングしたら爆速開発できました - karaage. [からあげ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/d429c0ecee0b5def43e5b898a70779c29c8597b5/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fk%2Fkaraage%2F20230305%2F20230305110235.png)
プロダクト、サービス、アプリやソフトウェアなどのランディングページ用のHTMLテンプレートを無料でダウンロードできるHTMLrevを紹介します。 ランディングページ用のHTMLテンプレートはすべて無料で、商用プロジェクトでも帰属なしで利用できます。 HTMLrev HTMLrevは先日ローンチされたばかりのサイトで、ランディングページ用のHTMLテンプレートが無料でダウンロードできます。 HTMLテンプレートはMITライセンスで、商用プロジェクトでも無料で利用できます。詳しくはLicenseをご覧ください。
用意するのはHTMLだけ、一行加えるだけでスマホ対応のクリーンなデザインのWebページができてしまう超軽量スタイルシートを紹介します。ダークモードにも対応しています。HTMLにclassを加えるなど、CSSの知識は必要ありません。 また、それをベースにして再利用可能なコンポーネント、CSSリセットの拡張版としても利用できます。 MVP.css MVP.css -GitHub MVP.cssの特徴 MVP.cssのデモ MVP.cssの使い方 MVP.cssの特徴 MVP.cssはHTMLのさまざまな要素にすぐに使えるスタイルのコレクションで、外部スタイルシートとして利用するだけで簡単にページを作成できます。クリーンなデザインで、再利用可能なコンポーネントとして利用できます。class名などをHTMLに加える必要もありません。 用意するのは、HTMLだけ MVP.cssはHTMLの各要素にス
機能改善だけでなく、非推奨になった機能も多いですね。 2015年〜 ES2015の正式リリース前 2015年6月まではES2015が正式リリースされていなかったため、Reactのコンポーネントの作成にはReact.createClassが使われていました。 React独自のクラスコンポーネントを生成する機能です。 var Component = React.createClass({ render: function() { return ReactDOM.tagName({options, "Hello"}) } }); React.renderComponent( Component(null), document.getElementById("root") ) 2016年〜 クラスコンポーネントの時代 Reactバージョン15.0.0からはReact.createClassはほとん
イラストやアニメのワンシーンには丁寧に色が塗られているものですが、これを色を塗る前の線画に変換することができるアプリケーション「Anime2Sketch」が、GitHub上で無料で公開されています。 GitHub - Mukosame/Anime2Sketch: A sketch extractor for anime/illustration. https://github.com/Mukosame/Anime2Sketch イラストから線画を生成することができる「Anime2Sketch」は、LinuxまたはmacOSで動作するアプリケーション。プログラミング言語のPythonで構築されており、CPUあるいはNVIDIA製のGPU＋NVIDIA cuDNNの組み合わせで動作させることができます。 実際にどのような線画が出力できるのかというと、以下の通り。左が入力画像(イラスト)で、右が
便利な無料ツールが登場！ Webサイトで使用しているCSSや自分が書いたCSSを詳細に解析してくれる -CSS Analyzer
1クリックで、Webサイトで使用しているCSSや自分が書いたCSSを詳細に解析してくれる無料ツールを紹介します。 CSSの検証としておかしなスタイル定義・同じスタイル定義・一貫性のないスタイル定義などを見つけたり、スタイルガイドの作成にも役立ちます。 CSS Analyzer CSS Analyzer -GitHub CSS AnalyzerはWallace CLI, constyble, color-sorterなどの便利ツールをリリースしているProject WallaceのCSS解析ツールです。MITライセンスで、商用プロジェクトでも無料で利用できます。 Webサイトで使用しているCSSファイルや自分が書いたCSSのコードを詳細に解析してくれます。オンラインツールとして簡単に利用でき、GitHubでソースが公開されているので、ローカル環境でも利用できます。 さっそくオンライン版で試し
この記事では、2021年に公開された便利なWebオンラインツール・ベスト100個+をまとめてご紹介します。 定期的にリストアップしている最新オンラインツールまとめ記事では、2021年にかけて合計338個の新しいツールやサービスを紹介してきました。 その中でも、特にWebデザイン制作に便利なツールを選りすぐったコレクションで、「無料で利用できるツール」を揃えています。 これらのツールやサービスを活用すれば、Webデザイン制作をより快適に進めることができるでしょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. CSSツール（11個） 2. パターンツール（3個） 3. イラスト系ツール（9個） 4. デザインツール（17個） 5. 配色ツール（7個） 6. グラデーションツール（12個） 7. SVGツール（9個） 8. スクリーンシ
2022年1月、colors.js事件が起きた。このページは当時にTwitter上で日本語で行われた議論のまとめである colors.js事件: オープンソースライブラリ「colors.js」の開発者が、これらを意図的に改ざんした。 彼は経済的困難を理由に「ただ働き」を拒否。 これがオープンソース開発者の待遇と責任についての議論を引き起こした。 OSS「faker.js」と「colors.js」の開発者、自身でライブラリを意図的に改ざん 「ただ働きはもうしない」 - ITmedia NEWS stepney141: お金貰えなかったOSS作者が狂うの、典型的な公共財と市場の失敗の関係じゃんという感じがしている stepney141: GitHub上のOSS、ミクロ経済学の学部初級教科書になんで公共財として載ってないのか不思議でならないくらい公共財してる stepney141: OSSはもと
MicrosoftからAndroidやiOSのスマホのUI向けにデザインされたSVGアイコンを紹介します。もちろん、デスクトップで使用しても問題ありません。 アイコンは角が丸く、形状が単純化されており、スマホでの視認性や操作性が考慮されています。スタイルはソリッドとベタ塗りの2種類、2,186種類すべてがSVGアイコンです。 Fluent Icons ※オープンソースなので、有志によるサイトも作成されています。 MITライセンスで、商用プロジェクトでも無料で利用できます。 アイコンは全部で、2,186種類！ アイコンのスタイルは、Regularのソリッド、Filledの塗りつぶしの2種類。 スマホのUI用に、24pxでデザインされたアイコン。 ダークモードにも対応。 アイコンはSVGで、コードのコピーあるいはファイルのダウンロードで利用できます。 すべてSVGアイコンなので、サイズやカラー
JavaScriptはなし、プレーンなHTMLとCSSで実装されたランディングページ用のテンプレートを紹介します。 テンプレートはスマホ・タブレット・デスクトップのレスポンシブ対応。ワイヤーフレームのような白黒のシンプルなデザインなので、カスタマイズも簡単です。 Uisual -Free Landing Page Templates Uisual -GitHub UisualはプレーンなHTMLとCSSで実装された、ランディングページ用のテンプレートです。他のCSSフレームワークやJavaScriptなどは一切必要ありません。 MITライセンスで、商用プロジェクトでも無料で利用できます。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作の常識が変わる、便利な最新オンラインツール48個まとめ
「Visual Studio Code」で執筆するSF作家 藤井太洋氏が作る物書きのための拡張機能
よく見かけるレイアウト・UIコンポーネント、それだけを実装するHTMLとCSSのシンプルなコードのまとめ
全部、完全に商用利用無料！さまざまなUIデザインに適した1,064種類のSVGアイコン素材 -Emblemicons
OSS ライセンスの最近の潮流: PolyForm License について
ソースコードを公開したソフトウェアで収益を得ている会社
この書籍について · JavaScript Plugin Architecture
はじめに - Writing an OS in 1,000 Lines
管理画面用のレイアウトやUIコンポーネントがほとんどすべて揃った、商用利用無料のHTMLテンプレート -Stisla
徐々に高度になるリングバッファの話 - Software Transactional Memo
ウェブ制作がすご楽に！便利な最新オンラインツール33個まとめ
新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました - ICS MEDIA
よく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのシンプルなコードのまとめ
シンプルなHTMLで、モダンなWebページを簡単に作成できるclassレスの超軽量CSSフレームワーク -new.css
レスポンシブデザインの確認に便利なツールが登場！複数のデバイスサイズで同時確認できる優れもの -Responsivize
Re: なんで今さら帳票エンジンを新規開発しているのか
全部、完全に商用利用無料！WebのUIデザインに適した1,130種類のSVGアイコン素材 -Glyphs
HTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir
商用無料！UIデザインに最適なSVGアイコンが1,130個、小さいスペースにも配置できる極小サイズ対応の優れもの
政治的問題のためRuby GemsとGitHubからChef関連の諸々が消えた件について
最近見かける新しいライセンスについて - Kengo's blog
こいつ、動くぞ！ 商用利用無料、シンプルにデザインされたSVGもフォントも揃った高品質なアイコン -Boxicons
スマートニュース、国会議案データベースを無償公開 過去20年分をGitHubで
About · Container Security Book
Vue・React・Angularのパフォーマンス比較検証 - ICS MEDIA
ChatGPTとペアプログラミングしたら爆速開発できました - karaage. [からあげ]
全部、完全に商用利用無料！ さまざまなデザインが揃ってる、ランディングページ用のHTMLテンプレート -HTMLrev
必要なのはHTMLだけ、一行加えるだけでスマホ対応のWebページができてしまう超軽量スタイルシート -MVP.css
React今昔物語 - ICS MEDIA
イラストを線画に変換する「Anime2Sketch」が登場
Web制作を変える！2021年の便利オンラインツール・ベスト100選
OSSで共有地の悲劇が起こることにどう対処するか - 西尾泰和のScrapbox
全部、完全に商用利用無料！スマホのUIデザインに適した2,186種類のSVGアイコン素材 -Fluent Icons
商用でも完全に無料！ プレーンなHTMLとCSSで実装された、ランディングページ用のテンプレート -Uisual