コードリーディングに最適！たった200行で作れるHTML5製テトリスのプログラミング学習ムービー - Chrome Life
みなさんは、フルスクラッチでテトリスを作ることができますか？ プログラマーといってもゲームを作る機会が少ないと、なかなかすぐには作れないと思います。 JavaScriptでなんとか作れそうな感じもしますが、すんなり実装はできない感じがします。 特にグラフィックやアニメーションをうまく使ったものを作るには、それなりの経験値が必要だと思います。 そこで、今回ご紹介するのが、教育目的で作られたHTML5製テトリスのプログラミング学習ムービーです。 HTML5 tetris - making of HTML5 tetris - making of 驚くべきことに、 たったの４５分でテトリスが完成！ それもフルスクラッチで、jQueryなどのライブラリーを一切使っていません。 Youtubeのムービーは早送りしていますが、動きを確認しながら実装しているのが分かります。 実際に、こちらでテトリスをプレ
より良いプログラムを書くための究極の奇策 – 「Data first, not code first」 | POSTD
(訳注：2015/10/31、いただいた翻訳フィードバックを元に記事を修正いたしました。) 開発者は嫌うでしょう。 ここでは、標準的なコツや策略について書きますが、本当に興味があるのは、別のことです。究極の奇策を見つけたいと思います。策略をひとつずつ試して、プログラミングの聖域に少しでも近づければ良いのですが。 はじめに 私が初めて書いたビデオゲームは、 Ninja Wars （忍者戦争）でした。 そう、これは、画像で埋めたHTMLのtableです。 src 属性を変えることで、動きを実現しています。JavaScriptファイルの冒頭は下記のようになっています。 var x = 314; var y = 8; var prevy= 1; var prevx= 1; var prevsw= 0; var row= 304; var endrow= 142; var sword= 296; v
宣言的プログラミングの「宣言的」って？ - sh-2の日記
疑問 関数型言語を取り扱う書籍や記事を読んでいると、しばしば「宣言的」なる単語が飛び出してくる。どうやら、関数型言語で大事にされる概念らしい。 ところが意味を調べるとよく分からない。例えばWikipedia曰く、宣言的には2つの意味があるらしいのだが…… 純粋関数型言語/論理プログラミング言語/制約プログラミング言語で書かれたプログラムを「宣言型」と称する。この立場では、「宣言型プログラミング」とはそのようなプログラミング言語のグループ全体の総称であり、命令型言語と対立する概念である。 宣言型プログラミング - Wikipedia ある出力を得るにあたってそれを作成する方法ではなく、出力の性質を記述することを「宣言型」と称する。例えば、HTMLは、ページがどう見えるかを記述するものであるため、宣言的である。HTML はタイトルやフォントやテキストや画像を指定するが、具体的にコンピュータの画
NSURLで取得出来るURL(URI)のパラメータ一覧 - 強火で進め
NSURLのどのメソッドでどの要素が取れるんだっけ？となりがちなのでメモしとく。 プログラム。 NSURL *url = [NSURL URLWithString:@"http://user:password@www.example.com:8080/hoge/fuga/index.html?a=1&b=2#test"]; NSLog(@"absoluteString : %@", [url absoluteString]); NSLog(@"absoluteURL : %@", [url absoluteURL]); NSLog(@"baseURL : %@", [url baseURL]); NSLog(@"fragment : %@", [url fragment]); NSLog(@"host : %@", [url host]); NSLog(@"lastPathComponen
世の中のHTML5アプリケーションが糞だから、俺が「初期化」の作り方を教えてやんよ - mizchi's blog
2chまとめみたいなタイトルにしてみた。(してみたかった) HTML5のアーキテクチャと初期化とキャッシュの考え方が、「ウェブエンジニア」は本当に出来てない。 とくにソシャゲをウェブビューに貼ってスマホ対応しました系。本当にダメ。 じゃあどうするか？基本的に「初期化」の考え方を直せばどうにかなる。 (この記事はBackboneを使うときに考えてることだけど、他でも一緒だと思う) 前提 シングルページアプリケーション セマンティクスやSEOは考慮しない 基本哲学 共通モデルの初期化を徹底的に行う サーバーにリクエストを投げるのは最小限 クライアントでサーバーモデルのキャッシュを作り、更新が期待されるまで再取得しない 理由 いくらDOMの最適化したところでUXに影響が大きいのはサーバーリクエスト(200~2000ms)で、プログラミング段階で辛さがあつまるのは非同期処理の部分。 プログラマとし
連載: IBM Watson Workspace #鬼わか アプリケーション開発: 第 7 回: IBM Watson Workspace で AI を利用したアプリ連携の実現 #鬼わか 解説（前編）
要素が画面上に見えているかどうかを調べる - by edvakf in hatena
document.elementFromPoint という便利な関数を知ったので、今作っている Chrome 用 Migemo ページ内検索で使ってみた。 これが困ったことに、ブラウザごとにかなり挙動が違うのだけど、本来の動作はこんな感じらしい。 待望の document.elementFromPoint が Firefox 3.0a8pre にて実装された。仕様は nsIDOMNSDocument.idl に詳しく書いてあるが、おおよそ以下の通りである。 HTML, XUL どちらの document に対しても使用可能 document の左上を (0, 0) とし、位置 (x, y) にある実際に見えている要素を取得する 同一の document 内に存在する要素のみ取得可能。例えばインナーフレーム内の document 内に存在する要素は取得できず、代わりに iframe 要素を返
yak shaving で人生の問題の80%が説明できる問題 - bkブログ
yak shaving で人生の問題の80%が説明できる問題 つい最近、 yak shaving （ヤクの毛を刈る）、という言葉を知りました (原典)。これは「一見無関係に見えるけど、真の問題を解くのに必要な問題を解くのに必要な（これが何段階も続く）問題を解くのに必要な活動」という意味の言葉です。 yak shaving は、ようするに「ある問題を解こうと思ったら別の問題が出てきて、それを解こうと思ったらさらに別の問題が出てきて…」ということが延々と続く状況を表しています。ちなみに、ヤクとは毛が長い、牛の一種です。 yak shaving は、以前に覚えた bikeshed と同じくらい便利そうな表現です。というもの、プログラムを書いていると yak shaving 的な状況がすぐに発生するためです。 たとえば、「Amazon のほしい物リストを CSV 形式に変換して Excel で読み
HTML / DOM におけるキーボードイベント周りの話 - ひだまりソケットは壊れない
最近キーボードショートカットの実装をしようと思ってキー入力によるイベント周りについて調べてみたのだけれど、日本語でまとまった情報が見つからなかったので、キーボードショートカットの実装に必要そうな内容を簡単にまとめておこうと思う。 キーボードショートカットに限らず、キー入力によるイベント周りの何かをする場合には参考になると思う。 本記事では、DOM 3 Events spec の 2012-09-06 の版を参照しており、将来の版では変更されている可能性がある。 最新の版は下記リンクから確認のこと。 Document Object Model (DOM) Level 3 Events Specification (DOM 3 Events spec の最新安定板) keydown イベント、keypress イベント、keyup イベントについて keydown イベント は、キーが押された
tmlib.js x three.js(WebGL) で10000個のパーティクルを表示してみた | TM Life
tmlib.js x three.js(WebGL) でパーティクル表示してみました! 10000 個表示しても 30 fps でるのは脅威!! jsdo.it で作ってあるので実際に実行したり, fork して遊んでもらえると幸いです. Table of contens tmlib.js とは？ three.js とは？ コード 解説 『Global Game Jam 2013 【新宿会場】with tmlib.js』やります!! tmlib.js とは？ そもそも tmlib.js って何って方のために軽く紹介. 簡単に言うとゲームやツールを簡単に作るための JavaScript ライブラリです. 詳しくは下記のリンクにて tmlib.js とは 以前, 勉強会で発表させていただいたスライドです. GitHub tmlib.js は GitHub で管理しています. Documents
NAVERまとめに見る遅延ロードのすすめ « NAVER Engineers' Blog
あけましておめでとうございます。NAVERまとめのフロントエンドを担当している縣です。初詣で引いた大吉のおみくじを握りしめながら今年も張り切っていこうと思います。 今回はJavaScriptの遅延ロードの仕組みをNAVERまとめに導入した際のお話を紹介します。 遅延ロードの検討 昨年NAVERまとめのまとめ閲覧ページや、まとめ編集ページでのJavaScriptファイルの読み込みを遅延ロード化する作業をしました。元々はページ読み込み時に全て読み込ませていましたが、JavaScriptファイルが巨大になってきてパース・実行に時間がかかるようになったことから遅延ロードを検討することになりました。 遅延ロードの利点というとJavaScriptファイルの読み込み・実行によるブラウザのレンダリング停止を防ぐのはもちろんですが、どのファイルがいつどこで必要になるかを明確にすることもでき、依存関係を動的
JavaScriptは業務アプリの開発言語として有力な存在になる
この記事は、日経SYSTEMS 8月号に掲載された連載「新野淳一の技術インパクト」第5回のオリジナル原稿をPublickey掲載用に編集したものです。Publickeyでは日経SYSTEMS編集部との合意を得て、雑誌発行から一定期間後に記事をPublickeyに掲載しています。 JavaScriptは1995年の登場から何年にもわたって、Webページにちょっとした動きを与えるための簡易なプログラミング言語とみなされてきた。しかしいまやJavaScriptはモバイル向けアプリケーションの開発、業務アプリケーションのフロントエンド開発、そして大規模なWebアプリケーションのサーバサイドプログラミングなど、あらゆる分野での活用が始まりつつある。最も注目を集め、急速に適用分野を広げて進化しているプログラミング言語だ。 業務システム開発の視点で見れば、今後の開発言語としてJavaScriptが有力候
「Meteor」は、JavaScript/HTMLで開発するリアルタイムWebアプリケーション基盤。何が起きているのかすぐに分からないほどすごい
「Meteor」は、JavaScript/HTMLで開発するリアルタイムWebアプリケーション基盤。何が起きているのかすぐに分からないほどすごい 「Meteor」は、Webアプリケーションを開発するためのフレームワークと実行環境を提供しています。アプリケーションはすべてJavaScript、HTML、CSSで記述できるため、サーバ側でRubyやPerlやJavaなどのプログラミングをする必要はありません。 TechCrunchの記事では、JavaScript/HTML/CSSだけでWebアプリケーションが開発できる点にフォーカスが当たり話題になりましたが、公開されたデモンストレーションのスクリーンキャストを見たところ、Meteorにはそれ以上に新しい仕掛けが盛り込まれていました（スクリーンキャストはこの記事の末尾に埋め込んであります）。 それは「リアルタイムなWebアプリケーションを構築す
第4回 図形のクリックを検出しよう─JavaScriptで外積の計算 | gihyo.jp
以前gihyo.jpの特集で、Nゲージのエディタを取り上げたことがあります。このエディタでは、レールをドラッグ操作で動かせるようにしました。 レールの始点または終点から、x, y共に±3以内だったら端点と見なすことで、端点をドラッグすると変形になる処理が実現できます。これは簡単ですね。ifの条件で書くと ((sx - 4 < x)&&(x < sx + 4)&&(sy - 4 < y)&&(y < sy + 4)) のようになります。 では、レールの上をドラッグしたら移動になる、という処理はどう書けばよいでしょうか。レールは直線ですが、水平や垂直ではなく斜めにもなります。もちろん、1ドット幅を正確にクリックしないといけないのでは実用になりませんから、ある程度の幅を持たせる必要があります。高校で「点と直線の距離」を習った記憶がありますが、ルートが出てくるなど計算が複雑なため、たくさんの線があ
codic - デベロッパーのためのネーミング辞書
codicは、プログラマーのためのネーミング辞書です。新しいcodicでは、翻訳エンジンを搭載しネーミングをジェネレートできるようになりました。
XHTMLとは何だろうか
XML 文書例； <?xml version="1.0" encoding="Shift_JIS" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>XHTMLとは何だろうか</title> <meta http-equiv="Content-type" content='text/html; charset="Shift_JIS"' /> </head> <body> <p><a href="http://www.w3.or
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
IDEA * IDEA