技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL
技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL はじめに 新たに書きました。 MySQLを使っても会社は潰れない 久々に記事を書いたのでどうぞお手柔らかに... 私が過去2年間で行った技術選定の成功と失敗を振り返り、その学びを共有したいと思います。 文才無いので淡々と箇条書きでいきます Twitterエンジニア垢作りました。エンジニアのお友達がいません。 @uncode_jp 注意 意見を押し付けるものではありません。ただ建設的な議論は大事だと思う。 自分の意見は明確に、歯切れのよい表現を意識している。人それぞれだよねみたいな感じに逃げたくない。技術選定に結論はある（過激）。 ただし技術選定にはコンテキストがあり、例えばプロダクトのフェーズや組織の事情によって当然結論は変わる可能性がある。 OSSの開発者さん達は偉大ですごい。あ
リッチテキストエディター（RTE）のJSライブラリ色々試してみた
リッチテキストエディタ(RTE)って？ リッチテキストエディタ（以下RTE）とは、文字を入力できるだけでなく、文字に装飾を加えたり、段落を設定できたりと複雑な機能を持つエディタのことです。 弊社プロダクトであるkintone内にも以下のようなエディタが存在します。 また、似たものを指すWYSIWYG(読み方:ウィジウィグ)という用語もありますが、これはWhat You See Is What You Get（見たままが得られる）の略であり、編集時と出力時の見た目が同じエディタのことを指します。 Zennやesaのように、Markdown記法で編集したものが変換されて表示されるようなエディタは含みません。 このようにWYSIWYGはRTEより狭義の意味になっています。 WYSIWYGエディタ(Google Docs) WYSIWYGではないエディタ（esa） 独自データモデル VS DOMツ
GoogleがAIの力でファイル形式を正確に識別するツール「Magika」をオープンソースで公開
Googleの研究チームが、AIの力を活用してファイル形式を高速かつ効率的に識別するツール「Magika」を開発し、オープンソースで公開しました。Magikaは99％以上の精度でバイナリやテキストのファイルタイプを検出し、CPU上でもミリ秒以内に実行できるとのことです。 Magika: AI powered fast and efficient file type identification | Google Open Source Blog https://opensource.googleblog.com/2024/02/magika-ai-powered-fast-and-efficient-file-type-identification.html Magika https://google.github.io/magika/ Google launches AI Cyber D
静的サイト向けの全文検索エンジンと UI ライブラリの Pagefind
デモとして、このブログに Pagefind を導入してみました。ヘッダーの検索アイコンをクリックすると検索フォームが表示されるので、キーワードを入力して検索してみてください。 使い方 Pagefind は構築済みの UI ライブラリと、CLI コマンドとしてインデックスを作成するためのツールから構成されています。まずは UI ライブラリの部分から見てみましょう。 UI ライブラリ Pagefind の UI ライブラリは、検索フォームと検索結果を表示するためのコンポーネントから構成されています。この UI は以下のコードを追加するだけで簡単に利用できます。 <link href="/pagefind/pagefind-ui.css" rel="stylesheet" /> <script src="/pagefind/pagefind-ui.js"></script> <div id="s
フロントエンド界隈で新しく提唱されているT3 Stackについて調べてみた
T3 Stackとは 昨今のWeb開発ではTypescriptによる型安全なWebアプリケーションの開発を求められている。またバックエンドとフロントエンド、さらにBFFによる構成においていかに型安全で効率よく開発するかはWebアプリ開発において非常に重要な課題となっている。 そこでTheo氏によって「T3 Stack」という技術スタックが提唱された。 これは最近注目のWeb開発の技術スタックとなっている T3 Stackにおいては以下3つの思想に焦点が当てられている。 simplicity(簡潔さ) modularity(モジュール性) full-stack typesafety(フルスタックの型安全) そしてこれらの思想を実現するためにT3 Stackでは以下6つの技術を採用する Next.js tRPC Tailwind CSS Typescript Prisma NextAuth.j
Crawlee · Build reliable crawlers. Fast. | Crawlee
Crawlee is a web scraping and browser automation libraryCrawlee is a web scraping and browser automation library Reliable crawling 🏗️Crawlee won't fix broken selectors for you (yet), but it helps you build and maintain your crawlers faster. When a website adds JavaScript rendering, you don't have to rewrite everything, only switch to one of the browser crawlers. When you later find a great API to
米国では既に標準化の流れ、日本企業も対応を迫られる「SBOM」とは
DX（デジタルトランスフォーメーション）やIoT（Internet of Things）の進展により、ますますその存在感が増しているオープンソースソフトウェア（OSS）。ソフトウェアの高機能化、大規模化によるサプライチェーンの複雑化を背景に、SBOM（Software Bill of Materials）によるOSSサプライチェーンマネジメントに注目が集まっています。米国では既に必須化・標準化の動きが始まっており、日本企業も対応を迫られるようになってきました。本記事では、あらためてSBOMとは何か、そして日本におけるSBOM活用の普及促進にはどういった課題があるかについて、詳しく解説します。 SBOMとはいったい、どのようなものなのか Software Bill of Materials（SBOM、「エスボム」と読みます））とは、ソフトウェアを構成するOSSや商用ソフトウェアなどのライブラ
共同編集を支える技術とライブラリの活用 - ICS MEDIA
『Google Docs』や『Figma』といったリアルタイムな共同編集ツールの恩恵を受けている人は数多くいるでしょう。『Visual Studio Live Share』のようなエンジニアに嬉しいツールも生まれ、今日ではオンライン上でも円滑なコミュニケーションが可能になっています。 これらのツールの基礎にあるのが「共同編集」のテクノロジーです。本記事ではこの技術に焦点を当て、その仕組みと主にフロントエンドでの実用例について紹介します。 記事の前半では、リアルタイムな共同編集に用いられる技術やアルゴリズムについて、発展の歴史とあわせて紹介します。解説用のコードにはJavaScriptおよびTypeScriptを使用しますが、フロントエンドエンジニアに限らず共同編集の仕組みについて気になる読者が知識を深めるきっかけとなるはずです。 さらに後半ではフロントエンドの開発者目線で、前半で紹介した技
頻出単語表示、わずか9KBのAI日本語単語分割ライブラリ「TinySegmenter」をESモジュール化
自由入力された文章をデータ化する形態素解析ですが、巨大な辞書が必要になったり次々登場する単語に対応することなどなかなか大変そうなイメージでしたが、機械学習を使った、単語分割するコンパクトな実装「TinySegmenter」を発見。ブラウザやDenoでいい感じに使えるESモジュール版にしてみました。 「頻出単語表示 by TinySegmenter」 文章を入れると、頻出単語順に並び替えて表示する、サンプルアプリ。このアプリでは、3文字以上を単語としています。一日一創ブログをコピペしてみるといい感じに！ プログラムで組み込む方法は簡単、ブラウザやDenoで下記コードを入れるだけ。 import { TinySegmenter } from "https://code4fukui.github.io/TinySegmenter/TinySegmenter.js"; const segs = T
GitHub - inokawa/rich-textarea: A small customizable textarea for React to colorize, highlight, decorate texts, offer autocomplete and much more.
Styleable texts: Not just highlighting texts like similar libraries, this library also supports colorizing, decorating and more. Regex or any tokenizers can be used. Easy to interact with events: You can get caret position and can catch some mouse events on texts, which are useful to display something reflects user actions. Compatible with textarea: Except added features, this library is designed
手書き風UIを実装できるJavaScriptライブラリー
2022年2月15日 JavaScript, Webサイト制作 手書きのものってどこか温かみがあって親近感がわきますよね。今回はそんな手書き風のUIを実装できるJavaScriptライブラリーを紹介します！ ↑私が10年以上利用している会計ソフト！ Rough Notation Webサイト｜GitHub テキストの一部を強調したり、注釈を入れたいところに手書き風マーカーを追加できます。まさに今書いてます！というようなアニメーションも面白いですね。 導入方法 JavaScriptファイルで import { annotate } from 'https://unpkg.com/rough-notation?module'; または npm でインストールします。 npm install --save rough-notation 実装方法 基本的には実装したい要素を指定して、装飾を指定し、
CoC が苦手な奴、認知資源が乏しいだけ説 - Neo's World
CoC が苦手な奴、認知資源が乏しいだけ説 「設定より規約」「CoC (Convention over Configuration)」と呼ばれる設計思想がある。 参考：設定より規約 - Wikipedia フレームワークやライブラリ側で、ベストプラクティスなデフォルト設定を規約として決めておくから、利用する開発者はイチイチ考えなくていいよ、というワケだ。 コレは、ともすれば、「Opinionated (自己主張的)」なフレームワークやライブラリだとみなすこともできるだろう。 参考：Opinionatedなライブラリとチーム開発 - Runner in the High 僕は CoC が割と好きだし、CoC か否かに関わらず、Opinionated なツールも好きである。だが、自分の回りでは「CoC が苦手」とか「柔軟性のないフレームワークは嫌い」といった人が多く、疑問を持っていた。 今回、
JavaScriptライブラリ「Wijmo」で作ったリッチUIのE2Eテストを、最新のSelenium 4で自動化してみよう
本連載では、グレープシティが提供するJavaScriptライブラリWijmo（ウィジモ）について、サンプルとともに利用例を紹介します。JavaScriptとCSSを駆使してWeb画面でリッチなUIを実装するのはよくあることですが、そのリッチUIに対してどのように自動End to End（E2E）テストのコードを書いたら良いか、標準のWeb UI部品との違いに悩んだことはないでしょうか。本記事では、Wijmoで作成したWebページに対して、Webブラウザ操作自動化ライブラリ「Selenium」を利用した自動テストコードをどのように実装できるかの一例を紹介します。 はじめに Wijmo（ウィジモ）は、グレープシティがHTML／JavaScript環境に向けて提供しているJavaScriptライブラリです。Wijmoには自動テストの手がかりとなる仕様も含まれているので、標準的なUIとの違いに心配
「オープンソース」は壊れている
christine.websiteのブログより。 または: お金を払わない限り、有用なソフトウェアを書かないのか? 最近、重要なJavaエコシステム・パッケージに大きな脆弱性が見つかりました。この脆弱性が完全に兵器化されると、攻撃者はLDAPサーバから取得した任意のコードを実行するよう、Javaサーバを強制することができます。 <マラ> もしこれがニュースで、あなたがJavaショップで働いているなら、残念ですが、あなたには2、3日が待っています。 私は、これが「オープンソース」ソフトウェアの主要なエコシステム問題の全ての完璧な縮図だと考えています。log4j2が、この問題の最悪のシナリオの1つの完璧な例であると思うので、このすべてについていくつか考えを持っています。この問題に関与したすべての人が、現実世界の問題に対する完全に妥当な解決策のためにこれらすべてを行ったことは完全に合理的であり、
日本のWEBに革命をもたらす BudouX で自動文字組みを行う。しかも、Web Componentとして
WEB 開発において日本語が抱える問題 日本語を使った WEB 開発は常に「改行問題」を抱えています。例えば、👇 の様に 記事 という単語の 記 と 事 で改行されていたら読みにくいです。 見た目重視の WEB サイトだと、「この改行を手動で美しく見えるように修正して欲しい。」 という声も無視できません。 いわゆる「文字組み」です。例えば、👇 の様に改行を入れてやります。 しかし、この方法は解決になっていません。なぜなら、WEB ブラウザ の幅はレスポンシブに可変するからです。ちょっと画面幅を狭めるだけで 👇 の様に崩壊します。 これに対応するためには、メディアクエリをくしして画面幅に応じた<br>タグを仕込むか、改行したくない文字列を手書きで<span style="display:inline-block;"></span>で囲む必要がありました。👇 の様に... <span
工数削減もコード共通化もこれひとつで Androidエンジニアが語るKotlin Multiplatform Project導入のメリット
サイバーエージェントメディア事業部のメンバーが、Flutter・Kotlin Multiplatform を中心に、開発の中でのTipsを紹介する「Flutter × Kotlin Multiplatform by CyberAgent #1」。ここで清水氏が「ドットマネーでKotlin Multiplatform Projectを導入してみて」をテーマに登壇。Kotlin Multiplatform Project採用の詳細と、メリット・デメリットを紹介します。 Kotlin Multiplatform Projectについて話すこと・話さないこと Yasuhiro Shimizu氏（以下、Shimizu）：それでは「ドットマネーでKotlin Multiplatform Projectを導入してみて」というタイトルで15分ほど話します。自己紹介です。清水泰博と言います。ドットマネーとい
エンジニアによるラノベ執筆におけるデプロイ
はじめに この記事は、エンジニアでありながらラノベ執筆で夢を見ている人が、あまりにも投稿・編集するのが面倒くさくて絶望したため、その改善を目指した男の歴史です。 最近のラノベ執筆 最近のネット小説界隈は、様々な投稿サイトが立ち上がり、群雄割拠を繰り広げています。 言わずもがなの「小説家になろう」であったり、ライトノベルレーベルと結びついた投稿サイトであったり、各々様々な特色があり、一概にどれがいいかを選ぶのは非常に難しい状況にあります。 ラノベ執筆者にとっても、どのサイトで投稿するか、というのは頭の悩ませる問題です。一般的な解決策としては、書いている小説のジャンルと、小説投稿サイトで盛り上がっているジャンルが合致している投稿先を選ぶというのがよく選択されます。例えば、異世界転生ジャンルであれば「小説家になろう」を選ぶとか。 と言っても、ほぼ全ての投稿サイトで、別の投稿サイトへの同時投稿も許
React / Redux を実務で使うということは
注意 この記事に書いてあることは古い情報になっている可能性があります 最近ReduxToolkit周りの進化がめざましく、更に追加されたReduxのドキュメントの項目がかなりわかりやすく書かれているため、基本的にこちらを推奨します 既にRTKなどの概要を知っているひとは特に Tutorials > Redux Essentials のセクションを読んでほしいです こんにちは、すずです Reactを使い始めて2年半経ち、その間に3つのサービス(SPA)を立ち上げてきました その経験から、 React や Redux を実務でしっかり使ってく上でのノウハウを紹介していきます （この記事ではある程度ReactやReduxの記事・ドキュメントを読んだ初学者を対象としています） 序 フロントエンド、モノを作ったはいいものの、「変更しづらい」「スケールしない」「この作りではパフォーマンスが出ない」って
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - webui-dev/webui: Use any web browser as GUI, with your preferred language in the backend and HTML5 in the frontend, all in a lightweight portable lib.
商用可・無料のAI音声読み上げツール「VOICEVOX」、他アプリへの組み込みも可能なコアライブラリも公開／プロジェクトの保存、キャラの立ち絵、設定画面を追加するなど使い勝手も向上
