サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
アメリカ大統領選
javascripter.hatenablog.com
MessageChannel / setTimeout / requestAnimationFrame / postMessageを使ったものより異様に速い。 というのも、setTimeout等は、次のサイクル（すなわちnextTick）の開始時に実行する関数を登録し、DOMや画面の更新後に実行されるのだが、 MutationObserverのコールバックは、現在の(同期的な)JS実行が完了した時点でコードを走らせるためである。さらに、MutationObserverは同じ実行サイクルでのDOM上の変更を次回のサイクルにすべてまとめてrecordsとしてコールバックに渡すので、これもsetImmediateの実装には非常に都合が良い。 MutationObserverのような実行タイミングをmicrotaskといい、setTimeout / postMessage / MessageCha
世の中に存在するオンラインエディタうち、textareaを直接使っていないものの大半が、適切にIME処理を出来ていない。IME周りの処理は厄介なので、とりあえずどういう感じなのかを調べた結果をメモしておく。後で直したい。 オンラインエディタの仕組み オンラインエディタの主な目的はsyntax-highlightingとCSSによるカスタマイズである。textareaは、個々の文字の強調や色づけができない。 <div contenteditable="contenteditable"> まず始めに思いつくのがHTML5のcontenteditable属性で、これは任意の要素を編集可能にするもの。execCommandというコマンドがあって、これを使うと選択範囲の文字をボールドにしたりできて、リッチテキスト編集のためにあるものなので、一見便利そうである。しかし、キャレット（エディタ内の縦棒の点
ついに20歳になりました。自分が20代に突入したんだと思うと、なんだかとても奇妙な感じがします。自分が小さい頃は、自分と親の見た目や知識、経験などの差があまりに圧倒的で、子供と大人の差なんて当たり前すぎて、疑問にすら思いませんでした。そして、子供が大人になる瞬間というものがあるんだと漠然と考えていた節があります。 今20歳になって実感するのは、急に子供が大人になる離散的なジャンプがあるわけではなくて、子供から大人になるというのは連続的な過程なんだな、ということです。20歳になった今でも、まだこのブログを始めた中学生の頃から精神的には全然変わっていないような気がする一方、ずいぶんとあの頃とは変わったなと思う部分もあります。 このブログは2008年の中学2年の頃からやっているので、かれこれ6年目です。記事もその頃からずっと残っているので、昔の記事を見ると自分がその頃どんなことを考えていたのを思
node-webkitとは node-webkit wiki 日本ではあまりnode-webkitは知名度が高くないが、簡単に言うとIntelが開発に関わっている、nodeとWebKitを統合し、DOMコンテキスト上でnode.jsの機能を使えるようにするソフトウェア。一言でいうと言うと、ウェブでnode.jsを動かすプラットフォーム。 何ができるのか node.jsで出来ることと、ウェブで出来ることと、node-webkitが用意している機能（GUIの操作など）が使える。 例えば/etc/hostsを読み込む場合 node-webkitと同一のディレクトリに下記のようなindex.htmlを用意して <!doctype html> <html> <body> <pre id="hosts"></pre> </body> <script> var fs = require('fs'); f
英文法がただの暗記に思えるのだとしたら、おそらく文法の学習方法が間違っている。 単に「覚えろ」と学校では言われがちな文法にも背景となるロジックがあり、個々の文法が学年や章ごとに分かれているわけではなく繋がっているものだ、ということをここで例をあげながら示そうと思う。 to doとdoing to do, doingを「すること」と「暗記」すると、 I would like to have some tea.（お茶がほしいです） が何故、 I would like having some tea.（正しくない） ではないのかが分からず、暗記を補強する知識を得ずにさらにwould like toが「したい」だと暗記することになる。 一方、 doing、が「している（過去から現在の動作）」という状態を意味するdoの変形の「すること」であり、to doは、「すること（未来に向けた動作）」である、と
昨年末あたりからモバイルアプリ(iPhone, Android)の開発をやっていて、新しい言語とかSDKを一気にいろいろと覚えた。Web開発ばかりやっていてスマホアプリは未体験だったので、今日はスマホアプリ開発について雑感をいろいろ書く。 Titanium Mobile 独自のSDK + JavaScriptでiOSアプリとAndroidアプリを作れるフレームワーク。やめといたほうがいいと思う。UI自体はDOMっぽい独自の物で作る+alert("hi")でアラートが出るなど、開発初期段階では高速につくれる。 しかし、問題点も多い。Titanium Mobileはプロトタイピング以外には向いてないというのが自分の感想。とっつきやすいのはいいが、ネイティブのSDKを覚える価値のほうが高く、しかも独自のSDKの学習コストも馬鹿にならない。 JavaScript自体の問題 規模が大きくなってくると
Google Chrome Canary（正確にはV8）に、ついにGenerators（yield）が入った。これを上手に使うと、エラー処理を含む非同期コードを同期的に書くことができるようになり、見通しが極めて良くなるので、ここで紹介する。 ここで紹介するものはいずれNode.jsでも使用できるようになるので、Webとの互換性を気にする必要のないNode.jsでは近いうちに活用できるようになると思う。 下のコードを動かすためには、最新のGoogle Chrome Canaryで、chrome://flagsからexperimental javascriptを有効にしておく必要がある。 ES6 HarmonyのGenerator構文について functionではなくfunction*というキーワードを使うと、yieldキーワードが使えるようになる。 function* range(begin
setTimeout(fn, 0)より高速な関数は最近はこんな感じのを使うといいと思う。 var nextTick; if (typeof setImmediate === 'function') { nextTick = setImmediate; } else if (typeof process === 'object' && typeof process.nextTick === 'function') { nextTick = process.nextTick; } else if (typeof MessageChannel === 'function') { (function () { var channel = new MessageChannel(); var queue = null; channel.port1.onmessage = function () { t
遠い昔に知人の自宅サーバを間借りしてサイトを作っていたのだがいつの間にオフラインになったのでMacBookで開発をしていたのだが、他人に何かを見せるときはURLがあると良いということで、VPSを借りることにした。 従量課金は不安だし、結局は遊びにしか使わないのでとりあえず動けば良い。 Skypeで知りあいの技術者に情報を募ったところ http://vps.sakura.ad.jp 月980円、良い、容量ある http://dream.jp/vps/ 月472円、遅い、不安定、 http://rackhub.net/ 15日260円、容量がない、元からrvmとか環境設定された状態になる、まともな保守が期待出来ない とのことだったので、とりあえずRackhubを15日使うことにした。 まず、sshでログインした後node --versionしたら驚きのv0.6.15で、nvmで見てみると0.7
またXSSか、という感じではあるが、今日は文字コードに関連するXSSを紹介する。 エキサイトを例にとって説明する。エキサイトウェブ検索の&target=パラメータは、文字列を動的に埋め込んでいる。 例えば、 http://www.excite.co.jp/search.gw?search=1&target=xxx にアクセスすると、ソースコードのJavaScriptに </div> <script language="javascript"> <!-- var current_target = 'xxx'; function tabHilight(target){ xxxが埋め込まれる。 ただし、 http://www.excite.co.jp/search.gw?search=1&target=xxx' とすると <script language="javascript"> <!-- v
先日、非常に珍しい、GPSつかったチャットの脆弱性を発見したので、ここに注意もかねて書いておく。 簡単に言うと、WebSocketに生で自分でGPS座標を送り、相手との距離差を何度でも取得できる脆弱性で、離れてる、近いくらいしか分からないことを前提にGPS使用を許可してる時に〜町にいる、とわかってしまうという、聞いたことない感じの珍しい脆弱性である。websocketでイベント駆動にしてるとついうっかりステート管理があやふやになりがちである。 さて、下記は脆弱性の存在したchatpad.jpのサポートに送ったメールである。 Subject: GPSを使用した機能に関する脆弱性について 初めまして。いつも楽しくChatPad使わせて頂いております。 件名の通り、GPSに関する脆弱性を発見しました。これは相手の住所が相手の意図に反し 高精度（最大で市町村程度まで）特定できてしまうというもので、
概念/仕組み Deferred/Promisesは非同期処理を簡単にするための取り決め。 callback hellと呼ばれているような、非同期処理によるコールバックのネストを軽減することができて非常に便利。 慣れれば便利だが、一見どう使えばいいのか分かりづらいので、少し解説を書く。 ここではPromises/Aという仕様を実装したQというライブラリを使うが、jQuery.Deferredなどもほぼ同じである。 まず、Deferred/Promisesは、関数のreturn、try/catchの非同期版である。 www.example.comの内容を取得し、正しく取得できたら中身を表示し、取得できなければエラーを表示する、というプログラムは 同期的なコードでは、 function get() { var req = new XMLHttpRequest(); req.open('GET',
下記のCSSをユーザCSSとして登録してすべてのウェブページに適用しておくと、QuickResなどのアプリでMacBookのRetinaモデルで画面をドットバイドットにした時に自動的にウェブページが拡大されるようになり、インターネットが快適になる。 html { zoom: 150%; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { html { zoom: 100%; } } 僕はSafariではhttp://sobolev.us/stylish/を使用している。
こういうのをブックマークレットに入れておくと便利なんじゃないでしょうか。 javascript: var _vindex = _vindex || 0; var vall = document.querySelectorAll('iframe[src^="http://flashservice.xvideos.com/embedframe/"]'); if (vall.length) { vall[_vindex = (_vindex + 1) % vall.length].scrollIntoView(); } else { alert("No video was found :("); }
せっかくだから外国人と仲良くなりたい！と思っても、英会話が得意だったり、すごく社交的だったりしない限り、なかなか会話を続けるのは難しい。 基本的には、疑問文を使って相手に多く喋らせるというのが会話を続けるコツだが、何を聞けばいいのか。 定番は、 What's your name?（お名前は何ですか） Where are you from? （どこ出身ですか） What do you do? （職業は？ OR 学生ですか？） Do you know where XX is? （XXがどこにあるか知ってますか？） だが、もう一つ、女の子と盛り上がる用のパターンを加えたい。 Do you know how to make a frog with hands? (どうやって手でカエル作るか知ってる？) 手でカエルを作るというのは、いわゆる手遊びのカエルのことだが、10代〜20代前半の女の子は全く知
任意の数nを与えたときに ・nが偶数ならば2で割る ・nが奇数ならば3倍して1を足す を繰り返すと、1になる、という有名な予想。 面白そうだからやってみた。 function f(num){ for(var step=0;num!=1;step++){ if(num%2==0){ num/=2; }else{ num=num*3+1; } }…
アメリカに行ってエンジニアリングを学びたい中学生 - Togetter 404 Blog Not Found:アメリカに行ってエンジニアリングを学ぶ前に用意しておくべきもの １４歳の、アメリカに行ってエンジニアリングを学びたい少年へ を読んで。 自己紹介 僕は18歳で、今年からオーストラリアの大学にコンピュータサイエンスを学びに行きます。16歳の頃に語学留学でオーストラリアに1年半行きそちらでの進学を決め、日本に帰国し渡航の準備中です。 若い世代として、思っている事を書きます。長いですが、なるべく正直に、思っている事を書いたつもりです。 僕はエンジニアではありませんが、ベンチャー企業でフロントエンドのプログラミングに関わっていた事があります。数千行以上あるプログラムを書いていたのはその一度だけです。普段は趣味で適当にプログラムを書いて遊んでいます（iPhoneを振り回して近くのパソコンに写
jQueryは互換性を保ちつつも洗練されたAPIを取り入れているので、新しく書くときは新しいAPIを使った方が良い。 liveとかセレクタの:hoverとかはBad Partsだ。 jQuery.fn.on / jQuery.fn.off live/delegate/bind/click等は滅びた。全てonを使おう。 また、data引数を使う場合は必ずdataをオブジェクトかnullにする。dataが文字列の場合、関数の場合にセレクタ等と区別がつかないからだ。 $("body").on("click", function (event) { alert("Clicked!"); }, false); また、querySelector/querySelectorAllの登場によって、:hover等のjQuery固有のセレクタは滅びた。validなCSSセレクタと、jQueryのメソッドをch
プログラミングというよりコンピュータにすら関係ないが、今日はTOEICと留学の話をしようと思う。 成果 2010年9月: 425点 2011年8月: 970点 背景 僕が英語を勉強しはじめたのは去年の9月、オーストラリアに語学留学した時だ。 留学すれば英語ができるようになるという根拠のない確信の元、事前の勉強無しで海外に飛び立った。 当時の英語力はほぼゼロに近い状態であり、諸事情で中学2年の知識の残りかす程度しか持っていなかった。 留学 おそらく、留学すれば自動的に英語が喋れるようになるというイメージを持っている人は多いと思う。僕も留学するまではそう思っていた。 しかし、現実は甘くない。勉強という形を取らずに自然に言語を覚えられるのは幼児だけである。 親切にma-maと1000回話しかけてくれる人がいない僕らは、教材を使って勉強しなければならない。 そこで、語学学校という選択肢が出てくる。
9月からオーストラリアに留学に来ていてとても忙しい。コンピュータに触れる時間もないし、日本語自体あまり使う機会がない。 最近、IE9 Betaが出たりとかiPod系がリニューアルされたりとかを聞いたけど、細かいニュースを追うのは時間の無駄かなと思い始めていて、トレンドに疎くなった。 オーストラリアのインターネット環境について少し。 基本的にADSLやモデムを使った接続が主流だが、僕はプリペイドのインターネットを使っている。Vodafoneのインターネットは意外とどこでも繋がる。オーストラリアのMcDonaldsにもFreeのWifiがある。 インターネット自体は普及しているが、日本と比べると、とにかく遅い。携帯電話については電波が少し弱い。建物の中では使えないことも結構ある。 こちらで購入できるコンピュータは普通の英語キーボードで、iPod nanoは16GでAUDで$220程度。日本と比
(function ($) { $.fn.$each = function (callback) { return this.each(function () { return callback.call($(this)); }); }; })(jQuery); こういうのを定義しておくと便利。 $("a").$each(function () { /\.jpg/.test(this.attr("href")) && window.open(this.attr("href")); }); こんな感じで使う。
Chromeみたいに必要なときだけステータスバーを表示するSafari5拡張を書いた。 javascripter/smart-status-bar · GitHubに置いた。 同様の拡張はSafari Extensions by Daniel BergeyのInvisible Status Barがあるが、.safariextzをzipとして解凍して中身を確認すると分かるようにzipではなくxar?解凍できたのはアーカイバがうまくやってくれたからだ…。ステータスバーの下をクリックできなかったり、iframeに対応していなかったりなど、いくらか不足がある。よってそれらへの対応と、アニメーションを追加した。 やってることは単純。ステータスバーとしてドキュメントにspanを追加して、aタグにmouseoverした時にspanのテキストをURLにする。それからmouseover時のみオンになる属性
昔流行ったやつ。幅優先探索で迷路の経路を出す時は、ノードをリストにして逆算していくか、マップを0で初期化して、通るたびに0, 1, 2…というように徐々に増やしていって、ゴールについたら一つずつ減っていくような道を探す、という方法が使える。 それぞれ辺のコストが異なる場合はキューをPriority Queueにしてコストの合計が最小であるところから探索すれば良い。で、これを発展させるとダイクストラ法になって、更に、探索順序を改良すると、AStarになる。このへんは、一度書いてみると理解が深まるのでオススメ。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>迷路探索</title> <style> textarea { font-family: monospace; } </style> </head> <body> <
HTML5のhistory.pushState、history.replaceStateを試した。 HTML5 pushState/replaceState demoで動かせる。 Minefieldだと完全に意図した通りに動くがWebKitだとURLまわりがうまくいかない。 メインのソースコードは下記の通り。 canvasで適当に壁紙用画像を作るデモで、画像自体をクリックして何度も作り直せるようにした。 こういう物を作るときは、前の画像に戻れるよう履歴管理をすべきだが、今まではlocation.hashを使ったり（hashchangeイベントが入るまではタイマーが必要だった）iframeを使ったハックだったり（ブラウザ間の互換性やhistory.go(-2)をきちんと動かすのが難しい）、あるいはページを遷移する（必要ない部分まで毎回読み込まれる）必要があった。 pushState/repl
Problem 3 † 13195 の素因数は 5、7、13、29 である。 600851475143 の素因数のうち最大のものを求めよ。 http://odz.sakura.ne.jp/projecteuler/index.php?Problem%203 これを解こうとしたら600851475143ってintには収まらないしlongはどれくらいの大きさなのか、分からないなあと思って調べた。 下はsignedの場合。 char ±127 short int ±32767 int ±32767 long int ±+2147483647 あれ、longでも足りない…と思ったらC99にはlong long intという物があって long long int ±9223372036854775807 これなら入る。で、それを使って書いてみた。 まず、nを素因数分解する時は2から√n以下まで割れば
http://tsukkun.net/tsu/に置いた。メインのプログラムはhttp://tsukkun.net/tsu/main.js。 id:uupaaさんのuuCanvas.jsをライブラリとして使用していてIEでも動くが、かなり重い。 敵がユーザーを追いかけてくる部分は幅優先探索を使っていて、ようするに、迷路探索をしている。 迷路探索と言えば、ついこの間話題になったのと同じである。 で、キャラ等の画像は友人に頼んで作ってもらった。 FirefoxとOperaではキーを押しっぱなしにしても複数回keydownイベントが出ないので、かわりにkeypressを使うとよい。 ただし、FirefoxではSPACEキーがkeyCodeではなくcharCodeとwhichにしか入らないので、そこらへんを考慮する必要がある。 if (/Gecko\/|Opera/i.test(navigator.
=begin Reducer 配列等のイテレータから適切な値をスキャンして抜き出すクラス。O(n)である。 Reducer#reduce(iter) iterはempty?とeachメソッドを実装している必要がある。 Reducer#update?(left, right) 抽象メソッドである。 サブクラスでオーバーライドして使用する。 値を更新する場合にtrueを返し更新しない場合はfalseを返す。 =end class Reducer def reduce(iter) return nil if iter.empty? cur = nil iter.each.with_index {|value, index| if index.zero? cur = value else cur = value if update?(value, cur) end } return cur end
発端は javascript:alert([].sort.call(null)) これで window オブジェクト取れるのなんで? http://twitter.com/edvakf/status/9222713572 という投稿。 この不可解な挙動を説明することは案外難しい。 まず、ES5のstrict mode以前（つまり、今普通にJavaScriptを使う場合）では、 function fun() { return this; } alert(fun.call(null) === window); がtrueになる。 それから、 var a = [3, 2, 1]; alert(a.sort() === a); alert(a); // [1, 2, 3] sortは破壊的であり、thisを返す。 thisが配列以外の場合については、仕様では未定義であるが、どうなのか。id:nan
obj.watch("prop", function (id, older, newer) { console.log(id, older, newer, arguments.callee.caller); return newer; });obj.propに値を代入してる関数を調べるテクニックの紹介。 下のスクリプトはFC2Blogではてな記法を使えるようにする（デバッグ前の動かない）スクリプトで、text-hatena.jsについては長いからここに載せるときに削った。 // ==UserScript== // @name FC2 Hatenation // @namespace http://oksoftware.blog52.fc2.com/ // @description Use Hatena syntax in FC2 Blog // @include http://blog*.
次のページ
このページを最初にブックマークしてみませんか？
『素人がプログラミングを勉強するブログ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
