のくす牧場
コンテンツ
牧場内検索
カウンタ
総計:127,463,453人
頁
昨日:no data人
頁
今日:人
頁
最近の注目
人気の最安値情報

元スレ+ JavaScript の質問用スレッド vol.113 +

JavaScript覧 / PC版 /
スレッド評価: スレッド評価について
みんなの評価 :
タグ : 追加: タグについて ※前スレ・次スレは、スレ番号だけ登録。駄スレにはタグつけず、スレ評価を。荒らしタグにはタグで対抗せず、タグ減点を。
←前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ→ / 要望・削除依頼は掲示板へ / 管理情報はtwitterで
602 = :

>>600
まずこういうのをやるときは1個1個別の画像にしないで0～9までつながった画像にするんさ

<span class="number number-0">0</span>

.number{
　　display: inline-block;
　　/display: inline;
　　/zoom: 1;
　　background: url(数字の画像のパス);
}
.number-0{ background-position: 0px 0px; }
.number-1{ background-position: 0px -35px; } /* 数字一個の高さ分ずつずらす */
.number-2{ background-position: 0px -70px; }
　　　　　　　　：
こんな風にすれば、<span>要素のclassを書き換えるだけで、<img>と同じように使えるでしょ
そんで、時の10の位のところだけ

<p class="h-10"><span class="number-0">0</span></p><!-- 時の10の位 -->
<p class="h-1"><span class="number-0">0</span></p><!-- 時の1の位 -->
<p class="m-10"><span class="number-0">0</span></p><!-- 分の10の位 -->
<p class="m-1"><span class="number-0">0</span></p><!-- 分の1の位 -->
<p class="s-10"><span class="number-0">0</span></p><!-- 秒の10の位 -->
<p class="s-1"><span class="number-0">0</span></p><!-- 秒の1の位 -->

みたいにして、CSSで

.h-10 .number-0{
　　background-position: /* 空白になる座標 */;
}

ってすれば、時の10の位がゼロの時だけ、空白に出来るっしょ

604 = :

>>585
まあ別にいいけど、それ使う気おきないよ。

ファイルサイズを気にしているみたいだけど、
パフォーマンスに大きく影響するのは数十KB程度の差よりも
ファイルの数＝HTTPリクエストの数なんだ。
だからファイルを結合できなければ意味が無い。
結合したら非同期であることの意味は殆ど無くなる。

最終的に一つになるとして、そしたらscriptタグは一つになる。
scriptタグが複数ある方法である時点で結合できないということであり、
パフォーマンス上のメリットはない。

君はファイルが分割される前提で出来る限りのパフォーマンスを目指しているのかもしれないが、
RequireJSは、最終的に結合される前提で、最高のパフォーマンスを目指している。
その上で開発に便利な機能、たとえば複数のバージョンを同居させるだとか
グローバルを汚さないだとか、AMDモジュールでないものを修正なしに
使えるようにするだとかいった機能をサポートしている。

607 = 597 :

>>603さん
すいません、不慣れなもので、専門用語とかが分かりません・・・・。

609 = :

バカしかいねーな！

611 = :

>>604
なぜかみんな「非同期で」という部分ばかりみるけどこれはあくまでオマケ。
このライブラリのポイントは「世界中のjQueryユーザーがそのままのスキルで3DCGコンテンツを作れるようになる」ということ。

当然そうなれば巨大なマーケットが誕生する。何億円ではなく何兆円規模の。
MITライセンスでの公開だから早い者勝ち。
世界中で普及させるのはモチロンだけど特に日本においてはMMDのデータファイルを直接取り込めることが売りになる。
このMMD対応機能はもう１、２ヶ月かかる予定ですがミクをWeb上で躍らせるだけでなくフィールドを歩かせたり戦わせたりできる未来が来るのです。

カメラワークもプラグインがすでに完成しているので簡単に操作できます。
$.flyView( "rdr" );
これだけでマウスが空間を自由に飛び回るコントローラーに変わる。
FPSやエースコンバットのようなカメラワークすらたったの1行で完結するのです。

今日からプログラミングを始める人でもすぐに本格的なコンテンツを作れるから爆発的にWebGLコンテンツが普及するでしょう。
そうなればスマホのWebGL対応も進み、スマホアプリはJavaやObjective-Cではなくこのライブラリを駆使したHTML5・JavaScriptが主流になります。

jQueryとthree.jsを合体させただけだけど、three.jsだと数十行もかかるコードが１行で実現できます。
そもそもthree.jsでは実装が難しかったことも簡単にこなせます。
勝手な妄想と言われるかも知れませんがWebGL・HTML5が当たり前になる未来が来ると思いませんか？

612 = :

>>611
お前が公開して世に認められるまではここで何を言っても妄想だよ

614 = :

>>607
わからない言葉はまずググろう
その手間まで教えてくれる人に負わせる必要はないよ

615 = :

>>611
なぜって、おまえが、「世界で初めて非同期読込を可能にしました」なんて書くからだろ。
公開するときに恥ずかしいことにならないよう、みんな指摘してくれてるんだ。
この辺はRequireJSが有名だけど、非同期読込のためのライブラリっていっぱいあるから
チェックしてみたほうがいい。

616 = :

>>615
それは素直に申し訳ないです。
みなさんありがとうございました。

「本体含めて依存関係のある全てのスクリプトタグにasync属性を指定できる初めてのライブラリ」ということを言いたかったのです。
情報の伝え方が不正確りでした。本当にすみません。
もしかしてこのテクニックすらすでに存在しますか？

618 = :

一般的にリリースもしないで云々かんぬん言ってる奴は
眉唾だと思って良い。

619 = :

>>616
> 「本体含めて依存関係のある全てのスクリプトタグにasync属性を指定できる初めてのライブラリ」ということを言いたかったのです。

本体含めて依存関係のある全てのスクリプトを修正しないと動かないんだろ？
それじゃ使えねーよ。

620 = :

>>616
存在するよ。

お前は何も出さないけど、
どんなコードかはわかるからな。

621 = :

>>618
ここでは晒しませんがサイトにて公開しております。
ただ、zipファイルをダウンロードできるだけでリファレンスすらできてません。
プラグイン等の開発協力者と運よく見つけた人向けですね。
MMD（PMXファイル）を取り込めるようになったあたりから宣伝を始める予定です。

>>619
確かに使えないものかもしれませんね。
デザイナーさん達の評価を参考にしながら修正していきます。

>>620
存在するんですか！
実態はどうあれこっちのコードがパクリに見えるようなら戦略を変える必要があるのでそのライブラリを教えていただけませんか？

622 = :

>>621
まずはお前が最初に出せ。
そしたらそれと同じようなものを言ってやるから。

623 = :

>>622
要するにスクリプトタグを以下のように記述できるライブラリです。

<head>
<script async src="script/index.js"></script> ←ユーザーのプログラム
<script async src="plugin/plugin.js"></script> ←本体に依存するプラグイン
<script async src="script/webgl_library.js"></script> ←ライブラリ本体
<script async src="script/jquery.js"></script> ←本体が依存するjQuery
</head>

これと同じことができるライブラリが本当に存在するのでしょうか？

624 = :

>>623
それってさ、各スクリプトがキャッシュに入ってると、
bodyのレンダリング前に各スクリプトの実行が始まっちゃって、普通はあんまりよろしく無いんじゃないの？
スクリプトで描画要素全部作成するとかの用途ならいいかもしれないけど

で、スクリプトで描画要素全部作成する場合ならば有効か？と言われると、
今時のブラウザならasyncとかなくてもscript並べとくだけで
読み込むのは非同期で実行は記述順でやってくれるみたいだから、
はっきり言って意味無いんじゃない？

625 = :

>>624
> 今時のブラウザならasyncとかなくてもscript並べとくだけで
> 読み込むのは非同期で実行は記述順でやってくれる

おお！これは知りませんでした。
Ironで確認したところ一辺にリクエストを送っているようですね。
これなら全く意味がありません！
重要な情報をありがとうございました！
「一応asyncつけられますよ～」と軽く解説する程度に留め、独自機能としての宣伝はしない方向で検討します。
この機能はほぼ全てのブラウザが実装していてもおかしくないですね。

>>624含め今までレスしてくれたみなさんのおかげで世界中に大恥を晒さずに済みました。
>>615の言うとおりですね。

> bodyのレンダリング前に各スクリプトの実行が始まっちゃって
ここはjQueryと同じようなDOM構築待機関数を利用してます。

626 = :

>>625
three.jsはよく知らんけど、jQueryとかけっこうデカイからさ、
DOM構築待機関数を呼び出す前のjQuery自身の定義の処理だってそれなりに時間がかかる
できればその辺もbodyのレンダリング後に動いたほうがいいんじゃないの？

627 = :

>>626
確かにそれがベストです。WebGLが今まで通りの使われ方をすると想定するならば。
このライブラリで手軽に作れるようになると1ページにおけるWebGLのコンテンツ比率は大きく下がると考えています。

つまり、全画面WebGLが当たり前ではなくなり3D版アニメーションGIFぐらいのノリで使われるようになるということです。
ブログ記事の途中に埋め込まれたり、オークションの出品画像が3Dになったりするでしょう。
極端ですが、自分はFlashに代わってWebGLの小さなブログパーツが公開配布される状況を想定して仕様を決めています。

サイト・ブログのデザインに使われているスクリプトを一切変更しなくて済むように「jQueryの動作については干渉しない」ことを基本方針としています。
ただ、jQueryの用途がWebGLに限られている場合、>>626の処理を選択できるという機能はあってもいいかもしれませんね。

余談ですが、three.jsは圧縮後410KB、自分のライブラリはthree.jsの一部機能を削り圧縮後256KB+jQueryで公開しました。

628 = :

オークションの画像が3DはWebGLの役目ではない
設計図があるもので組み立て予想図を3Dにということであればまだ可能性はある
そして単純な3D版アニメーションはCSSのカスタムシェーダーを静的に用意しとくもの
毎回作るものではない

あと依存関係解決は既存のものを流用せよ
１つのライブラリに毛色が違う機能を載せるべきではない
ES6モジュールも待ってるし、もう新しいものは必要ない

最後に、構って欲しいんなら最初から
自作ライブラリを評価してもらいたいのですがといってソースを公開しろ
それをしないとお話にならない

あと仮に素晴らしいものであったとしても
ライブラリの宣伝は１００％スレチだから
質問者なんだから意見を真摯に受け止めるだけにしろ

うざいから誰も聞いてない、聞きたくもないことまでペラペラ喋らなくていい
ここは質問スレだから、雑談ならプログラミング技術板のJSスレでやれ

629 = :

>>628
> １つのライブラリに毛色が違う機能を載せるべきではない
この言葉で何だか目が覚めました。
WebGL関連はどれもファイルが重いので苦肉の策として編み出した小細工がいつの間にか自分の中で大きな意味を持つようになっていました。
純粋にWebGLライブラリとしての道を歩かせることにします。
ありがとうございました。

みなさん色々構っていただき感謝してます。ネットでもコミュニケーションが取れると嬉しいものですね。
それではまた。

630 = :

>>609
クレタ人乙。

631 = :

>>630
なに貰ったの？

632 = :

画像だらけのデザインよりもフラットデザインの方が良いと思うが、何かと視覚効果付け足して重くすんのやめとくれ。

635 = :

HTAって呼ばれたオワコンもあるで

636 = :

htmlを使わずにCとかJavaのごとくアプリケーションを作りたい

637 = :

HTMLつかわんのならCとかJavaでええやん

639 = :

サイト上の画像全てのリンクを貼るブックマークレットが上手く書けません。2つ目の画像からリンクが貼れず、サイトのhtmファイルがDLされます

/* NodeList取得 */
var imgs = document.images;
/* URL用配列 */
var urls = [];
/* URLをNodoListから取得 */
for(var i=0; i<imgs.length; i++) { urls[i] = imgs[i].src; }
/* aタグのonclickで呼ぶ関数を返す */
function Memorise() { var i = 0; return function() { document.getElementById('download').href = urls[i++]; }; };
/* 上の関数を代入 */
var Download = Memorise();

/* 各URLを貼る */
for(var j=0; j<urls.length; j++) {
var a = document.createElement("a");
var str = document.createTextNode("image" + j);
a.appendChild(str);
a.setAttribute("download", "image" + j);
a.setAttribute("href", "#");
a.setAttribute("id", "download");
a.setAttribute("onclick", "Download()");
document.body.appendChild(a);
var br = document.createElement("br");
document.body.appendChild(br);
}

640 = :

話は変わるけどさ、ブラウザの開発者ツールで
ページ上の画像全部見れるじゃん？
あれ、まとめてダンロードできないのかな？

641 = :

主なブラウザでCtrl+SでWebページ完全を選ぶとファイルを全部落とせる
>>639
setAttribute使うな。idが同じ要素を2個作るな。イベントを文字列で貼るな。
for(var a="",b=document.images,c=0,d=document.createElement("div");c<b.length;c++)a+='<a href="'+b[c].src+'">image'+c+"</a><br>";d.innerHTML=a;document.body.appendChild(d);

642 = :

>>641
そういうのとは違うんだよね。

まとめてって言っちゃったから俺が悪いんだけど、
必要な物だけ選択して簡単に落としたい。

Chromeの開発者ツールで、画像リストを表示して
移動しながらドラッグ＆ドロップでもかなり簡単だけどさ。

643 = :

昔の開発者ツールが貧弱だった頃は
ひどかったな。

サイト側が意地でも画像落とさせないように
右クリック禁止してURLに直接アクセスしても
だめなように、リファラーみたいりクッキー使ったり。

今は開発者ツールで解析し放題だけど。

644 = :

>>641
setAttribute使っちゃいけない理由ってなんですか？

646 = :

>>645
loadではなくreadyStateChangeで

というか、Ajaxのやり方でググればそのへんのサンプルはうじゃうじゃあるから
うまくやってるところを参考にしてくだされ

648 = :

非同期処理ではまるひとおおいよね

649 = 645 :

>>646-647
朝からずっとやってるのですが、全く理解できずにいます。
「javascript XMLHttpRequest Ajax」とかでもググったのですが、
理解が全く追いつかず、頭がパンクしそうです・・。

もう限界に近いので諦めます。アドバイスありがとうございました。


←前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ→ / 要望・削除依頼は掲示板へ / 管理情報はtwitterで / JavaScript一覧へ
スレッド評価: スレッド評価について
みんなの評価 :
タグ : 追加: タグについて ※前スレ・次スレは、スレ番号だけ登録。駄スレにはタグつけず、スレ評価を。荒らしタグにはタグで対抗せず、タグ減点を。

類似してるかもしれないスレッド

トップメニューへ / →のくす牧場書庫について