- ベストアンサー
jsライブラリーの基本的な事で？？
- jsライブラリーの基本的な知識について解説します。
- ブラウザのバージョン差異を吸収し、jsの機能を簡単に記述するためのライブラリーについて紹介します。
- おすすめのjsライブラリーをご紹介します。
- kinta03
- お礼率80% (8/10)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- tracer
- ベストアンサー率41% (255/621)
どのブラウザを対象にするか、また、どの機能を使いたいかによります。 極端に言えば、世の中のすべてのブラウザを対象にするのであれば、その差を吸収するライブラリはありません。今やテレビやゲーム機もブラウザを備えていますし、ガラケーもまだまだ存在しています。特に日本で作られたテレビ・ゲーム機・携帯電話の実装は、悲惨です。まさにガラパゴスな状態です。対応するだけ無駄と言うべきかもしれません。 逆に、最新のブラウザ(PC/モバイルOS)を対象にし、基本的なイベントに限定するのであれば、ライブラリが必要ないくらい仕様が整ってきています。また、IEが圧倒的なシェアを誇っていた時代はとっくに通り過ぎ、今では全バージョン合わせて5割ほどと言われています。これからも減少の一途でしょうし、もはや、IE推奨サイトにする必要性はどこにもないでしょう。 繰り返しになりますが、対象ブラウザと、どういう機能を実装したいかによって、お勧めできるライブラリも変わってきます。また、前の回答にもあるように、Webアプリのようなある程度の規模の開発を目的にするなら、ライブラリと合わせて、フレームワークも選択するべきでしょう。 総じて言えば、jQueryが最も有力です。 なぜなら、情報が腐るほどあるからです。
お礼
ご回答有り難うございます。 目指すものが何かはっきりしない状態では、お答えを頂くのも難しい話ですよね。 各々の得て不得手をまとめた様なサイトが見つからなかったので・・・ ＞いま何を押さえておくべきか ＞皆さんがどこら辺を押さえておられるのか を、その訳を含め聞きたかったのです。 とりあえずjQueyに興味を持ったので、此処から入ってみて他に手を伸ばしてみます。 追加情報など有りましたら、またよろしくお願いします。 有り難うございました。
関連するQ&A
- 透過png画像をフェードインさせたい
現在jquery.crossFader.jsというライブラリを使用して IE以外のブラウザでは動作ができたのですが IE８以下では黒いふちが表示されてしまいます。 透過画像をクロスフェードさせたいと考えているのですが 解決策などありますでしょうか？ どうぞよろしくお願いいたします。 環境 wordpress 3.4.2 html5 css3 jquery使用
- ベストアンサー
- JavaScript
- jQuery.lightpop.jsの動作について
jQuery.js : Ver1.3.1 jQuery.light.js Ver0.7.5 使用ブラウザ:FireFox3.0.8(Firebugインストール済み) Google Chrome2.0.169.1 お世話になります。 現在弊社ではjQuery.lightpop.jsライブラリを使用して リンク先(以下例では「hogehogeName」のリンク先「hogehoge.html」)をポップアップ表示させようとしています。 以下(1)のように「静的」にテーブルタグを記述するとうまくいきますが (2)のように「動的」だとポップアップされず 普通にページ遷移してしまいます。原因はどこにあるのでしょうか？？ ちなみにFireBugで動作確認を行いましたが、エラーはなかったです。 (1)タグ内にテーブルを直接記入 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightpop.js"></script> <script type="text/javascript"> $(function() { $('a[rel*=lightbox]').lightpop({overlayBgColor:'#FFF', contentFrameType:'box'}); $('a.lightpop').lightpop(); $('a[href$=.jpg], a[href$=.gif], a[href$=.png]').lightpop(); $('a[href*=.youtube.com/watch]').lightpop(); }); </script> </head> <body bgcolor="lemonchiffon"> <h4>ポップアップテスト<h4> <div id="view"> <table class="table1" id="table1" border="1" bgcolor="white"><tbody> <td class="col2"><a rel="lightbox" href="hogehoge.html">hogehogeName</a></td> </tr></tbody></table> </div> </body> </html> (2)divタグ内に「動的」にテーブルを記入する方法 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightpop.js"></script> <script type="text/javascript"> $(function() { $('a[rel*=lightbox]').lightpop({overlayBgColor:'#FFF', contentFrameType:'box'}); $('a.lightpop').lightpop(); $('a[href$=.jpg], a[href$=.gif], a[href$=.png]').lightpop(); $('a[href*=.youtube.com/watch]').lightpop(); &(view).innerHTML = '<table class="table1" id="table1" border="1" bgcolor="white"><tbody>' + '<td class="col2"><a rel="lightbox" href="hogehoge.html">hogehogeName</a></td>' + '</tr></tbody></table>'; }); </script> </head> <body bgcolor="lemonchiffon"> <h4>ポップアップテスト<h4> <div id="view"></div> </body> </html>
- ベストアンサー
- JavaScript
- イメージギャラリー系のjsを探しています。
写真画像を画面横幅いっぱいに画像を並べて、縦にスクロールできるjsがあればご紹介願います。 私のイメージ的には、下記サイトにほほ近いです。 http://superlover.com.au/ ・ブラウザの表示サイズを小さくしても、写真画像は常に横幅いっぱいに表示される ・スクロールバーが表示されなくても、スクロールできる 上記2点が重要な点になります。 自分で調べたところ、スクロールバーの非表示で興味深いjsがありました。 http://www.lifeisg.com/blog/jquery/jscrollpane/ 背景画像にスクロールバーを表示させることで、カスタマイズできるそうです。 つまり、スクロールバーのデザインを背景と同化させてしまえば、一見表示されていないように見えるかも。。。 その場合、右端にできるであろう空間が気になるところですが。。。 ご意見よろしくお願いいたします。
- ベストアンサー
- JavaScript
- jquery自体をJavaScriptで読み込む
以下のようなものを想定して、jquery.js という中身がjqueryでないものから jqueryの実態を読み込みをさせようとしているのですが、うまくいきません。 ・jquery 2以降は、IE8以前をサポートしなくなるので、useragentで 読み込むjqueryを選択したい。 ・現在、CGIスクリプト上で、jqueryの読み込みを判断しているが、できれば 外部JavaScriptで巨大なjqueryの読み込みの判断をさせたい。 ・キャッシュされたとしても、ライブラリであることから、圧縮して７０ｋバイトと あまりにも巨大である ・(googleapiを利用すると、IE8以前では、プライバシーの警告が出る場合がある） 確かに、スマホにjqueryを普通に読み込ませても、何も問題なく動作しますが、 相当がんばって圧縮をしても70kバイト程度のライブラリを、使用しないのに 読み込むというのも気が引ける部分もあります。 何とか、動的に、かつ、何も問題なく、jqueryをJavaScriptで読み込む方法は あるでしょうか？ このようなコードは、document.bodyがnullであるため、はじかれてしまいます。 var script = document.createElement('script'); script.src = 'http://hoge/jquery-1.js'; document.body.appendChild(script); var callee = arguments.callee; var interval = setInterval(function() { if (!document.evaluate) return; clearInterval(interval); interval = null; callee(); }, 100); このコードでも、jqueryを使用するものが、jQueryがないというエラーで、うまくいきません var scrptE = document.createElement("script"); scrptE.setAttribute("type", "text/javascript"); scrptE.setAttribute("language", "JavaScript"); scrptE.setAttribute("src", "http://hoge/jquery-1.js"); document.getElementsByTagName("head")[0].appendChild(scrptE); 以下のようなのは、googleapiのため、使わないものと考えます。 http://phpjavascriptroom.com/?t=ajax&p=jquery よろしくお願いします。
- ベストアンサー
- JavaScript
- コーダーの将来性
HTML5、CSS、コーディングの学習を突き詰めて行っても、時代錯誤で将来性も需要もあまりないのでしょうか？ それより、WPを使ってテンプレートを使ってGUIで、多少変更する仕事の方が需要、将来性があると言う事でしょうか？ それでも巷ではJSは将来性があると言っていますが、在宅、中小意外の大手に勤めた場合、もしくは海外で働く場合の事でしょうか？ それともコーディングの将来性は無いが、JQUERY、Node.jsなどを学んだJSのライブラリなどが使える人には、将来性があり、こちらのみ伸びて行くという事でしょうか？ もしそうなら、コーディングは、ほどほどにしておいて、JSの方を極めて行った方が良いのかもしれませんね。 コーディングは、BEM、正しい拡張性のあるクラス名つけ、SASS、HTML5でのセマンティックなコーディングまで行う必要は、これから働く人には無いのでしょうか？ ブラウザ上で問題ない程度に行えて、後はさっさとJSを中心に学ぶ方に切り替えた方が良いのでしょうか？ フロントエンジニアは、当分大丈夫だと思いますが、AIが進化している昨今今後を考えるとサーバサイドやデザイナーのほうが、よいと思いますか？
- ベストアンサー
- CSS
- GPL MITライセンスについて
ｗｅｂデザイン会社が以下の二つのサイトからjQueryライブラリを使用してｗｅｂ制作する場合、ｊｓファイルのクレジット表記を外さなければ無償で使ってもいいのでしょうか？ http://www.jssor.com/ http://www.skitter-slider.net/ ライセンスはそれぞれGPL or MIT とあり、それなりにググって確認はしましたが、使用したいライブラリの配布サイトが英語表記なので翻訳ソフトを使用して解釈をしているため不安があり。。。 ご教授いただけたら幸いです。
- ベストアンサー
- その他（ITシステム運用・管理）
- JS読み込み場所について
JS読み込み場所について 下記のように聞いたのですが、 ＞＞＞ <script>要素を記述する場所は、大きく以下のように分類できます。 （1）<body>要素の配下（任意の位置） <script>要素での処理結果を、ページに直接出力するために利用します。昔はよく見かけた書き方ですが、コンテンツとコードとが混在するのは、ページの可読性／保守性の観点からも望ましくありません。現在ではほとんど使われることはありませんし、また、一部の例外を除いては使うべきではありません。 （2）<body>要素の配下（</body>閉じタグの直前） 一般的なブラウザーでは、スクリプトの読み込みや実行が完了するまで、以降の描画を行いません。このため、読み込みや実行に時間がかかるスクリプトは、そのままページ描画の遅れに直結します。巨大なスクリプトがある場合にはなおさらです。 そこで、ページ高速化の手法としてページの末尾（</body>の直前）に、<script>要素を配置することがよく行われます。これによって、ページの描画を終えたあと、おもむろにスクリプトを読み込み／実行できるので、見た目の描画速度が改善します。 一般的に、JavaScriptによる処理は、ページがすべて準備できてから行うべきものであるはずなので、これによる弊害もほぼありません。 （3）<head>要素の配下 ただし、（2）でまかなえないケースがあります。JavaScriptでは、「関数（Chapter 4）を呼び出すための<script>要素よりも、関数定義の<script>要素を先に記述していなければならない」というルールがあるためです（関数の定義、呼び出しがひとつの<script>要素にまとまっていても構いません）。たとえば、<body>要素の配下で呼び出す必要があるような関数は、<head>要素の配下で事前に読み込んでおく必要があります。 また、スクリプトからスタイルシートを出力するような状況でも、本文の出力に先立って<head>要素の配下で<script>要素を記述すべきです。 まずは（2）を基本とし、それでまかなえない場合にだけ（3）を利用する、と理解しておけばよいでしょう（本書でもそのルールに沿っています）。くり返しですが、（1）を利用する状況は、外部のウィジェットを埋め込むなどの状況を除けば、ほとんどありません。（1）を使いたくなったら、まずはほかの方法でまかなえないかを検討すべきです。 改訂版JS本格入門より ・同じJSファイル内であれば関数の定義と呼び出しは順番はどちらでも良いが、 別ファイルとして<script>タグで読み込む場合は定義が入ったファイルが呼び出しのファイルより先に記載されていないといけないということでしょうか？ ・ ＞＞＞ たとえば、<body>要素の配下で呼び出す必要があるような関数は、<head>要素の配下で事前に読み込んでおく必要があります。 これは具体的にどんなケースだと思いますか？ sectionなどのbody内の要素の高さをjqueryで取得設定するときなどで消化？ ・最後に良くCSSを当てるjsがDOMを読み込み終わってから実行されてガッタンとなることがあるのですが、このような場合はどこに書くべきなのでしょうか？
- ベストアンサー
- JavaScript
- jqueryでスライダーを設置した時に
jqueryでスライダーを設置した時に設置したページのテキストが画像がスライドするタイミングで点滅してしまうようです。 現象が起こっているのはMacのsafariとchromeです WindowsのIEやモダンブラウザ、MacのFirefoxではオッケーのようです。 ちなみにコンテンツスライダーは、glide.jsやbxslider.jsです。両方とも同じ現象が起きます。 chrome はwebkitではなくなりましたし、、、 該当ページでは、スティッキーヘッダ、トップへ戻るボタン、ロールオーバーや複数のタブパネルなど、jQueryの塊のようなページになっておりまして、、、 ただ、それらをすべて無効にして、スライダだけを実装状態にしても同じようです。 スライダーそれぞれのCSSをみてみましたが、同ページにあるCSSの他のセレクトと同名のセレクタはないようです、、、 どなたか似たような現象を解決された方がいらっしゃいましたらご教示願えますでしょうか？
- 締切済み
- JavaScript
- Javascript外部ファイルの読み込みについて（ブラウザにキャッシュさせたい）
現在、製作中のサイトにおいて、webページが表示されるまで、5秒～15秒程度かかる事態が発生しています。 該当サイトでは、prototype.js等のjavascriptのライブラリを使用しており、合計で5個のjsファイルを読み込んでいます。 jsファイルの読み込み箇所を削除するとサクサクと快適になるので、jsファイルの読み込みに問題があると考え、jsファイルを圧縮したり（http://dean.edwards.name/packer/等）、ブラウザにキャッシュさせるために<script src=""での読み込み時に引数「?version=1」を追加してみたりしていますが、あまり改善しません。 読み込みの数を減らすため、prototype.jsとjquery.jsを統合するなども試してみました。（統合後のサイズは116KB） 利用環境によってはそれほど気にならない速度なのですが、IE6の環境でかなり重い場合がありますので、改善方法を探しています。 一回目の表示はともかく、2回目以降も毎回トップページ表示に5秒以上かかるのは問題がありますので…。 現時点で原因は、外部jsファイルがキャッシュされず毎回サーバーに読みにいっているために遅くなっていると思うのですが…。 ブラウザに外部ファイルをキャッシュさせる方法は何かないのでしょうか？ ちなみに、重くなる環境で、他のサイト（外部JSファイル読み込み多数）のサイトを表示しても、2回目以降は重くなりません。ブラウザのキャッシュの削除も一度試しています。 参考に、現在のスクリプト呼び出し部分を記述します。 ---------------------ソースここから--------------------------- <script type='text/javascript' src='js/prototype-1602-and_jquery.js?version=1'></script> <script type='text/javascript' src='js/js.js?version=1'></script> <script type="text/javascript" src="js/lib/jquery_auto_j.js?version=1"></script> <script type='text/javascript' src='js/scriptaculous-js-181/src/scriptaculous.js?load=effects'></script> <script type='text/javascript' src='js/lightview.js?version=1'></script> ---------------------ソースここまで--------------------------- また、スクリプトはPHPで作っていますので、キャッシュを許可する記述を以下のようにしています。 ---------------------ソースここから--------------------------- session_cache_limiter('private_no_expire'); session_start(); ---------------------ソースここまで--------------------------- また、現状ではjsファイルの読み込みが原因かと考えていますが、それ以外でも改善点などがあれば、それをご指摘頂ければありがたいです。 宜しくお願い致します。 確認環境：windows XP、 IE6 HP作成スクリプト：PHP
- ベストアンサー
- JavaScript
- ｊQueryが使用できません
現在JavasscriptのｊQueryの学習をしているのですが、ｊQueryがうまくページ上で反映されず、さっそく困っています。 下記コードのようにカラー、フォントを指定しているのですが、反映されません。 方法としてはgoogleからｊQueryファイルを読み取って利用しようとしています。 ブラウザはgooglechoromeを使用しています。 <doctype! html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery</title> <script src="http://code.jquery.com/jquery-1.10.1.min.js"> $(function(){ $("h1").css("background-color", "yellow"); $("strong, em").css({ "font-size": "150%", "font-style": "italic", "color": "blue" }); }); </script> </head> <body> <h1>jQuery</h1> <p><strong>jQury</strong>は便利なJavascriptの<em>ライブラリ</em></p> </body> </html> 解決方法に心当たりのある方、どうかよろしくお願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
お礼
早速のご回答有り難うございます。 ライブラリも色々有るようで・・・ ネットを探しても各々を比較して得て不得手をまとめた様な物を見つけられませんでした。 目指すものが何かはっきりしない状態では、お答えを頂くのも難しい話ですよね。 とりあえずjQueyに興味を持ったので、此処から入ってみて他に手を伸ばしてみます。 教えて頂いた「coffee script」「type script(上手くヒットしなかった)」「Haxe」「Dart」なども含め、ネットを散策してみます。 追加情報など有りましたら、またよろしくお願いします。 有り難うございました。