タグ Demo
人気順 5 users 10 users 100 users 500 users 1000 usersThree.jsで新宿駅構内図を3Dで可視化してみる - Qiita
2023/12/25
217 users
Qiita
SvelteKit
three.js
操作
コチラ
これは MIERUNE AdventCalendar 2023 24日目の記事です! 昨日は@northprintさんによるSvelteKitでURLクエリパラメーターの操作をするでした。 はじめに この記事では新宿駅の屋内地図データを使用して、Three.jsで3Dによる可視化をします。 DEMOはコチラ 使用するデータ 今回は、G空間情報センターで公開されている「新... 続きを読む
メルカリ生成AI/LLM専任チームの取り組み@MS Build Japan2023
2023/07/10
65 users
LLM
mercari
Software Engineer
メルカリ生成AI/LLM専任チームの取り組み@MS Build Japan 2023でお話しした内容。（DEMOは動きません） どなたかの参考になれば。 採用募集してます！ - Software Engineer(Full Stack) LLM/AI - Mercari: https://apply.workable.com/mercari/j/76EB5EB641/ - Senior Product Manager, LLM/GenAI - Mercari: https://ap... 続きを読む
Reactでパターンシーケンサを作った話 - Speee DEVELOPER BLOG
2017/10/26
96 users
React
SpeeeKaigi
Speeeエンジニア
参照
2017 - 10 - 26 Reactでパターンシーケンサを作った話 SpeeeKaigi React フロントエンド技術 Tweet こんにちは、Speeeエンジニアの二社谷( nishaya )です。 先日開催されたSpeeeKaigi(詳細は以下の記事を参照)にて、Reactで使ったパターンシーケンサの発表を行いました。 tech.speee.jp 今回作ったもの DEMO ソースコード ... 続きを読む
わずか4KBで書かれたコードが織りなす驚愕のデモ・ムービー「Final Stage by 0x4015(Revision 2017)」 - GIGAZINE
2017/04/22
121 users
GIGAZINE
YouTube
境地
てき
驚愕
音楽を伴った美しいCGアニメーションをリアルタイムに表示させるプログラムの「Demo(デモ)」は、小さなサイズでどれだけ美しい絵を描けるかの腕が競われる技術であり芸術です。わずか4KBで書かれたプログラム「 Final Stage by 0x4015(Revision 2017) 」のムービーがYouTubeで公開されており、4KBイントロが到達した境地を見せつける圧巻のデキとなっています。 fi... 続きを読む
Amazon ECS と Amazon ECR 超概要＋時間があったら Demo // Speaker Deck
2016/04/23
138 users
Speaker Deck
Amazon ECR
All slide content and descriptions are owned by their creators. 続きを読む
着実に進化している！無料で利用できるWordPressのテーマのまとめ | コリス
2015/06/24
265 users
コリス
ブッダ
ヘッダ
フォトグラファー
ポートフォリオ
ブログやポートフォリオ、フォトグラファーのギャラリー、プロダクトやアプリのランディングページなど、最近のデザインのトレンドをうまく取り入れたWordPressのテーマファイルを紹介します。 テーマは全部無料で利用でき、カスタマイズ性にも優れたものばかりです。 Themify Flow (demo) 個人・商用利用、無料。 モジュール式のレイアウトで、ヘッダ・フッタ・サイドバー・コンテンツなどをドラ... 続きを読む
Backbone.jsとの比較したReact.js - Qiita
2015/06/07
54 users
Qiita
Takes
React.js
API
サーバ
はじめに 普段はBackbone.jsでアプリを作成しているのですが、React.jsの 評判が高まってきているので、簡易BlogをBackbone.jsとReact.js の両方で実装して、比較してみました。 Demoではjs以外は同じサーバのAPIを使っているのでどちらにも反映されます。 Backbone.jsをつかったバージョン Source https://github.com/takes... 続きを読む
gizak/termui · GitHub
Go terminal dashboard. Inspired by blessed-contrib, but purely in Go. Cross-platform, easy to compile, and fully-customizable. Demo: Installation go get github.com/gizak/termui Usage Each component's ... 続きを読む
【レスポンシブコーディング】要素の横幅と高さの比率を保つ | 集の一期一会
2015/01/04
209 users
レスポンシブコーディング
横幅
一期一会
比率
要素
レスポンシブコーディングについて、前々から技術的なブログを書こうと思ってはいたのですが、なかなか更新する時間がなくできていませんでした。で、今回が初記事。 まず、デモから。 DEMO なんのデモなのかわからないと思うので、説明をします。 まず、緑のエリアは、丸っと画像です。 あ、ブレイクポイントは640pxです。 画面サイズを640px以下にして見てください。 で、 緑のエリアは、丸っと画像なので... 続きを読む
わずか1024バイトでマインクラフトの世界を再現した猛者が登場 - GIGAZINE
2014/11/26
70 users
GIGAZINE
猛者
マインクラフト
デモ
JS1K
JavaScriptを使い1024バイト以下でプログラム・ゲーム・デモの作成にチャレンジするJavaScript専門の「JS1k」という大会に、マインクラフトの世界を1024バイトで再現した猛者が登場しました。またマインクラフトの他にも多数の作品が入賞しています。 JS1k 2014 demo | Minecraft http://js1k.com/2014-dragons/demo/1854 J... 続きを読む
[JS]ページの背景に、美しい幾何学状のアニメーションを簡単に実装できる超軽量スクリプト -particles.js | コリス
2014/11/14
121 users
コリス
canvas
Step
Body
アニメーション
最近見かけるようになった背景にCanvasで描いた粒子でできたような幾何学状のアニメーションを簡単に実装できる超軽量スクリプトを紹介します。 ↓は静止キャプチャですが、優美なアニメーションで動きます。 Demo: Elegant particles.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script s... 続きを読む
複数RSSをjQueryでアグリゲートして1ページに表示できるjQueryプラグイン「jQuery Feeds」:phpspot開発日誌
2014/01/31
104 users
jQuery
クロスドメイン
jQueryプラグイン
時系列
複数RSSをjQueryでアグリゲートして1ページに表示できるjQueryプラグイン「jQuery Feeds」 2014年01月31日- Demo ? jQuery Feeds 複数RSSをjQueryでアグリゲートして1ページに表示できるjQueryプラグイン「jQuery Feeds」 クロスドメインのRSSもサポートしていて、サーバサイドスクリプトは一切不要。 複数のRSSを時系列にサクッ... 続きを読む
横に水平線のあるテキスト · terkel.jp
2014/01/08
141 users
terkel
span
CSS
見出し
水平線
おもに見出しなどで見かける、テキストの左右 (またはそのどちらか) に水平線を配置したスタイル。これを CSS で実現する方法について考えてみました。 Demo: 横に水平線のあるテキスト 重ねて隠すパターン まず最初は、1 本の水平線を幅いっぱいに配置した上で、テキストに重なる部分を隠す、という方法です。 <h2><span>Latest Posts</span></h2> マークアップはこのよ... 続きを読む
無料でしかも高品質！1ページで構成されたサイトを作るためのWordPressのテーマファイルのまとめ | コリス
2013/10/21
478 users
コリス
scrollorama
エフェクト
ポートフォリオ
キャンペーン、ギャラリー、ポートフォリオ、アプリ紹介、ランディングページ、個人ブログなど、1ページで構成されたウェブサイトを作成するWordPressのテーマファイルを紹介します。 全て無料で、レスポンシブ対応です。 Minimable Bootstrapをベースにしたテーマファイルで、Scrolloramaを使ったスクロールのエフェクトを楽しむことができます。 Demo -Minimable P... 続きを読む
[JS]Pinterestやウォールなどの最近よく見かけるカードを使ったレイアウトを作成するスクリプト -Freewall | コリス
2013/10/14
85 users
Pinterest
Freewall
コリス
script
Demo :Piterest Layout Pinterest風に高さの異なるカードをダイナミックにレイアウト。 Freewallの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="jquery-1.7.min.js"></script> ... 続きを読む
IOSYS - 艦娘言えるかな？DEMO
2013/10/12
69 users
IOSYS
Arrangement
ディ
鎮守府
music
IOSYSの艦これアレンジ＆イメージCD第一弾だよ、遅いよね？ 「鎮守府に着任したけど質問ある？」 http://www.iosysos.com/cd/kancolle/ 2013.10.27(日) M3-2013秋にて頒布開始!! 第一展示場 S 23a, 23b フルボーカル全6曲 イベント価格 1,000円 艦娘言えるかな？ Lyrics , Music & Arrangement : テイ... 続きを読む
固定ヘッダーを簡単に実装可能なJavaScript！On Scroll Header Effects | 株式会社LIG
2013/10/10
148 users
実装
株式会社LIG
JavaScript
jQuery
デモ
こんにちは、デザイナーのモモコです。 新オフィスに引っ越してから、いろいろな人のお手製ご飯が食べられて嬉しい今日この頃です。 今回はセクションごとにスタイリッシュな切り替えが出来る固定ヘッダーを簡単に設置できるJavaScript。「On Scroll Header Effects」をご紹介します。 DEMO まずは、デモを御覧ください。 デモページはこちら 実装手順 使用するのはJqueryとw... 続きを読む
HTML5でパーティクル表現！ CreateJS用のパーティクルエンジンParticleEmitterJS | ClockMaker Blog
2013/04/08
115 users
パーティクル表現
ClockMaker Blog
HTML
HTML5でパーティクル表現！ CreateJS用のパーティクルエンジンParticleEmitterJS にゃあプロジェクトさんに教えてもらったのですが、HTML5用のパーティクルエンジン「ParticleEmitterJS」が面白そうだったので試してみました。次のような表現がHTML5で簡単に作ることができます。 Demo (Require the browser supported HTML... 続きを読む
404 Blog Not Found:ブラウザー上でJPEG圧縮して非可逆性を体感してみる
2012/09/09
63 users
JPEG
Qua
ブラウザー上
Quality
GIMP
「GIMPでJPEGの蚊を退治して"PNG"化する」「javascript - で bilateral filter (選択的ガウスぼかし)を実装してみた」の反響で、「JPEGのqualityを100に設定すればいいんじゃね?」という誤解がかなり見受けられたので。 実際に体験していただければいいかと。 Demo: File APIを実装しているブラウザーで動きます。ファイルを読み込ませたら、Qua... 続きを読む
様々にCSSでデザインされたソーシャルボタンセット:phpspot開発日誌
2012/03/09
53 users
CSS
phpspot開発日誌
ドロップシャドウ
円形
文字列
Demo: CSS Social Buttons 様々にCSSでデザインされたソーシャルボタンセット。 CSSでボタン作ればこんなにも便利だというのが分かるサンプル集になってます。 ボーダーやドロップシャドウ等は自由にデザインできるわけなので本当にちょっとした文字列の変更で多彩なデザインが出来る上に軽くて本当に便利ですね。 １０年前の人が見たら画像にしか見えなかったはずですね。 関連エントリ 円形... 続きを読む
Easy CSRF Key - PHPでお手軽にCSRF対策するやつ
2012/02/15
52 users
CSRF対策
Hidden
submit
require
手前
PHPで、おてがる簡単にCSRF対策するやつ。 デモ Easy CSRF - Demo (つかいかた) 1. 適当にrequireする。 require 'easy_csrf.php'; 2. 適当にsession_start()しておく。 session_start(); 3. (HTML) submitの手前に次の一文をいれる <input type="hidden" name="<?= ... 続きを読む
HTML5でテキストのシャッフル演出ができるJSライブラリ「ShuffleText.js」 | ClockMaker Blog
2012/02/07
122 users
JSライブラリ
テキスト
ClockMaker Blog
Flashでよく見かけるテキストシュッフル演出(文字列がランダムで切り替わる演出、正しい呼び名はわかりませんｗ)をHTML5で作ってみました。HTMLのタグ(pタグとか)に使うバージョンとHTML5の新要素Canvasを使うバージョンの二種類です。 demo (HTMLエレメント版) demo (Canvas版) Canvas版のほうはHTML5対応ブラウザ(ChromeやSafari)でなければ... 続きを読む
画像を使わずに見出しを水平線で挟むCSS小技 - かちびと. net
2011/11/05
195 users
見出し
水平線
net
クロスブラウザ
画像
ちょっと素敵だったので備忘録。CSS で見出しを水平線で囲むテクニック です。本とかでよくある表現方法です が、これを画像を使わず実装しよう、 というもの。クロスブラウザで動作 しますので汎用性もありますね。 これはいいですな・・・IE6でも7でも実装出来て、背景カラーや画像にも依存しません。 demo こんな感じ。よく見かけますが、これをCSSのみで実装するTipsです。 CSS h1 { bo... 続きを読む
古いブラウザも考慮した角丸実装jQueryプラグイン「DivCorners」:phpspot開発日誌
2011/08/02
52 users
border-radius
div
連番
古いブラウザ
必見
Demo | jQuery DivCorners | Product of roydukkey 古いブラウザも考慮した角丸実装jQueryプラグイン「DivCorners」 border-radiusで角丸は実装できるようになりましたが、古い非対応ブラウザだとうまく表示されないということで、やっぱりdivでやろうという方は必見のプラグイン。 連番の画像を用意しておくだけであとは簡単に初期化できます... 続きを読む
[CSS]overflowを使ってfloatの問題を解決するスタイルシートのテクニック | コリス
2011/03/10
712 users
overflow
コリス
float
フロート
ラッパー
下記は各ポイントを意訳してものです。はじめにDemo 1: overflow:auto;Demo 2: overflow:hidden;overflowを使って生じる問題点と解決方法はじめにフロートベースのレイアウトをする際、ラッパーとなるコンテナがフロートしている子要素に対して高さを拡張しないことは、普通によくある問題です。デモ：１ フロートをクリアする要素を配置して解消した例しかし、この問題を... 続きを読む