HTML5のcanvas要素を使ってアニメーションを作る | 波乗りスタッフ日記/Web制作会社サーフボード
こんにちは、営業の東です。 前回のcanvasネタだったんですが、今回もcanvasネタですｗ Flashの代替が期待されているHTML5ですが、canvas要素を使うことでFlashのようにアニメーションを作ることができます。 とは言うものの、Flashの代わりに使うには、機能的に足りないし、実装も大変です。 もしかすると、簡単なものはFlashからHTML5 + JavaScriptに置き換わっていくかもしれませんね。 作るアニメーションの見本 canvas要素のアニメーションのサンプルは、世の中的なまだまだ少ないので、検索してもあまり良いものが見つかりません。 Processing.jsのサイトから作るアニメーションの見本を見つけるのがいいですね。 で、今回選んだ見本はこちら。 Processing.js - Basic - easing マウスポインタの位置に向けて、ゆっくりと円が
ウェブサイトに落書きできるようにするブックマークレットを作った | 波乗りスタッフ日記/Web制作会社サーフボード
こんにちは、営業の東です。 今回は、ウェブサイトに落書きできるようにするブックマークレットを作ってみました。 以下のリンクをクリックしたり、お気に入り等に保存すると、好きな時に任意のウェブサイトで落書きができるようになります。（ただしIE未対応） 落書きする 右上に表示される、「落書きをやめる」をクリックすると元に戻ります。 仕様とか技術の話 このように落書きができるようになったのは、HTML5で導入されるcanvas要素があってこそです。 IEは最新バージョンのIE8でも、canvas要素を実装していないですし、ライブラリ（Googleが提供しているExplorerCanvas）で対応したとしても、満足いく処理ができないので、今回は完全に切り捨てました。 Firefoxでもそこそこ動きますが、Safariが最も満足いく動きをしてくれますね。さすが、canvas要素の産みの親といったところ
JSONとJSONPの違い - あと味
解説は他にもたくさんありますが、私自身も使いはじめの頃、違いがよくわからなかったので。 JSONとは？ 汎用的なデータ記述方法です。こんな感じで書きます。 { 'blog' : 'あと味', 'author' : 'jdg' } まさにJavaScriptのオブジェクトですね。*1 JSONPとは？ JSONを以下のように変えたもの。 callback({ 'blog' : 'あと味', 'author' : 'jdg' }); 関数呼び出しっぽいですね。まぁ、関数呼び出しなんですけど。 どゆこと？となるポイント 見た目が関数っぽくなる意外に変更点はないように見えますが、クロスドメインでJSONを読み込む時は、なぜかJSONではなく、JSONPが使われます。（WebAPI等） また、アクセスしたらJSON形式のデータを返す単純なCGIを自分で作りたいと思った場合でも、JSONを返しても、J
Lisp脳なFizzBuzzをJavaScriptで書いてみた - あと味
最近、JavaScriptに惹かれる理由は、関数型言語の特徴を持つところに原因があるような気がしています。 Lispを得意としている人は、Lisp脳なる考え方があるとのことです。 興味の源泉に出会うために、Lisp脳を覗いてみようと思い、を読みながら、JavaScriptでLisp脳なFizzBuzz*1を書いてみました。 お手本 (for-each print (map (lambda (x) (cond ((= (modulo x 15) 0) "FizzBuzz") ((= (modulo x 5) 0) "Buzz") ((= (modulo x 3) 0) "Fizz") (else x))) (iota 100 1))) これを読むだけでは、正直何をやってるかわかりません。次に、解説を読みながら書いてみます。 まずはリストを作る 「とりあえず1から100までのリストを作れば良さ
遅ればせながらYQLに感動した - あと味
遅ればせながら、この前YQLを使う機会があったのですが、これはなんとも素敵なサービスですね。 まだ馬鹿の一つ覚えで、XMLとかAtomとかRSSをJSONPにまるまる変換することしかできないですけど、それだけでも十分役立つ。Yahoo!Pipesもすごいと思ったけど、YQLの方が気軽で使い勝手がいい。 YQLはどういう時に使えるのか？ YQLは、WebAPIで、XMLの出力でしか対応してないサービスとかを、JavaScriptだけ使ってプログラミングしたいという時などに使えます。 例えば、Google Ajax Search APIは、問い合わせ結果をJSONPで出力してくれるので、JavaScriptだけでプログラミングができますが、Yahoo!JapanのWeb検索APIは、問い合わせ結果をXMLでしか出力してくれないので、クロスドメインの制約にひっかかってしまい、JavaScript
言いたいことをハッキリと言わない女の子に、言いたいことをハッキリと言わせるブックマークレットを作った - あと味
カヤックさんが「コンチ」という新しいモバイルサービスを作ったみたいですね。多くのブログでも取り上げられはじめました。このサービスは、女性がターゲットらしく、実際おもしろいらしいのですが、私はiPhoneユーザーなので遊べません。残念です。 ポケットフレンズ コンチ このサービスが流行って「今日のコンチは○○」とか、「友達のコンチが○○」とかが、日常的に書かれたブログを見かけるようになるのでしょうか。 自分の気に入ったサービスをブログで紹介するというのは、とても素晴らしいことだと思いますが、私はこの現象について、ガツンと申し上げたい。 言いたいことがあるなら、ハッキリと言いなさい！ 「きっと、この人はこういうことを言いたいんだろうな」と、読者が心理を先読みしてくれるのを期待していてはダメです。ハッキリ言わなきゃ、言ってないのと同じなんです。そんな言い方では、読者にあなたの想いは伝わりません。
本当にnewっていらない子。
なんかPerlのblessっぽい。 JavaScriptのnewって本当にいらない子？(http://d.hatena.ne.jp/jdg/20090706/1246840565) というよりperlのnewっぽい。なぜか。 classでクラスを定義してnewでインスタンスを生成する言語を「一般的オブジェクト指向言語」とすると、 一般的オブジェクト指向言語とjavascriptの似ていないところはclassがないところ。一般的オブジェクト指向言語とperlの似ていないところはnewがないところ。つまり、javascriptでnewを（直接）使わず、class（のようなもの）を作ればperlっぽくなる。 そもそもnewって何するの？オブジェクトを作る。オブジェクトを作るには3つの動作が必要である。 領域を作るクラスと結びつける初期化する通常は言語仕様でこれらを行う"new"という命令が用意さ
JavaScriptのnewって本当にいらない子？ - あと味
先日、「JavaScriptのオブジェクトについて考察してみた - あと味」を書いてから、chikuraさんからコメントいただいたり、id:dankogaiさんから「404 Blog Not Found:javascript - にはクラスはない」という記事で言及いただいたり、JavaScript: The Good Partsを読み返したりした結果、newについて調べたいという衝動にかられましたので、その調べた結果を書いてみたいと思います。 newを調べようと思ったキッカケを整理 まずは、そのキッカケから整理します。 chikuraさんのコメントより 押さえるべきポイントは、new演算子の際に何が行われるか？だと思うので、こちらのページもぜひ読んでみてください。 JavaScript の new 演算子の意味: Days on the Moon http://nanto.asablo.j
JavaScriptのオブジェクトについて考察してみた - あと味
JavaScriptを勉強しているとオブジェクトとはなんぞや？ということがわからなくなってきます。選択肢が増えれば増えるほど。 JavaScriptには、同じように見えて、実は同じではないデータがあります。それらのオブジェクトについて、区別して説明が付けられるように、自分なりに考察してみました。勉強中のアウトプットなので、ここで書いた内容は事実とは大きく外れているものかもしれません。とにかく不明瞭な部分を自分なりに理由づけしたかっただけです。 サンプルコードを試される場合は、FirefoxのFireBugにあるコンソールに貼りつけて実行するか、Safariの開発ツールにあるコンソールに貼りつけて実行してください。それがわからない方は console.log の部分を alert に置き換えて確認してください。 話がややこしくなるので、今回はプロパティしか扱っていません。 名称の定義について
JavaScriptで日本語プログラミング言語を作る - あと味
オライリーの[asin:4873113296:title]を読んでて気づいたんだけど、JavaScriptってUnicodeで書けば予約語以外は全部日本語にできるんですね！オブジェクトもメソッドもプロパティも全部。UnicodeはECMAScript 3rd Edition以降で対応したらしい。IE6でも動く。これ常識なのかな？あんまりそういう記事を見たことなくて普通に知らなかった。 「それ、○○でもできるよ！」というツッコミが来そうなところだけど、JavaScriptは気軽だからいい。 必要な環境 日本語プログラミングをするために必要な環境は以下のとおり。 ブラウザがECMAScript 3rd Editionに対応していること HTMLをutf-8で保存していること JavaScriptをutf-8で保存していること というわけでこんなのができる こんなのが動いてちょっと感動した。以下
1章 JavaScriptの概要 - JavaScript第5版読書メモ - あと味
まずは1章から。 JavaScriptの概要 オブジェクト指向のインタプリタ言語。 JavaScriptはPerlとかLispっぽい。でも書き方はCとかJavaっぽい。 主にブラウザ上にて動作する。インタプリタが内蔵されてるソフト（エディタ、画像編集ソフト等）でも動作する。 言語仕様は国際標準で規定されている。 JavaScriptとは何か？ JavaScriptとJavaは全然違う。元々はLiveScriptって名前だったけど、Javaが流行ってたからその流行にのっとってJavaScriptに改名しただけ。 「Live亭Script、Java亭Scriptを襲名！」みたいなもんか。でも、Java亭で芸は学んでいない。芸名が定着しちゃって直すのメンドイからそのままって感じ。細木数子に相談にしに行ったら、あっさり名前が変わっちゃうかもしれないってくらいJavaって名称に愛着はないと思われる。
不定期でオライリーのJavaScript第5版の読書メモを書くことにする - あと味
続くかどうかはわかりませんけど、不定期でオライリーのJavaScript 第5版の読書メモを書こうと思います。 第1部は読んでいるものの、まったくアウトプットしてないので、たぶんほとんど頭に入ってない。第2部以降はほとんど読んでません。 いろんなブログで読書メモを見かけるので、私も見習いたいと思います。 一応目標も決めないといけないですね。ということで以下が目標です。 目標 JavaScriptを人に教えられるようになること 単純ですけど、人に教えるにはもっと勉強しないといけないので、妥当な目標かなと思います。私の場合、実務で使わないし。 進め方 ある程度の分量を読んで、その後、アウトプットしていきます。JavaScript 第5版の目次に沿って書いていこうと思います。 アウトプットする内容は、その章に関してのことで、既存の知識、新たに知ったこと、調べたこと、疑問に思ったことなど適当に書い
a要素のclass名にpagetopを指定するとスムーススクロールするjsを書いた - あと味
しばらくプログラミングしてなかったのですが、最近またJavaScriptの熱が再沸してきました。 AS3を勉強しようとオライリーの詳説 ActionScript 3.0を買うも、アクセス制御指定子が序盤から出てきてめんどくせーってなっちゃいました。ECMAScriptやるなら、やっぱJavaScriptがよかです。 一応、制作会社の人間なので、js書くときは以下のことについて気をつける方針です。 JavaScript切ってても、コンテンツ閲覧が可能であること onclick等の属性は使わないこと 他のライブラリと名前の干渉をしないこと 極力多くのブラウザで動くこと 言うなれば、閲覧者に迷惑をかけず、デザイナの手間を極力省くって感じです。 で、今回はyoumosにあった、スムーススクロールの実装方法についての記事を参考に、一部リライトして作りました。 さらに、最近ホッテントリにあがっていた、
JavaScript ガイド - JavaScript | MDN
この JavaScript ガイドでは、JavaScript の使い方を紹介し、この言語の概要を説明します。JavaScript の機能についてもっと知りたい場合は、JavaScript リファレンス を参照してください。 目次 このガイドは、いくつかの章に分かれています。 入門編 このガイドについて JavaScript について JavaScript と Java ECMAScript ツール Hello World 文法とデータ型 基本構文とコメント 宣言 変数のスコープ 変数の巻き上げ データ構造とデータ型 リテラル 制御フローとエラー処理 if...else switch try/catch/throw エラーオブジェクト ループと反復処理 for while do...while break/continue for..in for..of 関数 関数の定義 関数の呼び出し 関
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
CSS使えるならWord捨ててWriteboard使おうぜ！ - あと味
気軽なWikiって感覚でしか使ってなかったけど、使ってみたらいろんなことがわかってきた。Writeboardすげぇーーー！ Firefoxさえあれば、ぶっちゃけワープロソフトはWriteboardだけでいいんではないかと思うくらいに便利。 検索しても類似の例があまりなかったので、あと味推奨、Writeboardの使い方を紹介します。 Writeboardって？ => Writeboard WriteboardはRuby on Railsを作った、37signalsという会社が運営している無料サービスのひとつで、複数人で使う、Wikiとバージョン管理機能が合体したようなシンプルなサービス。 詳しくは以下を参照されたし。 => Skypeグループチャット＋Writeboardが最強な件 | IDEA*IDEA => 【コラム】クリエイターのためのライフハック (1) Wikiを活用してコラボラ
id:otsune さんと id:otsnue さんを間違えないようにする Greasemonkey - IT戦記
最近、はてなユーザーも多様化してきて 似た名前のユーザーって多いですよね＞＜！ たとえば、以下のように名前を間違えるというようなこともままあります。 id:otsune id:kajuntkさん。そのidは私じゃありません。 2009/01/12 id:kajuntk id:otsune その辺は考慮して書いてると思うよ/ホントだ！今気がついた。 2009/01/12 id:otsnue amachangはアイドルであり身内だからな。身内が叩かれるとプッツンしてさらに過激にdis返しをするのが奴らの恒例行事。トコロテンさんが気の毒です。 2009/01/12 はてなブックマーク - なんかブコメで叩かれまくってる - Automatons Hacking Guide これは困ってしまいました＞＜ なんと、かの id:TAKESAKO 氏ですら見間違えてしまうほどです！ というわけで 間違え
はてブを正規表現やXPathでフィルタできるGreasemonkey - 聴く耳を持たない(片方しか)
先月 id:solailoさんから id:solailo これをリニューアルに対応させてもらたりできますか？ http://d.hatena.ne.jp/rikuo/20080902#c1229345579 とコメントをいただきました、「これ」というのは以前にはてな匿名ダイアリーで投稿されたこの Greasemonkey のこと はてブのhotentryで、2chコピペブログや「ネタ」を削除するGreasemonkeyを勝手に改造 - はてな匿名ダイアリー こちらは、はてなブックマークの注目・人気エントリーを正規表現とXPathでフィルタできる機能があったのですが、昨年11月に行われたリニューアルでページ構造が大きく変わり、動かなくなっていました。 というわけで、今回はそれをリニューアルに対応し、でもっていくつか機能追加することにしたわけです。 id:solailoさんにコメントいただいて
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
8maki.jp
JavaScriptのイロハ：特集 - builder by ZDNet Japan