はじめに この記事の内容はhtmx v1の記事です。 最新のhtmx v2に関する解説は以下の本にまとめましたので、そちらを参考にしてください！！ HTMXとは https://htmx.org/ HTMXは、JavaScript を記述せずに、Ajax通信や高度なUXを実現できるライブラリ。 軽量 で 高速 で、既存のサーバーサイドのフレームワークとシームレスなやり取りができる。また、AJAX通信の発火、フォームの送信処理、DOMの更新などを既存のHTML要素を拡張するだけで可能とする。WebSocketやSSEにも対応しているので、チャットアプリなどにも適している。 2023 JavaScript Rising Starsでは、 フロントエンド・フレームワーク部門で見事2位に輝いた！(一位はReact、全部門だとshadcn/ui) 似たような機能として、Ruby on RailsのH
はじめに 最近耳にする Vue.js（ビュージェイエス） ってどんなもの？ jQuery とどう書き方違うの？とか、jQuery でやってたこういう事って Vue.js だとどうやるの？jQuery しか使ってないけど Vue.js も使ってみたいなぁ～と思っている人向けの小難しいことは省いた記事です。私もそちら側から来たものです。 Vue.js 日本公式ページ（日本語翻訳率が半端ないと評判） もともと「jQuery から Vue.js への移行」というタイトルでしたが、それだと jQuery を完全にやめる、的なニュアンスになってしまうので、少し変更しました🐹 jQuery と Vue.js の違い jQuery は、セレクタ操作に特化したライブラリで HTML の一部をちょっとだけ弄るには手軽に扱えます。更新のたびにセレクタから要素を探して操作をするため、複数の UI を連携させるよ
PathみたいなナビゲーションをWebページに実装するライブラリです。同じようなのは他にもあると思いますけど、これの特徴は対象に当たっている他のライブラリと干渉しにくいということでしょうか。iScrollみたいなイベントキャンセルが強力なやつはだめだと思います。 サンプルがまさにそれなんですけど、同僚の@が作った flipsnap.jsとは共存できます。レイヤー毎にスワイプ判定をしてるので、上位レイヤーで一度キャンセルすると Swpnav が実行されてる下位レイヤーにはイベントが飛ばなくなるような感じで、この Swpnav とか flipsnap のような作り方をしているライブラリとは共存できると思います。 サンプル（Webkitのみ ホスト githubにあります 5509/Swpnav – GitHub 使い方 ソースコードをダウンロードして、任意の場所に swpnav.js を置き、
はじめまして。新入りのnagataです。 入社式で自転車乗ってた野郎です。 先輩方から「ブログ、書いてね！」とのお達しがあったので、 日報で書いたらウケがよさげだったcanvasのことについて書いてみようと思います。 ※各種サンプルはMac上のSafari4.05、Firefox3.6.3、Chrome5.0で動作を確認しています。 canvasってなんぞ？ 図を書き込めるhtml要素です。 OpenGLやDirectXのような面倒な設定を書くことなく、 手軽にグラフィック描画が行えます。 ブラウザだけでローカルアプリケーションのような グラフィカル（かつ動的な）表現が行えるわけです。 とりあえずつかってみる 早速何か描いてみましょう。 こういうことは実践あるのみです。 処理にはJavascriptを使います。 canvasに描画を行うときは、canvas要素からcontextを取得して、
これはすごい。Web ブラウザのアドレスバーに以下を入力し Enter すると、 今表示されている内容を直接編集できる。Firefox 3.0.14 と IE8 で出来 ることを確認した。 javascript:document.body.contentEditable='true'; document.designMode='on'; void 0 WEBブラウザーに表示されている画面を直接編集する方法 - sanonosa システム管理コラム集 追記(2009-10-04): 戻す方法はないものかなあ。‘false’ と ‘off’ では出来なかった。 追記(2009-10-17): 「戻す方法」というのは、「編集モードから閲覧モードに戻す方法」のこ とです。端折った書き方ですみませんでした。もう少し楽な方法が見つかっ たので、以下に追記します。 IE では、以下を入力し Enter
maxImage demo 上記のデモでは、右側の画像がブラウザのサイズに合わせて、はみでないようにリサイズされて表示されます。 デモは他にも多数あり、下記は背景画像をブラウザのサイズに合わせて最適化します。
こんにちは！ みなさんガジェットつくってますか！ なんだか最近、色々な種類があるみたいですね！ Yahooナントカとか、Googleガジェットとか、Adobe AIRとか、シルバーナントカとか、あとWindowsサイドバーだとか…。 こういうガジェット的な、ちょっとしたデスクトップ用のツールって、 どうやってつくるのかなーなんて思って、ちょっと調べてみました！ そしたら意外と簡単だった…！ これならぼくにも作れそう！！ ってことで、ちょっとメモしておきますね！ どれにしようかな…！ つくるのが簡単なこと WinでもMacでも動いてほしい 使う人がインストールしやすそうなのがいい こんな感じで考えていくと… 最終的に、Googleガジェット か AIRなのかなー、ってことになりました！ でも実際ぼくはGoogleガジェットなんて使ったことないし…！ (なんとなくGoogleデスクトップとかも
ニコニコ動画を崩壊させるスイッチを作ったが・・・ 動画中央にある文字は 絶 対 に 押さないでくれ。約束だぞ！ ...
leigeberのエントリーから、スムーズにスクロールするサムネイルから拡大画像を表示する画像ギャラリーのスクリプトを紹介します。 Dynamic Image Gallery and Slideshow デモ slide.jsはjQueryやPrototypeなど他のスクリプトに依存することなく単独で動作するスクリプトで、動作環境はIE6/IE7, FF, Opera and Safariとなっています。 サムネイルはリスト要素となっており、オプションでは「拡大画像の格納場所の指定」「拡大画像の拡張子の設定」「スピード」などを設定することができます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
