手とり足とり教えるスレ part3

あの花のエンディングが好きなのでhtml5を駆使して再現したいのです。
どなたかご協力お願いします。

エンディングはこれです↓

あの日見た花の名前を僕達はまだ知らない。 ED
http://vlog.xuite.net/play/cEdmRUxCLTM1ODI4MzQubXA0
とりえず40秒くらいからのシーンを再現したいです。

やりたい事

クリックで開始
↓
音楽とともに花びらが回転しながら落下
↓
花びらはドラッグ可能。
↓
40秒後、ズームアウト。花びらが逆回転し上昇する。
↓
終了

検索したらちょうどぴったりのスクリプトがあって
花びらのランダム落下が再現できました。
でもFirefoxで動かないので対応させたいです。

画像ゆら落下
http://www.aa.alpha-net.ne.jp/wahahaha/h_macromedia/javascript.html

花びらはcanvasで表示したいのですが難しいので画像を使います。

画像のドラッグは下記でできました。

画像をドラッグしてみよう！
http://una.soragoto.net/tips/1.html

でもこれもFirefoxに対応していません・・・・

この２つを合わせて画像を表示したところだいぶそれっぽくなりました。
http://zz.x0.com/anohana/test1.html

※Firefox非対応

現在できないこと

1.花びらをドラッグすると花びらが消える判定がおかしくなる
2.画像の回転
3.クリックで開始
4.Firefoxで花びらの落下・ドラッグ
5.キャラクターを前面に表示する
6.花びらをグレースケールにする
7.ズームアウト
8.花びらの逆回転・上昇

1個ずつクリアしていきたいです。

花びらをずっとドラッグしてて分かったんだけど
消えるんじゃなくて上に移動してるのか

HTML5.Audio - JavaScriptからMP3再生ライブラリ（HTML5風）
http://kawa.at.webry.info/200905/article_7.html

これで音楽再生を付けました。
http://zz.x0.com/anohana/test2.html

cssで花びらをグレースケールにするより最初から画像を
用意して切り替えたほうが簡単かなって思ったんだけど
rakka.js内の画像が切り替えられない

JavaScriptによる画像切り替え
http://weboook.blog22.fc2.com/blog-entry-6.html

副作用でキャラクターを前面に配置できた。
でもdrag.js使わないといけないからキャラが動いてしまう・・・
http://zz.x0.com/anohana/test3.html

あれ？IEだと前面になってない。

z-indexで全面表示になるのか！

>>193
2000年4月作成のネスケ4対応プログラムでHTML5を駆使・・・だと・・・？

あとは任せた
ttp://www1.axfc.net/uploader/Sc/so/253918.zip
（パスワードは、Aで始まってる最初の発言のID）

>>205
うわー、すばらしい！
Fireofox対応、画像切り替え、花びら上昇。完璧です！
ありがとうございますm(＿＿)m

CSS 3のアニメーション機能「Transitions」
http://builder.japan.zdnet.com/html-css/sp_css-firefox-safari/20401467/2/

画像の回転は↑を使おうと思ったのですがIEもFirefoxも対応してないので
png連続再生を使わせていだきます。

めんまフォントなんてあるんですね。
ウェブfontで表示できるのかな？再配布禁止だけどｺｯｿﾘ･･･
画像にして表示したほうが早いですね。
html5使わないなぁ

ズームアウトはBubbleupで表現できないかなぁって思ってました。

マウスオーバーを気持ち良くするjQueryプラグイン「Bubbleup」
http://blog.verygoodtown.com/2010/04/mouseover-animation-jquery-plugin-bubbleup/
http://goo.gl/IHEX8

出来ないかもしれないけど頑張ります。

音の再生はaudioタグを使えばいいんだけどChromeだと？プチプチノイズが入るので
>>201のライブラリを使っています。
なのでFlashに対応していないiPhoneでは音楽の再生ができません。

iPod touchで一応表示できてた！
初代だから画像落下が重すぎて2fpsくらいだけど。
iPadならいい感じで再生できるのかな？
どうせならiPhoneでも音楽再生できるようにしたいな
http://zz.x0.com/anohana/img/ipod.jpg

↓のブックマークレットのゲームをあの花ED再現ページで実行すると花をシューティング出来ます。
Kick Ass - Destroy the web
http://d.hatena.ne.jp/nakamura001/20110526/1306429834

画像落下と相まってめっちぁゲームになっとる！
おもろいｗ

http://atto.s2.pf-x.net/~atto/cgi-bin/up/img/4517.htm

canvasの入門がてら葉っぱ落下だけやってみようとか思って書いたら
つい>>199の要望全部対応してしまったお。
試行錯誤しながら書いたまんまなのでソース汚いけど気にしないお。

mp3はChromeとSafariしか再生できないみたいだが
oggも用意すればFirefoxとかでも動くぞ。
音楽を鳴らせないと色がつかないぞ。

>>212
1行たりとも元のコードが残ってないとか、気合入りすぎにもほどがある。
document.allの排除や、ちまちま画像変換やった俺の立場がないだろｗ

設置場所と権限の関係なのか、Safariは動かない、Operaは延々と落ち続ける、
Firefoxは静かに動き、まともに動くのはChromeのみという状態だったが、
見たことないくらいMathオブジェクト多用してるし、とにかくクオリティ
高すぎてびびった。

>>213
スマンヌ。2-3日前から既に書き始めていたのだ。
Playボタンは元のコードを流用した。
数学もどきしてるのはヒトデの描画だけで他は全部乱数だお

>>212
うぉー！なんすかこれｗｗｗ
僕の思い描いていた事のすべてを実現してます！
再現度120％です。212さんマジかっけーんすよ！！
ズームアウトのシーンが秀逸！

画像だと1500個も表示できないので完全再現するには
canvasは必要不可欠ですね。
でもやっぱりまだブラウザがhtml5に最適化されてないのが分かりますね。

これ凄い綺麗だなぁ。永延とリピートしてます。
下のグラデーションも素晴らしい！

このED再現の真の目的はズームアウトのシーンが見たかったからなんです。
すばらしい再現をしていただきありがとうございましたm（＿）m
まさかここまで完璧に実現できるモノとは思いませんでした。

これあの花好きの人みんなに見せてあげたいですが
webkitブラウザ使ってる人しかちゃんと見れないのが残念ですね。
逆にChromeの布教に利用できますがｗ
webkit以外で表示したらめんまちゃんに怒られるようにすればいいかな？

htmlファイル1枚でここまで出来るのか！
夢が広がりんぐｗｗ

もうほとんど完成しちゃってますが
html版とhtml5版として改良していきたいです！
コードを書けない僕が改良するなんておこがましいですが・・・
メンマ大地に立つ！とかテロップも再現できるかなぁ。
>>212さんならキャラが下から上にスライドするシーンとか完全再現もできそうですね。

html版は全ブラウザ対応をさせたいです。

わがままですがあまり完全に再現するとムービーを再生してるみたいで
凄さが分からないんですよね。
スゴすぎて凄さが伝わらないという皮肉な結果に・・・
あとFlashならなんでもできるからFlashだと思われのもマズイです。

よく見たら本物はグラデかかってないのか。
こいつオリジナルを超えてやがるっ!

ズームアウトのシーンはcanvas全体を縮小してるのかな？
そういう事もできるのか。
画像を個別に縮小したら不自然になるよねぇ。

これの©AKSのマーク消せる人いますか？
http://loda.jp/mariyagi_uploader/?id=72.jpg
よろしくお願いします。

http://loda.jp/mariyagi_uploader/?id=207

canvas使うともう何でもありって感じですね。

画像のスライドはwebkit animationで出来るかなーって考えてました。
http://komachu.sakura.ne.jp/webkit/animation.html

それよりこっちの左右移動スライドショーの方がいいかな
http://miyakekobo.fc2web.com/cp_dx/temp_522.html

これがフルスクラッチっていうやつですね。
まさにジョバンニ状態。212が一晩でうんたん(云々)

きょうのメンマの声をrtmpdumpでキャプチャしてみようとしたけど
できなかった＼(^o^)／
http://www.anohana.jp/menma/index.html
別にいいけど・・・

>>218
mp3と同じパスにoggファイルも置けば一応FirefoxとOperaも動いたお。
最新バージョンしか試してないけどね！
最初は>>201を使って全部mp3で済まそうとしたんだけど
そのスクリプトに直リンクしても動作しなかったのだ

>>229
すいません、Opera入れてなかったので確認してませんでした。
ちょっと重いですがちゃんと再生できました！
葉っぱを1000個くらいにするとバッチリです(*^ーﾟ)b
Firefoxでも落下はカクカクなんですが反転後はきれいに動きました。

201のスクリプトはWebからじゃないと実行できないみたいです。
audioタグでも問題なく再生されてるのでローカルでも実行できる
こちらの方がいいですね。

>>205さんのおかげでなんとかクリックで花びら上昇ができました！！
感謝です！
変な処理をしていますが気にしないですください(ぉ
再生時間を参照してないので一度データをキャッシュしないと音がズレます・・・

http://zz.x0.com/anohana/test4.html

めんまフォントはttfをwoffコンバータで変換したので
IE以外のブラウザだったらインストールしてなくても表示できます！
ひらがな・カタカナだけのフォントだからファイルサイズが
約100kしかないのでちょうど(・∀・)ｲｲ!!

女の子は地に足が付いていなかったのでウィンドウ下部に固定ｗ

なんか処理が変だったのでこっそり修正。
音楽を再生→停止→再生で2度読みにしたからズレは軽減されたかな？

あの花のEDも好きだけど最近はピングドラムの話題のシーンがお気に入り。
やっぱり幾原監督の演出はええわ。

ピングドラムのあのシーン
http://www.youtube.com/watch?v=J8gDRe9rf8Y
ウテナ決闘シーン
http://www.youtube.com/watch?v=vE_MV4ksBLY#t=16m30s

あーこれ凄いスムーズに拡縮できる。使えないかなぁ。

スライダーでイメージを拡大・縮小する
http://jsajax.com/Articles/jQueryResizeImage/1132

花びらをもっとゆっくり回したいんだけどカクカクになっちゃう。
12枚に増やしてもダメだった・・・
1枚絵をコードで回転させるしかないかな。
svgの回転ってどうなんだろう？

237の使ってみたけどカオスな状態に・・・
http://zz.x0.com/anohana/test4-2.html

うまく使えばズームアウトのシーンに利用できそうだけど
jsの中身が意味不明すぐる。
最初jQeeryのバージョンが違ってて動かなかった。

キャベツの1/2サイズが120円だった。
この前50円だったのに！！超絶インフレ。

>>240
JavaScriptと関係ない雑談するなら、ブログがTwitterでやってくれ。
こんな過疎スレより反応いいはずだし、作業も捗るぞ。

ttp://natbat.net/code/clientside/css/snowflakes/

>>241
すごい！これCSSだけで表示してるのか！
ローカルに保存してもちゃんと動いてる。
これでcanvas版とcss版とpng版が作れる！

作れないけど・・・

ごめんね。誰も見てないと思って独り言呟いちゃった(>_<)

CSSの桜、発見。
http://walklikeabird.blogspot.com/2011/04/css.html

こっちの雪はjQuery使ってるから軟弱(ぉ
http://www.openspc2.org/reibun/javascript2/Library/Snowfall/0004/index.html

いいこと思いついた。、反転時のストップを利用してDIOの

ザ・ワールドッ！！！そして時は動き出す

を再現したい。

Canvas版でめんま大地に立つができました〜。
http://zz.x0.com/anohana/canvas.html
画像28枚使ってます。

せっかくエレガントなコードを書いていただいたのに
こねくり回してしまってなんだか申し訳ないわ(´・ω・｀)

まぶたを閉じるシーンに5枚も用意したのに
細かすぎて伝わらない選手権状態に・・・

あ、4枚だった

立ち上がるシーンはズームアウト後だから画像が小さくて困った。
背景の色が移り込んだり色が薄くて幽霊みたいになったりで（幽霊だけど！）
めんまだけ拡大したんだけど130％にしたらちょうど元のサイズと同じになった。
実寸だと粗くて違和感あるけど結局使われるのは縮小後だから大丈夫。

ｃanvas版はもう僕にはいじれそうにないので一先ず終了します。
png版はもう少し改良できるかな？今のままでも味があって良いけど。

IE9では動くんだろうか？

怖話
http://kowabana.jp/

ここおもしろい。
audioタグが貼ってあるけどスマホ用だからか
コントロールもautoplayもないから再生されない。

SEO対策に使っても削除しないブログです。ご利用は無料です。
http://www.c-recipe.biz/

>>252
ttp://zz.x0.com/anohana/canvas.html
IE 9.0.1（Internet Explorer 9.0.8112.16421）

SCRIPT438:
オブジェクトは 'getContext' プロパティまたはメソッドをサポートしていません。
canvas.html, 行 94 文字2

>>255
あ〜、動かないんですか・・・っと思って調べてみると一応サポートはしてるみたいですね。

IE9でgetContextが値を返さない時の対処法
http://kaniku.seesaa.net/article/202321674.html

謎の一行を追加してみました。
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>

で、近くのケーズデンキまで自転車で行って動作確認してきましたｗ
ちゃんと動きました！

でもIEの為に、こんな気持ち悪いタグを追加しないといけないなんてやだなぁ。
エラーを出すぐらいならブラウザ側で処理すればいいのに。

>>257
おいおい、IE9に「古い解釈で表示しないといけないページだ」と思わせる
古臭いHTML文書にしているのはどこのどいつだｗ

HTML5の機能使うなら、ページの構造の方もHTML5仕様に合わせとけ。
ttp://html5.validator.nu/
ttp://validator.w3.org/#validate_by_uri+with_options

>>258
いろいろエラー出ますね。よく分からないので放置しますがw
厳密な記述をしろというのも分かりますが、他のブラウザで問題なく
表示できる事が何でIEでは出来ないの？と思うわけです。

ウェブ上にはお行儀の悪いhtmlが無数に存在するわけで
各ブラウザはそれに合わせてくれているのにIEだけ俺に合わせろと言うのです。
負の遺産があるからなのかもしれませんが、もっと柔軟な対応をして欲しいです。

>古臭いHTML文書にしているのはどこのどいつだｗ
犯人は>>212です(>_<)

ちなみにiPad2も置いてあったので
試してみたら重いけど動きました。

間違えてタグ閉め忘れたら文字が降ってきたので
Webフォント版にしてみました。
http://zz.x0.com/anohana/test5.html

FontCreatorを使ってめんまフォントにお花を追加してます。
Webフォントに対応していないブラウザでは星が降ってきます。

角度を変えた文字を登録すれば回転もできるかな・・・
IEでは文字を降らすと固まって動かなくなります。

あと変更した点は目を閉じるようになりました！
UserAgentにMobileが入っている場合はお花の数が30個になります。
アップル端末にはMobileが入ってるみたいだけどAndoroidはどうだろう？
Canvas版にもモバイル判定を入れました。

文字回転させようとしたらマトリックスっぽくなった。
かっこいい・・・
http://zz.x0.com/anohana/test5-1.html

算数が分からない_( (_´Д`)_

回転できました。A〜M文字に花を割り当ててます。
http://zz.x0.com/anohana/test5-2.html

はぁ、簡単なこと1つでも実現するのにものすごく時間がかかる

これ右から左に文字を流したらニコっぽくなるよね。
作ってる人いるけど。

はてブニコす
http://furyu.tea-nifty.com/annex/2008/02/greasemonkeysea_8cd8.html

めんまスタンドアップできました。
http://zz.x0.com/anohana/test6.html

あと「花びらをドラッグすると花びらが消える判定がおかしくなる」にも対応。
無理やりなので出現判定がおかしくなるけど。

クレジット表示を追加しました。
http://zz.x0.com/anohana/test7.html
めんまの画像切り替えるのと殆ど一緒だから思ったより簡単にできた。
すごいエンディングっぽい！

めんまは幽霊なので若干透過させましたｗ

ひと通り自分にできそうな修正をしたので一区切りつけます。
すいません、ズームアウトできませんでしたm(＿)m

png版
http://zz.x0.com/anohana/png.html
Webフォント版
http://zz.x0.com/anohana/font.html
Canvas版
http://zz.x0.com/anohana/canvas.html

>>205さん、>>212さん。ご協力ありがとうございました。
どこかに晒してこようかと思います。

Webフォント版に歌詞を付けました。

CSS3のtext-shadowでWindowsでもなめらかフォントを。
http://d.hatena.ne.jp/kk6/20101128/1290931461
text-shadow: #999 0.1px 0.1px 1px;

これを追加したらすごい文字が綺麗になった！

一昨日、あの花本スレとはてな匿名ダイアリーに投下したんだけど反応が薄かった・・・
「すごさがよくわからんｗ」とか言われて(´・ω・｀)ｼｮﾎﾞｰﾝ
でも昨日辺りに2chまとめサイトが取り上げてくれててTwitterにも拡散されて
1日で3,000ヒットした＼(^o^)／

かくれオタのブログ
http://zeark969.blog38.fc2.com/blog-entry-2856.html

中国と韓国にも拡散確認
http://twitter.com/#!/_seibin/status/102529597773590528
http://tieba.baidu.com/p/1175133866

歌詞をカラオケ風にしました。
http://zz.x0.com/anohana/test8.html

うわっ、検索したらあの花ED再現してる人いっぱい出てきたｗ

あの花ED風のエフェクトを作った 2011-07-18
http://d.hatena.ne.jp/ufssf/20110718
>CSS3のTransformを使用して画像を回転させる

あー、これやりたかったんですよ！

あの花EDのあのシーンをActionScriptで再現
http://www.youtube.com/watch?v=PcAtk_RINyY

【MMD】あの花のEDっぽいエフェクト作ってみた【MME】
http://www.youtube.com/watch?v=5ngkk1Zg7QQ

particular応用_あの花ED
http://www.youtube.com/watch?v=S0ljQB2jNrs

【osu!】secret base ~君がくれたもの~
http://www.youtube.com/watch?v=jr8ihoAXngI

あの花ED真似してみたがあまり再現できなかった
http://www.nicovideo.jp/watch/sm14927025

再現方法は十人十色っすな。

XHTML1.0とHTML5の違いをスタバのページで紹介
http://ascii.jp/elem/000/000/626/626754/#ixzz1VwDOp2UD

language="JavaScript"って要らなくなるのか。
楽でいいなぁ。見栄えも良い！

ページ内容全体のスケールを変化させる (Chrome、Safariのみ)
http://www.openspc2.org/reibun/javascript2/CSS/scale/0002/sample/index.html

translate3d -> scale
http://sample.minaco.net/javascript/android/sample4.html

誰か手とり足とり教えてくれぇ

nullpo.

nullpo nullpo nullpo nullpo nullpo 〜 age

>>285
まず服を脱ぎます。

創価死ね　
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね　
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね

http://taaaaaaaaake.lv9.org/

作りましたが何をすればいいでしょうか。

適当なスレがなかったのでここで。
あるブログで前職内情暴露の記事を書いてます。
（アメブロ、ライブドア）

会社はそれを知っており、この１年間でCMS（WP等）を使った
サイトを30程乱立させてきましたが、
ようやくその効果か会社名検索からライブドアのみ表示されなくなりました。

これに対抗するためには、どうすればよいですか。
また、ライブドアを再度表示させるためにはどうすればよいですか。

ちなみにアメブロは会社HPの次に表示される上位表示になっています。

Aiのデータ渡されてボタン作成しろっていわれて
マウスオーバーがどうのこうのいわれたけど
日本語が理解できません。
どうすればいいですか？

webと連動したアプリを作りたいんですがどういったスキルが必要になりますか？

突き詰めると最後は画像にたどり着く。
これも時代の流れかな。８文字２行のテキスト広告は
過去の遺物になってしまった・・・必要なときは社内で全員で考えて
メッセで候補を送ってたんだぜ。