CSSの進化がすごすぎる！ 2つの画像を比較するスライダーは数行のコードで実装できるようになりました

2023/11/28 147 users スライダー CSS ライブラリ HTML テクニック

2つの画像を重ねて表示し、画像を比較できるスライダーを実装するには、今まではJavaScriptのライブラリなどを使用していたかもしれません。 ほんの少しのJavaScriptと、あとはシンプルなHTMLとCSSで2つの画像を比較するスライダーを実装するテクニックを紹介します。 まずは、実際の動作をデモページでご覧ください。縦... 続きを読む

一番星はてのとおしゃべりできるようになりました - 一番星はての開発ブログ

2023/05/01 171 users 一番星 OpenAI ChatVRM App デフォルト

先日、pixivさんがChatVRMという3Dキャラクターと会話できるオープンソースを公開していたので早速一番星はてので試してみた。 下のサイトは一番星はてのの3Dモデル、人格設定、声設定がデフォルトになっているだけのChatVRMのデモページと同等である。 https://chat-vrm-hateno.vercel.app/ おしゃべりするにはOpenAIの... 続きを読む

日本語Alpacaデータを用いてJapanese-Alapaca-LoRAを作ったので公開します【デモページあり】｜kun1emon｜note

2023/03/26 130 users Note

⚠️注意今回公開するのはLoRAを用いて作成したLLaMAの日本語化Adapterでありモデル自体ではありません。 LoRAをマージするベースのLLaMAは商用不可であり、今回公開するAdapterで日本語化したモデルも商用利用はできません。 OpneAIの利用規約で、OpenAIサービス、ChatGPTの出力結果を競合モデル開発用途に利用することは... 続きを読む

中国産の画像AI「ERNIE-ViLG」が“二次元キャラ”に強いと話題　新しいデモページ公開

2022/09/01 249 users baidu 画風 油彩 水彩 大規模データ

デモページでは、画像のイメージを言葉で入力し、画風を指定することで、イラストを1回につき6通り生成できる。画風は「水彩」「油彩」「アニメ風」など7種類。Baiduは中国語での利用を推奨しているが、英語も入力できる。 ERNIE-ViLGは、Baiduが手掛ける大規模データ「Wenxin」を基に、同社が開発しているAI群の一つ。... 続きを読む

画像生成AI「Stable Diffusion」を低スペックPCでも無料かつ待ち時間なしで使う方法まとめ

2022/08/24 705 users Stable Diffusion NVIDIA製GPU

2022年8月23日に無料公開された画像生成AI「Stable Diffusion」は、「ボールで遊ぶ猫」「森の中を走る犬」といった指示を与えると指示通りの画像を出力してくれます。Stable Diffusionはデモページで画像生成を試せる他、NVIDIA製GPUを搭載したマシンを用いてローカル環境で実行することも可能です。しかし、デモページ... 続きを読む

PHPとSQLiteをWebAssembly化し、Webブラウザ上でWordPressを実行可能にしたデモをVMwareが公開

2022/08/21 151 users MySQL CMS SQLite VMware PHP

VMwareのWasm Labsは、Webブラウザ上でWordPressを実行可能にしたデモを公開しました。 デモページをWebブラウザで開くと、実際にWebブラウザ上でWordPressが実行されます。 WordPressはオープンソースで開発されている代表的なCMSです。PHPで開発されています。バックエンドデータベースとしてMySQLが使われることが一... 続きを読む

「全ての住所フォームがこうなってほしい」　SIerが公開した“使いやすい入力欄”の作り方が話題　ソースコードも掲載

2022/03/01 305 users SIer 知見 ひとまとまり ソースコード 住所フォーム

SIerのオープンコレクターが公開した、使いやすい住所入力フォームを作る知見をまとめたブログ記事が話題だ。「郵便番号を入れる枠はひとまとまりに」といった機能の必要性などを説明しており、デモページやソースコードも掲載している。 「郵便番号を入れる枠はひとまとまりに」「郵便番号を基にした住所の自動入力を搭... 続きを読む

難解なコードをAIで要約、可視化。Facebook AI Researchがデモページと論文を公開 | Ledge.ai

2019/02/28 112 users Research Facebook 関数 イスラエル工科大学

機械翻訳を活用し、難解なコードの要約、構造の可視化をしてくれる「Code2Seq」の論文とデモページをイスラエル工科大学とFacebook AI Researchが公開しました。 膨大な量のコードを簡単な文章で要約他人が書いたコードは、「どんな処理なのか」を知るだけでも、理解が容易になります。Code2Seqは、関数の中でどんな処理... 続きを読む

ソースコードを分析し、コードの構造や階層・依存関係を可視化する便利な無料ツール -Code Crumbs | コリス

2019/02/25 703 users コリス dependencies Issue 階層 言語

フローチャート ※依存関係・フローチャートはJavaScriptのみです。 対応言語は、下記の通り。 JavaScript TypeScript Python PHP Java C++ 望む言語が他にあればIssueにどうぞ、とのことです。 Code Crumbsのデモ デモでは、JavaScriptのコードでその動作を確認できます。 デモページ 依存関係はDependenciesをオンに、... 続きを読む

Vim を WebAssembly に移植した - はやくプログラムになりたい

2018/07/09 676 users WebAssembly vim github.com 実物

久々のブログです． 6月ぐらいにWebAssembly の仕様をざっくり読んだので，なんか WebAssembly でやりたいなと思って，Vim を WebAssembly に移植してブラウザで動くようにしてみました，という話です． github.com 多分実物を見ていただくのが一番早いので，下記のリンクにアクセスしてみてください． デモページはこち... 続きを読む

Vim を WebAssembly に移植した - はやくプログラムになりたい

2018/07/09 676 users WebAssembly vim github.com 実物

久々のブログです． 6月ぐらいにWebAssembly の仕様をざっくり読んだので，なんか WebAssembly でやりたいなと思って，Vim を WebAssembly に移植してブラウザで動くようにしてみました，という話です． github.com 多分実物を見ていただくのが一番早いので，下記のリンクにアクセスしてみてください． デモページはこち... 続きを読む

JavaScript実行時、「閲覧者の了解をいちいち得る」ページ登場　「Coinhiveより嫌」「悪夢」と話題 - ITmedia NEWS

2018/06/20 498 users Coinhive 物議 スクリプト 了解 悪夢

JavaScript実行時、「閲覧者の了解をいちいち得る」ページ登場　「Coinhiveより嫌」「悪夢」と話題 閲覧者に無断でCoinhiveを設置したサイト運営者が摘発され物議をかもす中、すべてのJavaScriptについて、閲覧者に許可を取るには――そんな発想で作られたデモページが公開された。スクリプトの実行のオンオフをいちいち選... 続きを読む

[CSS]スニペットとしてストックしておきたい、レスポンシブ対応のパンくずとステップを実装するチュートリアル | コリス

2015/07/27 232 users コリス NAV チュートリアル CSS スニペット

レスポンシブ対応のパンくずとマルチステップのナビゲーションを紹介します。 HTMLもCSSも非常にシンプルで、カスタマイズ性にも優れた有用なスニペットとしても利用できます。 デモページ HTML HTMLの基本構造です。 <nav> <ol class="cd-breadcrumb"> <li><a href="#0">Home</a></li> <li><a href="#0">Gallery<... 続きを読む

最近のWebページで使用されている『さまざまな魅せ方』を実装するCSSやJavaScriptの最新チュートリアルのまとめ | コリス

2015/04/05 478 users コリス CSS Ope CodyHouse 最新チュートリアル

最近のWebサイトやブログで見かけるアニメーションを使ったさまざまなかっこいいエフェクトやコンテンツの見せ方を実装するCSSやJavaScriptのチュートリアルをCodyHouseから紹介します。 それぞれファイルを一式でダウンロードできるので、すぐに利用できます。 Fixed Background Effect デモページ 対応ブラウザ：Chrome, Safari, Firefox, Ope... 続きを読む

JavaScriptとCSSは不要！SVGの気持ちいいアニメーションで作られた超軽量のかわいいローディング -SVG Loaders | コリス

2014/12/10 129 users ローディング コリス SVG Step SVGファイル

JavaScriptもCSSも画像も使用せず、SVGで実装された軽快で気持ちいいアニメーションで動くローディングのアイコンを紹介します。 ページに実装する時もJavaScript/CSSは必要ありません。簡単なHTMLでOK！ デモページ SVG Loadersの使い方 使い方は、簡単！ Step 1: SVGファイルをダウンロード 下記ページの右サイドの「Downlaod ZIP」から、SVGフ... 続きを読む

Illustfolio 3 - イラストポートフォリオサイトを一瞬で作れるTumblrテーマ

2014/11/05 120 users Tumblrテーマ 無料Tumblrテーマ 一瞬 好評

The easiest way to make your own portfolio. イラストポートフォリオサイトを一瞬で作ろう Illustfolio 3は、イラストポートフォリオサイトが一瞬で作れる無料Tumblrテーマです。 バージョン3.0は、今までで最も大きなアップデートです。より簡単・より快適に使えるようにしました。 デモページを見る デザインを一新 Illustfolio 2で好評... 続きを読む

Webデザインの代表的な4つのレイアウト、その特徴と相違点 -Liquidapsive | コリス

2014/09/09 238 users コリス Responsive static Adaptive

デモページ Responsive（レスポンシブ） Adaptive（アダプティブ） Liquid（リキッド） Static（スタティック） Responsive（レスポンシブ） レスポンシブは、デスクトップ・スマホ・タブレットなど異なる解像度ごとにレイアウトを定義するのが特徴です。一見するとリキッドのように見えますが、表示サイズに応じて要素の幅のサイズやレイアウトが変化します。 デバイスごとに合わ... 続きを読む

レスポンシブデザインに対応したHTML5テンプレート集「HTML5 UP」 ｜ ライフハッカー［日本版］

2014/07/19 205 users レスポンシブデザイン ライフハッカー CSS テンプレート

「HTML5 UP」はレスポンシブデザインに対応したHTML5テンプレートをたくさん集めたサイトです。デモページがそれぞれ用意されているので、画面サイズによりどのように変化するのかを確かめることができます。また、テンプレートはCSSやJSとともにダウンロード可能です。 以下に使ってみた様子を載せておきます。 まずHTML5 UPへアクセスしましょう。さまざまなテンプレートが目に入ってきます。このよ... 続きを読む

[CSS]動画を背景として表示させ、オーバーレイでコンテンツを配置するテクニック | コリス

2014/06/13 109 users video要素 コリス パネル モダンブラウザ ブラウザ

動画をブラウザいっぱいに背景として表示させ、その上にコンテンツをオーバーレイで配置するテクニックを紹介します。 Create Fullscreen HTML5 Page Background Video デモ 実装 デモ デモはvideo要素に対応したモダンブラウザでご覧ください、IEは9+で、IE8だと動画が画像に変更して表示されます。 デモページ コンテンツを配置した右のパネルは、動画が透けて... 続きを読む

[JS]これ、いい！サイトのデザインを損なわずにフォームの進捗を美しく表示するスクリプト -Fort.js | コリス

2014/06/02 117 users コリス default スクリプト 進捗 jQuery不要

ユーザーがフォームに入力する際、その進捗をアニメーションで美しく表示するjQuery不要の単体で動作するスクリプトを紹介します。 進捗のデザインは邪魔にならないので、ほとんどのサイトで利用できると思います。 Fort.js -GitHub Fort.jsのデモ Fort.jsの使い方 Fort.jsのデモ デモでは、4種類のエフェクトが用意されています。 デモページ：Default フォームに一つ... 続きを読む

スクリプト無し、動画をページの背景いっぱいに表示する方法 | コリス

2014/05/29 141 users コリス jQuery ウェブページ スクリプト video要素

jQueryなどスクリプトは一切使わずに、HTML5+CSSで動画をウェブページの背景いっぱいに表示する方法を紹介します。 Basic Fullscreen Video Background レスポンシブにも対応しており、下記のフルサイズのデモページでお試しください。 フルサイズのデモ IE8などHTML5のvideo要素に対応していないブラウザでは、代替の背景画像が表示されます。 実装は、非常に... 続きを読む

[JS]なにこれ楽しい！インタラクション満載の路線図を実装するスクリプト -transitive.js | コリス

2014/05/23 248 users コリス GitHub canvas スクリプト 路線図

路線図の入り組んでいるところって、分かりにくいですよね。 そんな問題を解決するCanvasで実装するインタラクション満載の路線図のスクリプトを紹介します。 ↓くっついてて分かりにくい箇所も、こんな感じに移動できます。 transitive.js -GitHub 実際の動作は、下記ページで確認できます。 デモページ 上のアニメーションgifみたいに移動させることだけでなく、ホイール操作での拡大縮小や... 続きを読む

Apollo - 穏やかに日記を書きたい人のためのTumblrテーマ

2014/03/05 143 users Apollo Tumblrテーマ 殆ど 日記 デザイン

Introducing Apollo. Apolloは、穏やかに日記を書きたい人のための 無料Tumblrテーマ（テンプレート）です。 日記を書くのにふさわしいTumblrテーマとしてApolloを設計しました。 本文以外に余計な情報が殆ど何もない、限りなくシンプルなデザインです。 あなたも普通の日記を普通に書いてみませんか。 デモページを見る Functions Apolloは、「ただ使い始める... 続きを読む

Tokusetsu 2 - 同人音楽CD特設サイトが一瞬で作れるTumblrテンプレート

2013/11/18 130 users HTML 同人音楽CD 最速 特設サイト テーマ

同人音楽CD特設サイトを一瞬で作ろう Tokusetsu 2は、同人音楽CDの特設サイトが簡単に作れる無料Tumblrテンプレート（テーマ）です。 HTMLの知識を必要とせず、フォームに情報を入力していくだけで特設サイトが作れます。 デモページを見る 一瞬で完成 Tokusetsu 2 は、最速で特設サイトを作る方法です。あなたは画像を2種類用意するだけ。あとはフォームに必要な情報を入力していけば... 続きを読む

固定ヘッダーを簡単に実装可能なJavaScript！On Scroll Header Effects | 株式会社LIG

2013/10/10 148 users 実装 株式会社LIG JavaScript jQuery デモ

こんにちは、デザイナーのモモコです。 新オフィスに引っ越してから、いろいろな人のお手製ご飯が食べられて嬉しい今日この頃です。 今回はセクションごとにスタイリッシュな切り替えが出来る固定ヘッダーを簡単に設置できるJavaScript。「On Scroll Header Effects」をご紹介します。 DEMO まずは、デモを御覧ください。 デモページはこちら 実装手順 使用するのはJqueryとw... 続きを読む