タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
ドラッグ&ドロップで超簡単にオリジナルの機械学習モデルがつくれてしまうCreate MLが大幅パワーアップしました。 新機能が増えたのと、使い方が若干変わった(より簡単になった)部分があるので、最新版として本記事をお送りします。 なお、NDAに配慮してスクリーンショットはAppleの公開資料および現行バージョンのもので代用することにします。 developer.apple.com developer.apple.com Create MLの起動方法 これまではCreate MLはまだ独立したアプリとして提供されておらず、Playgroundにコードを書いて実行してアプリケーションのUIにアクセスしていました。 しかしmacOS 10.15 Catalina / Xcode 11で提供される最新バージョンでは、独立したアプリ(Create ML.app)として提供されるようになりました。 X
この記事について 上記のようなドラッグ&ドロップを使った並び替えの処理を自作したは良いものの、使うことが無くなってしまったので、供養の意味を込めて、その時に得た知見をこの記事で共有したいと思います 💪 実装する条件 この記事で実装する処理は以下の条件のもと実装してきます。 サードパーティ製のライブラリを使用しない React Hooks を使って実装する 並び替えするときにアニメーションさせる 簡単に扱えるようにする! アニメーションは CSS を使って行いますが、今回は簡略化の為に CSS ファイルは扱わずにインライン CSSを用いる事とします。 どのように使えるか考える では早速、「 実装していくぞー 💪 」と行きたい所ですが、今回のような汎用的な処理を自作する時は、「 どういう感じで使いたいか? 」という所から考えた方が、色々とやりやすいと思っています。なので、今回はそこから考え
DFlexはどのJavaScriptフレームワークでも使えるVanillaなドラッグ&ドロップライブラリです。 他のD&Dライブラリとの大きな差として、最小限のレイアウトシフトをあげています。Webページで操作する要素が多い程、累積レイアウトシフト(CLS)が多くなり、結果としてレイアウトのズレを発生させ、UXに影響が出る、というものをGoogleがCore Web Vitals(コア・ウェブ・バイタル)の3つの指標の1つとして提唱しました。 CLS CLSは上のようにテキストを確認してボタンを押そうとしたら、遅れて表示されたコンテンツによりボタンの位置がズレ、本来押すつもりのなかったボタンを押してしまう、といったもので、GoogleのPageSpeed Insightsでも数値化され評価の対象として位置づけられています。 そのレイアウトシフトを最小限に抑える事が出来るD&Dライブラリとし
[React + Typescript] react-beautiful-dnd を使ってドラッグ&ドロップ機能を実装する React + Typescript で実装されたフロントエンドにreact-beautiful-dndを使ったドラッグ&ドロップ機能を実装しました。 全体の流れ 本記事でやることの全体の流れです。 React + Typescript で簡単な画像のリストを作成する react-beautiful-dndを導入してリストのアイテムをドラッグ&ドロップできるようにする 成果物 React + Typescript プロジェクトの雛形を作成する ドラッグ&ドロップを実装する前準備です。 create react app コマンドでプロジェクトの雛形を作成します。言語は Typescript を指定します。 npx create-react-app sample_dd
どうも、まさとらん(@0310lan)です! 今回は、面倒な作業が一切不要の無料ホスティングサービスをご紹介します! とにかくソースコードなどのリソースをドラッグ&ドロップでアップロードするだけで、誰でも簡単に自分のWebサイトを公開できるのが大きな特徴です。作成できるWebサイトの数や容量もほとんど制限がないのに無料で使えるのも魅力的です。 Webサイトの公開に興味ある方はぜひ参考にしてみてください! 【 Static 】 ■「Static」の使い方 それでは、「Static」をどのように使えばいいのか詳しく見ていきましょう。 サイトにアクセスしたら【SIGN UP】の項目をクリックして、まずは無料のユーザー登録を済ませておきます。 Googleアカウントから手軽にログイン可能ですが、メールアドレスとパスワードの組み合わせでも簡単に登録できます。 登録が完了したら、以下のようなダッシュボ
デザインツール「Canva」が、はてなブログのタイトル画像作成に対応しました。専用ソフトや技術がなくても、どなたでも簡単にタイトル画像を作成できます。 Canvaで作成したタイトル画像のイメージ Canvaは、テンプレートや画像素材をドラッグ&ドロップで編集できる、無料のグラフィックデザインツールです*1。ポスターやロゴ、名刺などさまざまなフォーマットに対応しており、誰でも簡単にデザイン作業が行えます。GoogleやFacebookアカウント、メールアドレスによる会員登録でご利用可能です。 Canvaのトップページ ご利用方法 1. まずは、Canvaのトップページからログイン(アカウントをお持ちでない場合は登録)をしてください。 2. ログイン後、トップページの検索フォームで「はてなブログ」と検索し、「はてなブログ Epic ヘッダー」をクリック。 ログイン後のトップページ 3. 以下の
PNGやJPG、GIF、PDF、PSDファイルをドラッグ&ドロップするだけでWebPフォーマットへ変換してくれるMac用アプリ「WebP Converter」がリリースされています。詳細は以下から。 Appleは今年の秋にもリリースするSafari v14でGoogleが開発した画像フォーマット「WebP」を正式にサポートし、macOS 11 Big SurではプレビューアプリやQuick Lookでも利用可能になるようですが、現在macOSが対応しているPNGやJPG, GIF, PDF, TIFF, EPS, PSDなどのファイルをWebPフォーマットへ変換してくれるユーティリティアプリ「WebP Converter」がリリースされています。 Convert you image to WebP fast and secure. Convert image to WebP. PNG, J
【iOS15】ついにiPhoneにアプリ間ドラッグ&ドロップが来たぞー! やり方はこれを見て!2021.09.21 17:00102,359 小暮ひさのり 便利!だけどちょいムズです。 本日公開されたiOS15。色々とアプリの様相や機能が変わっていますが、タッチジェスチャーもちょっぴり拡張され、iPad OSのようなアプリ間ドラッグ&ドロップが加わりました。 でも、この手順。ちょ〜っとばかしフクザツなんですよね。 手順を文字で表すと… 対象をドラッグ(ホールド)したまま、画面をスワイプして、他のアプリに切り替えて、指を離す。 です。ホールドしたままスワイプとか、無理言うなって話ですけど、この動作は両手を使うことでスムーズに利用できます。 Photo: 小暮ひさのり「写真」から「メッセージ」にドラッグ&ドロップ。 こんな感じに左手で対象をドラッグして、右手で画面の切り替え操作を行なうことで、
近年は電子書籍の普及によってPCやスマートフォンで本を読む機会が増えていますが、EPUB形式やAZW3形式などの電子書籍ファイルを閲覧するためには、専用のソフトウェアが必要です。「Ebook Reader for web」は、ブラウザのページ上に電子書籍ファイルをドラッグ&ドロップするだけで中身が閲覧できるというウェブサイトです。 Ebook Reader for web https://www.loudreader.com/ 「Ebook Reader for web」にアクセスするとこんな感じ。 使い方は、ファイルを指定して読み込ませることもできますが、背景が灰色の部分にファイルをドラッグ&ドロップするだけでもOK。対応している形式は、EPUB・AZW3・MOBI・PDFです。 MOBI形式の「あめあめふれふれうそやんで」第1話のデータを、Ebook Reader for webで読み
「iOS 15」では、ついにアプリの間で画像やテキストをドラッグ&ドロップできるようになりました。 たとえば写真アプリで写真を長押ししてそのままぐいっとドラッグしていきメモなど他のアプリでドロップして貼り付け可能です。 百聞は一見にしかず、動画をご覧ください。 Using cross-app drag and drop on iPhone in iOS 15. Finally 🎉 #WWDC21 pic.twitter.com/1RbyPBGfcq— Federico Viticci (@viticci) June 7, 2021 アプリ間のドラッグ&ドロップは、2017年からiPadで利用できるようになっていましたが、iOS 15でついにiPhoneにもこの機能が搭載されました。 アプリ間のドラッグ&ドロップは、コンテンツの移動ではなく複製(コピー)になります。 Drag and dr
GitHubは、Wikiページに画像をドラッグ&ドロップするだけで自動的にアップロードされ、ページに画像が追加される新機能を発表しました。 同社新CEOのThomas Dohmke氏がツイートしています。また、GitHubのChange Logによると2月14日付けで「Upload images to Wiki pages」としてこの機能が追加されているのが分かります。 Shipped today: You can now upload images to Wiki pages. Same UI as in issues and pull requests - drag and drop, select the file, or paste the image. https://t.co/0z1bGTFIvs pic.twitter.com/kC8s9dZIak — Thomas Dohm
先日紹介した「Remove.bg」ついにPhotoshopに対応も便利でしたが、なんと今度は、Windows, macOS, Linux対応の無料アプリがリリースされました! 単体アプリなので、ブラウザもPhotoshopも不要。しかも、複数の画像をドラッグ&ドロップして、背景だけを画像から切り抜くこともできます。 写真: ぱくたそ 人物が2人でもできるかなと思いましたが、問題なくできました。食べかけの苺もキレイに残っています。 remove.bg Appの特徴 remove.bg Appのインストール remove.bg Appの使い方 remove.bg Appの特徴 remove.bg Appは、Windows, macOS, Linux対応のアプリです。 無料版と有料版があり、無料版は0.25メガピクセルの画像まで、月50枚まで、と制限があります。 ドラッグ&ドロップによる背景の自
ウェブアプリを開発するとき、できるだけ操作は直感的に行えるようにしたいものですが、ドラッグ&ドロップという操作をブラウザ内で行えるように実装するのはなかなか面倒です。「gridstack.js」はそうした面倒な実装を代わりにやってくれるライブラリで、まさに一瞬と言えるほどの手軽さでドラッグ&ドロップ操作可能なカードを実装できるとのことなので、実際に使って試してみました。 gridstack.js | Build interactive dashboards in minutes. https://gridstackjs.com/ gridstack/gridstack.js: Build interactive dashboards in minutes. https://github.com/gridstack/gridstack.js gridstack.jpのサイトに行くとデモが用意
写真ファイルには、撮影したカメラの情報や位置情報などを含むExif情報が含まれています。Exif情報は画像の管理に役立つものですが、他人と写真を共有する際にはプライバシーの漏えいにつながる可能性もあります。ドラッグ&ドロップだけでExif情報を簡単に削除できる無料アプリ「ExifCleaner」を見つけたので、実際に使ってみました。 ExifCleaner - FREE Desktop app to clean image metadata https://exifcleaner.com/ ExifCleanerを使うには、まず配付ページにアクセスして実行ファイルをダウンロードします。ExifCleanerにはWindows版の他にmacOS版やLinux版が存在。今回はWindowsで使いたいので「ExifCleaner-3.6.0.exe」をクリックしてダウンロードしました。ファイルサ
Twitterで複数ページにわたるマンガを投稿する時にツイートをスレッド化するという方法がよく取られますが、ツイートを1つ1つ手作業で設定するのはかなりの手間。……ということで、ファイルをドラッグ&ドロップするだけで複数枚にわたるマンガのページを自動的にスレッド化したツイートとして投稿可能で、日時を指定して予約もできるという、描き手にとってお役立ちなツールが登場しました。 Twitter漫画投稿予約(β) http://murs.site/tw/html/post-reservation.html 上記URLにアクセスしたら、まずは「ログイン」をクリック。 漫画を投稿したいTwitterアカウントにログインしておく必要があるので、アカウントとIDを入力して「ログイン」をクリック。 すると、Twitter漫画投稿予約のトップページに戻りました。 最上部で投稿予約時間を設定するようになっている
複数枚の画像や動画をドラッグ&ドロップするだけでSlackやGitHubに投稿可能なAPNGやアニメーションGIFを作成してくれるMac用アプリ「A frames」がリリースされています。詳細は以下から。 A frames(Animated Image Creator)はPhotoプロテクターアプリなどを開発しているTomoya Onishiさんが新たに開発&公開したAPNG/アニメーションGIF作成アプリで、複数枚の画像か動画ファイルをドラッグ&ドロップするだけでアニメーション画像を生成してくれる機能があります。 A framesはAPNGやGIF作成のための軽量でシンプルなツールです。 APNGかGIFを選択し、複数枚の画像か、動画ファイルをドラッグ&ドロップすると目的のアニメーション画像が生成されます。SlackやGitHubに投稿すると便利です。 A frames – Mac Ap
こんにちは!株式会社 CastingONEの岡本です。 はじめに 弊社のアプリケーションのフロントは現在、Nuxt2 から React(Next.js)にリプレイスを行なっています。移行するにたり、ドラッグ&ドロップのライブラリを探していたところdnd kitが良さそうということになったので、このライブラリを深く理解するため、社内で勉強会を開催を実施しました。今回は、その勉強会で使用したサンプルを基に、dnd kit の使い方について解説していきます! dnd kit とは dnd kit は、React のための軽量かつ拡張可能なドラッグ&ドロップのツールキットです。主な特徴は以下の通りです。 豊富な機能 カスタマイズ可能な衝突検出アルゴリズム、複数のアクティベータ、ドラッグ可能なオーバーレイ、ドラッグハンドル、自動スクロール、制約などが含まれる React 専用 useDraggabl
Webアプリケーションが多機能になるにつれて、ローカルアプリケーションライクな操作が求められるようになっています。例えばドラッグ&ドロップはローカルアプリケーションであれば良くある操作と言えます。 そんなドラッグ&ドロップをスムーズに行えるライブラリがPlainDraggableです。 PlainDraggableの使い方 ベジュ曲線的なデモです。 グリッドを効かせたドラッグを行うデモです。 スナップする時に、スムーズに動くこともできます。 特定のDOM内には入らないように指定できます。 応用すると、二つのノード、それぞれが入れない場所を指定できます。 ソートにも使えます。 PlainDraggableはDOMだけでなく、SVGに対しても利用できます。ドロー系のアプリケーションであったり、簡易的なゲームなどでも使えそうです。ソートでも使えるので、様々な場面で利用できそうです。 PlainD
動画ファイルをドラッグ&ドロップするだけで圧縮してくれるMac用ffmpegラッパー「CompressX」がリリースされています。詳細は以下から。 撮影した動画をWebサイトで公開/他のユーザーに転送する際にファイルのサイズを小さくしたい場合がありますが、そのような場合に動画ファイルをドラッグ&ドロップして[Compress]をワンクリックするだけでサイズを圧縮してくれるMacアプリ「CompressX」が新たに公開されています。 Welcome to CompressX We use FFmpeg under the hood to compress the video Step 1. Install FFmpeg on your Mac. We strongly recommend install it via Homebrew Step 2. Open Terminal, enter
S3 Drive | Map S3 Storage as a Local Drive | nsoftware https://t.co/YOTKz8v2So うお。Amazon S3を仮想ローカルドライブとしてマウント! これめっちゃ便利じゃない? — Kazuya Sugimoto @CData Software Japan (@sugimomoto) August 31, 2020 /n Software社が、WindowsエクスプローラからS3ファイル操作ができるようになるデスクトップ製品"S3 Drive"を開発し、現在β版を提供しているので紹介します。 S3 Driveを使い始める S3 Driveは本エントリ執筆時点(2020年9月2日)では、パブリックβ版として無料で提供されています。 準備 AWS アクセスキーの確保 まず、AWS管理コンソールのIAM管理画面から、操作した
iOS 15ではファイルの異なるアプリ間におけるドラッグ&ドロップ操作に対応しました。iPadOSでは既におなじみの機能ですが、iPhoneやiPod touchでは初めて使えるようになったので、まだ試したことがない人も多いのではないでしょうか。本稿では、改めてiOS 15におけるドラッグ&ドロップの操作方法と、実用的な使い方について紹介します。 iOS 15における異なるアプリ間でのドラッグ&ドロップ操作には、両手を使うのがおすすめです。ここでは例として、写真アプリで選択した画像を、LINEで友人に送信する手順で説明していきましょう。 まずは「写真」アプリ内で表示されたサムネイル画像を長押しし、ドラッグした状態にします。この状態で、しばらくドラッグした状態の写真から指を離してはいけません。
ドラッグ状態で触れた要素のindexがそのまま移動先になると考えるのが1番簡単そうです。 やりたいこと これが検知できるのはonDragEnter,onDragOver,onDropということになります。 ただ、これだと末尾に移動させることができません。 なのでカーソルが触れている位置で移動先を変えることにします。 「上側 → index」「下側 → index + 1」 加えてゴースト(またはキャレット)の表示位置はドラッグ中に移動先が変わるたび更新しないといけないので、移動先の決定にはonDragOverを使用することになります。 ミニマムな実装 以上を踏まえてミニマムに実装したのがこちらです。(ゴーストなどは未実装) 補足 iOSのSafariではdraggable属性だけではなく、CSSで -webkit-user-darg: elementを付けていないとonDragStartが
ドラッグ&ドロップは素晴らしいインタフェースソリューションです。何かを掴み、ドラッグとドロップをすることは、コピーや移動(ファイルマネージャを参照)から注文(カートにドロップする)まで、多くのことをするための明白かつ簡単な方法です。 現在の HTML 標準では ドラッグイベントに関するセクション があります。 それらはシンプルなタスクを簡単に解決したり、“外部” ファイルのドラッグ&ドロップをブラウザで扱うことができたりと、興味深いです。したがって、OSのファイルマネージャでファイルを取り、ブラウザウィンドウへドロップすることができます。その後、JavaScript はそのコンテンツへアクセスできます。 しかし、ネイティブのドラッグイベントにも制限があります。例えば、特定の領域でドラッグを制限することができます。また、ドラッグを “水平” または “垂直” のみにすることはできません。その
Appleは2015年にリリースしたOS X 10.11 El Capitanでシステム整合性機能 (SIP:System Integrity Protection)という、たとえrootユーザーであってもシステム的に重要なディレクトリやアプリへの操作を制限する通称「rootless」というセキュリティ機能を実装していますが、 システム整合性保護は、OS X El Capitan 以降で採用されているセキュリティ技術です。Mac 上の保護されたファイルやフォルダを改ざんしようとする悪質なソフトウェアからデータを守ります。システム整合性保護では、ルートユーザアカウントに制約を課し、Mac オペレーティングシステムの保護されている部分に対してルートユーザが実行できる操作を制限します。 Mac のシステム整合性保護について – Apple macOS Venturaでは、このSIP(rootle
こんにちは山崎です。久しぶりの投稿になります。 今回はJavascriptでドラッグアンドドロップでのファイルアップロードを実装しようと思います。 完成形・仕様 このような画面になります。ファイルはドラッグ&ドロップもしくは、ファイル選択フィールドからアップロードし、下にアップロードされた画像を表示する形です。 Ajaxなどを使ってアップロードされた時点でサーバーに保存するのではなく、送信ボタンが押された時点でサーバーに画像がアップロードされる仕様です。 今回はスタイルを最低限しか当ててないため質素ですが、こういったUIはCMSの管理画面などでよく見ると思います。 実装 まずHTMLを作っていきます。今回は最低限のスタイルで済ませるので、インラインでスタイルを書いています。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ドラッグ
MacBook Pro/Airのノッチにファイルをドラッグ&ドロップすることで様々なアクションを実行できるアプリ「TopDrop」にYoinkの様なシェルフ機能が追加されています。詳細は以下から。 Appleは2021年10月に発売したMacBook Pro (14-/16-inch, 2021)で、ベゼルを薄くし、より広いディスプレイと1080p FaceTime HDカメラを採用したため、最新のMacBook Pro/Airにはノッチが存在しますが、このノッチをAirDropなどのアクションのトリガーとして使えるようにしてくれる「TopDrop」アプリに、シェルフ機能が新たに追加されています。 – New action: Top Shelf! Drag anything into Top Shelf and get fast access to it anytime! リリースノートよ
GitHub - givanz/VvvebJs: Drag and drop website builder javascript library. ドラッグ&ドロップでサイトを作れるようにするJS「VvvebJs」 jQuery+Bootstrap4で出来ていて、レスポンシブなサイトをみたまんま、作れて便利そうです。 Bootstrapの基本コンポーネントも全部そろっており、HTMLコーディングの手間を省けます 関連エントリ JSで3Dレンダリングエンジン「LemonJS」 マガジン形式のグリッドレイアウトを実現する「stratum.js」
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く