Electron代替を目指す軽量なフレームワーク「Tauri v2」β版リリース。iOS/Android対応など
JavaScriptとHTML/CSSを用いてアプリケーションを構築できるElectronの代替を目指し、より軽量なRust製のフレームワークとして開発されている「Tauri v2」のβ版がリリースされました。 iOS/Androidモバイル対応 TauriはこれまでWindows、Mac、Linuxに対応したデスクトップ版が2022年6月にバージョン1.0としてリリースされていますが、iOSとAndroidに対応したモバイル対応は正式版となっていませんでした。 Tauri v2ではWindows、Mac、Linuxに加えてモバイル版としてAndroidとiOSに対応することで、デスクトップ版のアプリケーションからモバイル版への移植をスムーズに行えるようになります。 また、モバイルOSで提供されている通知機能、NFC対応、生体認証、バーコードの読み取り、クリップボードなどのAPIにもアクセ
Bento UIとはパネルが伸び縮みしながら配置が入れ替わるお弁当箱みたいなUI、View Transitions APIでCSSアニメーションが進化する
Bento UIとはパネルがお弁当箱のように配置されており、各パネルをクリックすると伸び縮みしながら配置が入れ替わるUIです。最近のWebサイトやスマホアプリでもよく見かけるようになりました。そんなBento UIをView Transitions APIを使用して実装されたデモを紹介します。 一昔前なら実装は面倒でしたが、Chrome 111から利用できるView Transitions APIにより簡単に実装できるようになりました。 Rediento -Bento Radio Group Carousel thing 実装にはChrome 111で実装されたView Transitions APIが使用されており、2つの状態間のアニメーションを作成しながら、1ステップでDOMを簡単に変更できます。 各パネルは、CSS Gridでレイアウト。 positionはなし。 ビジュアルのトラン
AWS のサーバーレスと Amazon S3 署名付き URL、クライアントサイド JavaScript で大きなサイズの複数ファイルの一括アップロード・ダウンロード機能を実現する方法 | Amazon Web Services
Amazon Web Services ブログ AWS のサーバーレスと Amazon S3 署名付き URL、クライアントサイド JavaScript で大きなサイズの複数ファイルの一括アップロード・ダウンロード機能を実現する方法 はじめに 昨今のテクノロジーの進化は、これまで以上に、私たちがどのように働き、どのように生活するかを再定義しています。この進化の中心には、クラウドコンピューティングが存在しており、AWS はこれまで、クラウドコンピューティングのパイオニアとして、様々な機能を提供し続け、業界をリードしてきました。その機能群を支えるエコシステムの一部であるサーバーレスアーキテクチャは、スケーラブルで信頼性が高く、メンテナンスの作業負担が低いアプリケーションの開発を可能にし、ユーザーのビジネスやプロジェクトが円滑に進行するようサポートします。 AWS のサーバーレスの代表的なサービ
これはすごい！ HTMLの新機能、popover属性でポップオーバーがJavaScript無しで簡単に実装できるようになります
先日リリースされたChrome 114でPopover APIがサポートされ、HTMLのpopover属性が使用できるようになりました。 今まではポップオーバーを実装するのにはJavaScriptを使用し、ポップオーバーの開閉・フォーカス・アクセスフックなど面倒でしたが、popover属性で実装すると驚くほど簡単で、さまざまなUIコンポーネントに利用できます。 Introducing the popover API by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに HTMLのpopover属性とは ポップオーバーのデフォルト、オーバーライド 自動ポップオーバーと手動ポップオーバー popover属性とdialog要素の違い 近日公開予定の便利な2つの機
階層メニューやトーストUIが簡単に作れる新技術！ JavaScriptで利用するポップオーバーAPI - ICS MEDIA
階層メニューやトーストUIが簡単に作れる新技術！ JavaScriptで利用するポップオーバーAPI 2023年5月〜6月にリリースされたChrome 114とEdge 114には、「ポップオーバーAPI」というAPIが搭載されました。 ポップオーバーとはコンテンツの1番上に重ねて表示するUIで、ユーザーにアクションを促したり、補足の情報などを伝えるために画面に表示します。ポップオーバーAPIのMDNのドキュメントではオーバーレイ、ポップアップ、ポップオーバー、ダイアログなどを総称して「ポップオーバー」と呼んでいます。 ウェブサイトでよく見かけるポップオーバーですが、実装するには意外と調整や考慮の多いUIです。たとえば、画面の1番上に重ねるためにはz-indexで他の要素との重なり順を調整する必要があります。Escキーを押した時や要素外をクリックした時にポップオーバーを閉じるには、Java
(自分の) JavaScript のユニットテストの書き方
(社内用ドキュメントの公開版) テストのポリシー 前提として、ユニットテストを導入するコストを、限界まで低くすることを目指す。テストが根付いていない言語環境や文化では、放っておくとテストが書かれないまま実装が進行し、結果としてテスト不可能な巨大な雪だるまが完成する。こうなるとメンテコストが高いE2Eを大量に書かないといけなくなり、テストの実行時間が膨れ上がっていく。 そうなる前に、ユニットテストを書きやすい環境を維持し、ユニットテストとして問題を切り分けられるような環境を維持する。とにかく書きやすさを重視し、一つのユニットテストを書くオーバーヘッドを限界まで下げる。 最初の一つを早い段階で書く 自分の経験的には、ユニットとテストの最初の一つを書いたらあとは自然とその周辺で増えていく。サンプルがあったら人はコピペする。逆にいうと最初の一つを書かない限り一切書かれない。まず一つ用意するのが大事
すぐにAPIを体験！public-apis 100以上のJavaScript axiosサンプル集
はじめに このページは、プロトアウトスタジオのAPIにつなげる授業に関連して、よりAPIの多様さ、広がりを深掘りします。 まだ、JavaScriptに慣れていなくても「なるべくシンプルにAPIを体験する」ことを目指して、 public-apis というフリーで使えるAPIを集めてリストにしているサイトから、手順が少なくAPIにつなげられるシンプルに取得できるものを中心に、直接取得できるURL・Node.js axios await/async ソースコードを一つ一つトライしています。 慣れてきたら、自分で public-apis のサイトを直接読んでみて、巡ってみましょう！ APIピックアップ数 最終更新日 2020/6/8 104 個のAPIをピックアップ中！ 参考資料 public-apis の豊富なAPIリストをベースにAPIつなげていきます。 ピックアップルール 手順が少なくAPI
便利なのが登場！フォームのバリデーションをシンプルな記述で実装できる超軽量JavaScriptライブラリ -v8n | コリス
Webサイトやスマホアプリのどの部分にでもフォームに入力された値を検証するバリデーションを簡単に実装できる、わずか2.29kBの超軽量ライブラリを紹介します。 バリデーションでよく使用されるルールもデフォルトで30個以上用意されており、ルールをカスタマイズして利用するのも簡単です。 v8n -GitHub v8nの特徴 v8nのドキュメント v8nの使い方 v8nの特徴 v8nの名称は、「validation」の「v」と「n」の間に正確に8文字あるという意味です。 流暢でチェーン化可能なAPI チェーン化可能なAPIを使用して、フォームの検証を簡単に作成できます。 有用な標準検証ルール フォームの検証でよく使用される30個以上のルールが用意されています。 カスタマイズ性 フォームの検証用ルールは、簡単にカスタマイズできます。 非同期検証をサポート バックエンドでの検証のように時間のかかるル
JavaScriptからクリップボードを操作するClipboard API ドラフト和訳 - Qiita
以下はClipboard API and eventsの2018/08/27時点での最新版、2017/09/29 Working Draftの日本語訳です。 これは、これまで共通化されていなかったクリップボードへの読み書きを一貫するのが目的のAPIです。 現在このAPIのステータスは作業草案という初期段階ですが、既に多くのブラウザで一部実装されています。 最新の編集者草案はこちらにあります。 1 Introduction このセクションは規定ではなく参考情報です。 この仕様は、カット、コピー、ペーストといったクリップボード操作を定義し、それらをWebアプリケーションから操作する高度な機能を提供します。 このドキュメントの目的は、既存の実装となるべく互換を持たせることです。 2 Use Cases このセクションは規定ではなく参考情報です。 デフォルトのクリップボード操作(カット/コピー/ペ
JavaScriptで数値フォーマットする標準API「Intl.NumberFormat」 (カンマ区切り、円・ドル表記、漢数字など) - Qiita
JavaScriptで数値フォーマットする標準API「Intl.NumberFormat」 (カンマ区切り、円・ドル表記、漢数字など)JavaScriptI18nl10nECMAScript ほぼすべてのブラウザやNode.jsでサポートされている数値をフォーマットするAPI「Intl.NumberFormat」を紹介する記事です。 JavaScriptで数値をカンマ区切りにしたいときにGoogleで検索してみると、正規表現を使っていたり、ループで回して3桁ごとにカンマ付ける実装を紹介する記事を多く見つけました。 しかし、それらは古い記事ということもあり、2018年現在は数値のフォーマットを実装する必要はありません。EcmaScriptで仕様策定されておりほとんどのブラウザやNode.jsで使える関数があるので紹介します。 今回紹介するコードの実行結果はすべてChromeでの結果になります
React Nativeで手軽に別スレッドでコードを実行する方法 - 丁寧に手を抜く
English version available here: dev.to React NativeアプリはJavaScriptで組まれるから、１つのスレッドしかない。 だからCPUヘビーなタスクを実行するとUIをブロックしてしまう。例えばインデクシングとか。 バックグラウンドでJSを実行したければ、react-native-workersみたいなネイティブモジュールを使う必要がある。これはWeb WorkerみたいなAPIを提供してくれるモジュール。でも、単純なコードを実行したいだけならオーバースペック感がある。あと、むやみやたらにネイティブモジュールを増やしたくない。アプリが複雑になるから。expoアプリを作っている人はそもそもネイティブモジュールが使えない。 で、気付いたんだけど、WebViewを使えばいいじゃないか、と。 WebViewには injectJavaScript とい
Windows/Linux/OS X、どんな環境でも動くBash Likeなスクリプトをを書ける「shelljs」はどうだろうか？ - Qiita
Windows/Linux/OS X、どんな環境でも動くBash Likeなスクリプトをを書ける「shelljs」はどうだろうか？JavaScriptshelljs 時として、マルチプラットフォームで動作するスクリプトを書きたいときがあります。しかし、システムが違うために、どうしてもスクリプトの共通化のできない箇所が存在します。「shelljs」はそんな悩みを少しだけ解決してくれるかもしれないライブラリです。 http://documentup.com/shelljs/shelljs https://github.com/shelljs/shelljs shelljs(概要) ShellJS is a portable (Windows/Linux/OS X) implementation of Unix shell commands on top of the Node.js API.
“Web Componentsだけ” で新サービスを実装して見えたこと - Qiita
Double O というサービスを作りました。 フロントエンドはピュアな Web Components を採用していて、バックエンドは Lambda と DynamoDB のみで構成しました。 (厳密には CloudFront とか API Gateway とかもあるけどそこは省いていいよね？) REST API 以外の Util 系の Lambda 関数はすべて AWS Cloud9 で管理することで環境構築も不要な Lambda ができて楽でした。 TL;DR サーバーレスについてはごく普通のことしかしていないので、詳しくは触れないでおきます。 ピュアな Web Components だけでサービスを成立させることができた。 HTMLElement クラスを継承するだけなのでメジャーライブラリは不要になった。 Web Components の Custom Elements は標準仕様
node.js Q 使い方 メモ - Qiita
node.jsでpromiseを使う機会があったので、自分のメモ用に残します。 Promiseって何？ Promiseって何よ？ってことで、まずはググる。 Promiseとは非同期処理を上手く扱う為のAPIであり、パターンである。 非同期の処理の完了後に続けて処理を行いたいとき、よくコールバックパターンが使われるが、処理が連続するとコールバック地獄と言われる分かりづらいソースコードになってしまう。 また、複数の非同期処理が完了した時に処理を行うなど、コールバックパターンでは難しい事をスマートにできるのがこのPromiseである。 要するに、同期処理したいけど、コールバック地獄で見づらくなるのを防ぐために使うAPIってことかな？ npmのパッケージとしては使用可能なモジュールはいくつかあるが、今回はQを使用する。 Q の基本 (.when .then .done) 簡単なQの記述は下記のよう
JavaScript: 5分でわかるPromiseの基礎（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: JavaScript: Learn Promises - JavaScript Promises made easy. Learn the basics in 5 minutes. 原文公開日: 2017/10/31 著者: Brandon Morelli サイト: https://codeburst.io/ 更新情報: 2017/11/16: 初版公開 2021/03/05: 更新 JavaScriptのPromiseをわかりやすく解説しました。Promiseの基本を5分で学びましょう。 この記事で学べること 本チュートリアルでは、JavaScriptの「Promise」の基礎を学びます。Promiseのすべてを網羅的に説明するものではありませんが、Promiseを理解してコードで使い始めるのに必要な知識を固めることができます。
遅すぎたUnderscore.js詳述 - Collections編 - Qiita
いまどこ？ 基本の関数をひとつずつ見ていく章です 1 . 遅すぎたUnderscore.js入門 - 全体像 2 . 遅すぎたUnderscore.js詳述 - Collections編 ←いまここ 3 . 遅すぎたUnderscore.js入門 - Arrays編 4 . Functions 5 . Objects 6 . Utility 7 . Chaining 前回でUnderscore.jsの全体像を見終わったので、今回からひとつずつAPIをみていきます。 基本的に本家サイト(underscorejs.org)の章立てに合わせていきたいと思います。 この章は最初が重たいですが、だんだんと被ってくるので最初を抜けたら楽になります。 注意点 本家のコードを加筆・書き換えしたり、メタファー（たとえ）としてあえて厳密でない言葉で書いたりしていますのでご了承願います。 また、重複する説明が削
MediaRecorder APIをつかってCanvas/WebAudioなゲーム画面を録画する - Qiita
この記事は『ドワンゴ AdventCalendar 2017』5日目の記事です(๑˃̵ᴗ˂̵)و 昨日は @kinoppyd さんの『Gitをバックエンドにしたタスク管理bot』でした。 普段使ってるgitの裏側の世界はとても興味深いですね。 僕は以前から自分用のメモアプリをつくりたいな〜と思っていろいろ考えていたのですが、 データ保存のバックエンドにgitを使うのも面白いかもなぁと思いました！ さて、5日目の今日は『HTML5なブラウザゲームを録画したい話』をします。 どういうわけか：ゲームをつくったら録画したい 僕は昔からゲームをつくるのが好きで、個人でいろいろつくったりしています。 ここ数年はHTML5なブラウザゲームをメインでつくっています。 （といっても、その前はFlashゲームだったので、だいぶ前からブラウザなんですけどね） ゲームが完成し、それをインターネットで公開する際、
ESDocという(多分)モダンなドキュメンテーションツールの紹介 - maru source
こんにちは丸山@h13i32maruです。 僕は2015年からESDoc*1というJavaScript向けのドキュメンテーションツールを開発しています。 https://esdoc.org https://github.com/esdoc/esdoc Star 最初のリリースから2年、昨日ようやくv1.0をリリースできました🎉 いやー、ここまで長かったです。今ではRxJSやSketchAPIなど、様々なツールで使用されています。 この2年間、ESDocは2つのゴールを目指して開発してきました。 ドキュメントの作成・メンテナンスを快適にする（ドキュメントを書くの楽しい！という状態） ソフトウェアの使い方を簡単に理解できるドキュメントを作成する（ソースコード読まなくても大丈夫！という状態） この2つを満たすためにESDocは色々な機能を提供しています。 今日はそれらの機能の中でも(多分)モダ
TwitterのREST APIを使って色々してみる - Qiita
プレミアムモルツアカウントのTweetをRTしたらビールが1ケース当たった！！ こういうの本当に当たるんだ！（当たり前） じゃあこれ自動でRTしたら勝手に応募できるじゃん？てことでやってみます。 今回のコードはGitHubにあります 使うライブラリはnpmならnpm install twitter、yarnならyarn add twitterでインストールできます。 まずは自分のアカウントのタイムラインでも取得してみます。 1.Twitter developer credentialを取得 twitterアプリケーション管理画面からCreate New Appします。 name description website callback url callback urlは任意ですがそれ以外の3つは必須です。適当に入れましょう。 websiteは自分のブログやらtwitterのページやらのur
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WebUSBでレイヤーが低まるWeb開発 - Speaker Deck
