PixiJSを使ってHTML5+WebGLなブラウザゲームを作るサンプルその3: キャラアイコンにフェードインアウトや点滅、回転等のエフェクトを掛ける方法をメモ

PixiJSを使ってHTML5+WebGLなブラウザゲームを作るサンプルその4: クリックイベントとタップイベントの実装

PixiJSを使ってHTML5+WebGLなブラウザゲームを作るサンプルその2: ゲームシーンの切り替え処理

Node.jsでチャットボットを作る方法です。チャットボットにテキトーに機械学習 (multi-label classification) させ、ユーザからの質問にマッチした回答を出力します。サンプルコードでは、ゴミの出し方をアドバイスするチャットボットを作りました。

PixiJSを使ってHTML5+WebGLなブラウザゲームを作るサンプルその1: 基本編 アイコンをアニメーション

PCもしくはモバイル端末のブラウザ上で任意のカメラデバイスを選択し、videoタグで利用するサンプルです。ピュアなJavaScriptだけを使って実現しています。

Vue.jsで大量の配列要素を滑らかにレンダリングする方法のご紹介。

ピュアなJavaScriptだけを使って画像の遅延読み込み（レイジーロード）を実現する方法のご紹介。ユーザがブラウザのタブをスクロールした時にタブの表示領域に入ってきた画像要素だけを読み込みさせることで、Webページの全体的な表示を軽くします。

ピュアなJavaScriptで配列から要素をランダムに1件取得するワンライナーです。

HTML要素にCSSでアニメーションを適用する方法をご紹介。複雑になりがちなアニメーションをシンプルなCSSとJSだけで実現しています。汎用的に使えるJSのヘルパー関数も。

巨大データを処理する Node.js のアプリケーションをより効率的にするために必要不可欠とも言える Stream API。簡単なサンプルコードを示しながら、 Stream API の Readable, Transform の実装方法をご紹介します。

Node.jsで外部コマンドラインツールを別プロセスとしてメインプロセスから切り離して実行する方法です。

国産の全文検索エンジンGroongaのインストール方法や使い方とNode.jsから利用する方法です。

忘れやすいけどよく使うLinuxコマンドをメモしています。適時更新。

Unixシェルかつコマンド言語Bashのテクニック集です。個人的によく使いそうなものだけをピックアップしています。

入力候補を表示してくれるカスタム要素 ajax-suggest のコード本体と使い方を紹介。

外部ライブラリを使わず生JSだけでHTML内の特定の文字列をmarkタグで囲う（マーカーを引く）方法のご紹介。

Sublime Textで Eclipse の ctrl + e のように既に開いているファイル群からファイルを表示するショートカットを実現する方法です。

一般的なWebページでスクロールダウンした時に右下に出てきてクリックするとページトップへスルスルとスクロールバックするボタン（「トップへ戻る」や「Go to Top」みたいなやつ）ってよく見かけますよね。あのボタン (便宜上ここではGTTボタンと呼びます) を簡単なJSコードのコピペだけで実現できます。

node.jsのStreamを使えばメモリを節約することができるため、大量のデータを扱う場面で特に威力を発揮します。このメモではStream(Transform)を自作し、MySQLデータベースの大量のデータを効率的に扱う方法をご紹介します。

こちらで紹介している国土地理院のAPIを使えば、Google Maps APIを使わなくても会員登録不要でお手軽にジオコーディング＆逆ジオコーディングが可能です。

地図描画ライブラリleafletと国土地理院の地理院地図を連携させてGISブラウザアプリケーションを作ってみるサンプルです。地理院地図はAPIキーの登録などが不要なのでとてもお手軽で、なおかつ日本政府が管理しているので地図情報ソースとしてはとても安心感があります。

ブラウザのJavaScriptで二段階認証のワンタイムトークン(パスコード)を生成する方法です。今回ご紹介するコードは、芽萌丸ツールズの2FAトークン生成ツールでも利用されています。2FA設定時にQRコード等で提供されるシークレットさえ保管しておけば、Google認証システムアプリが無くてもパスコードを生成できます。

JavaScriptを使って画像を動的に読み込む方法です。画像の読み込み中のローディングイメージの表示などに応用できます。ピュアJS版とjQuery版の２つをご用意しました。

Node.jsでシングルトンなクラスモジュールを作る簡単な方法です。クラス自体を弄ること無くシングルトン化できる方法なのでお手軽です。

Chrome拡張機能で content script や background スクリプト内でのajaxリクエスト時にリクエストヘッダのリファラrefererを書き換える方法です。

ブラウザ上のJavaScriptでビットコイン(BTC)を送金する方法をメモします。今回ご紹介する方法は、いわゆるブラウザウォレットアプリケーションの作り方の基本になります。通常ブラウザウォレットでは、秘密鍵での署名をブラウザのローカル上だけで行います。そのため、秘密鍵がインターネット上に流れて盗聴されるリスクを低減させることができます。これはウォレットアプリとしてのセキュリティ上とても重要なことです。ただし、秘密鍵の管理を自己責任で行う必要があるため、取引所のWebウォレットのように他社にお任せできる利便

browserifyしたjsのbundleサイズが大きすぎてブラウザで読み込むには少し辛いとき、無駄な依存モジュールを削除したり、軽量なものに置き換えたりしてbundleサイズの軽量化を図ります。そのような場面で役立つのがdiscモジュールです。discモジュールはWebアプリケーションの読み込み速度改善に重宝します。今回はdiscモジュールの使い方をご紹介します。

ブラウザでQRコードを読み込んで解析したり、QRコード画像を生成したりする方法です。QRコード画像の読み込みについては画像ファイルからの読み込み方とWebカメラからの読み込み方の両方を紹介しています。

Chrome拡張機能でブラウザのクッキーを扱う方法をご紹介。コードサンプルも。