ChatGPTなどのチャットAIがどんな風に文章を認識しているのかが一目で分かる「Tokenizer」

2023/04/06 135 users Tokenizer OpenAI chatgpt OPEN

OpenAIが開発したChatGPTをはじめ、さまざまなAIが人間レベルの会話を行ってくれるようになりました。AIは文章を読み書きするとき「トークン」という単位で認識を行うのですが、普通の文章がトークン的にはどのように分解されるのかを一目で教えてくれるツール「Tokenizer」がOpenAIのページ上で公開されています。 Open... 続きを読む

CSSでスクロールが連鎖するのを回避する古い方法とoverscroll-behaviorを使った新しいテクニック

2021/11/11 144 users モーダル 終点 連鎖 CSS ナビゲーション

スクロールの連鎖（スクロールチェーン）とは、ページ上にスクロールするコンテンツがあり、そのコンテンツをスクロールして終点に到達するとメインのコンテンツもスクロールしてしまう現象です。 モーダルにスクロールがある場合、スマホのナビゲーションにスクロールがある場合、固定サイドバーにスクロールがある場合... 続きを読む

CSSで実装したレイアウトの構造や階層を簡単に確認できる、私のお気に入りのCSSハック -My favorite CSS hack | コリス

2019/09/10 86 users コリス Grid Flexbox 階層 CSS

flexboxで実装したレイアウトはもちろん、floatでもgridでもCSSで実装したレイアウトの構造や階層を確認できるスタイルシートを紹介します。 ページ上の各要素のサイズ・マージン・パディングなどに不整合がないか簡単に確認でき、スニペットやブックマークレットに登録しておくと便利です。 My favorite CSS hack by Ga... 続きを読む

モーダルを開いている時にページがスクロールしてしまうのを防ぐCSSとJavaScriptのテクニック | コリス

2019/06/18 215 users モーダル コリス CSS テクニック JavaScript

ページ上でモーダルを開き、スクロールして、モーダルを閉じると、通常そのページはモーダルを開いた時とは別の場所にスクロールされた状態で表示されてしまいます。そして、スクロールした状態で、モーダルを開いて閉じると、一番上にスクロールされた状態で表示されてしまいます。 これらを解決するCSSとJavaScriptの... 続きを読む

Wordに全人類待望の“暴れ回るティラノサウルス”表示機能が追加　「虚構かと思った」「退職願に入れたい」 - ねとらぼ

2018/12/09 499 users ティラノサウルス 虚構 word マイクロソフト 退職願

マイクロソフトの「Word for Office 365」の新機能が、あまりにも便利過ぎると一部で話題になっています。“暴れ回るティラノサウルス”をページやスライド上に表示できるというもので、マイクロソフトの公式サイトにもバッチリ書かれています。そうそう、ちょうどページ上でティラノサウルスを暴れ回らせたかったのですよ... 続きを読む

これを使うとスクロールに連動したアニメーションが簡単に！わずか2KBの超軽量JavaScriptライブラリ -Sal.js | コリス

2018/09/12 210 users コリス スクロール スクロールアニメーション アニメーション

スクロールに連動して、ページ上の要素をアニメーションで表示するライブラリはいくつかあります。その中でもかなりの超軽量で、他スクリプトへの依存が一切ないスクロールアニメーションのライブラリを紹介します。 しかも実装は超簡単。手間がかかりそうと思っていた人は、ぜひお試しを。 Sal.js Sal.js -GitHub Sal.j... 続きを読む

サイト上で実行されるプログラムについて同意を確認するためのプログラム – GUNMA GIS GEEK

2018/06/19 119 users GUNMA GIS GEEK 同意 プログラム サイト上 昨今

昨今、クライアントサイドでプログラムを実行するリスクが高まっています。 そこで、ページ上で実行されるプログラムについて閲覧者に同意を求めるプログラムをこのページに埋め込んでみました。 ひとえにクライアントサイドで実行されるプログラムといっても様々なものがあります。 例えばこのブログはWordpressで作ら... 続きを読む

CSSアニメーションもこれなら手軽！DOM要素にマイクロインタラクションを与えるJavaScriptライブラリ -Micron | コリス

2018/01/24 50 users Micron インタラクション コリス CSS ライブラリ

ページ上のさまざまなDOM要素にマイクロインタラクションを簡単に与えることができるJavaScriptのライブラリを紹介します。 実装は非常に簡単、カスタマイズ性にも優れており、CSSで要素をアニメーションさせ、JavaScriptでインタラクティブな動作をコントロールできます。 インタラクションを与える 要素に「data-micron」を加えるだけで、インタラクションを与えることができます。 バ... 続きを読む

ページ上でずっと動いているsetTimeout、setInterval、requestAnimationFrameを見つけてパフォーマンス改善する | Web Scratch

2017/12/07 99 users setInterval setTimeout timer

複雑なウェブアプリケーションになってくると、1つのページで複数のTimerなどを回すことがあります。 例えば、Twitterのようなアプリならば、ポーリングで更新するために setInverval のようなタイマーを回します。 また、ゲームなどCanvasで描画を行うアプリケーションならば、メインループを requestAnimationFrame で回します。 このように色々なタイマー系が一つの... 続きを読む

ウェブページの英単語に単語レベルを指定して日本語訳のルビをつけることが可能なGoogle Chrome拡張機能「Read Ruby」レビュー - GIGAZINE

2017/10/04 73 users 英文 GIGAZINE ルビ ウェブサイト ウェブページ

英文のウェブサイトを読んでいる時に分からない単語が出てくると、いちいちソフトウェアやウェブ検索で意味を調べる必要があり、面倒なもの。そんな中、ページ上の英単語に日本語のルビを振ってくれるGoogle Chrome拡張機能「 Read Ruby 」が公開されています。ルビを振る単語レベルを指定可能なことから、自分の英語レベルで理解できなさそうな単語に絞って意味を表示してくれるという、便利なツールにな... 続きを読む

[JS]レスポンシブ対応、画像の配置を文字のツラにぴったり揃えるスクリプト -Baseline Element | コリス

2015/11/06 95 users 罫線 コリス づら デモ スクリプト

画像やテキストなど、コンテンツのデザインで重要なのは縦のリズム。 ページ上の指定した要素を文字のベースラインにツラをあわせて配置し、縦のリズムを簡単にデザインできるスクリプトを紹介します。 デモのように罫線を背景にした時...記事の続きを読む 続きを読む

debugCSSでCSSをチェックする

2015/07/04 50 users ブックマークレット CSS ブックマーク Blog 結果

27 Jun 2015 Top › Blog › CSS , JavaScript debugCSSでCSSをチェックする B! 0 3 0 0 P 2 debugCSS というブックマークレットが面白かったのでそれについて。 debugCSS Sponsored Links debugCSS debugCSS は表示中のページのCSSをチェックして結果をページ上に表示してくれる ブックマークレッ... 続きを読む

Web Design Bookmarks | Webデザインの参考になるトレンドまとめ

2014/07/21 216 users インスピレーション トレンドまとめ ミッション 参考 デザイン

Web Design Bookmarksは、Webデザインの参考になるトレンドまとめサービスです。 サービスのランディングページを中心に掲載しています。 このサービスは、「Webデザイン制作に関わるすべての人に、最高のインスピレーションを与えること」をミッションに制作しました。 そのため、ページ上に余計な情報を表示せず、デザイン閲覧に集中できるようなデザインにしています。 このサービスをとおして、... 続きを読む

Tumblrの省メモリーな無限スクロール - 記録

2014/06/13 538 users tumblr ユーザースクリプト 無限スクロール 記録 画面

無限スクロールまたはauto pagingと呼ばれるUIには、読み終えたコンテンツがどんどん画面の上のほうに溜まっていってメモリーを食い潰すという問題がある。 なかでもTumblrは画像などのコンテンツが多いため、ダッシュボードダイバーたちは無限Tumblrユーザースクリプトなどのユーザースクリプトをインストールして、読み終えたコンテンツを定期的にページ上から自動削除するといった対策を講じていた。... 続きを読む

Adblock PlusアドオンはFifrefoxのメモリ消費量を大幅に増加させている - GIGAZINE

2014/05/15 53 users GIGAZINE ブラウジング Firefoxアドオン 一方

By Pascale PirateChickan ウェブ上の広告を自動的に非表示にしてくれる「Adblock Plus」は、Firefoxアドオンの中で最もインストールされている人気アドオンです。広告を消すことでページの読み込み速度が上がったり、ページ上の不要な要素がなくなったりしてブラウジングが快適になる効果がありますが、一方で、Adblock PlusがFifrefoxのメモリ消費量を大幅に増... 続きを読む

CSSのレイアウトの崩れを見つける時に役立つChromeの機能拡張 -Pesticide | コリス

2014/04/30 150 users コリス CSS Chrome レイアウト ローカル環境

ウェブ制作時の困ったは、CSSのレイアウトが思うようにいかない時。 そんな時に役立つ、ページ上の全ての要素のアウトラインを要素ごとに異なるカラーで表示する便利ツールを紹介します。 PesticideはChromeの機能拡張だけでなく、外部スタイルシートとしても提供されているのでローカル環境でブラウザを問わず利用できます。 Pesticide Pesticide -GitHub Pesticideの... 続きを読む

使いやすいスタイルガイドを作るための5つのポイント - GIGAZINE

2014/04/26 77 users コンポーネント モジュール GIGAZINE デザイナー 5つ

by Dave Crosby ウェブサイトのデザインを決める時にページ上のコンポーネントやモジュールをリスト化したスタイルガイドを作っておくと、開発者や他のデザイナーと情報が共有でき便利です。では、どのようにしてスタイルガイドを使うとうまく運用できるのか？ということで、ZURB Universityが5つのポイントにまとめています。 ZURB University | 3 Minute Lesso... 続きを読む

[JS]ページ全体、ページ上のさまざまな要素にオーバーレイをかっこよく表示するスクリプト -plainOverlay | コリス

2014/04/22 70 users jQuery コリス スクリプト アニメーション 実装

ページ全体、ページ上のさまざまな要素にオーバーレイをアニメーションでかっこよく表示するjQueryのプラグインを紹介します。 実装は非常にシンプルで、オーバーレイのカラーや不透明度、アニメーションなどのカスタマイズも簡単です。 plainOverlay plainOverlay -GitHub plainOverlayのデモ plainOverlayの使い方 plainOverlayのデモ デモで... 続きを読む

MMDモデルを3DCGでウェブ上に公開し閲覧者がアングルを動かしまくれるJavaScriptライブラリ「jThree」 - GIGAZINE

2014/03/18 237 users GIGAZINE MikuMikuDance jThree

MMD(MikuMikuDance)で作成したファイルをウェブページ上に表示し、閲覧者が視点を自由に操作できるようにするJavaScriptライブラリが「jThree」です。ページ上にモデルを表示させるにはWindows 7を搭載したPCでChrome・FireFox・Operaを使えばOK。また、Macの場合はOperaならば同様にページ上で動作させることが可能なようです。 3DCGコンテンツを... 続きを読む

[JS]ページ上のあらゆる要素を簡単にレスポンシブ対応にするスクリプト -Responsive Elements | コリス

2013/09/17 68 users コリス jQuery class スクリプト ピクセル単位

外部スクリプトを加えるだけで、ページ上のあらゆる要素にレスポンシブ対応のclassを利用できるようにするjQueryのプラグインを紹介します。 ブレイクポイントはピクセル単位で細かく、そして複数設定することが可能で、さまざまな表示幅に最適化なスタイルを特定の要素に適用できます。 Responsive Elements Responsive Elements -GitHub Responsive E... 続きを読む

広告をインターネットで接続するあらゆる通信から消し去る外付けハードウェア「AdTrap」 - GIGAZINE

2012/12/13 53 users GIGAZINE YouTube AdTrap デバイス 最中

インターネットをしている最中にページ上に表示されている広告を除去するデバイスが「AdTrap」。PCだけでなくスマートフォンやタブレットなどのモバイル機器においても使用可能で、YouTubeなどの動画再生中に出てくる広告などを含めたオンライン上のあらゆる広告を表示しないようにできるため、画面の読み込み時間も短縮され快適にインターネットが行えます。 AdTrap - the internet is ... 続きを読む

HTML/CSSを知らない/書けない初心者でも簡単にWebサイトをデザインできるEasel

2012/08/08 313 users Easel Adroll CSS 筆者 HTML

[筆者: Bryce Durbin] ブラウザ上でWebページをデザインできるサービスEaselが、今日（米国時間8/7）ロンチした。このWYSIWYG方式のWebデザインツールは、デザイナーを雇わずに迅速にページ上に自分たちの考えを表現したい、と望む人たちに向いている。 EaselのファウンダBen OgleとMatt Colyerは、エンジニアとしてAdrollにいたときに知り合い、これまでの... 続きを読む

ページレイアウトそのままに見たまま編集が出来るようになるライブラリ「Create.js」:phpspot開発日誌

2012/07/26 74 users ライブラリ phpspot開発日誌 Create.js 太字

Create.js - A new kind of web editing interface ページレイアウトそのままに見たまま編集が出来るようになるライブラリ「Create.js」。 起動すると、コンテンツテキストが編集可能になり、ページ上のツールバーを使って太字などの文字修飾ができ、そのままSaveボタンで保存できるという非常に使いやすい編集ツールとして使えます CMS等に実装するといいのか... 続きを読む

Twitter.comの読み込みスピードが5分の1に - ITmedia ニュース

2012/05/30 216 users twitter.com Ajax 米Twitter スピード

米Twitterは5月29日（現地時間）、Twitter.comをアップデートし、読み込み速度を従来の5分の1にしたと発表した。今週中に新生Twitter.comに切り替わる見込み。 まず、ページ上のパーマリンク（永続的なリンク）に含まれているハッシュバング（#!）を排除した。ハッシュバングはAjaxを利用するための仕組みだが、JavaScriptがパスを解釈する分、読み込みに時間がかかる。これを... 続きを読む

[JS]ページ上のさまざまな要素をぷるぷる振動させるスクリプト -jQuery Vibrate | コリス

2011/10/30 55 users コリス reverse REV ＳＰＥＥＤ スクリプト

jQuery Vibrateの実装 JavaScript jQuery Vibrateはさまざまなオプションを簡単に設定できます。 $('.vibrate').vibrate({ speed: 50, // Vibration speed in milliseconds trigger: "mouseover", // Triggering event reverse: false, // Rev... 続きを読む