Web制作のクオリティを飛躍的に高めるJavaScriptライブラリ10選を一挙公開！ - paiza times
どうも、まさとらん（@0310lan）です。 みなさんは、「JavaScriptライブラリ」を活用しているでしょうか？ Webサイト制作はもちろんのこと、さまざまなWebアプリやサービスなどを開発する時に、大幅な時間短縮やクオリティを飛躍的にアップすることが出来るようになります。 そこで今回は、国内外で人気が高くて誰でも簡単に扱える「JavaScriptライブラリ」を厳選してご紹介しようと思います！ ■多機能な「写真ギャラリー」を組み込めるライブラリ！ ◆1.Viewer.js 複数の画像を表示する際に、オシャレな「ギャラリー風」に変換してくれるライブラリです。 類似のライブラリはいくつか存在しますが、「Viewer.js」は使い方が非常にシンプルで扱いやすいのに、多機能性も備えているスグレモノとなっています。 基本的な使い方としては、HTMLファイルに表示させたい画像を「リスト要素」で指
GoogleMapの簡単な埋め込み方法。アイコンやデザインのカスタマイズも！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです、はやちです(◞‸◟) いきなりですがみなさん、せっかくデザインされたWebサイトの中にデフォルトのGoogleマップがあるとなんだかもったいなく感じませんか？(◞‸◟) どーにかこれをうまくデザインできないだろうか(◞‸◟) ということで、今回は簡単にGoogleマップのデザインをカスタマイズできる方法をご紹介したいと思います٩( ᐛ )و Googleマップを表示させよう まずはじめに基本から。Googleマップを設置しましょう( ˘ω˘)☝ Googleマップの設置 <script src="http://maps.google.com/maps/api/js?key=ここにAPIキーを入れます&language=ja"> </script> headerタグAPIを取得するスクリプトをつけます。 APIの取得はこちらをご参照ください <div id="js-map-tae
Googleも推奨！アニメーションライブラリTweenMaxの使い方 入門編 — un-Tech
ごきげんよう。フーミンです。 「JavaScriptでアニメーション作るならTweenMaxが最強だよ」と先輩から教わり早2年。いまだ現役最強（僕の中で）JavaScriptアニメーションライブラリTweenMaxの良さを広めるために、入門編・応用編の全2回に分けてご紹介しようと思います。 TweenMaxとは TweenMaxとは、GreenSock社が開発した超高性能アニメーションプラットフォーム「GSAP」のひとつで、DOMアニメーションに特化したJavaScriptライブラリです。 requestAnimationFrameを使用しているため、jQueryのanimateメソッドを使うより、動作が高速かつ安定しています。 同じようなライブラリにmokichiくんが紹介してくれたVelocity.jsというのもあります。 TweenMaxと同様に動作が高速かつ安定しており、jQuer
webdesign-dackel.com - このウェブサイトは販売用です！ - webdesign dackel リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
JSNote - IEをCSS3に対応させるCSS3 PIEのJavaScript版を使う
JSNote 読んですぐに使えるJavaScript・HTML・CSSのタイプを書いています。 HomeLatest Entries左、中、右クリックのカスタムイベントを追加するjQueryプラグイン配列の任意の位置に値を代入したり削除したりするJavaScriptだけでローカルの画像をBase64エンコードするIEをCSS3に対応させるCSS3 PIEのJavaScript版を使うリストをページ分けしてページャーを付けるjQueryプラグインArchives2012-012011-122011-112011-02すべての記事一覧CategoriesJavaScriptjQueryブログその他CSSRSS IEをCSS3に対応させるのにCSS3 PIE使いたいけど、htcファイルってFC2ブログにアップロードできないし、htcって何か気持ち悪いのであんまり使いたくないって人のためのタイプで
HTML5/JSでインスタントサーチ（入力中に検索結果表示） - Qiita
3. JS: インスタントサーチのスクリプト この節がいちばんの肝です。 まず、lists = document.querySelectorAll('.line-shell-main-users-li');で検索対象を取得します 次に、for文内でinnnerTextでタグ内の文字列を取得します 最後に、.hiddenクラスをトグルします searchUsersList = function(event){ var i, id, name, lists, input_text = $(this).val(); console.log(input_text); // listのdomを取得 lists = document.querySelectorAll('.line-shell-main-users-li'); for (i = 0; i < lists.length; i++){ id
意外と簡単！位置情報を取得してWordPressと連携する #WordFes | 無料WordPressテーマ BizVektor [ ビズベクトル ]
技術系セッション難しい・・・ 既に存在してるソースを貼って解説すればいいからそんなに負荷は高くないかなと思っていたのですが大間違い。 いざ見なおしてみると、自分が理解してなくて解説出来なかったり、欠陥があって改善してからでないととても公開出来なかったりで、そもそも題材にするソースを用意するのに時間がかかってしまいました。 あとは、ソースの解説ばかりなので、わかりやすく解説しないと、「意味が理解出来ない数学の授業」状態になってしまい、聞く人が眠くなるので、何とか眠くならないようにするのに気を使いました。。。 ただ、かなりしんどかったのですが、やはりこういった場に登壇すると、いろいろと新しい技術的な発見も多々あり、やってよかったなと思います。 今回参加出来なかった方も、来月にはWordCampTokyoがありますので、是非参加してみてください。 WordPressとGeolocationAPI
![意外と簡単！位置情報を取得してWordPressと連携する #WordFes | 無料WordPressテーマ BizVektor [ ビズベクトル ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/f3ffdff3893b4322bc40ed61ee71532cef71f8f7/height=288;version=1;width=512/https%3A%2F%2Fbizvektor.com%2Fwp-content%2Fuploads%2F2014_wordfes.jpg)
Youtube動画を透過(opacity)できるjQueryプラグイン・YTPLAYER
あまり見かけないタイプのライブラリだった のでメモ。Youtubeの動画を透過させる事 が出来るjQueryプラグインです。インター フェースもクールにされて全画面に配置した りオート再生させたりも可能でIE6や7でも 一応は動作してくれます。 僕はちょっと知らないんですけど、Youtubeって普通は透過出来ない、で合ってますよね？普通に出来るならちょっと恥ずかしい記事ですけどｗ 透過だけでなく、オート&リピート再生、ミュート設定も出来て、見た目もスッキリさせてくれています。以前はYoutube動画を背景にするjQueryプラグインをご紹介しましたが、今回は透過が出来るプラグイン。いろいろ出来るんですね・・ CPUの問題は否めないとして、これはちょっと素敵なので覚えておきたいです。透過のみに関してはIE6や7にも対応していますが、Operaは透過出来ませんでした。バージョンにもよるんですか
HTML5 CanvasにJavaScriptでリアルタイムに動画を描画。透過レイヤで動画の重ね合わせなど、新たな表現が可能なPC／モバイル対応コーデック「H2MD」［PR］
Webの表現力は、文字の大きさや色を中心に修飾していた時代から美しいグラフィックやアニメーションの活用へと進み、いまでは大きな動画も積極的に取り入れた、豊かな表現力と情報量を備えるWebが数多く見られるようになりました。 最近では広告や解説動画といった例だけでなく、背景いっぱいに動画を使うといった例もあります。モバイルでもゲームやソーシャルメディアなどを中心に積極的に動画を用いた表現が増えています。 GIFやH.264に足りないもの こうした動画表現を実現する技術には複数の選択肢がありますが、モバイルとWebサイトの両方での対応を考えると、GIFアニメーションかH.264のいずれかを選択するのが一般的でしょう。しかしGIFアニメーションは色数が256色と限られ圧縮率も低いため、小さなサイズで数秒程度といった最小限の動画再生にしか向きませんし、音声との同期も困難です。一方、H.264は高精細
[JS]これは便利！YouTubeの動画をはじめ、VineやTEDやCodePenやツイートやPDFやGoogleマップまで簡単にページに埋め込めるスクリプト -Embed.js
デモ：Googleマップ Googleマップもサポート。 Embed.jsの使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="path/to/jquery.embed.css"/> <script src="path/to/jquery.min.js"></script> <script src="path/to/jquery.embed.js"></script> </head> Twitterを埋め込む時には「widgets.js」、コードのシンタックスハイライトには「highlight.min.js」を使用します。 <head> ... <link rel="stylesheet" href="path/to/jquery.embed.
![[JS]これは便利！YouTubeの動画をはじめ、VineやTEDやCodePenやツイートやPDFやGoogleマップまで簡単にページに埋め込めるスクリプト -Embed.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/c7f1b78c4054290453044ec517a54e1f30348b63/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015041500.png)
Analyticsトラッキングコードの外部ファイル化と検索エンジンの追加
Google Analyticsのトラッキングコードを変更したいときは、全てのページをその都度修正する必要があって面倒ですね。そんなときはトラッキングコードを外部ファイルにしておくと便利です。またSEOにも効果的です。 トラッキングコードの外部ファイル化と一緒に、トラッキングコードに追加する検索エンジンのコードを整理したので、合わせて紹介します。Analyticsの非同期トラッキングコードに対応しています。 まず、Analyticsトラッキングコードの外部ファイルを作成します。中身はGoogle Analyticsの非同期トラッキングコードそのままで、前後の<script>タグを削除します。 analytics.js： var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-XXXXXXXX-X']); _gaq.push(['_track
徒然日記 Google Analyticsの解析コードを外部JSファイル化する方法
こんにちは、SUHです。 皆さんに質問ですが・・・。 皆さんは、ブログやホームページのアクセス解析ツールに『Google Analytics』を利用していますか？ 今回の記事では、このGoogle Analyticsの解析コードを外部ファイル化する方法を紹介したいと思います。 Google Analytics Google Analyticsというのは、Googleが提供している無料のアクセス解析ツールです。 このGoogle Analyticsを利用すると、一日毎の訪問者やページビュー数、各ページの訪問者やページビュー数、ユーザーの利用環境などの様々な統計情報が取得出来ます。 そのため、ブログやホームページの管理者はこの情報を利用することで、どのページに人気があるのか、どのページが長い時間滞在しているのか、などの詳細な分析が行えます。 Google Analyticsは、以下のア
フォームの入力項目をリアルタイムでチェックするJavaScript「Valid8」
最近お問い合わせフォームでリアルタイムに入力項目をチェックするサイトが増えてきているように感じます。 ユーザビリティを向上させられ、お問い合わせ数の増加に期待できそうです。 JavaScriptのライブラリ「jQuery」のプラグインValid8を使用すると簡単に導入できます。 sponsors 使用方法 Valid8からjquery.valid8-1.2.2.jsをjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.valid8-1.2.2.js"></script> <script type="text/javascript"> $(document).ready(fun
IE10 以下を切る場合の JavaScript チェックリスト - Qiita
この投稿は、 JavaScript Advent Calendar 18日目の記事です。 更新履歴 こちら をご覧下さい JavaScript の書き方をアップデートする JavaScript Good Parts で書かれているような JS の書き方は、古くなりつつある部分も多いです。 正直なところ、自分はあの本が「今でも」良書だとは思っていません。 初学者に勧めることもしません。まんべんなさと普遍性と客観性から「パーフェクト JavaScript」 を勧めています。 その頃と比べると、 JavaScript をとりまく環境は変わりました JavaScript の進化に合わせて書き方もアップデートしていくべきなので、今回は分かりやすいしきい値として 「IE10 以下を切れるとしたら」 という前提で、列挙してみます。 たとえば XHR2 や File API に依存したサービスをやる場合な
JavaScriptのいろいろなコーディングルールをまとめてみた
JavaScriptの書き方はJavaScript自体がある程度自由なためいろいろな書き方ができますが、一貫性を持って書いた方がバグなども発生しにくくなるため、コーディングルールを定めておくのはよいことだと思います(特に複数人の開発の場合) 有名な企業やライブラリはコーディングルールも公開している事が多いので適当にまとめてみました JavaScript style guide – MDC Docs Mozilla/Firefox向けのものなので、一部ECMAScriptの範囲を超えたものも含まれています。 多くの人が見ていると思うので、見たことない人は一度読んでみるといいです。 jscsにこのコーディングルールをチェックするプリセットが用意されています。 Google JavaScript Style Guide Google JavaScript Style Guide 和訳 — Goo
RubyとNode.jsでIFTTTみたいなものをつくる - Qiita
今、個人でmupsというIFTTTみたいなサービスを作っています。 IFTTTは便利なんだけど、あまり国内のサービスには対応しておらず、その点が個人的には不満だった。 その課題を解決すべく、RubyとNode.jsでIFTTTみたいなものをつくってみることにした。 あと、ここ最近ずっとAndroidアプリ開発ばかりだったので、最近のWeb周辺技術を勉強したかったという目的もあった（Rubyをちゃんと触るのは初めてだった）。 システム構成 ↑は理想図です。実際のところアプリなんてできてないし、サーバもさくらVPS一台のみ。 mups-web Nginx + Unicorn + Sinatraで動く普通のRuby製Webアプリケーション。 最初はRailsを使おうかと思ったけど、今までWeb開発はPHPばかりでRuby自体ちゃんと触るのは初めてだったし、それに加えて学習コストが高いと噂のRai
jQuery でなんか書くときのちょっとした規約 - 犬ターネット
規約ってほどでもないけど、jQuery でコード書くときは以下みたいな感じで書くことが多くなった。 どう書こうが好みだろうけど、jQuery オブジェクトに $ を付けるくらいはしといたほうがよい。
JavaScriptの外部ファイル-JavaScript入門
HOME JavaScript入門 JavaScriptの外部ファイル このページではJavaScriptを外部ファイルで指定する方法について解説します。外部ファイルにソースを書いておくと複数のページから参照することができるので、良く使う関数などを記入しておくと非常に便利です。 外部ファイルの使用方法 外部ファイルを作成する 外部ファイルはJavaScript専用のファイルになります。 従って、HTMLの中にJavaScriptを埋め込む時に使った<script>～</script>を記入する必要はありません。 直接JavaScriptのソースを書いていきます。 外部ファイルを保存する時に、拡張子を.jsにします。 こうすることによって、JavaScript専用ファイルになります。 外部ファイルを読み込む 外部ファイルを読み込む場合、以下のように記述します。 <script type="t
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jquery.jpostal.js サンプルフォーム – Ninton G.K.
サービス終了のお知らせ