JavaScript のビット演算子に unsigned を期待してはいけない : document
2月4 JavaScript のビット演算子に unsigned を期待してはいけない はじめに ビット演算を利用するケースでは unsigned を期待することが多いと思うのですが JavaScript ではその期待は捨てたほうが良いです。(ただし >>> 演算子を除く) ここではその具体例と対策、簡単な説明をしていきたいと思います。 具体例 ではさっそく、例として 0x12345678 ^ 0xFFFFFFFF を見てみましょう。 (なぜ 32-bit かというと JavaScript のビット演算は 32-bit で行われるからです。) 0x12345678 は 2 進数表記にすると 0001 0010 0011 0100 0101 0110 0111 1000 になります。 これを XOR 0xFFFFFFFF で反転させるのですから、 下記のように計算して期待する値は 0xEDC
JavaScript における文字コードと「文字数」の数え方 | blog.jxck.io
Intro textarea などに入力された文字数を、 JS で数えたい場合がある。 ここで .length を数えるだけではダメな理由は、文字コードや JS の内部表現の話を理解する必要がある。 多言語や絵文字対応なども踏まえた上で、どう処理するべきなのか。 それ自体は枯れた話題ではあるが、近年 ECMAScript に追加された機能などを交えて解説する。 なお、文字コードの仕組みを詳解すること自体が目的では無いため、 BOM, UCS-2, Endian, 歴史的経緯など、この手の話題につき物な話の一部は省くこととする。 1 文字とは何か Unicode は全ての文字に ID を振ることを目的としている。 例えば 😭 (loudly crying face) なら 0x1F62D だ。 1 つの文字に 1 つの ID が割り当てられているのだから、文字の数を数える場合は、この ID
JavaScriptでクリップボードの貼り付けに対応する[HTML5のClipboard API/contenteditable]
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script> // キャンバス var src_canvas; var src_ctx; // イメージ var image; // ブラウザ判定 var clipboard_flg; if((!window.navigator.msSaveBlob) && (window.navigator.userAgent.toUpperCase().indexOf('CHROME') != -1)){ // chrome clipboard_flg = true; }else if((window.navigator.msSaveBlob) && (window.navigator.userAgent.toUpperCase().indexOf('CHROME') != -1)){ //
![JavaScriptでクリップボードの貼り付けに対応する[HTML5のClipboard API/contenteditable]](https://cdn-ak-scissors.b.st-hatena.com/image/square/4af1465cf1036f95b1b69f4c0702e72611933727/height=288;version=1;width=512/https%3A%2F%2Fwww.petitmonte.com%2Fimages%2Fog_image.jpg)
Dateオブジェクトの挙動の違い - ペイパー・プログラマーズ・ブログ
JavaScriptのDateオブジェクトについて各ブラウザごとの挙動を調べてみました。 ちなみにすべてMac OS X v10.6.4におけるアプリケーションです。 以下のスクリプトを各ブラウザのJavaScriptコンソールで流してみます。 var dobs = [ "1975-10-27T00:00:00Z", "1975-10-27T00:00:00+09:00", "1975-10-27T00:00:00", "1975-10-27 00:00:00", "1975/10/27T00:00:00Z", "1975/10/27T00:00:00+09:00", "1975/10/27T00:00:00", "1975/10/27 00:00:00" ]; for (var idx in dobs) { if (typeof dobs[idx] === 'string') { var
Leaflet recipe: Hover events on features and polygons
Leaflet is an exciting tool for making interactive maps. It's free. It's simple. It's easy to write. It isn't tied to any one set of background tiles. It works in all the major browsers. It's under active development. It even has good documentation. But one thing it doesn't show you how to create is hover effects. Say you've got some shapes or points on your map and you want something to happen wh
[JS]ほんの数行で便利な機能を実装するjQueryのスニペットのまとめ -jQuery Tips
jQueryには高性能なプラグインがたくさんリリースされていますが、ほんの数行のコードだけでも便利な機能を簡単に実装することもできます。 Webサイトで最近よく利用されている便利な機能を実装するスニペットを紹介します。 jQuery Tips Everyone Should Know -GitHub イラスト: Girls Design Materials コードはMITライセンスで、個人でも商用でも無料で利用できます。 ページの上に戻るボタン 画像のプリロード 画像がロードされているかチェック リンク切れの画像を自動修復 ホバーのトグル 入力欄を使用できなくする aタグのクリックイベントだけを利用する アニメーションを簡単に設定する シンプルなアコーディオン 異なる高さのdiv要素を揃える 外部リンクを新しいタブ・ウインドウで開く テキストが無い要素は非表示にする ページの上に戻るボタン
![[JS]ほんの数行で便利な機能を実装するjQueryのスニペットのまとめ -jQuery Tips](https://cdn-ak-scissors.b.st-hatena.com/image/square/2305f06c940fb5e398486ead4dbf84a83e3fa8a8/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015102301.png)
Node.js＋Socket.IOで作る、通信対戦ができるHTML5ゲームシステムの作り方
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめまして、Yahoo!きっず開発担当です。 昨年Yahoo!きっずにてブラウザオンラインゲーム「おしゃべりリバーシ」をリリースしました。 ※おしゃべりリバーシは2015年10月をもってサービス終了しました。ご利用いただきまして、ありがとうございました。 このゲームは、通信対戦部分の通信プロトコルWebSocketを採用し、サーバミドルウェアにNode.js＋Socket.IOを採用しました。この結果、ブラウザゲームでありながらマルチデバイスでの対戦を実現しました。 今回は、Node.js＋Socket.IOによるWebSocketサーバのシステム構築方法について考慮すべきポイントを、「おしゃべりリバーシ」の実例を紹介しながら説
JavaScriptベースのOAuth認証ライブラリ「hello.js」:phpspot開発日誌
hello.js - Javascript API for OAuth2 authentication and REST services JavaScriptベースのOAuth認証ライブラリ「hello.js」。 JSベースでログイン、ログアウトが可能で、ユーザ情報なんかも簡単に引っ張ってこれるようです。 関連エントリ PHPでOAuthサーバを作成するチュートリアル Twitter OAuth認証をポップアップで行うjQueryプラグイン PHPフレームワークにTwitter,Facebook等の認証を速攻実装できる「Opauth」 MicrosoftのLive OAuthで認証するPHPサンプル
javascript: escape(), encodeURI(), encodeURIComponent() 比較 (groundwalker.com)
« DoBeDo 2.5 | メイン | javascript で Query String » javascript: escape(), encodeURI(), encodeURIComponent() 比較 javascript の escape(), encodeURI(), encodeURIComponent() 関数群について、どの文字がエンコードされてどの文字がエンコードされないのか分かりにくいのでまとめておく。 まずは、対象範囲 %20（半角スペース）〜%7E（チルダ~） 元データ !"#$%&'()*+,-./ 0123456789 :;<=>?@ ABCDEFGHIJKLMNOPQRSTUVWXYZ [\]^_` abcdefghijklmnopqrstuvwxyz {|}~ escape() %20%21%22%23%24%25%26%27%28%29*+%2C-
jQueryプラグインのDynatreeを使ってツリー表示 | 株式会社エイチ・オー・エス
受託開発担当のRyuです。 今回はjQueryプラグインの一つであるDynatreeの使い方を紹介します。 DynatreeはjQueryでブラウザに簡単にツリーを表示させることができるプラグインです。 jQueryプラグインの中には多くのツリー表示プラグインがありますが、ドキュメントやサンプル、機能の豊富さで今回はDynatreeを選びました。 Dynatreeを動作させるにはjQuery、jQuery-uiを別に読み込む必要があります。 <html><head> <meta charset="utf-8"> <link href="css/skin-vista/ui.dynatree.css" rel="stylesheet" type="text/css" id="skinSheet"> <style type="text/css"> <!--body {width: 400px;}
軽量のスワイプ可能なスマホ用スライダーJS「SwipeJS」:phpspot開発日誌
Swipe JS - a lightweight mobile web slider 軽量のスワイプ可能なスマホ用スライダーJS「SwipeJS」 <div><ul> でリストを定義して<div>をJSで初期化するだけでスワイプでページ送りができるスライダーが簡単実装できます jQueryに依存していないため、軽量。カスタマイズ項目も必要最低限となっているようです 関連エントリ PCでもスマホでもスワイプで画像を送れるギャラリー実装jQueryプラグイン「Asketic Swipe Gallery」 iPhone等でもスワイプで画像を送れるカルーセル実装jQueryプラグイン「Roto」 スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」
連載: IBM Watson Workspace #鬼わか アプリケーション開発: 第 7 回: IBM Watson Workspace で AI を利用したアプリ連携の実現 #鬼わか 解説（前編）
postMessageておもしろいスな。 - 困ったときのメモ ver.2.0
なぜにこんなことを。 クロスドメインでAjax的なことをしようとしたら、怒られまくって困った。 いろいろ調べてみたら、postMessageがスマートで面白いのでメモ。 JSONPでもできなくはなかったけど、イマイチ面倒なのと面白くなかったので。 ちなみに、これを調べたきっかけはHerokuとAmazonのS3でやり取りするため。 はじめに postMessageは、安全にクロスドメイン通信をするためのメソッドだそうで。もちろんJavaScriptでやる。 よくわかる解説： https://developer.mozilla.org/ja/DOM/window.postMessage やろうとしたこと Herokuで実装したJavaScriptのAPIと、AmazonS3においたHTML（JavaScript）とでおしゃべりしたい。 AmazonS3のHTMLは実際にはiframeの子とし
HTML＋JavaScriptだけでブラウザに図形描画 - Canvas API -
TIPS 007：キャンバスを準備する Canvas APIを利用するには、まず図形の描画先（＝キャンバス）を準備しておく必要があります。 ［リスト1］キャンバスを準備するコード（canvas.html） <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>HTML5 TIPS</title> <!--キャンバスの背景色／枠線を指定（3）--> <style> #cv { background-color: #FFF; border: 1px solid black; } </style> <script> ...中略... </script> </head> <body> <!--キャンバスの準備（1）--> <canvas id="cv" width="400" height="300"> <!--Canvas機能
スマホアプリ開発にも便利な位置情報API - Geolocation API -
TIPS 001：現在の位置情報を取得する 現在の位置情報を取得するには、navigator.geolocationオブジェクトのgetCurrentPositionメソッドを利用します。以下は、Geolocation API経由でユーザーの現在位置を取得し、経度／緯度／方角を表示する例です。 ［リスト］現在の位置情報を取得するコード（current.html） <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>HTML5 TIPS</title> <script> window.addEventListener('DOMContentLoaded', function() { // 結果の表示先（<div>要素）を取得 var latitude = document.querySelector('#latitude
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://hozunomiya.xyz/?p=83
http://kudox.jp/java-script/javascript-touch-event
HTML5ベースのWYSIWYGエディタ「Squire」:phpspot開発日誌
OpenLayers3 vs Leaflet for styling multifeature geojson
世界地図でデータをビジュアライズする際に使えるJSライブラリ「DataMaps」:phpspot開発日誌
