Sublime Textの作業効率を飛躍的に上げるプラグイン31個 | aucfan Engineers' blog
こんにちは、湘南生まれデトロイト育ちのきんぐです。 入社してから1年半ほどWebマーケターをやった後、気付いたらエンジニアになってました。 そんなこんなで異動してから9ヶ月が経ち、合コン等で Q.「お仕事は何されてるんですか？」 A．「うぇ・・うぇぶえんじにあです。ほーむぺーじの運営してます。」 くらいは言えるようになったので、 本日は僕の相棒とも呼べる Sublime Text 2(3)のオススメプラグインを紹介したいと思います。 （そんな技術的なこと書いても、ね。） 私はSublime Text 2を使っていますが、これから導入する方はせっかくなので3使いましょう。 （当時2にあって3にはないプラグインがあった為未だに乗り換えてません） ※Sublime Textのインストール方法などは端折りますので、知りたい方は各自ggってくださいませ。 ■絶対入れるよねプラグイン ●A
シンプルにモーダルウィンドウを実装できる「leanModal」
「leanModal」は、シンプルにモーダルウィンドウを設置できるjQueryプラグインです。オプションは少なめですが、複雑な機能は必要なく単に設置したいという場合にはもってこいのライブラリだと思います。デモ スクリプト <script src="jquery.min.js" type="text/javascript"> <script src="jquery.leanModal.min.js" type="text/javascript"> <a rel="leanModal" href="#div787">Edit</a> <div id="div787"><<モーダルウィンドウ内に表示する要素>></div> <script type="text/javascript"> $(function() { $( 'a[rel*=leanModal]').leanModal({ top:
jQueryでスクロールすると上部に固定されるナビゲーション
Posted: 2012.02.21 / Category: javascript / Tag: jQuery グローバルナビゲーションはロゴの下に配置されていることが多いですが、スクロールするとナビゲーション部分だけが上部に固定されるようなものをjQueryでやってみたいと思います。 html & css htmlです。 html <h1><a href="#">タイトル</a></h1> <div class="nav"> <ul class="clearfix"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">LINK</a></li> </ul> <!-- /#nav --></div> <div id="artic
シングルページなサイトをデザインする上で、知っておいて損は無いかもしれないプラグインとか色々！ | バンクーバーのうぇぶ屋
最近多いですねー、1ページで完結するタイプのサイト。One Page Loveのサイトなんかから、シングルページの事例も大量に見ることが出来ますし、パララックスやらフリップ型のコンテンツやら、なんか色々出てきてて着いて行くのがやっとです… でも実際シングルページをつくろうとすると、え？何これどうなってんの？って物も多くてビビることもしばし。 ってことで、今日は僕が知ってる中で『お、これ、シングルページ作る時に使えるんじゃね？』って物を幾つかご紹介させて頂きます！ 主にはシングルページデザインの表現の幅を広げるjQueryプラグインの紹介になるかなと思いますが、楽しい物も多いので、是非興味があれば試してみてくださいませ〜！ それではいってみましょー！ パララックススクローリング系プラグイン この辺は以前に紹介したことがあるものばかりなので、ぱぱーっと行きます。 jQuery Waypoint
Photoshopのレイヤーパネルでの面倒な作業をいろいろ便利にする機能拡張
複数のレイヤーの名前を同時に変更したり、空のレイヤーを1クリックで全て削除したり、スマートオブジェクトを一括でラスタライズしたりなど、Photoshopのレイヤーパネルでの面倒な作業をいろいろ便利にする機能拡張を紹介します。 機能拡張は無料で利用でき、Photoshop CC/CS6に対応しています。 Layrs Layrsの機能 Layrsのインストール Layrsの使い方 Layrsの機能 Layrsが備えている機能は、全部で5つ。 制作時に役立つものから、コーダーに渡すために仕上げる時にも役立つものが揃っています。 Layer Name Editor 複数のレイヤーの名前の先頭や末尾に文字を加えたり、置換します。 Remove Unused Effects 使用していないエフェクトを削除します。 Flatten All Layers Effects レイヤーのエフェクトをフラットにし
ヌルヌルの秘訣はCSS！Googleスマホ版で採用されている使い心地のよいスライドメニューを再現した『jSlideMenu』
以前『スマホサイトにおすすめ。jQueryプラグイン『PageSlide』を使ってFacebook風メニューを再現してみました 』という記事を書きましたが、今回は『Qiita [キータ] – プログラマの技術情報共有サービス 』にてGoogleでも採用されているCSS3のアニメーションを使ったスライドメニューというものを発見したのでご紹介します。 jQueryプラグイン『jSlideMenu』 なんでも作者の方はGoogle先生のソースコードを調査し、あのヌルヌル動くスライド部分のアニメーションがJSではなく実はCSS3のtranslateで行われていることを突き止めたんだとか。 CSS – Googleから学ぶ ヌルヌルサクサクなスライドメニュー – Qiita [キータ] スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきや
iPhone/Android/PCのブラウザ対応、フリック操作をシンプルに実装できるjQueryプラグイン - makogの日記
自作のjQueryプラグイン、jQuery.flickSimpleを公開します。 jQuery.flickSimple デモ / マニュアル（iPhone/Androidでもご覧いただけます） jQuery.flickSimple ダウンロード（github） これは、iPhoneの特徴的なインタフェースであるフリック操作を、Webサイト上で実現するための jQueryプラグインです。某サイトのiPhone版のためにだいぶ前に書いたもので、当時はiPhone専用だったのですが、Android対応の依頼を受けたのをきっかけに、PCのブラウザにも対応しようと、大幅に作り直したものです。 フリック動作を実現するjQueryプラグインは既にいくつかあります。機能としても実装としても、私が作ったものより優れているものもあると思いますが、まずは公開することに意義がある、ということで。 ちなみに、このス
Google+1/Twitter/facebookいいね!/facebook Share/mixiチェック/mixiイイネ!/GREEいいね/Evernote/はてブのボタンを超カンタンに作れる jQuery.socialbutton プラグインを作ったよ
2011年04月30日 03:45 引き続きv1.7.2を検証していた際、IE6～IE8でメモリがうまく開放されないケースがあったため、 対策版としてv1.7.3をリリースしました。 ご迷惑をおかけしますが、最新版へのアップデートをお願いします。 2011年04月30日 00:15 jQuery.socialbuttonのXSS脆弱性につきまして、対応版のv1.7.2をリリースしました。 v1.7.2以前のバージョンでは、urlオプションを指定せずに以下のボタンを呼び出した際、無害化されていない document.URLを参照することが原因で、XSS脆弱性が発生します。 mixi いいね facebook いいね GREE いいね 新はてなブックマーク 旧はてなブックマーク ご迷惑をおかけしますが、最新版へのアップデートをお願いします。 2011年04月29日 02:40 現在、jQuer
タブやアコーディオン、パララックスなどを実装出来るjQueryベースのUIツールキット・jKit
jQueryベースのUIツールキット・jKit のご紹介です。タブやアコーディオン などの良く使われるものから、簡易的 なパララックスやバリデーション、ズ ーマーなどなど多機能なUIキットとな っています。 2013年になりました。喪中により新年の御挨拶を控えさせて戴きます。皆様に取って本年が充実した年でありますようお祈りいたします。 さて、今日はUIキットのご紹介。jQueryベースとなっています。 jQuery UIでいいじゃんと思う方も多そうですけど、選択肢があるに越した事はありません。 ずらっと並んでいます。機能は42種とかなりの数です。 使い方は基本的には他のプラグインと変わりありません。コアとjKitを読み込んでセッティングします。 DOM要素にrel属性を与える形で実装します。 <div id="foo" rel="jKit[accordion]">例えばアコーディオンなら上
WordPress高速化に使えそうなプラグインを色々試してみた結果、けっこう早くなったのでご紹介。 / Maka-Veli .com
相変わらずWPにウトい僕ですが、 案件で急遽、高速化が必要になり、さくっとできるプラグインで対応したかったので調べてたんですが、せっかくなのでMaka-Veliにも入れて、色々試してみました。 といっても、実際に全て検証し切れてるわけでは無いですし、どんな物でどんな効果があるのかを検証しきれる能力も無いのでご注意ください。あくまでも「高速化に使えそう」と思った物だけなので、実際の効果は不明です。（わからずに使うとトラブル起きますしね）※あとで自分がみたいだけのまとめ兼用という記事です。 詳しくはそれぞれのリンク先と、プラグインをご紹介されている記事等でご確認頂ければと思います。 なお、検証にあたり数値を取得してるわけではありませんのでご了承ください。 WordPressの更新 とりあえずWPを最新版（現時点の WordPress 3.3.2 ）に入れなおしました。 まあベタです
CSS3による様々なエフェクトが選択可能なレスポンシブWebデザイン対応イメージスライダーを実装するjQueryプラグイン・REFINESLIDE
3Dやスライスなど、様々なアニメーション エフェクトを使用できて、且つレスポンシブ Webデザインにも対応可能なイメージスライ ダーを実装できるjQueryプラグインのご 紹介。REFINESLIDEというプラグインです。 覚えておいて損は無いのでは。 IEではフェードエフェクトのみになってしまいますが、iPhoneやiPadなどではcss3による様々なエフェクトを利用できます。スマフォ用として利用するっていうのも手ですね。 スマフォとかにも対応できるCSS3+jQueryなイメージスライダーです。3Dな感じのとかスライスしたエフェクトの素敵なもありますのでインパクトは与えられそうですね。 実機で問題なく動作しました。 Sample 上記はIE7でサンプルにアクセスした際の状態です。赤いラベルはそのブラウザでは非対応、という意味です。 以下、そのサンプルページになります。Chromeなら全
画像の任意の箇所にツールチップを配置出来るjQueryプラグイン・iPicture
画像内の任意の箇所に自由にホバーで テキストを表示するツールチップを 配置出来るjQueryプラグイン・iPicture のご紹介。この手のライブラリは、 実務でかなり有効的に使えますので 覚えて置いて損は無いのでは。 画像上にツールチップを配置出来るライブラリです。ECサイトや不動産、ホテル、アミューズメント施設などなど用途は沢山ありそうです。 こういうやつ。画像の上にオブジェクトを配置してマウスホバーで情報が見られる。 ECサイトなんかでは、こうやって生活してる写真にしてあげることでユーザーはプロダクトを使用してるイメージをしやすくなりますので、訴求力アップに貢献できます。 コード<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></s
アニメーションしながら少しずつ文字を表示させていくエフェクトを実装するjQueryプラグイン・Lettering Animate
使いどころもありそうだったので 備忘録。文字をアニメーションし ながら少しずつ表示させていく様 なエフェクトを実装できるjQuery プラグイン・Lettering Animate です。 プロダクトのキャッチコピーなんかもこの方法でユーザーの視点を誘導出来るかもしれないですね。Flashでは昔からよく見かける表現かもしれません。 lettering.jsにアニメーションエフェクトを追加したものになります。8種類のアニメーションエフェクトが用意されていました。 以下動作サンプルです。 Sample コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <script type="text/javascript" src
facebookのsocial plugin(ソーシャルプラグイン)一覧
facebookの機能をサイト上で使えるfacebook social plugin。僕が知らないだけかも知れませんが、今ではいろんな種類が出ています。今後も使用する機会があると思うので、調べるついでに一覧にしてみました。 facebookの機能をサイト上で使えるfacebook social plugin。 僕が知らないだけかも知れませんが、 今ではいろんな種類が出てるんですね。 今後も使用する機会があると思うので、 調べるついでに一覧にしてみました。 Activity Feed Comments Facepile Like Box Like Button Live Stream Login Button Page title Recommendations Registration Send Button Subscribe Button はじめに “Registration”以外のs
超定番の jQueryプラグインをサンプルと一緒に集めました。（商用利用OKなもの多め） | KAYAC DESIGNER'S BLOG - デザインやマークアップの話
超定番のjQueryのプラグインを厳選して集めました。 商用利用が可能なものを優先的にピックアップしています。 （利用する際はそれぞれライセンスをご確認くださいね） 超定番プラグイン アニメーションのイージングを簡単に扱えるプラグイン jQuery.easing jQuery.easing
jQuery effects, 150+ best for web developers and designers
Amazing freebies every week in your e-mail, don't miss the next ones with our newsletter, Sign up now. Mail: Since the arrival of the jQuery library, the life of JavaScript programmers have gotten a lot easier because now it’s simpler to develop web 2.0 applications. With jQuery, the programmers can keep their code organized and concise, which is the major slogan of the library, “write less, do mo
WordPressでどんなサイトでも作れちゃう気になれる無料プラグイン9個
2016年6月8日 Webサイト制作, Wordpress WordPressのプラグインってすごいですよね。少しカスタマイズするだけで思い通りの機能のついたWebサイトを作ることができます。今回は「えっ、こんなことまでできちゃうの？」と思わせてくれるような高性能プラグインをいくつか紹介します。WordPress 3.0から追加されたマルチサイト機能を使えばWebサービスとして運営することもできそうなもの多め。どんな風に使おうかわくわくしちゃいますよ！ ↑私が10年以上利用している会計ソフト！ 1. SNS BuddyPress WordPressをSNSとして運営することができるプラグイン、BuddyPress。過去記事「WordPressプラグイン「BuddyPress」でSNSサイトを作成」で詳しく紹介しています。
デザイナー・コーダー必見！使えるform関連jQueryプラグインの数々 | バシャログ。
こんばんは、最近ホルモン焼きにハマっているishidaです。 WEBサイト制作時、formは必ずといってもいいぐらい存在します。 お問い合わせフォームや会員登録フォームなどがすぐに思いつきますよね。 デザインをがっつりフォーム部分で作り込んでも、CSSのみでは、 実現できなかったりすることもよくあります。 そんなクセのあるformを、よりリッチに！かつ操作性を向上！できるjQueryプラグインの数々をご紹介します。 デザイナーの方は、フォームのデザインの参考に。 コーダーの方は、ページ作成時間の短縮に手助けになればと思います。 jQuery plugin: Validation フォームの入力チェック（バリデーション）が簡単にできるプラグイン。 エラーメッセージはlocalizationディレクトリ内に18言語用意されています。 日本語用は別途作成し、使用することが可能です。 jQuery
フォームで離脱させないためのjQueryプラグイン50選｜designaholic -Creative Column-
最近では、エントリーフォーム最適化（EFO）という施策も広まってきましたが、特に購入やサンプル請求、お問合せ等がコンバージョンとなっているサイトではフォームで離脱されてしまってはせっかくの広告や施策が水の泡になってしまいます。 ここではユーザーを離脱させないために気をつけたいポイントとそれを実現するために便利なjQueryのプラグインを紹介します。 まず、入力フォームを作成する際のポイントは、ユーザーにストレスを感じせない事です。ストレスの原因となるものは大きく言うと 入力しづらい、エラーメッセージがわかりづらい、といった操作に関するもの。 どこまでやれば完了なのかわかない、個人情報の扱いが心配、といった心理的なもの。 です。なのでこの点を解消させてあげるフォームを作成すればユーザーが離脱する可能性は下がりますね。 具体的なポイントは以下のような項目になります。 必須入力か
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
めしおのアフィリエイト教材レビューブログ