MANA-DOT

PIXEL ART, PROGRAMING, ETC.

JavaScript

2023年のmanatenのフロントエンド

この記事は? フロントエンドの(に限らずですが)技術はよく言われるように移り変わりが早いです。とはいえ個人で全て追い切るのは難しく、また必ずしも新しいものを使い続けていればいいわけではないとも思います。個人的には新しい技術であっても古い技術で…

JavaScriptを使ったアニメーションgifの切り出しと拡大

自分の場合ドット絵のちびキャラを複数バリエーション書くとき、以下の画像のようにバリエーションを縦に並べて書いていく事が多いです(画像はskebでリクエストを頂いたナマズさんです)。 このような形式で描き、画像をバリエーションずつに分割し更にSNSア…

レガシーなjs環境におすすめなts-checkコメントについて

このエントリの内容 このエントリは、javascriptの型チェックをすることができるtypescriptの機能 @ts-check について紹介し、個人的に感じた便利なところや使い所を紹介していきます。 このエントリの読者は以下のような人を想定しています。 レガシーな環…

husky + lint-stagedでgitのprecommit時にimageminを行い、minifyした画像のみコミットされるようにする

かなり昔に こちらの記事 でgitのpre-commitを紹介しました。今回は、pre-commitにまつわる便利なnpm package typicode/husky、 okonet/lint-staged を利用し、画像ファイルのコミット時に imagemin/imagemin を使い自動で画像ファイルのminifyを行う方法を…

Node.js8になって util.promisify が利用できるようになったのでメモ

先日Node.js8 がリリースされました (参考) 。 追加機能の中に util.promisify というものがあります。これは、すでに bluebird や es6-promisify といったパッケージで提供されていた、 コールバック関数を伴う非同期関数を、Promiseを返す関数化するユーテ…

Hubotでasync functionを使う

最近(と言っても一ヶ月前ですが・・・)node7.6.0がリリースされ、 --harmony-async-await をつけなくても async/await が利用可能となりました。 これにより、非同期処理を行うスクリプティングがより行いやすくなった(スクリプティング以上の用途ならばどうせ …

Slack上でインタラクティブに遊べるゲームを作るためのフレームワークを作った

この記事は Slack Advent Calendar 2016 24日目の記事です。

部屋の照明を操作するかっこいいWebアプリを作った

GW中に上記画像のような見た目と操作感で部屋の証明をコントロールできるWebアプリを作ったので紹介します。

RPGツクールMVで作ったゲームをコマンドラインで動かしてみる

会社のLT用のネタで、RPGツクールMV で作ったゲームをCLI上で動かすということをやりました。 ニコナレ にLTで使ったスライドをアップしてあります。

babelのasyncで遊んでみたメモ

ES7から利用可能な async/await は非同期プログラミングの際に非常に魅力的な構文です。 babelを用いることによりES5の環境でもコードを実行可能です。 babelで非同期処理がどのように変換されるのか興味があったので、いろいろ遊んでみました。

ブログのサイドバー追尾の個人的最適解。コンテントとサイドバーのスクロール速度を変えてみる

まとめブログなど、メインコンテントとサイドバーの2カラム構成で、メインコンテントが非常に長いサイトでよく見るサイドバーの動きで、スクロールしてサイドバーをすべて表示したら、その箇所からサイドバーをスクロールに追尾させるというものが有ります。…

ドット絵のパレットその他を表示するJSをGruntやbrowserifyで作りなおしてみた

結構前に作ったブラウザでドット絵のパレットその他を表示するライブラリをGrunt / CoffeeScript / browserify / compass といったモダンなツールでビルドするように作りなおしてみました。また、新しくリポジトリを切り直して公開しました。

HubotでIRCのログをとる

常駐しているbotにログの残らないIRCのログをとってもらいます。

正規表現による置換の繰り返しだけでライフゲームを作る

今更だけど最近正規表現で$1などのマッチした文字列を利用した置換をすることの強力さに気づいたので、なにか面白いことをしたかった 新年一発目だしなにか面白いことをしたかった ということで、タイトル通りにライフゲームを正規表現による置換の繰り返し…

JavaScriptで変な形のクリック領域を作るとき、svgが便利

昨日のVieraのリモコン、リモコンを作りたかったのもあるけど、svgとJavaScriptを組み合わせた簡単なプログラムを試しに書いてみたかったというのがあります。

加速度センサーでパララックス効果

以前 から、このサイトのトップ絵をパララックス効果でマウスでグリグリ動くようにしていますが、 この記事で紹介されているパララックスライブラリが、スマホの場合加速度センサで傾きを使ってアニメーションさせるというもので、面白そうだったのでやって…

ドット絵でパララックス効果

トップページ でトップ絵に採用してみましたが、ドット絵で パララックス効果 をやってみました。

JSでドット絵にTIPを表示するライブラリを作った

先日作ったJSでパレットを読み出すPixelUtil に、画像のjQueryオブジェクトを引数で渡すとTipを表示してくれるcreateTip関数を追加しました。 引き続き、Githubにて公開しています。 Firefoxで完全に動き、Chromeだと拡大時に縁がボケ、IEだとパレットがバグ…

ドット絵にマウスオーバーでパレットを表示するようにしてみた

昨日の記事の使用例として、ここのギャラリーでドット絵にマウスオーバーするとパレットを表示するようにしてみました。

JavaScriptで画像のパレット他を読み出すコードを書いた

Githubにて公開しています。 256色Png、普通のGifと簡単なアニメーションGifに対応しているつもり。IEでは動きません。 改変・使用は自由ですが、バグがあったら教えて欲しいです。

JavaScriptのthisの出現パターンは2つしか無いという話

JavaScriptのthisについて JavaScriptのthisについて – new演算子とコンストラクタ 前にJavaScript初心者向けにthisについて言及しました。当時わかりやすく書いたつもりだったけど、今読み直すとわかりづらい・・・ので、視点を変えて書きなおしてみようという…

PHPのdate関数みたいなのをJavaScriptで

とりあえずY,m,d,H,i,sだけ使いたかったので、適当に実装してみた。 もっと綺麗な方法はいくらでもあるとおもう。 Date.prototype.format = function(formatStr) { var d=this, a = { Y:d.getFullYear, m:function(){return ('0'+(d.getMonth()+1)).slice(-2…

JavaScriptでcookieの値を取得

ぐぐるとわざわざsplitしてforで回してる冗長なコードが出てきたりするので、適当に書いたコードだけど覚え書き。 keyに対する値があればその値を、なければfalseを返す関数。 var getCookieValue = function(key) { var val = document.cookie.match(new Re…

IEのdocumentオブジェクト

amachangさんのこの記事 一行で IE の JavaScript を高速化する方法 - IT戦記 http://d.hatena.ne.jp/amachang/20071010/1192012056 /*@cc_on _d=document;eval('var document=_d')@*/ この一行を読み込むことによって IE での document へのアクセスが 5 倍…

JavaScriptのthisについて – new演算子とコンストラクタ

前回の記事では、 慣れないことをしたため、文体がやや硬くなってしまい、あとから見ると読みにくく感じた。あと、こういう文章を書くときは最後にまとめを書くべきだなとも思ったので、ここで書いておこう。 箇条書きでまとめると、JavaScriptのthisとは、 …

JavaScriptのthisについて

同期の間でJavaScriptのthisが難しいって話をちょくちょく聞いたので。簡単に説明してみる。 間違っているところがあったら是非突っ込んでほしい。 ※サンプルコードにミスがあったため、修正を行った(9/5) 続きを書いた(9/20)