X

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

■ このスレッドは過去ログ倉庫に格納されています
0206193
垢版 |
2011/07/11(月) 19:57:36.51ID:VT7XFx74
>>205
うわー、すばらしい！
Fireofox対応、画像切り替え、花びら上昇。完璧です！
ありがとうございますm(＿＿)m

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

画像の回転は↑を使おうと思ったのですがIEもFirefoxも対応してないので
png連続再生を使わせていだきます。
0207193
垢版 |
2011/07/11(月) 20:14:55.43ID:VT7XFx74
めんまフォントなんてあるんですね。
ウェブfontで表示できるのかな？再配布禁止だけどｺｯｿﾘ･･･
画像にして表示したほうが早いですね。
html5使わないなぁ
0209193
垢版 |
2011/07/11(月) 22:19:52.27ID:VT7XFx74
音の再生はaudioタグを使えばいいんだけどChromeだと？プチプチノイズが入るので
>>201のライブラリを使っています。
なのでFlashに対応していないiPhoneでは音楽の再生ができません。
0210193
垢版 |
2011/07/11(月) 22:25:04.93ID:VT7XFx74
iPod touchで一応表示できてた！
初代だから画像落下が重すぎて2fpsくらいだけど。
iPadならいい感じで再生できるのかな？
どうせならiPhoneでも音楽再生できるようにしたいな
http://zz.x0.com/anohana/img/ipod.jpg
0211193
垢版 |
2011/07/11(月) 22:49:04.14ID:VT7XFx74
↓のブックマークレットのゲームをあの花ED再現ページで実行すると花をシューティング出来ます。
Kick Ass - Destroy the web
http://d.hatena.ne.jp/nakamura001/20110526/1306429834

画像落下と相まってめっちぁゲームになっとる！
おもろいｗ
0212Name_Not_Found
垢版 |
2011/07/11(月) 23:04:46.69ID:???
http://atto.s2.pf-x.net/~atto/cgi-bin/up/img/4517.htm

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

mp3はChromeとSafariしか再生できないみたいだが
oggも用意すればFirefoxとかでも動くぞ。
音楽を鳴らせないと色がつかないぞ。
0213205
垢版 |
2011/07/11(月) 23:49:50.11ID:???
>>212
1行たりとも元のコードが残ってないとか、気合入りすぎにもほどがある。
document.allの排除や、ちまちま画像変換やった俺の立場がないだろｗ

設置場所と権限の関係なのか、Safariは動かない、Operaは延々と落ち続ける、
Firefoxは静かに動き、まともに動くのはChromeのみという状態だったが、
見たことないくらいMathオブジェクト多用してるし、とにかくクオリティ
高すぎてびびった。
0214Name_Not_Found
垢版 |
2011/07/12(火) 00:59:38.06ID:???
>>213
スマンヌ。2-3日前から既に書き始めていたのだ。
Playボタンは元のコードを流用した。
数学もどきしてるのはヒトデの描画だけで他は全部乱数だお
0215193
垢版 |
2011/07/12(火) 01:39:46.93ID:qu3XkZbr
>>212
うぉー！なんすかこれｗｗｗ
僕の思い描いていた事のすべてを実現してます！
再現度120％です。212さんマジかっけーんすよ！！
ズームアウトのシーンが秀逸！
0216193
垢版 |
2011/07/12(火) 01:52:18.34ID:qu3XkZbr
画像だと1500個も表示できないので完全再現するには
canvasは必要不可欠ですね。
でもやっぱりまだブラウザがhtml5に最適化されてないのが分かりますね。

これ凄い綺麗だなぁ。永延とリピートしてます。
下のグラデーションも素晴らしい！
0217193
垢版 |
2011/07/12(火) 01:58:58.81ID:qu3XkZbr
このED再現の真の目的はズームアウトのシーンが見たかったからなんです。
すばらしい再現をしていただきありがとうございましたm（＿）m
まさかここまで完璧に実現できるモノとは思いませんでした。
0218193
垢版 |
2011/07/12(火) 02:13:10.95ID:qu3XkZbr
これあの花好きの人みんなに見せてあげたいですが
webkitブラウザ使ってる人しかちゃんと見れないのが残念ですね。
逆にChromeの布教に利用できますがｗ
webkit以外で表示したらめんまちゃんに怒られるようにすればいいかな？
0219193
垢版 |
2011/07/12(火) 02:29:30.89ID:qu3XkZbr
htmlファイル1枚でここまで出来るのか！
夢が広がりんぐｗｗ
0220193
垢版 |
2011/07/12(火) 03:01:13.56ID:???
もうほとんど完成しちゃってますが
html版とhtml5版として改良していきたいです！
コードを書けない僕が改良するなんておこがましいですが・・・
メンマ大地に立つ！とかテロップも再現できるかなぁ。
>>212さんならキャラが下から上にスライドするシーンとか完全再現もできそうですね。
0221193
垢版 |
2011/07/12(火) 03:17:35.58ID:???
html版は全ブラウザ対応をさせたいです。

わがままですがあまり完全に再現するとムービーを再生してるみたいで
凄さが分からないんですよね。
スゴすぎて凄さが伝わらないという皮肉な結果に・・・
あとFlashならなんでもできるからFlashだと思われのもマズイです。
0222193
垢版 |
2011/07/12(火) 03:35:54.38ID:???
よく見たら本物はグラデかかってないのか。
こいつオリジナルを超えてやがるっ!
0223193
垢版 |
2011/07/12(火) 04:07:35.36ID:???
ズームアウトのシーンはcanvas全体を縮小してるのかな？
そういう事もできるのか。
画像を個別に縮小したら不自然になるよねぇ。
0227193
垢版 |
2011/07/12(火) 10:09:40.95ID:qu3XkZbr
これがフルスクラッチっていうやつですね。
まさにジョバンニ状態。212が一晩でうんたん(云々)
0228193
垢版 |
2011/07/12(火) 10:52:37.67ID:qu3XkZbr
きょうのメンマの声をrtmpdumpでキャプチャしてみようとしたけど
できなかった＼(^o^)／
http://www.anohana.jp/menma/index.html
別にいいけど・・・
0229Name_Not_Found
垢版 |
2011/07/12(火) 20:02:25.00ID:???
>>218
mp3と同じパスにoggファイルも置けば一応FirefoxとOperaも動いたお。
最新バージョンしか試してないけどね！
最初は>>201を使って全部mp3で済まそうとしたんだけど
そのスクリプトに直リンクしても動作しなかったのだ
0230193
垢版 |
2011/07/12(火) 21:22:04.50ID:qu3XkZbr
>>229
すいません、Opera入れてなかったので確認してませんでした。
ちょっと重いですがちゃんと再生できました！
葉っぱを1000個くらいにするとバッチリです(*^ーﾟ)b
Firefoxでも落下はカクカクなんですが反転後はきれいに動きました。
0231193
垢版 |
2011/07/12(火) 21:53:07.99ID:qu3XkZbr
201のスクリプトはWebからじゃないと実行できないみたいです。
audioタグでも問題なく再生されてるのでローカルでも実行できる
こちらの方がいいですね。
0232193
垢版 |
2011/07/13(水) 04:32:58.97ID:gRpXGe6N
>>205さんのおかげでなんとかクリックで花びら上昇ができました！！
感謝です！
変な処理をしていますが気にしないですください(ぉ
再生時間を参照してないので一度データをキャッシュしないと音がズレます・・・

http://zz.x0.com/anohana/test4.html
0233193
垢版 |
2011/07/13(水) 04:41:54.77ID:gRpXGe6N
めんまフォントはttfをwoffコンバータで変換したので
IE以外のブラウザだったらインストールしてなくても表示できます！
ひらがな・カタカナだけのフォントだからファイルサイズが
約100kしかないのでちょうど(・∀・)ｲｲ!!
0234193
垢版 |
2011/07/13(水) 05:37:46.41ID:gRpXGe6N
女の子は地に足が付いていなかったのでウィンドウ下部に固定ｗ
0235193
垢版 |
2011/07/13(水) 16:24:18.80ID:gRpXGe6N
なんか処理が変だったのでこっそり修正。
音楽を再生→停止→再生で2度読みにしたからズレは軽減されたかな？
0238193
垢版 |
2011/07/13(水) 18:01:42.38ID:???
花びらをもっとゆっくり回したいんだけどカクカクになっちゃう。
12枚に増やしてもダメだった・・・
1枚絵をコードで回転させるしかないかな。
svgの回転ってどうなんだろう？
0239193
垢版 |
2011/07/15(金) 12:13:49.85ID:???
237の使ってみたけどカオスな状態に・・・
http://zz.x0.com/anohana/test4-2.html

うまく使えばズームアウトのシーンに利用できそうだけど
jsの中身が意味不明すぐる。
最初jQeeryのバージョンが違ってて動かなかった。
0240193
垢版 |
2011/07/15(金) 12:20:54.06ID:???
キャベツの1/2サイズが120円だった。
この前50円だったのに！！超絶インフレ。
0241Name_Not_Found
垢版 |
2011/07/15(金) 16:43:00.13ID:???
>>240
JavaScriptと関係ない雑談するなら、ブログがTwitterでやってくれ。
こんな過疎スレより反応いいはずだし、作業も捗るぞ。

ttp://natbat.net/code/clientside/css/snowflakes/
0242193
垢版 |
2011/07/15(金) 20:34:50.91ID:???
>>241
すごい！これCSSだけで表示してるのか！
ローカルに保存してもちゃんと動いてる。
これでcanvas版とcss版とpng版が作れる！

作れないけど・・・
0243193
垢版 |
2011/07/15(金) 20:39:12.67ID:???
ごめんね。誰も見てないと思って独り言呟いちゃった(>_<)
0245193
垢版 |
2011/07/16(土) 14:47:29.63ID:???
いいこと思いついた。、反転時のストップを利用してDIOの

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

を再現したい。
0247193
垢版 |
2011/07/17(日) 05:27:55.59ID:???
せっかくエレガントなコードを書いていただいたのに
こねくり回してしまってなんだか申し訳ないわ(´・ω・｀)
0248193
垢版 |
2011/07/17(日) 05:32:24.58ID:???
まぶたを閉じるシーンに5枚も用意したのに
細かすぎて伝わらない選手権状態に・・・
0249193
垢版 |
2011/07/17(日) 05:34:49.52ID:???
あ、4枚だった
0250193
垢版 |
2011/07/17(日) 15:51:42.94ID:???
立ち上がるシーンはズームアウト後だから画像が小さくて困った。
背景の色が移り込んだり色が薄くて幽霊みたいになったりで（幽霊だけど！）
めんまだけ拡大したんだけど130％にしたらちょうど元のサイズと同じになった。
実寸だと粗くて違和感あるけど結局使われるのは縮小後だから大丈夫。
0251193
垢版 |
2011/07/17(日) 19:20:05.98ID:???
ｃanvas版はもう僕にはいじれそうにないので一先ず終了します。
png版はもう少し改良できるかな？今のままでも味があって良いけど。
0252193
垢版 |
2011/07/17(日) 21:49:47.44ID:???
IE9では動くんだろうか？
0253193
垢版 |
2011/07/18(月) 03:22:06.84ID:???
怖話
http://kowabana.jp/

ここおもしろい。
audioタグが貼ってあるけどスマホ用だからか
コントロールもautoplayもないから再生されない。
0254Name_Not_Found
垢版 |
2011/07/18(月) 14:54:55.34ID:kXMbe87q
SEO対策に使っても削除しないブログです。ご利用は無料です。
http://www.c-recipe.biz/
0255Name_Not_Found
垢版 |
2011/07/18(月) 15:35:53.07ID:???
>>252
ttp://zz.x0.com/anohana/canvas.html
IE 9.0.1（Internet Explorer 9.0.8112.16421）

SCRIPT438:
オブジェクトは 'getContext' プロパティまたはメソッドをサポートしていません。
canvas.html, 行 94 文字2
0256193
垢版 |
2011/07/18(月) 20:48:17.57ID:???
>>255
あ〜、動かないんですか・・・っと思って調べてみると一応サポートはしてるみたいですね。

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

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

で、近くのケーズデンキまで自転車で行って動作確認してきましたｗ
ちゃんと動きました！
0257193
垢版 |
2011/07/18(月) 20:52:14.79ID:???
でもIEの為に、こんな気持ち悪いタグを追加しないといけないなんてやだなぁ。
エラーを出すぐらいならブラウザ側で処理すればいいのに。
0258Name_Not_Found
垢版 |
2011/07/18(月) 22:26:41.47ID:???
>>257
おいおい、IE9に「古い解釈で表示しないといけないページだ」と思わせる
古臭いHTML文書にしているのはどこのどいつだｗ

HTML5の機能使うなら、ページの構造の方もHTML5仕様に合わせとけ。
ttp://html5.validator.nu/
ttp://validator.w3.org/#validate_by_uri+with_options
0259193
垢版 |
2011/07/18(月) 23:40:48.94ID:???
>>258
いろいろエラー出ますね。よく分からないので放置しますがw
厳密な記述をしろというのも分かりますが、他のブラウザで問題なく
表示できる事が何でIEでは出来ないの？と思うわけです。

ウェブ上にはお行儀の悪いhtmlが無数に存在するわけで
各ブラウザはそれに合わせてくれているのにIEだけ俺に合わせろと言うのです。
負の遺産があるからなのかもしれませんが、もっと柔軟な対応をして欲しいです。
0260193
垢版 |
2011/07/18(月) 23:45:10.88ID:???
>古臭いHTML文書にしているのはどこのどいつだｗ
犯人は>>212です(>_<)
0261193
垢版 |
2011/07/18(月) 23:47:34.68ID:???
ちなみにiPad2も置いてあったので
試してみたら重いけど動きました。
0262193
垢版 |
2011/07/20(水) 03:40:16.25ID:???
間違えてタグ閉め忘れたら文字が降ってきたので
Webフォント版にしてみました。
http://zz.x0.com/anohana/test5.html

FontCreatorを使ってめんまフォントにお花を追加してます。
Webフォントに対応していないブラウザでは星が降ってきます。
0263193
垢版 |
2011/07/20(水) 03:53:02.11ID:???
角度を変えた文字を登録すれば回転もできるかな・・・
IEでは文字を降らすと固まって動かなくなります。
0264193
垢版 |
2011/07/20(水) 03:55:25.39ID:???
あと変更した点は目を閉じるようになりました！
UserAgentにMobileが入っている場合はお花の数が30個になります。
アップル端末にはMobileが入ってるみたいだけどAndoroidはどうだろう？
Canvas版にもモバイル判定を入れました。
0266193
垢版 |
2011/07/31(日) 05:53:18.91ID:???
算数が分からない_( (_´Д`)_
0268193
垢版 |
2011/08/01(月) 01:29:38.90ID:???
はぁ、簡単なこと1つでも実現するのにものすごく時間がかかる
0270193
垢版 |
2011/08/10(水) 00:03:37.93ID:???
めんまスタンドアップできました。
http://zz.x0.com/anohana/test6.html

あと「花びらをドラッグすると花びらが消える判定がおかしくなる」にも対応。
無理やりなので出現判定がおかしくなるけど。
0271193
垢版 |
2011/08/11(木) 04:28:34.68ID:???
クレジット表示を追加しました。
http://zz.x0.com/anohana/test7.html
めんまの画像切り替えるのと殆ど一緒だから思ったより簡単にできた。
すごいエンディングっぽい！
0272193
垢版 |
2011/08/11(木) 04:35:45.44ID:???
めんまは幽霊なので若干透過させましたｗ
0274193
垢版 |
2011/08/11(木) 05:05:29.26ID:???
>>205さん、>>212さん。ご協力ありがとうございました。
どこかに晒してこようかと思います。
0275193
垢版 |
2011/08/14(日) 22:05:32.09ID:???
Webフォント版に歌詞を付けました。

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

これを追加したらすごい文字が綺麗になった！
0276193
垢版 |
2011/08/14(日) 22:39:16.02ID:???
一昨日、あの花本スレとはてな匿名ダイアリーに投下したんだけど反応が薄かった・・・
「すごさがよくわからんｗ」とか言われて(´・ω・｀)ｼｮﾎﾞｰﾝ
でも昨日辺りに2chまとめサイトが取り上げてくれててTwitterにも拡散されて
1日で3,000ヒットした＼(^o^)／

かくれオタのブログ
http://zeark969.blog38.fc2.com/blog-entry-2856.html
0279193
垢版 |
2011/08/16(火) 02:08:51.24ID:???
うわっ、検索したらあの花ED再現してる人いっぱい出てきたｗ

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

あー、これやりたかったんですよ！
0285Name_Not_Found
垢版 |
2012/01/19(木) 21:01:11.73ID:???
誰か手とり足とり教えてくれぇ
0287 ◆q7u/null4U
垢版 |
2012/03/20(火) 06:13:28.74ID:iYZiXsjR
nullpo nullpo nullpo nullpo nullpo 〜 age
0288Name_Not_Found
垢版 |
2012/07/21(土) 08:37:50.99ID:FjllUmGx
>>285
まず服を脱ぎます。
0289Name_Not_Found
垢版 |
2012/09/14(金) 09:45:58.89ID:???
創価死ね　
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね　
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
0291Name_Not_Found
垢版 |
2013/08/20(火) NY:AN:NY.ANID:bSyrJYE3
適当なスレがなかったのでここで。
あるブログで前職内情暴露の記事を書いてます。
（アメブロ、ライブドア）

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

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

ちなみにアメブロは会社HPの次に表示される上位表示になっています。
0292Name_Not_Found
垢版 |
2013/09/02(月) 09:19:40.11ID:T3yvYeci
Aiのデータ渡されてボタン作成しろっていわれて
マウスオーバーがどうのこうのいわれたけど
日本語が理解できません。
どうすればいいですか？
0293Name_Not_Found
垢版 |
2013/09/23(月) 16:50:59.10ID:m7zBl2Up
webと連動したアプリを作りたいんですがどういったスキルが必要になりますか？
0294Name_Not_Found
垢版 |
2013/09/23(月) 18:53:21.24ID:???
突き詰めると最後は画像にたどり着く。
これも時代の流れかな。８文字２行のテキスト広告は
過去の遺物になってしまった・・・必要なときは社内で全員で考えて
メッセで候補を送ってたんだぜ。
0296Name_Not_Found
垢版 |
2018/02/18(日) 20:20:16.89ID:???
☆ 日本の、改憲を行いましょう。現在、衆議員と参議院の
両院で、改憲議員が３分の２を超えております。
『憲法改正国民投票法』、でググってみてください。国会の発議は
すでに可能です。平和は勝ち取るものです。お願い致します。☆☆
0297Name_Not_Found
垢版 |
2018/05/01(火) 21:51:15.34ID:l1wYHpV1
誰でもできる在宅ワーク儲かる方法
少しでも多くの方の役に立ちたいです
グーグルで検索するといいかも『金持ちになりたい 鎌野介メソッド』

GZVCE
■ このスレッドは過去ログ倉庫に格納されています
ニューススポーツなんでも実況