画像データにJavascriptコードを埋めるサービス作ってみた | SIBYL System
こちらはJavaScript Advent Calendar 2015の17日目の投稿として書いたものです。 画像データにJavascriptコードを埋め込む事ができる「JS in PNG」というウェブサービスを公開しました。 http://js-in-png.9×4.net/ なぜ作ったのか 今年1月に投稿された、以下の「JavascriptをPNGに圧縮する」という記事に触発されて作ったものです。 JavascriptをPNGに圧縮する http://yomotsu.net/blog/2015/03/01/js2png.html 詳細は上記のサイトを見ていただければと思いますが、画像の1画素を1文字としてJavascriptのコードを画像に埋め込んでいるものです。イメージは以下のようになります。 こちらはJquery 2.1.3 minfyを画像に圧縮したものです。おもしろいですね。と
console.log(); しか使えなかった自分へ。。。 - Qiita
この記事について Webエンジニアになって早１年半。railsのデバッグをする時にはエディターのデバッガーでスマートにできていたが、javascriptになるといつもconsole.log();ばかりを使って原始的なデバッグをしていた。。。 そんな脳筋な過去の自分に教えてやるための記事です。 console.log({変数名}); 「いきなりconsole.log();の紹介かい！！！」って思われるかもしれませんが、この技を知ったときは「なんで知らんかったんや。。。」って思うくらい便利だったので最初に紹介します。 以下のようなHTMLがある場合 <form> <input type="text" value="名無しの権兵衛" id="name"> <input type="text" value="80歳" id="age"> <input type="text" value="バスケ"
php.js - PHP VM with JavaScript
This library reads PHP code and transforms it into JavaScript code which can be run in the PHP VM in this library, resulting in same results as with PHP. It starts by tokenizing the PHP code into tokens, which it then uses to build an AST tree. Once the tree has been constructed, the script compiles it into JavaScript that can be interpreted by the VM and then executes it. Any additional unconvert
電話番号を扱う技術
libphonenumberͷίί͕ੌ͍ TelephoneNumber.valid?('8180XXXXXXXX') # => true TelephoneNumber.valid?('+81 80 XXXX XXXX') # => true TelephoneNumber.valid?('080 XXXX XXXX', 'JP') # => true require 'telephone_number' telephone_number = TelephoneNumber.parse('8180XXXXXXXX') telephone_number.e164_number # => +8180XXXXXXXX telephone_number.national_number # => 080-XXXX-XXXX telephone_number.country.country_id #
[JavaScript] 全角を2、半角を1と数えるコード | きほんのき
JavaScriptで全角を2、半角を1と数える必要があったので調べてみたら、大量に参考になるページが出てきました。結構需要があるのですね。 html5のcanvas上にテキストを描画する際、テキストの長さを取得するにはmeasureText()メソッドを使います。canvasを初めて使った時、このメソッドに気づかず、「全角を2、半角を1として数え、フォントサイズを掛けて長さを求めよう」などと考えたのですね。その時に必要になったわけですが、これで正しいwidthが分かるわけもなく。 それはそれとして、表題のコードは非常に有用で使い所も多いのでメモしておきます。コードはこちらを参考にさせていただきました。 var charcount = function (str) { len = 0; str = escape(str); for (i=0;i<str.length;i++,len++)
無料麻雀ツール＆アプリ 点数計算＆牌効率ラボ
JavaScriptでプログラミングした麻雀の小粒プログラム集を公開しています。稚拙なものばかりですが、プログラムのヒントや参考になれば幸いです。
シンプルでかつ最高のJavaScriptプロファイラ sjsp を作りました！ ― Webアプリケーションが複雑化する中でプロファイラに求められるものとは何か - プログラムモグモグ
あらすじ Web技術が複雑になる中で、JavaScriptのプロファイリングをとる方法とは。 プロファイリングを取るためのコードを手で書いてみましょう。 とてもシンプルで、かつ最高のJavaScriptプロファイラ sjsp を作りました。 本当にあった怖い話 上司 「とにかくJavaScriptのコードを速くしてくれ」 私 「分かりました、速くします」 (次の日) 私 「いいプロファイラがないなら作ればいいじゃない」 同じチームの人 「えっ？」 私 「最高のJavaScriptプロファイラ作ったよ」 同じチームの人 「「えっえっ？？？」」 私 「早速使ってみたらこことここが遅いって分かったよ」 同じチームの人 「「「この子は一体…」」」 JavaScriptのプロファイリングの難しさ 近年、Webブラウザーの処理速度は著しく向上し、その可用性の高さから、アプリケーションのプラットフォーム
超簡単に3DCGできるJavaScriptライブラリ作った - aike’s blog
ブラウザでWebGLが使えるようになって3DCGプログラミングはずいぶん身近なものになりました。と書いてるそばから違和感を感じるくらい生のWebGLをJavaScriptで書くのは敷居が高かったりします。できなくはないけど前提となる知識がかなり必要な感じ。 three.jsが登場したときは、これで普通に3DCGができるということで一気にひろまりました。とはいえ、それでもまだやることは多く、画面に四角い箱を表示する場合以下のようなプログラムを書くことになります。 ・シーンを作成 ・ライトを作成、位置と向きを設定、シーンに追加 ・カメラを作成、位置と向きを設定、シーンに追加 ・マテリアルを作成、色を指定 ・BoxGeometryを作成、サイズを指定 ・メッシュを作成、位置と向きを設定、シーンに追加 ・レンダラーを作成 ・レンダリングループ処理 これらのひとつでも間違えたりパラメーターが適切でな
全天球パノラマ動画を表示するJavaScriptライブラリ作った - aike’s blog
複数台のGoProを組み合わせて360度上も下も撮影できる動画カメラが一部で流行りつつあるようです。 こんなやつ。 http://home360.co.jp/freedom360.html http://freedom360.us/ 要はRICOH THETAの動画版なんですが、動画ということで機材の価格もだいぶ違うし、複数の動画を合成する作業もまだまだけっこう手間も時間もかかります。 そこまで頑張って動画を作っても、公開がまた大変です。フリーのスタンドアロンプレイヤーはありますが(これとか)、見る人にインストールさせるのはちょっと面倒だし、Flashで作られた全天球動画プレイヤーも良いものがいろいろあるものの、自由にダウンロードできて自分のサイトで手軽に使えるものは今はちょっとなさそうです。 そんなわけでJavaScriptのThree.jsを使ってさくっと全天球動画プレイヤーを作ってみ
switch(true) イディオム考察 - Qiita
switch(true) イディオムとは ここでは， switch(true) イディオム とは，以下のように switch 構文を用いて if, else if と意味的に等価なものを実現しようとするコードパターンを指すことにします． function hoge(x) { switch (true) { case x < 0: console.log(x + " は自然数ではありません．"); break; case x === 0: console.log("ここでは 0 は自然数です．"); break; case x > 0: console.log(x + " は正の数です．"); break; default: console.log(x + " は数ではないようです．"); } } 一部界隈（？）ではどうやら割と認識されているらしく，そこそこ使われているようです（記事末尾に
GraphvizのDOT言語をJavaScriptで実装·canviz MOONGIFT
canvizはCanvasを使ってDOTファイルをグラフ化するソフトウェアです。 フローチャートなど複雑なグラフを描くのに適しているのにDOT言語が知られています。通常、Graphvizを使って画像化するのですが、今回はcanvizを紹介します。なんとDOTファイルを読み込み、Webブラウザ上にCanvasタグで描き出してくれます。 例。かなり複雑な関係性を表示しています。 別なグラフ。こちらも関係性が複雑です。 レイアウトを変更するとグラフも全く別物になります。 表示の大きさは自由に変えられます。 こんな図も。 複数線がつながっている、そんな表示も実現します。 色付きの枠。 グルーピング。 グルーピングでさらに色付き。 ノード自体が色付き。 14の頂点で相互につながっています。 同じグラフもレイアウトを変えるとこんな感じに。 Graphvizを使う場合は主に個人用途、もしくは変換後の画像
テキストエリアの自動リサイズ再び
以前、テキストエリアのサイズを文章の長さに合わせて変えるスクリプトを考えて、それをppBlogのエディタにも採り入れているのですが、それは意図した様に動くには動くのですが、えらく力業なスクリプトでした。その恥ずかしいスクリプトは、ここ に置いてます 記述も長くてスマートでないし、もっと簡単に出来ないかなぁと考えてみましたが、要は、自動調節というのは、テキストエリアのスクロールバーが表示されなくなるまでエリアを伸ばすということなので、その考えで行けば簡単でした。以下のような記述でいけますね。 function autofit(el){ if(el.scrollHeight > el.offsetHeight){ el.style.height = el.scrollHeight + 'px'; } } element.scrollHeightで、目的のテキストエリアの、スクロール分も含めた高
iOS向けゲームが15分で開発できる、高速HTML5ゲームエンジン「IMPACT」登場 【増田(@maskin)真樹】 | TechWave（テックウェーブ）
[読了時間:1分] 先日、リリース間近とお伝えしたHTML5ゲームエンジン「IMPACT」が12月21日未明、正式に公開となった。同エンジンで開発されたゲームは、iOS上では60フレーム/秒を実現するとされており、HTML5対応のウェブブラウザであればプラグインなどをインストールする必要なく実行できるという特徴を持つ。サイトには、効率の良い開発スタイルを説明するビデオやサンプルソースコードなどが公開されている。ライセンスは価格は99ドル。 エンジンを開発した独Dominic Szablewski氏は、HTML5に対応したモダンブラウザ上で高速に動作するゲーム「Biolab Disaster」を公開、その開発のために使用したエンジンを一般に提供すると告知していた。今回の正式リリースで、このゲームもアップグレード。公言通り、iOS上でも快適に動作するようになっている。 lMPACTは、HTML
HTML5、CSS3、JavaScriptがリアルタイム編集できる！軽量HTMLエディタ「Liveweave」 - Chrome Life
みなさんは、HTMLやCSSのコーディングには何を使っていますか？ デザイナーの方であればDreamweaverをメインで使っている人が多いと思います。 デベロッパーの場合は、自分の好きなテキストエディターを使いこなしているでしょう。 しかし、実際にはコーディングをしながら見た目や動きを確認するためにブラウザを横でたちあげてデバッグしながら作業を進めていくと思います。 コードを修正→ファイルの保存→ブラウザで更新→確認 この手順を繰り返すのですが、これがなかなか面倒です。 できれば、コードを修正したタイミングですぐに確認できるとベストですよね。 そこで今回ご紹介するのが、HTML5、CSS3、JavaScriptをリアルタイムに編集して確認ができる軽量HTMLエディタ「Liveweave」です。 「Liveweave」は、ブラウザ上で動作するHTMLエディタです。 コーディングエリアとレン
Test::QUnit - mozrepl経由でコマンドラインからJavaScriptのテストを実行する - 愛と勇気と缶ビール
マクラ - JavaScriptのテストについて テストのないコードはコードではなく、テストを書かないプログラマはプログラマではなく、テスティングフレームワークのない言語は言語と呼ぶに値しない。と以上のような偉そうなことを言う資格は全くないし狂信的でもない僕ですが、少なくともまともに動くコードであることを証明するために、人並みにはテストを書きます。 それでまあ、最近JavaScriptばかり書いてるのですが、JavaScriptのテスティングフレームワークって大体以下のようなものに分かれると思っています。 ブラウザ上で動かすことを前提としたもの(JsUnit, QUnitなど) RhinoやSpiderMonkeyなど、ブラウザから独立したJavaScriptエンジンで実行することを前提としたもの(JsUnit, QUnit-TAPなど) 2. に加え、env.js(http://www.
やったーJavaScriptの動くMySQLできたよー - 愛と勇気と缶ビール
※ネタです ※UDFです Mysql 5.1 Plugin Development 作者: Andrew Hutchings,Sergei Golubchik出版社/メーカー: Packt Publishing発売日: 2010/08/30メディア: ペーパーバック購入: 1人 クリック: 45回この商品を含むブログ (2件) を見る しばらく積ん読していたこの本をちょっと眺めてみたら、MySQLのUDFって簡単に作れるんだなー、と思った && そういやV8ってライブラリとして簡単にリンクできるはずだな、と思い出した ので、ついカッとなって作った。 http://github.com/zentooo/mysqludf-jseval UDFうんぬｎ ほとんど↑の本の受け売りになるけど、一応MySQLのUDFについて備忘録代わりに軽く紹介しておくと UDFを追加する場合、MySQLの再コンパイ
WebKit サーバーというものを作ってみた - IT戦記
みなさん お久しぶりですヽ(´ー｀)ノ夏休みの宿題終わりました？ 毎日が夏休みの最終日みたいな生活してるあまちゃんです！ さてさて 今日は WebKit サーバーというものを作ってみたので、紹介してみます。 WebKit って何？ WebKit っていうのは Chrome や Safari の中に入ってるブラウザのエンジンのことです！ 実はブラウザっていうのは、エンジン部分と見た目の部分（タブとかボタンとかね）に別れていて、意外と違うブラウザでもエンジン部分は同じものを使ってるってことも多いんですよ(*´ー｀) ブラウザのサーバーってどういうこと？ 要は、サーバーサイドでブラウザを起動して JavaScript を実行したり、 JavaScript が実行されないと読めないページから値を持ってくるのに使ったりしようという魂胆です。 今まではそういうのなかったの？ 実は、今までは JavaS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TM - WebTools
Chart.js
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
