レスポンシブな日付ピッカー実装jQueryプラグイン「pickdate.js」:phpspot開発日誌
Pickadate.js レスポンシブな日付ピッカー実装jQueryプラグイン「pickdate.js」 $('.datepicker').pickadate()、とするだけで次のような大きめの日付ピッカーを表示して日付を選択出来ます。 スマホ、タブレットも自動対応。デザイン的にBootstrapで使ってもいけそうですね これは１つで大体の端末に対応できそうで便利そうです。 関連エントリ Google風のBootstrapテーマ「GoogleBootstrap」 Bootstrapで矢印を描くのなら「Bootstrap Arrows」 Bootstrapに270の使えるアイコンを追加できる「Elusive icons」 TwitterBootstrapベースのWYSIWYGエディタ「bootstrap-wysihtml5」 Twitter BootStrap に追加できる５つのコンポーネン
モダンなサイトを作成するためのCSS3チュートリアル集:phpspot開発日誌
Latest CSS3 Tutorials For You To Create Modern Websites モダンなサイトを作成するためのCSS3チュートリアル集。 CSS3のテクニックがあつまったチュートリアル集のご紹介。自分に無い知識を取り入れるために参考にできそう。 いつも進んでる感を感じますが、もうずっと進化し続けるんでしょうね。 関連エントリ CSS3でChrome風ウィンドウを作成するチュートリアル 使えない(?)CSS3ジェネレーター「Useless CSS3 Generator」 CSS3でボーダーを超かっこよくアニメーションするサンプル CSS3ベースのオシャレな価格表作成チュートリアル
1TBのファイルが送れる便利サービス | モノストック｜mono stock｜デザインの便利ネタ
昔からデザインの現場ではFTPなどを使って膨大なファイルをやりとりすることが多いのですが、近年オンラインストレージサービスが増えて、FTPなど少し専門的なことがわからないクライアントさんでも対応できる便利な時代になりました。 ただ、時代が流れると共に送信したいデータの大きさも増える一方。そんななか1TBの大容量がメールで送れてしまう新サービス【SoShare】が注目を集めているようですね。 やはり1ファイルのアップロード制限が250MBなど一度に送れる容量が少ないサービスに比べ【SoShare】は一気に1TBファイルを送れるわけなので、重宝しそうです。 私が愛用しているFireStorageはファイルを ・アップロード ・リンクURLをメールに貼り付け という手順ではなく、 宅ファイル便のサービスと似ている手順で、 ・ファイルアップロード ・件名・本文・アドレスを入力 ・送信というタイプで
様々なコードスニペットを保存、編集できる・「SnipSave」 - かちびと.net
SnipSaveは、スニペットコードを保存できるシンプルなコード共有サービスです。ユーザー登録も無料。高機能では有りませんが、使いやすく、広告も無いので見やすいです。 SnipSave
[JS]1.9から仕様が大きく変わったjQueryの複数のバージョンでのテストを簡単にできるスクリプト -version.js
jQueryは1.9から大きく仕様がかわり、プラグイン開発者やウェブ制作者は今まで以上に各バージョンの互換性に苦労するようになりました。 たった一行加えるだけで、jQueryの複数のバージョンでのプラグインやウェブサイトの動作テストを簡単にできるスクリプトを紹介します。 ※jQuery以外のスクリプトにも対応しています。 デモページ version.jsの使い方 使い方は簡単！ テストページに一行加えるだけです。 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <script src="version.js" data-url="google" data-lib="jquery" data-ver="1.5.0"></script> Step 2: スクリプトの実行 あとはjQueryのバージョンをパラメータに付与し、ページをロードするだけです。 http://
ウェブ上の画像や動画などを直接Dropboxに保存できる拡張機能「Download to Dropbox」 : 二十歳街道まっしぐら
Download to Dropboxはウェブ上のデータをDropboxに直接保存できる拡張機能です。 画像や動画、zipファイルなどどんなものでもそのままDropboxへ転送できます。 わざわざローカルのDropboxのフォルダを指定して保存することなく、 ワンクリックでDropboxへ転送できる手軽さが便利です。 以下に使ってみた様子を載せておきます。 まず「Download to Dropbox」にアクセスしましょう。 Chromeに拡張機能をインストールします。 インストール後、拡張機能を使おうとするとDropboxへのアクセス権限を求められるので許可します。 このようにDropboxへ保存したい画像やファイルの上で右クリックし、 「Upload to Dropbox」を選択すると、直接あなたのDropboxへダウンロードできますよ。 Dropboxをよく利用する方には重宝する拡張
簡易的なSyntax Highlighterを実装する - かちびと.net
Result コードはまだ実験的なもののようです。本当に簡易的なものだけど少ないコードで済むのは良いですね。 jQuery // Pure JQuery Syntax Highlighter by Taufik Nurrohman // Still an experimental :) // https://plus.google.com/108949996304093815163/about $(window).load(function() { $('pre').each(function() { //特定のキーワードをリスト化 var list = "(true|false|null|main|in|endif|if|endfor|for|while|finally|var|new|function|do|return|void|else|break|catch|instanceof
HTML、CSS、JavaScriptのコード整形ツール・「Dirty Markup」 - かちびと.net
Dirty Markupは、HTMl、css、JavaScriptのコードをインデントして整形してくれるツールです。高機能ではありませんが、シンプルで使いやすく、動作も軽量です。 Dirty Markup
プロダクトを360度回転させられるjQueryプラグイン「Threesixty-slider」:phpspot開発日誌
Threesixty-slider by creativeaura プロダクトを360度回転させられるjQueryプラグイン「Threesixty-slider」。 画像をドラッグ＆ドロップやコントロールボタンのクリックで回転させられます。 自動で回転させられる再生ボタンを付けることも可能 実装コード例。画像のパスや拡張子、prefixなどで複数の画像を設定してまわせる模様。 元画像のかっこ良さもあって、入れてみたいなぁという気になっちゃいますね 関連エントリ プロダクト画像を360度回転させられるようにするjQueryプラグイン５つ スマホタッチでくるくる回転させられるjQueryプラグイン「Touchy」。 ドラッグで回転する3Dオブジェクトが作れる「ThreeSixty」
jQueryで右クリックを禁止させる方法｜BLACKFLAG
Webサイト制作の際にクライアントからの要望などや 画像を簡単に保存させたくない時など、 右クリック動作を禁止させることがたまにあるかと思います。 右クリック禁止はJavaScriptで簡単に実装できますが jQueryを使うと、より簡単に実装することができたので メモ書きとして紹介してみます。 まずは単純にページ全体に対して 右クリック禁止させる方法は以下のような記述になります。 ◆SCRIPT $(function(){ $(document).on('contextmenu',function(e){ return false; }); }); もしくは、 ◆SCRIPT $(function(){ $('body').on('contextmenu',function(e){ return false; }); }); 「contextmenu」が右クリック動作にあたるようなので
iPhone⇄Macドラッグ&ドロップで簡単にデータ交換できるアプリ
こういうアプリケーション待ってました。instashareというアプリケーションでiPhoneの中のデータをドラッグ＆ドロップでMacに送る、またその逆もでき、iPodからも同様の操作ができる超便利アプリです。 iPhoneで撮影した写真をすぐにMacに送りたい時に便利ですね、 ・Mac用のアプリケーションをインストール ・iPhone／iPod用のアプリケーションも同じくインストール ↑Mac側はメニューバーにinstashareのメニューが追加され、このウィンドウにファイルを投げると、Wifiネットワーク内にいる近くのiPhoneを探してくれます。 逆にiPhoneの方のアプリを起動すると↓こんな感じでカメラロールを参照できるので、Macに送りたいアイテムをタップしたままホールドしてドラッグすると、同じく近くにいるMacを探してくれます。 ちょっとブログの記事を書きたいときなどに便利な
前ブラウザのブラウザハックまとめ「Browserhacks」:phpspot開発日誌
Browserhacks 前ブラウザのブラウザハックまとめ「Browserhacks」 Chrome,Firefox,IE,Opera,Safariのハックが1ページにまとまっていて便利。 CSSによるハック方法と、JavaScriptによるハック方法が網羅されてます。 ブックマークしておけばとりあえず使えそうなサイトですね 関連エントリ ブラウザ上でまるで美術館。3Dイメージギャラリーデモ ブラウザ上での音声再生に使えるシンプルプレイヤー「Audio5js」 ブラウザ上でZenCodingできるEmmetのサイト「Emmet.io」 PNG画像をブラウザにドラッグ＆ドロップすればPNGを無劣化圧縮してくれる「TinyPNG」 CSSスプライトをブラウザにD&Dで速攻作れる「Instant Sprite」 CSSのブラウザ対応状況が一発で分かる「BrowserSupport」
WordPress春のお掃除大作戦！データベースをキレイにし最適化する方法
WordPressはバグフィックスやセキュリティパッチで最新のバージョンにしておくと、かなり強靱で効率的なアプリケーションです。しかし長く使っていると、データベースに不必要な値が貯まってしまい、それが原因でサイトの速度を遅くしてしまいます。 WordPressのデータベースを掃除し、各種設定を見直し、最適化する方法を紹介します。 How To Clean Up & Optimize Your WordPress Install 下記は各ポイントを意訳したものです。 1. データベースのバックアップ 2. ファイルのバックアップ 3. 使用していないプラグインのゴミを掃除 4. 自動保存された記事の掃除 5. 記事のメタデータを掃除 6. サムネイル生成を停止 7. スパム判定待ちを削除 8. 古い記事だけコメントを閉じる 9. データベースの最適化 10. 最後にセキュリティのチェック 1
シンプルで汎用性に優れたレスポンシブ対応のタブコンテンツ -Basic Tabs
jQueryとCSS3アニメーションを使ってシンプルに実装する、レスポンシブ対応のタブコンテンツを紹介します。 BasicTabs - The Simple jQuery/CSS3 Solution Basic Tabsのデモ Basic Tabsの実装 Basic Tabsのデモ タブはレスポンシブ対応で、表示サイズに合わせて最適化されます。 タブの切替はCSS3アニメーションで、左からフェードインで表示されます。このエフェクトの変更は簡単です。 デモページ：幅480pxで表示 Basic Tabsの実装 実装は非常にシンプルなので、カスタマイズも簡単だと思います。 Step 1: HTML HTMLは非常にシンプルで、タブはリスト要素、コンテンツはdiv要素で配置します。 <div id="tabwrap"> <!-- TABS --> <ul id="tabs"> <li class
API経由でHTML等をPDF,Office,EPUB形式に変換できる「Docverter」:phpspot開発日誌
Convert Plain-text Documents to PDF, Docx, and ePub with Docverter:: Docverter API経由でHTML等をPDF,Office,EPUB形式に変換できる「Docverter」 サーバに対してAPI経由でcurlなどでリクエストしてファイルのフォーマット変換が可能。 ソースがGithubで公開されているのでダウンロードして自前のサーバに設置して利用出来ます。 HTML→PDFというのはなかなか需要がありそうですが、これをAPI経由で変換できるというのは便利ですね。 出力に関しては次のようなフォーマットに出力出来ます。 関連エントリ HTML内にPDFを埋め込めるJSプラグイン集 JavaScriptのコードでPDFを生成できる「jsPDF」 ブラウザ上でPDFを表示するJSライブラリ「PDF.js」 手書きでサイトや
レスポンシブなメニューを導入！jQueryプラグイン「MeanMenu」
twitter facebook hatena google pocket 昨今流行っているレスポンシブ・ウェブデザインですが、メニューの扱いに悩むことがあるかもしれません。 jQueryプラグインのMeanMenuを利用すれば、ウィンドウサイズに応じてメニューを最小化してくれます。 よくあるスマホサイト風になり、お悩みが解消されるかもしれません。 sponsors 使用方法 下記のようなメニューがあるとします。 <nav> <ul id="nav"> <li><a href="#">Top Level Link</a></li> <li><a href="#">Top Level Link</a></li> <li><a href="#">Top Level Link</a></li> <li><a href="#">Top Level Link</a></li> </ul> </nav
レスポンシブなiPhoneのサイドメニューっぽいメニューが作れるjQueryプラグイン「Sidr」:phpspot開発日誌
レスポンシブなiPhoneのサイドメニューっぽいメニューが作れるjQueryプラグイン「Sidr」 2013年03月05日- Sidr - A jQuery plugin for creating side menus レスポンシブなiPhoneのサイドメニューっぽいメニューが作れるjQueryプラグイン「Sidr」 iPhoneのfacebookアプリなどで採用されている左や右にスライドするメニューをブラウザ上で実現できるjQueryプラグインです PCでも違和感なく使えるのは嬉しいですね メニューが開いていない状態。 開くと画面が左にスライドしつつ左からメニューが表示されます テーマも白と黒から選べるみたい 関連エントリ Facebookアプリ風パネルメニューのCSS実装デモ「cssPanelMenu」 HTML5＆CSS3なフリーのドロップダウンメニュー２５ レスポンシブなCSSベー
指定した画像のファイルサイズを激減できるサービス「Compress PNG images」 : 二十歳街道まっしぐら
Compress PNG imagesはPNGイメージを高圧縮できるサービスです。 画像に利用する色の数を減らすことでファイルサイズを圧縮できます。 ある程度色を減らしても見た目あんまり変わらなかったりします。 PNG画像のファイルサイズを減らしたいときにどうぞ。 JPG, GIFなどの画像を選択すると、PNG化してさらに圧縮してくれます。 以下に使ってみた様子を載せておきます。 まず「Compress PNG images」にアクセスしましょう。 まず圧縮させたい画像を選択しましょう。 画像ファイルならJPG, GIF, BMPでもOKです。（出力はPNGになります） 読み込んだ画像を圧縮させます。 利用する色の数を減らしていくことでファイルサイズがぐんぐん減っていきます。 ちょうどいいなと思った所で「COMPRESS」ボタンを押して、圧縮された画像をダウンロードしましょう。 画像のファ
[JS]実装は簡単で高性能、ロード無しでページを次々に表示するスクリプト -Navi.js
複数のページをブラウザのロード無しで、アニメーションで次々に表示するjQueryのプラグインを紹介します。 これ系のスクリプトはいくつか紹介してきましたが、ページタイトルの設定やネスト、戻る・次へボタンの対応など、使い勝手もなかなかです。 Navi.js Navi.js -GitHub Navi.jsの特徴 Navi.jsのデモ Navi.jsの使い方 Navi.jsの特徴 Navi.jsの仕組みは一つのファイルに複数のページのコンテンツを配置し、それをページごとに遷移するように表示します。 タブ、ナビゲーション、カルーセル、ページネーション、パンくずをサポート コンテンツにあったページタイトルを表示 戻る・次へボタンのサポート コンテンツのネストをサポート スライドアップ、スライドレフト、スライドアップ・レフト、フェードのエフェクトを用意 AJAXサポート Google Analytic
Google Mapのルート表示なども簡単に表示できるjQueryプラグイン「Maplace.js」
twitter facebook hatena google pocket Google Mapを表示するJavaScriptはそこそこ簡単ですすが、ルート表示させるとなかなか厄介です。 jQueryプラグインのMaplace.js - A small Google Maps Javascript helper.を利用するとルートを簡単にプロットできたり、特定位置をつなぐ、塗りつぶすなど簡単に表示させられることが可能です。 sponsors 使用方法 Maplace.js - A small Google Maps Javascript helper.からファイルをダウンロード。 <script src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry&v=3.7"></script> <script t
アニメーションしながらソートできるjQueryプラグイン「Animated Table Sorter」:phpspot開発日誌
jQuery Animated Table Sorter アニメーションしながらソートできるjQueryプラグイン「Animated Table Sorter」。 ソート可能なテーブルを実現するjQueryプラグインはよくありますが、アニメーションするのははじめてかも。 どこからどこに移動したか？という部分が分かりやすく、一瞬でソートされてしまうテーブルよりもカッコ良いだけではなく使い勝手もよさそう 関連エントリ シンプルにテーブルにソート機能を持たせるだけのjQueryプラグイン「jQuery Table Sort」 テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」
シンプルなコードスニペット共有サービス・「Code Pad」
Code Padはシンプルなスニペット共有サービスです。招待制となっていますので投稿テスト等のノイズもありません。クリック一発でコピーしたりDL可能となっています。 Code Pad
CSSファイルやJavaScriptファイルを閲覧した際に自動整形して表示するChromeエクステンション・PrettyPrint - かちびと.net
ブラウザでCSSやJavaScriptのファイルを見たときにソースを自動整形して表示するChromeエクステンション・PrettyPrintのご紹介。地味に便利・・かも。 ブラウザでCSSやJSファイルを見たときにソースをインデントするエクステンションです。便利っちゃ便利かも。
3Dちっくにカッコよく全画面スライドさせられるJavaScript「Kontext」
twitter facebook hatena google pocket MACでプレゼンをしている人を見ているとその動きに思わず自分もMACを欲しくなる人いませんか。 ちょっと待って、購入ボタンを押す前に、Windowsでもかっこ良く全画面をスライドさせられるJavaScript「hakimel/kontext」を試してみませんか。 スライド間の切り替えをかっこよく3Dぽくしてくれます。 sponsors 使用方法 hakimel/kontextからファイル一式をダウンロードし、JavaScriptとCSSを下記のように記述します。 <link rel="stylesheet" href="kontext.css"> <link rel="stylesheet" href="demo.css"> <script type="text/javascript" src="kontext.j
SpaceChemっていうプログラミング系ゲームがクソ面白い件について - キモブロ
すごいアバウトに言うとプログラミングするゲーム。(日本語版あり。設定に言語設定があるのでそこで設定すれば初めから日本語が使える。) SpaceChemの公式サイト → SpaceChem たとえば水(H2O)を作るためにOにHを2個くっつけるためにどういう風にデバイスを設置していけばよいか、みたいな機械のフローチャートを書く感じのゲーム。すごくプログラミングっぽい。ただ、このゲームに化学物質や化学式の知識は一切必要ない。幾何的にどういう配置にすればよいかというのが常に画面に表示されてるので。 結合するだけじゃなくて化学物質の分離の問題もある。以下の問題はフッ素(F2)をF単体に分離する機械を作れというもの。 このゲームは音楽がまじでかっこいい! 概要を説明すると、赤と青の二つのレーンがあって、それぞれの上をクレーンみたいなのが動く。この赤と青の線は自在に配置することができる。そしてその線上
Googleリーダーの代りとしてチェックしておきたい5つのRSSリーダー
Googleリーダーの代りとしてチェックしておきたい5つのRSSリーダー Googleリーダーの代替リーダーということで先日『Feedspot』と『The Old Reader』の2つを取り上げましたが、その他にWebベースのRSSリーダーということで特にまだあまり取り上げられていないものをいくつかピックアップしてみました。 量が多いので細かいレビューは書きませんが、参考にしてもらえればと思います。 1kpl.us 表示画面はGoogleリーダーに非常に近いです。 フィードはOPMLでインポート可能です。 Rssminer Googleアカウントを使ってログインしてGoogleリーダーからインポートできます。 フィードの読み込みが異様に速いです。 Pheedr 「Minimalist RSS reader」のタイトルが示すようにシンプルでミニマル主義を貫いたRSSリーダーです。 OPMLで
JSでのCanvas操作を簡単かつ高機能にできる「Fabric.js」:phpspot開発日誌
Fabric.js Javascript Canvas Library JSでのCanvas操作を簡単かつ高機能にできる「Fabric.js」 canvasのネイティブAPIは若干分かりづらいという方も多そうですが、このライブラリを使えばオブジェクト指向で楽々Canvasプログラミングが出来そうです 単に便利にコーディングできるようになるだけでなく、オブジェクトをマウスで拡大や回転できるなどといった色々な機能も盛り込まれていて便利そうです ネイティブAPIだと、四角形を描画するのに、次のようなコードを書きます。 これが、Fabric.jsを使うと次のように、とても分かりやすくなります。fillRectの引数の順ってどうだっけ？と毎回リファレンスを牽く必要もなくなりますね 他にもドキュメントを参照すれば、CanvasをネイティブAPIで書く面倒さを理解できるはず デモページも結構充実しており
画像クリックでその場で色々な形でズームできるjQueryプラグイン「Nivo Zoom」:phpspot開発日誌
Nivo Zoom - jQuery Image Zoomer 画像クリックでその場で色々な形でズームできるjQueryプラグイン「Nivo Zoom」 5種類のズームタイプ、HTMLキャプションを画像に重ねたりできる画像ズームプラグインです 定番のズームプラグインも既にありますが、比較検討の際に検証してみるのもいいかもですね。 関連エントリ 製品画像等のズームが非常に簡単に行えるjQueryプラグイン「Image Zoom」 マウスホバーだけの簡単操作で画像をズームできて便利な「jQuery Zoom」
カフェをはじめ、医療・映画・工具・虫系など、ちょっと変わったPhotoshopのシェイプ素材
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
リリース前に確認すべきアナリティクス設定必須項目5+1個
こんにちは。久しぶりの投稿になりました。ナカムラです。 随分前に「備忘録の意味も含めてアナリティクス回りの事前設定項目まとめる！」とFBで宣言していながら長いこと放ったらかしてしまいごめんなさい。 書く前から長くて面倒な記事になると分かっているネタなので、今回は色々端折ってメモ書きみたいな感じで書いていきます。（手抜きとも言う） まずはコンバージョンのポイントを確認 とりあえずそのサイトのコンバージョン（成果）となるユーザーの行動が何なのか？を考えて明確にしておきます。当たり前のようで、やってない人は本当にやってないのでチェック項目として。 ECサイトなら：商品購入、会員登録、商品詳細ページに30秒以上滞在 など LPなら：本体サイトへの誘導、またはLP内での申し込み など ブログなら：広告バナーをクリック、1ユーザーが3ページ以上見る など ありがちなミスとしては、コーポレートサイトのC
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
シンプルなオンラインSVGエディタ・「Method Draw」 - かちびと.net
オンラインでCSSやJavaScriptを圧縮・「Online YUI Compressor」
難読化、圧縮されたJavaScriptコードを綺麗に整形・「Online javascript beautifier」 - かちびと.net
CSSからLESSへ変換・「Css2Less」 - かちびと.net
Illustratorのデータをcanvasに変換する・「Ai to Canvas」 - かちびと.net
ドラッグ&ドロップでファイルのアップロードを可能にするJavaScriptライブラリ – creamu
jQueryとCSS3を使った円形の画像がフリップするスライドショー – creamu
http://www.cmmntr.com/t/6c5d0df4d1e22e50c75f67b6d2c421fc
cmmntr.com
http://www.cmmntr.com/t/ce71317401c3772d6b9acca32c4704c7
Loading...
IE10をはじめ、Firefox, Chrome, Safari, Operaなど各ブラウザの枠のPSD素材のまとめ
Loading...
Loading...
Loading...
高機能なカラーピッカーを実現出来るjQueryプラグイン「Spectrum」:phpspot開発日誌
cmmntr.com
オンラインでお好みサイズの方眼紙が作成できる「Paperkit」:phpspot開発日誌
cmmntr.com
Loading...
cmmntr.com
http://www.cmmntr.com/t/642e9d8c9300a4c36c2a7a2017616d41