GPT-4を使って ぷよぷよ 作ってみたときの感想
以下のツイートに反響があったので、どういう感じで作っていったかと感想をメモ 要約 この記事ではAIのChatGPT（GPT-4）を使用して、JavaScriptでぷよぷよを作成する手法について紹介しています。最初の依頼は「JavaScriptで動くぷよぷよのコードを書いて」とされており、最初に生成されたコードは不完全であったとのことです。 その後、AI側からは、1.ぷよの衝突検出、2.プレイヤーの入力によるぷよの操作、3.ぷよの回転の順に実装するように指示があり、徐々に改善を施していきました。 短時間で開発を終えることができるため、エンジニアとしてのスキルや要求、不具合の言語化能力があれば有効だとされています。現時点では優秀なプログラミングのアシスタントとして機能しています。 エンジニアが直面するストレスや不安を軽減できる可能性があります。一例として、短期間で開発を終えることができるため、
Chromeの拡張機能を自作する - 虎の穴ラボ技術ブログ
こんにちは。虎の穴ラボのH.Hです。 突然ですが、皆さんは普段使っているブラウザは何でしょうか？ 私は普段からChromeを使っており、このブログもChromeを使って書いています。 先日ある拡張機能をChromeに入れるにため機能の説明を読んでいました。 説明の中にGithubのURLが記載され拡張機能のソースコードが公開されており、JavaScriptなどの知識があれば作成可能とわかりました。 またGoogleから簡単な拡張機能を作成するチュートリアルも公開されていました。 そこで、チュートリアルで公開されている拡張機能の実際に作ってみることにしました。 今回は拡張機能の作成した時の手順とデバッグの方法を説明していきます。 Chromeの拡張機能とは Chrome機能はChromeウェブストアなどからChromeに追加することで、標準には無い機能の追加を行うものです。 chrome.g
JavaScriptでCSSを操作する方法 | スターフィールド株式会社
のように記述すれば操作ができます。 ただ、案件によってはjQueryのが利用できなかったり、 対象の要素がSVGなどでブラウザによって認識されないなど、 jQueryを使わずにJavaScriptでCSSを操作する必要があります。 そこで、JavaScriptでのCSSの操作方法をまとめてみました。 var target = document.getElementById("example"); //対象要素をIDで指定 var target2 = document.getElementsByTagName("div"); //対象要素をタグで指定 var target3 = document.getElementsByClassName("example"); //対象要素をクラスで指定(IE9以上) target.style.color = "red"; //colorを設定 targ
Smart Table Scroll - 100万行のテーブルも高速表示
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 業務システムでは大量のデータを一覧表示して欲しいというニーズがよく出ます。しかしあまり大量のデータを描画すると、それだけレンダリングに時間がかかったり、スクロールも困難になります。 そこで使ってみたいのがSmart Table Scrollです。なんと100万行以上のレコードも高速に描画できるJavaScriptライブラリです。 Smart Table Scrollの使い方 Smart Table Scrollのデモです。3カラムでの表示例となっています。 一番下は100万です（インデックスは0からはじまっています）。 実際のデモです。スムーズに動いているのが分かるかと思います。 Smart Table Scrollの種としては、描画しているデータ量にあります。 var table
ReactをjQueryの数行に要約する | POSTD
「Reactが素晴らしい理由は、UIをアプリケーションの状態の純粋関数にできるからだ」いうような話を聞いたことがあるでしょう。しかしそれだけではなく、不変性と仮装DOMを利用して動作するということも聞きますよね。その上、保存、読み込み、取り消し、それにタイムトラベル・デバッグと呼ばれるすごい機能まで自由に手に入れられる。でも知っていますか？ Reactの核となるアイデアを利用し、その恩恵に預かるのにこれらのことは必要ありません。jQueryの数行にしてお見せします。 <span id="colored-counter">0</span> <input id="color"></input> <button id="inc"></button> <script> $('#color').on('keyup', function () { $('#colored-counter').css('
[CSS]重なった複数のパネルを扇状にアニメーションで優雅に開くスタイルシートのテクニック
レッド・イエロー・ブルーの三枚のパネルが重なっており、それをホバーするとそのパネルを扇状に開くスタイルシートのデモを紹介します。 アクションの度に、ぷるっと反動するのが細かい！ Calendar and Clock 実装はけっこう複雑ですが、このインタラクションはかっこいいですね。 日付や時刻の取得、不透明度の変更にJavaScriptを使用していますが、ホバーのアニメーションはスタイルシートで実装されています。 HTML 3つのパネルはdiv要素で、1枚目はノーマル時のカレンダーとホバー時の年と分と日、2枚目はホバー時の時と曜日、3枚目はホバー時の秒と月が要素として配置されています。 <div class="signboard outer"> <div class="signboard front inner anim04c"> <li class="year anim04c"> <sp
JavaScriptでアニメーションを書く初歩の初歩
JavaScriptを使ってアニメーションを書くときに有用なテクニックの、基本中の基本をご紹介します。おそらく、このブログを見ている人のほとんどにとっては釈迦に説法だと思います。今回、requestAnimationFrameの話すらしません。その点、ご留意ください。 まず、JavaScriptでアニメーションをする場合に気をつけないといけないのが、一度JavaScriptの実行（Context）を抜けないとブラウザに描画が反映されないということです。簡単に言うと、 <html><head><title>bad sample</title><script> onload = function() { var e = document.getElementById("e"); for(var i = 0; i <= 100; i += 5) { e.style.left = e.style.
個人的に使ってるtableの日本地図をjQueryで叩く
CSSはこちら。特に変わったことはしていません。CSS3はtext-shadowとtransitionです。これは必須という訳ではないですね。 #map1 a{ font-size: 14px; color: #666; text-decoration: none; text-shadow: rgba(255,255,255,0.6) -1px 1px 0; } #map1 td{ padding: 6px 3px; text-align: center; } #map1 td.frame{ padding: 0; width: 20px; height: 10px; } #map1 td.land{ background-color: #eef2bf; } #map1 td.sea{ background-color: #f0f9ff; } #map1 td.selected{ back
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
