サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
iPad Air
kazumix.hatenablog.com
「OpenGL で作る iPhone SDK ゲームプログラミング」、「iPhone ではじめる OpenGL ES プログラミング」共に良い書籍なのですが、iOS SDK 4.2で全く構造が変わってしまった旧SDKのテンプレートをベースにしているため、いきなりつまずいてしまった人もいると思います。気合いでテンプレートコードを読み替えて対応することもできますが、簡単に書籍と同じテンプレートで始めることができます。 iPad用のOpenGL ESテンプレートが旧SDKのまま そう、新規プロジェクトでProductをiPadにした場合のOpenGL ES Applicationテンプレートは、iPhoneと違って構造が旧SDKのままなんです。 このままでは当然ターゲットがiPadになっているので、その辺をiPhoneに変更すればOK! 新旧の構造の違い ES1Render, ES2Render
HTML5 Canvas Sprite test （最近のブラウザなら動くと思う。IEは9なら動く? Google Chromeは爆速） HTML5 Canvasに関しては、IE9が出てから本気出す！…つもりだったんだけど、その前に仕事でやってきて、いきなり本気を出さざるを得なくなったKAZUMiXです。 実際にCanvasを使ってみたら思った以上にローレベル！Flashみたいなものを作ろうとすると、自前で深度管理やらなにやらやらざるを得ない！ というわけで、Flash(AS3)で言うところのSpriteの仕組みが欲しくて作ってみたサンプルが上のものもです。 Spriteとして実装しているメソッドはaddChild, removeChildのみｗ とはいえ親子、兄弟関係に対応するだけで、楽しくなりますね。 サンプルのJavaScriptソース sprite.js (utf8) 追加したい機
指の脂の表現に特に力入れた。 javascript:(function(d,s){s=d.createElement('script');s.type='text/javascript';s.src='http://www.rr.iij4u.or.jp/~kazumix/d/javascript/dragScroller.js?'+(new Date).getTime();s.charset='UTF-8';d.body.appendChild(s);})(document) 上記のコードをアドレスバーに貼り付けて実行すると、そのページがマウスのドラッグでスクロールできるようになります。 ※IEではこのはてなダイアリーを含め、一部のサイトで動作しません。とは言え今時のサイトならほとんど動きます。詳細後述。 ブラウザ対応状況（うちのPCで確認したもの） 問題無く動作するブラウザ Firefo
できたよー javascript:(function(d,s){s=d.createElement('script');s.type='text/javascript';s.src='http://www.rr.iij4u.or.jp/~kazumix/d/javascript/unusable.js?'+(new Date).getTime();s.charset='UTF-8';d.body.appendChild(s);})(document) 上記のコードをアドレスバーに貼り付けて実行すると、そのページが上下左右繋がった空間になり、スクロールバーで扱えなくなります。代わりにマウスカーソルでグリグリ動かせます。 ソース unusable.js 関連エントリー（ネタスクリプト） ものすごい勢いで横スクロールさせるJavaScript - KAZUMiX memo HTMLの暴走 (me
BannerSlide - スライドショウーバナーFlash簡単ジェネレーター シンプルなスライドショウーFlash作成ツールです。作成したファイルは埋め込みサンプルHTMLと共にまとめてZIPでダウンロードできます。 仕組み 「さくせい！」クリック後、サーバーサイドで画像を指定サイズにリサイズし、Flash側が設定ファイルとして読みこむXMLファイルを出力しています。 このXMLファイルは自由に編集できますので、後からこのファイルを編集するだけで画像の差し替えやリンク先の設定変更もできます。 画像のリサイズについて 「きほん！」で設定した縦横幅より大きい、または小さい場合にリサイズします。同じだった場合は指定された画像がそのまま使われます。 PNGの透過情報などはリサイズ時に失われますので、透過情報を生かしたい場合は事前にサイズを調整しておく必要があります。 ダウンロードページについて
以前ブックマークレットとして作った「HTMLの暴走」を使ったお遊び。*1 指定ページを暴走させてみるテスト 上記ページのフォームで指定したページに演出を発生させます。 元々のブックマークレットはそのページに移動しての実行ですが、こちらは下記のように対象ページを引数にしたリンクで発動させることが可能です。 http://1st-impact.jp/KAZUMiX/d/meltdowntest/?target=http://www.asahi.com/ target=以下に対象のURLを指定します。 *1:PHP Simple HTML DOM Parser を眺めてて思いついたネタです
javascript:(function(d,s){s=d.createElement('script');s.type='text/javascript';s.src='http://www.rr.iij4u.or.jp/~kazumix/d/javascript/loopscroll.js?'+(new Date).getTime();s.charset='UTF-8';d.body.appendChild(s);})(document) 上記のコードをアドレスバーに貼り付けて実行すると、そのページがものすごい勢いで横スクロールします。（止まりません） ソース loopscroll.js 関連エントリー（ネタスクリプト） HTMLの暴走 (meltdown3) - KAZUMiX memo 関連エントリー（実用スクリプト） 公開！「BannerSlide - スライドショウーバナーFl
MapChipX動作サンプルその1 ムービーをソースにしたマップチップ1つだけで、マップも1マスにした例。 MapChipX動作サンプルその2 その1のアレンジ。一つのソースムービーに対して複数のチップを作りマップを構成。各チップの更新タイミングをずらし、表示座標もシフトさせています。 MapChipX動作サンプルその3 普通に静止画を利用。クラブイベントLINEARのフライヤーを敷き詰めたマップ。LINEARのVJソースではおなじみですね。もともとこのVJソースを汎用化したのが今回のライブラリです。 ソースコードのダウンロードと使い方 MapChipX - Spark project! 上記ページにサンプルを含めたソースコードと解説を用意しました。
少し気になるところがあったので修正しました。 クロスフェードするロールオーバー処理をお手軽に実装するJavaScript - KAZUMiX memo 修正内容 ブラウザの「戻る」でフェード状態が残らないように修正 リンク画像に制限していた対象を全画像に修正 元々メニュー用として作ったものですが、それとは全然関係ない使い方もできます。↓
「HTMLの暴走(meltdown3)」における、Flash(ActionScript 3.0)側の解説です。 Flash側は次の様な流れになっています。 iframeや埋め込みFlashなど、動かせなかったり綺麗に動かそうとすると面倒な要素をJavaScriptから取得 上記要素がある場合、JavaScriptにその要素を非表示にするように指示すると同時にその位置にノイズのアニメーションを設置し、フェードアウトのアニメーションを開始させる 初音ミクなど、事前に用意した画像からランダムに画像を選択 選択された画像のピクセル数を計算（完全に透過の部分は除外） アニメーション対象のHTML要素数をJavaScriptから取得 画像化に必要なピクセル数とアニメーション対象要素数を比較し、画像化に必要な要素数に達していた場合は画像化演出に分岐 画像化演出の場合 画像化に不要な余り要素をまず画面外に
先日の「HTMLの暴走(meltdown3)」においてJavaScript側で使った技の解説です。 通常JavaScriptで操作可能なHTMLの対象はタグ付けされた要素です。テキストであればPタグなどなんらかのタグで囲われた一連の文字列が対象になります。にもかかわらず「HTMLの暴走」では1文字ずつ操作しています。 どうやっているのか？ 一文字ずつタグで囲ってるんです。実は。 例えば次の様に表示されている部分があったとします。 これを一文字ずつタグで囲った場合の状態を分かりやすく赤枠を付けると次の様になります。 こんな感じで一文字ずつタグ付けし、それぞれのタグの座標を計算して対応しているのです。 実際に使ったタグはSPANなどではなく、KZMというオレオレタグです。一般的なタグはデフォルトスタイルやCSSの影響がありえるため、適当なタグを作って対応しています。 HTML(XHTML)の定
javascript:(function(d,s){s=d.createElement('script');s.type='text/javascript';s.src='http://www.rr.iij4u.or.jp/~kazumix/d/javascript/meltdown3.js?'+(new Date).getTime();s.charset='UTF-8';s.id='KM3';d.body.appendChild(s);})(document) 上記のコードをアドレスバーに貼り付けて実行すると、そのページが暴走を開始します。 ページによってはアニメーションが始まるまでちょっと待たされることがあるかもしれません。 色んなページで遊んでみてください。 アドレスバー貼り付けではなく、リンク動作の実験版 (実験)ブックマークレットをリンク先のページで発動させてみる - KAZUM
地味に人気があるっぽいscrollsmoothly.jsを更新しました。使い方などは以下の元エントリーで確認できます。使い方自体は変わっていません。 こだわりのページ内リンクスムーズスクロール scrollsmoothly.js - KAZUMiX memo 更新内容 リンク先がページの先頭になることを前提としていたスクロール量の計算方法を変更。ページの終端付近のリンク先へのスクロールもスムーズになりました。 具体的には、次のサンプルのようにリンク先が最大スクロール先の描画領域の内側にある場合にスムーズではなかった問題を修正しました。 こだわりのページ内リンクスムーズスクロール scrollsmoothly.js 動作サンプル2（スクロール先が中途半端版）
例えば「廃墟探索記:ハムスター速報 ２ろぐ」の廃墟画像全部保存したい！でも一つ一つ保存するのは面倒！リンク先の画像をまとめて保存できればいいのに！ そんなあななに！*1 ダウンロード - KAZUMiX ImageDownloader v1.20 (AIR/65KB) 更新履歴(2009/01/05) Adobe AIR用に開発したアプリです。Flashの再生にFlashプラグインが必要なようにAIRの環境が必要です。AIRがある場合は上記ファイルをダウンロードして開くだけでインストールできます。AIRが無くてインストールできない場合は以下からダウンロードできます。 Adobe - Adobe AIR 今回のアプリはWindowsでもMacでも動くと思います。 使い方例 インストール後に作られた起動アイコンからImageDownloaderを起動します。 最初の例に出した廃墟画像の場合は次
今度は崩壊終了後に逆再生して元に戻ります。 javascript:(function(d,s){s=d.createElement('script');s.type='text/javascript';s.src='http://www.rr.iij4u.or.jp/~kazumix/d/javascript/meltdown2.js?'+(new Date).getTime();s.charset='UTF-8';d.body.appendChild(s);})(document) これを崩壊させたいページのアドレスバーに貼り付けて実行すると、そのページが崩壊します。その後、逆再生して元に戻ります。 要素がたくさんあるページで実行すると面白いと思います。Yahoo! JAPANとか。 本体ソース meltdown2.js 前作からの改良点 逆再生します 大幅にパフォーマンスアップ。今回は
ワリオランドシェイクみたいに HTML が崩壊するブックマークレット（とそのソースコード） - てっく煮ブログ 跡地 Flashでページ全体を覆うという発想は無かった！面白い！ JavaScript + Flash という点では同じですが、Flash でページ全体を覆うのではなく、必要な部分にだけに Flash を重ねてページ内の画像を心霊写真のようにするというシロモノを作ったので紹介します。 次の文字列をコピーしてアドレスバーに突っ込むと、ページ内の画像にメグミが！ javascript:(function(){var d=document;var s=d.createElement('script');s.type='text/javascript';var date = new Date();s.src='http://www.foxj.jp/shutter/blogparts/sh
Firefoxのアドレスバーが高性能なおかげでブックマークをあまり使わなくなっていたのだけど、Ubiquityのおかげでそのアドレスバーを使う頻度も下がりそうです。 設定例 cmd_の後がコマンドであとはもう見れば分かるかと思います。 // livedoor Readerを開く function cmd_lr() { Utils.openUrlInBrowser('http://reader.livedoor.com/reader/'); } // Gmailを開く function cmd_gm() { Utils.openUrlInBrowser('https://mail.google.com/mail/'); } // はてブを開く function cmd_hb() { Utils.openUrlInBrowser('http://b.hatena.ne.jp/'); } //
映画「ハプニング」ブログパーツ・プレビュー 映画「ハプニング」オフィシャルサイト 映画「ハプニング」ブログパーツ 今回ブログ経由でお仕事の依頼が来た初めてのパターン。書いてて良かったはてなダイアリー！と言うわけでFlashとJavaScriptの実装を担当したオレが軽く解説するよ！ 設置方法 上記ブログパーツのページにあるようにパーツを設置したいところに次のタグを埋め込めばオッケーです。 <script type="text/javascript" src="http://www.foxj.jp/happening/blogparts/happeningBlogParts.js" ></script> あらゆるページで「ハプニング」を発生させたい！ 残念ながらここはてなダイアリーは使えるブログパーツが限られていて今回のものを設置することはできません。そのようなページでも次の方法で体験するこ
「ページ内リンク スムーズスクロール」でググればいくらでも出てくるシロモノだけど、自分の要望をすべて満たすものが無かったので作ってみた。 こだわりのページ内リンクスムーズスクロール scrollsmoothly.js 動作サンプル 以下のソースコードをサンプルページのようにhead内で読み込むだけでOK。 ソースコード(Javascript) scrollsmoothly.js 読み込み例 <script type="text/javascript" src="scrollsmoothly.js"></script> 特徴 縦横斜めにスクロール可能 スクロール中にもリンクをクリック可能 別のページからのリンクでも指定の場所までスムーズスクロールします MIT License 動作確認ブラウザ IE6, IE7 Firefox 2,3 Opera 9.27 Safari 3.1 関連エントリ
以前アップしたエントリー「CSSをURIのクエリーで切り替えるJavaScript」のスクリプトを更新しました。jQuery 無しで単体で動作するようにし、その他バグになりかねない部分を修正ました。 動作サンプル CSSをURIのクエリーで切り替えるJavaScript 他、動作サンプル ソースコード(JavaScript) switchCss.js 解説 CSSをURIのクエリーで切り替えるJavaScript - KAZUMiX memo このスクリプトは印刷用CSSを適用したページを別ウィンドウで開きたいといった場合に特に便利です。media タイプで振り分けた場合は、印刷プレビューでしか確認できない上に、PC上で見たままを印刷したいニーズを満たすこともできません。このスクリプトを使えば、別途ページを用意することなく対応できるというわけです。
デザインをリニューアルしました。 今回のデザインを制作するに当たり、強く意識したのは次の点。 1カラム 水平区切り うちのネコ テクノ オレ専用（公開デザインにすることを考慮しない） 頻繁に利用するポータルサイト等なら2カラム、3カラムでもいい。スクロールせずに目的のリンクをクリックできることが利便性になるから。でもブログの場合はどうかというと、そもそもそのサイトが目的で閲覧しに来ている、つまり本文を読みにきているんですよね。そこから次のサイトへと行くことが目的のポータルサイトとは違う。 そこで1カラムです。 上下の視線移動のみで閲覧できるのはかなり快適なんじゃないかと思って作ってみたら、実際かなりいい感じだ。ストレスを感じない。左右のカラムを気にしなくていい、スクロールすることで別のカラムの情報を逃す心配をしなくていいのが良いのかもしれない。 とは言え、2カラム、3カラムの利便性も捨てが
広告ブロック機能を理由にFirefoxを使わないよう呼びかけるキャンペーンが登場 | 秋元@サイボウズラボ・プログラマー・ブログ Firefoxユーザをブロックするキャンペーン | スラド IT ↓例えば広告がうっとうしいこのページ ↓こんな感じで指定すると（ページ内の何も無いところで右クリック→「コンテンツのブロック」→ブロック対象をクリック） ↓こうなります mixiのログイン画面の広告なんかも簡単にブロックできますよ。 Opera ブラウザ | 高速、安全、スマートなウェブブラウザ | Opera Opera Browser | Faster, Safer, Smarter Web Browser | Opera
ページ内のあらゆる要素をマウスでぐりぐりとドラッグできるようにする JavaScript コードです。 javascript:(function(){var s=document.createElement("script");s.charset="UTF-8";var da=new Date();s.src="http://www.rr.iij4u.or.jp/~kazumix/d/javascript/fukuwarai.js?"+da.getTime(); document.body.appendChild(s)})(); これを適当なページのアドレスバーに貼り付けて実行すると、そのページのあらゆる要素がドラッグ可能になります（と言っても Flash などは無理です）。リロードすれば元に戻ります。普段見慣れたページを、自分の操作でバラバラにできるのはなかなか新鮮な体験です。 使いまわ
2008-03-06 追記: jQuery無しで動くように修正しました あるといいかもと思って試しに作ってみたら、IE*1の印刷対応に端を発する問題でえらい苦労しました。苦労話は後回しにするとして、次が動作サンプルページとサンプルコードです。（要jQuery。要素の取得で楽してコードを短くするために使っています） CSSをクエリーで切り替えるJavaScript 動作サンプルページ (function(){ //クエリーにstylesheetがあれば切り替え関数呼び出し if(location.search.match(/\bstylesheet=([\w]+)/)){ var titleValue = RegExp.$1; changeStyle(titleValue); } // CSS切り替え関数 // 引数titleValueと一致したtitle属性を持つlink要素を有効にする
#ff0000">2009年6月3日更新:ブラウザの「戻る」でフェード状態が残らないように修正。またリンクになっていなくてもフェードの対象にするようにした。 マウスカーソルが画像の上に重なったとき、その画像ファイル名の最後が _rollout となっている場合、その _rollout 画像を _rollover にフェードさせるJavaScriptです。 クロスフェードするロールオーバー処理 動作サンプル サンプルのロールオーバー用の画像は次のようなファイル名になっています。 menu01_rollout.png 最初のメニューの標準画像 menu01_rollover.png 最初のメニューのロールオーバー画像 menu02_rollout.png 2番目のメニューの標準画像 menu02_rollover.png 2番目のメニューのロールオーバー画像 menu03_rollout.pn
#ff0000">2008年12月29日追記:逆再生する新バージョン「HTML崩壊Reverse! meltdown2.js」をアップ #ff0000">2009年4月21日追記:さらに進化したバージョン「HTMLの暴走(meltdown3)」をアップ まずは軽いページでお試しください。例えば Google とか。*1 javascript:(function(){var s=document.createElement("script");s.charset="UTF-8";var da=new Date();s.src="http://www.rr.iij4u.or.jp/~kazumix/d/javascript/meltdown/meltdown.js?"+da.getTime(); document.body.appendChild(s)})(); これを適当なページのアドレスバ
公式サイトのFAQやリファレンスには、子swfがストリームを利用している場合のunload方法が紹介されています。 Loader インスタンスを unload しても NetStream が閉じられない(support.adobe.co.jp) が、私の場合はストリームを利用していなくてもunloadでswfが破棄されず、メモリリークが発生する現象が発生。1週間ほど苦しんだ末にやっと以下の方法で解決できました。 unload時に、子swf内のイベントリスナーを全てremoveする unload時に、子swf内のクラス変数の中で、オブジェクトを参照しているもの全てにnullを代入する この対処をしないと破棄されないswfの正確な条件はまだ良く分かりませんが、とりあえず手元にあるやつだとPapervision3Dを利用しているものにこの対処が必要でした。 Loaderオブジェクトへの参照がある
Flash 使ってないのに Flash 使ってるような Web ページを見るたびに、「あーオレもやってみてー」と思っていた昨今、じゃあちゃんと JavaScript と DOM を覚えてみよう！ということで勉強も兼ねて作ってみた第一弾です。 マウスに反応するバックグラウンド サンプルページ フェードアウトの処理は自分で作るのが面倒だったので、そこはjQueryを利用しています。 実際に作ってみて感じたのは、JavaScriptは思った以上にActionScript（特にAS1.0）に似ているということ。DOMもFlashのディスプレイリストと似ていて、楽しく覚えられました。（ECMAScriptだから当然とは言え） そして、今まで難しいと思っていた様々な表現が、意外と簡単に実装できることが分かり、なんかすごくいい武器を手に入れた気分です。 インスパイア元 PCゲーム BALDR FORCE
body要素への適用を例にします。 Opera 9のみに適用 セレクタの先頭に;;を付加すると、Opera 9のみに適用されます。ただしCSSとしてはinvalidです。 ;;body{}パーサのバグと思われるので、そのうち直される気がします。Opera 9.02ではまだ使えてます。 また付加するものは;;以外に@;や!;でも適用されます。「何らかの記号+;」となるようです。ただし、すべての記号が使えるわけではありません。 IEとOpera以外のモダンブラウザ(Firefox,Safariなど)に適用 IEとOperaが対応していない:root疑似セレクタを使います。 :root body{}こちらはvalidのはず。*1 こんなの使う必要あるの？ 普通はありません。Operaに関してはhttp://www.studionh.net/fplusr/stylesheet/ie7cssoper
次のページ
このページを最初にブックマークしてみませんか？
『KAZUMiX memo』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
